Téléchargé 57 fois
![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](https://image.slidesharecdn.com/seance2-13276282384289-phpapp02-120126193822-phpapp02/75/Introduction-aux-technologies-du-Web-2-17-2048.jpg)
Téléchargé parSaïd Radhouani
Introduction aux technologies du Web (2)
Ce document traite des évolutions technologiques du web, en expliquant l'architecture du web et les langages de script utilisés pour créer des pages web dynamiques et interactives. Il met en avant l'importance des scripts, comme JavaScript, pour modifier le contenu et l'apparence des pages, ainsi que les différences entre le web statique et dynamique. Le document aborde également les limitations du HTML et l'émergence de XML, ainsi que des systèmes de gestion de contenu et des outils de création de sites web.
Contenu connexe
Similaire à Introduction aux technologies du Web (2)
Introduction aux technologies du Web (2)
- 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 évolueExigences des publicitaires Animer le contenu des pages Web Rendre les pages Web plus interactives ... 23-10-2007 Saïd Radhouani - CUI
- 4. Comment animer leWeb ? 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 scriptC'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 script23-10-2007 Saïd Radhouani - CUI ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ ------------ HTML Script <SCRIPT language="Javascript"> L e code d u script </SCRIPT >
- 7. Fonctionnement d'un scriptPour 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 scriptEnvoi 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-1Ouverture d'une boîte de dialogue lors d'un click <a href="javascript:;" onClick="window.alert('Message d\'alerte à utiliser avec modération');"> Cliquez ici! </a> Démo 1 23-10-2007 Saïd Radhouani - CUI
- 10. Exemples de scripts-2Modification d'une image lors du survol d'un lien par le pointeur de la souris <a href="javascript:;" onMouseOver="document.img_1.src='nom_image2';" onMouseOut="document.img_1.src='nom_image1';"> <img name="img_1" src="nom_image1"> </a> Démo 2 23-10-2007 Saïd Radhouani - CUI
- 11. Utilités des langagesde 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 Web23-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-2007Saï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écutiond'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 Utiliserun 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 scriptsur 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 Web23-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 langageHTML 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 "pauvre" 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 HTMLEst 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 XMLLe 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 pagede 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 feuillesde 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 avantagesdu 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 avantagesdu 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 Web23-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 Gestionde 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 Web23-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, encoreplus 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 Web23-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 pourcré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énientsEditeur 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