<?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>Webaaz &#187; HTML</title> <atom:link href="http://www.webaaz.com/category/html/feed/" rel="self" type="application/rss+xml" /><link>http://www.webaaz.com</link> <description>Le développement web de A à Z</description> <lastBuildDate>Thu, 19 Jan 2012 11:40:08 +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>Livre : HTML5 pour les webdesigners</title><link>http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/</link> <comments>http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/#comments</comments> <pubDate>Thu, 25 Nov 2010 09:30:37 +0000</pubDate> <dc:creator>Martin</dc:creator> <category><![CDATA[HTML]]></category> <category><![CDATA[Livres]]></category> <category><![CDATA[Web]]></category> <category><![CDATA[Eyrolles]]></category> <category><![CDATA[HTML5]]></category> <category><![CDATA[Livre]]></category> <category><![CDATA[Paris Web]]></category> <category><![CDATA[XHTML]]></category> <guid
isPermaLink="false">http://www.webaaz.com/?p=1044</guid> <description><![CDATA["HTML5 pour les webdesigners" Encore un livre édité par Eyrolles, on va croire que je suis payé pour écrire les critiques de leurs livres, il faut dire qu'une fois de plus, le sujet est bien traité. <strong>J'avais déjà repéré ce livre alors quand je l'ai vu en vente à Paris-Web, je n'ai pas résisté</strong>. Il m'aura suffit d'un retour en train pour l'avaler à la manière d'un roman, il ne me reste plus qu'à vous faire partager mon enthousiasme et à vous donner envie de le lire... Souvent je connais l'auteur des livres que j'achète, je lis déjà leur blog ou j'en ai entendu parler, je me limite à ces auteurs référence, ce qui fait déjà pas mal de lectures... Là j'avoue ne pas connaître Jeremy Keith, mais bon la préface étant de Jeffrey Zeldman, j'avais confiance.
Avec 85 pages, <strong>c'est l'un des plus petits livres de ma bibliothèque, certainement celui que j'ai lu le plus rapidement, mais aussi l'un de ceux qui m'a le plus enthousiasmé, par son contenu bien sûr, mais surtout par sa forme.</strong> Il traite de l'essentiel, mais c'est un livre romancé, pas l'un de ces bouquins techniques dont on ne peut pas lire plus de 10 pages à la suite, mais plutôt une histoire que l'on nous raconte. <strong>Je vais vous la résumer en reprenant le chapitrage original.</strong> <img
src="/images/2010/11/5.jpg" alt="White 5 on Orange Dumpster" width="570" height="250" /> <a
title="Photo de Yaniv Golan depuis son blog" href="http://www.flickr.com/photos/17796222@N00/64298062">Photo de Yaniv Golan depuis Flickr</a>]]></description> <content:encoded><![CDATA[<p>&laquo;&nbsp;HTML5 pour les webdesigners&nbsp;&raquo; Encore un livre édité par Eyrolles, on va croire que je suis payé pour écrire les critiques de leurs livres, il faut dire qu&#8217;une fois de plus, le sujet est bien traité. <strong>J&#8217;avais déjà repéré ce livre alors quand je l&#8217;ai vu en vente à Paris-Web, je n&#8217;ai pas résisté</strong>. Il m&#8217;aura suffit d&#8217;un retour en train pour l&#8217;avaler à la manière d&#8217;un roman, il ne me reste plus qu&#8217;à vous faire partager mon enthousiasme et à vous donner envie de le lire&#8230; Souvent je connais l&#8217;auteur des livres que j&#8217;achète, je lis déjà leur blog ou j&#8217;en ai entendu parler, je me limite à ces auteurs référence, ce qui fait déjà pas mal de lectures&#8230; Là j&#8217;avoue ne pas connaître Jeremy Keith, mais bon la préface étant de Jeffrey Zeldman, j&#8217;avais confiance.</p><p>Avec 85 pages, <strong>c&#8217;est l&#8217;un des plus petits livres de ma bibliothèque, certainement celui que j&#8217;ai lu le plus rapidement, mais aussi l&#8217;un de ceux qui m&#8217;a le plus enthousiasmé, par son contenu bien sûr, mais surtout par sa forme.</strong> Il traite de l&#8217;essentiel, mais c&#8217;est un livre romancé, pas l&#8217;un de ces bouquins techniques dont on ne peut pas lire plus de 10 pages à la suite, mais plutôt une histoire que l&#8217;on nous raconte. <strong>Je vais vous la résumer en reprenant le chapitrage original.</strong></p><p><img
src="/images/2010/11/5.jpg" alt="White 5 on Orange Dumpster" width="570" height="250" /><br
/> <a
title="Photo de Yaniv Golan depuis son Flickr" href="http://www.flickr.com/photos/17796222@N00/64298062">Photo de Yaniv Golan depuis Flickr</a></p><h2>La petite histoire du balisage</h2><p><strong>On commence donc par un résumé des épisodes précédents.</strong>L&#8217;histoire d&#8217;HTML, puis d&#8217;XHTML, l&#8217;ambiance de travail du W3C, la scission au sein du groupe de travail, puis la réunification. Quelques pages suffisent pour se remémorer ce que l&#8217;on à suivi de loin, on est pr êt pour la suite.</p><h2>Les principes de l&#8217;html5</h2><p><strong>Alors finalement, ils ont décidé quoi ? C&#8217;est le sujet de ce second chapitre</strong> ou l&#8217;on apprends qu&#8217;HTML5 est compatible avec l&#8217;existant et que donc finalement, il suffit de changer de doctype, pour faire de l&#8217;HTML5 ! En plus le nouveau est super simple, on va pouvoir l&#8217;apprendre par coeur ! On y apprends aussi que HTML5 restera compatible et que certaines balises sont donc déconseillées, mais font tout de m ême partie de la norme, ainsi les navigateurs peuvent les interpréter comme il faut. Les vieux contenus sont donc toujours lisibles.</p><h2>Les médias riches</h2><p><strong>Un chapitre consacré à canvas, audio et video, ponctué d&#8217;exemples, on rentre dans le vif du sujet</strong> pour voir un peu l&#8217;étendue des possibilités multimédia. Et ca donne envie ! Je n&#8217;utilise que rarement ces médias, certainement pour leur manque de compatibilité, et leur implémentation bancale, mais avec HTML5 ca va changer, j&#8217;en suis convaincu !</p><h2>Web Forms 2.0</h2><p>Certainement l&#8217;un des sujets les plus attendus. C&#8217;est la base de tout contenu web &laquo;&nbsp;dynamique&nbsp;&raquo;, un dépoussiérage pour s&#8217;adapter un peu plus aux usages et aux besoins était nécessaire. Alors au menu des nouveauté, on aborde en vrac, les placeholders, les datalists, les nouveaux types de champs (recherche, sliders, boutons flechés, date, heure, couleur&#8230;). Le tout ponctué d&#8217;exemple simples. On n&#8217;utilisera bientà´t plus les formulaires de la m ême manière, et m ême l&#8217;usage de javascript va évoluer, puisque les formulaires font désormais nativement beaucoup de choses que l&#8217;on était obligé d&#8217;ajouter soi-même auparavant.</p><h2>La sémantique</h2><p><strong>Après une introduction sur l&#8217;extensibilité du langage et les microformats, l&#8217;auteur nous invite à une visite guidée de nouvelles balises pour améliorer la sémantique</strong> : mark, time, meter, progress, section, header, footer, aside, nav, article&#8230; Vous avez certainement déjà du en entendre parler, et les noms sont assez clairs, vous devez donc déjà y entrevoir des possibilité pour améliorer le balisage, le rendu, le référencement&#8230; Est-ce que quelqu&#8217;un sait si les moteurs de recherche sont déjà sensibles à ces nouvelles balises ?</p><h2>Utiliser HTML5 aujourd&#8217;hui</h2><p><strong>Alors voilà, on est emballé par ce que l&#8217;on vient de lire, mais bon l&#8217;essentiel maintenant c&#8217;est de s&#8217;y mettre ! Quand est-ce que l&#8217;on pourra utiliser tout ca ?</strong> Quand est-ce que les navigateurs implémenteront la norme ? 2015 ? 2022 ? En fait cela va se faire progressivement, on peut commencer par change ses doctypes, puis utiliser quelques champs de formulaires, une partie se dégrade en type text et peut donc être utilisée sans aucun problème. Les balises de zonage ou de navigation sont aussi utilisables avec quelques astuces&#8230; <strong>On finit avec les liens indispensables pour aller plus loin</strong>, entre des sites de référence, un validateur HTML5, un livre, la spécification, la liste de diffusion ou le canal IRC du whatwg vous avez largement de quoi vous documenter et creuser ce passionnant sujet !</p><h2>J&#8217;en veux un !</h2><div
class="book"> <a
title="Acheter le livre sur Amazon" href="http://www.amazon.fr/gp/product/2212128614?ie=UTF8&#038;tag=webaaz-livres-21&#038;linkCode=as2&#038;camp=1642&#038;creative=6746&#038;creativeASIN=2212128614"><img
border="0" src="/images/amazon/41vlaBPPJFL._SL160_.jpg" class="amazon alignleft" ></a></p><ul><li><a
title="Acheter le livre sur Amazon" href="http://www.amazon.fr/gp/product/2212128614?ie=UTF8&#038;tag=webaaz-livres-21&#038;linkCode=as2&#038;camp=1642&#038;creative=6746&#038;creativeASIN=2212128614">HTML5 pour les webdesigners </a></li><li>Broché : 85 pages</li><li>Éditeur : <a
title="Voir le site de l'éditeur Eyrolles" href="http://www.eyrolles.com/">Eyrolles</a></li><li>Édition : 1ère (30 septembre 2010)</li><li>Collection : A book appart</li><li>Langue : Français</li><li>ISBN-13: 978-2212128611</li></ul><p><img
src="http://www.assoc-amazon.fr/e/ir?t=webaaz-livres-21&#038;l=as2&#038;o=8&#038;a=2212128614"  width="1" height="1" border="0" alt="" class="transparent" /></div><p>N&#8217;oubliez pas que <strong>les normes W3C, il faut les utiliser pour les valider</strong>. Certes des groupes de travail proposent des normalisation d&#8217;implémentation pour standardiser le web, et les navigateurs les mettent en place, mais c&#8217;est l&#8217;usage qui en est fait qui fait avancer les choses, quand HTML5 sera finalisé, cela fera déjà longtemps qu&#8217;on l&#8217;utilisera et qu&#8217;on attendra HTML6 !</p><p>Le numéro 1 sur la couverture et la préface m&#8217;incitent à penser que c&#8217;est le premier d&#8217;une nouvelle et très belle collection (A book Apart) dont j&#8217;attends la suite avec impatience ! Note pour les anglophones, La traduction est bonne, mais il paraît que cet ouvrage est encore meilleur en version originale.<br
/><h2>Sur le même thème</h2><ul
class="similar-posts"><li><a
href="http://www.webaaz.com/2011/02/livre-css3-pour-les-webdesigners/" rel="bookmark" title="3 février 2011">Livre : CSS3 pour les webdesigners</a></li><li><a
href="http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/" rel="bookmark" title="16 avril 2009">Bien écrire HTML &amp; XHTML</a></li><li><a
href="http://www.webaaz.com/2009/09/bien-utiliser-javascript/" rel="bookmark" title="23 septembre 2009">Bien utiliser Javascript</a></li><li><a
href="http://www.webaaz.com/2010/04/livre-reussir-son-blog-professionnel/" rel="bookmark" title="14 avril 2010">Livre : Réussir son blog professionnel<br
/>3 exemplaires à gagner !</a></li><li><a
href="http://www.webaaz.com/2011/04/livre-pro-git/" rel="bookmark" title="11 avril 2011">Livre : Pro Git</a></li></ul><p></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy"><ul
class="socials"><li
class="shr-twitter"> <a
href="http://www.shareaholic.com/api/share/?title=Livre+%3A+HTML5+pour+les+webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-identica"> <a
href="http://www.shareaholic.com/api/share/?title=TITLE&amp;link=PERMALINK&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=205&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post this to Identica">Post this to Identica</a></li><li
class="shr-mail"> <a
href="http://www.shareaholic.com/api/share/?title=Livre%20%3A%20HTML5%20pour%20les%20webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=201&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a></li><li
class="shr-gmail"> <a
href="http://www.shareaholic.com/api/share/?title=Livre+%3A+HTML5+pour+les+webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a></li><li
class="shr-viadeo"> <a
href="http://www.shareaholic.com/api/share/?title=Livre+%3A+HTML5+pour+les+webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=92&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Viadeo">Share this on Viadeo</a></li><li
class="shr-googlereader"> <a
href="http://www.shareaholic.com/api/share/?title=Livre+%3A+HTML5+pour+les+webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=207&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a></li><li
class="shr-netvibes"> <a
href="http://www.shareaholic.com/api/share/?title=Livre+%3A+HTML5+pour+les+webdesigners&amp;link=http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/&amp;notes=%22HTML5%20pour%20les%20webdesigners%22%20Encore%20un%20livre%20%C3%A9dit%C3%A9%20par%20Eyrolles%2C%20on%20va%20croire%20que%20je%20suis%20pay%C3%A9%20pour%20%C3%A9crire%20les%20critiques%20de%20leurs%20livres%2C%20il%20faut%20dire%20qu%27une%20fois%20de%20plus%2C%20le%20sujet%20est%20bien%20trait%C3%A9.%20J%27avais%20d%C3%A9j%C3%A0%20rep%C3%A9r%C3%A9%20ce%20livre%20alors%20quand%20je%20l%27ai%20vu%20en%20vente%20%C3%A0%20Paris-Web%2C%20je%20n%27ai%20pas%20r%C3%A9sist%C3%A9.%20Il%20m%27aura%20suffit%20d%27un%20retour%20en%20train%20pour%20l%27avaler%20%C3%A0%20la%20mani%C3%A8re%20d%27un%20roman%2C%20il%20ne%20me%20reste%20plus%20qu%27%C3%A0%20vous%20faire%20partager%20mon%20enthousiasme%20et%20%C3%A0%20vous%20donner%20envie%20de%20le%20lire...%20Souvent%20je%20connais%20l%27auteur%20des%20livres%20que%20j%27ach%C3%A8te%2C%20je%20lis%20d%C3%A9j%C3%A0%20leur%20blog%20ou%20j%27en%20ai%20entendu%20parler%2C%20je%20me%20limite%20%C3%A0%20ces%20auteurs%20r%C3%A9f%C3%A9rence%2C%20ce%20qui%20fait%20d%C3%A9j%C3%A0%20pas%20mal%20de%20lectures...%20L%C3%A0%20j%27avoue%20ne%20pas%20conna%C3%AEtre%20Jeremy%20Keith%2C%20mais%20bon%20la%20pr%C3%A9face%20%C3%A9tant%20de%20Jeffrey%20Zeldman%2C%20j%27avais%20confiance.%20%0D%0A%0D%0AAvec%2085%20pages%2C%20c%27est%20l%27un%20des%20plus%20petits%20livres%20de%20ma%20biblioth%C3%A8que%2C%20certainement%20celui%20que%20j%27ai%20lu%20le%20plus%20rapidement%2C%20mais%20aussi%20l%27un%20de%20ceux%20qui%20m%27a%20le%20plus%20enthousiasm%C3%A9%2C%20par%20son%20contenu%20bien%20s%C3%BBr%2C%20mais%20surtout%20par%20sa%20forme.%20Il%20traite%20de%20l%27essentiel%2C%20mais%20c%27est%20un%20livre%20romanc%C3%A9%2C%20pas%20l%27un%20de%20ces%20bouquins%20techniques%20dont%20on%20ne%20peut%20pas%20lire%20plus%20de%2010%20pages%20%C3%A0%20la%20suite%2C%20mais%20plut%C3%B4t%20une%20histoire%20que%20l%27on%20nous%20raconte.%20Je%20vais%20vous%20la%20r%C3%A9sumer%20en%20reprenant%20le%20chapitrage%20original.%20%0D%0A%0D%0A%0D%0APhoto%20de%20Yaniv%20Golan%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=195&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a></li></ul><div
style="clear: both;"></div></div> ]]></content:encoded> <wfw:commentRss>http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Outils : Edition de fichiers avec Notepad++</title><link>http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/</link> <comments>http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/#comments</comments> <pubDate>Tue, 24 Nov 2009 06:25:38 +0000</pubDate> <dc:creator>Martin</dc:creator> <category><![CDATA[Développement]]></category> <category><![CDATA[HTML]]></category> <category><![CDATA[Logiciels]]></category> <category><![CDATA[Outils]]></category> <category><![CDATA[PHP]]></category> <category><![CDATA[Web]]></category> <category><![CDATA[XML]]></category> <category><![CDATA[Code source]]></category> <category><![CDATA[CSS]]></category> <category><![CDATA[Développement web]]></category> <category><![CDATA[Libre]]></category> <category><![CDATA[Logiciel]]></category> <category><![CDATA[Open source]]></category> <category><![CDATA[Tools]]></category> <category><![CDATA[Wysiwyg]]></category> <category><![CDATA[XHTML]]></category> <guid
isPermaLink="false">http://www.webaaz.com/?p=336</guid> <description><![CDATA[Comme tout développeur vous avez besoin d'éditer souvent et rapidement des fichiers de code. Vous avez un IDE, Eclipse par exemple, mais pour certains types de fichiers, ou pour plus de rapidité, l'utilisation d'un second éditeur plus léger et rapide s'impose.
Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l'éditeur par défaut est vraiment trop simpliste.
C'est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l'on veut rapidement retrouver ses repères.
<img
src="/images/2009/11/bloc-notes.jpg" alt="Bloc-notes" /> <a
title="Photo de PSD depuis Flickr" href="http://www.flickr.com/photos/psd/2423294079/">Photo de PSD depuis Flickr</a>]]></description> <content:encoded><![CDATA[<p>Comme tout développeur vous avez besoin d&#8217;éditer souvent et rapidement des fichiers de code. Vous avez un IDE, Eclipse par exemple, mais pour certains types de fichiers, ou pour plus de rapidité, l&#8217;utilisation d&#8217;un second éditeur plus léger et rapide s&#8217;impose.</p><p>Je vous propose de découvrir Notepad++. Il ne fonctionne que sous Windows, mais apporte un véritable plus pour cette plateforme dont l&#8217;éditeur par défaut est vraiment trop simpliste.</p><p>C&#8217;est un logiciel gratuit sous licence GPL. Je le trouve idéal car très fonctionnel, simple à installer, rapide à lancer et extensible. Il est donc idéal quand on change souvent de poste et que l&#8217;on veut rapidement retrouver ses repères.</p><p><img
src="/images/2009/11/bloc-notes.jpg" alt="Bloc-notes" /><br
/> <a
title="Photo de PSD depuis Flickr" href="http://www.flickr.com/photos/psd/2423294079/">Photo de PSD depuis Flickr</a></p><h2>Fonctionnalités</h2><p>Notepad++ est un outil très complet, ces principales fonctionnalités sont :</p><ul><li>Coloration syntaxique (PHP, Java, SQL, CSS, HTML, Javascript, YAML&#8230;)</li><li>Éditeur WYSIWYG</li><li>Auto-complétion</li><li>Affichage de fichier et édition multiple simultanée</li><li>Fonction de recherche avec expressions régulières</li><li>Auto détection de modifications de fichiers</li><li>Gestion de macros</li><li>Zoom</li><li>Multilingue</li></ul><p>Vous trouverez toute la liste des fonctionnalités de Notepad++ sur le <a
title="Voir le site de l'éditeur de Notepad++" href="http://notepad-plus.sourceforge.net/fr/site.htm">site de l&#8217;éditeur</a>.</p><h2>Plugins</h2><p>Cette liste n&#8217;est pas exhaustive car en plus Notepad++ est extensible avec une très belle liste de plugins dont voici les plus intéressants à mon goût :</p><ul><li>Éditeur hexadécimal</li><li>Édition de fichier via un explorateur <acronym
title="File Transfert protocol">FTP</acronym></li><li>Gestionnaire de tags HTML</li><li>Correcteur orthographique</li><li>Réducteur dans la barre de tâches</li><li>Édition XML (multiples outils)</li><li>Gestionnaire de plugins</li></ul><h2>Astuces</h2><p>Cet outil s&#8217;intègre parfaitement à Windows, vous pourrez ainsi le mettre dans le menu contextuel de Windows et y accéder via le clic droit de votre souris ou tout simplement l&#8217;utiliser par défaut à la place du bloc-notes de Windows.</p><p>Ces astuces sont à voir sur la page de téléchargement de l&#8217;application.</p><h2>Site de l&#8217;éditeur &#038; téléchargement</h2><p>Vous pouvez télécharger Notepad++ sur le site de l&#8217;éditeur :</p><ul><li><a
title="Voir le site de l'éditeur de Notepad++" href=http://notepad-plus.sourceforge.net/fr/site.htm">Site officiel de Notepad++</a></li></ul><h2>Aide, forum et wiki</h2><p>Si vous avez besoin d&#8217;aide pour débuter avec Notepad++, des forums multilingues et un wiki en anglais répondront probablement à toutes vos questions.</p><ul><li><a
title="Voir les forums de Notepad++" href="http://sourceforge.net/projects/notepad-plus/forums">Forums</a></li><li><a
title="Voir le wiki de Notepad++" href="http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Main_Page" hreflang="en">Wiki</a></li></ul><h2>Mon avis</h2><p>Personnellement, je l&#8217;utilise depuis des années sans aucun soucis. Son ergonomie est très bonne, et ses plugins très nombreux permettent de répondre à toutes les attentes. Il est simple mais fonctionnel, vous le trouverez bientôt indispensable.</p><p>Et n&#8217;oublier pas, Notepad++ est un outil gratuit, pensez à aider le projet en traduisant ou en apportant une <a
title="Aider le projet Notepad++" href="http://sourceforge.net/donate/index.php?group_id=95717">contribution financière</a>.<br
/><h2>Sur le même thème</h2><ul
class="similar-posts"><li><a
href="http://www.webaaz.com/2009/10/outils-xml-cooktop/" rel="bookmark" title="15 octobre 2009">Outils XML : Cooktop</a></li><li><a
href="http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/" rel="bookmark" title="18 février 2010">Les plugins Firefox : XRefresh</a></li><li><a
href="http://www.webaaz.com/2009/09/comparaison-et-fusion-de-fichiers-et-de-dossiers/" rel="bookmark" title="28 septembre 2009">Comparaison et fusion de fichiers et de dossiers</a></li><li><a
href="http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/" rel="bookmark" title="22 décembre 2009">Les plugins Firefox : Colorzilla</a></li><li><a
href="http://www.webaaz.com/2009/04/mysql-gui-tools/" rel="bookmark" title="24 avril 2009">MySQL GUI Tools</a></li></ul><p></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy"><ul
class="socials"><li
class="shr-twitter"> <a
href="http://www.shareaholic.com/api/share/?title=Outils+%3A+Edition+de+fichiers+avec+Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-identica"> <a
href="http://www.shareaholic.com/api/share/?title=TITLE&amp;link=PERMALINK&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=205&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post this to Identica">Post this to Identica</a></li><li
class="shr-mail"> <a
href="http://www.shareaholic.com/api/share/?title=Outils%20%3A%20Edition%20de%20fichiers%20avec%20Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=201&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a></li><li
class="shr-gmail"> <a
href="http://www.shareaholic.com/api/share/?title=Outils+%3A+Edition+de+fichiers+avec+Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a></li><li
class="shr-viadeo"> <a
href="http://www.shareaholic.com/api/share/?title=Outils+%3A+Edition+de+fichiers+avec+Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=92&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Viadeo">Share this on Viadeo</a></li><li
class="shr-googlereader"> <a
href="http://www.shareaholic.com/api/share/?title=Outils+%3A+Edition+de+fichiers+avec+Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=207&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a></li><li
class="shr-netvibes"> <a
href="http://www.shareaholic.com/api/share/?title=Outils+%3A+Edition+de+fichiers+avec+Notepad%2B%2B&amp;link=http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/&amp;notes=Comme%20tout%20d%C3%A9veloppeur%20vous%20avez%20besoin%20d%27%C3%A9diter%20souvent%20et%20rapidement%20des%20fichiers%20de%20code.%20Vous%20avez%20un%20IDE%2C%20Eclipse%20par%20exemple%2C%20mais%20pour%20certains%20types%20de%20fichiers%2C%20ou%20pour%20plus%20de%20rapidit%C3%A9%2C%20l%27utilisation%20d%27un%20second%20%C3%A9diteur%20plus%20l%C3%A9ger%20et%20rapide%20s%27impose.%0D%0A%0D%0AJe%20vous%20propose%20de%20d%C3%A9couvrir%20Notepad%2B%2B.%20Il%20ne%20fonctionne%20que%20sous%20Windows%2C%20mais%20apporte%20un%20v%C3%A9ritable%20plus%20pour%20cette%20plateforme%20dont%20l%27%C3%A9diteur%20par%20d%C3%A9faut%20est%20vraiment%20trop%20simpliste.%0D%0A%0D%0AC%27est%20un%20logiciel%20gratuit%20sous%20licence%20GPL.%20Je%20le%20trouve%20id%C3%A9al%20car%20tr%C3%A8s%20fonctionnel%2C%20simple%20%C3%A0%20installer%2C%20rapide%20%C3%A0%20lancer%20et%20extensible.%20Il%20est%20donc%20id%C3%A9al%20quand%20on%20change%20souvent%20de%20poste%20et%20que%20l%27on%20veut%20rapidement%20retrouver%20ses%20rep%C3%A8res.%0D%0A%0D%0A%0D%0APhoto%20de%20PSD%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=195&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a></li></ul><div
style="clear: both;"></div></div> ]]></content:encoded> <wfw:commentRss>http://www.webaaz.com/2009/11/outils-edition-de-fichiers-avec-notepad/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Optimiser son site web</title><link>http://www.webaaz.com/2009/10/optimiser-son-site-web/</link> <comments>http://www.webaaz.com/2009/10/optimiser-son-site-web/#comments</comments> <pubDate>Thu, 01 Oct 2009 16:00:03 +0000</pubDate> <dc:creator>Martin</dc:creator> <category><![CDATA[CSS]]></category> <category><![CDATA[Développement]]></category> <category><![CDATA[HTML]]></category> <category><![CDATA[Javascript]]></category> <category><![CDATA[Non classé]]></category> <category><![CDATA[Outils]]></category> <category><![CDATA[Plugins]]></category> <category><![CDATA[Web]]></category> <category><![CDATA[Apprendre]]></category> <category><![CDATA[Bonnes pratiques]]></category> <category><![CDATA[Code source]]></category> <category><![CDATA[Développement web]]></category> <category><![CDATA[Feuille de style]]></category> <category><![CDATA[Optimisation]]></category> <category><![CDATA[Performance]]></category> <category><![CDATA[Références]]></category> <category><![CDATA[Standard]]></category> <guid
isPermaLink="false">http://www.webaaz.com/?p=267</guid> <description><![CDATA[La vitesse d'affichage d'un site web est très importante pour capter les visiteurs. Les internautes sont dans l'instantanéité et ne veulent pas attendre pour voir votre page. Avec quelques astuces simple à mettre en place, vous pouvez retenir vos visiteurs et améliorer leur expérience d'utilisateur, ce qui les incitera à revenir.
Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu'au bout, l'effet sera bénéfique en termes d'audience, et votre taux de transformation devrait augmenter lui aussi.
Voici donc quelques conseils, et quelques références afin de maîtriser le sujet
<img
src="/images/vitesse-lumiere.jpg" alt="La vitesse de la lumière" width="570" height="250" /> <a
title="Photo de GemMoth depuis Flickr" href="http://www.flickr.com/photos/24658593@N07/3426209850">Photo de GemMoth depuis Flickr</a>]]></description> <content:encoded><![CDATA[<p>La vitesse d&#8217;affichage d&#8217;un site web est très importante pour capter les visiteurs. Les internautes sont dans l&#8217;instantanéité et ne veulent pas attendre pour voir votre page. Avec quelques astuces simple à mettre en place, vous pouvez retenir vos visiteurs et améliorer leur expérience d&#8217;utilisateur, ce qui les incitera à revenir.</p><p>Il faut bien avoir en tête que ce sont les petits gains par ci par là qui feront la différence. Cela vous demandera finalement assez peu de travail pour les premiers résultats et beaucoup plus pour arriver à un résultat parfait. Mais même sans pousser la démarche jusqu&#8217;au bout, l&#8217;effet sera bénéfique en termes d&#8217;audience, et votre taux de transformation devrait augmenter lui aussi.</p><p>Voici donc quelques conseils, et quelques références afin de maîtriser le sujet</p><p><img
src="/images/vitesse-lumiere.jpg" alt="La vitesse de la lumière" width="570" height="250" /><br
/> <a
title="Photo de GemMoth depuis Flickr" href="http://www.flickr.com/photos/24658593@N07/3426209850">Photo de GemMoth depuis Flickr</a></p><h2>L&#8217;optimisation c&#8217;est quoi ?</h2><p>On peut voir dans un premier temps l&#8217;optimisation comme la mise en œuvre des moyens disponibles pour améliorer l&#8217;existant. Un second temps permet d&#8217;accentuer encore les performances en ajoutant de nouveaux moyens. Nous traiterons uniquement du premier point ici. Changer d&#8217;hébergeur ou de serveur pour augmenter vos performances est un solution, mais avant cela tout un panel de techniques permet de faire mieux avec les mêmes ressources.</p><h2>Quelques statistiques</h2><p>La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50)Une page web c’est en moyenne 500 mots et 600 balises HTML ! Si l&#8217;on ajoute a cela que le nombre de connexion <a
title="Voir la définition de RTC sur Wikipédia" href="http://fr.wikipedia.org/wiki/R%C3%A9seau_t%C3%A9l%C3%A9phonique_commut%C3%A9"><acronym
title="Réseau Téléphonique Commuté">RTC</acronym></a> est encore non négligeable aux États-Unis par exemple.</p><p>Perdre 500ms c’est perdre 20% de trafic pour Google et réduire de 25% le poids de la page c’est gagner 25% d’utilisateurs à moyen terme pour Google. Augmenter la latence de 100ms c’est perdre 1% de ventes pour Amazon. Pour Yahoo! perdre 400ms c’est avoir 5 à 9% d’abandon en plus.</p><p>A partir de 4 secondes d’attente on perd massivement les visiteurs&#8230;</p><h2>Que doit on améliorer ?</h2><p>Les améliorations à prévoir sont au niveau du paramétrage du serveur, de la qualité du code, de choix techniques, de la gestion des composants web&#8230;</p><p>Des outils sont là pour vous aider à identifier les points importants parmi lesquels on trouve des plugins Firefox :</p><ul><li><a
title="Voir Yslow" href="https://addons.mozilla.org/fr/firefox/addon/5369">Yslow</a></li><li><a
title="Voir GooglePageSpeed" href="http://code.google.com/intl/fr/speed/page-speed/download.html" hreflang="en">Google Page Speed</a></li></ul><p>Et des sites de mesure de performance :</p><ul><li><a
title="Voir site-perf" href="http://site-perf.com/" hreflang="en">site-perf</a></li><li><a
title="Voir IBM Page Detailer" href="http://www.alphaworks.ibm.com/tech/pagedetailer" hreflang="en">IBM Page Detailer</a></li><li><a
title="Voir Web Pagetest" href="http://www.webpagetest.org/" hreflang="en">Web Pagetest</a></li></ul><p>Notez que ces derniers pourrons vous permettre de tester votre site depuis l&#8217;autre bout du monde et voir les impacts que cela a sur votre site.</p><p>Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Voyons cela plus en détail.</p><h2>Optimisation de la configuration du serveur</h2><h3>La mise en cache</h3><p>La mise en place d&#8217;un cache côté serveur est une bonne chose et permettra de fournir un contenu plus rapidement à l&#8217;internaute, mais le protocole HTTP permet lui aussi quelques prouesses. Il est efficace pour la moitié des utilisateurs qui affichent une première page de votre site. Soit parce qu&#8217;ils sont déjà venus auparavant ou parce que vous partagez des ressources avec d&#8217;autres sites via des <a
title="Voir la définition de CDN sur Wikipédia" href="http://fr.wikipedia.org/wiki/Content_Delivery_Network"><acronym
title="Content Delivery Network">CDN</acronym></a>.<br
/> Dès la deuxième page de votre site il est bénéfique pour 80% des utilisateurs, les 20% restants ayant par exemple désactivé leur cache.</p><p>Configurez donc votre serveur pour qu&#8217;il envoie des indications de mise en cache au navigateur.</p><h3>La compression des données</h3><p>On peut gagner entre 50 et 90% du poids d’une page pour une occupation serveur de 5%. Si votre serveur le permet en terme de ressources, le bénéfice sera immédiat, et encore plus pour les connexions lentes.</p><ul><li><a
title="Voir le test de compression de pages web" href="http://www.port80software.com/tools/compresscheck.asp" hreflang="en">Tests de compression de pages web</a></li><li><a
title="Voir le visualiseur de ressources réseau" href="http://tools.pingdom.com/" hreflang="en">Visualiseur de ressources réseau</a></li></ul><h3>ETags</h3><p>Désactivez les ETags si le site est en cluster. Leur performance est alors très aléatoire. Si vous n&#8217;avez pas de cluster, vous pouvez les laisser, même si YSlow vous fait la remarque.</p><h3>Impacts de la latence réseau</h3><p>Avec un temps de latence avec le serveur de 20ms, pour 25 requêtes externes on perd donc une demi seconde ! Et encore le temps de latence est plus souvent entre 30 et 60 ms. On peut cependant relativiser un peu car la parallélisation des téléchargements permet de limiter cet effet.</p><p>Il est donc important de limiter le nombre de composants à charger par page.</p><p>L&#8217;utilisation de connexions persistantes sur des serveurs statiques (CDN) paraît être un bon moyen de limiter les effets de la latence, mais son paramétrage peut être délicat et dépends de votre cas particulier. L&#8217;abus de cette techniques pourrait avoir l&#8217;effet inverse en engorgeant le serveur de connexions persistantes inutiles.</p><p>Pour la concaténation de vos fichiers, un module d&#8217;Apache permet de faire le travail côté serveur, je ne l&#8217;ai pas testé, mais j&#8217;attends vos retours sur le sujet dans les commentaires :</p><ul><li><a
title="Voir le module d'Apache mod_concat" href="http://code.google.com/p/modconcat/">Mod_concat</a></li></ul><h2>Optimisation du code source</h2><h3>HTML</h3><p>Un code standard limite le travail de l’interpréteur HTML, par rapport à un code illisible que le navigateur devra corriger à la volée.<br
/> Limiter la profondeur du DOM pour limiter le reflow, c&#8217;est à dire la réorganisation de la page par le navigateur en cas de changements au niveau de la structure de la page. Pour les tableaux vous pouvez utiliser le mode de rendu fixe des tableaux HTML pour limiter le <a
title="Voir la définition de reflow sur Mozilla" href="http://www.mozilla.org/newlayout/doc/reflow.html" class="broken_link">reflow</a>.</p><p>Vous devez limiter les iframes qui sont coûteuses en termes de performances, même vides.</p><h3>CSS</h3><p>Pour les frameworks CSS, utiliser un cache central (google, yahoo…) permet de partager un cache avec tous les autres utilisateurs du CDN. Ainsi il y a de fortes chances pour que vos librairies soient déjà en cache dans le navigateur de votre visiteur.</p><p>Mettre les scripts en début de page pour que le navigateur puisse faire la mise en page le plus tôt possible.<br
/> L&#8217;utilisation conjointe de scripts externes minimisés, permet de gagner jusqu&#8217;à 25% du poids des feuilles de style.</p><p>Ne pas utiliser @import pour les CSS, moins performant et ne pas utiliser les filtres CSS, non standard et très coûteux en ressources. Si vous avez des modifications CSS à faire, faites les d’un seul coup pour éviter le reflow et non pas dans une boucle !</p><h3>Javascript</h3><p>Pour les bibliothèques génériques (jQuery, Dojo&#8230;) l&#8217;utilisation d&#8217;un cache central (google, yahoo…) permet comme pour les CSS de partager un cache avec tous les autres utilisateurs du CDN.</p><p>Pour optimiser encore mettez les scripts en fin de page. Le navigateur pourra afficher la page correctement avant de les charger, et l&#8217;utilisateur pourra naviguer avant la fin du chargement. Le temps qu&#8217;il interagisse avec la page, le Javascript sera chargé.</p><p>Comme pour les CCS, des scripts externes minimisés, permettent de gagner jusqu&#8217;à un tiers du poids des fichiers.</p><ul><li><a
title="Voir l'optimiseur de CSS CSSOptimiser" href="http://www.cssoptimiser.com/" hreflang="en">CSSOptimiser</a></li><li><a
title="Voir l'optimiseur de CSS CleanCSS" href="http://www.cleancss.com/" hreflang="en">CleanCSS</a></li></ul><p>Et dans vos scripts utilisez des sélecteurs précis basés sur l’id et pas sur les classes css, l&#8217;identifiant étant unique la navigateur retrouve plus facilement la balise demandée; que si il doit analyser toutes celles de la page.</p><h3>Ajax</h3><p>Ajax permet d&#8217;améliorer le ressenti utilisateur en limitant le rechargement de la page au strict minimum. C&#8217;est donc une bonne piste d&#8217;optimisation, mais attention à le faire le mieux possible. Pour cela, envoyer les requêtes AJAX avec la méthode get et utiliser le cache de requête HTTP.<br
/> Pour le format de données vous pouvez utiliser JSON ou XML, les deux solutions ont leurs avantages et inconvénients, mais sont bien plus performantes que d&#8217;envoyer du code HTML pur !</p><h2>Optimisation des images</h2><h3>Les formats d&#8217;image</h3><p>En JPEG on peut gagner jusqu&#8217;à 90% du poids d’une image avec une perte acceptable (compression autour de 55, à tester car chaque logiciel implémente sa propre échelle de compression). Idéal pour les photos.</p><p>En PNG on peut gagner entre 75 et 90% du poids de l’image sans perte. Idéal pour des images avec du texte. Attention à prendre du PNG8 et non pas 24 !</p><p>Le GIF ne devrait jamais être utilisé, sauf éventuellement pour du GIF animé.</p><h3>Sprites et métadatas</h3><p>L’utilisation des sprites, permet de diminuer l’impact du temps de latence et le poids des images. Le poids du sprite généré est inférieur à la somme des images qui le composent !</p><ul><li><a
title="Voir l'article sur les sprites sur Pompage.net" href="http://www.pompage.net/pompe/sprites/">Sprites CSS : Meurs, découpe d’images, meurs !</a></li><li><a
title="Voir le cr&Atilde;&copy;ateur de sprites CSSSprites" href="http://csssprites.com/" hreflang="en">CSSSprites</a></li><li><a
title="Voir le créateur de sprites SpriteGen" href="http://spritegen.website-performance.org" hreflang="en">SpriteGen</a></li></ul><p>La suppression des metadata des images avec Smushit, Optipng, Pngcrush ou PunyPng apporte un gain de 15% environ du poids des images en supprimant les données inutiles dans un contexte web des photos.</p><ul><li><a
title="Voir le site de PNGCrush" href="http://pmt.sourceforge.net/pngcrush/" hreflang="en">PNGCrush</a></li><li><a
title="Voir le site d'OptiPNG" href="http://optipng.sourceforge.net" hreflang="en">OptiPNG</a></li><li><a
title="Voir le site de PunyPNG" href="http://www.gracepointafterfive.com/punypng" hreflang="en">PunyPNG</a></li></ul><h3>Favicon</h3><p>Même si il n’est pas spécifié, les navigateurs le cherchent et chargent une page 404 si il n’est pas présent. Cela peut donc être très coûteux, surtout si votre page d&#8217;erreur personnalisée est lourde.</p><p>Ma référence pour avoir des information et des tests sur le traitement des images :</p><ul><li><a
title="Voir le site CSS-IG" href="http://www.css-ig.net/">CSS-IG : Optimisation Web, format PNG</a></li></ul><h2>D&#8217;autres pistes d&#8217;optimisation</h2><p>Il faut à tout prix limiter les redirections sur la page d’accueil, cela augmente la latence et n&#8217;est souvent qu&#8217;un mauvais palliatif à une solution plus pérenne. Ce n&#8217;est d&#8217;ailleurs pas bon non plus pour votre référencement.</p><h3>Les cookies</h3><p>Un cookie est envoyé avec chaque requête http, il faut limiter strictement leur taille, un cookie de 1ko retarde la réponse de 16ms en moyenne, avec 50 composants dans la page, on gagne donc 0,8s ! Il faut donc si vous le pouvez limiter les cookies aux sous domaines afin qu&#8217;il s n&#8217;impactent pas le téléchargement des autres ressources. En utilisant un CDN ou un sous domaines pour les données statiques, vous règlerez le problème.</p><h3>DNS</h3><p>Le temps de résolution d’un domaine tourne autour de 30ms. Multiplier le nombre de domaine permet de paralléliser les téléchargements. Certains &laquo;&nbsp;vieux&nbsp;&raquo; navigateurs ne téléchargent que deux ressources simultanément, mais les plus récents en prennent 4 fois plus en moyenne. Limiter le nombre de domaines à 4 est un bon compromis.</p><h3>Buffer</h3><p>Il est important également d&#8217;envoyer votre buffer le plus rapidement possible. L&#8217;utilisateur verra sa page commencer à se charger plus rapidement. Son ressenti sera bien meilleur, surtout si les temps de génération de votre page sont longs.</p><h2>Références utiles</h2><p>Une des meilleures références sur le sujet est en français. Vous y trouverez beaucoup d&#8217;explications</p><ul><li><a
title="Voir le blog d'Éric Daspet" href="">Le blog d&#8217;Éric Daspet sur les performances web</a></li></ul><p>Les autres en anglais sont aussi de très bonne facture :</p><ul><li><a
title="Voir le site de Yahoo" href="http://developer.yahoo.com/performance/rules.html" hreflang="en">Les bonnes pratiques par Yahoo</a></li><li><a
title="Voir le site de Google" href="http://code.google.com/intl/fr/speed/page-speed/docs/rules_intro.html" hreflang="en">Les bonnes pratiques par Google</a></li><li><a
title="Voir le blog de Steve Souders" href="http://stevesouders.com/" hreflang="en">Le blog de Steve Souders</a></li></ul><h2>Conclusion</h2><p>Une fois tous ces éléments mis en place, votre site doit avoir retrouvé de sa vigueur et si tout n&#8217;est pas encore parfait, il est peut être temps de passer à l&#8217;étape deux. Votre site à probablement besoins de moyens spécifiques, mais ces conseils lui sont déjà profitables et sont suffisants pour la plupart des projets web.</p><p>un livre sur le sujet devrait paraitre bientôt, je ne manquerai pas de vous tenir informé !</p><p>Merci à <a
title="Voir le site d'Éric Daspet" href="http://eric.daspet.name/">Eric Daspet</a> de m&#8217;avoir ouvert les yeux sur ce sujet aussi utile que passionnant.<br
/><h2>Sur le même thème</h2><ul
class="similar-posts"><li><a
href="http://www.webaaz.com/2010/04/les-generateurs-de-sprites-css/" rel="bookmark" title="28 avril 2010">Les générateurs de sprites CSS</a></li><li><a
href="http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/" rel="bookmark" title="15 mai 2009">Bien utiliser les feuilles de style (CSS)</a></li><li><a
href="http://www.webaaz.com/2010/08/recette-et-environnements-de-test/" rel="bookmark" title="9 août 2010">Recette &#038; environnements de test</a></li><li><a
href="http://www.webaaz.com/2011/11/utiliser-chrome-et-violer-la-neutralite/" rel="bookmark" title="2 novembre 2011">Utiliser Chrome et violer la neutralité ?</a></li><li><a
href="http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/" rel="bookmark" title="22 décembre 2009">Les plugins Firefox : Colorzilla</a></li></ul><p></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy"><ul
class="socials"><li
class="shr-twitter"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser+son+site+web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-identica"> <a
href="http://www.shareaholic.com/api/share/?title=TITLE&amp;link=PERMALINK&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=205&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post this to Identica">Post this to Identica</a></li><li
class="shr-mail"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser%20son%20site%20web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=201&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a></li><li
class="shr-gmail"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser+son+site+web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a></li><li
class="shr-viadeo"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser+son+site+web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=92&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Viadeo">Share this on Viadeo</a></li><li
class="shr-googlereader"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser+son+site+web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=207&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a></li><li
class="shr-netvibes"> <a
href="http://www.shareaholic.com/api/share/?title=Optimiser+son+site+web&amp;link=http://www.webaaz.com/2009/10/optimiser-son-site-web/&amp;notes=La%20vitesse%20d%27affichage%20d%27un%20site%20web%20est%20tr%C3%A8s%20importante%20pour%20capter%20les%20visiteurs.%20Les%20internautes%20sont%20dans%20l%27instantan%C3%A9it%C3%A9%20et%20ne%20veulent%20pas%20attendre%20pour%20voir%20votre%20page.%20Avec%20quelques%20astuces%20simple%20%C3%A0%20mettre%20en%20place%2C%20vous%20pouvez%20retenir%20vos%20visiteurs%20et%20am%C3%A9liorer%20leur%20exp%C3%A9rience%20d%27utilisateur%2C%20ce%20qui%20les%20incitera%20%C3%A0%20revenir.%0D%0A%0D%0AIl%20faut%20bien%20avoir%20en%20t%C3%AAte%20que%20ce%20sont%20les%20petits%20gains%20par%20ci%20par%20l%C3%A0%20qui%20feront%20la%20diff%C3%A9rence.%20Cela%20vous%20demandera%20finalement%20assez%20peu%20de%20travail%20pour%20les%20premiers%20r%C3%A9sultats%20et%20beaucoup%20plus%20pour%20arriver%20%C3%A0%20un%20r%C3%A9sultat%20parfait.%20Mais%20m%C3%AAme%20sans%20pousser%20la%20d%C3%A9marche%20jusqu%27au%20bout%2C%20l%27effet%20sera%20b%C3%A9n%C3%A9fique%20en%20termes%20d%27audience%2C%20et%20votre%20taux%20de%20transformation%20devrait%20augmenter%20lui%20aussi.%0D%0A%0D%0AVoici%20donc%20quelques%20conseils%2C%20et%20quelques%20r%C3%A9f%C3%A9rences%20afin%20de%20ma%C3%AEtriser%20le%20sujet%0D%0A%0D%0A%0D%0APhoto%20de%20GemMoth%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=195&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a></li></ul><div
style="clear: both;"></div></div> ]]></content:encoded> <wfw:commentRss>http://www.webaaz.com/2009/10/optimiser-son-site-web/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Les plugins Firefox : Firebug</title><link>http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/</link> <comments>http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/#comments</comments> <pubDate>Thu, 03 Sep 2009 08:00:11 +0000</pubDate> <dc:creator>Martin</dc:creator> <category><![CDATA[CSS]]></category> <category><![CDATA[Design]]></category> <category><![CDATA[Développement]]></category> <category><![CDATA[HTML]]></category> <category><![CDATA[Javascript]]></category> <category><![CDATA[Libre]]></category> <category><![CDATA[Logiciels]]></category> <category><![CDATA[Outils]]></category> <category><![CDATA[Plugins]]></category> <guid
isPermaLink="false">http://www.webaaz.com/?p=230</guid> <description><![CDATA[Pour le développement web, il existe plusieurs extensions très pratiques pour améliorer la qualité de son code, le déboguer, ou l'optimiser. Elles sont véritablement plébiscitées par les développeurs, et sont en partie à l'origine du succès de <a
title="Lire l'article sur le navigateur Firefox" href="http://www.webaaz.com/2009/06/navigateur-web-standard-firefox">Firefox</a>. L'une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l'affichage de votre page. <img
src="/images/insecte-feu.jpg" alt="Insecte de couleur feu en Iran" width="570" height="250" /> <a
title="Photo de Hamed Saber depuis Flickr" href="http://www.flickr.com/photos/44124425616@N01/273927725">Photo de Hamed Saber depuis Flickr</a>]]></description> <content:encoded><![CDATA[<p>Pour le développement web, il existe plusieurs extensions très pratiques pour améliorer la qualité de son code, le déboguer, ou l&#8217;optimiser. Elles sont véritablement plébiscitées par les développeurs, et sont en partie à l&#8217;origine du succès de <a
title="Lire l'article sur le navigateur Firefox" href="http://www.webaaz.com/2009/06/navigateur-web-standard-firefox">Firefox</a>. L&#8217;une des plus connues et utilisée est Firebug, un condensé de fonctionnalités destinées à vous aider à déboguer et comprendre tout ce qui est lié à l&#8217;affichage de votre page.</p><p><img
src="/images/insecte-feu.jpg" alt="Insecte de couleur feu en Iran" width="570" height="250" /><br
/> <a
title="Photo de Hamed Saber depuis Flickr" href="http://www.flickr.com/photos/44124425616@N01/273927725">Photo de Hamed Saber depuis Flickr</a></p><h2>Installation</h2><p>Cette extension est disponible sur le site d&#8217;extensions de Firefox :</p><ul><li><a
title="Voir l'extension Firebug pour Firefox" href="https://addons.mozilla.org/fr/firefox/addon/1843">Installer Firebug pour Firefox</a></li></ul><h2>Présentation</h2><p>Firebug permet d&#8217;infiltrer le code source de votre page web afin de vérifier ce qui s&#8217;y passe, aussi bien pour le DOM, le code HTML, les CSS, le Javascript ou les requêtes AJAX. Vous pourrez même agir en direct sur le code et voir les effets de vos modifications instantanément.<br
/> Pour cela Firebug est doté d&#8217;un débogueur, d&#8217;une console d&#8217;erreur, et d&#8217;une ligne de commande.</p><h2>Fonctionnalités principales</h2><p>Pour HTML et CSS, vous pouvez afficher le code lié à chaque balise HTML, et voir toutes les propriétés définies que ce soit directement ou par héritage. En modifiant ces valeurs vous pourrez vous rendre compte des changements de rendu immédiatement.</p><p>Coté Javascript vous pourrez ainsi visualiser le code lié à la page et le suivre pas à pas dans son exécution. Les erreurs sont visibles dans la barre d&#8217;état et affichées dans la console. Vous pourrez également interagir avec Javascript grâce à la ligne de commande.</p><p>AJAX  bénéficie aussi de fonctionnalités bien pratiques. Vous pouvez ainsi visualiser les requêtes envoyées et les réponses obtenues en temps réel.</p><p>Le profilage d&#8217;application est également facilité avec un outil graphique qui permet de visualiser les requêtes HTTP et les temps de réponse qui en découlent.</p><h2>Tutoriel</h2><p>L&#8217;extension est tellement complexe et puissante que je vous recommande la lecture d&#8217;un très bon tutoriel :</p><ul><li><a
title="Voir le tutoriel sur Firebug sur Developpez.com" href="http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/">Tutoriel Firebug</a></li></ul><h2>FirebugLite</h2><p>Une version plus légère mais tout aussi pratique peut être embarquée dans d&#8217;autres navigateurs comme Internet Explorer, Opéra ou Safari. Utile donc pour finaliser votre développement sur ces environnements.</p><ul><li><a
title="Voir FirebugLite sur le site de l'&Atilde;&copy;diteur" href="http://getfirebug.com/firebuglite">FirebugLite</a></li></ul><h2>Les extensions</h2><p>Firebug à beau être une extension, cela ne l&#8217;empêche pas d&#8217;être extensible ! D&#8217;autres extensions Firefox étendent encore les possibilités de Firebug parmis lesquelles on retrouve :</p><ul><li><a
title="Voir l'extension Firecookie pour Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/6683">Firecookie : pour gérer les cookies</a></li><li><a
title="Voir l'extension Firediff pour Firebug" href="https://addons.mozilla.org/fr/firefox/addon/13179">Firediff : pour voir les différences entre deux états</a></li><li><a
title="Voir l'extension FirePHP pour Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/6149">FirePHP : pour déboguer votre code PHP</a></li><li><a
title="Voir l'extension FireRainbow pour Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/9603">FireRainbow : pour ajouter la coloration syntaxique au Javascript</a></li><li><a
title="Voir l'extension YSlow pour Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/5369">YSlow : pour optimiser le temps d&#8217;affichage votre site web</a></li><li><a
title="Voir l'extension SenSEO pour Firebug" href="https://addons.mozilla.org/en-US/firefox/addon/9403">SenSEO : pour optimiser votre référencement naturel</a></li></ul><p>Je reviendrais bientôt sur certaines de ces extensions qui méritent un article spécifique. En attendant vous en trouverez en tout plus d&#8217;une vingtaine sur le site de l&#8217;éditeur :</p><ul><li><a
title="Voir la liste compl&Atilde;&uml;te des extensions de Firebug" href="http://getfirebug.com/downloads">La liste complète des extensions de Firebug</a></li></ul><p>Et si vous n&#8217;en avez pas encore assez, il ne vous reste plus qu&#8217;a créer votre propre extension pour Firebug, pour cela rendez vous sur le <a
title="Voir le groupe Google : Firebug Working Group" href="http://groups.google.com/group/firebug-working-group">groupe Google &laquo;&nbsp;Firebug Working Group&nbsp;&raquo;</a> créé à l&#8217;occasion.</p><p>Voilà, vous avez désormais les cartes en main pour déboguer facilement vos applications. Bon courage !<br
/><h2>Sur le même thème</h2><ul
class="similar-posts"><li><a
href="http://www.webaaz.com/2010/02/les-plugins-firefox-xrefresh/" rel="bookmark" title="18 février 2010">Les plugins Firefox : XRefresh</a></li><li><a
href="http://www.webaaz.com/2009/09/bien-utiliser-javascript/" rel="bookmark" title="23 septembre 2009">Bien utiliser Javascript</a></li><li><a
href="http://www.webaaz.com/2011/03/les-plugins-firefox-tiletabs/" rel="bookmark" title="28 mars 2011">Les plugins Firefox : TileTabs</a></li><li><a
href="http://www.webaaz.com/2009/12/les-plugins-firefox-colorzilla/" rel="bookmark" title="22 décembre 2009">Les plugins Firefox : Colorzilla</a></li><li><a
href="http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/" rel="bookmark" title="15 mai 2009">Bien utiliser les feuilles de style (CSS)</a></li></ul><p></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy"><ul
class="socials"><li
class="shr-twitter"> <a
href="http://www.shareaholic.com/api/share/?title=Les+plugins+Firefox+%3A+Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-identica"> <a
href="http://www.shareaholic.com/api/share/?title=TITLE&amp;link=PERMALINK&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=205&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post this to Identica">Post this to Identica</a></li><li
class="shr-mail"> <a
href="http://www.shareaholic.com/api/share/?title=Les%20plugins%20Firefox%20%3A%20Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=201&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a></li><li
class="shr-gmail"> <a
href="http://www.shareaholic.com/api/share/?title=Les+plugins+Firefox+%3A+Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a></li><li
class="shr-viadeo"> <a
href="http://www.shareaholic.com/api/share/?title=Les+plugins+Firefox+%3A+Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=92&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Viadeo">Share this on Viadeo</a></li><li
class="shr-googlereader"> <a
href="http://www.shareaholic.com/api/share/?title=Les+plugins+Firefox+%3A+Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=207&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a></li><li
class="shr-netvibes"> <a
href="http://www.shareaholic.com/api/share/?title=Les+plugins+Firefox+%3A+Firebug&amp;link=http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/&amp;notes=Pour%20le%20d%C3%A9veloppement%20web%2C%20il%20existe%20plusieurs%20extensions%20tr%C3%A8s%20pratiques%20pour%20am%C3%A9liorer%20la%20qualit%C3%A9%20de%20son%20code%2C%20le%20d%C3%A9boguer%2C%20ou%20l%27optimiser.%20Elles%20sont%20v%C3%A9ritablement%20pl%C3%A9biscit%C3%A9es%20par%20les%20d%C3%A9veloppeurs%2C%20et%20sont%20en%20partie%20%C3%A0%20l%27origine%20du%20succ%C3%A8s%20de%20Firefox.%20L%27une%20des%20plus%20connues%20et%20utilis%C3%A9e%20est%20Firebug%2C%20un%20condens%C3%A9%20de%20fonctionnalit%C3%A9s%20destin%C3%A9es%20%C3%A0%20vous%20aider%20%C3%A0%20d%C3%A9boguer%20et%20comprendre%20tout%20ce%20qui%20est%20li%C3%A9%20%C3%A0%20l%27affichage%20de%20votre%20page.%0D%0A%0D%0A%0D%0APhoto%20de%20Hamed%20Saber%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=195&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a></li></ul><div
style="clear: both;"></div></div> ]]></content:encoded> <wfw:commentRss>http://www.webaaz.com/2009/09/les-plugins-firefox-firebug/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Bien écrire HTML &amp; XHTML</title><link>http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/</link> <comments>http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/#comments</comments> <pubDate>Thu, 16 Apr 2009 12:09:51 +0000</pubDate> <dc:creator>Martin</dc:creator> <category><![CDATA[Développement]]></category> <category><![CDATA[HTML]]></category> <category><![CDATA[CSS]]></category> <category><![CDATA[Eyrolles]]></category> <category><![CDATA[memento]]></category> <category><![CDATA[Quiz]]></category> <category><![CDATA[Standard]]></category> <category><![CDATA[Validateur]]></category> <category><![CDATA[W3C]]></category> <category><![CDATA[Web]]></category> <category><![CDATA[Wysiwyg]]></category> <category><![CDATA[XHTML]]></category> <guid
isPermaLink="false">http://www.webaaz.com/?p=9</guid> <description><![CDATA[Pour un premier article "technique", commençons par l'une des bases du web, le langage de balisage <abbr
title="HyperText Markup Language" lang="en">HTML</abbr> et son évolution <abbr
title="eXtensible HyperText Markup Language" lang="en">XHTML</abbr>. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d'autres dérivés du <a
title="Voir la définition de SGML sur wikipédia" href="http://fr.wikipedia.org/wiki/Standard_Generalized_Markup_Language"><abbr
title="Standard Generalized Markup Language">SGML</abbr></a>. <img
src="/images/crayons.jpg" alt="Crayons de couleur" /><br
/> <a
title="Photo de ooti depuis Flickr" href="http://www.flickr.com/photos/93305392@N00/109580774">Photo de ooti depuis Flickr</a>]]></description> <content:encoded><![CDATA[<p>Pour un premier article &laquo;&nbsp;technique&nbsp;&raquo;, commençons par l&#8217;une des bases du web, le langage de balisage <abbr
title="HyperText Markup Language" lang="en">HTML</abbr> et son évolution <abbr
title="eXtensible HyperText Markup Language" lang="en">XHTML</abbr>. Il est indissociable du web, la plupart des pages sur Internet utilisent ces langages ou d&#8217;autres dérivés du <a
title="Voir la définition de SGML sur wikipédia" href="http://fr.wikipedia.org/wiki/Standard_Generalized_Markup_Language"><abbr
title="Standard Generalized Markup Language">SGML</abbr></a>.</p><p><img
src="/images/crayons.jpg" alt="Crayons de couleur" /><br
/> <a
title="Photo de ooti depuis Flickr" href="http://www.flickr.com/photos/93305392@N00/109580774">Photo de ooti depuis Flickr</a></p><p>Je vais donc vous présenter les différentes ressources de qualité sur le sujet que l&#8217;on trouve sur Internet. Le but de cet article est de vous donner toutes les pistes. Vous n&#8217;avez plus qu&#8217;a les suivre !</p><h2>Définitions</h2><ul><li><a
title="Voir la définition de HTML sur wikipédia" href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language">Définition de HTML</a></li><li><a
title="Voir la définition de XHTML sur wikipédia" href="http://fr.wikipedia.org/wiki/XHTML">Définition de XHTML</a></li></ul><h2>Historique</h2><p>La première version de la norme date de 1991, son auteur <a
title="Voir la biographie de Tim Berners-Lee sur Wikipédia" href="http://fr.wikipedia.org/wiki/Tim_Berners-Lee">Tim Berners-Lee</a> préside aujourd&#8217;hui le <a
title="Voir la définition du W3C sur wikipédia" href="http://fr.wikipedia.org/wiki/W3c"><abbr
title="World Wide Web Consortium">W3C</abbr></a>, le consortium chargé de promouvoir la compatibilité des technologies web.</p><p>La version actuelle de HTML est la 4.01, c&#8217;est une correction de la version 4.0 qui date de 1997. Depuis peu d&#8217;évolutions, la version 5 est en préparation. Le seul point marquant de ces dernières années est l&#8217;arrivée de XHTML, qui est le portage de HTML en <a
title="Voir la définition de XML sur wikipédia" href="http://fr.wikipedia.org/wiki/XML">XML</a>. Cette évolution permet notamment de gagner en qualité du code, l&#8217;apport de XML oblige à plus de rigueur. Certaines facilité du langage HTML ne sont plus permises, le code est donc plus homogène et les navigateurs interprètent donc plus facilement un code qu&#8217;ils lisent mieux.</p><p>Les navigateurs récents tels que IE8 ou Firefox 3.x respectent de plus en plus en plus les standard et affichent d&#8217;ailleurs de mieux en mieux les pages qui respectent les normes.</p><h2>A quoi ca sert ?</h2><p>Le langage HTML ne permet pas de faire le rendu visuel d&#8217;un texte. En fait il ne permet que le balisage de celui ci. Ainsi un titre aura une balise de titre. En lisant la source du code, on comprendra qu&#8217;il s&#8217;agit d&#8217;un titre, mais le rendu lui sera fait par les <a
title="Voir la définition de CSS sur wikipédia" href="http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade"><abbr
title="Cascading Style Sheet" lang="en">CSS</abbr></a>. Vous comprenez bien que sur un Iphone ou sur un écran 20 pouces, le rendu ne sera pas le même, mais notre titre sera toujours un titre.</p><p>Vous pouvez ainsi définir les éléments de votre page tels qu&#8217;un texte, une image, une vidéo, un formulaire, des liens bien sûr, mais aussi des tableaux des listes&#8230;</p><p>HTML vous permet ainsi d&#8217;afficher votre contenu, mais aussi de questionner l&#8217;internaute au travers de champs de formulaire, par des questions ouvertes avec des champs texte, par des questions fermées à réponse simple ou multiple, et même de l&#8217;enregistrement de fichier.</p><h2>Comment apprendre ?</h2><p>Vous trouverez de multiples cours sur HTML, mais méfiez vous, la plupart présentent un code non standard qui risque d&#8217;être mal compris par les navigateurs, et qui risque d&#8217;être obsolète dans les navigateurs futurs. Référez vous donc le plus souvent à la norme HTML ou au mémento de Raphaël Goetter par exemple.</p><p>L&#8217;utilisation du validateur vous montrera également vos erreurs en vous donnant des pistes pour les corriger.</p><h2>Les normes</h2><p>Les normes ne sont pas toujours faciles à lire, mais heureusement la traduction française apporte un peu plus de clarté sur certains points techniques.</p><ul><li><a
title="Voir norme HTML 4.01 officielle en anglais" href="http://www.w3.org/TR/1999/REC-html401-19991224/" lang="en">La norme HTML 4.01 officielle en anglais</a></li><li><a
title="Voir norme HTML 4.01 traduite en français" href="http://www.la-grange.net/w3c/html4.01/cover.html">La norme HTML 4.01 traduite en français</a></li><li><a
title="Voir la norme XHTML 1.0 officielle en anglais" href="http://www.w3.org/TR/xhtml1/" lang="en">La norme XHTML 1.0 officielle en anglais</a></li><li><a
title="Voir la norme XHTML 1.0 traduite en français" href="http://www.la-grange.net/w3c/xhtml1/">La norme XHTML 1.0 traduite en français</a></li><li><a
title="Voir la norme XHTML 1.1 officielle en anglais" href="http://www.w3.org/TR/2001/REC-xhtml11-20010531/" lang="en">La norme XHTML 1.1 officielle en anglais</a></li><li><a
title="Voir la norme XHTML 1.1 traduite en français" href="http://www.la-grange.net/w3c/xhtml11/">La norme XHTML 1.1 traduite en français</a></li></ul><h2>Les bonnes pratiques</h2><ul><li>Utiliser le <a
href="http://fr.wikipedia.org/wiki/Doctype">doctype</a> approprié</li><li>Respecter la norme associée au doctype</li><li>Évitez l&#8217;utilisation d&#8217;éditeurs <a
title="Voir la définition de WYSIWYG sur wikipédia" href="http://fr.wikipedia.org/wiki/WYSIWYG"><abbr
title="What You See Is What You Get">WYSIWYG</abbr></a>, leur interprétation laisse parfois à désirer</li><li>Ne pas utiliser de balises HTML &laquo;&nbsp;propriétaires&nbsp;&raquo;</li><li>Indenter correctement son code source pour le rendre plus lisible</li></ul><h2>Outils</h2><p>Il n&#8217;est pas toujours facile d&#8217;avoir en tête toutes les propriétés de chaque élément HTML, aussi n&#8217;hésitez pas à vérifier la validité de vos pages.</p><ul><li><a
title="Validez votre code HTML et XTML avec le validateur du W3C" lang="en" href="http://validator.w3.org/">Validateur de code HTML et XTML du W3C</a></li><li><a
title="Validez votre code avec un validateur en français" href="http://www.validome.org/">Validateur de code Validome</a></li></ul><h2>Bibliographie</h2><p>La gamme &laquo;&nbsp;mémento&nbsp;&raquo; chez Eyrolles présente sous forme de livret plastifié et indéchirable l&#8217;essentiel d&#8217;un point technique pour seulement 5€. Un indispensable !</p><ul><li><a
title="Voir le mémento sur XHTML" href="http://www.eyrolles.com/Informatique/Livre/memento-xhtml-9782212119558">Mémento XHTML de Raphaël Goetter chez Eyrolles</a></li></ul><h2>Quiz</h2><p>Vous avez bien compris tous les éléments présentés ? Testez vos connaissances ! Attention, le premier test n&#8217;est pas aussi facile que l&#8217;on pourrais le croire.</p><ul><li><a
title="Combien de balises HTML pouvez vous citer en 5 minutes ?" href="http://www.oneplusyou.com/bb/html_quiz">Combien de balises HTML pouvez vous citer en 5 minutes ?</a></li><li><a
title="Testez vos connaissances HTML en 20 questions" lang="en" href="http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML">Testez vos connaissances HTML en 20 questions</a></li></ul><p>Vous voilà je l&#8217;espère un peu plus à l&#8217;aise avec la notion de langage de balisage. N&#8217;hésitez pas à posez vos questions en commentaires.</p><p>Un des buts de ce site étant l&#8217;échange et l&#8217;apprentissage, proposez aussi vos références bibliographiques, liens ou bonnes pratiques sur le sujet.<br
/><h2>Sur le même thème</h2><ul
class="similar-posts"><li><a
href="http://www.webaaz.com/2009/05/bien-utiliser-les-feuilles-de-style-css/" rel="bookmark" title="15 mai 2009">Bien utiliser les feuilles de style (CSS)</a></li><li><a
href="http://www.webaaz.com/2010/11/livre-html5-pour-les-webdesigners/" rel="bookmark" title="25 novembre 2010">Livre : HTML5 pour les webdesigners</a></li><li><a
href="http://www.webaaz.com/2009/08/aide-memoire-antiseche-les-cheat-sheets-2/" rel="bookmark" title="1 août 2009">Aide mémoire &amp; antisèche : Les cheat sheets</a></li><li><a
href="http://www.webaaz.com/2009/06/bien-developper-en-php-partie-1/" rel="bookmark" title="1 juin 2009">Bien développer en PHP (partie 1)</a></li><li><a
href="http://www.webaaz.com/2009/09/bien-utiliser-javascript/" rel="bookmark" title="23 septembre 2009">Bien utiliser Javascript</a></li></ul><p></p><div
class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-enjoy"><ul
class="socials"><li
class="shr-twitter"> <a
href="http://www.shareaholic.com/api/share/?title=Bien+%C3%A9crire+HTML+%26amp%3B+XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=%2524%257Btitle%257D%2B-%2B%2524%257Bshort_link%257D&amp;service=7&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a></li><li
class="shr-identica"> <a
href="http://www.shareaholic.com/api/share/?title=TITLE&amp;link=PERMALINK&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=205&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Post this to Identica">Post this to Identica</a></li><li
class="shr-mail"> <a
href="http://www.shareaholic.com/api/share/?title=Bien%20%C3%A9crire%20HTML%20%26amp%3B%20XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=201&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a></li><li
class="shr-gmail"> <a
href="http://www.shareaholic.com/api/share/?title=Bien+%C3%A9crire+HTML+%26amp%3B+XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=52&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Email this via Gmail">Email this via Gmail</a></li><li
class="shr-viadeo"> <a
href="http://www.shareaholic.com/api/share/?title=Bien+%C3%A9crire+HTML+%26amp%3B+XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=92&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Share this on Viadeo">Share this on Viadeo</a></li><li
class="shr-googlereader"> <a
href="http://www.shareaholic.com/api/share/?title=Bien+%C3%A9crire+HTML+%26amp%3B+XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=207&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Add this to Google Reader">Add this to Google Reader</a></li><li
class="shr-netvibes"> <a
href="http://www.shareaholic.com/api/share/?title=Bien+%C3%A9crire+HTML+%26amp%3B+XHTML&amp;link=http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/&amp;notes=Pour%20un%20premier%20article%20%22technique%22%2C%20commen%C3%A7ons%20par%20l%27une%20des%20bases%20du%20web%2C%20le%20langage%20de%20balisage%20HTML%20et%20son%20%C3%A9volution%20XHTML.%20Il%20est%20indissociable%20du%20web%2C%20la%20plupart%20des%20pages%20sur%20Internet%20utilisent%20ces%20langages%20ou%20d%27autres%20d%C3%A9riv%C3%A9s%20du%20SGML.%0D%0A%0D%0A%0D%0APhoto%20de%20ooti%20depuis%20Flickr&amp;short_link=&amp;shortener=none&amp;shortener_key=&amp;v=1&amp;apitype=1&amp;apikey=8afa39428933be41f8afdb8ea21a495c&amp;source=Shareaholic&amp;template=&amp;service=195&amp;tags=&amp;ctype=" rel="nofollow" class="external" title="Submit this to Netvibes">Submit this to Netvibes</a></li></ul><div
style="clear: both;"></div></div> ]]></content:encoded> <wfw:commentRss>http://www.webaaz.com/2009/04/bien-ecrire-html-xhtml/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
