Creación, programación y diseño de páginas web con HTML5 y CSS3. IFCT031PO

OBJETIVOS

- Diseñar, crear, programar páginas web con HTML5 y CSS3.
- Conocer los orígenes de la web, los fundamentos de la programación web y los estándares de los lenguajes de programación web.
- Conocer los conceptos básicos para comenzar a realizar operaciones con el lenguaje de programación JavaScript.
- Conocer y aplicar el uso de herramientas de JavaScript para crear programas más complejos, flexibles y estructurados.
- Aplicar los objetos para crear programas complejos y escalables.
- Conocer qué es una URL, para qué se utiliza y los objetos location e history que nos aportan propiedades y métodos para trabajar con la URL.
- Conocer las propiedades y métodos del objeto document para acceder al documento HTML.
- Conocer las propiedades y métodos del objeto form y la validación de formularios.
- Conocer el DOM, cómo acceder a sus elementos y manipular los atributos de estos.
- Manipular el árbol de documentos de un documento HTML, cambiando la estructura del documento y las propiedades de sus nodos en tiempo de ejecución.
- Comprender el uso de las etiquetas que construyen la estructura de un documento HTML y su semántica.
- Aplicar las etiquetas HTML5 a un sitio web para dotarlo de semántica y modificar el aspecto visual utilizando las hojas de estilos CSS.
- Utilizar los controles de formulario, sus atributos de configuración y comportamiento para el envío de datos al servidor.
- Crear vídeo y audio en HTML5 para aplicaciones web.
- Diseñar gráficos en canvas mediante HTML5 y su API de JavaScript.
- Utilizar las nuevas funcionalidades que CSS3 incorpora.
- Estructurar un sitio web, aplicar los eventos e identificar los navegadores donde se visualiza el sitio web.

CONTENIDOS

Introducción a la programación web
Introducción.
Introducción a la programación web:
     Acceder a un sitio web.
La evolución de la web.
Estándares web:
     La World Wide Web (www) antes de los estándares.
     Por qué debemos seguir contribuyendo a la mejora y el uso de los estándares web.
     Quién crea los estándares web.
     El proyecto de estándares web.
     Cómo se establecen los estándares web en la actualidad.
     Cómo utilizar los estándares web.
HTML5:
     La historia de HTML.
     Funcionamiento de HTML.
     Evolución y versiones de HTML.
     Características de HTML.
     Ventajas y desventajas de HTML.
CSS3:
     Versiones del CSS.
JavaScript:
     Historia.
     Qué puede hacer JavaScript en el navegador.
     Qué no puede realizar JavaScript en el navegador.
Resumen.

Fundamentos de JavaScript. Introducción a JavaScript
Introducción.
La etiqueta (script):
     Atributos de la etiqueta (script).
     Incluir la etiqueta script en un documento HTML.
Contenido alternativo.
Variables:
     Ámbito de las variables.
Tipos de datos.
Operadores.
Cuadros de diálogo.
Resumen.

Fundamentos de la programación
Introducción.
Estructuras de decisión:
     Condicional simple, condicional if.
     Condicional con alternativa, condicional if/else.
     Condicional múltiple.
     Condicional ternario.
     Condicional Switch.
Expresiones lógicas:
     AND
     OR
     NOT
Estructuras de repetición:
     for.
     while.
     do... while.
Definir funciones:
     Declarar una función.
     Llamar funciones.
     Parámetros.
     Devolución de valores.
Ámbito de las variables.
Resumen.

Objetos y arrays en JavaScript
Introducción.
Los objetos:
     Declarar un objeto.
La jerarquía de objetos.
Propiedades:
     Acceder a las propiedades.
     Función constructora.
Métodos:
     Llamar a un método.
     Captadores (getters) y establecedores (setters).
Arrays:
     Asignar valores a un array.
     Acceder a los elementos de un array.
     Iterar un array.
     Métodos de array.
     Array multidimensional.
Resumen.

Los objetos location e history
Introducción.
¿Qué es una URL?
     Estructura de una URL.
     URL absoluta, URL relativa.
El objeto location:
     Propiedades.
     Métodos.
El objeto history:
     Actualizando la dirección.
     State y popstate.
Resumen.

El objeto document
Introducción.
La propiedad title.
El método write:
     El método writeIn.
El conjunto imágenes.
Propiedades del objeto document.
Resumen.

El objeto form
Introducción.
Formularios HTML.
El conjunto de forms.
La propiedad elements.
Validar la información:
     ¿Cuándo realizar la validación?
     Tipos de validación.
     Validación JavaScript.
Otras propiedades y métodos.
Resumen.

Modelo de objetos del documento (dom)
Introducción.
El árbol del documento.
Tipos de nodos y relaciones.
Obtener elementos.
Obtener y establecer atributos.
Resumen.

Manipulación del dom
Introducción.
Recorrer el árbol del documento.
Modificar el valor de los nodos.
Crear, eliminar y reemplazar nodos:
     Crear nodo.
     Eliminar nodo.
     Reemplazar un nodo.
El método innerHTML.
Modificar el formato dinámicamente.
Resumen.

HTML
Introducción.
HTML5 Y CSS3:
     La estructura de las etiquetas.
     Los atributos de una etiqueta.
     Estructura HTML.
     HTML5.
     CSS3.
Elementos estructurales HTML5:
     El esquema del documento.
     Descripción de los elementos estructurales HTML5.
     Elementos de contenido.
     El atributo role.
     Tipos de atributos.
     Los comentarios.
     Doctype de HTML5.
Resumen.

Trabajando con esquemas HTML5
Introducción.
Aplicar elementos estructurales HTML5:
     El encabezado.
     La barra de navegación.
     El contenido principal.
     La barra lateral.
     El pie de página.
     Estructura completa.
Evitando elementos div:
     La divitis.
     Razones para no utilizar el elemento div.
     Cómo evitar el uso del elemento div.
     Nuevos elementos HTML5 para evitar el elemento div.
Elementos article anidados:
     Qué es la anidación.
     Anidando la etiqueta article.
Modificar las hojas de estilos en cascada:
     Inicios del CSS.
     Incluir estilos CSS.
     Sintaxis del documento CSS
Aplicar estilos a los elementos estructurales HTML5:
     Selectores.
     Unidades de medida.
     Colores y fondo.
     Texto.
     Listas.
     Tablas.
     Modelos de cajas.
     Pseudoclases y pseudoelementos.
     Posicionamiento del contenido.
     Otros.
Resumen.

Formularios HTML5
Introducción.
Funcionamiento de los formularios:
     Envío de información a los servidores.
     Funcionamiento de los formularios en el navegador.
Controles de formulario:
     Definición de un formulario y sus controles.
     Definición de los controles de formulario.
Atributos de formulario:
     Checkbox.
     Radiobutton.
     Botón de envío.
     Botón de reseteo.
     Ficheros adjuntos.
     Campos ocultos.
     Botón de imagen.
     Botón.
     Campos de texto.
     Listas desplegables.
Eventos de formulario.
Nuevos controles de formulario:
     Email
     Search
     Url
     Tel
     Number
     Range
     Date
     Month
     Week
     Time
     Datetime-local
     Color
Nuevos atributos:
     Placeholder.
     Autocomplete.
     Autofocus.
     Form.
     Formaction.
     Formentype.
     Formmethod.
     Formnovalidate.
     Formtarget.
     Height y width.
     List.
     Min y max.
     Multiple.
     Novalidate.
     Pattern.
     Required.
     Step.
Compatibilidad con navegadores antiguos.
Resumen.

Vídeo y audio en HTML5
Introducción.
Reproducción sin plugin.
La etiqueta (vídeo):
     Atributo src.
     Atributo width y height.
     Atributo controls.
     Atributo loop.
     Atributo poster.
     Atributo preload.
     Atributo mediagroup.
     Atributo autoplay.
     Atributo muted.
     Vídeo avanzado.
Formatos y códecs de vídeo:
     Formatos de vídeo.
La etiqueta (audio):
     Atributo src.
     Atributo autoplay.
     Atributo preload.
     Atributo controls.
     Atributo loop.
     Atributo muted.
     Atributo mediagroup.
     Etiqueta source.
Códecs de audio.
API multimedia:
     Propiedades del objeto multimedia.
     Métodos del objeto multimedia.
     Eventos para el objeto multimedia.
     Ejemplo de un reproductor de vídeo utilizando la API multimedia.
     Ejemplo de un reproductor de audio utilizando la API multimedia.
Resumen.

Dibujar con el elemento canvas
Introducción.
La etiqueta canvas.
Una interfaz de dibujo 2D.
Dibujar trazados.
Estilos de línea.
Dibujar rectángulos.
Dibujar texto.
Dibujar imágenes.
Colores de trazo y relleno.
Gradientes.
Patrones.
Resumen.

Introducción a CSS3
Introducción.
La evolución que representa CSS3.
Nuevos selectores CSS3:
     Prefijos para navegadores.
     Esquinas redondeadas y sombras.
Colores:
     Propiedad opacity.
     Propiedad rgba.
     Propiedad hsla.
Gradientes de colores:
     Tipos de degradado.
Incrustación de fuentes.
Dónde obtener fuentes.
Múltiples imágenes de fondo.
Transiciones.
Transformaciones.
Resumen.

Buenas prácticas
Introducción.
Separar la estructura del contenido.
Añadir los manejadores de eventos:
     Como atributo de elementos HTML.
     Como función externa.
     De forma semántica.
     El objeto event.
Detectar características de los navegadores.
Ejemplo: la estructura de una página.
Ejemplo: una galería fotográfica.
Ejemplo: el código JavaScript.
Resumen.