<?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>Le Blog de Nukleo</title>
	<atom:link href="https://www.nukleo.fr/blog/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.nukleo.fr/blog</link>
	<description>Un blog de webdesign et développement</description>
	<lastBuildDate>Tue, 04 Mar 2014 15:50:19 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>jQuery fadeIn et animations css3</title>
		<link>https://www.nukleo.fr/blog/jquery-fadein-animations-css3/</link>
		<comments>https://www.nukleo.fr/blog/jquery-fadein-animations-css3/#comments</comments>
		<pubDate>Tue, 04 Mar 2014 15:48:32 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Astuces]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=57</guid>
		<description><![CDATA[En utilisant jQuery pour faire un fadeIn() sur un élément qui contenait lui-même un élément ayant une animation css3, je me suis aperçu que le fade de jQuery ne fonctionnait plus correctement : au lieu d&#8217;avoir une jolie animation d&#8217;apparition, l&#8217;élément animé passait d&#8217;invisible à visible d&#8217;un coup à la fin de la durée d&#8217;animation.<br /><a href="https://www.nukleo.fr/blog/jquery-fadein-animations-css3/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>En utilisant jQuery pour faire un fadeIn() sur un élément qui contenait lui-même un élément ayant une animation css3, je me suis aperçu que le fade de jQuery ne fonctionnait plus correctement : au lieu d&rsquo;avoir une jolie animation d&rsquo;apparition, l&rsquo;élément animé passait d&rsquo;invisible à visible d&rsquo;un coup à la fin de la durée d&rsquo;animation.<span id="more-57"></span></p>
<h3>Le problème</h3>
<p>La fonction fadeIn() de jQuery et les animations css3 ne font pas bon ménage si l&rsquo;élément sur lequel est appelé fadeIn() contient un autre élément animé via une animation css3.<br />
Un overlay avec un spinner (pour indiquer à l&rsquo;utilisateur le chargement de quelquechose) pourrait être une bon exemple :</p>
<p>Du html :</p>
<pre class="brush: xml; title: ; notranslate">
&lt;div id=&quot;overlay&quot;&gt;
	&lt;div id=&quot;spinner&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>Des css :</p>
<pre class="brush: css; title: ; notranslate">
#overlay{
...
}

#spinner{
	animation: rotation 3s infinite linear;
}

@keyframes rotation{
	from {transform: rotate(0deg);}
	to {transform: rotate(359deg);}
}
</pre>
<p>Du javascript :</p>
<pre class="brush: jscript; title: ; notranslate">
$('#overlay').fadeIn();
</pre>
<p>Et la c&rsquo;est le drame&#8230; pas de joli fadeIn, juste une apparition sèche :(</p>
<h3>La solution</h3>
<p>La solution consiste simplement à appliquer l&rsquo;animation css3 après le fadeIn() dans le callback de la fonction. Pour se faire, l&rsquo;animation est déclenchée par l&rsquo;ajout d&rsquo;une classe à l&rsquo;élément animé&#8230; on modifie les css en conséquence :</p>
<pre class="brush: css; title: ; notranslate">
#spinner{
	/* suppression de l'animation qu'on déporte dans une classe */
}

#spinner.animated{
	animation: rotation 3s infinite linear;
}
</pre>
<p>et on modifie le javascript :</p>
<pre class="brush: jscript; title: ; notranslate">
$('#overlay').fadeIn(function(){
	$('#spinner').addClass('animated');
});
</pre>
<p>Et hop tout rentre dans l&rsquo;ordre :)</p>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/jquery-fadein-animations-css3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Twitter : afficher le compteur de tweets avec une url raccourcie</title>
		<link>https://www.nukleo.fr/blog/twitter-afficher-compteur-tweets-url-raccourcie/</link>
		<comments>https://www.nukleo.fr/blog/twitter-afficher-compteur-tweets-url-raccourcie/#comments</comments>
		<pubDate>Mon, 08 Oct 2012 10:56:03 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Astuces]]></category>
		<category><![CDATA[share]]></category>
		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=54</guid>
		<description><![CDATA[Si vous utilisez le bouton de partage de Twitter avec une url raccourcie (bit.ly et compagnie) et que vous affichez le compteur de tweets, il se peut que le nombre reste bloqué à 0. Pour palier au problème il faut utiliser le paramètre &#171;&#160;data-counturl&#160;&#187; avec l&#8217;url complète. Un exemple rapide Happy coding !]]></description>
			<content:encoded><![CDATA[<p>Si vous utilisez le bouton de partage de Twitter avec une url raccourcie (bit.ly et compagnie) et que vous affichez le compteur de tweets, il se peut que le nombre reste bloqué à 0. Pour palier au problème il faut utiliser le paramètre &laquo;&nbsp;data-counturl&nbsp;&raquo; avec l&rsquo;url complète.<span id="more-54"></span></p>
<h3>Un exemple rapide</h3>
<pre class="brush: xml; title: ; notranslate">
&lt;a href=&quot;https://twitter.com/share&quot; data-lang=&quot;fr&quot; data-hashtags=&quot;monHastag&quot; data-url=&quot;http://bit.ly/fAkEurL&quot; data-counturl=&quot;http://www.mavraieurl.com/&quot; data-text=&quot;Mon texte de tweet par défaut&quot;&gt;Tweeter&lt;/a&gt;
</pre>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/twitter-afficher-compteur-tweets-url-raccourcie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CodeIgniter : Séparer le back-office du front-office, ou comment gérer plusieurs applications</title>
		<link>https://www.nukleo.fr/blog/codeigniter-separer-back-office-front-office-plusieurs-applications/</link>
		<comments>https://www.nukleo.fr/blog/codeigniter-separer-back-office-front-office-plusieurs-applications/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 14:21:13 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[Astuces]]></category>
		<category><![CDATA[CodeIgniter]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=46</guid>
		<description><![CDATA[Il peut être intéressant de séparer une application web en plusieurs sous-applications pour plus de clarté : notamment dans le cas d&#8217;un site avec un back-office. Cela peut aussi être très utile dans le cas où certaines rubriques d&#8217;un site nécessitent beaucoup de fichiers (controlleurs, vues, etc&#8230;). Voici une méthode qui permet de le faire<br /><a href="https://www.nukleo.fr/blog/codeigniter-separer-back-office-front-office-plusieurs-applications/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Il peut être intéressant de séparer une application web en plusieurs sous-applications pour plus de clarté : notamment dans le cas d&rsquo;un site avec un back-office. Cela peut aussi être très utile dans le cas où certaines rubriques d&rsquo;un site nécessitent beaucoup de fichiers (controlleurs, vues, etc&#8230;). Voici une méthode qui permet de le faire assez simplement et de manière efficace, quelle que soit la version de CodeIgniter.<span id="more-46"></span></p>
<h3>Le problème</h3>
<p>La <a href="http://codeigniter.com/user_guide/general/managing_apps.html" target="_blank">documentation de CodeIgniter</a> propose de faire cette séparation en créant autant de sous-dossiers qu&rsquo;il y a d&rsquo;applications dans le répertoire &laquo;&nbsp;application&nbsp;&raquo; et d&rsquo;y dupliquer tous les répertoires nécessaires. Le problème avec cette approche vient du fait qu&rsquo;il y a un risque de duplication de code puisque chaque application est totalement indépendente. Par exemple il faudra plusieurs fichiers de configuration, plusieurs fichiers de routes&#8230; Pire encore : si vous souhaitez partager des librairies, helpers, models, etc&#8230; ça ne sera pas possible et il faudra également les dupliquer.<br />
Sur ce dernier point, depuis la version 2 de CodeIgniter ce n&rsquo;est plus tout à fait exact : on peut utiliser le dossier &laquo;&nbsp;third_party&nbsp;&raquo; pour y partager configurations, helpers, models et librairies &#8211; mais il n&rsquo;y a toujours pas de séparation des applications et l&rsquo;on ne peut pas interagir avec le router.</p>
<h3>Une solution</h3>
<p>En effet il n&rsquo;y a pas une seule et unique solution au problème mais je vous une présente une que je trouve assez astucieuse, relativement simple à mettre en place et qui ne nécessite aucune librairie ni overload de classes. Elle se résume en deux mots : liens symboliques.</p>
<h3>Mise en œuvre</h3>
<p>Pour cette article nous partirons du postulat que nous voulons créer un site web en local (pour le développer bien sûr^^) et séparant le front-office (ce que voit le visiteur) du back-office (ce qu&rsquo;utilise le(s) gestionnaire(s) du site).</p>
<p>Pour commencer il faut choisir une stratégie de différenciation des applications : adresse IP, sous-domaine, URI, session&#8230; ou, vraisemblablement, une combinaison de ces possibilités. Pour l&rsquo;example nous utiliserons un sous-domaine &laquo;&nbsp;admin&nbsp;&raquo; pour le back-office, le front-office étant sur &laquo;&nbsp;www&nbsp;&raquo;.</p>
<h4>Configuration hosts</h4>
<p>En développement local j&rsquo;utilise toujours des hôtes virtuels et comme je travaille sur un Mac utilisant <a href="http://www.mamp.info/" target="_blank">MAMP</a>, j&rsquo;explicite les réglages pour cette plateforme &#8211; mais c&rsquo;est à peu de choses près la même chose sous Windows et Linux. Bref :<br />
On édite le fichier <strong>/private/etc/hosts</strong> en y ajoutant à la fin deux lignes :</p>
<pre class="brush: php; title: ; notranslate">
127.0.0.1 www.montest.local
127.0.0.1 admin.montest.local
</pre>
<p>Sous Lion faites bien attention à ce qu&rsquo;il y ait une ligne vierge à la fin du fichier, comme je l&rsquo;explique <a href="http://www.nukleo.fr/blog/macosx-10-7-lion-et-le-fichier-hosts" title="MacOSX 10.7 Lion et le fichier Hosts">dans cet article</a>.</p>
<h4>Configuration Apache</h4>
<p>Les serveurs de MAMP doivent être arrêtés et l&rsquo;on édite le fichier <strong>/Applications/MAMP/conf/apache/httpd.conf</strong> en y ajoutant les deux serveurs virtuels correspondants à ce que nous avons ajouté dans le fichier hosts :</p>
<pre class="brush: php; title: ; notranslate">
&lt;VirtualHost *:80&gt;
DocumentRoot /Applications/MAMP/htdocs/montest/www/
ServerName www.montest.local
&lt;/VirtualHost&gt;

&lt;VirtualHost *:80&gt;
DocumentRoot /Applications/MAMP/htdocs/montest/www/
ServerName admin.montest.local
&lt;/VirtualHost&gt;
</pre>
<p>Vous noterez que le document root est &laquo;&nbsp;www&nbsp;&raquo; et non la racine du site, ceci pour des raisons de sécurité : le serveur apache ne permettra que d&rsquo;accéder aux fichiers nécessaires à l&rsquo;application : le bootstrap (index.php) et les ressources (javascript, images, css).</p>
<h4>Arborescence du projet CodeIgniter</h4>
<p>Nous allons modifier l&rsquo;arborescence de base de CodeIgniter pour prendre en compte la séparation d&rsquo;applications et le déplacement des fichiers d&rsquo;application et du framework :<br />
<img src="http://www.nukleo.fr/blog/wp-content/uploads/2011/10/ci-arbo.png" alt="Arborescence de CodeIgniter" width="620" height="392" class="alignnone size-full wp-image-47" /></p>
<p>Les modifs sont les suivantes :</p>
<ul>
<li>Le répertoire &laquo;&nbsp;application&nbsp;&raquo; à été renommé &laquo;&nbsp;applications&nbsp;&raquo;</li>
<li>Les répertoires &laquo;&nbsp;bo&nbsp;&raquo; et &laquo;&nbsp;fo&nbsp;&raquo; ont été créés</li>
<li>Le contenu originel du répertoire &laquo;&nbsp;application&nbsp;&raquo; a été déplacé dans &laquo;&nbsp;bo&nbsp;&raquo;</li>
<li>Un répertoire &laquo;&nbsp;www&nbsp;&raquo; a été créé au même niveau que &laquo;&nbsp;applications&nbsp;&raquo; et index.php y a été déplacé</li>
</ul>
<p>Dans le répertoire &laquo;&nbsp;fo&nbsp;&raquo; nous rajouterons les répertoires &laquo;&nbsp;controllers&nbsp;&raquo; et &laquo;&nbsp;views&nbsp;&raquo; et c&rsquo;est là que la séparation aura effectivement lieu : le front-office aura ses propres controlleurs et vues. Tout le reste proviendra du répertoire &laquo;&nbsp;bo&nbsp;&raquo;.</p>
<h4>L&rsquo;astuce pour que ça marche</h4>
<p>Comment le framework va-t&rsquo;il trouver les modèles, librairies, etc&#8230; dans la partie front alors qu&rsquo;il n&rsquo;y sont pas ? Tout simplement en utilisant des <a href="http://fr.wikipedia.org/wiki/Lien_symbolique" target="_blank">liens symboliques</a> de Linux. Pour les créer, un petit tour dans le Terminal, en se plaçant dans le répertoire &laquo;&nbsp;fo&nbsp;&raquo; il n&rsquo;y plus qu&rsquo;a tapper les lignes suivantes (en validant ligne par ligne) :</p>
<pre class="brush: php; title: ; notranslate">
ln -s ../bo/cache cache
ln -s ../bo/config config
ln -s ../bo/core core
ln -s ../bo/errors errors
ln -s ../bo/helpers helpers
ln -s ../bo/hooks hooks
ln -s ../bo/language language
ln -s ../bo/librairies librairies
ln -s ../bo/logs logs
ln -s ../bo/models models
ln -s ../bo/third_party third_party
</pre>
<p>Et le tour est joué ! Ou presque&#8230;</p>
<h4>Configurer index.php</h4>
<p>Comme nous avons modifié l&rsquo;arborescence du framework il faut lui indiquer où trouver ses fichiers, mais aussi lui indiquer quelle application utiliser. Nous modifions donc /www/index.php :</p>
<pre class="brush: php; title: ; notranslate">
[...]
$system_path = '../system'; // on a sorti le framework du webroot (sécurité)
[...]
// changement application en fonction du sous-domaine
// a modifier en fonction de la stratégie de différenciation choisie
if( preg_match('/admin\.*/', $_SERVER['SERVER_NAME']) ) {
	$app_folder = '/bo';
} else {
	$app_folder = '/fo';
}

$application_folder = '../applications' . $app_folder; // les applications sont également en dehors du webroot (sécurité)
</pre>
<p>A noter qu&rsquo;il s&rsquo;agit là d&rsquo;une partie du fichier index.php de la version 2.0.3 du framework &#8211; le reste n&rsquo;étant pas intéressant pour cet article. Pour les versions précédentes du framework, ce fichier est similaire.</p>
<p>Dorénavant tous les models, librairies, configs etc&#8230; seront stockés dans un lieu commun (le répertoire &laquo;&nbsp;bo&nbsp;&raquo;) et seront disponibles pour toutes les applications.</p>
<h3>Conclusion</h3>
<p>Cette technique permet de simuler un système de modules qui manque à CodeIgniter (bien qu&rsquo;il existe des librairies le permettant, par exemple <a href="https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc/wiki/Home" target="_blank">HMVC</a>). Elle a l&rsquo;avantage de fonctionner sur les versions antérieures à la 2.X du framework, alors qu&rsquo;à partir de la version 2 on pourrait utiliser le système de &laquo;&nbsp;third_party&nbsp;&raquo; bien qu&rsquo;il faille encore les charger &laquo;&nbsp;à la main&nbsp;&raquo;.</p>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/codeigniter-separer-back-office-front-office-plusieurs-applications/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress : Créer un plugin pour rendre functions.php indépendant du thème</title>
		<link>https://www.nukleo.fr/blog/wordpress-creer-plugin-pour-rendre-functions-independant-theme/</link>
		<comments>https://www.nukleo.fr/blog/wordpress-creer-plugin-pour-rendre-functions-independant-theme/#comments</comments>
		<pubDate>Wed, 05 Oct 2011 11:11:40 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Astuces]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Plugin]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=41</guid>
		<description><![CDATA[Le fichier functions.php permet de modifier et/ou ajouter des fonctionnalités à WordPress mais si vous changez de thème, vous perdez ces modifications. On pourrait se contenter de copier/coller ces changements dans le nouveau thème, ou on pourrait les transférer dans un plugin afin de les conserver quel que soit le thème. Faut-il tout transférer ?<br /><a href="https://www.nukleo.fr/blog/wordpress-creer-plugin-pour-rendre-functions-independant-theme/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Le fichier <a href="http://codex.wordpress.org/Theme_Development#Functions_File" title="Codex WordPress (anglais)" target="_blank">functions.php</a> permet de modifier et/ou ajouter des fonctionnalités à WordPress mais si vous changez de thème, vous perdez ces modifications. On pourrait se contenter de copier/coller ces changements dans le nouveau thème, ou on pourrait les transférer dans un plugin afin de les conserver quel que soit le thème.<span id="more-41"></span></p>
<h3>Faut-il tout transférer ?</h3>
<p>La réponse à cette question simple l&rsquo;est tout aussi : non. Pour savoir ce qu&rsquo;il faut transférer il faut faire une distinction entre les fonctions qui impactent le <strong>contenu</strong> et celles qui impactent le <strong>design.</strong> Celles qui ont un impact sur le contenu ont tout intérêt à être déplacées dans un (ou plusieurs) plugins alors que les autres servent uniquement le design ou layout du site et doivent rester dans le fichier functions.php du thème.</p>
<h4>Que faut-il (ou peut-on) transférer ?</h4>
<p>Dès l&rsquo;instant où le fait de ne plus avoir une fonction va poser un problème il serait judicieux qu&rsquo;elle se retrouve dans le plugin, par exemple :</p>
<ul>
<li>Les shortcodes</li>
<li>Les filtrages de contenu</li>
<li>Les custom post types</li>
<li>Les custom taxonomies</li>
<li>Les ajouts à l&rsquo;admin de WordPress</li>
</ul>
<h4>Que faut-il conserver dans functions.php ?</h4>
<p>Si une fonction n&rsquo;a qu&rsquo;un impact visuel, notamment sur le design et la structure du site, dans ce cas il appartient directement au thème et doit par conséquent rester dans functions.php &#8211; par exemple :</p>
<ul>
<li>Les menus</li>
<li>Les sidebars</li>
<li>La pagination</li>
</ul>
<h3>Créer le plugin de fonctionnalités</h3>
<p>La création d&rsquo;un plugin est très simple et si vous savez ajouter des fonctions à functions.php alors vous pouvez créer votre plugin !</p>
<h4>Première étape</h4>
<p>Créez un repertoire qui porte le <strong>nom de votre plugin</strong> en n&rsquo;utilisant que des lettres non accentuées, des chiffres et des tirets. Pour cette article on partira du principe que le nom du plugin est monsite-fonctions.</p>
<p>Dans ce répertoire créez un fichier PHP qui porte exactement le même nom : monsite-fonctions.php.</p>
<h4>Deuxième étape</h4>
<p>Ajoutez les commentaires en début de fichier qui permettront à WordPress de voir qu&rsquo;il s&rsquo;agit bien d&rsquo;un plugin :</p>
<pre class="brush: php; title: ; notranslate">
/*
Plugin Name: Fonctions de monsite
Plugin URI: http://www.monsite.com/
Description: Déplace les fonctionnalités qui impactent le contenu dans un plugin
Author: Nom Prénom
Version: 0.1
Author URI: http://www.monsite.com/
*/
</pre>
<h4>Troisième étape</h4>
<p>Il n&rsquo;y a plus qu&rsquo;a insérer les fonctions dans ce fichier, puis activer le plugin dans l&rsquo;administration de WordPress et le tour est joué !</p>
<h3>Conclusion</h3>
<p>Comme vous l&rsquo;avez vu il est très simple de créer un plugin rendant les fonctions clés d&rsquo;un site sous WordPress indépendantes de son thème. Cela peut être également très utile dans le cas où votre client veut pouvoir changer de thème sans pour autant perdre ses fonctions. Vous pouvez également vous constituer une bibliothèque de plugins réutilisables dans d&rsquo;autres thèmes.</p>
<p>Pour en savoir plus sur la création de plugins, je vous invite à consulter le codex de WordPress (en anglais) : <a href="http://codex.wordpress.org/Writing_a_Plugin" target="_blank">writing a plugin</a></p>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/wordpress-creer-plugin-pour-rendre-functions-independant-theme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MacOSX 10.7 Lion et le fichier Hosts</title>
		<link>https://www.nukleo.fr/blog/macosx-10-7-lion-et-le-fichier-hosts/</link>
		<comments>https://www.nukleo.fr/blog/macosx-10-7-lion-et-le-fichier-hosts/#comments</comments>
		<pubDate>Mon, 19 Sep 2011 10:00:18 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[Astuces]]></category>
		<category><![CDATA[MacOSX]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=43</guid>
		<description><![CDATA[Avec chaque nouvelle mouture d&#8217;un OS il y a toujours quelques ratés et Apple n&#8217;est pas dispensé de cette réalité. Hormis le problème du WiFi qui ne cesse de se déconnecter tout seul, il y a un petit problème avec le fichiers hosts : la dernière entrée n&#8217;est pas prise en compte. Voici comment résoudre<br /><a href="https://www.nukleo.fr/blog/macosx-10-7-lion-et-le-fichier-hosts/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Avec chaque nouvelle mouture d&rsquo;un OS il y a toujours quelques ratés et Apple n&rsquo;est pas dispensé de cette réalité. Hormis le <a href="http://www.fredzone.org/regler-les-problemes-de-wifi-sur-mac-os-x-lion">problème du WiFi</a> qui ne cesse de se déconnecter tout seul, il y a un petit problème avec le fichiers hosts : la dernière entrée n&rsquo;est pas prise en compte. Voici comment résoudre le problème. <span id="more-43"></span></p>
<h3>Le problème</h3>
<p>Si vous êtes webdesigner ou développeur il y a de fortes chances que vous utilisiez des hôtes virtuels (virtual hosts) configurés dans Apache et, par conséquent, que vous routiez vos noms d&rsquo;hôtes virtuels par le biais du <strong>fichier hosts</strong> de MacOS.</p>
<p>Vous aurez certainement remarqué que la dernière entrée de ce fichier ne fonctionne pas, à savoir : page blanche :(</p>
<h3>La solution</h3>
<p>C&rsquo;est bête comme choux mais il fallait le savoir : <strong>il suffit d&rsquo;ajouter une ligne vide</strong> à la suite de votre dernière entrée et tout rentre dans l&rsquo;ordre !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/macosx-10-7-lion-et-le-fichier-hosts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress : limiter la recherche à certains types de posts</title>
		<link>https://www.nukleo.fr/blog/wordpress-limiter-recherche-certains-type-posts/</link>
		<comments>https://www.nukleo.fr/blog/wordpress-limiter-recherche-certains-type-posts/#comments</comments>
		<pubDate>Mon, 09 May 2011 04:23:29 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Astuces]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=40</guid>
		<description><![CDATA[Par défaut, le moteur de recherche de WordPress cherche les termes demandés dans tous les types de posts publiés du site, à savoir : les articles (posts), les pages (post-type page), les custom posts etc&#8230; Dans certains cas de figure on pourrait souhaiter limiter la recherche à un seul type de post, ou la restreindre<br /><a href="https://www.nukleo.fr/blog/wordpress-limiter-recherche-certains-type-posts/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Par défaut, le moteur de recherche de WordPress cherche les termes demandés dans tous les types de posts publiés du site, à savoir : les articles (posts), les pages (post-type page), les custom posts etc&#8230; Dans certains cas de figure on pourrait souhaiter <strong>limiter la recherche</strong> à un seul type de post, ou la restreindre à certains types. Voici comment.<span id="more-40"></span></p>
<h3>Functions.php</h3>
<p>Il suffit d&rsquo;ajout un tout petit bloc de code dans le fichiers <strong>functions.php</strong> :</p>
<pre class="brush: php; title: ; notranslate">
// filtrage des recherches -&gt; limite aux articles publiés
function filtre_recherche( $query ) {
	if ( $query-&gt;is_search &amp;&amp; !is_admin() ) {
		$query-&gt;set( 'post_type', 'post' );
	}
	return $query;
}
// ajout du filtrage sur le hook 'pre_get_post'
add_filter( 'pre_get_posts', 'filtre_recherche' );
</pre>
<p>Ce bout de code restreindra la recherche aux seuls articles (posts) publiés. Si l&rsquo;on souhaite étendre la recherche à plusieurs types, il suffit de modifier légèrement la fonction :</p>
<pre class="brush: php; title: ; notranslate">
// filtrage des recherches -&gt; limite aux articles publiés, aux pages et à un custom post type
function filtre_recherche( $query ) {
	if ( $query-&gt;is_search &amp;&amp; !is_admin() ) {
		$query-&gt;set(  'post_type', array( 'post', 'page', 'custom-post-type' ) );
	}
	return $query;
}
// ajout du filtrage sur le hook 'pre_get_post'
add_filter( 'pre_get_posts', 'filtre_recherche' );
</pre>
<p>Vous l&rsquo;aurez remarqué, seule la partie <strong><code>$query->set()</code></strong> change : on lui passe un array des types de posts que l&rsquo;on souhaite voir apparaître dans les résultats de recherche.</p>
<h3>Pour en savoir plus</h3>
<p>Rendez-vous sur le <a href="http://codex.wordpress.org/">Codex de WordPress</a> : la class <a href="http://codex.wordpress.org/Function_Reference/WP_Query">WP_query</a> (qui contient la propriété <code>$query</code>) et le <a href="http://codex.wordpress.org/Plugin_API/Action_Reference/pre_get_posts">hook pre_get_posts</a></p>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/wordpress-limiter-recherche-certains-type-posts/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>NeoKulture.com : Site de partage de ressources pour webdesigners</title>
		<link>https://www.nukleo.fr/blog/neokulture-site-partage-ressources-webdesigners/</link>
		<comments>https://www.nukleo.fr/blog/neokulture-site-partage-ressources-webdesigners/#comments</comments>
		<pubDate>Tue, 03 May 2011 16:38:18 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Nukleo]]></category>
		<category><![CDATA[NeoKulture]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=37</guid>
		<description><![CDATA[Je viens d&#8217;ouvrir un nouveau site de partage de ressources francophones destiné aux webdesigners et développeurs : neokulture.com. Présentation du site Le but du site est simple : permettre aux auteurs d&#8217;articles (publiés sur leur propres sites) ainsi qu&#8217;aux utilisateurs de sites de partager les articles et autres ressources, en français, concernant le webdesign et<br /><a href="https://www.nukleo.fr/blog/neokulture-site-partage-ressources-webdesigners/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Je viens d&rsquo;ouvrir un nouveau site de partage de ressources francophones destiné aux webdesigners et développeurs : <a href="http://www.neokulture.com">neokulture.com</a>.<span id="more-37"></span></p>
<h3>Présentation du site</h3>
<p><img src="http://www.nukleo.fr/blog/wp-content/uploads/2011/05/nk-screenshot.jpg" alt="Capture d'écran de neokulture.com" width="620" height="315" class="alignnone size-full wp-image-39" /><br />
Le but du site est simple : permettre aux auteurs d&rsquo;articles (publiés sur leur propres sites) ainsi qu&rsquo;aux utilisateurs de sites de <strong>partager les articles</strong> et autres <strong>ressources, en français,</strong> concernant le <strong>webdesign</strong> et le <strong>développement web</strong> et qu&rsquo;ils jugent utiles et pertinents.</p>
<p>Il n&rsquo;est pas nécessaire de s&rsquo;inscrire pour partager, il suffit de remplir un formulaire simple et rapide.</p>
<h3>Un peu de technique</h3>
<p>Pour ceux que cela intéresse, le site est développé avec WordPress et utilise la <a href="http://www.nukleo.fr/blog/afficher-articles-colonne-wordpress">technique d&rsquo;affichage des articles en colonne</a> dont j&rsquo;ai fait un petit tutoriel ici même. J&rsquo;ai également développé un petit plugin pour permettre à tout le monde d&rsquo;ajouter des articles sans pour autant devoir s&rsquo;inscrire.</p>
<h3>Le mot de la fin</h3>
<p>J&rsquo;espère simplement que le site sera utile et que beaucoup de gens y participerons en ajoutant des liens vers des articles/ressources qui leur ont plu ou qu&rsquo;ils ont publié eux-même.</p>
<p>Le maître-mot sera simplement : partagez !</p>
<p>Happy coding !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/neokulture-site-partage-ressources-webdesigners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Afficher les articles en colonne avec WordPress</title>
		<link>https://www.nukleo.fr/blog/afficher-articles-colonne-wordpress/</link>
		<comments>https://www.nukleo.fr/blog/afficher-articles-colonne-wordpress/#comments</comments>
		<pubDate>Mon, 18 Apr 2011 18:12:27 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=33</guid>
		<description><![CDATA[Traditionnellement la liste des articles d&#8217;un blog sont affichés les uns à la suite des autres, de haut en bas (comme sur ce blog). Pour diverses raisons (design, optimisation de l&#8217;espace, utilisation spécifique de WordPress etc&#8230;) on pourrait souhaiter les afficher en colonne. Voici une méthode simple pour y arriver. Voici ce que l&#8217;on veut<br /><a href="https://www.nukleo.fr/blog/afficher-articles-colonne-wordpress/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Traditionnellement la liste des articles d&rsquo;un blog sont affichés les uns à la suite des autres, de haut en bas (comme sur ce blog). Pour diverses raisons (design, optimisation de l&rsquo;espace, utilisation spécifique de WordPress etc&#8230;) on pourrait souhaiter les afficher en colonne. Voici une méthode simple pour y arriver. <span id="more-33"></span></p>
<p>Voici ce que l&rsquo;on veut obtenir : afficher sur la page d&rsquo;accueil la liste des articles (ou les extraits) dans 2 colonnes, avec les plus récents en haut. Pour y parvenir nous utiliserons l&rsquo;opérateur modulo de PHP et de la fonction <a href="http://codex.wordpress.org/Function_Reference/rewind_posts">rewind_posts()</a> de WordPress.</p>
<p><img src="http://www.nukleo.fr/blog/wp-content/uploads/2011/04/wp-post-colonne1.png" alt="Afficher les articles de WordPress en colonne" title="Ce que nous souhaitons obtenir" width="620" height="371" class="alignnone size-full wp-image-34" /></p>
<h3>Le problème</h3>
<p>On pourrait tout simplement utiliser la propriété float de CSS pour arriver à nos fins et ça fonctionnerai parfaitement dans le cas de figure où <strong>tous les blocs</strong> contenant les articles <strong>ont la même hauteur</strong> (comme dans l&rsquo;image précédente).</p>
<p>Mais il est très probable que ça ne soit pas le cas : la hauteur de chaque bloc va varier en fonction de son contenu (l&rsquo;extrait ou l&rsquo;article). Dans ce cas de figure il y aura 2 problèmes : l&rsquo;espacement aléatoire entre les blocs (en hauteur) et le non respect de l&rsquo;ordre chronologique :</p>
<p><img src="http://www.nukleo.fr/blog/wp-content/uploads/2011/04/wp-post-colonne2.png" alt="Espacement aléatoire et ordre non respecté avec float" title="Les blocs sont dans le désordre et l'espacement vertical incorrect" width="620" height="371" class="alignnone size-full wp-image-35" /><br />
Ce n&rsquo;est pas un bug mais seulement la manière dont fonctionnent les éléments &laquo;&nbsp;floatants&nbsp;&raquo;.</p>
<p>Pour résoudre le problème d&rsquo;espacement on pourrait utiliser 2 div pour créer les colonnes et y insérer nos articles, mais dans ce cas l&rsquo;ordre chronologique des articles se fera de haut en bas, colonne par colonne (voir l&rsquo;image ci-dessous). Hors nous voulons que les 2 derniers articles soient en haut de la page.</p>
<p><img src="http://www.nukleo.fr/blog/wp-content/uploads/2011/04/wp-post-colonne3.png" alt="Espacement corrigé mais l'ordre n'est pas celui attendu" title="Espacement corrigé mais l'ordre n'est pas celui attendu" width="620" height="371" class="alignnone size-full wp-image-36" /></p>
<h3>La solution</h3>
<p>Nous utiliserons tout de même les 2 div pour créer nos colonnes, c&rsquo;est au niveau de la boucle de WordPress que nous agirons pour respecter la chronologie de nos articles.</p>
<p>Voici la structure HTML de base que nous utiliserons:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;div id=&quot;page&quot;&gt;
	
	&lt;div id=&quot;header&quot;&gt;&lt;/div&gt;
	
	&lt;div id=&quot;contenu&quot; class=&quot;clearfix&quot;&gt;
		&lt;div class=&quot;colonne&quot;&gt;&lt;/div&gt;
		&lt;div class=&quot;colonne&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div id=&quot;sidebar&quot; class=&quot;clearfix&quot;&gt;&lt;/div&gt;
	
	&lt;div id=&quot;footer&quot;&gt;&lt;/div&gt;
	
&lt;/div&gt;
</pre>
<p>Les règles CSS qui vont avec :</p>
<pre class="brush: css; title: ; notranslate">
#page { width: 960px; margin: 0 auto }
#header { padding: 10px; margin: 20px 0 }
#contenu { width: 660px; float: left }
.colonne { width: 300px; margin-right: 30px; float: left }
#sidebar { width: 300px; float: right }
#footer { padding: 10px; margin: 20px 0 }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: &quot; &quot;; clear: both; height: 0; }
</pre>
<p>J&rsquo;ai mis la structure complète mais ce qui nous intéresse ici c&rsquo;est surtout le contenu de la div #contenu</p>
<h3>Le template WordPress</h3>
<p>Dans le cas d&rsquo;un blog classique il n&rsquo;y a qu&rsquo;une seule boucle pour afficher les articles. Pour ce que nous souhaitons réaliser on pourrait utiliser 2 boucles sur mesure, mais ce n&rsquo;est pas nécessaire et utiliserai inutilement plus de ressources (2 requêtes MySql au lieu d&rsquo;une seule, plus de mémoire) et de temps.<br />
Nous utiliserons la fonction <a href="http://codex.wordpress.org/Function_Reference/rewind_posts">rewind_posts()</a> qui permet de revenir au début de la boucle pour ensuiter la parcourir à nouveau. L&rsquo;astuce réside dans la manière dont nous allons la traiter : grâce à l&rsquo;opérateur modulo nous filtrerons l&rsquo;affichage (ou non) des articles&#8230;</p>
<p>Dans le template de la page d&rsquo;accueil :</p>
<pre class="brush: php; html-script: true; title: ; notranslate">
&lt;div id=&quot;contenu&quot; class=&quot;clearfix&quot; &gt;

	&lt;!-- 1ere colonne --&gt;
	&lt;div class=&quot;colonne&quot;&gt;
		&lt;?php
		// variable qui servira pour filtrer l'affichage des posts
		// et qui sera incrémentée à chaque itération
		$i = 1;
		if( have_posts() ) :
			while( have_posts() ) :
				the_post();

				// s'il ne s'agit pas du 1er article dans la série de 2
				// on passe à l'itération suivante sans rien afficher
				if( $i%2 != 1 ) :
					$i++; // incrémente le compteur
					continue; // on passe directement à l'itération suivante

				else : // pas nécessaire mais clarifie le fonctionnement ?&gt;

					&lt;div class=&quot;article&quot;&gt;
						&lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
						&lt;?php the_excerpt(); // le résumé de l'article ?&gt;
					&lt;/div&gt;

				&lt;?php
				endif; // fin if $i%2
				$i++; // incrémente le compteur
			endwhile; // fin boucle while
		endif; // fin if have_posts() ?&gt;

		&lt;?php
		// on se remet au début de la boucle des articles 
		// pour pouvoir la traiter à nouveau
		rewind_posts();
		?&gt;
	&lt;/div&gt;&lt;!-- fin 1ere colonne --&gt;

	&lt;!-- 2eme colonne --&gt;
	&lt;div class=&quot;colonne&quot;&gt;
		&lt;?php
		$i = 1; // variable qui servira pour filtrer l'affichage des posts
		if( have_posts() ) :
			while( have_posts() ) :
				the_post();

				// s'il ne s'agit pas du 2eme article dans la série de 2
				// on passe à l'itération suivante sans rien afficher
				if( $i%2 != 0 ) :
					$i++; // incrémente le compteur
					continue; // on passe directement à l'itération suivante

				else : ?&gt;

					&lt;div class=&quot;article&quot;&gt;
						&lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt;
						&lt;?php the_excerpt(); // le résumé de l'article ?&gt;
					&lt;/div&gt;

				&lt;?php
				endif; // fin if $i%2
				$i++; // incrémente le compteur
			endwhile; // fin boucle while
		endif; // fin if have_posts() ?&gt;

	&lt;/div&gt;&lt;!-- fin 2eme colonne --&gt;

&lt;/div&gt;&lt;!-- fin #contenu --&gt;
</pre>
<p>Et voila, nous sommes arrivé à notre résultat ! Bien évidemment on pourrait vouloir 3 colonnes d&rsquo;articles : l&rsquo;opération est la même sauf que l&rsquo;on utilisera $i % 3 au lieu de $i % 2 — Le diviseur servant à déterminer le nombre d&rsquo;articles a ne pas afficher et sera égal au nombre de colonnes.<br />
Il faudra également dupliquer tout le bloc de code pour ajouter la 3e colonne, sans oublier rewind_posts() à la fin de la 2e colonne ni de changer la valeur de test du modulo pour la 2e colonne ( if( $i%3 != 2 ) ).</p>
<h4>A propos du modulo</h4>
<p>Si vous ne savez pas ou ne vous souvenez pas du fonctionnement de modulo, voici l&rsquo;explication :<br />
On divise le chiffre de gauche par celui de droite et le <strong>résultat ne tient compte que du chiffre entier obtenu</strong> (donc sans chiffre après la virgule). Ce calcul retourne <strong>le reste de cette division</strong> (donc un entier également).<br />
Par exemple 1 % 3 = 1 car 1 / 3 = 0 et il reste 1<br />
Ceci est très pratique lorsque l&rsquo;on doit faire quelque chose de particulier toutes les X itérations.</p>
<h3>Conclusion</h3>
<p>Nous avons pu obtenir la liste de nos articles sur 2 colonnes sans utiliser inutilement de ressources supplémentaires. Autre avantage de cette technique : elle <strong>respecte le réglage du nombre de posts à afficher</strong> dans le tableau de bord de WordPress.</p>
<p>Happy coding :)</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/afficher-articles-colonne-wordpress/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Upload des fichiers zip avec CodeIgniter</title>
		<link>https://www.nukleo.fr/blog/upload-fichiers-zip-codeigniter/</link>
		<comments>https://www.nukleo.fr/blog/upload-fichiers-zip-codeigniter/#comments</comments>
		<pubDate>Fri, 08 Apr 2011 06:56:42 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[CodeIgniter]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=32</guid>
		<description><![CDATA[Grâce à la librairie file_upload, CodeIgniter permet de facilement gérer l&#8217;upload de fichiers mais dans le cas de fichiers ZIP il y a un petit bug qui n&#8217;est pas encore corrigé et qui peut faire échouer l&#8217;upload. Voici comment le corriger rapidement. Le problème Pour pouvoir faire de l&#8217;upload il faut déclarer les types de<br /><a href="https://www.nukleo.fr/blog/upload-fichiers-zip-codeigniter/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>Grâce à la librairie file_upload, CodeIgniter permet de facilement gérer l&rsquo;upload de fichiers mais dans le cas de fichiers ZIP il y a un petit bug qui n&rsquo;est pas encore corrigé et qui peut faire échouer l&rsquo;upload. Voici comment le corriger rapidement.<span id="more-32"></span></p>
<h3>Le problème</h3>
<p>Pour pouvoir faire de l&rsquo;upload il faut déclarer les types de fichiers acceptés dans son controlleur (ou dans un fichier de config) à l&rsquo;aide de la déclaration</p>
<pre class="brush: php; title: ; notranslate">$config['allowed_types'] = 'gif|jpg|png|zip';</pre>
<p>Lors de la soumission du formulaire contenant le fichier a envoyer, le navigateur envoi un mime type au serveur correspondant au type de fichier que l&rsquo;on souhaite uploader. CodeIgniter va ensuite confronter ce mime type avec ceux qui sont autorisés et agir en conséquence.</p>
<p>Le problème vient du fait que les navigateurs n&rsquo;envoyent pas tous le même mime type pour les fichiers ZIP et, après recherche, il s&rsquo;avère qu&rsquo;il en existe 7 différents. Hors CodeIgniter n&rsquo;en prend en charge que 3. Donc si votre navigateur envoi l&rsquo;un des 4 types non répertoriés, l&rsquo;upload échoue avec un magnifique message d&rsquo;erreur : &laquo;&nbsp;The filetype you are attempting to upload is not allowed.&nbsp;&raquo;</p>
<h3>La solution</h3>
<p>Il suffit d&rsquo;éditer le fichier <strong>application/config/mimes.php</strong> en ajoutant les mime types manquants à la ligne correspondant à votre type de fichier. Dans le cas d&rsquo;un fichier ZIP il s&rsquo;agit de la ligne 54 :</p>
<pre class="brush: php; title: ; notranslate">'zip'	=&gt;  array('application/x-zip', 'application/zip', 'application/x-zip-compressed'),</pre>
<p>qu&rsquo;il faut changer en</p>
<pre class="brush: php; title: ; notranslate">'zip'	=&gt;  array('application/x-zip', 'application/zip', 'application/x-zip-compressed','application/octet-stream','application/x-compress','application/x-compressed','multipart/x-zip'),</pre>
<p>Et tout rentre dans l&rsquo;ordre :)</p>
<h3>Ajouter d&rsquo;autre mime types</h3>
<p>Si vous deviez ajouter de nouveaux types de fichiers à la liste des fichiers autorisés ou qu&rsquo;un type existant posait le même problème que pour les ZIP, il suffit de faire un simple</p>
<pre class="brush: php; title: ; notranslate">var_dump($_FILES)</pre>
<p>et de repérer le résultat de <strong>["file_type"]</strong> dans l&rsquo;array retourné. C&rsquo;est cette information qu&rsquo;il faudra ajouter au fichier <strong>application/config/mimes.php.</strong></p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/upload-fichiers-zip-codeigniter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>L&#8217;importance de commenter son code</title>
		<link>https://www.nukleo.fr/blog/importance-de-commenter-son-code/</link>
		<comments>https://www.nukleo.fr/blog/importance-de-commenter-son-code/#comments</comments>
		<pubDate>Tue, 05 Apr 2011 06:29:16 +0000</pubDate>
		<dc:creator>Erik</dc:creator>
				<category><![CDATA[Développement]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[Netbeans]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.nukleo.fr/blog/?p=30</guid>
		<description><![CDATA[On ne le dira jamais assez, il est important &#8211; voir crucial &#8211; de correctement commenter le code qu&#8217;on écrit. Dans certains cas le bénéfice sera immédiat, dans tous les cas c&#8217;est sur le moyen/long terme que le bénéfice se fera ressentir… Pourquoi commenter ? Les intérêts sont multiples et variés allant du simple &#171;&#160;j&#8217;en<br /><a href="https://www.nukleo.fr/blog/importance-de-commenter-son-code/">Lire l'article</a>]]></description>
			<content:encoded><![CDATA[<p>On ne le dira jamais assez, il est important &#8211; voir crucial &#8211; de correctement commenter le code qu&rsquo;on écrit. Dans certains cas le bénéfice sera immédiat, dans tous les cas c&rsquo;est sur le moyen/long terme que le bénéfice se fera ressentir…<span id="more-30"></span></p>
<h3>Pourquoi commenter ?</h3>
<p>Les intérêts sont multiples et variés allant du simple &laquo;&nbsp;j&rsquo;en suis là&nbsp;&raquo; à la fin de la journée jusqu&rsquo;à la documentation d&rsquo;une application.</p>
<h4>Commenter pour comprendre ce qu&rsquo;on a fait</h4>
<p>Lors d&rsquo;une session de développement on est souvent confronté à un problème nouveau à gérer et la solution n&rsquo;est pas forcément toujours évidente. On fait quelques recherches, on trouve une solution ou l&rsquo;inspiration pour la créer et on l&rsquo;intègre. Tout fonctionne, c&rsquo;est parfait, on est content.<br />
3 mois plus tard on doit revenir dessus car il faut améliorer la fonction en y intégrant de nouveaux paramètres ou s&rsquo;en resservir pour un autre projet, et là c&rsquo;est le drame : on ne comprend plus comment ça fonctionne, voire même à quoi sert ladite fonction… Les 30 secondes nécessaires à écrire les quelques commentaires salutaires nous auraient permises d&rsquo;éviter une décapilarisation crânienne subite et la perte de pas mal de temps.</p>
<h4>Commenter pour expliquer aux autres</h4>
<p>On peut travailler en équipe sur un projet et d&rsquo;autres développeurs risquent d&rsquo;avoir à intervenir sur votre code pendant que vous faites autre chose. Autre cas de figure : vous développez seul un projet puis un peu plus tard c&rsquo;est un autre développeur qui le reprend ou qui vous rejoin dessus. Vous pouvez également être en train de développer un script/module/librairie/application destiné(e) à être partagé(e) avec d&rsquo;autres (dans le cadre d&rsquo;open source par exemple).<br />
Encore une fois, le temps passé à commenter le code évitera aux autres d&rsquo;être complètement perdus à la lecture de votre chef d&rsquo;oeuvre. Ceci est d&rsquo;autant plus vrai que chaque développeur a son style et sa manière de coder et qui, bien souvent, n&rsquo;est limpide que pour lui-même…</p>
<h4>Commenter pour se faciliter la tâche</h4>
<p>Les IDE de qualité sont capable de lire les commentaires <a href="http://en.wikipedia.org/wiki/PHPDoc">DocBlock</a> et de s&rsquo;en servir pour afficher, lors de la saisie, les informations d&rsquo;utilisation que vous avez pris le soin d&rsquo;entrer. Dans le cadre du développement d&rsquo;une application répartie en plusieurs fichiers (souvent le cas en POO ou en utilisant un framework), les commentaires révèlent toute leur puissance en vous évitant de replonger dans le code d&rsquo;une fonction pour retrouver quels arguments lui passer ou encore ce qu&rsquo;elle retourne.<br />
Ce type de commentaire peut aussi être utilisé pour l&rsquo;écriture automatique de la documentation d&rsquo;une API, par exemple, à l&rsquo;aide d&rsquo;un générateur de documentation tel que <a href="http://www.phpdoc.org/">PHPdocumentor</a> ou <a href="http://en.wikipedia.org/wiki/Doxygen">Doxygen</a></p>
<h3>Les différents types de commentaires</h3>
<p>Il existe 3 types de commentaires : ligne simple, multiligne et DocBlock. Les 2 premiers ne servent qu&rsquo;à indiquer des informations courtes au sein même du code alors que le DocBlock permettra aux IDE et générateurs de documentation d&rsquo;en faire bien plus.</p>
<p>Les commentaires simples et multilignes se présentent de la manière suivante :</p>
<pre class="brush: php; title: ; notranslate">
// je suis un commentaire sur une seule ligne
/* je suis
un commentaire
sur plusieurs lignes */
</pre>
<p>Le commentaire DocBlock se présente ainsi :</p>
<pre class="brush: php; title: ; notranslate">
/**
 * Cette fonction sert à faire ceci...
 * un commentaire
 * sur plusieurs lignes
 *
 * @param string $text Description du paramètre
 * @param int $id Description du paramètre
 * @return bool Description de ce que retourne (ou non) la fonction
*/
</pre>
<p>Notez l&rsquo;utilisation de certains mots clés (@param, @return) dont vous trouverez <a href="http://manual.phpdoc.org/HTMLSmartyConverter/HandS/phpDocumentor/tutorial_tags.pkg.html">la liste complète ici</a>. C&rsquo;est précisément ces mots-clés qui permettrons à l&rsquo;IDE et au générateur de documentation de travailler.</p>
<h4>Un exemple d&rsquo;utilisation</h4>
<p>Voici un petit exemple d&rsquo;utilisation des 3 types de commentaires dans un modèle du framework <a href="http://codeigniter.com/">CodeIgniter</a> :</p>
<pre class="brush: php; title: ; notranslate">
&lt;?php

class Blog_model extends CI_Model {

	// constructeur
	function __construct() {
		parent::__construct();
	}

	/**
	 * Recupération des derniers posts de wordpress
	 *
	 * @param	int $count	Le nombre de posts que l'on veut afficher (optionnel)
	 * @return	object		Les posts à afficher
	 */
	function get_latest_posts($count = 5) {
		// requete mysql à l'aide d'ActiveRecord
		$this-&gt;db-&gt;select('post_title, post_name');
		$this-&gt;db-&gt;where('post_status', 'publish');
		$this-&gt;db-&gt;where('post_type', 'post');
		$this-&gt;db-&gt;limit($count);
		$this-&gt;db-&gt;order_by('ID', 'desc');

		$query = $this-&gt;db-&gt;get('wp_posts');
		
		/* on récupère les posts
		sous forme d'objet */
		$data = $query-&gt;result();

		//var_dump($data); exit; // test des résultats obtenus
		
		// renvoi des résultats au controlleur
		return $data;
	}

}
</pre>
<p>J&rsquo;ai eu la main un peu lourde ici mais en même temps il vaut mieux trop de commentaires que pas assez !</p>
<h3>Conclusion</h3>
<p>Il y a peu de temps j&rsquo;ai eu l&rsquo;occasion d&rsquo;intervenir sur un gros projet de CRM/ERP qui était quasiment abouti et dont le développeur a du se retirer. Malheureusement il n&rsquo;avait pas jugé utile de commenter son code et la conséquence directe à été une grosse perte de temps pour moi (le temps de comprendre le fonctionnement) et une grosse perte de temps et d&rsquo;argent pour le client car il a du supporter le coût de &laquo;&nbsp;temps de compréhension&nbsp;&raquo; du code existant en plus du temps de développement nécessaire au résultat demandé&#8230;<br />
Pour faire bref, <strong>passez un peu de temps à commenter votre code</strong> &#8211; votre client, les utilisateurs de votre code et vous-même ne vous remercieront jamais assez !</p>
]]></content:encoded>
			<wfw:commentRss>https://www.nukleo.fr/blog/importance-de-commenter-son-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
