Utilisation de l'HTML5 dans Drupal

Soumis par Maxime le mer, 09/11/2011 - 15:31
Utilisation de l'HTML5 dans Drupal

Dans cette cet article, nous allons voir ensemble à travers un thème Drupal comment composer une structure HTML5, quels sont les principaux templates PHP à utiliser, les solutions pour gérer la compatibilité cross-browser et lister quelques modules qui vous aideront à intégrer ce standard.

L’exemple utilisé pour cet article se repose sur le thème BigDaddy (http://drupal.org/project/bigdaddy) récemment mis à jour avec une version HTML5 et compatible désormais avec Drupal 7. L’URL du site de démonstration est accessible ici : http://bigdaddy7.maximerabot.com/.

BigDaddy est un thème très léger, disposant d’une structure claire et bien documentée. Il convient parfaitement à tout intégrateur Drupal souhaitant maitriser le code de son thème et y ajouter uniquement ce dont il a besoin. Il permet par le suite de travailler aisément avec l’API Drupal et d’être apte à répondre très rapidement à n’importe quelle besoin.

Ce n’est donc pas un thème de base (“base theme” en anglais), c’est-à-dire un thème sur le lequel vous allez baser le votre en créant un sous-thème lier à celui ci, mais un thème offrant une excellente base de départ vous permettant par la suite de le modifier et de le customiser directement à la source pour l’adapter à votre projet. L’intérêt étant de mieux contrôler votre environnement de travail et ainsi d’augmenter vos performances d’affichage.

Structure de BigDaddy

Figure 1 - Structure de BigDaddy

Sans trop entrer dans les détails et ainsi commencer rapidement notre utilisation d’HTML5 sous Drupal, ce qu’il faut retenir c’est que votre rendu HTML est géré principalement via 2 types de fichiers :

- les templates tpl.php de vos éléments de pages (utilisés pour la génération des pages, des blocs, des noeuds ou des menus par exemple). Vous trouverez ici une liste plus exhaustive des templates disponibles sous Drupal 7 : http://api.drupal.org/api/search/7/.tpl.php

- le fichier template.php. C’est un fichier que l’on pourrait désigner comme pouvant filtrer le code HTML avant son rendu final sur vos pages. Il a pour but d’écraser, de réécrire, de modifier certains éléments (notamment ceux générés par les modules utilisés dans votre installation) avant d’être rendu sur votre site. Vous, en tant qu'intégrateur Drupal avez en quelque sorte le contrôle absolu et la grande responsabilité via ce fichier sur le rendu HTML de votre site.
Il permet également de modifier des variables présentes dans les templates de page pour par exemple créer des classes CSS contextuelles (exemple : ajouter une classe node-type-news si le type de contenu est une news). Mais il peut également servir à définir une balise HTML5 telle que <SECTION> ou <NAV> en fonction du type de bloc que vous avez ajouté sur votre page (cette fonction a d’ailleurs été crée dans ce thème).

Principaux templates à utiliser

Nous allons nous concentrer sur 4 templates pour expliquer où sont placés nos balises HTML5. Pour bien comprendre le fonctionnement d’un thème sous Drupal, il est important de connaître la hiérarchisation de ses fichiers. Voila graphiquement comment sont liés ces 4 fichiers (voir figure ci-dessous).

Figure 2 - Hiérarchisation des fichiers sous Drupal

- HTML.TPL.PHP
C’est ici que vous allez définir le doctype de votre document, en l’occurrence
<!DOCTYPE html> si vous souhaitez un document HTML5. La balise <HEAD> ainsi que <BODY> y sont également présent. Vous avez également la possibilité d’y ajouter des balises <META> ou certaines conditions CSS (pour IE par exemple) bien que cela également possible en passant par le fichier template.php. Dans ce cas, il vous faudra passer par l'API Drupal pour trouver les bonnes fonctions vous permettant de faire cela.

- PAGE.TPL.PHP
C’est ici que vous définissez les principales zones de votre site (example : header, contenu principal, colonne de gauche, colonne de droite, footer), mais surtout, c’est ici que vous allez spécifier vos principales balises HTML5 en fonction de leur contexte. N’oublions pas que les balises HTML5 ne se définissent pas en fonction de leur emplacement, mais bien en fonction de leur contenu et de leur relation avec les autres éléments de la page. Dans cet exemple, certains éléments prédéfinis risquent de rester tel quel dans votre projet, mais il se peut que certaines balises ne soit pas en adéquation avec les informations de votre site.

Un excellent moyen pour bien choisir votre balisage HTML5 se trouve dans le document suivant : http://html5doctor.com/wp-content/uploads/HTML5Doctor-sectioning-flowchart.pdf

- NODE.TPL.PHP
Ce fichier est utilisé lors de la création de nouveaux contenus. La balise utilisée ici est <ARTICLE>, puisque cette partie constitue le contenu principal de votre site. Il devrait à priori être compréhensible sans tenir compte du contexte et servira par exemple à être partagé via les principales sites communautaires.

- BLOCK.TPL.PHP
Ce fichier est utilisé lors de l’ajout d’un nouveau contenu de type bloc. On pourrait définir un bloc comme étant un mini-contenu affiché en général dans les colonnes adjacentes de votre contenu principal. Dans ce thème, il y a 2 cas possibles : soit nous avons un bloc de navigation, dans ce cas nous lui attribuons la balise <NAV>, soit nous avons un bloc de texte simple, dans ce cas nous lui attribuons la balise <SECTION> (<ARTICLE> pourrait également convenir, tout dépend encore une fois du contexte).
Pour gérer ces 2 cas, une fonction a été ajouté dans le fichier template.php (ligne 71).

Sous Drupal 6

Si vous êtes sous Drupal 6, il n’y que très peu de différence dans la structure des templates. Ce qu’il faut surtout noter c’est le fait que Drupal 7 ajoute un fichier supplémentaire pour la génération des pages. Sur Drupal 6, page.tpl.php est le conteneur principal (le master template en quelque sorte), alors que sous la version 7, le master template est divisé en 2 parties : html.tpl.php inclue le <DOCTYPE> + le <HEAD> + le <BODY> dans lequel on retrouve une variable $page. Cette même variable est représentée par le template page.tpl.php dans lequel vous retrouvez uniquement le contenu placé entre les balises <BODY>. Pour voir toutes les différences un peu plus en détails : http://drupal.org/node/254940.

WAI ARIA

La spécification WAI ARIA est principalement utilisée par les technologie assistées comme les lecteurs d'écran par exemple. Pour permettre un accès assisté, le principal attribut à utiliser dans votre code est role dont voici la liste complète : http://www.w3.org/TR/wai-aria/roles#role_definitions

Celui-ci a été inséré à différents endroits du template page.tpl.php. Quelques explications :
- banner : c’est le contenu à propos du site contenant en général votre logo et/ou le nom du site.
- main : c’est la partie englobant le contenu principal de votre site.
- complementary : c’est le contenu secondaire de votre site, souvent présent dans les colonnes latérales et présent sur chaque page de votre site.
- contentinfo : représenté en général par le footer de votre site avec le copyright, les mentions légales et d’autres liens du même type.

COMPATIBILITE

Pour assurer une compatibilité cross-browser (pour les anciennes version d’IE principalement), il vous suffit d’ajouter une seule ligne de code dans l’en-tête de votre document.

Dans la section <HEAD> du document html.tpl.php se trouve la ligne :

<!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Ce document a été conçu pour permettre de reconnaître les éléments HTML5 sur les anciens navigateurs et de pouvoir les utiliser dans votre DOM (pour vos CSS ou Javascripts par exemple).

Conclusion

La conversion du thème est comme nous l'avons vu très simple et très rapide (voir figure ci-dessous pour un résumé graphique). Malheureusement, cela ne permet pas encore de profiter pleinement des fonctionnalités de ce standard. Chaque module que vous ajoutez et installez sont pour la plus grande partie formatés pour du XHTML. Comme expliqué dans la première partie de ce chapitre, tous vos éléments HTML peuvent être réécris via votre thème, mais ceci peut très vite devenir laborieux. Nous allons voir dans le chapitre suivant quels modules déjà développés ou en cours de développement vous permettront d'accélérer l'intégration d'HTML5 dans Drupal.

Combinaison des templates + éléments HTML5

MODULES HTML5

Il existe aujourd’hui quelques modules bien utiles qui vous aideront à intégrer au maximum HTML5 dans votre projet et ainsi profiter pleinement de ses fonctionnalités :

  • 1. HTML5 Tools : http://drupal.org/project/html5_tools

    Même si vous modifiez vos templates comme nous l’avons vu précédemment, une quantité assez importante de code (généré entre autre par les modules que vous allez installer) doit être rendu au format HTML5. C’est dans ce sens que le module HTML5 Tools a été conçu : vous aider à maintenir facilement votre site avec les nouveau standards HTML5. Quelques exemples :
    - simplifie vos balises <SCRIPT> et <STYLE> en supprimant l’attribut type.
    - modifie les éléments de votre formulaire. Jeter un oeil sur la page http://bigdaddy7.maximerabot.com/user/register : le champ E-mail address a désormais l’attribut type=”email”. Si la valeur que vous avez tapé est incorrecte, un warning s’affiche sous forme d’infobulle sous le champ. C’est l’une des fonctionnalités d’HTML5 (plus de vérification PHP ou Javascript).

    Cependant, ce module ne gère que les modules Core de votre installation. Il faudra espérer dans les versions futures que le module fonctionne également avec les modules comme Webform (http://drupal.org/project/webform) pour convertir l’ensemble de vos champs en HTML5.

    Le module Elements (qui doit être installé avec HTML5 Tools) est en quelque sorte une librairie listant l’ensemble des nouveaux éléments ou éléments complexes non compris dans votre installation (comme les nouveaux types de champs HTML5 : email, search, tel, url).

  • 2. VIDEO : http://drupal.org/project/video

    Ce module vous permet d’uploader des fichiers vidéo de n’importe quel format sur votre serveur et de les transcoder automatiquement en H264, Theora ou VP8.

    Après avoir correctement configuré votre module (type de lecteur, qualité, dimension, etc), ajoutez un champ CCK de type video à votre type de contenu, puis ajoutez y les dernières configurations. Et le tour est joué !

  • 3. VIDEOJS (HTML5 Video Player) : http://drupal.org/project/videojs

    VideoJS est lecteur video HTML5 qui pourrait compléter le module précèdent. Il se divise en 3 parties : le code intégré, une librairie JS et un habillage 100% HTML/CSS. Ces 3 éléments permettent de profiter pleinement des fonctionnalités HTML5 (qui est la lecture instantanée d'une video sans installation d'un plugin, très utile pour une lecture sur mobile) tout en le rendant compatible à travers tous les navigateurs. Voici le site officiel avec des démonstrations : http://videojs.com/.

  • 4. PLUPLOAD INTEGRATION : http://drupal.org/project/plupload

    Plupload est un gestionnaire de chargement de fichiers codé par l’équipe de TinyMCE. Vous allez grâce à ce programme javascript, pouvoir intégrer à vos sites web un gestionnaire pratique afin d’implémenter de la gestion multiple de fichiers. Il est possible d’utiliser plusieurs technologies en fonction de celles disponibles sur le navigateur, dont HTML5 bien évidemment. Voici le site officiel avec quelques démonstrations : http://www.plupload.com/.

  • 5. HTML5 Application Cache : http://drupal.org/project/appcache

    HTML5 Application Cache offre des fonctionnalités offline pour votre site. Le principe est de fournir à vos visiteurs une version cache (créee lorsque ce même visiteur à visiter votre site online) de vos pages, ne nécessitant pas de connexion Internet. Pour plus de détail : http://html5doctor.com/go-offline-with-application-cache/.
    Attention : ce module n’est pas encore disponible en téléchargement, mais activement en développement (à la date du 10/2011).

HTML5 demain avec DRUPAL

HTML5 Drupal Working Group : http://groups.drupal.org/html5
Ce groupe de discussion a été crée pour permettre à la communauté Drupal de partager ses idées, de contribuer et d'échanger autour de l’utilisation d’HTML5 dans Drupal. N'hésitez pas vous aussi à participer et à ajouter vos commentaires.
→ Pour suivre ce groupe sur Twitter abonnez-vous à @drupalhtml5

Drupal Initiatives : http://groups.drupal.org/drupal-initiatives
HTML5 est également l'une des 5 initiatives pour le développement de la version 8 de Drupal. Toutes les informations nécessaires se trouvent içi : http://groups.drupal.org/html5/drupal-8.
→ Pour suivre ce groupe sur Twitter abonnez-vous à @drupal8html5

Sources : 
Jen Simmons sur le thème d'HTML5 sous Drupal
Article de Dries Buytaert
Drupal Initiatives
Groupe de discussion HTML5

Poster un nouveau commentaire

Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement.

Plus d'informations sur les options de formatage