technologies du web

Technologies du web

Evelyne BroudouxCNAM 2011-12

Plan Du web 1 au web 3 Du côté des pratiques

Du web1 au web3 Web 1 : read only - le web des documents Web 2 : read/write – le web des gens Web 3 : linked data - le web des objets

communicants

Avant le web Système Augment (« augmentation de l’intelligence

humaine ») de Douglas Engelbart SGML

Generalized Markup Language (Charles Goldfarb, Edward Mosher et Raymond Loriev)

Standard Generalized Markup Language (langage normalisé de balisage généralisé – SGML) DTD (définition de type de document) Permet de structurer logiquement des documents<TITRE><SOUS-TITRE><PARAGRAPHE>

Système hypertexte avec Hypercard

Le web 0 à 1Navigateur scripteur

Browser Nexus, 1990 : éditeur et lecteur de nœuds

Navigateur lecteur Browser graphique

Erwise, 1992 Browser

multiplateforme capable d’afficher dans la même fenêtre textes et images Mosaic, 1993

Evolution de l’emploi des

langages Web 0

HTML Web 0,5

HTML + Java + Javascript

Scripts Client/Serveur Web 1

HTML + ASP + Oracle + VRML

Web 1,5 XHTML + CSS + PHP +

MySQL

Web 2 XHTML + Javascript

+ XML + Flash + RSS + OPML

Web 2,5 HTML5 + CSS3 + GL

Web 3 RDF + FOAF +

SPARQL + ??

Schéma : Bachimont

Vers le web dynamique

Augmentation exponentielle et continue des données stockées Bases de données Moteurs de recherche et algorithmes de

recherche-indexation Stockage et mise à jour des données

Javascript et Java Séparation contenu/forme : css Html dynamique : php et mysql

Web 1 : système de publication

Démocratisation de la publication (pages persos)

Systèmes de gestion de contenu (CMS) Blogs Wikis CMS (Php-nuke, spip, drupal, moodle, joomla,

etc. ) Agrégation de contenus

RSS

Hybridation de la publication avec la com Exemple de Yahoo (né en 1994)

Annuaire + portail + moteur de recherche Groupes Messagerie en ligne

Hybridation de la publication web (html) avec les services de communication Exemple des “groupes yahoo” : Un groupe de discussion

est une liste de diffusion couplée à un site web

2008 : tentative de rachat par Microsoft (45 milliards de dollars en actions)

Sept. 2011 : la dg Carol Bartz licenciée (valeur Yahoo : 17 milliards de dollars)

Hybridation du web

Construction de modèles économiques spécifiques au web basés sur la publicité Google (1996)

Moteur de recherche + régie publicitaire + innovations (google earth, Gmail, etc.) + rachats (YouTube)

AdSense + AdWords Facebook (2006)

Génération de publicités “adaptées” basées sur les profils, les pages aimées, les applications installées

Dispositifs de publicationsur le web

Définitions Édition (écriture, choix éditoriaux de filtrage,

amélioration par réécritures successives) Publication (rendre public l’info mise en forme)

Publication centralisée et distribuée Centralisée : système hiérarchique

Systèmes en entonnoir pour l’amélioration des textes puis « publication définitive » (possibilités de réédition)

Distribuée : système en réseau Regroupement de « communautés » d’affinités

améliorant les textes « après publication », la publication n’est plus définitive

Web2 vs Web1 ? Publication Html statique Hiérarchie éditoriale Contenu mis-à-jour

manuellement Britannica Modèle publicitaire

basé sur la publication (DoubleClick)

Conversation Langages dynamiques Classement

utilisateurs Syndication de

contenu Wikipédia Modèle publicitaire

basé sur la participation (AdSense) et Adwords

http://www.journaldunet.com/ebusiness/publicite/video/071010-netbooster-demo-adwords-annonce/index.shtml

Hybridation de la publication avec la com Microblogging

Twitter : réseau social + système d’échanges de messages <140 caractères

Tumblr : plate-forme en ligne de microblogging préformaté (texte, citation, photo, vidéo, son) avec réseau social

Hybridation de la publication avec la communication

Skype Éditeur et opérateur de communication

Créé en 2003 par les ex de KaZaA qui inventent une solution gratuite de téléphonie sur IP (VoIP) + services payants sur abonnement (mobile, SMS,

Chat, messagerie instantanée, etc.) Racheté par e-bay en sept 2005 pour environ

3 milliards de dollars Mai 2007 : 171 millions d’utilisateurs et

fermeture des bureaux européens pour cause de non rentabilité des services payants (SkypeOut) Concurrence du tél gratuit des FAI Volume de communication payante : 1,5 milliards de

minutes (= 4,5 euros par mois/utilisateur en France)

Skype Août 2007 : alliance avec Dailymotion

et ses « mood channels », séquences vidéos créatives intégrables aux messages skype. Les « motionmakers », réalisateurs de ces vidéos auront accès sur Dailymontion à plus de 220 millions d’utilisateurs de Skype

BitTorrent Plate-forme P2P

Créée en 2001 par Bram Cohen (né en 1975) Utilise les postes clients en tant que serveurs

pour fragmenter les contenus Association avec RSS (pour vérifier les mises

à jour) fin 2003 Hybridation vers un modèle payant fin 2006 :

une plate-forme améliorée propose des films et de la musique, en mode payant ou gratuit, financés par la publicité. 135 millions d’installations (2007)

Vers OpenBitTorrent (2009)

Les plates-formes de partage-

diffusion vidéo DailyMotion sur le modèle de YouTube

Éditeur et opérateur de communication sur internet, créé en 2005 par Benjamin Bejbaum et Olivier Poitrev 2e semestre 2007 : + 75% de fréquentation Juin 2007 : 37,6 millions de visiteurs uniques et 1374 millions de

pages vues (source Alexa)

Current.tv : créée par AlGore pour compléter un bouquet de chaines audiovisuelles. Modèle à trois niveaux.

Wat.tv : membre du réseau TF1 network, sélection des meilleures vidéos de jeunes amateurs

Jump.tv : plate-forme de montage et retouches de vidéos en ligne

Lignes de temps : prototype de l’IRI de taguage/commentaires de vidéos

DailyMotion en 2007

DailyMotion en 2007

DailyMotion en 2007Via webcamCréer un compte

Chaînes (catégories)

Tags (mots-clefs)

S’identifier

Qu’est-ce que le « web2.0 »

En réalité, il n’y a pas vraiment de coupure entre web 1 et 2

En 2000, la bulle internet éclate (pas de modèle publicitaire viable)

L’industrie logicielle cherche à rebondir En 2005, les blogs sont en plein essor, les

wikis deviennent des outils de gestion de projet, la voix sur ip se démocratise, le p2p sort des utilisations marginales, Google lance AdSense et AdWords

Qu’est-ce que le « web2.0 » ?

Fin 2005, une conférence est organisée par l’éditeur de manuels informatiques O’Reilly

Le web comme plate-forme Tim O’Reilly invente ce terme avec John

Battelle pour tenter de définir un nouveau paysage du web qu’il dessine ainsi

L’usager crée la valeur

Carte conceptuelle du

web2Le créateur du terme intègre dans une nébuleuse des technologies pré-existantes comme les wikis, les blogs, les fils RSS

Qu’est-ce que le « web2.0 »

Des plate-formes logicielles indépendantes des systèmes d’exploitation

Le conseil du développeur Dave à Microsoft lorsqu’il l’a quitté cette société a été : « Les logiciels utiles qui se libéreront d'une plate-forme spécifique seront des vecteurs de fortes marges pour un bon moment »

Qu’est-ce que le « web2.0 »

Modèle inspiré du p2p Plus il y a d’utilisateurs, plus le système

est performant Les services mettent en relation des

données et des personnes Architecture de la participation : il faut

donner pour recevoir, le système s’améliore au fur et à mesure que les gens l’utilisent

Qu’est-ce que le « web2.0 »

1. Techniques1.1 Ajax

Qu’est-ce que le « web2.0 »

Ajax = Asynchronous JavaScript and XML, est devenu une des techniques star pour le développement d'applications web interactives.

Ajax est une « technologie » qui combine plusieurs langages qui se développent chacun de leur côté, et dont la synergie donne de nouveaux et puissants résultats.

Qu’est-ce que le « web2.0 »

Ajax comporte une présentation basée sur les standards

XHTML et CSS un affichage dynamique et interactif

grâce à DOM (Document Object Model) un système d'échange et de

manipulation de données utilisant XML et XSLT

un mécanisme de récupération de données asynchrone utilisant XMLHttpRequest JavaScript pour lier le tout

Web services Portage des applications en ligne

Serveurs Photos (Flickr) Signets (Delicious)

Partage des données Communautarisation Auto-indexation Pratiques de collaboration sur contenus

Comparaison des modèles d’application

Le modèle classique est basé sur l’interrogation du serveur par le navigateur client et l’échange d’infos par http

Ajax est un modèle asynchrone qui utilise la description XML des données

Qu’est-ce que le « web2.0 »

1.2 Interfaces riches Un maximum de calculs se déroule sur le

navigateur-client, ce qui libère de la bande passante sur le réseau et fluidifie les actions-utilisateurs sur l’interface

Qu’est-ce que le « web2.0 »

1.3 La gestion des données est au cœur des produits Les applications sont indépendantes des

données qu’elles traitent.

Qu’est-ce que le « web2.0 »

1.4 Mashup : Site internet ou application dont le contenu résulte d’une combinaison entre plusieurs sources d'information

1.5 API (Application programming interface) : interface de programmation d’application autorisant l’extraction et le traitement d’informations

HousingMaps est un site « mashup » mixant Craiglist (site d’annonces) à GoogleMaps (API)

Réalité économique du

web2.0 ? Pour les entreprises, cela représente

une externalisation d’une partie des métiers de la création

Utilisation de technologies open-source (logiciels « non propriétaires »)

Faire travailler la « foule » : crowdsourcing

Résultat : une bulle ?

Conséquences pour les usagers ? Usager ? Interacteur ? Créateur ?

Objectif des applications en ligne ? Permettre aux usagers de

CRÉER MODIFIER PARTAGER

du contenu et des relations sociales CRÉER DES GROUPES AVOIR UNE VIE SOCIALE VIRTUELLE

La courbe d’innovation du

web

Du web 2 au web squared

Du web 1.0 au web 2

Du web 1.0 au web 2

Vers les données liées

Données implicites : des métadonnées générées automatiquement et des systèmes auto-apprenants

Ombres informationnelles : ensemble des informations et données associées à un objet, une personne, un lieu, un événement

Ecosystèmes de données : bases de connaissances structurées, ouvertes et universelles

Comment rendre le web

sémantique ? Problème de lieu et de nommage

Si la ressource localisée par son adresse change de place, il peut devenir difficile de la retrouver

Si la ressource a des « homonymes », il peut être difficile de la distinguer

Rendre le web « intelligent » : cesser de ranger les informations par leur adresse (URL) mais par le sens qui pourrait leur être attribué. Une solution : caractériser la ressource à l’aide d’un identifiant pouvant avoir deux types La localisation Le nom

URI, URL et URN

Une URI (uniform ressource identifier) est une chaîne de caractères identifiant une ressource web physique ou abstraite qui peut être de type « accès » locator, ou « nom » name ou les deux

URI, URL et URN

• Une URL (Uniform Resource Locator) est une URI qui fournit l’accès à une ressource.

URI, URL et URN

Une URN (Uniform Resource Name) est une URI qui identifie une ressource par son nom unique dans un espace de noms. Une URN peut être employée pour parler d'une ressource sans

s’occuper de son emplacement ou de la manière de la référencer. Par exemple, l'URN urn:isbn:0-395-36341-1 est une URI qui,

comme un International Standard Book Number (ISBN), est une référence à un livre.

Exemple

Vers le web « sémantique »

(http://www.yoyodesign.org/doc/w3c/cooluris/annexe/uris.png)

Vers le web « sémantique »

(W3C Semantic Web Activity, Koivunen and Miller, 2001)

Du côté des pratiques…

La « veille informationnelle » est transformée Moteurs spécialisés, technologies RSS,

agrégateurs de contenus, blogs Réseaux d’influence visualisables de Twitter

Le marketing et le web2 s’accordent parfaitement

L’écriture individuelle et collaborative se développent (blogs, googledocs et wikis)

Le partage de références (signets, cv) et la publication s’automatisent (CMS, etc.)