Message d'alerte
Fermeture

BRICKIT

Un système léger pour construire votre site Web.

Documentation BRICKIT

BrickIt dispose de modèles de composants de pages (les briques pour le contenu et les modules pour les header, menu et footer), d'un utilitaire qui permet la construction de pages fondées sur les modèles disponibles et d'un utilitaire qui permet la modification des pages.

Premiers pas

Lire ce paragraphe en entier.
******************
Pour lancer l'utilitaire de construction de page, (seulement après lecture du paragraphe) cliquer sur ce lien. L'utilitaire s'ouvre dans un nouvel onglet du navigateur. Un formulaire est présenté, observez le sans apporter de modification, puis cliquer sur le bouton "Créer la page". Dans le pop-up d'avertissement qui apparaît, cliquer sur le lien de la page qui vient d'être créée. Pas mal la fille. Pas mal non plus la facilité de création de cette page.
Fermer l'onglet de cette nouvelle page, et revenir à la page de la documentation.
******************

Prendre connaissance du formulaire

Quatre sections :

  • Saisie des metas
    Cette section permet de documenter les metas title, description et keywords. A ne pas négliger.
  • Composition du canevas
    Le premier élément de cette section (Overflow) permet de définir le comportement du pied de page. Par défaut, il est fixe en bas de la fenêtre du navigateur. Coché, le pied de page est en fin de page. Ensuite, il est possible de choisir un thème, puis la présence ou non d'un header et d'un menu horizontal. Par défaut, le header est en haut de la page, et le menuH en-dessous. En cochant la case suivante (MenuH first), cet ordre est inversé. Pour chaque module, il est possible de choisir un modèle. En cliquant sur le "?" en regard de la fenêtre de sélection, on obtient une visualisation du modèle choisi.
    Ensuite, on choisit d'avoir un menu vertical ou non. Ce menu est installé sur le côté de la page en regard du contenu. Par défaut, ce menu est à gauche, en cochant la case 'menuV à droite', il est à droite du contenu. Enfin, présence ou non d'un pied de page, et choix de celui-ci.
  • Choix de la page
    Cette section permet de déterminer la page à construire, en choisissant le répertoire d'installation, et en définissant le nom de la nouvelle page.
    Si la page doit être installée dans un répertoire inexistant, il convient de le créer avec l'explorateur de fichiers de Windows, et de rafraichir la page d'affichage de l'utilitaire 'newPage'.
  • Composition des templates
    Cette section permet de choisir un premier template avec le sélecteur en place 'modèle de brique'. Une fois le template choisi, il est possible de le visualiser en cliquant sur le point d'interrogation en fin de ligne. A ce stade, il n'est pas possible de le modifier, mais il est possible d'en changer.
    Pour ajouter un autre template, cliquer sur le bouton 'Ajouter un modèle'. Le même modèle peut être inséré plusieurs fois dans une même page. Lorsque la composition est multiple, le bouton 'Supprimer un Modèle' apparaît, mais ne peut supprimer que le dernier. Cette containte peut être contournée en modifiant les noms des templates avant la suppression.

Prendre connaissance des modèles

Le formulaire de création de page est dans l'onglet "New page" du navigateur. Ce formulaire met à disposition une section "composition des templates" dans laquelle existe au moins une ligne "Modèle de brique". En cliquant son sélecteur, apparaît la liste des modèles disponibles. Les choisir les uns après les autres pour les visualiser en cliquant sur le point d'interrogation en regard du modèle choisi.

Créer une première page

Revenir au formulaire de création de page, et cocher les cases 'Header', 'Menu horizontal' et 'Pied de page' sans sélectionner autre chose que le choix par défaut. Dans la section 'Choix de la page', conserver ou afficher 'exercices' comme répertoire, et 'demo' comme nom de page. La page 'exercices/demo' est une page de test qui est seule à pouvoir être écrasée. Sélectionner un premier modèle, ajouter un modèle, le choisir, et recommencer cette opération pour composer une page avec 3 ou 4 briques. Cliquer sur le bouton "Créer la page". Un message apparait en haut de la page. Utiliser le lien figurant dans ce message pour visualiser le résultat. Si le message disparait trop vite, appuyer à nouveau sur le bouton "Créer la page".
Cette fois, la page ressemble davantage à une vraie page.

Modifier le contenu d'une page

Avant d'aller plus loin, télécharger le package BrickIt et le décompresser dans le dossier wamp/www/brickit de votre ordinateur. Vérifier que Wamp est lancé et que vous avez un virtual host qui pointe vers le dossier où le package a été décompressé. Lancer ce virtual host, la page sur le concept BrickIt s'ouvre en local. Retrouver cette documentation grâce au menu.

Refaire en local les exercices précédents.

Une fois la page créée, son contenu est celui des modèles choisis pour la composer. Chaque page est constituée de 4 éléments, un pour l'entête, un pour le menu, un pour le contenu, et un pour le pied de page. Ainsi, la page /exercices/demo.php se construit avec les 4 fichiers suivants :

  • /exercices/demo.header.html pour l'entête
  • /exercices/demo.menu.html pour le menu
  • /exercices/demo.html pour le corps de la page
  • /exercices/demo.footer.html pour le pied de page

Les feuilles de style associées à ces fichiers sont :

  • /css/exercices/demo.header.css pour l'entête
  • /css/exercices/demo.menu.css pour le menu
  • /css/exercices/demo.css pour le corps de la page
  • /css/exercices/demo.footer.css pour le pied de page

Vous disposez de tous les fichiers en local. Il est alors possible de les modifier avec divers outils. Toutefois, il est fortement déconseillé de modifier les fichiers du répertoire "brickit_bib".

La page créée est composée de modèles. Il faut adapter leur contenu. Plusieurs outils possibles pour éditer en priorité le fichier dossier/page.html. Il faut y remplacer les textes et les liens vers les images. En second lieu, la présentation des éléments peut être aménagée en éditant le fichier css/dossier/page.css.

Avec le manager BrickIt

BrickIt propose un outil de maintenance des pages. Une fois créée la page ne peut pas être modifiée avec l'outil de création des pages. Il faut utiliser le manager de pages.

Celui-ci permet de modifier les briques une à une, contenu et css et les fichiers des modules header, menu et footer, mais il permet aussi de réorganiser l'ordre des briques, d'en ajouter ou d'en supprimer une. Accès à la documentation du manager.

Modifier avec Notepad++

Afficher la page à modifier dans le navigateur. Editer le fichier "/répertoire/page.html" avec Notepad++. Faire les modifications, sauvegarder, vérifier dans le navigateur en provoquant le rafraichissement de la page. Pour modifier les styles, faire la même chose avec le fichier "/css/répertoire/page.css".

Pour modifier les autres modules (header, menu, footer), il faut choisir le couple de fichiers qui correspond au module.

Modifier avec THIMBLE

Cliquer sur le lien ci-dessus. Puis, dans la page qui s'ouvre sur "Créer un nouveau projet".

Remplacer le contenu de "style.css" par le contenu du fichier "/css/répertoire/page.css". Afficher maintenant "index.html", sélectionner ce qui est à l'intérieur de la balise 'body', et le remplacer par le contenu du fichier "/répertoire/page.html". Cette méthode présente l'avantage d'être WYSIWYG, autrement dit, What You See Is Wath You Get. Elle a l'inconvénient de ne pas assurer l'édition directe des fichiers, ni leur sauvegarde sur l'ordinateur. Pour sauvegarde les modifications CSS, il faut recopier le contenu modifié dans "/css/répertoire/page[.module].css", et le contenu de la balise 'body' du fichier index.html dans "/répertoire/page[.module].html". Dans la phrase qui précède, ".module" correspond à '.header', ou '.menu', ou '.footer', ou vide pour le corps de la page.

Les utilitaires

Plusieurs utilitaires sont indispensables dans un site. Ils sont installés dans le répertoire 'utilities'. Il s'agit de pages par défaut. Leur réalisation n'est peut être pas adaptée à la présentation du site. Elles peuvent être modifiées avec pageManager. Elles peuvent aussi être dupliquées sous un autre nom avant modification. Dans ce cas, les liens vers les pages contact et BuildingPage devront être mis à jour dans les autres pages du site, et les liens vers les pages d'erreur et de maintenance devront être mis à jour dans le fichier ".htaccess". Noter que ce fichier commence bien par un '.', et qu'il n'a pas d'extension. Conserver le fichier ".htaccess.svg" qui est une sauvegarde du fichier original.

L'erreur 404

Lorsqu'une page inexistante est demandée, il convient de remplacer la page par défaut générée par le navigateur par une page plus plaisante. C'est le traitement de l'erreur 404. La page correspondante est /utilities/error404.php. Il est possible de la modifier avec pageManager. Ce fichier est lié au fichier ".htaccess" installé à la racine du site. En cas d'inexistance d'une page demandée, le serveur recherche dans ce fichier l'adresse du fichier à utiliser. La ligne :

ErrorDocument 404 /utilities/error404.php

contient l'information. L'URL définie dans le fichier .htaccess doit être conforme au nom du fichier d'erreur du site.

Le formulaire de contact

Un second utilitaire quasi indispensable est le formulaire de contact. La page correspondante est /utilities/contact.php. Celui-ci doit faire l'objet de modifications concernant l'adresse de destination des courriers et les paramètres de serveur de courrier utilisé. C'est modifications ne peuvent être faites avec le manager. Il convient d'éditer le fichier "/brickit_bib/sendMail.ajax.php" qui sur le serveur a la charge d'adresser les courriers. Les premières lignes du fichier contiennent dans l'ordre l'adresse mail à laquelle le formulaire doit envoyer le courrier, le nom ou pseudo du destinataire et le texte qui figure dans l'objet des mails.

// adresse du contact
define('CONTACT_ADD', 'xxx@free.fr');
// nom du contact
define('CONTACT_NAME', 'Gérard');
// sujet du message
define('MSG_SUBJECT', 'Contact BrickIt');

Toujours dans le même fichier, au-delà de la ligne 60 sont définies les informations du serveur.

   /* SMTP parameters. */
   
   /* Tells PHPMailer to use SMTP. */
   $mail->isSMTP();
   /* SMTP server address. */
   $mail->Host = 'smtp.free.fr';
   /* Use SMTP authentication. */
   $mail->SMTPAuth = TRUE;
   /* Set the encryption system. */
   $mail->SMTPSecure = 'ssl';
   /* SMTP authentication username. */
   $mail->Username = 'toto@free.fr';
   /* SMTP authentication password. */
   $mail->Password = '********';
   /* Set the SMTP port. */
   $mail->Port = 465;

Cette configuration rappelle celle qui est faite pour accéder à un compte Gmail.

Page en construction

Cette page (/utilities/BuildingPage.php) est utile lorsqu'une page est en cours d'élaboration, et que cette page renvoie sur des pages qui ne sont pas encore construites. On affecte alors aux liens orphelins l'adresse de cette page en attendant que la page définitive soit construite. Cette pratique est déconseillée en production.

Site en maintenance

Cette page (/utilities/maintenance.php) permet lors de maintenance importante du site d'être présentée au client quelle que soit la page qu'il demande. Cette pratique doit être limitée au maximum. Il sera préféré lors de tests de longue durée l'utilisation d'un serveur d'évaluation.

Ce fichier est mis en oeuvre par le fichier ".htaccess" qui doit être préparé à cet effet, et modifié pour rendre cette procédure active.

L'adresse IP du développeur doit être mise à jour. A la ligne qui suit "# ip de la box", remplacer les 'x' par les valeurs correspondant à l'IP du développeur qui, lui ne doit pas être redirigé sur la page de maintenance pour faire ses vérifications. Normalement, pour le travail en local, cette configuration est bonne.

#------------------------------------ extrait de .htaccess
# Mode maintenance
# sauf pour les ip du développeur
# ip de la box
RewriteCond	%{REMOTE_ADDR} !^xxx\.xxx\.xxx\.xxx
# ip locales
RewriteCond %{REMOTE_ADDR} !^::1
RewriteCond %{REMOTE_ADDR} !^127\.0\.0
# sauf pour le fichier maintenance.php
RewriteCond %{REQUEST_URI} !.*/maintenance.php [NC]
# sauf pour les css, puisque maintenance.php en utilise
RewriteCond %{REQUEST_URI} !.*/css/(.*) [NC]
# sauf pour les.png, puisque maintenance.php peut en utiliser
RewriteCond %{REQUEST_URI} !^(.*).png [NC]
# ********************************************************************

Pour activer le mode maintenance, il suffit de retirer le '#' qui se situe devant 'RewriteRule '. Il est important de faire une sauvegarde du fichier .htaccess avant toute modification même mineure. Toute erreur dans ce fichier à la syntaxe difficile met hors d'usage le site.

# ******************************************************************** extrait de .htaccess
# adapter les adresses de redirection à la configuration du site
#	**********	valider cette règle pour passer en maintenance	*********
#RewriteRule .* /utilities/maintenance.php [L]
#	*********************************************************************