Astuces

Ajouter un diaporama (Slideshow) avec Google AJAX Feed API

webmasternic7918 — Sun, 29 May 2011 17:32:32 +0000

Sommaire

1. Introduction	2. Inclure le code de fonctionnement
3. Définir le style du diaporama	4. Flux Media RSS
5. Insérer votre diaporama

Introduction

Il est possible d’insérer dans son blog ou son site un diaporama en utilisant un Flux Media RSS et la bibliothèque Google Ajax Feed API.

Inclure le code de fonctionnement

Il vous suffit d’inclure entre les balises head les liens vers les fichiers de fonctionnement de votre diaporama; soit :

Définir le style du diaporama

Créer une classe pour définir le style de votre diaporama. Vous pouvez aussi placer votre style entre les balises head – ce qui donne :

.gss a img {width:190px;
height:130px;
border : none;
}
 
.gss {display: block;
margin-bottom:15px;
width: 200px;
height: 146px;
background-color: black;
padding: 0px;
}

Pour que votre diaporama fonctionne correctement sous Google Chrome, il est recommandé de définir une largeur et hauteur pour la class ".gss a img".

Flux Media RSS

C’est à partir de cette source que vous pourrez récupérer les images pour les afficher dans votre diaporama. Il s’agit d’un fichier au format XML. Si par exemple vous utilisez le plugin NextGenGallery sous votre site réalisé avec WordPress, vous pourrez récupérer le flux à l’adresse suivante : http://www.votredomaine.com/wp-content/plugins/nextgen-gallery/xml/media-rss.php.

Intégrer le script

Ajouter entre les balises head le code suivant :

Sous la fonction load_slideshownicolas79 il a été défini une variable feed_nextgengallery accueillant l’adresse de votre flux Media RSS.

L’objet options intègre les paramètres de votre diaporama. Le guide du programmeur des Google AJAX Feed API donne les détails nécessaires aux options à définir.

Insérer votre diaporama

Dans votre code html, il vous suffit de déclarer le bloc qui va accueillir le diaporama; à savoir :

1	En cours de chargement...

Vous pouvez voir le résultat sur le site www.nicolas79.ch où il a été intégré sous la barre latérale un diaporama d’images.

Détails : Google AJAX Feed API

Aligner correctement les images dans son flux RSS sous WordPress

webmasternic7918 — Sun, 22 May 2011 14:03:53 +0000

Vous l’aurez peut être remarqué si vous utilisez des images pour illustrer vos articles ou pages, l’alignement de vos images n’est pas repris correctement dans votre flux RSS.

Si vous développez votre site avec WordPress, il est recommandé d’utiliser le plugin Align RSS Images.

Après l’avoir activé, ce plugin va corriger l’alignement et les marges de vos images afin qu’elles s’affichent correctement dans le flux RSS.

En fait, la fonction développée pour ce plugin va détecter dans votre code HTML les styles définis dans votre feuille de style principale en ce qui concerne l’alignement de vos images et va ajouter un style correspondant à la balise IMG.

A noter que selon les styles définis pour votre thème WordPress, vous devrez peut être modifier les paramètres du fichier de la fonction intitulé rss-image-align.php enregistré dans le répertoire du plugin Align RSS Images.

En effet, si vous insérez des images dans vos articles ou pages depuis le plugin NextGen Gallery – des classes de style ont été prédéfinies pour ce dernier et devront être ajoutées au fichier rss-image-align.php sous "$explicit_alignment_styles = array("[...]"). Dans mon cas j’ai ajouté aux éléments définis par l’auteur du plugin, les classes correspondant au plugin NextGen Gallery (ngg-[...]), soit :

 $explicit_alignment_styles = array(
'ngg-left' => 'float: left; margin-right: 10px;',
'ngg-right' => 'float: right; margin-left: 10px;',
'ngg-center' => 'display: block; margin-right: auto; margin-left: auto; text-align:center; width:320px; height:240px;',
'ngg-left' => 'float: left; margin-right: 10px;',
'alignleft' => 'float: left;',
'alignright' => 'float: right;',
'aligncenter' => 'display: block; margin-right: auto; margin-left: auto;',
'centered' => 'display: block; margin-right: auto; margin-left: auto;',
'img.alignleft' => 'padding: 4px; margin: 0 7px 2px 0;',
'img.alignright' => 'padding: 4px; margin: 0 0 2px 7px;',
'wp-caption' => 'border: 1px solid #dddddd; background-color: #f3f3f3; padding-top: 4px; margin: 10px; text-align:center;',
'p.wp-caption-text' => 'padding: 0 4px 5px; margin: 0;', );

Il est bien clair que dans les éléments de styles spécifiés à droite des classes vous pouvez personnaliser l’alignement des images pour votre flux RSS.

En ayant cherchez pendant plusieurs heures la solution, il est conseillé de spécifier la largeur et la hauteur de votre image pour le centrage de votre image.

Vous pouvez constater le résultat sous le flux RSS du site www.nicolas79.ch.

Télécharger le plugin Align RSS Images

Répondre à des questions de culture générale avec Google Documents

webmasternic7918 — Mon, 25 Apr 2011 15:39:10 +0000

En principe une feuille de calcul créée avec Google Documents peut recevoir des textes, des nombres et des fonctions de calcul, comme n’importe quel tableur, mais saviez-vous que grâce à une fonction il est possible de répondre à des questions de culture générale.

En effet, la fonction GoogleLookup tente de répondre à vos questions à partir d’informations provenant d’Internet. Il peut s’agir d’informations sur des peuples, des lieux ou des faits, comme la population de la Chine, la capitale de la France, ou encore le lieu de naissance de John Lennon.

Dans une cellule, il vous suffit de saisir la formule suivante : =GoogleLookup("china";"population") et validez. Après quelques secondes, le résultat s’affiche.

Si vous faites des statistiques cet outil peut être utile, car les valeurs sont automatiquement mises à jour.

La fonction GoogleLookup utilise deux arguments (ce sont les mots placés entre guillemets), soit l’élément sur lequel porte la recherche (ici china) et le type de valeur cherchée (ici population).

Il y a quelques contraintes à l’utilisation de cette fonction, en premier lieu les mots-clés doivent être saisis en anglais (vous en trouverez une liste dans l’aide en ligne de Google Documents). En outre, le service n’est qu’au stade expérimental, ce qui explique quelques lenteurs… ou incohérences. D’ailleurs, Google prévient les formules que vous essayerez ne donneront pas toutes des résultats, mais vous encourage à faire des expériences.

4 conseils pour mieux référencer ses images

webmasternic7918 — Sun, 13 Feb 2011 17:56:37 +0000

Sommaire

1. Introduction	2. Nom de l’image
3. Format de l’image	4. L’attribut ALT (texte alternatif)
5. Le texte du lien

Introduction

La recherche d’images sur le web est en constante progression. Pour pouvoir augmenter le trafic sur son site web, il est donc primordial d’optimiser le référencement des fichiers images.

Les critères pris en considération par les moteurs de recherche sont principalement : le nom de l’image, le format de l’image, le texte alternatif, le texte du lien.

Nom de l’image

Fournissez toutes les informations possibles concernant votre image. C’est pourquoi, il est recommandé d’attribuer des noms détaillés et informatifs à vos fichiers images. Vous pouvez même y inclure des mots-clés : chine-grandemuraille.jpg, shanghai.jpg, etc…

A noter que les noms d’image n’acceptent pas les caractères accentués. Pour séparer vos mots, vous pouvez utiliser le tiret (-) ou l’underscore (_). Evitez donc les mots collés. En effet, si vous séparez les mots, vous les rendrez réactif lors d’une recherche.

Format de l’image

Il est préférable d’utiliser le format GIF ou JPG pour vos images. Certains moteurs comme Google peuvent indexer d’autres formats comme le PNG mais les formats GIF et JPG sont les plus utilisés.

Le format GIF utilise 256 nuances de couleurs et il est le format employé pour les éléments graphique de navigation (boutons, puces, etc…). Quant au format JPEG il utilise 16 millions de couleurs environ et il est utilisé pour l’affichage de photographies.

En fait, si votre image est de grande taille, il sera pertinent d’utiliser le format JPEG.

Lors de l’insertion de vos images n’oubliez pas d’indiquer dans votre balise la largeur (width) et la hauteur (height) cela aidera le moteur de recherche à déterminer le format de l’image.

L’attribut ALT (texte alternatif)

L’attribut ALT (texte alternatif) permet d’intégrer un texte de remplacement pour les images, indispensable pour des questions d’accessibilité mais également de référencement sur les moteurs d’images. Il est donc important de créer un texte ALT pertinent.

En effet, il fournira à Google des informations utiles sur le sujet de l’image. Vous éviterez une accumulation de mots-clés, car votre site pourra être considéré comme du spam. Créer plutôt un contenu utile et pertinent en relation avec le contexte de la page.

1	<img src="Images/SalineArcSenans.jpg" alt="Saline royale d'Arc et Senans" width="300" height="203" />

Le texte du lien

Si l’image est affichée en cliquant sur un lien pour peut être obtenir une version agrandie de l’image, vous pourrez intégrer des mots-clés de recherche important dans le texte du lien pointant sur l’image. Pour renforcer le lien n’hésitez pas à mettre le texte en gras. Ce qui donnera :

1	Visualisez <strong><a href="http://www.votresite.com/images/SalineArcSenans.jpg" target="_blank">une image de la Saline royale d'Arc et Senans

Ce qui donnera comme résultat : Visualisez une image de la Saline royale d’Arc et Senans

Référencement web : comment optimiser le titre de votre page internet ?

webmasternic7918 — Wed, 21 Jul 2010 16:05:55 +0000

Sommaire

1. Introduction