Globedia.com

×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Gravedad escriba una noticia?

Como agregar un icono de tu sitio web a la pantalla del iPhone, iPod o iPad

09/02/2011 20:16 0 Comentarios Lectura: ( palabras)

Los que somos constantes asiduos a las tecnologías de Apple y en el caso particular del iPhone, iPod o iPad y hemos navegado por internet desde estos gadgets nos hemos dado cuenta que muchas veces cuando un sitio web es interesante para nosotros lo agregamos al home screen pero muchos de estos sitios los hemos visto con iconos predeterminados y no screenshots de la página que automaticamente hace el sistema. Si eres de los que quiere tener un icono predeterminado en tu página, aquí te explicare como.

Como lo comentaba, hay y seguira habiendo muchas personas que son verdaderos geeks y que quieren que su blog o sitio web tenga esta caracteristica. La verdad no funciona para nada, pero si lo tomas por el lado gráfico, es un detalle fancy que le puedes agregar a tu página para que se vea más trabajada.

Como sabemos, las resoluciones de la pantalla entre el iPhone o iPod y el iPad son muy diferentes, mientras que los primeros utilizan logotipos o imágenes de 57×57 pixeles, mientras que el iPad son de 72×72 pixeles; esto es básicamente por el tamaño de la pantalla; de igual manera si ustedes checan, todos los iconos tienen las esquinas redondeadas, esto lo hace automaticamente Safari, por lo cual no es necesario hacerlo por nosotros mismos; con estas pequeñas especificaciones… porque no vamos a la explicación.

Pasos Número 1

Lo primero será crear nuestro lienzo en el programa de edición de nuestra preferencia, puede ser Photoshop, ilustrator, Gimp, Sketchbook o el que decidamos. Para este caso yo lo hare en Ilustrator.

El lienzo lo crearemos de 72×72 pixeles en RGB.

Número 2

Ya que tenemos el lienzo, entonces creamos nuestro logo, en este caso yo creare el del blog ‘ gravedad Blog’ y lo que haré será una g para diferenciarlo.

Número 3

Ya que tenemos creado el logo o imágen que queramos colocar entonces procedemos a guardarla. Recuerden que no es necesario hacer las esquinas redondeadas.

Número 4

Al guardarlo, lo haremos como ‘ Save for Web & Devices’ , esto nos permitira guardalo en una forma optimizada y en el formato que necesitamos.

Cuando estemos ahí, nuestra opción será guardarlo como PNG – 24, recuerden que con PNG no hay perdida de calidad como la hay con JPG, ademas que el PNG es el formato que acepta Safari.

Esto es IMPORTANTE, al guardalo lo haremos con el nombre de apple-touch-icon.png

Ya que lo tenemos guardado, vamos a nuestro FTP, SVN o Panel y vamos a subir este archivo al root de nuestro sitio.

Número 5

Ya que tengamos arriba el archivo entonces podremos tener nuestro icono personalizado en nuestro home screen de cualquiera de nuestros dispositivos apple. Ya que safari detecta automaticamente la imágen, no será necesario que eliminemos el acceso, con abrirlo es darle reload es suficiente.

Segunda opción

Si no estas muy conforme y no tienes mucha fé en que el sistema tomará automaticamente la imágen de tu web, hay una opción alterna donde solo debes de poner una linea de código dentro de tu sitio web. La linea es:

link reel=’ apple-touch-icon’ href=’ la ruta que tiene el archivo’

Recuerda que este tipo de códigos deben de estar dentro de la etiqueta HEAD

Que pasa si no quiero que mi imágen tenga el brillo que le agrega el sistema, entonces cuando guardes tu imagen el nombre deberá ser el siguiente:

apple-touch-icon-precomposed.png

Espero les resulte muy util esto. No olvides poner tus comentarios o feedback en la parte de abajo.


Sobre esta noticia

Autor:
Gravedad (52 noticias)
Fuente:
gravedad.com.mx
Visitas:
5849
Tipo:
Reportaje
Licencia:
Distribución gratuita
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.