Documentos de Académico
Documentos de Profesional
Documentos de Cultura
A APP INVENTOR
Gua de iniciacin a APP INVENTOR (2015)
1
Tabla de contenido
GUA DE INICIACIN A APP INVENTOR
Objetivo
Qu es AppInventor?
Sesin #1
Objetivos
Crear una cuenta Google
Instalar App Inventor 2
Configurar el idioma
Empezamos!
Instalar MIT AI2 Companion en el dispositivo Android, o conocer el
emulador
Empezamos a programar!
Incluir un botn en la pantalla
Aadir un sonido
Ahora a vibrar
Conocer la pgina web de App Inventor (tutoriales, ejemplos, guas etc.)
Ideas para profundizar nosotros mismos
Sesin #2
Crear una aplicacin para dibujar
Coordenadas x e y
Cambiar el tamao del pincel con un Deslizador
Guardar un archivo con el dibujo que hemos hecho
Ideas para mejorar la aplicacin
Sesin #3
Objetivos para hoy
Qu nmero est pensando?
Definimos la interfaz del juego
Generamos un nmero aleatorio
Guardamos el nmero en una variable
Pedimos un nmero al jugador
Hacemos comparaciones con la instruccin si-entonces
Comparamos los nmeros
Bloque tomar para conocer el valor de una variable, texto o etiqueta
Bloque poner para guardar el valor de una variable, texto o etiqueta
Bucles si-entonces anidados
Uso de un reloj para calcular el tiempo
Otras propuestas de mejora para la aplicacin
Mejoras en la interfaz de usuario
Sesin #4
Objetivos para hoy
Componentes ImageSprite y Pelota
Definicin del escenario de juego
Proporciones y lmites. Matemtica aplicada
Definir el objetivo del juego
El movimiento de la pelota
Crear los bichos a aplastar
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
2
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
3
Objetivo
A pesar de ser un recurso muy til para iniciarse en el mundo de la programacin, no
parece haber demasiados tutoriales o guas de App inventor en castellano. Este
documento pretende facilitar un poco las cosas a los hispanohablantes que quieren
acercarse al apasionante mundo de la programacin a travs de la fantstica
herramienta que es App Inventor.
Este documento fue escrito inicialmente para utilizarlo como gua durante las sesiones
de iniciacin a App Inventor que se desarrollan cada tarde del sbado en el Coder Dojo
del centro MediaLab Prado de Madrid, en Espaa. Las posibilidades de App Inventor
son extenssimas, y la intencin es simplemente que sirva de ayuda en los primeros
pasos, para que el estudiante pueda despus continuar por s mismo, buscando ms
recursos de aprendizaje en la web, y llevado a cabo sus propias ideas.
Muy gustosamente atender las preguntas, dudas, comentarios o ideas a travs del
correo electrnico
raulconm@gmail.com
, o la cuenta de Twitter @raulconm
Feliz programacin!
Ral C.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
4
Qu es AppInventor?
App Inventor parte de una idea conjunta del Instituto Tecnolgico de Massachusetts y
de un equipo de Google Education. Se trata de una herramienta web de desarrollo
para iniciarse en el mundo de la programacin. Con l pueden hacerse aplicaciones
muy simples, y tambin muy elaboradas, que se ejecutarn en los dispositivos mviles
con sistema operativo Android.
App Inventor es un lenguaje de programacin basado en bloques (como piezas de un
juego de construccin), y orientado a eventos. Sirve para indicarle al cerebro del
dispositivo mvil qu queremos que haga, y cmo.
Es por supuesto muy conveniente disponer de un dispositivo Android donde probar los
programas segn los vamos escribiendo.
Sesin #1
Objetivos
1. Crear una cuenta Google
2. Instalar App Inventor 2
3. Instalar MIT AI2 Companion en el dispositivo Android, o conocer el emulador
4. Crear una aplicacin e instalarla en el mvil
5. Conocer la pgina web de App Inventor (tutoriales, ejemplos, guas etc.)
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
5
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
6
Configurar el idioma
App Inventor nos muestra inicialmente el interfaz en ingls, sin embargo, podemos
utilizarlo tambin en castellano. La eleccin del idioma se hace pulsando sobre el icono
de la bola del mundo situado en la esquina superior derecha de la pgina de App
Inventor.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
7
Empezamos!
Una vez configurado en castellano pulsamos el botn Comenzar un proyecto nuevo...
y le damos a nuestro proyecto el nombre Miau
Esto nos lleva a la ventana principal de App Inventor.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
8
Abriremos ahora en el mvil la aplicacin que hemos descargado, haciendo clic sobre
el icono
MIT AI2 Companion. Puede estar en la pgina principal o dentro del grupo de
Aplicaciones.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
9
Una vez establecida la conexin entre App Inventor y el mvil veremos una pantalla en
blanco con el ttulo
Screen1
.
Empezamos a programar!
Antes de nada, para este ejercicio necesitamos dos recursos que tenemos que
descargar en nuestro ordenador:
Kitty.png
Miau.mp3
http://coderdojo-medialabprado.4shared.com
Haremos clic con el botn izquierdo sobre el archivo que queremos descargar. Se
abrir una pantalla mostrando el archivo.
Saldr una pantalla mostrndonos el tiempo que tendremos que esperar para que
comience la descarga gratuita.
Al pulsar
DESCARGA GRATIS el servidor nos pedir que le autoricemos a usar una
cuenta. Le autorizaremos a usar la de Google+, ya que la hemos creado antes.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
10
Comenzar entonces la descarga del archivo. En algunos casos puede que el navegador
abra directamente el archivo de imagen que hemos descargado. En ese caso bastar
que hagamos clic con el botn derecho y seleccionemos la opcin Guardar imagen
como para que quede almacenado en nuestro disco. Repetiremos este proceso para
los dos archivos mencionados.
Un botn es un objeto sobre el que podemos hacer clic, y puede tener diferentes
aspectos.
Para que el botn tenga la imagen del gato hacemos clic en el botn, y en la parte
derecha de App Inventor, en Propiedades, y bajo la propiedad
Imagen
, hacemos clic en
Ninguno
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
11
Para quitar el texto Texto para el Botn1 que aparece por debajo del gato hay que
borrar el valor de una propiedad Texto del botn, en la parte derecha de la ventana.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
12
Si no vemos la cara del gato entera en la pantalla del dispositivo deberemos cambiar
los valores de las propiedades
Ancho y Alto del botn por Ajustar al contenedor,
para que se ajusten al tamao mximo disponible en la pantalla del dispositivo.
Para incluir una etiqueta debajo del gato que ponga Hola, soy Kitty arrastramos un
componente Etiqueta
hasta el visor, y la soltamos debajo del gato.
Investiguemos ahora para descubrir cmo cambiar el texto Texto para Etiqueta1 por
Hola, soy Kitty. Una pista: hay que seleccionar la etiqueta en el visor, y luego cambiar
sus propiedades en la parte derecha de la ventana de trabajo de App Inventor.
Aadir un sonido
Ahora aadiremos un sonido a nuestra aplicacin, arrastrando hasta el visor el icono
, que est dentro del grupo
Sonido Medios, en la Paleta. Ojo, este objeto no se ver en
el mvil o en el emulador, porque no es una imagen, ni un botn, ni una etiqueta. Por
eso aparece debajo del visor, en el apartado Componentes no visibles .
Investiguemos ahora de nuevo para saber cmo asociar a este objeto que hemos
creado el sonido Miau.pm3 que hemos descargado. De nuevo hay que usar el panel
de propiedades para este componente. No es difcil, haremos clic sobre el valor de la
propiedad Origen
del componente
Sonido1
y subiremos el archivo descargado.
Con esto hemos terminado de disear el aspecto de nuestra aplicacin Ahora viene la
magia, tenemos que programar cmo se comportar la aplicacin. Eso es programar!
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
13
Vamos a hacer que suene el sonido del gato cada vez que hagamos clic sobre la imagen
del gato (botn).
Hacemos clic en Botn para que se muestren los bloques de colores disponibles para
escribir nuestro cdigo, el programa. Se abre un cajn de herramientas con todos los
bloques que podemos utilizar. Arrastramos hasta el editor el que dice
Botn1.Clic
.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
14
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
15
Esto tomar un poco de tiempo, despus del cul aparecer un cdigo QR que
podremos capturar en nuestro mvil. La aplicacin quedar descargada entonces en
nuestro telfono/Tablet, para ejecutarla siempre que queramos.
Ahora a vibrar
Podemos mejorar la aplicacin, haciendo que el telfono vibre a la vez que el gato
malla. Una pista: hay que buscar dentro del cajn de bloques del objeto
Sonido1
.
Ahora cambiamos el valor 0 por el valor 500, para que vibre durante medio segundo.
Los bloques quedarn as
Qu pasa si ponemos 2500 en el bloque azul? Vibrar durante 2,5 segundos. Para
cambiar el valor hay que hacer clic sobre el nmero, y escribir el nuevo valor.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
16
Una vez duplicado lo encajaremos con el bloque mostaza que hemos creado. El editor
de cdigo aparecer como en la siguiente figura.
Aqu hay dos EVENTOS distintos, y le estamos indicando al mvil, a travs de este
programa, qu debe hacer cuando suceda cada uno de estos eventos.
Intentemos ahora generar nosotros mismos el cdigo QR para esta nueva aplicacin.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
17
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
18
Sesin #2
Crear una aplicacin para dibujar
Una vez que hemos visto el manejo ms bsico de las pantallas, el Diseador, y el
Editor de Bloques de App Inventor, ya estamos listos para hacer algo ms avanzado.
Comenzaremos haciendo clic en el desplegable Proyectos, y eligiendo la opcin
Comenzar un proyecto nuevo...
ATENCIN
Es importante siempre utilizar nombres descriptivos para los objetos que vamos
creando. Al principio, cuando nuestras aplicaciones son pequeas, es fcil recordar
cada objeto, pero a medida que los programas van hacindose ms complejos es
fundamental saber para qu sirve cada objeto, cada variable, y slo podremos hacerlo
si le hemos dado un nombre que describe qu es o para qu sirve.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
19
Crearemos despus otro botn verde, y finalmente otro azul, y haremos lo mismo que
hemos hecho con el rojo, cambiaremos su nombre, el color de fondo, y el texto que
aparece en el botn.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
20
Como queremos que los botones queden en una misma lnea horizontal, vamos a
recolocarlos en la pantalla aadiendo un componente DisposicinHorizontal . Lo
arrastramos desde el cajn
Disposicin
hasta el Visor. Este objeto aparecer en el Visor
como un cuadro vaco.
pixels
El tamao se especifica en , es decir, en puntos de la pantalla. Cada lnea de la
pantalla tiene un nmero de pixels. El nmero de ellos que haya, en lneas y columnas,
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
21
Ahora vamos a definir el comportamiento del programa, a decir cmo tiene que
funcionar. Vamos entonces al editor de bloques.
Coordenadas x e y
El pensador Ren Descartes invent hace tiempo un sistema para definir la posicin de
un objeto sobre un plano. En su honor, este sistema se conoce como
Coordenadas
Cartesianas. Para conocer ms sobre este tema visitemos la pgina
http://es.wikipedia.org/wiki/Coordenadas_cartesianas
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
22
Precisamente para saber dnde dibujar el crculo, el bloque morado deber saber que
saber qu
xey tiene el punto de la pantalla que estamos tocando. Lo tomaremos del
bloque mostaza.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
23
Ahora podemos tocar dentro del lienzo, en la pantalla del mvil o el emulador, para ver
cmo se dibujan pequeos crculos. Pero para que los crculos sean rojos, verdes o
azules en lugar de negros, hay que decirle al mvil que lo haga creando nuevos
bloques. Una pista: hay que utilizar un bloque mostaza del objeto botn_rojo . Ya
hemos usado este tipo de bloque mostaza en el programa del gato.
Utilizaremos el bloque
cuando.boton_rojo.Clic
. Lo arrastramos hasta el editor de
bloques.
Qu tiene que ocurrir cuando hagamos clic sobre el botn rojo? Tiene que cambiarse
a rojo el color del pincel que usamos en el lienzo. Dnde tendremos que definir eso?
Una pista: el color del pincel es una caracterstica del
Lienzo1
, as que tendremos que
buscar la manera de hacerlo usando algn bloque del cajn del objeto Lienzo
. Otra
pista: es un bloque de color verde oscuro.
Falta indicar que queremos que sea el color rojo. Para ello escogeremos el pequeo
bloque que identifica a este color de entre los colores que hay en el cajn
Colores de la
Paleta de App Inventor.
Haremos lo mismo con los botones para color verde y color azul. Lo mejor es hacerlo
duplicando el bloque mostaza que hemos creado para el color rojo. Una vez hecho, en
el nuevo bloque mostaza, podemos desplegar la lista del nombre de los botones y
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
24
elegir el del color verde. Entonces slo tendremos que cambiar el bloque rojo por el
verde, y listo. Lo mismo con el botn para el azul.
Cuando probemos el resultado se nos ensuciar el lienzo enseguida, as que hay que
poner un botn para dejar el lienzo en blanco de nuevo. Cmo se har? Varias pistas:
Crear
DisposicinHorizontal1 debajo del lienzo
Meter dentro un nuevo botn y llamarlo Limpiar
Cambiar el texto del botn por Limpiar
Poner los bloques para que al hacer clic sobre
Limpiar
se limpie el lienzo
ATENCIN
En programacin no hay una nica manera de hacer bien las cosas, es decir, podemos
conseguir el mismo resultado utilizando bloques diferentes. El objetivo crear el
programa de la forma ms simple y ms eficiente, para que nuestro cdigo sea ms
elegante.
Podemos usar estos dos tipos de bloques, por ejemplo, para dibujar un crculo por
cada punto donde vayamos arrastrando el dedo. XActual e YActual se refieren
precisamente al punto representado por las coordenadas x e y actuales. Veremos
como funciona esto al arrastrar el dedo despacio por el lienzo. Si deslizamos el dedo
demasiado rpido se vern los puntos separados.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
25
Ms apropiado puede ser entonces utilizar este otro bloque morado, que se basa en
dibujar lneas, y no crculos. Para dibujar una lnea hace falta especificar el punto inicial
de la lnea y el punto final. Por ello para usar este bloque hay que indicarle dos
coordenadas x y dos y. El primer (x1, y1) define el punto inicial de la lnea, y el segundo
par (x2, y2) define el punto final de la misma. Al hacer clic sobre el lienzo, sin levantar
el dedo, el programa guardar en su memoria el valor de la x e y del punto que hemos
tocado (determinado por XPrevio e YPrevio). Segn vayamos deslizando el dedo el
programa ir detectando el cambio de posicin y dibujar una lnea desde ese punto
guardado hasta el punto que estamos tocando actualmente (determinado por XActual
e YActual). Esto se repetir todo el tiempo, muy rpidamente, mientras sigamos
arrastrando el dedo por la pantalla. Se dibujarn por lo tanto muchas lneas muy
cortas, una detrs de la otra, dando la sensacin de ser una nica lnea continua.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
26
Tenemos que definir el valor mnimo y mximo que podr tomar el deslizador, y el
valor que tendr inicialmente (PosicinDelPulgar ). Tambin es conveniente especificar
la anchura del Slider para que se ajuste al espacio restante (
Ajustar al contenedor
).
Tenemos que indicarle ahora a nuestro programa que modifique el ancho de la lnea
de nuestro dibujo segn variemos la posicin de Tamao_pincel . Para ello,
utilizaremos el bloque mostaza
cuando.Tamao_pincel.PosicinCambiada , que se
ejecuta cada vez que se cambia la posicin del selector dentro del deslizador.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
27
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
28
El bloque de cdigo que usaremos, incluido dentro del cajn Lienzo, ser
llamar.Lienzo1.Guardar.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
29
Este bloque es diferente a los vistos hasta ahora, porque no puede ser encajado
directamente debajo de otro bloque, o dentro de un bloque color mostaza. El bloque
tiene que ser encajado a otro por su izquierda. Esto se debe a que es un bloque que
devuelve un valor, como acabamos de ver al final del apartado anterior, con el bloque
de color verde claro
Lienzo1.AnchoDeLnea . En este caso el bloque violeta devuelve
una texto, que contiene el nombre del archivo donde se ha almacenado el dibujo
dentro de la memoria del dispositivo.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
30
Por ejemplo
Poner un sello con tu nombre cuando pulses un botn
Tomar una foto existente en la memoria del dispositivo y usarla como fondo del
lienzo, etc.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
31
Sesin #3
Objetivos para hoy
1. Hacer una aplicacin para adivinar qu nmero est pensando
2. Descargarla en nuestro mvil
Para que el dispositivo pueda hacer esto correctamente, tenemos que ensearle cmo
hacerlo, paso a paso, aadiendo bloques de cdigo. Se trata de ensearle al programa
la lgica que seguimos nosotros, los seres humanos, cuando jugamos a este juego.
A partir de este proyecto vamos entonces a intentar ser ms ordenados. Voy a dejar
una E_ delante del nombre mi nueva etiqueta. As siempre sabr, cuando vea los
bloques, que esa es una etiqueta, y no un botn, ni campo de texto, ni otro tipo
componente. Llamar a la etiqueta
E_nmero .
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
32
Adems el dispositivo va a tener que escuchar cada nmero que le digamos, para
decidir si hemos acertado, as que aadiremos en nuestra ventana del visor un campo
de texto. Servir para que el jugador indique qu nmero cree que ha pensado el
programa.
Finalmente tendremos que aadir un botn con el texto Adivina para que el
dispositivo sepa cul hemos elegido. A este botn lo llamaremos
B_adivinar
. Cuando el
jugador lo pulse el programa tendr que hacer algunas comprobaciones que ahora
iremos viendo.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
33
Para hacer lo mismo en nuestra aplicacin necesitamos crear cdigo, as que vamos al
editor de bloques.
Lo primero que el programa tiene que hacer es pensar en un nmero. En este caso le
vamos a indicar cmo debe pensar en un nmero entre 1 y 10. Al ser una instruccin
matemtica, abriremos el cajn
Matemticas, y usaremos el bloque
entero aleatorio
.
Tendremos que especificarle entre qu dos nmeros debe pensar su nmero.
Veamos que este tipo de bloque tiene que ser encajado a la derecha de otro. Esto es
porque el resultado de este bloque, el nmero entre 1 y 10, ser el dato de entrada
para otro bloque.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
34
Con estos dos bloques le hemos dicho al el juego que tiene que pensar un nmero
entre uno y diez, y guardrselo en una variable de su memoria, sin mostrrselo al
jugador.
ATENCIN
Una variable de memoria es como una caja dentro de un gran armario lleno de cajas,
que es la memoria total del ordenador. La memoria total del ordenador est
compuesta por millones de estas pequeas cajitas de memoria, que sirven para
guardar la informacin que el ordenador recibe del exterior, y la que l mismo genera
durante la ejecucin de las aplicaciones.
Tambin se guarda en la memoria el propio programa que est ejecutndose.
Por lo tanto, cada vez que el jugador escriba su nmero y pulse el botn
B_adivinar
el
programa lo comparar con el nmero secreto.
Este bloque tan importante es el que nos permitir a los programadores ensearle al
dispositivo cmo debe tomar las decisiones durante la ejecucin de un programa. El
bloque si-entonces bloque sirve para darle inteligencia a las aplicaciones. Usaremos
este bloque muchsimas veces cuando hagamos programas.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
35
Si
se cumple una condicin
Entonces
Ejecuta esto
S
numero_x>2
Entonces
Escribe numero_x es mayor que dos
Al bloque
si-entonces se le tienen que encajar dos bloques ms por el lado derecho. El
primer encajador, el que sigue a
si
, sirve para indicar la expresin que se va a evaluar.
En el caso de nuestro programa, vamos a comparar dos nmeros, el pensado y el que
ha dicho el jugador.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
36
En el primer hueco del bloque azul pondremos el nmero secreto que almacenamos
antes en la variable, y en el otro lado indicaremos cul es el nmero que ha escrito el
jugador en el campo T_nmero . Antes de hacer esto tenemos que saber cmo manejar
el contenido de una variable.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
37
ATENCIN
Utilizaremos el componente Etiqueta
cuando el valor de su propiedad Texto
slo va a
ser modificada por el programa, es decir, cuando el usuario de la aplicacin no tiene
que escribir sobre ella para modificarlo. En caso de que el usuario pudiera modificarlo
utilizaramos un componente CampoDeTexto .
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
38
Para incluir el texto Demasiado bajo usaremos un bloque fucsia que hay dentro del
cajn
Texto.
Cundo debemos hacer la comparacin? Cada vez que el usuario haga clic en el botn
B_adivinar
. Por lo tanto, incluiremos todo el bloque anterior dentro del bloque
cuando.B_adivinar.Clic
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
39
Pero esto slo dar la pista al jugador cuando su nmero sea menor al pensado, as
que habr que hacer tres bloques si-entonces
, uno para cuando el nmero sea menor,
otro para cuando sea mayor, y el ltimo para cuando sea igual, en cuyo caso el jugador
habr acertado el nmero.
Observemos que en cada bloque azul el signo de comparacin ser diferente. Podemos
duplicar los bloques
si-entonces completos y luego modificar los bloques azules y
fucsia para que se adapten a cada comparacin.
Para saber si el programa funciona como debe tenemos que poner chivatos. Por
ejemplo, podemos hacer que se muestre siempre el nmero pensado en pantalla, para
saber si el programa funciona bien. El nmero no ser secreto, pero ayudar al
programador a saber si la aplicacin est tomando las decisiones como l quiere que lo
haga.
ATENCIN
Un chivato se utiliza slo durante la fase de desarrollo del programa, mientras se est
escribiendo. Cuando todo est probado, y antes de ponerlo a disposicin de los
usuarios, hay que acordarse de quitar todos los chivatos. A veces los programadores se
olvidan de quitarlos, y eso queda fatal!
De momento, el mejor sitio para ubicar este bloque es dentro del evento cuando
B_adivinar.Clic
, como primera instruccin. As se actualizar en la pantalla el valor del
chivato cada vez que usuario pulse el botn de adivinar.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
40
ATENCIN
Es importante que como programadores intentemos escribir un cdigo tan eficiente y
limpio como podamos. Para ello hay que pensar un poco cul es la mejor manera de
llevar a cabo un proceso concreto, evitando lneas innecesarias o redundantes, que
afean el cdigo. La programacin tiene un toque artstico, y como tal hay es
preferible buscar siempre la elegancia y la belleza.
Snumero_x>2
Entonces
Escribe numero_x es mayor que dos
Si no
Escribe numero_x es menor o igual que dos
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
41
En este caso lo utilizaremos para limitar el tiempo de que dispone el usuario para
adivinar el nmero pensado. Cuando el tiempo se cumpla, el usuario no podr seguir
intentando adivinar el nmero.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
42
Para saber cundo se cumplen los treinta segundos usaremos el bloque mostaza
cuando Temporizador.Temporizador ejecutar , que se encuentra dentro del cajn del
reloj, en el editor de bloques. Todo lo que queramos que suceda cuando se cumplan
los treinta segundos habr que ponerlo dentro de este bloque.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
43
Ahora pondremos los bloques para que el juego nos informe de que han transcurrido
los treinta segundos a travs de un mensaje de texto. Como llegados a este punto ya
no vamos a utilizar ms la etiqueta E_pista
, podemos reutilizarla para mostrar al
jugador el texto de tiempo agotado.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
44
Las aplicaciones de uso complejo normalmente no son muy atractivas, as que hay que
esforzarse para que el jugador pueda manejar la aplicacin con la facilidad que le
gustara. Tenemos que pensar qu nos gustara a nosotros que la aplicacin hiciera si
furamos el jugador, cmo nos hara ms cmodo su uso, y crear el cdigo necesario
para que la aplicacin se comporte de esa manera. Por ejemplo, es importante que el
jugador slo pueda meter un nmero dentro del rango de nmeros entre los cuales
est la aplicacin est pensando su nmero aleatorio.
Otra importante mejora sera poner un botn para empezar de nuevo el juego, es
decir, para que el mvil piense un nuevo nmero. En otro caso, el jugador tendra que
salir de la aplicacin y volver a entrar para que la aplicacin pensara un nuevo nmero
para jugar, y seguro que el jugador no estara dispuesto a hacer esto muchas veces.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
45
Sesin #4
Objetivos para hoy
1. Disear y escribir un juego grfico
2. Probar el juego y definir mejoras
3. Descargarlo en nuestro mvil
Componentes ImageSprite
y
Pelota
Un recurso muy importante disponible en App Inventor es el componente
, que se encuentra en la paleta de diseo, dentro del cajn
SpriteImagen Dibujo y
animacin.
Pelota
es un tipo especfico dentro del conjunto
SpriteImagen
. La nica diferencia es
que en el caso del componente Pelota no podemos cambiar su aspecto, la imagen del
objeto, que siempre ser una circunferencia. S podremos hacerlo sin embargo para
cualquier otro
SpriteImagen .
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
46
Para que el escenario siempre ocupe todo el espacio de la pantalla del dispositivo
debemos definir algunos bloques dentro del bloque mostaza
cuando.Screen1.Inicializar. Todo lo que incluyamos en este bloque se ejecutar en
cuanto se abra la pantalla, es decir, en este caso ser lo primero que suceda cuando se
ejecute la aplicacin.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
47
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
48
El movimiento de la pelota
Esta parte es muy importante, ya que de ella depende que el juego funcione
correctamente y su uso sea agradable para el usuario. Aunque parezca complicado,
una vez entendida la lgica, no ser difcil crear los bloques que permitan este
movimiento.
Para ello reduciremos un poco el tamao del escenario, y colocaremos debajo tres
campos Etiqueta
para mostrar el valor de las variables.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
49
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
50
Ya podemos indicarle al programa que muestre los valores de las tres variables dentro
de las etiquetas que hemos creado. Recordemos que podemos duplicar bloques y
modificarlos cuando vamos a crear varias instrucciones similares.
El dispositivo siempre sabe cul es la aceleracin en cualquiera de los tres ejes. Para
saberlo nosotros y utilizarlo en nuestro juego tenemos que utilizar el bloque mostaza
cuando.Inclinacin.CambioEnAceleracin . Para conocer la aceleracin en el eje X, por
ejemplo, tenemos que dejar el puntero del ratn inmvil durante un segundo sobre el
campo xAccel color naranja que hay dentro del bloque mostaza. Una vez aparezcan las
opciones tomar yponer
para esa variable, podremos arrastrar el bloque
tomar hasta
el hueco disponible a la derecha del bloque color verde oscuro correspondiente.
Es buen momento para experimentar qu sucede con cada una de las variables cuando
inclinamos el dispositivo. Podemos invertir un poco de tiempo probando, hasta que
entendamos cmo afecta la inclinacin a cada una de estas variables. Veremos que
para la Y los valores comprendern de -10 (cuando el dispositivo est vertical y
apuntando hacia el suelo) a 10 (cuando el dispositivo est vertical, y hacia arriba). Para
la X, los valores comprendern tambin entre 10 (cuando est completamente
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
51
inclinado con la pantalla hacia la izquierda) y -10 cuando est completamente inclinado
con la pantalla hacia la derecha).
Una vez est claro qu sucede cuando inclinamos el dispositivo, es hora de programar
el comportamiento de la pelota. Tendr que moverse en la direccin en que inclinemos
el dispositivo. Cmo? Una pista: hay que utilizar el mismo bloque mostaza del sensor
de inclinacin que hemos usado antes.
Dentro del mismo bloque mostaza que detecta la variacin del sensor de inclinacin
incluiremos el movimiento de la pelota. Para ello usaremos el bloque violeta
llamar.spritePelota.MoverA , que sirve para colocar el objeto en cualquier punto del
escenario que queramos. Este bloque acepta dos parmetros de entrada, X e Y, que
definen las coordenadas donde se colocar la esquina superior izquierda del sprite de
la pelota. Haremos que la coordenada X y la coordenada Y de la pelota que definen su
colocacin en el escenario vayan variando cuando inclinemos el dispositivo en
cualquiera de los dos ejes, o en los dos al mismo tiempo. Lo haremos simplemente
sumando el valor de la variable xAccel
al valor de la coordenada X actual de la pelota, y
sumando yAccel
al valor de la coordenada Y. Los bloques de color verde claro estn
dentro del cajn de propiedades de spritePelota .
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
52
Tommonos un tiempo para asimilar estos ltimos prrafos porque no son sencillos de
entender, y hagamos las pruebas que se nos ocurran, modificando el cdigo que
hemos generado para que el programa haga cualquier otra cosa que queramos.
Para empezar habr que dibujar el sprite que queremos utilizar en el juego para
representar al bicho que queremos aplastar. En nuestro caso usaremos el pequeo
sprite de 30x30 pixels Sprite_objeto_1.jpg, que nosotros mismos hemos creado, y
que podemos encontrar en http://coderojo-medialabprado.4shared.com
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
53
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
54
1. Abrir el grifo
2. Mojar las manos
3. Poner jabn
4. Frotar manos
5. Aclarar
6. Cerrar el grifo
7. Secar las manos con la toalla
Los procedimientos son muy importantes, porque permiten organizar mejor el cdigo y
ahorrar esfuerzo a la hora de programar. En nuestro caso, podremos invocar en
cualquier momento al procedimiento para hacer que la aplicacin vuelva a colocar los
objetos aleatoriamente en el escenario.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
55
Una vez definido el procedimiento, y modificado su nombre, los bloques quedarn as.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
56
Lo que pongamos dentro de este bloque se ejecutar exactamente cuando eso suceda.
En este caso, lo que queremos es que desaparezca el objeto contra el que ha chocado
la pelota. Podremos hacer referencia a este objeto a travs del parmetro
otro
incluido
en el bloque cuando spritePelota.EnColisinCon otro ejecutar que hemos definido.
Ahora vamos a utilizar un nuevo tipo de recurso, un bloque que no habamos usado
todava. Este bloque se encuentra dentro del cajn Cualquier componente /
CualquierSpriteImagen . La diferencia entre este cajn y los que hemos abierto antes
es que los bloques contenidos aqu nos permitirn definir acciones que harn
referencia a diferentes objetos del mismo tipo. En este caso har referencia a objetos
del tipo
SpriteImagen, como son nuestros cinco enemigos.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
57
Usaremos el parmetro otro del bloque mostaza que hemos aadido antes para
indicar a qu objeto concreto queremos referirnos, y estableceremos a falso el valor
de la propiedad
Visible
del objeto, para que desaparezca del escenario.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
58
Cada vez que la pelota choque con un objeto, tendremos que restar 1al nmero de
objetos restantes. Cuando la variable v_objetos_restantes sea
0
, significar que el
jugador ha recogido todos los objetos, y el juego habr terminado.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
59
Podemos aadir un chivato debajo del escenario para saber cul es el contenido de la
variable
v_objetos_restantes . As sabremos si nuestro juego est gestionando
correctamente esta variable tan importante.
Tenemos que acordarnos de eliminar cualquier chivato que hayamos utilizado antes de
hacer la versin final del programa.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
60
En el primero de ellos tendremos que reubicar los objetos, y reiniciar todas las
variables que tiene que manejar el juego. Es decir, dejar las cosas listas para empezar a
jugar.
Habr que hacer una llamada al procedimiento Iniciar_juego dentro del bloquec
cuando Screen1.Inicializar ejecutar
, que ahora quedar as.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
61
En el bloque
cuando.Cada_segundo.Temporizador ejecutar indicaremos que reste 1 a
la variable
v_segundos_restantes
, y que lo muestre en un nuevo objeto de tipo
Etiqueta
que llamaremos
E_segundos_restantes
.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
62
Haciendo clic entre las comillas podremos definir el texto que se mostrar.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
63
Extraamente, ese texto no aparece por mucho tiempo en la pantalla. Por qu?
Si ponemos mucha atencin veremos que el texto aparece, pero slo durante un
segundo. Esto se debe a que el programa comprueba en el bloque
cuando.Cada_segundo.Temporizador ejecutar si la variable Segundos_totales vale 0,
pero esto slo se cumple durante un segundo, porque el tiempo sigue contando, as
que rpidamente el valor de v_segundos_restantes pasa a ser -1
, que es el valor que
se obtiene cuando a 0 le restamos 1. El programa sigue ejecutndose, y en la siguiente
ejecucin del bloque cuando.Cada_segundo.Temporizador ejecutar volver a escribir
el valor del contador de segundos encima del texto.
Congelando el tiempo
Para evitar esto tenemos que hacer que
Cada_segundo
deje de contar, es decir, que el
bloque cuando.Cada_segundo.Temporizador ejecutar deje de ejecutarse. Esto se
consigue dndole el valor falso a la propiedad TemporizadorHabilitado del
componente Cada_segundo.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
64
No ser difcil crear el cdigo necesario para poner el juego de nuevo a funcionar,
porque hemos sido organizados, y hemos creado los procedimientos adecuados. Slo
tendremos que indicarle al programa que ejecute el procedimiento Iniciar_juego
cuando el jugador pulse el botn
Reiniciar
.
Un ltimo detalle
Veremos que cuando iniciamos de nuevo el juego ya no aparecen los objetivos que hay
que aplastar, a pesar de que s vuelve a tener el valor 5 la variable
v_objetos_restantes . Por qu? Por favor, revisa el programa intenta averiguarlo
antes de ver la explicacin.
Vamos a hacer esto utilizando un bloque disponible dentro de los cajones de cada
enemigo. Usaremos el bloque verde oscuro que sirve para establecer el estado del
atributo
Visible
. Podemos hacer lo mismo para todos los enemigos copiando el bloque
del primero y cambiando el nombre del enemigo al que se refiere en cada caso.
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
65
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.
Gua de iniciacin a APP INVENTOR (2015)
66
Comentarios finales
Para un creador de aplicaciones, el ordenador es una herramienta, un recurso, que le
permite desarrollar sus ideas, hacerlas realidad, para que otros las utilicen. Para
conseguirlo tan solo se necesita aprender uno de los lenguajes que el ordenador
entiende. Si practicas con continuidad, antes de lo que imaginas podrs desarrollar
programas que hagan casi todo aquello que se te ocurra.
Ral C. (@raulconm)
raulconm@gmail.com
Esta obra est licenciada bajo la Licencia Creative Commons Atribucin 4.0 Internacional. Para ver una
copia de esta licencia, visita http://creativecommons.org/licenses/by/4.0/.