{} - Contributions de l’utilisateur [fr]

ERG::flexstructureprint

2019-05-12T16:06:47Z

Dorian : /* Installation */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Thèmes CSS==

On a donc des boites imbriqués les unes dans les autres visuellement, agencé sur la page par Flexbox, et représentant la structure dossier-fichiers de la clé usb.
Ces boites peuvent toujours prendre l'apparence qu'on souhaite en changeant le code CSS de notre page.
Pour forcer une cohérence de présentation et refléter au maximum la structure pré-existante on se limite à seulement deux classes CSS: .folder et .files.

<syntaxhighlight lang="css">
.folder{
display: flex;

}

.file{

}

</syntaxhighlight>

J'ai ensuite décidé de créer plusieurs thèmes .CSS possibles pour ces deux classes, m'échappant de cette notion d'automatisme et devenant quelque chose de beaucoup plus sensible.Si le passage de l'arbre de dossier-fichier à une structure visuel bidimensionnel est direct, l'esthétique de cette structure est sujet à interprétation.

Ces thèmes sont à l'image des thèmes custom/amateurs des vieux sites web: des couleurs vives, s'inspirant de choses connues ou de palette naturelle mais simplifiées, essayant de provoquer une forte impression graphique tout en étant minimal dans l'utilisation de procédés.

Cela crée un jeu sur la façon dont on se représente nos données mentalement.
C'est à l'utilisateur_trice de la clé usb de choisir le thème parmis les possibilité pour l'impression de son poster final.
D'un côté la structure d'arborescence parle du comment l'utilisateur_trice agence ses données, s'organise et de son utilisation quotidienne de son objet clé usb.
De l'autre l’esthétique choisie se veut comme une pseudo-cosmogonie, un imaginaire, une astrologie, de comment cette utilisateur_trice se représente cette structure.

Exemples de thèmes:

BRICK

[[Fichier: Maxmax_brick_little.jpg]]

WATER

[[Fichier: Maxmax_water_little.jpg]]

ASTRO

[[Fichier: desktop_astro_little.jpg]]

==Suite du projet==

* Faire un total de 5,6 thèmes. Idées: forêt, papier, nuage, minimal ?

* Difficulté: certain éléments (comme la typo: 'pt' ou les éléments relatif à la typo: 'em') ne semble pas pouvoir être réduit en dessous d'une certaine taille... Comment s'assurer que le poster se met bien en page pour un A3? Peut-être utiliser du javascript qui re-scale l'entièreté du document?

* Rajouter un système d'indexation et de signature du poster dans les marges: titre du projet, nom de l'utilisateur_trice, date ?

* Faire l'installation/performance ou les gens vienne a une table avec leur clé usb et j'imprime le poster.

ERG::flexstructureprint

2019-05-12T16:01:35Z

Dorian : /* Thèmes CSS */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Thèmes CSS==

On a donc des boites imbriqués les unes dans les autres visuellement, agencé sur la page par Flexbox, et représentant la structure dossier-fichiers de la clé usb.
Ces boites peuvent toujours prendre l'apparence qu'on souhaite en changeant le code CSS de notre page.
Pour forcer une cohérence de présentation et refléter au maximum la structure pré-existante on se limite à seulement deux classes CSS: .folder et .files.

<syntaxhighlight lang="css">
.folder{
display: flex;

}

.file{

}

</syntaxhighlight>

J'ai ensuite décidé de créer plusieurs thèmes .CSS possibles pour ces deux classes, m'échappant de cette notion d'automatisme et devenant quelque chose de beaucoup plus sensible.Si le passage de l'arbre de dossier-fichier à une structure visuel bidimensionnel est direct, l'esthétique de cette structure est sujet à interprétation.

Ces thèmes sont à l'image des thèmes custom/amateurs des vieux sites web: des couleurs vives, s'inspirant de choses connues ou de palette naturelle mais simplifiées, essayant de provoquer une forte impression graphique tout en étant minimal dans l'utilisation de procédés.

Cela crée un jeu sur la façon dont on se représente nos données mentalement.
C'est à l'utilisateur_trice de la clé usb de choisir le thème parmis les possibilité pour l'impression de son poster final.
D'un côté la structure d'arborescence parle du comment l'utilisateur_trice agence ses données, s'organise et de son utilisation quotidienne de son objet clé usb.
De l'autre l’esthétique choisie se veut comme une pseudo-cosmogonie, un imaginaire, une astrologie, de comment cette utilisateur_trice se représente cette structure.

Exemples de thèmes:

BRICK

[[Fichier: Maxmax_brick_little.jpg]]

WATER

[[Fichier: Maxmax_water_little.jpg]]

ASTRO

[[Fichier: desktop_astro_little.jpg]]

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

Fichier:Desktop astro little.jpg

2019-05-12T16:01:27Z

Dorian :

ERG::flexstructureprint

2019-05-12T15:55:49Z

Dorian : /* Flex Structure Print */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Thèmes CSS==

On a donc des boites imbriqués les unes dans les autres visuellement, agencé sur la page par Flexbox, et représentant la structure dossier-fichiers de la clé usb.
Ces boites peuvent toujours prendre l'apparence qu'on souhaite en changeant le code CSS de notre page.
Pour forcer une cohérence de présentation et refléter au maximum la structure pré-existante on se limite à seulement deux classes CSS: .folder et .files.

<syntaxhighlight lang="css">
.folder{
display: flex;

}

.file{

}

</syntaxhighlight>

J'ai ensuite décidé de créer plusieurs thèmes .CSS possibles pour ces deux classes, m'échappant de cette notion d'automatisme et devenant quelque chose de beaucoup plus sensible.Si le passage de l'arbre de dossier-fichier à une structure visuel bidimensionnel est direct, l'esthétique de cette structure est sujet à interprétation.

Ces thèmes sont à l'image des thèmes custom/amateurs des vieux sites web: des couleurs vives, s'inspirant de choses connues ou de palette naturelle mais simplifiées, essayant de provoquer une forte impression graphique tout en étant minimal dans l'utilisation de procédés.

Cela crée un jeu sur la façon dont on se représente nos données mentalement.
C'est à l'utilisateur_trice de la clé usb de choisir le thème parmis les possibilité pour l'impression de son poster final.
D'un côté la structure d'arborescence parle du comment l'utilisateur_trice agence ses données, s'organise et de son utilisation quotidienne de son objet clé usb.
De l'autre l’esthétique choisie se veut comme une pseudo-cosmogonie, un imaginaire, une astrologie, de comment cette utilisateur_trice se représente cette structure.

Exemples de thèmes:

[[Fichier: Maxmax_brick_little.jpg]]
[[Fichier: Maxmax_water_little.jpg]]

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

Fichier:Maxmax water little.jpg

2019-05-12T15:55:44Z

Dorian :

Fichier:Maxmax brick little.jpg

2019-05-12T15:53:54Z

Dorian :

Fichier:Maxmax brick.jpg

2019-05-12T15:30:40Z

Dorian :

ERG::flexstructureprint

2019-05-12T15:29:03Z

Dorian : /* Design en CSS */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Design en CSS==

On a donc des boites imbriqués les unes dans les autres visuellement, agencé sur la page par Flexbox, et représentant la structure dossier-fichiers de la clé usb.
Ces boites peuvent toujours prendre l'apparence qu'on souhaite en changeant le code CSS de notre page.
Pour forcer une cohérence de présentation et refléter au maximum la structure pré-existante on se limite à seulement deux classes CSS: .folder et .files.

<syntaxhighlight lang="css">
.folder{
display: flex;

}

.file{

}

</syntaxhighlight>

J'ai ensuite décidé de créer plusieurs thèmes .CSS possibles pour ces deux classes, m'échappant de cette notion d'automatisme et devenant quelque chose de beaucoup plus sensible.Si le passage de l'arbre de dossier-fichier à une structure visuel bidimensionnel est direct, l'esthétique de cette structure est sujet à interprétation.

Ces thèmes sont à l'image des thèmes custom/amateurs des vieux sites web: des couleurs vives, s'inspirant de choses connues ou de palette naturelle mais simplifiées, essayant de provoquer une forte impression graphique tout en étant minimal dans l'utilisation de procédés.

Cela crée un jeu sur la façon dont on se représente nos données mentalement.
C'est à l'utilisateur_trice de la clé usb de choisir le thème parmis les possibilité pour l'impression de son poster final.
D'un côté la structure d'arborescence parle du comment l'utilisateur_trice agence ses données, s'organise et de son utilisation quotidienne de son objet clé usb.
De l'autre l’esthétique choisie se veut comme une pseudo-cosmogonie, un imaginaire, une astrologie, de comment cette utilisateur_trice se représente cette structure.

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::flexstructureprint

2019-05-12T15:10:07Z

Dorian : /* Design de l'impression */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Design en CSS==

On a donc des boites imbriqués les unes dans les autres visuellement, représentant la structure dossier-fichiers de la clé usb.
Ces boites peuvent toujours prendre l'apparence qu'on souhaite en changeant le code CSS de notre page.

Pour forcer une cohérence de présentation et refléter au maximum la structure pré-existante on se limite à seulement deux classes CSS: .folder et .files.

<

Le nom des fichier est utiliser

différent thèmes sont construit (fichier css différents) afin de jouer sur la façon dont on se représente nos données.
Entre la cosmogonie et les thèmes kitsch des vieux sites web

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::flexstructureprint

2019-05-12T15:06:48Z

Dorian : /* Flexbox */

=Flex Structure Print=

(Projet de Dorian Timmermans)

==Idée de départ==

L'idée de base est de créer un système qui permet l'impression sous la forme d'un poster de la structure de données d'une clé usb.
Plutôt que d'imprimer sur papier un contenu choisi de la clé usb, comme on ferait chez l'imprimeur, le système utilise tout ce qui n'est pas le contenu lui-même, c'est-à-dire la structure entre les dossiers et fichiers, et imprime cela.

Le but n'était pas de programmer un système complexe, mais de fonctionner de la manière la plus automatique, direct et instinctive, de façon à ce que le procédé parle de lui même au maximum.

==Arbre dossiers/fichiers en arbre HTML==

La structure de dossiers-fichiers en informatique forme une arborescence, ou les éléments sont lié par des relations parents - enfants.

[[Fichier:Arborescence.jpg|400px]]

On retrouve la même structure d'arborescence dans l'agencement des éléments d'une page html.
En effet, quand on construit une page html, on imbrique des éléments entre eux, créant des relations parent-enfant à l'aide de balises textes. Le navigateur interprète ces balises comme des éléments graphiques bidimensionnels contenu les un dans les autre, reflétant directement l'arborescence de la page. C'est donc l'outil parfait pour représenter ce type de structure visuellement, car c'est sur ce même principe qu'il fonctionne...

J'ai donc utilisé un script .php, qui parcours l'entièreté de la clé usb en input et ré-écris sa structure sous forme de balises à l'intérieur d'une page html.

<syntaxhighlight lang="php">

<?php

// on donne une dir en paramètre du dossier racine qu'on veut analyser
function getDirContents($dir, &$results = array()){

// crée un tableau associatif (key -> value) avec les dossiers et fichiers de la dir actuelle
$files = scandir($dir);

foreach($files as $key => $value){

// on reconstrui le chemin total (dir + value)
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);

// si le chemin n'est pas un dossier
if(!is_dir($path)) {
echo "<div class='file'><span>".$value."</span></div>"; // on crée un div 'file'
}

// si c'est un dossier
// (Note: le '.' et '..' represente la dir courante et parente)
else if($value != "." && $value != "..") {
echo "<div class='folder'>"; // on ouvre un div dossier
getDirContents($path, $foo, $results); // on rappelle la fonction
echo "</div>"; // on ferme le div dossier
}
}
}

echo "<div class='folder' id='root'>"; // on crée le root usb folder
getDirContents('E:/'); //on appelle la fonction sur le port usb
echo "</div>"; // on ferme le root usb folder

?>
</syntaxhighlight>

A ce stade on a un système qui crée une page html ayant le même arbre de données que la structure de la clé usb en input.

== Flexbox ==

En html et css, il existe de nombreuse possibilités différentes pour agencer les éléments sur la page: en définissant des marges, en magnétisant des éléments ou non, en changeant leurs formes de displays, etc.
En continuant sur cette idée d'automatisme, et je me suis intéressé au flexbox.

Flexbox est une option de display pour un élément html, spécifiquement conçue pour un contenus dynamique, dont on ne connait pas forcément la taille, ou pour s'adapter à une taille limite particulière.

Comme précisé sur ce [https://css-tricks.com/snippets/css/a-guide-to-flexbox/ guide d'utilisation des flexbox]:

''"The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").''

''The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."''

C'est donc optimal pour agencer les éléments html de la page générée, sous la forme d'un poster dont la taille est connue.
De plus, l'outil parle de nouveau de lui-même et m'évite de devoir faire moi-même de 'réels choix' quand à la représentation de cette structure.

==Design de l'impression==

l'apparence de cette page hmtl peut changer via le css
pour forcer une cohérence de présentation et refleter au maximum la structure pré-existante on se limite a deux classes css: .folder et .files.

Le nom des fichier est utiliser

différent thèmes sont construit (fichier css différents) afin de jouer sur la façon dont on se représente nos données.
Entre la cosmogonie et les thèmes kitsch des vieux sites web

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::flexstructureprint

2019-05-12T15:03:29Z

Dorian : /* Flexbox */

ERG::flexstructureprint

2019-05-12T15:03:00Z

Dorian : /* Flexbox */

ERG::flexstructureprint

2019-05-12T15:01:10Z

Dorian : /* Flexbox */

ERG::flexstructureprint

2019-05-12T14:54:22Z

Dorian : /* Arbre dossiers/fichiers en arbre HTML */

ERG::flexstructureprint

2019-05-12T14:52:45Z

Dorian : /* Arbre dossiers/fichiers en arbre HTML */

ERG::flexstructureprint

2019-05-12T14:52:14Z

Dorian : /* Flex Structure Print */

ERG::flexstructureprint

2019-05-12T14:46:35Z

Dorian : /* Flex Structure Print */

Fichier:Arborescence.jpg

2019-05-12T14:35:33Z

Dorian :

ERG::flexstructureprint

2019-05-12T14:33:41Z

Dorian :

ERG::flexstructureprint

2019-05-12T13:08:39Z

Dorian : /* Flex Structure Print */

=Flex Structure Print=

projet de Dorian Timmermans
idée: lien entre dossier-fichier clé usb et html structure.
Du coup permettre l'impression, non pas de contenu sur la clé usb, mais de tout ce qui n'est pas du contenu: la structure elle-même.

==Arbre dossiers/fichiers en arbre HTML==

php. recursion

mettre le code

== Flexbox ==

comment les agencers dans l'espace d'une page html ?

==Design de l'impression==

l'apparence de cette page hmtl peut changer via le css
pour forcer une cohérence de présentation et refleter au maximum la structure pré-existante on se limite a deux classes css: .folder et .files.

Le nom des fichier est utiliser

différent thèmes sont construit (fichier css différents) afin de jouer sur la façon dont on se représente nos données.
Entre la cosmogonie et les thèmes kitsch des vieux sites web

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::flexstructureprint

2019-05-12T13:07:56Z

Dorian : /* Flex Structure Print */

=Flex Structure Print=

idée: lien entre dossier-fichier clé usb et html structure.
Du coup permettre l'impression, non pas de contenu sur la clé usb, mais de tout ce qui n'est pas du contenu: la structure elle-même.

==Arbre dossiers/fichiers en arbre HTML==

php. recursion

mettre le code

== Flexbox ==

comment les agencers dans l'espace d'une page html ?

==Design de l'impression==

l'apparence de cette page hmtl peut changer via le css
pour forcer une cohérence de présentation et refleter au maximum la structure pré-existante on se limite a deux classes css: .folder et .files.

Le nom des fichier est utiliser

différent thèmes sont construit (fichier css différents) afin de jouer sur la façon dont on se représente nos données.
Entre la cosmogonie et les thèmes kitsch des vieux sites web

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::flexstructureprint

2019-05-12T13:06:33Z

Dorian : Page créée avec « =Flex Structure Print= idée: lien entre dossier-fichier clé usb et html structure. Du coup permettre l'impression, non pas de contenu sur la clé usb, mais de tout ce q... »

=Flex Structure Print=

idée: lien entre dossier-fichier clé usb et html structure.
Du coup permettre l'impression, non pas de contenu sur la clé usb, mais de tout ce qui n'est pas du contenu: la structure elle-même.

==Arbre dossiers/fichiers en arbre HTML==

php. recursion

mettre le code

==Design de l'impression==

l'apparence de cette page hmtl peut changer via le css
pour forcer une cohérence de présentation et refleter au maximum la structure pré-existante on se limite a deux classes css: .folder et .files.

Le nom des fichier est utiliser

différent thèmes sont construit (fichier css différents) afin de jouer sur la façon dont on se représente nos données.
Entre la cosmogonie et les thèmes kitsch des vieux sites web

==Installation==

être a une table, la personne donne sa clé et on rend l'impression.
Difficulté: forcé le css a imprimer le contenu en 1 seule page
difficultées technique: ...

ERG::Code-2018-1

2019-05-12T13:00:11Z

Dorian : /* Groupes de travail */

==Introduction==
Ce cours est destiné aux étudiants de BAC2.

==Groupes de travail==
* [[ERG::datagrab | Data grab]]: récupérer des données sur Internet
* [[ERG::layouttools | Layout tools]]: outils de mise en page
* [[ERG::livecoding | Live coding]]
* [[ERG::interactivenarration | Narration interactive]]
* [[ERG::physicalcomputing | Physical computing]]
* [[ERG::phpbrussels | PHP.Brussels]]
* [[ERG::flexstructureprint | Flex Structure Print]]

==Séances==
* 24/09/2018: intro langages + constitution des groupes de travail
* 01/10/2018: intro langages
<pre>
html
css
javascript

java
-> machine virtuelle
python
c
c++
ruby
c#
cobalt
assembleur
scala
php
asp

react.js
processing

WEB
html
css
javascript
java
python
ruby
php
asp

APPLICATION
java
python
c
c++
c#
cobalt
assembleur
scala

LIBRAIRIES
react.js -> librairie javascript
processing -> librairie java

-----------------------------------------------

PROGRAMMATION WEB CÔTÉ CLIENT
html
css
javascript

PROGRAMMATION WEB CÔTÉ SERVEUR
javascript -> avec node.js -> installer nodejs
php -> apache, php
python -> python
ruby -> apache?
asp -> apache

TYPES DE BASE DE DONNÉES
mysql -> sql
mongodb
mariadb -> sql
sqlite -> sql

-----------------------------------------------
BINAIRE

0 = 0
1 = 1
2 = 10
3 = 11
4 = 100
5 = 101
6 = 110
7 = 111
8 = 1000

32 16 8 4 2 1
1 0 0 0 0 0

1 chiffre binaire = bit
8 chiffres binaires = byte = un octet

----------------------
ASSEMBLEUR
utilisé pour les drivers

----------------------
C, ou le C++
langage de haut niveau

----------------------
javascript -> interprété par le navigateur
le navigateur -> codé en c, c++

-----------------------------

CLASSIFICATION SYNTAXE

html, xml = description, langage de balises
<boite>
<chocolat></chocolat>
</boite>

javascript = langage de script, algorithmique
orienté objet = on définit des objets qu'on utilise après
non typé

C++ = du C orienté objet, typé
JAVA = orienté objet, typé
PHP = orienté objet (ou pas), non typé
PYTHON = orienté objet (ou pas), non typé

</pre>

ERG::datagrab

2019-02-04T10:59:09Z

Dorian : /* Configuration Apache (04-03-19) */

=Data grab=

==Session du 24/09/2018==

===Objectif===
À partir de la page wikipédia [https://fr.wikipedia.org/wiki/Liste_des_%C3%A9coles_d%27art_en_Belgique Liste de écoles d'art en Belgique].
Sur base des écoles d'art à Bruxelles construire un générateur de page wiki d'école d'art.

===Étapes===
*Pré-télécharger les pages Wikipédia des écoles d'arts de Bruxelles que l'on veut utiliser comme matériel source. "Enregistrer sous", "Page web, complète" en HTML

*Faire un programme qui sur base des pages des écoles d'arts wikipédia fait une sorte de description aléatoire d'une école d'art bruxelloise. Le résultat finale serait sous la forme d'une page HTML, à chaque fois qu'on l'ouvre on a un faux wiki généré procéduralement. Pour ça on a besoin d'un script javascript dans la page HTML. Javascript permet de faire une requête Ajax pour utiliser un programme en Python, côté client. C'est ce programme qui va faire tout le boulot, il va chercher dans le dossier les pages HTML que l'on a téléchargées, les analyser pour trouver seulement le texte de description (pas les balises, ni les titres ou les listes par exemple) -> ce qui est entre les balises de paragraphes.
Ensuite le script java renvoie le résultat dans une page HTML avec une mise en page rapide.
À chaque fois que l'on ouvre le fichier HTML, une page aléatoire est générée à partir de la base de données que l'on a fourni au départ.

[[Fichier:1datagrab 24 09 18.png]]

*Sélectionner les blocs de textes de description qu'on veut utilser dans les pages HTML. Il faut une bibliothèque pour que Python puisse analyser (parser) le contenu de la page HTML -> [https://www.crummy.com/software/BeautifulSoup/bs4/doc/ Beautiful Soup]. Problème d'encodage des caractères : le script Beautiful Soup n'arrive pas à lire certains caractères UTF-8 qui sont présents dans la page Wikipédia... En fait le problème venait du terminal qui n'arrive pas à afficher certain caractères, pas de soucis si on les mets juste dans un variable ou si on écris dans un fichier .txt.

==Session du 08/09/2018==

===Partie Grab / Côté client ===
Plutôt que de pré-télécharger dans un dossier les pages .html qui servent d'input au script, on utilise [https://docs.python.org/2/library/urllib.html urllib] : une librairie python qui permet de faire des requêtes http. Cela permet que l'input soit juste une suite d'adresses URL de pages wikipédia. Le programme va les chercher sur le net et en télécharge le code html. Le script python qui "grab" les datas et les mets dans une variable (ou ici un fichier .txt) est terminé:

<syntaxhighlight lang="Python">
import urllib
from bs4 import BeautifulSoup

#list of urls we use as source material

urls=['https://en.wikipedia.org/wiki/Soup',
'https://en.wikipedia.org/wiki/Rain']

#we request each of those url in a 'htmls' list
htmls=[]
for url in urls:
html = urllib.urlopen(url)
htmls.append(html.read())

#we create a 'soup' html parser objet for every html page requested
soup=[]
for html in htmls:
soup.append(BeautifulSoup(html, 'html.parser'))

#we put all the text between the <p> markups of those html in a .txt file
text = []
with open('text.txt', 'w') as f:
for sp in soup:
for tag in sp.find_all('p'):
text.append(tag.get_text())
f.write(tag.get_text().encode("utf-8"))
</syntaxhighlight>

Note: le script python n'aurait pas pu être incorporer dans la partie javascript parce que javascript est côté serveur et ne permet donc pas de faire des requêtes pour récupérer les données de pages html sur le net, cette action est obligé de se trouver dans un script côté client.

== Sessions suivantes confondues ==

=== Communication entre l'algorithme de génération et la partie Grab ===

Pour que l'algorithme de génération de texte en javascript puisse fonctionner, on doit passer le texte récuperé en python à une variable du script javascript grâce à Ajax.

Installer [http://www.wampserver.com/en/ WAMP] qui permet d'avoir entre autre APACHE pour windows. Ce que fait APACHE c'est de créer un serveur en pointant une certaine direction de dossiers. Ensuite on peut mettre le script python sur ce serveur (donc dans le dossier spécifié).
Le protocole de communication fonctionne comme cela:
* le script javascript envoie une requête http à l'adresse du serveur créé via apache APACHE
* le script python est exécuter sur le serveur APACHE (rappel: un script python ne peut pas s’exécuter dans le navigateur) et peut renvoyer l'information dont on a besoin.
En fait cela fonctionne comme une requête http à une API, qui exécute tout les programmes qu'elle veut sur un serveur et les renvoi à l'application.
Voici un bon [http://httpd.apache.org/docs/current/howto/cgi.html tutoriel] la-dessus.

=== Algorithme de génération de texte===

Pour faire un mashup des différents textes extirpés des pages html, on va utiliser un algorithme typique de NLP (Natural Language Processing - le domaine de l'informatique qui s’intéresse à l'analyse et à la synthèse de texte). L'algorithme fonctionne comme ceci:

* Pour chaque groupe de n caractères qui se suivent (n-grammes) dans le texte source, associer le caractère qui suit. On a donc une database en 2 colonnes, avec à chaque fois d'un côté un n-grammes du texte source et de l'autre l'ensemble des caractères qui peuvent le suivre. Par exemple pour la phrase "Coucou c'est nous" et pour n=2, on a:
<syntaxhighlight lang="html5">
co -> {'u'}
ou -> {'c',' ','s'}
uc -> {'o'}
u_ -> {'c'}
c' -> {'e'}
...
</syntaxhighlight>

* Afin de générer un texte nouveau, l'algorithme commence par prendre un de ces n-grammes au hasard. On va ensuite regarder dans la database quels sont les possibilitées de lettre qui peuvent suivre ce n-gramme. On en choisis une aléatoirement et on la rajoute derrière le n-gramme choisis. On a alors une nouvelle suite de n caractères qui finisse notre texte et on répète l'opération sur ce nouveau n-gramme. En répétant ce processus probabiliste, on écris lettre par lettre un nouveau texte grâce à la database du texte source. Les phrases seront semblable à celle qu'on trouve dans le texte source mais l'aspect probabiliste permet de générer des nouvelles suites de mots et donc de mélanger et restructurer ce texte.

== Note finale ==

Ce qui à été fait:
* le script python qui récupère et parse les pages html pour fournir un long texte brut: le contenu entre balises paragraphes.
* le script javascript qui recrée aléatoirement et procéduralement un texte sur base d'un autre texte source.
Ce qu'il reste à faire:
* la communication entre les deux script via le serveur APACHE -> lire tutoriel
* la mise en page du résultat dans un page html avec une "esthétique wiki"

Note:
* le programme finale pourrait être mis sur le web et serveur comme outil pour faire des mashup de page wikipédia.
* on pourrait aller plus loin et imaginer un système qui ne récupère pas que le texte brut / descriptif des pages html sources mais aussi leur contenu graphique (mise ne page, images, etc) et faire des mashup plus globale de page html.

voici un exemple de bout de phrase généré en mélangeant les pages des écoles d'art en belgique.

<syntaxhighlight lang="html5">
L’école est importante avec une vingtaine de nationale supérieure des arts décoratifs par l'architecture de l'institutions se développement d'un orchestre composé de professeur et l’étudiant-es ont aussi l’occasion de se confronter à d’autres pratiques.</syntaxhighlight>

<syntaxhighlight lang="html5">
Organisé en vastes plateaux superposés, il abrite plusieurs orientations ou lors de l’usage de différentes sensibilités artistiques: Plusieurs associations contribuent à son dynamisme et à son rayonnement similaire, notamment des vernissages et des expositions à la suite des collaborations entre étudiants est compris entre 10 et 15 par classe.
</syntaxhighlight>

Un autre essaies avec les pages wikipédia Superman, Pluie et Champignon.

<syntaxhighlight lang="html5">
Le plomb protègent contenir des quantité d'ions ou de composés aromatique et crypté, mais également dit par litre d'eau annuel, de vastes « rideaux de pluie créent des nuages chauds et secs mais aussi son lot de nouvelle série censée raconter des aventure Comics.
</syntaxhighlight>

=== Configuration Apache (04-03-19)===

* Lancer Wamp64.
* Dans le fichier httpd.conf (configuration d'Apache), commenter la ligne Scriptalias (elle force à regarder dans le dossier cgi-bin dans l'instal dir de Wamp64 et empêche donc de faire fonctionner le script dans un dossier custom).
* Créer un sous-dossier 'cgi-bin' dans le dossier du projet dans lequel on va mettre le script python.
* Créer un virtual host sur Apache qui pointe vers ce dossier du projet.
* Note: toujours redémarrer les services Wamp64 après modification des virtual host ou de la configuration.
* Au début du script python préciser en première ligne l'endroit ou se trouve python: "#!C:/Python27/python.exe"
* A ce stade-ci si on ouvre l'adresse du script python dans le navigateur, il affiche juste le code source, pour dire au browser de l'exécuter on doit éditer le dossier de configuration de virtual host: httpd-vhost.conf. On rajoute une deuxième directory qui pointe vers le cgi-bin du projet avec des nouvelles options qui précise d’exécuter les fichier .py à l’intérieur quand on les ouvres dans le navigateur.

<syntaxhighlight lang="html5">
<Directory "d:/erg/projets/wiki/cgi-bin/">
Addhandler cgi-script .cgi .py
Options +Indexes +FollowSymLinks +ExecCGI
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</syntaxhighlight>

* Le script python ne peut pas faire passer de variable vu que c'est un langage différent, il va donc print quelque chose tout en précisant la syntaxe de ce print. On peut renvoyer de l'html ou du json ou du texte brut par exemple. Pour tester juste mettre:

<syntaxhighlight lang="html5">
print "Content-type: text\n"
print "Coucou"
</syntaxhighlight>

* Maintenant on doit ecrire une requête http AJAX dans le javascript https://blog.garstasio.com/you-dont-need-jquery/ajax/

ERG::datagrab

2019-02-04T10:54:47Z

Dorian : /* Data grab */

ERG::datagrab

2018-12-16T17:17:55Z

Dorian : /* Note finale */

ERG::datagrab

2018-12-16T17:11:23Z

Dorian : /* Data grab */

=Data grab=

==Session du 24/09/2018==

===Objectif===
À partir de la page wikipédia [https://fr.wikipedia.org/wiki/Liste_des_%C3%A9coles_d%27art_en_Belgique Liste de écoles d'art en Belgique].
Sur base des écoles d'art à Bruxelles construire un générateur de page wiki d'école d'art.

===Étapes===
*Pré-télécharger les pages Wikipédia des écoles d'arts de Bruxelles que l'on veut utiliser comme matériel source. "Enregistrer sous", "Page web, complète" en HTML

*Faire un programme qui sur base des pages des écoles d'arts wikipédia fait une sorte de description aléatoire d'une école d'art bruxelloise. Le résultat finale serait sous la forme d'une page HTML, à chaque fois qu'on l'ouvre on a un faux wiki généré procéduralement. Pour ça on a besoin d'un script javascript dans la page HTML. Javascript permet de faire une requête Ajax pour utiliser un programme en Python, côté client. C'est ce programme qui va faire tout le boulot, il va chercher dans le dossier les pages HTML que l'on a téléchargées, les analyser pour trouver seulement le texte de description (pas les balises, ni les titres ou les listes par exemple) -> ce qui est entre les balises de paragraphes.
Ensuite le script java renvoie le résultat dans une page HTML avec une mise en page rapide.
À chaque fois que l'on ouvre le fichier HTML, une page aléatoire est générée à partir de la base de données que l'on a fourni au départ.

[[Fichier:1datagrab 24 09 18.png]]

*Sélectionner les blocs de textes de description qu'on veut utilser dans les pages HTML. Il faut une bibliothèque pour que Python puisse analyser (parser) le contenu de la page HTML -> [https://www.crummy.com/software/BeautifulSoup/bs4/doc/ Beautiful Soup]. Problème d'encodage des caractères : le script Beautiful Soup n'arrive pas à lire certains caractères UTF-8 qui sont présents dans la page Wikipédia... En fait le problème venait du terminal qui n'arrive pas à afficher certain caractères, pas de soucis si on les mets juste dans un variable ou si on écris dans un fichier .txt.

==Session du 08/09/2018==

===Partie Grab / Côté client ===
Plutôt que de pré-télécharger dans un dossier les pages .html qui servent d'input au script, on utilise [https://docs.python.org/2/library/urllib.html urllib] : une librairie python qui permet de faire des requêtes http. Cela permet que l'input soit juste une suite d'adresses URL de pages wikipédia. Le programme va les chercher sur le net et en télécharge le code html. Le script python qui "grab" les datas et les mets dans une variable (ou ici un fichier .txt) est terminé:

<syntaxhighlight lang="Python">
import urllib
from bs4 import BeautifulSoup

#list of urls we use as source material

urls=['https://en.wikipedia.org/wiki/Soup',
'https://en.wikipedia.org/wiki/Rain']

#we request each of those url in a 'htmls' list
htmls=[]
for url in urls:
html = urllib.urlopen(url)
htmls.append(html.read())

#we create a 'soup' html parser objet for every html page requested
soup=[]
for html in htmls:
soup.append(BeautifulSoup(html, 'html.parser'))

#we put all the text between the <p> markups of those html in a .txt file
text = []
with open('text.txt', 'w') as f:
for sp in soup:
for tag in sp.find_all('p'):
text.append(tag.get_text())
f.write(tag.get_text().encode("utf-8"))
</syntaxhighlight>

Note: le script python n'aurait pas pu être incorporer dans la partie javascript parce que javascript est côté serveur et ne permet donc pas de faire des requêtes pour récupérer les données de pages html sur le net, cette action est obligé de se trouver dans un script côté client.

== Sessions suivantes confondues ==

=== Communication entre l'algorithme de génération et la partie Grab ===

Pour que l'algorithme de génération de texte en javascript puisse fonctionner, on doit passer le texte récuperé en python à une variable du script javascript grâce à Ajax.

Installer [http://www.wampserver.com/en/ WAMP] qui permet d'avoir entre autre APACHE pour windows. Ce que fait APACHE c'est de créer un serveur en pointant une certaine direction de dossiers. Ensuite on peut mettre le script python sur ce serveur (donc dans le dossier spécifié).
Le protocole de communication fonctionne comme cela:
* le script javascript envoie une requête http à l'adresse du serveur créé via apache APACHE
* le script python est exécuter sur le serveur APACHE (rappel: un script python ne peut pas s’exécuter dans le navigateur) et peut renvoyer l'information dont on a besoin.
En fait cela fonctionne comme une requête http à une API, qui exécute tout les programmes qu'elle veut sur un serveur et les renvoi à l'application.
Voici un bon [http://httpd.apache.org/docs/current/howto/cgi.html tutoriel] la-dessus.

=== Algorithme de génération de texte===

Pour faire un mashup des différents textes extirpés des pages html, on va utiliser un algorithme typique de NLP (Natural Language Processing - le domaine de l'informatique qui s’intéresse à l'analyse et à la synthèse de texte). L'algorithme fonctionne comme ceci:

* Pour chaque groupe de n caractères qui se suivent (n-grammes) dans le texte source, associer le caractère qui suit. On a donc une database en 2 colonnes, avec à chaque fois d'un côté un n-grammes du texte source et de l'autre l'ensemble des caractères qui peuvent le suivre. Par exemple pour la phrase "Coucou c'est nous" et pour n=2, on a:
<syntaxhighlight lang="html5">
co -> {'u'}
ou -> {'c',' ','s'}
uc -> {'o'}
u_ -> {'c'}
c' -> {'e'}
...
</syntaxhighlight>

* Afin de générer un texte nouveau, l'algorithme commence par prendre un de ces n-grammes au hasard. On va ensuite regarder dans la database quels sont les possibilitées de lettre qui peuvent suivre ce n-gramme. On en choisis une aléatoirement et on la rajoute derrière le n-gramme choisis. On a alors une nouvelle suite de n caractères qui finisse notre texte et on répète l'opération sur ce nouveau n-gramme. En répétant ce processus probabiliste, on écris lettre par lettre un nouveau texte grâce à la database du texte source. Les phrases seront semblable à celle qu'on trouve dans le texte source mais l'aspect probabiliste permet de générer des nouvelles suites de mots et donc de mélanger et restructurer ce texte.

== Note finale ==

Ce qui à été fait:
* le script python qui récupère et parse les pages html pour fournir un long texte brut: le contenu entre balises paragraphes.
* le script javascript qui recrée aléatoirement et procéduralement un texte sur base d'un autre texte source.
Ce qu'il reste à faire:
* la communication entre les deux script via le serveur APACHE -> lire tutoriel
* la mise en page du résultat dans un page html avec une "esthétique wiki"

Note:
* le programme finale pourrait être mis sur le web et serveur comme outil pour faire des mashup de page wikipédia.
* on pourrait aller plus loin et imaginer un système qui ne récupère pas que le texte brut / descriptif des pages html sources mais aussi leur contenu graphique (mise ne page, images, etc) et faire des mashup plus globale de page html.

voici un exemple de bout de phrase généré en mélangeant les pages wikipédia Superman, Pluie et Champignon.
<syntaxhighlight lang="html5">
Le plomb protègent contenir des quantité d'ions ou de composés aromatique et crypté, mais également dit par litre d'eau annuel, de vastes « rideaux de pluie créent des nuages chauds et secs mais aussi son lot de nouvelle série censée raconter des aventure Comics.
</syntaxhighlight>

ERG::datagrab

2018-12-16T17:09:49Z

Dorian : /* Note finale */

=Data grab=

==Session du 24/09/2018==

===Objectif===
À partir de la page wikipédia [https://fr.wikipedia.org/wiki/Liste_des_%C3%A9coles_d%27art_en_Belgique Liste de écoles d'art en Belgique].
Sur base des écoles d'art à Bruxelles construire un générateur de page wiki d'école d'art.

===Étapes===
*Pré-télécharger les pages Wikipédia des écoles d'arts de Bruxelles que l'on veut utiliser comme matériel source. "Enregistrer sous", "Page web, complète" en HTML

*Faire un programme qui sur base des pages des écoles d'arts wikipédia fait une sorte de description aléatoire d'une école d'art bruxelloise. Le résultat finale serait sous la forme d'une page HTML, à chaque fois qu'on l'ouvre on a un faux wiki généré procéduralement. Pour ça on a besoin d'un script javascript dans la page HTML. Javascript permet de faire une requête Ajax pour utiliser un programme en Python, côté client. C'est ce programme qui va faire tout le boulot, il va chercher dans le dossier les pages HTML que l'on a téléchargées, les analyser pour trouver seulement le texte de description (pas les balises, ni les titres ou les listes par exemple) -> ce qui est entre les balises de paragraphes.
Ensuite le script java renvoie le résultat dans une page HTML avec une mise en page rapide.
À chaque fois que l'on ouvre le fichier HTML, une page aléatoire est générée à partir de la base de données que l'on a fourni au départ.

[[Fichier:1datagrab 24 09 18.png]]

*Sélectionner les blocs de textes de description qu'on veut utilser dans les pages HTML. Il faut une bibliothèque pour que Python puisse analyser (parser) le contenu de la page HTML -> [https://www.crummy.com/software/BeautifulSoup/bs4/doc/ Beautiful Soup]. Problème d'encodage des caractères : le script Beautiful Soup n'arrive pas à lire certains caractères UTF-8 qui sont présents dans la page Wikipédia... En fait le problème venait du terminal qui n'arrive pas à afficher certain caractères, pas de soucis si on les mets juste dans un variable ou si on écris dans un fichier .txt.

==Session du 08/09/2018==

===Partie Grab / Côté client ===
Plutôt que de pré-télécharger dans un dossier les pages .html qui servent d'input au script, on utilise [https://docs.python.org/2/library/urllib.html urllib] : une librairie python qui permet de faire des requêtes http. Cela permet que l'input soit juste une suite d'adresses URL de pages wikipédia. Le programme va les chercher sur le net et en télécharge le code html. Le script python qui "grab" les datas et les mets dans une variable (ou ici un fichier .txt) est terminé:

<syntaxhighlight lang="Python">
import urllib
from bs4 import BeautifulSoup

#list of urls we use as source material

urls=['https://en.wikipedia.org/wiki/Soup',
'https://en.wikipedia.org/wiki/Rain']

#we request each of those url in a 'htmls' list
htmls=[]
for url in urls:
html = urllib.urlopen(url)
htmls.append(html.read())

#we create a 'soup' html parser objet for every html page requested
soup=[]
for html in htmls:
soup.append(BeautifulSoup(html, 'html.parser'))

#we put all the text between the <p> markups of those html in a .txt file
text = []
with open('text.txt', 'w') as f:
for sp in soup:
for tag in sp.find_all('p'):
text.append(tag.get_text())
f.write(tag.get_text().encode("utf-8"))
</syntaxhighlight>

Note: le script python n'aurait pas pu être incorporer dans la partie javascript parce que javascript est côté serveur et ne permet donc pas de faire des requêtes pour récupérer les données de pages html sur le net, cette action est obligé de se trouver dans un script côté client.

== Sessions suivantes confondues ==

=== Communication entre l'algorithme de génération et la partie Grab ===

Pour que l'algorithme de génération de texte en javascript puisse fonctionner, on doit passer le texte récuperé en python à une variable du script javascript grâce à Ajax.

Installer [http://www.wampserver.com/en/ WAMP] qui permet d'avoir entre autre APACHE pour windows. Ce que fait APACHE c'est de créer un serveur en pointant une certaine direction de dossiers. Ensuite on peut mettre le script python sur ce serveur (donc dans le dossier spécifié).
Le protocole de communication fonctionne comme cela:
* le script javascript envoie une requête http à l'adresse du serveur créé via apache APACHE
* le script python est exécuter sur le serveur APACHE (rappel: un script python ne peut pas s’exécuter dans le navigateur) et peut renvoyer l'information dont on a besoin.
En fait cela fonctionne comme une requête http à une API, qui exécute tout les programmes qu'elle veut sur un serveur et les renvoi à l'application.
Voici un bon [http://httpd.apache.org/docs/current/howto/cgi.html tutoriel] la-dessus.

=== Algorithme de génération de texte===

Pour faire un mashup des différents textes extirpés des pages html, on va utiliser un algorithme typique de NLP (Natural Language Processing - le domaine de l'informatique qui s’intéresse à l'analyse et à la synthèse de texte). L'algorithme fonctionne comme ceci:

* Pour chaque groupe de n caractères qui se suivent (n-grammes) dans le texte source, associer le caractère qui suit. On a donc une database en 2 colonnes, avec à chaque fois d'un côté un n-grammes du texte source et de l'autre l'ensemble des caractères qui peuvent le suivre. Par exemple pour la phrase "Coucou c'est nous" et pour n=2, on a:
<syntaxhighlight lang="html5">
co -> {'u'}
ou -> {'c',' ','s'}
uc -> {'o'}
u_ -> {'c'}
c' -> {'e'}
...
</syntaxhighlight>

* Afin de générer un texte nouveau, l'algorithme commence par prendre un de ces n-grammes au hasard. On va ensuite regarder dans la database quels sont les possibilitées de lettre qui peuvent suivre ce n-gramme. On en choisis une aléatoirement et on la rajoute derrière le n-gramme choisis. On a alors une nouvelle suite de n caractères qui finisse notre texte et on répète l'opération sur ce nouveau n-gramme. En répétant ce processus probabiliste, on écris lettre par lettre un nouveau texte grâce à la database du texte source. Les phrases seront semblable à celle qu'on trouve dans le texte source mais l'aspect probabiliste permet de générer des nouvelles suites de mots et donc de mélanger et restructurer ce texte.

== Note finale ==

Ce qui à été fait:
* le script python qui récupère et parse les pages html pour fournir un long texte brut: le contenu entre balises paragraphes.
* le script javascript qui recrée aléatoirement et procéduralement un texte sur base d'un autre texte source.
Ce qu'il reste à faire:
* la communication entre les deux script via le serveur APACHE -> lire tutoriel
* la mise en page du résultat dans un page html avec une "esthétique wiki"

Note:
* le programme finale pourrait être mis sur le web et serveur comme outil pour faire des mashup de page wikipédia.
* on pourrait aller plus loin et imaginer un système qui ne récupère pas que le texte brut / descriptif des pages html sources mais aussi leur contenu graphique (mise ne page, images, etc) et faire des mashup plus globale de page html.

voici un exemple de bout de phrase généré en mélangeant les pages wikipédia Superman, Pluie et Champignon.

<syntaxhighlight lang="html">
Le plomb protègent contenir des quantité d'ions ou de composés aromatique et crypté, mais également dit par litre d'eau annuel, de vastes « rideaux de pluie créent des nuages chauds et secs mais aussi son lot de nouvelle série censée raconter des aventure Comics.
</syntaxhighlight>

ERG::datagrab

2018-12-16T17:08:41Z

Dorian : /* Data grab */

=Data grab=

==Session du 24/09/2018==

===Objectif===
À partir de la page wikipédia [https://fr.wikipedia.org/wiki/Liste_des_%C3%A9coles_d%27art_en_Belgique Liste de écoles d'art en Belgique].
Sur base des écoles d'art à Bruxelles construire un générateur de page wiki d'école d'art.

===Étapes===
*Pré-télécharger les pages Wikipédia des écoles d'arts de Bruxelles que l'on veut utiliser comme matériel source. "Enregistrer sous", "Page web, complète" en HTML

*Faire un programme qui sur base des pages des écoles d'arts wikipédia fait une sorte de description aléatoire d'une école d'art bruxelloise. Le résultat finale serait sous la forme d'une page HTML, à chaque fois qu'on l'ouvre on a un faux wiki généré procéduralement. Pour ça on a besoin d'un script javascript dans la page HTML. Javascript permet de faire une requête Ajax pour utiliser un programme en Python, côté client. C'est ce programme qui va faire tout le boulot, il va chercher dans le dossier les pages HTML que l'on a téléchargées, les analyser pour trouver seulement le texte de description (pas les balises, ni les titres ou les listes par exemple) -> ce qui est entre les balises de paragraphes.
Ensuite le script java renvoie le résultat dans une page HTML avec une mise en page rapide.
À chaque fois que l'on ouvre le fichier HTML, une page aléatoire est générée à partir de la base de données que l'on a fourni au départ.

[[Fichier:1datagrab 24 09 18.png]]

*Sélectionner les blocs de textes de description qu'on veut utilser dans les pages HTML. Il faut une bibliothèque pour que Python puisse analyser (parser) le contenu de la page HTML -> [https://www.crummy.com/software/BeautifulSoup/bs4/doc/ Beautiful Soup]. Problème d'encodage des caractères : le script Beautiful Soup n'arrive pas à lire certains caractères UTF-8 qui sont présents dans la page Wikipédia... En fait le problème venait du terminal qui n'arrive pas à afficher certain caractères, pas de soucis si on les mets juste dans un variable ou si on écris dans un fichier .txt.

==Session du 08/09/2018==

===Partie Grab / Côté client ===
Plutôt que de pré-télécharger dans un dossier les pages .html qui servent d'input au script, on utilise [https://docs.python.org/2/library/urllib.html urllib] : une librairie python qui permet de faire des requêtes http. Cela permet que l'input soit juste une suite d'adresses URL de pages wikipédia. Le programme va les chercher sur le net et en télécharge le code html. Le script python qui "grab" les datas et les mets dans une variable (ou ici un fichier .txt) est terminé:

<syntaxhighlight lang="Python">
import urllib
from bs4 import BeautifulSoup

#list of urls we use as source material

urls=['https://en.wikipedia.org/wiki/Soup',
'https://en.wikipedia.org/wiki/Rain']

#we request each of those url in a 'htmls' list
htmls=[]
for url in urls:
html = urllib.urlopen(url)
htmls.append(html.read())

#we create a 'soup' html parser objet for every html page requested
soup=[]
for html in htmls:
soup.append(BeautifulSoup(html, 'html.parser'))

#we put all the text between the <p> markups of those html in a .txt file
text = []
with open('text.txt', 'w') as f:
for sp in soup:
for tag in sp.find_all('p'):
text.append(tag.get_text())
f.write(tag.get_text().encode("utf-8"))
</syntaxhighlight>

Note: le script python n'aurait pas pu être incorporer dans la partie javascript parce que javascript est côté serveur et ne permet donc pas de faire des requêtes pour récupérer les données de pages html sur le net, cette action est obligé de se trouver dans un script côté client.

== Sessions suivantes confondues ==

=== Communication entre l'algorithme de génération et la partie Grab ===

Pour que l'algorithme de génération de texte en javascript puisse fonctionner, on doit passer le texte récuperé en python à une variable du script javascript grâce à Ajax.

Installer [http://www.wampserver.com/en/ WAMP] qui permet d'avoir entre autre APACHE pour windows. Ce que fait APACHE c'est de créer un serveur en pointant une certaine direction de dossiers. Ensuite on peut mettre le script python sur ce serveur (donc dans le dossier spécifié).
Le protocole de communication fonctionne comme cela:
* le script javascript envoie une requête http à l'adresse du serveur créé via apache APACHE
* le script python est exécuter sur le serveur APACHE (rappel: un script python ne peut pas s’exécuter dans le navigateur) et peut renvoyer l'information dont on a besoin.
En fait cela fonctionne comme une requête http à une API, qui exécute tout les programmes qu'elle veut sur un serveur et les renvoi à l'application.
Voici un bon [http://httpd.apache.org/docs/current/howto/cgi.html tutoriel] la-dessus.

=== Algorithme de génération de texte===

Pour faire un mashup des différents textes extirpés des pages html, on va utiliser un algorithme typique de NLP (Natural Language Processing - le domaine de l'informatique qui s’intéresse à l'analyse et à la synthèse de texte). L'algorithme fonctionne comme ceci:

* Pour chaque groupe de n caractères qui se suivent (n-grammes) dans le texte source, associer le caractère qui suit. On a donc une database en 2 colonnes, avec à chaque fois d'un côté un n-grammes du texte source et de l'autre l'ensemble des caractères qui peuvent le suivre. Par exemple pour la phrase "Coucou c'est nous" et pour n=2, on a:
<syntaxhighlight lang="html5">
co -> {'u'}
ou -> {'c',' ','s'}
uc -> {'o'}
u_ -> {'c'}
c' -> {'e'}
...
</syntaxhighlight>

* Afin de générer un texte nouveau, l'algorithme commence par prendre un de ces n-grammes au hasard. On va ensuite regarder dans la database quels sont les possibilitées de lettre qui peuvent suivre ce n-gramme. On en choisis une aléatoirement et on la rajoute derrière le n-gramme choisis. On a alors une nouvelle suite de n caractères qui finisse notre texte et on répète l'opération sur ce nouveau n-gramme. En répétant ce processus probabiliste, on écris lettre par lettre un nouveau texte grâce à la database du texte source. Les phrases seront semblable à celle qu'on trouve dans le texte source mais l'aspect probabiliste permet de générer des nouvelles suites de mots et donc de mélanger et restructurer ce texte.

== Note finale ==

Ce qui à été fait:
* le script python qui récupère et parse les pages html pour fournir un long texte brut: le contenu entre balises paragraphes.
* le script javascript qui recrée aléatoirement et procéduralement un texte sur base d'un autre texte source.
Ce qu'il reste à faire:
* la communication entre les deux script via le serveur APACHE -> lire tutoriel
* la mise en page du résultat dans un page html avec une "esthétique wiki"

Note:
* le programme finale pourrait être mis sur le web et serveur comme outil pour faire des mashup de page wikipédia.
* on pourrait aller plus loin et imaginer un système qui ne récupère pas que le texte brut / descriptif des pages html sources mais aussi leur contenu graphique (mise ne page, images, etc) et faire des mashup plus globale de page html.

voici un exemple de bout de phrase généré en mélangeant les pages wikipédia Superman, Pluie et Champignon.

<syntaxhighlight>
Le plomb protègent contenir des quantité d'ions ou de composés aromatique et crypté, mais également dit par litre d'eau annuel, de vastes « rideaux de pluie créent des nuages chauds et secs mais aussi son lot de nouvelle série censée raconter des aventure Comics.
</syntaxhighlight>

ERG::datagrab

2018-12-16T17:00:34Z

Dorian : /* Note finale */

ERG::datagrab

2018-12-16T16:59:12Z

Dorian : /* Note finale */

ERG::datagrab

2018-12-16T16:58:37Z

Dorian : /* Communication entre l'algorithme de génération et la partie Grab */

ERG::datagrab

2018-12-16T16:58:14Z

Dorian : /* Communication entre l'algorithme de génération et la partie Grab */

ERG::datagrab

2018-12-16T16:57:51Z

Dorian : /* Communication entre l'algorithme de génération et la partie Grab */

ERG::datagrab

2018-12-16T16:57:32Z

Dorian : /* Sessions suivantes confondues */

ERG::datagrab

2018-12-16T16:55:46Z

Dorian : /* Partie Grab / Côté client */

ERG::datagrab

2018-12-16T16:55:20Z

Dorian : /* Session du 24/09/2018 */

ERG::datagrab

2018-12-16T16:54:39Z

Dorian : /* Étapes */

ERG::datagrab

2018-12-16T16:53:24Z

Dorian : /* Étapes */

ERG::datagrab

2018-12-16T16:52:57Z

Dorian : /* Data grab */

ERG::datagrab

2018-12-16T16:50:37Z

Dorian : /* Data grab */

ERG::datagrab

2018-10-08T09:33:44Z

Dorian : /* Fonctionnement de l'algorithme */

ERG::datagrab

2018-10-08T09:32:19Z

Dorian : /* Fonctionnement de l'algorithme */

ERG::datagrab

2018-10-08T09:23:14Z

Dorian : /* Fonctionnement de l'algorithme */

ERG::datagrab

2018-10-08T09:18:30Z

Dorian : /* Communication entre l'algorithme et la partie Grab */

ERG::datagrab

2018-10-08T08:24:43Z

Dorian : /* Algorythme de génération de texte */

ERG::datagrab

2018-10-08T08:18:11Z

Dorian : /* Partie "Grab" / "Côté client" */

ERG::datagrab

2018-10-08T08:17:30Z

Dorian : /* Algorythme de génération de texte */

ERG::datagrab

2018-10-08T08:16:51Z

Dorian : /* Algorythme de génération de texte */

ERG::datagrab

2018-10-08T08:15:13Z

Dorian : /* Partie "Grab" */