Botones de colores

Diseño

Comenzamos pidiendo a nuestro alumnado que acceda a la web de Bitbloq y seleccione la herramienta Bitbloq Apps. A continuación, vamos explicando los siguientes pasos:

1. En la pestaña Diseño, seleccionar y arrastrar un componente Contenedor vertical a la parte central de la pantalla del dispositivo que aparece en el espacio de trabajo.

2. Configurar dicho contenedor para que tenga el número de elementos que se quiera y centrarlo.

3. Seleccionar y arrastrar tantos componentes Botón al interior de cada uno de los huecos del contenedor.

4. Configurar cada botón utilizando las opciones de su menú de propiedades.

   En este caso, cambiamos el color del relleno al que corresponda, el texto al nombre de ese color en inglés y el color del texto para que coincida con el del relleno.

5. Para finalizar el diseño, seleccionar y arrastrar un componente Texto a voz de la categoría Multimedia. En su panel de propiedades, cambiamos el idioma a Ingles.

   Este tipo de componente se añade como no visible en el listado de la izquierda de la pantalla.

Programación

Una vez realizado el diseño, explicamos cómo programar su funcionamiento: 

1. En la pestaña Bloques, programar que cuando se haga clic sobre uno de los botones, lea el texto correspondiente al nombre del botón, cambie el color del texto a blanco durante un segundo para que sea visible, y finalmente, vuelva a cambiar al color que tenía inicialmente.

2. Repetir la programación para cada uno de los siete botones, cambiando los valores correspondientes.

Recomendamos a nuestro alumnado ir probando el funcionamiento de la programación cada poco tiempo utilizando el modo Previsualización web.

Finalmente, les indicamos que seleccionen la opción que permite probar la aplicación En tu dispositivo móvil y que sigan los pasos que se indican. Para ello, deben tener instalada en su dispositivo la aplicación Bitbloq Pocket, disponible para Android o iOS.

A continuación te proponemos algunas ideas de aplicaciones similares para seguir practicando:

• Aplicación en la que trabajar otro vocabulario en inglés, añadiendo una imagen de fondo a los distintos botones.

• Aplicación en la que se pueda cambiar el color de la pantalla o de otros componentes utilizando los botones. 

• Aplicación con un botón Sí y otro botón No en la que, al pulsar cada botón, responda de forma graciosa con el componente Texto a voz.

• Aplicación de notas con el componente Entrada de texto junto con un botón que active su lectura con el componente Texto a voz.

Accede al proyecto:

Haz clic en la imagen para abrir la página del proyecto en Bitbloq Apps.