Team:Evry/TestPage

Gros titre / image de fond noircie

Et un petit sous-titre pour la route

Cette page est un exemple qui illustre l'utilisation de certains éléments communs à toutes les pages, susceptibles d'être utiles à tous lors de l'édition du wiki. Premier exemple, le menu juste en-dessous peut être utilisé pour naviguer dans l'intérieur d'une même page. Je l'ai inclus par défaut dans toutes les pages, il suffit de le remplir. Regardez la source pour voir quelle tête a ce menu. (c'est l'élément div id="top-menu")

Section 1 : structure de base des pages du wiki.

Où mettre le titre principal des pages (titre qui illustre d'ailleurs les titre h1, h2, h3, ...)

Le titre principal d'une page (h1) doit être inclus dans div class="page-header". Ca rajoute un espace en bas et une bordure gris claire.

Et mes blocs de textes, je les met où?

Chaque partie principale d'une page devrait être placée dans une section class="page-section". C'est d'une part car c'est bien sémantiquement (chaque section correspond à un élément 'section') mais aussi car j'ai ajouté de l'espace en bas de chaque section, ce qui donne un rendu aéré.

Comment se servir du menu 'intra page'

C'est facile, ça se fait en 2 étapes. Première étape, créer les items du menu, qui est en fait une liste non ordonnée (ul), avec des liens dedans. Exemple (regarder la source de cette page aidera vu que c'est utilisé) :


<div id='top-menu'>
<ul>
  <li style="height: 34px; padding-top: 8px;" class="text-muted"><strong>Texte avant les liens: </strong> &#8195;</li>
  <li>
    <a href="#coucou">Coucou !</a>
  </li>
  <li>
    <a href="#toto">Toto ...</a>
  </li>
</ul>
</div>

Ces liens mènent vers des ancres (marquées par un dièse). Il suffit de rajouter id="toto" (pas de dièse cette fois) à l'élément vers lequel on veut mener lorsqu'on clique sur l'item, et voilà. Le fait que le menu reste fixé en haut de la page, que les liens correspondant à l'éléemnt actuel ne sont pas à gérer (j'ai déjà géré ça et ça devriat marcher). Exemple :


<section id="toto">
</section>

Utilisation des images 'parallax' en début de page

Il est possible d'utiliser le même genre d'image que sur la page d'accueil. Le code est commenté au début de chaque page du wiki, il suffit de retirer le commentaire et de changer l'adresse de l'image de fond pour l'utiliser (exemple sur cette page avec Yoda).

Gestion du menu de gauche (item actifs)

Les items du menu de gauche sont rendus actifs par un code JS simple. Si les items viennent à changer, il faut changer ce code. Je l'ai mis à la fin des pages, il est facile de le trouver. Un petit exemple :


$('.side-menu .navbar-nav li').filter(function() { return $.text([this]).indexOf('Software') > -1; }).addClass('active');
--> Ce qui se passe : si un item de liste du menu contient le mot 'Software', ajouter la classe 'active' (ce qui change le style de l'élément).

Si on change 'Software' par 'Acacia', il fuadra modifier le code par :
$('.side-menu .navbar-nav li').filter(function() { return $.text([this]).indexOf('Acacia') > -1; }).addClass('active');

A ne surtout pas modifier de les pages !

Ne surtout pas virer les trois fermetures de div à la fin des pages (end .row, ...).

Section 2 : un peu de documentation (html/wiki).

Frameworks utilisés

Le wiki utilise Bootstrap, tout éléments de bootstrap sont utilisables. La documentation de Bootstrap est excellente car elle illustre à merveille les différents exemples (les différents titres, style de texte, les composants, le système de grille, etc.). Notez cependant que les icônes de bootstrap ne sont pas incluses sur le wiki, j'ai préféré utiliser font-awesome (encore une fois google, et aussi le code source du menu pour une exemple d'insertion d'icônes).

Aide HTML

Pour de l'aide sur le html, il y a w3schools (notions basiques, couvre aussi bootstrap) et bien sûr stackoverflow.

J'avais aussi écit un post sur le google group sur comment éditer les pages du wiki, mettre des images et faire un peu de html ici.

Règles pour le wiki

Le wiki doit respecter certaines règles, répertoriées sur la page 'wiki requirements' du site de l'igem. Normalement je les respecte toutes (sauf poru l'hébergement du css sur les serveurs de l'igem, pour le moment).

Suite de la page d'exemple ...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Section 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

References

Exemple de mise en forme pour les références.

Reference PMID
Reference PMID
Reference PMID

Reference PMID
Reference PMID
Reference PMID

To top