Notes

Geoscale, le retour de la vengeance II

Date
cats
tags

J'avais repris le développement de mon objet javascript de constuction d'échelle géologique il y a quelques mois. Il me restait encore à définir le code HTML de rendu ainsi que la mise en forme. Une petite heure de brainstorming et code plus tard, j'arrive enfin au bout du chemin...

La solution la plus évidente pour structurer une échelle géologique aurait été un tableau ; elles sont (presque) toujours présentées de cette manière. Je m'étais néanmoins fixé quelques impératifs m'interdisant de prendre cette voie :

  • D'écrire rapidement le code HTML.
  • De pouvoir extraire facilement un niveau de manière indépendante.
  • De pouvoir noter l'échelle sous forme de syntaxe wiki.

J'ai donc opter pour une liste à puces, qui permet de structurer des données hiérarchiques : 

<ul class="geoscale">
    <li>
        <!-- informations du niveau -->
        <ul>
            <!-- sous-niveaux -->
        </ul>
    </li>
    <!-- niveau n -->
</ul>
Code HTML de base de l'échelle géologique.

Chaque niveau de l'échelle géologique est ensuite définit par les propriétés suivantes :

  • Un type (éon, ère, période, époque, age) : TYPE.
  • Un nom : NAME.
  • Une date de début : DTSTART.
  • Une date de fin : DTEND.
  • Une série d'événements ou de faits.

Pour représenter ces données, le plus judicieux semble être une liste de description. Mais il y a différentes manières de l'envisager :

<dl>
    <dt>TYPE</dt>
    <dd class="name">NAME</dd>
    <dt>start</dt>
    <dd class="dtstart"><time>DTSTART</time></dd>
    <dt>end</dt>
    <dd class="dtend"><time>DTEND</time></dd>
    <dt>Events</dt>
    <dd class="event">Event 1</dd>
    <dd class="event">Event 2</dd>
</dl>
Première structuration d'un niveau avec une liste de description.
<dl>
    <dt>
        <span>TYPE</span>
        <strong>NAME</strong>
        (<time class="dtstart">DTSTART</time> - <time class="dtend">DTEND</time>)
    </dt>
    <dd>Event 1</dd>
    <dd>Event 2</dd>
</dl>
Seconde structuration d'un niveau avec une liste de description.

Le travail de mise en forme est sensiblement identique dans les 2 cas. Le dernier code permet néanmoins de construire une échelle en syntaxe wiki assez aisément :

°°geoscale°°
- Ere|mesozoic|251|65
  - period|trias|251|199
    Event 1
    Event 2
  - period|jurassic|199|145
    Event 1
    Event 2
  - period|cretace|145|65
    Event 1
    Event 2
Description de l'ère Mésozoïque en syntaxe wiki.

Exemple de construction Avec l'ère Mésozoïque :

<ul class="geoscale">
    <li class="mesozoic">
        <dl>
            <dt><span>Ere</span> <strong>Mésozoïque</strong> (<time class="dtstart">251</time> - <time class="dtend">65</time>)</dt>
        </dl>
        <ul>
            <li class="trias">
                <dl>
                    <dt><span>Période</span> <strong>Trias</strong> (<time class="dtstart">251</time> <time class="dtend">199</time></dt>
                    <dd>Event 1</dd>
                    <dd>Event 2</dd>
                </dl>
            </li>
            <li class="jurassic">
                <dl>
                    <dt><span>Période</span> <strong>Jurassique</strong> <time class="dtstart">199</time> <time class="dtend">145</time></dt>
                    <dd>Event 1</dd>
                    <dd>Event 2</dd>
                </dl>
            </li>
            <li class="cretace">
                <dl>
                    <dt><span>Période</span> <strong>Crétacé</strong> <time class="dtstart">145</time> <time class="dtend">65</time></dt>
                    <dd>Event 1</dd>
                    <dd>Event 2</dd>
                </dl>
            </li>
        </ul>
    </li>
</ul>
Première ébauche du code HTML d'une l'échelle géologique.

/// <div class="cadre"> <ul class="geoscale"> <li class="mesozoic"> <dl> <dt><span>Ere</span> <strong>Mésozoïque</strong> (<time class="dtstart">251</time> - <time class="dtend">65</time>)</dt> </dl> <ul> <li class="trias"> <dl> <dt><span>Période</span> <strong>Trias</strong> (<time class="dtstart">251</time> - <time class="dtend">199</time>)</dt> <dd>Event 1</dd> <dd>Event 2</dd> </dl> </li> <li class="jurassic"> <dl> <dt><span>Période</span> <strong>Jurassique</strong> (<time class="dtstart">199</time> - <time class="dtend">145</time>)</dt> <dd>Event 1</dd> <dd>Event 2</dd> </dl> </li> <li class="cretace"> <dl> <dt><span>Période</span> <strong>Crétacé</strong> (<time class="dtstart">145</time> - <time class="dtend">65</time>)</dt> <dd>Event 1</dd> <dd>Event 2</dd> </dl> </li> </ul> </li> </ul> </div> ///

Première ébauche de mise en forme d'une l'échelle géologique.