Gravatar de Armonth

Hoy en día todavía hay quien recomienda usar frames y tablas

Big WTFLeo en el Planet Webdev la entrada de Otro blog más titulada Pistas & Trucos: Frames o Tablas.

En ella su autor se hace eco y reproduce literalmente un párrafo de la sección “Publica tu web” de la revista PC Actual y más concretamente del número de Marzo del 2007:

Y bueno… la imagen que acompaña la entrada ya dice de forma bastante fiel mi sorpresa. Vamos a analizarlo…

FRAME O TABLA Esta decisión ha de tomarse incluso antes de teclear por primera vez la etiqueta HTML. La razón es que el lenguaje de programación HTML no ofrece ningún tipo de comando para emplazar con gran precisión elementos como gráficos y texto. Para crear un boceto básico en el que estén basadas todas las páginas web de un sitio, tendremos que hacer uso de frames y trabajar con tablas.

  1. Lenguaje de programación HTML. Yo pensaba que el HTML era un lenguaje de etiquetado, acabo de subir de scripter a coder por la jeta. Bueno aunque es lo primero que me llama la atención lo dejaré pasar por ser más cuestión semántica que otra cosa…
  2. HTML no ofrece ningún tipo de comando para emplazar con gran precisión elementos como gráficos y texto. ¿Sin gráficos? ¿qué es entonces la etiqueta IMG?. El texto suponiendo que se refiera a HTML en otros ficheros hay mil opciones (que no son HTML pero cualquier servidor por cutre que sea nos da dichas posibilidades): includes en cualquier lenguaje de scripting como PHP, el SSI (Server Side Includes) que está en desuso pero sigue sirviendo y un buen etcétera.
  3. Hacer un diseño basado en frames es un atentado a la usabilidad (páginas “con perdidas” al entrar directamente en lugar de entrar al HTML que contiene la definición de frames, problemas con los favoritos, etcétera).
  4. Ídem con las tablas, además que una vez que aprendes a usar los div puedes controlar mejor la carga (resulta mucho más óptimo para el posicionamiento y para dar sensación de “ligereza” que el contenido esté al principio del código HTML y luego más abajo el menú, con tablas puede ser más costoso).

    Además las tablas no fueron creadas para el diseño de un sitio si no para datos tabulados como comparaciones o listas de especificaciones, usar tablas en el diseño crea problemas de accesibilidad.

    Otro detalle curioso es el de (para mí un clásico): Desarrollo web extremo que aunque está pensando para su momento, en la sección “Tiempos de previsualización” da un ejemplo de cómo anidar el diseño en tablas de forma incorrecta y el aumenta exagerado del tiempo de carga que ello conlleva…

    Si queremos hacer un diseño con tablas de tres columnas verticales por fuerza (al menos en principio) habrá que esperar al </table> — es decir: cargar todo — para empezar a mostrar información de la web, problema que no tenemos con diseños basados en div+css.

Y bueno, sin leer el resto del artículo tampoco se puede decir mucho más pero da la sensación de que cómo el resto sea así en realidad lo que han hecho es aprovechado un manual de hace media década (a lo menos) con sus (desfasadas) técnicas o alguien necesita urgentemente un curso de reciclaje.

Mañana publico un manual de HTML 3.1 con su <blink> y la técnica del gif de 1 pixel transparente que es el último grito en desarrollo web }:P

16 Comentarios (feed)

  1. Gravatar de Rarok Rarok nos comenta:

    Tampoco me extraña tanto ese tipo de cosas teniendo en cuenta en qué revista apareció, y seguro que luego en el artículo hacen comentarios como que hoy en día es mucho mas dificil hacer páginas web debido a navegadores como Firefox y Safari que no cargan correctamente las páginas… XD

    Domingo, 11 de Marzo/2007 @ 11:54

  2. Gravatar de aNieto2k aNieto2k nos comenta:

    Amén hermano :D

    Pero tampoco me extraña, cualquiera puede hacer una página web bonita usando Dreamweaver, Photoshop o Fireworks, con un código sucio, dependiente de tablas,… pero es una página…. la gente en general, no presta atención a otros factores que no sean la apariencia…

    Buen post, si señor ;)

    Domingo, 11 de Marzo/2007 @ 13:19

  3. Gravatar de gadi gadi nos comenta:

    Es cierto lo que dice aNieto2k, el usuario de a pie se fija si la web es bonita o no. Como las conexiones de hoy día suelen ser de 256 para arriba, no hay problema si tardan siglos. Pero realmente cuando a uno le interesa hacer su propia web, le gusta hacer algo con un buen código, pero a la vez estético.
    Yo antes usaba tablas, usaba DreamWeaver. fue cuestion de aprender CSS y dejar de lado ese programa, e irme al tipico editor de textos (ahora mismo Bluefish en Linux).

    Buena entrada, sep.

    Adeus!

    Domingo, 11 de Marzo/2007 @ 23:38

  4. Gravatar de HeV HeV nos comenta:

    La verdad es que las opciones que dan a elegir dejan entrever la calidad del manual o guía publicado.

    Sería interesante poder entrar a valorar si en algún punto indican que la alternativa más profesional sería el uso de hojas de estilo.

    Sobre la excusa del aspecto, actualmente se pueden hacer muchas webs usando plantillas o generadores que permiten comenzar a explorar el mundo de las CSS, se obtienen buenos resultados, de forma sencilla y más o menos correcta y estandarizada.

    El hacer referencia a las tablas y frames es algo realmente arcáico. Por cierto, la entrada en bulma es de lo más interesante y mantiene gran parte de vigencia a pesar de los años.

    Lunes, 12 de Marzo/2007 @ 1:11

  5. Gravatar de Armonth Armonth nos comenta:

    HeV cierto, y lo de la entrada de Bulma: sigue siendo vigente si tenemos en cuenta que hay cosas (como las tablas en el diseño) que están _deprecated_ pero es lo bueno de ese artículo, sigue siendo interesante después de la hostia de tiempo :D

    Lunes, 12 de Marzo/2007 @ 1:17

  6. Gravatar de Armonth Armonth nos comenta:

    gadi: es que si nos ponemos del lado del desarrollador yo al menos me importa un huevo si tarda mucho en cargar — no me gusta en el momento que no le gusta a los usuarios ya que me debo a ellos –, si fuera sólo para mí entonces me daría totalmente igual… al que no le da igual es al que paga el ancho de banda a precio de caviar irani :\

    Lunes, 12 de Marzo/2007 @ 1:22

  7. Gravatar de Sergio de la Torre Sergio de la Torre nos comenta:

    Al CSS con capas le faltan maneras de centrar más definitivas como el comer. Todavía no conozco un sistema para centrar elementos verticalmente ya sean de altura variable o fija, sin que se desmangue el diseño cuando la ventana es mas baja de lo habitual (Ya de paso si alguuien sabe…) He abandonado varios diseños por ese motivo, únicamente me falta centrar el elemento principal. Lo que he dejado será una chapuza pero funciona. Aprovechando si alguien sabe como solucionarlo…

    Lunes, 12 de Marzo/2007 @ 10:41

  8. Gravatar de Reboot Reboot nos comenta:

    Hoy voy a llevarte la contraria.

    Es cierto que el uso de frames es un atentado contra usabilidad, eso no te lo discuto, pero hace 12 años, los frames eran la forma más “bandwidth-friendly” de estructurar la navegación de un site. De hecho, el CMS que uso yo, por ejemplo, se basa en un frame a la izquierda con las opciones y luego a la derecha tienes lo que vas a cambiar.

    El frame surgió ante la carencia de otra opción para mantener una parte de la página estática mientras el resto se refresca. He llegado a ver auténticas virguerías hechas con frames, aunque no son perfectamente cross-platform, pues cada navegador dimensionaba los frames como le salía.

    A día de hoy un frame es algo obsoleto, y necesitas tanto javascript para que funcione correctamente que no vale la pena. Por tanto, te doy la razón: Hoy en día los frames no sirven para nada.

    Pero las tablas… ¡Ah!-migo. Yo me he criado entre tablas. Los diseños cortados en cuadrícula son mis amigos y con ellos y el buen uso de los colspans y rowspans puedes hacer lo que quieras, como quieras y donde quieras. ¿Que faltan cierres de tablas? Eso es porque el que escribió el HTML era un descuidado.

    Para hacer un diseño correcto con tablas lo primero que tienes que tener muy claro es qué es lo que quieres y a continuación, crear el esqueleto, para más adelante ir desarrollándolo anidando más tablas.

    Es probable que me digas que para posicionar cosas ya tienes las capas, pero estamos en las mismas, necesitas demasiado javascript, y estás vendido a que el navegador te sitúe las capas correctamente. Llámame escéptico, pero yo me he criado entre navegadores que mentían como bellacos.

    Es cierto que desde que aparecieron las opciones de display en las capas (y navegadores que las renderizaran correctamente) el juego puede ser mucho mayor, pero siempre combinando capas relativas metidas en celdas de tablas.

    Usando tablas no tienes opción a que el navegador te renderice mal la página… a no ser que uses CSS para el tema de los márgenes, pero es ya otra historia…

    Lunes, 12 de Marzo/2007 @ 11:09

  9. Gravatar de Armonth Armonth nos comenta:

    Reboot cuando dices capas ¿te refieres a lo que hacía Dreamweaver en la época de HTML 4.01 o a un DIV+CSS y los position:, float:, width: etcétera? porque no son lo mismo pero algunos lo llaman igual (yo lo de Dream es que ni me acuerdo como lo llamaban)…

    Yo creo que se puede hacer cualquier diseño con CSS+DIV ahora bien: algunos es que ni merecen la pena, por ejemplo un “foro clásico” puede hacerse con CSS+DIV pero da la casualidad de que lo que muestra en el índice de foros son datos tabulados para los que las tablas fueron creados y hacerlo en CSS+DIV sería cuestión de hacks sucios, divs redundantes, etcétera (mayor complejidad).

    Y los navegadores uses CSS o Tablas si quieren renderizaran como les salga del núcleo (por no decir algo menos fino XD) osea que siempre que se pueda se debe evitar el uso de tablas…

    Lunes, 12 de Marzo/2007 @ 20:57

  10. Gravatar de Reboot Reboot nos comenta:

    Con capas me refiero a los DIV. Infames DIV y LAYER. Sé que ahora puedes poner una capa donde te salga y tan a gusto, pero hacer que luego todo cuadre me parece un poco waltrapas. Yo uso tablas relativas que se me van ajustando ellas solas sin necesidad de asignar tamaños. De esa forma mi página se ve tanto a 640, como a 800, como a 1024, sin necesidad de ajustar. Lo que pasa es que tienes que vivir de forma cuadriculada y eso a la gente no le gusta, pero te puedo asegurar de que he trabajado con gente (y por ende, aprendido de ellos) que ha conseguido la redondez del cuadrado con HTML 3.2 puro y duro, sin capas y sin CSS (a priori).

    En efecto eso no es programar, pero sí es un arte.

    Martes, 13 de Marzo/2007 @ 0:15

  11. Gravatar de Reboot Reboot nos comenta:

    Y sí, la técnica del pixel transparente, aunque no sea el último grito, al menos sigue “aguantando” las tablas correctamente xDD

    Martes, 13 de Marzo/2007 @ 0:17

  12. Gravatar de Enrique Callejas Enrique Callejas nos comenta:

    Pero en definitiva que recomendarían para la elaboración de un sitio. Actualmente las tablas siguen siendo validas. Pero el problema que le hallo, es cuando el sitio consta de 20 ó 30 paginas, y el menú de la izquierda se hizo a punta de tablas, y para cambiar el destino de un enlace, o agregar otro enlace es necesario, hacerlo pagina x pagina x pagina x . . . . 20 ó 30 veces. XD No les ha pasado, que tenga que modificar un sitio y tenga esas características. jejejeje

    Miércoles, 4 de Julio/2007 @ 18:44

  13. Gravatar de Armonth Armonth nos comenta:

    Enrique: maquetar con div+css. Para las distintas secciones usa plantillas y includes en PHP (por ejemplo para no repetir en cada página el código respectivo al menú).

    Miércoles, 4 de Julio/2007 @ 20:09

  14. Gravatar de Gastón Gastón nos comenta:

    Upa, caí por acá buscando data sobre CSS y me enganché con la discusión.
    En mi caso particular, dejé de diseñar hace unos 6 o 7 años, y ahora estoy empezando a hacerlo otra vez. En esa época los frames y las tablas eran lo más. Más tarde lo fueron las layers con posicionamiento absoluto. Pero eso es historia…
    Hoy en día hablar de hacer una página con tablas o frames sería lo mismo que hacer un auto de madera despreciando la evolución de los materiales.
    En este caso es lo mismo, no se puede despreciar las posibilidades que da el combo DIV+CSS por el solo hecho de requerir una técnica más abstracta y conocimiento, porque sino no habría evolución.
    Lo digo desde mi experiencia actual, se puede hacer exactamente lo mismo estéticamente con tablas que con DIV+CSS, solo que hay que cambiar la forma de pensar, organizar y planificar el diseño.
    Volviendo a la metáfora del auto de madera, es más fácil y está al alcance de cualquiera cortar una madera y no estampar un panel de chapa, pero no es por facilidad que se hacen de chapa los autos sino por calidad. En el diseño pasa exáctamente lo mismo.

    Sábado, 18 de Agosto/2007 @ 3:51

  15. Gravatar de Pablo Pablo nos comenta:

    Bueno, yo coincido con muchos de ustedes, los frames son muy antaños, pero por otro lado, por ahí leí que los frames y tablas no sirven mucho para los robots de los buscadores.

    Pero bueno, yo creo que una página debe de tener dos cosas escenciales:

    1. Un contenido muy bien estructurado. Obvio que lo más importante es lo que preseneta el sitio, pero mucho más importantes es cómo lo presentas.

    2. Una apariencia decente. No hay que realizar tanta fanfarronada, en particular, he visto tantos sitios que los adornan peor que un árbol de navidad, que la verdad, mucha elegancia puede hacer perder el sentido del mensaje que se envía al usuario.

    Por eso es que, yo pienso que las herramientas allí están, para nuestras necesidades y no hay que poner peros si usamos esto o lo otro, si fuera ese el caso, mejor hay que diseñar todo en flash (porque es lo que anda muy a la moda últimamente)

    Sábado, 13 de Octubre/2007 @ 5:46

  16. Gravatar de Andyxp Andyxp nos comenta:

    Los iframes ademas de que no son esteticos, hace tiempo cuando todos usaban IE y con el CSS de cambiar las barras del navegador se podian hacer esteticos pero ahora Mozilla sin el codigo ese de MS ya se verian muy feas o fuera de diseño.

    El uso de frames no permite la correcta indexacion del sitio.

    Yo pienso que para cada uso hay una funcion valida.

    Si lo que quieres es mostrar resultados que necesiten ser ordenados y demas podrias y deberias usar tablas, ya que el uso de DIVS y CSS se me hace sobrado y tonto.

    Pero al momento de maquetar un sitio para su correcta visualizacion para el usuario final que es lo mas importante para un website, seria mejor usar CSS y DIVS.

    Esa es mi opinion, ademas yo lo veo mas desde una prespectiva de uso con PHP.

    Viernes, 23 de Noviembre/2007 @ 3:37

Comentarios cerrados