mercredi 15 février 2012

Personnalisez votre template

Dans cette étape, nous allons faire ce que j’appelle une sauvegarde des fichiers de votre site internet.
Cela est réalisable très facilement à l’aide du client FTP FileZilla.
Nous avons déjà vu comment utiliser le logiciel FileZilla lors de l’installation de Joomla 2.5

Comme tout ce qui touche les transferts de fichiers, il est nécessaire d’avoir un minimum de rigueur, aussi je vous demanderai de créer un répertoire sur le disque dur de votre ordinateur. Vous donnerez à ce répertoire le nom de votre site internet et à l’intérieur de ce répertoire, vous allez créer un sous-répertoire qui aura pour nom la date du jour.

Voici ce que ça donne pour moi



Lancez FileZilla, ouvrez le gestionnaire de sites, sélectionnez le site en question (s’il n’est pas déjà sélectionné), cliquez sur le bouton Connexion.




Vous devez avoir à gauche le répertoire vide (de votre ordinateur) qui va contenir votre sauvegarde, et à droite les répertoires qui contiennent les fichiers de votre site internet (chez l’hébergeur OVH).


Sélectionnez le 1er dossier (ou n’importe quel dossier) sur le site distant (côté serveur), puis appuyez sur les touches Ctrl-a afin de les sélectionner tous.
Avec la souris, vous allez effectuer le mouvement de glisser les dossiers sélectionnés de la droite vers la gauche (du serveur vers votre ordinateur).


Il faut environ 10 minutes pour que la copie des fichiers soit terminée.




Une fois la copie terminée, vous pouvez vous déconnecter du serveur (cliquez sur la croix rouge).



Il est important d’avoir plusieurs jeux de sauvegarde des fichiers (et aussi de la base de données).
Le fait de donner comme nom de dossier la date du jour sous la forme jj-mm-aaaa (jour, mois, année séparés pars des tirets) vous permettra de savoir exactement de quand date vos sauvegardes.
Lorsque vous site internet se sera fait piraté (hacké), ou pour une toute autre raison, il suffira d’écraser les fichiers qui sont sur le serveur par ceux que vous aurez sauvegardés. Si vous devez remonter dans le temps, il suffira de prendre une version plus ancienne de votre site internet.
Le principe que j’ai adopté est de faire une sauvegarde des fichiers et de la base de données avant toute modification importante d’un site ou lorsque j’ai beaucoup travaillé sur le site.

Les fichiers contiennent l’aspect extérieur du site (le contenant) alors que la base de données contient l’intérieur du site (le contenu). Nous verrons la sauvegarde et la restauration de la base de données chez OVH ultérieurement. Mais si vous le souhaitez, vous pouvez jeter un œil sur le tutorial que j’ai consacré à OVH : http://tuto-ovh.blogspot.com


Avant d’aller plus loin, je vous conseille de vérifier qu’il n’y ait pas une possibilité de personnalisation de votre template déjà prévue. Il faut pour cela, allez dans ExtensionsGestion des templates.


 Cliquez ou éditez votre template afin de voir si une personnalisation a été prévue.



 En ce qui concerne le template que j’ai choisi, rien n’a été prévue.


Examinons le template que vous avez choisi (je vais examiner le mien et vous, vous devez examiner le vôtre). Pour cela, allons sur le site internet (appelé front-office ou frontend = ce que voient les internautes).

Je vais ci-dessous afficher une copie d’écran du site internet sur lequel je travaille. Même si votre site internet est différent du mien (template différent), on va quand même retrouver des similitudes. Ce sont ces similitudes que je vous demande d’examiner.
Par conséquent, observez attentivement la géographie (l’espace) de votre site internet afin de voir ce qu’on pourrait apporter comme modifications.
Ceci étant, si vous devez apporter beaucoup de modifications à votre site internet, autant changer de template de suite et en prendre un qui soit plus adapté au rendu final que vous escomptez.


Pour information, afin de pouvoir récupérer l’intégralité du site internet, il m’a fallu dézoomer (diminuer) l’affichage de mon navigateur internet. Pour ceux qui l’ignorent, en appuyant sur les touches Ctrl + on augmente l’affichage du navigateur (zoom – idéal pour les malvoyants) et en appuyant sur les touches Ctrl – on diminue l’affichage du navigateur (pratique pour voir l’intégralité d’un site internet).




En examinant le site internet ci-dessus, on constate que le nom du site internet ou le logo se situe en haut à gauche (c’est la première chose que l’œil humain repère). Le haut d’un site internet s’appelle l’entête ou header en anglais. On peut y placer une image, généralement un bandeau que celui-ci soit un jpeg, un diaporama de photos ou un objet flash.


A l’inverse, le bas du site internet (pied de page ou footer en anglais) est la dernière chose que l’œil humain verra sur un site internet. Généralement, on y place le copyright et des liens vers des partenaires ou les crédits (ceux qui ont participé à l’élaboration du site).


Il y a certaines dispositions classiques pour les sites internet : le contenu dans la colonne du milieu + une petite colonne à gauche et une colonne à droite. Ici, nous avons une grande colonne pour les articles + une petite colonne à droite pour les menus.
Certains templates possèdent 2 petites colonnes à gauche ou 2 petites colonnes à droite. Il existe même des templates qui ont des caractéristiques peu communes pour un site internet. Mais pour la démonstration, j’ai préféré choisir un template assez classique.


J’ai signalé que nous avons une petite colonne à droite, celle-ci contient des menus ainsi qu’un module de connexion. En langage Joomla, on appelle ça des modules (un menu est aussi un module) et les modules se trouvent dans la partie Extensions.


Il reste encore un détail sur la copie d’écran du site internet que j’ai choisi de vous montrer. Il existe un menu juste en dessous du header (haut de page). Ce menu est appelé généralement menu du haut ou menu top.


Vous avez peut être remarqué que le haut de l’article est un diaporama de 3 photos. Il peut s’agir d’un module type slideshow intégré dans un article par le plugin loadmodule mais comme il se répète dans tous les articles du site et que les articles contenus sur la page d’accueil ne contiennent pas ce module, on peut en déduire que le slide (diaporama) est intégré directement en dur dans le code PHP. Effectivement l’examen du fichier index.php nous montre les lignes suivantes :


Un examen avec le module complémentaire Firebug sur Firefox m’avait déjà montré qu’il s’agissait d’un slideshow mais en tant que développeur, je ne l’aurai jamais intégré en dur dans le code PHP alors qu’il est si simple de l’ajouter au cas par cas par l’intégration d’un module dans les articles voulus.


Nous nous trouvons donc dans une alternative, on conserve ce template que je trouve imparfait, ou on le conserve en le modifiant. Si on conserve ce template, doit-on conserver le slide en modifiant simplement les photos : slide1.jpg, slide2.jpg et slide3.jpg qui se trouvent dans le dossier  templates/classicdark/images/



A ce stade là, vous vous demandez peut être comment j’ai su où se trouvait les 3 photos du diaporama ?
Il y a 2 méthodes très simples. La première étant de faire un clic droit sur l’image, puis cliquer sur Afficher l’image ou Informations sur l’image.



En cliquant sur Informations sur l’image, vous aurez encore plus d’informations comme le poids (ce qu’ils appellent la taille) mais surtout les dimensions de l’image, ce qui sera utile pour remplacer les 3 images par les vôtres (de même dimensions).



La deuxième méthode étant d’utiliser le module complémentaire Firebug sur le navigateur Firefox et de pointer l’image que l’on veut examiner. Le code source apparait sur l’écran du bas et nous montre ci-dessous où se trouve l’image. En attendant quelques secondes les 3 images défilent sur l’écran et le code correspondant aussi.



J’ai décidé de modifier le template afin de supprimer ce slide qui occupe le haut de tous les articles de ce site. Avec Firebug, ça l’air très facile, il suffit de supprimer la div slide.



J’ai supprimé  les lignes PHP concernant le slide ainsi que le code JavaScript dans le fichier index.php mais j’ai dû aussi modifier le fichier tdefaut.css dans le répertoire css du template parce que la marge du haut était trop importante. J’ai mis margin-top à 0 pixels au lieu de 30.
C’est là qu’on s’aperçoit qu’il vaut mieux connaître un minimum de PHP et de CSS et aussi le HTML pour pouvoir apporter des corrections à un template.


Afin de modifier des fichiers PHP et des fichiers CSS, il vous faut un éditeur HTML type Dreamweaver (payant) ou Notepad++ (gratuit). Si vous n’avez pas déjà ce type de logiciel vous pouvez utiliser le Bloc-notes de Windows ou télécharger gratuitement Notepad++, Amaya, KompoZer ou Eclipse sur la page : www.annuairedelafrance.net/informatique_logiciels_gratuits.php  


Afin de voir ce que donnent les modifications que j’ai apportées, je dois envoyer les fichiers modifiés par FTP (FileZilla) sur le serveur. Pour pouvoir revenir sur l’ancienne version de mon fichier index.php, je le renomme en index2.php ou _index.php. Quand je ne fais qu’une modification je choisi de mettre un _ (underscore) devant le nom du fichier mais quand je fais plusieurs modifications sur un même fichier, je préfère lui ajouter un chiffre à la fin du nom (voir copie d’écran ci-dessus). Ainsi vous pouvez modifier sans crainte. En cas d’erreur, il suffit d’effacer le dernier fichier modifié sur le serveur (exemple index.php) et de renommer le fichier renommé précédemment (index1.php ou _index.php) en index.php et le site reprend son aspect d’origine.


Je fais de même pour le fichier CSS que je viens de modifier.
Si vous avez modifié d’autres fichiers du template, vous devez bien sûr les copier également sur le serveur, mais assurez-vous d’en avoir gardé une copie de l’original au cas ou vous devriez restaurer l’ancienne version.


Quand je modifie des lignes dans un fichier CSS (feuilles de style), j’ai l’habitude de recopier la ligne que je vais modifier puis je la neutralise en plaçant le symbole de commentaire au début et à la fin de la ligne : /* et */
Quand les adhérents de mon association (CUMPS.org) ne savent pas modifier les fichiers PHP et CSS, je le fais pour eux.


En regardant le haut du site (header), on voit clairement 2 images : le mot Classic et un livre. Pour nous en assurer et connaître le nom, le format et l’emplacement de ces images, il suffit de faire un clic droit dessus.


Une fois que j’ai fait un clic droit, je choisi « Afficher l’image ».


Cela me permet de savoir qu’il s’agit d’un fichier png (image ayant un fond transparent) appelé logo.png et ce fichier est situé dans le répertoire images. Il me suffit alors de créer un autre fichier png de la même taille avec un fond transparent et le copier à la place de  l’autre. Ce que je vais faire maintenant à l’aide d’un logiciel de traitement d’images comme Photoshop, Gimp ou Paint.Net.
Si vous n’avez pas l’un de ces logiciels, téléchargez-en un gratuitement ici :
www.annuairedelafrance.net/informatique_logiciels_gratuits.php


Afin de réussir le png, ajoutez un calque avec un fond d’une couleur foncée qui se détache bien des autres couleurs des calques et placez ce calque en bas des calques. Vous pouvez récupérer les codes couleurs avec la pipette et n’oubliez pas de sauvegarder le fichier au format PNG 24 avec transparence. Puis placez le sur le serveur dans le répertoire images à la place de l’ancien fichier que vous aurez pris soin de renommer afin d’en conserver une copie.



En faisant un clic droit sur la seconde image, je connais le nom de l’image, son format ainsi que l’endroit où elle se trouve. Il ne me reste plus qu’à y apporter quelques modifications.


Une fois l’image modifiée, je la copie par FTP afin qu’elle remplace l’ancienne image (que je renomme afin de la conserver au cas où je voudrais m’en servir à nouveau).

Ci-dessous, une copie d’écran du haut du site avec les modifications sur les images.




Maintenant, il est souhaitable de modifier le bas de page (footer).





Si vous sélectionnez le texte avec la souris, vous voyez bien qu’il s’agit d’un texte et non d’une image.


L’analyse avec Firebug nous donne des informations encore plus précises comme la balise <div> qui englobe les textes ainsi que les liens. On peut donc chercher le fichier index.php ou footer.php qui contient ces informations ou demander à notre éditeur HTML (Dreamweaver, NotePad++, etc.) de le chercher pour nous.


Dans mon template, c’est facile, la partie qui m’intéresse se trouve à la fin du fichier index.php.





Au final j’ai modifié aussi le fichier template.php. Ce dernier fichier était intégré au fichier index.php par la fonction require : <?php require("template.php"); ?>
Dans ce dernier fichier, j’ai modifié la variable $gt avant de l’afficher avec la fonction echo.




Maintenant que j’ai personnalisé le template (le contenant), je peux passer aux articles (catégories et menus), mais il me reste une dernière chose à faire, modifier le fichier error.php du template afin d’éviter l’écran suivant :


Quand il n’y a pas de fichier error.php dans le template par défaut (ce qui est le cas ici), c’est dans le template system qu’il faut aller chercher le fichier error.php.


Vous allez ajouter 2 lignes juste après < ?php
La première ligne PHP permet de rediriger le fichier vers l’url de la page d’accueil de votre site.
La deuxième ligne est une fonction qui demande au navigateur de sortir du fichier sans interpréter les instructions suivantes.


Bien sûr, comme après chaque modification sur un fichier en local (sur votre ordinateur), vous devez le copier sur le serveur (votre hébergeur).

Ainsi désormais, quoi que l’internaute puisse taper après l’url de mon site, il retombera toujours sur la page d’accueil de mon site et non sur une page manquante.

Quand je teste un site internet, j’ajoute toujours des lettres et des points après l’url du site pour voir si les pages d’erreur sont gérées et quand ce n’est pas le cas (ce qui arrive souvent), je sais que le travail de l’agence web a été mal fait et que les pirates pourront pénétrer facilement sur le site en question.
Mon propos n’est pas ici de dévoiler les techniques pour hacker (pirater un site internet) mais la plupart des sites que je vois sur internet sont très facilement piratables mais il vrai que la sécurité n’est pas le point fort des agences de développement de sites internet.

... la suite disponible dans mon dernier livre ...

Aucun commentaire:

Enregistrer un commentaire