espartan1047
Iota
Redactor
Verificación en dos pasos activada
Betas, este es mi primer tutorial que realizo para la comunidad, espero les guste, usé el buscador y no encontré nada. En este tutorial les enseñaré a como colocar Webclip icons en tu blog de Wordpress, que realmente puede ser aplicado fácilmente a cualquier sitio web.
¿Qué son los Webclip icons?
Son iconos/imágenes que son utilizador por el navegador de los dispositivos Apple (iPhone, iPad, iPod touch e incluso las computadoras Mac) así como el sistema operativo para identificar un sitio web o WebApp, estos iconos ayudan al usuario a identificar fácilmente tu sitio web así como también le dan un aspecto más serio a tu sitio. Los Webclip Icons suelen aparecer por ejemplo en la sección de favoritos, air drop o cuando anclamos un sitio web a la pantalla principal de iOS. Podría decirse que son la variante de Apple de los ya conocidos Favicons. Sí un sitio web no cuenta con un Webclip icon disponible para ser mostrado el sistema genera uno tomando la primera letra del título del sitio y usando el color predominante del sitio para el fondo del sitio.
¿Cómo agregar un Webclip icon a mi blog de Wordpress o página web?
El proceso es bastante sencillo, aunque debemos de explicar cómo funciona un Webclip icon, como ya mencionamos un webclip icon es una imagen en formato .png que los dispositivos Apple usan para identificar un sitio web y facilitar la navegación del usuario. Es necesario colocar más de un solo Webclip icon, esto debido a que si bien son pocos los dispositivos iOS sí los comparamos con los dispositivos con Android, el tamaño de la pantalla (y hasta cierto punto la resolución de estos) afecta la facilidad con la que un usuario ve el contenido, por lo que será necesario crear un Webclip para por ejemplo un iPhone 4S y otro para un iPad pro, por fortuna Apple nos brinda una tabla con las resoluciones necesarias por modelo de dispositivo.
En caso de que no se encuentre un Webclip icon específico para cierto dispositivo iOS se utilizará el Webclip más pequeño de los más grandes disponibles y en caso de que no se encuentre uno que cumpla con esto se utilizará el Webclip más grande de forma escalada. Es por esto que es muy importante agregar la mayor cantidad de Webclip icons posible, aunque yo personalmente recomendaría agregar como mínimo 3 webclip icons uno para dispositivos de pantalla grande (iPad), uno para pantallas medianas (iPhone 6/6S plus) y uno para pantallas pequeña (iPhone 5, 4S, iTouch).
Podemos revisar la tabla con las especificaciones de cada resolución acorde al modelo para los Webclip Icons desde el siguiente enlace a la web de Apple:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2
Añadir un Webclip icon en wordpress basta con editar el archivo header.php y justo después de la etiqueta de apertura <head> basta con añadir la siguiente línea de código:
Donde la propiedad href debe ser la ubicación o url de donde se encuentra nuestro icono en formato .png. Para poder agregar un Webclip icon específico para una familia de modelos debemos de especificar la resolución de ese icono con el atributo sizes, por lo que sí queremos agregar otros 3 Webclip icons debemos agregar las siguientes líneas:
Guardamos los cambios y podremos ver el resultado ingresando a nuestra página web desde un dispositivo iOS y agregándolo a favoritos o a la pantalla de inicio.
Realmente creo que fue más teoría que practica, pero quería dejar en claro varias cosas que a mí me costó un poco entender cuando le agregué el Webclip icon a mi blog. Es necesario que los iconos tengan las resoluciones especificadas, ya que podrían verse muy deformados o incluso no llegar a mostrarse.
Pueden encontrar más información sobre los Apple webclip icons así como algunos otros trucos como ocultar los componentes de safari, cambiar el color de la status bar desde el siguiente enlace: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4
¿Qué son los Webclip icons?
Son iconos/imágenes que son utilizador por el navegador de los dispositivos Apple (iPhone, iPad, iPod touch e incluso las computadoras Mac) así como el sistema operativo para identificar un sitio web o WebApp, estos iconos ayudan al usuario a identificar fácilmente tu sitio web así como también le dan un aspecto más serio a tu sitio. Los Webclip Icons suelen aparecer por ejemplo en la sección de favoritos, air drop o cuando anclamos un sitio web a la pantalla principal de iOS. Podría decirse que son la variante de Apple de los ya conocidos Favicons. Sí un sitio web no cuenta con un Webclip icon disponible para ser mostrado el sistema genera uno tomando la primera letra del título del sitio y usando el color predominante del sitio para el fondo del sitio.
¿Cómo agregar un Webclip icon a mi blog de Wordpress o página web?
El proceso es bastante sencillo, aunque debemos de explicar cómo funciona un Webclip icon, como ya mencionamos un webclip icon es una imagen en formato .png que los dispositivos Apple usan para identificar un sitio web y facilitar la navegación del usuario. Es necesario colocar más de un solo Webclip icon, esto debido a que si bien son pocos los dispositivos iOS sí los comparamos con los dispositivos con Android, el tamaño de la pantalla (y hasta cierto punto la resolución de estos) afecta la facilidad con la que un usuario ve el contenido, por lo que será necesario crear un Webclip para por ejemplo un iPhone 4S y otro para un iPad pro, por fortuna Apple nos brinda una tabla con las resoluciones necesarias por modelo de dispositivo.
En caso de que no se encuentre un Webclip icon específico para cierto dispositivo iOS se utilizará el Webclip más pequeño de los más grandes disponibles y en caso de que no se encuentre uno que cumpla con esto se utilizará el Webclip más grande de forma escalada. Es por esto que es muy importante agregar la mayor cantidad de Webclip icons posible, aunque yo personalmente recomendaría agregar como mínimo 3 webclip icons uno para dispositivos de pantalla grande (iPad), uno para pantallas medianas (iPhone 6/6S plus) y uno para pantallas pequeña (iPhone 5, 4S, iTouch).
Podemos revisar la tabla con las especificaciones de cada resolución acorde al modelo para los Webclip Icons desde el siguiente enlace a la web de Apple:
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2
Añadir un Webclip icon en wordpress basta con editar el archivo header.php y justo después de la etiqueta de apertura <head> basta con añadir la siguiente línea de código:
Insertar CODE, HTML o PHP:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">Donde la propiedad href debe ser la ubicación o url de donde se encuentra nuestro icono en formato .png. Para poder agregar un Webclip icon específico para una familia de modelos debemos de especificar la resolución de ese icono con el atributo sizes, por lo que sí queremos agregar otros 3 Webclip icons debemos agregar las siguientes líneas:
Insertar CODE, HTML o PHP:
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">Guardamos los cambios y podremos ver el resultado ingresando a nuestra página web desde un dispositivo iOS y agregándolo a favoritos o a la pantalla de inicio.
Realmente creo que fue más teoría que practica, pero quería dejar en claro varias cosas que a mí me costó un poco entender cuando le agregué el Webclip icon a mi blog. Es necesario que los iconos tengan las resoluciones especificadas, ya que podrían verse muy deformados o incluso no llegar a mostrarse.
Pueden encontrar más información sobre los Apple webclip icons así como algunos otros trucos como ocultar los componentes de safari, cambiar el color de la status bar desde el siguiente enlace: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4
