6 - Web et Multimédia

1. 6 - Web et Multimédia

2. Plan • Protocoles du Web • Editeurs de sites Web • Evolutions du Web • Webs dynamiques

3. Protocoles du Web

4. 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

5. 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 ...

6. 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-1 Content-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

7. 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é

8. 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.

9. 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.

10. Editeurs de sites Web

11. 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

12. Navigateurs historiques : Mosaic

13. Navigateurs historiques : Netscape 1.0

14. Editeurs de Web : HoTMetaL

15. Editeurs de Web : Netscape Gold

16. Editeurs de Web : Visual Page

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

18. Editeurs de Web : AOLPress

19. Editeurs de Web : Amaya du W3C

20. Editeurs et administration de sites Web : SiteMill

21. Evolutions du Web

22. 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

23. Webs dynamiques

24. 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

25. 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

26. 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…)

27. 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

28. 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…

29. 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

30. 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/

31. 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 • …

32. Démonstrations