Nouvelles technologies  du Web World Wide Web (suite) Saïd Radhouani Université de Genève
Architecture du Web (rappel) 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style
Le Web évolue <ul><li>Exigences des publicitaires </li></ul><ul><li>Animer le contenu des pages Web </li></ul><ul><li>Rend...
Comment animer le Web ? <ul><li>La page HTML est interprétée sur un ordinateur </li></ul><ul><li>Un ordinateur peut faire ...
Langage de script <ul><li>C'est un langage de programmation </li></ul><ul><li>Le script est incorporé dans une page HTML <...
Fonctionnement d'un script 23-10-2007 Saïd Radhouani - CUI ------------ ------------   ------------ ------------ ---------...
Fonctionnement d'un script <ul><li>Pour afficher une page Web, un navigateur interprète le code présent dans la page HTML ...
Fonctionnement d'un script <ul><li>Envoi d'une page html + code (ex. javascript) </li></ul><ul><li>Exécution d'un programm...
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...
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...
Utilités des langages de scripts <ul><li>Modifier l'apparence d'une page Web </li></ul><ul><li>Afficher des messages pour ...
Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Langage de sc...
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><...
Web statique / Web dynamique <ul><li>Page statique :   </li></ul><ul><ul><li>les pages HTML publiées ne changent pas tant ...
Web statique 23-10-2007 Saïd Radhouani - CUI Navigateur  web (client) <html> … … </html> http://www.unige.ch/… Serveur Web...
Web statique vs. Web dynamique <ul><li>Les langages de script permettent d'avoir des pages actives et non dynamiques </li>...
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 e...
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 </...
Pages dynamique <ul><li>Utiliser un langage de script pour créer des pages dynamiques </li></ul><ul><li>Les scripts sont i...
Interprétation d'un script sur le serveur 23-10-2007 Saïd Radhouani - CUI Script Page HTML Base de  données Page ASP Inter...
Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Javascript VB...
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...
Limites de HTML <ul><li>Est prévu pour être visualisé sur un écran d’ordinateur (difficile pour les ordinateurs de poche o...
Le langage XML  -  eXtensible Markup Language <ul><li>Un nouveau langage avec de nouvelles balises </li></ul><ul><li>Les b...
Le langage XML <ul><li>Le fichier XML est structuré en « éléments » à l'aide de balises </li></ul><ul><li>Les balises marq...
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 ...
Principe des feuilles de style 23-10-2007 Saïd Radhouani - CUI Données brutes Pages XML Feuille de style Appliquer Données...
Objectifs et avantages du XML <ul><li>La lisibilité : aucune connaissance ne doit être nécessaire pour comprendre un conte...
Objectifs et avantages du XML <ul><li>Afficher un même document sur des périphériques différents sans créer des versions d...
Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web HTTP HTML Feuille de style Javascript VB...
Systèmes de Gestion de Contenu <ul><li>CMS:  Content Management system </li></ul><ul><li>Pas de code HTML à taper :-) </li...
Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP HTTP HTML Feuille de style Javascript VBscri...
Web 2.0, encore plus simple <ul><li>Une nouvelle génération de site Web  ~ apparition en 2004 </li></ul><ul><li>L’utilisat...
Architecture du Web 23-10-2007 Saïd Radhouani - CUI Le réseau Internet TCP/IP Web 2.0 HTTP HTML Feuille de style Javascrip...
Quels outils pour créer des pages Web ? <ul><li>Editeur de texte </li></ul><ul><ul><li>notepad, ultraedit, etc. </li></ul>...
Outils WYSIWYG <ul><li>WYSIWYG (What You See Is What You Get =  ce que vous voyez est ce que vous obtenez ) </li></ul><ul>...
Avantages et inconvénients <ul><li>Editeur de text/HTML </li></ul><ul><li>Inc. une connaissance du HTML est nécessaire </l...
Prochain SlideShare
Chargement dans…5
×

Introduction aux technologies du Web (2)

1 536 vues

Publié le

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

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 536
Sur SlideShare
0
Issues des intégrations
0
Intégrations
101
Actions
Partages
0
Téléchargements
43
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • idée
  • JavaScript est développé par Netscape Jscript et Vbscript sont développés par microsoft Cf. http://www.netline.be/formations/cours/html/dhtml/All%20HTML%20-%20Introduction%20%E0%20JavaScript.htm#difjsvbs Cours HTMl : http://www.netline.be/formations/cours/html/
  • 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

    ×