ERG::flexstructureprint

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.

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.

<?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

    ?>

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 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.

.folder{
  display: flex;

}

.file{

}

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

WATER

ASTRO

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.