backend con css (sin tablas)
6 seguidores
Hola,
Alguien ha diseñado alguna vez un sitio sin tablas con programacion backend?
que truquillo recomendariais para posicionar elementos en la página (listados, etc...) lo que antes se hacía con loops de programacion con cachos de tabla <tr><% %><td> de toda la vida?
orange
Yo lo he hecho, realmente el backend te da igual, lo importante es maquetar sin tablas, una vez que lo tengas el resto viene solo.
De todas formas recuerda que las tablas tienen su sentido, el mostrar datos repetitivos tabulados, no hay que uir de ellas como de la peste, simplemente tratar de no utilizarlas para lo que no fueron concebidas, como maquetar el aspecto general de una página.
Si quieres un libro sobre CSS te recomiendo uno de Anaya del que ya he contado por aqui alguna cosa https://www.domestika.org/foros/viewtopic.php?t=11267&highlight=
Si quieres husmear un poco de código en páginas tableless, aqui tienes unas cuantas http://www.meryl.net/css/
Más para leer, cosas interesante sobre el modelo de caja http://www.thenoodleincident.com/
Más en concreto sobre listas, que preguntabas algo http://www.maxdesign.com.au/presentation/listamatic/
Una curiosidad, ejemplos de uso de CSS sobre la misma página base (impresiona) http://www.csszengarden.com/
En fin, hay bastantes cositas por ahí, y mucho weblog
meddle
totalmente de acuerdo en todo con orange, aunque la pregunta no se si esta muy bien formulada. creo que confundes llenar las tablas (o listas, o capas ...) con programacion en servidor y no tienen nada que ver. Al igual que puedes llenar las tablas a partir de una base de datos o hacerlo a mano, pues lo mismo si no las usas, lo haras a partir de una base de datos o a mano, o con plantillas, etc etc. Una cosa es la estructura en x/html y otra es como proporcionas los contenidos. Y eso es independiente de si usas tablas o no.
pedro_fm
para mi backend = base de datos + programacion presentados mediante plantillas o "esqueletos" (que ya sería el front-end)
por lo demás creo que orange lo ha pillado bien. la idea es maquetar tableless pero de una manera sostenible para el programador, que es de los de <h1> y otros tags arcaicos :)
gracias, navegaré un rato por los enlaces que me pones.
orange
Bueno, creo que te confundes entre páginas dinámicas y backend.
Una página dinámica es aquella que rellena su contenido a través de acciones realizadas por el servidor (que puede ser una carga de datos u otras muchas cosas).
Un backend es un sistema de gestión de contenidos, es decir si tienes una aplicación por internet que muestra una lista de bodas cuyos productos están sacados de una BBDD; el backend es el sistema de páginas que utiliza el usuario para actualziar dicha BBDD.
De todas formas esto es una pequeña chorradilla comparada con una cosita
Pedro
"que es de los de <h1> y otros tags arcaicos"
No sé si esto lo has dicho de coña, pero bueno, por si hay algún lego con lee esto.
Los tags HTML tiene un significado, y precisamente se trata de utilizar cada uno para lo que fueron pensados.
(de hecho el 'movimiento' tableless participa de esa filosofía).
Un H1 es para meter un header importante, y lo que está mal es conseguir ese resultado "gráficamente" a partir de definir un SPAN con una clase. Lo que hay que hacer es definir una clase para ese H1.
Porque eso significa:
- Que el código por si mismo tiene significado, metodología de programación.
- Que un navegador para ciegos lo interpretará correctamente, aumentando su relevancia.
- Que Google dará mayor relevancia al texto incluido entre esas etiquetas, que a uno entre SPAN (que parezca un H1).
- Que los navegadores solo texto representarán la página de forma más fidedigna.
Y un sinfín de aspectos relacionados con la calidad en la programación, que aqui tampoco vamos a tratar.
Lo que hay que hacer es que nuestro HTML refleje el contenido de la página fielmente, y la presentación dejársela a CSS.
Así que si quieres meter un encabezado, pon un H1 (o lo que sea, que seguro que en las páginas utilizas distintos niveles de encabezados), entre otras muchas cosas.
meddle
Amen.
Solamente aclarar esto: "Lo que hay que hacer es definir una clase para ese H1". No siempre, para algo estan los selectores, aunque a IE no le gusten. O por ejemplo, puedes decir que todos los h1 de un determinado elemento con id=capa con algo como:
<code>#capa h1 {}</code>
De hecho, cuanto menos classes se usen mejor, significa que hemos conseguido una estructura que se explica por si misma, sin tener que mezclar x/html con css. No se si mesplicao ;)
FandLonso
Y ya que hablais de CSS y me habeis mostrado todas estas cositas tan interesantes:
¿algún recurso similar en castellano?
meddle
mmm, en castellano no creo, puedes encontrar algo en http://www.tierradenomadas.com/
mirate tambien (ingles): http://css.maxdesign.com.au/ (top quality)
pedro_fm
el segundo enlace está que se sale!
es interesante lo de redefinir los tags mediante clases, yo lo hacía casi siempre desde los elementos "contenedores" es decir, tablas, <a, etc. no sabía que se podia jerarquizar así
thanks!
meddle
ojito a veces pecamos (todos) de usar demasiadas clases, cuando muchas veces no hace falta usarlas.
orange
Jó, además la cantidad de selectores que tienes es impresionante, puedes seleccionar casi con la misma precisión que con ids.
Una etiqueta dentro de otra
Una etiqueta n número de hija (o de nieta ...) de otra
Una etiqueta después de otra
................
Impresiona, yo recomiendo el libro de Anaya "Cascading Style Sheets", que es una obra fundamental para aquellos que quieran ponerse a desarrollar con CSS como dios manda ... es revelador.
meddle
si, lo malo es el IE, que no soporta selectores correctamente, porque si no todo el rollo de table/tableless layouts se hubiera acabado hace tiempo (aunque cada vez hay menos excusas para no dejar las tablas) :(
txuma Plus
orange
Impresiona, yo recomiendo el libro de Anaya "Cascading Style Sheets", que es una obra fundamental para aquellos que quieran ponerse a desarrollar con CSS como dios manda ... es revelador.
AMEN !!! Un gran libro. Por experiencia propia puedo decir el cambio hacia CSS + XHTML ha sido muy beneficioso (ya os contaré algunas conclusiones en unos días) Y eso que estoy convencido de que lo que estoy desrrollando ahora mismo todavía es mejorable.
Y aprovecho la ocasión para volver a dar las gracias a Orange por enseñarme el camino a la verdad ;)
belen_c
si, la verdad que el libro está muy bien (aunque todavía no lo he acabado) pero una pregunta... diseñar sin usar tablas ¿no es arriesgarse a que la mayoría de los navegadores no vean bien la página? lo digo sobre todo por netscape, porque las pruebas que he hecho son totalmente horribles... ópera todavía se comporta, pero nts 7 se lo salta todo a la torera....
meddle
pues ns7 tiene el MEJOR manejo de CSS dek mercado, asi que... algo no se ha hecho bien o el libro esta mal o algo. http://css.maxdesign.com.au/
belen_c
chico no se, igual soy yo... pero vamos, no me coindice nada... jejee
pedro_fm
o eso o el libro no es correcto, porque he estado haciendo pruebas hoy y netscape 7 se comporta perfectamente.
txuma Plus
Yo he testado el desarrollo que estoy haciendo con CSS en estos navegadores y en todos se comporta fenomenalmente:
EN PC:
Internet Explorer 6
Internet Explorer 5
Firebird 0.6.1
Opera 7.20
Netscape 7
Netscape 6
EN MAC:
Internet Explorer 5
Safari (no sé la versión)
belen_c
en todo caso el problema que tuve fue con una extensión en DW, todavía no he hecho ningún desarrollo propio complicado para testear... bueno bueno, seré yo seré yo (como dijo un tal Judas... jejejejeje)
orange
En el libro está todo perfecto ... no sólo es que se ve igual en todos, sino que en los que no se ve, te avisa.
Ejemplos:
Tiene un capítulo dedicado a navegadores legacy (desfasados), lease Nets4. Sólo por ese capítulo merece la pena pillarse el libro, porque si tienes un cliente "tocho" con navegador antiguo, si no te explican de qué va la cosa no hay manera.
Viene completamente explicado el bug del modelo de caja del Explorer 5, y explican también muy bien el hack de tantek para solucionarlo.
Si no ves bien las cosas es que algo haces mal Nayita. O a lo mejor es que usas el Explorer 5 y por eso lo ves mal.
belen_c
no se naranjito, mira, son los menús que hay aqui
Es una extensión, la verdad que no me he puesto a comprobar el código por dos cosas: no me he acabado el libro todavía y no tengo ni pizca de tiempo :D pero desde luego, en ninguno de los navegadores, explorer 6, netscape 7 y opera 7 se ve igual... es bastante probable que la extensión tenga muchos fallos, no la he comprobado, pero quería saber que opinábais sobre estos temas tan agradables... jeje
meddle
sobra la primera linea: <code><?xml version="1.0" encoding="iso-8859-1"?></code>
belen_c
hmmm.. no se, esa linea la pone DW al hacer compatible la página con XHTMl... y bueno, he probado y entonces si que me lo descuajeringa todo hasta en el explorer XDDD
orange
Yo creo que esa línea es un bug del DW, de hecho en la versión 2004 ya no la añade.
No he revisado el código de la página, pero imagino que la extensión que lo crea debe hacer algo raro.
meddle
el problema es que usas tablas, en serio. si no fuera por el margen izquierdo (la imagen) lo tnego todo maquetado sin tablas. pero no te interesa, supongo, desprenderte de esa imagen de margen.
belen_c
si, puede que sea eso... la puñ.. tabla. No sé, le tengo que dar vueltas a la prog, ahora mismo estoy chapando el libro para ello ;) y a ser posible, hacerlo todo sin tablas ninguna. En cuanto al bug de DW... que raro ... :D :D