Créer son site web – Leçon 2 : sites-modèles et CMS

Après avoir choisi votre hébergeur, il est temps de réfléchir à la création de votre site ! Pour cela, nous allons étudier trois possibilités.

I. Développer son site soi-même

Il faut que je commence par évoquer cette possibilité. Cependant, si vous avez les capacités nécessaires pour développer votre site vous-mêmes, vous n’avez rien à faire sur ce tuto ! Façon de parler bien sûr, mais vous allez vous ennuyer.

En effet, il est possible de coder chaque page d’un site web soi-même. De façon générale, une page web peut être définie par deux types de langages web : les langages de côté client (forcément du HTML et du CSS, mais également par exemple du JavaScript), qui servent à afficher le site sur votre navigateur, et les langages de côté serveur, comme notamment le PHP (vous pouvez aussi voir du Python, du Ruby, de l’ASP.NET…).
Votre navigateur affiche une page web grâce au HTML et au CSS. Le HTML (HyperText Markup Language) définit la structure de la page, et le CSS (Cascading Style Sheet) s’occupe du style et du design de la page. En gros, le HTML dit : la page s’appelle “Titre de la page”, et contient ce texte “Votre super texte” et une image de poney. Le CSS est la partie qui va mettre en forme tout ça : “Titre de la page” doit être en gras et au milieu de la page, “Votre super texte” doit être en italique, du côté gauche de la page et l’image de poney doit être entourée d’une bordure noire à droite de la page. Ce sont des langages descriptifs : ils décrivent une situation précise à un moment donné, et ne permettent aucune évolution.
Si vous avez envie de rendre le site dynamique, de le voir évoluer selon vos visiteurs, vous devez en plus avoir recours à des langages de programmation. Le JavaScript est un exemple de langage de programmation du côté client, et qui permet par exemple d’afficher les fameuses fenêtres pop-up de publicité. Pour que la page demandée soit personnalisée selon des données que vous auriez stockées quelque part, il faut un langage de côté serveur. PHP est l’un des exemples les plus connus. C’est grâce à lui que vous allez pouvoir créer un système de membres, un formulaire de login, un système de commentaires… et ainsi de suite !
Une personne maitrisant assez bien HTML et CSS et un langage de programmation côté serveur comme PHP peut ainsi coder chaque page de son site web et les envoyer directement vers son serveur par FTP.

Je ne m’étendrai pas plus longtemps sur cette méthode qui n’est utilisable que par des experts – ou des personnes de niveau intermédiaire ayant beaucoup de temps à perdre !

Aparté : comment créer une page HTML, PHP ou CSS ?

Cette question très simple est cependant légitime : allez sur Word et tenter “d’enregistrer sous” votre document. Parcourez la liste des extensions possibles : il n’y a pas de *.html, *.php ou *.css ! Il existe deux types d’éditeurs de pages web : les éditeurs de texte simple ou les WYSIWYG. Les éditeurs de texte simple sont des éditeurs qui nécessitent une connaissance de toutes les balises des codes. Vous écrivez votre code, et vous l’enregistrez. Sur Windows, le plus courant est le Bloc-Notes. Sur Mac, un équivalent est Textedit. Les éditeurs WYSIWIG (What You See Is What You Get), tels qu’Adobe Dreamweaver ou OpenOffice.org vous permettent d’écrire votre texte et de faire insérer les balises par le logiciel.
Au final, les deux méthodes reviennent bien entendu au même.

II. Les sites-modèles

Je vais utiliser le mot de “site-modèle” pour parler de ces sites webs qui vous permettent de créer votre site en quelques clics, sans faire grand-chose. Vous obtenez ainsi un site dont le nom de domaine est du type : http://votrenomdedomaine.lesitechoisi.com/fr etc.

Un exemple : http://halfknockedout.forum-pro.fr/
Dans le cas de ce forum d’une team sur un jeu vidéo, le clan a choisi de faire appel au site gratuit “forum-pro.fr” qui propose de créer gratuitement un sous-domaine, en l’occurrence “halfknockedout”. Les sites-modèles mettent ainsi à votre disposition des modèles de sites (en l’occurrence, un forum) moyennant la présence du nom du site dans l’URL et de la pub par-ci par-là.
Cependant, vous pouvez créer votre site sur ces plateformes et ensuite le faire héberger chez votre hébergeur, vous affranchissant ainsi des limites sus-citées. C’est pourquoi j’ai choisi de traiter cette façon très simple de créer son site web après les hébergeurs : pour moi, elle n’a d’intérêt que si couplée à un hébergeur pour avoir un site 100% personnalisé, libre de publicités et avec un vrai nom de domaine personnalisé.

Les sites-modèles sont cependant une excellente alternative pour les néophytes qui ne veulent pas tenter de mettre la main à la pâte. Les sites-modèles sont particulièrement efficaces pour les blogs et les forums. Ils sont toujours très facile à prendre en main et très intuitifs. Il est par ailleurs possible de les personnaliser de façon assez profonde, surtout avec un hébergeur. Cependant, cela implique de mettre les mains dans le cambouis. Ainsi, voici un forum peu personnalisé et très standard, tandis que voici un forum très personnalisé et totalement unique.
Je vais donc maintenant vous donner la liste de certains des meilleurs sites-modèles pour que vous puissiez trouver votre bonheur :
-* forumactif pour les forum
-* tumblr et blogger pour les blogs
-* e-monsite et wifeo pour les sites web

III. Le compromis entre I et II : les CMS

Les CMS (Content Management System, Système de Gestion de Contenu) vous permettent de créer votre site vous-mêmes : vous définissez sa structure et son design. Cependant, les CMS vous facilitent grandement la tâche : outre la possibilité d’installer des thèmes ou d’obtenir des assistants de conception graphique, les CMS vous permettent de créer des modèles de pages qui seront appliqués aux différents contenus que vous produirez. Je m’explique. L’article que vous êtes en train de lire a juste été écrit dans le CMS du site de Sciences Po Multimédia. J’ai écrit mon texte, j’ai cliqué sur enregistrer et sur “Publier”, et l’article est apparu en ligne, avec le style et le design du site et de tous les autres articles. Le CMS est en effet un logiciel qui s’occupe de gérer plusieurs étapes de la mise en ligne d’un article et d’autres contenus. J’ai défini un tel style et un tel design pour tous les articles, et depuis, chaque article publié prend ce style. Les CMS sont donc des outils indispensables à la création et à l’entretien de sites webs dynamiques, dont le contenu change régulièrement. En gros, le CMS gère le contenu tandis que vous gérez la forme. Comme dit dans le titre, un bon compromis entre tout faire soi-même (I) et ne presque rien faire (II).

Le CMS introduit deux notions dans la gestion d’un site : celui-ci est séparé entre le front-office, aussi front-end, et le back-office, ou back-end. Le front-office désigne tout le contenu visible par n’importe quel visiteur du web. Le back-office désigne l’interface d’administration du CMS, et par extension, du site.

Il existe pleins de CMS différents. Pour une liste assez complète, je vous renvoie à cet article de Wikipédia. Pour ma part, je vais traiter brièvement de quelques-uns que je connais. Tous les CMS évoqués ici sont entièrement gratuits.
-* Contao : Contao est le CMS du site du BDE. C’est un CMS allemand, bien entendu disponible en français, très performant car on peut gérer toutes les pages de style depuis le back-office.
-* Drupal : Drupal est le CMS du site de Sciences Po et de The Economist. C’est un CMS d’origine Belge, disponible en français, et plébiscité pour ses nombreuses facettes d’utilisation : il peut être utilisé tel quel ou offrir des possibilités étendues de personnalisation. Pour les utilisateurs plus avertis.
-* Dotclear : Dotclear est l’un des meilleurs CMS pour un site au format blog. En plus de ça, c’est un CMS français !
-* Joomla! : Joomla! est sûrement l’un des CMS les plus connus en France. Ce CMS au nom venant du swahili (tous ensemble !) et développé internationalement est très usité de par sa facilité de prise en main, même pour un débutant.
-* SPIP: SPIP est un CMS Français. C’est le CMS utilisé pour le site de Sciences Po Multimédia ! C’est celui que je maitrise le mieux, et que je préfère pour plusieurs raisons : il laisse une bonne marge de manœuvre à l’utilisateur, des centaines de plugins sont disponibles pour personnaliser à l’infini son site, il est développé par des Français disponibles très souvent sur un t’chat pour vous aider à régler vos problèmes (et de manière générale la communauté est très active) et SPIP fonctionne par un système de squelettes qui simplifie au maximum la gestion de l’affichage du contenu. Par ailleurs, SPIP offre la possibilité de générer très facilement un site multilingue. Je ferai un article plus détaillé sur la prise en main de SPIP. Le site du Monde diplomatique utilise SPIP.
-* WordPress : WordPress est l’autre CMS très populaire pour les blogs. Il permet cependant de gérer des sites plus gros et plus compliqués qu’un simple blog.

Vous êtes maintenant prêts à avoir votre site ! Les CMS ont tous des procédures d’installation plus ou moins similaires qui impliquent de transférer des fichiers par FTP, puis de lancer la procédure d’installation en tapant l’URL du back-office (dans le cas d’un site SPIP, www.nomdedomaine.com/ecrire). Pour un site-modèle, vous n’avez qu’à remplir les champs demandés.

Prochainement : l’utilisation d’un logiciel FTP, quelques bases en CSS et HTML et plus de détails sur SPIP.