IFT 1005 - Design et développement Web

2. Web

Sébastien Roy, Université de Montréal

IFT 1005 - Design et développement Web

2. Web

Sébastien Roy, Université de Montréal
23 janvier 2023
 

Licence Creative Commons

Accès aux ressources d’internet

À partir du moment où plusieurs ordinateurs sont interconnectés, il devient possible d’utiliser des services et d’accéder à des ressources (données, logiciels) qui ne sont pas accessibles directement sur l’ordinateur de l’utilisateur.

L’ordinateur utilisateur voit ses ressources décupler: L’internet est un énorme ordinateur décentralisé avec énormement de ressources...

Les réseaux d’antan

À l'origine: l'ordinateur central....

Les réseaux modernes

Démocratisation de l’internet

Comment faire profiter à tous de l'internet?

Simplifier l'accès à l'information:

Démocratisation de l’internet

Une solution: le WorldWideWeb.

L’invention du WWW

Au début... (1990)

(Oui, c'est du texte
seulement!)

L’invention du WWW

Au début... (1992)

(Premiers liens dans le texte)

L’invention du WWW

Premier navigateur (Mosaic, 1992)

Les usagers internet

Depuis le début...

(World in data)

Les usagers internet

Jusqu'à aujourd'hui...

(Statista)

Le World Wide Web

L’hypertexte?

Est un système composé de noeuds liés entre eux par des liens, des hyperliens permettant de passer automatiquement d’un noeud à l’autre.

L’hypertexte?

HyperCard: un précurseur

En informatique, le système HyperCard (1987) développé par Bill Atkinson pour Apple a été le premier système hypertexte à devenir populaire. Une application est composée de cartes qui correspondent chacune à une page écran. Les cartes sont créées à l’aide de logiciels de traitement de texte et de dessin. Les liens entre les cartes sont réalisés par des boutons.

HyperCard: un précurseur

Adresses ouèbes

Même si les protocoles HTTP et le format de données HTML ont été développés pour le web, ils sont conçus pour n’imposer que très peu de contraintes techniques. D’autres protocoles peuvent être utilisés sans problème.

Pour qu’une ressource puisse faire partie du ouèbe, elle doit avoir une adresse ouèbe, un URL.

Adresses ouèbes

Un exemple:

http://www.umontreal.ca

Quelques variations...

L'adressage URL

Anatomie d'un Uniform Resource Locator...

https://www.iro.umontreal.ca/~roys/ift1005/index.html

L'adressage URL

En réalité, c'est plus complexe...
http://Jojo:lApIn@www.exemple.com:8888/chemin/blub.php?q=allo&r=toto#signet

DNS

Le Domain Name Server va fournir
l'adresse associée à un nom.

Les adresses sont hiérarchiques
et standardisées internationalement.

HTTP

Avant HTTP, on utilisait FTP (File Transfer Protocol) pour transférer des fichiers. Très moche, peu pratique. Aucun notion de référence à une ressource.

Aussi, HTTP permet d'identifier le type (MIME type) des données.

MIME (Multipurpose Internet Mail Extensions)

Quel est le type d'un fichier ou de ce qui est envoyé par un serveur web? texte? image? son? vidéo?

La préhistoire: On utilise l'extention de fichier...

Le monde moderne: Système MIME, avec les types les plus courants.

Les commandes HTTP

HTML (HyperText Markup Language)

Langage de balisage pour structurer l'information d'une page web. On y reviendra dans les prochains cours...

HTML

À quoi ça ressemble?


<html>
  <head>...</head>
  <body>...</body>
</html>
Dans votre navigateur web, demandez de voir la source (Control-u)...

HTML

HTML s'inspire de XML, qui est l'ancêtre et la référence en matière de balisage.

HTML a évolué beaucoup depuis sa création. Les pages sont maintenant dynamiques, au départ elles ne l’étaient pas.

Les standards W3C pour HTML sont maintenant à la version 5 (2007-).

HTML

Jusqu’à la version 4.01, HTML est décrit comme une application du SGML (Standard Generalized Markup Language). Les navigateurs ouèbes n’ont jamais été capables de supporter toutes les variations permises par SGML.

Les navigateurs ne supportent pas tous de la même façon le standard. Celui-ci change souvent beaucoup.

Dans ce cours: HTML5

Architecture ouèbe

Comment on organise un site web? D'abord, on doit avoir un navigateur, et un serveur. Pour le site lui-même, Il y a trois modèles conceptuels...

Site web statique

Modèle le plus simple: les pages sont des fichiers dans un serveur.

Le contenu passe souvent par un
générateur de site statique.

Site web dynamique

Les pages web sont générées sur demande, et peuvent changer selon des paramètres variables.
La majorité des sites sont dynamique, et le contenu est
géré par un CMS (Content Management System) ou
système de gestion du contenu.

Voici quelques CMS...

SPA (Single Page Application)

Une seule page est fournies, et tout les changements sont le résulat d'un javascript qui s´éxécute sur le navigateur. Le serveur fournit la page de départ, et ensuite tout passe par un API.

Single Page Applications
C'est le monde de AJAX, react, angular.js, vue.js, ....

API (Application Programming Interface)

Parfois la page web n'est pas destinée à un humain, mais à une machine...

Dans ce cas, la page n'est pas en html, mais en XML ou JSON...
(prochain cours). La construction des URL suit une approche REST (Representational State Transfer).

Pour avoir une idée: Programmable Web.

La fin du monde?

La NASA fournit des API : https://api.nasa.gov.

Voyons où se trouve l'astéroide 3542519:
https://api.nasa.gov/neo/rest/v1/neo/3542519?api_key=DEMO_KEY

https://api.nasa.gov/EPIC/api/natural?api_key=DEMO_KEY