Ce site vise à présenter mon curriculum vitæ de manière plus chaleureuse et plus développée. L'ayant moi-même réalisé, il a aussi pour but de montrer une partie de mes compétences.

J'ai choisi pour plusieurs raisons le CMS DokuWiki, principalement pensé pour publier des wikis. Déjà je le connais bien car je l'utilise au quotidien comme “Carnet de notes” personnel où j'enregistre et organise mes connaissances nécessaires au quotidien et pour mon travail.

Ensuite, ce CMS est un logiciel fonctionnel activement développé depuis 12 ans par des centaines de personnes. Sa communauté et vivante, il bénéficie donc de nombreux plugins et templates. C'est un logiciel léger et de bonne qualité qui respecte très bien les standards du Web, ce qui favorise un bon référencement.

DokuWiki utilise une syntaxe légère facile d'utilisation et très pratique pour bien rédiger, bien organiser sa pensée et séparer le fond de la forme. Cette syntaxe permet aussi une bonne portabilité des textes entre wikis, un copier-coller du texte source et c'est réglé.

De base, lors de la saisie des textes il y a un enregistrement automatique pour éviter la perte de contenu durant l'édition. Il dispose aussi d'un puissant analyseur de différences entre les révisions de pages, ce qui permet de retracer l'évolution d'un texte et gérer les différentes versions.

Ce CMS est aussi très pratique car aucune base de données n'est nécessaire, il utilise de simples fichiers textes ce qui permet facilement de le sauvegarder et de le déplacer d'un hébergement à l'autre. Il est suffisamment puissant pour un petit site web. Écrit en PHP il peut être hébergé presque partout et s'installe facilement.

Enfin, DokuWiki est bien sûr un CMS libre sous licence GPL-2.0

J'ai choisi le template Twenty Fifteen qui est une adaptation pour DokuWiki d'un gabarit initialement développé pour Wordpress. Il est élégant et adaptatif (responsive design), je l'ai aussi choisi pour sa douceur.

Twenty Fifteen met bien en valeur le texte, mes qualités professionnelles étant principalement éditoriales cela correspond à ce que je souhaite exprimer.

La police de caractère utilisée est Noto. C'est une très bonne police développée en partenariat par Google et Monotype Imaging et publiée sous la licence libre Apache. Son principal objectif est de couvrir tous les caractères Unicode pour permettre l'affichage sur écran de toutes les langues.

Pour rendre ce gabarit un peu moins austère et plus adapté à la situation il nécessite cependant quelques ajustements que je présente ci-dessous.

Pour me présenter et ajouter une touche de convivialité, j'ai ajouté une photo personnelle dans l'en-tête du site. Je l'ai aussi utilisée comme favicon.

Je suis parti d'une photo prise par un ami :

En utilisant Gimp je l'ai légèrement éclaircie pour qu'elle soit plus lisible en particulier en tout petit format.

Puis je l'ai découpée en cercle avec fond transparent et converti en PNG. Cela permet de reprendre le code en vigueur de l'image profile dans un cercle, d'ajouter de la rondeur à la page web et d'augmenter sa dimension accueillante.

Pour que l'image apparaisse correctement, dans le fichier lib/tpl/twentyfifteen/main.php je remplace :

<header class="site-header">
    <div class="site-branding">
        <?php
            $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false);
        ?>
        <?php if (file_exists(DOKU_INC.$logo)) { ?>
        <a class="site-logo" href="<?php echo wl(); ?>" title="<?php echo $conf['title']; ?>" rel="home" accesskey="h" title="[H]">
            <img src="<?php echo $logo; ?>" alt=""/>
        </a>
        <?php } ?>
        <h1 class="site-title">
            <a href="<?php echo wl(); ?>" rel="home" accesskey="h" title="[H]"><?php echo $conf['title']; ?></a>
        </h1>
        <?php if ($conf['tagline']): ?><p class="site-description"><?php echo $conf['tagline'] ?></p><?php endif ?>
        <button class="secondary-toggle">Menu</button>
    </div>
</header>

Par :

<header class="site-header">
    <div class="site-branding">
        <h1><?php
             // get logo either out of the template images folder or data/media folder
             $logoSize = array();
             $logo = tpl_getMediaFile(array(':wiki:logo.png', ':logo.png', 'images/logo.png'), false, $logoSize);
 
             // display logo and wiki title in a link to the home page
             tpl_link(
             wl(),
             '<img src="'.$logo.'" '.$logoSize[3].' alt="" /> <span>'.$conf['title'].'</span>',
             'accesskey="h" title="[H]"'
             ); ?>      
        </h1>
        <?php if ($conf['tagline']): ?><p class="claim"><?php echo $conf['tagline']; ?></p><?php endif ?>
        <button class="secondary-toggle">Menu</button>
     </div>
</header>

La table des matières (toc) déforme trop le corps de l'article tout en étant trop présente elle n'est pas assez utilisable.

Dans un premier temps je place la table des matières dans la barre latérale en ajoutant <?php tpl_toc()?> après la fonction tpl_searchform dans le fichier lib/tpl/twentyfifteen/main.php.

Juste avant j'ajoute un élément pour utiliser la mémoire tampon pour appeler en premier la fonction tpl_content afin d'éviter certains problèmes liés à l'utilisation du plugin Publish (voir ci-dessous)

Je désactive aussi l'affichage de la toc dans le corps de la page en passant le paramètre false quand on appelle la fonction tpl_content.

J'obtiens donc :

<?php
    // render the content into buffer for later use
    ob_start();
    tpl_content(false);
    $buffer = ob_get_clean();
?>
<aside class="widget">
      <?php tpl_toc()?>
</aside>

Puis, dans le même fichier, là où était <?php tpl_content() ?> je met à la place <?php echo $buffer?> pour obtenir :

<article id="twentyfifteen__entry" class="entry">
  <div id="twentyfifteen__entry-content" class="entry-content">
      <?php tpl_flush() ?>
      <?php html_msgarea() ?>
       <!-- wikipage start -->
       <?php echo $buffer?>
       <!-- wikipage stop -->
       <?php tpl_flush() ?>
   </div>
</article>

Source de l'explication des fonctions :
https://www.dokuwiki.org/start?id=fr:devel:templates#fonctions

Pour alléger l'interface j'ai désactivé la “piste” (le fil d'Ariane) en passant par le panneau de configuration :

Cette fonction n'était pas nécessaire étant donné le peu de pages présentes.

À la fois pour alléger la colonne de droite en déplaçant l'indication sur les droits d'auteurs et pour supprimer des informations inutilement présentes dans le “footer”, j'ai modifié le pied de page.

Dans le dossier lib/tpl/twentyfifteen/main.php

Je supprime :

                <aside class="widget">
                    <?php tpl_license('button') ?>
                </aside>

Puis je remplace :

<footer class="site-footer">
        <div class="site-info"><?php tpl_pageinfo() ?></div>
     </footer>

Par :

<footer class="site-footer">
        <div class="site-info"><?php tpl_license('button') ?></div>
    </footer>

L'installation du plugin Publish permet d'enregistrer des brouillons avant publication. Le plugin fonctionne très bien mais certaines adaptations sont nécessaires pour éviter des messages inadéquats.

Pour cacher ce message (appelé par showrev) aux simples lecteurs :

**Ceci est une ancienne révision du document !**
**This is not the latest revision**

J'ai édité le fichier PHP qui génère la page et gère les droits d'accès.

Je suis allé dans le dossier /inc/html.php et j'ai ajouté if (auth_quickaclcheck($ID) >= AUTH_EDIT) pour obtenir :

    else{
        if ($REV||$DATE_AT) if (auth_quickaclcheck($ID) >= AUTH_EDIT){
            $data = array('rev' => &$REV, 'date_at' => &$DATE_AT);
            trigger_event('HTML_SHOWREV_OUTPUT', $data, 'html_showrev');
        }
        $html = p_wiki_xhtml($ID,$REV,true,$DATE_AT);
        $html = html_secedit($html,$secedit);
        if($INFO['prependTOC']) $html = tpl_toc(true).$html;
        $html = html_hilight($html,$HIGH);
        echo $html;
    }