Internet et ses services

Internet et ses services : le Web et le FTP 1/59

Internet et ses servicesInternet et ses services

TRICHET Francky

[email protected]

Le Web et FTPLe Web et FTP


Le service WEBLe 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.


Le créateurLe 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.


Le créateurLe 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


Le W3CLe 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


Missions du W3CMissions 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

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

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


Missions du W3CMissions du W3C

4. L’ÉvolutivitéLe W3C s’assure que le web puisse être évolutif en restant simple, modulaire, compatible et extensible

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

6. Le Web Sémantique…


Le web est d’origine européenne 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


PrincipesPrincipes

• 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"


Les hypertextesLes 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


Les ancresLes 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'undocument hypertexteillustrant l'usage desancres qui peuventégalement être une image

ou un symbole

Ceci est un extrait d'undocument hypertexteillustrant l'usage desancres qui peuventégalement être une image

ou un symbole

1.1 Les hypertextes

Ils permettent de créerdes liens au sein desdocuments textes ...


Les liensLes 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


FonctionnementFonctionnement

• 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


Les ProxiesLes 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


Le client est « intelligent »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


Le nommage des ressourcesLe 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]]


Exemples d'URLsExemples 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


Les différents clientsLes 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


Aperçu de Netscape ...Aperçu de Netscape ...

« Adresse où l’on est… »

« Adresse où l’on va si on

click… »

Lien Hypermédia


Le Web : la menace !!!!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 !!!


Gestion des cookies sous IE 5.xGestion des cookies sous IE 5.x

• A partir du menu « Outils », « Option Internet »


Gestion des cookies sous Gestion des cookies sous NetscapeNetscape

• A partir du menu « Edition », « Préférences »


Gestion des traces de consultationGestion 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


Traces sous IE 5.xTraces sous IE 5.x

• Répertoire cache :C:\WINDOWS\Paramètres locaux\Temporary Internet Files

• A partir du menu « Outils », « Option Internet »

Supprime en même temps les deux types d ’historiques

Supprime les fichiers dansTemporary Internet Files


Traces sous NetscapeTraces sous Netscape

• Répertoire cache : C:\ProgramFiles\Netscape\Users\trichet\cache


Ce qu’il faut faireCe 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


Le service FTPLe 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


Principes de fonctionnement Principes de fonctionnement (1/2)(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.


Principes de fonctionnement Principes de fonctionnement (2/2)(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.


Les FTPs Anonymes 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)


Consultation d’un serveur FTPConsultation 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)


Des adresses de serveurs FTPDes 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.


Des serveurs FTP version WebDes 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.


Dans quel langage informatique sont écrites les pages Web ????

Pour finir sur le Web ...Pour finir sur le Web ...


Le langage HTMLLe 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...


Les TAGS de baseLes 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


Le formatage de texteLe 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%>


Exemple de page Exemple de page (code HTML)(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>


Exemple de pageExemple de page (chargement par le navigateur)(chargement par le navigateur)


Listes et énumérationsListes 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>


Les accentsLes 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


Les liens HyperTextesLes 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>)


Les ancresLes 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>


Les imagesLes 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)


Les tableauxLes 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>


Les tableaux (exemple)Les tableaux (exemple)

La taille des cases est fixée par

leur contenu


Les frames (1)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>



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>



• 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


Autres composants HTMLAutres 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.


Autres composants HTMLAutres 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


Quelques conseils...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 !!


Les éditeurs WYSIWYGLes é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.


Comparaison des outils proposés (1)Comparaison des outils proposés (1)


Comparaison des outils proposés (2)Comparaison des outils proposés (2)


L ’interface du logiciel PageMillL ’interface du logiciel PageMill


FLASH ??FLASH ??

• 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)


Et le SPAM ? (1/2)Et le SPAM ? (1/2)

• Envoi de pourriels en masse à des personnes n’ayant pas demandé de les recevoir

–Recherche automatique des adresses e-mail à 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é).


Et le SPAM ? (2/2)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 : http://caspam.org/

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

Internet et ses services

Documents

Transcript of Internet et ses services