4 Semaforo

Tutori al App
Inventor
Nivel: Inicial
Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Índice
Introducción ....................................................................................................................... 3
¿Qué voy a aprender? ...................................................................................................... 3
Diseño de Componentes ................................................................................................... 4
Paso 1: .............................................................................................................................. 4
Paso 2: .............................................................................................................................. 4
Maquetado o Mockup ..................................................................................................... 5
Tener en cuenta que: ........................................................................................................ 7
Paso 3: .............................................................................................................................. 7
Editor de bloques .............................................................................................................. 9
Paso 4: .............................................................................................................................. 9
Paso 5: .............................................................................................................................. 9
El funcionamiento del programa es el siguiente: ............................................................ 9
Elección de colores ...................................................................................................... 10
Paso 6: ............................................................................................................................ 11
Compartí tu aplicación ..................................................................................................... 12
Inspirarse en otros proyectos: ......................................................................................... 13
Proyecto para implementar en el aula .......................................................................... 13
Posibilidad de Adaptación en el aula: .............................................................................. 14

MIT APP INVENTOR
SEMÁFORO
Introducción
En la vía pública existen elementos que nos dan indicaciones para convivir de manera
armoniosa con los demás actores sociales que interactuamos. Uno de los más
comunes e importantes para agilizar la movilidad en una ciudad son los semáforos.
Su nacimiento fue a la par de la creación de los automóviles, sin embargo, fue a finales
de la primera mitad del siglo XX que surgieron con la actual necesidad: ordenar el paso y
el tránsito de automóviles especialmente. En cualquier lugar donde se encuentren
instalados, existe una red que los sincroniza para permitir el correcto flujo entre
vehículos y peatones. Cuando presentan una falla, comienzan a surgir problemas o
diferencias entre los conductores, posibles accidentes, choques vehiculares o lesiones
hacia los más desprotegidos como los peatones o también los ciclistas
¿Qué voy a aprender?
 Construir aplicaciones en AppInventor seleccionando

componentes y diciéndoles que hacer y cuando hacerlo.
 Usar el Diseñador de Componentes para seleccionar
componentes. Algunos componentes son visibles en la pantalla del
dispositivo mientras que otros no lo son.
 Agregar archivos multimedia (sonidos e imágenes) a las
aplicaciones, subiéndoles a AppInventor 2 desde tu computadora.
 A usar el Editor de Bloques para ensamblar bloques de código
que definen el comportamiento de los componentes, y que por lo
tanto en conjunto definen el comportamiento de la aplicación.
 Uso de temporizadores.
 Probar las aplicaciones directamente en los dispositivos, lo que te
ayudará a ver cómo las aplicaciones se comportan, paso a paso, a
medida que las construyes.
 Empaquetar las aplicaciones que construyes para instalarlas en
un dispositivo.
Esta aplicación será un semáforo donde se encenderán secuencialmente sus luces roja,
amarilla y verde.
 Mediante un Deslizador podemos cambiar el tiempo de encendido.

 Cada color estará encendido un tiempo distinto.
Para comenzar a programar con App Inventor debes acceder al sitio
http://ai2.appinventor.mit.edu
Diseño de Componentes
Paso 1:
Lo primero que debemos hacer, como en la App anterior, es dirigirnos a la pestaña

Proyectos, y crear uno nuevo desde esta ventana:
Paso 2:
Seguidamente démosle un nombre a la aplicación tal y como vemos en la imagen,

recordando que los nombres de proyecto son sin espacios, o podemos poner guiones
bajos de separación y luego le das al botón Aceptar.

Maquetado o Mockup
Es un modelo a escala o tamaño real de un diseño o un
dispositivo, utilizado para la demostración, evaluación del
diseño, promoción, y para otros fines. Un mockup es
un prototipo si proporciona al menos una parte de la
funcionalidad de un sistema y permite pruebas del diseño
Sea que uses plantillas o no al iniciar tus diseños, siempre

es buena idea iniciar en papel, armar tu boceto o
maquetado, es uno de los primeros medios con que
aprendimos a comunicarnos y la naturalidad de su uso hace
que te enfoques solo en lo que quieres hacer. Ahí puedes
dibujar en la pantalla la distribución de los botones, la disposición vertical u horizontal
que elijas y las funcionalidades que esperas que tenga tu aplicación, a continuación, un
ejemplo de 3 pantallas:

Una plantilla ideal para hacer el bosquejo de las distintas pantallas. Tener preparado un
boceto de tu idea de aplicación ayudará a facilitarte la tarea tanto como diseñador y
como desarrollador.
https://vimeo.com/140384043

Tener en cuenta que:
 Al realizar un mockup es muy importante que expliquemos las acciones que

vamos a realizar en cada una de las partes del diseño. Por ejemplo, indicar
con qué zonas vamos a poder interaccionar: debemos indicar qué abre un botón
ya sea un video, la funcionalidad de GPS en la aplicación o simplemente una
imagen. También indicaremos si se hace tap, slide o swipe en determinadas
pantallas.
 Al empezar a definir el proyecto de desarrollo de aplicaciones, es recomendable
empezar por determinar el menú de la aplicación. Y a continuación centrarte en la
arquitectura de la información para organizar todo el contenido que quieres incluir,
cuál irá en el menú y cuál no.
 Es clave definir desde muy al principio de esta fase de prototipado cuáles son los
servicios que se van a necesitar en la aplicación.
 Trabajar la usabilidad al inicio de cada proyecto también es uno de los puntos a
tener muy en cuenta.
 Definir qué colores vamos a utilizar desde un principio facilitará la tarea de
hacer un mockup en condiciones. O al menos una gama de colores para tu diseño
de aplicaciones.
Paso 3:
Situamos un Lienzo. Lo ponemos Ancho: Ajustar al contenedor y Alto: 350 píxel.
1. Tres Pelotas (50, 10) (50, 90) (50,170). Radio: 40
2. Un Disposición Horizontal con su Propiedad DispHorizontal: Centro - 3
3. Un Deslizador dentro del DisposiciónHorizontal1 con valores entre Valor Mínimo

1 y Valor Máximo 400
4. En la Propiedad Ancho del Deslizador ponemos 90 por ciento.
5. Agregar un reloj temporizador, que se encuentra del lado izquierda de la

pantalla

Nos queda de la siguiente manera el diseño de nuestra aplicación:

Editor de bloques
Paso 4:
Inicializo la variable “Cuenta” de forma global mediante el bloque rojo asignado a

Variables, que tal como su nombre lo indica es asignar a la variable un valor inicial para
asegurarnos que cuando empezamos a utilizar la aplicación no haya valores aleatorios
(cualquier valor que no sea el que yo desee) en este, por ende, le asignamos a cuenta
un valor de 0, mediante los bloques azules que pertenecen a los bloques de
matemática.
Los bloques azules están situados dentro del editor de bloques en la categoría
“Matemáticas” como se muestra a continuación, dentro del menú de “Paleta”:
Paso 5:
El funcionamiento del programa es el siguiente:

Mediante el Deslizador controlamos el Intervalo del Reloj.
Cada vez que se produce un Intervalo del Reloj:

La variable es “cuenta”. Se cuenta una unidad.
cuenta = cuenta + 1
Si cuenta es > 16 entonces cuenta vuelve a 0 (nuevo ciclo)
Elección de colores
Dentro Bloques, los grises corresponden a de “Colores”, una vez arrastres un bloque
de color, haciendo clic sobre él se despliega una ventana con distintas ganas de colores
que se pueden seleccionar.
Si la variable cuenta es <= 6 entonces Color Rojo

Obtenemos el valor de la variable cuenta mediante los bloques rojos de “Variables”.
Mediante el bloque verde, devuelve cierto si todos los valores lo son, ósea es una
condición múltiple que tiene que cumplirse: Si cuenta es > 6 y cuenta es <= 9 los
verificamos con los bloques azules de matemática, entonces la pelota 1 y la pelota 3
cambian en un color más tenue, como lo explicamos anteriormente, para ponerse la
pelota 2 en Amarillo fuerte.
Si cuenta es >9 entonces Color Verde
Paso 6:
El programa completo quedaría entonces:

Compartí tu aplicación
Una vez que terminemos guardamos el proyecto y lo descargamos en nuestro celular de

la siguiente manera:
Entonces me genera un código QR para que yo lo pueda leer desde la aplicación

previamente instalada en mi celular “MIT AI2 Companion” y así probar la aplicación que
diseñamos.

Inspirarse en otros proyectos:
Existen muchos proyectos en Internet para inspirarse y experimentar. Sugerimos

recorrer el siguiente sitio con sus estudiantes para inspirarse y generar nuevos:
https://codigo21.educacion.navarra.es/autoaprendizaje/primeros-pasos-con-app-
inventor-2/
Proyecto para implementar en el aula
A través de un circuito de LEDS y utilizando otros recursos

accesibles, es posible diseñar y construir un semáforo.
Recursos:
 Leds: rojo –verde y amarillo (uno de cada color)
 Cinta autoadhesiva de cobre o Papel aluminio de cocina
 Papel A4
 Pila redonda de 3V
 Cinta papel
 Tijera
 Cartulina
 Goma de pegar
El papel aluminio de los que se utilizan en una cocina utilizando trozos de cinta papel
para fijar el aluminio al papel.
El interruptor se crea doblando una esquina del papel que conecta uno de los extremos
de la cinta de cobre al lado positivo de la batería. La propia batería se encuentra en la
parte superior del otro extremo de la cinta de cobre. Esto conecta el lado negativo de la
batería al circuito. Usar un clip de encuadernación para mantener el interruptor en la
posición "on". Dibujar un semáforo que coincida con las luces.
Otra opción: armar un circuito en paralelo. El procedimiento es similar, aunque cambia

el esquema.En el prototipo se añadió un broche dorado y un alfiler de gancho (puede ser
un clip), y al ir tomando contacto con cada una de las líneas del circuito se ilumina el led
.
Posibilidad de Adaptación en el aula:
En caso de que lo quieras implementar en el aula con tus alumnos, a

continuación, te dejamos una rúbrica de evaluación:

REQUERIMIENTOS PUNTOS
Maquetado de la aplicación 25
Agregado de archivos multimedia 25
Uso de Temporizador 25
Conexión de la aplicación con el celular 25
TOTAL

4 Semaforo

Cargado por

Copyright:

Formatos disponibles

4 Semaforo

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

4 Semaforo

Cargado por

Copyright:

Formatos disponibles

Tutori al App

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

¿Qué voy a aprender?

 Construir aplicaciones en AppInventor seleccionando

 Mediante un Deslizador podemos cambiar el tiempo de encendido.

Para comenzar a programar con App Inventor debes acceder al sitio

Lo primero que debemos hacer, como en la App anterior, es dirigirnos a la pestaña

Seguidamente démosle un nombre a la aplicación tal y como vemos en la imagen,

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Sea que uses plantillas o no al iniciar tus diseños, siempre

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

 Al realizar un mockup es muy importante que expliquemos las acciones que

Situamos un Lienzo. Lo ponemos Ancho: Ajustar al contenedor y Alto: 350 píxel.

1. Tres Pelotas (50, 10) (50, 90) (50,170). Radio: 40

2. Un Disposición Horizontal con su Propiedad DispHorizontal: Centro - 3

3. Un Deslizador dentro del DisposiciónHorizontal1 con valores entre Valor Mínimo

4. En la Propiedad Ancho del Deslizador ponemos 90 por ciento.

5. Agregar un reloj temporizador, que se encuentra del lado izquierda de la

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Inicializo la variable “Cuenta” de forma global mediante el bloque rojo asignado a

El funcionamiento del programa es el siguiente:

Cada vez que se produce un Intervalo del Reloj:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Si cuenta es > 16 entonces cuenta vuelve a 0 (nuevo ciclo)

Si la variable cuenta es <= 6 entonces Color Rojo

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Si cuenta es >9 entonces Color Verde

El programa completo quedaría entonces:

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Una vez que terminemos guardamos el proyecto y lo descargamos en nuestro celular de

Entonces me genera un código QR para que yo lo pueda leer desde la aplicación

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Existen muchos proyectos en Internet para inspirarse y experimentar. Sugerimos

Proyecto para implementar en el aula

A través de un circuito de LEDS y utilizando otros recursos

Otra opción: armar un circuito en paralelo. El procedimiento es similar, aunque cambia

Posibilidad de Adaptación en el aula:

En caso de que lo quieras implementar en el aula con tus alumnos, a

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

Medrano 951 2° Piso Cap. Fed. - (011) 4867-7545/7565 - [email protected]

También podría gustarte