<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> </head> </html>L'absence de DOCTYPE signifie pour Internet Explorer que la page est conçue pour les anciens navigateurs. Parfois ça change le rendu!
Démos HTML avec
Pour que le DOM reconnaisse et traite les balises HTML5 (nav, video,..), il faut inclure conditionnellement un script spécifique pour les versions antérieures à IE9.
On peut utiliser pour celà la balise:
<!--[if lt IE 9]><script src="../lib/html5-ie.js"></script><![endif]-->
ou
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Le code JavaScript du fichier html5-ie.js étant celui-ci :
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
document.createElement("figcaption");
document.createElement("hgroup");
document.createElement("time");
<header role="banner"><img src=pub.jpg></header>
Il existe de nombreuses autres balises sémantiques, dont on trouvera la description dans les documents en référence.
On peut utiliser les nouvelles balises VIDEO et AUDIO avec un "fall-back" vers un lecteur Flash.
Par exemple http://protofunc.com/jme/
Voir
<video src="movie.m4v" poster="accueil.jpg"width="424" height="176" preload autoplay loop controls></video>
<embed href="movie.m4v" src="accueil.jpg" type="video/x-m4v" target="myself" scale="1">
Ces balises intègrent directement un lecteur dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume…
Attributs de base: width, height, src (url de la vidéo), poster (image à afficher), audio="muted"
Attributs booléens (Cf. "checked" de INPUT TYPE="checkbox"):
preload (et non autobuffer !) autoplay loop controls
Si plusieurs flux on peut remplacer l'attribut SRC de la balise VIDEO par un élément inclu de type <SOURCE SRC="" TYPE="">
MP4/H.264 n'est pas supporté par Firefox, iOS ne supporte que mp4.
D'autres bibliothèques permettent de gérer fichier son binaires par exemple API MIDI. ou le son du micro
| Extension | Mime |
|---|---|
| mp4 | video/mp4 |
| ogv | video/ogg |
| mov | video/quicktime |
| m4v | video/x-m4v |
| 3gp | video/3gp |
<svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
Leçon sur SVG
input:invalid {background-color: red}
type=".." pour la balise INPUT
Permet d’effectuer une première validation du contenu et permet affichage d'un clavier adapté selon le type de contenu sur les smatphones ou tablettes ou un mini calendrier pour les types date. Valeurs possibles pour l'attribut "type": tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color
Un attribut placeholder pour INPUT: permet de donner des indications quand la case est vide.
<input list="browsers"> <datalist id="browsers"> <option value="Safari"> <option value="Internet Explorer"> <option value="Opera"> <option value="Firefox"> </datalist>Exemple de formulaire HTML5
Comme il y a latence: paramètre = handle de fonction (avec un paramère: un objet qui contient valeurs)
navigator.geolocation.getCurrentPosition(foo)
function foo(position) {
lat=position.coords.latitude;
lon=position.coords.longitude;
accu= position.coords.accuracy ;// en mètres
accu= position.coords.altitude ;
accu= position.coords.altitudeAccuracy ;//en mètres
accu= position.coords.heading ; //0 à 360
accu= position.coords.speed ;
}
//La même chose avec suivi (évènements déclenchés en cas de chgt de position)
var watchId = navigator.geolocation.watchPosition(foo)
Ces fonctions peuvent prendre un deuxième argument: un handler d'erreur
var watchId = navigator.geolocation.watchPosition(foo,errorHandler)
Ces fonctions peuvent prendre un troisième argument: un objet collection avec 3 paramètres {enableHighAccuracy:true,timeout:7000,maximumAge:0} /* utiliser GPS, durée avant erreur, nocache */
var watchId = navigator.geolocation.watchPosition(foo,errorHandler,{enableHighAccuracy:true,timeout:2000})
function errorHandler(error) {alert(error.message)}
// Arrêt du suivi
navigator.geolocation.clearWatch(watchId)
Exemple GPS
Il est également possible d’effectuer des « glisser-déposer » dans une page web. Cette fonctionnalité n’aura donc plus besoin d’être visuellement émulée par des bibliothèques Javascript tierces mais sera présente nativement dans l’API Javascript.
La source Ajouter attributs HTML draggable="true" et ondragstart="drag(event)" à n'importe quelle balise et définir la valeur transférée dans la fonction "drag". Le plus souvent:
function drag(e) {e.dataTransfer.setData('text',e.target.id)}
la cible Ajouter attributs HTML ondragover="event.preventDefault()" ondrop="drop(event)" à balise cible puis récupérer et traiter la donnée transférée dans fonction "drop".
Exemple basique drag and drop
Cours sur le drag and drop
<figure>
<img src="design-folio.png" alt="A propos de design-folio" />
<figcaption>
Logo de l'image design-folio
</figcaption>
</figure>