Série STMG : Sciences et technologies du management et de ...
Technologies du web
description
Transcript of Technologies du web
![Page 1: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/1.jpg)
Technologies du web
Evelyne BroudouxCNAM 2011-12
![Page 2: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/2.jpg)
Plan Du web 1 au web 3 Du côté des pratiques
![Page 3: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/3.jpg)
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
![Page 4: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/4.jpg)
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
![Page 5: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/5.jpg)
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
![Page 6: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/6.jpg)
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 + ??
![Page 7: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/7.jpg)
Schéma : Bachimont
![Page 8: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/8.jpg)
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
![Page 9: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/9.jpg)
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
![Page 10: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/10.jpg)
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)
![Page 11: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/11.jpg)
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
![Page 12: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/12.jpg)
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
![Page 13: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/13.jpg)
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
![Page 14: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/14.jpg)
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
![Page 15: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/15.jpg)
Hybridation de la publication avec la communication
![Page 16: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/16.jpg)
![Page 17: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/17.jpg)
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)
![Page 18: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/18.jpg)
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
![Page 19: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/19.jpg)
![Page 20: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/20.jpg)
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)
![Page 21: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/21.jpg)
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
![Page 22: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/22.jpg)
![Page 23: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/23.jpg)
DailyMotion en 2007
![Page 24: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/24.jpg)
DailyMotion en 2007
![Page 25: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/25.jpg)
DailyMotion en 2007Via webcamCréer un compte
Chaînes (catégories)
Tags (mots-clefs)
S’identifier
![Page 26: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/26.jpg)
![Page 27: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/27.jpg)
![Page 28: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/28.jpg)
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
![Page 29: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/29.jpg)
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
![Page 30: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/30.jpg)
![Page 31: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/31.jpg)
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
![Page 32: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/32.jpg)
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 »
![Page 33: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/33.jpg)
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
![Page 34: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/34.jpg)
Qu’est-ce que le « web2.0 »
1. Techniques1.1 Ajax
![Page 35: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/35.jpg)
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.
![Page 36: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/36.jpg)
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
![Page 37: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/37.jpg)
Web services Portage des applications en ligne
Serveurs Photos (Flickr) Signets (Delicious)
Partage des données Communautarisation Auto-indexation Pratiques de collaboration sur contenus
![Page 38: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/38.jpg)
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
![Page 39: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/39.jpg)
![Page 40: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/40.jpg)
![Page 41: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/41.jpg)
![Page 42: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/42.jpg)
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
![Page 43: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/43.jpg)
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.
![Page 44: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/44.jpg)
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
![Page 45: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/45.jpg)
HousingMaps est un site « mashup » mixant Craiglist (site d’annonces) à GoogleMaps (API)
![Page 46: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/46.jpg)
![Page 47: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/47.jpg)
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 ?
![Page 48: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/48.jpg)
![Page 49: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/49.jpg)
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
![Page 50: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/50.jpg)
La courbe d’innovation du
web
![Page 51: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/51.jpg)
Du web 2 au web squared
![Page 52: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/52.jpg)
Du web 1.0 au web 2
![Page 53: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/53.jpg)
Du web 1.0 au web 2
![Page 54: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/54.jpg)
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
![Page 55: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/55.jpg)
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
![Page 56: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/56.jpg)
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
![Page 57: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/57.jpg)
URI, URL et URN
• Une URL (Uniform Resource Locator) est une URI qui fournit l’accès à une ressource.
![Page 58: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/58.jpg)
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.
![Page 59: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/59.jpg)
Exemple
![Page 60: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/60.jpg)
Vers le web « sémantique »
(http://www.yoyodesign.org/doc/w3c/cooluris/annexe/uris.png)
![Page 61: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/61.jpg)
Vers le web « sémantique »
(W3C Semantic Web Activity, Koivunen and Miller, 2001)
![Page 62: Technologies du web](https://reader035.fdocuments.in/reader035/viewer/2022062410/568163a2550346895dd4a4f2/html5/thumbnails/62.jpg)
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.)