Responsive Web Design con JQuery

MÓDULO I: Fundamentos de programación

UNIDAD.- Algoritmos y programas
- ¿Qué es un algoritmo?
- Programas y Aplicaciones
- Lenguajes de programación
- Traductores e intérpretes
- Compiladores
- Videoejercicio 1
- Autopráctica - Algoritmos y programas
- Autopráctica - Algoritmos y programas II
- Test - Algoritmos y programas

UNIDAD.- Tipos de programación
- Fases del ciclo de vida de una aplicación
- Programación desordenada
- Programación estructurada
- Programación modular
- Programación orientada a objetos
- Autopráctica - Ciclo de vida de una aplicación
- Autopráctica - Tipos de programación
- Test - Tipos de programación

UNIDAD.- Diagramas de flujo
- Diagramas de flujo
- Elementos de los diagramas de flujo
- Realizando diagramas de flujo
- Videoejercicio 1
- Videoejercicio 2
- Autopráctica - Diagramas de flujo
- Autopráctica - Diagramas de flujo II
- Test - Diagrama de flujo

UNIDAD.- Pseudocódigo
- Pseudocódigo
- Escritura en pseudocódigo
- Creación de algoritmos
- Variables
- Constantes
- Tipos de Datos
- Operadores y expresiones
- Videoejercicio 1
- Autopráctica - Pseudocódigo
- Autopráctica - Pseudocódigo II
- Test - Pseudocódigo

UNIDAD.- Elementos de un programa
- Instrucciones primitivas
- Instrucciones de asignación
- Instrucciones de entrada y salida
- Palabras reservadas
- Comentarios
- Contadores
- Acumuladores
- Interruptores
- Videoejercicio 1
- Videoejercicio 2
- Autopráctica - Elementos de un programa
- Autopráctica - Elementos de un programa II
- Test - Elementos de un programa

UNIDAD.- Estructuras de control
- Estructuras de control
- Alternativa simple
- Alternativa doble
- Alternativa múltiple
- Estructura mientras
- Estructura repetir
- Estructura para o desde
- Estructuras selectivas anidadas
- Estructuras repetitivas anidadas
- Videoejercicio 1
- Videoejercicio 2
- Autopráctica - Estructuras de control
- Autopráctica - Estructuras de control II
- Test - Estructuras de control

UNIDAD.- Estructuras de datos: Tablas
- Tablas unidimensionales
- Tablas bidimensionales
- Tablas multidimensionales
- Operaciones con tablas
- Videoejercicio 1
- Videoejercicio 2
- Autopráctica - Tablas
- Autopráctica - Tablas II
- Test - Estructuras de datos: Tablas

UNIDAD.- Programación modular
- La programación modular
- Funciones
- Procedimientos
- Parámetros
- Paso de parámetros
- Ámbito de las variables
- Recursividad
- Videoejercicio 1
- Videoejercicio 2
- Autopráctica - Programación modular
- Autopráctica - Programación modular II
- Test - Programación modular

UNIDAD.- Programación orientada a objetos
- La programación orientada a objetos
- Clases
- Objetos
- Relaciones entre clases
- Abastracción
- Encapsulamiento
- Herencia
- Polimorfismo
- Videoejercicio 1
- Autopráctica - Programación orientada a objetos
- Autopráctica - Programación orientada a objetos II
- Test - Programación orientada a objetos

MÓDULO II: Responsive Web Design

UNIDAD.- Reponsive Web Design
- ¿Qué es Responsive Web Design?
- Características del Responsive Web Design
- Ventajas e inconvenientes
- Crear un diseño adaptable: CSS
- Ejemplo de una página web con diseño Responsive Web Design
- Ejemplo de una página web sin diseño Responsive Web Design
- Cómo comprobar el diseño de tu página Web
- CSS: Medias Queries
- Mobile first
- Patrones de diseño adaptivo
- Diseñar para varios dispositivos en papel
- Plantillas para diseñar
- Navegadores que soportan Responsive Web Design
- Video Ejercicio - Reponsive Web Design
- Autopráctica - Opera mobile emulator
- Autopráctica - Responsive web Design
- Test - Responsive Web Design

UNIDAD.- Creando un diseño adaptable
- Cómo comenzar a diseñar
- Cómo crear un diseño adaptable
- El HTML de mi diseño adaptable
- Meta tags
- El CSS de mi diseño adaptable
- Medias Queries
- Diseño web fluido
- Cálculo de porcentajes
- Fuentes flexibles
- Imágenes flexibles
- Resize Windows
- Video Ejercicio - Creando un diseño adaptable
- Autopráctica - Creando un diseño adaptable
- Autopráctica - Creando un diseño adaptable II
- Test - Creando un diseño adaptable

UNIDAD.- Web con responsive design
- Frameworks
- Booststrap
- Booststrap II
- Semantic
- Semantic II
- Skeleton
- Skeleton II
- Less Framework
- Less Framework II
- Columnal
- Video ejercicio - Web con responsive design
- Autopráctica - Patrón de diseño columnal
- Autopráctica - Patrón de diseño bootstrap
- Test - Web con responsive design

MÓDULO III: Programación con HTML5

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

MÓDULO IV: Hojas de Estilo CSS3

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

MÓDULO V: Programación con Javascript

UNIDAD.- JavaScript
- ¿Qué es JavaScript?
- Integrar JavaScript en una página web
- Primer programa en JavaScript
- Instrucciones
- Tipos de datos
- Literales
- Conversión de tipos
- Operadores
- Uso de variables
- Trabajo con variables
- Comentarios en JavaScript
- Sentencia if
- Sentencia switch-case
- Bucle while
- Bucle do-while
- Bucle for
- Sentencia break y continue
- Matrices
- Video ejercicio - JavaScript
- Autopráctica - Estructura if
- Autopráctica - Uso de variables y sentencia if
- Test - JavaScript

UNIDAD.- Funciones JavaScript
- Declaración de funciones
- Definición de Parámetros
- Valores de retorno
- Ámbito de las variables
- Función Number
- Función String
- Función isNaN
- Función isFinite
- Función parseInt
- Función parseFloat
- Función escape
- Función unescape
- Función eva
- Video ejercicio - Funciones JavaScript
- Autopráctica - Función parseInt
- Autopráctica - Función par o impar
- Test - Funciones JavaScript

UNIDAD.- Objetos de JavaScript
- Objeto envoltorio
- Objeto Array
- Objeto Date
- Objeto Math
- Objeto RegExp
- Objetos del navegador
- Objeto Window
- Objeto navigator
- Objeto screen
- Objeto history
- Objeto location
- Objeto document
- Objeto anchor
- Objeto link
- Objeto image
- Video ejercicio - Objetos de JavaScript
- Autopráctica - Función palíndromo
- Autopráctica - Función de nueva página web
- Test - Objetos de JavaScript

UNIDAD.- DOM
- Árbol de nodos
- Tipos de nodos
- Acceso directo a los nodos
- Creación y eliminación de nodos
- Video ejercicio - DOM
- Autopráctica - Utilizando las funciones DOM
- Autopráctica - getElementById
- Test - DOM

UNIDAD.- Trabajar con JavaScript y CSS
- DOM para CSS
- Atributo Style
- Manipular clases de CSS
- Manipular reglas de CSS
- Manipular hojas de estilo
- Activar y desactivar hojas de estilo
- Incluir o importar hojas de estilo
- Embeber hojas de estilo
- Video ejercicio - Trabajar con JavaScript y CSS
- Autopráctica - El atributo style
- Autopráctica - Cambio de regla del contenedor
- Test - Trabajar con JavaScript y CSS

UNIDAD.- Eventos
- Eventos en JavaScript
- Eventos en una página HTML
- Trabajar con eventos
- Manejadores como atributos HTML
- Trabajar con eventos en JavaScript
- El objeto event
- Propiedades
- Video ejercicio - Eventos
- Autopráctica - onmouseover y onmouseout
- Autopráctica - onmousemove
- Test - Eventos

UNIDAD.- Formularios en JavaScript
- Definir formulario
- Cabecera del formulario
- Elementos del formulario
- Eventos de formulario
- Submit
- Focus
- Blur
- Click
- Change
- Enfoque de un campo
- Deshabilitar campos de un formulario
- Ocultar campos de un formulario
- Validación de formularios
- Añadir reglas de validación
- Mensajes de error avanzados
- Validación básica
- Validación avanzada
- Validación de casillas de selección y botones de opción
- Dar formato a los mensajes de error
- Video ejercicio - Formularios en JavaScript
- Autopráctica - Elementos de tipo checkbox
- Autopráctica - Crea un formulario
- Test - Formularios en JavaScript

MÓDULO VI: Programación con JQuery

UNIDAD.- JQuery
- ¿Qué es JQuery?
- Añadir JQuery a una página HTML
- Selección de elementos
- Comprobar selecciones
- Selección de elementos de un formulario
- Trabajar con selecciones
- Utilizar clases para aplicar estilos CSS
- Dimensiones
- Atributos
- Recorrer el DOM
- Manipulación de elementos
- Crear nuevos elementos
- Manipular atributos
- Video ejercicio - JQuery
- Autopráctica - Creando una función JQuery
- Autopráctica - Métodos hide y show
- Test - JQuery

UNIDAD.- Eventos y efectos con JQuery
- ¿Qué es un evento?
- Eventos de ratón
- Eventos de documento/ventana
- Eventos de formulario
- Eventos de teclado
- Utilizar eventos con JQuery
- Carga del código HTML
- Eventos de JQuery
- El objeto evento
- Detener el comportamiento normal de un evento
- Eliminar eventos
- Gestión avanzada de eventos
- Mostrar y ocultar efectos
- Hacer aparecer y desaparecer elementos
- Deslizar elementos
- Video ejercicio - Eventos y efectos con JQuery
- Autopráctica - Efecto de movimiento
- Autopráctica - Generar un número aleatorio
- Test - Eventos y efectos con JQuery