Templates Joomla! 2.5

Présentation

Création de templates Joomla!

Par Cédric KEIFLINEt Vincent MorelLe 24 mars 2012

Joomladay de Strasbourg

Présentation● Vincent MOREL alias cb75ter● Modérateur sur le forum joomla.fr● Co-fondateur d'une agence web et intégra-

teur xhtml/css● Spécialisé depuis 2005 dans l'intégration

sur mesure de templates pour Joomla!● Chargé de cours sur Joomla à l'université

de Béziers

Présentation● Cédric KEIFLIN alias ced1870● Modérateur sur le forum joomla.fr● Adepte de Joomla! depuis début 2008● Créateur du site http://www.joomlack.fr● Rédacteur de documentations et tutoriels● Développeur du module Maximenu CK et

de Template Creator CK

Plan de la présentation

Quelle solution adopter pour créer son template ?

● Commencer son template : définir le besoin● Présentation des outils et des méthodes

possibles● Bilan comparatif

Définition du besoinIl faut définir le besoin pour savoir vers quelle solution s'orienter

● J'ai un graphisme à respecter ?Oui : il faut choisir une méthode capable de le reproduireNon : On peut utiliser n'importe quelle solution

Définition du besoin● J'ai des notions de codage HTML / CSS ?

Oui : si on a un graphisme à respecter alors on privilégie un système dont on peut modifier le code source généréNon : on utilisera un outil de création automatique

Définition du besoin● J'ai du temps pour faire mon template ?

Oui : on peut l'utiliser pour se perfectionner aux techniques CSS Non : On utilisera un outil de création automatique

Définition du besoin● J'ai besoin de réutiliser mon travail ?

Oui : certains outils ou le codage à la main le permettentNon : on peut utiliser n'importe quel outil

Définition du besoin● Graphisme + notions HTML/CSS + temps +

répétabilité>> On se rapproche d'une solution de codage à la main

● Si pas de notions HTML/CSS ni de temps>> On utilise un outil pour créer un template tout fait

Les différents outils● Artisteer● Frameworks (gantry, T3, warp, etc...)● Template Creator CK● Codage à la main

Artisteer● Artisteer est un logiciel qui s'installe sur

Windows ou Mac● Il permet de créer des templates

installables très facilement sans connaissance en codage

Artisteer - Aperçu

Artisteer● Avantages :

– Très simple d'utilisation– Interface complète et prévisualisation

instantanée– De nombreux styles prédéfinis à

sélectionner d'un seul clic– Génère un template à installer sur

n'importe quel site Joomla!

Artisteer● Inconvénients

– Manque parfois de flexibilité– Code source des templates complexe– Pas de version mobile

Les frameworks● Un framework est un template préconfiguré

qui embarque de multiples options● Il s'installe dans Joomla comme un

template● La plupart des gros développeurs de

templates professionnels ont le leur (Rockettheme, Yootheme, Joomlart, etc...)

Les frameworks● Rockettheme : Gantry● Yootheme : Warp● Joomlart : T3● Youjoomla : Yougrids● Shape 5 : Vertex

Framework gantry - Aperçu

Les frameworks● Avantages

– Compression css et javascript– Intègrent un megamenu déroulant– Nombreuses positions de modules

paramétrables (en largeur/répartition)– Compatibilité mobile

Les frameworks● Inconvénients

– On ne peut pas exporter le template pour l'installer sur un autre site

– Rigidité dans la structure HTML, il faut faire avec les positions existantes

– Code source très complexe

Template Creator CK● Template Creator CK est un composant

Joomla! 2.5● Il s'installe dans Joomla comme une

extension● Il crée des templates installables sans

nécessiter beaucoup de connaissances en CSS

Template Creator CK - Aperçu

Template Creator CK● Avantages

– Structure HTML personnalisée– Possibilité d'exporter et réutiliser les

templates– Code source très simple (identique à un

codage manuel)– N'embarque pas de javascript

Template Creator CK● Inconvénients

– Pas de version mobile du template– Nécessite un peu de connaissances dans

Joomla– Peu de templates d'exemples pour l'instant

Codage à la main● Le codage à la main est la méthode la plus

expérimentée● On peut utiliser un éditeur de texte comme

Notepad++ ou un IDE comme Eclipse ou NetBeans

Codage à la main● Avantages

– Aucune limite à la créativité– Travail réutilisable– 100% adapté au besoin

Codage à la main● Inconvénients

– Nécessite des compétences et des connaissances en codage HTML / CSS

– Plus long à mettre en oeuvre

Bilan comparatif - fonctionnalités

Artisteer Frameworks Template Creator CK

Codage à la main

Simplicité d'utilisation *** *** *** *Design sur mesure ** * ** ***Légèreté du code source * * *** ***Répétabilité *** * *** ***Compatibilité mobile - *** - *

Ressources● Wiki Joomla.org : http://docs.joomla.org/● Sur http://www.joomlack.fr :

– Tutoriel template Joomla! 1.5– Tutoriel template Joomla! 1.6 – 2.5– Ebooks sur la création de templates 1.5 ou 1.6 - 2.5

● Sur http://forum.joomla.fr/ :– Aide en ligne, suggestions, résolution de problème

● Twitter : http://twitter.com/ced1870