La diffusione di dispositivi mobili ha trasformato l'esperienza del Web, in maniera lenta ma costante, fino a stravolgerla. Spegnete la sveglia e controllate le email sul tablet. Poi, andando in ufficio, leggete il giornale e i feed RSS con le applicazioni dello smartphone. A pranzo, utilizzate la funzione di geolocalizzazione per trovare il ristorante più vicino. Connessione sempre attiva, sempre presente.
Questa è Internet oggi: un territorio in cui liberare l’immaginazione. Questo libro aiuta a costruire siti e app sfruttando i vantaggi delle funzionalità presenti nei device di nuova generazione. Gli autori vi guidano nelle fasi di ideazione e progettazione di esperienze e contenuti invitanti; vi insegnano l'arte di trasformare i siti in app, integrando alcune delle API HTML5 a disposizione: geolocalizzazione, local storage, accelerometri; vi aiutano a colmare la distanza tra il Web aperto e il mondo delle applicazioni native. Alla fine, oltre a essere in grado di creare siti, webapp e app native, avrete contribuito allo sviluppo informatico più eccitante e cruciale dopo Internet: il Web mobile.
È il 1995, e state aspettando che un messaggio e-mail venga scaricato sul vostro PC 486. Centinaia di megabyte di spazio su disco, 16 megabyte di memoria e 256 bei colori a video. Improvvisamente vedete un lampo di luce nell’angolo della stanza e voi, dal futuro, apparite in una macchina del tempo. Il vostro “voi” emerge dalla nebbia e vi porge un lucido dispositivo che sta in una mano. I vostri occhi si spalancano mentre guardate il display ad alta risoluzione. Questo è ciò che Internet è adesso: sempre attivo, sempre presente.[...] Gli ultimi cinque anni hanno visto un dislocamento rivoluzionario nel modo in cui consumiamo e produciamo informazioni: il Web mobile. È qualcosa di più un Web portatile “più piccolo”; è un cambiamento fondamentale nel modo in cui le persone interagiscono tra loro e con i prodotti. [...] In questo libro impareremo a compiere la transizione da un sito web vecchio e farraginoso a uno mobile, brillante e seducente.
Argomenti in breve:
- Comprendere i principi del web design per il mobile
- Progettare interfacce per device moderni
- Utilizzare HTML5 e CSS3 per costruire layout dinamici
- Ricreare i comportamenti nativi in un contesto web
- Creare transizioni, eventi e animazioni con JavaScript
- Scoprire PhoneGap per trasformare webapp in applicazioni native
- Sviluppare per iOS, Android, BlackBerry e webOS
- Servirsi delle API per sfruttare le specifiche funzionalità dei dispositivi
Gli autori
Earle Castledine ha fissato la sua dimora su Internet durante gli anni Novanta e lì vive e lavora ancora adesso. Flâneur di JavaScript, si trova a suo agio nei meandri del codice .NET, nel fogliame delle applicazioni per cellulari e tra le nuvole dello sviluppo lato client.
Myles Eftos ha lavorato con tutti i linguaggi di programmazione web: HTML, CSS, JavaScript, ma la sua arma segreta è Ruby on Rails.
Max Wheeler è un interaction designer che crede che i media interattivi dovrebbero essere sia belli che funzionali. Costruisce applicazioni coinvolgenti e usabili, grazie all'attenzione per i dettagli, l'estetica e la user experience.
Indice
Il team............................................................................. XI
Gli autori.....................................................................XI
Earle Castledine.......................................................XI
Myles Eftos..............................................................XI
Max Wheeler......................................................... XII
Il revisore................................................................... XII
SitePoint..................................................................... XII
Prefazione..................................................................... XIII
Perché leggere questo libro........................................XIV
Contenuto del libro...................................................XIV
Per saperne di più......................................................XVI
I forum di SitePoint..............................................XVI
Il sito web del libro...............................................XVI
Archivio del codice...............................................XVI
Aggiornamenti ed errata corrige...........................XVI
Le newsletter di SitePoint.....................................XVI
I podcast SitePoint...............................................XVII
Feedback dai lettori.............................................XVII
Ringraziamenti.........................................................XVII
Earle Castledine...................................................XVII
Myles Eftos..........................................................XVII
Max Wheeler......................................................XVIII
Convenzioni utilizzate nel libro...............................XVIII
Esempi di codice.................................................XVIII
Capitolo 1 – Introduzione al web design
per il mobile.....................................................................1
Cosa significa “mobile”?.................................................2
Perché è importante?......................................................2
VI Indice
I nativi sono irrequieti....................................................3
Il problema dell’essere nativi.......................................4
Partire dall’inizio............................................................6
Un’app non basta...........................................................7
Opzione uno: niente..................................................7
Opzione due: trasformare e andarsene........................8
Opzione tre: da soli per sempre..................................9
Una nota sui framework............................................... 10
Rimbocchiamoci le maniche........................................ 11
Capitolo 2 – Design........................................................13
Un mouse migliore....................................................... 14
Passiamoci sopra....................................................... 16
Schermi piccoli........................................................ 16
Il carico cognitivo.................................................... 17
Sulle spalle dei giganti................................................... 17
Carousel.................................................................. 18
Barra delle schede.................................................... 20
Elenchi.................................................................... 21
Riepilogo................................................................ 22
Passiamo alla pratica...................................................... 23
Pensare in grande..................................................... 23
Stilare un profilo degli utenti.................................... 23
Scegliere il set di funzioni principale........................ 24
Schizzi.......................................................................... 25
Trovare gli avvistamenti in base al luogo................... 27
Panoramica e dettaglio............................................. 31
Trovare gli avvistamenti in base alla celebrità............ 32
Aggiungere un avvistamento.................................... 34
Assemblare il tutto................................................... 35
Fissa o no?............................................................... 36
La schermata iniziale................................................ 36
Impostare uno stile....................................................... 37
Interfacce touch....................................................... 39
Icone dell’interfaccia................................................ 41
Il testo..................................................................... 43
Considerazioni sulle prestazioni................................ 43
Testare il design............................................................ 46
Rivedere il design......................................................... 46
Icone dell’applicazione................................................. 49
Pronti a brillare!............................................................ 52
Capitolo 3 – Markup......................................................53
La forma conta più della sostanza.................................. 55
La barra delle schede................................................ 56
Righe, righe, righe................................................... 61
Immagini e pseudo-elementi.................................... 66
La vista......................................................................... 71
Conoscere i propri limiti (cioè quelli delle risorse)........ 73
Progredire, sempre........................................................ 75
L’aiuto di Modernizr................................................ 75
Costruire sulla base.................................................. 78
Immagini scalabili......................................................... 84
La perfezione dei pixel............................................. 86
I rapporti con i media................................................... 86
Modalità standalone...................................................... 88
Incoraggiare gli utenti.............................................. 91
Icone di applicazione.................................................... 92
Un tocco extra............................................................. 96
Prosecuzione del testo con l’ellissi............................ 96
Regolare la dimensione del testo.............................. 99
Il colore del tocco.................................................... 99
Il callout del tocco................................................... 99
Selezione da parte degli utenti................................ 100
Le prestazioni contano................................................ 100
Per proseguire............................................................. 100
Capitolo 4 – Web app...................................................101
Configurare l’ambiente............................................... 102
Framework e librerie............................................. 102
Debug di JavaScript mobile.................................... 103
Eventi......................................................................... 104
Eventi touch semplici............................................ 107
Un clic per la feature detection.............................. 107
Vincere facile............................................................. 109
Link intelligenti..................................................... 109
Attributi dei campi dei form.................................. 111
Caricare le pagine....................................................... 113
Scambiare le pagine............................................... 114
Dissolvenze con le animazioni WebKit................... 116
Scivolare................................................................ 122
Tornare indietro..................................................... 124
Ajax........................................................................... 133
Caricare l’HTML.................................................. 134
Ajax e i link........................................................... 136
Template.................................................................... 138
L’integrazione di Twitter con i template................. 141
Abbiamo un’app!........................................................ 144
Capitolo 5 – Usare le funzioni dei device
nelle web app...............................................................145
Geolocalizzazione....................................................... 146
Acquisire la posizione............................................ 146
La gestione degli errori.......................................... 154
Ruotare il device........................................................ 155
L’orientamento del dispositivo.................................... 157
Accelerometri........................................................ 157
Scuotimento.......................................................... 159
I gesti......................................................................... 161
Far scorrere la galleria di foto................................. 162
Pizzicare e zoomare............................................... 166
L’app offline............................................................... 169
Il file cache manifest.............................................. 169
Memorizzare nella cache gli eventi manifest........... 172
Network e fallback................................................ 174
Un capitolo movimentato........................................... 176
Capitolo 6 – Rifinire le app.........................................177
Trucchi con le web app.............................................. 178
Menu fissi.............................................................. 178
Fare clic più velocemente....................................... 181
Caricare le librerie................................................. 183
Feature detection................................................... 184
I widget...................................................................... 185
Finestre di dialogo.................................................. 185
Spinner.................................................................. 189
Memorizzare i dati sul client....................................... 190
Storage locale......................................................... 190
Web SQL Database................................................ 193
Assemblare il tutto...................................................... 197
I moduli................................................................ 197
Eventi personalizzati.............................................. 200
Indice IX
Altri framework.......................................................... 202
Conclusione............................................................... 203
Capitolo 7 – PhoneGap................................................205
Incorporare le pagine web nelle app native................. 206
PhoneGap.................................................................. 207
Considerazioni........................................................... 208
Imparare ad amare i callback.................................. 208
Il debug è un problema.......................................... 209
Uncanny valley...................................................... 209
Vendere le app può essere complicato..................... 210
Le alternative.............................................................. 210
Installare un SDK....................................................... 210
Xcode (OS X)....................................................... 211
MacPorts (OS X)................................................... 212
Git......................................................................... 212
Il Java Development Kit......................................... 213
Eclipse................................................................... 213
Apache Ant............................................................ 214
L’SDK di Apple iOS.............................................. 215
L’SDK di Android.................................................. 215
L’SDK di BlackBerry............................................. 218
L’SDK di webOS................................................... 218
Installare PhoneGap.................................................... 219
Xcode................................................................... 219
Android................................................................. 220
BlackBerry............................................................ 223
webOS.................................................................. 223
Per riassumere............................................................ 224
Capitolo 8 – Rendere un’applicazione nativa............225
L’anatomia di un’applicazione PhoneGap.................... 226
Icone, schermate iniziali e nomi.................................. 227
iOS........................................................................ 227
Android................................................................. 231
BlackBerry................................................................. 232
webOS....................................................................... 232
È tempo di un ritocco................................................ 233
Gli helper JavaScript di PhoneGap......................... 233
Siete pronti?........................................................... 233
X Indice
Avvisi.................................................................... 234
Controlli di rete..................................................... 235
Geolocalizzazione, storage e orientamento
del dispositivo........................................................ 236
Tasti e pulsanti....................................................... 236
Accedere alla fotocamera........................................ 238
La prova del nove........................................................ 241
iOS........................................................................ 241
Android................................................................. 242
BlackBerry............................................................ 243
webOS.................................................................. 244
Vendere l’app.............................................................. 244
App Store.............................................................. 244
Android Market..................................................... 247
BlackBerry App World........................................... 248
App Catalog webOS (Palm)................................... 249
Festeggiamo!.............................................................. 250
Appendice A – Eseguire un server per i test.............253
Utilizzare Python........................................................ 254
Utilizzare Ruby.......................................................... 254
Server integrati........................................................... 254
Server integrati: IIS su Windows............................. 255
Server integrati: Apache su Linux........................... 255
Indice analitico.............................................................257