Come realizzare siti mobile - Buginar 29 Maggio 2011

3,766 views

Published on

Venerdì 29 Maggio 2011 , si è svolto il buginar online, dove abbiamo parlato su come realizzare un sito internet che si visualizza in maniera corretta su dispositivi Mobile.

Per maggiori info vai su www.ebug.it

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

  • Be the first to like this

No Downloads
Views
Total views
3,766
On SlideShare
0
From Embeds
0
Number of Embeds
2,029
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Come realizzare siti mobile - Buginar 29 Maggio 2011

  1. 1. Realizzare un sito internet per dispositivi mobile Seminario di Rocco Passaro su come disegnare un sito web per telefonini 27 Maggio 2011
  2. 2. Prima di cominciare un po’ di storia sull’evoluzione dei siti per telefoni
  3. 3. Prima di cominciare un po’ di storia sull’evoluzione dei siti per telefoni
  4. 4. Riassumiamo le date del mobile 1997 : Nasce il wap da un accordo tra Nokia, Motorola, Ericsson e la Phone.com per realizzare siti internet si usa il WML 2001 : Viene ufficializzato il WML 2.0 e vengono implementati i css 2.1 per mobile 2002 : Viene implementato XHTML MOBILE PROFILE 1.0 2004 : Comincia a essere utilizzato sui dispositivi mobile Flash Lite 1.0 2007 : Viene distribuito Iphone che utilizza un browser che interpreta anche l’HTML 4.0 2010 : Ormai tutte le case produttrici di cellulari producono telefonini con browser moderni che interpretano anche HTML 5 e CSS3
  5. 5. Come disegnare il layout mobile <ul><li>Obiettivi creazione </li></ul><ul><li>- Un layout che rispetti le misure ( risoluzione video ) base dei cellulari; </li></ul><ul><li>Contenuti leggibili anche su telefonini ( immagini ridimensionate e testi grandi ); </li></ul><ul><li>Distribuire i menu in verticale; </li></ul><ul><li>Creare dei menu page; </li></ul><ul><li>Rendere il sito personalizzato ( presenza loghi e immagini ); </li></ul><ul><li>Alcuni parametri da evitare ( jquery , pop-up , navigazione no _blank ). </li></ul>
  6. 6. Come disegnare il layout mobile <ul><li>Dove prendere ispirazione: </li></ul><ul><li>http:// cssiphone.com / </li></ul><ul><li>http://www.mobileawesomeness.com/ </li></ul><ul><li>http://tapfancy.com/ </li></ul>
  7. 7. Al livello di codice ? WML o HTML 5 ? La scelta ricade su HTML visto che la maggior parte dei telefonini in circolazione abilitati per la Navigazione interpretano attraverso il loro browser anche le nuove release di HTML 5 . Anche se io consiglio vivamente di utilizzare per il crossbrowser XHTML 2.0 MOBILE PROFILE
  8. 8. Cominciamo a strutturare il nostro layout Una delle cose fondamentali da scrivere in una pagine rimane il markup della pagina:
  9. 9. Cominciamo a strutturare il nostro layout Uno dei punti fondamentali per creare un layout mobile sono i link Con questo metodo è possibile rendere disponibile subito il recapito telefonico per chiamate voce e invio sms
  10. 10. Per il resto è quasi tutto uguale a un sito normale <ul><li>Perché quasi ? Dobbiamo ricordarci che i contenuti devono essere posti in maniera ottimale </li></ul><ul><li>Quindi ricordiamoci sempre: </li></ul><ul><li>Impostare sempre il padding interno agli elementi contenitori (di dimensioni fisse e no in percentuali) </li></ul><ul><li>Regolare il testo su una grandezza media , ne troppo grande ne troppo piccola </li></ul><ul><li>Assegnare alle immagini troppo grandi delle classi css per poterle ridimensionare in caso di risoluzione ridotta </li></ul><ul><li>Validare il codice sempre per evitare errori di interpretazione dai diversi browser </li></ul><ul><li>Evitare gli sfondi particolari troppo complessi che renderebbero difficoltosa la lettura </li></ul>
  11. 11. Strutturiamo il nostro layout al meglio Impostiamo due fogli di stile : uno per i browser normali e uno per i dispositivi touch Utilizzare le media queries per gestire i comandi solo per mobile
  12. 12. Cosa vuol dire utilizzare le media queries ?
  13. 13. Cosa vuol dire utilizzare le media queries ? Utilizzare le @mediaqueries è uno dei migliori modi per alterare la forma del proprio progetto a seconda della risoluzione del dispositivo che lo sta visualizzando <ul><li>Impostare una dimensione differente width per ogni dispositivo mobile impostando valori percentuali </li></ul><ul><li>Rendere invisibili elementi troppo grandi che ostacolerebbero la nostra navigazione </li></ul><ul><li>Cambiare la visualizzazione dei menu da orizzontali a verticali </li></ul><ul><li>Cambiare la dimensione dei testi e dei paragrafi </li></ul><ul><li>Eliminare i float e i vari position degli elementi circostanti </li></ul>
  14. 14. Ultime rifiniture ? Si per Iphone Nel mondo che gira attorno ad Iphone ( compreso i siti internet ) esiste la possibilità di personalizzare tutto. Per questo esistono alcune specifiche che possiamo inserire per migliorare la navigazione ai visitatori Apple
  15. 15. Le personalizzazioni di Iphone Cosa molto importante è fare adattare tutto la pagina web al nostro Iphone e per fare questo dobbiamo scrivere Eliminiamo la barra degli indirizzi dal nostro dispositivo attraverso Javascript
  16. 16. Testing – dove farlo? Ovviamente tra i due metodi il migliore è quello su dispositivo, perché non simula ciò che succede la lo applica materialmente Esistono due modi per fare testing Su dispositivo Su siti che simulano i dispositvi
  17. 17. Testing – dove farlo? Siti dove simulare la navigazione su dispositivo mobile https :// addons.mozilla.org / en-US / firefox / addon / user-agent-switcher / http://www.genuitec.com/mobile/ index.html http://s3.amazonaws.com/marketcircle/iPhoney.zip http:// iphonetester.com /
  18. 18. Poniamo il caso io non voglia fare nulla? Possiamo utilizzare due tecnologie che renderanno il nostro sito internet mobile in pochi click:
  19. 19. Poniamo il caso io non voglia fare nulla? Possiamo utilizzare due tecnologie che renderanno il nostro sito internet mobile in pochi click:
  20. 20. Poniamo il caso io non voglia fare nulla? Possiamo utilizzare due tecnologie che renderanno il nostro sito internet mobile in pochi click: Wordpress Mobile Pack Wordpress Mobile Edition http:// mobilepress.co.za /
  21. 21. Domande? dubbi ? Perplessità ?
  22. 22. Grazie per aver partecipato a Buginar www.ebug.it

×