Web 2.0 generalités, enjeux, et technologies
-
Upload
foued-benoumhani -
Category
Documents
-
view
1.255 -
download
0
description
Transcript of Web 2.0 generalités, enjeux, et technologies
[ 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
▷ 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 estimecaractéristiques des applications Web 2.0.
[ Historique ]
▷ 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.
[ Principes généraux ]
▷ Caractéristiques des applications Web 2.0
Web 2.0
Web participatif
Le Web en tant que plateforme
Indépendance des terminaux
Programmation légère
RSS & Notification
1
2
3
4
5
6
Valeur cumulée de l’intelligence collectiveLa valeur est dans les
données”
[ 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.
[ 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").
[ Principes généraux ]
▷ Les nouveaux usages du Web
[ Enjeux pour les SI Web ]
Blog
Partage de fichiers
multimédia
Encyclopédie collaborative en
ligne
Géo-localisation
Réseaux sociaux
Bureautique en ligne
1
2
3
45
Site de favoris collaboratifs
Veille et recherche d’information
6
7
8
2
1
3
5
6
4
7
8
▷ M
argu
erite
des
cou
leur
s W
eb 2
.0[ Enjeux pour les SI Web ]
▷ E
xem
ple
de s
ite W
eb 2
.0[ 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)
[ Enjeux pour les SI Web ]
[ Enjeux pour les SI Web ] ▷
Exe
mpl
e de
Fol
ksno
mie
[ Enjeux pour les SI Web ] ▷
Exe
mpl
e de
Mas
hup
:
goog
le m
aps
▷ E
xem
ple
de M
ashu
p :
yaho
o pi
pes
[ Enjeux pour les SI Web ]
[ 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.
[ 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
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
▷ division des tâches entre le client et le serveur
● la page ne se recharge pas entièrement
● rapidité et légèreté
Application AJAX
▷ 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’)
Dialogue avec le serveur : plusieurs formats possibles (1/2)
fichier XML
<?xml version="1.0" ?><root> <menu>Fichier</menu> <commands> <item> <title>Nouveau</value> <action>CreateDoc</action> </item> <item> <title>Ouvrir</value> <action>OpenDoc</action> </item> <item> <title>Fermer</value> <action>CloseDoc</action> </item> </commands></root>
fichier JSON
{ "menu": "Fichier", "commandes": [ { "title": "Nouveau", "action":"CreateDoc" }, { "title": "Ouvrir", "action": "OpenDoc" }, { "title": "Fermer", "action": "CloseDoc" } ] }
Dialogue avec le serveur : plusieurs formats possibles (2/2)
▷ 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
Principes synchrones et asynchrones
▷ 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
Objet XMLHttpRequest
▷ interactivité de l’interface
▷ complexité relative grâce aux frameworks
(Open Ajax d’IBM, Atlas de Microsoft)
Avantages 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
Limites d’AJAX
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : rechargement d’une partie d’un agenda
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : rechargement d’une partie d’un agenda
agenda.php
affiche l’emploi du temps pour une
semaine pour une ou plusieurs personnes
new_item.php
formulaire d’une nouvelle tâche
reload_agenda.php
génère la partie de l’agenda à modifier
new_item_save.php
enregistre la tâche dans la BD& vérifie s’il est nécessaire de
recharger une partie de l’agenda
iframe
agenda.php
new_item.php
reload_agenda.php
new_item_save.php
création de l’objet XMLHttpRequestappel de l’objet XMLHttpRequest
fonction de traitement de l’appel AJAX
iframe
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : rechargement d’une partie d’un agenda
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : rechargement d’une partie d’un agenda
création de l’objet XMLHttpRequest
//Création de l'objet XHRfunction 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; }
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : 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.
E x e m p l e d ’ u t i l i s a t i o n d ’ A J A X : 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’ }
[ 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.
▷ Les balises XML décrivent le contenu plutôt que la présentation ; on parle d’un métalangagecré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 vers ions du document que l 'on nécessi te de représentations
Présentation de XML
▷ 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"?>
Structure d’un document XML (1/3)
▷ Déclaration de Type de Document (DOCTYPE): grammaire permettant de vérifier la conformité dudocument 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
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>
Structure d’un document XML (2/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>[email protected]</email></personne><personne>...</personne></annuaire>
Structure d’un document XML (3/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
Mise en page d’un document XML (1/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>
Mise en page d’un document XML (2/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>
Mise en page d’un document XML (3/3)
▷ 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)
Décodage d’un document XML
▷ Le DOM définit la structure d'un document sous forme d'une hiérarchie d'objets, deméthodes et d’évènements, afin de simplifierl'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
Décodage d’un document XML : DOM (1/3)
Décodage d’un document XML : DOM (2/3)
▷exemple de réprésentation DOM d’un document XHTML :
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";
▷ 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 structurecontenant l'intégralité du document.
Décodage d’un document XML : SAX
▷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.
Décodage d’un document XML : fin
▷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
Avantages de XML
▷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
Exemple d’utilisation : RSS & ATOM (1/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
Exemple d’utilisation : RSS & ATOM (2/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>
Exemple d’utilisation : RSS & ATOM (3/3)
[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
[PERMALIENS] (2/2)▷Exemple
●URL avant réécriturearticle.php?id=12&page=2&rubrique=5.
●règle de réécritureRewriteRule ^article-([0-9]+)-([0-9]+)-([0-9]+).html /articles/article.php?id=$1&page=$2&rubrique=$3 [L]
● URL après réécriturearticle_12_2_5.html
[ 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
[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
[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