Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

Cuando se diseñan y crean sitios Webs Responsive y llega el momento de probarlos, lo que generalmente se hace es probarlos reduciendo el tamaño (arbitrariamente) del browser, o en el mejor de los casos hacer uso plugins como “Web Developer”, ya sea para Firefox o para Chrome.

Pero, la realidad nos demuestra que no existe ningún sustituto, lo mejor siempre será probar directamente el sitio Web en un dispositivo móvil real. Los browsers en dispositivos móviles tienen algunas características peculiares y diferentes que las versiones de escritorio, por lo que hace mas fácil encontrar los posibles errores e investigar problemas técnicos que pueden ocurrir.

En este articulo, se pretende mostrar como realizar las pruebas, directamente en un dispositivo móvil, utilizando una herramienta de Adobe Adobe Edge Inspect.

edge-inspect-cover

Adobe Edge Inspect

En primer lugar es necesario instalar la aplicación Adobe Edge Inspeccionar, que se puede descargar desde Adobe Creative Cloud con una cuenta.

edge-inspect-isntall

edge-inspect-isntall1

Después de instalar la aplicación, se abrirá una venta para introducir los datos de usuario (cuenta Adobe Creative Cloud). A continuación, lo que queda es instalar la extensión para Google Chrome de Adobe Edge Inspeccione , y posteriormente la aplicación para dispositivos móviles, tanto para dispositivo iOS y Android  (en el momento de escribir estas líneas).

Instalando la extensión para Google Chrome

Google Chrome es impresindible para la interacciones y control con los dispositivos utilizando Adobe Edge Inspect.

Para ello necesitamos podemos instalar la extencion desde la Chrome Web Store.

edge-inspect-chrome-ex

Conexión A Dispositivos Móviles

Una vez que se termino de instalar, tanto la extención de Chrome como la aplicación en los dispositivos móviles, ahora se puede conectar de su computadora a su dispositivo móvil, en este caso (par mi) un dispositivo Android.

Hay que asegurarse de que los dos dispositivos están en la misma conexión inalámbrica – WIFI, y tambien que la extensión de Chrome está en la posición ON. A continuación, detectar su equipo y le dará una contraseña de 6 dígitos para conectarse.

edge-inspect-phone

Ahora solo queda introducir el código de acceso dentro de la extensión de Chrome.

edge-inspect-chrome

Prueba Web

Una vez que el código de verificación ha sido aceptado y los dos dispositivos están conectados, cada vez que abre una página web en Google Chrome (cuando Adobe Edge Inspect se está ejecutando), entonces al instante se mostrará en el dispositivo móvil conectado.

edge-inspect-prueba

Conclusión

Esta es la manera más recomendada de realizar pruebas de diseños Responsive Design. Como comentario adicional, decir que la versión Pro de Adobe Edge Inspect, permite conectar más de un dispositivo móvil al mismo tiempo.

Anuncios

Un pensamiento en “Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect

  1. Pingback: Prueba de RWD en dispositivos Móviles con Adobe Edge Inspect | nTICs & Web

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s