Si vous ne connaissez pas le principe de sprite CSS, je vous invite à lire ce billet chez Pompage. Pour résumer grossièrement, utiliser des sprites signifie regrouper tout ou partie de vos images dans une une seule et même image. Ceci pour limiter le téléchargement d’entête de chaque image qui finit par être lourd si le nombre d’image est conséquent. Cette technique n’est plus à prouvée et a été adoptée depuis longtemps par tous les géants du web (Google, YouTube, etc.)

Pour utiliser SpriteMe, il vous suffit d’ajouter le bookmark dédié en le glissant (drag) dans votre barre personnelle Firefox par exemple. Allez sur le site de votre choix et cliquer simplement sur le lien « SpriteMe » :

Essayons sur la FredZone qui a récemment opté pour un nouveau design (et ça faisait longtemps que je ne lui avais pas fait de backlink pour l’égometre) :

Cliquer sur Make all (ou Make Sprite) pour générer un fichier comportant toutes les images, la transparence étant supportée.

Et voici ce que l’on obtient comme image pour « notre » FredZone (la qualité de l’image est due à ma compression en PNG, aucune perte en réalité), cliquez sur l’image :

En cliquant sur Export CSS, on obtient le CSS correspondant avec la position de chaque image. Voici un extrait de notre exemple :

DIV id=haut
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -10px -650px;'
}
A sprite_global
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -1490px -1930px;'
}
A sprite_global
{
 background-image: url(http://www.fredzone.org/wp-content/themes/RealFredzone/img/sprite.png)
 background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/15fbcc17a2/spriteme1.png);
 background-position: -1915px -1930px;'
}

Notre exemple n’est pas excellent (non monsieur, ça ne vient pas de la FredZone, roh!) car certaines images dépendent des articles qui sont chronologiques, alors que les sprites doivent être utilisés sur des éléments fixes (fond, headers, images, etc) et n’évoluant pas dans le temps, à moins d’automatiser la génération des sprites…

Attention : SpriteMe ne semble pas fonctionner si vous utilisez des fonctions de minifications.

A voir également cette vidéo de présentation.

Inspiré d’un très bon billet chez Smashing Magazine

SpriteMe - FAQ

Article original écrit par Mr Xhark publié sur Blogmotion le 07/01/2010 | 6 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

KGen

Deux optiques d’utilisation sont envisageables :

• optimisation de votre référencement (SEO) ou
• analyse de la stratégie de vos concurrents.

Une fois l’extension installée il suffit de l’activer via le menu Affichage > Panneau latéral > KGen puis de cliquer sur Scanner ce document.

Voici le rendu pour Blogmotion :

Le mot « blogmotion » obtient le poids le plus important avec « seulement » 7 répétitions, voilà sûrement un début de réponse à ma récente question sur le référencement.

La plupart des autres mots correspondent au thème des derniers billets, ce qui est tout à fait logique pour un blog mais l’analyse serait totalement différente pour un site, car non chronologique. Un clic droit sur chaque mot vous emmènera sur une page associée à l’extension vous proposant diverses corrections, exemple ici.

Des statistiques sur les mots (total, conservés, richesse du vocabulaire), sur le document HTML et les caractères le composant ainsi que le taux de mots présents dans le dictionnaire sont présents.

Un nuage de mot clés, qui rappelle un peu celui de WordPress, est également disponible :

Je ne m’étais jamais rendu compte que j’utilisais un maximum le mot « vous » ! Mais à bien y réfléchir je vous parle souvent directement.

8 onglets au total permettent d’affiner et d’analyser le scan de façon pertinente :

Voici un (rapide) tour des fonctionnalités en vidéo par l’auteur de l’extension :

Conclusion

Bien que KGen ne permette pas de faire des miracles cette extension a le mérite d’exister. Les différents types de statistiques sont majoritairement intéressants et exploitables.

L’auteur est également l’auteur de BBComposer, une autre extension qui permet de rédiger du texte de façon WYSIWYG dans des zone de texte brute, très pratique .

KGen (Mozilla) – Site Officiel

Article original écrit par Mr Xhark publié sur Blogmotion le 14/10/2009 | 2 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Sans ce sitemap, les moteurs indexent votre site/blog en suivant les différents liens de votre site. De ce fait certaines pages ne sont tout simplement pas indéxées (ou mal positionnées)  car le nombre de liens menants à cette page est trop faible. En quelque sorte il force l’indexation de pages orphelines.

Un membre de SEOMoz a effectué des tests pour vérifier si l’utilisation d’un Sitemap avait un impact sur la rapidité d’indexation dans les moteurs de recherche Google et Yahoo.

Le temps d’indéxation est considérablement réduit si votre site comporte un sitemap : 10 fois plus rapide chez Yahoo et 100 fois plus rapide chez Google !

Sans sitemap :

Avec sitemap :

Personnellement j’utilise un maximum les sitemaps pour deux raisons : je n’ai constaté aucun impact négatif et c’est entièrement gratuit. A titre d’exemple, le sitemap de Blogmotion est ici.

Si vous utilisez WordPress je vous conseille fortement d’utiliser  le plugin Google XML Sitemaps qui permet d’informer les moteurs Google, Ask, Live et Yahoo de vos posts.

Pour informer Google de l’emplacement de votre sitemap ça se passe via les « Outils Google pour les webmasters« , un compte Google (gratuit) est requis.

Pour soumettre votre blog dans le moteur de recherche de blogs Google ça se passe cet outil en ligne.

Conclusion

Vous pouvez abuser des sitemap sans modération, veillez tout de même à ce que le contenu soit cohérant.

En complément, je vous conseille d’optimiser le fichier robots.txt dans lequel vous pouvez préciser les parties ou pages de votre site que vous ne souhaitez pas voir ressortir dans les moteurs de recherche grâce au mot clé « Disallow ». Gardez tout de même à l’esprit que ce fichier reste accessible à tout le monde et que de préciser des adresses de pages relativement sensibles (administration) est inutile si aucun lien ne pointe vers celles-ci (elle ne seront jamais indexées par les moteurs).

Pour générer votre sitemap il existe une multitude de site et logiciels sur le web

Source des images

Article original écrit par Mr Xhark publié sur Blogmotion le 08/01/2009 | 4 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons

Ces conseils sont tout à fait exhaustifs et témoignent de ma propre expérience en tant que webmaster de nombreux sites et surtout, blogueur depuis plus d’un an maintenant (que le temps passe vite…).

Le principe du blog restant de partager le savoir, ou du moins mes connaissances pour ne pas paraître trop prétentieux, je vous invite à compléter et/ou commenter cette liste qui je le rappelle, n’a rien d’officiel.

Voici mes 25 conseils (et plus) :

• Faites des liens vers de précédents billets avec des mots clés pertinents pour un bon référencement naturel
• Mettez les mots importants en gras, certains lisent vos billets en travers pour ne retenir que l’essentiel
• Affichez clairement le thème du blog (ex. « culture web et nouvelles technos »). Un petit encart de quelques mots sur l’auteur est également le bienvenue dans la sidebar (comme ici)
• Modifiez vos billets suite à un commentaire, une idée ou une suggestion d’un de vos lecteurs en le citant dans le billet. Cela incite votre lecteurs à être un maximum actifs (ça fait toujours plaisir de voir son nom apparaître dans un billet)
• Posez des questions directement dans vos billets pour que les lecteurs ayant une réponse la donne via les commentaires
• Ne pas hésiter à traiter un sujet même si vous pensez qu’il n’intéressera personne, tant qu’il reste « grossièrement » dans thématique du blog, limitez par contre sa longueur
• Donnez des titres tape à l’œil à vos billets en choisissant les mots les plus appropriés qui donneront envie de lire votre billet, exemple : »Les 5 meilleurs fonds d’écran du moment » ou « 10 astuces pour optimiser votre blog », etc.
• Mettez vous à la place de celui qui va rechercher dans Google certains mots clés précis pour tomber sur votre billet : utilisez ces mots en titre de billet, permalien, tags et/ou en gras dans le corps du billet.
• Coupez vos billets plusieurs parties portant un titre (<h1>,<h2>,<h3>, etc.). C’est à la fois bon pour la clarté et la lecture que pour les moteurs de recherches
• Une fois votre billet indexé par Google, entrez des mots clés susceptible d’être tapés par un utilisateur lambda. Ajoutez sur chacun des 10 premiers résultats l’adresse de votre billet (dans le cas d’un blog/forum). De cette façon Google associera votre billet à une adresse déjà mieux indexée que la votre
• Faites de la veille en vous abonnant aux flux RSS de nombreux blogs, « influents » ou non
• Rédigez des billets connexes en temps en heure sur le même thème que le billet d’un blog « concurrent » si le sujet n’a pas été abordé à de façon approfondie. Vous pourrez ensuite placer l’url de votre billet via les commentaires du blog en question, il éditera peut-être son billet en faisant un backlink vers le votre. Pensez aussi à donner l’url directe de votre billet plutôt que la homepage de votre blog
• Laissez des commentaires sur des blog tiers, certains diffusent le top des commentateurs avec à la clé un backlink vers votre blog. D’autre part les lecteurs sont parfois curieux et visiteront votre blog grâce à un de vos commentaires laissés sur un blog
• Lorsque vous postez un commentaire sur un blog tiers, ne répétez pas ce qui a déjà été dit 36 fois par d’autres commentateurs, essayez de sortir du lot pour que l’auteur, mais aussi les lecteurs, vous repèrent et cliquent sur le lien qui amènera jusqu’à votre blog
• Acceptez et corrigez vos erreurs (on peut se tromper par manque de temps), le lecteur apprécie d’autant plus la transparence. Si tout ce que vous écrivez est réel, une relation de confiance va s’installer et votre blog deviendra une des références de votre lecteur. C’est grâce à cette relation que le lecteur qualifiera votre blog de qualité.
• Rédigez vos billets sans faute d’orthographe et de grammaire (Firefox souligne les fautes d’orthographe à la rédaction) , faites de courtes phrases simples mais efficaces, variez votre vocabulaire, utilisez des synonymes
• Proposez régulièrement des opérations/concours avec des récompenses à la clé. Elles peuvent être matérielles si votre blog est conséquent grâce à des partenaires, mais aussi publicitaires : proposez un affichage d’une semaine dans un carré 125×125 par exemple
• Mettez en valeur l’activité (au sens actif) communautaire de votre blog : affichez les derniers commentaires, le top des commentateurs, des liens vers d’anciens billets non chronologiquement dépassés, etc.
• Proposez une section communication dans une page dédiée aux différents moyens d’abonnement du blog : email, rss, twitter, mobile, etc.
• Donnez des noms explicites à vos images pour un meilleur référencement
• Ne rédigez pas de longs billets si ceux-ci n’intéressent que une petite partie de votre lectorat, c’est une perte de temps ! Soyez précis et concis !
• Faites vos propres captures d’écran, voir les mêmes captures sur tous les blogs n’interpellera pas vos lecteurs
• Ne coupez PAS vos flux RSS, il n’y a rien de plus désagréable… Ca gonfle votre nombre de pages vues, mais il n’y a pas qu’elles que ça gonfle…
• N’affichez pas votre billet en totalité sur la page d’accueil, coupez la partie au bon moment pour donner envie aux lecteurs de « cliquez ici pour lire la suite ». Si vous êtes sous WordPress vous pouvez utilisez la fonction excerpt() au sein de votre thème.
• Ne faîtes pas de relai d’information, informez !
• Soyez régulier votre rythme de publication de vos billets, 7 billets par semaine me semble un minimum, 20 me semble un maximum, 14 me semble être un bon rythme. Ne rédigez pas trop de billets, vos lecteurs n’ont peut être pas le temps de tout lire et risque de rater d’importants billets !

Enfin la condition nécessaire à tout billet : soyez motivé et passionné par le travail que représente la maintenance et la publication sur votre blog. Dans le cas contraire, inutile de continuer car de toutes façons ce sentiment de baclage de sentira à travers votre plume.

Ne dites pas à vos lecteurs que vous manquez de temps pour écrire, et surtout ne vous excusez-pas ! Vous n’avez aucun compte à rendre ni aucun contrat vous liant à vos lecteurs. Il en va de votre notoriété.

Conclusion

On peut faire l’analogie du blog avec un médicament : ne bloguez pas à la légère, tout en gardant à l’esprit que bloguer peut vous guérir de divers maux et constituer une bonne (blogo)thérapie : orthographe, rédaction, communication, développement personnel, point de vue, recul, prise de position, etc.

Enfin, restez vous-même et ne réagissez pas aux commentaires négatifs en prenant sur vous, ça peut causer des dégats. Distinguez vous des gens qui viennent sur votre blog juste pour casser du sucre et s’il le faut tournez vos réponses au 3ème degré

Je tiens à préciser que je n’ai pas encore pu appliquer tous ces conseils et techniques sur Blogmotion (par manque de temps). Cette liste sera amenée à évoluer et je vous invite d’ores et déjà à donner vos astuces ou argumenter certaines.

Par petit clin d’oeil à Thierry, je vous invite également à lire sa réfléxion pour « bloguer sérieux« .

Article original écrit par Mr Xhark publié sur Blogmotion le 26/12/2008 | 18 commentaires |
Attention : l'intégralité de ce billet est protégée par la licence Creative Commons