Métodos y aprendizaje

Desarrollo front-end: tareas y ejercicio práctico

Construya las interfaces y verifique su comportamiento en el navegador.

Estas hojas describen actividades y ejercicios de enseñanza. No constituyen ofertas de trabajo, cursos de certificación o promesas de contratación.

Todas las descripciones de trabajo
Ilustración — Desarrollo front-end: tareas y ejercicio práctico
Ilustración generada por IA

Explorar los 28 casos de revisión — Una búsqueda antigua reemplaza la nueva

Un ejercicio para practicar

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.

  1. Definir estados y estructura HTML antes del comportamiento interactivo.
  2. Prediga la ausencia de JavaScript, carga y cero resultados según sea necesario.
  3. Compruebe el teclado, el enfoque, los textos largos y las pantallas pequeñas.
  4. 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.

Préparer les vérifications du site

Puntos de vigilancia y trabajo en equipo

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.

Empleo, oficios y formación
Un caso de revisión reproducible

Una búsqueda antigua reemplaza la nueva

Situación que examinar
Las respuestas llegan desordenadas y muestran resultados del término anterior.
Comprobación propuesta
Simule respuestas lentas y compruebe consulta vigente, espera, cancelación, resultados vacíos y foco.
Prueba que conservar
Un caso reproducible demuestra que consulta visible y resultados corresponden a la misma búsqueda.

Referencia metodológica : MDN — Using Fetch

Escenario de aprendizaje

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.

  1. El contenido esencial y sus enlaces siguen siendo accesibles sin JavaScript.
  2. El filtrado funciona en el teclado y anuncia su resultado de una manera comprensible.
  3. Las imágenes tienen texto alternativo relevante y dimensiones consistentes.
  4. Un estado vacío proporciona una explicación y restablece la búsqueda.

Comprendre les vérifications avant publication

Seguimiento y traspaso de responsabilidades

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.

Organizar el mantenimiento del sitio

Comparar dos enfoques

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.

explorar más esta decisión

Comparar alcance y costes

Puesta en marcha
Compare componentes, teclado, adaptación e intercambios. Una página estática no equivale a tratar errores de red.
Operación recurrente
Prevea dependencias, regresiones y compatibilidad. Separe mantenimiento existente y nuevos comportamientos.
Salida y entrega
Pida código, compilación y contratos de interfaz. Archivos minificados solos no permiten reproducir la versión servida.

Comparar los costes de tres soluciones web

Preguntas frecuentes

¿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.

recursos para profundizar

Explorar otros archivos