[MÚSICA]
Tratemos ahora de entender varios mecanismos que nos permitan
mostrar información a los usuarios superponiendo el contenido de su página web.
Así que aquí vamos a ver tres construcciones diferentes que están disponibles en Bootstrap
llamadas tooltips, povers y modales.
Entonces, ¿qué son las descripciones de herramientas, los elementos emergentes y los modales y cómo son útiles?
Primero veremos algunas ideas básicas, y luego veremos algunos ejemplos.
En el siguiente ejercicio, utilizaremos información sobre herramientas y
modales en nuestra página web, y veremos un ejemplo de elementos emergentes.
Por lo tanto, como mencioné, información sobre herramientas, elementos emergentes y modales son una forma de revelar contenido
a los usuarios, cuando el usuario interactúa con ciertos elementos en su página web.
Digamos, por ejemplo, cuando el ratón del usuario
hace clic en un botón, o pasa el cursor sobre un botón, o hace clic en un vínculo,
o llega a cierto punto de la página web.
Por lo tanto, todos estos activarán la información para ser mostrada a los usuarios.
Por lo tanto, en este caso,
la información se muestra como una superposición en la parte superior de su página web.
Por lo tanto, el contenido subyacente de la página web todavía
está allí, pero esto se presenta encima del contenido subyacente.
Por lo tanto, en términos de flexibilidad, las descripciones de herramientas son las más sencillas de implementar, pero
al mismo tiempo tienen una flexibilidad limitada en la forma en que pueden mostrar la información. Los
elementos emergentes son más flexibles que las descripciones de herramientas, pero también tienen sus propias limitaciones.
Los modales le ofrecen el soporte más amplio para
mostrar contenido de una amplia variedad de formas.
Como ejemplo, vamos a nuestra página web en la que hemos estado trabajando.
Lo ves cuando pasamos el puntero del ratón sobre este botón.
Puede ver este mensaje apareciendo en la pantalla aquí,
con información adicional.
Este es un ejemplo de información sobre herramientas.
Esto le permite mostrar cantidades menores de información a los usuarios.
Así, por ejemplo, si usted está tratando de guiar a los usuarios
a través de su sitio web y quiere que sepan lo que sucede cuando hace clic en varias ubicaciones cualquier página web,
estos tal vez una buena manera de recordarles lo que se espera.
Así que usted podría diseñar fácilmente, por ejemplo,
tutoriales de su sitio web utilizando estas sugerencias para indicar a los usuarios.
Si desea información un poco más detallada,
entonces los popovers serían más útiles.
El mismo ejemplo, implementar y usar un elemento emergente se vería así.
Ahora, en este caso,
tendrá que hacer clic explícitamente en el botón para mostrar el elemento emergente.
Entonces, en ese caso, el elemento emergente se muestra con alguna información de título, y
luego el contenido real en la parte inferior de ese elemento emergente.
Ahora, descartar el elemento emergente requerirá que vuelva a hacer clic en la parte inferior allí.
Así que este es el comportamiento de un popover.
En algunas circunstancias, los elementos emergentes son más útiles que la información de herramientas.
Nuestro tercer tipo de superposición de datos es el modal.
Un modal le permite presentar
información más detallada a los usuarios que una descripción emergente y un elemento emergente.
El contenido del modal se divide en un encabezado, cuerpo y pie de página.
Y el modal en sí puede contener mucha información más detallada.
Y puede usar toda la cuadrícula Bootstrap,
dentro del cuerpo modal, para organizar el contenido real.
Nos fijamos en un par de ejemplos del uso de modales a continuación.
Ir a nuestra página web, verá que en el lado derecho,
aquí tenemos un enlace aquí llamado Login.
Así que cuando haga clic en ese enlace, notará que este modal
con su formulario de inicio de sesión aparece en la pantalla.
Así que este es el comportamiento típico de un modal.
Y aquí puede escribir la información y
luego hacer clic en el botón Iniciar sesión para iniciar sesión en su sitio web.
Ir a su página de Coursera, aquí hay un ejemplo de la vida real del uso de un modal.
Así, por ejemplo, si hace clic en el botón Iniciar sesión aquí,
puede ver que en Coursera, aparece un formulario en la pantalla.
Así que este es otro uso de un modal en su página web.
Ahora que ha visto ejemplos de información sobre herramientas, elementos emergentes y modales,
vamos al siguiente ejercicio, donde crearemos una información sobre herramientas en nuestra página index.html.
También crearemos un modal que permite al usuario escribir información para
iniciar sesión en nuestra página web.
[ MÚSICA]