Saltar al contenido

Etiqueta: development

Breve análisis de AppInventor

El viernes pasado recibi mi invitación para participar en la beta de AppInventor, un programa para crear aplicaciones para Android sin necesidad de escribir código, si nunca lo han escuchado o desean ver una introducción, pueden chequear el siguiente vídeo:

https://www.youtube.com/watch?v=8ADwPLSFeY8]

Para comenzar a usarlo, se debe iniciar sesión con la cuenta de google y descargar un instalador, revisándolo por encima, trae un emulador de un móvil con Android, un depurador de código y parte del SDK de Android. El instalador pesa casi 60MB y está disponible para Windows, GNU/Linux y MacOS.

Pantalla principal de AppInventor
Pantalla principal de AppInventor

Una vez instalado no pude encontrar el ejecutable para iniciar la aplicación, pero al buscar información en la página, me di cuenta que es una aplicación web hecha en HTML5/Javascript (estos de Google se estan tomando en serio la computación en la nube), la misma, contiene a la izquierda un menu con una serie de componentes para usar en la interfaz de la aplicación, en el medio la ventana de la pantalla telefóno y a la derecha las propiedades del componente y un navegador de componentes usados. Esta interfaz es sencilla, igual a los IDEs existentes por lo que para los desarrolladores no será problema el uso de AppInventor, los componentes simplemente se arrastran a la pantalla del teléfono y con doble click vamos editando las propiedades.

Esta parte es sólo la vista de la aplicación (como el modelo MVC) por lo que para agregar eventos y definir las acciones a ejecutar cuando el usuario interactúa con estos componentes, utilizamos la vista de bloques, accesible por un botón en la parte superior derecha. Al hacer click allí, se abre una aplicación Java Web Start (se vé el gran uso de Java en Android por parte de Google) donde pasarmos a la vista de asignación de eventos y acciones (como el controlador segun MVC), lo interesante, es que podemos asignar eventos y acciones a través de bloques parecidos a las piezas de un rompecabeza, uniendo los bloques podremos realizar el programa deseado sin escribir una línea de código. El famoso Hola Mundo, lo hice en menos de 5 minutos sin leer manuales, usando 3 bloques como se ve en la siguiente imagen:

Bloques de acciones en AppInventor
Bloques de acciones en AppInventor

Luego podemos ver los resultados en nuestro teléfono Android o usando el emulador, generar el paquete y distribuirlo. No he leído, pero creo que por ahora no hay mucha interacción con el Market y no se como es la licencia para el uso de esta aplicación.

Me gustó como se trabaja con esta herramienta y permite desarrollar cosas sencillas en pocos pasos (obviamente cosas complejas requiere escribir código), además permite a personas ajenas a la programación, realizar aplicaciones sencillas para si mismas. Google está haciendo un buen trabajo con esto y me llamó la atención que todo fuese bajo web, muchos no nos imaginaríamos hace unos años la posibilidad de crear aplicaciones desde el navegador.

1 comentario

Extensiones de Firefox recomendadas para el desarrollo web

Soy usuario de Firefox desde sus inicios y cuando empecé a trabajar como desarrollador web en Caniatech, descubrí una gran cantidad de extensiones (la mayoría gracias a su lista de complementos favoritos) que permiten transformar este navegador en una maravillosa herramienta indispensable para cuando se está creando páginas/sistemas web (si fanáticos de Chrome, se que se puede hacer lo mismo con ese navegador). Así que aquí les dejo una lista de las extensiones que recomiendo instalar si trabajan en el desarrollo  (y tal vez un poco de diseño) web.

  • Firebug: para mi es el complemento mas importante e indispensable de esta lista. Esta herramienta permite: excelente análisis y modificación en tiempo real del: código HTML, clases de estilos, permite ver y correr paso a paso (debug) del código Javascript, mostrar la cantidad de errores JS, entre otros.
  • FireQuery: agrega compatibilidad entre jQuery y Firebug, se pueden observar funciones asignadas a ciertos elementos del markup, entre otros.
  • FirePHP: agrega compatibilidad con php  y permite a los desarrolladores imprimir datos en la consola de Firebug, muy útil cuando se esta creando aplicaciones con Ajax.
  • PixelPerfect: otro complemento compatible con Firebug, el mismo, permite sobreponer imágenes en cualquier página, con la idea de comparar el sitio que se está desarrollando respecto al diseño original,útil cuando se estan escribiendo las clases de estilos y se desea lograr una apariencia exacta al diseño dado.
Firebug dentro de Firefox con el plugin de jQuery
  • Html Validator: permite chequear si las páginas web cumplen el estándar XHTML/HTML, necesario para comprobar que tenemos un buen markup Html, evitando futuros problemas de renderizado y permitiendo obtener un mejor SEO.
  • Messure it!: agrega una regla virtual al navegador para medir la distancia exacta (en pixels) de una distancia o área, muy usada en la etapa de diseño y escritura del CSS (sobre todo si se combina con PixelPerfect.
  • Dummy Lipsum: permite generar extractos del texto Lorem ipsum e insertarlo en cualquier campo de un formulario, pues como todo profesional de desarrollo web, sabemos lo feo el uso de texto al azar para probar campos de texto.
  • Lazarus Form: evita la pérdida de los datos dentro de un formulario, útil cuando estamos probando un formulario, rellenamos cada uno de los campos pero algo sale mal y se pierde esa info, pues con este complemento no volverá a suceder lo mismo.
  • Wappalyzer: excelente complemento que informa sobre las tecnologías usadas en un sitio, cuando entras a una página, muestra unos íconos en la barra de estado de los programas o librerías usadas (ejem, jQuery, WordPress, Google Analytics, etc)
Greasemonkey, Html Validator (icono verde) y observer como muestra para este blog las tecnologías que uso: WordPress, Google Analytics y Jquery
  • Web Developer: un gran conjunto de herramientas y opciones a utilizar cuando se desarrolla un sitio web, permite ver errores de javascript, activar o desactivar: estilos, plugins, javascript. Posee una barra acceder a las herramientas rápidamente, permite ocultar/mostrar tablas, imagenes, fondos, etc. Indispensable para cualquier desarrollador web.
  • ColorZilla: permite obtener el color de cualquier pixel de la página, útil para tener el color en hexadecimal de una imagen y escribirlo en el CSS.

Bueno, estos son los complementos mas utilizados por mi cuando creo páginas, si creen que faltan alguno y desean recomendarlo, no duden en comentar. Ademas, si les interesa que complementos uso a diario, pueden ver mi lista.

Deja un comentario