<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2enclosuresfull.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:media="http://search.yahoo.com/mrss/" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">

<channel>
	<title>Développeur web paris</title>
	
	<link>http://www.mehdicolin.com</link>
	<description>Mehdi Colin</description>
	<lastBuildDate>Mon, 19 Mar 2012 21:44:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/mehdicolin" /><feedburner:info xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" uri="mehdicolin" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><itunes:explicit>no</itunes:explicit><itunes:subtitle>Mehdi COLIN</itunes:subtitle><itunes:summary>Suivez via ce flux rss ma veille en terme de SEO, culture web et autres...</itunes:summary><item>
		<title>Autoload en php</title>
		<link>http://www.mehdicolin.com/ressources/autoload-en-php</link>
		<comments>http://www.mehdicolin.com/ressources/autoload-en-php#comments</comments>
		<pubDate>Mon, 19 Mar 2012 21:44:44 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[php]]></category>
		<category><![CDATA[Ressources]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=484</guid>
		<description><![CDATA[Si vous faites du php et que vous travaillez en objet, voici une petite astuce qui pourra vous être utile. Imaginons que vous ayez un fichier index.php à la racine de votre projet, dans lequel, vous allez utiliser des instances de classes situées dans un repertoire classes. Le code du fichier index.php serait quelque chose [...]]]></description>
			<content:encoded><![CDATA[<p>Si vous faites du php et que vous travaillez en objet, voici une petite astuce qui pourra vous être utile.</p>
<p>Imaginons que vous ayez un fichier index.php à la racine de votre projet, dans lequel, vous allez utiliser des instances de classes situées dans un repertoire <strong>classes</strong>.</p>
<p>Le code du fichier index.php serait quelque chose du type :</p>
<div class="codecolorer-container php twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
<br />
<span style="color: #b1b100;">require_once</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'classes/Maclass.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$objet</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Maclass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>Ah j&#8217;ai créé une nouvelle classe et je souhaite l&#8217;implémenter dans mon fichier !<br />
Facile&#8230;</p>
<div class="codecolorer-container php twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span><br />
<br />
<span style="color: #b1b100;">require_once</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'classes/Maclass.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #b1b100;">require_once</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'classes/MaDeuxiemeclass.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<br />
<span style="color: #000088;">$objet</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Maclass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #000088;">$deuxiemeObjet</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> MaDeuxiemeclass<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>C&#8217;est contraignant quand même, il faut toujours penser à faire un require du fichier où se trouve la classe !<br />
Ce serait bien si dès que j&#8217;écrit &laquo;&nbsp;new Class&nbsp;&raquo;, Php implémente automatiquement le fichier qui correspond.</p>
<p>Et bien la solution existe grâce à la fonction <strong>__autoload()</strong></p>
<div class="codecolorer-container php twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br /></div></td><td><div class="php codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <br />
<br />
<span style="color: #666666; font-style: italic;">//Le code magique à mettre au début du fichier</span><br />
<span style="color: #000000; font-weight: bold;">function</span> __autoload<span style="color: #009900;">&#40;</span><span style="color: #000088;">$className</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><br />
<span style="color: #b1b100;">require_once</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'classes/'</span><span style="color: #339933;">.</span><span style="color: #000088;">$className</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><br />
<span style="color: #009900;">&#125;</span><br />
<br />
<span style="color: #000088;">$obj1</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Truc<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// le fichier classes/Truc.php sera appelé</span><br />
<span style="color: #000088;">$obj2</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Bidule<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// le fichier classes/Bidule.php sera appelé</span></div></td></tr></tbody></table></div>
<p>Bien sûr pour que cela fonctionne il faut appeler le fichier comme la classe.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ressources/autoload-en-php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Règles d’optimisation de page web</title>
		<link>http://www.mehdicolin.com/referencement/regles-doptimisation-de-page-web</link>
		<comments>http://www.mehdicolin.com/referencement/regles-doptimisation-de-page-web#comments</comments>
		<pubDate>Thu, 15 Mar 2012 18:20:25 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Référencement]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=440</guid>
		<description><![CDATA[Bien sûr le SEO est tout un art, mais je suis tombé sur cette infographie qui me semble intéressante pour avoir des premières bases d&#8217;optimisation, parce qu&#8217;une image vaut parfois mieux qu&#8217;un long discours&#8230;]]></description>
			<content:encoded><![CDATA[<p>Bien sûr le SEO est tout un art, mais je suis tombé sur cette infographie qui me semble intéressante pour avoir des premières bases d&#8217;optimisation, parce qu&#8217;une image vaut parfois mieux qu&#8217;un long discours&#8230;<span id="more-440"></span></p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-442" title="SEO notions" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/ref.jpg" alt="" width="500" height="1488" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/referencement/regles-doptimisation-de-page-web/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ressources UI pour photoshop</title>
		<link>http://www.mehdicolin.com/ressources/ressources-ui-pour-photoshop</link>
		<comments>http://www.mehdicolin.com/ressources/ressources-ui-pour-photoshop#comments</comments>
		<pubDate>Wed, 14 Mar 2012 20:07:29 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ressources]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=413</guid>
		<description><![CDATA[Ce qui est bien aujourd&#8217;hui, c&#8217;est que même si l&#8217;on n&#8217;y connait rien ou presque en webdesign, avec le flux de ressources que l&#8217;on peut retrouver sur internet, on peut facilement avoir une interface agréable. Dans ce billet, je vous ai sélectionné des ressources UI (user interface) trouvé à droite à gauche pour vous faire gagner du [...]]]></description>
			<content:encoded><![CDATA[<p>Ce qui est bien aujourd&#8217;hui, c&#8217;est que même si l&#8217;on n&#8217;y connait rien ou presque en webdesign, avec le flux de ressources que l&#8217;on peut retrouver sur internet, on peut facilement avoir une interface agréable.<br />
Dans ce billet, je vous ai sélectionné des ressources UI (user interface) trouvé à droite à gauche pour vous faire gagner du temps dans l&#8217;élaboration de vos sites web. Bien sûr tout ce contenu est gratuit !<span id="more-413"></span></p>
<p>Cliquez sur l&#8217;image que vous voulez pour accéder à la ressource correspondante.</p>
<p><a href="http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/" target="_blank"><img class="alignnone size-thumbnail wp-image-414" title="1130PSDUIkitbalio[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/1130PSDUIkitbalio1-150x150.jpg" alt="BALIO WEB UI KIT" width="150" height="150" /></a> <a href="http://www.webdesignerdepot.com/2012/01/free-download-balio-web-ui-kit/" target="_blank"><img class="alignnone size-thumbnail wp-image-415" title="89kitUIcontrolbuttons[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/89kitUIcontrolbuttons1-150x150.jpg" alt="PSD KIT D’INTERFACE UTILISATEUR &amp; ASSORTIMENT DE BOUTONS" width="150" height="150" /></a> <a href="http://www.webdesignerdepot.com/2012/03/free-download-aresio-web-ui-kit/" target="_blank"><img class="alignnone size-thumbnail wp-image-416" title="aresio_ui_kit[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/aresio_ui_kit1-150x150.jpg" alt="Aresio Web UI Kit" width="150" height="150" /></a> <a href="http://medialoot.com/item/clean-download-buttons/" target="_blank"><img class="alignnone size-thumbnail wp-image-417" title="640x440_Clean_Download_Buttons_Preview1[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/640x440_Clean_Download_Buttons_Preview11-150x150.jpg" alt="Clean Download Buttons " width="150" height="150" /></a> <a href="http://365psd.com/day/2-263/" target="_blank"><img class="alignnone size-thumbnail wp-image-418" title="UI-3[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/UI-31-150x150.jpg" alt="Mulit-Colored UI Elements  " width="150" height="150" /></a> <a href="http://365psd.com/day/2-297/" target="_blank"><img class="alignnone size-thumbnail wp-image-419" title="switchesfull[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/switchesfull1-150x150.png" alt="Toggle Switch PSD  " width="150" height="150" /></a> <a href="http://www.launchedpixels.com/article-18-wood-social-buttons-and-thumbnail-psd/" target="_blank"><img class="alignnone size-thumbnail wp-image-420" title="freebie-18-full[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/freebie-18-full1-150x150.png" alt="Boutons en bois" width="150" height="150" /></a> <a href="http://www.launchedpixels.com/article-17-facebook-and-twitter-button-psd/" target="_blank"><img class="alignnone size-thumbnail wp-image-421" title="freebie-17-full[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/freebie-17-full1-150x150.png" alt="Boutons sociaux" width="150" height="150" /><br />
</a><a href="http://www.graphicsfuel.com/2011/05/login-form-psd/" target="_blank"><img class="alignnone size-thumbnail wp-image-422" title="login-form-psd[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/login-form-psd1-150x150.jpg" alt="Login form PSD" width="150" height="150" /></a> <a href="http://www.graphicsfuel.com/2012/03/3d-download-buttons-psd/" target="_blank"><img class="alignnone size-thumbnail wp-image-423" title="3d-download-buttons[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/3d-download-buttons1-150x150.jpg" alt="3D download buttons (PSD)" width="150" height="150" /></a> <a href="http://www.grafikart.fr/ressources/photoshop/tchat-tablet-psd-20" target="_blank"><img class="alignnone size-thumbnail wp-image-424" title="20_940x390[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/20_940x3901-150x150.jpg" alt="PSD tablet tchat" width="150" height="150" /></a> <a href="http://www.grafikart.fr/ressources/photoshop/slider-budget-18" target="_blank"><img class="alignnone size-thumbnail wp-image-425" title="18[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/181-150x150.jpg" alt="Slider de Budget" width="150" height="150" /></a></p>
<p>Voilà pour cette petite sélection loin d&#8217;être exhaustive, je vous laisse le soin de suivre les sources liées ci-dessous pour plus de ressources ! C&#8217;est dans tous les cas incroyables d&#8217;avoir une telle abondance de ressources.</p>
<p><strong>Sources :</strong></p>
<ul>
<li><a href="http://www.webdesignerdepot.com">webdesignerdepot.com</a></li>
<li><a href="http://www.medialoot.com">medialoot.com</a></li>
<li><a href="http://www.launchedpixels.com">launchedpixels.com</a></li>
<li><a href="http://www.graphicsfuel.com">graphicsfuel.com</a></li>
<li><a href="http://www.grafikart.fr">grafikart.fr</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ressources/ressources-ui-pour-photoshop/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Comment faciliter la lecture d’un texte</title>
		<link>http://www.mehdicolin.com/ergonomie/comment-faciliter-la-lecture-dun-texte</link>
		<comments>http://www.mehdicolin.com/ergonomie/comment-faciliter-la-lecture-dun-texte#comments</comments>
		<pubDate>Tue, 13 Mar 2012 20:01:58 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ergonomie]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=377</guid>
		<description><![CDATA[Le texte se justifie-t-il dans le web ? Lorsque que l’on crée un site web, on fait une belle maquette (du moins on essaye), et on y place des zones de texte. On est vite tentés de justifier le texte de manière à ce qu’il s’adapte au pixel près à notre maquette, pour moi c’était [...]]]></description>
			<content:encoded><![CDATA[<h2>Le texte se justifie-t-il dans le web ?</h2>
<p>Lorsque que l’on crée un site web, on fait une belle maquette (du moins on essaye), et on y place des zones de texte.<br />
On est vite tentés de justifier le texte de manière à ce qu’il s’adapte au pixel près à notre maquette, pour moi c’était devenu mécanique.<br />
Je ne m’étais jamais posé la moindre question.<span id="more-377"></span></p>
<p>Puis un jour un <a href="http://www.christophenicaud.com/" target="_blank">collègue côté webdesign</a> me dit « oulah attention avec le texte justifié ! », j’ai donc décidé de voir ce que disaient les ergonomes sur ce point.<br />
Et je suis tombé de haut en apprenant que ce réflexe adopté était en réalité à utiliser avec parcimonie.</p>
<h2>Quand j’ouvre un magazine, c’est justifié de partout pourtant !</h2>
<p>Ce qu’il faut bien comprendre c’est que le système de justification de nos navigateurs est très rudimentaire, rien à voir avec des logiciels de PAO qui gèrent le texte de manière incroyablement sophistiquée.</p>
<p>Voyez plutôt</p>
<p>&nbsp;</p>
<p><a href="http://www.mehdicolin.com/wp-content/uploads/2012/03/texte_justifie1.png"><img class="alignnone size-full wp-image-378 aligncenter" title="texte_justifie[1]" src="http://www.mehdicolin.com/wp-content/uploads/2012/03/texte_justifie1.png" alt="" width="480" height="303" /></a><br />
A gauche le texte est justifié, si esthétiquement cela vous paraît plus sympa,  vous allez très vite vous rendre compte que c’est moins agréable à lire que le texte de droite.<br />
Cela s’explique très simplement, étant donné que l’on ne coupe aucun mot dans le texte d’une page web, on fait varier l’espacement entre les mots pour garder une largeur fixe, seulement c’est fatigant pour l’œil.<br />
De ce que j’ai pu lire d’ergonomes sur internet (voir sources plus bas), des études d’eye-tracking viennent confirmer cela, bien que je n’ai pas retrouvé le lien d’une étude en particulier (d’ailleurs si quelqu’un en aurait un, je serais curieux de le voir).</p>
<h2>Ok, le texte justifié on oublie !</h2>
<p>Mais non, Comme je l’ai dit c’est à utiliser avec parcimonie, mais pas à proscrire ! On se rend compte que lorsque la largeur d’un texte n’est ni trop longue ni trop faible, même en le justifiant, les espaces entre les mots sont à peu près homogènes.</p>
<p>&nbsp;</p>
<blockquote><p>&#8230;Plus la ligne est longue et plus petits sont les défauts puisque les blancs sont mieux répartis entre les mots. Mais il ne faudrait pas tomber dans l&#8217;extrême inverse, à savoir des lignes interminables. Après quelques tests, il semble que la limite soit atteinte à 500 pixels de large. La composition donne un rendu soigné et agréable. Elle ne souffre pas de l&#8217;effet accordéon et les espaces dans le texte sont raisonnables. La lisibilité n&#8217;en est pas trop affectée puisque le travail de l&#8217;oeil pour revenir en début de ligne n&#8217;est pas trop long.</p></blockquote>
<p><strong>Source :</strong> <a href="http://www.ergologique.com/conseils/conseils.php?id_tip=818" target="_blank">www.ergologique.com</a></p>
<p>&nbsp;</p>
<h2>Qu’en est-il des autres types d’alignements ?</h2>
<p><strong>L’alignement à Gauche</strong><br />
Ou aussi appelé texte en drapeau du fait de ses irrégularités, est le plus courant et ce qu’il y a de plus adapté pour faciliter la lecture. Je vous le conseille pour du contenu rédactionnel (comme l’article que vous lisez actuellement).</p>
<p><strong>L’alignement à droite<br />
</strong>Si le texte est marqué sur la droite, puisque nous lisons de gauche à droite, l’œil tente de se repositionné sur la gauche à chaque retour à la ligne, il rend donc la lecture très difficile. Il est à proscrire de tout contenu rédactionnel, alors n’ayez surtout pas la folle idée d’écrire des articles alignés sur la droite ! Néanmoins, pour quelques lignes de compléments que l’on veut séparer du reste du contenu, pourquoi pas ?</p>
<p><strong>L’alignement centré</strong><br />
Marqué ni à gauche ni à droite, il rend aussi la lecture difficile, il peut néanmoins être utilisé pour les titres, ou de manière anecdotique pour donner un effet particulier (par exemple une invitation sur une newsletter).</p>
<p>En conclusion si tout type d’alignement peut trouver son utilité, même sur internet, lorsque vous n’alignez pas votre texte à gauche, posez-vous la question de la pertinence de ce choix.</p>
<p><strong>Sources :</strong></p>
<ul>
<li><a href="http://www.ergologique.com/conseils/conseils.php?id_tip=818" target="_blank">ergologique.com</a></li>
<li><a href="http://blogtoolbox.fr/faut-il-justifier-le-texte-sur-son-blog/" target="_blank">blogtoolbox.fr</a></li>
<li><a href="http://www.tutoweb.be/typographie/alignement-texte/" target="_blank">tutoweb.be</a></li>
<li><a href="http://www.ergolab.net" target="_blank">ergolab.net</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ergonomie/comment-faciliter-la-lecture-dun-texte/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Psd gratuit</title>
		<link>http://www.mehdicolin.com/ressources/psd-gratuit</link>
		<comments>http://www.mehdicolin.com/ressources/psd-gratuit#comments</comments>
		<pubDate>Tue, 07 Feb 2012 20:18:07 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ressources]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=292</guid>
		<description><![CDATA[Vous en voulez du psd gratuit ? C&#8217;est ici que ça se passe ! Il existe pas mal de site proposant des psd gratuitements , grâce à twitter vous n&#8217;avez qu&#8217;à suivre PsdBot et il cherche pour vous ! Ce dernier vous enverra à un rythme assez soutenu des liens vers des psd à réutiliser [...]]]></description>
			<content:encoded><![CDATA[<p>Vous en voulez du psd gratuit ? C&#8217;est ici que ça se passe !</p>
<p><span id="more-292"></span></p>
<p>Il existe pas mal de site proposant des psd gratuitements , grâce à twitter vous n&#8217;avez qu&#8217;à suivre PsdBot et il cherche pour vous !</p>
<p>Ce dernier vous enverra à un rythme assez soutenu des liens vers des psd à réutiliser pour vos créations, il se tient informé par divers sites proposant des ressources, mais surveille et retweet également des ressources proposés par d&#8217;autres utilisateurs de twitter.</p>
<p>A tester !</p>
<p>Suivez <a href="https://twitter.com/psdbot" target="_blank">@PsdBot</a> pour ce faire.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ressources/psd-gratuit/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Classe de système de cache en php</title>
		<link>http://www.mehdicolin.com/ressources/class-de-systeme-de-cache-en-php</link>
		<comments>http://www.mehdicolin.com/ressources/class-de-systeme-de-cache-en-php#comments</comments>
		<pubDate>Sat, 04 Feb 2012 16:03:35 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ressources]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=259</guid>
		<description><![CDATA[Un système de cache vous permettra de créer un site web dynamique qui peut gérer facilement une grosse charge. Et cela en capitalisant sur des économies de requêtes trop souvent inutiles ! Le temps de chargement économisé est proportionnel au trafic de votre site ! Comment ça marche ? Prenons comme un exemple un blog, on va faire [...]]]></description>
			<content:encoded><![CDATA[<p>Un système de cache vous permettra de créer un site web dynamique qui peut gérer facilement une grosse charge. Et cela en capitalisant sur des économies de requêtes trop souvent inutiles ! Le temps de chargement économisé est proportionnel au trafic de votre site !</p>
<p><span id="more-259"></span></p>
<h2>Comment ça marche ?</h2>
<p>Prenons comme un exemple un blog, on va faire au plus simple, vous avez des articles dans une base de données, et vous avez une page index.php qui liste les articles. Imaginons que vous postez en moyenne 1 article par jour. Sans système de cache, vous allez avoir dans votre page php des requêtes qui vont interroger votre base pour y extraire les informations dont vous avez besoin et générer dynamiquement un fichier html affichant tout cela. Tout ce qui y  a de plus normal on pourrait se dire. Euh attendez une seconde ! Vous n’envoyez qu’un article par jour ? C’est-à-dire que si vous poussez votre article à 7h du matin, on génère pour le premier visiteur une page html à jour, et pour tous les autres visiteurs on réinterroge  encore la base  … alors même que l’on sait que la page générée sera toujours la même 0_0. Vous avez 1000 visites par jour sur votre page, votre page exécute 3 requêtes, vous interrogez donc votre base 3 000 fois alors qu’en réalité il n’est nécessaire de l’interroger que 3 fois, une seule fois, mais pour tout le monde. On se rend vite compte que même si on a des requêtes de la mort qui tue optimisées à fond, bah si on les fait pour rien c’est tout de même un gros gaspillage.</p>
<h2>En pratique comment cela s’intègre ?</h2>
<p>Je vous ai convaincu qu’utiliser un système de cache sur vos sites web ça rox du poney ! Mais euh comment qu’on fait ? C’est du moins la question que je me suis posé il y a peu et en réalité je me suis fait une petite classe simple d’utilisation que vous allez pouvoir télécharger en fin d’article. Et l’intégrer facilement à vos sites.  Mais bon je pense que vous avez peut-être envie de savoir ce qui se passe derrière et puis vous avez peut-être pas envie d’utiliser ma classe parce que vous trouvez que mon code pue du *** et vous voulez le faire vous-même. Il n’y a rien de compliqué, j’arrive sur ma page php comme d’habitude. Je définis le nom sous lequel cette page sera enregistrée en cache, et je dis ceci :</p>
<ul>
<li>Si cette page a déjà généré un html dans le cache, et que celui-ci est à jour :Je vous affiche la page en cache.</li>
<li>Sinon, la page n’existe pas encore dans le cache, ou alors elle est trop vielle donc il faut la régénérer.</li>
<li>Ici je mets le code de ma page normalement</li>
<li>Et là j’enregistre ce que génère le code de la page dans une variable, j’enregistre tout ce contenu dans le dossier cache dans le fichier associé.</li>
</ul>
<p>Ainsi la prochaine fois que cette page sera généré on nous enverra le cache et il n’y aura pas besoin de régénérer la page (encore une fois, c’est magique !). Comme vous pouvez le voir, il n’y a là rien de bien extraordinaire, et vous allez voir que ma classe est pas bien compliquée mais alors du tout ! C’est pourquoi je suis tombé des nues dès que j’ai su qu’un système aussi simple existait et qu’il n’était pas tant utilisé que cela. <strong>Info pratique : </strong>Vous vous demandez peut-être : Mais comment savoir si notre page du cache est à jour ? Il s’agit simplement de dire que si ma page du cache a plus de X temps, alors on considère qu’elle est obsolète et on la régénère. Dans ma classe j’ai défini par défaut que le cache doit se régénérer une fois par jour. Oui, mais si en général je ne fais qu’une mise à jour et qu’aujourd’hui exceptionnellement j&#8217;fais une deuxième, moi je n’ai pas envie d’attendre demain pour le voir ! Vous n’avez qu’à supprimer manuellement la page correspondante du cache pour forcer la mise à jour, vous pouvez aussi dans votre interface d’administration créer un bouton « vider le cache » qui aura pour effet de nettoyer le dossier cache, et ainsi forcer à tout moment la mise à jour du site.</p>
<h2>Craches ton code !</h2>
<p>Vous comprenez l’utilité du système de code, vous comprenez la logique algorithmique, c’est parfait il n’y a plus qu’à coder, je vous propose de découvrir mon code et de l’utiliser s’il vous satisfait. <strong>La classe (cliquez pour agrandir) :</strong></p>
<p><a href="http://www.mehdicolin.com/wp-content/uploads/2012/02/class.png" target="_blank"><img class="alignnone size-full wp-image-265" title="Code de la classe de gestion de cache" src="http://www.mehdicolin.com/wp-content/uploads/2012/02/class.png" alt="Code de la classe de gestion de cache" width="535" /></a></p>
<p><strong>Utilisation (cliquez pour agrandir) :</strong></p>
<p><strong> </strong> <a href="http://www.mehdicolin.com/wp-content/uploads/2012/02/use.png" target="_blank"><img class="alignnone size-full wp-image-266" title="Utilisation de la classe de gestion de cache" src="http://www.mehdicolin.com/wp-content/uploads/2012/02/use.png" alt="Utilisation de la classe de gestion de cache" width="535" /><br />
</a></p>
<p><strong>Télécharger : </strong> <a href="http://www.mehdicolin.com/wp-content/uploads/2012/02/cache.zip">Système de gestion de cache php</a></p>
<h2>Petite astuce sécurité :</h2>
<p>Les fichiers générés seront en libre accès dans le dossier cache, un petit .htaccess contenant <strong>Deny from all </strong>vous permettra d’empêcher les petits malins de parcourir ce dossier cache directement au cas où celui-ci contient des données sensibles<strong></strong></p>
<h2>Faire face aux éventuels problèmes d’utilisation</h2>
<p>Si vous avez dans votre page des données qui varient beaucoup dans le temps, vous avez la possibilité de rendre dynamique une zone du cache de deux manières … <strong>Premier cas : un petit texte dynamique</strong> Vous avez un message <strong>Bonjour Pseudo</strong> qui s’affiche sur toute les pages, vous pouvez enregistrer dans le html du cache le message sous la forme bonjour <strong>&lt;%PSEUDO%&gt;.</strong> Afficher le cache en remplaçant <strong>&lt;%PSEUDO%&gt;</strong> par ce que vous souhaitez sans avoir à requêter pour tout le reste. <strong>Deuxième cas : une zone dynamique</strong> Vous avez une page article avec un espace commentaires qui peut bouger à tout moment dans le temps. La première méthode marche toujours mais vous pouvez aussi générer l’affichage de cette <strong>zone en ajax</strong>, le javascript s’exécutant coté client, il n’y a aucun problème. Et coté utilisateur c’est un plus ergonomique car on évite les chargements de pages inutiles. <strong>Astuce : </strong>Dans le bloc où les commentaires seront affichés via javascript, mettez tout de même dans le cache les commentaires publiés à l’heure de la mise en cache, ainsi les moteurs de recherche pourront tout de même lire ceux-ci, eux les verront en décalé mais ce n’est pas bien grave. <strong>Troisième cas : Toutes les zones de la page peuvent bouger à n’importe quel moment</strong>Vous avez un forum actif, ça poste à tout moment et dans tous les sens sans parler des variables utilisateurs affichées un peu partout selon la personne chez qui l’on se connecte. Oubliez les caches ! Dans ce genre de cas, se forcer à intégrer partiellement du cache risque de vous donner des migraines et d’avoir des effets de bords sans pour autant alléger (ou très peu) les exécutions des pages.</p>
<h2>Amélioration possible</h2>
<p>Je vous ai donné une classe toute bête toute simple. Libre à vous de l’améliorer notamment en lui créant une classe mère pour gérer les caches de manière massive, avec des méthodes telle que « clearCaches » . Des méthodes pour vider un cache en particulier etc&#8230; Si vous avez des idées brillantes n’hésitez pas à les proposer par le biais du module de commentaires ci-dessous, j’essayerai de mettre cet article à jour en fonction. Sinon si vous trouvez que je dis des choses intéressante par moment, n’hésitez pas à me suivre sur twitter <a href="https://twitter.com/mehdicolin">https://twitter.com/mehdicolin</a> (bah quoi, n’ai-je pas le droit de faire ma pub ? :D)</p>
<p><strong>Ils en parlent aussi :</strong> <a href="http://www.siteduzero.com/tutoriel-3-31906-comprendre-et-utiliser-un-systeme-de-cache-php.html">http://www.siteduzero.com/tutoriel-3-31906-comprendre-et-utiliser-un-systeme-de-cache-php.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ressources/class-de-systeme-de-cache-en-php/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<enclosure url="http://www.mehdicolin.com/wp-content/uploads/2012/02/cache.zip" length="1497" type="application/zip" /><media:content url="http://www.mehdicolin.com/wp-content/uploads/2012/02/cache.zip" fileSize="1497" type="application/zip" /><itunes:explicit>no</itunes:explicit><itunes:subtitle>Un système de cache vous permettra de créer un site web dynamique qui peut gérer facilement une grosse charge. Et cela en capitalisant sur des économies de requêtes trop souvent inutiles ! Le temps de chargement économisé est proportionnel au trafic de vo</itunes:subtitle><itunes:summary>Un système de cache vous permettra de créer un site web dynamique qui peut gérer facilement une grosse charge. Et cela en capitalisant sur des économies de requêtes trop souvent inutiles ! Le temps de chargement économisé est proportionnel au trafic de votre site ! Comment ça marche ? Prenons comme un exemple un blog, on va faire [...]</itunes:summary><itunes:keywords>Ressources, slideshow</itunes:keywords></item>
		<item>
		<title>Environnement de développement Php</title>
		<link>http://www.mehdicolin.com/non-classe/environnement-de-developpement-php</link>
		<comments>http://www.mehdicolin.com/non-classe/environnement-de-developpement-php#comments</comments>
		<pubDate>Tue, 01 Nov 2011 19:47:56 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Inclassable]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=197</guid>
		<description><![CDATA[Vous avez mangé du html, du css, du php, du javascript&#8230; Techniquement vous êtes enfin incollables et prêts pour vous lancer dans de gros projets ! Fini le temps ou vous faisiez deux trois scripts qui tiennent sur trois/quatre pages, vous avez une grosse idée en tête et c&#8217;est le moment de se lancer ! [...]]]></description>
			<content:encoded><![CDATA[<p>Vous avez mangé du html, du css, du php, du javascript&#8230; Techniquement vous êtes enfin incollables et prêts pour vous lancer dans de gros projets ! Fini le temps ou vous faisiez deux trois scripts qui tiennent sur trois/quatre pages, vous avez une grosse idée en tête et c&#8217;est le moment de se lancer !</p>
<p>Cet article est fait pour vous, ici deux trois petites choses sur la gestion de projet pour ne pas couler sous des tonnes de lignes de code imbuvable. Tout d&#8217;abord, pour une meilleure productivité je vous conseille vivement de travailler en local (<strong>wampserver</strong> est très bien fait pour : <a href="http://www.wampserver.com/" target="_blank">Télécharger Wampserver</a>).<span id="more-197"></span></p>
<h2>Instaurez vos propres règles</h2>
<p>En créant votre site web, vous allez devoir créer tout un tas de variables, pour pouvoir retrouver un nom de variable facilement même si cela fait des semaines que vous n&#8217;avez pas toucher à ce projet, il faut que les noms de vos variables vous parlent. Pour cela il vous faut une certaine rigueur, la clé c&#8217;est la cohérence.</p>
<p>Si vous définissez une table Membre pour votre site, utilisez le mot <strong>membre</strong> partout, si d&#8217;une page à l&#8217;autre vous utilisez des variables du type <strong>$membre_id</strong>, ne faites pas de variables de type <strong>$user_prenom</strong> à coté mais membre_prenom. Si vous avez pour habitude de séparer vos noms de variable par un underscore, ne créez pas par la suite des variables du type <strong>$motMot</strong> ou la séparation se fait par une majuscule, utilisez la même <strong>nomenclature</strong> pour nommer vos fichiers. En bref, chaque développeur a sa propre façon de faire, faites ce qui vous est le plus confortable.</p>
<p>S&#8217;il doit y avoir une seule règle elle se résume en un mot : <strong>Cohérence</strong>.</p>
<h2>Un cahier des charges</h2>
<p>Quand on a une idée en tête on est tous impatient de la voir se former mais ne vous précipitez pas, commencez par faire un cahier des charges, listez toutes les fonctionnalités de votre site web de manière à avoir le recul nécessaire pour penser à la manière dont vous allez concevoir votre application.</p>
<h2>Tout est ok, par où je commence ?</h2>
<p>Un site web conventionnel a pour coeur une base de données, tout le php, javascript, html etc.. qui l&#8217;entoure n&#8217;est en fait que la manière dont vous allez manipuler votre base de données pour pouvoir l&#8217;exploiter de manière ergonomique. Alors l&#8217;important est de commencer par créer votre base de données, c&#8217;est la base comme son nom l&#8217;indique. Créez toutes les tables que vous pensez utiliser, et si possible, poussez-y un peu de contenu qui sera au moins utile pour tester vos scripts d&#8217;affichage.</p>
<h2>Architecture de votre site web</h2>
<p>Reste à savoir comment organiser le dossier de votre site web, chacun a ses propres habitudes. Néanmoins pensez juste quelques petites choses :</p>
<ul>
<li>Externalisez vos javascript du html et regroupez-les dans un dossier à part</li>
<li>De même pour vos scripts php et vos css</li>
<li>Organisez un dossier images (différenciez les images du templates de celles relatives au contenu du site, ou encore les icônes)</li>
</ul>
<h2>C&#8217;est parti !</h2>
<p>C&#8217;est enfin le moment de se lancer dans le code, vous avez un joli dossier bien préparé, une base de données créée en local sous wamp server (ou autre).</p>
<p>Il n&#8217;y a pas si longtemps, à partir de ce moment-ci, je lançais Notepad++, un petit éditeur de texte léger qui a la particularité de coloriser mon code et je crée mes fichiers php, js etc.. à la volée. A coté de ça j&#8217;avais le navigateur web qui tournait sur la page phpmyadmin de Wampserver pour gérer ma base de données.</p>
<p><img class="size-full wp-image-218 aligncenter" title="netbeans_logo_ok300x150[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/netbeans_logo_ok300x1501.jpg" alt="" width="300" height="165" /></p>
<p>Mais Je vous conseille d&#8217;utiliser Netbeans si vous ne savez pas quel <strong>IDE</strong> choisir, ce logiciel vous donne en plus de la coloration syntaxique une vision globale de votre projet, vous avez sur la gauche la<br />
liste de tous vos fichiers, un outil de debuguage qui vous signale si vous avez fait une faute de frappe sur une fonction, une vue sur votre base de données, ainsi vous n&#8217;avez pas besoin de lancer phpmyadmin sur un exploreur à coté pour vous rappeler de quelle manière vous avez nommé une table, vous pouvez aussi modifier la structure d&#8217;une table ou la remplir. je ne vous conseille pas ce logiciel pour créer vos tables mais c&#8217;est toujours pratique si vous vous apercevez en codant que vous avez oublié une colonne à une table par exemple.</p>
<h2>Une version de référence</h2>
<p>Il m&#8217;arrive parfois de travailler sur mon ordinateur fixe et d&#8217;autre fois sur mon portable parce que je ne suis pas au même endroit.</p>
<p>Le problème étant que pour passer vos fichiers d&#8217;un ordinateur à un autre, c&#8217;est un peu la galère, faut s&#8217;envoyer des bouts de fichier par mail, ou clé usb, c&#8217;est chiant puis on peut vite ne plus s&#8217;y retrouver, et du coup c&#8217;est compliqué d&#8217;être à jour partout.</p>
<p>Etant donné que c&#8217;est particulièrement un problème pour moi du fait que je change beaucoup de poste, j&#8217;me suis trouvé une petite astuce en tombant sur une application toute bête par hasard.</p>
<p>L&#8217;astuce est d&#8217;utiliser dropbox.</p>
<p><img class="aligncenter size-medium wp-image-208" title="Dropbox-Logo[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/Dropbox-Logo1-300x101.png" alt="" width="300" height="101" /></p>
<p>Dropbox est un petit logiciel qui vous permet de créer un dossier sur votre ordinateur synchonisé à un compte en ligne, gratuit qui plus est !</p>
<p><img class="aligncenter size-thumbnail wp-image-211" style="float: left; margin: 5px;" title="dropbox21[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/dropbox211-150x150.jpg" alt="" width="150" height="150" /></p>
<p>Alors sur chacun de mes pc j&#8217;ai installé dropbox et je l&#8217;ai relié au même compte. Ce qui fait que j&#8217;ai un dossier commun sur chacun de mes pc sans qu&#8217;ils soient techniquement en réseau. En fait les fichiers que je mets dans le dossier dropbox sont tout simplement envoyés sur un serveur dropbox.</p>
<p>J&#8217;ai donc mis mes projet web à jour sur mon compte dropbox, et dès que je veux travailler dessus quel que soit le poste , je récupère mes fichiers sur le dossier dropbox, je fais mes modifications, je recette et si tout roule je les remets dans le dossier dropbox. Ainsi je suis toujours sûr de travailler sur les dernières versions de mes applications sans avoir à me poser trop de questions ni à devoir me lever de mon siège pour chercher une clé usb =D.</p>
<p>N &#8216;oubliez pas aussi d&#8217;exporter votre base de données dans votre dossier dropbox !</p>
<p>Une fois que votre projet est fini, vous n&#8217;avez plus qu&#8217;a envoyer votre dossier dropbox sur votre serveur en ligne. Lors de la mise à jour de votre site web par la suite, ne faites pas les modifications directement en ligne mais en local en mettant à jour votre dossier dropbox, ensuite seulement vous pouvez mettre cela en production, de manière à ne pas laisser de bug en production et de garder une version à jour chez vous.</p>
<h2>Pour conclure</h2>
<p>Rien d&#8217;extraordinaire dans ce billet, mais simplement une liste en vrac de petites choses à savoir pour réussir un gros projet sans trop s&#8217;y perdre. C&#8217;est une suite d&#8217;astuces que j&#8217;ai appris sur le tas petit à petit et suite à plus ou moins d&#8217;incidents. Il ne faut jamais oublier que l&#8217;environnement de travail et la bonne gestion de projet est ce qui rend un développeur productif et efficace.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/non-classe/environnement-de-developpement-php/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>﻿Formulaire CSS3 sans images</title>
		<link>http://www.mehdicolin.com/ressources/formulaire-css3-sans-images</link>
		<comments>http://www.mehdicolin.com/ressources/formulaire-css3-sans-images#comments</comments>
		<pubDate>Sun, 30 Oct 2011 18:41:06 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ressources]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=162</guid>
		<description><![CDATA[Aujourd’hui j’ai fait quelque petits tests des propriétés CSS3 et c&#8217;est fou ce que l&#8217;on peut faire avec ! &#160; Voyez par vous-même le formulaire généré : Formulaire CSS3 sans images (En passant si vous voulez récupérer ce formulaire css3 pour votre site web, vous pouvez c&#8217;est aussi là pour ça). Les propriétés CSS 3 [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align:center">
<img class="aligncenter size-full wp-image-174" title="css3form" src="http://www.mehdicolin.com/wp-content/uploads/2011/10/css3form.png" alt="" width="374" height="184" /></p>
<p>Aujourd’hui j’ai fait quelque petits tests des <strong>propriétés CSS3</strong> et c&#8217;est fou ce que l&#8217;on peut faire avec !</p>
<p>&nbsp;</p>
<p>Voyez par vous-même le formulaire généré :<span id="more-162"></span></p>
<p><a href="http://laboratoire.mehdicolin.com/css3/form1.htm"><br />
</a></p>
<h2><a href="http://laboratoire.mehdicolin.com/css3/form1.htm">Formulaire CSS3 sans images</a></h2>
<p><a href="http://laboratoire.mehdicolin.com/css3/form1.htm"> </a></p>
<p><a href="http://laboratoire.mehdicolin.com/css3/form1.htm"></a></p>
<p>(En passant si vous voulez récupérer ce <strong>formulaire css3</strong> pour votre site web, vous pouvez c&#8217;est aussi là pour ça).</p>
<p>Les <strong>propriétés CSS 3</strong> utilisées sont :</p>
<ul>
<li><strong>border-radius :</strong> Permet d’avoir des bords arrondis.</li>
<li><strong>box-shadow :</strong> Permet de créer des ombres sur des blocs html</li>
<li><strong>text-shadow :</strong> Permet de créer des ombres sur du texte</li>
</ul>
<p>les préfixes -moz-, -webkit-,-o- et –ms- permettent une compatibilité sur tous les navigateurs en attendant que le <strong>CSS 3</strong> soit totalement reconnu.</p>
<p>&nbsp;</p>
<p>Voici ci-dessous le code complet.</p>
<p>&nbsp;</p>
<p>CSS :</p>
<div class="codecolorer-container css twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;height:500px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />31<br />32<br />33<br />34<br />35<br />36<br />37<br />38<br />39<br />40<br />41<br />42<br />43<br />44<br />45<br />46<br />47<br />48<br />49<br />50<br />51<br />52<br />53<br />54<br />55<br />56<br />57<br />58<br />59<br />60<br />61<br />62<br />63<br />64<br />65<br />66<br />67<br />68<br />69<br />70<br />71<br />72<br />73<br />74<br />75<br />76<br />77<br />78<br />79<br />80<br />81<br />82<br />83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br />91<br />92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br />101<br />102<br />103<br />104<br />105<br />106<br />107<br />108<br />109<br />110<br />111<br />112<br /></div></td><td><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> <span style="color: #00AA00;">*</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp;.form1<span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span>helvetica<span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12pt</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">320px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">130px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius<span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow<span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">0px</span> <span style="color: #933;">10px</span> <span style="color: #cc00cc;">#ccc</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Old browsers */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">11%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">68%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* FF3.6+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">&#40;</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">11%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">68%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">100%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome,Safari4+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">11%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">68%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome10+,Safari5.1+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -o-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">11%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">68%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Opera 11.10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -ms-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">11%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">68%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">234</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">11%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">255</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">68%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">232</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* W3C */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">&#40;</span> startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#eaeaea'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#e8e8e8'</span><span style="color: #00AA00;">,</span>GradientType<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">0</span> <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE6-9 */</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> h2<span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-family</span><span style="color: #00AA00;">:</span>helvetica<span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">14pt</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">2px</span> <span style="color: #cc00cc;">#aaa</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-weight</span><span style="color: #00AA00;">:</span><span style="color: #993333;">normal</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> div<span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span><span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> label<span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>inline-<span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#7abcff</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Old browsers */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;<span style="color: #cc00cc;">#7abcff</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span> <span style="color: #cc00cc;">#4096ee</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* FF3.6+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">&#40;</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">0%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#7abcff</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">100%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#4096ee</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome,Safari4+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;<span style="color: #cc00cc;">#7abcff</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#4096ee</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome10+,Safari5.1+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -o-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;<span style="color: #cc00cc;">#7abcff</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#4096ee</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Opera 11.10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -ms-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;<span style="color: #cc00cc;">#7abcff</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#4096ee</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;<span style="color: #cc00cc;">#7abcff</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span><span style="color: #cc00cc;">#4096ee</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* W3C */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">&#40;</span> startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#7abcff'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#4096ee'</span><span style="color: #00AA00;">,</span>GradientType<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">0</span> <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE6-9 */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">80px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-shadow</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #933;">1px</span> <span style="color: #cc00cc;">#ddd</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">7px</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">7px</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> input<span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>inline-<span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">200px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#333</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#09f</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background-color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#C4E1FF</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">border-left</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span><span style="color: #00AA00;">:</span><span style="color: #933;">12pt</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">10px</span> <span style="color: #933;">5px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> div<span style="color: #3333ff;">:hover </span>input<span style="color: #00AA00;">,</span><span style="color: #6666ff;">.form1</span> div<span style="color: #3333ff;">:hover </span>label<span style="color: #00AA00;">&#123;</span><br />
<br />
&nbsp; &nbsp; &nbsp;<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span><br />
<br />
<br />
&nbsp; &nbsp; &nbsp;box-shadow<span style="color: #00AA00;">:</span><span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #933;">3px</span> <span style="color: #cc00cc;">#09f</span><span style="color: #00AA00;">;</span><br />
<br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> input<span style="color: #00AA00;">&#91;</span>type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span><span style="color: #00AA00;">&#93;</span><span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">right</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Old browsers */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* FF3.6+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">&#40;</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">100%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome,Safari4+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome10+,Safari5.1+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -o-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Opera 11.10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -ms-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">213</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">206</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">166</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">201</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">193</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">144</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">183</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">173</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">112</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* W3C */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">&#40;</span> startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#d5cea6'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#b7ad70'</span><span style="color: #00AA00;">,</span>GradientType<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">0</span> <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE6-9 */</span><br />
<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">100px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span><span style="color: #933;">25px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#fff</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-align</span><span style="color: #00AA00;">:</span><span style="color: #993333;">center</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">pointer</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius<span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius<span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius<span style="color: #00AA00;">:</span><span style="color: #933;">10px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #6666ff;">.form1</span> input<span style="color: #00AA00;">&#91;</span>type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span><span style="color: #00AA00;">&#93;</span><span style="color: #3333ff;">:hover</span><span style="color: #00AA00;">&#123;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">rgb</span><span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Old browsers */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -moz-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">1%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span> rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* FF3.6+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-gradient<span style="color: #00AA00;">&#40;</span>linear<span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">1%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">,</span> color-stop<span style="color: #00AA00;">&#40;</span><span style="color: #933;">100%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome,Safari4+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -webkit-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">1%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Chrome10+,Safari5.1+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -o-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">1%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* Opera 11.10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> -ms-linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">1%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE10+ */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> linear-gradient<span style="color: #00AA00;">&#40;</span><span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">,</span> &nbsp;rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">211</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">196</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">107</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">1%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">198</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">185</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">111</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">40%</span><span style="color: #00AA00;">,</span>rgba<span style="color: #00AA00;">&#40;</span><span style="color: #cc66cc;">181</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">160</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">41</span><span style="color: #00AA00;">,</span><span style="color: #cc66cc;">1</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">100%</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* W3C */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter<span style="color: #00AA00;">:</span> progid<span style="color: #3333ff;">:DXImageTransform</span><span style="color: #6666ff;">.Microsoft</span>.gradient<span style="color: #00AA00;">&#40;</span> startColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#d3c46b'</span><span style="color: #00AA00;">,</span> endColorstr<span style="color: #00AA00;">=</span><span style="color: #ff0000;">'#b5a029'</span><span style="color: #00AA00;">,</span>GradientType<span style="color: #00AA00;">=</span><span style="color: #cc66cc;">0</span> <span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span> <span style="color: #808080; font-style: italic;">/* IE6-9 */</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">cursor</span><span style="color: #00AA00;">:</span><span style="color: #993333;">pointer</span><span style="color: #00AA00;">;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #00AA00;">&#125;</span></div></td></tr></tbody></table></div>
<p>Et pour ce qui est du html :</p>
<div class="codecolorer-container html4strict twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div></td><td><div class="html4strict codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">form</span></a> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;form1&quot;</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>&gt;</span>Identification<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;">h2</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">label</span></a> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;f1Llogin&quot;</span>&gt;</span> Pseudo <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">label</span></a>&gt;&lt;<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;f1Llogin&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">label</span></a> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;f1Lpass&quot;</span>&gt;</span> Email <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">label</span></a>&gt;&lt;<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;password&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;f1Lpass&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">div</span></a>&gt;</span><br />
&nbsp; &nbsp; &nbsp;<span style="color: #009900;">&lt;<a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">input</span></a> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;valider&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span><br />
<br />
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">form</span></a>&gt;</span></div></td></tr></tbody></table></div>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/ressources/formulaire-css3-sans-images/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google et la pagination</title>
		<link>http://www.mehdicolin.com/referencement/google-et-la-pagination</link>
		<comments>http://www.mehdicolin.com/referencement/google-et-la-pagination#comments</comments>
		<pubDate>Fri, 28 Oct 2011 17:01:55 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Référencement]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=152</guid>
		<description><![CDATA[Selon Google une page doit correspondre à un thème, par exemple sur ce blog la page « blog » devrait contenir la liste de tous les billets de celui-ci. Dans le meilleur des mondes je devrais donc à partir de cette page pouvoir accéder à tous les billets du blog. Cela étant (dans un souci ergonomique évident) , [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.mehdicolin.com/wp-content/uploads/2011/10/rel.jpeg"><img class="alignleft size-thumbnail wp-image-154" title="rel" src="http://www.mehdicolin.com/wp-content/uploads/2011/10/rel-150x150.jpg" alt="" width="150" height="150" /></a>Selon Google une page doit correspondre à un thème, par exemple sur ce blog la page « blog » devrait contenir la liste de tous les billets de celui-ci. Dans le meilleur des mondes je devrais donc à partir de cette page pouvoir accéder à tous les billets du blog.</p>
<p>Cela étant (dans un souci ergonomique évident) , on sait qu’une page web bien agencés ne devrait pas être plus longue que 3 écrans. On ne peut donc décemment pas afficher une liste de 1000 billets sur une seule page, il y aurait un scroll immense, la page prendrait du temps à charger.<br />
Bref ce serait clairement imbuvable pour l’internaute.<span id="more-152"></span></p>
<p>C’est donc pour cela qu’il existe beaucoup de sections avec un système de pagination sur chaque site ayant un minimum de contenu. Quitte à ne pas avoir une optimisation optimale pour Google au moins les internautes peuvent accéder à l’information plus facilement, ce qui est tout de même la première priorité.<br />
Après tout si on est top 1 partout sur les moteurs de recherches mais qu’on a un taux de transformation nul à cause d’une ergonomie foireuse, on n’a pas l’air fin !</p>
<p>Mais bon l’ami Google loin d’être un idiot est conscient de cette problématique  et propose une solution permettant de dire à google « Attention bonhomme ! Ici tu es sur la page produits mais ce n’est pas fini : la page suivante qui à telle url n’est que la continuité de celle-ci et non une nouvelle page en tant que telle ».</p>
<p>En plus de ça les structures des sections paginées sont souvent les mêmes,  selon le contenu qu’on y met on peut vite tomber dans le piège du duplicate content.</p>
<p>Concrètement ce message se fait très simplement, pour indiquer la page qui suit :</p>
<blockquote><p>&lt;link rel=&nbsp;&raquo;prev&nbsp;&raquo; href=&nbsp;&raquo;http://www.monsite.fr/page1&#8243; /&gt;</p></blockquote>
<p>Et pour celle qui la précède :</p>
<blockquote><p>&lt;link rel=&nbsp;&raquo;next&nbsp;&raquo; href=&nbsp;&raquo;http://www.monsite.fr/page3&#8243; /&gt;</p></blockquote>
<p>Bien entendu si vous êtes sur la première ou la dernière page vous n’utiliserez qu’un des deux tags, il comprendra tout seul que tout se finit (ou commence) ici.</p>
<p>&nbsp;</p>
<p>Source : <a href="http://googlewebmastercentral.blogspot.com/2011/09/view-all-in-search-results.html">http://googlewebmastercentral.blogspot.com/2011/09/view-all-in-search-results.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/referencement/google-et-la-pagination/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Editeur Wysiwyg ou BBcode ?</title>
		<link>http://www.mehdicolin.com/html-css/editeur-wysiwyg-type-ckeditor-ou-bbcode</link>
		<comments>http://www.mehdicolin.com/html-css/editeur-wysiwyg-type-ckeditor-ou-bbcode#comments</comments>
		<pubDate>Tue, 11 Oct 2011 18:58:24 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Ergonomie]]></category>
		<category><![CDATA[Html CSS]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=139</guid>
		<description><![CDATA[Moi qui souhaitais tenir ce blog régulièrement à jour, c&#8217;est un peu raté, faut dire qu&#8217;avec la reprise du boulot, des études tout ça tout ça &#8230; Enfin bon osef me diriez vous avec grande pertinence. Je souhaite faire un petit comparatif entre les éditeurs Wysiwyg (What you see is what you get) très hype et le [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.mehdicolin.com/wp-content/uploads/2011/10/logo-ckeditor-h100.png"><img class="aligncenter size-full wp-image-141" title="logo-ckeditor-h100" src="http://www.mehdicolin.com/wp-content/uploads/2011/10/logo-ckeditor-h100.png" alt="" width="273" height="100" /></a></p>
<p>Moi qui souhaitais tenir ce blog régulièrement à jour, c&#8217;est un peu raté, faut dire qu&#8217;avec la reprise du boulot, des études tout ça tout ça &#8230; Enfin bon <strong>osef </strong>me diriez vous avec grande pertinence.</p>
<p>Je souhaite faire un petit comparatif entre les éditeurs Wysiwyg (What you see is what you get) très hype et le bon vieux bbcode déjà obsolète aux yeux de beaucoup  !<br />
Tout d&#8217;abord &#8211; pour les néophytes &#8211; revenons sur les termes.</p>
<p><span id="more-139"></span></p>
<h2>Qu&#8217;est ce que le bbcode ?</h2>
<p>Vous êtes surement déjà allé faire un tour sur un forum de discussions, si oui vous remarquerez pour beaucoup d&#8217;entre vous que par exemple pour écrire un texte en gras, c&#8217;est pas comme dans word, on doit écrire quelque chose du genre.</p>
<blockquote><p>[b]mot en gras[b]</p></blockquote>
<p>Le bbcode étant un exemple, cela pourrait être un autre langage de code ou l&#8217;on devrait écrire :</p>
<blockquote><p>[gras]mot en gras[/gras]<br />
[bold]mot[/bold]<br />
mot</p></blockquote>
<p>Ce sont des codes inventés de toutes pièces qui ont pour but de dire &laquo;&nbsp;ce mot sera en gras&nbsp;&raquo; sans le faire mais pour se rappeler qu&#8217;il faudra mettre du code qui met vraiment en gras plus tard, ce qui permet de faire de la mise en page aux htmlophobes sans pour autant leur demander d&#8217;apprendre le html.</p>
<h2>Ok et pour l&#8217;éditeur wysiwyg alors ?</h2>
<p>L&#8217;éditeur wysiwyg marche comme word, vous sélectionnez un mot vous cliquez sur l&#8217;icône gras et vous voyez le résultat instantanément et non un langage de code aussi barbare que cité plus haut.<br />
Et là quand on clique sur gras on fait vraiment du gras, on ne fait pas cela en deux temps.</p>
<p><strong>Exemple : </strong><a href="http://ckeditor.com/demo">http://ckeditor.com/demo</a></p>
<p>Aux premiers abords on est tenté de se dire que la deuxième option est la meilleure, en tout cas elle parraît clairement plus sympa quand même ! Le problème étant que l&#8217;éditeur wisywig ne pousse non pas que le contenu mais aussi et directement le html dans la base de données.</p>
<p>Effectivement, imaginons un blog qui marche au bbcode.  Si on regarde bien, voyons ce qui se passe, dans ce cas on envoie dans la base de données notre billet au format bbcode, et pour afficher l&#8217;article sur le site on fait une requête qui va directement chercher le contenu bbcode dans la base de données en disant &laquo;&nbsp;bon par contre tu me remplaces [b]mot[/b] par &lt;b&gt;mot&lt;/b&gt;&nbsp;&raquo;, on procède donc bien en deux temps.</p>
<p>Mais si aujourd&#8217;hui je me dis que finalement je préférerais que le gras soit interprété de cette manière &laquo;&nbsp;&lt;strong&gt;mot&lt;/strong&gt;&nbsp;&raquo; me rendant compte que cela pourrait améliorer mon référencement qu&#8217;est-ce que je fais ?<br />
Rien de plus simple je modifie la requête d&#8217;affichage en disant &laquo;&nbsp;tu me remplace [b]mot[/b] par &lt;strong&gt;mot&lt;/strong&gt; finalement&nbsp;&raquo; et tout est à jour.</p>
<p>Dans le second cas, l&#8217;éditeur wisywig m&#8217;injectera directement le billet au format html dans la base de donnée, de ce fait ma requête d&#8217;affichage consistera simplement à dire &laquo;&nbsp;affiche moi la base de données telle quelle sans rien remplacer&nbsp;&raquo; et ça marche !<br />
Le problème c&#8217;est que si je me rends compte que je préfère avoir des &lt;strong&gt; plutôt que des &lt;b&gt;, je dois modifier mon éditeur wisywig pour lui dire que le bouton gras génère ce code html ci. Mais ce n&#8217;est pas tout, en effet désormais chaque nouvel article sera fait de cette manière mais tous les anciens seront toujours affichés avec des &lt;b&gt;, ce qui est problématique ! Et pour le changer je dois modifier tous les anciens articles. Si on en a une dizaine passe encore mais pour une centaine la charge de travail devient sacrément pesante ! Le fait de procéder en deux temps change considérablement la donne.</p>
<h2>Second cas de figure</h2>
<p>J&#8217;ai aussi remarqué un autre problème à un niveau professionnel, imaginons une équipe de deux personnes pour s&#8217;occuper d&#8217;un site, l&#8217;un est rédacteur ne connaissant rien aux webmastering et l&#8217;autre webmaster dont la mission est la gestion technique du site donc.<br />
Le webmaster est en charge de mettre en valeur le contenu produit par le rédacteur pour simplifier, si on place un éditeur wysiwig entre les mains du rédacteur, il se souciera naturellement de l’apparence de l&#8217;article ayant une prévisualisation directe, et risque de perdre du temps avec les options que lui offre celui-ci.<br />
En plus d&#8217;être moins productif du fait qu&#8217;il ne se contente plus que du contenu en lui même, il risque aussi de générer un code html dégueulasse, des span pour faire des titres, des titres différents d&#8217;un article à un autre, des balises pas refermées ou inutiles, des balises qui se chevauchent etc&#8230;<br />
De ce fait le webmaster lui aussi passera plus de temps à corriger ce genre d&#8217;erreurs et le tout conclura naturellement à un contenu de moindre qualité et une charge de travail supplémentaire pour le webmaster.</p>
<h2>Pour conclure</h2>
<p>Je ne veux pas assassiner les éditeurs wysiwyg, ils peuvent avoir leurs intérêts, par exemple à plus petite échelle, faire un site vitrine à l&#8217;aide d&#8217;un cms couplé à ce genre d&#8217;outil permet de pouvoir agir sur le contenu très rapidement sans s&#8217;embêter. Ou bien proposer cette fonctionnalité dans les commentaires est un plus ergonomique, et c&#8217;est pas bien grave si les commentaires ne sont pas aussi propres que l&#8217;article d&#8217;autant plus si c&#8217;est une plus-value coté utilisateur.</p>
<p>J&#8217;espère vous avoir au moins convaincu que le choix de l&#8217;outil nécessite réflexion et que ce n&#8217;est pas forcément le wisywig qui doit prédominer, néanmoins si vous pensez que je suis à coté de la plaque, j&#8217;en discuterai volontiers avec vous par le billet dans le fil de commentaires.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/html-css/editeur-wysiwyg-type-ckeditor-ou-bbcode/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	<media:rating>nonadult</media:rating><media:description type="plain">Mehdi COLIN</media:description></channel>
</rss>

