<?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>La Case de l&#039;Oncle Tom &#187; futur</title>
	<atom:link href="http://case.oncle-tom.net/tag/futur/feed/" rel="self" type="application/rss+xml" />
	<link>http://case.oncle-tom.net</link>
	<description>Développement Web, bonnes pratiques et performances</description>
	<lastBuildDate>Sun, 25 Dec 2011 19:33:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<atom:link rel="search"
           href="http://case.oncle-tom.net/opensearch"
           type="application/opensearchdescription+xml"
           title="Content Search" />		<item>
		<title>Du bon usage de la sémantique : microformats et futur de la recherche sur Internet</title>
		<link>http://case.oncle-tom.net/2007/semantique-microformats-internet/</link>
		<comments>http://case.oncle-tom.net/2007/semantique-microformats-internet/#comments</comments>
		<pubDate>Tue, 31 Jul 2007 15:00:00 +0000</pubDate>
		<dc:creator>Oncle Tom</dc:creator>
				<category><![CDATA[Développement Web]]></category>
		<category><![CDATA[Standards du Web]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[futur]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[microformats]]></category>
		<category><![CDATA[semantique]]></category>
		<category><![CDATA[technorati]]></category>
		<category><![CDATA[xhtml]]></category>
		<guid isPermaLink="false">http://case.oncle-tom.net/1999/11/30/semantique-microformats-internet/</guid>
		<description><![CDATA[Pendant que la bataille fait rage du côté des sites Web 2.0 (mais c&#8217;est un des leviers de l&#8217;innovation sur Internet que l&#8217;on aime ou pas cette appellation), une révolution silencieuse se met en marche : le Web sémantique ou encore le Web 3.0. Jusqu&#8217;à présent, les moteurs de recherche (Google, Yahoo!, Windows Live Search, [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:center"><img src='http://case.oncle-tom.net/images/2007/07/logo-microformats.gif' alt='Logo microformats' /></p>
<p>Pendant que la bataille fait rage du côté des sites <em>Web 2.0</em> (mais c&#8217;est un des leviers de l&#8217;innovation sur Internet que l&#8217;on aime ou pas cette appellation), <strong>une révolution silencieuse se met en marche</strong> : <a href="http://affordance.typepad.com/mon_weblog/2006/11/web_30_donnes_o.html">le Web sémantique ou encore le Web 3.0</a>.<br />
Jusqu&#8217;à présent, les moteurs de recherche (Google, Yahoo!, Windows Live Search, Exalead etc.) avaient pour défi le recensement du plus grand nombre de documents et des résultats de recherche pertinents.</p>
<p>S&#8217;il faudra bien évidemment <a href="http://fr.opquast.com/bonnes-pratiques/fiche/167">soigner l&#8217;intitulé des liens</a>, il faudra avant tout <strong>donner du sens à vos documents</strong>. C&#8217;est tout l&#8217;intérêt d&#8217;une <strong>programmation propre</strong>, <strong>respectant les standards</strong> et utilisant la <strong>sémantique à bon escient</strong>.</p>
<p>Les <a href="http://microformats.org">microformats</a> sont pour moi un élément essentiel qui accéléreront le processus et permettront de comprendre l&#8217;intérêt de la sémantique.<br />
<span id="more-714"></span></p>
<h3>Qu&#8217;est-ce que la sémantique ?</h3>
<p>La sémantique est loin d&#8217;être une invention de l&#8217;informatique puisque ce principe est à la base de toutes les langues du monde. <strong>La sémantique se réfère tout simplement au sens exprimés par les mots</strong>. Ce concept peut être à vrai dire être élargi à tout ce qui structure de l&#8217;information.</p>
<p>Plus concrètement encore, ouvrez un journal (Le Figaro, Libération ou même Voici) et prenez une page au hasard. <strong>Vous arriverez sans peine</strong> et surtout sans lire le texte <strong>à discerner les titres d&#8217;articles, leur résumé, leurs passages clés</strong> et leur texte à proprement parler. <em>Pourquoi</em> ? Parce que tous ces éléments sont présentés de manière différente, utilisent une police de caractère différente et ont une taille différente. Un titre d&#8217;article sera naturellement plus grand et plus épais que l&#8217;article ; le résumé sera situé sous le titre et sera espace du texte l&#8217;article en lui-même.</p>
<p>Et si vous ne prenez pas garde à la sémantique en elle-même c&#8217;est parce qu&#8217;elle silencieuse et logique : <strong>votre cerveau analyse lui-même ce qu&#8217;il faut faire car il comprend la signification de la disposition sans avoir à comprendre ce qui est écrit</strong>.</p>
<h3>Bien structurer une page <acronym title="HyperText Markup Language">HTML</acronym></h3>
<p>Récemment encore j&#8217;entendais de la bouche d&#8217;une agence Web <q>on fait des sites aux standards, avec des div et du <acronym title="Cascading Style Sheet"><acronym title="Cascading Style Sheets">CSS</acronym></acronym></q>. C&#8217;est déjà bien de passer au validateur mais c&#8217;est encore mieux si on produit du code significatif.<br />
Voici deux exemples de code qui contiennent les <em>mêmes textes</em> et qui respectent le standard <acronym title="eXtensible HyperText Markup Language">(X)<acronym title="HyperText Markup Language">HTML</acronym></acronym>.</p>
<p><strong>Méthode sémantiquement correcte</strong> :</p>
<pre><code class="html">&lt;div id=&quot;introduction&quot;&gt;
	&lt;h2&gt;Site valide <acronym title="HyperText Markup Language">HTML</acronym>&lt;/h2&gt;
	&lt;p&gt;Cette portion de code a un code <acronym title="HyperText Markup Language">HTML</acronym> valide.&lt;/p&gt;
	&lt;p class=&quot;suite&quot;&gt;&lt;a href=&quot;./edito&quot;&gt;Lire la suite de l'édito&lt;/a&gt;&lt;/p&gt;
&lt;div&gt;</code></pre>
<p><strong>Méthode sémantiquement <em>in</em>correcte</strong> :</p>
<pre><code class="html">&lt;div id=&quot;page_haut&quot;&gt;
	&lt;div class=&quot;titre rouge&quot;&gt;Site valide <acronym title="HyperText Markup Language">HTML</acronym>&lt;/div&gt;
	&lt;div class=&quot;texte&quot;&gt;Cette portion de code a un code <acronym title="HyperText Markup Language">HTML</acronym> valide.&lt;/div&gt;
	&lt;div class=&quot;texte petit&quot;&gt;&lt;a href=&quot;./?page=12345&quot;&gt;Lire la suite de l'édito&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>Sans avoir à donner un cours de balisage, voici les principes auxquels se tenir :</p>
<ul>
<li><strong>utilisez les balises <acronym title="HyperText Markup Language">HTML</acronym> au bon endroit et à bon escient</strong>. Ne mettez pas un <code>div</code> (bloc neutre) si un <code>p</code> (paragraphe) ou un <code>h<em>n</em></code> (titre hiérarchique) peuvent faire l&#8217;affaire. De même pour les listes, n&#8217;utilisez pas de <code>div</code> (bloc neutre) si une <code>ul</code>/<code>ol</code> (liste désordonnée, liste ordonnée) ou une <code>dl</code> (liste de définition) sont mieux adaptées.</li>
<li><strong>nommez les <em>classes</em> (.classe) et les <em>id</em> (#id) en fonction de ce qu&#8217;ils représentent</strong> et non en fonction de l&#8217;apparence qu&#8217;ils devraient avoir.</li>
</ul>
<p>Et c&#8217;est tout ! Cette <strong>petite touche de rigueur assurera une pérennité certaine</strong> dans vos développements. Sans compter la <em>facilité à intégrer</em> les microformats par la suite.</p>
<h3>Et les microformats dans tout ça ?</h3>
<p>Justement les microformats parlons-en. Si de prime abord sémantique et microformats peuvent paraitre sans grand rapport, <em>ces concepts sont pourtant intimement liés</em>. En utilisant les attributs <code>class</code> et <code>rel</code> (pour les liens hypertextes) dans une logique bien précise, <strong>on décrit le contenu et sa nature</strong> (titre de billet, auteur, date d&#8217;un évènement etc.).</p>
<p>Pour faire simple :</p>
<ul>
<li><strong>les microformats sont faciles à intégrer</strong> si le contenu est déjà bien structuré</li>
<li><strong>les microformats aident à bien structurer</strong> le contenu : qu&#8217;il soit bien structuré ou pas, les recommandations vous guideront dans cette voie</li>
<li><strong>les microformats sont déjà reconnus par des moteurs de recherche</strong> spécialisés (<a href="http://technorati.com/">Technorati</a>) et plus officieusement par les moteurs de recherche classiques (<a href="http://www.google.com">Google</a>, <a href="http://search.yahoo.com">Yahoo!</a> etc.). Pas convaincu(e) ? Voici la <a href="http://microformats.org/wiki/implementations-fr">liste non-exhaustive des sites comprenant les microformats</a>.</li>
</ul>
<p>Pour bien compléter ces paroles, je vous recommande cette <a href="http://fredericdevillamil.com/presentations/2006/que-sont-les-microformats/index.html">excellente introduction aux microformats</a>.</p>
<h3>Intérêt supplémentaire des microformats</h3>
<p>Ce qui est intéressant avec les microformats c&#8217;est que l&#8217;on peut les utiliser sans avoir derrière un site Web super hi-tech en <em>Web 46.0 full Ajax</em>. <strong>Une page <acronym title="HyperText Markup Language">HTML</acronym> suffit</strong>. J&#8217;ai justement utilisé les microformats la première fois lorsque j&#8217;ai voulu refaire mon CV en me disant qu&#8217;en <acronym title="HyperText Markup Language">HTML</acronym> ça serait sympa. Il existe fort heureusement un <a href="http://microformats.org/wiki/hresume">microformat hResume</a> réutilisant lui-même les microformats <a href="http://microformats.org/wiki/hcard">hCard</a> (carte de visite) et <a href="http://microformats.org/wiki/hcalendar">hCalendar</a> (calendrier et évènements).<br />
Outre l&#8217;aspect purement technique de cet exercice, <strong>ce CV me sert maintenant de carte de visite</strong> (en utilisant le <a href="http://technorati.com/contacts/">service <em>contacts</em> de Technorati</a>) en plus de pouvoir <strong>être réutilisé sur des sites de recherche d&#8217;emploi</strong>.</p>
<p>Mis à part une sémantisation de votre contenu, voici les <strong>bénéfices à retirer d&#8217;un microformatage</strong> :</p>
<ul>
<li><strong>extraction et republication du contenu à la volée</strong> : des services Web permettent d&#8217;aggréger une page pour la transformer en flux Atom voire même de créer des cartes de visites instantanément</li>
<li><strong>les navigateurs Web intégreront eux aussi les microformats</strong> pour faciliter la navigation des utilisateurs : installez l&#8217;<a href="https://addons.mozilla.org/fr/firefox/addon/4106">extension Operator pour Firefox</a>, revenez sur cette page et améliorez votre expérience de navigation</li>
<li><strong>les microformats sont au coeur de l&#8217;Internet de demain</strong> et c&#8217;est aujourd&#8217;hui qu&#8217;il faut y travailler</li>
</ul>
<h3>La sémantique, moteur des futures recherches sur Internet</h3>
<p>Même si à l&#8217;heure actuelle on peut considérer que les microformats aident au référencement, ce n&#8217;est pas explicitement mentionné. Mais l&#8217;avenir est à la recherche sémantique afin d&#8217;affiner les résultats et de mieux répondre aux requêtes. C&#8217;est un énorme défi puisqu&#8217;entre indexer du contenu et comprendre ce qu&#8217;il dit, il y a tout un fossé. Cette recherche sémantique s&#8217;appliquera aussi bien au texte qu&#8217;aux ressources audio (musique, interview etc.) et vidéo.<br />
<a href="http://arstechnica.com/articles/culture/hakia-semantic-search-set-to-music.ars">Hakia s&#8217;intéresse à la recherche sémantique musicale</a> tandis que d&#8217;un autre côté, <a href="http://altsearchengines.com/2007/07/30/what-is-a-search-engine/">la recherche sémantique est considérée comme étant une fonctionnalité nécessaire pour le futur de la recherche sur Internet</a>.</p>
<p><ins><strong>Edition du 31/07 à 19h10</strong> : <a href="http://googlemapsapi.blogspot.com/2007/06/microformats-in-google-maps.html">Google Maps intègre désormais le microformat hCard</a>.</ins></p>]]></content:encoded>
			<wfw:commentRss>http://case.oncle-tom.net/2007/semantique-microformats-internet/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>

