6 - Web et Multimédia

Plan

• Protocoles du Web• Editeurs de sites Web• Evolutions du Web• Webs dynamiques

Protocoles du Web

Protocoles du Web• histoire

– avant le Web : ftp, telnet, gopher, wais ... – les dates des protocoles précurseurs

• le transfert d'informations multimédia– la norme MIME – l'association données <-> types MIME – les applications d'aide

• protocole HTTP 1.0 – principe de la communication http – principales requêtes – exemples d'échange

Histoire• Une origine européenne...

– les protocoles avant le Web • transferts de fichiers par ftp anonyme ou pas• transferts de news par nntp • serveurs d'informations par gopher (textes et images) • passerelles wais d'accès à des BD textuelles • protocoles telnet, mail ..

– l'origine du Web • le concept d'hypertexte hérité de Xanadu (Ted Nelson 60->72) • la mise à disposition d'informations éparses sur internet • le projet de Tim Berners-Lee et Robert Cailliau au CERN à Genève (89) • les premiers butineurs : Erwise sur NeXT au CERN, Viola à Berkeley

(92), Mosaic au NCSA (mars 93) • 200 serveurs http en octobre 93 ...

Transferts d’information multimédia

MIME = Multipurpose Internet Mail Extensions– buts : courrier multimédia (pas seulement documents attachés) – RFC 1324 décrivant la norme MIME (juin 92) – types principaux de documents : "application" "audio" "image" "text"

"video" "x-..." – entêtes du protocole : exemple

Content-Type: text/plain; charset=ISO-8859-1Content-transfer-encoding: base64

– l'association données <-> types MIME : le serveur de documents multimédia réalise ce lien

– par un fichier de configuration côté serveur – et par les extensions (.jpg, .qt…)

– Le navigateur sait traiter le type de document : affichage interne (exemple gif à l'origine, jpeg, png depuis les derniers butineurs)

– s'il ne sait pas le faire : appel à des applications d'aide du côté client

Protocole HTTP

HTTP = HyperText Transfer Protocol– principe de la communication par http

• connexion TCP sur le port 80 • requête du document (GET) • la connexion est coupée

– principales requêtes GET pour demander un document HEAD pour obtenir des informations sur un document (titre, dernière

mise à jour...) POST pour communiquer des données au serveur (=> Entity-Body) PUT pour demander que les données (=> Entity-Body) soit stockées

dans l'URI indiqué DELETE pour demander la destruction du document spécifié par l'URI

indiqué

Protocole HTTP : exemples d'échange (2)

gandalf.imag.fr-kuntz> telnet gandalf 80 Trying 147.171.133.12... Connected to gandalf.imag.fr. Escape character is '^]'. HEAD /index.html HTTP/1.0   HTTP/1.0 200 OK Server: Netscape-FastTrack/2.01 Date: Fri, 02 May 1997 14:53:09 GMT Accept-ranges: bytes Last-modified: Mon, 10 Mar 1997 09:53:53 GMT Content-length: 2799 Content-type: text/html   Connection closed by foreign host.

Protocole HTTP : exemples d'échange (3)

gandalf.imag.fr-kuntz> telnet cgest.grenet.fr 80 Trying 130.190.6.18... Connected to cicg-gestion.grenet.fr. Escape character is '^]'. POST /cgi-bin/a?name=balacheff&prenom=

<TITLE>Le r&eacute;sultat de votre recherche</TITLE> <PRE>Il y a 1 r&eacute;ponse(s)</PRE> <PRE> BALACHEFF NICOLAS VIALLET INPG-3 LEIBNIZ

Poste : 75067 PTT: 76.57.50.67 Repli:

Email : <a href=mailto:Nicolas.Balacheff@imag.fr>Nicolas.Balacheff@imag.fr</a>

<HR></PRE> Connection closed by foreign host.

Editeurs de sites Web

Editeurs de sites Web

• Evolution d'HTML – Normes– extensions

• Editeurs de pages Web– macro-éditeurs d'HTML– Convertisseurs– vrais outils de PAO : Adobe Golive,

Macromedia Dreamweaver– éditeurs couplés à l'administration de site

web

Navigateurs historiques : Mosaic

Navigateurs historiques : Netscape 1.0

Editeurs de Web : HoTMetaL

Editeurs de Web : Netscape Gold

Editeurs de Web : Visual Page

Editeurs de Web : Cyberstudio(ancêtre de Golive d’Adobe)

Editeurs de Web : AOLPress

Editeurs de Web : Amaya du W3C

Editeurs et administration de sites Web : SiteMill

Evolutions du Web

Evolutions du Web

• Feuilles de style : exemple et description• Intégration du multimédia synchronisé :

SMIL• De HTML à XHTML avec HTML, SVG, SMIL…

intégrés en XML– Voir présentation du W3C dans les

compléments

Webs dynamiques

Webs dynamiques

• Applications sur le serveur: CGI, PHP …

• Principes des webs dynamiques• Principes des bases de données :

mysql• SPIP : système de publication pour

l’internet• Autres outils de Webs dynamiques

Applications sur le serveur : CGI, PHP

• Besoin d’étendre les possibilités des interactions client-serveur

• Première idée : permettre de lancer à distance des programmes appelés CGI sur le serveur : compteurs, horloge, cartes interactives…

• Danger : permettre aux pirates de placer des virus sur le serveur

• Deuxième idée : limiter les possibilités par un langage spécifique que le serveur sait interpréter avec un programme sûr; les commandes dans ce langage étant incluses dans des commentaires des pages html : c’est le principe des scripts php

Principes des webs dynamiques

• Pas de pages construites une fois pour toutes (elles sont dites statiques)

• Des pages dynamiques calculées à la volée lors des demandes des navigateurs

• Inconvénients :– risque de charge du serveur qui doit calculer toutes les pages

demandées, mais possibilité de limiter les calculs (par cache)– forme des pages plus contraintes par le programme

• Avantages : – pages construites à partir de modèles (squelettes) suivant le

même look, faciles à mettre à jour sans connaître par exemple html

– pages adaptées à l’utilisateur (handicap, préférences…)

Principes des webs dynamiques (2)

• Installation sur le serveur de pages html ne contenant que la forme des pages avec des scripts php : les squelettes du web dynamique qui vont permettre de « calculer » les pages finales à afficher

• Stockage des textes et autres données à placer dans les pages non pas sur le serveur web, mais dans une base de données qui peut être sur un autre serveur

Principes des bases de données et mysql

• Conçues dès les années 70 pour accéder vite à de grands volumes d’information : fichier sécu…

• Associée à un langage de requête appelé SQL (Structured Query Language) : « toutes les voitures rouges immatriculées 38… »

• mysql est un Système de Gestion de Base de Données libre qui est très utilisé pour des ensemble de données pas trop importants

• Avantage de la BD : accès rapide, sécurité, sauvegarde des données indépendante de la forme…

Résumé : webs dynamiques

• Un serveur http avec un interprète php• Un SGBD accessible depuis le serveur

(souvent sur le même serveur…)• Des pages construites à la volée à partir

de squelettes placés sur le serveur et de données placées dans la base de données

• Pour alléger le serveur, utilisation de techniques de caches pour stocker les dernières pages calculées

• Initiative française de développer un web dynamique orienté publication de journaux électroniques

• Notion de rédacteurs, administrateurs, articles, rubriques.

• De nombreux squelettes disponibles pas tous libres de droits

• Site de référence : http://www.spip.net/

Autres outils de Webs dynamiques

• Commerciaux :– Lotus Domino d’IBM– WebObjects d’Apple (voir aussi cette présentation

) utilisé par de nombreux webs commerciaux : France2, France3, BMW…

– …

• Libres– Java Server Pages de SUN– Lutèce développé par la Ville de Paris– …

Démonstrations