The webdesigner goes mobile

877 views

Published on

La presentazione di Salvatore Laisa
in occasione del Codemotion, Roma 5 marzo 2011 http://www.codemotion.it

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
877
On SlideShare
0
From Embeds
0
Number of Embeds
67
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The webdesigner goes mobile

  1. 1. THE WEBDESIGNER GOES MOBILE SalvatoreLaisa.net IN T E R A C T I V E DESI G NER Roma, 5 Marzo 2011
  2. 2. Roma, 5 Marzo 2011 2009MoebiusMania 2008 2007 SalvatoreLaisa.net I N TE RACT IVE D ESIGNER 2006 SalvatoreLaisa.net I NTERACTI VE DESI GNER
  3. 3. Roma, 5 Marzo 2011 Qual’è il problema? Un webdesigner, quindi una persona che sioccupa principalmente di costruire siti web, si affaccia al mondo degli smartphone/tablet (siti mobile e app). SalvatoreLaisa.net I NTERACTI VE DESI GNER
  4. 4. Roma, 5 Marzo 2011 Arsenale di un webdesignertool grafici e non linguaggi lato client <Html> {CSS} JavaScript AS3 SalvatoreLaisa.net I NTERACTI VE DESI GNER
  5. 5. Roma, 5 Marzo 2011Design Sviluppo SalvatoreLaisa.net I NTERACTI VE DESI GNER
  6. 6. Roma, 5 Marzo 2011 Come faccio il mockup di un sito/app mobile?Alcuni siti come Mobile Love mettono a disposizionetemplate grafici (.psd o .ai) per realizzare le bozze diapplicazioi o siti mobile.mobilelove.org/category/design/design-templates/ SalvatoreLaisa.net I NTERACTI VE DESI GNER
  7. 7. Roma, 5 Marzo 2011 Considerazioni per il design mobile- Layout “arioso”, pochi elementi e buone spaziature- Non usare posizionamenti CSS fissi- Evitare “overflow: auto”- Meglio le animazioni CSS3 che JS- Sfruttare gli effetti CSS3 per creare elementi- Lavorare con click e touch (jQuery UI)- Pensare in drag & drop quando si può SalvatoreLaisa.net I NTERACTI VE DESI GNER
  8. 8. Roma, 5 Marzo 2011 E una volta che passo al codice Html/Css?Come per il webdesign “desktop” stanno nascendouna serie di framework specifici per il design mobile,come jQuery Mobile (Css+Js) e Less Framework (Css) SalvatoreLaisa.net I NTERACTI VE DESI GNER
  9. 9. Roma, 5 Marzo 2011Design Sviluppo SalvatoreLaisa.net I NTERACTI VE DESI GNER
  10. 10. Roma, 5 Marzo 2011 I limiti delle web app mobile- Non sono native- Niente accelerometro e bla bla bla...- Non sono distribuibili negli store- Necessitano connessione sempre attiva- Le gesture via Javascript sono “mimate” SalvatoreLaisa.net I NTERACTI VE DESI GNER
  11. 11. Roma, 5 Marzo 2011 Come passare alle vere appAbbiamo il vantaggio che lavorando con i linguaggiweb non si sviluppa per una piattaforma precisa egrazie a software come Titanium Developer oCorona è possibile convertire queste applicazioniweb in applicazioni native mobile SalvatoreLaisa.net I NTERACTI VE DESI GNER
  12. 12. Roma, 5 Marzo 2011 Che vantaggi avremmo?- Possono essere installate- Grazie a nuove API si accede a tutte le funzionalitàdel device senza imparare nuovi linguaggi- Possono essere vendute- Esportiamo sia per iOS che Android (prima sarànecessario installare una o entrambe le SDK) SalvatoreLaisa.net I NTERACTI VE DESI GNER
  13. 13. Roma, 5 Marzo 2011 Flash ha qualcosa da dire...Con i nuovi runtime Flash Player 10.1 e Adobe AIR2.5 è possibile creare applicazioni mobile (nonnative) direttamente da Flash CS5. SalvatoreLaisa.net I NTERACTI VE DESI GNER
  14. 14. Roma, 5 Marzo 2011 ActionScript 3 è stato estesoNuovi event listener per gestire sia le gestures native(pinch, swipe, rotazione) che dati touch grezzi, inpiù grazie ad AIR può accedere ad accelerometro,gps, rubrica, database SQLite e processori GPU (sepresenti nel device) SalvatoreLaisa.net I NTERACTI VE DESI GNER
  15. 15. Roma, 5 Marzo 2011 Let’s get to work webdesigners!Tutte le tecnologie appena elencate sono giàdisponibili ed utilizzabili (jQuery Mobile è in alpha)e attualmente tutti gli store supportano applicazionicreate con queste ultime. SalvatoreLaisa.net I NTERACTI VE DESI GNER
  16. 16. Roma, 5 Marzo 2011 GRAZIE! e un grazie anche a: Codemotion - per il mio angolino nell’evento Artua.com - per le icone usatei Rush - per la compagnia durante la realizzazione di queste slide SalvatoreLaisa.net I NTERACTI VE DESI GNER

×