Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

5 роки тому
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Contenus + templates + URL + agencement = interfaces — Biologeek — David Larlet</title>
  7. <!-- 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) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070308-contenus-templates-url-agencement-interfaces">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. 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>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Contenus + templates + URL + agencement = interfaces</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <img src="/static/david/biologeek/images/logos/biologeek.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
  45. <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>
  46. <h2>Contenus</h2>
  47. <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>
  48. <ul>
  49. <li>billet</li>
  50. <li>liste de billets</li>
  51. <li>derniers billets</li>
  52. <li>meilleurs billets</li>
  53. <li>contenu relatif au billet</li>
  54. </ul>
  55. <ul>
  56. <li>brève</li>
  57. <li>liste de brèves</li>
  58. <li>dernières brèves</li>
  59. <li>meilleurs brèves</li>
  60. <li>liste de brèves en attente</li>
  61. <li>brèves d'un mois particulier</li>
  62. </ul>
  63. <ul>
  64. <li>liste de commentaires</li>
  65. <li>derniers commentaires</li>
  66. <li>formulaire nouveau commentaire</li>
  67. </ul>
  68. <ul>
  69. <li>archives</li>
  70. <li>mois</li>
  71. <li>tag</li>
  72. </ul>
  73. <ul>
  74. <li>recherche</li>
  75. <li>flux <abbr title="RDF Site Summary">RSS</abbr></li>
  76. <li>information contextuelle</li>
  77. <li>informations auteur</li>
  78. </ul>
  79. <ul>
  80. <li>contact auteur</li>
  81. <li>formulaire de contact</li>
  82. <li>informations site</li>
  83. <li>informations légales</li>
  84. </ul>
  85. <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>
  86. <h2>Templates</h2>
  87. <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>
  88. <p>Je profite de cette séparation en templates pour associer une URL à chacun des templates.</p>
  89. <h3>Contenus</h3>
  90. <ul>
  91. <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>
  92. <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>
  93. </ul>
  94. <h3>Listes de contenus</h3>
  95. <ul>
  96. <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>
  97. <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>
  98. <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>
  99. <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>
  100. <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>
  101. </ul>
  102. <h3>Informations annexes</h3>
  103. <p>Il s'agit des pages informatives ne dépendant pas des contenus.</p>
  104. <ul>
  105. <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>
  106. <li><strong>contact</strong>&nbsp;: contient les <strong>informations auteur</strong> et les différentes façon de le contacter.</li>
  107. </ul>
  108. <h3>Éléments de navigation</h3>
  109. <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>
  110. <h2>Agencement</h2>
  111. <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>
  112. <ul>
  113. <li>Le <strong>haut de page</strong> (header) se divisant en 4 sous parties (2colonnes x 2 bandes)&nbsp;:
  114. <ul>
  115. <li>l'<strong>identité visuelle</strong> (logo) en haut à gauche&nbsp;;</li>
  116. <li>le <strong>menu</strong> (menu) en haut à droite&nbsp;;</li>
  117. <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>
  118. <li>la <strong>recherche</strong> (search) en bas à droite.</li>
  119. </ul></li>
  120. </ul>
  121. <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>
  122. <ul>
  123. <li>Le <strong>contenu</strong> (content) divisé en 6 parties (2 colonnes x 3 bandes)&nbsp;:
  124. <ul>
  125. <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>
  126. <li>La seconde colonne contient la navigation (variable selon le contenu) et l'abonnement aux flux RSS.</li>
  127. </ul></li>
  128. </ul>
  129. <ul>
  130. <li>Le <strong>pied de page</strong> (footer) divisé en 2 parties (2 colonnes)&nbsp;:
  131. <ul>
  132. <li>le <strong>nuage de tags</strong> pour la partie importante (si possible ciblé)&nbsp;;</li>
  133. <li>un lien vers la <strong>description de l'auteur</strong> sur l'autre colonne.</li>
  134. </ul></li>
  135. </ul>
  136. <p>Pour les pages annexes, le contenu et le pied de page sont susceptibles de changer en fonction des pages&nbsp;:</p>
  137. <ul>
  138. <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>
  139. <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>
  140. </ul>
  141. <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>
  142. <h2>Retour à django</h2>
  143. <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>
  144. <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>
  145. </div>
  146. </article>
  147. <footer>
  148. <h6 property="schema:datePublished">— 08/03/2007</h6>
  149. </footer>
  150. </section>
  151. <section>
  152. <div>
  153. <h3>Articles peut-être en rapport</h3>
  154. <ul>
  155. <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>
  156. <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>
  157. <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>
  158. </ul>
  159. </div>
  160. </section>
  161. <section>
  162. <div id="comments">
  163. <h3>Commentaires</h3>
  164. <div class="comment" typeof="schema:UserComments">
  165. <p class="comment-meta">
  166. <span class="comment-author" property="schema:creator">Sunny</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  167. </p>
  168. <div class="comment-content" property="schema:commentText">
  169. <p>Très instructive dichotomie.<br />
  170. <br />
  171. Attention à l'envie de ne montrer que les meilleures parutions en page d'accueil : un visiteur s'attendra à voir les dernières parutions. Pour ma part quand je tombe sur un site/blog je regarde très souvent la date du plus haut article pour avoir une idée de la &quot;fraicheur&quot; du site.</p>
  172. </div>
  173. </div>
  174. <div class="comment" typeof="schema:UserComments">
  175. <p class="comment-meta">
  176. <span class="comment-author" property="schema:creator">Eric Daspet</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  177. </p>
  178. <div class="comment-content" property="schema:commentText">
  179. <p>* Timeline : <br />
  180. Je ne suis pas convaincu de l'utilité et encore moins de la lisibilité de la chose. une liste à plat, verticale, me semble plus lisible et plus facilement &quot;parcourable&quot; rapidement sans nécessiter de lecture.<br />
  181. <br />
  182. * Tags chainés :<br />
  183. Ayant étudié la question, je me suis rendu compte que peu de gens cherchent à utiliser des critères négatifs &quot;tout sauf X&quot;. Quand c'est le cas c'est quasiment toujours dans un scénario de recherche et pas un scénario d'exploration. Perso j'ai donc laissé le scénario de recherche au champ/formulaire de recherche, et je me suis contenté de mots clés &quot;positifs&quot; dans l'url. <br />
  184. Pas besoin de + ou de - et je peux lister les mots clés en les séparant par une virgule : /voiture,sécurité,ceinture/<br />
  185. <br />
  186. <br />
  187. </p>
  188. </div>
  189. </div>
  190. <div class="comment" typeof="schema:UserComments">
  191. <p class="comment-meta">
  192. <span class="comment-author" property="schema:creator">Gurun</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  193. </p>
  194. <div class="comment-content" property="schema:commentText">
  195. <p>Talk less. Code more.</p>
  196. </div>
  197. </div>
  198. <div class="comment" typeof="schema:UserComments">
  199. <p class="comment-meta">
  200. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  201. </p>
  202. <div class="comment-content" property="schema:commentText">
  203. <p>@Sunny : excellente remarque, il faudra que j'en prenne compte.<br />
  204. <br />
  205. @Eric Daspet : oui la timeline c'est du eyes-candy mais c'est intéressant pour de l'info chronologique comme les blogs. Elle peut être accompagnée d'une liste plus conventionnelle (et accessible !) bien entendu.<br />
  206. <br />
  207. &gt; Pas besoin de + ou de - et je peux lister les mots clés en les séparant par une virgule : /voiture,sécurité,ceinture/<br />
  208. <br />
  209. Mais comment est-ce que tu les présentes au lecteur ? Et surtout comment mettre des liens pour toutes les combinaisons possibles ?<br />
  210. <br />
  211. @Gurun : pas d'impatience ça arrive.</p>
  212. </div>
  213. </div>
  214. <div class="comment" typeof="schema:UserComments">
  215. <p class="comment-meta">
  216. <span class="comment-author" property="schema:creator">NiCoS</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  217. </p>
  218. <div class="comment-content" property="schema:commentText">
  219. <p>Pour la timeline, bof en effet, c'est joli certes mais fonctionnellement, j'ai un gros doute... :-/<br />
  220. <br />
  221. Sinon pourquoi année renverrait sur archives ? tu fais pas du /archives/année/mois/ ? Sinon j'ai du mal à comprendre comment tu organises les archives pluriannuelles :-P<br />
  222. <br />
  223. En tous cas, ça m'a l'air pas mal du tout tout çà ! Je sens que je vais te piquer qqs idées ou du moins réagir à certaines dans le cadre d'Atome ;-P<br />
  224. <br />
  225. Sinon pour les catégories, tu n'as qu'un niveau de catégories ou une profondeur &quot;inifinie&quot; ?<br />
  226. <br />
  227. Enfin pour les tags chainés, je pense pas que qqn cherche un billet parlant de X + Y (ou du moins, c'est pas encore dans les moeurs, même de ceux des geeks je pense :-P). Déjà un tri par tag simple est déjà pas mal. Ensuite je pense que le &quot;+&quot; est plus parlant que la virgule. Par contre, le &quot;-&quot; est à mon avis pas du tout utilisé (et à implémenter, ça doit pas être évident !)</p>
  228. </div>
  229. </div>
  230. <div class="comment" typeof="schema:UserComments">
  231. <p class="comment-meta">
  232. <span class="comment-author" property="schema:creator">clement</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  233. </p>
  234. <div class="comment-content" property="schema:commentText">
  235. <p>Fais gaffe aussi au choix de tes url pour le référencement : &quot;bistrot&quot; c'est marrant mais moins adapté que &quot;breves&quot;, et &quot;journal&quot; me semble sémantiquement moins juste que &quot;derniers_billets&quot;.<br />
  236. <br />
  237. Aussi, je ne suis pas sûr que regrouper les infos sur l'auteur et les contacts soit une bonne idée : la page contact correspond à un besoin bien particulier, alors que les infos sur l'auteur interviennent dans une stratégie de découverte du blog. En tout cas, mettre les infos sur l'auteur sur une page nommée &quot;contact&quot; me paraît être une erreur...</p>
  238. </div>
  239. </div>
  240. <div class="comment" typeof="schema:UserComments">
  241. <p class="comment-meta">
  242. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  243. </p>
  244. <div class="comment-content" property="schema:commentText">
  245. <p>@NiCoS :<br />
  246. <br />
  247. &gt; Sinon pourquoi année renverrait sur archives ?<br />
  248. <br />
  249. Car le contenu serait pratiquement le même.<br />
  250. <br />
  251. &gt; tu fais pas du /archives/année/mois/ ? <br />
  252. <br />
  253. Non, le /archives/ est de trop, j'avais prévenu il faut être attentif ;-)<br />
  254. <br />
  255. &gt; Sinon j'ai du mal à comprendre comment tu organises les archives pluriannuelles :-P<br />
  256. <br />
  257. Comme sur la page actuelle des archives.<br />
  258. <br />
  259. &gt; Sinon pour les catégories, tu n'as qu'un niveau de catégories ou une profondeur &quot;inifinie&quot; ?<br />
  260. <br />
  261. J'ai finalement opté pour un seul niveau dans les URL, ça devient trop long sinon et l'information censée être la plus pertinente (celle du titre) n'est plus visible.<br />
  262. <br />
  263. &gt; Par contre, le &quot;-&quot; est à mon avis pas du tout utilisé (et à implémenter, ça doit pas être évident !)<br />
  264. <br />
  265. Pas vraiment avec django, il suffit d'appliquer le bon filtre à ton QuerySet.<br />
  266. <br />
  267. @clement : c'est marrant ta remarque car on m'a justement fait remarqué par mail récemment que j'étais bien classé dans google sur la recherche &quot;journal + bioinformatique&quot; comme quoi des fois :-)<br />
  268. Bon être bien référencé sur bistrot c'est vrai que c'est moins intéressant mais est-ce que brèves est mieux ? Sincèrement je sais pas, des fois il vaut mieux suivre son bon sens plus que google. En revanche pour les URL de contenu, j'ai supprimé /journal/ et /bistrot/ car ce n'est pas utile pour identifier la ressource.<br />
  269. <br />
  270. Concernant les info auteur sur la page de contact, c'est principalement pour ne pas charger le menu de haut niveau. Ce &quot;manque&quot; est à mon avis compensé par les petits textes &quot;à propos de l'auteur&quot; qui renvoient sur la page en question. Mais la remarque est judicieuse, je vais encore y réfléchir (et zut moi qui pensait avoir bouclé la partie réflexion ! :p).</p>
  271. </div>
  272. </div>
  273. <div class="comment" typeof="schema:UserComments">
  274. <p class="comment-meta">
  275. <span class="comment-author" property="schema:creator">Eric Daspet</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  276. </p>
  277. <div class="comment-content" property="schema:commentText">
  278. <p>&gt; Mais comment est-ce que tu les présentes au lecteur ? Et surtout comment mettre des liens pour toutes les combinaisons possibles ?<br />
  279. <br />
  280. Dans le listing de /voiture/ tu as une colonne qui &quot;affiner la recherche&quot; qui te propose tous les mots clés qui sont utilisés conjointement à &quot;voiture&quot;. Quand dans cette colonne tu cliques sur &quot;sécurité&quot; c'est un lien qui te mène vers /voiture,securite/. Et ainsi de suite jusqu'à ce que le listing corresponde à ce que souhaite l'utilisateur.<br />
  281. <br />
  282. Je ne pense pas que plus de deux ou trois critères soient pertinent, mais deux ça arrivera fréquemment. En fait je compte utiliser des tags simples non hiérarchiques. Je crois qu'on en avait parlé une fois : utiliser des mots clés très simples et résoudre les ambiguïtés, spécialisations et double sens par l'agrégation de plusieurs mots clés (voiture + sécurité) plutôt que par des mots clés complexes (sécurité routière).<br />
  283. Pour deux mots clés, à la limite trois, je pense que ça restera simple à utiliser.</p>
  284. </div>
  285. </div>
  286. <div class="comment" typeof="schema:UserComments">
  287. <p class="comment-meta">
  288. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">09/03/2007</span> :
  289. </p>
  290. <div class="comment-content" property="schema:commentText">
  291. <p>@Eric Daspet : c'est à peu près le plugin dont je parlais, tu peux le voir en application sur le site de Patrice : <a href="http://www.margaritasanteporcos.com/" title="http://www.margaritasanteporcos.com/" rel="nofollow">www.margaritasanteporcos....</a> lorsque tu navigues dans les catégories.</p>
  292. </div>
  293. </div>
  294. <div class="comment" typeof="schema:UserComments">
  295. <p class="comment-meta">
  296. <span class="comment-author" property="schema:creator">Pierre</span> le <span class="comment-date" property="schema:commentTime">10/03/2007</span> :
  297. </p>
  298. <div class="comment-content" property="schema:commentText">
  299. <p>Merci pour ce billet qui montre l'importance de bien mettre à plat tous les éléments avant de se ruer sur le code ! En plus, l'article est relativement générique et s'applique donc aussi bien à Django qu'à n'importe quel autre framework...<br />
  300. <br />
  301. À propos du design du site : j'adore le design actuel. C'est beau, c'est sobre, etc. Mais comme tout le monde, lors de la sortie d'une nouvelle version d'un logiciel ou d'un site, le premier truc que je regarde, c'est le design... s'il n'a pas changé, c'est toujours un peu dommage... Enfin, tu dois avoir l'expérience des clients qui sont ravis par une version 2.0 d'une appli, alors que tu n'as quasiment pas retouché les fonctionnalités, mais juste le design :-)<br />
  302. <br />
  303. Donc bref, je dirais : change quelques trucs, mais garde l'ensemble &quot;vert, frais et branché&quot; ;-)</p>
  304. </div>
  305. </div>
  306. <div class="comment" typeof="schema:UserComments">
  307. <p class="comment-meta">
  308. <span class="comment-author" property="schema:creator">Simon Rozet</span> le <span class="comment-date" property="schema:commentTime">11/03/2007</span> :
  309. </p>
  310. <div class="comment-content" property="schema:commentText">
  311. <p>Salut,<br />
  312. <br />
  313. Juste pour dire que j'aime vraiment ce vers quoi tu va... cela se rapproche de ma vision du site web idéal, ou il n'y aurait pas de sections spécifiques, juste des aggrégateurs de différents type de ressources et ou chacune d'elle est annotable [1]<br />
  314. <br />
  315. - /foo/bar rdf:type WeblogPost<br />
  316. - /2007/05/blop rdf:type QuickNote<br />
  317. - /journal et /notes aggrégent respectivement les post et les notes<br />
  318. <br />
  319. Il me suffirait de renseigner le rdf:type d'une ressource pour qu'elle soit automatiquement aggrégée par le bon... aggregateur.<br />
  320. Enfin bref :-)<br />
  321. <br />
  322. Sinon, pour l'histoire des tags, j'aime bien l'UI de dilicious, vraiment très pratique. (il est par moi __capital__ de pouvoir renseigner plusieurs tags dans l'URL)<br />
  323. <br />
  324. Autre remarque : IMHO, tu devrais placer une courte description de toi sur la page d'acceuil, avec un lien vers un profil plus complet ... ainsi qu'un FOAF evidemment ! ;-)<br />
  325. <br />
  326. Bonne continuation et bon dimanche<br />
  327. <br />
  328. [1] <a href="http://www.w3.org/2001/Annotea/" title="http://www.w3.org/2001/Annotea/" rel="nofollow">www.w3.org/2001/Annotea/</a></p>
  329. </div>
  330. </div>
  331. <div class="comment" typeof="schema:UserComments">
  332. <p class="comment-meta">
  333. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">12/03/2007</span> :
  334. </p>
  335. <div class="comment-content" property="schema:commentText">
  336. <p>@Pierre : merci pour ton avis :-).<br />
  337. <br />
  338. @Simon Rozet : il faudra vraiment qu'on travaille ensemble un jour ;-)<br />
  339. <br />
  340. Pour le coup du rdf:type effectivement ça serait l'idéal mais pour faire plus simple/supporté je pense que je vais mettre un /rss/ quelquepart dans l'URL, reste à déterminer si c'est en début (comme une ressource) ou en fin (plus comme un attribut), pour le moment j'opte pour la fin.<br />
  341. <br />
  342. Et enfin en ce qui concerne l'enchaînement des tags, vu les réactions je suis en train de reconsidérer le problème. Ce qui me limitait jusqu'à présent c'est aussi le fait qu'une adresse de ressource change lors de l'ajout d'un tag à un billet a posteriori... mais bon je suis peut-être pas obligé de mettre tous les tags dans les URL de billets. Rhâaa, vous me remettez le doute !</p>
  343. </div>
  344. </div>
  345. <div class="comment" typeof="schema:UserComments">
  346. <p class="comment-meta">
  347. <span class="comment-author" property="schema:creator">Simon Rozet</span> le <span class="comment-date" property="schema:commentTime">13/03/2007</span> :
  348. </p>
  349. <div class="comment-content" property="schema:commentText">
  350. <p>&gt;Pour le coup du rdf:type effectivement ça serait l'idéal mais pour faire &gt;plus simple/supporté je pense que je vais mettre un /rss/ quelquepart &gt;dans l'URL, reste à déterminer si c'est en début (comme une ressource) &gt;ou en fin (plus comme un attribut), pour le moment j'opte pour la fin.<br />
  351. <br />
  352. tu voulais dire /rdf/ ? Sinon ont s'est mal compris :-)<br />
  353. <br />
  354. &gt; Ce qui me limitait jusqu'à présent c'est aussi le fait qu'une adresse de <br />
  355. &gt; ressource change lors de l'ajout d'un tag à un billet a posteriori... <br />
  356. <br />
  357. IMHO, le mieux est de pas mettre de tag dans l'URL mais de choisir entre :<br />
  358. - YYYY/MM/slug<br />
  359. - /slug que je préfère car bien plus facile à retenire (j'aime bien les slugs d'aaronsw.com/weblog)</p>
  360. </div>
  361. </div>
  362. </div>
  363. </section>
  364. <footer>
  365. <nav>
  366. <p>
  367. <small>
  368. 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>
  369. </small>
  370. </p>
  371. </nav>
  372. </footer>
  373. </div>
  374. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  375. <script data-no-instant>InstantClick.init()</script>
  376. </body>
  377. </html>