joomla!

3. La mise en page

Thank you for your contribution: 

Flexible Boxes – next-generation CSS designed to create layoutsEn design pour le web, lorsque l’on parle d’agencement ou de rendu, cela signifie généralement la mise en page. C’est en fait une part du travail graphique traitant de l’organisation et du traitement du style des éléments (le contenu) d’une page. Un système de gestion de contenu tel que Joomla! peut représenter des milliers de pages (voire plus) à traiter et il est très important de penser à une organisation dans la disposition des éléments de contenu qui soit lisible et ce, quelque soit le type d’écran.

L’agencement d’une page est facile à esquisser sur papier ou par l’utilisation d’un logiciel de mise en page.

La plus grosse difficulté réside dans la transformation de la mise en page planifiée en langage HTML/CSS et son intégration dans Joomla!.

Joomla! utilisait des mises en page basées sur des tableaux HTML. Ils sont simples à créer, ils fonctionnent correctement dans 80% des cas, mais d’un point de vue sémantique, il reste incorrecte d’utiliser des tableaux HTML pour la mise en forme d’une page. Les tableaux HTML ne devraient être utilisés que dans le cas de rendu de données nécessitant naturellement une grille, comme dans un tableur par exemple. Le tableau périodique est un bon exemple d'une utilisation correcte de tableaux HTML.

Il y a de cela quelques années maintenant, de nombreuses discussions ont été animées sur le thème : "Tableaux vs. Mises en forme CSS" (Tables: The Next Evolution in CSS Layout).

Par nature, la mise en page est une tâche compliquée, tout simplement parce que c’est du design !

L’utilisation de feuilles de styles en cascade (CSS pour Cascading Style Sheets) est plus difficile que celle de tableaux HTML simplement parce qu’elles offrent un très vaste panel de possibilités pour mettre en forme votre contenu. Pour avoir une idée du travail avec des CSS, je vous invite à consulter avec attention ce site : Apprendre les mises en page CSS.

Les Frameworks (cadriciels)

(NDT : le terme Framework est très largement utilisé dans l’univers du web, y compris en langue française. De nombreuses tentatives de traductions ont été réalisées pour aboutir à des termes tels que cadriciel, cadre, structure, patron, canevas et tant d’autres… Pour notre part, nous conserverons volontairement le terme de Framework, universellement usité et reconnu.)

Si une tâche est compliquée à réaliser, il y aura toujours quelqu’un pour créer un framework afin de la simplifier. Les sociétés qui fournissent des templates pour les différents systèmes de gestion de contenu s’appuient toujours sur des frameworks afin de simplifier et de gagner du temps dans leur travail de développement. Ainsi, dans l’univers Joomla!, différents frameworks sont apparus (Gantry, T3, Warp, Phoca) mais sont la plupart du temps étroitement liés aux produits spécifiques que proposent ces sociétés. Il existe cependant des frameworks indépendants mais qui restent tout de même liés à Joomla!. (Construct, Morph).

Indépendamment des systèmes de gestions de contenu, des frameworks encore plus généralistes sont apparus comme Foundation, Bootstrap, et Skeleton, pour ne citer qu’eux.

Section: 
Freetags: 

2. Les dossiers et fichiers

Thank you for your contribution: 

Template FoldersTout au long de ce chapitre, nous allons commencer la découverte des bases techniques d’un Template de site (frontend) pour Joomla!3. Les dossiers et fichiers doivent en effet être organisés selon une structure définie et spécifique que nous allons créer ensemble. Pour la création d’un nouveau template, trois options sont envisageables. Nous pouvons commencer à partir de zéro en créant nos propres dossiers de template et en y intégrant l’ensemble des fichiers nécessaires. Nous pouvons également installer un template de base et le modifier. Enfin, nous pouvons créer une copie d’un template existant pour le modifier. Ici, nous allons opter pour la première solution en essayant de la simplifier au maximum.
L'objectif de ce chapitre sera de bien comprendre la structure même d’un template Joomla!.

Le nom de Template

La première chose à faire : donner un nom à votre Template. Le nom est constitué d'un nom technique, certes, mais également d'une description. Le nom technique apparaîtra dans les fichiers XML, les noms de dossier, les bases de données, les fichiers systèmes du serveur web et différents caches. Même si cela est techniquement possible, il est toujours préférable d’éviter les caractères spéciaux et les espaces dans le nom.
Dans notre cas, je vais donner à mon Template le nom technique de j3cocoate. La description pourra être plus longue comme par exemple : "Joomla! 3 - cocoate Template".

Section: 
Freetags: 

1. Qu’est-ce qu’un Template ?

Thank you for your contribution: 

FRChapter1-Figure0

Vous ne vous en étiez peut être jamais rendu compte mais lorsque vous écrivez avec un stylo, vous êtes également en train de "développer" votre propre écriture. Cette écriture est un savant mélange entre votre contenu et la présentation de ce même contenu. En fonction de différents critères, comme le type de stylo, de papier, de couleur, la vitesse d’écriture et quelques autres encore, votre écriture va plaire aux lecteurs (ou non :)).

Au cours des siècles et avec l'invention de l'imprimerie, différentes méthodes et règles ont été élaborées et mises en œuvre afin de produire le "livre parfait".

Le World Wide Web, avec ses milliards de sites, reste relativement jeune et le développement de méthodes et règles similaires pour la réalisation d'un "site parfait" n’en est qu’à ses débuts.

Avant de débuter notre aventure dont l’objet porte sur les Templates pour Joomla!, jetons un œil à la situation actuelle.

Section: 
Freetags: 

Joomla! 3 – Un Template en partant de zéro

Thank you for your contribution: 

Le Template constitue la partie visible, et ainsi l'une des plus importantes de votre site Joomla!. Un template, c'est de la créativité, de l'art, beaucoup de code et il devra favoriser le lien entre le contenu de votre base de données et le ressenti de vos visiteurs.

Ce livre est principalement destiné aux débutants à qui je vais proposer la création d'un template pour Joomla! 3, en partant de zéro...

Section: 
Freetags: 

E-Commerce avec VirtueMart 2

L'extension de e-commerce VirtueMart pour Joomla! a été installée plus de 250 000 fois à travers le monde.

Avec la version 2 de l'extension VirtueMart, le logiciel a atteint un nouveau niveau de qualité.

Ce livre vous propose une introduction à VirtueMart.

Language: 
Français (French)
Published: 
2013-08-01
Publisher: 
cocoate.com, France
Type of product: 
Livre
Our work: 
Technical proof reading
PDF: 
vm2fr.pdf (569)
Section: 

10. Les groupes de clients

Thank you for your contribution: 

groupLes personnes qui visitent votre boutique en ligne peuvent être soit des visiteurs soit des utilisateurs enregistrés. En fonction de votre configuration Joomla!, ils sont à même de créer un compte utilisateur sans pour autant avoir l'obligation d'acheter un produit.

Généralement, après avoir acheté leur premier produit, les visiteurs ont la qualité d’utilisateurs enregistrés sur votre site.

Avec VirtueMart, vous pouvez également créer des groupes de clients et les assigner aux différents utilisateurs enregistrés.

Au sein de ces groupes de clients, vous aurez la possibilité de proposer des produits et/ou des prix différents en fonction des utilisateurs.

Section: 
Freetags: 

9. Des boutiques Multilingues

Thank you for your contribution: 

MultilinguaDans ce chapitre, nous allons encore améliorer notre boutique VirtueMart2 en la rendant multilingue. L'objectif est de pouvoir proposer vos produits dans différentes langues. Lorsque les visiteurs accèdent à la version anglaise d'un produit, ils doivent être en mesure de basculer, d’un simple clic sur un drapeau ou une option de menu, sur la présentation de ce même produit dans une des autres langues disponibles du site.

La bonne nouvelle est que, dans la plupart des cas, cela est tout à fait possible, relativement simple à mettre en œuvre et qu’il ne sera pas nécessaire d'acheter des extensions complémentaires pour pouvoir le faire. Il est tout à fait possible de traduire l’ensemble de vos produits, vos catégories, vos fournisseurs et également de mettre en place des tarifications, des règles de taxes, des méthodes de paiement et de livraison en fonction de la langue/pays de votre client.

Avant de commencer, il est naturellement nécessaire de définir les langues que vous souhaitez utiliser.

Section: 
Freetags: 

8. Commentaires & Evaluations

Thank you for your contribution: 

RatingVos visiteurs s'attendent à ce que votre boutique fonctionne techniquement aussi bien que celle d’Amazon et ce, même s'ils savent que vous êtes une petite entreprise.

Un bon moyen de rendre votre site unique est d'ajouter la possibilité de commenter et d’évaluer les produits. Les avis donnés sur les produits, et même ceux qui pourraient s'avérer négatifs, sont des atouts pour votre commerce…

Les clients veulent s'assurer d’obtenir le meilleur rapport qualité/prix. A la lecture des avis, ils seront à même de se faire une opinion sur tel ou tel produit, et prendre la décision immédiate d'acheter sur votre site.

C'est également un excellent moyen de créer un réseau de clients fidèles et d’en faire participer de nouveaux. Les avis sur un produit permettent "d’humaniser" la transaction en présentant au client des raisons plus personnelles d'acheter un produit plutôt qu'un autre, et surtout lorsqu’il hésite entre des options sur deux sites différents. Si votre site propose plus d'informations et notamment des avis et notes sur le produit, le client sera plus susceptible de faire ses achats sur votre site plutôt que sur un autre qui ne disposera pas de ces informations.

Section: 
Freetags: