5568 sujets

Sémantique web et HTML

Quel balisage utiliser ?

Bonjour à tous,

j'ai pour projet la réalisation d'un planning qui doit avoir en colonne les demi heures et en ligne les différents intervenants (exemple : http://spreadsheets.google.com/ccc?key=0AjwJRZUVp-RfdHY1ZTA0WHNXak9PbTNkdDJTdWRSVEE&hl=fr&authkey=CNfgv4YK)

Sur ce planning devront apparaitrent différents événements. (un peu comme sur google calendar pour ceux qui connaisse)

Je m'interroge donc sur le balisage le plus adapté à la réalisation de ce planning.

Je me suis dans un premier temps diriger vers un tableau de 48 colonnes (gestion à la demi heure) , avec modification des <td> en fonction des événements.
En gros je sais que mon événement se déroule de 15 à 18h , je supprime tout les <td> jusqu'à 18h et fait un colspan sur le premier.

Mais cette solution est lourde et vraiment pas pratique à maintenir (tableau énorme). Qu'en pensez vous ? Y'a t'il plus simple , notemment au niveau du placement des événements ?

Merci pour vos conseils
Salut,
grunky a écrit :
Mais cette solution est lourde et vraiment pas pratique à maintenir (tableau énorme). Qu'en pensez vous ? Y'a t'il plus simple , notemment au niveau du placement des événements ?
Pour moi, dans ce cas, le tableau est ce qu'il y a de plus sémantique (et donc accessible, intéropérable, évolutif, etc.). Pour ce qui est du côté fastidieux de la manipulation du code, plutôt que de remettre en question le balisage html, j'explorerais d'abord la possiblité de me coder, à côté, un outil pour le faire à ma place (à base de PHP et XML/SQL, par exemple).

Maintenant, pour plusieurs raisons, c'est peut-être pas possible pour toi, et dans ces cas là, y'a toujours des solutions moins propres à disposition Smiley smile . En voilà une parmi tant d'autres, ou du moins une base de réfléxion : il s'agirait de réaliser le placement de tes évènements 100% en CSS. Ça donnerait un truc comme ça :
<!-- Une ol par intervenant -->
<ol>
	<li class="h0730 d0030">toilette</li>
	<li class="h0900 d0300">école</li>
	<li class="h1400 d0130">piscine</li>
	<li class="h1930 d0100">dîner</li>
</ol>
La classe h.... représenterait l'heure de départ, et la classe d.... la durée de l'évènement. Côté CSS :
ol {
position:relative;
}

li {
position:absolute;
}

/* ici 48 classes pour l'heure de départ (une pour chaque demi-heure) */
.h0000 { left:0; }
.h0030 { left:10px; }
.h0100 { left:20px; }
.h0130 { left:30px; }

/* ici 48 classes pour la durée (une pour chaque demi-heure) */
.d0000 { width:0; }
.d0030 { width:10px; }
.d0100 { width:20px; }
.d0130 { width:30px; }
Voilà, sinon en Javascript, là tu pourras tout faire, même rendre cette solution propre, mais y'aura un peu de développement de ton côté.
Modifié par marcv (06 Aug 2010 - 17:06)
Merci pour ta réponse,

Je suis entrain de tester une solution à base tableau nettement moins contraignante qu'au départ.
Au lieu qu'une ligne contienne 48 cases , elle en contient une seule de toutes la longueur , avec une background qui se répète.

Mes événements sont ensuite des divs flottant que je place en px par rapport à la cellule principal.

C'est en phase de test mais cela me semble être un compromis intéressant.
Hello,

en faisant un tableau sans utiliser de tableau, tu va juste te galérer pour la mise en forme et au final avoir un balisage similaire à celui d'un tableau.

Voici un exemple avec tableau :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tableau</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #000;
}
td {
border: 1px solid #000;
vertical-align: top;
}
</style>
</head>
<body>
<table>
<tr>
	<td>0h00</td><td>0h30</td><td>1h00</td><td>1h30</td><td>2h00</td><td>2h30</td><td>3h00</td><td>3h30</td><td>4h00</td><td>4h30</td><td>5h00</td><td>5h30</td><td>6h00</td><td>6h30</td><td>7h00</td><td>7h30</td><td>8h00</td><td>8h30</td><td>9h00</td><td>9h30</td><td>10h00</td><td>10h30</td><td>11h00</td><td>11h30</td><td>12h00</td><td>12h30</td><td>13h00</td><td>13h30</td><td>14h00</td><td>14h30</td><td>15h00</td><td>15h30</td><td>16h00</td><td>16h30</td><td>17h00</td><td>17h30</td><td>18h00</td><td>18h30</td><td>19h00</td><td>19h30</td><td>20h00</td><td>20h30</td><td>21h00</td><td>21h30</td><td>22h00</td><td>22h30</td><td>23h00</td><td>23h30</td>
</tr>
<tr>
	<td colspan="16">Pas d'événement</td><td colspan="4">Evénement de 2 heures</td><td colspan="28">Pas d'événement</td>
</tr>
<tr>
	<td colspan="20">Pas d'événement</td><td colspan="1">Evénement de 1/2 heure</td><td colspan="1">Pause</td><td colspan="4">Evénement de 2 heure</td><td colspan="22">Pas d'événement</td>
</tr>
</table>
</body>
</html>


et pas besoin d'écrire 48 case ou de les supprimer quand il ne se passe rien.
marcv a écrit :
Pour moi, dans ce cas, le tableau est ce qu'il y a de plus sémantique (et donc accessible, intéropérable, évolutif, etc.).

Pour ma part j'ai un gros doute là-dessus.

Si j'ai 48 lignes, avec en début de chaque ligne un en-tête du type <th scope="row">14h-14h30</th>, je ne suis pas sûr qu'un TD avec un colspan de 5 cases soit facilement compréhensible comme allant de tel à tel créneau lors d'une lecture non visuelle.

Je pense même (hypothèse qu'il faudrait vérifier!) qu'un système sans tableau pourrait être beaucoup plus accessible. Le principe serait d'avoir un contenu HTML textuel simple et compréhensible:
<h1>Programme du séminaire</h1>

<h2>Mardi 15 juin</h2>

<h3>9h-12h30: Tournage de pouces</h3>
<p>Bla bla sur le tournage de pouces</p>

<h3>12h30-14h: Casse-croute</h3>
<p>Infos sur le casse-croute</p>

<h3>14h-17h30: Ronflements sonores</h3>
<p>Les différentes qualités de ronflement par le Dr Hagard</p>

<h2>Mercredi 16 juin</h2>
...

Ensuite, en ajoutant quelques DIV et des classes qui vont bien, on peut:
- Afficher chaque jour sur une pseudo-colonne.
- Afficher une échelle des heures à gauche, à droite, entre les colonnes si on veut...
- Masquer les informations d'horaire au niveau de chaque période.
- Afficher chaque période comme un bloc de N unités de haut (un jeu de classes peut aider).

Je ne garantis pas que cette approche puisse donner un résultat accessible, mais ce serait à creuser.
Modifié par Florent V. (08 Aug 2010 - 02:29)
Sujet clos
Aller à