jueves, 31 de mayo de 2018

Trabajos con presentaciones

Ejercicios con el programa de presentaciones de diapositivas:

  1. Mejorar una presentación aplicando los trucos explicados aquí:



  2. Uso de las animaciones del programa de presentación de diapositivas. Las utilizaremos para hacer algo similar a lo que se muestra en este vídeo

  1. Las instrucciones para hacerlo se encuentran en este enlace.

  1. Utilizar las transiciones de diapositivas para dar la sensación de que nos movemos por un lienzo. Las instrucciones para hacerlo se encuentran en el siguiente vídeo; si quieres hacerlo igual, las imágenes del vídeo se encuentran en este enlace.

viernes, 11 de mayo de 2018

App Inventor: pintar

Vamos a hacer una aplicación para dibujar en el móvil. Paso a paso, la haremos así:

1. Lienzo para dibujar

Primeramente añadiremos un lienzo (canvas) en el diseño. Le daremos las dimensiones (la anchura que rellene el contenedor, y la altura, por ejemplo, 300 píxeles). Este lienzo lo programaremos para que dibuje un punto al tocarlo, y una línea al arrastrar el dedo sobre él:



2. Definir el grosor de línea

2.1. Componentes

Seguidamente vamos a hacer posible que el usuario elija el grosor de línea con el que quiere dibujar. Para ello utilizaremos el componente deslizador (slider). Desplazándolo a derecha o izquierda modificaremos el grosor de línea.

En el cuadro de propiedades del deslizador pondremos que el valor mínimo será 1 (un grosor de línea de 1 píxel), y el máximo el que deseemos. Yo he puesto 20. Diré que por defecto el deslizador aparezca en la posición 1 (V. recuadro rojo de la imagen). Asimismo será necesario indicar el ancho del deslizador (por ejemplo, 200 píxeles):



Junto al deslizador insertaré una etiqueta en la que aparezca el grosor de línea (en píxeles). A la etiqueta le cambio el nombre por grosor, y hago que inicialmente aparezca un 1 (V. imagen anterior).

2.2. Programación

Ahora voy a declarar una nueva variable (a la que llamo grosor), y la inicio a 1. Posteriormente programo el deslizador. Digo que cuando cambie su posición, cambie el valor de la variable, y que éste aparezca en la etiqueta. El valor indicado por el deslizador tiene dos decimales. Si queremos que en la etiqueta aparezca sin decimales, lo redondeamos:


Por último, tengo que cambiar los bloques programados en el paso 1, de manera que tanto los puntos como las líneas los dibuje con el grosor indicado por esta variable:

3. Borrar

Voy ahora a añadir un botón para borrar lo dibujado. La programación del botón quedaría así:

4. Elegir un color

4.1. Componentes

Para elegir colores voy a añadir estos componentes:

  • Un botón para seleccionar el color, al que he renombrado y he llamado colores.

  • Una disposición horizontal, que tendrá un ancho para rellenar el contenedor, y cuyo contenido estará centrado

  • Un lienzo dentro de esta disposición, en el que colocaré una imagen de fondo de un selector de color, por ejemplo, la de este enlace.

  • Una etiqueta, sin ningún texto, y cuyo color de fondo será el color elegido. Esto me permitirá saber qué color he elegido. A esta etiqueta la cambio el nombre llamándola color elegido.



La disposición horizontal será, por defecto, no visible, por lo que tendré que desactivar la casilla marcada en la imagen anterior (este lienzo se ha puesto en una disposición horizontal para que no toque los bordes de la pantalla, ya que es muy difícil seleccionar los colores ahí).

4.2. Programación

Primero programaremos el botón de elegir colores. Al hacer clic sobre él deberá:

  • Si es visible el lienzo donde pinto, deberá hacerlo invisible, hacer visible la disposición horizontal donde está el lienzo para elegir los colores, y cambiar el texto del propio botón a "volver a pintar"

  • Si no (es visible el lienzo de elegir color), al apretar el botón tengo que hacer invisible la disposición horizontal, hacer visible de nuevo el lienzo de pintar, y cambiar el texto del botón a "elegir color"

Luego programaré el lienzo de elegir color, de manera que al pasar el dedo sobre él cogerá el color de fondo que esté tocando, y hará que sea el color con el que pinte el lienzo de pintar. Además, este color aparecerá como color de fondo en la etiqueta color elegido:


5. Pintar sobre una fotografía

Vamos a hacer ahora que la aplicación pueda tomar una fotografía para pintar sobre ella, para lo que tendré que añadir dos componentes:

  • Un botón para activar la cámara

  • Una cámara
La programación es sencilla. Al apretar el botón se llamará a la cámara para que tome una fotografía. Y cuando la cámara haya tomado la fotografía, se pondrá como imagen de fondo del lienzo de pintar:


miércoles, 2 de mayo de 2018

App Inventor: juego con imágenes (3)

En este caso nuestra aplicación nos va a mostrar una imagen para que digamos lo que representa. La respuesta la elegiremos de una lista. Una vez elegida la respuesta, se nos mostrará otra imagen, aleatoriamente, para que digamos qué es.

1. Diseño

Para nuestra aplicación necesitaremos:

  • Un lienzo

  • Una imagen sprite, donde aparecerá la imagen por la que preguntamos

  • Un desplegable (spinner), donde aparecerá la lista de posibles respuestas para elegir una.

  • Un botón para comenzar el juego

  • Una etiqueta en la que se leerá aciertos: , y otra en la que aparecerá el número de aciertos, y en la que en principio pondrá 0. Esta última etiqueta habrá que programarla, por lo que la he renombrado y la he llamado aciertos.

  • Un componente de sonido (sound). Lo utilizaremos para que el móvil vibre cuando demos una respuesta errónea.
Asimismo subiré las imágenes (en mi caso, son las mismas cuatro de los ejercicios anteriores):


2. Programación

2.1. Variables

Voy a tener que definir cuatro variables:

  • Una para los aciertos, que iniciaremos a 0

  • Otra para las imágenes. Será una lista.

  • Otra para las respuestas. También es una lista, que es la que aparecerá en el desplegable (spinner). Las respuestas deben ponerse en el mismo orden en el que se pusieron las imágenes. Además, hay que añadir una quinta respuesta, que será la que salga por defecto (en mi caso, he escrito selecciona. Hay que tener en cuenta que si por defecto sale la respuesta correcta, se considera que ya está seleccionada, y no me dejaría seleccionarla de nuevo)

  • Otra que va a darnos cuál de las imágenes vamos a preguntar (la 1, 2, 3 ó 4, en mi caso). En este caso la inicio a 1:

2.2. Procedimiento para mostrar una imagen al azar

Ahora vamos a hacer un procedimiento que hará lo siguiente:

  • Cargará los elementos de la lista respuestas en el desplegable (spinner)

  • Mostrará el elemento de la lista "selecciona" en el desplegable

  • Dará un valor aleatorio entre 1 y el número de imágenes (en mi caso 4) a la variable pregunta.

  • Hará aparecer la imagen correspondiente al valor de la variable pregunta en la imagen sprite.

2.3. Inicio del juego

Al apretar el botón comenzar:

  • Se pondrán los aciertos a 0

  • Se llamará al procedimiento preguntar, definido en el paso anterior.
2.4. Tras seleccionar una respuesta:

Una vez se ha preguntado por una imagen y el usuario ha elegido una respuesta, se deberá hacer lo siguiente:

  • Comprobar si la respuesta es correcta (la respuesta correcta es la correspondiente a la posición señalada por la variable pregunta en la lista de respuestas).

  • Si la respuesta es correcta aumentará en 1 los aciertos

  • Si la respuesta no es correcta hará que el teléfono vibre

  • Finalmente, se llamará de nuevo al procedimiento preguntar, para que aparezca una nueva imagen y se repita el proceso.
2.5 Mejoras

Como siempre, introduce mejoras en la aplicación. Corrige posibles errores, pon un diseño atractivo, y añade aquello que se te ocurra para mejorar la programación.

App Inventor: Brújula con localizador

Esta aplicación va a consistir en una brújula, y además nos va a indicar las coordenadas (longitud y latitud) de donde nos encontramos:

1. Diseño:

Vamos a añadir los siguientes componentes:

  • Un lienzo

  • Dentro del lienzo, una imagen sprite, donde vamos a poner la esfera de la brújula

  • El sensor de orientación

  • El sensor de localización

Además, tendré que añadir etiquetas donde me aparecerán las coordenadas. Añado para ello cuatro etiquetas en un arreglo de tabla:


En la etiqueta 1 pondrá Longitud, en la 3 Latitud, y en la 2 y en la 4 los datos de latitud y longitud (por lo que en principio los dejaremos a 0). Además, las etiquetas 2 y 4 las cambio de nombre (y las llamo longitud y latitud), ya que voy a tener que programarlas, y de esta manera puedo saber cuál es cada una:



Imagen brújulaDenelson83 / CC-BY-SA 3.0


2. Programación:

La programación es muy sencilla:

2.1. Brújula

Comenzaremos por la brújula. Quiero que cada vez que el valor medido por el sensor de orientación cambie, cambie a su vez la posición de la imagen sprite (la esfera de la brújula):



2.2. Coordenadas

Cada vez que cambie el valor del sensor de localización, cambiaremos el texto que aparece en las etiquetas longitud y latitud a los valores indicados por el sensor:


Para terminar, haz un diseño atractivo para la aplicación (colores, tipografías, distribución, etc.)

martes, 1 de mayo de 2018

App Inventor: juego con imágenes (1)

Este trabajo consiste en diseñar una aplicación en la que aparecen varias imágenes (en este caso 4); al apretar cada una de ellas aparece una explicación:





Pasos a seguir:

1. Diseño

 En la ventana de diseño hay que añadir:

  • Un lienzo

  • Dentro del lienzo, cuatro imágenes sprite

  • Una etiqueta
 En cada imagen sprite subiremos una de las imágenes:


En la etiqueta podemos eliminar el texto (dejarlo en blanco)

2. Programación

La aplicación debe mostrar una explicación sobre la imagen cada vez que se pulse. Por ello, para cada una de las cuatro imágenes habrá que utilizar los siguientes bloques:

Mejora la aplicación haciendo un diseño atractivo (colores, distribución, etc.)