davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
							<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>Refonte de l’Avent 2012 — David Larlet</title>
  <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Fake favicon, to avoid extra request to the server -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  <link rel="manifest" href="/manifest.json">
  
  <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  
  <noscript>
    <style type="text/css">
      /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
      body {
        font-family: 'EquityTextB', serif;
      }
      h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
        font-family: 'EquityCapsB', sans-serif;
        font-variant: normal;
      }
    </style>
  </noscript>
  
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/refonte/">

</head>
<body>
  <div>
    
    <header>
      <nav>
        <p>
          <small>
            Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
          </small>
        </p>
      </nav>
    </header>
    
    
  <h1>Refonte de l’Avent 2012</h1>
  <section>
      <article id="20121201">
        <h2><a href="#20121201" title="Lien vers l’étape">01/12/2012 ∙ Renaissance</a></h2>
        <div><p>Cette page résume les étapes de refonte de cet espace personnel qui constitue mon identité numérique et mon historique d’expression sur le Web. Il y aura une étape par jour d’ici le 24 décembre 2012 pour me motiver à avancer tout en partageant les connaissances et la vision que j’ai d’une refonte. En attendant la suite, vous pouvez aller ouvrir les premières cases chez <a href="http://24ways.org/">24ways</a> (en) et <a href="http://www.24joursdeweb.fr/">24 jours de Web</a> (fr).</p></div>
      </article>

      <article id="20121202">
        <h2><a href="#20121202" title="Lien vers l’étape">02/12/2012 ∙ Objectifs</a></h2>
        <div><p>Commençons par un état des lieux de ce qui va changer/être créé :</p>
<ul>
<li>navigation trop exhaustive avec cette barre de navigation omniprésente qui m’a permis d’avoir une transition plus cohérente mais qui se révèle être moins utile aujourd’hui ;</li>
<li>design un peu moins sommaire, toujours minimaliste mais avec des petites touches typographiques et iconographiques plus avancées ;</li>
<li>publication mixte en français avec des articles et des notes plus légères qui vont remplacer une bonne partie de mes tweets (marre d’être incohérent à ce niveau) ;</li>
<li>media directement intégrés dans les billets de blog (sans que ce soit obligatoire car ça me bloquait sur biologeek) ;</li>
<li>discussions sur une liste de discussion dédiée, je n’ai toujours pas trouvé mieux pour avoir des commentaires non centralisés, le test via GitHub était un échec ;</li>
<li>recherche sur du contenu statique, il faut que je vois ce qu’utilise <a href="http://sphinx-doc.org/">Sphinx</a> mais ça s’annonce compliqué vu la diversité des sources. À terme, ça pourrait m’éviter de devoir indexer le contenu du site par des moteurs à l’éthique douteuse.</li>
</ul>
<p>En attendant la suite, vous pouvez aller ouvrir les premières cases chez <a href="http://uxmas.com/">UXmas</a> (en) et <a href="http://joranne.blogspot.jp/2012/12/un.html">Joranne Bagoule</a> (fr).</p></div>
      </article>

      <article id="20121203">
        <h2><a href="#20121203" title="Lien vers l’étape">03/12/2012 ∙ Navigation</a></h2>
        <div><p>Je voulais une navigation qui soit épurée, ce qui demande d’avoir plusieurs niveaux. En premier lieu une navigation globale qui résume en 3 mots les différentes facettes que je partage en ligne : professionnel, personnel et citoyen (des détails là-dessus plus tard). Ensuite, une navigation de second niveau qui permet de résumer le type de la page visitée et d’ajouter de façon optionnelle des liens internes de navigation contextuels.</p>
<p>Les deux types de navigation sont sous forme de phrase. Ça génère un peu de bruit mais ça apporte aussi un peu d’humanité dans ces menus si froids.</p>
<p>En attendant la suite, vous pouvez aller tricoter sur <a href="http://24pullrequests.com/">GitHub</a> (en) et <a href="http://www.instructables.com/id/Beer-Advent-Calendar-Beervent-Calendar/">fabriquer votre propre calendrier</a> (en), ça marcherait aussi avec le vin me souffle-t-on.</p></div>
      </article>

      <article id="20121204">
        <h2><a href="#20121204" title="Lien vers l’étape">04/12/2012 ∙ Design</a></h2>
        <div><p>Cette étape fera l’objet de plusieurs itérations (et donc cases numériques) compte-tenu de l’ampleur de la tâche et de vos potentiels retours. J’ai utilisé des <em>subtlepatterns</em> pour les fonds <a href="http://subtlepatterns.com/debut-light/">clairs</a> et <a href="http://subtlepatterns.com/debut-dark/">foncés</a> mais ça gênait un peu la lisibilité alors j’ai remis un aplat sur les fonds clairs (si votre écran est trop lumineux, vous ne remarquerez probablement pas la subtilité). Je me suis fixé comme contrainte d’utiliser au maximum les couleurs pré-définies en CSS ainsi que les tailles de texte <a href="http://emmanuel.clement.free.fr/blog/index.php/post/2012/11/05/Forces-des-corps">comme suggéré par Emmanuel</a> et <strong>je vais essayer de garder une CSS elle aussi minimaliste</strong>.</p>
<p>Je voulais avoir deux styles complémentaires : clair et foncé. Le problème de la lisibilité sur un fond foncé est bien réel mais il peut être amoindri en jouant sur l’espacement des lignes, des mots et même des lettres (ce qui n’a pas l’air de fonctionner sous Webkit). <strong>J’hésite encore à augmenter la taille du texte sur l’ensemble de la page</strong>, j’ai tendance à quasiment toujours faire un <code>cmd++</code> lorsque j’arrive sur une page que je souhaite lire ou à utiliser un outil externe qui en facilite la lecture (et supprime le style choisi par l’auteur, ce qui est dommage).</p>
<p>Je vais laisser le <code>header</code> tel qu’il est actuellement et résister à la tentation d’ajouter un <code>footer</code> inutile. J’ai hésité à avoir une approche <em>mobile-first</em> mais je préfère privilégier le contenu et m’assurer que ça passe bien avec un petit écran. Si ce n’est pas le cas, c’est un indice que l’enveloppe a pris trop d’importance sur le message.</p>
<p>Je suis loin d’être satisfait du résultat actuel mais c’est un début.</p></div>
      </article>

      <article id="20121205">
        <h2><a href="#20121205" title="Lien vers l’étape">05/12/2012 ∙ Typographie</a></h2>
        <div><p>J’utilise les services de <a href="https://typekit.com">Typekit</a> pour servir les polices de caractères que j’utilise. C’est le seul outil externe qui peut potentiellement vous traquer sur ce site, j’en suis bien conscient et malheureusement je n’ai pas d’alternatives (pour une sombre histoire de copyright obsolète) à part celle d’utiliser des polices par défaut qui nuisent à l’esthétique de la lecture. Je m’en passerais bien mais j’ai tendance à remarquer de façon positive cette attention sur les sites des autres.</p>
<p>J’avais mis en place Abril Text/Display cette année et je compte passer à CamingoDos Web/Rooney Web pour cette nouvelle itération. J’aime bien utiliser les polices issues de la même fonderie car j’y retrouve une certaine cohérence (peut-être totalement imaginaire mais j’aime ça :p). C’est très subjectif mais je trouve cette paire extrêmement lisible et équilibrée, la lecture sur fond sombre s’en trouve améliorée.</p>
<p>L’ajout des polices demande un téléchargement de 336Ko en plus, c’est important mais difficilement réductible compte tenu des spécificités de la langue française. En attendant la suite, vous vous ferez bien <a href="http://aventdesgifs.com/">quelques gifs</a>.</p></div>
      </article>

      <article id="20121206">
        <h2><a href="#20121206" title="Lien vers l’étape">06/12/2012 ∙ Citoyen</a></h2>
        <div><p>J’ai entrepris de <a href="https://larlet.fr/david/arlesien/">collecter les choses qui m’agacent dans ma ville</a> pour constituer un jeu de données pouvant être ensuite discuté, confronté. J’ai formulé des propositions concrètes permettant d’améliorer la situation de mon point de vue. Je ne sais pas encore ce que je vais en faire mais peut-être que cela pourra générer des échanges entre arlésiens et de nouvelles propositions à défaut d’actions de la puissance publique.</p>
<p>J’ai conscience du manque de recul de ces constats, mais parfois les petites améliorations du quotidien apportent un petit réconfort qui ajouté à d’autres petits réconforts permet d’améliorer le bien-être global des citoyens. L’action citoyenne mène irrémédiablement vers la politique locale et c’est un univers qui me fait un peu peur.</p></div>
      </article>

      <article id="20121207">
        <h2><a href="#20121207" title="Lien vers l’étape">07/12/2012 ∙ Artisan</a></h2>
        <div><p>C’est la page (juste après le profil personnel) qui est la plus compliquée à écrire. Je commence toujours par rédiger une sorte de CV pour me mettre en confiance, puis je jette tout pour avoir <a href="https://larlet.fr/david/pro/">une approche plus humaine de la relation que j’ai avec mon travail</a>. J’ai du mal à voir si c’est pertinent, c’est en tout cas une page me permettant de demander poliment aux recruteurs s’ils ont pris le temps de la lire et c’est déjà pas mal.</p>
<p>Aujourd’hui elle sert surtout de clarification pendant la période de transition avec ma nouvelle activité au sein de <a href="http://scopyleft.fr/">Scopyleft</a>. En attendant la suite, quelques cases pour <a href="http://calendar.perfplanet.com/2012/">améliorer la performance de vos sites</a>.</p></div>
      </article>

      <article id="20121208">
        <h2><a href="#20121208" title="Lien vers l’étape">08/12/2012 ∙ Footer</a></h2>
        <div><p>Bon finalement après réflexion il me fallait placer 2 liens supplémentaires et j’avais du mal à voir une autre place que le pied de page. J’ai donc ajouté :</p>
<ul>
<li>le lien pour me contacter qui est important afin d’avoir des retours ;</li>
<li>le lien vers <a href="https://www.alwaysdata.com/">mon hébergeur</a> qui est légalement indispensable (puis j’aime bien les recommander en plus car ils font du bon boulot) ;</li>
<li>le lien vers le flux RSS qui est optionnel vu qu’il est également dans le <code>head</code> mais vu la raréfaction des accès natifs au sein des navigateurs je préfère être explicite ;</li>
<li>le lien vers cette refonte pour finir, pas sûr qu’il y reste longtemps mais les mises à jour n’étant annoncées que <a href="https://twitter.com/davidbgk">sur Twitter</a> ça lui donne un autre point d’entrée.</li>
</ul>
<p>En attendant la suite, allez découvrir <a href="http://webadvent.org/2012">de nouveaux outils / bibliothèques / astuces</a>.</p></div>
      </article>

      <article id="20121209">
        <h2><a href="#20121209" title="Lien vers l’étape">09/12/2012 ∙ Liens</a></h2>
        <div><p>Pas convaincu par l’arrivée du lien vers la refonte en pied de page, je me suis demandé s’il n’était pas plus pertinent de mettre une sorte de <a href="https://larlet.fr/david/liens/">plan de site</a> décrivant les différentes pages présentes. Le problème, c’est que je n’ai jamais aimé ce style de page présentant un arbre incompréhensible, j’ai donc essayé de décrire les sections concernées qui sont déjà en ligne.</p>
<p>Et puisque j’en étais à faire des liens internes, j’ai choisi d’ajouter des liens externes vers des sites et des personnes que je lis au quotidien depuis des années. C’est une page dont j’avais envie depuis longtemps.</p></div>
      </article>

      <article id="20121210">
        <h2><a href="#20121210" title="Lien vers l’étape">10/12/2012 ∙ Profil</a></h2>
        <div><p>Passons aux choses sérieuses, exercice difficile dont j’ai repris des éléments de la précédente itération suite aux retours très positifs que j’ai eu.</p>
<p>C’est le moment où il faut que j’essaye de faire ressortir tout l’optimisme qui est en moi, ce qui nécessite pas mal d’itérations lorsqu’on est aussi aigri :p.</p>
<p>J’ai essayé de rester très succinct en me concentrant sur <a href="https://larlet.fr/david/">les objectifs personnels</a> qui m’animent. Il y aura probablement une seconde itération au cours de la refonte car je ne suis pas pleinement satisfait de là où j’en suis arrivé.</p></div>
      </article>

      <article id="20121211">
        <h2><a href="#20121211" title="Lien vers l’étape">11/12/2012 ∙ Sécurité</a></h2>
        <div><p>J’ai offert un certificat SSL à mon site pour Noël dernier et j’ai choisi de le renouveler pour la simple et bonne raison que les options sécurisées ne doivent pas être réservées aux sites qui ont quelque chose à cacher. <a href="https://www.tbray.org/ongoing/When/201x/2012/12/02/HTTPS">La confidentialité devrait être activée par défaut</a> pour limiter toute suspicion a priori.</p>
<p>Pour rappel<a href="https://larlet.fr/david/thoughts/#https">[1]</a><a href="https://larlet.fr/david/thoughts/#ssl">[2]</a> :</p>
<ul>
<li><code>HTTPS</code> permet de certifier que vous rejoignez bien l’URL que vous avez renseignée dans votre barre d’adresse, sous réserve que <a href="https://twitter.com/dozba/status/277252947384078336">vous n’ayez pas appris à ignorer cette erreur</a> sans y réfléchir à 2 fois ;</li>
<li><code>HTTPS</code> permet de certifier que le contenu qui transite entre mon serveur et votre navigateur a été chiffré et n’a théoriquement pas été consulté ni altéré.</li>
</ul>
<p>L’investissement me semble raisonnable pour continuer l’expérience.</p></div>
      </article>

      <article id="20121212">
        <h2><a href="#20121212" title="Lien vers l’étape">12/12/2012 ∙ Rétrospective</a></h2>
        <div><p>On fait des <a href="https://github.com/scopyleft/documentation/tree/master/pilotage/retrospectives">rétrospectives mensuelles</a> avec <a href="http://scopyleft.fr">Scopyleft</a> et j’ai pu constater à quel point il était efficace de faire des bilans réguliers pour décider d’actions concrètes visant à pérenniser le positif et influer sur le négatif de manière itérative. J’ai décidé d’en faire une à mi-parcours pour voir si c’était pertinent également dans le cadre de cet exercice.</p>
<h3>Positif</h3>
<ul>
<li>régularité dans la publication : je me suis fixé une contrainte sans savoir si j’allais pouvoir la tenir ;</li>
<li>avancée de la refonte : plutôt content d’avoir déjà pas mal de pages ;</li>
<li>spontanéité des articles : aucun plan du jour sur le lendemain, la liberté de parler de ce que je veux.</li>
</ul>
<h3>Négatif</h3>
<ul>
<li>manque de retours sur l’avancée de la refonte de la part des visiteurs ;</li>
<li>impossibilité de tester tous les cas de mise en page ;</li>
<li>stress de la publication quotidienne sans filet (mauvais côté de la spontanéité).</li>
</ul>
<h3>Ressenti</h3>
<p>Il est fatigant de tenir le rythme en parallèle de pas mal d’activités professionnelles qui demandent beaucoup d’énergie et de temps.</p>
<h3>Actions</h3>
<ul>
<li>ajouter la fonctionnalité permettant d’avoir des discussions relatives au site ;</li>
<li>réaliser des pages de test ou <code>styleguide</code> CSS avec les différents cas possibles ;</li>
<li>avoir un article d’avance, ne pas hésiter à en rédiger 2 à la suite si le temps le permet.</li>
</ul>
<p>Allez hop, au boulot !</p></div>
      </article>

      <article id="20121213">
        <h2><a href="#20121213" title="Lien vers l’étape">13/12/2012 ∙ Statistiques</a></h2>
        <div><p><a href="http://nico.dubs-family.fr/accueil">Nicolas Dubois</a> me demandait à juste titre de développer :</p>
<blockquote>
<p>pourquoi j’ai viré GA de mon site ;) Ou, au delà du Google is Satan pourquoi ce n’est pas important pour toi de savoir quelle audience a tel ou tel billet, etc</p>
</blockquote>
<p>Alors premièrement, je n’ai plus Google Analytics sur mon site depuis très longtemps et je l’ai remplacé par <a href="http://www.haveamint.com/">Mint</a> qui est installé sur mon serveur et qui n’alimente aucune base de données d’entreprise tirant profit de votre activité en ligne par respect pour vous. En revanche, il est vrai que je l’ai rapidement enlevé de <a href="https://github.com/scopyleft/scopyleft.github.com/commit/2dc490298dc4bf024204fab0992e75741c1f08af">la page de Scopyleft</a> sans proposer d’alternative car je pense qu’il faut avoir un objectif précis pour suivre l’activité des visiteurs sur son site.</p>
<p>Avec le recul, je me rends compte que je n’utilise les statistiques que pour flatter mon égo de temps en temps et c’est à peu près tout. Les liens entrants sont toujours les même, les recherches pour aboutir sur le site également. En fait je ne me suis servi que de 3 données depuis 4 ans :</p>
<ul>
<li>les informations de <code>user-agent</code> pour justifier ma fainéantise à ne pas me soucier de certains navigateurs obsolètes lors des refontes ;</li>
<li>les informations de localisation pour me motiver à revenir au français voyant bien qu’il représentait 85% de mon trafic ;</li>
<li>la tendance générale décroissante pour me motiver à partager davantage de choses.</li>
</ul>
<p>C’est bien peu et <strong>j’ai donc décidé de retirer totalement la récupération des statistiques de fréquentation de ce site.</strong> Je serais curieux par contre d’avoir vos retours concernant vos adaptations lorsque vous constatez qu’un billet est plus lu qu’un autre. Est-ce que cela vous incite à faire plus de billets de ce style ? Est-ce que ça dirige votre « ligne éditoriale » dans le but de faire plus d’audience ?</p></div>
      </article>

      <article id="20121214">
        <h2><a href="#20121214" title="Lien vers l’étape">14/12/2012 ∙ Discussions</a></h2>
        <div><p>Problème épineux compte-tenu des contraintes que je m’impose :</p>
<ul>
<li>décentralisation des données échangées, je veux que les participants aient une copie du contenu qu’ils ont produit ;</li>
<li>limitation du spam et des commentaires inutiles, c’est ce qui m’avait motivé à mettre fin aux commentaires sur Biologeek ;</li>
<li>création d’un espace de discussion plus qu’un commentaire classique par article.</li>
</ul>
<p>J’avais commencé à <a href="https://gist.github.com/3847482">expérimenter des choses avec git(hub)</a>, ce qui s’était soldé par un échec assez flagrant mais ça m’a donné l’idée de partir sur une autre tentative à base de liste de diffusion. Les avantages pour répondre aux contraintes pré-citées :</p>
<ul>
<li>chaque commentaire est conservé dans les messages envoyés de l’interlocuteur et dupliqué dans chaque boîte de réception des autres abonnés avec une synchronisation possible sur le site et des archives publiques ;</li>
<li>possibilité de modérer le spam de manière plus efficace j’espère tout en encourageant des messages plus construits et pertinents ;</li>
<li>création d’une communauté autour de cette liste de diffusion avec des échanges pouvant potentiellement être annexes aux propos du site.</li>
</ul>
<p>La contrepartie à tout ça, c’est qu’il va potentiellement être compliqué d’automatiser le traitement de ces échanges en vue de leur publication ici. La liste peut également avoir une activité non adaptée aux différents abonnés ce qui pourrait aboutir au retrait de la discussion de certaines personnes qui avaient des choses intéressantes à échanger. C’est une expérience que je limite dans un premier temps à la refonte avec un unique lien en pied de page qui devrait formater le mail de façon à pouvoir en automatiser le traitement à terme. On en discute ? ;-)</p>
<p><em>PS : attention, le premier message que vous allez envoyer par mail ne va pas être immédiatement transmis en raison du workflow  de souscription de <a href="http://librelist.com/">librelist</a>, il faudra le renvoyer une fois inscrit. Il devrait ensuite apparaître <a href="http://librelist.com/browser/larletfr/">dans les archives</a> passé un délai de quelques minutes.</em></p></div>
      </article>

      <article id="20121215">
        <h2><a href="#20121215" title="Lien vers l’étape">15/12/2012 ∙ Famille</a></h2>
        <div><p>Il y a un texte que je voulais publier depuis longtemps qui a été écrit pas une grand-tante et dont j’ai une rare copie papier. C’est <a href="/famille/histoire/">l’histoire de ma famille vivant au Vietnam</a> il y a quelques décennies, à l’époque des colonies.</p>
<p>La numérisation du texte est fastidieuse mais je m’impose de le faire car j’y retrouve une partie de mes racines et je ne souhaite pas que de tels écrits puissent disparaitre lors d’un accident. J’en suis pour l’instant au premier quart et j’avance doucement en essayant de m’astreindre à quelques pages par jour.</p>
<p>J’ai souhaité conserver un style dactylographié pour la typographie qui rappelle par skeuomorphisme les pages que j’ai tapé jour après jour. Si vous prenez le temps de lire ce texte (<a href="http://www.iawriter.com/">iA Writer</a> m’indique 1 heure de lecture), sachez que Victor Lê était mon grand-père.</p>
<p><em>PS : inutile de demander une version epub pour l’instant.</em></p></div>
      </article>

      <article id="20121216">
        <h2><a href="#20121216" title="Lien vers l’étape">16/12/2012 ∙ Tests</a></h2>
        <div><p>Une des actions de ma rétrospective de mi-parcours aura été d’établir un jeu de test permettant de finaliser le design. J’avais commencé par une sorte de <code>styleguide</code> et je me suis dit que les tests devaient être le plus proche de la réalité pour être vraiment représentatifs. J’ai donc commencé à rédiger le contenu du futur blog ce qui m’a pris plus de temps que prévu pour ajouter également un accès aux archives.</p>
<p>Savoir reconnaître les échecs de ses estimations est aussi une forme de partage :-).</p></div>
      </article>

      <article id="20121217">
        <h2><a href="#20121217" title="Lien vers l’étape">17/12/2012 ∙ Geek</a></h2>
        <div><p>Et hop, comme promis <a href="/david/blog/2012/rappel/">un premier billet</a> avec une page d’<a href="/david/blog/">archives</a>. Rien de bien phénoménal si ce n’est un page d’archives renvoyant aux anciens articles en anglais et aux billets de Biologeek.</p>
<p>Au moins je vais pouvoir commencer à publier en parallèle car il y a des billets qui ne sont pas liés à la refonte qui commencent à s’accumuler.</p></div>
      </article>

      <article id="20121218">
        <h2><a href="#20121218" title="Lien vers l’étape">18/12/2012 ∙ Talks</a></h2>
        <div><p>Reprise de la <code>timeline</code> qui fonctionne assez bien avec une simple adaptation du design pour <a href="/david/talks/" data-no-instant>la page des conférences</a>. Elle montre une certaine régularité ces derniers temps mais j’aimerais bien me confronter à un public différent, une audience qui pourrait m’apporter un peu de candeur dans les échanges et de fraîcheur dans les concepts.</p></div>
      </article>

      <article id="20121219">
        <h2><a href="#20121219" title="Lien vers l’étape">19/12/2012 ∙ Stream</a></h2>
        <div><p>La page d’<a href="/david/stream/">archives de mes tweets</a> commence à prendre un peu trop de poids (2000 items à ce jour) et je n’ai pas encore trouvé de solution miracle pour pallier cela. Il faudrait que je refasse une passe pour élaguer dans ce que j’ai sauvegardé, à l’usage je me rends compte qu’il est très utile de pouvoir faire une recherche sur la page complète pour retrouver un lien (marque-page -2.0).</p>
<p>Un autre option serait d’arrêter de transmettre les liens intéressants sur Twitter pour les publier directement ici avec un peu plus de contexte et de réflexion sur le lien partagé. Je laisse pour l’instant en l’état et j’aviserai plus tard en fonction de mon degré de militantisme.</p></div>
      </article>

      <article id="20121220">
        <h2><a href="#20121220" title="Lien vers l’étape">20/12/2012 ∙ Code</a></h2>
        <div><p>La page regroupant <a href="/david/code/">mes projets</a> était clairement obsolète. J’ai commencé par appliquer le nouveau style et à supprimer les projets que je ne maintiens plus, j’ai ensuite lié cette page uniquement depuis <a href="/david/pro/">ma page pro</a>.</p>
<p>J’en profite pour parler du moteur de ce site. J’ai commencé par faire 2/3 commandes <code>fabric</code> pour générer les pages dynamiques et importer les anciens articles de blog et tweets. Aujourd’hui, j’ai une trentaine de commandes qui sont relativement répétitives car je ne me suis pas basé sur un moteur de <code>templates</code> initialement. C’était une erreur et je ne suis pas tout à fait satisfait de la solution actuelle mais elle a le mérite de fonctionner et j’en connais chaque ligne. Je pense pouvoir réussir à vivre avec… au moins jusqu’à la prochaine refonte :D.</p>
<p>En bonus aujourd’hui l’<a href="http://kaikkonendesign.fi/typography/section/1">Interactive Guide to Blog Typography</a>.</p></div>
      </article>

      <article id="20121221">
        <h2><a href="#20121221" title="Lien vers l’étape">21/12/2012 ∙ Thoughts</a></h2>
        <div><p>Ma fainéantise aura attendu toute la journée pour ne pas avoir à  continuer cette refonte mais les mayas auront eu raison d’elle. Du coup, c’est une étape assez courte avec le style des <a href="/david/thoughts/">pensées en anglais</a> qui s’uniformise. J’ai également passé les articles en ordre chronologique ce qui me semble plus cohérent dans le déroulé de mes réflexions au cours de cette année.</p>
<p>J’en ai profité pour relire un peu ces pensées de façon à vérifier que le style s’appliquait bien et je suis retombé sur <a href="/david/thoughts/#theorem">mon théorème</a> que je vais tenter d’invalider sous peu, pour ma plus grande joie :-).</p></div>
      </article>

      <article id="20121222">
        <h2><a href="#20121222" title="Lien vers l’étape">22/12/2012 ∙ Commentaires</a></h2>
        <div><p>Ceci est un manuel explicatif concernant les commentaires/discussions sur le site.</p>
<p>Les commentaires passent par une liste de diffusion hébergée par <a href="http://librelist.com/">librelist</a> et <a href="http://librelist.com/browser/larletfr/">archivée publiquement</a>. Vous êtes automatiquement abonné à la liste lorsque vous soumettez un message par mail dans le but avoué de générer des discussions (pour avoir une idée de la fréquence des messages, se référer aux archives).</p>
<p>Certains des messages envoyés, contenus entre ★★★★★ et ★★★★★ seront également publiés sur le site de façon automatisée. Je me réserve le droit de publier ou non les messages et discussions sur cette liste. Veuillez être explicite si vous ne souhaitez pas être repris ici (votre message sera quand même archivé sur librelist).</p>
<p>Normalement, en cliquant sur les liens présents sur le site, vous devriez avoir un modèle de message déjà prérempli vous permettant d’avoir le formatage adéquat comprenant le titre, l’url concernée et la possibilité de publier automatiquement sur le site.</p>
<p><em>Lors de votre première soumission, un message de confirmation vous sera envoyé et il sera nécessaire de renvoyer votre message initial (ce qui vous permettra d’avoir une relecture à froid ;-)) avant publication.</em></p>
<p><strong>Ce processus est expérimental et s’améliorera avec le temps</strong>, il est pour l’instant manuel de mon côté. Vous avez un exemple de rendu des commentaires au sujet de cette page ci-dessous.</p></div>
      </article>

      <article id="20121223">
        <h2><a href="#20121223" title="Lien vers l’étape">23/12/2012 ∙ Media</a></h2>
        <div><p>Je réfléchis à ce que je veux faire de la page de <a href="https://larlet.fr/david/media/">media</a> depuis le début de la refonte et je n’arrive pas à me décider, à terme j’aimerais pouvoir les intégrer dans les articles tout en conservant une page séparée pour avoir une liste.</p>
<p>Je vais encore attendre un peu pour laisser mariner ces pistes, il ne faut pas que cette refonte devienne oppressante au point de vouloir à tout prix changer. <em>Apprendre à chérir ses idées, à leur laisser le temps de s’exprimer.</em></p></div>
      </article>

      <article id="20121224">
        <h2><a href="#20121224" title="Lien vers l’étape">24/12/2012 ∙ Bilan</a></h2>
        <div><p>24ème étape de cette refonte, il est temps de faire un bilan :</p>
<ul>
<li>la contrainte de faire avancer la refonte au quotidien m’a permis d’avancer de façon assez significative en luttant contre ma procrastination ;</li>
<li>la contrainte de devoir publier chaque jour de manière itérative a également été un frein lorsque j’étais dans une phase de code qui me permettait d’en faire beaucoup plus en une seule fois ;</li>
<li>le fait d’avoir un travail d’écriture quotidien m’a motivé pour écrire d’autres choses et les publier sur le nouveau blog ;</li>
<li>j’ai eu du mal à partager de la valeur à chaque étape, en fait j’ai même des réserves sur le fait que ça ait pu servir à quelqu’un d’autre que moi ;</li>
<li>le faire à cette période m’a permis de faire la transition dans ma vie numérique avec la création de <a href="http://scopyleft.fr">scopyleft</a>.</li>
</ul>
<p>Ce n’est pas terminé pour autant, un site personnel est un bonsai dont il faut s’occuper symbiotiquement au quotidien. On se retrouve à la prochaine taille ;-).</p></div>
      </article>
    <hr />
  </section>
  <section>
    <h2>Discussion</h2>
      <article id="comment-1" class="comment">
        <div><p>La liste de discussions pour les commentaires me semble intéressant. Je ne sais pas comment tu envisages leur publication sur la page en question ou pas. Si tu crées une page individuelle pour chaque message ou pas. Un id spécifique pour chaque article, mais il doit y avoir une possibilité. </p>
<p>Dans la gestion des bug reports d’Opera nous recevons toutes les modifications par message des bugs auxquels nous sommes abonnés.  Rien de surprenant. Mais nous pouvons faire un simple « Reply » pour commenter sur le bug, plutôt que d’avoir à se connecter sur le site, passer à travers un formulaire. </p>
<p>Cette fonctionnalité serait très intéressante sur les blogs. L’enjeu, les personnes qui font du top reply et définir une syntaxe pour les commentaires de commentaires. Peut-être juste markdown.</p>
<blockquote>
<p>Un commentaire
d’un commentaire.</p>
</blockquote></div>
        <h6><cite>Karl Dubost, le <a href="#comment-1">2012-12-14 à 08:13</a></cite></h6>
      </article>

      <article id="comment-2" class="comment">
        <div><blockquote>
<p>La liste de discussions pour les commentaires me semble intéressant. Je ne sais pas comment tu envisages leur publication sur la page en question ou pas. Si tu crées une page individuelle pour chaque message ou pas. Un id spécifique pour chaque article, mais il doit y avoir une possibilité. </p>
</blockquote>
<p>Je ne pense pas faire une page par commentaire, peut-être une page par discussion par contre à terme mais ça dépend de la façon dont ça évolue :)</p>
<blockquote>
<p>Dans la gestion des bug reports d’Opera nous recevons toutes les modifications par message des bugs auxquels nous sommes abonnés.  Rien de surprenant. Mais nous pouvons faire un simple « Reply » pour commenter sur le bug, plutôt que d’avoir à se connecter sur le site, passer à travers un formulaire. </p>
</blockquote>
<p>En fait, vu que c’est une liste de diffusion à laquelle chaque participant est automatiquement abonné, il est possible de répondre : soit entre les étoiles pour que ça apparaisse sur le site, soit directement comme je le fais ici et ça reste sur la liste. Il faudra que j’explique tout ça un peu mieux en fonction des retours.</p>
<blockquote>
<p>Cette fonctionnalité serait très intéressante sur les blogs. L’enjeu, les personnes qui font du top reply et définir une syntaxe pour les commentaires de commentaires. Peut-être juste markdown.</p>
</blockquote>
<p>Tout à fait, et pour gérer les signatures également !</p></div>
        <h6><cite>David Larlet, le <a href="#comment-2">2012-12-14 à 08:30</a></cite></h6>
      </article>

      <article id="comment-3" class="comment">
        <div><p>Concernant plus spécifiquement la refonte, là encore, j’apprécie le partage de la réflexion, le pourquoi du comment, ce qui amène au résultat.
Pour moi, le processus de création est un grand mystère. Du coup cet exercice imposé est très instructif et inspirant pour moi - peut-être parce que ma méthode me semble très différente ?</p>
<p>Bref, je n’ai pas vraiment de retour très constructif à faire, si ce n’est des encouragements à continuer.</p>
<p>À bientôt,</p></div>
        <h6><cite>François, le <a href="#comment-3">2012-12-18 à 12:08</a></cite></h6>
      </article>

      <article id="comment-4" class="comment">
        <div><p>C’est un commentaire en forme d’essai. </p>
<p>Korantin dans un commentaire pour un autre billet fait une allusion à la liste de diffusion.</p>
<p>Korantin Auguste a écrit :</p>
<blockquote>
<p>PS : L’utilisation d’une liste de diffusion c’est sympa, mais pour écrire juste un petit message comme ça, ce n’est pas ultra-pratique (surtout avec le « your first mail was dropped ».</p>
</blockquote>
<p>Je ne pense pas que ce soit un enjeu et plutôt une feature. Les personnes ont souvent tendance à envoyer un commentaire très réflexifs et peu pensé. Donc le coût du premier envoi peut avoir un effet positif sur la valeur de la participation.</p>
<p>L’enjeu est pour moi légèrement différent. J’ai répondu au commentaire de Korantin en faisant un reply directement depuis le mail.</p>
<ul>
<li>Je ne sais pas s’il y avait une forme appropriée pour.</li>
<li>Je ne sais pas si l’URL doit être au début ou non</li>
<li>Je ne sais pas si le quote sera pris en compte.</li>
</ul>
<p>D’autre part pour ce message même un enjeu similaire.</p>
<ul>
<li>Quelle est la forme ?</li>
<li>Cette fois ci, j’ai cliqué sur la page Web (chance d’être en ligne)</li>
<li>Puis juste créer un nouveau message ?</li>
<li>Dans ce cas quel est l’ID pour le bon thread</li>
<li>l’URL est-il nécessaire, les étoiles, etc. ?</li>
</ul>
<p>C’est peut-être juste une question d’apprentissage mais le manuel n’existe pas vraiment pour l’instant ou n’est pas réellement accessible.</p></div>
        <h6><cite>Karl Dubost, le <a href="#comment-4">2012-12-22 à 02:00</a></cite></h6>
      </article>
  </section>


    <footer>
      <nav>
        <p>
          <small>
            Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
          </small>
        </p>
      </nav>
    </footer>
    
  </div>
  
  <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  
  <script data-no-instant>InstantClick.init()</script>
  
</body>
</html>