1
00:00:00,000 --> 00:00:04,432
[MÚSICA]

2
00:00:04,432 --> 00:00:09,439
Tratemos ahora de entender varios mecanismos que nos permitan

3
00:00:09,439 --> 00:00:16,100
mostrar información a los usuarios superponiendo el contenido de su página web.

4
00:00:16,100 --> 00:00:21,040
Así que aquí vamos a ver tres construcciones diferentes que están disponibles en Bootstrap

5
00:00:21,040 --> 00:00:24,230
llamadas tooltips, povers y modales.

6
00:00:25,570 --> 00:00:30,760
Entonces, ¿qué son las descripciones de herramientas, los elementos emergentes y los modales y cómo son útiles?

7
00:00:30,760 --> 00:00:36,090
Primero veremos algunas ideas básicas, y luego veremos algunos ejemplos.

8
00:00:36,090 --> 00:00:39,844
En el siguiente ejercicio, utilizaremos información sobre herramientas y

9
00:00:39,844 --> 00:00:45,130
modales en nuestra página web, y veremos un ejemplo de elementos emergentes.

10
00:00:45,130 --> 00:00:51,610
Por lo tanto, como mencioné, información sobre herramientas, elementos emergentes y modales son una forma de revelar contenido

11
00:00:51,610 --> 00:00:56,090
a los usuarios, cuando el usuario interactúa con ciertos elementos en su página web.

12
00:00:56,090 --> 00:01:01,280
Digamos, por ejemplo, cuando el ratón del usuario

13
00:01:01,280 --> 00:01:06,640
hace clic en un botón, o pasa el cursor sobre un botón, o hace clic en un vínculo,

14
00:01:06,640 --> 00:01:11,830
o llega a cierto punto de la página web.

15
00:01:11,830 --> 00:01:16,170
Por lo tanto, todos estos activarán la información para ser mostrada a los usuarios.

16
00:01:16,170 --> 00:01:17,470
Por lo tanto, en este caso,

17
00:01:17,470 --> 00:01:22,970
la información se muestra como una superposición en la parte superior de su página web.

18
00:01:22,970 --> 00:01:25,700
Por lo tanto, el contenido subyacente de la página web todavía

19
00:01:25,700 --> 00:01:30,280
está allí, pero esto se presenta encima del contenido subyacente.

20
00:01:30,280 --> 00:01:35,750
Por lo tanto, en términos de flexibilidad, las descripciones de herramientas son las más sencillas de implementar, pero

21
00:01:35,750 --> 00:01:40,160
al mismo tiempo tienen una flexibilidad limitada en la forma en que pueden mostrar la información. Los

22
00:01:40,160 --> 00:01:46,610
elementos emergentes son más flexibles que las descripciones de herramientas, pero también tienen sus propias limitaciones.

23
00:01:46,610 --> 00:01:50,110
Los modales le ofrecen el soporte más amplio para

24
00:01:50,110 --> 00:01:54,980
mostrar contenido de una amplia variedad de formas.

25
00:01:56,250 --> 00:02:02,600
Como ejemplo, vamos a nuestra página web en la que hemos estado trabajando.

26
00:02:02,600 --> 00:02:09,970
Lo ves cuando pasamos el puntero del ratón sobre este botón.

27
00:02:09,970 --> 00:02:14,560
Puede ver este mensaje apareciendo en la pantalla aquí,

28
00:02:14,560 --> 00:02:16,930
con información adicional.

29
00:02:16,930 --> 00:02:18,975
Este es un ejemplo de información sobre herramientas.

30
00:02:20,290 --> 00:02:24,210
Esto le permite mostrar cantidades menores de información a los usuarios.

31
00:02:24,210 --> 00:02:29,340
Así, por ejemplo, si usted está tratando de guiar a los usuarios

32
00:02:29,340 --> 00:02:33,740
a través de su sitio web y quiere que sepan lo que sucede cuando hace clic en varias ubicaciones cualquier página web,

33
00:02:33,740 --> 00:02:38,240
estos tal vez una buena manera de recordarles lo que se espera.

34
00:02:38,240 --> 00:02:40,870
Así que usted podría diseñar fácilmente, por ejemplo,

35
00:02:40,870 --> 00:02:46,250
tutoriales de su sitio web utilizando estas sugerencias para indicar a los usuarios.

36
00:02:46,250 --> 00:02:49,130
Si desea información un poco más detallada,

37
00:02:49,130 --> 00:02:51,300
entonces los popovers serían más útiles.

38
00:02:52,305 --> 00:02:56,920
El mismo ejemplo, implementar y usar un elemento emergente se vería así.

39
00:02:56,920 --> 00:02:58,040
Ahora, en este caso,

40
00:02:58,040 --> 00:03:02,040
tendrá que hacer clic explícitamente en el botón para mostrar el elemento emergente.

41
00:03:02,040 --> 00:03:06,670
Entonces, en ese caso, el elemento emergente se muestra con alguna información de título, y

42
00:03:06,670 --> 00:03:12,210
luego el contenido real en la parte inferior de ese elemento emergente.

43
00:03:12,210 --> 00:03:17,200
Ahora, descartar el elemento emergente requerirá que vuelva a hacer clic en la parte inferior allí.

44
00:03:17,200 --> 00:03:19,640
Así que este es el comportamiento de un popover.

45
00:03:19,640 --> 00:03:26,420
En algunas circunstancias, los elementos emergentes son más útiles que la información de herramientas.

46
00:03:26,420 --> 00:03:29,990
Nuestro tercer tipo de superposición de datos es el modal.

47
00:03:29,990 --> 00:03:33,140
Un modal le permite presentar

48
00:03:33,140 --> 00:03:37,410
información más detallada a los usuarios que una descripción emergente y un elemento emergente.

49
00:03:37,410 --> 00:03:44,060
El contenido del modal se divide en un encabezado, cuerpo y pie de página.

50
00:03:44,060 --> 00:03:49,700
Y el modal en sí puede contener mucha información más detallada.

51
00:03:49,700 --> 00:03:52,740
Y puede usar toda la cuadrícula Bootstrap,

52
00:03:52,740 --> 00:03:57,630
dentro del cuerpo modal, para organizar el contenido real.

53
00:03:57,630 --> 00:04:02,860
Nos fijamos en un par de ejemplos del uso de modales a continuación.

54
00:04:02,860 --> 00:04:06,220
Ir a nuestra página web, verá que en el lado derecho,

55
00:04:06,220 --> 00:04:09,400
aquí tenemos un enlace aquí llamado Login.

56
00:04:09,400 --> 00:04:13,890
Así que cuando haga clic en ese enlace, notará que este modal

57
00:04:13,890 --> 00:04:17,600
con su formulario de inicio de sesión aparece en la pantalla.

58
00:04:17,600 --> 00:04:21,060
Así que este es el comportamiento típico de un modal.

59
00:04:21,060 --> 00:04:23,420
Y aquí puede escribir la información y

60
00:04:23,420 --> 00:04:28,070
luego hacer clic en el botón Iniciar sesión para iniciar sesión en su sitio web.

61
00:04:29,190 --> 00:04:34,890
Ir a su página de Coursera, aquí hay un ejemplo de la vida real del uso de un modal.

62
00:04:34,890 --> 00:04:38,430
Así, por ejemplo, si hace clic en el botón Iniciar sesión aquí,

63
00:04:38,430 --> 00:04:43,190
puede ver que en Coursera, aparece un formulario en la pantalla.

64
00:04:43,190 --> 00:04:47,720
Así que este es otro uso de un modal en su página web.

65
00:04:49,060 --> 00:04:53,252
Ahora que ha visto ejemplos de información sobre herramientas, elementos emergentes y modales,

66
00:04:53,252 --> 00:04:58,522
vamos al siguiente ejercicio, donde crearemos una información sobre herramientas en nuestra página index.html.

67
00:04:58,522 --> 00:05:04,379
También crearemos un modal que permite al usuario escribir información para

68
00:05:04,379 --> 00:05:06,787
iniciar sesión en nuestra página web.

69
00:05:06,787 --> 00:05:10,269
[ MÚSICA]