CREACION PROGRAMACION Y DISEÑO DE PAGINAS WEB CON HTML5 Y CSS3

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.