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

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!

La File API di HTML 5

Il lavoro su HTML 5 per ioProgrammo continua nel mese di maggio. Questa volta presento ai lettori la File API.

«Oggi, grazie alle innovazioni introdotte dai nuovi standard del W3C, quelli compresi nell’ampia famiglia di HTML 5, le applicazioni entrano nel browser e integrano o sostituiscono le tradizionali pagine web. Il browser diventa, quindi, un contenitore di applicazioni, che accedono autonomamente a dati remoti, memorizzano informazioni, interagiscono col file system dell’utente. Conoscere le nuove frontiere aperte dai nuovi standard diventa, dunque, una necessità per chiunque si occupi di web-development.»

Questa è la breve riflessione che riporto in testa all’articolo. In effetti, è quanto c’è dietro il concetto della morte del WEB: niente più browsing, ma accesso ad Internet attraverso applicazioni: se queste siano web o desktop, poco importa, almeno per quello che ci dice l’evoluzione tecnologica in atto.

I nuovi standard stanno disegnando la mappa del prossimo futuro del web-development. Meglio informarsi per tempo!

Il native Drag and Drop di HTML 5

Seconda tappa nel mondo delle API di HTML 5. I lettori di ioProgrammo hanno trovato in edicola, ad aprile, un articolo dedicato alla native Drag and Drop API di HTML 5.

Si tratta di uno dei progetti più controversi del WHATWG, prima, e del W3C, poi, il cui scopo è quello di fornire nativamente alle applicazioni web alcune funzionalità tipiche delle applicazioni desktop. Quella del trascinamento e del rilascio di oggetti in parti specifiche della pagina è, appunto, una di queste. Ovviamente, non si tratta di muovere solo degli oggetti da un posto all’altro, ma di gestire dinamicamente i dati ad essi associati.

L’esempio che presento nell’articolo è solo una delle mille possibili applicazioni del DnD: si tratta dell’interfaccia di un e-shop in cui l’utente, per aggiungere prodotti al carrello degli acquisti, deve solo trascinare i prodotti in vendita nell’area predisposta. L’applicazione individua il titolo dell’oggetto e  il prezzo, e aggiorna dinamicamente il carrello.

Non si tratta, forse, dell’API più riuscita, ma sicuramente, la facilità di utilizzo e il fatto di essere ricompresa all’interno di una specifica ufficiale del W3C, sono dei punti di forza non indifferenti. Vale la pena darci un’occhiata!

P.S.: per chi avesse bisogno del codice allegato, può lasciare un commento a questo post

Introduzione alla IndexedDB API di HTML 5

Da alcuni giorni sto studiando la più nuova delle API di HTML 5: la IndexedDB. Ne proporrò un articolo alla redazione di ioProgrammo e, come al solito, informerò i lettori se e quando l’articolo sarà pubblicato.

La IDB API va a sostituire il precedente progetto del WebDB, che offriva una modalità di archiviazione locale di dati nella memoria del browser attraverso la sintassi di SQLite, e al momento è supportata solo da Firefox 4 e Google Chrome, sebbene non abbia trovato nessun documento ufficiale pubblicato da Google.

Ottimo il supporto di FX4. Ottima pure la documentazione MDN.

Prime impressioni: la IDB API è uno strumento poderoso. La prima impressione è che a breve assisteremo alla nascita di una nuova famiglia di applicazioni web, in grado di utilizzare grossi quantitativi di dati strutturati residenti nella memoria del browser dell’utente.

Ne parlerò dettagliatamente in futuro, su ioProgrammo o in questo blog. Per ora vi propongo l’ottima presentazione che ne fa Mike West

DnD e File API in Firefox

Tutto e tutti sono concentrati sulle nuove API di HTML 5. Tra le nuovissime tecnologie, di grande (issimo) interesse sono la Drag and Drop API e la File API, le cui applicazioni sono letteralmente infinite. Grazie a queste due semplici API, desktop e browser si fondono in un unico ambiente di lavoro, in diretta e reciproca comunicazione. Un’idea le offre il Mozilla Developer Network con questo video:

HTML 5 e il Web Storage: web-apps con il turbo

A partire da questo mese troverete in edicola una serie di articoli che sto scrivendo per ioProgrammo, dedicati alle API che rientrano, in modo più o meno diretto, nell’ambito di HTML 5.

Nel numero di marzo, già in edicola, propongo ai lettori una panoramica del Web Storage, condita con una serie di esempi pratici, dal più semplice al più avanzato: una specie di guida per muovere i primi passi e riflettere sulle possibili applicazioni.

Il Web Storage, nelle sue due varianti del local storage e del session storage, offre allo sviluppatore la possibilità di archiviare dati nel memoria del browser dell’utente e tenerli in modo permanente o per la durata di una sessione.

Muovendo i primi passi con dei semplicissimi esempi in cui i dati sono costituiti da coppie chiave/valore, nel tutorial si arriva all’archiviazione di dati complessi in formato JSON, i cui utilizzi diventano davvero notevoli: applicazioni multiform, videogiochi online, caching di dati remoti…

Insomma, le possibili applicazioni sono talmente numerose che l’unico limite è nella creatività dello sviluppatore…

Happy mashing!