• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web Dynamique
 

Web Dynamique

on

  • 1,879 views

 

Statistics

Views

Total Views
1,879
Views on SlideShare
1,868
Embed Views
11

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 11

http://1535549368.nvmodules.netvibes.com 8
http://www.slideshare.net 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Web Dynamique Web Dynamique Presentation Transcript

    • Web dynamique : Le flux des données sur le Web Olivier Dommange
    • Objectif Identifier et comprendre les flux de données sur le Web
    • Sommaire
      • Quelques définitions
      • Relation serveur et client
      • Flux des données côté client
      • La composition d'un serveur Web
      • Le protocole http
      • Flux des données sur un serveur
      • Flux des données asynchrones
    • Quelques définitions Client : Celui qui établit une demande à un serveur. Par exemple, l'affichage d'une page Web. Le client fait référence notamment au navigateur Web .
    • Quelques définitions Serveur : Aussi appelé « hébergeur » par sa fonction d'entreposer des fichiers des sites Internet. Il dispose :
      • un système d'exploitation (Linux, Windows, Mac, ...);
      • un logiciel de serveur HTTP (Apache, Windows server, ...).
      En savoir plus... Serveur HTTP sur Wikipedia
    • Quelques définitions Protocoles de transfert : Permet le transfert de données en fonction de plusieurs règles établies pour un usage précis. Les protocoles connus du Web :
      • HTTP (HyperText Transfer Protocol) – Destiné au navigateur
      • FTP (File Transfer Protocol) – Pour le transfert de fichiers
      • SMTP (Simple Mail Transfer Protocol)
      En savoir plus... Le protocole HTTP sur Wikipedia
    • Relation client et serveur Client Serveur Internet (http) Navigateur Web Logiciel HTTP (Apache)
    • Relation client et serveur index.html Flux statique Transfert de fichiers entre le serveur et le client sans en altérer le contenu. www.site.com 1 2 Client Serveur
    • Relation client et serveur Flux dynamique Transfert de fichiers créés dynamiquement sur le serveur. Client Serveur www.site.com index.php (html) index.php 1 3 2 Récupération de données sur le serveur (base de données, fichiers, ...)
    • Flux des données Navigateur (client) Client script.js applet (anim.swf) cookie index.html syle.css Les données lues et interprétées depuis le navigateur peuvent être :
      • Fichier HTML
      • Fichiers CSS
      • Fichiers Javascript
      • Applet (Flash, Java, Silverlight)
      • Cookie
    • Flux des données Navigateur (fichiers HTML et CSS) Le fichier HTML défini la structure et contient les contenus textes et les liens vers les contenus (images, applets) à afficher dans la page. Le fichiers CSS conditionne l'apparence de la page par son interaction avec le HTML.
    • Flux des données Navigateur (fichiers javascript) Le fichier javascript permet de créer une interaction avec le contenu de la page. Il peut ainsi :
      • Déclencher une animation
      • Faire apparaître / disparaître du contenu (HTML, CSS et textuel)
      • Interagir dynamiquement avec le serveur (Ajax)
      Note : Le javascript est supporté par les navigateurs courants mais l'utilisateur peut désactiver son interprétation.
    • Flux des données Navigateur (applets) Un applet est une application autonome qui peut s'exécuter dans une page HTML. Ces fichiers sont compilés malgré cela il est possible d'interagir avec le contenu depuis l'extérieur.
      • Flash
      • Java
      • Shockwave
      • Silverlight
      Note : Les applets ne sont pas supportées dans les navigateurs sans que soit installé par l'utilisateur la version du plug-in qui permet leur lecture.
    • Flux des données Navigateur (cookie) Un cookie est un fichier archivé sur le poste de travail disposant d'une durée de vie limitée. Lorsqu'un cookie est créé, celui-ci permet de stocker des informations concernant l'utilisateur (profil, préférences et interactions). Note : Les cookies sont supportés par les navigateurs courants mais l'utilisateur peut désactiver la possibilité d'en créer.
    • Flux des données Cross-site Accès directement par le biais d'un lien absolu à un fichier sur un serveur distant. Image <img src=&quot; http://images.google.fr/images/nav_logo.png &quot; /> CSS <link href =&quot; http://www.csszengarden.com//001/001-fr.css &quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> Javascript <script src= &quot;http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js&quot; type=&quot;text/javascript&quot;></script>
    • Cross-site (suite) Récupération de données d'un site par le biais d'un lien absolu à un fichier sur un serveur distant. iframe <iframe width=&quot;300&quot; height=&quot;300&quot; frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot; src=&quot; http://maps.google.ch/?ie=UTF8&amp;ll=46.362093,9.041748&amp;spn=2.274509,3.295898&amp;z=7&amp;output=embed &quot;></iframe> embed <object width=&quot;425&quot; height=&quot;344&quot;><param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/Hj7KoLITX0k&hl=fr_FR&fs=1&&quot;></param><param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;></param><embed src=&quot; http://www.youtube.com/v/Hj7KoLITX0k&hl=fr_FR&fs=1& &quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;425&quot; height=&quot;344&quot;></embed></object> Flux des données
    • Flux des données Cross-site (suite) Accès aux données d'un autre site par le biais d'un lien absolu à un fichier de recensement de données sur un serveur distant. XML Le format eXtended Markup Language. Un format au large potentiel et utilisé à plusieurs fin. Notamment utilisé pour les flux RSS . Ce format permet de récupérer les récentes données mises à jour d'un site distant.
    • Le serveur Sa composition Un serveur dispose :
      • d'un système d'exploitation (Linux, Windows server)
      • d'un logiciel http (Apache, Internet Information Services, ...)
      • D'applications de gestion de base de données (MySQL, SQL server, Oracle, ...)
      • De librairies de langages serveurs (PHP, ASP, Java Server Page [JSP], Coldfusion, ...)
      Serveur Librairie de langage serveur Application de base de données
    • Le serveur Outils de développement Dans une configuration du type Apache, MySQL et PHP il existe des applications qui reproduiront la gestion d'un serveur. A ce titre, il existe :
      • EasyPHP pour Mac et Windows
      • Xampp pour Mac, Windows et Linux
      • Mamp et Wamp pour (dans l'ordre) Mac, Linux et Windows
      Site de EasyPHP Site de Xampp Site de Mamp Site de Wamp En savoir plus...
    • Le protocole HTTP Pourquoi ? Pour que le navigateur et le serveur se comprennent...
      • Le navigateur fait une requête au serveur et transmet des indications
      • En retour le serveur transmet les données mais également indique une réponse.
    • Le protocole HTTP Le navigateur envoie quoi ? Que ce soit en cliquant sur un lien ou en envoyant des données d'un formulaire des indications par le biais d'une requête sont transmis au serveur. GET / HTTP/1.1 Host: www.site.com User-Agent: Mozilla/5.0 (Windows; U; [...] Referer: http://www.google.com/ Comment ? - Méthode Vers qui ? - Vers quelle page Quel moyen ? - Navigateur De qui ? Requête (exemple simplifié) Le http définit sur Wikipedia En savoir plus...
    • Le protocole HTTP Le serveur répond quoi ? Le serveur traite les informations et indique l'état du traitement. HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Server: Apache/0.8.4 Content-Type: text/html Content-Length: 59 Expires: Sat, 01 Jan 2000 00:59:59 GMT Last-modified: Fri, 09 Aug 1996 14:21:40 GMT Etat (200 OK - 404 Not Found - ...) Moment de la réponse Logiciel http Type Mime du fichier envoyé Taille du fichier Délai de validité Dernière modification du fichier Réponse (exemple simplifié)
    • Le protocole HTTP Méthode GET de transfert de données La méthode GET est celle employée par défaut pour transmettre des données au serveur. Elle se transcrit directement dans l'URL (Uniform Resource Locator). Exemple : http://site.com ? nom=tim & age=32 & taille=175 Dans cet exemple, des valeurs sont envoyées au serveur. Il sont séparés par les symboles [ ? ] Et [ & ] :
      • nom = tim
      • age = 32
      • taille = 175
    • Le protocole HTTP Méthode POST de transfert de données La méthode POST envoie les informations au serveur sans que ne puisse être visible son contenu par l'utilisateur ( contrairement à la méthode GET qui affiche dans l'URL le contenu ). Cette méthode est utilisée dans l'envoi de données provenant d'un formulaire essentiellement.
    • Le protocole HTTP Le protocole HTTPS Il s'agit du même protocole que le HTTP mais qui dispose d'une couche de sécurité. Ce protocole renforce la confidentialité des données envoyées d'un site Internet. Il est particulièrement pour les transactions financières.
    • Flux des données Sur le serveur Les données sur un serveur peuvent être recueillies depuis :
      • Base de données
      • Fichiers XML
      • Fichiers JSON
      • Fichiers CSV
      • Sessions
      Serveur file.xml file.json file.csv session index.php Base D.
    • Flux des données Sur le serveur (base de données) Les bases de données archivent les contenus répertoriés dans des tables de données. Un langage serveur (exemple PHP) peut accéder (lire, modifier et supprimer) les données par la biais de requêtes.
    • Flux des données Sur le serveur (XML) Le XML (eXtended Markup Language) est également un format de stockage de données. Selon son utilité le fichier XML doit respecter une structure établie (exemple : flux RSS). Un langage serveur peut accéder aux données grâce à un lecteur de fichier XML (appelé « parser »).
    • Flux des données Sur le serveur (JSON) Le JSON (JavaScript Object Notation) est également un format de stockage de données. Il offre la possibilité de stocker des informations de plusieurs niveaux. Un langage serveur peut accéder aux données grâce à un lecteur de fichier JSON (appelé « parser »).
    • Flux des données Sur le serveur (csv) Le fichier csv est connu pour sa manière singulière de stocker des données dans un fichier texte (txt). Il offre la possibilité de stocker des informations d'une base de données. Il sert le plus souvent de fichier de transfert de données d'une base de données à une autre. Un langage serveur peut accéder aux données grâce à un lecteur de fichier JSON (appelé « parser »).
    • Flux des données Sur le serveur (Session) Une session est un fichier virtuel archivé sur le serveur disposant d'une durée de vie limitée. Lorsqu'une session est créée, elle permet de stocker des informations concernant l'utilisateur (profil, préférences et interactions). La fermeture du navigateur supprime la session active sur un site.
    • Flux asynchrones Mise à jour instantanée du contenu La méthode de mise à jour des contenus de manière asynchrone est de plus en plus utilisée. Elle permet de ne charger dynamiquement et instantanément uniquement ce qui a été modifié par l'utilisateur . Plusieurs technologies utilisent ce genre d'opération :
      • Ajax - Asynchronous Javascript And XML
      • Flex – Basé sur Actionscript de Flash
      • Silverlight – Lié à la technologie .NET
    • Client Serveur index.php (html) Flux asynchrones Comment ça marche Voici une illustration de comment fonctionne Ajax. ajax.js file.xml file.json file.csv session ajax.php Base D.
    • Conclusion Dans la pratique... Bien comprendre comment fluctue les données entre un navigateur et un serveur permet de concevoir des outils performant et adaptés en sachant répondre :
      • aux besoins de communication de l'outil et des utilisateurs
      • à cibler les informations à communiquer
      • à protéger les informations en circulation