Je vous propose aujourd'hui de faire un tour d'horizon d'HTML5 Boilerplate.

Késako?

HTML5 Boilerplate est un ensemble de fichiers HTML/CSS/JS qu'un développeur front-end peut utiliser pour commencer un site/appli web. Voyez le comme un template hyper-solide, pour un site rapide, robuste et prêt à évoluer. Lorsque l'initiative fut annoncé et mis à disposition début août, j'y ai tout de suite vu un grand intérêt et me suis récement plongé plus en avant avec la création de ce blog et le thème wordpress conçu pour l'occasion. HTML5 Boilerplate représente le travail de plus de deux ans de développement, vous pourrez y trouver le meilleur des bonnes pratiques front-end:

• Compatibilité cross-browser (IE6 inclus)
• Optimisation des performances.
• Fonctionnalités cross-domain Ajax et Flax.
• Configuration apache avec fichier .htacess (configuration disponible également pour serveur nginx, IIS et lighttpd) pour configuration du cache aux petits oignons et préparer votre site à servir des vidéos HTML5.
• Optimisations navigateurs mobiles
• Profiling
• Et j'en passe...

Pour finir sur cette courte introduction, l'auteur du projet n'est autre que Paul Irish, entre autre membre de la team jQuery.

Définitivement, Il y a vraiment plein de bonnes choses dans ce projet HTML5 Boilerplate. Je vous propose ici d'y jeter un coup d'oeil et de faire un tour ensemble de ses fonctionnalités. Les deux références qui me serviront de fil rouge tout le long de cet article sont: Guide officiel de Paul Irish sous forme de screencast publié sur Nettuts et le wiki github du projet.

Voici le screencast publié sur Nettuts:

Pour commencer

https://github.com/paulirish/html5-boilerplate/wiki/Get-Started!

Aprés avoir télécharger le fichier zip du projet en cliquant sur le bouton "Download" (Via le site du projet ou github), vous voudrez peut-être jeter un oeil à chacun des fichiers présents:

HTML

• Si vous utilisez un système de templates, vous aurez sûrement besoin d'y intégrer à votre système. (template principale index.html)
• Vous pouvez rapidement voir une petite démo avec demo/elements.html.
• La classe à utiliser avec les images background au format png est .png_bg. Vous pouvez toujours changer la classe utiisée en prenant soin de modifier DD_belatedPNG.fix('img, .png_bg'); avec la valeur que vous voulez utiliser.
• HTML5 Boilerplate vous permet de facilement "profiler" votre code par l'utilisation des profiler YUI. Dans un environnement de prod. vous devrez enlever le lien vers ces scripts. Sur ce thème, je me suis contenté de les placer en commentaire, mais c'est définitivement pas la meilleur des choses à faire. Si vous êtes à l'aise avec la ligne de commande, vous pouvez considérer essayer le script de build (intégré dans la dernière version).
• Si vous vous posez des questions sur l'utilité des ?v=2, une explication détaillée se trouve ici. Fondamentalement, il s'agit d'une technique utilisée conjointement avec une gestion du cache utilisant des Expires Header (Entête d'expiration stipulant au navigateur quand doit-il re-demander une version d'un fichier au serveur, ou utiliser le fichier stocké en cache) placé très loin dans le futur. Il s'agit "d'artificiellement" changer le nom du fichier demandé au serveur par l'ajout d'une petite query string de la forme ?v=1, ?v=2 etc. Cette technique est appellée Cachebusting (Contournement du cache).

CSS

• Vous devrez (bien qu'absolument pas obligatoire) placer tous les styles dont vous avez besoin à l'intérieur du fichier style.css, juste après le commentaire qui commence par "Primary Styles". Si vous vous trouvez dans un projet de plus grosse envergure, il deviendra intéressant de splitter (séparer) vos régles dans de multiples fichiers. Dans ce cas, la présence d'un processus de build est quasi automatique, la concaténation des fichiers JS / CSS et leur minification se ferait à ce niveau.

JS

• Considérez placer le code JS relatif aux plugins / widgets que vous utilisez dans le fichier plugin.js dans le répertoire js/
• Si vous utilisez une bibliothèque tierce, considérez placer ces fichiers sous le répertoire "mylibs".
• Utilisez le fichier script.js pour placer tout script que vous utilisez pour importer tout plugins ou outil tiers. De cette façon, ce sera placé en cache et ne nécessitera pas d'ajout dans le chargement initial de la page.

Configuration coté-serveur

Vous pouvez héberger vos fichiers sur les serveurs Apache, IIS, nginx ou lighttpd. Boilerplate dispose de fichiers de configurations pour chacun de ces serveurs (.htaccess pour Apache, web.config pour IIS, nginx.conf & mime.types pour nginx, lighttpd.conf pour lighttpd).

Si vous vous y connaissez en configuration de ces serveurs et comprenez ce que contient chacun de ces fichiers, prenez la liberté de vérifier leur configuration et adapter selon vos propres besoins.

• web.config - intro and how to use settings inside web.config to improve IIS server performance
• .htaccess - intro and how to use settings inside .htaccess to improve Apache server performance
• nginx.conf - intro and how to use settings inside nginx.conf to improve nginx server performance
• Version Control with Cachebusting - intro and how to use ?v=1

Divers

• Un favicon est fourni avec Boilerplate mais vous aurez sûrement à shouhait de le changer par le favicon de votre choix (fichier favicon.ico à placer à la racine de votre arborescence).
• Vous devrez sans doute faire la même chose pour le fichier apple-touch-icon.png (si vous vous souciez des terminaux mobile Apple).
• Modifier le fichier 404 (ou le laisser tel quel ;) )
• Le fichier robots.txt vous permet de configurer les pages que vous ne voulez pas voir indexées par les moteurs de recherche.

Markup

https://github.com/paulirish/html5-boilerplate/wiki/The-markup

Classes CSS IE spécifique sur le tag html

Vous pourrez voir une série de "if" autour du tag html (body dans la version de ce site) qui applique une classe différente en fonction du navigateur, plus spécifiquement en fonction de la version du navigateur si l'utilisateur utilise IE. Ceci permet de facilement permettre des fix CSS pour chaque version spécifique d'IE sans des hacks comme:

Hacks communément utilisés pour contourner des bugs relatif au moteur de rendu (rendering engine) d'IE. En utilisant Modernizr, ceux-ci peuvent être remplacés par:

S'assurer que la dernière version d'IE soit utilisée

Les versions 8 et 9 d'IE contiennent de nombreux moteurs de rendu, cela implique d'avoir la possibilité d'utiliser un moteur de rendu différent du dernier disponible, pour corriger cela:

Ce tag meta permet de spécifier au navigateur Internet Exporer d'utiliser la dernière version de moteur de rendu disponible tout en permettant, si installé, d'utiliser le moteur de rendu de Chrome frame's. Vous vous assurez ainsi que n'importe quel utilisateur utilisant IE dispose de la meilleur expérience utilisateur possible (et dépendant de leur environnement).

Mobile Viewport - Créer une version mobile

Boilerplate vous propose par défaut la configuration du méta tag Viewport:

Vous pouvez utiliser différentes options avec l'utilisation de ce tag, si vous êtes intéressé et souhaitez en savoir plus: j.mp/mobileviewport (Apple developer docs).

Modernizr

Modernizr (du même auteur) est une librairie Javascript qui vous aide à tirer parti des nouvelles technologies web (CSS3, HTML 5), tout en conservant un bon niveau de contrôle sur les anciens navigateurs, en ajoutant des classes CSS spécifiques à l'élement <html />.

Le script Modernizr est le seul fichier Javascript chargé en haut du document. Il a besoin de s'exécuter avant que le navigateur commence le rendu de la page afin de permettre aux navigateurs ne supportant pas certains des nouveaux tags HTML5 d'être capable de les gérer correctement.

Contenu du boilerplate

La partie centrale du template boilerplate est pratiquement vide:

Paul Irish l'explique par l'intention de rendre boilerplate propice à la fois au contexte de page web et de web app.

Javascript

Google CDN pour jQuery

Vers la fin de la page, vous pourrez trouver l'import des fichiers JS, en commençant par la librarie jQuery.

Vous remarquerez également l'utilisation du CDN (Content delivery network) de chez Google. Cet article ne se prête pas à présenter tout l'intérêt d'utiliser un CDN pour servir vos fichiers statiques (pour plus d'informations: 6,953 reasons why I still let Google host jQuery for me), mais quelque soit votre librairie préférée, l'utilisation d'un CDN est fortement recommandée. Non seulement vous vous assurez d'utiliser d'emblée le cache de vos utilisateurs du fait qu'il peuvent déjà avoir rencontré cette version de fichier , mais vous servirez vos fichiers statiques plus rapidement que vous ne pourrez jamais le faire avec votre propre serveur.

PNG Fix

Le snippet suivant est une correction concernant le problème d'IE6 à rendre correctement les images .png.

Vous pourrez trouver plus d'informations sur ce sujet ici.

Google Analytics code

En toute fin de fichier, vous pourrez trouver la toute dernière version du code de tracking Google Analytics, plus quelques optimisations.

Il suffit de remplacer "UA-XXXXX-X" par l'identifiant GA de votre site.

Le Style

https://github.com/paulirish/html5-boilerplate/wiki/The-style

HTML5 Boilerplate propose par défaut un ensemble cohérent et solide de régles CSS permettant à tout site ou application web de commencer leur implémentation frontend ou phase de maquettage sur des fondations à toute épreuve.

Reset Styles

Le reset CSS est une technique qui consiste à réinitialiser les valeurs de l'ensemble des élements HTML afin d'éviter une partie des différences d'affichage sur les différents navigateurs. Ici, le Reset CSS est une version modifiée du Reset CSS d'Eric Meyer.

Style de police

Boilerplate utilise Yahoo’s CSS Fonts.

Style d'impression

Les style d'impression représentent un ensemble de règle CSS qui ciblent le média print, autrement dit les

documents imprimés.

• Les styles d'impression sont définit en "inline" pour réduire le nombre des requêtes http.
• L'ensemble des couleurs d'arrière plan sont désactivées et la couleur de la police devient gris sombre. Les éventuels text-shadow sont également désactivés. Tout ceci pour éviter à vos imprimantes de manger une cartouche à chaque page web imprimée.
• Styles spécifiques pour les élements <a> et leur différents états.

Le javascript

script.js & plugin.js

script.js est censé être utilisé pour contenir votre "code applicatif". Il peut paraître judicieux de le stocker dans un object littéral et de l'éxecuter en fonction des classes du tag <html> ou <body>. L'utilisation de Boilerplate et Modernizr facilite grandement ce Pattern.

plugin.js est censé être utilisé pour contenir tout plugin jQuery ou vos propres scripts. Tous les pluging jQuery devraient être insérés dans la closure (function($){ ... })(jQuery); pour s'assurer qu'ils se trouvent bien dans le namespace jQuery.

Profiling

Les outils Firebug & Chrome Dev sont vraiment formidables mais il n'existent pas d'outils aussi puissant et accessible pour le faire également efficacement sous IE6 et IE7.

Le script de profiling YUI qui est intégré avec Boilerplate peut identifier les parties de votre code qui prennent anormalement trop de temps à s'exécuter. La configuration par défaut permet de profiler l'objet jQuery, mais vous devriez changer config.js pour qu'il surveille a peu prés tout ce que vous pouvez souhaiter.

Pour finir

Cet article n'a fait qu'effleurer toute la puissance d'HTML5 Boilerplate et l'ensemble de ses fonctionnalités. Les principales sources d'informations viennent de:

• HTML5 Boilerplate Github Wiki
• The Official Guide to HTML5 Boilerplate
• An Unofficial Guide to the HTML5 Boilerplate
• HOW TO: Get Started with HTML5 Boilerplate

Si vous vous intéressez à HTML5 Boilerplate, n'hésitez pas à y faire un tour. Vous obtiendrez les meilleures et les plus précises informations sur le sujet.

Un grand Merci à Paul Irish et à l'ensemble des contributeurs du projet, ceci représente vraiment un condensé incroyable de bonnes pratiques et optimisations en fournissant un socle, une fondation solide et cohérente que tout site ou application web se doit d'avoir.