PROYECTO: FORMANDO SABELOTODOS

- APLICATIVO MOVIL -

Se requiere un aplicativo móvil y desktop que contenga una serie de preguntas y

respuestas para niños entre 2 y 7 años.

Las preguntas van categorizadas en 10 áreas.

El aplicativo manejará unas 1400 preguntas con sus respuestas y cada una de ellas
se quiere que el niño las pueda escuchar, por lo que tendrá una base de datos con
las preguntas y respuestas, tanto escritas como en audio y también con imágenes.

Se quiere que la persona/cliente tenga un código para bajar la aplicación. Si el

cliente compra a cuotas, el sistema le mostrará los 10 botones de las áreas, pero 3
de ellos deshabilitados. Pero si compra de contado o si compra a cuotas, pero
acaba de cancelar, el sistema le dará otro código con el cual activar las otras tres
áreas (botones).

A continuación, se presenta un prototipo funcional del aplicativo con las imágenes

definitivas del mismo.

Las preguntas y sus respuestas se encuentran en una base de datos.

Cada respuesta viene acompañada con una imagen GIF o JPG que se desea que se
presente junto a su respuesta. De igual forma, existe un archivo mp3 por cada
pregunta/respuesta para que el usuario le pueda dar clic en un ícono de sonido y
escuchar de manera audible tanto la pregunta como su respuesta.
La base de datos que maneja la información a trabajar en el aplicativo tiene los
siguientes datos:

- Código de la pregunta
- Pregunta. Redacción de la misma
- Respuesta. Redacción de la misma
- Palabras claves. Palabras que contiene esa pregunta y por medio de la cual
se realizarán búsquedas de las mismas.
- Sabías que… Algunas preguntas tienen, además de su respuesta normal, una
descripción adicional que también debe ser presentada.
- Archivo de imagen GIF, que se presentará por cada respuesta.
- Archivo de imagen GIF, para el SABÍAS QUE, en caso de tenerlo.
- Archivo de audio, que contiene tanto la pregunta, como su respuesta.

Los tamaños, aproximados, a manejar en los archivos son:

- Archivo MP3 de pregunta: 50 KB
- Archivo MP3 de respuesta: 300 KB
- Archivo de imagen GIF: entre 200 y 1500 KB

En la app móvil, cada que se vea una pregunta, se descarga de la web el audio y la
imagen y se guarda en un repositorio local, para que, en la próxima consulta, ya
sea más rápido porque se encuentra en el dispositivo.

Se le coloca en configuración un switch que activa y desactiva el permiso de cargar

la info (mp3 e imágenes) en el dispositivo. Esto por si se satura la memoria del
dispositivo.

La app desktop (Electron), se descarga de la web con la BD SQLite de preguntas y

sus respuestas, pero no se baja el repositorio de imágenes y audios. Entonces,
debe haber en algo de configuración que permita bajar esas imágenes y audios por
cada categoría, así no se ve tan lento la bajada inicial del aplicativo y se van
descargando en la medida que el usuario lo vaya pidiendo. Allí se puede colocar el
permiso para las últimas tres categorías (Contado y cancelación total).
Si no se han descargado las imágenes y audios del repositorio, para un área
específica, cuando se quiera consultar una pregunta, que pertenece a esa área, se
debe dar aviso que debería hacerlo para una mejor experiencia.

Las últimas tres áreas, estarán deshabilitadas, y tendrán al frente una casilla para
entrar un serial de activación. Cuando se digite ese serial, él realiza la validación
contra el sistema de seriales (API), donde se guarda el ID de dispositivo y permite
bajar dicha información. Ese serial se guarda en la tabla de activación. Cada que el
usuario quiera descargar del repositorio, debe realizar la validación teniendo en
cuenta validarlo contra esa máquina, para evitar que entren y modifiquen la tabla
y pirateen.
DISEÑO DE LA
APP MOVIL
PANTALLA DE INICIO
Esta es la pantalla inicial, donde se presentará el nombre del producto, la imagen y su eslogan.
Acá, la app se demora unos segundos, con lo cual se posiciona la marca.
El nombre del producto es

En esta primera pantalla se ve la imagen que es una animación realizada en HTML (puede ser
con canvas o cualquier otro método), donde se presentan el par de super héroes (SH) y las
categorías a presentar dando vueltas entre ellos, semejante a como se observa en la imagen
de abajo y cuyo archivo GIF se adjunta.
Si es la primera vez que se ejecuta, la app pedirá que se le digite el SERIAL, el cual será
validado contra una base de datos en la web, si es correcto, continuará con el funcionamiento
del aplicativo, y para futuros ingresos no volverá a pedir dicho SERIAL, lo cual implica que hay
que grabar en algún lado en la app móvil que ya fue activado.

En la parte superior colocar ambos rostros de los SH,

tanto el del niño como el de la niña.
LOGIN
Es la pantalla que permite seleccionar un usuario ya creado o crear uno nuevo.

Cuando el usuario entra a la app, se

presenta la pantalla de selección de
usuario. Si es la primera vez, no
presentará la zona de Selección de
usuario, sino que mostrará la segunda
que sirve para crear un nuevo usuario. Si
ya se han creado usuarios, entonces
podrá seleccionar uno de la lista.

Para crear un nuevo usuario basta con

escribir su nombre “Santiago” y en la
casilla de abajo, su nombre completo
para que así aparezca en el diploma que
se generará posteriormente.

Al dar GUARDAR, se guardará la

información de ese usuario en la
respectiva tabla de usuarios.
El usuario seleccionará si es un niño o una
niña, y de ahí en adelante, en la cabecera
de la app aparecerá el SH del género
seleccionado, es decir, si el usuario es un
niño, entonces, siempre le aparecerá el
SH niño en la cabecera para todas las
pantallas.
MENÚ PRINCIPAL

Se presenta el menú del aplicativo formado por las siguientes

sesiones:
TÍTULO: Se coloca una mano indicando que puede retroceder, en
este caso a la ventana de login. Luego sigue la imagen del niño o
niña SH, según el género del usuario y a su derecha, el título del
aplicativo “FORMANDO SABELOTODOS”.
BUSCAR: Barra para buscar algún tema por palabras.
MENÚ: Son los botones de los 10 temas que categorizan las
preguntas. Cada categoría tendrá una imagen.
PIE: Es el pie de la aplicación, donde estará eslogan “DIVIÉRTETE
APRENDIENDO”, tres botones de PROGRESO, DIPLOMA y SALIR.
Esta pantalla presenta los 10 botones del menú, pero las últimas
3 categorías aparecen deshabilitadas. Si se selecciona uno de
esos 3 botones finales, debe aparecer un mensaje pidiendo un
SERIAL para activarlos.
Esta pantalla presenta los 10 botones del menú,
pero los últimos 2 aparecen deshabilitados. Si se
selecciona uno de esos 2 botones finales, debe
aparecer un mensaje pidiendo un SERIAL para
activarlos.
Al digitar el SERIAL de activación, se debe validar
en la base de datos de la seguridad en la web y
grabar en la app móvil para que no se vuelva a
pedir.
PANTALLA BUSCAR

Cuando el usuario da clic en la zona de

buscar, aparecerá el teclado y permitirá
que se escriba una o más palabras claves
para ser buscadas en la base de datos y
así presentar las preguntas que
correspondan.

En la base de datos se tiene, por cada

pregunta, unas palabras claves para que
luego puedan ser encontradas las
preguntas pertinentes.

Al escribir una o más palabras en el

cuadro de texto y se le da clic en el botón
BUSCAR, se busca en la base de datos y
presenta todas las preguntas que tengan
dicha(s) palabra(s).
PANTALLA BUSCAR - RESULTADO

Cuando el usuario da clic sobre la lupa, el

sistema buscará y presentará las
preguntas correspondientes a la(s)
palabra(s) clave(s) que se ha(n) escrito.

Cuando el usuario de clic sobre alguna

pregunta de la lista, el aplicativo lo llevará
a la PANTALLA DE RESPUESTAS, donde
podrá ver el resultado de la pregunta.
PANTALLA DE PREGUNTAS POR CATEGORÍA

Cuando en el menú se escoge una

categoría, la app muestra el título de la
categoría, seguido de las preguntas que la
componen. El usuario podrá deslizar con
su dedo y avanzar o retroceder para ir
leyendo y buscar la pregunta que quiera
consultar.
Al seleccionar una pregunta, la app lo
llevará a la PANTALLA DE RESPUESTAS.
PANTALLA DE RESPUESTAS

Cuando se elige una pregunta, la app muestra una animación del SH (niño o niña) con un
bastón que golpea el piso, del cual salen unas estrellas. Luego de eso, pasa a presentar la
respuesta. Esta imagen se adjunta en un GIF.
En esta pantalla se presentará la
respuesta de la pregunta que el usuario
haya seleccionado.

En la parte superior se mostrará la

pregunta, luego en la siguiente zona
inferior, se presentará la respuesta,
seguido por la opción de escuchar en
audio dicha pregunta y respuesta,
además presentará una imagen
relacionada a esa respuesta. El audio y la
imagen se cargarán desde un WebService
(WS).

En caso de que la respuesta tenga un

adicional de “SABÍAS QUE…”, presentará
una seña (el SH con símbolos de
interrogación) que indicará que puede
seguir hacia abajo para continuar viendo
esa parte de la respuesta.
PANTALLA DE RESPUESTAS – SABIAS QUE…

De tener el anexo “SABÍAS QUE…”, se

presentará esa parte (texto) con su
respuesta, la imagen relacionada y
también con un botón que permitirá
escuchar la respuesta. Tanto la imagen,
como el audio del Sabíasque vienen del
WS.

Acá es donde se presentan los datos del

SABIASQUE explicados en la página
anterior.
PROGRESO

En Progreso podrá ver cada una de las 10

categorías con una barra de progreso por
cada una que llega hasta el 100% de
acuerdo a las preguntas que haya visto.

En la medida que vaya cumpliendo con el

100% de cada categoría a su avatar se le irá
vistiendo. El SH niño empieza sin nada
(desnudo) y se va vistiendo en el siguiente
orden:
1. Vestido azul
2. Interiores amarillos (calzoncillos)
3. Cinto blanco
4. Hebilla negra del cinturón
5. Botas
6. Símbolo del pecho
7. Capa
8. Guantes
9. Antifaz
10. Letra “F”

Se debe colocar un contorno de líneas

punteadas rojas donde va a aparecer la
siguiente prenda a colocarle al SH. Por
ejemplo, cuando está desnudo 0%, se
contorneará por donde va a quedar su
vestido azul. Después de cumplido ese 10%
y el niño tenga su vestido azul, aparecerá
contorneado donde aparecerá su interior amarillo y así sucesivamente.
IMÁGENES DEL PROGRESO DEL AVATAR NIÑO
Para el efecto de la vestimenta de la niña, se hará en el siguiente orden:
1. Vestido verde
2. Cinto verde
3. Hebilla roja
4. Botas
5. Collar verde con punto rojo del cuello
6. Capa
7. Guantes
8. Coronilla roja con punto amarillo de la frente
9. Mejillas rosadas
10.Letra “S”
IMÁGENES DEL PROGRESO DEL AVATAR NIÑA
DIPLOMA

Cuando se entra a la opción de generar el

diploma, el sistema valida que el usuario
haya visto el 100% de las preguntas. En
caso de que no se haya visto todo, saldrá el
aviso de avatar correspondiente (niño o
niña) dando aviso que no es posible verlo.
DIPLOMA

Si el usuario ha realizado todo el proceso,

en esta opción de diploma, se le pedirá que
verifique su nombre completo para que
aparezca en el diploma.

Después de generado el diploma, el nombre

no se podrá modificar.

Acá se debe generar un PDF que se

guardará en el dispositivo y se podrá
generar todas las veces que sea necesario.

El diploma debe presentar a los dos super

héroes y debe decir:

Diploma de Super Sabelotodo

Generado a:
PEPITO PEREZ XXXXXXXXX
Y que muestre la fecha y una firma.
DIPLOMA EN PDF
PÁGINA LEGAL

En el momento de salir del aplicativo, se

presentará la página legal de la app que
presenta además los créditos de
elaboración del mismo.
DISEÑO DE LA
APP LOCAL
PANTALLA DE INICIO

Se presenta una animación similar al GIF que se adjunta y como se ve en la siguiente imagen.

Después de unos segundos de presentación, se muestra la pantalla de inicio, donde si es la

primera que entra, se le pedirá el serial de activación del software.

Esta es la pantalla inicial, donde se presentará el nombre del producto, la imagen y su eslogan.
Tener en cuenta que el pie de la pantalla, donde están los botones del menú cambia a la
imagen que se presenta a continuación, y hay que tenerlo en cuenta para el resto de las
pantallas a presentar.

Donde se presentan los 10 botones de las categorías, 7 activos y 3 inactivos (según la forma de
pago) y un pie de página donde se presenta el eslogan “DIVIÉRTETE APRENDIENDO” (tener en
cuenta el error de la imagen para arreglarlo) y tres botones de PROGRESO, DIPLOMA y SALIR.

Fijarse que el botón se “Juguemos a ser científicos” se encuentra de otra manera en las
siguientes imágenes, pero éste es el real.

Cuando es la primera vez que entra, el software pedirá su licenciamiento a partir de un SERIAL
que se debe digitar, el cual se validará contra una base de datos web. El aplicativo mandará el
número de SERIAL, digitado por el usuario a una consulta web, la cual devolverá la respuesta
de si es válido o no ese SERIAL.
PANTALLA PRINCIPAL

En esta pantalla se muestra la opción de buscar y los botones del menú principal.

Cuando se está en el menú principal, los tres botones finales estarán desactivados (mascotas,
Animales fantásticos, El cosmos y universo), y si el usuario da clic sobre alguno de ellos, saldrá
un aviso, donde se pide digitar un SERIAL que validará la activación de los mismos.
Si el usuario digita un SERIAL correcto, y es validado por la web, los tres botones se activarán.
El proceso se explica a continuación:

PANTALLA DE BUSCAR

Permite Buscar palabras claves para ser buscadas en la base de datos y así presentar las
preguntas que correspondan.

Al escribir una o más palabras en el cuadro de texto y se le da clic en el botón BUSCAR, se

busca en la base de datos y presenta todas las preguntas que tengan dicha(s) palabra(s).
PANTALLA DE PREGUNTAS POR CATEGORÍA

Cuando en el menú se escogió una categoría, la app muestra el título de la categoría, seguido
de las preguntas que la componen. El usuario podrá deslizar con el scroll vertical y avanzar o
retroceder para ir leyendo y buscar la pregunta que quiera consultar.
Al seleccionar una pregunta, la app lo llevará a la PANTALLA DE RESPUESTAS.
PANTALLA DE RESPUESTAS

Cuando se elige una pregunta, la app muestra una animación del SH (niño o niña) con un
bastón que golpea el piso, del cual salen unas estrellas. Luego de eso, pasa a presentar la
respuesta. Esta imagen se adjunta en un GIF.

A continuación, se presenta la respuesta

En esta pantalla se presentará la respuesta de la pregunta que el usuario haya seleccionado.

En la parte superior se mostrará la pregunta, luego en la siguiente zona inferior, se presentará
la respuesta, seguido por la opción de escuchar en audio dicha pregunta y respuesta, además
presentará una imagen relacionada a esa respuesta.
En caso de que la respuesta tenga un adicional de “SABÍAS QUE…”, presentará una seña
(interrogante naranja) que indicará que al dar clic en él, puede ver esa parte de la respuesta.
PANTALLA DE RESPUESTAS – SABÍAS QUÉ…

De tener el anexo “SABÍAS QUE…”, se presentará esa parte (texto) con la imagen relacionada y
también con un botón que permitirá escuchar la respuesta.

Acá es donde se presenta los datos del SABIASQUE explicados en la página anterior.
PANTALLA DE PROGRESO

Cuando se da clic en el botón de PROGRESO, se llega a esta pantalla, que es donde se muestra
el nivel donde se encuentra el niño.
Acá, similar a como se vio en la app móvil, se muestra el avatar del SH, niño o niña, según el
usuario con sus implementos de vestimenta según el progreso alcanzado.
IMÁGENES PARA EL AVATAR NIÑO
IMÁGENES PARA EL AVATAR NIÑA
PANTALLA DE DIPLOMA

Cuando se da clic en el botón de DIPLOMA, y el usuario no ha realizado la totalidad del

progreso, es decir, el 100% de las 10 categorías, aparecerá una pantalla como la siguiente,
donde al dar clic en ACEPTAR, lo devolverá al menú principal.
Cuando ya se ha realizado el 100% del curso, y da clic en DIPLOMA, se entra en la siguiente
pantalla, donde si no se ha hecho antes, pide verificar el nombre completo para que así
aparezca en el Diploma.
Después de confirmar el nombre y generar el diploma, ya éste no se podrá modificar.
DIPLOMA EN PDF
PANTALLA DE PÁGINA LEGAL

Cuando se da clic en el botón superior derecho del menú, en PÁGINA LEGAL, se despliega esta
pantalla donde se muestran los datos de la obra, como se ve a continuación.