Dopo qualche settimana di sviluppo è finalmente pronta la nuova versione per iPhone del mio sito internet!

Diversi mesi fa aveva sviluppato una prima versione per iPhone ma molto meno tecnologica. In pratica non faceva altro che mostrare i contenuti in un modo più leggibile e navigabile su uno schermo più piccolo.
Non sono però mai stato completamente soddisfatto anche perché si vedeva che era un sistema non pensato nativamente per iPhone ma solo un palliativo.

L’idea di fare qualcosa di completamente nuovo mi è venuta quando ho scoperto il progetto iWebkit. Si tratta di una struttura già ottimizzata per iPhone nella quale si deve semplicemente inserire il contenuto. Questo framework è utilizzabile gratuitamente ed è molto semplice da implementare.

Dopo i primi test ero pronto per creare la versione mobile completa del sito. Prima di iniziare mi sono dato una regola: una volta finito lo sviluppo iniziale non devo scrivere una riga di codice in più perché la versione per iPhone sia aggiornata come la versione standard. Quello che volevo evitare era di dover aumentare il lavoro ogni volta che inserisco un nuovo post del blog, un’immagine o un link. Sapevo che l’unica soluzione era utilizzare la tecnologia AJAX che, pur non essendo complessa, necessita di una certa attenzione.

AJAX è la tecnologia che sta alle spalle di tantissimi nuovi siti. Uno dei più grandi utilizzatori è Google che ha creato Gmail proprio su questo sistema. In pratica con AJAX è possibile recuperare del contenuto da altre pagine web e inserirlo nella pagina che si sta visitando senza ricaricarla. Se usate Gmail avrete notato che cliccando su un messaggio questo si apre senza che il resto venga ricaricato. Il risultato è una usabilità più simile ai programmi che ai siti internet.

In pratica questo è quello che succede quando provate ad aprire il mio sito da iPhone:

Il server Linux, rappresentato dal pinguino, controlla quale browser si sta utilizzando. Se riconosce il browser dell’iPhone apre automaticamente l’homepage della versione mobile del sito.

L’homepage mobile ha al suo interno solo gli elementi del menu di navigazione mentre il resto manca completamente. A questo punto entra in scena AJAX che va a prendere l’elenco degli ultimi 10 post del blog, li formatta e li inserisce nella pagina. Quando si clicca su un post in particolare è sempre AJAX a caricare il contenuto del blog e ad inserirlo nella pagina. Ci sono altri piccoli accorgimenti gestiti da poche righe di Javascript e il tutto succede rapidamente ed efficacemente.

In maniera simile funzionano le pagine Pics e Links mentre l’area Contact Me è statica visto che non necessita di aggiornamenti neanche nella versione standard. L’unica parte che non ho trasportato è l’area Docs semplicemente perché su iPhone non è possibile salvare documenti e sarebbe quindi stata piuttosto inutile.

E’ anche possibile salvare il link al mio sito creando una scorciatoia nel menu dell’iPhone. Facendolo si crea una bella icona che se cliccata mostra un’immagine mentre carica il sito! Tutto questo con poche righe di programmazione, è incredibile!

Pian piano continuerò con debug e troubleshooting ma per adesso sono piuttosto soddisfatto del lavoro!