davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>À la recherche du site parfait — Biologeek — 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/biologeek/archives/20060704-a-la-recherche-du-site-parfait">

</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>
    
    
  <section>
    <h1 property="schema:name">À la recherche du site parfait</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        <img src="/static/david/biologeek/images/logos/site_parfait.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
        <p>Comme <a href="https://larlet.fr/david/biologeek/archives/20060527-il-va-y-avoir-du-changement/">vous le savez</a>, je suis en pleine réflexion sur l'avenir de ce site. Au risque de spoiler un peu la suite, j'aimerais avoir votre avis sur quelques points car après tout <strong>vous</strong> êtes les principaux intéressés non&nbsp;? ;-)</p>

<p>L'utilisation de <a href="http://www.djangoproject.com/">Django</a> en guise de moteur modifie complètement ma conception de création d'un site en séparant distinctement les trois parties principales que sont&nbsp;: le modèle des données, les vues permettant d'y accéder et les templates mettant tout ça en forme.</p>

<h2>Modèle de données</h2>

<p>Commençons par le principal, le contenu.</p>

<p>Je suis assez frustré avec Dotclear depuis pas mal de temps car j'aimerais disposer de billets longs (articles) et de billets cours (brèves). Je sais bien que c'est possible avec cet outil mais ça demande pas mal de bidouilles. Et les bidouilles, il faut généralement les réitérer à chaque mise à jour ce qui peut s'avérer délicat (et long !) lorsqu'elles deviennent un peu trop importantes.</p>

<p>Avec Django c'est très simple à faire, il suffit de deux classes (bon malheureusement pour l'instant on ne peut pas utiliser l'héritage ce qui serait bien-pratique-mais-en-développement). Les articles seront assez semblables aux billets actuels et les brèves comporteront une majorité de liens avec quelques commentaires associés (une sorte de blogroll enrichie avec commentaires possibles pour parler le blogueur).</p>

<p>Enfin, les articles seront regroupés par tags avec une catégorie principale qui nous sera utile par la suite. Pour les brèves, je pense qu'il est inutile de les classer. Je veux aussi avoir la possibilité de créer une arborescence avec mes tags.</p>

<p>Ok, donc maintenant qu'on a la trame, passons à l'accès aux données.</p>

<h2>Vues et URLs</h2>

<p>C'est la partie encore indécise, partant du principe que les articles sont quasi-intemporels (contrairement aux brèves), j'ai pensé qu'il serait plus significatifs de placer dans l'URL la catégorie principale de l'article. On aurait ainsi&nbsp;:</p>

<pre> /Logiciels-libres/Ubuntu/comment-casser-xorg</pre>

<p>Ce qui permettrait d'accéder directement ensuite à la catégorie concernée (Ubuntu), voire à son parent (Logiciels libres). En revanche au niveau des brèves, ce serait plutôt&nbsp;:</p>

<pre> /2006/07/04/les-designs-gris-ont-la-cote</pre>

<p>Ce qui permettrait d'accéder aux archives de la même manière. Les archives devront regrouper les articles et les brèves donc je ne sais pas encore si je vais conserver le jour dans l'URL étant donné que je poste moins d'un article par jour.</p>

<p>Mais pourquoi ne pas avoir fait comme tout le monde une arborescence qui commence par <q>/archives</q>, <q>/post</q> et <q>/breve</q>&nbsp;? Tout simplement car c'est à mon avis inutile (surtout en termes de référencement) et que Django me permet de m'en passer assez facilement.</p>

<h2>Template et design</h2>

<p>J'ai beaucoup d'idées, surtout en termes d'ergonomie et pas mal d'inspiration à force de parcourir les sites de pointures du web design mais rien n'est encore définitif. A priori, le site sera scindé en deux colonnes principales consacrées aux articles à gauche et aux brèves à droite (pas vraiment original mais bon quand c'est bien... c'est bien). En ce moment j'hésite beaucoup entre un fond clair ou un fond foncé. Le foncé était plutôt à la baisse ces dernières années mais j'ai l'impression qu'il revient en force en ce moment (dans la palette des gris notamment). L'idéal étant peut-être d'alterner les deux&nbsp;? de proposer les deux fonds&nbsp;? J'aimerais avoir votre avis là-dessus.</p>

<p>Voila où j'en suis dans la refonte, lorsque j'aurais terminé je détaillerais beaucoup plus le code qui m'aura permis d'arriver au résultat. Le <a href="https://larlet.fr/david/biologeek/archives/20060617-traduction-francaise-de-la-documentation-de-django-le-framework-web-python/">tutoriel sur Django</a> étant très bien pour comprendre comment ça marche mais de reflétant pas vraiment la complexité de création d'un véritable site.</p>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 04/07/2006</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20080423-biologeek-enfin-propulse-par-django/" title="Accès à Biologeek (enfin) propulsé par Django">Biologeek (enfin) propulsé par Django</a></li>
        <li><a href="/david/biologeek/archives/20070623-ajout-des-flux-rss-du-sitemap-et-des-commentaires-avec-django/" title="Accès à Ajout des flux RSS, du sitemap et des commentaires avec Django">Ajout des flux RSS, du sitemap et des commentaires avec Django</a></li>
        <li><a href="/david/biologeek/archives/20070523-de-dotclear-a-django-migration-des-donnees-et-redirections/" title="Accès à De Dotclear à Django : migration des données et redirections">De Dotclear à Django : migration des données et redirections</a></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="comments">
      <h3>Commentaires</h3>
      
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">pouype</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Pour ce qui est du fond, bien souvent on a la possibilité de &quot;choisir&quot; un thème d'affichage, alors pourquoi pas proposer deux type d'affichage ? ;-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>C'est ce que j'entendais par « de proposer les deux fonds » mais bon c'est le double de boulot :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Tam</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je vote pour clair !!! J'aime pas trop les fonds foncés, ça me met de mauvaise humeur... mais bon c'est personnel hein !<br />
Sinon je trouve que c'est une bonne idée les articles et les brèves... les URL me semblent assez bien aussi...<br />
Bref pas d'autre commentaire :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">giz404</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Pour le fond, ça ne fait pas nécessairement deux fois plus de boulot, si la CSS est bien construite, il n'y a que quelques couleurs à ajuster.<br />
<br />
Idéalement, utiliser une grosse CSS commune à tout le site pour le positionnement, les tailles etc. et deux petites, construites sur le même et  qui gèreront uniquement les couleurs. <br />
Comme ça, un petit coup de rechercher-remplacer, et tu mets à jour facilement l'une ou l'autre, et l'architecture même du site ne se gère qu'une seule fois ...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">lordphoenix</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Pourquoi ne jéterais tu pas un oeil du coté de Wordpress car en plus de la publication de billet il permet de faire des pages supplémentaires à coté.<br />
Par contre elles échappent totalement à la chronologie du blog a toi de voir si c'est un problème. Cela t'éviterait en plus de redévelopper quelque chose qu existe déjà.<br />
Si tu veux un exemple vas voir les pages supplémentaires de mon blog accessible par le menu en haut à gauche. De plus dans la dernière version il y a un mécanisme antispam assez performant.<br />
 Et tu as même un site pour les utilisateurs francophone maintenant :<br />
<a href="http://www.wordpress-fr.net" title="http://www.wordpress-fr.net" rel="nofollow">www.wordpress-fr.net</a></p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@giz404 : oui je sais bien :)<br />
<br />
@lordphoenix : en effet, je vais voir ce qui se fait avec Wordpress, ça faisait un moment que je ne m'y étais pas intéressé et ça a bien évolué ! Bon l'intérêt c'était aussi de tester Django en production, des fois redévelopper quelquechose permet de mieux maîtriser son sujet.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">GandalfoS</span> le <span class="comment-date" property="schema:commentTime">04/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Et pourquoi pas tout faire toi même plutôt que d'utiliser des machines à tout faire ...?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">xave</span> le <span class="comment-date" property="schema:commentTime">05/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je ne cherche à garder personne dans le giron de notre religion, mais je tenais quand même à signaler qu'un système de brèves dans Dotclear est tout à fait faisable directement dans le thème, pas de hacks, pas de problème de mise-à-jour. Voilà, c'était juste pour ne pas laisser trainer un contre-vérité. :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">05/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@GandalfoS : réinventer la roue vaut parfois le coup mais là j'ai pas non plus tout l'été pour faire ce site, il faut bien gagner sa croûte ;)<br />
<br />
@xave : j'ai bien vu (et admiré !) le boulot fait pour embruns : <a href="http://embruns.xave.org/" title="http://embruns.xave.org/" rel="nofollow">embruns.xave.org/</a> (d'ailleurs tu avoues toi-même que c'était pas simple non ?)<br />
<br />
Mais ce changement de « religion » est plus une somme de petites frustrations accompagnées de désaccords avec les développeurs. Je ne veux pas m'étendre davantage là-dessus, Dotclear est un formidable outil qui m'a servi pendant de nombreuses années et qui restera de toute façon utilisé ici.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">07/07/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Ton descriptif me fait furieusement pensé à  SPIP ( <a href="http://www.spip.net/fr" title="http://www.spip.net/fr" rel="nofollow">www.spip.net/fr</a> ) sorti il y a peu en version 1.9 et qui contient par défaut la notion de brève ou article et un mécanisme d'urls propres telles que tu les cites...<br />
<br />
Mes 2 cents...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator"> experts CMS spip</span> le <span class="comment-date" property="schema:commentTime">14/12/2010</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Personnellement, je proposerais comme argument de poids, la faible consommation de bande passante, la totale modulabilité/adaptabilité de Spip. </p>
    </div>
</div>

    </div>
  </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>