TP Final

Hola!!!
Como Actividad Final de APROBACIÓN tendrán que:

1) Realizar la APP Caza al topo.
No olviden incluir su nombre de autoría.

Entregar en la entrada: captura del diseño, captura de la programación y captura del código QR. 

2) Crear su propia App que aplique lo aprendido.

No olviden incluir su nombre de autoría.

Entregar en la entrada: captura del diseño, captura de la programación y captura del código QR. 

FECHA MÁXIMA DE ENTREGA.
26/11

Read More

Clase 19/11

 

Read More

Clase 4to COM - 17/11

 

   

HOY VAMOS A CAZAR AL TOPO!!!

  

 

Elementos para nuestro proyecto

imagen de fondo en nuestro lienzo.

Imagen del sprite

Read More

Vamos a cazar al topo...

Hola chicos y chicas!!! ¿Cómo están?

Hoy les propongo crear un juego muy sencillo denominado: MoleMash.

Aparecerá un topo en posiciones aleatorias en un campo de juego, y el jugador gana puntos golpeando el topo antes de que salte.
1) Vamos a crear un nuevo proyecto.

2) En la paleta accederemos al grupo "Dibujo y animación" y allí seleccionaremos y arrastraremos el componente "Lienzo".

3) Vamos a asignarle a ese lienzo un alto de 300 pixeles y un ancho que se adapte al contenedor.

4) Colocaremos la imagen de fondo en nuestro lienzo.

 5) Subiremos también la imagen pequeña de nuestro topo.

6) Agregamos un cuadro de texto, con un color de fondo, un ancho al contenedor, el texto centrado y en negrita "Caza al topo".

7) Colocaremos sobre nuestro lienzo la SpriteImagen y le diremos que es nuestro topito.

Le cambiamos el nombre a la SpriteImagen a Topo.

8) Vamos a agregar un "Timer", que es un compoente no visible que es un sensor de reloj que marcará la velocidad a la que se desarrollará el juego.

Lo renombramos como Timer

Vamos a llevar su duración a 1/2 segundo o sea a 500 milisegundos.

9) Vamos a agregar además un sonido de vibración. Vamos a Medios y agregamos Sonido y le damos también una duración de 500 milisegundos. Le cambiaremos el nombre a Vibrar.

 

VAMOS A LA PROGRAMACIÓN

1) Lo primero que haremos es programar el Timer que controlará los tiempos del juego, para que, cada 1/2 segundo (que es lo que programamos) nuestro topo cambie de posición dentro de nuestro lienzo, pero que no se salga de los límites ninguna parte de su cuerpo.
Para ello cambiaremos las posiciones en x y en y de nuestro topo.

Para colocar el topo en una posición aleatoria en x, vamos a usar una multiplicación, 

entre un número decimal aleatorio

y la resta entre el ancho del lienzo y el ancho del topo (esto me garantizará que el cuerpo del topo caiga siempre dentro del lienzo.

Luego haremos algo similar con la coordenada y, atendiendo al alto del lienzo y al alto del topo.

2) Veremos ahora como podemos cazar a nuestro topo con el dedo.

Veremos que al seleccionar el componente topo hay una función que es "cuando la posición de nuestro dedo coincide con la posición del topo", es decir, cuando lo estemos tocando.

Queremos que al tocarlo nuestro teléfono vibre durante 1 segundo.

TAREA:
Crea una nueva entrada en tu blog que cuente tu proyecto. Incluye las capturas del diseñador, el editor del código y el código QR del archivo apk.

Read More

12/11 - Encuentro de consultas.

Hola chicos/as!!!

Estaré hoy disponible de 11 a 11.50 en la sala de videoconferencias, para consultas.

Saludos
Profe Cristina

Read More

Clase de 4to. ECO - 4/11

 Diseño de APPs

  

Read More

Mi segunda App

En esta segunda actividad, vamos a crear un juego sencillo, para continuar avanzando en el desarrollo de aplicaciones móviles con App Inventor.

Para comenzar a jugar, el usuario hace clic en un Botón y entonces la app crea un número secreto, aleatorio entre 1 y 20.

El usuario introduce un número en el CampoDeTexto y hace clic en un Botón.

La aplicación compara el número ingresado por el usuario con el número secreto.

Si es igual, el juego termina.

Si no, la aplicación sólo dice si el número secreto es mayor o menor al que el usuario introdujo, y vuelve a darle el control al usuario hasta que acierte.

Gana el que acierta en la menor cantidad de intentos.

Diseñador

En la pantalla colocaremos los siguientes elementos:

• Botón1: para iniciar el juego
• Etiqueta1: para el texto “Introduce un numero”
• CampoDeTexto: para que el usuario ingrese el número
• Botón2: para que el usuario haga clic después de ingresar el número
• Etiqueta2: para que la aplicación diga si el número a adivinar es mayor, menor o igual al elegido
• Etiqueta3: para almacenar el número a adivinar

Cambiemos las propiedades de cada componente, seleccionándolo en la lista de componentes o en el visor y luego realizaremos los cambios en la lista de propiedades de la derecha:

- Screen1: le pusimos un color de fondo gris, el título "Adiviná el número" y centramos horizontal y verticalmente

- Botón1: le pusimos un color de fondo azul, un color de texto gris y el texto "Hacé clic aqui para comenzar"

- Botón2: le pusimos un color de fondo morado, un color de texto gris y una forma oval.

Observá que los textos de Etiqueta2 y Etiqueta3, en realidad, no van, pusimos los textos sólo para mostrar la ubicación de las etiquetas.

Además, la Etiqueta3 debería ir no Visible (hay una propiedad que permite hacer esto), podés mantenerla visible mientras probás el juego, después tenés que ocultarla (si no el juego no tiene gracia, ¿no?).

Bloques

Ahora hacemos clic en Bloques y vamos a definir qué tiene que suceder cuando el usuario haga clic en cada uno de los botones.

Cuando haga clic en el Botón1 la app guarda en Etiqueta3 un número entero aleatorio comprendido entre 1 y 20. Observá que usamos:

- el bloque "cuando.Botón1.Clic" del grupo Botón1,

- el bloque "poner.Etiqueta3.Texto.como" del grupo Etiqueta3

- y el bloque "entero aleatorio entre" del grupo Matemáticas

Cuando haga clic en el Botón2 la app compara el número secreto (guardado en Etiqueta3) con el número introducido por el usuario (guardado en CampoDeTexto1). 

- Si el número secreto es mayor al introducido por el usuario, aparece en la Etiqueta2 la frase Mi número es mayor. 

- Si el número secreto es menor al introducido por el usuario, aparece en la Etiqueta2 la frase Mi número es menor.

- Y si el número secreto es igual al introducido por el usuario, aparece en la Etiqueta2 la frase ¡¡¡Acertaste!!!.

- Para estas tres comparaciones usamos el bloque "Si" que se encuentra en el grupo Control. Es una estructura básica de la programación, seguramente alguna vez la utilizaste en Excel. Básicamente, el bloque "Si" pregunta si una condición es verdadera y, en caso afirmativo, realiza la acción que se especifica a la derecha de "entonces".

- Por ejemplo, en el primer caso, la condición por la cual se pregunta es si la Etiqueta3 es mayor que CampoDeTexto1. En caso afirmativo, se realiza la acción indicada a la derecha de "entonces", es decir, se pone en la Etiqueta2 el texto "Mi número es mayor".

Algunas observaciones:

-     Recordá que la Etiqueta3 puede estar visible mientras comprobás el funcionamiento de la aplicación, pero cuando comprobaste su buen funcionamiento, debés ocultarla (desmarcando la propiedad Visible en la lista de propiedades del Diseñador)

-      Los bloques pueden duplicarse con la combinación de teclas Ctrl-C/Ctrl-V o con el mouse click derecho/Duplicar. Observá que esto agiliza muchísimo el trabajo con los bloques.

-     Muchos bloques contienen desplegables que permiten cambiar su significado, por ejemplo, el bloque condicional ">" puede cambiarse a ">" o "=" clickeando sobre el desplegable y seleccionado otro condicional.

-     Observá que el bloque "poner.Etiqueta3.Texto.como" cambia el valor de la propiedad Texto del componente Etiqueta3. En cambio, el bloque "Etiqueta3.Texto" muestra el valor de la propiedad Texto del componente Etiqueta3. Son bloques parecidos, pero hacen cosas muy diferentes.

-     Observá que un grupo de bloques (un "procedimiento"), siempre comienza con un "evento", es decir, un acontecimiento que la aplicación es capaz de detectar. Por ejemplo, cuando el usuario hace clic sobre un botón. De hecho, hasta ahora, en esta clase como en la anterior, sólo hemos "programado" este tipo de eventos, la próxima clase veremos otros.

EXTRA!!! CONSULTA

¿Cómo programo adivinar un texto?

A la pregunta... ¿Cuál es el mejor país del mundo?

Read More

Clase 4to. COM - 3/11

 Diseño de Apps

Read More

Clase 4to. ECO - 29/10

 

DISEÑO DE APPs
 

 

LINK A YOUTUBE

Read More

Comparte tu primera APP

 Hola!!!

La propuesta para esta nueva actividad es que compartas tu primera APP, en una nueva entrada de tu Blog.

Ingresa en la entrada:

1) La captura de tu APP en el Visor en el App Inventor Designer.

Recuerda que...

SIEMPRE INCLUIRÁS EN TUS APPs UNA ETIQUETA CON TU FIRMA.
Puede ser un ALIAS que te identifique.

2) La captura de tu APP en el Visor en el App Inventor Blocks Editor.

3) La captura del código QR y el link a tu APP.

Saludos
Profe Cris

Read More

Mi primera APP (Programación y Testeo)

 

Programación

En el próximo paso programaremos nuestra aplicación.
Es decir, haremos que al tocar el botón, en este caso una imagen, se desencadene el audio.

Para ello, vamos a usar el Editor de bloques para definir la forma en que se comportará nuestra aplicación. Le diremos a los componentes lo que deben hacer y cuándo hacerlo. En nuestro caso, lo que debe suceder cuando el usuario de tu aplicación pulse un botón.

Para comenzar, hacemos clic en el botón Bloques. 

Esto abre la ventana de programación con bloques. La parte más amplia, ahora en blanco, es el Editor, donde colocaremos los bloques de nuestros programas.

En la pestaña bloques hay dos grupos: Integrados y Screen1.

Los bloques integrados son el conjunto de bloques que están disponibles para cada aplicación a construir.
Como podemos ver, los bloque están organizados por colores.
Los bloques debajo de Screen 1 son los que se encuentran vinculados con los componentes que hemos seleccionado para nuestra aplicación.

Los botones situados debajo de cada grupo se amplían y se muestran los bloques cuando se hace clic en ellos.
Los bloques color mostaza son los manejadores o gestores de sucesos. Indican qué hay que hacer cuando sucede algo en la aplicación.

En este caso, el manejador nos permitirá decir que va a pasar cuando hagamos clic sobre la imagen.

Hacemos clic sobre Boton1

Seleccionamos el bloque "Cuando Boton1. Clic" y lo arrastramos al Visor.1.  

Hacemos clic en Sonido1.

Buscamos el bloque llamar "Sonido1.Reproducir", lo arrastramos al Visor y lo "enganchamos" dentro del bloque anterior.

Buscamos el bloque llamar Sonido1.Vibrar, arrastralo al Visor y "enganchalo" a continuación del bloque anterior.

Hacemos Clic en el bloque integrado Matemáticas
Seleccionamos el bloque numérico, lo arrastramos al Visor y lo vinculamos a la derecha de la palabra "milisegundos" del bloque anterior. Con el teclado cambiaremos el número "0" por "1000".

Probar nuestras APPs

Podemos probar nuestras APPs antes de descargarlas e instalarlas en nuestros dispositivos.

Para ellos utilizaremos una APP denominada MIT AI Companion.

Una vez instalada la aplicación, debemos abrirla.

Luego de ello, accedemos al menú Conectar y a la opción AI Companion.

Nos brindará un código textual y un código QR.

Según la opción seleccionada, presionaremos el botón correspondiente:

- El naranja para ingresar el código textual.

- El celeste para escanear el código QR.

Se vinculará el sitio de App Inventor con nuestro celular para que se pueda visualizar nuestra app.

La APP se visualizará en nuestro dispositivo, para su testeo.

Read More

MI primera APPs (Diseño)

 Hola!!!

¿Cómo están? Espero que bien.

Aquí estoy con una nueva propuesta...
¿Qué vamos a aprender?
Algo que les resultará útil, agradable  (eso espero) y que tal vez los haga famosos (no creo que los haga millonarios, pero nunca se sabe... jaja).

¿Qué es?
El diseño de aplicaciones móviles para celulares.

Para crear aplicaciones para móviles existen numerosas plataformas de desarrollo. 
Una de ellas es App Inventor, desarrollada por Google para crear aplicaciones para dispositivos Android. 
El entorno de desarrollo es completamente visual, tanto en la etapa del diseño como en la de programación (a través de bloques), y por eso es una buena puerta de acceso para los que recién se inician en este tema.


Clase Nº 1: Nuestra primera aplicación con App Inventor.

Empecemos la construcción de nuestra primer app: 
La vamos a llamar "MiprimeraApp".

A medida que construyas vas a aprender a usar las tres herramientas fundamentales de trabajo de App Inventor:

- El Diseñador, el lugar donde diseñás tu aplicación, y que se ejecuta en el navegador web.

- El Editor de bloques, el lugar donde se configura el comportamiento de la aplicación, y que también se ejecuta en el navegador web.

- El Celular.

IMPORTANTE!!!! Para usar App Inventor necesitamos una cuenta de GMail. Por suerte, ya la tenemos...

¿Listo? 

1) Vamos al sitio de App Inventor:
http://ai2.appinventor.mit.edu
y nos logueamos con nuestro email de gmail.

Se nos abrirá una página con los términos de uso que tendremos que aceptar.

Originalmente, la página está en Inglés, pero podemos seleccionar el idioma desde el último menú de la derecha.

El mensaje nos indica que aún no tenemos proyectos creados y nos sugiere el uso de una Guía si es la primera vez que trabajaremos en este tema.

2) Crearemos un proyecto nuevo haciendo clic en el botón "Comenzar un proyecto nuevo".

Escribimos el nombre del proyecto, por ejemplo: MiprimeraApp, en una sola palabra, sin espacios, y hacemos clic en Aceptar.

En el navegador se abre el Diseñador, el lugar donde se diseñan las pantallas de tu aplicación, organizando los distintos componentes en el Visor (el espacio central).

Los componentes disponibles se encuentran a la izquierda, bajo la etiqueta Paleta, agrupados en secciones:

- Interfaz de usuario
- Disposición
- Medios
- Dibujo y animación
- Maps
- Sensores
- Social
- Almacenamiento
entre otros.










Vamos a diseñar algo simple:
Una imagen que, cuando la toque, se desencadenará un audio.


En mi caso, mi bebé va a llorar al tocarlo.

3) Vamos a descargar a nuestra PC una imagen.

4) Crearemos un botón que contenga a la imagen.

a) Hacemos clic, arrastramos y soltamos el componente Botón a Screen1 (así se denomina nuestra pantalla). Aparecerá en la lista de componentes.

b)  En la lista de Propiedades, en la columna de la derecha, debajo de la palabra Imagen, hacemos clic en Ninguno para que se abra el menú de opciones.
c) Hacemos clic en Subir archivo, seleccionamos en la computadora el archivo descargado y hacemos clic en Aceptar.

d) Eliminamos el texto para Button1 que aparece bajo la propiedad Text usando la tecla de retroceso.

5) Ahora agregaremos una etiqueta con el texto que deseamos que aparezca debajo de la imagen (en mi caso: "Acariciame").

a) Arrastramos y soltamos el componente Etiqueta al Visor, situándolo por debajo del de la imagen. Aparecerá en la lista de componentes como Etiqueta1

b) En la ventana de propiedades, cambiaremos la propiedad Texto (text) de Etiqueta1 para que diga "Acariciame" (o lo que quieran). Verás el cambio del texto en el diseñador y en el dispositivo.

7. Cambiá el Color de Fondo (BackgroundColor) de Etiqueta1, haciendo clic en el cuadro.
8. Cambiá el Color de Texto (TextColor) de Etiqueta1
9. Cambiá el Tamaño de la Fuente (FontSize) de Etiqueta1 a 30

Finalmente, agregamos el sonido.

10. Hacemos clic en la sección Medios de la Paleta para ver los componentes disponibles en esa sección.
12. Arrastramos un componente Sonido y lo colocamos en el visor. 
Al colocarlo, aparecerá en la parte inferior del Visor marcada como Componentes no visibles.

13. En la lista de Propiedades, debajo de la palabra Origen, hacemos clic en Ninguno para que se abra el menú de opciones, hacemos clic después en Subir archivo, seleccionamos de la computadora el archivo que descargamos y hacemos clic en Aceptar.

SIEMPRE INCLUIRÁS EN TUS APPs UNA ETIQUETA CON TU FIRMA.
Puede ser un ALIAS.

En nuestra próxima clase, aprenderemos a programarla.

Fuente: Aulas Virtuales Entramar

Read More