html5

HTML5Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che

dovremmo sapere (prima che sia troppo tardi!)

PREMESSE

Ian Hickson, editor of the HTML5 specification.

“HTML5 will reach the “Proposed Recommendation” stage sometime in 2022.” [1]

Roberto Giacobbo, conduttore di “Voyager”

[1]

“La fascinazione di grandi

misteri, la vertigine di

domande inquietanti.

Una originale, strabiliante,

ipotesi su quello che

potrebbe accadere all'alba

del 21 dicembre 2012.”

Questa sarà una presentazione su quel che dovete sapere per affrontare HTML5, poi starà a voi andare a metterci le mani...

5Vorrei prima però mettervi in guardia da un pericolo che si aggira fra gli “addetti ai lavori”.

It’s new...

...it’s cool...

...it’s HTML5.

HTML5 è la nuova buzzword del momento. Quella che fino a poco tempo fa era “web 2.0”

HTML è un linguaggio di rappresentazione semantica di un documento iper-testuale.

HTML sta diventando sempre più la base di costruzione di applicazioni “browser-based”.

HTML 4.01 HTML5

web-pages web-applications

design user-interface

SPECIFICHE

Hypertext Markup Language - 2.0September 22, 1995

HTML 3.2 Specification - W3C Recommendation14 January 1997

HTML 4.01 Specification - W3C Recommendation 24 December 1999

[2]

[3]

[4]

HTML 5 - A vocabulary and associated APIs for HTML and XHTML - W3C Working Draft 25 August 2009 [5]

“This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

This specification is intended to replace (be a new version of) what was previously the HTML4, XHTML 1.0, and DOM2 HTML specifications.”

[6]

Il documento di specifiche

in formato A4 consta di

ben 690 pagine...

[6]

Il documento di specifiche

in formato A4 consta di

ben 690 pagine...

(Un vero mattone!)

(OPINIONI)

Kyle Weems, CSSquirrel

“It’s a mess.” [7]

Andy Clarke, Stuff and Nonsense

“HTML5 again mired in corporate politics, egotism, squabbles and petty disagreements.” [8]

Peter-Paul Koch (a.k.a. “PPK”), QuirksMode

“So vaguely defined.”“The continuation of Web2.0 by other means.”

“The HTML5 drag and drop module is not just a disaster, it’s a fucking disaster.” [10]

[9]

[9]

Jeff Croft

“Proposing a timeline 13 years out in this industry, c’mon… it’s ridiculous!” [11]

Meglio lasciare perdere?

È INTORNO A NOI...

Sta a noi decidere quali parti dello spezzatino cominciare a usare fin da ora...

BROWSER

Domanda: “Quali browser supportano HTML5?”

Domanda: “Quali browser supportano una certa funzionalità di HTML5?”

Best practice: DOM detection

Quattro tecniche base:

1. Verificare se una certa proprietà esiste per un oggetto di tipo globale (window o navigator)

2. Creare un elemento, quindi verificare se una certa proprietà esiste per l’elemento appena creato

3. Creare un elemento, verificare se un certo metodo esiste per l’elemento, chiamare il metodo e verificare il risultato

4. Creare un elemento, assegnare un valore a una sua proprietà, quindi verificare se il valore per quella proprietà coincide con quello assegnato

[12]

Hand coding?

NO!

Use a framework/library...

SproutCore

Modernizr

HTML5 shiv

(e sicuramente molte altre a breve...)

ExplorerCanvas

[13]

[14]

[15]

[16]

La sintassi per HTML5 è pensata in modo che sia backward-compatible con i parser dei browser più vecchi.

Canvas

Audio/Video

Storage

Offline

Web Workers

Form 2.0

Per maggiori dettagli consultare le risorse online [17] [18] [19]

Geolocation

OperaChrome

Safari

FF 3/2FF 3.5

IE 6

IE 7 IE 8

[20]

WHAT’S NEW?

Novità nel linguaggio:

• introduzione di nuovi elementi semantici

• introduzione di nuovi attributi (anche “custom”)

• eliminazione elementi/attributi obsoleti

• definizione di un nuovo doctype

• definizione di nuove regole di sintassi

[21]

Introduzione di nuove API per semplificare lo sviluppo di applicazioni web:

• disegno bidimensionale su canvas

• riproduzione audio/video integrata (plugin)

• gestione di storage di dati locali

• geo-localizzazione dell’utente

• gestione dello stato offline delle pagine web

• utilizzo di processi paralleli e in background

[21]

E molto altro ancora:

• drag&drop

• postMessage

• browser history

• editing nativo

• registerProtocolHandler

• querySelectorAll

[21]

HTML 2.0 <p>(1995)

HTML 3.2 <p>(1997)

HTML 4.1 <p>(1999)

HTML5 <p>(2008)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

XHTML

<!doctype html> <html> <head> <meta charset="utf-8">

HTML5

STRUTTURA

<div>

XHTML

<section><nav><article><header><footer><aside><hgroup>

HTML5

AUDIO/VIDEO

<audio><source src="file.ogg"></source><source src="file.mp3"></source>

</audio>

AUDIO

<video width="xx" height="yy"><source src="file.ogg" type="video/ogg"></source><source src="file.mp4" type="video/mp4"></source>

</video>

VIDEO

<video controls autobuffer autoplay poster="img.jpg">

CANVAS (API)

<canvas width="xx" height="yy">

CANVAS

•paths (lines & strokes)•fills•gradients•shadows•text•bitmaps•manipulation•animation

CANVAS 2D (API)

FORMS 2.0

<input type="search"><input type="tel"><input type="email"><input type="url"><input type="number"><input type="datetime"><input type="date"><input type="month"><input type="week"><input type="time"><input type="range"><input type="color">

INPUT TYPESplaceholderrequiredautofocusautocompleteminmaxsteppattern...

ATTRIBUTES

GEO-LOCATION

function can_be_geolocated() { return !!navigator.geolocation;}

BROWSER NATIVE SUPPORT

function getCurrentPosition(onSuccess,onError)

WEB-WORKERS

Alcune possibili applicazioni di un “worker”:

• computazione “pesante”

• interazione con storage/database locali

• comunicazione in background

• molteplici operazioni in parallelo

var w = new Worker('script.js');

BROWSER NATIVE SUPPORT

onmessage = function(event){ };

function run() { postMessage(...);}

function done(){ postMessage(...);}

script.js

OFFLINE

Permette di dichiarare, tramite un apposito file testuale (“manifest”) quali elementi e risorse devono essere salvate in cache per permettere la consultazione e fruizione della pagina anche quando il browser è in modalità disconnessa.

I file salvati in cache possono essere di qualunque tipo: HTML, CSS, JavaScript, immagini, video, ecc.

oncheckingonerroronnoupdateondownloadingonprogressonupdatereadyoncachedonobsolete

EVENTI

update()swapCache()

METODIUNCACHEDIDLECHECKINGDOWNLOADINGUPDATEREADYOBSOLETE

CACHE STATUS

navigator.onLine

BROWSER STATE

STORAGE

Permette di salvare i dati in uno pseudo-database presente nel browser, sia in locale, e quindi in modo persistente, che in sessione, e quindi temporaneo.

I vantaggi rispetto all’uso dei cookie sono:

• maggiore spazio disponibile

• i dati non vengono inviati al server (no overhead)

Alcune possibili applicazioni di uno “storage”:

• salvataggio preferenze utente

• carrello acquisti

• memorizzazione testi/articoli preferiti

• auto-save delle attività in corso

• caching delle informazioni e dei contenuti

getItem(key)setItem(key,value)removeItem(key)key(n)clear()

METODI

EVENTIstorage

PROPRIETÁlength

CONCLUSIONI

[1]

Ci dirigiamo (a lenti passi)

verso un futuro radioso...

Nel frattempo, aspettiamo e

vediamo che succede, tanto

con i vecchi browser ancora

in giro abbiamo la scusa che

non è supportato...

Sicuramente ancora un po’ “acerbo”

Può essere usato in sistemi chiusi

Richiede la graceful-degradation

Alcune feature molto promettenti

“Se il giorno è dàdàla notte sarà

dàdà... dapaura!”

www.didoo.net

Grazie per l’attenzione.

Cristiano Rastelli

REFERENZE

http://blogs.techrepublic.com.com/programming-and-development/?p=718[1]

Links[2]

[3]

[4]

http://www.w3.org/MarkUp/html-spec/html-spec_toc.html

http://www.w3.org/TR/REC-html32

http://www.w3.org/TR/html401/

[5] http://www.w3.org/TR/html5/

[6] http://www.whatwg.org/specs/web-apps/current-work/

[7] http://www.cssquirrel.com/2010/01/11/comic-update-the-html5-show-aka-a-mess/

[8] http://stuffandnonsense.co.uk/blog/about/keep_calm_and_carry_on_with_html5

[9] http://www.quirksmode.org/blog/archives/2010/01/html5_means_wha.html

[10] http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

[11] http://jeffcroft.com/blog/2008/sep/11/two-thousand-twenty-two/

[12] http://diveintohtml5.org/detect.html

[13] http://www.sproutcore.com/

[14] http://www.modernizr.com/

[15] http://html5shiv.googlecode.com

[16] http://excanvas.sourceforge.net/

[17] http://a.deveria.com/caniuse

[18] http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

[19] http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)

http://www.w3counter.com/globalstats.php[20]

Links[21]

[22]

»

http://robertnyman.com/2009/10/14/an-introduction-to-html5/

http://diveintohtml5.org/examples/blog-html5.html

http://dev.w3.org/html5/spec/Overview.html

» http://www.whatwg.org/specs/web-apps/current-work/

»

»

»

http://diveintohtml5.org/

»

http://html5demos.com/

»

http://html5doctor.com/

»

http://html5gallery.com/

»

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

http://html5doctor.com/designing-a-blog-with-html5/

http://www.findmebyip.com/

html5

Technology

html5 specification

xhtml html5

affrontare html5

html5 pensata

html5 ci che sappiamo

quali browser supportano

applicazioni web

canvas canvas