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

Cloud9 IDE para desarrollo colaborativo

cloud-9-ide

Que es?

Cloud 9  o c9 es un Integrated Development Environment (IDE) para desarrollo que tiene como plataforma la nube.

En el link https://c9.io/ podrán registrase y comenzar a realizar pruebas.

Para que puedan apreciar de forma gráfica el IDE, les recomendamos el video oficial.

Que beneficios obtengo?

code-smarter-image

  • Trabajar colaborativamente.
  • Eliminar versiones de código.
  • Acceso a cuentas GitHub y BitBucket
  • Edición de código HTML, CSS, PHP, Java, Ruby y 23 lenguajes mas.
  • Centralización de Código y manejo de versiones (en caso de trabajar con manejador de versiones como git).
  • Control de los cambios realizados.
  • Mantener tu código en la nube (Internet), esto te permite acceder desde cualquier computador con acceso a Internet.

Cómo comienzo?

Lo primero que necesitas es crear una cuenta en https://c9.io/ a continuación se desplegará un panel de administración donde puedes ver tus proyectos. seleccionando un proyecto puedes comenzar a trabajar en el codigo puedes compartir el proyecto con otra persona mediante mail simplemente compartiendo el link de tu proyecto.

Si relacionas c9 con tu cuenta de github lo que tienes que hacer es crear una llave SSH desde github y habilitarlo en c9, de esta forma podrás rescatar cualquier proyecto que tengas en github o podrás crear nuevos repositorios a tu cuenta.

Puedes adicionar un atajo a Chrome con el siguiente enlace

Capturas

Panel de Control

Dashboard - Cloud9

Un proyecto

Dashboard - Cloud9_1

Espacio de Trabajo

prueba - Cloud9_1

Alternativas

C9 tiene un beta para trabajo offline.

Por ultimo no dejes tu cuenta abierta recuerda que puedes comprometer tu código.

Escrito por: Gaston Nina