Como añadir un icono para el iPhone a tu web

22 May 2009 at 21:00
Comments Off
Icono de Aleph en el iPod Touch

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: el loco de la cocina

16 May 2009 at 12:44
Jamie Oliver

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:

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.

Posteando desde el iPod Touch

11 April 2009 at 11:50

Como ya es bien conocido, Apple inició una revolución en el campo de los dispositivos móviles cuando presentó la última generación de los iPod (incluyendo su teléfono móvil, el iPhone) y dió el siguiente paso al publicar la versión 2.x del software de esos dispositivos al añadir el App Store. Gracias a lo cual la funcionalidad de estas plataformas móviles ha aumentado enormemente al permitir que terceras partes publiquen aplicaciones.

Una de estas aplicaciones, WordPress for iPhone, es la que me ha permitido publicar este post desde mi iPod Touch. Todavía le faltan algunas funcionalidades como, por ejemplo, la de un editor enriquecido que permita añadir enlaces o algo de estilo (listas, negrita, etc.) a los post, pero seguro que sólo es questión de tiempo.

Torre de cala en Basset

15 December 2008 at 16:43

El fin de semana del puente de la Constitución, Xisco, Kiko, Pau y yo, volvimos a salir a caminar un poco. La idea inicial era la de ira a la Trapa, pero finalmente decidimos ir a la Torra de cala en Basset, que queda muy cerca, desde San Elm. La verdad es que no hice muchas fotos (últimamente no estoy muy inspirado) y me da pereza revisarlas y colgarlas. Supongo que algún día de estos lo haré, pero no se cuando. Mientras tanto, os dejo el track.

Elevación
Desde Sant Elm a la torre de Cala en Basset[Fichero GPX por gentileza de Kiko Piris]

Homenaje a “La naranja mecánica”

14 December 2008 at 13:45
Comments Off

La semana pasada la empresa celebró su fiesta de navidad y este año la temática era “el cine”. Como los informáticos somos así de raros, el departamento decidió hacer un homenaje a la película de Stanley Kubrick “La naranja mecánica“. Por las caras que puso la gente al ver a la gente disfrazada, estoy seguro de que muchos de los asistentes a la fiesta no conocían la película y a otros tantos le debía sonar pero no la habían visto nunca… Que lástima.

Como presentación de la actuación, algunos del departamento se curraron el siguiente vídeo que encuentro sencillamente genial.

Paseando por Cuber

16 November 2008 at 22:45

Hoy Pau, Tania, Xisco, Kiko y yo hemos visitado el jardín botánico de Soller aprovechando su jornada de puertas abiertas en el marco de la semana de la ciencia (SCIT/08). Allí hemos aprovechado el estupendo día que ha hecho para realizar cantidad de fotografías. Creo que Pau, al final del día, rondaba las 300. En cuanto haya revisando las que he hecho, colgaré las que merezcan la pena en la galería.

Al salir del jardín, y ya que estábamos por la zona, hemos decidido ir a dar una vuelta al embalse de Cuber, donde hemos comido sentados en su orilla, disfrutando del día y de la compañía, hasta que primero las nubes y luego las montañas han tapado el sol y hemos empezado a sentir algo de frío. Además, el viento que soplaba a ayudado a acentuar la sensación. Lo cierto es que el termometro del coche marcaba 6°C frente a los 14°C cuando estabamos llegando a Palma.

Ha sido un domingo tranquilo y agradable con el que esperamos empezar una serie de excursiones. Ya iremos contando.

Elevación
Recorrido por Cuber [Fichero GPX por gentileza de Kiko Piris]

EUReKA

5 November 2008 at 15:22
Comments Off

Imaginaros que estáis de viaje por el estado norteamericano de Oregón y de repente llegáis a un pequeño pueblo en el que la mayoría de los coches son eléctricos y donde los niños de cinco años se entretienen escribiendo con tiza ecuaciones diferenciales por las aceras. Bienvenidos a Eureka, sede de Global Dynamics.

A parte de un pueblo (ficticio por supuesto ;-) ) Eureka [eng] es una serie de ciencia ficción producida por el canal SciFi y de la que, en España, se han emitido las dos primeras temporadas por ese mismo canal, en las plataformas digitales, y por Cuatro, en abierto. Actualmente, en estados unidos se está emitiendo la tercera y cuando finalice la serie constará de un total de 46 episodios. Habrá que ver cuanto tendremos que esperar para poder disfrutar de los nuevos episodios en España.

El protagonista de la serie es Jack Carter, un oficial gubernamental que se ve obligado a aceptar el puesto vacante de sheriff cuya función principal es la de intentar mantener el orden en un pueblo que no es, en absoluto, tranquilo. El principal elemento perturbador de la paz es Global Dynamics, laboratorio secreto creado a finales de la segunda guerra mundial por el presidente Harry S. Truman por consejo de Albert Einstein y en el que trabaja gran parte de la población adulta del pueblo, desarrollando los mayores avances tecnológicos de los últimos 50 años. La libertad creativa que Global Dyamics da a sus científicos e ingenieros pondrá a Jack en situaciones insólitas y divertidas que resultaran muy entretenidas para los espectadores. Para haceros una idea de la serie, os recomiendo que miréis el anuncio promocional. A mí, esta serie me encanta.

Por cierto, la serie tiene unos efectos especiales muy cuidados (algo imprescindible por su temática), lo que le valió una nominación a los premios Primetime Emmy del 2007.

Zenphoto: galería minimalista

1 November 2008 at 20:59

Aquellos de vosotros que lleváis más tiempo visitando mi blog, os habréis dado cuenta de que he cambiado el software con el que gestiono mi galería de fotografías. Anteriormente usaba Gallery2 por su integración con WordPress mediante el plugin WPG2 (para el que desarrollé una mejora). Pero si bién era una solución válida, resultaba demasiado compleja. Era como matar moscas a cañonazos. Sólo necesitaba una mínima parte de las características de Gallery2.

Por eso, un día empecé a evaluar alternativas que se ajustaran mejor a mis necesidades. Las únicas características que me interesaban eran que pudiera organizar las fotografías en álbumes, que se pudiera mostrar los datos EXIF de las fotografías, poder etiquetarlas, valorarlas y comentarlas, que se integrara con WordPress y que fuera una herramienta libre. Finalmente encontré Zenphoto, que cumple con todas esas necesidades excepto la integración con WordPress. En su web lo definen como:

Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better. Don’t get us wrong though –zenphoto really does have everything you need for your online gallery, and you’ll even stare in awe at some of the innovative innovations we innovated upon.

Con el plugin ZenphotoPress para WordPress conseguí poder añadir fotos de la galería en los posts de forma simple. Pero integrar la apariencia me lo tuve que currar yo, usando como guía este post de Steffen Rusitschka. Pero con ese método Google no indexaba las páginas de la galería, aunque se visualizaban correctamente, porque todas devolvían un status 404. Además, compartían el título (tag <title> del HTML) haciéndolo muy poco Search Engine Friendly. Para solucionarlo tuve que modificar un poco el código de Steffen. Este es el index.php de mi theme integrado con el WordPress:

<?php if (!defined('WEBPATH')) die(); normalizeColumns(3, 6); ?>
<?php require($_SERVER['DOCUMENT_ROOT'].'/wp-blog-header.php'); ?>
<?php
// set the HTTP status
status_header('200');
 
// add the zen headers to the wordpress header
function zentitle() {
  echo '&raquo; '.strip_tags(getGalleryTitle());
}
function addzen() {
  global $_zp_themeroot;
  echo '<link rel="stylesheet" type="text/css" media="screen, projection" href="'.$_zp_themeroot.'/css/master.css" />';
  zenJavascript();
  printRSSHeaderLink('Gallery','Gallery RSS');
}
add_action('wp_head', 'addzen');
add_action('wp_title', 'zentitle');
?>
<?php get_header(); ?>
 
<div class="index">
  <!-- Código original de Zenphoto -->
</div>
 
<?php get_footer(); ?>

Lo más extraño es que yo tengo las bases de datos del blog y de la galería separadas pero no he necesitado hacer lo que comenta Steffen de conectarnos a una base de datos y luego a la otra. Por eso, si comparáis mi trozo de códico con el de Steffen veréis que falta esa parte. Lo siguiente será integrar el login de las dos aplicaciones, para lo que he visto que hay plugins, pero de momento no lo he mirado.

Como las URL de los álbumes han cambiado, también he añadido reglas de redirección en el .htaccess para no perder los enlaces que pudiera haber desde otras páginas.

Al final he conseguido dejarlo bastante bien integrado y estoy muy contento, tanto del resultado como de la aplicación en sí. Tiene justo lo que necesito. Ni más, ni menos. :-D

The Big Bang Theory

29 October 2008 at 17:35

Aunque ya tiene casi un año, hace unos pocos meses descubrí la serie de televisión “The Big Bang Theory“. Es una sitcom (comedia de siatuación) en la que dos geeks de veintipocos, un físico teórico y un físico experimental, interactúan con su atractiva vecina. Estas relaciones dan lugar a situaciones que resultan muy cómicas para todo el mundo, pero para los que somos geek, lo mejor son los diálogos. A mi me encantan porque tocan uno de los temas no relacionados con informática que más me gustan, la física. Por ejemplo, la serie empieza con el siguiente diálogo:

- Y si un fotón se dirige hacia un plano con dos ranuras y ambas ranuras son visibles, no pasará por las dos. Pero si no son visibles, sí. No obstante, si son visibles después de dejar el plano y antes de alcanzar su objetivo no habrá pasado por ambas ranuras.
- Ya lo se. ¿Y qué más?
- Nada más, pero sería una buena idea para una camiseta.

Y algo más adelante en el capítulo piloto, nos encontramos con esta joya:

- Deberíamos ser buenos vecinos. Invitarla a pasar. Que se sienta cómoda.
- Pues nunca invitamos a pasar a Luis/Luisa.
- Ya, y eso estuvo muy mal. Tenemos que ampliar nuestro círculo.
- Yo tengo un círculo muy amplio. Tengo 212 amigos en MySpace.

Genial :-D Y esto nada más empezar la serie, en sólo cinco minutos y antes de los primeros créditos. Para meteros el gusanillo, en YouTube podéis ver los mejores momentos del primer episodio, entre los que están los dos aquí transcritos.

Actualmente la serie consta de dos temporadas. La primera, de 17 episodios, fué emitida en España por el canal de TDT Antena.Neox; y hace poco más de un mes, el 22 de septiembre de 2008, la CBS empezó a emitir la segunda temporada que constará de 22. De hecho, la primera temporada debería haber constado de 22 episodios pero la huelga de guionistas obligó a acortarla.

Si no la hemos visto, puede recordarnos a “The IT Crowd“, pero no tiene nada que ver: ni los personajes, ni las historias, ni el humor. Lo único que tienen en común las dos series es el trasfondo.

Una serie muy recomendable con la que nos reiremos un rato. Especialmente aconsejable para todos los geeks, entre los que me incluyo. :-P

SSL en subdominios con una única dirección IP

27 October 2008 at 10:03
Comments Off

La aparición a mediados de 1998 de los VirtualHosts basados en nombre en la versión 1.3 del servidor web de Apache significó un cambio importante en el mundo de los servidores web ya que permitía configurar webs en diferentes dominios, todos ellos compartiendo la misma dirección IP. Tampoco hay que olvidar que esa mejora fue posible gracias a que los navegadores (por aquel entonces disponíamos de Netscape Communicator 4.5 e Internet Explorer 4.0 [1]) implementaron la versión 1.1 del protocolo HTTP, según la cual el navegador debe enviar el nombre del dominio al que se están conectando en la cabecera Host, usada por los servidores web para discriminar que a VirtualHost deben enviar la petición.

Desgraciadamente, las webs seguras nunca han podido beneficiarse de esta mejora por la forma en que funciona el protocolo HTTPS (HTTP sobre SSL). La cabecera Host que permite al servidor discernir el host virtual al que va dirigida la petición del usuario está a nivel HTTP, debajo del cual tenemos SSL y su negociación. En esa negociación es cuando el servidor envía al cliente su certificado X.509 y el navegador comprueba la validez del certificado comparando el campo CN del certificado con el nombre del dominio al que se está conectando. Por tanto, el servidor debe enviar el certificado correcto, y por tanto del host virtual correcto, al navegador antes que este le pueda indicar mediante la cabecera Host el dominio al que se quiere conectar. La única solución es usar VirtualHosts basados en dirección IP.

Sin embargo, si los diferentes dominios que tenemos en el servidor son subdominios que comparten el second-level domain, o SLD, podemos conseguir que todos ellos dispongan de web segura usando una única dirección IP. Por ejemplo www.example.com y mail.example.com tienen el SLD example.com en común.

Para conseguirlo, también es imprescindible el uso de un Wildcard SSL Certificate (he decidido no traducirlo porque ninguna de las tradicciones que se me han ocurrido me acababa de gustar), que es un certificado SSL en el que el nombre del dominio contiene un comodín. Por ejemplo: *.example.com. De esta manera, indicamos al navegador que este certificado es válido para cualquier subdominio de example.com. No voy a explicar como se generan los certificados SSL ya que buscando un poco por google se encuentran multitud de páginas al respecto. Si le vamos a dar un uso personal, podéis crear un self signed certificate. La única diferencia con los tutoriales que podáis encontrar es que como dominio introduciremos “*.<dominio>” (Por ejemplo: *.example.com).

Configuración del servidor web de Apache

Voy a suponer que en nuestro servidor tenemos configurado un servidor web Apache2 con varios host virtuales (www.example.com, mail.example.com y un servidor WebDAV para el Subversion en svn.example.com), y que el servidor sólo dispone de una dirección IP.

Lo primero que hay que hacer es poner el servidor web a escuchar en el puerto 443 (puerto estándar de HTTPS) y configurar un host virtual sobre ese puerto:

Listen 443
<VirtualHost *:443>
  ServerName *.example.com
  ErrorLog /var/log/apache2/https-error.log
 
  # Possible values include: debug, info, notice, warn, error, crit,
  # alert, emerg.
  LogLevel warn
 
  CustomLog /var/log/apache2/https-access.log combined
  ServerSignature Off
 
  SSLEngine On
  SSLCertificateFile /path/to/certs/example.com.pem
  SSLCertificateKeyFile /path/to/private-keys/example.com.key
</VirtualHost>

Con esto ya tenemos la capa SSL configurada. El certificado indicado en el parámetro SSLCertificateFile es el Widlcard SSL Certificate que hemos creado anteriormente. A partir de aquí, el “truco” está en el uso creativo del mod_proxy, que conseguiremos añadiendo la siguiente configuración dentro del hosts virtual que acabamos de crear:

  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
 
  # Proxy requests to ourselves preserving the Host header
  ProxyPass / http://localhost/
  ProxyPassReverse / http://localhost/
  ProxyPreserveHost on

Con esta configuración estamos reenviando todas las peticiones que nos lleguen a este host virtual por HTTPS hacia el propio servidor, pero cambiando el protocolo de HTTPS a HTTP. Es importante destacar la última línea, que le indica al servidor web que debe mantener la cabecera Host al hacerse la petición a sí mismo, gracias a la cual no tendrá ningún problema a la hora de determinar que página quiere ver el usuario.

Para que las aplicaciones web puedan distinguir si la petición que les llega a entrado por HTTP o HTTPS, configuraremos el host virtual para que añada la cabecera X_FORWARDED_PROTO a las peticiones que se hace a sí mismo:

  # Add the X_FORWARDED_PROTO=https to allow applications to identify
  # proxyed https connections
  RequestHeader set X_FORWARDED_PROTO https

Ya sólo queda un detalle, necesario únicamente si vamos a usar esta configuración para proteger un WebDAV. El problema de esta configuración con WebDAV viene a la hora de intentar hacer un ‘svn mv‘, por ejemplo. Este comando indica el destino en la cabecera HTTP Destination. Como el cliente se esta conectando a https://svn.example.com/repo/etc, la cabecera tendrá ese valor. Pero el host virtual que tiene la configuración de WebDAV sólo está configurado para HTTP por lo que espera que la cabecera Destination empiece por http://svn… Para solucionar la inconsistencia entre la cabecera esperada y la recibida echaremos mano del mod_rewrite:

  # Workarrounf for WebDAV Destination header
  RewriteEngine on
  RewriteCond %{HTTP:Destination} ^https://(.*)$
  RewriteRule . - [env=DESTINATION:http://%1,PT]
  RequestHeader set Destination %{DESTINATION}e env=DESTINATION

Resumen de la configuración

Una vez explicadas las diferentes partes de la configuración, os pongo toda la configuración tal cual se debe escribir en los ficheros de configuración del servidor web para que no haya problemas de “¿y esto donde va?, ¿dentro o fuera del virtualhost?” ;-) :

Listen 443
<VirtualHost *:443>
  ServerName *.example.com
  ErrorLog /var/log/apache2/https-error.log
 
  # Possible values include: debug, info, notice, warn, error, crit,
  # alert, emerg.
  LogLevel warn
 
  CustomLog /var/log/apache2/https-access.log combined
  ServerSignature Off
 
  SSLEngine On
  SSLCertificateFile /path/to/certs/example.com.pem
  SSLCertificateKeyFile /path/to/private-keys/example.com.key
 
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
 
  # Workarrounf for WebDAV Destination header
  RewriteEngine on
  RewriteCond %{HTTP:Destination} ^https://(.*)$
  RewriteRule . - [env=DESTINATION:http://%1,PT]
  RequestHeader set Destination %{DESTINATION}e env=DESTINATION
 
  # Add the X_FORWARDED_PROTO=https to allow applications to identify
  # proxyed https connections
  RequestHeader set X_FORWARDED_PROTO https
 
  # Proxy requests to ourselves preserving the Host header
  ProxyPass / http://localhost/
  ProxyPassReverse / http://localhost/
  ProxyPreserveHost on
</VirtualHost>

Conclusiones

Personalmente veo está configuración como una solución válida para servidores personales en los que se suelen usar self signed certificates o de CAcert. Para pequeñas empresas (con unos pocos dominios) puede ser una solución, pero los Widlcard SSL Certificates de autoridades certificadoras comerciales (cuyos certificados raíz vienen en los navegadores) no son baratos. Dependiendo del hosting creo que saldría más barato contratar IPs adicionales para el servidor y certificados individuales que no usar el Widlcard SSL Certificate en un servidor con una sóla IP.

En empresas medianas o grandes, puede justificarse el uso de Widlcard SSL Certificates si tienen un gran número de subdominios que quieren asegurar ya que puede suponer un ahorro, pero no veo el motivo de tenerlo todo sobre una sóla dirección IP. Por tanto, no veo que la configuración aquí explicada sea aplicable en este tipo de empresas.

A mi, esta solución me está funcionando muy bien y de momento no he encontrado ningún problema.

Notas adicionales

[1] Para los nostálgicos, ¿os acordáis de la guerra de navegadores?