Calcujunior es una aplicación educativa diseñada para que niños de primaria realicen cálculos básicos y geométricos, con un enfoque en un diseño atractivo y fácil de usar. El documento detalla el proceso de diseño y programación de diversas pantallas, incluyendo la pantalla de inicio, menú principal y calculadoras de operaciones, área y perímetro. A pesar de los desafíos iniciales en la programación, el autor expresa satisfacción con el resultado y aspiraciones a crear aplicaciones más complejas en el futuro.

1. UNIVERSIDAD AUTONOMA DE TAMAULIPAS
DISEÑO GRÁFICO Y ANIMACIÓN DIGITAL
PRESENTACIÓN DE APLICACIÓN
JOSÉ GUADALUPE MUÑOZ MARTÍNEZ
MIERCOLES 25 DE MARZO 2021

2. PROCESO DE PROGRAMACIÓN
DE APLICACIÓN

3. INTRODUCCIÓN
CalcuJunior es una aplicación diseñada para los niños de primaria, es
una aplicación sencilla que le ayudara al niño a realizar el calculo de
operaciones básicas así como calculo de área y figuras geométricas
básicas.
En la unidad pasada se desarrollo el diseño de la interfaz, la cual como
ya se explico, esta diseñada para llamar la atención de los niños
usando colores atractivos y dinámicos, además de botones
reconocibles y tipografía clara y legible. En esta ocasión nos
enfocaremos en explicar de manera general el proceso y la lógica que
implico programar cada una de las pantallas, sus botones pero sobre
todo las operaciones de cada uno de ellos.

4. DISEÑO Y PROGRAMACIÓN DE
PANTALLA DE INICIO

5. DISEÑO PANTALLA DE INICIO
La pantalla de inicio o mejor conocida
como la Splash Screen se compone de
un fondo blanco y una imagen en PNG
que tiene la función de presentar a la
aplicación. A esta pagina se le añadió
una imagen de LOAD y un texto que
indica que se esta iniciando la
aplicación.

6. PROGRAMACIÓN PANTALLA DE
INICIO
Cuando se inicia la pantalla 1 se activan y
visibilizan los operadores de giraimagen y
temporizador, al cual al momento de crear se
le configura para los segundos que va cargar,
en este caso le pusimos 5s.
En el segundo bloque de código se indica que
cuando el temporizador termine su ciclo
tanto el giraimagen como el splash se
detendrán y nos mandara al pantalla del
menú principal.
En el tercer código se configura el ciclo, bucle
o animación del LOAD que agregamos como
imagen en la parte inferior.

7. DISEÑO Y PROGRAMACIÓN DE
MENÚ PRINCIPAL

8. DISEÑO PANTALLA DE INICIO
El menú principal consta de una
imagen ilustrativa y cuatro botones
(Calculadora de operaciones básicas ,
Calculadora de área, Calculara
perímetro y salir).

9. PROGRAMACIÓN PANTALLA DE
INICIO
El primer bloque nos indica que cuando se de
click en el botón calculadora se abrirá la
siguiente pantalla ósea la que nos lleva a la
calculadora de operaciones básicas.
En el segundo es lo mismo que el bloque
anterior solo que esta vez nos dirigirá a la
pantalla del menú de área.
En la tercer pantalla otra vez lo mismo solo
que esta vez nos dirige a la pantalla de
perímetro.
Y finalmente el ultimo bloque nos dice que
cuando se de clic en el botón salir la
aplicación se cerrara.

10. DISEÑO Y PROGRAMACIÓN DE
CALCULADORA DE
OPERACIÓNES BÁSICAS

11. DISEÑO CALCULADORA DE
OPERACIONES BÁSICAS
La calculadora de operaciones básicas
consta de un teclado con los números
estándar, además de operaciones
básicas como lo son suma, resta,
multiplicación y división, también
contiene un botón para reset y
resultado.

12. PROGRAMACIÓN DE CALCULADORA
DE OPERACIONES BÁSICAS
Primeramente lo que se hizo fue
programar los botones numéricos
donde al dar clic en cualquiera de ellos
aparecería el numero en cuestión.
Después se programo el botón punto
y el botón CE para resetear el
resultado.

13. Después se inicializaron las variables
donde se almacenaran los números
introducidos por el usuario.
Enseguida me dispuse a programar
los botones de operaciones como lo
son suma, resta, multiplicación y
división.
Y al final programe el botón de volver
al menú principal.
PROGRAMACIÓN DE CALCULADORA
DE OPERACIONES BÁSICAS

14. DISEÑO Y PROGRAMACIÓN DE
MENÚ DE ÁREA

15. DISEÑO CALCULADORA DE MENÚ
DE ÁREA
El menú de calculadora de área esta
compuesto de seis botones que sirven
de enlaces a cada una de la figuras
que el usuario desee calcular, además
de un botón para volver al menú
principal.

16. PROGRAMACIÓN DE MENÚ ÁREA
Igual que los otros menús, este se
compone de bloques de
programación que al dar clic en
cualquier botón nos llevara a la
pantalla de calculo de área de figura
deseada.

17. DISEÑO Y PROGRAMACIÓN DE
ÁREA DE FIGURA

18. DISEÑO CALCULADORA DE MENÚ
DE ÁREA
La interfaz de calculo de figura consta del
titulo de la pantalla, una imagen que muestra
la formula de la operación, esto con la finalidad
de que el usuario no solo haga una operación
automática sino para conozca como funciona
internamente el calculo.
Después tenemos el botón de ingreso de datos
por usuario donde aplicando principios de UX
indicamos al usuario que dato debe ingresar.
También se agrego un botón de limpiar por si
hay algún error al momento de realizar la
entrada de datos estos se restablezcan.
Mas abajo tenemos el cuadro de resultado y
debajo de este el botón volver al menú.

19. PROGRAMACIÓN DE
CALCULADORA DE ÁREA
El primer bloque nos indica que si nosotros damos clic en
el botón calcular y no hay datos en la casilla de ingresar
datos, entonces nos aparezca un mensaje de que no se
puede realizar la operación por falta de datos. Pero, si
esto no se cumple, procederá a realizar la operación que
en este caso es el dato ingresado por el usuario elevado a
la segunda potencia.
Después en el bloque siguiente se programa el botón
limpiar, cuando se de clic tanto el bloque de resultado
como de ingresar se vaciaran.
Por ultimo el bloque de programación del botón volver.

20. PROGRAMACIÓN DE
CALCULADORA DE ÁREA
Básicamente es la misma sintaxis en las demás figuras de área, se empieza con una
condición que devolverá un error en caso de estar los campos vacíos o realizara la
operación de la formula, después se programa el botón limpiar y el botón de volver.

21. DISEÑO Y PROGRAMACIÓN DE
MENÚ DE PERÍMETRO

22. DISEÑO CALCULADORA DE MENÚ
DE PERÍMETRO
El menú de calculadora de perímetro
esta compuesto de seis botones que
sirven de enlaces a cada una de la
figuras que el usuario desee calcular,
además de un botón para volver al
menú principal.

23. DISEÑO Y PROGRAMACIÓN DE
PERÍMETRO DE FIGURA

24. DISEÑO CALCULADORA DE MENÚ
DE PERÍMETRO
La interfaz de calculo de figura consta del
titulo de la pantalla, una imagen que muestra
la formula de la operación, esto con la finalidad
de que el usuario no solo haga una operación
automática sino para conozca como funciona
internamente el calculo.
Después tenemos los botones de ingreso de
datos por usuario donde aplicando principios
de UX indicamos al usuario que dato debe
ingresar.
También se agrego un botón de limpiar por si
hay algún error al momento de realizar la
entrada de datos estos se restablezcan.
Mas abajo tenemos el cuadro de resultado y
debajo de este el botón volver al menú.

25. PROGRAMACIÓN DE
CALCULADORA DE PERÍMETRO
El primer bloque nos indica que si nosotros damos clic en
el botón calcular y no hay datos en la casilla de ingresar
datos, entonces nos aparezca un mensaje de que no se
puede realizar la operación por falta de datos. Pero, si
esto no se cumple, procederá a realizar la operación que
en este caso es el dato ingresado por el usuario elevado a
la segunda potencia.
Después en el bloque siguiente se programa el botón
limpiar, cuando se de clic tanto el bloque de resultado
como de ingresar se vaciaran.
Por ultimo el bloque de programación del botón volver.

26. PROGRAMACIÓN DE
CALCULADORA DE PERÍMETRO
Básicamente es la misma sintaxis en las demás figuras de perímetro, se empieza con una
condición que devolverá un error en caso de estar los campos vacíos o realizara la
operación de la formula, después se programa el botón limpiar y el botón de volver.

27. CONCLUSIÓN
En conclusión, al diseñar la aplicación tuve temor de no poder cumplir
con los objetivos que me plantee por el tema de la programación, pero
una vez que agarras el hilo de la lógica del seudocódigo es fácil
programar las demás pantallas. Obviamente esta es una aplicación
sencilla con pocas operaciones algunas se repiten otras requieren
agregar mas bloques para realizar una operación con regla de tres
simple pero nada difícil.
Creo que realizar esta aplicación me dejo un buen sabor de boca y con
ganas de hacer algo mas complejo, tal vez con mas tiempo.
Me hubiera gustado haber agregado mas detalles a la interfaz, tal vez
imagenes que simularan bisel en los botones, sombra interior en los
campos de entrada de datos, sonido, etc. como lo dije en un futuro
probablemente tenga el tiempo de realizar una aplicación mas
compleja y detallada.