<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tutoweb &#187; Webmastering</title>
	<atom:link href="http://www.tutoweb.be/category/webmastering/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tutoweb.be</link>
	<description>Graphisme, ergonomie web et typographie</description>
	<lastBuildDate>Fri, 20 Jan 2012 14:42:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Un glossaire pour Google</title>
		<link>http://www.tutoweb.be/webmastering/glossaire-google/</link>
		<comments>http://www.tutoweb.be/webmastering/glossaire-google/#comments</comments>
		<pubDate>Tue, 22 Jun 2010 09:25:38 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[define]]></category>
		<category><![CDATA[definition]]></category>
		<category><![CDATA[dictionnaire]]></category>
		<category><![CDATA[glossaire]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[lexique]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4300</guid>
		<description><![CDATA[Un moteur de recherche est une fenêtre ouverte vers le web. On lui soumet une requête et il nous propose une sélection de résultats avec plus ou moins de pertinence. Ces résultats s'affichent sous forme de snippet avec un titre, deux lignes descriptives ou sous forme d'extrait du contenu cible. Une manière concise et efficace [...]]]></description>
			<content:encoded><![CDATA[<p>Un moteur de recherche est une fenêtre ouverte vers le web. On lui soumet une requête et il nous propose une sélection de résultats avec plus ou moins de pertinence. Ces résultats s'affichent sous forme de snippet avec un titre, deux lignes descriptives ou sous forme d'extrait du contenu cible. Une manière concise et efficace pour inciter les visiteurs à cliquer. </p>
<p>Superbibi publie un article fort intéressant: «&nbsp;<a href="http://www.superbibi.net/referencement/comment-apparaitre-dans-google-definition">Comment apparaître dans Google definition</a>&nbsp;». Une manière de se hisser dans le haut du tableau pour une modeste page de définitions. Tapez <span class="tape-utilisateur">define:tartampion</span> dans le moteur. </p>
<p><img src="/images/capture-google-definition.gif" class="bordure" alt="Capture Google definition"><span class="legende">Capture Google.be (22/06/10)</span></p>
<p>On remarque l'omniprésence de Wikipédia dans les premiers résultats. Rien de nouveau sous le soleil. Autre point, Google fait un choix dans la sélection et au diable les autres définitions. Ici pas de place pour l'exhaustivité. Ensuite, la définition tient sur deux lignes. C'est propre, concis, bref... Cela suppose que si vous écrivez des définitions courtes (comme le propose Superbibi), il ne s'agit plus d'une citation mais de toute la définition. Autrement dit, l'internaute n'a même plus besoin de venir visiter votre site. Dans ce cas, on ne parle même plus de taux de rebond&nbsp;! Google devient donc un outil de contenu, tout comme il le fait avec les actualités. On sait par ailleurs qu'une grosse majorité ne lisent que les titres. À décharge de la multinationale, la page est exempte de toute publicité. Le public visé est sans doute trop maigre. Qui utilise couramment ce critère de recherche, à l'exception des technophiles&nbsp;?</p>
<p>Sur la forme, les référenceurs se grattent la tête pour optimiser leur page. Ils chipotent sur des détails dont le seul but est un maximum de visibilité sur les moteurs. Ils oublient un peu vite l'aspect sémantique du code. Il existe à cet effet une balise adéquate <code>&lt;dl&gt;</code> conçue pour les listes de définitions. Fort est de constater dans la pratique que les sites choisis par Google sont loin d'avoir recours à cette balise mais font plutôt appel à des <code>&lt;p&gt;</code> ou des <code>&lt;table&gt;</code>. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/glossaire-google/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Évitez les frames</title>
		<link>http://www.tutoweb.be/webmastering/frames/</link>
		<comments>http://www.tutoweb.be/webmastering/frames/#comments</comments>
		<pubDate>Sun, 04 Oct 2009 19:08:23 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[cadre]]></category>
		<category><![CDATA[frame]]></category>
		<category><![CDATA[site]]></category>
		<category><![CDATA[Vidéo]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=1587</guid>
		<description><![CDATA[Lors de l'apparition des cadres (frames) en mars 1996 par Netscape, les webmasters se sont rués sur cette nouvelle possibilité de mise en page. Plusieurs pages sont intégrées dans un «&#160;jeu de cadre&#160;» (frameset). De cette manière, il est possible de faire défiler une page tout en conservant à l'écran le système de navigation, la [...]]]></description>
			<content:encoded><![CDATA[<p>Lors de l'apparition des cadres (<i>frames</i>) en mars 1996 par Netscape, les webmasters se sont rués sur cette nouvelle possibilité de mise en page. Plusieurs pages sont intégrées dans un «&nbsp;jeu de cadre&nbsp;» (<i>frameset</i>). De cette manière, il est possible de faire défiler une page tout en conservant à l'écran le système de navigation, la bannière du site... Malheureusement, les frames contiennent des obstacles de taille.</p>
<p>Tous les navigateurs ne gèrent pas le <i>frameset</i> de la même façon. Il en découle des variations d'affichage plus ou moins importantes en fonction du <i>browser</i> et des versions.  </p>
<p><object width="535" height="388"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6891624&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=59a5d1&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6891624&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=59a5d1&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="535" height="388"></embed></object>
<p>Autre inconvénient, ce système vieillot pose problème en terme de référencement. Les moteurs de recherche indexent des pages de manière individuelle. La reprise d'une page interne dans les résultats d'un moteur, la rend orpheline de son cadre parent et donc du système de navigation. </p>
<p>L'usage des cadres condamne la référence aux liens profonds. Dans l'exemple de <span class="url">maitre.gege.free.fr</span>, impossible de créer un lien interne en référence à une recette par exemple. Cela ne pose pas trop de problème pour un site vitrine de quelques pages, mais impensable pour un site conséquent. Un lien doit pouvoir pointer directement vers une ressource pour épargner un travail inutile de recherche au lecteur. </p>
<p>Dernier inconvénient, l'impression peut poser problème en fonction de la position du curseur dans le jeu de frames. L'idéal est de prévisualiser le rendu final dans le menu <span class="menu">Fichier</span> mais c'est loin d'être un réflexe. </p>
<p>Lire ailleurs: «&nbsp;<a href="http://openweb.eu.org/articles/finir_cadres/">Pour en finir avec les cadres</a>&nbsp;»</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/frames/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Statistiques de fréquentation</title>
		<link>http://www.tutoweb.be/webmastering/statistiques/</link>
		<comments>http://www.tutoweb.be/webmastering/statistiques/#comments</comments>
		<pubDate>Tue, 25 Aug 2009 20:43:33 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[fréquentation]]></category>
		<category><![CDATA[log]]></category>
		<category><![CDATA[outil]]></category>
		<category><![CDATA[statistiques]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4067</guid>
		<description><![CDATA[Il existe de nombreux outils en ligne pour révéler de nombreuses informations sur le trafic de votre site web. Elles sont relativement simples à mettre en place et nécessite un minimum de connaissances. Pour une entreprise, les statistiques sont incontournables pour analyser le profil des visiteurs ainsi que leur comportement sur les pages web. Toutefois, [...]]]></description>
			<content:encoded><![CDATA[<p>Il existe de nombreux outils en ligne pour révéler de nombreuses informations sur le trafic de votre site web. Elles sont relativement simples à mettre en place et nécessite un minimum de connaissances. Pour une entreprise, les statistiques sont incontournables pour analyser le profil des visiteurs ainsi que leur comportement sur les pages web. Toutefois, il est facile de tomber dans le piège de l'interprétation des données. Pour les sites à grande échelle, il est sage de faire appel à un spécialistes afin d'éviter bien des écueils. </p>
<h2>Fonctionnement de base</h2>
<p>Pour faire rapide, le serveur - sur lequel est hébergé votre site - enregistre toutes les allées et venues. Il conserve ces évènements dans un fichier historique appelé «&nbsp;<strong>fichier de log</strong>&nbsp;». Chaque ligne de ce fichier correspond à un élément reçu ou transféré depuis le serveur. Ce document comporte des informations extrêmement précises: pages vues, date de visite, temps de visite, origine, fiche détaillée du profil utilisateur, erreurs 404, redirections, etc.</p>
<p>Ce fichier, originellement en mode texte, comporte de très nombreuses lignes, comportant une codification particulière qu'il est impossible d'exploiter aisément sous sa forme native. Des logiciels spécialisés permettent de traiter automatiquement ce fichier et d'en extraire des informations directement exploitables par les webmasters. Ces résultats sont généralement présentés sous forme graphique pour en faciliter la lecture. </p>
<h2>À quoi sert l'analyse des visites&nbsp;?</h2>
<p>Contrairement aux autres médias, le web a la faculté de suivre toute l'activité des visiteurs à la trace. Pour les responsables marketing, ils peuvent juger quantitativement le trafic, la fidélité des visiteurs, le taux de rebond, la popularité de chaque page, les liens cliqués, les fichiers téléchargés... Une analyse régulière des statistiques permet de mettre en évidence les points forts et les faiblesses du site. Naturellement, il ne s'agit que d'un outil informatique qui ne propose aucune solution intelligente. </p>
<h2>Comment avoir accès aux statistiques&nbsp;?</h2>
<p>Il existe de nombreuses solutions, chacune présente des avantages et des inconvénients. À chacun de tester et de choisir en fonction de ses besoins. J'ai repris ici les solutions les plus courantes. </p>
<h3>1. Statistiques de l'hébergeur</h3>
<p>Généralement, tout hébergeur fournit des statistiques en ligne présentées sous formes de tableaux et de diagrammes. Cette présentation peut être sommaire pour la version gratuite ou détaillée pour la version payante. Renseignez-vous auprès de votre hébergeur pour savoir si vous avez accès aux statistiques. Les informations le plus souvent reprises sont...</p>
<ul>
<li>nombre de visites, pages vues</li>
<li>volume d'information chargé (pages, images, son)</li>
<li>équipement software des utilisateurs (navigateur, système d'exploitation)</li>
<li>expressions reprises dans les moteurs de recherche</li>
<li>source du trafic (<i>referer</i>)</li>
</ul>
<p><img src="/images/capture-awstats.gif" alt="Capture des statistiques" class="bordure"><br /><span class="legende">Capture des statistiques avec <a href="http://awstats.sourceforge.net/">AWStats</a></span></p>
<h3>2. Service distant</h3>
<p>Des sites spécialisés proposent des analyses de statistiques. Pour permettre l'analyse du trafic, il faut alors éditer ses pages et ajouter un morceau de code. En échange de leur gratuité, certains imposent l'affichage du logo de la société sur vos pages. D'autres, comme Google Webmaster Tools n'exigent rien en échange si ce n'est un compte de messagerie auprès du fournisseur. L'accès se fait en ligne via votre navigateur. Les données se présentes sous formes de tableaux et graphismes.</p>
<p><img src="/images/capture-gwt.gif" alt="Capture des statistiques" class="bordure"><br /><span class="legende">Capture des statistiques avec Google Webmaster Tools</span></p>
<h3>3. Plug-in pour son blog</h3>
<p>Allez voir du côté des extensions que proposent la plate-forme de votre blog. Il est fort à parier que vous y trouverez des ressources intéressantes. Sur WordPress, il en existe de différentes sortes. Une fois choisi et installé, les données sont accessibles directement dans l'interface administrateur. C'est pratique et efficace mais il n'existe pas - à ma connaissance - de greffon aussi complet et détaillé que les deux solutions précédentes. Il faudra sans doute, installer plusieurs plug-in. </p>
<p><img src="/images/capture-wp-stats.gif" alt="Capture des statistiques" class="bordure"><br /><span class="legende">Capture des statistiques sous WordPress</span></p>
<h3>4. Fichier log</h3>
<p>Le fichier log est un fichier texte à la racine de votre site et qui enregistre toutes les entrées et les sorties des visiteurs et des robots. Il est accessible par simple téléchargement via FTP. Certains hébergeurs restreignent l'accès pour des raisons économiques: ils proposent l'exploitation des données dans une formule payante. </p>
<p>Une fois récupéré en local, rien ne vous empêche de lire ce fichier texte mais c'est assez indigeste puisque les informations sont amassées les unes à la suite des autres. Utilisez un logiciel approprié comme <a href="http://webtrends.com/">WebTrends</a> ou le <i>freeware</i> <a href="http://www.mrunix.net/webalizer/">The Webalizer</a>. C'est la solution la plus complète pour une analyse pointue. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/statistiques/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Abréviations pour le web</title>
		<link>http://www.tutoweb.be/webmastering/abreviations-web/</link>
		<comments>http://www.tutoweb.be/webmastering/abreviations-web/#comments</comments>
		<pubDate>Thu, 30 Jul 2009 17:35:58 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[abbr]]></category>
		<category><![CDATA[abréviation]]></category>
		<category><![CDATA[acronym]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[sigle]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=2999</guid>
		<description><![CDATA[Après avoir vu en détails les règles, la partie la plus simple est d'ajouter une abréviation sur une page web. Jusqu'à présent, il n'y a pas vraiment de secret. Les deux balises existantes sont: acronym et abbr. En raison d'une certaine confusion entre les deux, le HTML 5 risque de faire passer à la trappe [...]]]></description>
			<content:encoded><![CDATA[<p>Après avoir vu en détails les <a href="/typo-abreviations.htm">règles</a>, la partie la plus simple est d'ajouter une abréviation sur une page web. Jusqu'à présent, il n'y a pas vraiment de secret. Les deux balises existantes sont: <code>acronym</code> et <code>abbr</code>. En raison d'une certaine confusion entre les deux, le HTML 5 risque de faire passer à la trappe la balise <code>acronym</code>.</p>
<h2>Les abréviations dans le code source</h2>
<p>Il est important d'apporter un soin particulier à ses abréviations surtout si votre public est étranger à votre culture ou au sujet traité. Il faut pour cela passer dans le code pour personnaliser les abréviations et les acronymes. L'attribut <code>title</code> accueille la signification du sigle. Elle s'affichera au survol de la souris. L'attribut <code>lang</code> est intéressant que si l'abréviation est dans une autre langue que celle du <code>doctype</code>. Par exemple, une page en français a intérêt à préciser la langue pour les abréviations en anglais. Ces informations sont importantes pour les humains, les moteurs de recherche mais aussi les lecteurs d'écran qui adaptent le ton de la voix et la prononciation.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
</pre>
<pre><span class="html"><span class="html-other-element">&lt;p&gt;</span>
<span class="html-anchor-element">&lt;abbr title=<span class="html-attribute">&quot;Cascading Style Sheet&quot;</span> lang=<span class="html-attribute">&quot;en&quot;</span>&gt;</span>CSS<span class="html-anchor-element">&lt;/abbr&gt;</span>
<span class="html-other-element">&lt;/p&gt;</span></span></pre>
</div>
<p>Cette tâche rébarbative - réservée au webmaster - est limitée dans la pratique et les nouveaux outils. Généralement, on indique la description d'un sigle uniquement dans sa première occurrence. Cela évite de se coltiner un travail répétitif. Aussi, il existe certains outils pour vous faciliter la vie et éviter de retaper 50 fois la même chose. Pour les blogs, des plug-in sont performants mais limités [&sup1;]. Pour les concepteurs web, chaque outil d'édition web fournit certainement ce genre de service. Dreamweaver par exemple permet l'enregistrement de fragment de code (<i>snappet</i>) accessible en un clic. </p>
<h2>Abréviation et accessibilité</h2>
<p>Les personnes mal ou non voyantes utilisent des synthétiseurs vocaux pour naviguer sur les pages web. Actuellement, tous ne gèrent pas correctement les abréviations. Certains permettent de le faire mais faut-il encore les configurer correctement ou enrichir personnellement le dictionnaire interne.</p>
<p>Il en va de même si l'abréviation se trouve entre la balise <code>abbr</code> . Je rappelle d'ailleurs qu'Internet Explorer, navigateur lié à la plupart de ces lecteurs, ignore tout simplement cette balise. Pour éviter tout soucis de compréhension, <strong>mieux vaut écrire les abréviations en toutes lettres</strong>.</p>
<p>Si votre soucis typographique est plus fort que tout, la solution des feuilles de style est une solution uniquement pour les abréviations. Inutile de le faire pour les formules arithmétiques ou chimiques étant donné que les balises <code>sup</code> et <code>sub</code> jouent un rôle sémantique.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
</pre>
<pre><span class="css">.abr-exposant {
<span class="css-property">vertical-align<span class="css-selector">:</span><span class="css-value"> super</span></span>;
}</span></pre>
</div>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] Lire à ce sujet: «&nbsp;<a href="http://www.tutoweb.be/wordpress/abreviations/">Ajouter des abréviations facilement</a>&nbsp;».</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/abreviations-web/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ajouter un fichier audio sur son blog</title>
		<link>http://www.tutoweb.be/webmastering/musique-blog/</link>
		<comments>http://www.tutoweb.be/webmastering/musique-blog/#comments</comments>
		<pubDate>Thu, 05 Feb 2009 17:42:37 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[audio]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[lecteur]]></category>
		<category><![CDATA[musique]]></category>
		<category><![CDATA[son]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=1565</guid>
		<description><![CDATA[Vous disposez d'un fichier sonore et vous souhaitez le partager sur le blog. Pour ce faire, il vous faut un hébergement et un player audio. La première chose à faire: envoyer son fichier MP3 sur le serveur distant via un logiciel FTP. Ensuite, il faut envoyer le petit player en flash. Il en existe quelques-uns [...]]]></description>
			<content:encoded><![CDATA[<p>Vous disposez d'un fichier sonore et vous souhaitez le partager sur le blog. Pour ce faire, il vous faut un hébergement et un <i>player</i> audio. La première chose à faire: envoyer son fichier MP3 sur le serveur distant via un logiciel FTP. Ensuite, il faut envoyer le petit <i>player</i> en flash. Il en existe quelques-uns gratuits sur internet. J'ai choisi le célèbre <a haref="http://www.alsacreations.fr/dewplayer">Dew player</a>. Enfin, il est nécessaire d'ajouter du code HTML à l'endroit souhaité pour définir le chemin vers le lecteur audio ainsi que le fichier à lancer. </p>
<p><object type="application/x-shockwave-flash" data="/video-audio/dewplayer.swf?son=/video-audio/ame-soeur.mp3" width="200" height="20"><param name="movie" value="/video-audio/dewplayer.swf?son=/video-audio/ame-soeur.mp3" /></object></p>
<p>Copiez cette partie du code pour la mettre dans votre page web. Dans mon cas, le lecteur (dewplayer.swf) se trouve à la racine ainsi que la musique <i>Âme sœur</i> tirée du site <span class="url">www.musique-libre.org</span>.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
</pre>
<pre><span class="html"><span class="html-other-element">&lt;object type=<span class="html-attribute">&quot;application/x-shockwave-flash&quot;</span> data=<span class="html-attribute">&quot;dewplayer.swf?son=http://katsoura.free.fr/download/ame-soeur.mp3&quot;</span> width=<span class="html-attribute">&quot;200&quot;</span> height=<span class="html-attribute">&quot;20&quot;</span>&gt;</span>
<span class="html-other-element">&lt;param name=<span class="html-attribute">&quot;movie&quot;</span> value=<span class="html-attribute">&quot;dewplayer.swf?son=http://katsoura.free.fr/download/ame-soeur.mp3&quot;</span> /&gt;</span>
<span class="html-other-element">&lt;/object&gt;</span></span></pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/musique-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://katsoura.free.fr/download/ame-soeur.mp3" length="0" type="audio/mpeg" />
		</item>
		<item>
		<title>Lien automatique dans le contenu</title>
		<link>http://www.tutoweb.be/webmastering/lien-automatique/</link>
		<comments>http://www.tutoweb.be/webmastering/lien-automatique/#comments</comments>
		<pubDate>Wed, 09 Jul 2008 23:49:30 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[lien]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/?p=248</guid>
		<description><![CDATA[Certains mordus du référencement vous diront qu'il faut absolument créer des liens internes dans vos pages pour garder vos visiteurs et faire monter votre visibilité dans les moteurs de recherche. Et pour vous faciliter le travail, des outils automatiques permettent de créer du lien interne. Elle est pas belle la vie&#160;! WordPress dispose déjà d'une [...]]]></description>
			<content:encoded><![CDATA[<p>Certains mordus du référencement vous diront qu'il faut absolument créer des liens internes dans vos pages pour garder vos visiteurs et faire monter votre visibilité dans les moteurs de recherche. Et pour vous faciliter le travail, des outils automatiques permettent de créer du lien interne. Elle est pas belle la vie&nbsp;!</p>
<p>WordPress dispose déjà d'une extension «&nbsp;<a href="http://wasabi.pbworks.com/w/page/5264043/Related-Entries">Related Entries</a>&nbsp;» bien connue et largement utilisée. Pour avoir essayé le plug-in, je le trouve formidable et pénible. Autant il arrive à faire des liens pertinents, autant il relie des billets qui n'ont aucun sens sur le fond. Il faut avoir un blog ultra-spécialisé pour espérer de bons résultats.</p>
<p>Une autre technique est de générer automatiquement des liens internes sur certains mots. Sur des plateformes importantes comme les portails, ce travail pénible et laborieux est assuré par une application. Le problème c'est qu'on se trouve souvent face à des résultats absurdes.</p>
<p>Hier, je cherchais un dessert sympa et rapide. Je tombe sur le <a href="http://cuisine.journaldesfemmes.com/recette/313619-gateau-de-riz-traditionnel" rel="nofollow" class="contenu">gâteau de riz</a>. Le premier lien vers la <i>vanille</i>, renvoie vers un article détaillé sur l'ingrédient. Le lien du <i>moule</i> à charlotte me propose un article sur le mollusque&nbsp;! Enfin, le lien vers le <i>fond</i> du récipient me donne la définition d'un bouillon.</p>
<p><img src="/images/recette-capture-lien.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture d'écran linternaute.com</span></p>
<p>En tant qu'utilisateur, l'expérience est tout à fait décevante et décrédibilise la valeur ajoutée des liens. On comprend très vite que la liaison est artificielle et n'est pas l'œuvre de l'auteur comme cela aurait dû être le cas. Résultat: on gagne en visibilité mais on perd en pertinence de contenu.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/lien-automatique/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Tête à gifs</title>
		<link>http://www.tutoweb.be/webmastering/gif-anime/</link>
		<comments>http://www.tutoweb.be/webmastering/gif-anime/#comments</comments>
		<pubDate>Tue, 17 Jun 2008 19:26:36 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[gif animé]]></category>
		<category><![CDATA[image]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/?p=695</guid>
		<description><![CDATA[J'aime la sobriété et l'efficacité. Aussi, je ne supporte pas la pub. Du coup, j'ai équipé mon Firefox de deux modules extrêmement précieux: Adblock et Flashblock. Reste à éradiquer une espèce en voie de disparition mais redoutable quand elle se présente à vous: le gif animé. Le gif animé est un reliquat de la période [...]]]></description>
			<content:encoded><![CDATA[<p>J'aime la sobriété et l'efficacité. Aussi, je ne supporte pas la pub. Du coup, j'ai équipé mon Firefox de deux modules extrêmement précieux: <i>Adblock</i> et <i>Flashblock</i>. Reste à éradiquer une espèce en voie de disparition mais redoutable quand elle se présente à vous: le gif animé. </p>
<p><img src="/images/gif-anime.gif" alt="gif animé" hspace="10" align="left">Le gif animé est un reliquat de la période antérieure au web 2.0. De conception basique, son format le limite a 256 couleurs. Il a l'immense avantage de passer sans difficulté sur tous les navigateurs sans l'installation de plug-in (contrairement au Flash ou Javascript). Tout comme un <i>flipbook</i>, une série d'images défilent à un rythme plus ou moins rapide pour simuler une animation. Dans sa version plus lente, le gif sert de diaporama. À l'époque, on adorait ça. On en trouvait un peu partout, mais davantage sur les sites personnels et les forums de discussion. Désormais, les <a href="http://www.gifs-animes.net/">galeries en ligne</a> deviennent des musées. Par contre, le secteur publicitaire en raffole. Une petite bannière animée dans Photoshop; c'est rapide et ça fait toujours son petit effet envers le patron. </p>
<p>Au niveau de l'édition, la création reste relativement simple et donc accessible au plus grand nombre  (contrairement à la technologie Flash). Alors que le gif animé peut être limité dans le nombre de boucle, cette option est souvent ignorée. Cela donne un défilement continu d'images sans interruption. Cette agression visuelle monopolise l'attention inutilement et agace le lecteur. Petite astuce pour arrêter le défilement: <kbd>Escape</kbd>. C'est magique&nbsp;!</p>
<p>Ceci dit, tout n'est pas à jeter. Le typographe <a href="http://paris.blog.lemonde.fr/2008/04/19/bloquer-les-gifs-animes-ou-pas/">Peter Gabor</a> se sert régulièrement des gifs animés. Il y voit un outil dynamique et pratique. Les photos défilent à la façon d'un diaporama. L'auteur devient le conteur d'une histoire et <i>tourne</i> pour nous chaque page de son livre animé. Malheureusement, les options basiques ne permettent pas l'arrêt, l'accélération, le retour en arrière... Le lecteur subit l'action sans interagir. À peine a-t-il commencé sa lecture que le spectacle se joue en boucle sous son nez. Qui imaginerait aujourd'hui une vidéo — intégrée dans un article — se lancer au chargement de la page et sans aucun outil de contrôle&nbsp;?</p>
<div class="notes-separateur"></div>
<p><span class="notes">L'illustration de gauche est tirée du site <i>www.radiosanspub.fr</i></span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/gif-anime/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Nom de domaine, avec trait d&#039;union ?</title>
		<link>http://www.tutoweb.be/webmastering/domaine-trait-union/</link>
		<comments>http://www.tutoweb.be/webmastering/domaine-trait-union/#comments</comments>
		<pubDate>Wed, 11 Jun 2008 12:36:04 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[nom de domaine]]></category>
		<category><![CDATA[trait d'union]]></category>
		<category><![CDATA[underscore]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/?p=238</guid>
		<description><![CDATA[Je vois de plus en plus de noms de domaine composés dont les mots sont collés entre eux. Une contrainte supplémentaire pour le lecteur soumis au choix du webmaster, lui-même soumis à cette guerre des noms de domaine et la lutte pour le référencement. Capture Monweekendalyon.com Ça donne par exemple: www.monweekendalyon.com. Avant de cliquer sur [...]]]></description>
			<content:encoded><![CDATA[<p>Je vois de plus en plus de noms de domaine composés dont les mots sont collés entre eux. Une contrainte supplémentaire pour le lecteur soumis au choix du webmaster, lui-même soumis à cette guerre des noms de domaine et la lutte pour le référencement.</p>
<p><img src="/images/we-lyon.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture Monweekendalyon.com</span></p>
<p>Ça donne par exemple: <span class="url">www.monweekendalyon.com</span>. Avant de cliquer sur ce lien, j'ai tenté de lire l'adresse. En un coup d'œil, <i>dalyon</i> s'est détaché et j'ai essayé de raccrocher le reste pour en faire quelque chose de compréhensible. Vous savez sans doute que la lecture ne s'effectue pas lettre par lettre mais l'œil analyse et repère des groupes de lettres, des mots dont il connaît la signification. C'est bien simple, lorsqu'un mot inconnu vous est présenté, vous devez vous forcer à lire lettre par lettre pour vous l'approprier. Dans l'exemple, j'ai dû faire apparaître les espaces invisibles pour saisir le sens de l'adresse. Cet exercice de déchiffrement est sans doute très amusant, mais l'ajout de traits d'union aurait donné un décryptage plus rapide et plus percutant.</p>
<p>Dans ma pratique, j'ai pris l'habitude de réduire au maximum les adresses composées. Si cela est impossible, j'achète les noms de domaine avec et sans trait d'union pour les extensions les plus utiles. Je décide ensuite de cibler la communication sur une seule pièce maîtresse pour garder une cohérence. Les noms de domaines secondaires portent une redirection vers l'URL centrale. Ça permet aux gens, qui ont retenu l'adresse mais pas la forme, d'arriver à bon port.</p>
<p>Petite anecdote, les responsables web de Coca-Cola ont pris la peine de réserver <span class="url">www.coca-cola-zero.fr</span>, <span class="url">www.coca-colazero.fr</span>, mais pas <span class="url">www.cocacolazero.fr</span> alors que <span class="url">www.cocacola.fr</span> est une redirection vers <span class="url">www.coca-cola.fr</span>. Pas facile quand le trait d'union fait partie intégrante de la marque.</p>
<p><strong>Trait d'union ou <i>underscore</i> ?</strong> Il fut un temps où les webmasters avaient pris l'habitude de séparer les noms de fichiers par un <span class="mot-etranger" lang="en">underscore</span> (trait bas) à cause de la mauvaise gestion de l'espace par les serveurs. Les noms de dossier mais aussi les URL contenaient ce caractère réservé dans une autre vie au soulignement. Pendant tout un temps, Google ignorait les <span class="mot-etranger" lang="en">underscore</span> dans les URL et considérait qu'il s'agissait d'un seul mot. Aujourd'hui, le moteur considère ce signe comme séparateur au même titre que le tiret. Malgré tout, les responsables nous conseillent de privilégier le tiret.</p>
<p><strong>Quid du référencement ?</strong> Je ne suis pas spécialiste de la question mais des mots séparés ont plus de pertinence qu'un seul mot. Les moteurs de recherche prennent en compte les mots individuellement et non pas comme une entité unique.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/domaine-trait-union/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Blog bilingue</title>
		<link>http://www.tutoweb.be/webmastering/blog-bilingue/</link>
		<comments>http://www.tutoweb.be/webmastering/blog-bilingue/#comments</comments>
		<pubDate>Thu, 05 Jun 2008 12:53:27 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[bilingue]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[traduction]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/?p=232</guid>
		<description><![CDATA[Il n'existe pas beaucoup de blogs bilingues, du moins à ma connaissance. Certains choisissent de faire deux blogs distincts, comme chez Loïc Lemeur avec sa version anglophone et francophone. D'autres, alternent les billets: tantôt en anglais tantôt en français. Le choix de la langue dépend alors du sujet à traiter comme c'est le cas sur [...]]]></description>
			<content:encoded><![CDATA[<p>Il n'existe pas beaucoup de blogs bilingues, du moins à ma connaissance. Certains choisissent de faire deux blogs distincts, comme chez <a href="http://loiclemeur.com/france/">Loïc Lemeur</a> avec sa version anglophone et francophone. D'autres, alternent les billets: tantôt en anglais tantôt en français. Le choix de la langue dépend alors du sujet à traiter comme c'est le cas sur <a href="http://standblog.org/blog/">Standblog</a>.</p>
<p><a href="http://blogcooperation.be/">Blog Cooperation</a> publie certaines notes en néerlandais, d'autres en français. À travers l'interface, on sent bien toute la difficulté de réunir deux langues différentes sous le même toit. Dommage pour un blog sur la coopération au développement censé s'adresser au plus grand nombre.</p>
<p>Emmanuelle Richard est sans doute une blogueuse exceptionnelle dans le sens où elle traduit l'intégralité de ses articles dans l'autre langue. Elle commence à écrire en français puis traduit en anglais après un ou plusieurs paragraphes. Je suis persuadé que le travail de traduction est fait en fin de production puis intégré au fur et à mesure dans le texte.</p>
<p> <img src="/images/emmanuelle-capture.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture <span class="url">www.emmanuelle.net</span></span></p>
<p>Depuis quelques années, je lis la <a href="http://www.latartinegourmande.com/">Tartine gourmande</a> écrit par une Française expatriée à Boston. Pour ceux qui se passionnent pour la gastronomie et la photographie, c'est LE blog de tout les délices. Les photos sont magnifiques, les mises en scène sont créatives et les plats ont l'air alléchants. Pendant longtemps, elle traduisait en français la plupart de ses billets.</p>
<p>Je viens de découvrir Immaginary moment [&sup1;] dont le contenu textuel est agencé sur deux colonnes: en français à gauche et à droite en anglais. Pour quelqu'un qui, comme moi, a un anglais élémentaire, c'est un très bon exercice de compréhension.</p>
<p><img src="/images/imaginary-moments-capture.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture <span class="url">www.imoments.org</span></span></p>
<p>D'un point de vue accessibilité, il est important de bien préciser le changement de langue. C'est l'horreur pour une synthèse vocale de lire dans une langue étrangère sans être configurée correctement afin d'ajuster la prononciation à la langue.</p>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] Mis à jour (28/12/09): lien brisé retiré.</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/blog-bilingue/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Personnaliser l&#039;icône des favoris</title>
		<link>http://www.tutoweb.be/webmastering/favicon/</link>
		<comments>http://www.tutoweb.be/webmastering/favicon/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 20:38:16 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[bookmark]]></category>
		<category><![CDATA[favicon]]></category>
		<category><![CDATA[favoris]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[navigateur]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=1621</guid>
		<description><![CDATA[Apparue avec la version 5 d'Internet Explorer, le favicon est la contraction de «&#160;favori&#160;» et «&#160;icon&#160;». Cette image de taille réduite se retrouve dans la barre d'adresse du navigateur. Elle apparait sur chaque onglet ouvert et s'intègre agréablement aux favoris (marque-pages). Dans une longue liste de liens enregistrés, le favicon se distingue des autres et [...]]]></description>
			<content:encoded><![CDATA[<p><img src="/images/favicon-marque-page.gif" align="right" hspace="15" alt="Favicon"> Apparue avec la version 5 d'Internet Explorer, le favicon est la contraction de «&nbsp;favori&nbsp;» et «&nbsp;icon&nbsp;». Cette image de taille réduite se retrouve dans la barre d'adresse du navigateur. Elle apparait sur chaque onglet ouvert et s'intègre agréablement aux favoris (marque-pages). Dans une longue liste de liens enregistrés, le favicon se distingue des autres et rend la recherche plus aisée. Cette icône est facile à mettre en place sur son site web: créer l'image dans un format standard, ajouter une ligne de code pour faire la liaison et le tour est joué. </p>
<h2>Dessiner son icône</h2>
<p>Commencez par <i>dessiner</i> l'image qui correspond le mieux à votre site: logo, mascotte, initiales du nom... Ensuite, il faut réduire la taille à 16 pixels de côté. Le résultat est souvent décevant. Pour cette raison, il vaut mieux travailler pixel par pixel en taille réelle. <i>Icon Workshop</i> est spécialisé dans ce genre de manipulations. Il existe aussi des applications en ligne comme <a href="http://www.favicon.cc/">Favicon Generator</a>.</p>
<p>Tout le monde n'est pas graphiste dans l'âme. De nombreux designers mettent leurs créations à disposition du public moyennant quelques euros ou gratuitement. <a href="http://www.iconfinder.com/">Icon Finder</a> est un moteur spécialisé dans la recherche d'icônes. Et pour ceux qui ne trouvent vraiment pas, j'ai regroupé une petite <a href="http://katsoura.free.fr/download/icones.zip">collection</a> (zip, 16,3 Mo).</p>
<p><img src="/images/galerie-icones.gif" alt"Collection d'icônes"></p>
<h2>Quelques règles à respecter</h2>
<p>La taille de l'image doit être de 16x16 pixels ou 32x32 pixels. Dans ce dernier cas, la taille sera réduite de moitié automatiquement par le navigateur. Le nombre de couleurs ne doit pas dépasser 16 couleurs. </p>
<p>Pour ce qui concerne le format du fichier, le gif et le png sont acceptés par les navigateurs respectueux des standards du web. Comme Internet Explorer a toujours voulu se distinguer, il n'autorise que le format .ico Ce format n'est autre qu'une image bitmap (.bmp) générée par Windows. Il suffit alors de renommer l'extension (<i>favicon.bmp</i> par <i>favicon.ico</i>) pour être reconnu. Cette manipulation ne fonctionne pas pour les autres extensions.</p>
<p><img src="/images/favicon-keyline.gif" alt="Capture favicon sur Keyline" align="right" hspace="15">Petit conseil en passant, prudence avec les icônes animées. Certaines sont discrètes et ne posent pas de problème, d'autres sont franchement désagréables, comme sur le site de <a href="http://blog.keyline.fr/">Keyline</a>. N'essayez pas de vous faire remarquer à tout prix.</p>
<h2>Créer la liaison</h2>
<p>Vous avez maintenant votre icône de 16 pixels. Il va falloir faire la liaison entre la page HTML et le fichier image. Deux possibilités: soit vous ne jurez que par Internet Explorer, soit vous préférez une méthode plus propre et universelle. </p>
<p><strong>Internet Explorer</strong> — La méthode la plus simple c'est d'ajouter l'image dans le dossier racine du serveur. L'image doit impérativement porter le nom de <code>favicon.ico</code> sinon ça ne marche pas. L'autre méthode consiste à insérer une ligne de code dans balise <code>&lt;head&gt;</code>. Dans ce cas, il faudra le faire pour toutes les pages.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
</pre>
<pre><span class="html"><span class="html-other-element">&lt;head&gt;</span>
<span class="html-other-element">&lt;title&gt;</span>Titre<span class="html-other-element">&lt;/title&gt;</span>
<span class="html-other-element">&lt;link rel=<span class="html-attribute">&quot;shortcut icon&quot;</span> href=<span class="html-attribute">&quot;http://www.site.com/favicon.ico&quot;</span>&gt;</span>
<span class="html-other-element">&lt;/head&gt;</span></span></pre>
</div>
<p><strong>Mozilla et consort</strong> — Le code à insérer est pratiquement identique mais à l'avantage d'être conforme aux normes. Malheureusement, Internet Explorer ne comprend que ce qu'il veut bien et n'en tiendra pas compte. Remarquez le <code>type</code> informe le navigateur du type de document (une image) et son format (pgn).  Une ic&ocirc;ne au format gif porte l'indication <code title="HTML">type=&quot;image/gif&quot;</code> et <code title="HTML">type=&quot;image/x-icon&quot;</code> pour un fichier .ico.  N'oubliez pas d'envoyer votre image sur le serveur et au bon endroit.</p>
<div class="fvch-code">
<pre class="fvch-line-numbers">1
2
3
4
5
6
7
</pre>
<pre><span class="html"><span class="html-other-element">&lt;head&gt;</span>
<span class="html-other-element">&lt;title&gt;</span>Titre<span class="html-other-element">&lt;/title&gt;</span>
<span class="html-other-element">&lt;link rel=<span class="html-attribute">&quot;icon&quot;</span> type=<span class="html-attribute">&quot;image/png&quot;</span> href=<span class="html-attribute">&quot;http://www.site.com/image.png&quot;</span>&gt;</span>
<span class="html-other-element">&lt;/head&gt;</span></span></pre>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/favicon/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Optimisé pour Internet Explorer</title>
		<link>http://www.tutoweb.be/webmastering/optimise-pour/</link>
		<comments>http://www.tutoweb.be/webmastering/optimise-pour/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 19:52:10 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[internet explorer]]></category>
		<category><![CDATA[navigateur]]></category>
		<category><![CDATA[optimisé]]></category>
		<category><![CDATA[résolution]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=1596</guid>
		<description><![CDATA[Il n'est pas rare de voir un site optimisé pour une résolution ou une version d'un navigateur. Cette façon peu courtoise risque de déplaire à un bon nombre de vos visiteurs et d'en frustrer plus d'un. Vous êtes concepteur d'un site web, il est de votre devoir de faire en sorte qu'il soit accessible au [...]]]></description>
			<content:encoded><![CDATA[<p>Il n'est pas rare de voir un site optimisé pour une résolution ou une version d'un navigateur. Cette façon peu courtoise risque de déplaire à un bon nombre de vos visiteurs et d'en frustrer plus d'un. Vous êtes concepteur d'un site web, il est de votre devoir de faire en sorte qu'il soit accessible au plus grand nombre. Si vous êtes incompétent d'un point de vue technique, ne faites pas supporter cet handicap au visiteur.</p>
<p><img src="/images/info-gsm-capture.gif" class="bordure"><br /><span class="legende">Capture InfoGSM.be</span></p>
<p>Selon <span class="url">www.infogsm.be</span>, le site se visite dans une résolution de 1024 x 768, en 24 bits couleurs et muni du flash player. Il est peu probable que le quidam sache réellement de quoi il retourne. Que doivent faire toutes les autres personnes en-dehors de ce créneau&nbsp;? Le web doit pouvoir offrir un accès à toutes personnes indépendamment de leur configuration matérielle et logicielle. Même si l'intention de bien faire est louable, ces indications n'ont pas leur place sur la page d'accueil et le site devrait fonctionner en tous temps.</p>
<blockquote><p>Quiconque appose sur une page du web un logo du type: « Cette page est optimisée pour le navigateur X » est quelqu'un qui semble souhaiter revenir à l'époque préhistorique d'avant le web, lorsque l'on avait très peu de chances de pouvoir lire un document écrit sur un autre ordinateur, un autre traitement de texte, ou un autre réseau.</p>
<p><cite>Tim Berners-Lee</cite></p>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/optimise-pour/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Liens restrictifs géographiques</title>
		<link>http://www.tutoweb.be/webmastering/france-metropolitaine/</link>
		<comments>http://www.tutoweb.be/webmastering/france-metropolitaine/#comments</comments>
		<pubDate>Mon, 28 Jan 2008 02:18:54 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[France]]></category>
		<category><![CDATA[hypertexte]]></category>
		<category><![CDATA[lien]]></category>
		<category><![CDATA[métropolitaine]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/28-01-2008/france-metropolitaine/</guid>
		<description><![CDATA[Quand j'étais petit, je me souviens des bons de commande dans les magazines français. En-dessous de l'offre, une astérisque précisait en tout petit: «&#160;réservé uniquement pour la France métropolitaine&#160;». À l'époque, je ne savais pas ce que cela voulait dire. Vingt ans plus tard, ces mentions existent encore et toujours. C'est à se demander si [...]]]></description>
			<content:encoded><![CDATA[<p>Quand j'étais petit, je me souviens des bons de commande dans les magazines français. En-dessous de l'offre, une astérisque précisait en tout petit: «&nbsp;réservé uniquement pour la France métropolitaine&nbsp;». À l'époque, je ne savais pas ce que cela voulait dire. Vingt ans plus tard, ces mentions existent encore et toujours. C'est à se demander si ces vendeurs par correspondance ont compris que la France fait partie de l'Union européenne.</p>
<p>Il n'est pas rare que je tombe sur des sites dont l'accès est exclusivement réservé à une <strong>zone géographique</strong>. Cette discrimination m'est désagréable en tant qu'internaute. Surtout dans un espace comme le web dont l'idée initiale est de permettre à chacun d'accéder au contenu. Même si je comprends les raisons souvent liées à la gestion des droits d'auteur, je trouve très regrettable de laisser sur le carreau un large public francophone.</p>
<p><img src="/images/m6video.gif" alt="Capture d'écran"><br /><span class="legende">Capture m6video.fr</span></p>
<p><img src="/images/m6-replay.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture m6replay.fr</span></p>
<p><img src="/images/bon-appetit.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture bonappetitbiensur.france3.fr/videos/</span></p>
<p><img src="/images/kilowatch.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture kilowatch.be</span></p>
<p><img src="/images/hulu-capture.gif" alt="Capture d'écran" class="bordure"><br /><span class="legende">Capture Hulu.com</span></p>
<p>[ Edit: mis à jour le 1er janvier 2009 ] Depuis quelques mois, Youtube met en place un filtre géographique basé sur l'IP avec cet avertissement: «&nbsp;Cette vidéo n'est pas disponible dans votre pays&nbsp;». Cela permet aux auteurs de définir le périmètre pour lequel la vidéo est accessible. Par exemple, la BBC limite la diffusion de certains contenus en justifiant que la chaîne est financée par les impôts. Autrement dit, seuls les autochtones y ont accès.</p>
<p><img src="/images/youtube-filtre-pays.gif" alt="Filtre Youtube" class="bordure"><br /><span class="legende">Capture Youtube.com - Filtre géographique</span></p>
<p>[ Edit: mis à jour le 27 septembre 2009 ] Lipton (groupe Unilever) lance un concours en ligne intitulé: <a href="http://www.durabili-the.com/" rel="nofollow">Durabilit-thé</a>. Les gagnants se verront offrir un séjour d'une semaine en Inde pour constater par eux-mêmes les conditions de travail et la culture durable du thé. Lipton invite les blogueurs à faire la promotion du jeu-concours. Seulement voilà, le jeu est réservé aux «&nbsp;participants résidant en France métropolitaine ou Corse&nbsp;».</p>
<p><img src="/images/durabili-the-capture.gif" alt="Capture du site Durabilit-the" class="bordure"><br /><span class="legende">Capture Durabili-the.com</span></p>
<p>En décembre 2009, WorMee fait une grosse campagne publicitaire pour son site web. La pub titre fièrement «&nbsp;Rien que de la musique en libre accès&nbsp;». Une fois sur le site, l'écoute des clips est limitée aux résidants français. </p>
<p><img src="/images/wormee-capture.gif" alt="Capture du site Wormee" class="bordure"><br /><span class="legende">Capture Wormee.com</span></p>
<p>[ Edit: mis à jour le 3 mai 2011 ] Les exemples se multiplient avec son lot de restrictions. Pour les gourmands d'émissions de variété, il existe une parade pour déjouer la détection de l'origine du serveur. Le <strong>VPN</strong> est un intermédiaire dans le réseau et est capable de se faire passer pour un serveur luxembourgeois, hollandais ou français. On trouve des solutions efficaces en ligne comme <a href="https://vpnfacile.fr/">VPNFacile</a> basé sur le logiciel libre OpenVPN. Ce n'est pas très compliqué à mettre en place (deux minutes montre en mains) et cela ne touche pas à votre connexion internet. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/france-metropolitaine/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Débusquer les liens morts</title>
		<link>http://www.tutoweb.be/webmastering/lien-mort/</link>
		<comments>http://www.tutoweb.be/webmastering/lien-mort/#comments</comments>
		<pubDate>Mon, 21 Jan 2008 01:41:19 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[404]]></category>
		<category><![CDATA[erreur]]></category>
		<category><![CDATA[lien]]></category>
		<category><![CDATA[lien brisé]]></category>
		<category><![CDATA[lien mort]]></category>
		<category><![CDATA[link]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/21-01-2008/lien-mort/</guid>
		<description><![CDATA[En allant voir mes statistiques, j'ai une concentration de liens morts de type 404. Je suis en partie responsable depuis le changement de maquette de ce blog et la migration des dossiers. Du coup, les hotlinks laissés sur les forums et les blogs ne sont plus en mesure d'afficher les images. À chaque chargement de [...]]]></description>
			<content:encoded><![CDATA[<p>En allant voir mes statistiques, j'ai une concentration de liens morts de type 404. Je suis en partie responsable depuis le changement de maquette de ce blog et la migration des dossiers. Du coup, les <i>hotlinks</i> laissés sur les forums et les blogs ne sont plus en mesure d'afficher les images. À chaque chargement de la page, je reçois alors une erreur 404. Il en va de même pour certains agrégateurs en ligne, devenus de redoutables archives et capables de faire ressurgir les billets les plus lointains.</p>
<p>Il m'arrive de temps en temps de supprimer des pages, des billets désuets ou sans intérêt. J'estime que tout ce qui s'écrit n'est pas forcément destinés à perdurer. J'ai donc pris l'habitude de faire du rangement. Mais avant de détruire ce contenu du serveur, d'autres reprennent l'information et pointent vers la source. Au final, j'ai des erreurs 404 en pagaille.</p>
<p><img src="/images/lien-dicodunet.gif" alt="Capture d'écran Dicodunet"><br /><span class="legende">Capture Dicodunet.com</span></p>
<h2>Les liens sur vos pages</h2>
<p>Avant de commencer à rechercher les erreurs, il faut différencier les liens que vous hébergez et les liens externes dirigés vers votre site. Dans le premier cas, les sources d'erreurs sont variées: </p>
<ul>
<li>fichier ou dossier déplacé, renommé ou supprimé</li>
<li>changement de nom de domaine</li>
<li>changement du rétrolien sur un blog</li>
<li>vous faites une faute dans le lien hypertexte</li>
<li>vous bloquez l'accès à une page (commentaire fermé)</li>
</ul>
<p>Un gestionnaire de sites comme Dreamweaver est capable de vérifier tous ces liens. La correction est rapide et efficace pour les liens internes. Pour ce qui est des liens externes, il faudra repasser avec un logiciel plus performant.</p>
<p><img src="/images/liens-brises-dreamweaver.gif" alt="Dreamweaver, liens brisés"><br /><span class="legende">Vérificateur de liens dans Dreamweaver MX</span></p>
<p>Il existe des logiciels adaptés à cet effet. Pendant longtemps, j'ai utilisé le <i>freeware</i> <a href="http://home.snafu.de/tilman/xenulink.html">Xenu</a>. Il génère parfois une myriade de liens erronés sans justification. Il semble également allergique aux liens vers Wikipedia et Dailymotion. Je préfère de loin <a href="http://www.analogx.com/contents/download/Network/lnkexam/Freeware.htm">Link Examiner</a>. Il est plus propre dans ses résultats et le tableau est plus riche: code HTTP, nofollow, mots-clés, description, titre, temps d'accès, niveau de profondeur... Il lui manque un scan programmé de manière périodique. L'outil est efficace mais doit être géré avec délicatesse. Par exemple, une erreur 404 ne signifie pas que la page est définitivement supprimée. </p>
<p><img src="/images/link-examiner-rapport.gif" alt="Rapport Link Examiner"><br /><span class="legende">Link Examiner marque les liens brisés en rouge</span></p>
<p>Cet outil de détection est efficace mais n'est pas à toute épreuve. À un moment donné, vous avez ajouté un lien dans l'un de vos articles. Le propriétaire du site abandonné n'a pas pris la peine de renouvelé le nom de domaine. Tombé dans le domaine public, il a été automatiquement repris par une <strong>ferme de liens</strong>. Du coup, le lien sur votre article est fonctionnel mais pointe vers un contenu erroné, à savoir de la publicité. Je n'ai pas (encore) trouvé de solutions pour ce type de problème. </p>
<h2>Les liens sur le web vers vos pages</h2>
<p>À l'inverse, il existe une série d'erreurs dont vous avez une action fort limitée. Les liens défectueux ne se trouvent pas sur vos pages mais disséminées un peu partout sur le web.</p>
<ul>
<li>un webmaster fait une erreur dans votre lien</li>
<li>un webmaster héberge un lien désuet (cf les raisons ci-dessus)</li>
<li>un internaute fait une faute de frappe dans l'adresse du site</li>
<li>un internaute teste la présence d'une page (ex pour une série d'images)</li>
<li>un robot teste des pages pour tenter de pirater le site</li>
</ul>
<p>Il est vain de partir à la conquête des liens brisés laissés sur d'autres sites. Ces liens orphelins sont éparpillés tout azimut et resteront sans vie jusqu'au bon vouloir de l'hébergeur. Par contre - pour les liens pointant vers un même nom de domaine - il serait dommage d'en rester là et de ne pas profiter du trafic généré [&sup1;]. L'exemple le plus courant est le renommage des permaliens [&sup2;]. Utilisez les redirections permanentes (type 301) pour dévier les hypertextes. WordPress possède d'ailleurs un <i>plug-in</i> assez génial: <a href="http://wordpress.org/extend/plugins/redirection/">Redirection</a>. L'administration est simple comme bonjour et évite de passer par le fichier <i>.htaccess</i>. L'extension gère également les erreurs 404. </p>
<h2>Conclusion</h2>
<p>La gestion des hyperliens doit être un travail quotidien sous peine de se retrouver à gérer un volume d'erreurs énorme. Pensez à nommer correctement vos URL dès le départ, de manière concise et contenant les bons mots clés. En cas de renommage, utilisez un système de redirection automatique pour vous épargner cette tâche rébarbative. Enfin, faite de la veille sur tous vos liens, non seulement les liens morts mais également les redirections. </p>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] La redirection peut être indépendante de votre volonté. C'est le cas des services en ligne pour raccourcir les adresses (du genre TinyURL).</span><br />
<span class="notes">[&sup2;] À lire: «&nbsp;<a href="/wordpress/permalien/">Personnaliser ses permaliens</a>&nbsp;»</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/lien-mort/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Au diable le &quot;mailto&quot; !</title>
		<link>http://www.tutoweb.be/webmastering/mailto/</link>
		<comments>http://www.tutoweb.be/webmastering/mailto/#comments</comments>
		<pubDate>Thu, 17 Jan 2008 00:43:05 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[contact]]></category>
		<category><![CDATA[e-mail]]></category>
		<category><![CDATA[formulaire]]></category>
		<category><![CDATA[mailto]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/17-01-2008/poubelle-mailto/</guid>
		<description><![CDATA[Mettre en relation le lecteur et l'auteur d'un site est une opportunité unique dont seul le web peut se vanter. Écrire à un collègue, un directeur d'entreprise, un artiste, un politique, une conférencière de génie... tout est possible. La particularité de l'outil c'est qu'il est gratuit, quasi instantané et non intrusif. Il permet un style [...]]]></description>
			<content:encoded><![CDATA[<p>Mettre en relation le lecteur et l'auteur d'un site est une opportunité unique dont seul le web peut se vanter. Écrire à un collègue, un directeur d'entreprise, un artiste, un politique, une conférencière de génie... tout est possible. La particularité de l'outil c'est qu'il est gratuit, quasi instantané et non intrusif. Il permet un style d'écriture très léger sur la forme sans excès de politesse à se tortiller le derrière. Pour toutes ces raisons, et bien d'autres, l'ajout d'un moyen de contact est bénéfique. Le tout est de rendre cette expérience agréable et ne pas mettre des bâtons dans les roues du visiteur.</p>
<p>Dans la pratique, le responsable d'un site a plusieurs solutions. La première consiste à mettre un formulaire de contact. Pour la partie dynamique, des scripts tout faits existent sur le net. Si vous utilisez un blog WordPress, des formulaires personnalisables sont disponibles. L'intérêt de la méthode ? l'internaute reste sur votre site sans devoir faire appel à un logiciel externe et la procédure est rapide. Prévoir une copie du message est un plus.</p>
<p><img src="/images/contact-us.gif" alt="Formulaire de contact"></p>
<p>La deuxième méthode c'est le fameux <code>mailto</code> bien connu des wembasters. Un lien <code>mailto</code> déclenche le lancement d'un logiciel de messagerie installé sur l'ordinateur. Le contact avec le site web est rompu. Faut-il encore avoir une messagerie interne et configurée correctement. Dans la plupart des cas, le quidam redoute les demandes farfelues du SMTP et autres POP. La montée en puissance des <i>webmails</i> gratuits n'a pas favorisé cet essor.</p>
<p>L'autre raison pour laquelle je m'oppose à utiliser le <code>mailto</code> est l'avidité des aspirateurs d'e-mail. Ces derniers sont capables de pomper sauvagement une masse impressionnante de courriels en quelques clics. Pour contrer le problème, il existe de nombreuses solutions (cryptage dans le code, image, écriture sans lien). Ces techniques fonctionnent relativement bien contre le <span class="domtooltips">spam<span class="domtooltips_tooltip" style="display: none">En français: "pourriel". Message non sollicité, souvent publicitaire, envoyé en grande quantité.</span></span> mais génèrent des contraintes au visiteur. Il ne comprend pas pourquoi le lien n'est pas cliquable ou séparé d'espace. Pour ces raisons, le formulaire reste la meilleure solution pour garder le contact.</p>
<p>À lire également: «&nbsp;<a href="http://www.tutoweb.be/web/mailto-gmail/">Ouvrir un <i>mailto</i> avec Gmail&nbsp;»</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/mailto/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>L&#039;affichage progressif des images</title>
		<link>http://www.tutoweb.be/webmastering/affichage-progressif/</link>
		<comments>http://www.tutoweb.be/webmastering/affichage-progressif/#comments</comments>
		<pubDate>Sat, 03 Nov 2007 16:33:02 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[optimisation]]></category>
		<category><![CDATA[progressif]]></category>
		<category><![CDATA[téléchargement]]></category>

		<guid isPermaLink="false">http://www.tutoweb.com/blog/03-11-2007/laffichage-progressif-des-images/</guid>
		<description><![CDATA[Dans un navigateur, les images s'affichent progressivement «&#160;ligne par ligne&#160;» de haut en bas. Avec un bon débit, le résultat est immédiat et nul n’est tenu de patienter. À l’époque des modems 56 ko, l’affichage progressif devenait une alternative. L'image est enregistrée selon des qualités différentes de façon à charger rapidement la version fortement compressée [...]]]></description>
			<content:encoded><![CDATA[<p>Dans un navigateur, les images s'affichent progressivement «&nbsp;ligne par ligne&nbsp;» de haut en bas. Avec un bon débit, le résultat est immédiat et nul n’est tenu de patienter. À l’époque des modems 56 ko, l’affichage progressif devenait une alternative. L'image est enregistrée selon des qualités différentes de façon à charger rapidement la version fortement compressée puis les versions intermédiaires et enfin la version définitive (*). De quoi satisfaire l'impatience de l'internaute. Le poids d’une image progressive est très légèrement supérieur à une image ordinaire et requiert un peu plus de mémoire vive.</p>
<p><img src="/images/mer-image-progressif.jpg" alt="Image progressive" class="bordure"><br /><span class="legende">Premier affichage par le navigateur</span></p>
<p><img src="/images/mer-image-ordinaire.jpg" alt="Image ordinaire" class="bordure"><br /><span class="legende">Rendu définitif de l'image originale</span></p>
<p>Ce mode d’enregistrement était utilisé il y a bien longtemps (vers 1996). À l’époque, il causait quelques soucis à différents navigateurs. Aujourd’hui, tous sont capables d’afficher du Jpep progressif. Reste que certains logiciels de gestion d’images ou d’animation font grise mine. Il faut alors convertir ses images dans le format Jpg original.</p>
<p>L’attribut <code>lowsrc</code> de la balise <code>img</code> permet d’afficher une version allégée de l’image en attendant la version définitive. L’utilisation de cet attribut alourdit la quantité de données à transférer. De plus, cet attribut n'est pas du tout conforme et ne fonctionne que sur Netscape.</p>
<p>(*) Pour réaliser un Jpg progressif dans Photoshop: <i>Enregistrer pour le web</i> &#8212; cocher la case <i>Progressif</i> puis enregistrez l’image. Pour choisir le nombre d'images intermédiaires: <i>Enregistrer sous</i> et cocher «&nbsp;progressif optimisé&nbsp;».</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/webmastering/affichage-progressif/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

