Dépendances

Squeletml requiert un serveur Apache avec PHP 5. Aucune base de données n'est utilisée.

Notes

• Pour utiliser la fonction de mise en maintenance du site, la réécriture d'URL doit être activée sur le serveur.

• Pour ajouter des images dans une galerie à partir d'une archive ZIP ainsi que pour compresser les archives TAR des dossiers téléchargeables à partir du porte-documents, le module PHP zlib doit être installé.

• Pour générer automatiquement des vignettes ou redimensionner des images d'une galerie, la bibliothèque GD doit être installée (par exemple, sous Ubuntu 10.10, vérifier que le paquet php5-gd est installé).

• Pour afficher les données Exif dans les galeries, la fonction PHP exif_read_data() doit être disponible.

• La détection du type MIME peut se faire par Fileinfo de PHP ou par la commande file sur le système.

• La rotation automatique et sans perte de qualité des images JPG peut se faire avec la commande exiftran sur le système, ou bien avec la commande jpegtran sur le système et la fonction PHP exif_read_data().

• La suppression sans perte de qualité des données Exif des images JPG peut se faire avec la commande jpegtran sur le système.

• La récupération de contenu externe se fait par cURL si disponible (par exemple, sous Ubuntu 10.10, vérifier que le paquet php5-curl est installé), sinon par file_get_contents(). À ce sujet, il semble que Free.fr a modifié au début 2010 la configuration de ses serveurs, et une requête HTTP retourne systématiquement un code d'erreur 403. Par exemple, file_get_contents('http://www.squeletml.net/'); retourne ceci:

  HTTP/1.0 403 Forbidden
  

  Selon la FAQ du site «Les Pages Perso Chez Free», il faut demander sur le forum d'aide de Free.fr de mettre sur la liste blanche les URL que l'on souhaite atteindre.

  Dans ces conditions, sans un déblocage par Free de l'URL de votre site, les catégories, les flux RSS et la génération automatique du cache par le cron ne sont pas fonctionnels.

Installation

La procédure d'installation est très simple. Il faut commencer par télécharger l'archive de la dernière version sur la page de téléchargement du logiciel, extraire cette archive et placer les fichiers sur votre serveur, par exemple par ftp.

Mise en situation

On télécharge et extrait l'archive, ce qui crée le dossier squeletml.

• Pour avoir un site situé dans un répertoire, copier le dossier squeletml sur le serveur et le renommer comme désiré, ce qui nous donne l'adresse http://www.nomDeDomaine.ext/monSiteSqueletml/.

• Pour avoir un site situé à la racine d'un nom de domaine, transférer sur le serveur le contenu du dossier squeletml, ce qui nous donne l'adresse http://www.nomDeDomaine.ext/.

  Important: à la racine du dossier créé par l'extraction de l'archive, il y a au moins un fichier dont le nom débute par un point. De tels fichiers sont dits «cachés» (à tout le moins sur les systèmes de type Unix), et pour les voir, il faut généralement que le gestionnaire de fichiers soit configuré en conséquence ou que la ligne de commande comporte un argument conséquent. Par exemple, dans Nautilus, on peut afficher les fichiers cachés en allant dans Affichage et en cochant Afficher les fichiers cachés. En ligne de commande, ls accepte l'argument -a:

  ls -a
  

On termine l'installation de façon automatisée ou à la main.

Installation automatisée

Visiter la page d'accueil de votre nouveau site et suivre les quelques indications.

Si tout se passe bien, Squeletml créera automatiquement les fichiers nécessaires et la structure par défaut de votre site sera accessible.

Mise en situation

On visite dans notre navigateur la page d'accueil du nouveau site, ce qui nous donne http://www.nomDeDomaine.ext/monSiteSqueletml/ ou http://www.nomDeDomaine.ext/ selon le choix effectué à l'étape 1, et on suit les indications affichées.

Installation à la main

Par défaut, l'installation se fait en passant par une page web. Cependant, il est possible d'installer Squeletml à la main.

Seulement quatre fichiers doivent obligatoirement être créés et configurés, bien que vous voudrez probablement personnaliser ensuite le reste du site.

Tant que l'installation n'est pas terminée, la page d'accueil de votre site Squeletml dirigera vers la procédure d'installation par défaut passant par une page web.

Le fichier init.inc.php

Avec la méthode de votre choix (par exemple en vous connectant par ftp au serveur hébergeant votre site), trouver le fichier modeles/init.inc.php.modele, le copier et le coller sous le nom init.inc.php (il faut donc enlever le .modele final du nom) à la racine du site.

Ce fichier contient deux variables obligatoires à renseigner:

• $urlRacine: il s'agit de l'adresse URL vers votre site Squeletml. Par exemple, http://www.nomDeDomaine.ext/monSiteSqueletml ou http://www.nomDeDomaine.ext.

• $accueil: il s'agit d'un tableau contenant l'adresse url de l'accueil pour chaque langue de votre site.

  Vous pouvez ajouter autant de langues que vous le désirez, dans la mesure où cette langue est offerte par défaut avec Squeletml ou que vous en effectuiez la traduction. Le français est la langue par défaut. Ainsi, l'interface de Squeletml sera toujours entièrement disponible dans cette langue. Pour l'instant, une traduction partielle en anglais accompagne Squeletml.

  Vous pouvez également commenter les langues dont vous ne vous servez pas. Seules les langues existant dans le tableau $accueil apparaissent dans le menu des langues généré automatiquement par Squeletml.

  Exemple d'un site n'utilisant que le français:

  $accueil['fr'] = $urlRacine;
  #$accueil['en'] = $urlRacine . '/en';
  

  Exemple d'un site utilisant le français et l'anglais:

  $accueil['fr'] = $urlRacine;
  $accueil['en'] = $urlRacine . '/en';
  

  Si une langue n'est pas utilisée, il est conseillé de supprimer son dossier d'accueil ou de créer dans ce dossier un fichier interdisant son accès. Par exemple, si le site n'utilise pas l'anglais, nous pourrions supprimer le dossier d'accueil par défaut de cette langue, c'est-à-dire $urlRacine/en, ou y mettre un fichier .htaccess (donc $urlRacine/en/.htaccess) contenant ceci:

  Deny from all
  

  D'ailleurs, un tel fichier .htaccess est ajouté par l'installateur automatisé dans chaque dossier d'accueil d'une langue inactive.

Note: il est possible de renommer le dossier d'administration pour plus de sécurité, qui est par défaut admin. La variable à modifier, $adminDossierAdmin, se trouve dans le fichier init.inc.php. Le cas échéant, modifier le chemin vers l'administration dans les exemples de cette documentation. Par exemple, modifier ceci:

http://www.nomDeDomaine.ext/admin/acces.admin.php

pour:

http://www.nomDeDomaine.ext/$dossierAdmin/acces.admin.php

Cas des serveurs de Free.fr

Pour une installation de Squeletml sur un serveur de Free.fr, il faut effectuer en plus l'action suivante:

• trouver la variable $serveurFreeFr et modifier sa valeur pour TRUE.

Protection de l'administration (fichiers .htaccess et .acces)

Trouver le fichier modeles/.htaccess.modele, le copier et le coller sous le nom .htaccess (il faut donc enlever le .modele final du nom) à la racine du site. Ensuite, visiter la page suivante:

http://www.nomDeDomaine.ext/admin/acces.admin.php

et ajouter un utilisateur. Un fichier .acces sera créé à la racine de votre site Squeletml. Ce fichier contient la liste des utilisateurs.

Cas des serveurs de Free.fr

Si Squeletml est installé sur un serveur de Free.fr, le fichier à trouver est modeles/.htaccess.free.fr.modele. La suite est la même (copie et collage sous le nom .htaccess à la racine du site).

Chemin des pages d'erreur

Le fichier .htaccess contient entre autres l'adresse URL vers la page d'erreur 404 (toute personne tentant de visiter une page qui n'existe pas ou qui n'existe plus sur votre site sera redirigée vers cette page explicative). Si en visitant une page inexistante, vous ne voyez pas le contenu de la page d'erreur, ouvrez le fichier .htaccess, trouvez la ligne:

ErrorDocument 404 /404.php

et modifiez /404.php par la bonne adresse URL, par exemple http://www.nomDeDomaine.ext/404.php.

D'autres pages d'erreur sont déclarées dans le .htaccess, comme celle pour l'erreur 401. Au besoin, modifier dans le .htaccess le chemin de toutes les pages d'erreur.

Déclaration de l'installation terminée

Créer un fichier vide squeletml-est-installe.txt dans le dossier site/inc, ce qui donne:

site/inc/squeletml-est-installe.txt

L'installation par défaut passant par une page web sera ainsi désactivée.

Le fichier robots.txt

Vous pouvez trouver le fichier modeles/robots.txt.modele, le copier et le coller sous le nom robots.txt (il faut donc enlever le .modele final du nom) à la racine du site.

Vous pouvez personnaliser ce fichier ou le laisser tel quel.

Architecture de Squeletml

Dossiers

L'arborescence de Squeletml est la suivante:

• admin (le cas échéant, modifier le nom du dossier d'administration)
• css
• doc
• en
• fichiers
• inc
• js
• locale
• modeles
• site
• xhtml

Tous les dossiers, à part site, font partie de la structure officielle par défaut de Squeletml, et les fichiers y étant contenus ne doivent pas être modifiés, sous peine de perdre les modifications lors d'une mise à jour de Squeletml.

Toute modification apportée à la configuration par défaut doit donc être effectuée dans le dossier site.

Par exemple, pour modifier l'apparence du site, ne modifiez pas le fichier css/style-general.css, mais créez un fichier dans site/css, par exemple site/css/style.css. Il faudra ensuite ajouter ce fichier dans les styles à inclure. Nous verrons comment faire un peu plus loin.

Pour ajouter des images, mettez vos fichiers dans site/fichiers. Pour ajouter des fichiers à inclure, créez des fichiers dans site/inc. Vous aurez compris, le dossier site recrée la structure par défaut de Squeletml, ce qui permet de pouvoir facilement personnaliser le site sans toucher aux fichiers officiels de Squeletml. La mise à jour du logiciel en sera grandement facilitée.

Le dossier inc

Le dossier inc contient tous les scripts déclarant et affectant les variables qui seront utilisées pour construire la structure XHTML. Aucun fichier de ce dossier ne génère un affichage vers le navigateur. Il y a donc une séparation dans Squeletml entre les fichiers d'analyse et ceux contenant le contenu envoyé au navigateur.

Les fichiers du dossier inc peuvent être personnalisés en créant un fichier de même nom dans site/inc, et Squeletml reconnaîtra automatiquement le fichier personnel:

• blocs.inc.php: construit le code XHTML des blocs (menu des langues, menu principal, liens vers les flux RSS, etc.) pour une région spécifique. Après son inclusion, la variable $blocs est prête à être utilisée. Vous pouvez modifier cette variable en créant le fichier site/inc/blocs.inc.php, qui sera inséré à la fin de celui par défaut.

• categorie.inc.php: construit et analyse la liste des articles classés dans la catégorie demandée. Après son inclusion, la variable $categorie est prête à être utilisée. Vous pouvez modifier cette variable en créant le fichier site/inc/categorie.inc.php, qui sera inséré à la fin de celui par défaut.

• config.inc.php: contient presque toute la configuration du site, autant pour le formulaire de contact, les galeries photo, le titre du site, etc. Pour modifier une variable de ce fichier, créer le fichier site/inc/config.inc.php et y réaffecter les variables dont vous voulez changer la valeur. S'il existe, ce fichier sera inséré après celui par défaut.

  Quelques variables peuvent être utilisées dans le fichier de configuration personnalisé pour aider à construire des liens:

  • $urlFichiers
  • $urlRacineAdmin
  • $urlSite

  Voir la section «Variables et constantes utiles» pour une description de ces variables.

• constantes.inc.php: contient les constantes PHP utilisées dans Squeletml. Vous pouvez ajouter vos propres constantes en créant le fichier site/inc/constantes.inc.php. S'il existe, ce fichier sera inséré après celui par défaut.

• contact.inc.php: construit et analyse le formulaire de contact. Après son inclusion, la variable $contact est prête à être utilisée et contient les messages (d'erreur ou de confirmation) affichés à l'internaute et le formulaire en tant que tel. Il est possible d'interagir avec ce script en créant le fichier site/inc/contact.inc.php, qui sera inséré à différentes étapes du script:

  • juste après l'analyse des champs par défaut du formulaire, ce qui permet entre autres d'avoir des champs personnalisés et d'utiliser son propre script d'analyse de ces champs. Les variables utiles lors d'une analyse personnalisée sont $erreurFormulaire, qui annule l'envoi du message si elle vaut TRUE, et $messagesScript, qui contient les explications affichées après le traitement du formulaire;

  • juste avant l'envoi du message, ce qui permet de modifier le corps du message, l'objet, etc.;

  • à la fin du fichier par défaut.

• dernier.inc.php: gère l'inclusion des fichiers et l'affectation des variables nécessaires à la construction de la structure XHTML suivant le contenu ajouté directement dans une page du site. Deux traitements personnalisés peuvent être effectués dans ce fichier:

  • vous pouvez créer le fichier site/inc/dernier-pre.inc.php, qui sera inséré au début de inc/dernier.inc.php;
  • vous pouvez également créer le fichier site/inc/dernier.inc.php, qui sera inséré à la fin de celui par défaut.

• envoyer-amis.inc.php: crée les variables nécessaires à l'incorporation au formulaire de contact du module «Envoyer à des amis». Vous pouvez modifier ces variables en créant le fichier site/inc/envoyer-amis.inc.php, qui sera inséré à la fin de celui par défaut.

• fonctions.inc.php: contient les fonctions utilisées dans Squeletml. Vous pouvez créer vos propres fonctions dans le fichier site/inc/fonctions.inc.php, qui sera inséré après celui par défaut.

• galerie.inc.php: génère les variables nécessaires à l'affiche d'une galerie ou d'une page individuelle d'une image. Vous pouvez modifier ces variables en créant le fichier site/inc/galerie.inc.php, qui sera inséré à la fin de celui par défaut.

• premier.inc.php: gère l'inclusion des fichiers et l'affectation des variables nécessaires à la construction de la structure XHTML précédant le contenu ajouté directement dans une page du site. Deux traitements personnalisés peuvent être effectués dans ce fichier:

  • vous pouvez créer le fichier site/inc/premier-pre.inc.php, qui sera inséré dans inc/premier.inc.php après la deuxième série d'inclusions, donc juste avant les affectations en masse;
  • vous pouvez également créer le fichier site/inc/premier.inc.php, qui sera inséré à la fin de celui par défaut.

Note: le principe de personnalisation des fichiers du dossier inc est applicable également à la section d'administration. La structure répliquée à l'intérieur du dossier site doit être contenue dans un dossier de même nom que celui de l'administration, qui est admin par défaut. Par exemple, pour modifier des variables du fichier de configuration admin/inc/config.inc.php, créer le fichier site/admin/inc/config.inc.php.

Le dossier modeles

Le dossier modeles contient des modèles qui sont utilisés par l'installateur automatisé ou utilisable lors d'une installation manuelle, mais contient aussi des structures de fichier CSS et de fichiers de configuration (configuration du site et de l'administration).

Le dossier xhtml

Le dossier xhtml contient tous les fichiers contenant la structure XHTML envoyée au navigateur. Autrement dit, les variables nécessaires à la construction d'une page ont été déclarées et affectées par les scripts du dossier inc, et elles seront utilisées dans les fichiers du dossier xhtml.

Les fichiers du dossier xhtml peuvent être personnalisés en créant un fichier de même nom dans site/xhtml, et Squeletml reconnaîtra automatiquement le fichier personnel. Par exemple, pour modifier le menu en français, créer un fichier site/xhtml/fr/menu.inc.php, qui sera inséré à la place du fichier par défaut.

Il est également possible d'utiliser le même fichier pour toutes les langues du site. Pour ce faire, placer le fichier à la racine du dossier site/xhtml/. Par exemple, un menu commun à toutes les langues se trouvera dans site/xhtml/menu.inc.php.

Liste des fichiers

Pour commencer, il y a les fichiers de la structure XHTML générale de la page:

• form-contact.inc.php: modèle du formulaire de contact. Vous pouvez utiliser votre propre modèle en créant le fichier site/xhtml/(LANGUE/)form-contact.inc.php, qui sera utilisé à la place du modèle par défaut. Vous pouvez également ajouter des champs supplémentaires au modèle par défaut. Ainsi, si le fichier site/xhtml/(LANGUE/)form-contact.inc.php n'existe pas, des champs supplémentaires sous le champ nom peuvent être inclus dans le modèle par défaut grâce au fichier site/xhtml/(LANGUE/)form-contact-champs-apres-nom.inc.php, et des champs supplémentaires sous le message peuvent être inclus grâce au fichier site/xhtml/(LANGUE/)form-contact-champs-apres-message.inc.php.

  Mise en situation: nous voulons afficher sous le champ nom un nouveau champ de saisie pour le code postal, et ce pour les formulaires en français.

  Il faut commencer par ajouter le code du nouveau champ de saisie dans le fichier site/xhtml/fr/form-contact-champs-apres-nom.inc.php, ce qui donne par exemple:

  <p><label for="inputCodePostal">Votre code postal:</label><br />
  
  <input id="inputCodePostal" class="champInfo" type="text" name="codePostal" size="7" maxlength="7" value="<?php echo $codePostal; ?>" /></p>
  

  Ensuite, il faut ajouter le traitement de ce nouveau champ dans le fichier site/inc/contact.inc.php. Le traitement doit inclure la validation de la saisie ainsi que son utilisation lorsque toutes les données sont valides et que le courriel peut être envoyé. Cela peut donner ce qui suit:

  <?php
  $codePostal = '';
  
  // L'envoi du message est demandé
  if (isset($_POST['envoyer']))
  {
      $codePostal = securiseTexte($_POST['codePostal']);
      $codePostal = str_replace(' ', '', $codePostal);
      $codePostal = strtoupper($codePostal);
  
      if (empty($codePostal))
      {
          $erreurFormulaire = TRUE;
          $messagesScript .= "<li class=\"erreur\">Vous n'avez pas inscrit de code postal.</li>\n";
      }
      elseif (!preg_match('/([A-Z]\d){3}/', $codePostal))
      {
          $erreurFormulaire = TRUE;
          $messagesScript .= "<li class=\"erreur\">Le code postal ne semble pas avoir une forme valide. Veuillez l'inscrire sous la forme <em>A1A1A1</em>.</li>\n";
      }
  
      // Envoi du message
      if ($formulaireValide)
      {
          if (!empty($infosCourriel['message']))
          {
              $infosCourriel['message'] = rtrim($infosCourriel['message']) . "\n\n=========================\n\n";
          }
  
          $infosCourriel['message'] .= "Code postal: $codePostal";
      }
  }
  ?>
  
  

• page.dernier.inc.php: modèle de page suivant le contenu ajouté directement par l'utilisateur. Vous pouvez utiliser votre propre modèle en créant le fichier site/xhtml/(LANGUE/)page.dernier.inc.php, qui sera utilisé à la place du modèle par défaut.

• page.premier.inc.php: modèle de page précédant le contenu ajouté directement par l'utilisateur. Vous pouvez utiliser votre propre modèle en créant le fichier site/xhtml/(LANGUE/)page.premier.inc.php, qui sera utilisé à la place du modèle par défaut.

Ensuite, il y a les fichiers de division XHTML, qui sont, pour le français:

• fr/ancres.inc.php
• fr/bas-de-page.inc.php
• fr/menu.inc.php
• fr/menu-langues.inc.php
• fr/sous-titre.inc.php

• fr/sur-titre.inc.php

  Pour chaque autre langue, le fr est remplacé par le code approprié, par exemple en/menu.inc.php.

Il y a enfin les fichiers des pages par défaut:

• fr/page.401.inc.php
• fr/page.404.inc.php
• fr/page.contact.inc.php

• fr/page.index.inc.php

  Pour chaque autre langue, le fr est remplacé par le code approprié, par exemple en/page.index.inc.php.

  Il s'agit des pages livrées par défaut avec Squeletml. C'est pour cette raison que leur contenu se trouve dans un fichier à inclure, sinon la mise à jour du logiciel risquerait de supprimer les modifications effectuées. Toute autre page créée dans le site n'aura pas à utiliser ce système d'inclusion. Pour personnaliser une page livrée par défaut, par exemple la page d'accueil, créer le fichier site/xhtml/fr/page.index.inc.php, qui sera inclus à la place du fichier par défaut.

  La seule page que vous voudrez sans aucun doute personnaliser est la page d'accueil. Le système d'inclusion expliqué ci-dessus est donc tout indiqué. Cependant, pour les autres pages, il ne s'agit pas d'une nécessité absolue. En effet, les pages d'erreur 401 et 404 affichent un message standard et propose un lien vers l'accueil, et pour sa part, la page de contact peut utiliser un courriel par défaut si vous renseignez la variable $contactCourrielParDefaut dans le fichier de configuration.

Fichier piwik.inc.php

Piwik est un logiciel libre de statistiques web. Lorsqu'un site est ajouté dans Piwik, un code est généré et doit être inséré dans chaque page du site en question. Squeletml permet d'ajouter rapidement ce code. En effet, si un fichier piwik.inc.php existe dans le dossier site/xhtml, il sera automatiquement inclus comme bloc dans les pages, par défaut à la fin du bas de page. La région peut être modifiée dans le fichier de configuration comme tout autre bloc de contenu (voir la section «Nombre de colonnes et blocs de contenu»).

Dossiers inutiles pour une configuration donnée

Le dossier d'une langue inactivée peut être supprimé, tout comme les pages livrées par défaut et qui ne sont pas utilisées. Par exemple, si votre site est seulement en français, le dossier en peut être supprimé. C'est également le cas des pages exemple.php et galerie-demo.php à la racine du site si ces dernières ne sont pas utilisées.

Lors d'une mise à jour, il est également inutile de copier ces dossiers ou fichiers.

Structure XHTML par défaut

Voici un modèle simplifié d'une page de Squeletml par défaut:

Doctype XHTML 1.0 Strict..
<html ...><!-- Langue de la page en cours. -->
    <!-- ____________________ <head> ____________________ -->

    <head>
        <!-- Titre. -->
        <title>...</title>

        <!-- Métabalises. -->
        Encodage UTF-8.
        Description.
        Robots.

        <!-- Balises `link` et `script`. -->

        Feuilles de style et scripts Javascript.
    </head>
    <!-- ____________________ <body> ____________________ -->
    <body class="...">
        <!-- ____________________ #ancres ____________________ -->
        <div id="ancres">

            ...
        </div><!-- /#ancres -->

        <!-- ____________________ Message pour IE6. ____________________ -->
        <!--[if lt IE 7]>
            <div id="messageIe6">
                ...
            </div><!-- /#messageIe6 -->

        <![endif]-->

        <!-- ____________________ #page ____________________ -->
        <div id="page">
          <div id="interieurPage">
            <!-- ____________________ #enTete ____________________ -->
                <div id="enTete">

                    <div id="titre">
                        Titre du site dans un `h1` s'il s'agit de la page d'accueil, sinon dans un `p`.
                    </div><!-- /#titre -->

                    <div id="sousTitre">
                        ...
                    </div><!-- /#sousTitre -->

                </div><!-- /#enTete -->

                <!-- ____________________ #surContenu ____________________ -->
                <div id="surContenu">
                    Vide par défaut, donc `div` pas incluse.
                </div><!-- /#surContenu -->

                <!-- ____________________ #contenu ____________________ -->
                <div id="contenu" class="...">
                    <div id="interieurContenu">
                        <div id="debutInterieurContenu">
                            Vide par défaut, donc `div` pas incluse.
                        </div><!-- /#debutInterieurContenu -->

                        <div id="milieuInterieurContenu">
                            Contenu entré directement par l'utilisateur.
                        </div><!-- /#milieuInterieurContenu -->

                        <div id="finInterieurContenu">
                            Vide par défaut, donc `div` pas incluse.
                        </div><!-- /#finInterieurContenu -->

                    </div><!-- /#interieurContenu -->
                </div><!-- /#contenu -->

                <!-- ____________________ #sousContenu ____________________ -->
                <div id="sousContenu">
                    <div id="menuLangues" class="bloc">

                        ...
                    </div><!-- /#menuLangues -->

                    <div id="menu" class="bloc">
                        ...
                    </div><!-- /#menu -->

                    <div id="envoyerAmis" class="bloc">

                        ...
                    </div><!-- /#envoyerAmis -->

                    <div id="fluxRss" class="bloc">
                        ...
                    </div><!-- /#fluxRss -->
                </div><!-- /#sousContenu -->

                <!-- ____________________ #basDePage ____________________ -->
                <div id="basDePage">
                    ...
                </div><!-- /#basDePage -->
            </div><!-- /#interieurPage -->
        </div><!-- /#page -->

        Balises `script` finales.
    </body>
</html>

D'autres div peuvent apparaître à la suite de <div id="interieurContenu"> selon le module en cours d'utilisation, par exemple <div id="galerie"> lorsque nous visitons la page d'une galerie. Aussi, certaines div peuvent être positionnées ailleurs selon les choix effectués dans le fichier de configuration, par exemple le menu. Enfin, il est possible d'utiliser son propre modèle de page, comme expliqué à la section «Le dossier xhtml».

Nombre de colonnes et blocs de contenu

Les sections «Style CSS» et «Contenu et ordre du flux HTML» du fichier de configuration contiennent beaucoup commentaires explicatifs. Tout ne sera pas repris ici, mais en résumé, il est possible de choisir le nombre de colonnes ainsi que l'ordre de leur contenu. Le principe est le suivant: plusieurs blocs de contenu existent par défaut, comme le menu des langues, le menu principal, les liens vers les flux RSS, etc. Il est possible également d'ajouter ses propres blocs.

Chaque bloc peut être positionné dans une région spécifique de la page (et dans l'ordre voulu à l'intérieur d'une même région): enTete, surContenu, debutInterieurContenu, finInterieurContenu, sousContenu ou basDePage. Chaque nom de région correspond à une div du modèle de page.

Selon le style affecté (voir la section «Style CSS» du fichier de configuration), les div surContenu et sousContenu vont être positionnées dans la page pour remplir la ou les colonnes, ou bien, s'il n'y a pas de colonne, le dessus ou le dessous du contenu. Les possibilités sont donc:

• aucune colonne, les blocs étant positionnés au-dessus ou au-dessous du contenu selon leur configuration;
• une seule colonne à gauche;
• une seule colonne à droite;
• deux colonnes dont celle de gauche est remplie par les blocs de surContenu et celle de droite par les blocs de sousContenu;
• deux colonnes dont celle de gauche est remplie par les blocs de sousContenu et celle de droite par les blocs de surContenu.

Il est bon de rappeler qu'un modèle de page personnalisé peut être utilisé (voir la section «Le dossier xhtml»), et que les blocs peuvent alors être affichés ailleurs selon le modèle utilisé.

Schéma des inclusions lors de la construction d'une page

Note: le schéma doit se lire ainsi:

• fichier: le fichier existe et il sera inséré;
• fichier: le fichier sera inséré seulement s'il existe;
• fichier1 || fichier2: une seule insertion au maximum aura lieu, le premier fichier existant, vérifié de gauche à droite, sera inséré.

---

Voici le schéma des inclusions pour une page par défaut. Seuls les fichiers principaux et pour lesquels une personnalisation est possible sont listés.

• inc/premier.inc.php
  • init.inc.php
  • inc/devel.inc.php
  • site/inc/devel.inc.php
  • inc/fonctions.inc.php
  • site/inc/fonctions.inc.php
  • inc/config.inc.php
  • site/inc/config.inc.php
  • inc/constantes.inc.php
  • site/inc/constantes.inc.php
  • site/inc/premier-pre.inc.php
  • Si $idCategorie n'est pas vide: inc/categorie.inc.php
    • site/inc/categorie.inc.php
  • Si $idGalerie n'est pas vide: inc/galerie.inc.php
    • site/inc/galerie.inc.php
  • inc/blocs.inc.php
    • inc/envoyer-amis.inc.php
      • site/inc/envoyer-amis.inc.php
    • Inclusions selon les blocs configurés. Exemple pour le menu des langues:
      site/xhtml/$langueDeLaPage/menu-langues.inc.php || xhtml/$langueDeLaPage/menu-langues.inc.php || site/xhtml/$langueParDefaut/menu-langues.inc.php || xhtml/$langueParDefaut/menu-langues.inc.php || site/xhtml/menu-langues.inc.php || xhtml/menu-langues.inc.php
    • site/inc/blocs.inc.php
  • site/inc/premier.inc.php
  • site/xhtml/(LANGUE/)page.premier.inc.php || xhtml/(LANGUE/)page.premier.inc.php
• Contenu de la page
• inc/dernier.inc.php
  • site/inc/dernier-pre.inc.php
  • inc/blocs.inc.php (voir les détails plus haut)
  • inc/contact.inc.php
    • inc/envoyer-amis.inc.php (voir les détails plus haut)
    • site/inc/contact.inc.php après le traitement des champs par défaut
    • site/inc/contact.inc.php avant l'envoi du message
    • inc/envoyer-amis.inc.php (voir les détails plus haut)
    • site/inc/contact.inc.php avant l'inclusion du code XHTML du formulaire
    • site/xhtml/(LANGUE/)form-contact.inc.php || (xhtml/(LANGUE/)form-contact.inc.php && site/xhtml/(LANGUE/)form-contact-champs-apres-nom.inc.php && site/xhtml/(LANGUE/)form-contact-champs-apres-message.inc.php)
    • site/inc/contact.inc.php à la fin du fichier
  • site/inc/dernier.inc.php
  • site/xhtml/(LANGUE/)page.dernier.inc.php || xhtml/(LANGUE/)page.dernier.inc.php

Style de Squeletml

Le style d'un site réalisé avec Squeletml peut être modifié comme n'importe quel autre site à l'aide de feuilles de style CSS. Il est même possible de ne pas inclure les feuilles par défaut et partir de zéro. Cependant, le fichier de configuration contient une section «Style CSS», offrant la possibilité de modifier quelques aspects du site sans devoir bidouiller dans une feuille de style ou modifier le modèle de page (voir la section «Dossiers»). L'utilisation du fichier de configuration pour modifier le style n'est pas du tout une obligation, mais une aide supplémentaire si besoin il y a.

Voici quelques exemples:

• ajout de coins arrondis aux blocs de contenu;
• nombre de colonnes;
• emplacement d'une colonne unique;
• arrière-plan d'une colonne;
• contenu affichable ou masquable par un clic sur le titre;
• ajout d'une classe actif aux liens pointant vers la page en cours dans les blocs de contenu;
• limite de la profondeur d'une liste dans les blocs de contenu (classe masquer ajoutée aux sous-listes inactives);
• etc.

Traduction de Squeletml

Il est possible de traduire Squeletml dans la langue désirée. Le principal fichier est locale/squeletml.pot. Il contient la plupart des phrases à traduire. Les autres fichiers sont:

• admin/versions-solo.admin.php (le cas échéant, modifier le nom du dossier d'administration)
• xhtml/fr/ancres.inc.php
• xhtml/fr/bas-de-page.inc.php
• xhtml/fr/menu.inc.php
• xhtml/fr/menu-langues.inc.php
• xhtml/fr/sous-titre.inc.php
• xhtml/fr/sur-titre.inc.php
• xhtml/fr/page.401.inc.php
• xhtml/fr/page.404.inc.php
• xhtml/fr/page.contact.inc.php
• xhtml/fr/page.galerie.inc.php
• xhtml/fr/page.index.inc.php
• doc/documentation.mdtxt
• doc/LISEZ-MOI.mdtxt
• maintenance.php

Mise à jour de Squeletml

Note: lisez toute cette section avant d'effectuer une mise à jour.

Pour mettre à jour Squeletml:

• Visitez la page http://www.nomDeDomaine.ext/admin/acces.admin.php et mettez votre site en maintenance (hors ligne). Vous pouvez ajouter votre adresse IP dans le champ prévu à cet effet pour avoir encore accès à votre site durant la maintenance.

  La page de maintenance n'a pas de dépendance à des fichiers du site, à l'exception du fichier .htaccess de la racine, ce qui veut dire qu'en mode maintenance, vous pouvez supprimer ou déplacer tous les fichiers voulus, à l'exception de maintenance.php et .htaccess.

  Il est possible de personnaliser la page de maintenance en créant le fichier maintenance.inc.php à la racine du site. Si un tel fichier existe, il sera utilisé à la place de la page de maintenance par défaut.

  Note: la réécriture d'URL doit être activée sur votre serveur pour utiliser cette fonctionnalité. Si tel n'est pas le cas, ignorez le mode maintenance et passez à l'étape suivante.

• Téléchargez l'archive de la dernière version et extrayez son contenu. Vous allez obtenir un dossier dont le nom est squeletml.

• Ensuite, sélectionnez et copiez tout le contenu de ce dossier, et collez la sélection dans l'emplacement de votre site, et ce en acceptant de fusionner les dossiers et d'écraser les fichiers déjà existants.

  **Important**: ne pas oublier d'afficher les fichiers cachés pour bien les sélectionner. Voir la section «Installation» pour plus de détails.
  

Il s'agit probablement de la méthode la plus simple. Cependant, de vieux fichiers supprimés entre deux versions de Squeletml peuvent encore être présents sur votre site. Pour une mise à jour totalement propre, vous pouvez supprimer les fichiers de Squeletml de votre site avant d'y coller votre précédente sélection. Prenez garde cependant à ne pas supprimer les quelques fichiers de configuration à la racine (.acces, .htaccess, init.inc.php et robots.txt), le dossier site, qui contient votre configuration personnalisée, éventuellement les dossiers des différentes langues si votre site est multilingue (par exemple, si vous avez une section en anglais, vous avez fort probablement créé des pages personnalisées dans le dossier en) ainsi que les pages que vous avez vous-même ajoutées.

Notes:

• si vous avez modifié le nom du dossier d'administration, ne pas oublier de supprimer l'ancien dossier et de renommer le nouveau;
• il est bon de vérifier si les fichiers de configuration à la racine par défaut ont été modifiés dans la nouvelle version de Squeletml et, si tel est le cas, les éditer à la main pour y appliquer les changements;
• la lecture de la section «Dossiers inutiles pour une configuration donnée» est suggérée en complément à cette explication sur la mise à jour de Squeletml.

Création de pages

Il y a plusieurs manières de créer une page:

1. Créer un fichier vide et reproduire la structure d'une page.
2. Copier le fichier exemple.php et le coller avec le nom désiré.
3. Dans le porte-documents de la section d'administration, créer un nouveau fichier de type «Fichier modèle de page web» ou «Fichier modèle HTML de page web avec syntaxe Markdown».

Voici l'anatomie d'une page:

1. variables PHP
2. inclusion du premier fichier PHP
3. contenu de la page
4. inclusion du dernier fichier PHP

Variables PHP

Voici les différentes variables optionnelles avant l'inclusion du premier fichier PHP:

• $apercu: aperçu de la page en cours, si la valeur est différente de $apercuParDefaut du fichier de configuration du site. Le contenu de $apercu est inséré en tant que commentaire HTML au début de la div milieuInterieurContenu s'il n'est pas vide et si $inclureApercu du fichier de configuration du site vaut TRUE.

  Si $apercu vaut exactement interne ($apercu = "interne";), le commentaire HTML inséré sera donc <!-- APERÇU: interne -->, ce qui signifiera à Squeletml d'utiliser comme aperçu tout le texte situé entre l'ouverture de la div milieuInterieurContenu et le commentaire <!-- /aperçu -->. S'il y a lieu, des balises HTML seront fermées pour rendre le code de l'aperçu valide. Exemple:

  <div id="milieuInterieurContenu">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In sapien ante; dictum id, pharetra ut, malesuada<!-- /aperçu --> et, magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tempus; odio ac sagittis vehicula; mauris pede tincidunt lacus, in euismod orci mauris a quam. Sed justo. Nunc diam.</p>
  

  Les espaces dans le commentaire <!-- /aperçu --> sont optionnelles, et le «c» peut s'écrire sans cédille. Voici des exemples de commentaire valide:

  • <!-- /aperçu -->
  • <!--/aperçu-->
  • <!-- /apercu -->
  • <!--/apercu-->

  Sinon si $apercu vaut exactement description ($apercu = "description";), le commentaire HTML inséré sera donc <!-- APERÇU: description -->, ce qui signifiera à Squeletml d'utiliser comme aperçu le contenu de la métabalise description.

  Sinon si $apercu vaut exactement automatique ($apercu = "automatique";), le commentaire HTML inséré sera donc <!-- APERÇU: automatique -->, ce qui signifiera à Squeletml d'utiliser comme aperçu les premiers caractères de la div milieuInterieurContenu. Le nombre de caractères correspond à la valeur de la variable $tailleApercuAutomatique du fichier de configuration du site.

• $auteur: nom ou noms à inclure dans la métabalise author, si la valeur est différente de $auteurParDefaut du fichier de configuration du site. Si elle existe, cette variable sera utilisée dans le listage des articles classés dans une catégorie ainsi que dans le bloc des informations de publication.

• $baliseH1: contenu de la balise h1. Il s'agit donc du titre de premier niveau pour la page courante. Exemple:

  $baliseH1 = "Titre de premier niveau de la page courante";
  

  Ce titre peut très bien être ajouté directement dans le corps de la page en HTML sans passer par la variable $baliseH1. Le but d'utiliser cette variable est:

  • d'éviter de saisir deux fois la même information dans le cas où nous voulons que la balise title ait le même contenu que le titre de premier niveau. En effet, si la variable $baliseTitle n'est pas renseignée, mais que $baliseH1 l'est, alors la variable $baliseTitle aura le même contenu que le titre h1;

  • de pouvoir manipuler le titre de premier niveau comme un bloc de contenu (balise-h1), et ainsi pouvoir choisir son emplacement parmi les diverses régions possibles. Par exemple, le bloc de contenu sur les informations de publication s'affiche par défaut sous le contenu dans la région finInterieurContenu. En créant un bloc balise-h1, il est ainsi possible de faire apparaître le bloc des informations de publication dans le haut de la page, entre le titre de premier niveau et le contenu.

• $baliseTitle: contenu de la balise title. Si cette variable est vide, elle se verra assigner la valeur de la variable $baliseH1 si cette dernière n'est pas vide, sinon l'URL de la page en cours.

• $boitesDeroulantes: permet d'activer les boîte déroulantes pour du contenu présent dans la page en cours. Voir les commentaires de la variable $boitesDeroulantesParDefaut dans le fichier de configuration du site pour une description détaillée de la syntaxe à utiliser.

• $boitesDeroulantesAlaMain: prend la valeur TRUE ou FALSE, si la valeur est différente de $boitesDeroulantesAlaMainParDefaut du fichier de configuration du site. Si vaut TRUE, les fichiers nécessaires à la gestion d'une boîte déroulante (Javascript et CSS) seront inclus, mais l'appel à la fonction Javascript boiteDeroulante() ne se fera pas de manière automatique, mais à la main par l'utilisateur, qui devra insérer la fonction à l'endroit désiré dans le code de la page.

• $classesBody: permet d'ajouter des classes à la balise body. Voici un exemple:

  $classesBody = 'maClasse1 maClasse2';
  

  Prendre note que la balise body contient déjà par défaut plusieurs classes, dont la plupart ont un nom explicite. Voici cependant quelques classes qui méritent d'être définies:

  • accueil: ajoutée aux pages d'accueil de chaque langue du site.
  • article: ajoutée aux pages étant classées dans au moins une catégorie.
  • categorie: ajoutée aux pages listant les articles appartenant à une catégorie.
  • galerie: ajoutée aux pages d'une galerie, que ce soit la page d'accueil de la galerie ou une page individuelle d'une image.
  • galerieAccueil: ajoutée aux pages d'accueil de chaque galerie.
  • galeriePageImage: ajoutée à chaque page individuelle d'une image dans une galerie.
  • pageStandard: ajoutée aux pages n'étant ni un formulaire de contact, ni une galerie, ni une page listant les articles appartenant à une catégorie.
  • pageStandardSansCategorie: ajoutée aux pages n'étant ni un formulaire de contact, ni une galerie, ni une page listant les articles appartenant à une catégorie, ni une page étant classée dans au moins une catégorie.

• $classesContenu: permet d'ajouter des classes à la div contenu. Voir $classesBody pour un exemple d'utilisation.

• $courrielContact: adresse courriel qui va recevoir les messages du formulaire de contact. Si cette variable existe et n'est pas vide, un formulaire de contact sera automatiquement inclus dans la page. Il est donc facile de créer autant de formulaires que désiré en créant pour chacun une page contenant une varibale $courrielContact.

  Note: dans le formulaire de contact livré par défaut avec Squeletml, cette variable vaut simplement @. Puisqu'elle n'est pas vide, un formulaire de contact s'affiche. Cependant, le formulaire par défaut n'est pas utilisable en ce sens que la valeur de $courrielContact n'est pas une adresse réelle. Toutefois, si la variable $contactCourrielParDefaut est renseignée dans le fichier de configuration du site, toutes les variables $courrielContact valant exactement @ prendront la valeur de $contactCourrielParDefaut, ce qui évite de devoir créer une page de contact personnalisée simplement parce que le formulaire par défaut n'a pas une adresse valide.

• $dateCreation: date de création de la page, sous la forme AAAA-MM-JJ, incluse dans la métabalise date-creation-yyyymmdd. Si elle existe, cette variable sera utilisée dans le listage des articles classés dans une catégorie, dans le classement des items des flux RSS et dans le bloc des informations de publication.

• $dateRevision: date de dernière révision de la page, sous la forme AAAA-MM-JJ, incluse dans la métabalise date-revision-yyyymmdd. Si elle existe, cette variable sera utilisée dans le bloc des informations de publication, dans le listage des articles classés dans une catégorie et, si $dateCreation n'existe pas, dans le classement des items des flux RSS.

• $description: contenu de la métabalise description. Si cette variable est vide, la métabalise description ne sera pas incluse dans l'en-tête de la page.

• $envoyerAmis: prend la valeur TRUE ou FALSE, selon qu'on veut activer ou non cette option pour la page courante, si la valeur est différente de $activerEnvoyerAmisParDefaut du fichier de configuration du site.

• $idCategorie: un nombre, un mot ou une phrase identifiant la catégorie à chercher pour afficher la liste des articles y étant classés. Voir la section «Catégories».

• $idGalerie: un nombre, un mot ou une phrase identifiant la galerie. Représente le nom du répertoire qui sera lu dans site/fichiers/galeries pour lister les images. Par défaut, cette variable est vide, mais si elle n'est pas vide, et si le fichier de configuration existe pour cet id (voir la section «Galeries»), une galerie sera insérée dans la page.

  Par exemple, si nous avons $idGalerie = "mes-voyages";, Squeletml va rechercher le dossier site/fichiers/galeries/mes-voyages. Si ce dossier ou le fichier de configuration n'existent pas, un message d'erreur informe de l'inexistence de la galerie.

• $infosPublication: prend la valeur TRUE ou FALSE, selon qu'on veut afficher ou non les informations de publication (auteur, date de création, date de dernière révision) pour la page courante, si la valeur est différente de $afficherInfosPublicationParDefaut du fichier de configuration du site.

• $langue: langue de la page courante, si la valeur est différente de $langueParDefaut du fichier de configuration du site.

• $licence: licence de la page courante, si la valeur est différente de $licenceParDefaut du fichier de configuration du site. Plusieurs licences peuvent être déclarées, chacune devant être séparée par une espace. Voici un exemple:

  $licence = 'art-libre cc-by-sa';
  

  Voir la fonction licence() pour connaître tous les choix possibles.

• $lienPage: prend la valeur TRUE ou FALSE, selon qu'on veut afficher ou non une suggestion de code pour un lien vers la page courante, si la valeur est différente de $afficherLienPageParDefaut du fichier de configuration du site.

• $motsCles: contenu de la métabalise keywords. Si cette variable est vide ou inexistante, elle sera générée automatiquement à partir du contenu de la variable $description. Prenez note que si $inclureMotsCles vaut FALSE dans le fichier de configuration du site, les mots-clés ne seront pas ajoutés à l'en-tête de la page, même si $motsCles n'est pas vide.

• $partage: prend la valeur TRUE ou FALSE, selon qu'on veut activer ou non cette option pour la page courante, si la valeur est différente de $activerPartageParDefaut du fichier de configuration du site.

• $robots: contenu de la métabalise robots, si la valeur est différente de $robotsParDefaut du fichier de configuration du site.

• $rssCategorie: prend la valeur TRUE ou FALSE, selon qu'on veut activer ou non la syndication de contenu individuelle pour la catégorie en question, si la valeur est différente de $activerFluxRssCategorieParDefaut du fichier de configuration du site.

• $rssGalerie: prend la valeur TRUE ou FALSE, selon qu'on veut activer ou non la syndication de contenu individuelle pour la galerie en question, si la valeur est différente de $galerieActiverFluxRssParDefaut du fichier de configuration du site.

• $tableDesMatieres: prend la valeur TRUE ou FALSE, selon qu'on veut générer ou non une table des matières pour la page courante, si la valeur est différente de $afficherTableDesMatieresParDefaut du fichier de configuration du site. La table des matières est générée par Javascript.

  Le contenu analysé pour la génération de la table des matières est la div milieuInterieurContenu pour les pages du site et la div interieurContenu pour les pages de l'administration. La table est ajoutée au début de la div analysée.

  Par défaut, tous les titres de niveaux 2 à 6 présents à l'intérieur de la div analysée constituent la table des matières. Il est possible de configurer la table des matières dans le fichier de configuration du site.

Inclusion du premier fichier PHP

Il suffit d'inclure le fichier inc/premier.inc.php.

Cas de l'installation par défaut de Squeletml

Ne pas oublier de vérifier le chemin d'inclusion. Par exemple, pour une page à la racine du site, ça donnera:

include 'inc/premier.inc.php';

Pour une page dans un dossier:

include '../inc/premier.inc.php';

Pour une page dans un sous-dossier (dossier d'un dossier):

include '../../inc/premier.inc.php';

Note: si la page est créée à partir du porte-documents dans la section d'administration, le bon chemin d'inclusion est automatiquement inséré.

Cas avec insertion automatique du fichier init.inc.php

Note: je n'ai pas testé cette possibilité, et ce n'est pas supporté officiellement dans Squeletml.

Le fichier init.inc.php contient entre autres la variable $racine. En faisant insérer automatiquement ce fichier dans toutes les pages, il est donc possible d'utiliser la variable $racine pour inclure le fichier inc/premier.inc.php, ce qui nous dispense de devoir modifier le chemin d'inclusion selon le dossier dans lequel la page est située.

Pour ce faire, ouvrir le fichier .htaccess, trouver la ligne contenant la directive auto_prepend_file, et la décommenter, ce qui va donner:

<FilesMatch "\.(php)$"> 
    php_value auto_prepend_file "/var/www/serveur_local/squeletml/init.inc.php"
</FilesMatch>

Ne pas oublier de modifier le chemin d'inclusion du fichier init.inc.php.

Contenu

Lire la suite de la documentation de Squeletml.