Melissa pose en pin up version intello, triant ses vinyles.

UBVEL #2 : c’est quoi un site web

Aujourd’hui, nous nous intéressons à ce qu’est un site web, autrement dit, sa nature “technique”. Pas de panique, nous restons simples. Ainsi, vous avez plus d’eau à votre moulin pour mieux déterminer comment, avec quoi et/ou avec qui monter votre vitrine en ligne si vous n’y connaissez rien.

Commençons par le commencement.

C’est quoi un ordinateur

Oui. C’est ici que ça commence. Nous avons tous plus ou moins un point de vue d’usager sur les ordinateurs. Je vous invite à regarder sous le tapis.

Colossus est un ordinateur conçu durant la seconde guerre mondiale. L'un de ses reconstitution est exposée à Bletchley Park. Photo Antoine Taveneaux (Own work) [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3ABletchley_Park_14.jpg">via Wikimedia Commons</a>
Colossus est un ordinateur conçu durant la seconde guerre mondiale. L’une de ses reconstitutions est exposée à Bletchley Park. Photo Antoine Taveneaux [CC BY-SA 3.0], via Wikimedia Commons
Un ordinateur c’est un ensemble de morceaux de plastique, de métal et de cailloux associés entre eux et dans lesquels on fait passer de l’électricité.

Ici commence le code informatique. Quand il n’y a pas d’électricité, nous convenons que ça fait 0. Quand il y en a, nous convenons que ça fait un 1. L’ordinateur, c’est une machine qui fait défiler des 0 et des 1 dans ses circuits.

D’abord, un peu d’ordre. On découpe les événements en tranches. Pour chaque tranche, on convient que la valeur peut être de 0 ou de 1 en fonction que le courant électrique passe ou pas. Les tranches sont appelées bits.

Défilé de 0 et 1

Viennent ensuite les octets. Les premiers informaticiens ont décidé d’assembler les bits par paquets de 8. Pour chaque octet, nous avons 8 positions différentes qui peuvent chacune prendre la valeur 0 ou 1. Au final, ça nous donne 256 possibilités d’octet. En voici un :

0

0

0

1

0

1

1

0

Couche suivante, c’est l’encodage. Chaque octet (ou groupe d’octets) se voit attribuer une valeur : un chiffre, une lettre, une opération etc. Cela forme des grilles d’équivalences.

 Un truc “drôle” au sujet de l’encodage

Il existe plusieurs grilles d’équivalence différentes entre octets et symboles. Vient s’ajouter à ceci que le nombre de bits contenus dans les octets peut varier. Qu’est ce qu’on rigole !

Capture d'écran d'une grille d'équivalence entre différents encodages dont l'UTF-8. Voir le document sur Wikipédia.
Capture d’écran d’une grille d’équivalence entre différents encodages dont l’UTF-8. Voir le document sur Wikipédia.

Normalement, vous n’avez pas à vous soucier de ce vaste sac de nœuds (je vous entend soupirer de soulagement). En théorie vos logiciels détectent automatiquement l’encodage de vos pages et documents (notez bien que vos logiciels sont eux-mêmes du code informatique, donc qu’ils sont eux-mêmes écrits dans un certain encodage… et que c’est pareil pour votre système d’exploitation (Windows, Ubuntu, Mac OS…)

Si vous avez envie d’expérimenter un peu la question, vous le pouvez : rendez-vous dans le menu du navigateur avec lequel vous consultez cette page. Vous trouvez quelque chose du genre “encodage du texte” (dans la section Affichage avec Mozilla Firefox) et vous en sélectionnez un au hasard.

Important : une fois que vous avez vu, n’oubliez pas de remettre l’encodage sur “détection automatique” !

C’est quoi la programmation

C’est l’activité qui consiste à écrire l’ensemble des commandes qui va piloter la réalisation d’une action par un ordinateur. À l’aube des temps de l’informatique, les développeurs n’avaient pas le choix. Quand ils écrivaient leurs programmes, ils le faisaient en binaire ou un encodage à peine plus intelligible pour l’esprit humain que des suites de 0 et de 1. Vous imaginez bien que ça n’a pas duré. Pas fous. Ils ont inventé les langages de programmation.

Dans le concept, ça ressemble à ça :

Langage de programmation Sauter
Encodage Maintenir l’équilibre, fléchir les genoux, pousser fort sur les jambes.
Binaire Ajuster la position du centre de gravité du corps, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “plier”, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “retendre”, exécuter le schéma retendre avec rapidité.

Les développeurs écrivent leurs programmes avec des langages de programmation. Ça aussi c’est du code informatique. Il existe un grand nombre de langages de programmation, certains sont dérivés les uns des autres. Ils ont tous des avantages et des inconvénients. Le code écrit par le développeur est ensuite traduit en 0 et 1 de manière à ce que l’ordinateur l’exécute.

Encore un truc drôle sur l’encodage et les langages de programmation

C‘est quelque part entre l’encodage et les langages de programmation que se décide ce que l’électronique de votre ordinateur fait quand elle reçoit une commande. Dans tous les cas, la seule façon d’atteindre l’électronique de votre ordinateur reste le langage binaire (donc des paquets de 0 et des 1 auxquels ont été attribués des valeurs).

Chaque composant électronique a ses propres commandes. Il est impossible de le piloter avec autre chose que le set de commandes qui lui est propre. Les sets de commandes sont différents d’un composant à l’autre, d’une marque à l’autre.

Et le mot magique ? S'il te plaît ?
Un ordinateur est un objet. Il se pilote. Crédit photo : d’après blickpixel, CCO.

Là encore, en théorie, vous n’avez pas à vous en soucier… sauf si un jour vous ajoutez un composant (exemple : une carte graphique) à votre ordinateur et que le pilote (aussi appelé driver) qui va avec reste introuvable. Forcément, ça marche moins bien.

Vous noterez que je parle de piloter l’électronique de votre ordinateur. Quand vous tournez le volant de votre voiture, vous ne lui faites pas comprendre qu’elle doit tourner. Vous la faites tourner.

Ainsi nous avons des mille-feuilles entiers de conventions qui nous permettent de passer de successions de 0 et de 1 à 42* l’affichage d’une page web sur un ordinateur.

* Le Guide du voyageur galactique de Douglas Adams est un grand classique de la science-fiction, il a été adapté en film.

Sommes-nous sur la même longueur d’onde ?

La séquence “0 1 1 1 1 0 0 1” est-elle un octet ?

 
 

Question 1 sur 1

Un site web ce sont des 0 et des 1

Chaque action réalisée par un ordinateur a été pensée en amont par un développeur. Il n’y a aucune exception. Un site web, ce sont aussi des 0 et des 1. L’ordinateur les additionne, les déplace, les ré-ordonne ou les compare en fonction de ce que la personne qui a écrit le code du site a pensé et voulu.

L’une des spécificités d’un lot de 0 et 1 qui constituent un site web que vous consultez, c’est qu’ils sont enregistrés sur un autre ordinateur que le vôtre. C’est là qu’internet intervient.

De l’intelligence des ordinateurs

Nao est un robot humanoïde interactif développé par la société Aldebaran Robotics. Il offre de très nombreuses perspectives en raison de ses aptitudes à l'interaction avec les humains. Photo <a href="/wiki/User:JeanBono" title="User:JeanBono">Xavier Caré</a> / <a href="/wiki/Main_Page" title="Main Page">Wikimedia Commons</a>, <a href="https://commons.wikimedia.org/wiki/File%3AInnorobo_2015_-_NAO_(cropped).JPG">via Wikimedia Commons</a>
Nao est un robot humanoïde interactif développé par la société Aldebaran Robotics. Photo Xavier Caré / Wikimedia Commons, via Wikimedia Commons

Yann Le Cun qui est directeur du laboratoire d’intelligence artificielle de Facebook le dit ainsi : “Ces systèmes ne sont intelligents que parce que des ingénieurs ont pensé à toutes les possibilités.”

Autrement dit, ce n’est pas le système qui est intelligent, ce sont les personnes qui ont conçu le système.

Aujourd’hui, les projets de pointe type Alphago (un ordinateur spécialisé dans le jeu de go qui a battu le n°1 mondial Lee Sedol) ou Tay (l’intelligence artificielle qui tape la discute de Microsoft) nous font nous poser 1 001 questions sur ce qu’est l’intelligence. Pour un site web, nous sommes très très loin de ce genre de considérations… à moins que vous ayez un budget de plusieurs millions d’euros à y consacrer.

C’est quoi internet

Les internets sont des réseaux composés de millions (milliards ?) d'ordinateurs qui peuvent se relier deux à deux entre eux, sans passer par un centre. En voici une représentation partielle construite en 2005. Image By The Opte Project [<a href="http://creativecommons.org/licenses/by/2.5">CC BY 2.5</a>], <a href="https://commons.wikimedia.org/wiki/File%3AInternet_map_1024.jpg">via Wikimedia Commons</a>
Les internets sont des réseaux composés de millions (milliards ?) d’ordinateurs qui peuvent se relier deux à deux entre eux, sans passer par un centre. En voici une représentation partielle construite en 2005. Image By The Opte Project [CC BY 2.5], via Wikimedia Commons

Disons plutôt “les internets”. À l’origine, il y avait des méthodes conçues pour que les ordinateurs puissent échanger des données (des 0 et des 1) à distance en passant par un réseau de télécommunication. Notez bien que je parle “d’échanger”. Dans cette configuration, les deux ordinateurs reçoivent et envoient. C’est l’une des différences majeures qui existe entre votre télé, qui n’est pas interactive et les sites web qui sont interactifs.

Sur la base de ces méthodes se sont constitués des réseaux d’ordinateurs. Puis ces réseaux ont été interconnectés entre eux. En 2005, une cartographie partielle des internets donnait l’image ci-dessus.

À notre niveau, disons que les internets, c’est l’ensemble des ordinateurs qui peuvent échanger des données à distance par les tuyaux des réseaux de télécommunication. Ceux qui ont envie de s’intéresser un peu plus à la question peuvent visionner cette conférence de Benjamin Bayart qui est un miracle de pédagogie (remplacez le mot “politique” par “économique”, ça marche pareil.)

Quel est le comble d’internet ?

Ça peut avoir l’air d’une blague Carambar, et pourtant… Ce qu’on appelle le web (sous-entendu : l’ensemble des sites web) et ce qu’on appelle internet, ce n’est pas la même chose. Les internets sont des ordinateurs interconnectés, ça on vient de voir. Il n’y a pas que les sites web à emprunter les routes des internets. Il y a beaucoup d’autres types d’échange de données. Je suis certaine que vous en connaissez sans le savoir d’ailleurs. Au hasard :

La téléphonie par internet

Le chat

Le mail

Le peer to peer

Un site web est un ensemble de 0 et de 1 spécialement pensé par ses concepteurs pour être interactif, diffusé par internet et auquel on accède en utilisant un logiciel prévu à cet effet : un navigateur web. Il y a 2/3 nuances de plus pour arriver au web “grand public”. Passons, ce n’est pas le sujet.

Comment ça marche un site web

Quand vous voyez une page web dans votre navigateur, cela signifie :

  1. Votre ordinateur (appelons-le n°1) a envoyé un signal à un autre ordinateur (appelons le n°2) grâce aux tuyaux d’internet. À la source de ce signal, il y a vous, qui par exemple avez tapé une adresse web dans la barre de votre navigateur (Firefox, Internet explorer, Safari etc.)
  2. N°2 a reçu le signal, l’a traité et cela déclenche le fait qu’il envoie des données à votre attention par les tuyaux d’internet. Ces données sont du code informatique.
  3. N°1 reçoit les données. Votre navigateur les prend en charge. Le code reçu contient toutes les instructions pour permettre à votre navigateur d’ordonner à l’électronique de votre ordinateur de fabriquer la vue de la page puis de l’afficher. Sur la droite vous avez un cadre blanc, en haut une photo, au milieu du texte, ici un lien vers une autre page, là un bouton etc.
  4. Vous cliquez sur un truc. Pour ce truc là, votre ordinateur n’a pas toutes les données. La boucle est bouclée, cela envoie un nouveau signal de n°1 vers n°2.

PS : notez bien qu’une image de bouton, ce n’est pas un bouton. Un bouton, c’est une image qui a été associée à des fonctionnalités pensées pour s’activer lorsque vous faites une action précise type un clic droit de souris dans une certaine zone.

Pourquoi je vous raconte tout ça ?

Parce qu’un site internet, il faut commencer par le penser. Si vous ne savez pas à quoi vous pensez, il y a toutes les chances que votre projet se transforme en Useless box.

Useless box en action
La Useless box est un grand classique des fablabs. Gif issu de la vidéo de présentation de Think geek.

Il y a une bonne raison à cela. Les prestataires et fournisseurs sont là pour vous vendre un truc (et si c’est gratuit, c’est vous le produit, donc c’est pas gratuit, coucou Messieurs Google et Facebook !)

S’ils peuvent faire en sorte que ça rencontre votre besoin, ça les rend plutôt contents. Mais si c’est trop compliqué de rencontrer votre besoin parce que vous, vous ne connaissez pas votre besoin, ils vous vendront un truc quand même.

Comment on fait un site web

Un jour, une personne a remarqué qu’en frappant deux cailloux ensembles, ça faisait une étincelle. 300 000 ans plus tard nous avions des développeurs qui écrivaient le code nécessaire à faire afficher les sites web.

Pourtant même avec un langage de programmation situé tout en haut du mille feuille de conventions informatiques, ça reste long et pénible. Par ailleurs, si on leur demande leur avis, les développeurs sont complètements partants pour se fatiguer moins pour en faire plus. Comme vous en fait. Alors voilà ce qu’ils ont imaginé.

Module préétabli Faire une course en sac
Langage de programmation Sauter
Encodage Vivre, maintenir l’équilibre, fléchir les genoux, pousser fort sur les jambes.
Binaire Faire battre le cœur, actionner les poumons, ajuster la position du centre de gravité du corps, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “plier”, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “retendre”, exécuter le schéma retendre avec rapidité.

 

(Ceci est une métaphore qui a ses limites. En tant qu’être humain, vous avez compris que votre ordinateur ne comprend rien.)

Puisque les sites web ont beaucoup de choses en commun, autant ne pas les refaire à partir de rien à chaque fois. Les “modules préétablis” ne sont pas un nouveau langage. Ce sont des éléments pré-écrits avec des langages de programmation. Reste ensuite à customiser les éléments pré-écris. Afin de rendre tout ceci plus facile à manipuler, des logiciels ont été créés dans ce but. Il en existe des tas, ils sont plus ou moins évolués et ont tous leurs particularités. C’est de cette façon qu’on fait des sites web à pas trop cher (que ce soit en temps ou en argent).

Les fonctions “de base” d’un site web

  • Publier des textes
  • Publier des images
  • Publier des vidéos
  • Publier des enregistrements
  • Éléments interactifs : liens cliquables, cases à cocher, menus de navigation etc.
  • Liberté de choix sur la mise en page de tous ces éléments

En gros, tous les sites web ont ça. C’est plus ou moins joli, flexible et simple à manipuler.

Il existe des quantités impressionnantes de logiciels de création de site web. Si vous faites quelques recherches sur la question, vous allez être rapidement noyé sous la masse. C’est pour cette raison que personnellement, je vous conseille de réfléchir d’abord à votre besoin. On mettra les outils en face ensuite.

Quel est votre besoin ?

En tant que rédactrice, j’en identifie trois :

  1. Vous faire connaître de vos clients potentiels
  2. Resserrer les liens avec vos clients. Du même coup, vous vous faites connaître de clients potentiels.
  3. Apporter un service en ligne à vos clients. Du même coup, vous resserrez les liens et vous faites connaître.

(Je pars du principe que votre modèle économique ne relève pas du numérique)

Pour les deux premiers points, n’importe quelle structure de site web qui possède les fonctionnalités de base listées ci-dessus fait très bien l’affaire. Si si, j’vous jure. En fait le point 3 s’en satisfait très bien aussi, hormis quelques rares cas. Un seul bémol : ceci est valable à condition de vous être mis à la place de votre client pour rencontrer son besoin à lui. Votre site web n’est pas fait pour vous faire plaisir à vous, il est fait pour servir votre client ! Je vous dois la vérité, votre client s’en fout de vous (en tout cas, tant qu’il est devant son écran, dans la vraie vie c’est différent). Ce qui l’intéresse c’est d’obtenir ce qu’il veut rapidement et sans se casser la tête. Si vous avez intégré ça, 50% de la réussite est déjà acquise.

(Ceci était un cri du cœur et pourrait faire l’objet d’une encyclopédie en 10 volumes…)

Choix de la techno pour votre site web

Il existe deux grandes familles d’ossatures préétablies de sites web : ceux qui sont soumis à des licences libres et ceux qui sont soumis à des licences propriétaires.

/!\Warning/!\ Les licences libres sont souvent associées à la gratuité et les licences propriétaires au fait que c’est payant. Pourtant un logiciel libre peut être payant et un logiciel propriétaire peut être gratuit.

Les ossatures libres

Ça va sans doute vous étonner : il y a des tas de hurluberlus qui sont complètements partants pour travailler beaucoup et ne rien gagner du tout (ce n’est d’ailleurs pas incompatible avec l’envie de gagner beaucoup en n’en foutant pas une, c’est juste que ça ne se passe pas au même moment). Ces personnages étranges avaient déjà inventé internet et tout ce qui fait fonctionner internet. Ils se mirent à faire pareil pour les ossatures de sites web. Les principales sur le “marché” sont WordPress, Joomla !, Drupal et Dotclear. c’est ce qu’on appelle des CMS (content management system soit système de gestion de contenus en français).

Les ossatures propriétaires

Dans ce cas, c’est une entreprise qui met en place sa propre ossature de site web. L’entreprise gagne ensuite sa vie en adaptant son ossature à des besoins particuliers.

Dans la pratique, on choisit comment ?

Si vous voulez que votre site web fasse des trucs hors norme, étranges et compliqués, sans doute devriez-vous trouver une entreprise qui a une architecture préétablie qui peut l’accepter. Elle vous proposera un développement spécifique en plus, et voilà. Revers de la médaille : vous serez lié à cette entreprise pour votre site et ça risque de douiller.

Si vous voulez que votre site web fasse des trucs standards, afficher des images, des vidéos, du texte voire même du e-commerce, le plus probable c’est que nos hurluberlus ont déjà prévu le coup. Autant aller vers de l’ossature libre, car là, vous faites vous-même ou vous demandez à qui bon vous semble de faire pour vous. En général c’est moins cher, mais voici ce qui à mes yeux est absolument essentiel là dedans :

  • Vous serez en mesure d’apporter de petites modifications à vos contenus même si vous êtes une chèvre en informatique.
  • Vous changez de prestataire quand bon vous semble.

Et les services de création de sites web en ligne alors ?

Personnellement je vous les déconseille du fait que vous n’êtes pas chez vous. Ça a de nombreuses conséquences. Vous pouvez vous retrouver du jour au lendemain devant des modifications drastiques des conditions générales d’utilisation. La plateforme peut fermer du jour au lendemain, et vous perdez tout. Enfin du point de vue de la visibilité dans les moteurs de recherche, c’est une vraie misère (or vous voulez être trouvable, je me trompe ?) Très honnêtement, si vous voulez une vitrine en ligne sans avoir à la mettre en place, pariez plutôt sur ceux qui ont vraiment les moyens de vous rendre visible : créez vous une page Facebook et allez voir du côté de Google My Business.

(PS : si vous êtes de ceux qui s’apprêtent à vendre un rein pour un compte premium sur les Pages jaunes, avant de signer faites vous expliquer clairement la nature de la prestation. Il se pourrait que vous soyez très surpris… Tenez, par exemple voilà un “retour utilisateur” certes un peu long mais très informatif. Leur calcul : chaque “appel qualifié” reçu par les Pages jaunes a coûté 300€.)

Voilà, ce billet touche à sa fin, j’en ai terminé pour aujourd’hui de me faire des amis parmi mes clients potentiels (au hasard, les agences web) en bousillant leur business. Promis, un jour je vous parlerai SEO (edit : c’est fait), ergonomie (edit : c’est fait) et marketing digital.

Publié par

Geneviève Canivenc

1976 : naissance 1995 : un grand malade accepte qu'elle ait accès légalement à une voiture. 2005 : un groupe de grands malades lui confèrent le titre de docteur. 2012 : elle se lance en rédaction et plein de grands malades acceptent de lui faire confiance. Encore à venir : le meilleur.