- 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
- 8. Consideraciones técnicas
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? Como es obvio, 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 la aplicación pensando en y entendiendo al usuario
-
Crear prototipos para obtener feedback e iterar
- Completar el proyecto no es un requisito para ser admitida al bootcamp.
- Este proyecto se debe trabajar en duplas.
- 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 No esperamos que todas completen los 3 hitos.
No trabajes como si fuera una fábrica haciendo tooooooooooooooooooooooooodo el HTML y CSS de todas las pantallas que imaginaste para luego comenzar con el toooooooooooooooooooooodo 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, a sí serán los 6 meses de bootcamp.
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.
Sugerencia de micro-proyecto A
- Dos preguntas con sus respectivas alternativas de respuesta en forma de radio buttons (🔘)
- El botón para “Responder y ver resultados”.
Cómo construir una página básica HTML con elementos de formulario.
Sugerencia de micro-proyecto B
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.
- 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.
Sugerencia de micro-proyecto C
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”.
- 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.
Sugerencia de micro-proyecto A
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.
Pistas: Lee sobre condicionales y control de flujo (IF, ELSE).
- 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 a las preguntas. Puedes subir tu código a un repositorio de GitHub y publicar tu aplicación _Web en GitHub Pages y compartir la URL con quien quieras.
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 Codepen o Replit.
- Antes que nada, asegúrate de tener un 📝 editor de texto en condiciones, algo como Atom o Visual Studio 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).
- 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, puede ser el link de tu repositorio de github o el link de tu proyecto en linea ya sea Replit, Codepen o CodeSandbox
La lógica del proyecto debe estar implementada completamente en JS, HTML y CSS En este proyecto no uses librerías o frameworks, solo vanilla JavaScript.
Este boilerplate (plantilla de proyecto en el repositorio de GitHub) contiene tres archivo, eres libre agregar o quitar archivos/carpetas. Si usas un editor de código en línea como Codepen o Replit omite este punto.
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 te pedimos que no uses 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).
¡A codear se ha dicho!