Introduction aux technologies du Web (2)

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


Le Web évolue

Exigences des publicitaires

Animer le contenu des pages Web

Rendre les pages Web plus interactives

...


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


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


Fonctionnement d'un script

------------------------ ------------------------------------------------------------------------------------------------------------------------------------

HTML Script

<SCRIPT language="Javascript">

Le code du script

</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



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


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


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


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.


Architecture du Web

Le réseau Internet

TCP/IP

Web

HTTPHTML

Feuille de style

Langage de script


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


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


Web statique


<html> ……

</html>


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


Web statique vs. Web dynamique

Les langages de script permettent d'avoir des pages actives et non dynamiques

Le contenu des pages est fixe


<html> …<javascript…>…</html>


Interpréteur Javascript

page html


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


<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


Démo

http://www.gva.ch

http://fr.news.yahoo.com/meteo/

http://www.google.ch


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


Interprétation d'un script sur le serveur

Script

Page HTMLBase de

données

Page ASP

Interprète

------------------------ ------------------------------------------------------------------------------------------------------------------------------------


<html> …

</html>

http://www.....asp, .php

page html

Serveur Web


Architecture du Web

Le réseau Internet

TCP/IP

Web

HTTPHTML

Feuille de style

Javascript VBscript ...

ASP PHP …


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


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


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>[email protected]

</p>

XML

<prenom>Saïd</prenom><nom>Radhouani</nom><Fonction>

Assistant/doctorant </Fonction>

<email>[email protected]

</email>


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


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


Principe des feuilles de style

Données brutes

Pages XML

Feuille de style

Appliquer

Données formattées

Pages HTML

Présenter


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)


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)


Architecture du Web

Le réseau Internet

TCP/IP

Web

HTTP

HTMLFeuille de style


ASP PHP

XML


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/


Architecture du Web

Le réseau Internet

TCP/IP

HTTP



ASP PHP

XML

CMS

Web


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/


Architecture du Web

Le réseau Internet

TCP/IP

Web 2.0

HTTP



ASP PHP

XML

CMS

Web


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, ...


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


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)

Introduction aux technologies du Web (2)

Documents

Transcript of Introduction aux technologies du Web (2)