Non esiste il mobile web, il tablet web o il desktop web. E’ sempre lo stesso web solo fruito da dispositivi diversi. In questa sessione rivolta ai web developer, web designer e User Interface designer, verranno mostrate le tecniche HTML5, CSS3 e Javascript, gli UX design patterns e le ottimizzazioni necessarie a creare le applicazioni del futuro: quelle che saranno fruibili da qualsiasi dispositivo.
Marco Casario, autore del libro HTML5 Solutions ed Essential CSS3 tecniques (Apress) condividerà le esperienze reali, fatte durante la gestione dei progetti di Comtaste degli ultimi due anni.
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
1. HTML5, CSS3 e JavaScript
Web app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - m.casario@comtaste.com
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
2. Chi sono
Copyright 2013 www.marcocasario.com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
3. I miei ultimi libri
Copyright 2013 www.marcocasario.com 3
sabato 23 marzo 13
4. I miei corsi
Copyright 2013 www.marcocasario.com 3
Rich Web Apps con HTML5
Responsive Design con HTML5 e
CSS3
sabato 23 marzo 13
6. Il web è cambiato
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
7. Smartphones superano i PC
Leggi: www.businessweek.com/technology/content/apr2011/
tc20110418_512247.htm
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
8. Il Web è uscito dal desktop
Copyright 2013 www.marcocasario.com 29
sabato 23 marzo 13
9. Dove gli utenti usano il mobile
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
10. RESPONSIVE
Copyright 2013 www.marcocasario.com - CONFIDENZIALE - 15
Le opzioni
OTTIMIZZATO
NATIVO
IBRIDO
WEB STORE
Retail
Search
Software As a Service
Siti d’informazione e blogs
Portfolio
Magazine
Softwares
Videogiochi
Finanza
Softwares
Videogiochi
Multimedia
sabato 23 marzo 13
11. Versioni ottimizzate per mobile
Che succede se il link è condiviso sui social
network ?
Copyright 2013 www.marcocasario.com 30
sabato 23 marzo 13
12. Responsive Web Design
Il movimento del Responsive Web Design risale ad un
articolo del 2010 di Ethan Marcotte scritto per A List
Apart titled “Responsive Web Design.” in cui dichiarava:
responsive design is not about “designing for mobile.”
But it’s not about “designing for the desktop,” either.
Rather, it’s about adopting a more flexible, device-
agnostic approach to designing for the web
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
15. Difficult to see. Always in
motion is the future.
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
16. Non si compete con la tecnologia
Copyright 2013 www.marcocasario.com 31
Non possiamo creare una versione
ottimizzata per ogni dispositivo che uscirà
sul mercato.
sabato 23 marzo 13
18. Quando sarà finito HTML5
Il W3C ha presentato un piano secondo il quale le
specifiche di HTML5 saranno finali e consolidate a fine
2014
Le specifiche HTML 5.1 saranno invece finalizzate per il
2016.
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
20. Top 5 HTML5 Mobile Features
Geolocation
Offline Application
CSS3 Media Queries
Video and Audio
Canvas and WebGL
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
23. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Gli utenti che navigano il web dai dispositivi
mobili hanno bisogno dello stesso contenuto di
quelli che usano il web browser dal desktop ?
sabato 23 marzo 13
24. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
sabato 23 marzo 13
25. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
E’ corretto pensare che l’utente seduto davanti
al desktop può “digerire” più informazioni,
mentre chi naviga col cellulare è on the move e
quindi non può concentrarsi su troppo
contenuto ?
sabato 23 marzo 13
26. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Non si può rispondere a queste domande
senza conoscere in maniera approfondita
quelli che sono gli obiettivi degli utenti finali.
sabato 23 marzo 13
27. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Cross-screen Web App
Workflow
sabato 23 marzo 13
36. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Testo su dispositivi mobili per valutare
contenuti e application flow
4.
sabato 23 marzo 13
37. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Ciclo di revisione e creazione dei
visuals e style guide
5.
sabato 23 marzo 13
38. Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Markup dei visuals con stili grafici
6.
sabato 23 marzo 13
45. Ingredienti per il RWD
Copyright 2013 www.marcocasario.com 33
★Flexible Grid-based layout
★Flexible images and media
★Media Queries
sabato 23 marzo 13
46. Copyright 2013 www.marcocasario.com 36
Creare griglie flessibili
Libro: Ordering Disorder: Grid Principles for Web Design,
sabato 23 marzo 13
47. Adaptive Images - W3C
Copyright 2013 www.marcocasario.com 47
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
sabato 23 marzo 13
50. Media Queries
Copyright 2013 www.marcocasario.com 36
Sintassi della media query:
@media screen and (min-width: 960px) {
body {
font-family: 'Merriweather Sans', sans-serif;
font-weight:300;
font-style:normal;
}
}
Se il browser risponde alle due query, allora viene
caricato il css definito al suo interno.
sabato 23 marzo 13
51. Caricamento dei Media Queries
Copyright 2013 www.marcocasario.com 36
Le media queries possono essere embeddate nello
stylesheet:
@media screen and (min-width: 960px) {
body{
font-size: 16px;
}
}
o importate nel documento come foglio esterno:
<link href="style.css" media="only screen and (min-
width: 960px)" />
sabato 23 marzo 13
52. Caricamento dei Media Queries
Copyright 2013 www.marcocasario.com 36
Media queries embeddate nello stylesheet
★vengono caricate dal browser anche se non utilizzate,
ma effettuano una sola chiamata HTTP.
Media queries importate come foglio esterno
★vengono caricate tutte :/ con l’aggravante che le
chiamate HTTP sono tante quanti i fogli di sitle da
caricare !
sabato 23 marzo 13
53. Media Queries
Copyright 2013 www.marcocasario.com 36
Se hai un layout fisso, convertilo in fluido
prima di iniziare a scrivere le media queries.
sabato 23 marzo 13
55. Strumenti per i test
Copyright 2013 www.marcocasario.com 36
http://responsive.victorcoulon.fr
Responsive Design Bookmarklet
sabato 23 marzo 13
56. Approccio per creare le MQ
Copyright 2013 www.marcocasario.com 36
Lasciarsi guidare dal contenuto
DEMO: Lanciare il mediaQuery Bookmarklet
sabato 23 marzo 13
57. CSS Frameworks
Copyright 2013 www.marcocasario.com 36
Sono un insieme di CSS files che
contengono delle regole.
Queste regole determinano il layout ed il
contenuto di una pagina html
sabato 23 marzo 13
58. Scegliere un framework
Copyright 2013 www.marcocasario.com 36
Esistono centinaia di framework.
I framework possono essere riassunti in 3 tipi:
★UI Frameworks (Bootstrap)
★Framework omnicomprensivi (Foundation4, Gumby,
YAML, )
★Framework minimali (es. Skeleton, Base, Kube, Goldilocks)
sabato 23 marzo 13
60. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Scegliere un framework significa usare l’approccio allo
sviluppo di qualcun’altro.
Scegliere un framework significa ridurre i tempi di
sviluppo (il più delle volte)
Scegliere un framework significa non dover reinventare
la ruota ogni volta (consistenza tra i browsers, hacks ..)
Scegliere un framework significa usare uno standard e
delle convenzioni nello sviluppo.
sabato 23 marzo 13
61. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Il mio consiglio ?
Fatevi una lista degli obiettivi del vostro progetto:
compatibilità tra browser, velocità di sviluppo, aiuto sul layout,
etc.
Provate tanti framework, capite quali soluzioni sono state
trovate e come sono state implementate.
Imparate dalle loro best practice.
Depurate il codice che non usate ma che è incluso nel
framework
sabato 23 marzo 13
62. Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
Il mio consiglio ?
Infine scegliete quello che è più vicino al vostro approccio
considerando anche aspetti di diffusione e di community.
Se proprio non riuscite, allora createvi il vostro framework !
Leggete bene il licensing.
sabato 23 marzo 13
64. Copyright 2013 www.marcocasario.com 36
RESS: Responsive Server
Tecnica che usa il server per
generare il codice a seconda
del dispositivo intercettato.
sabato 23 marzo 13
68. Copyright 2013 www.marcocasario.com 36
Performance
Da studi di ricerca del settore
si evince che gli utent si
aspettano di vedere la pagina
caricata entro 2 secondi.
Dopo il 3 secondo il 40% degli
utenti abbandona il sito.
sabato 23 marzo 13
69. Copyright 2013 www.marcocasario.com 36
Performance
Amazon ha dichiarato che ogni
100ms di tempo aggiunto al
caricamento di una pagina fa
decrementare le vendite del
1%
sabato 23 marzo 13
70. Copyright 2013 www.marcocasario.com 36
Performance
Il RWD se approcciato male può
drammaticamente impattare sulle
performance e sui tempi di caricamento
delle pagine.
sabato 23 marzo 13
73. Copyright 2013 www.marcocasario.com 36
Performance
Rimuovi dai CSS gli statement orfani.
Usa tool appositi www.sitepoint.com/dustmeselectors/
sabato 23 marzo 13
74. Copyright 2013 www.marcocasario.com 36
Performance
Misura le performance dei CSS3
http://andy.edinborough.org/CSS-Stress-Testing-and-
Performance-Profiling
sabato 23 marzo 13
75. Copyright 2013 www.marcocasario.com 36
Performance
CSS minification
http://www.csscompressor.com/
PS: Usa il <link> invece del @import per permettere il download
parallello
sabato 23 marzo 13
76. Copyright 2013 www.marcocasario.com 36
Performance
Ottimizzare l’uso delle immagini.
Usare gli Sprites
http://alistapart.com/article/sprites
http://spriteme.org/
sabato 23 marzo 13
77. Copyright 2013 www.marcocasario.com 36
Performance
Usare la tecnica del Data URIs
.embeddedImg {
background-image: url("data:image/
png;base64,iVBORw0KGgoAAAANS ...
UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");
}
http://software.hixie.ch/utilities/cgi/data/data
http://www.motobit.com/util/base64-decoder-encoder.asp
sabato 23 marzo 13
79. Copyright 2013 www.marcocasario.com 36
Performance
Comprimi le immagini.
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/
sabato 23 marzo 13
80. Copyright 2013 www.marcocasario.com 36
Performance
Ottimizza la sintassi JavaScript
Evita l’uso dell’eval()
Fai attenzione all’uso di with
Evita il try..catch (se sai che un errore si verificherà
sicuramente)
sabato 23 marzo 13
81. Copyright 2013 www.marcocasario.com 36
Performance
Pubblica i file Javascript e CSS su un
subdomain diverso dal markup.
Questo permette il caricamento parallelo
delle risorse.
sabato 23 marzo 13
84. Connessione – Detect client side
Copyright 2013 www.marcocasario.com 53
W3C Network Information API
Usa la proprietà navigator.connection.type che ritorna
WIFI, CELL_2G, CELL_3G
if
(navigator.connection.type==navigator.connection.WIFI)
{ }
sabato 23 marzo 13
87. Redirect – Do not !
Copyright 2013 www.marcocasario.com 56
Evitare i redirect
Il sito sarà più SEO-friendly
Alcuni browser mobile possono presentare dei problemi
sabato 23 marzo 13
88. Gestures – Touch not Click
Copyright 2013 www.marcocasario.com 57
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.
sabato 23 marzo 13
89. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 58
Parsare Javascript richiede tempo
(anche 100ms per 1Kb)
sabato 23 marzo 13
90. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 59
Ti serve veramente un
framework ?
Jquery impiega 6 secondi ad essere parsato
su alcuni dispositivi.
sabato 23 marzo 13
91. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 60
Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.
sabato 23 marzo 13
92. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 61
Usa micro frameworks o creati le tue mini
libraries
★ XUI
★ zepto.js
★ microjs
sabato 23 marzo 13
93. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 62
Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()
sabato 23 marzo 13
94. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 63
Usare HTML5 Application Cache
<html manifest="example.appcache“>
sabato 23 marzo 13
95. Gli ultimi consigli
Copyright 2013 www.marcocasario.com 64
Usare HTML5 Local Storage
Ricorda che lo storage di stringhe è 2 volte più veloce
dello storage di oggetti
Su mobile puoi considerare fino a 2 Mb.
sabato 23 marzo 13
96. Persistent Cache Size by Browser
Copyright 2013 www.marcocasario.com 64
sabato 23 marzo 13
103. Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura client
Questa potrebbe essere una lista dei moduli JS che il
client deve gestire:
★Navigation
★Remote Data Access
★Authentication/Authorization
★Decouple View from Application Model (MVC pattern)
★Modularization/Packaging
★Dependency Management
★Logging/Tracing
★Exception Handling
sabato 23 marzo 13
104. Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura client
Questa potrebbe essere una lista dei moduli JS che il
client deve gestire:
★Backbone.js – Javascript MVC/Navigation framework
★Require.js – AMD based module organization and
library dependency management
★_Underscore.js – Provide functional programming
features to Javascript
★Jquery Mobile – Document Object Model(DOM) access
and manipulation
★Zepto.js - MVC framework compatibile Jquery
★XUI.js, Flight by Twitter
sabato 23 marzo 13
106. Emulatori
Copyright 2013 www.marcocasario.com 51
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
sabato 23 marzo 13
107. HTML5, CSS3 e JavaScript
Web app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - m.casario@comtaste.com
www.linkedin.com/in/marcocasario
sabato 23 marzo 13