Trivia

Desarrollado por Jose Ramirez y Bairon Sandoval

Índice

• 1. Resumen del proyecto
• 2. Como se desarrollo
• 3. aprendizaje
• 4. Consideraciones generales
• 5. Recomendaciones
• 6. Alcance del proyecto
• 7. Ambiente de trabajo y lecturas complementarias
• 8. Consideraciones técnicas

---

1. Resumen del proyecto

Esta es un juego de trivia donde se evalua el conocimiento acerca de paises y capitales. Dandole al usuario opciones de respuestas.

2. Como se desarrollo

iniciamos diseñando el prototipo final atravez de una herramienta de diseño, en la cual nos basamos para construir la estructura visual y funcional del juego

Wireframe

Pantalla 1

Pantalla 2, 3, 4

Pantalla Final

Resultado Final

Pantalla 1

Pantalla alerta escribe tu nombre, se muestra en caso de que no se coloque ningun nombre

Pantalla 2

Pantalla alerta selecciona respuesta, se muestra en caso que no se coloque ninguna respuesta

Pantalla final

3. Aprendizaje

HTML

• Uso de HTML semántico

  Links

  • HTML semántico
  • Semantics - MDN Web Docs Glossary

CSS

• Uso de selectores de CSS

  Links

  • Intro a CSS
  • CSS Selectors - MDN

Web APIs

• Uso de selectores del DOM

  Links

  • Manipulación del DOM
  • Introducción al DOM - MDN
  • Localizando elementos DOM usando selectores - MDN

• Manejo de eventos del DOM (listeners, propagación, delegación)

  Links

  • Introducción a eventos - MDN
  • EventTarget.addEventListener() - MDN
  • EventTarget.removeEventListener() - MDN
  • El objeto Event

• Manipulación dinámica del DOM

  Links

  • Introducción al DOM
  • Node.appendChild() - MDN
  • Document.createElement() - MDN
  • Document.createTextNode()
  • Element.innerHTML - MDN
  • Node.textContent - MDN

JavaScript

• Tipos de datos primitivos

  Links

  • Valores primitivos - MDN

• Strings (cadenas de caracteres)

  Links

  • Strings
  • String — Cadena de caracteres - MDN

• Variables (declaración, asignación, ámbito)

  Links

  • Valores, tipos de datos y operadores
  • Variables

• Uso de condicionales (if-else, switch, operador ternario, lógica booleana)

  Links

  • Estructuras condicionales y repetitivas
  • Tomando decisiones en tu código — condicionales - MDN

• Funciones (params, args, return)

  Links

  • Funciones (control de flujo)
  • Funciones clásicas
  • Arrow Functions
  • Funciones — bloques de código reutilizables - MDN

• Uso de identificadores descriptivos (Nomenclatura y Semántica)

UX (User eXperience)

• Diseñar la aplicación pensando en y entendiendo al usuario

• Crear prototipos para obtener feedback e iterar