CONSTRUCCIÓN DE PÁGINAS WEB (MF0950_2)

El presente curso de Construcción de páginas web busca aportar los conocimientos y habilidades necesarios para llevar a cabo la creación de páginas web. Ya que vivimos en una época con un mundo globalizado y con un gran auge tecnológico y digital. Por lo que en el mundo de la informática y las comunicaciones se hace importante conocer la construcción de páginas web.

Formación en Construcción de páginas web online

El perfil de profesional encargado de elaborar páginas web es cada vez más demandado por las empresas. Este curso de Construcción de páginas web impartido por los mejores profesionales del sector es para ti si eres una persona con inclinaciones hacia el mundo digital. O también si eres un emprendedor con la intención de aprender a elaborar tu propia web a nivel profesional.

A lo largo del temario el alumno aprenderá una gran variedad de conceptos de gran utilidad. Se hablará de los módulos de marcas para dar formato al documento, manejo de imágenes y elementos multimedia. Así como de las diferentes técnicas de accesibilidad y usabilidad, diseño, ubicación y optimización de los contenidos web, entre otros.

Este curso tiene una duración total de 210 horas, al término del cual se entregará a los alumnos partícipes un Certificado de Profesionalidad.

El lenguaje de marcas en la creación de páginas web

En este curso de construcción de páginas web entendemos el lenguaje de marcas como una forma de codificar un documento. Consiste en que junto con el texto, se incorporan etiquetas, marcas o anotaciones. Las cuales tienen información relacionada con la estructura del texto y su presentación.

Con este módulo formativo los alumnos sabrán identificar los elementos proporcionados por los lenguajes de marcas. Y también aprenderán a confeccionar páginas web con la utilización de estos lenguajes. Por otro lado, también se verá cómo identificar las características y funcionalidades de las herramientas de edición. Y cómo aplicarlas en la creación de páginas web teniendo en cuenta sus entornos de desarrollo.

Destacar también que el lenguaje de marcas más reconocido y utilizado hoy en día es el de HTML.

Características de los lenguajes de marca

• Texto plano

Al tratarse de archivos de texto plano esto supone una ventaja a este tipo de codificación, ya que puede ser interpretada directamente. Al contrario que los sistemas de archivos binarios, que necesitan un programa intermediario para trabajar con ellos.

• HTML

Estas siglas se corresponden con Hypertext Markup Language (Lenguaje de Marcas de Hipertexto). Como ya hemos mencionado, es el lenguaje de marcado más utilizado para la construcción de páginas web. Se usa para describir tanto estructura como contenido en forma de texto. Y también se puede usar para complementar el texto con imágenes. Su escritura se realiza en forma de etiquetas o marcas, rodeada de corchetes “<” y “>”.

• Utilización de etiquetas

Entendemos como etiqueta a una marca con clase que separa una región de otra en los lenguajes basados en XML. Estas etiquetas se encargan de indicar al navegador web de qué tipo es cada uno de los fragmentos de texto. Si se encuentran alineados, qué tipo de letra está en el texto, existencia de tablas, etc.

• Compatibilidad

El encargado de interpretar el código HTML de la página web visitada es el navegador. Por lo que se puede dar el caso de que dos usuarios al entrar a la misma página la visualicen de forma diferente en el caso de tener instalados navegadores diferentes. En general, los navegadores actuales buscan ser compatibles con la última versión de HTML. Para poder reconocer la mayor cantidad posible de etiquetas. Entre los retos de los diseñadores de páginas web se encuentra el de hacer las páginas web más atractivas aprovechando al máximo el lenguaje HTML.

• XHTML

Estas siglas vienen de eXtensible Hypertext Markup Language. Básicamente es HTML expresado como XML. Es más estricto a nivel técnico.

Editores de texto

Cualquier editor de texto puede utilizarse para generar el código HTML. Estos editores de HTML pueden ser de dos tipos:

• Editores de texto plano: permiten codificar las páginas utilizando el propio lenguaje HTML con el uso de etiquetas.
• Editores WYSIWYG (What you see is what you get; Lo que ves es lo que obtienes): Nos permiten diseñar una página web como si estuviésemos usando un procesador de textos. Aunque no se hace necesario escribir el código con las etiquetas.

Herramientas de edición Web

• Sublime Text

Se trata de un editor de texto y de código fuente. A pesar de que su distribución es gratuita no se trata de software libre o de código abierto.

• Dreamweaver

Es una aplicación en programa de estudio destinada a la construcción, diseño y edición de páginas y aplicaciones web. Es este uno de los programas más utilizados en el ámbito del diseño y la programación web. Una ventaja que presenta es su gran capacidad de ampliación y personalización. Esto hace que sea un programa muy fluido.

• Brackets

Es un editor gratuito de código abierto centrado en el desarrollo web. Está escrito en HTML, CSS y JavaScript.

Accesibilidad y usabilidad web en el entorno cliente

Accesibilidad Web

El alumno aprenderá que este concepto va enfocado a que los sitios web deben estar diseñados de manera que todos los usuarios puedan acceder en las mismas condiciones a los contenidos. Desarrollar sitios web accesibles conlleva una serie de ventajas:

• Incrementa el número de visitantes.
• Permite que los motores de búsqueda puedan identificar mejor el contenido. Por lo que así también mejorará el posicionamiento en los buscadores.
• Fomenta la no discriminación por discapacidad.
• La accesibilidad acompaña a la usabilidad. Facilitando la accesibilidad a una web se mejora la experiencia del usuario.

Usabilidad Web

Este término hace referencia a la claridad y elegancia con la que está diseñada la forma de interactuar con un sitio web. Otra definición se refiere a la usabilidad como el atributo de calidad que mide lo fáciles de usar que son las interfaces web.

Para diseñar un sitio con buena usabilidad habrá que tener en cuenta los siguientes aspectos:

• Pensar de que manera el usuario querría encontrar la información.
• Tener en mente las limitaciones del usuario.
• Diseñar el nivel de profundidad que presentaran los contenidos.
• Contar con un árbol de navegación atractivo.

Y las principales ventajas de la usabilidad serían:

• Mayor rapidez en la realización de tareas y reducción de las pérdidas de tiempo.
• Manejo web rápido e intuitivo.
• Disminución de los costes de ayuda al usuario.
• Aumento de la tasa de conversión de visitantes a clientes.
• Mejora de la imagen de la empresa.
• Optimización de los costes de diseño.

Los requisitos de acceso a certificados de profesionalidad de nivel 2 de cualificación profesional son:

a) Estar en posesión del Título de Graduado en ESO.

b) Estar en posesión de un certificado de profesionalidad del mismo nivel que el móduloo módulos formativos y/o certificado de profesionalidad al que se desea acceder.

c) Estar en posesión de un certificado de profesionalidad de nivel 1 de la misma familia yárea profesional.

d) Cumplir los requisitos de acceso al ciclo formativo de grado medio:1. Estar en posesión de un título de Técnico/a o de Técnico/a Auxiliar.

e) Tener superada la prueba de acceso a la Universidad:1. Mayores de 25 años. 2. Mayores de 45.

2. Tener superado el segundo curso de Bachillerato Unificado Polivalente (BUP).

3. Haber superado las correspondientes pruebas de acceso reguladas por las administraciones educativas (se requerirá tener, al menos, diecisiete años,cumplidos en el año de realización de la prueba).

Asignatura 1.  Creación de páginas web con el lenguaje de marcas.

Tema 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.
• Título.
• 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.

Tema 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.
• Los textos con movimiento.
• Utilización de las etiquetas para incluir marquesinas.
• Las marquesinas y los distintos navegadores.

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

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

Asignatura 2. Elaboración de hojas de estilo.

Tema 1. Hojas de estilo en la construcción de páginas web.

– Funciones y características.

• Descripción de estilos
• Utilización de estilos.
• Los estilos en el lenguaje de marcas.
• Los estilos con herramientas de edición web.

– Hojas de estilo y accesibilidad.

• Adecuación de las hojas de estilos.

– Tipos de estilo: incrustados, enlazados, importados, en línea.

• Descripción de los tipos de estilo.
• Enlazar una hoja de estilo externa a un documento HTML.
• Incrustar un estilo dentro de un documento HTML.
• Importar una hoja de estilo desde un documento HTML.
• Importar una hoja de estilo, a través de un archivo con estilos.
• Utilización y optimización de los tipos de estilos.

– Selectores y reglas de estilo.

• Estructura de los estilos.
• Sintaxis básica de estilos.
• Utilización de elementos y seudoelementos.
• Utilización de clases y seudoclases.

– Atributos de estilo para fuentes, color y fondo, texto y bloques (párrafos).

• Descripción de los atributos de estilo.
• Utilización de los atributos de estilo.

– Creación de ficheros de estilo.

• Definición de los ficheros de estilo.
• Creación de ficheros de estilo genéricos.
• Adaptación de los ficheros de estilo para distintas páginas web.

Tema 2. Diseño, ubicación y optimización de los contenidos de una página web.

– Creación de un documento funcional.

• Descripción de los objetivos de la página web.
• Definición de los elementos funcionales de la página web.
• Descripción de cada elemento.

– Diseño de los contenidos.

– Identificación de la información a ubicar en la página web.

– Selección de contenidos para cada elemento de la página.

– Utilización del documento funcional para las especificaciones del diseño.

– Tipos de página para la ubicación de contenidos.

– Definición de los tipos de página en base a los contenidos y funcionalidades.

– Selección de los tipos de página para la página web.

– Utilización del documento funcional para las especificaciones del tipo de página.

– Especificaciones de navegación.

– Creación de un mapa de navegación de páginas.

– Utilización del documento funcional para integrar el mapa de navegación.

– Elementos utilizados para la navegación.

• Definición de los elementos utilizados para navegar.
• Utilización del documento funcional para especificar los elementos de
• navegación.

– Elaboración de una guía de usuario.

Asignatura 3. Elaboración de plantillas y formularios. 

Tema 1. Formularios en la construcción de páginas web.

– Características.

• La interactividad de las páginas web.
• La variabilidad de los datos de la página web.
• El envío de información a servidores.

– Elementos y atributos de formulario.

• Descripción y definición de los elementos de un formulario.
• Utilización de campos y textos.
• Etiquetas de los formularios.
• Tamaños, columnas y filas de los formularios.

– Controles de formulario.

• Descripción de los controles de los formularios.
• Utilización de botones de acción.
• Utilización de lista desplegables.
• Utilización de casillas de verificación.
• Utilización de campos de textos.

– Formularios y eventos. Criterios de accesibilidad y usabilidad en el diseño de formularios.

• Agrupación de datos.
• Adecuación del tamaño del formulario (división en distintas páginas).
• Identificación de los campos obligatorios.
• Ordenación lógica de la petición de datos.
• Información correcta al usuario.
• Utilización de páginas de error y de confirmación.

Tema 2. Plantillas en la construcción de páginas web.

– Funciones y características.

• Descripción de una plantilla web.
• Elementos de una plantilla web.
• Estructura y organización de los elementos de las plantillas.
• Especificar las zonas modificables de una plantilla y las partes fijas.
• Utilización de plantillas.

– Campos editables y no editables.

• Definir y crear los campos susceptibles de cambios en una plantilla.
• Definir y crear los campos no modificables en una plantilla.

– Aplicar plantillas a páginas web.

• Las plantillas en la web.
• Búsqueda de plantillas en la red.
• Adaptación de plantillas a páginas web.