Premessa
- Maggior parte pagine Web non compatibili al 100% con standard W3C
- Come se leggendo un libro trovassimo frasi come "ho! andato a; teca p u, bro leg?"
- User-agent devono prevedere eccezioni, codice in più per interpretare errori e visualizzare il visualizzabile
- Più della metà degli utenti può avere problemi a consultare il Web
(senza considerare sistemi automatici)
- Consiglio: scrivere sempre in XHTML(1...5...n)!
- Vediamo alcune novità di (X)HTML5...
HTML 5: Principali novità
- nuovi elementi per strutturare il testo in sezioni
- nuovi elementi per menu di navigazione
- nuovi controlli e nuovi elementi di input per i moduli (form)
- memorizzazione locale di dati (applicazioni offline)
- nuovi elementi per contenuti multimediali
- estensione a tutti i tag di attributi per l'accessibilità
- grafica: nuovo elemento canvas che supporta javascript per le animazioni e migliore supporto per SVG
- video
- geolocalizzazione
- cache applicazione e database
- web workers (script in background e in parallelo)
DTD HTML 5
Dichiarazione semplificata
<!DOCTYPE html>
canvas
<canvas id="myCanvas" width="300" height="300"> lt;/canvas>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0,100,50,50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
video e audio
Video Incluso (embedded)
<video src="filmato.ogg" controls>Il tuo browser non supporta l'elemento video</video>
Video e scripting
<video controls>
<source src="filmato1.ogg" type="video/ogg" />
<source src="filmato2.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
Il tuo browser non supporta l'elemento video
</video>
var v = document.getElementsByTagName("video")[0];
v.play();
audio
<audio>
<source src='audio.ogg' type='audio/ogg; codecs=vorbis' />
Il tuo browser non supporta l'elemento audio
</audio>
semplificazione rispetto ai precedenti standard!
geolocalizzazione
<script type="text/javascript">
function ottieniPosizione(posizione){
var infoposizione = "Latitudine: "+position.coords.latitude+"<br />";
infoposizione += "Longitudine: "+position.coords.longitude+"<br />";
infoposizione += "Altitudine: "+position.coords.altitude+"<br />";
document.getElementById("miaposizione").innerHTML = infoposizione;
}
function miaPosizione(){
navigator.geolocation.getCurrentPosition(ottieniPosizione);
}
</script>
...
<a href="#" onClick="miaPosizione()">Ottieni la mia posizione</a>
<div id="miaposizione"></div>
Esempio1 firefox 3.5
Esempio2
form
<form>
<p><label>email:<input type="email" /></label></p>
<p><label>url:<input type="url" /></label></p>
<p><label>number:<input type="number" min="0" max="10" step="2" value="6" /></label></p>
<p><label>range:<input type="range" min="0" max="10" step="2" value="6" /></label></p>
<p><label>date:<input type="date" /></label></p>
<p><label>datetime:<input type="datetime"></label></p>
<p><label>month:<input type="month"></label></p>
<p><label>week:<input type="week"></label></p>
<p><label>time:<input type="time"></label></p>
<p><label>color:<input type="color"></label></p>
<p><label>search:<input type="search"></label></p>
<p><label>required:<input required name="req"></label></p>
<p><label>minlenght e maxlength: <input minlength="3" maxlength="5"></label></p>
<p><input type="submit" value="Go"></p>
</form>
Visualizzazione del form (Opera)
Corso AQUARIUS sulle Tecnologie Web
