Goudie.biz - Mot-clé - internetBlog perso de Flo, depuis 2005.2020-09-17T13:38:04+02:00Florian DUVALurn:md5:f6c4dedced9c6504021867ca1d0b02e4DotclearProblème d'apostrophe avec WP Favorite Postsurn:md5:13d45728648eb98f9164815c0aa920bc2014-02-09T15:20:00+01:002014-02-09T15:26:13+01:00GoudieInternetinformatiqueinternetwordpress<p><img src="http://www.goudie.biz/blog3/images/logos/.Right_Quote-Vector-256_t.png" alt="Right_Quote-Vector-256.png" style="float:right; margin: 0 0 1em 1em;" />
Cet excellent plugin Wordpress permet d'ajouter de façon très simple un système de "Favoris" sur votre installation.</p>
<p>Malgré qu'il soit très bien codé, ce plugin un comporte un petit bug - pas très gênant - avec l'utilisation des apostrophe dans les libellés de liens. En fait, c'est ultra facile à corriger !</p> <h3>Le (petit) problème</h3>
<p>Le plugin permet de choisir un texte personnalisé pour les liens, par exemple "Ajouter aux favoris" ou "Retirer des favoris". Jusque là, tout va bien. Sauf si vous utilisez des apostrophes dans ce texte. En apparence, tout va bien, et d'ailleurs cela fonctionne très bien. Cependant, le lien généré par le plugin comporte aussi un attribut "title" avec le même texte. Du coup, si vous utilisez une apostrophe (pas exemple, "Ajouter l'article aux favoris" : l'attribut "title" est refermé trop tôt, dans le code ça fait tout moche, et au survol ça fait "Ajouter l" !</p>
<h3>Êtes-vous bien sûr d'utiliser une apostrophe ?</h3>
<p>Le problème ne vient en réalité pas du plugin, mais bien d'une sale manie que l'on a chopée depuis l'invention de l'informatique : on utilise toujours une apostrophe dite "dactylographique" ou "droite", alors qu'en réalité l'apostrophe, la vraie, la dure, ce doit être une virgule en l'air (l'apostrophe "typographique" ou "courbée"). <a href="http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Prise_de_d%C3%A9cision/Usage_de_l'apostrophe_typographique/R%C3%A9sum%C3%A9">Merci Wikipedia</a>.</p>
<p>Du coup il suffit de faire une apostrophe courbée au lieu d'une apostrophe droite ! Et plutôt que de vous laisser chercher la combinaison ALT+machin, après avoir trouvée dans la "Table des caractères", en voici une petite rien que pour vous, prête à copier : <strong>’</strong></p>Mise en place de CloudFlareurn:md5:b7983bd40d97c072c580ebb81acc4cdd2014-02-05T18:57:00+01:002014-02-26T23:15:57+01:00GoudieInternethebergementinformatiqueinternet<p><img src="http://www.goudie.biz/blog3/images/icones/cloudflare-icon.png" alt="cloudflare-icon.png" style="float:right; margin: 0 0 1em 1em;" />
Récemment, mon hébergeur m'a tapé sur les doigts car je consommais trop de ressources sur le serveur mutualisé qui héberge tous mes sites. Il est vrai que le mois de janvier, et surtout la fin du mois de décembre, ont été riches en émotions, en hits et en bande passante (comme après chaque Noël, <a href="http://www.android-games.fr/">Android Games</a> a explosé les records de visites).</p>
<p>Comme je n'ai pas vraiment les moyens de passer sur un VPS avec assistance, ni le temps d'apprendre à m'installer un dédié, et qu'il s'agit d'un pic d'activité qui ne se produit qu'une fois dans l'année, c'était le bon moment pour mettre en place la solution CloudFlare.</p> <h3>CloudFlare pour la rapidité (et pour soulager le serveur)</h3>
<p>En gros, et sans entrer dans les détails techniques, CloudFlare c'est plusieurs solutions en une seule. D'abord un CDN (Content Delivery Network), c'est à dire que CloudFlare va copier tous les fichiers qui gravitent autour de votre site (images, feuilles de styles, scripts) pour les charger plus rapidement aux visiteurs.</p>
<p><a href="http://www.goudie.biz/blog3/images/cdn-content-delivery-network.png" title="Normal à gauche, CDN à droite. (par Kanoha sur Wikipedia)"><img src="http://www.goudie.biz/blog3/images/.cdn-content-delivery-network_m.png" alt="Normal à gauche, CDN à droite. - Image par Kanoha sur Wikipedia" style="display:block; margin:0 auto;" title="Normal à gauche, CDN à droite. (par Kanoha sur Wikipedia" />)</a></p>
<p>Pourquoi plus rapidement ? Parce qu'ils possèdent des serveurs partout dans le monde, assurant un ping optimal quelque soit la localisation du visiteur. Dans mon cas, mon site étant hébergé à Montréal, le ping en France était régulièrement autour de 100ms, ce qui était perfectible. Désormais, le ping en France est considérablement réduit.</p>
<p>En plus il "minifie" la taille de vos ressources, comme les feuilles de styles CSS dont il retire tous les espaces et lignes inutiles pour ne garder "que le meilleur" (sans impacter le contenu, bien évidemment).</p>
<h3>CloudFlare pour la fiabilité (en principe)</h3>
<p>Puisque le service copie tout votre site pour le servir partout dans le monde, cela veut aussi dire que CloudFlare prendra le relais pour servir des pages statiques si jamais votre hébergeur tombe en rade (avec des fonctionnalités réduites néanmoins, puisque les bases de données seront inaccessibles).</p>
<p>Cela veut aussi dire que si CloudFlare tombe en rade, votre site sera coupé alors même que serveur sur lequel il est hébergé est en parfaite santé !</p>
<h3>CloudFlare pour la sécurité (si t'es pas parano)</h3>
<p>L'autre point intéressant de CloudFlare, c'est qu'il agit en tant que proxy inversé pour vos visiteurs. C'est à dire que pour le serveur où est hébergé le site, tous les visiteurs proviendront de l'IP correspondant à CloudFlare. Bon, ça, on s'en fout (un plugin Wordpress existe, pour transmettre les bonnes IP par exemple dans les commentaires).</p>
<p>L'avantage c'est surtout que CloudFlare va bloquer de lui-même la plupart des attaques en tous genre que vous pourriez subir (spam de commentaires, attaques DDOS, etc.).</p>
<h3>Un service facile à mettre en place</h3>
<p>Je me suis toujours dit que CloudFlare était chiant à mettre en place sur son site web, vu l'apparente complexité du truc. En fait non, c'est tout con. Il suffit de modifier les DNS de votre nom de domaine pour les rediriger vers CloudFlare, et non vers votre vrai serveur. C'est tout ! CloudFlare s'occupe du reste, et vous pouvez éventuellement paramétrer, activer ou désactiver les fonctionnalités de sécurité.</p>
<h3>Un premier retour d'expérience positif</h3>
<p>Après quelques jours d'activité, on peut constater que la consommation de bande passante est considérablement diminuée, ce qui fera sans doute plaisir à mon hébergeur (qui n'a de son coté que des avantages à inciter l'utilisation de CloudFlare !).</p>
<p><img src="http://www.goudie.biz/blog3/images/screens/.androidgames-cloudflare-7days_m.png" alt="androidgames-cloudflare-7days.png" style="display:block; margin:0 auto;" /></p>
<p>J'étais un peu réticent à l'idée de passer par CloudFlare. Une société qui propose de la sécurité, de meilleures performance, du cloud, et tout cela gratuitement (dans sa version de base, sans SSL) et sans limite de bande passante, c'est louche ! Et puis, mon serveur est hébergé quelque part, ce n'est pas pour ajouter un intermédiaire dans le processus.</p>
<p>Mais pour le moment, tout semble bien se passer. Je n'ai pas particulièrement ressenti d'accélération ou de ralentissement du site, mais il faut dire qu'ici avec mon 1.5 Mega tout destroy, c'est difficile de percevoir quoi que ce soit puisque tout est lent.</p>
<p>A suivre, pour un futur bilan.</p>Résultats de recherche Google enrichis Maps et Google+urn:md5:da4540424b8c541b2973f9edc52057f62012-06-09T15:56:00+02:002012-06-09T15:56:00+02:00GoudieInternetgoogleinternetmapsmoi<p><img src="http://www.goudie.biz/blog3/images/logos/.logo-google-maps_t.jpg" alt="logo-google-maps.jpg" style="float:right; margin: 0 0 1em 1em;" />
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.</p> <p><a href="http://www.goudie.biz/blog3/images/google/maps/resultat-enrichi-goudie-map.jpg" title="resultat-enrichi-goudie-map.jpg"><img src="http://www.goudie.biz/blog3/images/google/maps/.resultat-enrichi-goudie-map_m.jpg" alt="resultat-enrichi-goudie-map.jpg" style="display:block; margin:0 auto;" /></a></p>
<p>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.<br /><br /></p>
<p><a href="http://www.goudie.biz/blog3/images/google/maps/google-plus-goudie-page.jpg" title="google-plus-goudie-page.jpg"><img src="http://www.goudie.biz/blog3/images/google/maps/.google-plus-goudie-page_s.jpg" alt="google-plus-goudie-page.jpg" style="float:right; margin: 0 0 1em 1em;" /></a>
Plutôt pratique pour donner son adresse à quelqu'un facilement (<em>recherche-moi sur Google...</em>) 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.<br /><br /></p>
<p>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.<br /><br /></p>
<p>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.</p>Générer des miniatures avec un script PHP (exemple Dotclear)urn:md5:23034d659cc09648786c0694feab4d6d2012-05-12T00:18:00+02:002012-05-12T02:04:58+02:00GoudieInternetdotclearinternettuto<p><img src="http://www.goudie.biz/blog3/images/logos/dotclear.jpg" alt="dotclear.jpg" style="float:right; margin: 0 0 1em 1em;" />
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 <strong>ratio personnalisé</strong>. On peut bien sûr choisir la taille maximale des formats <em>medium</em>, <em>small</em> et <em>thumbnail</em>, mais <strong>on ne peut pas générer d'images carrées</strong>, par exemple. Le format <em>square</em> 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 <a href="http://plugins.dotaddict.org/dc2/details/userThumbSizes">plugin pour définir de nouveaux formats de miniatures</a>, mais ça ne règle toujours pas le problème du ratio (hélas).<br /></p>
<p><img src="http://www.goudie.biz/blog3/images/screens/paint/.redimentionner_t.jpg" alt="redimentionner.jpg" style="float:left; margin: 0 1em 1em 0;" />
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.<br /></p>
<p>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.</p> <p>Je vais ici vous présenter la méthode de génération des miniatures grâce à un script PHP qui s'appelle <strong>TimThumb</strong>. 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".<br /></p>
<h3>Installation et configuration du script PHP TimThumb</h3>
<p>Commencez par enregistrer <a href="http://timthumb.googlecode.com/svn/trunk/timthumb.php">ce fichier ''timthumb.php''</a> et l'envoyer dans le dossier de votre thème.<br /></p>
<p>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 :<br /><br />
<code><img src="http://www.goudie.biz/?blog/2012/05/timthumb.php?src=image.jpg&h=180&w=120&q=80" /></code><br /><br />
...où la valeur <strong>src</strong> renseigne l'image, <strong>h</strong> et <strong>w</strong> pour la taille et <strong>q</strong> pour la qualité (ici 80%).<br /></p>
<p>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 <em>tpl:EntryFirstImage</em>, il reste encore une petite modification à faire...<br /></p>
<h3>Extraire uniquement l'URL source de la première image</h3>
<p>En effet, ce tpl générant le code complet de l'image (avec sa balise <strong>img</strong>) 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 <a href="http://aiguebrun.adjaya.info/">adjaya</a> sur le <a href="http://forum.dotclear.org/viewtopic.php?id=37999">forum Dotclear</a> qui nous offre un morceau de code fort précieux pour nous venir en aide.<br /></p>
<p>Toujours dans le dossier du thème, ouvrez le fichier <em>_public.php</em> (le créer si il n'existe pas) puis ajoutez simplement ces lignes de code à la suite :<br /></p>
<pre>
# 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;
}
}
</pre>
<p><br />
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 <strong>première image d'un billet</strong> (à éditer dans le contexte <em>post</em> ou à l'intérieur d'une balise <em>tpl:Entries</em> des contextes <em>home</em>, <em>category</em>, <em>tag</em>). Je veux l'afficher avec une <strong>taille de 150x150 pixels</strong>, donc carrée et bien sûr sans aucune déformation ni aucun étirement. Je vais donc me baser sur le format <strong>small</strong> de ma première image, voici ce que ça donnerait dans mon fichier de template :<br /><br /></p>
<p><code><img src="http://www.goudie.biz/?blog/2012/05/<q>tpl:BlogThemeURL</q>/timthumb.php?src=<q>tpl:EntryFirstImage size="s" src_only="1"</q>&h=150&w=150" /></code>
<br /><br />
Vous remarquerez qu'on utilise le fameux <strong>src_only</strong> 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.<br /></p>
<h3>Exemple d'utilisation</h3>
<p><a href="http://www.goudie.biz/blog3/images/screens/slideboxes-androidgamesfr.jpg" title="slideboxes-androidgamesfr.jpg"><img src="http://www.goudie.biz/blog3/images/screens/.slideboxes-androidgamesfr_m.jpg" alt="slideboxes-androidgamesfr.jpg" style="display:block; margin:0 auto;" /></a>
Le <em>header</em> 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.<br /></p>
<h3>/!\ Avertissement technique /!\</h3>
<p>Dernière précision importante, d'ordre technique : bien que le script génère un dossier <em>cache</em> 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.<br /></p>
<p>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.</p>Le dieu Google a encore frappéurn:md5:81ad3e918559904947ae25315b9740d12012-04-28T22:54:00+02:002012-05-03T23:12:05+02:00GoudieInternetbloggoogleinternetje rale si je veuxreflexion<p><img src="http://www.goudie.biz/blog3/images/logos/google-god.jpg" alt="google-god.jpg" style="float:right; margin: 0 0 1em 1em;" />
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 <strong>dépendant de Google</strong>, 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.<br /><br /></p>
<p>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 : <strong>il y a des gagnants et des perdants</strong>.</p> <p>Deux grosses <em>updates</em>, 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.<br /><br /></p>
<p>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 <em>webspam algorithm update</em>, c'est donc une mesure anti-spam et anti-suroptimisation.<br /><br /></p>
<p><img src="http://www.goudie.biz/blog3/images/logos/.cop-penguin_t.jpg" alt="cop-penguin.jpg" style="float:left; margin: 0 1em 1em 0;" />
Cette mise à jour, une fois de plus dédiée à mettre en avant les pages de qualité, a pour objectif de <strong>pénaliser les sites détectés comme étant "tricheurs"</strong> 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).<br /><br /></p>
<p>Avec ce nouvel algorithme, Google est donc censé <strong>punir les sites ayant eu recours au "Black Hat"</strong>, 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...<br /><br /></p>
<p><img src="http://www.goudie.biz/blog3/images/logos/.yoyo_t.jpg" alt="yoyo.jpg" style="float:right; margin: 0 0 1em 1em;" />
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 <strong>ont été touchés par l'update</strong>. Trois exemples : mon <a href="http://www.android-games.fr/">site de jeux pour Android</a> 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'<a href="http://www.android-help.fr/">applications utiles pour Android</a> 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%.<br /><br /></p>
<p>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, <strong>je me fais claquer</strong> : 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.<br /><br /></p>
<p><img src="http://www.goudie.biz/blog3/images/logos/.Google-Is-God_s.jpg" alt="Google-Is-God.jpg" style="float:left; margin: 0 1em 1em 0;" />
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.<br /><br /></p>
<p>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 !<br /><br /></p>
<p>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 : <strong>diversifier les sources de trafic</strong> de ses sites, autant que possible. C'est la seule façon de garder un maximum d'indépendance.</p>Hezoug : Theme mobile pour Dotclearurn:md5:e53893a4f8444c42da3dd71154be6e4b2012-04-08T17:15:00+02:002012-04-08T17:15:00+02:00GoudieInternetblogcréationsdesigndotclearinternetmobiles <p><a href="http://www.goudie.biz/blog3/images/dotclear/theme-hezoug.png" title="theme-hezoug.png"><img src="http://www.goudie.biz/blog3/images/dotclear/.theme-hezoug_s.jpg" alt="theme-hezoug.png" style="float:right; margin: 0 0 1em 1em;" /></a>
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.<br /><br /></p>
<blockquote><p>Petit rappel : pour avoir une version mobile de son Dotclear, l'excellent plugin <a href="http://plugins.dotaddict.org/dc2/details/mobileThemeSwitcher">Mobile Theme Switcher</a> est fait pour ça.</p></blockquote>
<p>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 <a href="http://mobifreaks.com/">Mobifreaks.com</a>. 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).<br /><br /></p>
<p>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.<br /><br /></p>
<p>Pour autant, si vous souhaitez l'utiliser et adapter deux-trois choses à votre goût mais que vous ne savez pas à quoi toucher, <strong>je suis tout à fait disponible pour vous aider</strong>. Il vous suffit de laisser un message dans les commentaires où <a href="http://forum.dotclear.org/viewtopic.php?id=46078">sur le sujet du forum Dotclear</a> (mais je risque d'être plus lent à réagir).<br /><br /></p>
<p>Ah deux dernières choses, le menu en haut de page est géré directement depuis Dotclear et son plugin natif <em>simpleMenu</em> (Menu Simple). Cela veut donc dire qu'il faut avoir une installation de Dotclear 2.4 au minimum. Et la dernière chose ? <strong>Hezoug</strong>, 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.<br /><br /></p>
<p>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 <img src="/blog3/themes/default/smilies/laugh.png" alt=":-D" class="smiley" /></p>Observer les aurores boréales sur interneturn:md5:eff2f72bad19d5e31e148cd144c0fe352012-03-10T13:26:00+01:002012-03-10T14:23:26+01:00GoudiePhotographieinternetphotographiesites à voir<p><a href="http://www.goudie.biz/blog3/images/photoblog/aurores-boreales/aurora-9march2012-webcam.jpg" title="aurora-9march2012-webcam.jpg"><img src="http://www.goudie.biz/blog3/images/photoblog/aurores-boreales/.aurora-9march2012-webcam_s.jpg" alt="aurora-9march2012-webcam.jpg" style="float:right; margin: 0 0 1em 1em;" /></a>
Vous le savez peut-être, ces derniers jours ont eu lieu plusieurs éruptions solaire assez fortes. Cela provoque des tempêtes solaires et des particules sont projetées jusqu'à notre Terre, qui sont stoppées par la magnétosphère, formant ainsi les aurores polaires (boréales en pôle nord, et australes au pôle sud).</p> <p>Pour avoir de grandes chances de voir une aurore, quelques jours après une forte éruption solaire, il faut donc se trouver dans les pays nordiques tels que la Suède, la Finlande mais aussi en Islande, au Canada ou encore en Alaska.<br /><br /></p>
<p><a href="http://www.goudie.biz/blog3/images/photoblog/aurores-boreales/live-aurora-borealis-webcam.jpg" title="live-aurora-borealis-webcam.jpg"><img src="http://www.goudie.biz/blog3/images/photoblog/aurores-boreales/.live-aurora-borealis-webcam_s.jpg" alt="live-aurora-borealis-webcam.jpg" style="float:left; margin: 0 1em 1em 0;" /></a>
Pourtant, il est arrivé que des aurores soient observables à de plus basses latitudes. C'était par exemple le cas en 2000, 2001 et 2003, où des aurores boréales ont pu être observées en France. Le pic d'activité solaire étant prévu pour 2013 (cycle de 11 ans) ces phénomènes vont être de plus en plus fréquents, et on peut espérer avoir la chance de voir des aurores en France, de nouveau.<br /><br /></p>
<p>Et si nous n'avons pas encore la chance d'en apercevoir, ni celle de partir en Laponie pour en observer, pourquoi ne pas se contenter de les scruter sur des webcams en direct ? Voici une petite sélection des sites à surveiller, où vous pouvez assez facilement voir des aurores boréales en direct :</p>
<ul>
<li><a href="http://salmon.nict.go.jp/live/aurora_cam/live_aurora_cam_e.html">Fairbanks, Alaska</a> - Assez bonne qualité, aurores très fréquentes.</li>
<li><a href="http://salmon.nict.go.jp/awc/live/index_v_e.php">Fairbanks, Alaska</a> - La même, mais avec un historique des photos très utile.</li>
<li><a href="http://www.aurorawebcam.com/webcam/aurora-webcam">Fairbanks, Alaska</a> - Webcam payante mais très rapide (1 image par seconde).</li>
<li><a href="http://www.asc-csa.gc.ca/eng/astronomy/auroramax/connect.asp">Yellowknife, Canada</a> - Une petite caméra en grand-angle.</li>
<li><a href="http://www.auroraskystation.com/live-camera/9/">Abisco, Suède</a> - Ma préférée ! Excellente qualité et aurores fréquentes (photo d'illustration 1).</li>
<li><a href="http://www.virtualtromso.no/fr/northern-lights/138-live-northern-lights-activity-and-forecast.html">Tromsø, Norvège</a> - Quelques webcams fisheye, et des graphiques de données.</li>
<li><a href="http://www.irf.se/allsky/rtasc.php">Kiruna, Suède</a> - Une live cam en fisheye pour voir de très belles aurores (photo d'illustration 2).</li>
<li><a href="http://www.sgo.fi/Data/RealTime/allsky.php">Sodankylä, Finlande</a> - Trois caméras de faible qualité mais à surveiller.</li>
<li><a href="http://alomar.rocketrange.no/webcam.html">ALOMAR Observatory, Norvège</a> - Souvent dans le brouillard mais peut donner de belles images.</li>
<li><a href="http://uk.jokkmokk.jp/">Jokkmokk, Norvège</a> - Quelques webcams de très bonne qualité.</li>
<li><a href="http://www.abisko.nu/vinter/aurorawebcam/">Abisko, Suède</a> - Ne semble plus fonctionnelle pour l'instant...</li>
<li><a href="http://www.webcamsinnorway.com/map/">Webcams in Finland</a> - De très nombreuses webcams, mais très peu sont adaptées aux aurores.</li>
<li><a href="http://aurora.fmi.fi/public_service/suomi/latest_asc_image.html">6 autres webcams en Finlande</a> - Fisheye. Aurores moins fréquentes, et qualité faible.</li>
</ul>
<p>N'hésitez pas à en proposer d'autres !<br /><br />
En plus :</p>
<ul>
<li><a href="http://helios.swpc.noaa.gov/ovation/">OVATION Aurora</a> - Pour avoir un oeil sur la probabilité des aurores polaires.</li>
<li><a href="http://www.swpc.noaa.gov/rt_plots/index.html">Des graphiques à surveiller</a> - Pour les connaisseurs (indice KP, magnétomètre...).</li>
</ul>Arrêtez de nous saouler avec Free Mobile !urn:md5:c4f14c44bfc2a0fc861138a4ddde13072012-01-07T13:59:00+01:002012-01-07T14:10:29+01:00GoudieInternetinternetje rale si je veuxmobiles <p><img src="http://www.goudie.biz/blog3/images/life/.free-mobile_s.jpg" alt="free-mobile.jpg" style="float:right; margin: 0 0 1em 1em;" />
Entre les images "<em>ULTRA TOP SECRET</em>" des forfaits Free Mobile en exclu inter-galactique, les news pour dire "<em>le site mobile.free.fr a ajouté un <br/> dans son code source TRUC DE MALADE !</em>", 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 <img src="/blog3/themes/default/smilies/laugh.png" alt=":-D" class="smiley" /> . Trois bonnes raisons <strong>personnelles</strong> d'arrêter de (me) faire chier le monde avec Free Mobile :</p>
<h3>Y'en a plus pour très longtemps.</h3>
<p>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 ?</p>
<h3>Vu du Canada, ça fait encore plus chier.</h3>
<p>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 : <strong>c'est la merde !</strong> Alors Free va peut-être enfoncer le clou sur un marché qui pour moi est déjà très convenable.</p>
<h3>Vous allez être déçus !</h3>
<p>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.<br /><br /></p>
<p>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...<br /><br /></p>
<p>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 <em>followers</em> 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)<br /><br /></p>
<p>Cet article n'est d'ailleurs pas là pour faire du buzz puisque vous aurez remarqué son contenu totalement inintéressant, mais comment dire :</p>
<font size="200" color="red">Il fallait que ça sorte !</font>
<p><br />Et pour un premier article en 2012, ça fait du bien <img src="/blog3/themes/default/smilies/laugh.png" alt=":-D" class="smiley" /> Bonne année ! !</p>Analytics : compter les clics internes avec event trackingurn:md5:e9481546d339b0da47a9106cee9a4d772011-12-26T08:33:00+01:002011-12-27T05:02:24+01:00GoudieInternetanalyticsgoogleinternetstatstuto<p><img src="http://www.goudie.biz/blog3/images/logos/google-analytics.jpg" alt="Comment suivre les liens internes avec Google Analytics." style="float:right; margin: 0 0 1em 1em;" />
Depuis un moment je recherchais une solution simple pour <strong>tracker mes liens avec Google Analytics</strong>. Les objectifs sont multiples. La principale utilité que j’en ai étant d’<strong>avoir un suivi de clics sur n’importe quelle partie du site</strong>, par exemple :</p>
<ul>
<li>suivre les clics sur le menu principal d’un site, ou sur un menu secondaire</li>
<li>compter les clics sur un bouton de téléchargement</li>
<li>les clics sur le bouton “Play” d’une vidéo</li>
<li>savoir combien de personnes cliquent sur les miniatures de photos pour les agrandir</li>
<li>mesurer l’usage d’un jQuery ou d’éléments AJAX par vos visiteurs</li>
<li>savoir quel pourcentage de visiteurs cliquent sur la promotion d’un site e-commerce</li>
</ul>
<p>En plus de pouvoir analyser ces actions internes au site, l<em>'event tracking</em> 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.<br /><br /></p>
<p>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.<br /><br /></p>
<p>J’ai finalement trouvé mon bonheur avec un morceau de code tout bête, une solution facile à installer et à configurer en utilisant le <strong>event tracking</strong>, 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...</p> <h3>Le Suivi des Événements (event tracking)</h3>
<p><img src="http://www.goudie.biz/blog3/images/screens/analytics/.pointeur-souris-curseur_t.jpg" alt="Pointeur de souris." style="float:right; margin: 0 0 1em 1em;" />
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<em>'event tracking</em> peut aussi être utilisé pour de simples survols (<em>hover</em>) 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.<br /><br /></p>
<p>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 <em>event tracking</em> : il ne peut pas être utilisé pour définir un Objectif dans votre Google Analytics.<br /><br /></p>
<p>Si vous avez fait le deuil de cette fonctionnalité pour vos évènements, on peut enfin passer à la pratique :</p>
<h3>Déterminer la zone à analyser</h3>
<p>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 <em>header</em> de <a href="http://www.android-games.fr/">Android-Games.fr</a> :<br /><br /></p>
<p><a href="http://www.goudie.biz/blog3/images/screens/analytics/androidgames-header-menu.jpg" title="androidgames-header-menu.jpg"><img src="http://www.goudie.biz/blog3/images/screens/analytics/.androidgames-header-menu_m.jpg" alt="Menu horizontal traqué par Google Analytics sur Android-Games.fr" style="display:block; margin:0 auto;" /></a><br /></p>
<h3>Mise en place du code de suivi</h3>
<p>D’abord, s’assurer que vous utilisez bien la <strong>dernière version du script</strong> Google Analytics (asynchrone). Ensuite, il suffit de placer un morceau de code javascript (<em>onclick</em>) dans les balises de liens que vous souhaitez tracker : <code>_gaq.push(['_trackEvent', 'CATEGORY', 'ACTION', 'LABEL', VALUE, opt_noninteraction]);</code><br /><br /></p>
<p>Dans l’exemple de mon menu, ça donne :</p>
<p><code><a href="http://www.goudie.biz/?blog/2011/12/accueil.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'Accueil']);">Accueil</a></code>
<code><a href="http://www.goudie.biz/?blog/2011/12/tests.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'Tests']);">Accueil</a></code>
<code><a href="http://www.goudie.biz/?blog/2011/12/news.html" onClick="_gaq.push(['_trackEvent', 'Clic', 'Menu', 'News']);">Accueil</a></code></p>
<p>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 :</p>
<ul>
<li>"_trackEvent" (<strong>obligatoire</strong> puisque c’est lui qui déclare l’événement)</li>
<li>la <strong>catégorie</strong> de l’événement (<strong>obligatiore</strong>, ici <em>Clic</em>)</li>
<li>l’<strong>action</strong> qui correspond à cette catégorie (<strong>obligatoire</strong>, ici <em>Menu</em>)</li>
<li>le <strong>libellé</strong> qui correspond à cette action (<strong>facultatif</strong>, ici le nom des liens)</li>
<li>la <strong>valeur</strong> qui correspond à ce label (<strong>facultatif</strong>, non utilisé ici)</li>
<li>le dernier paramètre (<strong>facultatif</strong>) est <em>opt_noninteraction</em>, et s'utilise en inscrivant "true" : j’y reviens plus bas.</li>
</ul>
<p>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 <strong>catégorie</strong> par <em>Clic</em> (puisque les événements peuvent servir pour autre chose que les clics). J’ai défini l’<strong>action</strong> <em>Menu</em> qui correspond donc à un <em>Clic</em> sur le <em>Menu</em>. Enfin, le <strong>libellé</strong> est simplement le nom du lien cliqué. Je peux donc suivre les <em>Clics</em> sur les liens du <em>Menu</em> tels que <em>Accueil</em>, <em>Tests</em>, <em>News</em>...<br /><br /></p>
<p>Je n’ai pas utilisé le paramètre de <strong>valeur</strong>, mais il peut être très utile pour affiner encore plus les statistiques dans certains usages. En utilisant des <strong>valeurs numériques</strong>, les possibilités sont infinies !<br /><br /></p>
<h3>Rapport d’événements dans Google Analytics</h3>
<p><img src="http://www.goudie.biz/blog3/images/screens/analytics/evenements-dans-analytics.jpg" alt="Le menu des événements dans Google Analytics." style="float:right; margin: 0 0 1em 1em;" />
Dès les premiers résultats, vous allez voir apparaître les nouvelles données dans Google Analytics, dans <em><strong>Contenu > Événements</strong></em> (nouvelle version).<br /><br /></p>
<p>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... <strong>Optimisez</strong> ! (et j’avais encore une floppée de mots en “ez” sous le nez à vous donner, mais je vais vous <del>épargnez</del>... ah non, raté.)<br /><br /></p>
<h3>Influence sur le taux de rebond et solution</h3>
<p><strong>Il est à noter que le suivi d’événement va faire baisser plus ou moins significativement le taux de rebond sur votre site</strong>. 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 :</p>
<p>Prenons une page avec un slideshow jQuery. Vous analysez les clics sur le bouton “suivant” du slideshow.</p>
<p>Si visiteur qui arrive sur votre page, clique sur “suivant” puis quitte votre site :</p>
<ul>
<li>Sans le tracker, il sera compté comme un <strong>rebond</strong> puisqu’il n’aura pas vu d’autre page et donc pas fait d’autre “requête” à Google Analytics.</li>
<li>Avec le tracker, il sera compté comme un <strong>non-rebond</strong> puisqu’en cliquant sur “suivant” il aura envoyé une “requête” à Google Analytics, même sans changer de page.</li>
</ul>
<p>J’espère que c’est assez clair <img src="/blog3/themes/default/smilies/smile.png" alt=":-)" class="smiley" /> . Heureusement, si vous tenez à éviter cela, une solution existe et c’est notre fameux paramètre <em>opt_noninteraction</em> 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 !</p>
<h3>Tirer les conséquences et envisager des modifications</h3>
<p>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 :</p>
<ul>
<li>15% des visiteurs l’utilisent.</li>
<li>Que ces visiteurs voient 2x plus de pages que la moyenne.</li>
<li>Qu’ils passent 3x plus de temps sur le site que la moyenne.</li>
<li>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.</li>
</ul>
<p><a href="http://www.goudie.biz/blog3/images/screens/analytics/analytics-menu-evenements-clics.jpg" title="analytics-menu-evenements-clics.jpg"><img src="http://www.goudie.biz/blog3/images/screens/analytics/.analytics-menu-evenements-clics_m.jpg" alt="Répartition des clics sur un menu à l'aide du tracking event." style="display:block; margin:0 auto;" /></a><br /></p>
<p>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.<br /><br /></p>
<p>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 !<br /><br /></p>
<p>Le <em>event tracking</em> 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 <a href="http://code.google.com/intl/fr-FR/apis/analytics/docs/tracking/eventTrackerGuide.html">page d’aide Google Analytics dédiée au event tracking</a> (en anglais).</p>Google retire des +1 pour les sites "dangereux"urn:md5:4f992778ab298b5436d6fd6f8a2158872011-11-20T08:08:00+01:002011-11-23T18:44:02+01:00GoudieInternetgoogleinternet<p><img src="http://www.goudie.biz/blog3/images/screens/site-malveillant/.google-moins-1-bouton_s.jpg" alt="google-moins-1-bouton.jpg" style="float:right; margin: 0 0 1em 1em;" />
Cela m'était déjà arrivé de me faire pirater mon site. Une fois, quelqu'un a supprimé tout ce que contenait le FTP, là où sont stockés tous les fichiers de mes sites. Je les ai vus filer sous mes yeux. Mais aujourd'hui c'était un tout autre problème.<br /><br /></p>
<p><a href="http://www.android-games.fr/">Android-Games.fr</a>, sur lequel je donne beaucoup de temps en ce moment, a été victime d'une injection de code dans ses fichiers .htaccess, des fichiers importants du serveur. Chez Android Games, il servent à avoir de belles URL sans le point d'interrogation (contrairement à ici sur Goudie.biz) mais aussi à <a href="http://www.goudie.biz/?blog/2007/08/10/343-forcer-www-dans-adresse-de-son-site-htaccess">forcer le www</a>, ou encore rediriger des URLs.<br /><br /></p>
<p>C'est donc un code redirigeant vers un site malhonnête, lui même redirigeant vers un site malhonnête et installant trois trojans sur l'ordinateur du client, ce genre de code qui a été inséré dans le fichier .htaccess de Android-Games.fr.</p> <p><img src="http://www.goudie.biz/blog3/images/screens/site-malveillant/anti-malware.png" alt="anti-malware.png" style="float:left; margin: 0 1em 1em 0;" />
S'en suit une situation particulièrement désagréable pour tout webmaster de site web : être catégorisé par Google comme un site malveillant. Vous êtes certainement déjà tombé sur ce message, qui avant même de vous faire accéder au site, vous arrête pour dire quelque chose du genre "ce site n'est pas un site de confiance et il a été détecté comme potentiellement dangereux pour votre ordinateur", ce qui revient, dans la tête de l'internaute qui vogue d'une page à l'autre, à dire "ici sur Android-Games.fr y'a un virus, n'y va pas".<br /><br /></p>
<p>Une situation particulièrement désagréable pour le webmaster, surtout lorsque toutes les pages du site sont accompagnées dans les résultats de recherche de la superbe mention : <em>Ce site risque d'endommager votre ordinateur</em>. Puisque Google nous empêche d'y accéder de toute façon, autant qu'il le retire des résultats, au lieu de pourrir la réputation du site en question...<br /><br /></p>
<p><img src="http://www.goudie.biz/blog3/images/screens/site-malveillant/google-site-malveillant.png" alt="google-site-malveillant.png" style="display:block; margin:0 auto;" /></p>
<p>Si cela vous arrive, rendez-vous dans le Google Webmaster Tools pour y voir normalement l'avertissement, et la ou les pages en question (ici dans le cas d'un .htaccess piraté, c'est le site entier). Il y a donc un formulaire permettant de soumettre une nouvelle vérification du site, à valider bien sûr uniquement une fois que vous êtes certain d'avoir fait le ménage (et croyez-moi que quand c'est planqué dans le .htaccess après une centaine de lignes vides, ça saute pas forcément aux yeux).<br /><br /></p>
<p>Bref, j'ai pu sortir mon site de cet embarras (pour combien de temps ?) avec la complicité du support de Planet Hoster, mon hébergeur, chez lequel tout n'est pas rose et dont je ferais un article, à un moment où un autre (sans doute un des rares moments où je serais motivé à écrire).<br /><br /></p>
<p><img src="http://www.goudie.biz/blog3/images/screens/site-malveillant/.google-plus-1-synchronised_s.jpg" alt="google-plus-1-synchronised.jpg" style="float:right; margin: 0 0 1em 1em;" />
Tout ça pour en arriver au plus étrange fait de cette histoire jusqu'ici banale : <strong>avant le piratage</strong>, le compteur de +1 de le l'URL Android-Games.fr (présent sur toutes les pages du site) comptait <strong>39 clics</strong> tandis que celui de la <a href="https://plus.google.com/109422686413859889112/">page Google+ de Android Games</a> en comptabilisait environ autant.<br /><br /></p>
<p><strong>Après</strong> le piratage (et même pendant), <strong>les deux compteurs n'indiquaient plus que 3 "+1"</strong> chacun !<br /><br /></p>
<p>Alors au-delà du fait que je me fiche totalement du compteur de +1 car son effet positif sur le site est bien difficile à mesurer, deux questions se posent tout de même :</p>
<ul>
<li>Pourquoi Google a t-il supprimé presque la totalité des "+1" sur ces pages ?</li>
<li>Est-ce vraiment à cause de cette avertissement au piratage, ou le simple hasard ? Et dans ce cas, pour quelle raison et "en quel honneur" ?</li>
<li>Comment Google peut-il synchroniser les +1 d'une page Google+ et celui d'un site web ?</li>
</ul>
<p>Pour ma part, la dernière question se pose depuis que Google+ a ouvert l'inscription des Pages il y a quelques jours. Il n'y a aucune validation ou authentification qui certifie que je suis bien le propriétaire de Android-Games.fr et de sa page Google+, pourtant leur compteur de +1 est similaire. Cela me semblerait bizarre et un peu trop osé qu'il utilise Google Analytics ou GWT pour le savoir (même compte Google).<br /><br /></p>
<p>Bref, aujourd'hui j'ai galéré avec cette histoire de .htaccess modifié, j'ai mis à jour le Dotclear en version 2.4 et j'espère que ça ne se reproduira pas trop vite... car c'est chiant.<br /><br /></p>
<p><strong>Mise à jour 23 novembre 2011 :</strong> Finalement, j'ai trouvé ma réponse pour les +1 synchronisés. En ajoutant le script du bouton ou du badge Google+, l'ID de la page Google+ est présent et peut donc certifier que celle-ci est associée à ce site web.</p>