Goudie.biz - Internet

Faire des économies vos achats en ligne avec Remises & Réductions

Goudie — Wed, 17 Apr 2013 14:57:00 +0200

De manière générale, les achats sur internet permettent de faire de bonnes économies sur une très grande variété de produits. Aujourd'hui, tout peut s'acheter par internet : high-tech, fleurs, nourriture, voitures, vêtements ou encore voyages.

N'ayant pas les contraintes physiques d'un magasin standard In Real Life, les sites de e-commercent proposent donc de meilleurs tarifs. Mais comme un prix n'est jamais trop bas, il existe des sites de "cashback" et autres "bons de réductions", permettant d'alléger encore un peu plus la facture de votre shopping virtuel.

Remises & Réductions et l'un de ces sites. Comment cela fonctionne ? Le "cashback" est un remboursement qui s'effectue après l'achat de votre bien via le site Remises et Réductions. Prenons un exemple avec un site que j'affectionne particulièrement puisque j'y ai acheté mes deux précédents ordinateurs portables : Dell.fr

Si autrefois, le site de Dell proposait de nombreuses remises et codes promo de 10% sur ses modèles, c'est devenu de plus en plus rare. En passant par le site Remises et Réductions (Dell fait partie des sites qui figurent dans la rubrique High-Tech du site) je suis alors redirigé sur le site de Dell, en étant assuré d'obtenir 10% de "cashback" avant même d'avoir fait mon choix. Il faut savoir que cette réduction s'ajoute aux éventuelles remises sur les produits Dell.

En plus des "cashback", le site propose aussi des réductions immédiates, autrement dit des codes promo à utiliser directement chez le marchand, en voici quelques uns :

Trop beau pour être vrai ? Non, puisque le site Remises & Réductions fonctionne grâce à un système d'abonnement. Si les 30 premiers jours sont gratuits, il faudra ensuite dépenser 12 euros par mois (à renouveler chaque mois). Le site peut donc vous être utile pour un achat de grande valeur, mais il sera surtout très avantageux si vous achetez beaucoup (et souvent) sur internet. Un autre bon plan et une remise de plus, c'est toujours bon à prendre !

Résultats de recherche Google enrichis Maps et Google+

Goudie — Sat, 09 Jun 2012 15:56:00 +0200

Quelqu'un m'a fait remarquer un truc marrant, en recherchant "Goudie" sur Google, une grosse carte Google Maps apparaît sur le coté avec un repère sur ma forêt.

En cliquant dessus on est dirigé vers Google Maps, et en appuyant sur le nom du repère on est envoyé sur une page Google+ créée automatiquement.

Plutôt pratique pour donner son adresse à quelqu'un facilement (recherche-moi sur Google...) j'ai quand même du mal à comprendre comment Google a déterminé que "Goudie" est ici. Quoique je bouge souvent ces temps-ci donc ce n'est pas super fiable.

J'ai aussi remarqué que le résultat enrichi n'apparaît que lorsque l'utilisateur qui recherche "Goudie" est à proximité du lieu, c'est à dire localisé en Ille-et-Vilaine.

Voilà, rien d'important à signaler, c'était ma petite constatation amusante du jour, et ça méritait une petite photo souvenir, vu la fréquence à laquelle l'interface de Google est bouleversée et modifiée.

Générer des miniatures avec un script PHP (exemple Dotclear)

Goudie — Sat, 12 May 2012 00:18:00 +0200

L'un des petits trucs qui m'agace depuis très longtemps avec Dotclear, c'est qu'on ne peut pas générer de miniatures avec un ratio personnalisé. On peut bien sûr choisir la taille maximale des formats medium, small et thumbnail, mais on ne peut pas générer d'images carrées, par exemple. Le format square généré est lui bien carré mais il est tout petit, et on ne peut le modifier sans toucher au code de Dotclear. Il y a bien un plugin pour définir de nouveaux formats de miniatures, mais ça ne règle toujours pas le problème du ratio (hélas).

Les raisons d'avoir un format au ratio fixe pour ses images sont multiples, même si il s'agit principalement d'une question d'harmonie dans la présentation du blog. On peut par exemple avoir envie d'utiliser des images carrées de tailles identiques pour présenter une liste de billets. Des images de hauteur et de largeur différents ne rendraient pas très joli.

Je n'ai pas les compétences de bidouiller le plugin userThumbSizes pour un ratio custom, mais j'ai quand même trouvé la parade avec deux solutions efficaces et pas trop difficiles mettre en place.

Je vais ici vous présenter la méthode de génération des miniatures grâce à un script PHP qui s'appelle TimThumb. Je présenterai dans un autre article une seconde méthode qui n'utilise pas de PHP mais uniquement du CSS, encore un peu plus "bidouilleuse".

Installation et configuration du script PHP TimThumb

Commencez par enregistrer ce fichier ''timthumb.php'' et l'envoyer dans le dossier de votre thème.

Pour utiliser le script c'est très facile, il faut définir une image avec le fichier PHP et définir l'image d'origine en paramètre. C'est pas très clair ? Je m'explique, en code HTML cela donnerait :

<img src="http://www.goudie.biz/?blog/2012/05/timthumb.php?src=image.jpg&h=180&w=120&q=80" />

...où la valeur src renseigne l'image, h et w pour la taille et q pour la qualité (ici 80%).

Si vous souhaitiez simplement savoir comment générer des miniatures pour votre site avec un fichier PHP, vous pouvez vous arrêter de lire, c'était aussi simple que cela ! Pour les Dotcleariens qui souhaitent mettre cela en pratique sur leur blogue à l'aide du tpl:EntryFirstImage, il reste encore une petite modification à faire...

Extraire uniquement l'URL source de la première image

En effet, ce tpl générant le code complet de l'image (avec sa balise img) et non seulement sa source, il va falloir lui ajouter un petit paramètre qui corrigera cela, pour n'extraire que l'URL de la première image du billet. Pour cela, on peut remercier adjaya sur le forum Dotclear qui nous offre un morceau de code fort précieux pour nous venir en aide.

Toujours dans le dossier du thème, ouvrez le fichier _public.php (le créer si il n'existe pas) puis ajoutez simplement ces lignes de code à la suite :

# Surcharge EntryFirstImage
$GLOBALS['core']->tpl->addValue('EntryFirstImage',array('tplMytpl','MyEntryFirstImage'));
	
class tplMytpl
{
	/*dtd
	<!ELEMENT tpl:EntryFirstImage - O -- Extracts entry first image if exists -->
	<!ATTLIST tpl:EntryAuthorEmail
	size			(sq|t|s|m|o)	#IMPLIED	-- Image size to extract
	class		CDATA		#IMPLIED	-- Class to add on image tag
	with_category	(1|0)		#IMPLIED	-- Search in entry category description if present (default 0)
	with_post	(1|0)		#IMPLIED	-- Search in entry post content if present (default 1)
	src_only	(1|0)		#IMPLIED	--  return src only if present (default 0)
	>
	*/
	public static function MyEntryFirstImage($attr)
	{
		$size = !empty($attr['size']) ? $attr['size'] : '';
		$class = !empty($attr['class']) ? $attr['class'] : '';
		$with_category = !empty($attr['with_category']) ? 'true' : 'false';
		$with_post = 'true';
		if (isset($attr['with_post'])) {
			$with_post = !empty($attr['with_post']) ? 'true' : 'false';
		}
		$src_only = !empty($attr['src_only']) ? 'true' : 'false';

		return
		"<?php echo tplMytpl::EntryFirstImageHelper('".addslashes($size)."',".
		$with_category.",".$with_post.",".$src_only.",'".addslashes($class)."'); ?>";
	}
	
	# First post image helpers
	public static function EntryFirstImageHelper($size,$with_category=false,$with_post=true,$src_only=false,$class="")
	{
		if (!preg_match('/^sq|t|s|m|o$/',$size)) {
			$size = 's';
		}
		
		global $core, $_ctx;
		
		$p_url = $core->blog->settings->public_url;
		$p_site = preg_replace('#^(.+?//.+?)/(.*)$#','$1',$core->blog->url);
		$p_root = $core->blog->public_path;
		
		$pattern = '(?:'.preg_quote($p_site,'/').')?'.preg_quote($p_url,'/');
		$pattern = sprintf('/<img.+?src="%s(.*?\.(?:jpg|gif|png))"/msu',$pattern);
		
		$src = '';
		
		# We first look in post content
		if ($with_post && $_ctx->posts )
		{
			$subject = $_ctx->posts->post_excerpt_xhtml.$_ctx->posts->post_content_xhtml.$_ctx->posts->cat_desc;
			if (preg_match_all($pattern,$subject,$m) > 0)
			{
				foreach ($m[1] as $i) {
					if (($src = self::ContentFirstImageLookup($p_root,$i,$size)) !== false) {
						$src = $p_url.(dirname($i) != '/' ? dirname($i) : '').'/'.$src;
						break;
					}
				}
			}
		}
		
		# No src, look in category description if available
		if (!$src && $with_category && $_ctx->categories)
		{
			if (preg_match_all($pattern,$_ctx->categories->cat_desc,$m) > 0)
			{
				foreach ($m[1] as $i) {
					if (($src = self::ContentFirstImageLookup($p_root,$i,$size)) !== false) {
						$src = $p_url.(dirname($i) != '/' ? dirname($i) : '').'/'.$src;
						break;
					}
				}
			};
		}
		
		if ($src) {
			if ($src_only)
			{
				echo $src;
			}
			else
			{
				echo '<img alt="" src="'.$src.'" class="'.$class.'" />';
			}
		}
	}
	
	private static function ContentFirstImageLookup($root,$img,$size)
	{
		# Get base name and extension
		$info = path::info($img);
		$base = $info['base'];
		
		if (preg_match('/^\.(.+)_(sq|t|s|m)$/',$base,$m)) {
			$base = $m[1];
		}
		
		$res = false;
		if ($size != 'o' && file_exists($root.'/'.$info['dirname'].'/.'.$base.'_'.$size.'.jpg'))
		{
			$res = '.'.$base.'_'.$size.'.jpg';
		}
		else
		{
			$f = $root.'/'.$info['dirname'].'/'.$base;
			if (file_exists($f.'.'.$info['extension'])) {
				$res = $base.'.'.$info['extension'];
			} elseif (file_exists($f.'.jpg')) {
				$res = $base.'.jpg';
			} elseif (file_exists($f.'.png')) {
				$res = $base.'.png';
			} elseif (file_exists($f.'.gif')) {
				$res = $base.'.gif';
			}
		}
		
		if ($res) {
			return $res;
		}
		return false;
	}
}

Normalement, c'est tout bon ! Vous devriez pouvoir utiliser le script pour générer des miniatures pour vos listes de billets, très facilement. Voici un exemple, je veux afficher la première image d'un billet (à éditer dans le contexte post ou à l'intérieur d'une balise tpl:Entries des contextes home, category, tag). Je veux l'afficher avec une taille de 150x150 pixels, donc carrée et bien sûr sans aucune déformation ni aucun étirement. Je vais donc me baser sur le format small de ma première image, voici ce que ça donnerait dans mon fichier de template :

<img src="http://www.goudie.biz/?blog/2012/05/tpl:BlogThemeURL/timthumb.php?src=tpl:EntryFirstImage size="s" src_only="1"&h=150&w=150" />

Vous remarquerez qu'on utilise le fameux src_only grâce au gros bout de code que l'on vient d'installer. Magie, l'image s'affiche à la bonne taille, non déformée, non étirée ! N'hésitez pas à déposer des commentaires sur cet article si cela ne fonctionne pas chez vous, j'essaierai de vous aider.

Exemple d'utilisation

Le header de mon site de jeux pour Android utilise cette méthode. Il présente six screenshots de jeux, qui sont les premières images de ces articles. Bien que le ratio de ces images soit pratiquement toujours identique, il arrive que des jeux soient en mode portrait tandis que la plupart sont en mode paysage, il a donc fallu utiliser cette technique pour harmoniser tout ça.

/!\ Avertissement technique /!\

Dernière précision importante, d'ordre technique : bien que le script génère un dossier cache dans votre theme pour récupérer rapidement les images redondantes, je vous conseille de ne pas trop abuser de cette méthode sur vos pages. Si vous l'utilisez sur des listes de billets avec des pages de 10 éléments ou plus, avec une qualité optimale (la valeur par défaut est de 90) votre hébergeur risque de ne pas aimer cela. Votre site sera ralenti et cela pourra causer d'autres problèmes de performances.

Bref, ne l'utilisez qu'avec parcimonie. Si vous souhaitez être plus "bourrin", ma deuxième technique de miniatures en CSS conviendra parfaitement, j'en parlerais dans un prochain article.

Activer le défilement doux dans Google Chrome

Goudie — Tue, 01 May 2012 18:09:00 +0200

Dans un récent article, j'avais fait part d'un manque dans Google Chrome, le défilement doux. Dans mon cas, c'était très pénalisant et peu pratique lorsque je scrollais avec mon touchpad. J'avais donc présenté quelques extensions Chrome pour le défilement doux.

En fait, il existe bien une option native dans Google Chrome pour le défilement doux ! Elle est simplement bien cachée, dans les fonctionnalités expérimentales. Dans un nouvel onglet, tapez ceci dans votre barre d'adresse : chrome://flags

Parmi les très nombreuses options expérimentales disponibles, vous trouverez la ligne "Défilement doux" : il suffit de l'activer et de redémarrer le navigateur, pour retrouver un effet de défilement adouci similaire à ce que propose Firefox, par exemple.

A noter quand même que cela reste une méthode de scrolling propre à Chrome, et le défilement "précis" du touchpad de mon Dell n'est donc toujours pas pris en compte, mais c'est déjà mieux !

Le dieu Google a encore frappé

Goudie — Sat, 28 Apr 2012 22:54:00 +0200

En attendant de trouver du travail (ou de repartir à l'aventure) je concentre mon temps à faire vivre mes sites web, tout en rêvant de vivre de mes sites web. Pourtant, il y a des fois où je suis soulagé que mon rêve ne se réalise pas. Vivre du web, c'est accepter d'être dépendant de Google, qu'on le veuille ou pas. Dépendant des visites qu'il voudra bien nous apporter (en vous classant bien ou pas dans les résultats) et dépendant des revenus aléatoires qu'il voudra bien nous reverser.

Le dieu Google a donc la main mise sur un énorme part du gâteau Internet, directement ou indirectement. Alors forcément, lorsqu'il décide de faire "le ménage" dans ses résultats de recherches de façon brutale, cela ne convient pas à tout le monde : il y a des gagnants et des perdants.

Deux grosses updates, coup sur coup, en une semaine. La première, le 19 avril, n'est qu'une mise à jour 3.5 du désormais célèbre filtre "Panda" lancé l'année dernière. Il avait fait beaucoup de bruit, mais personnellement je n'en avais pas ressenti les effets. D'ailleurs, cette mise à jour n'a pas bouleversé non plus mes statistiques, dans l'ensemble.

La deuxième, dans la nuit du 25 avril, a été beaucoup plus brutale pour ma part (et visiblement pour énormément de webmasters). Baptisée "Penguin" (un autre animal en noir et blanc) ou plus officiellement webspam algorithm update, c'est donc une mesure anti-spam et anti-suroptimisation.

Cette mise à jour, une fois de plus dédiée à mettre en avant les pages de qualité, a pour objectif de pénaliser les sites détectés comme étant "tricheurs" et en particulier les sites ayant recours à des méthodes de manipulation des résultats de recherche (tous les métiers du SEO sont tout simplement visés).

Avec ce nouvel algorithme, Google est donc censé punir les sites ayant eu recours au "Black Hat", soit des méthodes particulièrement "hardcore" de référencement, et surtout ne respectant pas les consignes du moteur de recherche, des méthodes que je ne connais d'ailleurs absolument pas, et en parcourant les discussions du moment sur les forums, j'ai appris des mots nouveaux tels que Splogs, Scrapebox, CP, keyword stuffing...

Dans mes sites, j'y met simplement du temps et beaucoup de passion. Je ne met pas mon énergie dans la triche, mais dans le contenu de qualité. Pourtant, la plupart d'entre-eux ont été touchés par l'update. Trois exemples : mon site de jeux pour Android a perdu entre 30 et 50% de son trafic, selon le type de page. Ce présent blog, qui de toute façon n'attire déjà plus grand monde, en a perdu plus de 30%. Dans le même temps, mon autre site d'applications utiles pour Android n'a pas été touché du tout, mais à pris sa dose une semaine plus tôt avec Panda 3.5, lui infligeant une baisse de trafic d'environ 20%.

Tous ces sites ont toujours été gérés de la même façon. Du contenu plus ou moins régulier, mais toujours original, quelques petit échanges de lien de temps en temps, pas de "CP", pas de "Black Hat", rien de bourrin, juste de l'honnêteté... Résultat, je me fais claquer : incompréhensible ! D'autant plus lorsque dans le même temps, des sites concurrents, usant et abusant de tout ce qu'il y a de plus hardcore pour positionner leur site (de façon clairement détectable) ne bougent pas d'un pouce dans les résultats de recherche, si ce n'est une progression.

Bref, si Google fait le bien et le mal dans les résultats, il y a forcément des contents et des mécontents. Cela dit, en voyant les résultats de recherche pour certaines requêtes populaires, on est en droit de se demander ce que fout Google, réellement.

Par exemple, sur Google.com, "paypal france" donne dès la première page, des tas de résultats pourris à propos de viagra (???). Sur Google.fr, "casino en ligne" nous gratifie en première page du site de l'ARCEP, et celui de la Fondation Médicale pour la Recherche. Normal !

Comme je l'ai dit en début d'article, je ne vis pas d'internet. Être touché par une update visant les tricheurs, alors qu'on joue l'honnêteté, est certes rageant. Cela ne va pas m'empêcher de continuer d'alimenter mes sites avec de la passion et l'objectif de partager, et non celui d'être en première page. Mais des milliers de personnes remettent aujourd'hui en question le travail qui les fait vivre, voire même parfois leur entreprise, leurs employés. Voilà ce qui arrive lorsque le géant Google bouge le petit doigt... Alors une dernière chose, puisqu'il faut s'en rappeler et le garder en tête : diversifier les sources de trafic de ses sites, autant que possible. C'est la seule façon de garder un maximum d'indépendance.

Les extensions Chrome pour le défilement doux

Goudie — Tue, 10 Apr 2012 16:23:00 +0200

Je me suis rendu compte d'un truc avec mon Vostro 3450. Le défilement est super fluide en utilisant le touchpad, dans l'explorateur Windows, dans Internet Explorer ou dans Mozilla Firefox, et certainement aussi dans Opéra. Et comme la roulette de ma souris Microsoft déconne grave, c'est vachement pratique d'utiliser le touchpad pour scroller en douceur.

Malheureusement, comme il n'aime jamais faire comme tout le monde, Google Chrome ne semble pas gérer le scrolling de la même façon que les autres programme Windows. Résultat : il nous impose son défilement "dur", et c'est particulièrement désagréable, surtout au touchpad puisqu'il ne possède pas de "crans" de défilement, mais je pense aussi aux souris à molette en "roue libre" (comme la Logitech MX620 qui perdent aussi tout leur intérêt.

Chrome ne propose même pas une option de défilement "doux" ou "fluide" (smooth scrolling). Mais heureusement, il y a des extensions pour corriger ça. Je n'ai pas cherché bien loin, je ne sais pas combien d'extensions de scrolling il existe, mais j'en ai testé deux.

Smooth Scroll, qui possède quelques options basiques, mais le scrolling se fait toujours par "crans". Le défilement est simplement plus doux. Et puis j'ai ensuite essayé Chromium Wheel Smooth Scroller, et là j'ai été immédiatement convaincu par la fluidité du défilement, qui ressemble à ce qui se fait sur un smartphone ou une tablette. Il y a plein d'options pour tout régler au poil, même l'effet de "bounce" (rebond en bout de page). Point négatif (et même agaçant) : il me fait carrément planter certaines pages web, parfois provoquant le plantage complet de Chrome (par exemple... en écrivant cet article !).

Donc si vous souhaitez juste adoucir les crans de scrolling, la première extension vous satisfera pleinement. Si vous voulez plutôt, comme moi, un défilement "libre" avec pratiquement pas de crans, la seconde est parfaite pour cela. A noter que les deux extensions augmentent très certainement la consommation de CPU (de façon plus ou moins notable) ainsi que la fatigue des yeux, paraît-il. Il peut donc être judicieux de les désactiver si vous souhaitez garder un maximum d'autonomie sur votre machine.

Hezoug : Theme mobile pour Dotclear

Goudie — Sun, 08 Apr 2012 17:15:00 +0200

Ce pauvre blog tout pourri n'avait même pas encore eu droit à sa version mobile. C'est désormais chose faite ! Et avant de partir dans des personnalisations un peu plus poussées et puisque j'ai adapté l'essentiel d'un thème "de base" pour Dotclear, je le partage ici. Peu de thèmes sont déjà disponibles pour cet excellent CMS, alors pour les thèmes mobile ça se compte sur les doigts d'une main... Voici donc un doigt de plus.

Petit rappel : pour avoir une version mobile de son Dotclear, l'excellent plugin Mobile Theme Switcher est fait pour ça.

Mais avant de vous exciter à l'idée de l'installer sur votre Dotclear, quelques précisions très importantes. Il s'agit d'une adaptation du template mobile "Dossier Mobi" de chez Mobifreaks.com. J'en ai donc adapté un thème pour Dotclear, en plus de nombreuses modifications, comme le recadrage automatique des iframes dans les posts (utile pour ne pas que les vidéos Youtube et Dailymotion débordent sur la largeur).

Il est pleinement opérationnel pour les pages de base : home, post, page, archive, category, tags, tag, search, 404 et un petit bonus avec le tpl de du plugin ContactMe qui est quand même incontournable sur un blog Dotclear. C'est la première fois que je partage un thème pour Dotclear, mais je ne l'ai pas créé pour cela à la base. Qu'est ce que ça veut dire ? Qu'il peut vous manquer des choses, que l'adaptation n'est pas faites dans les règles de l'art 100% comme les autres thèmes, et surtout que je ne proposerai certainement jamais de mise à jour.

Pour autant, si vous souhaitez l'utiliser et adapter deux-trois choses à votre goût mais que vous ne savez pas à quoi toucher, je suis tout à fait disponible pour vous aider. Il vous suffit de laisser un message dans les commentaires où sur le sujet du forum Dotclear (mais je risque d'être plus lent à réagir).

Ah deux dernières choses, le menu en haut de page est géré directement depuis Dotclear et son plugin natif simpleMenu (Menu Simple). Cela veut donc dire qu'il faut avoir une installation de Dotclear 2.4 au minimum. Et la dernière chose ? Hezoug, le nom du thème, veut dire "portable" ou "mobile" en Breton. Enfin je crois. Car non, je ne sais pas parler Breton, mais j'en suis un, donc ça compte quand même.

Allez, maintenant que vous savez tout, voici le thème en package et au format zip également. Ah ben, je crois que pour la toute première fois en 7 ans d'utilisation de Dotclear, je vais utiliser la fonction "fichiers attachés" ! Cool

Arrêtez de nous saouler avec Free Mobile !

Goudie — Sat, 07 Jan 2012 13:59:00 +0100

Entre les images "ULTRA TOP SECRET" des forfaits Free Mobile en exclu inter-galactique, les news pour dire "le site mobile.free.fr a ajouté un <br/> dans son code source TRUC DE MALADE !", les décryptages de la mort sur des offres qu'on ne connaît même pas encore, et tout le reste, je dois dire que j'en ai plein la tête de vos conneries . Trois bonnes raisons personnelles d'arrêter de (me) faire chier le monde avec Free Mobile :

Y'en a plus pour très longtemps.

Peut-être lundi, peut-être la semaine prochaine, peut-être à la fin du mois... Peut-être qu'on s'en branle aussi, non ? On sait que c'est pour bientôt, à quoi bon faire du BUZZ jusqu'à la dernière seconde pour faire gonfler ton Twitter ?

Vu du Canada, ça fait encore plus chier.

Même si je rentre en France à la fin du mois. C'est quand même incroyable d'être capable de se plaindre des forfaits mobiles proposés en France, même avant Free Mobile ! Ici c'est la merde, on te fait payer le répondeur, on te fait payer pour savoir qui t'appelle (sinon tous les appels sont masqués, une options de haute technologie à 5$ par mois qu'ils appellent "l'afficheur") on te décompte les appels et SMS que TU reçois, et bien sûr l'internet mobile est plutôt rapide mais avec des forfaits de 200 Mo tout merdiques ça n'a aucun intérêt, bref : c'est la merde ! Alors Free va peut-être enfoncer le clou sur un marché qui pour moi est déjà très convenable.

Vous allez être déçus !

Les fakes qui circulent en quantité sur internet relaient tous des forfaits à prix totalement démesurés mais il va falloir ouvrir les yeux : vous allez être déçus ! Free va sûrement révolutionner le marché comme ils savent le faire, mais pas autant que vous l’espérez : devant la grille de tarifs (officielle) vous allez vous éjecter d'urgence de la fusée Free Mobile et redescendre sur terre.

J'espère que Free me donnera tort et proposera ce fameux forfait à 1 euro par mois pour avoir tout en illimité + un paquet de dragibus, comme promis dans la grille de tarifs "officielle" qui est sortie hier, ou avant-hier, ou avant-avant-hier, ou celle de la semaine dernière, ou ne je sais plus...

Bref comment dire, cet article n'est pas là pour râler contre tout le monde (en fait si, complètement) mais surtout sur les sites à la con qui essaient tous de grailler des followers allant même parfois jusqu'à imitant un site down à cause du trafic sur l'image officielle des forfaits Free Mobile, obligeant (tristement) à faire suivre la dite image via les comptes Google+ et Facebook du site pour ne pas manquer le scoop... (pour de vrai, vu il y a une demi-heure)

Cet article n'est d'ailleurs pas là pour faire du buzz puisque vous aurez remarqué son contenu totalement inintéressant, mais comment dire :

Il fallait que ça sorte !

Et pour un premier article en 2012, ça fait du bien Bonne année ! !

Analytics : compter les clics internes avec event tracking

Goudie — Mon, 26 Dec 2011 08:33:00 +0100

Depuis un moment je recherchais une solution simple pour tracker mes liens avec Google Analytics. Les objectifs sont multiples. La principale utilité que j’en ai étant d’avoir un suivi de clics sur n’importe quelle partie du site, par exemple :

suivre les clics sur le menu principal d’un site, ou sur un menu secondaire
compter les clics sur un bouton de téléchargement
les clics sur le bouton “Play” d’une vidéo
savoir combien de personnes cliquent sur les miniatures de photos pour les agrandir
mesurer l’usage d’un jQuery ou d’éléments AJAX par vos visiteurs
savoir quel pourcentage de visiteurs cliquent sur la promotion d’un site e-commerce

En plus de pouvoir analyser ces actions internes au site, l'event tracking peut également être utilisé pour les liens externes, par exemple sur une bannière, le lien texte d’un partenaire, le lien qui mentionne la source de vos articles, le logo de votre site... en fait, n’importe quel endroit du site où l’on souhaite compter les clics internes ou externes. Les usages sont multiples et donnent des chiffres très intéressants à analyser pour guider l’évolution d’un site, et surtout de son design.

J'avais trouvé plusieurs solutions, mais souvent compliquées, pas évidentes à mettre en oeuvre et même parfois obsolètes par rapport à l'évolution du script Analytics.

J’ai finalement trouvé mon bonheur avec un morceau de code tout bête, une solution facile à installer et à configurer en utilisant le event tracking, et qui ne demande pas de créer un nouveau profil Analytics spécifique, de génèrer de “fausses” pages vues, et plus globalement qui ne met pas la pagaille dans votre compte Analytics et préserve les statistiques actuelles sans risque...

Le Suivi des Événements (event tracking)

Comme son nom l’indique, cette fonctionnalité de Google Analytics riche et très utile -mais trop peu connue et pas assez utilisée- permet d’analyser avec précision les évènements (actions) sur votre site. Il est permis de suivre beaucoup plus que de simples clics, par exemple je l’utilise pour savoir quand se produit une erreur sur mon site, sur quelle page et le message d’erreur qui l’accompagne. L'event tracking peut aussi être utilisé pour de simples survols (hover) et on peut donc presque suivre le pointeur de souris du visiteur et bien plus encore... mais ce qui nous intéresse aujourd’hui, ce sont les clics.

Un événement ne compte pas de nouvelle page vue, ni de nouveau visiteur, il est simplement comptabilisé pour être affiché dans la section Événements de Google Analytics. Cela nous amène au seul (et pour moi unique) point négatif ou manque du event tracking : il ne peut pas être utilisé pour définir un Objectif dans votre Google Analytics.

Si vous avez fait le deuil de cette fonctionnalité pour vos évènements, on peut enfin passer à la pratique :

Déterminer la zone à analyser

Avant toute chose, pour que l’analyse soit facile à exploiter dans Analytics, il faut déterminer la zone que l’on souhaite examiner. Pour mon exemple, j’ai choisi le nouveau menu horizontal dans le header de Android-Games.fr :

Mise en place du code de suivi

D’abord, s’assurer que vous utilisez bien la dernière version du script Google Analytics (asynchrone). Ensuite, il suffit de placer un morceau de code javascript (onclick) dans les balises de liens que vous souhaitez tracker : _gaq.push(['_trackEvent', 'CATEGORY', 'ACTION', 'LABEL', VALUE, opt_noninteraction]);

Dans l’exemple de mon menu, ça donne :

<a href="http://www.goudie.biz/?blog/2011/12/accueil.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'Accueil']);">Accueil</a> <a href="http://www.goudie.biz/?blog/2011/12/tests.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'Tests']);">Accueil</a> <a href="http://www.goudie.biz/?blog/2011/12/news.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'News']);">Accueil</a>

Et ainsi de suite... Je n’ai pas utilisé toutes les options possibles dans mon utilisation. La syntaxe se compose de 6 valeurs dans cet ordre :

"_trackEvent" (obligatoire puisque c’est lui qui déclare l’événement)
la catégorie de l’événement (obligatiore, ici Clic)
l’action qui correspond à cette catégorie (obligatoire, ici Menu)
le libellé qui correspond à cette action (facultatif, ici le nom des liens)
la valeur qui correspond à ce label (facultatif, non utilisé ici)
le dernier paramètre (facultatif) est opt_noninteraction, et s'utilise en inscrivant "true" : j’y reviens plus bas.

C’est donc à vous de définir dès le départ une organisation bien structurée pour vos événements. Dans mon exemple, j’ai choisi de définir la catégorie par Clic (puisque les événements peuvent servir pour autre chose que les clics). J’ai défini l’action Menu qui correspond donc à un Clic sur le Menu. Enfin, le libellé est simplement le nom du lien cliqué. Je peux donc suivre les Clics sur les liens du Menu tels que Accueil, Tests, News...

Je n’ai pas utilisé le paramètre de valeur, mais il peut être très utile pour affiner encore plus les statistiques dans certains usages. En utilisant des valeurs numériques, les possibilités sont infinies !

Rapport d’événements dans Google Analytics

Dès les premiers résultats, vous allez voir apparaître les nouvelles données dans Google Analytics, dans Contenu > Événements (nouvelle version).

La vue d’ensemble vous permet de voir en un clin d’oeil les principaux événements par catégorie, action ou libellé, ainsi que les pages ou se produisent les événements. Ensuite, c’est à vous de jouer ! Analysez, comparez, modifiez, essayez, choisissez... Optimisez ! (et j’avais encore une floppée de mots en “ez” sous le nez à vous donner, mais je vais vous ~~épargnez~~... ah non, raté.)

Influence sur le taux de rebond et solution

Il est à noter que le suivi d’événement va faire baisser plus ou moins significativement le taux de rebond sur votre site. En effet, sans entrer dans les détails, même si un événement n’est pas compté comme une page vue, Analytics le compte comme une “requète”. Explications :

Prenons une page avec un slideshow jQuery. Vous analysez les clics sur le bouton “suivant” du slideshow.

Si visiteur qui arrive sur votre page, clique sur “suivant” puis quitte votre site :

Sans le tracker, il sera compté comme un rebond puisqu’il n’aura pas vu d’autre page et donc pas fait d’autre “requête” à Google Analytics.
Avec le tracker, il sera compté comme un non-rebond puisqu’en cliquant sur “suivant” il aura envoyé une “requête” à Google Analytics, même sans changer de page.

J’espère que c’est assez clair . Heureusement, si vous tenez à éviter cela, une solution existe et c’est notre fameux paramètre opt_noninteraction de tout à l’heure. Pour l’utiliser, il suffit d’ajouter la valeur "true" (sans aucun guillemets) comme dernier paramètre. Ainsi les clics sur “suivant” seront comptés comme événements, sans influer sur le taux de rebond de la page !

Tirer les conséquences et envisager des modifications

Pour le moment, j’utilise le tracking d’événements sur les clics pour mes liens internes uniquement. Cela donne des infos cruciales pour modifier son design. Le tracking sur le menu me permet par exemple de savoir que :

15% des visiteurs l’utilisent.
Que ces visiteurs voient 2x plus de pages que la moyenne.
Qu’ils passent 3x plus de temps sur le site que la moyenne.
43% des clics sur le menu se font sur “Top 50”, ce qui est énorme et me rappelle que je dois vraiment soigner cette page qui pour le moment est dégueulasse.

J’analyse aussi le nombre de fois que le petit bouton de traduction en anglais est utilisé, le nombre de clics sur le logo du site, et le nombre de clics sur le “top des recherches” en haut et le nombre de clics sur l’encart des “derniers articles”, pour savoir si ces emplacements sont utiles. On a parfois de belles surprises, car les encarts avec le plus de pixels ne sont pas forcément ceux que les visiteurs cliquent le plus, bien au contraire.

Voilà, j’espère que mon petit article vous aura été utile. C’est le genre d’article sur lequel j’aurai aimé tomber lorsque je cherchais à tracker mes liens internes avec Analytics. C’est d’ailleurs pour ça que je l’ai écrit !

Le event tracking va beaucoup plus loin que ça, comme je l’ai dit en début d’article, il peut servir pour suivre une multitude de comportements allant du simple clic, au temps entre deux slideshow jQuery, en passant par le nombre et le temps de survol sur n’importe quel élément d’une page... bref, des possibilités infinies et surtout vachement utiles. Pour en savoir plus, la page d’aide Google Analytics dédiée au event tracking (en anglais).

Vos photos sont-elles utilisées sur des sites web célèbres ?

Goudie — Wed, 14 Dec 2011 00:43:00 +0100

Pour de nombreuses personnes, Google Images est une formidable banque d'images où il suffit de piocher dans le tas pour illustrer ses publications. Cela m'arrive aussi !

Mais lorsque j'ai essayé de retourner la situation pour voir la liste de tous les sites qui utilisent mes images... j'ai eu de belles surprises !

Il y a quelques semaines, j’ai fait un petit test sur internet. J’ai été voir les mots clés les plus souvent tapés dans Google Images pour arriver sur mon site. Il s’agissait par exemple de “ciel bleu”, “feu de cheminée”, “herbe”, “kinder” ou encore “fibre optique”. Puisque ces résultats menaient à des photographies dont je suis l’auteur et que je publie sur ce blog, je me suis dit que ceux qui recherchaient cela devaient avoir besoin d’une image d’illustration pour je-ne-sais quoi, et qu’avec Google Image ça irait plus vite que d’utiliser une banque d’images libres de droit ou d’images payantes.

J’ai donc eu envie de retourner la situation en allant chercher ceux qui me volaient ces images, pour régler mes comptes. Plus clairement, j’ai retrouvé chaque page web qui utilisant mes images (copiées sur leur serveur ou directement à la source) et j’ai contacté l’auteur des articles afin qu’ils agissent, au choix, en mentionnant la source de l’image, ou bien en la retirant (ou la remplacant).

Avant de détailler dans un prochain article de quelle façon j’ai procédé pour faire cela, voici donc quelques chiffres et statistiques sur 9 exemple concrets de mots clés et d’images volées.

La grande majorité des personnes contactées (par le biais de commentaires de blog ou de formulaires de contact) ont répondu très rapidement à ma demande. Le plus souvent en s’excusant, de façon gênée et surtout en se demandant comment j’ai bien pu les retrouver. Plus exactement, de ceux qui ont répondu (soit moins de la moitié) :

80% ont été coopératifs
10% m’ont rendu la tâche trop compliquée (réclamation Skyblog, Wat, Google Sites...)
7% ne pouvaient pas agir personnellement (sites d’entreprises, etc.)
3% se sont foutus de ma gueule

Pour ces derniers, il s’agit le plus souvent de réactions compréhensibles. En effet j’ai également contacté les créateurs de pages ou de groupes Facebook qui utilisaient une de mes images, et ça en fait un paquet. Devant l’absurdité de demander des droits pour une image d’un groupe Facebook avec 3 glandus et qui sera de toute manière supprimée avec la mort des groupes Facebook, il est normal que ma demande soit prise pour une blague. J’ai simplement joué le jeu à fond en envoyant la même réclamation à tout le monde sans exception.

Avant de vous livrer le top des “réactions” des personnes que j’ai contacté (et il y a du lourd !) voici quelques chiffres et infos sur les cas que j’ai analysé.

Ciel bleu

J’ai trouvé environ 100 sites qui utilisaient mon image sans autorisation :

1 seul citait déjà la source
4 ont retiré ou remplacé l’image
2 ont ajouté la source de l’image

L’image était présente sur :

Le site web d’une maison de retraite
Plusieurs sites de compagnies d’énergies “vertes”
Des prestataires de vacances au soleil
Beaucoup de blogs qui font l’apologie de Dieu et de la religion catholique (!)
Des avatars de profils sur Dailymotion, Skyblog
Des blogs et des sites sur le thème de la voyance
L’avatar Facebook d’un journaliste qui présente l’info tous les matins sur France Culture...

Kinder

J’ai trouvé environ 60 sites qui utilisaient mon image sans autorisation :

Aucun ne mentionnait la source
1 a retiré ou remplacé l’image
1 a ajouté la source de l’image

L’image était présente sur :

De très nombreuses fanpages à propos des Kinder sur Facebook
Des blogs et sites de recettes de cuisine
Un article de la presse belge à propos de Ferrero (ci-dessous)
Des forums féminins qui parlent de friandises
Des blogs de “rondes” qui parlent du chocolat...

Feu de cheminée

J’ai trouvé environ 60 sites qui utilisaient mon image sans autorisation :

Aucun ne mentionnait la source
2 ont retiré ou remplacé l’image
1 a ajouté la source de l’image

L’image était présente sur :

Des blogs de pseudo-philosophes qui ont besoin d’une illustration pour leur poésie
Compagnies de bois de chauffage
Compagnies d’énergies renouvelables
Blogs et sites de voyance ou de sorcellerie
Article de presse belge (encore) qui parle d’un assassinant !
Blogs scolaires ou wikis sur le bois de chauffage
Projet de campagne publicitaire
Blogs divers
Illustration d’une rubrique sur un grand site de e-commerce

Fibre optique (plusieurs variantes)

J’ai trouvé environ 60 sites qui utilisaient mon image sans autorisation :

Aucun ne mentionnait la source
3 ont retiré ou remplacé l’image
6 ont ajouté la source de l’image

L’image était présente sur :

Des sites de compagnies en travaux d’éclairage
Un vendeur de décoration et de mobilier en Turquie
Des compagnies en réseaux électriques
L’aperçu d’une vidéo sur Wat
Une pochette d’un album électro sur MySpace
Des blogs et sites sciences et high-tech dont le Site du Zéro
Des blogs sur les télécoms tels que FreeNews et UniversFreebox
Articles sur des journaux en ligne : LesAfriques, Corse.fr...
Des sites scolaires (Maison des Sciences Université de Provence)
Divers forums

Krema (plusieurs variantes)

J’ai trouvé environ 25 sites qui utilisaient mon image sans autorisation :

Aucun ne mentionnait la source de l’image
2 ont ajouté la source de l’image

L’image était présente sur :

Le blog d’une française au Québec à qui les Krema manquent
Une miniature de vidéo sur Dailymotion
Des avatars de nombreuses fanpages et groupes Facebook
Des blogs ou forums féminins ou ça parle de sucreries
Des blogs sur les bonbons
Un site scolaire avec un exposé sur les bonbons

Je vous épargne l’analyse d’autres images, voici les principales que l’on me vole, et certains sites voleurs sont plutôt connus et censés être sérieux (presse en ligne, célèbre e-commerce). Je veux dire qu’il est plutôt frissonnant de voir une photo de sa propre cheminée sur toute la largeur du site de Nature & Découvertes, voyez-vous. Ce qui est encore plus frissonnant, c’est de voir cette même cheminée associée un article de presse très sérieux, à propos d’une dame qui découpe son mari en deux avant de le brûler. Sympa pour ma cheminée (et pour le mari...).

Les réponses qui ont retenu mon attention

Comme promis, voici un petit florilège des réponses que j’ai reçues. Je l’ai dit plus haut, la plupart ont été compréhensifs et ont agi sans se poser de questions. D’autres à l’inverse, ont ouvert le débat en essayant de justifier leur acte, certains y allant même de leur petite suggestion :

Sachez que cette image circule beaucoup...

Pourquoi n'y a t-il pas de copyright sur la photo d'origine ?

Si vous voulez vraiment protéger vos images, il faut interdir le clic droit

Interdir le clic droit est une méthode vieille et inutile. Cela n’est plus pris en compte par les navigateurs récents, et de toute façon il suffirait de faire une capture d’écran pour piquer l’image. De plus, provenant de Google Images, il suffit simplement de faire un clic droit et d’enregistrer, puisque le site d’origine n’apparaît qu’en arrière plan. Google se contentant d’inscrire, tout en bas du bandeau à droite : “Les images peuvent être soumises à des droits d'auteur.”. D’ailleurs, cela explique que certains prennent réellement Google pour une banque d’images libres de droit :

Source : Google Images

C'est bizarre, il me semblait pourtant avoir pris cette photo sur Google Images

Pour finir cet article, deux réponses encourageantes. En réalisant que j’avais pu retrouver les sites qui utilisent mes images, certains sont peut-être dorénavant plus prudents avec les images qu’ils utilisent :

D’ordinaire nous achetons les droits d’utilisation des photos, que nous payons sur les sites tels que fotolia ou istockphoto.

Je vais donc également ajouter une mise en garde à côté du bouton d'envoi d'images.

Voilà donc pour ce long article plein de statistiques ! J’ai voulu publier ici ce que j’ai tiré de mes analyses en fouinant sur internet les sites qui avaient volé mes images sans autorisation. Qu’en pensez-vous ?

Je voudrais être clair, il m’est bien-sûr arrivé, même de nombreuses fois, d’avoir recours à Google Images pour trouver des images et illustrer certaines de mes publications. Je ne dis pas être parfait et utilisant uniquement des images libres ou avec autorisation. Les petits blogs que j’ai contacté pour les emmerder avec mes histoires de droit d’auteur ne sont pas importants, et il est même agréable de voir qu’ailleurs on aime nos photos (surtout quand on n’est pas du tout photographe et qu’on n’a rien demandé à personne !).

Non, ce qui est frustrant, c’est de retrouver ses propres photos sur des sites qui ne devraient PAS commettre de telles erreurs, comme de gros sites marchands ou pire des articles de presse.

Rien que pour ceux-là, ça vaut le coup de faire une petite recherche de ces images volées. On a toujours de grandes chances de tomber sur des choses surprenantes. Je parlerai dans un prochain article de la façon dont j’ai procédé. C’est tout bête, et cela m’aura occupé une soirée de façon originale !