Como docente de formación para el empleo le han solicitado que imparta en modalidad

teleformación una acción formativa vinculada a la UF1302 "Creación de páginas web con
el lenguaje de marcas" del Certificado de profesionalidad Confección y Publicación de
Páginas Web nivel 2 (IFCD0110) de la Familia Profesional: Informática y Comunicaciones.
Los alumnos/as participantes disponen de competencias generales en el uso de TIC.
Se le pide que haga un cuadro de la programación adaptada a las características de los
destinatarios de forma que desarrolle la competencia o competencias asociadas al
contenido que se establece en el certificado, en el que conste:

 Las unidades didácticas y su duración.

Con un total de 80 horas, se determinarán las siguiente unidades didácticas:

1. Intraducción al curso y estructura. 2 horas.

2. Los lenguajes de marcas. 20 horas.
3. Imágenes y elementos multimedia 12 horas.
4. Técnicas de accesibilidad y usabilidad 15 horas.
5. Herramientas de edición web 35 horas.
6. Trabajo final. Evaluación. 6 horas.

 El Objetivo general y objetivos específicos.

RP1: Realizar páginas web para presentar información utilizando herramientas de edición web,
siguiendo especificaciones de diseño recibidas.
CR1.1 La herramienta de edición se instala y configura con el fin de utilizarla en la
elaboración de las páginas web, siguiendo las especificaciones recibidas.
CR1.2 Los asistentes que proporcionan las herramientas de edición se identifican y se
utilizan para facilitar la creación de las páginas, según las especificaciones técnicas de la
herramienta.
CR1.3 Los elementos que aporta la herramienta de edición se insertan y se configuran,
utilizando las opciones (menús, barras de herramientas, controles) que proporciona, según
las especificaciones de diseño recibidas.
CR1.4 Las páginas realizadas se prueban en los navegadores web para verificar que
cumplen las funcionalidades especificadas en el diseño, así como los criterios de
«usabilidad» y accesibilidad definidos por la organización, siguiendo procedimientos
establecidos.
CR1.5 Los errores en las páginas realizadas se detectan y corrigen utilizando la propia
herramienta de edición, para asegurar el cumplimiento de las especificaciones del diseño,
según criterios de calidad y procedimientos de prueba de la organización.
CR1.6 La documentación técnica específica asociada a la herramienta, se interpreta, en su
caso, en la lengua extranjera de uso más frecuente en el sector.

RP2: Crear páginas web y retocar las ya realizadas utilizando lenguajes de marcas, de acuerdo
a especificaciones de diseño recibidas.
CR2.1 Los elementos proporcionados por el lenguaje de marcas, se utilizan para presentar
información en las páginas web según las especificaciones de diseño recibidas.
CR2.2 El tipo de contenido a exponer (textos, imágenes, tablas, elementos multimedia,
enlaces, entre otros) en la página se identifica y se utilizan las etiquetas correspondientes
que proporciona el lenguaje, siguiendo las especificaciones de diseño recibidas.
CR2.3 Los atributos y valores de los elementos se identifican y se ajustan para mejorar el
formato, la funcionalidad y el diseño de la página, según las especificaciones de diseño
recibidas.
CR2.4 Las modificaciones a realizar en la página web se identifican y se utilizan las
etiquetas, los elementos y los atributos correspondientes para adaptar la página a los
nuevos cambios, de acuerdo a las especificaciones de diseño recibidas.
CR2.5 Las páginas realizadas y modificadas se prueban en los navegadores web para
verificar que cumplen las funcionalidades especificadas en el diseño, así como criterios de
 «usabilidad» y accesibilidad definidos por la organización, según procedimientos
establecidos.
CR2.6 Los errores funcionales en las páginas realizadas se detectan y corrigen, para
asegurar el cumplimiento de las especificaciones de desarrollo según procedimientos de la
organización.
CR2.7 La página desarrollada se documenta para su posterior uso y modificación siguiendo
los patrones, normativa y procedimientos establecidos en el diseño.

 La Secuenciación de los contenidos a impartir.

1. Los lenguajes de marcas.

– Características de los lenguajes de marcas.
– Utilización de etiquetas.
– Compatibilidad.
– Editores de texto.
– Estructura de un documento creado con lenguaje de marcas.
– Comienzo del archivo.
– Encabezados.
– Titulo.
– Estilos.
– Cuerpo.
– Scripts.
– Navegadores web.
– Navegadores modo texto.
– Los navegadores más utilizados.
– Explorer, Mozilla, Opera, etc.
– Diferencias de visualización.
– Marcas para dar formato al documento.
– Marcas de inicio y final.
– Marcas de aspecto.
– Marcas de párrafo.
– Marcas de fuentes y colores.
– Listas ordenadas.
– Enlaces y direccionamientos.
– Creación de un enlace.
– Tipos de enlace.
– Anclas.
– Vínculos.
– Los enlaces y la navegación.
– Marcos y capas.
– Marcos.
– Creación de marcos.
– Tipos de marcos.
– Situación de los marcos.
– Configuración de los marcos.
– Capas.
– Definición de capas.
– Creación de capas.
– Utilización de las capas.

2. Imágenes y elementos multimedia

– Inserción de imágenes: formatos y atributos.
– Incluir imágenes en las páginas.
– Atributos de las imágenes.
– Propiedades de ubicación de las imágenes.
– Mapas de imágenes.
– Definición de mapa.
– Creación de un mapa con una imagen.
– Establecer diferentes partes en la imagen.
 – Vincular las diferentes partes de la imagen.
– Inserción de elementos multimedia: audio, vídeo y programas.
– Características y propiedades de los elementos multimedia.
– Recursos necesarios para el funcionamiento de los elementos multimedia.
– Etiquetas y propiedades para la inserción de audio.
– Etiquetas y propiedades para la inserción de vídeo.
– Etiquetas y propiedades para la inserción de programas.
– Formatos de audio y vídeo.
– Descripción de los formatos de audio.
– Descripción de los formatos de vídeo.
– Configuración de los recursos para audio.
– Configuración de los recursos para vídeo.
– Marquesinas.
– Los textos con movimiento.
– Utilización de las etiquetas para incluir marquesinas.
– Las marquesinas y los distintos navegadores.

3. Técnicas de accesibilidad y usabilidad

– Accesibilidad web, ventajas de la accesibilidad.
– Definición de Accesibilidad.
– Aplicabilidad de la Accesibilidad.
– Descripción de las ventajas de la Accesibilidad.
– Facilidad de acceso.
– Mejoras en la navegación.
– Independencia de los navegadores.
– Usabilidad web, importancia de la usabilidad.
– Definición de usabilidad.
– Interacción web-individuo.
– Aplicabilidad de la usabilidad.
– Recursos sobre usabilidad.
– Aplicaciones para verificar la accesibilidad de sitios web (estándares).
– Recursos web de estándares.
– Utilización de los recursos en las páginas web.
– Comprobar la accesibilidad en las páginas web.
– Diseño de sitios web usables.
– Descripción de sitios web usables.
– Estudio de la estructura y diseño de los sitios web usables.
– Adaptación de sitios web usables.
– Utilización de los sitios web usables.

4. Herramientas de edición web

– Instalación y configuración de herramientas de edición web.
– Funciones y características.
– Descripción de los elementos de las herramientas Web.
– Ubicación de los elementos de las herramientas web.
– Propiedades de los elementos de las herramientas web.
– Tareas a realizar con una herramienta de edición web.
– El lenguaje de marcas y las herramientas de edición web.

 Desarrollar actividades extraídas de los contenidos programados.

A continuación, se presenta un cuadro de programación adaptada para la acción formativa

vinculada a la UF1302 "Creación de páginas web con el lenguaje de marcas" del Certificado de
profesionalidad IFCD0110. Este cuadro incluye actividades específicas que desarrollan las
competencias asociadas al contenido del certificado, teniendo en cuenta que los alumnos ya
poseen competencias generales en el uso de TIC.
Cuadro de Programación Adaptada
CONTENIDO ACTIVIDADES COMPETENCIAS
DESARROLLADAS
1. Introducción al - Actividad 1: Lectura y análisis de - Comprender y aplicar los
Lenguaje HTML ejemplos de código HTML. conceptos básicos del lenguaje
- Actividad 2: Crear una página HTML.
HTML básica con estructura simple - Desarrollar habilidades para
(título, párrafos, enlaces). crear documentos estructurados.
2. Estructura de - Actividad 3: Diseñar un esquema - Fomentar la planificación y
una Página Web básico de una página web utilizando organización en el desarrollo web.
herramientas como diagramas o - Mejorar la comunicación y
mapas mentales. colaboración entre pares.
- Actividad 4: Presentar el esquema
a los compañeros en un foro virtual y
recibir feedback.
3. Uso de - Actividad 5: Crear una página que - Aplicar correctamente las
Etiquetas HTML incluya diferentes etiquetas (títulos, etiquetas HTML en proyectos
párrafos, listas, enlaces) y subirla a reales.
la plataforma LMS para revisión. - Desarrollar habilidades críticas
- Actividad 6: Realizar una actividad mediante la evaluación
de revisión por pares donde cada constructiva.
alumno evalúa el trabajo de otro
compañero.
4. Introducción a - Actividad 7: Taller práctico donde - Comprender cómo CSS
CSS los alumnos aplican estilos CSS a su complementa HTML en el diseño
página creada anteriormente web.
(colores, fuentes, márgenes). - Fomentar la creatividad en el
- Actividad 8: Comparar antes y diseño visual de páginas web.
después del estilo aplicado en un
foro para discutir mejoras visuales.

 Metodología que usará en la impartición concretando métodos, algunos recursos

didácticos y ubicación de las actividades en el proceso formativo.

- Método expositivo para presentar conceptos

1. Introducción al básicos.
Lenguaje HTML - Aprendizaje basado en proyectos (ABP) para
fomentar la práctica.

2. Estructura de - Trabajo colaborativo para diseñar esquemas.

una Página Web - Método del caso para discutir ejemplos reales.

- Aprendizaje activo mediante práctica directa y

3. Uso de Etiquetas revisión por pares.
HTML - Método socrático para fomentar preguntas y
respuestas sobre el uso de etiquetas.

 El procedimiento evaluador que seguirá para comprobar la adquisición de

objetivos propuestos.
C1: Identificar los elementos proporcionados por los lenguajes de marcas y confeccionar
páginas web utilizando estos lenguajes teniendo en cuenta sus especificaciones técnicas.
CE1.1 Identificar la estructura de una página web escrita utilizando lenguajes de marcas,
así como las secciones de cabecera y cuerpo del documento, para identificar las partes
que la forman según un diseño especificado.
CE1.2 Describir las etiquetas y atributos que se utilizan para dar formato al documento,
así como para presentar información en forma de tabla y de listas.
CE1.3 Describir las etiquetas y atributos que se utilizan para insertar enlaces y
direccionamientos, tanto dentro de la página web como a otros documentos y páginas
ubicados en cualquier destino.
CE1.4 Identificar los tipos de formatos de los archivos multimedia, tanto audio como
vídeo que se integran en las páginas web.
CE1.5 Citar las etiquetas y atributos que se necesitan para insertar imágenes y
elementos multimedia, así como para crear mapas de imágenes en función de las
especificaciones recibidas.
CE1.6 Explicar los criterios de «usabilidad» y accesibilidad a los contenidos de páginas
web, para permitir una mejor calidad de navegación y comprensión de los usuarios,
teniendo en cuenta criterios definidos y normativa estándar de accesibilidad y
«usabilidad».
CE1.7 Crear una página web que incluya varios marcos para la presentación de otras
páginas, siguiendo unas especificaciones de diseño recibidas.
CE1.8 Realizar páginas web para presentar información con un lenguaje de marcas de
acuerdo a un diseño especificado:
– Elegir las etiquetas para dar formato al documento.
– Mapear una imagen creando varias zonas activas.
– Elegir las marcas para presentar la información en forma de listas y de tablas.
– Insertar etiquetas para desplazarse dentro de la misma página.
– Crear etiquetas para enlazar con otros documentos y direcciones web.
– Insertar marcas para presentar imágenes, sonidos y vídeos.
– Especificar las etiquetas para crear marcos y relacionar varias páginas.
– Insertar las marcas que permitan la ejecución de programas. – Crear capas para
presentar información en distintas zonas de la página.
– Identificar varios navegadores y probar la funcionalidad de la página.
– Aplicar criterios de «usabilidad» y accesibilidad.
– Documentar la página realizada.

C2: Identificar las características y funcionalidades de las herramientas de edición web, y

utilizarlas en la creación de páginas web teniendo en cuenta sus entornos de desarrollo.
CE2.1 Identificar las funciones y características de las herramientas que se utilizan para
la edición de páginas web, teniendo en cuenta las especificaciones técnicas de las
mismas. CE2.2 Interpretar la documentación técnica que proporciona la herramienta de
edición, incluso si está editada en la lengua extranjera de uso más frecuente en el sector,
para utilizarla de ayuda en la realización de páginas web, de acuerdo a las
especificaciones técnicas de las mismas.
CE2.3 Instalar y configurar una herramienta de edición de páginas web, según unas
especificaciones recibidas:
– Instalar la herramienta de edición siguiendo las especificaciones técnicas.
– Configurar la herramienta para su utilización.
CE2.4 Realizar páginas web con herramientas de edición web, según un diseño
especificado:
– Identificar los componentes que proporciona la herramienta para insertar elementos
en la página.
– Configurar los atributos y propiedades de los elementos insertados.
– Probar la página realizada utilizando varios navegadores web.
– Corregir los posibles errores que surjan en la elaboración de la página.
– Documentar la página realizada.

 Los recursos, bibliografía, anexos, entre otros, necesarios para la impartición de

la formación.
Recursos Necesarios
1. Plataformas y Herramientas
Plataforma LMS: Moodle, Google Classroom o Microsoft Teams para gestionar el curso,
compartir materiales y realizar evaluaciones.
Editor de Código: Visual Studio Code, Notepad++, o Sublime Text para la creación y
edición de archivos HTML y CSS.
Herramientas de Colaboración: Google Docs, Miro o Trello para trabajos en grupo y
planificación.
2. Material Didáctico
Presentaciones: Diapositivas en PowerPoint o Google Slides que cubran los temas
teóricos (HTML, CSS, estructura de páginas web).
Documentos PDF: Guías rápidas sobre HTML y CSS que incluyan ejemplos prácticos.
Tutoriales en Video: Enlaces a videos educativos en plataformas como YouTube que
expliquen conceptos clave (por ejemplo, W3Schools o freeCodeCamp).
3. Ejercicios Prácticos
Plantillas HTML/CSS: Archivos base que los alumnos pueden utilizar como punto de
partida para sus proyectos.
Ejercicios Interactivos: Enlaces a plataformas como Codecademy o Khan Academy
donde los alumnos pueden practicar en línea.

Bibliografía
1. Libros
Duckett, J. (2011). HTML and CSS: Design and Build Websites. Wiley.
Robbins, J. N. (2018). Learning Web Design: A Beginner's Guide to HTML, CSS,
JavaScript, and Web Graphics. O'Reilly Media.
Keith, J. (2010). HTML5 for Web Designers. A Book Apart.
2. Documentación Online
MDN Web Docs: Documentación completa sobre HTML y CSS