alainericgauthier.com

construire une présence sur le web

Une introduction à HTML5 Boilerplate

Source : fichier title.png de la distribution h5bp. Créer un site web

Qu'est-ce que h5bp?

Sur le site même, on présente h5bp comme suit :

Le modèle front-end le plus populaire du web.

Rien de moins.

Je n'ai aucune idées des statistiques ou comment on pourrait vérifier la véracité de cette affirmation. Mais pour être très honnête ça m'importe peu. Ce qui m'importe c'est la qualité de cet outil.

Pour ma part, je décris h5bp comme une base des fichiers nécessaires pour développer un site ou une application web. L'avantage de ce modèle c'est qu'il est très complet, ne repose sur aucune philosophie de développement particulière et est compatible avec git.

Que contient h5bp?

css

Un fichier pour faire la remise à zéro (reset) du CSS de tous les navigateurs et un fichier main.css qui peut être utilisé pour le css propre à votre projet.

doc

Un répertoire de documentation au format MD pour les fichiers qui composent le modèle h5bp. Il est possible d'ajouter ses propres fichiers de documentation pour les projets complexes ou qui demandent la collaboration de plusieurs personne.

js

Les librairies les plus récentes de jQuery et Modernizr sont inclues par défaut. D'autres fichiers sont aussi disponibles pour faciliter l'intégration d'autres librairies ou de plugins.

404.html

Une page pour l'erreur la plus fréquente sur les sites web (page non-trouvée). Ce n'est qu'une base mais c'est souvent quelque chose qui est oublié et même négligé dans les projets de site web.

browserconfig.xml

La version 11 d'Internet Explorer utilise des "custom titles" et ce fichier configure ce navigateur pour votre site. Vous pouvez en apprendre plus sur cette option ici.

.editorconfig

Si vous utilisez un éditeur pour faire vos pages web, ce fichier vous sera utile, particulièrement si vous travaillez avec d'autres personnes, car il vous aidera à conserver un style de code homogène à travers différents éditeurs.

index.html

Le fichier html de base qui est aussi la page d'accueil sur un site web en HTML dur.

humans.txt

Ce fichier permet simplement de lister toutes les personnes qui ont été impliquées et leurs rôles respectifs dans le projet.

robots.txt

Ce fichier sert à indiquer aux robots indexeurs (Google, Yahoo, Bing, etc) quelles sont les pages qui doivent être indexées et celles qui ne le seront pas.

crossdomain.xml

Le fichier crossdomain.xml sert à déterminer comment un navigateur peut acccéder à diférents éléments de contenus qui sont sur des domaines différents. Par exemple, vous pourriez lire une page à partir du site exemple.com et un fichier vidéo qui se trouve sur le site autre.com.

Images

Il existe plusieurs format pour les différentes images qui se trouvent sur une page ou un application web : favicon.ico, tile,png, tile-wide.png et les différentes "Apple Touch Icon". Dans la plupart des cas, il s'agira du logo de votre site web sous différents formats et différentes tailles, chacun propre à une technologie particulière.

Comment démarrer un projet avec h5bp?

Maintenant que nous avons vu un peu ce que contient ce modèle, il serait intéressant de savoir comment se le procurer. Pour ce faire, je vous offre trois façon différentes d'obtenir les fichiers de base.

La version la plus récente sur le web

À partir de la page d'accueil de h5bp, vous pouvez télécharger la version la plus récente. Une fois le fichier téléchargé, décompressez et installez les fichiers sur votre serveur local pour démarrer votre projet.

Initializr

Initializr vous permet de construire une base sur mesure. Ce site web vous permet de choisir quels fichiers vous voulez inclure dans votre copie de h5bp. Avec cet outil, vous n'aurez pas à retirer manuellement des fichiers qui seront inutiles à votre projet.

Cloner le répertoire avec git

Mais ma méthode préférée est définitivement de cloner le répertoire de la version la plus récente au moyen de git. Git est un outil de contrôle de version et vous pouvez l'utiliser pour faire des sauvegardes temporaires de votre projet durant son développement. Cela vous permet de revenir à une ancienne version d'un fichier si vous changez d'idée ou si vous faites un erreur. Pour cloner le répéteroire de h5bp, dans votre terminal vous lancez la commande suivante :

git clone https://github.com/h5bp/html5-boilerplate.git

Dans les prochains articles, nous verrons plus en détail comment utiliser les différents fichier de h5bp.

Ajouter un commentaire

Plain text

  • Les lignes et les paragraphes vont à la ligne automatiquement.
Actualiser Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.