Diseño Web Responsivo (HTML5 + CSS3 + Bootstrap)

  • Nivel del curso: Principiante
  • Categorías Desarrollo Web
  • Duración 24h
  • Última actualización 7 junio, 2022

Acerca de este curso

El diseño web responsivo (RWD) es un enfoque de diseño web orientado a la creación de sitios para proporcionar una experiencia de visualización e interacción óptima, proporcionando una fácil lectura y navegación con un redimensionamiento y desplazamiento mínimos, y todo esto en una amplia gama de dispositivos desde el escritorio hasta dispositivos móviles. El diseño web es cada vez más importante ya que la cantidad de tráfico móvil ahora representa más de la mitad del tráfico total de Internet. Este curso le brindará un conocimiento profundo sobre los conceptos del diseño web responsivo con HTML5., CSS3 y Bootstrap.

Descripción

> Módulo 1: INTRODUCCIÓN AL DISEÑO WEB RESPONSIVO 

Explorando cómo funciona RWD

Entendiendo los elementos de RWD

Apreciando la importancia de RWD

Comparando RWD con diseño adaptativo

Preparando nuestro entorno de desarrollo.

Teniendo en cuenta una estrategia adecuada.

Explorando las mejores prácticas

Configuración de un flujo de trabajo de desarrollo

Explorando errores comunes

 

> Módulo 2: HTML5 PARA DISEÑOS WEB RESPONSIVOS

Comenzando una página HTML5 de la manera correcta para RWD

Nuevos elementos semánticos en HTML5.

Características HTML obsoletas e inutilizables en RWD

Incrustar medios en HTML5

Introducción a multimedia responsivo y iframes

Una técnica importante: ‘offline primero’

 

> MÓDULO 3: CSS3, NUEVAS CARACTERÍSTICAS Y RWD

Conceptos básicos de CSS (posición, márgenes, padding y más)

Sombras, bordes redondeados y tipografía personalizada

Animaciones y Transformaciones

Manipulación de gradientes, backgrounds múltiples y parallax

Cuáles características CSS3 sí y cuáles no recomendable usar en RWD 

 

> Módulo 4: CREANDO DISEÑOS FLUIDOS

Presentación de diseños de grids flexibles

Entendiendo los diferentes tipos de diseño

Configuración de la ventana gráfica disponible para su uso

Explorando los beneficios de los diseños de grid flexibles

Entendiendo la mecánica de los diseños de grids.

Implementando un diseño de grid pre-construido

Explorando el uso de flexbox

 

> Módulo 5: AGREGAR ELEMENTOS MULTIMEDIA RESPONSIVOS

Hacer que los medios respondan

Hacer que el video sea responsivo

Hacer que el texto se ajuste a la pantalla

 

> Módulo 4: EXPLORANDO MEDIA QUERIES CON CSS3

Entendiendo los media queries

Identificando puntos de ruptura comunes

Creando algunos ejemplos prácticos.

Examinando algunos errores comunes

Explorando las mejores prácticas

 

> Módulo 5: PRUEBAS Y OPTIMIZACIÓN DEL RENDIMIENTO

Entendiendo la importancia de la velocidad.

Comprender por qué las páginas se cargan lentamente

Optimizando el rendimiento

Probando el rendimiento de nuestro sitio.

Mejores prácticas

Proporcionar soporte para navegadores antiguos

Teniendo en cuenta la compatibilidad entre navegadores

 

> Módulo 6: TRABAJANDO CON CANVAS, SVG, GEOLOCALIZACIÓN Y ALMACENAMIENTO LOCAL

Conociendo el API de Canvas

Conociendo cómo trabaja SVG

Animación con Canvas y SVG

Uso de API para geolocalización

Uso de LocalStorage y SessionStorage

 

> Módulo 7: ENRIQUECIENDO TUS DISEÑOS WEB RESPONSIVOS CON BOOTSTRAP

Lo que Bootstrap 4 tiene para ofrecer

Configurando un nuevo proyecto

El sistema de grid de Bootstrap

Elementos de imagen

Utilidades responsivas

 

> Módulo 8. CONSTRUYENDO UN DISEÑO WEB RESPONSIVO CON BOOTSTRAP

Creando secciones

Añadiendo componentes de Bootstrap

Navegación, encabezados de página, pies de página, alertas y contenido

Iconos

Creando y personalizando formularios.

Validación de formularios

Indicadores de progreso

Añadiendo contenido usando objetos multimedia

Group Lists, Accordeons y elementos colapsables

 

> Módulo 9. ACELERAR EL DESARROLLO UTILIZANDO COMPLEMENTOS DE TERCEROS y BOOTSTRAP

Paginación mejorada usando bootpag

Viendo imágenes usando Bootstrap Lightbox

Mejorando una lista con DataTables

Typeahead

Popovers

 

> Módulo 10. PERSONALIZANDO TUS COMPLEMENTOS BOOTSTRAP

Anatomía de un plugin

Personalizando complementos

Escribiendo un plugin personalizado de Bootstrap

¿Qué aprenderé?

  • Crear proyectos Web Responsivos, con todo el poder de HTML5, CSS3 y Bootstrap.
  • Explorar varias opciones y técnicas disponibles en diseño web responsivo
  • Comprender lo que se puede lograr en el navegador, sin el uso de herramientas de terceros
  • Ejecutar media queries que respondan a condiciones distintas del browser del usuario.
  • Mejorar el rendimiento del diseño web responsivo
  • Mantener la compatibilidad de sus diseños web responsivos en los navegadores
  • Comprender los fundamentos de Bootstrap e implementarlo enriqueciendo proyectos Web
$4,408.00

Materiales incluidos

  • Material de apoyo digital
  • Certificado de finalización
  • Grabación de las clases en vivo
  • NFT de finalización del curso (próximamente)

Requisitos

  • Computadora con sistema operativo Windows, Mac o Linux
  • Conexión estable a internet
  • Cámara y micrófono
  • Actitud de participación

Audiencia objetivo

  • Programadores, Diseñadores, y Público en general, que desean aprender a implementar la capacidad de respuesta del diseño y desarrollo web, ante los distintos dispositivos, perfiles y navegadores disponibles hoy en día , y convertirse en expertos creando diseños web responsivos.
  • ¿AÚN TE QUEDAN DUDAS? CONSULTA NUESTRA SECCIÓN DE PREGUNTAS FRECUENTES .
  • ¿BUSCAS COTIZAR ESTE CURSO PARA CAPACITAR A TU EMPRESA U ORGANIZACIÓN? CONTÁCTANOS .