Différences

Ci-dessous, les différences entre deux révisions de la page.

--- apps:rootulle1.0:personnalisation [2007/05/14 12:39] – samray1024
+++ apps:rootulle1.0:personnalisation [2024/10/03 07:31] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+====== Personnaliser Rootulle ======
+<note>
+  * **Objectif :** Modifier l'interface de Rootulle
+  * **Niveau de difficulté :** Avancé
+</note>
+<note important>La personnalisation de Rootulle s'adresse plutôt aux développeurs car elle nécessite d'avoir quelques connaissances du langage PHP, de l'HTML/XHTML ainsi que des feuilles de styles (CSS).</note>
+<note warning>Avant d'éditer index.php, je vous invite à lire l'[[:accueil|avertissement]] présent à l'accueil de la documentation si ce n'est pas déjà fait !</note>
+===== Vue d'ensemble du script =====
+Avant de rentrer dans le vif du sujet, passons par une présentation générale de la structure du script pour vous permettre de mieux appréhender son organisation. Ne vous en faites pas, c'est plutôt simple ;-).
+Rootulle est donc structuré de la façon suivante :
+  - Texte de licence,
+  - Section de configuration,
+  - Images utilisées par l'interface,
+  - Lecture paramètres URL et lancement des actions,
+  - Définition des styles CSS,
+  - Fonctions utilisées par le script,
+  - Coeur du code,
+  - Structure XHTML.
+===== Modifier les images =====
+Cette partie qui peut paraître délicate de prime abord, est finalement excessivement simple dès lors que l'on aura compris son fonctionnement.
+L'objectif de Rootulle est d'être simple, léger et pratique. Il est donc hors de question de livrer un dossier contenant les différentes images constituantes de l'interface. Celles-ci sont alors directement mises dans le script sous forme de variables.
+Pour ce faire, chaque image a été encodée en **base 64**((Informations complémentaires sur le codage base 64 sur [[http://fr.wikipedia.org/wiki/Base_64|Wikipedia]])). Cet encodage permet de disposer d'une chaîne de caractères que l'on peut affecter à une variable. Sans lui, il n'est pas possible de manipuler directement la chaîne binaire de l'image du fait des milliers de caractères spéciaux qui empêche l'écriture de cette chaîne dans le code PHP.
+Une image est donc visible sous cette forme :
+<code php>$h3_fond = "
+iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAECSURBVHjaYri5u+o/QAAx/WdgYAAIICaG//8ZAAKICYgZAAIIyP3PABBAQC4DA0AAgbkAAQTmAgQQkPWfASCAwFyAAAKzAAIIzAIIIDALIIDABEAAgbkAAcT0D0gCBBCYCxBAYC5A
+AIFZAAEEFgMIIDALIIDAYgABBGYBBBDTv3//GQACCMwCCCCwGEAAgVkAAQRWBxBAYBZAAIHFAAIIzAIIILAYQACBuQABBOYCBBCYAAggMBcggMAsgAACswACCMwCCCCw+wACCMwFCCCwmwECCMwFCCAwFyCAwD4CCCAmXQ1pBoAAAnqPYT9AADEBiQsAAcQMJF4ABBADSBtAgAEApsRy4X68yg0AAAAASUVORK5CYII=
+";</code>
+Pour **modifier / créer** une image, vous devez obtenir son contenu en code base 64. Pour ce faire, il vous faut un petit script, à placer quelque part sur votre serveur web, et à exécuter ensuite dans votre navigateur préféré.
+Voici le **code** du script que j'ai utilisé pour récupérer toutes les chaînes base 64 de mes images :
+<code php><?php
+echo chunk_split( base64_encode( file_get_contents('mon_image.png') ), 256 );
+?></code>
+Cette ligne de code fait ceci :
+  - Récupération du contenu binaire du fichier indiqué,
+  - Encodage de la chaîne binaire en base 64,
+  - Affichage de la chaîne finale en lignes de 256 caractères.
+L'**utilisation** est des plus simples : pour chaque image à utiliser dans Rootulle, prenez le script d'encodage, placez l'image à encoder au même niveau que le script (ou ailleurs si vous préférez), modifiez le nom / l'adresse de l'image ('mon_image.png' dans l'exemple), enregistrez puis exécutez le script dans votre navigateur. Ceci fait copiez-collez la chaîne affichée dans la variable de l'image. C'est tout !
+L'exploitation de ces images au sein de Rootulle est décrite dans la partie suivante.
+===== Adapter la feuille de styles =====
+Pour que la personnalisation soit la plus simple possible, Rootulle utilise les feuilles de styles pour sa présentation graphique.
+La section de définition des CSS est construite de la façon suivante :
+<code php>// ================
+// CSS
+//
+$sCssStructure = "[...]";
+$sCssStyle = "[...]";</code>
+Cette section comporte deux variables :
+  * **$sCssStructure** : contient uniquement les attributs de styles qui concernent la **mise en page** (marges, dimensions, placements, flux, ...),
+  * **$sCssStyle** : à contrario, contient uniquement les attributs de styles qui concernent la **décoration** des différents éléments constituants (couleurs, bordures, images de fond, tailles de textes, styles de textes, ...).
+==== Précisions sur l'utilisation des images ====
+Nous l'avons vu précédemment, les images ne sont pas des fichiers externes que l'on appelle mais des variables en code base 64. Pour utiliser ces images dans les feuilles de styles, il suffit simplement de modifier l'URL de ces images pour faire appel à leur variables respectives. Il faut les présenter comme ceci :
+<code php>$sCssStyle = "
+	[...]
+	#header, #footer { background: url(".JB_RT_PAGE_NAME."?img=header_fond) repeat-x; }
+	[...]
+";</code>
+  * **JB_RT_PAGE_NAME** est une constante qui est initialisé au lancement du script et qui contient le nom du fichier exécuté (//index.php// par défaut). Cela permet de garder la validité des URL au cas ou vous changeriez le nom du fichier,
+  * A cette URL, vous devez ajouter le paramètre **img**, auquel vous devez affecter le nom de la variable qui contient l'image. Ce nom doit être **rigoureusement identique** au nom de la variable sans le **$**.
+Cette technique a pour effet, pour chaque URL rencontrée dans le CSS, de rappeler //index.php// en lui demandant de retourner le contenu de l'image **décodé**.
+A vous maintenant de travailler les CSS selon vos envies !
+===== Modifier la structure XHTML =====
+Dernière partie du fichier : **le code XHTML**. Si la seule personnalisation de la feuille de styles ne vous suffit pas, vous pouvez bien entendu adapter la structure du document à vos besoins. Tout le code XHTML se trouve à la fin du fichier.
+Vous-y trouverez du **code PHP imbriqué** qui permet de rendre la page dynamique. Lors de vos modifications, veillez à **conserver** la structure du code PHP pour ne pas casser votre script. Vous devez construire votre code XHTML autour de ce **squelette** PHP.
+Il n'y a pas grand chose de plus à dire sur ce point si ce n'est qu'il vous faut des connaissances en XHTML et quelques notions de PHP pour pouvoir vous en sortir (de la même façon qu'il vous faut un minimum pour modifier les CSS ;-)).
+A vous de jouer !