
Bienvenidos a este curso de crear páginas web responsive con Bootstrap, vamos a aprender paso a paso la construcción de un sitio responsivo desde su fase de diseño hasta la fase de integración. Recuerda descargar el material de apoyo de todo el curso en los recursos de esta clase.
En esta clase vamos a analizar los archivos que se deben crear en esta fase de planeación y diseño. Emprezando por la creación de columnas para cada pantalla, pasando por la construcción del Wireframe y terminando en la propuesta del diseño.
Continuamos con la fase de planeación y diseño.
En esta clase analizaremos cómo funciona el sistema de columnas que utiliza bootstrap. Cuáles son los puntos de quiebre y sus respectivas medidas.
Continuamos con la construcción de columnas.
Continuamos con la construcción de columnas.
Esta primera fase de maquetación es muy importante para identificar la posición y el tamaño de cada una de las cajas que componen el sitio web.
Continuamos con la maquetación de las cajas.
Continuamos con la maquetación de las cajas.
El wireframe es el esqueleto de la página web y en él puedo visualizar la estructura del sitio web completa. En estas clases a continuación comenzaremos a construir el wireframe con los textos e imágenes auxiliares.
Continuamos con la construcción del wireframe.
Continuamos con la construcción del wireframe.
Bootstrap trae varios recursos para la construcción de una barra de navegación adaptable a cualquier pantalla. En esta clase vamos a construir una barra de navegación con la ayuda de Bootstrap.
En esta clase aprenderemos a construir un Slide interactivo con los recursos de Bootstrap.
En esta clase construiremos la sección de la página web.
Bootstrap ofrece una serie de opciones para la creación de botones standar para ubicar en cualquier parte del sitio web.
Finalizaremos la construcción de la sección del sitio web con la creación de la galería de imágenes.
Bootstrap trae en sus recursos la opción de crear contenido Modal, es decir, contenido flotante sobre la página, ideal para construir galería de imágenes tipo lightbox, y artículos flotantes.
Continuamos aprendiendo más acerca del efecto modal.
Creamos la sección de videos.
En esta clase aprenderemos a utilizar el estilo de formularios que nos ofrece Bootstrap.
En esta clase finalizaremos la construcción del Wireframe.
Luego de finalizar el wireframe, comenzaremos a integrar las piezas gráficas definitivas del sitio web.
Continuamos con la integración del diseño.
Nos acercamos al final de este curso, terminando de integrar el diseño e invitando a profundizar más en el lenguaje de programación JavaScript.
En esta clase aprenderemos a crear un scroll animado que navegue por cada una de las secciones del sitio web. Este es un recurso creado exclusivamente con JQUERY; no hace parte de los recursos de Bootstrap.
Felicidades! ya tiene un sitio web construido con el sistema de columnas de Bootstrap. Lo invito a que continúe aprendiendo más acerca del desarrollo web, esta es una disciplina en crecimiento y en constantes actualizaciones.
¿DE QUÉ SE TRATA EL CURSO?
Hoy en día todas las páginas web deben ser construidas para ser visualizadas correctamente en cualquier dispositivo, ya sea un móvil, una tablet o un computador.
Este curso te va ayudar a crear páginas web que se adapten a cualquier dispositivo. Esta práctica la conocemos como "Responsive Web design" (Diseño Web Responsivo) y aprenderás a trabajar con el Framework más importante del diseño responsivo llamado Bootstrap, creado por los desarrolladores de Twitter.
¿CÓMO ES EL CURSO?
El curso se divide en varias secciones. En una primera sección aprenderemos a construir el diseño web adaptable desde cero en un programa de diseño como Illustrator. Luego pasaremos a conocer el sistema de columnas que maneja Bootstrap para que cada caja HTML se adapte a cualquier dispositivo. Comenzaremos a crear una maquetación web de acuerdo al diseño preestablecido y finalizaríamos esta sección con la creación del Wireframe, incluyendo los recursos interactivos que trae Bootstrap.
En la última sección de este curso integraríamos el diseño con cada uno de los gráficos que exportamos de Illustrator.
¿CUÁNTO SE TARDA EN COMPLETAR EL CURSO?
Depende de ti. Estimo que menos de una semana puedes completar el curso, pero dependerá de tu ritmo de trabajo y de tu disponibilidad.
¿CUÁLES SON LOS REQUISITOS?
Descargar el material que se encuentra en los recursos de la clase 1. Tener principios en HTML5 y CSS3, curso gratuito que puede realizar en UDEMY: "Aprende HTML5 y CSS3 desde cero".
¿A QUIÉN VA DIRIGIDO ESTE CURSO?
Este curso va dirigido a diseñadores gráficos, desarrolladores web, personas que quieran actualizar su conocimiento en la construcción de sitios web, personas que más adelante quieran crear aplicaciones nativas para dispositivos, personas que que más adelante deseen crear plantillas para Joomla o Wordpress.