Technologies Web et travail collaboratif François Boutin

Plan du cours Technologies web Travail collaboratif Web Statique 1.0 Web Dynamique 1.5 Web Social 2.0 Futur : Web Sémantique 3.0 ? Travail collaboratif Communiquer Partager des documents Gérer un projet

Evolution du web sur un exemple http://web.archive.org/ 2007 2004 2000 1996

Technologies Web Web Statique 1.0 Web Dynamique 1.5 Web Social 2.0 Futur : Web Sémantique 3.0 ?

Web Statique 1.0 Des pages statiques Avantages Inconvénients Créées en HTML (par un « gourou »…) … ou avec un logiciel de création web Mises en forme (ou non…) par des feuilles de styles Avantages Une seule personne est « responsable » du site Le site peut être librement personnalisé (graphique, ergo)  Utilisation typique : site vitrine d’une petite structure Inconvénients Difficile de créer et mettre à jour de nombreuses pages Installation d’un logiciel FTP pour mettre les pages en ligne

Création d’une page Web en HTML Code HTML

Feuille de style CSS Feuille CSS Page Web Code HTML

Mise en ligne du site avec FTP Disque local Serveur Web

Web Dynamique 1.5 Des pages dynamiques Une édition décentralisée Créées « à la demande » À partir d’une base de données Une édition décentralisée Des contributeurs formant une chaîne éditoriale Information saisie au plus prêt de sa source ( workflow) Gestion de contenus grâce à une interface web Avantages L’information est structurée (et facilement interrogeable) Séparation entre « contenu » et « mise en forme » Utilisation typique : gros site de vente (ex : Amazon…)

Accès Base de données: PHP / MySQL Navigateur Web  Retour de la page résultat  Construction de la page résultat 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  Navigateur Web Base de données MySQL Serveur Web

Circuit de l’information : Workflow Formulaire Internet de saisie Formulaire de consultation / résultat Base de données Validation

Structuration de l’information : site UM1 Administration du site

Système de gestion de contenu : CMS

Édition d’une page

Web Social 2.0 L’internaute : créateur de contenu Wiki, blogs, réseaux sociaux, partage de photos, vidéos… Annotation de page, évaluation, marque pages collaboratif, étiquetage  Objectif : fidéliser l’internaute (ex : Yahoo!) Des technologies innovantes XML, XSL, Fil RSS, trackback (rétro lien) AJAX Services Web (météo, bourse, carte routière) Nouveau modèle économique Des services gratuits qui génèrent de l’audience Des contenus rédigés par les internautes … qui induisent des revenus publicitaires Risque : détournement d’informations personnelles (ex : Facebook)

Wiki : Wikipedia Encyclopédie collaborative

Création d’un Blog Journal personnel en ligne

Blog : choix du modèle (template)

Blog : publication d’un message

Blog : code HTML du message

Blog : ajout d’une image

Blog : publication du message

Partage de photos avec Picasa & Flickr Dossiers photos Contenu dossier Outils disponibles Association de tags (mots clés) aux photos

Annotation de pages Web: Fleck

Évaluation de pages web L’utilisateur évalue la qualité d’une page Par un simple clic (sur + ou –) il participe au calcul du rang Il peut bannir une page (si elle ne lui convient pas)

Partage de marques pages Rendre publique une référence

Google Bloc-notes : étiquetage

Structuration du contenu : XML Exploration sans feuille de style dans un navigateur Document XML

Mise en forme XSL Sélection, tri et affichage XML + XSL Document XML HTML Résultat HTML Feuille de style XSL

Abonnement à un fil RSS Choisir un agrégateur de flux S’abonner à un flux sous Firefox

Agrégation de contenu: Google Reader Gérer mes abonnements

Code RSS basé sur le langage XML Code de la page Page RSS

AJAX: Asynchronous JavaScript & XML Récupère uniquement l’information nécessaire Base de données Recherche des parcours du master 2 Biologie Santé, spécialité Biotechnologies

Futur : Web Sémantique 3.0 ? Web Sémantique Interprétation du sens de requêtes en langage naturel Organisation automatique de documents Intelligence artificielle, analyse réseaux Information personnalisé : one to one Publicités ciblées (AdWords / AdSense) Prise en compte de l’historique Problèmes Récupération d’info à notre insu Interprétation de ces informations

Moteur de recherche graphique Meta moteur Organise les sites pertinents concernant une requête En fonction des liens et mots clés qu’ils partagent Analyse réseau & sémantique

AdWords Publicités Google dans la page de résultats Des liens commerciaux apparaissent suivant les mots clés Les mots clés sont vendus aux enchères L’entreprise paie au clic

Nature des requête Adwords / Overture Requêtes relatives au mot clé dentaire

AdSense Publicité Google intégrée aux sites personnels Les publicités sont associées automatiquement Le propriétaire du site est payé au clic Le coût par clic (ou pour 1000 clics) dépend d’enchères

Historique Google Historique en ligne Indépendant du poste sur lequel travaille l’internaute Risque : l’individu peut être « fiché » suivant sa navigation Historique stocké sur un serveur de Google

Communiquer Partager des documents Gérer un projet Travail collaboratif Communiquer Partager des documents Gérer un projet

Travail collaboratif avec Google Apps

Communiquer Communication asynchrone Communication synchrone Travail collaboratif Communiquer Communication asynchrone Communication synchrone

Communication asynchrone Courrier électronique Les champs A, CC, Cci, Objet, Texte Gérer contacts et boîtes mails Gérer le spam

Communication synchrone Messagerie instantanée Texte, son, vidéo Échange de fichiers, photos… Google Talk msn Skype

Partager des documents Tableur Traitement de texte Présentation Travail collaboratif Partager des documents Tableur Traitement de texte Présentation

Tableur en ligne Avantages Les documents peuvent être partagés ou publiés Exportation au format xls, pdf, open office, txt, html

Publication du graphique sur un blog

Partage de document

Documents partagés

Modification du document partagé

Historique d’un document : Révisions

Traitement de texte en ligne

Comparaison de versions

Suivi des modifications sous Word

Création d’une présentation

Versions du document

Gérer un projet Agenda Gestion de groupe Planifier les tâches Travail collaboratif Gérer un projet Agenda Gestion de groupe Planifier les tâches

Agenda

Demande de partage

Autorisation de partage

A ajoute un événement sur l’agenda B

Vue de l’agenda B

Gérer un groupe avec Google Groupes

Planifier les tâches : diagramme de Gantt