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

Sigue aquí »

El sentido de la vista, como el resto de sentidos, requiere constantemente de nuevos estímulos, que logren despertarnos del hastío y la monotonía. Este es el principal motivo por el cual el diseño gráfico, y cualquier otro tipo de arte visual debe estar en constante movimiento y evolución.

Os presento una web que logrará sacar del letargo a los aburridos fondos de pantalla y a la, en ocasiones, tediosa inspiración. En Desktopography recopilan diseños de fondos de pantalla de diseñadores "worldwide" con descarga gratuita. Algunos son espectaculares, y otros en mi humilde opinión algo horteras... pero sobre gustos...

El funcionamiento de la web es sencillo y no excesivamente lento. El diseño está realizado completamente en flash lo cual unos odiaran y otros alabarán. Para mi gusto es un diseño acorde a la temática, cumple con su función y además, logra ambientar bastante bien el momento (Música incluida).

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.

Ver álbum de fotos »

Introducción:

El color, su implicación cultural y psicológica, la forma de combinarlos adecuadamente y su visualización en diferentes tipos de pantalla son áreas que se deben afrontar en el momento de iniciar un diseño de un interfaz gráfico. En el siguiente artículo realizaremos un recorrido por las diferentes herramientas que existen en la web tanto para combinar colores, como para entender la forma de trabajo de los mismos en los interfaces para pantallas.

Pasos previos a la elección de los colores de nuestro interfaz

Cuando nos ponemos delante de la pantalla del ordenador para diseñar gráficamente un nuevo interfaz web o interactivo, uno de los primeros problemas que se nos plantean son los colores que vamos a utilizar, lograr una buena armonía y a su vez ayudar a la comunicación del mensaje es la clave para tener éxito en la elección.

Debemos tener en cuenta varios aspectos fundamentales:

• Si disponemos de un libro de estilo corporativo.
• Si disponemos de un logotipo, con uno, dos o más colores
• Tener muy en cuenta que los colores no se ven igual en todas las pantallas (recomiendo visualizar las combinaciones cromáticas en dos o más pantallas).
• A título internacional, conocer el significado de los colores, ya que un color comunica diferentes mensajes dependiendo de la cultura a la que vaya dirigido.
  

En definitiva conseguir la combinación adecuada, para lograr comunicar de manera correcta una idea, una temática o una identidad.

Aplicaciones online para elegir el color o colores adecuados

En esta “review”, voy a detallar algunas de las mejores herramientas online, que nos ayudarán a realizar la elección correcta de colores para nuestra web o interactivo:

Sigue aquí »

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