Les ateliers du klafoutis
Là où Kozlika tricote et détricote le xhtml, les css, un peu de PHP et surtout Dotclear.
2022-08-05T18:53:35+02:00
Kozlika
urn:md5:21990cb11f178008a2c4b268539d428a
Dotclear
The ultimate, essential, gorgeous, absolutely and definitive essential list of best of du ras-le-bol des superlatifs
urn:md5:73dc4cafd829dc26148fe11990f32e19
2009-06-30T15:27:00+02:00
2009-06-30T14:35:43+02:00
Kozlika
Carnet de notes
<p>Mon agrégateur de news amasse les fils d'une cinquantaine de sites de « web design » et tout ce qui tourne autour. Pour la plupart ce sont des sites anglophones et publient à intervalles réguliers des listes de ceci et de cela.</p> <p>Listes d'outils pour choisir des couleurs, listes de plugins jquery jolis, listes de designs intéressants, d'applications futées, d'astuces CSS…</p>
<p>Dans le principe, j'aime bien. Bien sûr, l'inconvénient est de retrouver souvent les mêmes, et plus on prend d'abonnements plus on a de chances de recroiser les outils ou design « star ». Je considère donc que c'est de ma faute, je n'ai qu'à pas m'abonner à autant ;-)</p>
<p>Mais ce qui m'agace franchement c'est la manie qu'ont les auteurs de ces listes de surcharger leurs titres sous un lot de superlatifs ridicules : ultime, définitif, indispensable, incontournable… D'autant plus grotesques que lesdits machins définitifs ont toutes chances de devenir obsolètes ou du moins d'être dépassés en quelques mois, voire quelques semaines. Je rédige parfois de tels titres pour me passer les nerfs en guise de <a href="http://abc.dotaddict.org/post/2009/06/29/12-The-Ultimate-and-definitive-vrai-blog">private joke</a>.</p>
<p>Or ne voilà-t-il pas que depuis quelque temps, mon site d'inspiration chéri-chou, <a href="http://patterntap.com">Pattern Tap</a> s'y est mis aussi, ou plutôt ses contributeurs puisque le site est alimenté par les inscrits. Le principe du site c'est de constituer des collections sur des thématiques (pages d'accueil, menus, commentaires, etc.) ; et commencent à fleurir les « excellent », « great » et autres « absolutely beautiful » machins dans les titres des dépôts dans les galeries.</p>
<p>Grumble !</p>
<p><em>Et sinon j'en profite pour vous dire que si je ne réponds pas à chacun de vos messages qui proposent des patches pour mes thèmes, je ne les en garde pas moins sous le coude pour les prochaines mises à jours. Merci beaucoup de vos contributions. Vous êtes <code>super, géniaux, extraordinaires, irremplaçables</code> !<sup>[<a href="http://ateliers.klafoutis.org/post/2009/06/30/The-ultimate%2C-essential%2C-gorgeous%2C-absolutely-and-definitive-essential-list-of-best-of-du-ras-le-bol-des-superlatifs#pnote-5478-1" id="rev-pnote-5478-1">1</a>]</sup> </em></p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="http://ateliers.klafoutis.org/post/2009/06/30/The-ultimate%2C-essential%2C-gorgeous%2C-absolutely-and-definitive-essential-list-of-best-of-du-ras-le-bol-des-superlatifs#rev-pnote-5478-1" id="pnote-5478-1">1</a>] Choisir la (les) mentions qui vous décrivent le mieux.</p></div>
Les images (probablement) libres de droits
urn:md5:f9a2dcf984c7e454d94d705ef179c9b0
2009-04-12T08:42:00+02:00
2009-04-12T08:49:02+02:00
Kozlika
Carnet de notes
<p>Au détour d'une recherche sur le web au sujet des banques d'images gratuites je suis tombée sur un article qui mérite je crois toute notre attention.</p> <p>Si vous êtes comme moi des peu doués de l'image, vous faites sûrement partie des acheteurs réguliers ou occasionnels sur des sites tels <a href="http://fotolia.com/">Fotolia</a>. Les images y sont libres de droits et fort peu chères.</p>
<p>Libres de droits ? En fait, rien n'est moins sûr et c'est ce que nous explique <a href="http://blog.aube-nature.com/?2008/05/06/236-microstock-risques-problemes">Cédric Girard</a> : à bien lire les conditions d'utilisation on découvre que Fotolia <strong>ne garantit pas</strong> qu'elles le sont en effet et se dégage de toute responsabilité si l'image que vous achetez chez eux se révélait protégée !</p>
<p>Pas de paranoïa inutile, je doute que ça aille bien loin pour une publication dans un billet de blog ou même un thème mais ne vous avisez pas de vendre à votre client une affiche en 4x3 à coller sur les abribus utilisant l'une de ces images « libres de droits » sans vous être assurés qu'elle l'est vraiment. Et si vous êtes photographe, <a href="http://www.macandphoto.com/2008/06/fotolia-surtout.html">faites attention aux dépôts que vous y faites</a>…</p>
Irrésolutions 2009
urn:md5:bf1b105764af515e245d7d298c3258da
2009-01-03T12:02:00+01:00
2009-01-03T15:57:37+01:00
Kozlika
Carnet de notes
<p>La nouvelle année est en principe l'occasion (avec la rentrée des classes) de se fixer des objectifs pour l'année à venir qui bien souvent euh… pètent plus haut que leur cul. Je ne risque pas de tomber dans cet écueil en ce 2 janvier car à dire vrai pour ce qui concerne mes activités de geekette je suis plutôt dans une totale irrésolution.</p> <p>(On est dans la rubrique Carnet de Notes, ce billet est probablement parfaitement inintéressant pour d'autres que moi mais zaviez qu'à pas viendre.)</p>
<h3>Lab à gaz ?</h3>
<p>Le lancement de Lab me laisse perplexe. L'idée est bonne et je m'y suis jointe mais je ne vois pas trop comment m'organiser concrètement pour le développement de mes thèmes avec ce nouveau biniou. J'ai déjà avec force sueur mis en place tout ce qu'il faut en local (deux blogs, l'un de travail l'autre pour stocker et packager les thèmes finalisés), y compris un SVN que j'exporte au moment de faire les .zip. Ça me permet de travailler depuis chez moi, avec ou sans connexion, et sans mettre sur les genoux le serveur que je partage avec l'ami biou pendant mes travaux. Synchroniser en plus de tout ça un autre dépôt et une autre working copy me semble bien compliqué (je ne peux pas avoir la même working_copy pour les deux dépôts, local et lab). Par contre je céderais volontiers mes plugins pour qu'ils soient maintenus et développés par plus compétent que moi. Je ne sais pas trop quoi faire.</p>
<h3>Pauvre Magda</h3>
<p>Je suis trop « courte » en compétences techniques pour ce que j'avais en tête pour Magda. Je voulais en faire un newbie-friendly total avec un poste de commandement intégré qui permette à chacun d'organiser ses contenus sans entrer dans le code. Graphiquement je ne suis pas super top contente non plus de son aspect, notamment le header, une fois de plus en raison de contraintes que je me suis fixées comme l'intégration d'un logo pointant indépendamment du titre du blog. Je vais donc placer Magda en sommeil dont on verra s'il est définitif ou provisoire en fonction des évolutions de Dotclear ou de si ça branche un dev de s'y adjoindre. Je ne sais pas trop quoi faire.</p>
<h3>Ce blog ?</h3>
<p>L'existence même de ce blog est l'objet de questionnements. Une bonne partie du « Carnet de notes » a été mis hors ligne pour cause de passage sur Tips, si je rejoins le Lab, le signalement des bugs n'aura pas besoin d'être fait ici, puisqu'on pourra y ouvrir des tickets. Du coup il risque de tourner au simple blog d'annonce de mes thèmes, ce qui est moyennement pertinent puisque leur annonce est faite via DotAddict. Et quelques élucubrations comme celle d'aujourd'hui mais je pense que le monde peut s'en passer sans trop souffrir. Je ne sais pas quoi faire.</p>
Don Carlo
urn:md5:95ed8b0638fae008525ff27bfbbf1864
2009-01-01T08:49:00+01:00
2009-02-22T09:39:05+01:00
Kozlika
Thèmes pour Dotclear 2
1 colonne
Dotclear 2
fluide
thèmes
<p>Pour la nouvelle année, voici un nouveau thème. Don Carlo, habillé de rouge et noir, est construit sur une base assez conventionnelle, mais avec quelques améliorations (du moins à mes yeux) du traitement des différents contextes par rapport aux thèmes habituels.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-home.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-home_m.jpg" alt="doncarlo-home.png" style="display:block; margin:0 auto;" title="doncarlo-home.png, janv. 2009" /></a></p>
<h3>Détails du thème</h3>
<p><em>Cliquez sur les vignettes pour afficher la taille réelle.</em></p>
<h4>Constantes</h4>
<ul>
<li>La boîte de recherche propose dynamiquement des suggestions de résultats ; c'est basé sur le plugin jQuery LiveSearch ; l'implémentation est identique (et pour cause puisque c'est là que j'ai récupéré la fonction ) à celle du thème Noviny.</li>
<li>Le menu horizontal, tout en haut à droite de la page reprend les quatre items « standard » de ce qu'on trouve sur tous les blogs actuellement. Il présuppose que vous créiez une page (Pages) dont la partie titre de l'url sera About et que vous installiez le plugin Contact Me. Si vous souhaitez modifier ou supprimer tout ou partie de ces liens, éditez le fichier _top.html</li>
<li>Tous les widgets sont situés en bas de la page, à l'exception de la recherche.</li>
</ul>
<h4>Accueil</h4>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-home.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-home_t.jpg" alt="doncarlo-home.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-home.png, janv. 2009" /></a> La colonne de gauche du billet accueille une vignette de la première image du billet, s'il n'y a pas d'image dans le billet mais que la description de la catégorie à laquelle il appartient en possède une, c'est cette image qui sera affichée. Si ni l'une ni l'autre n'existe cette colonne reste vide.</p>
<p>La colonne de droite est prévue pour un bloc de présentation rapide à l'intention des nouveaux venus sur votre blog. Pour en rédiger le contenu, éditez le fichier _home-aside.html.</p>
<h4>Archives</h4>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-arch.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-arch_t.jpg" alt="doncarlo-arch.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-arch.png, janv. 2009" /></a> C'est un projet que j'avais depuis longtemps parce que ça me semble plus logique : la page des archives permet de fouiller dans les archives du blog selon trois critères : chronologique, par catégorie, par tag ou d'y effectuer une recherche libre.</p>
<p>Si vous avez des souhaits supplémentaires pour cette page – par exemple si vous avez installé un plugin permettant le tri par auteurs, manifestez-vous dans les commentaires du présent billet pour que je vous aide à ajouter ce critère.</p>
<h4>Billet seul</h4>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-post.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-post_t.jpg" alt="doncarlo-post.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-post.png, janv. 2009" /></a> Un autre de mes dadas. Mettre en valeur le chapô (champ <em>Extrait</em> lors de la saisie du billet) traité comme une véritable accroche de l'article. Appuyé sur le flanc gauche du billet il est en caractères serif, plus gros que le corps du billet et en italique. Je décommande du coup l'usage d'images dans ces extraits (ou veiller à ce qu'elles soient petites, sinon ça va être super moche).</p>
<p>Les intertitres de niveau h3 à h6, en petites majuscules, sont également en police serif. Les détails de mise en forme des différentes balises peuvent être observés sur le blog de démonstration de DotAddict (du moins dès que j'y aurai déposé ce thème).</p>
<p>En affichant en taille réelle la réduction ci-contre, vous pourrez également avoir un aperçu du traitement des commentaires.</p>
<h4>Résultats d'une recherche, liste des billets d'une catégorie</h4>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-search.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-search_t.jpg" alt="doncarlo-search.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-search.png, janv. 2009" /></a> <a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-cat.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-cat_t.jpg" alt="doncarlo-cat.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-cat.png, janv. 2009" /></a></p>
<p>Ces deux contextes se voient dotés d'un bandeau sur la droite. Ce bandeau accueille dans le premier cas l'ensemble des résultats de la recherche et dans le deuxième cas l'ensemble des billets de la catégorie sous la forme d'une liste des titres des billets concernés. Dans le cas du tri par catégorie c'est en haut de ce bandeau que se trouveront la description et les liens d'abonnement aux billets de la catégorie.</p>
<p>Ce bandeau est présent à l'identique sur toutes les pages du contexte.</p>
<h4>Page 404</h4>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/doncarlo-404.png"><img src="http://ateliers.klafoutis.org/public/themes-dc2/doncarlo/screenshots/.doncarlo-404_t.jpg" alt="doncarlo-404.png" style="float:left; margin: 0 1em 1em 0;" title="doncarlo-404.png, janv. 2009" /></a> Vous pourrez encore enrichir cette page à votre idée (en éditant le fichier 404.html) qui comporte d'ores et déjà des liens pour se rendre sur la page globale des archives, vers la page de contact et vers le bloc de recherche.</p>
<p>Pour le bloc de recherche j'ai hésité un peu à le « sortir » du haut de page pour l'intégrer dans le corps de page comme pour les archives. Si d'aucuns d'entre vous le souhaitent j'expliquerai ici comment faire.</p>
<h3>On peut le prendre ?</h3>
<p>Oui et non. Je suis en vacances et n'ai pas d'Internet Explorer 6 ou 7 sous la main pour tester les pages (je me méfie de l'extension pour Firefox qui s'est révélée ne pas être fiable à 100%).</p>
<p>Je serais donc ravie si quelques-uns des lecteurs de ce billet acceptaient de télécharger le thème (lien zip en pièce jointe) et le soumettre à la torture sur un poste Windows et Internet Explorer pour que je sois informée des bugs éventuels et puisse les corriger avant de le distribuer officiellement sur DotAddict. Je n'ai pas testé ni pu faire tester sous Linux non plus…</p>
<h3>Pendant quelques jours</h3>
<p>Vous pouvez le visualiser in situ ici (mais pas longtemps car je dois repasser sur Magda pour y bosser et parce que je dois reprendre tous mes articles ici pour les débarrasser de vieilleries qui me servaient sur un autre thème et que j'ai des soucis avec le switcher).</p>
Woof
urn:md5:6c643dc2f2871cec4017e0ba747cecac
2008-12-15T23:00:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Thèmes pour Dotclear 2
<p>Vous avez vu ou entendu par­ler de <em><a href="http://fr.wikipedia.org/wiki/Hair_(com%C3%A9die_musicale)">Hair</a></em> ? C’est à cette comé­die musi­cale que ce nou­veau thème doit son nom. Woof en est l’un des per­son­na­ges. Cette œuvre aussi emblé­ma­ti­que des années 70 que le combi VW du foo­ter et les illus­tra­tions et cou­leurs ici uti­li­sées.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc2/woof/woof.jpg"><img src="http://ateliers.klafoutis.org/public/themes-dc2/woof/.woof_m.jpg" alt="woof.jpg" style="display:block; margin:0 auto;" title="woof.jpg, déc. 2008" /></a></p>
<p>Sur deux colon­nes (disons trois si l’on tient compte du side­bar divisé en deux ver­ti­ca­le­ment) de lar­geur fixe (940px), Woof fait pous­ser les fleurs, rend les joues roses, favo­rise la barbe et les che­veux longs et apporte la paix aux esprits cha­grins.</p>
<p>Atten­tion si vous pla­cez sou­vent des ima­ges dans vos billets : pour faire jouli j’ai appli­qué une trans­pa­rence au fond des div.post. Sur les ima­ges ça donne un p’tit brouillard que vous aime­rez… ou pas. Si vous n’aimez pas, deux solu­tions s’offrent à vous :</p>
<ul>
<li>sup­pri­mer les règles de trans­pa­rence dans style.css ;</li>
<li>pla­cer tout élé­ment pour lequel vous vou­lez un fond mat dans une <code><div class="opaque"></code>.</li>
</ul>
<p>Les fonds trans­pa­rents sont en effet auto­ma­ti­que­ment trans­mis à leurs « enfants » sauf si l’enfant est une div avec des règles spé­cia­les. Autre­ment dit, pour ceux d’entre vous aux­quels je ne cause pas chi­nois, une règle appli­quée à <code>.post img {}</code> est hélas sans aucune effi­ca­cité. En revan­che on peut annu­ler la trans­pa­rence sur une div, d’où la créa­tion dans style.css d’une class “opa­que”.</p>
<p>J’espère que vous vous amu­se­rez autant à uti­li­ser ce thème que moi à le faire :-)</p>
<p><strong>Woof sur DotAd­dict :</strong></p>
<ul>
<li><a href="http://themes.dotaddict.org/galerie-dc2/details/Woof">La fiche</a></li>
<li><a href="http://themes.dotaddict.org/demo-dc2?theme=woof">La démo</a></li>
</ul>
Plaf ? Plop !
urn:md5:912e88860acbc3d68f623cb1f09ea201
2008-12-08T19:20:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Thèmes pour Dotclear 2
<p>Et si on disait que c’était le prin­temps ? Je viens de dépo­ser le thème <strong><a href="http://themes.dotaddict.org/galerie-dc2/details/Plop">Plop</a></strong> sur Dotad­dict. Je l’avais réa­lisé pour le pro­jet d’évo­lu­tion de Dot­clear 1.4, mais puis­que ce pro­jet ne verra jamais le jour, et que de tou­tes façons j’avais l’inten­tion de le publier pour les deux ver­sions, en voici l’adap­ta­tion pour Dot­clear 2.</p> <p><a href="http://themes.dotaddict.org/galerie-dc2/details/Plop">Plop</a> est un thème fixe (840 pixels) avec deux colon­nes, side­bar à gau­che. <a href="http://themes.dotaddict.org/demo-dc2?theme=plop">Voyez la démo in vivo</a> de Plop. Je l’ai voulu sim­ple, clair, coloré. Pas de trucs-machins web 2.0, pas de fonc­tion­na­li­tés de la mor­ki­tue, Plop est fait pour <del>plo­per</del> blo­guer. Voilà à quoi il res­sem­ble.</p>
<p><a href="http://ateliers.klafoutis.org/public/themes-dc2/plop/large_plop.jpg"><img src="http://ateliers.klafoutis.org/public/themes-dc2/plop/.large_plop_m.jpg" alt="Preview Plop" style="display:block; margin:0 auto;" title="Preview Plop, déc. 2008" /></a></p>
<p>Pour le télé­char­ger, ren­dez-vous sur <a href="http://themes.dotaddict.org/galerie-dc2/details/Plop">sa fiche de DotAd­dict</a> (ou ici en pièce jointe au pré­sent billet).</p>
<p>Mieux encore, con­nec­tez vous sur votre admin, lan­cez daIns­tal­ler et ser­vez-vous (je pense qu’il y sera dès demain matin).</p>
<p>Vous avez un souci ? Vous vou­lez de l’aide pour sa per­son­na­li­sa­tion ? C’est sur ce billet que ça se passe.</p>
Quelques liens pour les designers amateurs
urn:md5:60889b756d629a4ea36a1f4973db2228
2008-12-07T12:13:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p>À l’occa­sion de la série de billets con­cer­nant la migra­tion sur mon blog per­son­nel, il me sem­ble utile de don­ner quel­ques liens – pas trop pour ne pas noyer les débu­tants sous la masse – pour les desi­gners ne dis­po­sant pas d’outils per­fec­tion­nés ou ne sachant pas s’en ser­vir et qui tou­te­fois sou­hai­tent per­son­na­li­ser leur déco­ra­tion. Ces liens peu­vent bien entendu être tout aussi uti­les aux desi­gners aguer­ris !</p> <p><img src="http://ateliers.klafoutis.org/public/Y2009/7h93.gif" alt="Sous le cerisier" style="display:block; margin:0 auto;" title="Sous le cerisier, déc. 2008" /></p>
<h3>Ima­ges de fond</h3>
<p><a href="http://patterns.ava7.com/">ava7 pat­terns</a> pro­pose des « tui­les » (ima­ges pou­vant être répé­tées hori­zon­ta­le­ment et/ou ver­ti­ca­le­ment avec des rac­cords invi­si­bles).</p>
<p>Exem­ple d’uti­li­sa­tion : télé­char­ger sur son dis­que dur l’une des tui­les pro­po­sées, l’envoyer dans le réper­toire des ima­ges du thème qu’on uti­lise, puis modi­fier la règle du fond de body comme ceci :</p>
<pre class="brush: css">background: #fff url(images/nom-du-fichier-tuile);</pre>
<p>Il fau­dra pen­ser à affec­ter un fond de cou­leur (ou blanc) à la <code>#page</code> si ce n’est déjà fait, car si elle est trans­pa­rente ça peut poser quel­ques pro­blè­mes de lec­ture ;-)</p>
<h3>Retaille d’ima­ges</h3>
<p><a href="http://resizeimage.org/">resi­zei­mage.org</a> pro­pose de réduire vos ima­ges en ligne. Très utile pour ceux qui n’ont pas d’outil de retou­che d’image sur leur ordi­na­teur ou savent mal l’uti­li­ser.</p>
<p>Exem­ple d’uti­li­sa­tion : on a sur son dis­que dur une image qui nous plaît bien (ou la photo du petit der­nier) qu’on sou­haite pla­cer dans le top de la page mais elle est trop grande. Ren­dez-vous sur le site, appuyez sur le bou­ton « Par­cou­rir » pour sélec­tion­ner votre image, puis sur le bou­ton « Upload » pour l’envoyer en trai­te­ment. Vous pour­rez alors choi­sir <em>small</em>, <em>medium</em> ou <em>large</em> qui sont des for­mats pré­dé­fi­nis, ou cli­quer sur le lien « Advan­ced resize » qui vous per­met de réduire manuel­le­ment (en con­ser­vant ou non les pro­por­tions). Puis cli­quez sur le lien « Télé­char­ger cette image » dans le menu de gau­che : l’image retaillée s’enre­gis­tre alors sur votre dis­que dur. Envoyez-la dans le réper­toire d’ima­ges de votre thème, pla­cez-la en <em>back­ground</em> du bloc où vous sou­hai­tez l’affi­cher.</p>
<p>Note : si ce ser­vice est trop limité pour vous, essayez donc <a href="http://www.drpic.com/">Dr Pic</a> le même genre mais avec des options en plus (rota­tion, réglage de lumi­no­sité, etc.). Encore au-des­sus dans le niveau d’inter­ven­tion il y a <a href="http://pixlr.com/editor/?loc=fr">pixlr</a>, mais il faut déjà bien con­naî­tre ce type d’appli­ca­tions.</p>
<h3>Icô­nes</h3>
<p>De nom­breux sites pro­po­sent des icô­nes gra­tui­tes (atten­tion il existe cepen­dant sou­vent une obli­ga­tion de men­tion­ner l’auteur des icô­nes, ne l’omet­tez pas, c’est une façon d’en remer­cier les auteurs). Je ne vais cer­tes pas en faire une liste exhaus­tive mais voici quel­ques « sets » soli­des et répu­tés de peti­tes icô­nes :</p>
<ul>
<li><a href="http://www.famfamfam.com/lab/icons/silk/">Silk</a>, de Fam­fam­fam</li>
<li>Fugue et Dia­gona, des icô­nes de <a href="http://pinvoke.com/">pin­voke</a></li>
<li><a href="http://code.google.com/p/twotiny/">two­ti­nies</a>, par Paul Jar­vis</li>
<li><a href="http://sweetie.sublink.ca/">Sweety</a>, de Joseph North</li>
<li>De tou­tes peti­tes icô­nes : <a href="http://www.brandspankingnew.net/archive/2006/12/hohoho.html">hohoho</a>, offer­tes par Brand­span­kin­gnew.</li>
<li>nDe­sign pré­sente un set de <a href="http://www.ndesign-studio.com/resources/mini-pixel-icons/">Mini Pixel Icons</a></li>
<li>Elles ne sont pas peti­tes mais elles sont mar­ran­tes, les icô­nes de Sma­shing Maga­zine, notam­ment les icô­nes pour RSS : <a href="http://www.smashingmagazine.com/2008/04/01/fresh-free-and-gorgeous-rssfeed-icons/">set 1</a> et <a href="http://www.smashingmagazine.com/2008/10/28/feed-me-animals-a-free-rss-feed-icon-set/">set 2</a>.</li>
</ul>
<h3>Favi­con gene­ra­tor</h3>
<p>Les favi­cons sont ces peti­tes ima­ges qu’on voit à gau­che de l’URL dans la barre d’adresse du navi­ga­teur. Pour être recon­nues par tous les navi­ga­teurs elles doi­vent être d’un type spé­cial (.ico). <a href="http://tools.dynamicdrive.com/favicon/">Ce site</a> vous per­met de géné­rer un fichier favi­con.ico à pla­cer via votre client FTP à la racine de votre héber­ge­ment et les bou­tons option­nels auto­ri­sent en sus la créa­tion d’une petite image de 32*32 ou 48*48 pixels pour déco­rer votre blog ou tout ce que vous vou­drez.</p>
<p>Note : si vous vou­lez pla­cer le favi­con ailleurs qu’à la racine de l’héber­ge­ment (par exem­ple parce que vous ne sou­hai­tez pas que tous vos site por­tent la même ima­gette) c’est une autre paire de man­ches car la recon­nais­sance « spon­ta­née » ne fonc­tionne qu’avec un fichier nommé <em>favi­con.ico</em> et placé à la racine de l’héber­ge­ment. Si l’un de ces deux cri­tè­res n’est pas res­pecté, il faut alors ajou­ter du code dans vos pages. Je vous invite à lire <a href="http://1loup.net/index.php/2007/02/21/924-comment-installer-un-favicon-pour-ie-et-pour-firefox-valide-xhtml">ce tuto­riel</a> d’un gen­til<sup>[<a href="http://ateliers.klafoutis.org/post/2008/12/07/Quelques-liens-pour-les-designers-amateurs#pnote-319-1" id="rev-pnote-319-1">1</a>]</sup> uti­li­sa­teur de Dot­clear pour faire ça bien.</p>
<h3>Ban­ner Maker</h3>
<p>Un site pour fabri­quer en direct une ban­nière pour votre blog. Je regrette tou­te­fois que l’inter­face de <a href="http://www.drpic.com/">Ban­ner­Ma­ker</a> ne soit pas plus intui­tive et comme j’ai égaré mes yeux un bon moment à com­pren­dre où ça se passe, je vous livre le résul­tat de mes erran­ces : les onglets de con­fi­gu­ra­tion de la ban­nière sont en bas de page (ah les joies du texte gris sur fond noir…).</p>
<p>Dans la même gamme, <a href="http://www.simwebsol.com/ImageTool/">Logo Crea­tor</a> per­met de créer une ban­nière (texte seu­le­ment) avec des effets <em>so web 2.0</em>.</p>
<h3>Assor­tir ses cou­leurs</h3>
<p>Il y a qua­rante-trouze mille outils web pour créer des palet­tes de cou­leurs. Je vous guide vers <a href="http://www.colorsontheweb.com/colorwizard.asp#wizard">celui-ci</a> parce que Colors on the Web offre un ensem­ble d’arti­cles fort inté­res­sants con­cer­nant les cou­leurs et que l’outil en ligne qu’ils pro­po­sent est de manie­ment sim­ple.</p>
<p>Pour des palet­tes tou­tes fai­tes, tour­nez-vous vers les deux sites de réfé­rence (du moins à mes yeux) : <a href="http://kuler.adobe.com/">kuler</a> (un site d’Adobe) et <a href="http://www.colourlovers.com/palettes/new">colour­lo­vers</a></p>
<p>Voilà pour aujourd’hui. N’hési­tez pas à signa­ler en com­men­taire de ce billet d’autres res­sour­ces <strong>sim­ples</strong> et <strong>en ligne</strong> si vous avez vos incon­tour­na­bles à con­seiller !</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="http://ateliers.klafoutis.org/post/2008/12/07/Quelques-liens-pour-les-designers-amateurs#rev-pnote-319-1" id="pnote-319-1">1</a>] Il est gen­til pour de vrai, il aide tou­jours plein de monde.</p></div>
Attention lastn ne définit pas une pagination !
urn:md5:c576eea0df71c20f48ca350978b8fd25
2008-12-01T18:45:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
Dotclear 2
thèmes
<p>Il n'est jamais trop tard pour apprendre… Je manipule pas mal les boucles de billets et leurs attributs depuis quelques semaines, pour Magda ou des thèmes qu'on me commande. C'est ainsi qu'il m'arrivait fréquemment de déterminer un nombre de billets par page dans la configuration puis de l'ajuster en fonction des besoins dans tel ou tel contexte. Par exemple, pour un blog qui n'affichait que les titres dans un contexte de catégorie on pouvait monter jusqu'à 30 billets par page, alors qu'en home où je balançais les billets complets, 5 était un nombre bien suffisant. <strong>ATTENTION DANGER !</strong></p> <p><img src="http://ateliers.klafoutis.org/public/krazy_kids/.tantrum2_s.jpg" alt="tantrum2.jpg" style="float:left; margin: 0 1em 1em 0;" title="tantrum2.jpg, nov. 2008" /> Ce qui semblera évident à tout codeur mais ne m'est apparu à moi que récemment, c'est que lorsqu'on passe en page 2 d'un contexte donné, cette page ne téléphone pas à la page 1 pour lui demander ce qu'elle a fait avec ses billets.</p>
<p>La conséquence ? Vous la voyez en très frappant sur Magda mais c'est vrai en toutes circonstances. Ayant réduit le nombre de billets de la home à 1, grâce à un judicieux <code><tpl:Entries lastn="1"></code> placé dans le fichier <code>_une.html</code>, j'espérais sottement, je vous l'accorde, que la page 2 commencerait au deuxième billet. Que nenni. Dans les ateliers, la pagination par défaut est fixée à 10 billets par page, c'est donc au onzième que démarre la page 2 (actuellement visible sur le lien « News » du menu horizontal). Aaaaaaarghl !</p>
<p>Pour la home, on peut contourner par l'installation du <a href="http://forum.dotclear.net/viewtopic.php?pid=236205#p236205">plugin HomePageMode</a> d'adjaya, qui shunte l'arrivée sur le blog en créant en quelque sorte un contexte spécifique. Mais pour les autres contextes ça n'existe pas.</p>
<p>Il est donc important lorsque vous personnalisez un thème que vous ayez ce paramètre en tête : <strong>la page 2 d'un contexte démarre au numéro du billet correspondant à la page 2 selon les réglages du nombre de billets par page des paramètres du blog</strong>.</p>
<p>Me voilà bien marrie, il faut que je reprenne tous mes thèmes (aucun de ceux qui sont sur DotAddict, je vous rassure) pour tenir compte de cette <del>anomalie</del> feature.</p>
<p>Merdalors !</p>
À vous de bosser (surtout toi, adjaya, hi hi)
urn:md5:77f102e01ee395e1110ed9f0eca76502
2008-11-28T15:22:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p>Amis ratiocineurs et pinailleurs de tout poil, bienvenue ici. <a href="http://ateliers.klafoutis.org/post/2008/11/28/?theme=magda">Magda</a> est prête à subir vos assauts (oui, j'ai plus ou moins décidé à peu près définitivement que ce thème s'appelerait Magda). Si vous avez des navigateurs exotiques ou ch**tiques, voire les deux, vos rapports de bugs m'intéressent.<br />
<br />
Sont également très bienvenues les suggestions d'amélioration de telle ou telle présentation. Je ne dis pas que je promets d'en tenir compte mais je promets de les envisager toutes.</p> <p><img src="http://ateliers.klafoutis.org/public/magda-tests.png" alt="Testez Magda !" style="display:block; margin:0 auto;" title="magda-tests.png, nov. 2008" /></p>
<p>J'ai aussi une très bonne nouvelle à annoncer aux débutants et aux feignasses dans mon genre : <a href="http://aiguebrun.adjaya.info/">adjaya</a> (que mille roses fleurissent sous ses pas) a accepté de mettre ses doigts de codeur dans le biniou.</p>
<p>Je ne peux pas m'avancer sur ce qu'il pourra faire exactement, mais l'idée c'est que le plus possible de personnalisation des contenus se fasse via la page de configuration du thème. Vu que j'ai sué sang et eau une grosse demi-journée pour <strong>adapter</strong> le configurateur de menu de Noviny à ce thème, vous pensez bien que je suis super soulagée et enthousiaste par la participation d'<a href="http://aiguebrun.adjaya.info/">adjaya</a> !</p>
<p>Pour l'instant si certains veulent jeter un œil en l'installant chez eux, l'archive beta de Magda en version beta est disponible en pièce jointe.</p>
<p>Attention : il faut au moins impérativement modifier la partie « carousel » de la home : j'y affiche les réductions de mes thèmes, ça va ramer à mort chez vous si vous l'utilisez sans changer ça.</p>
<p>P.S. Ah tiens j'ai oublié de m'occuper du formulaire de commentaires ;-)</p>
<p>PPS. L'image de ce billet est un collage du logo du thème et de l'un des super gamins de <a href="http://havanastreet.com">HavanaStreet</a>.</p>
<p><strong>Edit :</strong> comme vous le savez, Dotclear 2 permet désormais <a href="http://callmepep.org/bricoland/post/2008/10/23/Les-themes-herites-dans-Dotclear-21-%3A-un-rapide-apercu">la création de thèmes « enfants »</a>. Ces thèmes héritent des fichiers PHP (sauf _define) et tpl. <a href="http://ateliers.klafoutis.org/post/2008/11/28/?theme=magda_nude">Voici un exemple</a> avec un thème héritant de Magda. Son répertoire comporte uniquement :</p>
<ul>
<li>le _define.php indiquant qu'il s'agit d'un enfant de Magda</li>
<li>la copie telle quelle des fichiers layout.css et reset.css de Magda</li>
<li>un fichier style.css ne comportant que les instructions d'import des deux fichiers ci-dessus</li>
</ul>
<p>Yapluka mettre la déco ;-)</p>
Chuuuuuut c’est un secret
urn:md5:46bea81081d3f0db348bd4c5aeb68b6e
2008-11-23T15:41:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p>Je profite que bien peu de monde passe par ici (à en croire mes stats, le lieu est tout ce qu'il y a d'intime) pour présenter un thème (très très) en chantier, dont le nom tout à fait provisoire est Magda (ou CrazyKids ou carrément autre chose, on verra le moment venu). Bref, peu importe, ce qui compte c'est que ce thème sera accompagné d'une série d'articles, voire carrément d'un blog dédié à sa personnalisation. C'est un thème dit « magazine » dont l'objectif est d'être le plus souple possible.</p> <img src="http://ateliers.klafoutis.org/public/.superkid_s.jpg" alt="superkid ©HavanaStreet" style="float:left" />
<h3>Mon cahier des charges contenu</h3>
<h4>Contenu de la home</h4>
<ul>
<li>une bannière pouvant accueillir un logo *cliquable* sur une URL différente de celle du blog (typiquement le logo renvoyant sur le site/domaine auquel est attaché le blog)</li>
<li>un menu horizontal d'accès direct à la page 2 (voir plus bas), aux archives et à (ce qu'on veut)</li>
<li>un bloc présentant l'article en « une », avec une image au format small si elle existe. Ce billet sera, au choix :
<ul>
<li>le plus récent de tout le blog</li>
<li>le plus récent d'une catégorie particulière</li>
<li>le plus récent d'un billet doté d'un marqueur spécial (à développer)</li>
</ul></li>
<li>le nuage des 20 tags les plus fréquents (ou alpha)</li>
<li>un bloc par catégorie ou sous-catégorie (au choix de l'utilisateur) comportant :
<ul>
<li>le début du billet le plus récent de ladite catégorie ou sous-catégorie</li>
<li>au choix : l'icône de la catégorie ou le EntryFirstImage (paramétrable)</li>
</ul></li>
<li>les plus récents billets...
<ul>
<li>sélectionnés</li>
<li>ou sans catégorie</li>
<li>ou... (à paramétrer au choix de l'utilisateur)</li>
</ul></li>
<li>une série d'images en bandeau, piochée :
<ul>
<li>soit dans un répertoire de /public</li>
<li>soit extrayant les entryfirstimage d'une catégorie (par exemple ici j'ai fait ça avec mes thèmes)</li>
<li>soit depuis flickr (si faisable)</li>
<li>soit depuis une galerie gérée par gallery</li>
</ul></li>
<li>les autres widgets au choix de l'utilisateur</li>
</ul>
<h4>Contenu des autres pages</h4>
<ul>
<li>Accès aux <strong>pages suivantes</strong> de la home. Oui oui, je trouve utile qu'on puisse aller en page 2, 3, etc. pour les news suivant la home, de façon que la navigation ne soit pas limitée à la navigation intra-catégorie mais puisse l'être de façon traditionnelle (antichronologique).</li>
<li>Depuis une page de catégorie ou sous-catégorie : la liste des autres billets appartenant à la même catégorie / sous-catégorie. Idem pour tags (non tranché, à voir comment se traite le cas des gros blogs). J'avais dans l'idée que ça pourrait se coller dans la dernière page de la catégorie (avec lien d'accès direct)</li>
<li>Billet seul :</li>
</ul>
<h3>Contraintes techniques</h3>
<p>Elles sont très centrées sur le fait que ce thème doit être distribuable et hautement personnalisable. (On résumera en parlant de kit mais j'ai l'ambition de présenter quelque chose d'assez joli pour être utilisable tel quel)</p>
<ul>
<li>pas de plugin ou alors un et un seul plugin d'accompagnement du thème (mais si vraiment pas évitable)</li>
<li>layout fluide avec min-width et max-width mais pas fixe</li>
<li>paramétrable depuis un panneau de config autant que possible</li>
<li>portabilité maximale (par exemple l'icône de catégorie ne peut pas être piochée avec la short_url comme je l'aurais fait si ça n'avait été que pour moi : je ne peux connaître les urls de catégories des futurs utilisateurs)</li>
<li>mise en forme facilement personnalisable, aka : le moins possible de contraintes graphiques induites : pas de hauteur fixe pour le top, possibilité d'avoir ou non une image sur le billet de Une, etc.</li>
</ul>
<h3>Et vous là dedans ?</h3>
<p>Ben vous pouvez déjà <a href="http://ateliers.klafoutis.org/?theme=crazykids">jeter un œil</a> (<a href="http://ateliers.klafoutis.org/?theme=gris">cliquez ici pour revenir au thème initial</a>) à ce que ça donnera ici – j'ai l'intention d'en être la première utilisatrice. Pour l'instant il n'y a que l'ébauche de Une hein, tout le reste est très moche, j'avance à petits pas en fonction de mon temps disponible.</p>
<p>Vous pouvez aussi aller <a href="http://www.klafoutis.org/chantier">voir le blog d'accompagnement</a> et regarder les tutos déjà en place, faire des suggestions sur le thème, etc.</p>
<p>Vous pouvez aussi proposer votre collaboration (dûment créditée bien sûr) :</p>
<ul>
<li>pour rédiger des tutos</li>
<li>pour coder les fonctions manquantes (vous connaissez tous mon haut niveau de php n'est-ce pas ?)
<ul>
<li>aiguillage de la page 2 qui ne bouffe pas au passage les billets manquants de la Une</li>
<li>configurateur des contenus (adjaya, si tu passes par là il y a bcp de choses communes avec ton homepagemode mais je préférerais ne pas imposer l'install d'un plugin, ou alors un seul en fusionnant homepagemode et d'autres choses nécessaires ici ?)</li>
<li>comment piocher une icône de catégorie</li>
<li>comment piocher et afficher des images pour le bandeau en bas</li>
</ul></li>
</ul>
<p><em>(billet, bien sûr, susceptible d'évolutions et de modifications)</em></p>
MediaSizeClass, des CSS pour les zimages
urn:md5:a9b1bd5d618c3e956b22453266da25b7
2008-10-24T14:52:00+02:00
2009-01-03T15:56:54+01:00
Kozlika
Plugins
<p>Ce plu­gin ajoute dans tou­tes les bali­ses <img /> une class en fonc­tion de la taille (thumb­nail, square, small, medium) de l’image insé­rée.</p>
<p>L’idéal aurait été de pou­voir trai­ter le xhtml en sor­tie de trai­te­ment pour y ajou­ter par des cher­cher/rem­pla­cer magi­ques mes fameu­ses class, un peu comme le fait le plu­gin <a href="http://plugins.dotaddict.org/dc2/details/Typo">Typo</a>. C’était très au-des­sus de mes com­pé­ten­ces ! En revan­che, je savais pou­voir le faire en pas­sant par la mou­li­nette magi­que de jQuery et que c’est ainsi d’ailleurs que s’y prend le plu­gin <a href="http://plugins.dotaddict.org/dc2/details/External-Links">exter­nal­Links</a>.</p>
<p>En me basant sur ce plu­gin et avec de l’aide sur le forum, j’ai réussi à obte­nir le résul­tat sou­haité et je vous le fais par­ta­ger.</p> <h3>Il fait quoi ?</h3>
<p>Il ajoute dans tou­tes les bali­ses <img /> une class en fonc­tion de la taille (thumb­nail, square, small, medium) de l’image insé­rée. Les class sont :</p>
<ul>
<li><code>thumbnail-img</code></li>
<li><code>square-img</code></li>
<li><code>small-img</code></li>
<li><code>medium-img</code></li>
</ul>
<h3>Et ça sert à quoi ?</h3>
<p>Eh bien à leur appli­quer un style dif­fé­rent.</p>
<h4>Exem­ple 1</h4>
<p>Un cadre d’épais­seur dif­fé­rente.</p>
<pre class="brush: css">.thumb­nail-img, .square-img, .small-img, .medium-img {
bor­der-color: #ddd;
bor­der-style: solid
}
.thumb­nail-img {
bor­der-width: 1px;
}
.square-img {
bor­der-width: 3px;
}
.smalll-img {
bor­der-width: 5px;
}
.medium-img {
bor­der-width: 8px;
}</pre>
<h4>Exem­ple 2</h4>
<p>Une mar­quise pour les pho­tos de taille medium (et uni­que­ment elles).</p>
<pre class="brush: css">.medium-img {
pad­ding: 12px;
back­ground: #e5e5e5;
bor­der: 1px solid #bbb;
dis­play: block;
mar­gin: 1em auto;
}</pre>
<h3>Ça ne fonc­tion­nera pas si…</h3>
<h4>… javas­cript est désac­tivé</h4>
<p>C’est pour ça qu’un trai­te­ment du con­tenu du post aurait été pré­fé­ra­ble. Comme ce plu­gin uti­lise la biblio­thè­que jQuery, les class ne seront pas affec­tées sur les navi­ga­teurs de vos visi­teurs qui ont désac­tivé javas­cript.</p>
<h4>… si vous don­nez des ins­truc­tions con­tra­dic­toi­res</h4>
<p>Les règles dites « inline » ont prio­rité sur les règles de <code>style.css</code>. Donc, si par exem­ple vous indi­quez dans la CSS que les ima­ges de taille medium doi­vent être cen­trées mais qu’au moment de l’inser­tion d’une image dans votre billet vous choi­sis­sez “à gau­che”, c’est cette der­nière règle qui sera appli­quée. (Par exem­ple, dans le cas de l’exem­ple numéro 2, la der­nière ligne de la règle sera ino­pé­rante.)</p>
<h3>On récu­père ton plu­gin com­ment ?</h3>
<p>En le télé­char­geant depuis la pièce jointe. Cette pièce jointe est un .zip, décom­pres­sez-le puis envoyez-la dans <code>/plu­gins</code> de votre ins­tal­la­tion ou ren­sei­gnez le champ idoine du ges­tion­naire d’exten­sions de votre ins­tal­la­tion.</p>
<p>Ce plu­gin sera déposé sur DotAd­dict dès que ça sera à nou­veau pos­si­ble.</p>
Mises à jour des aorakits et de tous mes thèmes pour Dotclear 2
urn:md5:ce2e622291a81254dac6fc288ad8a37f
2008-09-14T13:37:00+02:00
2009-01-03T15:57:37+01:00
Kozlika
Carnet de notes
<p>En attendant que la mise à jour soit de nouveau possible sur themes.dotaddict.org, je mets ici à disposition l'ensemble des aorakits et de mes thèmes pour Dotclear 2 dans leur version compatible avec la dernière version de Dotclear.</p> <h3>Changelog / aorakits</h3>
<ul>
<li>Correction du marqueur pings_count en ping_count</li>
</ul>
<h3>Changelog / mes thèmes :</h3>
<h4>Bastienne</h4>
<ul>
<li>1.2</li>
<li>Suppression du fichier personnalisé pour l'affichage des archives mensuelles qui se présentent désormais avec la même structure que pour le thème par défaut. (Ce thème devient donc pure css.)</li>
<li>Changement de la typo du titre du blog, qui passe en Baskerville. (Je n'ai cependant pas refait le screenshot.)</li>
</ul>
<h4>Butterfly</h4>
<ul>
<li>1.2</li>
<li>Correction erreur : remplacement de la class .post-chapo par .post-excerpt</li>
<li>Conformité 2.0 finale : remplacement des id #syndicate et #links en class .syndicate et .links</li>
</ul>
<h4>Giacomo</h4>
<ul>
<li>1.2</li>
<li>Toilettage esthétique couleurs/images</li>
<li>Correction erreur : remplacement de la class .post-chapo par .post-excerpt</li>
</ul>
<p>A noter : ce thème comporte les règles nécessaires à la présentation du calendrier dans le fichier custom.css</p>
<h4>Hermione</h4>
<ul>
<li>1.2</li>
<li>déplacement des fichiers .html dans le sous-répertoire /tpl/</li>
<li>Conformité 2.0 finale :
<ul>
<li>head et infos de langue du fichier archive_month.html</li>
<li>Modif de #syndicate en .syndicate</li>
</ul></li>
</ul>
<p>A noter : ce thème comporte les règles pour la présentation du calendrier (dans le fichier custom.css) ainsi que le fichier archive_day.html, tous deux nécessaires au plugin dayMode s'il est installé.</p>
<h4>Kameleon For Dissitou</h4>
<ul>
<li>1.0</li>
<li>Conformité 2.0 : modifs des fichiers html et déplacement dans /tpl/</li>
</ul>
<h4>Lakme</h4>
<ul>
<li>1.2</li>
<li>Correction du téléscopage des deux liens de syndication</li>
<li>Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier dans le rep /tpl/</li>
</ul>
<h4>Marie</h4>
<ul>
<li>1.2</li>
<li>correction d'un marqueur .prelude au lieu de #prelude sur la règle de son a:hover</li>
<li>correction du marqueur .post-chapo en .post-excerpt</li>
<li>Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier dans le rep /tpl/</li>
</ul>
<h4>Melisande</h4>
<ul>
<li>1.2</li>
<li>correction du marqueur .post-chapo en .post-excerpt</li>
<li>correction du nom d'image pour le bord inférieur de la page</li>
</ul>
<h4>Oberon</h4>
<ul>
<li>1.2</li>
<li>correction du marqueur .post-chapo en .post-excerpt</li>
<li>Conformité 2.0 :
<ul>
<li>modif de #tags en .tags</li>
<li>modif de #syndicate en .syndicate</li>
<li>déplacement des fichiers .html dans le sous-répertoire /tpl/</li>
</ul></li>
</ul>
<h4>Papageno</h4>
<ul>
<li>1.2</li>
<li>Mise en conformité 2.0 finale des fichiers archive_month.html et archive_day.html et transfert de ces fichier dans le rep /tpl/</li>
</ul>
<p>A noter : ce thème comporte les règles pour la présentation du calendrier (dans le fichier custom.css) ainsi que le fichier archive_day.html, tous deux nécessaires au plugin dayMode s'il est installé.</p>
<h4>Welsh 2.0</h4>
<ul>
<li>1.0</li>
<li>Mise en conformité 2.0 finale du fichier archive_month.html et transfert de ce fichier et de _top.html dans le rep /tpl/</li>
<li>Possibilité d'alimenter les onglets depuis l'éditeur de thème et marquage auto de l'onglet actif</li>
<li>Ajout d'un LISEZ-MOI.txt pour les conseils de mise en place</li>
</ul>
<h3>J'en veux !</h3>
<p><a href="http://ateliers.klafoutis.org/public/themes-zips">Tout est là</a>.</p>
<p>N'hésitez pas à signaler le moindre problème.</p>
Quelques liens
urn:md5:5f97344143991ff392389c41de80ccf2
2008-06-29T11:41:00+02:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<ul>
<li><a href="http://www.viperchill.com/website-health-check/" hreflang="en">Website health check</a>, check list de contrôle des points importants à vérifier pour votre site.</li>
<li><a href="http://www.toxel.com/design/2008/06/25/24-websites-with-free-photoshop-tutorials/" hreflang="en">24 sites de tutoriels gratuits pour Photoshop</a>. Ces sites sont malheureusement tous anglophones mais lorsque les tutos sont bien faits avec beaucoup de copies d'écran on s'en sort tout de même. Petit bémol : pas évident de transposer les menus anglais... A compléter avec <a href="http://justcreativedesign.com/2008/06/26/adobe-photoshop-tips-tricks/" hreflang="en">6 trucs et astuces que vous ne connaissez sûrement pas</a>.</li>
<li><a href="http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/" hreflang="en">Coller le pied de page en bas</a>. Je n'aime pas trop la div vide (clearfooter), mais au moins ça fonctionne et c'est en pur css... A rapprocher de <a href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/" hreflang="en">cet autre tuto</a> sur le même principe.</li>
</ul>
Reprise progressive d'activité
urn:md5:7db5c8a60f088b88c1ec2aa6299dac45
2008-06-14T12:05:00+02:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p>Après une assez longue période de pas-envie, me voici revenue au pays des sorciers. Au programme des prochaines semaines :</p> <ul>
<li>Mise à jour des thèmes pour la version finale de Dotclear 2.
<ul>
<li>Ceux proposés aujourd'hui sont fonctionnels mais à partir de la finale les fichiers *.html devront impérativement être rangés dans un répertoire <code>/le_theme/tpl/</code> ; autant le faire dès maintenant ;</li>
<li>Je ne crois pas avoir de fichiers <code>_head.html</code> personnalisés dans mes thèmes mais si c'est le cas je dois les mettre à jour ;</li>
<li>Voir si je peux mettre quelque chose en place pour alimenter les menus de Welsh plus facilement (et proposer en alternative le plugin d'adjaya)</li>
</ul></li>
<li>Reprendre les tutoriels pour Dotclear 2
<ul>
<li>Nettoyage éventuel des trucs qui ne sont plus utiles ou invalides depuis la RC</li>
<li>Poursuivre les tutos de familiarisation/personnalisation pour les grands débutants</li>
</ul></li>
<li>Refaire le thème de ce site. Pour tout dire, l'excercice et la recherche iconographique d'un thème "fifties" m'ont amusée mais je ne m'y sens pas chez moi. En attendant j'ai mis le thème gris (qui ne m'emballe pas non plus) en thème par défaut.</li>
<li>Aller aider mes petits camarades
<ul>
<li>sur le forum</li>
<li>mise à jour de themes.dotaddict.org</li>
<li>aider sur tips.dotaddict.org (au fait si vous voulez donner un coup de main vous aussi...)</li>
<li>compléter la doc.dotclear.net</li>
</ul></li>
<li>Supprimer la ml de support de mes thèmes qui ne donne rien de vraiment probant, reprendre le support directement ici</li>
</ul>
<p>Pour me faire pardonner cette longue absence, je vous offre quelques liens qui m'ont intéressée ces derniers temps. Ils sont tous en anglais hélas, mais puisque j'ai réussi à comprendre vous devriez y parvenir vous aussi ;-)</p>
<ul>
<li><a href="http://www.findfreeclipart.com/">FindFreeClipart</a>. Un moteur de recherche spécialement dédié à la recherche de cliparts gratuits.</li>
<li><a href="http://www.photoshoplady.com/">Photoshop Lady</a>. Des tutoriels Photoshop bien fichus et classés par type.</li>
<li><em>Comment je fais pour supprimer le titre du blog ? Il est déjà dans ma bannière.</em> Ne le supprimez pas, connaître les méthodes de référencement concerne aussi les designers. Les erreurs à ne pas commettre, les conseils à suivre : <a href="http://www.webdesignerwall.com/general/seo-guide-for-designers/" hreflang="en">SEO Guide for Designers</a>.</li>
<li><a href="http://northtemple.com/1608" hreflang="en">The Accessibility Checklist I Vowed I’d Never Write</a> (à télécharger également <a href="http://cameronmoll.com/downloads/Web_Accessibility_Checklist.pdf">en pdf</a>). Une check-list des points de contrôle d'accessibilité écrite par Aaron Cannon, un développeur web lui-même aveugle. Je vous conseille également <a href="http://vimeo.com/1157346" hreflang="en">cette vidéo</a>, qui le montre en train de naviguer sur le web. On en comprend tout de suite mieux les particularités et l'intérêt de respecter ses recommandations.</li>
</ul>
YAML Builder
urn:md5:02f9d68a018e95491456e8506bbd18ac
2008-02-29T09:09:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p><a href="http://builder.yaml.de/">YAML Builder</a>, <em>a tool for visual layout development of YAML based CSS layouts.</em></p>
<p>Outil en ligne de construction de structures css et html correspondant. Et en guise de cerise sur le gâteau, c'est valide ;)</p>
Kameleon for Dissitou
urn:md5:139b7941bf2f23b26b86d7fbf6c165a4
2008-02-28T12:39:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Thèmes pour Dotclear 2
<p>Trois colon­nes à l’accueil, deux colon­nes dans les pages inté­rieu­res, Kame­leon for Dis­si­tou offre trois décli­nai­sons pos­si­bles selon que l’on pré­fé­rera accueillir des brè­ves, un édito ou les billets “à rete­nir” dans la colonne sup­plé­men­taire de l’accueil.</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc2/kameleon/kameleon.jpg" alt="kameleon.jpg" style="display:block; margin:0 auto;" title="kameleon.jpg, oct. 2008" /></p>
<p>Je me rends compte que je n’avais pas publié ici le thème Kame­leon for Dis­si­tou, ce billet répare cette omis­sion.</p>
<p>Ce thème est dis­po­ni­ble dans les gale­ries de Dotad­dict :</p>
<ul>
<li><a href="http://themes.dotaddict.org/galerie-dc2/details/Kameleon-For-Dissitou">Fiche</a></li>
<li><a href="http://themes.dotaddict.org/demo-dc2/?theme=kameleon">Démons­tra­tion</a></li>
</ul>
<p>Un fichier lisez-moi.txt placé dans le réper­toire du thème détaille la pro­cé­dure pour choi­sir votre varia­tion. Vous pou­vez aussi le con­sul­ter <a href="http://ateliers.klafoutis.org/public/themes-dc2/kameleon/lisez-moi.txt">ici même</a>.</p>
<p>Pour vous dire la vérité, je me sou­viens qu’il res­tait des cas à régler (trop peu de brè­ves, moins de billets que celui déter­miné par la pagi­na­tion) mais je ne sais plus du tout si je l’avais fait ou non ! N’hési­tez donc pas à hur­ler ici si le fonc­tion­ne­ment du thème sur votre blog pré­sente des ano­ma­lies.</p>
Trois en un, bienvenue dans les Ateliers du klafoutis
urn:md5:f502360884b7bce11348aee133bf917c
2008-02-25T14:42:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
<p>J'en avais parlé, j'ai un peu tardé à le faire, cette fois moins par procrastination que par manque de temps et de disponibilité d'esprit. C'est aujourd'hui chose faite : les présents <a href="http://ateliers.klafoutis.org">Ateliers du klafoutis</a> remplacent tout à la fois mon blog des thèmes pour Dotclear 1, celui des thèmes pour Dotclear 2 et celui où je rassemblais mes notes sur Dotclear 2.</p> <p>La prévisualisation des thèmes <em>in vivo</em> ici a été supprimée puisque désormais les blogs de démonstration de <a href="http://ateliers.klafoutis.org/post/2008/02/25/DotAddict">http://themes.dotaddict.org</a> sont là. Il m'arrivera cependant de proposer en démo ici un thème pas encore déposé pour vous demander de le tester.</p>
<p>Le support des thèmes via <a href="http://ateliers.klafoutis.org/post/2007/06/03/Ouverture-dune-liste-dinformations-et-dentraide">une liste de diffusion</a> s'est révélé insuffisant : peu d'entre vous ont osé s'y inscrire et d'autre part une fois les adaptations faites sur un thème on n'a pas forcément envie de rester abonné à une liste qui ne nous intéresse plus. Je ne supprime pas cette liste mais je rouvre les commentaires sur les billets. Chacun choisira ainsi ce qui lui convient le mieux.</p>
<p>J'ai sans doute des liens à corriger, les redirections depuis <a href="http://jethemais.klafoutis.org" title="http://jethemais.klafoutis.org">http://jethemais.klafoutis.org</a>, <a href="http://jetheme.klafoutis.org" title="http://jetheme.klafoutis.org">http://jetheme.klafoutis.org</a> et <a href="http://dissitou.klafoutis.org" title="http://dissitou.klafoutis.org">http://dissitou.klafoutis.org</a> ne sont pas encore en place (je raaaaame ;)) mais ça va viendre.</p>
<p>En attendant, bonne visite à vous, j'espère que la peinture fraîche vous plaira<sup>[<a href="http://ateliers.klafoutis.org/post/2008/02/25/Les-ateliers-du-klafoutis#pnote-257-1" id="rev-pnote-257-1">1</a>]</sup>. D'ailleurs si les années fifties vous amusent j'ai rassemblé dans <a href="http://ateliers.klafoutis.org/infos/Liens-Fifties">une page de ce blog</a> une pelote de liens inspirants et utiles.</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="http://ateliers.klafoutis.org/post/2008/02/25/Les-ateliers-du-klafoutis#rev-pnote-257-1" id="pnote-257-1">1</a>] En fait j'étais partie <a href="http://ateliers.klafoutis.org/?theme=gris">sur une toute autre piste</a> au début. Pour revenir au thème initial <a href="http://ateliers.klafoutis.org/?theme=fifties">hop, un clic</a>.</p></div>
Une image réactive en plusieurs zones
urn:md5:d0e75a68a05f745fa3b5d8e725943d35
2008-01-14T18:18:00+01:00
2009-01-03T15:57:37+01:00
Kozlika
Expérimentations
<p>Créer des zones réac­ti­ves sur une seule image à l’aide de règles css.</p> <p><img src="http://ateliers.klafoutis.org/public/labokoz/.cdipv_s.jpg" alt="cdipv.png" style="float:left; margin: 0 1em 1em 0;" title="cdipv.png, janv. 2008" /> Sur­vo­lez cha­que des­sin pour voir l’image réa­gir. Le des­sin fait place au point-vir­gule seul et cha­cune des zones fait lien vers la page de la fonte uti­li­sée pour cette démons­tra­tion ; le nom de cha­cune de ces fon­tes s’affi­che dans une éti­quette au sur­vol.</p>
<pre class="brush: html"><div id="encart">
<ul id="cdipv">
<li id="haut">
<ul id="ulhaut">
<li><a id="haut-gauche" href="http://www.myfonts.com/fonts/linotype/itc-american-typewriter/" title="American Typewriter">American Typewriter</a></li><li><a id="haut-centre" href="http://www.dafont.com/en/buy-font.php?f=Algerian+Condensed&amp;v=linotype" title="Algerian Condensed">Algerian Condensed</a></li><li><a id="haut-droite" href="http://www.dafont.com/en/font.php?file=anke_calligraphic_f" title="Anke Calligraphic">Anke Calligraphic</a></li> </ul> </li>
<li id="milieu"><a href="http://sablier.hautetfort.com/archive/2005/11/10/defense-et-illustration-du-point%E2%80%93virgule-le-comite.html" title="Le billet fondateur chez Fulgineuse">Comit&eacute; de d&eacute;fense et d'illustration du point-virgule</a></li>
<li id="bas"> <ul id="ulbas"> <li><a id="bas-gauche" href="http://www.dafont.com/en/font.php?file=iglook" title="Iglook">Iglook</a></li> <li><a id="bas-centre" href="http://www.linotype.com/596/itcbradleyhand-family.html?PHPSESSID=3ada25f142a7e773a52b39f7cfb99552" title="Bradley Hand">Bradley Hand</a></li> <li><a id="bas-droite" href="http://www.myfonts.com/fonts/apple/chancery/apple-chancery/" title="Apple Chancery">Apple Chancery</a></li> </ul> </li>
</ul>
</div></pre>
<p><em>(Cet exem­ple peut être vu seul et sa con­coc­tion con­sul­tée en affi­chant la source de <a href="http://ateliers.klafoutis.org/public/labokoz/cdipv.html">la démo</a> et <a href="http://ateliers.klafoutis.org/public/labokoz/cdipv.png">l’image uti­li­sée</a>.)</em></p>
<p>Inti­tu­lée « Éloge du point-vir­gule », cette expé­ri­men­ta­tion fut réa­li­sée pour <a href="http://www.kozlika.org/kozeries/post/2005/11/15/362-comite-de-defense-et-d-illustration-du-point-virgule">mon blog per­son­nel</a> à l’occa­sion d’un appel à faire l’éloge du point-vir­gule.</p>
Sauterelle
urn:md5:759815b5a4ed1806623efaca69d8909d
2007-11-07T14:03:00+00:00
2009-01-03T14:56:54+00:00
Kozlika
Thèmes pour Dotclear 1
2 colonnes
Dotclear 1
fixe
thèmes
<p>Sau­te­relle est un thème plus par­ti­cu­liè­re­ment des­tiné aux dia­ris­tes : l’accueil affi­che les billets jour par jour et la navi­ga­tion est plus cen­trée sur la chro­no­lo­gie que sur les caté­go­ries.</p> <p><a href="http://ateliers.klafoutis.org/public/themes-dc1/sauterelle/sauterelle.png"><img src="http://ateliers.klafoutis.org/public/themes-dc1/sauterelle/.sauterelle_m.jpg" alt="sauterelle.png" style="display:block; margin:0 auto;" title="sauterelle.png, nov. 2007" /></a></p>
<p>Pour lais­ser toute la place aux billets, l’habi­tuel menu est déporté sur une page annexe (incluse dans le thème) acces­si­ble depuis l’item « Cen­tre d’aiguillage ». On le modi­fie en édi­tant le fichier <code>plan.php</code>.</p>
<p>Trucs kifon­joli et trucs pra­ti­ques :</p>
<ul>
<li>Le lien de retour à l’accueil (quand on n’est pas à l’accueil, sinon rien) porte la date du billet le plus récent.</li>
<li>Le car­tou­che sous la sau­te­relle con­tex­tua­lise la page affi­chée.</li>
<li>Lors­que plu­sieurs billets ont été écrits le même jour, un car­tou­che en bas d’un billet indi­que les autres de la même date.</li>
<li>Le calen­drier des billets est en forme de “ruban” à plat.</li>
<li>Le cen­tre d’aiguillage con­tient les élé­ments habi­tuels du side­bar, sauf la recher­che et la syn­di­ca­tion qui sont en pied de tou­tes les pages. La divi­sion en deux boi­tes per­met de sépa­rer les liens inter­nes et exter­nes.</li>
</ul>
<ul>
<li>Pour les per­son­na­li­sa­tions :
<ul>
<li>l’image du top est indé­pen­dante de la ban­nière elle-même, suf­fit de met­tre l’image de son choix aux mêmes dimen­sions (225 * 170px) à la place dans le rep des ima­ges du thème.</li>
<li>les cou­leurs s(er)ont lis­tées en haut de la css pour faci­li­ter le cher­cher/rem­pla­cer (en cours, gépo­fini)</li>
</ul></li>
</ul>
<p>Liens de télé­char­ge­ment sur <a href="http://themes.dotaddict.org">the­mes.dotad­dict.org</a>.</p>
Malaclemys : au boulot les gens !
urn:md5:9f2b18226c0c1806cb049b65a4d11c14
2007-10-31T14:39:00+01:00
2009-01-03T15:56:54+01:00
Kozlika
Carnet de notes
Dotclear 2
thèmes
<p>Merci de tes­ter sur vos navi­ga­teurs et de me faire part de vos remar­ques z’et sug­ges­tions.</p> <p><img src="http://ateliers.klafoutis.org/public/themes-dc2/malaclemys/screenshot.jpg" alt="screenshot.jpg" style="float:left; margin: 0 1em 1em 0;" title="screenshot.jpg, janv. 2009" /> Selon une tra­di­tion que j’ai inven­tée moi même et que vous êtes priés de res­pec­ter, je mets en phase de test un nou­veau thème à livrer dans les gale­ries de <a href="http://themes.dotaddict.org">dotad­dict</a>.</p>