Voici un tutoriel vidéo consacré à la conception d’une page web en XHTML 1.0 strict et en CSS. Créer un site web : codage envoyé par JojoRatonLaveur

Ca peut vous intéresser »

• [résolu] Les folles journées de l’intégrateur HTML et ses petits tracas… (14)
• Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ? (36)
• WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org (8)
• Vos positions s’affaissent ? Mettez le bottom à zéro… (3)
• Utilisez le DOM et Javascript comme un chef (25)

Nanotabs peut faire tout ce que faisait idTabs avec même quelques options supplémentaires, le tout sans utiliser le framework jQuery !

Ca peut vous intéresser »

• WordPress 2.6 — Mes news carburent à “Press This” (chaine inside) (34)
• Trucs et astuces CSS (5)
• SCRIPTS (0)
• S’il ne devait rester qu’un tutoriel pour faire un menu CSS avec onglets… (8)
• Menu HTML et CSS, sliding doors et item current en PHP (24)

Tutoriel vidéo consacré à la réalisation d’un menu accordéon en Javascript en utilisant la librairie jQuery. Menu Accordeon Javascript. Envoyé par JojoRatonLaveur

Ca peut vous intéresser »

• Vis ma vie d’intégrateur HTML (2)
• 題名のない音楽会 大江戸の火消し (Smoke On The Water) (0)
• WordPress 2.6 — Mes news carburent à “Press This” (chaine inside) (34)
• Trucs et astuces CSS (5)
• SCRIPTS (0)

1. @ Reply — Le plugin de Yus permet de répondre facilement à un commentaire précis à l’image du Reply to de Twitter.

   Reprend le pseudo du commentateur avec le lien vers le commentaire en question. Pratique pour éviter des saisies fastidieuses, mais surtout pour faire référence à un commentaire précis.

2. Akismet — L’anti-spam incontournable.

3. Category Order — Offre une interface pour ordonner les catégories et les sous-catégories par glissé-déposé dans l’ordre que vous désirez.

4. cforms — Le poids lourd des formulaires de contact, mais tellement souple à l’usage. Peut-être un peu trop complet pour mes besoins actuels, je cherche une alternative plus légère.

5. Chunk Urls for WordPress — Raccourcit les URL trop longues qui pourraient casser la mise en page dans les commentaires.

6. Comment Info Tip — Une façon de donner une visibilité supplémentaires aux lecteurs qui commentent en affichant une info-bulle au survol de leur nom.

   Affiche le nombre de commentaires déjà déposés (et les billets en question), ainsi qu’un extrait de leur dernier billet. Élégant et sobre, il devrait s’adapter à toutes les chartes graphiques.

7. Dean’s Permalinks Migration — Très pratique lors des changements de format d’URL : mappe l’ancienne structure sur la nouvelle. Simple et efficace.

8. DoFollow — Enlève le microformat rel=”no-follow” ajouté automatiquement par WordPress à tous les liens présents dans les commentaires.

   Une fois l’installation effectuée, profitez-en pour inscrire votre blog sur dofollow.fr ! En savoir plus sur nofollow, l’attribut scélérat ?

9. Get Recent Comments — Permet d’obtenir la liste des derniers commentaires. Plus complet que le widget présent par défaut dans WordPress, vous pourrez l’adapter facilement à vos besoins.

10. Google XML Sitemaps — Crée un plan de site au format XML à la racine de votre blog pour faciliter l’indexation de votre site par Google. Une palanquée d’options disponible.

11. LinkLift (Widgets) — Affiche automatiquement la liste des liens sponsorisés vendu par la régie LinkLift.

12. Markdown Extra — Peut remplacer avantageusement l’éditeur visuel TinyMCE de WordPress pour saisir les billets avec une syntaxe très simple mais très efficace pour produire du XHTML facilement.

    Si par défaut Markdown est actif dans la zone d’édition des billets et dans la zone des commentaires, il est possible de restreindre son utilisation à l’une ou l’autre.

    Après avoir désactivé la syntaxe Markdown pour la saisie des billets sur mon blog à cause de problèmes dans l’affichage des certains billets, j’ai décidé de la réactiver et de voir d’où viennent ces éventuels bugs. N’hésitez pas à me signaler d’éventuels dysfonctionnements.

13. Microsummary Comments Track — Tout nouveau plugin commis par Marin pour suivre les commentaires depuis la fonction Live Bookmarks de Firefox 3. Une vidéo pour la mise en route est disponible.

14. No Widows — Permet d’éviter qu’un mot présent dans un titre de niveau H2 (titre des billets dans la plupart des thèmes WordPress) se retrouve seul sur sa ligne.

    Inspiré par l’excellent article Three Quick Ways to Avoid Widows paru sur Learning jQuery

15. Ozh’ Admin Drop Down Menu — Remplace le système de menus et sous-menus de l’administration de WordPress par un menu déroulant permettant d’accéder à presque toutes les opérations en un minimum de clics. Carrément indispensable !

16. Search & Replace — Effectue des opérations de recherche et remplacement en attaquant directement la base de données de votre blog. Possibilité de restreindre les opérations à n’importe quel champs.

    Très pratique lorsqu’on modifie régulièrement la charte graphique de son blog : avec tout les changements de styles CSS que ça implique, il est parfois bien utile de pouvoir modifier les classes CSS présentes dans le code des billets. Presque indispensable lorsqu’on effectue une migration de blog !

17. Simple Tags — Permet de faire pratiquement toutes les manipulations connues ou inconnues sur les tags ! Cerise sur le gâteau, le plugin permet d’afficher la liste des billets plus ou moins en rapport compte tenu de critères sur lesquels vous avez la souris ;)

18. Subscribe To Comments — Permet à ceux qui laissent des commentaires de recevoir les réponses sur leur boite e-mail. Indispensable pour faciliter la vie de vos lecteurs les plus assidus ;)

19. Text Link Ads — Affiche automatiquement la liste des liens sponsorisés vendus par la régie du même nom.

20. Theme Test Drive — Grâce à cet excellent plugin, vous pourrez voir un thème différent des visiteurs. Il suffit d’être connecté à l’interface d’administration et de sélectionner le thème que vous voulez admirer en douce. Très utile pour finaliser un thème WordPress en situation réelle.

    Attention toutefois, à la mise en place des widgets car vos visiteurs verront les modifications en direct !

21. the_excerpt Reloaded — WordPress propose la fonction the_excerpt() pour afficher un extrait des billets mais supprime toutes les balises HTML qu’il contient.

    Ce plugin vous permettra de définir quelles balises HTML vous désirez laisser passer dans l’extrait et la taille de ce dernier. Pratique pour afficher les liens ou les images dans l’extrait.

22. WordPress Database Backup –Gère les sauvegardes de votre blog, soit sur votre disque dur, soit en envoyant un fichier à l’adresse e-mail que vous indiquez. Possibilité d’automatiser les sauvegardes selon des durées au choix.

23. WP-DBManager — Permet d’effectuer des opérations de maintenance sur la base de données de votre blog ou des sauvegardes à condition que votre hébergement le permet.

24. WP-MostCommentedPosts — Affiche la liste des billets les plus commentés. Pratique pour faire remonter quelques billets ou donner une idée des thèmes les plus populaires de votre blog.

    Attention toutefois, les billets les plus populaires ne sont pas forcément les plus représentatifs.

MAJ : Depuis la rédaction de ce billet, j’ai ajouté quelques plugins :

• Plugin Central — Permet d’installer un plugin en un clic en saisissant l’URL du fichier zip ou le nom du plugin s’il est présent sur wordpress.org/extend/plugins/.

• Simple Yearly Archive — Affiche sobrement la liste des tous les articles publiés classés par années. En remplacement de Snazzy Archives, un peu trop hype ;)

• WP-PostViews — Ce plugin permet de connaitre le nombre de fois où un article à été vu. Un widget affiche la liste des x derniers billets les plus vus.

• WP Ajax Edit Comments — Ajoute diverses fonctionnalités pour les commentaires d’un blog dont la principale : autoriser les visiteur à modifier leurs commentaires durant un laps de temps à définir. Intéressant ici dans la mesure où tout le monde ne maitrise pas la syntaxe Markdown ;)

• WP Super Cache — Chaque fois qu’un visiteur affiche une page de votre blog, ce sont des dizaines de requêtes (voire plus) à votre base de données et des traitements coûteux en ressources, au niveau PHP.

  WP Super Cache calcule vos pages à la première demande et en garde une version statique pour les requêtes suivantes pour soulager votre serveur.

• bhCalendarchives — Plugin pour WordPress permettant d’afficher vos archives sous forme de tableau mensuel, les années en ordonnées et les mois en abscisses “à la façon de ShaunInman.com“. Si vous optez pour le widget, celui-ci vient en remplacement du widget “archives” original de WordPress.

PS : Je n’active pas en permanence les plugins Theme Test Drive, WP-DBManager ou Search & Replace qui ne  sont utiles qu’à certains moment.

PS2 : Entre-temps, j’ai remplacé WP-MostCommentedPosts par le widget qui affiche les billets PostRanked de AideRSS.

Ca peut vous intéresser »

• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Screencast de WordPress 2.5 RC2 (1)
• Plugin WordPress — Calendarchives (9)
• Nouveau plugin WordPress — WP Microsummary Comments Track (4)
• Mise-à-jour de la grosse grosse liste pour webdesigner (0)

burningHat s’est inspiré de la présentation des archives de Shauninman.com pour développer une fonction permettant d’obtenir un tableau mensuel avec les années en ordonnées et les mois en abscisses.

Cette fonction est désormais disponible sous forme de plugin avec une ligne à copier dans votre template ou en remplacement du widget Archives de WordPress. Vous pouvez voir Calendarchives en action sur ce blog.

Pour le moment les mois sont affichés par un chiffre (1 pour janvier, etc.). Une prochaine version du plugin devrait voir ces chiffres remplacés par la première lettre du mois (J pour janvier). En attendant, il est possible d’obtenir ce résultat en modifiant le code du plugin comme l’indique Manu dans ces commentaires.

MAJ : la nouvelle version de Calendarchives disponible sur WordPress.org propose plusieurs options pour afficher la date : chiffres, première ou trois premières lettres du mois. Toutes ces options sont accessibles simplement en faisant glisser-déposer le widget Archives dans la zone widgétisable de votre choix. Bravo Emmanuel !

Ca peut vous intéresser »

• WordPress — archives “Reloaded” avec Calendarchives (5)
• Screencast de WordPress 2.5 RC2 (1)
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Nouveau plugin WordPress — WP Microsummary Comments Track (4)
• Mise-à-jour de la grosse grosse liste pour webdesigner (0)

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• 題名のない音楽会 大江戸の火消し (Smoke On The Water) (0)
• Web beuh zéro : au secours, ils ont fumé la moquette ! (2)
• Sont taquins chez WordPress ;) (6)
• rollSense : Google Adsense du contenu ou révolution dans l’échange de lien ? (10)
• Rions un peu… avec Twitter et l’attribut rel=”nofollow” (5)

Blogs Google

• Blog officiel de Google
• Blog d’astuces, news, etc
• Blog de Affiliate Network
• Blog de Blogger
• Blog de Blogger (fr)
• Blog de Book Search
• Blog de Checkout
• Blog de Checkout API
• Blog de Custom Serach Engine
• Blog de Feedburner
• Blog de Gears API
• Blog de Gmail
• Blog de Google AdSense
• Blog de Google AdSense (fr)
• Blog de Google AdWords
• Blog de Google AdWords (fr)
• Blog de Google Adwords API
• Blog de Google Adwords Marketing
• Blog de Google Analytics
• Blog de Google Android
• Blog de Google Apps
• Blog de Google Base
• Blog de Google Code
• Blog de Google Code (projets sponsorisés)
• Blog de Google Data API
• Blog de Google Desktop
• Blog de Google Desktop API
• Blog de Google Docs
• Blog de Google Entreprises
• Blog de Google Finance
• Blog de Google Gadgets API
• Blog de Google Grants
• Blog de Google Mac
• Blog de Google Maps (fr)
• Blog de Google Maps API
• Blog de Google Maps et Earth
• Blog de Google Mashup
• Blog de Google Mobile
• Blog de Google News
• Blog de Google Notebook
• Blog de Google Open Source
• Blog de Google Optimisation de sites
• Blog de Google Reader
• Blog de Google Recherche
• Blog de Google Sites
• Blog de Google Sécurité
• Blog de Google Talk
• Blog de Google Test
• Blog de Google Video
• Blog de google.org
• Blog de iGoogle
• Blog de l’agence Adwords
• Blog de OpenSocial API
• Blog de Orkut
• Blog de Picasa
• Blog de Politique publique
• Blog de SketchUp
• Blog de YouTube
• Blog de YouTube (fr)
• Blog de YouTube API
• Blog du QG des webmasters
• Blog Recherche AJAX API
• Blog sur les média traditionnels (TV, audio…)

Ca fait de la lecture, non ?

Ca peut vous intéresser »

• Mon Top 5 des outils pour bloguer (5)
• Variables CSS, templates CSS, Pluxml et Have fun with CSS (7)
• Quels sont les services web 2.0 que j’ai utilisés aujourd’hui ? (6)
• Petite Casquette : j’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ? (12)
• Mes 6 manies à moi que j’ai ? (20)

• Navigation dans l’API
• Visual jQuery
• API offline avec Adobe Air (zip).

Notez qu’il existe également :

• un fichier XML contenant toute la documentation
• Navigation dans l’API disponible également sous la forme d’un fichier zip

Tout ça en plus de la documentation disponible sur jquery.com, bien évidemment.

Via Learning jQuery.

Ca peut vous intéresser »

• Vis ma vie d’intégrateur HTML (2)
• Mise-à-jour de la grosse grosse liste pour webdesigner (0)
• Menu accordéon avec jQuery (6)
• Killing me softly (with this script) (11)
• jQuery 1.1.4 sur le grill (0)

En effet, pas toujours facile de s’y retrouver entre hébergements mutualisé, serveur privé virtuel, serveur dédié, hébergement low cost, virtualisation, infogérance, SLA, bande passante, burst…

Ca peut vous intéresser »

• WordPress 2.6.1 (0)
• Roadmap pour WordPress 2.7 (1)
• Nouveau plugin WordPress — WP Microsummary Comments Track (4)
• Noowho - que font vos visiteurs ? (3)
• Nanotabs — un idTabs minimaliste sans jQuery (2)

A quand une assurance-vie pour les blogs ?

Ca peut vous intéresser »

• WordPress vs DotClear #1 : the final countdown (3)
• WordPress : masquer des billets seulement sur la “home” avec Sandbox (6)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)
• WordPress 2.6.1 (0)
• WordPress 2.6 — un nouveau “tag” conditionnel avec has_tag() (4)

Plus utile pour nous, le mystérieux bug gettext apparaissant sur certaines configurations de PHP (dont la mienne) est résolu.

L’insertion d’images sur Internet Explorer via le bookmarklet Press This est réglé. Pour tous, les performances de l’interface d’administration des blogs comportant un grand nombre de plugins devrait s’améliorer.

Voici la liste complète de la soixantaine de bugs résolus. La liste des fichiers modifiés par le passage à WordPress 2.6.1 est aussi disponible. Téléchargez la mise à jour 2.6.1.

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• Roadmap pour WordPress 2.7 (1)
• Nouveau plugin WordPress — WP Microsummary Comments Track (4)
• WordPress vs DotClear #1 : the final countdown (3)
• WordPress : masquer des billets seulement sur la “home” avec Sandbox (6)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)

En typographie, on appelle ça la gestion des veuves et des orphelines. En général ces termes s’appliquent plutôt à la première ligne d’un paragraphe qui se retrouve seule à la fin d’une page (opheline) ou la dernière ligne d’un paragraphe qui se retrouve seule en haut d’une page (veuve) cf. Wikipedia.

Le site Learning jQuery propose trois méthodes pour appliquer un espace insécable   entre les deux derniers mots d’un titre pour les solidariser sur la deuxième ligne afin d’éviter d’avoir un titre disgracieux comme celui que vous avez sous les yeux :D

Parmi les trois solutions proposées, j’ai choisi celle qui reposait sur le traitement des chaines de caractères string, mais rien ne vous empêche de choisir la méthode utilisant les tableaux (Array) ou les Expressions régulières.

$(document).ready(function() {
    var h2all, h2a, h2b;
        $('h2 a').each(function() {
        h2all = $(this).text();
        h2a = h2all.slice(0, h2all.lastIndexOf(' '));
        h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
         $(this).html(h2a + h2b);
     });
});

MAJ : Pour intégrer cette fonction dans WordPress, voici un fichier .zip à décompresser et à placer dans le dossier plugins de votre thème.

Ca peut vous intéresser »

• Mise-à-jour de la grosse grosse liste pour webdesigner (0)
• 1000 ressources pour le développement web et WordPress : la grosse grosse liste (82)
• Vis ma vie d’intégrateur HTML (2)
• Supprimer une catégorie WordPress dans le flux RSS avec le plugin “Advanced Category Excluder” (17)
• Screencast de WordPress 2.5 RC2 (1)

Actuellement disponible sous forme de code à copier-coller, ne doutons pas que Manu continuera à travailler du chapeau pour ajouter quelques fonctions et à nous offrir son travail sous la forme d’un widget ;)

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• Tutoriel WordPress 2.2 : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR" (38)
• Plugin WordPress — Calendarchives (9)
• Optimiser et styler les catégories WordPress avec les CSS (5)
• Les widgets dans WordPress 2.5 avec widgétisator ;) (7)
• Danse avec les loops #1 : un thème WordPress mis à nu (4)

Paragraphe

Un nouveau paragraphe s’obtient en sautant une ligne. Comme d’habitude.

Blocs de citation

> Voici une citation qui tient sur un paragraphe

> Voici une citation qui contient deux paragraphes : le premier,

> et le deuxième.

Bloc de code

Pour écrire un bloc de code, il suffit d’indenter chaque ligne avec au moins 4 espaces ou une tabulation :

Un paragraphe normal     un bloc de code

Note : pour écrire du code au fil du texte, il faut utiliser l’accent grave seul (Alt GR 7 sur mon clavier suivi d’un espace)

Je préfère `text-indent: -9999` à `display: none`

Les listes

Listes non-ordonnée ul

Démarrez avec un astérisque. Il est possible d’utiliser le signe + (plus) ou le - (tiret) à la place.

* item 1

* item 2

* item 3

Listes ordonnée ol

Démarrez avec un chiffre suivi d’un point.

1. item 1

2. item 2

3. item 3

Les liens

L’ancre du lien est délimitée par des crochets, tandis que l’URL est encadrée par des parenthèses.

Voici la syntaxe pour donner un [lien externe](url du lien externe).

Pour les plus pointilleux d’entre vous, voici un [lien](url du lien “le title”) agrémenté d’un title.

Mise en évidence

Il faut utiliser deux astérisques devant et après le terme pour renforcer le texte strong

**En gras sur ce blog**

Utilisez un astérisque avant et après le terme à mettre en emphase em

*En italique sur ce blog*

Conclusion

Je vous invite fortement à vous rendre sur le site de Michel Fortin pour voir les possibilités de Markdown. Voici d’autres informations sur Markdown avec WordPress.

Ca peut vous intéresser »

• Pas d'article en relation

Via nobodymuch.com

Ca peut vous intéresser »

• 題名のない音楽会 大江戸の火消し (Smoke On The Water) (0)
• Web beuh zéro : au secours, ils ont fumé la moquette ! (2)
• Sont taquins chez WordPress ;) (6)
• Rions un peu… avec Twitter et l’attribut rel=”nofollow” (5)
• Rions un peu avec… (7)

Un coup d’œil dans le rétro

Juin 2006 - Juillet 2007 — Un an après le lancement de mon blog sur l’intégration HTML et CSS, Google persiste à reléguer mon blog à la 100ème pages des résultats sur la requête CSS.

Janvier 2008 – Je surprend mon blog qui se réveille entre la 50ème et la 100ème page. Je suis déçu, au point de penser qu’un blog c’est bien pour se placer sur le buzz et l’éphémère ou sur des requêtes comportant plusieurs termes, mais que ça ne vaut pas tripette pour se placer convenablement sur des requêtes renvoyant près de 430 000 000 de résultats !

Juillet 2008 — Je retourne alors près du radiateur pour cancres ès SEO, quand j’aperçois la page d’accueil de mon blog faire la belle à la 10ème page : je suis aux anges. Fébrile, je vérifie régulièrement ce nouveau positionnement, croyant à un bug dans la matrice. Mais non, plus les semaines passent, et plus mon blog danse la polka pour se stabiliser entre la 5ème et la 7ème page. Il se se balade aujourd’hui entre la 3ème et la 5ème page.

Mais ce n’est plus la page d’accueil du blog qui se pavane, mais un billet qui récapitule les trucs et astuces CSS que je garde à portée de souris. Une autre surprise m’attend : ma page d’accueil est toujours présente dans les SERP : elle surveille son rejeton depuis la 8ème page des résultats ! Que du bonheur ;)

MAJ : 12 août 2008 : Ça évolue très vite puisque désormais la page d’accueil du blog se trouve en 3ème ou 4ème page des résultats sur la requête CSS ; la page qui recense les trucs et astuces CSS se trouve entre la 7ème et la 8ème page…

Quelques pistes pour expliquer cette remontée

Octobre 2007 – Je passe de Dotclear à WordPress et je modifie le format des URL. Malheureusement pour moi, mon hébergement ne supporte pas l’URL Rewriting dont j’ai besoin pour mapper le bouzin. Et paf ! un référencement dans les choux qui a pesé lourd sur les visites en provenance de Google. Je découvre ensuite le plugin Redirection qui me permets de récupérer un peu de trafic en provenance des sites qui avaient fait des liens vers mes articles.

Les redirections 301 ont certainement permis à Google de retrouver ses petits car les visites en provenance du moteur reprennent leur vitesse de croisière. Malgré tout, le blog reste absent sur la requête CSS. Les choses évolueront tranquillement comme ça durant plusieurs mois.

Changer de template pour améliorer le référencement ?

Mars 2008 — Je me dis que les thèmes magazine sont idéals pour faire remonter des billets anciens qui en ont encore sous la botte (ou le taillon aiguille, selon votre sensibilité). Sur ce blog par exemple, l’essentiel des tutoriels HTML et CSS avec des exemples grandeur nature ont été rédigés pendant ma première année de blogging. A cette époque, les visiteurs étaient peu nombreux et il est plus que probable que quelques bons tutos aient été privés de backlinks.

Je passe une bonne partie de ma réflexion sur les thèmes magazine à tester différentes manières de faire remonter les bonnes feuilles d’un blog afin d’augmenter le nombre de pages vues et le temps passé sur le site. L’objectif étant de faire baisser un taux de rebonds qui frise parfois les 70% ! Il est très probable que Google utilise ces paramètres pour déterminer l’intérêt réel d’un site après que l’internaute a cliqué sur le lien qui lui semblait le plus pertinent.

Le menu à onglets au service du SEO

Début juillet 2008 — Je me décide enfin à transformer ce blog en blogzine : je mets en place un menu à onglets pour optimiser l’espace disponible pour afficher  :

1. Les catégories,
2. Les derniers billets,
3. Les articles les plus commentés,
4. Les derniers commentaires avec les liens vers les sites des commentateurs et l’adresse du billet commenté à l’aide du plugins Get Recent Comments,
5. Les tags grâce à la fonction avancée de Simple Tags.

La sidebar étant moins large sur les pages statiques et d’articles, je conserve uniquement :

1. Les rubriques,
2. Les derniers billets
3. Les articles les plus commentés,

L’idée est la suivante : les visiteurs (plus de 60% du total) arrivant directement sur ces pages via Google se feront rapidement une idée sur les contenus disponibles et parcourront les pages du blog pour faire chuter le taux de rebond !

Mi-juillet 2008 – Je remplace les articles les plus commentés par une double liste : les articles les plus lus depuis 6 mois, et les billets possédant le meilleur PostRank pour le mois en cours.

9 août 2008 – Le nombre de pages vues a progressé. Par curiosité, je modifie à nouveau l’ordre des éléments présents dans ces 5 onglets avec dans l’ordre :

1. Les 50 tags les plus courants affichés par défaut avec Simple Tags,
2. Les catégories,
3. Derniers billets publiés,
4. Liste des articles les plus lus depuis 6 mois, suivie de la liste des billets ayant le meilleur PostRank dans le mois en cours.
5. Les derniers commentaires.

L’idée est de voir si les visiteurs cliquent plus facilement sur les catégories parce qu’elles sont visibles ou s’ils iront les chercher dans l’onglet d’à côté. En même temps, je teste le pouvoir de cliquabilité des pages qui suivent un clic sur un tag par rapport à celles qui suivent un clic sur les catégories.

Des résultats ?

L’article sur les Trucs et astuces CSS (qui faisait partie des plus lus depuis les 6 derniers mois) c’est naturellement retrouvé dans le 3ème onglet ainsi que dans les SERP autour de la 5ème page sur la requête CSS. La page d’accueil déjà présente sur cette requête n’a pas disparue pour autant.

Ce qui est étonnant, c’est la rapidité avec laquelle Google semble avoir pris en compte cet article pour le propulser aussi haut, sachant que sur des requêtes généralistes à mot unique, Google privilégie plutôt les sites anciens avec un PR5 au moins.

Bon, en même temps, rien ne garantie que cette page tiendra longtemps cette position. A surveiller, donc.

Les tags, c’est bon, mangez-en !

Le deuxième point que je voulais partager avec vous, c’est la force des tags et la gourmandise dont fait preuve Google à leur égard. Sur ce blog, les tags n’ont pas toujours existé et j’ai pu observer que Google les indexait très rapidement en leur réservant un traitement de faveur. Pour une courte durée, certes, mais une partie des positions prises par les tags peuvent être occupées par des articles.

Comme si Google faisait un galop d’essai avec des URL de type monblog.com/tag/montag pour voir quels billets vont tirer leur épingle du jeu pour afficher ensuite une URL comme monblog.com/monbillet sur la même requête. Ce qui ne signifie pas pour autant que les auto-tags soient une bonne chose. Ça ralentit la lecture et c’est déceptif pour le visiteur qui s’attend à trouver une ressource unique et pertinente au lieu d’une liste de billets en plein milieu de sa lecture.

Le hasard fait bien les choses, parait-il…

Outre la mise en avant des tags dans le menu à onglets, j’ai utilisé les tags pour faire remonter les tutoriels toutes catégories confondues en utilisant le tag “Tutoriels” qu’ils ont en commun. Le but est d’améliorer la densité des termes liés à l’intégration HTML et CSS, à WordPress et au graphisme, qui forment le cœur de la ligne éditoriale de ce blog. Pour éviter d’encombrer la page d’accueil, je n’affiche qu’un seul article au hasard parmi ceux qui sont taggués “Tutoriels” car il n’y a pas que Google qui visite ce blog…

Réorganisation de la page d’accueil — mise en silo (siloing)

La densité blogale globale des mots-clés pertinents (au regard des objectifs SEO fixés), peut servir de fil conducteur pour organiser la mise en page. Pour cela, il faut analyser les thèmes abordés et les traitements éditoriaux qui leur sont réservés. Tout dépend de votre ligne éditoriale et il n’y a pas vraiment de recette toute faite. Voici cependant deux ou trois questions pour guider votre réflexion :

• Vos billets sont ciblés et ont demandés peu ou prou le même travail rédactionnel et vous publiez régulièrement ? Vous n’avez probablement pas besoin de réorganiser votre blog en profondeur.
• Vous manquez seulement de régularité ? Vous pouvez vous contenter d’afficher l’intégralité de votre dernier billet sur la page d’accueil avec des liens vers vos anciens billets accompagnés d’un extrait, ou afficher les billets entiers les uns à la suite des autres (au risque de lasser vos visiteurs et de décourager la navigation pifométrique : le scrolling vertical)
• Vos billets sont composés d’articles de fond, de tutoriels, de brèves, de présentation de services, de listes de liens ? Vous êtes bon pour le thème magazine ;)

Densité de mots-clés ?

Pour en savoir plus sur cette fameuse densité de mots-clés, je vous invite à lire ce billet de bababillgates paru dernièrement à propos du siloing pour améliorer le référencement d’un blog sur un certain nombre de mots-clés en fonction d’un objectif de vente.

Le contenu en Silo ou le Siloing est une manière de structurer son blog pour permettre aux moteurs de recherche de reconnaitre que votre blog est lié à des mots clés ciblés. Cela vous permet d’être reconnu comme l’expert dans le domaine ou le sujet traité.

Les techniques préconisées par SeoMan sont plus ou moins celles que j’applique sur ce blog :

Les Tags,

Les Catégories,

Les Annuaires de produits (un peu obsolète mais utile dans ce cas),

Plugin Posts Relatifs (Wordpress) / lié aux Tags,

Lier uniquement à vos Landing Pages en utilisant des mots clés ciblés,

Créer un sitemap pour chaque page de votre SILO,

La gestion des Landing Pages (plugin  Wordpress par exemple).

Trois remarques :

1. Je ne suis pas totalement convaincu par les annuaires de produits, mais j’imagine que c’est ce qui remplace la blogosphère en terme de backlinks…
2. Pour profiter au mieux des plugins billets en relation et assimilés, il faut être rigoureux sur le tagging sous peine de voir apparaitre des billets à côté de la plaque. Ce qui est assez déceptif pour le visiteur et donne de surcroit une impression de bricolage nuisible à l’image du site : quelque chose semble cassé (ou alors il faut changer d’intitulé pour la liste).
3. Bien que je ne l’utilise pas, je ne doute pas de l’efficacité du plugin Landing Pages. Mais je n’ai pas encore trouvé de blog qui parvenait à l’intégrer harmonieusement Landing Pages. Rien que le fait de placer la liste des billets répondant à la requête du visiteur au-dessus de l’article que Google à daigné placer devant les yeux du visiteur est une hérésie. Par ailleurs, ceux qui utilisent ce plugin ont souvent des pages surchargées et il ne fait (amha) qu’ajouter à la confusion.

Grâce à Simple Tags, j’ai commencé un travail fastidieux : renommer certains tags, en supprimer d’autres, ajouter des tags à d’autres tags, jusqu’à obtenir des billets un peu plus en relation ! La restriction du nombre de mots-clés peut paraitre en contradiction avec la mise en silo qui demande des tags précis et nombreux. C’est une juste une question d’équilibre ;)

Conclusion

Ces quelques notes partent un peu dans tous les sens, mais cette impression reflète bien la réalité du référencement qui est fait des petites attentions portées à la rédaction des contenus et des micro-contenus, à l’ergonomie, aux statistiques, à la mise en page, à la promotion du blog, à la structure du site, etc. Référencer un site ou un blog, c’est être au four et au moulin tout en gardant un oeil sur l’horizon.

PS : la mise en gras de certaines portions de phrase est censée faciliter une lecture transversale. N’hésitez pas à me dire ce que vous en pensez ;)

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• Résultats du concours de référencement zobibi (4)
• Et si nous aidions Google à mieux indexer nos sites ! (0)
• Adriana K, Google et balises meta dans DotClear (18)
• zobibi (49)
• WordPress 2.6 — un nouveau “tag” conditionnel avec has_tag() (4)

5 défis réalisés

1. Avoir la plus grosse grosse liste de toute la blogosphère francophone :D En effet, cette liste a bénéficiée d’une bonne couverture blogosphérique. Merci à tous !
2. Écrire un billet sur les résultats retournés par Google sur les 26 lettres de l’alphabet — analyse et screenshots compris. Commencé par le plus grand des hasards, ce billet s’est révélé assez laborieux à terminer. Néanmoins, n’écoutant que mon courage, je suis allé jusqu’au bout, pour toi, lecteur !
3. Rédiger un billet de plus de 4300 mots sur les outils de mesure d’audience et Google. Pareil que pour le point n°2 : chaque fois que je tombe dessus, je me dis que je dois être un peu fêlé quelque part ^_^v
4. Avoir suivi une ligne rédactionnelle homogène depuis le début (intégration HTML et CSS) tout en élargissant les sujets à WordPress, à la rédaction web, au (web)design et aux problématiques du développement web en général. Pas peu fier de n’avoir jamais encore parlé de… Hé, hé… ben non, vous ne m’aurez pas comme ça :D
5. Accueillir un lectorat de qualité dont les commentaires sont souvent subtils et pertinents. C’est pour ça que je garde le design des commentaires aussi sobre que possible pour ne pas trop faire de différence entre la participation des lecteurs et le texte lui-même.

5 défis à venir

1. Avoir une audience en progression constante,
2. Rédiger un article encore plus populaire que la grosse grosse liste,
3. Avoir un jour plus de 101 commentaires sur un billet — peut-être à l’occasion du point précédent ;)
4. Écrire un tutoriel sur le trio HTML, CSS et jQuery,
5. Refaire des tutoriels sur Photoshop.

Pour conclure

Peu de chiffres, au final. Même si je suis content des plus de 1450 abonnés au flux RSS, et des presque 1 000 visites par jour (les bons jours…), je n’ai pas vraiment blogué pour ça : c’est la cerise sur le gâteau qui fait qu’on a envie de se resservir… Idem pour “ma” place au classement Wikio : j’en suis très content, mais j’ai conscience que ça  peut s’arrêter d’un mois sur l’autre !

Bon, voilà, comme c’est une chaine, je passe le relais à  expressions.be, laurent-lx.be, Matthieu M., Bertrand Soulier et Brice.

Ca peut vous intéresser »

• Une chaine pour libérer 5 blogs de mon Google Reader ? (4)
• Mon manque à bloguer ? (6)
• Mes 6 manies à moi que j’ai ? (20)
• Kawa-Yaka ? Sortons le plumeau du placard… (23)
• Cinq choses que vous ne savez peut-être pas sur moi (13)

Comment utiliser has_tag() ?

Contrairement à is_tag() qui permet d’afficher un contenu spécifique lorsqu’une page de tags est demandée et qui peut être placé n’importe où dans votre template, has_tag(), qui est très utile pour détecter si un billet contient un ou plusieurs mots-clés, doit se situer dans la boucle Wordpress.

Pour ce faire, il suffit d’ajouter le code suivant juste après la boucle while…

<?php while (have_posts()) : the_post(); ?>
    <?php if ( has_tag('News') ) continue; ?>

Plus d’informations

• has_tag() repère tous les billets avec un tag quelconque,
• has_tag('News') pour les billets tagués “News”,
• has_tag('News','Insolite','Humour') pour isoler les billets possédant tous les tags fournis en argument.
• MAJ : il semble que la ligne au-dessus ne fonctionne pas. Pour arriver au même résultat écrivez plutôt :

  <?php
      if ( has_tag('News') || has_tag('Humour') || has_tag('Insolites') ) continue;
  ?>

Pourquoi utiliser has_tag() ?

Dans le cadre de la réorganisation quasi-permanente de mon blog, j’ai fusionné les catégories En bref et News avec Revue de web pour réduire le nombre de rubriques. Or, seul le premier billet de cette catégorie doit s’afficher en haut du blog sous l’intitulé C’est vite dit… ; les anciens billets de cette catégories sont affichés plus bas dans la barre latérale.

Par ailleurs, pour garder une certaine cohérence avec les autres rubriques du blog, j’ai reclassé les billets appartenant auparavant à News dans des catégories plus précises. Ainsi, une News taguée “News” concernant WordPress est désormais classée dans… WordPress !

L’effet de bord, c’est que toutes les petites News se sont affichées dans la suite des billets du blog, ce que je voulais éviter pour des raisons esthétiques et éditoriales : je ne veux pas que le lecteur de passage qui atterrit sur la Home ait le sentiment que le blog est composé uniquement de petites brèves sans grande valeur ajoutée ;)

Dans un cas comme ça, has_tag() s’avère donc indispensable pour isoler tous les billets partageant les mêmes tags sans se soucier de leurs catégories respectives. WordPress, quelle souplesse !

Allez, has_fun() ^_^

Ca peut vous intéresser »

• WordPress 2.6 — Mes news carburent à “Press This” (chaine inside) (34)
• WordPress — Gérer les images avec les champs personnalisés (Customs fields) (37)
• Danse avec les loops #1 : un thème WordPress mis à nu (4)
• WordPress : masquer des billets seulement sur la “home” avec Sandbox (6)
• WordPress : astuces pour afficher une page "autonome" avec wp_list_pages() (9)

Ca peut vous intéresser »

• WordPress 2.6.1 (0)
• Screencast de WordPress 2.5 RC2 (1)
• Roadmap pour WordPress 2.7 (1)
• Revue de web de la semaine #2 (WordPress, développement web et miscellanées…) (7)
• Plugin WordPress — Calendarchives (9)

De nombreux thèmes à tendance “magazine” se servent des champs personnalisés pour afficher une image au-dessus d’un billet. Pour celà, il suffit par exemple de créer la clé illustration et de mettre l’URL de l’image en question dans le champs valeur.

Voici un exemple concret :

<?php $image = get_post_meta($post-&gt;ID, 'illustration', $single = true); ?>

Le contenu de la clé llustration est placée dans la variable $image pour pouvoir l’afficher plus loin :

<img src="<?php echo $image; ?>" />

Voilà, c’est déjà fini ?

Les problèmes commencent

Maintenant, il ne reste plus qu’à saisir l’URL de votre image dans la section Champs personnalisés en bas de l’interface d’édition du billet…

Oui, mais voilà, cette URL, vous ne l’a connaissez pas encore. En effet, WordPress s’occupe lui-même de l’emplacement de votre image dans un dossier du genre /blog/wp-content/uploads/2008/08/...

1ère solution : télécharger l’image via un client FTP

Certains ont résolu le problème en créant un répertoire dédié pour ces images et en les téléchargeant avec un client FTP. Mais à l’usage, ça reste très lourd au point d’enlever presque tout intérêt à l’affichage d’images par ce moyen.

<img src="mes-images/<?php echo $image; ?>" />

Toutefois, il existe une option sous forme de case à (dé)cocher (organiser mes fichiers envoyés dans des dossiers mensuels et annuels) pour mettre toute les images en vrac dans le dossier /uploads. Comme ça, il suffit d’ajouter le nom du répertoire dans le thème et de saisir le nom de l’image dans le champ valeur :

<img src="uploads/<?php echo $image; ?>" />

Le problème, c’est que toutes ces images en vrac, ce n’est pas vraiment une solution satisfaisante. Et puis, ça n’enlève rien au fait qu’il faut toujours télécharger les images à part, même si on économise la création d’un dossier ;)

2ème solution : utiliser la boite de dialogue prévue…

En réfléchissant un peu à la question, j’ai trouvé une petite astuce toute simple pour connaitre cette fameuse URL en évitant de mettre le bazar dans /uploads

1. Ajouter une image comme vous le feriez si vous vouliez l’afficher dans le billet,
2. Copier l’adresse de l’image qui apparait dans la boite de dialogue.
3. Fermer la fenêtre d’importation
4. Coller l’adresse de votre image dans le champ valeur à côté de la clé llustration dans les Champs personnalisé.

Voilà, c’est simple, efficace et sans bavure ;)

Pour la route :: Connaissez-vous Notorious Blog ? Mon dernier blog consacré au blogging et aux blogs d’entreprise

Ca peut vous intéresser »

• Danse avec les loops #1 : un thème WordPress mis à nu (4)
• WordPress 2.6 — un nouveau “tag” conditionnel avec has_tag() (4)
• WordPress 2.6 — Mes news carburent à “Press This” (chaine inside) (34)
• Quelques notes sur un thème magazine de A à Z — E comme épure (39)
• Mesure d’audience : des mots-clefs au ClickRank (15)

• FireFeed — Donne quelques informations sur flux RSS demandé, comme l’âge du flux en jours et la date de la première réception des données, le nombre d’abonnés et le taux de croissance, le tout accompagné de graphiques explicites.
• Feed Analysis — Affiche des graphiques montrant le nombre d’abonnés par mois, le nombre de hits, de vues et de clics quotidien, donne une idée de l’évolution du nombre d’abonnés pour les 12 mois à venir, le pourcentage d’abonnés selon le jour de la semaine. Un peu plus complet que FireFeed, Feed Analysis propose aussi une estimation de la valeur d’une bannière publicitaire et de la valeur globale d’un blog.
• FeedburnerStats –interface assez frustre qui donne un graphique de progression du nombre d’abonnés avec en prime la possibilité de survoler le graphique pour afficher la date et la circulation moyenne sur les dix jours précédents.
• Bookmarklet compteur feedburner — Ce bookmarklet (lien à glisser-déposer dans votre barre de liens) devrait vous permettre (une fois l’adresse d’un flux Feedburner affichée) de connaitre le nombre approximatif des personnes qui suivent le flux (circulation) ainsi que le nombre de requêtes qui ont été établies sur le flux Feedburner pendant les dernières 24 heures (hits).
• FeedCompare — Excellent outil pour comparer jusqu’à 4 flux RSS en même temps. Résultats sous forme d’un graphique très clair. Possibilité de choisir plusieurs périodes pour la comparaison. (Merci JB pour le lien).
• AideRSS — Service original utilisant différentes API publiques (dont celle de Feedburner) pour déterminer le PostRank des billets d’un blog. Lire le compte-rendu très complet chez Ronan. Outre les informations disponibles sur le site, il existe un plugin Firefox pour Google Reader ainsi qu’un widget pour votre blog (voir l’onglet Best of sur mon blog). Permet aussi de filtrer un flux RSS pour ne conserver que les meilleurs articles !

Ressources trouvées en partie sur Blog ToolBox et xhark. Lire également ce billet très instructif de Christophe sur la manière d’utiliser ces outils pour démasquer les trafiquants de compteurs FeedBurner.

Ca peut vous intéresser »

• Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader (5)
• Protégez votre flux RSS avec l’authentification HTTP de FeedBurner (6)
• Oh, Il a bon dos le Web 2.0 ! (52)
• Mon manque à bloguer ? (6)
• Intéressés par la monétisation de votre contenu ? Jettez un oeil sur Google AdSense (3)