Román Cortés

El barquito triste

29 de Septiembre del 2008

 

 

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

Chrome+Simon=Chromon

28 de Septiembre del 2008

(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:

Web más rápidas

27 de Septiembre del 2008

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 :)

Logo Test

22 de Septiembre del 2008

(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.

Román Cortés

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.

Test de arte

16 de Septiembre del 2008

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.

The Simpsons Minus The Simpsons

14 de Septiembre del 2008

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.

Problemas con Google Chrome

3 de Septiembre del 2008

Según la página de Google Chrome: “Si has probado el sitio con el navegador Safari 3.1, entonces debería visualizarse correctamente en Google Chrome.“. Dado que Chrome usa el mismo sistema de renderizado de páginas que Safari, WebKit, en teoría debería ser así. Pero parece ser que algunas partes han sido modificadas, como la encargada de representar el tag <input>… y aquí llegan los problemas.

Un ejemplo es el que ocurre al usar la propiedad css overflow: auto para un input, vista en diferentes navegadores (ejemplo de código):

Como podréis apreciar, el input en Chrome es bastante más alto que en los demás navegadores. 

En principio este problema concreto es fácil de solucionar; basta con eliminar la propiedad overflow del input (que es carente de utilidad para los inputs, pero dado que se suelen formatear inputs y textareas juntos, existen muchas webs que la aplican).

El problema mayor es para los desarrolladores web: es previsible una gran aceptación de Google Chrome y ello implica la corrección de páginas ya existentes y otro navegador web en el que tener que realizar pruebas; más trabajo.

Google Chrome

2 de Septiembre del 2008

Google Chrome

Ya está disponible la beta de Chrome, el nuevo navegador de la mano de Google.

Acabo de instalarlo y he realizado varias pruebas de velocidad… ¡impresionante!

He probado mi pacman-css y el efecto pelo y son mucho más rápidos en Chrome que en ningún otro navegador.

Chrome está basado en WebKit, el sistema de renderizado de páginas de Safari, pero a diferencia de éste, bajo Windows usa ClearType.

Windows Vista no es tan malo

2 de Septiembre del 2008


Esta semana he trabajado por primera vez con Windows Vista. Dado que mi experiencia ha sido positiva, y en contra de la gran cantidad de críticas que circulan por internet, he creido oportuno contarla.

La semana pasada se rompió mi ordenador y tuve que ir a comprar uno nuevo. En la tienda todos los equipos tenían Vista. Tuve miedo al respecto, debido a las críticas que había leido sobre este sistema operativo, pero no había otra opción…

Primera impresión: mala. El disco duro no paraba de funcionar en ningún momento, aparentemente sin motivo. Investigando un poco descubrí que se trataba de la indización de ficheros. Es un sistema para mejorar las búsquedas de ficheros de tu ordenador que realiza la indexación en segundo plano. Es muy útil para quienes pierden sus archivos, pero molesto para mi, dado que es una opción que no uso y que causa ruido constante del disco duro. Por suerte se puede desactivar y el disco duro se para.

Segunda impresión: parece algo lento. Busqué en internet formas de optimizar la velocidad de Vista, y Microsoft tiene un interesante artículo en pdf (en inglés). Siguiendo los pasos del artículo, quité los sonidos de Windows, desactivé Aero, animaciones de ventanas, servicios innecesarios, etc. La velocidad global mejoró muchísimo.

Tercera impresión: es rápido pero ¡no puedo usar IE6! El trabajo de desarrollo web requiere de pruebas en distintos navegadores, entre ellos, IE6. En Windows Vista no se puede instalar IE6, ni tampoco tener más de un Internet Explorer al mismo tiempo. ¿Cómo hacer pruebas en IE6 e IE8? Por suerte Microsoft nos da una solución: Virtual PC 2007 e imágenes preconfiguradas con XP y diferentes navegadores, todo disponible desde su centro de descargas (buscar IE App Compat VHD).

Impresión final: me gusta. Tras los primeros días y ya tenerlo totalmente configurado y optimizado, he estado trabajando y he podido comprobar que no es tan malo. Lo primero la velocidad; la carga de los programas ha mejorado considerablemente respecto a XP. Ejemplos como abrir Photoshop en menos de 2 segundos no dejan de sorprenderme. Los requisitos de memoria no parecen ser tan grandes como se comenta; estoy trabajando con sólo 1 giga, y tras la desactivación de servicios no necesarios, no parece ser problema alguno (suelo trabajar con archivos de Photoshop de varios cientos de megas). La velocidad de arranque parece similar a la de XP (curiosamente es un 20% inferior a Kubuntu en mi ordenador), y la de apagado bastante más alta. Por último, la estabilidad. Windows Vista SP1 parece ser bastante estable; no me ha dado ningún problema en esta semana de trabajo.

Resumiendo: Windows Vista no parece mal sistema operativo, supongo que tendrá sus defectos pero no creo que se merezca la mala crítica que está recibiendo.