cClaude.rocks ☕ Le blog

L'informatique et les nouvelles technologies

Menu

Continuons notre dĂ©couverte de Foundation 6, cet article s’appuie sur les billets sur l'installation de Foundation 6 et celui sur les premiers pas en HTML.

Pour simplifier, nous ne nous attarderons pas Ă  l’intĂ©gration de Foundation 6 avec des CMS ou autre langage dans un premier temps.

Comme expliquĂ© dans le billet sur Foundation 6, crĂ©ez un fichier texte nommĂ© xyz.html oĂč xyz est un texte de votre choix, de prĂ©fĂ©rence sans espace et sans caractĂšre spĂ©cial (ni accents, ni apostrophe
).

Le contenu de vos fichiers HTML doivent contenir la structure suivante :

<!doctype html>
<html class="no-js" lang="fr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>__VOTRE_TITRE__</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>

    __VOTRE_CODE_HTML__

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

IntĂ©gration d’images dans la page.

Pour commencer, nous allons utiliser le module Orbit de Foundation 6. J’ai choisi volontairement ce module qui peut sembler assez compliquĂ© au premier abord, mais finalement il se dĂ©taille plutĂŽt facilement et est trĂšs simple Ă  personnaliser.

Voici donc ce que nous allons tester en premier lieu.

Code HTML


<div class="orbit" role="region" aria-label="SĂ©lection d'image" data-orbit>

  <div class="orbit-wrapper">

    <div class="orbit-controls">
      <button class="orbit-previous"><span class="show-for-sr">Image précédente</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Image suivante</span>&#9654;&#xFE0E;</button>
    </div>

    <ul class="orbit-container">
      <li class="is-active orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Image-1" alt="Description image 1">
          <figcaption class="orbit-caption">Image numéro 1</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Image-2" alt="Description image 2">
          <figcaption class="orbit-caption">Image numéro 2</figcaption>
        </figure>
      </li>
      <li class="orbit-slide">
        <figure class="orbit-figure">
          <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Image-3" alt="Description image 3">
          <figcaption class="orbit-caption">Image numéro 3</figcaption>
        </figure>
      </li>
    </ul>

  </div>

  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">PremiĂšre image</span></button>
    <button data-slide="1"><span class="show-for-sr">Seconde image</span></button>
    <button data-slide="2"><span class="show-for-sr">TroisiĂšme image</span></button>
  </nav>

</div>

Rendu


  • Description image 1
    Image numéro 1
  • Description image 2
    Image numéro 2
  • Description image 3
    Image numéro 3

Allez on se lance dans l’analyse de ce code — mais si cela va bien se passer



<div class="orbit" role="region" aria-label="DESCRIPTION" data-orbit>


</div>

La premiĂšre balise div est dĂ©fini avec la classe (attribut class) orbit. Les attributs role=region et aria-label (avec une description libre) est nĂ©cessaire pour les lecteurs d’écrans utilisĂ©s par certaines personnes handicapĂ©es. Enfin il y a un attribut vide data-orbit qui sera utilisĂ© par le code JavaScript inclu dans Foundation 6 pour stocker de l’information.

Cette balise div englobe l’ensemble des Ă©lĂ©ments liĂ©s Ă  l’animation des images.

Personnaliser cette partie revient Ă  dĂ©finir une description pour l’ensemble des images.


<div class="orbit-wrapper">


</div>

Un second bloc div défini avec la classe orbit-wrapper, servant à regrouper le bloc de contrÎle et le bloc de décrivant les images.


<div class="orbit-controls">
  <button class="orbit-previous"><span class="show-for-sr">Image précédente</span>&#9664;&#xFE0E;</button>
  <button class="orbit-next"><span class="show-for-sr">Image suivante</span>&#9654;&#xFE0E;</button>
</div>

Bloc de contrĂŽle, dĂ©fini Ă  l’aide de la classe orbit-controls, qui contient 2 boutons. Ici on peut encore personnaliser le texte destinĂ© aux lecteurs d’écran (contenu de la balise span avec la classe show-for-sr. On peut Ă©galement modifier le rendu du bouton en modifiant les sĂ©quences &#9664;&#xFE0E; (rendu : ◀) et &#9654;&#xFE0E; (rendu : ▶).

Ce bloc est facultatif


<ul class="orbit-container">


</ul>

En HTML la sĂ©quence <ul><li>EntrĂ©e 1</li><li>EntrĂ©e 2</li> 
 <li>EntrĂ©e n</li></ul> permet de dĂ©finir des listes. On dĂ©clare donc une liste ul avec la classe orbit-container, les Ă©lĂ©ments li permettront de dĂ©finir autant d’images que nĂ©cessaire.

Documentation sur les listes.


<li class="is-active orbit-slide">
  <figure class="orbit-figure">
    <img class="orbit-image" src="URL_IMAGE_1" alt="Description image 1">
    <figcaption class="orbit-caption">Image numéro 1</figcaption>
  </figure>
</li>
<li class="orbit-slide">
  <figure class="orbit-figure">
    <img class="orbit-image" src="URL_IMAGE_n" alt="Description image n">
    <figcaption class="orbit-caption">Image numéro n</figcaption>
  </figure>
</li>

...

La balise li dĂ©crivant les images doit ĂȘtre dĂ©finie avec la classe orbit-slide et la premiĂšre des images doit avoir Ă©galement appartenir Ă  la classe is-active.

Le systĂšme prĂ©voit l’affichage de l’image ainsi que d’une lĂ©gende. Il y a donc 2 valeurs Ă  dĂ©finir dans chaque Ă©lĂ©ment. C’est pour cela qu’on retrouve une balise figure (de classe orbit-figure) qui permettra de dĂ©finir d’une part l’image Ă  travers la balise img et la lĂ©gende Ă  travers la balise figcaption.

En HTML, une image est définie par son adresse (src="URL") et une description pour les lecteurs d'écran (alt="LaDescription").

Pour chaque image, il faut dĂ©finir l’URL de l’image, une description et une lĂ©gende.

Vous pouvez dĂ©finir autant d’images que vous le souhaitez.


<nav class="orbit-bullets">
  <button class="is-active" data-slide="0"><span class="show-for-sr">PremiĂšre image</span></button>
  <button data-slide="1"><span class="show-for-sr">Seconde image</span></button>
  <button data-slide="2"><span class="show-for-sr">TroisiĂšme image</span></button>
</nav>

Bloc de contrîle d’accùs direct. Cette fois c'est une balise nav qui va permettre de regrouper les boutons de navigation, permettant un accùs direct à chaque image.

On notera que le premier bouton doit appartenir Ă  la classe is-active et que tous les boutons doivent avoir un attribut data-slide avec comme valeur le numĂ©ro de l’image (Attention, comme souvent en informatique la numĂ©rotation commence Ă  partir de 0).

La balise span avec l’attribut class="show-for-sr" sera utilisĂ© par les lecteurs d’écran.

Ce bloc est facultatif

Mise en page à l’aide de XY Grid.

La mise en page d’un document HTML c’est souvent galĂšre, surtout lorsqu’on souhaite s’adapter Ă  l’écran du visiteur (« responsive » en anglais).

Foundation 6 arrive avec une solution Ă©lĂ©gante et simple d’utilisation, l’objet XY Grid.

La version pré-configurée de Foundation 6 que vous avez téléchargé, propose une mise en page basée sur 12 colonnes. Cela veut dire que la zone dans laquelle sera défini la balise div de classe grid-x, sera virtuellement découpé en 12 colonnes.

Voici quelques exemples:

<div class="grid-x">
  <div class="cell">1Êłá”‰ cellule pleine largeur</div>
  <div class="cell">2ᔈ cellule pleine largeur</div>
</div>
1Êłá”‰ cellule pleine largeur
2ᔈ cellule pleine largeur

Par défaut, une cellule fait 12 colonnes (soit la totalité de la largeur de la zone). Ici, on a 2 cellules pleines largeur, on obtient donc 2 lignes.


<div class="grid-x">
  <div class="cell small-6">1Êłá”‰ cellule de 6 colonnes</div>
  <div class="cell small-6">2ᔈ cellule de 6 colonnes</div>
</div>
1Êłá”‰ cellule de 6 colonnes
2ᔈ cellule de 6 colonnes

Ici on dĂ©finit la taille des cellules Ă  6 colonnes (Ă  l’aide de la classe small-6). Les 2 cellules peuvent donc tenir sur 1 seule ligne.

Les valeurs possibles pour small sont : small-x oĂč x peut prendre une valeur de 1 Ă  12. Lorsque qu’aucune valeur small-x n’est dĂ©finie, la cellule Ă  par dĂ©faut la largeur maximum, soit : small-12 – voir le 1er exemple oĂč la valeur n’est pas dĂ©finie.


<div class="grid-x">
  <div class="cell medium-6 large-4">1Êłá”‰ cellule de 12/6/4 colonnes</div>
  <div class="cell medium-6 large-8">2ᔈ cellule de 12/6/8 colonnes</div>
</div>
1Êłá”‰ cellule de 12/6/4 colonnes
2ᔈ cellule de 12/6/8 colonnes

Bon, ici cela se cela se complique. On voit apparaĂźtre medium-x et large-x. Dans la mesure oĂč il n’y a pas de small-x de dĂ©fini, il faut considĂ©rer que c’est small-12 qui est sĂ©lectionnĂ©.

Du coup, le dernier exemple revient à (ici la classe small-12 est inutile, je mets le code juste pour clarifier l’explication) :

<div class="grid-x">
  <div class="cell small-12 medium-6 large-4">1Êłá”‰ cellule de 12/6/4 colonnes</div>
  <div class="cell small-12 medium-6 large-8">2ᔈ cellule de 12/6/8 colonnes</div>
</div>
  • small-x: DĂ©finis le nombre de colonne pour les petits Ă©crans (typiquement un tĂ©lĂ©phone en vertical).
  • medium-x: DĂ©finis le nombre de colonne pour les Ă©crans de taille moyenne (typiquement une tablette).
  • large-x: DĂ©finis le nombre de colonne pour les grands Ă©crans (typiquement un ordinateur plein page).

Si aucune valeur medium-x, pour les écrans de taille moyenne, ce sera la valeur définie par small-x qui sera utilisée.
De mĂȘme si aucune valeur large-x, pour les grands Ă©crans c’est la valeur sĂ©lectionnĂ©e pour les Ă©crans de taille moyenne qui sera utilisĂ©e.

Références et compléments

኿


â„č 2006 - 2020 | 🕾 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog