IFCT031PO. Creación, programación y diseño de páginas web con HTML5 y CSS3.
Horas: 210 Formato: HTML
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.
Descripción
- 1. 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.
- 2. 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.
- 3. 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.
- 5. 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.
- 6. 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.
- 7. 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.
- 8. 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.
- 9. Modelo de objetos del documento (dom)
Introducción.
El árbol del documento.
Tipos de nodos y relaciones.
Obtener elementos.
Obtener y establecer atributos.
Resumen. - 10. 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.
- 11. 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.
- 12. 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.
- 13. 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:
- 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.
- 14. 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.
- 15. 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.
- 16. 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.
- 17. 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.