Diseñorama Ahora mas rendidor
Diseño a futuro: Estándares y la web
Los diseñadores y desarrolladores muchas veces nos quejamos por las diferencias entre navegadores. Y eso es hablando de los navegadores que existen ahora. ¿Cómo diseñar para todos los navegadores? ¿Cómo asegurarnos que nuestro sitio se verá en Internet Explorer 11, Mozilla 3.5 y Opera 10.2? Una palabra: estándares.
La guerra de los formatos
Si naciste antes de 1985, tal vez te acuerdes de los videocassettes Betamax. Betamax fue un formato desarrollado por Sony, que compitió contra el formato VHS. Tal vez te acuerdes de aquellos años en los que la gente era de un "bando" u otro:. "¿Tienes VHS o Beta?" Según los expertos Beta era superior, más compacto y con mejor calidad de imagen. Sin embargo, el formato de Sony se extinguió mucho antes que el de VHS. La razón es que Sony limitó la manufactura de cassettes compatibles con Beta, mientras que VHS fue hecho por una mayor cantidad de fabricantes.
Cuando se desarrollaron los discos compactos, se cuidó que no sucediera lo mismo: una guerra de formatos en la que el ganador no necesariamente es el mejor. Philips y Sony conjuntamente desarrollaron el formato, que luego fue ratificado por el Digital Audio Disc Committee y se volvió un estándar (vaya, por fin viene aterrizando la autora!).
¿La moraleja? La industria aprendió que era bueno tener un estándar tecnológico que asegurara la compatibilidad entre fabricantes y consumidores.
Un estándar para gobernarlos a todos
Cuando empezó el internet, era controlado por un grupo restringido de académicos. Pero poco a poco el acceso se empezó a generalizar, las compañías de software desarrollaron distintos navegadores y con este crecimiento surgió la necesidad de controlar los estándares en la web.
En 1994 Tim Berners-Lee, uno de los arquitectos de la WWW, fundo el W3C, o Consorcio de la WWW. Esta organización tiene el propósito de desarrollar estándares que regulen el desarrollo de la web y aseguren su intercompatibilidad. El W3C tiene especificaciones y guías que son el estándar de cómo deben de estructurarse los documentos de hipertexto, y cómo los lectores- navegadores y demás software, deben de interpretarlo.
Pero desgraciadamente estos estándares son comúnmente ignorados. Los desarrolladores y diseñadores no los conocen, o no los usan; los desarrolladores de software de desarrollo de página se enfocan en otros aspectos, y los creadores de navegadores ignoran, cambian, añaden y quitan a su gusto. El resultado: caos. Como diseñadores y desarrolladores, tenemos que probar que nuestro código funcione en diferentes plataformas, diferentes navegadores, checando quien soporta qué propiedad. Imagínate si pudiéramos diseñar una vez, bajo un sólo estándar, con la confianza de que todos los navegadores interpretarán el código de la misma forma, es decir, como se debe.
¿De qué me sirve seguir los estándares?
Desgraciadamente Internet Explorer, el navegador más popular, tiene grandes y severos errores al interpretar los estándares. Mucha gente diseña “para Internet Explorer”, tomándolo, no como el estándar oficial, pero el estándar de hecho.¿ Para qué seguir las recomendaciones del W3C si esto significa que la mayoría de los usuarios van a ver algo distinto?
Por un lado, si queremos que los navegadores comiencen a seguir los estándares, debemos empezar por escribir código de acuerdo a ellos. Por otro lado, al utilizar código válido, nos aseguramos que en algunos años, cuando más gente utilice navegadores compatibles (esperamos!), nuestros sitios se seguirán viendo bien. El número de usuarios de navegadores que NO sean Internet Explorer va subiendo rápidamente, y pronto puede dejar de ser la mayoría. Si o cuando esto suceda, la gente que no utilice estándares quedará con sitios “optimizados” para Internet Explorer que se verán mal para la mayoría de la gente.
Navegadores y modos
¿Cómo sabe un navegador qué estándar debe seguir, o cómo interpretar un documento?
Al principio de cada documento hay una linea, llamada doctype, que informa al navegador que DTD (Definición de tipo de documento)estás usando. Un DTD es un documento que contiene las definiciones de la estructura, elementos y atributos de un lenguaje (html, xhtml, xml, etc).
Tomemos como ejemplo este doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
Este informa al navegador que debe de interpretar el documento como html, de acuerdo al DTD que se encuentra en http://www.w3.org/TR/html4/strict.dtd . Este DTD le informa al navegador cómo debe de interpretar cada elemento, por ejemplo, cómo se debe de ver el elemento <p> o <table>
Estricto contra peculiar
¿Qué pasa si tu página no tiene un doctype o tiene uno incorrecto o incompleto? Como no tienen manera de interpretar la página, la mayoría de los navegadores pasan a lo que se llama quirks mode, o modo de peculiaridades (una traducción muy aproximada). Eso significa que interpretan el código como lo hacían versiones anteriores, con menos adhesión a los estándares. Internet Explorer, por ejemplo, cambia al modo de interpretar de IE4, que difiere mucho de cómo debe de ser, para que las páginas viejas se vean como se planeó.
Si, por el contrario, el navegador encuentra un doctype válido, pasa a modo estricto, es decir, lo más apegado a los estándares que se pueda.
También puedes cambiar entre los modos estricto y de quirks usando tipos distintos de doctypes. Los navegadores modernos (incluyendo Internet Explorer 6 y 5 para Mac) cambian su modo de interpretación de acuerdo a si usas un doctype holgado (loose) o estricto (strict). Por ejemplo, para html, existen estos 2 doctypes validos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
El primero hará que el navegador interprete en modo estricto, el segundo de modo de quirks.
¿Cómo le hago?
¿Te convenciste de la ventaja de los estándares pero no sabes por donde empezar? No te preocupes, no es necesario que te aprendas de memoria todas las especificaciones del W3C. Basta con seguir algunos pasos sencillos.
Usa la sintaxis correcta:
Cierra tus etiquetas.
Toda etiqueta que se abre se debe de cerrar.
Incorrecto:<p>Esto es un párrafo
Correcto:<p> Este es otro párrafo</p>
Haz uso correcto de las etiquetas anidadas
Incorrecto: <b> Este es un texto de <i>muestra</b></i>
Correcto: <b> Este es un texto de <i>muestra</i></b>
No uses etiquetas que no sean estándar
Hay muchas etiquetas o atributos creadas por un navegador, que solo funcionan en ese (en especial, Internet Explorer tiene muchísimas). Las etiquetas <marquee> , <blink> (oh, dios, que haremos sin la etiqueta !), los atributos leftmargin y rightmargin de <body>, y varias otras más que solo funcionan en un navegador no deben usarse.
Hay otras etiquetas que, a pesar de que son soportadas por la mayoría de los navegadores, no son parte de los estándares, como la etiqueta <font> o <center>
La funcionalidad de muchas de estas etiquetas puede ser reemplazada a través de hojas de estilo.
Utiliza buenas herramientas
Si usas un editor visual (WYSYWYG), asegúrate que utilice código de acuerdo a los estándares. Dreamweaver MX 2004 es uno de los mejores en este sentido. Pero uses lo que uses, siempre revisa tu código, y no sólo te guíes por lo que ves en tu editor.
Valida
La forma más fácil de checar si tu código va de acuerdo a los estándares es consultar a la fuente directamente: el W3C. Ellos te ofrecen un servicio de validación en el que tu página u hoja de estilo son checadas y obtienes una lista de los errores que fueron encontrados.
Validador de X/HTML
Validador de CSS
Conclusiones
En un mundo utópico, los desarrolladores harían su código de acuerdo a los estándares y los navegadores se apegarían a ellos. Esta utopía es todavía lejana, sobre todo dado el hecho de que el navegador que domina el mercado (Internet Explorer 6 para Windows) tiene severos errores en la interpretación de los estándares. En un principio diseñar con estándares puede causarte algunos dolores de cabeza, pero si los desarrolladores ignoramos los estándares, sólo promovemos caos. El codificar para un navegador/plataforma ASEGURA que nuestro sitio será obsoleto en cuanto el navegador /plataforma sean actualizados /reemplazados/descontinuados /obsoletos. Codificar con estándares es ver a futuro, un poco más allá del Internet Explorer 6.
Enlaces Relacionados:
Comentarios
Suscríbete a la lista de correo y mantente informado sobre las actualizaciones del sitio.
Suscríbete
Suscríbete al RSS de Diseñorama
¿Sugerencias?
¿Quieres compartir una noticia o enlace? ¿Sugerir un tema para un artículo? Hazlo aquí:
Sobre el Autor
<a href="http://www.monolinea.com/" title="portafolio de diseño web de Kemie Guaida">Kemie</a> es guerrillera en el Ejército Revolucionario de Usabilidad y Estándares, y cae en violentas convulsiones ante la presencia de la etiqueta < font>Categorías en Articulos
Articulos Recientes
- Pruebas de compatibilidad en navegadores
- Stylizer- mi editor de CSS favorito
- Fireworks CS4 beta: una reseña
- Técnicas para redondear esquinas
- El Síndrome de la Página en Blanco
- Vendiendo estándares web a los clientes
Contenido Relacionado
Promoción
- @realfoodorelse tengo gran antojo, alguna buena receta/tips? 1 day ago
- IKEA Food- Lovely Package #more-11876">http://lovelypackage.com/ikea-... 1 day ago
- Etica font family « MyFonts #fontwishlist http://new.myfonts.com/fonts/t... 1 day ago
11 octubre 2004, 04:43
oscar arzola
Es en verdad confortante leer este tipo de articulos, cuando uno empieza a entrar en el mundo de la estandarización y ve lo complicado que es ser estandar ante un mundo de incompatibilidad que hasta casi uno desea olvidarse de los estandares y seguir trabajando como siempre.. creo que al re-valorar el precio que tiene usar estandares y el beneficio usuario – desarrollador hace que no desistamos de usar esta forma de desarrollar..30 octubre 2004, 07:01
christian
excelente articulo, muy informativo, saludos….....6 septiembre 2005, 09:55
Jose N. Figueroa
Gracias por darnos esta ayuda, sigue asi.4 diciembre 2005, 00:44
Pati @-;--
Sin importar cuántas veces uno lea tus artículos, Kemie, se aprende y se toma inspiración para continuar… con todo y lo difícil que pueda ser ;)4 diciembre 2005, 00:47
Pati @-;--
Sin importar cuántas veces uno lea tus artículos, Kemie, se aprende y se toma inspiración para continuar… con todo y lo difícil que pueda ser ;)21 agosto 2006, 20:27
joelito
bueno, es interesante pero lo k io busko es ventajas y desventajas de redes lan, si algunos de ustedes podria ayudarme en esta buskeda se lo agradeceria d todo corazon pueden responder a mi correo pero k sea en esta semana por k a la otra tengo una expocicion y es d este tema, gracias
22 febrero 2007, 20:35
Hector Ivan Bedoya D
Me parece muy buen no el articulo.
quiero pedir un favor a la persona que me quiera colaborar, necesito algo sobre como construir un standar gracias
30 agosto 2007, 19:28
Marisol
Hola!! gracias por el artículo, Saludos
31 mayo 2008, 23:41
combo
me gusto todo!!! adios