Tag Archives: best practices

Html5 boilerplate : La boîte à outil du bon intégrateur

29 Juin

Pour bien se lancer dans le HTML5, il est important de disposer des bons outils dès le départ !

Html5 boilerplate logoHtml5 boilerplate fait partie de ces bijoux qu’on est bien content d’avoir dans ses favoris.

Ce projet met à votre disposition une architecture de base (Html5, CSS, htaccess, outils de compilation, etc…) vous permettant de disposer très vite d’un site valide, et regroupant toute une série de best practices connues sur le web.

Trois versions sont disponibles :

  • Stripped – Version sans commentaire ni aide
  • Documented – Version commentée avec des astuces
  • Custom – Version personnalisée en fonction de vos besoins (type de serveur, librairie javascript à utiliser, etc…)

Je vous conseille dans un premier temps la version Documented qui vous permettra de vous faire la main dessus, de l’adapter à vos besoins et d’enlever le superflu.

Tour du propriétaire

Une fois l’archive téléchargée et décompressée, vous pouvez commencer.

Le fichier index.html contient une structure de base pour votre code, il vous reste à placer votre markup, en oubliant pas la sémantique des nouvelles balises introduites en Html5 !

Un fichier CSS se charge d’appliquer des styles identiques sur chaque navigateur sans affecter le comportement des autres balises (à l’inverse d’un CSS reset).

Un fichier .htaccess est présent pour vous servir de base de réflexion, et savoir comment optimiser chaque requête effectuée sur le serveur.

Plusieurs astuces se trouvent dans le fichier html, le css et dans le .htaccess, ces astuces permettent de combler des manquements de certaines navigateurs et assurent une compatibilité maximale avec ceux-ci.

Un build script est fourni, il permet de compresser automatiquement les images, css et html. Je n’ai malheureusement pas encore eu l’occasion de tester ce script mais je le ferai dès que possible et rédigerai un article à ce sujet tellement il est intéressant pour accélérer l’affichage de votre site !

Une fois votre template html terminé, n’oubliez pas de le valider au W3C !

Conclusion

Html5 boilerplate est la référence si vous voulez débuter un site en Html5 dès maintenant sans vous heurter à différents problèmes de compatibilité.

La base des utilisateurs grandit de jour en jour et les mainteneur du dépôt Github sont très actifs et très ouverts, le projet évolue donc dans le bon sens.

En revanche, l’entièreté des scripts n’est pas facile à appréhender pour un débutant voire même un utilisateur confirmé. Le build script est très puissant mais encore trop jeune et pas toujours facile à adapter à un projet déjà existant…