Manual de Usuario APPs_AppInventor-2023.pdf

LECCIONES PARA ENSEÑAR
A
LECCIONES
PARA
ENSEÑAR
PENSAMIENTO
COMPUTACIONAL
Y
PROGRAMACIÓN
APLICACIONES
MÓVILES
PENSAMIENTO
COMPUTACIONAL
Y PROGRAMACIÓN
APLICACIONES
MÓVILES

Bienvenidos a
Cuantrix es un programa de Fundación Televisa que busca generar equidad de
oportunidades a través de las Ciencias de la Computación para que cada año en
México un millón de niñas, niños y jóvenes aprendan a programar.
La programación como herramienta educativa resulta especialmente interesante y
divertida en muchos aspectos, ya que desarrolla diversas habilidades multidiscipli-
narias en los niños y niñas; como aprender a trabajar en equipo, fomentar la persis-
tencia y la creatividad. Aptitudes que los ayudarán a desarrollar su capacidad para
resolver determinados problemas y los fortalecerán en cualquier materia.
La creatividad, la sociabilidad y la comunicación entre los chicos se ve beneficiada
exponencialmente a través de diferentes recursos y herramientas que se utilizarán
para resolver problemas. Y todo esto gracias a la programación.
Acompaña a tus estudiantes en los contenidos Cuantrix y juntos preparemos a los
nuevos creadores tecnológicos, para que puedan pensar y diseñar el mundo del
futuro desde ahora.
Los materiales se han desarrollado en unión con Code.org, organización sin fines
de lucro que tiene como objetivo incentivar a los estudiantes a aprender sobre las
ciencias computacionales por medio de ejercicios de programación, a través de su
sitio web.
Los invitamos a ser parte de este esfuerzo en beneficio de cientos de miles de es-
tudiantes mexicanos, quienes transformarán su pensamiento para convertirse en
creadores de la tecnología que utilizan.

Introducción
¿Qué es el
La habilidad para tomar decisiones y resolver problemas depende en gran medida
del desarrollo del pensamiento lógico. Si mejoramos esta habilidad nuestra calidad
de vida y de quienes nos rodean pueden beneficiarse significativamente.
El objetivo del pensamiento computacional es desarrollar sistemáticamente las
habilidades del pensamiento crítico y la resolución de problemas con base en los
conceptos de la computación. Y sumar que las personas potencien y aprovechen
el poder que tienen las computadoras en la actualidad.
El pensamiento computacional es un proceso de solución de problemas que inclu-
ye, entre otras, las siguientes características:
• Organizar y analizar datos de forma lógica.
• Representar datos mediante abstracciones, tales como modelos y
simulaciones.
• Automatizar soluciones mediante algoritmos (pasos ordenados para lograrlo).
• Formular problemas para que las computadoras puedan solucionarlos.
• Identificar, analizar y desarrollar posibles soluciones a los problemas.
• Encontrar la combinación de pasos y recursos eficientes y efectivos.
• Entender los procesos para solucionar problemas en el mundo computacional
y convertirlos en soluciones.
Es importante preparar a los estudiantes para convertirse en pensadores compu-
tacionales, es decir, que entiendan la manera en la que las herramientas digitales
que tenemos hoy pueden ayudar a resolver problemas del mañana; para lograrlo,
sabemos que aprender a programar es el primer paso.
pensamiento computacional?
Índice
Lección
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
¿Qué es una aplicación? ...........................................................................................................................
Sistemas Operativos ........................................................................................................................
Sensores en dispositivos móviles ............................................................................................
Diseñemos nuestra app ..................................................................................................................
¿Qué es App Inventor? ............................................................................................................................
Conozcamos un emulador ....................................................................................................
Crea una aplicación para dibujar ..........................................................................................
¿Qué número estás pensando? Diseño de aplicación ....................................
¿Qué número estás pensando? Programación en bloques ..........................
Componentes Imagen y Pelota Parte 1 .....................................................................................
El movimiento de la pelota Parte 2 ..................................................................................................
¿Cuándo termina el juego? Parte 3 ..............................................................................................
Aplicación ¿Cómo me siento hoy? ...............................................................................................
Talk to me o Háblame ............................................................................................................................
Bola de nieve .........................................................................................................................................
Aplicación Bola mágica ............................................................................................................................
MAPAS .............................................................................................................................................................
Proyecto Integrador .......................................................................................................................................
16
20
25
30
36
45
60
73
81
92
99
117
127
136
144
153
168
177

Más que formar programadores, se trata de que nuestros es-
tudiantes sean capaces de transformar y resolver problemas
con más herramientas.
La programación es una herramienta implementada para que
nuestros estudiantes puedan comprender a profundidad el
entorno digital en el que viven y, de este modo, sean capaces
de contribuir en él con madurez y sentido crítico.
Aprendemos programación para expresarnos en lenguajes
propios de nuestro siglo, a interpretarlos y aplicarlos en sentido
crítico. Hay evidencias de que aprender a programar desde la
infancia mejora los resultados en exámenes de matemáticas,
refuerza el razonamiento y la resolución de problemas, tiene
un impacto positivo en la creatividad y en la respuesta emo-
cional; así como en el desarrollo de las habilidades cognitivas
y socioemocionales.
Por lo tanto, queremos programar para aprender, para expre-
sarnos, para comprender mejor los contenidos científicos y
tecnológicos, para perder el miedo a crear y compartir y para
que todos tengamos las mismas oportunidades de acceder a
una alfabetización propia del siglo XXI.
¿Por qué aprender a
programar en la escuela?
La tradición escolar de enseñanza en las TIC (Tecnología de la
Información y Comunicación) se ha centrado en el aprendizaje
de herramientas específicas de software, como Excel, Word, uso
de buscadores, etc., herramientas que fortalecen las destrezas
operacionales; sin embargo, es necesario fomentar habilida-
des, conocimientos y actitudes diversas: ser crítico y reflexivo
con el uso que hacemos de las tecnologías, conscientes de
sus posibilidades, riesgos, ser capaces de evolucionar y crear
con ellas.
Queremos fomentar una programación creativa que conecte
los intereses y gustos de los estudiantes con proyectos en los
que puedan ser protagonistas y se expresen en los mismos
lenguajes que están acostumbrados a consumir. Por esto, nos
apoyamos en diferentes herramientas, con y sin Internet.
Pretendemos que, por medio de la programación puedan tra-
bajar la creatividad, la expresión, el trabajo colaborativo y en
equipo, la comunicación, la modelización y resolución de pro-
blemas. A partir del trabajo metodológico, desarrollando un
proyecto a partir de una nueva idea, mediante la experimenta-
ción, perseverancia, manejo de emociones y otras habilidades
blandas del siglo XXI.

• Propiciar la reflexión acerca de la utili-
dad de los programas para representar
ideas y resolver problemas.
• Explorar el funcionamiento de las com-
putadoras que sirven, no sólo para eje-
cutar programas, sino para realizar lo
que el programa indique.
• Fomentar que los estudiantes diseñen
sus propios programas, de manera que
no se limiten a ser usuarios de aplica-
ciones realizadas por terceros.
• Interfaz gráfica
• Creación de aplicaciones
• Programación de aplicaciones
• Botones
• Sonido
El curso de Aplicaciones móviles promueve el reforzamiento
y aprendizaje de las habilidades CTIM (Ciencias, Tecnología,
Ingeniería y Matemáticas). Los estudiantes podrán aprender
los conocimientos teórico-prácticos acerca del uso, alcance
y programación de aplicaciones, integrando la tecnología, el
pensamiento lógico de programación y el desarrollo de pro-
yectos en su comunidad, como parte integral de la formación
académica.
Curso
Aplicaciones móviles
• Estimular la confianza de los alumnos
mediante el uso y la ejecución de pro-
gramas diseñados por ellos mismos.
• Promover la reflexión crítica y el trabajo
colaborativo a través de la detección y
corrección de errores de los programas
propios y ajenos.
• Trabajar con conceptos relacionados
con las ciencias de la computación para
desarrollar habilidades de pensamiento
computacional.
Propósitos
Generales
Contenidos
Escolares
• Acelerómetro
• Azar
• Imágenes
• Texto

¡Sin preocupaciones! La mayoría de nosotros nunca ha ense-
ñado informática, este cuadernillo está diseñado para llevarte
de la mano en las lecciones y proyectos que llevarás a cabo
con tus estudiantes.
A continuación, conocerás las plataformas que utilizarás en el
curso de Aplicaciones.
APP Inventor
A lo largo de las lecciones los estudiantes experimentarán sus
aprendizajes resolviendo retos de programación a través de la
plataforma APP Inventor. Es necesario registrarse como maes-
tro y como estudiante para la creación de aplicaciones.
Es necesario que cada estudiante tenga una cuenta Gmail porque App Inventor es un
trabajo conjunto entre Google y el MIT (Instituto Tecnológico de Massachusetts).
1
2
Configuración
Técnica
Abre el navegador para ingresar a AppInventor. OJO, tiene que
ser Google Chrome, Safari o Firefox. Internet Explorer aún no
es compatible con App Inventor.
Da clic en la primera opción que aparece al buscar “AppInventor”
o en su caso da clic en el enlace https://appinventor.mit.edu/.
Se abrirá la siguiente página:
3
4
5
Da clic sobre el botón Create Apps!
Si no has abierto sesión en Google, el navegador pedirá que lo
hagas ahora.

Al acceder a tu cuenta de Google, verás la página de AppIn-
ventor y te pedirá aceptar los términos de la página.
Acepta los términos con el botón que encontrarás en la parte
inferior.
6
7
8
9
Enseguida, AppInventor mostrará una pantalla de bienvenida,
da clic en el botón Continue
A continuación, aparecerá una pantalla para seleccionar un
tutorial o iniciar un proyecto nuevo.

14
Aplicaciones Móviles
15
Traducción de sitios
Algunas de las plataformas a utilizar pueden mostrarse de origen en el idioma in-
glés, para ajustarla al idioma español, realiza los siguientes pasos:
A través de Google Chrome,
accede a la plataforma deseada
Identifica la ventana emergente
en la parte superior derecha
1 2
Localiza el icono de traducción Da clic en la opción “español”
Estás listo para utilizar la plataforma
en español
3
5
4
Traducción de videos
En caso de consultar videos en otro idioma, es posible colocar subtítulos, sigue los
pasos a continuación:
• YouTube cuenta con un traductor automático que permite añadir subtítulos
Accede al video deseado Da clic en configuración y la
opción subtítulos
1 2
Selecciona traducción automática,
se desplegará una lista de idiomas
Selecciona el idioma español
3
5
4
Estás listo para reproducir el video
en español

16
17
¿Qué es una aplicación?
1
Lección
Fundamentos de pensamiento computacional y programación.
Una aplicación móvil se trata de un programa que puedes
descargar y abrir directamente desde tu teléfono o algún otro
dispositivo móvil, por ejemplo, una Tablet. Su principal objetivo
es hacernos el trabajo más fácil conteniendo en nuestros dis-
positivos; herramientas y accesorios que utilizamos en nuestra
vida cotidiana.
Descripción de los contenidos de pensamiento computacional y
programación necesarios para el profesor.
Para llevar a cabo las actividades con los estudiantes, se re-
comienda consultar previamente los recursos de la lección y
comprender qué es una aplicación móvil.
Actividades presenciales que realizará el profesor con su grupo para
la práctica de códigos y símbolos de la herramienta base.
Los estudiantes conocerán acerca de las aplicaciones y crearán
un cuadro de ventajas y desventajas y uso de las aplicaciones.
Objetivo
Identificar los principales usos, ventajas, desventajas y objetivos de
las aplicaciones móviles.
1
Habilidades
• Análisis y síntesis de
información
Contenido
• Concepto de App
Recursos
• ¿Qué es una APP móvil? video
• Libreta / hojas y pluma
Vocabulario
Aplicación móvil: Es un tipo de aplicación diseñada para ejecutarse en un disposi-
tivo móvil, que puede ser un teléfono inteligente o una tableta.
Apertura
Introducción
Para poder dar inicio a las actividades deberás leer la siguien-
te situación a los estudiantes:
Imagina que quieres crear una aplicación que sirva para difun-
dir información de interés con tus compañeros de clase, como
un periódico digital. Tus compañeros al descargar la aplicación
y registrarse, podrán acceder a la información de las noticias
más relevantes.
Pregunta detonadora
Realiza la siguiente pregunta a los estudiantes y escucha sus
respuestas. Recuerda que todas las respuestas son válidas.
¿Cómo imaginas que funcionaría esta aplicación? ¿En qué ca-
tegoría se clasificaría (estudio, entretenimiento, redes sociales)?

18
19
2
3
4
Desarrollo
Lluvia de ideas (¿Qué es? y ¿función de una app?)
Realiza una lluvia de ideas con los estudiantes, en el pizarrón,
pizarra electrónica, con post–it o incluso hojas; pide a los es-
tudiantes que coloquen todas las ideas que les vengan a la
cabeza acerca de “¿Qué es y cuáles son las funciones de una
aplicación móvil?”.
Una vez que todos los estudiantes coloquen sus ideas, realiza
una clasificación de ideas y juntas realizan una recapitulación
de la información y lleguen a una conclusión.
Recuerda a los estudiantes que no hay respuestas correctas o
incorrectas, simplemente ideas y opiniones que más adelante
comprenderán mejor.
¿Para qué sirve una app?
Presenta a los estudiantes el siguiente video “¿Qué es una APP
móvil?” (video), comparen y complementen la información re-
colectada de su lluvia de ideas.
Como complemento de información, comparte con los estu-
diantes lo siguiente:
No deben confundir las aplicaciones con las versiones para
dispositivos móviles de sitios en Internet. Por ejemplo Facebook
tiene un sitio en Internet y una versión para descargar en dis-
positivos móviles (aplicación).
Apps más conocidas
Continuando con el acercamiento e identificación de aplica-
ciones móviles, pide a los estudiantes que se agrupen en equi-
pos o parejas (esto dependerá de tu espacio o condiciones de
trabajo) y realicen una investigación de las aplicaciones más
utilizadas en México.
5
En caso de no poder realizar una investigación comparte a los
estudiantes la siguiente información acerca de las aplicacio-
nes actualmente más utilizadas en México:
1. TikTok
2. WhatsApp
3. Facebook
4. Prende tV
5. Instagram
Cierre
Como cierre de la actividad, solicita a los estudiantes realizar
un cuadro comparativo del uso, ventajas y desventajas de las
aplicaciones mostradas. Con el fin de identificar su funciona-
miento además de los beneficios les genera su uso.
Ejemplo:
Aplicación Principal uso Ventajas Desventajas
Reflexión
• Retomando las preguntas detonadoras, pregunta a los es-
tudiantes:
• Con la información vista a lo largo de la lección ¿cómo ima-
ginas que funcionaría esta aplicación y en qué categoría se
clasificaría?
•¿Consideras importante el uso de las aplicaciones?, ¿por qué?
Para finalizar, recuerda que el entregable de cada estudiante
para esta lección será el cuadro de ventajas y desventajas, así
como uso de las aplicaciones.
6. Shein
7. Spotify
8. Facebook Messenger
8. Mercado libre
8. Amazon

20
21
Sistemas Operativos
2
Lección
Un Sistema Operativo es el programa principal que se inicia al
encender un dispositivo electrónico, computadoras o dispo-
sitivos móviles, y se encarga de gestionar todos los recursos
del sistema informático, tanto de hardware que son las par-
tes físicas: almacenamiento, pantalla, teclado, etc., al mismo
tiempo que el software o programas, aplicaciones e instruc-
ciones, permitiendo así la comunicación entre el usuario y el
dispositivo.
comprender las principales funciones de un sistema operativo.
Los estudiantes conocerán acerca de los dos principales sis-
temas operativos móviles: iOS y Android.
Objetivo
Identificar las versiones del sistema operativo de un dispositivo
móvil.
1
Habilidades
•Análisis y síntesis de in-
formación
• Trabajo colaborativo
Contenido
• Concepto de
Sistema Operativo
Recursos
•Evolución de Android video
• Evolución de iOS video
Vocabulario
Sistema Operativo: Es el programa encargado de gestionar y administrar los re-
cursos de cualquier dispositivo electrónico.
Versiones: Son cada una de las actualizaciones y mejoras al sistema operativo,
suelen ir numeradas dependiendo el avance o cambios que los desarrolladores de
software les implementan.
IMEI: Es un número de identificación única de los teléfonos móviles, viene de las si-
glas en inglés: International Mobile Equipment Identity (Identificación Internacional
de Equipos Móviles).
Apertura
Introducción
Siempre vemos o leemos anuncios sobre los novedosos lanza-
mientos de dispositivos móviles al mercado y a veces creemos
necesitar esa nueva versión que acaba de salir ¿pero en reali-
dad es tan diferente a las versiones anteriores?

22
23
4
3
2
Preguntas detonadoras
¿Cómo determinan que teléfono inteligente es mejor que otro?
¿Cuáles son las mejores características de un teléfono inteli-
gente?
Desarrollo
Fabricante vs Desarrollador
Plática con tus estudiantes sobre las marcas de teléfonos inte-
ligentes, pídeles que escriban en el pizarrón, en su libreta o en
post-its, todas las marcas que puedan recordar, buscamos que
las respuestas vayan orientadas a: Motorola, Samsung, Huawei,
HTC, Xiaomi, iPhone, etc.
Pregúntales si además de teléfonos, esas marcas fabricantes
de tecnología producen algún otro tipo de dispositivos, y que
compartan con la clase sus conocimientos: licuadoras, televi-
siones, computadoras, lavadoras, audífonos, etc.
Ahora pregúntales que representa para ellos las siguientes pa-
labras: Windows, macOS, Linux, Microsoft, Apple, Google, Android
o iOS. Guíalos para que comprendan que estos son desarrolla-
dores de software y que algunos de estas palabras son preci-
samente Sistemas Operativos.
Sistemas operativos famosos
Presenta a los estudiantes los siguientes videos: Evolución de
Android video y Evolución de iOS video.
Comenta junto con tus estudiantes, puede ser a medida de
platica grupal o que cada estudiante escriba sus respuestas
en una hoja previo a compartirlas:
•¿Sabían que los “teléfonos inteligentes” tienen menos de 20
años de existencia?
•¿Cuáles son las características que sufrieron mayores cam-
bios a lo largo del desarrollo de ambos sistemas operativos?
•Notaron que las versiones de Android tenían nombre de dul-
ces o postres, ¿cuáles recuerdan?
•¿Qué ventajas y desventajas podrían tener ambos sistemas
operativos?
Conociendo mi dispositivo
Pregunta si tus estudiantes cuentan con teléfonos inteligentes,
si alguien no cuenta pide que se generen equipos, para que to-
dos puedan observar cómo acceder a la información del dis-
positivo, siempre y cuando el propietario del teléfono lo maneje.
Vamos a investigar que versiones, modelos y números de se-
rie son cada uno de los dispositivos que se tengan en el grupo
y hacer consciente a nuestros alumnos de la importancia de
conocer estos datos.
Para acceder a esta información generalmente se debe se-
guir el siguiente camino, sin importar la marca o el sistema
operativo:
• Menú “Configuraciones”
• Opción “Acerca del teléfono o dispositivo”
• Versión de Android o iOS
• Modelo del equipo
• IMEI
Les pediremos a los estudiantes que recaben esta información
en sus libretas, para identificar los modelos y versiones con las
que se cuentan en los dispositivos del grupo.
Finalmente, de manera grupal será importante que analicen
si hay dispositivos de versiones anteriores y si en realidad son
muy diferentes a las más actuales y que cada estudiante es-
criba su conclusión en su libreta.

24
25
5
Cierre
Reflexión
Retomando las preguntas detonadoras, pregunta a los es-
tudiantes:
• ¿Cómo determinan que teléfono inteligente es mejor que
otro?
• ¿Cuáles son las mejores características de un teléfono in-
teligente? Enumérenlas en grupo.
Para finalizar, recuerda que el entregable de cada estudiante
para esta lección será su conclusión respecto a las versiones
de sistemas operativos y dispositivos móviles.
Sensores en dispositivos móviles
3
Lección
Un teléfono inteligente (Smartphone en inglés), puede pen-
sarse como una minicomputadora y gracias a su sistema
operativo es capaz de ejecutar sus Aplicaciones en conjunto
con las características y sensores que contiene el equipo. Esto
nos permite como usuarios, utilizar los smartphones como re-
productores multimedia portátiles, cámaras digitales, video-
cámaras, dispositivos de navegación GPS, acceder y navegar
en páginas Web, ver, editar y compartir documentos, descar-
gar archivos y comunicarse con amigos y familiares a través
de mensajes de texto, chats y redes sociales.
Para que los dispositivos móviles logren realizar la gran can-
tidad de funciones con las que los usuarios día a día nos co-
nectamos, debemos comprender que cuentan con sensores
que les ayudan a identificar datos e información de nuestro
entorno. Algunos de estos son: lector de huellas dactilares,
acelerómetro, sensor de proximidad, luz ambiental, GPS, giros-
copio, lector de iris, sensor infrarrojo y agregaremos la tecno-
logía bluetooth.
comprender los conceptos de teléfono inteligente y sensores.
Los estudiantes conocerán los componentes inteligentes de
los dispositivos móviles y que datos obtienen con los sensores
que incluyen.

26
27
Habilidades
• Análisis y síntesis de in-
formación
Contenido
• Concepto de
Sensores
Recursos
• Sensores en Android video
• Actividad 2 Hoja de sensores
Vocabulario
Sensor: Es un dispositivo diseñado para captar un estímulo del entorno y traducir
esa información, en el ambito de la electrónica son capaces de medir variables físi-
cas como luz, temperatura, humedad, aceleración, etc y transformarla en una señal
eléctrica como voltaje, corriente o resistencia.
Permisos de aplicaciones: Cada vez que se instala una aplicación nueva, el sistema
operativo puede darles control sobre el teléfono y acceso a la cámara, el micrófono,
los mensajes privados, las conversaciones, las fotos y otras cosas. Los permisos de
aplicaciones aparecen la primera vez que una aplicación necesita acceder a hard-
ware o datos confidenciales en el teléfono o la tableta y suelen estar relacionados
con la privacidad.
Objetivo
Identificar los sensores e información que obtienen de un dispo-
sitivo móvil.
1
Apertura
Introducción
Cuando estamos en redes sociales, solemos encontrar videos
o publicaciones de nuestro interés. Pareciera que nuestro te-
léfono nos conoce a la perfección y siempre nos recomienda
exactamente lo que estamos buscando: Juegos, series o pelí-
culas nuevas, lugares de interés para visitar cerca de nuestra
casa o hasta cursos o deportes para aprender alguna nueva
habilidad.
Preguntas detonadoras
¿Nuestro dispositivo móvil acaso usa magia para leer nuestra
mente?
¿Cómo saben los dispositivos móviles dónde estamos geo-
gráficamente en el mundo?

28
29
3
Acelerómetro Lector de iris Cámaras
Barómetro Podómetro Luz ambiental
Pantalla táctil Magnetómetro Espectro de color
Giroscopio Proximidad Infrarrojo
GPS Ritmo cardiaco Bluetooth
Lector de huella Micrófono
2
Desarrollo
Sensores en nuestro teléfono
Presenta a los estudiantes el siguiente video: Sensores en An-
droid video.
Enlista los siguientes sensores y complementen la informa-
ción de los que no fueron presentados en el video:
Qué detectan los sensores?
En el cuerpo humano, sabemos que contamos con sentidos
que nos ayudan a entender nuestro entorno: vista, tacto, olfa-
to, gusto, oído, equilibrio y orientación. De manera similar los
sensores de los dispositivos móviles les ayudan a obtener in-
formación del entorno y la información que le proporciona su
usuario.
Haciendo una analogía con los sentidos humanos, ¿cómo cla-
sificarías los sensores de tus dispositivos? Las cámaras y sus
sensores de luz podrían tener la función de la vista y qué tal si
el micrófono fuera la analogía al sentido del oído.
Completa la relación de columnas entre “Sensor - Magnitud –
Sentidos” con todos los sensores que conocemos hasta ahora,
apoyándose de la Actividad 2 Hoja de sensores.
Cada vez que se instala una aplicación, el Controlador de Apli-
caciones genera solicitudes de permisos de aplicación.
El controlador de permisos es una parte del sistema operativo
que indica a las aplicaciones a qué pueden y no pueden ac-
ceder. Cuando instala una nueva aplicación, el controlador de
permisos es el que le da la opción de permitir o denegar los
permisos para esa aplicación.
Algunos de los permisos que se solicitan son: Permiso del
usuario para acceder a la cámara del dispositivo antes de
poder hacer fotos, la supervisión de su ubicación, el almace-
namiento de datos, el envío y la recepción de llamadas y tex-
tos, la lectura de datos de registro confidenciales o el acceso
a sus contactos, su calendario o su historial de navegación.
4
Cierre
Reflexión
Retomando las preguntas detonadoras, pregunta a los
estudiantes:
• ¿Nuestro dispositivo móvil acaso usa magia para leer nues-
tra mente? La respuesta es no, pero definitivamente tiene el
permiso para acceder completamente a la información que
realizamos cuando lo usamos y también a la de nuestro en-
torno.
• ¿Cómo saben los dispositivos móviles dónde estamos geo-
gráficamente en el mundo?
Ahora sabemos que gracias al sistema GPS, y sensores como
el barómetro y la brújula.
Para finalizar, recuerda que el entregable de cada estudian-
te para esta lección será la hoja de la Actividad 2, que cada
uno respondió.

30
31
Diseñemos nuestra app
4
Lección
Las apps tienen diferentes elementos que nos permiten rea-
lizar actividades e interactuar con la app, como: registrarnos,
conectar las pantallas que hemos creado, movernos por las
distintas pantallas y reproducir recursos audiovisuales; estos
elementos son conocidos como la interfaz gráfica.
Toda aplicación debe ser capaz de tener un flujo de informa-
ción entre sus pantallas por medio de la interacción del usua-
rio para poder cumplir con su propósito de facilitar una tarea
al realizarla en un dispositivo digital.
Para llevar a cabo las actividades con los estudiantes, consul-
ta previamente los recursos de la lección para la comprensión
y transmisión de los aprendizajes acerca de la interfaz gráfica
y el flujo de información en una APP.
Los estudiantes desarrollarán un boceto de una APP para so-
lucionar una problemática propuesta.
Objetivo
Conocer los elementos que conforman la interfaz gráfica y hacen
posible el flujo de información dentro de las aplicaciones, así como
el procedimiento que las instrucciones deben seguir para conec-
tar y comunicar las diferentes pantallas.
1
Habilidades
• Toma de decisiones
• Resolución de problemas
Contenido
• Interfaz gráfica
• Flujo de información
• Aplicación móvil
Recursos
• Guía de diseño
• Diseño de pantalla
Vocabulario
Interfaz gráfica: Es un programa informático que actúa de interfaz de usuario, utili-
zando un conjunto de imágenes y objetos gráficos para representar la información
y acciones disponibles en la interfaz.
Flujo de información: La ruta que los datos para la realización de tareas.
Apertura
Introducción
La Escuela Secundaria #8 quiere generar una nueva aplicaPa-
ra poder dar inicio a las actividades deberás explicar qué es la
interfaz gráfica a los estudiantes:
La función de la interfaz gráfica es simplificar la comunica-
ción entre una máquina o un sistema operativo y un usuario.
Antes de que se desarrollaran y popularizaron las GUI, solo las
personas con conocimientos profundos de informática podían
usar un computador, pero las interfaces gráficas sustituyeron
la complejidad de los comandos por acciones predetermi-
nadas simbolizadas por elementos visuales muy sencillos de
comprender.

32
33
2
Desarrollo
Explica a los estudiantes lo siguiente:
Interfaz de usuario
Continúa con las actividades de la lección, comparte y pre-
senta a las estudiantes el concepto de interfaz gráfica, utili-
zando como guía la siguiente información.
¿Qué es una interfaz de usuario?
La Interfaz gráfica de usuario o GUI (Graphic User Interface) es
el entorno visual de imágenes y objetos mediante el cual una
máquina y un usuario interactúan.
Su función principal es simplificar la comunicación entre una
máquina o un sistema operativo y un usuario.
Una buena GUI no solo es importante para los programas, sis-
temas operativos y aplicaciones. Se estima que el 68% de los
visitantes que abandonan un sitio web lo hacen debido a que
la experiencia de usuario, incluyendo la Interfaz, no está opti-
mizada para sus necesidades y expectativas.
Una buena GUI se caracteriza por:
• Ser sencilla de comprender y usar
• La curva de aprendizaje es acelerada y es fácil recordar
su funcionamiento
• Los elementos principales son muy identificables
• Facilitar y predecir las acciones más comunes del usuario
• La información está adecuadamente ordenada mediante
menús, iconos, barras, etc.
• Las operaciones son rápidas, intuitivas y reversibles
• La interfaz expresa claramente el estado del sistema o
las operaciones, y brinda elementos de ayuda.
• La navegabilidad y la usabilidad son óptimas.
Plantea a los estudiantes lo siguiente:
La Escuela Secundaria #8 quiere generar una nueva aplicación
que facilite el aprendizaje de sus alumnos en la materia de al-
gebra. Para ello necesitan que esta aplicación contenga ejer-
cicios de algebra, videos con la explicación del tema y com-
petencias entre diversos alumnos. También requieren que los
alumnos puedan registrarse en la misma para poder ir midien-
do su nivel de aprendizaje.
Es tu momento de apoyar a los directivos de la secundaria y
crear un boceto que cumpla sus necesidades.
Juntos generen una nube de palabras donde enumeren las ne-
cesidades particulares de los directivos de la Escuela Secunda-
ria #8. No pierdan de vista esta lista, ya que les ayudará a reali-
zar la actividad central de la lección.
• ¿Cuáles son los elementos de interfaz que permiten el flujo
de información?
Los elementos de la interfaz gráfica que ayudan a que exista
un flujo de información entre las diferentes pantallas de una
app, son:
• Botones
• Menú
• Barras de herramientas
Divide a tu grupo en 4 equipos, pide a cada equipo que bus-
que diferentes definiciones de uno de los elementos y pos-
teriormente que la analicen, seleccionen los términos que se
repiten, y generen una definición grupal de ese elemento. Des-
pués deberán compartirla con el grupo y contestar posibles
dudas de sus compañeras.
Workana (s.n.) ¿Qué es la interfaz gráfica de usuario GUI?
Recuperado de https://i.workana.com/glosario/que-es-la-interfaz-grafica-
de-usuario-gui/

34
35
3
Pregunta detonadora
¿Cuáles son los elementos de interfaz gráfica que consideras
son más necesarios que tenga esta aplicación?
Tomando en cuenta la lista de necesidades realizada y las
respuestas a la pregunta detonadora, llego el momento de
que los estudiantes pongan manos a la obra y diseñen la in-
terfaz gráfica de su aplicación que les permitirá tener flujo de
información entre sus pantallas.
Boceto de app
De manera individual los estudiantes deberán crear un boceto
que apoye las necesidades que muestran los directivos de la
Escuela Secundaria #8. Para ello se deben basar en el recurso
Diseño de pantallas.
Dentro de este recurso deben:
1. Crear el boceto de la pantalla principal de la aplicación con
los elementos de la interfaz gráfica que ayudan que suceda
el flujo de información entre las diferentes pantallas y a su vez
ayudarán a satisfacer las necesidades de los directivos.
2. Crear el boceto de las pantallas secundarias, que propicia-
rán que la app cumpla su propósito.
3. Señalar con la ayuda de líneas y flechas el flujo de informa-
ción que sucede cuando el usuario utiliza alguno de los ele-
mentos de la interfaz gráfica.
4
Cierre
Los estudiantes deberán presentar el boceto de la app que
ellas proponen para la enseñanza de algebra en la escuela
Secundaria #8.
Reflexión
• ¿Crees que las apps serían igual de populares si no tuvieran
elementos de interfaz que permiten flujo de información en-
tre sus pantallas? Explica el porqué de tu respuesta.
• ¿Cuál crees que es el elemento que permite la interacción
entre app y usuario más importante y por qué?
•¿Consideras qué es importante la interfaz de usuario en una
aplicación?, ¿por qué?
•¿Crees que es necesario realizar mejoras visuales a una apli-
cación?, ¿por qué?
Para finalizar, recuerda que, el entregable de cada estudiante
para esta lección será el diseño de pantallas.

36
37
App Inventor es una herramienta web de desarrollo para ini-
ciar en el mundo de la programación. Con él pueden hacerse
aplicaciones muy simples, y también muy elaboradas, que se
ejecutarán en los dispositivos móviles con sistema operativo
Android.
App Inventor es un lenguaje de programación basado en blo-
ques (como piezas de un juego de construcción), y orientado
a eventos. Sirve para indicarle al “cerebro” del dispositivo mó-
vil qué quieres que haga, y cómo.
comienda explorar la plataforma APP inventor previamente y
realizar el registro, para ello se requerirá una cuenta en Gmail.
Los estudiantes conocerán la plataforma AppInventor para la
creación de aplicaciones y se registrarán. En caso de no con-
tar con computadoras se recomienda realizar la actividad a
través de la proyección como grupo e invitar a los estudiantes
a realizarla en casa.
Objetivo
Conocer la existencia de una plataforma para crear apps de manera
sencilla, en la cual se puede diseñar las pantallas que se desean,
así como programar los eventos que ocurrirán dentro de la app.
¿Qué es App Inventor?
5
Lección
1
Habilidades
• Manejo de herra-
mientas digitales
Contenido
• Plataforma APP inventor
Recursos
• Web AppInventor
• Relaciona los elementos
Vocabulario
App Inventor: Es un entorno de desarrollo de software actualmente mantenido por
el Instituto de Tecnología de Massachusetts y originalmente creado por el ahora di-
funto Google Labs para la elaboración de aplicaciones destinadas al sistema ope-
rativo Android.
Apertura
Introducción
App Inventor es un entorno de programación que permite crear
aplicaciones móviles de forma muy sencilla, por lo que es ac-
cesible a todo el mundo, incluso a los niños.
Está diseñado para programar aplicaciones sencillas, pero to-
talmente funcionales para smartphones y tablets de disposi-
tivos Android o iOS.
El objetivo de App Inventor es democratizar el desarrollo de
software, permitiendo a los jóvenes dejar de ser consumidores
pasivos de tecnología para convertirse en creadores activos
de tecnología. Se ha creado como un software de programa-
ción profundamente visual e intuitivo.

38
39
Funciona con un lenguaje de programación basado en blo-
ques, al estilo de un juego de construcción Lego (pero en for-
mato digital). Los bloques de programación al unirlos orde-
nadamente te permitirán programar el comportamiento de tu
aplicación, se trata de las instrucciones que seguirá tu aplica-
ción para realizar las tareas deseadas.
2
Desarrollo
Crea una cuenta en AppInventor
Es necesario que cada estudiante tenga una cuenta Gmail por-
que App Inventor es un trabajo conjunto entre Google y el MIT
(Instituto Tecnológico de Massachusetts).
Nota: Recuerda que Android es de Google.
1
2
Abre el navegador para ingresar a AppInventor. OJO, tiene que
ser Google Chrome, Safari o Firefox. Internet Explorer aún no
es compatible con App Inventor.
Da clic en la primera opción que aparece al buscar “AppInventor”
o en su caso da clic en el enlace https://appinventor.mit.edu/.
Tomada de Google. Consultada el 22 junio 2021
Se abrirá la siguiente página:
3
4
5
Da clic sobre el botón Create Apps!
Si no has abierto sesión en Google, el navegador pedirá que lo
hagas ahora.
Tomada de AppInventor. Consultada el 22 junio 2021
Tomada de Gmail. Consultada el 22 junio 2021

40
41
Al acceder a tu cuenta de Google, verás la página de AppIn-
ventor y te pedirá aceptar los términos de la página.
6
Acepta los términos con el botón que encontrarás en la parte
inferior.
7
9 A continuación, les aparecerá una pantalla para seleccionar un
tutorial o iniciar un proyecto nuevo, por el momento, no reali-
zarán un proyecto por lo que darán clic en el botón Close.
8 Enseguida, AppInventor mostrará una pantalla de bienvenida,
da clic en el botón Continue.

42
43
3 Diseñador y editor de bloques
Muestra a las estudiantes la interfaz gráfica de APP Inventor y
sus componentes.
MitAPPInventor (s.n.) Designer and block editor. Recuperado de https://ap-
pinventor.mit.edu/explore/designer-blocks
Bloques de programación
Presenta a los estudiantes la pestaña de bloques de progra-
mación, dónde se encuentran y explica lo siguiente:
Los bloques de programación al unirlos ordenadamente te per-
mitirán programar el comportamiento de tu aplicación, se tra-
ta de las instrucciones que seguirá tu aplicación para realizar
las tareas deseadas.
Relaciona los elementos
Realiza una actividad en pares o equipos que permita a las
estudiantes reforzar el reconocimiento de los elementos de la
interfaz gráfica de APP inventor. Te sugerimos la siguiente acti-
vidad “Relaciona los elementos”.

44
45
5
4
Cierre
Configura el idioma
App Inventor muestra inicialmente la interfaz en inglés, sin em-
bargo, los estudiantes pueden utilizarla también en español. La
elección del idioma se hace pulsando sobre la palabra English
ubicada en la esquina superior derecha de la página de App
Inventor.
La interfaz será traducida al español, pero pueden aún encon-
trar algunos textos genéricos de ayuda en inglés. En todo caso,
serán muy pocos, y no deberán tener problemas para traba-
jar con la herramienta sin saber inglés.
Reflexión
• Preguntas para análisis grupal
•¿Te imaginas cómo se crearían apps sin herramientas como
AppInventor?, ¿sabes de alguna plataforma para crear apps,
diferente a AppInventor?
Para finalizar, el entregable de cada estudiante para esta lec-
ción será la actividad de relación de elementos.
Sugiere a los estudiantes disponer de un dispositivo Android
donde se puedan probar los programas según se vayan ela-
borando.
Para finalizar, el entregable de cada estudiante para esta lec-
ción será la impresión de pantalla de su registro en AppInventor.
Un emulador es un software que nos permite ejecutar progra-
mas en plataformas diferentes que para las que fueron crea-
dos. En esta lección los estudiantes podrán ya sea descargar
la app original para la que están programando y/o conocer el
emulador para poder observar el resultado de su programa-
ción y el funcionamiento de cada uno de los elementos que
agregan a su app.
Para llevar a cabo las actividades con los estudiantes, debe-
rás tener una cuenta en APP inventor para el desarrollo de las
aplicaciones. Y consultar previamente las actividades de la
lección para comprender el uso y funcionamiento de los bo-
tones y sonidos en una APP.
Los estudiantes crearán una aplicación en la que harán uso
de un botón y sonido. En caso de no contar con computadoras
se recomienda realizar la actividad a través de la proyección
como grupo e invitar a los estudiantes a realizarla en casa.
Objetivo
Los estudiantes podrán observar el resultado de sus primeras
programaciones sencillas en App Inventor.
Conozcamos un emulador
6
Lección

46
47
1
rHabilidades
• Creatividad
Contenido
• Botones
• Sonido
Recursos
• Web AppInventor
Vocabulario
Emulador: Es un software que permite ejecutar programas o videojuegos en una
plataforma diferente de aquella para la cual fueron escritos originalmente.
Apertura
Introducción
En ciencias de la computación, los eventos provocan otras
acciones. Los eventos son muy comunes en los programas.
Por ejemplo:
• Cuando pulsas un interruptor, las luces se encienden.
• Cuando tocas un icono especifico, se inicia una app.
•Cuando tocas el botón de desbloqueo, tu celular se enciende.
• Cuando (evento), (acción).
En esta lección, crearas tu primera aplicación móvil, en la cual
vamos a practicar el concepto de evento al hacer que se es-
cuche el sonido de un gato cada vez que hagamos clic sobre
su imagen (botón).
Pregunta detonadora
¿Cómo imaginas que debe ser la programación para qué tu
app sea funcional?, ¿qué elemento de la interfaz es indispen-
sable que utilices en tu app?
2
Desarrollo
Instalación de MIT AI2 Companion
Todos aquellos estudiantes que cuenten con un dispositivo An-
droid deben seguir estas instrucciones para descargar la app
que les permitirá observar el resultado de las actividades que
realizaron:
1. Ingresar a Play Store.
2. Escribir en el buscador “MIT AI2 Companion”.
3. Descargar la app en sus dispositivos.
Tomada de Play Store. Consultada el 23 junio 2021

48
49
Una vez abierta la app, para vincularla con la programación
podrán elegir alguna de las siguientes dos opciones.
1. Elige la opción “Connect with code”(botón naranja), y des-
pués escribe el código sobre el espacio correspondiente.
2. Elige la opción “Scan QR code” (botón azul), y escanea el
código QR que aparece en tu pantalla.
Tomada de MIT AI2 Companion. Consultada el 23 junio 2021
Nota: Ambos dispositivos deben estar conectados a la misma red de WIFI para que
se pueda llevar a cabo el enlace.
4. Abrir la app.
4
3 Conoce el emulador
Todos aquellos que no cuenten con un dispositivo Android pue-
den observar los resultados de su programación a través de
un emulador. Para ello tienen que realizar los siguientes pasos:
1. Dar clic sobre el botón “Conectar” en el menú superior de tu
cuenta de AppInventor, después seleccionar la opción “Emulador”.
Pide a los estudiantes un poco de paciencia ya que el emula-
dor tarda unos momentos en cargar, una vez que éste haya
cargado deberán ver la pantalla en blanco.
¡Empezamos a programar!
Llego el momento de que los estudiantes comiencen con el
ejercicio práctico de la sesión, donde lograrán que al presionar
el botón se generen sonidos en su dispositivo. Para realizarlo
deben descargar en sus computadoras una imagen de un gato
y el sonido de un maullido.
Nota: La imagen tiene que encontrarse en formato png y el sonido en formato mp3.

50
51
5 Incluir un botón en la pantalla
Una vez que los estudiantes tengan la imagen de su gato y su
sonido de maullido descargado podrán comenzar a crear la
interfaz gráfica de su app, para ello deben entrar a su cuenta
en App Inventor y comenzar un nuevo proyecto.
Las instrucciones para diseñar la interfaz de este proyecto son
las siguientes:
1. Seleccionar la opción Botón y arrastrarlo hasta la pantalla
de su app.
2. Dirigirse hacia la barra de herramientas de propiedades.

52
53
3. Dar clic en la propiedad “Imagen< Ninguno”.
4. Dar clic en subir archivo y posteriormente en seleccionar
archivo.
5. Elegir la imagen del gato que fue descargada en un inicio.
6. Dar clic en aceptar.
Para eliminar el texto del botón, los estudiantes deben dirigirse
a la barra de herramientas “Propiedad” y borrar la información
que se encuentra en la propiedad “Texto”.
Los estudiantes pueden ajustar la posición de la imagen cam-
biando los valores Ancho y Alto.
Con los pasos anteriores los estudiantes lograron insertar un
botón en forma de imagen dentro de su app, ahora deben
insertar el sonido.
Para lograr la actividad los estudiantes deben seguir estos pasos:
1. Seleccionar la opción sonido, dentro de la paleta de medios.
OJO. Este elemento no será visible en tu aplicación es por ello
que aparecerá en componentes no visibles.
3. Dar clic en la propiedad “Origen< Ninguno”.

54
55
2. Dirigirse hacia la barra de herramientas de propiedades.
4. Dar clic en subir archivo y posteriormente en seleccionar
archivo.
5. Elegir la imagen del gato que fue descargada en un inicio.
6. Dar clic en aceptar. Tomada de CodeWeek. Consultada el 23 junio 2021.
Una vez que los estudiantes han subido ambos elementos y
han diseñado la interfaz gráfica, llego el momento de progra-
mar las acciones que sucederán al momento de que el usua-
rio entre en contacto con la app. Para lograrlo van a utilizar el
lenguaje de programación por bloques de la siguiente manera:
1. Dar clic en el botón “Bloques” que se encuentra en la esquina
superior derecha.

56
57
2. Las llevará a la siguiente pantalla la cual, cuenta con 2 áreas
principales como se muestra en la imagen.
Nota: Para poder comenzar a programar se deben arrastrar los bloques de programa-
ción seleccionados al espacio de trabajo. Es importante que embonen como figuras
de rompecabezas para que la programación sea correcta.
3. Seleccionar dentro de la paleta de bloques la opción “Botón”,
después arrastrar al espacio de trabajo “Cuando . clic”.
Tomada de CodeWeek. Consultada el 23 junio 2021.
4. Seleccionar dentro de la paleta de bloques la opción “Sonido1”,
después arrastrar al espacio de trabajo “Llamar . Reproducir”.
¡Enhorabuena por la primera aplicación!
Ya podemos probarla en el móvil, para instalarla en el móvil
permanentemente, como cualquier otra aplicación, podemos
generar un código QR.
En el siguiente enlace podrás consultar como se debe ver la programa-
ción de bloques completa de esta lección: Programación final.

58
59
2. Si no cuentan con la app, seleccionar en el menú la opción
Cierre
Para cerrar con la actividad de hoy los estudiantes podrán pro-
bar la aplicación que acaban de diseñar. Para ello utilizarán su
app MIT AI2 Companion o el emulador.
1. Dentro de AppInventor seleccionar el menú generar y esca-
near el código.
6
“Conectar” y después “Emulador”.
Permite a los estudiantes explorar la app que acaban de crear,
si alguna no obtiene los resultados esperados recuérdale que
debe ser persevante y buscar los errores que no le están per-
mitiendo alcanzar el objetivo.
¡Para ser un buen programador se debe ser paciente, analíti-
co y muy perseverante!
Reflexión
• ¿Por qué consideras que es importante que puedan ver el
resultado de lo que programaron?
• ¿Consideras que programar una app es complicado? Ex-
plica tu respuesta.
Para finalizar, recuerda que, el entregable de cada estudian-
te para esta lección será la impresión de pantalla del diseño
“Botón y sonido en diseño de pantalla” y de la programación
por bloques que utilizaste para que la app siguiera tus instruc-
ciones y lograra la acción.

60
61
Crea una aplicación
para dibujar
7
Lección
En esta lección se revisará el modo de crear una aplicación
para los dispositivos Android y con la que se dará rienda suelta
a la imaginación y desarrollar el lado más creativo a través de
la pintura.
Se trata de crear su propia aplicación de dibujo, la cual podrán
diseñar a su gusto e incluir los colores que les parezcan más
llamativos.
Para llevar a cabo las actividades con los estudiantes, se reco-
mienda practicar previamente la actividad para realizar una
aplicación que permita dibujar.
Recuerda que necesitarás una cuenta en APP inventor.
Los estudiantes crearán una aplicación que les permitirá di-
bujar. En caso de no contar con computadoras se recomienda
realizar la actividad a través de la proyección como grupo e
invitar a los estudiantes a realizarla en casa.
Objetivo
Los estudiantes realizarán su primera aplicación a través de un
diseño guiado, dicha aplicación servirá para realizar dibujos. Uti-
lizarán tanto el diseñador de pantallas como los bloques de pro-
gramación para darle vida a su aplicación.
1
Habilidades
• Creatividad
• Resolución de problemas
Contenido
• Botones
• Fondos
• Touch
• Bloques de
programación
• Interfaz
Recursos
• Web AppInventor
• App para dibujar
Apertura
Introducción
Planteamiento de situación
Imagina que eres un programador y quieres crear una app para
niños de un kínder. A lo niños de esa edad les gusta mucho
dibujar, por lo tanto, tu app debería servir para ayudar a los
niños a que desarrollen dibujos.
Pregunta detonadora
¿Cómo te imaginas esa app?, ¿qué elementos debe tener esa
app?
Desarrollo
Una vez que han conocido el manejo más básico del diseñador
de pantallas y el editor de bloques de App Inventor, ya están
listos para hacer algo más avanzado.

62
63
2 App para dibujar
Pide a los estudiantes que comiencen dando clic en el des-
plegable Proyectos, y elijan la opción Comenzar un proyecto
nuevo.
Una vez dentro, cambiarán el nombre de la pantalla Screen1
por Dibujar (en la propiedad Título del componente Screen1)
Nota: Es importante siempre utilizar nombres descriptivos para los objetos que van crean-
do. Al principio, cuando las aplicaciones son pequeñas, es fácil recordar cada objeto, pero
a medida que los programas van haciéndose más complejos es fundamental saber para
qué sirve cada objeto, cada variable, y sólo podrás hacerlo si le has dado un nombre
que describe qué es o para qué sirve.
Ahora colocarán un botón, y cambiarán su propiedad Texto
por “Rojo”, y finalmente pondrán en rojo su propiedad ColorDe-
Fondo. Adelante, solamente hay que jugar con las propiedades
del botón.
Cambiarán el nombre del botón Botón1 por boton_rojo en el
cuadro de componentes del Diseñador. En lugar de usar un
espacio utilizarán un signo de subrayado, y no usarán tildes
(acentos), porque el sistema entiende que es un carácter es-
pecial no válido (esto aún está en inglés).

64
65
Después, pide a los estudiantes que creen otro botón verde, y
finalmente otro azul, y harán lo mismo que hicieron con el rojo,
cambiarán su nombre, el color de fondo, y el texto que apare-
ce en el botón.
Lo ideal es que los botones queden en una misma línea hori-
zontal, tendrán que recolocarlos en la pantalla añadiendo un
componente DisposiciónHorizontal. Lo arrastrarán desde el
cajón Disposición hasta el Visor. Este objeto aparecerá en el
Visor como un cuadro vacío.
Para que se ajuste al ancho de la pantalla del visor ¿qué harías?
En su propiedad Ancho elegirán la opción Ajustar al conte-
nedor. Ahora, en el Visor, arrastrarán los tres botones dentro
de DisposiciónHorizontal1. Si no les gusta este nombre pue-
den cambiarlo por MarcoHorizontal, por ejemplo. Para que la
altura del marco se ajuste al tamaño de los botones pueden
decir que su Altura sea automática. Así siempre se adaptará
al tamaño del componente más alto de todos los que contiene.
Ahora pide a los estudiantes que añadan el lienzo, arrastrando
al Visor el componente Lienzo, que se encuentra dentro del ca-
jón Dibujo y animación de la Paleta. Lo colocarás justo debajo,
fuera del MarcoHorizontal. Lo más cómodo es definir que su
anchura (propiedad Ancho) sea automática, para que se ex-
tienda hasta los bordes izquierdo y derecho del Visor. En cuanto
a su altura, mejor experimentar con diferentes tamaños hasta
que ocupe el espacio que desean.

66
67
El tamaño se especifica en pixels, es decir, en puntos de la
pantalla. Cada línea de la pantalla tiene un número de pixels.
El número de ellos que haya, en líneas y columnas, define la
resolución de la pantalla. Pueden probar con 300 pixels, y mo-
dificarlo más tarde si ven que no es el mejor tamaño.
Ahora van a definir el comportamiento del programa, a decir
cómo tiene que funcionar. Vayan al editor de bloques.
Arrastrarán el bloque cuando.Lienzo1.Tocar desde el cajón del
objeto Lienzo1 hasta el editor. Esto indica que cada vez que to-
quen el lienzo con el dedo tendrá que ocurrir lo que digan den-
3
tro de este bloque mostaza.
Ahora arrastrarán el bloque morado (de acción) llamar.Lien-
zo1.DibujarCírculo hasta encajarlo dentro del bloque mosta-
za. Verán que para funcionar necesita que le asocien a la de-
recha tres bloques de información adicional (x, y, r).
Coordenadas x, y
AppInventor utiliza el sistema cartesiano para determinar la
posición de un punto determinado dentro de un lienzo. La “x”
aumenta desde la izquierda a la derecha, y la “y” lo hace des-
de arriba hacia abajo.

68
69
Precisamente para saber dónde dibujar el círculo, el bloque
morado deberá saber que x e y tiene el punto de la pantalla
que estamos tocando. Lo tomaremos del bloque mostaza.
Al dejar quieto el puntero del ratón sobre el icono de la x del
bloque mostaza, saldrá una ventanita en la que aparecerá un
pequeño bloque tomarx de color naranja. Tienen que arras-
trarlo hasta encajarlo con el hueco superior del bloque morado
llamar.Lienzo1.DibujarCírculo.
Harán lo mismo con la y. Esto hará que el círculo se dibuje so-
bre la x y la y que estás tocando, y no en cualquier otro punto
de la pantalla.
Falta definir la r. ¿Qué es? Indica el tamaño del círculo que van
a dibujar, su radio (de ahí la r). Para definir el tamaño, el radio,
abran el cajón Matemáticas de la zona de bloques y arrastren
el bloque azul que indicar el valor 0 (cero) hasta el hueco r de
tu bloque morado.
Si quieren que los círculos se vean bien, asignen a r el valor 10.
El radio del círculo será 10.
Ahora pueden tocar dentro del lienzo, en la pantalla del móvil o
el emulador, para ver cómo se dibujan pequeños círculos. Pero
para que los círculos sean rojos, verdes o azules en lugar de
negros, hay que decirle al móvil que lo haga creando nuevos
bloques.
Una pista: hay que utilizar un bloque mostaza del objeto bo-
tón_rojo.
Utilizarán el bloque cuando.boton_rojo.Clic. Lo arrastrarán
hasta el editor de bloques.
¿Qué tiene que ocurrir cuando hagan clic sobre el botón rojo?
Tiene que cambiarse a rojo el color del pincel que usan en el
lienzo.
¿Dónde tendrás que definir eso? Una pista: el color del pincel
es una característica del Lienzo1, así que tendrán que buscar
la manera de hacerlo usando algún bloque del cajón del ob-
jeto Lienzo. Otra pista: es un bloque de color verde oscuro.
Es el bloque poner.Lienzo1.ColorDePintura.como. Lo arrastra-
rán hasta encajarlo dentro del bloque mostaza cuando.bo-
ton_rojo.Clic. Falta indicar que quieres que sea el color rojo.

70
71
Menciona a los estudiantes que harán lo mismo con los boto-
nes para color verde y color azul.
Una vez hecho, en el nuevo bloque mostaza, podrán desplegar
la lista del nombre de los botones y elegir el del color verde.
Entonces sólo tendrán que cambiar el bloque rojo por el verde,
y listo. Lo mismo con el botón para el azul.
Para ello escogerán el pequeño bloque que identifica a este
color de entre los colores que hay en el cajón Colores de la
Paleta de AppInventor.
Cuando prueben el resultado se “ensuciará” el lienzo ensegui-
da, así que hay que poner un botón para dejar el lienzo blanco
de nuevo. ¿Cómo se hará?
Varias pistas:
• Creen DisposiciónHorizontal1 debajo del lienzo.
• Metan dentro un nuevo botón y llámenlo Limpiar.
• Cambien el texto del botón por “Limpiar”.
• Pongan los bloques para que al hacer clic sobre Limpiar se
limpie el lienzo.
4
En programación no hay una única manera de hacer bien las cosas, es decir, podemos
conseguir el mismo resultado utilizando bloques diferentes. El objetivo es crear el pro-
grama de la forma más simple y más eficiente, para que tu código sea más “elegante”.
Guarda un archivo con el dibujo que has hecho
Los cambios realizados en su aplicación se guardarán de ma-
nera automática, es decir, se actualizará conforme agreguen
o quiten elementos tanto del diseñador de pantallas como de
los bloques de programación.
Es por eso que resulta importante que, al abrir un proyecto
nuevo, coloquen el nombre de su aplicación para identificarla
en su lista de actividades.
En el siguiente enlace podrás consultar como se debe ver la programación de blo-
ques completa de esta lección: App para dibujar.

72
73
6
5
Cierre
Ideas para mejorar la aplicación
Pueden mejorar esta aplicación hasta donde deseen los estu-
diantes, usando la imaginación, e investigando cómo pueden
utilizar los recursos en AppInventor para incluir en su aplica-
ción todo lo que vayan inventando.
Por ejemplo; poner un sello con su nombre cuando pulsen un
botón o tomar una foto existente en la memoria del dispositi-
vo y usarla como fondo del lienzo, etc.
¿Qué mejoras se les ocurren?
Codeweek (2015). Guía de iniciación a APP INVENTOR. Recuperado de https://co-
deweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
Reflexión
Realiza las siguientes preguntas a los estudiantes:
• ¿Cuáles son los bloques más importantes que usaste?, ¿qué
sucedería si no dieras instrucciones específicas durante la
programación?, ¿qué otros usos te imaginas que puedes
darles a esos bloques de programación?
para esta lección será la impresión de pantalla de la progra-
mación realizada para su app de dibujo.
¿Qué número estás pensando?
Diseño de aplicación
8
Lección
Para que un programa parezca que piensa, debemos ense-
ñarle cómo hacerlo, a través de bloques de programación. Se
trata de enseñarle al programa la lógica que seguimos noso-
tros, los seres humanos.
comienda consultar previamente las actividades de la lec-
ción, recuerda que requerirás una cuenta de App Inventor para
crear una APP con la que interactuarás.
Los estudiantes crearán una aplicación que les permitirá in-
teractuar adivinando un número. En caso de no contar con
computadoras se recomienda realizar la actividad a través de
la proyección como grupo e invitar a los estudiantes a reali-
zarla en casa.
Objetivo
Los estudiantes realizarán una aplicación para adivinar qué número
está pensando. El programa pensará un número y ellos tendrán que
adivinarlo.

74
75
1
Habilidades
• Resolución de
problemas
Contenido
• Aleatorio
• Interacción
• Números
Recursos
• Web AppInventor
• App MIT AI2 Companion
Apertura
Introducción
Las aplicaciones y tecnología también forman parte impor-
tante del entretenimiento, en muchas ocasiones se utiliza para
divertirnos ¿Has jugado frente a una máquina?, ¿tú contra la
máquina?, ¿has visto las partidas de ajedrez humano vs com-
putadora?
Pregunta detonadora
¿Cómo imaginas que la computadora planea sus jugadas de
ajedrez?
En esta lección vamos a hacer un programa sencillo pero efi-
ciente. Él pensará un número y nosotros tenemos que adivinar-
lo. ¡Parecerá que el móvil piense! Para que el dispositivo pueda
hacer esto correctamente, tenemos que enseñarle cómo ha-
cerlo, paso a paso, añadiendo bloques de código. Se trata de
enseñarle al programa la lógica que seguimos nosotros, los
seres humanos, cuando jugamos a este juego.
2
Desarrollo
Definimos la interfaz del juego
Para iniciar las actividades, lleva a los estudiantes a APP inven-
tor y pide que generen un proyecto nuevo.
Los estudiantes deben que crear un interfaz para para que la
aplicación se relacione con el usuario, es decir, le pregunte
un número, y le vaya dando pistas, diciendo si es demasiado
alto, demasiado bajo, o si finalmente ha acertado el número
secreto.
Crearán entonces en el Diseñador una etiqueta, y cambiarán
el texto para que aparezca en ella la palabra “Número:”. Uno
de los retos más importantes cuando programamos, es ser
ordenados. Los programadores tienden a crear y definir mu-
chos objetos para llevar a cabo rápidamente la idea que han
tenido, antes de que se les vaya de la cabeza. Aunque parezca
imposible, con el tiempo, cuando revisa el código, ya no saben
para qué servía cada objeto que han creado, y esto puede ha-
cer perder mucho tiempo cuando revisan su programa tiem-
po después. Para evitarlo, es importante que se acostumbren
a seguir prácticas o métodos que las libre de este problema a
largo plazo.
Dependiendo de las características de tu grupo y la infraestructura con la que cuenten,
los estudiantes pueden realizar el ejercicio de manera individual, parejas o equipos.

76
77
A partir de este proyecto practicarán ser más ordenados. De-
jarán una E_ delante del nombre de su nueva etiqueta. Así
siempre sabrán, cuando vean los bloques, que esa es una eti-
queta, y no un botón, ni campo de texto, ni otro tipo compo-
nente. Llamarán la etiqueta E_número.
Recuerda que, para cambiar el nombre de una etiqueta, botón, campo de texto etc., nos
tenemos que dirigir a la parte de Componentes, dar clic sobre el componente que este-
mos trabajando y en la parte de abajo seleccionar la opción de “Cambiar nombre”, así
podemos trabajar la asignación de nombres e ir ordenando a nuestros componentes.
Además, el dispositivo va a tener que “escuchar” cada número
que le digan, para decidir si han acertado, así que añadirán en
la ventana del visor un campo de texto. Servirá para que el ju-
gador indique qué número cree que ha pensado el programa.
Para diferenciarlo de la etiqueta que han creado antes, al
campo de texto lo llamaran T_número. Así cuando estén en
el editor de bloques podrán diferenciar fácilmente entre la eti-
queta y el campo de texto, porque uno comienza con E_ y otro
con T_.
Aunque parezca innecesario, esta costumbre en la asigna-
ción de nombres puede ser muy interesante. Con el tiempo
cada programador va desarrollando sus propios métodos, o
tomándolos de otros programadores, para disfrutar del “arte”
de programar sin complicarse la vida.

78
79
Finalmente tendrán que añadir un botón con el texto “Adivina”
para que el dispositivo sepa cuál han elegido. A este botón lo
llamarán B_adivinar. Cuando el jugador lo pulse el programa
tendrá que hacer algunas comprobaciones que ahora verán.
Ya está. El dispositivo podrá escuchar lo que el jugador le diga.
3 Generamos un número aleatorio
Cuando jueguen este juego, ¿qué es lo primero que harán
cuando le digan a un compañero que adivine qué número es-
tán pensando? Pensarán un número al azar.
Para hacer lo mismo en su aplicación necesitarán crear có-
digo, vayan al editor de bloques. Lo primero que el programa
tiene que hacer es pensar en un número.
En este caso le indicarán cómo debe pensar en un número
entre 1 y 10. Al ser una instrucción matemática, abrirán el cajón
Matemáticas, y usarán el bloque entero aleatorio. Tendrán que
especificarle entre qué dos números debe pensar su número.
4
A continuación, harán que el programa guarde este número
en su memoria, porque si no lo olvidaría y no podrán jugar.
Este tipo de bloque tiene que ser encajado a la derecha de
otro. Esto es porque el resultado de este bloque, el número en-
tre 1 y 10, será el dato de entrada para otro bloque.
Guardamos el número en una variable
Una variable es un espacio de la memoria del dispositivo re-
servado para guardar datos que sus programas tienen que
manejar durante su funcionamiento.
Para poder utilizar las variables de memoria es necesario en
primer lugar darles un nombre. Para ello abrirán el cajón Va-
riables y elegirán el bloque inicializar global … como. Podrán
darle a la variable el nombre V_número_pensado. Es impor-
tante dar a las variables un nombre descriptivo, porque en pro-
gramas más complejos, con más variables, les facilitará saber
para qué sirve cada una. Para identificar rápidamente que se
trata de una variable, el nombre comienza con una V_. Los blo-
ques deben quedar así:
Con estos dos bloques le han dicho al juego que tiene que
pensar un número entre uno y diez, y guardárselo en una va-
riable de su memoria, sin mostrárselo al jugador.
ATENCIÓN: Una variable de memoria es como una caja dentro de un gran armario lle-
no de cajas, que es la memoria total del ordenador. La memoria total del ordenador
está compuesta por millones de estas pequeñas cajitas de memoria, que sirven para
guardar la información que el ordenador recibe del exterior, y la que él mismo genera
durante la ejecución de las aplicaciones. También se guarda en la memoria el propio
programa que está ejecutándose.
¿Cuál sería el paso siguiente en el juego?

80
81
4 Pedimos un número al jugador
Para comenzar a jugar deberán pedirle al jugador que les diga
un número. Esto lo conseguirán por medio del campo de texto
T_número que han creado en el Visor. El jugador irá escribien-
do números en este campo y el programa le irá indicando si el
número aleatorio generado secretamente es mayor o menor
al que el jugador ha escrito. Por lo tanto, cada vez que el juga-
dor escriba su número y pulse el botón B_adivinar el progra-
ma lo comparará con el número secreto.
Codeweek (2015). Guía de iniciación a APP INVENTOR. Recuperado de https://co-
deweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
5
Cierre
Reflexión
Retomando las preguntas detonadoras, pregunta a los estu-
diantes:
• ¿Cómo te podría ser útil este tipo de programación?
• ¿Qué tipo de app imaginas que podrías crear?
para esta lección será la impresión de pantalla de la progra-
mación realizada para el ejercicio con número aleatorio.
¿Qué número estás pensando?
Programación en bloques
9
Lección
Una condicional es una acción sobre la cual podemos tomar
decisiones para que suceda o no una situación programada.
En esta lección los estudiantes darán inteligencia a su aplica-
ción para poder determinar si la variable cumple o no con las
características establecidas.
mienda consultar previamente las actividades de la lección que,
en este caso, abordarán el uso de condicionales “si - entonces”.
Recuerda hacer uso de tu cuenta APP inventor.
Los estudiantes crearán una aplicación que les permitirá ha-
cer uso de las condicionales “si- entonces”. En caso de no con-
tar con computadoras se recomienda realizar la actividad a
través de la proyección como grupo e invitar a los estudiantes
a realizarla en casa.
Objetivo
Los estudiantes realizarán una programación con condicionales
en su app para que ésta pueda tomar decisiones de acuerdo a
las características establecidas por ellas mismas.

82
83
1
Habilidades
• Pensamiento crítico
Contenido
• Condicionales
Recursos
• Web AppInventor
Vocabulario
Condicionales: Es una instrucción o grupo de instrucciones que se pueden ejecutar
o no en función del valor de una condición.
Apertura
Introducción
Una influencer quiere crear un concurso donde únicamente las
personas que cumplan con todos los requisitos pueden ganar,
y todas aquellas personas a las que les falte al menos uno de
los requisitos quedará descalificado en el momento.
Ayuda a la influencer a crear una app que le facilite comparar
y diferenciar a aquellas personas que cumplen con todos los
requisitos, de aquellas personas que no cumplen.
Para poder programar esta aplicación es importante recordar
que las condicionales permiten que una computadora tome
una decisión, en función de la información que es verdadera
cada vez que se ejecuta su código.
Las condicionales combinan las ciencias de la computación
con el mundo real al desarrollar la capacidad para decir si una
condición es verdadera o falsa.
Pregunta detonadora
¿Qué bloque de programación le permitirá a la app realizar
comparaciones y tomar decisiones para que puedas ayudar
a la influencer a encontrar más fácilmente a la ganadora de
su concurso?
Desarrollo
El bloque de programación que les ayudará a los estudiantes a
crear condicionales en su app lo pueden encontrar en la platea
de bloques “Control”, y posteriormente en el visor seleccionar el
bloque “Si, entonces”. Para poder hacer uso de él los estudian-
tes deben insertar al menos dos bloques más del lado derecho:
el primero que indique una condición, mientras que el segundo
debe indicar la acción que se realiza si se cumple la condición.

84
85
2 Comparamos los números
Para que los estudiantes puedan comparar entre dos núme-
ros al crear una condición deben dirigirse a los bloques color
azul “Matemáticas” y arrastrar el siguiente bloque al espacio
de si:
En el primer recuadro se debe colocar el número secreto de la
variable y en el segundo el número seleccionado al azar por
el estudiante. Esta acción les ayudará a comparar entre los
números programados y adivinados en la lección anterior.
3
Bloque tomar para conocer el valor de una variable,
texto o etiqueta
El bloque “Tomar” dentro de los bloques color naranja “Varia-
ble” les permitirá a los estudiantes escribir el valor que tendrá
la variable, para ello necesitan seguir estos pasos:
Posteriormente se debe colocar el bloque “T_número.texto”
dentro del segundo recuadro vacío que ayudará a generar la
comparación.

86
87
Después se requiere definir el tipo de comparación que se va a
realizar entre ambos números, en este caso deben seleccionar
la opción mayor que, que les ayudará a los estudiantes a iden-
tificar si el número pensado es mayor que el número variable.
Nota: En esta app se pueden dar pistas a la persona que
está pensando en los números para ayudarle a adivinar el
número correcto. Para programar su app de esta manera
los estudiantes deben dirigirse a la pestaña diseñador y
agregar un nuevo elemento a la interfaz gráfica:
4
Bloque poner para guardar el valor de una variable,
texto o etiqueta
Para poder mostrar una pista a la persona que está utilizando
su app, los estudiantes requieren colocar los siguientes bloques
de programación dentro de su condicional:
1. Colocar el bloque “Poner . como” al lado derecho de “En-
tonces”.
2. Mostrar el Texto “Demasiado bajo” utilizando el bloque color
fucsia.

88
89
3. Cerrar el momento dentro del cual se podrá realizar la
comparación de los números empleando el bloque “Cuando
.Click”.
La programación de la app también puede utilizar diferentes
comparaciones y entonces mostrar pistas distintas a la per-
sona que la utiliza, por ejemplo:
1. Mostrar si el valor está “Demasiado alto”
2. Mostrar si el valor es el correcto.
5 Bucles si-entonces anidados
Cada vez que el jugador pulsa el botón Adivina el programa
hace tres comparaciones seguidas (es menor, es mayor, y es
igual). Sin embargo, sólo una de ellas será cierta, así que no
es necesario hacer las tres preguntas. Es decir, si se cumple la
primera condición no es necesario evaluar la segunda condi-
ción, ni la tercera. En realidad, no solamente no es necesario
hacer las tres preguntas, sino que no es tampoco convenien-
te, porque la aplicación hará siempre trabajo inútilmente, ha-
ciendo la aplicación más lenta, menos eficiente.
En nuestro programa, para evitar las ejecuciones de código
innecesarias, vamos a utilizar sentencias si-entonces anida-
das, o si-entonces-si no. Sólo se ejecutarán los bloques del si
no cuando NO se cumpla la condición del si-entonces anterior.
Si se cumple una condición
Entonces Ejecuta esto
Si no Ejecuta esto otro
Con un ejemplo sería
Si número_x>2
Entonces Escribe “número_x es mayor que dos”
Si no Escribe “numero_x es menor o igual que dos”

90
91
Cierre
Para reducir las líneas de programación de la app los estudian-
tes pueden crear bucles anidados que les permitirán depurar
su programa de todas aquellas acciones extra que están solici-
tando y que en ocasiones pueden propiciar que exista un error.
Un ciclo es capaz de repetirse dentro de un programa, es decir,
se pueden tener repetición de repeticiones.
Por ejemplo, si decimos “aplaude tres veces y salta tres veces”
estamos utilizando ciclos. Si decimos “Repite 3 veces: aplaude
tres veces y salta tres veces” estamos repitiendo repeticiones,
a esto se le conoce como “ciclos o blucles anidados”.
El bucle anidado se debe identificar de la siguiente manera:
En el siguiente enlace podrás consultar como se debe ver la programación de blo-
ques completa de esta lección: Qué número estás pensando.
Reflexión
•¿Qué otras acciones puedes realizar programando un con-
dicional en tu app?
• ¿Cuál es la importancia de los bucles anidados al progra-
mar?
para esta lección será el ejercicio utilizando los bloques “tomar”
y “poner”.
6

92
93
Componentes Imagen y Pelota
Parte 1
10
Lección
Un recurso muy importante disponible en App Inventor es el
componente Sprite Imagen, ya que sirve para crear juegos en
los que se quiere incluir y manejar objetos gráficos. Un Sprite
es una imagen en dos dimensiones, más o menos pequeña,
incluida dentro de un escenario más grande, y que ocupa un
lugar en la memoria gráfica del ordenador. Se utiliza tradicio-
nalmente para la programación de juegos.
comienda consultar previamente las actividades de la lec-
ción para la realización de un juego. Recuerda hacer uso de tu
cuenta APP Inventor.
Los estudiantes crearán un juego a través de una aplicación.
En caso de no contar con computadoras se recomienda reali-
zar la actividad a través de la proyección como grupo e invitar
a los estudiantes a realizarla en casa.
Objetivo
Los estudiantes diseñarán y escribirán un juego gráfico. Probarán
el juego y definirán mejoras; por último, lo descargarán en su dis-
positivo o emulador.
Habilidades
• Creatividad
Contenido
• Objetos visuales
Recursos
• Web AppInventor
Vocabulario
Sprite: Es una imagen en dos dimensiones, más o menos pequeña, incluida den-
tro de un escenario más grande, y que ocupa un lugar en la memoria gráfica del
ordenador.
1
Apertura
Introducción
Para poder dar inicio a las actividades deberás leer la siguiente
situación a los estudiantes:
Imagina que quieres crear un juego para celular el cual tiene
como objetivo atrapar objetos y necesitas colocar íconos, imá-
genes u objetos visuales. Además, del objeto principal con el
que estarás participando.
Pregunta detonadora
¿Cómo agregarías objetos a tu aplicación?, ¿tienes en mente
algún elemento o bloque de appinventor que te permita ha-
cerlo?

94
95
2
Desarrollo
El componente SpriteImagen, se encuentra en la paleta de di-
seño, dentro del cajón Dibujo y animación.
El componente Pelota es un tipo específico dentro del conjunto
SpriteImagen. La única diferencia es que en el caso del com-
ponente Pelota no podrán cambiar su aspecto, la imagen del
objeto, siempre será una circunferencia. Sí podrán hacerlo, sin
embargo, para cualquier otro SpriteImagen.
Definición del escenario de juego
Es momento de programar un juego más sofisticado, para se-
guir aprendiendo conceptos y componentes. Se trata de con-
ducir una pelota a través de un escenario de juego para ir
atrapando objetos. Habrá que gestionar el movimiento de la
pelota, la ubicación de los objetos, el marcador, la duración
del juego, etc.
Pide a los estudiantes que comiencen un nuevo proyecto y le
darán un nombre descriptivo, como “Atrapaobjetos”. Empiecen
creando el lienzo Escenario, y dentro de él incluyan un compo-
nente Pelota, que llamarán spritePelota. De momento indica-
rán en el Diseñador que la altura y la anchura del escenario
se ajusten automáticamente al contenedor. En cuanto a las
propiedades de la pelota, definan que su Radio es 15, para que
se vea suficientemente grande en el escenario.

96
97
Para que el escenario siempre ocupe todo el espacio de la pan-
talla del dispositivo deben definir algunos bloques dentro del
bloque mostaza cuando.Screen1.Inicializar. Todo lo que incluya
en este bloque se ejecutará en cuanto se abra la pantalla, es
decir, en este caso será lo primero que suceda cuando se eje-
cute la aplicación.
Menciona a los estudiantes que deberán adaptar el escenario a
los límites de la pantalla, tomando las propiedades de ancho y
largo de la pantalla de cada dispositivo. Además, evitarán que
la pantalla rote automáticamente poniendo el valor de la pro-
piedad OrientaciónDeLaPantalla a 1. Con este valor la pantalla
siempre mantendrá la orientación vertical, aunque inclinen el
dispositivo. No obstante, como esto no funciona con todos los
dispositivos, en algunos casos será necesario desactivar ma-
nualmente la rotación de la pantalla en el propio dispositivo.
3 Proporciones y límites. Matemática aplicada
Para diseñar este juego es necesario hacer algunos peque-
ños cálculos matemáticos. En general, para hacer aplicacio-
nes gráficas siempre es necesario conocer algunos conceptos
matemáticos de los que se estudian en la escuela. Es un buen
momento para saber cuál es la aplicación de esos conceptos
que pensaban que nunca utilizarían.
Ahora es el momento de investigar estos dos conceptos im-
portantes que utilizarán en su aplicación más adelante: límite
y proporción.
Una vez que tengan la definición de ambas palabras, escribirán
3 ejemplos de cómo usar ambos conceptos. Colóquenlos en
una tabla, como se muestra a continuación:
Concepto Definición 3 ejemplos
Proporciones
Límites

98
99
4
Cierre
Reflexión
Define el objetivo del juego
Este juego consistirá en ir atrapando con su pelota todos los
objetos que aparezcan a lo largo y ancho del escenario. Para
que la pelota ruede por el escenario tendrás que inclinar el
dispositivo. La pelota rodará siempre hacia la parte del esce-
nario que se encuentre más cerca del suelo. Recogerán cada
objeto cuando la pelota choque con él.
Pregunta a los estudiantes ¿qué otro objetivo podría tener este
juego?
Codeweek (2015). Guía de iniciación a APP INVENTOR. Recuperado de
https://codeweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
• ¿Cómo crees que se podría utilizar las proporciones y lími-
tes en este juego?, ¿crees que los Sprite son indispensables
en una aplicación?, ¿por qué?
para esta lección será la impresión de pantalla respecto al
diseño de pantalla con escenario y la tabla de investigación
de conceptos.
El movimiento de la pelota
Parte 2
11
Lección
Los acelerómetros de un dispositivo nos permiten, que al incli-
nar un dispositivo un objeto previamente programado generé
movimiento según la dirección de este. Por ejemplo, para que
una pelota ruede por un escenario, deberás inclinar tu dispo-
sitivo.
mienda consultar previamente las actividades y concentrarse
en el funcionamiento del acelerómetro.
Recuerda hacer uso de tu cuenta en APP Inventor.
Los estudiantes crearán una aplicación que les permitirá ha-
cer uso del acelerómetro para mover una pelota. En caso de
no contar con computadoras se recomienda realizar la ac-
tividad a través de la proyección como grupo e invitar a los
estudiantes a realizarla en casa.
Objetivo
La actividad a desarrollar consiste en perseguir y atrapar con una
pelota todos los objetos que aparezcan a lo largo y ancho del
escenario, haciendo uso del acelerómetro.

100
101
1
Habilidades
Contenido
• Acelerómetro
• Movimiento
Recursos
• Web AppInventor
Vocabulario
Acelerómetro: Instrumento destinado a medir aceleraciones.
Apertura
Introducción
En esta sesión tu junto con los estudiantes continuarán con el
ejercicio anterior, es importante que abran el archivo en el cuál
estuvieron trabajando.
Pregunta detonadora
• ¿Recuerdan lo avanzado en la sesión anterior?
• ¿Hasta qué punto llegó nuestro programa?
• ¿Qué desarrollamos?
2
Desarrollo
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
lógica, no será difícil crear los bloques que permitan este mo-
vimiento.
Lo primero que deberán hacer es incluir en su visor un compo-
nente Acelerómetro. Lo llamarán Inclinación. Este componen-
te no es visible, así que aparecerá en la parte inferior del Visor,
en la zona destinada a componentes no visibles.
Ahora utilizarán el bloque cuando.Inclinación.CambioEnAce-
leración para mover la pelota. Este bloque incluye tres varia-
bles, cada una de las cuales almacena la inclinación del ob-
jeto en uno de los ejes de coordenadas. Harán que la pelota
tenga una dirección dependiendo de los valores de estas tres
variables. Como vimos en la sesión anterior, es convenien-
te utilizar indicadores (chivatos) durante la fase de progra-
mación de nuestras aplicaciones. En este caso mostrarán en
pantalla el contenido de estas variables, para conocer cómo
están funcionando. Para ello reducirán un poco el tamaño
del escenario, y colocarán debajo tres campos Etiqueta para
mostrar el valor de las variables.

102
103
Como la definición de las dimensiones del escenario se hace
dentro del bloque cuando.Screen1. Inicializar, y este sólo se
ejecuta al abrir la aplicación, tendrán que hacer varias prue-
bas conectando y desconectando el dispositivo a App Inven-
tor hasta encontrar las dimensiones más apropiadas. En su caso
reducirán la altura del escenario en 150 unidades, para dar
espacio suficiente a la tabla, y a otros objetos que añadirán
más adelante.
Facilitarán la disposición de la información usando un com-
ponente DisposiciónTabular del cajón Disposición de la Pale-
ta de componentes. Como quieren mostrar los datos de tres
etiquetas con sus tres valores correspondientes, tendrán que
indicar que la DisposiciónTabular tenga dos Columnas con
tres Registros.
Dentro de la tabla, en la columna de izquierda, colocarán tres
etiquetas con la descripción de cada campo, E_nombre_acelX,
E_nombre_acelY y E_nombre_acelZ. En la columna de la de-
recha pondrán tres etiquetas E_valor_acelX, E_valor_acelY
y E_valor_acelZ, para mostrar las variables cuyo valor quie-
ren conocer.

104
105
Ahora podrán indicarle al programa que muestre los valores
de las tres variables dentro de las etiquetas que han crea-
do. Recuerden que podemos duplicar bloques y modificarlos
cuando van a crear varias instrucciones similares. El disposi-
tivo siempre sabe cuál es la aceleración en cualquiera de los
tres ejes. Para que lo sepan y utilicen en su juego tedrán que
utilizar el bloque mostaza cuando.Inclinación.CambioEnAce-
leración.
Para conocer la aceleración en el eje X, por ejemplo, tendrán
que dejar el puntero del ratón inmóvil durante un segundo so-
bre el campo xAccel color naranja que hay dentro del bloque
mostaza. Una vez aparezcan las opciones tomar y poner para
esa variable, podrán arrastrar el bloque tomar hasta el hueco
disponible a la derecha del bloque color verde oscuro corres-
pondiente.
Es buen momento para experimentar qué sucede con cada
una de las variables cuando inclinan el dispositivo. Pueden in-
vertir un poco de tiempo probando, hasta que entiendan cómo
afecta la inclinación a cada una de estas variables. Verán que
para la Y los valores comprenderán de -10 (cuando el disposi-
tivo está vertical y apuntando hacia el suelo) a 10 (cuando el
dispositivo está vertical, y hacia arriba). Para la X, los valores
comprenderán también entre 10 (cuando está completamente
inclinado con la pantalla hacia la izquierda) y -10 cuando está
completamente inclinado con la pantalla hacia la derecha). En
cuanto a la Z, inicialmente sin uso en este juego, irá de 10 (cuan-
do el dispositivo tiene la pantalla hacia arriba) a -10 (cuando el
dispositivo tenga la pantalla hacia abajo, paralela al suelo).
Una vez está claro qué sucede cuando inclinan el dispositivo,
es hora de programar el comportamiento de la pelota.
Tendrá que moverse en la dirección en que inclinen el disposi-
tivo. ¿Cómo? Una pista: hay que utilizar el mismo bloque mos-
taza del sensor de inclinación que han usado antes. Dentro del
mismo bloque mostaza que detecta la variación del sensor de
inclinación incluirán el movimiento de la pelota.
Para ello usarán el bloque violeta llamar.spritePelota.MoverA,
que sirve para colocar el objeto en cualquier punto del es-
cenario que quieron. Este bloque acepta dos parámetros de
entrada, X e Y, que definen las coordenadas donde se colo-
cará la esquina superior izquierda del sprite de la pelota. Ha-
rán que la coordenada X y la coordenada Y de la pelota que
definen su colocación en el escenario vayan variando cuando
inclinen el dispositivo en cualquiera de los dos ejes, o en los
dos al mismo tiempo.
Lo harán simplemente sumando el valor de la variable xAc-
cel 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 están dentro del cajón de propiedades de spritePelota.

106
107
Cuando hagan esto verán que el comportamiento vertical, el
de la coordenada Y, será el esperado, es decir, que la pelota
caerá hacia ustedes cuando inclinen el dispositivo hacia su
lado, y se alejará de ustedes cuando inclinen el móvil en la
dirección contraria.
Sin embargo, cuando inclinen el dispositivo hacia la derecha,
en el eje X, la pelota caerá hacia la izquierda, y viceversa. Para
solucionar este problema, y adaptar el funcionamiento al
comportamiento natural de una pelota, tendrán que modifi-
car el bloque que indica el posicionamiento en la componen-
te X de la coordenada. En lugar de sumarle el valor de xAccel
le sumarán valor de restar xAccel a 1.
Ya está listo. Para la coordenada Y utilizarán el bloque de su-
mar, y dependiendo de si yAccel tiene un valor positivo o ne-
gativo la pelota se moverá en una dirección u otra, porque
sumar un número negativo es lo mismo que restar. En el caso
de X tendrán que añadir un bloque de resta para corregir el
comportamiento contrario, pero básicamente la lógica es la
misma que con la Y.
¡Las matemáticas funcionan, y tienen aplicación en la vida
real! Verán también que la velocidad a la que se mueve la
pelota es yor si inclinan mucho el dispositivo. Esto es debido
a que el valor de xAccel e yAccel que están sumándole a la
posición de la pelota también es mayor o menor en función
de cuánto inclinan el dispositivo.
3
Tomen un tiempo para asimilar estos últimos párrafos porque
no son sencillos de entender, y hagan las pruebas que se les
ocurran, modificando el código que han generado para que el
programa haga cualquier otra cosa que quieran.
Crea objetos a exprimir
A continuación, hay que crear cada objeto que vaya a apa-
recer en el escenario. Tendrán que almacenar la posición de
todos y cada uno de ellos, ya que son objetos distintos entre sí,
para que la aplicación sepa cuándo la pelota está en contac-
to con alguno, y el juego actúe en consecuencia. Para empe-
zar, habrá que dibujar el sprite que quieran utilizar en el juego
para representar al objeto que quieren aplastar.
A continuación, y desde la ventana del Diseñador, incluirán en
su escenario cinco objetos SpriteImagen iguales. Le darán un
nombre diferente a cada uno, y a todos le asignarán el as-
pecto de nuestro sprite. Podemos llamarles Sprite_objeto_1 a
Sprite_objeto_5.

108
109
4 Manejo de objetos
Una vez creados los cinco objetos tendrán que colocarlos en el
escenario. Lo harán con el bloque llamar.Sprite_objeto_1.Mo-
verA. Especificarán para cada objeto una posición aleatoria.
Con los bloques azules entero aleatorio entre definirán en qué
coordenada X aparecerá la esquina superior del sprite den-
tro del escenario. Especificarán un 0 para indicar que el objeto
puede aparecer desde el margen izquierdo del escenario.
A continuación, le dirán con el bloque verde Escenario.Ancho
que el límite máximo es el límite derecho del escenario. Pero,
atención, si el bloque azul entero aleatorio entre les devolvie-
ra precisamente un valor de X muy cercano al límite derec la
mayor parte del objeto sobrepasaría el límite derecho del es-
cenario, y no sería visible. Para solucionar esto se resta a Esce-
nario.Ancho el ancho del sprite objeto, Sprite_objeto_1.Ancho.
(imagen de ejemplo, el sprite debe llamarse Sprite_objeto_1 o el nombre
que la estudiante decida)
5 Procedimiento para tareas definidas y repetitivas
Cada vez que el juego se reinicie tendrán que colocar los obje-
tos en el escenario, y deberán volver a usar todos estos bloques,
así que lo mejor, para no tener que escribir el mismo código va-
rias veces cuando es tan grande, será definir un procedimiento,
donde incluirán todos los bloques que sirven para colocar los
objetos. Un procedimiento es un conjunto de pasos bien defini-
dos para ejecutar una tarea concreta que debe ser ejecutada
muchas veces.
Harán lo mismo con la coordenada vertical Y, y repetirán los
mismos bloques cinco veces, porque hay cinco objetos iguales.
(imagen de ejemplo, los sprite deben llamarse Sprite_objeto_# o el nom-
bre que la estudiante decida)

Manual de Usuario APPs_AppInventor-2023.pdf

Manual de Usuario APPs_AppInventor-2023.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Manual de Usuario APPs_AppInventor-2023.pdf

Similar a Manual de Usuario APPs_AppInventor-2023.pdf (20)

Último

Último (9)

Manual de Usuario APPs_AppInventor-2023.pdf