<?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</title>
	<atom:link href="http://www.tutoweb.be/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tutoweb.be</link>
	<description>Graphisme, ergonomie web et typographie</description>
	<lastBuildDate>Wed, 25 Aug 2010 00:04:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Poupées russes de la recherche</title>
		<link>http://www.tutoweb.be/web/recherche-google/</link>
		<comments>http://www.tutoweb.be/web/recherche-google/#comments</comments>
		<pubDate>Mon, 19 Jul 2010 10:02:47 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4364</guid>
		<description><![CDATA[Savez-vous ce qu'est un café viennois ? C'est un expresso surmonté de crème fouettée et de chocolat. Rien de bien compliqué. Posez la même question à Google avec les mots «&#160;recette café viennois&#160;». Bingo, le premier résultat correspond à la demande. Si on continue à explorer les résultats, je tombe sur le site culinaire 750g. [...]]]></description>
			<content:encoded><![CDATA[<p>Savez-vous ce qu'est un <i>café viennois</i> ? C'est un expresso surmonté de crème fouettée et de chocolat. Rien de bien compliqué. Posez la même question à Google avec les mots «&nbsp;recette café viennois&nbsp;». Bingo, le premier résultat correspond à la demande. Si on continue à explorer les résultats, je tombe sur le site culinaire 750g. Seul problème, on arrive sur un <a href="http://www.750g.com/recettes_cafe_viennois.htm">listing de recettes</a> avec un rapport plus ou moins éloigné avec ma recherche initiale. Sur les 176 trouvailles contenant le mot <i>café</i> ou <i>viennois</i>, aucune ne correspond à l'expression <i>café viennois</i> (avec et sans guillemets). Au mieux, je découvre d'autres recettes. Au pire, j'ai perdu mon temps&nbsp;!</p>
<p>Imaginez-vous dans une galerie commerçante, vous cherchez un bouquin et le premier commerce affiche sa disponibilité. Vous entrez, vous demandez à la vendeuse et là elle vous répond qu'elle n'a jamais eu ce livre. Par contre, elle vous invite à acheter un autre ouvrage du même genre. Ça vous laisserait quelle impression au final ?</p>
<p><img src="/images/capture-750g.gif" alt="Capture d'écran du site 750 grammes" class="bordure"></br><span class="legende">Capture 750g.com (19/07/10)</span></p>
<p>Toujours avec mon exemple du super expresso chocolaté, je tombe sur <span class="url">cafe.topannu.net</span>. Ça ressemble à un site, ça à l'odeur d'un blog avec quelques rédactionnels mais c'est... un annuaire. Évidemment, c'est rempli d'Adsense. Vous voilà reparti pour un tour. Rien ne vous garanti de ne pas tomber sur un autre autre annuaire, lui même agrégateur etc. Beaucoup de temps perdu alors que la question est toute simple. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/recherche-google/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Un bouton « Je n&#039;aime pas » sur Youtube</title>
		<link>http://www.tutoweb.be/web/bouton-youtube/</link>
		<comments>http://www.tutoweb.be/web/bouton-youtube/#comments</comments>
		<pubDate>Sun, 11 Jul 2010 10:59:00 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[aime]]></category>
		<category><![CDATA[bouton]]></category>
		<category><![CDATA[dislike]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[like]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4355</guid>
		<description><![CDATA[Les outils sociaux permettent de faire interagir le visiteur avec le contenu. Dans la pratique, on trouve les commentaires mais aussi des petits gadgets d'appréciation. Il en existe sous toutes les formes: une note de 1 à 10, des étoiles à cocher... Et puis, il y a ce bouton unique de satisfaction Like. On est [...]]]></description>
			<content:encoded><![CDATA[<p>Les outils sociaux permettent de faire interagir le visiteur avec le contenu. Dans la pratique, on trouve les commentaires mais aussi des petits gadgets d'appréciation. Il en existe sous toutes les formes: une note de 1 à 10, des étoiles à cocher... Et puis, il y a ce bouton unique de satisfaction <i>Like</i>. On est en droit d'apprécier et de le faire savoir par contre les mécontents sont amenés à passer leur chemin. Que vaut vraiment l'opinion globale si elle n'est prise qu'en partie ? Une façon de gonfler l'ego de son auteur et éviter la contradiction. Le plus connu est le bouton «&nbsp;J'aime&nbsp;» de Facebook intégré sur de nombreux blogs. Ce principe existait déjà bien avant.</p>
<p><img src="/images/facebook-like.gif" alt="Bouton Like de Facebook" class="bordure"><br /><span class="legende">Bonton "J'aime" de Facebook</span></p>
<p><img src="/images/zdnet-like.gif" alt="Bouton Like sur Zdnet" class="bordure"><br /><span class="legende">Capture ZDNet</span></p>
<p>Certes, il reste toujours les commentaires pour exprimer son opinion mais on connait toutes les résistances face à ce mode de participation alors qu'un seul clic aurait suffit à faire connaître son avis. C'est désormais chose faite sur Youtube et son bouton de désapprobation. </p>
<p><img src="/images/youtube-jaimepas.gif" alt="Boutons sur le lecteur Youtube" class="bordure"><br /><span class="legende">Capture Youtube (11/07/10)</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/bouton-youtube/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Blog et pub, le lecteur plumé</title>
		<link>http://www.tutoweb.be/web/concours-blog/</link>
		<comments>http://www.tutoweb.be/web/concours-blog/#comments</comments>
		<pubDate>Sat, 03 Jul 2010 09:56:33 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[lien]]></category>
		<category><![CDATA[promotion]]></category>
		<category><![CDATA[pub]]></category>
		<category><![CDATA[publireportage]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4337</guid>
		<description><![CDATA[Je lis quelques blogs culinaires dont certains sont devenus des incontournables. Honnêtement, j'ai toujours été fasciné par l'investissement de ces passionnés. À travers les nombreux billets, on ressent bien cette motivation inépuisable. Au fur et à mesure, ces blogueurs ont accumulés un tas de connaissances. Le tout gracieusement partagé sur leur espace public. Une démarche [...]]]></description>
			<content:encoded><![CDATA[<p>Je lis quelques blogs culinaires dont certains sont devenus des incontournables. Honnêtement, j'ai toujours été fasciné par l'investissement de ces passionnés. À travers les nombreux billets, on ressent bien cette motivation inépuisable. Au fur et à mesure, ces blogueurs ont accumulés un tas de connaissances. Le tout gracieusement partagé sur leur espace public. Une démarche généreuse, sans contre-partie. Une façon de partager une partie de son chez soi. Au fur et à mesure du temps, les sites ce sont améliorés tant sur le fond que sur la forme. Que du bonheur pour le lecteur&nbsp;! </p>
<p>Des blogs, il en existe des tonnes, sur tous les sujets. Je ne vous apprends rien. Nombreux sont ceux abandonnés ou très rarement alimentés. À côté de ça, certains ce sont pris au jeu et c'est devenu un véritable plaisir. Ceux là tiennent sur la durée, même s'il y a parfois des petites remises en question. On a tous connu ces moments. Au début néophyte, on découvre, on explore, on tâtonne. Progressivement, on améliore la forme, on dépose d'autres photos, on fait des rencontres, on lit les amis blogueurs et surtout... on lit ses statistiques. Quoi de plus normal. C'est grisant d'approcher son lectorat, de mieux le connaître. Les outils sont là, on aurait tort de s'en priver. </p>
<p>La première tentation c'est de s'enivrer de ses données et de ne bloguer plus que pour ça: trouver les bons mots clés ou les sujets populaires, optimiser son contenu pour les moteurs, flatter ses amis blogueurs pour s'attirer du lien... La seconde tentation suit assez rapidement. On se dit que tout ces chiffres représentent une monétisation possible. De la position «&nbsp;Je blogue pour mon bon plaisir&nbsp;», on passe à «&nbsp;Je peux gagner de l'argent grâce à ma passion&nbsp;». Et là, tous les arguments sont bons pour se donner bonne conscience: ça me permettrait de payer l'hébergement et le nom de domaine, c'est un juste retour des choses aux vues de mon investissement, je pourrais financer l'achat d'un nouveau matériel, etc. </p>
<p><img src="/images/capture-chef-simon.gif" alt="Capture Chef Simon" class="bordure"></br><span class="legende">Capture du blog Chef Simon (03/07/10)</span></p>
<p>Après, tout le jeu consiste à trouver une limite dans ce qu'on décide d'afficher sur son blog et la façon de le faire. Pour beaucoup, la publicité est clairement identifiée et non-intrusive pour le lecteur. Pour d'autres, la promotion a sa place sur un blog spécialisé, elle est susceptible d'intéresser du monde. Par contre, très peu se posent la question morale: «&nbsp;est-il acceptable que des industriels - attirés par le seul appât du gain - viennent occuper mon espace personnel ?&nbsp;» ou «&nbsp;l'envahissement de la publicité sur tous les supports - dont le mien - n'est-elle pas nuisible à une échelle plus globale&nbsp;?&nbsp;».</p>
<p>J'observe une présence toujours plus forte des publicitaires sur les blogs à forte croissance. Outre les échanges de liens ou les <i>liens commerciaux</i> réservés dans des espaces annexes, le marketing veut se voir en haut de l'affiche. Chez <a href="http://requia.canalblog.com/archives/2010/06/30/18464830.html">Requia</a> par exemple, tout un billet est dédié à une marque. Donnez vos meilleures idées pour alimenter le blog, devenez fan de leur page Facebook et gagnez (peut-être) un super robot ménager. Ils sont forts ceux là&nbsp;! Coût de l'opération 450 euros. En prime, ils obtiennent les données personnels de tous les participants, histoire d'alimenter leur base de données avec un public ciblé et... consentant. </p>
<p><img src="/images/capture-requia.gif" alt="Capture Requia" class="bordure"></br><span class="legende">Capture du blog Requia (03/07/10)</span></p>
<p>J'ai deux questions. La première concerne l'auteur: outre l'aspect financier, quel est l'intérêt d'une telle pratique ? n'y a-t-il pas un risque de décridibiliser le blog surtout pour les prochains sujets sur le matériel de cuisine ? La seconde question va au lecteur: ces pratiques de marketing valent-elles le coup pour un cadeau hypothétique ?  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/concours-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Les images de fond nuisent à la lisibilité</title>
		<link>http://www.tutoweb.be/ergonomie/image-lisibilite/</link>
		<comments>http://www.tutoweb.be/ergonomie/image-lisibilite/#comments</comments>
		<pubDate>Thu, 24 Jun 2010 18:55:09 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Ergonomie]]></category>
		<category><![CDATA[fond]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[lisibilité]]></category>
		<category><![CDATA[texte]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4314</guid>
		<description><![CDATA[Les images en fond c'est joli, c'est classe, c'est design, c'est tout ce qu'on veut sauf qu'elles sont rarement bénéfiques pour le texte. Au risque de paraître vieux jeu, il n'y a rien de plus agaçant d'avoir toutes les peines du monde pour déchiffrer du texte. Ajoutez de la transparence et ça devient vite le [...]]]></description>
			<content:encoded><![CDATA[<p>Les images en fond c'est joli, c'est classe, c'est design, c'est tout ce qu'on veut sauf qu'elles sont rarement bénéfiques pour le texte. Au risque de paraître vieux jeu, il n'y a rien de plus agaçant d'avoir toutes les peines du monde pour déchiffrer du texte. Ajoutez de la transparence et ça devient vite le bazar au niveau lisibilité.</p>
<h2>Image de fond</h2>
<p>Les webmasters ont appris a être raisonnables avec les fonds. L'effet est certainement très apprécié dans un premier temps, il devient vite un inconfort à la lecture. Du côté des logiciels, il y a toujours eu la possibilité de modifier l'apparence. Il suffit de se souvenir du logiciel de lecture audio Winamp. Fort de son succès, les utilisateurs voulaient personnaliser leur outil. Une façon aussi de se distinguer des autres. Des nombreuses <i>skin</i> (habillage) sont apparues rapidement. La communauté proposait ses propres créations mais difficile d'avoir une interface jolie sans nuire à la lisibilité. </p>
<p>J'ai toujours pensé qu'il ne s'agissait que d'un gadget. Pourtant, la pratique montre tout le contraire. La personnalisation (la customisation) plaît toujours autant et on la trouve dans de nombreuses applications. </p>
<p><img src="/images/messenger-bg.gif" alt="Boîte de dialogue MSN" class="bordure"><br /><span class="legende">Boîte de dialogue Windows Live Messenger avec un fond d'écran</span></p>
<p>Même Google s'y est mis&nbsp;! Le plus étonnant est de retrouver ce lien sur la page d'accueil. On suppose donc que Google répond à une demande forte de ses utilisateurs, au point d'encombrer - un peu plus - sa page. Même si peu de gens cliquent sur ces liens, l'image en fond masque pratiquement le texte. </p>
<p><img src="/images/google-bg.jpg" alt="Capture Google" class="bordure"><br /><span class="legende">Capture Google et un fond d'images (24/06/10)</span></p>
<h2>Semi-transparence</h2>
<p>Tout comme les images en fond, la semi-transparence n'est pas un concept novateur. Ce gadget était déjà installé dans d'autres logiciels, notamment la messagerie ICQ (les plus jeunes ne s'en souvient pas). Considéré comme un gadget, il est longtemps resté enfouis dans les options. Depuis peu, il est remis au goût du jour. On aime ou on n'aime pas, tel n'est pas le propos. Le tout est de se demander si l'utilisateur y gagne en lisibilité. </p>
<p><img src="/images/windows7-transparence.gif" alt="Transparence sous Windows 7" class="bordure"><br /><span class="legende">Transparence sous Windows 7</span></p>
<h2>Image de fond et semi-transparence</h2>
<p>Mélangez transparence et fond d'images et vous obtenez... les <i><a href="https://addons.mozilla.org/fr/firefox/personas/">personas</a></i> de Firefox&nbsp;! Depuis sa version 3.6, la navigateur se targue de proposer un grand nombre de ces bandeaux incrustés dans le haut du navigateur. Contrairement aux thèmes, les boutons ne sont pas redessinés, les menus restent parfaitement identiques ainsi que les boîtes de dialogue. Il s'agit d'une <del>vulgaire</del> simple incrustation, et c'est sans doute là où le bas blesse. Comment intégrer tout un catalogue d'images sans altérer la lisibilité du texte&nbsp;? Tout ce bruit de fond ne profite pas au message, bien au contraire. Pour cette raison, j'ai gardé le thème classique de base classé dans la catégorie de <i>contraste élevé</i>. C'est moins sexy mais au moins c'est plus clair. </p>
<p><img src="/images/firefox-personas.gif" alt="Capture du bandeau de Firefox" class="bordure"><br /><span class="legende">Capture du bandeau de Firefox et Toy Story en personas</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/ergonomie/image-lisibilite/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<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>Les liens: choix de l&#039;auteur, pas d&#039;un robot !</title>
		<link>http://www.tutoweb.be/web/liens-robot/</link>
		<comments>http://www.tutoweb.be/web/liens-robot/#comments</comments>
		<pubDate>Sat, 19 Jun 2010 20:09:28 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[hypertexte]]></category>
		<category><![CDATA[journaliste]]></category>
		<category><![CDATA[lien]]></category>
		<category><![CDATA[quotidien]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4292</guid>
		<description><![CDATA[Alors que certains se demandent s'il vaut mieux placer les liens directement dans le contenu ou en fin d'articles [&#185;], d'autres se posent moins de questions. C'est le cas du quotidien en ligne La Libre. Pour l'exemple, prenons le premier article de sa page d'accueil. Certains pays ou noms propres sont des liens hypertextes. Le [...]]]></description>
			<content:encoded><![CDATA[<p>Alors que certains se demandent s'il vaut mieux placer les liens directement dans le contenu ou en fin d'articles [&sup1;], d'autres se posent moins de questions. C'est le cas du quotidien en ligne <i>La Libre</i>. Pour l'exemple, prenons le <a href="http://www.lalibre.be/sports/football/article/590695/cameroun-danemark-1-1-live.html">premier article</a> de sa page d'accueil. Certains pays ou noms propres sont des liens hypertextes. Le choix journalistique est plutôt étonnant. En réalité, ce ne sont pas des liens intelligents mais un système automatisé. Il suffit de cliquer sur chacun d'eux pour se rendre compte qu'ils dirigent tous vers la page des résultats du moteur de recherche interne. Et pour le mot <i>Japon</i>, le premier résultat nous renvoie vers une exposition sur l'«&nbsp;art brut japonais&nbsp;». Tout ça, à partir des résultats sur le foot. </p>
<p><img src="/images/capture-la-libre.gif" alt="Capture La Libre" class="bordure"><br /><span class="legende">Capture Lalibre.be</span></p>
<p>Bon sang, mais laissez l'auteur choisir ses liens&nbsp;! Ce n'est tout de même pas compliqué de lier un article. À défaut d'avoir une base de données de 15 milliards de mots, il possède un trésor inégalable par les machines: un cerveau. Lui seul est capable de juger de la pertinence des liens connexes. On (nous les lecteurs) s'en fou des outils automatiques. Au besoin, on est tous capables d'utiliser un moteur de recherche. Robotiser du texte est la meilleure façon pour décridibiliser le contenu. C'est peut-être ce qu'on cherche à faire dans un avenir plus ou moins proche: des machines à pondre des news factuelles.</p>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] Lire «&nbsp;<a href="http://fr.readwriteweb.com/2010/06/14/analyse/des-liens/">La Cause des liens</a>&nbsp;»</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/liens-robot/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Le tweet comme contenu d&#039;un blog</title>
		<link>http://www.tutoweb.be/web/blog-tweet/</link>
		<comments>http://www.tutoweb.be/web/blog-tweet/#comments</comments>
		<pubDate>Sat, 19 Jun 2010 12:09:26 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[geek]]></category>
		<category><![CDATA[tweet]]></category>
		<category><![CDATA[tweeter]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4285</guid>
		<description><![CDATA[Je suis mal placé pour donner des conseils sur la conception d'un blog mais il y a certaines pratiques que je zappe sans hésitation. Les blogueurs les plus geeks ont fait le choix de reproduire sur leur blog - de manière automatisée - leurs derniers tweets. Ça donne une liste de messages incompréhensibles pour les [...]]]></description>
			<content:encoded><![CDATA[<p>Je suis mal placé pour donner des conseils sur la conception d'un blog mais il y a certaines pratiques que je zappe sans hésitation. Les blogueurs les plus <i>geeks</i> ont fait le choix de reproduire sur leur blog - de manière automatisée - leurs derniers tweets. Ça donne une liste de messages incompréhensibles pour les non initiés à la Twitermania. Pendant longtemps j'ai fait de la résistance face à Twitter et je ne comprenais rien de ces messages farfelus. Depuis, ça me parle plus mais je trouve ça tout aussi indigeste. </p>
<p><img src="/images/tweets-blog.gif" alt="Les tweets affichés dans une note d'un blog" class="bordure"><br /><span class="legende">Capture Shoob.com</span></p>
<p>Une liste à puces énumère les derniers tweets. Ca vous donne une soupe de liens incrustés dans des phrases à moitié construites. On y comprend rien quand il s'agit de <i>reply</i>. Il en va de même pour les suites de messages pour lesquels on n'a pas suivi les premiers. Sans parler des mots clés improvisés (<i>hashtag</i>) du genre #vdmalamer (vie de merde à la mer) dont je doute qu'il incite au clic. On mélange aussi allègrement les messages en français et en anglais. Un <i>geek</i> ça connait forcément l'anglais. Je n'ai pas bien saisi non plus l'intérêt de faire du copier-coller d'un outil contraignant à un autre outil plutôt tourné vers la rédaction. À la limite, cela ne me dérange pas qu'un <i>widget</i> reprenne les derniers micro-messages dans un espace secondaire mais pas dans le cœur même d'un blog. C'est peut-être une nouvelle façon d'alimenter un site laissé à l'abandon.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/blog-tweet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google répond à vos questions</title>
		<link>http://www.tutoweb.be/web/google-repond/</link>
		<comments>http://www.tutoweb.be/web/google-repond/#comments</comments>
		<pubDate>Fri, 18 Jun 2010 19:04:58 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[google]]></category>
		<category><![CDATA[recherche]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4388</guid>
		<description><![CDATA[Google est formidable. En plus d'être un moteur de recherche performant et préféré des internautes, il devient également un outil polyvalent. Il ne se contente plus de proposer des liens vers des résultats mais s'empare de la requête pour la traiter directement et proposer lui-même une réponse. Google est capable de... calculer: 21 % de [...]]]></description>
			<content:encoded><![CDATA[<p>Google est formidable. En plus d'être un moteur de recherche performant et préféré des internautes, il devient également un outil polyvalent. Il ne se contente plus de proposer des liens vers des résultats mais s'empare de la requête pour la traiter directement et proposer lui-même une réponse. Google est capable de...</p>
<ul>
<li>calculer: <span class="exemple02">21 % de 175</span></li>
<li>établir des conversions d'unités: <span class="exemple02">2,5 dl en litre</span></li>
<li>extraire une citation: <span class="exemple02">define:spéculateur</span></li>
<li>afficher les prévisions météo: <span class="exemple02">météo Bruxelles</span></li>
<li>visualiser un plan: <span class="exemple02">rue des dames blanches namur</span></li>
<li>trouver un médecin: <span class="exemple02">dentiste 1300</span></li>
<li>trouver les horaires pour une séance de cinéma: <span class="exemple02">inception braine-l'alleud</span></li>
<li>afficher les derniers résultats d'un club de football: <span class="exemple02">PSG</span></li>
<li><del>afficher les numéros gagnants du lotto</del></li>
<li><del>vous renseigner les horaires de trains</del></li>
</ul>
<p>Et puisqu'on parle de foot, la recherche «&nbsp;coupe du monde&nbsp;» dans Google donne directement les résultats sous forme de tableau. Une belle performance en terme de réactivité. Pas de chipotage, on va droit au but (c'est le cas de le dire). On aurait presque plus besoin d'aller voir ailleurs. </p>
<p><img src="/images/google-coupe-du-monde.gif" alt="Capture Google" class="bordure"><br /><span class="legende">Capture Google.be (17/06/10)</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/google-repond/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Twitter booste mes visites</title>
		<link>http://www.tutoweb.be/web/twitter-boost/</link>
		<comments>http://www.tutoweb.be/web/twitter-boost/#comments</comments>
		<pubDate>Wed, 12 May 2010 19:10:17 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[cavazza]]></category>
		<category><![CDATA[statistiques]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4175</guid>
		<description><![CDATA[Jeudi passé, je reçois plusieurs avertissements de retweet sur mon billet consacré à l'apostrophe. Après être resté un mois en ligne, voilà que le lien commence à circuler sur Twitter. Je vais dans mon espace administrateur WordPress et là je vois un énorme pic des visites. Ho ! Il faut avoir des gros bras pour [...]]]></description>
			<content:encoded><![CDATA[<p>Jeudi passé, je reçois plusieurs avertissements de retweet sur mon billet consacré à <a href="/typographie/apostrophe/">l'apostrophe</a>. Après être resté un mois en ligne, voilà que le lien commence à circuler sur Twitter. Je vais dans mon espace administrateur WordPress et là je vois un énorme pic des visites. Ho ! Il faut avoir des gros bras pour faire bouger autant de clics. En une seul phrase et un lien, <a href="http://www.fredcavazza.net/">Fred Cavazza</a> a triplé le trafic de fréquentation. Avec ses 10&nbsp;000 suiveurs, il a de quoi faire bouger une bonne partie de la Twitosphère. Enfin... pas tout à fait. De nombreux retweet ont suivis. D'autres blogueurs ont également repris l'info. </p>
<p><img src="/images/stats-tutoweb-twitter-02.gif" alt="Capture d'écran des statistiques sous WordPress" class="bordure"><br /><span class="legende">Statistiques dans l'administration WordPress</span></p>
<p>Je ne suis pas très porté sur les statistiques, mais c'est amusant d'observer la puissance de certains à guider les foules. Dans un deuxième temps, l'effet de contamination est très rapide mais aussi très limité dans le temps. Après ce pic des visites, je retrouve une vitesse de croisière. Au passage, j'empoche quelques abonnés sur Twitter et sur ce blog. Tout ça, sans rien faire. </p>
<p>Sans ces gazouillis, il est peu probable que Fred en fasse un billet sur son blog (en dehors des revues de tweets). La note pourrait être reprise sur un forum ou sur une autre page spécifique mais c'est plus difficile à obtenir. Le micro-blogging est donc un outil complémentaire pour obtenir des <i>backlinks</i> et booster ses visites. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/twitter-boost/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>URL raccourcies, cours toujours</title>
		<link>http://www.tutoweb.be/web/tinyurl/</link>
		<comments>http://www.tutoweb.be/web/tinyurl/#comments</comments>
		<pubDate>Wed, 12 May 2010 11:39:59 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[adresse web]]></category>
		<category><![CDATA[tinyurl]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[url]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=4159</guid>
		<description><![CDATA[Les habitués de Twitter utilisent allègrement des services extérieurs (tinyurl.com, goo.gl, bit.ly) pour troquer le libellés des liens. C'est étonnant de voir que cette fonction essentielle ne soit pas intégrée automatiquement. Cela ne doit pas être bien sorcier de demander à tronquer le libellé d'une suite de caractères commençant par http. Les twitternautes s'y sont [...]]]></description>
			<content:encoded><![CDATA[<p>Les habitués de Twitter utilisent allègrement des services extérieurs (<span class="url">tinyurl.com</span>, <span class="url">goo.gl</span>, <span class="url">bit.ly</span>) pour troquer le libellés des liens. C'est étonnant de voir que cette fonction essentielle ne soit pas intégrée automatiquement. Cela ne doit pas être bien sorcier de demander à tronquer le libellé d'une suite de caractères commençant par <i>http</i>. Les twitternautes s'y sont fait sans même se poser trop de questions. </p>
<p><img src="/images/twitter-url-courte.gif" alt="Twitter et ses URL" class="bordure"><br /><span class="legende">Capture Twitter.com</span></p>
<p>Ce service florissant sur le net, porte souvent le nom de «&nbsp;raccourcisseur d'adresse&nbsp;». Or, il s'agit plutôt de l'échange d'une URL contre une autre. Je te donne <span class="url">maplulongueurldelanne.com</span> et tu me donnes une version allégée de type <span class="url">bit.ly/2553</span>. Ensuite, il y a simplement une redirection de type 301. Du coup, deux soucis majeurs se posent. Le premier concerne le masque: qui se cache derrière ce lien bizarroïde&nbsp;? C'est désarmant de ne pas connaître le nom du site ciblé. C'est aussi une faiblesse exploitée par les pirates et notamment le <i>phishing</i>. Le deuxième problème concerne le service externe. Que deviennent tous les liens raccourcis si le site ferme ses portes&nbsp;? Est-il intéressant pour moi d'alimenter une base de données et servir les statistiques d'un tiers&nbsp;?</p>
<p>Ce problème de longueur n'est pas nouveau et on n'a pas attendu Twitter pour mettre en place des solutions efficaces. Sur les blogs, les adresses interminables déposées en commentaires ne sont pas très élégantes et peuvent parfois <i>déborder</i> dans la mise en page par l'absence de césure dans les liens hypertextes. Pour résoudre ce problème, le libellé du lien est tronqué grâce à un plugin <i>chunk URL</i> [&sup1;]. Je crois d'ailleurs que c'est implémenté nativement sous WordPress.</p>
<p><img src="/images/url-commentaire-blog.gif" alt="URL trop longue dans un commentaire" class="bordure"><br /><span class="legende">Une adresse web trop longue déborde de sa boîte</span></p>
<p>Dans ce même esprit, Firefox possède son petit plugin au nom explicite: <a href="https://addons.mozilla.org/fr/firefox/addon/9549/">Long URL Please</a>. Toutes les URL simplifiées sont remplacées par le début de l'adresse de destination. Seul défaut, il fonctionne au chargement de la page, donc il ne s'applique pas pour les nouveaux tweets ou les archives (<i>more</i>). </p>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] Le site de l'auteur ne semble plus fonctionner.</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/web/tinyurl/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Le point sur l&#039;apostrophe</title>
		<link>http://www.tutoweb.be/typographie/apostrophe/</link>
		<comments>http://www.tutoweb.be/typographie/apostrophe/#comments</comments>
		<pubDate>Fri, 09 Apr 2010 16:15:39 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Typographie]]></category>
		<category><![CDATA[accent]]></category>
		<category><![CDATA[apostrophe]]></category>
		<category><![CDATA[caractère]]></category>
		<category><![CDATA[diacritique]]></category>
		<category><![CDATA[ellision]]></category>
		<category><![CDATA[signe]]></category>
		<category><![CDATA[unicode]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=2622</guid>
		<description><![CDATA[A priori anodin, l'apostrophe fait couler beaucoup d'encre surtout sur les forums et autres wikis. La polémique ne se situe pas au niveau de son usage mais plutôt sur le rendu final. Selon certains, l'apostrophe est courbe et il n'est pas question d'utiliser le signe présent sur n'importe quel clavier traditionnel. Pour d'autres, les méthodes [...]]]></description>
			<content:encoded><![CDATA[<p>A priori anodin, l'apostrophe fait couler beaucoup d'encre surtout sur les forums et autres wikis. La polémique ne se situe pas au niveau de son usage mais plutôt sur le rendu final. Selon certains, l'apostrophe est courbe et il n'est pas question d'utiliser le signe présent sur n'importe quel clavier traditionnel. Pour d'autres, les méthodes d'intégration de l'apostrophe courbe sont trop contraignantes et doivent être pris en charge par des logiciels d'édition.</p>
<h2>Historique</h2>
<p>On a retrouvé l'apostrophe dans des textes médiévaux datant de 1180. Elle disparut avec le latin classique mais perdura en latin populaire. En 1501, Alde Manuce - connu pour l'impression du premier livre en caractère italique - publia un texte ancien en italien doté de l'apostrophe. Ce signe d'élision est alors peu utilisé en français. En 1533, Geofroy Tory, est le premier imprimeur français a en faire un usage systématique. Peu de temps après, le caractère plomb fait partie intégrante du meuble du typographe et devient obligatoire en français [&sup1;].</p>
<h2>Règle grammaticale</h2>
<p>En français, l'apostrophe sert d'élision. Elle remplace la voyelle finale quand le mot suivant commence par une voyelle ou un <i>h</i> muet. On dit «&nbsp;l'école&nbsp;» pour «&nbsp;la école&nbsp;». Il existe de très rares exceptions comme (le) <i>onze</i>, (le) <i>yacht</i>, (le) <i>oui</i> ou (le) <i>yucca</i>. L'apostrophe précède des noms communs mais aussi des noms propres. </p>
<div class="exemple">La présence d'Anne sur le sol d'Haïti...</div>
<p>Dans des cas particuliers, l'élision est à éviter notamment pour les abréviations. </p>
<div class="exemple">Sous la direction de A. Dumont.</div>
<h2>Une forme controversée</h2>
<p>Voici donc la partie plus délicate. D'après certains internautes, il existe une apostrophe droite (dite <i>anglaise</i>) et une apostrophe courbe (dite <i>française</i>). Dans cette affirmation fondé sur très peu de chose, il serait normal de préférer la version adaptée à sa langue. Autrement dit, nous sommes tous en train d'utiliser une apostrophe anglaise sans même le savoir. Voilà ce qu'écrit Jacques André à propos du tracé...</p>
<blockquote><p>Les premières apostrophes imprimées ont un dessin inspiré de l’apostrophe grecque, puis ressemblent à un «&nbsp;point crochu&nbsp;» selon Tory, ou à un «&nbsp;demi-cercle&nbsp;» selon Estienne. Mais très vite, elle prendra la forme d’une virgule, forme qu’elle gardera jusqu’à nos jours. (...) L’apostrophe traditionnelle n’est pas obligatoirement courbe comme on le lit parfois : il suffit de regarder les linéales anciennes pour s’en rendre compte. En revanche, elle est <i>toujours oblique</i>...
<p><cite>Jacques André</cite></p>
</p>
</blockquote>
<p>Le français écrit use abondamment des apostrophes. Les Italiens ont recours à ce signe moins souvent. Quand à l'anglais, l'apostrophe est réservé à un tout autre usage et se fait rare dans les textes. Néanmoins, on trouve l'apostrophe tout en rondeur dans des textes manuscrits anciens de langue anglaise. Preuve en est que la verticalité du signe n'est pas une particularité des Anglo-saxons.</p>
<p><img src="/images/apostrophes-differentes.gif" alt="Différentes apostrophes dans différentes fontes"></p>
<p>Jusqu'à preuve du contraire, la forme du caractère est dessinée par le typographe. Les traits sont personnalisés pour coller au mieux aux caractéristiques de sa fonte. Au début de la typographie plomb, l'apostrophe est rare. Le caractère gravé fait son apparition en 1533. La forme ressemble assez fidèlement à la virgule à quelques variantes subtiles.</p>
<blockquote><p>(...) à cause d’un effet d’optique, phénomène fréquent en typographie, l’apostrophe doit être redessinée un peu plus petite que la virgule et souvent avec quelques modifications dans la forme afin de préserver la couleur ou afin de mieux épouser à leur niveau respectif le contour différent des caractères avoisinants.</p>
<p><cite>Jacques André</cite></p>
</blockquote>
<h2>L'apostrophe dactylographique</h2>
<p>Ils sont bien beaux ces signes graphiques mais ils ne correspondent pas à l'apostrophe du clavier. En effet, le symbole du clavier est souvent très droit, sans harmonie avec la typographie. Cette "verticalisation" est à mettre sur le compte de la machine à écrire. D'origine anglo-saxonne, le créateur a cru bon d'ôter tout signe distinctif de l'apostrophe. Débarrassé de sa courbe, elle pouvait prendre le rôle d'autres signes et libérer de la place sur le clavier. Le signe filiforme se chargeait de l'élision mais aussi de l'ouverture et la fermeture des guillemets. Ce caractère mutant et multifonction est le résultat d'une adaptation par rapport à une contrainte physique.</p>
<p>Il est amusant de remarquer la présence de l'accent grave dans la table ASCII [&sup2;] mais pas de l'accent aigu. La plupart des informaticiens anglophones ne l'utilisaient pas. En cas de nécessité, l'apostrophe droite occupait ce rôle. Il faut attendre la table ASCII étendu pour voir apparaître un accent aigu. </p>
<h2>Choisir le bon caractère pour le web</h2>
<p>L'apostrophe sur le clavier d'ordinateur (y compris le clavier Azerty français) est définit dans la table des caractères ASCII de base sous l'entité numérique <code>&amp;#39;</code>. Il désigne effectivement l'apostrophe mais on lui attribue également d'autres fonctions. </p>
<blockquote><p>En ASCII, il (ndlr U+0027 ou 039) représente un signe de ponctuation (un guillemet-apostrophe gauche ou droit, une apostrophe proprement dite, une ligne verticale ou le signe prime) ou encore un signe modificateur (un accent aigu ou un diacritique apostrophe).
<p><cite>Unicode 3.1 [&sup3;]</cite></p>
</blockquote>
<p>Étonnant de voir autant d'attributions pour un signe linguistique qui a toute sa place dans la langue française. Dans ces conditions, il n'est pas surprenant de le voir bien droit et dépourvu de tout attribut distinctif. Il ne peut être courbe si dans la même foulée il remplit la fonction d'un guillemet gauche ou le signe prime. On peut se demander pourquoi il n'a pas été redessiné dans l'ASCII étendu tout comme ce fut le cas avec les guillemets français.</p>
<p>La polysémie des caractères est un sujet délicat et difficile à trancher. D'autres signes possèdent des usages différents, comme le trait d'union: liant dans un mot composé, signe de la césure, signe de la soustraction.  </p>
<table class="donnees">
<caption>Apostrophe dans le code HTML</caption>
<tr>
<th>Caractère</th>
<th>Entité numérique</th>
<th>Entité nommée</th>
<th>Nom</th>
</tr>
<tr>
<td class="impair"><img src="/images/apostrophe-39.gif" alt="Dessin de l'apostrophe"></td>
<td class="pair"><code>&amp;#39;</code></td>
<td class="impair">—</td>
<td class="pair">apostrophe</td>
</tr>
<tr>
<td class="impair"><img src="/images/apostrophe-146.gif" alt="Dessin de l'apostrophe"></td>
<td class="pair"><code>&amp;#146;</code></td>
<td class="impair"><code>&amp;rsquo;</code></td>
<td class="pair">right quote</td>
</tr>
<tr>
<td class="impair"><img src="/images/apostrophe-8217.gif" alt="Dessin de l'apostrophe"></td>
<td class="pair"><code>&amp;#8217;</code></td>
<td class="impair">—</td>
<td class="pair">right single quote</td>
</tr>
</table>
<h2>De l'apostrophe à la volée</h2>
<p>Comme le recommande Unicode, nous devrions utiliser le caractère Unicode 8217 (et revoir le code de toutes les pages en archives&nbsp;!). Dans la pratique, cela pose évidemment un soucis. Il est inimaginable de faire l'impasse sur un caractère directement accessible au clavier pour le remplacer par un code barbare et abscons. Les utilisateurs de Mac ont plus de chance grâce au raccourci clavier <kbd>Alt</kbd> + <kbd>Maj</kbd> + <kbd>'</kbd>. Pas certain que le quidam y comprenne quelque chose. </p>
<p>Certains CMS convertissent automatiquement les apostrophes. C'est le cas de WordPress depuis sa version 2.5. Les automatismes c'est bien, mais ils ont leurs limites [&#8308;]. Par exemple, la recherche d'une expression sur une page web ne donnera pas le même résultat si l'accent n'est pas identique. Autre risque d'erreur, les programmeurs seront fort déçus en constatant que leur code n'est plus opérationnel à cause de la conversion. </p>
<h2>Conclusion</h2>
<p>Nous devrions faire honneur à la lettre et à notre langue française par des apostrophes élégantes. Les erreurs du passé - prises en habitude - nous contraignent à la régression. Une niche de passionnés, sensibilisés à cette finesse typographique, ont adopté des solutions sans être tous d'accord entre eux. Quant au grand public, à défaut d'avoir un clavier Azerty digne de ce nom, les éditeurs de contenu devraient les assister par un remplacement automatique.</p>
<div class="notes-separateur"></div>
<p><span class="notes">[&sup1;] «&nbsp;<a href="/download/apostrophe-graphe39.pdf">Funeste destinée: l'apostrophe détournée</a>&nbsp;» Jacques André (PDF - 5&nbsp;Mo)</span><br />
<span class="notes">[&sup2;] <a href="/webmastering/tableau-ascii/">Les tableaux ASCII</a></span><br />
<span class="notes">[&sup3;] <a href="/download/unicode-chapitre-7.pdf">Unicode - chapitre 7</a> (PDF - 111 Ko)</span><br />
<span class="notes">[&#8308;] À lire: «&nbsp;<a href="/wordpress/guillemets-wp/">WordPress et ses guillemets</a>&nbsp;»</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/typographie/apostrophe/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mieux organiser les archives d&#039;un blog</title>
		<link>http://www.tutoweb.be/blog/archives-blog/</link>
		<comments>http://www.tutoweb.be/blog/archives-blog/#comments</comments>
		<pubDate>Sun, 28 Mar 2010 16:20:49 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[archive]]></category>
		<category><![CDATA[calendrier]]></category>
		<category><![CDATA[timeline]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=3462</guid>
		<description><![CDATA[Les blogs ont été construits sur une architecture particulière avec un affichage antéchronologique des billets. Cette manière de faire offre la part belle aux notes les plus fraîches. Le contenu s'efface discrètement avec le temps et prend le nom d'archives. Le tout est encodé soigneusement de manière automatique pour permettre un accès facile et rapide. [...]]]></description>
			<content:encoded><![CDATA[<p>Les blogs ont été construits sur une architecture particulière avec un affichage antéchronologique des billets. Cette manière de faire offre la part belle aux notes les plus fraîches. Le contenu s'<i>efface</i> discrètement avec le temps et prend le nom d'<i>archives</i>. Le tout est encodé soigneusement de manière automatique pour permettre un accès facile et rapide. Rien à voir avec une grande pièce sombre et poussiéreuse dans laquelle on ne s'aventure que par ultime nécessité. Selon les blogs, chacun choisi sa manière de repêcher les écrits du passé. On trouve généralement un moteur de recherche interne. Certains font le choix d'y ajouter un rangement par mots-clés, un calendrier, un top 10 des posts ou un lien <i>Archives</i>. Les nombreux <i>widgets</i> de WordPress offrent une personnalisation simple à mettre en place. </p>
<p>Malgré tous ces outils, on tourne en rond sur l'archivage présenté selon une ligne du temps. L'affichage sous forme de liste à puces est assez rudimentaire. Un système de navigation intéressant pour le webmaster. Par contre, je doute de sa pertinence pour le visiteur. Il peut, au mieux, juger de la longévité du blog. Plus le temps passe, plus la liste s'allonge et moins elle donne envie. D'ailleurs, nombreux sont ceux qui trouvent des parades pour concentrer cette rubrique: menu déroulant, classement par année, onglets, etc.</p>
<p>En me baladant sur le web, j'ai trouvé une <i>timeline</i> agencée différemment. Le premier ressemble à un calendrier dont les jours sont remplacés par les mois. Le deuxième est mon préféré. Mis en bas de page, les mois sont alignés à l'image d'un diagramme. Le troisième range ses notes dans une numérotation par semaines. </p>
<p><a href="http://blog.burninghat.net/" class="imagelink"><img src="/images/capture-burninghat.gif" alt="Capture Burninghat" class="bordure"></a><br /><span class="legende">Capture blog.burninghat.net</span></p>
<p><a href="http://railstips.org/" class="imagelink"><img src="/images/capture-railstips.gif" alt="Capture Railtips" class="bordure"></a><br /><span class="legende">Capture Railstips.org</span></p>
<p><a href="http://52weeksofux.com/" class="imagelink"><img src="/images/capture-52-weeks.gif" alt="Capture écran 52weeksofux" class="bordure"></a><br /><span class="legende">Capture 52weeksofux.com</span></p>
<p><a href="http://www.gustave.tv/" class="imagelink"><img src="/images/capture-gustave.gif" alt="Capture Gustave.tv/" class="bordure"></a><br /><span class="legende">Capture Gustave.tv (08/07/10)</span></p>
<p>À moins de choisir un thème avec une gestion des archives originale, difficile de mettre au point un concept novateur. Dernière solution, installer un plugin comme <a href="http://wordpress.org/extend/plugins/paginator/">Paginator</a>. Les numéros des pages sont déposés sur une ligne du temps. Le taquet du dessous se déplace à la souris pour avancer plus ou moins vite dans le temps. L'auteur du greffon met une démonstration sur son site. </p>
<p><a href="http://karaboz.ru/2007/11/19/paginator-3000-postranichnaya-navigaciya-budushhego/" class="imagelink"><img src="/images/wp-paginator.gif" alt="Capture Karaboz.ru" class="bordure"></a><br /><span class="legende">Capture Karaboz.ru</span></p>
<p>La façon de proposer des anciens articles ne se limite pas à ce que l'on nomme classiquement sur les blogs les «&nbsp;archives&nbsp;». Ce classement se limite à afficher les nouvelles selon une ligne du temps. D'autres alternatives existent pour naviguer dans le patrimoine d'un site: rangement par catégorie, classement par auteurs, nuages de tags, les «&nbsp;most popular&nbsp;», etc. <a href="http://www.openweb.eu.org/">Openweb</a> a depuis toujours opté pour un choix fort différent: classer le contenu selon le niveau du lecteur. Ce genre de classement exige de pouvoir situer son niveau de connaissance et - le cas échéant - faire preuve d'un peu d'humilité. Une démarche intéressante mais le visiteur curieux devra naviguer dans toutes les catégories.</p>
<p><img src="/images/capture-openweb.gif" alt="Capture Openweb" class="bordure"><br /><span class="legende">Capture Openweb.eu.org</span></p>
<p>Pour compléter votre lecture: «&nbsp;<a href="http://www.smashingmagazine.com/2010/05/24/website-archives-best-practices-and-showcase/">Website Design Archives</a>&nbsp;» (Smashing Magazine).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/blog/archives-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Le lucida, police dédiée à l&#039;écran</title>
		<link>http://www.tutoweb.be/typographie/lucida/</link>
		<comments>http://www.tutoweb.be/typographie/lucida/#comments</comments>
		<pubDate>Sat, 13 Mar 2010 11:40:02 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Typographie]]></category>
		<category><![CDATA[fonte]]></category>
		<category><![CDATA[lucida]]></category>
		<category><![CDATA[police]]></category>
		<category><![CDATA[script]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=3418</guid>
		<description><![CDATA[La fonte Lucida est récente. Créée en 1985 par Charles Bigelow et Chris Holmes, elle est spécialement adaptée pour les écrans et les imprimantes à basse résolution. Lucida comporte un grand nombre de styles (avec et sans empattements, chasse fixe, script...) afin de varier les genres et de conserver une harmonie dans une même composition. [...]]]></description>
			<content:encoded><![CDATA[<p>La fonte Lucida est récente. Créée en 1985 par Charles Bigelow et Chris Holmes, elle est spécialement adaptée pour les écrans et les imprimantes à basse résolution. Lucida comporte un grand nombre de styles (avec et sans empattements, chasse fixe, script...) afin de varier les genres et de conserver une harmonie dans une même composition. C'est une des premières fontes dédiée à l'écran à posséder un jeu de caractère étendu avec notamment des signes mathématiques, grecs et autres symboles. </p>
<p><img src="/images/lucida-variantes.gif" alt="Variantes Lucida"></p>
<p>Lucida Console est la police par défaut des documents textes dans Windows. C'est également la typographie du texte lors d'un plantage de l'ordinateur PC et son fameux écran bleu de la mort. Depuis Mac OS X, le Lucida Grande est devenu la police standard. </p>
<p>Pour compléter la lecture: «&nbsp;<a href="http://www.tug.org/store/lucida/designnotes.html">Notes on Lucida designs</a>&nbsp;»</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/typographie/lucida/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Contraste: couleur du texte</title>
		<link>http://www.tutoweb.be/typographie/contraste/</link>
		<comments>http://www.tutoweb.be/typographie/contraste/#comments</comments>
		<pubDate>Fri, 12 Mar 2010 23:34:31 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Typographie]]></category>
		<category><![CDATA[contraste]]></category>
		<category><![CDATA[couleur]]></category>
		<category><![CDATA[texte]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=3340</guid>
		<description><![CDATA[Le contraste du texte et du fond est un élément important de la lisibilité. Le texte doit se détacher facilement de son fond pour faciliter la lecture. En photographie, le contraste est la différence entre les parties claires de l'image et les parties sombres. Pour un texte, c'est à peu près la même chose si [...]]]></description>
			<content:encoded><![CDATA[<p>Le contraste du texte et du fond est un élément important de la lisibilité. Le texte doit se détacher facilement de son fond pour faciliter la lecture. En photographie, le contraste est la différence entre les parties claires de l'image et les parties sombres. Pour un texte, c'est à peu près la même chose si ce n'est qu'il est difficile de distinguer le niveau de clarté dans les couleurs. </p>
<p>Dans l'exemple ci-dessous, le choix des couleurs est problématique d'un point de vue du contraste. Pour s'en rendre compte, j'ai passé la capture en noir et blanc. Le titre de section (1: luminosité 20&nbsp;%) a du mal à se détacher du fond en raison de sa faible luminosité. Par contre, le texte (2: luminosité 100&nbsp;%) obtient un contraste maximum. La teinte du lien visité (3: luminosité 40&nbsp;%) est d'une meilleure lisibilité. Inversement, la couleur de l'hypertexte (4: luminosité 20&nbsp;%) est problématique pour la lecture. Le dernier lien (5: luminosité 40&nbsp;%) est de la même couleur mais avec un niveau d'éclairage doublé. </p>
<p><img src="/images/lisibilite-contraste.gif" alt="Capture du site Études photographiques" class="bordure"><br /><span class="legende">Capture <a href="http://sympa.ehess.fr/sympa/d_read/photohist/Etudes-photographiques/enligne.htm?checked_cas=0">Études photographiques</a></span></p>
<p><img src="/images/lisibilite-contraste-bn.gif" alt="Capture du site Études photographiques" class="bordure"><br /><span class="legende">Capture en niveaux de gris</span></p>
<p>On remarque une évidence: plus la différence de luminosité est importante et plus le contraste est fort. Sur cette base, on pourrait en déduire une théorie bête et méchante. On aurait donc automatiquement du noir à 0 % de luminosité et une autre couleur à 100&nbsp;% de luminosité. Avec un fond coloré et un texte noir, cela fonctionne relativement bien sauf avec des couleurs très saturées. Dans le cas inverse (fond noir et texte coloré), les résultats sont satisfaisants à l'exception des tons bleus.</p>
<p><img src="/images/contraste-couleurs-tsl3.gif" alt="Contraste des couleurs, luminosité maximale"></p>
<p>Outre les accords de goût discutables et les problèmes de lisibilité flagrants cités précédemment, un fort contraste agresse l'œil, diminue le confort de lecture et augmente la fatigue oculaire. À cela, il faut ajouter l'impact négatif de la luminosité sur écran. Sur ce type de support, la couleur n'est pas la combinaison de pigments mais le mélange d'une lumière plus ou moins forte. L'absence de lumière affiche du noir et la projection des trois faisceaux à leur maximum donne du blanc. Cette intensité lumineuse influence la rapidité de lecture et la fatigue de l'œil. Qu'on se le dise une fois pour toutes: à l'écran, le <strong>texte noir sur fond blanc n'est pas le meilleur choix</strong>. Un fond faiblement assombri ou coloré est une solution mais souvent un inconvénient par rapport à l'intégration d'images. Le mieux pour un fond clair c'est d'utiliser une couleur de texte foncée légèrement éclaircie.</p>
<p><a href="http://paris.blog.lemonde.fr/">Peter Gabor</a> est le seul blogueur - à ma connaissance - à écrire ses longs paragraphes dans différents coloris. On pourrait croire à une méconnaissance de la chose mais il se fait que Peter est passionné de typographie et expert dans la discipline. «&nbsp;Ces changements de couleurs permettent à l'œil de se reposer un peu des contrastes trop violents du noir &amp; lumière et aussi de faire des relances de lecture d'un paragraphe sur l'autre&nbsp;».</p>
<p><img src="/images/extrait-gabor.gif" alt="Capture du blog de Peter Gabor" class="bordure"><br /><span class="legende">Capture paris.blog.lemonde.fr</span></p>
<h2>Outils en ligne</h2>
<p><a href="http://www.snook.ca/technical/colour_contrast/colour.html">Colour constrast check</a> — Très simple, il suffit d'ajouter les valeurs de la couleur du texte et la couleur d'arrière plan. Ensuite, le système calcule la luminosité et la différence de tonalité. Selon l'outil, vous devriez avoir une luminosité supérieure ou égale à 125 et une différence de tonalité supérieure ou égale à 500.</p>
<p><a href="http://www.visionaustralia.org.au/info.aspx?page=961">Colour contrast analyser</a> —  Logiciel à télécharger (existe en français) et réagit comme le précédent: il calcule la différence entre les deux couleurs d'avant et d'arrière plan selon des algorithmes proposés par le W3C.</p>
<p><a href="http://www.wat-c.org/tools/WAT/versions/fr/about.html">Web accessibility Toolbar</a> — Barre d'outils qui s'ajoute à Internet Explorer et permet d'analyser les contrastes, de passer toute la page en niveaux de gris et de simuler le rendu de la page comme si elle était présentée à un daltonien.</p>
<p><a href="http://graybit.com/main.php">Graybit</a> — Entrez l'adresse d'un site et Graybit se charge de le passer en niveaux de gris (texte, images). Très pratique pour avoir un aperçu général. </p>
<p>À lire également: «&nbsp;<a href="/ergonomie/daltonisme-web/">Daltonisme dans la conception web</a>&nbsp;»</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/typographie/contraste/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>L&#039;analogique explosé à la TNT</title>
		<link>http://www.tutoweb.be/divers/rtbf-numerique/</link>
		<comments>http://www.tutoweb.be/divers/rtbf-numerique/#comments</comments>
		<pubDate>Wed, 03 Mar 2010 20:00:52 +0000</pubDate>
		<dc:creator>Morgan</dc:creator>
				<category><![CDATA[Divers]]></category>
		<category><![CDATA[décodeur]]></category>
		<category><![CDATA[rtbf]]></category>
		<category><![CDATA[télé]]></category>
		<category><![CDATA[téléviseur]]></category>
		<category><![CDATA[télévision]]></category>
		<category><![CDATA[TNT]]></category>

		<guid isPermaLink="false">http://www.tutoweb.be/?p=3397</guid>
		<description><![CDATA[Ça y est, la RTBF a franchi le pas du numérique depuis ce lundi 1er mars. Qu'est ce que ça change en pratique&#160;? Il parait que l'image est bien plus nette. Ah, pourtant je disposais déjà d'une très belle image. Il est vrai que la qualité varie fortement en fonction des régions. Autre avantage, d'autres [...]]]></description>
			<content:encoded><![CDATA[<p>Ça y est, la RTBF a franchi le pas du numérique depuis ce lundi 1er mars. Qu'est ce que ça change en pratique&nbsp;? Il parait que l'image est bien plus nette. Ah, pourtant je disposais déjà d'une très belle image. Il est vrai que la qualité varie fortement en fonction des régions. Autre avantage, d'autres chaînes viennent s'ajouter à l'offre gratuite. Il y a de quoi sourire quand on compare l'offre à celle de nos amis français. Au final rien de bien révolutionnaire... sauf un petit détail. Tous les foyers munis d'un ancien téléviseur ne pourront plus accéder aux chaînes gratuites du service public sans décodeur.</p>
<p>Ce petit engin coûte la peau des fesses&nbsp;! Son prix varie entre 40 euros (Fnac) et 80 euros pour l'entrée de gamme. Les vendeurs sont incapables de m'expliquer le grand écart de prix entre les décodeurs. Pire, ils sont nombreux à me conseiller une antenne additionnelle compatible avec la TNT à +/- 15 euros. La facture est assez lourde surtout quand il n'existe aucune autre alternative. C'est ça où votre TV ne sert plus à rien&nbsp;!</p>
<p>Je pense à tous ces gens dont le budget est serré et les fins de mois difficiles. Je ne comprends pas comment on ose imposer une technologie sans proposer d'alternatives. Jusqu'à peu, beaucoup de personnes pouvaient se réjouir de disposer de la télévision librement et gratuitement. Il fallait bien évidemment une télévision et une petite antenne. Sans oublier la taxe redevance annuelle de la région wallonne d'une centaine d'euros. </p>
<p>Du coup, les gens se ruent sur les décodeurs au point de créer une rupture de stocks dans les magasins. Les autres seront surpris de voir leur téléviseur - à peine âgé de trois ans - considéré comme dépassé et incompatible avec la technologie TNT. Les étudiants devront trouver une solution pour cette veille télé du communautaire. Idem pour tous ces lieux de rassemblement: café, home...  </p>
<p>Et pour ceux qui décident d'acheter une nouvelle écran télé, méfiez-vous des prochains changements technologiques. Regarder la RTBF risque de vous coûter très cher... même si elle est gratuite.  </p>
]]></content:encoded>
			<wfw:commentRss>http://www.tutoweb.be/divers/rtbf-numerique/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
