# Fondamentaux technologiques pour le développement web

Benoît Prieur

► To cite this version:

Benoît Prieur. Fondamentaux technologiques pour le développement web. École thématique. IT-Akademy, France. 2020, pp.26. hal-02508817

HAL Id: hal-02508817

https://hal.science/hal-02508817v1

Submitted on 16 Mar 2020

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons CC BY-SA 4.0 - Attribution - ShareAlike - International
License
# Fondamentaux technologiques pour le développement web

V 0.1 (16 mars 2020) - IT-Akademy (Lyon, mars 2020)

Benoît Prieur - Soarthec - CC-By-SA 4.0
<figure><img src="image_2.png" /></figure>

# Présentation et objectifs du cours

* Benoît Prieur (société Soarthec)

* Objectifs :

* Apporter une culture générale technique spécialement en lien avec internet

* En fin de formation, être en capacité de situer le sujet approximatif d'un acronyme donné

* Les schémas techniques non crédités dans le document sont : " Benoît Prieur - CC-By-SA "
<figure><img src="image_3.png" /></figure>

# Fondations technologiques d'Internet

* Premiers principes :

* Réseau de réseaux

* Principe de la commutation de paquets

* Réseau non centralisé
# Accès à internet du point de vue de l'internaute

* Accès filaire

* réseau téléphonique commuté à bas débit,

* ADSL

* Fibre optique

* Accès sans fil

* WIMAX

* Satellite

* 3G, 4G, 5G
<figure><img src="image_4.png" /><figcaption>Abonnements fixes en pourcentage de la population (2012)</figcaption></figure>

Crédit : Jeff Ogden (W163) / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)
<figure><img src="image_5.png" /></figure>

Les réseaux et la normalisation (1)

* International Organization for Standardization (ISO) : organisme international de normalisation dont des organisations nationales sont membres, par exemple :

* AFNOR (France)

* ANSI (USA)

* Est à l'origine du modèle OSI (ISO 7498)
<figure><img src="image_6.png" /></figure>

Les réseaux et la normalisation (2)

* Institute of Electronic and Electricity Engineers (IEEE) : normalisation des réseaux locaux (se base sur les couches bases d'OSI) ; WiFi, Bluetooth, FireWire etc.

* Requests for comments (RFC) : spécifique à l'internet
Le modèle OSI (1)

* OSI (Open System Interconnection)

* Modèle par couches : chaque couche à une fonction donnée

* Sept couches, chacune à une fonction particulière

* Chaque couche garantit que la couche supérieure a ce qu'il faut pour fonctionner (relation entre couches contiguës)

* Numérotation (1, 2...7) commence par le bas

* Réseaux à commutation de paquets
Le modèle OSI (2)

* OSI (Open System Interconnection), les couches :

* couche 1 - couche physique

* couche 2 - couche liaison de données

* couche 3 - couche réseau

* couche 4 - couche transport

* couche 5 - couche session

* couche 6 - couche présentation

* couche 7 - couche application
## Le modèle OSI (3)

Crédit schéma : Offnfopt / Public domain
https://commons.wikimedia.org/wiki/File:OSI_Model_v1.svg

<figure><img src="image_7.png" /></figure>

<figure><img src="image_8.png" /></figure>
<figure><img src="image_9.png" /></figure>

Le modèle OSI (4)

* Dans le schéma suivant :

* Pas de communication direct couche à couche

* La donnée à transmettre part de la couche 7 du système 1, descend à la couche 1 du système 1 est transmise à la couche 1 du système 2, avant de remonter vers la couche 7 du système 2
## Système 1

Couche 7 - Application

Couche 6 - Présentation

Couche 5 - Session

Couche 4 - Transport

Couche 3 - Réseau

Couche 2 - Liaison

Couche 1 - Physique

## Système 2

Couche 7 - Application

Couche 6 - Présentation

Couche 5 - Session

Couche 4 - Transport

Couche 3 - Réseau

Couche 2 - Liaison

Couche 1 - Physique
<figure><img src="image_10.png" /></figure>

# Ethernet

* Protocole de réseau local à commutation de paquets

* Norme internationale ISO/IEC 802-3

* Couches de liaison de données (niveau 2) du modèle OSI
# Modèle OSI : couche 1 - couche physique

* Unité de données : bit

* Résolution des problèmes matériels

* Transmission des bits de données sur un canal de communication

* Normalisation des aspects physiques : épaisseur de câbles, fréquences hertziennes etc.

Exemples de technologies relatives à la couche 1 :

* Cable coaxial, ADSL, Bluetooth, Firewire, USB, RS 232
<figure><img src="image_11.png" /></figure>

# Modèle OSI : couche 2 - liaisons de données

* Reçoit des données de la couche 1

* Organise les données en trames

* Gère les erreurs diverses (ACK, accusé de réception)

* Transmet à la couche 3

Exemples de technologies relatives à la couche 2 :

* ATM, Ethernet, X.25
<figure><img src="image_12.png" /></figure>

# Modèle OSI : couche 3 - réseaux

* Reçoit les trames de la couche 2

* Les oriente vers le destinataire (détermination du chemin, contrôle du trafic)

Exemples de technologies relatives à la couche 3 :

* IP, IPv4, IPv6
<figure><img src="image_13.png" /></figure>

# Modèle OSI : couche 4 - transport

* Découpe les données transmises par la couche 5 (session)

* Détermine quels types de services doivent être fournis à la couche session

Exemples de technologies relatives à la couche 4 :

* TCP, UDP
<figure><img src="image_14.png" /></figure>

# Modèle OSI : couche 5 - session

* Transfert de données dans une session

* Système de jeton pour le transfert de fichiers par exemple

Exemples de technologies relatives à la couche 5 :

* NetBios, RPC
<figure><img src="image_15.png" /></figure>

# Modèle OSI : couche 6 - couche présentation

* Sémantique et syntaxe des données transférées

* Couche d'encodage

Exemples de technologies relatives à la couche 6 :

* ASCII, HTML, Unicode, XML
<figure><img src="image_16.png" /></figure>

# Modèle OSI : couche 7 - couche application

* Gère les applications qui communiquent (mails, terminaux virtuels)

Exemples de technologies relatives à la couche 7 :

* BitTorrent, DNS, FTP, HTTPS, IMAP, IRC, POP3, RDP, SMTP, SOAP, SSH, Telnet, VoIP, WebSocket
<figure><img src="image_17.png" /></figure>

## Notion d'en-tête dans le modèle OSI

* Chaque couche depuis la couche application ajoute une entête (header) à l'objet transmis

* Dans le cas de la couche 7 (application) : AH (application header)

* Chaque couche n'a aucune connaissance des en-têtes relatives aux couches supérieures
<figure><img src="image_18.png" /></figure>

# Topologies des réseaux (1)

## Classification par taille :

* LAN (Local Area Network ou réseau local). 1 m à 2 km. 200 abonnements maximum

* MAN (Metropolitan Area Network). 100 km maximum. 1 000 abonnements maximum

* WAN (Wide Area Network). > 1 000 km. Milliers d'abonnements
<figure><img src="image_19.png" /></figure>

# Topologies des réseaux (2)

Classification par type :

* bus

* étoile

* anneau
# Topologies des réseaux - type bus

<figure><img src="image_20.png" /></figure>

* Connexion multipoints

* Câble défectueux => réseau paralysé

* Relatif à la couche 1 (la couche 2 permet de faire le tri parmi les signaux transmis)

* Longueur de câble optimisé
# Topologies des réseaux - type étoile

<figure><img src="image_21.png" /></figure>

## Type étoile

* Nœud central (hub ou switch)

* Un hub (concentrateur) travaille en diffusion

* Un switch travaille en commutation

* Réduction des conflits (par rapport au bus)

* Longueur de câble plus importante
# Topologies des réseaux - type anneau

<figure><img src="image_22.png" /></figure>

**Type anneau**

* Sens de parcours déterminé (évitement de conflits)

* Système de fonctionnement par jeton
<figure><img src="image_23.png" /></figure>

# Registre Internet régional

* RIR (Regional Internet Registry)

* En charge d'allouer des blocs d'adresses IP, IPv4, IPv6 par zone géographique
<figure><img src="image_24.png" /></figure>

# Routage TCP/IP

* Tables de routage utilisées par les routeurs

* Protocoles dynamiques ou statiques
<figure><img src="image_25.png" /></figure>

# DNS - Domain Name System

* DNS (Domain Name System)

* Entre autres rôles : résolution nom de domaine vers adresse IP

* En France : l'AFNIC
<figure><img src="image_26.png" /></figure>

Ordinateur central - mainframe (1)

* Ordinateur de grande puissance de traitement et qui sert d'unité centrale à un réseau de terminaux.

* Nombre de terminaux très importants

* Banques, compagnies d'assurances
<figure><img src="image_27.png" /></figure>

Ordinateur central - mainframe (2)

* Gestion des données centralisée (+)

* Rapidité sur les grands volumes de données (+)

* IHM minimale ou inexistante (-)

* Langages de programmations obsolètes (-)
# Architecture client-serveur (1)

* Les clients envoient des requêtes au serveur et obtiennent en retour des réponses

* Le serveur est en attente des requêtes des clients ; il “sert” les réponses au client

<figure><img src="image_28.png" /></figure>
# Architecture client-serveur (2)

## Approche générique. Plusieurs cas :

* un serveur web fournit des pages web à des clients (navigateurs web)

* un serveur de messagerie envoie des emails à des clients de messagerie

* un serveur de fichiers permet de partager des fichiers sur un réseau

* un serveur de base de données permet d'obtenir des données
Architecture client-serveur (3)

* Attente du serveur sur des ports réseaux locaux

* Port en écoute : ouverture d'un socket au niveau du système d'exploitation

* Processus serveur selon la couche application du modèle OSI
# Architecture pair-à-pair

* Peer to peer : chaque élément peut jouer chacun des deux rôles (client et serveur)

<figure><img src="image_29.png" /><figcaption>Peer-to-Peer Model</figcaption></figure>

<figure><img src="image_30.png" /></figure>
# Architecture client-serveur (4)

* Premier approche

* Selon si l'essentiel des calculs est effectué côté serveur ou non : client léger & client lourd

<figure><img src="image_31.png" /></figure>

Crédit : Michel Bakni / CC BY-SA (https://creativecommons.org/licenses/by-sa/4.0)
# Architecture client-serveur (5)

* Architecture pair à pair

* Architecture deux tiers

* Architecture trois tiers :

* couche de présentation

* couche de traitement

* couche d'accès aux données

Crédit : Bartledan based on a file by User:Foofy / Public domain

**Presentation tier**

The top-most level of the application is the user interface. The main function of the interface is to translate tasks and results to something the user can understand.

<figure><img src="image_32.png" /></figure>

<figure><img src="image_33.png" /></figure>

**Logic tier**

This layer coordinates the application, processes commands, makes logical decisions and evaluations, and performs calculations. It also moves and processes data between the two surrounding layers.

<figure><img src="image_34.png" /></figure>

<figure><img src="image_35.png" /></figure>

**Data tier**

Here information is stored and retrieved from a database or file system. The information is then passed back to the logic tier for processing, and then eventually back to the user.

<figure><img src="image_36.png" /></figure>

<figure><img src="image_37.png" /></figure>

<figure><img src="image_38.png" /></figure>
<figure><img src="image_39.png" /></figure>

L'emailing, POP, IMAP, SMTP

* POP3 (Post Office Protocol, version 3) : protocole de réception de courriers électronique

* SMTP (Simple Mail Transfer Protocol) : protocole pour l'envoi de courrier électronique

* IMAP (Internet Message Access Protocol), protocole similaire à POP3 (fonctionnalités supplémentaires)
HTTP et HTTPS (1)

* HTTP (HyperText Transfer Protocol) : le protocole mis en œuvre pour le chargement des pages web. HTTP est un protocole de la couche application

* HTTPS : version sécurisée (usage des protocoles SSL ou TLS)
<figure><img src="image_40.png" /></figure>

# HTTP et HTTPS (2)

## Serveurs http :

* C : Apache, nginx,

* ASP/ASP.Net (C#, VB.net) : IIS

* Java : Tomcat

* Python : Zope

* Javascript : Node.js
<figure><img src="image_41.png" /></figure>

# HTTP et HTTPS (3)

Méthodes (ressources) :

* GET

* HEAD

* POST

* OPTIONS

* CONNECT : proxy (tunnel de communication)

* TRACE

* PUT

* PATCH

* DELETE
# DNS, FTP, TELNET, SSH, NTP

* Le Domain Name System (DNS) est le service informatique distribué utilisé pour traduire les noms de domaine Internet en adresse IP.

* FTP (File Transfer Protocol) est le protocole le plus communément utilisé pour le transfert de fichiers (surtout dans le sens client vers serveur)

* Telnet (terminal network ou telecommunication network, ou encore teletype network) : protocole utilisé sur tout réseau TCP/IP, permettant de communiquer avec un serveur distant en format texte. Couche application du modèle OSI. Administration des serveurs UNIX avant adoption de SSH

* Secure Shell (SSH), programme informatique et protocole de communication sécurisé. Impose un échange de clés de chiffrement en début de connexion

* Network Time Protocol (NTP) : protocole permettant de synchroniser, via un réseau informatique, l'horloge locale d'ordinateurs sur une référence d'heure
Gopher, BBS, IRC

* Gopher : "autre" web. Des sites browsables avec un explorateur dédié ; échange de fichiers ; connexion à Telnet.

* BBS (bulletin board system) : serveur d'échanges de messages, de fichiers via des modems (ligne téléphonique) ; à partir des années 1970

* Internet Relay Chat (IRC) : protocole de communication textuel sur Internet ; sert à la communication instantanée, communication, transfert de fichier
<figure><img src="image_42.png" /></figure>

fournisseurs de services - registrars

* Registraire de nom de domaine

* Inscriptions auprès de l'AFNIC

* base de données des noms de domaine, utilisée par les DNS
<figure><img src="image_43.png" /></figure>

fournisseurs de services - registrars

* Registraire de nom de domaine

* Inscriptions auprès de l'AFNIC

* base de données des noms de domaine, utilisée par les DNS
fournisseurs de services - hébergeurs web

* Hébergements partagés ou mutualisés

• Hébergements dédiés

* Hébergements virtualisés

* Les centres de données (data centers)
<figure><img src="image_44.png" /></figure>

# Langages et formats du web - HTML/XHTML

* HTML (Hypertext Markup Language)

* Fondement du côté client (W3C)

* La tentative XHTML (inspiration d'HTML et de XML)

* Version 5 (HTML 5)
<figure><img src="image_45.png" /></figure>

# Langages et formats du web - XML

## Présentation du XML :

* Extensible Markup Language (langage de balisage extensible)

* Utilisé dans XSLT, RSS, SVG

* Définit dans un schéma (Document Schema Definition Languages), DTD

* Exemple
<figure><img src="image_46.png" /></figure>

# Langages et formats du web - JSON

* Successeur (?) de XML dans le traitement automatisé ou dans la consommation d'API

* JavaScript Object Notation
# Langages et formats du web - JSON vs XML

```json
{
  "Armoire": {
    "id": "555",
    "nom": "Armoire vêtements",
    "contenu": {
      "tiroir": [
        { nom: "chaussettes", id: "1" },
        { nom: "chemises", id: "2" },
        { nom: "pantalons", id: "3" }
      ]
    }
  }
}
```

```html
<menu id="555" nom="Armoire vêtements">
  <tiroirs>
    <tiroir nom="chaussettes" id="1"/>
    <tiroir nom="chemises" id="2"/>
    <tiroir nom="pantalons" id="3"/>
  </tiroirs>
</menu>
```
# Un mot sur les API

* API REST (nécessite une documentation)

* Méthodes HTTP disponibles sont GET, HEAD, POST, PUT, PATCH, DELETE, CONNECT, OPTIONS et TRACE

* API SOAP (description du service)

* Exemple d'une API REST
<figure><img src="image_47.png" /></figure>

# Langages et formats du web - CSS

* Feuilles de style en cascade : mise en forme de la présentation

* Peut participer à la gestion du responsive (Flexbox, Media Queries)

* Responsive : recours à des frameworks comme Bootstrap

* Notion de classe pour un tag donné ou pour un id donné

* Exemples
<figure><img src="image_48.png" /></figure>

# Langages et formats du web - Javascript

* Animation de la page web

* Existence de nombreux frameworks :
  * JQuery, ReactJS, VueJs...

* Animation de la page web

* L'accès au DOM
<figure><img src="image_49.png" /></figure>

# Notions de DOM

* Document Object Model

* Exemples

* Lien programmatique entre JavaScript et HTML
<figure><img src="image_50.png" /></figure>

# Rappels relatifs à la programmation objet

* Encapsulation, héritage, polymorphisme

* UML

* Du diagramme de classes vers le schéma physique de données
<figure><img src="image_51.png" /></figure>

# Bases de données relationnelles

* MySQL, SQLServer, PostgreSQL

* Langage SQL
<figure><img src="image_52.png" /></figure>

# Notion d'ORM

* Mapping objet-relationnel

* **Exemple** avecSQLAlchemy (monde Python)
<figure><img src="image_53.png" /></figure>

# Présentation du monde Java

* Machine virtuelle Java
# Paradigme MVC

<figure><img src="image_54.png" /></figure>
# Paradigme MVVM

<figure><img src="image_55.png" /></figure>

Crédit : Ugaya40 / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)
<figure><img src="image_56.png" /></figure>

# Notion de binding

* Exemples avec WPF et AngularJS
<figure><img src="image_57.png" /></figure>

# Le monde PHP

* Paradigme MVC

* Frameworks: Symfony, Laravel

* ORM: Doctrine
# Le monde Microsoft .NET (1)

* Framework .Net

* Langages principaux : C#, VB.NET

* IL

<figure><img src="image_58.png" /></figure>

Crédit : Jarkko Piiroinen / Public domain
<figure><img src="image_59.png" /></figure>

Le monde Microsoft .NET (2)

* WPF

* ASP.NET, ASP.NET MVC

* Entity Framework (ORM)
<figure><img src="image_60.png" /></figure>

# Python et le développement web

* Flask et Jinja2

* Django
Plus loin dans les bases de données

* Paradigme du NoSQL (par opposition au bases de données relationnelles)

* Exemple de MongoDB
<figure><img src="image_61.png" /></figure>

# Outils de développement

* IDE

* Outils pour développement dans les explorateurs web