<?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/"
	>

<channel>
	<title>Tangane - Solutions for Business Value &#187; amélioration progressive</title>
	<atom:link href="http://blog.tangane.com/tag/amelioration-progressive/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.tangane.com</link>
	<description>Blog de la société Tangane</description>
	<pubDate>Mon, 06 Jul 2009 09:48:34 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery et l&#8217;Amélioration Progressive</title>
		<link>http://blog.tangane.com/open-source/jquery-et-lamelioration-progressive-233/</link>
		<comments>http://blog.tangane.com/open-source/jquery-et-lamelioration-progressive-233/#comments</comments>
		<pubDate>Mon, 06 Jul 2009 09:48:34 +0000</pubDate>
		<dc:creator>Victor Nicollet</dc:creator>
		
		<category><![CDATA[Open source]]></category>

		<category><![CDATA[accessibilité]]></category>

		<category><![CDATA[amélioration progressive]]></category>

		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://blog.tangane.com/?p=233</guid>
		<description><![CDATA[Allumez votre télé mais ne la regardez pas : contentez-vous de l&#8217;écouter sans en voir les images. Arrivez-vous à saisir le contenu d&#8217;un film ? D&#8217;un jeu télévisé ? Du journal de vingt heures ? De la météo ? C&#8217;est un secret que personne ne tient à garder mais que peu de gens connaissent : [...]]]></description>
			<content:encoded><![CDATA[<p>Allumez votre télé mais ne la regardez pas : contentez-vous de l&#8217;écouter sans en voir les images. Arrivez-vous à saisir le contenu d&#8217;un film ? D&#8217;un jeu télévisé ? Du journal de vingt heures ? De la météo ? C&#8217;est un secret que personne ne tient à garder mais que peu de gens connaissent : l&#8217;image n&#8217;est pas indispensable à un bon journal télévisé, la voix suffit à transmettre l&#8217;essentiel de l&#8217;information.</p>
<p>Et ce n&#8217;est pas facile. D&#8217;ailleurs, il suffit d&#8217;écouter un film sans le regarder pour se rendre compte à quel point l&#8217;expérience peut devenir dépendante de l&#8217;image si on ne fait pas attention à répéter, de vive voix, les points importants que cette image montre.</p>
<p>Même à la télévision, moyen de communication inaliénablement visuel, c&#8217;est le son qui transmet l&#8217;information et relègue l&#8217;image à un statut accessoire : illustrer les paroles, mettre en confiance le spectateur, présenter l&#8217;information avec plus de clarté et d&#8217;élégance. Tout cela pour que les gens qui ne font qu&#8217;écouter leur téléviseur (parce qu&#8217;ils sont occupés à autre chose, ou tout simplement parce qu&#8217;ils ne peuvent pas voir) puissent profiter du journal télévisé.</p>
<p>Il existe sur internet deux types de visiteurs. D&#8217;une part, il y a la majorité, ceux qui visitent les sites avec un équipement raisonnablement moderne, capable de gérer Java, Flash, Javascript, les cookies et le CSS. Et puis, il y a les autres, qui n&#8217;acceptent pas les cookies, n&#8217;exécutent pas le Javascript, ignorent la mise en page des CSS et ne voient même pas Flash et Java. Un tout petit pourcentage que bon nombre de sites ignorent à l&#8217;heure actuelle, et pas toujours des moindres (essayez donc Facebook sans Javascript et YouTube sans Flash).</p>
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td style="text-align:center"><img class="size-full wp-image-234" title="facebook" src="http://blog.tangane.com/wp-content/uploads/2009/07/facebook.png" alt="Logo Facebook" width="266" height="100" /></td>
<td style="text-align:center"><img class="size-full wp-image-235" title="youtube_logo" src="http://blog.tangane.com/wp-content/uploads/2009/07/youtube_logo.png" alt="Logo Youtube" width="197" height="100" /></td>
</tr>
</tbody>
</table>
<p>Pourtant, il y a des situations où l&#8217;on ne peut pas ignorer ce pourcentage, aussi faible soit-il, pour deux raisons élémentaires:</p>
<ul>
<li>Tous les moteurs de recherche sont dans cette catégorie. Lorsque Google visite un site, il ne voit pas tout le texte que l&#8217;auteur a mis dans un Flash ou les pages que son Javascript remplit dynamiquement après leur chargement. Ignorez cette catégorie, et votre <strong>référencement </strong>en prendra un sacré coup.</li>
<li>Les lecteurs braille ou la synthèse vocale interagissent très mal avec le contenu enrichi. Si l&#8217;auteur du site a une politique d&#8217;<strong>accessibilité</strong> (que ce soit par stratégie, ou par contrainte administrative) il n&#8217;aura d&#8217;autre choix de que de pourvoir aux besoins de ces visiteurs.</li>
</ul>
<p>Une solution peu coûteuse à ce problème est l&#8217;<strong>amélioration progressive</strong>. Elle consiste à partir d&#8217;une page telle qu&#8217;elle sera vue par la minorité sans Java, Flash, Javascript ou même CSS. Cette étape permet de détecter en amont des problèmes d&#8217;accessibilité : un synthétiseur vocal devra lire le texte dans l&#8217;ordre, donc si le contenu intéressant est loin en-dessous du début de la page cela pourra poser des problèmes. Elle met également en valeur les problèmes de référencement : les éléments importants ont-il bien été mis en valeur par des balises appropriées (strong, em, h1, h2, &#8230;) au lieu d&#8217;être juste mis en avant visuellement par le CSS ? Enfin, il est possible de tester les fonctionnalités de la page directement : les liens sont-ils valides, les pages importantes sont-elles accessibles ?</p>
<p>Une fois la page conçue pour une compatibilité maximale, on commence à l&#8217;améliorer. Cela repose sur le remplacement conditionnel : si un explorateur gère une extension (le CSS, le Javascript) alors il remplace une fonctionnalité existante par une fonctionnalité améliorée. Cela ne change donc pas les fonctionnalités disponibles si les extensions ne sont pas présentes.</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-239" style="background-color: black; padding : 5px;" title="logo_jquery_215x53" src="http://blog.tangane.com/wp-content/uploads/2009/07/logo_jquery_215x53.gif" alt="logo_jquery_215x53" width="215" height="53" /></p>
<p><strong>jQuery </strong>est une bibliothèque de fonctions Javascript qui permet de faciliter ce travail. Au lieu d&#8217;introduire le comportement dynamique directement dans la page à l&#8217;aide des attributs <em>onclick</em>, <em>onmouseover</em>, <em>onload </em>et autres, un script qui utilise jQuery les introduit depuis l&#8217;extérieur de la page, souvent depuis un fichier qui ne sera même pas téléchargé par les explorateurs qui n&#8217;exécutent pas les scripts.</p>
<p>Un script à base de <strong>jQuery </strong>fonctionne un peu comme un fichier CSS : on sélectionne des éléments de la page à l&#8217;aide d&#8217;une syntaxe proche, puis on leur applique des propriétés pour modifier le comportement de façon plus ou moins complexe. Les <a href="http://docs.jquery.com/Main_Page">possibilités sont vastes</a> pour rendre une page plus dynamique, plus belle, plus réactive ou tout simplement mieux présentée, sans pour autant sacrifier d&#8217;accessibilité ou de référencement.</p>
<p>Qui plus est, <strong>jQuery </strong>fonctionne sur une architecture de <a href="http://www.jqueryplugins.com/" target="_blank">plugins</a>: il y en a des centaines pour faire à peu près tout ce qu&#8217;on peut imaginer, proposés par des développeurs partout dans le monde de façon totalement gratuite, et suivant le même principe d&#8217;amélioration progressive que le coeur de jQuery. Et tout ceci pour une taille réduite, puisque la bibliothèque principale ne pèse que 19 kilo-octets et peut être mise en cache sur l&#8217;ordinateur du visiteur.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.tangane.com/open-source/jquery-et-lamelioration-progressive-233/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
