Alla Scoperta di HTML5 Go!WebDesign

2,556 views
2,480 views

Published on

Scopriamo insieme l’utilizzo di questi nuove evoluzione HTML5 e CSS3, i servizi e strumenti 2.0 che stanno nascendo per agevolare l’apprendimento.

Attualmente queste evoluzioni non sono del tutto supportate dai browser, ma questo non ci deve impedire di conoscere gli usi e le tecniche basilari per tempi più maturi, in modo da essere un passo avanti agli altri.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,556
On SlideShare
0
From Embeds
0
Number of Embeds
420
Actions
Shares
0
Downloads
71
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Alla Scoperta di HTML5 Go!WebDesign

  1. 2. HTML5 ALLA SCOPERTA DI
  2. 3. STORIA – Alla Scoperta di HTML5 1991 HTML 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2004 Inizi Lavori HTML5 2005 AJAX 2009 HTML 5 5
  3. 4. L’HTML SI EVOLVE
  4. 5. EVOLUZIONE – Alla Scoperta di HTML5 HTML 4.01 web pages design HTML 5 web-application user-interface
  5. 6. Compatibilità BROWSER
  6. 7. COMPATIBILITA’ – Alla Scoperta di HTML5 Canvas Audio/ Video Form GeoLocation Web Database
  7. 8. Finalmente un DOCTYPE che chiunque può ricordare
  8. 9. STRUTTURA – Alla Scoperta di HTML5 <!DOCTYPE html> Il DOCTYPE è la dichiarazione del tipo di documento e informa il validatore quale versione di (X)HTML stiamo usando e deve comparire in cima ad ogni pagina Web. DOCTYPE sono essenziali per un perfetto funzionamento e rappresentazione dei documenti Web. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN“ &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> HTML4 HTML5
  9. 10. La Struttura Diventa semantica
  10. 11. STRUTTURA HTML4 – Alla Scoperta di HTML5
  11. 12. STRUTTURA HTML5 – Alla Scoperta di HTML5
  12. 13. STRUTTURA HTML5 – Alla Scoperta di HTML5 <!doctype html> <html> <head> <meta charset=&quot;UTF-8&quot;> </head> <body> <header></header> <section></section> <aside></aside> <footer></footer> </body> </html> tabella di caratteri è stata utilizzata per il documento dichiarazione del tipo di documento Tag principali
  13. 14. TAG Principali
  14. 15. TAG – Alla Scoperta di HTML5 <header> <section> <aside> <footer> Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo Rappresenta un’area in cui inserire del contenuto generico. Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. Rappresenta la sezione conclusiva del sito in cui Inserire alcune informazioni del sito.
  15. 16. TAG – Alla Scoperta di HTML5 <hgroup> <nav> <article> Rappresenta una area in cui sono raggruppati Elementi inerenti al tag header Rappresenta un’area in cui inserire una navigazione Rappresenta una sezione della pagine che consiste In una entità indipendente
  16. 17. TAG Multimediali
  17. 18. TAG Multimediali – Alla Scoperta di HTML5 < audio > <video> <canvas> <embed> Rappresenta un elemento multimediale audio Rappresenta un elemento multimediale video Rappresenta un contenitore in cui grazie a script esterni è possibile gestire la grafica. Rappresenta un contenuto incorporato, come un plug-in.
  18. 19. TAG <audio> – Alla Scoperta di HTML5 <audio src =&quot;sound.mp3&quot; autoplay controls ></audio> Il tag AUDIO permette di incoporare un file audio e assegnare alcune funzionalità. Ecco un esempio di codice: src Rappresenta il percorso del file audio autoplay Se presente il file audio si avvierà in automatico controls Se presente saranno abilitati i controlli video
  19. 20. TAG <video> – Alla Scoperta di HTML5 <video width=&quot;640&quot; height=&quot;480 &quot; src = 'video.mpeg' autoplay controls ></video> Il tag VIDEO permette di incorporare un file video e assegnare alcune funzionalità. Ecco un esempio di codice: src Rappresenta il percorso del file video autoplay Se presente il file audio si avvierà in automatico controls Se presente saranno abilitati i controlli video
  20. 21. TAG <video> – Alla Scoperta di HTML5 Incorporare due video a seconda del supporto codec. Ecco un esempio di codice: Codec theora – vorbis Codec H.624 - aac - mp4 <video width=&quot;640&quot; height=&quot;480&quot; autoplay> <source src=&quot;miovideo.m4v&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'> <source src=&quot;miovideo.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;'> <p>Spiacente il tuo browser non supporta l'elemento video</p> </video>
  21. 22. TAG <canvas> – Alla Scoperta di HTML5 < canvas id=&quot; myCanvas &quot;></canvas> <script> var canvas=document.getElementById( 'myCanvas '); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> Il tag CANVAS permette di contenere script esterni per la gestione della grafica. canvas Rappresenta il contenuto myCanvas Idetificativo contenitore
  22. 23. TAG <embed> – Alla Scoperta di HTML5 <embed width=&quot;640&quot; height=&quot;480&quot; src =&quot;helloworld.swf&quot; type=&quot;swf&quot;/> Il tag EMBED permette di incorporare un file, come un plug-in. Ecco un esempio di codice: src Rappresenta il percorso del file video type Indica il tipo di contenuto
  23. 24. Geolocation API
  24. 25. Geolocation API – Alla Scoperta di HTML5 I browser stanno cominciando a supportare una serie di strumenti di geolocalizzazion tramite indirizzo IP.
  25. 26. Microdati
  26. 27. Microdati – Alla Scoperta di HTML5 I Microdata sono delle informazioni aggiuntive che possono arricchire i risultati delle SERP. Recensioni - Profili - Eventi
  27. 28. Case History
  28. 29. Case History – Alla Scoperta di HTML5 LINK http://html5demos.com/
  29. 30. Case History – Alla Scoperta di HTML5 LINK http://html5gallery.com/
  30. 31. E’ Tempo di usare HTML5?
  31. 32. Usare HTML5? – Alla Scoperta di HTML5 Possiamo iniziare a giocare…
  32. 33. Usare HTML5? – Alla Scoperta di HTML5 … ma stiamo molto attenti!

×