Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Introduction aux technologies du Web (2)

1 686 vues

Publié le

WWW, Hypertext, Internet, Network, HTTP, Web Server, HTML, XML, JavaScript

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Introduction aux technologies du Web (2)

  1. 1. Nouvelles technologies du Web World Wide Web (suite) Saïd Radhouani Université de Genève
  2. 2. Architecture du Web (rappel) 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style
  3. 3. Le Web évolue <ul><li>Exigences des publicitaires </li></ul><ul><li>Animer le contenu des pages Web </li></ul><ul><li>Rendre les pages Web plus interactives </li></ul><ul><li>... </li></ul>23-10-2007 Saïd Radhouani - CUI
  4. 4. Comment animer le Web ? <ul><li>La page HTML est interprétée sur un ordinateur </li></ul><ul><li>Un ordinateur peut faire fonctionner des programmes </li></ul><ul><li>Créer des programmes pour animer le contenu des pages Web </li></ul><ul><li>Les programmes sont exécutés sur l'ordinateur client </li></ul><ul><li> langages de scripts </li></ul>23-10-2007 Saïd Radhouani - CUI
  5. 5. Langage de script <ul><li>C'est un langage de programmation </li></ul><ul><li>Le script est incorporé dans une page HTML </li></ul><ul><li>Apporter des améliorations au langage HTML </li></ul><ul><li>Exécuter des commandes du côté client </li></ul><ul><li>Les plus connus : </li></ul><ul><ul><li>JavaScript, </li></ul></ul><ul><ul><li>VBscript, </li></ul></ul><ul><ul><li>Jscript </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  6. 6. Fonctionnement d'un script 23-10-2007 Saïd Radhouani - CUI ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ HTML Script <SCRIPT language=&quot;Javascript&quot;> L e code d u script </SCRIPT >
  7. 7. Fonctionnement d'un script <ul><li>Pour afficher une page Web, un navigateur interprète le code présent dans la page HTML </li></ul><ul><li>Il détecte le code HTML et le code du script </li></ul><ul><li>Le code HTML est interprété par le navigateur d'une manière classique </li></ul><ul><li>Le code du script ? </li></ul><ul><li>Dans un navigateur, un interprète de script est intégré </li></ul><ul><ul><li>exemple de javascript : quand il y a un script, c'est l'interpréteur javascript du navigateur qui va l'exécuter </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  8. 8. Fonctionnement d'un script <ul><li>Envoi d'une page html + code (ex. javascript) </li></ul><ul><li>Exécution d'un programme sur le client </li></ul>23-10-2007 Saïd Radhouani - CUI Navigateur web (client) <html> … < javascript …> … </html> http://www.unige.ch/… Serveur Web Interpréteur Java script page html
  9. 9. Exemples de scripts-1 <ul><li>Ouverture d'une boîte de dialogue lors d'un click </li></ul><ul><li><a href=&quot;javascript:;&quot; onClick=&quot;window.alert('Message d'alerte à utiliser avec modération');&quot;> </li></ul><ul><li>Cliquez ici! </li></ul><ul><li></a> </li></ul><ul><li>Démo 1 </li></ul>23-10-2007 Saïd Radhouani - CUI
  10. 10. Exemples de scripts-2 <ul><li>Modification d'une image lors du survol d'un lien par le pointeur de la souris </li></ul><ul><li><a href=&quot;javascript:;&quot; onMouseOver=&quot;document.img_1.src='nom_image2';&quot; onMouseOut=&quot;document.img_1.src='nom_image1';&quot;> </li></ul><ul><li><img name=&quot;img_1&quot; src=&quot;nom_image1&quot;> </li></ul><ul><li></a> </li></ul><ul><li>Démo 2 </li></ul>23-10-2007 Saïd Radhouani - CUI
  11. 11. Utilités des langages de scripts <ul><li>Modifier l'apparence d'une page Web </li></ul><ul><li>Afficher des messages pour l'utilisateur </li></ul><ul><li>Interagir avec le document HTML </li></ul><ul><li>Faire des contrôles dans les formulaires de saisie avant l’envoi à un programme sur le serveur </li></ul><ul><li>etc. </li></ul>23-10-2007 Saïd Radhouani - CUI
  12. 12. Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Langage de script
  13. 13. Plus de besoins, plus de fonctionnalités <ul><li>Affichage de données en temps réel (météo, bourse, aéroport, etc.) </li></ul><ul><li>Affichage de valeurs calculées (age, prix, etc.) </li></ul><ul><li>Apparition du commerce électronique </li></ul><ul><li> Web dynamique </li></ul>23-10-2007 Saïd Radhouani - CUI
  14. 14. Web statique / Web dynamique <ul><li>Page statique : </li></ul><ul><ul><li>les pages HTML publiées ne changent pas tant que le Webmaster n'a pas effectué des modifications </li></ul></ul><ul><ul><li>tous les clients reçoivent la même page </li></ul></ul><ul><ul><li>la page est créée par le Webmaster et stockée sur le disque dur du serveur </li></ul></ul><ul><li>Page dynamique : </li></ul><ul><ul><li>les pages HTML changent automatiquement sans intervention du Webmaster </li></ul></ul><ul><ul><li>les clients ne reçoivent pas forcément la même page </li></ul></ul><ul><ul><li>la page est créée par le serveur pour un client particulier </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  15. 15. Web statique 23-10-2007 Saïd Radhouani - CUI Navigateur web (client) <html> … … </html> http://www.unige.ch/… Serveur Web page html Les pages HTML ont été créées par le Webmaster Le client reçoit la page tel quelle a été créée par le Webmaster Plusieurs clients reçoivent la même page avec le même contenu
  16. 16. Web statique vs. Web dynamique <ul><li>Les langages de script permettent d'avoir des pages actives et non dynamiques </li></ul><ul><li>Le contenu des pages est fixe </li></ul>23-10-2007 Saïd Radhouani - CUI Navigateur web (client) <html> … < javascript …> … </html> http://www.unige.ch/… Serveur Web Interpréteur Java script page html
  17. 17. Pages dynamiques <ul><li>Exécution d'un programme sur le serveur et création de la page </li></ul><ul><li>La page html envoyée est générée dynamiquement </li></ul>23-10-2007 Saïd Radhouani - CUI Navigateur web (client) <html> … </html> http://www. ...[ paramètres ] page html Serveur Web La page HTML est créée en fonction des param êtres de la requête HTTP Le client reçoit la page dont le contenu est créé en temps réel page : le contenu est dépendant des paramètres de sa requête
  18. 18. Démo <ul><li>http://www.gva.ch </li></ul><ul><li>http://fr.news.yahoo.com/meteo/ </li></ul><ul><li>http://www.google.ch </li></ul>23-10-2007 Saïd Radhouani - CUI
  19. 19. Pages dynamique <ul><li>Utiliser un langage de script pour créer des pages dynamiques </li></ul><ul><li>Les scripts sont incorporés dans le document HTML </li></ul><ul><li>Les scripts s'exécutent sur le serveur </li></ul><ul><li>Technologies : </li></ul><ul><ul><li>ASP (Active Server Pages) - Microsoft </li></ul></ul><ul><ul><li>PHP – Unix, Linux </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  20. 20. Interprétation d'un script sur le serveur 23-10-2007 Saïd Radhouani - CUI Script Page HTML Base de données Page ASP Interprète ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ Navigateur web (client) <html> … </html> http://www.....asp , .php page html Serveur Web
  21. 21. Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Javascript VBscript ... ASP PHP …
  22. 22. Limites du langage HTML <ul><li>Le résultat envoyé par un serveur est toujours un fichier HTML </li></ul><ul><li>HTML a été créé pour un objectif précis : c'est un langage &quot;pauvre&quot; </li></ul><ul><li>Offre seulement un nombre limité de balises pour la structuration de documents </li></ul><ul><li>Impossibilité de séparer le contenu et la présentation </li></ul>23-10-2007 Saïd Radhouani - CUI
  23. 23. Limites de HTML <ul><li>Est prévu pour être visualisé sur un écran d’ordinateur (difficile pour les ordinateurs de poche ou les téléphones portables) </li></ul><ul><li>Manque de structure  difficile à traiter automatiquement pour extraire des informations </li></ul><ul><li>etc. </li></ul><ul><li>Le Web est en évolution continue </li></ul><ul><ul><li>continuer à réajuster les protocoles aux nouveaux besoins pour ajouter des fonctionnalités au HTML? </li></ul></ul><ul><ul><li>une autre solution? </li></ul></ul><ul><li>La solution : proposer un nouveau langage qui peut dépasser les limites du langage HTML </li></ul>23-10-2007 Saïd Radhouani - CUI
  24. 24. Le langage XML - eXtensible Markup Language <ul><li>Un nouveau langage avec de nouvelles balises </li></ul><ul><li>Les balises XML décrivent le contenu plutôt que la présentation </li></ul>23-10-2007 Saïd Radhouani - CUI HTML <p>Saïd</p> <p>Radhouani</p> <p>Assistant/doctorant</p> <p>Radhouani@cui.unige.ch</p> XML <prenom>Saïd</prenom> <nom>Radhouani</nom> <Fonction> Assistant/doctorant </Fonction> <email>Radhouani@cui.unige.ch </email>
  25. 25. Le langage XML <ul><li>Le fichier XML est structuré en « éléments » à l'aide de balises </li></ul><ul><li>Les balises marquent le début et la fin de chaque élément </li></ul><ul><li>Les éléments peuvent contenir du texte et éventuellement d'autres éléments </li></ul><ul><li>L'ensemble des données du document XML est contenu dans un élément unique appelé « racine » qui contient tous les autres éléments </li></ul>23-10-2007 Saïd Radhouani - CUI
  26. 26. Mise en page de XML <ul><li>XML permet la description des données et non de leur représentation </li></ul><ul><li>La mise en page des données est assurée par un langage de mise en page tiers </li></ul><ul><ul><li>CSS( Cascading StyleSheet ), la solution la plus utilisée actuellement, étant donné qu'il s'agit d'un standard qui a déjà fait ses preuves avec HTML </li></ul></ul><ul><ul><li>XSL ( eXtensible StyleSheet Language ), un langage de feuilles de style extensible développé spécialement pour XML </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  27. 27. Principe des feuilles de style 23-10-2007 Saïd Radhouani - CUI Données brutes Pages XML Feuille de style Appliquer Données formattées Pages HTML Présenter
  28. 28. Objectifs et avantages du XML <ul><li>La lisibilité : aucune connaissance ne doit être nécessaire pour comprendre un contenu d'un document XML </li></ul><ul><li>Autodescriptif </li></ul><ul><li>Universalité et portabilité : les différents jeux de caractères sont pris en compte </li></ul><ul><li>Extensibilité : capacité à pouvoir décrire n'importe quel domaine de données </li></ul><ul><li>Intégrabilité : un document XML est utilisable par toute application pourvue d'un parser (un logiciel permettant d'analyser un code XML) </li></ul>23-10-2007 Saïd Radhouani - CUI
  29. 29. Objectifs et avantages du XML <ul><li>Afficher un même document sur des périphériques différents sans créer des versions du document à priori (grâce à la séparation du contenu du contenant) </li></ul><ul><li>Echange de documents au format XML sans pour autant influencer sur la forme de ceux-ci </li></ul><ul><li>Echange de données entre programmes (même sur Internet) </li></ul>23-10-2007 Saïd Radhouani - CUI
  30. 30. Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Javascript VBscript ... ASP PHP XML
  31. 31. Systèmes de Gestion de Contenu <ul><li>CMS: Content Management system </li></ul><ul><li>Pas de code HTML à taper :-) </li></ul><ul><li>Construire et mettre à jour un site Web gr âce à une interface graphique simple à utiliser </li></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Contenu </li></ul></ul><ul><li>Exemples : </li></ul><ul><ul><li>Systèmes </li></ul></ul><ul><ul><ul><li>SPIP, Joomla, Typo3, etc. </li></ul></ul></ul><ul><ul><li>Sites Web </li></ul></ul><ul><ul><ul><li>http://www.glums.com/ </li></ul></ul></ul>23-10-2007 Saïd Radhouani - CUI
  32. 32. Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP HTTP HTML Feuille de style Javascript VBscript ... ASP PHP XML CMS Web
  33. 33. Web 2.0, encore plus simple <ul><li>Une nouvelle génération de site Web ~ apparition en 2004 </li></ul><ul><li>L’utilisateur n’est plus spectateur! </li></ul><ul><li>De moins en moins de compétences requises pour publier de l’information sur le Web </li></ul><ul><li>Outils ~ créer facilement des sites, blogs, wiki, etc. </li></ul><ul><li>Démo </li></ul><ul><ul><li>http://fr.wikipedia.org/wiki/Accueil </li></ul></ul><ul><ul><li>http://www.blog4ever.com/ </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  34. 34. Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web 2.0 HTTP HTML Feuille de style Javascript VBscript ... ASP PHP XML CMS Web
  35. 35. Quels outils pour créer des pages Web ? <ul><li>Editeur de texte </li></ul><ul><ul><li>notepad, ultraedit, etc. </li></ul></ul><ul><ul><li>écrire le code HTML entièrement à la main </li></ul></ul><ul><li>Editeur HTML – éditeur Web </li></ul><ul><ul><li>Logiciel qui facilite la création et la modification des documents HTML </li></ul></ul><ul><ul><li>ex. 1stpage, ... </li></ul></ul>23-10-2007 Saïd Radhouani - CUI
  36. 36. Outils WYSIWYG <ul><li>WYSIWYG (What You See Is What You Get = ce que vous voyez est ce que vous obtenez ) </li></ul><ul><li>Permet de composer visuellement le résultat voulu </li></ul><ul><li>Possibilité de retoucher le code à la main </li></ul><ul><li>Exemples : MS Word, Netscape Composer, Adobe GoLive, Macromedia Dreamweaver, Microsoft Frontpage... </li></ul><ul><li>démo - MS Word </li></ul>23-10-2007 Saïd Radhouani - CUI
  37. 37. Avantages et inconvénients <ul><li>Editeur de text/HTML </li></ul><ul><li>Inc. une connaissance du HTML est nécessaire </li></ul><ul><li>Av. une bonne qualité du document produit </li></ul><ul><li>Outils WYSIWYG </li></ul><ul><li>Av. </li></ul><ul><ul><li>facilité d'utilisation </li></ul></ul><ul><ul><li>l'observation immédiate du rendu graphique </li></ul></ul><ul><li>Inc. </li></ul><ul><ul><li>manque de maîtrise sur la qualité du document produit </li></ul></ul><ul><ul><li>risques d'incompatibilité avec des navigateur (si l'éditeur ne suit pas les normes du moment) </li></ul></ul>23-10-2007 Saïd Radhouani - CUI

×