HTML5 cross-platform and device development: web app per tutti gli schermi

1,708 views

Published on

Non esiste il mobile web, il tablet web o il desktop web. E' sempre lo stesso web solo fruito da dispositivi diversi. Un nuovo approccio allo sviluppo delle web application sta emergendo e diventando sempre più necessario. Quello che abbandona le dimensioni fisse ed utilizza invece le tecniche di Responsive Web Design. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche, gli UX design patterns e i linguaggi necessari a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.

Marco Casario, CTO di Comtaste, autore del libro HTML5 Solutions e docente del corso Rich Web Apps con HTML5 presenterà un talk interamente dedicato a questo argomento, condividendo le esperienze reali, fatte durante la gestione dei progetti degli ultimi due anni.

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

No Downloads
Views
Total views
1,708
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

HTML5 cross-platform and device development: web app per tutti gli schermi

  1. 1. HTML5 cross-device: Web apps per tutti gli schermi Marco Casario CTO Comtaste www.linkedin.com/in/marcocasariomartedì 29 gennaio 13
  2. 2. Chi sono Marco Casario CTO Comtaste www.linkedin.com/in/marcocasario Copyright 2012 Comtaste S.r.l. 2martedì 29 gennaio 13
  3. 3. I miei ultimi libri Copyright 2012 Comtaste S.r.l. 3martedì 29 gennaio 13
  4. 4. I miei corsi Rich Web Apps con HTML5 training.codemotion.it Copyright 2012 Comtaste S.r.l. 3martedì 29 gennaio 13
  5. 5. Case Studiesmartedì 29 gennaio 13
  6. 6. Progetto BANCA DITALIA Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 9martedì 29 gennaio 13
  7. 7. Progetto Noemalife – Galileo Mobilemartedì 29 gennaio 13
  8. 8. Progetto Poste Italianemartedì 29 gennaio 13
  9. 9. Cross platform & device Strategymartedì 29 gennaio 13
  10. 10. Le opzioni RESPONSIVE NATIVO Siti d’informazione e blogs Softwares Portfolio Videogiochi Magazine Finanza WEB STORE OTTIMIZZATO IBRIDO Softwares Retail Videogiochi Search Multimedia Software As a Service Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 15martedì 29 gennaio 13
  11. 11. The Boston Globe Copyright 2012 Comtaste S.r.l. 16martedì 29 gennaio 13
  12. 12. Lufthansa Airline Copyright 2012 Comtaste S.r.l. 17martedì 29 gennaio 13
  13. 13. Lufthansa Airline Copyright 2012 Comtaste S.r.l. 18martedì 29 gennaio 13
  14. 14. NETFLIX Copyright 2012 Comtaste S.r.l. 19martedì 29 gennaio 13
  15. 15. Responsive Web Appsmartedì 29 gennaio 13
  16. 16. Definizione (Wikipedia) Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). Copyright 2012 Comtaste S.r.l. 21martedì 29 gennaio 13
  17. 17. Elementi di una Responsive Web App LAYOUT PATTERNS MEDIA QUERIES VIEWPORT ALTRE CONSIDERAZIONI Copyright 2012 Comtaste S.r.l. 22martedì 29 gennaio 13
  18. 18. Layout Patterns – Le Griglie Il design si adatta al comportamento dell’utente in base alla dimensione dello schermo, la piattaforma e l’orientamento attraverso una serie di griglie Copyright 2012 Comtaste S.r.l. 23martedì 29 gennaio 13
  19. 19. Layout Patterns - Tipologie Copyright 2012 Comtaste S.r.l. 24martedì 29 gennaio 13
  20. 20. Layout Patterns Copyright 2012 Comtaste S.r.l. 25martedì 29 gennaio 13
  21. 21. Layout Patterns Copyright 2012 Comtaste S.r.l. 26martedì 29 gennaio 13
  22. 22. Layout Patterns – Grid Generator Copyright 2012 Comtaste S.r.l. 27martedì 29 gennaio 13
  23. 23. Media Queries Sviluppate dal W3C sull’esperienza dei media types Permettono un controllo granulare degli stili Con le Media Queries puoi controllare: •Larghezza e altezza della finestra del browser •Larghezza e altezza del device •Orientamento (landscape or portrait mode) •Risoluzione Copyright 2012 Comtaste S.r.l. 28martedì 29 gennaio 13
  24. 24. Media Queries – Internal CSS @media only screen and (max-device-width: 480px) {     div#content {         width: 400px;     }       div#header {         background-image: url(media-queries-phone.jpg);         height: 85px;         position: relative;     }       div#header h1 {         font-size: 120%;     } Copyright 2012 Comtaste S.r.l. 29martedì 29 gennaio 13
  25. 25. Media Queries – External CSS <link rel="stylesheet" type="text/css"  media="only screen and (max-device-width: 480px)“  href=“smartphones.css" /> Copyright 2012 Comtaste S.r.l. 30martedì 29 gennaio 13
  26. 26. Media Queries – Conditions @media only screen and (min-device-width: 320px) and (max- device-width: 480px) { /* iPhone, Android rules here */ } Copyright 2012 Comtaste S.r.l. 31martedì 29 gennaio 13
  27. 27. Media Queries – Conditions @media only screen and (device-width: 768px) and (orientation: landscape) { /* rules for iPad in landscape orientation */ } Copyright 2012 Comtaste S.r.l. 32martedì 29 gennaio 13
  28. 28. Media Queries – Retina Display Con l’introduzione dei Retina Display bisogna tener conto anche di queste risoluzioni attraverso la proprietà media query -webkit-device-pixel-ratio media query: <link rel="stylesheet" media="only screen and -webkit-min-device-pixel-ratio: 2" href="highres.css"> Copyright 2012 Comtaste S.r.l. 33martedì 29 gennaio 13
  29. 29. Media Queries – Testing http://protofluid.com Copyright 2012 Comtaste S.r.l. 34martedì 29 gennaio 13
  30. 30. Viewport Introdotto da Apple Suggerisce la viewport iniziale, lo zoom e la risoluzione Questo perchè Safari di default mostra una versione a 980px di larghezza della pagina web anche se il layout è più stretto. Copyright 2012 Comtaste S.r.l. 35martedì 29 gennaio 13
  31. 31. Viewport <meta name="viewport" content="width=device-width" /> Con questo tag forzo Safari a “fidarsi” del mio layout e a non applicare lo zoom. Copyright 2012 Comtaste S.r.l. 36martedì 29 gennaio 13
  32. 32. Responsive Frameworksmartedì 29 gennaio 13
  33. 33. Responsive Frameworks Esistono già diverse decine di Responsive Frameworks che aiutano a: • Creare griglie fluide • Gestire elementi multimediali • Generare Media Queries a breakpoints stabiliti Copyright 2012 Comtaste S.r.l. 38martedì 29 gennaio 13
  34. 34. Responsive Frameworks Responsive Grid System http://responsive.gs/ Copyright 2012 Comtaste S.r.l. 39martedì 29 gennaio 13
  35. 35. Responsive Frameworks Foundation 3 http://foundation.zurb.com/ Copyright 2012 Comtaste S.r.l. 40martedì 29 gennaio 13
  36. 36. Responsive Frameworks YAML 4 http://www.yaml.de/ Copyright 2012 Comtaste S.r.l. 41martedì 29 gennaio 13
  37. 37. Responsive Frameworks Bootstrap http://twitter.github.com/bootstrap/ Copyright 2012 Comtaste S.r.l. 42martedì 29 gennaio 13
  38. 38. Responsive Frameworks Mobile Boilerplate http://html5boilerplate.com/mobile/ Copyright 2012 Comtaste S.r.l. 43martedì 29 gennaio 13
  39. 39. Responsive Frameworks Skeleton http://www.getskeleton.com/ Copyright 2012 Comtaste S.r.l. 44martedì 29 gennaio 13
  40. 40. Testing & Mesuringmartedì 29 gennaio 13
  41. 41. Browsers Browsers con remote tools: • Opera Mini con DragonFly • Chrome Developer Tools • BlackBerry browser per Playbook Copyright 2012 Comtaste S.r.l. 46martedì 29 gennaio 13
  42. 42. Risoluzione – Display alta densità I device di ultima generazione creano molti problemi e possono renderizzare male le immagini. Questo perchè 1 px in CSS corrisponde a parecchi pixels sul device. Tipicamente questi device hanno un PPI (pixels per inch) superiore ai 160 Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  43. 43. Risoluzione – Display alta densità Per gestire le immagini per questi tipi di dispositivi si utilizza uno Scale factor o DPR (Device Pixel Ratio) Si calcola in questo modo: Device Pixels / CSS Pixels Il risultato di dispositivi retina per Apple è 2x per Android è 1.5x Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  44. 44. Risoluzione – Display alta densità Perchè supportare questi dispositivi ? Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  45. 45. Risoluzione – Display alta densità Come si gestisce questo problema ? Utilizzando le Responsive Images o usando immagini più grandi e forzando la loro dimensione con l’attributo width. Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  46. 46. Risoluzione – Display alta densità Altre regole da seguire: - Usare dove possibile CSS3 e Web Fonts - Usare Icon Fonts - Usare SVG per la grafica Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  47. 47. Risoluzione – Display alta densità Fate attenzione a: - uso della bandwidth - supporto dei browser di vecchia generazione Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  48. 48. Adaptive Images Adaptive Images detects your visitors screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web pages embeded HTML images. Copyright 2012 Comtaste S.r.l. 47martedì 29 gennaio 13
  49. 49. Adaptive Images - W3C Esistono già diverse soluzioni ed approcci al problema, anche se sono articolate e non sempre risolvono interamente il problema. Esiste un progetto standard del W3C ma che ancora non è supportato dai browser (dati di Novembre 2012) www.responsiveimages.org Copyright 2012 Comtaste S.r.l. 47martedì 29 gennaio 13
  50. 50. Adaptive Images – Picture tag <picture alt="Cat Dancing"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="/small-1.jpg"> </picture> Copyright 2012 Comtaste S.r.l. 49martedì 29 gennaio 13
  51. 51. Adaptive Images – CSS3 #selector {         background-image: url(no-image-set.png);         background-image: -webkit-image-set (url(myimage.jpg) 1x, url(myimage-hires.jpg) 2x);         /* other prefixes for -moz, -o and -ms go here */        Copyright 2012 Comtaste S.r.l. 49martedì 29 gennaio 13
  52. 52. Adaptive Images http://adaptive-images.com/ Copyright 2012 Comtaste S.r.l. 48martedì 29 gennaio 13
  53. 53. Adaptive Images – Picturefill <div data-picture data-alt=“Cambodia image"> <div data-src="small.jpg"></div> <div data-src="medium.jpg" data-media="(min-width: 400px)"></div> <div data-src="large.jpg" data-media="(min-width: 800px)"></div> <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div> https://github.com/scottjehl/picturefill Copyright 2012 Comtaste S.r.l. 50martedì 29 gennaio 13
  54. 54. Adaptive Images Attenzione all’uso di responsive images: Differenti tipi di immagine richiedono differenti tipi di risoluzioni, a scapito della banda richiesta. Es. una avatar image (di piccole dimensioni) assume i seguenti pesi: 1x = 58Kb 2.x = 188Kb Soluzione: usare immagini a 1.5x Copyright 2012 Comtaste S.r.l. 47martedì 29 gennaio 13
  55. 55. Adaptive Images Il consiglio è quello di cercare di servire solo una risoluzione per le immagini. Copyright 2012 Comtaste S.r.l. 47martedì 29 gennaio 13
  56. 56. Emulatori Ne esistono tantissimi, molti dei quali gratuiti. Sono utili come prima fase di testing e non possono essere considerati affidabili al 100% http://www.mobilexweb.com/emulators Copyright 2012 Comtaste S.r.l. 51martedì 29 gennaio 13
  57. 57. Connessione – Detect client side W3C Network Information API: provides an interface for Web Applications to access the underlying network information (connection info) of the device. Usa la proprietà navigator.connection.type che ritorna WIFI, CELL_2G, CELL_3G if (navigator.connection.type==navigator.connection.WIFI) {} Copyright 2012 Comtaste S.r.l. 53martedì 29 gennaio 13
  58. 58. Connessione – Detect server side Usa le informazioni nell’header Intercetta il carrier usando Massives Operator Identification Platform http://werwar.com/ Copyright 2012 Comtaste S.r.l. 54martedì 29 gennaio 13
  59. 59. HTTP Testing – Bandwidth throttling Copyright 2012 Comtaste S.r.l. 55martedì 29 gennaio 13
  60. 60. Redirect – Do not ! Evitare i redirect Il sito sarà più SEO-friendly Alcuni browser mobile possono presentare dei problemi Copyright 2012 Comtaste S.r.l. 56martedì 29 gennaio 13
  61. 61. Gestures – Touch not Click I device touch hanno un ritardo nel click tra i 300 e i 500 ms prima di essere eseguiti ! Utilizza l’evento onTouchEvent (datatype ACTION_UP)  Attenzione all’evento onTouchStart perchè a volte il tap risulta troppo responsive ma causa lo scrolling ad essere inusabile. Copyright 2012 Comtaste S.r.l. 57martedì 29 gennaio 13
  62. 62. Gli ultimi consigli Effettua il defer del codice dopo l’evento onload Se hai molto contenuto da caricare usa un loading custom Utilizza tecniche di server-side detection Parsare Javascript richiede tempo (da 1ms a 100ms per 1Kb) Copyright 2012 Comtaste S.r.l. 58martedì 29 gennaio 13
  63. 63. Gli ultimi consigli Ti serve veramente un framework ? Jquery impiega 8 secondi ad essere parsato su alcuni dispositivi. Copyright 2012 Comtaste S.r.l. 59martedì 29 gennaio 13
  64. 64. Gli ultimi consigli Jquery Mobile non è un piccolo framework, è un UI framework ed usa il core di Jquery. Copyright 2012 Comtaste S.r.l. 60martedì 29 gennaio 13
  65. 65. Gli ultimi consigli Usa micro frameworks o creati le tue mini libraries XUI, zepto.js, microjs Copyright 2012 Comtaste S.r.l. 61martedì 29 gennaio 13
  66. 66. Gli ultimi consigli Se usi JSON (dovresti) ricorda che il JSON.parse è quasi 2 volte più veloce della funzione eval() Copyright 2012 Comtaste S.r.l. 62martedì 29 gennaio 13
  67. 67. Gli ultimi consigli Usare l’application cache: <html manifest="example.appcache“> Copyright 2012 Comtaste S.r.l. 63martedì 29 gennaio 13
  68. 68. Gli ultimi consigli Usare il local storage Ricorda che lo storage di stringhe è 2 volte più veloce dello tarage di oggetti Su mobile puoi considerare fino a 2 Mb. Copyright 2012 Comtaste S.r.l. 64martedì 29 gennaio 13
  69. 69. Gli ultimi consigli Scegliere il font giusto www.typekit.com (commerciale) Adobe Edge Webfonts (free) http://www.google.com/webfonts (free) Copyright 2012 Comtaste S.r.l. 64martedì 29 gennaio 13
  70. 70. Go Responsive: Web apps per tutti gli schermimartedì 29 gennaio 13

×