Voici un compte-rendu de la présentation HTML5 de Peter Lubbers de la société Kaazing. Il était invité par Zenika à présenter les grands principes de HTML5.
Dans toute l'assistance de 30 personnes environ, seulement une personne a déclaré être en train d'utiliser réellement HTML5 pour un projet ! Au moins, nous n'étions pas là bas pour rien ce soir.
La société Kaazing dont il est employé est spécialisée dans les web sockets pour l'entreprise, c'est-à-dire fournir des serveurs et des logiciels adaptés pour la diffusion d'informations en masse à travers internet. Peter est quant à lui le co-fondateur du San Francisco HTML5 User Group depuis quelques mois dont le nombre d'adhérents à atteint 500 personnes, ce qui montre l'intérêt pour le sujet en Californie.
HTML5 a au moins un premier mérite, c'est de mettre d'accord des sociétés qui ne le sont jamais ! Apple, Google, Microsoft ou la Fondation Mozilla, toutes ces sociétés soutiennent activement la spécification HTML5 !
Histoire de HTML et origine de HTML5
Un rapide point de vue historique pour commencer:
A propos de la date de 2022, ne vous inquiétez pas, 80 à 90% de la spécification est dorénavant déjà implémentée dans les navigateurs !
La principale différence entre HTML5 et une simple nouvelle version de HTML est le contrôle très poussé que la page web peut obtenir avec le navigateur à travers CSS et surtout Javascript. HTML5 ajoute de nombreuses API qui permettent de pousser l'application web encore plus loin.
Derrière cette spécification, on trouve le groupe de travail à l'origine de la spécification, le WHATWG, puis le W3C et l' IETF (plus centré protocole) ont rejoint le mouvement. Le WHATWG s'est constitué avec des membres qui développent des navigateurs pour contrer la direction trop puriste prise à l'époque par le W3C.
HTML5 est en fait l'union de plusieurs sous spécifications: WebSocket, Geolocation, Local Storage, etc. Peter nous a expliqué que ça permettait aux participants d'être spécialisés par sujet.
Les principes de conception
Voilà les principes qui guident la spécification:
#1 Compatibilité
Les auteurs sont restés pragmatiques sur le sujet. Ils ont souhaité garder un maximum de compatibilité avec la masse gigantesque de pages internet existantes.
#2 Utilité
Sécurisé, utilisable, erreurs non bloquantes (un fragment de la page ne devrait pas briser toute la page), séparation entre le contenu et la mise en forme
#3 Interopérabilité
Un effort de simplification se cache derrière ce concept. Par exemple, on va chercher à proposer des implémentations natives dans les navigateurs plutôt que de proposer des plugins pour chaque besoin. La plupart des API se veulent simples à utiliser. Peter nous a montré ici la simplification à l'oeuvre dans les entêtes des pages HTML5 :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />
Mais cette simplicité ne veut pas dire ambiguïté, on se souvient tous de l'époque où chaque navigateur interprétait différemment le contenu et la mise en forme. Un effort dans HTML5 est porté sur la non ambiguïté des spécifications.
#4 Accès universel
Cette idée recouvre l'internationalisation et l'accessibilité en fournissant des règles sur les contenus pour les rendre interprétables par d'autres dispositifs qu'un navigateur web sur un écran.
“Plug-in Free”
Peter a voulu insister sur ce point (on voit bien ici que ce sont des éditeurs de navigateurs qui sont majoritairement derrière la spécification, ndla). Par exemple, si on a une page dans lequel un contenu est rendu par un plug-in, le reste de la page ne va pas pouvoir interagir avec ce contenu “piégé” dans le contexte d'exécution du plug-in. Pour illustrer son propos, il nous a propose une démo avec Adobe Flash, il est donc passé au slide suivant et là, paf, écran bleu Windows sur le projecteur - on y a cru 3 secondes ;-) En tous cas, le propos est illustré. Les navigateurs veulent contrôler leur stabilité et ne plus dépendre de plug-in hors de leur contrôle.
Anatomie de HTML5
De nouveau tags apparaissent (section, header, aside, etc.), d'autres sont dépréciés. C'est le cas par exemple de l'élément basefont qui est clairement de la mise en forme. HTML5 ne fait que déprécier car il doit se conformer au principe #1 de compatibilité, vous suivez toujours ?
Comme Peter, je relaye le lien vers la très utile “HTML5 Cheat Sheet” pour visualiser les nouveaux et les anciens éléments.
Pour HTML5, une page dessert un objectif différent d'une autre et n'a donc pas a adopté le même squelette. Peter nous a tout de même montré un exemple classique comparé à sa version HTML4. Voilà un exemple équivalent:
- HTML 4 : blog-original.html
- HTML5 : blog-html5.html
Pour faire du HTML5 dès maintenant, alors que la spécification n'est pas finalisée, il existe des astuces. Par exemple,
pour s'adresser en CSS3 à certains navigateurs en particulier, on utilise des attributs spécialisés (-moz... ou
-webkit...) en fonction des fonctionnalités implémentées. L'autre astuce pour IE est d'inclure le script html5.js
fournit par un projet google code. Ce script transforme un document HTML5 en
fonction de l'implémentation actuelle du navigateur.
Je poursuivrai ce compte-rendu avec les innovations des Forms et un aperçu des principales nouvelles APIs qui ont été présentées par Peter.
La photo est une version en surpeinture de l'image originale: la photo du profil LinkedIn de Peter.