--- 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;
}
--- 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;
}
--- 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,
--- 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;
}
--- 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;
}
--- 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
};
--- 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;
}
Binary file toolkit/mediapart/mediapart10.swf has changed
--- 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
<iframe src="../toolkit/exemples/cartographie/cartographie.html" width="1140" height="900" frameborder="1" ></iframe>
+<script>
+ setInterval(function(){
+ $( "#md-left-column" ).hide();
+ },1000);
+</script>
\ No newline at end of file
--- 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
--- 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
-<iframe src="../toolkit/exemples/couleurs/couleurs.html" width="1140" height="500" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/couleurs/couleurs.html" width="848" height="500" frameborder="1" ></iframe>
\ No newline at end of file
--- 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
-<iframe src="../toolkit/exemples/couple/graph.html" width="1140" height="800" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/couple/graph.html" width="1140" height="800" frameborder="1" ></iframe>
+
+<script>
+ setInterval(function(){
+ $( "#md-left-column" ).hide();
+ },1000);
+</script>
\ No newline at end of file
--- /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
+<iframe src="../toolkit/mediapart/mediapart10.swf" width="1140" height="650" frameborder="0" ></iframe>
+
+
+
+<script>
+ setInterval(function(){
+ $( "#md-left-column" ).hide();
+ },1000);
+</script>
\ No newline at end of file
--- 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.
-<a class="btn btn-primary" href="http://www.iri.centrepompidou.fr/projets/periplus/" role="button">en savoir plus sur Periplus »</a>
+Cette page référence les livrables logiciels produit par l'IRI dans le cadre du projet Periplus. <a class="btn btn-sm btn-primary" href="http://www.iri.centrepompidou.fr/projets/periplus/" role="button">en savoir plus sur Periplus »</a>
## 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é.
-<a class="btn btn-primary" href="prototype.md" role="button">Voir la démo »</a>
+<a class="btn btn-sm btn-primary" href="prototype.md" role="button">Voir la démo »</a>
## 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.
-<a class="btn btn-primary" href="outils.md" role="button">Voir les outils »</a>
+<a class="btn btn-sm btn-primary" href="outils.md" role="button">Voir les outils »</a>
--- 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).
-<div class="container"><div class="row"><div class="col-md-3"><h3>Tapisserie</h3><p>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).</p><p><a class="btn btn-primary" href="tapisserie.md" role="button">View details »</a></p></div><div class="col-md-3"><h3>Cartographie</h3><p>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.</p><p><a class="btn btn-primary" href="cartographie.md" role="button">View details »</a></p></div><div class="col-md-3"><h3>Couleurs</h3><p>Le module Couleurs est un utilitaire de gestion des couleurs à destination des autres modules.</p><p><a class="btn btn-primary" href="couleurs.md" role="button">View details »</a></p></div><div class="col-md-3"><h3>Relations</h3><p>Le module Relations est un utilitaire de gestion des relations <em>objet-actions</em>, référençant pour un objet donné les actions associées à un évènement.</p><p><a class="btn btn-primary" href="relations.md" role="button">View details »</a></p></div></div><div class="row"><div class="col-md-3"><h3>Streamgraph</h3><p>Le module Streamgraph représente un jeu de données sous la forme d'un streamgraph interactif.</p><p><a class="btn btn-primary" href="streamgraph.md" role="button">View details »</a></p></div><div class="col-md-3"><h3>Treemap</h3><p>Le module Treemap représente un jeu de données sous la forme d'un treemap interactif.</p><p><a class="btn btn-primary" href="treemap.md" role="button">View details »</a></p></div><div class="col-md-3"><h3>Couple S+T</h3><p>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.</p><p><a class="btn btn-primary" href="couple.md" role="button">View details »</a></p></div></div></div>
\ 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.
+<div class="container"><div class="row"><div class="col-md-4"><h3>Couleurs</h3><p>Le module Couleurs est un utilitaire de gestion des couleurs à destination des autres modules.</p><p><a class="btn btn-sm btn-primary" href="couleurs.md" role="button">View details »</a></p></div><div class="col-md-4"><h3>Relations</h3><p>Le module Relations est un utilitaire de gestion des relations <em>objet-actions</em>, référençant pour un objet donné les actions associées à un évènement.</p><p><a class="btn btn-sm btn-primary" href="relations.md" role="button">View details »</a></p></div></div></div>
+
+
+## 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.
+<div class="container"><div class="row"><div class="col-md-4"><h3>Tapisserie</h3><p>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).</p><p><a class="btn btn-sm btn-primary" href="tapisserie.md" role="button">View details »</a></p></div><div class="col-md-4"><h3>Cartographie</h3><p>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.</p><p><a class="btn btn-sm btn-primary" href="cartographie.md" role="button">View details »</a></p></div></div></div>
+
+
+## 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)).
+<div class="container"><div class="row"><div class="col-md-4"><h3>Streamgraph</h3><p>Le module Streamgraph représente un jeu de données sous la forme d'un streamgraph interactif.</p><p><a class="btn btn-sm btn-primary" href="streamgraph.md" role="button">View details »</a></p></div><div class="col-md-4"><h3>Treemap</h3><p>Le module Treemap représente un jeu de données sous la forme d'un treemap interactif.</p><p><a class="btn btn-sm btn-primary" href="treemap.md" role="button">View details »</a></p></div><div class="col-md-4"><h3>Couple S+T</h3><p>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.</p><p><a class="btn btn-sm btn-primary" href="couple.md" role="button">View details »</a></p></div></div></div>
+
+
+## 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.
+<div class="container"><div class="row"><div class="col-md-4"><h3>Les <em>Dossiers</em> de la rédaction</h3><p>Ce module représente l'évolution du nombre d'articles par <em>dossier</em> dans le temps.</p><p><a class="btn btn-sm btn-primary" href="dossiers.md" role="button">View details »</a></p></div></div></div>
--- 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 @@
+<script>
+ setInterval(function(){
+ $( "#md-left-column" ).hide();
+ },1000);
+</script>
\ No newline at end of file
--- 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
-<iframe src="../toolkit/exemples/relations/relations.html" width="1140" height="500" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/relations/relations.html" width="848" height="500" frameborder="1" ></iframe>
\ No newline at end of file
--- 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
-<iframe src="../toolkit/exemples/streamgraph/streamgraph.html" width="1140" height="600" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/streamgraph/streamgraph.html" width="848" height="600" frameborder="1" ></iframe>
\ No newline at end of file
--- 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
-<iframe src="../toolkit/exemples/tapisserie/tapestry.html" width="1140" height="370" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/tapisserie/tapestry.html" width="1140" height="370" frameborder="1" ></iframe>
+
+<script>
+ setInterval(function(){
+ $( "#md-left-column" ).hide();
+ },1000);
+</script>
\ No newline at end of file
--- 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
-<iframe src="../toolkit/exemples/treemap/treemap.html" width="1140" height="600" frameborder="1" ></iframe>
\ No newline at end of file
+<iframe src="../toolkit/exemples/treemap/treemap.html" width="848" height="600" frameborder="1" ></iframe>
\ No newline at end of file