Avant de se lancer dans un projet Web, il faut déterminer ses besoins.

Puis, chercher le type de site web qui peut correspondre à vos attentes.

Avant de partir sur des explications plus détaillées sur le fonctionnement technique d’un site Web, il faut savoir qu’il existe deux principaux types de sites web, qui ont une philosophie différente :

  1. Le site statique
  2. Le site dynamique (catégorie à laquelle appartiennent WordPress, Joomla, Prestashop, etc.)

Le site statique

Principe du site statique (schéma)

Au début de l’ère du Web, il suffisait de composer ses pages HTML, soit en les créant directement via un éditeur de texte (avec une connaissance élémentaire du HTML) ou via un logiciel spécialisé. Cela revenait à créer des documents d’un traitement de texte (il est d’ailleurs possible de créer des fichiers HTML avec Microsoft Word).

Ensuite, il fallait les téléverser sur son hébergement Web, avec un autre logiciel comme Filezilla. À noter que certains éditeurs spécialisés, comme Adobe Dreamweaver, peuvent être hybrides : création et transfert dans un même software.

Bien entendu , il est toujours possible de procéder ainsi. Mais le site statique est pratiquement de l’histoire ancienne.

Par statique, il ne faut pas comprendre sans interaction possible. Mais, pour le moment, je ne parlerai pas de scripts qu’il est possible d’ajouter sur un site statique, ni l’emploi d’iframe (cadre dans la page qui pointe vers un contenu externe).

Principe

Le processus est assez simple :

  1. L’internaute (appelé « client ») demande à visiter une page de votre site
  2. Le serveur qui héberge votre site envoie la page « en kit » (contenu, structure, style et effet)
  3. Votre navigateur Web reçoit le « kit » et assemble la page

Le fichier HTML est envoyé de la façon dont son auteur l’a créé. À aucun moment, le serveur n’intervient pour modifier la page.

Le serveur Web n’est rien d’autre qu’un guichetier, donnant un colis avec à votre navigateur.

Fin de l’histoire, et c’est déjà pas mal 🙂

Maintenance difficile

Le principe est donc simple : l’auteur fabrique une page et la stocke en ligne en attendant qu’un internaute tombe dessus.

Sauf que dans la pratique, un site Web peut contenir un très grand nombre de pages et ainsi devenir très volumineux.
Pour peu que vous alliez dans cette direction (comme avec un blog), la méthode est non seulement fastidieuse, mais elle permet peu d’interactions autres pour le visiteur (pas de moteur de recherche par exemple).

Cela dit, il est possible de découper sa page Web de manière à « conserver » les parties communes avec les autres pages. Ainsi, l’entête et le pied de page notamment peuvent être modifiés de sorte que cela s’applique à l’ensemble du site. Cette technique est couramment utilisée avec le langage de programmation PHP. Il s’agit alors d’une première approche du site dynamique (disons dans la mesure où on ne dépasse pas 5 pages) 🙂

Sans aller jusqu’à la programmation, l’habillage du site par les feuilles de style (CSS) permet de pouvoir changer l’apparence de ses pages sans passer par la manipulation, une par une, des pages.

Pour résumé, il est possible de créer un site Web uniquement avec du HTML (simple à apprendre), et, par un souci d’esthétisme qui tient du bon sens, de personnaliser l’apparence de ses pages avec du CSS.

N’ayez pas peur de vous mettre au  code. Ça peut paraître difficile au début, comme la première fois que vous avez utilisé un ordinateur, mais l’usage vous montrera qu’il n’en est rien (tant que vous n’entrez pas dans de la programmation avancée).

Encore d’actualité ?

Exemple de site statique (cv)Est-ce pour une technique de création de sites Web à bannir de nos jours ?

Pour l’administration, j’aurais tendance à dire oui (conformément à ce que je vous ai dit ci-dessus).

Mais il faut savoir qu’une page statique se charge plus vite qu’une page dynamique (à contenu égal). Pourquoi ? Parce que le serveur (votre hébergement Web) ne « fabrique » pas la page.
Nous allons voir cependant que les sites dynamiques ont une astuce pour approcher de la vitesse de chargement du site statique.

Ceci étant, un site statique, pour un faible contenu, reste une méthode acceptable, voire recommandée. C’est le cas par exemple de mon cv en ligne.
Un site en one page peut aussi être statique (la navigation se fait alors avec des « ancres », c’est-à-dire des liens qui pointent sur une zone de la page. Attention à ne pas concevoir une page très lourde et difficile à charger pour les connexions Web faibles). Les sites one page sont justement censés pour un faible contenu qui change peu.

Le site dynamique

Principe du site dynamique (schéma)

Dynamique signifie tout simplement que le site peut s’adapter à la demande des visiteurs. Grosso modo, le site charge ce que le visiteur lui demande. Idéal lorsqu’on a beaucoup de pages sur un site Web, comme un blog ou un commerce en ligne par exemple.

Principe

Le site web dynamique devient un puzzle qu’assemble votre serveur web (revoir si besoin l’article sur Qu’est-ce-que le Web ?).

Rappel du processus :

  1. L’internaute (appelé « client ») demande à visiter une page de votre site
  2. Le serveur analyse ce qu’il doit faire
  3. Le serveur peut interroger la base de données pour récupérer le contenu (ex : blog)
  4. Le serveur récupère les éléments de la page dans lesquels « il injecte » le contenu
  5. La page est envoyée en « kit », comme dans le cas du site statique
  6. La page est assemblée par le navigateur de l’internaute
On peut donc supposer qu’un site dynamique, qui a plus de tâches à éxécuter, est plus lent à charger qu’un site statique.
Heureusement, les sites dynamiques ont un système qui permet d’avoir un avantage de chargement équivalent aux sites statiques : la mise en cache des pages. Peut-être en avez-vous déjà entendu parler ou utiliser à travers un système automatique de mise en cache.

Conteneurs et contenus

Le conteneur et le contenu sont dissociés. Le conteneur est lui-même découpé en 3 grandes parties :

  1. l’en-tête,
  2. l’emplacement du contenu principal
  3. le pied de page.

Des barres peuvent aussi se greffer (sur le côté, en haut ou en bas).

Bien sûr, on peut retrouver ce type de présentation sur un site statique, mais là, il s’agit plus de « zones », de « régions » vides qui chargent un contenu différent selon la page demandée.

Les CMS

Logos CMS

 

Un site dynamique est bien plus difficile à créer qu’un site statique, car il demande obligatoirement de la programmation.

Heureusement, il existe des systèmes déjà prêts, qu’on appelle Système de Gestion de Contenu (ou CMS pour Content Manager System).

Les plus connus sont WordPress, Joomla! ou encore Drupal, téléchargeables ou directement installés chez les sociétés d’hébergement.
Il existe aussi des CMS uniquement accessibles en ligne (qui posent toutefois le problème de ne avoir totalement la main sur son site, un peu comme si vous ne pouviez pas accéder aux moteurs de votre voiture).

L’avantage est donc de gérer son site depuis un back office, « arrière boutique » de gestion du contenu invisible pour vos visiteurs.

Les CMS proposent aussi des extensions, ou plugins, qui ajoutent un tas de fonctionnalités (météo, etc.).

L’inconvénient est la lourdeur des systèmes. Tout ça peut évidemment s’optimiser, mais ce n’est pas forcément évident à réaliser.

Les CMS sont des solutions, souvent simples et efficaces, à privilégier cela dans la plupart des cas, et rien que WordPress représenterait 25% de tous les sites Web !

Sachez enfin qu’il est possible de transformer un site statique en site dynamique, et ce, sur n’importe quel CMS 😉 L’opération consiste en une découpe du thème dans le template actif du CMS par un travail d’intégration Web.
Donc, ne vous inquiétez pas du choix si vous voulez faire évoluer votre site, tout est possible.

Pour finir, je vais vous poser une petite devinette : Netprog propose un blog que vous êtes en train de consulter, c’est donc que Netprog est un site… ? ^_^

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

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=""> <s> <strike> <strong>

*