<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB QUOTE - blog</title>
	<atom:link href="http://www.webquote.fr/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webquote.fr</link>
	<description>le blog du développement web par sébastien rommens</description>
	<lastBuildDate>Wed, 22 Dec 2010 22:23:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.3</generator>
		<item>
		<title>Mac OSX sous Windows</title>
		<link>http://www.webquote.fr/2010/12/23/max-osx-sous-windows/</link>
		<comments>http://www.webquote.fr/2010/12/23/max-osx-sous-windows/#comments</comments>
		<pubDate>Wed, 22 Dec 2010 22:09:41 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[Systeme]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=261</guid>
		<description><![CDATA[Installer Mac OS X sous windows, c'est possible. Pour cela vous aurez besoin d'un logiciel de virtualisation, VirtualBox par exemple (version récente). Ensuite il vous suffit de télécharger l'image ISO de Snow Leopard crackée par la Team Hazard (cherchez "Hazard osx" sur Google). La suite est assez simple si vous suivez bien le tuto suivant [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webquote.fr/wp-content/uploads/2010/12/osx1.png"><img class="aligncenter size-full wp-image-272" title="osx" src="http://www.webquote.fr/wp-content/uploads/2010/12/osx1.png" alt="" width="548" height="80" /></a></p>
<p>Installer Mac OS X sous windows, c'est possible.<br />
Pour cela vous aurez besoin d'un logiciel de virtualisation, VirtualBox par exemple (version récente).<br />
Ensuite il vous suffit de télécharger l'image ISO de Snow Leopard crackée par la Team Hazard (cherchez "Hazard osx" sur Google).</p>
<p>La suite est assez simple si vous suivez bien le tuto suivant :</p>
<p>- Après avoir créé le disque virtuel, faite "Configuration" &gt; "Système" et décochez "Activer EFI"<br />
- Lancez l'installation<br />
- Quand il vous demande sur quel disque l'installer, normalement vous ne voyez aucun disque disponible. En haut de l'écran allez dans "Utilitaire de disque", choisissez le disque virtuel créé précédemment puis onglet "effacer", donner un nom à la partition puis cliquez "Effacer" (le disque virtuel sera reformaté avec le bon système de fichiers)<br />
- Vous pouvez maintenant choisir d'installer OSX sur le disque virtuel... faites suivant, puis "Options".<br />
Dans les options d'installation, vous devez cocher certaines cases suivant la marque de votre processeur :</p>
<p>Processeur AMD:<br />
Cochez les deux mises à jour Leopard<br />
Dans "Kernels" choisissez le kernel "Legacy"<br />
Cochez les options "AMD System support"</p>
<p>Processeur Intel:<br />
Cochez les deux mises à jour Leopard<br />
Dans "bootloaders" cochez la dernière version du loader "Chameleon"<br />
Dans "Kernels" choisissez le kernel "Legacy"</p>
<p>... Lancez ensuite l'installation, et voila ! Vous avez un Snow Leopard dans une machine virtuelle sous Windows !</p>
<p>Source : http://lifehacker.com/5583650/run-mac-os-x-in-virtualbox-on-windows</p>
<p>PS: Les "Guest additions" n'existent pas encore pour OSX dans VirtualBox, si vous voulez faire fonctionner le son ou avoir une meilleure résolution graphique, reportez vous aux commentaires de l'article source qui explique très bien comment faire.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2010/12/23/max-osx-sous-windows/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IxEdit: générateur d&#8217;animations interactives</title>
		<link>http://www.webquote.fr/2010/07/20/ixedit-generateur-danimations-interactives/</link>
		<comments>http://www.webquote.fr/2010/07/20/ixedit-generateur-danimations-interactives/#comments</comments>
		<pubDate>Tue, 20 Jul 2010 14:24:43 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=240</guid>
		<description><![CDATA[IxEdit est le premier outil permettant de créer des animations interactives en JavaScript : au lieu de mettre la main dans le cambouis, il suffira de remplir des formulaires avec l’effet souhaité. C’est un véritable outil pour les designers qui pourront créer et gérer les animations en quelques clics, dans leur environnement, c’est-à-dire dans leur [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webquote.fr/wp-content/uploads/2010/07/ixedit1.jpg"><img class="aligncenter size-full wp-image-239" title="ixedit" src="http://www.webquote.fr/wp-content/uploads/2010/07/ixedit1.jpg" alt="" width="570" height="150" /></a></p>
<p><a href="http://www.ixedit.com/" target="_blank">IxEdit</a> est le premier outil permettant de <strong>créer des animations  interactives en JavaScript</strong> : au lieu de mettre la main dans le  cambouis, il suffira de remplir des formulaires avec l’effet souhaité.  C’est un véritable outil pour les designers qui pourront <strong>créer  et gérer les animations en quelques clics</strong>, dans leur  environnement, c’est-à-dire dans leur site Web ou blog.﻿</p>
<p><object width="600" height="360"><param name="movie" value="http://www.youtube.com/v/OblVz5-D8EI&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=fr_FR&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/OblVz5-D8EI&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=fr_FR&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="600" height="360"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2010/07/20/ixedit-generateur-danimations-interactives/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Faire un StoryBoard web avec Balsamiq Mockups</title>
		<link>http://www.webquote.fr/2010/02/10/storyboard-balsamiq-mockups/</link>
		<comments>http://www.webquote.fr/2010/02/10/storyboard-balsamiq-mockups/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 17:38:29 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=223</guid>
		<description><![CDATA[Je viens de découvrir aujourd'hui un site très sympa qui propose une appli web permettant de créer vos "story board web". Cette appli est disponible gratuitement online, ou il existe aussi une version desktop (adobe air) pour 79$. http://www.balsamiq.com/ Pratiquement tous les types de fenêtres, containers, boutons... sont disponible et utilisables pas un simple drag'n'drop. [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.webquote.fr/wp-content/uploads/2010/02/balsamiq1.png"><img class="aligncenter size-medium wp-image-226" title="balsamiq" src="http://www.webquote.fr/wp-content/uploads/2010/02/balsamiq1-300x173.png" alt="" width="300" height="173" /></a></p>
<p>Je viens de découvrir aujourd'hui un site très sympa qui propose une appli web permettant de créer vos "story board web".<br />
Cette appli est disponible gratuitement online, ou il existe aussi une version desktop (adobe air) pour 79$.</p>
<p>http://www.balsamiq.com/</p>
<p>Pratiquement tous les types de fenêtres, containers, boutons... sont disponible et utilisables pas un simple drag'n'drop.</p>
<p style="text-align: left;">Le rendu "façon dessin" est très sympa je trouve (L'exemple ci-dessus à été fait en moins de 1 min)</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/aJTuFRaIi_g&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/aJTuFRaIi_g&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="385"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2010/02/10/storyboard-balsamiq-mockups/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CACTI : Superviser un serveur (graph)</title>
		<link>http://www.webquote.fr/2010/01/05/cacti-superviser-un-serveur/</link>
		<comments>http://www.webquote.fr/2010/01/05/cacti-superviser-un-serveur/#comments</comments>
		<pubDate>Tue, 05 Jan 2010 11:05:44 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[Systeme]]></category>
		<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=214</guid>
		<description><![CDATA[Bonjour (et bonne année), Au menu aujourd'hui, un petit article sur la supervision d'un serveur dédié (graphiques de CPU, Mémoire, Traffic, Process...) avec CACTI. NB: CACTI est un soft en PHP et nécessite donc un serveur web installé et configuré avec PHP/Mysql). Je m'y suis attaché il y a quelques jours sur un serveur Kimsufi [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" src="http://www.cacti.net/images/cacti_banner.png" alt="" width="600" height="50" /></p>
<p>Bonjour (et bonne année),</p>
<p>Au menu aujourd'hui, un petit article sur la supervision d'un serveur dédié (graphiques de CPU, Mémoire, Traffic, Process...) avec <a href="http://www.google.fr/url?sa=t&amp;source=web&amp;ct=res&amp;cd=1&amp;ved=0CAkQFjAA&amp;url=http%3A%2F%2Fwww.cacti.net%2F&amp;ei=IhtDS7-ZKYvbjQfjrtiADg&amp;usg=AFQjCNHce4C6V8qvorgfRFlO-iw_mzqQ-w&amp;sig2=Ua1rPpT1evh0sgblNpAptQ" target="_blank">CACTI</a>.<br />
NB: CACTI est un soft en PHP et nécessite donc un serveur web installé et configuré avec PHP/Mysql).</p>
<p>Je m'y suis attaché il y a quelques jours sur un serveur Kimsufi d'OVH.</p>
<p>Avant tout, il faut savoir que certain hébergeur (OVH en l'occurrence) installent des patchs sur les noyaux linux.<br />
Verifier donc d'abord la version de votre noyau en lançant un "uname -a" ce qui devrait vous donner un truc du genre "2.6.27.10-grsec-xxxx-grs-ipv4-64".<br />
Si vous voyez "grsec" ... c'est que le patch de sécurité "grSecurity" est installé sur votre noyau... et que certains graphs ne fonctionneront pas normalement (impossible de grapher le trafic réseau et nombre de processus incorrect).<br />
Donc avant tout, faites en sorte de booter sur un noyau sans "grsec" (chez OVH vous pouvez simplement utiliser le netboot sur un noyau sans ce patch).</p>
<p>Vous pouvez maintenant vous lancer en installant <a href="http://www.cacti.net/" target="_blank">CACTI</a> ("apt-get install php5-cli php5-mysql php5-snmp snmp snmpd rrdtool cacti" ou en suivant <a href="http://docs.cacti.net/manual:087:1_installation.1_install_unix#installing_under_unix" target="_blank">ce guide</a>).<br />
NB : Reférez vous ensuite à <a href="http://www.commentcamarche.net/faq/sujet-15840-installation-de-cacti-sous-debian#par-les-depots" target="_blank">cette page</a> pour configurer correctement l'agent SNMP et CACTI lui même.</p>
<p>Une fois tout cela fait, attendez une dizaine de minutes et vous pourrez commencer à voir vos graphs.</p>
<p>Exemple:<br />
<img class="aligncenter" src="http://docs.cacti.net/_media/usertemplate:graph:traffic_-_daily_rra.png?w=&amp;h=&amp;cache=cache" alt="" width="707" height="248" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2010/01/05/cacti-superviser-un-serveur/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zen Coding, comment gagner du temps</title>
		<link>http://www.webquote.fr/2009/11/26/zen-coding-comment-gagner-du-temps/</link>
		<comments>http://www.webquote.fr/2009/11/26/zen-coding-comment-gagner-du-temps/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 23:41:19 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=209</guid>
		<description><![CDATA[&#60;div id="container"&#62;...&#60;a href="#"&#62;...&#60;/a&#62;&#60;strong&#62;...&#60;/strong&#62;&#60;/div&#62;&#60;span&#62;...&#60;/span&#62;... etc Tout développeur de site web s'est déjà forcement arraché les cheveux sur une page HTML constituée d'une suite interminable de balises &#60;XXX&#62;...&#60;/XXX&#62; plus ou moins enchevêtrées et en s'efforçant de bien indenter leur code pour ne pas oublier une foutue balise fermante... Bref, c'est long, chiant et pas très intéressant... mais [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;div id="container"&gt;...&lt;a href="#"&gt;...&lt;/a&gt;&lt;strong&gt;...&lt;/strong&gt;&lt;/div&gt;&lt;span&gt;...&lt;/span&gt;... etc</p>
<p>Tout développeur de site web s'est déjà forcement arraché les cheveux sur une page HTML constituée d'une suite interminable de balises &lt;XXX&gt;...&lt;/XXX&gt; plus ou moins enchevêtrées et en s'efforçant de bien indenter leur code pour ne pas oublier une <span style="text-decoration: line-through;">foutue</span> balise fermante...</p>
<p>Bref, c'est long, chiant et pas très intéressant... mais il faut le faire !</p>
<p>Heureusement, il existe une façon pour un peu moins se prendre la tête (je ne vous parle pas des outils comme Dreamweaver ou autres... que je n'affectionnent   pas particulièrement) non !<br />
Je vous parle là simplement d'une autre façon de coder dans votre éditeur préféré : <strong>Le Zen Coding</strong> !</p>
<p>Ce code par exemple :<br />
&lt;div id="content"&gt;<br />
&lt;h1&gt;&lt;/h1&gt;<br />
&lt;p&gt;&lt;/p&gt;<br />
&lt;/div&gt;</p>
<p>Pourra s'écrire :<br />
div#content&gt;h1+p (un div d'id "content" contenant un h1 et un p)</p>
<p>Il vous suffit simplement d'ajouter l'extention à votre édteur (si elle est dispo... au pire c'est pas trés compliqué à coder) et c'est parti.</p>
<p>Plus d'infos sur <a href="http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/" target="_blank">ce site</a>.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=7405114&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="400" height="300" src="http://vimeo.com/moogaloop.swf?clip_id=7405114&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://vimeo.com/7405114">Zen Coding v0.5</a> from <a href="http://vimeo.com/user2060676">Sergey Chikuyonok</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/11/26/zen-coding-comment-gagner-du-temps/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Compliez et Partagez vos codes sources, en ligne !</title>
		<link>http://www.webquote.fr/2009/11/25/compliez-et-partagez-vos-codes-source-en-ligne/</link>
		<comments>http://www.webquote.fr/2009/11/25/compliez-et-partagez-vos-codes-source-en-ligne/#comments</comments>
		<pubDate>Wed, 25 Nov 2009 16:42:59 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=203</guid>
		<description><![CDATA[Après le célèbre pastebin.com qui permet de partager un code source rapidement, un nouveau site vient de voir le jour : ideone.com Ce dernier vous permet comme son compère, de partager votre code, mais aussi (et surtout) de le compiler en ligne ! Les langages supportés sont nombreux : Assembler, Bash, Brainfuck, C, C++, D [...]]]></description>
			<content:encoded><![CDATA[<p>Après le célèbre <a href="http://pastebin.com/" target="_blank">pastebin.com</a> qui permet de partager un code source rapidement, un nouveau site vient de voir le jour : <a href="http://ideone.com/" target="_blank">ideone.com</a></p>
<p>Ce dernier vous permet comme son compère, de partager votre code, mais aussi (et surtout) de le <strong>compiler en ligne</strong> !<br />
Les langages supportés sont nombreux : Assembler, Bash, Brainfuck, C, C++, D (dmd), Haskell, Icon, Java, Lua, Nice, Ocaml, Pascal, Perl, PHP, Pike, Python, Ruby, Vala.</p>
<p>Un petit exemple de "brainfuck" <img src='http://www.webquote.fr/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /><br />
&gt;++++++++++<br />
[&gt;++++++++&gt;++++++++++&gt;+++++++++++&gt;++++++++++++&gt;++++++++++++&gt;+++&gt;++++++++++&gt;++++++++++&gt;++++++++++&gt;+++++++++++&gt;++++++++++++&gt;+++&gt;+++++++++++&gt;++++++++++&gt;++++++++++&gt;++++++++++++&gt;++++++++++&gt;++++++++++++&gt;+++++++++++&gt;++++++++++++&gt;+++&gt;++++++++++&gt;++++++++++&gt;+++&gt;++++++++++++&gt;++++++++++&gt;++++++++++&gt;+++++++++++&gt;++++++++++++&gt;+++++++++++&gt;++++++++++++&gt;++++++++++&gt;+++++&gt;++++++++++&gt;+++++++++++&gt;+++&gt;+++&gt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;-]<br />
&gt;+++&gt;---&gt;--&gt;---&gt;----&gt;++&gt;-&gt;++++&gt;+&gt;++++&gt;-----&gt;++&gt;--&gt;+&gt;-&gt;----&gt;+&gt;---&gt;++++&gt;-----&gt;++&gt;&gt;+&gt;++&gt;-&gt;+&gt;--&gt;+++&gt;---&gt;+&gt;----&gt;+&gt;----&gt;++&gt;++++&gt;++&gt;+++&gt;<br />
&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;<br />
&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.&gt;.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/11/25/compliez-et-partagez-vos-codes-source-en-ligne/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Microsoft SuperPreview</title>
		<link>http://www.webquote.fr/2009/10/14/microsoft-superpreview/</link>
		<comments>http://www.webquote.fr/2009/10/14/microsoft-superpreview/#comments</comments>
		<pubDate>Wed, 14 Oct 2009 12:24:53 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=192</guid>
		<description><![CDATA[Microsoft vient de lancer ces derniers jours un nouvel outil (gratuit) permettant de comparer un site web sur Internet Explorer version 6, 7 et 8 ! A la différence de IEtester ou MultipleIE, celui-ci est censé afficher le site exactement comme s'il l'était dans la version choisie. Seul Internet Explorer est supporté pour le moment, [...]]]></description>
			<content:encoded><![CDATA[<p>Microsoft vient de lancer ces derniers jours un nouvel outil (gratuit) permettant de comparer un site web sur Internet Explorer version 6, 7 et 8 !</p>
<p style="text-align: center;"><img class="aligncenter" title="Microsoft-Expression-Web-SuperPreview" src="/wp-content/uploads/2009/10/Microsoft-Expression-Web-SuperPreview.png" alt="Microsoft-Expression-Web-SuperPreview" width="500" height="360" /></p>
<p>A la différence de IEtester ou MultipleIE, celui-ci est censé afficher le site exactement comme s'il l'était dans la version choisie.</p>
<p>Seul Internet Explorer est supporté pour le moment, mais Firefox et Safari seront ajoutés.<br />
Il devrait être possible d'accéder à des navigateurs par le réseau pour tester d'autres plate-formes (par exemple Mac).</p>
<p>Il est possible de comparer deux versions cote à cote ou même par transparence !</p>
<p><a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677&amp;displaylang=en" target="_blank">Microsoft SuperPreview est disponible en téléchargement ici.</a></p>
<p><strong>Edit</strong>: Pour le moment il semblerait qu'on ne puisse pas vraiment naviguer via les liens (c'est pas comme si c'était une fonctionnalité primordiale sur un site web <img src='http://www.webquote.fr/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> ) du coup ça devient un peu lourd de devoir saisir chaque URL une par une ! Le but est donc UNIQUEMENT de comparer l'affichage sur les différentes versions d'IE.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/10/14/microsoft-superpreview/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Alias Gmail : savoir reconnaitre les spammeurs</title>
		<link>http://www.webquote.fr/2009/10/09/alias-gmail/</link>
		<comments>http://www.webquote.fr/2009/10/09/alias-gmail/#comments</comments>
		<pubDate>Fri, 09 Oct 2009 12:52:18 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=185</guid>
		<description><![CDATA[Aujourd'hui au menu : les alias Gmail. Si comme beaucoup votre boite mail est sur gmail (sinon commencez à y réfléchir... c'est vraiment la meilleure !) il faut savoir que vous avez une infinité d'alias (un autre mail qui pointe dans la même boite). En effet, lorsque vous vous inscrivez sur un site, on vous [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><img class="aligncenter" src="http://mail.google.com/mail/images/2/5/logo1.png" alt="" width="143" height="59" />Aujourd'hui au menu : les alias Gmail.<br />
Si comme beaucoup votre boite mail est sur gmail (sinon commencez à y réfléchir... c'est vraiment la meilleure !) il faut savoir que vous avez une infinité d'alias (un autre mail qui pointe dans la même boite).</p>
<p style="text-align: left;">En effet, lorsque vous vous inscrivez sur un site, on vous demande dans 99% des cas votre mail.<br />
Seulement parfois ces sites collectent et revendent ces adresses mail et vous devenez très vite la cible de spammeurs.</p>
<p style="text-align: left;">L'astuce que je vous présente ici consiste à utiliser le système d'alias de Gmail pour connaitre le site qui a revendu votre email (ou sur lequel le spammeur à trouvé votre adresse).</p>
<p>Voici l'astuce  :<br />
Lorsque vous saisissez votre adresse mail sur un site, il suffit d'ajouter le signe "+" après votre adresse, suivi de n'importe quoi (email<strong><em>+N_IMPORTE_QUOI</em></strong>@gmail.com)</p>
<p style="text-align: left;">Qui donnerait par exemple si votre mail est "jean@gmail.com" : jean+facebook@gmail.com<br />
Vous recevrez donc tous les mails comme si vous aviez saisi votre adresse mail classique mais vous pourrez (en le suffixant par +nom_du_site) connaitre l'origine du mail (si vous recevez plus tard du spam envoyé à "jean+facebook@gmail.com", vous saurez donc tout de suite d'où ça vient !</p>
<p style="text-align: left;">
<p style="text-align: left;">NB: En utilisant cette astuce, vous pourrez aussi plus facilement créer des filtres/libellés selon la provenance des mails que vous recevrez.</p>
<p style="text-align: left;">
<p style="text-align: left;">
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/10/09/alias-gmail/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Générateur de sprites</title>
		<link>http://www.webquote.fr/2009/10/01/generateur-de-sprites/</link>
		<comments>http://www.webquote.fr/2009/10/01/generateur-de-sprites/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 08:21:11 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[utile]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=177</guid>
		<description><![CDATA[Qu'est-ce qu'un sprite ? Un sprite est une image qui en contient plusieurs. Comme un exemple vaux mieux qu'un long discours, voila une exemple de sprite : et un autre Le premier, comme vous l'aurez remarqué viens de google. C'est en fait l'une des seules images du site ! A quoi ça sert ? L'intérêt [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Qu'est-ce qu'un sprite ?</strong></p>
<p>Un sprite est une image qui en contient plusieurs.<br />
Comme un exemple vaux mieux qu'un long discours, voila une exemple de sprite :</p>
<p><img class="alignnone size-full wp-image-178" title="sprite google" src="http://www.webquote.fr/wp-content/uploads/2009/10/sprite.png" alt="sprite google" width="164" height="106" /></p>
<p>et un autre</p>
<p><img class="alignnone size-full wp-image-179" title="sprite2" src="http://www.webquote.fr/wp-content/uploads/2009/10/medias_pictos.png" alt="sprite2" width="132" height="66" /></p>
<p>Le premier, comme vous l'aurez remarqué viens de google. C'est en fait l'une des seules images du site !</p>
<p><strong>A quoi ça sert ?</strong></p>
<p>L'intérêt principal des sprites est de minimiser les temps de chargement et d'affichage sur les pages d'un site.<br />
En effet, l'image chargée par le navigateur puis mise en cache peut être utilisée n'importe où dans la page sans qu'il y ai besoin d'en télécharger une nouvelle.<br />
Là où l'effet se fait le plus ressentir est sur les "rollover" (les boutons qui changent d'aspect au survol de la souris, voir 2eme exemple) car l'image qui remplace la première au survol de souris est déjà chargée ! (donc plus besoin de pré-charger les images des rollover comme nous le faisions il y a quelques années en javascript).</p>
<p><strong>Comment ça fonctionne ?</strong></p>
<p>C'est là qu'intervient le CSS.</p>
<pre>
<div class="codecolorer-container css default" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><div class="css codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap">a<span style="color: #6666ff;">.lang</span> <span style="color: #00AA00;">&#123;</span><br />
  <span style="color: #000000; font-weight: bold;">padding-right</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span> <span style="color: #00AA00;">;</span><br />
  <span style="color: #000000; font-weight: bold;">background-repeat</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">no-repeat</span> <span style="color: #00AA00;">;</span><br />
  <span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">drapeaux.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #00AA00;">;</span><br />
<span style="color: #00AA00;">&#125;</span><br />
a<span style="color: #6666ff;">.lang</span><span style="color: #6666ff;">.fr</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span>   <span style="color: #933;">0px</span> <span style="color: #933;">0px</span> <span style="color: #00AA00;">&#125;</span><br />
a<span style="color: #6666ff;">.lang</span><span style="color: #6666ff;">.de</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-20px</span> <span style="color: #933;">0px</span> <span style="color: #00AA00;">&#125;</span><br />
a<span style="color: #6666ff;">.lang</span><span style="color: #6666ff;">.it</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-40px</span> <span style="color: #933;">0px</span> <span style="color: #00AA00;">&#125;</span><br />
a<span style="color: #6666ff;">.lang</span><span style="color: #6666ff;">.es</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-60px</span> <span style="color: #933;">0px</span> <span style="color: #00AA00;">&#125;</span><br />
a<span style="color: #6666ff;">.lang</span><span style="color: #6666ff;">.uk</span> <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span> <span style="color: #933;">-80px</span> <span style="color: #933;">0px</span> <span style="color: #00AA00;">&#125;</span></div></div>
</pre>
<p>Ici imaginez un sprite avec des drapeaux de pays... au lieux d'avoir une image par drapeau, vous n'en avez donc qu'une.<br />
Il suffit alors dans le CSS de définir la position de chaque drapeau via "background-position" et le tour est joué.</p>
<p><strong>Comment créer des sprites rapidement ?</strong></p>
<p>Pour vous éviter de faire les sprites à la main, vous pouvez simplement utiliser quelques outils online qui vous allez le constater... sont bien pratique !</p>
<p><a href="http://spritegen.website-performance.org/ " target="_blank">spritegen.website-performance.org</a> vous propose un générateur de sprites :<br />
Vous mettez toutes vos images dans un .zip, vous uploadez ce fichier zippé et spritegen vous génére de lui même le sprite en vous donnant même le code CSS avec les positions qui conviennent !</p>
<p><a href="http://spriteme.org/" target="_blank">spriteme.org</a> vous propose quant à lui un "plugin" javascript à ajouter à vos favoris qui analyse les images de n'importe quel site sur lequel vous surfez et vous propose de générer des sprites avec ces images.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/10/01/generateur-de-sprites/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>[MAJ] Des graphs sur votre site</title>
		<link>http://www.webquote.fr/2009/09/30/des-graphs-sur-votre-site/</link>
		<comments>http://www.webquote.fr/2009/09/30/des-graphs-sur-votre-site/#comments</comments>
		<pubDate>Wed, 30 Sep 2009 11:27:15 +0000</pubDate>
		<dc:creator>Seb</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.webquote.fr/?p=172</guid>
		<description><![CDATA[Vous voulez inserer des graphiques sur vorte site mais ça vous semble compliqué au premier abord ? Et bien non, c'est très simple puisqu'il existe heureusement quelques librairies gratuites qui vont vous les générer automatiquement en leur envoyant simplement les données et quelques paramètres. Je ne vous présenterai ici que mes 2 préférées : - [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-171" title="graphs" src="http://www.webquote.fr/wp-content/uploads/2009/09/graphs.png" alt="graphs" width="540" height="80" /><br />
Vous voulez inserer des graphiques sur vorte site mais ça vous semble compliqué au premier abord ?<br />
Et bien non, c'est très simple puisqu'il existe heureusement quelques librairies gratuites qui vont vous les générer automatiquement en leur envoyant simplement les données et quelques paramètres.</p>
<p>Je ne vous présenterai ici que mes 2 préférées :</p>
<p>- <strong><a href="http://www.highcharts.com/">highcharts</a> (librairie Javascript produisant du SVG/VML)</strong> :</p>
<p>De loin ce que j'ai trouvé de meilleur !<br />
Une seule petite librairie Javascript à inclure, un code simple à écrire.<br />
Particularités intéressantes : Combinaisons de différents graphs, multi-axes, zoomable, chargement en ajax des données pour un rendu "temps réel", conversion des graphs en PNG,PDF et JPG ... presque tout est configurable (même les actions de survol, de clic ...)</p>
<div id="highcharts_ex1"></div>
<p><script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script><br />
<script type="text/javascript">
var chart;
jQuery(document).ready(function() {
var highchartsOptions = Highcharts.getOptions();
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'highcharts_ex1'
      },
      title: {
         text: 'Combination chart'
      },
      xAxis: {
         categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
      },
      tooltip: {
         formatter: function() {
            var s;
            if (this.point.name) { // the pie chart
               s = ''+
                  this.point.name +': '+ this.y +' fruits';
            } else {
               s = ''+
                  this.x  +': '+ this.y;
            }
            return s;
         }
      },
      labels: {
         items: [{
            html: 'Total fruit consumption',
            style: {
               left: '40px',
               top: '8px',
               color: 'black'            
            }
         }]
      },
      series: [{
         type: 'column',
         name: 'Jane',
         data: [3, 2, 1, 3, 4]
      }, {
         type: 'column',
         name: 'John',
         data: [2, 3, 5, 7, 6]
      }, {
         type: 'column',
         name: 'Joe',
         data: [4, 3, 3, 9, 0]
      }, {
         type: 'spline',
         name: 'Average',
         data: [3, 2.67, 3, 6.33, 3.33]
      }, {
         type: 'pie',
         name: 'Total consumption',
         data: [{
            name: 'Jane',
            y: 13,
            color: highchartsOptions.colors[0] // Jane's color
         }, {
            name: 'John',
            y: 23,
            color: highchartsOptions.colors[1] // John's color
         }, {
            name: 'Joe',
            y: 19,
            color: highchartsOptions.colors[2] // Joe's color
         }],
         center: [100, 80],
         size: 100,
         showInLegend: false,
         dataLabels: {
            enabled: false
         }
      }]
   });
});
</script></p>
<p>Plus d'exemples ici : <a href="http://www.highcharts.com/demo/">http://www.highcharts.com/demo/</a></p>
<p>- <strong><a href="http://www.fusioncharts.com/free/">FusionCharts</a> (Flash)</strong> :</p>
<p>Tous les exemples <a href="http://www.fusioncharts.com/free/gallery/" target="_blank">ici</a>.<br />
La doc <a href="http://www.fusioncharts.com/free/docs/" target="_blank">ici</a>.</p>
<p>Voila, je vous laisse choisir... <span style="font-size:9px;">(message subliminal : highcharts c'est de la bombe ! <img src='http://www.webquote.fr/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> )</span></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webquote.fr/2009/09/30/des-graphs-sur-votre-site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

