Manual TC 2

MANUAL
TECNOLOchicas México
FUNDACIÓN TELEVISA
LECCIÓN 1
LECCIÓN 1 ¿QUÉ ES UNA APLICACIÓN?
RESUMEN
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 y contener en nuestros dispositivos herramientas y
accesorios que utilizamos en nuestra vida cotidiana.
OBJETIVO GENERAL
· Conocer acerca de las aplicaciones móviles, identificar sus principales objetivo y usos.
Además, conocer cuáles son las aplicaciones más utilizadas y sus ventajas y desventajas.
OBJETIVOS ESPECÍFICOS
· Las alumnas podrán conocer qué es una aplicación móvil.

· Las alumnas reconocerán las aplicaciones más utilizadas.
· Las alumnas podrán analizar las ventajas y desventajas del uso de las aplicaciones.
RECURSOS
Docente
· ¿Qué es una APP móvil? video
Alumna
· Libreta / hojas y pluma
GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

INTRODUCCIÓN
Para poder dar inicio a las actividades deberás leer la siguiente situación a tus alumnas:
Imagina que quieres crear una aplicación que sirva para difundir 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 tus alumnas y escucha sus respuestas. Recuerda que todas
las respuestas son válidas.
¿Cómo imaginas que funcionaría esta aplicación? ¿Y en qué categoría se clasificaría

(estudio, entretenimiento, redes sociales)?
DESARROLLO (ACTIVIDAD PRINCIPAL)

LLUVIA DE IDEAS (¿QUÉ ES Y FUNCIÓN DE UNA APP?)
Continúa con las actividades de la lección, realiza una lluvia de ideas con tus alumnas, en el
pizarrón, pizarra electrónica, con post –it o incluso hojas, pide a las alumnas 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 todas las 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 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 las alumnas el siguiente video “¿Qué es una APP móvil? video", comparen y
complementen la información recolectada de su lluvia de ideas..
Como complemento de información, comparte con tus alumnas 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
dispositivos móviles (aplicación).
APPS MÁS CONOCIDAS
Continuando con el acercamiento e identificación de aplicaciones móviles pide a las alumnas

que se agrupen en equipos 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.
En caso de no poder realizar una investigación comparte a las alumnas la siguiente

información acerca de las aplicaciones actualmente más utilizadas en México:
1. Disney +
2. WhatsAPP
3. YouTube
4. Facebook
5. TikTok
6. Spotify
7. Gmail
8. Among Us
CIERRE (ACTIVIDAD SECUNDARIA)
Como cierre de la actividad, solicita a las alumnas realizar un cuadro comparativo del uso,
ventajas y desventajas de las aplicaciones mostradas. Con la finalidad de que identifiquen su
funcionamiento y que beneficios les genera su uso.
Ejemplo:
APLICACIÓN PRINCIPAL USO VENTAJAS DESVENTAJAS

REFLEXIÓN
· Retomando las preguntas detonadoras, pregunta a las alumnas:
· Con la información vista a lo largo de la lección ¿Cómo imaginas 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 alumna para esta lección será el cuadro de
ventajas y desventajas y uso de las aplicaciones.
LECCIÓN 2
LECCIÓN 2. DISEÑEMOS NUESTRA APP
RESUMEN
Las apps tienen diferentes elementos que nos permiten realizar 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 información entre sus pantallas por
medio de la interacción del usuario para poder cumplir con su propósito de facilitar una tarea
al realizarla en un dispositivo digital.
OBJETIVO GENERAL
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 conectar y comunicar las diferentes pantallas.
· Las alumnas podrán generar un boceto de una aplicación atendiendo las necesidades de
una situación específica.
· Las alumnas podrán conocer los diferentes elementos de la interfaz gráfica que permiten el
flujo de información.
· Las alumnas podrán analizar el proceso en el que ocurre el flujo de información en una app
para integrarlo en su boceto.
RECURSOS
Alumna:
Diseño de pantallas

INTRODUCCIÓN
La Escuela Secundaria #8 quiere generar una nueva aplicación que facilite el aprendizaje de
sus alumnos en la materia de algebra. Para ello necesitan que esta aplicación contenga
ejercicios de algebra, videos con la explicación del tema y competencias entre diversos
alumnos. También requieren que los alumnos puedan registrarse en la misma para poder ir
midiendo su nivel de aprendizaje.
Es tu momento de apoyar a los directivos de la secundaria y crear un boceto que cumpla sus
necesidades.
Juntas generen una nube de palabras donde enumeren las necesidades particulares de los
directivos de la Escuela Secundaria #8. No pierdan de vista esta lista, ya que les ayudará a
realizar la actividad central de la lección.
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 tus alumnas pongan manos a la obra y diseñen la
interfaz gráfica de su aplicación que les permitirá tener flujo de información entre sus
pantallas.

INTRODUCCIÓN
La Escuela Secundaria #8 quiere generar una nueva aplicación que facilite el aprendizaje de
sus alumnos en la materia de algebra. Para ello necesitan que esta aplicación contenga
ejercicios de algebra, videos con la explicación del tema y competencias entre diversos
alumnos. También requieren que los alumnos puedan registrarse en la misma para poder ir
midiendo su nivel de aprendizaje.
Es tu momento de apoyar a los directivos de la secundaria y crear un boceto que cumpla sus
necesidades.
Juntas generen una nube de palabras donde enumeren las necesidades particulares de los
directivos de la Escuela Secundaria #8. No pierdan de vista esta lista, ya que les ayudará a
realizar la actividad central de la lección.
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 tus alumnas pongan manos a la obra y diseñen la
interfaz gráfica de su aplicación que les permitirá tener flujo de información entre sus
pantallas.
¿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:
o Botones
o Menú
o Barras de herramientas
Divide a tu grupo en 4 equipos, pide a cada equipo que busque diferentes definiciones de uno
de los elementos y posteriormente que la analicen, seleccionen los términos que se repiten,
y generen una definición grupal de ese elemento. Después deberán compartirla con el grupo
y contestar posibles dudas de sus compañeras.
BOCETO DE APP
De manera individual tus alumnas 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 propiciarán que la app cumpla su
propósito.
3. Señalar con la ayuda de líneas y flechas el flujo de información que sucede cuando el
usuario utiliza alguno de los elementos de la interfaz gráfica.
Las alumnas deberán presentar el boceto de la app que ellas proponen para la enseñanza de
algebra en la escuela Secundaria #8.
REFLEXIÓN
o ¿Crees que las apps serían igual de populares si no tuvieran elementos de interfaz que
permiten flujo de información entre sus pantallas? Explica el porqué de tu respuesta.
o ¿Cuál crees que es el elemento que permite la interacción entre app y usuario más
importante y por qué?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será el diseño de
pantallas.
LECCIÓN 3
LECCIÓN 3 ¿QUÉ ES APPINVENTOR?
RESUMEN
o App Inventor es una herramienta web de desarrollo para iniciar 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 bloques (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.
OBJETIVO GENERAL
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.
o Las alumnas conocerán la existencia de una plataforma para crear apps

o Las alumnas reflexionarán respecto a cómo se crean las apps
o Las alumnas crearán una cuenta personal en la plataforma AppInventor
RECURSOS
o Docente
Web AppInventor
o Alumna
Web AppInventor

INTRODUCCIÓN
o Planteamiento de situación
Imagina que un día la empresa “Purity” que se encarga de entregar agua potable a domicilio,
quiere crear una app para que la gente realice su pedido a través de ella. El encargado de
ventas se acerca a ti y te dice que necesita tu apoyo para desarrollar la app. Te da una lista de
características y te pide una vista previa de dicha app.
PREGUNTA DETONADORA
¿Con qué desarrollarías la app que te piden? ¿Qué herramientas utilizarías para su creación?
¿Cómo mostrarías la vista previa que te piden?
o Crea una cuenta en AppInventor
Es necesario que cada alumna tenga una cuenta Gmail porque App Inventor es un trabajo
conjunto entre Google y el MIT (Instituto Tecnológico de Massachusetts).
Nota: Recuerda que Android es de Google.
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:
Tomada de AppInventor. Consultada el 22 junio 2021

Da clic sobre el botón Create Apps!
Si no has abierto sesión en Google, el navegador te pedirá que lo hagas ahora
Tomada de Gmail. Consultada el 22 junio 2021
Al acceder a tu cuenta de Google, verás la página de AppInventor 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.

Enseguida, AppInventor te mostrará una pantalla de bienvenida, da clic en el botón Continue
A continuación, te aparecerá una pantalla para seleccionar un tutorial o iniciar un proyecto

nuevo, por el momento, no realizaremos un proyecto por lo que darás clic en el botón Close

o Configura el idioma
App Inventor te muestra inicialmente la interfaz en inglés, sin embargo, puedes 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 puedes aún encontrar algunos textos genéricos de
ayuda en inglés. En todo caso, serán muy pocos, y no deberás tener problemas para trabajar
con la herramienta sin saber inglés.
REFLEXIÓN
o 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?
Te sugerimos disponer de un dispositivo Android donde se puedan probar los programas

según se vayan elaborando.
Para finalizar, el entregable de cada alumna para esta lección será la impresión de pantalla de
su registro en AppInventor.
LECCIÓN 4
LECCIÓN 4. DISEÑADOR Y EDITOR DE BLOQUES
RESUMEN
Para desarrollar aplicaciones móviles requieres de un programa o editor que cuente con los
elementos necesarios para tus creaciones, es decir, de una interfaz gráfica y bloques o
instrucciones de programación. En esta lección aprenderás qué son y cómo los utilizarás.
OBJETIVO GENERAL
Conocer e identificar los elementos (interfaz gráfica y bloques de programación) del

programa con el cual diseñarán sus aplicaciones. Además de relacionar el concepto con el
elemento de la plataforma.
o Las estudiantes conocerán el significado de interfaz gráfica y bloques de programación.

o Las estudiantes identificaran en el programa estos dos elementos y su uso.
o Las estudiantes reforzarán los aprendizajes adquiridos a lo largo de las lecciones cursadas
hasta el momento.
RECURSOS
Docente
o www.kahoot.com
Alumna
o www.kahoot.it
o Relaciona los elementos

INTRODUCCIÓN
Piensa que diseñarás una aplicación de venta de prendas de vestir, la cual requiere ser muy
intuitiva para que los usuarios puedan: buscar, seleccionar sus prendas, tallas, colocar su
dirección de envío pagar y finalizar su compra.
PREGUNTA DETONADORA
¿Cómo imaginas que deberían ser las pantallas? ¿crees que deberían ser muchos o pocos
clics los que realice el usuario para concretar su compra?
o Interfaz de usuario
Continúa con las actividades de la lección, comparte y presenta a las estudiantes el concepto
de interfaz gráfica, utilizando 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, sistemas 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á optimizada para sus
necesidades y expectativas.
Una buena GUI se caracteriza por:
o Ser sencilla de comprender y usar

o La curva de aprendizaje es acelerada y es fácil recordar su funcionamiento
o Los elementos principales son muy identificables
o Facilitar y predecir las acciones más comunes del usuario
o La información está adecuadamente ordenada mediante menús, iconos, barras, etc.
o Las operaciones son rápidas, intuitivas y reversibles
o La interfaz expresa claramente el estado del sistema o las operaciones, y brinda elementos
de ayuda.
o La navegabilidad y la usabilidad son óptimas.
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/
Muestra a las estudiantes la interfaz gráfica de APP Inventor y sus componentes.
MitAPPInventor (s.n.) Designer and block editor. Recuperado de https://appinventor.mit.edu/explore/designer-blocks

o Bloques de programación
Presenta a las alumnas la pestaña de bloques de programación y dónde se encuentran.
Los bloques de programación al unirlos ordenadamente te permitirán programar el

comportamiento de tu aplicación, se trata de las instrucciones que seguirá tu aplicación para
realizar las tareas deseadas.
MitAPPInventor (s.n.) Designer and block editor. Recuperado de https://appinventor.mit.edu/explore/designer-blocks
o 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 actividad “Relaciona los elementos”.
o Para finalizar las actividades pide a las estudiantes agruparse en equipos o pares, posterior
deberán ingresar a www.kahoot.it y tú a www.kahoot.com como clase realicen el Kahoot TC2
- Lección 4.
Realizar una dinámica de repaso en clase y en equipos propicia el aprendizaje a través del
juego, además da paso a la auto reflexión de las alumnas acerca de sus conocimientos.
REFLEXIÓN

Retomando las preguntas de reflexión, pregunta a las alumnas:
a. ¿consideras qué es importante la interfaz de usuario en una aplicación? ¿por qué?
b. ¿crees que es necesario realizar mejoras visuales a una aplicación? ¿por qué?
Para finalizar, el entregable de cada alumna para esta lección será la actividad de relación de
elementos.
LECCIÓN 5
LECCIÓN 5. CONOZCAMOS UN EMULADOR
RESUMEN
Un emulador es un software que nos permite ejecutar programas en plataformas diferentes

que para las que fueron creados. En esta lección las alumnas 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 programación y el funcionamiento de cada uno de los elementos que
agregan a su app.
OBJETIVO GENERAL
Las alumnas podrán observar el resultado de sus primeras programaciones sencillas en App
Inventor.
o Las alumnas podrán instalar el programa en sus dispositivos Android o podrán conocer el
emulador.
o Las alumnas podrán conocer los pasos a seguir para agregar sonido a los elementos de la
app.
o Las alumnas podrán comprender la función que tienen los botones en una app.
RECURSOS
Docente
o Web AppInventor
Alumna
o Web AppInventor
o App MIT AI2 Companion

INTRODUCCIÓN
Imagina que vas a crear una app que te sirva como bocina (claxon) para poder utilizarla
mientras estas en tu bicicleta alrededor de tu comunidad y advertir a las personas que van
caminando que vas a pasar.
Para que ésta sea útil necesitas que al presionar algún elemento se emita un sonido de
bocina, y puedas utilizarla en el momento que lo requieras.
PREGUNTA DETONADORA
¿Cómo imaginas que debe ser la programación para qué tu app sea funcional? ¿Qué
elemento de la interfaz es indispensable que utilices en tu app?
a. Instalación de MIT AI2 Companion

Todas aquellas alumnas que cuenten con un dispositivo Android 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
4. Abrir la app
Tomada de Play Store. Consultada el 23 junio 2021

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 despué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.
Ambos dispositivos deben estar

conectados a la misma red de WIFI para
que se pueda llevar a cabo el enlace.
Tomada de MIT AI2 Companion. Consultada el 23 junio 2021
b. Conoce el emulador
Todas aquellas alumnas que no cuenten con un dispositivo Android pueden 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 tus alumnas un poco de paciencia ya que el emulador tarda unos momentos en cargar,
una vez que éste haya cargado deberán ver la pantalla en blanco.
c ¡Empezamos a programar!
Llego el momento de que tus alumnas 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.
d Incluir un botón en la pantalla
Una vez que tus alumnas 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

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, las alumnas deben dirigirse a la barra de herramientas
“Propiedad” y borrar la información que se encuentra en la propiedad “Texto”.
Las alumnas pueden ajustar la posición de la imagen cambiando los valores Ancho y Alto.
Con los pasos anteriores tus alumnas lograron insertar un botón en forma de imagen dentro
de su app, ahora deben insertar el sonido.
Para lograr la actividad las alumnas 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.
2. Dirigirse hacia la barra de herramientas de propiedades

3. Dar clic en la propiedad “Origen< 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
Una vez que las alumnas han subido ambos elementos y han diseñado la interfaz gráfica,
llego el momento de programar las acciones que sucederán al momento de que el usuario
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
Tomada de CodeWeek. Consultada el 23 junio 2021.

2. Las llevará a la siguiente pantalla la cual, cuenta con 2 áreas principales como se muestra
en la imagen
Para poder comenzar a

programar se deben arrastrar
los bloques de programació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”

4. Seleccionar dentro de la paleta de bloques la opción “Sonido1", después arrastrar al

espacio de trabajo “Llamar . Reproducir”
Para cerrar con la actividad de hoy tus alumnas podrán probar 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 escanear el código

2. Si no cuentan con la app, seleccionar en el menú la opción “Conectar” y después

“Emulador”
Permite a tus alumnas 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 permitiendo alcanzar el objetivo.
¡Para ser una buena programadora se debe ser paciente, analítica 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 complido? Explica tu respuesta
Para finalizar, recuerda que, el entregable de cada alumna 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 instrucciones y lograra la acción.
LECCIÓN 6
LECCIÓN 6. CREA UNA APLICACIÓN PARA DIBUJAR
RESUMEN
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.
OBJETIVO GENERAL
Las alumnas realizarán su primera aplicación a través de un diseño guiado, dicha aplicación
servirá para realizar dibujos. Utilizarán tanto el diseñador de pantallas como los bloques de
programación para darle vida a su aplicación.
o Las alumnas realizarán el diseño de una app usando la interfaz de AppInventor

o Las alumnas programarán una app para realizar dibujos.
o Las alumnas conocerán el uso de algunos bloques de programación
RECURSOS
Docente
o Web AppInventor
Alumna
o Web AppInventor

INTRODUCCIÓN
Imagina que eres una programadora y quieres crear una app para niños de un kinder. 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?
Una vez que has conocido el manejo más básico del diseñador de pantallas y el editor de
bloques de App Inventor, ya estás lista para hacer algo más avanzado.
o App para dibujar
Comienza dando clic en el desplegable Proyectos, y elige la opción Comenzar un proyecto

nuevo

Una vez dentro, cambiarás el nombre de la pantalla Screen1 por Dibujar (en la propiedad
Título del componente Screen1)
Es importante siempre utilizar

nombres descriptivos para los
objetos que vas creando. 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ás un botón, y cambiarás su propiedad Texto por “Rojo”, y finalmente pondrás
en rojo su propiedad ColorDeFondo. Adelante, solamente hay que jugar con las propiedades
del botón.
Cambiarás 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ás un signo de subrayado, y no usarás tildes
(acentos), porque el sistema entiende que es un carácter especial no válido (esto aún está en
inglés).

Después, crearás otro botón verde, y finalmente otro azul, y harás lo mismo que hiciste con el
rojo, cambiarás su nombre, el color de fondo, y el texto que aparece en el botón.
Lo ideal es que los botones queden en una misma línea horizontal, tendrás que recolocarlos
en la pantalla añadiendo un componente DisposiciónHorizontal. Lo arrastramos 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ás la opción Ajustar al contenedor. Ahora, en el Visor,
arrastrarás los tres botones dentro de DisposiciónHorizontal1. Si no te gusta este nombre
puedes cambiarlo por MarcoHorizontal, por ejemplo. Para que la altura del marco se ajuste al
tamaño de los botones puedes 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 añade el lienzo, arrastrando al Visor el componente Lienzo, que se encuentra dentro
del cajó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 extienda 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
deseas.
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. Puedes probar con 300 pixels, y modificarlo más tarde si ves que no
es el mejor tamaño.
Ahora vas a definir el comportamiento del programa, a decir cómo tiene que funcionar. Ve al
editor de bloques.
Arrastrarás el bloque cuando.Lienzo1.Tocar desde el cajón del objeto Lienzo1 hasta el editor.
Esto indica que cada vez que toques el lienzo con el dedo tendrá que ocurrir lo que digas
dentro de este bloque mostaza.
Ahora arrastrarás el bloque morado (de acción) llamar.Lienzo1.DibujarCírculo hasta encajarlo

dentro del bloque mostaza. Verás que para funcionar necesita que le asocies a la derecha
tres bloques de información adicional (x, y, r).
o 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 desde arriba hacia abajo

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. Tienes que
arrastrarlo hasta encajarlo con el hueco superior del bloque morado
llamar.Lienzo1.DibujarCírculo.
Harás lo mismo con la y. Esto hará que el círculo se dibuje sobre 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 vas a dibujar, su radio (de ahí la r).
Para definir el tamaño, el radio, abre el cajón Matemáticas de la zona de bloques y arrastra el
bloque azul que indicar el valor 0 (cero) hasta el hueco r de tu bloque morado.

Si quieres que los círculos se vean bien, asigna a r el valor 10. El radio del círculo será 10.
Ahora puedes 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 botón_rojo
Utilizarás el bloque cuando.boton_rojo.Clic. Lo arrastrarás hasta el editor de bloques.
¿Qué tiene que ocurrir cuando hagas clic sobre el botón rojo? Tiene que cambiarse a rojo el
color del pincel que usas 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ás que buscar la manera de hacerlo usando algún bloque del cajón del
objeto Lienzo. Otra pista: es un bloque de color verde oscuro.
Es el bloque poner.Lienzo1.ColorDePintura.como. Lo arrastrarás hasta encajarlo dentro del

bloque mostaza cuando.boton_rojo.Clic. Falta indicar que quieres que sea el color rojo. Para
ello escogerás 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.

Harás lo mismo con los botones para color verde y color azul.
Una vez hecho, en el nuevo bloque mostaza, podrás desplegar la lista del nombre de los
botones y elegir el del color verde. Entonces sólo tendrás que cambiar el bloque rojo por el
verde, y listo. Lo mismo con el botón para el azul.
Cuando pruebes el resultado se “ensuciará” el lienzo enseguida, así que hay que poner un
botón para dejar el lienzo blanco de nuevo. ¿Cómo se hará?
Varias pistas:
· Crea DisposiciónHorizontal1 debajo del lienzo

· Mete dentro un nuevo botón y llámalo Limpiar
· Cambia el texto del botón por “Limpiar”
· Pon los bloques para que al hacer clic sobre Limpiar se limpie el lienzo
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 programa de la forma más simple y más eficiente, para que tu código
sea más “elegante”.
o Guarda un archivo con el dibujo que has hecho
Los cambios realizados en tu aplicación se guardarán de manera automática, es decir, se

actualizará conforme agregues o quites 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, coloques el nombre de tu
aplicación para identificarla en tu lista de actividades.
o Ideas para mejorar la aplicación
Puedes mejorar esta aplicación hasta donde quieras, usando la imaginación, e investigando
cómo puedes utilizar los recursos en AppInventor para incluir en tu aplicación todo lo que
vayas inventando.
Por ejemplo; poner un sello con tu nombre cuando pulses un botón o tomar una foto
existente en la memoria del dispositivo y usarla como fondo del lienzo, etc.
¿Qué mejoras se te ocurren?
Codeweek (2015). Guía de iniciación a APP INVENTOR. Recuperado de

https://codeweek.eu/docs/spain/guia-iniciacion-app-inventor.pdf
REFLEXIÓN
¿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?
de pantalla de la programación realizada para su app de dibujo.
LECCIÓN 7
LECCIÓN 7. ¿QUÉ NÚMERO ESTÁS PENSANDO?
RESUMEN
o 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
nosotros, los seres humanos.
OBJETIVO GENERAL
Las alumnas realizarán una aplicación para adivinar qué número está pensando. El programa
pensará un número y ellas tendrán que adivinarlo.
o Las alumnas conocerán qué es una variable y cómo utilizarla.

o Las alumnas comprenderán cómo se genera un número aleatorio.
RECURSOS
Docente
o Web AppInventor
o www.kahoot.com
Alumno
o Web AppInventor
o App MIT AI2 Companion
o www.kahoot.it

INTRODUCCIÓN
Las aplicaciones y tecnología también forman parte importante 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 computadora?
PREGUNTA DETONADORA
¿cómo imaginas que la computadora planea sus jugadas de ajedrez?
•Definimos la interfaz del juego
Para iniciar las actividades, lleva a las estudiantes a APP inventor y pide que generen un
proyecto nuevo.
Dependiendo de las características de tu grupo y la infraestructura con la que cuenten, las alumnas pueden realizar el
ejercicio de manera individual, parejas o equipos.
Las alumnas 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 muchos 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 hacer perder mucho tiempo cuando revisan su programa
tiempo después. Para evitarlo, es importante que se acostumbren a seguir prácticas o
o métodos que las libre de este problema a largo plazo. A partir de este proyecto practicarán
ser más ordenadas. Dejarán una E_ delante del nombre de su nueva etiqueta. Así siempre
sabrán, cuando vean los bloques, que esa es una etiqueta, y no un botón, ni campo de texto,
ni otro tipo componente. Llamarán la etiqueta E_número.
Además, el dispositivo va a tener que “escuchar” cada número que le digamos, para decidir si
hemos acertado, así que añadiremos en nuestra ventana del visor un campo de texto. Servirá
para que el jugador indique qué número cree que ha pensado el programa.
Para diferenciarlo de la etiqueta que hemos creado antes, al campo de texto le llamaremos
T_número. Así cuando estemos en el editor de bloques podremos diferenciar fácilmente
entre la etiqueta y el campo de texto, porque uno comienza con E_ y otro con T_. Aunque
parezca innecesario, esta costumbre en la asignació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. Finalmente tendremos que añadir un botón con el texto “Adivina” para que el
dispositivo sepa cuál hemos elegido. A este botón lo llamaremos B_adivinar. Cuando el
jugador lo pulse el programa tendrá que hacer algunas comprobaciones que ahora iremos
viendo.
Ya está. El dispositivo podrá escuchar lo que el jugador le diga.
o Generamos un número aleatorio
Cuando las personas jugamos a este juego, ¿qué es lo primero que hacemos cuando le
decimos a un amigo que adivine qué número estamos pensando? Pensamos un número al
azar. Para hacer lo mismo en nuestra aplicación necesitamos crear código, así que vamos al
editor de bloques. Lo primero que el programa tiene que hacer es pensar en un número. En
este caso le vamos a indicar cómo debe pensar en un número entre 1 y 10. Al ser una
instrucción matemática, abriremos el cajón Matemáticas, y usaremos el bloque entero
aleatorio. Tendremos que especificarle entre qué dos números debe pensar su número.
A continuación, vamos a hacer que el programa guarde este número en su memoria, porque
si no lo olvidaría y no podríamos jugar. Veamos que este tipo de bloque tiene que ser
encajado a la derecha de otro. Esto es porque el resultado de este bloque, el número entre 1 y
10, será el dato de entrada para otro bloque.
o Guardamos el número en una variable
Una variable es un espacio de la memoria del dispositivo reservado para guardar datos que
nuestros programas tienen que manejar durante su funcionamiento. Para poder utilizar las
variables de memoria es necesario en primer lugar darles un nombre. Para ello abrimos el
cajón Variables y elegimos el bloque inicializar global … como. Podemos darle a la variable el
nombre V_número_pensado. Es importante dar a las variables un nombre descriptivo, porque
en programas más complejos, con más variables, nos facilitará saber para qué sirve cada una.
Como venimos haciendo, y para identificar rápidamente que se trata de una variable, el
nombre comienza con una V_. Los bloques deben quedar así:
Con estos dos bloques le hemos dicho al juego que tiene que pensar un número entre uno y
diez, y guardárselo en una variable de su memoria, sin mostrárselo al jugador.
Una variable de memoria es como una caja dentro de un gran armario lleno de cajas, que es la memoria total del
ordenador. La memoria total del ordenador está compuesta por millones de estas 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?
o Pedimos un número al jugador
Para comenzar a jugar deberíamos pedirle al jugador que nos diga un número. Esto lo
conseguiremos por medio del campo de texto T_número que hemos creado en el Visor. El
jugador irá escribiendo 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,
tanto, cada vez que el jugador escriba su número y pulse el botón B_adivinar el programa lo
comparará con el número secreto.

o Kahoot (temas: bloques de programación, elementos de pantalla y función)

Para finalizar las actividades pide a las estudiantes agruparse en equipos o pares, posterior
- Lección 7.
REFLEXIÓN

Retomando las preguntas detonadoras, pregunta a las alumnas:
a. ¿cómo te podría ser útil este tipo de programación?
b. ¿qué imaginas que podrías crear?
de pantalla de la programación realizada para el ejercicio con número aleatorio.
LECCIÓN 8
LECCIÓN 8. HACEMOS COMPARACIONES CON LA
INSTRUCCIÓN SI-ENTONCES
RESUMEN
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 las alumnas darán inteligencia a su aplicación
para poder determinar si la variable cumple o no con las características establecidas.
OBJETIVO GENERAL
Las alumnas 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.
o Las alumnas podrán incluir condicionales en la programación de su app

o Las alumnas podrán analizar las líneas de programación de su app para intercambiarlas por
bucles
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

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án descalificadas 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.
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?
El bloque de programación que les ayudará a tus alumnas 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 las alumnas 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.

a. Comparamos los números
Para que las alumnas puedan comparar entre dos números 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 la alumna. Esta acción les ayudará a comparar entre los
números programados y adivinados en la lección anterior.
b. Bloque tomar para conocer el valor de una variable, texto o etiqueta

El bloque “Tomar” dentro de los bloques color naranja “Variable” les permitirá a las alumnas
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.
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 las alumnas a
identificar 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 las alumnas
deben dirigirse a la pestaña diseñador y agregar un nuevo elemento a la interfaz gráfica:

c. 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, las alumnas requieren
colocar los siguientes bloques de programación dentro de su condicional:
1. Colocar el bloque “Poner . como” al lado derecho de “Entonces”
2. Mostrar el Texto “Demasiado bajo” utilizando el bloque color fucsia

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 persona que la utiliza, por ejemplo:
1. Mostrar si el valor está “Demasiado alto”
2. Mostrar si el valor es el correcto.

Nota. El bloque de programación “Poner E_chivatito. Texto como” te volverá más fácil verificar si tu programación es correcta, sin embargo, este
bloque debe ser eliminado una vez que se lleve a cabo esta acción para no mostrar la variable a la persona que utiliza la app.
d. Bucles si-entonces anidados

Para reducir las líneas de programación de la app las alumnas pueden crear bucles anidados
que les permitirán depurar su programa de todas aquellas acciones extra que están
solicitando y que en ocasiones pueden propiciar que exista un error. El bucle anidado se debe
identificar de la siguiente manera:
REFLEXIÓN
o ¿Qué otras acciones puedes realizar programando un condicional en tu app?

o ¿Cuál es la importancia de los bucles anidados al programar?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será el ejercicio
utilizando los bloques “tomar” y “poner”.
LECCIÓN 9
LECCIÓN 9. COMPONENTES IMAGEN Y PELOTA
RESUMEN
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
tradicionalmente para la programación de juegos.
OBJETIVO GENERAL
Las alumnas 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 dispositivo o emulador.
o Las alumnas comprenderán el uso de los Sprites

o Las alumnas definirán y configurarán un escenario
o Las alumnas conocerán cómo definir y usar procedimientos
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

INTRODUCCIÓN
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 hacerlo?
El componente SpriteImagen, que se encuentra en la paleta de diseñ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 componente Pelota no podrás cambiar su aspecto, la imagen
del objeto, siempre será una circunferencia. Sí podrás hacerlo, sin embargo, para cualquier
otro SpriteImagen
a. Definición del escenario de juego
Es momento de programar un juego más sofisticado, para seguir aprendiendo conceptos y

componentes. Se trata de conducir 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.
Comienza un nuevo proyecto y le darás un nombre descriptivo, como “Atrapaobjetos”.

Empieza creando el lienzo Escenario, y dentro de él incluye un componente Pelota, que
llamarás spritePelota. De momento indicarás 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, define que su Radio es 15, para que se vea suficientemente grande en el escenario.
Para que el escenario siempre ocupe todo el espacio de la pantalla del dispositivo debes
definir algunos bloques dentro del bloque mostaza cuando.Screen1.Inicializar. Todo lo que
incluyas en este bloque se ejecutará en cuanto se abra la pantalla, es decir, en este caso será
lo primero que suceda cuando se ejecute la aplicación.

Tienes que 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ás que la pantalla rote
automáticamente poniendo el valor de la propiedad OrientaciónDeLaPantalla a 1. Con este
valor la pantalla siempre mantendrá la orientación vertical, aunque inclines el dispositivo. No
obstante, como esto no funciona con todos los dispositivos, en algunos casos será necesario
desactivar manualmente la rotación de la pantalla en el propio dispositivo.
b. 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 aplicaciones 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 pensabas que nunca utilizarías.
Ahora es el momento de investigar estos dos conceptos importantes que utilizarás en tu

aplicación más adelante: límite y proporción.
Una vez que tengas la definición de ambas palabras, escribe 3 ejemplos de cómo usar ambos
conceptos. Colócalos en una tabla, como se muestra a continuación:
Concepto Definición 3 ejemplos
Proporciones
Límites
f. Define el objetivo del juego
Este juego consistirá en ir atrapando con tu 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 escenario que se encuentre más cerca
del suelo. Recogerás cada objeto cuando la pelota choque con él.
Pregunta a las alumnas ¿qué otro objetivo podría tener este juego?

REFLEXIÓN
• Preguntas para análisis grupal
¿Cómo crees que se podría utilizar las proporciones y límites en este juego? ¿Crees que los
Sprite son indispensables en una aplicación? ¿Por qué?
de pantalla respecto al diseño de pantalla con escenario y la tabla de investigación de
conceptos.
LECCIÓN 10
LECCIÓN 10. EL MOVIMIENTO DE LA PELOTA
RESUMEN
Los acelerómetros de un dispositivo nos permiten, que al inclinar 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 dispositivo.
OBJETIVO GENERAL
La actividad a desarrollar consiste en perseguir y aplastar con una pelota todos los objetos
que aparezcan a lo largo y ancho del escenario, haciendo uso del acelerómetro.
o Las alumnas pondrán en práctica el uso del acelerómetro.

o Las alumnas crearán un juego con el que deberán desarrollar objetos interactivos.
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

INTRODUCCIÓN
En esta sesión continuarás construyendo con las alumnas el ejercicio anterior, es importante
que abran el archivo en el cuál estuvieron trabajando.
PREGUNTA DETONADORA
o ¿recuerdan lo avanzado en la sesión anterior?
o ¿hasta qué punto llego nuestro programa?
o ¿qué desarrollamos?
o 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 movimiento. Lo primero que
debemos hacer es incluir en nuestro visor un componente Acelerómetro. Lo llamaremos
Inclinación. Este componente no es visible, así que aparecerá en la parte inferior del Visor, en
la zona destinada a componentes no visibles.
Ahora utilizaremos el bloque cuando.Inclinación.CambioEnAceleración para mover la pelota.

Este bloque incluye tres variables, cada una de las cuales almacena la inclinación del objeto
en uno de los ejes de coordenadas. Vamos a hacer que la pelota tenga una dirección
dependiendo de los valores de estas tres variables. Como vimos en la sesión anterior, es
conveniente utilizar indicadores (chivatos) durante la fase de programación de nuestras
aplicaciones. En este caso mostraremos en pantalla el contenido de estas variables, para
conocer cómo están funcionando. Para ello reduciremos un poco el tamaño del escenario, y
colocaremos debajo tres campos Etiqueta para mostrar el valor de las variables.
Como la definición de las dimensiones del escenario se hace dentro del cuando.Screen1.
Inicializar, y este sólo se ejecuta al abrir la aplicación, tendremos que hacer varias pruebas
conectando y desconectando el dispositivo a App Inventor hasta encontrar las dimensiones
más apropiadas. En nuestro caso hemos reducido la altura del escenario en 150 unidades,
para dar espacio suficiente a la tabla, y a otros objetos que añadiremos más adelante.
Facilitaremos la disposición de la información usando un componente DisposiciónTabular

del cajón Disposición de la Paleta de componentes. Como queremos mostrar los datos de
tres etiquetas con sus tres valores correspondientes, tendremos que indicar que la
DisposiciónTabular tenga dos Columnas con tres Registros.
Dentro de la tabla, en la columna de izquierda, colocaremos tres etiquetas con la descripción

de cada campo, E_nombre_acelX, E_nombre_acelY y E_nombre_acelZ. En la columna de la
derecha pondremos tres etiquetas E_valor_acelX, E_valor_acelY y E_valor_acelZ, para
mostrar las variables cuyo valor queremos conocer.
Ya podemos indicarle al programa que muestre los valores de las tres variables dentro de las
etiquetas que hemos creado. Recordemos que podemos duplicar bloques y modificarlos
cuando vamos a crear varias instrucciones similares. El dispositivo siempre sabe cuál es la
aceleración en cualquiera de los tres ejes. Para saberlo nosotros y utilizarlo en nuestro juego
tenemos que utilizar el bloque mostaza cuando.Inclinación.CambioEnAceleración. Para
conocer la aceleración en el eje X, por ejemplo, tenemos que dejar el puntero del ratón
inmóvil durante un segundo sobre el campo xAccel color naranja que hay dentro del bloque
mostaza. Una vez aparezcan las opciones tomar y poner para esa variable, podremos
arrastrar el bloque tomar hasta el hueco disponible a la derecha del bloque color verde oscuro
correspondiente.
Es buen momento para experimentar qué sucede con cada una de las variables cuando
inclinamos el dispositivo. Podemos invertir un poco de tiempo probando, hasta que
entendamos cómo afecta la inclinación a cada una de estas variables. Veremos que para la Y
los valores comprenderán de -10 (cuando el dispositivo está vertical y apuntando hacia el
suelo) a 10 (cuando el dispositivo está vertical, y hacia arriba). Para la X, los valores
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 (cuando 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 inclinamos el dispositivo, es hora de programar el
comportamiento de la pelota. Tendrá que moverse en la dirección en que inclinemos el
dispositivo. ¿Cómo? Una pista: hay que utilizar el mismo bloque mostaza del sensor de
inclinación que hemos usado antes. Dentro del mismo bloque mostaza que detecta la
variación del sensor de inclinación incluiremos el movimiento de la pelota. Para ello
usaremos el bloque violeta llamar.spritePelota.MoverA, que sirve para colocar el objeto en
cualquier punto del escenario que queramos. Este bloque acepta dos parámetros de entrada,
X e Y, que definen las coordenadas donde se colocará la esquina superior izquierda del sprite
de la pelota. Haremos que la coordenada X y la coordenada Y de la pelota que definen su
colocación en el escenario vayan variando cuando inclinemos el dispositivo en cualquiera de
los dos ejes, o en los dos al mismo tiempo. Lo haremos simplemente sumando el valor de la
variable xAccel al valor de la coordenada X actual de la pelota, y sumando yAccel al valor de
la coordenada Y. Los bloques de color verde claro están dentro del cajón de propiedades de
spritePelota.
Cuando hagamos esto veremos que el comportamiento vertical, el de la coordenada Y, será

el esperado, es decir, que la pelota caerá hacia nosotros cuando inclinemos el dispositivo
hacia nuestro lado, y se alejará de nosotros cuando inclinemos el móvil en la dirección
contraria. Sin embargo, cuando inclinemos 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, tendremos que modificar el bloque
que indica el posicionamiento en la componente X de la coordenada. En lugar de sumarle el
valor de xAccel le sumaremos el valor de restar xAccel a 1.
Ya está listo. Para la coordenada Y utilizaremos el bloque de sumar, y dependiendo de si

yAccel tiene un valor positivo o negativo 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 tendremos 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! Veremos
también que la velocidad a la que se mueve la pelota es mayor si inclinamos mucho el
dispositivo. Esto es debido a que el valor de xAccel e yAccel que estamos sumándole a la
posición de la pelota también es mayor o menor en función de cuánto inclinamos el
dispositivo. Tomémonos un tiempo para asimilar estos últimos párrafos porque no son
sencillos de entender, y hagamos las pruebas que se nos ocurran, modificando el código que
hemos generado para que el programa haga cualquier otra cosa que queramos.
o Crea objetos a exprimir
A continuación, hay que crear cada objeto que vaya a aparecer en el escenario. Tendremos
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 contacto con alguno, y el juego actúe en
consecuencia. Para empezar, habrá que dibujar el sprite que queremos utilizar en el juego
para representar al objeto que queremos aplastar.
A continuación, y desde la ventana del Diseñador, incluiremos en nuestro escenario cinco

objetos SpriteImagen iguales. Le daremos un nombre diferente a cada uno, y a todos le
asignaremos el aspecto de nuestro sprite. Podemos llamarles Sprite_objeto_1 a
Sprite_objeto_5.
o Manejo de objetos
Una vez creados los cinco objetos tenemos que colocarlos en el escenario. Lo haremos con
el bloque llamar.Sprite_objeto_1.MoverA. Especificaremos para cada objeto una posición
aleatoria. Con los bloques azules entero aleatorio entre definiremos en qué coordenada X
aparecerá la esquina superior del sprite dentro del escenario. Especificaremos un 0 para
indicar que el objeto puede aparecer desde el margen izquierdo del escenario. A
continuación, le diremos 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 nos
devolviera precisamente un valor de X muy cercano al límite derecho la mayor parte del
enemigo sobrepasaría el límite derecho del escenario, y no sería visible. Para solucionar esto
se resta a Escenario.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)
Haremos lo mismo con la coordenada vertical Y, y repetiremos los mismos bloques cinco
veces, porque hay cinco objetos iguales.
(imagen de ejemplo, los sprite deben llamarse Sprite_objeto_# o el nombre que la estudiante decida)
o Procedimiento para tareas definidas y repetitivas
Cada vez que el juego se reinicie tendremos que colocar los objetos en el escenario, y
deberemos volver a usar todos estos bloques, así que lo mejor, para no tener que escribir el
mismo código varias veces cuando es tan grande, será definir un procedimiento, donde
incluiremos todos los bloques que sirven para colocar los objetos. Un procedimiento es un
conjunto de pasos bien definidos para ejecutar una tarea concreta que debe ser ejecutada
muchas veces. Por ejemplo, para describir una tarea de nuestra vida diaria, como lavarnos las
manos, podemos definir un procedimiento que incluya los siguientes pasos:
1. Abrir el grifo
2. Mojar las manos
3. Poner jabón
4. Frotar manos
5. Aclarar
6. Cerrar el grifo
7. Secar las manos con la toalla
Estos pasos podrían incluirse dentro de un procedimiento llamado “Lavar manos”. Ya no

tendríamos que enumerar cada uno de los siete pasos, sino referirnos al procedimiento por
su nombre. Los procedimientos son muy importantes, porque permiten organizar mejor el
código y ahorrar esfuerzo a la hora de programar. En nuestro caso, podremos invocar en
cualquier momento al procedimiento para hacer que la aplicación vuelva a colocar los
objetos aleatoriamente en el escenario.
El bloque para definir procedimientos se encuentra dentro del cajón Procedures.
Una vez definido el procedimiento, y modificado su nombre, los bloques quedarán así.
(imagen de ejemplo, los sprite deben llamarse Sprite_objeto_# o el nombre que la estudiante decida)
En este caso haremos que se ejecute el procedimiento dentro del bloque

cuando.Screen1.Inicializar ejecutar.
o Implementa la mecánica del juego
El jugador deberá inclinar el dispositivo para guiar a la pelota hacia cada uno de los objetos y
chocar con ellos. Cada vez que eso suceda deberemos retirar el objeto del escenario. El juego
acabará cuando el jugador haya hecho desaparecer todos los objetos. Para saber cuándo la
pelota choca con un objeto utilizaremos el bloque cuando spritePelota.EnColisiónCon otro
ejecutar. Este boque está dentro del cajón de recursos relacionados con el objeto
spritePelota.
Lo que pongamos dentro de este bloque se ejecutará exactamente cuando eso suceda. En
este caso, lo que queremos es que desaparezca el objeto contra el que ha chocado la pelota.
Podremos hacer referencia a este objeto a través del parámetro otro incluido en el bloque
cuando spritePelota.EnColisiónCon otro ejecutar que hemos definido. Ahora vamos a utilizar
un nuevo tipo de recurso, un bloque que no habíamos usado todavía. Este bloque se
encuentra dentro del cajón Cualquier componente / CualquierSpriteImagen. La diferencia
entre este cajón y los que hemos abierto antes es que los bloques contenidos aquí nos
permitirán definir acciones que harán referencia a diferentes objetos del mismo tipo. En este
caso hará referencia a objetos del tipo SpriteImagen, como son nuestros cinco “objetos”. Lo
que vamos a hacer es indicarle al programa que debe hacer desaparecer de la pantalla cada
objeto cuando la pelota choca con él. Para no tener que repetir el código para cada objeto,
usaremos el bloque genérico poner SpriteImagen.Visible del componente como. Este bloque
nos permitirá cambian el valor de la propiedad Visible de cualquier componente del tipo
SpriteImagen, que especificaremos en el hueco del componente.
Usaremos el parámetro otro del bloque mostaza que hemos añadido antes para indicar a qué
objeto concreto queremos referirnos, y estableceremos a falso el valor de la propiedad Visible
del objeto, para que desaparezca del escenario.
Muchas propiedades de los objetos tienen dos posibles valores, cierto o falso. Podemos
definir el valor para este tipo de variables tomándolo del cajón Lógica.
El bloque completo que define el comportamiento de cada objeto cuando la pelota choca con
él quedará como en la siguiente figura.
o Gestión del marcador
Tenemos también que mantener un contador de objetosrestantes, para saber cuándo se han
recogido todos y dar por completada la misión. Para ello usaremos dos variables,
v_objetos_totales, y v_objetos_restantes. La primera define el número de objetos que vamos
a manejar en cada partida, y la segunda define el número de objetos que quedan por hacer
desaparecer. Como siempre, para indicar que estamos definiendo una variable, y que luego
sea más fácil identificarla como tal, comenzaremos los nombres con el prefijo v_.
Cada vez que la pelota choque con un objeto, tendremos que restar 1 al número de objetos
restantes. Cuando la variable v_objetos_restantes sea 0, significará que el jugador ha
recogido todos los objetos, y el juego habrá terminado.
Podemos añadir un indicador (chivato) debajo del escenario para saber cuál es el contenido
de la variable v_objetos_restantes. Así sabremos si nuestro juego está gestionando
correctamente esta variable tan importante.
Tenemos que acordarnos de eliminar cualquier indicador (chivato) que hayamos utilizado
antes de hacer la versión final del programa.

REFLEXIÓN
• ¿qué elementos o funcionalidades nuevas añadieron a su programación?

• ¿creen que podrían añadirle más elementos? ¿cómo cuál?
• ¿en qué otros lugares han hecho uso del acelerómetro?
• ¿en qué otra situación considera que podrían utilizar el acelerómetro?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será el ejercicio
“Programación de tareas repetitivas”.

LECCIÓN 11
LECCIÓN 11. ¿CUÁNDO TERMINA EL JUEGO?
RESUMEN
Las alumnas continuarán agregando más elementos a su juego que les permita volverlo más
competitivo y entretenido para todas aquellas personas que decidan jugarlo.
OBJETIVO GENERAL
Las alumnas terminarán de programar su app que contiene un juego cronometrado.
o Las alumnas podrán mover la duración de su juego

o Las alumnas podrán establecer un principio y un fin en su juego
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

Es momento de terminar de programar el juego que comenzaste con tus alumnas en la

lección anterior, hacen falta unos últimos detalles para que en grupo puedan probarlo y
divertirse.
a. Reorganizando los bloques de código
Existen bloques de programación que ayudan a organizar mejor una app, en este caso los
deben utilizar los bloques de color morado “Procedimiento” de la siguiente manera:
Después deben nómbralos como inicio y fin.
En el primero las alumnas deben agregar aquellos bloques que les permita realizar las
acciones para iniciar con el juego. El de fin por el momento debe quedarse vacío.
Nota. Se debe incluir un llamado a estos nuevos bloques que se van a utilizar para que puedan correr dentro de nuestra app. Para
ello deben incluir el bloque “Llamar Iniciar_juego” dentro de la programación de la pantalla 1.
b. Limitar el tiempo para crear tensión
Para hacer el juego más entretenido y dinámico las alumnas pueden agregar un cronometro
que muestre segundo a segundo como al participante se le va agotando el tiempo para
derribar a sus enemigos.
Para ello tienen que agregar un nuevo elemento a la interfaz gráfica, un reloj, el cual podrán
encontrar en la paleta de "Sensores”, nombrar el reloj “Cada_Segundo” y agregar un intervalo
de 1000 milisegundos que equivalen a 1 segundo.
Tomada de AppInventor. Consultada el 28 junio de 2021

Posteriormente deben programar el nuevo elemento con estos bloques de programación,

para que así el jugador pueda ver cómo van pasando los segundos y se acerca el fin del
juego.
c. ¿Cuándo se termina el juego?
El juego que tus alumnas han programado en su app se puede terminar en dos ocasiones:
1. Cuando se termina el tiempo.
2. Cuando se terminan los competidores.

d. Fin del juego
Vale la pena agregar una nota para dejar saber al jugador que su oportunidad de jugar a
terminado, ya sea por cualquiera de las dos opciones anteriores. Para poder indicar el fin del
juego se deben utilizar bloques de color morado, verde y rosa de la siguiente forma:
Sin embargo, con esta programación el jugador únicamente podrá ver el mensaje por un
segundo, gracias a la programación que escribimos para limitar el tiempo de juego. Es por
ello que se debe congelar el tiempo de esta manera:
Nota. Para que el juego no se repita de forma infinita con los ajustes que se acaban de realizar para dar más segundos de lectura
a la frase “Fin del juego” debes realizar las siguientes adecuaciones en el bloque de “Iniciar_Juego”.

e. Añade un botón para empezar de nuevo
Los pasos para tener un botón que permita al jugador volver a intentarlo son:
1. Agregar un nuevo botón a la interfaz gráfica de la app
2. Programar el botón
Nota. Recuerda eliminar los chivatitos que creaste para verificar el funcionamiento de tu app,
estos mostraran las respuestas a los jugadores.
REFLEXIÓN
o ¿Qué mejoras podrías realizar a tu juego?

o ¿Qué parte de la programación te resulto más difícil?¿Por qué?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será una captura
de pantalla del ejercicio con botón para empezar juego de nuevo
LECCIÓN 12
LECCIÓN 12. APLICACIÓN ¿CÓMO ME SIENTO HOY?
RESUMEN
¿Cómo nos sentimos cuando estamos tristes? ¿Qué es exactamente la tristeza? ¿Qué
podemos hacer para estar alegres de nuevo? Hablar con las alumnas sobre las emociones
les ayudan a ponerles nombre, a saber, identificarlas cuando las sientan y a gestionarlas para
sentirse mejor.
OBJETIVO GENERAL
Las alumnas programarán una aplicación que pueda realizar un seguimiento de cuántas
veces sienten diferentes emociones a lo largo del día.
o Las alumnas programarán haciendo uso de ciertos bloques de programación

o Las alumnas comprenderán la importancia de organizar la información al momento de
programar
o Las alumnas analizarán las principales emociones que sienten en diversos momentos de
su día
RECURSOS
Docente
o App ¿Cómo me siento hoy?
Alumno
o App ¿Cómo me siento hoy?

INTRODUCCIÓN
Las emociones las vivimos todos los días, pero a pesar de sentirlas diario no es fácil
reconocerlas. Imagina que pudieras crear una app que te ayuda a reconocer tus emociones y
te llevara la cuenta de la cantidad de veces que te enojas, te pones triste o incluso te pones
muy alegre.
PREGUNTA DETONADORA
¿Una app podría identificar tus emociones? ¿cómo crees que tendría que funcionar?
a) Diseño de pantalla
Como verán en el link que se ha dado, ya está diseñada la pantalla de la aplicación, sin
embargo, podrán realizarle los cambios que se les ocurra. Lo único que deben considerar es
que siempre deben estar los botones con emojis ya que es una app para identificar cuántas
veces al día sienten las diferentes emociones.
¡Echa a volar tu imaginación!

b) Programación de bloques
Pide a las alumnas que den clic en el cajón happyButton a la izquierda y arrastren al espacio
de trabajo del bloque When happyButton.Click.
Ahora, den clic en el cajón happyLabel, luego arrastren el conjunto happyLabel.Text para
encajonar al bloque when happyButton.Click.
Ahora, den clic en el cajón happyLabel, luego arrastren el conjunto happyLabel.Text para
encajonar al bloque when happyButton.Click.
Después den clic en el cajón de matemáticas. Arrastren el bloque __ + __ y agréguenlo al

conjunto happyLabel.Text para bloquear.
Den clic en el cajón happyLabel. Arrastren el bloque happyLabel.Text y agréguenlo al primer

conector del bloque __ + __.
Ahora, den clic en el cajón de matemáticas. Arrastren el bloque 0 y agréguenlo al segundo

conector en el bloque __ + __. Cambien el "0" por un "1".

Intenten hacer clic en los diferentes emojis. ¿Qué pasa ahora?
Ahora harán que el emoji enojado también funcione. Hagan clic con el botón derecho en el
bloque when happyButton, a continuación, den clic en Duplicar.
Den clic en el menú desplegable "happyButton" en when happyButton. Después, clic en

bloquear y elije "angryButton"

Cambien el menú desplegable de set happyLabel.Text para establecer angryLabel.Text. y

cambien happyLabel.Text a angryLabel.Text
Repitan los pasos últimos 3 pasos para sadButton.
Pruébenla en su dispositivo. Toquen los diferentes emojis. ¿Los números aumentan cuando
tocas los botones?
o Kahoot (temas: bloques de programación, elementos de pantalla y función)

Para finalizar las actividades pide a las estudiantes agruparse en equipos o pares, posterior
- Lección 12.
juego, además da paso a la autorreflexión de las alumnas acerca de sus conocimientos.
REFLEXIÓN
¿Qué usos le darías a esta app además del que ya conoces? ¿Qué le cambiarías a esta app?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será la app
funcional en un emulador o en su dispositivo.
LECCIÓN 13
LECCIÓN 13. APLICACIÓN TALK TO ME O HÁBLAME
RESUMEN
Las aplicaciones móviles han revolucionado la industria tecnológica. Actualmente las apps
inclusivas son una demostración que las nuevas tecnologías no solo tienen una función
económica. Su desarrollo puede ser de gran utilidad para la gente con necesidades
especiales.
OBJETIVO GENERAL
En esta actividad las alumnas crearán una aplicación que hable y diga en voz alta un mensaje
de texto que previamente habrán escrito.
o Las alumnas harán uso del elemento Texto A Voz.

o Las alumnas combinarán diversos elementos para construir la programación objetivo.
o Las alumnas conocerán los alcances de las aplicaciones para el beneficio y apoyo de otras
personas.
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

INTRODUCCIÓN
Para dar inicio a las actividades deberás leer la siguiente situación a tus alumnas:
Piensen en que son voluntarias y deben impartir una actividad o taller en una escuela, su
actividad se basa en llevar cuentos cortos a niños pequeños para que los lean. Sin embargo,
al recibir mayor información acerca de los niños les informan que carecen de vista.
PREGUNTA DETONADORA
Con ayuda de las aplicaciones móviles ¿cómo resolverían el problema? ¿qué podrían crear?
o Diseño de pantalla
Para iniciar el ejercicio pide a las alumnas ingresar a APP Inventor y comparte las
instrucciones.
Lo primero que deberán realizar será abrir un proyecto y nombrarlo, como sugerencia
“háblame”. Una vez nombrado el nuevo proyecto estarán dentro del programa en el apartado
de diseño.
Deberán crear un botón: vayan a la Paleta y dentro del apartado “interfaz de usuario”
seleccionen el Botón y arrástrenlo al visor.
En el apartado propiedades tendrán que modificar el apartado “Text” y escribir “Háblame” o

bien en inglés “Talk to me”.
Una vez hecho esto conectarán su móvil al ordenador para poder visualizar la aplicación en
la pantalla.
Para ello, deben ir a la opción Conectar del menú superior, dentro de esta opción
seleccionarán “Al companion”.
Al seleccionarla les aparecerá una ventana con un código QR que podrán escanear o bien un
código de 6 dígitos que deberán introducir en su teléfono dentro de la aplicación que ya han
descargado “MIT AI2 Companion”.
Una vez escaneado el código o escrito el dígito, en su pantalla del móvil aparecerá lo mismo
que ven en el simulador de móvil del ordenador.
o Añadir la Voz
Primero deberán añadir un componente de voz hablada. Para eso deberán ir a la paleta y
dentro del apartado “medios” arrastrar el componente “texto a voz” al visor.
Al arrastrar el componente al visor y soltar el botón del ratón, verán cómo automáticamente
se coloca en la parte inferior del visor. Esto sucede porque es un componente no visible.
Hasta ahora han introducido todos los componentes que necesitan, ahora deberán introducir
y modificar bloques para que la aplicación funcione, es decir, hacer la programación.
o Programación en bloques
Para programar deberán ir al apartado de “bloques”.

Del apartado Screen 1 seleccionen el componente “botón 1" y arrastren al visor el bloque
“Cuando Boton1.Clic ejecutar”
Del apartado Screen 1 seleccionen el componente TextoAVoz1. Coloquen dentro de “Cuando

Boton1.Clic ejecutar” el bloque “llamar TextoAVoz1 hablar mensaje”
Por lo tanto, solo falta añadir el texto que quieren que les diga. Esto se hace seleccionando el
bloque “ “ desde la opción de texto, este bloque les permitirá escribir en él.
Entre las comillas deberán escribir el mensaje que quieran que hable o diga el móvil: como,
por ejemplo: “Felicidades, has creado tu primera aplicación”.
o Probar la aplicación en el móvil
Primero deberán comprobar que no han perdido la conexión, en caso de que sí, deberán
repetir los pasos anteriores, es decir, conectar el móvil al ordenador mediante el código. Una
vez hecho solo tienen que probar desde su móvil si al pulsar el botón funciona.
o Guardar el proyecto
¡Importante! deben guardar el proyecto seleccionando en el menú superior proyecto >

guardar proyecto.
o Descargar la aplicación en el móvil
Para descargar la aplicación a su móvil definitivamente deberán ir al menú principal “Generar”

y elegir la opción “App (generar código QR para el archivo .apk)” Esto generará un código QR
que podrán escanear con su aplicación MIT All Companion e instalará y guardará la
aplicación en su móvil.
REFLEXIÓN
Retomando la situación planteada al inicio de la lección, pregunta a las alumnas:
o ¿consideran importante el uso de las aplicaciones inclusivas?

o ¿qué aplicaciones consideran que podrían desarrollar para ayudar a otras personas?
Para finalizar, recuerda que, el entregable de cada alumna para esta lección será la App en el
emulador.
En un emulador o en su dispositivo.
LECCIÓN 14
LECCIÓN 14. BOLA DE NIEVE
RESUMEN
En esta lección las alumnas tendrán la oportunidad de repasar el tema de utilizar un

acelerómetro dentro de su app para que esta realice una acción cuando el celular o el
dispositivo electrónico realice un movimiento en específico que pueda ser identificable. En
esta ocasión podrán generar una bola de nieve de su ciudad que funcione como una real, que
al momento de agitarla cae la nieve sobre el paisaje que se tiene dentro de ella.
OBJETIVO GENERAL
Las alumnas podrán programar una bola de nieve dentro de su app.
o Las alumnas podrán programar un acelerómetro

o Las alumnas podrán utilizar la función cualquier componente para programar varios
elementos a la vez
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor

PLANTEAMIENTO DE SITUACIÓN
Imagina que pudiera caer nieve sobre tu ciudad, ¿Te gustarías vivir esa experiencia? Puedes
crear una app que te ayude a visualizar una nevada sobre el panorama de tu ciudad.
PREGUNTA DETONADORA
¿Qué bloques de programación debes utilizar para programar una nevada sobre una imagen
de tu ciudad?
o Para poder desarrollar
a. Diseño de pantalla
Para poder diseñar la interfaz gráfica de su app tus

alumnas primero deberán descargar en su
computadora o tableta una imagen panorámica de
su ciudad, o de alguna ciudad que les guste mucho,
o en la que quisieran vivir. Nota. La imagen debe
encontrarse en formato jpg
Una vez que ya cuentan con la imagen en sus

computadoras llego el momento de ingresar a App
Inventor y comenzar con el diseño, siguiendo estos
pasos:
1. Ajustar las propiedades de la pantalla

2. Agregar un “Lienzo” a tu app, puedes encontrarlo en la paleta de “Dibujo y animación"

3. Cargar dentro de tu lienzo la imagen panorámica de la ciudad que elegiste. Ésta debe
contener las siguientes especificaciones en la paleta de propiedades
4. Agregar 10 bolas en la parte superior de la imagen y asegurar que todas cuenten con las
siguientes propiedades.

b. Programación en bloques
Ahora las alumnas deben programar los elementos que conforman la interfaz para que
pueda suceder la acción que representa la caída de nieve.
1. Identificar la sección "Cualquier componente"
2. Aleatorizar la ubicación de una bola determinada

3. Poner cada bola en una lista que se rellena cuando la pantalla se inicializa
4. Cada bola debe desaparecer cuando toque el borde inferior. Crear sólo el primer manejador
de eventos para la primera bola.
Pide a tus alumnas que retomen los conocimientos y habilidades desarrolladas en las
sesiones anteriores para agregar una canción navideña que acompañe la caída de nieve en
su app.
REFLEXIÓN
• ¿Por qué es importantes agrupar los bloques y programar en conjunto en lugar de manera
individual cada elemento?
• ¿Qué otros elementos podrías agregar a esta app para mejorar la interacción con el
usuario?
emulador.
https://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/SnowGlobe/SnowGlobeProj
ect.pdf
LECCIÓN 15
LECCIÓN 15. APLICACIÓN BOLA MÁGICA
RESUMEN
El azar es una casualidad presente, en diversos fenómenos que se caracterizan por causas
complejas, no lineales y sobre todo que no parecen ser predictibles en todos sus detalles.
OBJETIVO GENERAL
Las alumnas crearán una app que cuando se activa, la bola entregará una de sus
predicciones clásicas, como "Definitivamente es así" o "Responde nebuloso”, inténtalo de
nuevo”.
o Las alumnas comprenderán el uso del acelerómetro.

o Las alumnas conocerán cómo hacer y usar una lista
o Las alumnas utilizarán bloques de programación para responder a eventos
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor
o Sonido Chaching
o Sonido de Tintineo
o Sonido Ta-da
o Imagen bola mágica
o Imagen bola mágica

INTRODUCCIÓN
Imagina que quieres jugar con tus amigas y/o amigos a dar respuesta a preguntas con ayuda
del azar, para esto te serviría una app que pueda darte respuestas aleatorias y que te hagan
pasar un rato de diversión.
PREGUNTA DETONADORA
¿Qué bloques crees que serían necesarios para esa app? ¿cuál sería el diseño de la app para
que sea divertido para tus amigas y para ti?
La aplicación final Bola Mágica entregará una predicción de una lista que tus alumnas han
diseñado. Para comenzar, primero deberán crear un botón con una imagen y lo programarán
para que reproduzca un sonido cuando se haga clic en el botón.
Primero deberán crear un proyecto nuevo y asignar el nombre de "Bolá Mágica"

A continuación, deberán descargar una imagen y un archivo de sonido de la lista de recursos
para usar en su aplicación. Harán clic en el enlace de la imagen o el sonido, luego elijan
"Descargar". Guarden los archivos multimedia en una ubicación conveniente en su
computadora que recordarán.
En la columna izquierda del diseñador, deberían ver la paleta de interfaz de usuario. Arrastren
un componente Botón hasta el Visor
Establezcan la imagen del botón en una imagen de bola:
Hagan clic en su botón recién agregado para ver sus propiedades en el panel Propiedades a
la derecha. Debajo de Imagen, hagan clic en la palabra "Ninguno" y aparecerá una pequeña
ventana de selección. Den clic en el botón "Cargar archivo" y busquen el lugar donde
guardaron la imagen de Bola mágica.
Seleccionen el archivo, luego hagan clic en Aceptar para cerrar la ventana de selección. Den
clic en Aceptar nuevamente en el panel de propiedades para cerrar la pequeña ventana
emergente.
Vayan a la propiedad Texto en el panel Propiedades y eliminen el texto de visualización de su

componente Botón.

Desde la paleta de medios, arrastren un componente del reproductor al panel del visor. El
componente Player reproduce archivos de sonido. Tengan en cuenta que, dado que el
reproductor no será una parte visible de la aplicación, aparece en la parte inferior del panel del
visor, como un componente no visible.
Deberán configurar el archivo fuente del componente Player:

Den clic en el componente Player recién agregado para ver sus propiedades en el panel
Propiedades a la derecha. Debajo de Fuente, hagan clic en el cuadro pequeño en la palabra
"Ninguno" y aparecerá una pequeña ventana de selección.
Hagan clic en el botón "Cargar archivo" y busquen el lugar donde guardaron el archivo de
sonido. Seleccionen el archivo de sonido, luego den clic en Aceptar para cerrar la ventana de
selección. Por último, clic en Aceptar nuevamente en el panel de propiedades para cerrar la
pequeña ventana emergente.
Han completado el trabajo en el Diseñador para la Parte Uno de esta aplicación. Ahora es el
momento de pasar al Editor de bloques para programar el comportamiento de estos
componentes.
En la esquina superior derecha del Diseñador, haga clic en el botón Bloques.

Comenta a tus alumnas que le dirán a su aplicación cómo debe comportarse cuando se hace
clic en el botón. En realidad, esto es muy simple en App Inventor, ¡porque el "código" del
programa solo consta de dos bloques!
Una vez que el Editor de bloques está abierto, hay varias opciones que se ejecutan a lo largo
del lado izquierdo de la pantalla. Nos referimos a estos como una "paleta con cajones".
En Screen1, hagan clic en Button1. Arrastren el bloque when Button1.Click al área de trabajo. A
continuación, hagan clic en el Jugador 1 cajón, arrastren el Player1.Play bloque en el área de
trabajo y la insertarán en la que dice Button1.Click bloque. Harán clic entre sí como piezas de
un rompecabezas magnético.
Tus bloques ahora deberían verse así:
¡Eso es! Han escrito el programa para la primera parte de Bola mágica. Ahora es el momento
de probar que funciona correctamente.
Para probarlo en tu emulador o en tu dispositivo tengan en cuenta las siguientes

consideraciones:
Emulador: hagan clic en la imagen, escucharán la reproducción de sonido.

Dispositivo: toquen la imagen, escucharán la reproducción de sonido.
Nota: Si no escuchas el sonido, primero asegúrate de tener el volumen alto en tu dispositivo
(o computadora si usas un emulador).
Ahora que tienen el botón para realizar una acción (reproducir un sonido), queremos
extender esa acción para darle al usuario una predicción. Primero necesitarán dos etiquetas:
Label1 mostrará las instrucciones y Label2 mostrará la predicción elegida. Usarán bloques
para programar un ListPicker para elegir de una lista de predicciones. Cada vez que se hace
clic en el botón, la aplicación cambiará el texto de Label2 para mostrar la predicción elegida.
Vuelvan a la ventana del Diseñador en su navegador y agreguen algunas cosas nuevas a su

aplicación.
Desde el cajón Diseño, arrastren un componente VerticalArrangement. Al principio, se verá

como una caja vacía, pero cuando coloquen cosas en ella, App Inventor sabrá que desea
alinearlas verticalmente (una encima de la otra).
Desde el cajón de la Interfaz de usuario, arrastren un componente Etiqueta y suéltenlo dentro

del componente Arreglo vertical . En el panel Propiedades, cambie la propiedad Text de Label1
a "Ask the Magic 8-Ball una pregunta".
Desde el cajón de la interfaz de usuario, arrastren sobre otro componente Label (Label2) al
cuadro VerticalArrangement para que quede justo debajo de Label1. Cambien la propiedad
Text de Label2 a "Toque la bola mágica 8 para recibir su respuesta". Luego, arrastren Button1
para que también esté dentro del componente VerticalArrangement encima de las dos
etiquetas. Esto hará que se alineen entre sí en una línea vertical. (Nota: esto puede ser un
trabajo complicado con el mouse, pero colóquenlos allí correctamente y el
VerticalArrangement cambiará de tamaño para adaptarse a todo).

Ahora es el momento de volver al Editor de bloques para programar los componentes que
acaban de agregar a su proyecto.
¡Ahora viene la parte divertida! Van a hacer una lista de predicciones y programarán el botón
para elegir un elemento de la lista y mostrarlo en Label2. El botón también reproducirá el
sonido que programó en la primera parte. He aquí cómo hacerlo:
Desde la paleta Bloques, hagan clic en el cajón Label2 para ver todos sus bloques asociados.
Arrastren sobre el conjunto verde Label2.BackgroundColor e insértenlo justo encima del
bloque Player1.Start. Observen que el bloque when Button1.Click se agranda
automáticamente para adaptarse al nuevo bloque.
Al hacer clic en la palabra "BackgroundColor", aparecerá un menú desplegable para que
puedan cambiar la propiedad que se está configurando. Elijan Texto para que su bloque se
establezca como Etiqueta2.Texto.
Desde el cajón integrado, hagan clic en el cajón Listas. Arrastren sobre el bloque de selección
de elementos aleatorios y conéctenlo al conector abierto del bloque Label2.Text establecido.
Desde el cajón integrado, hagan clic en Listas nuevamente, luego arrastren el bloque para
hacer una lista y conéctenlo al conector "lista" en el lado derecho del bloque de selección de
elementos aleatorios.
Desde el cajón integrado, den clic en el cajón de texto, arrastren un bloque "" y conéctenlo al
conector de elementos del bloque para hacer una lista. Hagan clic directamente en el espacio
del bloque. A continuación, pueden escribir texto allí. Piensen en los dichos que desea en su
lista de predicciones para Magic 8-Ball. Escriban la primera predicción en este nuevo bloque
de texto.
Observen que después de conectar dos bloques de texto, no hay más sockets para agregar
más respuestas. Para crear más sockets, deben hacer clic en el icono del mutador azul oscuro
en el bloque. Hacer una lista se llama bloque mutador y, por lo tanto, puede expandirse o
reducirse haciendo clic en el ícono azul en la esquina superior izquierda.

Encajen cada bloque de texto en el bloque de hacer una lista. Los bloques deberían verse así:
¡Tienen una aplicación Bola Mágica! Ahora su aplicación es completamente funcional y

predecirá el futuro con absoluta certeza. Prueben que esto funciona y luego regresen para
algunas tareas desafiantes para hacer que la aplicación sea aún más divertida.
Para probar su app tomen en cuenta lo siguiente:

Emulador: Den clic en la imagen de la bola mágica, deberían ver una de sus respuestas en el
campo Label2.Text, seguida del sonido.
Dispositivo: toquen la imagen de la bola 8, deberían ver una de sus respuestas en el campo
Etiqueta2.Texto, seguida del sonido.
Aunque tengan una aplicación Bola Mágica que funcione, hay una manera de hacerla aún
más divertida. Pueden utilizar el componente AccelerometerSensor para hacer que el
teléfono responda al temblor en lugar de responder al clic de un botón. Esto hará que la
aplicación se parezca mucho más a un verdadero artefacto de adivinación.
Esta parte solo se puede hacer con un teléfono o tableta real equipada con un acelerómetro. Si están utilizando un emulador,
omita esta parte.
Vuelvan al Diseñador. Desde el cajón Sensores, arrastren sobre un componente

AccelerometerSensor . Observen que desciende automáticamente al área de componentes
no visibles de la ventana del Visor. Este es el único componente nuevo que necesita, así que
vaya al Editor de bloques para cambiar su programa.
Desde la paleta de Bloques, hagan clic en AccelerometerSensor , luego arrastren el bloque

para cuando AccelerometerSensor.Shaking .
Desconecten todos los bloques del interior del bloque when Button1.Click y muévanlos
dentro del bloque when AccelerometerSensor.Shaking . NOTA: pueden mover secciones
enteras de bloques conectados haciendo clic en el bloque superior o izquierdo y
arrastrándolo. Los bloques conectados vendrán con él.
Eliminen el bloque when Button1.Click para mantener ordenada su área de trabajo.
Los bloques deberían verse así:
Dispositivo: cuando sacudes el teléfono, debería mostrar una respuesta y reproducir un sonido.
Emulador: Desafortunadamente, no puedes simular que el teléfono se agita cuando usas el emulador.
Actividad tomada de https://appinventor.mit.edu/explore/ai2/magic-8-ball. Consultada el

29 junio de 2021.
REFLEXIÓN
¿En qué otras apps se te ocurren que puedan utilizarse estos bloques de programación?
¿Qué uso le darías a esta app además de la que se menciona en la lección?
emulador.
LECCIÓN 16
LECCIÓN 16. MAPAS
RESUMEN
Los dispositivos móviles están en constante crecimiento gracias a las nuevas tecnologías
que tienen impacto en nuestro día a día y se han convertido en una herramienta esencial de
nuestra vida.
La geolocalización es la capacidad para obtener la ubicación geográfica real de un objeto,

como un radar, un teléfono móvil o un ordenador conectado a Internet.
Es una herramienta que utilizamos ya sea para encontrar dispositivos o ubicaciones, entre
otras cosas.
OBJETIVO GENERAL
Las alumnas centrarán sus habilidades de programación desarrolladas hasta el momento en

la creación de una aplicación que sirva como guía turística o bien de su ciudad.
o Las alumnas crearán una aplicación que funcione como guía turística, o mapa turístico de
una ciudad.
o Las alumnas enlazaran su aplicación a “Google Maps”.
RECURSOS
Docente
o Web AppInventor
o www.kahoot.com
Alumno
o Web AppInventor
o www.kahoot.it
LECCIÓN 16. MAPAS

INTRODUCCIÓN
Imagina que realizarás un tour por una ciudad nueva y deseas que ningún sitio de los que
deseas visitar se te escape o bien amigos de otro país te visitarán y serás su apoyo para
conocer la ciudad.
PREGUNTA DETONADORA
¿Cómo podrías realizar una guía turística con ayuda de una aplicación? ¿qué utilizarías?
¿qué contendría tu aplicación?
o Diseño de pantalla
Para iniciar el ejercicio pide a las alumnas ingresar a APP Inventor y comparte las
instrucciones.
Lo primero que deberán realizar será abrir un proyecto y nombrarlo, como sugerencia
“háblame”. Una vez nombrado el nuevo proyecto estarán dentro del programa en el apartado
de diseño.
LECCIÓN 16. MAPAS
Lo primero que deberán hacer es añadir los componentes necesarios para la aplicación. A
continuación, se muestra una tabla con los componentes que deberán añadir, el lugar donde
lo pueden encontrar, y cuál es su función principal.
Básicamente tendrán una imagen de la ciudad de fondo, una etiqueta que invita al usuario a
descubrir la ciudad desde tú móvil, y dos componentes interesantes nuevos:
“SelectorDeLista“ y “Activity Starter”.
SelectorDeLista mostrará una lista de los destinos dentro de la ciudad.
Activity Starter inicia Google desde la aplicación, en este caso Google Maps, cuando se elija
un destino.
Cuando hayan llegado a este punto, deberán de tener su aplicación, más o menos con este
aspecto:
LECCIÓN 16. MAPAS
Pongan atención a las mayúsculas y minúsculas, debe estar escrito tal cual se muestra en la
tabla:
Modifica las propiedades de ‘Imagen1’
• Introduzcan una imagen representativa de su ciudad en las propiedades de ‘Image1’.

• Ajusten el tamaño de la imagen para que quede atractiva a la vista en la aplicación
(Width/Height)
Modifica las propiedades de ‘etiqueta1’
• Cambien el texto que aparece en etiqueta1 modificando sus propiedades. En su caso

pondrán: “Disfruta visitando esta ciudad”.
• Pueden cambiar otros parámetros como color, tamaño de texto, alineación etc. a su gusto.
Modifica las propiedades de ‘Boton1’
• El componente de “Selector De Lista” está asociado con un botón que les permitirá elegir
monumento o lugar de la ciudad. Cambien las propiedades y escriban un texto que indique
su función.
o Programación en bloques
Ahora añadirán el comportamiento a los componentes en el editor de bloques

(programación). Deberán definir una lista de destinos y dos comportamientos:
• Que cuando la aplicación comience, se inicie el Selector de lista para que puedas elegir un
destino
• Que cuando el usuario elija un destino de la lista se abra la aplicación de Google Maps.
Crear una lista de destinos
• Dentro de Blocks Editor, deberán crear una variable llamada ‘Destinos’ y cambiar las
siguientes propiedades:
LECCIÓN 16. MAPAS
Debería de quedarte algo así. Con todos los lugares que decidan que se incluirán en su guía.
Permitir al usuario que elija un destino
El Selector De Lista debe mostrar los destinos que han creado en la lista y que el usuario
tendrá para elegir. Para ello se utilizará el Selector de lista. Cuando la pantalla se inicie, hará
que los elementos del Selector de lista sean los elementos de la lista de Destinos. En
resumen, cuando la aplicación se abra, cada elemento del Selector de lista se convertirá en
un elemento de la lista de Destinos creada.
Para ello deberán añadir los siguientes bloques:
Abrir Google Maps cuando elijamos un destino
A continuación, programarán la aplicación para que cuando el usuario elija un destino, el

Activity Starter abra Google Maps y busque el destino seleccionado. Para ello deberán añadir
los siguientes bloques:
LECCIÓN 16. MAPAS
Recuerde probar su aplicación y hacer todas las mejoras que deseen.
Upcommons (s.n.) Creación del material didáctico para el desarrollo de aplicaciones para
teléfonos móviles con el Software App Inventor. Recuperado de
Htps://upcommons.upc.edu/bitstream/handle/2117/80354/97644_Annexes%201%202%20
i%203.pdf?sequence=2&isAllowed=y
o Kahoot, temas: bloques de programación, diseño de pantalla y función.
Para finalizar las actividades pide a las alumnas agruparse en equipos o pares, posterior
- Lección 16.
REFLEXIÓN

• ¿De qué otra manera consideras que usas la geolocalización?
• ¿qué otras aplicaciones imaginas que puedes crear con ayuda de esta herramienta?
LECCIÓN
17 - 20
LECCIÓN 17 A 20. APLICACIÓN - PROYECTO INTEGRADOR
RESUMEN
A lo largo de esta lección, las alumnas podrán generar su propia aplicación que resuelva una
problemática, ya sea de la comunidad donde habitan o de su escuela. En ella podrán utilizar
todos los elementos de la interfaz que han conocido su funcionamiento a lo largo del curso.
OBJETIVO GENERAL
Las alumnas diseñarán su propia app que resuelva una problemática en específico.
o Las alumnas deberán utilizar los conocimientos adquiridos y las habilidades desarrolladas
a lo largo del curso para crear una app.
o Las alumnas trabajaran en equipo para alcanzar su meta.
RECURSOS
Docente
o Web AppInventor
Alumno
o Web AppInventor
INTRODUCCIÓN
Eres una joven interesada por el bienestar de tu comunidad. Un día caminando por los
alrededores de la misma reconoces una problemática que afecta a una gran parte de las
personas que la conforman y decides poner manos a la obra y encontrar una solución
aplicando lo aprendido en tu curso de Tecnolochicas.
PREGUNTA DETONADORA
¿Qué problemática identificas? ¿Qué aprendizajes puedes aplicar para solucionarla? ¿Qué
pasaría si tu no la solucionas?
o Sesión de equipos e ideación
Para comenzar con su proyecto lo primero que se debe hacer es la creación de los equipos,
procura que los equipos estén conformados por 5 personas, o si no divide la cantidad de
alumnas que tienes, para que los miembros en cada uno sean equitativos.
Proponemos la siguiente dinámica para la creación de los grupos:
Los abrazos: consiste en pedir a las alumnas que se distribuyan por el espacio del salón de
clases mientras la música suena. Cuando la música pare, tienes que decir un número al azar
y las alumnas se deben agrupar con las personas que tengan alrededor acordando a la
cantidad que mencionaste. Puedes dejar pasar 5 rondas y pedir a las alumnas que en cada
ronda se mezclen bien, posteriormente en la última ronda, debes decir el número de
participantes que quieres que tenga cada equipo, así cuando se hayan juntado, esos serán
los equipos que se conformarán para la actividad posterior.
o Definición de problemática y propuesta de solución
Una vez que ya se encuentra conformado el equipo las alumnas deberán juntarse para definir
la problemática sobre la cual se van a enfocar, para ello deben:
1. Cada alumna deberá tener 2 post-it

2. En 1 de ellos escribir una problemática que encuentren preguntando o investigando sobre
su comunidad y en 1 escribir una problemática que ellas identifican.
3. Pegar los post-its donde todas puedan leerlos
4. Una vez que los hayan leído entre todas podan decidir qué problemática desean abordar.
Posteriormente para poder encontrar una propuesta de solución a la problemática, tendrán

que realizar lo siguiente:
1. Realizar una dinámica grupal de creatividad para poder abrir su mente y pensar desde
diferentes ángulos una solución. El juego no tiene más objetivo que forzar la creatividad y
usar la imaginación. No hay ganadores ni perdedores y cualquier uso del objeto en sí, puede
ser válido.
a. Coloca un objeto cualquiera en el centro del grupo. Puede ser un estuche para las gafas,
unos zapatos, un balón…
b. La estudiante elegida debe empezar a imaginar que cosas se pueden hacer con ese objeto.
Pero no las convencionales para los que está diseñado, sino funciones alternativas. Por
ejemplo, si es un zapato, se puede convertir en un vaso para beber un líquido, o puede ser un
estuche.
c. La alumna debe comenzar a decir estas funciones en voz alta para que sus compañeras
puedan adivinar de que objeto se trata en realidad.
d. Si nadie lo adivina haz que una alumna diferente pueda ver el objeto y siga dando pistas.
e. Al final, alguien adivinará de que se trata. Aunque sea solo por suerte.
2. Explicar a las alumnas las características con las que debe cumplir su propuesta de
solución:
a. Debe ser una app que utilice al menos 4 funciones de las aprendidas en el curso.
b. Debe estar enfocada en facilitar las acciones del usuario para solucionar la problemática
sobre la que se trabaja.
Las alumnas deberán entregar una propuesta de solución a la problemática que cumpla con
las características para que durante la próxima sesión puedan comenzar a trabajar en la
programación de su app.
Las alumnas pueden realizar investigación de mercado, e investigar algunas soluciones que se han planteado para dicho
problema, así como analizar diferentes aplicaciones para encontrar funciones que les pueden ser útiles.
o Desarrollo de solución
Ahora es momento de que las alumnas desarrollen la propuesta de solución a la

problemática que identificaron y de la cual anteriormente, han investigado.
Los equipos desarrollarán la solución tecnológica para su problemática elegida, guía a los
equipos para definir una idea viable, que además no afecte a otro sector de la
comunidad.Antes de iniciar con el desarrollo pregunta a los equipos si tienen definido cómo
realizarán su app, puedes guiarlas con las siguientes preguntas:
• Problemática
• Propuesta de solución
• ¿En qué consiste la app?
• ¿Cómo funcionará?
• ¿Quiénes son los beneficiados?
• ¿Quién usará mi a
• ¿Por qué mi idea es única y especial?
• ¿Cómo haría para que mi app llegue a las personas?
¡MANOS A LA APP!
Para este momento todos los equipos deberán realizar la construcción de su app, es
importante que todas las alumnas participen en el diseño de pantallas y en la programación.
Las alumnas siempre deberán verificar que su app ofrezca una solución real y concreta a la
problemática.
Deberás apoyar a los equipos a cumplir los objetivos, así como orientarlas y aterrizarlas en
sus ideas, recuérdales que durante el proceso de diseño y programación pueden cambiar y
siempre pueden existir mejoras. No hay ideas malas solo deben direccionarse
adecuadamente.
Recuerda llevar el control del tiempo y mencionarles cuánto tiempo les queda, ya que
deberán tener organizada la idea para plasmarla.
Menciona a tus alumnas que es importante en este proceso ir realizando pruebas en su emulador o en su dispositivo, de tal
forma que tengan oportunidad de ir verificando cómo va quedando su app y puedan identificar si les hace falta algo en el
proceso.
¡PREPAREMOS NUESTRA PRESENTACIÓN!
Comenta con las alumnas que también será necesario preparar la presentación que tendrán
al finalizar la construcción de su app.
Recomienda a las estudiantes que asignen una o dos personas que realizarán la exposición,
mientras que las demás integrantes se harán cargo de la demostración de la app y
responderán las preguntas de la audiencia.
Este momento es clave para la asignación de sus roles y que todas lleguen a un mismo
acuerdo.
Siguientes pasos:
Ensayar y pensar en las preguntas que les puede realizar la audiencia.
o Presentación de proyectos
Llegó el momento de que todos los equipos compartan con su comunidad, sus logros y
aprendizajes adquiridos durante el curso, presentando su app donde abordan una solución
innovadora tecnológica con impacto social.
Todos los equipos presentarán su app con impacto social.
Se recomienda realizar la dinámica de la siguiente manera:
• Dar a los equipos 10 minutos previos para practicar su pitch.

• Escuchar las ideas de todos los equipos. Es importante fomentar y resaltar el diseño y la
programación, de tal manera que se brinde retroalimentación objetiva que aporte al
desarrollo y habilidades de las estudiantes.
• Se recomienda invitar a personas de la comunidad (padres de familia, maestros,

compañeras, etc.) que puedan aportar a la retroalimentación de los proyectos, así como
festejar junto con las estudiantes los aprendizajes adquiridos durante curso.
• Tú serás la guía y moderadora de ceremonia que indicará los tiempos para cada uno de los
equipos, así como controlar el flujo de preguntas y retroalimentación de los otros equipos o
asistentes.
@technolochicasmx
Para conocer más y convertirte en una TECNOLOchica visita

www.tecnolochicas.mx

Manual TC 2

Cargado por

Copyright:

Formatos disponibles

Manual TC 2

Cargado por

Información del documento

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

Manual TC 2

Cargado por

Copyright:

Formatos disponibles

MANUAL

· Las alumnas podrán conocer qué es una aplicación móvil.

GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

¿Cómo imaginas que funcionaría esta aplicación? ¿Y en qué categoría se clasiﬁcaría

DESARROLLO (ACTIVIDAD PRINCIPAL)

¿PARA QUÉ SIRVE UNA APP?

Como complemento de información, comparte con tus alumnas lo siguiente:

APPS MÁS CONOCIDAS

Continuando con el acercamiento e identiﬁcación de aplicaciones móviles pide a las alumnas

En caso de no poder realizar una investigación comparte a las alumnas la siguiente

CIERRE (ACTIVIDAD SECUNDARIA)

APLICACIÓN PRINCIPAL USO VENTAJAS DESVENTAJAS

· Retomando las preguntas detonadoras, pregunta a las alumnas:

GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

DESARROLLO (ACTIVIDAD PRINCIPAL)

Tomando en cuenta la lista de necesidades realizada y las respuestas a la pregunta

GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

DESARROLLO (ACTIVIDAD PRINCIPAL)

Tomando en cuenta la lista de necesidades realizada y las respuestas a la pregunta

¿CUÁLES SON LOS ELEMENTOS DE INTERFAZ QUE PERMITEN EL FLUJO DE

Dentro de este recurso deben:

1. Crear el boceto de la pantalla principal de la aplicación con los elementos de la interfaz

CIERRE (ACTIVIDAD SECUNDARIA)

o App Inventor es una herramienta web de desarrollo para iniciar en el mundo de la

App Inventor es un lenguaje de programación basado en bloques (como piezas de un juego

o Las alumnas conocerán la existencia de una plataforma para crear apps

GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

DESARROLLO (ACTIVIDAD PRINCIPAL)

o Crea una cuenta en AppInventor

Da clic en la primera opción que aparece al buscar “AppInventor” o en su caso da clic en el

Tomada de Google. Consultada el 22 junio 2021

Se abrirá la siguiente página:

Tomada de AppInventor. Consultada el 22 junio 2021

Da clic sobre el botón Create Apps!

Tomada de AppInventor. Consultada el 22 junio 2021

Si no has abierto sesión en Google, el navegador te pedirá que lo hagas ahora

Tomada de Gmail. Consultada el 22 junio 2021

Al acceder a tu cuenta de Google, verás la página de AppInventor y te pedirá aceptar los

Tomada de AppInventor. Consultada el 22 junio 2021

Enseguida, AppInventor te mostrará una pantalla de bienvenida, da clic en el botón Continue

Tomada de AppInventor. Consultada el 22 junio 2021

A continuación, te aparecerá una pantalla para seleccionar un tutorial o iniciar un proyecto

Tomada de AppInventor. Consultada el 22 junio 2021

CIERRE (ACTIVIDAD SECUNDARIA)

Tomada de AppInventor. Consultada el 22 junio 2021

o Preguntas para análisis grupal

Te sugerimos disponer de un dispositivo Android donde se puedan probar los programas

Conocer e identiﬁcar los elementos (interfaz gráﬁca y bloques de programación) del

o Las estudiantes conocerán el signiﬁcado de interfaz gráﬁca y bloques de programación.

GUÍA DE ENSEÑANZA (ACTIVIDADES DE LA SESIÓN)

DESARROLLO (ACTIVIDAD PRINCIPAL)

¿Qué es una interfaz de usuario?

Su función principal es simpliﬁcar la comunicación entre una máquina o un sistema

Una buena GUI se caracteriza por:

o Ser sencilla de comprender y usar

Workana (s.n.) ¿Qué es la interfaz gráﬁca de usuario GUI? Recuperado de

Muestra a las estudiantes la interfaz gráﬁca de APP Inventor y sus componentes.

MitAPPInventor (s.n.) Designer and block editor. Recuperado de https://appinventor.mit.edu/explore/designer-blocks

Presenta a las alumnas la pestaña de bloques de programación y dónde se encuentran.

Los bloques de programación al unirlos ordenadamente te permitirán programar el