Modernizr.load aka yepnope.js

Lo sviluppo delle tecnologie web sta attraversando una fase decisamente caotica. Nell’attesa che i nuovi standard raggiungano uno stadio di maggior maturità, nella speranza che i browser vadano a supportarli tutti allo stesso modo, e nell’attesa snervante che vengano abbandonate le vecchie versioni di Internet Explorer, sviluppare un sito o una webapp non è impresa da poco.

HTML5 fornisce nuovi elementi; CSS3 dispone di nuove proprietà e selettori; e che dire delle nuove API: geolocation, drag & drop, IndexedDB, Web Workers, local storage, ecc. ecc.
Strumenti eccezionali, che pian piano trasformeranno alla radice il web, ma che al momento creano perplessità per le notevoli differenze di supporto tra i browser.
Continua a leggere

JavaScript & HTML5 su ioProgrammo di maggio

Torno ad occuparmi di web standard su ioProgrammo di maggio.
Questa volta dimostro come creare un uploader che rispetta i principi di usabilità che ispirano i nuovi standard HTML5 e le relative API JavaScript.

Nello sviluppo dell’applicazione, mi sono concentrato soprattutto sulle funzionalità che arricchiscono la User Experience, facendo ricorso, oltre alla File API, al native Drag&Drop.

Ma non mi sono limitato alle tecnologie lato utente, e propongo anche un semplice script PHP che esegue la scrittura dei file sul server.

Un breve accenno ai principi di graceful degradation e progressive enhancement, che ormai vanno annoverati tra le best practices nello sviluppo di qualsiasi sito o applicazione web.

Buona lettura!

jQuery datepicker dinamici

Uno dei widget più popolari di jQuery UI è l’utilissimo datepicker.
Questo fornisce un calendario in forma tabellare, utilizzabile stand alone oppure associato ad un campo di testo.
L’utilità è indiscussa: se si accetta l’input dell’utente è spesso necessario un lungo lavoro di verifica dei dati, per essere certi che i dati siano stati inseriti nel formato richiesto.
Che si effettui il controllo lato client, quindi via JS, oppure lato server, la logica non cambia. Di qui la necessità di elementi che agevolino l’input dell’utente e riducano le possibilità di errore.
Continua a leggere

WordPress 3.3 e le librerie jQuery e jQuery UI

Serata dedicata a testare WordPress 3.3. Mentre Sitepoint offre una rapida scorsa ad alcune nuove caratteristiche dell’interfaccia, io mi sono soffermato ad analizzare le nuove potenzialità offerte agli sviluppatori dal più completo supporto delle librerie jQuery e jQuery UI.

Appena una settimana fa mandavo alla redazione di ioProgrammo un articolo in cui spiegavo come incorporare il datepicker di jQuery UI nelle schede di inserimento e modifica degli articoli. La versione corrente di WordPress, la 3.2, sebbene supportasse molte delle funzionalità di jQuery UI, non offriva un supporto completo e, nello specifico, non supportava il widget datepicker.
Continua a leggere

Google Programming

Google Programming è la headline di ioProgrammo di dicembre, che presenta il mash-up Google Maps API + HTML 5 + Flickr API + jQuery che trovate a pag. 12.

Il lungo articolo che descrive l’applicazione analizza tutte le più moderne tecnologie di webdesign.

L’applicazione si basa su una Google Map che occupa l’intera finestra del browser. Al di sopra della mappa viene collocato un menu generato dalle tab di jQuery UI, che facilita la navigazione e permette di scorrere tra diversi elenchi di dati.

Ed ecco i dati: quelli generati dall’utente cliccando sulla mappa, grazie al servizio di reverse geocoding della Google Maps API; quelli recuperati dinamicamente da Flickr, grazie ad una richiesta AJAX generata via jQuery; quelli memorizzati dall’utente, grazie al local storage di HTML 5.

Insomma, ce n’è per tutti i gusti: il risutato è un’applicazione avanzata, che spinge al massimo sulle incredibili potenzialità della libreria JS più famosa!

Happy mashing!

Intro a JavaScript in tre parti

In attesa della pubblicazione del prossimo numero di ioProgrammo, dove presenterò ai lettori un mash-up avanzato in cui si fa uso delle più recenti e popolari tecnologie di webdesign, faccio il resoconto delle ultime tre pubblicazioni, nelle quali si sviluppa un tutorial in tre parti dedicato a chi vuol conoscere il linguaggio guida del webdesign degli ultimi anni: JavaScript.

La prima parte del tutorial offre una prima introduzione al linguaggio. Essenzialmente teorico, questo primo articolo descrive variabili e tipi di dati, presenta gli array e offre una panoramica essenziale di programmazione strutturata in JavaScript: condizioni, cicli e iterazioni.

Il secondo tutorial offre già i primi spunti applicativi, con una disamina abbastanza dettagliata dei concetti fondamentali del Document Object Model.
In questa seconda parte del tutorial spiego come JavaScript sia evoluto da linguaggio utilizzato essenzialmente per appesantire le pagine web con orpelli grafici poco utili e molto appariscenti, a web standard indispensabile ad arricchire l’esperienza di navigazione dell’utente, a creare interfacce user friendly e applicazioni dinamiche e interattive. Nell’articolo spiego come accedere agli elementi del DOM, come muoversi tra di essi (DOM traversing), come creare nuovi elementi e rendere, così, dinamiche le pagine web. Molto materiale e di sicuro interesse per chi si avvicina per la prima volta al webdesign e development.

Nella terza e ultima parte del tutorial mostro come animare le pagine. Qui viene presentata una galleria web con le classiche thumbnail di anteprima. L’utente avrà la possibilità di ingrandire le immagini con un gradevole effetto dinamico sulla pagina, nel pieno rispetto dei concetti di progressive enhancement e inobtrusive JavaScript.

Spero di essere riuscito a condensare i principali concetti della programmazione JS e di aver coperto i principi fondamentali del webdesign. Ma, soprattutto, spero di aver fatto venir voglia di programmare in JavaScript 😉