- 1. Resumen del proyecto
- 2. Definición del producto
- 3. Historias de Usuario
- 4. Generacion de Datos
- 5. Diseño de la Interfaz de Usuario
- 6. Herramientas y Lenguajes Utilizados
- 7. Trabajo Colaborativo - Code By
Como usuaria, quiero ver información interesante y detallada sobre las mascotas más populares de disney, para conocer sobre los compañeros de mis personajes favoritos.
La página web muestra en una lista de 24 objetos en forma de tarjetas sobre las mascotas más populares de disney, contenidas en un elemento <ul> y a su vez en un <li> de HTML.
El listado de las tarjetas de las mascotas se muestran de manera adecuada al abrir la página. Ofrecen información relevante de cada personaje como: una descripción corta, su especie, el grupo de especie al que pertenece, donde vide, datos curioso y el genero de la película al que pertenece.
Como usuaria, quiero que la visualización de la información sea fácil y llamativa, para poder encontrar a mi personaje favorito rápido sin tener que hacer una lectura previa.
Los estilos de la aplicación están implementados con el lenguaje de CSS. Cada tarjeta contiene propiedades CSS para que sean dintinguibles.
El diseño de la página está basado al estilo Disney con colores llamativos y tipografía legible. Las imágenes son grandes y resaltan en su fondo.
Como usaria quiero poder filtrar las tarjetas por diferentes propiedades de los personajes para poder conocerlos rápidamente acorde al tema de búsqueda en el que me encuentre interesada.
La estructura de la página web cuenta con elementos <select> que permiten filtrar por tres propiedades a las mascotas.
Los filtros se encuentran al inicio de la página, son fáciles de usar e intuitivos con etiquetas claras. Los resultados deben actualizarse dinámicamente al aplicar o quitar algún filtro.
Como usuaria, quiero que las tarjetas se puedan ordenar de manera ascendente o descendente, para poder ver por orden alfabético el nombre de los personajes.
La página web tiene dos <button> para ordenar las tarjetas de manera ascendente o descenente. Son funcionales junto con los filtros.
Los botones para ordenar deben ser visibles y claros con iconos para indicar la ordenación ascendente y descendente de acuerdo al orden alfabetico del nombre de las mascotas. Al selecionar un orden la lista se actualiza automáticamente.
Como usuaria, quiero poder eliminar todos los filtros que haya aplicado, para poder explorar todas las tarjetas disponibles de la página.
La aplicacion incluye un <button> que permite eliminar los filtros aplicados a la pagina.
El botón tien una etiqueta visible que diga “Eliminar filtros” y se encuentra a un lado del menú filtro para que la usuaria pueda encontrarlo fácilmente sin necesidad de desplazarse por toda la página. Al dar click los filtros aplicados de desactivan y se muestran de manera utomática todas las tarjetas que contiene la página sin necesidad de que la usuaria tenga que recargar la página de manera manual.
Como usuaria, quiero que la página tenga una opción para calcular una medida estadística, para poder analizar el contenido publicado en la página.
La página web contiene un <button> que permite mostrar una ventana con informacion de las estadisitcas calculadas.
La aplicacion muestra los porcentajes de personajes que son hembras o machos, el grupo de especie y el genero de pelicula al que pertenecen. La estadística es fácil de leer y entender y se actualiza dinámicamente a medida que se da click.
Como usuaria, quiero que la página web tenga un diseño responsivo, para que pueda tener la experiencia de utilizarla desde diferentes dispositivos.
La aplicación contiene mediaqueries con puntos de quiebre que permiten la responsividad en diferentes dispositivos.
La página web se ajusta automáticamente a diferentes tamaños de pantalla (teléfonos móviles, tabletas, ordenadores de escritorio), con una navegacion clara y legible sin necesidad de hacer zoom. Los diferentes apartados se redimensionan correctamente para mantener una apariencia estética.
Basándonos en el feedback obtenido de una muestra de usuarios objetivos para la aplicación web, se identifican los siguientes puntos de mejora para optimizar la experiencia del usuario en la página:
- Precisar la información: Mejorar la información que ofrece la aplicacion sobre cada mascota. La informació proporcionada no es muy clara, se sugiere mostrar una descripción que permita ambientar a los personajes en su película.
- Funcionalidad de los filtros: Mejorar el código para que los filtros funcionen de manera conjunta. El usuario busca que