Krypton Solid

Prueba para y con Windows Phone

Prueba para y con Windows Phone

Aunque el uso de Windows Phone sigue siendo bajo en comparación con otros navegadores a veces es necesario probar su trabajo web para Internet Explorer Mobile. Para los desarrolladores web, esto podría ser una complicación. Probando el Entorno de Windows Phone no siempre es opcional, pero puede ser una tarea ardua, especialmente porque la versión de Internet Explorer que viene con Windows Phone puede ser, en el mejor de los casos, peculiar. Si es un desarrollador sin un dispositivo Windows Phone, es posible que deba ser un poco creativo para asegurarse de que sus sitios web se representen correctamente.

El Nokia Lumia 920. (Crédito de la imagen: Microsoft)

En este artículo, quiero señalar algunas herramientas y técnicas diferentes que pueden ayudar a probar sitios web para Windows Phone, incluso si no tiene el dispositivo real a mano o si no está desarrollando en Windows. Pero primero analicemos rápidamente las diferencias entre Internet Explorer móvil y de escritorio.

Otras lecturas en SmashingMag:

IE Mobile explicado

Como Microsoft reconoció en el pasado, la versión de Internet Explorer que se encuentra en los dispositivos móviles es similar pero no idéntico a la versión del navegador de escritorio. Hay algunas funciones clave que no están disponibles en Windows Phone:

Todas estas son características bastante menores, pero aún debe conocer las diferencias de representación y tenerlas en cuenta.

Herramientas de prueba

La precisión no siempre es lo más importante en este tipo de pruebas. Durante el desarrollo, es más importante probar e iterar rápidamente que obtener una implementación perfecta en píxeles en el primer intento. Pero sí necesita saber qué tan preciso es su método de prueba para poder planificar la prueba final en consecuencia.

Para ayudarlo a tener una idea de la precisión de cada método de prueba, compararemos cada herramienta de prueba con la representación de dos sitios web en un dispositivo real (Nokia Lumia 920). Como referencia, veamos cómo SmashingMag (receptivo) y En modo capricho (no responde) render en un dispositivo Windows Phone real:

Representación en el Nokia Lumia 920
Representación en el Nokia Lumia 920. (Ver versión grande)

Más adelante en el artículo compararemos el renderizado original con el renderizado en la herramienta de prueba para ver qué tan precisa es la herramienta. En el mejor de los casos, una herramienta de prueba producirá exactamente el mismo renderizado que el dispositivo real, con una precisión del 100%. Vamos a sumergirnos, ¿de acuerdo?

Emulación de Internet Explorer

La forma más rápida y sencilla de probar un sitio para el entorno de Windows Phone es utilizar Internet Explorer y su servicio de emulador integrado. A través de las herramientas de desarrollo proporcionadas en el propio navegador, podrá ejecutar una emulación de teléfono. Esto incluye opciones como el perfil del navegador, la orientación y la resolución de pantalla. Usted puede hojear configuraciones en tiempo real para ver diferentes dispositivos y resoluciones, y puede completar las pruebas localmente en su computadora antes de que el sitio se active. Además, puede cambiar entre las versiones móviles del sitio web y la versión de escritorio para asegurarse de que ninguno de sus cambios haya afectado el aspecto del sitio en la versión de escritorio de Internet Explorer.

Al igual que la simulación de dispositivos en Chrome, esto parece una gran idea y una solución fácil para realizar pruebas rápidas. Lo más probable es que necesite probar Internet Explorer en algún momento, así que ¿por qué no integrar Windows Phone en este paso de prueba?

Nokia Lumia (izquierda), emulación IE (derecha)
Nokia Lumia (izquierda), emulación IE (derecha). (Ver versión grande)

Desafortunadamente, los resultados de la representación nos muestran que la emulación dentro de Internet Explorer es aún no es confiable para probar sitios web receptivos.

Nokia Lumia (izquierda), emulación IE (derecha)
Nokia Lumia (izquierda), emulación IE (derecha). (Ver versión grande)

Parece que la emulación ignora la configuración de la ventana gráfica y simplemente cambia el tamaño de la página para que se ajuste a la pantalla. Si bien este es uno de los métodos más rápidos para ver un sitio web en un entorno de Windows Phone, es más útil para verificaciones rápidas de sitios web que no responden en lugar de pruebas más completas.

Emulador de Windows Phone

Para los diseñadores que valoran la precisión más que una opción de prueba ligera, existe una Emulador de Windows Phone disponible para Windows Phone 7 y Windows Phone 8. Si no está en Windows, los emuladores también se pueden utilizar a través de un servicio como BrowserStack.

El emulador independiente de Windows Phone es mucho mejor que la emulación incorporada en Internet Explorer. El emulador ejecuta una copia de todo el sistema operativo Windows Phone, por lo que puede probar aplicaciones nativas junto con su proyecto web. Es la solución ideal para aquellos que simplemente necesitan probar en esa plataforma; El uso del emulador en línea puede ser una opción más completa para aquellos que necesitan realizar muchas pruebas multiplataforma.

Nokia Lumia (izquierda), emulador de Windows Phone (derecha)
Nokia Lumia (izquierda), emulador de Windows Phone (derecha). (Ver versión grande)

Como muestran los resultados, el emulador de Windows Phone no es tan preciso en la representación como cabría esperar. En particular, los íconos SVG de SmashingMagazine en la parte superior derecha no funcionan en el emulador, pero se muestran como se pretende en el dispositivo real.

Nokia Lumia (izquierda), emulador de Windows Phone
Nokia Lumia (izquierda), emulador de Windows Phone. (derecho) (Ver versión grande)

El emulador tiene algunas limitaciones del sistema. Por ejemplo, el emulador de Windows Phone 8 solo se ejecuta en Windows 8 y versiones posteriores. Para aquellos que tienen Mac OS X u otros sistemas operativos, es imposible instalar y usar el emulador directamente sin usar una máquina virtual. El uso de una solución basada en web suele ser la mejor opción.

Al igual que con todos los emuladores, aunque el emulador proporcionado por Microsoft es probablemente el más preciso disponible, aún no podrá mostrar el sitio con total precisión para cada dispositivo. Sigue habiendo algunos problemas de hardware que no pueden ser compensados ​​por un emulador. Aún así, el emulador de Windows es probablemente el mejor emulador que puede encontrar si desea utilizar un emulador de software.

Dispositivo real

El mejor método de prueba para Windows Phone es, sin duda, probar con un dispositivo real. Como hemos visto, el emulador se acerca, pero no es tan preciso como nos gustaría. Y, por supuesto, hay ciertas cosas que simplemente no se pueden simular o emular. Por ejemplo, la experiencia del usuario puede verse alterada por la forma en que el usuario necesita manipular su pantalla táctil. Al utilizar un dispositivo real, la mayoría de los desarrolladores se centrarán en Windows Phone 8 como Windows Phone 7 ya está en declive. La representación del navegador también puede variar según el dispositivo, ya que la resolución del dispositivo diferirá de un dispositivo móvil a otro.

Si no desea comprar un dispositivo de prueba dedicado, le recomiendo que eche un vistazo a los servicios ofrecidos por Perfecto móvil, CrossBrowserTesting.com o DeviceAnywhere, que le brindan acceso en línea a dispositivos Windows Phone, entre muchos más. Estos dispositivos reales se procesan como mi dispositivo de prueba, por lo que estará seguro aquí.

Si desea comprar un dispositivo de prueba, puede optar por la solución de gama alta y comprar el más potente Lumia 1520; elige algo en el medio como el Lumia 920; o quédate en el extremo bajo con un Lumia 430, el Windows Phone más barato.

Depuración remota

Ahora que puede encontrar todos los errores de diseño, ¿cómo puede solucionarlos? No encuentro nada más frustrante que confiando en conjeturas al azar para arreglar un error. Afortunadamente, puede usar weinre (WEb INspector REmote) para obtener un depurador remoto decente para Windows Phone. Es similar a depuración remota en Android en Chrome pero con menos funciones.

Weinre

Weinre es una herramienta de depuración remota de código abierto para depurar sitios web en un Windows Phone (y cualquier otro dispositivo móvil, por supuesto). Como herramienta de código abierto, es completamente gratuita y los desarrolladores más avanzados pueden incluso modificar su código. Microsoft incluso aconseja a los desarrolladores que utilicen weinre para depurar en Windows Phone.

Con weinre, puede inspeccionar el DOM y cambiarlo sobre la marcha, lo que permite cambios en tiempo real. Aunque la herramienta no permite funciones avanzadas como la depuración de JavaScript, todo se ejecuta en JavaScript, lo que lo limita un poco, sigue siendo una excelente solución para pruebas y depuración remotas.

Usar weinre es realmente fácil. Corre en Node.js. Con dos comandos simples puede instalar e iniciar el servidor weinre. En Windows:

npm -g install weinre
weinre --httpPort 8080 --boundHost -all-

Y en Mac OS X y Linux:

sudo npm -g install weinre
weinre --httpPort 8080 --boundHost -all-

Weinre ahora se ejecutará en su host local: 8080. Para depurar su dispositivo Windows Phone, debe seguir los pasos a continuación:

  • Abra localhost: 8080 en su máquina de desarrollo.
  • En la sección Target Script del sitio web que se abre, encontrará el <script> elemento que necesita agregar al sitio web que desea probar.
  • Ahora abra la página en su Windows Phone como de costumbre.
  • En su máquina de desarrollo, las herramientas de desarrollo ahora están disponibles aquí: localhost: 8080 / client / # anonymous.

Tenga en cuenta que weinre es una herramienta de depuración que nunca debe ejecutarse en producción, ya que esto podría suponer un riesgo de seguridad.

Control remoto del inspector web
Control remoto del inspector web. (Ver versión grande)

Si desea utilizar weinre como herramienta de desarrollo, deberá tener los dispositivos que desea probar, ya sea físicamente, en la nube o emulados. Aún así, es un excelente método de prueba en tiempo real y debe incluirse en el arsenal de cualquier desarrollador web. El entorno de depuración weinre se puede abrir en cualquier navegador principal.

¿Qué pasa con Windows Phone 10?

En el momento de redactar este informe, ningún servicio web ofrecía pruebas en la versión beta de Windows Phone 10, y actualmente no hay ningún dispositivo disponible que lo tenga preinstalado. Pero si desea probar el próximo nuevo sistema operativo, puede actualiza tu dispositivo a Windows 10 o ejecutar el emulador dentro de una instalación de Windows 10 en su máquina de escritorio con el último SDK de Windows Phone y Visual Studio 2013.

Resumen

¿Cómo se ve su sitio web en la plataforma Windows Phone? Aproximadamente el 3% de los usuarios de dispositivos móviles utilizarán Windows Phone, por lo que es posible que deba asegurarse de que su sitio se muestre correctamente. Como hemos visto, no es tan fácil probar para Windows Phone ya que todas las herramientas de prueba (incluso el emulador de Microsoft) no se procesan de manera confiable. Sugiero ir con uno de los servicios en línea para acceder al dispositivo real, ya que funciona bastante bien. El único inconveniente es que weinre no funcionará si no hace que su máquina de desarrollo sea accesible externamente.

Recursos

Deja un comentario