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

<channel>
	<title>WebDev-FR</title>
	<atom:link href="http://webdev-fr.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://webdev-fr.com</link>
	<description></description>
	<pubDate>Thu, 24 Dec 2009 11:24:35 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.3</generator>
	<language>en</language>
			<item>
		<title>Le Père Noël, cloud computing et réseaux sociaux</title>
		<link>http://webdev-fr.com/2009/12/24/le-pere-noel-cloud-computing-et-reseaux-sociaux/</link>
		<comments>http://webdev-fr.com/2009/12/24/le-pere-noel-cloud-computing-et-reseaux-sociaux/#comments</comments>
		<pubDate>Thu, 24 Dec 2009 11:24:35 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[Non classé]]></category>

		<category><![CDATA[cloud computing]]></category>

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

		<category><![CDATA[Noël]]></category>

		<category><![CDATA[Père Noël]]></category>

		<category><![CDATA[réseaux sociaux]]></category>

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

		<guid isPermaLink="false">http://webdev-fr.com/?p=314</guid>
		<description><![CDATA[Associer Père Noël et Cloud Computing dans un titre d&#8217;article est particulièrement osé, je l&#8217;avoue.
Mais sous ce titre semblant sortir de l&#8217;esprit dérangé d&#8217;on ne sait qui (de moi en fait) se cache une vraie analyse de fond : le Père Noël fut le premier à pratiquer le Cloud Computing.
Éclaircissons un peu les choses&#8230;
La distribution de [...]]]></description>
			<content:encoded><![CDATA[<p>Associer Père Noël et Cloud Computing dans un titre d&#8217;article est particulièrement osé, je l&#8217;avoue.</p>
<p>Mais sous ce titre semblant sortir de l&#8217;esprit dérangé d&#8217;on ne sait qui (de moi en fait) se cache une vraie analyse de fond : le Père Noël fut le premier à pratiquer le Cloud Computing.</p>
<p>Éclaircissons un peu les choses&#8230;</p>
<p>La distribution de cadeaux a franchement évolué au cours des dernières décennies. Même si on s&#8217;imagine toujours le Père Noël comme un barbu quelque peu ventripotent (donc à priori jovial, j&#8217;ai peine à imaginer un barbu ventripotent grincheux) en survet&#8217; rouge à fourrure blanche assis dans un traineau en bois tiré par X rennes (X variant de 2 à une douzaine en fonction des cultures et de la brochure marketing), il faut bien se dire que ce fantasme nourri par des hordes de publicitaires voulant nous pousser à la consommation est très probablement loin en deçà de la réalité.</p>
<p>Déjà, un traineau en bois, faut arrêter de planer. Vu la cadence que doit tenir le Père Noël, un traineau en bois ne pourrait pas encaisser les G lors des accélération pour aller d&#8217;une maison à une autre. Au premier départ le traineau volerait en échardes. En plus le bois, même traité, c&#8217;est pas tip top face aux intempéries que peut subir le Père Noël (surtout en cette saison). Vu la masse de cadeaux qu&#8217;il doit se trimballer, à moins de faire des aller-retours avec le Pôle Nord (peu probable), il faudrait un traineau monstrueux pour arriver à supporter le poids total. Vous rajoutez par-dessus tout ça quelques mouvements pour la sauvegarde des arbres qui risqueraient de lui coller un procès au cul et vous vous rendez compte que non, le Père Noël ne se trimballe plus dans un traineau en bois depuis longtemps.</p>
<p>Depuis l&#8217;invention du moteur à explosion, la révolution industrielle, etc, il est fort probable que le Père Noël fasse sa tournée à bord du dernier cri en matière de jets privés. Il est également probable que ce jet soit une petite merveille d&#8217;électronique embarqué afin d&#8217;arriver à larguer les bons cadeaux aux bons moments.</p>
<p>Parce que là où le Père Noël pouvait prendre son temps à une époque lointaine, aujourd&#8217;hui il est obligé de tout torpiller en un temps record. A cause de l&#8217;évolution de la société, la mentalité universelle &#8220;je veux tout et maintenant&#8221;, la révolution de la téléphonie mobile et des réseaux sociaux. La téléphonie mobile et les réseaux sociaux ? Et bien oui ! Aujourd&#8217;hui, si le Père Noël ne se met pas le turbo au cul pour faire sa distribution, il y a fort à parier qu&#8217;il va se faire tracer et n&#8217;importe qui pourra savoir exactement où il se trouve face à Twitter. Combien de temps a-t-il fallu pour que l&#8217;annonce de la mort de Mickael Jackson fasse le tour de la planète ? Si le Père Noël paraisse un peu, serait-ce pour faire une unique pause afin de manger un biscuit ou boire un verre de lait laissé là par un enfant (naïf, la faute aux publicitaires, cf plus haut), il est foutu. C&#8217;est un coup à se faire braquer par une bande de gamins de 5 ans. Que voulez-vous, après avoir appris que l&#8217;un des mots les plus recherchés par les moins de 7 ans est le mot &#8220;porn&#8221;, on ne s&#8217;attend pas à ce qu&#8217;ils fassent preuve d&#8217;état d&#8217;âme vis à vis du Père Noël.</p>
<p>Donc côté distribution, ça s&#8217;est fortement industrialisé.</p>
<p>En plus, avec la législation du travail, je ne serais pas étonné d&#8217;apprendre qu&#8217;il ne se déplace plus, que tout est automatisé. Avez-vous songé à quoi doit ressembler son contrat de travail ? La somme d&#8217;indemnités de déplacements qu&#8217;il doit toucher, même pour une unique nuit de travail doit être faramineuse. Plus les heures sup. Plus la prime de risque car voler de nuit, tous feux éteints (pour éviter de se faire détourner par des pirates de l&#8217;air), quelque soit la météo et à son âge (vue défaillante, peut-être des problèmes d&#8217;incontinence également). Non, d&#8217;un point de vue assurances et indemnités, son patron n&#8217;aurait pas pu suivre et ça aurait coulé leur business en un Noël.</p>
<p>La solution la plus simple aurait donc été d&#8217;investir dans la R&amp;D afin d&#8217;automatiser tout le process. Avions drones, manufacture automatisée du début à la fin (ceux qui croient encore aux lutins qui travaillent en chantonnant peuvent aller se rhabiller, vous imaginez des lutins en train de monter une PS3 alors que le Japon fait ça via des chaînes de montage ?).</p>
<p>Ou alors de basculer vers du cloud computing. Le coeur de métier du Père Nöel, à savoir collecter les demandes, préparer les cadeaux et effectuer la livraison, est effectué dans le nuage. Au coeur du réseau. Le réseau de quoi ? Le réseaux des parents bien entendu ! Le Père Noël sous-traite son taf aux parents des gamins ! Il se charge de collecter les demandes (qui sont directement retournées aux parents vu que ce sont eux qui font les achats) et ça s&#8217;arrête là. En fait, le Père Noël n&#8217;est plus qu&#8217;un maillon du système : il vend son image et ne s&#8217;occupe plus du tout du business des cadeaux. D&#8217;un point de vue stratégie de groupe, ça a un vrai intérêt, ça évite de se disperser dans de multiples domaines au risque de perdre sa spécialisation et de se focaliser sur un seul métier.</p>
<p>Enfin bref, le Père Noël a pas mal changé. Je sais pas si c&#8217;est vraiment un changement positif, les nostalgiques diront probablement que c&#8217;est affreux.</p>
<p>Mais bon, les nostalgiques auraient l&#8217;air malin si on leur offrait un simili d&#8217;IPhone taillé dans du bois par un lutin sous-payé.</p>
<p>Que ça ne vous empêche pas de passer un Joyeux Noël et une bon début d&#8217;année 2010.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2009/12/24/le-pere-noel-cloud-computing-et-reseaux-sociaux/feed/</wfw:commentRss>
		</item>
		<item>
		<title>CSS Orienté Objet</title>
		<link>http://webdev-fr.com/2009/04/29/css-oriente-objet/</link>
		<comments>http://webdev-fr.com/2009/04/29/css-oriente-objet/#comments</comments>
		<pubDate>Wed, 29 Apr 2009 10:42:03 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[CSS]]></category>

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

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

		<category><![CDATA[approche objet]]></category>

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

		<guid isPermaLink="false">http://webdev-fr.com/?p=302</guid>
		<description><![CDATA[Via un billet posté sur le blog de Rebecca Murphey (découverte grâce au lancement de JSMag), je suis tombé sur une présentation de Nicole Sullivan concernant les bonnes pratiques à adopter lors du développement de la couche CSS d&#8217;un site, pratiques qu&#8217;on pourrait plus ou moins assimiler à de la conception orientée objet appliquée aux [...]]]></description>
			<content:encoded><![CDATA[<p>Via un <a href="http://blog.rebeccamurphey.com/2009/04/13/on-gaining-respect-as-a-front-end-developer/">billet</a> posté sur le blog de Rebecca Murphey (découverte grâce au lancement de <a href="http://www.jsmag.com/">JSMag</a>), je suis tombé sur <a href="http://www.slideshare.net/stubbornella/object-oriented-css">une présentation de Nicole Sullivan</a> concernant les bonnes pratiques à adopter lors du développement de la couche CSS d&#8217;un site, pratiques qu&#8217;on pourrait plus ou moins assimiler à de la conception orientée objet appliquée aux CSS.</p>
<h2>Ce qu&#8217;il faut en retenir (ce que j&#8217;en ai retenu)</h2>
<p>L&#8217;un des principaux problèmes des feuilles de styles est leur tendance à gonfler, gonfler, gonfler ce qui les rend plus coûteuse en bande passante mais aussi en maintenabilité (sans compter les risques liés aux styles s&#8217;écrasant mutuellement).</p>
<p>La raison est relativement simple : il n&#8217;est pas forcément évident de réutiliser des styles déjà existants. On a tendance à concevoir les règles CSS par rapport au contenu d&#8217;une page, éventuellement à réutiliser ce qui a été fait sur une page similaire si les similitudes sont flagrantes.</p>
<p>Nicole recommande une approche bien plus pérenne : séparer la structure et le design (ce qui ne veut pas uniquement dire avoir une feuille de style externe mais se baser sur des classes CSS et non sur des balises particulières) et séparer le contenu du contenant.</p>
<p>En fait, il vaut voir une bonne conception CSS comme un assemblage de Legos : commencez par créer votre collection de briques. Une fois que la collection de brique est prête, vous pouvez commencer à créer vos pages, autrement dit vous pouvez commencer à assembler vos briques ensemble pour aboutir au résultat graphique attendu.</p>
<p>Les 10 <em>best practices</em> qu&#8217;elle cite :</p>
<ol>
<li>Créez une bibliothèque de composants</li>
<li>Utilisez des styles en accord avec la sémantique</li>
<li>Concevez des modules avec un fond transparent</li>
<li>Soyez flexible</li>
<li>Apprenez à aimer les grilles</li>
<li>Minimisez l&#8217;emploi des sélecteurs</li>
<li>Séparez la structure et le design</li>
<li>Séparer le contenu et le contenant</li>
<li>Etendez les objets en appliquant plusieurs classes sur un élément HTML</li>
<li>Utilisez des feuilles de style de reset et de gestion des polices</li>
</ol>
<p>Et les 9 choses à éviter :</p>
<ol>
<li>Evitez les styles dépendants de l&#8217;endroit où vous vous trouvez sur le site</li>
<li>Evitez de créer des styles qui dépendent des balises utilisées</li>
<li>Limitez l&#8217;utilisation d&#8217;IDs : ils doivent se limiter aux zones principales, pour le reste utilisez des classes</li>
<li>Fuyez les coins arrondis ou les ombres appliqués par-dessus des fonds non-unis (image de fond ou dégradé).</li>
<li>Evitez de faire un sprite contenant toutes vos images, à moins que vous ayez qu&#8217;un faible nombre de pages</li>
<li>Tentez d&#8217;éviter les alignements sur la hauteur</li>
<li>Le texte c&#8217;est du texte, pas une image contenant du texte</li>
<li>Evitez la redondance</li>
<li>Evitez l&#8217;optimisation prématurée</li>
</ol>
<p>Maintenant si on va un peu plus dans les détails pour certaines parties&#8230;</p>
<h2>Séparez le contenu du contenant</h2>
<p>Ca veut dire qu&#8217;un <em>module</em> est composé :</p>
<ul>
<li>d&#8217;une brique pour la gestion de la bordure (coin arrondis ou carrés, couleur, ombre)</li>
<li>d&#8217;une brique pour le fond (fond uni, image de fond en filigrane, dégradé)</li>
<li>d&#8217;un ensemble de briques pour le contenu</li>
</ul>
<p>Autrement dit, un module devrait avoir 3 classes afin de définir à quoi doit ressembler sa bordure, quel est le fond à appliquer et comment le contenu doit être organisé.</p>
<h2>Séparez la structure et le design</h2>
<p>Prévoyez à l&#8217;avance la structure basique d&#8217;un bloc : faut-il un header dans un bloc ? faut-il un footer ?</p>
<p>De cette manière, créer un bloc se limitera à appliquer les bonnes classes (&#8221;block&#8221;, &#8220;hd&#8221;, &#8220;ft&#8221;, &#8220;bd&#8221;) au contenu du block.</p>
<p>Une fois que cette structure est définie, vous pouvez alors concevoir les différents design qui s&#8217;appliqueront sur cette structure : une brique avec des coins arrondis, une brique pour gérer le fond en dégradé, etc.</p>
<h2>Faites des modules transparents</h2>
<p>Si vous voulez des coins arrondis, préférez une solution où le coin est créé par l&#8217;extérieur et non par l&#8217;intérieur, autrement dit une solution où l&#8217;image du coin est transparente à l&#8217;intérieur et unie à l&#8217;extérieur. Cette solution vous permettra d&#8217;appliquer n&#8217;importe quel fond à l&#8217;intérieur de votre bloc, que ce soit une couleur unie ou une image en arrière-plan.</p>
<p>Bémol : le bloc ne pourra être placé que sur un fond correspond à la couleur extérieure de vos coins arrondis (typiquement le fond de votre page).</p>
<h2>Soyez flexible</h2>
<p><span style="text-decoration: line-through;">Faites de la gym.</span> Faites en sorte que vos briques puissent s&#8217;adapter en largeur et en hauteur. En hauteur pour pouvoir s&#8217;adapter à la hauteur du contenu, en largeur pour pouvoir réutiliser votre brique dans n&#8217;importe quelle zone de votre grille même si la largeur varie.</p>
<p>C&#8217;est la grille qui doit gérer la largeur, les blocs doivent ignorer pour quelle partie de la grille ils ont été conçus.</p>
<h2>Tentez une approche UML</h2>
<p>Tentez de mettre en place un système d&#8217;héritage à vos briques.  Certaines briques seront compatibles ensemble (par exemple certaines briques de gestion de bordure ne pourront pas forcément être appliquées à n&#8217;importe quel brique d&#8217;arrière plan ou même de mise en forme du contenu).</p>
<p>Ces relations entre vos briques peuvent donner lieu à un schéma plus ou moins UML pour faciliter la compréhension des briques existantes.</p>
<p>Un exemple d&#8217;approche UML conçue par Nicole :</p>
<div class="wp-caption alignnone" style="width: 510px"><a href="http://www.flickr.com/photos/nicole_hugo/3296789176/sizes/o/"><img title="Schéma UML appliqué aux CSS" src="http://farm4.static.flickr.com/3336/3296789176_90588ac94a.jpg" alt="Approche UML pour la couche CSS dun projet" width="500" height="329" /></a><p class="wp-caption-text">Approche UML pour la couche CSS d&#39;un projet</p></div>
<p>Bref, plein de bonnes suggestions à tenter de mettre en pratique&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2009/04/29/css-oriente-objet/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Quand IE6 ne sera plus&#8230;</title>
		<link>http://webdev-fr.com/2009/04/27/quand-ie6-ne-sera-plus/</link>
		<comments>http://webdev-fr.com/2009/04/27/quand-ie6-ne-sera-plus/#comments</comments>
		<pubDate>Mon, 27 Apr 2009 14:34:13 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[CSS]]></category>

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

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

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

		<guid isPermaLink="false">http://webdev-fr.com/?p=297</guid>
		<description><![CDATA[Sur Ajaxian, on peut trouver une petite liste des 10 choses les plus cool que nous serons capables d&#8217;appliquer lorsque IE6 ne sera plus.
Essayons de notre côté d&#8217;aller un peu plus loin que cette liste. Lorsque IE6 aura disparu, la nouvelle barrière sera IE7 mais l&#8217;abandon d&#8217;IE6 débloquera un tas de fonctionnalités CSS actuellement délaissées [...]]]></description>
			<content:encoded><![CDATA[<p>Sur Ajaxian, on peut trouver une petite liste des <a href="http://ajaxian.com/archives/10-cool-things-we%E2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant">10 choses les plus cool que nous serons capables d&#8217;appliquer lorsque IE6 ne sera plus</a>.</p>
<p>Essayons de notre côté d&#8217;aller un peu plus loin que cette liste. Lorsque IE6 aura disparu, la nouvelle barrière sera IE7 mais l&#8217;abandon d&#8217;IE6 débloquera un tas de fonctionnalités CSS actuellement délaissées car incompatibles.</p>
<p>En vrac :</p>
<ul>
<li>l&#8217;utilisation du sélecteur CSS fils (&gt;) afin de sélectionner les noeuds immédiatement en-dessous d&#8217;un noeud et non toute sa descendance.</li>
<li>j&#8217;aurais bien dit le sélecteur de noeuds adjacents (+) mais il est un poil buggé sur IE7</li>
<li>le sélecteur par attribut ([attr]) pour sélectionner des noeuds en fonction de la présence d&#8217;un attribut et de sa valeur, idéal pour différencier les éléments INPUT d&#8217;un formulaire (bouton, champs texte, bouton radio, case à cocher, bouton d&#8217;envoi, etc).</li>
<li>la bonne gestion des classes multiples, actuellement un tantinet foireuse sur IE6</li>
<li>le :hover sur n&#8217;importe quoi et pas uniquement sur les liens</li>
<li>:first-child, pour sélectionner le premier fils d&#8217;un noeud</li>
<li>le display:inline-block pour les éléments initialement avec un display:inline</li>
<li>display:list-item</li>
<li>min-width, max-width, min-height, max-height</li>
<li>utilisation correcte du overflow:visible</li>
<li>position:fixed</li>
<li>le sélecteur de précédence (~) permettant de sélectionner un noeud en fonction d&#8217;un noeud qui le précéde. Le sélecteur d&#8217;adjacence (+) implique que le noeud adjacent précéde immédiatement le noeud ciblé alors que le sélecteur de précédence (~) permet d&#8217;avoir des noeuds entre le noeud ciblé et le noeud qui précéde.</li>
</ul>
<p>Bref, plein de <em>nouvelles</em> choses qui nous permettront de nous arracher un peu moins les cheveux. Mais bon, en attendant, vous allez continuer à vous les arracher par poignées, IE6 est encore coriace&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2009/04/27/quand-ie6-ne-sera-plus/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Optimisation de la couche CSS</title>
		<link>http://webdev-fr.com/2009/04/06/optimisation-de-la-couche-css/</link>
		<comments>http://webdev-fr.com/2009/04/06/optimisation-de-la-couche-css/#comments</comments>
		<pubDate>Mon, 06 Apr 2009 10:43:46 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[CSS]]></category>

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

		<category><![CDATA[sélecteurs]]></category>

		<guid isPermaLink="false">http://webdev-fr.com/?p=262</guid>
		<description><![CDATA[Il existe une quantité considérable de règles de bon usage, de trucs, de bidouilles voir même d&#8217;outils professionnels pour optimiser la couche CSS d&#8217;un site.
Néanmoins, une branche de ce domaine qui a été assez peu analysée est l&#8217;impact de l&#8217;utilisation des sélecteurs CSS et surtout la nécessité, ou pas, d&#8217;avoir des règles avec un grand [...]]]></description>
			<content:encoded><![CDATA[<p>Il existe une quantité considérable de règles de bon usage, de trucs, de bidouilles voir même d&#8217;outils professionnels pour optimiser la couche CSS d&#8217;un site.</p>
<p>Néanmoins, une branche de ce domaine qui a été assez peu analysée est l&#8217;impact de l&#8217;utilisation des sélecteurs CSS et surtout la nécessité, ou pas, d&#8217;avoir des règles avec un grand nombre de sélecteurs.</p>
<p>En fait tout a démarré lorsque Dave Hyatt (le Lead Developer de l&#8217;équipe WebKit) a fait remarquer dans <a href="http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942" target="_blank">un commentaire du blog de Shaun Inman</a> que les sélecteurs CSS enfant (comme le caractère espace) étaient à utiliser à la légère car s&#8217;appliquent de droite à gauche et non de gauche à droite.</p>
<blockquote><p><em>The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers. - Dave Hyatt<br />
</em></p></blockquote>
<p>Ce qui fait que, comme le résume <a href="http://blog.archive.jpsykes.com/151/testing-css-performance/" target="_blank">Jon Sykes</a>, la règle suivante :</p>
<pre class="css:nocontrols:nogutter">body table tr td.myTestClass{
  background-color: red;
}</pre>
<p>&#8230;est moins efficace que sa version courte :</p>
<pre class="css:nocontrols:nogutter">.myTestClass{
  background-color: red;
}</pre>
<p>Pourquoi ? Tout simplement parce qu&#8217;avec la première règle, si vous modifiez le DOM cette règle devra probablement être ré-appliquée sur tout le document afin de l&#8217;appliquer à de nouveaux noeuds ou au contraire à ne plus l&#8217;appliquer sur certains noeuds. Alors qu&#8217;avec la seconde règle, la modification du DOM n&#8217;aura un impact que si cette modification consiste à ajouter ou à retirer la classe &#8220;myTestClass&#8221;.</p>
<p>Bref, vouloir faire des règles avec une longue série d&#8217;accesseurs enfant pour cibler exactement l&#8217;élément qui nous intéresse peut s&#8217;avérer couteux sur les performances, il est préférable de donner une classe précise à notre ou nos éléments et de créer une règle qui se base sur cette classe et sur rien d&#8217;autre.</p>
<p>Pour montrer ce coût en performances, Jon Sykes a réalisé plusieurs tests. Son dernier test consiste à créer une page contenant trois niveaux de DIV imbriqués, le niveau le plus profond contient un paragraphe contenant lui-même un lien. Le lien a un ID et une classe générée. Au total, il y a 20.000 liens dans la page.<br />
Il a ensuite cherché à comparer le temps mis pour afficher la page avec les conditions suivantes :</p>
<ul>
<li>aucun style appliqué</li>
<li>un fond rouge pour chaque cellule avec une unique règle qui s&#8217;applique sur la balise A</li>
<li>un fond rouge pour chaque cellule avec des règles ayant uniquement le nom de la classe du lien (20.000 règles)</li>
<li>un fond rouge pour chaque cellule avec des règles utilisant le sélecteur fils (20.000 règles)</li>
<li>un fond rouge pour chaque cellule avec des règles utilisant le sélecteur descendant (20.000 règles)</li>
</ul>
<p>Il obtient les résultats suivants (les pourcentages affichés sont par rapport à l&#8217;affichage sans aucun style) :</p>
<p><!-- #optimisation-results-table td, #optimisation-results-table th {padding:0px 5px;} #optimisation-results-table {font-size:11px;} --></p>
<table id="optimisation-results-table" border="0">
<tbody>
<tr>
<th> </th>
<th class="ff2-col">FF2</th>
<th class="ff3-col">FF3</th>
<th class="safari3-col">Safari3</th>
<th class="ie6-col">IE6</th>
<th class="ie7-col">IE7</th>
</tr>
<tr>
<th>Aucun style</th>
<td>2734</td>
<td>4059</td>
<td>465</td>
<td>916</td>
<td>884</td>
</tr>
<tr>
<th>A {}</th>
<td>2860 (+4%)</td>
<td>4228 (+4%)</td>
<td>480 (+3%)</td>
<td>1037 (+13%)</td>
<td>961 (+8%)</td>
</tr>
<tr>
<th>.classXX</th>
<td>3330 (+21%)</td>
<td>4467 (+10%)</td>
<td>1814 (+298%)</td>
<td>1878 (+104%)</td>
<td>2103 (+137%)</td>
</tr>
<tr>
<th>div div div p a.classXX</th>
<td>3417 (+24%)</td>
<td>4729 (+16%)</td>
<td>3958 (+750%)</td>
<td>3192 (+248%)</td>
<td>3447 (+289%)</td>
</tr>
<tr>
<th>div &gt; div &gt; div &gt; p &gt; a.classXX</th>
<td>3615 (+32%)</td>
<td>4690 (+15%)</td>
<td>3423 (+635%)</td>
<td>2699 (+194%)</td>
<td>2881 (+225%)</td>
</tr>
</tbody>
</table>
<p>Bref, privilégiez les règles avec des sélecteurs courts. Ca risque d&#8217;alourdir votre code HTML avec plus de classes ou d&#8217;ID mais les performances d&#8217;affichage de votre page s&#8217;en sortiront mieux.</p>
<p>Pour lire les articles de Jon Sykes :</p>
<ol>
<li><a href="http://blog.archive.jpsykes.com/151/testing-css-performance/" target="_blank">Testing CSS Performance</a></li>
<li><a href="http://blog.archive.jpsykes.com/152/testing-css-performance-pt-2/" target="_blank">Testing CSS Performance (pt 2)</a></li>
<li><a href="http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/" target="_blank">More CSS Performance Testing (pt 3)</a></li>
</ol>
<h2>Steve Sounders creuse le sujet un peu plus loin</h2>
<p>Les tests de Jon Sykes datent du printemps 2008.</p>
<p><a href="http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/" target="_blank">Récemment (début Mars), Steve Sounders (de l&#8217;équipe Performances de Yahoo!) a creusé le sujet</a>. Il considérait que bien que justes, les tests de Jon Sykes s&#8217;appliquaient à des pages bien trop volumineuses pour représenter la réalité : peu de pages peuvent se vanter d&#8217;aligner un DOM de 60.000 noeuds et de 20.000 règles CSS. Les 10 sites les plus fréquentés ont une moyenne de 923 noeuds sur leur homepage pour 1033 règles.</p>
<p>Les tests de Steve Sounders sont dont légèrement différents de ceux de Jon Sykes : il se limite à 2.000 liens et 2.000 règles CSS (et non plus 20.000) ce qui donne une page avec un DOM de 6.000 noeuds.<br />
Il s&#8217;est également demandé si les résultats pour la page ne contenant aucun style et celle ne contenant qu&#8217;une seule règle sur la balise A n&#8217;avaient pas un gain en performance simplement parce que leur code contient 20.000 lignes de code en moins. Il a donc décidé de rajouter, pour ces deux cas, 2.000 règles CSS (qui ne s&#8217;appliquent sur rien du tout) afin que la taille des codes HTML soit pratiquement la même pour tous les cas de test.</p>
<p>Bref des tests sur un DOM plus réduit et plus proche de la réalité et des cas de tests de même volume.</p>
<p>Ses tests montrent des résultats assez différents de ceux de Jon Sykes, comme le montre son graphique :<br />
<img src="http://stevesouders.com/images/css-selectors-top-ten-2000-color-513x497-revised.jpg" alt="" /></p>
<p>On constate que la plupart des navigateurs conservent des courbes relativement &#8220;planes&#8221;. Comme le dit Steve, sur les principaux navigateurs (IE6&amp;7 + FF3), la différence entre le test sans style et le test avec les sélecteurs fils ou descendants est en moyenne de 20ms et sur la totalité des navigateurs ça monte à une moyenne de 50ms. Donc un résultat difficile à percevoir à l&#8217;oeil nu.</p>
<p>Les résultats de Jon Sykes n&#8217;était donc pas vraiment applicable. Mais pourquoi une telle différence de résultats ?</p>
<p>Pour comprendre ce changement, Steve Sounders (qui est décidément très curieux) a décidé de refaire passer son test sur IE6&amp;7 (ce sont les navigateurs pour lesquels il avait la différence la plus flagrante avec les tests de Jon) en les faisant tourner sur des pages ayant de plus en plus de balise A (et par conséquent de noeuds DOM et de règles CSS). Il a donc commencé avec 1.000 liens et a augmenté jusqu&#8217;à atteindre les 20.000 du test de Jon.</p>
<p>C&#8217;est avec ce test qu&#8217;il a constaté un palier autour de 18.000 noeuds, comme le montre son second graph :<br />
<img src="http://stevesouders.com/images/css-selectors-IE7-colorB-459x330.jpg" alt="" /></p>
<p><strong>En définitive, que devons-nous tirer de ces deux analyses ?</strong><br />
Simplement que la recherche d&#8217;optimisation n&#8217;est finalement pas dans l&#8217;utilisation parcimonieuse des sélecteurs CSS. Dans la plupart des cas le gain sera négligeable et risquerait d&#8217;entraîner une baisse de lisibilité du code pour les développeurs.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2009/04/06/optimisation-de-la-couche-css/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Changement de design</title>
		<link>http://webdev-fr.com/2008/12/02/changement-de-design/</link>
		<comments>http://webdev-fr.com/2008/12/02/changement-de-design/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 18:12:45 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[Non classé]]></category>

		<guid isPermaLink="false">http://webdev-fr.com/?p=217</guid>
		<description><![CDATA[Changement du thème du blog pour adopter un thème (très connu) plus classique pour un blog plutôt que le précédent affichage sous forme de vignette en homepage.
Il reste quelques soucis par rapport aux exemples de code, mon module de coloriage syntaxique est pas très adapté, je vais le changer&#8230;
]]></description>
			<content:encoded><![CDATA[<p>Changement du thème du blog pour adopter un thème (très connu) plus classique pour un blog plutôt que le précédent affichage sous forme de vignette en homepage.</p>
<p>Il reste quelques soucis par rapport aux exemples de code, mon module de coloriage syntaxique est pas très adapté, je vais le changer&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/12/02/changement-de-design/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Reglib : précurseur d&#8217;une nouvelle vague de bibliothèques JavaScript ?</title>
		<link>http://webdev-fr.com/2008/11/24/reglib-precurseur-dune-nouvelle-vague-de-bibliotheques-javascript/</link>
		<comments>http://webdev-fr.com/2008/11/24/reglib-precurseur-dune-nouvelle-vague-de-bibliotheques-javascript/#comments</comments>
		<pubDate>Sun, 23 Nov 2008 23:03:54 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[événements]]></category>

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

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

		<guid isPermaLink="false">http://webdev-fr.com/?p=215</guid>
		<description><![CDATA[Actuellement, lorsque vous souhaitez placer un événement sur certains noeuds particuliers de votre page, par exemple tous les liens ayant une classe particulière, comment cela se passe-t-il ?

d&#8217;abord, vous attendez que le DOM soit complétement chargé afin d&#8217;être certain de ne pas louper certains noeuds supposés recevoir l&#8217;événement
ensuite, vous faites une recherche sur l&#8217;intégralité du [...]]]></description>
			<content:encoded><![CDATA[<p>Actuellement, lorsque vous souhaitez placer un événement sur certains noeuds particuliers de votre page, par exemple tous les liens ayant une classe particulière, comment cela se passe-t-il ?</p>
<ol>
<li>d&#8217;abord, vous attendez que le DOM soit complétement chargé afin d&#8217;être certain de ne pas louper certains noeuds supposés recevoir l&#8217;événement</li>
<li>ensuite, vous faites une recherche sur l&#8217;intégralité du DOM, soit via votre librairie javascript favorite, soit comme un grand avec vos petites patounes, afin de récupérer la liste des noeuds qui correspondent à votre recherche</li>
<li>une fois que vous avez votre collection de noeuds, vous faites une boucle dessus pour tous leur appliquer le même événement, par exemple sur le clic</li>
</ol>
<p>La majorité des développements en JavaScript fonctionnent actuellement de cette manière et les librairies javascript sont conçues sur ce principe.</p>
<p><a href="http://code.google.com/p/reglib/">Reglib</a> va à l&#8217;encontre de ce principe et adopte une approche qu&#8217;on pourrait considérer comme plus efficace et plus intelligente.</p>
<p>Le principe est plutôt simple :</p>
<ol>
<li>le gestionnaire d&#8217;événement est appliqué sur le body et non pas sur les noeuds du DOM qui sont visés (par exemple nos liens qui ont la bonne classe)</li>
<li>lorsque l&#8217;utilisateur clic quelque part (et plus globalement lorsqu&#8217;il déclenche un événement), l&#8217;événement remonte vers le body grâce au mécanisme de propagation des événements,</li>
<li>lorsque le body reçoit l&#8217;événement, il vérifie s&#8217;il n&#8217;a pas une règle associé à la cible initiale de l&#8217;événement, si c&#8217;est le cas, il exécute la fonction associée.</li>
</ol>
<p>Ce fonctionnement a plusieurs avantages non-négligeables :</p>
<ul>
<li>pas besoin d&#8217;attendre le chargement complet du DOM vu qu&#8217;on place le gestionnaire d&#8217;événement directement sur le noeud body, qui est l&#8217;un des premiers créé au chargement de la page</li>
<li>pas de traitement <em>lourd</em> sur l&#8217;initialisation de la page étant donné qu&#8217;on ne boucle pas sur des collections de noeuds auxquels on doit appliquer un gestionnaire d&#8217;événement, on se contente de l&#8217;appliquer sur le body,</li>
<li>inutile de réappliquer le gestionnaire d&#8217;événement lorsqu&#8217;on crée du contenu de façon dynamique, les événements déclenchés par le contenu créé dynamique remonteront eux aussi vers le body donc seront traités correctement,</li>
</ul>
<p>Bon, on peut toutefois noter quelques défauts à ce mécanisme :</p>
<ul>
<li>Tous les événements passent dans la moulinette associée au body pour savoir si leur cible initiale correspond à l&#8217;une des règles placées sur le body et vu la quantité astronomique d&#8217;événements (en particulier ceux générés par les déplacements et les survols de la souris), ça en fait un paquet.</li>
<li>On ne peut pas retirer facilement l&#8217;événement appliqué à un noeud particulier. Par exemple si vous avez un gestionnaire d&#8217;événement basé sur tous les noeuds qui respectent la règle &#8220;a.maClasse&#8221;, autrement dit tous les liens ayant pour classe &#8220;maClasse&#8221;, et que vous souhaitez désactiver l&#8217;événement sur un lien particulier ayant cette classe là (faire en sorte que le clic sur le lien ne marche qu&#8217;une seule fois par exemple), avec la méthode classique il suffit de retirer le gestionnaire d&#8217;événement basé sur le onclick du noeud en question mais avec Reglib, il faut soit faire en sorte que le noeud ne respecte plus la règle placée sur le body (on lui retire sa classe &#8220;maClasse&#8221; mais elle est peut-être nécessaire pour le design ou pour d&#8217;autres événements) soit ajouter une information au noeud pour que le gestionnaire d&#8217;événement ne s&#8217;exécute pas.</li>
</ul>
<p>Quoiqu&#8217;il en soit ce mécanisme de gestion des événements est très prometteur et on peut supposer que les grandes librairies JavaScript vont rapidement proposer des fonctions pour utiliser ce système.</p>
<p><a href="http://blogs.sun.com/greimer/resource/regdemo/example.html">Une petite demo comparant la gestion d&#8217;un widget entre jQuery et Reglib</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/11/24/reglib-precurseur-dune-nouvelle-vague-de-bibliotheques-javascript/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Un simulateur de batterie en JavaScript</title>
		<link>http://webdev-fr.com/2008/11/21/un-simulateur-de-batterie-en-javascript/</link>
		<comments>http://webdev-fr.com/2008/11/21/un-simulateur-de-batterie-en-javascript/#comments</comments>
		<pubDate>Fri, 21 Nov 2008 20:24:57 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

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

		<category><![CDATA[simulateur batterie]]></category>

		<guid isPermaLink="false">http://webdev-fr.com/?p=212</guid>
		<description><![CDATA[Il y a des prouesses qu&#8217;il est nécessaire de saluer&#8230;
Dans le cadre de la conférence &#8220;Web Directions South 2008&#8243; ayant eut lieu à Sydney fin Septembre, Cameron Adams a réalisé un simulateur de batterie pour étayer sa présentation et le résultat est assez sympathique.
Le résultat est visible ici : JS-909.
Côté technique, la prouesse vient du [...]]]></description>
			<content:encoded><![CDATA[<p>Il y a des prouesses qu&#8217;il est nécessaire de saluer&#8230;</p>
<p>Dans le cadre de la conférence <a href="http://www.webdirections.org/resources/panel-javascript-libraries-putting-the-cross-in-cross-browser-compatible/">&#8220;Web Directions South 2008&#8243;</a> ayant eut lieu à Sydney fin Septembre, Cameron Adams a réalisé un <a href="http://www.themaninblue.com/writing/perspective/2008/11/17/">simulateur de batterie</a> pour étayer sa présentation et le résultat est assez sympathique.</p>
<p>Le résultat est visible ici : <a href="http://www.themaninblue.com/experiment/JS-909/">JS-909</a>.</p>
<p>Côté technique, la prouesse vient du fait qu&#8217;il n&#8217;utilise aucune librairie ni aucun code flash : les sons sont situés à la fin du <code>body</code> dans des objets embed et leur exécution est effectuée via l&#8217;interface JavaScript de Quicktime (il est donc nécessaire d&#8217;avoir Quicktime d&#8217;installé pour que cela fonctionne).</p>
<p>L&#8217;intérêt reste limité car à partir d&#8217;un certain nombre de sons le moteur JavaScript commence à peiner mais le résultat reste néanmoins surprenant&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/11/21/un-simulateur-de-batterie-en-javascript/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Le &#8220;Jittering&#8221; : l&#8217;effet dévastateur pour une page web</title>
		<link>http://webdev-fr.com/2008/11/18/le-jittering-leffet-devastateur-pour-une-page-web/</link>
		<comments>http://webdev-fr.com/2008/11/18/le-jittering-leffet-devastateur-pour-une-page-web/#comments</comments>
		<pubDate>Mon, 17 Nov 2008 23:07:35 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[CSS]]></category>

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

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

		<guid isPermaLink="false">http://webdev-fr.com/?p=209</guid>
		<description><![CDATA[Vous ne connaissez peut-être pas le terme de &#8220;CSS Jitter&#8221; même si vous avez probablement déjà croisé ce bug.
Ce phénomène se présente lors d&#8217;une mauvaise utilisation des styles sur les événements de type onMouseOver, par exemple lorsque vous réduisez la taille d&#8217;un élément au moment ou vous le survolez avec la souris : au moment [...]]]></description>
			<content:encoded><![CDATA[<p>Vous ne connaissez peut-être pas le terme de &#8220;CSS Jitter&#8221; même si vous avez probablement déjà croisé ce bug.</p>
<p>Ce phénomène se présente lors d&#8217;une mauvaise utilisation des styles sur les événements de type onMouseOver, par exemple lorsque vous réduisez la taille d&#8217;un élément au moment ou vous le survolez avec la souris : au moment où la souris passe au-dessus de l&#8217;objet, sa taille va réduire si bien que la souris peut potentiellement ne plus être au-dessus de l&#8217;élément donc celui-ci va reprendre sa taille initiale. Mais au moment où il reprend sa taille initiale, la souris se retrouve de nouveau au-dessus donc il va de nouveau être réduit. Bref on va assister à un effet de clignotement très désagréable.</p>
<p>Un exemple concret réalisé par CSS-Tricks : <a href="http://css-tricks.com/examples/CSS-Jitter/">Jitter-Man</a> ! Pour constater le phénomène, il suffit de vous rapprocher du bord du cadre rouge de Jitter-Man&#8230;</p>
<p>Quelques effets qui peuvent provoquer ce phénomène :</p>
<ul>
<li>l&#8217;ajout ou le retrait de gras</li>
<li>les modifications sur les margin ou le padding</li>
<li>les modifications sur la taille des bordures</li>
<li>les modifications sur la hauteur ou la largeur</li>
<li>les modifications sur la hauteur de ligne</li>
</ul>
<p>Bref, l&#8217;essentiel est de faire attention et de placer l&#8217;événement onMouseOver sur quelque chose qui ne va pas voir ses dimensions être modifiées à cause de l&#8217;effet appliqué.</p>
<p>Source de l&#8217;article : <a href="http://css-tricks.com/avoid-css-jitter/">CSS-Tricks</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/11/18/le-jittering-leffet-devastateur-pour-une-page-web/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Compatibilité entre les navigateurs ou design dégradé ?</title>
		<link>http://webdev-fr.com/2008/11/18/compatibilite-entre-les-navigateurs-ou-design-degrade/</link>
		<comments>http://webdev-fr.com/2008/11/18/compatibilite-entre-les-navigateurs-ou-design-degrade/#comments</comments>
		<pubDate>Mon, 17 Nov 2008 22:47:47 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[border-radius]]></category>

		<category><![CDATA[box-shadow]]></category>

		<category><![CDATA[coins arrondis]]></category>

		<category><![CDATA[CSS 3]]></category>

		<guid isPermaLink="false">http://webdev-fr.com/?p=206</guid>
		<description><![CDATA[Cet article de CSS Globe aborde un sujet très pertinent : doit-on s&#8217;efforcer d&#8217;avoir d&#8217;avoir une compatibilité totale entre tous les navigateurs (du moins les majeurs) ou bien au contraire devons-nous utiliser au maximum le potentiel des navigateurs récents tout en s&#8217;assurant que l&#8217;interface des plus anciens s&#8217;affiche correctement, même si son design est moins [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://cssglobe.com/post/3181/100-css-compatibility-or-degrade-correctly">Cet article de CSS Globe</a> aborde un sujet très pertinent : doit-on s&#8217;efforcer d&#8217;avoir d&#8217;avoir une compatibilité totale entre tous les navigateurs (du moins les majeurs) ou bien au contraire devons-nous utiliser au maximum le potentiel des navigateurs récents tout en s&#8217;assurant que l&#8217;interface des plus anciens s&#8217;affiche correctement, même si son design est moins riche ?</p>
<p>L&#8217;exemple le plus parlant pour illustrer cette opposition est la mise en place de coins arrondis sur un bloc.<br />
Pour avoir une compatibilité entre les navigateurs, il faut mettre en place une méthode parmi la multitude des solutions qui s&#8217;offrent à nous mais quelque soit la méthode appliquée, cela reste une méthode lourde et illogique à partir du moment où une notion de design (les coins arrondis) a un impact sur le markup de la page (et encore plus si les balises html nécessaires pour les coins arrondis sont générées par du JavaScript) ainsi que sur la maintenance de la page.</p>
<p>D&#8217;un autre côté, la méthode dégradée élégante consiste à utiliser le potentiel des CSS 3 en appliquant les coins arrondis via les propriétés <code>border-radius</code> ou <code>box-shadow</code>. Sur les navigateurs ne gérant pas ces propriétés, notre bloc reste carré donc potentiellement moins joli. Cela dit, peut-être qu&#8217;avoir un site moins joli que chez les autres incitera les utilisateurs à se tourner vers les dernières versions de leur navigateur&#8230;</p>
<p>Oui, oui, je vous l&#8217;accorde, les propriétés CSS 3 ont elles aussi leurs limitations pour faire des coins arrondis : ça reste des quarts de cercle de couleur unie alors qu&#8217;avec des images placées dans les angles, on a plus de potentiel mais il ne faut pas oublier qu&#8217;il existe d&#8217;autres propriétés CSS 3 nous permettant de placer plusieurs images de fond sur un bloc donc cet argument ne tient pas.</p>
<p>Les navigateurs évoluent mais les web designers restent bloqués sur les mêmes techniques. Ca pour maîtriser les failles d&#8217;IE6, on peut dire qu&#8217;elles sont maîtrisées mais ce nivellement par le bas a un impact sur les performances des sites et bride leur design&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/11/18/compatibilite-entre-les-navigateurs-ou-design-degrade/feed/</wfw:commentRss>
		</item>
		<item>
		<title>L&#8217;héritage en JavaScript</title>
		<link>http://webdev-fr.com/2008/11/12/heritage-en-javascript/</link>
		<comments>http://webdev-fr.com/2008/11/12/heritage-en-javascript/#comments</comments>
		<pubDate>Wed, 12 Nov 2008 10:32:08 +0000</pubDate>
		<dc:creator>Loïc</dc:creator>
		
		<category><![CDATA[HTML5]]></category>

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

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

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

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

		<category><![CDATA[héritage]]></category>

		<category><![CDATA[object-oriented javascript]]></category>

		<category><![CDATA[programmation orientée objet]]></category>

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

		<category><![CDATA[stoyan stefanov]]></category>

		<guid isPermaLink="false">http://webdev-fr.com/?p=151</guid>
		<description><![CDATA[Dans son livre Object-Oriented JavaScript, Stoyan Stefanov propose pas moins de 12 méthodes pour mettre en place de l&#8217;héritage en JavaScript.
Nous allons reprendre ces méthodes une à une afin d&#8217;en lister les avantages et les inconvénients&#8230; Nous allons réutiliser l&#8217;exemple de Stoyan pour montrer la syntaxe de chaque méthode : son exemple consiste à mettre [...]]]></description>
			<content:encoded><![CDATA[<p>Dans son livre <a href="http://www.amazon.fr/Object-Oriented-JavaScript-Stoyan-Stefanov/dp/1847194141/ref=sr_1_6?ie=UTF8&amp;s=english-books&amp;qid=1226328033&amp;sr=8-6"><em>Object-Oriented JavaScript</em></a>, Stoyan Stefanov propose pas moins de 12 méthodes pour mettre en place de l&#8217;héritage en JavaScript.</p>
<p>Nous allons reprendre ces méthodes une à une afin d&#8217;en lister les avantages et les inconvénients&#8230; Nous allons réutiliser l&#8217;exemple de Stoyan pour montrer la syntaxe de chaque méthode : son exemple consiste à mettre en place un héritage entre trois classes <code>FormeGeometrique</code>, <code>FormeGeometrique2D</code> et <code>Triangle</code>.</p>
<p>Cet article est divisé en de nombreuses pages, chaque page traitant une méthode d&#8217;héritage différente.</p>
<ul>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=2">Chaînage de prototype</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=3">Héritage des propriétés partagées uniquement</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=4">Utilisation d’un constructeur temporaire</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=5">Héritage par copie de propriétés</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=6">Copie en Surface</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=7">Copie en profondeur</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=8">Héritage par prototypage</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=9">Mélange d’héritage par prototype et de copie de propriétés</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=10">Héritage multiple</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=11">Héritage par Parasitage</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=12">Emprunt de constructeur</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=13">Emprunt de constructeur et copie de son prototype</a></li>
<li><a href="http://webdev-fr.com/2008/11/12/heritage-en-javascript/?page=14">Conclusion</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://webdev-fr.com/2008/11/12/heritage-en-javascript/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
