1
00:00:00,000 --> 00:00:04,114
[MUSICA]

2
00:00:04,114 --> 00:00:07,200
Parliamo ora di navigazione.

3
00:00:07,200 --> 00:00:12,980
Cos' è la navigazione, perché la navigazione è importante per il tuo sito web?

4
00:00:12,980 --> 00:00:16,820
E come forniamo le informazioni di navigazione sul tuo sito web?

5
00:00:16,820 --> 00:00:22,264
Quindi, queste sono la domanda a cui cercheremo di rispondere in questa particolare lezione.

6
00:00:23,746 --> 00:00:27,058
La prima domanda ovvia che ti viene in mente è,

7
00:00:27,058 --> 00:00:30,500
perché abbiamo bisogno di avere la navigazione sul sito web?

8
00:00:30,500 --> 00:00:34,680
Come ti rendi conto, la maggior parte dei siti web non sono più pagine singole.

9
00:00:34,680 --> 00:00:37,840
Certo, esistono quei siti web a pagina singola

10
00:00:37,840 --> 00:00:42,500
come la pagina web del tuo professore nel tuo dipartimento di informatica.

11
00:00:42,500 --> 00:00:47,450
Ma la maggior parte dei siti web di solito contengono più di una pagina.

12
00:00:47,450 --> 00:00:52,080
Come abbiamo visto con il nostro sito di confusione che stiamo costruendo,

13
00:00:52,080 --> 00:00:56,300
abbiamo già aggiunto una seconda pagina chiamata aboutus.html page.

14
00:00:56,300 --> 00:01:01,100
Ora il modo in cui abbiamo navigato alla pagina aboutus.html era di

15
00:01:01,100 --> 00:01:06,259
digitarlo esplicitamente nella barra degli indirizzi del nostro browser.

16
00:01:06,259 --> 00:01:11,300
Ma questo è un modo molto scomodo di navigare sul tuo sito web.

17
00:01:12,380 --> 00:01:17,685
Sarebbe molto più sensato fornire un mezzo intuitivo per

18
00:01:17,685 --> 00:01:21,125
gli utenti di navigare al tuo sito web.

19
00:01:21,125 --> 00:01:26,535
Questo mezzo intuitivo potrebbe essere fornito da molti approcci diversi, la

20
00:01:26,535 --> 00:01:32,972
barra di navigazione è uno dei metodi più comuni per indicare queste informazioni.

21
00:01:32,972 --> 00:01:37,342
Quindi, esamineremo diversi modi comuni per fornire

22
00:01:37,342 --> 00:01:41,392
modelli di navigazione su siti Web tipici.

23
00:01:41,392 --> 00:01:46,656
In questo contesto, si sente spesso parlare di architettura delle informazioni.

24
00:01:46,656 --> 00:01:51,458
L' architettura delle informazioni inizia con la struttura del sistema,

25
00:01:51,458 --> 00:01:55,879
rispetto al modo in cui le informazioni sono organizzate, etichettate.

26
00:01:55,879 --> 00:02:01,340
E la navigazione è fornita attraverso il contenuto o attraverso queste informazioni.

27
00:02:01,340 --> 00:02:05,240
Ora l'architettura dell'informazione, di per sé, è un campo tutto grande.

28
00:02:05,240 --> 00:02:09,375
E 'al di là dello scopo di questo corso per coprire l'architetto dell'informazione.

29
00:02:09,375 --> 00:02:14,475
Ma, nel caso in cui tu sia interessato ad organizzare e

30
00:02:14,475 --> 00:02:18,145
fornire informazioni agli utenti attraverso, ad esempio

31
00:02:18,145 --> 00:02:23,067
, siti web, allora ti ho fornito alcuni link nelle risorse aggiuntive

32
00:02:23,067 --> 00:02:27,727
che puoi andare a leggere per ulteriori conoscenze.

33
00:02:27,727 --> 00:02:30,317
Ma in ogni caso, quando si progetta un sito web,

34
00:02:30,317 --> 00:02:35,887
è importante comprendere la necessità di

35
00:02:35,887 --> 00:02:41,697
progettare le strutture di navigazione delle informazioni all'interno del sito web.

36
00:02:43,930 --> 00:02:48,970
E questa organizzazione delle informazioni all'interno del tuo sito web determina anche il

37
00:02:48,970 --> 00:02:53,545
tipo di ausili di navigazione che fornisci sul tuo sito web e in

38
00:02:53,545 --> 00:02:57,280
base al modo in cui tali informazioni sono organizzate.

39
00:02:57,280 --> 00:03:02,300
In genere, un sito web sarebbe organizzato in una sorta di albero strutturato o

40
00:03:02,300 --> 00:03:04,630
un modo gerarchico.

41
00:03:04,630 --> 00:03:07,359
E questo ti impone automaticamente

42
00:03:07,359 --> 00:03:11,913
come progettare il supporto di navigazione all'interno del tuo sito web.

43
00:03:11,913 --> 00:03:16,737
L' uso di una barra di navigazione, di breadcrumbs e di

44
00:03:16,737 --> 00:03:22,405
altri mezzi di navigazione sono molto, molto essenziali per

45
00:03:22,405 --> 00:03:29,760
consentire agli utenti di essere in grado di vedere varie parti del tuo sito web.

46
00:03:29,760 --> 00:03:35,150
Quando visiti la maggior parte dei siti web, spesso cercherai la barra di navigazione.

47
00:03:35,150 --> 00:03:40,080
Si tratta di una sorta di barra che è tipicamente allegata nella parte superiore

48
00:03:40,080 --> 00:03:45,570
del sito web, o talvolta nella parte inferiore del sito web, o talvolta sul lato,

49
00:03:45,570 --> 00:03:50,865
che fornisce indicazioni sufficienti verso il tipo

50
00:03:50,865 --> 00:03:56,365
di informazioni a cui è possibile accedere su questo sito. In

51
00:03:56,365 --> 00:04:01,095
questo modo la barra di navigazione conterrà in genere collegamenti a varie pagine che

52
00:04:01,095 --> 00:04:04,615
fanno parte del tuo sito web.

53
00:04:04,615 --> 00:04:09,425
Quindi una tipica barra di navigazione, come si fa a progettare questo?

54
00:04:09,425 --> 00:04:13,085
Quando si progetta una tipica barra di navigazione, si dovrebbe ovviamente

55
00:04:14,360 --> 00:04:19,500
tenere a mente alcune cose da fare e non fare su come si progetta le barre di navigazione.

56
00:04:19,500 --> 00:04:23,870
La prima è che si utilizzano

57
00:04:23,870 --> 00:04:28,960
termini semplici e semplici all'interno della barra di navigazione per indicare i vari link

58
00:04:28,960 --> 00:04:34,900
che gli utenti possono seguire all'interno del tuo sito web per raggiungere informazioni..

59
00:04:34,900 --> 00:04:37,070
Dovresti fornire una navigazione standardizzata, in modo

60
00:04:37,070 --> 00:04:41,090
che ovunque l'utente si trovi all'interno della gerarchia del tuo sito web,

61
00:04:41,090 --> 00:04:46,590
saprà sempre come tornare alla homepage, come passare alla successiva

62
00:04:46,590 --> 00:04:50,760
, precedente o su e giù per la gerarchia di qualche tipo.

63
00:04:50,760 --> 00:04:54,670
Quindi indicare la posizione dell'utente all'

64
00:04:54,670 --> 00:04:59,910
interno della gerarchia del tuo sito web è molto, molto utile

65
00:04:59,910 --> 00:05:04,790
per fornire un modo user-friendly di navigare i tuoi siti web.

66
00:05:04,790 --> 00:05:09,345
Inoltre, ci sono alcune convenzioni standard che gli utenti seguono

67
00:05:09,345 --> 00:05:12,365
quando queste barre di spostamento sono progettate.

68
00:05:12,365 --> 00:05:17,515
In genere, quando

69
00:05:17,515 --> 00:05:23,832
nella barra di navigazione è incluso il logo del tuo sito Web o della tua azienda, un clic su questi logo o su

70
00:05:23,832 --> 00:05:29,177
un pulsante Home dovrebbe riportarti al livello più alto della gerarchia o della

71
00:05:29,177 --> 00:05:33,711
home page del tuo sito Web, in genere la pagina index.html.

72
00:05:33,711 --> 00:05:38,817
Alcune delle cose da non tenere a mente è che non si dovrebbero avere troppe

73
00:05:38,817 --> 00:05:41,457
scelte nella barra di navigazione.

74
00:05:41,457 --> 00:05:43,225
Quanti sono troppi?

75
00:05:43,225 --> 00:05:48,470
Se si scopre che la navigazione utilizzando le barre di spostamento è troppo ingombrante

76
00:05:48,470 --> 00:05:52,240
, significa che ci sono troppe opzioni sulla barra di spostamento.

77
00:05:52,240 --> 00:05:58,010
Fornire un ragionevole insieme di scelte all'interno della barra di navigazione in modo da poter

78
00:05:58,010 --> 00:06:04,659
indicare le indicazioni che l'utente può seguire nella navigazione attraverso il tuo sito web.

79
00:06:05,880 --> 00:06:11,230
E quando si utilizzano questi elementi di navigazione nella barra di navigazione,

80
00:06:11,230 --> 00:06:17,090
non utilizzare etichette generiche, utilizzare etichette significative.

81
00:06:17,090 --> 00:06:22,159
Ad esempio, se inserisci un'etichetta denominata prodotto nella

82
00:06:22,159 --> 00:06:28,630
barra di navigazione, le persone saranno confuse riguardo a cosa intendi per prodotto.

83
00:06:28,630 --> 00:06:32,650
Oppure, se metti un servizio nella barra di navigazione, potrebbero essere confusi.

84
00:06:32,650 --> 00:06:34,780
Che tipo di servizio stai fornendo?

85
00:06:34,780 --> 00:06:38,790
Sarà più significativo fornire un termine più descrittivo

86
00:06:38,790 --> 00:06:43,710
nelle intestazioni nella barra di navigazione.

87
00:06:43,710 --> 00:06:46,380
Un altro mezzo per fornire la navigazione

88
00:06:46,380 --> 00:06:50,030
agli utenti è quello di fornire ciò che viene chiamato come breadcrumbs.

89
00:06:50,030 --> 00:06:55,895
Questi sono in genere forniti da qualche parte in quella pagina,

90
00:06:55,895 --> 00:07:00,737
tipico verso il bordo superiore della pagina Web,

91
00:07:00,737 --> 00:07:04,954
più vicino all'intestazione di quella pagina Web.

92
00:07:04,954 --> 00:07:10,513
Le breadcrumbs indicano una sorta di

93
00:07:10,513 --> 00:07:16,255
gerarchia di navigazione all'interno della quale sei attualmente nel tuo sito web.

94
00:07:16,255 --> 00:07:21,595
Quindi questo fornisce un'opzione di navigazione secondaria per il tuo sito web.

95
00:07:21,595 --> 00:07:26,185
Quindi questo potrebbe essere posizionato da qualche parte sotto la navigazione primaria.

96
00:07:26,185 --> 00:07:32,082
Può indicare la gerarchia delle pagine attraverso le quali sei andato.

97
00:07:32,082 --> 00:07:36,687
E la posizione corrente può essere evidenziata specificamente

98
00:07:36,687 --> 00:07:38,727
nel breadcrumb lì.

99
00:07:38,727 --> 00:07:43,708
Quindi vari modi in cui le persone possono utilizzare breadcrumb

100
00:07:43,708 --> 00:07:48,588
includono la fornitura di una navigazione basata su percorsi.

101
00:07:48,588 --> 00:07:53,558
Supponiamo, ad esempio, se hai un utente che esegue una serie di passaggi per

102
00:07:53,558 --> 00:07:59,358
completare un'attività sul tuo sito web, ad esempio, prenotando un biglietto aereo.

103
00:07:59,358 --> 00:08:04,780
Quindi è possibile utilizzare un approccio breadcrumb per indicare loro

104
00:08:04,780 --> 00:08:09,880
quale passaggio è attualmente attivo l'utente nella sequenza di passaggi.

105
00:08:09,880 --> 00:08:14,320
Allo stesso modo, se stai fornendo la tua navigazione basata sulla posizione per l'

106
00:08:14,320 --> 00:08:18,460
approccio gerarchico all'interno del tuo sito web.

107
00:08:18,460 --> 00:08:23,785
Quindi, quale livello di gerarchia ti trovi e qual è la parte superiore verso

108
00:08:23,785 --> 00:08:29,680
la radice della tua gerarchia, in modo che possa essere indicato dai tuoi breadcrumbs.

109
00:08:29,680 --> 00:08:35,092
Il tuo breadcrumb potrebbe anche essere basato sugli attributi, il che significa che fornisci un insieme

110
00:08:35,092 --> 00:08:40,754
di scelte indicate nel tuo breadcrumb per l'utente nel momento corrente.

111
00:08:40,754 --> 00:08:45,032
Un tipico framework interfaccia utente front-end offre molti

112
00:08:45,032 --> 00:08:49,840
altri modi per fornire la navigazione nelle pagine Web.

113
00:08:49,840 --> 00:08:54,555
Questi includono schede, pillole, impaginazione, menu a discesa,

114
00:08:54,555 --> 00:08:59,210
fisarmoniche, tag e SchrollSpy, e Affix.

115
00:08:59,210 --> 00:09:04,447
Vedremo alcuni di questi in modo più dettagliato mentre passiamo attraverso

116
00:09:04,447 --> 00:09:10,614
le varie lezioni nei moduli che seguono questa particolare lezione.

117
00:09:10,614 --> 00:09:11,114
[ MUSIC]