# HG changeset patch # User Nicolas Sauret # Date 1397653163 -7200 # Node ID f68ecaf5265e575002622e4803fb88729090d6b3 # Parent 69b81d5e1b33b7d36530f563ab853b6f97c0c34f add visualisation dossiers + general editing diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/couleurs/design.css --- a/toolkit/exemples/couleurs/design.css Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/couleurs/design.css Wed Apr 16 14:59:23 2014 +0200 @@ -3,8 +3,9 @@ /* -- General style -- */ body { - width: 960px; - font: 14px Helvetica Neue; + width: 830px; + font: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; overflow-y: scroll; z-index: 1; @@ -12,7 +13,7 @@ } h1 { - font-size: 36px; + font-size: 18px; font-weight: 300; margin-bottom: .3em; } diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/couple/css/design.css --- a/toolkit/exemples/couple/css/design.css Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/couple/css/design.css Wed Apr 16 14:59:23 2014 +0200 @@ -6,7 +6,8 @@ position: absolute; margin: auto; width: 960px; - font: 14px Helvetica Neue; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; margin: 30px 20px; overflow-y: scroll; @@ -14,7 +15,7 @@ } h1 { - font-size: 36px; + font-size: 18px; font-weight: 300; margin-bottom: .3em; } diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/libraries/nco/streamgraph.js --- a/toolkit/exemples/libraries/nco/streamgraph.js Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/libraries/nco/streamgraph.js Wed Apr 16 14:59:23 2014 +0200 @@ -9,7 +9,7 @@ this.parametres = { name: null, hauteur: 400, - largeur: 900, + largeur: 830, selector: "#streamgraph", couleurs: null, diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/relations/design.css --- a/toolkit/exemples/relations/design.css Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/relations/design.css Wed Apr 16 14:59:23 2014 +0200 @@ -3,8 +3,9 @@ /* -- General style -- */ body { - width: 960px; - font: 14px Helvetica Neue; + width: 830px; + font: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; overflow-y: scroll; z-index: 1; @@ -12,7 +13,7 @@ } h1 { - font-size: 36px; + font-size: 18px; font-weight: 300; margin-bottom: .3em; } diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/streamgraph/design.css --- a/toolkit/exemples/streamgraph/design.css Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/streamgraph/design.css Wed Apr 16 14:59:23 2014 +0200 @@ -3,8 +3,9 @@ /* -- General style -- */ body { - width: 960px; - font: 14px Helvetica Neue; + width: 830px; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; overflow-y: scroll; z-index: 1; @@ -12,7 +13,7 @@ } h1 { - font-size: 36px; + font-size: 18px; font-weight: 300; margin-bottom: .3em; } diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/streamgraph/script.js --- a/toolkit/exemples/streamgraph/script.js Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/streamgraph/script.js Wed Apr 16 14:59:23 2014 +0200 @@ -8,7 +8,7 @@ name: "streamgraph", selector: "#streamgraph", hauteur: 300, - largeur: 900, + largeur: 830, relations: r, couleurs: couleurs }; @@ -22,7 +22,7 @@ activerSelection : true, activerTimeline: true, hauteur: 50, - largeur: 900, + largeur: 830, relations: r }; diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/exemples/treemap/design.css --- a/toolkit/exemples/treemap/design.css Tue Apr 15 17:47:43 2014 +0200 +++ b/toolkit/exemples/treemap/design.css Wed Apr 16 14:59:23 2014 +0200 @@ -3,8 +3,9 @@ /* -- General style -- */ body { - width: 960px; - font: 14px Helvetica Neue; + width: 830px; + font-size: 14px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; overflow-y: scroll; z-index: 1; @@ -12,7 +13,7 @@ } h1 { - font-size: 36px; + font-size: 18px; font-weight: 300; margin-bottom: .3em; } diff -r 69b81d5e1b33 -r f68ecaf5265e toolkit/mediapart/mediapart10.swf Binary file toolkit/mediapart/mediapart10.swf has changed diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/cartographie.md --- a/wiki/cartographie.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/cartographie.md Wed Apr 16 14:59:23 2014 +0200 @@ -16,3 +16,8 @@ ## Module + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/config.json --- a/wiki/config.json Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/config.json Wed Apr 16 14:59:23 2014 +0200 @@ -1,6 +1,6 @@ { - "useSideMenu": false, + "useSideMenu": true, "lineBreaks": "gfm", - "additionalFooterText": "All content and images © by IRI", + "additionalFooterText": "All content and images © by IRI - ", "anchorCharacter": "¶" } \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/couleurs.md --- a/wiki/couleurs.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/couleurs.md Wed Apr 16 14:59:23 2014 +0200 @@ -10,4 +10,4 @@ + en passant deux couleurs et un nombre de couleurs pour créer un dégradé entre les deux couleurs, avec un certain nombre de niveaux. ## Module - \ No newline at end of file + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/couple.md --- a/wiki/couple.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/couple.md Wed Apr 16 14:59:23 2014 +0200 @@ -3,4 +3,10 @@ Ce module propose une visualisation corrélée d'un jeu de données en utilisant les deux précédents modules Streamgraph et Treemap. ## Module - \ No newline at end of file + + + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/dossiers.md --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/wiki/dossiers.md Wed Apr 16 14:59:23 2014 +0200 @@ -0,0 +1,21 @@ +# Les _dossiers_ de la rédaction de Médiapart +## Description +Ce module propose une représentation des dossiers de la rédaction de Médiapart en visualisant l'évolution du nombre d'articles par dossier dans le temps pour les 15 principaux dossiers. +La visualisation permet de rapidement appréhender la vie d'un dossier, en identifiant les pics d'articles ainsi que les évènements qui ont mené la rédaction à accentuer la couverture d'un dossier. +Il est possible de sélectionner plusieurs dossiers à la fois et de comparer ainsi la distribution des articles de chaque dossier sélectionné. + +Ce prototype a été désigné à partir des données réelles, mais a été implémenté ici sous Flash et n'est pas 100% fonctionnels. Seuls quelques dossiers sont clicables : _Mali, guerre et crise_, _Guerre civile en Syrie_, _Le mariage pour tous_. + +_Conception et design par Nicolas Morand_ + +__________ +## Prototype + + + + + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/index.md --- a/wiki/index.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/index.md Wed Apr 16 14:59:23 2014 +0200 @@ -1,12 +1,11 @@ # Réalisations IRI ## About -Cette page référence les livrables logiciels produit par l'IRI dans le cadre du projet Periplus. -en savoir plus sur Periplus » +Cette page référence les livrables logiciels produit par l'IRI dans le cadre du projet Periplus. en savoir plus sur Periplus » ## L4.3 Prototypage des maquettes Ce livrable présente une démo statique de l'interface Mediapart by Periplus sur la base d'une requête unique et d'un dataset limité. -Voir la démo » +Voir la démo » ## L5.6 Outils de démonstration Ce livrable présente une série d'expérimentations développées par les étudiants de l'ECP dans le cadre de l'atelier Design Metadata. -Voir les outils » +Voir les outils » diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/outils.md --- a/wiki/outils.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/outils.md Wed Apr 16 14:59:23 2014 +0200 @@ -1,4 +1,22 @@ # L5.6 Outils de démonstration Cette page référence les démonstrateurs produit au sein de l'IRI dans le cadre du projet Periplus, notamment lors des ateliers étudiants de prototypages. +Le développement et la documentation de chaque module ont été réalisés par les étudiants de l'ECP dans le cadre de l'atelier [Design Metadata 2012](http://www.iri.centrepompidou.fr/ateliers/design-metadata-2012/?lang=fr_fr). -

Tapisserie

Le module Tapisserie permet d’afficher une fresque d’images issues d’un extrait vidéo, de la parcourir en « largeur » (avancer/reculer dans l’extrait vidéo) mais également en profondeur (zoom temporel).

View details »

Cartographie

Le module Cartographie implémente les algorithmes d'indexation et de classification du CEA et représente un jeu de données sous forme de cartographie.

View details »

Couleurs

Le module Couleurs est un utilitaire de gestion des couleurs à destination des autres modules.

View details »

Relations

Le module Relations est un utilitaire de gestion des relations objet-actions, référençant pour un objet donné les actions associées à un évènement.

View details »

Streamgraph

Le module Streamgraph représente un jeu de données sous la forme d'un streamgraph interactif.

View details »

Treemap

Le module Treemap représente un jeu de données sous la forme d'un treemap interactif.

View details »

Couple S+T

Ce module propose une visualisation corrélée d'un jeu de données en utilisant les deux précédents modules Streamgraph et Treemap.

View details »

\ No newline at end of file +## Utilitaires +Ces utilitaires ont été développés en amont des autres modules pour lesquels ils sont appliqués selon les besoins. +

Couleurs

Le module Couleurs est un utilitaire de gestion des couleurs à destination des autres modules.

View details »

Relations

Le module Relations est un utilitaire de gestion des relations objet-actions, référençant pour un objet donné les actions associées à un évènement.

View details »

+ + +## Expérimentations +Ces deux expérimentations prospectives n'ont pas fait l'objet de développements supplémentaires dans la réalisation du projet PERIPLUS, mais ont permis d'une part de tester les algorithmes du CEA, et d'explorer un scénario innovant de résumé vidéo interactif. +

Tapisserie

Le module Tapisserie permet d’afficher une fresque d’images issues d’un extrait vidéo, de la parcourir en « largeur » (avancer/reculer dans l’extrait vidéo) mais également en profondeur (zoom temporel).

View details »

Cartographie

Le module Cartographie implémente les algorithmes d'indexation et de classification du CEA et représente un jeu de données sous forme de cartographie.

View details »

+ + +## Visualisations +Ces trois modules implémentent pas à pas les principes retenus dans les spécifications de la plateforme Mediapart by Periplus (voir [prototype](prototype.md)). +

Streamgraph

Le module Streamgraph représente un jeu de données sous la forme d'un streamgraph interactif.

View details »

Treemap

Le module Treemap représente un jeu de données sous la forme d'un treemap interactif.

View details »

Couple S+T

Ce module propose une visualisation corrélée d'un jeu de données en utilisant les deux précédents modules Streamgraph et Treemap.

View details »

+ + +## Visualisation appliquée +Ce dernier module a été designé et prototypé en fin de projet et propose une visualisation éditoriale pertinente au regard de la structuration de l'information en _dossiers_ à Médiapart. Cette visualisation des _dossiers_ a été réalisée par Nicolas Morand, en stage Design à l'IRI. +

Les Dossiers de la rédaction

Ce module représente l'évolution du nombre d'articles par dossier dans le temps.

View details »

diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/prototype.md --- a/wiki/prototype.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/prototype.md Wed Apr 16 14:59:23 2014 +0200 @@ -11,3 +11,8 @@ + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/relations.md --- a/wiki/relations.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/relations.md Wed Apr 16 14:59:23 2014 +0200 @@ -5,4 +5,4 @@ On applique ici le principe d’observable. On enregistre dans un dictionnaire des objets jouant le rôle d’observables sur lesquels on peut enregistrer les actions associées aux événements. ## Module - \ No newline at end of file + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/streamgraph.md --- a/wiki/streamgraph.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/streamgraph.md Wed Apr 16 14:59:23 2014 +0200 @@ -6,4 +6,4 @@ Enfin, il est possible d’interagir avec le streamgraph grâce à quelques fonctions et événements prévus dans l’interface. On peut par exemple mettre en relief une couche survolée, placer le curseur sous la souris ou redimensionner le streamgraph. ## Module - \ No newline at end of file + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/tapisserie.md --- a/wiki/tapisserie.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/tapisserie.md Wed Apr 16 14:59:23 2014 +0200 @@ -14,4 +14,10 @@ Le dezoom permet de remonter au niveau supérieur et prend en compte les décalages effectués aux niveaux inférieurs. ## Module - \ No newline at end of file + + + \ No newline at end of file diff -r 69b81d5e1b33 -r f68ecaf5265e wiki/treemap.md --- a/wiki/treemap.md Tue Apr 15 17:47:43 2014 +0200 +++ b/wiki/treemap.md Wed Apr 16 14:59:23 2014 +0200 @@ -7,4 +7,4 @@ ## Module - \ No newline at end of file + \ No newline at end of file