1 Technologies Web et travail collaboratif François Boutin

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