Descripción
Presentacion
HTML es el acrónimo de Hyper Text Markup Language, lenguaje de marcas de hipertexto. Existen diferentes versiones de HTML, el W3C es la organización responsable de crear las especificaciones de HTML. La última versión disponible es HTML5.
Este curso realiza un recorrido completo por los principales elementos disponibles en HTML5. Sus nuevas características, vídeo, audio, formularios web y canvas de HTML5 se desarrollan de tal forma que el alumno pueda aprender de forma sencilla y muy práctica para diseñar páginas web avanzadas siguiendo las nuevas tendencias.
El lenguaje CSS o hojas de estilo en cascada nos permite dar estilo a un documento de marcas por ejemplo realizado con HTML o XML. Con CSS podemos definir un estilo concreto para los elementos de nuestra página web.
CSS3 es la última versión disponible del lenguaje de marcas, que nos permite crear estilos específicos para nuestras páginas, y que combinado con lenguajes como JavaScript podremos aplicar efectos especiales para interactuar con los usuarios.
Este curso realiza un recorrido completo por los principales elementos disponibles en CCS3. Colores y texto, degradados, transformaciones, transiciones y animaciones son algunos de los elementos que se desarrollan de tal forma que el alumno pueda aprender de forma sencilla y muy práctica para diseñar páginas web siguiendo las nuevas tendencias utilizadas en hojas de estilo.
Temario
Programa
MODULO 1 - Programación con HTML5
UNIDAD 1 - HTML5
¿,Qué es HTML5?
La plantilla de HTML5
DOCTYPE
El elemento HTML
El elemento HEAD
El elemento body
El elemento meta
El elemento title
El elemento link
Funciona HTML5 en navegadores antiguos
Cierre de etiquetas en HTML5
Video ejercicio - HTML5
Autopráctica - Código fuente
Autopráctica - Crea una página web
Test - HTML5
UNIDAD 2 - Estructura de página HTML5
El esquema de documento
Elemento header
Elemento nav
Elemento section
Elemento aside
Elemento footer
Elemento article
Elemento Hgroup
Elemento figure
Elemento figcaption
Elemento mark
Elemento progress y meter
Elemento time
Elemento dialog
Elemento embed
Video ejercicio - Estructura de página HTML5
Autopráctica - Estructura de página HTML5
Autopráctica - Insertando contenido a la página
Test - Estructura página HTML5
UNIDAD 3 - Nuevas características
Elementos eliminados en HTML5
Atributos eliminados en HTML5
Elementos de bloque dentro de vínculos
Cambios en el texto
Negrita
Cursiva
Tamaño del texto
Elemento cite
Listas de descripción
Elemento details
Listas ordenadas personalizadas
Estilos con scoped
Video ejercicio - Nuevas características
Autopráctica - Realizando cambios
Autopráctica - Listas
Test - Nuevas características
UNIDAD 4 - Vídeo y Audio con HTML5
El video con HTML5 en los navegadores
Elemento video
Atributos del elemento video
Formatos de video
El atributo autoplay
El atributo loop
El atributo preload
El atributo poster
Elemento audio
Crear controles personalizados
Video ejercicio - Vídeo y Audio con HTML5
Autopráctica - Video y audio
Autopráctica - Atributos de Video
Test - Vídeo y Audio con HTML5
UNIDAD 5 - Formularios Web con HTML5: Atributos
El atributo required
El atributo autofocus
El atributo min
El atributo max
El atributo pattern
El atributo placeholder
El atributo step
El atributo accept
El atributo readonly
El atributo multiple
El atributo form
El atributo autocomplete
El atributo datalist
El atributo list
Video ejercicio - Formularios Web con HTML5: Atributos
Autopráctica - Formulario Web HTML5. Atributos
Autopráctica - Formulario Web HTML5. Atributos II
Test - Formularios Web con HTML5: Atributos
UNIDAD 6 - Formularios Web con HTML5: Elementos
Nuevas entradas de datos en formularios
El elemento output
El elemento keygen
El elemento form
El elemento optgroup
El elemento textarea
Video ejercicio - Formularios Web con HTML5: Elementos
Autopráctica - Formulario Web HTML5. Elementos
Autopráctica - Formulario Web HTML5. Elementos II
Test - Formularios Web con HTML5: Elementos
UNIDAD 7 - Canvas de HTML5
La etiqueta Canvas de HTML5
Para qué sirve Canvas
Preparando el lienzo
Canvas de HTML5 y JavaScript
Dibujo de figuras con Canvas de HTML5 I
Dibujo de líneas y combinación
Dibujo de líneas y combinación II
Dibujo de líneas y combinación III
Dibujo de líneas y combinación IV
Procesando imágenes
Video ejercicio - Canvas de HTML5
Autopráctica - elemento.rect
Autopráctica - Curvas bezier
Test - Canvas de HTML5
MODULO 2. HOJAS DE ESTILO CSS3
UNIDAD 1 - Introducción a CSS3
¿,Qué es CSS3?
Selectores CSS3
Selectores relacionales
Selectores de atributo
Pseudo-clases
Pseudo-clases estructurales
Pseudo-elementos y contenido generado
Contenido generado
Video ejercicio - Introducción a CSS3
Autopráctica - Selectores
Autopráctica - Pseudo-elementos
Test - Introducción a CSS3
UNIDAD 2 - Colores y texto en CSS3
Colores HSL
Colores HSLA
Colores RGBA
Opacidad
Text-shadow
Text-overflow
Rotura de palabras largas
Web Fonts
Border-Radius
Sombras
Video ejercicio - Colores y texto en CSS3
Autopráctica - Página web formulario
Autopráctica - Border-Radius y sombras
Test - Colores y texto en CSS3
UNIDAD 3 - Degradados en CSS3
Degradados lineales
Degradados radiales
Degradados lineales de repetición
Degradados radiales de repetición
Múltiples imágenes de fondo
Tamaño de fondo
Video ejercicio - Degradados en CSS3
Autopráctica - Creando degradados I
Autopráctica - Creando degradados II
Test - Degradados en CSS3
UNIDAD 4 - Transformaciones y Transiciones
Transiciones
Transition-property
Transition-duration
Transition-timing-function
Transition-delay
La propiedad abreviada transition
Múltiples transiciones
Transformaciones
Traslación
Escalar
Rotación
Inclinación
Cambiar el origen de la transformación
Video ejercicio - Transformaciones y Transiciones
Autopráctica - Estilos de transición
Autopráctica - Estilo de transformación
Test - Transformaciones y transiciones
UNIDAD 5 - Animaciones en CSS3
Animaciones
Fotogramas clave
Propiedad animation-name
Propiedad animation-duration
Propiedad animation-timing-function
Propiedad animation-iteration-count
Propiedad animation-direction
Propiedad animation-delay
Propiedad animation-fill-mode
Propiedad animation-play-state
Propiedad abreviada animation
Video ejercicio - Animaciones en CSS3
Autopráctica - Crear una animación I
Autopráctica - Crear una animación II
Test - Animaciones en CSS3
UNIDAD 6 - Fuentes y Diseño multicolumna en CSS3
Importar fuentes tipográficas mediante Font-face
Aplicar la fuente
Tipos de fuentes y navegadores
La propiedad column-count
La propiedad column-gap
La propiedad column-width
La propiedad abreviada columns
Columnas y la propiedad height
Propiedad column-rule
Salto de columna
Inserción de imágenes
Textos multicolumna
Video ejercicio - Fuentes y Diseño multicolumna en CSS3
Autopráctica - Texto multicolumnas
Autopráctica - Mofidicar un texto multicolumnas
Test - Fuentes y Diseño multicolumna en CSS3
