Tantek Çelik
Pourquoi HTML5 ?
Pourquoi HTML5 ?
- "Pourquoi le monde du web est obsédé avec html5 ?"
“Nous misons gros sur HTML 5.”
— Vic Gundotra, Google“Le monde migre vers HTML5.”
— Steve Jobs, Apple“L'avenir du web est HTML5.”
— Dean Hachamovitch, Microsoft
HTML5Rocks.com
apple.com/html5
ie.microsoft.com/testdrive/
Par exemple
Qu'est ce que HTML5 ?
- Mise à jour pratique pour HTML4/XHTML
- Nouvelles Capacités des Formulaires
- Multimédia Natif
- Coeur de la Plateforme des Apps du Web Ouvert
Quel HTML5 puis-je utiliser ?
Les Parties du HTML5 sont :
- désormais fiables
- à peu près utilisables
- malheureusement peu commodes
- intéressantes mais ignorées
- valables pour des expériences d'applications web
HTML5 Fiable
HTML5 Fiable : DOCTYPE
- Vieil héritage du DOCTYPE SGML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> - Nouveau DOCTYPE
<!DOCTYPE html>
HTML5 Fiable : meta charset
- Vieux meta charset http-equiv
<meta http-equiv="content-type" content="text/html; charset=utf-8"> - Un meta charset plus simple
<meta charset="utf-8">
Votre Premier Document HTML5
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> World Wide Web </p>- Voilà c'est fait !
- Qu'en est-il des balises
<html> <head> <body>?
Fiable : compatibilité XHTML
- Balises HTML4 fermées, par ex :
<br/> <embed/> <hr/> <img/> <input/> <link/> <meta/>
- Toujours utiliser des valeurs d'attributs entre guillemets
<img src=photo1.jpg>→<img src="photo1.jpg"/>
- Balises explicites pour un DOM cohérent
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ... </title> </head> <body> ... </body> </html><table> <tbody> <tr> <td> ... </td> </tr> </tbody> </table>
Fiabilité HTML5 : raffiné, restauré
- raffiné :
<em> <strong> - mis à jour :
<b> <i> <br> <hr> <small> - restauré :
<iframe> target <li value> start - reconnu :
<embed>
Fiabilité HTML5 : Nouvelle Sémantique
<section>- groupage thématique de contenus<header>- intro/nav/en-têtes<nav>- liens de navigation<footer>- info concernant la section, l'auteur et le copyright
Fiabilité HTML5 : Nouvelle Sémantique
<article>- post auto-contenu, news, commentaire- aussi un type spécial de
<section>
- aussi un type spécial de
<aside>- contenu digressif, commentaires à part<hgroup>- titres multi-niveaux en rapport
Fiabilité HTML5 : Blindé
- Nouvelles balises stylisables dans tous les navigateurs modernes...
- exception faite d'Internet Explorer 8 et versions précédentes
- Bulletproof Web Design par Dan Cederholm
- Bulletproof AJAX par Jeremy Keith
- Présentation d'une technique HTML5 blindée :
- Utiliser une div embarquée avec le nom de classe sémantique, c.a.d. :
<article><div class="article">...</div><article>....article { /* style de l'article ici */ }
- Utiliser une div embarquée avec le nom de classe sémantique, c.a.d. :
Fiabilité HTML5 : Blindage
- Ajouter plus de classes (microformats) aux div embarquées :
<article><div class="article hentry">...</div><article> - Quelques nouvelles balises ne permettent pas les div embarquées
- Utiliser une div conteneur dans ces cas là :
<div class="hgroup">
<hgroup>...</hgroup></div>
Fiabilité HTML5 : audio & video
<audio src></audio>- comme img pour le son<video src></video>- alternative aux plugins- bon nombre de sites utilisent aujourd'hui HTML5
Fiabilité HTML5 : formats vidéo
- Safari et IE9 supportent H.264
- Chrome, Firefox, Opera supportent Ogg
- Chrome, Firefox, Opera supportent aussi VP8
- Soutenez le Projet WebBM
Fiabilité HTML5 : sources, retrait
<source src>- publie H.264 et Ogg (ou VP8)<contrôles vidéo> <source src="http://exemple.com/vid.mp4"> <source src="http://exemple.com/vid.ogv"> <embed src="http://exemple.com/vid.swf"> </video>- Les navigateurs utilisent le premier format qu'ils savent gérer
- Utiliser
<object>en recul et/ou<embed>
Fiabilité HTML5 : Validation
- Nouveau validateur : validator.nu
- Utilisez le nouveau favelet validateur (de favelets.com)
- Le validateur W3C supporte aussi désormais HTML5
- Vérifiez que toutes vos modifications sont encore valides
- Faites toutes les réparations nécessaires et revalidez
HTML5 à peu près Utilisable
HTML5 à peu près Utilisable : Canvas
<canvas>- dessiner avec javascript
HTML5 à peu près Utilisable : Canvas
- Support par les navigateurs modernes (à part IE8 et en dessous)
- Requiert un bon design pour le contenu en retrait
- Techniques d'accessibilité toujours en cours de développement
- Recommandation :
- à cette heure, à réserver pour images décoratives et expériences
HTML5 malheureusement peu commode
HTML5 peu commode : nouvelles entrées de formulaires
HTML5 peu commode : saisie dates horaires
HTML5 peu commode : nouvelles entrées de formulaires
- Support partiel de nouvelles entrées
- Essayez-les Opera pour se faire une idée
- Comportements étranges
- Restylisation non définie
- Ok sur le comportement de la boîte de texte
- Note : Changements de l'IU de la page non prévisibles
HTML5 peu commode : meter, progress
<meter> <input type="range"> <progress>- Progression récente Safari :
- Peu clair de savoir comment styliser, personnaliser
HTML5 peu commode : fonctionnalités travaillabes
- Quelques fonctionnés de formulaires prometteuses :
<input type="search">autofocusattribut - au-dessus du chargement de pageplaceholderattribut - suggestionsrequiredattribut - pour proposition de formulaire
Digne pour les Expérimentations de Web App
Expérimentations d'Applications Web
- Specs de création API — pas tout à fait prêt "à cette heure"
- Support minimal ou pour navigateur expérimental uniquement
Les Expérimentations de Web App sont des Drafts
- Toutes des "working drafts"
Les implémenteurs devraient être conscients que cette spécification n'est pas stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways.
- Toutes ces APIs Web pourraient changer.
- Si vous voulez compter sur elles, vous devez les soutenir
Plus sur HTML5
- Résumé des specs : HTML : Le Langage de Marquage
- Livres etc.
- APF : HTML5 Now - pré-commande : http://ttk.me/h5
- Introducing HTML5
- HTML5 For Web Designers
Aidez le HTML5 à Evoluer
Avis : Qu'est ce que HTML5 ?
- Mise à jour pratique pour HTML4/XHTML
- Nouvelles Capacités des Formulaires
- Multimédia Natif
- Coeur de la Plateforme des Apps du Web Ouvert
CSS3 : Travail en Cours
Etude de cas : S5 - Mise à jour
S5
- Simple
- Basé sur les standards
- Slide-
- Show
- Système
S5
- dias 2003 SXSW HTML+CSS+JS
- Eric Meyer l'a transformé en un modèle de slide
- Quelques mises à jour de marquage + style
- Vous en êtes imprégné
S5
- HTML5 :
<hgroup> <footer> - CSS3 :
.incremental {opacity: 0;} .incremental,.current {-webkit-transition: opacity .5s linear;}
S5
- microformats : hCalendar hCard XOXO
- Pour une sémantique riche + moteurs de recherches
- Firefox : Operator
- Chrome : Michromeformats