¿Cómo maquetar el cuadro de una competición deportiva?
En un proyecto en el que estamos trabajando vamos a mostrar el cuadro de las eliminatorias de competiciones deportivas.
Por ejemplo:
He buscado bastante y en general la solución suele pasar por un PDF o un objeto flash. Mis problemas para maquetarlo con xhtml-css vienen por lo siguiente:
¿Qué xhtml escribir de manera que tenga algo de sentido semántico?
Quizá una tabla, en la que las columnas fueran las rondas tendría algo de sentido...
Quizá toda una colonia de listas anidadas... no sé no sé...
Y al margen de la semántica, ¿Cómo maquetar de manera que sea bastante replicable y automágico, o sea poco CSS y pocos trucos sucios?
Puede que unas columnas de divs con un fondo con las líneas para unir las rondas.
Además está el problema del ancho del cuadro, por encima de 16 empieza a ser complicao meterlo en unos 800px, no sé si arriesgarme con un "overflow auto", ya que el scroll horizontal nunca me ha gustado un pelo...
bueno, me gustaría contar con alguna tercera opinión de sus mercedes =)
dagi3d
¿y que tal una lista de definición?
http://xhtml.com/en/xhtml/reference/dl/
al fin y al cabo estás describiendo elementos a traves de un nombre y su valor
Usuario desconocido
Yo voto por usar listas UL/OL y ponerles "hijos". En plan:
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Es lo más semántico que se me ocurre. Ya, después, con CSS y la propiedad float puedes hacer el resto.
lute3d
de momento, en la primera versión estoy sacrificando la semántica, SCRUM es un mecanismo implacable, y me obliga a avanzar pinchándome con un hierro al rojo...
que conste que he intentado pintarlo con tablas, pero al 5º bucle anidado me he dado cuenta de que por ahí no... tener en cuenta que el cuadro puede partir de hasta 64º de final, es decir, 64 partidos, 128 jugadores...
de todas maneras, me da a que esta historia de usuario va a tener versionados en cada sprint, ya haremos la revisión semántica más adelante... =)
txuma Plus
Si el objetivo es conseguir algo semántico, la lista no me vale. Es un truco que puede funcionar para conseguir la apariencia que queremos, pero no es suficiente. Para ser semánticos tenemos que poner en relación cada equipo con los tantos que ha anotado, y eso podemos hacerlo con una tabla.
La verdad que habría que darle una vuelta, pero está claro que habría que plantear una tabla bastante compleja, y utilizar muy bien los atributos que permiten marcar relaciones entre celdas. O tal vez plantear tablas independientes, aunque perdamos la relación entre una fase y otra a nivel semántico. No lo tengo claro, pero sospecho que algo habrá que sacrificar.
ismael_gonzalez
Esto ilustra más a lo que me refiero:
http://www.as.com/baloncesto/nba/play-offs/
ismael_gonzalez
Yo haría un UL general, con 3 li (cuartos, semis y final) dentro de cada li otro ul en el que cada li sería el equipo.
<ul>
<li>
<ul>
<li><a href="#">Equiipo 1</a> <strong>1</strong></li>
<li><a href="#">Equiipo 2</a> <strong>4</strong></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">Equiipo 1</a> <strong>1</strong></li>
<li><a href="#">Equiipo 2</a> <strong>4</strong></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">Equiipo 1</a> <strong>1</strong></li>
<li><a href="#">Equiipo 2</a> <strong>4</strong></li>
</ul>
</li>
</ul>
Algo así, espero servirte de ayuda, he elegido este tipo de maquetación porque es un listado de partidos con sus resultados correspondientes.
Yo no creo que se deban representar como datos tabulados.
psycho
Yo lo maquetaría por bloques, si el bloque tiene "hijos" ensanchas el padding de la derecha y metes una imagen de background que sería las líneas de clasificación...
bueno es solo la idea, pero a partir de aquí, ya te lo puedes currar mas o menos:
lute3d
jeje, sí, flash-PDF los descarté desde el primer momento, de hecho, en la medida de lo posible no voy a utilizar ni js, buscaba algo ligero y lo más planito posible... por que en una misma página puede haber muuuuchos cuadros...
de ahí que al final haya pasado de la semántica, la opción de la tabla no es para nada descartable en el cliente, pero agregaba una complejidad extra en la parte de la vista por aquello de los rowspan, th etc, que no nos ha merecido la pena... al menos de momento...
además, las ordenadas no son solo los equipos, también serán fechas y resultados en otra "fila", así que tampoco por esa parte era demasiado elegante, habría que estar tejiendo una maraña de th`s infumable....
estamos construyendo la siguiente estructura con divs y span dependiendo del caso, cada ronda es una "columna" :
---RONDA - X ---
--partido--
----- jug1 ----
----- fech - resultado - links -----
---- jug2 ----
--end partido ---
--- ... más partidos ... -----
---- end ronda ---
Lo bueno es que es mucho más fácil el desarrollo en la vista, más económico de pintar, lo malo es que entre rondas no hay ninguna relación estructural, por tanto el orden de lectura del HTML no es el orden en que leeríamos un cuadro completo, y la integridad visual lógica entre partidos depende de un triste CSS....
ayns...
santiagomeneses
Hola a todos,
pues yo semánticamente en este caso, y solo en este caso, optaría por una tabla, ya que si te das cuenta lo que estas presentando son datos tabulares.
Eje de ordenadas: situación, es decir, final - cuartos
Eje de abcisas: equipos
No usaría flash, hay que evitar todo lo que no sea estandar.
Un saludo.
lute3d
ketodico --> graciosillo :P
JML --> gracias, sí, algo así había pensado, pero necesito más versatilidad, (si paso de la semántica) las líneas entre cada ronda irán incluidas en el emparejamiento correspondiente.
Por otra parte cada ronda ha de tener su separación vertical para hacerse coincidir con la anterior, y así sucesivamente...
Está claro que por encima de 4º voy a tener que inventarme algo, como pueda ser hacer la mitad del cuadro arriba y la otra mitad abajo o algo así... si no quiero que haya scroll horizontal, claro.
¿alguna idea más por ahí?
jmlweb
Yo crearía una capa llamada "cuartos de final", cuya imagen de fondo serían las líneas de la derecha. Dentro de esa capa metería las listas (1 por cada enfrentamiento). Haría lo mismo para "semifinales" y "final".
ketodico
Yo tengo algo parecido en un flash... nuse si te valdrá :)))))