Seminario "Il Web mobile: multicanalita' e layout fluido"
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Seminario "Il Web mobile: multicanalita' e layout fluido"

  • 1,442 views
Uploaded on

Seminario tenutosi da Stefano Tirloni presso l'Universita' di Crema durante il corso di Tecnologie Web (Professore Paolo Ceravolo) dal titolo "Il Web mobile: multicanalita' e layout fluido"

Seminario tenutosi da Stefano Tirloni presso l'Universita' di Crema durante il corso di Tecnologie Web (Professore Paolo Ceravolo) dal titolo "Il Web mobile: multicanalita' e layout fluido"

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,442
On Slideshare
1,441
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
19
Comments
0
Likes
0

Embeds 1

http://a0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. IL WEB MOBILE Multicanalità e layout fluidomercoledì 21 settembre 2011 1
  • 2. Nel 2013 il traffico della rete da parte dei dispositivi mobili sarà maggiore di quello dei computers.mercoledì 21 settembre 2011 2
  • 3. Con cosa abbiamo a che fare : Le prime incursioni in distribuzione web mobile per le masse sono state fatte da una società giapponese che ha sviluppato un servizio chiamato iMode nel 1999. Gli utenti non erano liberi di navigare in Internet, era più una selezione di contenuti che era stata specificatamente convertita in formato iMode. Questo contenuto si basava in genere su News, Sport, Meteo, Giochi, e-mail. WAP era lo standard per il web mobile in Occidente che comprendeva il suo linguaggio WML (basato su XML) ed il protocollo per distribuirlo WYPS. Le tariffe elevate pretese dagli operatori, la difficoltà dutilizzo (inclusa la configurazione) e le limitazioni tecniche dei cellulari, lo scarso appeal dei siti, la scarsa integrazione tra Wap e Web.mercoledì 21 settembre 2011 3
  • 4. Nel 2002 viene sviluppato il WAP 2.0 che ha adottato XHTML-BASIC/MP Mobile Profile e il famoso protocollo TCP/IP HTTP per la comunicazione. XHTML-MP è molto simile all’ XHTML e viene interpretato dai browser nello stesso modo, ha solamente alcune caratteristiche in più utili ai dispositivi cellulari. Mentre il Wap non aveva stili, il Wap 2.0 ha introdotto i Wireless CSS (WCSS) che sono una versione di CSS 2.1 per integrare gli stili ad xhtml-mp. Oggi molti telefoni come l’iPhone, Android, etc. non hanno problemi a leggere il markup utilizzato dai siti web per visualizzare il sito sui dispositivi desktop. Mobile Web Application Best Practices http://www.w3.org/TR/mwabp/mercoledì 21 settembre 2011 4
  • 5. mercoledì 21 settembre 2011 5
  • 6. Il mercato degli smartphone Uno smartphone è un telefono che ha un OS riconoscibile su cui lutente può installare delle applicazioni. Il mercato degli smartphone è suddiviso in molti sotto-mercati, ciascuno dei quali ha un proprio pubblicomercoledì 21 settembre 2011 6
  • 7. Si deve fare attenzione Il problema è che la maggior parte dei web designer e developer cade esattamente nel mercato di fascia alta. Cè un pregiudizio culturale verso gli OS che puntano a qualunque altro mercato. Come risultato, la maggior parte delle persone si concentra sulla lotta tra iOS e Android ed ignorano il resto.mercoledì 21 settembre 2011 7
  • 8. Nel mercato di fascia alta, iOS e Android sono attualmente le piattaforme di spicco. Tuttavia, nel 2011 potrebbero trovarsi a competere con Windows Phone 7 (Microsoft) e MeeGo (Nokia). Inoltre, anche il BlackBerry OS6 (RIM) potrebbe cercare di entrare in questo mercato. Nel mercato di fascia media, il Symbian (Nokia) al momento sta dominando, ma bada (Samsung), BlackBerry (RIM) ed i nuovi Androids (Google) di fascia media sono forti competitors.mercoledì 21 settembre 2011 8
  • 9. Il mercato dei browser mobilemercoledì 21 settembre 2011 9
  • 10. mercoledì 21 settembre 2011 10
  • 11. mercoledì 21 settembre 2011 11
  • 12. I migliori browser per mobile 1. Safari per iOS: il miglior browser mobile in generale, 2. Android WebKit, 3. Dolfin per Samsung bada: al momento il browser mobile più veloce 4. BlackBerry WebKit, il nuovo browser di default per IS6 e superiori (attualmente disponibile solo su BlackBerry Torch). Tutti e quattro questi browser supportano gli eventi touch, che sono assolutamente cruciali per qualunque interfaccia seamless touchscreen-based". Inoltre, si basano tutti sul rendering engine di WebKit.mercoledì 21 settembre 2011 12
  • 13. Il 7 giugno 2005, lo sviluppatore Dave Hyatt di Safari annunciò sul suo blog che Apple stava rendendo open source WebKit,mercoledì 21 settembre 2011 13
  • 14. mercoledì 21 settembre 2011 14
  • 15. Laddove gli altri browser scaricano semplicemente HTML, CSS e JavaScript, lo interpretano e lo rendono, Opera Mini fa qualcosa di molto diverso: quando si richiede una pagina in Opera Mini, quella richiesta va su uno speciale Server di Opera Mini. Il server scarica le risorse, le interpreta ed esegue il rendering della pagina. Poi invia unimmagine ( altamente compressa ) della pagina risultante al vostro telefono. Voi vedete limmagine attraverso il Client di Opera Mini. Il vantaggio è che il client di Opera Mini necessità di una piccola quantità di memoria, il che lo rende particolarmente adatto ai dispositivi economici di fascia bassa. Opera Mobile è importante perché funge da Default browser per molti dispositivi Windows Mobile nei quali il produttore ha deciso che IE non è sufficientemente buono.mercoledì 21 settembre 2011 15
  • 16. mercoledì 21 settembre 2011 16
  • 17. CREIAMO IL SITO WEBmercoledì 21 settembre 2011 17
  • 18. Differenze desktop - mobile Dimensioni schermo Velocità di connessione Non c’è il mousemercoledì 21 settembre 2011 18
  • 19. USER AGENT Per saper identificare e reindirizzare chi accede tramite il proprio dispositivo portatile possiamo affidarci ad un semplice script in php, il quale ci permetterà di analizzare l’User Agent; ovvero le informazioni che ogni dispositivo include nel proprio http header, riguardo al tipo di browser e sistema operativo. Il seguente codice ci permetterà di identificare dispositivi basati su Android, iOS, BlackBerry e WebOS e di reindirizzarli verso la nostra versione mobile del sito oppure verso uno specifico foglio di stile . $iphone = strpos($_SERVER[HTTP_USER_AGENT],"iPhone"); $android = strpos($_SERVER[HTTP_USER_AGENT],"Android"); $palmpre = strpos($_SERVER[HTTP_USER_AGENT],"webOS"); $berry = strpos($_SERVER[HTTP_USER_AGENT],"BlackBerry"); $ipod = strpos($_SERVER[HTTP_USER_AGENT],"iPod"); if ($iphone || $android || $palmpre || $ipod || $berry == true) { header(Location: http://sito.org/mobile.html); //redirect verso pagina mobile } ?> WURFL: database che detiene tutti gli USER AGENT per device mobili, fornisce un API da utilizzare nel vostro codice.mercoledì 21 settembre 2011 19
  • 20. Versione desktop Versione mobile USER AGENTmercoledì 21 settembre 2011 20
  • 21. Information architecture: Semplicità! anche con connessione 3G serve sempre molto tempo per caricare una pagina quindi la pazienza dei visitatori da cellulare è piuttosto corta. Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sa cosa sta aspettando è più probabile che attenda il caricamento. Risorse e banda di connessione: sono 2 dei maggiori limiti dei telefoni cellulari. Evitate object e javascript quando possibile perchè non sono supportati sui primi telefoni, ma anche ora che lo sono prosciugano la batteria.mercoledì 21 settembre 2011 21
  • 22. mobile web design: Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi bisogna creare un layout fluido. Un layout fluido vi aiuta con i dispositivi con lo schermo orientabile. Per i cellulari della vecchia generazione che hanno solo l’opzione del layout “portait” è importante cercare di strutturare i contenuti a dovere, come distribuire le informazioni e tagliare il testo in blocchi più piccoli per aiutarne la leggibilità. Se volete andare sul sicuro mantenetevi sulla grandezza in larghezza minima di 120 px ed una massima di 480 px(iPhone orientato a landscape) #page {margin: 0 auto; min-width: 120px;! } La Navigazione è un altro aspetto che andrebbe riconsiderato. Anche nei telefoni multi-touch è un po’ impacciata, figuratevi in quelli più vecchi dove si usa il pad. Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente. Mettete Links d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che il visitatore non debba scrollare fino in cima.mercoledì 21 settembre 2011 22
  • 23. La prima regola perchè il vostro sito venga visualizzato correttamente sui telefoni è aggiungere il giust Doctype (xhtml-mp), codice di caratteri (utf-8), e il MIME Type (application/html +xml). <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Site Name</title> <meta http-equiv="content-type" content="application/xhtml+xml" /> <link rel="stylesheet" type="text/css" href="style.css"/> </head> Per quello che concerne la struttura del body cercate di costruire semanticamente (nell’ordine in cui le cose appaiono) ed evitate tabelle e frames. Limitare l’uso di risorse esterne come i popups.mercoledì 21 settembre 2011 23
  • 24. Limitate l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimesione ideale. Il modo corretto di ridimensionare le immagini è farlo su lato server e specificarne la grandezza. Quando potete usate sempre sprites images e “alt text” nel caso l’immagine non carichi. <img src="apericlub_t.jpg" alt="apericlub"> Peso della pagina, restare tra i 10kb e i 25kb ai telefoni di base, per gli smartphones va bene anche 50kb e per i touch-phones anche 100kb. max-age=300 5 minuti Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni siano sempre scaricate e inserite una stringa per controllare la cache. <meta http-equiv="Cache-Control" content="max-age=300"/> Safari sull’iPhone registra nella cache solo file di dimensioni minori di 25kb.mercoledì 21 settembre 2011 24
  • 25. IPhonemercoledì 21 settembre 2011 25
  • 26. mercoledì 21 settembre 2011 26
  • 27. • Il primo indica lo spostame dellombra in orizzontale. sinsitra a destra. Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche lo spostam • Il secondo indica attraverso il sito. dellombra in verticale. Dallalto in basso. Ricordatevi di usare grandi “target areas” nei vostri link e buttons per aiutare Il pollici, bisogna • i terzo indica la sfocatura riuscire a cliccare una cosa alla volta comodamente. dellombra. Iniziate aggiungendo il viewport all’interno dell’ in modo che la pagina si adatti perfettamente allo schermo: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> Possiamo sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamente sono i bordi arrotondati e le ombre: div {        color: #bcbcbc;padding: .5em;        -webkit-border-radius: 6px;        } #div {color:#eee; text-shadow:#000 0 -1px 1px; font:bold 0.6 em"Helvetica", sans-serif}mercoledì 21 settembre 2011 27
  • 28. Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali, l’ideale sarebbe usare “small/normal/large” perchè ogni dispositivo può gestire al meglio questi comandi. #div { 1 em = relativo alla grandezza del font nel color:#eee; font:bold 0.6 em"Helvetica Neue", Helvetica, body sans-serif } Parliamo dei links: sui telefoni cellulari non c’è il mouse, quindi niente hovering, dimenticate l’attributo hover. Sono stati introdotti i tag “tel:” e “sms:” nei link potete attivare quelle funzioni nel telefono, quindi è utile nella pagina dei contatti aggiungere link che se cliccati lanciano direttamente la chiamata o la messaggistica. <a href="tel:43802948">call us</a> <a href="sms:12125551212">Send SMS to 1(212)555-1212</a>mercoledì 21 settembre 2011 28
  • 29. Il secondo passo è nascondere la barra degli indirizzi visto che abbiamo già così poco spazio. Basta una riga di javascript: window.scrollTo(0, 1); Create una icona springboard, una specie di enorme favicon per rendere riconoscibile il vostro sito se viene aggiunto ai segnalibri dell’homescreen. Dev’essere di 57×57 px <link rel="apple-touch-icon" href="icon.png">mercoledì 21 settembre 2011 29
  • 30. Importante è la presenza di un comando di switch che permetta al visitatore di passare alla versione desktop del sito. <script type="text/javascript"> function switch_delayer() { window.location = "http://www.haru-sushi.net/wordpress/? wptouch_view=normal&wptouch_redirect=/wordpress/"} </script> Mobile Theme <a id="switch- link"onclick="wptouch_switch_confirmation();" href="javascript:return false;"></a>! ! </div>mercoledì 21 settembre 2011 30
  • 31. RESPONSIVE DESIGNmercoledì 21 settembre 2011 31
  • 32. 1 2 3mercoledì 21 settembre 2011 32
  • 33. 1 2 3mercoledì 21 settembre 2011 33
  • 34. 1 2 3mercoledì 21 settembre 2011 34
  • 35. Le “media queries” http://www.w3.org/TR/css3-mediaqueries/ Il W3C ha creato le media queries come parte della specifica CSS3, migliorando le possibilità dei media types. Una media query si rivolge a qualsiasi tipo di device. Le media queries sono diventate una tecnica client-side per inviare un foglio di stile su misura agli iPhone, ai telefoni Android e agli altri generi di telefono. Per fare ciò, potremmo incorporare una query nellattributo media di un foglio di stile collegato. <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" /> La query contiene due componenti: 1. un media type (screen), 2. leffettiva query racchiusa tra parentesi, contenente una particolare media feature (max- device-width) da ispezionare, seguita dal valore target (480px).mercoledì 21 settembre 2011 35
  • 36. @media (max-width: 480px) { .immagine { width: 300px } Stiamo chiedendo al device se la sua risoluzione orizzontale (max-device-width) è uguale o minore di 480px. Se questo test passa—in altre parole, se stiamo vedendo il nostro lavoro su un device con uno schermo piccolo come liPhone—allora il device renderà l’immagine larga 300px. Altrimenti il link sarà ignorato in toto.mercoledì 21 settembre 2011 36
  • 37. I browser desktop come Safari 3+, Chrome, Firefox 3.5+ e Opera 7+, supportano tutti nativamente le media query analizzate nellarticolo, così come anche i più recenti browser per cellulari come Opera Mobile e Mobile WebKit. Ovviamente, le versioni più vecchie dei browser desktop, non supportano le media query. Mentre Microsoft si è convertita ad un supporto con IE9, Internet Explorer ad oggi non offre alcun tipo di implementazione. Comunque, se si è interessati ad implementare il supporto per browser antiquati, Javascript offre una soluzione: css3-mediaqueries.js una libreria che permette a IE 5+, Firefox 1+ e Safari 2+ di applicare le Media Query CSS3 quando viene inclusa attarverso blocchi @media.mercoledì 21 settembre 2011 37
  • 38. ESEMPIO : A LIST APART http://www.alistapart.com/articles/responsive-web-design/ by Ethan Marcottemercoledì 21 settembre 2011 38
  • 39. ANALISI DELLA STRUTTURA <div class="inner">mercoledì 21 settembre 2011 39
  • 40. @media (min-width: 1300px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 13.902053712480252764%; /* 88px / 633px */ } }mercoledì 21 settembre 2011 40
  • 41. .figure { float: left; font-size: 10px;line-height: 1.1; text-align: center; margin: 0 3.317535545023696682% 1.5em 0; /* 21px / 633px */ width: 31.121642969984202211%; /* 197px / 633px */ }mercoledì 21 settembre 2011 41
  • 42. @media (max-width: 600px) { /* 633px grid (88x6 col, 21x5 ; 88+21+88+21+88+21+88+21+88+21+88) */ .inner { position: relative; } .mast, .intro, .main, .footer { float: none; width: auto; }mercoledì 21 settembre 2011 42
  • 43. @media (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ } li#f-watson, li#f-moriarty { margin-right: 0; } }mercoledì 21 settembre 2011 43
  • 44. FINEmercoledì 21 settembre 2011 44