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.

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