Qu'est ce que le developpement web? demystifions le ensemble

Qu'est ce que le web? et en quoi consiste réellement le developpement web? la theorie parfois vaut la peine pour baliser le terrain et avoir les choses claires dans la tete avant toute avventure dans un domaine, et en coding, la theorie parfois vaut la peine et à son pesant d'or pour vous expliquer des choses qui vous seront assez claire une fois que vous metterez les mains dans le code et dans ce post, on parle du web, on le demystifie.

Avant de commencer à vous parlez du web, je vais vous signaler que dans le monde du developement comme dans la vie active, il y a enormement ce qu’on appelle des abstractions à savoir quand on veut developer un logiciel on ne se met pas tout de suite à mettre toutes les pièces ensemble, mais on cherche à generaliser en utilisant un concept que j’appelle la “boite noir” (l’abstraction), un logiciel n’est rien d’autre qu’une boite noire qui prend des données en entrée et cherche à restituer d’autres données en sortie, le developeur c’est celui qui cherche à construire cette boite noire de manière à ce que de l’exterieur de la boite on n’aperçoive pas sa complexité, la boite noire elle meme n’est qu’une moisaique fait de plusieurs autres boites noires comme pour dire que à chaque fois qu’un problem en informatique (comme dans la vie active ) est complexe, on le divise en plusieurs boites noires(abstraction), jusqu’arrivé à la plus petite boite qu’on est capable de réellement mettre sur pied, une fois une petite complexite mis sur pied, on prend l’abstration suivante dans le maillon, on l’implemente et ainsi de suite jusqu’à mettre sur pied tout le boulot de la grosse boite de depart (le software). Reguardez attentivement le schema suivant:

Dans l’image ci dessus qui explique en quelque sorte tout l’iter pour la generation d’une page web que l’on va expliquer plus en dessous, vous comprenez que toutes les parties prenantes sont uniquement des abstractions par exemple le navigateur qui interprete le “HTML” generé n’est qu’une abstraction donc une boite noire car nous meme en tant que developeur web, savons simplement que si on lui passe du code HTML, il va l’interpreter et nous l’afficher comme on le lui a decrit dans le code HTML, donc du point de vue du developeur web, le navigateur est une abstration qu'il ne doit pas se soucier de son mecanisme interne de fonctionnement, il en va de meme pour le serveur web, qui interprete une requete demandant une resource web (une page web) sur un repertoire de la machine ou il se trouve et il se charge de lire ce fichier HTML fait par nous developeur et de le renvoyer vers le navigateur, tout ceci c’est une abstraction (boite noire), mais soyez en sure,  le navigateur comme le serveur web, ce sont bien des logiciels ecrit par les developeurs comme vous et moi, à l’interieur de ces logiciels il y a aussi d’ autres abstractions et ce n’est pas un seul developeur qui ecrit ces logiciels mais des milliers de developeurs chacun s’occupant d’une boite noire, comme pour dire chacun ayant un focus bien particulier dans la realisation ou la chaine, tout depend de ce que l’on veut faire, dans notre cas nous voulons faire un site web pour nous appellé dans l'image les “GueMeMens”  qui represente notre réseau social comme facebook, twitter etc.., donc on s’en fou de ce qui se passe dans ces boites noires mais on doit respecter à la regle ce qu’on doit donner à ses boites noires en entrée pour esperer avoir le resultat que l’on veut en sortie, à la fin, notre site web sera aussi une boite noire pour les utilisateurs qui viendrons sur notre site et qui ne savent pas comment on a reuissit à creer la page non?… eh oui nous meme on est entrain de creer une boite noire, raison pour laquelle il y a plein de gens, qui utilisent des logiciels comme “Wordpress” ou “Jomla” pour creer des sites web et ils bombent le torse partout qu’ils sont des developeurs web, oui ils font des site web “Nickel”, mais beaucoup ne savent meme pas comment est fait le “HTML” qui est comme on va le voir tout à l’heure, le language qui permet de definir la structure d’une page web comprehensive au navigateur, en fait eux meme ils utilisent les boites noir “wordpress” et “Jomla” qui leur permet d’ecrire rapidement le “HTML” comme ils veulent à leur place sans qu’ils se mettent à l’etudier car comme vous le verrez, les structures des pages web sont repetitifs et du coup utiliser les logiciels de gestion de contenu comme Wordpress ou Jomla peuvent faire l’affaire à celui qui ne veut pas perdre son temps pour apprendre le language HTML mais peut il ce dernier s’appeller un developpeur? “that the question” .

Il y a de petites choses qu’on doit absolument comprendre pour faire du bon developement web:

Les resaux : c’est une structure ou les informations (les données) et les services sont partagés à travers des peripheries connectées, pour ne pas faire du long crayon, votre machine sur laquelle vous etes entrain de lire cet article à travers son navigateur (cette machine peut etre un ordinateur, un telephone android ou iphone, ou meme une tablette..) est certainement connectée sur internet (si non vous ne serez pas ici à lire cet article), le seul fait qu’il soit capable de demander la page web ou se trouve cet article prouve que votre machine est indirectement connecte à un reseau si non il ne serait pas à mesure de communiquer et de recuper cette page.

Comment recuperer donc une resource dans ce reseau interconnecté?

En 1989 Timoty Berners Lee dans le but de faciliter la recherche des documents dans un réseau qu’ils avaient réalisé dans le cas d’une recherche, à mis sur pied un systheme base sur les “Documents HyperText” qui est juste une methode d’organisation dans laquelle les documents sont interconnectés par des liens “Hyperlinks” qui permettent de naviguer d’un document à l’autre et justement les “Hyperlinks” conviennent le plus pour un reseau plus ample que internet et c’est ça qui est justement à la base des technlogies web aujourdhui base sur le Word Wide Web(www) .

Web page vs. Website?

La notion de page web et de site web est une notion qui porte beaucoup à confusion pour les developeurs web debutant alors que ces deux choses ne sont pas en effet la meme chose (excusez de la totologie), en fait un site web est une collection de page web connecté entre elles par des “Hyperlink”, alors qu’une page web ne contient que du contenu HTML qui decrit la structure de la page en question, en plus tout ce qu’on voit à l’interieur d’un naviagetur web n’est pas forcement une page web, par exemple le navigateur affiche correctement meme un document PDF sans pour autant que ce soit du contenu HTML.

HTML (HyperText Markup Language)

En gros c’est le language du web (WWW), dans cet anacronyme on a expliqué ci dessus le concept de “Hypertext” et pourquoi alors le markup language? le markup language se refer generalement à tous les languages qu’on utilise pour la formatation d’un document, oui meme microsoft word est bien basé sur un markup language propre à lui,il en va de meme pour presque tous les logiciels mail etc..en fait un texte qui ne comprend pas du markup est un texte plein.

Comment le navigateur fait pour generer une page web?

Une fois que le navigateur a à sa disposition le contenu du document HTML fournit pas le developeur, il utilise une procedée appellée “Rendering” (je vous ai dit que on utilisera le plus souvent des termes anglais. car ce sont des termes techniques et meiux les ecrire dans leur concept originale pour qu’il ai tout son sens)

Pour aller terre à terre et expliquer le rendering, immaginez que le navigatur est une machine pour ecraser le “sausus” (la boite noir), le document HTML du developeur comprend le plus souvent une combinaison du HTML+CSS+JS(Javascript) en fait le HTML comme on l’a vu sert pour la formatation du document, le CSS c’est pour le style à savoir comment on voudrait que la page apparaise dans le navigateur, son look quoi c’est ça qui rend la page Nickel, le HTML et le CSS son mari et femme quand tu negliges le CSS la page devient moche puis le plus souvent il y a également un autre fichier qui contient du javascript qui permet de rendre dynamique certain contenu de la page (on en parlera avec des exemples pratiques de tout ces arguments), le sausus à la sortie là c’est notre belle page web, le mecanisme utilise par le navigateur pour faire tout ce melange et produire de la sausus s’appelle le rendering, donc quand je parlerais souvent de rendering quelque part il s’agit bien de cette procedure.

le navigateur durant cette procedure doit lire le document HTML du moins son markup qui en fait est constitué du XML (qui est en fait le veritable language de formatation sur lequel est base le HTML), cette lecture en jargon du web s’appelle le “Parsing”, donc le navigateur fait le “Parsing” du fichier HTML/XML et construit programatiquement un arbre en language javascript qu’on appelle le DOM (Dcument Object Model) qui est une structure de donnée qui represente les diferentes parties de la page et que le navigateur peut le manipuler dynamiquement et nous meme en tant que developeur à travares javascript on peut entrer dans la danse en manipulant à notre tour ce DOM de manière à rendre certaine partie de notre page dynamiquement comme on le veut.. c’est cool non?

pour ne pas vous faire faire des confusions voici ce à quoi ressemble une page web (je l’ai pris dans un de mes livres tout est en anglais et je preferes le laisser en anglais prenez le soin pour celui qui ne comprend pas l’anglais de le dechifrer en utilisant meme google bref on expliquera tout au fur et a mesure qu’on fera la pratique)

Dans son rendering, le navigateur le reduit un peu à ceci:

Vous voulez voir comment est fait le HTML de la page de cet article?

allez y appuyez sur “F12” ou bien faite un click droit avec la souris et cliquez sur le lien “Voir la source de la page” et vous serez servit.

On arrive donc au terme de cette partie ou on a parle des technologies web, croyez moi il faut des milliers d’articles si on veut descendre en profondeur, bref cet article avait pour objectif de lever un pan de voile avant qu’on ne commence la partie purement pratique, du moins on reviendra toujours à la theorie et l’objectif etant du “training on the job”, toutes les questions que vous poserez sur les differents articles en cas de besoin la reponse sera toujours un article pour qu’ensemble chacun puisse apprehender toutes les zones d’ombres.

Lisez, et partagez et posez des questions au cas ou....

---

---

Share

Comments (0)

Leave A Comment

Your Name:
Comment: