Curso de Responsive Web Design HTML5, CSS3, JavaScript, JQuery

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