Perso Web Management Prog Blogosphère Développement Etudes OS Sécurité Infographie Mobiles Référencement Divers

02 nov. 2009

Flickr widget, un plugin qui a la tête dans les nuages

Par Jean-Christophe Duvivier à 20:24

Mots Clés Dotclear, Flickr, Plugin, RSS, Widget, Wordpress,

Vous avez envie faire apparaître vos dernières photos de votre galerie Flickr tout en cassant la routine des widgets statiques, plats et monotones ? Alors vous devriez être intéressé par Flickr widget, un plugin développé par Roytanck.

Site internet de Roytanck

Ce widget est basé sur le même principe que les nuages de tags que l'on peut trouver depuis peu sur des applications Dotclear ou Wordpress : les photos de votre compte Flickr sont présentées sous la forme d'un nuage en 3D qui réagit au déplacement de la souris.

Les photos sont directement récupérées via les flux RSS générés par Flickr ce qui rend la mise en place de ce widget très simple, d'autant plus que Roytanck met à disposition un générateur dédié : il suffit de renseigner l'url du flux, les dimensions de votre widget et la couleur de fond pour obtenir l'intégralité du code source nécessaire à son bon fonctionnement. Ce générateur est disponible à l'adresse suivant : Flickr widget.

Une image vaut mieux qu'un long discours, voici le widget en action :

Roy Tanck's Flickr Widget requires Flash Player 9 or better.

Le net devenant de plus en plus accessible, il devient relativement difficile de ressortir de la masse de blogs présents sur le toile. Je vais vous faire part de petites astuces rapides à mettre en place afin de vous assurer davantage de visites ;)

Ces astuces ne concernent en aucun cas une logique de codage, tels que la mise en place de texte alternatif sur les images, l'ajout de titre aux liens hypertextes, l'ajout de meta tags etc. On sait tous que le référencement est une science inexacte et qu'il est difficile de connaître LA logique de codage parfaite, qui vous fera ressortir sur le net. Les astuces que je vais vous présenter fonctionnent, et pour cause, nous n'allons pas améliorer le contenu de vos pages pour faire ressortir certains mots dans les moteurs de recherche, mais nous allons tout simplement faire connaître vos pages aux moteurs de recherche.

Allons-y !

1ère étape : Les tags

Je vous arrête de suite, nous n'allons pas parler de meta tags, ou de choses inutiles. Je vais vous parler d'une chose à la mode en ce moment : le tagcloud, ou nuage de tags.

Nuage de tags

Leur fonctionnement est très simple. Un tag peut être rattaché à plusieurs billets, et un billet peut posséder plusieurs tags. Ainsi, votre nuage de tags vous permettra d'accéder aux articles liés au tag sur lequel vous cliquez. Cela permet de générer du contenu régulièrement mis à jour, étant donné que chaque tag est susceptible d'être rattaché à de nouveaux billets.

Dans Dotclear et Wordpress, les tags sont gérés par défaut. Alors n'hésitez pas à rattacher une demi-douzaine de tags pour chaque article.

Mots Clés

2ème étape : L'url rewriting

Moins connu que les tags, mais d'une efficacité redoutable. Pour ceux qui ne savent pas ce que se cache derrière ce nom barbare, je tente une brève explication :

L'url rewriting permet de réécrire l'url de vos articles d'une façon plus pertinente. Prenons votre 3ème article, qui traite de la choucroute alsacienne. Dans un blog lambda, nous aurons ce type d'url : http://www.votresite.com/articles.php?id=3. Dans un blog utilisant l'url rewriting, on aura ceci : http://www.votresite.com/choucroute-alsacienne.html.

Url Rewriting

Où est l'intérêt ? Il y a quelques années, lorsque nous effectuions une recherche sur un moteur de recherche, ce-dernier associait nos mots clefs avec les meta tags des sites Internet référencés. Les webmasters, développeurs et compagnie ayant abusé de ces meta tags, en mettant des tonnes de mots clés, les moteurs de recherche se sont mis, petit à petit, à chercher directement dans l'url du site, ce qui révèle une certaine pertinence. Alors qu'un articles.php?id=3 ne veut rient dire, un choucroute-alsacienne.html ressortira beaucoup mieux sur le net.

Comment mettre en place l'url rewriting ?

Dotclear le gère automatiquement. Vous pouvez même choisir le format des url dans la gestion (Tableau de bord > Paramètres du Blog > Configuration du Blog). Je vous conseille le format "titre" qui vous permettra d'alléger vos url (en enlevant la date), et les rendre ainsi plus pertinentes.

Concernant Wordpress, je vous renvoi vers un très bon tuto, rédigé par Benjamin Agullana : Url Rewriting sous Wordpress.

Sous SPIP, il vous suffit d'utiliser les url propres (me demander comment faire si besoin).

À noter que tous les hébergeurs ne sont pas compatibles avec l'url rewriting (en particulier les hébergeurs gratuits).

3ème étape : Les sitemaps

Avant de vous parler des sitemaps, je vous demande, s'il vous plait, pour votre bien, et si vous ne en possédez pas encore un, de vous procurer un compte Google et de mettre en place les "Outils pour Webmasters".

Qu'est-ce-qu'un Sitemap ? Tout simplement un plan de votre site. Il se présente sous la forme d'un fichier xml qui renferme, entre autres, toutes les url de votre site. Il permet à Google d'indexer plus rapidement vos pages, en lui faisant connaître.

Si vous êtes l'heureux possesseur d'un blog Dotclear, je vous encourage, et vous demande même, d'installer l'excellent plugin Sitemap de Pep, téléchargeable à cette adresse : Plugin Sitemap par Pep. Une fois installé, rendez-vous dans le nouveau menu "Sitemaps", dans votre liste de menus à gauche, et cochez la checkbox "Permettre les sitemaps". Vous pouvez de plus régler le niveau d'importance des tags, billets, pages etc. Enregistrez la configuration et c'est terminé de ce côté là.

Plugin Sitemap

Ensuite, rien de plus simple. Rendez-vous dans vos "Outils pour Webmasters", ajoutez votre site si ce n'est déjà fait, et ajoutez votre sitemap dans la rubrique "Sitemaps". Il se nomme sitemap.xml et se trouve à la racine de votre site.

Outils pour Webmasters

Dès a présent, tous vos billets, tags, pages etc. seront constamment soumis à Google, qui les indexera.

Pour les adeptes de Wordpress ou de SPIP, sachez qu'il existe des plugins équivalents à celui présenté pour Dotclear. Cherchez un peu et vous trouverez ;)

4ème étape : Les mises à jour

Un site non mis à jour qui présente un contenu pertinent sera moins bien référencé qu'un site présentant un contenu moins intéressant, mais régulièrement mis à jour. Il est donc nécessaire de mettre votre blog à jour régulièrement. En plus de présenter à Google des pages différentes à chaque visite, il vous permettra de rajouter du contenu, de créer de nouvelles pages et donc d'être davantage présent sur le net ;)

Et voilà ! Rien qu'avec ceci, sans charte de codage particulière, vous pourrez vous hisser dans les premières pages de Google ;) À titre d'info, j'ai créé ce blog en octobre et ai aujourd'hui plus de 3000 visites par mois (source : Google Analytics).

Si vous avez des questions, réflexions etc., n'hésitez pas à vous manifester à la suite de l'article ;)

05 nov. 2008

Devlisting, la panoplie du bon développeur web

Par Jean-Christophe Duvivier à 19:48

Mots Clés Ajax, CMS, CSS, Firefox, Flash, Java, Outils, PHP, Plugin, Ressources, SQL, Typos,

Je vous parlais récemment des Plugins Firefox que j'utilise régulièrement pour me faciliter la tâche dans le développement de mes appli. J'avais précisé qu'il s'agissait du minimum vital. J'ai entre temps découvert une liste non loin d'être exhaustive qui regroupe tous les Outils, Ressources, sites web qui seraient susceptibles de vous aider dans votre boulot. Il s'agit de Devlisting.

Vous y trouverez des tonnes de liens, classés par catégorie. Au programme : CSS, PHP, Ajax, Flash, Typos, CMS, Java, SQL etc.

J'ai rapidement parcouru les différentes rubriques et j'ai découvert beaucoup de sites et de Plugins très intéressants ;)

Si vous êtes intéressés, ça se passe ici : www.devlisting.com

25 oct. 2008

Afficher les Gravatars sur Dotclear 2

Par Jean-Christophe Duvivier à 16:47

Mots Clés Blog, Gravatars, Plugin,

Après avoir vainement essayé d'intégrer un Plugin trouvé dans le fin fond du web afin d'afficher les Gravatars sur mon Blog, je me suis tournée vers la solution de prendreuncafe.com disponible ici : prendreuncafe.com.

Logo Gravatar

Voici la procédure à effectuer :

Dans le répertoire racine de votre thème actuel, créez un fichier _public.php et insérez-y le code suivant :

<?php
$core->tpl->addValue('gravatar', array('gravatar', 'tplGravatar'));
 
class gravatar {
 
  const
    URLBASE = 'http://www.gravatar.com/avatar.php?gravatar_id=%s&amp;default=%s&amp;size=%d',
    HTMLTAG = '<img src="%s" class="%s" alt="%s" />',
    DEFAULT_SIZE = '40',
    DEFAULT_CLASS = 'gravatar_img',
    DEFAULT_ALT = 'Gravatar de %s';
 
  public static function tplGravatar($attr)
  {
    $md5mail = '\'.md5(strtolower($_ctx->comments->getEmail(false))).\'';
    $size    = array_key_exists('size',   $attr) ? $attr['size']   : self::DEFAULT_SIZE;
    $class   = array_key_exists('class',  $attr) ? $attr['class']  : self::DEFAULT_CLASS;
    $alttxt  = array_key_exists('alt',    $attr) ? $attr['alt']    : self::DEFAULT_ALT;
    $altimg  = array_key_exists('altimg', $attr) ? $attr['altimg'] : '';
    $gurl    = sprintf(self::URLBASE,
                       $md5mail, urlencode($altimg), $size);
    $gtag    = sprintf(self::HTMLTAG,
                       $gurl, $class, eregi("%s", $alttxt) ?
                                      sprintf($alttxt, '\'.$_ctx->comments->comment_author.\'') : $alttxt);
    return '<?php echo \'' . $gtag . '\'; ?>';
  }
 
}
?>

Rendez-vous ensuite dans le squelette de votre choix (en général : post.html), et insérez-y le code suivant entre vos balises <tpl:Comments> et </tpl:Comments> :

{{tpl:gravatar class="CLASSE" size="TAILLE" altimg="URL_DEFAUT" alt="Gravatar de %s"}}

Il vous faut donc remplacer :

  • CLASSE par le nom de la classe affectée à l'image
  • TAILLE par la taille du Gravatar en px
  • URL_DEFAUT par le chemin d'accès à votre avatar par défaut (dans le cas d'utilisateurs ne possédant pas de gravatar)

23 oct. 2008

Plugins et outils indispensables aux développeurs web

Par Jean-Christophe Duvivier à 11:08

Mots Clés Ajax, CSS, DOM, Firefox, HTML, IE, JavaScript, Outils, Plugin, SeaMonkey,

Je vais vous présenter les Outils et les Plugins que j'utilise quotidiennement et qui représentent pour moi, le minimum vital à tout développeur web. Sans plus attendre, les voici :

1. Plugin Web Developer

S'il n'y en avait qu'un, ce serait celui-ci. Ce Plugin Firefox (également développé sur SeaMonkey) est une mallette à Outils très complète qui permet de répondre à nos besoins les plus récurrents. Voici les grands axes :

  • CSS : Possibilité de voir, désactiver et modifier les CSS d'un site web etc.
  • Formulaire : Possibilité de voir les mots de passe, de convertir la méthode de traitement etc.
  • Image : Possibilité de désactiver les images, d'afficher leurs dimensions, leur poid etc.
  • Informations : Possibilité de voir les id, les classes, les codes couleurs etc.
  • Et d'autres fonctionnalités : outils de validation, de redimensionnement etc.

Pour le télécharger en français, rendez-vous ici : Plugin Web Developer - Fr
Et pour la version anglaise c'est ici : Plugin Web Developer - En

2. Plugin Firebug

Logo Firebug

S'il y en avait un deuxième, ce serait celui-ci. Ce Plugin est un débuggeur évolué pour Firefox . Je vais reprendre la présentation de Geckozone :

FireBug vous permet d'explorer par clavier ou souris les coins les plus reculés du DOM. Tous les Outils dont vous avez besoin pour fureter, produire et controler votre JavaScript, CSS, HTML et Ajax sont rassemblés ensemble à travers une seule extension, incluant un débuggeur, une console d'erreur, une ligne de commande, et une variété d'inspecteurs intéressants…

Un rapide aperçu des fonctionnalités de FireBug :

  • Un débuggeur JavaScript pour naviguer pas à pas dans le code une ligne à la fois,
  • Un icône de barre d'état qui permet de voir rapidement s'il y a une erreur dans la page web,
  • Une console qui montre les erreurs JavaScript et CSS,
  • Messages de Log de JavaScript dans votre page web sur la console
  • Une ligne de commande JavaScript
  • Un espion du trafic XMLHttpRequest,
  • Un inspecteur de source HTML, styles associés, évenements, mise en page et le DOM.

Pour le télécharger en anglais, rendez-vous ici : Plugin Firebug - En

3. Plugin IE Tab

Une harmonisation de l'interprétation du code entre les différents navigateurs étant loin d'être prévue, ce petit outil devient indispensable. Il vous permet d'ouvrir une page IE dans un onglet Firefox.

Pour le télécharger en anglais, rendez-vous ici : Plugin IE Tab - En

4. Plugin Colorzilla

Ce petit plugin servira surtout aux designers web étant donné qu'il permet de récupérer le code hexadécimal d'une couleur par simple survol du curseur. Ça évite la manipulation contraignante du PRINTSCREEN > CTRL + V > PHOTOSHOP.

Pour le télécharger en anglais, rendez-vous ici : Plugin Colorzilla - En

5. Logiciel Multiple IE

Logo Internet Explorer

L'interprétation du code entre les différentes versions de IE étant sensiblement différente, il est souvent utile de contrôler ses applications sur différentes version de IE (la 6.0 et la 7.0 par exemple), ce qu'il implique qu'il faille contrôler son application sur 2 ordinateurs différents. Ce petit logiciel vous permet d'installer 5 versions de IE (IE3, IE4.01, IE5, IE5.5 et IE6) en plus de celle que vous possédez déjà (dans l'idéal : la 7.0).

Pour le télécharger en anglais, rendez-vous ici : Logiciel Multiple IE - En

Si vous vous servez d'autres plugins/outils/logiciels/sites web qui vous semblent utiles pour les développeurs web, n'hésitez pas à les citer à la suite de cet article ;-)

Propulsé par Dotclear - Hebergé par Infomaniak - Thème Green Mantis par jchristophe
© jchristophe.fr 2008 - 2009
Valide CSS 2.1 CSS 2.1 Valide XHTML 1.0 XHTML Strict 1.0 Flux RSS RSS