Los media type especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), [papel (print)][1], [móviles (handheld)][2], etc. Algunas propiedades CSS están diseñadas para medios específicos (page-break-after y page-break-before se usan para media=“print” por ejemplo), y en otros casos propiedades son compartidos por diferentes medios, pero usan diferentes unidades (pixel para pantalla, centímetros para papel). Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta , de la siguiente forma:

Un tip precoz es un método tan corto y rápido, que casi que no es un artículo en sí. Los artículos son más bien extensos, donde explico paso-por-paso alguna técnica propuesta. En esta ocasión es casi como un twitter-artículo. La presente técnica la conozco pero no sé de dónde la saqué, ya que por más que busco en la web no encuentro documentación alguna al respecto. No sé ni cómo se llama, así que la incluí dentro de los selectores contextuales, ya que se comporta respetando los atributos adyacentes.

Muchas han sido las veces que [he nombrado][1] y [recontra-aplicado][2] el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class=“clearfix” y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.

Luego del anterior artículo develando [cómo se realiza el efecto Parallax con CSS][1], surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar [esa frustración que surgió en los comentarios][2], me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.

El efecto Parallax es una técnica que consiste en aplicar el efecto de profundidad a través de capas, utlizando principalmente CSS. Con esto podemos simular un pseudo-3D dentro de un escenario. Esta técnica es prácticamente la misma utilizada en los juegos 2D donde el personaje se mueve por su mundo (Sonic, Mario, etc) y el fondo se mueve en diferentes velocidades, simulando profundidad. Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio.

Siempre que viaje me traigo libros, ya que en Chile son muy caros y no incentiva siquiera pensar en comprar uno. En un viaje a Brasil me traje uno que hace mucho tenía ganas de leer: Don’t make me think, de Steve Krug. A primera vista es un libro bastante delgado, lo que me incentivó a leerlo durante ese mismo viaje. Su temática es muy precisa: aborda el concepto detrás de la usabilidad web, y el sentido común para lograr una exitosa experiencia por parte del usuario.

#27 – 14 Mayo 2008

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para monospace. Y sería, tenemos limitada la creatividad con eso. Si pensamos en utilizar una font especial, lo único que tenemos es recortarla como un GIF y ponerlas con alguna [técnica de text-replacement][1]. Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser y_cross-platform_ para asuntos de tipografía en la web.

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.