6 - Web et Multimédia. Plan Protocoles du Web Editeurs de sites Web Evolutions du Web Webs dynamiques.

Présentation au sujet: "6 - Web et Multimédia. Plan Protocoles du Web Editeurs de sites Web Evolutions du Web Webs dynamiques."— Transcription de la présentation:

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 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)le projet 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)RFC 1324 –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= Le résultat de votre recherche Il y a 1 réponse(s) BALACHEFF NICOLAS VIALLET INPG-3 LEIBNIZ Poste : 75067 PTT: 76.57.50.67 Repli: Email : Nicolas.Balacheff@imag.fr Connection closed by foreign host.

10 Editeurs de sites Web

11 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 Feuilles de style : exemple et descriptionexemple 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émentsprésentation du W3C

23 Webs dynamiques

24 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/http://www.spip.net/

31 Autres outils de Webs dynamiques Commerciaux : –Lotus Domino d’IBMLotus Domino –WebObjects d’Apple (voir aussi cette présentation) utilisé par de nombreux webs commerciaux : France2, France3, BMW…WebObjects cette présentation –…–… Libres –Java Server Pages de SUNJava Server Pages –Lutèce développé par la Ville de ParisLutèce –…–…

32 Démonstrations