1
00:00:00,000 --> 00:00:04,432
[MUSIC]

2
00:00:04,432 --> 00:00:09,439
Cerchiamo ora di capire diversi meccanismi per permetterci di

3
00:00:09,439 --> 00:00:16,100
visualizzare informazioni agli utenti che sovrappongono il contenuto della tua pagina web.

4
00:00:16,100 --> 00:00:21,040
Quindi qui vedremo tre diversi costrutti che sono disponibili in Bootstrap

5
00:00:21,040 --> 00:00:24,230
chiamati tooltips, popover e modali.

6
00:00:25,570 --> 00:00:30,760
Quindi quali sono i suggerimenti, i popover e i modali e come sono utili?

7
00:00:30,760 --> 00:00:36,090
Vedremo prima alcune idee di base, e poi andremo a guardare alcuni esempi.

8
00:00:36,090 --> 00:00:39,844
Nell' esercizio che segue, useremo descrizioni comandi e

9
00:00:39,844 --> 00:00:45,130
modali nella nostra pagina web e vedremo un esempio di popover.

10
00:00:45,130 --> 00:00:51,610
Quindi, come ho detto, descrizioni comandi, popover e modali sono un modo per rivelare contenuti

11
00:00:51,610 --> 00:00:56,090
agli utenti, quando l'utente interagisce con determinati elementi della tua pagina web.

12
00:00:56,090 --> 00:01:01,280
Ad esempio, quando il mouse dell'utente

13
00:01:01,280 --> 00:01:06,640
fa clic su un pulsante, o passa il mouse su un pulsante, o fa clic su un link,

14
00:01:06,640 --> 00:01:11,830
o raggiunge un certo punto della tua pagina web.

15
00:01:11,830 --> 00:01:16,170
Quindi tutti questi attiveranno le informazioni da visualizzare agli utenti.

16
00:01:16,170 --> 00:01:17,470
Quindi, in questo caso,

17
00:01:17,470 --> 00:01:22,970
le informazioni vengono visualizzate come una sovrapposizione sopra la tua pagina web.

18
00:01:22,970 --> 00:01:25,700
Quindi il contenuto sottostante della pagina web è ancora lì, ma

19
00:01:25,700 --> 00:01:30,280
questo è disposto sopra il contenuto sottostante.

20
00:01:30,280 --> 00:01:35,750
Quindi, in termini di flessibilità, le descrizioni comandi sono le più semplici da implementare, ma

21
00:01:35,750 --> 00:01:40,160
allo stesso tempo hanno una flessibilità limitata nel modo in cui possono visualizzare le informazioni. I

22
00:01:40,160 --> 00:01:46,610
popover sono più flessibili delle descrizioni comandi, ma hanno anche le loro limitazioni.

23
00:01:46,610 --> 00:01:50,110
Modals ti offre il supporto più esteso per la

24
00:01:50,110 --> 00:01:54,980
visualizzazione dei contenuti in un'ampia varietà di modi.

25
00:01:56,250 --> 00:02:02,600
Ad esempio, andiamo alla nostra pagina web su cui abbiamo lavorato.

26
00:02:02,600 --> 00:02:09,970
Lo vedi quando passiamo il puntatore del mouse su questo pulsante.

27
00:02:09,970 --> 00:02:14,560
Questo messaggio viene visualizzato sullo schermo qui,

28
00:02:14,560 --> 00:02:16,930
con alcune informazioni aggiuntive.

29
00:02:16,930 --> 00:02:18,975
Questo è un esempio di descrizione comando.

30
00:02:20,290 --> 00:02:24,210
Ciò consente di visualizzare piccole quantità di informazioni per gli utenti.

31
00:02:24,210 --> 00:02:29,340
Quindi, per esempio, se stai cercando di guidare gli utenti attraverso il tuo sito web e

32
00:02:29,340 --> 00:02:33,740
vuoi che sappiano cosa succede quando fai clic su varie posizioni qualsiasi pagina web,

33
00:02:33,740 --> 00:02:38,240
questi forse un buon modo per ricordare loro ciò che è previsto.

34
00:02:38,240 --> 00:02:40,870
Così si potrebbe facilmente progettare, ad esempio, le

35
00:02:40,870 --> 00:02:46,250
procedure dettagliate del vostro sito Web utilizzando questi suggerimenti per indicare agli utenti.

36
00:02:46,250 --> 00:02:49,130
Se vuoi informazioni un po 'più dettagliate,

37
00:02:49,130 --> 00:02:51,300
allora i popover sarebbero più utili.

38
00:02:52,305 --> 00:02:56,920
Lo stesso esempio, implementare e utilizzare un popover sarebbe simile a questo.

39
00:02:56,920 --> 00:02:58,040
Ora, in questo caso,

40
00:02:58,040 --> 00:03:02,040
dovrai fare clic esplicitamente sul pulsante per mostrare il popover.

41
00:03:02,040 --> 00:03:06,670
Quindi, in tal caso, il popover viene mostrato con alcune informazioni sul titolo e

42
00:03:06,670 --> 00:03:12,210
quindi il contenuto effettivo nella parte inferiore di quel popover.

43
00:03:12,210 --> 00:03:17,200
Ora, respingendo il popover richiederà di nuovo di fare clic sul fondo lì.

44
00:03:17,200 --> 00:03:19,640
Quindi questo è il comportamento di un popover.

45
00:03:19,640 --> 00:03:26,420
In alcune circostanze, i popover sono più utili delle descrizioni comandi.

46
00:03:26,420 --> 00:03:29,990
Il nostro terzo tipo di overlay di dati è il modale.

47
00:03:29,990 --> 00:03:33,140
Un modale consente di presentare

48
00:03:33,140 --> 00:03:37,410
informazioni più dettagliate agli utenti rispetto a un tooltip e popover.

49
00:03:37,410 --> 00:03:44,060
Il contenuto della modale è a sua volta diviso in un'intestazione, corpo e piè di pagina.

50
00:03:44,060 --> 00:03:49,700
E il modale stesso può contenere informazioni molto più dettagliate.

51
00:03:49,700 --> 00:03:52,740
E puoi usare l'intera griglia Bootstrap,

52
00:03:52,740 --> 00:03:57,630
all'interno del corpo modale, per organizzare il contenuto effettivo.

53
00:03:57,630 --> 00:04:02,860
Guardiamo un paio di esempi dell'uso di modali prossimo.

54
00:04:02,860 --> 00:04:06,220
Andando alla nostra pagina web, vedrete che sul lato destro,

55
00:04:06,220 --> 00:04:09,400
qui abbiamo un link qui chiamato Login.

56
00:04:09,400 --> 00:04:13,890
Quindi, quando fai clic su quel link, noterai che questo modale

57
00:04:13,890 --> 00:04:17,600
con il loro modulo di login è spuntato sullo schermo.

58
00:04:17,600 --> 00:04:21,060
Quindi questo è il comportamento tipico di un modale.

59
00:04:21,060 --> 00:04:23,420
E così qui è possibile digitare le informazioni, e

60
00:04:23,420 --> 00:04:28,070
quindi fare clic sul pulsante Accedi per accedere al tuo sito web.

61
00:04:29,190 --> 00:04:34,890
Andando alla tua pagina Coursera, ecco un esempio di vita reale dell'uso di un modale.

62
00:04:34,890 --> 00:04:38,430
Ad esempio, se fai clic sul pulsante Accedi qui,

63
00:04:38,430 --> 00:04:43,190
puoi vedere che su Coursera, appare un modulo sullo schermo.

64
00:04:43,190 --> 00:04:47,720
Quindi questo è un altro uso di un modale nella tua pagina web.

65
00:04:49,060 --> 00:04:53,252
Ora che avete visto esempi di descrizioni comandi, popover e modali,

66
00:04:53,252 --> 00:04:58,522
andiamo al prossimo esercizio, dove creeremo un suggerimento sulla nostra pagina index.html.

67
00:04:58,522 --> 00:05:04,379
Creeremo anche una modale che permette all'utente di digitare le informazioni per

68
00:05:04,379 --> 00:05:06,787
accedere alla nostra pagina web.

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