En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que hemos realizado en un archivos estático ( CSS / Javascript / imagen ) y usa la copia cacheada en disco, impidiendo que la web muestre los estilos correctos, actualizados, o lanzando un error Javascript por el uso de una función no existente, hasta que forzamos una actualización con Ctrl-F5.

El caché de los navegadores actúa en el 90% de las ocasiones como nuestro aliado. Permite que determinados archivos estáticos se carguen una única vez por usuario, y se lean desde el disco en sucesivas visitas, reduciendo drásticamente los tiempos de carga.

De todas formas, el caché también puede jugar en nuestra contra en determinadas ocasiones: Si hemos realizado modificaciones a un archivo estático en un intervalo corto de tiempo, y además estas modificaciones han hecho variar muy poco el tamaño de nuestro archivo, es muy probable que el navegador no detecte que existe una nueva versión, y en vez de descargar el fichero más actual, haga uso de la copia que guarda en el disco para montar la página.

Como apuntábamos al principio, las consecuencias de esto suelen ser desastrosas: webs descuadradas o errores javascript por culpa de funciones que "deberían estar", pero que el navegador no ha cargado. Y, claro , el Ctrl-F5 sirve para mostrar la página al compañero de mesa o para tranquilizar al jefe que ha pegado un bote en la silla al ver el resultado, pero el usuario no tiene ni idea... va a verlo todo descuadrado hasta que expire la caché o le dé por forzar la recarga ( cosa poco probable ).

La solución a este problema es sencillamente añadir un parámetro a la llamada que hagamos al archivo estático. Los hay que optan por usar una fecha, y otros simplemente un valor numérico. Yo soy de estos últimos: como suelo usar Subversion para el control de versiones, lo que hago es actualizar el valor con el nº de versión correspondiente. De esta forma puedo saber, además, cuándo se hizo la última modificacion "sensible" a la hoja de estilos, echando un vistazo al showlog.

Cada vez que cambiamos el parámetro que hemos añadido a la llamada al CSS ( o Javascript, o imagen... ), lo que estamos haciendo es forzar al navegador a descargar de nuevo el archivo, retomando de esta forma el control sobre cuándo cachear y cuándo no.

CMYK son las siglas del modelo de color que se usa normalmente en impresión. CMYK hace uso de 4 colores básicos ( Cyan, Magenta, Amarillo y Negro ) para reproducir toda la gama de colores.

Hasta ahora yo, igual que Jorge de bloGrafico , estaba convencido de que "K" correspondía al último color, blacK, pero no. Al parecer corresponde a la palabra Key ( Cyan Magenta Yellow Key-plate ) . La Key-Plate correspondía a la plancha negra, y se llamaba así porque dicha plancha contenía la mayor parte de la información de la imagen. Curioso.

Por otra parte, es interesante también el motivo por el cual se incluye el negro en este modelo de color, aún pudiendo ser reproducido simplemente por la mezcla de los otros tres:

• Por meras limitaciones técnicas: conseguir el color negro supondría una mezcla del 100% de los otros 3 colores, resultando una capa de tinta que tardaría mucho en secar o incluso podría romper un papel fino.
• La mayoría de textos se imprimen en negro, y mediante la superposición de las 3 tintas algunos detalles de los caracteres serían complicados de conseguir.
• La tinta negra es la más barata. Si hubiera que mezclar las 3 tintas cada vez que se tuviera que imprimir en negro... iba a salir por un ojo de la cara.

Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas.

Aún a dia de hoy es habitual encontrar muchos sites que ofrecen a sus lectores versiones "imprimibles" de sus páginas, enlaces que nos envían a una nueva página en la que se han eliminado algunos elementos y se han formateado los contenidos de forma que encajen y se visualicen correctamente en papel.

Dejando un lado el trabajo extra que esto supone, crear páginas específicas para impresión duplicando contenido del documento principal puede acarrear daños colaterales tales como penalizaciones en el posicionamiento de nuestra web, por contenido duplicado en Google. Aún existiendo técnicas para evitar esto ( NOINDEX ), no tenemos porqué arriesgarnos ni realizar ese esfuerzo extra de duplicación.

Mediante el atributo "media " de CSS, podemos enlazar a una hoja de estilos que actuará exclusivamente cuando el usuario trate de imprimir una página.

En esta nueva hoja de estilos trataremos de conseguir lo siguiente:

1. Eliminar contenidos no deseados

Posiblemente no sean necesarias ni la cabecera completa del site, ni las opciones de navegación principales, el breadcrumb, ni, si las hubiera, las columnas laterales con información adicional, ¡o la publicidad!. Al usuario le interesa el contenido principal de la página.

2. Formatear la página

Desde asegurarnos que los elementos van a encajar en la página correctamente ( nada de floats ni margins, todos los anchos porcentuales... ) hasta revisar el formato visual de los elementos ( lo que en la versión online enfatizamos usando el color rojo, quizás valga la pena enfatizarlo con negrita o subrayado en la versión impresa: el usuario posiblemente imprima en blanco y negro ).

También, para rizar el rizo, podemos tratar de añadir a los enlaces algo de información adicional, indicando a qué URL apunta cada uno, o recopilándolos todos al final de la página. Os recomiendo la lectura del artículo que trata precisamente sobre esto en A List Apart .

3. Tener especial cuidado con las imágenes

Es habitual, a la hora de maquetar una página mediante CSS, el uso de imágenes de fondo para conseguir ciertos efectos, delimitar contenedores, etc... Hay que tener en cuenta que, por defecto, la mayoría de navegadores no imprimen las imágenes de fondo, con lo que, por ejemplo, si el logotipo de la página está como fondo de una capa que contiene el nombre la misma... no se verá en la versión impresa.

Una forma de evitar esto sería usar un logo optimizado para impresión ( B/N ), incluído dentro del propio HTML de la página, pero oculto por CSS para la versión de pantalla, pero visible para la versión impresa

online.css

print.css

html

Si te has tenido que pelear con AJAX y efectos dinámicos javascript, es posible que hayas usado ya, o al menos conozcas, las librerías Yahoo User Interface (YUI) y Jquery.

Pues bien... ¿Te imaginas la potencia y la estabilidad de la librería de Yahoo con simplicidad y la sencillez de uso de JQuery?

¡Existe! Su nombre es DED|Chain, y hoy la comentaban en el blog de YUI , y publicaban una entrevista a su creador, Dustin Diaz.

¿Habrá que probar, no?

Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensaba, mientras repasaba de nuevo los consejos que Dave da a los diseñadores que trabajan con CSS, en el ahorro de tiempo que supone la automatización de algunos de los puntos de la lista mediante el software adecuado.

En mi caso llevo algunos meses trabajando con CSSEdit ( sólo Mac OsX ), un editor de hojas de estilo realmente genial.

Entre sus muchas virtudes destacaría:

• Dispone de una vista "preview", una ventana donde podemos ver en tiempo real el efecto de todas las propiedades que vamos añadiendo y modificando.
• Podemos extraer y modificar el CSS de cualquier página web, mediante la ventana de preview.
• Mediante una sintaxis propia, usando simplemente comentarios en la hoja de estilos, nos permite agrupar propiedades e ids, traduciéndose esa organización en un listado jerárquico, a modo de un explorador de archivos, en la propia ventana de edición de código. Esto me parece especialmente útil, cuando se trabaja con hojas de estilo medianamente grandes. Dado que muchas veces mantener un orden adecuado es esencial para el correcto funcionamiento de la cascada y en formato jerárquico propiedades e IDs me parece genial.
  
• Mezcla funcionalidades de autocompletar con una barra de herramientas lateral dónde podemos escoger mediante clics las propiedades y los valores que queremos asignar a cada clase o ID. Acaba sirviéndonos de cheatsheet a la vez que de barra de herramientas.
• Dispone de un validador CSS integrado en la propia aplicación
• Permite gestionar versiones de nuestras hojas de estilos

En definitiva... "¡por qué no te habré conocido antes!", como decía el amigo Jesús Puente. Además, como punto a favor, el precio acompaña bastante: sólo $29.95.

Otras opciones similares, como StyleMaster ( Win & MacOsX ) cuestan casi tres veces más.

Si eres desarrollador o trabajas en esto del diseño web estarás conmigo en lo útil que resulta en ocasiones disponer de pequeñas chuletas donde apuntar los patrones más comunes al contruir una query, o los diferentes selectores soportados por CSS2, o un listado con funciones de tratamiento de cadenas de texto para PHP...

A estos efectos, los Cheat Sheets de ilovejackdaniels.com son bastante prácticos ( yo tengo 3 copias plastificadas en el escritorio ) y cubren diferentes áreas o tecnologías. Lo mejor: que van al grano. No pretenden ser pequeños manuales , sino guias de consulta rápida para aquellos que ya tienen ciertos conocimientos ( de hecho suelen ocupar una sóla hoja ).

De momento hay disponibles para:

• Expresiones regulares
• Microformatos
• Ruby on Rails
• ASP / VBScript
• Entidades HTML
• Javascript
• MySQL
• mod_rewrite
• CSS
• PHP
• Colores hexadecimales

Y si con estos no tienes suficiente o no encuentras lo que buscabas, puedes probar en este exhaustivo listado que han elaborado en Smashing Magazine.

Via | Obokaman  

Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CSS que tendría su nuevo navegador, Internet Explorer 7 . Después de unos 5 años sin publicar una nueva versión, parecía que la cosa iba a salir "fina": El modelo de caja se ha implementado correctamente, se soportan propiedades tan útiles como min/max-width, ... ¿¡Se acabaron las reglas sólo para IE!? No...

Por poner un ejemplo, no se han implementado los pseudo-elementos :before y :after. ¿Trivial? Para nada. Entre otros muchos usos, como la inclusión de elementos que afecten a la presentación de ciertos bloques ( comillas antes y después de elementos cite, pipelines después de listas de enlaces horizontales... ) o la limpieza de floats a través del easy clearing method quedan totalmente inutilizada.

El antiguo hack para explorer es ignorado por el nuevo IE y además, al carecer éste de soporte para :before, tampoco la regla genérica funciona. Esto se traduce en un montón de sitios descuajeringados: el anterior método permitía que aquellos contenedores que tuvieran hijos flotantes obtuvieran una altura correcta, correspondiente a su hijo más alto.

Cuando ya había perdido toda esperanza de disponer, de nuevo, de un método lo más genérico posible que permitiera disponer de un marcado "limpio" para conseguir el deseado efecto... me encontré con el artículo de Roger Johansson, New clearing method needed for IE7?, en que justo se plantea esto mismo, y en el que, a través de la discusión generada por sus lectores, consigue llegar a una versión funcional para IE y que hace uso exclusivamente de CSS.

La solución:

Con un pequeño añadido para IE 6, que se podría implementar de esta forma:

Información adicional:

• La técnica original: How To Clear Floats Without Structural Markup
• EasyClearing, the Aslett/PIE way is NOT broken in IE7!
• Clearing floats without structural markup in IE7