Escuela de Ingeniería de Sistemas

Diseño Web

“Introducción a Diseño Web con Bootstrap”

1
Agenda Agenda

 Introducción al Diseño Web con Bootstrap

 Filosofía Mobile
 Ejemplos
 Trabajo de Aplicación

2
Introducción al Diseño Web con
Bootstrap

3
Diseño Web con Bootstrap
Bootstrap es un framework o marco de trabajo HTML, CSS y
Javascript creado por Twitter. https://getbootstrap.com/

4
Diseño Web con Bootstrap
Bootstrap incluye un primer sistema de cuadrícula de fluido móvil y
receptivo que escala adecuadamente hasta 12 columnas a medida
que aumenta el tamaño del dispositivo o de la ventana gráfica.
Incluye clases predefinidas para opciones de diseño fáciles, así
como potentes mixins para generar diseños más semánticos.

5
Diseño Web con Bootstrap
La rejilla o grid es la base sobre la que construiremos el layout de
nuestra página, es decir, la disposición de elementos. En el uso de
la web en diferentes generaciones se señala que el sistema de
rejillas asegura que nuestra web se adaptará convenientemente a
diferentes resoluciones y pantallas. Bootstrap utiliza un modelo de
rejilla basado en dos tipos de contenedores y una rejilla de 12
columnas que resulta muy flexible que podemos también alterar
cuando nos resulte conveniente

6
Filosofía Mobile

7
Filosofía Mobile
¿Cuál es la resolución que manda? ¿Escritorio primero?
¿Resoluciones pequeñas? El mobile First se asienta como la
metodología de trabajo como “los móviles primero”. Empieza por lo
pequeño. Entonces comienza a crecer.

8
Filosofía Mobile
Esta filosofía de diseño se señala que se refiere a un modo de
diseñar que tenga en cuenta, en primera instancia, un dispositivo
móvil. Pantallas reducidas y realizar un escalado, es decir,
aumentar el tamaño y adaptarlo a una pantalla de escritorio.

9
Ejemplos

10
Ejemplos
Sistema de rejillas en función de una pantalla extra small.

Sistema de rejillas en función de una pantalla grande

11
Ejemplos
Sistema de rejillas en función de varias resoluciones de pantalla.

12
Trabajo de Aplicación

13
 Gracias por su
atención
Mg. Juan Carlos Obando Roldán
docenteunt@yahoo.es

14