Cómo debugar una web app en Chrome

Cuando hacemos una web app, ya sea con jQuery Mobile, con Ionic, con Sencha Touch, etc., una de las cosas que más quisiéramos tener es poder actuar con la web app con F12 y ver y depurar todos los procesos. Es cierto que podemos abrir la app con el navegador, pero no es lo mismo, ya que muchas llamadas u otros procesos se pierden.

Pues bien, entre otros métodos que analizaremos en futuros artículos, hoy queremos comentar la herramienta que nos ofrece Google Chrome. Así es, debugar una aplicación web con Google Chrome es posible a partir de Android 4.0!

Tenéis toda la documentació en la página de desarrollo de Chrome, pero vamos a ver los pasos principales.

Paso 1: Requisitos

Como desarrolladores de web apps, ya tendréis habilitada la conexión USB developer entre el teléfono y el ordenador (en caso de que no fuera así, el tutorial de Chrome incluye también instrucciones, o podéis también consultar aquí: http://www.fandroides.com/que-es-y-como-habilitar-la-depuracion-usb-en-android/; recordad también de instalar los controladores usb de vuestro dispositivos, que normalmente se encuentran en la web del fabricante o incluido en los paquetes de instalación (como el KIES en el caso de Samsung). Para la conexión es lo único que necesitamos.

Paso 2: Google Chrome

En Chrome nos vamos a:

Menú -> Más Herramientas ->Inspeccionar dispositivos

Se abrirá la pestaña de DevTools y el apartado devices.

Menú > Más Herramientas > Inspeccionar Dispositivos

Menú > Más Herramientas > Inspeccionar Dispositivos

Paso 3: Debugar

Nos aseguramos de que “Discover USB devices” está marcado, y nos aseguramos de que nuestro dispositivo ha sido encontrado.

Si tenemos alguna web view activa (nuestra app u otra), ésta se mostrará; si no en cuanto la abramos se mostrará.

Una vez se muestre la app, podemos hacer click en “inspect”, y se mostrará nuestro conocido F12 (en caso de que no sea conocido, podéis echarle un vistazo a este tutorial: https://developer.chrome.com/devtools )

Chrome DevTools - Inspect Devices

Chrome DevTools – Inspect Devices

Como hemos dicho, hay otras herramientas, pero esta es una rápida y magnífica manera de conseguir debigar de verdad una web app!

 

Cambiar el look del scroll: cómo configurar NiceScroll

Una de las mejoras de diseño que tarde o temprano queremos aplicar es un cambio de look al scroll. Para hacerlo bien no hay más, de momento, que aplicar javascript, y el mejor plugin que hay, o uno de los mejores, es el plugin de jQuery NiceScroll.

Para quien está habituado a trabajar con jQuery este pliugin es muy fácil, pero para los diseñadores que no necesariamente conocen jQuery o han trabajado nunca con él, puede resultar confuso. Estos puntos tratan de aclarar esa confusión, sin entrar en teoría:

1) Id a la página de descarga del plugin de NiceScroll.

2) Buscad la última versión

Imagen de la última versión funcional de la página de descarga de NiceScroll

Última versión funcional

Aseguraos de que no os bajáis la versión beta (en el momento del tutorial la útlima versión funcional es la 3.4 y la beta es la 3.5).

3) En el fichero hay muchos archivos, archivos de ejemplo, etc. A nosotros sólo nos interesa: jquery.nicescroll.js.

4) Una vez hemos bajado el plugin, tenemos que incluirlo en la página junto con el jQuery. Para ello en <head> ponemos primero el link al jQuery y después el link a nuestro archivo jquery.nicescroll.js:

<head>
    ...
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
    <script src="jquery.nicescroll.js"></script>
</head>

Es importante poner primero el link a jQuery, sino no funcionaría el plugin.

5) En la página de NiceScroll, abajo, tenéis los ejemplos para empezar. Nos fijamos en el primero, que sirve para cambiar el scroll de toda la página, que es lo que en principio buscamos. Para ello, copiamos este código y lo ponemos al final, justo antes de cerrar el </body>:

<script type="text/javascript">
   $(document).ready(
      function() { 
         $("html").niceScroll();
      }
   );
</script>

Este código aplica nuestro plugin al html, es decir, a todo el contenedor de nuestro html.

6) Recordad que para probarlo tenéis que tener suficiente contenido como para que se muestre el scroll, de manera que no va mal un poco de Lorem ipsum.

!Y ya está! Os dejo el código completo y funcional (recordad poner el archivo jquery.nicescroll.js en el mismo directorio que el .html del ejemplo para que éste funcione):

 

 

Crear juegos para móvil con HTML5: Construct 2

Hoy en día decir ‘móvil’ en el mundo de las nuevas tecnologías es decir ‘negocio’ y ‘oportunidades’. Una de las maneras más interesante de empezar es con el estándar HTML5.

En este tutorial os presentamos Construct 2, una herramienta para construir muy fácilmente juegos sobre el canvas de HTML5 (en w3schools tenéis una muy buena introducción al Canvas). Si bien no es la única opción, en nuestra opinión es una de las mejores para iniciarse en el mundo del diseño de juegos.

Este tutorial se basa en nuestra experiencia personal. Hemos trabajado bastante con este programa y, si bien tiene algunas limitaciones, es muy recomendable y nos ha dado bastante ventajas con una curva de aprendizaje muy corta.

 

Construct 2

Construct 2

 

Cuánto cuesta

Hay una versión gratuita con algunas limitaciones (pero suficiente para hacer juegos relativamente complejos) y una de pago con todas las funcionalidades, ideal para juegos de gran complejidad. Nosotros finalmente tuvimos que ir a la de pago, pero pudimos hacer bastante con la gratuita.

Cómo empezar

En la página de tutoriales de Construct 2 encontraréis varios tutoriales de iniciación que os permitirán, en muy poco tiempo, crear un juego clásico de disparos y uno de plataforma.

Tutorial de iniciación

Tutorial de iniciación

 

Cómo funciona

Construct 2 genera un Canvas muy complejo, pero su uso es sencillo: se trata de escoger objetos, arrastrarlos al área de juego, y otorgarles, en el área de comandos, comportamientos, variables, tiempo, física, efectos, comportamientos, interacción con mouse, tacto o teclado, y un largo, largo etc.

Área de gráficos

Área de gráficos

El área de comandos es también muy sencilla de usar, dado que todas las opciones están convenientemente explicadas y listadas. Simplemente hay que saber qué queremos hacer y buscar la opción correspondiente.

Área de comandos

Área de comandos

Qué hago con mi juego

Constuct 2 os da la posibilidad de publicar vuestro canvas en varias plataformas, entre ellas iOS, Android o Facebook, ya sea mediante una siomple exportación o mediante precisas instrucciones.

Plataformas

Plataformas

 

Problemas

Como decíamos en la introducción, este programa no está exento de errores o problemas. El principal es que no siempre respeta una lógica aplastante. Al generar javascript, algunas veces puede traerproblemas con la asincronía, de manera que hay que hacer diversas comprobaciones antes de estar seguro que se respetará el orden de los eventos que hemos marcado. Si bien esto se ha solventado en parte en una actualización reciente mediante el uso de funciones, siguen habiendo problemas. Otro porblema es la incapacidad casi total de interactuar con el códigogenerado, dada su complejdiad. En definitiva, es un programa que a los programadores con experiencia puede llegar a irritar bastante.

Actualizaciones y comunidad

Dos puntos a favor: las actualizaciones son muy diversas y se generan a menudo, con incidencia casi nula en los proyectos en marcha. Por otra parte, la comunidad que crea con este programa es muy activa en la creación de plugins y en la participación en foros y creación de tutoriales.