SlideShare una empresa de Scribd logo
1 de 79
Descargar para leer sin conexión
HTML5
Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che
       dovremmo sapere (prima che sia troppo tardi!)
PREMESSE
“HTML5 will reach the
“Proposed Recommendation”
stage sometime in 2022.”                              [1]




    Ian Hickson, editor of the HTML5 specification.
“La fascinazione di grandi
misteri, la vertigine di
domande inquietanti.
Una originale, strabiliante,
ipotesi su quello che
potrebbe accadere all'alba                             [1]

del 21 dicembre 2012.”


           Roberto Giacobbo, conduttore di “Voyager”
Questa sarà una
presentazione su quel che
dovete sapere per affrontare
HTML5, poi starà a voi andare
a metterci le mani...
5
Vorrei 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.0
September 22, 1995 [2]

HTML 3.2 Specification - W3C Recommendation
14 January 1997 [3]

HTML 4.01 Specification - W3C Recommendation
24 December 1999 [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.”
Html5
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...   [6]


(Un vero mattone!)
(OPINIONI)
“It’s a mess.”   [7]




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




        Andy Clarke, Stuff and Nonsense
“So vaguely defined.”                       [9]



“The continuation of Web2.0
by other means.”                 [9]




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




      Peter-Paul Koch (a.k.a. “PPK”), QuirksMode
“Proposing a timeline 13
years out in this industry,
c’mon… it’s ridiculous!”   [11]




              Jeff Croft
Meglio lasciare perdere?
HTML5
È INTORNO A NOI...
Html5
Html5
Html5
Html5
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:       [12]

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
Hand coding?


NO!
Use a framework/library...
        SproutCore     [13]


        Modernizr    [14]


        HTML5 shiv      [15]


        ExplorerCanvas         [16]




(e sicuramente molte altre a breve...)
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
Geolocation

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

              FF 3.5
                       FF 3/2

                              Safari
IE 6                          Chrome
                              Opera



       IE 7            IE 8
WHAT’S NEW?
Novità nel linguaggio:   [21]


• 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
Introduzione di nuove API per semplificare lo sviluppo
di applicazioni web: [21]
• 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
E molto altro ancora:   [21]


• drag&drop
• postMessage
• browser history
• editing nativo
• registerProtocolHandler
• querySelectorAll
TAGS
HTML 2.0   <p>
  (1995)



HTML 3.2   <p>
  (1997)



HTML 4.1   <p>
  (1999)



HTML5      <p>
  (2008)
XHTML
<!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" />




HTML5
<!doctype html>
<html>
<head>
<meta charset="utf-8">
STRUTTURA
XHTML
<div>




HTML5
<section>
<nav>
<article>
<header>
<footer>
<aside>
<hgroup>
AUDIO/VIDEO
OBJECT/EMBED
<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>
AUDIO
<audio>
 <source src="file.ogg"></source>
 <source src="file.mp3"></source>
</audio>




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

<video controls autobuffer autoplay poster="img.jpg">
CANVAS (API)
CANVAS
<canvas width="xx" height="yy">




CANVAS 2D (API)
•paths (lines   & strokes)
•fills
•gradients
•shadows
•text
•bitmaps
•manipulation
•animation
FORMS 2.0
INPUT TYPES                 ATTRIBUTES
<input   type="search">     placeholder
<input   type="tel">        required
<input   type="email">      autofocus
<input   type="url">        autocomplete
<input   type="number">     min
<input   type="datetime">   max
<input   type="date">       step
<input   type="month">      pattern
<input   type="week">       ...
<input   type="time">
<input   type="range">
<input   type="color">
Html5
API
GEO-LOCATION
BROWSER NATIVE SUPPORT
function can_be_geolocated() {
  return !!navigator.geolocation;
}

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
BROWSER NATIVE SUPPORT
var w = new Worker('script.js');



script.js
onmessage = function(event){ };

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

function done(){
  postMessage(...);
}
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.
METODI          CACHE STATUS
update()        UNCACHED
swapCache()     IDLE
                CHECKING
                DOWNLOADING
                UPDATEREADY

EVENTI
                OBSOLETE


onchecking

                BROWSER STATE
onerror
onnoupdate
ondownloading
onprogress      navigator.onLine
onupdateready
oncached
onobsolete
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
METODI
getItem(key)
setItem(key,value)
removeItem(key)
key(n)
clear()



EVENTI
storage



PROPRIETÁ
length
CONCLUSIONI
Ci dirigiamo (a lenti passi)
verso un futuro radioso...

Nel frattempo, aspettiamo e
vediamo che succede, tanto
con i vecchi browser ancora    [1]

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!”
Grazie per l’attenzione.

       Cristiano Rastelli
           www.didoo.net
REFERENZE
Links
[1]   http://blogs.techrepublic.com.com/programming-and-development/?p=718
[2]   http://www.w3.org/MarkUp/html-spec/html-spec_toc.html
[3]   http://www.w3.org/TR/REC-html32
[4]   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)
Links
[20] http://www.w3counter.com/globalstats.php
[21] http://robertnyman.com/2009/10/14/an-introduction-to-html5/
[22] 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/

Más contenido relacionado

La actualidad más candente

Applicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore RomeoApplicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore Romeomarcocasario
 
Introduzione a WebGL
Introduzione a WebGLIntroduzione a WebGL
Introduzione a WebGLnigerpunk
 
Sencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codiceSencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codiceGiuseppe Toto
 
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAGestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAWhymca
 

La actualidad más candente (7)

Applicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore RomeoApplicazioni HTML5 Superveloci - Salvatore Romeo
Applicazioni HTML5 Superveloci - Salvatore Romeo
 
Introduzione a WebGL
Introduzione a WebGLIntroduzione a WebGL
Introduzione a WebGL
 
Sencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codiceSencha touch: panoramica e orientamento sul codice
Sencha touch: panoramica e orientamento sul codice
 
VS Package @ CD2008
VS Package @ CD2008VS Package @ CD2008
VS Package @ CD2008
 
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCAGestire i pdf con IOS - Maurizio Moriconi - WhyMCA
Gestire i pdf con IOS - Maurizio Moriconi - WhyMCA
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Link. javascript ajax
  Link. javascript ajax  Link. javascript ajax
Link. javascript ajax
 

Destacado

Le Penalizzazioni Di Google
Le Penalizzazioni Di GoogleLe Penalizzazioni Di Google
Le Penalizzazioni Di GoogleFrancesco Tinti
 
Breve Storia Sns - Francesco D'Orazio
Breve Storia Sns - Francesco D'OrazioBreve Storia Sns - Francesco D'Orazio
Breve Storia Sns - Francesco D'OrazioStefano Mizzella
 
Local Search e Google Maps
Local Search e Google MapsLocal Search e Google Maps
Local Search e Google MapsE. Luca Bove
 
La Semantica e il Web dei Dati
La Semantica e il Web dei DatiLa Semantica e il Web dei Dati
La Semantica e il Web dei DatiIrene Celino
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Giovanni Buffa
 
Indicizzazione semantica
Indicizzazione semanticaIndicizzazione semantica
Indicizzazione semanticaAgnese Galeffi
 
C'è semantica in questo web
C'è semantica in questo webC'è semantica in questo web
C'è semantica in questo webNet7
 
Introduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione ItalianaIntroduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione ItalianaGiovanni Buffa
 
La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgSkillsAndMore
 
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013Mattia Compagnucci
 
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioHTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioCodemotion
 
Maker come mio nonno Twintip fablab
Maker come mio nonno Twintip fablabMaker come mio nonno Twintip fablab
Maker come mio nonno Twintip fablabInSide Training
 

Destacado (13)

Le Penalizzazioni Di Google
Le Penalizzazioni Di GoogleLe Penalizzazioni Di Google
Le Penalizzazioni Di Google
 
Breve Storia Sns - Francesco D'Orazio
Breve Storia Sns - Francesco D'OrazioBreve Storia Sns - Francesco D'Orazio
Breve Storia Sns - Francesco D'Orazio
 
Local Search e Google Maps
Local Search e Google MapsLocal Search e Google Maps
Local Search e Google Maps
 
La Semantica e il Web dei Dati
La Semantica e il Web dei DatiLa Semantica e il Web dei Dati
La Semantica e il Web dei Dati
 
Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5Laboratorio di Web Design Base - 2014/15 - HTML/5
Laboratorio di Web Design Base - 2014/15 - HTML/5
 
Indicizzazione semantica
Indicizzazione semanticaIndicizzazione semantica
Indicizzazione semantica
 
C'è semantica in questo web
C'è semantica in questo webC'è semantica in questo web
C'è semantica in questo web
 
Introduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione ItalianaIntroduzione a Drupal - Versione Italiana
Introduzione a Drupal - Versione Italiana
 
La Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.orgLa Semantica del Web con HTML5 e Schema.org
La Semantica del Web con HTML5 e Schema.org
 
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013
"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013
 
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioHTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
 
Corso di HTML5 e CSS
Corso di HTML5 e CSSCorso di HTML5 e CSS
Corso di HTML5 e CSS
 
Maker come mio nonno Twintip fablab
Maker come mio nonno Twintip fablabMaker come mio nonno Twintip fablab
Maker come mio nonno Twintip fablab
 

Similar a Html5

Introduzione alla localizzazione web
Introduzione alla localizzazione webIntroduzione alla localizzazione web
Introduzione alla localizzazione webQabiria
 
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformAngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformGabriele Gaggi
 
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni webAngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni webLuca Milan
 
Antica presentazione AJAX
Antica presentazione AJAXAntica presentazione AJAX
Antica presentazione AJAXTommaso Torti
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerMatteo Magni
 
Win05 accesso ai dati in win 8
Win05   accesso ai dati in win 8Win05   accesso ai dati in win 8
Win05 accesso ai dati in win 8DotNetCampus
 
Webkit presentazione ufficiale
Webkit presentazione ufficialeWebkit presentazione ufficiale
Webkit presentazione ufficialeintoinside
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailDotNetMarche
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailStefano Ottaviani
 
Silverlight in Action
Silverlight in ActionSilverlight in Action
Silverlight in ActionDotNetMarche
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLSinergia Totale
 
Progettato per specialisti del web
Progettato per specialisti del webProgettato per specialisti del web
Progettato per specialisti del webEugenio Uccheddu
 
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente Andrea Dottor
 
Creare un Information Radiator con Delphi
Creare un Information Radiator con DelphiCreare un Information Radiator con Delphi
Creare un Information Radiator con DelphiMarco Breveglieri
 

Similar a Html5 (20)

Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
HTML 5 e browser legacy
HTML 5 e browser legacyHTML 5 e browser legacy
HTML 5 e browser legacy
 
Introduzione alla localizzazione web
Introduzione alla localizzazione webIntroduzione alla localizzazione web
Introduzione alla localizzazione web
 
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platformAngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
AngularJs, Bootstrap e Cordova: il connubio per app mobile cross-platform
 
AngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni webAngularJS – Reinventare le applicazioni web
AngularJS – Reinventare le applicazioni web
 
Antica presentazione AJAX
Antica presentazione AJAXAntica presentazione AJAX
Antica presentazione AJAX
 
Mobile UI Design
Mobile UI DesignMobile UI Design
Mobile UI Design
 
Javascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesignerJavascript - 1 | WebMaster & WebDesigner
Javascript - 1 | WebMaster & WebDesigner
 
Flash vs jQuery
Flash vs jQueryFlash vs jQuery
Flash vs jQuery
 
Win05 accesso ai dati in win 8
Win05   accesso ai dati in win 8Win05   accesso ai dati in win 8
Win05 accesso ai dati in win 8
 
Webkit presentazione ufficiale
Webkit presentazione ufficialeWebkit presentazione ufficiale
Webkit presentazione ufficiale
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
 
Ddive Xpage852
Ddive Xpage852Ddive Xpage852
Ddive Xpage852
 
Sviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle MonorailSviluppo Web Agile con Castle Monorail
Sviluppo Web Agile con Castle Monorail
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
 
Silverlight in Action
Silverlight in ActionSilverlight in Action
Silverlight in Action
 
Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
Progettato per specialisti del web
Progettato per specialisti del webProgettato per specialisti del web
Progettato per specialisti del web
 
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente
Back to the Future: Migrare da WebForm ad ASP.NET Core gradualmente
 
Creare un Information Radiator con Delphi
Creare un Information Radiator con DelphiCreare un Information Radiator con Delphi
Creare un Information Radiator con Delphi
 

Más de Cristiano Rastelli

Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.Cristiano Rastelli
 
Interaction Design Above the Level of a Single Man
Interaction Design Above the Level of a Single ManInteraction Design Above the Level of a Single Man
Interaction Design Above the Level of a Single ManCristiano Rastelli
 
Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.Cristiano Rastelli
 
What future we want for our Software Industry?
What future we want for our Software Industry?What future we want for our Software Industry?
What future we want for our Software Industry?Cristiano Rastelli
 
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102 Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102 Cristiano Rastelli
 
Perché a fare i preventivi facciamo così schifo?
Perché a fare i preventivi facciamo così schifo?Perché a fare i preventivi facciamo così schifo?
Perché a fare i preventivi facciamo così schifo?Cristiano Rastelli
 
Paper - "Esperienza utente e fruizione dei contenuti nei quotidiani online i...
Paper - "Esperienza utente e fruizione dei contenuti nei  quotidiani online i...Paper - "Esperienza utente e fruizione dei contenuti nei  quotidiani online i...
Paper - "Esperienza utente e fruizione dei contenuti nei quotidiani online i...Cristiano Rastelli
 

Más de Cristiano Rastelli (20)

Let There Be Peace On CSS
Let There Be Peace On CSSLet There Be Peace On CSS
Let There Be Peace On CSS
 
Style Guides, Pattern Libraries, Design Systems and other amenities.
 Style Guides, Pattern Libraries, Design Systems and other amenities. Style Guides, Pattern Libraries, Design Systems and other amenities.
Style Guides, Pattern Libraries, Design Systems and other amenities.
 
Interaction Design Above the Level of a Single Man
Interaction Design Above the Level of a Single ManInteraction Design Above the Level of a Single Man
Interaction Design Above the Level of a Single Man
 
The data we should not miss
 The data we should not miss The data we should not miss
The data we should not miss
 
Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.
 
What future we want for our Software Industry?
What future we want for our Software Industry?What future we want for our Software Industry?
What future we want for our Software Industry?
 
Slides are easy
Slides are easySlides are easy
Slides are easy
 
Mobile last
Mobile lastMobile last
Mobile last
 
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102 Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102
Perché a fare i preventivi facciamo così schifo? @BetterSoftware 2102
 
Exploring ideas
Exploring ideasExploring ideas
Exploring ideas
 
Perché a fare i preventivi facciamo così schifo?
Perché a fare i preventivi facciamo così schifo?Perché a fare i preventivi facciamo così schifo?
Perché a fare i preventivi facciamo così schifo?
 
HCI to UX to HCI - Parte B
HCI to UX to HCI - Parte BHCI to UX to HCI - Parte B
HCI to UX to HCI - Parte B
 
HCI to UX to HCI - Parte A
HCI to UX to HCI - Parte AHCI to UX to HCI - Parte A
HCI to UX to HCI - Parte A
 
HTML5 for Mobile
HTML5 for MobileHTML5 for Mobile
HTML5 for Mobile
 
The big bang theory
The big bang theoryThe big bang theory
The big bang theory
 
Html5 - Un anno dopo
Html5 - Un anno dopoHtml5 - Un anno dopo
Html5 - Un anno dopo
 
Senior 2.0 (reprise)
Senior 2.0 (reprise)Senior 2.0 (reprise)
Senior 2.0 (reprise)
 
La qualità non paga
La qualità non pagaLa qualità non paga
La qualità non paga
 
Il valore percepito
Il valore percepitoIl valore percepito
Il valore percepito
 
Paper - "Esperienza utente e fruizione dei contenuti nei quotidiani online i...
Paper - "Esperienza utente e fruizione dei contenuti nei  quotidiani online i...Paper - "Esperienza utente e fruizione dei contenuti nei  quotidiani online i...
Paper - "Esperienza utente e fruizione dei contenuti nei quotidiani online i...
 

Html5

  • 1. HTML5 Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che dovremmo sapere (prima che sia troppo tardi!)
  • 3. “HTML5 will reach the “Proposed Recommendation” stage sometime in 2022.” [1] Ian Hickson, editor of the HTML5 specification.
  • 4. “La fascinazione di grandi misteri, la vertigine di domande inquietanti. Una originale, strabiliante, ipotesi su quello che potrebbe accadere all'alba [1] del 21 dicembre 2012.” Roberto Giacobbo, conduttore di “Voyager”
  • 5. Questa sarà una presentazione su quel che dovete sapere per affrontare HTML5, poi starà a voi andare a metterci le mani...
  • 6. 5 Vorrei prima però mettervi in guardia da un pericolo che si aggira fra gli “addetti ai lavori”.
  • 10. HTML5 è la nuova buzzword del momento. Quella che fino a poco tempo fa era “web 2.0”
  • 11. HTML è un linguaggio di rappresentazione semantica di un documento iper-testuale.
  • 12. HTML sta diventando sempre più la base di costruzione di applicazioni “browser-based”.
  • 13. HTML 4.01 HTML5 web-pages web-applications design user-interface
  • 15. Hypertext Markup Language - 2.0 September 22, 1995 [2] HTML 3.2 Specification - W3C Recommendation 14 January 1997 [3] HTML 4.01 Specification - W3C Recommendation 24 December 1999 [4] HTML 5 - A vocabulary and associated APIs for HTML and XHTML - W3C Working Draft 25 August 2009 [5]
  • 16. “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.”
  • 18. Il documento di specifiche in formato A4 consta di ben 690 pagine... [6]
  • 19. Il documento di specifiche in formato A4 consta di ben 690 pagine... [6] (Un vero mattone!)
  • 21. “It’s a mess.” [7] Kyle Weems, CSSquirrel
  • 22. “HTML5 again mired in corporate politics, egotism, squabbles and petty disagreements.” [8] Andy Clarke, Stuff and Nonsense
  • 23. “So vaguely defined.” [9] “The continuation of Web2.0 by other means.” [9] “The HTML5 drag and drop module is not just a disaster, it’s a fucking disaster.” [10] Peter-Paul Koch (a.k.a. “PPK”), QuirksMode
  • 24. “Proposing a timeline 13 years out in this industry, c’mon… it’s ridiculous!” [11] Jeff Croft
  • 26. HTML5
  • 27. È INTORNO A NOI...
  • 32. Sta a noi decidere quali parti dello spezzatino cominciare a usare fin da ora...
  • 35. Domanda: “Quali browser supportano una certa funzionalità di HTML5?”
  • 36. Best practice: DOM detection Quattro tecniche base: [12] 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
  • 38. Use a framework/library... SproutCore [13] Modernizr [14] HTML5 shiv [15] ExplorerCanvas [16] (e sicuramente molte altre a breve...)
  • 39. La sintassi per HTML5 è pensata in modo che sia backward-compatible con i parser dei browser più vecchi.
  • 40. Canvas Audio/Video Storage Offline Web Workers Form 2.0 Geolocation Per maggiori dettagli consultare le risorse online [17] [18] [19]
  • 41. [20] FF 3.5 FF 3/2 Safari IE 6 Chrome Opera IE 7 IE 8
  • 43. Novità nel linguaggio: [21] • 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
  • 44. Introduzione di nuove API per semplificare lo sviluppo di applicazioni web: [21] • 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
  • 45. E molto altro ancora: [21] • drag&drop • postMessage • browser history • editing nativo • registerProtocolHandler • querySelectorAll
  • 46. TAGS
  • 47. HTML 2.0 <p> (1995) HTML 3.2 <p> (1997) HTML 4.1 <p> (1999) HTML5 <p> (2008)
  • 48. XHTML <!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" /> HTML5 <!doctype html> <html> <head> <meta charset="utf-8">
  • 52. OBJECT/EMBED <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>
  • 53. AUDIO <audio> <source src="file.ogg"></source> <source src="file.mp3"></source> </audio> VIDEO <video width="xx" height="yy"> <source src="file.ogg" type="video/ogg"></source> <source src="file.mp4" type="video/mp4"></source> </video> <video controls autobuffer autoplay poster="img.jpg">
  • 55. CANVAS <canvas width="xx" height="yy"> CANVAS 2D (API) •paths (lines & strokes) •fills •gradients •shadows •text •bitmaps •manipulation •animation
  • 57. INPUT TYPES ATTRIBUTES <input type="search"> placeholder <input type="tel"> required <input type="email"> autofocus <input type="url"> autocomplete <input type="number"> min <input type="datetime"> max <input type="date"> step <input type="month"> pattern <input type="week"> ... <input type="time"> <input type="range"> <input type="color">
  • 59. API
  • 61. BROWSER NATIVE SUPPORT function can_be_geolocated() { return !!navigator.geolocation; } function getCurrentPosition(onSuccess,onError)
  • 63. Alcune possibili applicazioni di un “worker”: • computazione “pesante” • interazione con storage/database locali • comunicazione in background • molteplici operazioni in parallelo
  • 64. BROWSER NATIVE SUPPORT var w = new Worker('script.js'); script.js onmessage = function(event){ }; function run() { postMessage(...); } function done(){ postMessage(...); }
  • 66. 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.
  • 67. METODI CACHE STATUS update() UNCACHED swapCache() IDLE CHECKING DOWNLOADING UPDATEREADY EVENTI OBSOLETE onchecking BROWSER STATE onerror onnoupdate ondownloading onprogress navigator.onLine onupdateready oncached onobsolete
  • 69. 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)
  • 70. 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
  • 73. Ci dirigiamo (a lenti passi) verso un futuro radioso... Nel frattempo, aspettiamo e vediamo che succede, tanto con i vecchi browser ancora [1] in giro abbiamo la scusa che non è supportato...
  • 74. Sicuramente ancora un po’ “acerbo” Può essere usato in sistemi chiusi Richiede la graceful-degradation Alcune feature molto promettenti
  • 75. “Se il giorno è dàdà la notte sarà dàdà... dapaura!”
  • 76. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net
  • 78. Links [1] http://blogs.techrepublic.com.com/programming-and-development/?p=718 [2] http://www.w3.org/MarkUp/html-spec/html-spec_toc.html [3] http://www.w3.org/TR/REC-html32 [4] 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)
  • 79. Links [20] http://www.w3counter.com/globalstats.php [21] http://robertnyman.com/2009/10/14/an-introduction-to-html5/ [22] 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/