martes, 29 de enero de 2013

Blogger: icono para dispositivos Apple

Si desde un dispositivo Apple (Iphone o Ipad) accedes a tu blog de Blogger (o realizado con cualquier otra plataforma) puedes añadir una página en la pantalla de inicio del dispositivo pero ¿con qué icono saldrá? En este artículo te explicaré cómo personalizarlo.

Si no has hecho nada por personalizar el icono para dispositivos Apple lo más normal es que si añades una página en la pantalla de inicio del dispositivo te salga un icono con una especie de miniatura de la página que has añadido y con las esquinas redondeadas. Lo normal es que quieras personalizar este icono:

  1. Crea un icono personalizado de 57x57 píxeles, guárdalo en formato png y súbelo a algún sitio donde esté accesible desde Blogger (dropbox, Google Drive,...). En el caso de areaTIC lo que tengo es una página de Blogger que no publico y donde añado este icono, los de redes sociales,... una vez añadidos el enlace que me genera lo puedo utilizar en las distintas páginas artículos del blog. El icono creado para areaTIC es el siguiente (no es necesario que redondees las esquinas, ni lo sombrees,... se encarga tu dispositivo Apple por tí).


    Si queremos más información sobre los iconos para dispositivos Apple, consejos para su creación,... podemos acceder a la siguiente página de la iOS Developer Library.

  2. Entramos en Blogger, vamos al apartado Plantilla y pulsamos sobre el botón "Edición de HTML".


  3. Buscamos en el HTML de la plantilla el código:
    </head>
    
  4. Justo encima del código anterior añadimos el código siguiente:
    <link rel='apple-touch-icon' href='http://.../iphoneicon.png' />
    
    Donde:
    • "iphoneicon.png" es el nombre del icono que has creado en el paso 1.
    • "http://.../iphoneicon.png" es la URL correspondiente al icono.
    Tras los cambios guardamos la plantilla.

  5. Ahora llega el momento de probarlo, si disponéis de un dispositivo Apple (iPhone o iPad) es muy sencillo, ¿pero y si no lo tenemos? Podemos acceder al blog de Duopixel y utilizar su simulador de iPhone, seleccionas la imagen creada en el paso 1 la subes y podrás ver el resultado. En un iPad se visualiza de igual forma.


Y hasta aquí el artículo de hoy, espero que os haya sido interesante, dentro de areaTIC puedes encontrar otros artículos, no dudes en consultar nuestro archivo; también puedes seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...)


No hay comentarios:

Publicar un comentario en la entrada