Aide
Origine du site
Ce site à été créé pour répondre à un projet de Didier COURTAUD,
professeur de multimédia à l'université d'Évry Val d'Essonne
et chercheur au CEA.
Contributeurs
Initié en 2009 par Frédéric MADSEN
et Aykut ACIKEL,
étudiants en M2 MIAGE
(rapport du projet),
le site a bénéficié en 2010 de la contribution de Maël BERNERO, étudiant en M2 ASR.
De nombreuses suggestions/remarques ont été reçues, tant sur le fond que sur la forme,
permettant d'améliorer ce site.
En 2011, Jean-Pierre VINCENT propose d'héberger le site
avec son blog BrainCracking.org.
En 2014 il sort la 2ème édition de
"HTML5 : De la page web à l'application web"
avec Jonathan Verrecchia, où il cite
html5demo.braincracking.org
But du site
Le but du site est d'illustrer les fonctionnalités HTML5
par des exemples simples et démonstratifs,
permettant immédiatement de déterminer si le navigateur utilisé supporte cette fonctionnalité.
À ce titre, les 4 principaux navigateurs, Chrome, Firefox, Internet Explorer et Opera sont étudiés sous Windows 7
(d'où de légers écarts possibles avec d'autres plates-formes),
dans leurs versions stable (RC), bêta et développement (alpha).
Safari n'étant plus porté sur Windows après la version 5.1.7, l'étude du support est arrêté.
Informations pour faire coexister la version de développement de Chrome avec les autres versions.
Détection automatique
Il existe des méthodes de détection automatique du support des navigateurs,
mais elles ne sont pas fiable à 100% (elles comportent des faux positifs et quelques faux négatifs)
et rien ne remplace une démonstration live
qui a l'avantage d'être didactique et de présenter les subtilités de support entre différents navigateurs.
Néanmoins, j'ai ajouté, quand cela était possible, une détection automatique
par l'utilisation d'une librairie JavaScript maison.
Validation HTML5
Les validateurs, et notamment celui du W3C, prennent en compte HTML5.
Une note accompagne cependant la validation, rappelant qu'HTML5 n'est pas encore finalisé :
- Using experimental feature: HTML5 Conformance Checker.
- The details element is not supported properly by browsers yet. It would probably be better to wait for implementations.
- The time input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.
Organisation du site
Page d'accueil :
- Tableau de compatibilité permettant d'avoir une vue d'ensemble sur les fonctionnalités HTML5 et sur leur support par différents navigateurs.
- Chaque ligne de la matrice redirige vers une page de démonstration spécifique pour cette fonctionnalité et donne la date de mise à jour de cette page.
- Les logos de navigateurs permettent de filtrer la liste des fonctionnalités (ET logique).
- Les numéros de versions des navigateurs sont des liens de téléchargement, présentés en italique lorsqu'une version plus récente existe.
- Les numéros de versions des navigateurs étudiés sont indiquées pour chaque fonctionnalité HTML5.
- Les pourcentages de support des navigateurs, ainsi que les pourcentages de support des fonctionnalités sont indiqués.
- Les numéros des dernières versions de chaque navigateur sont mises à jour quotidiennement et automatiquement dans un tableau en bas de page.
- Une liste de liens utiles pour approfondir le sujet sont disponibles, aussi en bas de page.
Pages de fonctionnalités :
- En-tête :
- Rappel graphique du support par les navigateurs avec lien sur Can I Use, suivit du nom de la fonctionnalité.
- Menu de navigation pour parcourir l'ensemble des fonctionnalités.
- Date de mise à jour de la page (HTML5 étant en cours de spécification, certaines fonctionnalités peuvent évoluer ou être obsolètes).
- Corps de page :
- Court paragraphe d'explication.
- Len sur la spécification en cours, suivi d'un résumé des éléments techniques essentiels.
- D'éventuelles notes de moindres importances.
- Exemple de code concis (vert=OK, rouge=KO).
- Suivit immédiatement par la démonstration de ce code.
- Puis par la détection automatique via une librairie JavaScript maison.
- Et enfin, par un récapitulatif complet du support par les navigateurs, emprunté à Can I Use ?
- Navigation :
- En pied de page on retrouve un menu de navigation identique à celui de l'en-tête pour éviter de remonter en haut de page.
- Les raccourcis clavier (flèches du pavé numérique et touche [Échap] et [Entrée]) permettent, ainsi que les tabulations, de naviguer plus rapidement parmi les fonctionnalités HTML5.
Pied de page :
- Rappel du navigateur courant et de sa version, suivi d'une mention indiquant si cette version est à jour.
- Logo attestant et permettant de vérifier la validité HTML5.
- Bouton pour faire apparaître le code source de la page.