Vídeo Tutoriales de App Inventor.

Buenas,

Hoy os traigo un trabajo grupal. Dicho trabajo está dividido en 7 vídeos donde se mostrarán como funciona "App Inventor" y aspectos de la creación de aplicaciones.

Dichos videos explican los siguientes aspectos:

• Requisitos técnicos para poder utilizar "APP Inventor"

 

 
• Entorno de diseño web de aplicaciones móviles

 
• Entorno de programación "Block Editor"

 
• Diseño de mi primer programa "Hola Ciclo"

 
• Diseño mejorado del programa "Hola Ciclo"

 
• Utilización de controles "TextBox", "Label", "ListPicker", "CheckBox" y "Button"

 
• Utilización de controles "Canvas", "ImageSprite" y "Clock"

Para finalizar mando un agradecimiento a todos los participantes, por su gran labor y esfuerzo en la realización de los tutoriales :-)

Espero que os sea de utilidad, comenten cualquier duda y opinión.

Saludos

Leer más [...]

Práctica 4

Buenas,

Hoy vamos a proponer una nueva actividad, en este caso usaremos los conocimientos ya ganados anteriormente.

La actividad consiste en el famoso juego "El ahorcado", el cual consiste en que uno meterá un número, y otro tendrá que acertarlo.

El juego tendrá las siguientes características:

• Un jugador podrá cometer hasta 5 errores, al 6ª habrá perdido.
• Con cada error que vaya cometiendo irá apareciendo una imagen, dicha imagen aparecerá en otra "Screen".
• Con el 1º fallo, se mostrará la imagen de la cabeza.
• Con el 2º fallo, se mostrará la imagen de cabeza + cuerpo.
• Con el 3º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo.
• Con el 4º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo + brazo derecho.
• Con el 5º fallo, se mostrará la imagen de cabeza + cuerpo + brazo izquierdo + brazo derecho + pierna izquierda.
• Con el 6º fallo, se mostrará la imagen completa y terminará el juego.
• Si el jugador acierta, aparecerá una copa indicando que ha ganado.
• También con cada error irá apareciendo un mensaje indicando el nombre del jugador, y si el número es mayor o menor.
• Un "TextBox" para el nombre del jugador.
• Un "TextBox" para el número secreto.
• Un "TextBox" para el número a adivinar.
• 4 botones.
• 1 - Número aleatorio.
• Nos dará un número aleatorio.
• 2 - Ver/Ocultar Número Secreto.
• Este botón tendrá que controlar si se ha introducido un número, que no tenga puntos y que sea un número de entre el 1 y el 100, en el caso de que no lo cumpla indicará "número incorrecto".
• Nos ocultará tanto el botón de número aleatorio como la casilla del número.
• 3 - Comprobar.
• Este botón tendrá que controlar si se ha introducido un número, que no tenga puntos y que sea un número de entre el 1 y el 100, en el caso de que no lo cumpla indicará "número incorrecto".
• Nos comprobará si hemos acertado el número.
• Nos mostrará un mensaje indicando nuestro nombre y si el número es mayor o menor.
• Ejemplo:
• José, el número a encontrar es mayor.
• 4 - Salir.
• Con él saldremos de la aplicación.

Pasamos a ver como quedaría la parte gráfica y sus componentes.

 

 

 La parte interna nos deberá de quedar algo así.

Screen1

Screen2

El resultado final quedará algo así.

Espero que os animéis a realizarla, comenten cualquier duda y opinión.

Saludos

Leer más [...]

Práctica 3

Buenas,

Hoy vamos a proponer una nueva actividad usando unos nuevos objetos.

La actividad consiste en una pelota que irá rebotando en los objetos que encuentre a su paso, lo cuales algunos aumentarán su velocidad y otros la disminuirán, también tendremos una barra la cual iremos moviendo con el dedo, la pelota no deberá tocar el fondo de la pantalla, si lo hace la partida habrá acabado.
La actividad tendrá que tener las siguientes características:

• Un contador de puntos:
• En el se irán registrando los puntos obtenidos.
• Un botón de reiniciar.
• Cuando se pulse en él, tanto la pelota como la barra se regresarán a su posición inicial, la pelota comenzará a moverse.
• El contador de puntos se reiniciará a 0.
• Un botón de salida.
• Dos cubos:
• El primero será rojo, cuando la pelota choque contra él, la pelota perderá un punto de velocidad y la barra cambiará al color rojo.
• El segundo será Azul, cuando la pelota choque contra él, la pelota ganará un punto de velocidad y la barra cambiará al color azul.
• Una pelota:
• La pelota irá rebotando en los distintos obstáculos, cuando choque con el cubo azul sumará un punto, cuando la pelota coche con el cubo rojo perderá un punto y por último si la pelota toca el fondo de la pantalla la partida habrá acabado y la barra se cambiará al color inicial.
• Una barra:
• La barra se moverá horizontalmente con el dedo, evitando que la pelota choque contra el suelo.

Para la realización de esta actividad vamos a ver 2 elementos nuevos:

• Canvas: Es un elemento en el cual podemos meter imágenes las cuales podrán interactuar en la pantalla, moverse, etc....

• ¿Dónde está?: Palette, Basic, Canvas.
• ¿Cómo se usa?: Una vez lo has introducido en la pantalla le das el tamaño del lienzo que necesites, dentro meteremos los elementos que interactuarán.

• ImageSprite: Es un elemento el cual introduciremos dentro del "Canvas", dicho elemento se le podrá añadir una imagen.

• ¿Dónde está?: Palette, Animation, ImageSprite.
• ¿Cómo se usa?: Una vez lo has introducido dentro del "Canvas", le añades una imagen, luego esa imagen se moverá en la pantalla según le indiquemos nosotros.

Pasamos a ver como quedaría la interfaz gráfica de nuestra aplicación.

La parte interna de nuestra aplicación quedará algo así.

 

 

 

El resultado final de nuestra aplicación quedará algo así.

 

Espero que os animéis a realizarla, comenten cualquier duda y opinión.

 

Saludos

Leer más [...]

Práctica 2

Buenas,

Hoy vamos a proponer la realización de una aplicación con los conceptos ya vistos y algunos otros nuevos.

• La aplicación constará de un "TextBox" donde se introducirá un número, y 5 botones que nos darán un resultado según le indiquemos.
• Ejemplo:

• Botón "Lista": Nos devolverá una lista del número indicado de forma secuencial.
• Botón "Suma": Nos devolverá la suma del número de forma secuencial.
• Botón "Pares": Nos devolverá solo los números pares.
• Botón "D/6": Nos devolverá los números divisibles entre 6.
• Botón "Factorial": Nos devolverá el factorial del número indicado.

• También tendrá un "Label" que nos mostrará el resultado en pantalla, y por último un Botón para "Reiniciar" y otro para "Salir".

Para la realización de este ejercicio vamos a ver tres bloques nuevos.

• Variable: Una variable es un espacio en memoria el cual nos brinda la posibilidad de guardar un resultado que posteriormente usaremos, como si habláramos de un cajón, el cual le vamos introduciendo paquetes y que vamos usando y sustituyendo unos por otros.

• ¿Dónde está?: Built-in, Definition, Variable.
• ¿Cómo se usa?: Una vez has sacado la variable nos vamos a My Blocks, My Definitions, en este apartado nos aparecerá 2 controles nuevos:
• 1: Set Global variable, nos recoge el dato que le indiquemos y lo manda a la variable.
• 2: Global variable, nos muestra el resultado donde le indiquemos.

• While: Es un control el cual nos permite realizar un test tantas veces como nos sea necesario hasta llegar a cumplir el requisito indicado.

• ¿Dónde está?: Built-in, Control, While.
• ¿Cómo se usa?: En el apartado "test" le indicamos que debe cumplir, y en "do" que hacer.

• Procedure: Es un objeto en el cual introduciremos una serie de sentencias a ejecutar, y que mandaremos a ejecutar con una única pieza. Es muy útil en el caso que tengas que repetir varias sentencias en una aplicación, para evitar que en el caso de error o modificación haya que andar modificando todo las sentencias de la aplicación, se introduciría este objeto en la que estarían las sentencias a ejecutar.

• ¿Dónde está?: Built-in, Definition, Procedure.
• ¿Cómo se usa?:  Una vez sacado el elemento nos vamos a My Blocks, My Definitions, en este apartado nos aparecerá 1 control nuevo:
• 1: call Procedure, será la pieza que se introduzca en el botón

Pasamos a ver como sería la parte visual de nuestra aplicación:

 

La parte interna de la aplicación debería quedar algo así:

 

 

El resultado final de nuestra aplicación tendrá un aspecto similar al siguiente:

 

 

Espero que os animéis a realizarla, comenten cualquier duda y opinión.

Saludos.

Leer más [...]

Práctica 1

Buenas,

Hoy vamos a proponer la realización de una aplicación con los conceptos ya explicados anteriormente.

 

Realizar aplicación que:

• Nos muestre un panel:
  • Nombre:  Introduce nombre (TextBox)
  • Estudio: Listado Estudios (Es una lista con los valores iniciales, ciclo, bachillerato y superior).
  • Botón. Dicho panel tendrá un botón (Entrar) el cual actuará de dos posibles maneras:
    • Si hemos seleccionado "ciclo",
      • Nos mostrará un panel en el cual nos aparecerá la frase "hola" y el "nombre" (nombre introducido anteriormente), un cajetín para la edad, y dos botones;
      • “Mayor” que si lo pulsamos nos dirá si somos mayor de edad o menores de edad.
      • “Faltan” que nos dirá, si somos menores de edad, cuantos años nos queda para cumplir los 18 años.   
    • Si hemos dicho "bachillerato" o "superior",
      • Nos mostrará otro panel que contendrá un listado de institutos por ciudad, que según seleccionemos nos mostrará una imagen de dicho centro.

NOTA: Recordar ocultar los "Screen Arrangement", "pv_ciclo" y "pv_otros", para mostrarlos mediante el botón "Entrar".

La parte gráfica de la aplicación deberá quedar algo así:

NOTA: Recordar subir las imágenes de los institutos.

La configuración interna de la aplicación debería quedar algo así:

 

 

La aplicación final tendrá el siguiente aspecto.

Espero que os animéis a realizarla, comenten cualquier duda y opinión.

Saludos.

 



Leer más [...]