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.
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...
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
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!
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.
@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...
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!
@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..
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.
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).
@Loucas : pas encore!
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
Hmmmmm… Là, pour le coup, je rejoins Florent V. dans son analyse.
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 !
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 !
Mouais mouais, de bonnes idées à piocher en tout cas :)
@Halcyon : en même temps tout dépend des attentes, Piwik sur un dédié ok.
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/... ;)
merci pour cet article très intéressant, à analyser avec attention.
Bonjour tout le monde,
le fichier .htaccess génère chez Free la réponse : Erreur 500 - Erreur interne du serveur.
Que faire ? Merci.
@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 ...
@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 ?
Le .htaccess attire tout particulièrement mon attention... Je vais étudier cela de plus prêt. Merci pour la news dew!
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
pour compresser du javascript, utilise le moteur google
http://closure-compiler.appspot.com/home
çà donne un bon résultat ;)