Atelier template

Création de templates pour Joomla 1.6 Intervenant : Pierre Sempé Pseudo Joomla : Peter_P Le 19 avril 2011 Joomladay Alger

Travaille sur Joomla depuis 2005, principalement sur les templates. Actif sur le forum Joomla.fr depuis Mars 2007 Modérateur sur aide-joomla.com : aide et assistance pour le CMS joomla Qui suis-je ?

1- A quoi sert un Template ? 2- Quelle est son utilité ? 3- Quels sont les outils nécessaires ? 4- Les bases du HTML/CSS 5- De quoi se compose un Template ? 7- La construction du template 8- Les appels pour charger les modules 9- Template et layout override Fil conducteur

= Quelle est l’utilité d’un template? Tout simplement à séparer le FOND de la FORME !! Le fond : C'est toutes les données , le contenu de votre site (le noyau). La forme : Votre template codé en HTML, CSS, PHP, JAVASCRIPT

Le système de Template de joomla, est très utile ! Le designer ne touche pas au code php, et le programmeur ne touche pas au html. En cas de refonte de site, il est beaucoup plus facile de modifier le Template que le PHP.

Les outils nécessaires Feuille de papier millimétré, crayon, gomme, règle … Editeur de texte (Pspad, Notepad ++, dreamweaver , Scite, VI pour linux…) Editeur d’images (Photoshop, Photofiltre, Gimp …) Serveur local supportant le php5 (Serveur local 2Go, Wampserver, Xamp, Lamp …) Logiciel FTP (Fillezilla, LeechFtp, Smart ftp …)

Outils pour la création du template Frameworks – JAT3 Joomlart – Gantry Rockettheme – Grid 960s Test de navigateur – IETester – Browsershots.org Création automatique – Artisteer – Template builder Addons de navigateur – Webdeveloper – Firebug – F12 dans IE8

Un document HTML 4.0 comporte 2 parties, encadrées par des balises <HTML> et </HTML> : Un en-tête de déclaration (délimité par des balises <HEAD>) Le corps du document, dans lequel on placera le contenu de celui-ci (délimité par des balises <BODY>, ou bien par des balises <FRAMESET> dans le cas d'un document multi-frames). Les bases du HTML et du CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE> Bienvenue au JoomlaDay à Alger </TITLE> </HEAD> <BODY> <H1> Le Joomladay en Algérie </H1> <P> Lieu magique, le cyber park de Sidi Abdellah est aussi un lieu de communication important... </p> </BODY> </HTML> Les bases du HTML et du CSS

Il existe 2 types de balises HTML Balises de type bloc Balises de type en ligne Prend la largeur du conteneur. Peut prendre des valeurs de largeur et hauteur. Se glissent les uns sous les autres Prend la largeur du contenu. Ne peut pas prendre de valeurs de largeur et hauteur. Se glissent les uns a côté des autres

Les bases du CSS Balises de type bloc <div> Bloc <p> Paragraphe <ul> bloc de liste <li> liste

balises de type en ligne <a> ancre <span> Balise en ligne <input> Champ de formulaire

ID HTML : <p id="rouge">Ceci est un texte rouge</p> CSS : #rouge { color: red; } Un ID est unique sur la page, il est plus important qu'une Classe CLASSES HTML : <p class="rouge">Ceci est un texte rouge</p> <a class="rouge">Ceci est un lien rouge</a> CSS : .rouge { color: red; } Une classe est utilisée pour assigner un meme style à plusieurs éléments Les ID (#) et les CLASSES (.)

Un template est constitué d'un ensemble de fichiers et dossiers organisés de manière précise. Ouvrez un template existant pour vous en rendre compte : exemple le template atomic dans le répertoire des templates.

Fichier qui constitue la structure HTML du site Appelle les fichiers externes CSS Charge les données de Joomla! <jdoc:include type="modules" name=“left" style="xhtml" /> Index.php

Les appels pour charger les modules : le jdoc

L'appel Jdoc permet de charger les données depuis la base de données type="head" : charge l'entête du fichier (title, meta, etc...) type="modules" : charge les modules d'une position donnée type="component" : charge le composant principal de la page (article, page de contact, etc...) name="left" : indique le nom de la position de module a partir de laquelle charger les donnees. Charge tous les modules publies dans « left » style="xhtml" : Definit l'architecture HTML a utiliser pour afficher le module

L'installation du template L'ajout de paramètres dans l'administration du template La définition des positions du template A quoi sert Le fichier templatedetails.xml ?

Balises d'installation <extension version="1.6" type="template" client="site"> ………………… </extension>

Définition des positions <positions> <position>position-7</position> </positions> Ajout de fichiers de langue pour la traduction <languages folder="language"> <language tag="en-GB">en-GB/en-GB.tpl_beez_20.ini</language> <language tag="en-GB">en-GB/en-GB.tpl_beez_20.sys.ini</language> </languages>

Index.html Fichier vide qui évite qu'une personne puisse voir le contenu du dossier. Ce fichier doit être placé dans tous les dossiers du template pour assurer la sécurité du template. Son contenu <html> <body> </body> </html>

template_thumbnail.png Miniature de 200x150px pour la prévisualisation dans la liste des templates template_preview.png Grande miniature de 650x400 px pour la prévisualisation du template lorsque l'on clique dessus dans l'administration

C'est l'icone affichée dans la barre d'adresse du navigateur. On peut utiliser des convertisseurs gratuits comme Converticon pour transformer vos images en icône. Favicon.ico

Le dossier CSS contient tous les fichiers de styles CSS utilises pour le template. Ces fichiers sont appellés a partir du fichier 'index.php'. <link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> Le dossier images contient les images utilisées pour le template. CSS et images

La technique de template override consiste a remplacer les fichiers d'origine des composants et modules par des fichiers personnalises pour modifier la structure HTML du site. ● Fichier d'origine du module LOGIN modules/mod_login/tmpl/default.php ● Fichier d'override dans le template templates/[TEMPLATE]/html/mod_login/default.php Les modules et composants doivent etre codés selon le standard MVC de Joomla! pour que l'on puisse leur appliquer cette technique. Layout override

Bibliographie Ressources Wiki Joomla.org : http://docs.joomla.org/ Forum de Joomla : http://forum.joomla.fr Tutoriel de templates pour Joomla! 1.6 : http://tutoriels-joomla.joomlack.fr/tutoriels-joomla-16/tutoriels-de-template/tutoriel-creation-de-template-joomla-16.html Certaines informations ont été empruntées sur la Conférence de création de template animée par Cédric KEIFLIN au JoomlaDay de Lyon 2 et 3 avril 2011

Lexique Définition de certains termes Template : Un gabarit, souvent nommé en informatique Template ( anglicisme utilisé en informatique pour désigner un modèle de conception de logiciel ou de présentation des données) est un patron de mise en page où l'on place images et textes indépendamment du contenu. XML : ( Extensible Markup Language (en « langage extensible de balisage ») est un langage informatique de balisage générique . Il sert essentiellement à stocker/transférer des données de type texte Unicode structurées en champs arborescents. Ce langage est qualifié d' extensible car il permet à l'utilisateur de définir les balises des éléments. L'utilisateur peut multiplier les espaces de nommage des balises et emprunter les définitions d'autres utilisateurs

Lexique Cette création est mise à disposition selon le Contrat Paternité- Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France. Disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Toutes les marques déposées, oeuvres ou logos demeurent la propriété de leurs auteurs respectifs. CSS : Le langage CSS (Cascading Style Sheets : feuilles de style en cascade) est utilisé pour décrire la présentation d'un document structuré écrit en HTML ou en XML, et c'est le World Wide Web Consortium (W3C) qui en a la direction. HTML : Acronyme anglais de Langage de balisage hypertextuel. Langage de description textuel issu de SGML qui comporte des balises de formatage textuel et du contenu textuel brut afin de décrire du texte formaté. HTML est le langage source omniprésent qui sert à représenter les pages sur la toile, pages dites « Web ». À partir de HTML 4.0, le jeu de caractères de référence des données HTML est désormais l'ISO/CEI 10646. PHP : Personal Home Page. Un langage de scripts évolué pour la conception de sites entiers.

Lexique Cette création est mise à disposition selon le Contrat Paternité- Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France. Disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Toutes les marques déposées, oeuvres ou logos demeurent la propriété de leurs auteurs respectifs.

Atelier template

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Atelier template

Similar to Atelier template (20)

Atelier template

Editor's Notes