- 1. Resumen del Proyecto.
- 2. Historias de usuario.
- 3. Problemas de usabilidad.
- 4. Prototipo de baja.
- 5. Prototipo de alta y producto final.
- 6. Objetivos de aprendizaje.
- 7. Desarrollares/autores.
- 8. Link de la pagina web.
Es una base de datos creada para los aficionados a la popular serie Rick & Morty, facilitando encontrar todos los personajes con datos relevantes. Podran interactuaur de una manera sencilla y practica utilizando los filtros disponibles, como organizar de la A a la Z o viseversa, filtrar por genero o especies. En cada resultado encontraras la ficha del personaje la cual se expande y permite conocer mas información.
- Como usuario, entro en contexto del uso de esta pagina, veo una bienvenida.
- Visualizo las tarjetas de los personajes y las opciones de filtro o busqueda que me ofrece.
- Breve información introductoria sobre el programa
- El usuario puede visualizar la data principal e interactuar con ella
- El usuario indentifica visualmente los filtros disponibles para la data
- Zona introductoria sobre el programa
- Zona de busqueda
- Zona de filtros disponibles
- Data general representada en tarjetas para facil acceso
- Como usuario, quiero filtrar para encontrar datos populares y clasificar los personajes
- Zona de busqueda donde encuentre y filtre los personajes por cualquier caracteristica
- Visualizar Botones de filtrado para identificar las opciones de datos que puedo encontrar
- Visualización acertiva de los filtros y busquedas que se realizan
- Zona de busqueda funcional
- Botones de filtrado que redireccionan la data de manera mas especifica
- Como usuario, uso los botones que me guian a las opciones que puedo filtrar
- Diferentes botones con opciones diferentes de filtrado
- Al usar dichos botones ser guiado a las categorias de estos filtros principales
- Visualizar el resultado final del filtro aplicado y poder volver a la pagina principal
- Botones que almacenen las categorias que se pueden filtrar
- Pantalla donde se categorizan por el filtro seleccionado
- Cada categoria presenta las tarjetas que cumplen con lo filtrado
- Boton de volver, para seguir interactando con la data
- Como usuario, filtre la data y quiero dirigirme a las redes de la serie
- Visualizar los iconos que me permitan direccionarme a las redes
- Poder ingresar a ellos y cambiar de pagina
- Footer, en contexto con la serie Rick & Morty
- Iconos conectados con las redes de la serie
La pagina web se enfoca en los usuarios para que puedan consumir la data que les interesa y necesitan.Los problemas de usabilidad que hay son:
- Encontrar cada capitulo con los personajes que hay en cada uno.
- Mejora de filtros mas especificos .
- Responsive con mayor movimiento y cambios de pantalla.
Cada uno de ellos se ira solucionando a medida de que nuestros conocimientos crezcan en el bootcamp para dar una mejor experiencia a usuarios finales.
- Uso de HTML semántico.
- Uso de selectores de CSS.
- Construir tu aplicación respetando el diseño realizado (maquetación).
- Uso de flexbox en CSS.
- Uso de selectores del DOM.
- Manejo de eventos del DOM.
- [x]Manipulación dinámica del DOM. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)
- Uso de condicionales (if-else | switch | operador ternario)
- Uso de bucles (for | for..in | for..of | while)
- Uso de funciones (parámetros | argumentos | valor de retorno)
- Manipular arrays (filter | map | sort | reduce)
- Manipular objects (key | value)
- Uso ES modules (import | export)
- Diferenciar entre expression y statements.
- Diferenciar entre tipos de datos primitivos y no primitivos.
- Testing
- Testeo unitario.
- Organizar y dividir el código en módulos (Modularización)
- Uso de identificadores descriptivos (Nomenclatura | Semántica)
- Uso de linter (ESLINT)
- Uso de comandos de git (add | commit | pull | status | push)
- Manejo de repositorios de GitHub (clone | fork | gh-pages)
- Colaboración en Github (branches | pull requests | |tags)
- Diseñar la aplicación pensando y entendiendo al usuario.
- Crear prototipos para obtener feedback e iterar.
- Aplicar los principios de diseño visual (contraste, alineación, jerarquía)
- Planear y ejecutar tests de usabilidad.
El proyecto fue diseñado y realizado por:
- Paula Lorena Ruiz
- Leidy Paola Castro