Initializr – Un générateur de templates basé sur HTML5 Boilerplate

Initializr - Générateur de templates HTML5 basé sur Boilerplate
Initializr vous permet de générer un template basé sur HTML5 Boilerplate qui vous rendra opérationnel sur un projet HTML5 en quelques secondes seulement. Vous pouvez personnaliser votre template selon vos besoins afin d’éviter de démarrer votre projet avec un code trop chargé. L’ensemble du processus de création du projet et les options disponibles sont détaillées dans cet article.

Avant de commencer, si vous êtes novice en HTML5 et que vous souhaitez avoir un aperçu global de ce qui se cache derrière cette nouvelle technologie, je vous recommande de lire cette Introduction à l’HTML5 avant de passer à la suite.

Tout d’abord il faut savoir qu’Initializr est basé sur HTML5 Boilerplate. Intéressons-nous donc déjà à ce fameux Boilerplate.

HTML5 Boilerplate

HTML5 Boilerplate est un template HTML5 puissant et fiable créé et maintenu par Paul Irish, de Google, et Divya Manian. Boilerplate est constitué d’un ensemble de fichiers HTML, CSS et Javascript, qui servent à bien démarrer un projet HTML5. Il inclut également des outils très utiles tels que Modernizr, jQuery, et un reset de CSS.

HTML5 Boilerplate

Boilerplate inclut en revanche d’autres outils moins utiles comme le profiling jQuery, le code de Google Analytics, des fonctions Javascript pour le logging, un fichier de configuration pour le cross domain Flash, la configuration serveur IIS et nginx, des pages de tests, des scripts de build Ant… Bref, lorsque vous démarrez un projet avec Boilerplate, cela passe par une longue phase de suppression de toutes les parties du template qui ne vous serviront pas.

Initializr – Un Boilerplate léger et customisable

L’idée d’Initializr est de proposer le template de Boilerplate sans ces outils rarement utiles, afin de pouvoir commencer un projet HTML5 très rapidement tout en restant aussi fiable que Boilerplate. Le code généré par Initializr est intégralement basé sur Boilerplate, dont la solidité n’est plus à prouver. Initializr propose différentes options de personnalisation de votre template dont voici le détail :

HTML/CSS

Par défaut, Boilerplate vous fournit une page blanche. Initializr vous permet de générer un premier contenu basique, qui vous aidera à démarrer rapidement. La page d’exemple reprend le thème du site en mettant en forme une structure de page web classique avec un header, un footer, un menu de navigation, un bloc sur le côté, ainsi qu’une structure d’article de type blog.

Template HTML5 Initializr

Javascript

HTML5Boilerplate inclut l’excellent framework Javascript jQuery. On retrouve donc sur Initializr cette bibliothèque, disponible en version compressée ou non, mais également la possibilité de ne pas l’inclure, voire même de ne pas du tout inclure de Javascript. Alors soyons cependant clairs sur ce point, nous parlons ici de votre Javascript, pas de celui présent dans Modernizr ou html5shiv, qui assurent la compatibilité avec les navigateurs les plus capricieux.

Logo jQuery

La compatibilité

HTML5shiv

Les navigateurs modernes supportent parfaitement les nouvelles balises HTML5. Cependant les versions d’Internet Explorer 8 et inférieures ont besoin d’un petit coup de pouce afin de styliser ces nouvelles balises, qui par défaut ne sont pas reconnues. Ce petit coup de pouce se nomme HTML5shiv. Il s’agit d’un petit fichier Javascript qui permettra à Internet Explorer de reconnaître les balises HTML5 grâce à la fonction createElement() :

document.createElement("header");

Tous les nouveaux éléments sont ainsi automatiquement créés avant que le contenu du corps de la page ne soit affiché. Il est ainsi obligatoire de placer HTML5shiv dans le <head> de la page plutôt qu’en bas de votre <body>, ce qui est conseillé pour le reste de votre Javascript.

Modernizr

Logo Modernizr

Modernizr est un détecteur de support des fonctionnalités HTML5 et CSS3 qui inclut HTML5shiv. Il s’agit d’un fichier Javascript qui va créer un objet Modernizr contenant des propriétés indiquant pour chaque fonctionnalité si elle fonctionne ou non dans votre navigateur :

if (Modernizr.geolocation){
	// La géolocalisation est supportée 
}
else {
	// La géolocalisation n’est pas supportée
}

Modernizr ajoute également des classes CSS à la balise <html> afin de pouvoir facilement prévoir des styles alternatifs si certaines propriétés CSS3 ne sont pas supportées :

.multiplebgs header {
  /* Les backgrounds multiples sont supportés */
}
.no-multiplebgs header {
  /* Les backgrounds multiples ne sont pas supportés */
}

Modernizr est donc un outil particulièrement complet dans la détection du support des fonctionnalités HTML5 et CSS3 mais il est important de bien comprendre qu’il n’ajoute pas de fonctionnalités manquantes. C’est l’outil de compatibilité sélectionné par défaut sur Initializr.

La configuration serveur

Enfin, Initializr propose d’inclure un fichier de configuration serveur également fourni par Boilerplate. Il est donc possible de choisir un fichier .htaccess pour les serveurs PHP, web.config pour les serveurs Microsoft IIS, ou bien nginx.conf pour Ruby on Rails. Il est important de noter que par défaut, ces fichiers vont réécrire l’URL de la page pour supprimer le “www” afin d’obtenir des URL plus courtes.

Si vous préférez garder votre “www”, vous pouvez retirer les lignes suivantes dans le cas d’un .htaccess :

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
  RewriteRule ^(.*)$ http://%1/$1 [R=301,L]
</IfModule>

.htaccess web.config nginx.conf

Y a plus qu’à cliquer sur le bouton !

Une fois vos choix de configuration faits, il vous suffira de cliquer sur le (très) gros bouton Download! pour télécharger l’archive générée.

Bouton télécharger Initializr
Si vous laissez la configuration par défaut, vous obtiendrez une structure de projet complète prête à être utilisée, qui ressemblera à ceci :

Structure Initializr

Un rapide coup d’oeil dans le fichier index.html vous permettra de voir que le code de Boilerplate est déjà bien corsé :

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	
	<title>Your website name</title>
	
	<meta name="description" content="">
	<meta name="author" content="">
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	
	<link rel="stylesheet" href="css/style.css?v=2">

	<script src="js/libs/modernizr-1.6.min.js"></script>
</head>
<body>

<!-- Code de la page d’exemple d’Initializr -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
	<script src="js/script.js"></script>
	<!--[if lt IE 7 ]>
	<script src="js/libs/dd_belatedpng.js"></script>
	<script> DD_belatedPNG.fix('img, .png_bg');</script>
	<![endif]-->
</body>
</html>

Le fichier style.css fait quant à lui près de 200 lignes dont les premiers 3 quarts sont un Reset CSS. Si vous cherchez où placer vos styles au milieu de tout ce code CSS, faites défiler le fichier jusqu’à atteindre le commentaire plutôt explicite :

/*
    // ========================================== \\
   ||                                              ||
   ||               Your styles !                  ||
   ||                                              ||
    \\ ========================================== //
*/

Enfin le fichier script.js contient un simple test pour vérifier si la bibliothèque jQuery est chargée. C’est dans ce fichier que vous pourrez écrire votre code Javascript.

TODO.txt

Un fichier TODO.txt est également inclus afin de vous indiquer quelles tâches il vous reste à faire pour commencer votre projet HTML5 et comment utiliser certaines astuces présentes dans HTML5 Boilerplate. Par exemple, il vous est rappelé de ne pas oublier de remplacer la langue “en” si votre page n’est pas en anglais, ou encore de créer une page 404.html si votre fichier de configuration serveur effectue une redirection 404.

Initializr TODO

Aller plus loin

La version d’HTML5 Boilerplate fournie dans Initializr est volontairement plus légère que l’originale. Si vous souhaitez approfondir votre compréhension du template et avoir des informations détaillées sur l’ensemble des fichiers présents, vous pouvez visionner l’explication officielle de Boilerplate en anglais par Paul Irish :

Je vous invite d’ailleurs également à visiter la page officielle d’HTML5 Boilerplate où vous trouverez de nombreux conseils pour améliorer votre site, sa compatibilité, et ses performances.

J’espère que cette présentation vous aura donné envie d’utiliser HTML5 Boilerplate et Initializr ! Certains d’entre-vous connaissent déjà probablement Boilerplate, pensez-vous qu’un outil tel qu’Initializr permettra d’aider la diffusion de l’HTML5 sur le web ? L’utiliserez-vous personnellement ?

26 thoughts on “Initializr – Un générateur de templates basé sur HTML5 Boilerplate

  1. Bonjour et merci pour cet article !
    Cet outil qui me parait intéressant pour commencer en html 5 et css 3.
    Cela dit, est-il compatible avec l’utilisation de CMS tels que Joomla 1.6 ou Drupal 7.0 par exemple ?

    • Salut Offpix,

      Les CMS proposent des systèmes de templates pour gérer le design. Boilerplate et Initializr sont parfaitement compatibles avec n’importe quel CMS à partir du moment où tu adaptes correctement le template de ton CMS.

      Sur WordPress par exemple, le template est divisé en plusieurs fichiers dont header.php et footer.php. Si tu intègres le contenu généré par Initializr dans ces 2 fichiers en faisant bien attention à ne pas “casser” le fonctionnement du CMS (par exemple laisser la balise qui va injecter le titre du site dans le code HTML), alors cela fonctionnera très bien.

      • A priori, cela doit fonctionner effectivement. J’essaierai Initializr pour la refonte du site d’Offpix. Ce sera une bonne façon de commencer le html5 sans prendre trop de risques. Merci pour les tutos, ils sont clairs et précis, c’est agréable à lire.

  2. Bonjour,

    Sans vouloir trop faire mon auto-promo, j’avais lancé à peu près le même service (principalement pour les utilisateurs de Forrst) : http://shikiryu.com/html5.

    En voyant SwitchToHTML5 et le fait que j’utilise déjà mon propre template customisé (mix entre blueprint, boilerplate et quelques addons persos), j’ai décidé de créer mon propre générateur de template.

    Si y a des trucs à ajouter, je suis preneur de propositions ;)

    A+

    • Effectivement c’est très proche d’Initializr. Et tu proposes certaines personnalisations qui ne sont pas encore sur Initializr comme Blueprint et Analytics, beau travail !
      Je ne connaissais pas non plus SwitchToHTML5, merci de m’avoir fait découvrir ces sites.

  3. Bonjour,

    Tout d’abord merci pour ce partage, je ne connaissais pas du tout… Et du coup j’hésite à m’y mettre…
    Une question tout de même : Est-ce judicieux d’utiliser initializr pour faire des animations canvas ? Je veux dire, est-ce que ça (notamment jQuery) va m’aider à faire des animations ?

    Merci. :)

    • Salut Sheeft,

      Initializr et Boilerplate n’ont pour but que de t’aider à démarrer un projet HTML5 facilement. Ils n’ont aucun impact sur l’utilisation de canvas, si ce n’est que Modernizr et HTML5shiv permettront de styliser ton élément canvas. jQuery n’apporte pas non plus d’aide particulière pour canvas mais permet de simplifier globalement l’utilisation du Javascript (ce qui par conséquent aidera également pour canvas).
      Si tu souhaites commencer à réaliser des animations canvas, vérifie déjà que les navigateurs que tu cibles le supportent : Support de canvas sur Caniuse.com (tous sauf IE 6, 7, 8 pour résumer).
      Canvas est doté d’une API très riche, et il te faudra sans doute un certain temps d’apprentissage avant de pouvoir réaliser des animations complexes (c’est un excellent investissement cela dit !)
      Tu peux commencer par suivre quelques tutoriels que tu trouveras facilement sur le net (le tutoriel de Mozilla par exemple), puis une fois que tu seras familier avec son fonctionnement, tu pourras t’intéresser aux différents frameworks qui commencent à fleurir sur le net pour faciliter l’utilisation de canvas (EaselJS ou ProcessingJS par exemple, mais il y en a d’autres, et je ne sais pas encore lequel est le meilleur).
      J’espère avoir répondu à ta question !

      • D’accord, merci beaucoup.
        Ouais, c’est embêtant ce manque de compatibilité chez Internet Explorer (celui là il ne cessera jamais de gêner tout le monde…) mais je pense que c’est quand même mieux que de se lancer sur flash…

        Je vais utiliser initializr pour mon site perso je pense. On verra ce que ça donne.

        Au revoir.

    • Salut Bobby,

      Effectivement c’est normal, je l’ai retiré des templates. Mais je vais sans doute le remettre un peu plus tard. Merci de m’y avoir fait penser !

  4. Tu peux aussi rajouter qu’il intégre aussi Twitter Bootstrap. Perso je suis venu à Intializr parce que j’étais sur Twitter BT et je cherchais une surcouche HTML5 qui soit ‘compatible’.. dans le sens où je n’avais pas envie d’avoir de mauvaises surprises.
    S.

  5. bonjour,
    apres moult recherches d’infos sur html5, je suis un peu perdu dans cette jungle…..
    sur le site d’Initializr, ils proposent 3 ressources pour utiliser html5 :
    - H5BP (boilerplate) qui est la base si j’ai bien compris
    - Responsive (initializr) qui utilise la méthode de boilerplate plus légère et customisable
    - et Bootstrap de twitter

    > quelle difference il y a entre initializr et bootstrap ?
    > apparemment il est possible de combiner les 2….l’intérêt ?

    Merci

    • Très bonne question Fabjo,
      Effectivement, les 3 configurations proposées sur Initializr reposent sur HTML5 Boilerplate comme base.
      “Classic H5BP” ne contient que H5BP, “Responsive” contient H5BP + un simple template responsive que je présente ici (en anglais), et “Bootstrap” inclut H5BP + la librairie de styles et de composants (CSS et JavaScript créée par Twitter).
      En soi, Initializr (outre le template responsive) n’est qu’on outil pour combiner tout ça, je n’ai pas ajouté la moindre ligne de code dans ce qui est téléchargé dans l’archive.
      Bootstrap contient également par défaut un template responsive mais pour l’utiliser il faut du coup que tu te serve de la librairie toute entière, ce qui est parfois un peu lourd (d’où l’intérêt d’avoir un template plus simple avec l’option Responsive d’Initializr).
      En espérant t’avoir éclairé !

      • Bonjour,
        Du coup je rebondis sur cette réponse.
        Quelle est la différence une fois la version “Responsive” choisie, entre les templates HTML/CSS “Mobile First Responsive” et “Responsive Bootstrap” ?

        Cela veut-il dire qu’on utilise soit le layout responsive créé par toi-même ou celui de Bootstrap c’est ça ?

        Quelles sont les principales différences, avantages/inconvénients entre les deux ?

        Merci d’avance pour ta réponse

        • Le mobile-first template est mon template, qui est minimaliste.
          Le Bootstrap utilise la librairie Bootstrap, qui implique donc d’utiliser leurs composants, ce que l’on ne souhaite pas forcément.

  6. Merci, l’idée est bonne je vais tester ça de suite. Bien vu le bouton ‘What’s inside?”, très didactique. Je suis (jusqu’à présent) fan de Twitter BT. Par contre jamais testé HTML5 Boilerplate, le design du site est original -moins web 2.0 que TBT – mais un peu rebutant quand même; ça doit jouer.

  7. Je viens de mixer tout ça avec un projet Zend, c’est d’une efficacité redoutable…

    Entre le ZF_Tool qui vous génère l’architecture du projet et Initializr qui fournit la présentation c’est d’une efficacité redoutable. Genre une demi-journée pour faire connaissance et déployer un squelette très honorable avec internationalisation, gestion du cache…

    J’ai encore peur de démolir le bel ensemble des fichiers .less (un peu comme quand on hésite à marcher sur la neige vierge d’un glacier) mais il va bien falloir que j’y mette mes gros doigts… A noter que dans les styles fournis par défaut je n’ai pas trouvé trace d’un conteneur prévu pour l’internationalisation dans les menus (Il y a ce qu’il faut pour un champ de recherche textuelle mais rien pour coller des drapeaux ou un sélecteur).

    J’ai la conviction que cette association a un beau potentiel, je vais essayer de la pousser dans ses retranchements… Merci en tous cas pour ton travail, je n’imagine même pas quel volume ça peut représenter !!!

  8. Bonjour,
    Je découvre votre template. Pourquoi dire que c’est un générateur HTML5 alors que l’ensemble des balises dans le document généré ne sont pas des nouvelles balises HTML5 (nav,header, article, figure etc).
    ou alors j’ai mal configuré la génération de mon template ?

  9. Bonjour,

    Tout d’abord,je tiens à vous remercier pour cet agréable article qui nous apporte assez d’information sur HTML5.En revanche,je voudrais savoir ,est ce qu’on peut l’intégrer avec Struts2,Si oui,comment?

    Merci d’avance

    • HTML5 Boilerplate ou Initializr, c’est 100% front-end, ce qui signifie que cela peut s’intégrer à n’importe quel environnement backend sans aucun problème. Que le langage soit PHP, Java, Python, Ruby, Node ou n’importe quoi d’autre, tu peux toujours avoir ta couche front-end totalement indépendante de celui-ci ou de tout framework web. Si ton framework t’impose des conventions non standard (qui ne ressemblent pas à de l’HTML), tu peux toujours convertir Boilerplate pour convenir à tes besoins. Enfin, H5BP c’est aussi et surtout du CSS, qui s’intègre parfaitement à n’importe quel environnement.

  10. Avez-vous un retour d’expérience sur l’utilisation de frameworks HTML/CSS/JS ?
    Est-ce finalement qu’une base de code propre facilement évolutive ou un enfer quand il s’agit de faire des sites évolués ?

    • Je pense qu’il faut savoir travailler avec et sans framework. Comprendre les fondements de chaque langage est important pour savoir pourquoi les frameworks sont utiles.
      Par exemple, si une fonction JavaScript ne fonctionne pas sous IE7, on peut souvent coder une alternative à la main, mais on gagne beaucoup de temps à utiliser un équivalent jQuery. Réinventer la roue est inutile, mais comprendre pourquoi la roue existe est clairement important !

      Les frameworks accélèrent fortement la création d’un site web, et sont également utiles lorsqu’ils évoluent et grossissent avec le temps. Idéalement, essayez cependant de coder de façon indépendante du framework de manière à pouvoir les interchanger en cas de besoin (on ne sait jamais, un framework populaire aujourd’hui peut ne plus l’être dans quelques mois ou années). Ce n’est pas toujours évident cela dit :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>