Internet et ses services

Présentation au sujet: "Internet et ses services"— Transcription de la présentation:

1 Internet et ses services
Le Web et FTP TRICHET Francky

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): 35 recommandations techniques (HTTP, HTML, XML, etc.) 6 objectifs principaux Le W3C

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 2 – Le web sémantique : Ce que ca veut dire c’est que la connaissance disponible sur le web est écrite dans un langage fait pour l’humain. En adoptant des standards de description des ressources, les ordinateurs pour comprendre eux-même la nature des documents et de la connaissances qu’ils véhiculent sur le 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écentralisation Le 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

9 "système d'information hypermédia réparti"
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

17 Exemples d'URLs http://www.presidence.univ-nantes.fr/
désigne l'accès au serveur W3 de la présidence 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 X : 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 « Adresse où l’on va si on click… »
Aperçu de Netscape ... « Adresse où l’on est… » Lien Hypermédia « Adresse où l’on va si on click… »

20 Il faut désactiver la réception des cookies !!!
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
Toutes les sites proposés ci-dessous permettent de télécharger gratuitement les logiciels suivants : Winzip, CuteFTP, WSFTP, etc. Comité Réseau des Universités

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

35 HyperText Markup Language
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 :
<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)
<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> </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=« 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=«

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.

51 Autres composants HTML
Les Forms : permet la saisie de formulaire et offre ainsi de l’interactivité <form action=« URL » method=« post »> Votre nom <INPUT TYPE=«text»SIZE=«20»NAME=entree> <br> <INPUT TYPE=«submit»> <INPUT TYPE=«reset»> </form> URL = adresse à laquelle sera envoyé le formulaire METHOD = type d ’envoi des paramètres GET = contenu de la form concaténée à l ’URL POST = contenu passé par un message de requêtes TYPE = type de l ’objet graphique à afficher (text, password, checkbox, radio, submit, reset) NAME = « nom logique » du paramètre

52 Quelques conseils... Possibilité de voir le source HTML d’une page depuis un navigateur : réutilisation massive !! Les éditeurs ne dispensent pas d’aller voir le code généré : maîtriser sa production !! Ne pas surcharger les pages de choses inutiles : toujours penser à  l’utilisateur final !!

53 Les éditeurs WYSIWYG Création de quelques pages isolées
Word, Claris HomePage Netscape Composer Editeur de texte quelconque (HTML pur) Gestion de sites complexes Adobe PageMill (Version 3.0) DreamWeaver etc.

54 Comparaison des outils proposés (1)

55 Comparaison des outils proposés (2)

56 L ’interface du logiciel PageMill

57 Et les sites développés à l’aide de la technologie FLASH ???
Intégration d’animations graphiques pour le développement de sites très attractifs Mais ce n’est qu’une cerise sur le gâteau apportée par les infographistes ! Une équipe de développement de projets Web = rédacteurs de contenu, informaticiens et web designer (infographiste)

58 Et le SPAM ? (1/2) Envoi de pourriels en masse à des personnes n’ayant pas demandé de les recevoir Recherche automatique des adresses à partir des pages Web) SPAM : marque déposée d'une société Société américaine qui vendait du corned-beef, et qui a alimenté l'armée américaine pendant la seconde guerre mondiale ! Spam =Contraction de "Spiced Ham" (ou jambon épicé).

59 Et le SPAM ? (2/2) Synonyme de mal-bouffe, les Monthy Python dans un de leurs sketches ironiques faisaient la "promo" du spam, en tenue de Viking, dans un restaurant, en chantant une chanson dont les paroles étaient "Spam Spam Spam Spam...", alors qu'un serveur n'avait rien d'autre à proposer à ses clients que du spam corned beef! Un excellent collectif AntiSpam : Phishing : forme très dangereuse de SPAM incitant les internautes à saisir leur coordonnées personnelles sur de faux sites imitant à la perfection des sites de confiance comme celui d’une banque ou d’une boutique.