<?xml
version="1.0" encoding="utf-8"?>
<rss version="2.0" 
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:atom="http://www.w3.org/2005/Atom"
>

<channel xml:lang="fr">
	<title>Geekographie Ma&#239;eulesque</title>
	<link>https://geekographie.maieul.net/</link>
	<description>Ce site est consacr&#233; &#224; quelques unes des mes geekeries. J'y donne des conseils, des r&#233;flexions, sur les logiciels et les langages que je connais ou que j'apprends.
J'y parle notamment de l'usage de LaTeX en sciences humaines et sociales, en particulier pour la gestion de la bibliographie.
Le contenu peut &#234;tre sous la forme d'articles d&#233;taill&#233;s ou de simples notes.
L'ensemble du contenu est, sauf pr&#233;cision contraire, sous licence Cr&#233;ative Commons Paternit&#233;-Partage des Conditions Initiales &#224; l'identique France.</description>
	<language>fr</language>
	<generator>SPIP - www.spip.net</generator>
	<atom:link href="http://geekographie.maieul.net/spip.php?id_rubrique=14&amp;page=backend" rel="self" type="application/rss+xml" />




<item xml:lang="fr">
		<title>Sept bonnes pratiques de d&#233;veloppement avec SPIP</title>
		<link>http://geekographie.maieul.net/77</link>
		<guid isPermaLink="true">http://geekographie.maieul.net/77</guid>
		<dc:date>2012-01-05T00:39:57Z</dc:date>
		<dc:format>text/html</dc:format>
		<dc:language>fr</dc:language>
		<dc:creator>Ma&#239;eul</dc:creator>



		<description>
&lt;p&gt;Je travaille en ce moment sur un squelette qui n'est pas de moi. Il semble que la personne qui l'a cr&#233;&#233; n'&#233;tait pas au courant des bonnes pratiques de d&#233;veloppement sous &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;. Il est vrai que ces bonnes pratiques ne sont pas n&#233;cessairement accessibles aux premiers abords de la documentation webmaster de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;. Voici sept r&#232;gles que je juge indispensables 1. Ne pas mettre de &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt; dans les squelettes Le but de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; &#233;tait de permettre de ne pas avoir &#224; conna&#238;tre le &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt; pour concevoir un&#160;(&#8230;)&lt;/p&gt;


-
&lt;a href="http://geekographie.maieul.net/Organisation-du-code-17" rel="directory"&gt;Organisation du code&lt;/a&gt;


		</description>


 <content:encoded>&lt;div class='rss_chapo'&gt;&lt;p&gt;Je travaille en ce moment sur un squelette qui n'est pas de moi. Il semble que la personne qui l'a cr&#233;&#233; n'&#233;tait pas au courant des bonnes pratiques de d&#233;veloppement sous &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;. Il est vrai que ces bonnes pratiques ne sont pas n&#233;cessairement accessibles aux premiers abords de la documentation webmaster de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;Voici sept r&#232;gles que je juge indispensables&lt;/p&gt;&lt;/div&gt;
		&lt;div class='rss_texte'&gt;&lt;h2 class=&#034;h2&#034;&gt;1. Ne pas mettre de &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt; dans les squelettes&lt;/h2&gt;
&lt;p&gt;Le but de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; &#233;tait de permettre de ne pas avoir &#224; conna&#238;tre le &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt; pour concevoir un site. Tout un syst&#232;me sp&#233;cifique a &#233;t&#233; pr&#233;vu, pour faire des requ&#234;tes &lt;span class=&#034;caps&#034;&gt;SQL&lt;/span&gt;, mais aussi des tests. C'est parfois perturbant pour les utilisateurs venant du monde &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;Mais pour autant, c'est une &lt;a href='http://geekographie.maieul.net/13' class=&#034;spip_in&#034;&gt;tr&#232;s bonne pratique de ne quasiment-jamais mettre de &lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt; dans un squelette&lt;/a&gt;. En r&#233;alit&#233;, c'est une mauvaise pratique d'en mettre.&lt;/p&gt;
&lt;h2 class=&#034;h2&#034;&gt;2. Ne rien mettre dans le dossier &lt;span class=&#034;caps&#034;&gt;IMG&lt;/span&gt;&lt;/h2&gt;
&lt;p&gt;Le dossier &lt;span class=&#034;caps&#034;&gt;IMG&lt;/span&gt; ne doit contenir que les images et documents ajout&#233;s par l'utilisateur depuis l'interface priv&#233;. En aucun cas il ne doit contenir des images propres aux squelettes, qui doivent se trouver dans le m&#234;me dossier que les squelettes.&lt;/p&gt;
&lt;p&gt;Choisir de mettre les images dans &lt;span class=&#034;caps&#034;&gt;IMG&lt;/span&gt; (comme je l'ai vu dans ce squelette), c'est compliquer les r&#233;utilisations des squelettes, et m&#233;langer les couches utilisateurs et webmestres de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;.&lt;/p&gt;
&lt;h2 class=&#034;h2&#034;&gt;3. Utiliser &lt;code&gt;#CHEMIN&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;La balise &lt;code&gt;#CHEMIN&lt;/code&gt; est une balise indispensable de &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;. Elle permet d'indiquer l'adresse d'un fichier sans se pr&#233;occuper du nom du dossier parent. En effet, &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; va cherche le fichier pass&#233; en argument dans l'ordre suivant&lt;span class=&#034;spip_note_ref&#034;&gt; [&lt;a href=&#034;#nb1&#034; class=&#034;spip_note&#034; rel=&#034;appendix&#034; title=&#034;Liste tir&#233;e du site Programmer avec SPIP.&#034; id=&#034;nh1&#034;&gt;1&lt;/a&gt;]&lt;/span&gt;&#160;:&lt;/p&gt;
&lt;ul class=&#034;spip&#034; role=&#034;list&#034;&gt;&lt;li&gt; squelettes&lt;/li&gt;&lt;li&gt; plugin B d&#233;pendant du plugin A&lt;/li&gt;&lt;li&gt; plugin A&lt;/li&gt;&lt;li&gt; squelettes-dist&lt;/li&gt;&lt;li&gt; prive&lt;/li&gt;&lt;li&gt; ecrire&lt;/li&gt;&lt;/ul&gt;
&lt;p&gt;Exemple&#160;: j'ai une image dans le dossier &lt;code&gt;squelettes&lt;/code&gt;, je ne fais pas&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='html'&gt;&lt;code&gt;&lt;img src='squelettes/toto.png' /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;mais bien&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;&lt;img src='#CHEMIN{toto.png}' /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;mieux, je met mon image &lt;code&gt;toto.png&lt;/code&gt; dans le dossier &lt;code&gt;img&lt;/code&gt; du dossier &lt;code&gt;squelettes&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;Je peux alors faire&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;&lt;img src='#CHEMIN{img/toto.png}' /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;L'avantage d'un tel syst&#232;me est &#233;vident&#160;: permettre d'avoir un dossier squelettes qui ne s'appelle pas squelettes, par exemple lorsqu'on utilise &lt;a href=&#034;#plugin&#034; class=&#034;spip_ancre&#034;&gt;ma sixi&#232;me recommandation&#160;: les squelettes sous forme de plugins&lt;/a&gt;. Mais aussi permettre &#224; &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; de g&#233;rer correctement les &lt;span class=&#034;caps&#034;&gt;URLS&lt;/span&gt; arborescentes (le cas &#233;ch&#233;ant).&lt;/p&gt;
&lt;h2 class=&#034;h2&#034;&gt;4. Utiliser &lt;code&gt;|balise_img&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;Il est recommand&#233; lorsqu'on ins&#232;re une balise &lt;code&gt;&lt;img&gt;&lt;/code&gt; de lui mettre des attributs &lt;code&gt;height&lt;/code&gt; et &lt;code&gt;with&lt;/code&gt; pour am&#233;liorer les performances du navigateur lors de l'affichage de la page.&lt;/p&gt;
&lt;p&gt;On peut bien s&#251;r indiquer cela manuellement&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;&lt;img src='#CHEMIN{toto.png}' width='largeur' height='hauteur' /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Mais supposons que je r&#233;duise la taille de &lt;code&gt;toto.png&lt;/code&gt;&#160;: je dois dans ce cas modifier les attributs &lt;code&gt;height&lt;/code&gt; et &lt;code&gt;width&lt;/code&gt; &#224; chaque fois que je l'utilise.&lt;/p&gt;
&lt;p&gt;Pour &#233;viter cela, &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; pr&#233;voit le filtre &lt;code&gt;|balise_img&lt;/code&gt; qui, lorsqu'il est appliqu&#233; au chemin d'un fichier image, cr&#233;e automatiquement la balise &lt;code&gt;&lt;img&gt;&lt;/code&gt;, avec la hauteur et la largeur du fichier. Ainsi, pas besoin de corriger si on r&#233;duit la taille du fichier.&lt;/p&gt;
&lt;p&gt;Le filtre s'utilise de mani&#232;re tr&#232;s simple&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;[(#CHEMIN{toto.png}|balise_img)]&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;On peut m&#234;me mettre en argument le contenu de l'attribut &lt;code&gt;alt&lt;/code&gt;&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;[(#CHEMIN{toto.png}|balise_img{0+0})]&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Voir en deuxi&#232;me argument la valeur de l'attribut &lt;code&gt;class&lt;/code&gt;&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;[(#CHEMIN{toto.png}|balise_img{0+0,blague_pour_enfants})]&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Ce code au final me produit&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='html'&gt;&lt;code&gt;&lt;img src='squelettes/toto.png' width='largeur_du_fichier_toto.png' height='hauteur_du_fichier_toto.png' alt='0+0' class='blague_pour_enfants' /&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 class=&#034;h2&#034;&gt;5. Utiliser les cha&#238;nes de langues&lt;/h2&gt;
&lt;p&gt;Bien que cela puisse para&#238;tre inutile et fastidieux pour un site monolingue, &lt;a href=&#034;http://programmer.spip.org/-Elements-linguistiques-&#034; class=&#034;spip_out&#034; rel=&#034;external&#034;&gt;utiliser les cha&#238;nes de langue&lt;/a&gt; est quand m&#234;me utile pour trois raisons&#160;:&lt;/p&gt;
&lt;ul class=&#034;spip&#034; role=&#034;list&#034;&gt;&lt;li&gt; on ne sait jamais&#160;: si le site devient multilingue, c'est toujours cela de fait.&lt;/li&gt;&lt;li&gt; il est plus facile d'uniformiser les textes.&lt;/li&gt;&lt;li&gt; il est plus facile de corriger en cas de faute ou de changement d'avis.&lt;/li&gt;&lt;/ul&gt;&lt;h2 class=&#034;h2&#034;&gt;6. Utiliser &lt;code&gt;&lt;INCLURE&gt;&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;C'est un principe de base de l'informatique&#160;: d&#232;s qu'une s&#233;quence d'instructions est utilis&#233;e plusieurs fois, il faut non pas la dupliquer, mais la mettre dans un morceau qu'on appelle plusieurs fois.&lt;/p&gt;
&lt;p&gt;En &lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt; ce morceau, c'est un &lt;a href=&#034;http://programmer.spip.org/Inclure-des-squelettes&#034; class=&#034;spip_out&#034; rel=&#034;external&#034;&gt;fichier inclus&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Typiquement supposons que j'affiche sur toutes les pages de mon site les sites amis.&lt;/p&gt;
&lt;p&gt;Au lieux de copier-coller le code suivant dans les squelettes&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;&lt;B&gt; &lt;ul&gt; &lt;BOUCLE_sites(SITES){par titre}&gt; &lt;li&gt;&lt;a href='#URL_SITE'&gt;#NOM&lt;/a&gt;&lt;/li&gt; &lt;/BOUCLE&gt; &lt;/ul&gt; &lt;/B&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Je le met dans un fichier &lt;code&gt;sites-amis.html&lt;/code&gt;, situ&#233; dans un dossier &lt;code&gt;inclure&lt;/code&gt; du dossier contenant les squelettes.&lt;/p&gt;
&lt;p&gt;Et je met le code suivant l&#224; o&#249; je souhaite afficher les sites amis&#160;:&lt;/p&gt;
&lt;div class='precode'&gt;&lt;pre dir='ltr' style='text-align: left;' class='spip'&gt;&lt;code&gt;&lt;INCLURE{fond=inclure/sites-amis}&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;p&gt;Cela me permet si je dois modifier les crit&#232;res de cette liste de ne les modifier qu'&#224; un endroit&lt;span class=&#034;spip_note_ref&#034;&gt; [&lt;a href=&#034;#nb2&#034; class=&#034;spip_note&#034; rel=&#034;appendix&#034; title=&#034;En outre, cela diminue les requ&#234;tes SQL et donc la charge du serveur SQL, (&#8230;)&#034; id=&#034;nh2&#034;&gt;2&lt;/a&gt;]&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;La logique est donc&#160;: diviser son site en briques r&#233;utilisables. Chaque brique correspondant &#224; fichier et &#224; un morceau logique de page. Ensuite assembler ces briques dans des fichiers plus globaux&lt;span class=&#034;spip_note_ref&#034;&gt; [&lt;a href=&#034;#nb3&#034; class=&#034;spip_note&#034; rel=&#034;appendix&#034; title=&#034;Pour comprendre comment passer des param&#232;tres lors de ces inclusions, pour (&#8230;)&#034; id=&#034;nh3&#034;&gt;3&lt;/a&gt;]&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a href=&#034;http://www.spip-contrib.net/Modele-de-squelette-reutilisable&#034; class=&#034;spip_out&#034; rel=&#034;external&#034;&gt;Le mod&#232;le de squelettes Z pousse &#224; l'extr&#234;me cette logique des inclusions&lt;/a&gt;. Je conseille de le suivre&#160;: on gagne largement en maintenance ce qu'on perd en temps d'apprentissage initial.&lt;/p&gt;
&lt;p&gt;Une r&#232;gle importante dans les inclusions&#160;: les balises html qui s'ouvrent dans un fichier doivent se fermer dans le m&#234;me fichier. Il est tr&#232;s mauvais d'ouvrir une balise dans un fichier puis de la fermer dans un autre&#160;: on y est perd en lisibilit&#233; du code, et donc en maintenance&lt;span class=&#034;spip_note_ref&#034;&gt; [&lt;a href=&#034;#nb4&#034; class=&#034;spip_note&#034; rel=&#034;appendix&#034; title=&#034;J'ai cr&#251; &#224; un moment qu'une structure html &#233;tait incorrecte du fait qu'un (&#8230;)&#034; id=&#034;nh4&#034;&gt;4&lt;/a&gt;]&lt;/span&gt;.&lt;/p&gt;
&lt;p&gt;&lt;a id=&#034;plugin&#034;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class=&#034;h2&#034;&gt;7. Mettre ses squelettes sous formes de plugins&lt;/h2&gt;
&lt;p&gt;Cela peut para&#238;tre un luxe ou coquetterie, mais cela facilite &#233;norm&#233;ment le d&#233;ploiement d'un m&#234;me squelette sur plusieurs sites ou le d&#233;m&#233;nagement depuis la version locale vers la version en ligne&#160;:&lt;/p&gt;
&lt;ul class=&#034;spip&#034; role=&#034;list&#034;&gt;&lt;li&gt; en indiquant les d&#233;pendances aux plugins.&lt;/li&gt;&lt;li&gt; en incluant le fichier &lt;code&gt;mes_options.php&lt;/code&gt; dans le m&#234;me dossier.&lt;/li&gt;&lt;li&gt; en permettant m&#234;me le cas &#233;ch&#233;ant d'ajouter automatiquement un contenu pr&#233;-d&#233;fini.&lt;/li&gt;&lt;/ul&gt;
&lt;p&gt;Un pr&#233;c&#233;dent article d&#233;taille &lt;a href='http://geekographie.maieul.net/3' class=&#034;spip_in&#034;&gt;comment fabriquer ces squelettes-plugins&lt;/a&gt;.&lt;/p&gt;&lt;/div&gt;
		&lt;hr /&gt;
		&lt;div &lt;div class='rss_ps'&gt;&lt;p&gt;Amis SPIPeurs, j'attends vos remarques et ajouts&lt;small class=&#034;fine d-inline&#034;&gt;&#160;&lt;/small&gt;!&lt;/p&gt;&lt;/div&gt;
		&lt;hr /&gt;
		&lt;div class='rss_notes'&gt;&lt;div id=&#034;nb1&#034;&gt;
&lt;p&gt;&lt;span class=&#034;spip_note_ref&#034;&gt;[&lt;a href=&#034;#nh1&#034; class=&#034;spip_note&#034; title=&#034;Notes 1&#034; rev=&#034;appendix&#034;&gt;1&lt;/a&gt;] &lt;/span&gt;&lt;a href=&#034;http://programmer.spip.org/La-notion-de-chemin&#034; class=&#034;spip_out&#034; rel=&#034;external&#034;&gt;Liste tir&#233;e du site Programmer avec &lt;span class=&#034;caps&#034;&gt;&lt;span class=&#034;caps&#034;&gt;SPIP&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;.&lt;/p&gt;
&lt;/div&gt;&lt;div id=&#034;nb2&#034;&gt;
&lt;p&gt;&lt;span class=&#034;spip_note_ref&#034;&gt;[&lt;a href=&#034;#nh2&#034; class=&#034;spip_note&#034; title=&#034;Notes 2&#034; rev=&#034;appendix&#034;&gt;2&lt;/a&gt;] &lt;/span&gt;En outre, cela diminue les requ&#234;tes &lt;span class=&#034;caps&#034;&gt;&lt;span class=&#034;caps&#034;&gt;SQL&lt;/span&gt;&lt;/span&gt; et donc la charge du serveur &lt;span class=&#034;caps&#034;&gt;&lt;span class=&#034;caps&#034;&gt;SQL&lt;/span&gt;&lt;/span&gt;, mais la contrepartie est de multiplier les fichiers de caches ainsi que les inclusions &lt;span class=&#034;caps&#034;&gt;&lt;span class=&#034;caps&#034;&gt;PHP&lt;/span&gt;&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;&lt;div id=&#034;nb3&#034;&gt;
&lt;p&gt;&lt;span class=&#034;spip_note_ref&#034;&gt;[&lt;a href=&#034;#nh3&#034; class=&#034;spip_note&#034; title=&#034;Notes 3&#034; rev=&#034;appendix&#034;&gt;3&lt;/a&gt;] &lt;/span&gt;Pour comprendre comment passer des param&#232;tres lors de ces inclusions, pour par exemple conna&#238;tre l'article courant, &lt;a href=&#034;http://www.spip-contrib.net/La-balise-ENV&#034; class=&#034;spip_out&#034; rel=&#034;external&#034;&gt;je renvoie &#224; mon article sur la balise #&lt;span class=&#034;caps&#034;&gt;&lt;span class=&#034;caps&#034;&gt;ENV&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;. Cet article devrais &#234;tre mis &#224; jour pour parler des derni&#232;res nouveaut&#233;s. Mais l'essentiel est l&#224;.&lt;/p&gt;
&lt;/div&gt;&lt;div id=&#034;nb4&#034;&gt;
&lt;p&gt;&lt;span class=&#034;spip_note_ref&#034;&gt;[&lt;a href=&#034;#nh4&#034; class=&#034;spip_note&#034; title=&#034;Notes 4&#034; rev=&#034;appendix&#034;&gt;4&lt;/a&gt;] &lt;/span&gt;J'ai cr&#251; &#224; un moment qu'une structure html &#233;tait incorrecte du fait qu'un fichier avait plus de &lt;code&gt;&lt;div&gt;&lt;/code&gt; ouvrantes que fermantes. En r&#233;alit&#233;, le dernier &lt;code&gt;&lt;/div&gt;&lt;/code&gt; manquant se trouvait ailleurs.&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
		</content:encoded>


		

	</item>



</channel>

</rss>
