<?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/"
	>

<channel>
	<title>Réseau social des créateurs de site web</title>
	<atom:link href="http://social.hecube.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://social.hecube.net</link>
	<description>Réseau social dédié à la communauté des créateurs de sites web</description>
	<pubDate>Tue, 09 Mar 2010 17:50:25 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Histoire de ne rien laisser de&#8230;</title>
		<link>http://social.hecube.net/blog/2010/03/09/histoire-de-ne-rien-laisser-de/</link>
		<comments>http://social.hecube.net/blog/2010/03/09/histoire-de-ne-rien-laisser-de/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 17:50:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Divers]]></category>

		<guid isPermaLink="false">http://social.hecube.net/blog/2010/03/09/histoire-de-ne-rien-laisser-de/</guid>
		<description><![CDATA[Histoire de ne rien laisser de côté, on vous livre sans trop de fioritures de quoi faire des sondages sur Joomla&#8230;.. http://bit.ly/bLvMAh
]]></description>
			<content:encoded><![CDATA[<p>Histoire de ne rien laisser de côté, on vous livre sans trop de fioritures de quoi faire des sondages sur Joomla&#8230;.. <a href="http://bit.ly/bLvMAh" rel="nofollow" class="external">http://bit.ly/bLvMAh</a></p>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/03/09/histoire-de-ne-rien-laisser-de/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla</title>
		<link>http://social.hecube.net/blog/2010/03/09/joomla-quizz-module-plugin-creer-un-quizz-ou-un-sondage-sous-joomla/</link>
		<comments>http://social.hecube.net/blog/2010/03/09/joomla-quizz-module-plugin-creer-un-quizz-ou-un-sondage-sous-joomla/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 17:42:44 +0000</pubDate>
		<dc:creator>bruno</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Divers]]></category>

		<category><![CDATA[Joomla, Virtuemart]]></category>

		<category><![CDATA[Marketing Web]]></category>

		<category><![CDATA[PHP, MYSQL]]></category>

		<category><![CDATA[Tutoriaux]]></category>

		<category><![CDATA[Joomla]]></category>

		<category><![CDATA[Module]]></category>

		<category><![CDATA[plugin]]></category>

		<category><![CDATA[Quizz]]></category>

		<category><![CDATA[Sondage]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1473</guid>
		<description><![CDATA[


Il est très souvent question de faire des sondages, de questionner les internautes qui viennent sur votre site afin de se procurer facilement et gratuitement du contenu, ainsi qu&#8217;une légère interaction. On va voir parmi les extensions Joomla laquelle vous permettra de faire naitre cette interaction facilement.
On ne va pas s&#8217;embarrasser de détails et on [...]]]></description>
			<content:encoded><![CDATA[
<p><!-- Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla --><br />
<!--  Joomla, Quizz, Module, Plugin, Sondage --></p>
<p><a title="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" class="bigpic" href="http://social.hecube.net/blog/2010/03/09/joomla-quizz-module-plugin-creer-un-quizz-ou-un-sondage-sous-joomla/"><img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_b.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></a>Il est très souvent question de faire des sondages, de questionner les internautes qui viennent sur votre site afin de se procurer facilement et gratuitement du contenu, ainsi qu&#8217;une légère interaction.<span id="more-1473"></span> On va voir parmi les extensions Joomla laquelle vous permettra de faire naitre cette interaction facilement.</p>
<p><b>On ne va pas s&#8217;embarrasser de détails et on ne va s&#8217;intéresser qu&#8217;à une seule extension <code>JQuarks_v0.2.4</code>. Cette extension nous semble la plus accessible et la plus efficiente à première vue. C&#8217;est par ailleurs l&#8217;extension la mieux documentée puisque vous avez à votre disposition un manuel d&#8217;utilisation très bien fait en anglais <code>JQuarks_v0.2.4_guide.pdf</code></b></p>
<p>Il faut &#8220;dézipper&#8221; le fichier suivant <code>JQuarks_v0.2.4_NEW_INSTALL_unzip_me_first.zip</code> qui vous permet d&#8217;obtenir les principaux fichiers pour le fonctionnement de cette extension fonctionnelle : </p>
<ul>
<li>Le composant <code>com_jquarks_v0.2.4.zip</code></li>
<li>Le module <code>mod_jquarks_v0.2.4.zip</code></li>
<li>Le plugin <code>plg_editor_syntaxhighlight_jquarks_v0.2.2.zip</code></li>
<li>Le plugin <code>plg_user_jquarks_v0.2.2.zip</code></li>
</ul>
<h4>Installer et utiliser l&#8217;extension <code>JQuarks_v0.2.4</code></h4>
<p><b>Cela s&#8217;installe le plus simplement du monde&#8230;</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_1.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Installation de <code>com_jquarks_v0.2.4.zip</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_2.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Installation de <code>mod_jquarks_v0.2.4.zip</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_3.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Installation de <code>plg_user_jquarks_v0.2.2.zip</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_4.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<h4>Créer en quizz et des questions bref se servir de <code>JQuarks_v0.2.4</code></h4>
<p>Sans prendre connaissance de la méthode qui est décrite dans la pdf, vous risquez quelques déconvenues.</p>
<p>Les étapes sont dans l&#8217;ordre :</p>
<ol>
<li> La création d&#8217;un Quizz avec ou sans description</li>
<li> La création des Questions de votre futur quizz</li>
<li> Pour faciliter la gestion des questions, n&#8217;hésitez pas à créer des Catégories</li>
<p>	<strong>Ensuite le système fonctionne comme des poupées russes, par des attachements successifs.</strong></p>
<li> La première partie la plus importante consiste à attacher des questions à un Ensembles de Questions</b></li>
<li> La deuxième partie la plus importante consiste à attacher un ensemble de questions à un Quizz</b></li>
</ol>
<p><b>Création d&#8217;un Quizz</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_5.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Création d&#8217;une Question</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_6.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Création d&#8217;une catégorie pour les questions</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_7.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Affectation d&#8217;un ensemble de questions à un Quizz</b></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_8.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_9.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>C&#8217;est le truc à savoir, affecter un ensemble de questions à un Quizz</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_15.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><b>Il ne vous reste ensuite qu&#8217;à publier votre Quizz dans un module, ici dans la position <code>left</code>.</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_13.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/03/joomla_module_poll_quizz_14.jpg" alt="Joomla, Quizz, Module, Plugin - Créer un Quizz ou un sondage sous Joomla" width="500" height="265" /></p>
<h2>En savoir plus</h2>
<ul>
<li>La page extensions de Joomla pour effectuer des Quiz<br />
		<a href="http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz" target="_blank" class="external">http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz</a></li>
<li>La page extensions de Joomla pour effectuer des Sondages<br />
		<a href="http://extensions.joomla.org/extensions/contacts-and-feedback/surveys" target="_blank" class="external">http://extensions.joomla.org/extensions/contacts-and-feedback/surveys</a></li>
<li>JQuarks - Quiz and Survey Component for Joomla ComponentModulePluginLanguage<br />
		<a href="http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz/10590" target="_blank" class="external">http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz/10590</a></li>
<li>Quiz Deluxe<br />
		<a href="http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz/11302" target="_blank" class="external">http://extensions.joomla.org/extensions/vertical-markets/education-a-culture/quiz/11302</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/03/09/joomla-quizz-module-plugin-creer-un-quizz-ou-un-sondage-sous-joomla/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Très content de la solution d&#8230;</title>
		<link>http://social.hecube.net/blog/2010/03/06/tres-content-de-la-solution-d/</link>
		<comments>http://social.hecube.net/blog/2010/03/06/tres-content-de-la-solution-d/#comments</comments>
		<pubDate>Sat, 06 Mar 2010 21:08:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Divers]]></category>

		<guid isPermaLink="false">http://social.hecube.net/blog/2010/03/06/tres-content-de-la-solution-d/</guid>
		<description><![CDATA[Très content de la solution de gestion de projets que nous avons fini d&#8217;installer&#8230; Redmind vraiment c&#8217;est top : http://www.redmine.org/
]]></description>
			<content:encoded><![CDATA[<p>Très content de la solution de gestion de projets que nous avons fini d&#8217;installer&#8230; Redmind vraiment c&#8217;est top : <a href="http://www.redmine.org/" rel="nofollow" class="external">http://www.redmine.org/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/03/06/tres-content-de-la-solution-d/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Wordpress, Plugins mp3 - 3 plugins pour jouer de la musique au format mp3</title>
		<link>http://social.hecube.net/blog/2010/03/02/wordpress-plugins-mp3-3-plugins-pour-jouer-de-la-musique-au-format-mp3/</link>
		<comments>http://social.hecube.net/blog/2010/03/02/wordpress-plugins-mp3-3-plugins-pour-jouer-de-la-musique-au-format-mp3/#comments</comments>
		<pubDate>Tue, 02 Mar 2010 14:37:33 +0000</pubDate>
		<dc:creator>lebleu</dc:creator>
		
		<category><![CDATA[Divers]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1445</guid>
		<description><![CDATA[
Avis aux newbies. Peut-être avez vous besoin d&#8217;intégrer du son dans vos sites respectifs. Je vous propose de passer en revue 3 plugins officiant comme  players mp3. Simples d&#8217;accès, ils vous conviendront à coup sûr.
Pour rendre actif le plugin, procédez comme à l&#8217;accoutumée: recherche du plugin (soit l&#8217;extension) depuis votre administration Wordpress puis installation [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://social.hecube.net/files/2010/03/pluginsmp3.jpg" alt="pluginsmp3" width="500" height="265" class="aligncenter size-full wp-image-1466" /></p>
<p><b>Avis aux newbies. Peut-être avez vous besoin d&#8217;intégrer du son dans vos sites respectifs. Je vous propose de passer en revue 3 plugins officiant comme  players mp3. Simples d&#8217;accès, ils vous conviendront à coup sûr.</b><span id="more-1445"></span></p>
<p>Pour rendre actif le plugin, procédez comme à l&#8217;accoutumée: recherche du plugin (soit l&#8217;extension) depuis votre administration Wordpress puis installation immédiate. Vous pouvez aussi télécharger ce fichier pour le placer à la racine du répertoire &#8220;wp-content/plugins/&#8221; .<br />
Rendez-vous ensuite dans l’administration de votre site, sous l’onglet plugin, afin d’activer celui-ci. </p>
<p>Vous retrouvez chacune de ces applications dans la rubrique &#8220;Réglages&#8221; de l&#8217;administration. </p>
<h4>WP Audio</h4>
<p><img src="http://social.hecube.net/files/2010/03/wp-audio-1.jpg" alt="wp-audio-1" width="500" height="265" class="aligncenter size-full wp-image-1447" /></p>
<p>Peu d&#8217;options à dispositions: la possibilité que ce player gère tous les liens mp3, qu&#8217;il s&#8217;occupe également des tags traités par d&#8217;autres players. Vous pouvez aussi toucher au style du player, soit la police et la couleur.  </p>
<p><img src="http://social.hecube.net/files/2010/03/wp-audio-21.jpg" alt="wp-audio-21" width="500" height="265" class="aligncenter size-full wp-image-1468" /></p>
<p>Ce plugin convient à ceux qui recherchent un outil discret à placer dans leur site. En effet, une simple bande blanche accompagnée du nom de l&#8217;artiste et de la durée de la chanson fait office de player. Elle passe au fur et à mesure à la couleur bleue pour marquer la progression de la musique.</p>
<p><img src="http://social.hecube.net/files/2010/03/wp-audio-31.jpg" alt="wp-audio-31" width="500" height="265" class="aligncenter size-full wp-image-1451" /></p>
<h4>Audio player</h4>
<p>C&#8217;est un plugin qui dispose de plusieurs options.</p>
<p><img src="http://social.hecube.net/files/2010/03/audio-player-1.jpg" alt="audio-player-1" width="500" height="265" class="aligncenter size-full wp-image-1452" /></p>
<p>Notamment, il donne l&#8217;opportunité d&#8217;avoir plus d&#8217;un lecteur audio par article,il a des options de personnalisation de syndication (dans une certaine mesure) et il peut être activé pour tous les commentaires de votre blog.</p>
<p><img src="http://social.hecube.net/files/2010/03/audio-player-22.jpg" alt="audio-player-22" width="500" height="265" class="aligncenter size-full wp-image-1458" /></p>
<p>Les options &#8220;physiques&#8221; sont également présentes: vous pouvez choisir la couleur de fond, la largeur du player, activer ou non l&#8217;animation de début, accoler des vidéos dans le cadre de podcasting&#8230; </p>
<p><img src="http://social.hecube.net/files/2010/03/audio-player-3.jpg" alt="audio-player-3" width="500" height="265" class="aligncenter size-full wp-image-1456" /></p>
<p>Pour insérer le player dans votre article, il vous suffit d&#8217;y intégrer le code suivant: [audio:votre chemin vers la chanson.mp3]</p>
<p>Vous avez dès lors un player pratique qui est capable de prendre plusieurs aspects pour correspondre au mieux à l&#8217;esprit de votre site.</p>
<p><img src="http://social.hecube.net/files/2010/03/audio-player-4.jpg" alt="audio-player-4" width="500" height="265" class="aligncenter size-full wp-image-1460" /></p>
<h4>Wordphonic</h4>
<p>Ce plugin présente lui aussi des options intéressantes. </p>
<p><img src="http://social.hecube.net/files/2010/03/wordphonic-1.jpg" alt="wordphonic-1" width="500" height="265" class="aligncenter size-full wp-image-1461" /></p>
<p>Il propose entre autres la fonction autoplay, la lecture aléatoire et la répétition d&#8217;un même morceau.<br />
Vous avez même la possibilité de changer l&#8217;apparence de votre player. 4 &#8220;peaux&#8221; (soit &#8220;skin&#8221;, en anglais dans le texte) sont disponibles. Habillez votre nouvel ami selon votre humeur. </p>
<p><img src="http://social.hecube.net/files/2010/03/wordphonic-2.jpg" alt="wordphonic-2" width="500" height="265" class="aligncenter size-full wp-image-1462" /></p>
<p>L&#8217;insertion de la musique dans un article est assez aisée. Il suffit de copier le petit script (une vingtaine de lignes) situé tout en bas du panel d&#8217;administration et de le placer à l&#8217;endroit voulu.</p>
<p><img src="http://social.hecube.net/files/2010/03/wordphonic-3.jpg" alt="wordphonic-3" width="500" height="265" class="aligncenter size-full wp-image-1464" /></p>
<p>Le panel d&#8217;administration vous offre jusqu&#8217;à 35 liens mp3 à caser dans le player. Ajoutez alors dans la grille le nom de l&#8217;artiste ainsi que le titre de la chanson.</p>
<p><img src="http://social.hecube.net/files/2010/03/wordphonic-4.jpg" alt="wordphonic-4" width="500" height="265" class="aligncenter size-full wp-image-1463" /></p>
<p>N.B: par défaut, vous avez un texte déroulant qui s&#8217;affiche: “E-PHONIC MP3-PLAYER - GET YOUR OWN FREE SKINNABLE MP3-PLAYER AT WWW.E-PHONIC.COM/MP3PLAYER?”.<br />
Pour vous en défaire, rendez-vous sur le dossier du skin qui vous intéresse. Exemple: “/wordpress/wp-content/plugins/wordphonic/ephonic/skins/nobius_platinum/.”<br />
Editez le fichier skin.xml. Remplacez le texte qui apparaît par défaut par celui que vous désirez et le tour est joué. </p>
<p><b>Ces 3 plugins permettent au final de fournir la prestation attendue: facilité d&#8217;utilisation pour une bonne qualité d&#8217;écoute. Que demande le peuple?</b></p>
<h2>En savoir plus</h2>
<ul>
<li>Audio Player par une utilisatrice: <a href="http://liseweb.fr/BLOG/mp3-dans-wordpress-avec-audio-player" target="_blank" class="external">http://liseweb.fr/BLOG/mp3-dans-wordpress-avec-audio-player</a></li>
<li>Le site de WP Audio: <a href="http://wpaudio.com/" target="_blank" class="external">http://wpaudio.com/</a></li>
<li>Le site de Wordphonic: <a href="http://www.tracyfu.com/wordphonic/" target="_blank" class="external">http://www.tracyfu.com/wordphonic/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/03/02/wordpress-plugins-mp3-3-plugins-pour-jouer-de-la-musique-au-format-mp3/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Wordpress, traduction - Traduire son site Wordpress et ses plugins en plusieurs langues</title>
		<link>http://social.hecube.net/blog/2010/02/22/wordpress-traduction-traduire-votre-site-en-plusieurs-langues-avec-transposh/</link>
		<comments>http://social.hecube.net/blog/2010/02/22/wordpress-traduction-traduire-votre-site-en-plusieurs-langues-avec-transposh/#comments</comments>
		<pubDate>Mon, 22 Feb 2010 13:56:51 +0000</pubDate>
		<dc:creator>lebleu</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Google]]></category>

		<category><![CDATA[Marketing Web]]></category>

		<category><![CDATA[Réseaux sociaux]]></category>

		<category><![CDATA[Widget, Gadget]]></category>

		<category><![CDATA[Wordpress]]></category>

		<category><![CDATA[traduction]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1402</guid>
		<description><![CDATA[

 
Avec l&#8217;ambition de faire découvrir votre merveilleux site au monde entier, vous avez sûrement buté sur l&#8217;écueil de la traduction.  La tâche peut effectivement s&#8217;avérer ardue: si ce n&#8217;est pour vos lacunes linguistiques, arpenter de nouveau les kilomètres de pages que vous avez pondu pour les structurer différemment peut vous triturer les dernières [...]]]></description>
			<content:encoded><![CDATA[<p><!-- Wordpress, traduction mp3 - Traduire son site en plusieurs langues avec Transposh--><br />
<!--  Wordpress, Plugin  --></p>
<p><a title="Wordpress, Traduction - Traduire votre site en plusieurs langues avec Transposh" class="bigpic" href="http://social.hecube.net"><img src="http://social.hecube.net/files/2010/02/transposh3.jpg" alt="transposh" width="500" height="265" class="aligncenter size-full wp-image-1437" /></a> </p>
<p>Avec l&#8217;ambition de faire découvrir votre merveilleux site au monde entier, vous avez sûrement buté sur l&#8217;écueil de la traduction. <span id="more-1402"></span> La tâche peut effectivement s&#8217;avérer ardue: si ce n&#8217;est pour vos lacunes linguistiques, arpenter de nouveau les kilomètres de pages que vous avez pondu pour les structurer différemment peut vous triturer les dernières méninges disponibles. Vous trouverez pléthore de plugins destinés à traduire vos sites avec plus ou moins de bonheur. Dans ce cadre, je tiens à porter à votre connaissance (si ce n&#8217;est déjà le cas) le plugin Transposh, créé par l&#8217;équipe du même nom.     </p>
<h4>Administration du plugin</h4>
<p>La mise en place de cette application est très simple (et la simplicité, c&#8217;est le leitmotiv des utilisateurs de Wordpress). Après l&#8217;installation immédiate, vous retrouvez le plugin dans la rubrique &#8220;Réglages&#8221; du panel administratif de votre site.<br />
<b>Lorsque vous sélectionnez l&#8217;application, vous vous retrouvez devant la fenêtre ci-dessous:</b></p>
<p><img src="http://social.hecube.net/files/2010/02/wordpress_transposh_stuff_12.jpg" alt="wordpress transposh panel" width="500" height="265" class="aligncenter size-full wp-image-1425" /></p>
<p>A votre disposition, une cinquantaine de langues pour élargir la compréhension de vos articles. Un simple &#8220;click &amp; drop&#8221; permet de sélectionner la langue par défaut du site. Vous avez la possibilité de choisir autant de langues que vous souhaitez parmi celles qui vous sont proposées. </p>
<p>Vous avez également des statistiques dont l&#8217;utilité sera diversement appréciée telle que la somme des traductions opérées et celles récemment effectuées. </p>
<p><img src="http://social.hecube.net/files/2010/02/wordpress_transposh_stuff_25.jpg" alt="wordpress transposh stats" width="500" height="265" class="aligncenter size-full wp-image-1426" /></p>
<h4>Les options</h4>
<p>Différentes options permettent de définir le cadre de lecture et d&#8217;écriture. En effet, vous avez la possibilité de hiérarchiser l&#8217;accès aux modifications de traduction.</p>
<p><img src="http://social.hecube.net/files/2010/02/wordpress_transposh_stuff_31.jpg" alt="wordpress transposh edition" width="500" height="265" class="aligncenter size-full wp-image-1427" /></p>
<p>Dans le cadre d&#8217;une traduction automatique, vous pouvez choisir votre moteur de traduction: Google ou Bing (MSN). Donnée non négligeable du point de vue du référencement.</p>
<p>De plus, chaque post peut être immédiatement traduit une fois qu&#8217;il ait été publié.</p>
<p>Encore en matière de référencement, Transposh facilite la position du site à l&#8217;international en affectant à l&#8217;url les éléments correspondants. Ex: http://wordpress.org/<code>en</code>.</p>
<h4>La force de la personnalisation</h4>
<p>Combien de fois avez-vous eu affaire à une traduction selon vous trop approximative  pour que vous vous en contentiez? Arrêtez de compter. Dites juste: &#8220;Beaucoup trop!!&#8221;. La force de Transposh, c&#8217;est qu&#8217;il permet de bénéficier à la fois d&#8217;une traduction automatique et d&#8217;une traduction totalement personnalisable. </p>
<p><img src="http://social.hecube.net/files/2010/02/wordpress_transposh_stuff_42.jpg" alt="wordpress traduction site" width="500" height="265" class="aligncenter size-full wp-image-1428" /></p>
<p>Si la traduction réalisée automatiquement ne vous convient pas, vous pouvez la faire vous-même.</p>
<p><img src="http://social.hecube.net/files/2010/02/wordpress_transposh_stuff_53.jpg" alt="wordpress transposh modifications" width="500" height="265" class="aligncenter size-full wp-image-1429" /></p>
<p>Bon, bon, ok ! L&#8217;exemple pris n&#8217;est pas des plus compliqués à traduire mais il suffit à vous montrer la simplicité de l&#8217;application.<br />
<b>Au final, vous bénéficiez d&#8217;un plugin facile à manipuler qui permet de retranscrire votre contenu avec une haute fidélité</b></p>
<h2>En savoir plus</h2>
<ul>
<li>Site de Transposh: <a href="http://transposh.org/fr/" target="_blank" class="external">http://transposh.org/fr/</a></li>
<li>Téléchargement:<a href="http://wordpress.org/extend/plugins/transposh-translation-filter-for-wordpress/" target="_blank" class="external">http://wordpress.org/extend/plugins/transposh-translation-filter-for-wordpress/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/22/wordpress-traduction-traduire-votre-site-en-plusieurs-langues-avec-transposh/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Joomla, Newsletter - Gérer une newsletter sous Joomla</title>
		<link>http://social.hecube.net/blog/2010/02/19/joomla-newsletter-gerer-une-newsletter-sous-joomla/</link>
		<comments>http://social.hecube.net/blog/2010/02/19/joomla-newsletter-gerer-une-newsletter-sous-joomla/#comments</comments>
		<pubDate>Fri, 19 Feb 2010 15:05:20 +0000</pubDate>
		<dc:creator>bruno</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Joomla, Virtuemart]]></category>

		<category><![CDATA[PHP, MYSQL]]></category>

		<category><![CDATA[Joomla]]></category>

		<category><![CDATA[Module]]></category>

		<category><![CDATA[MySQL]]></category>

		<category><![CDATA[newsletter]]></category>

		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1378</guid>
		<description><![CDATA[


Voilà une demande récurrente auquelle toute personne qui travaille sur le web a au moins été confronté une fois :  gérer de A-Z d&#8217;une newsletter. A croire que l&#8217;on doit au minimum lire 5 newsletters par jour ! On va donc voir dans cet article comment gérer une newsletter sous Joomla 1.5. De la [...]]]></description>
			<content:encoded><![CDATA[<p>
<!-- Joomla, Newsletter - Gérer une newsletter sous Joomla  --><br />
<!--  Joomla, Newsletter, Module , PHP, MySQL, CMS --></p>
<p><a title="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" class="bigpic" href="http://social.hecube.net/blog/2010/02/19/joomla-newsletter-gerer-une-newsletter-sous-joomla/"><img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_b.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla" width="500" height="265" /></a>Voilà une demande récurrente auquelle toute personne qui travaille sur le web a au moins été confronté une fois :  gérer de A-Z d&#8217;une newsletter. A croire que l&#8217;on doit au minimum lire 5 newsletters par jour ! On va donc voir dans cet article comment gérer une newsletter sous Joomla 1.5.<span id="more-1378"></span> De la gestion des inscrit à l&#8217;envoi de la newsletter elle-même !</p>
<p>Joomla permet une gestion étendue de l&#8217;envoi de newsletter, on va donc tester quelques-uns des modules disponibles. Les tests vont être réalisés sous Joomla 1.5 en français <code>Joomla! 1.5.15 Stable [ Wojmamni Ama Mamni ]</code></p>
<p><i>NB : Un conseil sur l&#8217;utilisation de ces modules : l&#8217;envoi intempestif de newsletter depuis un serveur web qui n&#8217;est pas véritablement un serveur d&#8217;envoi par exemple <code>smtp.mac.com</code> (serveur &#8220;white listed&#8221;) risque de causer plus de dégâts que de bienfaits à votre nom de domaine et à votre notoriété. Au de-là disons d&#8217;une liste de 500 utilisateurs inscrits, il serait bon d&#8217;envisager une vraie solution, la liste des raisons militant pour ce changement serait presque aussi longue que l&#8217;article à venir !</i></p>
<h4>Les critères de sélection de notre extension fonctionnelle sous Joomla</h4>
<p>Plusieurs de critères sélection président comme souvent à notre choix, citons-les en vrac :</p>
<ul>
<li>L&#8217;insertion facile d&#8217;un formulaire d&#8217;inscription à la newsletter</li>
<li>La gestion des inscrits</li>
<li>L&#8217;envoi d&#8217;un mail de confirmation et d&#8217;un mail de désabonnement</li>
<li>L&#8217; export/import des listes d&#8217;inscrits à la newsletter eu format <code>.txt</code>, <code>.csv</code>, <code>.xml</code>. C&#8217;est très utile lorsque vous envoyez des newsletters non depuis votre serveur web mais depuis un service véritable d&#8217;envoi de newsletter.</li>
<li>Quelques éléments de personnalisation de la newsletter elle-même ex Bonjour [name]</li>
</ul>
<p>Compte tenu que nous sommes parti sur Joomla 1.5 et que l&#8217;on ne souhaite pas franchement avoir un plugin/module &#8220;moisi&#8221; qui nécessiterai l&#8217;activation <code>legacy</code> de triste mémoire. (Cf <a href="http://social.hecube.net/blog/2009/09/29/joomla-mobile-plugin-creer-une-version-mobile-de-votre-site-sous-joomla/">Joomla, Mobile, Plugin - Créer une version mobile de votre site sous Joomla</a>)</p>
<p>Notre sélection s&#8217;est portée sur la liste suivante : </p>
<h4>1. AcyMailing</h4>
<p>De loin le meilleur module sous Joomla pour gérer une newsletter pour tous ces aspects. Module pour lequel, nous n&#8217;avons fait que peu de capture tant les écrans sont limpides et donc d&#8217;une compréhension aisée. </p>
<p><b>L&#8217;écran de configuration de AcyMailing</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_5.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><b>L&#8217;écran classique une fois qu&#8217;un module est installé</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_1.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><b>L&#8217;export CSV des inscrits à la newsletter sous AcyMailing ouvert à l&#8217;aide d&#8217;un éditeur texte</b></p>

<div class="wp_syntax"><div class="code"><pre class="txt" style="font-family:monospace;">	email;name;confirmed;html
	info@hecube.net;Administrator;1;1
	user_1@hecube.net;user_1;1;1
	user_2@hecube.net;user_2;1;1</pre></div></div>

<h4>2. Communicator 2.0.x</h4>
<p>C&#8217;est une extenion fonctionnelle de joomla qui se compose de 3 fichiers. Ces fichiers doivent être installés dans l&#8217;ordre qu&#8217;il vous plaira de suivre.</p>
<ul>
<li>Un Composant</li>
<li>Un Module <code>mod_communicatorsubscribe_2.0.3.zip</code></li>
<li>Un Plugin <code>plg_search_communicator_2.0.0.zip</code></li>
<li>Un pack Language <code>fr-FR_communicator_lang_both_2.0.0.zip</code></li>
</ul>
<p>Une fois l&#8217;ensemble installé, vous disposez d&#8217;un espace de publication des newsletters assez facile d&#8217;accès qui permet d&#8217;archiver vos envois.</p>
<p><b>Se promener dans Communicator</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_3.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><b>L&#8217;espace de publication des newsletters assez proche du module <code>letterman</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_4.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_1.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /><br />
<b>L&#8217;export des inscrits se fait dans un format xml via Communicator</b></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;UTF-8&quot;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></span>
              <span style="color: #808080; font-style: italic;">&lt;!-- Communicator export file --&gt;</span>
              <span style="color: #00bbdd;">&lt;!DOCTYPE subscribers [</span>
<span style="color: #00bbdd;">              &lt;!ELEMENT subscribers (subscriber+)&gt;</span>
              <span style="color: #009900;">&lt;!ELEMENT subscriber <span style="color: #66cc66;">&#40;</span>subscriber_id, name, email, confirmed, subscribe_date<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              <span style="color: #009900;">&lt;!ELEMENT subscriber_id <span style="color: #66cc66;">&#40;</span>#PCDATA<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              <span style="color: #009900;">&lt;!ELEMENT name <span style="color: #66cc66;">&#40;</span>CDATA<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              <span style="color: #009900;">&lt;!ELEMENT email <span style="color: #66cc66;">&#40;</span>#PCDATA<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              <span style="color: #009900;">&lt;!ELEMENT confirmed <span style="color: #66cc66;">&#40;</span>#PCDATA<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              <span style="color: #009900;">&lt;!ELEMENT subscribe_date <span style="color: #66cc66;">&#40;</span>#PCDATA<span style="color: #66cc66;">&#41;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
              ]&gt;
              <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;subscribers<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
                <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;subscriber<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;subscriber_id<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/subscriber_id<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;name<span style="color: #000000; font-weight: bold;">&gt;</span></span></span><span style="color: #339933;">&lt;![CDATA[info]]&gt;</span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/name<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;email<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>info@hecube.net<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/email<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;confirmed<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>0<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/confirmed<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
    <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;subscribe_date<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>2010-02-18 07:35:47<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/subscribe_date<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
  <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/subscriber<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/subscribers<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<h4>3. ccNewsletter</h4>
<p>C&#8217;est un module Joomla, doublé d&#8217;un composant, créé par Chill Creations (http://www.extensions.chillcreations.com/), le fichier télécahrgé est <code>newsletter_ccNewsletter_107_UNZIP_FIRST.zip</code>, dans lequel nous trouvons comme dans un oeuf de pâques, deux fichiers à installer : <code>com_ccnewsletter.zip</code> et <code>mod_ccnewsletter.zip</code>.<br />
Un fois le composant et le moudle installés, il vous reste à activer le module.</p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_2.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><b>Activation du module <code>ccNewsletter</code> la position <code>left</code> du template Joomla</b></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_6.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p><b>Le formulaire d&#8217;inscription &#8220;moche&#8221; de <code>ccNewsletter</code> </b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/joomla_module_newsletter_7.jpg" alt="Joomla, Newsletter - Gérer une newsletter sous Joomla 1.5" width="500" height="265" /></p>
<p>Le formulaire vérifie la validité des adresses et nom d&#8217;utilisateur comme la plupart des formulaires des modules précédents.</p>
<p><b>Les paramètres de personnalisation de votre newsletter au sein de ccNewsletter</b></p>
<p><code>[unsubscribe link]  	 Inserted anywhere in your email will automatically generate a link for a user to unsubscribe.</code><br />
<code>[name] 	Inserted anywhere in your email will automatically generate a username for greetings.</code><br />
<code>[activate link] 	Inserted anywhere in your email will automatically generate a link for email activation.</code></p>
<h4>Les laissés pour compte de la gestion newsletter</h4>
<p>Il s&#8217;agit essentiellement d&#8217;abandonner les modules/plugins qui n&#8217;ont pas été développés pour Joomla 1.5. Ainsi, l&#8217;extension fonctionnelle <b>Letterman</b> ou <b>Acajoom</b> n&#8217;ont pas été retenus même si le plugin <code>legacy</code> a été activé. <b>En attendant que ces modules soient portés dans environnement 1.5, il vaut mieux y renoncer, c&#8217;est un facteur d&#8217;instabilité en moins.</b></p>
<h2>En savoir plus</h2>
<ul>
<li>La catégorie &#8220;newsletter&#8221;  des extensions de Joomla.org<br />
	<a href="http://extensions.joomla.org/extensions/content-sharing/newsletter" target="_blank" class="external">http://extensions.joomla.org/extensions/content-sharing/newsletter</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/19/joomla-newsletter-gerer-une-newsletter-sous-joomla/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Drupal, Theme - Créer un thème Drupal 6 à partir d&#8217;une page html</title>
		<link>http://social.hecube.net/blog/2010/02/16/drupal-theme-creer-un-theme-drupal-6-a-partir-dune-page-html/</link>
		<comments>http://social.hecube.net/blog/2010/02/16/drupal-theme-creer-un-theme-drupal-6-a-partir-dune-page-html/#comments</comments>
		<pubDate>Tue, 16 Feb 2010 12:34:39 +0000</pubDate>
		<dc:creator>bruno</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Drupal]]></category>

		<category><![CDATA[PHP, MYSQL]]></category>

		<category><![CDATA[Technologie]]></category>

		<category><![CDATA[Webdesign]]></category>

		<category><![CDATA[XHTML CSS]]></category>

		<category><![CDATA[CSS]]></category>

		<category><![CDATA[html]]></category>

		<category><![CDATA[Intégration]]></category>

		<category><![CDATA[MySQL]]></category>

		<category><![CDATA[PHP]]></category>

		<category><![CDATA[Template]]></category>

		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1367</guid>
		<description><![CDATA[	]]></description>
			<content:encoded><![CDATA[<p>	<!-- Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html  --><br />
	<!--  Drupal, Template, Intégration, html, CSS, XHTML, PHP, MySQL --></p>
<p>	<a title="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" class="bigpic" href="http://social.hecube.net/blog/2010/02/16/drupal-theme-creer-un-theme-drupal-6-a-partir-dune-page-html/"><img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_b.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></a>On va tenter de réaliser un thème Drupal à partir d&#8217;un fichier statique HTML. Le plus rapidement possible cela va sans dire car il est toujours question de se surpasser dans une économie capitaliste obsédé par la performance et le ROI ! <span id="more-1367"></span>	<b>L&#8217;intégration de ce thème a vocation juste à montrer qu&#8217;il est possible de plonger rapidement dans la code et de ressortir avec les prémices d&#8217;un thème Drupal. Bien sûr, cela ne couvre que 60% d&#8217;un thème opérationnel sous Drupal 6, il reste beaucoup de <code>fine-tuning</code> pour parfaire ce thème. Pour cet article, le thème a été réalisé sous Drupal 6.15</b></p>
<h4>Les valeurs du fichier principale <code>page.tpl.php</code> </h4>
<p>	La première chose est bien connaitre les valeurs qui peuvent être utilisées dans le fichier <code>page.tpl.php</code> qui est disons le noeud, pour reprendre la terminologie &#8220;Drupalienne&#8221;, de l&#8217;affichage d&#8217;un thème.</p>
<p>	<b>Ces valeurs sont appelés par Drupal au sein de notre fichier <code>page.tpl.php</code>, vous n&#8217;aurez donc qu&#8217;à remplacer les éléments statiques en <code>HTML</code> par d&#8217;autres valeurs dynamiques reconnus et utilisés par Drupal 6.</b></p>
<p>	On va retrouver ici, quelques-unes des pratiques qui étaient déjà en action sur un précèdent article.</p>
<ul>
<li><a href="http://social.hecube.net/blog/2009/06/19/drupal-6-les-bonnes-pratiques-pour-creer-un-theme-pour-drupal-6x/">Drupal 6 - les bonnes pratiques pour créer un thème pour drupal 6.x</a></li>
</ul>
<p><b>Un extrait des valeurs possibles de <code>page.tpl.php</code></b></p>
<blockquote><p>
	$base_path<br />
	    Returns the base URL path of the Drupal installation. At the very least, this will always default to /.<br />
	$breadcrumb<br />
	    HTML for displaying the breadcrumbs at the top of the page.<br />
	$closure<br />
	    Needs to be displayed at the bottom of the page, for any dynamic javascript that needs to be called once the page has already been displayed.<br />
	$content<br />
	    The HTML content generated by Drupal to be displayed.<br />
	$css<br />
	    An array of all the CSS files for the current page.<br />
	$directory<br />
	    The directory the theme is located in, e.g.<br />
	    themes/garland or themes/garland/minelli.<br />
	$feed_icons<br />
	    A string of all feed icons for the current page.<br />
	$footer_message<br />
	    The footer message as defined in the admin settings, also the HTML for the footer region.<br />
	$head<br />
	    HTML as generated by drupal_get_html_head().</p>
<p>	&#8230;. to be continued
	</p></blockquote>
<p><i>Source : <a href="http://drupal.org/node/11812" class="external">http://drupal.org/node/11812</a></i></p>
<p><b>Ce fichier sera notre fichier principal pour ce thème qui ne comporte à ce jour qu&#8217;un seul fichier. Pour trouvre des modeles <code>HTML</code>, il suffit de se baisser. En effet, le Web regarde de ressources qui distribuent des templates <code>HTML</code></b>. Pour notre part, nous sommes allés chercher un thème nommé <code>singapore</code> sur freelayouts.com/</p>
<p><b>Le thème <code>singapore</code> en <code>HTML</code> ou dans les petites rues de <code>singapore</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_1.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></p>
<p><i>Source : <a href="http://www.freelayouts.com/websites/html-templates?order=rating+desc" class="external">http://www.freelayouts.com/websites/html-templates?order=rating+desc.</a></i></p>
<h4>Etape 1 - Convertir notre fichier html en <code>page.tpl.php</code></h4>
<p>	C&#8217;est disons la chose la plus simple à faire, renommer un fichier est donc la première chose à faire. Vous allez donc renommer <code>index.html</code> en <code>page.tpl.php</code></p>
<h4>Etape 2 - Utiliser des normes dans les noms de vos répertoires et de vos fichiers au sein de votre futur thème</h4>
<p>	<b>Le répertoire d&#8217;images</b><br />
	Dans notre exemple, le répertoire d&#8217;image se nomme <code>grafics</code>, changez-le pour <code>images</code> ou <code>img</code>. Le nom de ce répertoire n&#8217;a pas d&#8217;impact sur le fonctionnement de Drupal mais c&#8217;est une bonne pratique de nomenclature pour chacun vos thèmes. On gagne toujours du temps et on se rapproche de l&#8217;adage, <code>Convention over Configuration</code></p>
<p>	<b>La feuille de style (CSS)</b></p>
<p>	La feuille de style est toujours nommé <code>style.css</code>, comme dans Wordpress d&#8217;ailleurs.</p>
<h4>Etape 3 - Placer votre nouveau thème dans le répertoire Drupal qui convient</h4>
<p>	Le répertoire qui dans notre exemple se nomme <code>singapore</code> devra se placer dans le répertoire adéquat de Drupal. Ce répertoire se nomme <code>themes</code>, si c&#8217;est la première fois que vous utilisez un thème vous allez devoir le créer à cette endroit <code>/Applications/MAMP/htdocs/[le_repertoire_dans_lequel_drupal_6_est_installe]/sites/all/</code>..<br />
	<b>C&#8217;est dans ce répertoire que l&#8217;on stocke les thèmes personnalisés pour Drupal</b></p>
<p>	<b>Le README.txt</b></p>
<blockquote><p>
	// $Id: README.txt,v 1.3 2006/12/23 15:35:51 dries Exp $</p>
<p>	This directory should be used to place downloaded and custom modules<br />
	and themes which are common to all sites. This will allow you to<br />
	more easily update Drupal core files. These modules and themes should<br />
	be placed in subdirectories called modules and themes as follows:</p>
<p>	  sites/all/modules<br />
	  sites/all/themes
	</p></blockquote>
<h4>Etape 4 - Créer un fichier <code>.info</code> pour votre thème</h4>
<p>	C&#8217;est une nécessité pour faire fonctionner un thème sous Drupal 6.</p>
<p>	<b>A titre d&#8217;exemple, la source du fichier <code>garland.info</code></b></p>

<div class="wp_syntax"><div class="code"><pre class="txt" style="font-family:monospace;">&nbsp;
	; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $
	name = Garland
	description = Tableless, recolorable, multi-column, fluid width theme (default).
	version = VERSION
	core = 6.x
	engine = phptemplate
	stylesheets[all][] = style.css
	stylesheets[print][] = print.css
&nbsp;
	; Information added by drupal.org packaging script on 2009-05-13
	version = &quot;6.12&quot;
	project = &quot;drupal&quot;
	datestamp = &quot;1242243950&quot;</pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="txt" style="font-family:monospace;">		; $Id: singapore.info,v 1.0 2010/02/14 16:14:05 $
		name = singapore
		screenshot = screenshot.png
		description = Quick and dirty conversion of an HTML page.
		version = VERSION
		core = 6.x
		engine = phptemplate
&nbsp;
&nbsp;
		regions[left] = Left sidebar
		regions[right] = Right sidebar
		regions[content] = Content
		regions[header] = Header
		regions[footer] = Footer
&nbsp;
&nbsp;
&nbsp;
		stylesheets[all][] = style.css
		stylesheets[print][] = print.css
&nbsp;
		; Information added by hecube.net for an article about quick creation for theme in drupal 6, made the 2010-02-14
		version = &quot;6.15&quot;
		project = &quot;drupal&quot;
		datestamp = &quot;1266160263&quot;</pre></div></div>

<p>Pour information, la valeur <code>datestamp</code> est le nombre de secondes qui sépare la date de création du fichier et le 1 Janvier 1970. Vous obtiendrez en php, la valeur en faisant un <code>print</code> de la valeur <code>time();</code></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
	<span style="color: #000088;">$datestamp</span> <span style="color: #339933;">=</span> <span style="color: #990000;">time</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'$datestamp =&gt; '</span><span style="color: #339933;">.</span><span style="color: #000088;">$datestamp</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h4>Injecter quelques valeurs de Drupal dans votre tout nouveau template</h4>
<p>	On place ici en vrac quelques valeurs qui vont être appelées au sein de votre thème pour :</p>
<ul>
<li>parfaire un peu son caractère dynamique</li>
<li>quitter définitivement le coté statique de notre thème HTML</li>
</ul>
<p>Un conseil, conserver Garland comme thème pour votre administration, car vous risquez avec l&#8217;activation d&#8217;un thème aussi sommaire de ne pouvoir accéder ensuite à votre administration <code>http://[le_chemin_vers_l_admin-de_votre drupal]/?q=admin</code>. Sous MAMP et dans notre exemple, l&#8217;admininbstration est accessible à cette adresse <code>http://127.0.0.1/DRUPAL_6/site/?q=admin</code>.</p>
<p><b>Activation du thème <code>singapore</code></b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_4.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></p>
<p><b>On maintient <code>Garland</code> en même temps que le thème <code>singapore</code></b><br />
	<img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_3.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></p>
<p>		<b>On maintient <code>Garland</code>, il est possible aussi de conserver ce thème lorsque on édite les articles en cliquant sur le checkbox <code>Use administration theme for content editing</code>.</b><br />
		<img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_5.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></p>
<p><b>Le thème <code>singapore</code> sous Drupal 6.x</b><br />
	<img class="aligncenter" src="http://social.hecube.net/files/2010/02/theme_drupal_5_min_2.jpg" alt="Drupal, Theme - Créer un thème Drupal 6 à partir d'une page html" width="500" height="265" /></p>
<p>	<b>Un rappel de quelques valeurs essentiels à passer dans la fichier de votre thème Drupal 6.x</b></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
		<span style="color: #000000; font-weight: bold;">&lt;?php</span>
&nbsp;
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$tabs</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$title</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$content</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$right</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$footer</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$footer_message</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		 <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>	<b>Notre fichier <code>page.tpl.php</code> aux couleurs de <code>singapore</code></b></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
		<span style="color: #000000; font-weight: bold;">&lt;?php</span>
		<span style="color: #666666; font-style: italic;">// $Id: page.tpl.php,v 1.18.2.1 2009/04/30 00:13:31 goba Exp $</span>
		<span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
		  &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
		&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$language</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">language</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; lang=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$language</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">language</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; dir=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$language</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">dir</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
		  &lt;head&gt;
		    &lt;title&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$head_title</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/title&gt;
		    <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$head</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$styles</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		    <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$scripts</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		  &lt;/head&gt;
		&lt;body&gt;
		 &lt;div id=&quot;overall&quot;&gt;
&nbsp;
		  &lt;!-- start head grafic --&gt;
		  &lt;div id=&quot;head&quot;&gt;
		    &lt;!-- start top navigation --&gt;
		    &lt;div id=&quot;topnav&quot;&gt;
		      	<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #990000;">isset</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$primary_links</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		          <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> theme<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'links'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$primary_links</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'class'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'links primary-links'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		        <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		    &lt;/div&gt;
		  &lt;/div&gt;
&nbsp;
		   &lt;!-- start any-links &amp; mid grafic--&gt;
		   &lt;div id=&quot;anyline&quot;&gt;
		    &lt;div id=&quot;anybgr&quot;&gt;&lt;/div&gt;
		     &lt;div id=&quot;anylink&quot;&gt;
			 <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">/* PAS UTILE POUR LE MOMENT */</span>  <span style="color: #000000; font-weight: bold;">?&gt;</span>
		      &lt;!-- &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt;
		            &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt;
		            &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt;
		            &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt;
		            &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt;
		            &lt;a href=&quot;#&quot; target=&quot;_top&quot; onfocus=&quot;this.blur()&quot;&gt;anylink&lt;/a&gt; --&gt;
		    &lt;/div&gt;
		   &lt;/div&gt;
&nbsp;
		  &lt;!-- bottom grafic &amp; homepage title --&gt;
		  &lt;div id=&quot;tgbtm&quot;&gt;&lt;/div&gt;
		    &lt;!-- insert homepage title here --&gt;
		    &lt;div id=&quot;title-shadow&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$site_slogan</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/div&gt;
		    &lt;div id=&quot;title&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span>
		<span style="color: #666666; font-style: italic;">/* POUR FAIRE UN LIEN SUR LA VALEUR $site_slogan EVENTUELLEMENT */</span>
		 <span style="color: #666666; font-style: italic;">// print ('&lt;a href=&quot;'. check_url($front_page) .'&quot; title=&quot;'. $site_slogan .'&quot;&gt;'.$site_slogan.'&lt;/a&gt;'); </span>
		 <span style="color: #990000;">print</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$site_slogan</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
		 <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/div&gt;
&nbsp;
&nbsp;
		  &lt;!-- start sidebar --&gt;
		  &lt;div id=&quot;sidebar&quot;&gt;
			<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$mission</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$search_box</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;div class=&quot;block block-theme&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$search_box</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/div&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		    <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$left</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
		  &lt;/div&gt;
&nbsp;
		  	&lt;div id=&quot;content&quot;&gt;
				<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">''</span><span style="color: #339933;">.</span><span style="color: #000088;">$content</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
			&lt;/div&gt;
&nbsp;
		 &lt;/div&gt;
&nbsp;
		 &lt;!-- footer lines --&gt;
		 &lt;div id=&quot;overall-footer&quot;&gt;
		   &lt;div id=&quot;footer&quot;&gt;
				&lt;b&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$footer_message</span><span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/b&gt;
				&lt;br&gt;&lt;br&gt;
				<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$footer</span><span style="color: #000000; font-weight: bold;">?&gt;</span>
				&lt;br&gt;&lt;br&gt;
				<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$feed_icons</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>		
			&lt;/div&gt;
		 &lt;/div&gt;
&nbsp;
		<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #990000;">print</span> <span style="color: #000088;">$closure</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
		&lt;/body&gt;
		&lt;/html&gt;</pre></div></div>

<p><b>Conclusion :  Sans être un développeur aguerri mais avec de bonnes notions d&#8217;<code>HTML</code>, de <code>CSS</code>, une compréhension basique du <code>PHP</code> et bien évidemment un solide sens pratique, on peut parvenir à un début de thème sous <code>Drupal 6.x</code>. Paradoxalement, cette relative simplicité dans la création de thème contraste avec la complexité de la gestion éditoriale. En effet, d&#8217;un point strictement éditorial, le temps d&#8217;apprentissage et de maitrise du <code>workflow</code> dans la publication de <code>Page</code> et de <code>Story</code> va bien plus fastidieux que sous Wordpress par exemple. A ce titre, à lire, un excellent et amusant retour d&#8217;expérience sur Drupal vs Wordpress dans l&#8217;article ci-dessous notamment la partie <code>Why I Would Stay Away from Drupal</code>.</b></p>
<p><b>Une partie intéressante de cette article</b></p>
<blockquote><p>
	[...] At this point, I realized that Drupal users consisted mainly of web developers and programmers who saw the beauty of Drupal from it’s code rather than it’s interface. It was much easier for them to extend the Drupal functions because the “CODE” was clean.</p>
<p>	But for someone who doesn’t know how to code, I found it difficult to work with. Don’t get me wrong. Drupal is a fantastic CMS. And if you find it meets your needs out of the box, then by all means use it. But if like me and many other online publishers, you need to tweak it a bit here and there, then you’re better off with something like Joomla unless you have an in house programmer that can do all the tweaking for you.	[...]</p>
</blockquote>
<p><i>Source : <a href="http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/" target="_blank" class="external">http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/</a></i></p>
<h2>En savoir plus</h2>
<ul>
<li>La page d&#8217;information du fichier <code>Page.tpl.php</code> issue de la documentation &#8220;PHPTemplate theme engine&#8221;<br />
		<a href="http://drupal.org/node/11812" target="_blank" class="external">http://drupal.org/node/11812</a></li>
<li>A lire pour le retour d&#8217;expérience Drupal vs Wordpres /Choosing a CMS to Run Your Membership Site<br />
		<a href="http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/" target="_blank" class="external">http://www.webbriefcase.net/2009-04/choosing-a-cms-to-run-your-membership-site/</a></li>
</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/16/drupal-theme-creer-un-theme-drupal-6-a-partir-dune-page-html/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Flex, Thème - Créer et compiler des thèmes sous Flex</title>
		<link>http://social.hecube.net/blog/2010/02/10/flex-theme-creer-et-compiler-des-themes-sous-flex/</link>
		<comments>http://social.hecube.net/blog/2010/02/10/flex-theme-creer-et-compiler-des-themes-sous-flex/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 05:48:50 +0000</pubDate>
		<dc:creator>bruno</dc:creator>
		
		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Divers]]></category>

		<category><![CDATA[Flash, Actionscript, Flex]]></category>

		<category><![CDATA[Flex]]></category>

		<category><![CDATA[Image, Graphisme, Photoshop]]></category>

		<category><![CDATA[Mac]]></category>

		<category><![CDATA[Technologie]]></category>

		<category><![CDATA[Tutoriaux]]></category>

		<category><![CDATA[Webdesign]]></category>

		<category><![CDATA[XHTML CSS]]></category>

		<category><![CDATA[Adobe]]></category>

		<category><![CDATA[Interface]]></category>

		<category><![CDATA[mxml]]></category>

		<category><![CDATA[Skin]]></category>

		<category><![CDATA[SWC]]></category>

		<category><![CDATA[theme]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1359</guid>
		<description><![CDATA[

On souhaite créer un fichier de thème pour une application faite sous Flex, c&#8217;est à dire un fichier .swc. On va faire les essais de compilation sous Flex 3 et sur un mac. Il vous faut donc Flex 3 et un accès au terminal. Pour se faire on va créer une application sommaire de sélection [...]]]></description>
			<content:encoded><![CDATA[<p><!-- Flex, Thème - Créer et compiler des thèmes sous Flex  --><br />
<!--  Flex, Adobe, Thème, SWC, mxml, Interface, Skin --></p>
<p><a title="Flex, Thème - Créer et compiler des thèmes sous Flex" class="bigpic" href="http://social.hecube.net/blog/2010/02/10/flex-theme-creer-et-compiler-des-themes-sous-flex/"><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_b.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></a>On souhaite créer un fichier de thème pour une application faite sous Flex, c&#8217;est à dire un fichier <code>.swc</code>. On va faire les essais de compilation sous Flex 3 et sur un mac. <span id="more-1359"></span>Il vous faut donc Flex 3 et un accès au terminal. Pour se faire on va créer une application sommaire de sélection parmi un <code>array composé par des présidents américains à laquelle on va rajouter un thème compilé <code>SmokeTheme.swc</code>.</p>
<h4>L&#8217;application : la Flex&#8217;O selection for US president</h4>
<p><b>Le code de <code>Compile_SWC_2.mxml</code> édité dans Flex</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_1.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Notre application avec l&#8217;habillage (skin) par défaut</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_2.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Le fichier source <code>Compile_SWC_2.mxml</code></b></p>

<div class="wp_syntax"><div class="code"><pre class="xml" style="font-family:monospace;">	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Application</span> <span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> <span style="color: #000066;">layout</span>=<span style="color: #ff0000;">&quot;vertical&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
			<span style="color: #339933;">&lt;![CDATA[</span>
<span style="color: #339933;">				[Bindable] private var dp:Array =</span>
<span style="color: #339933;">				[</span>
&nbsp;
<span style="color: #339933;">				/* US presidents */</span>
<span style="color: #339933;">	{label:&quot;George Washington&quot;, data:0},</span>
<span style="color: #339933;">	{label:&quot;John F. Kennedy&quot;, data:1},</span>
<span style="color: #339933;">	{label:&quot;Lyndon B. Johnson&quot;, data:2},</span>
<span style="color: #339933;">	{label:&quot;Richard M. Nixon&quot;, data:3},</span>
<span style="color: #339933;">	{label:&quot;Gerald R. Ford&quot;, data:4},</span>
<span style="color: #339933;">	{label:&quot;James E. \&quot;Jimmy\&quot; Carter&quot;, data:5},</span>
<span style="color: #339933;">	{label:&quot;Ronald W. Reagan&quot;, data:6},</span>
<span style="color: #339933;">	{label:&quot;William J. \&quot;Bill\&quot; Clinton&quot;, data:7},</span>
<span style="color: #339933;">	{label:&quot;George W. Bush&quot;, data:8},</span>
<span style="color: #339933;">	{label:&quot;Barack Obama&quot;, data:9}</span>
&nbsp;
<span style="color: #339933;">				];</span>
&nbsp;
<span style="color: #339933;">				private function ClickHandler ():void {</span>
<span style="color: #339933;">					messageField.text = &quot;Vous avez choisi =&gt; &quot; + nameCB.selectedLabel + &quot; &quot;;</span>
<span style="color: #339933;">				}</span>
<span style="color: #339933;">			]]&gt;</span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Panel</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">&quot;Faites un choix parmi ces présidents américains :&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;50%&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;50%&quot;</span> <span style="color: #000066;">paddingLeft</span>=<span style="color: #ff0000;">&quot;10&quot;</span> <span style="color: #000066;">paddingTop</span>=<span style="color: #ff0000;">&quot;10&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
			<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:VBox</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:HBox</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;100%&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
					<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Text</span> <span style="color: #000066;">text</span>=<span style="color: #ff0000;">&quot;Choisir :&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
					<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:ComboBox</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;nameCB&quot;</span> <span style="color: #000066;">dataProvider</span>=<span style="color: #ff0000;">&quot;{dp}&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
					<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Button</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;Selectionner&quot;</span> <span style="color: #000066;">click</span>=<span style="color: #ff0000;">&quot;ClickHandler();&quot;</span><span style="color: #000000; font-weight: bold;">/&gt;</span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:HBox<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Text</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;messageField&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
				<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:VBox<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
		<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Panel<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
	<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></div></div>

<h4>Compil à la &#8220;main&#8221;</h4>
<p>Jusqu&#8217;à présent rien d&#8217;extraordinaire, on vient de faire une application en Flex. On va maintenant chercher à corser le tout en cherchant à compiler manuellement un thème pour en faire un fichier <code>.swc</code> et l&#8217;adjoindre à notre application.<br />
Dans un tout premier temps, il va falloir localiser le répertoire, qui contient l&#8217;utilitaire nécessaire à la compilation.</p>
<p>Premier problème, accéder à l&#8217;utilitaire de compilation de Flex. Il faut chercher le chemin vers le répertoire <code>bin</code> dans Flex et lancer la commande qui va bien pour accéder à l&#8217;utilitaire.<br />
Sous mac, l&#8217;utilitaire est dans <code>/Applications/Adobe Flex Builder 3/sdks/3.2.0/bin/</code>. Dans le terminal cette commande vous emmène direct dans le répertoire et lance le terminal comme il faut <code>bin</code> du Flex SDK <code>cd /Applications/Adobe\ Flex\ Builder\ 3/sdks/3.2.0/bin/fcsh</code></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_3.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>L&#8217;aide contextuelle au compiler de Flex</b></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #7a0874; font-weight: bold;">&#40;</span>fcsh<span style="color: #7a0874; font-weight: bold;">&#41;</span> <span style="color: #660033;">-help</span> 
List of fcsh commands:
mxmlc arg1 arg2 ...      full compilation and optimization; <span style="color: #7a0874; font-weight: bold;">return</span> a target <span style="color: #c20cb9; font-weight: bold;">id</span>
compc arg1 arg2 ...      full SWC compilation
compile <span style="color: #c20cb9; font-weight: bold;">id</span>               incremental compilation
<span style="color: #c20cb9; font-weight: bold;">clear</span> <span style="color: #7a0874; font-weight: bold;">&#91;</span><span style="color: #c20cb9; font-weight: bold;">id</span><span style="color: #7a0874; font-weight: bold;">&#93;</span>               <span style="color: #c20cb9; font-weight: bold;">clear</span> target<span style="color: #7a0874; font-weight: bold;">&#40;</span>s<span style="color: #7a0874; font-weight: bold;">&#41;</span>
info <span style="color: #7a0874; font-weight: bold;">&#91;</span><span style="color: #c20cb9; font-weight: bold;">id</span><span style="color: #7a0874; font-weight: bold;">&#93;</span>                display compile target info
quit                     quit</pre></div></div>

<p>Il s&#8217;agit de la commande pour compiler une feuille e style en fichier thème <code>.swc</code></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">compc <span style="color: #660033;">-include-file</span> my_style_dashboard.css <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_css<span style="color: #000000; font-weight: bold;">/</span>my_style_dashboard.css <span style="color: #660033;">-o</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_swc<span style="color: #000000; font-weight: bold;">/</span>my_style_dashboard.swc</pre></div></div>

<p>Vous pouvez aussi utiliser via une ligne de commande le compiler <code>mxmlc</code> pour convertir vos fichiers <code>.mxml</code> en fichiers <code>.swc</code></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">mxmlc <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_mxml<span style="color: #000000; font-weight: bold;">/</span>MonApplication.mxml <span style="color: #660033;">-o</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_mxml<span style="color: #000000; font-weight: bold;">/</span>MonApplication.swc</pre></div></div>

<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_5.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Une erreur possible pour la compilation d&#8217;un mxml</b></p>
<p>Il vous faut évidemment donner le chemin (<code>path</code>) de là où se trouve les fichiers du thème.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">mxmlc MonApplication_1.mxml <span style="color: #660033;">-o</span> MonApplication_1.swc</pre></div></div>

<p><em>Le message d&#8217;erreur qui va s&#8217;afficher dans la mesure où le fichier <code>MonApplication_1.mxml</code> est introuvable.</em><code><br />
Loading configuration file /Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/Flex-config.xml<br />
Error: unable to open 'MonApplication_1.mxml'<br />
</code></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_4.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>La ligne de commande pour une bonne compilation d&#8217;un mxml</b></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">mxmlc <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_mxml<span style="color: #000000; font-weight: bold;">/</span>MonApplication_1.mxml <span style="color: #660033;">-o</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_la_mxml<span style="color: #000000; font-weight: bold;">/</span>MonApplication_1.swc</pre></div></div>

<p><b>Une fois que vous maitrisez les principales lignes de commande pour utiliser le compilateur, on peut se livrer à l&#8217;objet véritable de l&#8217;article &#8220;Créer un fichier de thème en <code>.swc</code>&#8220;</b></p>
<h4>Compiler un thème compilé ou Créer un fichier <code>.swc</code></h4>
<p>On va voir véritablement comment on peut à partir d&#8217;un thème complet et produire un fichier <code>.swc</code>. Pour cela, on va se servir des thèmes livrés avec l&#8217;installation par défaut de Flex. L&#8217;ensemble visible sur un mac dans le répertoire suivant : <code>/Applications/Adobe Flex Builder 3/sdks/3.2.0/frameworks/</code></p>
<p><b>On va se servir du thème <code>Smoke</code> comme base de départ pour créer note <code>.swc</code>. Ce thème se compose d&#8217;un répertoire <code>Smoke</code> contenant 2 fichiers : <code>Smoke.css</code> et <code>moke_bg.jpg</code>. Les deux fichiers compilés vont former le fichier de thème Flex nommé <code>SmokeTheme.swc</code></b></p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;">compc <span style="color: #660033;">-include-file</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_le_swc<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>Smoke.css <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_le_swc<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>Smoke.css <span style="color: #660033;">-include-file</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_le_swc<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>smoke_bg.jpg <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_le_swc<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>Smoke<span style="color: #000000; font-weight: bold;">/</span>smoke_bg.jpg <span style="color: #660033;">-o</span> <span style="color: #000000; font-weight: bold;">/</span>Users<span style="color: #000000; font-weight: bold;">/</span>nom-d-utilisateur<span style="color: #000000; font-weight: bold;">/</span>le_chemin_vers_le_swc<span style="color: #000000; font-weight: bold;">/</span>SmokeTheme.swc</pre></div></div>

<h4>Associer un <code>.swc</code> à une application Flex</h4>
<p>Il vous faut créer le fichier <code>swc</code> selon la procédure décrite ci-dessus. Ensuite, vous devez ajouter le fichier <code>.swc</code> à votre application, puis entrer la ligne de commande pour joindre le thème à la publication de votre application. Il ne vous reste qu&#8217;à publier votre application en lançant le compiler via la procédure normale</p>
<p><b>Ajouter le fichier <code>SmokeTheme.swc</code> à l&#8217;application</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_6.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_7.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_8.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Modifier les informations du Flex compiler avec l&#8217;inclusion du thème <code>SmokeTheme.swc</code> à l&#8217;application</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_9.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Joindre le thème à l&#8217;application se fait à l&#8217;aide de cette commande, <code>-locale en_US -theme /Users/nom-d-utilisateur/le_chemin_vers_le_swc/SmokeTheme.swc</code><br />
</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_10.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>L&#8217;application publiée avec le thème compilé <code>SmokeTheme.swc</code><br />
</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/flex_build_a_swc_11.jpg" alt="Flex, Thème - Créer et compiler des thèmes sous Flex" width="500" height="265" /></p>
<p><b>Conclusion : Si vous connaissez un tant soit peu l&#8217;intégration notamment la rédaction des CSS, vous pouvez produire des &#8220;skins&#8221; pour des applications au même titre que des thèmes Drupal ou Wordpress.</b></p>
<h2>En savoir plus</h2>
<ul>
<li>Utiliser le compiler <code>compc</code> pour compiler des fichiers <code>.swc</code> / Using compc, the component compiler<br />
	<a href="http://livedocs.adobe.com/Flex/3/html/help.html?content=compilers_22.html#250507" target="_blank" class="external">http://livedocs.adobe.com/Flex/3/html/help.html?content=compilers_22.html#250507</a></li>
<li>Créer et étendre des composants de Flex 3 / Creating and Extending Flex 3 Components<br />
	<a href="http://livedocs.adobe.com/Flex/3/html/help.html?content=Part4_CreateComps_1.html" target="_blank" class="external">http://livedocs.adobe.com/Flex/3/html/help.html?content=Part4_CreateComps_1.html</a></li>
<li>Une introduction à la création de composants Flex dont les fichiers <code>.swc</code> / Flex Quick Start: Building custom components<br />
	<a href="https://www.adobe.com/devnet/Flex/quickstart/deploying_components/" target="_blank" class="external">https://www.adobe.com/devnet/Flex/quickstart/deploying_components/</a></li>
<li>Un article sur le design des skins sous Flex 3 / Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3<br />
	<a href="http://groups.adobe.com/resources/d17e72cf15/summary" target="_blank" class="external">http://www.adobe.com/devnet/Flex/articles/skins_styles_04.html</a></li>
<li>La librairie de Skin pour Flex du site Adobe.com<br />
	<a href="http://groups.adobe.com/resources/d17e72cf15/summary" target="_blank" class="external">http://groups.adobe.com/resources/d17e72cf15/summary</a></li>
<li>Un script en Ruby pour compiler un fichier FXP en SWC / Compiling FXP-&gt;SWC, a Catalyst workflow<br />
	<a href="http://www.rogue-development.com/blog2/2009/06/compiling-fxp-swc-a-catalyst-workflow/" target="_blank" class="external">	http://www.rogue-development.com/blog2/2009/06/compiling-fxp-swc-a-catalyst-workflow/</a></li>
<li>Une méthode de compilation de fichier AS à l&#8217;aide de Flex SDK / Compile AS files with Flex SDK<br />
	<a href="http://ubacoda.com/?p=13" target="_blank" class="external">http://ubacoda.com/?p=13</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/10/flex-theme-creer-et-compiler-des-themes-sous-flex/feed/</wfw:commentRss>
		</item>
		<item>
		<title>WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress</title>
		<link>http://social.hecube.net/blog/2010/02/05/wordpress-champs-personnalises-personnaliser-utiliser-les-champs-personnalises-dans-wordpress/</link>
		<comments>http://social.hecube.net/blog/2010/02/05/wordpress-champs-personnalises-personnaliser-utiliser-les-champs-personnalises-dans-wordpress/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 22:33:41 +0000</pubDate>
		<dc:creator>bruno</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Divers]]></category>

		<category><![CDATA[Meilleurs blogs]]></category>

		<category><![CDATA[PHP, MYSQL]]></category>

		<category><![CDATA[Technologie]]></category>

		<category><![CDATA[Tutoriaux]]></category>

		<category><![CDATA[Wordpress]]></category>

		<category><![CDATA[XHTML CSS]]></category>

		<category><![CDATA[champs personnalisés]]></category>

		<category><![CDATA[Custom fields]]></category>

		<category><![CDATA[MySQL]]></category>

		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1337</guid>
		<description><![CDATA[


Les champs personnalisés autrement dit les Custom Fields sont tout ce qui vous restent lorsque vous ne pouvez assigner votre contenu aux formes classiques proposés par WordPress à savoir Article, Page, Lien. Dès lors que vous utilisez les champs personnalisés, vous mettez sans la savoir le doigt dans l&#8217;engrenage de la personnalisation de la gestion [...]]]></description>
			<content:encoded><![CDATA[<p>
<!-- WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress  --><br />
<!--  Wordpress, Custom fields, champs personnalisés, PHP, MySQL, CMS --></p>
<p><a title="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" class="bigpic" href="http://social.hecube.net/blog/2010/02/05/wordpress-champs-personnalises-personnaliser-utiliser-les-champs-personnalises-dans-wordpress/"><img class="aligncenter" src="http://social.hecube.net/files/2010/02/wp_using_custom_fields_b.jpg" alt="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" width="500" height="265" /></a>Les champs personnalisés autrement dit les <code>Custom Fields</code> sont tout ce qui vous restent lorsque vous ne pouvez assigner votre contenu aux formes classiques proposés par WordPress à savoir <code>Article, Page, Lien</code>. <span id="more-1337"></span>Dès lors que vous utilisez les champs personnalisés, vous mettez sans la savoir le doigt dans l&#8217;engrenage de la personnalisation de la gestion de contenu et de son affichage de votre contenu. Engrenage dont vous sortirez probablement vivant mais mais au prix exorbitant de la création tous azimuts de <code>Custom Fields</code> qui rend la gestion de votre contenu désormais plus complexe.</p>
<p><b>En matière de gestion de contenu, on peut se mettre à penser que <code>Drupal</code> bien que à notre avis plus difficile à prendre en main permet d&#8217;ingérer plus facilement du contenu de forme diverse. En effet, Drupal se révèle plus souple quant à sa capacité à accueillir et à restituer du contenu hétérogène mais il est définitivement plus technique et complexe que WordPress dans la gestion de contenu. La courbe d&#8217;apprentissage de WP infiniment moins longue que celle de Drupal.</b></p>
<ul>
<li><b>Nom =&gt; le champs personnalisé</b></li>
<li>Pays =&gt; country</li>
<li>Ville =&gt; city</li>
</ul>
<p><b>La commande qui appelle le champs personnalisé</b></p>
<h4>Les fonctions pour les champs personnalisés</h4>
<p>Les explications concernant toutes les autres fonctions susceptibles d&#8217;appeler les champs personnalisés. Elles sont disponibles sur le codex de WordPress</p>
<p>Cette fonction retourne toutes les combinaisons clé/valeur pour un article (post) <code>get_post_custom();</code>. Dans notre exemple, le champs personnalisé que l&#8217;on retourne est <code>country</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">		<span style="color: #000088;">$custom_fields</span> <span style="color: #339933;">=</span> get_post_custom<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  <span style="color: #000088;">$my_custom_field</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$custom_fields</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'country'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
		  <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$my_custom_field</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$value</span> <span style="color: #009900;">&#41;</span>
		    <span style="color: #990000;">echo</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot; =&gt; &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;br /&gt;&quot;</span><span style="color: #339933;">;</span></pre></div></div>

<p>	Le rendu HTML du code pour un article doté d&#8217;un champ personnalisé <code>country</code></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">		0 =&gt; Allemagne</pre></div></div>

<p>	<i>Source : <a href="http://codex.wordpress.org/Function_Reference/get_post_custom" target="_blank" class="external">http://codex.wordpress.org/Function_Reference/get_post_custom</a></i></p>
<p>La fonction récupère toute la liste des clés de l&#8217;article (post)<code>	get_post_custom_keys();</code>. </p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
		<span style="color: #000088;">$custom_field_keys</span> <span style="color: #339933;">=</span> get_post_custom_keys<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$custom_field_keys</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">=&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #000088;">$value</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		    <span style="color: #000088;">$valuet</span> <span style="color: #339933;">=</span> <span style="color: #990000;">trim</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		      <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'_'</span> <span style="color: #339933;">==</span> <span style="color: #000088;">$valuet</span><span style="color: #009900;">&#123;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span>
		      <span style="color: #b1b100;">continue</span><span style="color: #339933;">;</span>
		    <span style="color: #990000;">echo</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot; =&amp;gt; &quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$value</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;br /&gt;&quot;</span><span style="color: #339933;">;</span>
		  <span style="color: #009900;">&#125;</span></pre></div></div>

<p>	Le rendu HTML du code pour un article doté de 2 champs personnalisés <code>country, city</code></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">		2 =&gt; country
		3 =&gt; city</pre></div></div>

<p>	<i>Source : <a href="http://codex.wordpress.org/Function_Reference/get_post_custom_values" target="_blank" class="external">http://codex.wordpress.org/Function_Reference/get_post_custom_values</a></i></p>
<p>La fonction retourne le couple clé/valeur spécifique pour l&#8217;article affiché. Dans notre exemple, attaché à cet article, nous affichons champs personnalisé <code>country</code></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">		<span style="color: #000088;">$mykey_values</span> <span style="color: #339933;">=</span> get_post_custom_values<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'country'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		  <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span> <span style="color: #000088;">$mykey_values</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$value</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		    <span style="color: #990000;">echo</span> <span style="color: #0000ff;">&quot;<span style="color: #006699; font-weight: bold;">$key</span>  =&gt; <span style="color: #006699; font-weight: bold;">$value</span> ('country')&lt;br /&gt;&quot;</span><span style="color: #339933;">;</span> 
		  <span style="color: #009900;">&#125;</span></pre></div></div>

<p>Le rendu HTML du code pour un article doté d&#8217;un champs personnalisé <code>country</code></p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">	0 =&gt; Espagne ('country')</pre></div></div>

<p>	<i>Source : <a href="http://codex.wordpress.org/Function_Reference/get_post_custom_values" target="_blank" class="external">http://codex.wordpress.org/Function_Reference/get_post_custom_values</a></i></p>
<p>La fonction requiert l&#8217;id de l&#8217;article (post), la clé et si la dernière valeur est fixé à <code>true</code>, cela permettra d&#8217;imprimer la valeur.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>ID<span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
			<span style="color: #990000;">echo</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;br&gt;&lt;b&gt;Pays :&lt;/b&gt;&lt;br&gt; '</span><span style="color: #339933;">.</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&amp;</span>gt<span style="color: #339933;">;</span>ID<span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span></pre></div></div>

<p>Source : <a href="http://codex.wordpress.org/Function_Reference/get_post_custom" class="external">http://codex.wordpress.org/Function_Reference/get_post_custom</a></p>
<h4>Un exemple d&#8217;appel aux champs personnalisés</h4>
<p><b>Le code spécifique pour l&#8217;affichage des champs personnalisés.</b></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
&nbsp;
  	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
		<span style="color: #990000;">echo</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;br&gt;&lt;b&gt;Pays :&lt;/b&gt;&lt;br&gt; '</span><span style="color: #339933;">.</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'city'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
	<span style="color: #990000;">echo</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;br&gt;&lt;b&gt;Ville :&lt;/b&gt;&lt;br&gt; '</span><span style="color: #339933;">.</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'city'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/wp_using_custom_fields_1.jpg" alt="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" width="500" height="265" /></p>
<p><b>Le code complet de la boucle pour afficher le contenu de la page <code>archive.php</code></b></p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span>have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;div <span style="color: #000000; font-weight: bold;">&lt;?php</span> post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&gt;
		&lt;h3 id=&quot;post-<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h3&gt;
		&lt;small&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_time<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'l, F jS, Y'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/small&gt;
&nbsp;
		&lt;div class=&quot;entry&quot;&gt;
			<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #666666; font-style: italic;">/* the_content() */</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		&lt;/div&gt;
&nbsp;
		<span style="color: #000000; font-weight: bold;">&lt;?php</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
			<span style="color: #990000;">echo</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;br&gt;&lt;b&gt;Pays :&lt;/b&gt;&lt;br&gt; '</span><span style="color: #339933;">.</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'country'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'city'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span>
		<span style="color: #990000;">echo</span> <span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'&lt;br&gt;&lt;b&gt;Ville :&lt;/b&gt;&lt;br&gt; '</span><span style="color: #339933;">.</span>get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'city'</span><span style="color: #339933;">,</span><span style="color: #000000; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #0000ff;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
		&lt;p class=&quot;postmetadata&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_tags<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Tags: '</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">', '</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&lt;br /&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> Posted in <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_category<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">', '</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span> | <span style="color: #000000; font-weight: bold;">&lt;?php</span> edit_post_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Edit'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">' | '</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>  <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_popup_link<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'No Comments &amp;#187;'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'1 Comment &amp;#187;'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'% Comments &amp;#187;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/p&gt;
&nbsp;
&nbsp;
&nbsp;
	&lt;/div&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p><img class="aligncenter" src="http://social.hecube.net/files/2010/02/wp_using_custom_fields_2.jpg" alt="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" width="500" height="265" /></p>
<p><b>Conclusion :</b> L&#8217;utilisation de <b>champs personnalisés (<code>custom fields</code></b>) peut se révéler très utile sous WP. De très nombreux thèmes résolvent notamment les difficultés à gérer un contenu hétérogène sous Wordpress à l&#8217;aide des <b>champs personnalisés (<code>custom fields</code></b>) et notamment l&#8217;affichage d&#8217;images dans ce que l&#8217;on a coutume de nommer un &#8220;slideshow&#8221;. Un conseil comme pour toute bonne chose, il faut savoir en utiliser les <code>custom fields</code> avec modération. Dès lors que leur nombre devient très important, il faut envisager une véritable extension fonctionnelle (plugin) afin d&#8217;apurer toutes ces <code>custom fields</code> qui sont autant de rustines sur votre WP mais dont vous êtes le seul à connaitre la fonction.</p>
<p><b>Un &#8220;slideshow&#8221; sur le blog de 3WDOC.COM</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/wp_using_custom_fields_3.jpg" alt="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" width="500" height="265" /></p>
<p><b>Les champs personnalisés qui pilotent le &#8220;slideshow&#8221;</b><br />
<img class="aligncenter" src="http://social.hecube.net/files/2010/02/wp_using_custom_fields_4.jpg" alt="WordPress, Champs personnalisés, Personnaliser - Utiliser les champs personnalisés dans WordPress" width="500" height="265" /></p>
<h2>En savoir plus</h2>
<ul>
<li>Utiliser les champs personnalisés  (Using Custom Fields)<br />
	<a href="http://codex.wordpress.org/Using_Custom_Fields" target="_blank" class="external">http://codex.wordpress.org/Using_Custom_Fields</a></li>
<li>Ne dites pas de WordPress que c&#8217;est un CMS, tout le monde pense que c&#8217;est un outil de blog / WordPress as CMS: How to use custom fields in your theme<br />
	<a href="http://outthinkgroup.com/2009/01/15/wordpress-as-cms-how-to-use-custom-fields-in-your-theme/" target="_blank" class="external">http://outthinkgroup.com/2009/01/15/wordpress-as-cms-how-to-use-custom-fields-in-your-theme/</a></li>
<li>Tutoriel: WordPress, les champs personnalisés<br />
	<a href="http://www.scriptol.fr/wordpress/wordpress-champ-personnalise.php" target="_blank" class="external">&#8220;http://www.scriptol.fr/wordpress/wordpress-champ-personnalise.php</a></li>
<li>Du bonne usage de champs personnalisés en particulier et du bonne usage de WordPress en particulier<br />
	<a href="http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/" target="_blank" class="external">http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/</a></li>
<li>Un article conseillé par le site de WordPress &#8220;himself&#8221; / Control your own WordPress custom fields<br />
	<a href="http://sltaylor.co.uk/blog/control-your-own-wordpress-custom-fields/" target="_blank" class="external">http://sltaylor.co.uk/blog/control-your-own-wordpress-custom-fields/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/05/wordpress-champs-personnalises-personnaliser-utiliser-les-champs-personnalises-dans-wordpress/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Wordpress,  Flash - Installation de plugins pour insérer du Flash sous WordPress</title>
		<link>http://social.hecube.net/blog/2010/02/01/wordpress-flash-installation-de-plugins-pour-lire-du-flash-sous-wordpress/</link>
		<comments>http://social.hecube.net/blog/2010/02/01/wordpress-flash-installation-de-plugins-pour-lire-du-flash-sous-wordpress/#comments</comments>
		<pubDate>Mon, 01 Feb 2010 13:47:31 +0000</pubDate>
		<dc:creator>lebleu</dc:creator>
		
		<category><![CDATA[CMS]]></category>

		<category><![CDATA[Création de site web]]></category>

		<category><![CDATA[Divers]]></category>

		<category><![CDATA[Flash, Actionscript, Flex]]></category>

		<category><![CDATA[Image, Graphisme, Photoshop]]></category>

		<category><![CDATA[Javascript, Ajax]]></category>

		<category><![CDATA[Meilleurs blogs]]></category>

		<category><![CDATA[Technologie]]></category>

		<category><![CDATA[Tutoriaux]]></category>

		<category><![CDATA[Wordpress]]></category>

		<category><![CDATA[Flash]]></category>

		<category><![CDATA[Module]]></category>

		<category><![CDATA[plugin]]></category>

		<category><![CDATA[site]]></category>

		<guid isPermaLink="false">http://social.hecube.net/?p=1303</guid>
		<description><![CDATA[

 

Pourquoi se contenter d&#8217;images figées pour son site? La polyvalence de WordPress permet d&#8217;intégrer des vidéos Flash qui donneront plus de vie à votre contenu. Par leur simplicité, le choix des plugins Kimili Flash Embed et SWFObj paraît judicieux pour parvenir à nos fins.
Des opinions partagées
Vous connaissez peut être les 2 plugins évoqués dans [...]]]></description>
			<content:encoded><![CDATA[<p><!-- Wordpress,  Flash - Installation de plugins pour insérer du Flash sous WordPress--><br />
<!--  Wordpress, Flash, Module, Plugin, Site  --></p>
<p><a title="Wordpress, Flash - Installation de plugins pour lire du Flash sous WordPress" class="bigpic" href="http://social.hecube.net/blog/2010/02/01/wordpress-flash-installation-de-plugins-pour-lire-du-flash-sous-wordpress/"><img class="aligncenter" src="http://social.hecube.net/files/2010/02/insert_flash.jpg" alt="Wordpress, Flash - Installation de plugins pour lire du Flash sous WordPress" width="500" height="265" /></a> </p>
<p>
<b>Pourquoi se contenter d&#8217;images figées pour son site? La polyvalence de WordPress permet d&#8217;intégrer des vidéos Flash qui donneront plus de vie à votre contenu. Par leur simplicité, le choix des plugins Kimili Flash Embed et SWFObj paraît judicieux pour parvenir à nos fins.</b><span id="more-1303"></span></p>
<h4>Des opinions partagées</h4>
<p>Vous connaissez peut être les 2 plugins évoqués dans cet article et vous vous êtes alors déjà forgé une opinion sur chacun d&#8217;eux. Certains relatent un dysfonctionnement de ces applications tandis que d&#8217;autres y adhèrent complètement. Si votre jugement est négatif, je vous propose de le réviser, compte tenu de la facilité de prise en main de ces outils. </p>
<h4>Le plugin Kimili Flash Embed</h4>
<p>En fonction de la version de WordPress que vous utilisez, veillez à télécharger celle qui correspond à vos besoins. Vous trouverez votre bonheur sur le lien suivant: <a href="http://kimili.com/plugins/kml_flashembed/wp" target="_blank" class="external">http://kimili.com/plugins/kml_flashembed/wp</a></p>
<p>Une minuscule étape de programmation est nécessaire pour faire fonctionner l&#8217;ensemble.</p>
<p><b>En effet, pour l&#8217;article choisi, il s&#8217;agit juste de taper le code ci-après:</b></p>
<p> <code><code>[<code>kml_flashembed movie="chemin de votre video.swf" width="Largeur de la vidéo" height="Hauteur de la vidéo"<code>/] </p>
<p>(N.B: les attributs tels que height et width sont optionnels et seulement mentionnés à titre d&#8217;exemple).</p>
<p><b>Résultat: le plugin fonctionne parfaitement.</b></p>
<h4>Le plugin SWFObj</h4>
<p>D&#8217;abord un lien pour télécharger cette application:  <a href="http://wordpress.org/extend/plugins/swfobj/" target="_blank" class="external">http://wordpress.org/extend/plugins/swfobj/</a></p>
<p><b>A l&#8217;instar du plugin précédent, peu de programmation est nécessaire. Il suffit d&#8217;intégrer le code suivant dans l&#8217;article concerné:</b> </p>
<p> <code><code>[<code>swfobj src="chemin de votre video.swf" width="Largeur de la vidéo" height="Hauteur de la vidéo"<code>] </p>
<p><b>Là encore, le plugin fonctionne sans problème.</b></p>
<p>Ainsi, en dépit des essais infructueux réalisés par certains &#8220;blogonautes&#8221;, force est de constater que les  2 applications répondent tout à fait au besoin d&#8217;intégrer des animations Flash. Si l&#8217;affichage n&#8217;est pas effectif, vérifiez simplement le chemin que vous avez défini pour votre animation. Par ailleurs, comme mon ami <a href="http://social.hecube.net/members/bruno/"> Bruno</a> pourrait le rappeler, Flash peut se montrer capricieux. N&#8217;ayez pas peur le cas échéant de mettre le lien absolu pour localiser votre vidéo. </p>
<p><b>En somme, la brièveté de cet article illustre bien la rapidité et la facilité, autrement dit la simplicité d&#8217;accès et d&#8217;utilisation de ces 2 outils. Et la simplicité, c&#8217;est bien ce que nous recherchons avant tout en utilisant WordPress, n&#8217;est-ce pas?</b></p>
<h2>En savoir plus</h2>
<ul>
<li>Plus d&#8217;infos sur kimili: <a href="http://kimili.com/plugins/kml_flashembed" class="external">http://kimili.com/plugins/kml_flashembed</a>
<li> Des news sur SWFObj: <a href="http://orangesplotch.com/blog/swfobj/" class="external">http://orangesplotch.com/blog/swfobj/</a>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://social.hecube.net/blog/2010/02/01/wordpress-flash-installation-de-plugins-pour-lire-du-flash-sous-wordpress/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
