<?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>Webmaster Paris</title>
	
	<link>http://www.mehdicolin.com</link>
	<description>Développeur web Paris</description>
	<lastBuildDate>Tue, 07 Feb 2012 20:26:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</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>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>

		<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 ! &#160; Il existe pas mal de site proposant des psd gratuitement , 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 à [...]]]></description>
			<content:encoded><![CDATA[<p><a href="https://twitter.com/psdbot" target="_blank"><img class="alignnone size-full wp-image-293" title="psdbot" src="http://www.mehdicolin.com/wp-content/uploads/2012/02/psdbot.jpg" alt="" width="530" /></a></p>
<p>Vous en voulez du psd gratuit ? C&#8217;est ici que ça se passe !<span id="more-292"></span></p>
<p>&nbsp;</p>
<p>Il existe pas mal de site proposant des psd gratuitement , grâce à twitter vous n&#8217;avez qu&#8217;à suivre PsdBot et il cherche pour vous !<br />
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>

		<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 style="text-align: center;"><img class="alignnone size-full wp-image-263" title="Cache cache" src="http://www.mehdicolin.com/wp-content/uploads/2012/02/vignette.jpg" alt="Cache cache" width="310" height="200" /></p>
<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 !<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 gros !</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> <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> <strong>Utilisation (cliquez pour agrandir) : </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" /></a> <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>&nbsp;</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>0</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</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>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=197</guid>
		<description><![CDATA[&#160; &#160; 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 [...]]]></description>
			<content:encoded><![CDATA[<p>&nbsp;<br />
<center><br />
<img title="projet_V[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/projet_V1.jpg" alt="" width="250" /></center>&nbsp;</p>
<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>&nbsp;</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>
<p>&nbsp;</p>
<h2>Instaurez vos propres règles</h2>
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<h2>Un cahier des charges</h2>
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<h2>Tout est ok, par où je commence ?</h2>
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<h2>Architecture de votre site web</h2>
<p>&nbsp;</p>
<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>
<p>&nbsp;</p>
<h2>C&#8217;est parti !</h2>
<p>&nbsp;</p>
<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>&nbsp;</p>
<p>&nbsp;</p>
<p><center><img class="alignnone size-full wp-image-218" title="netbeans_logo_ok300x150[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/netbeans_logo_ok300x1501.jpg" alt="" width="300" height="165" /></center>&nbsp;</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 <img class="alignnone size-medium wp-image-220" style="float: right; margin: 5px;" title="propertie[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/11/propertie1-270x300.png" alt="" width="180" />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>
<p>&nbsp;</p>
<h2>Une version de référence</h2>
<p>&nbsp;</p>
<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>&nbsp;</p>
<p>&nbsp;</p>
<p><center><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" /></center>&nbsp;</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>
<p>&nbsp;</p>
<h2>Pour conclure</h2>
<p>&nbsp;</p>
<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>

		<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="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> *<span class="br0">&#123;</span>padding<span class="re2">:<span class="nu0">0</span></span>;margin<span class="re2">:<span class="nu0">0</span></span>;<span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span><span class="br0">&#123;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family<span class="re2">:helvetica</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size<span class="re2">:<span class="re3">12pt</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width<span class="re2">:<span class="re3">320px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin<span class="re2">:auto</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class="re2">:<span class="re3">130px</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding<span class="re2">:<span class="re3">20px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius<span class="re2">:<span class="re3">10px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: <span class="re3">1px</span> <span class="re3">0px</span> <span class="re3">10px</span> <span class="re0">#ccc</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: <span class="kw2">rgb</span><span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Old browsers */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -moz-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">11</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">68</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* FF3.6+ */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-gradient<span class="br0">&#40;</span>linear, <span class="kw1">left</span> <span class="kw1">top</span>, <span class="kw1">left</span> <span class="kw1">bottom</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">11</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">68</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">100</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome,Safari4+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">11</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">68</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome10+,Safari5.1+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -o-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">11</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">68</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Opera 11.10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -ms-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">11</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">68</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* IE10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">234</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">11</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">255</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">68</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">232</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* W3C */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid<span class="re2">:DXImageTransform</span><span class="re1">.Microsoft</span><span class="re1">.gradient</span><span class="br0">&#40;</span> startColorstr=<span class="st0">&#8216;#eaeaea&#8217;</span>, endColorstr=<span class="st0">&#8216;#e8e8e8&#8242;</span>,GradientType=<span class="nu0">0</span> <span class="br0">&#41;</span>; <span class="coMULTI">/* IE6-9 */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> h2<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family<span class="re2">:helvetica</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size<span class="re2">:<span class="re3">14pt</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">color</span>:<span class="re0">#<span class="nu0">000</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom<span class="re2">:<span class="re3">10px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">text-shadow</span>: <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">2px</span> <span class="re0">#aaa</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight<span class="re2">:normal</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> div<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom<span class="re2">:<span class="re3">10px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> label<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display<span class="re2">:inline-block</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: <span class="re0">#7abcff</span>; <span class="coMULTI">/* Old browsers */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -moz-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;<span class="re0">#7abcff</span> <span class="re3"><span class="nu0">0</span>%</span>, <span class="re0">#4096ee</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* FF3.6+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-gradient<span class="br0">&#40;</span>linear, <span class="kw1">left</span> <span class="kw1">top</span>, <span class="kw1">left</span> <span class="kw1">bottom</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">0</span>%</span>,<span class="re0">#7abcff</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">100</span>%</span>,<span class="re0">#4096ee</span><span class="br0">&#41;</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome,Safari4+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;<span class="re0">#7abcff</span> <span class="re3"><span class="nu0">0</span>%</span>,<span class="re0">#4096ee</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome10+,Safari5.1+ */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -o-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;<span class="re0">#7abcff</span> <span class="re3"><span class="nu0">0</span>%</span>,<span class="re0">#4096ee</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Opera 11.10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -ms-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;<span class="re0">#7abcff</span> <span class="re3"><span class="nu0">0</span>%</span>,<span class="re0">#4096ee</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* IE10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;<span class="re0">#7abcff</span> <span class="re3"><span class="nu0">0</span>%</span>,<span class="re0">#4096ee</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* W3C */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid<span class="re2">:DXImageTransform</span><span class="re1">.Microsoft</span><span class="re1">.gradient</span><span class="br0">&#40;</span> startColorstr=<span class="st0">&#8216;#7abcff&#8217;</span>, endColorstr=<span class="st0">&#8216;#4096ee&#8217;</span>,GradientType=<span class="nu0">0</span> <span class="br0">&#41;</span>; <span class="coMULTI">/* IE6-9 */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width<span class="re2">:<span class="re3">80px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class="re2">:<span class="re3">25px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height<span class="re2">:<span class="re3">25px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left<span class="re2">:<span class="re3">20px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">color</span>:<span class="re0">#fff</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">text-shadow</span>: <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re0">#ddd</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius<span class="re2">:<span class="re3">7px</span></span> <span class="re3">4px</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-left-radius<span class="re2">:<span class="re3">7px</span></span> <span class="re3">4px</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> input<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display<span class="re2">:inline-block</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width<span class="re2">:<span class="re3">200px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class="re2">:<span class="re3">25px</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">color</span>:<span class="re0">#<span class="nu0">333</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-left<span class="re2">:<span class="re3">20px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border<span class="re2">:<span class="re3">0px</span></span> <span class="kw2">solid</span> <span class="re0">#09f</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background-color</span>:<span class="re0">#C4E1FF</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-left<span class="re2">:<span class="nu0">0</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding<span class="re2">:<span class="nu0">0</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size<span class="re2">:<span class="re3">12pt</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-right-radius<span class="re2">:<span class="re3">10px</span></span> <span class="re3">5px</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius<span class="re2">:<span class="re3">10px</span></span> <span class="re3">5px</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline<span class="re2">:none</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> div<span class="re2">:hover</span> input,<span class="re1">.form1</span> div<span class="re2">:hover</span> label<span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; outline<span class="re2">:none</span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; box-shadow<span class="re2">:<span class="re3">0px</span></span> <span class="re3">0px</span> <span class="re3">3px</span> <span class="re0">#09f</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> input<span class="br0">&#91;</span>type=<span class="st0">&quot;submit&quot;</span><span class="br0">&#93;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display<span class="re2">:block</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float<span class="re2">:right</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: <span class="kw2">rgb</span><span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Old browsers */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -moz-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* FF3.6+ */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-gradient<span class="br0">&#40;</span>linear, <span class="kw1">left</span> <span class="kw1">top</span>, <span class="kw1">left</span> <span class="kw1">bottom</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">100</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome,Safari4+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome10+,Safari5.1+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -o-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Opera 11.10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -ms-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* IE10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">213</span>,<span class="nu0">206</span>,<span class="nu0">166</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">201</span>,<span class="nu0">193</span>,<span class="nu0">144</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">183</span>,<span class="nu0">173</span>,<span class="nu0">112</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* W3C */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid<span class="re2">:DXImageTransform</span><span class="re1">.Microsoft</span><span class="re1">.gradient</span><span class="br0">&#40;</span> startColorstr=<span class="st0">&#8216;#d5cea6&#8242;</span>, endColorstr=<span class="st0">&#8216;#b7ad70&#8242;</span>,GradientType=<span class="nu0">0</span> <span class="br0">&#41;</span>; <span class="coMULTI">/* IE6-9 */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width<span class="re2">:<span class="re3">100px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height<span class="re2">:<span class="re3">25px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height<span class="re2">:<span class="re3">25px</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">color</span>:<span class="re0">#fff</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align<span class="re2">:center</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor<span class="re2">:pointer</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius<span class="re2">:<span class="nu0">0</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top-left-radius<span class="re2">:<span class="re3">10px</span></span>;</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-right-radius<span class="re2">:<span class="re3">10px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-right<span class="re2">:<span class="re3">20px</span></span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="re1">.form1</span> input<span class="br0">&#91;</span>type=<span class="st0">&quot;submit&quot;</span><span class="br0">&#93;</span><span class="re2">:hover</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: <span class="kw2">rgb</span><span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Old browsers */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -moz-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">1</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>, rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* FF3.6+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-gradient<span class="br0">&#40;</span>linear, <span class="kw1">left</span> <span class="kw1">top</span>, <span class="kw1">left</span> <span class="kw1">bottom</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">1</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span>, color-stop<span class="br0">&#40;</span><span class="re3"><span class="nu0">100</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome,Safari4+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -webkit-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">1</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Chrome10+,Safari5.1+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -o-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">1</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* Opera 11.10+ */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: -ms-linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">1</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* IE10+ */</span></div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">background</span>: linear-gradient<span class="br0">&#40;</span><span class="kw1">top</span>, &nbsp;rgba<span class="br0">&#40;</span><span class="nu0">211</span>,<span class="nu0">196</span>,<span class="nu0">107</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">1</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">198</span>,<span class="nu0">185</span>,<span class="nu0">111</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">40</span>%</span>,rgba<span class="br0">&#40;</span><span class="nu0">181</span>,<span class="nu0">160</span>,<span class="nu0">41</span>,<span class="nu0">1</span><span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="br0">&#41;</span>; <span class="coMULTI">/* W3C */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: progid<span class="re2">:DXImageTransform</span><span class="re1">.Microsoft</span><span class="re1">.gradient</span><span class="br0">&#40;</span> startColorstr=<span class="st0">&#8216;#d3c46b&#8217;</span>, endColorstr=<span class="st0">&#8216;#b5a029&#8242;</span>,GradientType=<span class="nu0">0</span> <span class="br0">&#41;</span>; <span class="coMULTI">/* IE6-9 */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor<span class="re2">:pointer</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</div>
<p>Et pour ce qui est du html :</p>
<div class="dean_ch" style="white-space: wrap;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;form class=&quot;form1&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Identification&lt;/h2&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;f1Llogin&quot;&gt; Pseudo &lt;/label&gt;&lt;input type=&quot;text&quot; class=&quot;f1Llogin&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label for=&quot;f1Lpass&quot;&gt; Email &lt;/label&gt;&lt;input type=&quot;password&quot; class=&quot;f1Lpass&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
</div>
</li>
<li class="li2">
<div class="de2">&nbsp; &nbsp; &nbsp; &nbsp; &lt;input type=&quot;submit&quot; value=&quot;valider&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&lt;/form&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
</ol>
</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>

		<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/non-classe/editeur-wysiwyg-type-ckeditor-ou-bbcode</link>
		<comments>http://www.mehdicolin.com/non-classe/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[Inclassable]]></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. &#160; Je souhaite faire un petit comparatif entre les éditeurs Wysiwyg (What you see is what you get) très hype et [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.mehdicolin.com/wp-content/uploads/2011/10/logo-ckeditor-h1001.png"></a><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>&nbsp;</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>&nbsp;</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/non-classe/editeur-wysiwyg-type-ckeditor-ou-bbcode/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Twitter, à quoi ça sert ?</title>
		<link>http://www.mehdicolin.com/culture-web/twitter-a-quoi-ca-sert</link>
		<comments>http://www.mehdicolin.com/culture-web/twitter-a-quoi-ca-sert#comments</comments>
		<pubDate>Sat, 09 Apr 2011 04:56:33 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Culture Web]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=117</guid>
		<description><![CDATA[Je vais essayer de vous partager mon expérience sur twitter. C&#8217;est un outil assez incroyable, il doit être aussi utilisé qu&#8217;incompris, mais qu&#8217;est-ce donc que c&#8217;t'engin ? Première approche &#160; Au départ, je me suis inscrit pour voir un petit peu comment ça marche. Savoir quel est l’intérêt de Twitter. Aux premiers abords si on est adepte [...]]]></description>
			<content:encoded><![CDATA[<p><img style="float: left; margin-right: 15px; margin-bottom: 10px;" title="Twitter+Top+Sites[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/04/Twitter+Top+Sites1-150x150.png" alt="" width="150" height="150" />Je vais essayer de vous partager mon expérience sur twitter.<br />
C&#8217;est un outil assez incroyable, il doit être aussi utilisé qu&#8217;incompris, mais qu&#8217;est-ce donc que c&#8217;t'engin ?</p>
<h2>Première approche</h2>
<p>&nbsp;</p>
<p>Au départ, je me suis inscrit pour voir un petit peu comment ça marche. <strong>Savoir quel est l’intérêt de Twitter</strong>.</p>
<p>Aux premiers abords si on est adepte de facebook et des blogs voila ce qu&#8217;on se dit :<span id="more-117"></span></p>
<blockquote><p>Twitter c&#8217;est comme un blog sauf qu&#8217;on ne peut pas écrire plus de 140 caractères par message ! Wahhh mais c&#8217;est super &#8230; super con ! Et en plus on appelle cette pseudo-innovation du micro-blogging, comme si il y avait de quoi s&#8217;en vanter !</p></blockquote>
<p>Ou alors on se dit :</p>
<blockquote><p>Twitter c&#8217;est comme si on avait le mur de facebook ! Mais sans le reste&#8230;<br />
C&#8217;est vrai quoi sur facebook au moins :</p>
<p>- On peut mettre une super grande photo pour montrer qu&#8217;on est super bogoss même si c&#8217;est pas vrai (tout est une histoire d&#8217;éclairage mes amis ;o) )</p>
<p>- On a un live chat pour draguer les nanas à qui on a du mal à parler en privé IRL (bah ouais elle est toujours entourée de 5 autres daleux qui font mine d&#8217;être ses meilleurs potes !)</p>
<p>- Un vrai profil pour montrer à ces nanas-là qu&#8217;en fait on est super intelligents au fond, et ouais ! deux trois citations super profondes style &laquo;&nbsp;<em>La vie c&#8217;est pas toujours facile</em>&nbsp;&raquo; histoire de montrer que derrière cette photo de bogoss il y a aussi une âme de poète B).</p>
<p>- Des galeries d&#8217;images où nos potes peuvent nous marquer pour montrer que même si on passe 10h/jour sur facebook et msn, on a quand même une vraie vie sociale où on boit et même qu&#8217;on vomit parce qu&#8217;on boit plein d&#8217;alcool et qu&#8217;on est des gros rebelles de la life !</p>
<p>- On peut aussi s&#8217;inscrire à plein d&#8217;applications qui polluent notre mur et nous permettent de répondre à des questions sur nos amis. On reçoit plein de réponses positives, et on se dit que tout le monde nous aime et c&#8217;est cool. Ensuite quand c&#8217;est à nous de répondre, on réponds toujours positivement sur les potes même si on le pense pas. En espérant que ceux-ci du coup diront du bien de vous en répondant aux questions vous concernant&#8230; Mmmh bon après réflexion, c&#8217;est peut être un petit con ça du coup&#8230;</p>
<p>Enfin tout plein de trucs qui déchirent tout quoi !</p></blockquote>
<p>Du coup, quand même ! On se pose cette <strong>fameuse question</strong> qui m&#8217;a fait longuement me torturer l&#8217;esprit &#8230;</p>
<p>Si Twitter était aussi inutile que ça, pourquoi c&#8217;est si populaire ? En plus la plupart de ceux qui twittent sont déjà adeptes de <strong>Facebook </strong>et bon nombre d&#8217;entre eux sont aussi des blogueurs, c&#8217;est bizarre non ?</p>
<p>Et là on se dit qu&#8217;il faut refaire son analyse et essayer de mieux comprendre l’intérêt de la bête.</p>
<p>Bon certains vont juste se dire :</p>
<blockquote><p>bah les autres ils sont dessus parce que c&#8217;est qu&#8217;une bande d&#8217;écervelés qui n&#8217;ont pas encore compris que ça servait à qu&#8217;dalle !</p></blockquote>
<p>- Je leur dirais simplement qu&#8217;un peu persévérance et un soupçon de remise en question ne leur feraient pas trop de mal :).</p>
<p>&nbsp;</p>
<h2>Deuxième approche</h2>
<p>&nbsp;</p>
<p>Mais alors ! Quelles ont été mes erreurs lors de ma première analyse :<br />
- Comme beaucoup je me suis trop attardé sur le coté technique et l’apparence plutôt qu&#8217;essayer de comprendre le <strong>concept </strong>et je suis passé à coté de certains détails pertinents&#8230;</p>
<p>&nbsp;</p>
<p>Recomparons Twitter à Facebook, quelle est l&#8217;idée derrière Facebook?<br />
Un outil permettant de gérer son réseau social, même si on peut faire de nouvelles rencontres, là n&#8217;est pas le but, il s&#8217;agit de déclarer via l&#8217;outil les amis qu&#8217;on a déjà ! Et d’interagir avec eux.<br />
On ajoute un ami et s&#8217;il est sympa (et si c&#8217;est réellement un ami surtout) il vous accepte, ensuite vous avez accès à son mur et vice et versa.</p>
<p>&nbsp;</p>
<p>Pour comprendre <strong>le but de Twitter</strong>, voyons comment marche le système de relation&#8230;<br />
Alors je me connecte à twitter et tiens je vais ajouter un contact mmh&#8230; ah bah tiens <strong>ça n&#8217;existe pas ça sur Twitter.<br />
</strong><br />
Effectivement, tout ce que vous pouvez faire, c&#8217;est vous &laquo;&nbsp;<strong>abonner</strong>&nbsp;&raquo; à d&#8217;autres personnes.<br />
Lorsque l&#8217;on s&#8217;abonne à une autre personne, tout ce qui change c&#8217;est qu&#8217;elle apparait sur le fils d&#8217;actualité, elle ne recoit pas une invitation de prise de contact comme sur <strong>Facebook </strong>ou autres.</p>
<h2>Twitter même si t&#8217;as pas d&#8217;amis !</h2>
<p>&nbsp;</p>
<p>En fait <strong>il n&#8217;est même pas nécessaire d&#8217;avoir des amis sur Twitter</strong> pour en profiter, voyez cela plus proche d&#8217;un <strong>flux rss</strong> qu&#8217;un Facebook, vous vous abonnez à plusieurs flux produits par plusieurs personnes différentes.</p>
<p>&nbsp;</p>
<p>Ces personnes ne sont pas nécessairement des gens que vous connaissez directement, ça peut l&#8217;être mais ça peut aussi être des blogueurs que vous appréciez, des stars, des gens que vous admirez avec qui vous pouvez tout de même intéragir en toute simplicité.</p>
<p>&nbsp;</p>
<p>Et ceux-ci contrairement à un <strong>flux rss</strong> ne vous lâchent pas des pavés impersonnels publiés sur leurs blogs, il s&#8217;agit simplement de partager les <strong>idées du moment</strong>.<br />
Sur facebook, vous allez plutôt raconter votre vie, pour donner des nouvelles à votre réseau, sur twitter vous allez plutôt partager des petites pensés qui vous semblent intéressantes, cela peut être le dernier site que vous avez découvert et que vous trouvez génial, un bon plan, un service&#8230;<br />
On a pas forcement l&#8217;utilité ou l&#8217;envie de pondre un véritable article de blog à chaque petite chose que l&#8217;on souhaite partager. Et faire des billets sur un blog juste pour dire deux lignes puisqu&#8217;il n&#8217;y a parfois pas besoin de plus, c&#8217;est un peu dommage, faut l’admettre. Ça permet donc de faire un tri sur les blogs et puis centraliser toutes les pensées des gens qui vous intéressent sur un simple service.<br />
C&#8217;est de cette manière qu&#8217;il vous faudra aborder twitter dans un premier temps, comme étant un réel puits d&#8217;informations et de conseil, un site de partage quoi. Et non comme un site ou il faut absolument que vous puissiez être entendu pour en avoir l&#8217;utilité. Bon nombre de personnes ont pu voir aucun abonné sur twitter et ne twittent d&#8217;ailleurs pas mais vont sur twitter chaque jour pour voir ce qu&#8217;ont à dire leurs idoles par exemple.</p>
<p>&nbsp;</p>
<p>D&#8217;ailleurs <strong>Twitter </strong>en devient un superbe <strong>outil de veille</strong> ! Abonnez-vous à quelques experts d&#8217;un thème qui vous intéresse, et ils vous montreront les choses les plus pertinentes et actuelles à voir et savoir de ce sujet ! Comme JCVD vous serez <strong>AWARE </strong>! En plus de ça vous pouvez réagir à leur dire en <strong>temps réel</strong> en les mentionnant dans vos tweets, ce qui crée une certaine connivence qu&#8217;on n&#8217;a pas en lisant le flux rss d&#8217;un blog.<br />
Oui car le <strong>temps réel</strong> est une variable tout aussi essentielle, vous apprenez quelque chose d&#8217;incroyable, vous envoyez un petit tweet, ca peut toujours servir, si vous devez organiser la chose sous la forme d&#8217;un article il peut se passer de plusieurs heures à plusieurs jours pour qu&#8217;elle soit diffusée, là c&#8217;est vraiment <strong>l&#8217;idée à l&#8217;état brut</strong> que vous diffusez, aussi désorganisée et pure soit-elle.</p>
<p>&nbsp;</p>
<p>La deuxième chose, en plus de partager divers bons plans et autres, c&#8217;est aussi de partager des petites humeurs passagères, des choses un peu plus légères. Parfois ça intéresse parfois beaucoup moins m&#8217;enfin bon, chacun fera son tri dans ses abonnements :p. Il y a peut être parmi nous de grands Fans qui ont besoin de savoir dans la minute qui suit quand le pauvre Justin Bieber se prend une porte !</p>
<p>&nbsp;</p>
<h2>L&#8217;étiquette sur Twitter</h2>
<p>&nbsp;</p>
<p>Ce que l&#8217;on peut remarquer aussi, c&#8217;est que twitter étant public, une étiquette s&#8217;est créée, basée sur de belles valeurs telle que la générosité, l&#8217;humilité, la politesse.<br />
En effet, quelqu&#8217;un qui utilise twitter simplement pour faire sa pub sans rien partager réellement est fuit, on s&#8217;y exprime avec politesse et humilité en règle général. Et d&#8217;ailleurs on remarque que même si c&#8217;est sur twitter qu&#8217;on limite à mort le nombre de caractères, c&#8217;est sur facebook qu&#8217;on écrit en sms (enfin je dit &laquo;&nbsp;on&nbsp;&raquo; mais pas moi hein, les autres là !).<br />
Ce qui se comprend puisque sur facebook on est au bistrot avec ses potes, et sur twitter on est à découvert.</p>
<p>&nbsp;</p>
<p>En fait on y retrouve les belles valeurs de la nétiquette promues à l&#8217;époque par <strong>Usenet</strong> (entre autre), choses qui ont parfois tendance à se perdre selon les doyens de l&#8217;internet mais finalement pas tant que ça !</p>
<p>&nbsp;</p>
<h2>Conclusion</h2>
<p>&nbsp;</p>
<p><strong>Facebook :</strong> Je consolide mes relations déjà existantes.</p>
<p><strong>Twitter :</strong> Je partage mes connaissances, mes avis, mes bons plans, et je fais de la veille en temps réel.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Et là vous vous dites : Ouais maintenant j&#8217;ai ouvert les yeux, en fait twitter c&#8217;est trop de la balle ! Bon à quel personne super intéressante vais je m&#8217;abonner pour commencer ?</p>
<p>Et là je vous dis : ben moi bien sur !</p>
<p><a href="http://twitter.com/mehdicolin">http://twitter.com/mehdicolin</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/culture-web/twitter-a-quoi-ca-sert/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Web Agency Fail</title>
		<link>http://www.mehdicolin.com/lol/web-agency-fail</link>
		<comments>http://www.mehdicolin.com/lol/web-agency-fail#comments</comments>
		<pubDate>Tue, 05 Apr 2011 12:46:41 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[LOL]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=103</guid>
		<description><![CDATA[Voici un petit billet aujourd&#8217;hui, pour vous faire part de ma superbe découverte ! Vous connaissez tous DTC(danstonchat, ex bashfr et qui va redevenir Bashfr d&#8217;ailleurs 0_0), ou encore Viedemerde et j&#8217;en passe ! Mais aujourd&#8217;hui j&#8217;ai trouvé un site reprenant un peu le même concept mais pour nous autres fonctionnaires du web ! Dans ce site [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://www.mehdicolin.com/wp-content/uploads/2011/04/webagencyfail1.jpg"><img class="aligncenter size-medium wp-image-111" title="webagencyfail[1]" src="http://www.mehdicolin.com/wp-content/uploads/2011/04/webagencyfail1-300x154.jpg" alt="" width="300" height="154" /></a></p>
<p>Voici un petit billet aujourd&#8217;hui, pour vous faire part de ma superbe découverte !</p>
<p>Vous connaissez tous <a href="http://www.danstonchat.fr" target="_blank">DTC</a>(<strong>danstonchat</strong>, ex <strong>bashfr</strong> et qui va redevenir <a href="http://danstonchat.com/blog/dtc-redevient-bashfr.html" target="_blank">Bashfr</a> d&#8217;ailleurs 0_0), ou encore <a href="http://www.viedemerde.com" target="_blank">Viedemerde</a> et j&#8217;en passe ! Mais aujourd&#8217;hui j&#8217;ai trouvé un site reprenant un peu le même concept mais pour nous autres fonctionnaires du web !</p>
<p>Dans ce site : vous allez pouvoir retrouver toutes les perles entendu en web agency (certifié authentique).</p>
<p>Allez ! je vous en laisse tout de même quelques une qui en valent le détour (notez comme je suis bon !) :<span id="more-103"></span></p>
<blockquote><p>— Est-il possible d’imprimer cette vidéo ?</p>
<p>— Mais une bloggeuse a-t-elle forcément un blog ?</p></blockquote>
<blockquote><p>— Tu peux mettre la typo en noir ?<br />
— Sur le fond noir on ne verra pas le texte.<br />
— Essaye !<br />
— Ah oui… On laisse en blanc.</p></blockquote>
<blockquote><p>— Vous savez faire les fluorescences ?<br />
— Les quoi ?<br />
— Les flu-o-res-cen-ces. Sur les sites.<br />
— OK. Les flux RSS…</p></blockquote>
<p>Et pour vous en payer une bonne tranche, voici le lien bien sur : <strong><a href="http://www.webagencyfail.com/" target="_blank">Web Agency FAIL</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/lol/web-agency-fail/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>La curation</title>
		<link>http://www.mehdicolin.com/culture-web/la-curation</link>
		<comments>http://www.mehdicolin.com/culture-web/la-curation#comments</comments>
		<pubDate>Thu, 31 Mar 2011 18:05:51 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Culture Web]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=79</guid>
		<description><![CDATA[Vous avez peut-être déjà entendu parler de curation, content-curation ou encore de curator. Le mot de l&#8217;année 2011 selon de nombreux blogueurs, rien que ça ! Donc si vous voulez être super hype, briller en société, il vous faudra l&#8217;ajouter dans votre liste de mots à répéter en soirée branchée de péteux arogants au look [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter size-medium wp-image-86" title="curation" src="http://www.mehdicolin.com/wp-content/uploads/2011/03/curation-300x152.png" alt="Curation" width="300" /></p>
<p>Vous avez peut-être déjà entendu parler de curation, content-curation ou encore de curator. Le mot de l&#8217;année 2011 selon de nombreux blogueurs, rien que ça ! Donc si vous voulez être super hype, briller en société, il vous faudra l&#8217;ajouter dans votre liste de mots à répéter en soirée branchée de péteux arogants au look BCBG !</p>
<p>Bon c&#8217;est bien beau de briller en société mais vous voulez quand même peut-être savoir en quoi consiste exactement la curation ? Est-ce encore un mot à la con inventé pour quelqu&#8217;obscures raisons qui n&#8217;a aucune raison d&#8217;exister tel que &laquo;&nbsp;web 2.0&#8243; (enfin bon recentrons le sujet sur la curation tout de même, le web 2.0 n&#8217;a qu&#8217;a bien se tenir, je lui ferai sa peau dans un prochain billet sans faute ! ).<span id="more-79"></span></p>
<p>Avant de vous définir clairement ce terme, replaçons nous dans le contexte actuel.</p>
<p>A l&#8217;origine internet était réservé à un petit cercle d&#8217;initiés qui partagaient des bouts de codes entre eux, bon je caricature mais toujours est-il que c&#8217;était plus facile de s&#8217;y retrouver.</p>
<p>Ou en est-on maintenant ?<br />
On tape un mot clé sur google, on a des milliers de sites qui publient la même chose, d&#8217;autres qui font croire qu&#8217;ils traitent du sujet mais qui ne sont en fait qu&#8217;un ramassis de pub à la con reprenant simplement le mot clé recherché de base.Bon des fois on s&#8217;en rend bien compte, par exemple si en tapant &laquo;&nbsp;amour&nbsp;&raquo; on tombe sur &laquo;&nbsp;acheter Amour pas cher avec Amazon !&nbsp;&raquo;,  faut bien se dire qu&#8217;il y a comme un problème dans l&#8217;énoncé.<br />
On crée une adresse mail et dès le lendemain, on est inondé de pub pour Viagra, même à 22 ans, ça fait mal quand même !</p>
<p>Tout ça pour dire qu&#8217;entre les spams, les kikoolol, les noelistes (bon je sais ça n&#8217;a rien avoir mais je peux pas les saquer alors, j&#8217;en profite pour les inclure ici  !), la masse d&#8217;informations qui prolifère naturellement (du fait qu&#8217;internet soit de plus en plus démocratisé) fait que nous sommes aujourd&#8217;hui noyés sous l&#8217;information !</p>
<p>Et donc une problématique naturelle en sort : Comment faire le tri dans ce joyeux bordel ?</p>
<p>Et c&#8217;est de là qu&#8217;est née la curation !</p>
<p>Pour faire simple, comparons internet à une bibliothèque, le cuirator serait un documentaliste du web. Il serait la variable humaine qui aiderait l&#8217;internaute à trouver plus facilement l&#8217;information pertinente.</p>
<p>C&#8217;est bien beau tout ça mais en pratique, comment ça se passe ? Voyons un projet de service reprenant cette idée.</p>
<p style="text-align: center;"><a href="http://www.langma.info" target="_blank"><img src="http://www.webreport.fr/images/langma_site.jpg" alt="" /></a></p>
<p>Celui qui me paraît le plus intéressant est le projet Langma , l&#8217;idée est en fait de faire le tri dans les statuts Facebook Twitter etc., qui permettent d&#8217;être informé en temps réel de ce qui se passe dans le monde. En réalité l&#8217;idée est de considérer l&#8217;utilisateur comme un témoin, l&#8217;outil langma va faire de la veille sur ces réseaux, et ensuite l&#8217;humain derrière va traiter l&#8217;information parfois désordonnée, parfois écrite en sms et la vérifier, cela permet une réactivité bien plus rapide que dans la presse classique, sachant que pour beaucoup c&#8217;est déjà devenu un réflexe de twitter à la moindre chose.</p>
<p>On verra si ce projet et les autres tiennent la route, et vous qu&#8217;en pensez-vous ? on s&#8217;excite pour rien avec cette histoire de curation ? ou c&#8217;est la nouvelle révolution qui engendrera le nouveau web 3.0 (dit en passant web sémantique)?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/culture-web/la-curation/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Apprendre à skinner WordPress</title>
		<link>http://www.mehdicolin.com/wordpress/apprendre-a-skinner-wordpress</link>
		<comments>http://www.mehdicolin.com/wordpress/apprendre-a-skinner-wordpress#comments</comments>
		<pubDate>Tue, 29 Mar 2011 21:54:08 +0000</pubDate>
		<dc:creator>Mehdi COLIN</dc:creator>
				<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://www.mehdicolin.com/?p=51</guid>
		<description><![CDATA[Comme moi, un jour vous avez décidé de vous créer un blog, alors vous installez wordpress, le must du must dans le domaine ! L&#8217;installation dure 2 minutes chrono en main, et magique ! vous pouvez déjà commencer à bloguer yeah ! Allez on se fait un petit article, hop c&#8217;est fait ! Voyons ce [...]]]></description>
			<content:encoded><![CDATA[<p><img style="float: left; margin: 10px;" src="http://www.mehdicolin.com/wp-content/uploads/2011/03/logo_wordpress1-300x300.png" alt="Logo wordpress" width="100" height="100" /><br />
Comme moi, un jour vous avez décidé de vous créer un blog, alors vous installez <strong>wordpress</strong>, le must du must dans le domaine !</p>
<p>L&#8217;installation dure 2 minutes chrono en main, et magique ! vous pouvez déjà commencer à bloguer yeah ! Allez on se fait un petit article, hop c&#8217;est fait !<br />
Voyons ce que ça donne &#8230; hey ! mais c&#8217;est tout pourri en fait <strong>wordpress</strong>, je voulais avoir un blog super bogoss comme les autres ils ont moi !</p>
<p>A partir de ce moment là, deux solutions s&#8217;offrent à vous :<br />
<span id="more-51"></span><br />
<strong>- Installer un joli thème tout fait, il en existe des gratuits.<br />
</strong></p>
<p>Ouais mais fait chier quoi, je voulais un truc à ma sauce moi :/.</p>
<p>Ou alors comme moi, vous optez pour quelque chose de personnalisé, <strong>créer un blog à votre image</strong> quoi.<br />
Mais le hic avec wordpress, c&#8217;est que c&#8217;est une putain d&#8217;usine à gaz ! Certes, il y a un moteur de template plutôt bien fait mais bon débarquer là dedans sans prérequis n&#8217;est pas évident.</p>
<p style="text-align: left;">Heureusement que des généreux pros en la matière sont là pour aider les pauvres mortels que nous sommes, c&#8217;est en voulant créer mon propre thème WordPress que je suis tombé sur ce fantastique tutoriel vidéo, si vous maîtrisez le html, skinner wordpress ne sera plus qu&#8217;une formalité après ce visionnage !</p>
<p style="text-align: center;"><object width="480" height="360"><param name="movie" value="http://www.dailymotion.com/swf/video/xayhwp?theme=none" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><embed type="application/x-shockwave-flash" width="480" height="360" src="http://www.dailymotion.com/swf/video/xayhwp?theme=none" allowscriptaccess="always" allowfullscreen="true" wmode="direct"></embed></object></p>
<p>Je vous conseille fortement de commencer à skinner en même temps que vous regardez la vidéo, parce que s&#8217;en prendre plein dans la caboche pendant 3h sans tâter la bestiole, pour mettre tout ça en pratique seulement après c&#8217;est un peu galère&#8230;</p>
<p>Voici ci-dessous quelques ressources supplémentaires qui pourront vous être utiles :</p>
<ul class="liste1">
<li><a href="http://codex.wordpress.org/fr:Accueil" target="_blank">Liste des fonctions qui vous permettrons d&#8217;afficher les différentes informations du blog</a></li>
<li><a href="http://www.grafikart.fr/" target="_blank">Ici le blog du créateur du tuto, et pleins d&#8217;autres ressources intéressantes</a></li>
<li><a href="http://wordpress.org/extend/plugins/" target="_blank">Les plugins de wordpress</a></li>
</ul>
<p>je mettrai des informations supplémentaires au fur et à mesure, si cela peut vous aider.</p>
<p>Si vous rencontrez certaines difficultés pour personnaliser votre blog malgré ce tutoriel, n&#8217;hésitez pas à poster un commentaire, je vous aiderai dans la mesure du possible.<br />
Si vous avez juste la flemme : inutile de poster, je cherche moi même la solution à ce problème et ne suis donc pas en mesure de vous aider :/.</p>
<p><strong>A venir :</strong> un billet sur les plugins intéressants de wordpress (ouais parce que bon y en à quand même pas mal, faut bien faire un petit tri).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.mehdicolin.com/wordpress/apprendre-a-skinner-wordpress/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<enclosure url="http://www.dailymotion.com/swf/video/xayhwp?theme=none" length="-1" type="application/x-shockwave-flash" /><media:content url="http://www.dailymotion.com/swf/video/xayhwp?theme=none" type="application/x-shockwave-flash" /><itunes:explicit>no</itunes:explicit><itunes:subtitle>Comme moi, un jour vous avez décidé de vous créer un blog, alors vous installez wordpress, le must du must dans le domaine ! L&amp;#8217;installation dure 2 minutes chrono en main, et magique ! vous pouvez déjà commencer à bloguer yeah ! Allez on se fait un p</itunes:subtitle><itunes:summary>Comme moi, un jour vous avez décidé de vous créer un blog, alors vous installez wordpress, le must du must dans le domaine ! L&amp;#8217;installation dure 2 minutes chrono en main, et magique ! vous pouvez déjà commencer à bloguer yeah ! Allez on se fait un petit article, hop c&amp;#8217;est fait ! Voyons ce [...]</itunes:summary><itunes:keywords>Wordpress</itunes:keywords></item>
	<media:rating>nonadult</media:rating><media:description type="plain">Mehdi COLIN</media:description></channel>
</rss>

