Calendario mas semantico: tabla, div o lista?

Triby · #1 (**permalink**) 17/07/2009, 12:08

En www.tepeyacmb.edu.mx inclui un calendario hecho con divs, tomado del que hice en la ultima competencia CSS en que participe.

Daniel Ulczyk comento hace algun tiempo que tal vez seria mas semantico usando listas, lo que parece logico tomando en cuenta que son numeros del 1 al 28/31.

Cita:

Edito: Se me olvido recalcar que la opinion de Daniel fue teniendo en cuenta solo divs y listas, no hablamos de tablas.

El problema que veo en hacerlo con listas es que, por ejemplo, el primer dia de julio de 2009 es miercoles, quedando 3 dias vacios (actualmente con <div class="vacio"></div>) y tendria que usar <li class="vacio"></li>, pero tengo entendido que no pasaria el validador por tener LI sin contenido y por eso no lo he puesto en practica.

Podria ser con tablas, tambien parece logico, siendo filas y columnas. Lo que me llevo a hacerlo con divs fue principalmente la programacion/validacion que resulto mucho mas sencilla con divs, aunque tal vez complique la codificacion CSS.

Creo que en cuestiones de accesibilidad ganan las tablas, aun con CSS desactivado se mantiene la estructura.

Current troll mode:

¿Ustedes que opinan?

P.D. Con solo abrir el tema ya me estoy dando una idea de cual es la mejor opcion; de cualquier forma, me gustaria comparar todas las ventajas y desventajas en las tres opciones.

jalex16 · #2 (**permalink**) 17/07/2009, 12:17

excelente, pero en cuanto a las tablas, en este caso sería mejor usarlas

David · #3 (**permalink**) 17/07/2009, 12:23

Puedes hacerlo con listas, y en lugar de usar uno vacío al primer elemento le das un margen izquierdo de acuerdo a los días.

Aunque yo pienso que es más adecuado una tabla

.

Daniel Ulczyk · #4 (**permalink**) 17/07/2009, 12:25

Sólo comentar, antes de cualquier punto de vista (de mi parte) que la idea fue presentada en CSS Newbie, por Rob Glazebrook bajo el título A Semantic List-Based CSS Calendar

En este enlace, puede verse la idea que se ha llevado a cabo.

David · #5 (**permalink**) 17/07/2009, 12:37

Cita:

And while an argument could possibly be made that stuff in a calendar is a form of tablular data, it seems to me that in most cases a calendar is really just a list of events happening on specific dates.

Interesante punto de vista. Sin embargo, otro factor a tener en cuenta es que en muchos casos un calendario no sólo pretende ser una lista de eventos; también se pretende relacionar la fecha con el día de la semana, lo cual no se logra con una lista.

Triby · #6 (**permalink**) 17/07/2009, 12:52

Gracias por las respuestas.

Excelente argumento David, sigues siendo grande.

lucasan · #7 (**permalink**) 17/07/2009, 13:04

Definitivamente, ese es el punto.

Que se va a hacer? un listado de eventos? o un calendario?

Como dice David, un calendario puede o no tener eventos.

Un listado de eventos, usemos listas.

Un calendario común y silvestre, usemos tablas.

(Los Divs definitivamente no encajan)

Dato extra: Navegando con Jaws (el lector de pantalla) se comprende mucho mejor un calendario basado en tablas que en listas. Es mucho mas accesible, acabo de hacer una pequeña prueba.

Me animé tanto con el tema que hice un pequeño calendario en tablas

aquí lo pongo para dinamizar el tema.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="Lucas Torres" />

	<title>Calendario</title>

<style type="text/css">
body {
	font-size: 1em;
}

#calendario td, #calendario tr, #calendario th {
	border: #000 1px solid;
}

#calendario th {
	background-color: #E4E9FC;
}

.diaNumero {
	font-size: 0.7em;
}

.hoy {
	background-color: #FFFFD4;
}

</style>	
	
</head>

<body>

<table id="calendario">
	<thead>
		<tr>
			<th colspan="7" scope="col" class="anio">2009</th>
		</tr>
		
		<tr>
			<th colspan="7" scope="col" class="mes">Junio</th>
		</tr>
		
		<tr>
			<th scope="col" class="diaSemana">Lunes</th>
			<th scope="col" class="diaSemana">Martes</th>
			<th scope="col" class="diaSemana">Mi&eacute;rcoles</th>
			<th scope="col" class="diaSemana">Jueves</th>
			<th scope="col" class="diaSemana">Viernes</th>
			<th scope="col" class="diaSemana">S&aacute;bado</th>
			<th scope="col" class="diaSemana">Domingo</th>
		</tr>
	</thead>

<tr class="semana1">
	<td></td>
	<td></td>
	<td></td>
	<td><span class="diaNumero">1</span></td>
	<td><span class="diaNumero">2</span></td>
	<td><span class="diaNumero">3</span></td>
	<td><span class="diaNumero">4</span></td>
</tr>
<tr class="semana2">
	<td><span class="diaNumero">5</span></td>
	<td><span class="diaNumero">6</span></td>
	<td><span class="diaNumero">7</span></td>
	<td><span class="diaNumero">8</span></td>
	<td><span class="diaNumero">9</span></td>
	<td><span class="diaNumero">10</span></td>
	<td><span class="diaNumero">11</span></td>
</tr>
<tr class="semana3">
	<td><span class="diaNumero">12</span></td>
	<td><span class="diaNumero">13</span></td>
	<td><span class="diaNumero">14</span></td>
	<td><span class="diaNumero">15</span></td>
	<td><span class="diaNumero">16</span></td>
	<td class="hoy"><span class="diaNumero">17</span></td>
	<td><span class="diaNumero">18</span></td>
</tr>
<tr class="semana4">
	<td><span class="diaNumero">19</span></td>
	<td><span class="diaNumero">20</span></td>
	<td><span class="diaNumero">21</span></td>
	<td><span class="diaNumero">22</span></td>
	<td><span class="diaNumero">23</span></td>
	<td><span class="diaNumero">24</span></td>
	<td><span class="diaNumero">25</span></td>
</tr>
<tr class="semana5">
	<td><span class="diaNumero">26</span></td>
	<td><span class="diaNumero">27</span></td>
	<td><span class="diaNumero">28</span></td>
	<td><span class="diaNumero">29</span></td>
	<td><span class="diaNumero">30</span></td>
	<td><span class="diaNumero">31</span></td>
	<td></td>
</tr>
</table>

</body>
</html>

buzu · #8 (**permalink**) 17/07/2009, 13:06

Es diferente un calendario a una agenda. Una agenda si es una lista de eventos. Por otro lado, una lista de fechas especificas no es tampoco un calendario, eso sería más bien una linea del tiempo o algo parecido. En cuanto un calendario tal y como se le conoce, es un elemento que debe ser tomado como información tabulada dada la estructura de días de la semana en correspondencia con la fecha. Hasta hoy no he visto un calendario que se vea como esto:

1 Lunes
2 Martes
3 Miércoles
4 Jueves
5 Viernes
6 Sábado
7 Domingo
8 Lunes
9 Martes
10 etc...

Si los calendarios tuvieran ese para nada usable formato entonces sí pudiéramos hablar de listas. Sin embargo, el hecho de que las listas pueden ser manipuladas a través de CSS para simular la estructura de una tabla no quiere decir que usar listas sea precisamente una alternativa aceptable, semántica o usable para crear calendarios. Como vien se mencionó con anterioridad, usar listas simplemente eliminaría cualquier intento de accesibilidad/usabilidad al desactivar CSS.

La idea de los divs no es tampoco aceptable desde un punto de vista semántico, ya que el trabajo de los divs es separar secciones de un sitio de modo que se pueda mantener un orden más lógico y entendible en la estructura de los sitios. Sirven para brindar un orden estructural que con las tablas no era posible lograr, sin embargo, no pueden reemplazar a las tablas cuando el uso de estas es pertinente debido a la naturaleza tabular del contenido que pretendemos representar.

Tomando este pequeño análizis, el cual es simplemente mi opinión y no una verdad absoluta, podemos decir que la forma correcta de representar un calendario es mediante el uso de tablas. Claro, eso hasta que a los de HTML5 se les ocurra agregar un elemento <calendar> o es que ya lo hay? XD

kseso? · #9 (**permalink**) 17/07/2009, 13:13

No me tomen muy en serio, pero ¿un calendario no son datos presentados con una separación uniforme entre ellos, donde el bloque general tiene un título (mes) y cada columna el suyo (día de la semana)?

No tengo duda que éste es un ejemplo claro de un buen uso de una tabla.

Un saludo

Demoré en publicarlo por el tlf. y creo que soy redundante sin aportar nada nuevo.

Triby · #10 (**permalink**) 17/07/2009, 23:55

lucasan, buzu y kseso?, gracias por los aportes, son realmente muy importantes y relevantes, principalmente porque deja muy claro y sin lugar a dudas la necesidad de usar tablas en determinados casos; los que somos enemigos de ellas a veces nos dejamos llevar por los impulsos y no analizamos, simplemente omitimos <table> y todos sus relativos.

Ciertamente con divs (o listas) hay un poco mas de flexibilidad para "efectos visuales", sin embargo, eso no justifica sacrificar semantica y accesibilidad.

Acabo de pasar ese calendario a tablas y realmente no fue tan dificil, como 10 lineas mas de html, 20 de php y 15 menos de css fue el resultado de la transformacion. Me gusta mas como se ve ahora, utilizando todo el ancho disponible, aunque tambien me gustaba la combinacion de colores de fondo que tenia... una cosa compensa a la otra.

Gracias a todos por responder, con sus aportes nos dieron una gran leccion a los que somos "tableless fans 100%".