Anuncio de los ganadores del Desafío Google Chrome

• Isis
• octubre 21st, 2010
• News
• 0 Comments

Opciones de Menú en Android… Desmitificando

• Ernest
• octubre 4th, 2010
• News
• 0 Comments

En este artículo vamos a trabajar con las opciones de menú que nos provee Android, y de esta manera configurar opciones y asociar acciones a las que nuestra aplicación pueda responder.

Para continuar con este ejercicio deberemos tener instalado:

• Eclipse Helios Release
• SDK Android 2.2

En primer lugar debemos comprender la arquitectura y comportamientos que implementa Android para soportar un menú de opciones, en este artículo desarrollaremos únicamente un nivel básico de interacción de manera de llegar a una rápida implementación del objetivo.

En la siguiente gráfica identificaremos los componentes esenciales que conforman la arquitectura de menús en Android.

Fig.1 – Arquitectura de menú de Android

En la Fig.1 se observa la representación de una Activity, cada Activity está asociada a un objeto de menú y este último posee elementos de MenuItem y SubMenu.

Las clases claves a trabajar son:

• Android.view.Menu.
• Android.view.MenuItem.
• Android.view.SubMenu.

En este artículo el objetivo es crear opciones de menú simple y recrear un comportamiento elemental con estas opciones, no vamos a trabajar ni con agrupamientos de menú, orden ni submenús.

Vamos a la creación del ejemplo.

La práctica consiste en colocar un TextView en el layout y generar un menú con dos opciones: una que al ser pulsada escriba un texto en el TextView y otra que lo limpie.

Fig. 2 – Proyecto Android en Blanco

La Fig.2 muestra la generación de un proyecto Android simple con el nombre de “apMenuPractica1”, en él solo se tiene el esqueleto básico que provee la plantilla de Eclipse.

Vamos a insertar el TextView, que luego va a ser modificado por las acciones de menú, para ello trabajaremos sobre el archivo de layout principal “main.xml”.

Fig.3 – Layout del Proyecto

En la Fig.3 se muestra el diseño de la interfaz muy simple donde tenemos que tener en cuenta el “id” del control y su referencia a nombre “nota”.

Veamos como generamos las opciones de menú.

Como vemos en código debemos implementar dos métodos importantes para generar el comportamiento deseado:

• onCreateOptionsMenu
• onOptionsItemSelected

Fig.4 – Método onCreateOptionsMenu

La Fig.4 muestra la implementación del método “onCreateOptionsMenu”, en él se incorporan 2 opciones de menú, Agregar y Limpiar.

Estas operaciones generan un menú pero aun no respondes a ninguna acción, para ello deberemos implementar el método “onOptionsItemSelected”.

Fig.5 – Método onOptionsItemSelected

En la Fig.5 se puede observar la implementación del método que reacciona al pulsar las opciones de menú antes agregadas. Esta implementación determina el Id del ítem de menú que ha sido seleccionado y toma una acción sobre el texto del control identificado como “nota”.

Finalmente nuestra aplicación se ve de esta manera:
Les dejo el vídeo de implementación del ejemplo:

Ver Vídeo Implementación

Espero les sea de utilidad..

Apúntate al Google DevFest en Madrid

• Isis
• septiembre 6th, 2010
• News
• 0 Comments

Nos alegra mucho comunicaros que el próximo 23 de septiembre celebraremos el primer Google DevFest en España en colaboración con la Facultad de Informática de la Universidad Complutense de Madrid. El Devfest es parte de una iniciativa internacional que se lleva acabo en varias ciudades como Tokyo, Sao Paulo, Munich, Moscú, Sydney, Santiago y Singapur.

Se trata de un evento para programadores en las que presentaremos las últimas novedades sobre los productos de Google con seminarios prácticos. Es además una excelente oportunidad para conocer a otros desarrolladores. Hablaremos sobre tecnologías móviles y web: Android, HTML5, Chrome, App Engine, Google Web Toolkit y más. La inscripción es gratuita, sin embargo, las plazas son limitadas por lo tanto es importante hacer la inscripción lo antes posible a través de este formulario. Enviaremos un email de confirmación a todos los asistentes.

El DevFest se celebrará en la Facultad de Informática de la Universidad Complutense de Madrid de 9 a 18h. Puedes ver la agenda aquí . Habrá dos tipos de sesiones en paralelo, por lo que es necesario que selecciones las que más te interesen cuando rellenes el formulario de asistencia.

En los seminarios se verán ejemplos de utilización de los productos, nuevos lanzamientos y se explicará como utilizar las APIs. Durante el evento se servirá un desayuno, una comida y un cocktail. Este año queremos terminar la jornada con un panel de emprendedores que nos darán su visión del panorama actual a la hora de empezar tu propia empresa y expondrán ejemplos prácticos y casos de éxito. Como ponentes invitados asistirán profesores de la Universidad Complutense, componentes del equipo de investigación de Libresoft, la sociedad de capital riesgo Grupo Bullnet , el Parque Científico de Madrid, programadores nacionales dedicados a Android y por supuesto varios ingenieros de Google de EE.UU. y Europa.

Para más información puedes visitar el site oficial: https://sites.google.com/site/devfestmadrid/

¡Te esperamos!

App Inventor, ¿Puedo dibujar de forma sencilla?

• Isis
• septiembre 6th, 2010
• News
• 0 Comments

En este artículo vamos a seguir trabajando con la plataforma App Inventor, en este caso particular examinaremos algunos controles extras y para el escenario de implementación, la idea es recrear la posibilidad de dibujar círculos en mi solución Android.
http://appinventor.googlelabs.com/

Introducción

En primer punto nos generamos un nuevo proyecto en app inventor. El nombre del mismo queda a criterio de cada uno, en mi caso la solución se titula “dArtPG”
El diseño de la solución tiende a contener alguna opción para seleccionar el fondo del editor que deseo generar, el color con el cual voy a dibujar círculos en el editor y el editor propiamente dicho.
¿Cómo asociamos estos requerimientos a controles que me provee App Inventor?
Para las selecciones tanto del fondo como del círculo utilizaremos “ListPicker”, de este forma podremos seleccionar el color de fondo y el color del círculo, y para mi editor utilizaremos un control “Canvas”


Fig. 1 Escenario de diseño de la solución

Algo interesante y una práctica que no se negocia en el desarrollo de software, es colocar nombres representativos a los controles para poder identificarlos correctamente en el momento de generar los bloques de código. Utilizaremos entonces, los nombres “Fondo” para la lista de colores de fondo, el nombre “Figura” para la lista de selección de los colores de la figura (Círculo), y Editor para el control de canvas, esto lo muestra la Fig. 1.

¿Generamos el comportamiento?

Vamos a trabajar con el editor de código por bloques de la solución para representar la selección de colores en el fondo del editor y el color de la figura que se dibujará.


Fig. 2 Muestra el editor de código para representar el comportamiento de la selección de colores en el Editor.

La programación la realizamos en el evento “AfterPicking” de ambas listas y para este ejemplo se intenta detectar la selección del usuario mediante un control de “if” que consulta sobre la selección del usuario y establece en el editor el color del fondo y del pincel. Este comportamiento se muestra en la Fig.2.
Finalmente no resta generar la figura sobre el Editor.


Fig. 3 Programación del dibujo del círculo en el editor.

Para este comportamiento vamos a programar sobre el evento “Touched” para que al tocar el editor se pueda generar un círculo del tamaño deseado. En este caso sus dimensiones son de 30px como indica la Fig.3

¿Realizamos una prueba de la solución?

En este ejemplo utilizaremos el emulador que se provee con los extras de app inventor para no utilizar un equipo físico.


Fig. 4 –Emulador con la solución

El comportamiento deseado se logra muy fácilmente en app inventor y para mostrarles la velocidad en la cual se desarrolla, les dejo un video de la implementación.

Vídeo de la Implementación

Espero les sea de utilidad…

Nicolas Bortolotti, Ingeniero U.T.N. Regional San Francisco - Comunidad Xcloud

Desafío Google Chrome 2010

• Isis
• septiembre 1st, 2010
• News
• 0 Comments

Hoy día 1 de septiembre nos alegra anunciar el lanzamiento del Desafío Google Chrome, por primera vez en España. Se trata de una competición para programadores en la que os animamos a desarrollar extensiones para nuestro navegador.
Como muchos de vosotros ya sabréis, las extensiones son una buena forma de añadir más funciones a tu navegador Google Chrome. Éstas se pueden descargar e instalar cómodamente desde la galería de Google Chrome.



La competición estará abierta hasta el día 15 de octubre y los ganadores recibirán un Nexus One como recompensa a sus esfuerzo.

Si no sabes mucho sobre el desarrollo de extensiones, no te preocupes, hemos organizado un workshop gratuito en las oficinas de Google Madrid el próximo día 9 de septiembre a las 19h. En el mismo podrás aprender todo lo que necesitas saber sobre cómo desarrollar tus extensiones para Chrome. Las plazas para asistir a la charla son limitadas así que apúntate cuanto antes rellenando el siguiente formulario.

Para presentarse al Desafío el equipo debe ser como máximo de 2 personas y la extensión debe ser en Castellano. Los ganadores se anunciarán el 22 de octubre. Puedes enviar tu extensión a través de este formulario.

Puedes encontrar más información en la página oficial. ¡Os animamos a enviar vuestras extensiones y demostrar de lo que sois capaces!


Isabel Salazar, Departamento de Marketing de Google

HTML5 Rocks!

• Ernest
• agosto 26th, 2010
• News
• 0 Comments

Desde hace unos días ya está a disposición de los desarrolladores la página HTML5 Rocks. El objectivo de esta página es proporcionar recursos para todas aquellas personas implicadas en cualquier proyecto web, especialmente de aplicaciones web.

Aquellos que hayan estado desarrollando con HTML/JS/CSS hasta ahora, encontrarán en HTML5 nuevas etiquetas y una serie de nuevas APIs para implementar ciertas funcionalidades que hasta ahora sólo era posible con el uso de librerías externas o extraños hacks en el código. Estas APIs incluyen nuevos métodos para controlar acciones de “soltar y arrastrar", histórico de navegacion, renderizado gráfico (canvas), base de datos en el cliente, nuevos cache para uso offline, geolocalización, y mucho más.

De hecho, en HTML5 rocks se tratan no sólo las tecnologías puramente de HTML5 sino que también CSS3 y otras APIs Javascript que todos los navegadores modernos están soportando actualmente. A todo este grupo de tecnologías también se les refiere esporadicamente como HTML5++.

El primer paso para poner tu aplicación o pagina al día es tan sencillo como simplificar un poco la estructura de tus etiquetas a HTML5. Si antes una página, en su versión mas simple, tenía la siguiente estructura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">...</style>
</head>
<body>
<!-- body content -->
<script type="text/javascript">...</script>
</body>
</html>

Ahora con HTML5 puedes escribirlo así (sobretodo la primera línia de doctype):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>...</style>
</head>
<body>
<!-- body content -->
<script>...</script>
</body>
</html>

A partir de aquí, échale un vistazo a los recursos disponibles en estas diapositivas para ver cuales podrían ser útiles para tu aplicación. Con el editor de código interactivo puedes experimentar con cada una de las características HTML5 para aprender como utilizar el código necesario en segundos. Para ejemplos mas avanzados que utilizan varias tecnologías a la vez, hay una galería de ejemplos para descargar y aprender del código.

Si además eres de los que aprende mejor con un tutorial paso a paso, hay una serie de 14 tutoriales disponibles que enseñan como empezar a utilizar las tecnologías de HTML5 (o HTML5++), tales como geolocalización, Web Workers o HTML5 video.

Si deseas contribuir con código, demos o sugerencias utiliza el bug tracker o la cuenta de twitter @ChromiumDev. Estaremos encantados de incorporar tus ejemplos.

Ernest Delgado, Developer Programs Engineer de Google Chrome

Iniciando en App Inventor

• Ernest
• agosto 12th, 2010
• News
• 0 Comments

Fig.2 Marco de diseño de la solución Mobile

En la Fig.2 podemos visualizar el marco de diseño que se puede proporcionar a nuestro desarrollo Android, el entorno de diseño se compone de una Palette (caja de controles), un Viewer (visualizador) donde puedo visualizar el diseño sobre la muestra de teléfono Android y una guía de componentes y propiedades de cada uno de los controles que se están manipulando.

Con estas opciones rápidamente sin conocer mucho de la tecnología Android puede diseñar nuestra solución, arrastrando controles por ejemplo un botón, una imagen, cambiar colores y demás.

Ahora la preocupación llega en como codificar el comportamiento de la interfaz, socorro!! Necesito un profesional del software es lo primero que llegaría a sus mentes.

App Inventor propone un entorno de programación por bloques muy simple de manipular por alguien ajeno al software. ¿Lo vemos?

Fig. 3 – Editor de Código Fuente

El editor de código fuente que se muestra en la Fig.3 propone dos opciones que se pueden visualizar en el vértice superior izquierdo, en donde podemos optar por seleccionar los bloques propios (ellos se derivan de los controles diseñados en la interfaz mobile) y los bloques de construcción tradicionales para aplicar comportamiento en general a nuestra solución.

Bien, ahora el requerimiento de prueba sería:

"Necesito que al pulsar sobre un botón en la interfaz de mi solución Android Mobile se cambie el fondo de pantalla a color gris."

Paso 1:

Buscar en los bloques de construcción propios como el control del botón:

Fig.4 – Opciones sobre el control de botón

Como podemos observar en la Fig.4 al seleccionar el botón se nos proponen opciones muy intuitivas,

Paso 2:

Seleccionamos el bloque de "Click". Esta es la operación donde se requiere una acción.

Fig. 5 – Selección del Bloque de Click

Paso 3:

Vamos a arrastrar otro bloque que reaccione con una actividad a este evento de "Click". No debemos preocuparnos mucho porque App Inventor con las figuras de los bloques ya nos guía. Esto quiere decir que según su forma encajarán.

Fig. 6 – Acoplado de Bloques

Como se muestra en la Fig.6 hemos codificado que al hacer Click en el botón cambiamos el fondo de la pantalla a… nos resta definir el color.

Paso 4:

Seleccionamos de los bloques generales que provee App Inventor, un color.

Fig. 7 Selección de un bloque de color.

Listo!!

Nuestra aplicación está completa, y así de simple la podemos realizar

Simple ¿no?

Les dejo un video de implementación.

Hasta la próxima!
Publicado por Ing. Nicolas Bortolotti

RatingBar, Analizando Android

• Ernest
• julio 31st, 2010
• News
• 0 Comments

En este artículo vamos a realizar un análisis del uso de un sistema de visualización mediante puntuación estilo “Rating”, generalmente la simbología implementada en este tipo de soluciones son las estrellas, un ejemplo de ello es la empleada en la valoración de hoteles. Este análisis e implementación lo vamos realizar sobre la tecnología Android. Inicialmente la idea sería colocar un widget que mediante una selección, reaccione de distintas formas, esto implica que cada selección sobre una valoración, se evalúe la posibilidad de realizar una acción, en este ejemplo se trabaja con umbrales y si se selecciona una valoración superior a “2” se muestra un mensaje correspondiente y en caso contrario se visualiza otro mensaje.

Veamos que nos provee como ayuda el equipo de Android:

En este vínculo siguiente podemos encontrar todo el detalle de la tecnología implementada.
http://developer.android.com/reference/android/widget/RatingBar.html
En el siguiente vínculo podemos ver un ejemplo propuesto por las demos de Android
http://developer.android.com/resources/tutorials/views/hello-formstuff.html

En la demo, vamos a utilizar el entorno Eclipse con el kit de desarrollo para Android.

Creamos una nueva aplicación para Android como muestra la siguiente figura:

Los puntos importantes a tener en cuenta son:

• La clase RatingNB.java (se encuentra el esquema de ejecución de nuestra aplicación)
• El archivo Main.xml (se encuentra el esquema de layout)
• El archivo strings.xml (se encuentran los recursos)

Veamos la sintaxis de cada uno. En el vídeo enlazado al final de este artículo se pueden ver los detalles de ejecución:

En el método “OnCreate” podemos observar la creación de “ratingBar_default”, esto llega de la maqueta armada en main.xml “R.id.ratingbar_default”. Luego se sobreescribe el “onRatingChanged” para indicarle que realizar cada vez que cambia algo en el ratingbar, y particularmente la lógica que le hemos colocado indica que si el valor de rating es mayor a 2 se coloque un mensaje, sinó otro mensaje será mostrado.

Veamos el main.xml para definir el layout:

Como podemos observar, tenemos un texto genérico con un “string” que llega desde los recursos. Lo importante aquí es el tag “RatingBar” donde, por ejemplo, tiene declarado el “stepSize” para indicar en cuanto se segmenta la selección de valores de puntuación. Como ejemplo, la granularidad es 0.5 indica que segmentará por media estrella en cada selección.

Finalmente veamos el “strings.xml”:

Bien, se puede observar la personalización del recurso de cadena, con un valor de “Rating Nick”.
El aplicativo funcionando muestra el siguiente diseño:

Veamos la implementación del ejemplo en un vídeo:

Video en YouTube - RatingBar Android

Espero les sea de utilidad… hasta la próxima.

Nicolas Bortolotti, Profesor de la Universidad Tecnológica Nacional, Argentina.