Responsive Web Design con JQuery - 80 Horas

Duración:

80 Horas

Objetivos:

El objetivo general del curso es conseguir que el alumno sea capaz de realizar páginas web atractivas y cumpliendo con las premisas del Responsive Web Design utilizando HTML, hojas de estilo CSS, el lenguaje JavaScript y el framework JQuery.

Contenido

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
-