Inicio Catálogo Desarrollo web adaptativo con Bootstrap Programa Detallado

Curso de Desarrollo web adaptativo con Bootstrap (Programa detallado)

Objetivo

Al finalizar este curso, el alumno sabrá cómo desarrollar una página web completa, usando un diseño adaptativo o sensible a pantallas (filosofía responsive web design) de manera rápida y sencilla.

Podrá conocer cómo funciona el sistema de Grid o de columnas usando diseños de caja flexibles, que nos proporciona la capacidad de adaptación al entorno de visualización.
 
Aprenderá a utilizar el conjunto de herramientas que Bootstrap nos ofrece, y otorgará uniformidad a tu diseño, mostrando una apariencia moderna de los elementos de nuestra web. Conocerá cómo usar los diferentes componentes con características avanzadas, como el uso de botones, menús desplegables, listas de navegación, formularios, etc.

Durante el curso, podrá realizar muchos ejemplos prácticos que le servirán para llevar a cabo su propio proyecto. Creará una página web completa y operativa usando el entorno de trabajo Bootstrap. Además, aumentará sus posibilidades laborales como desarrollador o programador Front-End.

Dirigido a:

Desarrolladores y programadores de aplicaciones web, o cualquier persona que quiera trabajar en creación de páginas web, en la parte Front-End con ayuda del kit de herramienta de Bootstrap.

Va dirigido a todo aquel que quiera conocer un conjunto de herramientas que ayude a la realización de una web con diseño adaptado a cualquier tamaño de pantalla o dispositivo. También a personas que necesiten aprender a crear o actualizar la web de sus negocios, creándola con un diseño más actual y atractiva visualmente sin conocimiento de programación.

Requisitos:

Se recomienda tener conocimientos básicos de HTM y CSS, aunque si no has trabajado con ello, no tendrás problemas para la realización de este curso, pero te ayudarán a la compresión de algunos aspectos.

Vamos a trabajar de forma local, desde un editor de código y un navegador, aunque es necesaria conexión a internet. Instalaremos el kit de herramientas de Bootstrap, un editor y alguna herramienta o plugin que nos ayudará a lo largo del curso.

Para todo ello, es suficiente contar con un ordenador básico con conexión a internet.

PROGRAMA DEL CURSO

1.- Bootstrap. Definición e instalación

Objetivo

Conocerá qué es Bootstrap, sabrá qué ventajas nos ofrece trabajar con este kit de herramientas para el desarrollo de páginas web con diseño adaptativo. Aprenderá a instalar las herramientas necesarias y sabrá cómo configurarlo para empezar a trabajar con él.

  • Saber qué es Bootstrap.
  • Conocer el origen y versión actual de Bootstrap.
  • Entender las características principales del kit de herramientas.
  • Saber las ventajas que nos ofrece trabajar con Bootstrap.
  • Saber los conceptos principales de Responsive Web Desing.
  •  Conocer qué es la filosofía Mobile First.
  • Descargar e Instalar el kit de herramientas de Bootstrap.
  • Configurar Bootstrap para empezar a trabajar.

Contenido

  1. Bootstrap. Definición e instalación
    1. Definición
    2. Responsive Web Design
    3. Filosofía Mobile First Design
    4. Instalación y configuración
    5. Resumen
Arriba

2.- Sistemas de columnas

Objetivo

Saber cómo funciona un sistema de columnas y cuales son sus elementos. Crear código con contenedores, filas y columnas y mostrarlos según los diferentes puntos de rupturas.

  • Saber cuáles son los elementos del sistema de grid de Bootstrap.
  • Conocer qué es un contenedor.
  • Entender cómo funcionan las filas y columnas dentro de un contenedor. 
  • Saber qué son los puntos de ruptura y la herencia de contextos. 
  • Crear un bloque con contenedor filas y columnas en Bootstrap.

Contenido

  1. Sistemas de Columnas
    1. Entendiendo el sistema
    2. Concepto de contenedores
    3. Puntos de rupturas ( breakpoints )
    4. Resumen
Arriba

3.- Reglas del sistema de columnas

Objetivo

Terminada esta unidad, conocerá las propiedades y reglas que rigen las filas y columnas de un sistema de columnas definido con Bootstrap:

  • Conocerá qué es un hijo directo en una fila.
  • Sabrá qué números de columnas puede tener una fila.
  • Sabrá cómo funciona Bootstrap en los saltos de líneas.
  • Dominará el uso de las columnas también si contiene columnas vacías.
  •  Aprenderá cómo utilizar columnas anidadas.
  • Podrá ordenar las columnas según se solicite.

Contenido

  1. Reglas del sistema de columnas
    1. Reglas de filas
    2. Reglas de columnas
    3. Resumen
Arriba

4.- Flexbox en Bootstrap

Objetivo

En esta unidad conocerá todo lo necesario para el uso de cajas flexibles (Flexbox):

  • Aprenderá los conceptos básicos de Flexbox.
  • Conocerá todas las propiedades que nos ofrece estas clases.                 
  • Sabrá cómo alinear los elementos con Flexbox.

Contenido

  1. Flexbox en Bootstrap
    1. Conceptos básicos
    2. Propiedades Flexbox
    3. Alinear con Flexbox
    4. Resumen
Arriba

5.- Componentes Bootstrap

Objetivo

Después de ver esta unidad, habrá aprendido a utilizar en desarrollos adaptativos diferentes componentes utilizando las clases que nos trae Bootstrap:

  • Conocerá cómo usar el componente navbar para realizar barras de navegación.
  • Podrá crear botones con Bootstrap y añadirle el estilo que desee.
  • Sabrá cómo usar los menús, configurarlos y diseñarlos. Aprenderá a crear un componente collapse.

Contenido

  1. Componentes Bootstrap
    1. Lista de Componentes
    2. Componente navbar
    3. Manejo de botones
    4. Configuración de menús
    5. Creación de un Collapse
    6. Resumen
Arriba

6.- Clases de Utilidades

Objetivo

 En esta unidad se aprenderá a utilizar las clases más importantes:

  • Sabrá qué es la clase Display y todas las propiedades que nos ofrece.
  • Podrá crear y cambiar el color de elementos y del fondo con clases Bootstrap.
  • Sabrá cómo crear bordes y sombras a las cajas contenedoras.
  • Podrá utilizar iconos vectoriales en los desarrollos web.
  • Conocerá la utilización de Sass y la creación de propiedades para los estilos.

Contenido

  1. Clases de Utilidades
    1. Propiedad Display
    2. Paginación
    3. Carrusel (Slideshow)
    4. Configuración de apariencias
    5. Resumen
Arriba

7.- Formularios

Objetivo

  • Podrá crear distinto tipo de formularios en un desarrollo web.
  • Conocerá los elementos y la estructura que puede tener un formulario según su tipo.

Contenido

  1. Formularios
    1. Elementos básicos
    2. Uso de botones, checkbox y radios en formularios
    3. Resumen
Arriba

8.- Proyecto Web

Objetivo

Terminada esta actividad, habrá aprendido a crear una página web completa adaptativa utilizando las herramientas del kit de desarrollo de Bootstrap:

  • Creará la cabecera de la web con logo y menú adaptativo.
  • Podrá crear una página principal con clases Bootstrap y estilos propios.
  • Sabrá cómo crear un módulo con contenido de información principal aplicando distintos estilos.
  • Desarrollará una galería de imágenes de forma sencilla adaptada a distintos dispositivos.
  • Aprenderá cómo crear un formulario real.
  • Creará un pie de página adaptativo.

Contenido

  1. Proyecto Web
    1. Página principal
    2. Creación cabecera
    3. Slides
    4. Galería de imágenes
    5. Formulario de Contacto
    6. Pie de Página
    7. Resumen
Arriba