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

2
00:00:04,432 --> 00:00:09,439
Vamos agora tentar entender vários mecanismos para nos permitir

3
00:00:09,439 --> 00:00:16,100
exibir informações para os usuários sobrepondo o conteúdo de sua página web.

4
00:00:16,100 --> 00:00:21,040
Então, aqui vamos olhar para três construções diferentes que estão disponíveis no Bootstrap

5
00:00:21,040 --> 00:00:24,230
chamados tooltips, popovers e modals.

6
00:00:25,570 --> 00:00:30,760
Então, o que são dicas de ferramentas, popovers e modais e como eles são úteis?

7
00:00:30,760 --> 00:00:36,090
Vamos olhar para algumas idéias básicas primeiro, e então vamos olhar para alguns exemplos.

8
00:00:36,090 --> 00:00:39,844
No exercício que se segue, usaremos dicas de ferramentas e

9
00:00:39,844 --> 00:00:45,130
modais em nossa página da web, e veremos um exemplo de popovers.

10
00:00:45,130 --> 00:00:51,610
Então, como eu mencionei, dicas de ferramentas, popovers e modais são uma maneira de revelar conteúdo

11
00:00:51,610 --> 00:00:56,090
para os usuários, quando o usuário interage com certos elementos em sua página web.

12
00:00:56,090 --> 00:01:01,280
Digamos, por exemplo, quando o mouse do usuário

13
00:01:01,280 --> 00:01:06,640
clica em um botão, ou passa o mouse sobre um botão, clica em um link

14
00:01:06,640 --> 00:01:11,830
ou atinge um determinado ponto em sua página da Web.

15
00:01:11,830 --> 00:01:16,170
Então, tudo isso irá acionar informações a serem exibidas para os usuários.

16
00:01:16,170 --> 00:01:17,470
Então, neste caso,

17
00:01:17,470 --> 00:01:22,970
as informações são exibidas como uma sobreposição na parte superior da sua página web.

18
00:01:22,970 --> 00:01:25,700
Assim, o conteúdo subjacente da página web ainda está lá, mas

19
00:01:25,700 --> 00:01:30,280
isso é colocado para fora em cima do conteúdo subjacente.

20
00:01:30,280 --> 00:01:35,750
Assim, em termos de flexibilidade, as dicas de ferramentas são as mais simples de implementar, mas

21
00:01:35,750 --> 00:01:40,160
ao mesmo tempo têm flexibilidade limitada em como podem exibir informações. Os

22
00:01:40,160 --> 00:01:46,610
popovers são mais flexíveis do que as dicas de ferramentas, mas também têm suas próprias limitações.

23
00:01:46,610 --> 00:01:50,110
Os Modals oferecem o suporte mais extenso para

24
00:01:50,110 --> 00:01:54,980
exibir conteúdo de uma ampla variedade de maneiras.

25
00:01:56,250 --> 00:02:02,600
Como exemplo, vamos para a nossa página web em que temos trabalhado.

26
00:02:02,600 --> 00:02:09,970
Você vê isso quando passamos o cursor do mouse sobre este botão.

27
00:02:09,970 --> 00:02:14,560
Você vê esta mensagem aparecendo na tela aqui,

28
00:02:14,560 --> 00:02:16,930
com algumas informações adicionais.

29
00:02:16,930 --> 00:02:18,975
Este é um exemplo de uma dica de ferramenta.

30
00:02:20,290 --> 00:02:24,210
Isso permite que você exiba quantidades menores de informações para os usuários.

31
00:02:24,210 --> 00:02:29,340
Então, por exemplo, se você está tentando orientar os usuários através de seu site e

32
00:02:29,340 --> 00:02:33,740
quer que eles saibam o que acontece quando você clica em vários locais em qualquer página da web,

33
00:02:33,740 --> 00:02:38,240
estes talvez uma boa maneira de lembrá-los do que é esperado.

34
00:02:38,240 --> 00:02:40,870
Assim, você pode facilmente projetar, por exemplo,

35
00:02:40,870 --> 00:02:46,250
instruções passo a passo do seu site usando estas dicas de ferramentas para indicar aos usuários.

36
00:02:46,250 --> 00:02:49,130
Se você quiser informações um pouco mais detalhadas,

37
00:02:49,130 --> 00:02:51,300
então popovers seria mais útil.

38
00:02:52,305 --> 00:02:56,920
O mesmo exemplo, implementar e usar um popover seria assim.

39
00:02:56,920 --> 00:02:58,040
Agora, neste caso,

40
00:02:58,040 --> 00:03:02,040
você terá que clicar explicitamente no botão para mostrar o popover.

41
00:03:02,040 --> 00:03:06,670
Então, nesse caso, o popover é mostrado com algumas informações de título, e,

42
00:03:06,670 --> 00:03:12,210
em seguida, o conteúdo real na parte inferior desse popover.

43
00:03:12,210 --> 00:03:17,200
Agora, descartar o popover exigirá que você clique novamente na parte inferior lá.

44
00:03:17,200 --> 00:03:19,640
Então este é o comportamento de um popover.

45
00:03:19,640 --> 00:03:26,420
Em algumas circunstâncias, popovers são mais úteis do que dicas de ferramentas.

46
00:03:26,420 --> 00:03:29,990
Nosso terceiro tipo de sobreposição de dados é o modal.

47
00:03:29,990 --> 00:03:33,140
Um modal permite que você apresente

48
00:03:33,140 --> 00:03:37,410
informações mais detalhadas aos usuários do que uma dica de ferramenta e popover.

49
00:03:37,410 --> 00:03:44,060
O conteúdo do modal é em si dividido em um cabeçalho, corpo e rodapé.

50
00:03:44,060 --> 00:03:49,700
E o próprio modal pode conter informações muito mais detalhadas.

51
00:03:49,700 --> 00:03:52,740
E você pode usar toda a grade Bootstrap,

52
00:03:52,740 --> 00:03:57,630
dentro do corpo modal, para organizar o conteúdo real.

53
00:03:57,630 --> 00:04:02,860
Olhamos para alguns exemplos do uso de modais a seguir.

54
00:04:02,860 --> 00:04:06,220
Indo para a nossa página web, você verá que no lado direito,

55
00:04:06,220 --> 00:04:09,400
aqui temos um link aqui chamado Login.

56
00:04:09,400 --> 00:04:13,890
Então, quando você clicar nesse link, você notará que este modal

57
00:04:13,890 --> 00:04:17,600
com seu formulário de login é exibido na tela.

58
00:04:17,600 --> 00:04:21,060
Então este é o comportamento típico de um modal.

59
00:04:21,060 --> 00:04:23,420
Assim, aqui você pode digitar as informações e,

60
00:04:23,420 --> 00:04:28,070
em seguida, clicar no botão Entrar para entrar no seu site.

61
00:04:29,190 --> 00:04:34,890
Indo para a sua página Coursera, aqui está um exemplo real do uso de um modal.

62
00:04:34,890 --> 00:04:38,430
Então, por exemplo, se você clicar no botão Login aqui,

63
00:04:38,430 --> 00:04:43,190
você pode ver que no Coursera, um formulário aparece na tela.

64
00:04:43,190 --> 00:04:47,720
Então este é outro uso de um modal em sua página web.

65
00:04:49,060 --> 00:04:53,252
Agora que você viu exemplos de dicas de ferramentas, popovers e modais,

66
00:04:53,252 --> 00:04:58,522
vamos para o próximo exercício, onde criaremos uma dica de ferramenta em nossa página index.html.

67
00:04:58,522 --> 00:05:04,379
Também criaremos um modal que permite ao usuário digitar informações para

68
00:05:04,379 --> 00:05:06,787
fazer login em nossa página web.

69
00:05:06,787 --> 00:05:10,269
[ MUSIC]