Aide mémoire pour débutant

Support et assistance sur les templates Joomla! 1.0.x, design html et css.

Moderators: Aidan38, sarki

Forum rules
Règles du forum
Locked
User avatar
Bigjoom
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Mon Oct 22, 2007 1:22 am
Location: Montréal, Québec, Canada

Aide mémoire pour débutant

Post by Bigjoom » Fri Dec 07, 2007 3:22 am

Bonjour,

Voila, après plusieurs semaines à créer mon premier site Joomla et quelques questions posées sur ce forum, je me suis créé un fichier d’aide mémoire qui me permet de faire de simple copier/coller lors de l’utilisation.

J’en profite pour remercier tous ceux qui ont répondu gentiment à mes questions et je poste ici mon aide qui pourra certainement en aider plusieurs qui débutent

Marquage HTML & PHP pour Joomla
(dernière mise à jour le 6 décembre 2007)


Sécurité, déclaration du DOCTYPE et XML

Tout premier marquage dans la page du fichier index.php

Code: Select all

<?php defined( '_VALID_MOS' ) or die( 'Restricted access' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = explode( '=', _ISO, 2 ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
<html xmlns="http://www.w3.org/1999/xhtml">
Suivi du marquage dans entre les balises head

Code: Select all

<head>
<?php if ( $my->id ) { initEditor(); } ?>
<?php mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
<?php echo "<link rel=\"stylesheet\" href=\"{$mainframe->getCfg( 'live_site' )}/templates/{$mainframe->getTemplate()}/css/template_css.css\" type=\"text/css\"/>" ; ?>
<style type="text/css">
</style>
</head>
Marquage éventuel entre les balises body:

pour placer directement une image de fond (code "dur" HTML à eviter, de préférence passer par le CSS)

Code: Select all

<body background="<?php echo $mosConfig_live_site;?>/templates/nom de template/dossier images/nom.jpg" style="background-repeat:repeat-x;">
Pour placer directement un lien (comme dans le footer) (code "dur" HTML à eviter, de préférence passer par le CSS)

Code: Select all

<div id="nomid"><p>Powered by <a href="http://www.joomla.org">Joomla!</a> | Design by <a href="http://www.votreadresse.com">votrenom</a></p></div>
Pour placer une image(logo) (code "dur" HTML à éviter, de préférence passer par le CSS)

Code: Select all

<div id="nomid"><img src="templates/nomtemlate/dossierimages/nom.png"  align="left" /></div>
Pour faire apparaitre le nom du site inscrit dans la config (attention,  si on utilise la méthode des footer.php plus bas)

Code: Select all

<?php echo "$mosConfig_sitename!"; ?>
<h1 id="nomid" class="nomclass"><?php echo $mosConfig_sitename; ?></h1> 
Pour faire apparaitre le titre de la page active (pathway)

Code: Select all

<?php mosPathWay(); ?>
<div id="nomid"><?php mosPathWay(); ?></div>
Pour faire apparaitre la date

Code: Select all

<?php echo mosCurrentDate(); ?>
<div id="nomid"><?php echo mosCurrentDate(); ?></div> 


Ou

Code: Select all

<?php echo mosFormatDate('2005-01-01 10:00:00'); ?>
Pour placer directement un module

Code: Select all

<?php mosLoadModules ( 'nommodule',-2); ?>
<div id="nomid"> <?php mosLoadModules ( 'nommodule' ); ?>   </div>
Pour suggerer un module

Code: Select all

<?php if (mosCountModules('nommodule')>0) mosLoadModules('nommodule',-2); ?>
<div id="nomid"><?php if (mosCountModules('nommodule')>0) mosLoadModules('nommodule',-2); ?></div>
Pour placer le mainbody (les différents articles)

Code: Select all

<?php mosMainBody(); ?>
<div class="nomclass"> <?php mosMainBody(); ?></div>
Pour inclure les informations du footer qui fait appel au fichier includes/version.php (« joomla est un logiciel libre »)
(retirer cette dernière si on veut supprimer la mention)

Code: Select all

<?php include_once('includes/footer.php'); ?>
Marquage dans les articles Joomla : (marquage HTML quand on utilise pas d’éditeur WYSIWYG) :

Les adresses absolues (liens, images, etc)

On indique l'adresse complète par exemple :  http://forum.joomla.org

Il ne faut les utiliser que pour des liens vers d’autres sites pour éviter de remplacer tous nos liens internes advenant un transfert d'hebergeur

Les adresses relatives (liens, images, etc)

À utiliser pour lier une page ou une image du même site. Le fichier sera recherché relativement à la page courante :

Dans le même dossier:
"image.png" exemple :

Code: Select all

<img src=" image.png " alt="texteinfobulle" width="x" height="y">
Dans un sous dossier :
"fichiers/image.jpg" exemple :

Code: Select all

<img src=" fichiers/image.jpg " alt="texteinfobulle" width="x" height="y">
Dans le dossier parent :
"../image.png" exemple :

Code: Select all

<img src=" ../image.png " alt="texteinfobulle" width="x" height="y">
Pour charger un module directement dans un article (le « Chargeur de positions de module » doit être publié dans les mambot du site)

Code: Select all

{mosloadposition user1} 
:

Dans un article, pour référer à un autre article/page, placer le ID de l’article à la fin du lien:

Absolu:

Code: Select all

<a href="http://www.votresite/index.php?option=com_content&task=view&id=18”> title="texteinfobulle">texte du lien</a>
ou
Relatif:

Code: Select all

<a href="index.php?option=com_content&task=view&id=18”> title="texteinfobulle">texte du lien</a>
Pour insérer une image

Code: Select all

{mosimage} 
(avec les options et le choix d’image dans la boite de paramètre à droite)

ou

Code: Select all

<img src="adressefichierImage" alt="texteinfobulle" width="x" height="y">
Hyperlien

Code: Select all

<a style="text-decoration:none;" href="http://www.adresse.org" title="titre infobulle">texte du lien</a>
Les divers codes  HTML communs... (valide par le W3C)

Titre de page, une seule fois en tout début de page (donc, ne pas utiliser dans les articles, car le titre de page est généré automatiquement par le serveur php et le titre de votre article

Code: Select all

<h1>votre titre</h1>
Sous-titre (h2 à h6)

Code: Select all

<h2>votresoustitre</h2>
Paragraphe (ne conserve pas plus d’un espace entre les lettres ni les sauts de ligne)

Code: Select all

<p>votre texte</p>
Paragraphe préformaté (conserve les espaces et les sauts de ligne)

Code: Select all

<pre>votre texte</pre>
Saut de ligne (break) balise seule (pas besoin de la fermer avec un éventuel par exemple).

Code: Select all

<br>
Liste non ordonnée ou liste à puces (souvent rondes, carrées... doit englober toutes les balises et )

Code: Select all

<ul></ul>
Liste ordonnée : liste numérotée, 1. pour le premier élément, 2. pour le second, etc...

Code: Select all

<ol></ol>
Ligne de liste, impérativement à l'intérieur d'un ou d'un ; tout texte à l'intérieur d'une liste (ul ou ol) doit être contenu dans une .

Code: Select all

<li>votretextedeliste</li>
Lien

Code: Select all

<a style="text-decoration:none;" href="http://www.votrelien.com" title="titre infobulle">texte du lien</a>
Encre exemple : lien qui réfère à l'encre "papa"

Code: Select all

<a href="#papa">allez au paragraphe papa</a>
Encre exemple : encre sur laquelle le lien d'encre pointe

Code: Select all

<p><a name="papa"></a>papa</p>
Encre vers ll'extérieur exemple : lien qui refere à l'encre "papa" dans une autre page

Code: Select all

<a href="nomdepage.html#papa">Création du site</a>
Exposant

Code: Select all

<sup>10</sup>
Indice

Code: Select all

<sub>10</sub>
Italique

Code: Select all

<em>texte</em>
Gras

Code: Select all

<strong>texte</strong>
Infobule avec la signification du mot

Code: Select all

<abbr title="ceci signifi bla">bla</abbr>
Infobule avec la signification de l’acronyme

Code: Select all

<acronym title="explication du sigle">S.I.G.L.E.</acronym>
Informations de contact

Code: Select all

<address>6600 avenue des pins</address>
Code informatique

Code: Select all

<code>placer du code</code>
Ligne horizontale (sans balise fermante), elle permet de séparer deux blocs de texte par un fillet horizontal

Code: Select all

<hr>
***** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed *****____

Pour placer des videos FLV (le meilleur format accessible par tous les OS)

Pour placer des vidéos FLV sans mambot special comme par exemple ALL VIDEOS
Il faut au préalable télécharger le player FLV gratuit ici JW FLV PLAYER 3.12
(Ce player est du même auteur que le plugin ALLVIDEOS sauf que la version est plus recente et permet à vos membre de visualiser en "full screen")

Décompresser et regarder dans le dossier jw_flv_player

1-mettre le player "flvplayer.swf" dans un dossier sur le site et toujours faire référence à cet emplacement pour le lien du player dans le code
2-mettre votre vidéo "votrevideo.flv" dans un dossier sur le site et faire référence à ce lien dans le code

Exemple complet:

Code: Select all

<embed src="http://www.votresite.com/images/stories/flvplayer.swf" width="640" height="480" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=http://www.votresite.com/images/stories/votrevideot.flv&height=480&width=640" />
ou si on préfere des liens relatif (mieux pour une eventuel migration de serveur)on fait par exemple:

Code: Select all

<embed src="images/stories/flvplayer.swf" width="640" height="480" allowfullscreen="true" allowscriptaccess="always"flashvars="&file=votrevideo.flv&height=480&width=640" />
(note:Le fichier .flv est référé selon le chemin du flvplayer, donc seulement marquer le titre du fichier video après « &file »)

Pour afficher la video sans les bordure du player et en incluant une image preview avant la lecture :

Code: Select all

<embed src="images/stories/flvplayer.swf" width="640" height="480" allowfullscreen="true" allowscriptaccess="always" flashvars="&displayheight=480&file=votrevideo.flv&height=480&image=images/stories/votreimage.jpg&width=640" />
(note: placer le fichier image dans le dossier correspondant)


Pour afficher la vidéo avec un playlist:

Il faut créer un fichier .xml et ajouter les infos dedans (voir le fichier playlist.xml dans le pack video « jw_flv_player »)

Ensuite, ajouter ce code dans votre article:

Code: Select all

<embed src="images/stories/flvplayer.swf" width="640" height="566" allowfullscreen="true" allowscriptaccess="always" flashvars="&displayheight=480&file=images/stories/playlist.xml&height=566&width=640" />
(note: emarquer que la taille « height » du player et de la playlist doivent correspondre et être plus grande que celle du « displayheight » pour laisser de la place pour afficher la playlist)


Pour afficher un lecteur mp3 simple:

Code: Select all

<embed src=" images/stories/flvplayer.swf " width="320" height="20" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=/image-stories/votremusique.mp3&height=20&width=320" />
Pour résoudre le bug du contrôle ActiveX « cliquez ici pour activer le contrôle »

Inscrire ce code dans un fichier texte et le renommer en « flash.js »

Code: Select all

if (document.getElementsByTagName && document.body.outerHTML) {
    var tags = ['object','embed','applet'];
    for (var i in tags) {
        var objs = document.getElementsByTagName(tags[i]);
        for (var j=0;j < objs.length;j++) {
            var obj = objs.item(j);
            var params = obj.getElementsByTagName('param');
            var inner = '';
            if (params.length && !/<param/i.test(obj.innerHTML))
                for (var x=0;x < params.length;x++)
                    inner += params.item(x).outerHTML;
            obj.outerHTML = obj.outerHTML.replace('>', '>' + inner);
        }
    }
}
Placer votre fichier « flash.js » dans le dossier de votre template et ajouter le code suivant dans le dossier « index.php » de votre site :  (juste avant la fermeture de la balise body)

Code: Select all

<div dir="ltr" style="text-align: left;"><p><script type="text/javascript" src="templates/nomdudossierdevotretemplate/flash.js"></script></p><p><!--bug flash Internet Explorer--></p></div>
***** Manual signatures are NOT allowed ********** Manual signatures are NOT allowed *****______

Pour enlever la mention "Joomla est un logiciel libre" et mettre ce que l'on veut en bas de page (footer) :

1-Faire un fichier texte nommé "footer.php" et le placer dans le dossier de notre template

2-Incrire/modifier ceci dans votre fichier footer.php que vous venez de créer :

Code: Select all

<?php
/**
* @version $Id: footer.php 3711 2006-05-29 03:25:07Z stingrey $
* @package Joomla
* @copyright Copyright (C) 2005 Open Source Matters. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );

global $_VERSION;

// NOTE - You may change this file to suit your site needs
?>
<div align="center">
© <?php echo mosCurrentDate( '%Y' ) . ' <a style="text-decoration:none;color: #ffffff;" href="http://www.adressedevotresite.com" title="nomdevotresite"> ' . $GLOBALS['mosConfig_sitename'];?>, Tous droits réservés</a>
</div>
3-placer cette ligne de code dans votre fichier index.php pour faire référence au fichier footer.php que vous venez de placer dans le dossier de votre template

Code: Select all

<div id="footer"><?php include_once($mosConfig_absolute_path."/templates/".$mainframe->getTemplate()."/footer.php"); ?></div>
Nous pouvons en faire d'autre comme par exemple un footer2.php et le lié comme mentionner plus haut et inclure par exemple des ID de page/article pour par exemple créer des liens vers les sections légales:

Code: Select all

<div align="center">
<a style="text-decoration:none;" href="index.php?option=com_contact&Itemid=3">Contact</a> |
<a style="text-decoration:none;" href="index.php?option=com_content&task=view&id=28">Aide/FAQ</a> |
<a style="text-decoration:none;" href="index.php?option=com_content&task=view&id=27">Politique de confidentialité</a> |
<a style="text-decoration:none;" href="index.php?option=com_content&task=view&id=26">Conditions d’utilisation</a> |
<a style="text-decoration:none;" href="index.php?option=com_content&task=view&id=30">Qui sommes-nous?</a>
</div>
(note: bien sûr, il faut également créer des articles avec les ID correspondants)

L'avantage de toutes ces méthodes est que les fichiers .php créés demeurent dans le dossier de notre template et que les références demeurent également inscrites dans le fichier index.php de notre site, donc lors d'une réinstallation de notre template, tout est déjà en place !!

A+
Bigjoom

User avatar
dec
Joomla! Guru
Joomla! Guru
Posts: 502
Joined: Mon Apr 03, 2006 2:06 pm

Re: Aide mémoire pour débutant

Post by dec » Fri Dec 07, 2007 9:06 am

Bon boulot pour un débutant ;D. Mais tu ne m'as pas l'air si débutant que cela. ;).
Quelle volonté d'analyse au fur et à mesure de tes posts.
Je pense que tu devrais poster cette aide sur Joomlafacile, ça en aiderait plus d'un.

User avatar
Bigjoom
Joomla! Apprentice
Joomla! Apprentice
Posts: 22
Joined: Mon Oct 22, 2007 1:22 am
Location: Montréal, Québec, Canada

Re: Aide mémoire pour débutant

Post by Bigjoom » Fri Dec 07, 2007 12:07 pm

Merci  :)

Si si, je debute..... j’ai débuté il n’y a que 2 mois, mais depuis je me nourris exclusivement de Joomla LOL

…et manque cruellement de sommeil  :'(
Bigjoom


Locked

Return to “1.0 - Templates et design”