<?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>Du code et du libre &#187; Outils web</title>
	<atom:link href="https://blog.developpez.com/ducodeetdulibre/pcategory/outilsweb/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.developpez.com/ducodeetdulibre</link>
	<description></description>
	<lastBuildDate>Thu, 13 Nov 2014 08:14:19 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.1.42</generator>
	<item>
		<title>La Gamification pour apprendre plus facilement</title>
		<link>https://blog.developpez.com/ducodeetdulibre/p12668/outilsweb/la-gamification-pour-apprendre-plus-facilement</link>
		<comments>https://blog.developpez.com/ducodeetdulibre/p12668/outilsweb/la-gamification-pour-apprendre-plus-facilement#comments</comments>
		<pubDate>Thu, 10 Jul 2014 08:31:41 +0000</pubDate>
		<dc:creator><![CDATA[imikado]]></dc:creator>
				<category><![CDATA[Outils web]]></category>

		<guid isPermaLink="false">http://blog.developpez.com/ducodeetdulibre/?p=638</guid>
		<description><![CDATA[Introduction Vous savez tous que l&#8217;on apprend mieux en s&#8217;amusant, et certains sites on trouver des solutions pour s&#8217;amuser en apprenant à coder du css, du ruby&#8230; Je vais ici vous lister plusieurs sites proposant la gamification pour apprendre. Css &#8230; <a href="https://blog.developpez.com/ducodeetdulibre/p12668/outilsweb/la-gamification-pour-apprendre-plus-facilement">Lire la suite <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p><strong>Introduction</strong></p>
<p>Vous savez tous que l&rsquo;on apprend mieux en s&rsquo;amusant, et certains sites on trouver des solutions pour s&rsquo;amuser en apprenant à coder du css, du ruby&#8230;<br />
Je vais ici vous lister plusieurs sites proposant la gamification pour apprendre.</p>
<p><strong>Css : Css Diner</strong><br />
Ce site vous demande de selectionner des elements visuels sur la table en tapant dans un champ texte le code css adéquat.<br />
Vous avez à votre droite une aide CSS contextuel pour vour aider à passer le niveau.</p>
<p>Le site: http://flukeout.github.io/</p>
<p><a href="http://blog.developpez.com/ducodeetdulibre/files/2014/07/cssdiner.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/07/cssdiner.png" alt="cssdiner" width="600" height="446" class="alignnone size-full wp-image-639" /></a></p>
<p><strong>Ruby On Rails: Rails for zombies</strong><br />
Ici vous devez manipulez une base de données avec la couche modèle de RoR.<br />
Pour chaque challenge, une vidéo d&rsquo;explication précède l&rsquo;exercice.</p>
<p>Le site: http://railsforzombies.org/levels/1/challenges/1</p>
<p><a href="http://blog.developpez.com/ducodeetdulibre/files/2014/07/railsforzombies.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/07/railsforzombies.png" alt="railsforzombies" width="600" height="286" class="alignnone size-full wp-image-640" /></a></p>
<p><strong>Expressions régulières: Regex Cross­word</strong><br />
Ici le jeu est différent: vous avez des cases vides qu&rsquo;il faut remplir en respectant les conditions rédigées en expressions régulières.<br />
Par exemple pour la première case, on a A|Z et A|B, la réponse est donc A</p>
<p>Le site: http://regexcrossword.com/</p>
<p><a href="http://blog.developpez.com/ducodeetdulibre/files/2014/07/regexp.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/07/regexp.png" alt="regexp" width="600" height="622" class="alignnone size-full wp-image-641" /></a></p>
<p><strong>Conclusion</strong><br />
N&rsquo;hesitez pas à partager vos sites de gamification.</p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Comment choisir son framework php</title>
		<link>https://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php</link>
		<comments>https://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php#comments</comments>
		<pubDate>Sat, 08 Feb 2014 23:12:43 +0000</pubDate>
		<dc:creator><![CDATA[imikado]]></dc:creator>
				<category><![CDATA[Comment choisir son framework]]></category>
		<category><![CDATA[Développement]]></category>
		<category><![CDATA[Outils web]]></category>

		<guid isPermaLink="false">http://blog.developpez.com/ducodeetdulibre/?p=484</guid>
		<description><![CDATA[Introduction Depuis quelques années, nous avons vu se developper sur notre plateforme php de nombreux frameworks. Le plus difficile aujourd&#8217;hui est de choisir parmi eux. Jusque là, vous aviez à votre disposition un tableau comparatif: http://socialcompare.com&#8230; Aujourd&#8217;hui grâce à l&#8217;initiative &#8230; <a href="https://blog.developpez.com/ducodeetdulibre/p12482/outilsweb/comment-choisir-son-framework-php">Lire la suite <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/02/siteBlogMVC-291x300.png" alt="siteBlogMVC" width="291" height="300" class="alignright size-medium wp-image-499" /><br />
<strong>Introduction</strong><br />
Depuis quelques années, nous avons vu se developper sur notre plateforme php de nombreux frameworks.<br />
Le plus difficile aujourd&rsquo;hui est de choisir parmi eux.<br />
Jusque là, vous aviez à votre disposition un tableau comparatif: <a href="http://socialcompare.com/fr/comparison/php-frameworks-comparison">http://socialcompare.com&#8230;</a><br />
Aujourd&rsquo;hui grâce à l&rsquo;initiative du site grafikart, vous avez une autre manière de comparer: le projet blogmvc.com (<a href="http://blogmvc.com">http://blogmvc.com</a>)</p>
<p><strong>Présentation du projet</strong><br />
L&rsquo;idée est simple: montrer comment coder la même application avec différents frameworks du marché.<br />
Pour cela, l&rsquo;auteur met à disposition un projet github + des spécifications + une demo HTML du rendu attendu.<br />
Ensuite libre à chacun de proposer une version de ce projet développé avec son framework préféré.<br />
<a href="http://blog.developpez.com/ducodeetdulibre/files/2014/02/siteBlogMVCgithub.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/02/siteBlogMVCgithub.png" alt="siteBlogMVCgithub" width="500" height="427" class="alignnone size-full wp-image-504" /></a><br />
Le projet github: <a href="https://github.com/Grafikart/BlogMVC">https://github.com/Grafikart/BlogMVC</a></p>
<p><strong>Les frameworks php présentées actuellement</strong><br />
Actuellement, seuls 5 frameworks php sont représentés:</p>
<ul>
<li><a href="http://cakephp.org/">CakePHP</a> </li>
<li><a href="http://laravel.com/">Laravel 4</a></li>
<li><a href="http://symfony.com/">Symfony 2</a></li>
<li><a href="http://framework.zend.com/">ZendFramework 2</a></li>
<li><a href="http://mkframework.com/">MKFramework</a></li>
</ul>
<p>L&rsquo;adresse du site du projet:<br />
<a href="http://blogmvc.com/">http://blogmvc.com/</a></p>
<p>L&rsquo;adresse du billet expliquant l&rsquo;initiative: <a href="http://www.grafikart.fr/blog/comparer-frameworks-mvc">http://www.grafikart.fr/blog/comparer-frameworks-mvc</a></p>
<p><strong>Présentation des arborescences des 5 projets</strong><br />
Arborescence fermée<br />
<a href="http://blog.developpez.com/ducodeetdulibre/files/2014/02/blogMVCclosed.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/02/blogMVCclosed-300x146.png" alt="blogMVCclosed" width="300" height="146" class="alignnone size-medium wp-image-493" /></a></p>
<p>Arborescence dépliée<br />
<a href="http://blog.developpez.com/ducodeetdulibre/files/2014/02/blogMVC.png"><img src="http://blog.developpez.com/ducodeetdulibre/files/2014/02/blogMVC-300x250.png" alt="blogMVC" width="300" height="250" class="alignnone size-medium wp-image-490" /></a></p>
<p>En espérant que cette initiative vous aide à trouver votre framework <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /></p>
<p>note: pour information, le projet n&rsquo;est pas restreint aux frameworks php (il y a par exemple RoR et Django), libre à vous de proposer votre framework peut importe son langage (ruby, python, perl&#8230;)</p>
<p><a href="http://blog.developpez.com/ducodeetdulibre/p12718/developpement/comment-choisir-son-framework-sommaire">Retour au menu principal</a></p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Développer des jeux web sans flash</title>
		<link>https://blog.developpez.com/ducodeetdulibre/p12146/non-classe/developper-des-jeux-web-sans-flash</link>
		<comments>https://blog.developpez.com/ducodeetdulibre/p12146/non-classe/developper-des-jeux-web-sans-flash#comments</comments>
		<pubDate>Wed, 24 Jul 2013 07:00:32 +0000</pubDate>
		<dc:creator><![CDATA[imikado]]></dc:creator>
				<category><![CDATA[Non classé]]></category>
		<category><![CDATA[Outils web]]></category>

		<guid isPermaLink="false">http://blog.developpez.com/ducodeetdulibre/?p=57</guid>
		<description><![CDATA[Introduction Il y a quelques années encore, lorsque l&#8217;on parlait jeux, il fallait lancer son Macromedia Flash (depuis racheté par Adobe) Ensuite sont apparus des libraries et autres compilateur pour générer des fichiers swf (flash) sans le logiciel propriétaire (Mstasc, &#8230; <a href="https://blog.developpez.com/ducodeetdulibre/p12146/non-classe/developper-des-jeux-web-sans-flash">Lire la suite <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p><strong>Introduction</strong><br />
Il y a quelques années encore, lorsque l&rsquo;on parlait jeux, il fallait lancer son Macromedia Flash (depuis racheté par Adobe)<br />
Ensuite sont apparus des libraries et autres compilateur pour générer des fichiers swf (flash) sans le logiciel propriétaire (Mstasc, Haxe&#8230;)<br />
Aujourd&rsquo;hui, on peut développer de petits jeux 2D sans flash, grâce à l&rsquo;HTML5, et pour cela, je vais vous faire découvrir quelques outils/librairies bien pratique</p>
<p>note: je ferais prochainement un article sur Haxe (pas le déodorant)<br />
Mise à jour: billet publié  <a href="http://blog.developpez.com/ducodeetdulibre/p12151/non-classe/haxe-coder-une-fois-deployer-partout-ou-presque" title="Haxe, un langage polyvalent" target="_blank">http://blog.developpez.com/ducodeetdulibre/p12151/non-classe/haxe-coder-une-fois-deployer-partout-ou-presque</a></p>
<p><strong>Le logiciel Construct2</strong><br />
Certains logiciels permettent de faire du wysiwig* à base de drag and drop et de popup de paramétrage de créer des jeux HTML5 en toute simplicité.<br />
Construct2, édité par Scirra fait parti de ces logiciels, il permet bien plus encore: selon la licence utilisé, on peut générer des applications IOS, Windows phone, Android&#8230;<br />
Mais ici, interessons nous à sa capacité HTML5: son interface intuitive et assez ergonomique permet facilement de créer ses premiers jeux sans avoir à mettre  les mains dans le cambouis<br />
Malheureusement, il n&rsquo;est disponible que sous windows, je vous invite à le tester si vous avez windows, ou une machine virtuelle tournant sous windows <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /><br />
Le site: https://www.scirra.com/ (regardez la vidéo de démonstration)</p>
<p>*WYSIWIG Why You See Is What You Get (interface qui permet de voir le rendu en temps réel) </p>
<p><strong>La bibliothèque Html5Quintus</strong><br />
Si vous préférez/aimez coder, vous apprécierez plus des librairies HTML5 qui comble le manque de confort de cette nouvelle technologie.<br />
En effet, lorsque vous êtes habitué à faire des jeux sous flash, vous êtes habitué à un minimum de confort: comme créer un clip, le déplacer/le modifier le rendre invisible.<br />
Ici, en HTML5, tout est à gérer: si vous souhaitez créer un objet image et le déplacer vers la droite: il faudra le dessiner sur le canvas, puis effacer le canvas, et le redessiner à sa nouvelle position (d&rsquo;ou l&rsquo;utilité d&rsquo;avoir autant de canvas que d&rsquo;élements dynamique: un peu comme des calques)<br />
Mais grâce au travail de nombreux développeurs, vous pouvez apprécier des librairies qui vous permettront facilement de faire des animations, de gérer les collisions, mais aussi d&rsquo;appliquer des lois physiques sur vos élements.<br />
<a href="http://html5quintus.com/" title="html5quintus" target="_blank">HTML5Quintus</a> a l&rsquo;avantage de vous permettre de la tester sans l&rsquo;installer sur leur site:<br />
En effet vous pouvez modifier le code d&rsquo;un modeste jeu de plateforme pour voir l&rsquo;incidence sur le jeu: modifier le comportement des ennemies pour qu&rsquo;ils disparaissent à votre contact, ou placer le chateau directement sur vous pour gagner à chaque fois <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" /><br />
Cette librairie est très simple à utiliser et vous ravira si vous souhaitez faire de petits jeux 2D bien sympathique</p>
<p><strong>Le cas Turbulenz</strong><br />
Turbulenz est un cas à part c&rsquo;est un SDK qui utilise majoritairement WebGL et qui peut vous permettre de développer des jeux très puissants comme &laquo;&nbsp;Save the Day&nbsp;&raquo; <a href="https://turbulenz.com/games/save-the-day" target="_blank">https://turbulenz.com/games/save-the-day</a></p>
<p>Le site: <a href="http://biz.turbulenz.com/turbulenz" target="_blank">http://biz.turbulenz.com/turbulenz</a></p>
<p><strong>Conclusion</strong><br />
Comme vous avez pu le voir, vous avez le choix dans les armes pour utiliser votre navigateur comme plateforme de Jeux.<br />
Les avantages sont nombreux:</p>
<ul>
<li>Permettre de jouer sur votre site</li>
<li>Multiplateforme</li>
<li>Pas d&rsquo;installation, on peut jouer de n&rsquo;importe ou sans avoir besoin de droits particuliers</li>
<li>Plus facile à promouvoir par son coté web (un lien dans un email/sur twitter et voila)</li>
</ul>
<p>Bien sur, il existe d&rsquo;autres librairies, je vous en ai présenté ici un échantillon, mais n&rsquo;hésitez pas à partager vos ressources <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /><br />
Et vive l&rsquo;HTML5 <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" /></p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Faire de jolie checkbox sans javascript</title>
		<link>https://blog.developpez.com/ducodeetdulibre/p12119/non-classe/faire-de-jolie-checkbox-sans-javascript</link>
		<comments>https://blog.developpez.com/ducodeetdulibre/p12119/non-classe/faire-de-jolie-checkbox-sans-javascript#comments</comments>
		<pubDate>Fri, 12 Jul 2013 10:49:00 +0000</pubDate>
		<dc:creator><![CDATA[imikado]]></dc:creator>
				<category><![CDATA[Non classé]]></category>
		<category><![CDATA[Outils web]]></category>

		<guid isPermaLink="false">http://blog.developpez.com/ducodeetdulibre/?p=37</guid>
		<description><![CDATA[Un article intéressant sur le ferme du web indique comment faire de jolies checkbox en utilisant un code compatibles sur tous les navigateurs. L&#8217;article : http://www.lafermeduweb.net/billet/css-checkbox-personnalisez-vos-checkbox-sans-javascript-1614.html Et vous, avez-vous des astuces pratique en css pour embellir vos sites web ?]]></description>
				<content:encoded><![CDATA[<p>Un article intéressant sur le ferme du web indique comment faire de jolies checkbox en utilisant un code compatibles sur tous les navigateurs.</p>
<p>L&rsquo;article : <a href="http://www.lafermeduweb.net/billet/css-checkbox-personnalisez-vos-checkbox-sans-javascript-1614.html" title="http://www.lafermeduweb.net/billet/css-checkbox-personnalisez-vos-checkbox-sans-javascript-1614.html">http://www.lafermeduweb.net/billet/css-checkbox-personnalisez-vos-checkbox-sans-javascript-1614.html</a></p>
<p>Et vous, avez-vous des astuces pratique en css pour embellir vos sites web  ?</p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Présentation d&#8217;un service pour gérer ses commentaires : DISQUS</title>
		<link>https://blog.developpez.com/ducodeetdulibre/p12110/non-classe/presentation-dun-service-pour-gerer-ses-commentaires-disqus</link>
		<comments>https://blog.developpez.com/ducodeetdulibre/p12110/non-classe/presentation-dun-service-pour-gerer-ses-commentaires-disqus#comments</comments>
		<pubDate>Sun, 07 Jul 2013 20:31:11 +0000</pubDate>
		<dc:creator><![CDATA[imikado]]></dc:creator>
				<category><![CDATA[Non classé]]></category>
		<category><![CDATA[Outils web]]></category>

		<guid isPermaLink="false">http://blog.developpez.com/ducodeetdulibre/?p=16</guid>
		<description><![CDATA[Lorsque l&#8217;on développe un site web, on veut souvent donner la parole aux internautes qui visitent celui-ci. Dans le cas des blogs, podcasts&#8230; on met souvent en place un module de commentaires. Des commentaires pourquoi faire ? Lorsque l&#8217;on écrit &#8230; <a href="https://blog.developpez.com/ducodeetdulibre/p12110/non-classe/presentation-dun-service-pour-gerer-ses-commentaires-disqus">Lire la suite <span class="meta-nav">&#8594;</span></a>]]></description>
				<content:encoded><![CDATA[<p>Lorsque l&rsquo;on développe un site web, on veut souvent donner la parole aux internautes qui visitent celui-ci.<br />
Dans le cas des blogs, podcasts&#8230; on met souvent en place un module de commentaires.</p>
<p><strong>Des commentaires pourquoi faire ?</strong><br />
Lorsque l&rsquo;on écrit des articles ou publie un podcast, notre premier but est de se faire lire par un maximum de personnes. Les commentaires permettent d&rsquo;avoir un retour sur ce que l&rsquo;on publie.<br />
Ils permettent de recueillir des critiques plus ou moins constructives (erreurs, ton&#8230;) mais aussi d&rsquo;avoir un point de vue différent voir des pistes d&rsquo;éléments complémentaires ou à approfondir qui enrichisse l&rsquo;article.</p>
<p><strong>Comment mettre en place des commentaires ?</strong><br />
Selon que vous utilisiez un CMS/outil de blogging/service en ligne, beaucoup incluent un module de gestion de commentaire, mais vous n&rsquo;utilisez pas toujours ce type de produit: vous pouvez développer vous-même votre blog/site ou utiliser un produit ne gérant pas les commentaires et leur modération</p>
<p><strong>Et c&rsquo;est là qu&rsquo;intervient DISQUS</strong><br />
DISQUS est un service en ligne de gestion de commentaire: il permet en quelques clics d&rsquo;installer un service de commentaires sur son site, avec plusieurs avantages:</p>
<p><strong>Ses avantages pour le développeur</strong></p>
<ol>
<li>facilité d&rsquo;installation: un simple code javascript à ajouter à son site web</li>
<li>possibilité de mettre en place une modération (tout modérer, avertir de nouveaux commentaires à modérer)</li>
<li>identifier les auteurs de commentaires: les obligeant à se connecter pour poster (via DISQUS/facebook/twitter&#8230;)</li>
<li>Fonctionnant en javascript, vous pouvez même l&rsquo;utiliser sur des pages html <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> (sans php/mysql ou autre base de donnée)</li>
</ol>
<p><strong>Ses avantages pour les internautes</strong><br />
Ce service a plusieurs avantages pour l&rsquo;utilisateur, notamment car il est utilisé sur beaucoup de sites</p>
<ol>
<li>Permet de suivre facilement ses commentaires sur les sites l&rsquo;utilisant</li>
<li>On peut s&rsquo;authentifier via son compte facebook/twitter ou créer un compte sur DISQUS</li>
<li>Son compte permet de personnaliser son avatar, le lien vers son site web&#8230;</li>
<li>Un peu comme tweeter, on peut décider de suivre une personne, suite à un commentaire pertinant par exemple</li>
</ol>
<p><strong>Conclusion</strong><br />
Comme vous avez pu le lire, ce service est simple à installer et riche en fonctionnalité, jetez-y un coup d&rsquo;oeil par curiosité il pourrait remplacer votre système de commentaire actuel ou à venir <img src="https://blog.developpez.com/ducodeetdulibre/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley" /></p>
<p>Le site: <a href="http://disqus.com/" title="http://disqus.com/">http://disqus.com/</a></p>
]]></content:encoded>
			<wfw:commentRss></wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
