JavaScript estensione file: rilevare l’estensione di un file in JS

Spesso, in una web application, abbiamo la necessità di effettuare dei controlli sul tipo di file che viene selezionato in un campo di tipo input file.

Possiamo rilevare l’estensione del file con la seguente funzione JavaScript:

function getFileExtension(filename)
{
  var ext = /^.+\.([^.]+)$/.exec(filename);
  return ext == null ? "" : ext[1];
}

Avendo il campo input file, l’id univoco “myFile“, utilizzeremo la funzione per verificare se, l’estensione, è di tipo jpg, gif o png:

var file = $('#myFile').val();
 
var fileExt = getFileExtension(file);
 
if (fileExt!="" && fileExt!="jpg" && fileExt!="gif" && fileExt!="png")  {
 
            alert("Il file deve essere di tipo JPG, GIF o PNG!");
 
}

Finestra confirm con SimpleModal

Con l’articolo Simple Modal: finestre di dialogo personalizzate ti ho segnalato un ottimo plugin jQuery per implementare finestre modali, SimpleModal di Eric Martin.

Piccolo “tips“, se vuoi utilizzare la finestra “confirm” con questo plugin, la sintassi è la seguente:

confirm("Sicuro di voler eliminare l'immagine?", function () {
 
    //Operazioni da compiere se si conferma, in questo caso un redirect
    window.location.href = param;
 
});

TwitteringJS – jQuery Plugin per pubblicare news sul proprio sito tramite Twitter

Oggi voglio condividere con te un plugin per jQuery che ho realizzato per tutti coloro che vogliono pubblicare news sul proprio sito web, comodamente, utilizzando il proprio account Twitter.

Il plugin si chiama TwitteringJS e trovate qui tutti i dettagli per scaricarlo gratuitamente ed utilizzarlo

Video Tutorial #01: jQuery Tag It

Nel seguente video tutorial ti segnalo un comodo plugin di jQuery, “Tag It“, che trovi a questo indirizzo: http://plugins.jquery.com/project/tag-it

Il plugin ti permette di implementare un sistema di gestione/selezione di tag (o parole chiave) tramite una comoda interfaccia facebook/like.

L’audio del video è un pochetto bassino, alza il volume e tutto si risolverà (ti consiglio di guardare il video in qualità HD)

Ti invito ad iscriverti al mio canale YouTube per non perderti i futuri video e video tutorial. Utilizzerò una strumentazione più “degna” della “ciofeca” di microfono che ho usato in questo video, contaci

Lightbox per visualizzare foto e gallery: i migliori scripts

In ogni sito che si rispetti, una cosa che non può assolutamente mancare, è l’effetto “lightbox” per la visualizzazione di foto e gallery fotografiche. Il lightbox lo si trova in rete come script realizzato con framework come jQuery, MooTools o Prototype; è molto conosciuto e apprezzato da addetti ai lavori e utenti ed implementarlo è davvero semplice e veloce.

Vediamo, ora, quali sono gli script più usati ed apprezzati per implementare l’effetto “lightbox“:

01) Lightbox2 (demo)

02) ColorBox (demo)

03) FancyBox

04) FancyZoom

05) ImageZoom

06) LyteBox

07) PiroBox

08) ShadowBox (demo)

09) SlimBox

10) ThickBox

11) BumpBox (demo)

12) FaceBox

Se ne conosci altri segnalaceli nei commenti

Framework per lo sviluppo Mobile

Negli ultimi tempi si è parlato molto delle tecnologie del futuro, dei nuovi strumenti per lo sviluppo di siti e applicazioni (html5 su tutti) e della direzione in cui il web sta andando. Tutti sembrano concordare su un punto: il futuro del web è mobile. Con questo punto di vista sono abbastanza d’accordo, già oggi, il mobile ha acquisito un’importanza estremamente rilevante anche grazie alla grande diffusione di dispositivi come l’iPhone, il BlackBerry, i Tablet e grazie a sistemi come iOS e Android.

Anche se il futuro del web è mobile, il presente non scherza: il sempre crescente accesso al web tramite smartphone o tablet è una grande certezza, una certezza che non può che convincerci a sviluppare siti e applicazioni ottimizzate per i dispositivi mobili fin da subito. Anche in chiave business un’occasione importante su cui puntare già oggi. Se i blog sono quasi tutti dotati di una versione ottimizzata per il mobile, grazie a plugin come WPtouch o mobilePress, per i siti aziendali la situazione non è proprio la stessa. Sono davvero pochi a dotare il proprio sito web di una versione ottimizzata per il mobile, il perchè è estremamente difficile da comprendere.

A noi web designer e web developer tocca realizzare siti nuovi ottimizzati per il mobile, in parole povere, dovremo riscrivere il markup, il css e fare un doppio lavoro per ogni sito web. Un sito per i pc desktop e uno per i dispositivi mobili facendo grande attenzione alle diverse tipologie: smartphone, netbook, tablet (paura vero? )

Per nostra fortuna esistono già diverse soluzioni per lo sviluppo mobile, framework di lavoro estremamente validi in grado di fornirci codice già ottimizzato per i diversi dispositivi e per le diverse piattaforme. Voglio segnalarti quelli più importanti, i più conosciuti, utilizzati e apprezzati framework per lo sviluppo mobile:

- JQtouch (abbiamo già parlato di JQtouch qui su EmaWebDesign )
- Sencha Touch
- PhoneGap
- Jo
- Zepto

Ad una prima occhiata si può subito intuire la grande “convenienza” dell’utilizzo di questi strumenti davvero validi anche se ho potuto apprezzare, nella pratica, soltanto jQtouch che ho già utilizzato. Anche gli altri sembrano essere ben fatti ma, quello che più di tutti terrei d’occhio, è l’appena nato jQuery Mobile.

La versione mobile del noto framework JavaScript offre supporto per qualsiasi piattaforma, da iOS ad Android passando per Windows Phone, webOS, MeeGo e Symbian. Mette a disposizione layout ottimizzati, widget/UI, temi e un set completo di feature, API e componenti, tutto quello che serve per sviluppare siti e/o applicazioni cross-platform. Trattandosi di jQuery non possiamo avere alcun dubbio sulla qualità del progetto

Tu hai già iniziato a prevedere lo sviluppo mobile per i siti dei tuoi clienti? Quali strumenti utilizzi?

jQTouch: applicazioni per iPhone con un plugin jQuery

Gli sviluppatori web, che realizzano applicazioni per il mobile, hanno finalmente trovato un alleato con cui sviluppare applicazioni per iPhone: jQTouch. Non sto parlando di Objective C/Cocoa ma di un potente plugin per jQuery che permette a chi ha familiarità con HTML/CSS/JavaScript di realizzare applicazioni che si presentano come “native” dell’iPhone, quindi, con grafica, animazioni e funzionalità identiche a quelle delle applicazioni native iPhone.

Per “ricreare” grafica e animazioni tipiche delle applicazioni native iPhone con HTML/CSS/JS si passerebbe obbligatoriamente per un duro lavoro di scrittura del codice mentre, con l’utilizzo di jQTouch, con poche righe di codice e un pò di Ajax si possono realizzare applicazioni identiche in tutto e per tutto a quelle native. Un notevole risparmio di tempo durante la scrittura dell’applicazione ed un vantaggio notevole: in caso di problemi con AppStore o in caso di lunghe attese per la pubblicazione dell’applicazione (o di un suo aggiornamento), è possibile predisporre l’applicazione via web trattandosi infatti di una web application!

Inoltre, realizzare un’applicazione iPhone basata su una web app, permette lo sviluppo della stessa tramite gli ide e software preferiti, non bisogna obbligatoriamente utilizzare MAC e si può utilizzare l’applicazione da qualunque dispositivo dotato di browser web.

Si, ma la pubblicazione dell’applicazione su AppStore?

Esistono strumenti di sviluppo come PhoneGap che convertono applicazioni realizzate con HTML/CSS/JS in applicazioni pronte per essere inviate ad AppStore. Non ho mai utilizzato tale strumento ma, con una veloce googlata, si può vedere che in rete se ne parla molto bene.

jQTouch è opera di David Kaneda. Sotto potete visualizzare un video che mostra il plugin e questo è il canale ufficiale Vimeo di David: davidkaneda.

Se ti interessa jQTouch e lo sviluppo di applicazioni iPhone tramite HTML/CSS/JS iscriviti al feed RSS perchè in futuro parleremo ancora di questi argomenti

jQuery, json e le Twitter API: un esempio pratico

In questo mini tutorial vedremo come è semplice ricavare informazioni dalle API di Twitter utilizzando jQuery, Ajax e il formato Json. In pratica, ricaveremo il parametro “description” dalla API relativa alle informazioni dell’utente (user/show) di cui vogliamo l’informazione. Visualizzeremo il valore description in un div con ID univoco uguale ad “output“. L’unico parametro da inviare è l’username dell’utente Twitter di cui vogliamo conoscere la descrizione.

Per prima cosa scarichiamo jQuery ed includiamo la libreria nella nostra pagina web. Ora inseriamo il seguente codice jQuery modificando il valore “tua_username” con la username dell’utente twitter:

<script type="text/javascript">
 
$(document).ready(function() {
 
jQuery.ajax({
		url: "http://api.twitter.com/1/users/show.json?screen_name=tua_username",
		type: 'GET',
		dataType: 'jsonp',
		timeout: 1000,
		error: function(){ jQuery("#output").html("ERROR!"); },
		success: function(json){
			$('#output').html(json.description);
		}	
	});
 
});
 
</script>

Per ottenere altre informazioni, come ad esempio il numero di followers dell’utente, basterà leggere il relativo parametro. In questo caso utilizzando json.followers_count invece di json.description.

jMapping: utilizzare le Google Maps tramite un plugin di jQuery

Oggi ti suggerisco un metodo davvero comodo per integrare le Google Maps in una pagina web: jMapping

jMapping è un plugin di jQuery che ti permetterà di integrare comodamente e velocemente una mappa in una pagina web, vediamo come. jMapping dipende dai plugin jQuery.metadata, MarkerManager e MapIconMaker, trovi i link a questi plugin nella home page di jMapping; scarica i plugin e includili nella tua pagina web insieme alle librerie jQuery e, ovviamente, jMapping:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=API_KEY"></script>
<script type="text/javascript" src="jquery.jmapping.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="mapiconmaker.js"></script>
<script type="text/javascript" src="markermanager.js"></script>

Ovviamente sostituisci il parametro API_KEY con la tua API Key. Ora posiziona i seguenti div nella tua pagina web:

<div id="map" style="width:600px;height:400px;"></div>
<div id="map-side-bar">
<div class="map-location" data="{id: 1, point: {lng: 12.49248, lat: 41.89028}, category: 'market'}">
</div></div>

A questo punto richiama jMapping specificando l’ID univoco che in questo caso è “map”:

<script type="text/javascript">
$(document).ready(function(){
  $('#map').jMapping();
});
</script>

Nella pagina usage trovi tutte le opzioni disponibili per configurare opportunamente le tue mappe

jQuery Ajax: come effettuare richieste Ajax tramite jQuery

Oggi vediamo come effettuare chiamate Ajax utilizzando il famoso framework jQuery. Per prima cosa scarichiamo jQuery dal sito ufficiale e includiamo il file nella nostra pagina web:

<script type="text/javascript" src="jquery.js"></script>

Ora diamo un’occhiata al file PHP al quale faremo la richiesta con Ajax. Il file PHP riceverà un ID integer e ci restituirà una risposta in formato testo, risposta, che visualizzeremo nel div con ID univoco “output“:

<?php
(int)$id = $_GET["id"];
if ($id==1) echo "Chiamata numero 1";
if ($id==2) echo "Chiamata numero 2";
if ($id==3) echo "Chiamata numero 3";
if ($id!=1 && $id!=2 && $id!=3) echo "Parametro non valido!";
?>

Ecco che, con poche righe jQuery, possiamo effettuare la richiesta:

<script type="text/javascript">
$.ajax({
type: "GET",
url: "test.php",
data: "id=1",
success: function(response){
$("#output").html(response);
}
});
</script>

Modificando il valore del parametro id in data, magari inserendo dati in input tramite un form, visualizzeremo il messaggio opportuno a seconda del parametro inviato, in questo caso, un numero intero (1,2 o 3). La risposta testuale fornita dal file PHP è contenuta nel parametro response e la visualizziamo nel div output tramite la riga:

$("#output").html(response);

Questo è un semplice esempio ma, con altrettanta semplicità, potremo realizzare applicazioni complesse senza scrivere un’infinità di righe di codice grazie a un potente framework come jQuery