Créer une page internet de qualité sans CMS

10/08/2017 Non Par cborne

Le premier réflexe lorsque l’on veut créer un site Internet c’est l’utilisation d’un CMS, Content Management System. WordPress est un CMS, PluXml est un CMS, il s’agit de sites livrés en kit qui offrent la possibilité pour l’utilisateur de modifier de façon simple les contenus en ayant peu de connaissances particulières en informatique, en tout cas en programmation Internet. Si ces sites sont efficaces, qu’ils facilitent grandement la vie, qu’ils permettent bien sûr d’automatiser des tâches qui seraient très longues à réaliser, ils posent au moins deux problèmes :

  • ils sont lourds lorsqu’on souhaite réaliser une simple page Internet,
  • du fait d’avoir une interface administrateur, des plugins, ils nécessitent une maintenance et peuvent avoir des failles de sécurité.

A l’époque, avant la généralisation des CMS, il était commun de réaliser des sites Internet à la main directement depuis un simple éditeur de texte, ou d’utiliser des solutions propriétaires comme Macromedia Dreamweaver, qui permettait de générer des pages au local pour les mettre ensuite en ligne. L’arrivée des CMS a complètement ringardisé les sites statiques si bien qu’on ne pense pas nécessairement à ces solutions lorsqu’on veut créer un site internet. Avec l’arrivée de HTML5, de nombreuses possibilités sont désormais offertes, on peut avoir des designs très professionnels et réaliser des sites simples et propres en faisant quelques adaptations.

Le site HTML5 UP propose des templates ou des squelettes de façon libre et gratuite, il suffit de télécharger le modèle qui vous intéresse, sachant que vous en avait des plus ou moins complexes. J’ai choisi pour réaliser ma page de présentation le modèle : aerial

Voici le résultat avant, et après

avant

après

Il apparaît de façon assez intuitive que j’ai changé le titre, le footer (le bas), que j’ai supprimé les icônes twitter et facebook, rajouté une icône pdf. Lorsque l’on téléchage l’archive on a l’architecture suivante.

Si on n’a pas de connaissance en CSS, qu’on veut se contenter de conserver la même apparence et de modifier quelques éléments, tout se trouve dans l’index.html. Pour l’image de fond, en allant dans le répertoire assets\css\images, il apparaît une image du nom de bg, en l’ouvrant, je vois des dimensions de 1500×500, il m’a suffit de prendre une image personnelle, d’adapter les dimensions et d’écraser pour obtenir la mer à la place de la montagne.

Intéressons nous désormais aux icônes sociales. Dans ma version, on peut voir :

        <!– Header –>
<header id= »header »>
<h1>Cyrille BORNE</h1>
<p>Enseignant &nbsp;&bull;&nbsp; Responsable Informatique &nbsp;&bull;&nbsp; Humain</p>
<nav>
<ul>
<li><a href= »https://cyrille-borne.com/bozon/?f=158963c49422b1″  class= »fa fa-file-pdf-o »><span class= »BoZon »>BoZon</span></a></li>
<li><a href= »https://cyrille-borne.com/forum » class= »icon fa-dribbble »><span class= »label »>Dribbble</span></a></li>
<li><a href= »https://github.com/cborne » class= »icon fa-github »><span class= »label »>Github</span></a></li>
<li><a href= »mailto:cyrille@familleborne.com » class= »icon fa-envelope-o »><span class= »label »>Email</span></a></li>
</ul>
</nav>
</header>

De façon intuitive, on comprend qui est qui, ce qui est plus subtil c’est de voir qu’il n’y a pas d’image associée à chaque lien, il s’agit en fait d’une police de caractère. Font awesome est une police de caractère à laquelle vous faites appel pour obtenir les icônes qui vous intéressent. Pas besoin d’aller chercher des images qui ne font pas partie de la même « famille » que celle que vous avez déjà, il suffit de regarder sur le site les icônes présentes, vous obtenez le code à saisir. Par exemple, je chercher à rajouter un lien vers le blog pluxml, parmi les icônes j’ai trouvé celle-ci :

Il me suffit alors d’adapter l’une des lignes précédentes de la façon suivante :

<li><a href= »https://cyrille-borne.com/pluxml » class= »icon fa-envira »><span class= »Blog »>Dribbble</span></a></li>

On obtient le résultat suivant :

Facile à mettre en oeuvre, propre, bien plus efficace que les CMS qui ne permettent pas facilement de faire des VCARD, HTML5 UP et les autres sites similaires fait partie des solutions à ne pas négliger pour la réalisation de quelques pages Internet qui n’ont pas vocation à beaucoup évoluer.