Vamos a echar un rápido vistazo a una pequeña aplicación en línea para pasar el rato haciendo algo creativo y simpático: Fuzzwich, un servicio que nos brinda la posibilidad de crear pequeñas piezas animadas con personajes prediseñados par, posteriormente, compartirlas o incrustarlas en nuestra página web. Es un servicio gratuito y no necesita registro de ningún tipo.

Consta de tres pasos: primero seleccionamos un fondo o enviamos una imagen para que ejerza como tal; después seleccionamos los personajes que van a participar, pudiendo poner varios y personalizarlos con una foto de nuestro rostro; finalmente, pasamos a la edición propiamente dicha, donde podremos mover a los personajes, hacer que realicen alguna de las acciones que incluye cada uno, incluir diálogos escritos en bocadillos o cambiar la música.

Una vez la animación está lista, el sitio nos da un enlace para acceder a ella y compartirla, además de un código para incrustarla en tu página web. Y nada más. Eso sí, es importante que no se extravíe el enlace, pues jamás podría recuperarse la animación. No hay manera de encontrarla entre las demás que hay disponibles en el sitio. No hay nada parecido a un directorio o una caja de búsqueda, sólo un enlace que dice “More Minivids”.

Al principio, cuesta un poco hacerse con él, pero su realmente su manejo es más simple de lo que aparenta en un primer momento. No es que se puedan crear animaciones dignas de un premio cinematográfico, pero sí se puede hacer algo simpático y original con lo que dar una sorpresa a alguien en su cumpleaños, por poner un ejemplo.

Vía:
Genbeta – Fuzzwich: haz entretenidas animaciones en un par de minutos

Las modernas tecnologías de construcción de sitios web permiten a los diseñadores dar rienda suelta a su más arriesgadas y creativas ideas. Un proceso interactivo mejorado y una apariencia visual destacable pueden conseguirse con herramientas como Flash, JavaScript y PaperVision3D, por nombrar unas pocas. Éstas tecnologías generalmente impresionan y entretienen a los visitantes y además suelen ser utilizadas por artistas conceptuales para presentaciones artísticas y campañas publicitarias.

En esta entrada de Smashing Magazine titulada Bizarre Websites On Which You Can Kill Time With Style encontrarás una colección de sitios impresionantes, que combiando ideas poco convencionales (y en ocasiones estrambóticas) y un uso inteligente de efectos en JavaScript y Flash, te atraerán para jugar con ellas hasta perder un tiempo muy valioso.

FreePSDTheme es una colección te temas diseñados por Dany Duchaine. Como forma de agradecimiento a todos los compradores y gente que lo ha apoyado, Dany comparte ahora sus temas de alta calidad de modo gratuito para difundir su talento e inspiración. Las versiones codificadas en HTML o para WordPress puede ser adquiridas fácilmente (y a bajo precio) en ThemeForest si deseas un tema concreto pero no quieres codificarlo tú mismo.

Muchos nuevos temas estarán disponibles cada poco tiempo, por lo que es bueno estar atento a su sitio web.

Vía:
WWWhat’s New – FreePSDTheme – Colección gratuita de diseños web en PSD

A continuación verás todo lo que necesitas saber sobre la compresión de imágenes en relación al diseño web. Hemos cubierto las diferencias entre compresión con y sin pérdida, los varios tipos de archivo y las técnicas que utilizan, y las directrices para saber qué tipo de formato de archivo encaja mejor con los diferentes clases de imagen.

1. Compresión con pérdida contra sin pérdida

Mucha gente cree que deberían utilizar solamente un formato de imágenes que no tenga pérdida de calidad. Mientras la compresión sin pérdida es superior para muchas clases de imagen, no es necesario para otras muchas. Básicamente, la compresión de imagen sin pérdida significa que toda la información del archivo original se mantiene. La compresión con pérdida, por otro lado, elimina parte de la información del original y guarda la imagen con un tamaño de archivo reducido. Depende de ti, como diseñador, decidir cuánta información se puede desechar para ajustar el ratio de compresión de la imagen.

Compresión sin pérdida

Hay unos pocos métodos para la compresión sin pérdida. Existen formatos de codificación como el RLE, utilizado por los archivos BMP, que toma patrones de datos (elementos de los datos consecutivos con los mismos valores) y los almacena en un único valor de información con un contador. Es lo que mejor funciona con archivos gráficos simples, donde hay largos patrones de elementos de información idénticos.

La deflación es otro método de compresión sin pérdida utilizado por las imágenes PNG. Utiliza una combinación del algoritmo LZ77 y la codificación Huffman. Además de ser utilizado por las imágenes PNG, es también utilizado para la compresión ZIP y gzip.

La compresión Lempel-Ziv-Welch (LZW) es un algoritmo de compresión sin pérdida que realiza un análisis de la información. Se utiliza en los formatos GIF y TIFF (en algunos de ellos).

Compresión con pérdida

Hay un gran número de métodos de compresión con pérdida, algunos de ellos se pueden combinar con métodos de compresión sin pérdida para crear archivos de tamaño aún menor. Un método es reduciendo el espacio de color de la imagen a los colores más comunes que hay en la misma. Es utilizado habitualmente en archivos GIF y, en ocasiones, en imágenes PNG, para obtener archivos de menor tamaño. Cuando se utiliza con los tipos de imagen apropiados, y combinado con suavizado, pueden conseguirse imágenes cercanas a la original.

La codificación por transformación es el tipo de codificación utilizada por las imágenes JPEG. En imágenes, este tipo de compresión hace una media de los colores de la imagen en pequeños bloques utilizando transformación discreta de coseno (DCT) para crear una nueva que utiliza menos colores que la original.

Submuestreo de color es otro tipo de compresión con pérdida que tiene en cuenta que el ojo humano percibe cambios en el brillo más agudamente que los cambios de color, y se aprovecha de ello desechando o uniendo información cromática (color) mientras mantiene la información de brillo. Es utilizada comúnmente en la codificación de vídeo y en imágenes JPEG.

2. Diferentes tipos de archivos

Debido a la índole de este artículo, solamente nos vamos a centrar en tres tipos de archivo, que son los más comunes en diseño web: GIF, JPEG y PNG. Recuerda que existen otros tipos de archivo que utilizan compresiones (TIFF, PCX, TGA, etc.), y que no es difícil que te los encuentres en toda clase de trabajos digitales.

GIF

GIF significa Graphics Interchange Format, y es un formato de imagen de mapa de bits presentado en 1987 por CompuServe. Es capaz de mostrar hasta 8 bits de color por píxel, lo que significa que las imágenes puede contener hasta 256 colores del rango RGB. Una de las mayores ventajas del formato GIF es que permite imágenes animadas, algo que no pueden hacer el resto de los formatos mencionados a continuación.

JPEG

JPEG (Joint Photographic Experts Group) es un formato de imagen que usa compresión con pérdida creando archivos más pequeños. Una de las grande ventajas de JPEG es que permite a los diseñadores un ajuste preciso de la cantidad de compresión que se desea utilizar. El resultado es una mejor calidad de imagen cuando se usa correctamente, todo ello con una tamaño de imagen razonablemente pequeño. Debido a que JPEG utiliza compresión con pérdida, las imágenes guardadas en este formato tienen a tener “ruido”, donde se pueden ver píxeles extraños o halos alrededor de ciertas partes de la imagen. Suelen estar en áreas de la imagen donde hay un fuerte contraste entre colores. Generalmente, a mayor contraste en la imagen, mayor calidad necesita al ser guardada para obtener un aspecto decente en la misma.

PNG

PNG (Portable Network Graphics) es otro formato de mapa de bits que se aprovecha de la compresión sin pérdida y fue creado para reemplazar al formato GIF. El formato PNG no fue visualizado correctamente en Internet Explorer durante mucho tiempo, haciendo que se utilizara menos que los formatos GIF y JPEG, aunque funciona correctamente en el resto de navegadores (Firefox, Opera, Safari, etc.). Los archivos PNG pueden almacenar paletas indexadas de color (tanto de 24 bits RGB como de 32 bits RGBA), escala de grises, y espacios de color RGBA y RGB. Una de las grandes ventajas de los archivos PNG es que pueden almacenar un canal alfa que les permite tener transparencias.

3. Eligiendo un formato de imagen

Cada tipo de formato de archivo especficado anteriormente es apropiado para diferentes clases de imágenes. Elegir el formato apropiado resultará en una mejor calidad de imagen y un tamaño menor en los archivos. Elegir el formato incorrecto significará que las imágenes no estarán en su mejor calidad y que serán mayores de lo necesario.

Para gráficos simples como logotipo o dibujos de líneas, el formato GIF suele ser lo que mejor funciona. Debido a la limitación de colores del formato GIF, los gráficos con degradados o suaves cambios de color suelen salir mal dibujados. Aunque se puede disimular en gran medida utilizando el suavizado, suele ser mejor utilizar otro formato de archivo.

Para fotografías o imágenes con degradados donde el GIF es inapropiado, el formato JPEG puede ser el que mejor encaje. JPEG funciona genial con fotografías con cambios suaves de color y sin un contraste fuerte. En áreas de fuerte contraste, es más que probable que aparezcan manchas o ruido (halos alrededor del área). Ajustando el grado de compresión de tus JPEG antes de guardarlos generalmente redundará en una mayor calidad de imagen manteniendo un archivo de tamaño pequeño.

Para imágenes con alto contraste, especialmente fotografías, o ilustraciones con muchos degradados y contraste, el formato PNG suele ser el mejor. También es buena opción para imágenes con trasparencias, especialmente aquellas que necesitan una transparencia parcial. Los archivos PNG suelen ser mayores que los JPEG, aunque depende del tipo exacto de imagen. Los archivos PNG también son sin pérdida, lo que significa que toda la calidad de la imagen original permanecerá intacta.

Aquí un resumen de qué formato funciona mejor con cada clase de imagen:

GIF

• Si es necesaria animación.
• Gráficos simples y sin degradados.

JPEG

• Fotos, especialmente sin alto contraste.
• Pantallazos, especialmente de películas, juegos, o contenido similar.

PNG

• Dibujos de líneas simples, ilustraciones.
• Fotos con alto contraste.
• Transparencia, especialmente con canal alfa.
• Pantallazos de aplicaciones o diagramas detallados.

Y aquí un resumen de qué formatos evitar para cada clase de imagen:

GIF

• Imágenes con degradados.
• Fotografías.

JPEG

• Imágenes con alto contraste.
• Imágenes detalladas, especialmente diagramas.
• Gráficos sencillos (los tamaños de archivo son mayores).

PNG

• Fotos con poco contraste (los tamaños de archivo son mayores).

4. Compresión de imagen en diseño para impresión

Aunque el grueso de este artículo se ha centrado en la compresión de imagen en el diseño web, merece la pena mencionar el efecto que la compresión puede tener en el diseño para impresión. En la mayoría de los casos, la compresión de imagen con pérdida debe evitarse en el diseño para impresión. Los gráficos para impresión deben evitar el ruido y los halos mucho más que los gráficos para web. Mientras que un JPEG guardado a calidad media puede verse genial en un monitor, cuando se imprima, incluso en una impresora de chorro de tinta, la perdida de calidad será notable (así como el ruido).

Para diseño de impresión es preferible el uso de formatos sin pérdida de calidad. TIFF (Tagged Image File Format) es generalmente el formato de archivo preferido si es necesaria la compresión, pues da varias opciones de compresión sin pérdida (incluido el mencionado anteriormente LZW). De nuevo, dependiendo de la imagen y de dónde será impresa, es generalmente mejor utilizar un tipo de archivo sin compresión. Habla siempre con tu impresor para saber qué prefiere.

Sobre el artículo

Este artículo es un traducción libre del artículo Everything You Need to Know About Image Compression escrito por Cameron Chapman en Noupe. Para más información visita el artículo original y sus fuentes (inglés).

Deja de diseñar sitios web, comienza a diseñar carteles

Una nueva generación de sitios web está emergiendo y están dejando de parecer sitios web para parecerse más a carteles, pósteres llenos de información. Son muy fáciles de utilizar, enganchan visualmente y la mayoría de ellos son muy diferentes.

En ocasiones pienso que tengo un conflicto interior. Por un lado estoy siempre pensado en cómo la imprenta no es como la red y cómo los diseñadores web necesitan ceñirse a los convencionalismos.

Por otro lado me siento inspirado a ser más creativo en mi trabajo y tomar algunos riesgos. Estoy aburrido de la misma vieja forma de aproximación al diseño web.

En una entrada reciente escribí:

“Demasiados sitios parecen iguales a los de su competencia. Si quieres que los usuarios recuerden tu sitio, éste necesita diferenciarse entre la multitud.”

¿Cómo podemos ser entonces diferentes y mantener aún nuestros sitios de fácil utilización?

Echando un vistazo al cartel para inspirarse

Una manera de mantener la facilidad, y aún así ser diferente, es buscando inspiración más allá del la red. Por ejemplo, echa un vistazo a diseños para imprenta que tengan la capacidad de retener la atención de la gente y que comuniquen una gran cantidad de información rápidamente.

Un ejemplo de ello son los carteles impresos:

• Visualmente atractivos para mantener la atención.
• Fáciles de asimilar de un vistazo.
• Proporcionan más información para el lector más interesado.

En otras palabras, necesitan ser…

• Atrayentes.
• Fáciles de utilizar.
• Asimilables rápidamente.
• Tener la información clara jerárquicamente.

¿Te suena familiar? Los sitios web tienen los mismos retos.

Utilizando el diseño de carteles en la red

Quizá estés viendo estos ejemplos y preguntándote cómo esta aproximación puede aplicarse a la red. Después de todo, no tienen demasiado en cuenta el contenido.

Dejando a un lado el hecho de que la mayoría de sitios web tienen demasiado contenido y necesitan ser simplificados, no es imposible aplicarlo incluso con más contenido.

De hecho, muchos diseñadores web ya se han inspirado con el diseño de carteles. Aquí tienes unos pocos de mi biblioteca de inspiraciones.

Diseño web de Flourish

Diseño web de Groovy

Diseño web de Kitschen Sink

Personalmente, encuentro esta nueva generación de sitios esperanzadora. Demuestra un avance respecto a la estética de la red sin olvidarse de los principios de la facilidad de navegación.

Esto diseñadores deberían ser elogiados por su deseo de ir más allá de las bondades del diseño web tradicional y por ver más allá de la red en busca de inspiración. Deberían ser elogiados por rechazar el mito del redil, de seguir las tendencias a cualquier precio.

¿Te han inspirado a ti? ¿Piensas que puede aprender del mundo del diseño impreso o son dos mundos demasiado diferentes? Deja tus pensamientos en los comentarios.

Más información:
Para más ejemplos e información adicional visita la entrada original Stop designing websites, start designing posters.

Pinche aquí para ver el vídeo

Cada día vemos más aplicaciones que utilizan el concepto de realidad aumentada, de la que ya hablamos con anterioridad en esta bitácora. El vídeo sobre estas líneas explica cómo se realizó el primer anuncio de Mini con esta tecnología, en concreto para el modelo Mini Cabrio.

Acercando la publicidad a nuestra cámara web (siempre que tengamos un ordenador con el componente necesario para ello instalado), veremos aparecer en la pantalla nuestras manos sujetando la revista y encima de ella un Mini Cabrio en 3D, que podremos manipular (rotarlo, acercarlo, girarlo, etc.). De hecho, se puede descargar un PDF para experimentar en el sitio y ver con nuestros ojos esta tecnología en acción.

Vía:
Isopixel – Realidad Aumentada en una publicidad para Mini

Siempre nos atrae un diseño impactante, una disposición correcta o un contenido de calidad cuando llegamos a un sitio web, pero pocos de nosotros nos fijamos en las texturas y patrones que utiliza. Si solamente hubiera colores de fondo, muchos sitios de la red no serían tan atractivos como lo son ahora.

Los patrones pueden ser simplemente la repetición de unas pocas líneas o puntos, otros pueden ser más complicados con complejas combinaciones de imágenes y colores. Un patrón debe cuadrar con el estilo general del sitio web, o ser convertiría en una distracción y molestaría en exceso.

Aquí os proponemos una colección de ochenta (80) nuevos y refrescantes patrones. Los mejor de todo: todos son de uso totalmente libre. ¿A qué estás esperando? Utilízalos en tu sitio web y dales a tus visitantes una nueva sensación.

Enlace a los patrones y artículo original:
Noupe – 80 Stunning Background Patterns For Your Websites

Microsoft ha decido hacerle un lavado de cara su marca MSN. Desde luego, el cambio no ha sido radical. La mariposa, aunque con aires más modernos, continúa dando la lata con sus tonos sacados del pasado. En lugar de buscar un símbolo más moderno y sencillo, Microsoft ha optado por continuar con una imagen salida de la mente un diseñador de hace cientos de años, cuando los degradados de multicolores estaban de moda, al igual que utilizar todos los colores del arco iris. La nueva forma de la mariposa es más impersonal y le falta cierta elaboración para ser más impactante.

El cambio de color de la tipografía es correcto y encaja bastante bien con los nuevos aires de MSN.com. La tipografía, aunque ha perdido grosor, no es del todo una mala elección pues su legibilidad es mayor comparada con la anterior, que además estaba en cursiva.

En cualquier caso, ¿qué pensáis de la nueva imagen?

Vía:
Brand New – New Butterfly not so Fly

Los diseñadores van mejorando su proyecto día a día para que sea más accesible e intuitivo de cara al usuario. Existen diseñadores que tienen mucha inspiración y pueden realizar diseños de plantillas desde la nada. Otros necesitan fijarse en diseños para mejorar su creatividad.

En CSSBlog ES nos presentan un recopilatorio con más de 70 plantillas gratuitas en formato PSD (Photoshop), organizadas según sean plantillas para WordPress o no lo sean, principalmente para que puedas convertirla a CSS y XHTML. En la página web se muestra una previsualización de cada plantilla, así como sus novedades y el enlace de descarga (es recomendable mirar la licencia antes de usarla).

Vía:
CSSBlog ES – +70 plantillas gratuitas en PSD

El problema de seguridad, descubierto por el usuario Rooibo, afecta a todas las versiones de WordPress publicadas. El fallo, permite dejar fuera de servicio al servidor que aloja las bitácoras.

En cualquier caso, el mismo usuario nos da la solución al problema. Para ello, simplemente se ha de buscar, utilizando un editor de textos,  la siguiente línea dentro del archivo wp-trackbacks.php:

$charset = $_POST['charset'];

Y sustituirla por:

$charset = str_replace(”,”,””,$_POST['charset']);
if(is_array($charset)) { exit; }

Una vez realizado el cambio, se guarda el archivo y se sustituye en el servidor. De esta sencilla manera, nuestro sitio en WordPress dejará de ser vulnerable.

Más información:
Rooibo – Agujero de seguridad muy grave en WordPress