Il nous est arrivé de choisir des templates, des extensions pour un projet Joomla et de commencer à construire notre site. En ajoutant ces extensions lors du développement en local, le chargement et les performances du site ne semblent pas être un problème.
Lorsque le site est déménagé sur un serveur et après avoir investi plus d'une 100 d'heures, il est souvent difficile de supprimer des extensions ou réduire des fonctionnalités pour améliorer les performances du site.
C'est l'histoire de la plupart des personnes qui demandent de l'aide professionnelle pour optimiser leurs sites.
Voici la procédure à suivre pour intégrer une animation Adobe Edge dans un site Joomla
Tout d’abord installer le plugin Sourcerer de NoNumber qui va permettre d’insérer le script dans la balise <head>
de notre article.
Pour rappel Joomla ne permet pas de le faire nativement.
Ensuite une fois que notre animation est publiée avec Edge, il suffit de prendre l’entièreté du dossier et le placer à la racine du site (et non à la racine de notre template).
Voici à quoi ressemble un dossier Edge publié:
Le fichier html généré peut être mis à la poubelle, car on ira le coller en partie dans un article Joomla.
Voici à quoi ressemble le fichier html généré par Edge, rien de bien compliqué:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="/nom-du-projet_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-124939132 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-124939132">
</div>
</body>
</html>
Il nous suffit de copier les balises <script>
et <style>
et d’aller les coller dans l’entête de notre article entre les balises {source}{/source} grâce au plug-in Sourcerer installé préalablement.
Petite remarque: l'adresse du script doit avoir un lien absolu, ce qui nous donnera une adresse du style:<script type="text/javascript" charset="utf-8" src="http://www.votre-site.com/projet-edge/nom-du-projet_edgePreload.js"></script>
Autre chose importante: afin que JCE ne rende pas les liens absolus en liens relatifs il faut décocher la validation HTML dans JCE Administration/Panneau de contrôle/Configuration globale
Ensuite il ne faut pas oublier d'aller copier la balise<div><div id="Stage" class="EDGE-124939132"></div>
dans le corps de notre article. Pour cela il est nécessaire de passer en mode code dans l'interface de JCE.
Les deux autres fichiers qui doivent être édités sont les suivants:
nom-du-projet_edge.js
nom-du-projet_edgePreload.js
Bon là ça va être un peu compliqué pour les afficher puisqu'ils sont minifiés (pour ceux qui ne le savent pas, minifier = supprimer tous les espaces et sauts de lignes superflus qui sont autant de données inutiles que l’on télécharge), pour cela il existe un service sur le web pour les déminifier http://jsbeautifier.org, il suffit de coller le code et d'appuyer sur le bouton prévu à cet effet pour déminifier.
Dans le sens inverse c'est ici: http://www.jsmini.com
Concernant le fichier nom-du-projet_edge.js on cherche la variablevar im = image/
et on la remplace avec l'adresse absolue du dossier image qui se trouve dans le dossier du projet Edge, on a donc ceci:var im = 'http://www.votre-site.com/projet-edge/images/';
On enregistre est c'est fait.
Vous pouvez ne pas passer par une déminification, mais alors il faudra vous procurer des lunettes...
Concernant le fichier nom-du-projet_edge.js les lignes à changer se trouvent à la fin du charabia, vous pouvez ici aussi passer ou non par une deminification.
On cherche les lignes suivantes:aLoader = [{
load: "edge_includes/jquery-1.7.1.min.js"
}, {
load: "edge_includes/edge.2.0.0.min.js"
}, {
load: "nom-du-projet_edge.js"
}, {
load: "nom-du-projet_edgeActions.js"
}];
et on les remplace comme auparavant avec les liens absolus de notre dossier du projet Edge qui se trouve à la racine de notre site, ce qui donne ceci:aLoader = [{
load: "http://www.votre-site.com/projet-edge/edge_includes/jquery-1.7.1.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/edge_includes/edge.2.0.0.min.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edge.js"
}, {
load: "http://www.votre-site.com/projet-edge/nom-du-projet_edgeActions.js"
}];
Concernant la méthode avec l'iframe, il n'y a rien de bien compliqué, on place le dossier du projet Edge à la racine du site comme on l'a fait auparavant et on place la balise <iframe>
dans notre article Joomla, ici pas besoin de lien absolu:
<iframe src="/projet-test-animate-oiseaux-web/this_is_responsive.html" width="100%" height="400px" frameborder="0" scrolling="no"></iframe>
... voilà, voilou, j'espère que cela sera utile à la communauté Joomla :)
Comme le site SFK, votre site Aide-Joomla a fait peau neuve et est rentré dans l'ère Joomla 3.
Le choix du nouveau template a été long et s'appuyait sur 3 points principaux :
Nous nous sommes finalement décidés vers un développement via le framework Gantry.
Gantry est le « Framework » conçu par l'équipe de RocketTheme.com en licence OpenSource GPL 2.0. Il est utilisé, depuis décembre 2009, comme sous-couche de tous les templates RocketTheme.
Le pack Gantry c'est : Le Framework , un template « blanc » sur lequel on va s'appuyer pour personnaliser son propre site et une interface de gestion du template dans l'administration Joomla .
Découvrez ici les principaux points clefs.
Je retiendrais et rajouterais :
Je ne parlerais pas aujourd'hui de la migration joomla 2.5 vers joomla 3, mais de quelques trucs et approches pour développer et adapter son template sous Gantry en prenant pour exemple le site Aide-Joomla.
Dans un premier temps, télécharger ici et installer le site de démonstration de Gantry - Gantry RocketLauncher for Joomla 3.0 et découvrez le.
Par défaut, l'affichage d'un article se présente un peu comme ci-dessous.
Ce tutoriel va nous permettre d'obtenir cette présentation.
Tout cela grâce à la puissance des CSS.
Nous commençons par créer notre article.
Contenu ==> Gestion des articles ==> Ajouter un article
Nous lui donnons un titre, nous lui attribuons une catégorie, et nous ajoutons seulement une ligne.
{"loadposition perso10"} sans les ""
Ou perso10 qui sera la position du module qui affichera l'article.
Nous sauvegardons l'article en l'enregistrant
Nous nous rendons ensuite dans
Extensions ==> Gestion des modules
Puis
Nouveau ==> Contenu personnalisé
Nous donnons un titre au module (qui peut être le même que l'article) et nous lui attriburons la position perso10
Puis nous allons personnaliser le contenu de notre article.
Pour finir nous enregistrons notre module pour valider sa publication.
Voila, notre article est créé et devrait se présenter comme ci-dessous.
Celle-ci sera compatible :
.multi-column2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
text-align: justify;
}
Pour 2 colonnes avec bordures :
.multi-column2-bordered{
-moz-column-count: 2;
-webkit-column-count: 2;
column-count:2;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Pour 3 colonnes sans bordure :
.multi-column3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
text-align: justify;
}
Pour 3 colonnes avec bordures :
.multi-column3-bordered{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count:3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Pour 4 colonnes sans bordure:
.multi-column4 {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
text-align: justify;
}
Pour 4 colonnes avec bordures :
.multi-column4-bordered{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count:4;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;
-moz-column-rule:4px outset #5C4C4D; /* Firefox */
-webkit-column-rule:4px outset #5C4C4D; /* Safari and Chrome */
column-rule:4px outset #5C4C4D;
text-align: justify;
}
Si vous le souhaitez, aidez-vous de ce site pour générer votre code.
http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html
Les valeurs pour ce trait sont les suivantes :
- solid : trait continu
- dotted : pointillé
- dashed : tiret
- double : trait continu double
- grouve : rainuré
- ridge : relief
- inset : relief interieur
- outset : relief exterieur
Voila pour le css.
Maintenant nous retournons dans la gestion de notre module pour y appliquer l'une de nos différentes classes.
Voila, il ne vous reste plus qu'à jouer avec l'intégration de vos modules
et classes CSS.
Consulter la seconde partie : Modification de la mise en page d'un article: 2° méthode