- 1. Preámbulo
- 2. Resumen del proyecto
- 3. Objetivos de aprendizaje
- 4. Consideraciones generales
- 5. Criterios de aceptación mínimos del proyecto
- 6. Hacker edition
- 7. Consideraciones técnicas
- 8. Pistas, tips y lecturas complementarias
La 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 escogidas entre diferentes opciones.
En la actualidad, con lo extendido del uso de smartphones, sus aplicaciones, y el acceso a Internet, existen muchas posibilidades de participar de una trivia online. Con una rápida búsqueda en internet, te podrás dar cuenta que existen trivias de muchas temáticas (ciencia, series, televisión, etc.), Hay varias que, incluso, ofrecen dinero como recompensa.
¿Qué tengo que hacer exactamente? En este proyecto tendrás que construir una aplicación web que le permita a un usuario responder distintas preguntas escogiendo sus respuestas de una lista de alternativas.
La temática es libre. Tú debes crear la mejor trivia que puedas y luego pensar en cómo debe ser esa experiencia de uso (qué pantallas, explicaciones, mensajes, colores, ¿marca?) etc.
El objetivo principal de este proyecto es, tener una primera experiencia desarrollando aplicaciones web (WebApp) que interactúen con el usuario a través del navegador y la lógica, utilizando HTML, CSS y JavaScript como herramientas.
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 individual y de equipo.
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Entender y reconocer por qué es importante el HTML semántico.
- Identificar y entender tipos de selectores en CSS.
- Construir tu aplicación respetando el diseño planeado.
- Entender y reconocer los selectores del DOM.
- Manejar eventos del DOM.
- Manipular dinámicamente el DOM.
- Manipular strings.
- Entender el uso de condicionales.
- Utilizar funciones.
- Conocer la diferencia entre los distintos tipos de variable.
- Utilizar identificadores descriptivos (Nomenclatura | Semántica).
- Este proyecto se debe resolver en duplas.
- Tiempo para completarlo: Toma como referencia 3 días. Trata de fijar un estimado de cuándo lo terminarás.
Los criterios que deberás considerar para saber si has completado este proyecto son:
Documenta brevemente tu trabajo en el archivo README.md de tu repositorio,
contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve
el problema (o problemas) que tiene tu usuario.
Durante tu trabajo deberás haber hecho e iterado bocetos (sketches) de tu
solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
iteraciones que hagas, que las subas a tu repositorio y las menciones en tu
README.md.
Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. No es necesario que construyas la interfaz exactamente como la diseñaste. No tienes tiempo ilimitado para trabajar, así es que deberás priorizar.
El MVP (producto mínimo viable) de tu implementación debe:
- Mostrar una pantalla de bienvenida, pida tu nombre para comenzar a jugar.
- Mostrar un mensaje de Hola [tu nombre] y dos botones para comenzar a jugar.
- Jugar con preguntas de tipo A (Por ejemplo: sobre comida)
- Jugar con preguntas de tipo B (Por ejemplo: sobre cervezas)
- Lanzar la pregunta 1 con alternativas, el usuario responde, luego se muestra la pregunta 2 y luego la 3.
- Mostrar una pantalla de resultados (respuestas correctas) y dos botones de
volver a jugar:
- Jugar con preguntas de tipo A (Por ejemplo: sobre comida)
- Jugar con preguntas de tipo B (Por ejemplo: sobre cervezas)
Si terminaste con todo lo anterior y te queda tiempo, intenta explorar y completar lo siguiente:
- Agregar una cuenta regresiva con un tiempo límite para responder cada pregunta.
- Subir tu código a GitHub (commit/push) y desplegar la interfaz usando GitHub pages.
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.
No se debe utilizar la pseudo-variable this.
Acá va la página que se mostrará al usuario, también nos sirve para indicar qué script se usará y unir todo lo que hemos hecho.
Encontrarás 1 etiqueta inicial, la cual si deseas puedes borrar y empezar de cero:
<div id="root"></div>Este archivo debe contener las reglas de estilo. Queremos que escribas tus propias reglas, por eso NO está permitido el uso de frameworks de CSS (Bootstrap, materialize, etc).
Acá escribirás todo el código que tenga que ver con la interacción del DOM (seleccionar, actualizar y manipular elementos del DOM y eventos), entre otras funciones que sean necesarias para actualizar el resultado en la pantalla (UI).
- Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Code.
- Para ejecutar los comandos a continuación necesitarás una 🐚
UNIX Shell,
que es un programita que interpreta líneas de comando (command-line
interpreter) así como tener git
instalado. Si usas un sistema operativo "UNIX-like", como GNU/Linux o MacOS,
ya tienes una shell (terminal) instalada por defecto (y probablemente
gittambién). Si usas Windows puedes usar Git bash, aunque recomendaría que consideres probar 🐧 GNU/Linux. - Haz tu propio 🍴 fork del repo de tu cohort, tus coaches te compartirán un link a un repo y te darán acceso de lectura en ese repo.
- ⬇️ Clona tu fork a tu computadora (copia local).
- A codear se ha dicho! 🚀
- Ideación
- Prototipado (sketching)
- Tipos de valores
- Declaración de variables
- Control de flujo
- Metodologías Ágiles
- Scrum en menos de 2 minutos
- Scrum en Detalle. No esperamos que hagas todo eso desde este proyecto.