Recherche sur le wiki

Paramètres avancés
ET
ET

Réaliser un modèle de projet

Documentation et tutoriels

  • e-majine
  • saytup
  • izi-media
  • Module de base
  • Module de base

Réaliser un modèle de projet

 

Introduction

Vous désirez intégrer des modèles de projets sur les solutions e-majine, izi-media ou saytup.

Découvrez quelles parties du site doivent être intégrées selon votre modèle de projet et quels points essentiels bien négocier pour construire un modèle de haute qualité. Retrouvez ci-dessous un ensemble de règles et informations générales, ou bien rendez-vous directement dans la documentation qui correspond au type de votre modèle de projet :

 

Règles générales

Rédaction des fichiers

  • Vos fichiers HTML doivent être rédigés en HTML5
  • L'ensemble de vos styles doit être stocké dans des feuilles de style CSS appelées dans la balise "head"
  • L'ensemble de vos scripts doit être stocké dans des fichiers Javascript appelés en fin de balise "body" et non directement dans le HTML
  • Prévoir pour la navigation un minimum de 3 niveaux d'indentation.

 

Rédaction d'une feuille de styles CSS

La rédaction des feuilles de styles CSS doit respecter certaines règles :

  • Respecter l'écart d'un espace pour chaque propriété d'une règle CSS entre les " : " et la valeur définie

Exemple correct :
font-weight: bold;

Exemple incorrect :
font-weight:bold;

 

  • Segmenter en sections votre feuille de styles CSS pour se retrouver plus facilement dans le code et mettre en place un sommaire
  • Effectuer un seul saut de ligne entre chaque règle CSS
  • Regrouper les propriétés CSS lorsque c'est possible

Exemple correct :
border: 1px solid #ccc

Exemple incorrect :
border-color: #ccc;
border-style: solid;
border-width: 1px;

 

  • Mettre sur une seule ligne la règle CSS lorsqu'elle n'a qu'une propriété
  • Préférer les tabulations aux espaces pour aligner les propriétés
  • Eviter les règles CSS vides.

 

Rédaction d'un fichier Javascript (basé sur jQuery)

La rédaction des fichiers Javascript doit respecter certaines règles :

  • Insérer votre code dans un élément testant que la page est prête
$(document).ready(function()
{
    // Votre code ici ... 
});

 

  • Utiliser des guillemets simples dans les sélecteurs et non des guillemets doubles
  • Ecrire l'accolade à la ligne à la rédaction d'une fonction.

 

Arborescence des fichiers demandée

Pour être certain de voir votre modèle de projet bien géré par nos solutions, vous devez respecter l'arborescence suivantes pour vos dossiers :

  • modeles
    • Langue_de_votre_modele
      • Nom_du_modele
        • ...
        • css   (ici les feuilles de styles CSS du modèle)
        • ...
        • fonts   (ici les polices liées par votre modèle)
        • images   (ici les images liées par votre modèle)
        • ...
        • scripts (ici les fichiers Javascript appelés dans votre modèle)
        • ...

 

Classes CSS liées aux mises en forme spécifique de nos solutions

Il existe dans nos solutions des classes régulièrement utilisées et pratiques pour mettre en forme de nombreux éléments. Retrouvez ci-dessous une liste générale à nos solutions :

hide Masque l'élément possédant la classe CSS
clear Permet la prise en compte des flottants enfants dans une balise HTML suite à l'ajout en fin de conteneur d'une balise HTML comprenant cette classe
relative Rend la balise HTML possédant la classe CSS référente en cas de positionnement d'enfants en absolu
posLeft Met la balise HTML en flottant à gauche
posMiddle Centre la balise HTML au milieu de son conteneur (si la balise est en display: block)
posRight Met la balise HTML en flottant à droite
txtCenter Centre le texte présent dans la balise HTML
txtLeft Aligne le texte sur la gauche dans la balise HTML
txtRight Aligne le texte sur la droite dans la balise HTML

Certaines de ces classes peuvent être liées à des mises à jour plus récentes que l'installation de votre modèle. Pour en bénéficier, il faudra mettre à jour la feuille de styles CSS "styles.css".

 

Les classes pour e-majine

Certaines classes de mise en forme ne sont utilisées que par e-majine. Découvrez quelles classes lui sont dédiées :

deux_colonnes Classe CSS appliquée à la balise HTML contenant la mise en forme en deux colonnes associée à un "article en blocs"
colleft Classe CSS appliquée pour la colonne de gauche lorsque l'on utilise un mode d'affichage en 2 colonnes dans un "article en blocs"
colright Classe CSS appliquée pour la colonne de droite lorsque l'on utilise un mode d'affichage en 2 colonnes dans un "article en blocs"
intext_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au sein du texte à gauche
intext_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement au sein du texte à droite
above_center Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte et centrée
above_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte de l'image au dessus du texte à gauche
above_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte à droite
below_center Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte et centrée
below_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte à gauche
below_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte à droite

 

Les classes pour saytup

Saytup avec l'arrivée des nouveaux types de publications tels que "Contenu" instaure une nouvelle liste de classes pour une mise en forme plus approfondie. En voici la liste :

size1_1 Colonne de largeur égale à 100%
size1_2 Colonne de largeur égale à 50%
size1_3 Colonne de largeur égale à 1 tiers de la largeur totale
size1_4 Colonne de largeur égale à 25%
size1_5 Colonne de largeur égale à 20%
size1_6 Colonne de largeur égale à 1 sixième de la largeur totale
size1_7 Colonne de largeur égale à 1 septième de la largeur totale
size1_8 Colonne de largeur égale à 12,5%
intext_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au sein du texte à gauche
intext_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au sein du texte à droite
above_center Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte et centrée
above_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte à gauche
above_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image au dessus du texte à droite
below_center Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte et centrée
below_left Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte à gauche
below_right Classe CSS appliquée pour un bloc "Texte et images" lors d'un positionnement de l'image en dessous du texte à droite

 

Liste des fichiers communs à intégrer

Pour l'ensemble de nos solutions, vous retrouvez un ensemble de fichiers communs pour intégrer vos modèles de projet. En voici la liste (non exhaustive) :

(Tous ces fichiers se trouvent dans /modeles/Langue_du_modèle/Nom_du_modele) et sont classés par module dans la liste ci-dessous.

Module de base
/css/styles.css (et fichiers CSS complémentaires) Feuille(s) de styles pour la mise en forme des éléments HTML
/structure/mainPage.html Structure HTML de toute page du modèle de projet
/navigation_elements/nested_navigation_elements.html Structure HTML du menu de navigation standard
/publication_methods/articles/single_article.html Structure HTML de la méthode de publication "Publier un article"
/form/creator_form.html Structure HTML pour les formulaires créés par vous-même au sein de notre solution
Module de base (fichiers optionnels)
/structure/error.html Structure HTML de la page d'erreur ou page vide
/structure/error404.html Structure HTML de la page d'erreur 404
/structure/mainPrint.html Structure HTML de toute page du site lors d'une impression
/publication_methods/articles/multi_articles.html Structure HTML de la méthode de publication "Publier des articles"
/publication_methods/articles/multi_articles_detail.html Structure HTML du résumé d'un article appelé par le fichier multi_articles.html
/account/login/box_login.html Widget de connexion à un compte utilisateur
/account/login/content_authentification.html Structure HTML de la page de connexion à un compte utilisateur
/account/login/content_actions_list.html Structure HTML de la page listant les actions possibles du compte utilisateur connecté
/account/login/content_address.html Structure HTML de la page listant les adresses associées au compte utilisateur connecté
/account/login/content_change_password.html Structure HTML de la page permettant le changement de mot de passe pour le compte utilisateur connecté
/account/login/content_account_modify.html Structure HTML de la page permettant la modification des informations liées au compte utilisateur connecté

 

Module de recherche
/search/box_search.html Widget de recherche sur le site
/search/content_result_search.html Structure HTML présentant les résultats de la recherche

Utile : Vous pouvez utiliser la balise "mx:pathToTemplateFolder" pour obtenir l'url relative du modèle de projet.
Cela équivaut à l'url suivante :
http://www.monsite.fr/modeles/Langue_du_modele/Nom_du_modele/

 

Minification / Compression des fichiers CSS et Javascript

Pour améliorer la rapidité de votre modèle de projet, il est conseillé de minifier/compresser vos fichiers CSS et Javascript. Vous pouvez trouver de nombreuses ressources sur internet pour parvenir au résultat escompté.

 

Compatibilité avec le personnalisateur du Webo-Facto

Pour rendre votre modèle de projet administrable depuis le personnalisateur du Webo-facto, vous devez ajouter des instructions d'un format spécial dans votre/vos feuille(s) de styles. Vous pouvez autoriser la modification des éléments suivants sur votre modèle de projet :

  • Visuels
  • Couleur de texte
  • Couleur d'arrière-plan

 

Pour cela, respectez la syntaxe suivante :

.ma_classe {
    /** Nom de la propriété modifiable */
    color: #fff;
}

.ma_classe2 {
    /** Nom de l'image modifiable */
    background: url(/chemin_vers_limage/mon_image.jpg);
}

.ma_classe3 {
    /** Nom de l'arrière-plan modifiable */
    background-color: #fff;
}

Tous ces éléments personnalisables sont alors listés depuis le Webo-facto, en passant par la fiche de votre projet, en cliquant sur "Personnaliser l'apparence", "Personnalisation standard", dans l'onglet "Eléments normalisés".

 

Intégration par catégorie

Selon la catégorie de votre site, certains fichiers doivent être impérativement traités. Découvrez la liste complète pour ne rien oublier en choisissant la catégorie de votre site :