Commentaires
Diaporama
Plan
1
Architecture Multi-Niveaux
2
Internet, Architecture TCP/IP, client-serveur…
3
Bref historique
  • 1967 : Proposition de réseau à commutation de paquets
  • 1969 : Premiers nœuds ARPANET
  • 1972 : Premiers services : Telnet, FTP
  • 1981 : Autres réseaux : BITNET, CSNET
  • 1982 : TCP/IP choisi pour ARPANET.
    • « internet » ensemble de réseaux interconnectés, utilisant TCP/IP
    • « Internet » ensemble d’internets TCP/IP interconnectés
  • 1984 : Serveurs de noms (DNS), un millier d’hôtes
  • 1986 : NSFNET (backbone à 56Kbps), NNTP 1988 : Premier virus Internet
    • Computer Emergency Response Team
  • 1989 : Plus de 100,000 hôtes
  • Concept web : Centre Européen Recherche Nucléaire, 1989.



  • décembre 1991 : Prototype web.
  • 1992 : Plus d’un million d’hôtes : Banque mondiale
  • 1993 : Navigateur Mosaic.
  • 1994 : Arrivée du commerce en ligne
    • Pizza-Hut, First Virtual première banque
  • 1994 : Création du World Wide Web Consortium (W3C).
  • 1995 : Les services en ligne proposent une connexion Internet
  • Création Netscape Communication Corp. en 1995. [fin en 1998]
4
Une explosion
5
Données et adresses
  • Routage
    • Découpage des données → datagrammes.
    • Datagrammes : unités (de données du protocole IP) de taille réduite, transmises séparément sur le réseau (routés) et réorganisés à l'arrivée
  • Chaque machine a une adresse Internet (IP)
    • Structure hiérarchique
    • IPV4: 4 octets (de la forme : 115.23.47.105)
      • 2564 = 4 294 967 296 adresses disponibles (en principe)
    • IPV6: 16 octets
    • Regroupés en deux parties : (R,H)
      • R : numéro du réseau, H : numéro d'une machine dans le réseau
      • Plusieurs découpages possibles
6
Nom d'une machine
  • (R,H) devient (nom_hôte, nom_réseau)
    • Le premier mot est le nom de la machine
    • Le nom de réseau est structuré en domaines et sous-domaines
      • aton.iuta.u-bordeaux.fr, ca-bdx-3-217.abo.wanadoo.fr
  • Résolution de noms
    • Le réseau n'utilise que les numéros
    • Correspondance Nom→Adresse
      • Fichier hosts, Serveur de noms (Domain Name Server)
7
Architecture TCP/IP
  • Niveaux physique et liaison (couches 1 & 2) : tout est possible.
    • Tous types de lien physique : coaxial, paire torsadée, modem, fibre optique, radio, …
    • Tous types de couche 2 : Ethernet, FDDI, ATM, RNIS, PPP, PPTP…
  • Niveau réseau : IP (internet protocol)
    • Construction des datagrammes, adressage, routage
    • IP : internet protocol
    • ARP : adress resolution protocol
      • associe les adresses physiques (MAC sur 48 bits), aux adresses internet
    • ICMP : internet control message protocol
      • Outils  d’administration IP
8
Niveau transport
  • Niveau transport : Deux protocoles
    • UDP : User Datagram Protocol
      • Connexion hors liaison, non fiable
    • TCP : Transmission Control Protocol
      • Connexion avec liaison
      • Vérification de la connexion
      • Correction des erreurs
  • Ports :Numéros désignant des services
    • ftp               21/tcp
    • telnet            23/tcp
    • smtp              25/tcp   mail
    • pop3             110/tcp    post office protocol
  • numéro IP + port (socket), permet d’adresser une application de façon non-ambiguë
9
Niveau application
  • Architecture client-serveur
  • Des services avec des protocoles précis
    • Définis par des RFC : Request For Comment (protocole, un numéro de port…)
  • Les services de base
    • Connexion distante (1972 : RFC 854, port 23)
      • Un client : telnet, un serveur: telnetd (telnet daemon)
    • Transfert de fichiers (RFC 959, port 21) : File Transfer Protocol
      • Un client ftp , un serveur, ftpd
    • Courrier Electronique : SMTP (port 25), POP3 et IMAP4 (Internet Message Access Protocol),
    • Serveurs Web : HTTP, port 80
10
WWW, HTML, DHTML, XHTML…
  • -
11
Architecture World Wide Web (1)
  • Un immense système d’information réparti : ensemble de documents (ou pages) web.
  • Organisation hypertexte et hypermédia (Vannevar Bush, 1945)
    • Information découpée en document (pages), reliées par des liens
    • Un clic de souris pour naviguer
  • Principe de l’interaction
    • On insère une zone réactive (texte, image ou partie d'image),
    • On lui associe une action (appeler une autre page, envoyer un courrier, jouer un morceau de musique, lancer une vidéo)
    • On signale la zone  (commentaire, soulignement, changement de curseur)
  • Architecture Client/Serveur
    • Client pour naviguer sur les pages, appelé ‘navigateur’ (browser)
    • Serveur web pour héberger les pages
  • Mécanisme de localisation des documents web (resource)
    • Types des documents très divers, essentiellement de l’hypertexte
    • Quel est le nom de la page ? Où la page se trouve-t-elle ? Comment peut-on accéder à la page ?
      • URL (Universal Resource Locator) :
        • Format général : protocole://serveur:port/chemin
          • Exemple : http://www.labri.fr/~felix/enseignement/index.html
        • Types d’URL les plus courantes : http, ftp, file, mailto
          • Exemple : ftp://ftp.labri.fr/pub/doc.pdf
12
Architecture World Wide Web (2)
  • Cookies (témoin)
    • Web sans mémoire :
      • Le navigateur émet une requête vers le serveur et obtient en retour le fichier. Le serveur oublie ensuite les échanges qu’il a eus avec le client.
      • Pas de concept de session, pas de mémorisation d’état sur le serveur
    • Besoin de mémoire :
      • Site avec enregistrement préalable des utilisateurs
      • Achat sur un site commercial (gestion d’un panier)
    • La technique du cookie (conçue par Netscape ) permet une forme de mémoire
      • Le serveur envoie la page demandée plus des informations additionnelles comme par exemple un cookie
      • Un cookie est un petit fichier (ou chaîne de caractères)
        • au plus 4Ko que le navigateur doit sauvegarder sur son disque dur
        • Composé de champs
          • Domaine : provenance du cookie
          • Contenu : sous la forme de couple nom=valeur
          • Expiration : indique le moment auquel le cookie expire (pour cookie persistant)
        • Exemples :
          • [casino.com IDJoueur=12800 15-10-04]
          • [magasin.com achat=2-120123 15-6-04]
13
Documents web statiques
14
Documents web statiques (1)
  • Forme la plus simple des documents web
  • Ecrits en HTML (Hyper Text Markup Language) :
    • Un langage pour décrire le texte de la page (contenu/données) et les informations de formatage (présentation/mise en forme)
    • Formatage réalisé à l'aide de balises (tags) indiquant au navigateur comment il doit afficher la page
      • Langage de balisage (comme TeX, troff…)
      • Exemple : niveaux de titre, centrage, tableau, listes de données
        • <html> <\html> ,<H2> Titre de niveau 2 </H2>
        • <font face="arial, helvetica">, <a href="interest.htm">
        • <b> ça sera gras </b> (ou <B>)
    • Evolution rapide : Dynamic HTML, XML, XHTML…
    • Rôle du navigateur : lire et formater les pages après leur réception en fonction de son environnement : taille de la fenêtre, résolution, nombre de couleurs…
    • Une page web se compose d’un en-tête suivi du corps :
      • <html>
      • <head> En-tête </head>
      • <body> corps </body>
      • </html>
    • Balises avec paramètres appelés attributs :
      • <img src="Image1.jpg">
    • Jeu de caractères ISO 8859-1 Latin-1
    • Caractères spéciaux : &egrave; &lt; &gt; &amp; (è < > &)



15
Documents web statiques (2)
  • Exemple de document : le code source et la page formatée
16
Documents web statiques (3)
  • Quelques balises HTML :
  • <HTML>...</HTML> Début et fin de fichier Html
  • <HEAD>...</HEAD> Zone d'en-tête d'un fichier Html
  • <TITLE>...</TITLE> Titre affiché par le browser (élément de HEAD)
  • <BODY>...</BODY> Début et fin du corps du fichier Html
  • <P>...</P> Nouveau paragraphe
  • <IMG scr="xyz.gif"> Insertion d'une image
  • <A href="http://...">...</A> Lien vers une page Web
  • <A href="mailto:...">...</A> Lien vers une adresse eMail
  • <A href="fichier.htm">...</A> Lien vers la page locale fichier.
  • <!--...--> Commentaire ignoré par le navigateur
  • <BR> A la ligne


17
Documents web statiques (4)
  • Evolutions de HTML :
    • HTML 2.0 : inclut les formulaires
  • HTML 1.0 : liens, images, listes (unidirectionnel)
  • HTML 2.0 : images cliquables, formulaires
    • Balise <input>
      • Champs de texte, case à cocher, image réactive, bouton de soumission…
    • Exemple de formulaire avec méthode post : code source, page formatée et commentaire
  • HTML 3.0 : tableaux
    • Balise <table>
  • HTML 4.0 : scripts
18
Documents web statiques (5)
  • Feuille de style
    • But : même apparence pour toutes les pages d’un même site
      • Eviter les styles physiques <b>, <i>
      • Utiliser des styles logiques définis dans la feuille de style
    • Description dans le document :
    • <HEAD>
    •  <STYLE type="text/css">
    •    H1.myclass {border-width: 1; border: solid; text-align: center}
    •  </STYLE>
    • </HEAD>
    • <BODY>
    •  <H1 class="myclass"> Cet H1 est affecté par notre style </H1>
    •  <H1> celui-là ne l'est pas </H1>
    • </BODY>
    • Description dans une feuille de style externe
    • <link rel="stylesheet" type="text/css" ref="../Style.css">



19
Documents web statiques (6)
  • XML et XSL
    • Avec HTML :
      • Pas de structure aux pages web
      • Contenu et formatage sont mélangés
      • Difficile d’effectuer un traitement automatique sur des pages web
    • Consortium W3C a amélioré HTML
      • Afin :
        • D’avoir des pages web avec une structure
        • De traiter automatiquement des pages web
      • Naissance de XML (eXtensible Markup Language) et de XSL (eXtensible Style Language)
        • Formatage indépendant du contenu
20
Documents web statiques (8)
  • XHTML (eXtended HTML)
    • Après HTML 4.0
    • un langage avec une syntaxe stricte : XHTML
      • Analyseur plus simple (donc adapté à des équipements légers : assistant personnel…)
      • Reformulation de HTML 4.0 en XML
        • La balise <h1> n’a plus de signification intrinsèque : le formatage est à définir dans un fichier XSL.
      • Nouvelle norme du web
    • Différences HTML 4.0 et XHTML
      • Balises et attributs en minuscule
      • Balises de fermeture nécessaires (</p><img src="Image1.jpg"/>)
      • Valeurs des attributs entre guillemets (<img src="i.jpg" height="500"/>)
      • Les balises doivent s’imbriquer correctement



21
Fonctionnement côté client (1)
    • Le navigateur détermine l’URL http://www.labri.fr/index.html, puis interroge le DNS pour avoir l’adresse IP 147.210.98.200.
    • Demande connexion sur le port 80
    • Envoie une requête demandant le fichier index.html
    • Le serveur envoie le fichier demandé
    • La connexion TCP se termine
    • Le navigateur affiche la page (texte, image…) correspondant à index.html



22
Fonctionnement côté client (2)
  • Toutes les pages ne contiennent pas que du HTML
    • Document pdf, image gif, photographie jpeg, audio mp3, vidéo mpeg…
    • Le serveur envoie également des informations relatives à une page
      • le type MIME (Multiple Internet Mail Extensions) de la page
        • Text/html ou autres types intégrés dans le navigateur : affichable directement par le navigateur
        • Table de types MIME : association un type MIME/visualiseur
          • Module d’extension (plug-in)
          • Application auxiliaires (helper) : Acrobat Reader d’Adobe, Word de Microsoft… mais surtout pas un shell/interpréteur de commande !
        • Types et sous-types du format MIME : image/gif, image/jpeg, audio/basic, video/mpeg
23
Fonctionnement côté serveur
  • En simplifiant :
    • Accepter une connexion TCP,
    • Obtenir le nom du fichier demandé,
    • Récupérer le fichier sur le disque et l’envoyer au client,
    • Libérer la connexion TCP
  • Une requête Þ un accès disque (~ 5ms pour un disque SCSI)
    • 200 requêtes/seconde Þ faible pour un site avec beaucoup d’activités !
    • Améliorations :
      • Mémoire cache (pour conserver les fichiers les plus lus)
      • Serveur multi-thread (attention aux conflits dans les accès disque…)
      • Dupliquer serveur et disque
  • Autres tâches du serveur
    • Résoudre le nom de la page web demandée (http://www.labri.fr)
    • Authentifier le client, puis réaliser un contrôle d’accès sur le client et sur la page (fichier htaccess)
    • Vérifier le cache, puis rechercher la page sur le disque
    • Déterminer le type MIME pour l’inclure dans la réponse
    • Envoyer la réponse au client
    • Enregistrer l’activité réalisée dans le journal
24
Documents web dynamiques
  • Contenu Statique
    • Le client envoie une requête avec un nom de fichier
    • Le serveur répond en lui retournant le fichier
  • Contenu dynamique :
      • Généré à la demande, plutôt que stocké sur disque
      • Génération faite par  le client ou le serveur

25
Documents web dynamiques
côté client
  • But : Proposer un contenu actif et interagir directement avec l’utilisateur
    • Autrement que par un clic sur un lien qui fait quitter la page
    • Agrémenter la présentation
    • Intégrer des programmes : jeux, traitement de texte
  • Script imbriqué dans des pages HTML
  • Exécution côté client
  • Balise <script> (à partir de HTML 4.0)
  • Langage de script : javascript (le plus utilisé)
  • Autre moyen : applet Java (Sun), contrôle ActiveX (Microsoft), Java, VBScript, Dynamic HTML, Flash …
26
Exemple de scripts côté client
  • Exemple 1 (javascript) :
    • <SCRIPT type="text/javascript">
    • <!--  pour cacher le script des anciens navigateurs
    •   function square(i) {
    • document.write("The call passed ", i ," to the function.","<BR>")
    • return i * i
    •   }
    •   document.write("The function returned ",square(5),".")
    • // commente la marque de fin de commentaire SGML -->
    • </SCRIPT>
  • Interaction aux événements
    • Exemple 2 : Réagir aux mouvements de la souris, clic de souris :
    • <BUTTON type="button" name="monbutton" onclick="window.open("ailleurs.com")">
    • Exemple 3 : Exécuter du code au lancement d’une page
27
Dynamic HTML (DHTML)
  • Combinaison de
    • Feuilles de style
    • Événement intrinsèques
    • JavaScript
  • Document Object Model
    • Le document a une structure par défaut qui permet d’accéder à ses composants
    • On peut alors les manipuler par un script
  • On peut définir des objets que l’on peut alors manipuler
28
Exemple
  • <head>
  • <STYLE>
  • .ST1 { font-family: Blackadder ITC; color: #008000; font-size: 16 pt; font-style:italic ;visibility = hidden}
  • .ST2 { font-size: 15 pt; color: #FF00FF; visibility = hidden }
  • </STYLE>
  • <title>Page d'accueil</title>
  • <script language="JavaScript">
  • function affichobjet(objet) {objet.style.visibility = VISIBLE;}
  • function cachobjet(objet) {objet.style.visibility = HIDDEN;}
  • </script>
  • <Title> Test </Title></head>
  • <body>
  • <H1>Comment faire apparaître des éléments</H1>
  • <DIV ID = "Element" CLASS = "ST1" onMouseOver = "affichobjet(Bj)" onMouseOut = "cachobjet(Bj)">L'élément affiché<BR></DIV>
  • <DIV ID = "Bj" CLASS = "ST2" >Celui qui apparaît</DIV>
  • <script language="JavaScript" >
  • affichobjet(Element);
  • </script>
  • </body>
29
Documents web dynamiques
côté serveur (1)
  • L’exemple d’une formulaire
    • Un client remplit un formulaire
    • Un message est envoyé au serveur avec les données du formulaire, sans demande de fichier
    • Ces données doivent être transmis à un programme ou un script pour être traitées. Par exemple :
      • À partir de ces données, rechercher (par exemple) dans une base de données des informations (accès par une connexion directe ou un lien ODBC)
      • Générer une page HTML contenant une réponse
      • Envoyer cette page au client
    • Exemple d’une application de commerce électronique : envoie du panier et sa réponse.



30
Documents web dynamiques
côté serveur (2)
  • Les différentes étapes :
    • Remplissage du formulaire
    • Formulaire retourné
    • Transfert au script CGI
    • Le script interroge la base de données
    • Enregistrement trouvé
    • Le script construit la page
    • Page affichée
  • Système CGI :
    • Common Gateway Interface : ‘interface de passerelle commune’
    • Permet l’échange de données entre un serveur web et programme (ou script)
      • Entrée : les données du formulaire
      • Sortie : la page (HTML) de réponse généré par le script
31
Documents web dynamiques
côté serveur (3)
  • Deux approches pour gérer ces pages interactives :
    • Méthode traditionnelle : utilisation de scripts CGI
      • Dans un formulaire, le bouton envoyer fait appel à une URL désignant un fichier exécutable (script) :
        • <FORM METHOD=POST ACTION=http://www.mybiz.com/cgi-bin/formprog.pl>
        • Des paramètres lui sont transmis selon la norme CGI et ce script crée une page html
      • Langages de script CGI : Perl, Python
    • Autres moyens : incorporer des scripts à l’intérieur de page HTML et les faire exécuter par le serveur
      • A partir du suffixe du fichier, le serveur détecte qu’il doit exécuter du code à l’intérieur de la page : le code peut alors créer des pages html à la demande
      • Technologies : ASP (Active Server Pages) de Microsoft qui utilise le VBScript, JSP (Java Server Pages) de Sun qui utilise Java, PHP.


32
Documents web dynamiques
côté serveur (4)
  • Architecture 3 tier
    • Ces technologies (ASP/PHP/…) s'inscrivent dans une architecture 3-tier.
    • Un serveur sert d'intermédiaire entre :
      • le navigateur du client
      • une base de données
        • technologie permettant un accès transparent au SGBD
          • connexion,
          • manipulation des données.
33
Documents web dynamiques
côté serveur (5)
  • PHP
    • Automne 1994, Rasmus Lerdorf
    • 1995, première version baptisée Personal Sommaire Page Tools, puis Personal Home Page v1.0.
    • Actuellement PHP4 (mars 2003:V4.3.2) et PHP5
    • Le serveur officiel de php (http://www.php.net/)
  • Principes de PHP: langage de programmation ‘à la C’
    • Script :
      • suite d’instructions incluses dans un code HTML
      • le code php délimité par les balises <?php et ?>
      • Le fichier doit avoir l'extension adéquate .php
    • Un navigateur désire accéder à une page test.php :
      • le suffixe signale au serveur la présence de scripts php
      • lorsque le serveur rencontre une instruction, il la transmet à l'interpréteur qui exécute l'instruction puis envoie les sorties éventuelles au serveur.
      • A la fin du script, le serveur transmet le résultat au client (le navigateur)
  • Plateformes
    • Apache (linux)
    • Intégration au sein de nombreux serveurs web (Microsoft IIS, ...)
34
Documents web dynamiques
côté serveur (6)
  • <HTML>
  • <HEAD>
  • <TITLE>Premier exemple de page HTML avec du script php</TITLE>
  • </head>
  • <BODY>
  • <H1> HTML ET PHP... </H1>
  • <?php
  • // Récupération de la date, stockage dans une variable et affichage
  • $MaDate = date("Y");
  • echo "Nous sommes en $MaDate";
  • ?>
  • <P> Le client est : <?php echo $HTTP_USER_AGENT; ?>
  • <P> Le serveur est : <?php echo $SERVER_NAME; ?>
  • </BODY>
  • </HTML>


35
Documents web dynamiques
côté serveur (7)
  • ASP (Active Server Pages)
    • standard mis au point par Microsoft en 1996
    • Technologie (environnement de programmation), représentant sous forme d'objets les interactions entre le navigateur et le client
    • Actuellement PHP4 (mars 2003:V4.3.2) et PHP5
    • Le serveur officiel de php (http://www.php.net/)
  • Principes d’ASP :
    • Un modèle de programmation basé sur un ensemble d’objets dont voici les principaux :
      • Application représente le site. Il permet de manipuler les variables, les constantes, et d'en "mémoriser" les valeurs
      • Session représente l'utilisateur. Il permet de conserver les données relatives à l'utilisateur d'une page du site à une autre
      • Response représente le résultat à afficher sur le navigateur
      • Request permet de traiter les information en provenance du client par l'intermédiaire de formulaires
      • Server représente le serveur. Il permet d'en gérer les paramètres, ainsi que d'instancier les objets utilisateurs
      • ObjectContext désigne la transaction courante. Il sert à gérer les traitements de la transaction
    • Script :
      • suite d’instructions incluses dans un code HTML
      • le code asp délimité par des balises <SCRIPT>
      • <SCRIPT language="VBScript|Jscript" >
      • code du script
      • </SCRIPT>
      • Le fichier doit avoir l'extension adéquate .asp
  • Plateformes
    • Windows IIS (Windows) avec VBScript ou JavaScript
    • Portage Apache utilisant Perl (Linux, Unix…)
36
Documents web dynamiques
côté serveur (8)
  • Atouts de PHP/ASP
    • Gratuité
      • PHP:La gratuité et la disponibilité du code source distribué sous licence GNU GPL (open source : logiciel libre)
      • ASP: cette technologie propriétaire a l'avantage d'être gratuit
    • La simplicité d'écriture de scripts
    • La possibilité d'inclure le script Php/ASP au sein d'une page HTML (contrairement aux scripts CGI, pour lesquels il faut écrire des lignes de code pour afficher chaque ligne en langage HTML)
    • La simplicité d'interfaçage avec des bases de données.
    • L'intégration au sein de nombreux serveurs web (Apache, Microsoft IIS, ...)
37
Documents web dynamiques
Fin et résumé
  • Côté serveur :
    • Pages pouvant être générées à la volée par des scripts : Perl, python, php, asp, jsp
  • Côté client
    • Pages écrites en XML converties en HTML par un fichier XSL
    • Scripts Javascript
    • Modules d’extension (Plug-in) / applications (Helper) auxiliaires pour afficher des infos aux formats divers
38
Protocole HTTP
  • Protocole de transfert pour le WWW
    • Définit les messages échangés entre le client et le serveur
    • RFC 2616
    • Connexion TCP ‘persistante’ : une même connexion pour plusieurs requêtes (à partir de http 1.1)
    • Méthodes : opérations gérées par le serveur
      • GET : demande au serveur l’envoie d’une page (la plus utilisée)
      • PUT : permet d’écrire un ensemble de pages sur le serveur
      • POST : transmet une URL et ajoute de nouvelles données
      • …
    • En-tête de message :
      • La ligne de requête peut être suivie de lignes supplémentaires : en-tête de message
      • Par exemple : L’en-tête User-Agent permet au client de fournir les caractéristiques du navigateur
      • Autres en-têtes : Accept_language (requête)  pour préciser les langues naturelles que le client peut gérer, cookie (requête) pour retourner au serveur un cookie qu’il a placé au préalable, Last-Modified (réponse) pour préciser l’heure et la date auxquelles la page a été modifiée…



39
HTTP : le  protocole
  • Principes
    • Le client se connecte sur le port HTTP du serveur (normalement 80)
    • Il envoie une requête de la forme GET <URL>
    • Le serveur retourne des données ASCII
    • Le client interprète le texte et l’affiche
  • Limitations
    • Protocole « sans état » : pas de suivi de la connexion
40
Amélioration des performances
  • www : service le plus populaire : surcharge des serveurs, routeurs,  liaisons…
  • Techniques pour améliorer les performances :
    • Mise en cache
      • Mémorisations des pages en vue d’un emploi ultérieur
      • Un processus ‘proxy’ gère la mise en cache
      • Navigateur configuré pour adresser les requêtes au proxy (et non au serveur hébergeant la page)
        • Les pc, les LAN (d’entreprise) et les FAI disposent d’un ‘proxy’
        • Mise en cache hiérarchique
        • Pb : combien de temps les pages doivent-elles rester en cache ?
          • Utilisation de l’en-tête ‘Last-Modified ’ : stabilité d’une page…
          • Envoie par le proxy de l’en-tête ‘if-modified-since’ : réponse courte du serveur si la page n’est pas périmée.
          • Pages dynamique (serveur) ne doivent pas être mises en cache.
    • Réplication de serveur (ou mise en miroir)
      • Contrairement à la mise en cache, ce procédé est une technique mise en œuvre côté serveur
      • Difficulté d’anticiper sur le succès d’un site, parfois le succès n’est que temporaire (flash crowd :afflux soudain de visiteurs)
      • Réplication automatique en fonction du trafic
      • Service proposé par des sociétés qui disposent de plusieurs sites d’hébergement
    • Réseaux de remise de contenu
      • Sociétés (CDN : Content Delivery Network) proposant de distribuer des contenus rapidement et facilement.
      • CDN : Interface entre fournisseurs de contenu (sites de musique, vidéo…) et FAI

41
Mise en oeuvre
  • Serveurs
    • Produits disponibles :
      • Apache
      • Lotus Domino Web Server
      • Microsoft I.I.S.
      • Netscape Enterprise Server
      • Oracle Web server
    • Caractéristiques :
      • Robustesse, fiable, sécurité…
      • Communiquer avec des SGBD
    • Critères de choix :
      • Système d’exploitation
      • SGBD associé
  • Navigateurs
    • Produits disponibles :
      • Navigator (Netscape)
      • Internet Explorer (MS)
      • Opera
    • Récents et efficaces
      • Pour être capable d’exploiter toutes les évolutions
42
Développement web
43
De la page au site web
  • A la main
    • En tapant le texte
    • En saisissant les diverses balises
    • Long, fastidieux et obscur ...
  • A l'aide d'outils adaptés
    • Suites bureautiques
      • MS Office par exemple (Word, mais aussi Excel, Access ou Powerpoint)
    • Outils spécialisés
      • pour créer une page
      • pour développer un site complet
    • Système de gestion de contenu « CMS »
44
Enrichir la page
  • Contenu
    • Images respectant des  standards
      • JPEG, GIF
      • Avec des zones réactives
    • Sons ou vidéos
      • téléchargeables (wav, mp3)
      • en flux continu (Real Audio, Streamworks)
  • Structure
    • Plusieurs cadres (frames) :
      • titre,
      • table des matières,
      • zone de données
    • Chaque zone contient une page
45
Gestion d’un site
  • Développement des pages sur un serveur local
    • Serveur de fichier sauvegardé
    • Serveur Web de test
  • Publication des pages
    • Le serveur Web est à l’extérieur du firewall
    • Les pages sont publiées par FTP, WebDav, ...
  • Les pages sont testées
    • Localement
    • En situation réelle
    • En utilisant plusieurs types de navigateurs
46
Contraintes
  • On ne connaît pas la nature du client
    • Système : PC sous Windows, MacIntosh, station Unix
    • Navigateur et sa version : Netscape, Explorer, ...
  • Tous doivent être à égalité
    • La page doit être lisible par tous
    • Les programmes exécutables par tous
  • Le réseau est lent
    • Les données transférées doivent être peu volumineuses
      • Une mn de musique HiFi  type CD = 10 MO !
      • Images haute résolution (600 pp)
      • Menus-images indispensables à la navigation