HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario

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

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
sabato 23 marzo 13

I miei corsi
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
sabato 23 marzo 13

Smartphones superano i PC
Leggi: www.businessweek.com/technology/content/apr2011/
tc20110418_512247.htm
sabato 23 marzo 13

Il Web è uscito dal desktop
sabato 23 marzo 13

Dove gli utenti usano il mobile
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 ?
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 ﬂexible, device-
agnostic approach to designing for the web
sabato 23 marzo 13

Responsive Architecture
Da vedere: http://vimeo.com/4661618
sabato 23 marzo 13

Responsive Web Design
sabato 23 marzo 13

Difficult to see. Always in
motion is the future.
sabato 23 marzo 13

Non si compete con la tecnologia
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.
sabato 23 marzo 13

HTML5 Macro aree
sabato 23 marzo 13

Top 5 HTML5 Mobile Features
Geolocation
Oﬄine Application
CSS3 Media Queries
Video and Audio
Canvas and WebGL
sabato 23 marzo 13

Errori da evitare
Approccio incrementale ad HTML5
sabato 23 marzo 13

Strategie per passare al RWD
sabato 23 marzo 13

Il contesto di utilizzo
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

sabato 23 marzo 13

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

Non si può rispondere a queste domande
senza conoscere in maniera approfondita
quelli che sono gli obiettivi degli utenti ﬁnali.
sabato 23 marzo 13

Cross-screen Web App
Workﬂow
sabato 23 marzo 13

Strategie da usare - Il vecchio approccio
sabato 23 marzo 13

Cosa è importante per gli utenti
+
Application Map
1.
sabato 23 marzo 13

Mockup a bassa fedeltà
2.
sabato 23 marzo 13

Strategie da usare - Mockup
sabato 23 marzo 13

Mockup Bassa Fedeltà
Link: http://www.balsamiq.com/products/mockups
sabato 23 marzo 13

Mockup Bassa Fedeltà
Link: http://proto.io/
sabato 23 marzo 13

Rapid Prototyping (markup ﬂuido)
3.
sabato 23 marzo 13

Strategie da usare - Rapid Proto
sabato 23 marzo 13

Testo su dispositivi mobili per valutare
contenuti e application ﬂow
4.
sabato 23 marzo 13

Ciclo di revisione e creazione dei
visuals e style guide
5.
sabato 23 marzo 13

Markup dei visuals con stili graﬁci
6.
sabato 23 marzo 13

Layout Patterns - Tipologie
sabato 23 marzo 13

Layout Patterns
sabato 23 marzo 13

Test del markup sui device mobili
7.
sabato 23 marzo 13

Primi test di performance e load time
8.
sabato 23 marzo 13

Migliora, implementa e refactoring
10.
sabato 23 marzo 13

Ingredienti per RWD
sabato 23 marzo 13

Ingredienti per il RWD
★Flexible Grid-based layout
★Flexible images and media
★Media Queries
sabato 23 marzo 13

Creare griglie ﬂessibili
Libro: Ordering Disorder: Grid Principles for Web Design,
sabato 23 marzo 13

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
sabato 23 marzo 13

Adaptive Images
http://adaptive-images.com/
sabato 23 marzo 13

CSS3 Media Queries
sabato 23 marzo 13

Media Queries
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 deﬁnito al suo interno.
sabato 23 marzo 13

Caricamento dei Media Queries
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
Media queries embeddate nello stylesheet
★vengono caricate dal browser anche se non utilizzate,
ma eﬀettuano 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
Se hai un layout ﬁsso, convertilo in ﬂuido
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
http://responsive.victorcoulon.fr
Responsive Design Bookmarklet
sabato 23 marzo 13

Approccio per creare le MQ
Lasciarsi guidare dal contenuto
DEMO: Lanciare il mediaQuery Bookmarklet
sabato 23 marzo 13

CSS Frameworks
Sono un insieme di CSS ﬁles che
contengono delle regole.
Queste regole determinano il layout ed il
contenuto di una pagina html
sabato 23 marzo 13

Scegliere un framework
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 ?
sabato 23 marzo 13

Framework Si/No ?
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 ?
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 ?
Il mio consiglio ?
Inﬁne scegliete quello che è più vicino al vostro approccio
considerando anche aspetti di diﬀusione e di community.
Se proprio non riuscite, allora createvi il vostro framework !
Leggete bene il licensing.
sabato 23 marzo 13

Esplorate
Framework Si/No ?
sabato 23 marzo 13

RESS: Responsive Server
Tecnica che usa il server per
generare il codice a seconda
del dispositivo intercettato.
sabato 23 marzo 13

http://wurﬂ.sourceforge.net/
sabato 23 marzo 13

https://github.com/jamesgpearce/modernizr-server
sabato 23 marzo 13

Performance e load time
sabato 23 marzo 13

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

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

Performance
Il RWD se approcciato male può
drammaticamente impattare sulle
performance e sui tempi di caricamento
delle pagine.
sabato 23 marzo 13

Performance
http://goo.gl/bdpzJ
sabato 23 marzo 13

Performance
Pulisci il codice HTML riducendo gli
elementi non semantici.
sabato 23 marzo 13

Performance
Rimuovi dai CSS gli statement orfani.
Usa tool appositi www.sitepoint.com/dustmeselectors/
sabato 23 marzo 13

Performance
Misura le performance dei CSS3
http://andy.edinborough.org/CSS-Stress-Testing-and-
Performance-Proﬁling
sabato 23 marzo 13

Performance
CSS miniﬁcation
http://www.csscompressor.com/
PS: Usa il <link> invece del @import per permettere il download
parallello
sabato 23 marzo 13

Performance
Ottimizzare l’uso delle immagini.
Usare gli Sprites
http://alistapart.com/article/sprites
http://spriteme.org/
sabato 23 marzo 13

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

Performance
Usare Icon Fonts
http://icomoon.io/
sabato 23 marzo 13

Performance
Comprimi le immagini.
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/
sabato 23 marzo 13

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 veriﬁcherà
sicuramente)
sabato 23 marzo 13

Performance
Pubblica i ﬁle Javascript e CSS su un
subdomain diverso dal markup.
Questo permette il caricamento parallelo
delle risorse.
sabato 23 marzo 13

Performance
Minify JavaScript
jscompress.com
www.minifyjavascript.com
www.jsmini.com
http://marijnhaverbeke.nl/uglifyjs
sabato 23 marzo 13

Performance
sabato 23 marzo 13

Connessione – Detect client side
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
http://www.charlesproxy.com/
sabato 23 marzo 13

HTTP Testing – Bandwidth throttling
sabato 23 marzo 13

Redirect – Do not !
Evitare i redirect
Il sito sarà più SEO-friendly
Alcuni browser mobile possono presentare dei problemi
sabato 23 marzo 13

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.
sabato 23 marzo 13

Gli ultimi consigli
Parsare Javascript richiede tempo
(anche 100ms per 1Kb)
sabato 23 marzo 13

Gli ultimi consigli
Ti serve veramente un
framework ?
Jquery impiega 6 secondi ad essere parsato
su alcuni dispositivi.
sabato 23 marzo 13

Gli ultimi consigli
Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.
sabato 23 marzo 13

Gli ultimi consigli
Usa micro frameworks o creati le tue mini
libraries
★ XUI
★ zepto.js
★ microjs
sabato 23 marzo 13

Gli ultimi consigli
Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()
sabato 23 marzo 13

Gli ultimi consigli
Usare HTML5 Application Cache
<html manifest="example.appcache“>
sabato 23 marzo 13

Gli ultimi consigli
Usare HTML5 Local Storage
Ricorda che lo storage di stringhe è 2 volte più veloce
dello storage di oggetti
Su mobile puoi considerare ﬁno a 2 Mb.
sabato 23 marzo 13

Persistent Cache Size by Browser
sabato 23 marzo 13

Performance - Test
http://developer.yahoo.com/yslow/
sabato 23 marzo 13

Performance - Test
sabato 23 marzo 13

Performance - Moduli Backend
www.gzip.org
sabato 23 marzo 13

https://developers.google.com/speed/
sabato 23 marzo 13

YUI Compressor
http://yui.github.com/yuicompressor/
Vedi www.slideshare.net/nzakas/extreme-javascript-
compression-with-yui-compressor
sabato 23 marzo 13

YUI Compressor
Vedi www.slideshare.net/nzakas/extreme-javascript-
compression-with-yui-compressor
sabato 23 marzo 13

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

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

sabato 23 marzo 13

Emulatori
Ne esistono tantissimi, molti dei quali gratuiti.
Sono utili come prima fase di testing e non possono
essere considerati aﬃdabili al 100%
http://www.mobilexweb.com/emulators
sabato 23 marzo 13

HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario

More Related Content

Viewers also liked

Similar to HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario

More from Codemotion

HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario