RESPONSIVE WEB DESIGN CON JQUERY

Hoy en día Internet es una de las formas de comunicarnos más importantes. La red se ha extendido por todo el mundo y son millones los usuarios que navegan cada día por ella, existiendo miles de páginas web que dan servicio a estos usuarios.

Los sitios web ofrecen a los usuarios temáticas muy diferentes, sitios web de compra, páginas de juegos on-line, formación on-line, web de contenidos como videos, material, un sinfín de opciones con todo aquello que podamos imaginar. Existiendo esta gran cantidad de páginas web es necesario para atraer a los posibles visitantes que sean lo más atractivas posibles.

Para diseñar páginas web atractivas debemos usar HTML que es el lenguaje de marcas diseñado para tal efecto, las hojas de estilo CSS nos permiten crear estilos específicos para nuestras páginas, que combinado con lenguajes como JavaScript nos permiten aplicar efectos especiales para interactuar con los usuarios.

Este curso está desarrollado de tal forma que el alumno pueda aprender de forma sencilla y muy práctica como diseñar páginas web avanzadas siguiendo las nuevas tendencias como Responsive Web Desing.

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