- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Recomendaciones
- 6. Alcance del proyecto
- 7. Ambiente de trabajo y lecturas complementarias
Una trivia es un tipo de juego, generalmente en el marco de un concurso, en el que se plantea una serie de preguntas cuyas respuestas deben ser elegidas entre diferentes opciones predeterminadas.
En la actualidad existen muchas posibilidades de participar de una trivia online. Con una rápida búsqueda en Internet, te podrás dar cuenta de que existen trivias de diversas temáticas (ciencia, series, televisión, etc.).
¿Qué tengo que hacer exactamente?
Construirás la aplicación Web de una trivia.
No temas, vas a aprender mucho estos días.
El objetivo principal de este proyecto es que tengas una primera experiencia desarrollando aplicaciones Web que interactúen con las usuarias a través del navegador, utilizando HTML, CSS y JavaScript.
La temática es libre, decídela rápidamente y luego piensa en cómo debe ser la experiencia para tus usuarias. Piensa en las pantallas, el flujo, los mensajes, colores, etc.
Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
-
Uso de HTML semántico
-
Uso de selectores de CSS
-
Uso de selectores del DOM
-
Manejo de eventos del DOM (listeners, propagación, delegación)
-
Manipulación dinámica del DOM
-
Tipos de datos primitivos
-
Strings (cadenas de caracteres)
-
Variables (declaración, asignación, ámbito)
-
Uso de condicionales (if-else, switch, operador ternario, lógica booleana)
-
Funciones (params, args, return)
- Uso de identificadores descriptivos (Nomenclatura y Semántica)
- Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro
- Crear prototipos de alta fidelidad que incluyan interacciones
- Completar el proyecto no es un requisito para ser admitida al bootcamp.
- Este proyecto se debe trabajar en duplas.
- La lógica del proyecto debe estar implementada completamente en JS, HTML y CSS. En este proyecto NO está permitido usar librerías o frameworks, solo vanilla JavaScript.
- Preocúpate de que ambas puedan hacer y aprender de todo. Esto no se trata de "repartir" el trabajo para hacer "más". El objetivo es aprender colaborativamente, no "terminar y entregar".
- Queremos verte aprender lo que aún no sabes. Sé transparente para que podamos entender tu proceso de aprendizaje. Nos interesa el proceso y no solamente el resultado final.
Algo que siempre ayuda a "poner en concreto” lo que tienes en mente, es hacer un simple prototipo en papel y lápiz de todo el proyecto. Dibujar es un proceso rápido que permite entender cómo, cuándo y dónde suceden las cosas; Dónde exactamente debe decir tal o cual cosa, qué pasa si la usuaria hace A o B, dónde debe hacer click, qué información exactamente quieres mostrarle, etc. Dedica un máximo de dos horas a esto antes de ponerte a codear.
No gastes horas discutiendo la temática de la trivia o haciendo logotipos teniendo la sensación de que estás “avanzando”. Es natural que tengas el impulso de hacerlo, es tu cerebro pidiendo su dosis de satisfacción inmediata. No te dejes engañar por la “ilusión” del avance, tu objetivo es aprender. Enfréntate a lo que no sabes lo más pronto posible, es el único camino para lograrlo.
Evita la tentación de copiar y pegar código que “funcione” para ir completando el proyecto sin entender cómo ni por qué funciona. Prefiere siempre hacer poco pero que sea algo que entiendes y puedes explicar, antes que mucho que funciona a medias y/o que no sabes bien cómo ni por qué funciona.
Un "superpoder" que esperamos puedas desarrollar durante el bootcamp es el de definir "micro-proyectos" que te acerquen paso a paso, pero de manera transversal, a la solución del "gran proyecto". Podríamos decir que es algo así como comenzar armando un rompecabezas/puzzle por las esquinas o bordes sin saber necesariamente cómo encajarán al final. Déjate llevar y explora libremente, no tienes que saberlo todo antes de comenzar.
Más adelante te daremos algunas sugerencias como ejemplo.
Sabemos que cada una de ustedes sabe un poco más o un poco menos de Desarrollo Web; No olvidamos que cada una tiene experiencias de vida y motivaciones distintas, personalidad diferente, aprende a su propio ritmo, etc. Pretender que todo lo anterior no existe y pedir a todas que logren aprender y completar lo mismo sería absurdo. Te proponemos trabajar en hitos o etapas incrementales según tus posibilidades, hasta donde logres llegar. No esperamos que todas completen todos 3 hitos.
No trabajes como si fuera una fábrica haciendo todo el HTML y CSS de todas las pantallas que imaginaste para luego comenzar con el todo el JavaScript y la funcionalidad. El riesgo de trabajar así es que consigas muchas partes sin ninguna funcionalidad o a medias y que aprendas poco; tampoco hagas lo inverso, un montón de funcionalidad en la consola pero que no tiene una interfaz para ser utilizada por una usuaria no-developer.
La siguiente metáfora te puede ayudar a comprender mejor la idea.
Esas etapas, desde la patineta hasta el auto, es a lo que llamaremos "hitos". Eres libre de seguir esta recomendación o trabajar como tú prefieras. Quizás te sea útil si recién estás comenzando a aprender de Desarrollo Web, tú decides.
Spoiler alert: anda practicando tomar tus propias decisiones de aprendizaje, así serán los 6 meses de bootcamp.
Comienza intentando hacer la versión más simple de una trivia.
- 1 sola pantalla o vista.
- 2 preguntas con, al menos, 3 alternativas de respuesta cada una.
- 1 botón para responder y ver cuál es la alternativa correcta.
- No te dice si acertaste o no, sólo te dice cuál alternativa era la correcta.
Una interfaz básica con:
- Dos preguntas con sus respectivas alternativas de respuesta en forma de radio buttons (🔘)
- El botón para “Responder y ver resultados”.
Aprenderás:
Cómo construir una página básica HTML con elementos de formulario.
Cuando la usuaria dé click en alguno de los radio button, muéstrale un mensaje de alerta (alert) en el navegador que contenga el valor (texto) del radio button cliqueado.
Pista: Para mostrar un mensaje de alerta básico hay una función de JavaScript llamada “alert”. Esta función puede “escuchar” eventos del navegador como click y hacer algo cuando suceda usando onclick o addEventListener.
Aprenderás:
- A detectar eventos en el navegador (los clicks de la usuaria) y hacer algo cuando sucedan.
- Identificar los elementos HTML que hay en el navegador y obtener sus valores y/o estados.
En lugar de mostrar el valor de cada radio button cuando se le hace click, que esta vez solamente se marque el radio button seleccionado y que el mensaje alert con los valores de los radio button seleccionados se muestre cuando al hacer click en el botón “Responder y ver resultados”.
Aprenderás:
- A detectar eventos en el navegador (los clicks de la usuaria) .
- Identificar los elementos HTML que hay en el navegador y obtener sus valores/estados.
Agrega una pantalla simple de bienvenida con los siguientes elementos y características:
- Una caja de texto (input text) en la que escribe su nombre quien juega.
- Un botón de "jugar" o "comenzar" para ir a las preguntas.
- Esta vez deberán haber al menos 3 preguntas con sus respectivas alternativas de respuesta.
- Antes de las peguntas debe decir "Hola [el nombre que se escribió en la pantalla de bienvenida]"
- El botón para responder muestra la alternativa correcta para cada pregunta y, además, muestra si cada una de las respuestas fue correcta o incorrecta.
- Un botón para volver a jugar que vuelve a la pantalla inicial en la que se pide el nombre.
Para determinar si las respuestas seleccionadas son correctas o incorrectas, necesitas predefinir cuál alternativa es la correcta para cada pregunta y evaluar (comparar) si la respuesta de tu usuaria coincide o no.
Pista: Lee sobre condicionales y control de flujo (if, else, else if).
Aprenderás:
- A identificar los elementos HTML que hay en el navegador y obtener sus valores/estados.
- Comparar los valores/estados de los elementos y hacer algo según el resultado que obtengas de la comparación/evaluación.
- Permítele a la usuaria elegir entre 2 tipos de preguntas después de escribir su nombre y antes de ir a responder. Por ejemplo, unas sobre comida y otras sobre cervezas.
- Agrega un puntaje a respuestas correctas e incorrectas y muestra un puntaje total al final.
Si hiciste todo lo anterior y tienes un poco más de tiempo, decide qué más quisieras hacer para mejorar tu proyecto. Podrías, por ejemplo:
- Agregar una cuenta regresiva con un tiempo límite para responder cada pregunta. Para lograrlo, les dejamos una pista de javascript.
- Subir tu código a GitHub (commit/push) y desplegar la interfaz usando GitHub pages.
Independientemente de hasta qué hito alcances a hacer, asegúrate de documentar
brevemente tu trabajo en un documento de Google o el archivo README.md
de tu repositorio (si es que estás trabajando con uno). Cuéntanos un poco cómo
fue tu proceso de diseño de la experiencia de uso y cómo crees que resuelve el
la necesidad (o "problema") que tiene tu usuaria. Incluye algunas imágenes de
tus prototipos en papel y lápiz que nos ayuden a entender el proceso,
no el resultado. ¿Fuiste cambiando cosas en el camino?, ¿Cuáles?, ¿Por qué?.
Quizás prefieras trabajar con alguna herramienta de edición de código en línea como Replit o CodeSandbox.
- Metodologías Ágiles
- Scrum en menos de 2 minutos
- Scrum en Detalle. No esperamos que hagas todo eso desde este proyecto.
- Todo tu proyecto debe estar como entregable en un link funcional que nos permita ver tu código, puede ser el link de tu proyecto en linea ya sea Replit o CodeSandbox