Date post: | 27-Jan-2015 |
Category: |
Technology |
Upload: | cristiano-rastelli |
View: | 4,034 times |
Download: | 1 times |
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?
HTML5
È 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]
TAGS
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
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="xx" height="yy" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="src" value="file.swf" /><embed type="application/x-shockwave-flash" width="xx" height="yy" src="file.swf" allowfullscreen="true"></embed>
</object>
OBJECT/EMBED
<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
API
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/