Curso de HTML5, CSS3 + JQuery

Introducción

• La creación de sitios Web
• Los lenguajes
• La evolución del HTML
• La evolución del CSS

La nueva sintaxis HTML5

• El doctype
• El documento HTML
• La codificación de caracteres
• Los scripts
• Los estilos CSS
• La sintaxis de los elementos
• Los elementos obsoletos
• Los elementos redefinidos
• Los atributos obsoletos
• Nuevos elementos
• Tipos de contenido de los elementos
• La visualización de los elementos

Los elementos de la estructura en HTML5

• Los elementos de la estructura en HTML 4
• Los elementos de la estructura en HTML5
• El atributo semántico “role”
• Ejemplos de estructura en HTML5
• Técnicas de formato

Plantillas web en HTML5

• Plantillas para sitios web en HTML5
• WordPress y las plantillas HTML5
• Joomla y las plantillas HTML5

El camino hacia el CSS3

• Análisis de la situación
• Los prefijos para los navegadores
• Cómo interpretan los navegadores el CSS3

Los nuevos selectores de CSS3

• Los selectores
• Los nuevos selectores CSS3
• El selector general de elementos adyacentes
• El selector de atributo
• La pseudo-clase de vínculo
• Las pseudo-clases estructurales

Los estilos de caja en CSS3

• Las nuevas propiedades CSS3
• El tamaño de las cajas
• El desbordamiento de contenido
• Los colores de fondo
• Situación actual de fondos y bordes
• Los bordes redondeados
• Los bordes imaginativos
• Las sombras
• Los degradados
• Los fondos múltiples
• Otras propiedades del fondo
• Los generadores CSS3 en línea
• Ejemplo de una tabla con bordes redondeados
• Ejemplo de sombra para una página

HTML5 y CSS3 aplicado al texto

• Los elementos de texto obsoletos
• Los elementos de texto redefinidos
• Nuevos formatos para el texto
• Las fuentes tipográficas
• El tamaño de las tipografías
• Textos con sombra
• La tipografía avanzada

HTML5 y CSS3 para los formularios

• Funcionalidad
• Los métodos de envío
• El elemento
• Los nuevos campos
• La validación de los formularios
• Las expresiones regulares
• Las ayudas para los usuarios de un formulario
• Las pseudo-clases para los formularios
• La validación de los datos introducidos
• Crear botones con símbolos
• Los generadores de botones en línea

Las transformaciones CSS3

• Situación actual y objetivos
• La transformación
• El desplazamiento
• El cambio de escala
• La rotación
• La deformación
• Aplicar todas las transformaciones
• Los generadores en línea

Las transiciones con CSS3

• Situación actual y objetivos
• Aplicar transiciones
• Aplicar una transición de desplazamiento
• Otras propiedades de las transiciones
• Los generadores en línea

Las animaciones en CSS3

• La creación de una animación
• Un desplazamiento simple
• Rotación y transparencia
• Un formulario que parpadee
• Una ventana modal

Los elementos multimedia: audio y vídeo

• Insertar audio
• Insertar vídeo

El elemento de diseño Canvas

• La creación de imágenes bitmap con JavaScript
• Las técnicas propuestas
• Dibujar un rectángulo
• Dibujar un círculo
• Trazar rayas
• Trazar bordes
• Añadir texto
• Aplicar un degradado
• Las transformaciones
• La manipulación de objetos

Primeros pasos con jQuery

• El regreso de JavaScript
• Presentación de jQuery
• Los puntos fuertes de jQuery
• Aplicación de jQuery
• Iniciar un script jQuery
• La primera aplicación jQuery
• La documentación de jQuery
• Herramientas de desarrollo y de depuración

Los selectores en jQuery

• Introducción
• Los selectores básicos
• Los selectores jerárquicos
• Los filtros jQuery básicos
• Los filtros hijos
• Los filtros de contenido
• Los filtros de visibilidad
• Los filtros de atributo
• Los selectores y filtros de formularios
• Los selectores y los caracteres especiales

Trabajar con los atributos

• Introducción
• Añadir o eliminar una clase
• Comprobar la presencia de una clase
• Cambiar entre dos clases
• Conocer el valor de un atributo
• Añadir un atributo y su valor
• Añadir varios atributos y sus valores
• Eliminar un atributo
• Conocer el atributo value
• Modificar el atributo value

Trabajar con las hojas de estilo CSS

• Introducción
• Acceder a una propiedad de estilo
• Modificar las propiedades de estilo
• Asignar las propiedades de estilo
• El dimensionamiento
• El posicionamiento
• Aplicaciones

Los eventos

• Introducción
• Los administradores de eventos
• Métodos o administradores de eventos avanzados
• Métodos propios de jQuery
• Aplicaciones

Los efectos

• Introducción
• Mostrar y ocultar
• Desplazar verticalmente
• Hacer un efecto de fundido
• Cambiar de un efecto a otro
• Retrasar un efecto
• Crear una animación

Recorrer el DOM

• Introducción
• Encontrar los hijos
• Encontrar los padres directos
• Encontrar todos los padres
• Encontrar los padres hasta
• Encontrar los hermanos
• Encontrar el hermano anterior
• Encontrar los hermanos anteriores
• Encontrar los hermanos anteriores hasta
• Encontrar el hermano siguiente
• Encontrar los hermanos siguientes
• Encontrar los hermanos siguientes hasta
• Encontrar el contenido
• Encontrar determinados padres
• Encontrar determinados descendientes
• Añadir elementos a la selección
• Una lupa para agrandar las viñetas

Trabajar con el DOM

• Introducción
• Modificar el contenido
• Insertar en el interior
• Insertar en el exterior
• Rodear un elemento
• Sustituir un elemento
• Eliminar un elemento
• Copiar un elemento
• Algunas aplicaciones

Filtrar el DOM

• Introducción
• El filtrado de los elementos del DOM
• Encontrar un elemento concreto
• Encontrar una secuencia de elementos
• Encontrar un elemento según un criterio
• Reducir al primer elemento
• Reducir al último elemento
• Reducir a un elemento concreto
• Eliminar un elemento
• Formar una tabla (Array) de elementos
• Aplicaciones

AJAX en jQuery

• Introducción
• Las consultas AJAX abreviadas
• La consulta AJAX completa
• Definir una consulta por defecto
• Los eventos asociados a la consulta
• Las funciones diferidas
• Serializar los datos
• Aplicaciones

Algunas utilidades

• Introducción
• Detectar el navegador
• Evitar los conflictos
• Iteraciones en jQuery

Los formularios

• Introducción
• Los selectores de formularios
• Los filtros de selección
• Aplicaciones

Los plug-insjQuery

• Introducción
• Diseñar un plug-in jQuery
• Usar un plug-in jQuery
• Algunos plug-ins
1. Mensajes de alerta
2. Bordes redondeados y variados
3. Añadir un sombreado
4. Arrastrar/soltar (drag and drop)
5. Redimensionar las capas
6. Un carrusel de imagines
7. Un menú de tipo Mac
8. La validación de formularios
9. Gráficos a partir de una tabla
10. Ordenar una tabla de datos

jQuery con HTML 5 y CSS 3

• jQuery y HTML 5
• Cuándo utilizar jQuery
• Cuándo utilizar HTML 5
• Cuándo utilizar jQuery con HTML 5