Atelier template
29
Création de templates pour Joomla 1.6 Intervenant : Pierre Sempé Pseudo Joomla : Peter_P Le 19 avril 2011 Joomladay Alger
-
Upload
pierre-sempe -
Category
Design
-
view
3.507 -
download
0
description
Conférence sur les templates au JoomlaDay à Alger le 19/4/2011
Transcript of 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/CSS5- De quoi se compose un Template ? 7- La construction du template8- Les appels pour charger les modules9- 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écessairesFeuille 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 templateFrameworks– 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 basede 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 lapage (article, page de contact, etc...)
name="left" : indique le nom de la position de modulea partir de laquelle charger les donnees. Charge tous lesmodules publies dans « left »
style="xhtml" : Definit l'architecture HTML a utiliser pourafficher 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 contenudu 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.pngMiniature de 200x150px pour la prévisualisation dans laliste des templates
template_preview.pngGrande miniature de 650x400 px pour la prévisualisationdu template lorsque l'on clique dessus dans l'administration
C'est l'icone affichée dans la barre d'adresse dunavigateur.
On peut utiliser des convertisseurs gratuitscomme Converticon pour transformer vos images enicône.
Favicon.ico
Le dossier CSScontient tous les fichiers de styles CSS utilises pour letemplate. 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 imagescontient les images utilisées pour le template.
CSS et images
La technique de template override consiste a remplacer lesfichiers 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
BibliographieRessources
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
LexiqueDé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.
