Hola Martín,
He estado siguiendo el hilo de tu post y tengo algunas sugerencias. Primero, me
gustaría aclarar cual es el fin que persigues, ya que hablas de darle estructura
a los datos, es ahí donde captaste mi atención ya que ni xhtml ni css fueron
diseñados para dar estructura a los datos, xhtml da estructura a la pagina
(layout) y css da la presentación.
Después note que hablas de usar <h3> en uno solo o en todos los <span>, lo cual
apunta mas a que lo que buscas es optimizar la presentación, no los datos. Si es
este el caso, yo recomendaría que agregues otro dato: el nombre del concierto, y
uses en el <h3> o bien optes por lo que parece ser tu preferencia: aplica <h3> a
todo y que la imagen actúe a modo de titulo, pero esto no es una buena practica,
te sugiero que agregues de todos modos el nombre o titulo, aunque sea en texto
oculto.
Si lo que deseas es darle estructura a los datos, existe también un lenguaje
para eso: el xml, este fue diseñado para estructurar y transportar datos, que en
tu caso vendría muy bien. Además de eso, puedes incluso definir la presentación
de dichos datos por separado con lenguaje xlst o bien usar css en tu pagina,
ambos casos dan excelentes resultados y dependen de tu preferencia.
Otras ventajas que obtienes: no tienes que estar actualizando tu html y css ya
que los datos están en un fichero independiente. Puedes manejar múltiples
presentaciones de los mismos datos (usando xlst) sin cambiar hacer cambios a tu
pagina. Los datos así son muy fáciles de transportar y re-utilizar en otras
paginas. Puedes ordenar y filtrar los conciertos en base a cualquier criterio
que definas sin cambiar el html, una simple línea en tu fichero xslt basta para
ordenar y una para filtrar (una por cada filtro). Puedes presentar toda la
información o parte de ella (puedes por ejemplo, omitir contenido relacionado y
presentar el resto)
Para tu caso el xml seria algo así:
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalogo>
<concierto>
<imagen>imagen1.jpg</imagen>
<grupo>Grupo1</grupo>
<hora>00:00</hora>
<sala>Nombre de la sala</sala>
<pueblo>Nombre del pueblo</pueblo>
<descripcion>Lorem ipsum dolor sit amet. Con minimim venami quis nostrud
laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum
iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing
elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat
voluptat.</descripcion>
<website>www.webdelgrupo.com</website>
<contenidoRelacionado>
<contenido>
<descripcion>Descricpcion 1</descripcion>
<url>www.urldelcontenido.com</url>
</contenido>
<contenido>
<descripcion>Descricpcion 2</descripcion>
<url>www.urldelcontenido.com</url>
</contenido>
</contenidoRelacionado>
</concierto>
<concierto>
<imagen>imagen2.jpg</imagen>
<grupo>Grupo2</grupo>
<hora>00:00</hora>
<sala>Nombre de la sala</sala>
<pueblo>Nombre del pueblo</pueblo>
<descripcion>Lorem ipsum dolor sit amet. Con minimim venami quis nostrud
laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate
nonumi.</descripcion>
<website>www.webdelgrupo.com</website>
<contenidoRelacionado>
<contenido>
<descripcion>Descricpcion 1</descripcion>
<url>www.urldelcontenido.com</url>
</contenido>
</contenidoRelacionado>
</concierto>
...
</catalogo>
El xslt, si lo llegas a usar depende de como quieras presentar la información
(elementos <li>, <div>, <span>, <p>, etc.)
-----Original Message-----
From: Martin Etxauri [mailto:t...@eragin.com]
Sent: Wednesday, May 04, 2011 3:25 AM
To: Ovillo, la lista de CSS en castellano
Subject: Re: [Ovillo] Formato html para fichas de conciertos
Hola
No se si te refieres a revisar el html del ejemplo que mandas, lo cual ya he
hecho, o si te refieres a revisar el mío, que eso pretendo ;D
ahora mismo esto lo tengo así:
<li id="id_del_registro">
<img src="imagen.jpg" />
<span class="grupo">nombre del grupo</span>
<span class="hora">00:00</span>
<span class="sala">Nombre de la sala</span>
<span class="pueblo">Nombre del pueblo</span>
<p>Texto_Lorem ipsum dolor sit amet. Con minimim venami quis nostrud
laboris nisi ut aliquip ex ea com dolor in reprehenderit in voluptate nonumi.
Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat Duis autem vel eum
iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing
elit, sed diam nonummi. Euismod tincidunt ut laroeet dolore magna aliquam erat
voluptat. </p>
<a href="www.webdelgrupo.com">Website de Nombre_del_grupo</a>
<div class="contenidos_relacionados">
<span class="titulo_de_contenidos">Contenidos
relacionados</span>
<ul>
<li><a href="#">título de contenido1</a> sección</li>
<li><a href="#">título de contenido2</a> sección</li>
<li><a href="#">título de contenido3</a> sección</li>
</ul>
</div>
</li>
Mi mayor duda es con esos span del principio.. no se si no debería meter todos
dentro de un H3, porque meter solo el nombre del grupo no es muy exacto,
(tampoco se si es correcto meter todo eso dentro de un H3, creo que aunque no
suela ser así, correcto si que es ¿no?). Y de meter solo el nombre del grupo
¿que hago con el resto, tal cual?
He estado mirando mas y sigo sin encontrar mucho. He visto que por ejemplo hay
un microformato en desarrollo para recetas de cocina, que sería también un
formato de ficha, por así decirlo, pero claro el marcaje es solo para recetas,
ah, y también otro para reviews (reseñas, criticas...), que sería algo parecido,
pero pasa lo mismo que con las recetas. Y bueno, el mirar los micro formatos me
ha servido para pensar que los span no están tan mal, ya que en los
microformatos muchos datos van con span:
<div id="" class="vcard">
<span class="fn n">
<span class="given-name"></span>
<span class="additional-name"></span>
<span class="family-name"></span>
</span>
<p style="font-size:smaller;">This <a
href="http://microformats.org/wiki/hcard";>hCard</a> created with the <a
href="http://microformats.org/code/hcard/creator";>hCard creator</a>.</p> </div>
En cualquier caso bienvenido será cualquier comentario sobre cualquier cacho de
html :)
saludos y gracias
Martin
El 03/05/2011, a las 14:09, santosvz escribió:
> Independientemente del CSS el XHTML si tiene una estructura, es
> cuestión de revisarlo.
>
> *-----Mensaje original-----
> *De: ovillo-boun...@lists.ovillo.org
> [mailto:ovillo-boun...@lists.ovillo.org] En nombre *de Martin Etxauri
> *Enviado el: martes, 03 de mayo de 2011 03:43 a.m.
> *Para: Ovillo, la lista de CSS en castellano
> *Asunto: Re: [Ovillo] Formato html para fichas de conciertos
> *
> *Aupa
> *
> *Agradezco la ayuda pero efectivamente mi duda era mas respecto al
> nivel xhtml si, *mas en concreto como estructurar todos los datos que
> justo aquí no aparecen.
> *En cualquier caso es un ejemplo chulo y si que me vale para ver como
> han hecho el *html en general, y ahí voy bien :)
> *
> *gracias
> *
> *El 03/05/2011, a las 02:12, santosvz escribió:
> *
> *> El ejemplo tiene ambas cosas.
> *>
> *> *-----Mensaje original-----
> *> *De: ovillo-boun...@lists.ovillo.org *>
> [mailto:ovillo-boun...@lists.ovillo.org] En nombre *> *de Martin Diego
> Moscardi *> *Enviado el: lunes, 02 de mayo de 2011 06:54 p.m.
> *> *Para: Ovillo, la lista de CSS en castellano *> *Asunto: Re:
> [Ovillo] Formato html para fichas de conciertos *> * *> *Entiendo que
> lo que pide Martin, es como estructurarlo a nivel xhtml los *> *datos
> del "grupo de musica", no como representarlo visualmente (un tema *>
> para *> *CSS).
> *> *
> *> *2011/5/2 santosvz <santo...@graficssvz.com> *> * *> *> Creo que
> algo como el enlace te podría servir, dado que es para cuestión *> de
> *> *> grupos de música y también la apariencia cuenta.
> *> *> Tendrías que adaptarlo a tu gusto pero no es problemático.
> Utiliza CSS3.
> *> *> Soportado por FF, Opera, IE9, Crome, Safari *> *> *> *>
> http://www.sohtanaka.com/web-design/examples/popoutdetails/
> *> *>
> *> *> Posible ejemplo : http://i.imgur.com/zQkMl.jpg *> *> *> *> *> *>
> Soportado por FF, Opera, IE9, Crome, Safari *> *> *-----Mensaje
> original----- *> *> *De: ovillo-boun...@lists.ovillo.org *> *>
> [mailto:ovillo-boun...@lists.ovillo.org] En nombre *> *> *de Martin
> Etxauri *> *> *Enviado el: lunes, 02 de mayo de 2011 05:57 a.m.
> *> *> *Para: la lista de CSS en castellano Ovillo *> *> *Asunto:
> [Ovillo] Formato html para fichas de conciertos *> *> * *> *> *Hola
> gente *> *> * *> *> *Acudo a la lista después de andar un buen rato en
> google y no encontrar *> *> nada, que *> *> *ya me extraña, pero no he
> debido saber buscarlo, en fin.
> *> *> *
> *> *> *Estoy preparando un html donde se muestran unos conciertos,
> cada uno con *> *> sus *> *> *datos, y no acierto a darle una
> estructura html correcta. Por ahora los *> *> conciertos van *> *> *en
> una lista, pero dentro de cada <li> tengo unos cuantos datos que no *>
> *> tengo muy *> *> *claro como estructurar:
> *> *> *
> *> *> *-Imagen
> *> *> *-Nombre del grupo
> *> *> *-Hora
> *> *> *-Sala
> *> *> *-Población
> *> *> *-Texto
> *> *> *-Contenidos relacionados: una lista de contenidos que, claro,
> va como *> <ul> *> *> * *> *> *He estado planteándome una lista de
> definición y meter todos los datos *> en *> *> el dd, y *> *> *una
> sublista, pero no tengo con que rellenar el dt en ninguno de los *> *>
> casos, *> *> ni para el *> *> *concierto entero ni para los datos,
> porque no quiero poner "hora:21:00"
> *> si
> *> *> no solo
> *> *> *"21:00" que ya se sabe que es la hora, e igual con los demás.
> Además no *> me *> *> *convence mucho.
> *> *> *
> *> *> *meter todos los datos en una <ul> tampoco me convence mucho.
> *> *> *
> *> *> *ahora lo tengo todo metido en <span> diferentes, salvo la
> imagen que *> está *> *> a *> *> pelo y *> *> *el texto que está en un
> <p> pero no me convence un pelo claro, mas que *> *> nada *> *> era *>
> *> *para diseñarlo.
> *> *> *
> *> *> *Y de paso, alguien conoce algún buen sitio con ejemplos de este
> tipo de *> *> cosas, son *> *> *las que siempre me tienen confundido a
> la hora de montar un html lo mas *> *> semántico *> *> *posible.
> *> *> *
> *> *> *gracias a todos de antemano.
> *> *> *
> *> *> *Martin
> *> *> *_______________________________________________
> *> *> *Lista de distribución Ovillo
> *> *> *Para escribir a la lista, envia un correo a
> Ovillo@lists.ovillo.org *> *> *Puedes modificar tus datos o desuscribirte en
la siguiente dirección:
> *> *> *http://lists.ovillo.org/mailman/listinfo/ovillo
> *> *>
> *> *> _______________________________________________
> *> *> Lista de distribución Ovillo
> *> *> Para escribir a la lista, envia un correo a
> Ovillo@lists.ovillo.org *> *> Puedes modificar tus datos o desuscribirte en la
siguiente dirección:
> *> *> http://lists.ovillo.org/mailman/listinfo/ovillo
> *> *>
> *> *_______________________________________________
> *> *Lista de distribución Ovillo
> *> *Para escribir a la lista, envia un correo a
> Ovillo@lists.ovillo.org *> *Puedes modificar tus datos o desuscribirte en la
siguiente dirección:
> *> *http://lists.ovillo.org/mailman/listinfo/ovillo
> *>
> *> _______________________________________________
> *> Lista de distribución Ovillo
> *> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> *> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> *http://lists.ovillo.org/mailman/listinfo/ovillo
> *>
> *
> *_______________________________________________
> *Lista de distribución Ovillo
> *Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> *Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> *http://lists.ovillo.org/mailman/listinfo/ovillo
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
