Foros del Web » Creando para Internet » HTML »

Calendario mas semantico: tabla, div o lista?

Estas en el tema de Calendario mas semantico: tabla, div o lista? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/07/2009, 13:08
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Calendario mas semantico: tabla, div o lista?

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.
__________________
- León, Guanajuato
- GV-Foto

Última edición por Triby; 17/07/2009 a las 13:36 Razón: Agregar aclaracion.
  #2 (permalink)  
Antiguo 17/07/2009, 13:17
 
Fecha de Ingreso: octubre-2006
Mensajes: 562
Antigüedad: 11 años, 2 meses
Puntos: 12
Respuesta: Calendario mas semantico: tabla, div o lista?

excelente, pero en cuanto a las tablas, en este caso sería mejor usarlas
  #3 (permalink)  
Antiguo 17/07/2009, 13:23
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Calendario mas semantico: tabla, div o lista?

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 .
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #4 (permalink)  
Antiguo 17/07/2009, 13:25
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Respuesta: Calendario mas semantico: tabla, div o lista?

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.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #5 (permalink)  
Antiguo 17/07/2009, 13:37
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: Calendario mas semantico: tabla, div o lista?

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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 17/07/2009, 13:52
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Calendario mas semantico: tabla, div o lista?

Gracias por las respuestas.

Excelente argumento David, sigues siendo grande.
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 17/07/2009, 14:04
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Calendario mas semantico: tabla, div o lista?

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> 
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #8 (permalink)  
Antiguo 17/07/2009, 14:06
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Calendario mas semantico: tabla, div o lista?

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
__________________
twitter: @imbuzu
  #9 (permalink)  
Antiguo 17/07/2009, 14:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Calendario mas semantico: tabla, div o lista?

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 18/07/2009, 00:55
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Calendario mas semantico: tabla, div o lista?

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%".
__________________
- León, Guanajuato
- GV-Foto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:24.