Depura páginas en diferentes dispositivos con Adobe Edge Inspect

Siguiendo la presentación de las novedades mostradas por Adobe en el Tour "Create the Web" tenemos Adobe Edge Inspect, una aplicación que nos permite controlar y testear de forma remota nuestras páginas optimizadas para dispositivos móviles (iPhone, iPad, Kindle, o cualquier smartphone/tablet con Android).

El sistema utiliza una sincronización entre el ordenador y el dispositivo móvil que hace que cualquier modificación de código HTML o CSS que realicemos en el documento desde nuestro ordenador se visualice automáticamente en el dispositivo, sin necesidad de actualizar el fichero en el servidor y tener que refrescar el navegador.

La aplicación permite sincronizar varios dispositivos a la vez (aunque la versión gratuita sólo permite uno), lo que nos permite realizar cambios en el documento y visualizarlos automáticamente en todos ellos. Esto agiliza de manera muy considerable el desarrollo de sitios adaptados a diferentes resoluciones de pantalla.

Para poder trabajar con Edge Inspect, aparte de tener instalada la aplicación (que podemos descargar de forma gratuita desde Adobe Creative Clound) necesitamos tener instalada una extensión para Chrome. También necesitaremos tener instalada una aplicación nativa en nuestro dispositivo.

En los siguientes enlaces podemos descargar estos requisitos:

• http://www.adobe.com/go/edgeinspect_chrome
  
• http://www.adobe.com/go/edgeinspect_ios
  
• http://www.adobe.com/go/edgeinspect_android
  

Para mostrar el funcionamiento ejecutaremos la aplicación Adobe Edge Inspect y abriremos cualquier página en el navegador. Por ejemplo la página de la guía de instalación de Adobe Edge. Teniendo la extensión instalada veremos el icono de Adobe Inspect en la barra de extensiones de Chrome.



El siguiente paso será ejecutar también la aplicación de Adobe Edge Inspect en nuestro dispositivo. En este caso yo voy a utilizar mi iPhone.

Al tener las dos aplicaciones abiertas veremos que Inspect crea el vínculo entre ambas. Hay que tener en cuenta que para que se genere el vínculo, todas las conexiones se han de realizar desde la misma red.



Desde Chrome también puedo ver que estoy conectado a mi iPhone.



Ahora, para ver Inspect en acción, pulsaremos en el icono de código "<>" situado a la derecha del nombre de la conexión, lo que nos abrirá una ventana de Debug que nos mostrará todas las páginas web que tenemos abiertas en el navegador.



Pulsando en el enlace iniciaremos la sincronización de la página en todos los dispositivos conectados.



Podremos comprobar que en este caso, visualizo la misma página dentro del iPhone.



Si cambiando a la pestaña "Elements" veremos el código HTML y CSS de la página web.



Esta visualización nos permite navegar a través del código fuente de la página seleccionando tags y propiedades. Por ejemplo seleccionaré la división que contiene el bloque de texto del documento.



Esta selección queda reflejada automáticamente en el iPhone mostrándonos las dimensiones de la división y los márgenes o paddings.



También nos permite modificar parámetros dentro de los estilos del documento CSS. Por ejemplo modificaré el ancho del margen izquierdo.



Esta modificación se refleja automáticamente en el iPhone.



De la misma manera podemos modificar el código HTML, por ejemplo las dimensiones de la imagen.



Y todos los cambios se irán visualizando sin necesidad de actualizar el fichero o refrescar ninguna ventana de navegador en ninguno de nuestros dispositivos.



Esta es sin duda una herramienta que será imprescindible cuando queramos crear sitios con un diseño adaptable (responsive design).

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.