lunes, 19 de diciembre de 2016

Superlentes de Rayos X de Mozilla

Este ejercicio consiste en remezclar una página web mediante la herramienta "superlentes de rayos X" de Mozilla. Para ello se elegirá la página web que se desee y:

  • se cambiarán al menos dos imágenes
  • se introducirán al menos dos imágenes nuevas
  • se cambiarán al menos tres textos
  • se cambiarán al menos tres vínculos
  • se cambiará el estilo de los elementos modificados.
En este enlace se explica cómo instalar las superlentes.

Desde este otro enlace pueden instalarse las superlentes.

En este vídeo se explica su funcionamiento:


miércoles, 9 de noviembre de 2016

miércoles, 21 de septiembre de 2016

Cómo hacer una barra de navegación para la web

Para hacer una barra de navegación primero elaboraremos una lista con los enlaces. Las etiquetas de lista son <ul></ul> para una lista desordenada (unordered list, de viñetas) o <ol></ol> para una lista ordenada (ordered list, de números). En principio podemos usar cualquiera, pues posteriormente le quitaremos las viñetas o los números. Cada elemento de la lista debe ir entre las etiquetas <li></li> (list item):






Posteriormente añadiremos los vínculos, con las etiquetas <a></a>:


Ahora quitaremos las viñetas. Para ello habrá que dar estilo a las etiquetas <li>, de esta manera: <li style="list-style-type:none;>:


Si deseamos que la navegación quede en línea, en lugar de hacia abajo, añadiremos al estilo de las etiquetas <li> la propiedad display con el valor inline:


Por último, si no queremos que los vínculos aparezcan subrayados, daremos estilo a las etiquetas <a>, de esta manera: <a style="text-decoration:none;>:


sábado, 16 de abril de 2016

Trabajo final trivial con app inventor

1. Componentes:

https://drive.google.com/file/d/0B97P8vHqhKFKWmxhSHYyeGIxd28/view?usp=sharing
 2. Variables

Para la tirada:

  • dado: Se inicia a 0. Para almacenar el valor de la tirada del dado

  • casilla: se inicia a 1. Para almacenar el valor de la casilla en la que estamos

  • posX: Una lista para almacenar los valores de posición x de la ficha en cada casilla. 

  • posY: Una lista para almacenar los valores de posición y de la ficha en cada casilla.
Para preguntar:

  • preguntasColor: Una lista con todas las preguntas del color.

  • respuestasColor: una lista de listas, con todas las posibles respuestas para cada pregunta del color

  • correctasColor: una lista para almacenar la respuesta correcta a cada pregunta (en formato numérico) del color

  • contadorColor: se inician a 1. Para llevar la cuenta de la pregunta por la que vamos para cada color.

  • respuestaCorrecta: se inicia a 0. Se utiliza para almacenar la respuesta correcta a la pregunta que toca
Además, se añadirá una última variable, que será una lista vacía, y a la que llamaremos petalos. En ella almacenaremos los pétalos de los seis colores:

 3. Programación

3.1. Inicio del juego

Al iniciar la aplicación se hará visible únicamente la disposición Inicio. Además, se harán no visibles los pétalos. Para ello se añadirán las sprite imágenes de los seis pétalos a la lista, y se harán invisibles; al apretar el botón Play se hará visible únicamente la disposición Juego:




3.2. Tirar el dado

Al tirar el dado habrá que:

  • Mostrar en la etiqueta del dado lo que ha salido en la tirada

  • Cambiar el valor de la variable casilla

  • Si la variable casilla vale más que el número de casillas (24), reducir su valor en 24.

  • Mover la ficha a la nueva casilla

  • Mover cada uno de los pétalos a la nueva casilla 

  • Deshabilitar el dado

  • Habilitar el temporizador del reloj. De esta manera se esperará un segundo (o el intervalo que se haya establecido) antes de cambiar de pantalla, para que de tiempo a ver en qué casilla ha caído la ficha:

3.3. Preguntar

Cuando el reloj haga clic habrá que:

  • Inhabilitar de nuevo el reloj

  • Hacer visible la pantalla preguntas e invisibles las otras dos (inicio y juego)

  • Habilitar el selector de lista

  • Comprobar el color de la casilla en la que estamos


  • Cargar la pregunta correspondiente a ese color que marque el contador en la etiqueta de preguntas

  • Cargar las posibles respuestas a esa pregunta en el selector de lista

  • Cargar la respuesta correcta en la variable respuestaCorrecta

  • Cargar las posibles imágenes en su correspondiente sprite imagen

  • Aumentar en uno el contador de ese color (para que la próxima vez haga la siguiente pregunta)

  • Comprobar si el contador vale más que el total de preguntas de ese color, en cuyo caso vuelve a ponerse a uno.


3.4. Comprobar si la respuesta es correcta

Después de seleccionar una respuesta en el selector de lista habrá que:

  • Deshabilitar el selector de lista

Posteriormente se comprobará si la respuesta elegida es correcta. Si lo fuera, habrá que:

  • Aumentar los puntos en 150

  • Notificar un acierto

  • Comprobar si estamos en una casilla de "quesito", y si es así hacer visible el pétalo del color correspondiente
En caso de no haber acertado habrá que:

  • Disminuir los puntos en 75

  • Notificar un fallo, y decir cuál era la respuesta correcta 

Después se comprobará si todos los pétalos son visibles, en cuyo caso se termina el juego:

  • Si todos los pétalos son visibles habrá que notificar que se ha terminado el juego y los puntos que se han conseguido

  • Además, habrá que volver a la pantalla de juego para poder apretar el botón de reinicio si se desea echar otra partida

  • De no ser así, habrá que habilitar el botón seguir jugando para volver al tablero

3.5. Seguir jugando
 
Una vez que se ha respondido la pregunta y se ha comprobado la respuesta correcta habrá que apretar al botón seguir jugando para volver al tablero. Al apretar este botón habrá que:

  • Hacer visible la pantalla juego e invisibles inicio y preguntas

  • Habilitar el botón dado

  • Deshabilitar el botón seguir jugando

3.6. Programación del botón de reinicio

Al presionar el botón de reinicio la ficha debe volver a la primera casilla, los pétalos deben dejar de ser visibles, y la puntuación debe ponerse a 0. Sin embargo, no es difícil apretar el botón accidentalmente. Por ello, la acción al apretar el botón de reinicio será preguntar si realmente se desea reiniciar el juego. Ésto se hace con el notificador:


En el caso de que se elija que sí se quiere reiniciar:


miércoles, 24 de febrero de 2016

Trivial con App Inventor - Trivial completo (un jugador)

El juego consiste en lo siguiente:

Una ficha se va moviendo por el tablero. Cada vez que cae en una casilla, se hace una pregunta del color correspondiente. Cada pregunta acertada suma 150 puntos, y cada fallo resta 75. Si la ficha está en una casilla de "quesito", se consigue uno de ese color. Cuando se tienen los cuatro "quesitos", el juego finaliza.

1. Componentes:

  • Un lienzo con el tablero y una imagen sprite, en la que se pondrá por defecto la imagen 0.png (todas las imágenes de la ficha con quesitos pueden descargarse aquí. Una plantilla para hacer un tablero de 24 casillas puede descargarse aquí).

  • Un botón para el dado (dadoBoton), y una etiqueta que muestre lo que ha salido en la tirada (dadoEtiqueta)

  • Una etiqueta que diga Puntos: y otra etiqueta para almacenar los puntos conseguidos (puntosEtiqueta)

  • Una etiqueta que diga Pregunta: y otra etiqueta para mostrar la pregunta correspondiente (preguntaEtiqueta)

  • Un selector de lista para elegir la respuesta

  • Un botón para reiniciar



Visión general de la aplicación:



2. Variables:


  • Variable dado, que se inicia a 0

  • Variables de la ficha: variable casilla, que se inicia a 1. Variables de posición X y posición Y, que son listas y que pueden traerse de una de las aplicaciones anteriores. Variables para comprobar si tiene o no un quesito de un determinado color (amarillo, rojo, verde, azul), que son booleanas y que se inician todas a falso.

  • Variables de preguntas y respuestas. Se harán tres listas por cada color: una para las preguntas, otra para las respuestas, y otra para las respuestas correctas. También se iniciarán cuatro contadores (uno para cada color), todos a 1. Además, se iniciará una variable llamada respuestaCorrecta, que almacenará la respuesta correcta correspondiente a la pregunta que se hace en ese momento, y que se iniciará a 0.

  • Para los puntos no se hará una variable, pues se almacenarán directamente en la etiqueta.

3. Botón dado:

Se programa igual que en los ejercicios anteriores:

 4. Procedimiento preguntar:

Este procedimiento comprobará el color de la casilla en la que está la ficha. En función del color, cargará en la etiqueta de preguntas (preguntaEtiqueta) la pregunta correspondiente, en el selector de lista las respuestas correspondientes, y en la variable respuestaCorrecta, la respuesta correcta a esa pregunta. Además, aumentará en 1 el contador del color correspondiente:


5. Selector de lista:

En el selector de lista:

  • Se comprueba si la respuesta es correcta. Si es así, se aumentan los puntos en 150 y se llama al procedimiento quesito (para comprobar si hay que añadir un "quesito", y, en su caso, hacerlo). Si la respuesta no es correcta, disminuye los puntos en 75.

  • Se comprueba si se han conseguido todos los quesitos. Si es así, el juego finaliza. Si no, se habilita el dado para poder seguir jugando.

6. Procedimiento quesito

En este procedimiento se comprueba si se está en una casilla de "quesito" de algún color, así como si la ficha aún no tiene el "quesito" de ese color, para, en su caso, añadirlo.


7. Botón reiniciar

Debe poner todas las variables a sus valores iniciales:

8. Modificaciones

8.1. Distintas ventanas para preguntas y tablero

Si las preguntas que vamos a realizar son muy largas pueden no caber en la pantalla del móvil al tiempo que el tablero. Para evitar ésto haremos dos ventanas. En una de ellas aparecerán el tablero, el dado, los puntos, y el botón reiniciar. En la otra la etiqueta de pregunta y el selector de lista.

Las ventanas pueden hacerse con dos disposiciones verticales. En una, a la que podemos llamar juego,  situaremos el tablero y los botones y etiquetas que lo acompañan. En la otra, a la que podemos llamar preguntas, pondremos la etiqueta de preguntas y el selector de lista. Al iniciar la aplicación haremos visible la ventana juego e invisible la de preguntas:

Cuando vayamos a hacer una pregunta cambiarán las tornas, y habrá que hacer invisible la ventana juego y visible la de preguntas. Ésto se hace al principio del procedimiento preguntar:


Asimismo, tras elegir una respuesta, debe hacerse de nuevo visible la ventana juego, e invisible la de preguntas. Estos bloques se añadirán al principio del de selector de lista:



El problema al hacer ésto es que, inmediatamente después de apretar el botón dado, cambiamos de ventana. No da tiempo ni siquiera a ver en qué casilla hemos caído. Para retardar un poco el cambio de una ventana a otra habrá que añadir un componente reloj, que se programará así:

  • La propiedad time enabled se deshabilitará de inicio, y time interval se pondrá a los milisegundos que deseemos que tarde en cambiar de pantalla (en este caso 1500, o sea, segundo y medio):




  •  Al final del bloque del botón dado se quitará la llamada al procedimiento preguntar, y se sustituirá por un bloque que habilitará el temporizador (pondrá time enabled a verdadero).


  • Por último, llamaremos al procedimiento preguntar cuando lo indique el temporizador, al mismo tiempo que lo deshabilitaremos de nuevo:

Asimismo, del botón reiniciar sobran los siguientes bloques (ya no son necesarios porque cambiamos de ventana):



8.2. Clic involuntario en el botón reiniciar

 Puede ocurrir que, involuntariamente, se apriete el botón reiniciar, por lo que convendría pedir una confirmación de que realmente se desea hacer ésto. Para ello primeramente colocaremos todo lo que hay dentro del botón reiniciar en un procedimiento del mismo nombre:

El botón reiniciar se programará de manera que nos muestre un aviso preguntando si realmente se desea reiniciar el juego:

Finalmente, después de elegir, si se ha elegido SÍ, se llamará al procedimiento reiniciar. En caso contrario continuará el juego:

8.3. Puntuación negativa en color rojo

Añade los bloques necesarios para que los puntos aparezcan en color rojo en caso de ser negativos, y de color negro si son positivos.



Puedes descargarte la aplicación en este enlace.

lunes, 8 de febrero de 2016

Trivial con App Inventor 6 - Trivial: tablero y ficha con "quesitos"

En esta aplicación vamos a:
  1. Subir un tablero para el juego de trivial. Se incluirá en un lienzo como una imagen sprite. Puedes descargarte éste:


  2. Subir una ficha, a la que podrán ir añadiéndose los "quesitos" de distintos colores. Se pondrá en el lienzo como una imagen sprite.

  3. Poner un botón para ir añadiendo los "quesitos" a la ficha. Este botón servirá únicamente para comprobar el funcionamiento, y se eliminará al completar la aplicación.


1. Realización de la ficha

A la ficha podrán añadirse un "quesito" rojo, uno verde, uno azul y uno amarillo. Tendremos en total 16 posibles combinaciones (incluyendo la de que la ficha no tenga ningún "quesito"), y habrá que realizar una ficha para cada una de ellas.

Para poder programar la ficha, daremos a cada color un valor numérico, a cada uno el doble que el anterior: Rojo = 1, Verde = 2, Azul = 4, Amarillo = 8. De esta manera podremos almacenar los "quesitos" en una variable numérica. Por ejemplo, si hemos ganado el verde y el azul, ésta variable valdrá 2 + 4 = 6. No hay ninguna otra combinación de colores que de un valor de 6.

Diseñaremos la ficha con El Gimp:






Jugando con la visibilidad de las capas, iremos guardando cada una de las combinaciones, cada una de ellas numeradas como aparece en la siguiente imagen:


Pondremos como imagen predeterminada de la ficha 0.png. Puedes descargar las imágenes aquí.

2. Programación del botón para cambiar la imagen de la ficha

Almacenaremos el número de quesitos en una variable llamada quesitos, que iniciamos con el valor 0.

Al apretar el botón, hacemos que la variable quesitos aumente en 1, y asimismo hacemos que la imagen de la ficha corresponda con el valor de la variable quesitos seguida del texto ".png":



Por último, añade los bloques necesarios para que si la variable quesitos vale más de 15 vuelva a valer 0, y aparezca de nuevo la ficha sin "quesitos".

3. Programación del botón dado

Tráete de otro proyecto las variables de posiciones X e Y para cada una de las casillas, añade un botón para el dado y prográmalo igual que hemos hecho en ejercicios anteriores. Para ello deberás añadir previamente una variable para la casilla, que se inicia a 1, y una variable para el dado, que se inicia a 0.

4. Procedimiento para añadir "quesitos"



Cuando tiremos el dado y la ficha caiga en una casilla de "quesito", habrá que añadir el del color correspondiente (en este caso todavía no vamos a hacer preguntas). El procedimiento quesito debe comprobar:

  • Si la ficha está en una casilla de "quesito" de algún color

  • Si es así, comprobar si la ficha tiene ya el "quesito" de ese color o no

  • y si no lo tiene, añadir el "quesito".


Las casillas de "quesito" del tablero son la 3 y la 15 para el azul, la 5 y la 13 para el rojo, la 8 y la 20 para el amarillo, y la 10 y la 18 para el verde. El procedimiento debe seguir este esquema:

SI (casilla = 3 Ó casilla = 15) Y no tiene "quesito" azul, ENTONCES añade "quesito" azul:

Es fácil comprobar si está en la casilla 3 ó 15, gracias a la variable casilla. Pero, ¿cómo podemos comprobar si la ficha ya tiene el "quesito" azul? Habrá que crear una nueva variable:

En este caso será una variable booleana (que sólo puede tomar dos valores, verdadero o falso). Así pues nuestro procedimiento SI ENTONCES quedaría así:


Así comprobamos si está en una casilla de "quesito" azul y además en la ficha no hay un "quesito" de este color. En caso de que se cumpla esta condición habrá que:

  • Añadir el "quesito" azul, lo que equivale a aumentar en 4 el valor de la variable quesitos (recuerda que dimos un valor 1 al rojo, 2 al verde, 4 al azul y 8 al amarillo)

  • Poner la variable azul a verdadero (la ficha ya tiene el "quesito" azul)

Hay que completar el procedimiento para añadir "quesitos" rojos, verdes y amarillos (para lo que habrá que crear previamente las correspondientes variables booleanas para comprobar si la ficha tiene ya un "quesito" de ese color).

Por último, si se ha añadido algún "quesito", habrá que cambiar la imagen de la ficha.


Además, cuando la ficha tenga todos los "quesitos" deberá acabarse el juego. Para ello deberemos deshabilitar el dado cuando la variable quesitos valga 15. Al final del procedimiento habrá que añadir los bloques correspondientes para hacerlo.


5. Llamar al procedimiento

Retoca la programación del botón dado para que después de apretarlo se llame al procedimiento quesitos


6. Botón de reinicio

Por último, añade un botón para reiniciar la aplicación (poner variables a sus valores iniciales, la ficha, sin "quesitos", en la casilla 1, y habilitar el botón dado).

Trivial con App Inventor 5 - Tablero con dos fichas

En este ejercicio vamos a hacer un tablero con dos fichas (para dos jugadores), de manera que, cuando un jugador tira, se le hace una pregunta. Si la acierta, vuelve a tirar. Si no, pasa el turno al otro jugador.

1- Componentes:

  • Un tablero en su correspondiente lienzo, y dos pelotas para las fichas, una de cada color (en este caso negra y roja). Las posiciones iniciales de las fichas serán x=2 e y=2 para la negra, y x=5 e y=5 para la roja, de manera que la que está encima no cubra por completo a la otra.

  • Un botón para el dado

  • Etiquetas para el dado: Una que ponga "dado" y otra que diga lo que ha salido en la tirada del dado.

  • Etiquetas para casilla: Una que diga "casilla: ", otra que indique el número de casilla en la que está la ficha negra, y otra que indique la casilla en la que está la ficha roja.

  • Etiquetas para aciertos: Una que diga "aciertos: ", otra que indique el número de aciertos del jugador de la ficha negra, y otra que diga los aciertos del jugador de la ficha roja.

  • Una lista de selección para las respuestas, que de inicio estará deshabilitado.

  • Un botón reiniciar.


2- Variables

  • Una variable para el dado, que iniciamos a 0

  • Las variables para las posiciones x e y de las distintas casillas

  • Variables para las preguntas: el contador, que se inicia a 1, la lista de preguntas, la lista de respuestas, y la lista de respuestas correctas, igual que en el ejercicio anterior.

  • Variables de casilla: una (casillaNegra) para guardar el valor de la casilla de la ficha negra y otra (casillaRoja) para el de la casilla de la ficha roja.

  • Los números de aciertos los guardaremos directamente en las correspondientes etiquetas, sin hacer una variable específica para ellos. 

  • También hace falta una variable para saber qué ficha está jugando, la negra o la roja. Debe saberlo tanto el usuario como la aplicación. Una forma de hacer ambas cosas a la vez es guardar esta variable en el color de fondo del botón dado, que será negro si está jugando la ficha negra, y rojo si lo hace la roja. Pondremos de inicio el color de fondo del botón dado en negro.
3- Procedimientos

  • Procedimiento preguntar, igual que en las aplicaciones anteriores.


  • Harán falta, además, otros dos procedimientos: uno para mover la ficha negra, y otro para mover la ficha roja (moverNegra y moverRoja):


4- Programación del botón dado

El botón dado se programa igual que en las aplicaciones anteriores, pero en este caso hay que tener en cuenta cuál de las dos fichas se está moviendo, para llamar al procedimiento correspondiente. Recuerda que es el color de fondo del propio botón el que nos indica qué ficha se mueve:


5- Programación de la lista de selección

En la lista de selección haremos lo siguiente:
  1. Comprobamos qué ficha está jugando (según el color de fondo del botón dado).

  2. Comprobamos si la respuesta es correcta, y si lo es, aumentamos los aciertos de ese color. Si no lo es, cambiamos el color de fondo del botón dado para que juegue la otra ficha.

  3. Aumentamos el contador, y en caso de que el valor del contador sea mayor que el número de preguntas, lo ponemos a 1.

  4. Deshabilitamos la lista de selección y habilitamos el dado.

6- Programación del botón de reiniciar

El botón reiniciar debe:

  • Poner las variables contador, casillaNegra y casillaRoja a sus valores iniciales (1).

  • Poner los aciertos negros y rojos a 0

  • Poner el dado a 0

  • Situar las fichas en sus coordenadas iniciales, (2,2) y (5,5)

  • Habilitar el botón dado

  • Poner el color de fondo del botón dado en negro 

7- Mejoras

  • Tal y como está la aplicación, cuando ambas casillas están en la misma casilla, la negra cubre por completo a la roja. Podemos evitar ésto haciendo que la roja sobresalga un poco, por ejemplo, aumentando sus valores de X e Y en 3 píxeles:

  • Aún así, la ficha negra siempre queda por encima de la roja cuando están en la misma casilla. Podemos hacer que quede por encima la ficha que está jugando en ese momento modificando sus valores de Z:

    • En el procedimiento moverRoja haremos fichaRoja (Z) = 2, y fichaNegra (Z) = 1

    • En el procedimiento moverNegra haremos fichaNegra (Z) = 2 y fichaRoja (Z) = 1

jueves, 4 de febrero de 2016

Trivial con App Inventor 4 - Tablero con dos tipos de preguntas

Vamos a añadir una complicación a la aplicación anterior: Según el color de la casilla en la que esté la ficha (amarillo o azul), se hará un tipo de preguntas distinto.

Elementos:

Los elementos serán los mismos que para la aplicación anterior. Únicamente habrá que añadir otra etiqueta de aciertos, pues llevaremos por un lado la cuenta de los aciertos amarillos y por otro la de los azules:


Variables:

  • Las variables dado y casilla, así como las listas de posiciones x (posx) e y (posy) se mantienen igual que en la aplicación anterior.

  • Serán necesarios dos contadores, uno para las preguntas amarillas (contadorAmarillo) y otra para las azules (contadorAzul). Ambos se inician a 1.

  • También serán necesarias dos variables para llevar la cuenta de los aciertos: aciertosAmarillos y aciertosAzules. Ambas se inician a 0.

  • Asimismo harán falta listas de preguntas, respuestas y respuestas correctas tanto para las preguntas amarillas como para las azules:


Procedimientos:

Harán falta también dos procedimientos: uno para hacer una pregunta azul (preguntarAzul) y otro para hacer una amarilla (preguntarAmarillo), y que son iguales que el utilizado en la aplicación anterior.

Botón reiniciar:

El botón reiniciar debe poner en sus valores iniciales todas las variables (casilla, contadorAzul y contadorAmarillo a 1, dado, aciertosAzules y aciertosAmarillos a 0). Asimismo debe poner a 0 las etiquetas de aciertos amarillos y azules, y a 1 la etiqueta de la casilla. También deberá situar la ficha en la casilla 1, inhabilitar el selector de lista, y habilitar el botón dado, igual que en la aplicación anterior.

Botón dado:

La programación del botón dado es igual que en la aplicación anterior, con una salvedad: antes de preguntar debemos comprobar si estamos en una casilla azul o amarilla, para hacer un tipo u otro de pregunta. Para ello vamos a utilizar un bloque que no hemos empleado hasta ahora: el bloque módulo de que aparece en el apartado de matemáticas, y que nos da el resto de una división.

En nuestro tablero las casillas amarillas son impares, y las azules, pares. Si hacemos el módulo del valor de una casilla azul (un número par) entre dos, siempre va a ser cero. Si la casilla es impar (amarilla), el módulo de dividir por dos será 1. Ésta va a ser la condición que vamos a emplear para comprobar de qué color es la casilla en la que está la ficha:

Después de seleccionar:

El bloque de después de seleccionar también es básicamente igual que en la aplicación anterior, aunque ahora habrá también que comprobar si la respuesta dada es de una casilla amarilla o azul:


Tablero para descargar: