Terra y los estándares: sintomas de una enfermedad
Visita este artículo en http://www.estadobeta.com/2006/01/14/terra-y-los-estandares-sintomas-de-una-enfermedad/
Por Ismael en CSS, Estándares, artículos, destacadosLos casos de Las Amarillas y Terra muestran falta de propósito en el uso de estándares web.
FayerWayer publica una nota sobre el nuevo sitio de Terra. El nuevo sitio ha sido reconstruido “sin tablas”, conservando el diseño en archivos CSS. Como antes Las Páginas Amarillas (también discutido en FayerWayer), el equipo de Terra parece haberse entusiasmado con esto de los estándares web y tomaron el arriesgado paso de construir desde cero utilizando lo más cool en metodologías de desarrollo web.
O eso parece.
Al momento de la publicación de la nota, el sitio se ve ridículamente mal en Safari y Firefox, dos navegadores que, si bien ocupan sólo una fracción del mercado, son los más cercanos a una implementación perfecta de los estándares
Analizando brevemente el código, uno se da cuenta de que este es un caso más de “divitis”, esa enfermedad que suele afectar a los recien iniciados en el dominio del diseño web sin tablas, cuyos síntomas son (des)estructurar las páginas con una sobreabundancia de elementos <div>. Títulos, párrafos, listas…Todo son divs.
La divitis no es una enfermedad grave en si. Todos hemos echado mano alguna vez a un par de div’s auxiliares para resolver ciertos problemas de diseño que la naturaleza rectangular de CSS no nos permitía resolver. Pero la divitis sí puede ser síntoma de un mal mayor: la falta de propósito.
Como sabrán, los
Cuando eliminamos todo rastro de diseño de nuestro HTML, lo hacemos porque de este modo hacemos más fácil la mantención y corrección del diseño durante la vida del sitio. Además, esto nos permite concentrarnos en estructurar semánticamente el HTML, objetivo para el cual fue creado el lenguaje. Estructurar semánticamente, en este contexto, significa usar las etiquetas que mejor describan el tipo de contenido que estoy agregando a mis documentos. HTML dispone gentilmente de etiquetas para estructurar títulos, encabezados, listas, hipervínculos, párrafos, definiciones, énfasis, direcciones, formulas matemáticas, formularios y muchos otros elementos comunes a todo documento. Ese es el propósito de HTML. Al hacer esto, estamos haciendo nuestros documentos aún más visibles a los buscadores, además de más accesibles para personas con problemas motrices o de visión. Cuando tratamos de usar sólo las etiquetas imprescindibles para describir la estructura de nuestro contenido de la mejor forma posible estamos aplicando estándares web.
¿y el diseño? Del diseño se encarga CSS. CSS es genial. En tan potente que nos permite hacer casi lo que se nos ocurra con nuestro contenido que espera sumiso y ordenadito en su archivo HTML. Como HTML, CSS es un estándar. Depende de cada fabricante de navegadores en qué medida acatará ese estándar. Los estándares son buenos porque hacen lo posible por asegurarnos que nuestras páginas se comportarán del mismo modo en todos los dispositivos que sigan los estándares. Cumplir los estándares es como una garantía, un umbral mínimo de eficiencia. Las carreteras tienen estándares. Los edificios tienen estándares. Hasta los Kiwis tienen estándares de tamaño, peso y forma si los quieres exportar fuera del pais (si, los kiwis!). Si a un ingeniero civil le exigimos que cumpla con normas mínimas para construir una carretera funcional y segura, no veo porqué no hacer lo mismo con alguien que construirá un artefacto de información -un sitio web- que será consumido por miles.
Así pues, el estándar CSS sirve para diseñar documentos. Si lo vas a usar, concéntrate en usarlo de acuerdo al estándar y lidia con los navegadores divergentes despues*1. Cierto, Microsoft Internet Explorer está lejos de respetar bien los estándares. Cierto, Microsoft Internet Explorer es por lejos el navegador más usado en el mundo entero. Pero construye tu CSS exclusívamente para Microsoft Internet Explorer y estarás dejando fuera a la suma de usuarios que usan la suma del resto de los navegadores, estándares o no. Luego, si construyes tu CSS según la interpretación arbitraria, no estándar, de una versión particular de un navegador particular, no hay nada que impida que, a la siguiente versión del navegador, tus diseños se vean totalmente destruidos (como pasó con el salto de IE5 a IE6 y como pasará con IE7).
CSS es un estándar pensado para dar diseños consistentes a la mayor cantidad de usuarios y software posible. Ese es el propósito de CSS.
Así, los casos de Las Amarillas y Terra muestran falta de propósito. Mantener un sitio repleto de divs es casi tan tedioso como uno repleto de tablas. Ambos son probablemente igual de deficientes ante los buscadores y absolutamente inaccesibles. Uno no diseña sin tablas porque es cool o para matar el tiempo de una tarde aburrida. Uno diseña sin tablas, uno aplica estándares, porque hay un propósito.
*1
Incidentalmente, diseñar para Firefox y corregir para Internet Explorer es mucho más sencillo que lo contrario.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
1/16/2006 at 12:45 am
Llegue acá por un correo de leo prieto, dude, eres increiblemente clever, muy interesante tu blog y tus escritos y realmente utiles, me alegra saber que hay personas interesadas y trabajando en el tema de la usabilidad.
Me dare vueltas por acá mas seguido.
1/16/2006 at 1:20 am
Gracias! De apoco va creciendo la base de lectores de EstadoBeta y eso me motiva a escribir más (y mejor, espero!). Porfa destrúyanme y/o aporten con comentarios porque la gracia de esto es discutir los temas que nos interesan.
PS: la cagó qué lindo tu blog. Los colores de la navegación y los globos de las fechas me dan una envidia nada de sana.
1/17/2006 at 5:39 pm
Mmmm, Safari apuradito, pero Firefox, aún esta lejos.
1/17/2006 at 5:49 pm
Sip. Por eso “son los más cercanos”.
1/17/2006 at 11:51 pm
Los muchachos de terra al parecer se pusieron las pilas..
http://www.terra.cl/ , en firefox 1.5 se ve bien ahora.
1/18/2006 at 12:59 am
Nop.
Los estándares (en web) no son tales. Son una meta que se mueve y se transforma a medida que se imaginan ideas y se desarrollan nuevas tecnologías.
Safari se acerca (porque usa KHTML). Después viene Opera. después Mozilla (y todos los gecko-boys) y, obviamente, a la cola está Explorer.
Creo que estás mal-informando a tus lectores.
1/18/2006 at 10:03 am
Mañugo: los estándares si se mueven pero lo hacen en especificaciones discretas (1,2,3, etc). Tienes razón, Safari y Opera están “más cerca” que Firefox. El punto de este post es afirmar que el propósito de los estándares es mayor compatibilidad con todos los browsers posibles, y por lo tanto es mejor desarrollar con los más cercanos al estandar en mente (Firefox u Opera para los que no tienen Mac). No me interesaba hacer un ranking. No veo en qué parte “mal informé”, pero tu comentario de todas maneras contribuye a informar mejor.
Felipe: definitívamente se aplicaron con CSS, pero el HTML sigue siendo una sopa de DIV’s que no agregan nada de valor al contenido. Supongo que igual ganaron algo en mantenibilidad.
1/18/2006 at 12:44 pm
Es cierto, con respecto a los browsers, si tomamos en cuenta el test acid2 hasta el momento solo lo pasan safari y konkeror, opera esta asi que la pasa, el resto aun esta en proceso, y bueno iexplorer ni hablar.
Un articulo sobre browsers seria realmente interesante!
1/18/2006 at 5:51 pm
Anotado.
1/20/2006 at 11:59 am
Ismael! dioc, estaba en el sitio del banco santander y me puse a sniffear el codigo y DIOC!! me encontre con la sorpresa mas agradable y comica del mundo!!
Tu recomendacion para bajar firefox, me mato!
Felicitaciones por ese trabajo, es un cambio gigante!
1/20/2006 at 2:50 pm
Gracias! Mi rol ahí fue la aplicación de estándares (en la medida de lo posible!) como parte de un equipo de diseñadores y desarrolladores estupendos. Fue el primer sitio grande en que aplicamos estándares y espero en algun momento comentar esa experiencia con algo más de detalle. Lo de Firefox…Se hace lo que se puede
1/23/2006 at 11:02 pm
Confieso que peco de divitis y que recientemente al hacer mi plantilla he tenido que lidiar con Internet Explorer, Firefox y las hojas de estilo CSS. Es un cacho y muchas veces se hace lo que se puede, como me pasó con algunos float que tanto Firefox como I.Explorer tomaban mal al dividir mi sidebar en dos columnas. El caso es que ahí ni los div me funcionaban. Y tuve que recurrir a este truco:
/*Mozilla/Safari/Opera*/
*>.contenedor {
margin: 0 0 1000px 0;
padding: 0px;
}
/* IE, IE5/Mac backslash filter */
* html .contenedor {
height: 880px;
}
Sé que es una pésima solución, pero es lo único que me funcionó.
Actualmente, descontando los frames de adsense y un de podcating, no tengo errores, por lo menos eso dice mi extensión HTML validator de Firefox.
Por cierto, me he enamorado de tu plantilla. Adoro las plantilla de tres bandas y la tuya es la mejor que he visto.
Saludos.
1/24/2006 at 10:38 am
Hola Max.
Lamentablemente tendremos que lidiar con las inconsistencias entre navegadores por un buen tiempo más. Dicho eso, hay una pequeña lista de precauciones que te pueden ahorrar la mayoría de esos hacks:
El modelo de cajas: IE5 incluye los bordes, márgenes y padding de tus elementos en el width total, mientras que los demás suman estos valores al width que especificaste para dar el ancho total. La solución es evitar dar márgenes y padding a los elementos que tienen un width específico (y viceversa).
Floats: en IEMac los floats DEBEN tener un width específico, o de lo contrario ocupan todo el ancho del contenedor. Además, un elemento de bloque (como un DIV o un P) colapsa verticalmente si contiene sólo floats. La solución más segura es agregarle la clase clearfix a los contenedores de floats. Esto no es producto de un error de los navegadores sino una de las tantas ambigüedades que aún falta por pulir en el estándar.
1/24/2006 at 7:08 pm
Buscaré más información sobre la clase clearfix, aunque algo había visto sobre “clear”, pero no entendí muy bien.
La cosa es que después de ver tu sito me sentí pésimo con mi plantilla, así que hay que ponerse a trabajar…
Gracias.
1/30/2006 at 1:04 pm
y que opinais de la nueva portada www.terra.es?
1/30/2006 at 1:05 pm
http://www.terra.es/nueva/
2/7/2006 at 2:00 am
La parte que más me gusta de todo esto es lo que me contaste la otra vez, que no puede ser más cierto.
Al diseñar paginas para Explorer 6 (hoy), no van a funcionar en Explorer 7, ya que este ultimo es más parecido a Firefox y Safari que a Explorer. Eso les pasa por seguir a Microsoft y no a los estandares. A golpes se aprende.
Lo peor en todo caso, es que Terra y Amarillas fueron corregidas para Firefox, pero en Mac no andan bien (Terra ni hablar, Amarillas al menos corre en Firefox), ya que tienen un JavaScript que detecta tu plataforma y te tira un CSS (en vez de tener un CSS bien escrito y universal).
2/7/2006 at 10:35 am
Por último (muy último) podrían haber usado un comentario condicional para cargar un css distinto en IE (los comentarios html condicionales son sólo reconocidos por IE)
<!--[if IE]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
Es increíble que no hayan googleado un poco antes. Debieran saber que Firefox funciona igual en todas las plataformas y no necesitaban discriminar Mac de PC, sino que sólo IE del resto.
Con respecto a IE7, las dudas que quedan son de este tipo: en IE6, mucha gente usa el selector
* html mi-elemento {...}
que sólo reconoce IE, para suprimir bugs de ese navegador. Si IE7 arregla esos bugs, va a seguir reconociendo ese selector? Porque si es así, se van a romper miles de diseños hackeados para IE6 con ese tipo de trucos (lo mismo con los selectores “_border-width:1px;” con guión bajo, tb sólo para IE).
2/7/2006 at 12:43 pm
Esperemos que el truco “_border-width:1px;” sea solo para IE6, ya que si IE7 arregla esos problemas (y se comporta más como Firefox), entonces no deberia leer eso.
5/8/2006 at 11:53 am
Buena Max, donde nos fuimos a encontrar, max me ha ayudado mucho con mi sitio, permitio que en mi blog tenga un side bar adicional.
Con todo lo que han hablado mi código esta pésimo, aunque la página se ve bien tras bamabalinas es un caos tendré que ponerme a trabajar. Podríamos tener un artículo para solucionar el tema del ancho, paddings y margins.
Se que hay un tema estadístico y numérico respecto al uso de ciertos navegadores, lo que me preocupa es que hasta cuándo le vamos a seguir haciendo las tareas a IE Microsoft.
9/20/2007 at 12:56 pm
Lamentable el trabajo que realizan en el portal no lo hacen en el servidor de paginas personales, si intentas validar un fichero.css el resultado que obtienes siempre es que el formato del fichero no es valido y en firefox no funciona el estilo (si lo hace en IE por los defertos de este na
vegador que no tiene en cuenta los estandares)
Esperemos que algun dia tambien lo reparen.
1/18/2008 at 10:00 am
[…] http://www.estadobeta.com/2006/01/14/terra-y-los-estandares-sintomas-de-una-enfermedad/ […]