HTML 5 (Cenni)

Massimo Martinelli
massimo.martinelli AT isti [DOT cnr DOT it

CNR-ISTI

Area della Ricerca CNR

via Moruzzi, 1

56124 Pisa

Pisa, 18 Giugno 2019

Premessa

segnale stradale che indica al tempo stesso parcheggio e divieto di sosta

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);

Nuovi elementi strutturali semantici

    <article>
    <aside>
    <details>
    <figcaption>
    <figure>
    <footer>
    <header>
    <main>
    <mark>
    <nav>
    <section>
    <summary>
    <time>

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

esempi form html5 con Opera

altro

WebGL - 3D Nativo

WebGL (Web Graphics Library): JavaScript API per rappresentare grafica interattiva 2D e 3D
Basato su OpenGL ES 2.0
NESSUN plug-in, integrato nel browser consente l'utilizzo di acceleratore grafico GPU per elaborazione di immagini

Accesso a dispositivi e sensori

Videocamera
Realtà Aumentata
Riconoscimento vocale
Sintesi vocale italiano - inglese
giroscopio (palmare/tablet):
bussola (palmare/tablet):
batteria:
gamepad/joistick api

HTML5: un esempio di documento

<!DOCTYPE html>  <!-- dichiarazione semplificata -->
<html lang="it">  <!-- dichiarazione linguaggio -->
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />  <!-- set di caratteri unicode -->
  </head>
<body>
  <p>Ciao mondo!</p>
</body>
<html>

Nuovi elementi strutturali

Specifica W3C

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content

The section element represents a generic document or application section…
is not a generic container element.
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Pensiamo ad un quotidiano: sezione cronaca, sottosezione con articolo e foto relative

Statistica pagine Web: valori dell'attributo class

Grazie per l'attenzione

Domande?

CSS