Guía 14 Gestión de Sistemas de Diseño Web

Información

Diseño Web
Guía del subindicador N° 14

Subindicador N° 14

Aplica los componentes básicos y avanzados de Bootstrap,

para añadirlos en su proyecto, optimizando el tiempo en
diseño.
1
Guía 14 Gestión de Sistemas de Diseño Web
Información

Contenido
1. Introducción......................................................................................................................3
2. Elementos generales: dropdowns, botones e inputs..................................................3
3. Elementos de navegación...............................................................................................3
4. Elementos de ayuda al usuario: breadcrumbs, paginación, etiquetas y badges.....4
5. Elementos para destacar información: jumbotron y cabeceras.................................4
6. Elementos de información de proceso: alertas y barras de progreso.......................4
7. Elementos de contenedores: listgroup, panels y wells...............................................5
8. Ejercicio............................................................................................................................5
9. Actividad.........................................................................................................................11
10. Fuentes consultadas...................................................................................................11

2
Guía 14 Gestión de Sistemas de Diseño Web
Información

SUBINDICADOR N° 14
Aplica los componentes básicos y avanzados de Bootstrap, para
añadirlos en su proyecto, optimizando el tiempo en diseño.

1. Introducción

Los elementos de ayuda de usuario también son una ayuda visual eficaz que indica la
ubicación del usuario dentro de la jerarquía del sitio web, lo que lo convierte en una gran
fuente de información contextual para las páginas de destino.

Dropdownclase usa la posición relativa, cuando queremos que el contenido desplegable se

coloque justo debajo del botón desplegable. Un documento puede tener varios
elementos <nav>. Por ejemplo, uno para la navegación del sitio y otro para la navegación
dentro de la página, compartido con recursos de componentes Bootstrap puede ser utilizado
para la representación inicial del contenido de solo navegación.

2. Elementos generales: dropdowns, botones e inputs

 Dropdowns (lista desplegable):

Crea un cuadro desplegable que aparece cuando el usuario mueve el

mouse sobre un elemento <span> o <button>. Use un elemento
contenedor (como <div>) para crear el contenido desplegable

 Características:
o USA POSITION:RELATIVE, que es necesaria cuando se coloque
justo debajo del botón desplegable.
o Contiene el contenido desplegable y se mostrará al pasar el mouse. 

3. Elementos de navegación.

 Elemento HTML <nav>:

Proporciona enlaces de navegación, ya sea dentro del documento actual

o a otros documentos, navegación con menús, tablas de contenido e
índices.

3
Guía 14 Gestión de Sistemas de Diseño Web
Información

4. Elementos de ayuda al usuario: breadcrumbs, paginación, etiquetas y badges

 Breadcrumbs: en términos de usabilidad, las rutas de navegación reducen la

cantidad de acciones, llegar a una página de nivel superior y mejora
la capacidad de búsqueda de las secciones y páginas del sitio web. 

 Paginación: para mostrar un paginador de datos muy común en sitios web

Bootstrap nos provee de una clase llamada "pagination" que debemos
asignársela a una lista no ordenada de HTML

 Etiquetas: en la página web se escriben las etiquetas que definen categorías

o elementos. En la hoja de estilo, se escribe cómo queremos que sea el estilo
de presentación de las etiquetas (color, tamaño, fuente, bordes, márgenes,
posición, etc.).

 Badges (insignias): proporciona una pequeña etiqueta que se agrega a

otras componentes para mostrar un pequeño mensaje o contador, utiliza un
margen con la clase "ml-1".

5. Elementos para destacar información: jumbotron y cabeceras.

 Jumbotron: es una clase que nos facilita a la hora de crear bloques con un
fondo para crear cabeceras o separar contenido dentro de una estructura de
la página Web.

 Cabeceras: se queda pegada en la parte superior de la ventana, comprende

en el entendimiento básico de HTML y CSS.

6. Elementos de información de proceso: alertas y barras de progreso.

 Alertas: un cuadro de alerta es sólo un contenedor con un color (rojo,

naranja, verde o azul).

4
Guía 14 Gestión de Sistemas de Diseño Web
Información

 Barras de progreso: se puede utilizar para mostrar hasta qué punto se

encuentra en un proceso.

7. Elementos de contenedores: listgroup, panels y wells.

 Listgroup o Grupo de lista: son un componente para mostrar una serie de

contenido.
 
 Panels: la clase panel agrega un margen superior e inferior de 16px y un
relleno izquierdo y derecho de 16px a cualquier elemento.

 Wells: es pozo, agrega un borde redondeado alrededor de un elemento con un

color de fondo gris y algo de relleno.

8. Ejercicio

Crea una información: utilizando elementos aprendida en clase.

a) Crear un archivo de HTML, con nombre Semana_14, ingrese el

siguiente código:

5
Guía 14 Gestión de Sistemas de Diseño Web
Información

b) Guarde: Ctrl + S. Ejecute:

A Insertar glyphicons: (glifo de nube), agregue un archivo HTML.

6
Guía 14 Gestión de Sistemas de Diseño Web
Información

Resultado:

Ingrese un menú desplegable donde, al pasar con el mouse esta se debe

seleccionar las especialidades de Zegel Ipae:

7
Guía 14 Gestión de Sistemas de Diseño Web
Información

Resultado:

Resultado final: (agrega el color de fondo)

8
Guía 14 Gestión de Sistemas de Diseño Web
Información

Agregue una clase. progress-bar-striped para agregar rayas a las barras de

progreso:

Guarda, y ejecuta:

9. A
c
tividad

Agregar los componentes aprendidos en la página web,

que se inició en el curso.

10. F
u
entes consultadas

 Gómez, J. y Alcayde, A. (2015). Construcción de páginas web.

Madrid: RA-MA.
 Orós, J. C. (2014). Diseño de páginas Web con XHTML, JavaScript y CSS.
Madrid: RA-MA Editorial.