Cree un filtro de catálogo que se pueda usar en el teclado y se pueda compartir con una URL.
trabajar en un entorno de copia o demostración. Defina los datos utilizados y el resultado esperado antes de comenzar. Mantenga sus decisiones y las dificultades encontradas para poder explicar el proceso.
Definir estados y estructura HTML antes del comportamiento interactivo.
Prediga la ausencia de JavaScript, carga y cero resultados según sea necesario.
Compruebe el teclado, el enfoque, los textos largos y las pantallas pequeñas.
Documentar dependencias y controles de regresión.
Entrega y verificaciones
Una interfaz funcional, pruebas de curso y documentación de componentes.
Una tarea completa tiene éxito con diferentes entradas y los errores siguen siendo accesibles.
Para cada cheque, tenga en cuenta el contexto, la acción, el resultado esperado y lo que se ha observado. distinguir una verificación exitosa de una hipótesis restante. Otra persona debe ser capaz de entender el entregable sin asistir a toda su fabricación.
La operación del mouse en una sola pantalla no es suficiente. La interfaz debe anunciar sus cambios y mantener un estado comprensible.
Colaboración para explorar: UI de diseño.
Especifique el intercambio de responsabilidades: quién proporciona la información, quién decide, quién verifica y mantiene el resultado. Un buen traspaso conserva las restricciones y decisiones, no solo el archivo final.
Ejercicio práctico detallado y entregables esperados
Ejercicio profundo: integra una lista filtrable con mapas con títulos, fotos y enlaces. HTML debe permanecer comprensible antes de que JavaScript se ejecute. Pruebe un título muy largo, sin respuesta, una conexión lenta y un idioma que se escribe de derecha a izquierda. Utilice imágenes adaptadas a su tamaño mostrado y dimensiones declaradas. Compruebe el orden de enfoque después de una acción: actualizar la lista no debe perder el contexto de la persona que busca.
Elementos que deben acompañar al trabajo
Conjunto de datos HTML y demo estructurados
Estilos para múltiples anchos y direcciones de lectura
Filtrar script con gestión de informes
Lista de comprobaciones realizadas en el navegador
Criterios de aceptación
Estos criterios son una base de trabajo para adaptarse al contexto. Para cada uno, tenga en cuenta la acción tomada, el resultado esperado, el resultado observado y la información que queda por confirmar.
El contenido esencial y sus enlaces siguen siendo accesibles sin JavaScript.
El filtrado funciona en el teclado y anuncia su resultado de una manera comprensible.
Las imágenes tienen texto alternativo relevante y dimensiones consistentes.
Un estado vacío proporciona una explicación y restablece la búsqueda.
Documentar dependencias, comandos útiles y decisiones de estructura. Mantenga los datos de prueba que reproducen casos largos, vacíos y multilingües. Al entregar, explique cómo agregar una tarjeta y qué cheques para comenzar de nuevo. La representación adecuada en un solo navegador no es suficiente para concluir sobre todas las condiciones de uso; Indique los entornos controlados reales.
Elija la interactividad de acuerdo con la tarea. Una página legible y una aplicación enriquecida requieren diferentes dependencias, estados y condiciones de carga.
HTML mejorado progresivamente
Cuándo elegir esta opción
Adecuado para contenido, enlaces y formularios que funcionan con una respuesta del servidor. Agregue interacciones donde respalden una acción identificada.
Qué hay que prever
Compruebe el uso sin scripts, errores y carga lenta. Los mensajes deben permanecer asociados con los campos, y los usuarios del teclado deben poder completar la tarea.
Interfaz con estado del lado del navegador
Cuándo elegir esta opción
Útil para interacciones frecuentes como filtrado, comparación o edición. Defina los datos mostrados y los estados con precisión.
Qué hay que prever
Planificar historial, interrupciones y sincronización. No anuncie el éxito antes de que se confirme realmente una operación importante.
un riesgo de anticipar
La representación en un ancho no valida los componentes. Contenidos largos, zoom, traducciones y diseños de cambio de datos faltantes.
como decidir
Pruebe la misma tarea con un teclado, en una pantalla pequeña y con una interrupción de red. proporcionar una forma de reproducir los errores observados.
¿Este ejercicio demuestra una cualificación profesional?
Le permite mostrar un enfoque y sus límites. No es un diploma, ni una certificación, ni prueba de una experiencia de producción.
¿Cómo presentar el trabajo en una cartera?
Especifique que este es un ejercicio, su función, restricciones, decisiones y controles. Utilice datos de prueba y medios cuyos derechos estén establecidos.
¿Cómo evaluar la calidad del entregable?
Una tarea completa tiene éxito con diferentes entradas y los errores siguen siendo accesibles. Sumar las dificultades encontradas y lo que queda por verificar en lugar de presentar una validación absoluta.
¿Un marco garantiza una interfaz accesible?
Puede proporcionar convenciones útiles, pero la estructura, las etiquetas y el comportamiento dependen de la implementación. Verifique el flujo de trabajo final con sus datos, estados de error y adaptaciones de pantalla. Elegir una herramienta no reemplaza estos cheques.