HTML5, CSS3 e JavaScriptWeb app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - [email protected]
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
Chi sono
Copyright 2013 www.marcocasario.com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario
sabato 23 marzo 13
I miei ultimi libri
Copyright 2013 www.marcocasario.com 3
sabato 23 marzo 13
I miei corsi
Copyright 2013 www.marcocasario.com 3
Rich Web Apps con HTML5
Responsive Design con HTML5 e CSS3
sabato 23 marzo 13
Tutto il mondo è ... mobile
sabato 23 marzo 13
Il web è cambiato
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Smartphones superano i PC
Leggi: www.businessweek.com/technology/content/apr2011/tc20110418_512247.htm
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Il Web è uscito dal desktop
Copyright 2013 www.marcocasario.com 29
sabato 23 marzo 13
Dove gli utenti usano il mobile
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
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
Versioni ottimizzate per mobile
Che succede se il link è condiviso sui social network ?
Copyright 2013 www.marcocasario.com 30
sabato 23 marzo 13
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
Responsive Architecture
Copyright 2013 www.marcocasario.com 32
Da vedere: http://vimeo.com/4661618
sabato 23 marzo 13
Responsive Web Design
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Difficult to see. Always in motion is the future.
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
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
HTML5 è tra noi !
sabato 23 marzo 13
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
HTML5 Macro aree
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Top 5 HTML5 Mobile Features
GeolocationOffline Application
CSS3 Media QueriesVideo and Audio
Canvas and WebGL
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Errori da evitare
Approccio incrementale ad HTML5
Copyright 2013 www.marcocasario.com 28
sabato 23 marzo 13
Strategie per passare al RWD
sabato 23 marzo 13
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
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
sabato 23 marzo 13
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
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
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Cross-screen Web AppWorkflow
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Strategie da usare - Il vecchio approccio
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Cosa è importante per gli utenti+
Application Map
1.
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Mockup a bassa fedeltà
2.
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Strategie da usare - Mockup
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Mockup Bassa Fedeltà
Link: http://www.balsamiq.com/products/mockups
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Mockup Bassa Fedeltà
Link: http://proto.io/
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Rapid Prototyping (markup fluido)
3.
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Strategie da usare - Rapid Proto
sabato 23 marzo 13
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
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
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Markup dei visuals con stili grafici
6.
sabato 23 marzo 13
Layout Patterns - Tipologie
Copyright 2013 www.marcocasario.com 24
sabato 23 marzo 13
Layout Patterns
Copyright 2013 www.marcocasario.com 25
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Test del markup sui device mobili
7.
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Primi test di performance e load time
8.
sabato 23 marzo 13
Il contesto di utilizzo
Copyright 2013 www.marcocasario.com 36
Migliora, implementa e refactoring
10.
sabato 23 marzo 13
Ingredienti per RWD
sabato 23 marzo 13
Ingredienti per il RWD
Copyright 2013 www.marcocasario.com 33
★Flexible Grid-based layout★Flexible images and media★Media Queries
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Creare griglie flessibili
Libro: Ordering Disorder: Grid Principles for Web Design,
sabato 23 marzo 13
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
Adaptive Images
Copyright 2013 www.marcocasario.com 48
http://adaptive-images.com/
sabato 23 marzo 13
CSS3 Media Queries
sabato 23 marzo 13
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
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
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
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
Approcci per creare media queries
sabato 23 marzo 13
Strumenti per i test
Copyright 2013 www.marcocasario.com 36
http://responsive.victorcoulon.fr
Responsive Design Bookmarklet
sabato 23 marzo 13
Approccio per creare le MQ
Copyright 2013 www.marcocasario.com 36
Lasciarsi guidare dal contenuto
DEMO: Lanciare il mediaQuery Bookmarklet
sabato 23 marzo 13
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
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
Framework Si/No ?
Copyright 2013 www.marcocasario.com 36
sabato 23 marzo 13
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
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
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
Copyright 2013 www.marcocasario.com 36
Esplorate
Framework Si/No ?
sabato 23 marzo 13
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
Copyright 2013 www.marcocasario.com 36
RESS: Responsive Server
http://wurfl.sourceforge.net/
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
RESS: Responsive Server
https://github.com/jamesgpearce/modernizr-server
sabato 23 marzo 13
Performance e load time
sabato 23 marzo 13
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
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
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
Copyright 2013 www.marcocasario.com 36
Performance
http://goo.gl/bdpzJ
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance
Pulisci il codice HTML riducendo gli elementi non semantici.
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance
Rimuovi dai CSS gli statement orfani.
Usa tool appositi www.sitepoint.com/dustmeselectors/
sabato 23 marzo 13
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
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
Copyright 2013 www.marcocasario.com 36
Performance
Ottimizzare l’uso delle immagini.
Usare gli Sprites
http://alistapart.com/article/spriteshttp://spriteme.org/
sabato 23 marzo 13
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/datahttp://www.motobit.com/util/base64-decoder-encoder.asp
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance
Usare Icon Fonts
http://icomoon.io/
sabato 23 marzo 13
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
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
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
Copyright 2013 www.marcocasario.com 36
Performance
Minify JavaScript
jscompress.comwww.minifyjavascript.com
www.jsmini.comhttp://marijnhaverbeke.nl/uglifyjs
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance
sabato 23 marzo 13
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
HTTP Testing – Bandwidth throttling
Copyright 2013 www.marcocasario.com 55
http://www.charlesproxy.com/
sabato 23 marzo 13
HTTP Testing – Bandwidth throttling
Copyright 2013 www.marcocasario.com 55
sabato 23 marzo 13
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
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
Gli ultimi consigli
Copyright 2013 www.marcocasario.com 58
Parsare Javascript richiede tempo (anche 100ms per 1Kb)
sabato 23 marzo 13
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
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
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
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
Gli ultimi consigli
Copyright 2013 www.marcocasario.com 63
Usare HTML5 Application Cache
<html manifest="example.appcache“>
sabato 23 marzo 13
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
Persistent Cache Size by Browser
Copyright 2013 www.marcocasario.com 64
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Test
http://developer.yahoo.com/yslow/
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Test
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Moduli Backend
www.gzip.org
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Moduli Backend
https://developers.google.com/speed/
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Moduli Backend
YUI Compressor
http://yui.github.com/yuicompressor/
Vedi www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor
sabato 23 marzo 13
Copyright 2013 www.marcocasario.com 36
Performance - Moduli Backend
YUI Compressor
Vedi www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor
sabato 23 marzo 13
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
Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura clientQuesta 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
Copyright 2013 www.marcocasario.com 36
Strategie da usare - Architettura client
sabato 23 marzo 13
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
HTML5, CSS3 e JavaScriptWeb app per tutti gli schermi
Marco Casario - www.marcocasario.com
CTO Comtaste - [email protected]
www.linkedin.com/in/marcocasario
sabato 23 marzo 13