El documento detalla un curso sobre la confección y publicación de páginas web que cubre contenido práctico y teórico, incluyendo lenguajes de marcado, técnicas de accesibilidad y herramientas de edición. Se describe un caso práctico donde un equipo de trabajo desarrolla un sitio web para un cliente panadero, enfatizando la importancia de una guía de estilo para posibles futuras ampliaciones. Además, se mencionan estándares como HTML y CSS y su rol en el diseño y presentación de páginas web.

1. IFCD0110 - Confección y
publicación de páginas web
Antonio
Díaz

2. Presentación CONTENIDOS Y
OBJETIVOS
Conocer al
profesor
¿Podré dar las
clases?
¿Qué
Buscamo
s?
Identificar
donde estamos
¿Cuántos
contenidos tiene
este Certificado?
Contenido
s de
módulos
Detallar con un
ejemplo
¿Sabe explicar
un contenido
concreto?
Contenid
os
formativo
s
Comprobar lo
que hemos
aprendido
¿Hemos
aprendido algo
en este ratito?
Evaluaci
ón
Resolver si
algo queda
pendiente
Es su turno por si
quieren hacer
preguntas
pregunta
s

3. Módulos formativos
Empezamos
Prácticas
profesionales
Construcció
n de
Creación con
lenguaje de
marcas
Elaboració
n de hojas
de estilo
Elaboración
de plantillas y
formularios
Integración
de
componentes
software
Programa
ción con
lenguajes
de guíon
Pruebas
de
funcionalid
ad y
optimizaci
ón
Publicació
n

4. CONSTRUCCIÓN PÁGINAS
WEB
1. Los lenguajes de
marcas.
 – Características de los
lenguajes de marcas.
 – Estructura de un documento
creado con lenguaje de marcas.
 – Navegadores web.
 – Marcas para dar formato al
documento.
 – Enlaces y direccionamientos.
 – Marcos y capas.
2. Imágenes y
elementos multimedia
 – Mapas de imágenes.
 – Inserción de elementos multimedia.
 – Formatos de audio y vídeo.
 – Inserción de imágenes: formatos y
atributos.
 – Marquesinas.
3. Técnicas de
accesibilidad y
usabilidad
 – Ventajas de la accesibilidad.
 – Usabilidad web, importancia.
 – Aplicaciones para verificar la
accesibilidad (estándares).
 – Diseño de sitios web usables.
 – Adaptación de sitios web usables.
4. Herramientas
de edición web
 – Instalación y configuración.
 – Funciones y características.

5. CONSTRUCCIÓN PÁGINAS
WEB
1. Hojas de estilo en la construcción de páginas
web
2. Diseño, ubicación y optimización de los
contenidos DE UNA Pág. web
– Creación de un documento funcional.
– Tipos de página para la ubicación de contenidos.
– Especificaciones de navegación.
– Elementos utilizados para la navegación.
– Elaboración de una guía de usuario.
 – Funciones y características.
 – Hojas de estilo y accesibilidad.
 – Tipos de estilo:
 incrustados,
 enlazados,
 importados,
 – Selectores y reglas de estilo.
 – Creación de ficheros de estilo.
 – Atributos de estilo para:
 fuentes,
 color y fondo,
 texto y bloques (párrafos).

6. CONSTRUCCIÓN PÁGINAS
WEB
– Funciones y características.
– Campos editables y no editables.
– Aplicar plantillas a páginas web.
1. Formularios
2.
Plantillas
 – Características.
 – Elementos y atributos de formulario.
 – Controles de formulario.
 – Formularios y eventos.
Criterios de accesibilidad
y usabilidad en el diseño.

7. Caso práctico CSS
(Cascading Style
Sheets).
Como todas las semanas, se reúnen los miembros del equipo de trabajo de la empresa BK impresión
digital, para comentar las incidencias de la semana anterior. En el transcurso de la reunión, Ana anuncia
a sus compañeros que tienen un nuevo cliente: un pequeño negocio familiar de panaderos que desea
darse a conocer a través de Internet y que ha contratado los servicios de la empresa BK impresión
digital para el desarrollo de su página Web. Les comenta la conversación que ha mantenido con el
cliente y de la cual se desprende que el trabajo a realizar es muy sencillo, en el que tendrán que dar
prioridad al aspecto visual ya que los clientes insistieron en tener en la página principal una animación
con dibujos donde quede perfectamente reflejada la elaboración del pan. Ana ha sonreído al oír este
último comentario ya que sabe que será ella la encargada de esta labor.
Antonio y Carlos se ofrecen inmediatamente a hacer un viaje para sacar las fotografías necesarias para
incluir en la página, recoger toda la documentación que necesiten sobre los productos que se elaboran y
filmar el proceso de elaboración del pan para que Ana pueda trabajar.
Ana les dice que lo del vídeo está muy bien pero que de momento, ella también
va porque prefiere verlo en persona. Juan y María se pondrán inmediatamente a realizar unos bocetos
previos que cumplan con los requerimientos del cliente y le dirán a Antonio toda la
información que se deberá incluir en la guía de estilo. Antonio, los mira un poco perplejo, pensando:
"¿para qué una guía de estilo si son sólo dos páginas de nada?“
Ana que lo conoce muy bien le dice: "Antonio, piensa que este cliente el día de mañana nos puede pedir
una ampliación de su página y esa guía nos vendrá muy bien en ese momento. ¿No estas de acuerdo?"
Antonio le responde: "Como siempre, Ana, tienes razón. Estoy listo para empezar."

8. ANY DEVICE
All features can be
used with any device
HTML es el código que se utiliza para estructurar y
desplegar una página web y sus contenidos.
Las hojas de estilo en cascada (CSS) son un
estándar W3C
que define la presentación de los documentos
Web, es decir, el modo en el que se muestra

9. Las hojas de estilo en cascada
CSS
 Håkon Lie
 Publicó su primer borrador
en HTML.
 Bert Bos,
 Gran impulsor de este
estándar.
 CSS Nivel 2, Revisión 1
 Ajustes a CSS2
 CSS Nivel 3.
 Basada en módulos.
 Otras tecnologías XML
como:
 SVG,
 SMIL
 MATH ML

10. El CSS WG
CSS 4
CSS es el lenguaje de hoja de
estilos
con el cual estilas la página
para decirle a los navegadores que cambien:
 El color
 Tamaño
 Fuente
Los navegadores
Internet Explorer.
Mozilla Firefox.
Apple Safari
Google Chrome,
Opera
Microsoft Edge....
HTML es el lenguaje
de marcado con el que rodeas
contenido,
fue inventado por Tim Berners-Lee

11. Etiquetas HTML
Otras etiquetas de bloque
populares son:
1. Etiquetas de encabezado. Estas van desde <h1> a <h6>,
2. Etiquetas de párrafo.
3. Etiquetas de listas.
Usa la etiqueta <ol> para las listas ordenadas y
<ul> para las no ordenadas.
Todas las páginas HTML utilizan
estas tres :
1. La etiqueta <html> es el elemento raíz .
2. La etiqueta <head> contiene información meta.
3. La etiqueta <body> encierra todo el contenido.

12. Autoevaluación
¿Si quieres definir la
presentación de una
página web utilizas...?
 CSS
 XHTML
 Javascript.
 PHP

13. No es el conocimiento, sino el acto de
aprendizaje; y no la posesión, sino el acto de
llegar a ella, lo que concede el mayor disfrute.
CARL FRIEDRICH

14. Muchas gracias
¿Alguna pregunta, lo que sea?