HTML5 Boilerplate, un template puissant et complet

Astuce par (Alsacréations, Strasbourg)
Créé le , mis à jour le (114833 lectures)
Tags : templates, xhtml, html5, framework

HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash. Une version sur-mesure peut être générée via Initializr.

HTML5 Boilerplate

Vous retrouverez donc dans un zip tous les fichiers et sous-répertoires organisés pour débuter votre intégration avec d'excellentes bases. Bien entendu, vous l'aurez deviné, le but est de favoriser l'adoption de HTML, d'où l'inclusion par défaut de la librairie Modernizr, ainsi que jQuery via GoogleAPI (avec fallback local). Voici une liste des fonctionnalités supportées :

  • HTML5 ready
  • Compatibilité cross-browser (IE6 inclus)
  • Directives variées de configuration par défaut
  • Directives pour les navigateurs mobiles
  • Préparation pour l'utilisation de règles @font-face
  • Dégradation gracieuse et amélioration progressive
  • Classes spécifiques à IE pour un contrôle plus fin
  • Classes .js et .no-js
  • Classes .clearfix et .visuallyhidden pour styler ces éléments de la bonne façon (accessible)
  • Profiling JavaScript dans IE6 et IE7
  • Optimisation de console.log (non bloquant)
  • Reset CSS et normalisation des polices
  • Feuille de style impression (media print)
  • Squelette HTML/CSS adaptable pour iOS, Android, Opera Mobile
  • Fichier .htaccess pour utilisation des fonctionnalités HTML5 et optimisation du chargement du contenu, règles pour le cache (dates d'expiration) et la compression
  • Fix PNG pour IE
  • Fichier plugins.js déjà prêt pour jQuery
  • Fichier robots.txt
  • Page 404 par défaut
  • Fichier crossdomain.xml
  • Code Google Analytics
  • Modèle pour des tests unitaires
  • Le tout en UTF-8
  • etc...

HTML5 Boilerplate Code Exemple

Attention, tout ceci relève d'un condensé d'expérience et de recommandations généralistes, par exemples celles définies par Yahoo et Google, il est possible que certaines ne soient pas applicables à votre site ou provoquent des effets non désirés, faites donc bien attention à comprendre tous les critères utilisés et dans quel but. Il vous faudra peut-être retirer quelques instructions superflues.

Bien entendu d'autres sont à découvrir dans le code source, comme par exemples les indications pour les icônes Apple touch + favicon par exemple. Vous pouvez consulter directement la source sur le site et vous en inspirer.

Commentaires

dj DMSR a dit le

Enorme! Un condensé de toutes les bonnes pratiques que j'essaie de bookmarker au fil des jours en essayant de tout intégrer à chaque projet. Il y a (presque?) tout!
Le bookmark de l'année en somme!
lol
Que du bomheur!
Merci dew!

Florent V. a dit le

Mouais, suis un peu circonspect.
Des bonnes pratiques, je veux bien, mais une bonne pratique ce n'est pas une libraire ou un code prêt à l'emploi, c'est avant tout un savoir à mettre en pratique. :)

Le but de ces outils est de faciliter la vie des développeurs en réglant d'avance un certain nombre de problèmes récurrents. Sauf que la base ainsi créée peut elle-même poser des problèmes dans des cas précis. Par exemple un fix PNG pour IE, s'il s'agit bien du support du PNG-32 dans IE6 via AlphaImageLoader, c'est casse-gueule. Après, l'ensemble est peut-être bien fichu, mais tout code utilisé et qu'on ne maitrise pas reste une source de problème potentiels (vieux problème des frameworks), et j'ai tendance à penser que dans ce domaine (les resets, fixes et autres préparations côté front-end) les problèmes sont plus fréquents qu'avec un un framework PHP, Python ou JS bien fichu et largement testé. D'autant plus que les fonctionnalités ont un côté «ça part dans tous les sens».

Donc, entre partir de zéro et devoir affronter des problèmes récurrents… et partir d'une telle base de codes et rencontrer ponctuellement des problèmes incompréhensibles car dus à un code qu'on ne maitrise pas… je ne sais quelle approche conseiller. Peut-être la première car elle est plus formatrice.

Par contre je recommanderais volontiers d'utiliser des bouts de cette base de code, après les avoir analysés et compris.

dj DMSR a dit le

@Florent V:
"Par contre je recommanderais volontiers d'utiliser des bouts de cette base de code, après les avoir analysés et compris."
EVIDEMENT!!!! ;)
Mais convenons-en c'est une mine! Et tous les liens qui servent de références sont faits pour ça! Que de la bonne lecture! Des soirées comme je l'ai aime...

dj DMSR a dit le

le .htaccess est terrible!
ça je ne connaissais pas:

# allow concatenation from within specific js and css files
# e.g. Inside of script.combined.js you could have
# <!--#include file="jquery-1.4.2.js" -->
# <!--#include file="jquery.idletimer.js" -->
# and they would be included into this single file
et ce qui suit ligne 056...
Génial!

iManu a dit le

@dj DMSR : on peut faire tout plein de trucs géniaux avec le .htaccess, mais attention de ne pas le surcharger, le serveur pouvant être fortement ralenti par ce que ce fichier lui demande de faire avant même de commencer à renvoyer le site au client..

Loucas a dit le

J'avoue que quand j'ai vu le .htaccess de 6 Ko j'ai pris peur, mais y a quand mal pas de trucs intéressants.

@dj DMSR : ta tester ? si sa fonctionne ca peut être super intéressant au niveau du référencement / rapidité de la page.

MoOx a dit le

Vraiment bon condensé, mais en effet il faut maitriser.
Pour ce qui est du htacces, il est bien de mettre tout ça directement dans un vhost apache, car du coup c'est interprété une fois au démarrage du serveur (ou a chaque restart apache), donc mise en cache, à l'inverse du fichier .htaccess qui est lu à chaque requête client (donc page html, img, css, js enfin tout).

dj DMSR a dit le

@Loucas : pas encore!

oncle-charly a dit le

Bonjour à tous.
Je vous lis depuis pas mal de temps.
Mon premier message pour signaler que ça ne marche pas => dommage.
Je décompresse l'archive sur mon bureau.
Je clique sur index.html pour ouvrir la page.
Quelque soit le navigateur utilisé, ça ne fonctionne pas.
J’ai du louper un passage.
SOS d'un internaute curieux en détresse.
Quelqu'un pourrait-il m'expliquer ce qui cloche ?
Un code pour le .htaccess ?
Même en ligne, ça ne fonctionne pas.
Merci
Oncle-charly

Ladytron a dit le

Hmmmmm… Là, pour le coup, je rejoins Florent V. dans son analyse.

pastelpro a dit le

Moi je trouve que c'est bien en tant que tuto, mais après je conseille de partir de zéro pour son site en fonction des besoins de celui-ci.
Et puis je préfère inclure le script de http://www.ie6nomore.com plutôt que mettre des hacks pour son support !

Halcyon a dit le

C'est tout de même très triste de se voir proposer le tracker Google Analytics alors qu'il existe une solution libre nommée Piwik !

AspiGeek a dit le

Mouais mouais, de bonnes idées à piocher en tout cas :)

laulx a dit le

@Halcyon : en même temps tout dépend des attentes, Piwik sur un dédié ok.

format C: a dit le

Je pense également que cela est un super outil pour ceux qui connaissent déja bien le métier (il faut faire son pick-n-choose, certes) mais aucun intérêt pour un nOObz qui n'apprendra rien et perdra son temps. À ceux(celles)-là, je leur conseille de commencer ici :
http://www.alsacreations.com/static/gabarits/... ;)

legaia a dit le

merci pour cet article très intéressant, à analyser avec attention.

oncle-charly a dit le

Bonjour tout le monde,

le fichier .htaccess génère chez Free la réponse : Erreur 500 - Erreur interne du serveur.

Que faire ? Merci.

Felipe a dit le

@oncle-charly : l'hébergement (mutualisé) chez Free présente énormément de particularités, enfin je crois, à commencer par la manière d'avoir PHP 5 (placer une ligne "php 1" dans le .htaccess). Il faudrait revoir le fichier ligne à ligne avec des experts d'Apache utilisant Free et en connaissant les particularités ...

Un-graphiste a dit le

@oncle-charly : tu as résolu ton problème ? Peut-être peux-tu identifier (par suppression de lignes) ce qui coince dans le .htaccess, non ?

Julien Vernet a dit le

Le .htaccess attire tout particulièrement mon attention... Je vais étudier cela de plus prêt. Merci pour la news dew!

oncle-charly a dit le

Bonjour tout le monde,

le jeudi 21 octobre 2010, le .htaccess génère toujours la même réponse chez Free :
Erreur 500 - Erreur interne du serveur.
J'ai essayé pas mal de combinaisons. Aucune ne fonctionne. Toujours la même réponse : Erreur 500 - Erreur interne du serveur.

Donc, voici le contenu minimaliste de mon fichier .htaccess qui fonctionne chez Free :
php 1
ErrorDocument 404 /404.html
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Par ailleurs, j'ai Gzipé mes pages :
<?php
ob_start( 'ob_gzhandler' );
?>

Et j'ai compressé mes images avec Yahoo Smush.it :
http://www.smushit.com/ysmush.it/

Le code de mes pages est valide HTML 5.

En plus du .htaccess qui plante chez Free, il y a autre chose que je ne sais pas faire : compresser mon fichier JavaScript. D'après Page Speed (93/100) et Yslow, je pourrais économiser quelques Ko. J'ai su compresser avec Gzip ma feuille de style CSS. Mais pour le JavaScript, je sèche. Si quelqu'un a une astuce, un bout de code, je le remercie d'avance.

Autre chose : je n'utilise que très peu de fonctions de JQuery (une ou deux). Peut-on effacer celles qui sont inutiles dans le code JQuery ? Toujours pour raccourcir le code et gagner en vélocité.

Merci.

Oncle-charly

lkaiman a dit le

pour compresser du javascript, utilise le moteur google
http://closure-compiler.appspot.com/home

çà donne un bon résultat ;)