Ductile blog - Côté designerChantier ouvert au public du thème Ductile (livré avec Dotclear 2.4 et suivants) et de ses avatars.2020-04-16T14:29:40+02:00Dotclear/Dotaddict Teamurn:md5:2ba97cd17702fa31bccc232dd0408f4dDotclearConstruire un thème - Jour 8urn:md5:e03cbbee69ba68c21af3ba51a34cd3232011-07-22T10:11:00+02:002011-07-24T14:46:59+02:00KozlikaCôté designer <p>Très cher Franck,</p>
<p>Nous voici tous les deux bientôt arrivés au bout de ce projet commun. J’ai vu toutes les merveilles que tu avais mises en place pour faciliter la vie des utilisateurs, qui en seront, j’en suis sûre, aussi ravis que moi.</p>
<p>Quant à moi, j’ai fini de traiter tous les contextes, il ne restera plus qu’à m’occuper de la compatibilité avec Internet Explorer (j’avoue envisager cette étape comme un pensum) et de débusquer les bugs que j’ai pu laisser passer.</p>
<h3>Un logo</h3>
<p><img src="https://ductile.dotaddict.org/public/illustrations_diverses/logo.png" alt="logo.png" style="float:left; margin: 0 1em 1em 0;" title="logo.png, juil. 2011" /></p>
<p>J’hésite à rendre ce point configurable. J’ai ajouté un logo (fichier <code>top.html</code>). Pour peu que la hauteur de l’image soit inférieure à 70px, l’utilisateur peut tout simplement remplacer logo.png (dans le répertoire img du thème) par l’image de leur choix en la nommant de la même façon. Si l’image est plus haute, ça fera plus moche mais ça marchera aussi ;-)</p>
<p>J’ai utilisé ici la petite feuille fétiche du logo de Dotclear à laquelle j’ai ajouté une ombre.</p>
<h3>Fin des templates</h3>
<p>Il me restait à reprendre les templates présentant le billet ou page seul(e), celui des tags, d’un tag, de la page 404… Au bout du compte, la liste des fichiers présents dans le répertoire <code>tpl</code> s’est allongée par rapport au nombre de templates de l’actuel thème par défaut mais je pense néanmoins que leur manipulation a été simplifiée et que si ce thème devient un jour celui par défaut cela facilitera le travail des thémeux et plugineurs.</p>
<h4>Contextes « billet seul »</h4>
<p>Pour les contextes en solo, sur le même principe que les billets en liste j’ai créé un gabarit (<code>_simple-entry.html</code>) que je place en include dans <code>post.html</code> et <code>page.html</code>.</p>
<p>Je souhaite attirer ton attention sur trois nouveautés :</p>
<ul>
<li>Contrairement à l’actuel thème par défaut, je ne procède à aucune distinction entre billet et page quant à la présentation (notamment le placement des informations de date, auteur…).</li>
<li>Les commentaires et les trackbacks ne sont plus séparés et ceci pour deux raisons : d’une part le trackback ne se pratique plus guère et ça encombrait inutilement à mon sens, d’autre part je trouve plus cohérent de pouvoir voir les trackbacks effectués dans le fil chronologique de toutes les réactions. Dans Ductile, ils restent distingués visuellement par une icône différente (et la class css est maintenue dans les templates).</li>
<li>Au sujet des commentaires et trackbacks, le thème par défaut les organise via une liste de définition, ce qui n’est pas très heureux sur le plan sémantique. J’ai donc modifié la structure pour les placer dans une liste non ordonnée.</li>
</ul>
<h4>404, tag, tags…</h4>
<p>Rien de bouleversant pour ces pages si ce n’est que j’ai un peu complété la 404 qui me semblait bien nue.</p>
<h3>La suite ?</h3>
<p>La suite c’est que notre chef vénéré a proposé d’inclure Ductile dans la livraison de la future 2.4 de Dotclear qui sortira dans l’été s’il est prêt à ce moment-là. Il va donc falloir le tester à fond : manquerait plus que Dotclear faillisse à sa réputation de robustesse et de fiabilité !!!</p>
<p>Je lance donc un appel à tous pour que vous installiez le thème (en pièce jointe) sur votre blog ou un blog de test et que vous fassiez remonter ici dans les commentaires toutes les anomalies que vous rencontrez et toutes vos suggestions d’amélioration. Ne tenez pas compte d’Internet Explorer pour le moment, je ne m’en suis pas encore occupée, c’est la dernière étape de mon <a href="https://ductile.dotaddict.org/pages/Un-theme-en-une-semaine">planning type</a>.</p>
<p>Nous n’en sommes pas encore à la conclusion finale mais je voudrais te remercier pour cette très agréable collaboration, je me demande si nous ne pourrions pas envisager d’autres projets communs ?</p>
<p>En attendant tes remarques et celles d nos visiteurs, je t’envoie de bons baisers pluvieux de Paris !</p>Construire un thème - Jour 7urn:md5:ba3d87eff7cc0938a268d4e759e7a7242011-07-13T06:11:00+02:002011-07-24T14:42:23+02:00KozlikaCôté designerCSSlistesun tag de plus <p>Mon bien cher Franck,</p>
<p>Tout d’abord, laisse-moi te remercier pour ce plugin « Simple Menu », si pratique à utiliser. Je me suis évidemment empressée de jouer avec pour remplir « pour de vrai » notre barre de menu du header. Je n’ai pas chômé de mon côté et traité tous les contextes présentant des listes ainsi que la page d’archives.</p>
<h3>Contextes avec listes</h3>
<p>Pour les contextes avec liste, j’ai utilisé la nouvelle balise que tu as créée – et sur laquelle tu reviendras peut-être ? – qui permet de choisir le « format » de chaque billet depuis le configurateur. C’est rudement pratique de ne pas avoir à éditer chaque fichier !</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_diverses/list_item_config.png" title="Ductile - Configurateur des listes"><img src="https://ductile.dotaddict.org/public/illustrations_diverses/list_item_config.png" alt="Ductile - Configurateur des listes" style="display:block; margin:0 auto;" title="Ductile - Configurateur des listes, juil. 2011" /></a></p>
<p>Tu noteras que les pages de tag, si elles sont bien prévues dans ton configurateur, ne prennent pas en compte les réglages. C’est que je n’ai pas encore traité les contextes gérés par des plugins. Ceux qui téléchargeront le zip du thème en son état du jour pourront donc s’amuser à comparer les nouveaux templates html avec le template tag.html par défaut et remplacer le code du billet par la balise kivabien.</p>
<p>Au fait, puis-je suggérer – si c’est possible ! – qu’une troisième colonne de ce module permette d’indiquer le nombre de billets par page en fonction du contexte ? J’ai toujours trouvé contraignant que ce nombre soit identique quel que soit le type de page. Quand je choisis « Titre » par exemple, je voudrais en mettre beaucoup plus que lorsque je choisis « Complet ».</p>
<p><strong>Spécificité de la home :</strong> j’ai décidé unilatéralement que le billet le plus récent doit être entier en toutes circonstances. Le choix porte donc sur les billets suivants.</p>
<h3>La page des archives</h3>
<p>J’ai quelque peu détourné, ou plutôt complété, la page des archives, comme tu pourras le voir si tu t’y rends. Elle ressemble plus désormais à centre d’aiguillage ou plan de site. Elle se présente en trois parties :</p>
<ul>
<li>dans la première (<code>div id="time-criteria"></code>), le même contenu qu’auparavant (la liste des mois de parution) ;</li>
<li>dans la seconde (<code><div id="other-criteria"></code>), d’autres formes de tri : par catégorie et par tag. A toi de compléter, en fonction de tes plugins installés avec un tri par auteur par exemple ;</li>
<li>dans la troisième partie (<code><div id="more-arch"></code>), tu glisseras ce qu’il te semble utile d’ajouter ici. Pour ma part, j’ai ajouté la liste des pages.</li>
</ul>
<p>Pour le sidebar j’étais un peu embêtée : soit je récupérais tous les widgets en insérant le sidebar au complet – auquel cas il y avait des redondances nombreuses (liste des catégories, des tags…), soit je sabrais le tout pour décider unilatéralement de n’y afficher que tel ou tel widget.</p>
<p>J’ai fait une cotte mal taillée en décidant d’inclure uniquement la boîte de recherche et le bandeau d’extra mais je vous invite, nos visiteurs et toi, à <em>brainstormer</em> ensemble si vous avez une meilleure idée !</p>
<h3>Et autres bidules</h3>
<p>J’ai profité de cette nouvelle étape pour apporter quelques petites modifs. Je les ai faites au fil de l’eau, il se peut donc que cette liste ne soit pas exhaustive :</p>
<ul>
<li>les titres non cliquables sont en couleur (configurable) ;</li>
<li>ajout d’une icône sur les dates ;</li>
<li>la mention de la catégorie affiche tout le breadcrumb s’il s’agit d’une sous-catégorie ;</li>
<li>les séparateurs de billets sont mieux gérés quand les commentaires et rétroliens sont fermés.</li>
</ul>
<h3>À venir</h3>
<p>Il me reste à améliorer la présentation des contextes restants, ce que je m’emploierai à faire dans les jours prochains. Au fait, j’ai créé une page pour expliquer dans quel ordre je fais habituellement les choses : <a href="https://ductile.dotaddict.org/pages/Un-theme-en-une-semaine">Une semaine pour un thème</a>.</p>
<p>Voilà mon cher Franck les nouveautés du jour. Nous comptions finir pour le 14 juillet et cette date sera dépassée, d’autant que nous avons prévu un week-end prolongé en colonie de vacances toulousaine, mais nous avons tout de même bien avancé. Vive le travail d’équipe !</p>
<p>À très bientôt,</p>
<p>Kozlika</p>Construire un thème - Jour 6urn:md5:890b6f700019522e8310264dfb00dec62011-06-29T14:08:00+02:002011-07-24T14:43:14+02:00KozlikaCôté designerCSShome.htmlinclude <p>Franck, mon ami,</p>
<p>J’ai commencé comme convenu à reprendre les fichiers de structure pour les améliorer (en tout cas c’était mon but). Tu verras quelques changements dans la partie visible du blog mais tu en verras surtout dans l’organisation et le contenu des fichiers du dossier tpl. Laisse-moi te les décrire.</p>
<p>Voici la liste des changements opérés (comme d’habitude, tu peux télécharger le thème en pièce jointe). Je te les énonce ci-dessous, puis dans le paragraphe suivant je t’en donnerai quelques explications et exemples d’usage, puis je ferai appel à ta compétence et ton amabilité pour mettre en place quelques trucs chouettes de plus dans le configurateur. Pour finir, je te parlerai d’un autre projet concurrent et/ou complémentaire qui fait l’objet de débats au sein de l’équipe de Dotclear en ce moment au cas où tu aurais zappé les mails de ces derniers jours.</p>
<h3>Changeset</h3>
<p><em>(Tu as vu cet intertitre qui tue ? J’aime bien faire ma maline en utilisant vos termes de geek.)</em></p>
<ul>
<li>Le sidebar n’est plus répété à chaque fichier de contexte, il est inséré via l’inclusion de <code>_sidebar.html</code></li>
<li>Création de trois modèles d’affichage de billet pour les listes :
<ul>
<li><code>_entry-full.html</code> : billet complet</li>
<li><code>_entry-short.html</code> : extrait s’il existe, sinon les 300 premiers caractères</li>
<li><code>_entry-title.html</code> : uniquement le titre</li>
</ul></li>
<li>Ajout d’une class sur la div.post selon la typologie du post (full|short|title)</li>
<li>Ajout d’une div.post-attr englobant post-info et post-tags</li>
<li>Ajout de spans avec class sur les items du post-info
<ul>
<li>span.post-author</li>
<li>span.post-date</li>
<li>span.post-cat</li>
</ul></li>
<li>Passage des post-tags de ul.post-tags à p.post-tags</li>
<li>Déplacement du script mediaqueries dans _footer.html</li>
</ul>
<h3>Explications et exemples d’usage</h3>
<p><strong>Le sidebar.</strong> Je pense que s’il t’est arrivé de faire des thèmes ou de vouloir en personnaliser un et que tu avais des choses à modifier dans le sidebar, tu as dû – comme nous tous designers d’occasion ou réguliers – pester contre la nécessité de devoir reporter la modif dans <em>tous</em> les fichiers de structure. L’insertion du sidebar via un include d’un fichier commun permet de n’avoir à intervenir qu’une fois, sur le fichier <code>_sidebar.html</code> pour que la modif s’affiche partout.</p>
<p><strong>Les _entry-xxx.html.</strong> Cette construction répond à plusieurs objectifs :</p>
<p>Pour le designer ou celui qui personnalise son thème – un peu dans le même esprit que ce que je viens d’expliquer pour le sidebar –, on peut ainsi intervenir sur un seul modèle pour tous les contextes ou il s’affiche. Si par exemple je veux remplacer “Par” par “Auteur” dans le post-info je n’aurai pas besoin de modifier tous les fichiers de contexte. J’en ai profité pour ajouter une class à la div.post afin qu’on puisse appliquer des styles différents si on le souhaite selon le type de liste choisi.</p>
<p>Pour un plugin nécessitant un fichier template comportant une liste, un moyen simple de récupérer les choix du designer ou de l’utilisateur quant à l’affichage de la liste.</p>
<p>Pour Ductile – ou tout autre thème voulant utiliser cette fonctionnalité – la possibilité de laisser le choix au blogueur du format de liste qu’il souhaite voir affichée selon le contexte. Ahem… me vois-tu venir avec mes gros sabots ?</p>
<p>Au fait, je précise que le fait que ces listes toutes prêtes soient disponibles n’interdit évidemment nullement de s’en exonérer et de construire son propre biniou dans un contexte donné, voire de créer un autre format de liste générique et de l’utiliser en include comme ceux proposés ici.</p>
<p>Tu peux voir de toi-même dans les fichiers comment on peut les utiliser. J’ai appelé le modèle entry-full pour le premier billet et le modèle entry-short pour les suivants dans la home ; j’ai appelé le modèle entry-title dans les archives mensuelles.</p>
<p><strong>Ajout de class diverses et variées.</strong> Elles permettront bien sûr de pouvoir affiner la présentation via les CSS. D’ores et déjà, sur Ductile, tu peux voir que j’ai ainsi pu mettre une icône sur la mention de la catégorie du billet. Il m’a fallu pour cela diviser le post-info en trois spans, l’un pour le nom de l’auteur, l’autre pour le jour de publication et le dernier pour la catégorie. Je ferai de même dans le contexte du billet ou de la page seul(e) en ajoutant également un span pour le lien permanent.</p>
<p><strong>Création d’un bloc post-attr.</strong> Je regroupe le post-info et les post-tags dans une div englobante, là encore pour permettre des choses comme ce que tu peux voir sur les écrans larges de Ductile<sup>[<a href="https://ductile.dotaddict.org/post/2011/06/29/Construire-un-th%C3%A8me-Jour-6#pnote-25-1" id="rev-pnote-25-1">1</a>]</sup>, mais ça pourrait être aussi pour ajouter un fond de couleur ou une bordure ou que sais-je encore.</p>
<p>Je ne trouvais pas logique que les éléments du post-info soient dans un paragraphe et les tags dans une liste. Une revue quasi complète des thèmes déposés sur Dotaddict montrant que tout le monde ou presque présente les tags les uns à la suite des autres, j’ai donc suivi le mouvement et placé les tags dans un paragraphe.</p>
<p>Tant que j’y étais et sur les conseils de Tomtom, j’ai déplacé dans le footer l’appel du script de compatibilité d’IE9 avec les mediaqueries. Il paraît que c’est mieux pour les perfs.</p>
<h3>Et donc, disions-nous…</h3>
<p>Ce qui te fait donc un petit tout petit vraiment tout petit travail en plus, si tu es d’accord bien sûr et en échange de ma reconnaissance éternelle et d’un bisou. Je verrais bien dans l’onglet « Contenu » du configurateur la liste des contextes proposant une liste et un menu déroulant pour choisir le modèle d’icelle. Tu veux bien dis ? J’aimerais autant que possible éviter à l’utilisateur du thème d’avoir à mettre le nez dans les fichiers sans pour autant être limité à des choix de présentation CSS.</p>
<h3>Dans les coulisses</h3>
<p>En coulisses, sur la liste mail de l’équipe de Dotclear, j’ai parlé de mes projets de modifications des fichiers html. C’est là que Bruno d’une voix tonnante s’est exclamé : <del>« Bandes de nazes, êtes-vous en train de me dire que vous foutez ma super idée à la poubelle ? »</del> « Je crois que vous n’avez pas eu le temps de lire <a href="http://forum.dotclear.org/viewtopic.php?id=42504">la proposition très construite</a> que je fis jadis sur le forum. »</p>
<p>Enfer et damnation, c’est à ce moment que j’ai dû avouer que je l’avais lue… et n’avais pas trop compris l’affaire ou du moins compris l’idée mais pas réussi à m’imaginer concrètement la mise en œuvre de cette idée. D’ailleurs tu dois t’en souvenir car quand sur son injonction je suis retournée lire son message sur le forum et que tu en faisais autant assis à côté de moi, nous avons prononcé à peu près en même temps : moi « iféchié cé 1 truckdegeekimbittable », toi « c’est intelligent ! »</p>
<p>Depuis il a pris le temps de réexpliquer dans ses mails et je trouve ça un peu moins imbittable, toujours aussi geek et je redoute que cette solution offre plus de simplicité apparente (moins de copier-coller pour créer un nouveau contexte ou en modifier un existant) mais moins de compréhension intuitive et par là-même moins accessible aux novices. Mais, me diras-tu, tu disais déjà ça pour les thèmes quand on est passés de Dotclear 1 à Dotclear 2 – et je ne pourrai pas te dire le contraire…</p>
<p>Nous doutons donc tous, chacun dans son coin, ou nous pestons contre l’Ennemi, ça dépend de l’humeur. On argumente, on donne des exemples, des contre-exemples, on essaie de dessiner ce qu’on a compris pour y voir plus clair. Tous les dev de l’équipe sont emballés par la proposition de Bruno et je comprends bien que côté code elle est élégante. En tout cas, la discussion n’est pas tranchée et il s’ensuit que nous allons continuer à travailler sur Ductile mais sous l’angle d’un thème à distribuer hors Dotclear, quitte à l’y rapatrier quand la discussion autour de la refonte des templates sera aboutie.</p>
<p>Bien évidemment je compte sur nos visiteurs pour apporter leur pierre à <a href="http://forum.dotclear.org/viewtopic.php?id=42504">la discussion ouverte par Bruno sur le forum</a> et/ou ici.</p>
<p>J’espère avoir bientôt de tes nouvelles et t’embrasse bien fort.</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://ductile.dotaddict.org/post/2011/06/29/Construire-un-th%C3%A8me-Jour-6#rev-pnote-25-1" id="pnote-25-1">1</a>] Du coup j’ai mis des tags à ce billet…</p></div>
Construire un thème - Jour 5urn:md5:495fc89935fa7acb0ae4cf3154533fe62011-06-21T20:03:00+02:002011-07-24T14:43:38+02:00KozlikaCôté designer <p>Très cher complice,</p>
<p>Tu ne trouveras rien de véritablement neuf dans la livraison d’aujourd’hui. C’est que, mais tu le sais, il faut parfois savoir opérer quelques ruptures de rythme dans nos fols élans afin de savourer l’instant présent et le rendre plus parfait encore. Rien ne presse, n’est-il pas, à faire cesser au plus vite ces moments de délicieux partage.</p>
<p>Voici donc en ce cinquième jour quelques progrès réclamés par les amis qui ont eu la gentillesse de nous rendre visite en ce lieu et d’autres qui se sont fait jour.</p>
<h3>Les stickers</h3>
<p>Tu t’en souviens peut-être, j’avais promis <a href="https://ductile.dotaddict.org/post/2011/06/18/Ce-que-Ductile-est-et-ce-qu-il-n-est-pas">il y a quelques jours</a> – dans un de ces instants de folie où mon esprit s’abstrait des contraintes de mon agenda – de rédiger quelques tutoriels dignes de ce nom et les publier ici, dans la rubrique À la loupe. C’est ce que j’entrepris de commencer avant-hier dans le but d’expliquer pas à pas le HTML et les CSS utiles à la présentation des stickers en fonction de la largeur de la fenêtre de consultation.</p>
<p>Enfer et patatras, ce fut là l’occasion de me rendre compte que le code donné au détour du <a href="https://ductile.dotaddict.org/post/2011/06/15/Construire-un-th%C3%A8me-Jour-4">quatrième jour</a>, s’il fonctionnait bien sur le plan graphique, présentait des soucis sur le plan de l’accessibilité. Plus précisément, ainsi que je l’avais construit les personnes utilisant un lecteur d’écran allaient entendre énoncée deux fois la même chose : le texte de remplacement de l’image et l’intitulé du lien. Or le texte de remplacement, s’il fait double usage lorsque ces liens sont en bas manquait cruellement en haut, là où ne s’affiche <em>que</em> l’image. J’avais d’autres contraintes avec lesquelles négocier mais dont je te fais grâce.</p>
<p>Retiens seulement que le designer, qu’il soit professionnel ou d’occasion, gagne à devoir expliquer et décortiquer son code… et se rendre compte au passage que savapa, savapadutou.</p>
<p>Voici donc dans cette livraison le code pour les stickers modifié. Je finirai de rédiger le tutoriel et le publierai dans les jours qui viennent, probablement pas avant ce week-end parce que pour le reste de cette semaine je finis <a href="http://www.temesis.com/accessibilite-7/formation-accessibilite/formation-expert-accessibilite.html">ma formation</a> chez Temesis et j’ai des devoirs à rendre.</p>
<h3>Le sidebar</h3>
<p>À l’usage, à force de jouer à agrandir et rétrécir la fenêtre, le fameux mal de mer dont nous parlions au sujet des mediaqueries m’a saisie : c’est que j’avais réglé la largeur du sidebar en pourcentage de la largeur de la page. Les mediaqueries n’y sont d’ailleurs pour rien en l’occurrence, mais le mal de mer est le même !</p>
<p>La largeur du sidebar est donc fixée proportionnellement à la taille des caractères, ce qui s’obtient en lui donnant une dimension en <code>em</code>.</p>
<p>Dans ma lubie de l’instant j’ai aussi changé sa couleur de fond pour un gris pâle à la place du beige clair.</p>
<h3>Les titres sur petit écran/fenêtre</h3>
<p>Je me suis rendue aux raisons de nos petits camarades et j’ai réduit un peu la taille des titres sur grande largeur et surtout considérablement la taille des titres des billets sur petite largeur. Comme je trouvais le résultat esthétique peu réussi en conservant les autres paramètres (italique et maigre) dans le cas des petites largeurs, j’ai, du même coup, réglé ces titres pour qu’ils soient en romain gras. Tu me diras ce que tu en penses ?</p>
<p>Du reste, grâce aux merveilles du <a href="https://ductile.dotaddict.org/post/2011/06/18/Configurateur-de-th%C3%A8me-Jour-4">configurateur que tu nous concoctes avec amour</a>, ceux à qui ces titres ne plairaient pas auront tout loisir de les modifier.</p>
<h3>et autres broutilles</h3>
<p>Il y a d’autres petites choses mais j’ai bien faim et aucune d’entre elles ne change l’apparence de façon flagrante. Le noir un peu plus noir ici, le padding de deux pixels de plus là…</p>
<p>Je pense que tu me pardonneras aisément de ne pas les décrire une à une, lentilles, harengs et oignons frais m’appellent désespérément ! Comme d’habitude je t’invite chaleureusement à décompresser (le zip en pièce jointe) et entreprendre son délicat effeuillage.</p>Construire un thème - Jour 4urn:md5:76c846394a72db224f287cbb772fe3d82011-06-15T21:24:00+02:002011-07-24T14:44:17+02:00KozlikaCôté designer <p>Très cher Franck,</p>
<p>Je sens que tu vas te moquer de moi, mais tu avais vu juste : je commence à m’éloigner quelque peu des premières maquettes au fur et à mesure que je mets en place les règles CSS « pour de vrai ». Aujourd’hui, tu pourras découvrir l’entête et le pied de page « définitifs » (sous réserve d’ajustements mineurs). J’ai aussi un tout petit peu modifié le comportement en fonction des <em>mediaqueries</em>.</p>
<p>Ce jour est aussi le premier où j’apporte des modifications aux fichiers HTML. Aujourd’hui <code>top.html</code> et <code>footer.html</code></p>
<p>Rituellement, insérons ici pour mémoire une capture du thème dans son état avant aujourd’hui :</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/capture_jour3.png" title="Capture Ductile, Jour 3"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.capture_jour3_m.jpg" alt="Capture Ductile, Jour 3" style="display:block; margin:0 auto;" title="Capture Ductile, Jour 3, juin 2011" /></a></p>
<p>Et maintenant, si tu me lis depuis ton agrégateur, viens jeter un œil sur le blog… Tu as vu ? Un haut de page, ça change pas mal l’allure d’une page, non ? Il serait trop long de détailler toutes les modifications, n’hésite pas à me poser des questions si tu en as sur la façon de réaliser ceci ou cela. Je choisis aujourd’hui de m’attarder sur quelques points.</p>
<h3>La boîte de recherche</h3>
<p>Je me suis pas mal creusé la tête sur la façon dont j’allais pouvoir gérer ça uniquement avec les CSS. En effet, il s’agit là d’un thème distribué et non d’un thème sur mesure. Or je ne peux pas savoir si l’utilisateur voudra ou non insérer le widget de recherche et s’il l’insère je ne sais pas s’il le placera en premier ou non dans la zone bandeau de navigation. Telle que tu la vois, c’est la première boîte, mais tu penses bien que si l’utilisateur du thème devait la placer ailleurs, ça ferait bien moche !</p>
<p>Il fallait donc cibler cette boîte si et seulement si elle se trouvait tout en haut du « sidebar » et lui laisser la présentation normale au cas où elle soit placée ailleurs. Je n’ai donc pas modifié les règles du « jour 3 » mais j’en ai ajouté. Par ailleurs, comme cette présentation ne conviendrait pas pour le cas où les boîtes se trouvent en bas de la page, je n ‘ai pas placé ces nouvelles règles dans le fichier général <code>style.css</code> mais dans le fichier comportant les règles spécifiques, <code>mediaqueries.css</code>, sur le sélecteur englobant les règles concernant les fenêtres de plus de 1024px de large.</p>
<p>Et voici comment cibler la boîte de recherche si et seulement si elle est placée en premier de tous les widgets :</p>
<pre class="brush: css">#sidebar #blognav div:first-child { }
#sidebar div#search:first-child { }
#sidebar div#search:first-child h2 { }
#sidebar div#search:first-child p { }</pre>
<p>Je ne les mets pas toutes, je pense que tu as compris le principe ! Comme tu es très observateur, j’anticipe ta question : <em>« Mais, me diras-tu, la première ligne ne mentionne pas la boîte de recherche ! »</em> et après t’avoir complimenté sur ta fine remarque je te répondrai que cette première règle me permet d’indiquer que faire de la première boîte (en l’occurrence, lui ajouter une marge haute pour qu’elle s’aligne avec la partie gauche).</p>
<p>J’espère que je suis assez claire et que ces explications ainsi que le zip qui accompagne ce billet te permettront de comprendre la manip. Si tu joues avec le thème, place la boîte de recherche ailleurs qu’en premier widget pour voir la différence.</p>
<h3>Les stickers</h3>
<p>Il s’agit des trois éléments tout en haut à droite. Il fallait trouver un moyen pour qu’ils s’affichent en haut sur les largeurs supérieures à 480px et en larges boutons en bas de la page pour les dimensions inférieures.</p>
<h4>Première étape : la source</h4>
<p>Je t’invite à regarder le nouveau fichier <code>footer.html</code> pour constater les modifications faites. Quand tu les ajouteras à la configuration n’oublie pas de leur affecter un identifiant correspondant à leur numéro d’ordre et d’affecter au dernier d’entre eux la classe <code>last</code>.</p>
<p>L’utilisateur choisira donc quels liens parmi les trois possibles il veut ajouter à cet endroit, dans quel ordre et vers quelle URL cela doit diriger.</p>
<p>Tu noteras que j’ai mis les images « en dur » et placé le texte assorti dans un <code>span</code>. Ces deux choses me permettent de cacher le texte quand les stickers sont en haut (et que l’image soit cliquable et accessible) et de limiter la zone de l’image quand les stickers sont en bas.</p>
<h4>Deuxième étape : les CSS</h4>
<p>Si j’ai choisi de placer ces liens dans le pied de page par défaut c’est qu’il s’agit là à mon sens de leur place « naturelle » ; je les « remonte » sur les grandes largeurs, grâce à un positionnement en <em>absolute</em>. La difficulté que j’ai rencontrée était de réussir à réduire la zone affichée des images pour garder à ces liens des hauteurs normales sur les petites largeurs.</p>
<p>Pour cela j’ai utilisé les règles suivantes dans les règles concernant les largeurs inférieures à 480px :</p>
<pre class="brush: css">#stickers {
margin: 0;
padding: 0;
border-bottom: 8px solid #fff;
}
#stickers li {
position: relative;
line-height: 2.5em;
margin-left: 0;
padding-left: 0;
border: 2px solid #fff;
border-left: 8px solid #fff;
border-right: 8px solid #fff;
}
#stickers img {
display: block;
position: absolute;
clip: rect(0px,32px,32px,0px);
}
#stickers span {
margin-left: 40px;
}</pre>
<p>Note la <code>position: relative</code> attribué aux <code>li</code>, c’est afin de pouvoir donner une <code>position:absolute</code> à l’image, indispensable à l’utilisation de la propriété <code>clip</code>. Ne me demande pas pourquoi mais c’est une condition impérative pour que le clip fonctionne. Je l’ai lu mais n’ai pas trouvé d’explications à ce sujet.</p>
<h3>Le haut de page</h3>
<p>J’ai apporté un gros lot de nouveautés dans cette zone, gérée dans le fichier <code>top.html</code>.</p>
<h4>Déplacement des liens d’évitement</h4>
<p>C’est une décision provisoire – et qui ne bouleversera pas les choses si je le redéplace – mais l’accessibilité recommande de placer les liens d’évitement le plus haut possible dans la page. Leur placement dans les versions actuelles du thème par défaut de Dotclear n’est pas incorrect (juste après le titre du blog) mais comme j’aimerais que le titre et le sous-titre du blog soient dans un bloc cohérent et que je ne voulais pas rejeter les liens d’évitement après, je les ai carrément mis en tout premier lieu.</p>
<h4>Ajout de la description du blog</h4>
<p>Demande souvent faite par les utilisateurs sur le forum : que la description du blog, actuellement utilisée seulement dans le flux RSS, puisse s’afficher sur le blog. Je l’ai donc insérée. Si tu le peux, je crois que ça serait bien que le configurateur du thème permette de préciser si on veut ou pas qu’elle soit visible sur le blog.</p>
<h4>Ajout d’un menu de premier niveau</h4>
<p>Là aussi c’est une demande de plus en plus fréquente. Nous avons d’ailleurs un « ticket » qui propose la livraison par défaut d’un plugin de gestion de menu dans la distribution de base Dotclear. Je ne sais pas quelle sera la décision de l’équipe, aussi pourrions-nous passer pour le moment par le configurateur, d’autant que mon menu à moi prévoit la présence d’un sous-titre à chaque item et ne prévoit pas de sous-menus.</p>
<p>Je n’aime pas les sous-menus, ça m’agace de devoir survoler un lien pour voir d’autres bidules, de veiller à descendre soigneusement verticalement pour atteindre celui qui m’intéresse en veillant scrupuleusement à ne pas relâcher ma souris avant d’avoir atteint le Graal.</p>
<p>Comme par ailleurs ce type de menu pose des difficultés ergonomiques et d’accessibilité, zou, pas de niveaux inférieurs !</p>
<p>Quant à la présentation, je te laisse découvrir les CSS non sans t’avoir montré auparavant que quelques lignes suffisent à modifier l’ambiance générale du blog rien qu’en retouchant deux-trois règles. Regarde :</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/var1.png" title="Voir en grand la variation 1"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.var1_s.jpg" alt="Variation 1 (calme)" title="Variation 1 (calme) " /></a>
<a href="https://ductile.dotaddict.org/public/illustrations_tutos/var2.png" title="Variation 2 (joyeuse)"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.var2_s.jpg" alt="Variation 2 (joyeuse)" title="Variation 2 (joyeuse) " /></a>
<a href="https://ductile.dotaddict.org/public/illustrations_tutos/var3.png" title="Variation 3 (web 2.0 nostalgie)"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.var3_s.jpg" alt="Variation 3 (web 2.0 nostalgie)" title="Variation 3 (web 2.0 nostalgie) " /></a>
<a href="https://ductile.dotaddict.org/public/illustrations_tutos/var4.png" title="Variation 4 (tiens, un bateau !)"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.var4_s.jpg" alt="Variation 4 (tiens, un bateau !)" title="Variation 4 (tiens, un bateau !) " /></a></p>
<p>Dans le second fichier .zip joint à ce billet tu trouveras pour chaque variation sa capture d’écran, l’image de fond utilisée et les règles CSS assorties. Amuse-toi bien et si les lecteurs et toi voulez nous montrer vos variations, welcome !</p>
<p>Oh la la, tu as vu l’heure ? Ma maman va me gronder si je ne vais pas me coucher car demain j’ai école. Que la nuit te soit douce, très cher Franck, et à bientôt !</p>Construire un thème - Jour 3urn:md5:d5008367e4d4e968aca0020c1ad1a40e2011-06-09T18:12:00+02:002011-07-13T07:13:17+02:00KozlikaCôté designer<p>Bonjour cher Franck,</p>
<p>J’espère que tu as pris beaucoup de photos de bateaux et que le ciel te fut aussi clément qu’à moi, qui n’ai connu que des jours ensoleillés dans ma retraite studieuse bigoudène. Comme nous en sommes convenus dans les commentaires du billet précédent, j’ai fait – je crois – tout ce qui était possible sans toucher aux fichiers templates. Nous avons donc aujourd’hui un thème (téléchargeable en bas de ce billet) « full css » sur la base de la structure par défaut.</p> <p>Comme au jour 2, je prends tout d’abord un instantané du rendu du blog à l’étape précédente pour pouvoir comparer avant/après.</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/capture_jour2.png" title="Capture Ductile, Jour 2"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.capture_jour2_m.jpg" alt="Capture Ductile, Jour 2" style="display:block; margin:0 auto;" title="Capture Ductile, Jour 2, juin 2011" /></a></p>
<p>Idéalement j’aurais fait une capture de tous les contextes pour pouvoir comparer mieux encore, mais les bras m’en tombent et la digestion des crêpes n’y est pas propice. Je vais plutôt te raconter ce que j’ai fait.</p>
<h3>Côté structure (mediaqueries.css)</h3>
<p>Désormais, le « sidebar » prend sa place en fonction de la largeur de la fenêtre de consultation : en bas jusqu’à 960px, sur le côté au-delà. Pour les ombrages (et il en est de même pour chaque élément à ombrage ou à fond dégradé), j’ai utilisé les nouvelles possibilités offertes par CSS3. Sur les navigateurs à la traîne, ça restera présentable mais moins joli. Je t’invite donc à jouer à réduire et agrandir ta fenêtre pour mieux te rendre compte des adaptations.</p>
<h3>Côté styles (style.css)</h3>
<p>J’ai copié-collé le contenu de la feuille de style vierge <a href="http://themes.dotaddict.org/post/Aorakits">base.css</a> qu’on trouve sur Dotaddict, dans la série des Aorakits puis j’ai pu ainsi appliquer les styles que je souhaitais pour chaque élément. Mine de rien, cette feuille de base sert également de checklist des choses auxquelles penser ! (À part ça, je me suis rendue compte de quelques petits points à corriger dans ce fichier base.css, je tâcherai de faire une mise à jour sur Dotaddict sans trop tarder).</p>
<h4>Les titres</h4>
<p>Comme souvent une fois en condition réelle, j’ai finalement un peu modifié la présentation des titres par rapport à la maquette : leur couleur prend un beau framboise écrasée sur les affichages « en liste » et ils sont surtout beaucoup plus gros. J’espère que ça te plaira parce qu’ils me conviennent bien comme ça. Il m’arrive régulièrement de faire découvrir un blog ou un autre à des personnes n’en fréquentant pas jusqu’alors ; j’ai constaté qu’ils étaient souvent perdus dans le repérage du « quoi lire ». Une bonne mise en valeur du contenu important devrait favoriser leur lecture.</p>
<h4>Les commentaires</h4>
<p>Je ne me suis pas trop compliqué la vie, il est possible que j’y revienne plus tard, mais pour l’instant ils sont déjà nettement plus pratiques à lire et le formulaire plus confortable à utiliser. Je reviendrai à ce formulaire quand je modifierai les fichiers de structure car j’aimerais l’organiser autrement, notamment en plaçant le champ de saisie <em>avant</em> les renseignements sur l’auteur du commentaire. Ça me semble plus logique et plus convivial : placés avant ces champs semblent exiger de montrer patte blanche pour avoir le droit de réagir à un article…</p>
<h4>Le sidebar</h4>
<p>Une série de boîtes à fond kaki léger (toujours cette préoccupation de faciliter l’ergo en lecture) ; cette série de boîtes s’empile en bas de page sur les largeurs inférieures à 960px, en une ou deux colonnes selon les cas. Quand on les repliera je pense que ça rendra bien.</p>
<h4>Le contexte du billet seul</h4>
<p>J’ai mis en forme cette partie en m’appuyant sur le billet « les balises wiki in situ » de mon blog de test en local. Ce billet bien pratique permet de n’oublier aucune des principales balises html.</p>
<h4>Les autres contextes</h4>
<p>Et pour finir je me suis occupée des autres contextes.</p>
<p>Il y a des choses à peaufiner mais je n’ai pas jugé utile d’aller plus loin dans le contexte du jour (c’est-à-dire sans toucher aux fichiers .html) puisque je devrai y revenir une fois tous les éléments bien en place dans leurs fichiers.</p>
<p>N’hésite pas à me poser des questions sur telle ou telle mise en forme ou à me faire part de tes remarques. J’y répondrai avec le grand plaisir que j’ai toujours de converser avec toi.</p>
<p>Je te souhaite une très agréable soirée en compagnie non moins agréable.</p>Construire un thème - Jour 2urn:md5:6c14db8a3de38090f788c6721b8d99a42011-06-02T09:31:00+02:002011-07-13T07:13:17+02:00KozlikaCôté designer<p>Mon cher Franck,</p>
<p>J’espère que tu voudras bien me pardonner ce relatif long silence mais j’étais partie quelques jours. Me revoilà en pleine forme pour te raconter le franchissement de la seconde étape de notre thème. C’est encore un tout petit pas. Au fur et à mesure que passeront les jours les pas deviendront de plus en plus grands, mais je préfère commencer doucement.</p> <p>Et tout d’abord, puisque tu me lis, c’est que tu vois le thème tel qu’en sa version d’aujourd’hui. Pour qu’on puisse constater l’évolution d’un jour à l’autre, j’ai fait une petite capture d’écran du thème en son Jour 1.</p>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/capture_jour1.png" title="Capture Ductile, Jour 1"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/.capture_jour1_m.jpg" alt="Capture Ductile, Jour 1" style="display:block; margin:0 auto;" title="Capture Ductile, Jour 1, juin 2011" /></a></p>
<h3>Les CSS du jour</h3>
<p>J’ai travaillé aujourd’hui sur l’entête du blog, j’ai caché les liens d’accès rapides et modifié un peu la présentation des titres du billet. En fait, pour causer CSS, je me suis appliquée à fixer les règles pour tout ce qui est dans <code>#top</code> et tout ce qui est dans <code>.post</code>. C’est ma façon habituelle de travailler : d’abord la page d’accueil, puis le contexte du billet seul et ensuite les autres pages.</p>
<p>Je te détaille ci-dessous les deux trucs vaguement tordus du jour.</p>
<h4>Liens d’évitement</h4>
<p>Tu noteras un élément dont je suis assez contente : les liens d’accès rapides (qu’on appelle aussi liens d’évitement : Aller au contenu, aller au menu, aller à la recherche) n’apparaissent qu’à la tabulation – ce qui correspond bien aux utilisateurs auxquels ils sont le plus utile. En téléchargeant le zip au pied de ce billet, tu pourras récupérer le code mis en place. Il est assez simple en fait : dans un premier temps je place ces liens là où je veux qu’ils apparaissent puis je les colorie en blanc, comme le fond de page :</p>
<pre class="brush: css">#prelude {
position: absolute;
margin: 0;
top: 0;
left: 3px;
color: #fff;
}
#prelude a {
color: #fff;
}</pre>
<p>Puis, à l’aide de la pseudo-class <code>focus</code> (c’est-à-dire lorsque la tabulation arrive dessus) je leur donne une couleur qui se voit :</p>
<pre class="brush: css">#prelude a:focus {
color: #666;
}</pre>
<p>Voilà. Rien de compliqué et ça satisfait tout le monde, ceux qui ne comprennent pas à quoi ça peut bien servir et ceux qui en ont vraiment besoin.</p>
<h4>Le trait de séparation entre les billets</h4>
<p>On pourrait croire que devant m’occuper de l’intégration je vais imaginer des trucs faisables vachement facilement. C’est ce que j’essaie de faire, mais pas toujours. Ces traits de séparation ne présentent pas non plus une difficulté majeure mais enfin, faire en sorte que le compteur des commentaires, trackbacks et pièces jointes viennent le chevaucher demande un petit tour de passe-passe. En voici les règles nécessaires :</p>
<p>D’abord je place la bordure :</p>
<pre class="brush: css">.post {
background: transparent url(img/filet.png) repeat-x left bottom;
}</pre>
<p>Et toute l’astuce est là en fait, en utilisant une image plutôt que la propriété border, je peux la placer légèrement au-dessus de la fin réelle de la boîte (en réalité mon image est constituée d’une bande de blanc surmontée d’un trait gris). Ainsi, les infos du billet (<code>.post-info-co</code>) vont empiéter sur ce filet.</p>
<p>Mais encore faut-il que ces infos possèdent un fond blanc, si je le laisse transparent le filet gris va être visible sous cette partie. Je ne peux pas non plus simplement attribuer un <code>background: #fff;</code> à cet élément car comme les éléments de ce type prennent toute la largeur disponible, le filet disparaîtrait complètement.</p>
<p>J’utilise donc la propriété <code>display: inline;</code> qui restreindra alors la largeur du paragraphe à son contenu et non à la place disponible. Ça donne ça, côté code :</p>
<pre class="brush: css">.post-info-co {
margin: 0;
background: #fff;
display: inline;
font-size: 0.875em;
font-style: italic;
}</pre>
<p>Magique, non ?</p>
<h3>Les éléments à compléter</h3>
<p>Pour la page d’accueil, si tu te souviens des <a href="https://ductile.dotaddict.org/post/2011/05/23/Au-jour-le-jour-sur-ce-blog">maquettes</a>, je n’ai pas fini : il y a mes petits stickers à coller là-haut, le menu de premier niveau sous le titre et la présentation du <code>#sidebar</code> (dans l’administration, le contenu du sidebar se détermine grâce aux widgets de présentation).</p>
<p>C’est que pour ces trois éléments je vais avoir besoin de toi :</p>
<ul>
<li>comment va-t-on ajouter les « stickers » ?</li>
<li>comment inclure un menu de premier niveau personnalisable ?</li>
<li>comment faire en sorte que les éléments du sidebar puissent être pliés/dépliés ?</li>
</ul>
<p>Ça va être à toi de jouer et de me dire quand tu souhaites le faire, je peux tout à fait continuer à styler le reste pour le moment. Quand ils seront en place, je leur appliquerai les styles qui vont bien.</p>
<h4>Cahiers des charges</h4>
<p>Voici comment j’imagine le détail des trois éléments sus-indiqués</p>
<h5>Les stickers</h5>
<p>J’y ai longuement réfléchi : selon la largeur de consultation il ne sera pas toujours opportun d’en placer plusieurs. Dans le cas du tout petit écran (320px) le mieux serait même qu’il n’y en ait aucun. La solution de les placer directement dans le <code>#top</code> ne me convient donc pas. Il faut que ceux qui n’apparaissent pas en haut apparaissent tout en bas.</p>
<p>Je verrais bien une liste s’ajoutant dans le <code>#footer</code> (pied de page) et que je placerai en position absolue lorsque je veux tout ou partie de ses éléments en haut. Cette liste doit donc être constituée d’éléments avec un <code>id</code> pour que je puisse les positionner (elle-même devra aussi posséder son <code>id</code>). Comme je voudrais aussi laisser le choix à l’utilisateur de n’en mettre aucun ou un seul, deux ou les trois et dans quel ordre, je verrais bien un fonctionnement dans le goût de ce que tu as fait pour les favoris dans l’admin de Dotclear. Les éléments quant à eux prendraient un <code>id</code> en fonction de leur ordre. Ça peut ?</p>
<h5>Le menu de premier niveau</h5>
<p>Je sais qu’il existe un plugin qui gère ça. Je ne souhaite pas avoir à demander à l’utilisateur d’installer tel ou tel plugin. Il faudrait donc soit prévoir le “remplissage” de ce menu dans le configurateur du thème, soit que l’équipe décide d’intégrer un tel menu dans la distribution de base. Ce sujet a déjà été évoqué, nous devrions peut-être attendre de savoir quelle décision sera prise et nous décider en fonction d’icelle ?</p>
<h5>Plier / déplier</h5>
<p>Si tu observes <a href="https://ductile.dotaddict.org/post/2011/05/23/Au-jour-le-jour-sur-ce-blog">les maquettes</a> que j’ai publiées l’autre jour, lorsqu’on navigue sur un tout petit écran j’aimerais que le sidebar n’affiche que les titres des widgets et qu’ils se déploient lors du clic. Il faut mettre du javascript donc, reste à savoir comment en combinant le javascript et les mediaqueries/css on peut faire en sorte que ceux-ci ne soient repliés que dans certains cas. Est-ce que je demande l’impossible ?</p>
<p>Je te laisse réfléchir et me répondre. Je te dois d’ailleurs quelques réponses moi aussi à la suite de tes billets précédents. C’est ce que je m’appliquerai à faire devant une assiette de langoustines et un verre de cidre, mais plus tard. Pour le moment le temps me presse : la Bretonnie m’attend !</p>
<p>Ta très sincère,<br />
Kozlika</p>
<hr />
<p>Version 0.2.1 à sortir demain (3 juin) pour correctifs :</p>
<ul>
<li>placement d’une icône pour les pièces jointes</li>
<li>meilleure gestion des liens rapides sur petit écran</li>
<li>suppression de l’icône de catégorie dans le post-info en attendant que je modifie le html pour distinguer les liens</li>
<li>réduction de l’interlignage du .post-info-co pour quand il passe sur deux lignes (petits écrans)</li>
<li>rapprochement du .post-info sous le titre</li>
</ul>
<p>5 juin : fait ! Nouvelle archive 0.2.1 à télécharger en pièce jointe.</p>Construire un thème - Jour 1urn:md5:458dc88f7891af9ae934a8c21f423d1d2011-05-23T15:19:00+02:002011-07-13T07:13:17+02:00KozlikaCôté designer<p>Mon cher Franck,</p>
<p>J’ai déposé sur ce blog de chantier, le premier jet de notre thème. Il s’appelera <a href="http://www.cnrtl.fr/definition/ductile">Ductile</a> car je trouve que cela lui va bien.</p> <p>La première chose à faire lorsqu’on veut créer un thème pour Dotclear consiste à créer un dossier du nom du thème dans le dossier regroupant tous les thèmes utilisables par le blog. Tu n’es pas obligé de donner à ce dossier le nom du thème mais je trouve ça boooooocoup plus mieux pratique pour s’y retrouver.</p>
<h3>Création du dossier du thème</h3>
<p>Ensuite, j’y ai placé :</p>
<ul>
<li>sa « carte d’identité » : un fichier <code>_define.php</code> qui contient les informations importantes dont Dotclear a besoin pour identifier le thème et le traiter ;</li>
<li>un fichier <code>style.css</code> qui regroupera les règles de présentation ;</li>
<li>ce fichier en appelle deux autres : <code>mediaqueries.css</code> et <code>rebase.css</code> que je place donc également dans <code>ductile</code> ;</li>
<li>un dossier <code>img</code> qui me servira à ranger les images utilisées par le thème ;</li>
<li>un dossier <code>tpl</code> pour y placer les fichiers templates qui diffèrent ou complètent ceux de la livraison de base.</li>
</ul>
<p><a href="https://ductile.dotaddict.org/public/illustrations_tutos/dossier_ductile.png" title="Vue du dossier du thème Ductile"><img src="https://ductile.dotaddict.org/public/illustrations_tutos/dossier_ductile.png" alt="Vue du dossier du thème Ductile" style="display:block; margin:0 auto;" title="Vue du dossier du thème Ductile, mai 2011" /></a></p>
<h3>La carte d’identité</h3>
<p>Le fichier <code>_define.php</code> est très simple, je t’en copie le contenu ci-dessous :</p>
<pre class="brush: php"><?php
# -- BEGIN LICENSE BLOCK ---------------------------------------
#
# Copyright (c) Association Dotclear
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK -----------------------------------------
if (!defined('DC_RC_PATH')) { return; }
$this->registerModule(
/* Name */ "Ductile",
/* Description*/ "Chantier pour un nouveau theme",
/* Author */ "Dotclear Team",
/* Version */ '0.1'
);
?></pre>
<p>Nous ferons évoluer le numéro de version au fur et à mesure des étapes que nous franchirons vers la construction du thème. Lorsqu’il sera fini, nous modifierons également sa description.</p>
<h3>Les fichiers CSS</h3>
<p>Ils sont pour le moment au nombre de trois. Pendant le chantier ils resteront séparés, quitte à les réunir plus tard, mais ils permettent de mieux comprendre le rôle différent des règles qu’ils contiennent.</p>
<ul>
<li><code>style.css</code>. C’est ici que prendront place les règles communes à toutes les déclinaisons du thème. Il contient peu de choses pour le moment : l’appel aux deux autres fichiers CSS et la présentation des liens. J’ai ajouté en fin de fichier des règles que nous n’utiliserons peut-être que sur ce blog.</li>
<li><code>rebase.css</code>. Le fichier feignasses-compliant bâti au fil des années qui (re)définit les règles des balises html. Il remplit deux rôles : mettre tous les navigateurs d’accord (chaque navigateur définit des règles par défaut et bien sûr chacun à sa façon…) et se mettre en accord avec ce qui me semble bien. Je place ce fichier (ou plus couramment son contenu) à chaque fois que je débute un chantier html/css. Si tu souhaites plus de détails à ce sujet, j’y dédierai un billet spécifique.</li>
<li><code>mediaqueries.css</code>. Ce fichier permet d’adapter la structure de la page en fonction de la taille de la fenêtre du navigateur et d’y placer des règles spécifiques (par exemple, le titre du blog est un peu plus petit pour les écrans dont la largeur est inférieure à 480px). Je vais y revenir dans un prochain billet.</li>
</ul>
<p>L’essentiel de ce que tu vois aujourd’hui sur ce blog (dont l’apparence évoluera en même temps que la construction du thème) est essentiellement issu du fichier rebase.css puisque les deux autres ne contiennent pratiquement rien pour le moment.</p>
<h3>Le dossier tpl</h3>
<p>Il ne comporte pour le moment qu’un seul fichier, <code>user_head.html</code>. Son contenu viendra s’insérer dans l’entête de toutes les pages, à la suite de ce qui est déjà en place via le fichier <code>head.html</code> des templates utilisés par défaut par Dotclear.</p>
<p>J’en ai eu besoin pour insérer ceci :</p>
<pre class="brush: xml"><!-- media queries -->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--></pre>
<p>Nous y reviendrons lors du billet qui évoquera le fichier <code>mediaqueries.css</code>.</p>
<p>Tu trouveras, ainsi que pour chaque billet de cette série, un .zip comportant le thème en son état du jour.</p>