Partie 1 - Qu'est-ce que le Web ?

Introduction

Dans ce cours, on apprendra ce qu'est un octet, un fichier, le web, pourquoi il a été créé, par qui et quelle est la différence entre le web et Internet.

Nous verrons ensuite ce qu'est un client et un serveur ainsi que les langages utilisés côté client et côté serveur.

Dans la troisième partie, nous aborderons le fonctionnement du réseau.

Enfin, nous verrons qu'il est possible de devenir développeur web et d'en faire son métier.

Qu'est-ce qu'un fichier ?

Imaginons que nous roulions en pleine nuit dans une rue, ayant des maisons d'un seul côté et que chaque maison ait toujours 8 fenêtres de même taille alignées horizontalement. Chaque fenêtre peut être éclairée ou pas. Si on note 0 pour chaque fenêtre éteinte et 1 pour chaque fenêtre éclairée, à la fin de la rue nous obtenons un message !

Par exemple, pour 4 maisons : 00001000 10001001 11000011 10010101

Certes, pour le moment cela ne veut rien dire, parce que nous ne savons pas décoder ce message. Il nous manque la table de conversion. 00001000 signifie A, B, C, ... ?

Imaginons maintenant que nous sommes face à une seule maison et qu'à chaque minute, les fenêtres changent d'éclairage ou pas. Après quelques minutes, nous aussi obtenons un message !

Par exemple, après 4 minutes : 00001000 10001001 11000011 10010101

Imaginons cette fois-ci qu'à chaque seconde, les fenêtres changent d'éclairage ou pas. Nous ne parviendrons plus à noter tous les 0 et 1 ! Notre main ne notera pas assez vite ce que nous verrions.

Imaginons cette fois-ci que les fenêtres changent d'éclairage ou pas mille fois par seconde. Nous n'arriverons même plus à voir les changements ! Notre oeil ne peut voir que 24 images par seconde ...

Mais un oeil électronique peut voir la différence ! Un ordinateur peut lire, sans se tromper, des millions de 0 et 1 par seconde ! Un ordinateur n'est pas intelligent, mais il est ultra rapide et fiable.

Le bit est la plus petite information qu'on peut transmettre. L'ampoule est éteinte (0) ou allumée (1). Le bit est représentée par un 0 ou un 1.

Une série de 8 bits est appelée : octet.

Tout fichier n'est qu'un ensemble d'octets.

Ainsi, tout (les lettres, les sons, les images, ...) est converti, transformé, codé en octets.

Ce n'est qu'après avoir décodé le fichier via un programme qui utilise la bonne table de conversion, qu'on constate que ce fichier représente un texte, une image, un son, ... Ainsi un petit groupe d'octets représente un mot, un point de couleur, une note de musique, ...

Pour qu'un fichier soit utile, il faut donc le décoder avec le bon programme.

Internet, Web, services et Cloud

Internet est un réseau d'ordinateurs qui s'échangent des octets.

Chaque type d'information (page web, courriel, fichier,  ...) est codé différemment.
Un protocole est un ensemble de règles pour le transport d'octets.
Chaque protocole a un nom.

Le protocole d'application le plus utilisé sur Internet est nommé : HTTP.

HTTP -> pour l'échange d' Hyper Text
FTP -> pour l'échange de fichiers
SMTP, POP3, IMAP -> pour l'échange de courriels
...

Le web est la partie d'Internet qui utilise le protocole HTTP

NB : Une page web n'affiche pas que du texte, des images et des liens vers d'autres pages, elle peut aussi servir d'interface à des programmes qui utiliseront d'autres protocoles ...

Ainsi, l'utilisateur, via une page web, peut commander l'affichage de ses courriels, l'envoi d'un fichier, ... et croire à tort qu'Internet = le web

Le web n'est qu'une partie d'Internet.

Une interface web est une page web qui envoie des données à un programme.
Une interface web est donc un type de page web.

Un cloud est un ensemble des services accessibles via une interface web.

Utilisateur <---> interface web <---> services (programmes)

Appareils connectés

• Un PC (= Personal Computer) portable = ordinateur qui permet notamment de traiter du texte
• Un smartphone (= en français, téléphone intelligent)= ordinateur qui tient dans la main et qui permet de téléphoner
• Une tablette = ordinateur qui est plus grand qu'un smartphone
• Une smartTV (= en français, télévision intelligente)= ordinateur qui permet de voir des vidéo sur Internet et la TV
• Un serveur = ordinateur qui a beaucoup de mémoire et peu de programmes

Comment est né Internet et le Web ?

En 1969 est apparu le premier réseau Internet.
Il était militaire et s'appelait ARPAnet.
Il permettait de communiquer entre centres même si un centre était détruit.

En 1972, sont apparus les courriels.
En 1974, le réseau s'ouvre aux universités.
En 1991, est apparu le web (donc après Internet et les courriels).

L'inventeur du web (et du HTML) est Tim Berners-Lee, un universitaire qui a inventé le lien (= la possibilité d'ouvrir un autre document par un simple clic).

Le simple fait de pouvoir ouvrir par un simple clic une autre page a révolutionné le monde ! Aujourd'hui, tout le monde clique ! Tout le monde surfe.

Surfer, veut dire ici : aller d'une page web à une autre via un clic.

Au début, les documents n'affichaient pas d'images.
C'étaient des textes avec des liens = des textes hyper (Hyper Text).

Adresse de la première page web écrite par l'inventeur du web :
TheProject.html

Sentant l'évolution venir, il a créé un organisme chargé d'écrire les nouvelles règles au fur et à mesure des avancées technologiques.

Cet organisme, le W3C, sert à définir les langages utilisés par les navigateurs web : HTML, XML, CSS, ...

Le W3C est la référence du web. Il s'agit ne quelque sorte de l'académie française du web, c'est là sont décrites les règles. Tous ceux qui créent des navigateurs web sont censés les respecter.

En résumé

• Le web n'est qu'une partie d'Internet.
• Le web est apparu après Internet.
• Un cloud est un ensemble de services derrière une interface web.
• Le W3C est un organisme qui guide l'évolution du web.

Partie 2 - Les langages du Web

Les langages client

Un client est un programme qui demande et reçoit des informations.
Un serveur est un programme qui sert plusieurs clients.

Ici, un client est un navigateur web. Il est installé sur un ordinateur personnel, une tablette, un GSM.

Son rôle est de demander à un serveur web des fichiers (HTML, images, ...), puis, à l'aide de ces fichiers, construire une page web.

Un fichier HTML est un fichier texte (donc lisible par un humain).

Le fichier HTML contient les instructions à suivre par un programme (le navigateur web) pour construire la page web.

L'ensemble des instructions contenues dans le fichier HTML = le code-source.

Tout code-source peut être écrit par un humain (ou par un programme informatique) dans un langage qui peut compris par un programme.

Il existe de nombreux langages informatiques.

Ici, les instructions sont écrites dans un langage appelé : HTML.

Jadis, le fichier commençait toujours par "<HTML>".
Aujourd'hui, avant <HTML>, il est souvent ajouté "<!DOCTYPE html>".
Il se termine par "</HTML>".

Parmi les instructions pour construire la page web, certaines servent à appeler d'autres fichiers (sur un serveur web) tels que des fichiers image, ... pour l'humain qui regarde la page, mais aussi d'autres fichiers texte qui contiennent d'autres instructions pour le programme qui construit la page.

Ces autres instructions ne sont pas écrites en HTML.
Elles ne sont pas indispensables (et, jadis, elles n'existaient pas).
Elles servent à améliorer la page.

Les instructions servant à la présentation du texte sont écrites en CSS.
Les instructions permettant à l'humain d'agir sont écrites en JavaScript.

Au final, le navigateur, ainsi que celui qui veut créer des pages web, doit comprendre ces trois langages "client" :

1. le HTML (indispensable)
2. le CSS
3. le JavaScript

Le premier des trois langages à apprendre est le HTML.

Le HTML est très facile à apprendre.
Voir ce mini-cours

Les navigateurs sont des programmes qui construisent une page web grâce aux informations (fichiers) envoyés par le serveur web.

Les plus connus sont : Google Chrome, Mozilla Firefox, Internet Explorer (de Microsoft), Opera, Safari (d'Apple).

Pourquoi existent-ils plusieurs navigateurs pour voir la même page ?
C'est avant tout une question de goût.
Plusieurs marques et modèle de voiture existent pour aller au même endroit ...

Parfois, un navigateur ne fonctionne que sur un système d'exploitation précis. Exemple : Les navigateurs de Microsoft.

Source : les-langages-client

Les langages serveur

Un serveur est un ordinateur qui n'utilise ni écran, ni clavier, ni souris.
Une fois lancé, il ne s'arrête jamais !
Il fonctionne nuit et jour durant des années !

Lorsque le serveur n'utilise pas de langages, il se contente d'envoyer les fichiers HTML (et autres). Le site est alors statique, il ne varie jamais d'un jour à l'autre, d'un utilisateur à l'autre.

Aujourd'hui, la plupart des sites sont dynamiques, ils varient l'affichage en fonction de l'utilisateur. La page est alors construite avant d'être envoyées au client. Chaque client peut ainsi reçoit sa page personnelle.

La construction du fichier HTML est réalisée sur base d'instructions écrites dans un langage. Plusieurs langages permettent de créer le même fichier HTML.

Le client ne sait donc jamais quel langage a été utilisé pour créer la page web.

Les principaux langages sont : PHP, Java, Python, Ruby, C#, ...

NB : PHP est le plus simple (et le plus utilisé)

Ces langages sont plus compliqués à apprendre que les langages client.
Ils font tous appel à des notions de boucles, conditions, ...

Pourquoi existent-ils plusieurs langages pour construire la même page ?
C'est avant tout une question de goût et de moyens financiers.

Un framework est une boîte à outils qui permet de réaliser plus rapidement un site.
Les frameworks sont des boîtes à outils faits par des programmeurs pour des programmeurs.

La boîte à outils d'un électricien n'est pas celle d'un plombier. Elle varie en fonction du travail à faire. Il en est de même pour les développeurs. Mais, ici, l'évolution est très rapide. Certaines boîtes à outils deviennent rapidement obsolètes et sont supplantés par de nouvelles boîtes à outils, appelés frameworks.

Chaque langage dispose d'un ou plusieurs frameworks.

• JavaScript -> Query, AngularJS, ...
• PHP -> Symfony2, Zend, ...
• Java -> J2EE
• Phyton -> Django
• Ruby -> Ruby on rails
• C# -> ASP.net

Les CMSpermettent de créer des sites web sans connaissance de langages (ni client, ni serveur).

Ce sont des sites web prêt à l'emploi. Via une interface web, il suffit de compléter des formulaires pour créer une page.

Il existe plusieurs CMS : WordPress, Joomla, ...

Langage utilisé par quelques sites connus :

• Google -> Java, Phyton
• Microsoft -> C#
• Wikipedia, Facebook, OpenClassRoom -> PHP
• Les banques et gouvernement -> Java (car exigence de sécurité)
• Silicon Valley -> Phyton et Ruby

Source : les-langages-serveur

Les bases de données

Les sites dynamiques restituent des données et/ou enregistrent celles d'un visiteur => Ces données sont stockées dans des bases de données.

Les principales bases de données sont :

• MySql (la plus courante pour de petits sites)
• PostgreSQL (utilisé chez OpenClassRoom)
• SQLServer (de Microsoft)
• Oracle (la plus grosse, la plus puissante et la plus chère)
• SQLite (la plus petite, tout est dans un seul fichier)

Les bases de données stockent les données dans différentes tables (composées de colonnes et de lignes).

Pour stocker, récupérer, mettre à jour ou supprimer des données, il faut utiliser un langage : SQL (Structured Query Language).

Le SQL est un langage de requêtes (demandes), facile à apprendre.

Ce langage est commun à toutes les bases de données.

NB : Chaque base de données a son jeu d'instructions supplémentaires.

Résumé : pour créer un site dynamique => connaître 3 langages (minimum)
HTML + PHP + SQL (+ CSS + JavaScript)
et disposer d'un espace sur un serveur web (souvent Apache)

Le fonctionnement d'un site web dynamique est le suivant :

1. Le client (le navigateur) demande au serveur web une réponse sous forme de page
2. Le serveur envoie une requête SQL à la base de données
3. La base de données envoie ces données (sous forme d'un tableau)
4. Le serveur crée le fichier HTML en incorporant ces données et l'envoie
5. Le client (le navigateur) reçoit la réponse sous forme d'une page web

Source : les-bases-de-donnees

Les responsive sites et mobile

Actuellement, les sites web sont de plus en plus vu sur des smartphones.

1. Soit on crée un site web qui s'adapte, grâce au CSS, à la taille de l'écran (= un "responsive web site"),
2. Soit on crée une "application native" pour un type/marque de smartphone dans le langage de ce smartphone (donc pas en HTML, CSS, ...)

NB : Une application native peut ressembler à une page web mais ce n'est pas une page web.

Source : les-sites-responsive-et-mobile

En résumé

• Créer un site web requiert la connaissance du HTML
• Créer un beau site => + CSS + JavaScript
• Créer un site dynamique => + SQL + PHP (ou Java, Python, ...)
• Un Frameworks est une boîte d'outils qui aide à créer un gros site web plus facilement

Source : en-resume

Partie 3 - Les réseaux derrière le Web

Les serveurs

Il existe deux types d'ordinateurs :

1. L'ordinateur qui utilise les langages-client : le PC (portable ou tour), le smartphone, la tablette, ...
2. L'ordinateur qui utilise les langages-serveur : le serveur

Un serveur dispose de plusieurs disques durs, chaque disque dur peut contenir plusieurs sites web. Il sert plusieurs clients à la fois. Les serveurs sont reliés entre eux.

L'ensemble des serveurs et des clients forme le WWW, appelé plus simplement le web (ou la toile)

Sur le web, les clients ne communiquent pas directement entre eux. Lorsqu'ils communiquent entre eux, les informations passent toujours par un serveur.
Lorsque plusieurs PC sont communiquent directement entre eux, ils forment un réseau local.
Il existe donc deux types de réseaux : Internet (dont le web) et intranet.

Un serveur est un type d'ordinateur assez plat (sans clavier, ni écran). Ils sont rangés dans des armoires. Ces armoires sont placées dans des pièces climatisées. L'ensemble de ces pièces forme le data center, un bâtiment très très sécurisé.

Lors des opérations d'installation ou de maintenance, on relie le serveur à un clavier et à un écran. Une fois le travail fini, l'écran et le clavier sont retirés et l'armoire refermée.

Les data center sont reliés entre eux par des fibres optiques. Ils en existent dans tous les pays. Il existe de gros câbles optiques au fond des océans pour relier les data center situés dans d'autres continents.

L'information qui circulent entre deux continents va presqu'à la vitesse de la lumière (moins d'un dixième seconde). Mais, celle qui va de votre fournisseur d'accès à Internet et le PC met plus de temps, car elle ne circule pas dans une fibre optique, très fragile et coûteuse.

Source : les-serveurs

IP et noms d'hôtes

Lorsqu'on envoie une lettre il faut savoir à quelle adresse on envoie la lettre et, pour recevoir une réponse, indiquer son adresse. De même, lorsqu'on demande une page web, il faut connaître l'adresse du serveur et indiquer son adresse pour recevoir la page web demandée. Toutes les machines connectées sur le web ont une adresse IP.

Comme il n'est pas facile pour un humain de retenir des mots que des chiffres, on peut donner un nom de domaine à chaque site web tel que "google.fr".

Il est plus facile de taper un nom de domaine dans la barre d'adresse du navigateur tel que http://www.google.fr plutôt que http://209.85.229.94 ou http://2001:0db8:0000:85a3:0000:0000:ac1f:8001

Mais, il faut alors traduire chaque nom de domaine en adresse IP. Ce travail est réalisé par un serveur. Ainsi, entre le client et le serveur dans lequel se trouve le site web, il est fait appel au serveur de traduction de nom de domaine en adresse IP. Ce type de serveur est appelé serveur DNS.

Ce serveur DNS a aussi une adresse IP. Et, si ce serveur DNS ne trouve pas l'adresse du site web demandé, il fait appel au serveur DNS du pays concerné qui possède l'adresse de tous les serveurs DNS du pays. On finit ainsi par trouver l'adresse qui correspond au nom de domaine.

Source : ip-et-noms-d-hotes

Les protocoles

Un protocole est un ensemble de règles pour communiquer.
Chaque protocole a un nom.

Pour communiquer avec un chinois, il faut connaître toutes les règles du chinois ...
Pour un humain, il n'est pas possible de connaître toutes les langues.
Mais, un ordinateur, lui, connaît tous les protocoles pour communiquer avec un autre ordinateur.

Les données envoyées entre ordinateurs sont des fichiers, mais certains fichiers sont très volumineux. Un fichier est comme un train. Plus le fichier est volumineux, plus le nombre de wagons est grand. Mais, contrairement aux trains, sur Internet, chaque wagon prend un chemin différent et parfois, un wagon est détruit !

Au bas niveau, il existe donc deux protocoles : TCP et UDP

En utilisant le protocole TCP, on oblige l'ordinateur qui reçoit les wagons à envoyer un accusé-réception pour chaque wagon reçu. Ainsi, l'ordinateur qui envoye sait si l'autre ordinateur a tout reçu. (S'il constate qu'il manque un accusé réception, il renvoie le wagon correspondant à l'accusé-réception manquant)

C'est toujours le protocole (de bas niveau) TCP qui est utilisé lorsqu'une page web est demandée (par le client) ou envoyée (par le serveur) ou lorsqu'on télécharge.

L'ordinateur qui reçoit, en mode TCP, attend d'avoir tout reçu avant d'envoyer ce qu'il a reçu au programme qui doit traiter l'information.

L'inventeur du TCP/IP est Vint Cerf et est considéré comme le père d'Internet.
Pour rappel, l'inventeur du HTML est Tim Berners-Lee et est considéré comme le père du web.

Le protocole UDP ne demande pas d'accusé-réception. Ce protocole est utilisé si l'information n'est pas très importante. C'est le cas des flux d'informations, comme la musique ou la vidéo. S'il manque une note, on n'a pas le temps de demander de la renvoyer. De même, lors de la projection d'un film, on n'a pas le temps de demander de renvoyer le bout d'image manquant. S'il manque un morceau de l'image, s'affichera un petit carré noir.

Ensuite, il existe les protocoles de haut niveau, utilisés par les programmes.
Chaque type de programme a son type de protocole.

Un navigateur-web est un type de programme, son protocole est le HTTP et le HTTPS (si l'échange d'informations doit être crypté).

Pour rappel, HTTP -> pour l'échange d' Hyper Text
FTP -> pour l'échange de fichiers. C'est le protocole utilisé par le logiciel Filezilla.
SMTP, POP3, IMAP -> pour l'échange de courriels
...
NB : Tous ces protocoles de haut niveau (d'application) utilisent comme protocole de bas niveau TCP.

Chaque fois que vous cliquez sur un lien, vous provoquez une Requête HTTP vers un serveur; ainsi que pour chaque image appelée pour l'intégrer dans la page.

Cette requête contient plusieurs informations : la version du protocole, l'adresse pour la réponse, le type de navigateur qui fait cette requête, ...

Et, à chaque requête HTTP correspond, une réponse HTTP du serveur, puisque cette requête est envoyé en mode TCP.

Le serveur construit sa réponse.

Cette réponse contient plusieurs informations : la version du protocole, le type de réponse (positive, négative), le type de serveur, la date et heure de l'envoi par le serveur, la longueur de la réponse, la réponse, ...

Source : les-protocoles

En résumé

• Les serveurs envoient les pages web depuis des data center.
• Les serveurs et les data center sont reliés entre eux par des câbles (parfois sous-marins !).
• L'adresse IP permet de retrouver le serveur.
• Le nom de domaine permet de retrouver un site web de manière plus conviviale.
• Le nom de domaine est traduit en adresse IP grâce à des serveurs DNS.
• Les protocoles de bas niveau indiquent comment les machines communiquent entre elles.
• Les protocoles de haut niveau indiquent comment les programmes communiquent entre eux.

Source : en-resume-120

Partie 4 - Qui sont les développeurs ?

Qu'est-ce qu'un développeur ?

Les grands sites web requièrent une équipe de développeurs.

Il existe différents types de développeurs web :

• celui qui développe l'interface, "l'intégrateur", spécialisé dans les langages client
• celui qui est spécialisé dans le langage serveur utilisé, "le développeur" : PHP, ...
• celui qui teste le site avec différents navigateurs, différentes taille d'écran, ...
• celui qui gère les serveurs, "l'administrateur", s'occupe des sauvegardes des données, ...
• celui qui sait tout faire : l'interface, le code coté serveur, tester le site et administrer les serveurs.

L'intégrateur a pour mission de développer en HTML5 et CSS3 ... comme le dév front, mais il s'occupe plus particulièrement de faire en sorte que la page web réalisée corresponde au rendu attendu d'après la maquette qui lui a été fournie par un graphiste.

Généralement, le développeur aime les défis, la nouveauté, faire un site différent du site précédent. Il aime aussi organiser son temps de travail, car il n'est pas possible de développer du bon code en travaillant quatre heures non-stop. Il aime le télé-travail ou les entreprises qui offrent des lieux de détente et de repos et où ils peuvent entrer à toute heure du jour ou de la nuit ! (comme chez Google)

Source : qu-est-ce-qu-un-developpeur

Comment devenir développeur Web ?

Devenir développeur web est à la portée de tout le monde, pour peu qu'on y ait envie, du temps, de la patience.

Voici les étapes à suivre pour devenir un bon développeur :

1. Comprendre le web
2. Suivre le cours sur le HTML5 et CSS3
3. Suivre un cours sur PHP5 (car la plupart des hébergeurs bon marché utilise PHP) ou Python, Java, ...
4. Suivre un cours sur le SQL (pour créer des sites dynamiques)
5. Suivre un cours sur JavaScript (pour valider un formulaire, ...)
6. Installer Linux et savoir utiliser les commandes en mode console (pour l'installation de serveurs)
7. Se tenir informé de l'évolution du web
8. Pratiquer et aimer construire des sites web.

Pour savoir si on aime développer, il faut essayer !

Source : comment-devenir-developpeur-web

Les secrets bien gardés pour devenir développeur

Votre pire ennemi = votre crainte de ne pas y arriver. Soyez patient ! Rome ne s'est construite en un jour.

Le truc = Lorsque vous avez un message d'erreur, copiez/collez ce message dans Google. A tous les coups, vous trouverez une réponse, car il quasi certain que d'autres que vous aient eu ce message d'erreur.

Le conseil = apprenez l'anglais, car la plupart des documentations pointues ou des solutions sont écrites en anglais. Il n'est pas nécessaire de parler anglais, mais il faut savoir lire l'anglais technique.

Enfin, sachez que tout connaître n'est pas possible. Mais, restez persévérant.

Source : les-secrets-bien-gardes-pour-devenir-developpeur

En résumé

1. Beaucoup de langages existent => un développeur se spécialise dans quelques langages.
2. On peut apprendre à créer un site web à tout âge !
3. Apprendre à développer un peu, même si on ne veut devenir développeur, cela permet de mieux comprendre les développeurs.
4. Le secret pour réussir, c'est de s'y mettre !

Source : en-resume-119