Et ce soir, je suis tombé sur un article de Ian Stewart, le créateur de Thematic, le célèbre Framework de thèmes pour WordPress, qui vient d’avoir l’idée de reprendre un peu ce qui a été fait il y a quelques années au niveau des tutoriels de création de thèmes et de les remettre au goût du jour. Au programme, il a l’intention de revoir certains aspects qui ont évolué depuis 2/3 ans au sein même de WordPress et d’aborder toute une série de sujets qui ont évolué au niveau de webdesign même depuis quelques années. Bien entendu, il parlera de Thematic.

Je me suis dit que c’était une bonne opportunité pour faire une petite “update” sur les tutoriels que j’ai fait il y a de cela deux ans et de vous proposer quelques tutoriels de plus en tenant compte de ce que Ian va proposer à ces lecteurs. Je pense que ce sera utile pour tout le monde et notamment pour ceux qui ne lisent pas très bien l’anglais.

Donc, je ne sais pas encore comment vont s’articuler ces articles puisque ceux de Ian ne sont pas encore en ligne, mais au fur et à mesure de leur parution, soit je vous ferai une traduction si ça s’impose, soit je retranscrirai les idées mais à ma sauce, le tout conçu pour qu’un maximum de vous comprenne ce dont on parle. J’ai eu l’aval de Ian pour pouvoir travailler à partir de ses tutoriels à venir. Chaque aspect abordé sera lié directement à l’article original paru sur ThemeShaper.com.

Enfin, ce sera également une bonne opportunité pour vous de découvrir Thematic qui semble s’imposer actuellement comme étant le “theme framework” de WordPress par excellence.

Je vous tiendrai donc au courant dès que j’aurai plus de news. Les articles devraient arriver progressivement à partir de la première semaine de juillet ( là, je suis en vacances !! ).

PS: A noter que les tutos concernant la création du design d’un thème WordPress est toujours en cours et est planifié pour l’été…

A très bientôt

Francis

Très vite, les réactions ont été nombreuses pour saluer cette évolution qui risque de faire plaisir à pas mal de monde, mais dans le fond, qu’est-ce que ça va changer ?

En gros et pour faire simple, WordPress MU est un WordPress qui permet de créer d’autres blogs avec la même installation. D’où le côté Multi Users. Avec MU, vous pouvez donc gérer différents blogs avec une seule installation. Mais le gros plus depuis la fin de l’année 2008, c’est l’arrivée de BuddyPress, qui permet de former une sorte de réseau social sur son site, ce qui est génial pour créer de véritables communautés. Et ça, ce n’est possible qu’avec WordPress MU. Ca veut donc dire que dans un futur proche, on risque de voir débarquer une nouvelle version de WordPress, permettant le multi-blogs ( que d’autres plateformes comme Habari ou Movable Type ont déjà en natif ) et agrémenté d’un outil de “social media” tel que BuddyPress.

Jusqu’à hier soir, nombreux sont ceux qui ne voulaient pas y croire et l’article de Lorelle sur The Blog Herald a considérablement semé la confusion ! Mais en y regardant de plus près les commentaires, Matt est venu confirmer cette fusion entre les deux versions de WordPress… Qui plus est, Jeffro a eu confirmation auprès de Donncha:

donncha - Sure, MU will be merged into WP. That’s basically the whole story
jeffr0 - Majority of people believe a merging of the two projects. WordPress and WordPress MU into one project with a rumored completion of WordPress 3.0. Now posts like Lorelle’s on the blogherald are creeping up suggesting no, WordPress.org will be powered by WordPress MU or something like that. No one knows anything
donncha - It’s just MU -> WP. Everything else is speculation.
jeffr0 - So WPMU becomes WP and that’s that?
donncha - basically, yes.

Autant dire que le pas sera de géant et risque de changer pas mal de choses pour nous blogueurs et utilisateurs. Maintenant, reste à voir comment tout ça va prendre forme et quand… Les premiers pronostics tablent sur l’arrivée de tous ces changements pour la version 3.0 de WordPress, c’est-à-dire vers la fin de l’année…

Alors ? Que pensez-vous de tout ça ?

Le livre s’articule autour de la création de 3 thèmes: un pour un blog, un pour un site web classique et un pour créer un portfolio. A vrai dire, ce ne sont pas 3 thèmes distincts mais un thème “blog” que l’on modifie ensuite pour en faire un site web et un portfolio.

Les étapes sont intéressantes et bien détaillées puisque dans les premiers chapitres, le livre vous explique le fonctionnement de WordPress d’un point de vue technique. De quoi réviser ses bases !! Ensuite, on aborde rapidement la création du premier thème. Et on retrouve ici 3 phases principales:

• Création du mockup Photoshop
• Création de la maquette XHTML et CSS
• Création du thème WordPress

Pour ce qui est du mockup, les étapes sont intéressantes pour ceux qui veulent connaître l’utilisation de Photoshop à des fins de webdesign. Le thème n’est pas très compliqué donc c’est assez simple à suivre. On peut parfois regretter le manque d’explication sur certaines techniques, mais l’ensemble se tient. Autre manque je trouve, ce sont des explications concernant le pourquoi du choix de la structure du thème. On part ici du principe que tous les choix sont déjà fait et je trouve qu’il aurait été intéressant d’expliquer les différentes étapes avant la création du design.

Pour ce qui est de l’intégration XHTML et CSS, l’étape est bien détaillée. C’est à la limite celle que je préfère parce qu’elle permet de se concentrer uniquement sur l’ergonomie et la structure du site sans avoir à assimiler les tags de WordPress. De plus, c’est toujours intéressant de voir les méthodes qu’emploient d’autres designers pour contruire leurs site. Donc, vraiment une bonne partie.

Enfin, on a l’intégration en thème WordPress et là, je suis plus mitigé. Le thème utilise des fonctions qui ne sont intégrables que via PHP. Ici, la connaissance des tags WordPress ne sera pas suffisante. Pour bien comprendre toute l’intégration du thème, il faut avoir des connaissances en PHP. Certes, la démarche est expliquée mais je trouve que ça reste trop technique. Les personnes qui connaissent le PHP comprendront la démarche, les autres auront plus de mal à suivre… surtout que c’est en anglais !!

Ensuite, on va décliner le même thème pour un site web “classique”, donc avec un page d’accueil différente que celle du blog, et enfin on va créer un thème pour un portfolio.

Pour la création de ces deux thèmes, on n’a pas non plus d’explications concernant les choix en terme de design, d’ergonomie et de structure. On parle peu design je trouve mais beaucoup intégration et surtout PHP. Bien entendu, créer un thème WordPress c’est pas mal de technique ! Et de ce côté-là l’ensemble du thème est bien ficelé parce que le choix de ces 3 thèmes permet non seulement d’avoir une vue d’ensemble sur ce qu’on peut faire avec WordPress, mais permet aussi de voir toute une série de hacks à utiliser. Je regrette seulement que le livre n’aborde pas plus le côté conception initiale.

La création des deux autres thèmes reprendra le thème initial de type “blog” et le modifiera en fonction des besoins des autres thèmes. Donc, une très grosse partie sur l’intégration en thème et finalement peu de choses sur les parties design et XHTML/CSS.

Quoi qu’il en soit, pour ceux qui veulent aller plus loin dans la compréhension d’un thème WordPress, ce livre est très intéressant. Comme je l’ai dit plus haut, il permet de voir les différents aspects de la création d’un thème et partage pas mal d’astuces, ce qui est toujours un plus. Maintenant, je pense que pour que le livre soit complet, il aurait fallu parler un peu plus des étapes qui précèdent l’intégration. Ici, le livre coûte 29$ pour finalement fournir beaucoup d’informations que l’on peut retrouver sur internet, et sans chercher trop longtemps. Et donc, c’est pour ça que mon constat est assez mitigé. Le livre explique tout très bien mais finalement on y apprend peu de choses si on est assidu aux articles WordPress sur Internet. Là où le livre est intéressant, c’est pour les webdesigners qui n’ont aucune connaissance de WordPress et qui n’ont pas le temps de chercher les informations sur le web.

En tout cas, si ce livre vous intéresse, vous pouvez toujours vous le procurez sur le site web de Rockable Press, pour le prix de 29$ ( et pour ce prix là, vous n’avez qu’un PDF ! )

Pour le lancement du blog, j’avais lancé une campagne de “recrutement” pour en faire un blog collaboratif, qui tournerait autour d’une équipe. Ca a eu pas mal de succès puisqu’une trentaine de personnes se sont montrées intéressées pour écrire des articles sur Blogalwarming. On a donc lancé le site et après quelques semaines, nous nous sommes rendus compte que sur 30 personnes motivées, uniquement une petite dizaine avait commencé à rédiger des articles.

Au fur et à mesure des semaines, la motivation de la plupart des rédacteurs a chuté. Les raisons sont simples. Nous sommes tous blogueurs, on a tous une vie et le temps nous manquent pour écrire des articles. La vie reprend le dessus et c’est difficile de tenir le rythme. Je suis moi-même dans ce cas-là, et ne blâmerai personne. Du coup, depuis quelques temps, le nombre d’articles publiés est en chute libre. Mais je n’ai pas envie de laisser tomber, donc c’est pour ça que je lance un nouvel appel pour trouver de nouveaux rédacteurs.

Etre rédacteur sur Blogalwarming ça consiste en quoi ?

En fait, je ne demande pas grand chose, juste la volonté d’écrire un article de temps en temps avec l’envie de partager sur des sujets aussi variés que le développement durable, les nouvelles énergies, le bio, l’automobile de demain, et j’en passe. Le but étant toujours de former une équipe qui s’approprie le blog et qui le fasse tourner. Depuis le départ, on s’est toujours dit que si on était 10 motivés à raison de 1 ou 2 articles par semaine, on n’aurait que 1 article à écrire par mois.

Je suis aussi à la recherche d’idées pour faire vivre un blog communautaire ou collaboratif. Comment garder la motivation des participants, comment stimuler l’intérêt pour un tel projet. J’avoue que c’est mon premier projet de ce type donc je suis ouvert à toute proposition.

Donc, si vous avez des idées ou que vous souhaitiez rejoindre l’équipe du blog, faîtes le moi savoir en laissant un commentaire. Et surtout, n’hésitez pas à poser vos questions et autres remarques.

Merci d’avance !!

L’objectif de Cufon est le même ! Grâce à un script, vous allez pouvoir afficher la police que vous voulez sur votre site. sIFR n’est pas trop utilisé aujourd’hui sur le web parce qu’il est lourd à gérer et ne permet pas toujours d’arriver au résultat attendu. Même des personnes qui en connaissent bien le fonctionnement n’arrive pas toujours non plus à en faire ce qu’ils veulent. Qui plus est, le fait que ce soit en Flash pose d’autre soucis.

Ici, non seulement l’installation est simple mais en plus la customisation l’est également. C’est vraiment un jeu d’enfant que d’utiliser Cufon ! Principal reproche que j’y ferais est l’impossibilité de sélectionner le texte. Ca peut être génant dans certains cas, comme si vous souhaitez l’utiliser pour du texte. Mais si ce n’est que pour des titres, ça peut être très utile.

Installation de Cufon

Tout d’abord, vous allez devoir récupérer le script Cufon. Pour cela, allez sur ce site, et téléchargez le script en faisant un clic droit sur l’onglet “Download”.

Ensuite, vous allez devoir générer la police que vous souhaitez utiliser en Javascript. Pour cela, toujours sur le même site, vous allez uploader votre police, valider le fait que vous avez les droits pour utiliser la police ( The EULAs of these fonts allow Web Embedding ) et enfin accepter les termes de l’utilisation du générateur de police ( I acknowledge and accept these terms ). Vous avez également la possibilité d’utiliser différentes options, mais pour une utilisation simple, vous n’aurez pas besoin d’autre chose.

Une fois, que vous avez coché les bonnes cases aux bons endroits, cliquez sur “let’s do it”. Vous allez générer votre police en javascript. Elle sera téléchargée sur votre ordinateur.

Vous allez ensuite uploader Cufon et la police sur le serveur FTP de votre blog. Pour cela vous allez créer un dossier “js” à la racine de votre thème.

Ensuite, vous allez ouvrir votre fichier “header.php” et y saisir les informations qui permettront d’utiliser le script et la police sur votre blog. Ces informations sont les suivantes:

1
2
3
4
5

<script src="<?php bloginfo('template_url'); ?>/js/cufon-yui.js" type="text/javascript"></script>
  <script src="<?php bloginfo('template_url'); ?>/js/GeosansLight_500.font.js" type="text/javascript"></script>
  <script type="text/javascript">
            Cufon.replace('h3');
        </script>

Collez ces informations dans l’entête de votre site, donc dans la balise “head”. Ici, on donne l’URL du script ainsi que celle de la police. Et ensuite, nous souhaitons remplacer la police actuelle sur les titres “h3″ par la police téléchargée ici. D’où la dernière ligne “Cufon.replace”.

Voilà ! C’est tout ce qu’il y a à faire ! Si vous avez déjà tenté d’utiliser sIFR, ça doit vous paraître incroyablement simple !! Une fois le script installé, il ne vous reste plus qu’à utiliser le style prévu pour la balise h3, dans votre feuille de style.

Quelques soucis avec Internet Explorer ?

Comme d’habitude, Internet Explorer vient semer la zizanie !! Dans certains cas, il y aura un temps assez long pour générer le texte. Pour remédier à tout ça, vous n’avez qu’à insérer la ligne de code suivante juste avant la fermeture de la balise “body”, dans le fichier index.php:

1

<script type="text/javascript"> Cufon.now(); </script>

Utiliser plusieurs polices sur le même blog

Pour utiliser plusieurs polices, il suffit de faire la même démarche que précédemment, en uploadant les polices générées, et en utilisant les “Cufon.replace” en leur associant les polices voulues. L’exemple utilisé sur le site de Cufon donne ceci:

1
2
3
4
5
6
7

<script src="<?php bloginfo('template_url'); ?>/js/cufon-yui.js" type="text/javascript"></script>
        <script src=""<?php bloginfo('template_url'); ?>/jsFrutiger_LT_Std_400.font.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/Myriad_Pro_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
            Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
        </script>

Pas très compliqué, non ?

Si votre anglais vous le permet, je vous conseille fortement ce screencast de Nettuts.com:

En tout cas, selon moi, Cufon peut être une sérieuse alternative pour utiliser d’autre polices sur le web. Quoi qu’il en soit, cette solution a ses limites et tout comme pour les autres solutions que sont sIFR ou encore @font-face, n’oubliez de vérifier à l’avance que vous avez les droits pour utiliser la police que vous voulez ! On se sait jamais !!

Si vous avez des questions, n’hésitez surtout pas à laisser un commentaire !

Kezako le FOWD ?

Le FOWD est donc une grande conférence où interviennent les plus grands web designers ou développeurs du monde anglosaxon. Et quand on sait que ce sont pour la plupart les plus influents et ceux qui font la pluie et le beau temps sur le webdesign, il y a de quoi se réjouir. Le concept se déroule sur deux journées, la première consiste en une journée classique de conférence, avec toute une série d’intervenants et la deuxième en des workshops, donc en groupe réduit ( 10/20 personnes ) qui assistent à une sorte de cours particulier sur un sujet particulier.

Première journée: les conférences

Je ne vais pas passer en revue toutes les présentations de la première journée mais plutôt vous raconter un peu ce qui m’a le plus marqué. Et à ce niveau-là, il y a plusieurs choses.

Tout d’abord, j’ai appris pas mal de choses sur le mobile webdesign, grâce à Meagan Fisher de Simplebits ( voyez déjà la référence… ). L’iPhone semble avoir été un véritable moteur pour amener les designers à développer pour les mobiles. Quoi qu’il en soit, il y a encore beaucoup à faire et encore trop peu de sites proposent une vraie version “mobile” de leur site.

Ensuite, on a parlé accessibilité, et là, j’ai pris une grosse claque. L’intervenant, non voyant, ou aveugle, comme vous voudrez, nous a montré les limites de l’accessibilité. Il est passé par une dizaine d’exemples différents, notamment avec Gmail, YouTube et j’en passe. Il utilise un synthétiseur vocal pour pouvoir parcourir les pages web et il faut bien avouer que même les plus grands sites web ne sont pas au top de ce côté-là…

Ensuite, la claque a continué avec Mike Kus, un virtuose du graphisme, qui bosse pour Carsonified, la boîte qui organise le FOWD. Lui, son combat, c’est faire en sorte que les webdesigners s’éloignent quelque peu de la sphère développement pour s’approcher un peu plus du “print”. Et tout ça pour faire passer le message que si chaque webdesigner pensait son site comme pour le print, alors les sites web seraient plus sympas !! ^^ Je caricature quelque peu mais je crois qu’au fond de lui c’est le véritable message qu’il veut faire passer… Voyez un peu les slides qu’il nous a pondu…

Et encore, à la fin de sa présentation, il nous a montré une vidéo de 3 minutes montrant la production de ses slides sur Photoshop, de quoi en faire palir plus d’un !! Matez donc ça:

Ensuite, après une pause, on a eu le droit à un speech de Mr Mark Boulton. Je dis Monsieur, parce que pour moi c’est un très grand et très bon. Il a une vision du métier que je trouve très pertinente, basée autour du graphisme. Sa présentation tournait autour de la typographie et du fait que pendant trop longtemps, on l’a ignoré au profit des images par exemple. Selon lui, aujourd’hui les choses changent et pas mal de designers semblent prendre la typographie comme un élément central d’un site web. Il en a profité pour prendre différents exemples de polices en expliquant celles qui sont adaptées au web et celles qui ne le sont pas. Par exemple, saviez-vous que Times New Roman était une police crées au départ pour être imprimées sur du papier de mauvaise qualité ou l’encre aurait tendance à s’étaler ? C’est pour ça que les “jambes” des lettres sont très fines et que donc elle n’est pas adaptée au web…

Ensuite, tout au long de la journée, on a alterné entre bonnes et moins bonnes présentations… jusqu’à celle de Molly Holschlag, la grande prêtresse des standards web ! Elle repris en quelques slides où en était les pratiques en termes de technologies ( CSS 2.1, CSS3, Javascript, etc… ) pour nous emmener sur les chemins à venir des standards du web. Même si je n’y ai pas appris grand chose, Molly a l’air tellement passionné par ce qu’elle fait, qu’on est vraiment à son écoute et qu’au final on est convaincu par son discours. Nul doute qu’au niveau des standards, les choses évoluent dans le bon sens. Elle a fait un petit apparté sur les navigateurs en tapant une nouvelle fois sur Internet Explorer 6, tout en soulignant que la solution n’était pas de ne plus le prendre en compte, et que pendant encore quelques années, il faudrait faire avec…

La journée s’est terminée dans un bar “disco” de Picadilly Circus où, Bastien Labelle et moi avons pu faire la connaissance de notre père à tous !! ^^

Deuxième journée: les workshops

Cette journée est articulée en deux demi journées, avec donc, 2 workshops, un le matin et un l’après midi. Une dizaine de ces workshops vous sont proposés au moment de l’inscription et en ce qui me concerne, j’ai choisi celui sur ExpressionEngine et celui sur la création d’un portfolio par Elliot Jay Stocks.

Building Beautiful Websites with ExpressionEngine, par Jamie Pittock

Voici la fiche descriptive du workshop sur ExpressionEngine:

Workshop FOWD sur ExpressionEngine

Pour ceux qui ne connaissent pas ExpressionEngine, sachez que c’est un des CMS les plus en vue en ce moment. Très peu connu en France, allez savoir pourquoi… Il connaît un grand succès en Grande Bretagne mais aussi aux US et dans quelques pays européens pour qui l’anglais n’est pas un obstacle !! , du style Pays-Bas, Belgique ou encore Allemagne…

Je voulais assister à ce workshop car je m’intéresse beaucoup à EE et pour l’avoir utilisé quelques temps, je voulais en savoir un peu plus sur comment créer un thème. Ca me permettait de faire la comparaison avec WordPress. Malheureusement, le niveau était trop élevé pour moi. Le gars qui faisait le workshop est vite tombé dans la facilité et devant l’expertise de certaines personnes, a préféré faire un workshop pour que ce soit intéressant pour eux… Du coup, j’ai été vite largué.

Quoi qu’il en soit, j’ai appris pas mal de choses !! Et notamment le fait que l’architecture de EE permet de créer des thèmes beaucoup plus flexibles que sur WordPress. Ca peut paraître bizarre quand on sait que WP est super flexible. Mais là, l’utilisation des modules permet vraiment de faire ce qu’on veut, et comme on veut. Le seul souci je trouve, c’est qu’il faut quand même toucher en PHP, ce qui n’est pas mon cas, pour le moment !! Autre inconvénient, c’est que c’est largement moins intuitif pour l’utilisateur “Lambda”. De ce côté-là, WordPress bat tout le monde…

Effective ways to raise your profile in the web design industry, par Elliot Jay Stocks

Workshop FOWD par Elliot Jay Stocks

Autant vous dire tout de suite, je suis un grand fan d’Elliot Jay Stocks. Je suis d’ailleurs en train de lire son livre qui est vraiment très bien fait !! J’aurai d’ailleurs l’occasion de faire un article dessus…

ce qui me plaît dans ces workshops, c’est la possibilité de rencontrer des gars qu’on suit sur le web et de les avoir comme “profs” pendant quelques heures. On est environ 20 par workshop, donc on a vraiment l’occasion de discuter, ce que je ne me suis pas gêné de faire !! Elliot est une personne très accessible.

Pendant ce workshop, on a fait un peu le tour de ce qui se fait de mieux en matière de portfolio sur Internet. On a noté les avantages et les inconvénients de chacuns et Elliot nous a permis de bien cerné ce qu’il faut faire pour bien mettre en avant son expertise et ses références. Ca a été très intéressant pour moi parce que je suis en train de penser au redesign de fran6art qui va accueillir mon portfolio. Et oui, pas mal de choses vont changer !! Donc, j’avais vraiment très envie de sortir de là avec plein d’idées en tête, ce qui a été le cas.

On a aussi parlé “branding” et j’ai été agréablement surpris de voir que ce que prône Elliot en matière de communication est ce que je fais depuis l’année dernière, et ressemble à s’y méprendre au “job” de blogueur: écrire des articles, commenter sur les autres blogs, se faire connaître avec des articles qui vont attirer du monde, etc… Et puis, il est allé plus loin en disant que le branding passe aussi par des publications, ce qui est aussi mon cas avec le livre sur WordPress, le DVD de formation et très prochainement, des articles dans la presse spécialisée.

Elliot a aussi parlé référencement, et j’y ai appris une chose très intéressante: SEO IS BULLSHIT !! . En gros, le référencement, c’est de la daube !! Il a expliqué que les meilleurs clients sont ceux qui viennent parce qu’ils veulent travailler avec vous et non pas parce qu’ils vous ont trouvé via Google. C’est un fait que j’ai déjà remarqué sur plusieurs articles. Les meilleurs clients sont ceux qui viennent vers vous parce qu’ils veulent bosser avec vous. Et c’est très important quand on bosse en freelance d’avoir des clients sympas !! Cela ne veut pas dire que tous ceux qui veulent bosser avec vous sont sympas, mais qu’au moins, il y a plus de chances qu’ils le soient plus que ceux qui vous trouvent via Google et qui auront contacté en tout une 20aine de webdesigners… A méditer…

Donc, un très bon workshop, qui m’a permis surtout de voir comment mieux me positionner, quel avenir donner à fran6art et surtout comment en tirer profit.

Conclusion

FOWD - Auteur: Christiaan Arthur Hemerik (flickR)

Pour moi FOWD était une révélation. Je n’y étais jamais allé et j’ai été épaté par tous ces talents. Je me sens très proche de ce qui se fait outre-manche et donc j’en ai pris plein les yeux. Ca m’a permis aussi connaissance avec pas mal de monde et notamment quelques irréductibles gaulois, tels que Bastien ou encore Jean-Baptiste, qui sont vraiment très sympas, et avec lesquels on a peu avoir de très bonnes discussions, comme par exemple, l’absence des professionnels français à ce genre d’événements…

Bref, tous les ans, vous êtes sûrs de me retrouver à Londres pour le FOWD !!

En fin de semaine dernière, je cherchais une solution originale pour afficher les archives sur le site d’un client. Ca m’a permis d’en découvrir certains très originaux comme Snazzy Archives, mais le client a fini par choisir Extended Live Archives. Ce plugin permet d’afficher la chronologie des articles de manière originale mais permet aussi d’afficher ces mêmes archives par catégorie.

Extended Live Archives

Cependant, le souci avec ce plugin, comme souvent d’ailleurs, c’est qu’il n’est pas maintenu… Du coup, il n’a pas passé le cap de la version 2.5 de WordPress…

Après pas mal de recherches, je suis tombé sur différents articles qui résolvent les soucis de cette extension. A noter également que le site de l’auteur d’ELA n’explique pas non plus comment installer le plugin pour qu’il fonctionne correctement…

Vous trouverez donc ci-après différents liens vers des articles qui vous permettront de savoir comment modifier l’extension pour qu’elle fonctionne mais aussi comment l’installer et l’utiliser correctement:

• Vous trouverez ici, en bas de l’article, une version modifiée du plugin avec tous les bons patchs pour qu’il fonctionne sous WordPress 2.7.
• Ensuite, vous pouvez aller voir le très bon article de Lomig qui vous explique en français comment installer l’extension, ce qui pourra vous être très utile !

Voilà ! Je me suis dit que ça pourrait être utile à certains d’entre vous !

L’été dernier, je vous avais parlé de mettre en place une nouvelle rubrique qui s’intitulerait “Veille créative” où je partagerais avec vous mes découvertes via les flux RSS que je suis.

J’ai fait quelques tentatives sur le blog, mais j’ai rapidement trouvé que le format du blog ne se prêtait pas à ce type de brèves. J’ai donc laissé l’idée de côté pendant un bon moment et je l’ai reprise il y a quelques jours sur Twitter, et finalement je trouve que le format 140 caractères, micro-blogging est parfait pour ce genre de news. Du coup, plutôt que d’inonder vos boîtes mail ou lecteurs de flux RSS de notes courtes sur le flux de Fran6art, j’ai décidé que cette “veille créative” se ferait désormais sur Twitter.

Et si vous n’avez pas encore de compte Twitter, n’hésitez pas à en créer un, vous verrez que vous deviendrez rapidement accroc comme moi !

Update: plutôt que d’écrire un nouvel article sur le croquis, je préfère réactualiser celui que j’avais déjà écrit il y a pas mal de temps mais qui est toujours d’actualité. Qui plus est, je ne suis pas sur que beaucoup d’entre vous l’aient lu donc le voici mis à jour et republié à la date d’aujourd’hui avec les commentaires d’origine que je vous invite à venir compléter !

Nous allons donc commencer une nouvelle série de tutoriels pour apprendre à créer soi-même le design de son blog. Ces tutos vont être sensiblement différents de ceux que l’on a pu faire jusqu’à présent parce qu’ici, on va faire appel surtout à la créativité et à un brin de marketing. Donc, pendant plusieurs articles, on ne parlera que très peu technique, et quelque part, je dirais tant mieux, parce que le côté créatif de la chose est certes beaucoup plus subjectif, mais c’est aussi de là que vient tout l’inspiration et c’est à partir de ça que l’on créera un design qui nous ressemble.

Alors, bien sûr, on va suivre une trame que j’aurai défini. Cette trame est calquée sur ma manière de travailler et de voir les choses. Je viens d’un univers artistique et créatif. Je vous montrerai donc comment je perçois la créativité. Ca peut être vraiment différent d’une personne à une autre, et d’une compétence à une autre. Un designer pense souvent très différemment que le développeur. Et ce, parce que nous avons appris les choses également de manière différente. Donc, ce que j’exposerai ici n’est pas forcément à suivre à la lettre. A vous de trouver le terrain qui vous convient le mieux. Je ne dis pas que ce que j’expose ici est la meilleure méthode qui soit. Elle est juste celle qui, pour moi, permet le mieux à la créativité de s’exprimer. Et certaines étapes, comme celle du croquis, font parties de ce processus.

Commencer le design de son site web sur son ordinateur, c’est comme construire une maison en commençant par le toit !

Ce n’est pas moi qui le dit, mais le célèbre designer Jason Santa Maria. Ne touchez pas encore à Photoshop. C’est trop tôt. Photoshop est un formidable outil qui va vous aider à mettre en pratique vos idées, et vous permettre de les perfectionner, mais commencer directement va tout de suite vous mettre sous la contrainte. C’est pour ça qu’il est toujours mieux de commencer avec un morceau de papier et un crayon. Et comme l’a dit un jour un autre designer, Jeff Croft, “tools do not a designer make“. Je vous conseille d’ailleurs de lire son article. Je ne suis pas entièrement d’accord avec ce qu’il dit mais certaines vérités sont criantes !

Alors, comment va-t-on procéder ? Et bien, ce n’est pas très difficile. Réfléchissez déjà à ce que vous voulez faire. Voici quelques questions à se poser:

• Je veux un blog pour faire quoi exactement ? Blog perso ? web 2.0 ? Politique peut-être ? Bien savoir ce que vous voulez faire va vous aider à savoir quel type de blog vous allez faire.
• Ai-je besoin d’un blog 1 colonne ? 2 colonnes ? 3 colonnes ?
• Placement de la ou des sidebars à gauche ? à droite ? de chaque côté ? 2 à droite ?
• Largeur du contenu ? Large ? Etroit ? Idem pour la ou les sidebar.
• Et mon header ? Haut ? Visible ? Lumineux ? Fin ? Idem pour le footer
• Une barre de navigation ? Je la place où ? Et la fonction “recherche” ? Est-ce que j’en ai besoin ? En haut ? A gauche ? A droite ?

J’ai lu il y a quelques jours un excellent article qui parlait de l’orientation de la lecture d’un site web. Par exemple, et pour vous donner une “référence” artistique, une peinture se “lit” d’en bas à gauche, vers le haut à droite. Donc, en gros, si vous voulez impressionner ceux qui regardent vos peintures, créez un visuel de couleurs qui va aller graduellement d’une couleur à une autre, en suivant cette ligne.

Pour ce qui est des blogs, c’est plus simple et plus logique, puisqu’on suit le sens de l’écriture. Donc, on va lire d’en haut à gauche, vers le bas à droite. Donc l’information doit se “diluer” progressivement vers le bas et vers la droite.

C’est pour ça que l’on trouve le titre et la description du blog en haut à gauche. Ensuite, en descendant, on trouve le contenu et ainsi de suite. L’auteur donc de cet article propose une façon simple d’aborder cette organisation:

Identité du site > Sections > Header de la page > Contenu > liens

En ce qui concerne nos blogs, je dirais plutôt quelque chose de ce genre-là:

Identité du blog > Navigation (Sections) > Header > Contenu > Sidebar (Liens) > Footer

Donc, maintenant qu’on voit globalement comment devraient s’organiser notre blog, et si on commençait un peu à dessiner ?

Un papier, un crayon et une gomme, y a rien de mieux !

Finalement, la créativité ne tient à pas grand chose non ? Il va juste falloir réussir à faire les premières lignes. Les autres suivront sans aucun problème. Laissez votre inspiration vous guider. Ca n’a pas besoin d’être parfait, ce n’est qu’un croquis, qu’une première idée.

Ici, on est très loin de la technique et bon nombre de personne ont tendance à zapper ce côté “ludique” et créatif pour attaquer directement la maquette sur Photoshop. C’est pour moi une erreur. L’étape du croquis est libre de toute contrainte technique. Elle doit être prise comme une sorte de brainstorming. C’est le moment où l’on couche les premières ideés.

Pour commencer, vous allez dessiner une esquisse de la page d’accueil. Bien entendu, si vous n’y faîtes pas apparaître grand chose d’original, ce croquis n’aura pas grand intérêt. Essayez donc justement d’être un peu plus créatif sur certaines parties du blog comme l’entête, le fameux “header”. Pourquoi ne pas y prévoir une image ? Et vous allez placer votre barre de navigation à quel endroit ? Au dessus du titre du blog ? entre le titre et le contenu ? Vous verrez rapidement qu’un croquis n’est pas uniquement là pour faire un schéma d’ensemble du design de votre blog mais aussi et peut-être surtout pour en dessiner certains aspects. Donc, laissez vous aller à un peu de créativité !

Si vous arrivez à un truc comme ça, vous n’allez pas en tirer grand chose… :

L’inspiration est partout. Pensez à toujours avoir un carnet et un crayon avec vous, ça peut servir!

Là, je prêche un peu ma paroisse mais je vous jure que vous pouvez avoir des idées à n’importe quel moment, en voyant n’importe quoi, n’importe où. Donc, un stylo et un papier vous sera toujours utile. On peut avoir une idée à n’importe quel moment. Alors, “couchez-là” avant qu’elle ne disparaisse. L’inspiration peut donc être à chaque coin de rue…. mais aussi et surtout sur le web !

Passez un maximum de temps à gauche et à droite pour découvrir de nouveaux sites web. Pas forcément besoin que ce soient des blogs. N’importe quel design de site web peut vous inspirer. Et là encore, le carnet vous aidera, ainsi que Delicious !! Je vous donne donc quelques sites de référence qui ont justement pour but de référencer les plus belles réalisations sur le web:

• We Love WP, galerie de blogs sous Wordpress et aux designs uniques,
• Logopond, si vous souhaitez créer un logo,
• Most inspired, qui regroupe les meilleures galeries de design web,
• Unmatched style, autre site proposant les plus beaux designs de sites web,
• CSSleak, le petit français de la bande !

Déjà, avec ça et votre inspiration personnelle, vous devriez pouvoir vous amuser pour un petit moment…

Alors, bien sûr, vous allez me dire que tous ces designs sont superbes, mais que vos compétences en Photoshop ne vous permettront pas d’arriver à un tel résultat ! C’est pour ça que je vous ai dit plus haut de ne pas commencer en travaillant directement avec Photoshop. Si vous ne maîtrisez pas bien l’outil, vous allez freiner votre créativité. Ici, on cherche des idées, originales si possible. Restez ouvert à tout et laissez votre imagination s’exprimer, sans contraintes techniques.

Donc allez-y, griffonnez, surfez, explorez ! Exprimez-vous !

Il existe également des applications ou de sites web qui vous permettent de prendre des instantanés ( “screenshots” ) de pages web et de les garder dans un coin pour vous aider à trouver l’inspiration le jour où vous allez vouloir dessiner un site web. Comme site, il y a le très connu Scrnshots.com où vous pourrez stocker tous vos screenshots. En applications, il y a le très bon LittleSnapper sur Mac OSX qui vous permet aussi de partager vos découvertes via FlickR ou leur site propre, QuickSnapper.

Screenshot de mon LittleSnapper avec de jolis sites !

Enfin, je vous conseille ces deux articles en anglais qui vous donneront quelques exemples de croquis mais qui aussi vous apprendront à mieux tirer profit de ce temps passé à griffonner:

• Improving the transition from paper to Photoshop  par Creative briefing,
• The Paper Version of the Web, par Deeplinking.

Donc, cherchez l’inspiration partout où elle se trouve. Pour le moment, ne vous limitez pas techniquement, que ce soit par rapport à vos compétences en Photoshop ou en WordPress. Laissez votre créativité s’exprimer et trouvez une manière originale d’afficher votre header, votre footer, les titres de vos articles, ou encore vos commentaires !

Dans le prochain tutoriel, je vous montrerai des exemples précis de croquis que j’ai fait pour différents sites mais aussi pour le thème que l’on va réaliser ensemble ici ! Rendez-vous donc au prochain numéro et d’ici là, n’hésitez pas à poser vos questions, et à montrer vos croquis !

Ca fait plusieurs fois que des lecteurs me font part d’un problème lié à l’utilisation des “query_posts” de WordPress et du plugin de pagination WP_pagenavi. En effet, lorsque les deux sont utilisés sur la même page, lorsque l’on clique sur le 2 de la navigation, l’URL se transforme bien en la page 2, mais les articles sont toujours les mêmes, ceux de la page 1…

Le souci provient donc de l’utilisation des “query_posts” de WordPress qu’il convient de remplacer par un code quelque peu différent mais qui fera fonctionner le plugin comme il faut ! Ce code a été “rédigé” par l’auteur du plugin, Lesterchan. Admettons que je veuille afficher 4 articles mais que je souhaite cacher ceux de la catégorie 9. Normalement, avec les “query_posts”. je vais afficher ceci:

1
2
3

<?php
      query_posts("showposts=4&cat=-9");
?>

Mais dans ce cas-là, la pagination, comme nous l’avons montré plus haut, ne fonctionnera pas. Pour que tout soit parfait, il faudra utiliser le code suivant:

1
2
3
4
5
6

<?php
$paged = intval(get_query_var('paged'));
if($paged == 0) {
$paged = 1;
}
query_posts("showposts=4&cat=-9&paged=$paged"); ?>

Vous remarquerez que la “query_posts” est toujours présente et vous permettra d’attribuer les mêmes paramètres que l’utilisation que vous en faisiez auparavant. Ici, j’ai pris comme exemple la page d’accueil de Blogalwarming qui affiche certains articles avec ce système de pagination.

C’est vraiment tout bête comme “tip” mais je vous conseille de le bookmarker parce qu’il est fort possible que vous en ayez un jour besoin et que vous ne vous vous souveniez plus d’où vous aviez entendu parler de ce hack !!

Je viens de vérifier, j’ai commencé ma longue série de tutoriels sur la création de thème pour WordPress, il y a bientôt 2 ans… Ca fait une éternité dans le monde du web je trouve !! Quoi qu’il en soit et après de nombreux rebondissements dans ma vie, j’ai enfin trouvé le temps de me consacrer à une nouvelle série de tutoriels dans lesquels, on va apprendre à faire le design d’un site web et de le transformer en thème WordPress.

Le rythme sera environ le même que pour la première série, à savoir un tutoriel par semaine, voire plus, voire moins, et l’ensemble va s’axer autour du plan suivant:

1. Tout d’abord, nous allons penser le thème, tenter d’en concevoir une première version sur le papier, à travers un croquis. J’en ai déjà parlé dans la première série de tutoriels, mais il sera bon de reprendre l’ensemble dans le cadre du thème que l’on va réaliser.
2. Ensuite, on va passer sur Photoshop et on va découvrir ensemble comment créer une première maquette de notre site, comment travailler avec les couleurs, comment bien les choisir, etc. Cette étape aboutira par une maquette complète du thème que l’on découpera pour la préparer à la mise en page web.
3. Puis, nous transformerons cette belle maquette en une version HTML et CSS. On ne parlera pas encore de thème, mais d’une représentation simple en HTML de ce que le thème sera.
4. Enfin, nous construirons le thème autour de cette structure HTML et nous lui injecterons tout le PHP nécessaire.

D’un point de vue organisation des tutoriels, j’aurais tendance à dire que ce qui a été déjà fait devrait s’intégrer entre l’étape 3 et 4. C’est-à-dire qu’on n’en a pas forcément besoin au départ, mais qu’il faudra comprendre aisément la structure d’un thème WordPress pour intégrer ensuite tous les éléments nécessaires à notre thème. Donc, au final, l’ensemble des tutoriels reprendra tout ce qu’il faut savoir ou presque pour créer son thème WordPress, dans une organisation somme toute assez logique.

L’objectif de départ était de créer une structure de thème pour ensuite, venir lui greffer différents éléments qui pourraient en faire un thème. C’est ce que j’ai fait pour mon livre sur WordPress, mais que je préfère éviter ici, pour reprendre une structure classique et largement plus abordable. Bien sûr cette organisation n’est pas parfaite, mais je pense que c’est celle qui sera la plus accessible au plus grand nombre.

Donc, j’espère que vous êtes prêts pour cette nouvelle étape dans la vie du blog. Depuis le temps que certains d’entre vous attendent, je me doute bien que vous devez être prêts et que vous n’avez sûrement pas attendu tout ce temps sans apprendre de votre côté !! Mais quoi qu’il en soit, j’espère sincèrement que cette nouvelle série de tutoriels vous apportera autant que ce qui a été fait il y a 2 ans et qui a beaucoup apporté à la notoriété de ce blog.

Encore merci pour votre patience et fidélité et je vous donne rendez-vous la semaine prochaine pour le premier tutoriel !!

C’est mon petit sondage du jour. Comme vous le savez probablement, les commentaires hiérarchisés ont été lancés sur WordPress avec la toute dernière version 2.7. Ca consiste à pouvoir répondre directement à un commentaire, ce qui, sur le papier pourrait être intéressant.

Commentaires hiérarchisés sous WordPress

Mais j’y trouve de nombreux inconvénients que j’ai pu expérimenter chez différents blogueurs, qui utilisent ce système:

1. Tout d’abord, il vous faut fixer un nombre de réponses limitées. Et oui, les réponses directes aux commentaires vont être décalées sur la droite et la fenêtre de réponse va donc être plus petite. La moyenne est de 3 niveaux de réponses directes. Ce qui veut dire que si vous voulez répondre à un commentaire qui est déjà au niveau 3, vous ne pourrez pas y répondre directement, mais vous devrez répondre tout en bas, à la suite des autres commentaires… Du coup, pour suivre la conversation, pas évident…
2. Justement, cette conversation, je trouve qu’elle est biaisée parce que du coup, on perd le côté chronologique. On a un commentaire le lundi matin auquel quelqu’un répond le mercredi et en dessous on retrouve les autres commentaires du lundi par exemple. Je trouve que ça fait sérieusement fouilli…
3. Je ne suis pas convaincu par la pagination des commentaires. On a pas mal parlé des problèmes de “duplicate content” que ça pouvait entraîner. Ca fait les pages moins longues, certes, mais bon, selon moi, ça ne change pas grand chose au smilblick…

Donc, pour moi, c’est pas une grande victoire que ce truc et j’avoue que j’ai de plus en plus tendance à ne plus lire les commentaires sur certains blogs qui utilisent ce système, tout simplement parce que je trouve que ça devient rapidement difficile à lire. Pour ça, une bonne vieille liste chronologique avec des @ pour répondre directement à quelqu’un, il n’y a que ça de vrai !!

Mais vous, vous en pensez quoi de ce système ? Vous êtes pour ? contre ? Ne se prononce pas ? C’est l’objet de ce sondage et n’hésitez pas à en débattre en laissant un petit commentaire !

Ca fait maintenant un petit moment que je travaille “dans les CMS” et comme vous le savez, plus particulièrement sur WordPress. Et il y a une chose qui revient constamment au niveau de mes projets, c’est le fait que les clients pensent souvent que d’utiliser un CMS va considérablement leur simplifier la vie. D’un côté ce n’est pas faux, mais partant de ce principe, ils se sentent parfois pousser des ailes et demandent des choses qu’ils n’auraient pas demandé d’ordinaire, tout simplement parce qu’ils pensent que WordPress va le faire, et qui plus est facilement, voire automatiquement.

Alors, à chaque fois, je dois faire un bref résumé de ce qu’est un CMS et montrer que s’ils vont pouvoir gérer facilement le contenu, il en est différemment de la structure. “Oui mais avec les widgets, on peut tout faire !”, qu’on me dit… Et là, faut pas trop me chauffer avec les widgets !!

Un CMS, comme son nom l’indique est un outil qui permet de gérer au mieux le contenu d’un site web, d’où “Content Management System”. Ce qui veut dire que le client pourra modifier comme il le souhaite le contenu de son site, ça n’entraînera pas de modifications de la structure et du design. Mais parfois, le client veut pouvoir également faire évoluer le design. Chose qu’il n’aurait jamais penser faire avec un site en HTML. Et là, forcément, il arrive qu’il casse tout. “Pourtant ça semblait tellement simple…”. Et c’est là que l’erreur est commise. Penser que prendre un CMS tel que WordPress par exemple, va vous permettre de tout contrôler. Encore là, si vous maîtriser les CSS et le PHP, pas de soucis, mais c’est le cas aussi pour les sites statiques. Mais vous ne pourrez pas tout contrôler et modifier si vous n’êtes qu’un simple utilisateur.

Alors, il faut se battre avec les cahiers des charges et essayer de comprendre ce que veut le client pour arriver à lui proposer une solution simple et qu’il pourra modifier lui-même sans toucher au code. Et c’est parfois difficile de l’amener sur cette voie. J’ai même eu un client, qui se reconnaîtra peut-être s’il lit le blog, qui a fait marche arrière à la fin du projet en ce rendant compte que ce qu’il voulait serait trop compliqué à gérer.

Tout ça pour dire qu’utiliser WordPress, c’est fantastique. Ca permet de prendre en main un site et d’y coller le contenu que l’on veut ( n’oublions pas que c’est le coeur même d’un blog… ). Mais il faut également savoir que faire évoluer le design sera identique à un autre type de site. Qu’il faudra intervenir au niveau du code et que ça, un CMS ne le permet pas quand on est simple utilisateur. Que plus vous créerez un site compliqué et plus il vous demandera de la gestion et de la maintenance au quotidien. C’est valable pour les entreprises mais aussi pour nous blogueurs. Adoptez un thème magazine et vous verrez que vous passerez deux fois plus de temps à gérer votre blog !!

Donc, non, adopter WordPress ce n’est pas du tout automatique. Ca simplifie largement la vie, ça permet de transformer un site statique en une véritable arme de communication. Mais ce n’est pas parce que vous aurez cet outil en main que vous pourrez tout faire et surtout tout faire tout seul !

Ca faisait longtemps que je n’avais pas vu autant de thèmes réussi que ces 10 derniers jours. Entre Compositio, Irresistible et maintenant Magazeen, j’avoue qu’il y a de quoi en satisfaire plus d’un ! Et au-delà de la simple utilisation de ces thèmes, il y a la possibilité de les utiliser et de les détourner pour créer un thème qui vous sera propre.

Composition WordPress Theme sur whydotpharma.com

Je n’ai pas pu résister et j’ai installé Composition sur le blog de ma femme, whydotpharma.com, tout en lui apportant un logo spécifique. Je trouve que ce thème colle parfaitement avec la thématique du blog. Côté code, rien de particulier à dire, il est bien développer si ce n’est que j’ai dû rajouter une ligne de code pour pouvoir utiliser Subscribe To Comments.

Irresistible sur franc.is

Ensuite, j’ai installé Irresistible sur mon blog perso, franc.is. J’ai en tête depuis un moment de créer un thème avec un fond plutôt “grungy” et de jouer sur l’opacité pour mettre en lumière les textes. Je n’ai pas encore eu le temps de m’y atteler mais en attendant, je me suis dit qu’Irresistible pourrait faire l’affaire. Je l’ai donc installé et j’ai commencé à le personnaliser en lui donner un nouveau logo, en traduisant certains aspects de certains titres, et en commençant la traduction en profondeur. Je n’ai pas encore terminé mais l’ensemble tient la route.

Là, j’ai rencontré plus de soucis, comme notamment la gestion des vidéos dans la sidebar ou encore le fait que le thème ne fonctionnait pas correctement sous IE7. Le thème a d’ailleurs été depuis mis à jour chez WooThemes. Une bonne idée de leur part serait d’ailleurs de faire des mises à jour de leurs thèmes, mêmes gratuits pour que les personnes qui les utilisent puissent avoir les dernières versions avec certains bugs en moins. C’est ce que fait notamment Thesis et je trouve l’idée super, sauf si vous customisez un peu trop votre thème, auquel cas, vous aurez du mal à le mettre à jour !!

Magazeen WordPress Theme

Enfin, aujourd’hui, WeFunction, via Smashing Magazine, nous sort un thème magazine pour compléter la panoplie ! Et toujours gratuit qui plus est ! Je trouve ce thème visuellement très réussi et devrait plaire à ceux qui ont ou qui veulent lancer un blog sur les news du design ou webdesign. Je ne l’ai pas encore testé et j’avoue que je n’ai pas de projet perso demandant l’utilisation d’un thème magazine. Donc, si de votre côté, vous l’utilisez, n’hésitez pas à nous faire un premier retour !! Semblerait déjà qu’il y ait des soucis sous IE7 avec certains scripts. A vérifier…

En tout cas, tout ça nous montre bien que l’on peut toujours faire des thèmes de qualité et surtout gratuits. Je ne suis pas contre les thèmes payants, mais je comprends que certains n’aient pas forcément les moyens de mettre de l’argent dans ces thèmes. Avec ces 3 thèmes sortis sur une semaine, on a la démonstration que l’on trouve encore des thèmes gratuits de grande qualité. Et Smashing Magazine en est un formidable metteur en scène pour proposer régulièrement des thèmes comme ceux-là !

Donc, toutes mes excuses pour ne pas faire le déplacement. Pour ceux qui y vont, passez un excellent moment et saluez bien Matt Mullenweg de ma part…