Bootstrap-Desarrollo-Web-Responsive.pdf

Bootstrap 4: Desarrollo Web Responsive
FORMACIÓN
ONLINE

DURACIÓN
340 horas
PRECIO
299 €
MODALIDAD
Online
* Materiales didácticos, titulación y gastos de envío incluidos
TITULACIÓN
Doble Titulación Expedida por EUROINNOVA BUSINESS SCHOOL y Avalada por la Escuela
Superior de Cualiﬁcaciones Profesionales

OBJETIVOS
Maquetar la estructura con HTML5.
Gestionar el comportamiento responsive.
Crear sitios web que se adaptan automáticamente a cualquier resolución para obtener
así una visualización óptima, independientemente del tipo de pantalla, ya sea de
ordenador, tableta o smartphone.
A QUIÉN VA DIRIGIDO
Este Curso de Bootstrap 4: Desarrollo Web Responsive está dirigido a profesionales del
sector que deseen seguir formándose en la materia, así como a personas interesadas en
dedicarse profesionalmente al desarrollo web responsive.

PARA QUÉ TE PREPARA
El Curso de Bootstrap 4: Desarrollo Web Responsive le prepara para tener una visión amplia
y precisa del entorno web, llegando a especializarse en el desarrollo de proyectos
responsive gracias al conocimiento de Bootstrap o HTML5.
SALIDAS LABORALES
Desarrollo web responsive / Diseño web.

MATERIALES DIDÁCTICOS
Paquete SCORM: HTML5 y CSS3 para Sitios
con Diseño Web Responsive
Paquete SCORM: Desarrollo web con
Bootstrap 4

Programa Formativo
PARTE 1. DESARROLLO WEB CON BOOTSTRAP
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A BOOTSTRAP 4
Introducción a Bootstrap 4
1.
Diferencias entre Bootstrap 3 y Bootstrap 4
2.
Generalidades de Bootstrap 4
3.
Descarga e instalación de Bootstrap 4
4.
UNIDAD DIDÁCTICA 2. CARACTERÍSTICAS Y USO DEL LAYOUT
Uso de container y Media Queries (Responsive breakpoints)
1.
Utilidades dentro de nuestro layout: ﬂexbox, margin, padding and visibility
2.
Estructura básica del Grid
3.
Posibilidades de personalización del Grid
4.
UNIDAD DIDÁCTICA 3. CREACIÓN DE ELEMENTOS HTML CON BOOTSTRAP 4
Tablas
1.
Jumbotron
2.
Alertas
3.
Barras de progreso
4.
Paginación
5.
Listas de grupos
6.
Desplegables
7.
Barras de navegación
8.
Formularios
9.
Carruseles
10.
Modales
11.
UNIDAD DIDÁCTICA 4. PERSONALIZACIÓN DE ELEMENTOS CON
BOOTSTRAP 4
1.
Tipografía
2.
Colores
3.
Imágenes
4.
Botones
5.
Formularios personalizados
6.

UNIDAD DIDÁCTICA 5. UTILIDADES AVANZADAS DE PERSONALIZACIÓN
Bordes: color, posición y radio
1.
Uso de Clearﬁx
2.
Colores de fondo con grado de intensidad
3.
Uso del atributo Display
4.
Uso del sistema Flex
5.
Fijación de elementos mediante posiciones
6.
Modiﬁcaciones avanzadas del texto
7.
Ejemplos combinados del uso de Bootstrap en nuestra página
8.
PARTE 2. DISEÑO WEB RESPONSIVE CON HTML5 Y CSS3
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN
El diseño web actual
1.
Diseño web responsive
2.
Planteamientos de diseño
3.
Pasar a otra cosa
4.
Objetivos del libro
5.
Herramientas del maquetador
6.
- Objetivos
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Microsoft Internet Explorer
Descargar ejemplos
7.
UNIDAD DIDÁCTICA 2. SOLUCIONES PARA LA COMPATIBILIDAD
Disparidad entre navegadores
1.
Mejorar la compatibilidad
2.
Visualización inicial de los navegadores
3.
- El problema
- El reset universal
- El reset de Eric Meyer

- El reset de HTML5 Doctor
Normalize.css
4.
- El proyecto
- Descargar Normalize.css
- Instalar Normalize.css
El HTML5 y html5shiv.js
5.
- Objetivo
- Archivo de ejemplo
- Librería html5shiv.js
Media queries y respond.js
6.
- Objetivo
- Archivo de ejemplo
- La librería respond.js
Las alternativas y Modernizr.js
7.
- Objetivo
- Descargar Modernizr
- Crear una página de ejemplo
- Instale y enlace el script Modernizr
- La activación de Modernizr
- Utilizar las clases de Modernizr
- Utilizar Modernizr con JavaScript
Las reglas @supports
8.
- Objetivo
- Utilizar las reglas @supports
- Operadores

UNIDAD DIDÁCTICA 3. EL DISEÑO CLÁSICO
Diseñadores y maquetadores
1.
Modelos de cajas
2.
Los márgenes de los elementos
3.
Visualización de los elementos
4.
Visualización en flujo normal
5.
Posicionamiento absoluto
6.
Posicionamiento fijo
7.
Posicionamiento relativo
8.
Utilizar el diseño en posición relativa y absoluta
9.
Visualización de cajas flotantes
10.
- Posicionamiento flotante
- Colocar las cajas al lado
- Prohibir la flotación
- Ejemplo con cuatro cajas
- Diseño simplista
- Conclusión sobre diseñar con elementos flotantes
UNIDAD DIDÁCTICA 4. DISEÑAR CON TABLAS
Objetivo
1.
La propiedad display
2.
Diseño simple con una tabla
3.
Ancho en pantalla de la tabla
4.
Elementos anónimos
5.
Otros elementos para las tablas
6.
- Párrafos en las celdas
- Listas en tablas
Diseño de las filas
7.
Establecer el ancho de las celdas
8.
- Anchos fijos
- Anchos en porcentaje
Diseño con una tabla más estructurada
9.

Otras propiedades de diseño
10.
- Propiedad table-layout
- Propiedad border-collapse
- Propiedad border-spacing
- Propiedad empty-cells
- Propiedad caption-side
Alineación vertical
11.
Conclusión
12.
UNIDAD DIDÁCTICA 5. CUADRÍCULAS DE DISEÑO
Objetivo
1.
Estructura de las cuadrículas para la web
2.
Cuadrículas fijas
3.
La cuadrícula fija 960gs
4.
- Cuadrícula
- Archivos CSS
- Página de ejemplo
- Enlaces a las hojas de estilo
- Estilos personales
- Contenedor del diseño
- Bloques en 12 columnas
- Bloques en las columnas de la cuadrícula
- Prohibir los bloques flotantes adyacentes
- Bloques con desplazamiento
- Bloques centrados
- Código completo de la página
Cuadrícula fija notjustagrid
5.

- El framework
- Cuadrícula
- Archivos CSS
- Enlaces a las hojas de estilo
- Contenedor del diseño
- Sistema de clases
- Bloque para todo el ancho
- Tres bloques en un tercio de la cuadrícula
- Dos bloques en 3/5 y 2/5 de la cuadrícula
- Un solo bloque en 2/3 de la cuadrícula
Cuadrícula ﬂuida Gridiculous
6.
- Cuadrículas ﬂuidas
- Cuadrícula Gridiculous
- Descargar la cuadrícula
- Instalar la cuadrícula
- Contenedor
- Filas
- Tres bloques con la misma anchura
- Dos bloques con anchos distintos
- Bloque desplazado

- Visualización de la cuadrícula ﬂuida
UNIDAD DIDÁCTICA 6. MEDIA QUERIES
Objetivo
1.
Orígenes
2.
Uso de media queries
3.
Sintaxis de las media queries
4.
Características a prueba
5.
Dónde ubicar las media queries
6.
Tamaño de las pantallas de los móviles
7.
El concepto viewport
8.
Un ejemplo muy sencillo
9.
- Esquema
- Código HTML y CSS
Cuadrícula responsive
10.
- Cuadrícula
- Descargar e instalar la cuadrícula
- Crear una página sencilla de 12 columnas
- Vínculo a los estilos y a los scripts
- Estructura del diseño
- Reglas CSS
Ejemplos de sitios con media queries
11.
UNIDAD DIDÁCTICA 7. EL DISEÑO RESPONSIVE
El diseño responsive
1.
Cuadrículas responsive
2.
Cuadrícula responsive Simple Grid
3.
-Utilizar Simple Grid
4.
- Descargar e instalar Simple Grid
- Filas
- Esquema

- Primera fila
- Segunda fila
- Tercera fila
- Utilizar la cuadrícula fluida y responsive
- Código completo
Cuadrícula responsive Columnal
5.
- Utilizar Columnal
- Descargar e instalar Columnal
- Esquema
- Contenedor y filas
- Primera fila
- Segunda fila
- La tercera fila y el desplazamiento
- La cuarta fila y bloques anidados
- Código completo del diseño
- Imágenes responsives
- Código completo para el diseño con una imagen responsive
Uso de imágenes
6.
Imágenes fluidas
7.
- Objetivo
- Diseño fijo
- Diseño fluido
- Ancho fluido de otros elementos
- Anchos de imágenes fluidas

- Abrir y cambiar el tamaño de la página
Script Response.js
8.
- Utilizar JavaScript
- Descargar el JavaScript
- Enlaces a los JavaScript
- Preparar imágenes
- Código de la página
- Funcionamiento del script
- Optimizar las leyendas
Script pictureﬁll.js
9.
- Descargar el JavaScript
- Enlaces a los JavaScript
- Preparar imágenes
- Visualización de la imagen responsive
- Código para las pantallas de alta deﬁnición (Retina)
Script responsive-images.js
10.
- Descarga la demo
- Utilizar la página

Propuestas para el futuro
11.
- Grupos de trabajo: RICG y W3C
- Grupos de trabajo: Apple y W3C
Tipografía responsive
12.
- Objetivo
- Unidades utilizadas
- Unidad em y cascada
- Unidad rem y la cascada
- Tipografía responsive y unidad rem
- Tipografía responsive y fuentes
- Unidades relacionadas con el viewport
Tablas responsives
13.
- Objetivo
- Zurb
- La solución de Geoﬀ Yuen
- La solución de Chris Coyier
- Otras soluciones
UNIDAD DIDÁCTICA 8. FRAMEWORKS DE CSS
Utilizar los frameworks de CSS
1.
Frameworks de CSS
2.
UIkit
3.
- Utilizar UIkit
- Descargar el framework
- Descargar jQuery
- Instalar el framework

- Crear una cuadrícula fluida
- Utilizar la cuadrícula fluida
- Utilizar la cuadrícula responsive de UIkit
- Crear una barra de navegación
- Crear una tabla con formato
Kube
4.
- Utilizar Kube
- Instalar el framework
- Crear una cuadrícula fluida y responsive
- Insertar un formulario
- Insertar botones
Pure
5.
- Utilizar Pure
- Enlazar el framework
- Utilizar la cuadrícula fluida responsive
- Insertar una tabla
- Insertar una barra de menú con un menú desplegable
UNIDAD DIDÁCTICA 9. EL FUTURO DEL DISEÑO
Objetivos
1.
Multicolumna
2.
- Preceptos de uso
- Configuración de columnas

- Configuración de las calles
- Configuración de saltos de columna
- Distribución en varias columnas
- Un generador de multicolumnas
- Columnas y diseño responsive
Cajas flexibles
3.
- Ubicación de los elementos de diseño
- Módulo de las cajas flexibles
- Cajas flexibles
- Orientación y dirección de las cajas
- Desbordamiento de las cajas
- Orientación de las cajas
- Alineación horizontal de las cajas
- Alineación vertical de las cajas
- Excepciones en la alineación vertical
- Excepciones en la alineación horizontal
- Propiedades de la flexibilidad
- Propiedad flex-grow
- Propiedades flex-shrink y flex-basis
- Constructores en línea
- Ejemplo de diseño flexible
Otros módulos del W3C
4.
- Recorrido
- Cuadrículas
- Plantilla de página

- Distribución
- Regiones

Bootstrap-Desarrollo-Web-Responsive.pdf

Recomendados

Recomendados

Más contenido relacionado

Similar a Bootstrap-Desarrollo-Web-Responsive.pdf

Similar a Bootstrap-Desarrollo-Web-Responsive.pdf (20)

Último

Último (20)

Bootstrap-Desarrollo-Web-Responsive.pdf