Saltar a contenido

Planificación Docente y Mapeo Exclusivo de Criterios - DIW (0615)

Reparto de Criterios (Total: 44 CEs)

  • Centro Educativo (UD 1 a UD 12 — 1.º y 2.º Trimestre): 36 Criterios de Evaluación (RA1, RA2, RA3, RA4 y RA5.a-e).
  • Formación en Empresa (Bloque Dual — 3.er Trimestre): 8 Criterios de Evaluación (RA5.f-g + RA6 completo).

Tabla Resumen por Trimestres y Unidades

Trimestre Ámbito Unidad / Bloque RA Criterios de Evaluación (CE) Asignados
1.º Centro UD 1: Diseño de Interfaces, Comunicación Visual y Figma Base RA1 1.a, 1.b, 1.c, 1.d
1.º Centro UD 2: Figma Avanzado, Prototipado y Design Systems RA1 1.e, 1.f, 1.g
1.º Centro UD 3: HTML5 Semántico, Estructura Accesible y Formularios RA2 2.a, 2.b, 2.c
1.º Centro UD 4: CSS3 Moderno, Flexbox, Grid y Layout Responsive RA2 2.d, 2.e, 2.f
1.º Centro UD 5: Arquitectura CSS, Metodología BEM y Tailwind CSS RA2 2.g, 2.h, 2.i
1.º Centro UD 6: Formatos Multimedia, Compresión y Assets Web RA3 3.a, 3.b, 3.c, 3.d
2.º Centro UD 7: Audio, Vídeo, Animaciones CSS y SVG Interactivo RA3 3.e, 3.f, 3.g, 3.h
2.º Centro UD 8: Componentes UI, Atomic Design y Storybook RA4 4.a, 4.b, 4.c, 4.d
2.º Centro UD 9: Interactividad UI, DOM y Validación en Navegadores RA4 4.e, 4.f, 4.g
2.º Centro UD 10: Fundamentos de Accesibilidad Web y WCAG 2.2 RA5 5.a, 5.b
2.º Centro UD 11: Pautas y Análisis de Errores de Accesibilidad RA5 5.c, 5.d
2.º Centro UD 12: Conformidad de Accesibilidad y Proyecto Integrador RA5 5.e
3.º Empresa E.1: Tests de Accesibilidad y Tecnologías Asistivas en Producción RA5 5.f, 5.g
3.º Empresa E.2: Evaluación de Usabilidad y Rediseño de Interfaces Reales RA6 6.a, 6.b, 6.c
3.º Empresa E.3: Navegación por Periféricos y Verificación Multinavegador RA6 6.d, 6.e, 6.f

Desglose Completo por Criterio (44 CEs sin Solapamientos)

🏫 Impartidos y evaluados en el CENTRO (UD 1 a UD 12 — 36 CEs)

RA1: Planifica la creación de una interfaz web valorando y aplicando especificaciones de diseño.

  • 1.a: Reconocimiento de la importancia de la comunicación visual. \(\rightarrow\) UD 1
  • 1.b: Selección de colores y tipografías para pantalla. \(\rightarrow\) UD 1
  • 1.c: Análisis de alternativas para la presentación de información. \(\rightarrow\) UD 1
  • 1.d: Definición y aplicación de la guía de estilo. \(\rightarrow\) UD 1
  • 1.e: Uso de aplicaciones para el diseño web (Figma). \(\rightarrow\) UD 2
  • 1.f: Uso de marcos, tablas y capas para presentar información (Auto Layout). \(\rightarrow\) UD 2
  • 1.g: Creación y utilización de plantillas de diseño y componentes. \(\rightarrow\) UD 2

RA2: Crea interfaces Web homogéneos definiendo y aplicando estilos.

  • 2.a: Posibilidades de modificación de etiquetas HTML. \(\rightarrow\) UD 3
  • 2.b: Definición de estilos de forma directa. \(\rightarrow\) UD 3
  • 2.c: Estilos globales y hojas externas. \(\rightarrow\) UD 3
  • 2.d: Hojas de estilos alternativas y media queries. \(\rightarrow\) UD 4
  • 2.e: Redefinición de estilos y especificidad. \(\rightarrow\) UD 4
  • 2.f: Propiedades de los elementos y modelo de caja. \(\rightarrow\) UD 4
  • 2.g: Creación de clases de estilos y BEM. \(\rightarrow\) UD 5
  • 2.h: Herramientas de validación de hojas de estilos. \(\rightarrow\) UD 5
  • 2.i: Actualización de la guía de estilo / Tailwind. \(\rightarrow\) UD 5

RA3: Prepara archivos multimedia para la Web, analizando sus características y manejando herramientas específicas.

  • 3.a: Licencias y derechos de autor en material multimedia. \(\rightarrow\) UD 6
  • 3.b: Formatos de imagen, audio y vídeo a utilizar (WebP, AVIF). \(\rightarrow\) UD 6
  • 3.c: Análisis de herramientas para generar contenido multimedia. \(\rightarrow\) UD 6
  • 3.d: Tratamiento digital de la imagen y compresión. \(\rightarrow\) UD 6
  • 3.e: Herramientas para manipular audio y vídeo. \(\rightarrow\) UD 7
  • 3.f: Animaciones a partir de imágenes fijas / CSS Keyframes. \(\rightarrow\) UD 7
  • 3.g: Importación/exportación e integración de SVG. \(\rightarrow\) UD 7
  • 3.h: Aplicación de la guía de estilo multimedia. \(\rightarrow\) UD 7

RA4: Integra contenido multimedia en documentos Web valorando su aportación y seleccionando adecuadamente los elementos interactivos.

  • 4.a: Tecnologías para la inclusión de contenido interactivo. \(\rightarrow\) UD 8
  • 4.b: Configuración de navegadores para contenido interactivo. \(\rightarrow\) UD 8
  • 4.c: Herramientas gráficas para desarrollo interactivo (Storybook). \(\rightarrow\) UD 8
  • 4.d: Análisis del código generado por herramientas de desarrollo. \(\rightarrow\) UD 8
  • 4.e: Agregado de elementos multimedia a documentos Web. \(\rightarrow\) UD 9
  • 4.f: Interactividad en elementos del documento Web (DOM / JS). \(\rightarrow\) UD 9
  • 4.g: Verificación multinavegador de elementos interactivos. \(\rightarrow\) UD 9

RA5: Desarrolla interfaces Web accesibles, analizando las pautas establecidas y aplicando técnicas de verificación (Parte de Aula).

  • 5.a: Necesidad de webs accesibles y normativa. \(\rightarrow\) UD 10
  • 5.b: Análisis de accesibilidad en documentos web. \(\rightarrow\) UD 10
  • 5.c: Pautas principales de accesibilidad (WCAG 2.2 / WAI-ARIA). \(\rightarrow\) UD 11
  • 5.d: Análisis de errores según puntos de prioridad. \(\rightarrow\) UD 11
  • 5.e: Alcanzar el nivel de conformidad deseado (AA/AAA) en los proyectos de aula. \(\rightarrow\) UD 12

🏢 Evaluados en la EMPRESA (3.er Trimestre — 8 CEs - 18,18 %)

RA5: Accesibilidad Web en Entorno de Producción (Tramo de Auditoría Externa)

  • 5.f: Verificación de niveles alcanzados mediante test externos (Lighthouse, axe, WAVE) en webs de producción. \(\rightarrow\) Bloque Empresa E.1
  • 5.g: Verificación de la interfaz con diferentes navegadores y tecnologías asistivas reales. \(\rightarrow\) Bloque Empresa E.1

RA6: Desarrolla interfaces Web amigables analizando y aplicando las pautas de usabilidad establecidas (RA6 COMPLETO).

  • 6.a: Análisis de la usabilidad de documentos web comerciales. \(\rightarrow\) Bloque Empresa E.2
  • 6.b: Modificación de la interfaz según objetivos y usuarios reales de la empresa. \(\rightarrow\) Bloque Empresa E.2
  • 6.c: Valoración y aplicación práctica de estándares web. \(\rightarrow\) Bloque Empresa E.2
  • 6.d: Verificación de facilidad de navegación mediante distintos periféricos. \(\rightarrow\) Bloque Empresa E.3
  • 6.e: Aplicación de técnicas para verificar usabilidad en entornos de producción. \(\rightarrow\) Bloque Empresa E.3
  • 6.f: Verificación final de usabilidad del interfaz en múltiples navegadores y tecnologías. \(\rightarrow\) Bloque Empresa E.3

📋 Planificación Docente: Mapeo de RAs, Criterios y Dualización

🗺️ Matriz de Relación: RA / Criterios / UDs / FP Dual

Evaluación / Bloque Unidad Didáctica (UD) RA Asociado Criterios de Evaluación Impartición / Dualización
1.ª Evaluación
(Vanilla JS)		 UD 1: Arquitecturas Web RA1 a, b, c, d, e, f ❌ Aula
UD 2: Herramientas de Desarrollo RA1 a, b, c, d, e, f ❌ Aula
UD 3: Sintaxis, Tipos y Funciones RA2 a, b, c, d, e, f, g, h ❌ Aula
UD 4: Control de Flujo, Bucles y Arrays RA2 a, b, c, d, e, f, g, h ❌ Aula
UD 5: Objetos y Programación Orientada a Objetos RA3 a, b, c, d, e, f, g, h ❌ Aula
UD 6: DOM Nativo, Eventos, Asincronía y Almacenamiento RA3 a, b, c, d, e, f, g, h ❌ Aula
2.ª Evaluación
(Framework React)		 UD 7: Inmersión en React y Arquitectura Frontend RA4 a, b, c, d, e, f, g, h, i ❌ Aula
UD 8: Props, Composición y Reutilización RA4 a, b, c, d, e, f, g, h, i ❌ Aula
UD 9: Eventos y Estado con useState RA5 a, b, c, d, e, f, g, h ❌ Aula
UD 10: Formularios y Validaciones RA5 a, b, c, d, e, f, g, h ❌ Aula
UD 11: Referencias Imperativas y Optimización RA6 a, b, c, d, e, f, g, h ❌ Aula
UD 12: Entorno BOM, useEffect y Rutas RA6 a, b, c, d, e, f, g, h ❌ Aula
UD 13: Context API y Manejo de Estado Global RA6 a, b, c, d, e, f, g, h ❌ Aula
Formación en Empresa
(FP Dual)		 FP Dual: Producción, APIs y React
• Estado Global (Context / Zustand)
• Consumo de APIs (TanStack Query)
• Testing (Vitest, RTL, Playwright)
• CI/CD y Seguridad (XSS, CSP)		 RA7 a, b, c, d, e, f, g, h, i 🟢 SÍ (100% Empresa / Dual)

🟢 Detalle del RA7 Dualizado (100% en Empresa)

El Resultado de Aprendizaje 7 se transfiere íntegramente a la estancia en empresa para aplicarse sobre un entorno real de producción frontend:

  • RA7.a / RA7.b: Comunicación asíncrona, evaluación de rendimiento y consumo de APIs REST/GraphQL.
  • RA7.c / RA7.d: Métodos HTTP, gestión de peticiones, almacenamiento y estado de servidor con TanStack Query.
  • RA7.e / RA7.f: Renderizado dinámico, intercambio de datos (JSON, FormData) y arquitectura de estado global (Zustand / Context API).
  • RA7.g: Pruebas e integración entre navegadores y entornos (Vitest, React Testing Library y Playwright).
  • RA7.h / RA7.i: Uso de librerías en producción, pipelines de CI/CD y seguridad web (CSP, prevención de XSS y manejo seguro de Cookies).