Html5

4,351 views

Published on

Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che dovremmo sapere su HTML5 (prima che sia troppo tardi!)

Published in: Technology
1 Comment
13 Likes
Statistics
Notes
  • FILE DIMOSTRATIVI:
    http://www.didoo.net/permalinks/ugialtnetconf_html5_code.zip

    NOTE ASSOCIATE ALLE SLIDE:

    // [SLIDE 1]
    La scaletta prevede una prima parte più “accademica”, teorica e una seconda parte invece più “pragmatica”, concreta.

    // [SLIDE 3]
    W3C Candidate Recommendation » 2012
    W3C Recommendation » 2022

    // [SLIDE 10]
    HTML5 è la “parola magica” che serve ai “commerciali” e agli uffici marketing per vendere, per intortare gli ignari clienti. Ormai, se non hai “HTML5” sei un barbone!
    (OK, non è ancora così, ma preparatevi, lo sarà presto...)
    Quindi usatela con cautela: potreste pentirvene!

    // [SLIDE 11]
    HTML ha a che fare con il significato delle cose, con la loro rappresentazione.
    Non è un linguaggio di programmazione (almeno, non in senso classico).

    // [SLIDE 12]
    Non uso la parola “web-based” perché ormai la parte del leone stanno cominciando a farla i browser, come “piattaforma” di sviluppo applicativo. Il web come lo intendiamo classicamente è sempre più un medium di trasmissione delle informazioni e dei dati.

    // [SLIDE 13]
    Buona parte delle specifiche di HTML5, che vedremo fra poco, sono focalizzate non più soltanto sulle “pagine web” ma soprattutto sulle “applicazioni web”.
    Pensiamoci un attimo: quanti siti web di una certa rilevanza (basti pensare a Facebook) si stanno trasformando sempre più in “applicazioni web”?
    E quindi, quanto il concetto di web-design si sta spostando verso l’interaction-design?

    // [SLIDE 14]
    Due parole veloci sulle specifiche...

    Attenzione: non sono uno standard (lo sono più o meno de-facto, ma questo è un altro discorso) ma sono una raccomandazione del “consorzio”, una raccomandazione all’uso e adozione delle specifiche.

    // [SLIDE 15]
    Far notare il “delta” fra il 4 e il 5, segno della “bontà” della versione 4. E’ durato oltre dieci anni e ha svolto egregiamente il suo dovere...
    Vi risparmio la saga W3C (consorzio ufficiale) verso WHATWG (consorzio creato da Apple, Mozilla e Opera dopo che il W3C stava prendendo una brutta piega con XHTML). Sappiate solo che a un certo punto della storia, il WC3 ha mollato l’XHTML e si è deciso a seguire la strada aperta dal WHATWG.
    Le specifiche attuali sono il frutto di questo “matrimonio” forzato.

    // [SLIDE 16]
    L’organizzazione delle specifiche - e dei documenti in cui sono successivamente state suddivise - è un po’ caotica, ai limiti della disorganizzazione.
    A questo si aggiunga poi che le specifiche sono abbastanza incomprensibili per “esseri umani” normali: sono scritte soprattutto ad uso e consumo dei browser-developer.

    // [SLIDE 25]
    A questo punto, spero di non avervi troppo spaventati o scoraggiati o delusi...

    // [SLIDE 27]
    In realtà HTML5 è già qui. E’ già attorno a noi...
    Vediamo alcuni esempi reali.

    // [SLIDE 28]
    Google già utilizza HTML5 nelle sue pagine, e soprattutto nelle sue web-applications...

    // [SLIDE 29]
    I browser più evoluti supportano già molte funzionalità dell’HTML5...

    // [SLIDE 30]
    I colossi stanno cominciando a testare alcune funzionalità...

    // [SLIDE 31]
    Gli i dispositivi hardware sono sempre più evoluti...

    // [SLIDE 32]
    Il fatto che sia uno “spezzatino” da un lato fa sì che sia supportato man mano vengono rilasciate nuove versioni dei browser; dall’altro fa sì che sia implementato nei siti web più evoluti o che richiedono funzionalità avanzate.

    // [SLIDE 34]
    A questo punto si pone la domanda: “come posso iniziare a usare HTML5 se i browser più vecchi non lo supportano?”. In realtà la domanda è malposta.

    // [SLIDE 35]
    Come abbiam visto e come vedremo fra poco, HTML5 in realtà non è monolitico: è costituito da una serie di funzionalità molto diverse e indipendenti fra loro.
    Questo vuol dire che non ha senso testare il “supporto a HTML5” ma dovrà essere testato il supporto a una ben determinata funzionalità che vogliamo utilizzare.

    // [SLIDE 39]
    HTML5 è pensato in modo tale che i vecchi browser possano tranquillamente parsare il codice HTML ignorando i nuovi costrutti: “Documents must not use deprecated features. User agents should support deprecated features.”

    // [SLIDE 47]
    Non spaventatevi, dal punto di vista degli aspetti semantici, poco o nulla è cambiato.
    Sono invece stati introdotti nuovi elementi di “struttura”.
    (A proposito non è un errore: HTML5 si scrive tutto attaccato).

    // [SLIDE 48]
    Nuovo doctype, più semplice e senza “bloated code” relativo a versioni, dtd, language, encoding, ecc.

    // [SLIDE 50]
    Cosa accade per i browser che non riconoscono i tag? Il problema maggiore è per IE, come sempre: se trova un tag sconosciuto, lo renderizza ma non gli applica gli stili CSS e lo inserisce nel DOM ma vuoto, senza child. La soluzione è HTML5 shiv, codice che generando (“createElement”) sul load gli elementi sconosciuti, poi li processa correttamente.

    // [SLIDE 52]
    Oggi questo è il modo “classico” per fare l’embed di un video in una pagina web.
    Al di là della complessità del codice, di fatto è diventato uno “standard”...

    // [SLIDE 53]
    Alcune problematiche ancora irrisolte:
    - la giungla dei formati dei file e dei relativi codec audio/video, in cui non mi addentro
    - al momento, non c’è la modalità “fullscreen”
    - lo skinning del player e dei relativi controlli, se non si vuole usare quello nativo, va fatto comunque con controlli esterni (vedi Vimeo)

    // [SLIDE 54]
    L’oggetto canvas di fatto è un oggetto vuoto, che viene “riempito” via API.
    I metodi di elaborazione degli elementi grafici (sia vettoriali che bitmap) sono le solite funzioni di una libreria grafica.

    // [SLIDE 55]
    Il peso e dei form in HTML5 è notevole, in particolare per quel che riguarda gli elementi di input e interazione (da cui si nota l’importanza data alle applicazioni web!)

    // [SLIDE 56]
    L’uso di input-type specifici e di attributi aggiuntivi permette di ridurre notevolmente l’uso di validazione client-side (perlomeno quella più banale e semplice).
    Il browser renderizza, ove implementati, i propri controlli (integrati e nativi) e procede alla validazione dei valori inseriti dall’utente.

    // [SLIDE 61]
    Questo è il test della funzionalità standard-compliant. Se si vuole testare anche per Google Gears, occorre modificare il test.
    Al momento è supportata solo da iPhone e Android per i dispositivi mobili, e da Firefox 3.5 per quanto riguarda i browser tradizionali. Esiste un fallback usando Google Gears.

    // [SLIDE 69]
    HTML5 Storage è supportato da IE8, Firefox 3.6 e Safari 4.
    Safari inoltre supporta “windo.openDatabase”, che è un vero e proprio database SQL.

    // [SLIDE 71]
    Quando un valore del localStorage viene modificato (non quello di sessione, che è limitato alla window) l’evento “storage” viene sollevato (associandolo all’oggetto “body”) in tutte le pagine aperte su quel sito/dominio.

    // [SLIDE 75]
    In conclusione, vi lascio con le parole di due poeti...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,351
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
172
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Html5

  1. 1. HTML5 Ciò che sappiamo, ciò che ignoriamo, ma soprattutto ciò che dovremmo sapere (prima che sia troppo tardi!)
  2. 2. PREMESSE
  3. 3. “HTML5 will reach the “Proposed Recommendation” stage sometime in 2022.” [1] Ian Hickson, editor of the HTML5 specification.
  4. 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. 5. Questa sarà una presentazione su quel che dovete sapere per affrontare HTML5, poi starà a voi andare a metterci le mani...
  6. 6. 5 Vorrei prima però mettervi in guardia da un pericolo che si aggira fra gli “addetti ai lavori”.
  7. 7. It’s new...
  8. 8. ...it’s cool...
  9. 9. ...it’s HTML5.
  10. 10. HTML5 è la nuova buzzword del momento. Quella che fino a poco tempo fa era “web 2.0”
  11. 11. HTML è un linguaggio di rappresentazione semantica di un documento iper-testuale.
  12. 12. HTML sta diventando sempre più la base di costruzione di applicazioni “browser-based”.
  13. 13. HTML 4.01 HTML5 web-pages web-applications design user-interface
  14. 14. SPECIFICHE
  15. 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. 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.”
  17. 17. Il documento di specifiche in formato A4 consta di ben 690 pagine... [6]
  18. 18. Il documento di specifiche in formato A4 consta di ben 690 pagine... [6] (Un vero mattone!)
  19. 19. (OPINIONI)
  20. 20. “It’s a mess.” [7] Kyle Weems, CSSquirrel
  21. 21. “HTML5 again mired in corporate politics, egotism, squabbles and petty disagreements.” [8] Andy Clarke, Stuff and Nonsense
  22. 22. “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
  23. 23. “Proposing a timeline 13 years out in this industry, c’mon… it’s ridiculous!” [11] Jeff Croft
  24. 24. Meglio lasciare perdere?
  25. 25. HTML5
  26. 26. È INTORNO A NOI...
  27. 27. Sta a noi decidere quali parti dello spezzatino cominciare a usare fin da ora...
  28. 28. BROWSER
  29. 29. Domanda: “Quali browser supportano HTML5?”
  30. 30. Domanda: “Quali browser supportano una certa funzionalità di HTML5?”
  31. 31. 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
  32. 32. Hand coding? NO!
  33. 33. Use a framework/library... SproutCore [13] Modernizr [14] HTML5 shiv [15] ExplorerCanvas [16] (e sicuramente molte altre a breve...)
  34. 34. La sintassi per HTML5 è pensata in modo che sia backward-compatible con i parser dei browser più vecchi.
  35. 35. Canvas Audio/Video Storage Offline Web Workers Form 2.0 Geolocation Per maggiori dettagli consultare le risorse online [17] [18] [19]
  36. 36. [20] FF 3.5 FF 3/2 Safari IE 6 Chrome Opera IE 7 IE 8
  37. 37. WHAT’S NEW?
  38. 38. 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
  39. 39. 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
  40. 40. E molto altro ancora: [21] • drag&drop • postMessage • browser history • editing nativo • registerProtocolHandler • querySelectorAll
  41. 41. TAGS
  42. 42. HTML 2.0 <p> (1995) HTML 3.2 <p> (1997) HTML 4.1 <p> (1999) HTML5 <p> (2008)
  43. 43. 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">
  44. 44. STRUTTURA
  45. 45. XHTML <div> HTML5 <section> <nav> <article> <header> <footer> <aside> <hgroup>
  46. 46. AUDIO/VIDEO
  47. 47. 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>
  48. 48. 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">
  49. 49. CANVAS (API)
  50. 50. CANVAS <canvas width="xx" height="yy"> CANVAS 2D (API) •paths (lines & strokes) •fills •gradients •shadows •text •bitmaps •manipulation •animation
  51. 51. FORMS 2.0
  52. 52. 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">
  53. 53. API
  54. 54. GEO-LOCATION
  55. 55. BROWSER NATIVE SUPPORT function can_be_geolocated() { return !!navigator.geolocation; } function getCurrentPosition(onSuccess,onError)
  56. 56. WEB-WORKERS
  57. 57. Alcune possibili applicazioni di un “worker”: • computazione “pesante” • interazione con storage/database locali • comunicazione in background • molteplici operazioni in parallelo
  58. 58. BROWSER NATIVE SUPPORT var w = new Worker('script.js'); script.js onmessage = function(event){ }; function run() { postMessage(...); } function done(){ postMessage(...); }
  59. 59. OFFLINE
  60. 60. 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.
  61. 61. METODI CACHE STATUS update() UNCACHED swapCache() IDLE CHECKING DOWNLOADING UPDATEREADY EVENTI OBSOLETE onchecking BROWSER STATE onerror onnoupdate ondownloading onprogress navigator.onLine onupdateready oncached onobsolete
  62. 62. STORAGE
  63. 63. 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)
  64. 64. 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
  65. 65. METODI getItem(key) setItem(key,value) removeItem(key) key(n) clear() EVENTI storage PROPRIETÁ length
  66. 66. CONCLUSIONI
  67. 67. 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...
  68. 68. Sicuramente ancora un po’ “acerbo” Può essere usato in sistemi chiusi Richiede la graceful-degradation Alcune feature molto promettenti
  69. 69. “Se il giorno è dàdà la notte sarà dàdà... dapaura!”
  70. 70. Grazie per l’attenzione. Cristiano Rastelli www.didoo.net
  71. 71. REFERENZE
  72. 72. 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)
  73. 73. 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/

×