Responsive Web Design HTML5 – CSS3 – JavaScript- JQuery

720,00

Duración: 96 horas ONLINE  |  Ref (2083)
Consulte becas o como hacer el curso sin coste.

ID CURSO:

2083
MODALIDAD:

ONLINE
FAMILIA:

186
HORAS:

96 horas
INICIO:

INMEDIATO
DURACIÓN:

Aprox.
21 semanas
SKU: 2083 Categoría:
 

MÓDULO I: FUNDAMENTOS DE PROGRAMACIÓN

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

Profesionales del diseño WEB y a todas aquellas personas que sienten interés por empezar a diseñar webs multidispositivo.

Descripción

MÓDULO I: FUNDAMENTOS DE PROGRAMACIÓN

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

Información adicional

Modalidad

online

Tipo formación

Curso online

Valoraciones

No hay valoraciones aún.

Sé el primero en valorar “Responsive Web Design HTML5 – CSS3 – JavaScript- JQuery”

    Para enviarte información sobre este curso, por favor, rellena los siguientes datos:

    Nombre (requerido)

    Teléfono: (requerido)

    Correo electrónico: (requerido)

    Acepto la Política de privacidad