Internet et ses services

1. Internet et ses services Le Web et FTP TRICHET Francky francky.trichet@univ-nantes.fr

2. Le service WEB • Web : un système d'information hypermédia réparti • But : permettre un accès indifférencié à une grande variété de documents (hétérogènes) au travers du réseau Internet • Wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents • Le Web (WWW,W3, World Wide Web) propose une interface cliente conviviale permettant de consulter les informations du réseau Internet à la manière d'un grand livre que l'on feuilletterait.

3. Le créateur Tim Berners-Lee http://www.w3.org/People/Berners-Lee/ • A graduate of Oxford University, England, Tim now holds the 3Com Founders chair at the Laboratory for Computer Science and Artificial Intelligence (CSAIL)at the Massachusetts Institute of Technology (MIT). He directs the W3C Consortium, an open forum of companies and organizations with the mission to lead the Web to its full potential. • With a background of system design in real-time communications and text processing software development, in 1989 he invented the WWW, an internet-based hypermedia initiative for global information sharing, while working at CERN, the European Particle Physics Laboratory. He wrote the first web client (browser-editor) and server in 1990.

4. Le créateur • Berners-Lee, T.J., et al, "World-Wide Web: Information Universe", Electronic Publishing: Research, Applications and Policy, April 1992. • Berners-Lee T.J., et al, "The World Wide Web", Communications of the ACM, August 1994. • Tim Berners-Lee with Mark Fischetti, Weaving the Web, Harper San Francisco, 1999 • Inventeur du Web en 1989 et visionnaire du Web Sémantique en 1998

5. Le W3C http://www.w3c.org • Consortium fondé en 1994 par Tim Berners-Lee • Mission : Veillez à l’évolution technologique du web en terme d’interopérabilité dans un cadre ouvert de discussion par le développement de technologies, spécifications techniques, lignes directrices, logiciels et outils • Comité aviseur de 506 membres (IBM, Intel, Microsoft, etc.) • Who’s who (69 du noyau dur): http://www.w3.org/People/all?pictures=yes • 35 recommandations techniques (HTTP, HTML, XML, etc.) • 6 objectifs principaux

6. Missions du W3C • L’accès Universel Notions d’universalité entre les nations, les cultures, les langues, les niveaux intellectuels et même à travers d’autres appareils que l’ordinateur • La Confiance (Web of Trust)S’assurer à la fois de la confidentialité de certaines information tout en s’assurant que les auteurs de sites web soit responsable du contenu qu’ils publient • L’InteropérabilitéÉviter d’être lié à une technologie, plate-forme ou système d’exploitation pour utiliser les protocoles et langages liés au web

7. Missions du W3C • L’ÉvolutivitéLe W3C s’assure que le web puisse être évolutif en restant simple, modulaire, compatible et extensible • La DécentralisationLe W3C fonctionne le plus possible selon un mode distribué afin d’éviter le possible un engorgement lié à un processus centralisé de décision • Le Web Sémantique…

8. Le web est d’origine européenne • Le web est né au CERN : initiative européenne (Genève) ! • CERN is the European Organisation for Nuclear Research, the world's largest particle physics centre. • Laboratoire de physique des particules (Nucléaire) • Le web a été inventé pour faciliter l’échange d’informations entre communautés de chercheurs • http://public.web.cern.ch/public/index_f.html

9. Principes • W3 fonctionne en mode Client/Serveur • Il dispose d'un client capable de dialoguer avec d'autres types de serveurs (mail, ftp, telnet, etc.) • Il possède de plus son propre protocole de transfert d'informations => HTTP • W3 étend les techniques de l'hypertexte aux réseaux et aux multimédias (image, son, vidéo) "système d'information hypermédia réparti"

10. Les hypertextes • Un document texte classique permet : • l'accès séquentiel (page précédente, page suivante) • l'accès indexé (via une table des matières) • Un document hypertexte permet à partir d'une ancre (un mot, une image, un symbole) dans un texte d'accéder à une autre partie du texte (ou à un autre texte) à l'aide d'un simple clic de souris

11. Les ancres • On repère les ancres dans un hypertexte par leur couleur qui diffère du reste du texte • Une ancre pointant vers un document déjà consulté change de couleur Ceci est un extrait d'un document hypertexte illustrant l'usage des ancres qui peuvent également être une image ou un symbole( 1.1 Les hypertextes Ils permettent de créer des liens au sein des documents textes ...

12. Les liens • A chaque ancre est associé un lien vers : • une autre partie du même document (lien interne) • une partie d'un autre document hébergé sur le même serveur (lien interne) • Et dans le cas des hypermédias • une image à afficher • un son à jouer, une vidéo à projeter • Et dans le cas de W3 (lien externe) • un document sur un serveur distant • un protocole différent du protocole propre à W3

13. Fonctionnement • Le client W3 fait une demande de connexion • Le serveur fournit la ressource demandée par le client • La connexion est fermée : Il n'y a pas de connexion permanente entre un client W3 et un serveur ! • Des caches et serveurs « Proxies » permettent d'éviter des transferts systématiques

14. Les Proxies • Serveurs dits «  miroirs » qui permettent de mémoriser, pendant un laps de temps défini, les pages régulièrement consultées par des personnes affiliées à une même institution • But : éviter d ’encombrer le réseau de demandes identiques et récurrentes : la même page est chargée tous les jours par 10 personnes • Inconvénient : il n ’est pas certain que l ’information fournie soit la dernière version mise à jour par le propriétaire de la page Utiliser la fonction Recharger ou Actualiser pour désactiver l ’action du proxy

15. Le client est « intelligent » • L'information délivrée par un serveur est qualifiée: • il spécifie la nature de chaque partie du document (texte, ancres, image, son, programme, etc.) • C'est au client de s'adapter en utilisant le cas échéant un programme annexe pour délivrer l'information • les fameux Plugins (applications greffées) : visionneur d'images, lecteur de son ou de vidéo, interpréteur de scripts

16. Le nommage des ressources • Un lien doit référencer une ressource de manière non ambiguë (protocole d'accès, adresse internet, emplacement du fichier, etc.) • Pour ce faire, on utilise les URLs (Uniform Ressource Locator) : méthode://machine/chemin méthode://[user[:password]@]machine[:port][/chemin[#ancre|?paramêtres]]

17. Exemples d'URLs • http://www.presidence.univ-nantes.fr/ • désigne l'accès au serveur W3 de la présidence • http://www.lettres.univ-nantes.fr/langues/ • désigne le répertoire racine d'un serveur interne à la faculté des lettres (le site de l ’UFR de Langues !) • file:/C:/prof/trichet/test.txt • désigne un fichier à lire sur la machine locale • ftp://ftp.inria.fr/pub/rfc • désigne le répertoire rfc du ftp anonyme de l'INRIA

18. Les différents clients • Un client W3 est appelé un navigateur (Browser) • Le premier navigateur connu par le public fut Mosaic de NCSA (Université de l'Illinois) en 1993 • Netscape lance son navigateur fin 1994 qui rapidement devient le plus utilisé • Microsoft lance Internet Explorer fin 1995 • 1996-200X : Microsoft et Netscape se battent à coups de nouvelles versions de leur navigateur ! • Depuis 2001, retour remarqué de petits navigateurs dits « lights » tel que Mozilla

19. Aperçu de Netscape ... « Adresse où l’on est… » Lien Hypermédia « Adresse où l’on va si on click… »

20. Le Web : la menace !!!! • Vos consultations du Web : une terre de prédilection pour les responsables marketing pour réaliser des analyses sur vos habitudes de consommation • Technique utilisée : les Cookies • un système d ’identification est déposé sur votre disque (répertoire Windows/Cookies) : (Numéro identifiant, date de consultation) • cette identification est centralisée par une agence • dès que vous vous identifiez personnellement (achat en ligne), vous êtes fiché !!!!! • Il faut désactiver la réception des cookies !!!

21. Gestion des cookies sous IE 5.x • A partir du menu « Outils », « Option Internet »

22. Gestion des cookies sous Netscape • A partir du menu « Edition », « Préférences »

23. Gestion des traces de consultation • Les caches locaux • système de stockage « en local sur votre disque dur » des différentes pages consultées lors de sessions précédentes • C:\WINDOWS\Paramètres locaux\Temporary Internet Files • C:\Program Files\Netscape\Users\trichet\cache • L ’historique des consultations • mémorisation des adresses des sites consultés lors d ’une session • mémorisation des adresses directement saisies

24. Traces sous IE 5.x • Répertoire cache :C:\WINDOWS\Paramètres locaux\Temporary Internet Files • A partir du menu « Outils », « Option Internet » Supprime les fichiers dans Temporary Internet Files Supprime en même temps les deux types d ’historiques

25. Traces sous Netscape • Répertoire cache : C:\ProgramFiles\Netscape\Users\trichet\cache

26. Ce qu’il faut faire • A chaque fin de session, il faut vérifier et/ou supprimer les fichiers dans (version Windows 98, 2000) : • C:\windows\cookies • attention, on ne peut pas supprimer le fichier index.dat • C:\windows\historique • C:\windows\Internet Tempory Files • Et vider la corbeille !!!! • Sous Windows XP : • c:\Documents and Setting\Nom_User\Cookies • c:\Documents and Setting\Nom_User\Local Settings\Historique • c:\Documents and Setting\Nom_User\LocalSettings\Internet Tempory Files

27. Le service FTP • FTP signifie File Transfert Protocol. • C ’est un protocole de communication permettant le transfert de fichiers entre deux machines hétérogènes. Il offre la possibilité de se connecter à des serveurs FTP (la plupart sont des machines UNIX mais il existe des serveurs pour Macintosh et PC) et de transférer des fichiers ou des programmes à travers le réseau Internet sur votre ordinateur. • Savoir manipuler un outil FTP est indispensable lorsqu’on souhaite faire héberger un site Web

28. Principes de fonctionnement (1/2) • 1. L'utilisateur désirant transférer des fichiers entre deux machines doit posséder un compte sur chacune d'entre elles ; • 2. Une demande de transfert est initiée par un programme client qui dialogue avec un programme serveur. • Les échanges s'opèrent dans les deux sens, un client peut émettre un fichier à destination d'un serveur et/ou récupérer un fichier existant sur un serveur.

29. Principes de fonctionnement (2/2) • 3. Les transferts s'effectuent principalement selon deux modes : • le mode ASCII est utilisé pour les échanges de fichiers de type texte. La machine réceptrice doit interpréter à sa façon certains caractères sensibles (les fins de lignes notamment), • le mode binaire (ou image) où les fichiers ne subissent pas de transformation.

30. Les FTPs Anonymes • Un serveur anonyme est une machine sur laquelle sont stockés des fichiers mis gratuitement à la disposition de tout utilisateur d'Internet • L'intérêt d'un serveur anonyme est qu'il offre la possibilité à un utilisateur lambda de se connecter à une machine sans disposer d'un compte personnel. • L'usage impose seulement que l'utilisateur précise anonymous comme nom d'usager et donne son adresse électronique en guise de mot de passe (les gens sont contactés en cas d ’infection d ’un fichier)

31. Consultation d’un serveur FTP • Depuis un browser WWW • Le principe est le même que celui pour une connexion à un serveur web ; seul le format de l'adresse change (ftp://ftp.pratique.fr). La présentation des répertoires est graphique, et permet de sélectionner le document que l'on désire télécharger directement avec la souris. • Depuis une application dédiée • Il existe une grande variété de programmes sur les différents types de machines : Fetch (Macintosh), WS_FTP, Cute FTP (Windows)

32. Des adresses de serveurs FTP • ftp://ftp.cdrom.com/ • Ce monstre américain est tout simplement le plus grand serveur ftp du monde. Il appartient à Walnut Creek (CDRoms de shareware) et contient plus de 50 gigas de données. • ftp://ftp.funet.fi/ • Ce serveur en Finlande est vraiment un classique du monde . Très intéressant lorsque les liaisons vers les USA sont saturées... • ftp://ftp.wustl.edu/ • Ce site est historiquement le premier serveur (la technologie fut inventé dans cette université américaine). C'est également une formidable réserve de programmes et de sharewares.

33. Des serveurs FTP version Web • http://wwwftp.univ-lille1.fr/ftp/Default.asp • http://telecharger.01net.com/windows/Internet/serveur_ftp/ • http://www.cru.fr/ • Comité Réseau des Universités Toutes les sites proposés ci-dessous permettent de télécharger gratuitement les logiciels suivants : Winzip, CuteFTP, WSFTP, etc.

34. Pour finir sur le Web ... Dans quel langage informatique sont écrites les pages Web ????

35. Le langage HTML • C'est le langage utilisé pour la diffusion des documents W3 HyperText Markup Language • Il est constitué d'un ensemble de commandes de formatage de documents et de définition de liens hypermédias (langage de TAGS, « balises ») • Mise en gras, définition de titre, position du texte, couleur, ancre...

36. Les TAGS de base • La page HTML minimum : <html> <head> <title> ..… </title> </head> <body> </body> </html> • La section « titre » est utilisée pour nommer la page dans les Signets et dans la barre d ’états du navigateur

37. Le formatage de texte • Les 6 niveaux de titres :<h1>…..</h1> à <h6>…..</h6> • Les TAGS qui enrichissent le texte : • italique : <i>…..</i> • gras : <b>…..</b> • clignotant : <blink>…..</blink> • centré : <center>…..</center> • renforcé : <em>…..</em> • taille de police : <font size=n>…..</font> • couleur de police : <font color=red>…..</font> • indentation de texte • paragraphe : <p> • retour à la ligne : <br> • filet : <hr> • épaisseur du filet : <hr size=n> • longueur du filet : <hr align=center width=50%>

38. Exemple de page (code HTML) <html> <head> <title> Ma page </title> </head> <body> <center> <h1> <b> Page de cours d’HTML </b> </h1> </center> <br> <hr width=50%> <h2> <font color=red> Le formatage de texte</font> </h2> <br> <b> Texte en gras </b> <br> <i> Texte en italique </i> </body> </html>

39. Exemple de page(chargement par le navigateur)

40. Listes et énumérations • Liste standard : <ul> <li> premier élément <li> deuxième élément ... </ul> • Liste numérotée : <ol> <li> premier élément <li> deuxième élément ... </ol> • Sous-listes : imbrication de TAGS<ul> ….. </ul>

41. Les accents • Prohibés dans du code HTML pure qui s’écrit uniquement avec des caractères ASCII, d’où les codes suivants : • à : &agrave • â : &acirc • é : &eacute • è : &egrave • ê : &ecirc • î : &icirc • ô : &ocirc • ù : &ugrave • Les navigateurs récents interprètent directement les caractères latins accentués

42. Les liens HyperTextes • Lien = un « saut » vers une ressource cible à partir d’une ressource initialement active <a href=«URL»>Lien</a> • L’URL identifie : • une page du domaine local : <a href=«cv.html»>Mon CV</a> • une page sur un autre site : <a href=«http://www.amazon.com»>Amazon</a> • Le lien peut être du texte ou une image (TAGS<img>)

43. Les ancres • Une ancre = un endroit précis d’une page HTML • Définition : <a name=«nomAncre»> • Accès : • depuis la même page : <a href=«#nomAncre»>Lien</a> • depuis une autre page : <a href=«http://amazone.com/a.html#nomAncre»>Lien</a>

44. Les images • Formats reconnus : GIF et JPG • Insertion d ’une image <img src=«maPhoto.gif»> <img alt=«Ceci est ma photo»src=«maPhoto.gif»> <img src=«maPhoto.gif» width=100 height=100> • Les images ralentissent le chargement • Autres formats : AVI pour les vidéos, WAV pour le son, RA (Real Audio pour le son en continu)

45. Les tableaux • Utilisation des TAGS : <table> ….. </table> • Définition des lignes : <tr> ….. </tr> • Définition des colonnes : <td> • Exemple : <table border=1 cols=3> <tr> <td> l1c1 <td> l1c2 <td> l1c3 </tr> <tr> <td> l2c1 <td> l2c2 <td> l2c3 </tr> </table>

46. Les tableaux (exemple) La taille des cases est fixée par leur contenu

47. Les frames (1) • But : diviser une page en plusieurs fenêtres indépendantes • Définition (sans TAG <body>) : <html> <head> <title>…..</title> </head> <FRAMESET FRAMEBORDER=1 COLS="20%,80%"> <FRAME SRC=«indexG.html» NAME=«menu»> <FRAME SRC=«indexD.html» NAME=«cadreTravail»> <NOFRAMES><BODY> Votre navigateur ne peut pas afficher cette page s'il ne reconnaît pas les cadres.</BODY></NOFRAMES> </FRAMESET></HTML>

48. Les frames (2) Fichier indexG.html chargé dans le cadre menu Fichier indexD.html chargé dans le cadre cadreTravail <A HREF=«sites.html» TARGET=«cadreTravail»Sites Connexes</A>

49. Les frames (3) • Les valeurs possibles de l’attribut TARGET : • TARGET="Cellule-1" affichage dans la cellule "Cellule-1" • TARGET="_self" affichage dans la même cellule • TARGET="_blank" affichage dans une nouvelle fenêtre • TARGET="_top" suppression de toutes les frames, retour à un affichage classique

50. Autres composants HTML • Les Applets : une application Java exécutée par la machine virtuelle du « navigateur Client » <applet code=« toto.class » width=100 height=100> <param name=« param1> value=« taratata »> <param name=« param2> value=« tirititi »> </applet> Récupération des paramètres par la méthode getParameter de l ’applet Java.