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