presentation-html5.md 5.19 KB
Newer Older
Stéphane Bouvry's avatar
Stéphane Bouvry committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Technologies du web

La création de contenu pour le web est l'aggrégat d'un **ensemble de technologies** que l'usage profane regroupe généralement sous le terme **technologies HTML/Web**.

## HTML

Le HTML est une technologie utilisée pour :

 - Créer des documents web (pages HTML)
 - Structurer les interfaces web (Webapp)

Le HTML est un langage :

 - Description de contenu par **balise**
 - Conçu pour être facile à utiliser/partager
 - **Sémantique** (Il sert à structurer une informations - pas à la mise en forme)

<div class="info">
HTML n'est généralement pas considéré comme un **langage de programmation**. Il est en effet purement descriptif et ne propose aucun mécanisme logique.
</div>


## Petite histoire

### 1990

27
28
29
<div class="cols">
<div class="col">
Afin de répondre au besoin d'échange d'information au CERN, **Tim Berners** pose les bases du web :
Stéphane Bouvry's avatar
Stéphane Bouvry committed
30

31
32
33
- Premier navigateur,
- le protocole HTTP (pour l'accès aux document HTML),
- et le langage HTML
Stéphane Bouvry's avatar
Stéphane Bouvry committed
34

35
36
37
Il rends sa création publique, gratuite et ouverte. L'une des première page web était un tutoriel pour apprendre à créer des pages web...
</div>
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
38
![Tim Berners Lee](../images/berners.jpg)
39
40
41
</div>
</div>

Stéphane Bouvry's avatar
Stéphane Bouvry committed
42
43
44
45


### 1993

46
47
<div class="cols">
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
48
  ![Le navigateur NCSA Mosaic](../images/ncsa-mosaic.jpg)
49
50
51
52
53
54
55
</div>
<div class="col">
  Le **Web** s'étend à la communauté scientifique. Les universités sont *connectées* entre pour échanger les connaissances et les rendre accessible.

  Son usage se popularise et s'étends grâce à **NCSA Mosaic**, un navigateur capable d'afficher... des images.
</div>
</div>
Stéphane Bouvry's avatar
Stéphane Bouvry committed
56
57
58
59


### 1994-1996

60
61
<div class="cols">
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
62
63
64
65
66
**Netscape navigator** popularise le web hors des universités en permettant de réaliser les premiers sites *visuels*.

 - Fondation du **W3C** (World Wide Web Consortium)
 - Apparition d'**Internet Explorer**
 - 1995/96 : Spécification de HTML 2.0 est publiée.
67
68
</div>
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
69
  ![Netscape navigator](../images/disquette-netscape-navigator.jpg)
70
71
</div>
</div>
Stéphane Bouvry's avatar
Stéphane Bouvry committed
72
73
74
75
76
77

Cette période voit également s'affronter les éditeurs de navigateur Netscape et Explorer dans ce qu'on appelle **Le guerre des navigateurs**. Ces derniers n'hesitant pas à prendre de grandes liberté quand au rendu et aux fonctionnalités HTML/CSS


### 1997/2000 : Normalisation

78
79
<div class="cols">
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
80
81
82
83
84
**HTML 3.2** Syntètise les améliorations apportées par netscape et Internet explorer, en vu de normaliser les usages des 2 navigateurs.

**HTML 4** sort dans la foulée. Arrivée en force des **style CSS** et des scripts (Javascript). Le W3C arrive à imposer ce standard

La production de contenu Web se professionnalise
85
86
</div>
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
87
  ![W3C](../images/w3c.png)
88
89
</div>
</div>
Stéphane Bouvry's avatar
Stéphane Bouvry committed
90
91
92
93
94
95
96
97


### 2000/2008 : Web 2.0

Le **XHTML** s'impose dans l'usage professionnel, il est la version **strict** de HTML 4. Il scèle une bonne fois pour toute la sacro-sainte séparation du contenu (XHTML) et de la forme (CSS).

La production de site web se professionnalise, les métiers d'**intégrateur web** / **Webdesigner** sont reconnus comme des disciplines hautement technique et plus seulement comme des activités complémentaires à des domaines plus générale (Designers / Informaticiens).

98
99
100
101
102
<div class="info">
L'expression **Web 2.0** est un terme purement maketing, les technologies derrière cette pratique avaient déjà presque 10 ans.
</div>


Stéphane Bouvry's avatar
Stéphane Bouvry committed
103
104
### Maintenant

105
106
107
<div class="cols">
<div class="col">
Le **XHTML 2**, une nouvelle norme développée depuis plusieurs années a été définitivement abandonné ; rejetée par la communauté avant même d'être publié.
Stéphane Bouvry's avatar
Stéphane Bouvry committed
108
109

Le **HTML5** et le **CSS3**, encore en brouillon, sont déjà largement adoptés par les principaux navigateurs (Firefox, Chrome, Edge). Imposant définitivement l'aire du **Web Sémantique**.
110
111
</div>
<div class="col">
Stéphane Bouvry's avatar
Stéphane Bouvry committed
112
  ![Web sémantique](../images/semantic.svg)
113
114
</div>
</div>
Stéphane Bouvry's avatar
Stéphane Bouvry committed
115
116
117
118
119
120
121
122
123
124
125
126


## Le World Wide Web

La transmission et l'accès aux contenus du web est déterminé par 3 choses :

 - Le **navigateur web**
 - Le protocole HTTP/S
 - Le langage HTML

### Le navigateur

127
128
Le navigateur est un logiciel **client** qui va permettre de consulter des documents web. Nous reviendrons sur ce point, mais il faut retenir que le navigateur **interprète** le code source d'une page web avant de l'afficher, il peut donc arriver que le rendu d'un contenu varie entre 2 navigateurs.

Stéphane Bouvry's avatar
Stéphane Bouvry committed
129
![Répartition des navigateurs en 2018 - source : http://gs.statcounter.com/](../images/navigateurs.png)
130
131

Généralement, les intégrateurs web s'assure d'un fonctionnement idéale sur les principaux navigateurs dans les version récentes (1 à 2 ans), puis s'assure d'un fonctionnement optimal sur des versions plus anciennes et les navigateurs moins présents sur le marché.
Stéphane Bouvry's avatar
Stéphane Bouvry committed
132
133
134

### Le protocole HTTP

135
136
137
138
Tous les systèmes informatiques utilisent des **protocoles de communications** pour s'échanger des données. Le web utilise le **protocole HTTP** (et HTTPS dans sa version sécurisée).

Ce protocole est un protocole **client / serveur**. Le client c'est le navigateur, et le serveur sera une application serveur (généralement sur internet, mais pas que).

Stéphane Bouvry's avatar
Stéphane Bouvry committed
139
![Le protocole HTTP](../images/http.png)
140
141
142

### Le langage HTML

Stéphane Bouvry's avatar
Stéphane Bouvry committed
143
144
145
Voir cours suivant [Débuter en HTML](./premiere-page-web.html)