Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Browsers y Estandarización
por Juan C. D√ľrsteler [mensaje nļ 63]

Las √ļltimas versiones de los Browsers se est√°n acercando mucho m√°s a los est√°ndares que nunca. La situaci√≥n dista de ser la ideal, pero poco a poco nos vamos acercando.

En este art√≠culo me he propuesto desviarme un poco de la l√≠nea t√©cnica de los √ļltimos art√≠culos para hablar sobre cosas del d√≠a a d√≠a. Cosas que me pasan a m√≠ y sospecho que, por desgracia, tambi√©n les pasan a mis amables lectores.

El otro día uno de ellos (gracias Andreu) me envió un mensaje comunicándome que en casa (Windows 98 Internet Explorer 5) veía perfectamente la web de InfoVis.net, mientras que en su trabajo (Windows NT e IE 5.5) no. Al pasar el mouse por encima de un enlace, en vez de simplemente cambiar de color, éste se veía hundido y todos los saltos de línea cambiaban modificando la compaginación de la página. Al salir del enlace todo cambiaba otra vez, y así cada vez que pasaba por encima de uno de ellos, produciendo un efecto muy molesto. 

Andreu fue tan amable de enviarme las capturas de pantalla que se pueden ver en la siguiente tabla:

     
     Figura 1:
se aprecia el enlace y la compaginación antes de que pase el ratón por encima de él.


      Figura 2: Muestra el enlace cuando el ratón pasa por encima. Nótese como el cambio de aspecto modifica la compaginación de la página 

Me lancé como un poseso sobre las hojas de estilo en cascada (Cascading Style Sheets o CSS) que definen la apariencia de la web en que pierdo las mejores horas de mi madurez, puesto que es inadmisible que una web sobre visualización de información cometa un pecado de usabilidad tan burdo como éste (entre otros más veniales que comete y que iré arreglando…).

Analizando las definiciones de estilo me di cuenta que al redactar las primeras versiones utilicé una característica exclusiva de Internet Explorer, el "hover", que permite programar un cambio de apariencia de un enlace cuando el mouse pasa por encima (una especie de "rollover"). Entre todas las opciones que había en el estilo en cuestión elegí un discreto cambio de color de fondo que, en principio, es una buena práctica.

De lo que no me di cuenta es que dejé programada la opción "border-style:inset" que es la que produce el efecto de "botón apretado" y que, por lo visto, no se ha hecho efectiva hasta IE 5.5. Irónicamente, utilizo versiones antiguas de los browsers para comprobar la web y asegurar la compatibilidad hacia atrás. No me podía imaginar que tendría que comprobar también hacia adelante. 

Imagino la pregunta en la cabeza del lector: ¬Ņpor que nos cuenta este hombre su vida?. Pues porque tienen mucho que ver con la situaci√≥n pasada y presente de la estandarizaci√≥n en el mundo de los Browsers.¬†

Los estándares cubren, como muy bien explica Tom Yager en su recomendable artículo en InfoWorld dos aspectos

  • ¬†La apariencia: HTML 4.01 y CSS niveles 1 y 2 permiten definir la estructura, el formato y el control preciso sobre atributos como color, tipograf√≠a, etc

  • El comportamiento: ECMA-262 (EcmaScript basado en JavaScript ) y CSS Document Object Model (CSS-DOM) cubren los scripts que se ejecutan en el cliente y que permiten alterar el contenido de una p√°gina din√°micamente.

Los browsers actuales est√°n convergiendo y las √ļltimas versiones est√°n mucho m√°s cerca de los est√°ndares. Seg√ļn Yager Netscape 6.0 e Internet Explorer 6, as√≠ como Opera se adhieren a CSS nivel 1, y ECMAScript 2, con lo que, al menos tenemos un denominador com√ļn. Si queremos tener soporte de DOM2, CSS2 y Emascript 3, hay que empezar a programar la detecci√≥n del browser y programar por separado para cada uno de ellos ya que los niveles de cumplimiento son variados.¬†

Incluso aunque las √ļltimas versiones de los Browsers fueran fieles seguidoras de todos los est√°ndares, todav√≠a hay ingentes cantidades de versiones antiguas en las que CSS1 est√° soportada muy desigualmente. A√ļn m√°s, el usuario puede desconectar JavaScript, con lo que las posibilidades de que tu p√°gina se vea de forma diferente en cada ordenador a√ļn son mayores.

Y, al final, de lo que va esta lista de distribución es de visualización de información. Con la situación actual puede ocurrir que cada uno vea la misma información con aspecto diferente, o que partes de ella pueden desaparecer en función del browser. 

Afortunadamente poco a poco la cosa va mejorando. Esperemos que en un futuro cercano no haya que desperdiciar el tiempo programando en vano. Los errores, por desgracia, los seguiremos cometiendo igual.


Otro enlace interesante sobre como utilizar los colores en las hojas de estilo.

Enlaces de este artŪculo:

http://www.webestilo.com/css/  
http://www.w3.org/Style/  
http://www.infoworld.com/articles/tc/xml/01/10/08/011008tcweb.xml  
http://www.w3.org/TR/html401/  
http://www.w3.org/Style/CSS/#specs  
http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM  
http://www.w3.org/TR/DOM-Level-2-Style/  
http://home.earthlink.net/~cesarmartin/think/colores_hojas_de_estilo.html  
© Copyright InfoVis.net 2000-2018