Your SlideShare is downloading. ×
HTML5 cross-platform and device development: web app per tutti gli schermi
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

1,193
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 …

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,193
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

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. HTML5 cross-device: Web apps per tutti gli schermi Marco Casario CTO Comtaste www.linkedin.com/in/marcocasariomartedì 29 gennaio 13
  • 2. Chi sono Marco Casario CTO Comtaste www.linkedin.com/in/marcocasario Copyright 2012 Comtaste S.r.l. 2martedì 29 gennaio 13
  • 3. I miei ultimi libri Copyright 2012 Comtaste S.r.l. 3martedì 29 gennaio 13
  • 4. I miei corsi Rich Web Apps con HTML5 training.codemotion.it Copyright 2012 Comtaste S.r.l. 3martedì 29 gennaio 13
  • 5. Case Studiesmartedì 29 gennaio 13
  • 6. Progetto BANCA DITALIA Copyright 2012 Comtaste S.r.l. - CONFIDENZIALE - 9martedì 29 gennaio 13
  • 7. Progetto Noemalife – Galileo Mobilemartedì 29 gennaio 13
  • 8. Progetto Poste Italianemartedì 29 gennaio 13
  • 9. Cross platform & device Strategymartedì 29 gennaio 13
  • 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. The Boston Globe Copyright 2012 Comtaste S.r.l. 16martedì 29 gennaio 13
  • 12. Lufthansa Airline Copyright 2012 Comtaste S.r.l. 17martedì 29 gennaio 13
  • 13. Lufthansa Airline Copyright 2012 Comtaste S.r.l. 18martedì 29 gennaio 13
  • 14. NETFLIX Copyright 2012 Comtaste S.r.l. 19martedì 29 gennaio 13
  • 15. Responsive Web Appsmartedì 29 gennaio 13
  • 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. Elementi di una Responsive Web App LAYOUT PATTERNS MEDIA QUERIES VIEWPORT ALTRE CONSIDERAZIONI Copyright 2012 Comtaste S.r.l. 22martedì 29 gennaio 13
  • 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. Layout Patterns - Tipologie Copyright 2012 Comtaste S.r.l. 24martedì 29 gennaio 13
  • 20. Layout Patterns Copyright 2012 Comtaste S.r.l. 25martedì 29 gennaio 13
  • 21. Layout Patterns Copyright 2012 Comtaste S.r.l. 26martedì 29 gennaio 13
  • 22. Layout Patterns – Grid Generator Copyright 2012 Comtaste S.r.l. 27martedì 29 gennaio 13
  • 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. 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. 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. 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. 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. 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. Media Queries – Testing http://protofluid.com Copyright 2012 Comtaste S.r.l. 34martedì 29 gennaio 13
  • 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. 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. Responsive Frameworksmartedì 29 gennaio 13
  • 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. Responsive Frameworks Responsive Grid System http://responsive.gs/ Copyright 2012 Comtaste S.r.l. 39martedì 29 gennaio 13
  • 35. Responsive Frameworks Foundation 3 http://foundation.zurb.com/ Copyright 2012 Comtaste S.r.l. 40martedì 29 gennaio 13
  • 36. Responsive Frameworks YAML 4 http://www.yaml.de/ Copyright 2012 Comtaste S.r.l. 41martedì 29 gennaio 13
  • 37. Responsive Frameworks Bootstrap http://twitter.github.com/bootstrap/ Copyright 2012 Comtaste S.r.l. 42martedì 29 gennaio 13
  • 38. Responsive Frameworks Mobile Boilerplate http://html5boilerplate.com/mobile/ Copyright 2012 Comtaste S.r.l. 43martedì 29 gennaio 13
  • 39. Responsive Frameworks Skeleton http://www.getskeleton.com/ Copyright 2012 Comtaste S.r.l. 44martedì 29 gennaio 13
  • 40. Testing & Mesuringmartedì 29 gennaio 13
  • 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. 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. 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. Risoluzione – Display alta densità Perchè supportare questi dispositivi ? Copyright 2012 Comtaste S.r.l. 52martedì 29 gennaio 13
  • 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. 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. 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. 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. 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. 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. 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. Adaptive Images http://adaptive-images.com/ Copyright 2012 Comtaste S.r.l. 48martedì 29 gennaio 13
  • 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. 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. 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. 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. 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. 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. HTTP Testing – Bandwidth throttling Copyright 2012 Comtaste S.r.l. 55martedì 29 gennaio 13
  • 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. 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. 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. 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. 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. 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. 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. Gli ultimi consigli Usare l’application cache: <html manifest="example.appcache“> Copyright 2012 Comtaste S.r.l. 63martedì 29 gennaio 13
  • 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. 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. Go Responsive: Web apps per tutti gli schermimartedì 29 gennaio 13