Seminario web mobile_2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Seminario web mobile_2012

on

  • 725 views

Capire il mondo del mobile dal dispositivo alle tecnologie per sviluppare contenuti web

Capire il mondo del mobile dal dispositivo alle tecnologie per sviluppare contenuti web

Statistics

Views

Total Views
725
Views on SlideShare
725
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Seminario web mobile_2012 Presentation Transcript

  • 1. IL WEB MOBILE Multicanalità e layout fluido
  • 2. Chi sono
  • 3. Nel 2013 il traffico della rete da parte dei dispositivi mobili sarà maggiore di quello dei computers. http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats
  • 4. 1999
  • 5. Nel 2002 viene sviluppato il WAP 2.0 che ha adottato XHTML-BASIC/MP Mobile Profile e il famoso protocolloTCP/IP HTTP per la comunicazione.XHTML-MP è molto simile all’ XHTMLIl 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 pervisualizzare il sito sui dispositivi desktop. Mobile Web Application Best Practices http://www.w3.org/TR/mwabp/
  • 6. 2001
  • 7. 2003
  • 8. 2006
  • 9. 2007
  • 10. 2010
  • 11. 2010
  • 12. 2010
  • 13. Il mercato degli smartphoneUno 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 pubblico
  • 14. Si deve fare attenzioneIl problema è che la maggior parte dei web designer e developer cade esattamente nel mercato difascia alta.
  • 15. Il mercato dei browser mobile http://gs.statcounter.com/
  • 16. 1. background-image: -webkit-linear-gradient(#fff, #000);  2. background-image: -moz-linear-gradient(#fff, #000);  3. background-image: -ms-linear-gradient(#fff, #000);  4. background-image: -o-linear-gradient(#fff, #000);  5. background-image: linear-gradient(#fff, #000);  
  • 17. Il 7 giugno 2005, lo sviluppatore Dave Hyatt diSafari annunciò sul suo blog che Apple stavarendendo open source WebKit,
  • 18. Laddove gli altri browser scaricano semplicemente HTML, CSS e JavaScript, lo interpretano e lo rendono,.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 limmagineattraverso il Client di Opera Mini.Il vantaggio è che il client di Opera Mini necessità di una piccola quantità di memoria, il che lo rende particolarmenteadatto ai dispositivi economici di fascia bassa.Opera Mobile era importante perché era il Default browser per molti dispositivi Windows Mobile.Attualmente IE mobile utilizza il motore di Explorer 9
  • 19. CREIAMO IL SITO WEB
  • 20. Differenze desktop - mobile
  • 21. Dimensioni schermo
  • 22. NUOVE GESTUREimplementabili con librerie javascript http://eightmedia.github.com/hammer.js/
  • 23. Microsoft Windows Phone 7 touch guideliness
  • 24. Velocità di connessione
  • 25. Differenze desktop - mobileOltre ad esserci differenze legate alle dimensioni fisiche/hardware ci sono anche differenze cheriguardano il contesto in cui utilizziamo i dispositivi, il loro utilizzo sociale, le esigenze chesoddisfano e soprattutto il modo in cui lo fanno. portatile personale sempre a disposizione utilizzabile all’istante connesso
  • 26. Cercare / Consultare
  • 27. Giocare
  • 28. Check-in / Status
  • 29. Aggiornare / Creare
  • 30. AMBIENTI D’UTILIZZO
  • 31. 84% use them at home
  • 32. •! 80% use them during miscellaneous downtime throughout the day•! 74% use them while waiting in lines or waiting for appointments•! 69% use them while shopping•! 64% use them at work•! 62% use them while watching TV (a different study claims 84%)•! 47% use them during their commute
  • 33. Versione desktop Versione mobile USER AGENT
  • 34. USER AGENTPossiamo affidarci ad uno script in php che ci permetterà di analizzare l’User Agent; ovvero le informazioni che ognidispositivo 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 reindirizzarliverso 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.
  • 35. 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 coseappaiono) ed evitate tabelle e frames.Limitare l’uso di risorse esterne come i popups.
  • 36. Forse è più semplice usare il doctype dell’HTML5 <! DOCTYPE html >
  • 37. 960 px1024 px
  • 38. Apple – Safari Web Content Guide
  • 39. mobile web design:Prima di tutto la dimensione degli schermi varia molto ma quello che più c’interessa è la larghezza, quindi bisognacreare un layout fluido.Un layout fluido vi aiuta con i dispositivi con lo schermo orientabile.Mantenetevi sulla grandezza in larghezza minima di 120 px (240 px solo se è per smartphone) ed una massima di480 px (iPhone orientato a landscape)#page {margin: 0 auto; min-width: 120px;! }Evitate menu a più livelli perchè su piccoli schermi non sarebbero mostrati correttamente.Mettete Link d’uscita per la home, la sezione precedente e successiva, alla fine di ogni pagina in modi che ilvisitatore non debba scrollare fino in cima.
  • 40. Information architecture:Semplicità! anche con connessione 3G serve sempre molto tempo per caricare una paginaquindi la pazienza dei visitatori da cellulare è piuttosto corta.Tagliate tutto quello che non è rilevante e usate categorie ben specificate: se il visitatore sacosa 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.
  • 41. Limitate l’uso di immagini perchè aggiungono peso alla pagina, inoltre dovete considerare quale sarebbe la dimensioneideale.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.Caching è un altro fattore che vi aiuta con la velocità di caricamento, cercate di evitare che le risorse comuni sianosempre 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.
  • 42. 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;" /> Visualizzazione della pagina con lo script Visualizzazione della pagina senza script
  • 43. Una buona pratica è mantenere la user experience simile a quella generale dell’iPhone anche attraverso il sito.Possiamo sfruttare le nuove regole CSS3 che non potete usare sugli altri telefoni. La più comoda e usata ovviamentesono i bordi arrotondati e le ombre:div {       color: #bcbcbc;padding: .5em;       border-radius: 6px;       }#div {color:#eee; text-shadow:#000 0 -1px 1px; font:bold 0.6 em"Helvetica",sans-serif}
  • 44. Quando applicate gli stili ai font è meglio non specificare la grandezza in pixels, casomai in em o percentuali,#div {color:#eee; font:bold 0.6 em"Helvetica Neue", Helvetica, sans-serif}Sono stati introdotti i tag “tel:” e “sms:” nei link potete attivare quelle funzioninel telefono se cliccate 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>
  • 45. 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 aisegnalibri dell’homescreen. Dev’essere di 57×57 px <!-- For iPhone 4, iPad 3 with high-resolution Retina display: --> <link href="img/h/apple-touch-icon.png" rel="apple-touch-icon-precomposed" sizes="114x114"> <!-- For first-generation iPad: --> <link href="img/m/apple-touch-icon.png" rel="apple-touch-icon-precomposed" sizes="72x72"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link href="img/l/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
  • 46. RESPONSIVE DESIGN
  • 47. 12 3
  • 48. 12 3
  • 49. 12 3
  • 50. ESEMPIO : A LIST APARThttp://www.alistapart.com/articles/responsive-web-design/ by Ethan Marcotte
  • 51. Le “media queries” http://www.w3.org/TR/css3-mediaqueries/Il W3C ha creato le media queries come parte della specifica CSS3. Una media query si rivolge a qualsiasi tipo didevice.Le media queries sono una tecnica client-side per inviare un foglio di stile su misura tenendo conto della larghezzadello schermo del dispositivo.Per fare ciò, potremmo incorporare una query nellattributo media di un foglio di stile collegato.<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="shetland.css" />
  • 52. @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 comeliPhone—allora il device renderà l’immagine larga 300px.Altrimenti il link sarà ignorato in toto.
  • 53. Adattare le immagini con il Retina display:#box_body { background:url(images/bg_mobile.png) no-repeat; height:473px; width:320px }@media (-webkit-min-device-pixel-ratio:2){! ! ! #box_body{ background:url(images/bg_mobile2.png) no-repeat; background-size: 320px 473px; } }
  • 54. I browser desktop come Safari 3+, Chrome, Firefox 3.5+ e Opera 7+, supportano tutti nativamente le media queryanalizzate 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.Internet Explorer le supporta con IE9,Per 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 CSS3quando viene inclusa attraverso blocchi @media.
  • 55. Qualche framework consigliato:http://jquerymobile.com/ http://www.sencha.com/products/touch/
  • 56. MOBILE FIRST
  • 57. 213
  • 58. “The simple guideline is whatever you are doing—do mobile first,” Google Chairman Eric Schmidt“My goal was initially just to make a mobile companion, but I became convinced it was possible to create a version of Facebook that was actually better than the website”Joe Hewitt, il lead developer dell’applicazione per iPhone di FacebookLa navigazione nel web mobile non è un derivato da quella tradizionale desktop, ma può essereun’opportunità per migliore semplificando l’esperienza di navigazione.
  • 59. il menu di flickr versione desktope versione mobile
  • 60. Limiti del responsive http://2010.dconstruct.org/
  • 61. Le immagini vengono caricate ma il div non compare. carichiamo 370 kb di immagini inutilmente display:none ! ! http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
  • 62. http://2011.dconstruct.org/mettendo le immagini in percentuale, il riadattamento delle dimensioni consuma CPU
  • 63. FINEImmagini:http://www.slideshare.net/yiibuhttp://www.flickr.comhttp://www.abookapart.com/ www.stedesign.com