Smau Bologna 2016 - Codemotion

HTML5, CSS3 e JavaScript
Web app per tu7 gli schermi

Marco Casario - www.marcocasario.com/
CTO Comtaste - m.casario@comtaste.com

Marco Casario 
www.marcocasario.com 
Chi Sono

I miei ul>mi libri
Copyright 2016 www.marcocasario.com 3

I miei corsi
Rich Web Apps con HTML5
Responsive Design con HTML5 e
CSS3

Il web è cambiato

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


Il Web è uscito dal desktop

Dove gli uten> usano il mobile

RESPONSIVE
Copyright 2016 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

Diﬃcult to see. Always in mo>on is
the future.

Non si compete con la tecnologia
Non possiamo creare una versione
ottimizzata per ogni dispositivo che uscirà
sul mercato.

Versioni o7mizzate per mobile
Che succede se il link è condiviso sui social
network ?

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

Responsive Architecture
Da vedere: http://vimeo.com/4661618

Responsive Web Design

I Tool per i test di supporto

HTML5Test.com

I Browser che hanno un punteggio di circa 400 punti
su HTML5 test possono essere considerati
HTML5-friendly

www.caniuse.com

www.html5please.com

www.css3please.com/

Is Mobile Friendly ? Te lo dice Google
https://testmysite.thinkwithgoogle.com/

http://modernizr.com/

Come si usa

<html class=“no-js”>

Se JavaScript è abilitato Modernizr cambierà il no-js in
una lista delle funzionalità supportate o non supportate:

<html class=“js canvas canvastext no-geolocation rgba hsla
multiplebgs borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients cssreﬂections
csstransforms csstransforms3d csstransitions video audio
localstorage sessionstorage webworkers applicationcache
fontface”>

Potete quindi usare le classi per creare comportamenti
diversi:

.no-borderradius .box {

border: solid 1px black;

}

.borderradius .box {

border: solid 1px blue;

border-radius: 10px;

}

Feature Detection con Modernizr

if (Modernizr.localstorage){

// funzionalità supportata

} else {

// Purtroppo il tuo browser non supporta i
localstorage. Stai usando IE vero ?

}

Feature Resource Loader con Modernizr

Modernizr.load({

Test : Modernizr.localstorage,
Yep : 'localstorage.js',

Nope : 'localstorage-alternative.js' });

Usa la libreria http://yepnopejs.com/

Feature Resource Loader con Modernizr

Modernizr.load({

Test : Modernizr.touch,

Yep : ['touch.js', 'smartphone.css']

});

Cosa non fa Modernizr

Supporto per vecchi browser (anche se ora usa
HTML5Shiv)

Respond.js per gestire le media queries

https://github.com/aFarkas/html5shiv

Come si usa HTML5Shiv

Validatori HTML5

http://html5.validator.nu/

http://validator.w3.org

Ricordate che HTML5 permette di usare sintassi XML
per la retrocompatibilità, ma non è obbligatorio.

HTML5 Engine
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

Il contesto di u>lizzo
Gli utenti che navigano il web dai dispositivi
mobili hanno bisogno dello stesso contenuto di
quelli che usano il web browser dal desktop ?

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 ?

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

Cross-screen Web App
Workﬂow

Strategie da usare - Il vecchio approccio

Cosa è importante per gli utenti
+
Application Map
1.

Mockup a bassa fedeltà
2.

Strategie da usare - Mockup

Mockup Bassa Fedeltà

Link: http://www.balsamiq.com/products/mockups

Mockup Bassa Fedeltà

Link: http://proto.io/

Rapid Prototyping (markup ﬂuido)
3.

Strategie da usare - Rapid Proto

Testo su dispositivi mobili per valutare
contenuti e application ﬂow
4.

Ciclo di revisione e creazione dei
visuals e style guide
5.

Markup dei visuals con stili graﬁci
6.

Layout PaBerns - Tipologie

Layout PaBerns

Test del markup sui device mobili
7.

Primi test di performance e load time
8.

Migliora, implementa e refactoring
10.

Ingredien> per il RWD
★Flexible Grid-based layout
★Flexible images and media
★Media Queries

Creare griglie ﬂessibili
Libro: Ordering Disorder: Grid Principles for Web Design,

Adap>ve 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

Responsive images

Adap>ve Images
http://adaptive-images.com/

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.

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)" />

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 !

Media Queries
Se hai un layout ﬁsso, convertilo in ﬂuido
prima di iniziare a scrivere le media queries.

Approcci per creare media queries

Strumen> per i test
http://responsive.victorcoulon.fr
Responsive Design Bookmarklet

Approccio per creare le MQ
Lasciarsi guidare dal contenuto
DEMO: Lanciare il mediaQuery Bookmarklet

CSS Frameworks
Sono un insieme di CSS ﬁles che
contengono delle regole.

Queste regole determinano il layout ed il
contenuto di una pagina html

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)

Framework Si/No ?

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.

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

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.

Esplorate
Framework Si/No ?

RESS: Responsive Server
Tecnica che usa il server per generare il
codice a seconda del disposi2vo
interce4ato.

http://wurﬂ.sourceforge.net/

https://github.com/jamesgpearce/modernizr-server

Performance
Da studi di ricerca del se4ore si evince
che gli utent si aspe4ano di vedere la
pagina caricata entro 2 secondi.
Dopo il 3 secondo il 40% degli uten2
abbandona il sito.

Performance
Amazon ha dichiarato che ogni 100ms
di tempo aggiunto al caricamento di
una pagina fa decrementare le vendite
del
1%

Performance
Il RWD se approcciato male può dramma2camente
impa4are sulle performance e sui tempi di
caricamento delle pagine.

Performance
http://goo.gl/bdpzJ

Performance
Pulisci il codice HTML riducendo gli elemen2 non
seman2ci.

Performance
Rimuovi dai CSS gli statement orfani.
Usa tool apposi2 www.sitepoint.com/dustmeselectors/

Performance
Misura le performance dei CSS3
h4p://andy.edinborough.org/CSS-Stress-Tes2ng-and-Performance-Proﬁling

Performance
CSS miniﬁca2on
h4p://www.csscompressor.com/
PS: Usa il <link> invece del @import per permeBere il download parallello

Performance
OTmizzare l’uso delle immagini.
Usare gli Sprites
h4p://alistapart.com/ar2cle/sprites
h4p://spriteme.org/

Performance
Usare la tecnica del Data URIs
.embeddedImg {
background-image: url("data:image/
png;base64,iVBORw0KGgoAAAANS ...
UhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");
}
h4p://soVware.hixie.ch/u2li2es/cgi/data/data
h4p://www.motobit.com/u2l/base64-decoder-encoder.asp

Performance
Usare Icon Fonts
h4p://icomoon.io/

Performance
Comprimi le immagini.
h4p://imageop2m.pornel.net/
h4p://developer.yahoo.com/yslow/smushit/
h4p://pmt.sourceforge.net/pngcrush/

Performance
OTmizza la sintassi JavaScript
Evita l’uso dell’eval()
Fai a4enzione all’uso di with
Evita il try..catch (se sai che un errore si veriﬁcherà sicuramente)

Performance
Pubblica i ﬁle Javascript e CSS su un subdomain
diverso dal markup.
Questo perme4e il caricamento parallelo delle
risorse.

Performance
Minify JavaScript
jscompress.com
www.minifyjavascript.com
www.jsmini.com
h4p://marijnhaverbeke.nl/uglifyjs

Performance

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)

{ }

HTTP Tes>ng – Bandwidth throBling
http://www.charlesproxy.com/

HTTP Tes>ng – Bandwidth throBling

Redirect – Do not !
Evitare i redirect

Il sito sarà più SEO-friendly

Alcuni browser mobile possono presentare dei problemi

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.

Gli ul>mi consigli
Parsare Javascript richiede tempo
(anche 100ms per 1Kb)

Gli ul>mi consigli
Ti serve veramente un
framework ?
Jquery impiega 6 secondi ad essere parsato
su alcuni dispositivi.

Gli ul>mi consigli
Jquery Mobile non è un piccolo
framework, è un UI framework ed usa il
core di Jquery.

Gli ul>mi consigli
Usa micro frameworks o creati le tue mini
libraries

★ XUI

★ zepto.js

★ microjs

Gli ul>mi consigli
Se usi JSON (dovresti) ricorda che il
JSON.parse è quasi 2 volte più veloce
della funzione eval()

Gli ul>mi consigli
Usare HTML5 Application Cache
<html manifest="example.appcache“>

Gli ul>mi 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.

Persistent Cache Size by Browser

Performance - Test
http://developer.yahoo.com/yslow/

Performance - Test

Performance - Moduli Backend
www.gzip.org

https://developers.google.com/speed/

YUI Compressor
h4p://yui.github.com/yuicompressor/
Vedi www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-
compressor

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

Strategie da usare - ArchiteBura client
Questa potrebbe essere una lista dei moduli JS che il client deve
ges>re:
★Naviga>on
★Remote Data Access
★Authen>ca>on/Authoriza>on
★Decouple View from Applica>on Model (MVC paBern)
★Modulariza>on/Packaging
★Dependency Management
★Logging/Tracing
★Excep>on Handling

Questa potrebbe essere una lista dei moduli JS che il client deve
ges>re:
★Backbone.js – Javascript MVC/Naviga>on framework
★Require.js – AMD based module organiza>on and library
dependency management
★_Underscore.js – Provide func>onal programming features to
Javascript
★Jquery Mobile – Document Object Model(DOM) access and
manipula>on
★Zepto.js - MVC framework compa>bile Jquery
★XUI.js, Flight by TwiBer

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

HTML5, CSS3 e JavaScript
Web app per tu7 gli schermi

Marco Casario - www.marcocasario.com
CTO Comtaste - m.casario@comtaste.com

www.linkedin.com/in/marcocasario

Smau Bologna 2016 - Codemotion

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Smau Bologna 2016 - Codemotion

Semelhante a Smau Bologna 2016 - Codemotion (20)

Mais de SMAU

Mais de SMAU (20)

Último

Último (6)

Smau Bologna 2016 - Codemotion