SlideShare una empresa de Scribd logo
Bootstrap 4: Desarrollo Web Responsive
FORMACIÓN
ONLINE
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
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 Cualificaciones Profesionales
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
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.
Bootstrap 4: 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.
Bootstrap 4: Desarrollo Web Responsive
MATERIALES DIDÁCTICOS
Paquete SCORM: HTML5 y CSS3 para Sitios
con Diseño Web Responsive
Paquete SCORM: Desarrollo web con
Bootstrap 4
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
Bootstrap 4: Desarrollo Web Responsive
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: flexbox, 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.
Bootstrap 4: Desarrollo Web Responsive
UNIDAD DIDÁCTICA 5. UTILIDADES AVANZADAS DE PERSONALIZACIÓN
Bordes: color, posición y radio
1.
Uso de Clearfix
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.
Modificaciones 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
Bootstrap 4: Desarrollo Web Responsive
- 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
Bootstrap 4: Desarrollo Web Responsive
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.
Bootstrap 4: Desarrollo Web Responsive
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.
Bootstrap 4: Desarrollo Web Responsive
- El framework
- Cuadrícula
- Página de ejemplo
- Archivos CSS
- Enlaces a las hojas de estilo
- Estilos personales
- 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
- Código completo de la página
Cuadrícula fluida Gridiculous
6.
- Cuadrículas fluidas
- Cuadrícula Gridiculous
- Página de ejemplo
- Descargar la cuadrícula
- Instalar la cuadrícula
- Estilos personales
- Contenedor
- Filas
- Tres bloques con la misma anchura
- Dos bloques con anchos distintos
- Bloque desplazado
Bootstrap 4: Desarrollo Web Responsive
- Visualización de la cuadrícula fluida
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
Bootstrap 4: Desarrollo Web Responsive
- 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
- Utilizar la cuadrícula fluida y responsive
- 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
Bootstrap 4: Desarrollo Web Responsive
- Abrir y cambiar el tamaño de la página
- Código completo 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
- Código completo de la página
Script picturefill.js
9.
- Utilizar JavaScript
- Descargar el JavaScript
- Enlaces a los JavaScript
- Preparar imágenes
- Código de la página
- Visualización de la imagen responsive
- Código para las pantallas de alta definición (Retina)
- Código completo de la página
Script responsive-images.js
10.
- Utilizar JavaScript
- Descarga la demo
- Código de la página
- Utilizar la página
Bootstrap 4: Desarrollo Web Responsive
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 Geoff 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
Bootstrap 4: Desarrollo Web Responsive
- 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
- Descargar el framework
- Instalar el framework
- Crear una cuadrícula fluida y responsive
- Utilizar la cuadrícula fluida y responsive
- Insertar un formulario
- Insertar botones
Pure
5.
- Utilizar Pure
- Descargar el framework
- 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
Bootstrap 4: Desarrollo Web Responsive
- 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
Bootstrap 4: Desarrollo Web Responsive
- Distribución
- Regiones
Bootstrap 4: Desarrollo Web Responsive

Más contenido relacionado

Similar a Bootstrap-Desarrollo-Web-Responsive.pdf

Manual word 2013 prof lucio
Manual word 2013 prof lucioManual word 2013 prof lucio
Manual word 2013 prof lucio
florarobles
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
Valentín García
 
Ficha curso Experto en ofimática
Ficha curso Experto en ofimáticaFicha curso Experto en ofimática
Ficha curso Experto en ofimática
iLabora
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
Cycle-IT
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
Cycle-IT
 
Curso desarrollador visual studio .NET 2013
Curso desarrollador visual studio .NET 2013Curso desarrollador visual studio .NET 2013
Curso desarrollador visual studio .NET 2013
iLabora
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Pedrito Abiel
 
Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5
Carlos Alonso Pérez
 
Microsoft_Access_Avanzado_2013..................................................
Microsoft_Access_Avanzado_2013..................................................Microsoft_Access_Avanzado_2013..................................................
Microsoft_Access_Avanzado_2013..................................................
vanessaguadalinfo
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
Geraldyn De Sousa
 
Bases pag web 4
Bases pag web 4Bases pag web 4
Bases pag web 4
System32nemesis
 
S3 2016 taller-javascript-v2
S3 2016 taller-javascript-v2S3 2016 taller-javascript-v2
S3 2016 taller-javascript-v2
Manuel Gértrudix
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
Adolfo Sanz De Diego
 
Silabo taller de base de datos
Silabo   taller de base de datosSilabo   taller de base de datos
Silabo taller de base de datos
Edwin Mamani López
 
Manual de instalación
Manual de instalación Manual de instalación
Manual de instalación
Mafer Pinto
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Juan Morales
 
Drupal7 site buildingesue_3
Drupal7 site buildingesue_3Drupal7 site buildingesue_3
Drupal7 site buildingesue_3
Alessandro Mascherpa
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Rob Montero
 
Dreamweaver CS5
Dreamweaver CS5 Dreamweaver CS5
Dreamweaver CS5
Jomicast
 
Web Proyecto CODEPAM
Web Proyecto CODEPAMWeb Proyecto CODEPAM
Web Proyecto CODEPAM
Antonio López Blanes
 

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

Manual word 2013 prof lucio
Manual word 2013 prof lucioManual word 2013 prof lucio
Manual word 2013 prof lucio
 
Protostar como framework
Protostar como frameworkProtostar como framework
Protostar como framework
 
Ficha curso Experto en ofimática
Ficha curso Experto en ofimáticaFicha curso Experto en ofimática
Ficha curso Experto en ofimática
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Introducción a Foundation 5
Introducción a Foundation 5Introducción a Foundation 5
Introducción a Foundation 5
 
Curso desarrollador visual studio .NET 2013
Curso desarrollador visual studio .NET 2013Curso desarrollador visual studio .NET 2013
Curso desarrollador visual studio .NET 2013
 
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
Desarrollo web con html5 + css3 + j script + asp mvc4 (vstudio 2012)
 
Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5Aplicaciones móviles - HTML5
Aplicaciones móviles - HTML5
 
Microsoft_Access_Avanzado_2013..................................................
Microsoft_Access_Avanzado_2013..................................................Microsoft_Access_Avanzado_2013..................................................
Microsoft_Access_Avanzado_2013..................................................
 
Framework de programacion de paginas web
Framework de programacion de paginas webFramework de programacion de paginas web
Framework de programacion de paginas web
 
Bases pag web 4
Bases pag web 4Bases pag web 4
Bases pag web 4
 
S3 2016 taller-javascript-v2
S3 2016 taller-javascript-v2S3 2016 taller-javascript-v2
S3 2016 taller-javascript-v2
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
 
Silabo taller de base de datos
Silabo   taller de base de datosSilabo   taller de base de datos
Silabo taller de base de datos
 
Manual de instalación
Manual de instalación Manual de instalación
Manual de instalación
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Drupal7 site buildingesue_3
Drupal7 site buildingesue_3Drupal7 site buildingesue_3
Drupal7 site buildingesue_3
 
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
Diseño Responsivo en Drupal: ¿Qué hay de Nuevo?
 
Dreamweaver CS5
Dreamweaver CS5 Dreamweaver CS5
Dreamweaver CS5
 
Web Proyecto CODEPAM
Web Proyecto CODEPAMWeb Proyecto CODEPAM
Web Proyecto CODEPAM
 

Último

AE 34 Serie de sobrecargas aisladas_240429_172040.pdf
AE  34 Serie de sobrecargas aisladas_240429_172040.pdfAE  34 Serie de sobrecargas aisladas_240429_172040.pdf
AE 34 Serie de sobrecargas aisladas_240429_172040.pdf
sebastianpech108
 
Sesión 03 universidad cesar vallejo 2024
Sesión 03 universidad cesar vallejo 2024Sesión 03 universidad cesar vallejo 2024
Sesión 03 universidad cesar vallejo 2024
FantasticVideo1
 
Semana 12 - Ley 29973 de las personas con discapacidad.pdf
Semana 12 - Ley 29973 de las personas con discapacidad.pdfSemana 12 - Ley 29973 de las personas con discapacidad.pdf
Semana 12 - Ley 29973 de las personas con discapacidad.pdf
SandyCuenca
 
chancadoras.............................
chancadoras.............................chancadoras.............................
chancadoras.............................
ssuser8827cb1
 
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptx
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptxEquipo 4. Mezclado de Polímeros quimica de polimeros.pptx
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptx
angiepalacios6170
 
BACTERIAS VERDES grupo 1 corregido-1.pptx
BACTERIAS VERDES grupo 1 corregido-1.pptxBACTERIAS VERDES grupo 1 corregido-1.pptx
BACTERIAS VERDES grupo 1 corregido-1.pptx
JuanEnriqueDavilaBar
 
INVENTARIO CEROO Y DINAMICAA FABRIL.pptx
INVENTARIO CEROO Y DINAMICAA FABRIL.pptxINVENTARIO CEROO Y DINAMICAA FABRIL.pptx
INVENTARIO CEROO Y DINAMICAA FABRIL.pptx
FernandoRodrigoEscal
 
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOSSISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
micoltadaniel2024
 
Reglamento Interno de seguridad y sdalud en
Reglamento Interno de seguridad y sdalud enReglamento Interno de seguridad y sdalud en
Reglamento Interno de seguridad y sdalud en
Jorge Luis Flores Zuñiga
 
diagrama de flujo. en el área de ingeniería
diagrama de flujo. en el área de ingenieríadiagrama de flujo. en el área de ingeniería
diagrama de flujo. en el área de ingeniería
karenperalta62
 
Proceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
Proceso de obtenciòn de nitrogeno por el metodo Haber-BoshProceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
Proceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
shirllyleytonm
 
Infografía operaciones básicas construcción .pdf
Infografía operaciones básicas construcción .pdfInfografía operaciones básicas construcción .pdf
Infografía operaciones básicas construcción .pdf
Carlos Pulido
 
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTOOPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
GERARDO GONZALEZ
 
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICAPRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
carmenquintana18
 
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
ssuserf8ae19
 
Cálculo del espesor del conducto forzado
Cálculo del espesor del conducto forzadoCálculo del espesor del conducto forzado
Cálculo del espesor del conducto forzado
KristianSaavedra
 
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
Eliana Gomajoa
 
S9.1_DIN_Cinemática del cuerpo rígido vf.pdf
S9.1_DIN_Cinemática del cuerpo rígido vf.pdfS9.1_DIN_Cinemática del cuerpo rígido vf.pdf
S9.1_DIN_Cinemática del cuerpo rígido vf.pdf
CHRISTIANMILTHONRUSM
 
Presentación- de motor a combustión -diesel.pptx
Presentación- de motor a combustión -diesel.pptxPresentación- de motor a combustión -diesel.pptx
Presentación- de motor a combustión -diesel.pptx
ronnyrocha223
 
Focos SSO Fin de Semana del 31 MAYO A al 02 de JUNIO de 2024.pdf
Focos SSO Fin de Semana del 31 MAYO A  al 02 de JUNIO  de 2024.pdfFocos SSO Fin de Semana del 31 MAYO A  al 02 de JUNIO  de 2024.pdf
Focos SSO Fin de Semana del 31 MAYO A al 02 de JUNIO de 2024.pdf
PatoLokooGuevara
 

Último (20)

AE 34 Serie de sobrecargas aisladas_240429_172040.pdf
AE  34 Serie de sobrecargas aisladas_240429_172040.pdfAE  34 Serie de sobrecargas aisladas_240429_172040.pdf
AE 34 Serie de sobrecargas aisladas_240429_172040.pdf
 
Sesión 03 universidad cesar vallejo 2024
Sesión 03 universidad cesar vallejo 2024Sesión 03 universidad cesar vallejo 2024
Sesión 03 universidad cesar vallejo 2024
 
Semana 12 - Ley 29973 de las personas con discapacidad.pdf
Semana 12 - Ley 29973 de las personas con discapacidad.pdfSemana 12 - Ley 29973 de las personas con discapacidad.pdf
Semana 12 - Ley 29973 de las personas con discapacidad.pdf
 
chancadoras.............................
chancadoras.............................chancadoras.............................
chancadoras.............................
 
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptx
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptxEquipo 4. Mezclado de Polímeros quimica de polimeros.pptx
Equipo 4. Mezclado de Polímeros quimica de polimeros.pptx
 
BACTERIAS VERDES grupo 1 corregido-1.pptx
BACTERIAS VERDES grupo 1 corregido-1.pptxBACTERIAS VERDES grupo 1 corregido-1.pptx
BACTERIAS VERDES grupo 1 corregido-1.pptx
 
INVENTARIO CEROO Y DINAMICAA FABRIL.pptx
INVENTARIO CEROO Y DINAMICAA FABRIL.pptxINVENTARIO CEROO Y DINAMICAA FABRIL.pptx
INVENTARIO CEROO Y DINAMICAA FABRIL.pptx
 
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOSSISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
SISTEMA AUTOMATIZADO DE LIMPIEZA PARA ACUARIOS
 
Reglamento Interno de seguridad y sdalud en
Reglamento Interno de seguridad y sdalud enReglamento Interno de seguridad y sdalud en
Reglamento Interno de seguridad y sdalud en
 
diagrama de flujo. en el área de ingeniería
diagrama de flujo. en el área de ingenieríadiagrama de flujo. en el área de ingeniería
diagrama de flujo. en el área de ingeniería
 
Proceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
Proceso de obtenciòn de nitrogeno por el metodo Haber-BoshProceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
Proceso de obtenciòn de nitrogeno por el metodo Haber-Bosh
 
Infografía operaciones básicas construcción .pdf
Infografía operaciones básicas construcción .pdfInfografía operaciones básicas construcción .pdf
Infografía operaciones básicas construcción .pdf
 
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTOOPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
OPERACIONES BÁSICAS (INFOGRAFIA) DOCUMENTO
 
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICAPRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
PRIMERA Y SEGUNDA LEY DE LA TERMODINÁMICA
 
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
NTP 223 NORMAS PARA TRABAJO SEGURO EN ESPACIOS CONFINADOS. Ing. Josue Donoso ...
 
Cálculo del espesor del conducto forzado
Cálculo del espesor del conducto forzadoCálculo del espesor del conducto forzado
Cálculo del espesor del conducto forzado
 
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
Enjoy Pasto Bot - "Tu guía virtual para disfrutar del Carnaval de Negros y Bl...
 
S9.1_DIN_Cinemática del cuerpo rígido vf.pdf
S9.1_DIN_Cinemática del cuerpo rígido vf.pdfS9.1_DIN_Cinemática del cuerpo rígido vf.pdf
S9.1_DIN_Cinemática del cuerpo rígido vf.pdf
 
Presentación- de motor a combustión -diesel.pptx
Presentación- de motor a combustión -diesel.pptxPresentación- de motor a combustión -diesel.pptx
Presentación- de motor a combustión -diesel.pptx
 
Focos SSO Fin de Semana del 31 MAYO A al 02 de JUNIO de 2024.pdf
Focos SSO Fin de Semana del 31 MAYO A  al 02 de JUNIO  de 2024.pdfFocos SSO Fin de Semana del 31 MAYO A  al 02 de JUNIO  de 2024.pdf
Focos SSO Fin de Semana del 31 MAYO A al 02 de JUNIO de 2024.pdf
 

Bootstrap-Desarrollo-Web-Responsive.pdf

  • 1. Bootstrap 4: Desarrollo Web Responsive FORMACIÓN ONLINE
  • 2. Bootstrap 4: Desarrollo Web Responsive
  • 3. Bootstrap 4: Desarrollo Web Responsive
  • 4. Bootstrap 4: Desarrollo Web Responsive Bootstrap 4: Desarrollo Web Responsive 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 Cualificaciones Profesionales
  • 5. Bootstrap 4: Desarrollo Web Responsive
  • 6. Bootstrap 4: Desarrollo Web Responsive 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.
  • 7. Bootstrap 4: 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.
  • 8. Bootstrap 4: Desarrollo Web Responsive MATERIALES DIDÁCTICOS Paquete SCORM: HTML5 y CSS3 para Sitios con Diseño Web Responsive Paquete SCORM: Desarrollo web con Bootstrap 4
  • 9. Bootstrap 4: Desarrollo Web Responsive
  • 10. Bootstrap 4: Desarrollo Web Responsive
  • 11. Bootstrap 4: Desarrollo Web Responsive
  • 12. Bootstrap 4: Desarrollo Web Responsive
  • 13. Bootstrap 4: Desarrollo Web Responsive 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: flexbox, 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.
  • 14. Bootstrap 4: Desarrollo Web Responsive UNIDAD DIDÁCTICA 5. UTILIDADES AVANZADAS DE PERSONALIZACIÓN Bordes: color, posición y radio 1. Uso de Clearfix 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. Modificaciones 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
  • 15. Bootstrap 4: Desarrollo Web Responsive - 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
  • 16. Bootstrap 4: Desarrollo Web Responsive 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.
  • 17. Bootstrap 4: Desarrollo Web Responsive 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.
  • 18. Bootstrap 4: Desarrollo Web Responsive - El framework - Cuadrícula - Página de ejemplo - Archivos CSS - Enlaces a las hojas de estilo - Estilos personales - 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 - Código completo de la página Cuadrícula fluida Gridiculous 6. - Cuadrículas fluidas - Cuadrícula Gridiculous - Página de ejemplo - Descargar la cuadrícula - Instalar la cuadrícula - Estilos personales - Contenedor - Filas - Tres bloques con la misma anchura - Dos bloques con anchos distintos - Bloque desplazado
  • 19. Bootstrap 4: Desarrollo Web Responsive - Visualización de la cuadrícula fluida 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
  • 20. Bootstrap 4: Desarrollo Web Responsive - 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 - Utilizar la cuadrícula fluida y responsive - 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
  • 21. Bootstrap 4: Desarrollo Web Responsive - Abrir y cambiar el tamaño de la página - Código completo 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 - Código completo de la página Script picturefill.js 9. - Utilizar JavaScript - Descargar el JavaScript - Enlaces a los JavaScript - Preparar imágenes - Código de la página - Visualización de la imagen responsive - Código para las pantallas de alta definición (Retina) - Código completo de la página Script responsive-images.js 10. - Utilizar JavaScript - Descarga la demo - Código de la página - Utilizar la página
  • 22. Bootstrap 4: Desarrollo Web Responsive 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 Geoff 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
  • 23. Bootstrap 4: Desarrollo Web Responsive - 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 - Descargar el framework - Instalar el framework - Crear una cuadrícula fluida y responsive - Utilizar la cuadrícula fluida y responsive - Insertar un formulario - Insertar botones Pure 5. - Utilizar Pure - Descargar el framework - 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
  • 24. Bootstrap 4: Desarrollo Web Responsive - 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
  • 25. Bootstrap 4: Desarrollo Web Responsive - Distribución - Regiones
  • 26. Bootstrap 4: Desarrollo Web Responsive