Alla Scoperta di HTML5 Go!WebDesign

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


<!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à.


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.


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.


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!

Alla Scoperta di HTML5 Go!WebDesign

Design

Transcript of Alla Scoperta di HTML5 Go!WebDesign