Post on 28-May-2015
description
Nouvelles technologies du Web
World Wide Web (suite)
Saïd RadhouaniUniversité de Genève
23-10-2007 Saïd Radhouani - CUI 2
Architecture du Web (rappel)
Le réseau Internet
TCP/IP
Web
HTTPHTML
Feuille de style
23-10-2007 Saïd Radhouani - CUI 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
------------------------ ------------------------------------------------------------------------------------------------------------------------------------
HTML Script
<SCRIPT language="Javascript">
Le code du script
</SCRIPT >
23-10-2007 Saïd Radhouani - CUI 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
Navigateur web (client)
<html> …<javascript…>…</html>
http://www.unige.ch/…Serveur Web
Interpréteur Javascript
page html
23-10-2007 Saïd Radhouani - CUI 9
Exemples de scripts-1
Ouverture 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-2
Modification 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 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
Le réseau Internet
TCP/IP
Web
HTTPHTML
Feuille de style
Langage de script
23-10-2007 Saïd Radhouani - CUI 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
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
23-10-2007 Saïd Radhouani - CUI 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
Navigateur web (client)
<html> …<javascript…>…</html>
http://www.unige.ch/…Serveur Web
Interpréteur Javascript
page html
23-10-2007 Saïd Radhouani - CUI 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
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
23-10-2007 Saïd Radhouani - CUI 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
Script
Page HTMLBase de
données
Page ASP
Interprète
------------------------ ------------------------------------------------------------------------------------------------------------------------------------
Navigateur web (client)
<html> …
</html>
http://www.....asp, .php
page html
Serveur Web
23-10-2007 Saïd Radhouani - CUI 21
Architecture du Web
Le réseau Internet
TCP/IP
Web
HTTPHTML
Feuille de style
Javascript VBscript ...
ASP PHP …
23-10-2007 Saïd Radhouani - CUI 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 "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 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
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>
23-10-2007 Saïd Radhouani - CUI 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
Données brutes
Pages XML
Feuille de style
Appliquer
Données formattées
Pages HTML
Présenter
23-10-2007 Saïd Radhouani - CUI 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
Le réseau Internet
TCP/IP
Web
HTTP
HTMLFeuille de style
Javascript VBscript ...
ASP PHP
XML
23-10-2007 Saïd Radhouani - CUI 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
Le réseau Internet
TCP/IP
HTTP
HTMLFeuille de style
Javascript VBscript ...
ASP PHP
XML
CMS
Web
23-10-2007 Saïd Radhouani - CUI 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
Le réseau Internet
TCP/IP
Web 2.0
HTTP
HTMLFeuille de style
Javascript VBscript ...
ASP PHP
XML
CMS
Web
23-10-2007 Saïd Radhouani - CUI 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)