Quelques généralités sur le Web 2.0, ses enjeux sur les systèmes d'information, et les technologies mises en œuvre.

2. [ Généralités ]
[ Définition ]
Web 2.0 est un terme souvent utilisé pour
désigner ce qui est perçu comme une
transition importante du World Wide Web,
passant d'une collection de sites Web à
une plate-forme informatique à part
entière, fournissant des applications Web
aux utilisateurs.
Source de la définition:
http://fr.wikipedia.org/wiki/Web_2.0

3. [ Historique ]
▷ Terme inventé par Dale DOUGHERTY de la
O’Reilly Media.
▷ Naissance du terme lors de la Conférence Web
2.0 en octobre 2004.
▷ Lors de la deuxième conférence Web 2.0., Tim
O'Reilly expose les principes clés qu'il estime
caractéristiques des applications Web 2.0.

4. [ Principes généraux ]
▷ Du Web 1.0 au Web 2.0
Communication : Voix, Tchat,
e-mail. Principalement 1
vers 1, ou en cercle fermé.
Communication : Blogs,
photos, vidéos, calendriers
partagés, etc.
Principalement
communication de groupe.
Relativement ouvert sur
l'extérieur.

5. [ Principes généraux ]
▷ Caractéristiques des applications Web 2.0
1
Web participatif 2
Programmation légère
6 Le Web en tant
que plateforme
Web 2.0
Valeur cumulée de
l’intelligence collective
La valeur est dans les
données”
RSS &
Notification 3
Indépendance des
5
terminaux
4

6. [ Principes généraux ]
▷ Web participatif
Le web devient un media pleinement participatif dans lequel les
utilisateurs sont à la fois lecteurs et auteurs. Cette participation n'est pas
restreinte aux médias, elle touche également de plus en plus la
communication.
▷ Le web en tant que plateforme
La plupart des services Web 2.0 émergents offrent une partie de leurs
fonctionnalités à travers d'APIs que des développeurs tiers peuvent
mettre à profit dans leurs propres applications.
▷ Valeur cumulée de l'intelligence collective
Les actions cumulées des utilisateurs et les données qu'ils produisent
(des tags par exemple) ajoutent de la valeur au système global.

7. [ Principes généraux ]
▷ Indépendance des terminaux
Il est important de remarquer que le Web 2.0 n'est pas restreint au
monde des PC. Le téléphone mobile devient un véritable bureau
virtuel.
▷ RSS et notification
RSS permet aux utilisateurs de souscrire à une page web et d'être
notifiés de tout changement sur cette page.
▷ Programmation légère
L'ouverture des API (application de programmation informatique)
permet aux internautes de coupler des applications existantes
pour en créer de nouvelles (phénomène du "mash-up").

8. [ Enjeux pour les SI Web ]
▷ Les nouveaux usages du Web
Blog 1
8
Veille et recherche
d’information Partage de
fichiers 2
multimédia
Site de favoris
7
collaboratifs
Encyclopédie
collaborative en 3
ligne
6 Réseaux sociaux
Bureautique en
ligne
5
Géo-localisation 4

9. [ Enjeux pour les SI Web ]
7
▷ Marguerite des couleurs Web 2.0
1
3
5
8
2
6
4

10. [ Enjeux pour les SI Web ]
▷ Exemple de site Web 2.0

11. [ Enjeux pour les SI Web ]
▷ Les apports du Web 2.0
● L’utilisateur a accès à ses données de n’importe quel poste.
● Moins de clics.
● Moins de temps de chargement.
● La notion de logiciel est remplacée par celle de service (La
personne ne se demande pas quelle version de Google elle utilise).
● Une indexation généralisée : la folksonomie (les tags)
● Les mashups ou la contruction de solutions hybrides (définition,
principes, exemples de google maps)

12. [ Enjeux pour les SI Web ]
▷ Exemple de Folksnomie

13. ▷ Exemple de Mashup :
google maps
[ Enjeux pour les SI Web ]

14. ▷ Exemple de Mashup :
yahoo pipes
[ Enjeux pour les SI Web ]

15. [ technologies mises en
oeuvre]
▷ la plupart des technologies mises en oeuvre
existent depuis longtemps...
▷ ...mais sont mieux utilisées et imbriquées les
unes aux autres.

16. [ AJAX ]
▷ AJAX : Javascript & XML Asynchrones
▷ un concept de programmation web reposant
sur des technologies préexistasntes :
● présentation reposant sur HTML & CSS
● affichage dynamique utilisant le DOM
● manipulation de données par XML & XSLT
● récupération asynchrone de données en utilisant
XMLHttpRequest
● langage de scripts pour lier le tout

17. Site Web traditionnel
▷ système lourd et coûteux en ressources
● le navigateur n’intervient que pour afficher la page
● l’essentiel du travail se fait côté serveur

18. Application AJAX
▷ division des tâches entre le client et le serveur
● la page ne se recharge pas entièrement
● rapidité et légèreté

19. Dialogue avec le serveur : plusieurs
formats possibles (1/2)
▷ texte simple : pas adapté pour des données formatées
▷ HTML : pratique mais assez lourd
▷ XML : manipulation des données avec les fonctions
DOM => intéressant mais peut s’avèrer lourd et lent
▷ JSON (Javascript Object Notation) : manière de
structurer l’information en utilisant la syntaxe objet de
Javascript (objets & tableaux).
● trés leger
● reconnu nativement par Javascript (fonction ‘eval’)

20. Dialogue avec le serveur : plusieurs
formats possibles (2/2)
fichier XML fichier JSON
<?xml version="1.0" ?> {
<root> "menu": "Fichier",
<menu>Fichier</menu> "commandes": [
<commands> {
<item> "title": "Nouveau",
<title>Nouveau</value> "action":"CreateDoc"
<action>CreateDoc</action> },
</item> {
<item> "title": "Ouvrir",
<title>Ouvrir</value> "action": "OpenDoc"
<action>OpenDoc</action> },
</item> {
<item> "title": "Fermer",
<title>Fermer</value> "action": "CloseDoc"
<action>CloseDoc</action> }
</item> ]
</commands> }
</root>

21. Principes synchrones et asynchrones
▷ exécution synchrone
quand un appel externe au script principal est réalisé, ce
dernier en attend la réponse ou la fin de l’exécution
▷ exécution asynchrone
le script principal n’attend pas d’avoir reçu les données pour
continuer
▷ fonction de callback
lorsque la requête renvoie quelque chose, la fonction de
callback est appelée et fait suite au script principal

22. Objet XMLHttpRequest
▷ objet XMLHTTP implémenté par Microsoft dans
Internet Explorer 5.0 en 1998
▷ Rebaptisé XMLHttpRequest, il fut proposé au
W3C pour devenir un standard
▷ tous les navigateurs récents implémentent cet
objet

23. Avantages d’AJAX
▷ interactivité de l’interface
▷ complexité relative grâce aux frameworks
(Open Ajax d’IBM, Atlas de Microsoft)
Limites d’AJAX
▷ ne fonctionne que si javascript est activé
▷ problèmes de compatibilité (certains navigateurs)
▷ difficulté de référencement
▷ disparition de certaines fonctionnalités

24. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda

25. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda
iframe
new_item_save.php
new_item.php
enregistre la tâche dans la BD
formulaire d’une & vérifie s’il est nécessaire de
nouvelle tâche recharger une partie de l’agenda
agenda.php
reload_agenda.php
affiche l’emploi du
temps pour une génère la partie de
semaine pour une ou l’agenda à modifier
plusieurs personnes

26. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda
iframe
new_item_save.php
new_item.php création de l’objet XMLHttpRequest
appel de l’objet XMLHttpRequest
fonction de traitement de l’appel AJAX
reload_agenda.php
agenda.php

27. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda
création de l’objet XMLHttpRequest
//Création de l'objet XHR
function new_xhr(){
var xhrObject = null;
if(window.XMLHttpRequest) // Firefox et autres
xhrObject = new XMLHttpRequest();
else if(window.ActiveXObject) {// Internet Explorer
try{
xhrObject = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
xhrObject = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {// XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhrObject = false;
}

28. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda
appel de l’objet XMLHttpRequest
function appelAjax(a){
xhrObject = new_xhr();
//Instanciation de l'objet XMLHttpRequest
xhrObject.open('get','reload_agenda.php?'+a, true);
//Paramètre de l'appel ajax :
méthode = GET, page = page_a_appeler.php, paramètre = a, asynchrone = true
xhrObject.onreadystatechange = traiteReponse;
//onreadystatechange correspond à l'état de la réponse Ajax.
Cet état passe successivement de 0 à 4.
S'il est égal à 4, cela signifie qu'il est prêt à renvoyer une réponse.
Ici, lorsque cet état change, on appelle la fonction traiteReponse
xhrObject.send(null);
//send('variable') pour envoyer des variables au serveur.
On renseigne NULL pour un appel en GET.

29. Exemple d’utilisation d’AJAX :
rechargement d’une partie d’un agenda
fonction de traitement de l’appel AJAX
function traiteReponse(){
if(xhrObject.readyState==4){
// On teste si la page est prête à renvoyer une réponse
if(xhrObject.status == 200)
// Signifie que tout a l'air OK
document.getElementById('2009-11-02_20').innerHTML = xhrObject.responseText;
// On insère la réponse dans l'élément HTML qui a pour id 2009-11-02_20 (date_id
de la personne)
}else{
// L'appel Ajax n'est pas encore prêt à fournir une réponse
document.getElementById('loading').innerHTML ="Chargement en cours...";
// En attendant la réponse, on affiche "chargement en cours..." dans le calque
‘loading’
}

30. [ XML ]
▷ XML : eXtensible Markup Language mis au
point par le XML Working Group sous l'égide du
World Wide Web Consortium (W3C) dès 1996
● Depuis le 10 février 1998, les spécifications XML 1.0 ont
été reconnues comme recommandations par le W3C
● XML est un sous ensemble de SGML (Standard
Generalized Markup Language), défini par le standard
ISO8879 en 1986, utilisé dans le milieu de la Gestion
Electronique Documentaire (GED). XML reprend la majeure
partie des fonctionnalités de SGML, en le simplifiant afin
de le rendre utilisable sur le web.

31. Présentation de XML
▷ Les balises XML décrivent le contenu plutôt
que la présentation ; on parle d’un métalangage
créant un document structuré
● séparation du contenu et de la présentation ...
● ...ce qui permet par exemple d'afficher un même
document sur des applications ou des périphériques
différents sans pour autant nécessiter de créer autant de
versions du document que l'on nécessite de
représentations

32. Structure d’un document XML (1/3)
▷ Prologue
● version de la norme XML utilisée pour créer le document
=> obligatoire
● jeu de caractères (encoding) utilisé dans le document
(ex : jeu ISO-8859-1, jeu latin avec accents français)
=> facultatif
● informations facultatives sur des instructions de
traitement à destination d'applications particulières
<?xml version="1.0" encoding="ISO-8859-1"?>

33. Structure d’un document XML (2/3)
▷ Déclaration de Type de Document (DOCTYPE):
grammaire permettant de vérifier la conformité du
document XML
● document valide : comportant une DTD
● document bien formé : ne comportant pas de DTD mais
répondant aux règles de base du XML
● Une DTD peut être définie de 2 façons :
- sous forme interne
- sous forme externe, soit en appelant un fichier contenant
la grammaire à partir d'un fichier local ou bien en y
accédant par son URL

34. Structure d’un document XML (2/3)
▷ Exemple de DTD externe
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE élément-racine PUBLIC "-//Propriétaire//Description de la DTD//Langue" "URL">
▷ Exemple de DTD interne
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE auteur [
<!ELEMENT auteur (nom,prenom)>
<!ELEMENT nom (#PCDATA)>
<!ELEMENT prenom (#PCDATA)>
]>
<auteur>
<nom>Brito</nom>
<prenom>Victor</prenom>
</auteur>

35. Structure d’un document XML (3/3)
▷ Arbre des éléments : contenu du document
=> hiérarchie de balises comportant éventuellement des
attributs (Clé=’valeur’).
<annuaire>
<personne class = "auditeur">
<nom>Feldman</nom>
<prenom>Francois</prenom>
<telephone>06-78-12-25-45</telephone>
<email>webmaster@mondomaine.com</email>
</personne>
<personne>...</personne>
</annuaire>

36. Mise en page d’un document XML (1/3)
▷ XML est un format de description des
données et non de leur représentation.
▷3 solutions de mise en forme :
● CSS (Cascading StyleSheet) : solution la plus utilisée
actuellement (standard éprouvé avec HTML)
● XSL (eXtensible StyleSheet Language) : langage de
feuilles de style extensible développé spécialement pour
XML.
● XSLT (eXtensible StyleSheet Language Transformation) :
sous-ensemble de XSL permettant de transformer un
document XML en document HTML accompagné de
feuilles de style

37. Mise en page d’un document XML (2/3)
Fichier XML avec appel de la page XSL
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="mise_en_page.xsl"?>
<annuaire>
<contact>
<prenom>Marco</prenom>
<nom>Polo</nom>
<profession>explorateur</profession>
</contact>
</annuaire>

38. Mise en page d’un document XML (3/3)
Fichier XSL
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<html>
<head>
<title>annuaire</title>
</head>
<body>
<h1><b>Prénom : </b> <xsl:value-of select="//prenom"/></h1>
<h1><b>Nom : </b> <xsl:value-of select="//nom"/></h1>
<h2>Profession : <xsl:value-of select="//profession"/></h2>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

39. Décodage d’un document XML
▷ les données d’un document XML sont
analysées à l’aide d’un parseur / analyseur
▷2 types de parseurs :
● parseurs validants : vérifie que le document XML est
conforme à sa DTD
● parseurs non validants : vérifie que le document XML est
bien formé (conforme à syntaxe XML de base)
▷2 approches de parseurs :
● approche hierarchique (DOM : Document Object Model)
● approche évenementielle (SAX : Simple API for XML)

40. Décodage d’un document XML : DOM (1/3)
▷ Le DOM définit la structure d'un document
sous forme d'une hiérarchie d'objets, de
méthodes et d’évènements, afin de simplifier
l'accès aux éléments constitutifs du document.
▷Spécifications DOM :
● DOM level 1
- Core DOM level 1 : pour les documents en général
- HTML DOM level 1 : méthodes applicables à HTML
● DOM level 2 : prise en compte de CSS, des espaces de
nom XML
● DOM level 3 (en cours) : nouveaux types de données,
nouvelles méthodes

41. Décodage d’un document XML : DOM (2/3)
▷exemple de réprésentation DOM d’un document
XHTML :

42. Décodage d’un document XML : DOM (3/3)
▷DOM permet de naviguer au sein de
l’arborescence...
element = document.getElementById(div_id);
▷...de la modifier...
element = document.getElementById(div_id);
content.insertBefore(newTag,element.firstChild);
//newTag devient le nouveau firstChild de element
▷...et de jouer sur les attributs de chaque
élément
document.getElementById(div_id).value= "texte de remplacement";

43. Décodage d’un document XML : SAX
▷ SAX permet de déclencher des événements
au cours de l'analyse du document XML.
▷une application basée sur SAX peut gérer
uniquement les éléments dont elle a besoin sans
avoir à construire en mémoire une structure
contenant l'intégralité du document.

44. Décodage d’un document XML : fin
▷DOM : plus simple et intuitif, mais plus lourd.
● DOM charge le document en mémoire sous forme
d'arborescence et permet au programmeur d'appliquer
des fonctions sur les éléments de l'arbre.
● adapté au traitement d’un document avec des scripts.
▷SAX : plus rapide et moins gourmand
● Sax est orienté évènements. Il associe des méthodes aux
balises, elles sont activées quand les balises sont atteintes
lors de la lecture.
● Les éléments sont lus en séquence, une seule fois. Il faut
fournir son propre modèle de document, alors qu'il en est
fourni un avec DOM.

45. Avantages de XML
▷Lisibilité
▷Autodescriptif et extensible
● structure arborescente : permet de modéliser la majorité
des problèmes informatiques
● universalité et portabilité : les différents jeux de caractères
sont pris en compte
● Déployable : il peut être facilement distribué par
n'importe quel protocole à même de transporter du texte,
comme HTTP
● Intégrabilité : utilisable par toute application pourvue d'un
parseur
● Extensibilité : un document XML doit pouvoir être
utilisable dans tous les domaines d'applications

46. Exemple d’utilisation : RSS & ATOM (1/3)
▷protocoles de syndication de contenu utilisant
la norme XML : permet d’indexer le contenu brut d’un
site dans s’occuper des données liées à sa forme
▷multiplicité de formats
● RSS 0.90 (RDF Site Summary) : créée en 1999 par
Netscape
● RSS 0.91 (Rich Site Summary) : évolution mineure
● RSS 1.0 (RDF Site Summary) : spécification alternative
issue du standard RDF
● RSS 2.0 (Really Simple Syndication) : amélioration du
standard RSS 0.91

47. Exemple d’utilisation : RSS & ATOM (2/3)
▷ATOM
● les querelles autour du RSS ont conduit certains
développeurs à travailler sur un autre format de
syndication.
● Atom 0.3: version actuelle
▷différence avec RSS
● format ouvert non propriétaire
● format plus flexible

48. Exemple d’utilisation : RSS & ATOM (3/3)
Fichier RSS
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="rss_mep.xsl"?>
<rss version="2.0">
<channel>
<title>ML de Val de Reuil</title>
<link>http://www.missionlocalelouviersvaldereuilandelle.fr</link>
<description>Les news de mon site web</description>
<item>
<title>Enfin un flux RSS !</title>
<link>http://www.monsite.fr/rss.html</link>
<guid isPermaLink="true">http://monsiteweb.fr/rss.html</guid>
<description>bla bla bla bla bla bla bla bli blou</description>
<pubDate>Wed, 3 Aug 2005 15:17:00 GMT</pubDate>
</item>
</channel>
</rss>

49. [PERMALIENS] (1/2)
▷URL permanentes servant à référer à long terme
un billet de blog (à l’origine), un article...
▷facilitent le référencement grâce à l’URL rewriting
▷étapes
● l’hébergeur le permet-il ?
● créer son format d’URL
● écriture des règles de réécriture dans le fichier .htaccess
● modification des liens

50. [PERMALIENS] (2/2)
▷Exemple
●URL avant réécriture
article.php?id=12&page=2&rubrique=5.
●règle de réécriture
RewriteRule ^article-([0-9]+)-([0-9]+)-([0-9]+).html /articles/article.php?
id=$1&page=$2&rubrique=$3 [L]
● URL après réécriture
article_12_2_5.html

51. [ Conclusion ]
 La mort annoncée du Web 2.O
 Vers le Web 3.0 (ou le Web sémantique)
 Gestion de l’identité numérique

52. [BIBLIOGRAPHIE] 1/2
● http://www.les-infostrateges.com/article/0612232/dossier-
special-web-20
● http://www.journaldunet.com/solutions/601/060105_tribune-sqli-
web-20.shtml
● http://xmlfr.org/actualites/decid/051201-0001
● http://blog.aysoon.com/77-dossier-complet-le-web20-enjeux-
economiques-et-technologies
● http://www.developpements.org/presentations-web-t683.html
● http://www.xul.fr/
● http://wwww.laltruiste.com
● http://www.clever-age.com/veille/clever-link/les-meilleurs-
frameworks-ajax-pour-des-interfaces-web-plus-ergonomiques.html

53. [BIBLIOGRAPHIE] 2/2
● http://xml.britoweb.net/
● http://www.commentcamarche.net/
● http://www.lesiteduzero.com
● http://nyams.planbweb.com
● Web 2.0 et au-delà, de David FAYON (Editions Economica), 2008
● http://fr.wikipedia.org/wiki/Web_2.0