Post on 12-Jul-2020
Magali Contensin
Les apports de
JoSy AJAX et bibliothèques JS pour les ASR 3 novembre 2011
Plan
Histoire
Différences avec HTML4
API
Extension des fonctionnalités des formulaires
Quand passer à HTML5 ?
1989
1997
2011
WWW
HTML3.2
1999 HTML4.01 2000 XHTML 1.0
2001 XHTML 1.1
2003 XHTML 2.0
W3C WHATWG
2008 HTML5 – first working draft
HTML5 – last call (25 mai)
2009 Web Forms 2.0
Histoire de HTML/XHTML histoire
1991 HTML tags – Sir Tim Berners-Lee
Web Applications 1.0 2004
HTML 2.0 1995
Création du W3C 1994
1993 HTML+
2014
spécification basée sur le DOM Level 2 HTML
Différences avec HTML4 spécification
DTD HTML 4.0.1 <!ELEMENT TR - O (TH|TD)+ -->
HTML5
remplace
HTML 4.0.1
DOM Level 2 HTML
XHTML 1.0
DTD XHTML 1.0 <!ELEMENT tr (th|td)+>
spécification basée sur le DOM Level 2 HTML
remplace HTML 4.0.1, DOM Level 2 HTML, XHTML 1
définit le comportement du navigateur en cas de succès et d’échec
Différences avec HTML4 spécification
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>le titre</title>
</head>
<body>
<p>un paragraphe</p>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>le titre</title>
</head>
<body>
<p>un paragraphe</p>
</body>
</html>
HTML5 XHTML5
multimédia et dessin : video, audio, embed, canvas
extension des fonctionnalités des formulaires
meilleure description de la structure d’une page
attributs d’événements : drag & drop, onmessage (webSocket),
onstorage (Web Storage), onmousewheel (molette)
Différences avec HTML4 nouveaux éléments & attributs
header
footer
nav section
aside
figure article
Éléments
cadres (frame, frameset, noframes)
style (basefont, big, center, font, strike, tt)
applet => object
dir => ul
acronym => abbr
Attributs liés à la présentation
background, alink, link, vlink, text dans body
bgcolor dans les tableaux
type dans li, ol et ul
Compatibilité arrière => obsolete versus deprecated
( auteurs : ne pas utiliser
navigateurs : support )
Différences avec HTML4 suppression d’éléments & attributs
Différences avec HTML4 SVG & MathML
<!doctype html>
<title>test SVG dans HTML</title>
<p>
un disque :
<svg>
<circle r="40" cx="250" cy="50" stroke="red" fill="white"/>
</svg>
</p>
<!doctype html>
<title>test MathML dans HTML</title>
<p>
une formule :
<math>
<msqrt>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</msqrt>
</math>
</p>
var obj_img = new Image(); obj_img.src = "clock.png"; function affAiguille(context, angle, couleur,longueur, epaisseur) { context.save(); context.rotate(angle); context.strokeStyle = couleur; context.beginPath(); context.moveTo(0, 0); context.lineTo(0, -longueur); context.lineWidth = epaisseur; context.lineCap = 'round'; context.stroke(); context.restore(); }
function afficheHorloge() { try{ var canvas = document.getElementById('horloge'); var context = canvas.getContext('2d'); context.clearRect(0, 0, 228, 223); var d = new Date(); context.drawImage(obj_img, 0, 0); context.save(); context.translate(114,111); // centre devient origine du repere affAiguille(context, ((Math.PI)/6)*((d.getHours())%12), 'black', 50, 8); affAiguille(context, ((Math.PI)/30) * d.getMinutes(), 'gray', 80, 5); affAiguille(context, ((Math.PI)/30) * d.getSeconds(), 'red', 95, 3); context.fillStyle = '#000000'; // afficher le rond au centre horloge context.beginPath(); context.arc(0, 0, 6, 0, 2 * Math.PI, true); context.fill(); context.restore(); } catch (e) { /* code execute si exception */ } }
<!DOCTYPE html>
<head>
<title>Horloge</title>
<script src="horloge.js"></script>
</head>
<body onload="setInterval('afficheHorloge()', 1000)">
<canvas id="horloge" width="228" height="223">
Le navigateur ne gere pas canvas
</canvas>
</body>
API canvas
Les éléments video et audio peuvent être contrôlés par un script
API video & audio
<!DOCTYPE html>
<html>
<head>
<title>Test video</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="ctrl.js"></script>
</head>
<body>
<button onclick="ctrlVideo('idv', 'play')">></button>
<button onclick="ctrlVideo('idv', 'pause');">||</button>
<br>
<video id='idv' width=200 height=150 poster="test.png">
<source src="test.mp4" type="video/mp4">
<source src="test.webm" type="video/webm">
<source src="test.ogv" type="video/ogv">
</video>
bla bla bla bla bla bla bla bla bla bla bla bla
...
</body>
</html>
function ctrlVideo(v_id, control){
var objv = document.getElementById(v_id);
switch (control) {
case 'play' :
objv.play();
break;
case 'pause' :
objv.pause();
break;
}
}
Les éléments video et audio peuvent avoir un style
API video & audio
button {
background-color:rgba(255, 0, 0, 0.2);
border-radius: 15px;
width:22px;
}
video {
border-radius: 15px;
margin:40px;
box-shadow: 10px 10px 5px #888;
float:left;
transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}
API intégrées dans la spécification HTML5 W3C :
Multimédia et dessin : canvas, video, audio
Drag and Drop
Gestion de l’historique de navigation
Offline web applications
Autres API :
Stockage sur le client : Web storage *, Web SQL database
WebSocket *
Web Workers *
Server sent events *
Cross document messaging *
Microdata *
Technologies utilisées en association avec HTML5 :
Geolocation, webGL, EcmaScript, CSS3
(HTML Living standard = W3C + *)
API
Champs HTML4
Types de données
date et temps :
date
month
week
time
datetime
nombres : number, range
textes :
url
tel
search
couleur : color
<input type="type_donnee">
Formulaires types et contraintes
Champs HTML4
Types de données : temps, nombres, url, email, couleur, tel.
Listes de valeurs possibles pour un champ texte
<input list="schtroumpf">
<datalist id="schtroumpf">
<option value="paresseux">
<option value="grognon">
<option value="farceur">
</datalist>
Formulaires types et contraintes
Champs HTML4
Types de données : temps, nombres, url, email, couleur, tel.
Listes de valeurs possibles pour un champ texte : datalist, list
Contraintes
expression régulière ECMA 262
<input type="text" pattern="^[0-9]{2}$">
champ obligatoire
<input type="text" name="prenom" required>
bornes et pas
min max step
<input type="time" min="17:00" max="23:00" step="600">
<input type="range" min="0" max="100">
Formulaires types et contraintes
Champs HTML4
Types de données : temps, nombres, url, email, couleur, tel.
Listes de valeurs possibles pour un champ texte : datalist, list
Contraintes : bornes, pas, expression, obligatoire
Indication : placeholder
Formulaires types et contraintes
<input type="text"
pattern="^[0-9]{2}$"
placeholder="2 chiffres">
Champs HTML4
Types de données : temps, nombres, url, email, couleur, tel.
Listes de valeurs possibles pour un champ texte : datalist, list
Contraintes : bornes, pas, expression, obligatoire
Indication : placeholder
Aide au remplissage
Moins de code JavaScript
Vérification native
Formulaires types et contraintes
<input type="time">
<input type="month"> <input type="week">
<input type="datetime">
<input type="date">
<input type="number"> <input type="range">
<input type="color">
<input pattern="^[0-9]{2}$" placeholder="2 chiffres">
Formulaires aide au remplissage
Données obligatoires
Type
Bornes
Motif
Pas
Taille (maxlength)
Pour des raisons de sécurité
il faut faire la vérification côté
serveur
Formulaires vérification
Working Draft (WD) - 1er brouillon public
Last Call WD
Candidate Recommendation (CR)
Proposed Recommendation
W3C Recommendation
janv 2008
24 mai 2011
2004
2ème trimestre
2012
2ème trimestre
2014
2007 W3C HTML Working group
1er trimestre
2014
Quand passer à HTML5 ? Etapes de définition de la spécification
Web Forms 2.0, Web Applications 1.0
http://www.whatwg.org/specs/web-apps/current-work
Quand passer à HTML5 ? Support par les navigateurs
http://html5test.com
14.0.835.202
7.0.1
11.51
5.1
8.0.6001
Quand passer à HTML5 ? Support par les navigateurs
10
300
Quand passer à HTML5 ? Support par les navigateurs
http://html5test.com
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29
Quand passer à HTML5 ? Support par les navigateurs
http://caniuse.com
Quand passer à HTML5 ? Support par les navigateurs
http://gs.statcounter.com
Quand passer à HTML5 ? Parts de marché
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
IE 6.0 IE 7.0 IE 8.0 IE 9.0
Firefox 2.0 Firefox 3.0 Firefox 3.5 Firefox 3.6
Firefox 4.0 Firefox 5.0 Firefox 6.0 Firefox 7.0
Chrome 5.0 Chrome 6.0 Chrome 7.0 Chrome 8.0
Chrome 9.0 Chrome 10.0 Chrome 11.0 Chrome 12.0
Chrome 13.0 Chrome 14.0 Chrome 15.0 Safari 4.0
Safari 4.1 Safari 5.0 Safari 5.1 Opera 10.x
Opera 11.x Proprietary or Undetectable
55% 23%
15%
5% 2% Total Market Share Microsoft IE
Firefox
Chrome
Safari
Opera
Propriétaires & indétectables
Autres
http://www.netmarketshare.com
3ème trimestre 2011
IE Firefox Chrome
Quand passer à HTML5 ? Parts de marché
Support HTML5 par les navigateurs
Support effectif d’un sous-ensemble HTML5 sur ordinateurs fixes, tel, tablettes
Pas de support de Flash dans Apple iOS et Windows 8 mobile
=> développement d’applications web mobiles avec HTML5/CSS3/JS
=> Adobe Edge : animations riches utilisant HTML5/CSS3/JS
Augmentation du support HTML5 à chaque nouvelle version
Navigateurs sans HTML5
Eléments et attributs inconnus sont ignorés
Type par défaut pour les formulaires : texte
Emulation et aide pour les développeurs :
Elément canvas : excanvas.js (IE < 9).
Shims - Forcer la reconnaissance des éléments HTML5 pour leur appliquer un style CSS
HTML5shiv (IE)
Fiks.html5 (IE < 9, FF3, …)
Modernizr
HTML5 Boilerplate
Quand passer à HTML5 ? Conclusion
En savoir plus
Spécifications
W3C http://www.w3.org/TR/html5/
WHATWG http://www.whatwg.org/specs/web-apps/current-work
Dates prévues pour la recommandation HTML5 W3C
http://www.w3.org/2007/03/HTML-WG-charter.html
Différences HTML4 / HTML5
http://www.w3.org/TR/html5-diff
Validation de documents HTML5
http://validator.w3.org