WordPress Francophone

Un atelier pratique, ou workshop, a lieu le Jeudi 27 novembre prochain à Paris ! Vous trouverez le contenu de cet atelier en fin d’article.

Pour vous inscrire, c’est simple, ça se passe sur le site des designers interactifs. Pour ma part, je serai présent en tant que simple spectateur, voir plus si j’entends des choses erronées

Dernière précision, c’est gratuit ! Alors n’hésitez pas

Nicolas Gans (Regart.Net) et Guillaume Brachon (secrétaire général de *designers interactifs*) animeront un workshop le jeudi 27 novembre prochain sur le système de gestion de contenu Wordpress. Intitulé “Personnaliser un thème sous Wordpress”, ce partage d’expérience permettra aux professionnels qui souhaitent développer un site ou un blog de comprendre les fondamentaux pour la gestion d’un thème. Nicolas et Guillaume montreront les coulisses techniques de la refonte de 2 sites développés sous WordPress : designersinteractifs.org et flashxpress.net.

Le workshop s’articulera en 2 parties :

1. Présentation des 2 approches de développement (acheter d’un template VS partir de zéro) ; description du contexte et justification des choix techniques ; présentation des grandes phases de conception et de développement.
2. Focus sur des points de développement précis ; séance de questions/réponses

Actu plus très fraiche…

L’équipe de WordPress a sélectionnée les icônes utilisées dans WordPress 2.7, pour cela le jury de l’équipe a suivi en partie le résultat des votes et a débattu en interne à ce sujet.

Les 2 gagnants sont les jeux d’icônes BD et VS, en voici un aperçu

Ces icônes remplaceront :

Dès la sortie de WordPress 2.7, je mettrais à disposition une extension pour remplacer facilement les icônes de l’interface d’administration.

Il comportera problablement les jeux d’icônes non retenus lors du sondage. (j’en reparlerai ultérieurement)

Accueillir ses visiteurs par un message personnel est un très bon coup de pouce pour réussir à les convertir en abonnés, fidèles lecteurs ou tout simplement les faire parcourir plus d’articles que simplement celui sur lequel ils sont arrivés.
Je vous avais parlé, il y a quelques mois déjà, d’un plugin WordPress qui permettait d’accueillir ses visiteurs par une landing page. Ce plugin affichait un petit message pour les visiteurs en provenance des moteurs de recherche : “Vous venez d’arriver ici en recherchant mot-clé, les articles suivants pourrait également vous intéresser et n’oubliez pas de vous abonner au flux RSS…”

Mais désormais, il y a encore mieux ! Le plugin Referrer Detector permet d’afficher un message d’accueil aux visiteurs provenant de diverses urls (referrer). Vous pouvez ainsi souhaiter la bienvenue aux personnes arrivant de Digg en leur demandant de digger votre article ou demander de bookmarker vos articles aux visiteurs provenant de Delicious, etc.

Mais ce plugin va encore plus loin car vous pouvez spécifier vous même les urls à détecter, le message et l’icône qui l’accompagne. Une quinzaine de messages d’accueil sont déjà pré-configurés.

Ce système peut s’avérer terriblement redoutable si vous l’utilisez, par exemple, pour souhaiter la bienvenue aux lecteurs en provenance d’un autre blog où vous venez juste de guest-blogger ! Si vous êtes simplement cité sur un autre blog, vous réglez un nouveau message en deux secondes, et voila de futurs visiteurs bien accueillis.

En plus d’avoir un message d’accueil sympathique, cela permet d’interagir plus efficacement et de construire une meilleure relation avec vos lecteurs.

• WordPress Helper, votre blog à portée de main sous FireFox (3)
• Un formulaire pour être contactable (1)
• Trouver des photos Flickr Creative Commons depuis votre blog WordPress (2)

Lors de l’installation de mon switch couleur ce week-end, j’ai choisi de faire en sorte qu’un maximum d’éléments du blog change de couleur lors des clics sur les boutons. Pour les liens et texte rien de compliqué. Pour les boutons style Rss ou autre cale devient un peu plus difficile. Alors pour que cela reste simple j’ai fais le choix de faire des DIV cliquable. Comment faire une div cliquable ?  C’est assez simple. Dans un premier temps il faut mettre ce bout de code dans votre header.php entre les head:

   1: <script type='text/javascript'>

   2: // <![CDATA[

   3:     function altjs(){

   4:       A = document.getElementById('altjsdiv');

   5:       //A.style.display="none"; //cette option cache le lien a google et les lecteurs d'ecran.

   6: // autre methode qui ne cache le lien que "visuellement".

   7:     A.style.position="absolute";

   8:     A.style.height="0";

   9:     A.style.width="0";

  10:     A.style.overflow="hidden";

  11: }

  12:      window.onload = altjs; //on appel la fonction au chargement .

  13: // ]]>

  14: </script>

Ensuite il vous faut mettre la DIV à l’emplacement ou vous souhaitez la faire apparaître de cette façon:

<div id="article-rss" onclick="location.href='VOTRE-LIEN';"
title ="Suivez le blog par RSS"  >
</div>

Pour finir il vous reste plus qu’a mettre les mains dans le css pour créer votre DIV, voici la mienne par exemple:

#article-rss{
    background:url(images/rouge/articlerss.gif);no-repeat
    float:left;
    width:135px;
    height:70px;
    margin:5px ;
    padding:5px  0px 5px 0px ;
    cursor: pointer;
    }

Alors bien sûr si vous utilisez le switch couleur, il faut dupliquer ce code sur chaque feuille de style en changeant la couleur.

J’espère que cela vous servira.

• Installer un switch couleur sur votre blog !
• Comment créer vos boutons de “social bookmark” sans plug-in !
• Encapsuler des sites web dans votre serveur "Weezo"
• Un menu accordéon sur votre blog avec jquery !
• Créer une page “catégorie” spécifique sous Wordpress !

On ne pense pas assez souvent aux problèmes d’accéssibilités des blogs pour certaines personnes. C’est l’article de Lionel sur le sujet qui à commencé a me faire réfléchir “comment les daltoniens voient votre site ?”, puis comme par hasard dans les jours suivants, j’ai reçu sur mon “feedback” deux messages pour me faire remarquer que ma couleur rouge et blanche pouvait être très génante voir ilisible pour certains. J’essaye dans la mesure du possible de toujours tenir compte des suggestions, avis ou même reproches que je reçois de mes visiteurs et donc ce week-end j’ai modifié mon thème en ajoutant une possibilité de switch couleur et une possibilité de réglage de taille de police.

Pour commencer il vous faut un pot de savon noir pour vous laver les mains car pour cette installation il faut mettre les mains dans le cambouis, si vous êtes débutant comme moi, prevoyez aussi une salopette parce que ça tache. Bon trève de plaisanterie. Le switch utilise un fichier js. Dans un premier temps:

Il faut mettre le code correspondant au fichier switch.js et aux fichiers css dans le header de cette façon.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/switch.js"></script>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/rouge.css" type="text/css" media="screen" title="default"/>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/bleu.css" type="text/css" media="screen" title="bleu"/>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/vert.css" type="text/css" media="screen" title="vert"/>
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/violet.css" type="text/css" media="screen" title="violet"/>

Maintenant mettez ce code à l’emplacement ou vous voulez faire apparaitre les boutons de choix de couleurs

<p id="switcher">
                <a href="/" onclick="setActiveStyleSheet('default'); return false;" id="rouge" title="Rouge">Rouge</a>
                <a href="/" onclick="setActiveStyleSheet('bleu'); return false;" id="bleu" title="Bleu">Bleu</a>
                <a href="/" onclick="setActiveStyleSheet('vert'); return false;" id="vert" title="Vert">Vert</a>
                <a href="/" onclick="setActiveStyleSheet('violet'); return false;" id="violet" title="Violet">Violet</a>
            </p>

Le code css des boutons a mettre dans style.css

#switcher { padding: 0 0 20px 0; }
#switcher a { float: right; text-indent: -9999em; height: 15px; width: 15px; margin: 5px 0 0 20px; display: inline; border: 1px solid #111; }
a#rouge { background:url(images/rouge/nav_bg.gif); }
a#bleu { background:url(images/bleu/nav_bg.gif); }
a#vert { background:url(images/vert/nav_bg.gif); }
a#violet { background:url(images/violet/nav_bg.gif); }
#texte { padding: 0 0 20px 0;}
#texte a {  float: left;height: 10px; width: 10px; margin: 0 0 0 20px; display: inline; }
a {   outline: none; }

Maintenant il vous faut créez 4 fichiers css correspondant aux couleurs et nommés:

• bleu.css
• vert.css
• violet.css

Dans ces fichiers css il vous faudra mettre toute les id et class dont vous souhaitez changer la couleur, par exemple dans votre fichier style.css vous avez la class qui défini la couleur des liens:

a, a:visited {color: #913A3A;text-decoration: none;}
a:hover {color: #C7B277;text-decoration: none;}

il vous faut donc la copier dans chaque fichier css en changeant la valeur de la couleur et chaque fois qu’un visiteur cliquera sur une couleur différente, la couleur des liens changera aussi. Il vous faut bien entendu faire de même pour les images, le texte et tout autres éléments que vous souhaitez inclure dans le changement.

Télécharger le fichier switch.js

• Créer une DIV cliquable pour votre blog !
• Un menu accordéon sur votre blog avec jquery !
• Personnalisez les Tooltips de votre blog en couleur !
• Encapsuler des sites web dans votre serveur "Weezo"
• WP Thème Magazine Miniml en français ! [11/24]

Les développeurs de WordPress viennent de lancer un sondage auquel je vous invite à participer, et qui a pour but de choisir le set d’icônes pour la nouvelle version à sortir, c’est-à-dire la 2.7…

Voici un visuel complet de ces différents sets:

Bon, y a pas non plus de très très grandes différences entre les sets. Les designers ont tous bien compris le nouveau design de l’interface. Cela dit, les styles sont assez marqués, et on trouve aussi bien des designs fluides, ggris que des alternatives plus prononcées avec l’utilisation du noir…

On va bien voir ce qui va être décidé, mais si c’était à vous de décider, vous choisiriez quel set ? Personnellement, je les aime tous sauf GB1 et GB2…

• Nom:   Maxblog
• Créateur:     Jinsona Designs
• Distribution:     Web2feel
• Wordpress: 2.6.3
• 2 Colonnes
• Largueur fixe
• Valide CSS & XHTML: oui
• Widget ready: Oui
• Adsense ready: oui
• Footer crypté: Oui
• CSS IE: Non
• Trac back et commentaires séparés: Non

Mon avis: Pour pouvoir afficher le slideshow, il vous faudra installer et activer les plugins fournis dans le zip. Le thème possède un “panel controle” pour gèrer vos publicité, votre flux RSS et la catégorie vidéo. J’ai bien aimé dans les onglets l’accès direct a votre administration ainsi que la connexion/déconnexion sans changement de page. Pour que le thème fonctionne correctement il faut aussi ce plugin.

• Wordpress Thème “VikiWorks” v5 en français ! [29/30]
• Thème magazine gratuit Daily Planet FR !
• Wordpress Thème magazine gratuit AcominMag et AcominTech en français !
• WP Thème BoxTube en français ! [4/24]
• WP Thème magazine gratuit KomPress Mag en français !

• Nom:  The Miint Theme
• Créateur:    Claudio Di Natale
• Distribution:   Free Wordpress Themes
• Wordpress: 2.6.3
• 2 Colonnes
• Largueur fixe
• Valide CSS & XHTML: oui
• Widget ready: Oui
• Adsense ready: oui
• Footer crypté: Oui
• CSS IE: Non
• Trac back et commentaires séparés: Non

Mon avis: Encore un thème avec un footer crypté, ça devient une très mauvaise mode, dommage. Pour afficher les articles de la section “featured” sous le header, il vous faut mettre l’ID de la catégorie dans le fichier index.php ligne 5. Le thème utilise les “customs fields” pour les images de la home et la clé est “thumbnail”. Dans l’ensemble un thème sympathique.

• Jet 990 un thème Wordpress magazine FR !
• WP Newsmag, thème magazine en français ! [Numéro 1/30]
• Colorful 1.0 thème Wordpress FR !
• Thème magazine gratuit Daily Planet FR !
• Wordpress Thème magazine gratuit AcominMag et AcominTech en français !

Article original de Jane Wells. Catégorie : Interface Utilisateur.
Traduction par un membre de la communauté française qui souhaite rester anonyme !

Un peu plus tôt durant cette période de bêta test, nous avons lancé un appel à contribution sur le blog des développeurs.  Ceci afin de réunir les graphistes de la communauté WordPress qui seraient intéressés par la conception des icônes de l’interface d’administration de la version 2.7. Plus d’une douzaine de graphistes du monde entier ont répondu ; et plutôt que d’en choisir un seul, nous avons décidé de transformer cet appel à contribution en un concours où plus de gens seraient impliqués et où la communauté aurait à voter sur le look de ces icônes.

Une fois la décision prise de partir sur un concours plutôt que de miser sur une personne seule, environ la moitié des volontaires de départ ont changé d’avis. Les graphistes restant en lice ont soumis deux propositions d’icônes (celui du “Billet” et celui des “Liens”), ce dans leur style propre. À cette étape de la “consultation”, deux graphistes ont été éliminés de la compétition, car leurs propositions s’éloignaient trop du style visuel de WordPress. Les graphistes “survivants” ont alors eu un premier retour sur leurs propositions. Ils ont eu une semaine pour compléter le jeu d’icônes du menu d’administration ainsi que les icônes d’affichage de la liste des billets (en liste ou avec extrait) apparaissant dans la rubrique d’édition des billets. Tous ces graphistes sauf un ont pu envoyer un jeu complet, nous amenant à un total de 5 propositions.

Maintenant nous devons décider d’une direction. Pour chaque proposition, nous allons vous montrer le jeu en lui-même, une introduction rédigée par son concepteur et un premier retour de la part de l’équipe des développeurs. Après avoir passé en revue les 5 propositions, votez pour le jeu d’icônes que vous jugez le plus adapté à la version 2.7 de WordPress. Cette étape est suivie par un vote additionnel sur la spécificité de chaque icône, si vous aimez tout particulièrement une représentation, mais préféré un style différent, vous avez la possibilité de changer la métaphore d’une icône particulière. Vous avez également la possibilité de laisser un commentaire générique durant le vote. Une fois le vote terminé, nous ferons un bilan des commentaires et des votes et annoncerons le nom du gagnant.

Voici quelques éléments à garder à l’esprit lors de votre sélection :
Une semaine est un délai assez court pour la conception de 13 icônes. Le jeu d’icônes gagnant fera l’objet d’ajustements, et certaines icônes pourront être remplacées. Notre demande portait sur une proposition en noir et blanc. L’état “actif” et une version large pour les titres d’entête seront élaborés par la suite par le vainqueur. Toutes ces versions représentaient beaucoup de travail avec un jeu complet.

Prêt ? En route pour le sondage. Le vote reste ouvert 48 heures à compter d’aujourd’hui 19:00 (heure de Paris), pour permettre aux gens de tous les fuseaux horaires de participer avant la fin du sondage et l’annonce des résultats (nous aimerions intégrer ces icônes dans la bêta 3).

Note concernant la sortie de la version 2.7 :

À l’approche de la bêta 3, les tickets de bug continuent de s’accumuler dans le suivi du développement. L’épreuve de force consistant à faire que tout s’affiche correctement dans Internet Explorer 6. Et aussi le fait d’améliorer l’accessibilité. Si vous êtes fan de WordPress, que vous codez proprement, et que vous voulez vous impliquer de la même manière que les graphistes peuvent le faire aujourd’hui, merci de prendre le temps de nous aider. Prenez en route le train des tickets de développement, ou contactez-nous sur le canal IRC #wordpress-dev pour savoir comment aider.

2 nouveaux thèmes viennent de sortir chez Revolution Two de Brian Gardner. Il s’agit des thèmes:

• Album 1.0 conçu par Brian Gardner et John Flynn, un thème photoblog avec un design un peu grunge. C’est un thème en 2 colonnes, Widget ready avec un choix de 7 couleurs ( brown, gray, purple, red, rust, sepia). La démo est ici

• Elément 1.0 conçu par Jason Schuller, un thème magazine avec un script pour les “Tips” du plus bel effet. Un thème Widget ready en deux colonnes et 4 couleurs (white, gray, brown, black). La démo est ici

Voir aussi:

Theme Revolution Two, 10 nouveaux thèmes gratuits et 3 déjà traduits !

• Theme Revolution Two, 10 nouveaux thèmes gratuits et 3 déjà traduits !
• Top 15 thème magazine Wordpress en français + coup de coeur !
• Decker Thème Wordpress FR !
• WP Thème Magazine Miniml en français ! [11/24]
• Simply Ornate, thème wordpress avec 5 modèles FR !

Deux thèmes un peu particulier créer par Greg Johnson, il n’y aura plus de suivi car il travaille sur le développement d’un nouveau CMS. Attention ce thème est un peu spécial, pas de sidebar pas d’article, il fonctionne sur les pages. Un thème bien conçu, avec quelques connaissances il est toujours possible de le transformer.

Le zip contient la version WP-Coda blue, WP-Coda orange (de Kerry Webster)ainsi que les deux PSD. J’avais ces deux thèmes en réserve depuis assez longtemps, mais sans les PSD ce n’était pas utile de vous les mettre en téléchargement. ATTENTION: pour ma part dans WP-Coda blue je n’ai pas activer le plugin fourni, il ne semble pas utile au thème, bien entendu pas de sidebar et pas de widget pour ces thèmes.

• Thème Wordpress SubtlyMade version 1 en français ! [4/30]
• Thème Wordpress TigerPress en français ! [2/30]
• 3 Thème Wordpress magazine gratuit en français !
• FV Community News FR, Rendez votre blog vivant !
• Wordpress Thème magazine gratuit AcominMag et AcominTech en français !

• Nom:  Thi-Zin
• Créateur:    Nick Van der Vreken
• Distribution:    byDust
• Wordpress: 2.6.3
• 2 Colonnes
• Largueur fixe
• Valide CSS & XHTML: oui
• Widget ready: Oui
• Adsense ready: oui
• Footer crypté: Non
• CSS IE: Oui
• Trac back et commentaires séparés: Non

Mon avis: Un superbe thème photoblog tout en Ajax, un système bien pensé et bien fait. Le créateur a intégré le système “lightbox” ce qui évite l’utilisation du plugin. Il est conseillé de ne pas mettre plus de 7 photos sur la home pour garder les proportions du thème. J’aime bien aussi le système de “scroll” pour les commentaires et le script pour les reflets de vos photos. Bref un thème original et complet. Pour info les scripts “com.bydust” sont aussi en téléchargement avec démo ici, allez voir je pense que certains vont être tentés par ce système.

• Jet 990 un thème Wordpress magazine FR !
• Thème magazine gratuit Daily Planet FR !
• BizFresh Wordpress Thème FR !
• Thème magazine gratuit Red Evo News en 5 couleurs FR !
• Thème magazine gratuit The Miint en FR !

Partant du principe que l’on blogue par pur plaisir je pense qu’il est beaucoup plus gratifiant de le faire sur un thème qui plaît. L’avantage de Wordpress c’est le nombre phenomenal de thèmes libres disponibles (sans compter les payants). Pour faire le bon choix en dehors du design il faut prendre en compte certains facteurs qui ne sont pas forcement identiques suivant le blogueur et la ligne éditoriale du blog. Les premières choses à vérifier sont:

• Le thème est il widgetisé ? A moins d’aimer mettre les mains dans le cambouis c’est toujours mieux
• Le thème possède t’il une fonction recherche ? Très important pour vos visiteurs
• Le thème est il compatible avec tous les navigateurs ? Alors ça c’est pas toujours évident.
• Le code du thème est il valide ? Un point primordial je pense
• Le thème gère t’il les pages ? Et oui j’en trouve des fois qui ne le font pas.
• Le thème separe t’il les commentaires des trackbacks ? Ce n’est pas indispensable mais tellement mieux pour vos visiteurs.

Avant de faire le grand choix voici une petite liste qu’il est bon de relire:

1. Gagnerez vous de l’argent avec ce blog ? si la réponse est oui vous pouvez donc vous adjoindre l’aide d’un professionnel qui vous reglera les souci d’integration et de validité du code.
2. L’apparence de mon blog affectera t’elle son succès ? Pour un blog personnel, un thème libre un peu de gout et d’originalité devrait largement suffire. Pour un blog d’entreprise ou un blog professionnel c’est votre image que vous défendez sur la toile, il est donc préférable d’utiliser les services d’un graphiste multimédia.
3. Combien de blog utilise le même thème ? Certains thèmes très populaires sont utilisés des centaines de fois, il est plus difficile de se faire une image sur la toile ensuite, mais il y a l’avantage en cas de problème de trouver plus facilement un support et de l’aide.
4. Comment favoriser mon référencement ? Pour cela il est bon dès le départ de choisir un thème optimisé SEO, rien ne vous empeche ensuite de le modifier a votre gout
5. Le thème est il optimisé pour les publicités ? Si vous envisagez de monétiser votre blog et que vous n’êtes pas familier du HTML et CSS,  le mieux est de choisir un thème qui comporte déjà quelques emplacements pour les adsenses ou autres publicités, de cette façon le code et le css sont déjà optimisé de façon certaine.
6. Existe il un support ? Certains thèmes gratuits que j’ai traduits ici comportent un forum d’aide ou un support mais c’est assez rare. Aussi si vous êtes vraiment plus que débutant, c’est un problème a prendre en compte, il existe bien des forums, mais bon ….
7. Si vous avez un logo, sera t’il adapté au thème ? La plupart des thèmes propose cette posibilité d’insérer votre logo en lieu et place du logo original. Pensez bien aux dimensions, peut-être il vous faudra le redimenssionner.
8. Le thème est il widget-ready ? C’est un point très important. Si vous êtes familier du code, le problème est résolu, sinon je vous conseille grandement de choisir un thème widget ready ou alors de connaître une personne suceptible de vous le rendre widget ready
9. Le thème a t’il un footer crypté ? Attention c’est un point très important, certains créateurs de thèmes cryptent le footer dans le seul but de protéger leur signature et là je n’ai absolument rien a redire. Par contre d’autres moins scrupuleux n’hésitent pas a cacher des liens plus ou moins corrects, je trouve ça très petit et malhonnète.
10. Et si mon blog grandit ? Une fois votre blog mis en route, il va grandir, recevoir plus de visite, vous allez vouloir ajouter des catégories, des widgets, des pages etc.. Commencez a y penser maintenant et choisissez un thème assez flexible ça vous evitera des deconvenues.

Et pour conclure voici quelques adresses pour trouver des thèmes:

Des thèmes traduits en français:

• Meli Melo’s blog
• Cahuete
• Aurélien Paulus
• Wordpress Tuto
• Here With Me
• Niss.fr
• Le blogueur masqué bien sûr

Quelques  sites:

• Free Wordpress Templates
• Premium Free Wordpress Thèmes
• Smashing Magazine
• Blog Perfume
• TopTut
• Widget ready Themes
• Galerie officielle Wordpress.org
• Themes pack
• Wordpress themes free (site français)
• WP Snap
• WP Zoom

D’après un article de Daily Blog

• Colorful 1.0 Wordpress Thème FR !
• Thème magazine gratuit The Miint en FR !
• Natural Essence 1.0, thème Wordpress FR !
• Decker Thème Wordpress FR !
• GreenFog Thème Wordpress FR !

Cette sélection de liens triés sur le volet en provenance de mon compte Delicious vous aidera peut-être : à trouver des snippets (bouts de code) pour faire face à toutes les situations ; à concevoir des emails qui tiennent la route ; à dénicher des feuilles de style pour vos tableaux ; à ajouter des menus déroulants intelligents à votre site web ou encore à faire le point sur les templates tags WordPress disponibles pour votre thème de blog !

Bouts de code (snippets)

• Posteet — Une plâtrée de bouts de code dans pratiquement tous les langages du web.

• DZone Snippets — Des tonnes de bouts de code pour le développeur web.

• Bout 2 Code — Comme son nom l’indique. Un peu pauvre en langage du web pour le moment, ce site propose néanmoins des trucs pratiques pour Excel ou Office en général…

• Pastebin — vous aide à débugger vos bouts de code en obtenant une URL comme http://pastebin.com/1234 à partager autour de vous. Si quelqu’un modifie votre code, vous pourrez voir les différences avec le code d’origine. Pratique aussi pour faciliter les copiés-collés de code, par toujours évident avec des outils comme WordPress.

Envoyer des e-mails

• Email Standards Project — N’avez-vous jamais pesté contre le rendu de votre page web dans tel ou tel navigateur ? Si concevoir un site web qui “passe” partout n’est pas facile, envoyer une newsletter par email l’est encore moins. ESP vise à mettre en place une batterie de bonnes pratiques pour que les MUA implémentent les propriétés CSS indispensables à une mise en pages un peu funky des emails, grâce notamment à la mise en place de l’Email Standards Project Acid Test,

• Campaign Monitor — En complément du lien précédent, voici un tableau récapitulatif du support des CSS dans les principaux Mail User Agent (MUA).

• 33 templates HTML pour l’emailing — Toujours chez Campaign Monitor, suggéré par LeGizz, plus de 30 modèles HTML pour envoyer des e-mails qui passeront dans la plupart des lecteurs de mails.

Des tableaux quand il le faut

• CSS Table Gallery — Une galerie de styles CSS appliqués aux tableaux pour mieux styler les données tabulaires parce qu’elle le valent bien ! Une bonne initiative de Chris Heilmann qui nous a déjà gâté avec Online Tools qui héberge le célèbre DOMTab pour faire des menus à onglets. Cf. idTabs vs DOMtab pour plus d’informations.

  En quoi la mise en page par tableaux est-elle stupide ? — Tout les arguments contre l’utilisation des tableaux pour autre chose que la présentation de données tabulaires rassemblés sur une page aussi complète que ludique. Via la liste de discussion AccessTech, espace d’entraide autant que de veille technique sur le sujet de l’accessibilité numérique.

Des menus déroulants

• Menu déroulant à plusieurs niveaux — Première partie déjà très complète d’un tutoriel en trois parties sur les menus déroulant sur Fairytells :
  • Fonctionne sur les navigateurs modernes et sur Internet Explorer à partir de la version 5,
  • Navigation au clavier,
  • Positionné de manière relative pour éviter les problèmes de superposition,
  • Fonctionne avec et sans Javascript.

• Menu_UL –Un menu déroulant commis par Benoit Raux piloté via CSS : tous les états possibles ont reçu une classe CSS pour Noël :
  • .menu_son_basic,
  • .menu_son_over,
  • .menu_son_active,
  • .menu_son_active_over,
  • .menu_parent_active,
  • .menu_parent_basic,
  • .menu_parent_selected.

Des colonnes de même hauteur sans tableau

• PVII Equal Height CSS Columns — Trouvé dans le code source de l’exemple du menu déroulant de Fairytells, ce script permet d’ajuster dynamiquement la hauteur d’une colonne en fonction d’une autre. On pourrra ainsi avoir une barre latérale dont le fond parviendra jusqu’au pied de page en fonction de la hauteur du contenu principal. Hum, voyez plutôt les exemples ;)

• Equilibrez vos colonnes CSS avec Javascript — Un autre script astucieux pour avoir des colonnes de même hauteur. Très simple d’utilisation : il suffit d’indiquer les identifiants des éléments à équilibrer et hop ! Contient des morceaux de détection de redimensionnement de texte (Text-Resize Detection).

WordPress

• Guide de référence des templates tags — Voici une liste très complète des appels de fonction que l’on peut utiliser dans un thème WordPress. A bookmarker d’urgence !

Miscellanées

• Compresser et optimiser les fichiers CSS et Javascript — Tutoriel intéressant paru sur blackotine concernant l’utilisation de la classe PHP Combine.

• Les anti-sèches du développeur web : Une palanquée de memento, cheatcheet en image ou au format PDF sur vos outils préféré : HTML, CSS, PHP, UNIX, Apache, jQuery, etc.

Rédigé par Bruno Bichet et publié sur css4design.

La lecture de ce flux est gratuite dans le cadre d'un aggrégateur privé (ex. : Netvibes, iGoogle, Google Reader, etc.) et de 1€ par lecture quand les articles sont rendu public sans autorisation (ex. : Feedshow, Xoofoo, etc.). Merci de votre compréhension.

© 2006 - 2008 - Tous droits réservés

Liens utiles pour l’intégrateur HTML / CSS et le développeur web

No related posts.

Ca peut vous intéresser »

• Quelques notes sur Sandbox, un thème WordPress pour intégrateurs html CHIC qui aiment les microformats (4)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Petit bilan statistique du CSS Naked Day (6)
• Mise à jour de la grosse grosse liste #2 (0)

Kampyle est un site qui vous permet d’avoir un feedback sur votre blog. Il arrive souvent que vos visiteurs aient un petit reproche ou un compliment a vous faire, mais qu’ils ne désirent pas “polluer” vos commentaires et c’est bien dommage de ne pas connaître tous les avis. Avec Kampyle c’est réglé puisque vous leur donnez cette possibilité de façon rapide et très simple.

Accès au site

• RapidPSD, obtenez votre PSD codé automatiquement en ligne !
• Plugin BlogFollow - Montrez un petit morceau du blog de vos visiteurs !
• Si tu veux je te Whrrl et même je t’invite !
• Ziddu le service qui paye les download !
• Plug-in MyBlogLog “Just for You”, aussitôt sorti, aussitôt traduit !

Mozilla Firefox est, par défaut, un très bon navigateur apprécié des bloggeurs, mais avec quelques extensions supplémentaires, il devient une excellente boite à outils de blogging. Voici quelques extensions qui vont vous aider à gagner du temps et à vous rendre la vie de bloggeur plus facile.

Publication

ScribeFire : le meilleur outil de publication d’articles au sein de Firefox (compatible avec WordPress, LiveJournal, Drupal, Textpattern, MySpace, Tumblr, etc).

Copy Plain Text : copier uniquement le texte brut d’un article (évite de copier la mise en page et le formatage avec).

Copy as HTML Link : créer un lien HTML de la page en cours en utilisant le texte sélectionné pour le copier facilement dans votre article.

WordPress Helper : gérer plusieurs blogs WordPress.

Resizeable Textarea : redimensionner les zones de texte des formulaires; utile sur les blogs avec des formulaires pour commenter trop petits.

Dictionnaires : pour ne plus faire de fautes lors de la rédaction d’un article.

Zemanta : suggestions de liens, photos, article, etc, en relation lors de la rédaction d’un article (compatible avec WordPress, Blogger, Typepad, LiveJournal, Ning, Tumblr, etc).

Médias

Screengrab!, FireShot ou SnagIt : faire des captures d’images de sites web (toute la page, portion de page, etc) rapidement et simplement.

FireFTP : transférer vos fichiers vers vos FTP depuis Firefox.

Firefox Universal Uploader : uploader/télécharger des fichiers sur différents services : Box.net, Flickr, Picasa, Youtube, Facebook, etc.

Fireflix : gérer vos images Flickr depuis Firefox.

ImageBot : uploader des images vers les services gratuits d’hébergement ImageShack et Photobucket.

Réseaux sociaux

Shareaholic : partager rapidement sur les réseaux sociaux.

TwitKit ou TwitterBar : twitter depuis votre navigateur.

Productivité

Gbutts : tous les services Google à portée de main en un seul bouton.

Autofill Forms : gagner énormément de temps grâce au remplissage automatique des formulaires d’inscriptions.

Read It Later : enregistrer des pages à lire plus tard sans les bookmarquer.

Morning Coffee : ouverture de sites que l’on suit quotidiennement rapidement.

MeeTimer : où passez (perdez)-vous le plus de temps sur internet, pour combattre la procrastination.

ReminderFox : gérer une todo liste et retenir des dates importantes.

Référencement & co

SeoQuake : obtenir et enquêter sur de nombreux paramètres de référencement sur une page particulière ou dans les résultats des moteurs de recherche.

SearchStatus : afficher le PageRank, classement Alexa, classement Compete, densité de mots clé dans une page, surbrillance des liens en nofollow, etc.

LinkChecker : vérifier la validité des liens dans une page web.

Autres

TinyUrl Creator : l’extension Firefox de TinyUrl pour raccourcir de longues adresses internet.

Adsense Notifier : voir ses revenus Google AdSense dans la barre d’état de Firefox.

Sage : un lecteur RSS intégré à Firefox.

Vous connaissez d’autres extensions pour Firefox utiles pour blogguer ? N’hésitez pas à en parler dans les commentaires, l’article sera mis à jour.

Sources : un peu de Problogger, Techvivo, Mashable et Stepcase Lifehack.

• WordPress Helper, votre blog à portée de main sous FireFox (3)
• Faire des screenshots facilement sous FireFox (0)
• Zen Habits, le blogging open-source : “N’hésitez pas à voler mes articles” (2)

Depuis quelques jours, je passe beaucoup de temps sur WordPress 2.7 et je dois dire que j’aime beaucoup cette nouvelle version, et ce, pour plusieurs raisons.

1. Le design

Un des trucs qui m’a freiné à passer sur WordPress, c’était le design de l’interface d’administration. De ce côté-là, DotClear était des années lumières devant… Mais visiblement, il semblerait que depuis une petite année, l’équipe de WordPress y passe pas mal de son temps. Je ne sais pas si c’est la future version d’ExpressionEngine ou le design de l’interface d’Habari qui les a fait réagir, mais visiblement, il se sont bien bougés…

Interface ExpressionEngine 2.0 (qui sort dans quelques semaines…)

Interface Habari 0.5

J’ai entendu pas mal de monde se plaindre de l’omniprésence du gris, mais franchement, je trouve ça plus moderne que les couleurs précédentes, non ?

Ergonomie de l’interface d’administration

Ca c’est un point important pour moi. L’apport d’Ajax pour certaines fonctions est vraiment agréable. Le fait de pouvoir faire appraître ou réduire le menu de navigation à gauche est très avantageux. Il ne prend pas trop de place sur l’écran.

L’écran tiens ! Parlons-en ! S’il y a une nouveauté que j’adore, ce sont les “options de l’écran”.

Situées en haut à droite, elle permettent de choisir ce que l’on veut voir apparaître à l’écran. Et c’est valable pour une grande partie des pages de l’administration. Donc, si on prend l’exemple de la page de rédaction d’un article, et que vous n’utilisez pas les options avancées par exemple, vous pouvez très bien les masquer. Pas la peine de polluer l’écran avec des trucs que vous n’utilisez pas !

Ensuite, pas mal de choses ont été réorganisées au niveau du paramétrage. Certains aspects ont changé de place, ont été regroupés dans d’autres blocs. On y voit beaucoup plus clair je trouve.

Un peu dans le même concept que les “options de l’écran”, certains attentions au niveau de l’insertion des images sont intéressantes. En plus de l’arrivée d’une grande taille paramétrable ( avant on ne pouvait paramétrer que la vignette et la taille moyenne… ), au niveau du paramétrage, vous pouvez maintenant choisir une taille et un alignement par défaut de vos images. Personnellement, je les case toutes de la même manière et à la même taille, ça peut donc me faire gagner pas mal de temps…

Les nouvelles fonctionnalités

Les commentaires hiérarchisés

Je ne vais pas faire ici une liste des nouvelles fonctionnalités de la version 2.7, il y en a déjà la tonne sur le web… Prenez juste celui de PapyGeek et vous aurez tout bon !

Pour un projet à venir, j’ai intégré le nouveau système de commentaires hiérarchiques dans un thème. Les changements ne sont pas trop difficile en soi, faut juste penser à bien intégrer le javascript où il faut ! Au niveau de la traduction c’est pas encore ça puisqu’on utilise ici des template tags qui ne sont disponibles qu’en anglais. Selon les développeurs, certains devraient être modifiables avant la sortie définitive de la 2.7.

Visuellement, ces commentaires hiérarchiques donnent donc ça:

Ca existe depuis pas mal de temps en plugin mais j’avoue que je ne suis pas convaincu. Je trouve que ça rend la lecture des commentaires très compliquée…

Installation des plugins

Autre fonctionnalité bien sympa, l’installation automatique des plugins…

Plus besoin de vous déplacer, vous pouvez tout faire depuis l’interface d’administration ! En fait, vous avez accès depuis cette nouvelle page à la base de données des plugins de WordPress.org. Vous pouvez donc les parcourir, les choisir et les installer directement ! Vraiment très sympa !

Mise à jour de WordPress

A ce niveau-là, je dois pas avoir de chance parce qu’à chaque fois, ça a planté… Et pourtant tout semblait bien paramétré…

Du coup, ça sera assez difficile pour moi de lui faire confiance ! On verra bien à l’utilisation mais je crois qu’à terme ce sera vraiment une aide incroyable et incontournable…

Conclusion

Depuis que je suis sur WordPress je n’ai encore jamais été autant enthousiaste par une nouvelle version. Ils se sont vraiment penché sur l’interface utilisateur pour nous permettre de passer le maximum de temps à écrire et un minimum de temps à tout maintenir. J’avais un peu peur que tout ça devienne une sombre usine à gaz mais visiblement ce n’est pas le cas. Bien sûr, cette version apporte son lot de nouvelles fonctionnalités, mais je crois vraiment que c’est au niveau de l’utilisation de l’interface d’administration que le plus gros travail a été fait !