1 00:00:00,089 --> 00:00:04,955 [MUSICA] 2 00:00:04,955 --> 00:00:08,311 Sono finiti i giorni in cui i siti web venivano utilizzati esclusivamente per 3 00:00:08,311 --> 00:00:11,385 fornire informazioni agli utenti. In 4 00:00:11,385 --> 00:00:16,380 questi giorni, sulla maggior parte dei siti web, gli utenti saranno in grado di interagire con il sito web 5 00:00:16,380 --> 00:00:21,360 per fornire informazioni, ad esempio facendo clic sui pulsanti o 6 00:00:21,360 --> 00:00:26,240 compilando moduli e digitando qualcosa nelle caselle di ricerca, e così via. 7 00:00:26,240 --> 00:00:29,940 Quindi, come supportiamo questo tipo di interazioni con gli utenti? 8 00:00:29,940 --> 00:00:35,900 Quindi questo è quello che ci accingiamo a trattare in questa particolare lezione e 9 00:00:35,900 --> 00:00:38,333 l'esercizio che segue. 10 00:00:38,333 --> 00:00:43,880 Ad esempio, se visiti il sito Coursera, vedrai che hai 11 00:00:43,880 --> 00:00:49,091 dei pulsanti in alto qui che puoi cliccare per raggiungere luoghi diversi. 12 00:00:49,091 --> 00:00:54,954 Potresti avere una casella di ricerca, in cui puoi digitare informazioni, 13 00:00:54,954 --> 00:01:01,880 per cercare, ad esempio, lo sviluppo web stack completo e, così via. 14 00:01:01,880 --> 00:01:08,286 Quindi, quello che notiamo è che l'interazione dell'utente deve essere supportata 15 00:01:08,286 --> 00:01:14,808 sui siti Web utilizzando molti approcci diversi tra cui pulsanti, 16 00:01:14,808 --> 00:01:20,054 moduli, caselle di testo, caselle di controllo, e molti altri. Le 17 00:01:20,054 --> 00:01:25,710 prime interazioni con i siti web sono state fornite principalmente tramite collegamenti ipertestuali. 18 00:01:25,710 --> 00:01:29,852 Così si potrebbe fare clic su un collegamento ipertestuale e andare ad altri luoghi e così via, ma 19 00:01:29,852 --> 00:01:31,046 questo è ovviamente, il 20 00:01:31,046 --> 00:01:35,559 collegamento ipertestuale è solo uno dei molti metodi di interazione con il tuo sito web. 21 00:01:35,559 --> 00:01:40,335 Potresti avere pulsanti inclusi sul sito web che, quando cliccato, 22 00:01:40,335 --> 00:01:44,580 comporterà alcune azioni intraprese sul sito web. 23 00:01:44,580 --> 00:01:49,900 Potresti avere moduli compilati per fornire informazioni al sito web. 24 00:01:49,900 --> 00:01:54,500 Così, quando si guarda a come si dovrebbe includere tali 25 00:01:54,500 --> 00:01:58,660 funzionalità di interazione utente nel vostro sito web, si vedrà che si potrebbe utilizzare qualcosa 26 00:01:58,660 --> 00:02:03,930 come i tag a che sono utili per fornire collegamenti ipertestuali, 27 00:02:03,930 --> 00:02:10,100 poi si hanno i tag pulsante che consentono di includere pulsanti nel vostro sito web. 28 00:02:10,100 --> 00:02:15,060 Ora quello che stiamo andando a guardare è come facciamo a formattare con un tag sui 29 00:02:15,060 --> 00:02:19,850 tag pulsante utilizzando classi bootstrap in modo da poterli stile 30 00:02:20,910 --> 00:02:24,775 per falsificare il tema generale del bootstrap. 31 00:02:25,785 --> 00:02:30,075 HTML include già gli elementi del modulo e gli elementi di input in esso. 32 00:02:30,075 --> 00:02:34,640 Ora, possiamo vedere come bootstrap migliora questi elementi fornendo 33 00:02:34,640 --> 00:02:40,310 caratteristiche di stile per i moduli e vari elementi che vanno nei moduli. 34 00:02:40,310 --> 00:02:45,950 I pulsanti forniscono ovviamente un modo semplice di interagire con il tuo sito web. 35 00:02:45,950 --> 00:02:49,600 Quindi, quando hai un pulsante sul tuo sito web, potresti passare il mouse sul pulsante, 36 00:02:49,600 --> 00:02:55,100 potresti fare clic sul pulsante e aspettarti che qualcosa accada nel processo. 37 00:02:55,100 --> 00:02:59,830 Il comportamento del pulsante dipende da dove è posizionato nel bootstrap. 38 00:02:59,830 --> 00:03:03,060 Se il pulsante si trova all'interno di un modulo, ad esempio, 39 00:03:03,060 --> 00:03:08,280 in genere il clic del pulsante comporterà l'invio 40 00:03:08,280 --> 00:03:13,270 del modulo a un server o l'annullamento delle informazioni del modulo. 41 00:03:13,270 --> 00:03:19,200 Un pulsante esterno a un modulo potrebbe avere altri modi per fornire interazione. 42 00:03:19,200 --> 00:03:24,589 Allo stesso modo, il < a > tag che abbiamo tradizionalmente associato ai 43 00:03:25,690 --> 00:03:31,550 collegamenti ipertestuali potrebbe anche essere dirottato per essere stilato e 44 00:03:31,550 --> 00:03:34,170 presentato sotto forma di un pulsante. 45 00:03:34,170 --> 00:03:39,356 Quindi qui vedremo come bootstrap fornisce classi che possono essere 46 00:03:39,356 --> 00:03:46,580 utilizzate per formattare il tag in un pulsante da presentare sul tuo sito web. 47 00:03:46,580 --> 00:03:51,600 Vedremo anche vari elementi del modulo, come gli elementi di input, 48 00:03:51,600 --> 00:03:56,390 selezionare, il pulsante e anche gli elementi di testo AD, e 49 00:03:56,390 --> 00:04:03,320 come li usiamo all'interno dei nostri moduli per progettare e 50 00:04:03,320 --> 00:04:09,660 costruire un modulo che può essere incluso nel nostro sito web. 51 00:04:09,660 --> 00:04:13,640 Quindi l'esercizio che segue questa particolare lezione ti introdurrà al 52 00:04:13,640 --> 00:04:17,440 supporto bootstrap per i pulsanti di stile e 53 00:04:17,440 --> 00:04:22,670 vedrà anche come i vari elementi del modulo possono essere migliorati usando 54 00:04:22,670 --> 00:04:27,730 le classi bootstrap per presentare i classici moduli Bootstrap.