Este curso brinda una introducción completa a la creación de sitios web responsivos con JQuery. Los estudiantes aprenderán cómo utilizar JQuery y sus complementos para construir sitios web que se ajusten y sean accesibles en diferentes dispositivos, como smartphones, tabletas y computadoras de escritorio. Además, explorarán las mejores prácticas y tendencias actuales en diseño responsivo para garantizar una experiencia de usuario óptima en todas las plataformas.
Objetivos:
- Comprender los conceptos de diseño web responsivo y cómo se implementan con JQuery
- Aprender a utilizar JQuery y complementos para crear sitios web responsivos
- Conocer las mejores prácticas y tendencias actuales en diseño responsivo
- Aprender a probar y depurar sitios web responsivos en diferentes dispositivos
- Desarrollar habilidades para crear sitios web atractivos, accesibles y eficientes en diferentes dispositivos con JQuery
Contenido:
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
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
UNIDAD.- Diagramas de flujo
- Diagramas de flujo
- Elementos de los diagramas de flujo
- Realizando diagramas de flujo
UNIDAD.- Pseudocódigo
- Pseudocódigo
- Escritura en pseudocódigo
- Creación de algoritmos
- Variables
- Constantes
- Tipos de Datos
- Operadores y expresiones
UNIDAD.- Elementos de un programa
- Instrucciones primitivas
- Instrucciones de asignación
- Instrucciones de entrada y salida
- Palabras reservadas
- Comentarios
- Contadores
- Acumuladores
- Interruptores
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
UNIDAD.- Estructuras de datos: Tablas
- Tablas unidimensionales
- Tablas bidimensionales
- Tablas multidimensionales
- Operaciones con tablas
UNIDAD.- Programación modular
- La programación modular
- Funciones
- Procedimientos
- Parámetros
- Paso de parámetros
- Ámbito de las variables
- Recursividad
UNIDAD.- Programación orientada a objetos
- La programación orientada a objetos
- Clases
- Objetos
- Relaciones entre clases
- Abastracción
- Encapsulamiento
- Herencia
- Polimorfismo
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
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
UNIDAD.- Web con responsive design
- Frameworks
- Booststrap
- Semantic
- Skeleton
- Less Framework
- Columnal
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
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
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
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
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
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
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
- Dibujo de líneas y combinación
- Procesando imágenes
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
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
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
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
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
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
- Columnas y la propiedad height
- Propiedad column-rule
- Salto de columna
- Inserción de imágenes
- Textos multicolumna
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
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
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
UNIDAD.- DOM
- Árbol de nodos
- Tipos de nodos
- Acceso directo a los nodos
- Creación y eliminación de nodos
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
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
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
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
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