CASO PRÁCTICO.

ACTIVIDAD 17:

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.

MF0950_2: Construcción de páginas web. (210 horas).

● UF1302: Creación de páginas web con el lenguaje de marcas. (80 horas).

● UF1303: Elaboración de hojas de estilo. (70 horas).

● UF1304: Elaboración de plantillas y formularios. (60 horas).

MF0951_2: Integración de componentes software en páginas web. (180 horas).

● UF1305: Programación con lenguajes de guión en páginas web. (90 horas).

● UF1306: Pruebas de funcionalidades y optimización de páginas web. (90

horas).

MF0952_2: Publicación de páginas web. (90 horas).

MP0278: Módulo de prácticas profesionales no laborales de Confección y

Publicación de Páginas Web (80 horas).
• El Objetivo general y objetivos específicos.

Objetivo general:

 Crear y publicar páginas web que integren textos, imágenes y otros

elementos, utilizando lenguajes de marcas y editores apropiados, según
especificaciones y condiciones de «usabilidad» dadas y realizar los
procedimientos de instalación y verificación de las mismas en el servidor
correspondiente.

Objetivos específicos:
 Conocer qué es un lenguaje de marcas, ejemplos y aplicaciones de
lenguajes existentes, y qué software podemos utilizar para editar
documentos creados con dichos lenguajes.
  Aprender qué etiquetas y propiedades tiene HTML5 y confeccionar
páginas Web teniendo en cuenta sus especificaciones técnicas.
 Saber crear la estructura de una página Web creada con HTML5 a
través de sus secciones más importantes: cabecera y cuerpo del
documento.
 Identificar las etiquetas necesarias para crear o incorporar estilos
CSS y programas JavaScript.
 Conocer qué navegadores Web tenemos a nuestra disposición, sus
características más importantes y ejemplos de navegadores en modo texto.
 Describir las etiquetas y atributos que se utilizan para dar formato al
documento, aplicar tipografía y definir colores, así como para
presentar información de listas.
 Conocer 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.
 Crear una página Web que incluya varios marcos para la
presentación de otras páginas, siguiendo unas especificaciones de
diseño recibidas.
 Definir diferentes divisiones o capas través de las etiquetas
semánticas de HTML5
 Identificar los diferentes formatos de contenidos multimedia para
imágenes que podemos incluir en forma de ficheros en una página
Web.
 También, conoceremos qué etiquetas y atributos hemos de utilizar
para aportar imágenes, además cómo crear mapas de imágenes,
creando varias zonas activas dentro de cada imagen.
 Identificar los diferentes formatos de contenidos multimedia que
podemos incluir en forma de ficheros en una página Web, tanto en
audio como en vídeo.
 Conocer qué etiquetas y atributos hemos de utilizar para aportar
contenido multimedia, compatible con navegadores antiguos.
 Insertar marcas para presentar sonidos y vídeos, aportando
subtítulos.
 Insertar las marcas que permitan la ejecución de programas.
 Definir qué es accesibilidad Web y sus técnicas y principios
fundamentales, así como destacar las principales ventajas de trabajar
con accesibilidad.
 Explicar los criterios de usabilidad con contenidos 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.
 Utilizar herramientas de validación de accesibilidad y usabilidad Web.
 Identificar varios navegadores y probar la funcionalidad de la página,
utilizando varios criterios de usabilidad y accesibilidad.
 Probar la página Web realizada en varios navegadores Web para
comprobar si se cumplen las funcionalidades especificadas en el
diseño, además de los criterios de accesibilidad y usabilidad que se
hayan definido.
  Conocer las características y funcionalidades del editor Sublime Text
para la creación de páginas Web, teniendo en cuenta las
especificaciones técnicas de las mismas. Aprenderemos a instalarlo,
configurarlo y extender sus funcionalidades mediante paquetes.
 Describiremos su interfaz y secciones más importantes.
 Aprender la gestión de archivos con Sublime Text, su característica
multi cursor, cuáles son las teclas de edición de texto, conocer qué
son las marcas y los marcadores para qué se utilizan, las operaciones
de buscar y reemplazar y la gestión de proyectos.
 Conocer cómo ampliar funcionalidades en Sublime Text a partir de la
instalación y configuración de diferentes paquetes. Aprenderemos a
usar los más interesantes, entre los muchos disponibles: por ejemplo
Emmet, Trailing Spaces o programas tipo Linter.
 Conocer cómo personalizar Sublime Text: apariencia, combinaciones
de teclas, colores y temas.
 Aprender a crear y gestionar macros y snippets.
 Conocer otras alternativas de editores Web disponibles y de entornos
de programación en la nube.

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

Ejercicio 1. Definición de etiquetas.

Ejercicio 2. Estructura de una página Web.

Ejercicio 4. Estilos de texto y listas.

Ejercicio 5. Etiquetas de formateo de texto.

Ejercicio 6. Código en HTML5.

Ejercicio 7. Estructura y enlaces.

Ejercicio 8. Creación de una página Web.

Ejercicio 9. Marcos.

Ejercicio 10. Galería de imágenes.

Ejercicio 11. Mapa de imágenes.

Ejercicio 12. Article y figure.

Ejercicio 13. Audio para todos.

Ejercicio 14. Vídeo para todos.

Ejercicio 15. Vídeo con subtítulos.

Ejercicio 16. Detectar JavaScript en el navegador.

Ejercicio 17. Marquesina.

Ejercicio 18. Comprobación de la accesibilidad de un sitio Web.

Ejercicio 19. Comprobación de la Usabilidad de un sitio Web

Ejercicio 20. Optimizar la velocidad de carga de un sitio Web

Ejercicio 21. Comprobar el contraste de un sitio Web

Ejercicio 22. Validación de una página Web.

Ejercicio 23. Configurando Sublime Text.

Ejercicio 24. Búsqueda y reemplazo con expresiones regulares.

Ejercicio 25. Paquete para FTP.

Ejercicio 26. Practicando con Emmet.

Ejercicio 27. Creación de un snippet.

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

La utilización de estrategias metodológicas que faciliten la participación activa

de los alumnos en la construcción de sus aprendizajes, el desarrollo de la
motivación, la autonomía, la iniciativa y la responsabilidad necesarias en el
desarrollo profesional y personal.

La realización de prácticas durante la formación que faciliten la transferencia de

los aprendizajes a la hora de abordar situaciones, realizar actividades y
resolver problemas propios del ámbito laboral.

El empleo de los medios y recursos didácticos adecuados a los conocimientos

y capacidades a adquirir y en conexión con el contexto profesional.
• 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:

– PCs instalados en red y conexión a Internet.

– Armario de cableado con paneles de parcheado, y dispositivos de conexión a

red.

– Software de base, de red y del servidor web.

– Software de seguridad y antivirus.

– Software ofimático.

– Software de páginas web

– Software para crear y modificar imágenes

– Impresora y periféricos.

– Herramientas de edición web.

– Herramientas de edición de código de programación cliente y de servidor.

– Herramientas de depuración y pruebas.

– Herramientas de publicación de páginas.

– Herramientas de transferencia.

– Herramientas multimedia.
– Herramientas de desarrollo rápido.

– Navegadores actuales.

– Navegadores tipo texto.

– Lenguajes de marcas. Lenguajes de guión.

– Servidores web.

– Aplicaciones para la verificación de accesibilidad de sitios web.

– Buscadores de Internet.

– Componentes software ya desarrollados y/o distribuidos por empresas

informáticas.

– Cañón de proyección.

– Rotafolios.

– Pizarra.

– Material de aula.

– Mesa y silla para el formador.

– Mesas y sillas para alumnos.

– Mobiliario auxiliar para el equipamiento de aula.

Bibliografía:

Recuperado de SEPE, el 30 de julio:

file:///C:/Users/supervisor/Downloads/IFCD0110_guia_Confeccion_publicacion_
web.pdf