Template Joomla 1.5 Fr

  • Published on
    12-Jul-2015

  • View
    495

  • Download
    0

Embed Size (px)

Transcript

Template Joomla 1.5 Tutorial(Auteur : Harry M. North extrait du livre Joomla 1.5, A User's Guide. Version franaise : Marc Hron)

Le chapitre 9 de ce livre est dlivr sous Creative Commons et Non-commercial licence. Rfrez-vous http://creativecommons.org/licenses/by-nc-sa/2.5/ pour plus de dtails.

9Sommaire: 1 2 3 4 5 Crer un template Joomla 1.5 avec les CSS Cration d'un simple template vierge L'utilisation du CSS pour crer une mise en page sans table Raliser un vrai template Joomla 1.5 Template Joomla 1.5 avanc

1. Crer un template Joomla 1.5 avec les CSSDans ce chapitre, nous allons suivre les tapes de la cration d'un template Joomla. Concrtement, nous allons crer un template qui utilise les feuilles de style en cascade (CSS) pour produire une mise en page sans utiliser de tableaux. Ceci est un bon objectif, car il signifie que le code du template sera conforme au normes du World Wide Web Consortium (W3C). Il aura aussi tendance se charger plus vite, sera plus facile maintenir et sera mieux rfrenc par les moteurs de recherche. Ces questions sont examines en dtail plus loin dans le chapitre.

1.1 Qui y a t-il dans ce chapitre ? Qu'est-ce qu'un template Joomla ? Quelles fonctions sont exerces par un template Joomla, et quelle est la diffrence quand un template n'a pas de contenu par rapport au moment o le contenu est ajout dans le systme de gestion de contenu (CMS). Comment fonctionne le processus de conception localhost. En quoi diffre t'il d'une page web statique (X)HTML ? Quelles sont les implications d'un design sans table dans Joomla et la relation entre les normes W3C, l'ergonomie et l'accessibilit? Quels fichiers constituent un template Joomla, et quelles fonctions remplissent-ils ? Comment crer une source en 3 colonnes qui utilise le CSS plutt que des tables? Quels sont les styles CSS qui doivent tre utiliss avec Joomla, et quels sont les styles par dfaut qui sont utiliss par le noyau Joomla? Comment changer l'emplacement et le style des modules, et quelles sont les nouvelles techniques pour obtenir des coins arrondis? Quelle serait la manire simple de produire des menus en CSS qui imitent l'effet de ceux qui sont labores en JavaScript? Comment peut-on matriser l'affichage des colonnes en fonction de la prsence de contenu ou non ? Quelles sont les mesures appropries pour crer un vritable Template Joomla 1.5?

1.2 Qu'est-ce qu'un template Joomla?Un template est un ensemble de fichiers au sein du CMS Joomla qui contrlent la prsentation du contenu. Le template Joomla n'est pas un site. Le template est une partie ncessaire la conception de l'ensemble du site. Pour fabriquer le site web "complet", le template fonctionne de pair avec le contenu stock dans les bases de donnes Joomla. Un exemple de ceci peut tre vu dans la figure 9,1.

Figure 9,1: template avec ou sans contenu

Figure 9,1, partie A, le template est montr en fonctionnement avec les exemples de contenu. La partie B montre le template avec peu ou pas de contenu. Le template est conu de sorte que lorsque votre contenu est insr, il va hriter de la feuille de style dfinie dans le template, tels que les styles de liens, de menus, de navigation, de taille du texte et les couleurs pour en nommer que quelques uns.

Notez que les images associes au contenu (les photos des personnes) ne font pas partie du template, mais le header oui. En utilisant un template CMS, comme Joomla le fait, il y a un certain nombre d'avantages et d'inconvnients: Il existe une sparation entre le contenu et la prsentation, en particulier lorsque le programme est utilis pour la mise en page (par opposition des tables dans le fichier index.php). Ceci est l'un des principaux critres d'un site web qui rpond des normes modernes. Un nouveau template, et donc un tout nouveau look, peut tre appliqu instantanment. Cela peut mme tre des endroits diffrents (positionnement du contenu ainsi que les couleurs et les graphiques). Si diffrentes prsentations sont ncessaires pour un mme site, cela peut tre compliqu raliser. Bien que des templates diffrents peuvent tre appliqus des pages diffrentes, cette fonctionnalit built-in n'est pas fiable. Il est prfrable d'utiliser le PHP dans certaines conditions et de crer une mise en page qui ajuste dynamiquement le nombre de colonnes en fonction du contenu qui est publi. Le minimum savoir Les sites modernes ont un contenu distinct de la prsentation en utilisant une technique connue sous le nom de feuilles de style en cascade (CSS). Dans Joomla, le template contrle la prsentation du contenu.

1.3

Processus de conception en local

La page Web que vous voyez sur un site Joomla n'est pas statique. Cela veut dire qu'il est gnr dynamiquement par du contenu stock dans la base de donnes. La page que vous voyez est cr par le biais de diverses commandes PHP qui sont dans le template, ce qui prsente quelques difficults dans la phase de conception. Il est courant maintenant d'utiliser une interface WYSIWYG (?What you see is what you get?, ce que vous voyez est ce que vous obtenez ), c'est dire un diteur HTML tel que Dreamweaver. Cela signifie que le concepteur n'a mme pas besoin de code HTML. Cependant, ce n'est pas possible dans le processus de conception d'un template Joomla parce que les diteurs WYSIWYG ne peut pas afficher une page dynamique. Cela veut dire que le concepteur doit taper le code " la main" et afficher la page via un serveur PHP/MySQL. Avec une connexion assez rapidement cela pourrait tre un serveur Web, mais la plupart des concepteurs utilisent un serveur local sur leur propre ordinateur. Il s'agit de logiciel qui font office de serveurs Web sur l'ordinateur du concepteur tels que EasyPHP, MAMP, XAMP ou WAMP. Il n'existe pas de ?chemin tout trac? pour crer une page Web, cela dpend du concepteur. Ceux qui sont plus enclins aux graphisme font une ?image? de la page Web dans une application graphique comme Photoshop et ensuite dcoupe les images pour pouvoir les utiliser pour le Web (connu sous le nom de ?slice and dice?, morceler). Les concepteurs plus base sur la technique cherchent souvent coder directement. Toutefois, comme on vient d'tre mentionn, le concepteur de template Joomla est limit du fait qu'il ne peut pas voir instantanment le rsultat de son codage dans l'diteur. Le processus de conception est donc modifi comme suit: Effectuer des modifications dans l'diteur HTML, enregistrez les modifications. Avoir le serveur en local qui fonctionne en arrire-plan. Voir les modifications dans un navigateur Web. Retour l'tape 1.

Le minimum savoir Lors de la cration d'un template, vous devez disposer de Joomla sur un serveur ce qui vous permettre d'effectuer des changements et de rafrachir la page de sortie.

1.4

Options du serveur localhost

Prcdemment (chapitre 2), nous avons vu comment installer un serveur web qui fonctionne sur l'ordinateur. Nous avons crer un serveur web virtuel appel ?localhost? avec WAMP. Pour aller plus loin dans ce chapitre, vous allons avoir besoin de cette base. Si vous n'avez pas encore install de serveur, c'est le moment d'aller de l'avant et de l'installer. Je vais attendre ici. TUYAU Une technique utile pour rendre le processus de conception plus efficace est de servir une page web que vous tes en train de concevoir, puis copier et coller la source dans un diteur. Par exemple, une fois votre mise en page CSS mise en place, vous pouvez utiliser l'un de ces serveurs localhost pour signifier une page, puis afficher le code source de la page. Puis copier et coller le code source dans votre diteur Vous pouvez . dsormais facilement aller la page l'aide de style CSS et ne pas avoir passer par le cycle des tapes dcrites prcdemment. NOTE Un diteur gratuit XHTML Pour ceux qui ne sont pas en mesure de payer pour un diteur commercial, comme Dreamweaver, certains sont disponibles gratuitement. Nvu est un excellent choix, il a une validation intgr et est 100% open source. Cela signifie que toute personne est la bienvenue pour le tlcharger sans frais (http://www.nvu.com/download.html), y compris modifier le code source si vous avez besoin d'y apporter des changements !

1.5

W3C et design sans table

Ergonomie, accessibilit et optimisation pour les moteurs de recherche (SEO. ?Usability, accessibility, and search engine optimization?) sont les expressions utilises pour dcrire les pages Web de qualit sur l'Internet aujourd'hui. En ralit, il y a d'importante possibilit de ?liaison? entre l'ergonomie, l'accessibilit et le SEO. Une page web qui montre ces capacits grer l'une le fait pour les trois, voir la Figure 9,2. Le moyen le plus facile pour atteindre ces trois objectifs est de suivre le cadre dfini par le World Wide Web Consortium (W3C) et les standards du Web. Par exemple, un site qui est structur smantiquement en XHTML (voir la diffrence entre XHTML et HTML) sera lue aisment par l'intermdiaire d'un lecteur spcifique aux malvoyants. Il sera galement lue aisment par un moteur de recherche (spider). Google est effectivement aveugle dans sa manire de lire votre site Web, c'est comme s'il utilisait un lecteur d'cran pour malvoyant.

Figure 9,2 : Les interactions entre l'ergonomie, l'accessibilit et le SEO

Les standards du Web ont mis en place un ensemble de "rgles" pour tous les navigateurs Web.La principale organisation soutenir ces normes est le World Wide Web Consortium (WC3), dont le directeur, Tim BernersLee, a invent le Web en 1989. Pour vous aider comprendre d'o proviennent les standards du web, une histoire peut tre utile. De nombreuses pages web sont en fait conus pour les anciennes versions des navigateurs. Pourquoi? Les navigateurs ont continuellement volu depuis que le World Wide Web a commenc. De nouveaux sont apparus, et les plus anciens ont disparu (Vous souvenez-vous de Netscape?). Les standards courants du W3C servent (nous l'esprons)