Your SlideShare is downloading. ×
Introduction aux technologies du Web (2)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction aux technologies du Web (2)

891
views

Published on

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

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


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
891
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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/
  • Transcript

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