Crea tu primera App con App Inventor: interfaz, programación básica y componentes

APP INVENTOR, PARTE I
DISEÑO DE APP Y MICROLEARNING

EDUCATIVO
Los primeros pasos: la interfaz, la programación, botones y cuadros
App Inventor, parte I
INDICE
INTRODUCCIÓN .................................................................................................................................. 3
OBJETIVOS ......................................................................................................................................... 4
CONOCIMIENTOS PREVIOS ................................................................................................................. 5
1. PRIMEROS PASOS CON APP INVENTOR .......................................................................... 6
1.1 ENTRANDO POR PRIMERA VEZ EN APP INVENTOR ..................................................................... 7
2. LA INTERFAZ DE DISEÑO .................................................................................................... 9
2.1 BARRA DE HERRAMIENTAS ....................................................................................................... 10

2.2 EL EMULADOR ........................................................................................................................... 13
3. INTERFAZ DE PROGRAMACIÓN ........................................................................................ 15
3.1 BLOQUE DE CONTROL ............................................................................................................... 15

3.2 BLOQUE DE LÓGICA .................................................................................................................. 16
3.3 BLOQUE DE MATEMÁTICAS ....................................................................................................... 17
3.4 BLOQUE DE TEXTO .................................................................................................................... 17
3.5 PRIMERA PROGRAMACIÓN SENCILLA ........................................................................................ 17
4. TRABAJANDO CON CUADROS DE TEXTO, IMÁGENES, ICONOS… ............................ 20
4.1 SALTOS DE LÍNEA EN LOS CUADROS DE TEXTO ........................................................................ 20

4.2 ¡TODO NO ENTRA EN UNA SOLA PANTALLA! .............................................................................. 21
4.3 AÑADIR MÁS PANTALLAS ........................................................................................................... 22
4.4 ICONOS E IMÁGENES ................................................................................................................. 22
4.5 ¿FORMULARIOS DENTRO DE LA APP? ...................................................................................... 23
CONCLUSIONES ........................................................................................................................... 24
BIBLIOGRAFÍA .............................................................................................................................. 25
Diseño de App y microlearning educativo Página 2 de 25

INTRODUCCIÓN
Ahora que tenemos ciertas nociones teóricas sobre el microlearning y

conocemos lo que debemos cumplir para trabajar con microcontenidos vamos
a ponerlo en práctica acercándonos a la creación de Apps para educación.
El software que usaremos a lo largo de las unidades dos y tres será “App
Inventor”, ¿tienes ya tu cuenta a mano?
Los dispositivos móviles forman parte de nuestra vida y en la actualidad hasta

podemos llevar un wearable que nos ayude a controlar el sueño, el peso, el
ritmo cardíaco o nos informe de cuántos kilómetros hemos recorrido. Si
partimos de la base de que la educación debe ofrecerse siempre
contextualizada y de manera significativa los docentes no podemos quedarnos
a un lado, debemos saber cómo integrar estas corrientes en nuestra área y
crear los recursos necesarios. Sólo así evitaremos alguno de los
inconvenientes que se exponían en la unidad uno sobre el uso de dispositivos
móviles en el aula.

OBJETIVOS
Con el estudio de esta unidad conocerás:
 Qué es App Inventor.
 Cómo comenzar a usarlo sin necesidad de tener un dispositivo Android.
 Hacer una programación sencilla para ejecutar sumas.
 Configurar botones, etiquetas y cuadros de texto

CONOCIMIENTOS PREVIOS
Para estudiar esta unidad serán necesarios conocimientos mínimos de

informática, búsqueda de recursos en la red, instalación de software en el
equipo pc/mac/Linux y disponer de un dispositivo móvil Android, opcional.

1. PRIMEROS PASOS CON APP INVENTOR
App Inventor fue creada por Google en 2010, pero a finales de 2011 la
empresa dejó de ofrecer soporte y pasó a manos del Massachusetts Institute of
Technology. Al igual que nos sucedió anteriormente al trabajar con la
programación por módulos, concretamente con “scratch”, es el MIT el
responsable de seguir con su desarrollo.
¿Qué es App Inventor?
Es una herramienta web, es decir, la tenemos totalmente operativa en la nube,

y además es gratuita, sirva para crear aplicaciones para dispositivos Android.
Al ser online podremos crear nuestras primeras aplicaciones en el navegador
sin necesidad de recurrir a instalar nada en nuestro dispositivo móvil… de
momento. Su finalidad es generar un paquete de comandos y recursos que el
dispositivo móvil pueda ejecutar y mostrar en pantalla lo que queramos. Entre
sus opciones se encuentra el poder controlar el GPS, los acelerómetros o los
sensores de luminosidad de la pantalla, es decir, podremos generar unas
actividades muy interactivas a la vez que trabajar con otras aplicaciones.
Si podemos controlar el GPS desde nuestra aplicación,

podemos conocer en todo momento la geolocalización
en la que estamos, es decir las coordenadas.
¿Podríamos trabajar con Google Maps, por ejemplo,
para desarrollar competencias afines?

¿Necesito un dispositivo Android?
No necesariamente porque App Inventor nos da la opción de usar un

“emulador”, pero si tenemos uno podremos usarlo sin problema de dos formas:
por wifi y por cable. Pero esto no será necesario hasta que vayamos a hacer
algunas pruebas en vivo o comprobar finalmente el resultado de nuestra App.
MIT recomienda la interconexión del móvil con App Inventor

a través del wifi. Si estamos haciendo pruebas en vivo tener
el cable conectado al móvil no ayudará a poder moverlo,
girarlo u observar el GPS mientras nos desplazamos.
1.1 Entrando por primera vez en App Inventor
Una vez en nuestro navegador vamos a ir a https://appinventor.mit.edu/

para localizar el acceso: “Crea aplicaciones”, de color naranja. El registro lo
haremos con nuestra cuenta de Google.
Seguidamente debemos aceptar los “Términos de servicio” y nos aparecerá un

banner avisando de la versión, lo aceptamos y llegaremos a un segundo baner
que nos da la bienvenida y nos ofrece cinco opciones.

1. “HELLO PURR”
2. TALK TO ME
3. TRANSLATE APP
4. START A BLANK PROJECT: opción que vamos a elegir
5. CLOSE
Te animo a que conozcas las tres primeras opciones ya

que contienen imágenes, botones, audios… que nos irán
dando una idea de qué podemos esperar de esta
herramienta.
Vamos a elegir proyecto nuevo, como nombre el que se prefiera, pero siempre
sin espacios, tildes o ñ: “primer_proyecto” puede ser un buen nombre para
comenzar.
¿Está en inglés? Claro, es el MIT! Aunque siempre podemos modificarlo para

seguir practicando idiomas (arriba a la derecha junto a tu correo electrónico), lo
vamos a usar en castellano. Nos vamos a encontrar con un espacio de trabajo
con cinco apartados.

2. LA INTERFAZ DE DISEÑO
Como hemos visto en la imagen anterior la primera interfaz se divide en:
 Paleta: para elegir botones, sensores…

 Visor: para ver la apariencia del diseño
 Componentes: muestra un listado de lo usado desde la paleta.
 Medios: listado de archivos multimedia usados: música, vídeos,
imágenes…
 Propiedades: muestra todas las propiedades que podemos modificar de
un componente ya añadido
Pero realmente estamos ante parte de la interfaz gráfica que vamos a usar, en
“diseñador”, ya que también tenemos la opción “bloques” para la programación
por bloques.
En “diseñador” vamos a elegir los componentes que aparecerán en la

aplicación, como vemos son varios los menús que tiene: interfaz de usuario,
disposición, medios, dibujo y animación, maps, sensores, social,
almacenamiento…
Vamos a analizar las opciones del primero de ellos: interfaz de usuario
 Botón: es un botón que detecta que lo hemos pulsado

 Casillas de verificación: activa un evento al hacer clic y verificarla
 Selector de fecha: es un botón que abrirá una ventana para elegir fecha
 Imagen: para mostrar una fotografía
 Etiqueta: sirve para mostrar un texto

 Selector de lista: es un botón que al pulsarlo nos va a mostrar un

desplegable con diferentes líneas de texto para que se elija una
 Visor de lista: botón que al pulsarlo mostrará un listado
 Notificador: se usa para mostrar alertas, mensajes
 Campo de contraseña: similar al campo de texto pero sin mostrar lo
que se escribe
 Deslizador: barra de progreso que se puede desplazar
 Desplegable: abre una ventana emergente que contiene una lista de
elementos
 Switch: un interruptor similar al casilla de verificación pero con dos
indicaciones: activado/verdadero y desactivada/falso
 Campo de texto: campo para mostrar información en diferentes líneas
 Selector de hora: botón que permite elegir una hora
 Visor Web: para ver una página web sin ser un navegador, útil para
insertar un formulario Google, por ejemplo.
2.1 Barra de herramientas
Mi recomendación siempre que nos acerquemos a una nueva herramienta es

“tocarlo todo”, para ver qué características tiene por defecto, qué color puedo
poner o qué tamaño es el más adecuado. Para añadir cualquier elemento de la
interfaz de usuario al visor debemos pinchar y arrastrar, pero veremos que no
nos va permitir colocarlo en cualquier lugar de la pantalla.
En el siguiente vídeo vamos a usar varios botones que tendrán como finalidad
cambiar el color y podremos ver cómo colocarlos en otros lugares de la
pantalla, cambiar su texto, forma, color… y generar una programación para
interactuar con cada botón.

Hemos visto durante el vídeo la interfaz de diseñador y nos hemos acercado

brevemente a la de bloques. Vamos a conocer ahora la barra de herramientas
superior.
Cuatro van a ser los menús más usados:
Proyectos Conectar Generar Settings
Disable
APP generar
Mis proyectos AI Companion project
QR
autoload
Proyecto APP guardar Enable

Emulador
nuevo APK OpenDyslexic
Importar
USB
proyecto
Guardar
Refresh
proyecto
Punto de Reiniciar
control conexión
Exportar
Vamos a detenernos en los más interesantes y que requieren de explicación:
 Proyectos

o Importar desde repositorio: muy útil para comenzar con una

plantilla que conozcamos, en la web de App inventor hay
actualmente 34 millones disponibles…
o Punto de control: añade una copia de seguridad en el momento
de usarlo, si en adelante el proyecto deja de funcionar podemos
volver a ese punto, similar a los puntos de restauración del
sistema operativo.
 Conectar
o AI Companion: genera un QR para poder ver el resultado de la
aplicación en un dispositivo con el software instalado
o Emulador: lo veremos en el siguiente apartado
o USB: para conectar un móvil Android por cable
 Generar
o App con QR: si escaneamos el código podremos descargar la
aplicación ya empaquetada para instalar en el móvil
 Settings
o Enable OpenDislexyc: nos modifica el aspecto del texto para
adaptarlo a la dislexia, muy útil si tenemos alumnado con esa
necesidad.
La barra de menú superior se completa con la ayuda, en ella podremos

encontrar una biblioteca que nos mostrará diversos temas de ayuda como un
listado de ejemplos para usar los componentes o guías para mostrar al
alumnado mediante infografías, en inglés, pero que podremos usar como base
para las indicaciones.

2.2 El emulador
Ahora que hemos añadido algunos botones a nuestra app queremos ver
cómo va quedando, si lo vamos a ver a través del emulador puede que nos
encontremos con este mensaje al pulsar sobre “emulador” en el menú
“conectar”.
http://appinventor.mit.edu/explore/ai2/setup-emulator
En la URL podemos encontrar el acceso a la descarga del software aiStarter

necesario para activar el emulador. Como decíamos anteriormente un
emulador sirve para recrear en nuestro equipo el aspecto de la app sin
necesidad de conectar el dispositivo móvil.
Tras descargar el programa deberemos iniciar su ejecución en modo

administrador, para ello solamente tenemos que buscar la descarga y
pinchar con el botón derecho para indicarle “Ejecutar como administrador”,
generalmente la segunda opción del menú emergente.
No hay que asustarse si vemos una ventana como esta.
Son las líneas de código necesarias para que el emulador se active. Tras
instalarlo podemos ejecutarlo y que quede en segundo plano, ya que es
necesario para poder ver los resultados a través del emulador.
Si ya tenemos un diseño y queremos ver su resultado deberemos activar el

emulador en el menú “conectar—emulador”, y esperar un poco hasta que
en pantalla nos aparezca un diseño similar a un móvil con algunos botones.
Es posible que nos indique la necesidad de actualizar bien desde la pantalla
de ese móvil virtual o en nuestro equipo, seguimos los pasos que nos
indiquen hasta que veamos nuestra app en la pantalla del móvil emulado.

En la URL de descarga existen indicaciones de cómo procedes con esas

actualizaciones necesarias.
Tras finalizar todo el proceso veremos un móvil sobre nuestra pantalla de

App Inventor.
Por defecto lo que acabamos de hacer no estará activo tras reiniciar el

equipo por lo que siempre que queramos usar el emulador debemos ir a
nuestros programas, localizar la carpeta “MIT App Inventor tools” y ejecutar
aiStarter.
Si no lo haces, no te preocupes porque al intentar activar el emulador te

avisará de que aiStarter no se está ejecutando.
Tras ejecutarse asiStarter será el turno de “companion” y ya podremos ver

nuestra app funcionando.

3. INTERFAZ DE PROGRAMACIÓN
Como has podido ver en el vídeo la parte de programación es independiente de

la de diseño, pero sí que nos reconoce lo que ya hemos diseñado, como los
botones o cuadros de texto, de manera que facilita el comenzar con la
programación asignando así un comportamiento lógico a la aplicación.
Los bloques de App Inventor ayudan visualmente con la programación ya que

eliminan prácticamente la dificultad inherente a cualquier lenguaje de
programación, aunque con arduino sí que aprendimos a programar sin ayuda
visual, la realidad es que nuestro alumnado agradecerá esta ayuda visual por
bloques.
App Inventor está basado en la programación orientada a eventos, es decir,

vamos a configurar qué hará la aplicación en base a las acciones que ejecute
el usuario de la app.
Vamos a ver detenidamente cada una de las opciones que nos ofrece para
comenzar a programar en el siguiente apartado con botones y cuadros de
texto.
Como ya sabemos las funciones son bloques de código que desarrollamos

para que produzcan un resultado.
3.1 Bloque de control
Lo primero que nos encontramos es “si…entonces…” para probar una

condición dada, solamente ejecutará la secuencia que indiquemos si es
verdadero, en caso contrario no hará nada, ignorará esa programación.

“si…entonces… si no…” similar al anterior pero ahora además podemos indicar

qué hacer cuando la condición no se cumpla. Es decir, cuando la condición se
cumple ejecuta la primera secuencia, pero si detecta que no, que es falso,
correrá el segundo código.
Y tenemos una tercera posibilidad: “si…, entonces, si no, si… entonces”. Si es

verdadero ejecuta el primer bloque, si es falso comprobará la segunda
condición dada, en caso de ser también falsa ignorará este bloque.
La siguiente secuencia nos ejecuta los bloques que están dentro de los valores
indicados. En el siguiente, por cada elemento variable que haya en una lista
nos puede ejecutar una secuencia de comandos.
3.2 Bloque de lógica
Cierto es sinónimo de verdadero, para “falso” no hacen falta indicaciones;

mientras que “no” es la negación lógica: devolverá falso si la entrada de un
valor era cierta, y verdadero si la entrada era falso.
En primer lugar tenemos la posibilidad de comprobar si dos argumentos son

idénticos o no, bien numéricos (1=1’0, por ejemplo) o bloques de texto
(camióncamión).
También nos puede servir para comparar dos listas de elementos idénticos
pero que estén en distinto orden, por ejemplo.

3.3 Bloque de matemáticas
Podemos usar cualquier número y agregarle decimales, bastará con pinchar

encima del número para modificarlo. Tenemos la opción de usar mayor, menor,
igual… para comparar dos valores, si no se cumple nos devolverá “falso”. En
este bloque es donde vamos a localizar todas las operaciones aritméticas,
raíces, potencias o trigonometría y en el que tendremos que centrarnos para
superar la actividad la tarea práctica de la unidad.
3.4 Bloque de texto
La primera opción que nos ofrece es la “cadena de texto”, todo lo que esté ahí
escrito será un objeto de texto para App Inventor. Podemos unir varias
entradas de texto en una sola con la segunda opción, o contar el número de
caracteres introducidos en “longitud”, útil si deseamos que escriban un número
concreto de palabras.
La primera ficha la usaremos para confirmar si hay o no texto, si realmente no

se ha escrito nada devolverá verdadero porque está vacío. El comparador de
textos nos sirve que compare dos cadenas de texto y examine si son iguales,
mayores o menores a la segunda.
3.5 Primera programación sencilla
Vamos a generar una App que haga sumas, para ello diseñamos tres campos
de texto y tres etiquetas indicando qué se debe colocar en cada uno, para
terminar agregando un botón que ejecutará la programación. Como vemos en

las siguientes imágenes la parte visual es fácil de crear, no debería llevarnos

más de unos 5 minutos.
Una vez tenemos la parte de “diseñador” completa, nos dirigimos a “bloques”

para realizar la programación del botón “suma”. El primer paso será pinchar en
el botón para desplegar todas las opciones que nos ofrece App Inventor, y
elegimos la primera.
Porque lo que queremos es indicarle que al hacer clic en el botón ejecute una
suma, para ello lo primero es decirle dónde debe aparecer esa operación, por
lo que seguimos con el campo de texto 3.
Al agregar la siguiente ficha nos aparece el aviso de error, el aspa roja, porque
requiere de otras fichas para poder ejecutarse, simplemente es un aviso. Como
vemos, es necesario modificar la ficha para elegir “texto” y finalmente le
pedimos que sume los otros dos campos de texto.
Seguidamente en el bloque “matemáticas” hemos localizado la ficha para

sumar y dentro añadido los dos bloques de texto. Es importante indicar que los
campos de texto 1 y 2 contienen texto, por defecto al agregarlo indicará “color
de fondo”.
Tras activar el emulador podremos ver el resultado final.
Y comprobar si efectivamente suma correctamente o no.

Como podemos ver en las imágenes anteriores los campos de texto muestran
una pista antes de escribir en ellos, esa opción es recomendable para campos
en los que queramos solamente números, por ejemplo, ya que si incluimos
texto la programación nos devolverá un error. Para que no se pueda añadir
texto, a pesar de que lo hayamos avisado, tenemos que activar la casilla
“Sólonumeros”.
Otra de las opciones que nos encontramos al configurar un “campo de texto” es

la posibilidad de que conforme se vaya escribiendo en la pantalla el texto haga
sus propios saltos de línea para no ocupar más espacio que la pantalla. En el
siguiente apartado indicaremos qué hacer para que un campo “etiqueta” sea
multilínea y poder escribir lo que necesitemos, sin embargo los campos de
texto sí que facilitan la casilla de “multilínea”, por lo que sólo tenemos que
activarlo sin necesidad de conocer nada más.

4. TRABAJANDO CON CUADROS DE TEXTO, IMÁGENES,

ICONOS
Para terminar la segunda unidad vamos a presentar algunos de los problemas

más habituales cuando se comienza a usar App Inventor
4.1 Saltos de línea en los cuadros de texto
Posiblemente al poner en práctica los ejemplos anteriores hayas querido

escribir varias líneas de presentación antes de la suma y el resultado visual ha
sido un poco desastre…
Por norma los cuadros de texto no hacen salto de línea, en las propiedades al
escribir la información sí que vemos nuestro texto en varias líneas pero no así
en el resultado.
¿Cómo lo hacemos?
Bien sencillo, solamente necesitamos recordar incluir “\n” conforme escribimos

para indicar que se haga un salto de línea.
Sin salto de línea
Con salto de línea.

4.2 ¡Todo no entra en una sola pantalla!
Es posible que hayamos creado muchos campos de texto y etiquetas porque

queramos trabajar con sumas de 5-6 sumandos… y el resultado haya sido que
el botón suma ha desaparecido de la pantalla… y claro la solución no es añadir
más pantallas.
Para que eso no nos suceda debemos activar en las propiedades de la pantalla
“screen1” la opción “enrollable” para que nos aparezca la barra lateral y poder
movernos por la pantalla sin problema y sobre todo sin perder parte de la
información.
Recuerda activar siempre la opción de “enrollable” en

las propiedades de la “screen1” y en sucesivas
pantallas que vayamos a usar en nuestra app.

4.3 Añadir más pantallas
Es posible que no queramos mostrar toda la información en la misma

pantalla y queramos añadir una segunda o tercera para organizar mejor el
contenido visual. Como veíamos en el vídeo de la unidad para añadir una
pantalla solamente tenemos que pinchar en “Añadir ventana” y ponerle
nombre, por defecto será “Screen2”.
¿Pero cómo alterno de pantalla en el emulador?
Para avanzar en las pantallas no tenemos ningún botón físico en el móvil

Android, para retroceder sí que existe. Por lo tanto deberemos programar
cómo avanzar de la pantalla 1 a la 2. Lo haremos con un botón que deberá
tener una programación sencilla.
4.4 Iconos e imágenes
Si necesitamos insertar en nuestra app alguna imagen o icono es necesario

que sepamos lo siguiente:
 Iconos: el tamaño de un icono debe ser siempre de 48x48 píxeles y

recomiendo usar los que podemos encontrar en
http://www.iconarchive.com/
 Imágenes: las fotografías que tomamos con nuestros móviles van a
tener un tamaño de, al menos, 1200x800 y un peso de más de 2
Mb, algo que hará inviable nuestra App. Una aplicación debe pesar
poco, cargar rápido y poder verse en la pantalla. Esto significa que
todas las imágenes que vayamos a usar deben ser editadas para
disminuir el tamaño y el peso, cualquier editor gráfico no puede
servir, yo uso Gimp, gratuito y con muchas herramientas:
http://www.gimp.org.es/

4.5 ¿Formularios dentro de la App?
Es posible que necesitemos mostrar un formulario de Google en una de las

pantallas de la App. Anteriormente hemos indicado que tenemos el
“VisorWeb” para introducir una URL dentro de la pantalla a modo de frame
embebido, similar a lo que hacemos cuando copiamos el código html de
Youtube para ver un vídeo en nuestro blog, aula virtual…
El “VisorWeb” tiene un funcionamiento sencillo, lo configuramos y le

indicamos la URL, no hay más. Pero si la URL es la de un formulario nos va
a devolver el siguiente error desde el emulador.
Para solucionar este problema debemos usar “ActivityStarter” de la paleta

conectividad. Como acción le indicaremos “android.intent.action.VIEW” y como
URL la del formulario.

CONCLUSIONES
La herramienta App Inventor es accesible y muy potente, hasta el momento

solamente hemos trabajado la superficie. El potencial que nos ofrece para crear
aplicaciones didácticas es impresionante y debemos destacar su carácter
abierto, gratuito y con programación por bloques, algo que nos ayudará a que
sean finalmente nuestros propios alumnos/as los que den sus primeros pasos
en la creación de Apps.
La característica que más gustará el clase será su aspecto visual, el que

nosotros hayamos configurado… y la facilidad para usarlo al poder acceder a la
App desde un código QR, por ejemplo.
Aunque requiera un notable esfuerzo por nuestra parte y una considerable

cantidad de tiempo para crear las Apps, estoy convencido que los resultados
merecen el trabajo.

BIBLIOGRAFÍA
 Almaraz Menéndez, F., López Esteban, C. & Maz Machado, A. (2015).

From the Medialab to the classroom: the process of technology-based
innovation in education illustrated with an App Inventor project. En
EDULEARN15 Proceedings (pp. 6893-6897). Barcelona: International
Academy of Technology, Education and Development (IATED).
 Camacho, M. (2011). Aproximación conceptual al m-learning: retos
pedagógicos y perspectivas de futuro. En Camacho, M. y Lara, T.
(Coord.), M-Learning en España, Portugal y América Latina. Monográfico
SCOPEO, 3, 39-44. : Salamanca: Servicios de publicaciones de la
Universidad de Salamanca.
 CISCO (2013). Informe Cisco Visual Networking Index: Global Mobile
Data Traffic Forecast
 Howe, N., & Strauss, W. (2003). Millennials Go to College: Strategies for
a New Generation on Campus. Washington, DC: American Association
of Collegiate Registrars and Admissions Officers.

Crea tu primera App con App Inventor: interfaz, programación básica y componentes

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Crea tu primera App con App Inventor: interfaz, programación básica y componentes

Cargado por

Copyright:

Formatos disponibles

APP INVENTOR, PARTE I

DISEÑO DE APP Y MICROLEARNING

1. PRIMEROS PASOS CON APP INVENTOR .......................................................................... 6

1.1 ENTRANDO POR PRIMERA VEZ EN APP INVENTOR ..................................................................... 7

2. LA INTERFAZ DE DISEÑO .................................................................................................... 9

2.1 BARRA DE HERRAMIENTAS ....................................................................................................... 10

3. INTERFAZ DE PROGRAMACIÓN ........................................................................................ 15

3.1 BLOQUE DE CONTROL ............................................................................................................... 15

4. TRABAJANDO CON CUADROS DE TEXTO, IMÁGENES, ICONOS… ............................ 20

4.1 SALTOS DE LÍNEA EN LOS CUADROS DE TEXTO ........................................................................ 20

Diseño de App y microlearning educativo Página 2 de 25

Ahora que tenemos ciertas nociones teóricas sobre el microlearning y

Los dispositivos móviles forman parte de nuestra vida y en la actualidad hasta

Diseño de App y microlearning educativo Página 3 de 25

Con el estudio de esta unidad conocerás:

 Qué es App Inventor.

 Cómo comenzar a usarlo sin necesidad de tener un dispositivo Android.

 Hacer una programación sencilla para ejecutar sumas.

 Configurar botones, etiquetas y cuadros de texto

Diseño de App y microlearning educativo Página 4 de 25

Para estudiar esta unidad serán necesarios conocimientos mínimos de

Diseño de App y microlearning educativo Página 5 de 25

1. PRIMEROS PASOS CON APP INVENTOR

¿Qué es App Inventor?

Es una herramienta web, es decir, la tenemos totalmente operativa en la nube,

Si podemos controlar el GPS desde nuestra aplicación,

Diseño de App y microlearning educativo Página 6 de 25

¿Necesito un dispositivo Android?

No necesariamente porque App Inventor nos da la opción de usar un

MIT recomienda la interconexión del móvil con App Inventor

1.1 Entrando por primera vez en App Inventor

Una vez en nuestro navegador vamos a ir a https://appinventor.mit.edu/

Seguidamente debemos aceptar los “Términos de servicio” y nos aparecerá un

Diseño de App y microlearning educativo Página 7 de 25

4. START A BLANK PROJECT: opción que vamos a elegir

Te animo a que conozcas las tres primeras opciones ya

¿Está en inglés? Claro, es el MIT! Aunque siempre podemos modificarlo para

Diseño de App y microlearning educativo Página 8 de 25

Como hemos visto en la imagen anterior la primera interfaz se divide en:

 Paleta: para elegir botones, sensores…

En “diseñador” vamos a elegir los componentes que aparecerán en la

Vamos a analizar las opciones del primero de ellos: interfaz de usuario

 Botón: es un botón que detecta que lo hemos pulsado

Diseño de App y microlearning educativo Página 9 de 25

 Selector de lista: es un botón que al pulsarlo nos va a mostrar un

2.1 Barra de herramientas

Mi recomendación siempre que nos acerquemos a una nueva herramienta es

Diseño de App y microlearning educativo Página 10 de 25

Hemos visto durante el vídeo la interfaz de diseñador y nos hemos acercado

Cuatro van a ser los menús más usados:

Proyectos Conectar Generar Settings

Proyecto APP guardar Enable

Vamos a detenernos en los más interesantes y que requieren de explicación:

Diseño de App y microlearning educativo Página 11 de 25

o Importar desde repositorio: muy útil para comenzar con una

La barra de menú superior se completa con la ayuda, en ella podremos

Diseño de App y microlearning educativo Página 12 de 25

En la URL podemos encontrar el acceso a la descarga del software aiStarter

Tras descargar el programa deberemos iniciar su ejecución en modo

No hay que asustarse si vemos una ventana como esta.

Si ya tenemos un diseño y queremos ver su resultado deberemos activar el

Diseño de App y microlearning educativo Página 13 de 25

En la URL de descarga existen indicaciones de cómo procedes con esas