An Incomplete Radio to Print for Growth

Let's go

Ce toolkit comprend

Un fichier template.html fichier pour développer les templates des différentes parties
Un fichier index.php fichier de base pour les contenus de l’édition, qui réunira tous les templates
Un fichier css/style-print.css dans lequel écrire le css de l’édition collective
Un fichier css/style-perso.css dans lequel écrire le css pour chaque parte. Ce fichier est à renommer suivant le nom du groupe et à intégrer dans le html et le php
Un fichier css/style-template.css, css du template [ne pas écrire dedans]
Un fichier js/main.js pour ajouter des scripts js (hooks paged.js)
Des plugins paged.js (js > plugins)
Un dossier speech-to-text qui permet de faire la transcription automatique de la radio à l’édition
Un dossier com qui permet de faire la com de l'émission en web2print

Plugins utilisés

Paged.js 0.4.3
csstree.js
reload-in-place.js v1.3 de Nicolas Taffin et Sameh Chafik
createIndex.js de Julie Blanc
fullpage.js de Julie Blanc
margin-notes.js de Julie Blanc
toc.js de Julie Blanc et Julien Taquet

Licence

MIT License https://opensource.org/licenses/MIT Basé sur le book_avanced-interface par Julie Blanc. Inspiré par le PageTypeToPrint de Julien Bidoret

Documentation toolkit édition

Pour démarrer

Utilisez un serveur local php (MAMP ou Wamp ou Lamp)
Utilisez les navigateurs Chromium ou Chrome
Écrivez votre contenu dans le fichier index.php
Ajoutez votre css dans css/style-print.css
Si vous avez besoin d'ajouter des fonctions javascript, vous pouvez le faire dans js/main.js

Structure / Class

Chaque chapitre est une <section></section>, si l'on souhaite que le chapitre apparaisse dans le sommaire, il faut ajouter la class "chapter" à cette section
La class "page" permet de créer une page (saut de page après la page)
La class "page-right" permet de dire que cette page est toujours sur la page de droite la class "page-left" permet de dire que cette page est toujours sur la page de gauche
Les titres des chapitres doivent être des <h2> dans une <div> possédant la classe "chapter-title"

.pagebreak insertion d’un saut de page — Exemple : <div class="pagebreak"></div>

.blank-page ajout d’une page blanche — Exemple : <div class="blank-page"></div>

#table-of-contents génère un sommaire

.col-2 met du texte sur 2 colonnes

.col-3 met du texte sur 3 colonnes

Une div avec une classe .background-image qui contient une figure et une img, permet de mettre une image en pleine page. L’ img doit posséder une classe qui va indiquer si elle est rognée (.cover), déformée (.fill) ou garder son ration (.contain). Il est également possible de rajouter du texte par dessus et de le designer (voir exemple)

.full-page permet d'ajouter une image sur une page seule et que la page précédente se remplisse avec du texte sans laisser de blanc.

.grid sur un conteneur d’images permet de créer une grille d'image. Il est possible de gérer la taille des images dans la grille grâce à des classes à mettre sur figure.
Exemple de structure:

<div class="grid">
    <figure class="third">
       <img src="">
    </figure>
    <figure class="third">
       <img src="">
    </figure>
    <figure class="third">
       <img src="">
    </figure>
</div>

Classes pour les figures:

.offset2
.offset4
.offset6
.offset8
.third
.third.offset2 
.third.offset4
.third.offset6
.third.offset8
.half
.half.offset2
.half.offset4
.half.offset6
.twothird
.twothird.offset2
.twothird.offset4 
.threequarter
.threequarter.offset2
.full

Pour ajouter une note de bas de page : <span class="footnote">note ici</span>. Si vous voulez avec un compter de notes par chapitre, par exemple, vous pouvez ajouter counter-reset: footnote 0; dans .chapter{}

Pour ajouter une note de côté de page : <span class="margin-note">Ceci est une margin note</span>

Pour créer une page avec un index, utiliser l’id #book-index:

<div id="book-index" class="chapter">
   <h1>Index</h1>
</div>

Les mots à faire apparaître dans l'index doivent être taggués ainsi: <span class="book-index" data-book-index="permacomputing">Permacomputing</span>

Contenu

Il est possible d'utiliser PHP pour afficher automatiquement le contenu image ou texte d'un dossier. Le fichier "utils.php" contient une fonction getFileList($dir), permettant de lister tous les fichiers contenus dans un dossier.

Images

Pour afficher toutes les images dans un dossier:

<?php $dir = getFileList("nom du dossier");
<!-- permet de lister les fichiers par ordre alphabétique -->
array_multisort(array_column($dir, "name"), SORT_ASC, $dir );
foreach ($dir as $file):?>
       <?php if($file['type'] == 'image/jpeg'):?>
        <figure>
              <img src="<?php echo $file['name']?>">
        </figure>
    <?php endif;?>
<?php endforeach;?>

Textes

Pour lire le contenu d'un fichier texte:

<?php $text = file_get_contents('dossier/nomdufichier.txt');?>
<p><?php echo $text;?></p>

Pour afficher le contenu de tous les fichiers texte dans un dossier

<?php $dirText = getFileList("nom du dossier");
<!-- permet de lister les fichiers par ordre alphabétique -->
array_multisort(array_column($dirText, "name"), SORT_ASC, $dirText );
foreach ($dirText as $file):?>
       <?php if($file['type'] == 'text/plain'):?>
        <article class="text">
            <p><?php echo $text;?></p>
        </article>
    <?php endif;?>
<?php endforeach;?>

An Incomplete
Radio to Print
for Growth

Toolkit