Plataformas Educativas

Tema DESARROLLO DE APLICACIÓN
Descripción de la Desarrollo del paradigma de la programación funcional y su

clase aplicación para construir una aplicación interactiva pero
compleja, potenciando así la creatividad
Clase ADV-C19
Tiempo de clase 50 mins
Objetivo ● Crear e integrar dos aplicaciones en una.
Recursos ● Recursos para maestras

requeridos ○ Inicio de sesión de Code.org.
○ Auriculares con micrófono.
○ Bloc de notas y pluma.
● Recursos para alumnos

○ Inicio de sesión de Code.org.
■ Aparece en el panel.
■ Auricular con micrófono (opcional).
○ Bloc de notas y pluma.
Estructura de la Rompiendo el hielo 2 mins

clase Actividad dirigida por la maestra 8 mins
Actividad dirigida por el alumno 30 mins
Conclusión 5 mins
Indicaciones y sugerencias para el proyecto 5 mins
Inicia la videollamada desde H2H
ROMPIENDO EL HIELO - 2 mins
La maestra empieza la presentación desde la diapositiva 1 a la 28.

Consulta las notas en tu pantalla y sigue las instrucciones de cada diapositiva.
ACTIVIDAD DE LA MAESTRA - 8 mins
© 2022 - BYJU'S Future School.

Nota: Este documento tiene derecho de autor original de BYJU'S Future School.
Por favor, no comparta, descargue o copie este archivo sin permiso.
1
La maestra comienza a compartir su pantalla
Decir Hacer
Actividad de la maestra
Voy a abrir el mismo proyecto que desarrollamos en la 1-LABORATORIO DE
clase anterior para seguir diseñando y programando el APLICACIONES
botón de estudio. Inicia sesión en code.org.
Haz clic en Ve el código >

Mira a continuación: Remix para seguir
desarrollando la aplicación.
Paso 2: Diseñar la aplicación
Siguiendo el propósito, ya habíamos creado 3 pantallas:
1. pantallaPrincipal con dos botones: “Jugar” y “Estudiar”.

2. pantallaJuego con un botonCubo y etiquetas de
puntuación.
En esta clase, vamos a diseñar la

3. pantallaEstudio
Por lo tanto, vamos a seleccionar la pantalla de estudio
(pantallaEstudio) y a diseñarla.

2
Arrastra 2 etiquetas y 3 botones.
Cambia las propiedades de cada uno.

3
TEMPORIZADOR DE ESTUDIO
id: etiquetaTemporizadorDeEstudio
Texto: Temporizador de estudio
puedes cambiar otras propiedades si quieres.
ETIQUETA EN BLANCO
id: etiquetaTiempo
Texto: (en blanco): esta etiqueta se mantiene en blanco y
mostrará el tiempo calculado cada un segundo.
Ancho: 280
Altura: 255
Tamaño de la fuente: 120 píxeles

4
Voy a mantener el tamaño de la etiquetaTiempo lo más
grande posible para mostrar la hora en una fuente más
grande.
Ahora vamos a crear un botón de inicio, parada y reinicio

para el temporizador.
BOTÓN INICIO
id: botonInicio
Ancho: 80
Altura: 40
BOTÓN PARADA
id: botonParada
Ancho: 80
Altura: 40

5
BOTÓN REINICIO
id: botonReinicio
Ancho: 80
Altura: 30
Color de fondo: cualquiera
Cambiamos el color de fondo del botón de reinicio para

distinguirlo del botón de inicio y parada.

6
Paso 3: Programar la aplicación
En este paso especificamos los bloques de código que
queremos usar para escribir el código.
Para la referencia de la
maestra, la aplicación
completa se encuentra a
continuación.
Haz clic en
para ver el código completo
7
Arrastra los bloques
respectivos de la caja de
herramientas como se
muestra con las flechas.
Amplía la imagen para ver el código completo

Actividad de la maestra 2 CÓDIGO COMPLETO:
Aplicación de juego (ya desarrollada en la última clase).
Aplicación de estudio: Sigue programando desde la línea 16 en adelante

8
Aplicación de estudio: Explica al alumno cada línea de código.
16. Cuando el usuario hace clic en el botón de estudio...
17. Es dirigido a la pantallaEstudio. Así es cómo integramos la pantalla principal y las

dos aplicaciones que vamos a desarrollar: el juego y el temporizador. Puedes integrar
varias aplicaciones usando los bloques setscreen.
18. Declara una variable r. Define el valor en 0, ya que queremos que el temporizador
comience desde 0 segundos. En esta variable r almacenaremos el tiempo en segundos.
19. Cuando el usuario haga clic en el botón de inicio de la pantallaEstudio, el

temporizador debe comenzar.

9
20. Las computadoras son máquinas muy rápidas, por lo que llevan el tiempo en
milisegundos. timedLoop repite los bloques que encierra cada 1000 milisegundos o 1
segundo.
21. Después de cada 1 segundo, el valor de la variable r se incrementa en 1. Recuerda

que r es el tiempo en segundos y queremos que el valor de r se incremente cada
segundo en 1.
22. Después de cada 1 segundo, cambia el color del texto de la etiquetaTiempo usando
el bloque rgb que mezcla los tonos rojo, verde, azul. Vamos a definirlo en cualquier tono
aleatorio de rojo (0 a 255) y azul (0 a 255), manteniendo el tono de verde constante a
100. El último número 1 es el nivel de transparencia que quieres que tengan los colores
rgb:
completamente transparente=0 y Sin transparencia=1
23. Después de cada segundo, el valor incrementado de r se establece en

etiquetaTiempo para mostrar el valor del número en segundos.
24. Este paréntesis encierra todo lo que debe ocurrir cada segundo dentro del bloque
timedLoop.
26.Cuando se pulsa el botónParada...

27.Esta línea dice que se detenga timedloop.
28. Este paréntesis encierra todo lo que debe ocurrir cuando se pulsa el botonParada.

10
29. Cuando se pulsa el botonReiniciar...
30. El valor de la variable r se pone a cero. Esto hará que el temporizador vuelva a 0.
31. También muestra el nuevo valor 0 de la variable r en la etiquetaTiempo. Esto muestra

el 0 en la pantalla.
32. Esto encierra todo lo que debe ocurrir cuando el usuario pulse el botonReiniciar.
33. Este paréntesis encierra todo lo que debe ocurrir cuando el usuario hace clic en el
botón Estudiar de la pantalla principal.
34. Cuando el usuario hace clic en el boton2 que es el botón de inicio...
35. Queremos que el usuario vaya a la pantalla principal
36. Este paréntesis encierra todo lo que debe ocurrir cuando se pulsa el boton2
Paso 4: Probar la app

En este paso, ejecutamos la aplicación para comprobar si
funciona.
¡Wow! ¡La aplicación funciona!

11
¡Ahora veamos qué puedes hacer!
La maestra deja de compartir la pantalla
ACTIVIDAD DEL ALUMNO - 30 mins
El alumno comienza a compartir su pantalla
● Pide al alumno que presione la tecla ESC para volver al panel.

● Guía al alumno a iniciar el modo de pantalla compartida.
● La maestra cambia a pantalla completa.
Decir Hacer
Actividad del alumno

Debes desarrollar la misma aplicación: Ahora es tu turno: 1-LABORATORIO DE
APLICACIONES
¿Puede decirme qué pasos vas a seguir?
Pide al alumno que inicie
sesión en code.org usando
su nombre de usuario y
contraseña
Paso 1: Definir un objetivo
en el panel del alumno.
En este paso, especificamos lo que queremos que haga la
aplicación. Pide al alumno que haga
Paso 2: Diseñar la aplicación
En este paso, especificamos los componentes de diseño clic en
de la aplicación.
Paso 3: Programar la aplicación
En este paso, especificamos los bloques de código que y luego
queremos usar en nuestro código.
y comienza a diseñar.
Paso 4: Probar la app
En este paso, ejecutamos la aplicación para comprobar si
funciona.

12
Pide al alumno que copie el
enlace del proyecto y lo
pegue en el campo Enlace
del proyecto del panel de
alumno y haga clic en el
botón Enviar.
PRUEBA BETA PARA TU APLICACIÓN
¡Asombroso!
Tu tarea será hacer una prueba BETA de tu aplicación de juego y estudio.

Comparte tu aplicación con al menos 5 amigos y pídeles su opinión sobre si les
gustó la aplicación de juego o no.
Puedes pedir a tus padres que envíen por WhatsApp o por correo electrónico el
enlace de la aplicación del juego que creaste a los padres de tus amigos para
obtener su opinión.
En la próxima clase te preguntaré por las opiniones de tus amigos y trataremos de

trabajar en ello juntos.
Guía al alumno para que deje de compartir la pantalla
La maestra comienza a compartir su pantalla
FINAL - 5 mins
La maestra empieza la presentación desde la diapositiva 29 a la 30.

Consulta las notas en tu pantalla y sigue las instrucciones de cada diapositiva.

13
PRÁCTICAS Y SUGERENCIAS PARA EL PROYECTO - 5 mins
La maestra empieza la presentación de la diapositiva 31.
Decir Hacer
Abre el enlace de la
CRONÓMETRO DE VUELTAS solución del proyecto y
muestra el proyecto al
Objetivo del proyecto: alumno
En la clase 19 aprendiste a combinar dos apps en una.

Una de estas apps era un temporizador que contaba el
tiempo que pasabas estudiando. La otra, contaba qué
tan rápido podías seguir y hacer clic en un cuadrado.
En este proyecto practicarás lo que has aprendido en

clase para modificar un cronómetro de vueltas para
aplicar la función del temporizador.
Historia:
A Aarvi le encanta salir a correr cada mañana al parque

que está cerca de su casa. Sin embargo, no puede
calcular cuánto tiempo le toma completar todas sus
vueltas. ¿Puedes ayudar a Aarvi a modificar una app
para calcular el tiempo que tarda en completar sus
vueltas en segundos?
¡Adiós!
La maestra empieza la presentación de las diapositivas 32 a la 33.

14
La maestra hace clic en
Número de la Nombre de la Enlaces

actividad actividad
Actividad de la LABORATORIO https://studio.code.org/projects/applab/4mPsP

maestra 1 DE DJhabG_DaN2mcR1W1LqLvIZcBG9Vrl7cXH
APLICACIONES sIzc
Actividad de la CÓDIGO https://studio.code.org/projects/applab/dNuOq

maestra 2 COMPLETO bMBKD1etzFxUWjBiBZfSwDvs2gJIMcZoY89
7oA
Actividad del LABORATORIO https://studio.code.org/projects/applab/4mPsP

alumno 1 DE DJhabG_DaN2mcR1W1LqLvIZcBG9Vrl7cXH
APLICACIONES sIzc
Solución del LIMITAR EL https://studio.code.org/projects/applab/qFagve

proyecto TIEMPO EN LA ldfN4D8MpuFcflM1iwTgScjUs7yl65PF2MGC
DUCHA M
Enlace de ayuda ENLACE DE https://s3-whjr-curriculum-uploads.whjr.online/

visual de referencia APOYO VISUAL 91fdf1fb-c637-499e-b882-4a5e60734831.html
para la maestra CON NOTAS
Quiz en clase de Quiz en clase https://s3-whjr-curriculum-uploads.whjr.online/

referencia para la 2ab40fc6-54a2-47c1-81c2-fe56215b0d87.pdf
maestra
Referencia de la maestra-NO DEBE AÑADIRSE PANEL DE ENLACE ACTIVIDAD
Referencia de la APOYO VISUAL https://s3-whjr-curriculum-uploads.whjr.online/

maestra 8c1d03e2-4480-4d98-b2eb-e781387de5c8.ht
ml

15

Plataformas Educativas

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

Plataformas Educativas

Cargado por

Copyright:

Formatos disponibles

Tema DESARROLLO DE APLICACIÓN

Descripción de la Desarrollo del paradigma de la programación funcional y su

Tiempo de clase 50 mins

Objetivo ● Crear e integrar dos aplicaciones en una.

Recursos ● Recursos para maestras

● Recursos para alumnos

Estructura de la Rompiendo el hielo 2 mins

Inicia la videollamada desde H2H

ROMPIENDO EL HIELO - 2 mins

La maestra empieza la presentación desde la diapositiva 1 a la 28.

ACTIVIDAD DE LA MAESTRA - 8 mins

© 2022 - BYJU'S Future School.

Haz clic en Ve el código >

Siguiendo el propósito, ya habíamos creado 3 pantallas:

1. pantallaPrincipal con dos botones: “Jugar” y “Estudiar”.

En esta clase, vamos a diseñar la

© 2022 - BYJU'S Future School.

Cambia las propiedades de cada uno.

© 2022 - BYJU'S Future School.

© 2022 - BYJU'S Future School.

Ahora vamos a crear un botón de inicio, parada y reinicio

© 2022 - BYJU'S Future School.

Cambiamos el color de fondo del botón de reinicio para

© 2022 - BYJU'S Future School.

Amplía la imagen para ver el código completo

Aplicación de juego (ya desarrollada en la última clase).

Aplicación de estudio: Sigue programando desde la línea 16 en adelante

© 2022 - BYJU'S Future School.

16. Cuando el usuario hace clic en el botón de estudio...

17. Es dirigido a la pantallaEstudio. Así es cómo integramos la pantalla principal y las

19. Cuando el usuario haga clic en el botón de inicio de la pantallaEstudio, el

© 2022 - BYJU'S Future School.

21. Después de cada 1 segundo, el valor de la variable r se incrementa en 1. Recuerda

23. Después de cada segundo, el valor incrementado de r se establece en

26.Cuando se pulsa el botónParada...

© 2022 - BYJU'S Future School.

31. También muestra el nuevo valor 0 de la variable r en la etiquetaTiempo. Esto muestra

34. Cuando el usuario hace clic en el boton2 que es el botón de inicio...

35. Queremos que el usuario vaya a la pantalla principal

Paso 4: Probar la app

¡Wow! ¡La aplicación funciona!

© 2022 - BYJU'S Future School.

La maestra deja de compartir la pantalla

ACTIVIDAD DEL ALUMNO - 30 mins

El alumno comienza a compartir su pantalla

● Pide al alumno que presione la tecla ESC para volver al panel.

Actividad del alumno

© 2022 - BYJU'S Future School.

PRUEBA BETA PARA TU APLICACIÓN

Tu tarea será hacer una prueba BETA de tu aplicación de juego y estudio.

En la próxima clase te preguntaré por las opiniones de tus amigos y trataremos de

Guía al alumno para que deje de compartir la pantalla

La maestra comienza a compartir su pantalla

La maestra empieza la presentación desde la diapositiva 29 a la 30.

© 2022 - BYJU'S Future School.

La maestra empieza la presentación de la diapositiva 31.

En la clase 19 aprendiste a combinar dos apps en una.

En este proyecto practicarás lo que has aprendido en

A Aarvi le encanta salir a correr cada mañana al parque

La maestra empieza la presentación de las diapositivas 32 a la 33.

© 2022 - BYJU'S Future School.

Número de la Nombre de la Enlaces