Downloaded 56 times
![HTML5
/* DnD event listeners */
dropContainer.addEventListener("drop", handleDrop, false);
handleDrop = function (evt) {
var dt = evt.dataTransfer,
files = dt.files || false,
count = files.length,
acceptedFileExtensions = /^.*.(ttf|otf|woff)$/i;
for (var i = 0; i< count; i++) {
var file = files[i],
droppedFullFileName = file.name,
droppedFileName,
droppedFileSize;
if(droppedFullFileName.match(acceptedFileExtensions)) {
droppedFileSize = Math.round(file.size/1024) + "kb” ;
processData(file, droppedFileName, droppedFileSize);
} else {
alert("Invalid file extension. Will only accept ttf, otf or woff font files");
}
}
};
processData = function (file, name, size) {
doSomething();
};](https://image.slidesharecdn.com/matti-100305111242-phpapp02/85/Matteo-Bicocchi-Introducing-HTML5-46-320.jpg)
Uploaded byPietro Polsinelli
Matteo Bicocchi - Introducing HTML5
Il documento esplora la storia e l'evoluzione dell'HTML, evidenziando il passaggio da versioni precedenti a HTML5, che introduce nuovi tag semantici e API. Viene discusso il supporto dei browser per HTML5 e la retrocompatibilità, oltre a dettagli sui nuovi elementi e attributi disponibili. Si conclude con un incoraggiamento a sfruttare le nuove caratteristiche e risorse online per apprendere e implementare HTML5.
More Related Content
Similar to Matteo Bicocchi - Introducing HTML5
Matteo Bicocchi - Introducing HTML5
- 1. <!doctypehtml> …e via, versonuove avventure Matteo Bicocchi Open Lab s.r.l. Graphic designer, creative code developer http://pupunzi.open-lab.com
- 2.
- 3. HTML Cosa è? L’Hyper Text markup language è un linguaggiodimarkup con funzionalitàdescrittivedeicontenuti, interpretatodai browser.
- 4.
- 5. WWW Inizio anni ’90 1.000.000 di utenti HTML 1.0
- 6. WWW 1994 nasce il W3C
- 7. WWW Nel ’95 10.000.000 di utenti
- 8. WWW Nel ’99 200.000.000 di utenti HTML 4.01 javascript
- 9. WWW Oggi 1,735,000,000 utenti
- 10. WWW La guerra deibrowser
- 11. WWW 1994 2009 W3C
- 12.
- 13. W3C Il World WideWeb Consortium
- 14. W3C HTTP,W3C URL, HTML, XHTML, XML, SVG, PNG, WAI
- 15. W3C W3C Dal 1999 XHTML 1 CSS 2
- 16. W3C W3C oggi XHTML 2 CSS 3
- 17. W3C WHATWG 2004 W3C 2007 HTML5
- 18. W3C XHTML 2.0 Sintassi troppo restrittiva I produttori di browser non hanno implementato le specifiche
- 19. Ottobre 2006 …The attemptto get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work. … Tim Berners-Lee Reinventing HTML (http://dig.csail.mit.edu/breadcrumbs/node/166)
- 20. W3C HTML5 retro compatibilità Quasi tutti i produttori di browser hanno già implementato parte delle specifiche
- 21.
- 22. HTML5 HTML 4.01 PAGINE WEB DESIGN
- 23. HTML5 HTML 5 APPLICAZIONI WEB USER INTERFACE
- 24. HTML5 Cosa c’è dinuovo? TAG SEMANTICI WEB FORMS 2 APIs
- 25.
- 26.
- 27.
- 28. HTML5 SINTASSI HTML 4.01 HTML5 <! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" <! doctype html> "http://www.w3.org/TR/html4/strict.dt d"> <meta http-equiv="Content-Type" <meta charset=utf-8> content="text/html; charset=utf-8" /> <script type=“text/javascript”> <script> <style type=“text/css”> <style> <p> … </p> <p>…
- 29. HTML5 TAG STRUTTURALI <ARTICLE> Definisce un contenuto che è indipendente dal contesto e che mantiene il suo senso anche al di fuori della pagina; può essere ripetuto sulla pagina. <SECTION> Definisce una sezione, un capitolo, un qualsiasi elemento che ha una sua intestazione. <HEADER> Definisce l’intestazione della pagina o della sezione; può essere ripetuto sulla pagina su più SECTION o ARTICLE. <FOOTER> Può essere ripetuta sulla pagina e definisce la chiusura della pagina o della sezione. <NAV> Definisce un’insieme di link finalizzati alla navigazione dei contenuti; può essere ripetuto sulla pagina.
- 30. HTML5 TAG NON STRUTTURALI <ASIDE> Definisce una nota, una integrazione o qualsiasi parte testuale secondaria rispetto al contenuto. <FIGURE> Definisce l’insieme di un’immagine e della sua didascalia (<LEGEND>). <DIALOG> Definisce un dialogo tra due o più interlocutori (<DT>per il soggetto, <DD>per la sentenza). <ADDRESS> definisce le informazioni sull’autore della pagina o dell’articolo. <TIME>, <METER> Una seroe di Tag che definiscono misure. <OUTPUT> Definisce un’area dedicata all’output di uno script. …
- 31. HTML5 ATTRIBUTI GLOBALI contenteditable, contextmenu, data-yourvalue, draggable, hidden, item, itemprop, spellcheck, Subject ATTRIBUTI EVENTI onstorage, onmousewheel, onmessage, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, …
- 32. HTML5 Ma possiamogiàutilizzarequestinuo vielementi?
- 33. HTML5 <style> header, article, section, … {display:block}
- 34. HTML5 <script> document.createElement("article");
- 35.
- 36. HTML5 INPUT TYPE search, tel, url, email, datetime, date, month, week, time, number, range, color… ATTRIBUTI SPECIFICI placeholder, autofocus, required, pattern (validazionegestita via reg ex)…
- 37.
- 38.
- 39. HTML5 <video width="320" height="240”controls> <source src="myVideo.ogv" type='video/ogg; codecs="theora, vorbis"’>(MOZ, OPERA) <source src="myVideo.mp4" type='video/mp4; codecs="mp4a. h264"'>(WEBKIT) <!-- flash fall back -->(OTHERS) </video> Attributi: autobuffer, autoplay, controls, loop … Metodi: video.play(), video.pause(), video.load(), … Eventi:ontimeupdate; oncanplay; onended; Offset: video.duration, video.currentTime, video.startTime, video.readyState, …
- 40. HTML5 <audio width="320" controls> <sourcesrc="myAudio.ogg” >(MOZ) <source src="myAudio.mp3”>(WEBKIT) <!-- flash fall back -->(OTHERS) </audio> Attributi: autobuffer, autoplay, controls, loop … Metodi: audio.play(), audio.pause(), audio.load(), … Eventi:ontimeupdate; oncanplay; onended, … Offset: audio.duration, audio.currentTime, audio.startTime, audio.readyState, …
- 41. HTML5 <canvas id=”myCanvas" width=”500”height=”500” > <!-- fall back -->(OTHERS) </canvas> //script var canvas = document.createElement('canvas'); canvas.height = 100; canvas.width = 300; var ctx = canvas.getContext("2d”); ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
- 42. HTML5 SESSION STORAGE sessionStorage.setItem('value', this.value); sessionStorage.getItem('value'); sessionStorage.clear(); LOCAL STORAGE localStorage.setItem('value', this.value); localStorage.getItem('value'); localStorage.clear(); DATABASE STORAGE var database = openDatabase("Database Name", "Database Version"); database.executeSql("SELECT * FROM test", function(result1) { // do something with the results database.executeSql("DROP TABLE test", function(result2) { // do some more stuff alert("My second database query finished executing!"); }); });
- 43. HTML5 <!-- clock.html --> <!DOCTYPE HTML> <html manifest="clock.manifest"> <head> <title>Clock</title> <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> </head> <body> <p>The time is: <output id="clock"></output></p> </body> </html> /* clock.css */ output { font: 2em sans-serif; } /* clock.js */ setTimeout(function () { document.getElementById('clock').value = new Date(); }, 1000); -- clock.manifest -- MIME type text/cache-manifest CACHE MANIFEST clock.html clock.css clock.js images/logo.png
- 44. HTML5 <!– topwindow (http://html5demos.com) –> <script> addEvent(document.querySelector('form'), 'submit', function (e) { win.postMessage( document.getElementById("message").value, "http://jsbin.com" ); if (e.preventDefault) e.preventDefault(); // otherwise set the returnValue property of the original event to false (IE) e.returnValue = false; }); </script> <!– frame window --> <script> addEvent(window, "message", function(e){ if ( e.origin !== "http://html5demos.com" ) return; document.getElementById("test").innerHTML = e.origin + " said: " + e.data; }); </script>
- 45. HTML5 // nellapagina var worker = new Worker("worker.js"); //receive message from the worker worker.onmessage = function(event){ console.debug(event.data.name); //"Nicholas" }; //send object to the worker worker.postMessage({ name: "Nicholas" }); // in worker.js //receive message from the page self.onmessage = function(event){ //send message back to the page var name = event.data.name; //comes through fine! this.postMessage(event.data); };
- 46. HTML5 /* DnDevent listeners */ dropContainer.addEventListener("drop", handleDrop, false); handleDrop = function (evt) { var dt = evt.dataTransfer, files = dt.files || false, count = files.length, acceptedFileExtensions = /^.*.(ttf|otf|woff)$/i; for (var i = 0; i< count; i++) { var file = files[i], droppedFullFileName = file.name, droppedFileName, droppedFileSize; if(droppedFullFileName.match(acceptedFileExtensions)) { droppedFileSize = Math.round(file.size/1024) + "kb” ; processData(file, droppedFileName, droppedFileSize); } else { alert("Invalid file extension. Will only accept ttf, otf or woff font files"); } } }; processData = function (file, name, size) { doSomething(); };
- 47. HTML5 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error); } else { error('not supported'); } function success(position){ console.debug(position.coords.latitude, position.coords.longitude) }
- 48.
- 49.
- 50. HTML5 Le specifiche dell’HTML5sono attualmente in fase di definizione; I browser più “seri” (leggi tutti tranne IE) supportano già molte delle nuove features ed esistono librerie javascript per la gestione dei fallbacks. http://remysharp.com/2009/01/07/html5-enabling-script/ http://www.modernizr.com/ Iniziare ad usare il nuovo DOCTYPE non costa nulla così come costa poco iniziare ad adottare i nuovi TAG. Goolgee Youtubeusano già HTML5 per le loro pagine e le loro applicazioni … Questo porterà velocemente alla pubblicazione definitiva degli standard dell’HTML5 ed all’adeguamento a questi anche di quei browser che, fino ad oggi, hanno pensato di poter fare a meno di seguire una linea comune (leggi IE).
- 51. Alcuni riferimenti sulweb: http://www.whatwg.org/ http://diveintohtml5.org/ http://html5doctor.com/ (Bruce Lawson) http://a.deveria.com/caniuse/ (When can I use…) http://html5demos.com/ (Remy Sharp) http://www.alistapart.com/articles/previewofhtml5 Javascript for compability: http://remysharp.com/2009/01/07/html5-enabling-script/ http://www.modernizr.com/ Buon viaggio e… attenti alle buche!
Editor's Notes
- #4 L’Hyper Text markup languageè un linguaggio nato alla fine degli anni ’80 dalla mente di Tim Berners-Lee, un ricercatore inglese presso il CERN di Ginevra, per definire e descrivere i contenuti delle pagine presenti sulla rete del World Wide Web.Non è un linguaggio di programmazione ma un linguaggio dimarkup, cioè con funzionalità descrittive dei contenuti, interpretato dai browser.La sua sintassi viene formalizzata nel 1994 dal W3C e si basa su quella definita dall’SGML (Standard Generalized Markup Language), un linguaggio della IBM per lo scambio di documenti machine-readable con una marcatura descrittiva per la definizione logica dei contenuti.
- #5 Nasce per soddisfare l’esigenza di rendere la rete (internet) aperta a tutti, dando la possibilità di pubblicare facilmente contenuti sul WEB.
- #6 Nel 1990 TimBerners-Lee, un ricercatore inglese del CERN di Ginevra, sviluppa il protocollo HTTP (Hypertext Transfer Protocol), e l’HTML 1.0.A metà degli anni ‘90 le esigenze da soddisfare erano poche, La rete mondiale stava appena nascendo; il suo utilizzo era quasi esclusivo di centri di ricerca e di università e le tecnologie del periodo non permettevano uso di immagini, di audio o di video. Pertanto l’HTML doveva fondamentalmente occuparsi di strutturazione del testo e di creazione dicollegamenti ad altri documenti sulla rete.Nel 1993 esce la prima release di Mosaic, il primo browser con capacità grafiche avanzate ed alcune funzionalità multimediali, realizzato da Marc Andreessen (Oggi Andreessen è uno dei principali investitori di Digg e di Twitter ).Mosaic diventerà pochi anni dopo Netscape Navigator; il primo browser così come lo concepiamo oggi.
- #7 Nel 1994Tim Berners-Lee fondò all’MIT, in collaborazione con il CERN il W3C (World Wide Web Consortium) con il fine di definire gli standard dei protocolli e dei linguaggi usabili nel web per le varie devicein grado di usufruire della rete.L’utilizzo della rete internet si diffonde anche tra la gente comune, aziende, professionisti.
- #8 Da metà degli anni ‘90 assistiamo ad una crescita esponenziale dell’utilizzo della rete da parte di utenza civile a scopo divulgativo e commerciale; basta guardare i dati per rendersi conto del cambiamento in corso: nel 1992gli utenti connessi alla rete sono 1.000.000, nel 1996 sono 10.000.000, nel 1999 sono 200.000.000, e nel 2008 sono 600.000.000 ed oggi 1,735,000,000utenti.Nel 1995la Microsoft decise di intraprendere la scalata al dominio del www facendo nascere, dopo l’acquisto dei codici sorgenti di Mosaic, Internet Explorer, che in poco tempo diventerà il browser più usato (grazie anche al fatto di essere il browser preinstallato sui sistemi operativi Windows e Apple Macintosh).
- #9 L’HTML assume sempre più rilevanza e si evolve velocemente per soddisfare le nuove esigenze. Nasce l’HTML 4.01.Internet Explorer è in assoluto il browser più usato per la navigazione del web.
- #10 Dal 2000, grazie anche all’avvento delle linee veloci ISDN e poi ADSL, l’utenza del WEB cresce in maniera esponenziale.Sono nati nuovi browser innovativi ed IE ha perso la sua egemonia sul web. Questo processo ha dato una forte spinta innovativa al WEB ed ha dato inizio a quella che viene chiamata “La guerra dei browser”.
- #12 La vita non è mai così facile come vorremmo che fosse…Mentre Netscape (che cesserà di esistere nel 2006 per lasciare il campo a Firefox), Opera (realizzato nel 1995) mantengono un sostanziale allineamento con le direttive del W3C, Internet Explorer decide, in buona o cattiva fede, di definire standard proprietari sia per la gestione degli elementi della pagina HTML che per la definizione delle classi nei CSS, escludendo in parte gli altri sistemi operativi e gli altri browser dalla fruizione dei contenuti realizzati per il web.Dagli anni 2000 però le cose cambiano; Mozillaesce con un browser innovativo (che in seguito conosceremo come Firefox), open source, estremamente rapido nel rendering delle pagine ed assolutamente rispettoso delle direttive del consorzio, ed in pochissimo tempo riesce ad ottenere un grande successo, specialmente tra gli sviluppatori, fino a diventare oggi il browser più popolare in Europa, con una quota di utilizzo che si avvicina al 40%. Successivamente, nel 2003 esce Safari (il browser della Apple)e poi Chromenel 2007 (entrambi basati sul motore webkit) che a loro volta conquisteranno una fetta sensibile del mercato (intorno al 10%).Il cambiamento degli equilibri di mercato in sfavore della Microsoft ha portato sicuramente a dei grandi benefici per gli sviluppatori del web; la Microsoft, con l’uscita di IE8 ha confermato la sua intenzione di avvicinarsi agli standard seguiti in maniera pressoché uniforme dagli altri produttori di browser.
- #14 Cosa è il W3C ed a cosa stà lavorando?
- #15 Dal 1994 ad oggi il contributo apportato dal W3C al mondo web è di fondamentale importanza. In questi anni vengono definiti dal W3C oltre 50 standard fondamentali per lo sviluppo del web, tra cui: HTTP, URL, HTML, XHTML, XML, SVG, PNG, WAI.Questi statndar offrono agli sviluppatori indicazioni fondamentali sul comportamento e sull’interpretazione degli elementi strutturali definiti su una pagina web; l’attinenza dei vari browser a queste definizioni permette di sviluppare in maniera trasversale le pagine web.Una pagina realizzata agli esordi del web, nei primi anni ’90 è ancora oggi visibile e correttamente interpretata dai moderni browser e sistemi operativi.Per far si che i browser riescano a sapere quale versione dell’HTML è usata per la realizzazione della pagina, nel 1997 il W3C introduce la dichiarazione del DOCTYPE.
- #16 Dopo il ‘99, nell’ultimo 10ennio, il W3C ha portato avanti lo sviluppo dell’ XHTML (eXtensibleHyperText Markup Language),una variazione dell’HTML basata sull’XML, oggi alla versione 1.1; Inoltre si è concentrato suiCSS (Cascading Style Sheet), oggi alla release2 ed in forte sviluppo sulla versione 3. L’obbiettivo è quello di separare completamente la parte strutturale da quella visuale della pagina.
- #17 Dopo la definizione dell’XHTML 1.0, il gruppo di ricerca del W3C ha iniziato a lavorare su un nuovo progetto nell’ottica di ridefinire radicalmente l’HTML; questo progetto propone la riscrittura dei TAG in una logica semantica appoggiandosi su una sintassi XML molto formale.
- #18 Attualmente, però, lo sviluppo dell’XHTML 2.0 come sostituto dell’HTML 4.01 sta sfumando a favore dell’HTML5, uno standard proposto nel 2004 dal gruppo di lavoro denominato WHATWG (Web HypertextApplicationTechnologyWorking Group),fondato da Apple, Google, MozillaFoundationed Opera Software e che il W3C ha preso in carico dal 2007.
- #19 Infatti, nonostante i buoni propositi del W3C nel cercare di definire uno standard migliore, l’XHTML in generale e il 2.0 in particolare, pur avendo migliorato l’aspetto semantico della sua sintassi, presenta delle restrizioni che hanno scoraggiato sia il pubblico di sviluppatori, sia i produttori dei browser nell’adottarlo.l’XHTML 2.0 prevede tra le sue specifiche quella di eliminare la capacità dei browser di auto correggere il codice delle pagine restituendo, nel caso, una descrizione dell’errore al posto del suo contenuto … Fino ad oggi, la capacità di auto correggere il codice ha fatto sì che il 99% delle pagine presenti sul web (che presentano almeno un errore sintattico nella loro costruzione) sia bene interpretata e visibile al pubblico; l’impatto di una simile scelta sarebbe catastrofico!Altro valido motivo è che le specifiche dell’XHTML 2.0 sono state ad oggi completamente trascurate da tutti i browser; Al contrario molti browser hanno iniziato ad implementare nelle loro ultime versioni le specifiche dell’HTML5; persino Microsoft ha dichiarato che prenderà parte attiva al suo sviluppo (e non so se questo sia un bene od un male ).L’eventuale adeguamento di un documento HTML 4.01 alle specifiche XHTML 2.0 prevede la modifica del codice della pagina… e questo non è cosa buona!!
- #20 Ecco cosa scrive TimBerners-leein un articolo intitolato Reinventing HTML, pubblcato nel 2006 sul suo blog personale…
- #21 Quali sono invece i vantaggi della proposta del WHATWG?LA RETROCOMPATIBILITÀ - Il markup mantiene la retro compatibilità con gli attuali standard pur trasformando l’HTML in un linguaggio specifico per applicazioni web. Gli sviluppatori potranno sempre scegliere tra una marcatura XHML o HTML, così come accade ora con HTML 4.01 e XHTML 1.1.L’IMPLEMENTAZIONE -Tutti i browser basati su Webkit,Geco ed Opera nelle loro ultime versioni permettono di utilizzare (alle volte in maniera disomogenea tra loro) le nuove featuresdefinite nell’HTML5.
- #22 Vediamo ora cosa realmente propone l’HTML5
- #23 L’HTML, fino ad oggi, ha avuto il compito di organizzare i contenuti e definire gli aspetti grafici (tramite la definizione di CSS) di una pagina sul WEB in maniera generica. Come abbiamo già visto, fino a metà degli anni 2000, le esigenze del WEB si focalizzavano quasi esclusivamente sulla rappresentazione più o meno complessa di documenti.
- #24 Con l’avvento del “WEB 2.0” e la spinta data da società come Google, Youtube, Amazon, Flickr, Facebook,etc. le esigenze cambiano radicalmente; il WEB viene ora visto come una piattaforma su cui sviluppare applicazioni caratterizzate da una forte interattività con l’utente; non sono più sufficienti semplici formda compilare, i sistemi vogliono essere intelligenti, propositivi, fornire contenuti specifici per l’utente che sta visitando la pagina. Cambia radicalmente anche l’approccio estetico; non c’è più la metafora della rivista o del libro. L’approccio non è più solo rappresentativo ma prevale l’idea funzionale della pagina. Da PAGE-DESIGN a USER-INTERFACE. Rispetto a qualche anno fa la pagina web è diventata un’arena su cui si muovono nuovi protagonisti: JAVASCRIPT, AJAX, JSON…offrendo tecnologie che permettono di “ascoltare” l’utente ed adattare i contenuti alle sue esigenze trasformando costantemente la struttura della pagina, il DOM.Chiaramente è questa la strada presa dal WHATWG e dal W3C per la definizione dei nuovi standard!Non più il concetto di pagina ma di applicazione; cercando quindi di fornire agli sviluppatori strumenti semplici per la gestione degli eventi; cercando di semplificare la gestione dei contenuti per le diverse deviceche oggi accedono alla rete; cercando di definire una semantica puntuale per la strutturazione dei contenuti; cercando inoltre di fornire supporto trasversale e nativo per tutti gli oggetti multimediali visualizzabili in un browser.
- #25 Vediamo più in dettaglio quali sono le novità proposte con l’HTML5:DOM / CSS - Sono stati definitivamente eliminati tutti gli elementi legati alla presentazione del documento, delegando esclusivamente il CSS a questo compito.ELEMENTI SEMANTICI - Sono stati introdotti una serie di nuovi elementi semantici che descrivono in maniera più puntuale i contenuti di un documento e la sua struttura.ATTRIBUTI - Sono inoltre stati introdotti nuovi attributi e la possibilità di definirne di propri.WEB FORMS 2– una ridefinizione semantica dei campi della FORM.API - Sono state implementate delle API per una migliore gestione di vari aspetti multimediali nella presentazione e gestione dei contenuti, degli eventi e della gestione off-line: CANVAS, AUDIO e VIDEO, STORAGE DATI, EDIT IN PLACE delle pagine, DRAG & DROP, GEOREFERENZIAZIONE, CROSS PAGE (CROSS DOMAIN) MESSAGING, SERVER SENT EVENTS, WEB WORKERS.
- #27 Una delle innovazioni più evidenti dell’HTML5 riguarda la ridefinizione semantica degli oggetti del DOM di una pagina HTML.Partiamo mettendo a confronto la stessa struttura del DOM scritta in HTML 4.01 e in HTML5Da questo esempio schematico possiamo vedere come dei TAG con funzionalità generiche di definizione di una struttura abbiano acquisito una valenza semantica nella descrizione del contenuto.Questo nuovo approccio nasce dall’esigenza di identificare in maniera più coincisa la struttura contenutistica di una pagina; non solo per garantire una maggiore accessibilità, ma anche per facilitare la gestione degli stessi dalle nuove device in grado di accedere al web, per una migliore indicizzazione, per una migliore gestione degli stili di visualizzazione (tramite la gestione del media type dei CSS), etc.
- #28 Ed ecco la trascrizione in codice di quello che abbiamo visto ora.Possiamo vedere che non è tanto la quantità di codice che dobbiamo produrre che fa la differenza, quanto la migliore definizione del contenuto che rappresentiamo; la gerarchia dei contenuti è più esplicita.
- #29 Partiamo dal DOCTYPE:La prima cosa che salta all’occhio è la dichiarazione del DOCTYPE della pagina.Nell’HTML5 la dichiarazione non ha più bisogno del riferimento al DTD come in precedenza.L’utilizzo di questa dichiarazione è già implementata in tutti i browser ed il contenuto della pagina viene renderizzato in modalità standard.L’inclusione di script o di style non ha più bisogno di specificare il TYPE.Non dobbiamo più mettere le virgolette per i valori degli attributi. Questo non vuol dire che “non possiamo”, HTML5 non è case sensitive, non è xml strict, HTML5 valida la sintassi comunque venga scritta! Accetta tutto quello che è accettato nell’HTML4, compresi quelli che oggi vengono considerati errori dai validatori.
- #30 Come abbiamo visto, sono stati introdotti nuovi elementi per descrivere semanticamente la struttura di un documentoGuardiamo più da vicino cosa ciascuno di questi definisce…
- #31 Vengono inoltre definiti altri elementi semantici con funzioni più astratte, ecco alcuni esempi:
- #32 Ci sono tre tipologie di attributi che possono essere applicati all’HTML:Globali (trasversali agli elementi), legati agli eventi eSpecifici degli elementi.Di seguito alcuni nuovi attributi globali definiti dallo standard HTML5:Ed alcuni nuovi attributi per gli eventi:
- #33 Ma cosa succede se usiamo oggi, nelle nostre pagine, i nuovo TAG semantici?Sono supportati dai browser?
- #34 Tutti i browser seri, pur non riconoscendo l’elemento dichiarato, attribuiscono correttamente i CSS; unico accorgimento che dobbiamo avere è quello di definirlo come elemento block, altrimenti viene considerato in-line.
- #35 Ho detto tutti i browser seri… Explorer, non riconoscendo il nuovo elemento, non è in grado di attribuirli nessuna classe CSS…Per far si che anche Explorer riesca a formattare i nuovi TAG bisogna ricorrere ad un hack: se creiamo via javascript uno dei nuovi elementi senza iniettarlo nella pagina… magia, abracadabra… IE ora è in grado di applicare classi CSS al nuovo elemento (grazie John Resig!!).
- #36 Vediamo ora cosa realmente propone l’HTML5
- #37 Le specifiche dell’HTML5 hanno introdotto novità importanti anche nella gestione delle FORM.Così come per la strutturazione del DOM della pagina, anche per la definizione dei campi di una FORM abbiamo un approccio di tipo semantico che introduce tipologie specifiche per ogni dato.Inoltre sono stati introdotti degli attributi specifici per la validazione, per la gestione dei campi obbligatori, per la gestione di placeholder, per la gestione dell’ autofocus.
- #38 Possiamo vedere quindi come questi nuovi elementi verranno rappresentati sulla pagina e quindi capire che la loro definizione semantica non ha solo una funzione astratta ma anzi permette semplicemente, senza l’aggiunta di codice javascript, di caratterizzarne le funzionalità.
- #39 Abbiamo visto come l’HTML5 abbia approfondito la semantica di un documento, entrando nel merito di un’accurata definizione degli elementi che lo compongono e cercando di fornire strumenti per l’interpretazione e la strutturazione dei contenuto.Il web però non è più solo rappresentazione di contenuti; negli ultimi anni abbiamo assistito anzi ad una vera e propria trasformazione del modo di utilizzare il web. È diventato uno strumento per comunicare, per condividere, per informare, per raggruppare. Sono nate miriadi di applicazioni web-basedper fare questo. È nato il WEB 2.0. E la ridefinizione dello standard parte proprio da qui. Dal cambiamento funzionale del WEB, e si pone come obbiettivo quello di formulare un linguaggio in grado di supportare questa evoluzione.
- #40 Sono stati introdotti degli elementi specifici per la gestione di video ed audio all’interno delle pagine web.Non sarà quindi più necessario quindi inserire oggetti specifici di terze parti per interpretare e visualizzare i vari media pubblicati in una pagina.Questi oggetti sono supportati da un’API javascript che permette di gestirne l’avanzamento, di conoscere la durata e l’attuale posizione dello stream, di regolare il volume…Dando così la possibilità di costruire players personali lavorando solo con CSS e javascript, in maniera trasparente e con codice non compilato.Attualmente questi due nuovi elementi vengono supporati da tutti i moderni browser, eccetto IE.
- #41 <HTML> DoctorNative Audio in the browserMark BoasOne of the most exciting and long-awaited features in HTML 5 the <audio> element, enabling native audio playback within the browser. We can take advantage of this for browsers that support it — such as Safari 4, Firefox 3.5 and Chrome 3 — while falling back on Flash or other plugins for other browsers.… And when you consider that mobile and other lower-spec devices — like Apple’s iPod and iPhone (Safari), Nintendo’s Wii (Opera), and Google Android-powered devices (Chrome) — are choosing to support HTML 5 audio rather than Flash, you begin to paint a picture of how important native audio support will soon become.Questo nuovo approccio è stato sposato, come già detto, da tutti i più recenti browser; anche nell’ambito mobile e game devicestanno scegliendo la strada segnata dall’HTML5 per includere file multimediali, a discapito dei flash players. Questo fa ben capire quanto stia diventando importante seguire le raccomandazioni per i nuovi standard e quale portata avrà questo in un futuro prossimo.
- #42 CANVAS è una libreria javascript che permette di disegnare oggetti vettoriali su una pagina HTML, sfruttando al contempo tutti gli eventi disponibili e condividendoli con il resto degli elementi della pagina. Per esempio, utilizzando Canvasè possibile manipolare immagini e testi HTML avvicinandosi a quello che fino ad ora era possibile fare con Flash. SVG… A differenza di Canvas, SVG potrà essere scritto direttamente all’interno del nostro contesto HTML, potrà essere formattato dai CSS e manipolato da javascript.
- #44 Now, if the user goes to the page, the browser will cache the files and make them available even when the user is offlineIphone
- #45 Con l’HTML5 possiamo finalmente comunicare con una pagina (iframe) residente su un altro dominio. Viene infatti formalizzato un listener: “onmessage” ed un metodo: postMessage(). A questo punto è possibile mettere in ascolto una pagina per fare qualcosa qualora arrivi un messaggio.Con postMessage() è possibile inviare un messaggio ad una specifica pagina.
- #46 Web workers è una grande novità per il web…Ora abbiamo la possibilità di delegare operazioni potenzialmente pesanti e quindi “bloccanti” a dei javascript eseguiti su tread paralleli.Il worker non ha coscienza del contesto a cui appartiene, per cui non può fare riferimenti ad elementi del DOM da cui viene invocato. La comunicazione avviene attraverso i message; dalla pagina chiamante viene inviato un message contenente un’oggetto che il worker deve elaborare; il worker, in ascolto, elabora l’oggetto e, una volta ottenuto il risultato, lo restituisce alla pagina a sua volta come message. Tutto questo processo avviene in maniera asincrona.
- #47 Quando ho iniziato a curiosare tra le specifiche dell’HTML5, vedendo questa implementazione, mi sono domandato quale senso ha includere questo comportamento come direttiva del linguaggio… Esistono tantissime API javascript che adempiono a questo compito ma qui si parla di altro… Abbiamo la possibilità di gestire l’evento drop anche se esterno dal contesto WEB… possiamo per esempio draggare un file PDF dalla scrivani del proprio computer su un box della nostra pagina HTML e far si che la nostra web app si comporti di conseguenza. Questo, a mio parere, apre nuove strade sulla gestione delle interfacce.
- #48 La vostra applicazione avrebbe bisogno di sapere la localizzazione dell’utente? Bene, oggi (forse domani o domanil’altro…) è possibile interrogare il browser per determinare le sue coordinate di provenienza; chiaramente queste saranno più o meno accurate a seconda se viene fatta una triangolazione sugli hot spot o se il calcolo viene effettuato da un sistema GPS.
- #49 Vediamo ora cosa realmente propone l’HTML5
- #50 Da questa tabella possiamo vedere l’attuale compatibilità dei browser con i nuovi standard HTML5… Opera ha annunciato che con la versione 10.5 darà pieno supporto al video e probabilmente al drag & drop… IE … boh!
- #51 Le specifiche dell’HTML5 sono attualmente in fase di definizione; I browser più “seri” (leggi tutti tranne IE) supportano già molte delle nuove features ed esistono librerie javascript per la gestione dei fallbacks.http://remysharp.com/2009/01/07/html5-enabling-script/http://www.modernizr.com/Iniziare ad usare il nuovo DOCTYPE non costa nulla così come costa poco iniziare ad adottare i nuovi TAG. Goolgee Youtubeusano già HTML5 per le loro pagine e le loro applicazioni … Questo porterà velocemente alla pubblicazione definitiva degli standard dell’HTML5 ed all’adeguamento a questi anche di quei browser che, fino ad oggi, hanno pensato di poter fare a meno di seguire una linea comune (leggi IE).
- #52 Alcuni riferimenti sul web: http://www.whatwg.org/ http://diveintohtml5.org/ http://html5doctor.com/ (Bruce Lawson) http://a.deveria.com/caniuse/ (When can I use…) http://html5demos.com/ (Remy Sharp) http://www.alistapart.com/articles/previewofhtml5 Javascript for compability: http://remysharp.com/2009/01/07/html5-enabling-script/ http://www.modernizr.com/Buon viaggioe… attenti alle buche!