Hasta ahora nunca le había dedicado un post a nada relacionado con la música. Aunque, como a todo el mundo, me gusta, no es un tema que me apasione fuertemente. Pero hoy me ha apetecido comentaros el que, según mi parecer, es uno de los mejores vídeos musicales (sin menospreciar a la canción, que es el 50% del vídeo): “All is full of love” de Björk, publicada en el álbum Homogenic, y reversionada para el de grandes éxitos.

Para aquellos que no la conozcáis, Björk [wikipedia] es una cantante y compositora islandesa, que también ha hecho sus pinitos como actriz, con una voz muy particular. La verdad es que no es la típica voz de cantante, pero creo que encaja bastante bien con el tipo de música que realiza: difícil de definir.

El vídeo tiene ya sus años (finales de los ’90) pero no ha quedado en absoluto desfasado. De ambientación cyberpunk (supongo que por eso me gusta). muestra la elegante y delicada construcción de dos Björk robot que se enamoran, inmersas en un escenario muy industrial, muy high-tech, mientras suena una musica con ciertos toques orientales.

La verdad, como la descripción que he realizado no le hace justicia (por mucho que lo  intentara no creo que nunca llegara ha hacerlo) y si una imagen vale más que mil palabras entonces veinticinco por segundo valdrán muchas más, creo que lo mejor es que lo veáis y valoréis vosotros mismos. Ya me diréis que os parece.

Para los curiosos, os dejo el enlace al making of.

Desde que Xisco me pidió consejo tras probar varias de sus páginas con YSlow tenía pendiente escribir este post. YSlow es un plugin para Firefox que analiza distintos aspectos que pueden afectar al rendimiento de páginas webs y realiza recomendaciones. Todos los aspectos que se tienen en cuenta giran alrededor del tiempo de carga de la web. No entran en temas como optimización de base de datos y otros aspectos internos del servidor.

De todas las reglas, las más sencillas de corregir son:

• Add Expires headers
• Compress components with gzip
• Configure entity tags (ETags)

Otras reglas pueden suponer reescribir parte de la aplicación pero para solventar estas tres basta con añadir algunas líneas al final del .htaccess del directorio raíz de nuestra web. Hay que tener en cuenta que los modulos necesarios deben estar instalados y la configuración del servidor nos debe permitir establecer esta configuración (directiva AllowOverride)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Add Expires Header
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>
 
# Compress CSS files
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/xml application/rss+xml application/atom_xml
AddOutputFilterByType DEFLATE text/css application/javascript
</IfModule>
 
# ETag only use file time and size, but no inode
FileETag MTime Size

En las líneas 2 a 9 configuramos que las imágenes, hojas de estilo y javascripts tengan una fecha de expiración de una semana a partir del momento en que se ha visitado la página web. Esto significa que el navegador del usuario usará la copia local (fichero cacheado) durante una semana. Este comportamiento puede suponer un problema si tenemos ficheros de estos tipos que vamos modificando sin cambiarle el nombre (p.e. un banner) ya que los navegadores de algunos de los usuarios mantendran las versiones antiguas.

Desde la 12 a la 15 configuramos la compresión de las páginas HTML, feeds (text/xml, application/rss+xml y application/atom_xml), hojas de estilo y javascripts. De esta forma conseguimos ahorrar tráfico (importante si estamos en un hosting con limitaciones de tráfico)  y que el tiempo de transmisión sea menor.

Finalmente, en la última línea configuramos los ETags generados por el propio servidor Apache para los ficheros estáticos. Por defecto, Apache tiene en cuenta tres aspector para generar el ETag: el inodo, fecha de modificación y tamaño. Pero se recomienda no usar el inodo para generarlo ya que si nuestra web empieza a ser conocida y tenemos que distribuir la carga entre varios servidores, es muy poco probable que un fichero tenga el mismo inodo en todos los servidores de la granja. Entonces, el ETag variaría en funcion del servidor que lo generara por lo que no se sacaría provecho a esta cabecera. Para resolverlo, configuramos el Apache para que genere el ETag sólo considerando la fecha de modificación y el tamaño del fichero.

Con esta simple configuración yo conseguí pasar de una puntuación de 74 a 89.

A medida que pueda escribiré algún post más sobre optimización web y como resolverlo en el caso concreto de un blog que usa WordPress.

Icono de Aleph en el iPod Touch

Desde la versión 1.1.3 del sistema operativo del iPhone, puedes añadir enlaces a tus webs favoritas a la pantalla de inicio. Por defecto, el dispositivo crea una miniatura de esa web, pero es tan pequeña que no sirve para identificarla. Por suerte, ese icono se puede personalizar como podéis ver en la captura de pantalla.

Según podemos leer en la documentación de Apple, es tan simple como crear una imagen en formato PNG de 57×57 pixeles (sí, a mi también me parece un tamaño un poco extraño) y colocarlo en la raíz de nuestra web con el nombre  apple-touch-icon.png. El dispositivo  se encargará de redondear las esquinas y darle ese efecto glossy. Pero si nuestra imagen ya tiene algún tipo de efecto de brillo (como me ocurre a mi) queda demasiado sobrecargado: demasiado brillo. Para que el iPhone no añada ese efecto glossy a la imagen manteniendo las esquinas redondeadas, basta con renombrarlo a apple-touch-icon-precomposed.png, como se indica en otra parte de la documentación.

En lugar de usar los nombres por defecto, también podemos dar una referencia a la imagen que queremos que se use como icono añadiendo en la cabecera del documento HTML uno de los siguientes tags dependiendo de si quieremos o no que se aplique el efecto glossy a la imagen:

  <link rel="aple-touch-icon" href="/customIcon.png"/>
  <link rel="apple-touch-icon-precomposed" href="/customIcon.png"/>

Lo que no acabo de entender muy bien son los motivos que puede tener Apple para no usar el favicon (eng) que los navegadores ya usan, entre otras cosas, para asignar un icono al enlace  cuando lo guardamos en nuestros bookmarks. Ya se que normalmente el favicon es de 16×16 píxeles por lo que resulta algo pequeña para la interfaz del iPhone y escalándola quedarían horribles. Pero el formato ICO soporta que en el mismo fichero puedas tener varios tamaños de la imagen. Bastaría con que el iPhone usara la más grande disponible y si ninguna tiene el tamaño mínimo requerido que hiciera lo de la miniatura de la web. Ahora mismo no se me ocurre ningún motivo técnico para tener que usar otra imagen diferente para un fin similar.

Jamie Oliver

Por poco que a uno le interese la cocina seguro que le sonará el nombre de Jamie Oliver, pero para aquellos que todavía no lo conozcáis, aquí tenéis este post.

Jamie Oliver es un joven cocinero ingles que, a parte de llevar su restaurante,  lideró un programa para en contra del uso de comida precocinada en los comedores de los colegios británicos, es el autor de varios libros y ha realizado varios programas en televisión, como por ejemplo:

• Oliver’s Twist
• Jamie de viaje por Italia (Jamie’s great italian escape)
• En casa com Jamie Oliver (Jamie at Home)

Me he centrado en los programas que  he podido ver en España por el Canal cocina.

Hace una cocina sencilla pero estudiada. Es decir, no es Ferrán Adriá con sus deconstrucciones y esferificaciones, pero si que tiene recetas elaboradas y siempre tiene en cuenta que sabores encajan mejor. No es muy fino trabajando y las medidas más exactas que da son “una cucharada de esto”, “un puñado de aquello”, “mucho de eso” pero es muy divertido (de aquí el título del post). Utiliza bastantes especias y hierbas aromáticas, y muchos de sus platos tienen cierta influencia asiática o italiana (esto último se debe a su ascendencia materna). Algunos definen su cocina como fresca y orgánica.

A los que no lo conozcáis, os recomiendo que veáis alguno de sus vídeos.