davidbgk
/
larlet-fr-david

title:      Contenus + templates + URL + agencement = interfaces
slug:       contenus-templates-url-agencement-interfaces
date:       2007-03-08 23:49:11
type:       post
vignette:   images/logos/biologeek.png
contextual_title1:  Biologeek (enfin) propulsé par Django
contextual_url1:    20080423-biologeek-enfin-propulse-par-django
contextual_title2:  Ajout des flux RSS, du sitemap et des commentaires avec Django
contextual_url2:    20070623-ajout-des-flux-rss-du-sitemap-et-des-commentaires-avec-django
contextual_title3:  De Dotclear à Django : migration des données et redirections
contextual_url3:    20070523-de-dotclear-a-django-migration-des-donnees-et-redirections

<p>J'ai l'habitude de dire qu'une fois cette étape passée, 80% du travail est accompli (mais malheureusement pas du temps, je suis déjà en retard sur le planning...). Il s'agit de préciser les <a href="https://larlet.fr/david/biologeek/archives/20070224-objectifs-et-motivations-de-la-refonte-de-ce-blog/">contenus précédemment retenus</a>, d'identifier les différents templates à afficher et leur associer une URL. Si en plus j'arrive à agencer les différents contenus sur la page de manière ergonomique je passe à 85% :-).</p>

<h2>Contenus</h2>


<p>À cette étape, il faut faire la liste de tous les blocs qui vont être présents sur le site. Cela peu sembler long et fastidieux mais c'est autant de temps gagné pour la suite donc allons-y&nbsp;:</p>
<ul>
<li>billet</li>
<li>liste de billets</li>
<li>derniers billets</li>
<li>meilleurs billets</li>
<li>contenu relatif au billet</li>
</ul>
<ul>
<li>brève</li>
<li>liste de brèves</li>
<li>dernières brèves</li>
<li>meilleurs brèves</li>
<li>liste de brèves en attente</li>
<li>brèves d'un mois particulier</li>
</ul>
<ul>
<li>liste de commentaires</li>
<li>derniers commentaires</li>
<li>formulaire nouveau commentaire</li>
</ul>
<ul>
<li>archives</li>
<li>mois</li>
<li>tag</li>
</ul>
<ul>
<li>recherche</li>
<li>flux <abbr title="RDF Site Summary">RSS</abbr></li>
<li>information contextuelle</li>
<li>informations auteur</li>
</ul>
<ul>
<li>contact auteur</li>
<li>formulaire de contact</li>
<li>informations site</li>
<li>informations légales</li>
</ul>

<p>Je crois avoir fait le tour, en cas d'oubli il sera toujours possible d'ajouter un bloc a posteriori. <strong>J'en profite pour un avertissement plus général, je décris la refonte <em>en live</em> sans connaître préalablement le résultat donc il est bien entendu possible qu'il y ait ensuite des ajustements pour la version finale...</strong> bloguer une refonte dont l'issue est connue distillée petit à petit serait frustrant pour vous et très ennuyeux pour moi&nbsp;!</p>


<h2>Templates</h2>


<p>Vous avez sûrement remarqué le premier découpage de la liste par thématique, il s'agit maintenant de <strong>regrouper les blocs par type d'affichage</strong> en distinguant les <strong>contenus</strong>, les <strong>listes de contenus</strong>, les <strong>informations annexes</strong> et les <strong>éléments de navigation</strong>.</p>


<p>Je profite de cette séparation en templates pour associer une URL à chacun des templates.</p>


<h3>Contenus</h3>

<ul>
<li><strong>billet</strong>&nbsp;: c'est le contenu majeur du site, il doit être mis en valeur à chaque instant. L'URL retenue pour cette ressource est <ins>/catégorie-principale/titre-du-billet/</ins> en raison du référencement et de l'intérêt moins important de la date dans ces publications (on s'écarte clairement d'un blog, je sais).</li>
<li><strong>brève</strong>&nbsp;: c'est le contenu annexe, il doit être accessible sans prédominer sur les billets. L'URL est <ins>/année/mois/titre-de-la-brève/</ins> pour bien appuyer le fait que ces brèves sont ponctuelles et associées à une date. Je trouve que l'ajout du jour est superflu compte-tenu du rythme de publication.</li>
</ul>

<h3>Listes de contenus</h3>

<ul>
<li><strong>liste de billets</strong>&nbsp;: cette ressource sera accessible via l'URL <ins>/journal/</ins> et affiche les x derniers billets, c'est l'une des seules qui ne va pas changer...</li>
<li><strong>liste de brèves</strong>&nbsp;: cette ressource sera accessible via l'URL <ins>/bistrot/</ins> et affiche les y dernières brèves.</li>
<li><strong>archives</strong>&nbsp;: j'ai une légère indécision là-dessus, je sais que l'URL sera <ins>/archives/</ins> et que les liens de tous les billets <strong>et</strong> de toutes les brèves seront accessibles mais je ne sais pas encore dans quel ordre ni comment rendre possible le réarrangement par date/tag. J'hésite aussi à mettre une <a href="http://simile.mit.edu/timeline/">timeline</a> au passage (je me demande comment ça n'a pas encore explosé sur les blogs ça, surtout que c'est relativement simple à mettre en place).</li>
<li><strong>mois</strong>&nbsp;: présente la liste des billets et des brèves du mois considéré via l'URL <ins>/année/mois/</ins> (pour garder la cohérence, <ins>/année/</ins> renverra  probablement sur <ins>/archives/</ins>)</li>
<li><strong>tag</strong>&nbsp;: présente la liste des billets associés à ce tag. J'ai longtemps réfléchi à la possibilité de chainer les tags mais j'ai finalement renoncé car il est difficile de représenter cette possibilité de façon ergonomique ensuite (la seule solution intéressante est d'ajouter un + après les tags comme le fait un plugins de Wordpress je crois mais c'est difficilement compréhensible pour le visiteur). J'avais aussi pensé à faire des URL à saisir à la main du style <ins>/+python/+django/-quotidien/</ins> auxquelles on aurait facilement pu ajouter <ins>/feed/</ins> à la fin pour avoir un flux sur mesure mais je me suis dit que j'étais vraiment un sale geek (mais bon ça irait plus vite que de passer par des <a href="http://pipes.yahoo.com/pipes/">pipes</a>, soit).</li>
</ul>

<h3>Informations annexes</h3>


<p>Il s'agit des pages informatives ne dépendant pas des contenus.</p>

<ul>
<li><strong>accueil</strong>&nbsp;: contient principalement les <strong>informations site</strong>, utiles pour permettre au visiteur de cerner d'un seul coup d'œil l'espace sur lequel il vient d'atterrir.</li>
<li><strong>contact</strong>&nbsp;: contient les <strong>informations auteur</strong> et les différentes façon de le contacter.</li>
</ul>

<h3>Éléments de navigation</h3>


<p>Comme vous avez pu le remarquer, il y a de nombreux blocs de contenu qui ne sont pas encore utilisés. Ce sont principalement les éléments de navigation qui seront utilisés lors de la prochaine étape, lors de l'agencement des blocs sur les différents templates répertoriés.</p>


<h2>Agencement</h2>


<p>Je comptais vous faire un petit schéma pour l'occasion mais j'ai un peu la flemme de dégainer l'excellent inkscape donc ça restera du texte, soyez attentifs ;-). On peu déjà raisonnablement découper la page en trois éléments distincts (entre parenthèses les identifiants pour les billets futurs), en sachant que le design restera sous le format deux colonnes avec la deuxième colonne prenant plus d'importance&nbsp;:</p>

<ul>
<li>Le <strong>haut de page</strong> (header) se divisant en 4 sous parties (2colonnes x 2 bandes)&nbsp;:
<ul>
<li>l'<strong>identité visuelle</strong> (logo) en haut à gauche&nbsp;;</li>
<li>le <strong>menu</strong> (menu) en haut à droite&nbsp;;</li>
<li>les <strong>informations spécifique</strong> (information) en bas à gauche, c'est la seule partie variable du haut de page, elle s'adapte au contenu en fournissant des informations sur la page affichée&nbsp;;</li>
<li>la <strong>recherche</strong> (search) en bas à droite.</li>
</ul></li>
</ul>

<p>Le but de cette partie est d'être légère et fonctionnelle tout en étant esthétiquement réussie car c'est la première chose vue par le visiteur et le temps de réaction est très très court.</p>

<ul>
<li>Le <strong>contenu</strong> (content) divisé en 6 parties (2 colonnes x 3 bandes)&nbsp;:
<ul>
<li>La première colonne contient le contenu principal, les liens connexes, les commentaires (dans le cas des listes toute cette colonne est dédiée au contenu)&nbsp;;</li>
<li>La seconde colonne contient la navigation (variable selon le contenu) et l'abonnement aux flux RSS.</li>
</ul></li>
</ul>
<ul>
<li>Le <strong>pied de page</strong> (footer) divisé en 2 parties (2 colonnes)&nbsp;:
<ul>
<li>le <strong>nuage de tags</strong> pour la partie importante (si possible ciblé)&nbsp;;</li>
<li>un lien vers la <strong>description de l'auteur</strong> sur l'autre colonne.</li>
</ul></li>
</ul>

<p>Pour les pages annexes, le contenu et le pied de page sont susceptibles de changer en fonction des pages&nbsp;:</p>

<ul>
<li>L'<strong>accueil</strong> doit à la fois présenter le site et l'auteur, tout en proposant des liens vers les publications les plus pertinentes. Je me demande s'il vaut mieux lier les dernières parutions ou bien les meilleures.</li>
<li>La page de <strong>contact</strong> permettra d'en savoir plus sur l'auteur et comment le contacter, d'accorder les crédits et les mentions légales et d'indiquer comment récupérer les sources du site (je mettrais en place un dépôt pour ça).</li>
</ul>

<p><strong>Bon cette partie était un peu indigeste mais elle a le mérite de m'éclaircir les idées en les écrivant ici.</strong> Je n'ai pas détaillé tous les blocs, notamment la navigation on verra ça plus tard.</p>


<h2>Retour à django</h2>


<p>Grâce à l'identification des templates et à leur agencement, on commence à voir se dessiner l'<strong>héritage</strong> possible entre les différents templates. Les différentes URL évoquées donnent un aperçu de ce que va être notre <strong>urls.py</strong> et les blocs récurrents permettent de distinguer les <strong>templatetags</strong> dont nous aurons besoins par la suite. Encourageant tout ça, prochaine étape&nbsp;: le <strong><a href="https://larlet.fr/david/biologeek/archives/20070412-initialisation-et-modeles-de-donnees-de-la-refonte/">modèle de données</a></strong>.</p>


<p>À noter également qu'il est dès à présent possible de réfléchir au futur design en parallèle des développements. <strong>Tiens d'ailleurs ce design, on le change ?</strong></p>