1 00:00:00,000 --> 00:00:02,700 [Powered by Google Translate] [Settimana 9, continua] 2 00:00:02,700 --> 00:00:05,160 [David J. Malan - Harvard University] 3 00:00:05,160 --> 00:00:07,020 [Questo è CS50. - CS50.TV] 4 00:00:07,940 --> 00:00:13,340 >> Questo è CS50. Questa è la fine della settimana 9. Grazie mille. 5 00:00:13,340 --> 00:00:15,310 Infine. Settimana 9. Ho capito. 6 00:00:15,310 --> 00:00:18,590 Oggi continuiamo la nostra conversazione sulla programmazione web 7 00:00:18,590 --> 00:00:21,660 con un occhio verso il progetto definitivo, non perché si deve fare qualcosa di web-based 8 00:00:21,660 --> 00:00:25,610 per i progetti definitivi, ma perché sia ​​per progetti definitivi o dopo CS50 9 00:00:25,610 --> 00:00:29,000 questo è certamente la direzione in cui sta andando il software moderno. 10 00:00:29,000 --> 00:00:31,770 E tuttavia non è in realtà una cosa facile. 11 00:00:31,770 --> 00:00:35,040 In effetti, una delle cose più difficili da fare è l'aspetto del design. 12 00:00:35,040 --> 00:00:38,600 >> Per esempio, in base alla progettazione intendiamo ottenere effettivamente l'interfaccia utente 13 00:00:38,600 --> 00:00:40,420 o l'esperienza diritto utente. 14 00:00:40,420 --> 00:00:43,200 Oserei dire - e sappiamo da un insieme problema recente 15 00:00:43,200 --> 00:00:45,960 quando alcuni di voi in onda le lamentele di qualche pezzo di software 16 00:00:45,960 --> 00:00:49,000 o hardware che si fa infuriare, sia nel campus o off - 17 00:00:49,000 --> 00:00:51,930 ci sono un sacco di siti là fuori, ci sono un sacco di hardware là fuori, 18 00:00:51,930 --> 00:00:53,900 quel tipo di schifo. 19 00:00:53,900 --> 00:00:58,730 Ma la realtà è che per fare le cose che sono facili da usare ma sono comunque potenti 20 00:00:58,730 --> 00:01:00,550 è una sfida molto difficile. 21 00:01:00,550 --> 00:01:03,680 Quindi, per oggi ho chiesto a Giuseppe e Tommy di unirsi a me qui 22 00:01:03,680 --> 00:01:06,680 in modo da poter avere una conversazione, sia sul design 23 00:01:06,680 --> 00:01:09,090 e che tipo di processi di pensiero dovrebbe iniziare a passare attraverso la testa 24 00:01:09,090 --> 00:01:12,040 quando si progetta i progetti finali, i vostri sforzi futuri. 25 00:01:12,040 --> 00:01:15,040 E poi, con l'aiuto di Tommy vedremo alcuni dei dettagli di implementazione. 26 00:01:15,040 --> 00:01:18,440 Come si può avere una visione su carta o nella vostra mente 27 00:01:18,440 --> 00:01:20,760 che è possibile eseguire codice 28 00:01:20,760 --> 00:01:24,030 utilizzando alcune delle tecnologie e delle tecniche che abbiamo appena cominciato a parlare, 29 00:01:24,030 --> 00:01:29,080 vale a dire Javascript e qualcosa di ancora più recente, vale a dire AJAX, JavaScript asincrono. 30 00:01:29,080 --> 00:01:32,950 Che ti permette di creare tutte le più dinamica di una interfaccia utente 31 00:01:32,950 --> 00:01:35,780 prendendo i dati sempre più progressivamente da un server. 32 00:01:35,780 --> 00:01:38,560 Così vedremo alcuni di questi frammenti, come bene oggi. 33 00:01:38,560 --> 00:01:41,800 Per inciso, se siete interessati a concentrare in informatica 34 00:01:41,800 --> 00:01:45,010 o minoring in informatica, sappiate che questo Venerdì a mezzogiorno 35 00:01:45,010 --> 00:01:48,750 in Maxwell Dworkin 221 ci sarà un evento di pizze 36 00:01:48,750 --> 00:01:50,780 dove si può imparare un po 'di più sulla scienza del computer. 37 00:01:50,780 --> 00:01:54,860 Sulla strada fuori dalla porta oggi sarete in grado di far salire una guida non ufficiale a CS ad Harvard. 38 00:01:54,860 --> 00:01:57,290 Ci ha messo su i bidoni della spazzatura fuori all'altezza della vita 39 00:01:57,290 --> 00:01:59,750 in modo che se vuoi prendere questo e imparare un po 'di più su CS, 40 00:01:59,750 --> 00:02:02,480 che sarà lì per voi come è stato in settimana 0. 41 00:02:02,480 --> 00:02:06,500 Inoltre, se si desidera unirsi a noi per il pranzo CS50 questo Venerdì alle 01:15, 42 00:02:06,500 --> 00:02:09,800 testa a cs50.net/lunch. 43 00:02:09,800 --> 00:02:13,260 Senza ulteriori indugi, vi do l'insegnamento collega Joseph Ong. 44 00:02:13,260 --> 00:02:19,190 Ciao. [Applausi] 45 00:02:19,190 --> 00:02:20,770 Grazie. 46 00:02:20,770 --> 00:02:24,780 La prima volta che ho imparato a conoscere progetto era in una classe che qui chiamano CS179. 47 00:02:24,780 --> 00:02:28,040 >> Il professore, al momento ci ha raccontato la storia di un altro professore 48 00:02:28,040 --> 00:02:31,640 che era andato a un hotel e utilizzato i rubinetti. 49 00:02:31,640 --> 00:02:35,630 Qualcuno può dirmi quali sono le due manopole a sinistra ea destra fare? 50 00:02:35,630 --> 00:02:39,080 [Studente] calda e fredda. >> Calda e fredda. Buona. 51 00:02:39,080 --> 00:02:41,430 Quello che normalmente si aspetta, giusto? 52 00:02:41,430 --> 00:02:46,960 Il professore dopo aver usato il rubinetto vuole fare una doccia, e si procede per utilizzare questo. 53 00:02:46,960 --> 00:02:51,310 Pensa che la sinistra e la parte destra sono per caldo e freddo, giusto? 54 00:02:51,310 --> 00:02:55,470 Ma qualcuno può dirmi cosa effettivamente fare questi? 55 00:02:55,470 --> 00:02:58,060 Tutte le mani? 56 00:02:58,060 --> 00:03:01,740 [Risposta degli studenti incomprensibile] >> Un suggerimento è? 57 00:03:01,740 --> 00:03:05,860 [Risposta incomprensibile studente] Temperatura >>? 58 00:03:05,860 --> 00:03:10,460 Così uno di loro controlla la temperatura e gli altri controlli? >> [Studente] Pressione dell'acqua. 59 00:03:10,460 --> 00:03:12,350 Pressione dell'acqua. Buona. 60 00:03:12,350 --> 00:03:15,100 Il professore entra in questo e, pensando che stanno controllando calda e fredda, 61 00:03:15,100 --> 00:03:21,470 gira quello giusto, che secondo lui è a caldo, tutta la strada fino 62 00:03:21,470 --> 00:03:23,560 perché vuole fare una doccia calda. 63 00:03:23,560 --> 00:03:28,100 Ebbene, questi in realtà non corrispondono, quindi ottiene questa esperienza non molto divertente 64 00:03:28,100 --> 00:03:31,110 di essere in una doccia fredda, e tutti sappiamo come ci si sente. 65 00:03:31,110 --> 00:03:33,620 Questo è un esempio di un difetto di progettazione. 66 00:03:33,620 --> 00:03:37,040 Quello che voglio dire con questo è la sua aspettativa dal rubinetto 67 00:03:37,040 --> 00:03:39,420 non corrisponde a quanto è uscito dalla doccia, 68 00:03:39,420 --> 00:03:41,780 che è una specie di peccato per lui. 69 00:03:41,780 --> 00:03:44,990 Quindi questo è un esempio di un difetto di progettazione che accade nella vita reale. 70 00:03:44,990 --> 00:03:48,020 Ma vediamo tutti i tipi di quelle anche altri. 71 00:03:48,020 --> 00:03:50,390 Non siamo probabilmente i fan del sistema MBTA. 72 00:03:50,390 --> 00:03:55,560 Si tratta di un sistema di metropolitana in realtà a Londra, che dice: "Questo pulsante non è in uso." 73 00:03:55,560 --> 00:04:00,220 Perché è anche lì? Perché ci importa? 74 00:04:00,220 --> 00:04:02,810 Quando ero un ragazzino, essendo quella esperti di tecnologia in casa, 75 00:04:02,810 --> 00:04:05,050 ogni volta che il computer potrebbe andare in crash, mia madre sarebbe venuto a me, 76 00:04:05,050 --> 00:04:07,060 avermi mostrato questa schermata e mi chiede cosa è successo. 77 00:04:07,060 --> 00:04:09,210 >> Anche io non so che cosa questo significa. 78 00:04:11,890 --> 00:04:14,700 [Risate] Cosa? 79 00:04:16,950 --> 00:04:18,019 [Risate] 80 00:04:18,720 --> 00:04:23,050 A volte ci sentiamo come gli sviluppatori di software sono solo traina noi. 81 00:04:23,050 --> 00:04:28,460 Dato che gli utenti siamo come, "Che cosa sta succedendo? Qualcuno ci dicono." 82 00:04:28,460 --> 00:04:32,140 Il tutto si riduce a una questione di design. 83 00:04:32,140 --> 00:04:34,650 Design, come si può vedere, non è puramente di estetica, 84 00:04:34,650 --> 00:04:37,230 non si tratta di come stanno le cose. 85 00:04:37,230 --> 00:04:41,720 Vediamo qui che questo piccolo pop-up qui sembra in realtà piuttosto bella. 86 00:04:41,720 --> 00:04:45,290 Ha un ombra sullo sfondo, ha raggi di frontiera in corso. 87 00:04:45,290 --> 00:04:47,550 È un po 'carina. 88 00:04:47,550 --> 00:04:51,480 Non è davvero ben progettato, perché non è molto facile da usare. 89 00:04:51,480 --> 00:04:54,920 Quel piccolo pop-up che si apre in realtà non mi danno alcuna informazione 90 00:04:54,920 --> 00:04:58,450 in merito a quello che sta succedendo, non mi dice nulla come l'utente 91 00:04:58,450 --> 00:05:01,400 su come recuperare da questo errore. 92 00:05:01,400 --> 00:05:05,190 Vogliamo pensare a cose che il design non è. 93 00:05:05,190 --> 00:05:06,670 Primo, non è l'estetica. 94 00:05:06,670 --> 00:05:10,800 E ', inoltre, non ripieno la vostra applicazione con tonnellate di funzioni inutili. 95 00:05:10,800 --> 00:05:14,890 Se sei un ristorante tailandese, probabilmente non si vuole essere un dentista, allo stesso tempo. 96 00:05:14,890 --> 00:05:17,720 E con Domande di Facebook, non che molta gente ha usato 97 00:05:17,720 --> 00:05:21,130 e non era davvero al centro di quello che stavano costruendo. 98 00:05:21,130 --> 00:05:24,200 E così è bello non pensare tanto la quantità delle cose 99 00:05:24,200 --> 00:05:26,390 che avete deciso di mettere alla vostra applicazione, ma la qualità 100 00:05:26,390 --> 00:05:28,910 e come si sta facendo, che migliore esperienza utente 101 00:05:28,910 --> 00:05:32,540 in realtà da migliorare su quello che già avete. 102 00:05:32,540 --> 00:05:37,040 >> In poche parole, il design ci dice ciò che dobbiamo costruire. 103 00:05:37,040 --> 00:05:41,950 Per esempio, se stiamo costruendo qualcosa che dobbiamo cercare le cose, 104 00:05:41,950 --> 00:05:45,970 come Google, per esempio, dobbiamo fare le cose in maniera 105 00:05:45,970 --> 00:05:48,950 che richiede all'utente di prendere un sacco di click per arrivare a quello che vogliono, 106 00:05:48,950 --> 00:05:52,580 o dobbiamo fare in modo, ad esempio, con Google Instant o completamento automatico 107 00:05:52,580 --> 00:05:54,970 che ci permette di raggiungere i nostri risultati più velocemente? 108 00:05:54,970 --> 00:05:58,740 Ingegneria comporta, come Tommy vi mostrerà, in realtà costruendo. 109 00:05:58,740 --> 00:06:01,890 Ci sono molti tipi di design. 110 00:06:01,890 --> 00:06:06,070 Ad esempio, se si sta costruendo qualcosa di implementare qualcosa di 111 00:06:06,070 --> 00:06:09,770 in un paese del Terzo Mondo dove non c'è elettricità molto o molto che la tecnologia, 112 00:06:09,770 --> 00:06:11,440 si deve progettare quello che si sta costruendo 113 00:06:11,440 --> 00:06:14,210 in un modo che consente facilmente l'accesso alle persone lì. 114 00:06:14,210 --> 00:06:18,290 Ma quali tipi di decisioni di progettazione altri potrebbero esserci 115 00:06:18,290 --> 00:06:21,850 o potrebbe essere coinvolto in qualcosa di simile? 116 00:06:23,690 --> 00:06:25,660 Gia '. Vedo una mano. 117 00:06:25,660 --> 00:06:37,200 [Risposta incomprensibile studente] destra >>. Esattamente. L'accessibilità è una cosa. 118 00:06:37,200 --> 00:06:40,870 Un sacco di gente non pensa, "E i miei utenti?" 119 00:06:40,870 --> 00:06:43,160 come gli estremi di uno spettro. 120 00:06:43,160 --> 00:06:47,770 Ho utenti che potrebbero avere disabilità che non sto pensando 121 00:06:47,770 --> 00:06:50,590 e sto solo pensando a progettare per l'utente generico. 122 00:06:50,590 --> 00:06:52,630 Internet è accessibile a tutti al giorno d'oggi, 123 00:06:52,630 --> 00:06:54,870 e dovrei essere la progettazione di queste persone pure. 124 00:06:54,870 --> 00:06:58,620 Che tipo di decisioni di progettazione altri potrebbero fare? 125 00:06:58,620 --> 00:07:00,690 Sì. >> [Studente] Costo. 126 00:07:00,690 --> 00:07:02,680 Costo. Molto buono. 127 00:07:02,680 --> 00:07:08,060 Un'altra cosa che possiamo basare le nostre decisioni relative alla progettazione sono i costi. 128 00:07:08,060 --> 00:07:13,130 Se siamo un business, si vuole costruire qualcosa che non ci vuole molto di costo per la produzione di 129 00:07:13,130 --> 00:07:17,720 ma può vendere a un costo particolarmente elevato o ci può ottenere qualche profitto. 130 00:07:17,720 --> 00:07:21,540 >> Questi sono tutti i diversi tipi di design, ma quando stiamo costruendo qualcosa su Internet 131 00:07:21,540 --> 00:07:25,120 o quando stiamo costruendo qualcosa che probabilmente non costa molto per costruire adesso, 132 00:07:25,120 --> 00:07:28,630 come le applicazioni Internet - non si devono gettare capitale molto in esso 133 00:07:28,630 --> 00:07:30,900 al fine di fare qualcosa che funziona davvero - 134 00:07:30,900 --> 00:07:33,490 ciò che noi siamo più preoccupati è l'esperienza dell'utente. 135 00:07:33,490 --> 00:07:36,390 Noi chiamiamo questo centered design utente. 136 00:07:36,390 --> 00:07:41,550 Essenzialmente quello User Centered Design presenta sia voi stessi mettendo nei panni dei vostri utenti. 137 00:07:41,550 --> 00:07:44,870 Se qualcuno si iscrive per quello che sto costruendo, 138 00:07:44,870 --> 00:07:48,250 hanno, ovviamente, mi vengono in particolare applicazione con un obiettivo in mente, 139 00:07:48,250 --> 00:07:50,280 con un compito che desidera completare. 140 00:07:50,280 --> 00:07:53,650 E il tuo lavoro non è solo per aiutarli a completare tale compito 141 00:07:53,650 --> 00:07:57,930 ma per aiutarli a completare l'attività in modo che sia efficiente, intuitivo, 142 00:07:57,930 --> 00:08:01,900 e, come ha detto una persona laggiù, accessibile. 143 00:08:01,900 --> 00:08:03,750 Che cosa significa efficienza? 144 00:08:03,750 --> 00:08:08,050 Efficienza significa che la velocità con il mio utente completare l'operazione dato la mia interfaccia. 145 00:08:08,050 --> 00:08:11,650 Ci vuole un sacco di scatti per loro per andare da un posto all'altro? 146 00:08:11,650 --> 00:08:14,630 E 'noioso? Hanno un sacco di eseguire operazioni ripetitive? 147 00:08:14,630 --> 00:08:17,140 Vogliamo rendere questo processo il più efficiente possibile 148 00:08:17,140 --> 00:08:20,070 in modo che non hanno a che fare questo genere di cose. 149 00:08:20,070 --> 00:08:24,230 Come per intuitività, che è, per esempio, se un utente cerca mia interfaccia, 150 00:08:24,230 --> 00:08:27,240 è più facile per loro di ottenere da un posto all'altro? 151 00:08:27,240 --> 00:08:30,390 E 'facile per loro capire che cosa devono fare clic nella mia interfaccia 152 00:08:30,390 --> 00:08:33,770 in modo per loro di raggiungere l'obiettivo o l'attività che si vuole ottenere? 153 00:08:33,770 --> 00:08:37,520 >> E, infine, come una persona ha detto là, l'accessibilità è molto importante. 154 00:08:37,520 --> 00:08:39,640 [Maschio altoparlante] Si tratta di accessibilità per cose come la visione, 155 00:08:39,640 --> 00:08:42,740 piace come faccio realmente progettare qualcosa per qualcuno che è cieco? 156 00:08:42,740 --> 00:08:46,460 Oh. Per le persone che non possono vedere a tutti, abbiamo qualcosa che si chiama screen reader. 157 00:08:46,460 --> 00:08:49,070 Che cosa si dovrebbe fare è che si dovrebbe costruire il tuo sito web in modo 158 00:08:49,070 --> 00:08:52,020 che, ad esempio, particolari tecnologie che noi chiamiamo - 159 00:08:52,020 --> 00:08:53,590 Ci sono un sacco di cose adesso. 160 00:08:53,590 --> 00:08:55,660 Penso che ci siano lettori di schermo JAWS chiamati. 161 00:08:55,660 --> 00:08:58,410 Molte di queste cose si basano su ciò che noi chiamiamo regole di area 162 00:08:58,410 --> 00:09:02,010 per leggere all'utente ciò che è presente sulla pagina. 163 00:09:02,010 --> 00:09:05,480 Per coloro che non possono vedere, è necessario fare in modo che questi screen reader 164 00:09:05,480 --> 00:09:09,130 può effettivamente prendere il contenuto della pagina e può effettivamente mostrare agli utenti, 165 00:09:09,130 --> 00:09:13,630 se non riesci a vedere, almeno si può ancora capire il contenuto della pagina. 166 00:09:13,630 --> 00:09:16,190 Gia '. Va bene. 167 00:09:16,190 --> 00:09:23,410 Basta parlare di buon design. Parliamo di cattivo design. 168 00:09:23,410 --> 00:09:25,220 Queste sono cose che non si deve fare. 169 00:09:25,220 --> 00:09:27,890 Qualcuno può dirmi le loro esperienze con Craigslist 170 00:09:27,890 --> 00:09:32,190 e quello che pensano non è così grande su questo progetto? 171 00:09:33,690 --> 00:09:36,430 Sì. >> [Studente] Penso che ci sia troppe parole in una zona. 172 00:09:36,430 --> 00:09:39,350 Troppe parole, giusto? Completamente schiacciante. 173 00:09:39,350 --> 00:09:42,400 Venite a questa pagina e sarai accolto con un sacco di cose qui 174 00:09:42,400 --> 00:09:43,860 che potrebbe anche non importa a voi. 175 00:09:43,860 --> 00:09:47,010 Ad esempio, si vive in uno stato che non inizia con questa lettera. 176 00:09:47,010 --> 00:09:48,690 Diciamo che si vive in Texas, o qualcosa del genere. 177 00:09:48,690 --> 00:09:53,790 >> Bisogna scorrere fino in fondo alla pagina per ottenere la posizione ci si trova. 178 00:09:53,790 --> 00:10:00,320 Sono di Boston, per cui vorrei guardare in Massachusetts. Dove si trova Massachusetts? 179 00:10:00,320 --> 00:10:03,270 Oh, è proprio qui. Oh, è Boston. Va bene. 180 00:10:03,270 --> 00:10:09,070 Diamo un'occhiata a Boston. [Risate] 181 00:10:09,070 --> 00:10:12,250 Piuttosto travolgente, giusto? 182 00:10:12,250 --> 00:10:16,400 Awkward cose laggiù. [Risate] 183 00:10:17,320 --> 00:10:19,470 Diciamo che sto cercando un posto dove vivere. 184 00:10:19,470 --> 00:10:24,130 Quante persone hanno effettivamente usato Craigslist? Tonnellate di voi. 185 00:10:24,130 --> 00:10:30,960 Ci sono modi piuttosto male da guardare, ma diamo un'occhiata a questo. 186 00:10:35,130 --> 00:10:38,970 Qual è la differenza tra img e pic? Qualcuno può dirmi? 187 00:10:41,350 --> 00:10:42,830 Vi è in realtà alcuna differenza. 188 00:10:42,830 --> 00:10:47,710 Essi significano esattamente la stessa cosa, ma hanno etichette diverse per loro per qualche ragione. 189 00:10:48,980 --> 00:10:53,560 Se clicco su con immagine, non succede nulla sulla pagina. 190 00:10:53,560 --> 00:10:57,490 Mi hanno fatto fare clic su ricerca per qualcosa accada. 191 00:10:57,490 --> 00:11:02,430 Quale potrebbe essere una decisione di progettazione migliore che si poteva fare lì? 192 00:11:03,820 --> 00:11:08,030 Se sto cliccando su quel filtro, probabilmente desidera filtrare che l'azione particolare 193 00:11:08,030 --> 00:11:09,970 o quella categoria particolare. 194 00:11:09,970 --> 00:11:14,450 Così, invece di dover premere ricerca, ho potuto solo fare automaticamente il filtraggio 195 00:11:14,450 --> 00:11:17,060 sorta di stile di Google in cui lo fanno immediatamente. 196 00:11:17,060 --> 00:11:20,440 [Malan] Ma non si forma come li abbiamo visti finora devono essere fisicamente presentate 197 00:11:20,440 --> 00:11:23,170 premendo Invio almeno o facendo clic su un pulsante? 198 00:11:23,170 --> 00:11:26,830 Come li avete visti fino ad ora, è effettivamente necessario fare clic su Invia per fare quelle cose. 199 00:11:26,830 --> 00:11:30,090 >> Ma come Tommy vi mostrerà in un secondo, in realtà vi sono modi per 200 00:11:30,090 --> 00:11:33,010 in modo tale che quando si fa clic su quella cosa si può inviare automaticamente 201 00:11:33,010 --> 00:11:38,840 ciò che noi chiamiamo una richiesta AJAX e ottenere i dati avanti e filtrare i risultati istantaneamente. 202 00:11:38,840 --> 00:11:41,340 Ci sono tonnellate di cose che sono di sbagliato in questa interfaccia. 203 00:11:41,340 --> 00:11:43,530 [Malan] Puoi cercare Cambridge? 204 00:11:43,530 --> 00:11:47,030 C'è qualcosa di leggermente anomalo qui dove ti interessa Cambridge 205 00:11:47,030 --> 00:11:54,790 ma che stai ricevendo Westford, Spring Hill, West Newton e simili. 206 00:11:54,790 --> 00:11:57,930 Probabilmente non è l'ideale. Probabilmente non >> l'ideale. 207 00:11:57,930 --> 00:12:03,900 Come potrei essere in grado di rendere l'esperienza dell'utente migliore su questa pagina particolare? 208 00:12:03,900 --> 00:12:07,340 Sì. >> [Studente] Istruzioni. 209 00:12:07,340 --> 00:12:09,500 Va bene. Istruzioni in che tipo di senso? 210 00:12:09,500 --> 00:12:14,630 [Studente] Ad esempio, una cosa per la prima volta gli utenti che non sanno nemmeno che cosa Craigslist è 211 00:12:14,630 --> 00:12:17,320 o non si sa quello che si dovrebbe fare. 212 00:12:17,320 --> 00:12:20,150 Giusto. Quindi spiegare cosa Craigslist è in questa pagina è importante. 213 00:12:20,150 --> 00:12:23,490 In realtà possiamo dire agli utenti che cosa questa pagina è in realtà per. 214 00:12:23,490 --> 00:12:27,090 Se sto solo visitando questo, vedo un sacco di posizioni. Io non so nemmeno che cosa significano. 215 00:12:27,090 --> 00:12:29,730 Ma ancora più importante, solo guardando questa interfaccia, 216 00:12:29,730 --> 00:12:35,530 ricordo che ho dovuto scorrere verso il basso un sacco di cose per trovare una particolare comunità 217 00:12:35,530 --> 00:12:37,560 che io in realtà a cuore su questo. 218 00:12:37,560 --> 00:12:39,820 Che cosa è un modo più veloce avrei potuto farlo? Sì. 219 00:12:39,820 --> 00:12:43,290 [Studente] Dividere in su in est, regioni occidentali. Va bene >>. 220 00:12:43,290 --> 00:12:47,460 Potrei dividere in più categorie che potrebbero aiutarmi a determinare più velocemente 221 00:12:47,460 --> 00:12:49,820 come arrivare in quella posizione particolare. 222 00:12:49,820 --> 00:12:54,510 [Studente] Mettere un elenco a discesa. >> Destra. Va bene. 223 00:12:54,510 --> 00:12:58,240 Potrei usare un menu a discesa, perché abbiamo una serie fissa di cose 224 00:12:58,240 --> 00:13:00,100 e abbiamo potuto mostrare loro in un menu a discesa. 225 00:13:00,100 --> 00:13:02,240 In questo modo non occupa tanto spazio sullo schermo. 226 00:13:02,240 --> 00:13:05,630 Ma anche di meglio, che cosa possiamo fare? 227 00:13:05,630 --> 00:13:09,220 Sì. >> [Risposta degli studenti incomprensibile] >> Si può dire che ancora una volta? >> [Studente] casella di ricerca. 228 00:13:09,220 --> 00:13:11,260 Si ', una casella di ricerca. E 'fantastico. 229 00:13:11,260 --> 00:13:16,430 Quello che possiamo realmente fare è se guardiamo indietro alla, casella di ricerca diapositive. 230 00:13:16,430 --> 00:13:21,520 Autocomplete. Modo molto semplice per la ricerca in risultati che si sa essere in un set. 231 00:13:21,520 --> 00:13:25,980 Se inizio a digitare BO, mi mostra tutti i risultati che hanno dentro di loro BO. 232 00:13:25,980 --> 00:13:29,030 In questo modo posso facilmente trovare quello particolare che voglio andare a 233 00:13:29,030 --> 00:13:32,390 invece di dover scorrere questa lista davvero grande. 234 00:13:32,390 --> 00:13:37,450 >> Questi sono tutti i tipi di davvero low-hanging fruit che qualcuno che sta attuando Craigslist 235 00:13:37,450 --> 00:13:42,500 può effettivamente fare per rendere l'esperienza sul sito web molto meglio per la loro particolare utente. 236 00:13:42,500 --> 00:13:46,370 Va bene. Basta parlare di siti web cattivi. 237 00:13:46,370 --> 00:13:49,410 Parliamo di Facebook. 238 00:13:50,880 --> 00:13:54,390 Quando Facebook è venuto fuori, e in particolare le foto di Facebook, 239 00:13:54,390 --> 00:13:57,870 c'erano un sacco di altri servizi al momento in grado di fare esattamente le stesse cose. 240 00:13:57,870 --> 00:14:00,740 Potrebbero organizzare le foto in album. 241 00:14:00,740 --> 00:14:03,360 Che cosa si potrebbe fare è che si poteva organizzare in gruppi pure. 242 00:14:03,360 --> 00:14:06,070 Si potrebbe organizzare in base alla data. Si potrebbe fare tutte queste cose particolari. 243 00:14:06,070 --> 00:14:11,710 Ma qualcuno sa come sono fatti esplodere foto di Facebook al momento è stato rilasciato? 244 00:14:11,710 --> 00:14:15,080 Sì. >> [Studenti] Tag. Tags >>. Esattamente. 245 00:14:15,080 --> 00:14:21,300 Abbiamo Milo qui, che è la nostra mascotte cane con quella bandana CS50. 246 00:14:21,300 --> 00:14:24,810 Si può vedere che abbiamo questa caratteristica di tagging nel mezzo. 247 00:14:24,810 --> 00:14:28,240 E ciò che ha reso le foto di Facebook in modo interessante dal punto di vista dell'usabilità 248 00:14:28,240 --> 00:14:34,130 è che in realtà permesso alla gente attraverso questo di coinvolgere i loro amici nelle loro foto. 249 00:14:34,130 --> 00:14:37,680 Per Facebook, dal momento che il loro sito web è particolarmente sociale, 250 00:14:37,680 --> 00:14:40,750 Si tratta di costruire questo tipo di atmosfera sociale. 251 00:14:40,750 --> 00:14:42,620 Che ha migliorato l'esperienza di foto molto di più 252 00:14:42,620 --> 00:14:46,390 perché potrebbero effettivamente iniziare dicendo: "Queste sono le connessioni tra le persone, 253 00:14:46,390 --> 00:14:49,220 e queste sono le foto di gente che realmente interessano. " 254 00:14:49,220 --> 00:14:52,200 Parte di esso è anche il narcisismo di ordinamento. 255 00:14:52,200 --> 00:14:54,980 Alla gente piace essere etichettato in foto e cose del genere. 256 00:14:54,980 --> 00:14:58,510 Anche se questo non è necessariamente una buona caratteristica umana, 257 00:14:58,510 --> 00:15:01,910 allo stesso tempo si basa su decisioni di buon design 258 00:15:01,910 --> 00:15:04,860 perché i cittadini si interessano cose come questa. 259 00:15:04,860 --> 00:15:07,190 Ecco, questo è foto di Facebook. 260 00:15:07,190 --> 00:15:09,800 >> Ma parliamo più in generale di Facebook. 261 00:15:09,800 --> 00:15:13,400 Sono sicuro che un sacco di persone qui hanno opinioni su Facebook, 262 00:15:13,400 --> 00:15:16,430 entrambe le decisioni di buon design e le decisioni cattivo design. 263 00:15:16,430 --> 00:15:20,270 Quindi cerchiamo di sfogare o essere felici. 264 00:15:23,480 --> 00:15:26,450 Andiamo. Io so tutto di voi usano Facebook. 265 00:15:26,450 --> 00:15:30,970 Qualcuno deve avere qualcosa di negativo da dire o qualcosa di buono da dire in proposito. Sì. 266 00:15:30,970 --> 00:15:35,060 [Studente] Nel flusso di notizie ci sono un sacco di cose che in realtà non si preoccupano. 267 00:15:35,060 --> 00:15:37,740 Il flusso di notizie non mostrano un sacco di cose che potrebbero non interessano. 268 00:15:37,740 --> 00:15:41,660 Hai amici su Facebook che non si sono incontrati per 2 o 3 anni 269 00:15:41,660 --> 00:15:43,860 e vedere i loro risultati di notizie spuntando nel tuo feed di notizie 270 00:15:43,860 --> 00:15:45,870 e non si interessa davvero su di esso. 271 00:15:45,870 --> 00:15:48,700 Facebook ha effettivamente fatto uno sforzo per migliorarla, 272 00:15:48,700 --> 00:15:53,150 e hanno effettivamente cercato di spingere i risultati rilevanti per la parte superiore del newsfeed come di ritardo 273 00:15:53,150 --> 00:15:58,300 in modo che effettivamente vedere le cose da amici che sono rilevanti per voi oi vostri amici. 274 00:15:58,300 --> 00:16:01,110 Tutto il resto? Sì. 275 00:16:01,110 --> 00:16:06,400 [Risposta degli studenti incomprensibile] >> Si può dire che ancora una volta? 276 00:16:06,400 --> 00:16:10,140 [Studente] Gli annunci sono relativamente discreto. >> In che senso? 277 00:16:10,140 --> 00:16:16,370 [Risposta incomprensibile studente] Non hanno luce sullo schermo, come bandiere. 278 00:16:16,370 --> 00:16:17,760 Va bene. Questo è un bene. 279 00:16:17,760 --> 00:16:25,030 Se vi ricordate di Internet dagli anni '90 - >> [Malan] ero lì. Era lì >>. [Risate] 280 00:16:25,030 --> 00:16:29,210 Forse vi ricordate lampeggianti sfondi GIF, luccicanti cose, 281 00:16:29,210 --> 00:16:31,570 GeoCities stile di ordinamento delle cose. 282 00:16:31,570 --> 00:16:34,080 Questo non è proprio un esempio di un buon design 283 00:16:34,080 --> 00:16:36,690 perché è davvero distrarre dal contenuto. 284 00:16:36,690 --> 00:16:39,590 Il sito d'arte di Yale usato per avere GIF animate come il loro background 285 00:16:39,590 --> 00:16:41,800 e non si poteva leggere qualcosa sulla pagina, 286 00:16:41,800 --> 00:16:44,870 ma credo che qualcuno effettivamente parlato con loro e adesso è un po 'diverso. 287 00:16:44,870 --> 00:16:48,940 [Malan] E 'molto meglio ora. >> E 'molto meglio, come si può vedere. >> [Malan] Oh yeah. 288 00:16:48,940 --> 00:16:56,020 Semplicemente fantastico, solo - Si '. Va bene. 289 00:16:56,020 --> 00:17:00,560 >> Parte di essa è anche fare la tua pagina possibilmente molto minimalista e molto comprensibile 290 00:17:00,560 --> 00:17:05,690 quindi le cose sul flusso pagina in un modo che è molto logico e non si ottiene in modo di ogni altro. 291 00:17:05,690 --> 00:17:11,849 Che tipo di altre cose sono buone su Facebook o male di Facebook? 292 00:17:11,849 --> 00:17:15,730 Diciamo solo avere una conversazione disegno qui. 293 00:17:19,470 --> 00:17:21,339 Oh. Dove? Gia '. 294 00:17:21,339 --> 00:17:25,640 [Studente] Il sistema di nuova Timeline permette di cercare il profilo della persona sul loro passato. 295 00:17:25,640 --> 00:17:28,119 Ooh, Timeline. 296 00:17:28,119 --> 00:17:30,280 Timeline è una grande cosa perché ti permette di gambo tuoi amici 297 00:17:30,280 --> 00:17:33,300 indietro quando erano al liceo. 298 00:17:35,160 --> 00:17:38,060 Timeline è un bene perché ti permette di filtrare attraverso i contenuti molto più veloce, 299 00:17:38,060 --> 00:17:41,500 vi permette di trovare le cose che avrebbe altrimenti preso un sacco di tempo per trovare 300 00:17:41,500 --> 00:17:45,840 basta scorrere su e giù, su, su, su, su, su, come tornare indietro nel tempo. 301 00:17:45,840 --> 00:17:48,910 Ma poi c'è anche una sorta di rovescio della medaglia che in termini di user experience. 302 00:17:48,910 --> 00:17:51,190 Cosa potrebbe essere? 303 00:17:51,190 --> 00:17:56,780 Grande parola che inizia con P-R. >> [Studente] Privacy. Privacy >>, giusto? 304 00:17:56,780 --> 00:17:59,970 La privacy è un enorme problema di esperienza dell'utente. 305 00:17:59,970 --> 00:18:07,190 Questa è una delle cose che odio di più di Facebook ora. [Risate] 306 00:18:07,190 --> 00:18:09,000 [Malan] Come faccio adesso. 307 00:18:09,000 --> 00:18:11,380 Davide non avevo capito che questo è realmente accaduto fino a ieri. 308 00:18:11,380 --> 00:18:14,560 Così ora si sa che ogni volta che lo chiacchierare so che mi sta ignorando. 309 00:18:14,560 --> 00:18:16,880 [Malan] La parte imbarazzante è stato mi è stato effettivamente lui ignorando, 310 00:18:16,880 --> 00:18:21,040 e io non sapevo che lui sapeva che lo stava ignorando. [Risate] 311 00:18:21,040 --> 00:18:24,030 La privacy è un problema enorme. 312 00:18:24,030 --> 00:18:28,670 Qualcuno può dirmi che cosa questo potrebbe essere un male di Facebook sulla privacy 313 00:18:28,670 --> 00:18:32,270 oltre al fatto che fanno cose come questa? 314 00:18:32,270 --> 00:18:37,240 Che cosa è particolarmente difficile da fare per quanto riguarda la privacy su Facebook? 315 00:18:37,240 --> 00:18:40,340 Questo tipo di è una questione di primo piano. 316 00:18:41,680 --> 00:18:43,930 Sì. >> [Studente] Nascondi le tue foto da certe persone. 317 00:18:43,930 --> 00:18:46,170 Giusto. Esattamente, per nascondere le tue foto da certe persone. 318 00:18:46,170 --> 00:18:51,290 Hanno questo piccolo, piccolo pulsante in alto a destra che consente di attivare o disattivare la privacy di una foto. 319 00:18:51,290 --> 00:18:56,360 Le loro opzioni di privacy sono molto vari tra i diversi tipi di menu. 320 00:18:56,360 --> 00:18:59,510 >> Hanno ottenuto molto meglio a questo proposito di recente, ma è usato per essere il caso 321 00:18:59,510 --> 00:19:04,870 che ogni volta che si voleva evitare che i tuoi amici di vedere foto, 322 00:19:04,870 --> 00:19:08,280 si dovrebbe passare attraverso un complicatissimo 5 fasi di essere come, 323 00:19:08,280 --> 00:19:11,150 lasciatemi fare clic su questo link, ora fammi fare clic di nuovo, vorrei fare nuovamente clic, 324 00:19:11,150 --> 00:19:13,420 vorrei specificare che la gente non può vedere le mie foto. 325 00:19:13,420 --> 00:19:17,250 Questo non è particolarmente buona da parte di Facebook 326 00:19:17,250 --> 00:19:20,530 perché tanto di esperienza degli utenti è in realtà dando loro la libertà 327 00:19:20,530 --> 00:19:22,460 di controllare ciò che la gente può vedere. 328 00:19:22,460 --> 00:19:25,550 Noi chiamiamo questo controllo utente e la libertà. 329 00:19:25,550 --> 00:19:31,090 Se non consentendo agli utenti di farlo in un modo che sia efficace e intuitiva, 330 00:19:31,090 --> 00:19:34,570 allora la vostra esperienza utente non è poi così grande a tutti. 331 00:19:34,570 --> 00:19:38,200  Sarebbe voi ragazzi piace dire nulla su Facebook? 332 00:19:38,700 --> 00:19:41,420 Come faccio a disattivare questa opzione? 333 00:19:41,420 --> 00:19:46,290 [Ong] Non è possibile disattivare questa funzionalità, e questo è un difetto enorme usabilità da parte di Facebook. 334 00:19:46,290 --> 00:19:49,410 Questa caratteristica - in realtà ho guardato dentro ieri - 335 00:19:49,410 --> 00:19:53,940 è uno che non si può fare o è sepolto da qualche parte molto, molto profondo 336 00:19:53,940 --> 00:19:58,050 nei recessi di Facebook perché non riesco a capire come disattivare questa funzionalità a tutti. 337 00:19:58,050 --> 00:20:00,400 [Malan] Ma a volte queste decisioni non sono evidenti 338 00:20:00,400 --> 00:20:03,890 perché voi ragazzi ci hanno dato un sacco di feedback utili sulle varie applicazioni CS50 339 00:20:03,890 --> 00:20:05,710 e siti web che il corso utilizza. 340 00:20:05,710 --> 00:20:10,260 Non abbiamo implementato tutte queste richieste e suggerimenti. 341 00:20:10,260 --> 00:20:14,550 >> Parte di questo è per avere tante richieste che è una funzione del tempo, 342 00:20:14,550 --> 00:20:17,070 ma a volte dobbiamo solo prendere una decisione consapevole, come, 343 00:20:17,070 --> 00:20:19,830 "Grazie per il suggerimento, ma non siamo d'accordo." 344 00:20:19,830 --> 00:20:24,350 Così come si fa effettivamente decidere cosa si dovrebbe fare se gli utenti che si dovrebbe fare qualcosa 345 00:20:24,350 --> 00:20:28,110 anche se non necessariamente? 346 00:20:28,110 --> 00:20:32,360 E 'un equilibrio sottile tra realtà l'ascolto di ciò che gli utenti dicono 347 00:20:32,360 --> 00:20:35,840 e in realtà avere una sorta di riga in cui si dice, 348 00:20:35,840 --> 00:20:37,750 "Non abbiamo intenzione di fare ciò che questi dicono gli utenti." 349 00:20:37,750 --> 00:20:42,520 E in particolare, credo che ci fosse una citazione di Henry Ford che riassume questo abbastanza bene. 350 00:20:42,520 --> 00:20:47,130 "Se avessi chiesto alla gente quello che volevano, avrebbero detto che volevano cavalli più veloci." 351 00:20:47,130 --> 00:20:51,840 Qualcuno può ordinare di prendere in giro a parte ciò che quella citazione significa veramente? 352 00:20:51,840 --> 00:20:56,060 Non è solo che gli utenti sanno quello che vogliono, 353 00:20:56,060 --> 00:20:59,180 ma è più che - 354 00:20:59,180 --> 00:21:02,720 [Studente] Non sanno ciò che è possibile. 355 00:21:02,720 --> 00:21:06,140 In parte non sanno che cosa è possibile. 356 00:21:07,880 --> 00:21:11,440 Tease che, a parte un po 'di più. Cosa vuoi dire con questo? 357 00:21:11,440 --> 00:21:21,340 [Risposta degli studenti incomprensibile] 358 00:21:21,340 --> 00:21:25,770 Questo è un bene. Quello che penso che stiamo cercando di dire è che le persone sanno quello che vogliono. 359 00:21:25,770 --> 00:21:28,050 Vogliono cavalli più veloci. 360 00:21:28,050 --> 00:21:29,840 Quello che vuole veramente è la capacità di muoversi più velocemente, 361 00:21:29,840 --> 00:21:32,310 ma non so davvero il mezzo con cui raggiungere questo obiettivo. 362 00:21:32,310 --> 00:21:36,330 Quando si arriva agli utenti e gli utenti che vi dica qualcosa 363 00:21:36,330 --> 00:21:39,700 e ti dicono: "Vogliamo che queste caratteristiche e queste caratteristiche e queste caratteristiche," 364 00:21:39,700 --> 00:21:42,650 non si vuole pensare necessariamente su, "Lasciami andare avanti 365 00:21:42,650 --> 00:21:44,720 "E mettere in atto quello che dice esplicitamente," 366 00:21:44,720 --> 00:21:48,610 ma ciò che si vuole pensare è: "Che tipo di idee si può ottenere da questo?" 367 00:21:48,610 --> 00:21:50,450 Che cosa in realtà vogliono? 368 00:21:50,450 --> 00:21:55,560 >> E da lì quello che si può fare è progettare qualcosa che soddisfa tali richieste 369 00:21:55,560 --> 00:22:00,340 ma non necessariamente in modo che l'utente si aspetta che venga soddisfatta. 370 00:22:00,340 --> 00:22:03,830 Così, per qualcosa come progetti finali, in termini reali, 371 00:22:03,830 --> 00:22:07,900 che cosa è un euristica utile quando si tratta di fare qualcosa di meglio, 372 00:22:07,900 --> 00:22:10,630 soprattutto se il progettista ha questa arroganza su di lui 373 00:22:10,630 --> 00:22:14,360 in base al quale si ordina di sapere cosa è meglio, si potrebbe prendere l'input da utenti, 374 00:22:14,360 --> 00:22:16,580 ma come si fa effettivamente fare per ottenere che il feedback? 375 00:22:16,580 --> 00:22:21,610 Nei progetti finali, molto concretamente, ciò che produce risultati ottimali qui? 376 00:22:21,610 --> 00:22:25,030 Che cosa produce risultati ottimali - e voglio andare oltre questo in un secondo - 377 00:22:25,030 --> 00:22:29,190 è il processo di sviluppo e poi prova e poi l'iterazione. 378 00:22:29,190 --> 00:22:32,020 Cosa voglio dire con il test è di solito quando si progetta qualcosa 379 00:22:32,020 --> 00:22:36,970 pensi che sia abbastanza buono, come, "Sono un grande designer. Ognuno sta andando ad amare questo." 380 00:22:36,970 --> 00:22:41,600 E poi lo metti là fuori e la gente non piace per qualche motivo. 381 00:22:41,600 --> 00:22:46,820 Quello che devi fare è bisogna prendere le parti di cose che la gente fa come 382 00:22:46,820 --> 00:22:49,180 e rinnovare le cose che la gente non piace. 383 00:22:49,180 --> 00:22:53,080 Sembra un processo molto evidente, ma questo processo di continua iterazione 384 00:22:53,080 --> 00:22:55,980 al di sopra di quello che hai già costruito è un processo che ti aiuta 385 00:22:55,980 --> 00:22:59,730 non solo affinare le vostre abilità di progettazione proprie, ma aiuta anche a perfezionare la progettazione 386 00:22:59,730 --> 00:23:03,790 in modo che la gente realmente apprezziamo il vostro prodotto ancora più di quanto non fossero prima. 387 00:23:03,790 --> 00:23:07,390 >> Vado oltre altri esempi concreti di quello che si potrebbe effettivamente fare. 388 00:23:07,390 --> 00:23:11,390 Come una sorta di ultimo esempio di un prodotto, diamo un'occhiata a KAYAK. 389 00:23:11,390 --> 00:23:14,970 KAYAK quando è uscito era molto, molto popolare. 390 00:23:14,970 --> 00:23:18,760 Chiunque può indovinare perché? 391 00:23:18,760 --> 00:23:20,950 Quali sono i tipi di cose che ti piacciono di questo se è stato usato 392 00:23:20,950 --> 00:23:23,990 o quali sono i tipi di cose che non ti piacciono? 393 00:23:23,990 --> 00:23:31,590 Sì. >> [Risposta degli studenti incomprensibile] >> Ok. 394 00:23:31,590 --> 00:23:34,730 Questa è una parte di esso è lasciare che l'utente dispone di una query che è più ampia 395 00:23:34,730 --> 00:23:38,150 rispetto ad una molto restrittiva del tipo: "Devi scegliere la tua data di inizio 396 00:23:38,150 --> 00:23:39,810 "E si deve scegliere la data di fine." 397 00:23:39,810 --> 00:23:44,910 Infatti, permette di essere flessibili su di esso e ti dà tutti i voli in tale intervallo. 398 00:23:44,910 --> 00:23:46,730 Tutto il resto? 399 00:23:46,730 --> 00:23:50,530 [Studente] Essi comprendono le tasse nel prezzo. 400 00:23:50,530 --> 00:23:53,330 Fanno includono le spese nel prezzo. 401 00:23:53,330 --> 00:23:56,720 Le tasse e le cose effettivamente andare dritto in quel prezzo in alto a sinistra 402 00:23:56,720 --> 00:24:00,710 in modo non sei indotto a pensare che si sta effettivamente pagando per un volo $ 240 403 00:24:00,710 --> 00:24:03,280 quando è veramente $ 330. 404 00:24:03,280 --> 00:24:06,200 Tutto il resto? Sì. 405 00:24:06,200 --> 00:24:10,140 [Risposta degli studenti incomprensibile] 406 00:24:10,140 --> 00:24:14,610 Non so se effettivamente ti permette di fare questo. 407 00:24:14,610 --> 00:24:18,310 Potrei sbagliarmi. 408 00:24:18,310 --> 00:24:23,360 Questo potrebbe essere una cosa interessante se si vuole mettere più peso su particolari filtri 409 00:24:23,360 --> 00:24:27,000 così che spingono i risultati relativi al filtro all'inizio. 410 00:24:27,000 --> 00:24:31,920 Ma qualcuno può dirmi cosa c'è di così speciale questa sinistra? 411 00:24:31,920 --> 00:24:39,540 Come ha tradizionalmente cercare un volo su un servizio di Internet prima di questa? 412 00:24:41,600 --> 00:24:44,650 >> Sì. >> [Risposta degli studenti incomprensibile] >> Si può dire che - 413 00:24:44,650 --> 00:24:47,530 [Studente] Ciascuna compagnia aerea. Sì >>. Ciascuna compagnia aerea ha un proprio sito. 414 00:24:47,530 --> 00:24:50,110 Questo consolida le cose. E? 415 00:24:50,110 --> 00:24:52,190 [Studente] Tu sai esattamente a che ora te ne vai. 416 00:24:52,190 --> 00:24:54,460 Tu sai esattamente a che ora te ne vai, 417 00:24:54,460 --> 00:24:59,380 ma relativi ai filtri in particolare. 418 00:25:00,710 --> 00:25:03,540 Vorrei tirare su KAYAK. 419 00:25:11,490 --> 00:25:14,020 Oh Dio, pop-up. L'esperienza degli utenti Bad. 420 00:25:14,020 --> 00:25:17,230 Cosa succede quando si sposta il cursore? 421 00:25:17,230 --> 00:25:21,010 [Gli studenti] Aggiornamenti automatici. >> [Ong] Aggiornamenti automatici. 422 00:25:21,010 --> 00:25:23,440 Questo è qualcosa che è molto importante. 423 00:25:23,440 --> 00:25:25,380 Prima di questo, ogni volta che si voleva cercare un volo, 424 00:25:25,380 --> 00:25:28,410 si doveva mettere in posizione di ingresso, la posizione di uscita, premere Cerca, 425 00:25:28,410 --> 00:25:31,190 Sarebbe processo che e mostrare i risultati. 426 00:25:31,190 --> 00:25:34,120 Se si voleva cambiare la query, si dovrà premere di nuovo due volte, 427 00:25:34,120 --> 00:25:39,770 entrare in una nuova query da zero, e poi farlo più e più volte. 428 00:25:39,770 --> 00:25:43,910 La cosa bella di una cosa del genere è che utilizza una cosa molto [incomprensibile] in mezzo. 429 00:25:43,910 --> 00:25:46,230 Ogni volta che fai una cosa del genere, spara fuori una richiesta 430 00:25:46,230 --> 00:25:48,420 e ti restituisce tutti i risultati immediatamente. 431 00:25:48,420 --> 00:25:51,680 Questo tipo di feedback immediato è una cosa che ha reso molto popolare KAYAK 432 00:25:51,680 --> 00:25:55,910 perché è molto facile per me cambiare solo la mia domanda 433 00:25:55,910 --> 00:25:58,890 e di capire le cose che sono intorno a un determinato intervallo 434 00:25:58,890 --> 00:26:01,950 senza dover andare avanti e indietro, avanti e indietro, avanti e indietro. 435 00:26:01,950 --> 00:26:05,200 Quindi questi sono tutti i tipi di cose che si desidera a cui pensare quando si progetta il tuo sito web. 436 00:26:05,200 --> 00:26:08,930 Come faccio a rendere molto efficiente per i miei utenti di passare attraverso tutto ciò su cui stanno lavorando 437 00:26:08,930 --> 00:26:13,010 e per raggiungere il loro obiettivo finale il più velocemente possibile? 438 00:26:13,010 --> 00:26:16,430 [Malan] E al punto di Giuseppe prima degli utenti non necessariamente sapendo quello che vogliono, 439 00:26:16,430 --> 00:26:18,640 in base a quello che voi ora sapere su HTML 440 00:26:18,640 --> 00:26:22,780 e si dispone di caselle di controllo, pulsanti di opzione, selezionare i menu, i campi di input e simili, 441 00:26:22,780 --> 00:26:26,140 come è possibile implementare l'idea di scegliere un orario di inizio per un volo? 442 00:26:26,140 --> 00:26:30,030 >> Quale di questi meccanismi UI vari useresti? 443 00:26:30,030 --> 00:26:34,100 Se si sa la quantità di codice HTML che è stato insegnato prima 444 00:26:34,100 --> 00:26:39,070 e si sa gli ingressi sono pulsanti di opzione, caselle di controllo, elenchi a discesa, e la scatola di ingresso, 445 00:26:39,070 --> 00:26:43,320 quale sarebbe la tua scelta naturale sono state date per la raccolta? 446 00:26:43,320 --> 00:26:48,670 [Studente] di ingresso. >> Input. O forse anche un menù a tendina con tutte le date, vero? 447 00:26:48,670 --> 00:26:53,170 Quindi, con i meccanismi di interfaccia utente più complessi come questo sul lato sinistro che è possibile implementare, 448 00:26:53,170 --> 00:26:55,500 si può rendere questo processo molto più intuitivo con un cursore 449 00:26:55,500 --> 00:27:01,020 perché il tempo è continuo, e la gente di solito non pensare in termini di pezzi discreti. 450 00:27:01,020 --> 00:27:04,950 Bene. Ultima cosa. 451 00:27:04,950 --> 00:27:07,370 Dieci usabilità euristica. 452 00:27:07,370 --> 00:27:10,820 Tutte le cose di cui abbiamo parlato, probabilmente rientrano in una di queste categorie. 453 00:27:10,820 --> 00:27:14,420 Se andate a questo link, che i siti saranno pubblicate on-line, 454 00:27:14,420 --> 00:27:18,900 ci troveremo a essere in grado di, come si progetta il sito, tenere a mente queste euristiche 455 00:27:18,900 --> 00:27:21,330 e queste regole pratiche. 456 00:27:21,330 --> 00:27:26,610 Per i vostri progetti, quello che io suggerisco di fare al fine di definire meglio la vostra applicazione 457 00:27:26,610 --> 00:27:28,850 è quello di fare prototipazione carta. 458 00:27:28,850 --> 00:27:32,150 Quando stai pensando l'applicazione, molto rapidamente disegnare ciò che si desidera farlo sembrare come 459 00:27:32,150 --> 00:27:36,230 e assicurarsi che tutte le caselle sono disposti in un modo molto intuitivo per l'utente di utilizzare 460 00:27:36,230 --> 00:27:39,820 e di mostrare anche questi prototipi di carta ai tuoi amici e iniziare a focus group. 461 00:27:39,820 --> 00:27:44,230 Basta avere 2 o 3 persone e chiedere loro di toccare solo su questi prototipi di carta, 462 00:27:44,230 --> 00:27:47,650 e mostrare loro nuovi schermi per vedere se effettivamente capire cosa sta succedendo. 463 00:27:47,650 --> 00:27:50,680 >> Che cosa si vuole fare è dare loro un compito, motivare tale compito, 464 00:27:50,680 --> 00:27:53,270 e solo dare loro l'applicazione e permettere loro di utilizzare. 465 00:27:53,270 --> 00:27:56,530 Non dare loro istruzioni, oltre a quelle. 466 00:27:56,530 --> 00:28:00,920 Si vuole far effettivamente interagire con la vostra applicazione in un modo che permette di vedere 467 00:28:00,920 --> 00:28:03,870 il modo in cui lo uso se non erano in piedi accanto a loro. 468 00:28:03,870 --> 00:28:05,250 E questo è molto importante. 469 00:28:05,250 --> 00:28:08,780 Che vi darà un sacco di spunti da persone che si sono in giro cose particolari 470 00:28:08,780 --> 00:28:10,560 in un modo che non li ho intenzione di? 471 00:28:10,560 --> 00:28:14,680 Stanno utilizzando meccanismi particolari dell'interfaccia utente sullo schermo 472 00:28:14,680 --> 00:28:17,490 in un modo che è di tipo hacky? 473 00:28:17,490 --> 00:28:22,020 Non volevo per loro di farlo in quel modo. 474 00:28:22,020 --> 00:28:23,940 E una volta che hai finito con quello, che cosa vuoi fare? 475 00:28:23,940 --> 00:28:26,010 Le rocce di progettazione, giusto? 476 00:28:26,010 --> 00:28:29,600 Che cosa si vuole fare è che si desidera sviluppare e poi fare questo processo più volte. 477 00:28:29,600 --> 00:28:32,110 Quindi mostrare agli amici una volta che hai sviluppato, testarlo 478 00:28:32,110 --> 00:28:36,630 sviluppare, testare, sviluppare, testare, scorrere, avanti e avanti e avanti. 479 00:28:36,630 --> 00:28:39,720 Design è un processo iterativo molto in questo senso. 480 00:28:39,720 --> 00:28:43,280 In realtà si deve costruire qualcosa e poi realizzare le cose su di esso 481 00:28:43,280 --> 00:28:46,520 che non si rese conto prima e tornare indietro e migliorare da questo. 482 00:28:46,520 --> 00:28:50,890 Ora, per quanto riguarda la parte di sviluppo, questo è quello che Tommy sta per mostrare dopo la pausa 483 00:28:50,890 --> 00:28:53,220 e come si potrebbe essere in grado di implementare qualcosa di simile funzione di completamento automatico 484 00:28:53,220 --> 00:28:56,610 in un modo che è abbastanza semplice. 485 00:28:57,440 --> 00:28:59,550 [Malan] Come Tommy imposta qui, una domanda allora. 486 00:28:59,550 --> 00:29:03,780 Molti dei primi siti web - e quando Giuseppe disse al sito web in stile anni 1990, 487 00:29:03,780 --> 00:29:07,640 era implementazioni in cui se si voleva selezionare l'ora di inizio e di fine, 488 00:29:07,640 --> 00:29:10,380 francamente, nel giorno e anche su alcuni siti web di oggi, 489 00:29:10,380 --> 00:29:13,220 il modo in cui farlo è di scegliere un'ora da un menu a discesa, 490 00:29:13,220 --> 00:29:15,910 si sceglie minuti da un menu a discesa, magari scegliere AM, PM, 491 00:29:15,910 --> 00:29:17,440 e poi hai fatto 3 volte di più. 492 00:29:17,440 --> 00:29:19,920 E così con 6 scatti e forse un po 'di scorrimento 493 00:29:19,920 --> 00:29:24,000 l'utente può effettivamente dare una sorta di data e / o intervallo di tempo in questo senso. 494 00:29:24,000 --> 00:29:27,920 >> Quindi, sicuramente non ottimale, eppure finora abbiamo visto nessuna capacità espressive 495 00:29:27,920 --> 00:29:30,330 in una qualsiasi delle lingue che abbiamo visto fare qualcosa di più sexy 496 00:29:30,330 --> 00:29:32,620 come il dispositivo di scorrimento del tempo di inizio e di fine. 497 00:29:32,620 --> 00:29:36,290 Ma se si pensa di nuovo a settimana 0 quando abbiamo parlato di Scratch, 498 00:29:36,290 --> 00:29:39,080 anche lì non c'erano solo i widget che hanno fatto certe cose. 499 00:29:39,080 --> 00:29:42,700 Davvero appena avuto questi fondamentali come i cicli e le condizioni e simili. 500 00:29:42,700 --> 00:29:46,910 Quindi tipo di solo pensando molto astrattamente ora, indipendentemente dalle particolari di HTML, 501 00:29:46,910 --> 00:29:51,260 ciò che sta realmente accadendo con qualcosa di simile ora di inizio e fine del cursore? 502 00:29:51,260 --> 00:29:54,960 Quando muovo il mouse e clicco su quel simbolo carota piccola a sinistra 503 00:29:54,960 --> 00:29:59,220 e iniziare a trascinare, di programmazione, che cosa si vuole essere in grado di attuare 504 00:29:59,220 --> 00:30:01,000 per realizzare questo obiettivo? 505 00:30:01,000 --> 00:30:04,920 Quali domande, che le espressioni booleane vuoi essere in grado di fare? 506 00:30:04,920 --> 00:30:06,930 Che cosa sta realmente accadendo? Sammy? 507 00:30:06,930 --> 00:30:10,080 [Studente] Dov'e 'la posizione del cursore? Good >>. Dove è la posizione del cursore? 508 00:30:10,080 --> 00:30:11,970 Questo era qualcosa che abbiamo bisogno di esprimere indietro in Scratch, 509 00:30:11,970 --> 00:30:14,690 se si è in base alla località o anche colore o simili. 510 00:30:14,690 --> 00:30:18,410 Vi ricorderete mai così brevemente il Lunedi c'erano tutte queste cose chiamati eventi 511 00:30:18,410 --> 00:30:22,370 nel mondo del Web, e così ci sono cose come onclick e onkeypress 512 00:30:22,370 --> 00:30:25,960 e onkeyup e onmouseover e onmouseout. 513 00:30:25,960 --> 00:30:29,130 Così si rendono conto che anche queste cose che abbiamo preso per scontato sul Web 514 00:30:29,130 --> 00:30:32,190 con siti come Facebook e Gmail, anche se non hanno idea di 515 00:30:32,190 --> 00:30:34,890 come si potrebbe eventualmente attuare tale perché non c'è niente di simile anche nella lezione 516 00:30:34,890 --> 00:30:38,570 o Problem Set 7, si rende conto che con questi fondamentali esattamente lo stesso, 517 00:30:38,570 --> 00:30:41,090 con HTTP e parametri e GET e POST, 518 00:30:41,090 --> 00:30:44,010 con gli ingressi di base HTML che abbiamo guardato finora 519 00:30:44,010 --> 00:30:47,690 e in un attimo con i meccanismi di programmazione che Tommy sta per introdurre 520 00:30:47,690 --> 00:30:51,300 si può iniziare a esprimere se stessi, proprio come avete fatto in settimana 0 521 00:30:51,300 --> 00:30:53,800 da molto intuitivo drag-and-drop. 522 00:30:53,800 --> 00:30:58,950 >> Quindi, con quello detto, Tommy MacWilliam e alcuni pezzi di un puzzle per noi nuove per il web. 523 00:30:58,950 --> 00:31:03,450 Bene. Il mio nome è Tommy e ho intenzione di parlare di JavaScript. 524 00:31:03,450 --> 00:31:07,150 Solo un disclaimer: io sono del parere che JavaScript è il miglior linguaggio di programmazione 525 00:31:07,150 --> 00:31:09,010 in tutto il mondo intero. 526 00:31:09,010 --> 00:31:11,940 Ci sono un sacco di persone che sono in disaccordo con me, ma è semplicemente incredibile. 527 00:31:11,940 --> 00:31:16,330 Una volta che si torna in C, se si deve scrivere C per un'altra classe o altri linguaggi, 528 00:31:16,330 --> 00:31:19,780 E 'davvero frustrante in tutti i dettagli di basso livello si deve impantanarsi trovi 529 00:31:19,780 --> 00:31:23,050 Quindi, se siete mai senti triste per quanto fastidioso C è quello di scrivere, 530 00:31:23,050 --> 00:31:25,130 basta andare indietro, scrivere un po 'di JavaScript. E 'nirvana. 531 00:31:25,130 --> 00:31:27,980 Vi sentirete molto meglio sulla tua brutta giornata. 532 00:31:27,980 --> 00:31:31,900 Un sacco di magia di JavaScript deriva dalla sua capacità di manipolare le cose 533 00:31:31,900 --> 00:31:33,730 che sono già nella pagina. 534 00:31:33,730 --> 00:31:38,520 Quando abbiamo scritto i nostri script PHP, che sono stati eseguiti sul server, 535 00:31:38,520 --> 00:31:42,270 e, infine, che script PHP probabilmente l'output del codice HTML. 536 00:31:42,270 --> 00:31:45,860 Tale HTML è stato inviato al client, quindi che era. 537 00:31:45,860 --> 00:31:50,180 Se il PHP ha voluto aggiungere un pulsante a una pagina, ad esempio, non si può davvero fare. 538 00:31:50,180 --> 00:31:54,350 Avrebbe dovuto rendere un intero nuovo file HTML e di inviare tale al browser. 539 00:31:54,350 --> 00:31:57,840 Con JavaScript sappiamo che siamo in grado di aggiornare le cose mentre sono già nella pagina, 540 00:31:57,840 --> 00:32:00,840 e per questo siamo in grado di fornire un feedback più immediato, 541 00:32:00,840 --> 00:32:06,150 che sarà davvero migliorare l'esperienza degli utenti sul nostro sito. 542 00:32:06,150 --> 00:32:09,330 Solo un breve riepilogo di selettori JavaScript. 543 00:32:09,330 --> 00:32:11,590 Sappiamo che quando si scarica una pagina HTML, 544 00:32:11,590 --> 00:32:13,890 che sta per essere rappresentato nel DOM. 545 00:32:13,890 --> 00:32:19,340 >> Il DOM è ricordo proprio questo grande albero in cui sono collegati gli elementi in questa gerarchia di grandi dimensioni. 546 00:32:19,340 --> 00:32:21,810 Quando abbiamo lavorato con i database in pset 7, 547 00:32:21,810 --> 00:32:26,280 una delle prime cose che abbiamo bisogno di sapere come fare era interrogare il database. 548 00:32:26,280 --> 00:32:29,060 Abbiamo questo grande tavolo gli utenti, e, talvolta, vogliamo solo dire, 549 00:32:29,060 --> 00:32:33,260 "Voglio solo alcuni di questi utenti che corrispondono a una certa condizione." 550 00:32:33,260 --> 00:32:36,020 Allo stesso modo, quando abbiamo il DOM abbiamo bisogno di un modo di interrogare esso. 551 00:32:36,020 --> 00:32:39,490 Abbiamo bisogno di un modo di dire: "Voglio che tutti i pulsanti che assomigliano a questo 552 00:32:39,490 --> 00:32:41,860 "O tutte le immagini sulla pagina." 553 00:32:41,860 --> 00:32:44,330 E questi selettori ci permettono di farlo. 554 00:32:44,330 --> 00:32:45,690 Quindi, solo un breve riepilogo. 555 00:32:45,690 --> 00:32:50,770 Questo primo qui, questa inviare #, che cosa è che andando a selezionare? Qualcuno ricorda? 556 00:32:50,770 --> 00:32:54,880 [Risposta degli studenti incomprensibile] >> Sì, esattamente. 557 00:32:54,880 --> 00:32:59,510 Questo sta per selezionare un elemento della pagina che ha un ID di presentare. 558 00:32:59,510 --> 00:33:03,470 E così il tag hash dice che questo selettore è di andare a lavorare con ID. 559 00:33:03,470 --> 00:33:07,630 Come circa la seconda, questa. Centrato, cosa che seleziona? 560 00:33:11,360 --> 00:33:15,180 Gia '. >> [Studente] Classe. >> Esattamente. Questo è ora di andare a selezionare per classe. 561 00:33:15,180 --> 00:33:18,840 La differenza tra ID e categoria qui è generalmente l'ID deve essere unico 562 00:33:18,840 --> 00:33:20,820 entro lo spazio che si sta cercando più. 563 00:33:20,820 --> 00:33:23,080 Quindi, se state cercando su un intera pagina web, 564 00:33:23,080 --> 00:33:27,740 si dovrebbe davvero solo 1 elemento con tale ID certo, in questo caso di presentare. 565 00:33:27,740 --> 00:33:31,330 Con le classi, invece, si può avere più di 1 elemento sulla stessa pagina 566 00:33:31,330 --> 00:33:33,130 con la stessa classe. 567 00:33:33,130 --> 00:33:36,580 Questo potrebbe essere utile per dire che voglio selezionare tutto ciò che è al centro della pagina 568 00:33:36,580 --> 00:33:38,450 piuttosto che solo 1 cosa. 569 00:33:38,450 --> 00:33:40,310 >> E, infine, quest'ultimo ecco un po 'più complicato, 570 00:33:40,310 --> 00:33:43,890 ma che cosa è questo andando a selezionare dal DOM? 571 00:33:46,650 --> 00:33:48,810 [Risposta degli studenti incomprensibile] >> Che cos'è? 572 00:33:48,810 --> 00:33:53,250 [Studente] Tutto ciò che è un tag. >> Abbiamo 2 parti qui. 573 00:33:53,250 --> 00:33:58,070 La seconda parte sta per dire che voglio selezionare questi tag con un tag di input, 574 00:33:58,070 --> 00:34:00,730 in modo che qualsiasi elemento che è un tag input. 575 00:34:00,730 --> 00:34:03,080 Ma io non voglio selezionare solo tutti gli ingressi 576 00:34:03,080 --> 00:34:05,170 perché qualcosa di simile a un pulsante di invio potrebbe essere un input 577 00:34:05,170 --> 00:34:08,409 e qualcosa di simile a una casella di testo potrebbe essere un ingresso. 578 00:34:08,409 --> 00:34:11,909 Così, con queste parentesi quadre che sto dicendo io voglio solo selezionare gli elementi 579 00:34:11,909 --> 00:34:14,110 che sono di tipo testo. 580 00:34:14,110 --> 00:34:17,400 Da qualche parte nella mia tag HTML ho un attributo chiamato tipo, 581 00:34:17,400 --> 00:34:19,750 e il valore di tale attributo deve essere testo. 582 00:34:19,750 --> 00:34:21,340 Così come su questa prima parte qui? 583 00:34:21,340 --> 00:34:25,489 La prima parola di questo selettore è la forma poi ho uno spazio e quindi questa parte di ingresso. 584 00:34:25,489 --> 00:34:29,620 Che cosa fare, mettendo la forma di fronte ad essa? 585 00:34:33,409 --> 00:34:35,860 Si tratta di andare a limitare sostanzialmente la nostra query. 586 00:34:35,860 --> 00:34:38,510 Potrebbe essere il caso che abbiamo alcuni ingressi sulla pagina 587 00:34:38,510 --> 00:34:41,080 che non sono discendenti di una forma. 588 00:34:41,080 --> 00:34:46,150 Ciò farà è questo dire che vogliono solo i tag di input che hanno da qualche parte sopra di loro 589 00:34:46,150 --> 00:34:49,030 qualche elemento principale di un modulo. 590 00:34:49,030 --> 00:34:52,100 E in questo modo siamo in grado di fare queste query più gerarchiche 591 00:34:52,100 --> 00:34:55,000 quindi non ci resta che selezionare tutto ciò che corrisponde a un selettore di data. 592 00:34:55,000 --> 00:35:00,760 Possiamo tipo di limite di applicazione di tale richiesta a qualcosa d'altro. 593 00:35:00,760 --> 00:35:04,000 Quindi, ora che sappiamo come selezionare gli elementi della pagina, 594 00:35:04,000 --> 00:35:06,780 parliamo un po 'di AJAX. 595 00:35:06,780 --> 00:35:12,270 AJAX è un acronimo ancora molto alla moda che si distingue di Asynchronous JavaScript and XML. 596 00:35:12,270 --> 00:35:15,640 Si dà il caso che XML è solo un modo per rappresentare i dati. 597 00:35:15,640 --> 00:35:20,920 >> Questo tipo di popolarità persa di recente, in modo che la X in AJAX non viene utilizzato tutto il tempo. 598 00:35:20,920 --> 00:35:26,220 In sostanza, ciò che AJAX ci permette di fare è fare richieste HTTP 599 00:35:26,220 --> 00:35:28,620 dal contesto di JavaScript. 600 00:35:28,620 --> 00:35:32,310 Quando siamo nel nostro browser web e stiamo navigando tra le pagine e fare clic su un collegamento, 601 00:35:32,310 --> 00:35:37,790 ciò che il nostro browser sta per fare è effettuare una richiesta HTTP a qualsiasi collegamento si clicca. 602 00:35:37,790 --> 00:35:41,670 Ma non è sempre l'ideale, perché se questo è il caso, poi come Davide stava dicendo: 603 00:35:41,670 --> 00:35:45,220 dobbiamo sempre fare gli utenti fanno clic su un pulsante Invia o fare clic su un collegamento 604 00:35:45,220 --> 00:35:50,380 per far succedere qualcosa che sta andando a coinvolgere una richiesta HTTP. 605 00:35:50,380 --> 00:35:54,160 Così, con AJAX possiamo fare queste richieste per conto di JavaScript. 606 00:35:54,160 --> 00:35:57,020 Ciò significa che ogni volta che l'utente interagisce con la pagina o succede qualcosa, 607 00:35:57,020 --> 00:36:01,780 si può effettivamente fare una richiesta a livello di qualche altro file PHP sul nostro sito web 608 00:36:01,780 --> 00:36:06,280 o qualsiasi altra cosa e recuperare i dati che quel file sputa fuori. 609 00:36:06,280 --> 00:36:09,860 Diamo un'occhiata a un esempio di AJAX. 610 00:36:09,860 --> 00:36:16,140 Questa è la nostra pagina Finanza CS50 con la quale si spera alcuni di noi hanno familiarità. 611 00:36:16,140 --> 00:36:21,790 Se guardiamo il codice HTML di questa pagina, vediamo qui che ho aggiunto un paio di cose, 612 00:36:21,790 --> 00:36:23,820 uno dei quali ho dato questa forma un ID. 613 00:36:23,820 --> 00:36:26,480 Ho detto id = "forma-citazione". 614 00:36:26,480 --> 00:36:31,910 L'ho fatto solo perché sta andando a rendere questo un po 'più facile per selezionare dal DOM 615 00:36:31,910 --> 00:36:35,090 dal momento che può solo fare una query molto semplice. 616 00:36:35,090 --> 00:36:38,960 Quello che voglio fare qui è che voglio risolvere qualche problema con CS50 Finanza. 617 00:36:38,960 --> 00:36:41,550 Quindi, se andiamo a finance.cs50.net, 618 00:36:41,550 --> 00:36:45,700 ogni volta che voglio per ottenere un preventivo, devo fare clic su questo pulsante Get Quotazione, 619 00:36:45,700 --> 00:36:48,960 e che pulsante Get preventivo porta poi a me un'altra pagina intera. 620 00:36:48,960 --> 00:36:52,400 E se voglio un'altra citazione, devo premere il pulsante Indietro e poi l'ho digitare, 621 00:36:52,400 --> 00:36:54,480 Ho ottenere un preventivo, e mi ha colpito il pulsante Indietro. 622 00:36:54,480 --> 00:36:56,840 Questo in realtà non è la migliore esperienza utente. 623 00:36:56,840 --> 00:37:01,570 Chi sarebbe davvero utilizzare il sito se è così lento e per i prezzi delle azioni? 624 00:37:01,570 --> 00:37:05,630 Quindi, quello che vogliamo fare con AJAX è rimuovere quel passo di andare a una pagina separata 625 00:37:05,630 --> 00:37:08,410 al fine di visualizzare i risultati. 626 00:37:08,410 --> 00:37:11,240 >> Quello che stiamo davvero solo chiedendo è che il prezzo veramente piccolo, 627 00:37:11,240 --> 00:37:14,240 e questo è solo una quantità molto piccola di dati. 628 00:37:14,240 --> 00:37:17,400 Quindi non c'è bisogno che io vada un'altra intera pagina HTML, 629 00:37:17,400 --> 00:37:20,670 scaricare una nuova serie di HTML, magari scaricare le immagini un po 'di più, 630 00:37:20,670 --> 00:37:24,410 altri file CSS solo per me rispondere a questa domanda molto semplice 631 00:37:24,410 --> 00:37:27,810 di quanto costa questo stock. 632 00:37:27,810 --> 00:37:31,000 Con AJAX siamo in grado di rendere questo molto più facile. 633 00:37:31,000 --> 00:37:36,400 Vediamo qui che sto collegamento in un file JavaScript denominato quote.js. 634 00:37:36,400 --> 00:37:40,140 Facciamo in realtà aprire quel file. Non lì. 635 00:37:42,610 --> 00:37:45,860 Tutti i miei file JavaScript stanno per essere collocati in HTML 636 00:37:45,860 --> 00:37:47,630 in modo che il browser possa accedere. 637 00:37:47,630 --> 00:37:50,330 Poi abbiamo una directory separata qui per JavaScript, 638 00:37:50,330 --> 00:37:54,340 ed ora è qui quote.js. 639 00:37:54,340 --> 00:38:00,930 Nella parte superiore di questo file questo qui dice che voglio aspettare per l'intera pagina da caricare 640 00:38:00,930 --> 00:38:04,830 prima di provare a fare qualcosa. Perché è necessario? 641 00:38:04,830 --> 00:38:08,650 Si scopre che la prossima cosa ho intenzione di fare è iniziare la ricerca di un elemento 642 00:38:08,650 --> 00:38:10,810 che corrisponde qualche selettore. 643 00:38:10,810 --> 00:38:15,600 Se questo JavaScript è mai eseguito prima questo elemento viene caricato sulla pagina, 644 00:38:15,600 --> 00:38:17,820 poi tutto quello che cerco di fare non è andare a lavorare 645 00:38:17,820 --> 00:38:20,580 perché ho intenzione di provare a selezionare qualcosa che non c'è ancora. 646 00:38:20,580 --> 00:38:23,780 Così questa linea sulla parte superiore dice voglio che aspettare fino a quando tutto è caricato 647 00:38:23,780 --> 00:38:28,030 quindi abbiamo la garanzia che tutti gli elementi che sto cercando sono in realtà sulla pagina. 648 00:38:29,730 --> 00:38:34,310 Questo segno dollaro qui significa che sto utilizzando la libreria chiamata jQuery. 649 00:38:34,310 --> 00:38:38,570 Questa libreria jQuery ci permette di utilizzare questi selettori che abbiamo appena guardato. 650 00:38:38,570 --> 00:38:44,010 Dicendo $ poi passando come argomento il # modulo-preventivo, 651 00:38:44,010 --> 00:38:47,910 Ora sto selezionando quella forma che abbiamo appena dato un'occhiata a. 652 00:38:47,910 --> 00:38:52,290 Ora ho una rappresentazione di quella forma in memoria in qualche modo. 653 00:38:52,290 --> 00:38:56,760 >> Su questo oggetto ora, questa rappresentazione della forma, 654 00:38:56,760 --> 00:38:58,890 Ora sto utilizzando una funzione chiamata su. 655 00:38:58,890 --> 00:39:02,710 Che questa funzione non fa altro che sta per associare un gestore eventi. 656 00:39:02,710 --> 00:39:06,310 L'evento che stiamo per ascoltare è l'evento submit. 657 00:39:06,310 --> 00:39:08,890 Così, quando l'utente fa clic pulsante di invio o che preme Invio, 658 00:39:08,890 --> 00:39:11,730 questo evento sta andando a fuoco. 659 00:39:11,730 --> 00:39:16,390 Con aggancio in questo, ora posso ignorare il comportamento predefinito del modulo. 660 00:39:16,390 --> 00:39:19,770 Senza questa JavaScript, la forma avrebbe presentato a qualunque file PHP 661 00:39:19,770 --> 00:39:22,110 abbiamo usato in questo attributo action. 662 00:39:22,110 --> 00:39:25,440 Invece, ora sto dicendo, aspetta, aspetta, aspetta, io non voglio che tu faccia effettivamente tale. 663 00:39:25,440 --> 00:39:31,140 Voglio che questo accada prima di andare e cercare di presentare alcuni file PHP. 664 00:39:31,140 --> 00:39:32,870 Ora, che cosa voglio fare? 665 00:39:32,870 --> 00:39:39,270 A questo punto voglio usare AJAX per caricare in qualche modo in ciò che il prezzo del titolo è. 666 00:39:39,270 --> 00:39:44,170 La prima cosa che ho bisogno di sapere che cosa è disponibile l'utente sta guardando. 667 00:39:44,170 --> 00:39:46,760 Per fare questo ho intenzione di utilizzare un altro selettore. 668 00:39:46,760 --> 00:39:49,020 Questo è il terzo selettore abbiamo guardato prima. 669 00:39:49,020 --> 00:39:54,460 Questo dice che voglio iniziare questo elemento form con un ID di forma-preventivo. 670 00:39:54,460 --> 00:39:58,440 Poi, da qualche parte dentro di quella forma ci deve essere un elemento di input 671 00:39:58,440 --> 00:40:01,270 che ha un nome di simbolo. 672 00:40:01,270 --> 00:40:05,460 Se guardiamo indietro alla nostra HTML, abbiamo visto che avevamo un input [name = simbolo]. 673 00:40:05,460 --> 00:40:12,380 Ciò significa che questo sta andando a selezionare quella casella di testo che l'utente sta scrivendo in. 674 00:40:12,380 --> 00:40:13,870 Che bello. Abbiamo la casella di testo. 675 00:40:13,870 --> 00:40:17,360 Ora abbiamo solo bisogno di sapere cosa c'è dentro di essa. 676 00:40:17,360 --> 00:40:20,290 Per fare questo si può chiamare questo metodo qui, questo. Val, 677 00:40:20,290 --> 00:40:23,240 e questo la dice so cosa casella di testo che hai. 678 00:40:23,240 --> 00:40:28,160 Voglio che tu mi dica che cosa è l'utente ha digitato in quella casella di testo. 679 00:40:28,160 --> 00:40:34,440 Ora abbiamo una stringa chiamata simbolo che è uguale a tutto ciò che l'utente ha digitato trovi 680 00:40:34,440 --> 00:40:39,820 Che bello. Possiamo usare la stringa ora a fare la nostra richiesta. 681 00:40:39,820 --> 00:40:42,450 Si tratta di una nuova funzione qui, questa $, 682 00:40:42,450 --> 00:40:44,900 salvo non siamo più sarà la selezione di elementi, 683 00:40:44,900 --> 00:40:48,910 abbiamo intenzione di chiamare una funzione diversa che vengono forniti a noi da jQuery. 684 00:40:48,910 --> 00:40:54,810 Questa funzione AJAX è ciò che in realtà sta per fare questa richiesta HTTP. 685 00:40:54,810 --> 00:40:57,000 Quindi dobbiamo dire che un paio di cose. 686 00:40:57,000 --> 00:41:01,410 La prima cosa che dobbiamo dire a questa funzione è dove voglio la richiesta di andare. 687 00:41:01,410 --> 00:41:08,910 Da qualche parte nel mio progetto ho questo file all'interno della directory HTML chiamato quote.php. 688 00:41:08,910 --> 00:41:15,150 Posso accedere a questo file, abbiamo visto, proprio come questo, se vado su localhost / quote.php. 689 00:41:15,150 --> 00:41:20,450 >> Voglio che il mio supporto JavaScript per fare una richiesta a quella pagina. 690 00:41:20,450 --> 00:41:22,920 Che tipo di richiesta ora? 691 00:41:22,920 --> 00:41:27,210 Abbiamo visto prima che la forma ha questo metodo = attributo "post", 692 00:41:27,210 --> 00:41:29,270 e questo significa che sta andando a fare una richiesta POST, 693 00:41:29,270 --> 00:41:32,630 quindi non sta andando a mettere qualcosa nell'URL, piuttosto che una richiesta GET, 694 00:41:32,630 --> 00:41:36,860 che sarebbe solo essere licenziato se abbiamo appena si accede alla pagina con il browser web, per esempio. 695 00:41:36,860 --> 00:41:41,260 Ora abbiamo detto che voglio fare una richiesta HTTP POST 696 00:41:41,260 --> 00:41:44,840 a una pagina trova quote.php. 697 00:41:44,840 --> 00:41:51,490 Quando si invia il modulo, ricordo che abbiamo potuto accedere agli elementi di input all'interno di quella forma 698 00:41:51,490 --> 00:41:54,430 con la variabile $ _POST. 699 00:41:54,430 --> 00:41:58,710 Finora nella storia che non hanno effettivamente inviato insieme tutti i dati ancora. 700 00:41:58,710 --> 00:42:00,640 Abbiamo appena detto che stiamo facendo una richiesta AJAX 701 00:42:00,640 --> 00:42:03,200 e qui è il tipo di richiesta che stiamo facendo. 702 00:42:03,200 --> 00:42:07,090 Ora abbiamo bisogno di inviare effettivamente alcuni dati alla pagina. 703 00:42:07,090 --> 00:42:10,930 Per fare questo possiamo usare questa proprietà chiamata dati. 704 00:42:10,930 --> 00:42:14,950 Il valore di questa proprietà è in realtà un array associativo. 705 00:42:14,950 --> 00:42:19,390 La ragione di questo è che ci permette di inviare più di 1 pezzo di dati. 706 00:42:19,390 --> 00:42:24,750 Ecco perché abbiamo queste parentesi graffe qui nidificato all'interno di queste parentesi graffe altri. 707 00:42:24,750 --> 00:42:29,680 I tasti in questi array associativi stanno per essere la stessa cosa 708 00:42:29,680 --> 00:42:32,630 come quelli nome attributi nei nostri elementi del modulo. 709 00:42:32,630 --> 00:42:35,740 Questo significa che se io mando lungo una chiave di simbolo, 710 00:42:35,740 --> 00:42:41,870 questo significa che la mia pagina PHP può accedere a questi dati con $ _POST [simbolo] 711 00:42:41,870 --> 00:42:44,640 proprio come abbiamo fatto prima, quando eravamo invio di un modulo. 712 00:42:44,640 --> 00:42:47,090 E ora i dati effettivi si desidera inviare 713 00:42:47,090 --> 00:42:50,790 sarà l'interno valore di questo array associativo. 714 00:42:50,790 --> 00:42:54,070 >> Abbiamo conservato questo testo in un simbolo variabile chiamata, 715 00:42:54,070 --> 00:42:57,380 e così stiamo inviando lungo ora una chiave di simbolo 716 00:42:57,380 --> 00:43:01,380 e un valore di ciò che l'utente ha digitato trovi 717 00:43:01,380 --> 00:43:06,270 Ora abbiamo fatto questa richiesta HTTP, il nostro file PHP è stato eseguito, 718 00:43:06,270 --> 00:43:11,480 e sta andando a inviare i dati indietro al client che appena fatto questa richiesta. 719 00:43:11,480 --> 00:43:15,220 Ora abbiamo bisogno di rispondere a tutto ciò che il server ci ha detto. 720 00:43:15,220 --> 00:43:20,180 Per fare questo abbiamo questa ultima proprietà che qui si chiama successo. 721 00:43:20,180 --> 00:43:24,240 Il valore di questa chiave di successo è in realtà sta per essere una funzione, 722 00:43:24,240 --> 00:43:26,910 e questa è una delle cose veramente interessanti che si possono fare con JavaScript. 723 00:43:26,910 --> 00:43:31,720 Non solo è possibile avere interi array o come un valore all'interno di un array associativo, 724 00:43:31,720 --> 00:43:34,170 si può anche avere una funzione. 725 00:43:34,170 --> 00:43:36,380 Così dicendo il successo, questa è la mia chiave. 726 00:43:36,380 --> 00:43:38,830 Un colon dice qui arriva il valore, 727 00:43:38,830 --> 00:43:41,810 e ora il valore di questo è in realtà una funzione. 728 00:43:41,810 --> 00:43:44,460 Quindi non abbiamo bisogno di dare un nome a questa funzione di per sé. 729 00:43:44,460 --> 00:43:48,820 Possiamo solo dire che questo sarà qualche funzione. E 'intenzione di prendere 1 argomento. 730 00:43:48,820 --> 00:43:51,190 L'argomento di questa funzione sta per essere 731 00:43:51,190 --> 00:43:54,460 qualunque sia il server ci ha mandato indietro dalla richiesta. 732 00:43:54,460 --> 00:43:57,750 Proprio come quando il nostro browser effettua una richiesta, il server invia qualcosa in cambio 733 00:43:57,750 --> 00:43:59,060 e il browser viene visualizzato, 734 00:43:59,060 --> 00:44:03,030 nel contesto di AJAX che abbiamo appena fatto una richiesta, il server ha inviato qualcosa in cambio, 735 00:44:03,030 --> 00:44:07,110 e ora che abbiamo rappresentato come una stringa. 736 00:44:07,110 --> 00:44:11,280 Con la stringa Vorrei solo che per visualizzare nella pagina. 737 00:44:11,280 --> 00:44:14,040 Per fare questo ho intenzione di avere un selettore scorso. 738 00:44:14,040 --> 00:44:17,570 Voglio selezionare l'elemento con il prezzo ID. 739 00:44:17,570 --> 00:44:20,710 Questo è solo un div vuoto che ho creato sulla pagina, 740 00:44:20,710 --> 00:44:26,640 e voglio impostare il contenuto di tale div di essere ciò che il server ci ha inviato indietro. 741 00:44:26,640 --> 00:44:30,280 In realtà ho un po 'modificato quote.php. 742 00:44:30,280 --> 00:44:33,460 >> Piuttosto che chiamare render e rendering qualche pagina, 743 00:44:33,460 --> 00:44:38,100 quote.php ora sta semplicemente andando a stampare il valore del titolo sotto forma di stringa. 744 00:44:38,100 --> 00:44:41,880 Quindi, se si dovesse visitare la pagina in realtà, si sarebbe solo vedere che piccola stringa 745 00:44:41,880 --> 00:44:45,030 di ciò che il prezzo dell'azione è. 746 00:44:45,030 --> 00:44:50,170 Un ultima cosa che dobbiamo fare qui è solo assicurarsi che questa funzione restituisce false. 747 00:44:50,170 --> 00:44:53,560 Che cosa questo dice è che se sono all'interno di un gestore di eventi 748 00:44:53,560 --> 00:44:57,300 e che gestore di eventi restituisce false invece di restituire vero, 749 00:44:57,300 --> 00:45:01,510 che significa che non voglio l'evento originale al fuoco. 750 00:45:01,510 --> 00:45:05,270 In questo caso, se non ha avuto alcun Javascript e abbiamo presentato un modulo, 751 00:45:05,270 --> 00:45:08,280 il nostro browser web sta per dire: "ho intenzione di inviare i dati lungo," 752 00:45:08,280 --> 00:45:10,130 e andranno a inviare a un'altra pagina. 753 00:45:10,130 --> 00:45:14,360 Poiché stiamo usando AJAX ora, non c'è bisogno di inviare l'utente a un'altra pagina. 754 00:45:14,360 --> 00:45:17,920 Stiamo solo andando a visualizzare i risultati in modo dinamico in questa stessa pagina. 755 00:45:17,920 --> 00:45:21,460 Noi davvero non si vuole loro di andare da nessuna parte, e voglio rimanere sulla stessa pagina. 756 00:45:21,460 --> 00:45:27,060 Così, restituito false, ci assicuriamo che la forma non lo fa per noi. 757 00:45:27,060 --> 00:45:31,170 Diamo uno sguardo a ciò che questo si presenta come. 758 00:45:31,170 --> 00:45:34,180 La nostra pagina Preventivo sembra la stessa. 759 00:45:34,180 --> 00:45:37,240 Vorrei tirare su l'ispettore qui in modo che possiamo vedere cosa sta succedendo. 760 00:45:37,240 --> 00:45:40,270 Ne fanno un po 'meno grande. 761 00:45:40,270 --> 00:45:44,590 Ricorda che se apriamo la scheda di rete, è qui che possiamo vedere tutte le richieste HTTP 762 00:45:44,590 --> 00:45:47,570 che stanno accadendo nella pagina. 763 00:45:47,570 --> 00:45:52,890 >> Per un simbolo farmi digitare AAPL e fare clic su Richiedi preventivo. 764 00:45:52,890 --> 00:45:56,720 Ora abbiamo visto che una quota di Apple costa un certo numero di dollari 765 00:45:56,720 --> 00:46:00,410 appena apparso sulla pagina, ma l'URL non è affatto cambiata. 766 00:46:00,410 --> 00:46:04,570 In realtà, è qui la richiesta HTTP che abbiamo appena fatto. 767 00:46:04,570 --> 00:46:09,980 Abbiamo fatto una richiesta POST a quote.php. Questo ha senso. 768 00:46:09,980 --> 00:46:12,800 Questo è ciò che il server ci ha inviato indietro. 769 00:46:12,800 --> 00:46:16,320 Non è più presente documento gigantesco HTML con immagini e cose del genere, 770 00:46:16,320 --> 00:46:20,920 è solo una riga di testo, e poi abbiamo appena visualizzata la riga di testo. 771 00:46:20,920 --> 00:46:26,290 Se torniamo alle intestazioni e vedere quello che effettivamente inviato all'interno di questa richiesta HTTP, 772 00:46:26,290 --> 00:46:33,950 possiamo vedere qui che abbiamo inviato lungo una chiave di simbolo e un valore di AAPL, 773 00:46:33,950 --> 00:46:36,430 che è ciò che l'utente ha digitato trovi 774 00:46:36,430 --> 00:46:39,230 Questo è bello, ma è ancora un po 'fastidioso. 775 00:46:39,230 --> 00:46:42,490 Devo ancora fare clic su questo pulsante per ottenere la quotazione. 776 00:46:42,490 --> 00:46:45,880 Siamo persone molto impegnate e non abbiamo il tempo di fare clic sui pulsanti. 777 00:46:45,880 --> 00:46:49,910 Google realizzato questo un po 'di tempo fa, quando hanno implementato Google Instant. 778 00:46:49,910 --> 00:46:53,590 Che cosa fa Google Instant è come si sta digitando parte proprio la visualizzazione dei risultati per voi 779 00:46:53,590 --> 00:46:56,520 in modo da non dovete preoccuparvi di anche facendo clic su Cerca. 780 00:46:56,520 --> 00:46:58,730 In realtà, una storia divertente legata a quella. 781 00:46:58,730 --> 00:47:01,100 Una volta che Google Instant è uscito, la gente era come, "Wow, questo è super fantastico." 782 00:47:01,100 --> 00:47:02,540 "Questo è così cool." 783 00:47:02,540 --> 00:47:05,950 E uno studente fino a Stanford, che aveva 19 anni al momento 784 00:47:05,950 --> 00:47:09,000 fatto questo sito chiamato YouTube Instant. 785 00:47:09,000 --> 00:47:13,170 Tutti immediata YouTube si è di fatto la ricerca su YouTube all'istante. 786 00:47:13,170 --> 00:47:17,020 Quindi, piuttosto che dover andare a YouTube.com e colpire Ricerca, 787 00:47:17,020 --> 00:47:21,650 quando inizia a digitare in qualcosa di immediato come YouTube CS50, 788 00:47:21,650 --> 00:47:25,320 abbiamo potuto vedere qui che è il tentativo di una connessione a Internet lenta 789 00:47:25,320 --> 00:47:28,500 popolano questi risultati in diretta. 790 00:47:28,500 --> 00:47:35,590 Per fare questo si può effettivamente fare una modifica molto semplice per il nostro file quote.js. 791 00:47:35,590 --> 00:47:40,900 In questo momento stiamo collegando questo evento quando il modulo viene inviato. 792 00:47:40,900 --> 00:47:43,760 Non abbiamo voglia di rendere l'utente più sostengono che forma, 793 00:47:43,760 --> 00:47:48,570 quindi cerchiamo di fuoco invece che questo evento ogni volta che l'utente preme un tasto. 794 00:47:48,570 --> 00:47:53,200 Per fare questo si deve prima modificare l'evento da presentare al keyup. 795 00:47:53,200 --> 00:47:55,740 Ciò significa che invece di aspettare che il modulo per presentare, 796 00:47:55,740 --> 00:47:58,490 ogni volta che viene premuto il tasto, qualcosa sta per accadere. 797 00:47:58,490 --> 00:48:02,030 E non ha più senso di collegare questo evento keyup per l'intero modulo. 798 00:48:02,030 --> 00:48:05,080 Abbiamo davvero interessa solo che la casella di ricerca. 799 00:48:05,080 --> 00:48:09,320 >> Per selezionare che ora, possiamo cambiare questo sia, piuttosto che la forma-preventivo, 800 00:48:09,320 --> 00:48:14,220 modulo-preventivo e avremo un ingresso (digitare il testo =) o potremmo dire (nome del simbolo =) - 801 00:48:14,220 --> 00:48:16,420 tutto ciò che vogliamo. 802 00:48:16,420 --> 00:48:18,650 Ora c'è un'ultima cosa che dobbiamo fare. 803 00:48:18,650 --> 00:48:21,190 Ricordate qui quando abbiamo detto return false 804 00:48:21,190 --> 00:48:24,370 abbiamo detto che non vogliamo che evento predefinito al fuoco. 805 00:48:24,370 --> 00:48:26,390 Ma si da il caso che se si disattiva che ora, 806 00:48:26,390 --> 00:48:29,660 tutto ciò che digitare non è intenzione di mostrare nel browser più 807 00:48:29,660 --> 00:48:33,000 perché sarebbe il comportamento predefinito di digitare in una casella di testo. 808 00:48:33,000 --> 00:48:38,660 Noi non vogliamo più ignorare che, quindi cerchiamo di distruggere questo return false. 809 00:48:38,660 --> 00:48:44,800 Se non che e ricaricare la pagina, ora quando inizia a digitare AAPL 810 00:48:44,800 --> 00:48:50,160 vedrai che il prezzo del titolo in fondo qui sta completando automaticamente. 811 00:48:50,160 --> 00:48:53,150 Così qui è CS50 immediata Finanza. 812 00:48:53,150 --> 00:48:55,860 In realtà una storia divertente su YouTube Instant 813 00:48:55,860 --> 00:48:59,420 è che solo tipo di studente lo ha scritto come un 1-notte progetto, 814 00:48:59,420 --> 00:49:03,800 e il giorno dopo gli è stato offerto un posto di lavoro da parte del CEO di YouTube. 815 00:49:03,800 --> 00:49:10,610 Così semplice come quello, CS50 studenti, i progetti finali si può ottenere un lavoro a YouTube. 816 00:49:10,610 --> 00:49:14,720 Qualcosa del genere è una idea davvero cool per un progetto finale, giusto? 817 00:49:14,720 --> 00:49:18,170 Abbiamo avuto un po 'di funzionalità esistenti che abbiamo voluto integrare con. 818 00:49:18,170 --> 00:49:20,330 Abbiamo migliorare l'esperienza utente un po ', 819 00:49:20,330 --> 00:49:24,340 e improvvisamente ricerca di qualcosa su YouTube istantanea potrebbe essere molto più facile 820 00:49:24,340 --> 00:49:27,290 che cercare su YouTube regolare. 821 00:49:27,290 --> 00:49:30,790 Ecco, questo è AJAX in poche parole. 822 00:49:30,790 --> 00:49:34,860 >> Negli esempi che Giuseppe stava mostrando, abbiamo visto un sacco di autocompletes, 823 00:49:34,860 --> 00:49:39,250 e quei autocompletes sono davvero, davvero a portata di mano perché non c'è bisogno di ricordare - 824 00:49:39,250 --> 00:49:41,770 Ad esempio, se non si ricorda il prezzo delle azioni di Apple 825 00:49:41,770 --> 00:49:45,110 e abbiamo appena so che è una cosa aa, piuttosto che dire a me, 826 00:49:45,110 --> 00:49:48,740 "Una parte di questa cosa costa tutti quei soldi," 827 00:49:48,740 --> 00:49:52,540 Mi piacerebbe un po 'come sapere quali azioni iniziare aa. 828 00:49:52,540 --> 00:49:58,340 Possiamo farlo davvero bene con la libreria Bootstrap che è già incluso 829 00:49:58,340 --> 00:50:01,380 all'interno di CS50 Finanze. 830 00:50:01,380 --> 00:50:09,390 Se si arriva qui per il tag JavaScript e scorrere fino a typeahead, 831 00:50:09,390 --> 00:50:13,730 questo è solo un bel plugin che qualcuno già scritto per noi, 832 00:50:13,730 --> 00:50:16,980 e si può facilmente utilizzare le sue funzionalità come questo. 833 00:50:16,980 --> 00:50:21,410 Ho digitato in un A e ecco un elenco di alcuni stati che iniziano con A. 834 00:50:21,410 --> 00:50:25,360 Diciamo che credo che questo è davvero cool ed è il momento per me di includere questo nella mia pagina. 835 00:50:25,360 --> 00:50:28,300 Si scopre che questo è molto, molto semplice. 836 00:50:28,300 --> 00:50:32,810 Facciamo un salto qui a quote3.js. 837 00:50:34,890 --> 00:50:37,380 Il mio file ha un aspetto un po 'diverso. 838 00:50:37,380 --> 00:50:39,700 Qui sotto tutte le mie cose AJAX è la stessa. 839 00:50:39,700 --> 00:50:43,170 Voglio caricare i dati di stock, senza dover andare in un'altra pagina. 840 00:50:43,170 --> 00:50:46,220 Ma ora voglio usare questo plugin. 841 00:50:46,220 --> 00:50:51,020 La documentazione Bootstrap ha ottimi esempi di come esattamente lo posso fare. 842 00:50:51,020 --> 00:50:54,350 Voglio dire, "Ecco l'input che voglio il completamento automatico," 843 00:50:54,350 --> 00:50:56,640 e ho intenzione di chiamare questa funzione chiamata typeahead, 844 00:50:56,640 --> 00:50:59,730 e che sta andando a gestire tutte le cose typeahead per noi. 845 00:50:59,730 --> 00:51:02,090 Si inizializza la lista, che farà tutti i nostri filtri. 846 00:51:02,090 --> 00:51:06,680 L'unica cosa di cui ha bisogno è di sapere quali dati stiamo autocompleting su. 847 00:51:06,680 --> 00:51:10,480 Così ho scoperto questa chiave solo leggendo la documentazione e guardando gli esempi. 848 00:51:10,480 --> 00:51:14,150 Se mi danno una chiave di sorgente, il valore di questa chiave 849 00:51:14,150 --> 00:51:17,770 è solo alcune serie di cose che voglio completamento automatico su. 850 00:51:17,770 --> 00:51:20,180 Questa variabile è venuto da questo altro file. 851 00:51:20,180 --> 00:51:23,400 Apro symbols.js. 852 00:51:23,400 --> 00:51:27,980 >> Questo symbols.js è proprio questa matrice molto, molto grande che contiene stringhe 853 00:51:27,980 --> 00:51:32,080 di tutti questi simboli di borsa dal NASDAQ. 854 00:51:32,080 --> 00:51:42,190 Se voglio tornare al codice HTML, in modo da jharvard, vhost, globalhost, html, i modelli, 855 00:51:42,190 --> 00:51:45,820 quote_form. 856 00:51:45,820 --> 00:51:50,910 Dal momento che è ora chiamato quote3.js, vorrei modificare il file JavaScript che sto anche qui. 857 00:51:50,910 --> 00:51:55,110 Ora ho quote3.js, così ho intenzione di caricare in quel file JavaScript separato, 858 00:51:55,110 --> 00:51:57,910 quello che ha che Bootstrap completamento automatico. 859 00:51:57,910 --> 00:52:04,430 Ora, quando ho tornare al browser, ricaricare la pagina, e mi metto a digitare aa, 860 00:52:04,430 --> 00:52:06,880 c'è il mio completamento automatico. Ed è stato davvero così semplice come sembra. 861 00:52:06,880 --> 00:52:11,400 Ho avuto 1 riga di codice che ha appena detto: "Qui ci sono le cose che voglio il completamento automatico," 862 00:52:11,400 --> 00:52:16,590 e improvvisamente ho questa funzionalità davvero, davvero bella con non un sacco di fatica. 863 00:52:16,590 --> 00:52:19,810 Come si sta sviluppando siti web e in particolare il lato front-end delle cose, 864 00:52:19,810 --> 00:52:21,840 si sta andando a trovare questo è il caso molto. 865 00:52:21,840 --> 00:52:25,700 Ci sono, molto molto, molto di librerie libere davvero cool là fuori 866 00:52:25,700 --> 00:52:30,190 che lo rendono super facile da fare cose come questa. 867 00:52:30,190 --> 00:52:37,230 Qualcuno può pensare a eventuali inconvenienti semplicemente autocompleting in questo lungo elenco di simboli? 868 00:52:37,230 --> 00:52:41,580 Che cosa potrebbe essere qualcosa che non è il migliore con questo approccio? 869 00:52:42,790 --> 00:52:45,960 Gia '. >> [Studente] Ora, se avete un sacco di [incomprensibile] 870 00:52:45,960 --> 00:52:50,420 Gia '. In questo momento stiamo scaricando questo file enorme Javascript e ci sono un sacco di simboli. 871 00:52:50,420 --> 00:52:54,360 E così, se abbiamo un sacco di roba, questo tipo potrebbe di aumentare la latenza non solo di ricerca 872 00:52:54,360 --> 00:52:56,600 ma anche il download del file vero e proprio. 873 00:52:56,600 --> 00:52:58,670 Grande. Tutto il resto? 874 00:53:01,950 --> 00:53:05,280 In questo momento non c'è alcun senso di rilevanza. 875 00:53:05,280 --> 00:53:08,190 Se si digita in un A, le aziende che compaiono qui 876 00:53:08,190 --> 00:53:11,220 potrebbero non essere le aziende più popolari che iniziano con A. 877 00:53:11,220 --> 00:53:17,130 >> Prima di arrivare ad Apple, che potrebbe richiedere un po 'di più i caratteri di trovare quello che sto cercando. 878 00:53:17,130 --> 00:53:20,420 Questo completamento automatico non ha questo senso di rilevanza. 879 00:53:20,420 --> 00:53:24,400 E 'solo per dire: "Tutto ciò che soddisfa le vado a visualizzare." 880 00:53:24,400 --> 00:53:30,510 Invece, mi piacerebbe integrare in qualche modo una certa rilevanza nelle mie ricerche. 881 00:53:30,510 --> 00:53:36,440 Se vado qui a Yahoo! Finanza, finance.yahoo.com, 882 00:53:36,440 --> 00:53:42,100 Se cerco di inserire un simbolo a pagina Yahoo! Finance 883 00:53:42,100 --> 00:53:52,310 Io e iniziare a digitare goog, ho questa bella lista di cose. 884 00:53:52,310 --> 00:53:57,100 Chiaramente, sembra che Yahoo! Finanza sta facendo qualcosa di più intelligente qui. 885 00:53:57,100 --> 00:53:59,790 Hanno una certa rilevanza e hanno anche informazioni aggiuntive 886 00:53:59,790 --> 00:54:01,430 come il nome del titolo. 887 00:54:01,430 --> 00:54:05,850 E 'qualcosa che non posso ottenere con solo il mio stock list di simboli. 888 00:54:05,850 --> 00:54:09,520 Voglio questo e così ho intenzione di prenderlo. 889 00:54:09,520 --> 00:54:11,790 Per fare che ti permette di fare un paio di cose. 890 00:54:11,790 --> 00:54:15,580 Si deve prima aprire la finestra di ispezione in questa pagina 891 00:54:15,580 --> 00:54:18,100 perché abbiamo visto che questa pagina non si ricarica a tutti, 892 00:54:18,100 --> 00:54:21,960 quindi è probabile l'utilizzo di AJAX in qualche modo essere caricato i suoi dati. 893 00:54:21,960 --> 00:54:23,920 Siamo in grado di sapere quali dati sta caricando. 894 00:54:23,920 --> 00:54:28,390 Se clicco su questa scheda di rete, queste saranno tutte le richieste che iniziano a essere licenziato. 895 00:54:28,390 --> 00:54:34,020 Ora, se digito goo, possiamo vedere che ho appena ricevuto una nuova richiesta HTTP. 896 00:54:34,020 --> 00:54:37,490 Questo è probabilmente dove i dati che sta venendo. 897 00:54:37,490 --> 00:54:41,990 Certo, basta, se guardo a questo indirizzo, che è un po 'strano di nome, 898 00:54:41,990 --> 00:54:46,930 possiamo vedere che questo è esattamente dove Yahoo sta inviando i suoi dati da fuori. 899 00:54:46,930 --> 00:54:53,400 >> Ho creato un file separato chiamato suggest.php che è molto simile nello spirito alla funzione di ricerca. 900 00:54:53,400 --> 00:54:57,730 E 'fondamentalmente andando a fare una query di URL di Yahoo, recuperare alcuni dati, 901 00:54:57,730 --> 00:54:59,750 e inviare di nuovo a me. 902 00:54:59,750 --> 00:55:02,570 Ora, invece di usare questo grande, enorme elenco di simboli, 903 00:55:02,570 --> 00:55:05,280 Posso usare Yahoo cose belle rilevanza, 904 00:55:05,280 --> 00:55:08,150 e non c'è bisogno di scaricare il file massiccia JavaScript. 905 00:55:08,150 --> 00:55:12,040 Sto solo andando a tirare giù i simboli delle azioni effettivamente rilevanti. 906 00:55:12,040 --> 00:55:13,960 Saltiamo in quella. 907 00:55:13,960 --> 00:55:17,360 Così html, js. Siamo ora in quote4. 908 00:55:17,360 --> 00:55:22,120 Ora non siamo più utilizzando quel grande elenco di file JavaScript. 909 00:55:22,120 --> 00:55:24,430 Ma c'è una sorta di piccolo problema di progettazione qui. 910 00:55:24,430 --> 00:55:28,200 Abbiamo detto che la A in AJAX è asincrono. 911 00:55:28,200 --> 00:55:31,000 Ciò significa che quando faccio una richiesta AJAX, 912 00:55:31,000 --> 00:55:36,490 così proprio qui sulla linea 8, è qui che la mia richiesta AJAX è effettivamente sparato. 913 00:55:36,490 --> 00:55:40,370 Diciamo che ora ho un po 'di codice qui che sta andando a fare alcune cose 914 00:55:40,370 --> 00:55:43,930 come avverte l'utente o cambiare qualcosa sulla pagina. 915 00:55:43,930 --> 00:55:49,830 Cosa non sta per accadere è il browser non ha intenzione di attendere per la richiesta di continuare 916 00:55:49,830 --> 00:55:53,480 prima di scendere e colpire questa linea. 917 00:55:53,480 --> 00:55:55,900 Questa è la parte asincrona. 918 00:55:55,900 --> 00:55:58,400 E 'intenzione di fare questa richiesta e dire: "Ogni volta che hai finito, 919 00:55:58,400 --> 00:56:03,080 "Tornare indietro e chiamare quella funzione che ti ho detto di chiamare dentro di successo." 920 00:56:03,080 --> 00:56:07,300 Questo significa che non si può semplicemente scaricare tutti gli stock in anticipo. 921 00:56:07,300 --> 00:56:10,300 Abbiamo bisogno di fare la richiesta e aspettare che qualcosa di tornare. 922 00:56:10,300 --> 00:56:13,330 Ciò significa che, prima, si potrebbe semplicemente dire Bootstrap, 923 00:56:13,330 --> 00:56:15,580 "Ecco la lista delle cose che si desidera sul completamento automatico." 924 00:56:15,580 --> 00:56:18,950 Non possiamo più farlo più perché non sappiamo 925 00:56:18,950 --> 00:56:21,780 quello che vogliamo in realtà il completamento automatico. 926 00:56:21,780 --> 00:56:25,190 Per fortuna, Bootstrap pensato a questo perché quelli sono ragazzi intelligenti laggiù, 927 00:56:25,190 --> 00:56:30,160 e che in realtà ci hanno dato un altro modo per caricare questo plugin typeahead. 928 00:56:30,160 --> 00:56:35,630 Prima, il valore di questa proprietà di origine era proprio questa matrice grande di cose da completamento automatico su. 929 00:56:35,630 --> 00:56:39,580 >> Ora la proprietà source è in realtà una funzione, 930 00:56:39,580 --> 00:56:44,580 e lo scopo di questa funzione è quello di capire quali sono le cose a completamento automatico su sono. 931 00:56:44,580 --> 00:56:48,730 Il modo in cui sta andando a capirlo è sta andando a chiedere Yahoo! Finanza 932 00:56:48,730 --> 00:56:51,750 quali sono le cose migliori sono a completamento automatico. 933 00:56:51,750 --> 00:56:54,500 Per fare questo ho intenzione di fare una richiesta molto simile AJAX. 934 00:56:54,500 --> 00:56:59,010 Ho intenzione di chiedere a questa pagina suggest.php. 935 00:56:59,010 --> 00:57:01,360 Voglio inviare lungo i simboli ancora. 936 00:57:01,360 --> 00:57:05,570 E ora il mio successo, la documentazione Bootstrap mi ha detto 937 00:57:05,570 --> 00:57:09,130 che per popolare quella lista di cose, 938 00:57:09,130 --> 00:57:14,370 tutto quello che devi fare è passare questo array ora alla funzione di callback. 939 00:57:14,370 --> 00:57:15,660 Ma aspetta un attimo. 940 00:57:15,660 --> 00:57:20,240 Se si suppone che sia un array e AJAX mi sta mandando indietro il testo, 941 00:57:20,240 --> 00:57:22,720 come è possibile? 942 00:57:22,720 --> 00:57:27,910 Questo introduce un nuovo modo di scambio di dati chiamato JSON. 943 00:57:27,910 --> 00:57:33,000 In questo caso non stiamo solo rimandando una semplice stringa di testo. 944 00:57:33,000 --> 00:57:37,670 Ora abbiamo a che fare con questa lista più complesso di simboli di borsa. 945 00:57:37,670 --> 00:57:41,730 Questi simboli di borsa può includere anche cose come il nome della società o dei prezzi correnti. 946 00:57:41,730 --> 00:57:47,550 Solo mediante una stringa di gran lunga che non è formattato in alcun modo prevedibile 947 00:57:47,550 --> 00:57:51,970 non sarà il modo migliore per ottenere i dati dal server di Yahoo per me 948 00:57:51,970 --> 00:57:54,540 in un modo che io possa facilmente capire. 949 00:57:54,540 --> 00:58:01,280 JSON è una tecnologia che sfrutta il modo in cui creare gli array associativi in ​​JavaScript. 950 00:58:01,280 --> 00:58:04,510 Questo assomiglia molto a un array associativo JavaScript, 951 00:58:04,510 --> 00:58:06,600 e in realtà, è perché è. 952 00:58:06,600 --> 00:58:09,710 JSON è l'acronimo di JavaScript Object Notation. 953 00:58:09,710 --> 00:58:15,020 Questo è fondamentalmente un formato concordato per il trasferimento di dati avanti e indietro. 954 00:58:15,020 --> 00:58:18,280 Qui l'oggetto JSON o questo array associativo JSON 955 00:58:18,280 --> 00:58:21,010 mi manda alcuni dati relativi a un corso. 956 00:58:21,010 --> 00:58:25,110 >> Le chiavi di questo array sono cose come il corso che ha un valore di CS50, 957 00:58:25,110 --> 00:58:29,140 e qui possiamo vedere che io possa avere un valore che è un array. 958 00:58:29,140 --> 00:58:32,730 Non c'è bisogno di fare le cose come le stringhe di analisi e cercare le virgole 959 00:58:32,730 --> 00:58:35,330 e fare cose folli del genere. 960 00:58:35,330 --> 00:58:38,820 Poiché questo è dichiarato in questo formato JSON, 961 00:58:38,820 --> 00:58:43,510 Javascript e jQuery già hanno funzioni per convertire una stringa 962 00:58:43,510 --> 00:58:48,140 che assomiglia a questo JSON in un array associativo reale JavaScript 963 00:58:48,140 --> 00:58:50,440 che siamo in grado di lavorare. 964 00:58:50,440 --> 00:58:56,660 Fare questo è semplice come dire che non è più tale, suggest.php file, 965 00:58:56,660 --> 00:58:59,040 mandarmi indietro semplicemente una stringa di testo, 966 00:58:59,040 --> 00:59:01,950 ma so che sta per essere mandarmi indietro JSON. 967 00:59:01,950 --> 00:59:06,760 Ciò significa che JSON che può essere convertito in un array JavaScript associativo. 968 00:59:06,760 --> 00:59:10,830 E così jQuery, mi piacerebbe che tu lo faccia per me. 969 00:59:10,830 --> 00:59:13,990 Ciò significa che questo parametro risposta qui, 970 00:59:13,990 --> 00:59:16,070 questo non è più solo una stringa. 971 00:59:16,070 --> 00:59:19,860 Perché abbiamo detto jQuery che viene qui un po 'di JSON, 972 00:59:19,860 --> 00:59:22,950 jQuery sta per essere abbastanza intelligente per dire: "Volevi JSON?" 973 00:59:22,950 --> 00:59:26,890 "Ho intenzione di convertire in un array associativo per te." 974 00:59:26,890 --> 00:59:32,100 Facciamo effettivamente prendere uno sguardo alla scheda di rete, una volta che abbiamo quote4.js. 975 00:59:32,100 --> 00:59:35,400 Cambieremo questa e ricaricare la pagina. 976 00:59:37,150 --> 00:59:41,250 Ora ho intenzione di digitare a-a nuovo. 977 00:59:41,250 --> 00:59:45,600 Ho fatto un paio di domande a suggest.php, ma ora questa risposta, 978 00:59:45,600 --> 00:59:48,670 piuttosto che solo la stringa, è JSON. 979 00:59:48,670 --> 00:59:52,580 Così ho una parentesi graffa aperta dicendo: "Ecco che arriva un array associativo." 980 00:59:52,580 --> 00:59:56,830 >> La chiave primo e unico di questo array associativo è chiamato simboli, 981 00:59:56,830 --> 01:00:00,240 e quindi qui è un array di tutti i simboli relativi 982 01:00:00,240 --> 01:00:04,820 arrivando ora da Yahoo! Finanza, non da quella lista gigantesca. 983 01:00:06,110 --> 01:00:10,630 È così che io possa semplicemente compilare questo plugin autocomplete 984 01:00:10,630 --> 01:00:14,280 con alcuni dati che non è proveniente da un file locale che è già predeterminato 985 01:00:14,280 --> 01:00:17,490 ma da qualcos'altro. 986 01:00:17,490 --> 01:00:21,160 Si scopre che si può effettivamente usufruire di una tecnologia chiamata JSONP, 987 01:00:21,160 --> 01:00:27,420 o JSON con imbottitura, che eliminerà questo intermediario suggest.php. 988 01:00:27,420 --> 01:00:34,010 Ma invece di fare questo, diamo invece un'occhiata a come posso migliorare questo ancora di più. 989 01:00:34,010 --> 01:00:36,040 Mi piace molto typeahead Bootstrap di. E 'veramente bello. 990 01:00:36,040 --> 01:00:39,570 Ma stiamo diventando bravi a JavaScript e vogliamo fare questo tipo di noi stessi, 991 01:00:39,570 --> 01:00:43,870 magari dare un'occhiata a ciò che questo plugin potrebbe fare. 992 01:00:43,870 --> 01:00:46,500 Che è più utilizzare quella cosa typeahead, 993 01:00:46,500 --> 01:00:50,550 e cerchiamo di fare questa lista di titoli suggeriti noi stessi. 994 01:00:50,550 --> 01:00:53,790 Qui in quote6.php abbiamo intenzione di iniziare allo stesso modo. 995 01:00:53,790 --> 01:00:58,050 Ogni volta che qualcuno scrive qualcosa, vogliamo fare una richiesta AJAX. 996 01:00:58,050 --> 01:01:01,590 Questo è simile alla nostra originale CS50 immediata Finanza. 997 01:01:01,590 --> 01:01:05,020 Piuttosto che fare una richiesta di quote.php, 998 01:01:05,020 --> 01:01:08,530 stiamo ora facendo una richiesta di quel file come prima, questo suggest.php, 999 01:01:08,530 --> 01:01:12,460 che è solo andare a estrarre i dati da Yahoo! Finanza. 1000 01:01:12,460 --> 01:01:19,480 >> Anche in questo caso, stiamo ancora aspettando JSON, ma ora, poiché il typeahead non sta facendo questo per noi, 1001 01:01:19,480 --> 01:01:24,850 abbiamo anche bisogno di inviare insieme il valore che si trova all'interno della casella di testo corrente. 1002 01:01:24,850 --> 01:01:28,120 Ora sappiamo che cosa chiedere di Yahoo! Finanza, 1003 01:01:28,120 --> 01:01:34,160 e così ora ecco la funzione che si vuole eseguire una volta che la richiesta viene completata. 1004 01:01:34,160 --> 01:01:36,520 Noi non abbiamo il plugin per fare la lista per noi, 1005 01:01:36,520 --> 01:01:40,630 quindi ecco dove stiamo effettivamente andando a costruire un elenco di suggerimenti. 1006 01:01:40,630 --> 01:01:44,850 Per fare questo, un po 'come in PHP abbiamo concatenato queste stringhe grandi di HTML 1007 01:01:44,850 --> 01:01:48,170 poi farli stampare, possiamo fare la stessa cosa esatta in JavaScript. 1008 01:01:48,170 --> 01:01:51,850 In primo luogo abbiamo intenzione di iniziare questa stringa chiamato suggerimenti, 1009 01:01:51,850 --> 01:01:54,590 e questa stringa è solo andare a contenere un po 'di HTML. 1010 01:01:54,590 --> 01:01:58,320 Noi vogliamo che sia un elenco di cose, in modo che andremo a iniziare con questo tag lista, 1011 01:01:58,320 --> 01:02:03,340 e ora stiamo andando a scorrere tutti i simboli che sono stati restituiti a noi. 1012 01:02:03,340 --> 01:02:06,500 Ricordate, perché abbiamo detto dataType: 'json', non si tratta di una stringa. 1013 01:02:06,500 --> 01:02:09,500 Questo è già un array per noi. Questo è davvero cool. 1014 01:02:09,500 --> 01:02:13,790 Possiamo semplicemente dire: "voglio che aggiungere un elemento di lista." 1015 01:02:13,790 --> 01:02:16,000 Ci metterò all'interno di un elemento in una parte di questo, 1016 01:02:16,000 --> 01:02:19,030 faremo di una classe di suggerimenti in modo da sapere quello che è, 1017 01:02:19,030 --> 01:02:23,880 ed ora ecco il simbolo che siamo tornati da Yahoo! Finanza. 1018 01:02:23,880 --> 01:02:27,230 >> Una volta che abbiamo creato un elemento per ciascuno dei simboli che abbiamo ottenuto indietro, 1019 01:02:27,230 --> 01:02:30,100 vogliamo solo chiudere l'elenco. 1020 01:02:30,100 --> 01:02:33,040 Così ora i suggerimenti rappresenta questo piccolo frammento HTML 1021 01:02:33,040 --> 01:02:37,860 che quando viene messo in una pagina sta per essere l'elenco delle cose che stiamo cercando. 1022 01:02:37,860 --> 01:02:41,070 Ora in realtà metterlo sulla pagina. 1023 01:02:41,070 --> 01:02:46,390 Per fare questo in realtà ho creato un altro div vuoto e l'ho dato un ID di suggerimenti. 1024 01:02:46,390 --> 01:02:52,520 Proprio come abbiamo impostato il contenuto del div che mostrano il prezzo dei dati di stock, 1025 01:02:52,520 --> 01:02:58,600 ora vuole solo impostare il contenuto di questo div a tutto ciò che questa stringa è 1026 01:02:58,600 --> 01:03:00,290 che contiene questi simboli. 1027 01:03:00,290 --> 01:03:07,650 Utilizzando questo metodo di HTML, questa variabile suggerimenti, questa stringa, è una stringa di codice HTML. 1028 01:03:07,650 --> 01:03:13,490 Voglio che prendere quella HTML e inserirlo all'interno del div chiamato suggerimenti. 1029 01:03:13,490 --> 01:03:15,680 Abbiamo appena aggiunto qualcosa al DOM ora. 1030 01:03:15,680 --> 01:03:20,360 Abbiamo aggiunto alcuni nuovi elementi al DOM che ora possiamo visualizzare nella pagina. 1031 01:03:20,360 --> 01:03:22,540 Vediamo come si presenta. 1032 01:03:22,540 --> 01:03:29,110 Se carichiamo in quote6 e ora siamo tornati, 1033 01:03:29,110 --> 01:03:34,480 ora quando inizia a digitare AAPL, non abbiamo più che Bootstrap completamento automatico, 1034 01:03:34,480 --> 01:03:38,470 ma ora abbiamo questa lista che ci siamo fatti. 1035 01:03:38,470 --> 01:03:43,230 Questo è un po 'più brutto del typeahead Bootstrap, per esempio, 1036 01:03:43,230 --> 01:03:45,580 ma ci permette di fare un'altra cosa. 1037 01:03:45,580 --> 01:03:48,660 Quando stavamo guardando quel plugin Bootstrap, 1038 01:03:48,660 --> 01:03:52,590 abbiamo visto che quando autocompleted, uno dei valori di completamento automatico è stato AAPL. 1039 01:03:52,590 --> 01:03:54,820 Questo potrebbe non essere così utile. 1040 01:03:54,820 --> 01:03:59,100 Come utente, non potrebbe riconoscere immediatamente tutti i simboli delle azioni. 1041 01:03:59,100 --> 01:04:02,370 Quello che probabilmente sono più propensi a riconoscere sono nomi reali della società. 1042 01:04:02,370 --> 01:04:05,310 Quindi non sarebbe veramente utile se invece di dire AAPL 1043 01:04:05,310 --> 01:04:07,970 questo ha detto qualcosa di simile a Apple Inc. 1044 01:04:07,970 --> 01:04:12,240 Perché abbiamo lanciato questo noi stessi, possiamo davvero facilmente farlo. 1045 01:04:12,240 --> 01:04:17,630 Apriamo il nostro ultimo file preventivo qui, quindi quote7. 1046 01:04:17,630 --> 01:04:23,200 >> Stessa cosa. Ho appena creato un altro file PHP che tornerà a noi più che i simboli. 1047 01:04:23,200 --> 01:04:25,550 Sarà anche restituirci i nomi della società. 1048 01:04:25,550 --> 01:04:28,150 E così stiamo facendo la stessa cosa. Stiamo facendo una richiesta AJAX. 1049 01:04:28,150 --> 01:04:32,370 Una volta che la richiesta è stata completata, abbiamo intenzione di eseguire questa funzione qui, 1050 01:04:32,370 --> 01:04:36,520 e questa funzione sta per costruire una serie di elementi di grande. 1051 01:04:36,520 --> 01:04:39,520 Ma la differenza è che il valore di queste liste non è più solo il simbolo, 1052 01:04:39,520 --> 01:04:45,370 è ora il nome. 1053 01:04:45,370 --> 01:04:47,070 Così abbiamo un piccolo problema. 1054 01:04:47,070 --> 01:04:51,590 Quando usiamo la nostra ricerca, abbiamo bisogno di passare in qualche modo il simbolo. 1055 01:04:51,590 --> 01:04:54,950 Non possiamo passare qualcosa di ricerca come Microsoft Corporation. 1056 01:04:54,950 --> 01:04:57,900 Abbiamo bisogno di passare MSFT. 1057 01:04:57,900 --> 01:05:01,640 Quando stiamo scrivendo HTML, abbiamo un sacco di bei attributi built-in. 1058 01:05:01,640 --> 01:05:05,440 Un A potrebbe essere associato un href o una classe. 1059 01:05:05,440 --> 01:05:08,230 Ma ciò che abbiamo veramente bisogno ora è per ciascuno di questi link 1060 01:05:08,230 --> 01:05:11,120 di avere un simbolo azionario associato. 1061 01:05:11,120 --> 01:05:14,240 Non c'è attributo built-in HTML per simbolo azionario, 1062 01:05:14,240 --> 01:05:21,010 ma per fortuna, HTML5 ci permette di creare i nostri attributi per essere tutto ciò che vogliamo. 1063 01:05:21,010 --> 01:05:24,620 Dicendo data-simbolo, ho introdotto un nuovo attributo 1064 01:05:24,620 --> 01:05:29,350 il cui nome ho appena fatto, e questo è bene perché l'ho preceduto da questi dati. 1065 01:05:29,350 --> 01:05:34,270 Stiamo andando a memorizzare all'interno di là del simbolo dal magazzino. 1066 01:05:34,270 --> 01:05:39,590 Che cosa questo significa è che, anche se stiamo visualizzando il valore del nome della società 1067 01:05:39,590 --> 01:05:43,380 all'interno del nostro completamento automatico, stiamo ancora ricordando il simbolo 1068 01:05:43,380 --> 01:05:47,110 associato a ciascuna società. 1069 01:05:47,110 --> 01:05:50,350 Il modo in cui stiamo facendo che si trova all'interno di questo stesso elemento. 1070 01:05:50,350 --> 01:05:52,930 Questo significa che abbiamo bisogno di fare una modifica più. 1071 01:05:52,930 --> 01:05:57,090 Quando l'abbiamo scegliere adesso, abbiamo bisogno di prendere effettivamente sfruttare l'attributo simbolo 1072 01:05:57,090 --> 01:06:00,220 piuttosto che il suo valore. 1073 01:06:00,220 --> 01:06:05,010 Se il backup, abbiamo associare un gestore eventi a suggerimenti. 1074 01:06:05,010 --> 01:06:09,280 Ogni volta che uno di questi suggerimenti si fa clic ora, voglio fare qualcosa. 1075 01:06:09,280 --> 01:06:13,160 Quello che voglio fare è cambiare il valore di tale casella di input. 1076 01:06:13,160 --> 01:06:16,100 Ora voglio impostare questa stessa funzione val. 1077 01:06:16,100 --> 01:06:21,060 >> Così, senza alcun argomento la funzione Val restituisce a te ciò che è già nella casella di testo, 1078 01:06:21,060 --> 01:06:27,070 ma se si dà una stringa, sta andando a prendere la stringa e metterlo nella casella di testo. 1079 01:06:27,070 --> 01:06:28,980 Sto selezionando la casella di testo nello stesso modo. 1080 01:06:28,980 --> 01:06:31,230 Il suo nome è il simbolo all'interno della forma-preventivo. 1081 01:06:31,230 --> 01:06:37,540 Ora lo sto inviando il valore dell'attributo data-simbolo. 1082 01:06:37,540 --> 01:06:41,560 Questa cosa qui è nuovo, questo $ (this). 1083 01:06:41,560 --> 01:06:46,850 Ciò si riferisce è l'elemento che è stato fatto clic. 1084 01:06:46,850 --> 01:06:50,880 Possiamo vedere che non stiamo associare un evento click 1085 01:06:50,880 --> 01:06:54,690 a ciascun elemento con una classe di suggerimento singolarmente. 1086 01:06:54,690 --> 01:06:57,140 Piuttosto, ci stiamo avvicinando questo un po 'diverso. 1087 01:06:57,140 --> 01:07:01,700 Invece stiamo dicendo ogni volta che all'interno di qualche cosa di questo div suggerimenti, 1088 01:07:01,700 --> 01:07:04,080 ricordo che è solo il contenitore per l'elenco, 1089 01:07:04,080 --> 01:07:10,150 se qualcosa all'interno di questo div si fa clic e si ha una classe di suggestione, 1090 01:07:10,150 --> 01:07:13,000 Voglio che questo evento al fuoco. 1091 01:07:13,000 --> 01:07:17,490 Fondamentalmente ciò che questo significa che possiamo fare è che possiamo riutilizzare questo stesso gestore di eventi 1092 01:07:17,490 --> 01:07:20,000 per tutte le cose nella lista. 1093 01:07:20,000 --> 01:07:22,080 Quindi non c'è bisogno di avere un gestore di eventi per il primo elemento 1094 01:07:22,080 --> 01:07:24,550 e un evento differente per il secondo elemento. 1095 01:07:24,550 --> 01:07:29,880 Possiamo invece dire: "Io voglio il gestore stesso evento da applicare a tutto ciò che nella mia lista." 1096 01:07:29,880 --> 01:07:34,420 Ma abbiamo bisogno di sapere in qualche modo quale elemento è stato fatto clic. 1097 01:07:34,420 --> 01:07:38,450 Questo "questa" parola chiave rappresenta proprio questo. 1098 01:07:38,450 --> 01:07:42,360 Questo è l'oggetto che è stato appena selezionato dall'utente. 1099 01:07:42,360 --> 01:07:47,680 Se ho appena cliccato il link 3 °, questo rappresenta un elemento di questo legame 3 °, 1100 01:07:47,680 --> 01:07:51,670 il che significa che posso ottenere il suo attributo, data-simbolo, 1101 01:07:51,670 --> 01:07:57,760 che sappiamo deve contenere il simbolo che è associato con l'azienda ho appena cliccato. 1102 01:07:57,760 --> 01:08:04,550 Se salto indietro alla nostra pagina di finanza, 1103 01:08:04,550 --> 01:08:08,580 possiamo vedere ora che una volta che inizi a scrivere qualcosa di simile msft, 1104 01:08:08,580 --> 01:08:11,220 non siamo più ottenere solo i simboli delle azioni, 1105 01:08:11,220 --> 01:08:13,720 ora stiamo ricevendo le aziende reali. 1106 01:08:13,720 --> 01:08:20,410 Ma quando si fa clic su una di queste società, 1107 01:08:20,410 --> 01:08:25,180 possiamo vedere che stiamo in realtà non popolano la casella di testo con il nome della società 1108 01:08:25,180 --> 01:08:29,850 ma con ciò che è stato memorizzato all'interno di questi attributi di dati. 1109 01:08:29,850 --> 01:08:32,880 E quindi se io in realtà controllare uno di questi elementi di diritto clic su di esso 1110 01:08:32,880 --> 01:08:36,200 e facendo clic su Inspect Element, possiamo vedere come si presenta. 1111 01:08:36,200 --> 01:08:40,290 >> Ricordate che questo è qualcosa che abbiamo creato all'interno di quel ciclo for 1112 01:08:40,290 --> 01:08:42,649 quando stavamo costruendo quella stringa di codice HTML. 1113 01:08:42,649 --> 01:08:47,870 Possiamo vedere che questi dati-simbolo ha il valore di MSFT, che è grande. 1114 01:08:47,870 --> 01:08:49,189 Questo è quello che ci aspettavamo. 1115 01:08:49,189 --> 01:08:53,170 Questo è il simbolo ed è così che abbiamo ottenuto il valore che abbiamo bisogno di usare 1116 01:08:53,170 --> 01:08:56,140 all'interno di questa casella di testo. 1117 01:08:56,140 --> 01:08:58,850 Questo è sufficiente per il form preventivo perche 'e' un po 'noioso. 1118 01:08:58,850 --> 01:09:02,990 Diciamo solo fare alcuni miglioramenti rapidi per la nostra pagina portafoglio. 1119 01:09:02,990 --> 01:09:08,109 Se avete usato CS50 Finanza per un po 'e di iniziare a comprare e vendere un sacco di titoli, 1120 01:09:08,109 --> 01:09:11,300 alla fine questa tabella sta per arrivare abbastanza grande, 1121 01:09:11,300 --> 01:09:13,850 e si sta andando a voler una quotazione di borsa, naturalmente. 1122 01:09:13,850 --> 01:09:20,350 Una volta che la tabella è davvero grande, potrebbe essere utile per l'utente di provare a cercare su di esso. 1123 01:09:20,350 --> 01:09:23,290 All'interno della casella di ricerca se inizi a scrivere qualcosa di simile a Disney 1124 01:09:23,290 --> 01:09:26,359 e cercando il mio archivio di Topolino, possiamo vedere che la tabella è ora di filtraggio 1125 01:09:26,359 --> 01:09:28,189 in base a quello che ho appena digitato trovi 1126 01:09:28,189 --> 01:09:31,640 Questa funzionalità sembra super complicato, ma è molto, molto facile 1127 01:09:31,640 --> 01:09:33,859 con jQuery e JavaScript. 1128 01:09:33,859 --> 01:09:39,189 Questo file portfolio.php include un file JavaScript denominato portfolio.js. 1129 01:09:39,189 --> 01:09:41,130 Diamo uno sguardo a questo. 1130 01:09:41,130 --> 01:09:44,890 Così html, js, portafoglio. 1131 01:09:44,890 --> 01:09:49,210 Ecco dove stiamo facendo una ricerca sul tavolo. 1132 01:09:49,210 --> 01:09:52,750 La prima cosa che devi fare è associare un gestore eventi a tale casella di testo 1133 01:09:52,750 --> 01:09:55,760 perché sappiamo che vogliamo che la nostra funzione di filtraggio al fuoco 1134 01:09:55,760 --> 01:09:59,800 ogni volta che l'utente preme qualcosa, perché non abbiamo tempo per i pulsanti di ricerca. 1135 01:09:59,800 --> 01:10:03,000 La prima cosa che dobbiamo fare è capire ciò che l'utente sta cercando, 1136 01:10:03,000 --> 01:10:04,780 proprio come abbiamo fatto prima. 1137 01:10:04,780 --> 01:10:11,320 Questa parola chiave si riferisce l'elemento corrente l'utente interagisce con. 1138 01:10:11,320 --> 01:10:14,070 >> Poiché l'utente interagisce con la casella di ricerca, 1139 01:10:14,070 --> 01:10:17,020 $ This rappresenta la casella di ricerca, 1140 01:10:17,020 --> 01:10:21,820 così this.val ci dà ciò che è all'interno della casella di ricerca l'utente sta digitando. 1141 01:10:22,810 --> 01:10:27,320 Così, ora quello che vogliamo fare è che vogliamo per scorrere tutte le righe 1142 01:10:27,320 --> 01:10:29,240 all'interno della nostra tabella. 1143 01:10:29,240 --> 01:10:35,630 Per selezionare tutte le righe della nostra tabella, ho dato quel tavolo un ID del portafoglio tavolo, 1144 01:10:35,630 --> 01:10:39,060 e ciascuna riga è rappresentato da un elemento TR, 1145 01:10:39,060 --> 01:10:42,080 quindi questo selettore sta per tornare da me una matrice grande 1146 01:10:42,080 --> 01:10:44,370 di tutte le righe della mia tabella. 1147 01:10:44,370 --> 01:10:47,010 Ora voglio scorrere tale matrice. 1148 01:10:47,010 --> 01:10:52,390 Potrei un ciclo for, ma jQuery fornisce in realtà noi la bella funzione chiamata "ogni". 1149 01:10:52,390 --> 01:10:55,220 Ciò che ciascuno non fa altro che ognuno prende un argomento, 1150 01:10:55,220 --> 01:10:57,090 e che l'argomento è una funzione. 1151 01:10:57,090 --> 01:11:02,760 Che cosa sta andando a fare è che sta per applicare la funzione di ogni elemento all'interno di questa lista. 1152 01:11:02,760 --> 01:11:05,550 Questa funzione accetta un argomento che è e, 1153 01:11:05,550 --> 01:11:10,090 e quando questa funzione viene eseguita, e questo sta per essere sostituita con la prima riga, 1154 01:11:10,090 --> 01:11:12,070 poi la seconda fila, e poi la terza fila. 1155 01:11:12,070 --> 01:11:15,150 In questo modo, questa è la stessa cosa che l'esecuzione di un ciclo for 1156 01:11:15,150 --> 01:11:21,360 e poi cercare di capire l'elemento corrente in base all'interno dell'indice del ciclo for. 1157 01:11:21,360 --> 01:11:24,750 Ad ogni iterazione, per ciascuno di questi elementi nella tabella, 1158 01:11:24,750 --> 01:11:30,560 Voglio controllare se il testo dell'elemento - il testo della cella all'interno della riga - 1159 01:11:30,560 --> 01:11:33,130 corrisponde a quello che sto cercando. 1160 01:11:33,130 --> 01:11:36,390 Questa stringa gran lunga serie di comandi è come avrei potuto farlo. 1161 01:11:36,390 --> 01:11:40,900 In primo luogo, ancora una volta, questo si riferisce ora - perché è all'interno di una nuova funzione - 1162 01:11:40,900 --> 01:11:45,020 questo è ora la riga corrente nella tabella. 1163 01:11:45,020 --> 01:11:47,340 Voglio prendere la riga corrente nella tabella, 1164 01:11:47,340 --> 01:11:49,950 e voglio avere tutti i suoi figli. 1165 01:11:49,950 --> 01:11:51,940 Ricordate, il DOM è un albero gerarchico, 1166 01:11:51,940 --> 01:11:54,200 il che significa che gli elementi hanno un numero di figli. 1167 01:11:54,200 --> 01:12:00,180 >> Questa. Funzione bambini sta per tornare indietro me una matrice di tutti gli elementi 1168 01:12:00,180 --> 01:12:03,240 che sono figli di, in questo caso, una riga nella tabella. 1169 01:12:03,240 --> 01:12:07,150 Questo è semplicemente le cellule all'interno della riga. 1170 01:12:07,150 --> 01:12:09,230 Voglio solo cercare su prima cella. 1171 01:12:09,230 --> 01:12:13,090 Questo. Prima funzione dice dammi il primo elemento di tale array. 1172 01:12:13,090 --> 01:12:17,070 Quindi la funzione testo dice farmi esattamente cosa c'è dentro di quella cella 1173 01:12:17,070 --> 01:12:19,530 perché voglio cercare su quel testo. 1174 01:12:19,530 --> 01:12:21,040 Infine, cerchiamo di convertirlo in minuscolo, 1175 01:12:21,040 --> 01:12:23,940 in modo da poter fare le query case insensitive testo. 1176 01:12:23,940 --> 01:12:29,990 Infine, vogliamo vedere se la stringa all'interno di una tabella contiene la stringa che stiamo cercando. 1177 01:12:29,990 --> 01:12:32,980 La funzione in JavaScript indexOf fa proprio questo. 1178 01:12:32,980 --> 01:12:37,060 Ci dice se questa stringa contiene un'altra stringa. 1179 01:12:37,060 --> 01:12:40,150 Se è vero che la cella contiene quello che sto cercando, 1180 01:12:40,150 --> 01:12:42,140 allora voglio fare in modo che sia mostrato. 1181 01:12:42,140 --> 01:12:45,330 Il metodo spettacolo dirà: "Mostra l'elemento." 1182 01:12:45,330 --> 01:12:50,350 Se questo non è il caso, allora significa che tutto ciò che sto cercando non è contenuto 1183 01:12:50,350 --> 01:12:53,550 all'interno di tale riga e quindi voglio nascondere è da parte dell'utente. 1184 01:12:53,550 --> 01:12:59,240 Che ottiene che bel effetto di filtraggio dove non si vede l'intera tabella. 1185 01:12:59,240 --> 01:13:01,480 Se siete interessati a come fare questo ticker pure, 1186 01:13:01,480 --> 01:13:04,180 postiamo la fonte in linea. Ma è molto semplice. 1187 01:13:04,180 --> 01:13:09,860 JQuery ha metodi impressionante per queste animazioni e manipolare le proprietà CSS. 1188 01:13:09,860 --> 01:13:11,020 Quindi, questo è tutto per me. 1189 01:13:11,020 --> 01:13:15,560 >> Cosa c'è poi avanti? Come si vedrà in pochi giorni, la proposta finale dei progetti è dovuta. 1190 01:13:15,560 --> 01:13:17,730 La proposta finale progetti vi chiederà alcune domande, 1191 01:13:17,730 --> 01:13:19,420 ma tra loro saranno tre tappe - 1192 01:13:19,420 --> 01:13:22,840 uno un pietra miliare "buono", una pietra miliare migliore, e uno un best. 1193 01:13:22,840 --> 01:13:25,870 L'idea è davvero aiutare voi impostare le vostre aspettative 1194 01:13:25,870 --> 01:13:29,160 in modo che minimamente sarai felice con l'uscita del progetto finale 1195 01:13:29,160 --> 01:13:32,060 e sarà "buono" per quanto vi riguarda. 1196 01:13:32,060 --> 01:13:34,540 Ma poi nell'interesse di ottenere di raggiungere solo un po 'a qualcosa di meglio 1197 01:13:34,540 --> 01:13:37,680 o meglio qualcosa, faremo anche ordinare di spingerti verso quello. 1198 01:13:37,680 --> 01:13:40,660 Il CS50 Hack-a-thon, nel frattempo, è in poche settimane. 1199 01:13:40,660 --> 01:13:44,340 In genere, lo facciamo su base base lotteria a causa di interessi, 1200 01:13:44,340 --> 01:13:47,680 ma le probabilità sono prenderemo qualche centinaio di noi in bus navetta da Harvard Square 1201 01:13:47,680 --> 01:13:51,540 fino a Kendall Square, dove Microsoft ha una bellissima struttura giustamente chiamato "NERD" - 1202 01:13:51,540 --> 01:13:53,830 Research New England e Development Center. 1203 01:13:53,830 --> 01:13:56,380 Ci arriveremo intorno alle 8 Avremo un po 'di cibo. 1204 01:13:56,380 --> 01:13:58,160 Intorno 01:00 avremo ancora un po 'il cibo. 1205 01:13:58,160 --> 01:14:02,150 Intorno alle 5 se siete ancora svegli ci dirigeremo verso IHOP o portarvi indietro al campus. 1206 01:14:02,150 --> 01:14:04,380 L'obiettivo non è quello di immergersi in progetti finali 1207 01:14:04,380 --> 01:14:06,190 a fianco di compagni di classe e personale. 1208 01:14:06,190 --> 01:14:08,280 Poi, pochi giorni dopo è la Fiera CS50, 1209 01:14:08,280 --> 01:14:10,990 che è destinata ad essere una opportunità per voi per mostrare il vostro lavoro 1210 01:14:10,990 --> 01:14:12,700 e realizzazioni per il semestre 1211 01:14:12,700 --> 01:14:15,610 mentre fianco a fianco con l'altro e ottenere un senso di ciò che ognuno ha fatto. 1212 01:14:15,610 --> 01:14:17,850 Detto questo, molte grazie a Tommy ea Giuseppe, 1213 01:14:17,850 --> 01:14:19,960 e ci vedremo il Lunedi. 1214 01:14:19,960 --> 01:14:24,070  [Applausi]