Architecture du site et règles


Les outils
Utilisation d'Eclipse avec le dépôt svn du site tela-botanica.org.
Les fichiers de squelettes, les css et les images servant au graphisme seront stockés dans le dépôt svn.

Le Websvn et ses flux RSS permettent de vérifier en ligne les fichiers et d'être informé des modifications : http://svn.tela-botanica.net/websvn/

Le wikini de Papyrus contient pleins d'informations sur les applettes et les squelettes : http://www.tela-botanica.net/wikini/papyrus/

Architecture du site
Les menus communs (Flux RSS, CNIL, FAQ...) ont leur propre squelette (ne pas oublier de l'indiquer dans la configuration avancée).

Les squelettes de la langue par défaut des univers doivent porter le même nom que le code alphanumérique de l'univers. Ex. : univers "reseau" a pour squelette de la langue par défaut : "reseau.html".

Les fichiers css et JS d'un univers porteront le même code alphanumérique que l'univers. Ex. : "reseau.css" ou "reseau.js".

Les nom des fichiers squelettes autre que ceux dans la langue par défaut seront suffixés par "_code_iso_langue". Ex. : reseau_en.html

Les fichiers css commun aux squelettes des différentes langues seront placé par dans le dossier "generique/styles".

3 niveaux de fichiers css :
  • commun.css dans "sites/commun/generique/styles/" gère les css de l'ensemble du site.
  • mon_univers.css dans "sites/mon_univers/generique/styles/" gère les css d'un univers particulier.
  • mon_appli.css dans "clients/mon_appli/" gère les css spécifiques à une application.

Les fichiers images servant aux css doivent se situer dans les dossiers :
  • "sites/commun/generique/images/graphisme/" : pour les fichiers communs aux différents univers
  • "sites/mon_univers/generique/images/graphisme/" : pour les fichiers spécifiques à un univers.

Dépôt images et document par FTP :
  • pour les images : sites/mon_univers/generique/images/...
  • pour les documents en français : sites/mon_univers/fr/documents/...
D'autres informations sur l'arborescence des dossiers de Papyrus : http://www.tela-botanica.net/wikini/papyrus/wakka.php?wiki=ArborescencePapyrus

Règles
  • Nom des fichiers (css, squelette et js) en minuscule avec les mots séparés par des underscores (_).
  • Fichiers squelettes, css et js : utiliser des tabulations (de 4 caractères) pour indenter le texte.
  • Supprimer tout fichier obsolète. Le dépôt svn contient l'historique des fichiers !
  • les mots des noms des classes css sont séparés par des tirets, sont tous en minuscules et en français.
  • Format CSS :
.clear,.nettoyage {
    clear:both;
}


/* Cadre rond gris :mise en page */
.cadreRondGris .colonneGauche,.cadreRondVert .colonneGauche {
    width:320px;
    padding:20px;
    border-right:1px dotted #959486;
    float:left;
}
.cadreRondGris .colonneDroite,.cadreRondVert .colonneDroite {
    width:284px;
    float:left;
    padding:18px;
}


CSS

  • .rejoindre : à appliquer sur un lien pour indiquer aux utilisateurs de rejoindre un projet.
  • .cacher : fait disparaître une élément de la page.
  • .transparent : rend transparent un élément de la page.
  • .importance1 : mise en exergue d'un texte de 1ère importance.
  • .importance2 : mise en exergue d'un texte de 2ème importance.
  • .importance3 : mise en exergue d'un texte de 3ème importance.
  • .importance4 : mise en exergue d'un texte de 4ème importance.
  • .gauche : fait flotter un élément à gauche.
  • .droite : fait flotter un élément à droite.
  • .nettoyage : stoppe la flottement à gauche et à droite.
  • hr.nettoyage : le <hr /> est invisible mais cela stoppe le flottement à gauche et à droite.
  • .lire-suite : à la suite d'un résumé d'un texte, s'applique aux liens permettant d'accéder au contenu complet.
  • .voir-tout : suite à une liste réduite d'info, permet d'accéder à la liste complète. Ex. : voir tous les articles de l'actualité.
  • .telecharger : permet d'indiquer un document à télécharger. S'applique le plus souvent à un lien seul.
  • ul.telecharger : sur une liste de document à télécharger.
  • .acceder : sur un lien permettant d'accéder à une partie précise du site.
  • ul.acceder : sur une liste de lien permettant d'accéder à des parties du site.
  • .acceder-outil : sur un lien permettant d'accéder à une application du site.
  • ul.acceder-outil : sur une liste de liens permettant d'accéder aux applications du site.
  • .demi : permet d'afficher du contenu sur la moitié de la zone d'affichage.
  • .tiers : permet d'afficher du contenu sur un tiers de la zone d'affichage.
  • .deux-tiers : permet d'afficher du contenu sur deux tiers de la zone d'affichage.
  • .colonne : permet d'indiquer une zone qui va apparaître sous forme de colonne.
  • .ligne : permet d'indiquer une zone qui doit apparaître sous forme de ligne.
  • .discretion : permet de rendre discret un texte (le plus souvent : police petite, couleur grise).
  • table.alterner : distingue une ligne sur deux dans les résultats de la table (ligne 1 grisée).
  • table.alterner-pair : distingue une ligne sur deux dans les résultats de la table (ligne 2 grisée).
  • .chapeau : introduction à un article. chapô.
  • .pliage : faire dérouler un texte (accordéon). Idéal pour les FAQ. class à mettre dans une <div class="pliable">
  • .lien_pliage : sur un lien à faire dérouler

Obsolètes
  • a.lien-ext : une règle css redéfinit directement les liens externes (attribut href ne pointant pas vers www.tela-botanica.org)
  • a.pdf : une règle css redéfinit directement les liens pointant vers un fichier ".pdf".
  • .icone-erable : voir ".rejoindre".
  • .nodisplay : voir ".cacher".
  • .hidden : voir ".transparent".
  • .spacer125 : ne plus l'utiliser.
  • .cadreRondVert : voir ".importance1".
  • .cadreRondGris : supprimer. Utiliser ".importance1".
  • .cadreRondOmbre : voir ".importance4"
  • .filetVert : voir .importance2 ou .importance3.
  • .filetRouge : voir .importance2 ou .importance3.
  • .floatLeft : voir ".gauche".
  • .notext : voir ".cacher".
  • .petitcarre : voir ".lire-suite".
  • .voirSuite : voir ".lire-suite".
  • .troiscarre : ne pas utiliser !
  • .lireTout : voir ".voir-tout".
  • .puceFleche : voir ".telecharger", ".voir-tout", ".acceder".
  • .boutonJaune : voir ".acceder-outil".
  • .clear : voir ".nettoyage".
  • .champs : s'applique aux select, input dans une zone .importance1, ne devrait donc pas être utilisé.
  • .champs2 : s'applique aux label dans une zone .importance1, ne devrait donc pas être utilisé.
  • .ok : s'applique à la balise <input type="submit" value="ok" /> dans une zone importance1, ne devrait donc pas être utilisé.
  • .column : voir ".colonne".
  • .row : voir ".ligne".
  • .grid_# : voir .demi, .tiers et .deux-tiers.
  • .moitie : voir .demi.
  • .deuxTiersGauche : voir .tiers ou .deux-tiers et .gauche ou .droite.
  • .deuxTiersDroite : voir .tiers ou .deux-tiers et .gauche ou .droite.
  • .plein : ne pas utiliser car par défaut cela prendra toute largeur.
  • .colonneDroite : voir .colonne et .droite.
  • .colonneGauche : voir .colonne et .gauche.
  • .orange : à ne pas utiliser!
  • p.orange : à ne pas utiliser!
  • .blanc : à ne pas utiliser!
  • p.blanc : à ne pas utiliser!
  • .vertpetit : à ne pas utiliser!
  • .grispetit : voir .discretion.
  • .gris : à ne pas utiliser!
  • .overflow-hidden : à ne pas utiliser! Doit être utilisé par une règle précise.
  • .ajout_2point : inutile car les deux points sont ajoutés automatiquement sur un dl.
  • .img_gch_txt_drte : voir ".gauche.".
  • .table_cadre : à supprimer, correspond au style par défaut.
  • .traitTela : voir .acceder et .telecharger.
  • - .ombre2 : à ne pas utiliser! Doit être utilisé par une règle précise.
  • - .arrondi7 : à ne pas utiliser! Doit être utilisé par une règle précise.
  • - .arrondi30 : à ne pas utiliser! Doit être utilisé par une règle précise.

class = "boutonProjets arrondi7 ombre2"


CSS liés au JS
  • Gestion des liens externes (voir classe obsolète a.lien-ext)