Procedimiento de la práctica

Página 1

1. Revisa con atención el siguiente algoritmo con los pasos para

reproducir un sonido:

Paso 1: Inicio

Paso 2: Ejecutar el simulador “aiStarter” y crear un nuevo proyecto

con el nombre “HolaMundo”

Paso 4: Añadir 3 etiquetas de texto

Paso 5: Dar formato a los componentes

Paso 6: Ejecutar

Paso 7: Final

2. Ingresa al sitio de app inventor mediante el siguiente

enlace: http://ai2.appinventor.mit.edu/ y ejecuta la aplicación instalada

“aiStarter”  .

3. Para iniciar un nuevo proyecto, da clic en la opción de “Comenzar un

proyecto nuevo” como se muestra en la siguiente imagen:

Imagen 1. Opción “Comenzar un nuevo proyecto”

 

4. Inicia el proyecto colocando el nombre “HolaMundo” y da clic en

“Aceptar”.

 Imagen 2. Ventana de nuevo proyecto

5. Una vez cargado el entorno de desarrollo, es necesario ubicar la

sección de interfaz de usuario para arrastrar y soltar el componente
“Botón” dentro de la pantalla en la sección de visor.

Imagen 3. Interfaz de desarrollo

6. Arrastra y suelta el componente “Etiqueta” en la pantalla principal,

añadiendo un total de 3 de estos componentes como se puede observar
en la siguiente imagen:
  

Imagen 4. Visor con etiquetas

7. Da clic en “Screen1” dentro de la sección de componentes ubicada del

lado derecho de la pantalla.

Imagen 5. Componentes

8. Ubica la sección de propiedades para aplicar las siguientes opciones

de configuración a la pantalla principal de la aplicación:

 PantallaAcercaDe: “Esta es mi primera aplicación con app inventor”

 DispHorizontal: Centro
 DispVertical: Centro
 ColorDeFondo: Naranja
 AnimaciónCierreDePantalla: Fundido
 AnimaciónAlAbrirPantalla: zoom
 Theme: Device default
 Título: Pantalla principal
 

9. Posteriormente, en la sección de componentes da clic en el

componente “Botón”.

Imagen 6. Propiedades de “Screen1”

Página 2

10. En el apartado de componentes, selecciona “Etiqueta1” y aplica la

siguiente configuración de formato:

 ColorDeFondo: Blanco
 Negrita: si
 Cursiva: no
 TamañoDeLetra: 35
 TipoDeLetra: Sans serif
 Texto: ¡Hola Mundo!
  PosiciónDelTexto: centro
 ColorDeTexto: Gris Oscuro

Imagen 7. Visor de aplicación

11. Posteriormente se debe aplicar la siguiente configuración en la

“Etiqueta2”:

 ColorDeFondo: Gris oscuro

 Negrita: no
 Cursiva: si
 TamañoDeLetra: 25
 TipoDeLetra: serif
 Texto: Esta es mi primera aplicación
 PosiciónDelTexto: izquierda:0
 ColorDeTexto: Blanco
 Imagen 8. Visor de aplicación

12. Para la “Etiqueta3” aplica la siguiente configuración:

 ColorDeFondo: Azul
 Negrita: si
 Cursiva: si
 TamañoDeLetra: 20
 TipoDeLetra: monoespacio
 Texto: Nombre completo (Gabriel Álvarez Morales)
 PosiciónDelTexto: derecha:2
 ColorDeTexto: Naranja
 

Imagen 9. Visor de aplicación

20. Comprueba la aplicación dando clic en la opción de Conectar-

>Emulador y espera a que se inicie la simulación.

Imagen 10. Opciones de conexión

 

21. Visualiza que al dar clic en el botón se muestra el texto colocado

anteriormente como se observa a continuación, de lo contrario, debes
revisar el procedimiento nuevamente en busca de errores.

22. Guarda el proyecto seleccionando la opción “Exportar a mi ordenador

el proyecto (.aia) seleccionado”.

Imagen 11. Opción para exportar proyecto

23. Abre el apartado de conclusión de la actividad y da clic en el botón

subir   , buscando la carpeta donde se guardó el documento.

24. Adjunta el archivo o arrástralo en la caja de envío.

Imagen 12. Ventana de envío de archivo

25. Espera a que se cargue en plataforma y posteriormente da clic en el

botón   para enviar el archivo.