alla scoperta di html5 go!webdesign
DESCRIPTION
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.TRANSCRIPT
![Page 1: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/1.jpg)
![Page 2: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/2.jpg)
HTML5ALLA SCOPERTA DI
![Page 3: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/3.jpg)
STORIA – Alla Scoperta di HTML5
1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12004 Inizi Lavori HTML52005 AJAX2009 HTML 5 5
![Page 4: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/4.jpg)
L’HTMLSI EVOLVE
![Page 5: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/5.jpg)
EVOLUZIONE – Alla Scoperta di HTML5
HTML 4.01
web pages
design
HTML 5
web-application
user-interface
![Page 6: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/6.jpg)
Compatibilità
BROWSER
![Page 7: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/7.jpg)
COMPATIBILITA’ – Alla Scoperta di HTML5
Canvas
Audio/ Video
Form
GeoLocation
Web Database
![Page 8: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/8.jpg)
Finalmente un DOCTYPEche chiunque può ricordare
![Page 9: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/9.jpg)
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 "-//W3C//DTD XHTML 1.0 Transitional//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML4
HTML5
![Page 10: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/10.jpg)
La StrutturaDiventa semantica
![Page 11: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/11.jpg)
STRUTTURA HTML4 – Alla Scoperta di HTML5
![Page 12: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/12.jpg)
STRUTTURA HTML5 – Alla Scoperta di HTML5
![Page 13: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/13.jpg)
STRUTTURA HTML5 – Alla Scoperta di HTML5
<!doctype html><html><head><meta charset="UTF-8"></head><body><header></header><section></section><aside></aside><footer></footer></body></html>
tabella di caratteri è statautilizzata per il documento
dichiarazione del tipodi documento
Tag principali
![Page 14: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/14.jpg)
TAG Principali
![Page 15: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/15.jpg)
TAG – Alla Scoperta di HTML5
<header>
<section>
<aside>
<footer>
Rappresenta una sezione della pagina in cui inserirela testata del sito web, qui possiamo inserire un logo
Rappresenta un’area in cui inserire del contenuto generico.
Rappresenta una sezione della pagina collegataal sito e non obbligatoriamente al contenuto.
Rappresenta la sezione conclusiva del sito in cuiInserire alcune informazioni del sito.
![Page 16: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/16.jpg)
TAG – Alla Scoperta di HTML5
<hgroup>
<nav>
<article>
Rappresenta una area in cui sono raggruppatiElementi inerenti al tag header
Rappresenta un’area in cui inserire una navigazione
Rappresenta una sezione della pagine che consisteIn una entità indipendente
![Page 17: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/17.jpg)
TAG Multimediali
![Page 18: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/18.jpg)
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.
![Page 19: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/19.jpg)
TAG <audio> – Alla Scoperta di HTML5
<audio src="sound.mp3"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
![Page 20: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/20.jpg)
TAG <video> – Alla Scoperta di HTML5
<video width="640" height="480 " 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
![Page 21: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/21.jpg)
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="640" height="480" autoplay><source src="miovideo.m4v" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'><source src="miovideo.ogv" type='video/ogg;codecs="theora, vorbis"'><p>Spiacente il tuo browser non supporta l'elemento video</p></video>
![Page 22: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/22.jpg)
TAG <canvas> – Alla Scoperta di HTML5
<canvas id="myCanvas"></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
![Page 23: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/23.jpg)
TAG <embed> – Alla Scoperta di HTML5
<embed width="640" height="480" src="helloworld.swf" type="swf"/>
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
![Page 24: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/24.jpg)
Geolocation API
![Page 25: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/25.jpg)
Geolocation API – Alla Scoperta di HTML5
I browser stanno cominciando a supportare una serie di strumenti di geolocalizzaziontramite indirizzo IP.
![Page 26: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/26.jpg)
Microdati
![Page 27: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/27.jpg)
Microdati – Alla Scoperta di HTML5
I Microdata sono delle informazioni aggiuntive che possono arricchire i risultati delle SERP.
Recensioni - Profili - Eventi
![Page 28: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/28.jpg)
Case History
![Page 29: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/29.jpg)
Case History – Alla Scoperta di HTML5
LINK http://html5demos.com/
![Page 30: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/30.jpg)
Case History – Alla Scoperta di HTML5
LINK http://html5gallery.com/
![Page 31: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/31.jpg)
E’ Tempo diusare HTML5?
![Page 32: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/32.jpg)
Usare HTML5? – Alla Scoperta di HTML5
Possiamo iniziare a giocare…
![Page 33: Alla Scoperta di HTML5 Go!WebDesign](https://reader035.vdocuments.net/reader035/viewer/2022062319/554ee820b4c905911d8b5081/html5/thumbnails/33.jpg)
Usare HTML5? – Alla Scoperta di HTML5
…ma stiamo molto attenti!