Utiliser figure et figcaption pour faire ça ?

Version imprimable

20/12/2014, 13h08
jimmylet

1 pièce(s) jointe(s)

Utiliser figure et figcaption pour faire ça ?

Bonjour,

Je suis étudiant en 1ère infographie. Pour le cours de WEB, nous devons réaliser un site web concernant notre groupe, etc. sur base d'un modele. Nous devons faire uniquement la page HTML de la manière sémantique la plus "parfaite", incluant toutes les contraintes d'accessibilité vue au cours.

Pour la page "Groupe", nous devons réaliser ceci.

Pièce jointe 164361

Je bloque sur le côté droit. En réalité, chaque image redirige vers le lien du nom. A chaque fois que le nom est survolé par le curseur (ou que le curseur survole l'image), l'image associée au nom s'agrandit (un petit effet stylisé).

Aujourd'hui, je ne m'occupe pas du code CSS (on ne l'a pas encore vu au cours, on doit juste s'occuper de la partie codage (x)HTML5).

J'aimerais utiliser la balise "figure" et "figcaption". Je ne sais pas si c'est une bonne idée? J'ai aussi cru qu'on pouvait le faire sous forme de liste? Quelle est la meilleure solution ici?

Pourrais-je par la suite, effectuer la disposition comme sur l'exemple plus haut en CSS (oui, car la partie CSS de ce site, on devra la faire une fois que l'on aura vu le CSS).

Puis-je aussi mettre cette partie dans une balise sectionnante? (un nav, ou un aside par exemple?)

Je vous remercie de m'avoir lu et d'avance, pour votre aide!

Jimmylet.
20/12/2014, 18h45
CosmoKnacki

L'utilisation d'une liste est une très bonne idée du point de vue sémantique, c'est clairement la liste des membres de l'équipe donc il n'y a pas photo.
Ensuite dans chaque items de la liste, tu peux placer une balise <figure> contenant dans l'ordre la balise <figcaption> avec le nom du membre et sa description, puis l'image (cette ordre te sera utile plus tard pour gérer l'effet d'agrandissement).

L'utilisation de <nav> pour placer la partie de droite est à proscrire, cette partie ne contient aucun lien, ce n'est pas du tout un élément de navigation. Par contre, <aside> est plus approprié car il s'agit d'un contenu relatif au bloc de gauche.

Merci beaucoup CosmosKnacki ! Ton aide est très appréciable.

Je pense que ton idée est mieux que la mienne. Et cela me semble très bien.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <ul> <li> <figure> <img...> <figcaption> <h3 role="heading" aria-level="3">Jerome Dupont</h3> <p>Description</p> </figcaption> </figure> </li> <li> .... </ul>
Pour la navigation, justement, chaque nom est composé d'un lien vers la page de l'élève et c'est pour cela que j'hésitais avec <nav> ? C'est toujours faux ou c'est mieux aside?

Il faut savoir que sur le site, il y a une barre de navigation ainsi qu'un deuxième <nav> pour le fil d'ariane. Donc un troisième, je ne sais pas si ce serait bien.

Merci beaucoup !

EDIT : Et il sera réalisable de disposer cela en CSS par la suite comme sur l'exemple ?

Merci

20/12/2014, 21h18
CosmoKnacki

Dans ce cas c'est différent, si chaque item est un lien, <nav> est approprié car il s'agit bien d'un bloc de liens.
Maintenant si tu veux marquer la différence par rapport à ta barre de navigation principale, <aside> reste une meilleur option car son contenu est relatif à celui du bloc de gauche, tout en restant parfaitement adapté pour une navigation additionnelle.

En ce qui concerne la mise en forme, oui c'est tout à fait possible.
20/12/2014, 21h43
jimmylet

Merci beaucoup ! Je vais donc suivre tes conseils!
21/12/2014, 09h11
NoSmoking

Bonjour,
il me semble également que l'utilisation d"une DL serait, sémantiquement parlant, pas mal.
21/12/2014, 12h14
jimmylet

Bonjour,

Je viens d'aller voir sur un autre site qui parle de l'utilisation d'une DL. Cependant, il y a des personnes qui sont pour et d'autres qui sont contre. Je pense donc utiliser le couple figure figcaption incorporé dans une liste, cette nouvelle balise semble faire l'unanimité et cela est très bien. Mais grâce a ton commentaire, j'ai appris que la DL pouvait être utilisée dans plusieurs cas et non seulement dans une liste mots/définitions :)

Citation:

Cependant, il y a des personnes qui sont pour et d'autres qui sont contre.

Ca c'est le propre de l'interprétation :lol:

Citation:

Je pense donc utiliser le couple figure figcaption incorporé dans une liste

perso je pense que FIGURE n'est pas ce qui représente le mieux ce que tu souhaites présenter, mais comme dit plus haut il y a les pour et les contre.

exemple de représentation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation DL</title>
<meta name="Author" content="NoSmoking">
<style>
section {
  font:100%/125% Verdana,sans-serif;
  margin:1em;
}
dl{
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
}
dt{
  background-color:#A7CFCF;
  background: linear-gradient(to bottom, #A7CFCF 0%,#23456A 100%);
  color: #EEF;
  padding:.5em;
  font-weight: bold;
}
dd{
  margin:0;
  padding:.5em;
  font-style: italic;
  border-left: 1px solid #ABC;
  border-right: 1px solid #ABC;
}
dd:nth-child(3n){
  border-bottom: 1px solid #ABC;
  margin:0 0 1em 0;
}
</style>
</head>
<body>
<section>
  <h1>Quelques responsables DVP</h1>
  <dl>
    <dt>Bovino</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
    <dd>Responsable Développement Web</dd>
 
    <dt>snake264</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
    <dd>Responsable Web sémantique</dd>
 
    <dt>Vermine</dt>
    <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
    <dd>Responsable JavaScript &amp; AJAX</dd>
  </dl>
</section>
</body>
</html>

21/12/2014, 18h54
jimmylet

C'est vrai, je remarque qu'il y a plusieurs possibilités. Le tout est de trouver la meilleure. C'est la première fois que l'on a un aussi gros travail à faire. Généralement, c'était des exercices sur ce que l'on voyait dans le cours en théorie. Aujourd'hui, c'est l'application complète. On a pas encore vu tout l'HTML (ça c'est pour ceux qui se destine au web, comme moi) et encore rien en présentation (c'est pour après janvier).

Ton exemple me fait maintenant hésité, je vais devoir peser le pour et le contre. Comme je n'y connais encore rien en présentation, est-ce que ton exemple me permet aussi de réaliser ce que je devrais faire par la suite sur le modèle ? Ce que je veux dire par la, est-ce que je pourrais "dissocier" les images du reste du bloc nom+description ?

Merci pour ton aide en tout cas!
22/12/2014, 00h11
CosmoKnacki
Dissocier les images n'est pas un problème, avec le CSS, tu peux très bien positionner un élément en dehors de son bloc d'origine.

En ce qui concerne l'utilisation des listes de définitions, du point de vue sémantique, je dis pourquoi pas. Par contre c'est une structure plus contraignante parce que dl ne peut avoir pour enfants que les éléments dt et dd, il n'est pas possible d'encapsuler chaque item (l'ensemble nom+description+image) dans un élément qui lui soit propre.
Avec cette structure:
Code:

1 2 3 4 5 <dl> <dt>nom1</dt> <dd>desc1</dd> <dd><img src="nom1.jpg" alt="nom1" /></dd> </dl>
- Pour pouvoir rendre tous les éléments cliquables, tu devras dupliquer le même lien pour chaque élément puisque tu ne peux pas encadrer l'ensemble:
  Code:
  
  1 2 3 4 5 <dl> <dt><a href="nom1.htm">nom1</a></dt> <dd><a href="nom1.htm">desc1</a></dd> <dd><a href="nom1.htm"><img src="nom1.jpg" alt="nom1" /></a></dd> </dl>
- Il ne sera pas possible d'illuminer (ou autre effet) le nom et/ou la description au survol de l'image (pour lier visuellement la photo avec le nom de la personne), car malheureusement en CSS on ne peut pas atteindre l'élément précédent qui est au même niveau. (par contre on peut atteindre les éléments suivant, donc l'effet sur l'image est toujours possible au survol du nom)
L'utilisation d'une liste ul permet d'éviter ces deux problèmes, car rien n'empêche d'encadrer l'ensemble nom+description+image dans un seul et même lien, ce qui rend possible du même coup le déclenchement des effets quelque soit la zone de survol, il suffit des les déclencher au survol du lien.
Après, tout dépend de ton cahier des charges.
24/12/2014, 14h57
NoSmoking

Je n'avais pas pris en compte ton besoin d'effet et dans ce cas il est parfois nécessaire de s'assoir légèrement sur la sémantique des balises pour une autre moins forte.

Tu pourrais également créer autant de DL que tu as d'acteurs, le tout dans une UL, et dans ce cas tu pourrais obtenir ton résultat en jouant sur les positions relative/absolute des éléments.

Mais au final comme l'a écrit CosmoKnacki

Citation:

Après, tout dépend de ton cahier des charges.
24/12/2014, 14h59
Bovino

Citation:

Envoyé par CosmoKnacki

Par contre c'est une structure plus contraignante parce que dl ne peut avoir pour enfants que les éléments dt et dd, il n'est pas possible d'encapsuler chaque item (l'ensemble nom+description+image) dans un élément qui lui soit propre.

Je comprends pas... :koi:
Tu as exactement la même contrainte avec une liste <ul> : les enfants ne peuvent être que des <li>. :?

Citation:

Envoyé par Bovino

Je comprends pas... :koi:
Tu as exactement la même contrainte avec une liste <ul> : les enfants ne peuvent être que des <li>. :?

Bien sûr, mais si tu veux rendre tout cliquable, tu peux écrire ça:
Code:

1 2 3 4 5 <ul> <li><a href...>...</a></li> <li><a href...>...</a></li> <li><a href...>...</a></li> </ul>
où le lien englobe et le nom, et la description, et l'image.

par contre avec une liste de définitions tu es obligé de dupliquer le même lien pour chaque élément de l'item:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <dl> <dt><a href...>nom</a></dt> <dd><a href...>desc</a></dd> <dd><a href...><img...></a></dd> <dt><a href...>nom</a></dt> <dd><a href...>desc</a></dd> <dd><a href...><img...></a></dd> <dt><a href...>nom</a></dt> <dd><a href...>desc</a></dd> <dd><a href...><img...></a></dd> </dl>
Et, au delà du surplus d'écriture, on ne peut pas déclencher une illumination du nom et/ou de la description au survol de l'image, car on se retrouve coincé au niveau des sélecteurs css (il n'y a pas de sélecteur :previous). Cet effet me semble nécessaire du fait de la disposition particulière des images par rapport à l'ensemble nom/description, le lien visuel n'est pas immédiat.

24/12/2014, 17h47
Bovino

Certes, mais qu'est-ce qui t'empêche de regrouper les éléments dans un unique <dd> comme tu le fais avec les <li> ? La seule contrainte étant d'extraire un terme plus générique sans forcément de lien (hypertexte s'entend, pas sémantique) pour le placer dans un <dt>.

Bon, je te concède toutefois que la liste est quand même plus simple à utiliser et me semble plus appropriée. ;)

Voilà en fait à quoi je pensais, ou pas loin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<section>
  <h1>Quelques responsables DVP</h1>
  <ul>
    <li>
      <a href="http://www.developpez.net/forums/u243304/bovino/">
        <dl>
          <dt>Bovino</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
          <dd>Responsable Développement Web</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u125580/snake264/">
        <dl>
          <dt>snake264</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
          <dd>Responsable Web sémantique</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u226061/vermine/">
        <dl>
          <dt>Vermine</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
          <dd>Responsable JavaScript &amp; AJAX</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>

et coté CSS on peut quand même faire pas mal de truc

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
html, body{
  background:#F0E8D8;
}
h1{
  color: #706040;
  text-shadow:1px 1px 0px #FFF;
}
section {
  font:100%/125% Verdana,sans-serif;
  width:40em;
  margin:auto;
}
ul{
  padding:0;
  list-style:none;
  width:10em;
  margin:auto;
}
ul a{
  text-decoration:none;
  border:0;
  color:#000;
}
dl{
  position:relative;
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
  cursor:pointer;
}
dl img {
  position:absolute;
  right:100%;
  top:0;
  transition: all 0.5s ease;
  transform:rotate(-10deg) scale(0.75);
}
dl:hover img{
  transform:rotate(0deg);
  right:90%;
}
dl:hover dt{
  color:#F00;
}
dt{
  padding:.5em;
  font-weight: bold;
  color:#706040;
  transition: all 0.5s ease;
}
dd{
  margin:0;
}

pour au final obtenir ce code de test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Utilisation DL</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  background:#F0E8D8;
}
h1{
  color: #706040;
  text-shadow:1px 1px 0px #FFF;
}
section {
  font:100%/125% Verdana,sans-serif;
  width:40em;
  margin:auto;
}
ul{
  padding:0;
  list-style:none;
  width:10em;
  margin:auto;
}
ul a{
  text-decoration:none;
  border:0;
  color:#000;
}
dl{
  position:relative;
  margin: 2em 0;
  padding: 0;
  width: 12em;
  text-align: center;
  font-size:0.8em;
  cursor:pointer;
}
dl img {
  position:absolute;
  right:100%;
  top:0;
  transition: all 0.5s ease;
  transform:rotate(-10deg) scale(0.75);
}
dl:hover img{
  transform:rotate(0deg);
  right:90%;
}
dl:hover dt{
  color:#F00;
}
dt{
  padding:.5em;
  font-weight: bold;
  color:#706040;
  transition: all 0.5s ease;
}
dd{
  margin:0;
}
</style>
</head>
<body>
<section>
  <h1>Quelques responsables DVP</h1>
  <ul>
    <li>
      <a href="http://www.developpez.net/forums/u243304/bovino/">
        <dl>
          <dt>Bovino</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/243304-bovino.gif?dateline=1214391152" alt="Bovino"></dd>
          <dd>Responsable Développement Web</dd>
        </dl>
      </a>
    </li>
    <li>
      <a href="http://www.developpez.net/forums/u125580/snake264/">
        <dl>
          <dt>snake264</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/125580-snake264.gif?dateline=1323444237" alt="snake264"></dd>
          <dd>Responsable Web sémantique</dd>
        </dl>
      </a>
    </li>
 
    <li>
      <a href="http://www.developpez.net/forums/u226061/vermine/">
        <dl>
          <dt>Vermine</dt>
          <dd><img src="http://www.developpez.net/forums/avatars/226061-vermine.gif?dateline=1417677130" alt="Vermine"></dd>
          <dd>Responsable JavaScript &amp; AJAX</dd>
        </dl>
      </a>
    </li>
  </ul>
</section>
</body>
</html>