Estoy creando iconos para un proyecto open source en el que estoy trabajando en estos momentos y he decidido ir publicándolos para su libre distribución.

Son iconos para los formatos de compresión más comunes y están en formato .png con transparencia y 512×512 píxeles de resolución: zip, rar, gz y tar.gz.

He intentado encontrar alguna licencia para los iconos, pensé en Creative Commons, pero no se adapta a lo que busco. Mi idea es que los iconos sean de libre distribución, uso, modificación y explotación, para cualquier tipo de uso, comercial o no, y que no sea necesario dar crédito al autor. ¿Algún lector conoce una licencia apropiada?

Respecto al uso de los iconos que continen a Tux (el pingüino de Linux), debería adaptarse a la licencia que ofrecen sus creadores: Larry Ewing, Simon Budig y Anja Gerwinsk. Más información aquí.

He creado una pequeña aplicación web para la generación de contraseñas seguras. El uso de estas contraseñas está destinado principalmente a criptoseguridad web; como salts para hashes en software que lo requiera (por ejemplo, la última versión de Wordpress).
Generador de contraseñas seguras

Podéis descargar el código abierto aquí.

Próximamente tengo previstos algunos posts sobre criptoseguridad, su aplicación en diseño/desarrollo web y explicaré en mayor detalle la utilidad de estas contraseñas.

Estado emocional: milenarista
Escuchando: (Los Golfos) - Qué pasa contigo tío

Un barquito que vaga a la deriva
con la tristeza del papel de diario,
catorce versos dicen lo contrario;
setenta y dos palabras sin saliva.

Una luna al amanecer se apaga
con el frío de la triste mañana,
un caimán se asoma por mi ventana;
se trata de un cliente que no paga.

En blanco y negro disparo mis fotos,
ci undocle di brodós nu pa merdeno,
me ahorro el color y los cuadros rotos.

La tormenta lanza tan sólo un trueno
al barquito tan triste sin escrotos;
y un último verso rima con eno.

Julio Amarot

Estado emocional: melancólico
Escuchando: (Celine Dion) - My Heart Will Go On

(see English version below)

Chromon es el juego Simon en el logotipo de Google Chrome, realizado en colaboración con Mr. Doob y Supersole. Podéis ponerlo en vuestra web mediante el código que aparece al final del post.

Chromon is the Simon game inside the Google Chrome logo, created as collaboration with Mr. Doob and Supersole. You can embed it into your web with the following code:

Hoy os muestro algunos consejos para conseguir que vuestras webs reduzcan su tiempo de carga:

- Crea las imágenes para el tamaño exacto que se vaya a mostrar en la web. Las imágenes de mayor tamaño ocupan más y en gran parte de los navegadores producen aliasing (dentellado) al ser redimensionadas.

- Crea los botones iluminables con transparencias. En bastantes casos se pueden sustituir rollovers creados a base de 2 imágenes por una sola imagen con transparencia y un cambio de color de fondo.

- Usa formato gif para imágenes pequeñas o vectoriales. A la izquierda muestro un ejemplo de logotipo en gif que ocupa menos de 2kb y a la derecha el mismo logotipo con jpg ocupando más de 7kb (y mostrando menor calidad).

- Ajusta el nivel de compresión para cada imagen jpeg. Se trata de una tarea bastante laboriosa, pero puede reducir ampliamente el tamaño de una página.

- El formato png8 ofrece a veces mayor compresión que gif. Para que se muestren los colores de un png idénticos en cualquier navegador a su equivalente en gif, es necesario eliminar el gamma del fichero, cosa que se puede hacer mediante utilidades tipo TweakPNG.

- Las versiones antiguas de Photoshop no disponen de un buen compresor para png, puedes usar Gimp o compresores png especializados para reducir el tamaño.

- Activa la compresión gzip de Apache para los ficheros javascript, css y tml. En el caso de que tu web use librerías como Prototype es especialmente importante; sin gzip son 120kb de descarga, con gzip por debajo de 30 kb.

- Si usas Wordpress, instala una cache. Wordpress sin cache puede tomar varios cientos de milisegundos en generar la página.

- Siempre que sea posible, agrega width y height a tus imágenes <img>. Esto no acelera la carga, pero hace que el navegador no tenga que renderizar varias veces el contenido a medida que recibe las imágenes. Se percibe especialmente en conexiones lentas.

- Para mostrar listados muy grandes (más de mil registros) es preferible usar divs a tables aunque el contenido esté semánticamente mejor representado con tables. La mayoría de navegadores renderizan varias veces más rápido los divs que las tablas (con diez mil registros supone varios segundos de diferencia).

- Usa el menor número de ficheros posible. El tiempo de descarga para un fichero incluye la latencia entre el cliente y el servidor. Cuando se realizan varias peticiones de ficheros simultáneamente, el tiempo de latencia no se acumula. Navegadores como Internet Explorer y ciertas versiones de Firefox no solicitan todos los ficheros de una página al mismo tiempo, están limitados a descargas de 4/5 ficheros en paralelo. Es decir, para un número elevado de ficheros, en el tiempo de carga se incluye una cuarta o quinta parte de la latencia multiplicada por el número de ficheros. Es por ello que es conveniente reducir el número de ficheros al mínimo posible. Un ejemplo concreto es mi portfolio: Desde España (donde la latencia es considerable porque el servidor está en USA), en Internet Explorer y Firefox la carga dura 2 segundos más que en Opera (Opera parece solicitar todas las imágenes simultáneamente).

- Las ventajas de los ficheros .css y .js suelen ser muy claras; se pueden compartir entre diferentes páginas de una misma web y la carga sólo se realiza una vez dado que permanece en cache. Sin embargo, para páginas que no tengan secciones o cuyo acceso a las secciones sea infrecuente, es posible que se mejore levemente el tiempo de carga incrustando los códigos en el html.

- En ocasiones concretas se puede sustituir toda la librería Prototype (y similares) por un iframe y/o unas cuantas líneas de javascript.

Algunos consejos eran bastante conocidos y frecuentes hace varios años, pero parece que con el aumento de la velocidad de conexión se han ido olvidando. Espero que se os haya refrescado un poco la memoria con este post :)

(versión en castellano abajo)

The logotype test shows popular logotypes and their reflection on the mirror. You have to select the original logotype (not the reflected one) until you complete a round of 15.

En el test de logotipos se muestran logotipos populares y su reflejo en espejo. Debes seleccionar el logotipo original (no reflejado) hasta completar las 15 rondas del test.

Traducción al inglés por Alicia.

En el test de arte se muestran obras pictóricas destacadas de diferentes épocas y estilos, y su reflejo en espejo. Consiste en seleccionar y pulsar en la obra original (no reflejada). Consta de 15 rondas. Las obras se seleccionan al azar; puede recargar la página para realizar un test de arte diferente cada vez.

Inspirado por Garlfield Minus Garfield he editado la presentación de Los Simpsons eliminando a los personajes de la familia. La edición ha sido realizada íntegramente en Photoshop, imagen a imagen (aproximadamente 1337 frames).

Inspired by Garfield Minus Garfield I’ve edited every frame of the intro of The Simpsons, deleting every character of the family. It has been been done in Photoshop for about 1337 frames.