viernes, 22 de mayo de 2009

Cómo crear un WebClip de nuestro blog para el iPhone

Hace algún tiempo les explicaba cómo crear un favicon para tu blog en blogger y luego cómo recuperar el favicon para la nueva versión de blogger. Hoy les voy a explicar una pequeña variación a esto, que es cómo crear un WebClip de nuestro blog o página web para un iPhone (también es válido para el iPod Touch).

Un WebClip es un enlace a una página web que se crea a través del navegador web del iPhone (Safari) y que se almacena en la pantalla de inicio del iPhone. Cuando el usuario hace click en el WebClip, el iPhone abre automáticamente el navegador en la web indicada en el WebClip. Si la web en particular tiene un icono preparado para el iPhone, éste será el que se use como icono en la pantalla de inicio del iPhone; si no, se usará una captura de la propia web.

Los pasos que hemos seguido para crear nuestro icono para el iPhone son estos:
  1. Crear el icono partiendo de una imagen característica de tu web. En nuestro caso, la imagen de la que partimos es el logotipo de Gran Isla, que es también el que se usa como favicon de esta web. La imagen que se ha de generar tiene que ser un .png de 57x57 píxels, aunque también es válida una de 60x60. Como ya hicimos para generar nuestro favicon, usaremos el servicio FavIcon from clips para generar el icono del WebClip. Nuestra imagen resultante es esta:


  2. Una vez generada la imagen, necesitas subirla a un servidor desde donde se puede cargar. Lo más sencillo es que lo subas a tu cuenta de Flickr, Picasa Web Albums (donde se alojan tus imágenes subidas a blogger), o cualquier otro servicio que permita guardar imágenes.
  3. Por último, necesitas incluir en la plantilla de tu blog el código para añadir el icono del WebClip. Abre el código de tu plantilla, e introduce las siguientes líneas de código justo antes de la etiqueta "</head>":

    <link href="DIRECCION_DE_TU_ICONO" rel="apple-touch-icon">
Y eso es todo. Para comprobar que todo ha ido bien, abre tu blog desde el navegador del iPhone. Una vez que se cargue la página, presiona el símbolo "+" que aparece en la barra inferior, y luego presiona "Añadir a pantalla de inicio". Selecciona el nombre que quieres para tu WebClip; el icono que aparece ahora debería ser el que haz creado en los pasos anteriores.

Al final de todo el proceso, te deberá quedar un WebClip de tu blog en la pantalla de inicio de tu iPhone. Así es como queda el de Gran Isla:

No hay comentarios:

Publicar un comentario

Puedes utilizar algunos códigos HTML, como <b>, <i>, <a>