Eran mediados de los ’90, y nadie vaticinaba los acontecimientos que desencadenarían la actual crisis de los estándares, efectos que aún persisten. Browser Wars fue la competencia entre web browsers o navegadores web por la dominación del mercado. Para ser más precisos, fue la lucha entre 2 compañías, Netscape y Microsoft por imponer sus navegadores por sobre el otro y así obtener más usuarios. Decorría 1995 y la web ya tenía la atención del público online. Netscape Navigator fue el primer gran browser para navegar en la web en esos tiempos, y Microsoft divisó el potencial económico de la web, por lo que compró licencias del pequeño browser Mosaic para crear su primera versión de Internet Explorer 1.0, la cual fue incluída en el paquete de su sistema operativo Windows 95. Meses más tarde salía Internet Explorer 2.0, y la guerra era ya evidente. El objetivo de Microsoft era dirigir la atención de los usuarios de la web hacia sus productos, apuntando la página de inicio de su navegador hacia su propio sitio web. Dado a esto, Microsoft pudo distribuir Explorer sin cobrar por ello. La carrera por nuevas versiones, tanto de Netscape Communicator como de Internet Explorer no se hizo esperar, donde se daba prioridad a nuevas funcionalidades más que la corrección de errores de sus versiones anteriores, dando como fruto productos inestables, muchos fallas de seguridad y lenguajes cada vez más propios que estandarizados. Con esto fue común verse imágenes del tipo “Mejor visto en Netscape” u “Optimizado para Internet Explorer”. Esto indicaba los bandos contrarios que estaban ya marcados.

La idea de una hoja de estilos que muestre evidentemente un marcado HTML deficiente o anticuado no es de nada nueva. Ya Eric Meyer hizo referencia a esfuerzos para desarrollar estilos que diagnosticaran etiquetas o atributos mal utilizados o llanamente obsoletos dentro de una página web. El objetivo es tener un grupo de estilos que puedan ser aplicados durante la fase de desarrollo (o armado) de un sitio web, o durante el análisis para un rediseño.

[Ventanas modales][1] actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. [Lightbox][2] fue uno de los primeros, [Thickbox][3] uno de los más completos, Greybox, Lightwindow… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: Shadowbox. Shadowbox es una ventana modal escrita enteramente en Javascript.

La propiedad CSS para white-space no es muy conocida ni muy utilizada, pero sí tiene una importante utilidad al momento de diagramar textos. Son esos detalles finos que marcan la diferencia entre un escritor de código web, y un power master pro en estilos.

Este artículo fue actualizado. Document Object Model, o DOM, o Modelo en Objetos para representar Documentos es una modelo en que los scripts pueden acceder y modificar dinámicamente el contenido, la estructura o los estilos de documentos HTML. A través del manejo del DOM se permiten las actualizaciones en tiempo real de contenidos, envío de formularios asincrónicamente, etc. O sea, es la base del funcionamiento de los rollovers, del onclick, de AJAX.. Se utilizó por primera vez en Netscape Navigator 2.0. El entendimiento del DOM es la base para entender la programación web.

#26 – 02 Abril 2008

Tenía pendiente una segunda entrega más completa sobre Microformatos. Espero el [primer artículo][1] haya quedado con gusto a poco, ya que ahora la idea es profundizar en el tema. Veremos los distintos tipos de microformatos disponibles, y cómo podemos utilizarlos en la práctica. Recapitulando, los microformatos nacieron bajo el alero de ampliar estándares semánticos aplicados a la www. La idea es que los indexadores y buscadores sean más inteligentes y entreguen datos más precisos en cuanto nosotros desarrolladores y profesionales dedicados a la web entreguemos mejor esos datos. ¿Y eso en concreto? Ya estaremos viendo resultados, con el anuncio de Yahoo! de incluir soporte a estándares web semánticos, incluyendo los microformatos en sus búsquedas. Excelente iniciativa. Comencemos la diversión. Estos son los principales formatos disponibles:

Vi este efecto bastante interesante en un sitio web, y me atreví a intentar replicarlo a mí manera. Luego de fracasar en mi primer intento, decidí hacer trampa y revisé su código fuente. Me dí cuenta de que utilizaban una propiedad que no conocía, lo que me explicó mi anterior fracaso. Primero, un video de una captura tomada desde el mismo sitio web, para que vean a lo que me refiero. Luego, la explicación bastante simple.

Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el [artículo anterior de centrado horizontal][1], es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda tener esta cualidad.

Uno de los temas más complicados a la hora de estructurar y diagramar un sitio, es cuando existen formularios. Creo que es el más difícil, ya que a pesar de tener [un buen CSS reseter][1] a mano que te ayude a setear esas propiedades en todos los browsers, aún así hay elementos que no obedecen como querríamos que lo hicieran. Algunos trucos se deben usar, y finalmente no queda totalmente exacto en todas las plataformas y navegadores. Imagínate esos formularios gigantescos, donde sobran campos y la usabilidad es nula… un lío. Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación: