Curso FUNDAMENTOS DE BOOTSTRAP

Network Faculty badge
O
Acceso a todos los cursos

Usando una suscripción ANUAL

Duración.

¡+12 Horas!

Autores.

Juan Paredes

Este curso está diseñado para introducir aspectos básicos necesarios para el diseño y construcción de páginas web con Bootstrap, ilustrando el uso de clases CSS, componentes y agregados provistos por este framework para definir diferentes elementos de uso común en sitios web, sobre la base de mejores prácticas compiladas por sus desarrolladores originales en Twitter, y luego por una amplia comunidad de usuarios, que lo ha convertido en una de las capas más populares en el "stack" de tecnologías para desarrollar portales, sitios y aplicaciones web modernos y adaptables.

En los vídeos que conforman este curso, encontrarás material y ejemplos prácticos para utilizar Bootstrap de manera eficiente como base para el diseño de una página web sobre los fundamentos de HTML5 / CSS3 y JavaScript. Cubrimos cómo incluir Bootstrap en tu sitio, cómo personalizar el aspecto de diversos elementos HTML, incluyendo tablas, formularios, botones y tipografía, así como el uso de la cuadrícula o "grid" para estructurar la composición de diversas secciones de contenido. Luego avanzamos al uso de componentes visuales comunes, como menús desplegables, barras de navegación, paneles y etiquetas, hasta el uso de agregados con JavaScript para incorporar elementos compuestos como carruseles, plegables, ayudas visuales o pestañas. Mostraremos también cómo reutilizar y personalizar plantillas y temas desarrollados para Bootstrap. Hacemos énfasis en la aplicación de mejores prácticas modernas en la web, incluyendo la compatibilidad con tecnologías de accesibilidad, así como el diseño adaptable a dispositivos, desde móviles o tablets hasta grandes pantallas de escritorio.

Al finalizar el curso, contarás con conocimientos necesarios para implementar el diseño de una página, portal, sitio o aplicación web con Bootstrap, logrando un aspecto consistente, moderno y adaptable.
Cargando video...

BOOTSTRAP - FUNDAMENTOS

Vídeos de conceptos iniciales, de nuestro curso de fundamentos de bootstrap

  • BOOTSTRAP - INTRODUCCION AL CURSO (02:45)

    Breve introducción al curso de fundamentos de Bootstrap, alcance y requisitos.

  • BOOTSTRAP - INTRODUCCION (15:24)

    En esta sesión, introducimos el framework Bootstrap con algunos ejemplos y características resaltantes.

  • BOOTSTRAP - ESTRUCTURA DE ARCHIVOS Y PLANTILLAS (12:00)

    En esta sesión ilustramos la estructura de directorios local de Bootstrap en un sitio o página web, y cómo incluirlo en una plantilla básica de HTML5.

  • BOOTSTRAP - CUADRICULAS - GRIDS (01:02:00)

    En esta sesión mostramos el uso del sistema de cuadrícula (grid) en Bootstrap incluyendo cómo personalizar la cuadrícula según el dispositivo para móviles, tablets, escritorios o pantallas grandes.

  • BOOTSTRAP - TIPOGRAFIA (40:00)

    En esta sesión ilustramos la personalización del aspecto de diferentes elementos tipográficos en una página web usando las clases de Bootstrap.

  • BOOTSTRAP - TABLAS (22:46)

    En esta sesión mostramos ejemplos del uso de diferentes clases CSS incluidas en Bootstrap para definir estilos de tablas.

  • BOOTSTRAP - FORMULARIOS (46:00)

    En esta sesión ilustramos cómo personalizar el aspecto de formularios y varios de sus controles comunes con las clases CSS de Bootstrap, haciendo énfasis en la usabilidad y accesibilidad.

  • BOOTSTRAP - BOTONES (22:30)

    Detallamos cómo incluir botones con las clases de Bootstrap, y cómo dar aspecto de botones a enlaces en caso de ser necesario para una interfaz de usuario consistente.

  • BOOTSTRAP - IMAGENES - ICONOS (45:00)

    En esta sesión ilustramos la inclusión de imágenes con clases CSS de Bootstrap para personalizar su apariencia y forma, haciéndolas adaptables al dispositivo. También mostramos el uso de fuentes de íconos vectoriales, tanto la denominada "glyphicons" incluida en Bootstrap como la de "Font-Awesome".

  • BOOTSTRAP - CLASES UTILITARIAS (32:40)

    En esta sesión mostramos el uso de varias clases utilitarias de CSS en Bootstrap que podemos aplicar a diversos tipos de elementos, incluyendo colores de contexto, alineación y visibilidad de contenido según el dispositivo.

BOOTSTRAP - COMPONENTES

Vídeos de componentes, de nuestro curso de fundamentos de bootstrap

BOOTSTRAP - PLUGINS

Vídeos de plugins, de nuestro curso de fundamentos de bootstrap

  • BOOTSTRAP PLUGINS - INTRODUCCION (09:00)

    En esta sesión mostramos características generales del funcionamiento de los agregados de JavaScript en Bootstrap

  • BOOTSTRAP PLUGINS - CUADROS MODALES (33:27)

    En esta sesión detallamos el uso de cuadros modales con Bootstrap, para enfocar la atención del usuario en un elemento de información o solicitar una respuesta interactiva, incluyendo cómo personalizar el contenido del diálogo modal según el botón utilizado para activarlo.

  • BOOTSTRAP PLUGINS - DESPLEGABLES (11:00)

    En esta sesión detallamos el uso de diversas características y eventos de los menús desplegables en Bootstrap utilizando JavaScript

  • BOOTSTRAP PLUGINS - SCROLLSPY (15:00)

    En esta sesión utilizamos el agregado ScrollSpy de Bootstrap para hacer seguimiento del desplazamiento sobre un elemento, comportamiento utilizado típicamente en una tabla de contenido.

  • BOOTSTRAP PLUGINS - TABS (19:00)

    En esta sesión detallamos cómo completar el uso de pestañas y píldoras de navegación para mostrar diferentes secciones de contenido en una página con Bootstrap.

  • BOOTSTRAP PLUGINS - AYUDAS VISUALES (23:00)

    En esta sesión demostramos el uso de ayudas visuales con "tooltips" y "popovers" de Bootstrap para brindar información adicional al usuario sobre diferentes elementos de una página web, siendo controlados con JavaScript.

  • BOOTSTRAP PLUGINS - BOTONES (19:46)

    En esta sesión demostramos el uso de JavaScript para personalizar el estado y comportamiento de botones con Bootstrap.

  • BOOTSTRAP PLUGINS - PLEGABLES - COLLPASE (23:00)

    En esta sección demostramos cómo utilizar plegables de Bootstrap para expandir y/o contraer elementos de una página web, incluyendo un ejemplo práctico del efecto "acordeón".

  • BOOTSTRAP PLUGINS - CARRUSEL (23:04)

    En esta sesión demostramos la definición y configuración de los diferentes componentes que forman un carrusel con Bootstrap para recorrer elementos mostrados en una secuencia.

  • BOOTSTRAP PLUGINS - ELEMENTOS DE POSICION FIJA - AFFIX (32:00)

    En esta sesión demostramos cómo utilizar el componente "Affix" de Bootstrap para fijar y personalizar la posición de secciones clave de contenido en una página web, como tablas de índice y botones "sociales".