web 2.0 generalités, enjeux, et technologies

53

Upload: foued-benoumhani

Post on 23-Dec-2014

1.258 views

Category:

Documents


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Web 2.0 generalités, enjeux, et technologies
Page 2: 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

Page 3: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 4: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 5: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 6: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 7: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 8: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 9: Web 2.0 generalités, enjeux, et technologies

2

1

3

5

6

4

7

8

▷ M

argu

erite

des

cou

leur

s W

eb 2

.0[ Enjeux pour les SI Web ]

Page 10: Web 2.0 generalités, enjeux, et technologies

▷ E

xem

ple

de s

ite W

eb 2

.0[ Enjeux pour les SI Web ]

Page 11: Web 2.0 generalités, enjeux, et technologies

▷ 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 ]

Page 12: Web 2.0 generalités, enjeux, et technologies

[ Enjeux pour les SI Web ] ▷

Exe

mpl

e de

Fol

ksno

mie

Page 13: Web 2.0 generalités, enjeux, et technologies

[ Enjeux pour les SI Web ] ▷

Exe

mpl

e de

Mas

hup

:

goog

le m

aps

Page 14: Web 2.0 generalités, enjeux, et technologies

▷ E

xem

ple

de M

ashu

p :

yaho

o pi

pes

[ Enjeux pour les SI Web ]

Page 15: Web 2.0 generalités, enjeux, et technologies

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

Page 16: Web 2.0 generalités, enjeux, et technologies

[ 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

Page 17: Web 2.0 generalités, enjeux, et technologies

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

Page 18: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 19: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 20: Web 2.0 generalités, enjeux, et technologies

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)

Page 21: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 22: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 23: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 24: Web 2.0 generalités, enjeux, et technologies

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

Page 25: Web 2.0 generalités, enjeux, et technologies

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

Page 26: Web 2.0 generalités, enjeux, et technologies

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

Page 27: Web 2.0 generalités, enjeux, et technologies

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; }

Page 28: Web 2.0 generalités, enjeux, et technologies

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.

Page 29: Web 2.0 generalités, enjeux, et technologies

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’ }

Page 30: Web 2.0 generalités, enjeux, et technologies

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

Page 31: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 32: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 33: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 34: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 35: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 36: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 37: Web 2.0 generalités, enjeux, et technologies

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)

Page 38: Web 2.0 generalités, enjeux, et technologies

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)

Page 39: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 40: Web 2.0 generalités, enjeux, et technologies

▷ 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)

Page 41: Web 2.0 generalités, enjeux, et technologies

Décodage d’un document XML : DOM (2/3)

▷exemple de réprésentation DOM d’un document XHTML :

Page 42: Web 2.0 generalités, enjeux, et technologies

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";

Page 43: Web 2.0 generalités, enjeux, et technologies

▷ 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

Page 44: Web 2.0 generalités, enjeux, et technologies

▷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

Page 45: Web 2.0 generalités, enjeux, et technologies

▷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

Page 46: Web 2.0 generalités, enjeux, et technologies

▷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)

Page 47: Web 2.0 generalités, enjeux, et technologies

▷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)

Page 48: Web 2.0 generalités, enjeux, et technologies

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)

Page 49: Web 2.0 generalités, enjeux, et technologies

[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

Page 50: Web 2.0 generalités, enjeux, et technologies

[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

Page 51: Web 2.0 generalités, enjeux, et technologies

[ 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

Page 52: Web 2.0 generalités, enjeux, et technologies

[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

Page 53: Web 2.0 generalités, enjeux, et technologies

[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