alainericgauthier.com

Drupal 7 et HTML5 -- Les modules

Comme j'ai expliqué dans le premier article de cette série, avant même de commencer à créer un thème à partir de rien, je profite de deux modules qui m'évitent plusieurs étapes relativement complexes.

Dans cet article, je vais donc expliquer comment installer, activer et configurer deux modules.

Les deux modules

Le premier module se nomme Elements et il est présentement à la version 1.2. Vous pouvez le télécharger ici. HTML5 contient plusieurs nouveaux éléments et ce module permet à Drupal de les utiliser.

Le second module se nomme HTML5 Tools, il en est présentement à la version 1.1 et on peut le télécharger à partir de ce lien. Ce module permet de contrôler quels aspects particuliers propres è HTML5 seront activés. Par exemple, HTML5 offre maintenant un type d'élément de formulaire qui se nomme email. Ce module permet de remplacer les champs des formulaires de Drupal qui prennent des adresses de courriel avec le nouvel élément.

Installation

Après avoir téléchargé les deux modules, il faut les décompresser et les placer dans sites/all/modules/.

Activation

Pour activer les modules, il faut aller dans la section Modules de l'administration de votre site Drupal, cocher les cases de chacun des deux nouveaux modules et enregistrer la nouvelle configuration.

Configuration

Le module Elements n'a pas d'option de configuration. Pour le module HTML5 Tools, j'ai activé toutes les options sauf le Google Chrome Frame. Je trouve que l'approche choisie par le script de "Chrome Frame" est plutôt intrusive pour les utilisateurs d'Internet Explorer. Ceci dit, que cette option soit activée ou non n'aura aucune incidence sur la suite de cette série.

La source

Si vous allez voir la source d'une page de votre site, vous noterez quelques différences.

Le doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

Très long dans le spécification HTML 4, le doctype devient très court avec HTML5.

<!DOCTYPE html>

Le meta charset

<<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

Cette nouvelle version du meta tag n'est pas vraiment propre à HTML5 mais c'est tout ce que les navigateurs utilisent pour déterminer l'ensemble des caractères d'encodage. Les informations qui ne se trouvent pas dans ce qui suit sont de toutes façons ignorées par les navigateurs.

<meta charset="utf-8">

Les fichiers CSS

<link media="all" href="http://exemple.com/sites/default/files/css/css_5XB5aQOGzDUVxnwtHDXg0AJDjmjZbe2Sh1K2BEkR5cM.css" rel="stylesheet" type="text/css">

Une seule petite modificaiton selon la norme HTML5, la valeur text/css n'est pas nécessaire.

<link media="all" href="http://exemple.com/sites/default/files/css/css_5XB5aQOGzDUVxnwtHDXg0AJDjmjZbe2Sh1K2BEkR5cM.css" rel="stylesheet">

Les scripts

<script src="http://exemple.com/sites/default/files/js/js_HoV11dGZPFawmXjkAgvlTs7lxi0Nyd-JEPDssHq-VCc.js" type="text/javascript">

De la même manière que pour les fichiers CSS, la valeur de l'attribut type n'est pas nécessaire.

<script src="http://exemple.com/sites/default/files/js/js_HoV11dGZPFawmXjkAgvlTs7lxi0Nyd-JEPDssHq-VCc.js">

Conclusion

Il est possible de faire tous ces changements et bien d'autres encore soit en modifiant des fichiers tpl.php ou encore en insérant des fonction PHP dans le fichier template.php. Par contre, ces deux modules m'ont évité beaucoup de travail.

Dans le prochain article, je décrirai la première étape pour créer un thème à partir de rien.

Vous voulez en apprendre encore plus?

Obtenez le guide Comment créer un thème sous Drupal 7 maintenant.

Je veux ce guide.