11
Technologies WebTechnologies Webet travail collaboratifet travail collaboratif
François BoutinFrançois Boutin
22
Plan du coursPlan du cours Technologies webTechnologies web
Web Statique 1.0Web Statique 1.0 Web Dynamique 1.5Web Dynamique 1.5 Web Social 2.0Web Social 2.0 Futur : Web Sémantique 3.0 ?Futur : Web Sémantique 3.0 ?
Travail collaboratifTravail collaboratif CommuniquerCommuniquer Partager des documentsPartager des documents Gérer un projetGérer un projet
331996200020042007
Evolution du web sur un exemple Evolution du web sur un exemple http://web.archive.org/http://web.archive.org/
44
Technologies WebTechnologies Web
Web Statique 1.0Web Statique 1.0
Web Dynamique 1.5Web Dynamique 1.5
Web Social 2.0Web Social 2.0
Futur : Web Sémantique 3.0 ?Futur : Web Sémantique 3.0 ?
55
Web Statique 1.0Web Statique 1.0 Des pages statiquesDes pages statiques
Créées en Créées en HTMLHTML (par un « gourou »…) (par un « gourou »…) … … ou avec un logiciel de création webou avec un logiciel de création web Mises en forme (ou non…) par des feuilles de stylesMises en forme (ou non…) par des feuilles de styles
AvantagesAvantages Une seule personne est « responsable » du siteUne seule personne est « responsable » du site Le site peut être librement personnalisé (graphique, ergo)Le site peut être librement personnalisé (graphique, ergo)
Utilisation typique : site vitrine d’une petite structureUtilisation typique : site vitrine d’une petite structure
InconvénientsInconvénients Difficile de créer et mettre à jour de nombreuses pagesDifficile de créer et mettre à jour de nombreuses pages Installation d’un logiciel FTP pour mettre les pages en ligne Installation d’un logiciel FTP pour mettre les pages en ligne
66
Création d’une page Web en HTMLCréation d’une page Web en HTML
Page Web Code HTML
77
Feuille de style CSSFeuille de style CSS
Page Web
Code HTML
Feuille CSS
88
Mise en ligne du site avec FTPMise en ligne du site avec FTP
Serveur WebDisque local
Mise en ligne
99
Web Dynamique 1.5Web Dynamique 1.5 Des pages dynamiquesDes pages dynamiques
Créées « à la demande »Créées « à la demande » À partir d’une base de donnéesÀ partir d’une base de données
Une édition décentraliséeUne édition décentralisée Des contributeurs formant une chaîne éditorialeDes contributeurs formant une chaîne éditoriale Information saisie au plus prêt de sa source (Information saisie au plus prêt de sa source ( workflow) workflow) Gestion de contenus grâce à une interface webGestion de contenus grâce à une interface web
AvantagesAvantages L’information est structurée (et facilement interrogeable)L’information est structurée (et facilement interrogeable) Séparation entre « contenu » et « mise en forme »Séparation entre « contenu » et « mise en forme » Utilisation typique : gros site de vente (ex : Amazon…)Utilisation typique : gros site de vente (ex : Amazon…)
1010
Navigateur Web
Accès Base de données: PHP / MySQLAccès Base de données: PHP / MySQL
Base de donnéesMySQL
Serveur Web
PHP
Envoi de la requête au
serveur
Requête SQL
Select nom, cout FROM Produits WHERE origine = ‘France’ AND produit = ‘Fruit’
ORDER BY cout
Interrogation de la base
SQL
Construction de la page
résultat
Navigateur Web
Retour de la page
résultat
1111
Circuit de l’information : WorkflowCircuit de l’information : Workflow
Formulaire Internet de saisie Formulaire de consultation / résultat
ValidationBase de données
1212
Structuration de l’information : site UM1Structuration de l’information : site UM1
Administration du site
1313
Système de gestion de contenu : CMSSystème de gestion de contenu : CMS
1414
Édition d’une pageÉdition d’une page
1515
Web Social 2.0Web Social 2.0 L’internaute : créateur de contenuL’internaute : créateur de contenu
WikiWiki, , blogsblogs, réseaux sociaux, , réseaux sociaux, partage de photospartage de photos, vidéos…, vidéos… Annotation de pageAnnotation de page, , évaluationévaluation, , marque pages collaboratifmarque pages collaboratif, , étiquetageétiquetage
Objectif : fidéliser l’internaute (ex : Yahoo!)Objectif : fidéliser l’internaute (ex : Yahoo!)
Des technologies innovantesDes technologies innovantes XMLXML, , XSLXSL, Fil RSS, trackback (rétro lien), Fil RSS, trackback (rétro lien) AJAXAJAX Services Web (météo, bourse, carte routière) Services Web (météo, bourse, carte routière)
Nouveau modèle économiqueNouveau modèle économique Des services gratuits qui génèrent de l’audienceDes services gratuits qui génèrent de l’audience Des contenus rédigés par les internautesDes contenus rédigés par les internautes … … qui induisent des revenus publicitairesqui induisent des revenus publicitaires Risque : détournement d’informations personnelles (ex : Facebook)Risque : détournement d’informations personnelles (ex : Facebook)
1616
Wiki : WikipediaWiki : Wikipedia
Encyclopédie collaborative
1717
Création d’un BlogCréation d’un Blog Journal personnel en ligneJournal personnel en ligne
1818
Blog : choix du modèle (template)Blog : choix du modèle (template)
1919
Blog : publication d’un messageBlog : publication d’un message
2020
Blog : code HTML du messageBlog : code HTML du message
2121
Blog : ajout d’une imageBlog : ajout d’une image
2222
Blog : publication du messageBlog : publication du message
2323
Partage de photos avec Picasa & FlickrPartage de photos avec Picasa & Flickr
Dossiers photos
Contenu dossier
Outils disponibles
Association de tags (mots clés)
aux photos
2424
Annotation de pages Web: FleckAnnotation de pages Web: Fleck
2525
Évaluation de pages webÉvaluation de pages web L’utilisateur évalue la qualité d’une pageL’utilisateur évalue la qualité d’une page
Par un simple clic (sur + ou –) il participe au calcul du rangPar un simple clic (sur + ou –) il participe au calcul du rang Il peut bannir une page (si elle ne lui convient pas)Il peut bannir une page (si elle ne lui convient pas)
2626
Partage de marques pagesPartage de marques pages
Rendre publique une référence
2727
Google Bloc-notes : étiquetageGoogle Bloc-notes : étiquetage
2828
Structuration du contenu : XMLStructuration du contenu : XML
Document XMLExploration sans feuille de style dans un navigateur
2929
Sélection, tri et affichage
Mise en forme XSLMise en forme XSL
Feuille de style XSL
Résultat HTML
XML XSL+
HTMLDocument XML
3030
Abonnement à un fil RSSAbonnement à un fil RSS
S’abonner à un flux sous Firefox Choisir un agrégateur de flux
3131
Agrégation de contenu: Google ReaderAgrégation de contenu: Google Reader
Gérer mes abonnements
3232
Code RSS basé sur le langage XMLCode RSS basé sur le langage XML
Code de la page
Page RSS
3333
AJAX: Asynchronous JavaScript & XMLAJAX: Asynchronous JavaScript & XML
Base de données
Récupère uniquement l’information nécessaire
Recherche des parcours du master 2 Biologie Santé, spécialité Biotechnologies
3434
Futur : Web Sémantique 3.0 ?Futur : Web Sémantique 3.0 ? Web SémantiqueWeb Sémantique
Interprétation du sens de requêtes en langage naturelInterprétation du sens de requêtes en langage naturel Organisation automatiqueOrganisation automatique de documents de documents Intelligence artificielle, analyse réseauxIntelligence artificielle, analyse réseaux
Information personnalisé : one to oneInformation personnalisé : one to one Publicités ciblées (Publicités ciblées (AdWordsAdWords / / AdSenseAdSense)) Prise en compte de l’Prise en compte de l’historiquehistorique
ProblèmesProblèmes Récupération d’info à notre insuRécupération d’info à notre insu Interprétation de ces informationsInterprétation de ces informations
3535
Moteur de recherche graphiqueMoteur de recherche graphique
Analyse réseau & sémantique
Meta moteurMeta moteur Organise les sites pertinents concernant une requêteOrganise les sites pertinents concernant une requête En fonction des liens et mots clés qu’ils partagentEn fonction des liens et mots clés qu’ils partagent
3636
AdWordsAdWords Publicités Google dans la page de résultatsPublicités Google dans la page de résultats
Des liens commerciaux apparaissent suivant les mots clésDes liens commerciaux apparaissent suivant les mots clés Les mots clés sont vendus aux enchèresLes mots clés sont vendus aux enchères L’entreprise paie au clicL’entreprise paie au clic
3737
Nature des requête Adwords / OvertureNature des requête Adwords / Overture
Requêtes relatives
au mot clé dentaire
3838
AdSenseAdSense Publicité Google intégrée aux sites personnelsPublicité Google intégrée aux sites personnels
Les publicités sont associées automatiquementLes publicités sont associées automatiquement Le propriétaire du site est payé au clicLe propriétaire du site est payé au clic Le coût par clic (ou pour 1000 clics) dépend d’enchèresLe coût par clic (ou pour 1000 clics) dépend d’enchères
3939
Historique GoogleHistorique Google Historique en ligneHistorique en ligne
Indépendant du poste sur lequel travaille l’internauteIndépendant du poste sur lequel travaille l’internaute Risque : l’individu peut être « fiché » suivant sa navigation Risque : l’individu peut être « fiché » suivant sa navigation
Historique stocké sur un serveur de Google
4040
Travail collaboratifTravail collaboratif
CommuniquerCommuniquer
Partager des documentsPartager des documents
Gérer un projetGérer un projet
4141
Travail collaboratif avec Google AppsTravail collaboratif avec Google Apps
4242
Travail collaboratifTravail collaboratif
CommuniquerCommuniquerCommunication asynchroneCommunication asynchrone
Communication synchroneCommunication synchrone
4343
Communication asynchroneCommunication asynchrone Courrier électroniqueCourrier électronique
Les champs A, CC, Cci, Objet, TexteLes champs A, CC, Cci, Objet, Texte Gérer contacts et boîtes mailsGérer contacts et boîtes mails Gérer le spamGérer le spam
4444
Communication synchroneCommunication synchrone Messagerie instantanéeMessagerie instantanée
Texte, son, vidéoTexte, son, vidéo Échange de fichiers, photos…Échange de fichiers, photos…
Google Talk msn Skype
4545
Travail collaboratifTravail collaboratif
Partager des documentsPartager des documentsTableurTableur
Traitement de texteTraitement de texte
PrésentationPrésentation
4646
Tableur en ligneTableur en ligne AvantagesAvantages
Les documents peuvent être partagés ou publiésLes documents peuvent être partagés ou publiés Exportation au format xls, pdf, open office, txt, htmlExportation au format xls, pdf, open office, txt, html
4747
Publication du graphique sur un blogPublication du graphique sur un blog
4848
Partage de documentPartage de document
4949
Documents partagésDocuments partagés
5050
Modification du document partagéModification du document partagé
5151
Historique d’un document : RévisionsHistorique d’un document : Révisions
5252
Traitement de texte en ligneTraitement de texte en ligne
5353
Comparaison de versionsComparaison de versions
5454
Suivi des modifications sous WordSuivi des modifications sous Word
5555
Création d’une présentationCréation d’une présentation
5656
Versions du documentVersions du document
5757
Travail collaboratifTravail collaboratif
Gérer un projetGérer un projetAgendaAgenda
Gestion de groupeGestion de groupe
Planifier les tâchesPlanifier les tâches
5858
AgendaAgenda
5959
Demande de partageDemande de partage
6060
Autorisation de partageAutorisation de partage
6161
A ajoute un événement sur l’agenda BA ajoute un événement sur l’agenda B
6262
Vue de l’agenda BVue de l’agenda B
6363
Gérer un groupe avec Google GroupesGérer un groupe avec Google Groupes
6464
Planifier les tâches : Planifier les tâches : diagramme de Ganttdiagramme de Gantt