{"id":1761,"date":"2004-05-29T10:40:13","date_gmt":"2004-05-29T10:40:13","guid":{"rendered":"http:\/\/svay.com\/blog\/?p=1761"},"modified":"2004-05-29T10:40:13","modified_gmt":"2004-05-29T10:40:13","slug":"115-creer-un-theme-pour-dotclear","status":"publish","type":"post","link":"https:\/\/svay.com\/blog\/115-creer-un-theme-pour-dotclear\/","title":{"rendered":"Cr\u00e9er un th\u00e8me pour DotClear"},"content":{"rendered":"<p>Un lecteur m&#8217;a demand\u00e9 dans un commentaire d&#8217;expliquer le processus de cr\u00e9ation du th\u00e8me DaClear. Au lieu de simplement r\u00e9pondre au commentaire, je vais le faire dans ce billet.<\/p>\n<p><!--more--><\/p>\n<p> Pour cr\u00e9er le th\u00e8me de DotClear, je suis un processus qui me guide g\u00e9n\u00e9ralement dans le cr\u00e9ation de toute page web. <\/p>\n<h3>1. Dessin sur papier<\/h3>\n<p>Je commence par dessiner sur papier la page telle que je la souhaite. &Ccedil;a me permet de juger du positionnement des \u00e9l\u00e9ments et de l&#8217;ambience globale de la page. J&#8217;en profite pour noter les id\u00e9es pour des petits d\u00e9tails et autres effets. <\/p>\n<p>Je n&#8217;aime g\u00e9n\u00e9ralement pas coder directement, cette \u00e9tape est probablement l&#8217;une des plus importantes m\u00eame si le r\u00e9sultat final peut s&#8217;\u00e9loigner grandement du dessin. <\/p>\n<h3>2. Recherche des couleurs<\/h3>\n<p>&Eacute;tant donn\u00e9 que je dessine au crayon de papier, le th\u00e8me est encore en noir et blanc. J&#8217;utilise alors un outil comme <a href=\"http:\/\/color.twysted.net\/\">ColorMatch Remix<\/a> pour trouver une palette qui me convienne. Malheureusement, j&#8217;ai trop tendance \u00e0 retomber sur des d\u00e9clinaisons de gris dont j&#8217;aimerai me d\u00e9tacher pour faire des choses plus color\u00e9es.<\/p>\n<p>D&#8217;une mani\u00e8re plus g\u00e9n\u00e9rale, <a href=\"http:\/\/www.mezzoblue.com\/archives\/2004\/05\/14\/colour_schem\/index.php\">le r\u00e9cent article sur Mezzoblue<\/a> explique bien la recherche d&#8217;une palette de couleur. <\/p>\n<h3>3. Mettre en place un DotClear de test<\/h3>\n<p>Je duplique ensuite le th\u00e8me par d\u00e9faut dont je retire tous les styles et toutes les images pour ne garder que les templates PHP. Je peux alors afficher un blog &laquo;nu&raquo; sur mon serveur local. Je poste quelques billets et commentaires pour avoir un minimum de contenu. Parmi les diff\u00e9rents billets, je poste <a href=\"http:\/\/cvs.neokraft.net\/viewcvs.cgi\/wiki2xhtml\/texte-demo.txt\">le texte de d\u00e9mo de wiki2xhtml<\/a> pour ne pas oublier d&#8217;\u00e9l\u00e9ments \u00e0 styler. <\/p>\n<p><a href=\"http:\/\/dev.dotclear.net\/trac\/wiki\/DotClear\/fr\/Documentation\/Themes\">La documentation de DotClear<\/a> est \u00e9galement n\u00e9cessaire pour modifier les templates.<\/p>\n<h3>4. Cr\u00e9ation de la feuille de style<\/h3>\n<p>Je peux alors commencer la feuille de style (positionnement, styles des \u00e9l\u00e9ments HTML, et autres effets) en cr\u00e9ant au fur et \u00e0 mesure les images dont j&#8217;ai besoin.<\/p>\n<p> Pour la feuille de style j&#8217;utilise <a href=\"http:\/\/www.bradsoft.com\/topstyle\/index.asp\">TopStyle Lite<\/a> et pour les images j&#8217;utilise Photoshop. J&#8217;ai appris \u00e0 utiliser ce dernier logiciel il y&#8217;a peu pendant mes cours \u00e0 l&#8217;universit\u00e9 mais je pense que je vais me mettre \u00e0 The Gimp pendant ces grandes vacances. <\/p>\n<p>Il arrive parfois que je me rende compte que l&#8217;id\u00e9e de d\u00e9part n&#8217;\u00e9tait pas aussi bien que je l&#8217;esp\u00e9rais. Je retravaille alors le document jusqu&#8217;\u00e0 trouver quelque chose qui me convienne. Pour anecdote, daClear \u00e9tait \u00e0 l&#8217;origine dans les tons oranges\/bruns sur fond blanc&#8230;<\/p>\n<h3>5. Tests<\/h3>\n<p> Finalement, la page est test\u00e9e dans diff\u00e9rents navigateurs. J&#8217;ai \u00e0 ma disposition des navigateurs MSHTML (Internet Explorer de 4 \u00e0 6), Gecko (Mozilla Suite, Firefox, Epiphany), texte (Lynx) et autre (Op\u00e9ra). <\/p>\n<h3>6. Distribution<\/h3>\n<p>Il ne reste plus qu&#8217;\u00e0 packager le th\u00e8me avec l&#8217;extension de DotClear et \u00e0 mettre en ligne le fichier.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un lecteur m&#8217;a demand\u00e9 dans un commentaire d&#8217;expliquer le processus de cr\u00e9ation du th\u00e8me DaClear. Au lieu de simplement r\u00e9pondre au commentaire, je vais le faire dans ce billet.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1761"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=1761"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/1761\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=1761"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=1761"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=1761"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}