NorfiPC
NorfiPC » Posicionamiento web » Vincular un sitio a Windows 8

Crear una aplicación para vincular un sitio web a Windows 8

Código y etiquetas para que los lectores puedan pinear o anclar con Internet Explorer un sitio a la pantalla de inicio de Windows 8. Como probarlo y saber si un sitio es compatible con este navegador y se muestra correctamente una PC, celular o tableta. Conocer los errores y como solucionarlos. Como crear el icono necesario y un favicon de alta resolución para cualquier navegador.
Vincular un sitio web a Windows 8 Internet Explorer en Windows 8 introduce nuevas funciones que son importantes y beneficiosas para los que poseemos un sitio web o un blog en internet.
Una de ellas es poder vincular un sitio web a Windows 8.
Esto hace posible que los lectores puedan pinear o anclar nuestro sitio en su pantalla de inicio.
El icono creado funciona como una aplicación, que facilita el acceso a nuestro sitio y podemos usarla para enviarles notificaciones.
Antes que todo tenemos que asegurarnos que todas las páginas de nuestro sitio se muestren correctamente en el navegador Internet Explorer, desde cualquier dispositivo que usen los lectores ya sea una PC, Laptop, un teléfono celular o una tableta.



¿Cómo saber si un sitio es compatible con Internet Explorer?


Manualmente se puede con Internet Explorer cargar un sitio web y comprobar si existen errores.
Esto les será imposible a los que no poseen Windows 8 o Windows 7 ya que no pueden instalar la última versión de este navegador.
La mejor solución es usar una herramienta online creada por Microsoft, que adicionalmente muestra los errores que puedan impedir que funcione correctamente el navegador.

Usar Modern IE Testing


Microsoft ofrece Modern IE Testing una herramienta online en la cual es posible comprobar la compatibilidad de una página web.
En el resultado del análisis se indican los problemas en caso de existir y se ofrecen sugerencias de cómo solucionarlos.
Las pruebas principales son: conflictos y modo de compatibilidad, librerías, DocType, diseño responsable, plug-ins, etc.
También se indican nuevas funciones que se pueden agregar a las páginas, como es el caso del icono personalizado para la pantalla de inicio de Windows 8 y la línea de código CSS para dar prioridad a las pantallas táctiles en caso de un dispositivo que lo permita.
También está disponible usar "Compat Inspector", para en caso que se necesite probar varias páginas o un sitio completo.
Por supuesto se recomienda hacer el test usando cualquier versión de IE.
Es posible descargar el resultado del test en un PDF o compartirlo en la red.
Prueba un sitio web usando el siguiente cuadro, inserta una dirección URL que el resultado se abrirá en una nueva ventana.
 





Nuevas funciones en Internet Explorer 10


Internet Explorer en la versión 10 incluye varias mejoras y se apega más a los estándares de la navegación web.
Por ejemplo ahora es posible abrir vínculos en una nueva pestaña, es posible ajustar el navegador a cualquier tamaño y es mucho más rápido.

Vincular un sitio web a Windows 8


Anclar un sitio web en la pantalla de inicio de Windows 8 Una de las nuevas funciones que incluye Internet Explorer es ventajosa para los que poseemos un sitio web.
Si vinculamos nuestro sitio a Windows 8, nuestros lectores podran pinear o anclar nuestro sitio a la pantalla de inicio de Windows 8 de su equipo.
Se creará un icono con el logotipo o imagen que hayamos escogido, que funcionará de forma similar a una aplicación.
Permitirá acceder a nuestro sitio web, mostrando el nombre, además notificaciones que podemos hacer llegar a nuestros lectores regularmente.
Para asociar nuestro sitio con Windows 8 solo necesitamos incluir unas etiquetas o metatags en el código HTML de nuestra página principal y subir un icono en nuestro servidor.



¿Cómo pinear un sitio web en Internet Explorer?


Se puede anclar un sitio web preferido en Internet Explorer de varias formas:

En Windows 8:
Si usas Internet Explorer desde la pantalla de inicio, da un clic derecho para mostrar la Barra de aplicaciones y da un clic en el icono de "Anclar sitio", en el cuadro que se abre escoge: "Anclar a inicio".
Como pinear o anclar un sitio web usando Internet Explorer
Anclar un sitio web a la pantalla de inicio de Windows 8 usando Internet Explorer
Se mostrará el icono en la pantalla de inicio a 144 pixeles.
Si usas Internet Explorer desde el modo Escritorio da un clic en el icono de herramientas o en el menú Paginas de la barra de comandos y escoge: "Agregar sitio a la pantalla inicio"
Se mostrará en este caso el icono en la pantalla de inicio a 24 pixeles.
Observa en la siguiente imagen la diferencia de los iconos creados:
Comparación de como se muestran los iconos en la pantalla de inicio de Windows 8.

En Windows 8 y 7:
Arrastrar el emoticono al Escritorio o a la barra de tareas. Se mostrará el icono a 24 pixeles.
Todo lo anterior es bastante fácil de implementar solo es necesario unas líneas de código en nuestra página principal y tener un icono y un favicon de alta resolución.



¿Cómo crear un favicon de alta resolución?


Un favicon o icono para un sitio web es un archivo contenedor (con la extensión de archivo .ICO) que puede contener en su interior varias imágenes de distintas resoluciones, que representan un sitio web.
Los favicones tradicionales contienen una imagen de 16 pixeles que los navegadores muestran a la izquierda de la barra de direcciones. También identifican un sitio en el Historial, en los favoritos, marcadores, etc.
Debido al incremento de las resoluciones en los monitores y en las pantallas de los dispositivos, ahora un favicon debe tener imágenes de 16 px, 32px, 64px hasta más aún.
En Internet Explorer es necesario tres medidas: 16, 24 y 32 pixeles.
Para que en la página de inicio de Windows 8 se muestre el icono o logo de nuestro sitio correctamente al ser pineado por cualquier usuario, el favicon debe tener una imagen de 32 pixeles.
Es posible crear el favicon necesario con un programa como Microangelo.
También podemos usar una herramienta online llamada X-Icon Editor que lo hace aún más fácil.



Crear un favicon con X-Icon Editor


Crear un favicon de esta forma es sencillo, solo es necesario tener preparada de antemano una imagen cuadrada que represente nuestro sitio.
• Accede a: X-Icon Editor
• Sube una imagen de tu equipo.
• Descarga el favicon creado.
• Súbelo a la raíz de tu sitio web.
Ahora incluye en todas las páginas o en la plantilla si tu sitio es en PHP la siguiente línea:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">



Crear un icono para pinear en la pantalla de inicio de Windows 8


Para crear una aplicación que vincule un sitio web a Windows 8, es necesario tener en la raíz de dicho sitio una imagen PNG de exactamente 144 por 144 pixeles.
Puede ser creada con un programa editor de imágenes como Gimp o hasta por Paint.
También puede ser creada con una herramienta online llamada Build My Pinned Site, en ese caso también se obtendrá el código necesario para vincular la imagen al sitio.

Crear un icono y obtener el código para Build My Pinned Site


Build My Pinned Site es una herramienta online que facilita tres tareas:
✓ Permite crear un icono a la medida exacta y con el tipo de imagen necesaria, para poder usarla para pinear un sitio web.
✓ De forma adiciona muestra el código necesario para pegar en el código HTML de nuestra página.
✓ Permite comprobar el funcionamiento y resultado final

¿Cómo usar Build My Pinned Site?
• Accede a: Build My Pinned Site
• Introduce la dirección URL de un sitio web.
• Sube la imagen a utilizar.
• Se mostrará una previa de como lucirá el icono en la pantalla de inicio de Windows 8.
• Descarga la imagen creada y copia el código de las etiquetas.
• Sube el archivo HTML modificado y la imagen al servidor.
Después podemos volver a cargar dicho sitio y comprobar el resultado final.

Etiquetas para mostrar el logotipo de un sitio en la pantalla de inicio en Windows 8


Las etiquetas son las siguientes, deben insertarse en la página index o página principal de tu sitio en el área del HEAD.
<meta name="application-name" content="NorfiPC">
<meta name="msapplication-TileColor" content="#65b2ff">
<meta name="msapplication-TileImage" content="logo.png">
La primera etiqueta contiene el nombre del sitio que se mostrará en el logotipo, en este ejemplo es NorfiPC.
La segunda línea es opcional su uso, indica el color de fondo con que se rellena el icono, el color se expresa con un valor hexadecimal.
La tercera línea indica el nombre del icono que se mostrará en la pantalla de inicio.
Tiene que ser como se explicó una imagen PNG con un tamaño de 144 x 144 pixeles.

¿Cómo enviar notificaciones a los usuarios que tienen un sitio pineado?


Para hacer posible las notificaciones se requiera agregar otra etiqueta en el área del HEAD de la página principal del sitio:
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://norfipc.com/ polling.xml">
La etiqueta contiene el valor frequency (es opcional) que expresa el intervalo de tiempo en minutos en que se debe buscar nuevas notificaciones (en este ejemplo 30) y la dirección URL donde está el archivo XML que contiene la notificación.
Los valores admitidos en frequency son 30, 60, 360 (6 horas), 720 (12 horas) y 1440 (1 día). Si no se especifica ningún valor, se usa el valor predeterminado de 1440 horas.
Una notificación puede actualizar un icono con un número del 1 al 99 o uno de 10 de glifos estándar.
El archivo XML al que refiere la etiqueta anterior puede contener un código similar a los siguientes:
<badge value="44">
<badge value="newMessage">
Conoce en la siguiente página de Microsoft los glifos o caracteres especiales que se representan y su significado: The badge image catalog

Páginas relacionadas


Como hacer un sitio web compatible con teléfonos celulares
Como agregar una página o blog al índice de Google
Como demostrar ante Google ser el autor de lo que publicamos
Cómo y por qué usar HTML5 en las páginas web
Servicios CDN gratis en internet para acelerar un blog o sitio web