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

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

http://rome.codemotionworld.com/talk-page/?talk_name=html5-css3-e-javascript-web-app-per-tutti-gli-schermi





http://www.marcocasario.com


mailto:[email protected]


Chi sono

Copyright 2013 www.marcocasario.com 2

Marco Casario

CTO Comtaste


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

http://tech.fortune.cnn.com/2011/02/07/idc-smartphone-shipment-numbers-passed-pc-in-q4-2010/

http://tech.fortune.cnn.com/2011/02/07/idc-smartphone-shipment-numbers-passed-pc-in-q4-2010/

http://www.businessweek.com/technology/content/apr2011/tc20110418_512247.htm




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 flexible, device-agnostic approach to designing for the web


sabato 23 marzo 13

Responsive Architecture


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

sabato 23 marzo 13

http://vimeo.com/4661618

http://vimeo.com/4661618

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

GeolocationOffline Application

CSS3 Media QueriesVideo 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 finali.

sabato 23 marzo 13



Cross-screen Web AppWorkflow

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

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

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



Mockup Bassa Fedeltà

Link: http://proto.io/

sabato 23 marzo 13

http://proto.io

http://proto.io



Rapid Prototyping (markup fluido)

3.

sabato 23 marzo 13


Strategie da usare - Rapid Proto

sabato 23 marzo 13



Testo su dispositivi mobili per valutare contenuti e application flow

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 grafici

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 flessibili

Libro: Ordering Disorder: Grid Principles for Web Design,

sabato 23 marzo 13

http://my.safaribooksonline.com/9780132979382/ch02#ch02fn5a

http://my.safaribooksonline.com/9780132979382/ch02#ch02fn5a

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

http://www.responsiveimages.org

http://www.responsiveimages.org

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 definito 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 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


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


http://responsive.victorcoulon.fr

Responsive Design Bookmarklet

sabato 23 marzo 13

http://seesparkbox.com/foundry/media_query_bookmarklet

http://seesparkbox.com/foundry/media_query_bookmarklet

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 files 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 ?

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


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://wurfl.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

http://goo.gl/bdpzJ

http://goo.gl/bdpzJ


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

http://www.sitepoint.com/dustmeselectors/

http://www.sitepoint.com/dustmeselectors/


Performance

Misura le performance dei CSS3

http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

sabato 23 marzo 13






Performance

CSS minification

http://www.csscompressor.com/

PS: Usa il <link> invece del @import per permettere il download parallello

sabato 23 marzo 13

http://www.csscompressor.com

http://www.csscompressor.com


Performance

Ottimizzare l’uso delle immagini.

Usare gli Sprites

http://alistapart.com/article/spriteshttp://spriteme.org/

sabato 23 marzo 13

http://alistapart.com/article/sprites

http://alistapart.com/article/sprites


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

http://software.hixie.ch/utilities/cgi/data/data

http://software.hixie.ch/utilities/cgi/data/data


Performance

Usare Icon Fonts

http://icomoon.io/

sabato 23 marzo 13

http://icomoon.io

http://icomoon.io


Performance

Comprimi le immagini.

http://imageoptim.pornel.net/http://developer.yahoo.com/yslow/smushit/

http://pmt.sourceforge.net/pngcrush/

sabato 23 marzo 13

http://imageoptim.pornel.net

http://imageoptim.pornel.net

http://developer.yahoo.com/yslow/smushit/

http://developer.yahoo.com/yslow/smushit/


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


Performance

Pubblica i file Javascript e CSS su un subdomain diverso dal markup.

Questo permette il caricamento parallelo delle risorse.

sabato 23 marzo 13


Performance

Minify JavaScript

jscompress.comwww.minifyjavascript.com

www.jsmini.comhttp://marijnhaverbeke.nl/uglifyjs

sabato 23 marzo 13

http://www.minifyjavascript.com

http://www.minifyjavascript.com

http://www.jsmini.com

http://www.jsmini.com

http://marijnhaverbeke.nl/uglifyjs

http://marijnhaverbeke.nl/uglifyjs


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

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


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 fino 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






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



http://www.slideshare.net/nzakas/extreme-javascript-compression-with-yui-compressor






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


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


Strategie da usare - Architettura client

sabato 23 marzo 13

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

sabato 23 marzo 13



HTML5, CSS3 e JavaScriptWeb app per tutti gli schermi

Marco Casario - www.marcocasario.com

CTO Comtaste - [email protected]


sabato 23 marzo 13










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

Technology

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