« Dis papa, comment on fait des sites web ? »

Plutôt que donner des nouvelles, ce qui ne serait pas bien intéressant en ce moment car je suis calé en rythmé métro-boulot-pas beaucoup de dodo, ce billet va être dédié à une vulgarisation détaillée de mon job. Pour les nouvelles elles-mêmes, je mettrai en ligne des photos (relativement vieilles déjà) quand j’aurai vaincu la  flemme qui me paralyse quand je rentre le soir.

Quand quelqu’un me demande ce que je fais dans mon stage, je réponds « du développement web ». Et là, il existe en gros deux réponses : celle du geek, « ok. Quoi précisemment ? », et celle du reste du monde (95%) : « oh, ok. » Mais évidemment, le sens caché de cette réponse est « gné ? », car le public non-averti n’entend rien au vocable technique des gens-qui-parlent-aux-ordinateurs. Et pourtant c’est pas du tout compliqué, quand on vulgarise un minimum.

« Dis papa, comment on fait des sites web ? »

Hé bien fiston, c’est pas bien compliqué. D’abord, première notion à comprendre, un site web c’est du code informatique stocké sur un ordinateur distant : le serveur. Comme son nom l’indique, cet ordi « sert » ce code, c’est-à-dire l’envoie aux gens qui le demandent. Les gens qui le demandent, c’est nous. Ensuite, un logiciel qu’on appelle le navigateur (comme Firefox, ou Internet Explorer selon une rumeur) récupère ce code, le comprend et le transforme en la page qui s’affiche. Pour faire une analogie (mal choisie, mais simple à visualiser) avec les cafés, on dit que l’ordinateur qui surfe sur le web avec son navigateur est le client. On parle de modèle client/serveur.

Maintenant fiston, je vais détailler un peu comment le code lui-même est fait, parce que le monsieur qui écrit sur le prompteur, c’est de ça qu’il veut parler pour expliquer ce qu’il fait pour son stage. Comme tu connais vraiment rien à rien – sort ton doigt de ton nez ! -, on va aller du plus simple au plus compliqué, ce qui s’avère aussi être à peu près l’ordre chronologique d’apparition.

1. le HTML

Le code de base, l’origine, l’alpha et l’oméga du Web, c’est lui. C’est pas vraiment un langage de programmation, mais plus un langage de description de document. C’est en fait un ensemble de balises décrivant la structure de la page web et son contenu. Ça a cette gueule :

<HTML>
<head>
<title> Titre de la page web </title>
</head>
<body>
<p> Ceci est un paragraphe ! </p>
</body>
</HTML>

Ça, une fois envoyé par le serveur au client, ça donne une grande page blanche avec « Ceci est un paragraphe » écrit. Bon, il y a plein de balises, pour faire des liens, mettre des images, des titres etc… Maintenant, on peut même mettre des dessins, des vidéos et du son.

2. le CSS

Ouais, mais bon pour le moment il est bien moche ton site. Il est même parfaitement dégueu : noir sur fond blanc, bleu souligné pour les liens. Point barre. Et c’est normal : le HTML est fait pour décrire la structure et le contenu du document, pas son apparence. C’est là que vient le CSS : une fois de plus ce n’est pas un langage de programmation, c’est juste une liste de trucs de ce genre :

p
{
font-family: »Times New Roman »;
font-size:20px;
}

Tu l’auras compris, fiston : on donne le nom d’une balise (ici, « p »), et entre accolades on donne des propriétés d’apparence pour toutes les balises de ce genre. Ici, toutes les balises p de la page HTML verront leur contenu écrit en lettres de 20 pixels, avec la police Times New Roman. On peut faire plein de choses en CSS : mettre de la couleur, des animations, etc…

3. le PHP

Ok fiston, maintenant accroche-toi bien à ton nounours, parce qu’on passe au niveau supérieur. Là, on a des pages HTML jolies grâce au CSS. Mais c’est pas terrible : tout est figé. La page est la même, tout le temps, pour tout le monde. Le seul moyen de changer, c’est qu’un gars aille changer le code présent sur le serveur. Pas terrible…

C’est là que le PHP arrive. Le PHP est un vrai langage de programmation. Le webmaster écrit un programme en PHP dont, lorsqu’on l’exécute, le résultat en sortant est du code HTML. Et le webmaster met ce code PHP sur le serveur. Quand un client (id est un gland de base, comme toi fiston) demande le code HTML de la page au serveur, le serveur lance ce programme PHP (comme toi tu lancerais un jeu sur ton pc), et envoie le code HTML qui sort de ce programme au client. Et là, tu vois l’astuce ! Comme on a plus un code HTML fixe, mais un programme exécuté à chaque fois que quelqu’un demande la page, on peut faire un contenu qui change pour chaque visiteur ! Le programme peut par exemple écrire l’heure qu’il est quand il génère la page HTML, ou le nombre de personnes ayant visité le site avant. Classiquement, il y a aussi une base de données sur le serveur, et donc on va chercher les données qu’on veut dedans et on s’en sert pour faire des pages adaptées au visiteur. Grâce au PHP, on peut faire des commentaires sur un blog, voire même tout simplement afficher les articles d’un blog, et en ajouter facilement sans avoir accès au serveur lui-même. Du code PHP, ça ressemble à ça :

<?php
$req = $bdd->prepare(‘SELECT id, titre, contenu, DATE_FORMAT(date_creation, \’%d/%m/%Y à %Hh%imin%ss\’) AS date_creation_fr FROM billets WHERE id = ?’);
$req->execute(array($_GET[‘billet’]));
$donnees = $req->fetch();
?>

<div>
<h3>
<?php echo htmlspecialchars($donnees[‘titre’]); ?>
<em>le <?php echo $donnees[‘date_creation_fr’]; ?></em>
</h3>
</div>

Et ouais, je t’avais dit que c’était de la vraie programmation maintenant. Tu remarqueras, fiston, qu’on voit encore du HTML (les balises <div>, <h3>…) : normal, puisque le PHP génère du HTML ! A la fin de l’exécution du programme PHP, il reste plus que du HTML. Toi, ton navigateur ne reçoit que du HTML ; encore heureux d’ailleurs, car il ne comprend pas le PHP. Rattache tes bretelles à la salopette mickey, on passe au dernier niveau.

4. le JavaScript

Maintenant, on a un joli site qui se créé dynamiquement pour chaque visiteur, en fonction de ce qu’on veut. Cool. Mais dernier problème : une fois le HTML généré par le PHP et envoyé au client, il est figé. Et ça, c’est pas cool ! Moi je voudrais pouvoir faire des trucs qui bougent, des jolis menus qui apparaissent quand ma souris survole un bouton, etc… Et ça, on peut pas le faire en PHP.

C’est parce que le PHP est un langage côté serveur, c’est-à-dire qu’il s’exécute sur le serveur. Ce qu’il faudrait maintenant, c’est un langage côté client, qui s’exécuterait sur le PC client, et pourrait donc savoir où est la souris, ce qu’il se passe au niveau du clavier, etc… Hé ben devine quoi fiston ? Ce langage, c’est le JavaScript. Contrairement au PHP, tu télécharges le code JavaScript en même temps que le HTML et le CSS. Et une fois de plus, c’est ton navigateur qui se charge de tout faire tout seul. Et voilà comment on fait Twitter, Facebook, et tout ce qui est beau, bien et dangereux pour la vie privée sur le web. Du JavaScript, ça ressemble à ça :

function checkInt(x) {
if (x % 1 != 0) {
document.getElementByID(« container »).innerHTML= » »;
throw new TypeError(x +  » is not an integer »);
}
return x;
}

Et ouais, c’est du code « classique » maintenant. Plus de HTML (même s’il peut y en avoir, on fait ce qu’on veut !), de CSS, et bien sûr pas de PHP.

5. Et tout le reste !

Et le problème, c’est que ça s’arrête pas là. Il existe plein d’alternatives au PHP et au JavaScript, et d’autres trucs ayant d’autres utilités… Chaque grosse entreprise en rapport avec le web a créé ses propres technologies pour tenter de les imposer pour se faire de la thune ou d’autres raisons. Pour lancer quelques noms : .NET, Java, Flash, Ruby… Et que ce soit pour le PHP et le JavaScript ou les autres cités (ou pas cités !), il existe plein d’outils, de libraires (c’est-à-dire du code tout fait, utilisable sans avoir à tout faire soi-même), des API (des libraires faites par des sites web comme Facebook ou Twitter spécialement pour que ce soit facile pour d’autres webmasters de se connecter à ce site pour dialoguer)… Il y a toute une multitude de technos et d’outils partout, plus ou moins populaires.
Et le pire de tout, le fléau, le cauchemar, l’apocalypse zombie : les navigateurs ne fonctionnent pas tous pareil. Un code JavaScript qui marche très bien sur Firefox peut ne pas fonctionner du tout sur Internet Explorer, ou fonctionner différemment, et donc donner un résultat différent ! C’est comme en chinois, tu dis « quelle heure est-il » et un mec te comprend, mais pour l’autre tu viens de dire « je te fais caca dans la bouche » et là, ça passe moins bien !

Voilà fiston, on en arrive à la conclusion. Bon, tu t’es barré jouer à la Playstation depuis 20 min, mais je concluerai quand même : le développement web est très compliqué, parce que même s’il n’y a pas besoin de connaître toutes les technologies, il faut impérativement savoir comment les navigateurs vont interpréter le code que tu écris. Il faut respecter les standards (même si certains croient être plus malins et faire mieux, ils ne le sont JAMAIS et ne font en fait que de la merde), faire quelque chose qui soit à la fois beau et fonctionnel pour l’utilisateur – parce que c’est le but au fond, que l’utilisateur reste sur ton site et soit content ! -, et propre et maintenable pour que des gens puissent modifier ton code si besoin,  et que le navigateur n’ait pas trop de difficultés à le faire tourner.

« Merci papa ! Tu soûles un peu avec tes romans qui durent trois plombes, mais au moins je suis moins crassement inculte qu’il y a une heure. Mais finalement, il fait quoi dans son stage le monsieur qui écrit le texte du prompteur ? »

Moi, mon job c’est de faire du JavaScript. Sans entrer dans les détails, top-secrets et confidentiels-défense, je fais pour le moment un éditeur de texte dit « riche », c’est-à-dire avec des fonctionnalités « d’amélioration visuelle » (ça veut dire le fait de pouvoir mettre en gras, italique, copier/coller, liens hypertextes tout ça). Mais tout dans le navigateur. Et c’est du boulot, vous pouvez me croire. Entre Internet Explorer qui ne respecte pas les standards et demande donc de mettre des exceptions aux règles partout dans le code, et le fait que de base ce soit pas simple mine de rien, y a de quoi s’occuper. Et le pire est à venir, puisque par la suite je vais devoir trouver/créer un moyen d’embarquer des objets (au sens informatique du terme, c’est de la programmation) beaucoup plus complexes dans cet éditeur de texte. Mais c’est vraiment très instructif et intéressant !

Voilà, c’est tout pour ce soir, je vais maintenant retourner à mon manque chronique de sommeil et à mes courbatures dues à ma pratique excessive de sport – je vous entends rigoler d’ici, bande de… méchants, mais sachez que je fais environ 2 heures de badminton deux fois par semaine, et que je suis dans l’équipe de foot de ma boîte avec un match par semaine. Là en l’occurence, j’ai fait du badminton de 17h à 19h15 (je suis précis !), et maintenant j’ai mal au dos parce que j’y suis allé comme un bourrin… Sur ce, à tchao bonsoir.

Publicités
Cet article a été publié dans Geek, Internet. Ajoutez ce permalien à vos favoris.

Un commentaire pour « Dis papa, comment on fait des sites web ? »

  1. Ping : Livres numériques, statistiques Twitter, virus...Billets de la semaine #113 - Blog du Modérateur

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s