Je vous en parlais la semaine dernière et nous y voilà ! Je suis fier de vous présenter le premier article sur le Web français auquel on donne la parole aux experts du Web, et ce, sur le Blog des Nouvelles Technologies. Le premier thème que nous allons aborder est le suivant : HTML5, est-ce le moment de l’adopter ?
Pour répondre à cette question voici nos quatre experts du jour : Matthieu Bué, Raphaël Goetter, Bruno Bichet et Aurelien Garroux.

Au sommaire

• HTML5 c’est quoi ? Où en est-on aujourd’hui ?
• Qu’est ce que l’HTML5 ? Que peut-on en faire exactement ?
• Comment puis-je en profiter dès aujourd’hui ?
• Nos professionnels du Web
• HTML5, est-ce le moment de l’adopter ?
• Unanimement la réponse est Oui
• Est-ce prendre un pari de miser sur l’HTML5 ?
• Des mises en production déjà effectives
• Tout n’est pas si rose, à part si vous misez sur des applications mobiles
• L’avenir est bel et bien l’HTML5
• Conclusion

HTML5 c’est quoi ? Où en est-on aujourd’hui ?

Qu’est ce que l’HTML5 ? Que peut-on en faire exactement ?

Je suis sûr que vous avez entendu le terme « HTML5 » notamment auprès des entreprises comme Apple et Google. HTML5 est l’évolution de l’HTML, ou Hyper Text Markup Language en anglais, qui forme l’épine dorsale de presque tous les sites sur Internet. HTML4, la dernière itération majeure du langage, a débuté en 1997 et a ensuite été remplacé pour qu’il puisse gérer les demandes du Web moderne.

HTML4 a été tweaké, afin d’augmenter sa portée initiale et ainsi apporter un niveau élevé d’interactivité et de multimédia à des sites Web. Des plugins comme Flash, Silverlight et Java ont permis d’ajouter l’intégration des médias sur le Web, mais non sans un certain coût. A la recherche d’une « meilleure expérience utilisateur » et avoir une meilleure autonomie de sa batterie, Apple a tout simplement abandonné le soutien de certains de ces plugins sur ​​ses appareils mobiles, en laissant une grande partie de l’Internet inaccessible sur iPad et iPhone. HTML5 ajoute de nombreuses nouvelles fonctionnalités, et simplifie le traitement, afin de rendre moins gourmandes les ressources processeur. Cela signifie que vous n’aurez pas à vous soucier de l’installation d’un plugin juste pour écouter une chanson incorporée dans un blog ou regarder une vidéo sur YouTube.

Les caractéristiques les plus vantées d’HTML5 sont la lecture multimédia et le stockage hors-ligne. Avec le langage HTML4, les sites devaient passer par Flash (ou Silverlight) pour simplement afficher une vidéo ou jouer de la musique. HTML5 permet d’intégrer directement aux sites des médias avec de simples balises HTML : >video< et >audio<. Aucun plugin n’est nécessaire. L’autre ajout majeur qui a attiré l’attention des médias est la possibilité de stocker des données pour les applications Web hors-ligne. Un des obstacles majeurs est de remplacer les applications bureautiques traditionnelles sur Web et ce, sans avoir une connexion Internet. Google a développé une solution palliative avec Gears, mais ce service a été retiré car l’entreprise se tourne maintenant sur le HTML5. Cela signifie que vous serez capable de créer des fichiers dans Google Docs ou tout simplement écrire des mails sans même avoir une connexion Internet. Ces changements seraient automatiquement synchronisés, dès que vous serez en ligne. HTML5 ajoute également de nouvelles fonctionnalités d’interactivité, comme le glisser-déposer (drag&drop en anglais), qui a déjà trouvé sa place dans l’interface Gmail.

Comment puis-je en profiter dès aujourd’hui ?

Vous êtes déjà très probablement en train d’en profiter sans le savoir. Que ce soit avec Safari, Google Chrome, Firefox et IE, chacun des navigateurs supportent plus ou moins les éléments HTML5. De nombreux services de Google utilisent déjà certaines caractéristiques du protocole de nouvelle génération. Gmail et Google Reader ont adopté certains éléments de la norme. Par ailleurs, tout site énuméré comme étant compatible « iPad », utilise largement l’HTML5.

Bien sûr, Flash n’est pas prêt de disparaître car il est encore largement utilisé et soutenu, notamment concernant les jeux en Flash dont il est difficile de les recréer en Web. Mais il est important de savoir que lorsque vous entendez le terme HTML5 dans une phrase, ils parlent de l’avenir de l’Internet…

Nos professionnels du Web

Pour nous parler du sujet j’ai décidé de faire appel à quatre experts : Matthieu Bué, Raphaël Goetter, Bruno Bichet et Aurelien Garroux. Pourquoi eux me direz-vous ? Pour ce premier volet j’ai voulu donner la parole à des personnes qui pourront apporter leur expertise et des réponses aux différents sujets abordés. Par ailleurs ils n’ont pas été choisis seulement sur ce critère. Qui sont-ils ? Je vais vous les présenter.

Matthieu Bué est un webdesigner depuis 5 ans, expert en SEO (Search Engine Optimization, en anglais). Il est passionné de graphisme et de webdesign, mais aussi de tout ce qui touche de près ou de loin aux nouvelles technologies et au multimédia. De plus, il participe activement au WDfriday. Son implication sur l’HTML5 est multiple, que ce soit sur le partage d’information et l’échange d’avis et de ressources. De plus, il a participé au dossier HTML5 paru sur ZDNet.
Enfin, Matthieu a été la première personne au courant du concept « La parole aux experts » et m’a donné des pistes pour en améliorer son contenu. Je me devais de l’interroger !

Comment parler HTML5 et CSS3 sans en parler avec Raphaël Goetter ? En effet, il était impensable de ne pas l’interviewer concernant ces langages. Pour ceux qui ne le connaissent pas, mais j’en doute, Raphaël est un webdesigner et gérant d’une agence web strasbourgeoise, partageant ses connaissances via son site Alsacreations.com, est passionné d’accessibilité numérique, de bonnes pratiques et de standards Web. Il est également expert et formateur en langages Web HTML et CSS auprès de groupes nationaux et internationaux.
Il a d’ailleurs publié des livres techniques dans ces domaines : CSS avancées – vers HTML5 et CSS3, CSS2 – Pratique du design web, Memento CSS, Memento XHTML.
Voilà… si vous avez la moindre raison de ne pas l’intégrer dans ce billet je ne comprendrais pas 🙂 De plus, je peux vous dire qu’avec les différents échanges que j’ai pu avoir avec, c’est une personne formidable, humble et qui est très loin d’avoir la grosse tête malgré son statut !

La troisième personne qui a souhaité répondre à ma question c’est Bruno Bichet. Bruno est un infographiste depuis 1993, formateur en création de site web depuis 2001 et intégrateur web depuis 2005. Il est passionné par le graphisme, la mise en page, l’ergonomie, les langages du web (HTML, CSS et Javascript), Photoshop, Illustrator, InDesign et WordPress. Bruno est impliqué dans de nombreux blogs : css4design, js4design et wp4design.

Enfin la dernière personne à qui j’ai demandé de répondre c’est Aurelien Garroux. Plus connu sur la toile sous le pseudo « dhoko » et « lecolibrilibre », Aurelien est un développeur Web se droguant au HTML, CSS, PHP, WordPress et jQuery. Sur Twitter, il partage sa veille journalière notamment sur les sujets brûlants tels que l’HTML5 et CSS3.

Comme vous pouvez le constater nos experts ci-dessus correspondent bien aux personnes qui peuvent nous apporter des réponses sur le sujet. Je ne vous fais pas plus attendre, allons voir les réponses.

HTML5, est-ce le moment de l’adopter ?

Unanimement la réponse est Oui

Que ce soit Matthieu, Raphaël, Bruno ou Aurelien, chacun est d’accord pour dire que l’adoption d’HTML5 doit-être faite par tout le monde. Il est non seulement possible mais souhaitable d’utiliser HTML 5 dès maintenant, pour une raison simple : le flux de production de la spécification en cours de rédaction nécessite que les utilisateurs testent tous ces beaux joujoux que l’on voit en rêve en situation réelle, souligne Bruno.

De plus, comme l’indique Raphaël, s’il s’agit simplement de se faciliter la vie, comme Google ou d’autres l’ont fait, en passant par une syntaxe HTML 5 plus élémentaire (doctype court) et plus courte, alors le risque d’incompatibilité est proche de zéro et rien ne vous empêche d’appliquer aujourd’hui ces préceptes en production.

Enfin, Aurelien justifie son choix puisque actuellement la majorité des navigateurs reconnait certaines balises nativement (et font parfois dans le n’importe quoi, comme détails dans Chrome 12) et pour IE on a une solution de secours, on ‘émule’. Globalement en simplifiant le HTML5 c’est d’un côté une sémantique revue et de l’autre des API. La sémantique est plus riche et intéressante qu’en XHTML 1.0, elle permet d’adopter de nouveaux comportements pour plus de pertinence dans la page. On ne révolutionne pas la conception d’une page web, on la rend plus ‘précise’.

En revanche, Matthieu émet une alerte : cela dépend surtout du site et principalement de sa cible. Chacune des balises est plus ou moins bien interprétée par les navigateurs (mobile et desktop), et c’est pour cette raison que l’adoption du HTML5 pour un site dépendra de sa cible : navigateurs récents ou non ?

Est-ce prendre un pari de miser sur l’HTML5 ?

Nos quatre intervenants ont bien insisté sur le fait que parier sur l’HTML5 dès maintenant n’est pas un problème, le risque étant proche de zéro. En revanche, il faudra rester conscient des problèmes de compatibilité qui peuvent survenir. Si l’on sépare les nouveautés qu’apporte le standard HTML5 en 3 catégories de balises : les reach medias (canvas, audio, video), les web forms, et les sémantiques (header, footer, article, nav, aside, etc…), Matthieu nous informe que parmi ces trois catégories, les reach medias sont les plus sensibles à la compatibilité, et on devra prévoir une alternative (JavaScript ou Flash) le cas échéant.

Raphaël vous prévient que si vous souhaitez utiliser les nouveaux éléments sémantiques tels que header, nav, aside, footer… le risque est double : non seulement c’est prendre le pari que vos visiteurs sur Internet Explorer disposent tous de JavaScript, sans quoi les nouveaux éléments ne seront tout simplement pas affichés sur la page ; mais en outre, vous pourriez altérer l’accessibilité ou le référencement de vos documents en optant pour un nouvel élément HTML 5 (dont le sens demeure inconnu des agents utilisateurs) au détriment d’un élément de l’ancienne génération qui a fait ses preuves.

Pour Bruno c’est un problème, certes, mais qui peut être aisément contourné. Dans la pratique, on utilise rarement les balises toutes nues : on les enveloppe généralement avec un « container », pour appliquer des fonds distincts, pour pallier des problèmes de largeurs ou encore des impératifs de « floataison ». Partant de ce constat, il vous livre une technique simple et efficace qu’il utilise au quotidien : la quasi totalité de ses balises issues de la nouvelle sémantique HTML 5 sont enveloppées dans des bonnes vieilles balises div des familles auxquelles il applique les propriétés width, float, etc… Il réserve les padding, etc. aux asides, sections et autres footers. JavaScript n’est ainsi plus indispensable pour que la mise en page tienne le coup en son absence.

Matthieu indique que l’utilisation des balises sémantiques est une réelle avancée, principalement pour le SEO (http://zdnet.fr/39754861), puisqu’elles n’apportent aucun réel changement au niveau de l’affichage, elles peuvent être employées sans crainte. Un simple script JavaScript de quelques lignes permettra de s’assurer de l’interprétation comme type bloc sur les navigateurs anciens.

Aurelien revient sur les web forms. Prenez les formulaires, ils sont vraiment puissants. Mais faites un formulaire sous Chrome, Opera et Firefox. Vous ne remarquez rien ? Si, il y a de nombreuses différences. Pour Opera on a des éléments intéressants et pratiques (comme pour la date et color, je crois bien) pour les autres on a soit : rien ou alors un élément avec une ergonomie toute droite sortie de l’hyperespace. Sur ce sujet Raphaël indique que paradoxalement, cela ne vous empêche pas de les employer dès à présent au sein des documents Web, puisque s’ils ne sont pas compris, ils seront tout simplement traités tels des champs génériques de type text, tout en offrant aux navigateurs les plus avant-gardistes une cerise sur le gâteau.

Des mises en production déjà effectives

Les différentes applications natives (API) ainsi que les éléments audio, video et canvas sont déjà employés en production sur certains sites de référence tels que Google, YouTube ou Dailymotion. Toutefois, pour certaines, leurs spécifications demeurent encore instables et leur implémentation nécessite de nombreuses alternatives hors HTML 5.

Tout n’est pas si rose, à part si vous misez sur des applications mobiles

Sous IE on émule dixit Aurelien. La solution n’est donc pas idéale, cela dit il se souvient d’un carnet de Microsoft qui vante la sémantique du HTML5 avec un script qui émule, donc étant donné qu’ils le font, je me dis pourquoi pas nous. Puis le HTML5 n’est pas ‘relativement stable’ il évolue (ciao hgroup), et reste loin d’être standardisé (on me souffle dans l’oreillette qu’on pourrait penser au CSS2.1…). Puis la syntaxe est certes riche, mais elle est déstabilisante (certaines disparitions du langage, certains changements de sens, des nouvelles balises, une logique… ça change beaucoup).

En parlant rapidement CSS3, là encore, il y a peu de chose que l’on ne peut pas utiliser, à condition de bien connaitre les limites de la prise en charge par les navigateurs des propriétés que vous voulez utiliser, nous indique Bruno. En fonction des projets et des budgets, il est désormais tout à fait possible de proposer des bords arrondis, des dégradés, des ombres portées sur les boites ou les textes, etc. uniquement en CSS3 sans passer par Photoshop, pour diminuer les allers-retours liés à la validation des maquettes, ce qui allège la facture et fluidifie les relations avec les clients 😉

Selon Matthieu, il faudra s’assurer que les balises sémantiques seront interprétées correctement, ou avec une aide JavaScript (attention dans ce cas au temps de chargement qui sera obligatoirement plus important), sur les navigateurs de la masse d’internautes cibles de votre site. Partez du principe que si c’est un site mobile, il n’y aura, a priori, aucun problème puisque les navigateurs sont récents et maintenus à jour. Par contre sur desktop, ça se complique !

L’avenir est bel et bien l’HTML5

En résumé, il s’agit d’éléments extraordinaires à manipuler avec d’extrêmes précautions et au sein d’un cadre parfaitement maîtrisé, souligne Rapahël. Le passage à HTML 5, bien que très tentant et excitant, demeure extrêmement audacieux pour certaines de ses parties les moins abouties. Il vous appartient de juger si ces modules sont pertinents au sein de vos documents Web.

Bruno a un maître-mot à tout ceci : TEST. Quoique vous mettiez en place, prenez le temps de tester vous-même et plus important encore, de faire tester par les autres.

Alors bien sûr, ceux qui viendront à lire ces lignes seront a priori du métier, c’est-à-dire « ceux qui font le web », et nous aspirons tous à cette idée utopique qui est « un web à la pointe, maintenant ». Mais voilà, vous ne pourrez pas passer à côté du client qui veut son site compatible partout et qui le teste sur IE6 (en toute conscience ou non d’ailleurs) ! Je suis, comme certains de mes confrères, un passionné du web qui tend à faire avancer les choses par son travail, finit Matthieu. Tant qu’un site est interprété correctement sur les navigateurs cibles, n’est-ce pas à vous d’imposer son code en HTML5 ? De manière transparente ou non, mais contribuez à son adoption à grande échelle !

En conclusion, Aurelien pense que c’est le moment de l’adopter. Il aime bien le changement, puis le code gagne en sens et lisibilité. Pour les usages mobiles les formulaires ont l’air géniaux ! Avec des initiatives comme schema.org, on a qu’une envie c’est de continuer. Testé et approuvé.

Conclusion

C’est ainsi que s’achève l’interview de nos experts. J’espère sincèrement que cet article vous a intéressé et permis de comprendre le principe de l’HTML5. Il s’agit d’un nouveau concept sur le blog, j’attends donc ainsi toutes remarques de votre part.

L’œil de nos experts nous a permis de savoir si c’était le moment de l’adopter. Au final, on peut répondre unanimement de manière positive. En revanche, il faudra rester vigilent sur l’utilisation de certaines balises de l’HTML5 notamment en ce qui concerne les nouveaux éléments sémantiques. Il ne sera pas nécessaire de migrer vos anciens sites Web car HTML5 est rétrocompatible. Afin de garantir la rétrocompatibilité, un effort peut s’avérer nécessaire comme par exemple cumuler l’utilisation des balises HTML5 et Flash pour afficher une vidéo sur votre site. HTML5 sera particulièrement intéressant dans le monde des applications mobiles. Outre l’amélioration de la réactivité et de l’ergonomie, d’autres arguments sont plus spécifiques, comme le support du mode déconnecté et l’adaptation dynamique des pages à la taille de l’écran.

Voilà de quoi nous donner des pistes pour le futur… Voici une phrase de Raphaël résumant parfaitement la situation : La démocratisation de ce langage facilitera dans un avenir proche l’interopérabilité des documents HTML, mais aussi leur accessibilité universelle, voire leur référencement. Seul hic : nous ne sommes pas encore dans un avenir proche. »

Le but de cet article est basé sur l’échange mutuel d’informations entre vous lecteurs en vous appuyant sur les avis de nos experts. Je vous demanderais donc de venir poser vos questions, interrogations sur le sujet nos experts y répondront. Quel est votre avis sur la question ? Pensez-vous qu’HTML5 doit-être adopté sur vos sites ? Venez en débattre dans la partie commentaires…