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

“Adobe EdgeTools & Services” Primeras impresiones

Adobe Edge Tools

El pasado 24 de Septiembre Adobe lanzó “Adobe Edge Tools & Services” una suite orientada al desarrollo Web, la cual está disponible en html.adobe.com en esta Url también encontrarán las presentaciones en video que se realizaron en distintas ciudades, con solo ver el video imagino que al igual que yo, quedarán sorprendidos con las capacidades de estas herramientas, las facilidades que ofrece esta suite viene a satisfacer las necesidades de los desarrolladores tanto diseñadores como programadores, a continuación una breve descripción de las herramientas presentadas.
1. Adobe Edge Animate.- Esta herramienta permite crear animaciones al estilo de Adobe Flash incluyendo línea de tiempo y efectos sobre objetos, la principal diferencia es que genera todas las interacciones en código CSS y Javascript los cuales pueden ser utilizados en un navegador Web.

2. Adobe Edge Reflow.- Lo que muchos diseñadores esperaban llego con esta herramienta, Edge Reflow cuenta con la capacidad de realizar responsive design de manera visual, cómoda, flexible y sin preocuparse del código CSS o Javascript, Edge Reflow se encarga de generarlo todo, la creatividad va por cuenta del diseñador.

3. Adobe Edge Code.- Editor de código bastante ligero con opciones muy interesantes entre las cuales están, la edición de funciones Javascript embebidas en el código HTML sin acceder al archivo original JS, de la misma forma también permite la edición de estilos CSS.

4. Adobe Edge Inspect.- Herramienta que va de la mano con Adobe Edge Reflow, con esta herramienta podemos probar nuestros sitios Web con responsive design en varios dispositivos al mismo tiempo, después de realizar un cambio en nuestro código o diseño el cambio se ve instantáneamente en todos los dispositivos sincronizados

5. Adobe Edge Web Fonts & Typekit.- Ambas herramientas nos permiten utilizar una gran cantidad de fuentes aproximadamente 500 de manera gratuita además de las ya disponibles desde Google fonts, Adobe también pone disponible las fuentes Source Sans Pro y Source Code Pro, ambas creadas por Adobe, cabe destacar que se puede implementar estas fuentes desde la mayoría de las herramientas de esta suite.

6. Adobe Phonegap Build.- Esta herramienta que recién salió de la etapa Beta es parte fundamental del desarrollo Móvil y Web, nos permite crear aplicaciones nativas a partir de  código HTML, CSS y Javascript, las plataformas a las que podemos exportar son: Android, iOS, Symbian, BlackBerry y Windows Phone.

Algunas de las herramientas de esta suite están disponibles para la descarga y prueba otras estarán disponibles muy pronto.