alla scoperta di html5 go!webdesign
Post on 10-May-2015
2.259 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5ALLA SCOPERTA DI
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
L’HTMLSI EVOLVE
EVOLUZIONE – Alla Scoperta di HTML5
HTML 4.01
web pages
design
HTML 5
web-application
user-interface
Compatibilità
BROWSER
COMPATIBILITA’ – Alla Scoperta di HTML5
Canvas
Audio/ Video
Form
GeoLocation
Web Database
Finalmente un DOCTYPEche chiunque può ricordare
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
La StrutturaDiventa semantica
STRUTTURA HTML4 – Alla Scoperta di HTML5
STRUTTURA HTML5 – Alla Scoperta di HTML5
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
TAG Principali
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.
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
TAG Multimediali
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.
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
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
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>
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
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
Geolocation API
Geolocation API – Alla Scoperta di HTML5
I browser stanno cominciando a supportare una serie di strumenti di geolocalizzaziontramite indirizzo IP.
Microdati
Microdati – Alla Scoperta di HTML5
I Microdata sono delle informazioni aggiuntive che possono arricchire i risultati delle SERP.
Recensioni - Profili - Eventi
Case History
Case History – Alla Scoperta di HTML5
LINK http://html5demos.com/
Case History – Alla Scoperta di HTML5
LINK http://html5gallery.com/
E’ Tempo diusare HTML5?
Usare HTML5? – Alla Scoperta di HTML5
Possiamo iniziare a giocare…
Usare HTML5? – Alla Scoperta di HTML5
…ma stiamo molto attenti!
top related