1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Semaine 9, suite]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Université de Harvard]

3
00:00:05,160 --> 00:00:07,020
[C'est CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> C'est CS50. C'est la fin de la semaine 9. Je vous remercie beaucoup.

5
00:00:13,340 --> 00:00:15,310
Enfin. Semaine 9. Je l'ai eu.

6
00:00:15,310 --> 00:00:18,590
Aujourd'hui, nous continuons notre conversation à propos de la programmation web

7
00:00:18,590 --> 00:00:21,660
avec un oeil vers le projet final, non pas parce que vous avez à faire quelque chose sur le Web

8
00:00:21,660 --> 00:00:25,610
pour les projets finaux, mais parce que ce soit pour des projets finaux ou après CS50

9
00:00:25,610 --> 00:00:29,000
c'est certainement la direction dans laquelle logiciel moderne qui se passe.

10
00:00:29,000 --> 00:00:31,770
Et pourtant, ce n'est pas vraiment une chose facile.

11
00:00:31,770 --> 00:00:35,040
En fait, l'une des choses les plus difficiles à faire, c'est l'aspect de la conception.

12
00:00:35,040 --> 00:00:38,600
>> Par exemple, de par leur conception, nous entendons effectivement faire l'interface utilisateur

13
00:00:38,600 --> 00:00:40,420
ou l'expérience de l'utilisateur à droite.

14
00:00:40,420 --> 00:00:43,200
J'ose dire - et nous savons à partir d'un ensemble de problèmes récents

15
00:00:43,200 --> 00:00:45,960
quand quelques-uns d'entre vous diffusé vos reproches à propos d'un morceau de logiciel

16
00:00:45,960 --> 00:00:49,000
ou matériel que vous exaspère, que ce soit sur le campus ou hors -

17
00:00:49,000 --> 00:00:51,930
il ya beaucoup de sites là-bas, il ya beaucoup de matériel là-bas,

18
00:00:51,930 --> 00:00:53,900
ce genre de suce.

19
00:00:53,900 --> 00:00:58,730
Mais la réalité est que les choses qui sont faciles à utiliser mais n'en sont pas moins puissante

20
00:00:58,730 --> 00:01:00,550
C'est un défi très difficile.

21
00:01:00,550 --> 00:01:03,680
Donc, pour aujourd'hui, je demande à Joseph et Tommy se joindre à moi ici

22
00:01:03,680 --> 00:01:06,680
afin que nous puissions avoir une conversation, à la fois sur la conception

23
00:01:06,680 --> 00:01:09,090
et quels types de processus de pensée doit commencer à passer par la tête

24
00:01:09,090 --> 00:01:12,040
lorsque vous concevez vos projets finaux, vos projets futurs.

25
00:01:12,040 --> 00:01:15,040
Et puis, avec l'aide de Tommy nous allons examiner quelques-uns des détails d'implémentation.

26
00:01:15,040 --> 00:01:18,440
Comment pouvez-vous avoir une vision sur le papier ou dans votre tête

27
00:01:18,440 --> 00:01:20,760
que vous pouvez ensuite exécuter par programmation

28
00:01:20,760 --> 00:01:24,030
en utilisant certaines des technologies et des techniques que nous avons juste commencé à parler,

29
00:01:24,030 --> 00:01:29,080
JavaScript et savoir quelque chose d'encore plus récente, à savoir AJAX, JavaScript asynchrone.

30
00:01:29,080 --> 00:01:32,950
Cela vous permet de créer toute la dynamique de plus d'une interface utilisateur

31
00:01:32,950 --> 00:01:35,780
par extraction de données de plus en plus progressivement à partir d'un serveur.

32
00:01:35,780 --> 00:01:38,560
Nous allons donc voir certains de ces extraits ainsi aujourd'hui.

33
00:01:38,560 --> 00:01:41,800
Soit dit en passant, si vous êtes intéressé à se concentrer en informatique

34
00:01:41,800 --> 00:01:45,010
ou une mineure en informatique, sachez que ce vendredi à midi

35
00:01:45,010 --> 00:01:48,750
dans Maxwell Dworkin 221, il y aura un événement à pizza

36
00:01:48,750 --> 00:01:50,780
où vous pourrez en apprendre un peu plus sur l'informatique.

37
00:01:50,780 --> 00:01:54,860
Sur votre chemin par la porte, aujourd'hui, vous serez en mesure de prendre un guide non officiel CS à Harvard.

38
00:01:54,860 --> 00:01:57,290
Nous allons le mettre sur les poubelles extérieures à hauteur de taille

39
00:01:57,290 --> 00:01:59,750
de sorte que si vous voulez saisir cela et en apprendre un peu plus sur CS,

40
00:01:59,750 --> 00:02:02,480
qui sera là pour vous comme il était dans la semaine 0.

41
00:02:02,480 --> 00:02:06,500
Aussi, si vous souhaitez vous joindre à nous pour CS50 déjeuner ce vendredi à 13 heures 15,

42
00:02:06,500 --> 00:02:09,800
diriger vers cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Sans plus tarder, je vous donne l'enseignement compatriote Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Salut. [Applaudissements]

45
00:02:19,190 --> 00:02:20,770
Merci.

46
00:02:20,770 --> 00:02:24,780
La première fois que j'ai appris sur la conception était dans une classe appelée ici CS179.

47
00:02:24,780 --> 00:02:28,040
>> Le professeur à l'époque nous a raconté l'histoire d'un autre professeur

48
00:02:28,040 --> 00:02:31,640
qui était allé à l'hôtel et utiliser les robinets.

49
00:02:31,640 --> 00:02:35,630
Quelqu'un peut-il me dire ce que les 2 boutons sur la gauche et la droite faire?

50
00:02:35,630 --> 00:02:39,080
[Étudiant] à chaud et à froid. >> Chaude et froide. Bon.

51
00:02:39,080 --> 00:02:41,430
Qu'est-ce que vous attendez normalement, non?

52
00:02:41,430 --> 00:02:46,960
Ce professeur après avoir utilisé le robinet veut prendre une douche, et il procède à l'utiliser.

53
00:02:46,960 --> 00:02:51,310
Il pense que la gauche et la droite sont pour chaud et froid, non?

54
00:02:51,310 --> 00:02:55,470
Mais quelqu'un peut-il me dire ce que ceux-ci font réellement?

55
00:02:55,470 --> 00:02:58,060
Toutes les mains?

56
00:02:58,060 --> 00:03:01,740
[Réponse de l'élève inaudible] >> Une suggestion est?

57
00:03:01,740 --> 00:03:05,860
[Réponse de l'élève inaudible] Température >>?

58
00:03:05,860 --> 00:03:10,460
Alors l'un d'eux contrôle la température et les autres contrôles? >> [L'élève] de pression d'eau.

59
00:03:10,460 --> 00:03:12,350
La pression d'eau. Bon.

60
00:03:12,350 --> 00:03:15,100
Ce professeur entre dans cela et en pensant qu'ils contrôlent chaude et froide,

61
00:03:15,100 --> 00:03:21,470
s'avère la bonne, qu'il pense être à chaud, tout le chemin jusqu'à

62
00:03:21,470 --> 00:03:23,560
parce qu'il veut prendre une douche chaude.

63
00:03:23,560 --> 00:03:28,100
Eh bien, ceux-ci ne correspondent pas vraiment, donc il obtient cette expérience n'est pas très amusant

64
00:03:28,100 --> 00:03:31,110
d'être dans une douche froide, et nous savons tous ce que cela ressemble.

65
00:03:31,110 --> 00:03:33,620
Ceci est un exemple d'un défaut de conception.

66
00:03:33,620 --> 00:03:37,040
Ce que je veux dire par là, c'est son attente du robinet

67
00:03:37,040 --> 00:03:39,420
ne correspond pas à ce qui est sorti de la douche,

68
00:03:39,420 --> 00:03:41,780
ce qui est assez malheureux pour lui.

69
00:03:41,780 --> 00:03:44,990
Il s'agit donc d'un exemple d'un défaut de conception qui se passe dans la vraie vie.

70
00:03:44,990 --> 00:03:48,020
Mais nous voyons toutes sortes de celles d'autres aussi.

71
00:03:48,020 --> 00:03:50,390
Nous ne sommes probablement pas les fans de la MBTA système.

72
00:03:50,390 --> 00:03:55,560
Il s'agit d'un système de métro en fait à Londres, qui dit: "Ce bouton n'est pas en cours d'utilisation."

73
00:03:55,560 --> 00:04:00,220
Pourquoi est-il encore là? Pourquoi avons-nous en soucier?

74
00:04:00,220 --> 00:04:02,810
Lorsque j'étais enfant, étant celui technophiles dans la maison,

75
00:04:02,810 --> 00:04:05,050
chaque fois que l'ordinateur tombait en panne, ma mère venait me,

76
00:04:05,050 --> 00:04:07,060
me montrer cet écran et de me demander ce qui s'est passé.

77
00:04:07,060 --> 00:04:09,210
>> Même moi, je ne sais pas ce que cela signifie.

78
00:04:11,890 --> 00:04:14,700
[Rires] Quoi?

79
00:04:16,950 --> 00:04:18,019
[Rires]

80
00:04:18,720 --> 00:04:23,050
Parfois, nous nous sentons comme les développeurs de logiciels sont à la traîne juste nous.

81
00:04:23,050 --> 00:04:28,460
En tant qu'utilisateurs, nous sommes comme, «Qu'est-ce qui se passe? Quelqu'un nous le dire."

82
00:04:28,460 --> 00:04:32,140
Tout cela se résume à une question de conception.

83
00:04:32,140 --> 00:04:34,650
Conception, comme nous pouvons le voir, n'est pas purement sur l'esthétique,

84
00:04:34,650 --> 00:04:37,230
il ne s'agit pas de l'apparence des choses.

85
00:04:37,230 --> 00:04:41,720
Nous voyons ici que ce petit pop-up ici ressemble en fait assez agréable.

86
00:04:41,720 --> 00:04:45,290
Il comporte une ombre portée en arrière-plan, il a rayons frontaliers en cours.

87
00:04:45,290 --> 00:04:47,550
C'est une sorte de joli.

88
00:04:47,550 --> 00:04:51,480
Ce n'est pas vraiment bien conçu car il n'est pas très convivial.

89
00:04:51,480 --> 00:04:54,920
Ce petit pop-up qui apparaît ne pas vraiment me donner des informations

90
00:04:54,920 --> 00:04:58,450
à propos de ce qui se passe, il ne m'a pas dit quoi que ce soit tant que l'utilisateur

91
00:04:58,450 --> 00:05:01,400
sur la façon de récupérer de cette erreur.

92
00:05:01,400 --> 00:05:05,190
Nous voulons penser à des choses que le design n'est pas.

93
00:05:05,190 --> 00:05:06,670
Tout d'abord, ce n'est pas l'esthétique.

94
00:05:06,670 --> 00:05:10,800
Il n'est également pas la farce de votre application avec des tonnes de fonctionnalités inutiles.

95
00:05:10,800 --> 00:05:14,890
Si vous êtes un restaurant thaï, vous n'avez probablement pas envie d'être un dentiste en même temps.

96
00:05:14,890 --> 00:05:17,720
Et avec Facebook Questions, non pas que beaucoup de gens l'utilise

97
00:05:17,720 --> 00:05:21,130
et ce n'était pas vraiment au cœur de ce qu'ils construisaient.

98
00:05:21,130 --> 00:05:24,200
Et donc c'est agréable de penser non pas tant la quantité des choses

99
00:05:24,200 --> 00:05:26,390
que vous mettez à votre demande, mais la qualité

100
00:05:26,390 --> 00:05:28,910
et comment vous faites l'expérience utilisateur de mieux

101
00:05:28,910 --> 00:05:32,540
par améliorer réellement sur ce que vous avez déjà.

102
00:05:32,540 --> 00:05:37,040
>> En un mot, la conception nous dit ce que nous devons construire.

103
00:05:37,040 --> 00:05:41,950
Par exemple, si nous construisons quelque chose qui nous rechercher les choses,

104
00:05:41,950 --> 00:05:45,970
comme Google, par exemple, doit-on faire les choses d'une manière

105
00:05:45,970 --> 00:05:48,950
qui demande à l'utilisateur de prendre beaucoup de clics pour obtenir ce qu'ils veulent,

106
00:05:48,950 --> 00:05:52,580
ou devrions-nous le faire en quelque sorte, par exemple, avec Google instantanée ou semi-automatique

107
00:05:52,580 --> 00:05:54,970
qui nous permet de rendre à nos résultats plus rapidement?

108
00:05:54,970 --> 00:05:58,740
Ingénierie implique, comme Tommy va vous montrer, en fait c'est la construction.

109
00:05:58,740 --> 00:06:01,890
Il ya beaucoup de types de conception.

110
00:06:01,890 --> 00:06:06,070
Par exemple, si vous construisez quelque chose à déployer quelque chose

111
00:06:06,070 --> 00:06:09,770
dans un pays du Tiers-Monde où il n'y a pas beaucoup d'électricité ou bien que la technologie,

112
00:06:09,770 --> 00:06:11,440
vous devez concevoir ce que vous construisez

113
00:06:11,440 --> 00:06:14,210
d'une manière qui donne facilement accès aux gens là-bas.

114
00:06:14,210 --> 00:06:18,290
Mais quelles sortes d'autres décisions de conception pourrait-il y avoir

115
00:06:18,290 --> 00:06:21,850
ou peut-être impliqué dans quelque chose comme ça?

116
00:06:23,690 --> 00:06:25,660
Ouais. Je vois une main.

117
00:06:25,660 --> 00:06:37,200
[Réponse de l'élève inaudible] droit >>. Exactement. L'accessibilité est une chose.

118
00:06:37,200 --> 00:06:40,870
Beaucoup de gens ne pensent pas: «Que mes utilisateurs?"

119
00:06:40,870 --> 00:06:43,160
comme les extrémités de chaque spectre.

120
00:06:43,160 --> 00:06:47,770
J'ai des utilisateurs qui pourraient avoir handicapées que je ne pense pas à

121
00:06:47,770 --> 00:06:50,590
et je ne fais que penser à propos de la conception pour l'utilisateur général.

122
00:06:50,590 --> 00:06:52,630
L'Internet est accessible par tout le monde de nos jours,

123
00:06:52,630 --> 00:06:54,870
et je serais la conception de ces gens ainsi.

124
00:06:54,870 --> 00:06:58,620
Quelles sortes de décisions de conception d'autres pourraient vous faire?

125
00:06:58,620 --> 00:07:00,690
Oui. >> [L'élève] Coût.

126
00:07:00,690 --> 00:07:02,680
Coût. Très bon.

127
00:07:02,680 --> 00:07:08,060
Une autre chose que nous pourrions fonder nos décisions de conception sont le coût.

128
00:07:08,060 --> 00:07:13,130
Si nous sommes une entreprise, vous voulez construire quelque chose qui ne prend pas beaucoup de coûts pour produire

129
00:07:13,130 --> 00:07:17,720
mais il peut vendre à un coût particulièrement élevé ou peut nous quelque profit.

130
00:07:17,720 --> 00:07:21,540
>> Ce sont tous les différents types de conception, mais quand nous construisons quelque chose sur Internet

131
00:07:21,540 --> 00:07:25,120
ou lorsque nous construisons quelque chose qui n'a probablement pas coûté grand chose à mettre en place maintenant,

132
00:07:25,120 --> 00:07:28,630
comme des applications Internet - vous n'avez pas à jeter beaucoup de capitaux dans l'

133
00:07:28,630 --> 00:07:30,900
dans le but de faire quelque chose qui fonctionne réellement -

134
00:07:30,900 --> 00:07:33,490
ce que nous sommes plus préoccupés par l'expérience de l'utilisateur.

135
00:07:33,490 --> 00:07:36,390
Nous appelons cette conception centrée utilisateur.

136
00:07:36,390 --> 00:07:41,550
Essentiellement, ce que la conception centrée utilisateur est implique vous mettre dans la peau de vos utilisateurs.

137
00:07:41,550 --> 00:07:44,870
Si quelqu'un s'inscrit pour ce que je vais construire,

138
00:07:44,870 --> 00:07:48,250
ils ont évidemment venir à mon application particulière avec un objectif en tête,

139
00:07:48,250 --> 00:07:50,280
à une tâche qu'ils veulent accomplir.

140
00:07:50,280 --> 00:07:53,650
Et votre travail n'est pas seulement de les aider à remplir cette tâche

141
00:07:53,650 --> 00:07:57,930
mais pour les aider à compléter cette tâche d'une manière qui est efficace, intuitif,

142
00:07:57,930 --> 00:08:01,900
et, comme une personne dit là-bas, accessible.

143
00:08:01,900 --> 00:08:03,750
Qu'est-ce que l'efficacité dire?

144
00:08:03,750 --> 00:08:08,050
L'efficience signifie la rapidité avec laquelle mon utilisateur ne terminer la tâche compte tenu de mon interface.

145
00:08:08,050 --> 00:08:11,650
Faut-il beaucoup de clics pour eux d'aller d'un endroit à l'autre?

146
00:08:11,650 --> 00:08:14,630
Est-il ennuyeux? Est-ce qu'ils ont à effectuer de nombreuses tâches répétitives?

147
00:08:14,630 --> 00:08:17,140
Nous voulons rendre ce processus aussi efficace que possible

148
00:08:17,140 --> 00:08:20,070
de sorte qu'ils n'ont pas besoin de faire ce genre de choses.

149
00:08:20,070 --> 00:08:24,230
En ce qui concerne l'intuitivité, qui est, par exemple, si un utilisateur regarde mon interface,

150
00:08:24,230 --> 00:08:27,240
il est facile pour eux d'obtenir de place en place?

151
00:08:27,240 --> 00:08:30,390
Est-il facile pour eux de comprendre ce qu'ils doivent cliquer dans mon interface

152
00:08:30,390 --> 00:08:33,770
dans le but pour eux d'atteindre l'objectif ou de la tâche qu'ils veulent atteindre?

153
00:08:33,770 --> 00:08:37,520
>> Et enfin, comme l'a dit là-bas, l'accessibilité est très important.

154
00:08:37,520 --> 00:08:39,640
[Locuteur masculin] Il s'agit de l'accessibilité pour des choses comme la vision,

155
00:08:39,640 --> 00:08:42,740
comme comment puis-je réellement concevoir quelque chose pour quelqu'un qui est aveugle?

156
00:08:42,740 --> 00:08:46,460
Oh. Pour les personnes qui ne voient pas du tout, nous avons ce qu'on appelle les lecteurs d'écran.

157
00:08:46,460 --> 00:08:49,070
Ce que vous devez faire est vous devez construire votre site web d'une manière

158
00:08:49,070 --> 00:08:52,020
que, par exemple, des technologies particulières que nous appelons -

159
00:08:52,020 --> 00:08:53,590
Il ya beaucoup de choses maintenant.

160
00:08:53,590 --> 00:08:55,660
Je pense qu'il ya des lecteurs d'écran JAWS appelés.

161
00:08:55,660 --> 00:08:58,410
Beaucoup de ces choses reposent sur ce que nous appelons règles région

162
00:08:58,410 --> 00:09:02,010
pour lire à l'utilisateur ce qui est présent sur la page.

163
00:09:02,010 --> 00:09:05,480
Pour ceux qui ne peuvent pas voir, vous devez vous assurer que ces lecteurs d'écran

164
00:09:05,480 --> 00:09:09,130
peut effectivement récupérer le contenu de la page et peut réellement montrer à vos utilisateurs,

165
00:09:09,130 --> 00:09:13,630
si vous ne pouvez pas voir, au moins vous pouvez toujours comprendre le contenu sur la page.

166
00:09:13,630 --> 00:09:16,190
Ouais. D'accord.

167
00:09:16,190 --> 00:09:23,410
Assez parlé de la bonne conception. Parlons un peu de mauvaise conception.

168
00:09:23,410 --> 00:09:25,220
Ce sont des choses que vous ne devriez pas faire.

169
00:09:25,220 --> 00:09:27,890
Quelqu'un peut-il me parler de leurs expériences avec Craigslist

170
00:09:27,890 --> 00:09:32,190
et ce qu'ils pensent n'est pas si grand sujet de cette conception?

171
00:09:33,690 --> 00:09:36,430
Oui. >> [L'élève] Je pense qu'il ya trop de mots dans un domaine.

172
00:09:36,430 --> 00:09:39,350
Trop de mots, non? Complètement écrasante.

173
00:09:39,350 --> 00:09:42,400
Vous arrivez à cette page et vous êtes accueilli avec un tas de choses ici

174
00:09:42,400 --> 00:09:43,860
qui pourraient même pas d'importance pour vous.

175
00:09:43,860 --> 00:09:47,010
Par exemple, vous vivez dans un état qui ne commence pas par cette lettre.

176
00:09:47,010 --> 00:09:48,690
Disons que vous vivez au Texas ou quelque chose.

177
00:09:48,690 --> 00:09:53,790
>> Vous devez faire défiler tout le chemin en bas de la page pour arriver à l'endroit où vous êtes.

178
00:09:53,790 --> 00:10:00,320
Je suis de Boston, alors laissez-moi regarder dans le Massachusetts. Où se trouve le Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, c'est juste ici. Oh, c'est Boston. D'accord.

180
00:10:03,270 --> 00:10:09,070
Regardons Boston. [Rires]

181
00:10:09,070 --> 00:10:12,250
Assez écrasante, non?

182
00:10:12,250 --> 00:10:16,400
Awkward choses là-bas. [Rires]

183
00:10:17,320 --> 00:10:19,470
Disons que je suis à la recherche d'un endroit pour vivre.

184
00:10:19,470 --> 00:10:24,130
Combien de personnes ont effectivement utilisé Craigslist? Des tonnes de vous.

185
00:10:24,130 --> 00:10:30,960
Il ya plusieurs façons assez mauvais à regarder, mais penchons-nous sur ce sujet.

186
00:10:35,130 --> 00:10:38,970
Quelle est la différence entre img et pic? Quelqu'un peut-il me dire?

187
00:10:41,350 --> 00:10:42,830
Il est en fait pas de différence.

188
00:10:42,830 --> 00:10:47,710
Ils veulent dire exactement la même chose, mais ils ont des étiquettes différentes pour eux pour une raison quelconque.

189
00:10:48,980 --> 00:10:53,560
Si je clique sur l'image A, rien ne se passe sur la page.

190
00:10:53,560 --> 00:10:57,490
En fait, je dois cliquer sur Recherche supplémentaire pour que quelque chose arrive.

191
00:10:57,490 --> 00:11:02,430
Ce qui pourrait être une meilleure décision de conception qui pourrait être fait là-bas?

192
00:11:03,820 --> 00:11:08,030
Si je suis en cliquant sur ce filtre, j'ai probablement envie de filtrer par cette action particulière

193
00:11:08,030 --> 00:11:09,970
ou cette catégorie particulière.

194
00:11:09,970 --> 00:11:14,450
Ainsi, au lieu d'avoir à appuyer sur Chercher à nouveau, je pourrais le faire automatiquement le filtrage

195
00:11:14,450 --> 00:11:17,060
sorte de style Google où ils le font instantanément.

196
00:11:17,060 --> 00:11:20,440
[Malan] Mais ne fait que nous avons vus jusqu'à présent doivent être physiquement présenté

197
00:11:20,440 --> 00:11:23,170
en appuyant sur Entrée ou en cliquant sur au moins un bouton?

198
00:11:23,170 --> 00:11:26,830
Comme vous l'avez vus jusqu'à présent, vous avez réellement de cliquer sur Soumettre pour faire ces choses.

199
00:11:26,830 --> 00:11:30,090
>> Mais comme Tommy va vous montrer en une seconde, il ya effectivement des façons pour vous

200
00:11:30,090 --> 00:11:33,010
de sorte que lorsque vous cliquez sur cette chose elle peut automatiquement envoyer

201
00:11:33,010 --> 00:11:38,840
ce que nous appelons une requête AJAX et récupérer des données et filtrer vos résultats instantanément.

202
00:11:38,840 --> 00:11:41,340
Il ya des tonnes de choses qui clochent dans cette interface.

203
00:11:41,340 --> 00:11:43,530
[Malan] Pouvez-vous rechercher Cambridge?

204
00:11:43,530 --> 00:11:47,030
Il ya quelque chose de légèrement anormal là que vous vous souciez de Cambridge

205
00:11:47,030 --> 00:11:54,790
et pourtant, vous obtenez Westford, Spring Hill, West Newton, etc.

206
00:11:54,790 --> 00:11:57,930
Probablement pas idéal. >> Probablement pas idéal.

207
00:11:57,930 --> 00:12:03,900
Comment pourrais-je être en mesure de faire l'expérience de l'utilisateur de mieux sur cette page en particulier?

208
00:12:03,900 --> 00:12:07,340
Oui. >> [L'élève] Instructions.

209
00:12:07,340 --> 00:12:09,500
D'accord. Les instructions contenues dans ce genre de sentiment?

210
00:12:09,500 --> 00:12:14,630
[L'élève] Par exemple, une chose pour les utilisateurs débutants qui ne savent même pas ce que Craigslist est

211
00:12:14,630 --> 00:12:17,320
ou vous ne savez pas ce que vous êtes censé faire.

212
00:12:17,320 --> 00:12:20,150
Droite. Donc, en expliquant ce que Craigslist est sur cette page est important.

213
00:12:20,150 --> 00:12:23,490
On peut effectivement dire aux utilisateurs ce que cette page est en fait pour.

214
00:12:23,490 --> 00:12:27,090
Si je suis simplement de passage, je vois un tas d'endroits. Je ne sais même pas ce qu'ils veulent dire.

215
00:12:27,090 --> 00:12:29,730
Mais plus important encore, simplement en regardant cette interface,

216
00:12:29,730 --> 00:12:35,530
me souviens que j'avais à faire défiler une tonne de choses à trouver une communauté particulière

217
00:12:35,530 --> 00:12:37,560
que j'ai effectivement pris en charge sur ce sujet.

218
00:12:37,560 --> 00:12:39,820
Ce qui est un moyen plus rapide que je pourrais faire cela? Oui.

219
00:12:39,820 --> 00:12:43,290
[L'élève] Divisez en régions à l'est à l'ouest,. Ok >>.

220
00:12:43,290 --> 00:12:47,460
Je pourrais les diviser en plusieurs catégories qui pourraient m'aider à déterminer plus rapidement

221
00:12:47,460 --> 00:12:49,820
comment se rendre à cet endroit particulier.

222
00:12:49,820 --> 00:12:54,510
[L'élève] Mettre une liste déroulante. Droit >>. D'accord.

223
00:12:54,510 --> 00:12:58,240
Je pourrais utiliser un menu déroulant parce que nous avons un ensemble fixe de choses

224
00:12:58,240 --> 00:13:00,100
et nous avons pu leur montrer dans un menu déroulant.

225
00:13:00,100 --> 00:13:02,240
De cette façon, il ne prend pas tant de place sur l'écran.

226
00:13:02,240 --> 00:13:05,630
Mais encore mieux que cela, que pouvons-nous faire?

227
00:13:05,630 --> 00:13:09,220
Oui. >> [Réponse de l'élève inaudible] >> Pouvez-vous répéter? >> [L'élève] zone de recherche.

228
00:13:09,220 --> 00:13:11,260
Oui, une boîte de recherche. C'est très bien.

229
00:13:11,260 --> 00:13:16,430
Ce que nous pouvons réellement faire est si nous regardons en arrière à la boîte de recherche diapositives,.

230
00:13:16,430 --> 00:13:21,520
Saisie semi-automatique. Moyen très facile de chercher dans les résultats que vous connaissez sont dans un ensemble.

231
00:13:21,520 --> 00:13:25,980
Si je commence à taper BO, juste me montrer tous les résultats qui ont à l'intérieur BO d'entre eux.

232
00:13:25,980 --> 00:13:29,030
De cette façon, je peux très facilement trouver celui particulier, je veux aller à l'

233
00:13:29,030 --> 00:13:32,390
au lieu d'avoir à faire défiler cette liste vraiment grand.

234
00:13:32,390 --> 00:13:37,450
>> Ce sont vraiment toutes sortes de fruits mûrs que quelqu'un qui est mise en œuvre Craigslist

235
00:13:37,450 --> 00:13:42,500
peuvent faire pour rendre l'expérience sur le site beaucoup mieux pour leur utilisateur.

236
00:13:42,500 --> 00:13:46,370
D'accord. Assez parlé à propos de mauvais sites.

237
00:13:46,370 --> 00:13:49,410
Parlons Facebook.

238
00:13:50,880 --> 00:13:54,390
Quand Facebook est sorti, et en particulier les photos sur Facebook,

239
00:13:54,390 --> 00:13:57,870
il y avait beaucoup d'autres services au moment qui pourrait faire exactement les mêmes choses.

240
00:13:57,870 --> 00:14:00,740
Ils pourraient organiser vos photos dans des albums.

241
00:14:00,740 --> 00:14:03,360
Qu'est-ce que vous pourriez faire, c'est que vous pouvez les organiser en ensembles ainsi.

242
00:14:03,360 --> 00:14:06,070
Vous pouvez les organiser par date. Vous pouvez faire toutes ces choses particulières.

243
00:14:06,070 --> 00:14:11,710
Mais personne ne sait ce que fait Facebook des photos exploser au moment de sa sortie?

244
00:14:11,710 --> 00:14:15,080
Oui. >> [Étudiants] Tags. Balises >>. Exactement.

245
00:14:15,080 --> 00:14:21,300
Nous avons Milo ici, qui est notre mascotte chien avec bandana qui CS50.

246
00:14:21,300 --> 00:14:24,810
Vous pouvez voir que nous avons cette fonction de marquage dans le milieu.

247
00:14:24,810 --> 00:14:28,240
Et ce qui fait des photos Facebook si intéressant du point de vue facilité d'utilisation

248
00:14:28,240 --> 00:14:34,130
c'est qu'il fait permis aux gens via ce faire participer leurs amis dans leurs photos.

249
00:14:34,130 --> 00:14:37,680
Pour Facebook, depuis leur site web est particulièrement sociale,

250
00:14:37,680 --> 00:14:40,750
il s'agit de bâtir ce genre de climat social.

251
00:14:40,750 --> 00:14:42,620
Cela a amélioré l'expérience de photos beaucoup plus

252
00:14:42,620 --> 00:14:46,390
parce qu'ils ne pouvaient réellement commencer en disant: «Ce sont des connexions entre les gens,

253
00:14:46,390 --> 00:14:49,220
et ce sont des photos sur les gens que vous avez réellement à cœur. "

254
00:14:49,220 --> 00:14:52,200
Une partie est également narcissisme sorte.

255
00:14:52,200 --> 00:14:54,980
Les gens aiment être étiqueté en photos et des choses comme ça.

256
00:14:54,980 --> 00:14:58,510
Alors que ce n'est pas nécessairement un caractère bien humain,

257
00:14:58,510 --> 00:15:01,910
en même temps, il est basé sur de bonnes décisions de conception

258
00:15:01,910 --> 00:15:04,860
parce que les gens se soucient réellement des choses comme ça.

259
00:15:04,860 --> 00:15:07,190
Donc, c'est les photos Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Mais parlons Facebook manière plus générale.

261
00:15:09,800 --> 00:15:13,400
Je suis sûr que beaucoup de gens ici ont des opinions sur Facebook,

262
00:15:13,400 --> 00:15:16,430
deux décisions de conception et de bonnes décisions mauvaise conception.

263
00:15:16,430 --> 00:15:20,270
Donc, nous allons évacuer ou être heureux.

264
00:15:23,480 --> 00:15:26,450
Allez. Je sais que chacun d'entre vous utilisent Facebook.

265
00:15:26,450 --> 00:15:30,970
Quelqu'un doit avoir quelque chose de mauvais à dire ou quelque chose de bon à dire à ce sujet. Oui.

266
00:15:30,970 --> 00:15:35,060
[L'élève] Dans le flux de nouvelles, il ya beaucoup de choses que je ne se soucient vraiment.

267
00:15:35,060 --> 00:15:37,740
Le fil de nouvelles ne montrer beaucoup de choses que vous pourriez se soucient pas.

268
00:15:37,740 --> 00:15:41,660
Vous avez des amis sur Facebook qui vous n'avez pas rencontrés pendant 2 ou 3 ans

269
00:15:41,660 --> 00:15:43,860
et vous voyez leurs résultats de nouvelles d'apparaître dans votre fil de nouvelles

270
00:15:43,860 --> 00:15:45,870
et vous n'avez pas vraiment s'en soucier.

271
00:15:45,870 --> 00:15:48,700
Facebook a effectivement fait un effort pour améliorer ces informations,

272
00:15:48,700 --> 00:15:53,150
et ils ont vraiment essayé de pousser des résultats pertinents pour le haut du fil de nouvelles que de la fin

273
00:15:53,150 --> 00:15:58,300
si vous voyez les choses par des amis qui sont pertinentes pour vous ou pour vos proches.

274
00:15:58,300 --> 00:16:01,110
Rien d'autre? Oui.

275
00:16:01,110 --> 00:16:06,400
[Réponse de l'élève inaudible] >> Pouvez-vous répéter?

276
00:16:06,400 --> 00:16:10,140
[L'élève] Les petites annonces sont relativement discret. >> Dans quel sens?

277
00:16:10,140 --> 00:16:16,370
[Réponse de l'élève inaudible] Ils n'ont pas de lumière sur l'écran, comme des bannières.

278
00:16:16,370 --> 00:16:17,760
D'accord. C'est bien.

279
00:16:17,760 --> 00:16:25,030
Si vous vous souvenez de l'Internet dans les années 90 - >> [Malan] j'étais là. >> Il était là. [Rires]

280
00:16:25,030 --> 00:16:29,210
Vous vous souvenez peut clignotants milieux GIF, paillettes choses,

281
00:16:29,210 --> 00:16:31,570
Sorte de style GeoCities des choses.

282
00:16:31,570 --> 00:16:34,080
Ce n'est vraiment pas un exemple de bonne conception

283
00:16:34,080 --> 00:16:36,690
parce que c'est vraiment gênant à partir du contenu.

284
00:16:36,690 --> 00:16:39,590
Le site d'art de Yale l'habitude d'avoir des GIF animés comme leur arrière-plan

285
00:16:39,590 --> 00:16:41,800
et vous n'avez pas pu lire quoi que ce soit sur la page,

286
00:16:41,800 --> 00:16:44,870
mais je suppose que quelqu'un fait parlé d'eux et maintenant c'est un peu différent.

287
00:16:44,870 --> 00:16:48,940
[Malan] C'est beaucoup mieux maintenant. >> C'est beaucoup mieux maintenant, comme vous pouvez le voir. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Tout simplement génial, juste - Ouais. D'accord.

289
00:16:56,020 --> 00:17:00,560
>> Une partie est également possible de faire votre page de très minimaliste et très compréhensible

290
00:17:00,560 --> 00:17:05,690
tant de choses sur le flux de la page d'une manière qui est très logique et ne pas obtenir de la manière de l'autre.

291
00:17:05,690 --> 00:17:11,849
Quelles sortes d'autres choses sont bonnes ou mauvaises à propos de Facebook sur Facebook?

292
00:17:11,849 --> 00:17:15,730
Disons simplement avoir une conversation conception ici.

293
00:17:19,470 --> 00:17:21,339
Oh. Où? Ouais.

294
00:17:21,339 --> 00:17:25,640
[L'élève] Le système Timeline nouvelle vous permet de rechercher le profil de la personne au sujet de leur passé.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Chronologie est une bonne chose, car il vous permet de traquer vos amis

297
00:17:30,280 --> 00:17:33,300
quand ils étaient au lycée.

298
00:17:35,160 --> 00:17:38,060
Chronologie est bon parce qu'il vous permet de filtrer le contenu beaucoup plus rapide,

299
00:17:38,060 --> 00:17:41,500
il vous permet de trouver des choses qui, autrement, auraient pris vous un temps très long de trouver

300
00:17:41,500 --> 00:17:45,840
juste défilement vers le haut et vers le bas, haut, haut, haut, haut, haut, comme si on remontait dans le temps.

301
00:17:45,840 --> 00:17:48,910
Mais il ya aussi une sorte de négatif à celle en termes d'expérience utilisateur.

302
00:17:48,910 --> 00:17:51,190
Que pourrait-il être?

303
00:17:51,190 --> 00:17:56,780
Grand mot qui commence par P-R. >> [L'élève] de confidentialité. Protection des renseignements personnels >>, non?

304
00:17:56,780 --> 00:17:59,970
Protection des renseignements personnels est un enjeu énorme expérience utilisateur.

305
00:17:59,970 --> 00:18:07,190
C'est l'une des choses que je déteste le plus dans Facebook maintenant. [Rires]

306
00:18:07,190 --> 00:18:09,000
[Malan] Comme puis-je maintenant.

307
00:18:09,000 --> 00:18:11,380
David ne se rendent pas compte de ce qui s'est réellement passé jusqu'à hier.

308
00:18:11,380 --> 00:18:14,560
Alors maintenant, il sait que chaque fois que je le tchat Je sais qu'il a été m'ignorer.

309
00:18:14,560 --> 00:18:16,880
[Malan] La partie délicate a été fait, j'ai été l'ignorant,

310
00:18:16,880 --> 00:18:21,040
et je ne savais pas qu'il savait que je l'ignorer. [Rires]

311
00:18:21,040 --> 00:18:24,030
La vie privée est un énorme problème.

312
00:18:24,030 --> 00:18:28,670
Quelqu'un peut-il me dire ici ce qui pourrait être mauvais sur Facebook vie privée

313
00:18:28,670 --> 00:18:32,270
outre le fait qu'ils font des choses comme ça?

314
00:18:32,270 --> 00:18:37,240
Quelle est particulièrement difficile à faire à l'égard de la vie privée Facebook?

315
00:18:37,240 --> 00:18:40,340
Ce genre de question est un chef de file.

316
00:18:41,680 --> 00:18:43,930
Oui. >> [L'élève] Cachez vos photos de certaines personnes.

317
00:18:43,930 --> 00:18:46,170
Droite. Exactement, pour cacher vos photos de certaines personnes.

318
00:18:46,170 --> 00:18:51,290
Ils ont ce petit petit bouton en haut à droite qui vous permet de basculer la vie privée d'une photo.

319
00:18:51,290 --> 00:18:56,360
Leurs options de confidentialité sont très variés entre les différentes sortes de menus.

320
00:18:56,360 --> 00:18:59,510
>> Ils ont obtenu beaucoup mieux à ce sujet récemment, mais il l'habitude d'être le cas

321
00:18:59,510 --> 00:19:04,870
que chaque fois que vous vouliez empêcher vos amis de voir des photos de,

322
00:19:04,870 --> 00:19:08,280
vous devez passer par un très complexe en 5 étapes d'être comme,

323
00:19:08,280 --> 00:19:11,150
permettez-moi de cliquer sur ce lien, maintenant laissez-moi cliquez à nouveau, permettez-moi de cliquer à nouveau,

324
00:19:11,150 --> 00:19:13,420
permettez-moi de préciser que les gens ne peuvent pas voir mes photos.

325
00:19:13,420 --> 00:19:17,250
Ce n'est pas particulièrement bon de la part de Facebook

326
00:19:17,250 --> 00:19:20,530
parce qu'une grande partie de l'expérience utilisateur est effectivement en leur donnant la liberté

327
00:19:20,530 --> 00:19:22,460
de contrôler ce que les gens peuvent voir.

328
00:19:22,460 --> 00:19:25,550
Nous appelons ce contrôle utilisateur et de la liberté.

329
00:19:25,550 --> 00:19:31,090
Si vous n'êtes pas laisser les utilisateurs faire d'une manière qui soit efficace et intuitive,

330
00:19:31,090 --> 00:19:34,570
alors votre expérience utilisateur n'est pas vraiment terrible du tout.

331
00:19:34,570 --> 00:19:38,200
 Souhaitez-vous les gars vous dire quelque chose à propos de Facebook?

332
00:19:38,700 --> 00:19:41,420
Comment puis-je désactiver cette fonction?

333
00:19:41,420 --> 00:19:46,290
[Ong] Vous ne pouvez pas désactiver cette fonction, et c'est une faille énorme facilité d'utilisation de la part de Facebook.

334
00:19:46,290 --> 00:19:49,410
Cette fonctionnalité - En fait, j'ai regardé dedans hier -

335
00:19:49,410 --> 00:19:53,940
c'est soit que vous ne pouvez pas le faire ou il est enterré quelque part très, très profond

336
00:19:53,940 --> 00:19:58,050
dans les recoins de Facebook parce que je n'arrive pas à comprendre comment désactiver cette fonctionnalité à tous.

337
00:19:58,050 --> 00:20:00,400
[Malan] Mais parfois, ces décisions ne sont pas évidentes

338
00:20:00,400 --> 00:20:03,890
parce que vous les gars nous ont donné beaucoup d'informations utiles sur les diverses applications CS50

339
00:20:03,890 --> 00:20:05,710
et les sites Web qui utilise le cours.

340
00:20:05,710 --> 00:20:10,260
Nous n'avons pas mis en œuvre l'ensemble de ces demandes et suggestions.

341
00:20:10,260 --> 00:20:14,550
>> Cela est en partie pour obtenir tellement de demandes que c'est une fonction du temps,

342
00:20:14,550 --> 00:20:17,070
mais parfois nous prendre une décision consciente, comme,

343
00:20:17,070 --> 00:20:19,830
"Merci pour la suggestion, mais nous sommes en désaccord."

344
00:20:19,830 --> 00:20:24,350
Alors, comment faites-vous pour décider ce qu'il faut faire si vos utilisateurs que vous devriez faire quelque chose

345
00:20:24,350 --> 00:20:28,110
même si vous n'avez pas nécessairement?

346
00:20:28,110 --> 00:20:32,360
C'est un équilibre délicat entre en train d'écouter ce que vos utilisateurs disent

347
00:20:32,360 --> 00:20:35,840
et effectivement avoir une sorte de ligne où que vous dites,

348
00:20:35,840 --> 00:20:37,750
"Nous n'allons pas faire ce que ces utilisateurs disent."

349
00:20:37,750 --> 00:20:42,520
Et en particulier, je pense qu'il y avait une citation de Henry Ford qui le résume assez bien.

350
00:20:42,520 --> 00:20:47,130
«Si j'avais demandé aux gens ce qu'ils voulaient, ils auraient dit qu'ils voulaient des chevaux plus rapides."

351
00:20:47,130 --> 00:20:51,840
Quelqu'un peut-il trier de démêler ce que cette citation signifie vraiment?

352
00:20:51,840 --> 00:20:56,060
Ce n'est pas seulement que les utilisateurs savent ce qu'ils veulent,

353
00:20:56,060 --> 00:20:59,180
mais il est plus que -

354
00:20:59,180 --> 00:21:02,720
[L'élève] Ils ne savent pas ce qui est possible.

355
00:21:02,720 --> 00:21:06,140
Dans la partie qu'ils ne savent pas ce qui est possible.

356
00:21:07,880 --> 00:21:11,440
Tease qu'à part un peu plus. Que voulez-vous dire par là?

357
00:21:11,440 --> 00:21:21,340
[Réponse de l'élève inaudible]

358
00:21:21,340 --> 00:21:25,770
C'est bien. Ce que je pense que nous essayons de dire ici, c'est que les gens savent ce qu'ils veulent.

359
00:21:25,770 --> 00:21:28,050
Ils veulent des chevaux plus rapides.

360
00:21:28,050 --> 00:21:29,840
Ce qu'ils veulent vraiment, c'est la capacité de se déplacer plus rapidement,

361
00:21:29,840 --> 00:21:32,310
mais ils ne savent pas vraiment le moyen par lequel pour y parvenir.

362
00:21:32,310 --> 00:21:36,330
Lorsque vous arrivez à vos utilisateurs et vos utilisateurs vous dire quelque chose

363
00:21:36,330 --> 00:21:39,700
et ils vous disent: «Nous voulons que ces caractéristiques et ces caractéristiques et de ces fonctionnalités,"

364
00:21:39,700 --> 00:21:42,650
vous ne voulez pas nécessairement penser «Laissez-moi aller de l'avant

365
00:21:42,650 --> 00:21:44,720
»Et mettre en œuvre ce qu'ils disent explicitement,"

366
00:21:44,720 --> 00:21:48,610
mais ce que vous voulez penser est: «Quel genre d'idées que je peux obtenir à partir de là?"

367
00:21:48,610 --> 00:21:50,450
Qu'est-ce qu'ils veulent vraiment?

368
00:21:50,450 --> 00:21:55,560
>> Et à partir de là ce que vous pouvez faire est de concevoir quelque chose qui répond à ces demandes

369
00:21:55,560 --> 00:22:00,340
mais pas nécessairement de la manière que l'utilisateur s'attend à ce qu'il soit satisfait.

370
00:22:00,340 --> 00:22:03,830
Donc, pour quelque chose comme projet final, en termes réels,

371
00:22:03,830 --> 00:22:07,900
ce qui est une heuristique utile quand il s'agit de faire quelque chose de mieux,

372
00:22:07,900 --> 00:22:10,630
surtout si le concepteur a cette arrogance chez lui

373
00:22:10,630 --> 00:22:14,360
lequel vous sorte de savoir ce qui est mieux, vous pourriez prendre l'entrée de vos utilisateurs,

374
00:22:14,360 --> 00:22:16,580
mais comment avez-vous fait prendre pour obtenir que la rétroaction?

375
00:22:16,580 --> 00:22:21,610
Dans les projets définitifs, très concrètement, ce qui produit des résultats optimaux ici?

376
00:22:21,610 --> 00:22:25,030
Ce qui produit des résultats optimaux - et je vais passer dans une seconde -

377
00:22:25,030 --> 00:22:29,190
C'est ce processus de développement, puis de tester et ensuite itérer.

378
00:22:29,190 --> 00:22:32,020
Ce que je veux dire par essai est généralement lorsque vous concevez quelque chose

379
00:22:32,020 --> 00:22:36,970
vous pensez que c'est assez bon, comme: «Je suis un grand designer. Tout le monde va adorer ça."

380
00:22:36,970 --> 00:22:41,600
Et puis, vous l'avez mis là-bas et les gens ne l'aime vraiment pour une raison quelconque.

381
00:22:41,600 --> 00:22:46,820
Qu'est-ce que vous avez à faire est que vous avez à prendre les parties de choses que les gens font comme

382
00:22:46,820 --> 00:22:49,180
et de réorganiser les choses que les gens n'aiment pas.

383
00:22:49,180 --> 00:22:53,080
Cela ressemble à un processus très évident, mais ce processus de constamment itération

384
00:22:53,080 --> 00:22:55,980
au-dessus de ce que vous avez déjà construit est un processus qui vous aide à

385
00:22:55,980 --> 00:22:59,730
non seulement à affiner vos compétences de conception propres, mais vous aide également à affiner la conception

386
00:22:59,730 --> 00:23:03,790
de sorte que les personnes apprécient votre produit encore plus qu'ils ne le faisaient auparavant.

387
00:23:03,790 --> 00:23:07,390
>> Je vais aller sur d'autres exemples concrets de ce que vous pouvez réellement faire.

388
00:23:07,390 --> 00:23:11,390
Comme une sorte de dernier exemple d'un produit, penchons-nous sur KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK quand il est sorti était très, très populaire.

390
00:23:14,970 --> 00:23:18,760
Quelqu'un peut-il deviner pourquoi?

391
00:23:18,760 --> 00:23:20,950
Quelles sont les sortes de choses que vous aimez à ce sujet si vous l'avez utilisé

392
00:23:20,950 --> 00:23:23,990
ou quelles sont les sortes de choses que vous n'aimez pas?

393
00:23:23,990 --> 00:23:31,590
Oui. >> [Réponse de l'élève inaudible] >> OK.

394
00:23:31,590 --> 00:23:34,730
C'est une partie de celui-ci est de laisser à l'utilisateur une requête qui est plus large

395
00:23:34,730 --> 00:23:38,150
à une très restrictif comme: «Vous devez choisir votre date de début

396
00:23:38,150 --> 00:23:39,810
»Et vous devez choisir votre date de fin."

397
00:23:39,810 --> 00:23:44,910
En effet, il vous permet de faire preuve de souplesse à ce sujet et il vous donne tous les vols dans cette gamme.

398
00:23:44,910 --> 00:23:46,730
Rien d'autre?

399
00:23:46,730 --> 00:23:50,530
[L'élève] Ils comprennent les frais dans le prix.

400
00:23:50,530 --> 00:23:53,330
Ils ne comprennent les frais dans le prix.

401
00:23:53,330 --> 00:23:56,720
Les taxes et les choses réellement aller directement dans ce prix dans le coin supérieur gauche

402
00:23:56,720 --> 00:24:00,710
si vous n'êtes pas trompés en pensant que vous êtes en train de payer pour un vol de 240 $

403
00:24:00,710 --> 00:24:03,280
quand c'est vraiment 330 $.

404
00:24:03,280 --> 00:24:06,200
Rien d'autre? Oui.

405
00:24:06,200 --> 00:24:10,140
[Réponse de l'élève inaudible]

406
00:24:10,140 --> 00:24:14,610
Je ne suis pas certain qu'elles vous permettent de le faire.

407
00:24:14,610 --> 00:24:18,310
J'ai peut-être tort.

408
00:24:18,310 --> 00:24:23,360
C'est peut-être une chose intéressante si vous voulez mettre plus de poids sur des filtres particuliers

409
00:24:23,360 --> 00:24:27,000
afin qu'ils poussent les résultats relatifs à ce filtre vers le haut.

410
00:24:27,000 --> 00:24:31,920
Mais quelqu'un peut-il me dire quel est si spécial à propos de cette gauche?

411
00:24:31,920 --> 00:24:39,540
Comment avez-vous toujours chercher un vol sur un service Internet avant?

412
00:24:41,600 --> 00:24:44,650
>> Oui. >> [Réponse de l'élève inaudible] >> Pouvez-vous dire que -

413
00:24:44,650 --> 00:24:47,530
[L'élève] Chaque compagnie aérienne. Ouais >>. Chaque compagnie aérienne possède son propre site.

414
00:24:47,530 --> 00:24:50,110
Cela consolide les choses. Et alors?

415
00:24:50,110 --> 00:24:52,190
[L'élève] Vous savez exactement à quelle heure vous partez.

416
00:24:52,190 --> 00:24:54,460
Vous savez exactement à quelle heure vous partez,

417
00:24:54,460 --> 00:24:59,380
mais associées à des filtres en particulier.

418
00:25:00,710 --> 00:25:03,540
Permettez-moi de tirer vers le haut KAYAK.

419
00:25:11,490 --> 00:25:14,020
Oh mon Dieu, les pop-ups. Mauvaise expérience utilisateur.

420
00:25:14,020 --> 00:25:17,230
Qu'est-ce qui se passe lorsque je déplace ce curseur?

421
00:25:17,230 --> 00:25:21,010
[L'élève] Mises à jour automatiques. >> [Ong] Mises à jour automatiques.

422
00:25:21,010 --> 00:25:23,440
C'est quelque chose qui est très important.

423
00:25:23,440 --> 00:25:25,380
Avant cela, chaque fois que vous voulez chercher un vol,

424
00:25:25,380 --> 00:25:28,410
vous avez eu à mettre dans votre emplacement d'entrée, votre emplacement de sortie, appuyez sur Rechercher,

425
00:25:28,410 --> 00:25:31,190
il va traiter cela et afficher les résultats.

426
00:25:31,190 --> 00:25:34,120
Si vous vouliez changer votre requête, vous devez appuyer à deux reprises,

427
00:25:34,120 --> 00:25:39,770
entrer dans une nouvelle requête à partir de zéro, puis le faire encore et encore.

428
00:25:39,770 --> 00:25:43,910
La bonne chose à propos de quelque chose de ce genre est qu'il utilise une chose très [inintelligible] dans le milieu.

429
00:25:43,910 --> 00:25:46,230
Chaque fois que vous faites quelque chose comme ça, il tire hors d'une demande

430
00:25:46,230 --> 00:25:48,420
et il vous renvoie tous les résultats immédiatement.

431
00:25:48,420 --> 00:25:51,680
Ce type de rétroaction immédiate est quelque chose qui fait KAYAK très populaire

432
00:25:51,680 --> 00:25:55,910
parce que c'est vraiment facile pour moi de simplement changer ma requête

433
00:25:55,910 --> 00:25:58,890
et de comprendre les choses qui sont autour d'une gamme particulière

434
00:25:58,890 --> 00:26:01,950
sans avoir à revenir en arrière et en avant, en arrière, d'avant en arrière.

435
00:26:01,950 --> 00:26:05,200
Donc, ce sont toutes sortes de choses que vous voulez penser lorsque vous concevez votre site Web.

436
00:26:05,200 --> 00:26:08,930
Comment puis-je faire très efficace pour mes utilisateurs à passer par tout ce qu'ils travaillent sur

437
00:26:08,930 --> 00:26:13,010
et pour arriver à leur objectif final le plus rapidement possible?

438
00:26:13,010 --> 00:26:16,430
[Malan] Et au point de Joseph tôt sur les utilisateurs pas nécessairement en sachant ce qu'ils veulent,

439
00:26:16,430 --> 00:26:18,640
basé sur ce que vous les gars savent maintenant sur le langage HTML

440
00:26:18,640 --> 00:26:22,780
et vous avez cases à cocher, boutons radio, menus, sélectionnez les champs de saisie et autres,

441
00:26:22,780 --> 00:26:26,140
comment voulez-vous mettre en œuvre la notion de choisir une heure de début pour un vol?

442
00:26:26,140 --> 00:26:30,030
>> Lequel de ces mécanismes d'interface utilisateur différents utiliseriez-vous?

443
00:26:30,030 --> 00:26:34,100
Si vous venez de connaître la quantité de code HTML qui a été enseigné auparavant

444
00:26:34,100 --> 00:26:39,070
et vous savez que les entrées sont des boutons radio, cases à cocher, listes déroulantes, et la boîte d'entrée,

445
00:26:39,070 --> 00:26:43,320
quel serait votre choix naturel ont été pour la cueillette des dates?

446
00:26:43,320 --> 00:26:48,670
[L'élève] Entrée. Entrée >>. Ou peut-être même un menu déroulant avec toutes les dates, non?

447
00:26:48,670 --> 00:26:53,170
Donc, avec des mécanismes d'interface utilisateur plus complexes comme celui-ci sur le côté gauche que vous pouvez mettre en œuvre,

448
00:26:53,170 --> 00:26:55,500
vous pouvez rendre ce processus beaucoup plus intuitive avec un curseur

449
00:26:55,500 --> 00:27:01,020
parce que le temps est continu, et les gens en général ne pensent pas en termes de morceaux discrets.

450
00:27:01,020 --> 00:27:04,950
Très bien. Dernière chose.

451
00:27:04,950 --> 00:27:07,370
Dix heuristiques convivialité.

452
00:27:07,370 --> 00:27:10,820
Toutes les choses dont nous avons parlé sans doute entrer dans l'une de ces catégories.

453
00:27:10,820 --> 00:27:14,420
Si vous allez à ce lien, dont les sites seront mis en ligne,

454
00:27:14,420 --> 00:27:18,900
vous allez vraiment pouvoir le faire, comme vous concevez votre site, gardez à l'esprit ces heuristiques

455
00:27:18,900 --> 00:27:21,330
et ces règles de base.

456
00:27:21,330 --> 00:27:26,610
Pour vos projets, ce que je vous suggère de faire afin de concevoir votre application mieux

457
00:27:26,610 --> 00:27:28,850
est de faire le prototypage papier.

458
00:27:28,850 --> 00:27:32,150
Lorsque vous pensez à votre demande, très rapidement esquisser ce que vous voulez qu'il ressemble à

459
00:27:32,150 --> 00:27:36,230
et assurez-vous que toutes les cases sont disposées d'une manière qui est très intuitif pour l'utilisateur d'utiliser

460
00:27:36,230 --> 00:27:39,820
et même montrer ces prototypes papier à vos amis et commencez à des groupes de discussion.

461
00:27:39,820 --> 00:27:44,230
Juste obtenir 2 ou 3 personnes et leur demander de simplement taper sur ces prototypes papier,

462
00:27:44,230 --> 00:27:47,650
et leur montrer de nouveaux écrans pour voir s'ils comprennent réellement ce qui se passe.

463
00:27:47,650 --> 00:27:50,680
>> Qu'est-ce que vous voulez faire est de leur donner une tâche, de motiver cette tâche,

464
00:27:50,680 --> 00:27:53,270
et donnez-leur l'application et de les laisser l'utiliser.

465
00:27:53,270 --> 00:27:56,530
Ne pas leur donner des instructions au-delà.

466
00:27:56,530 --> 00:28:00,920
Vous voulez vraiment les laisser interagir avec votre application d'une manière qui vous permet de voir

467
00:28:00,920 --> 00:28:03,870
comment ils l'utiliser si vous n'avez pas été à côté d'eux.

468
00:28:03,870 --> 00:28:05,250
Et c'est très important.

469
00:28:05,250 --> 00:28:08,780
Cela vous donnera beaucoup d'idées à des gens autour obtenir des choses particulières

470
00:28:08,780 --> 00:28:10,560
d'une manière que je ne les ai pas l'intention d'?

471
00:28:10,560 --> 00:28:14,680
Sont-ils recours à des mécanismes particuliers d'interface utilisateur sur l'écran

472
00:28:14,680 --> 00:28:17,490
d'une façon qui est une sorte de hacky?

473
00:28:17,490 --> 00:28:22,020
Je n'ai pas l'intention pour eux de faire de cette façon.

474
00:28:22,020 --> 00:28:23,940
Et une fois que vous avez terminé avec cela, que voulez-vous faire?

475
00:28:23,940 --> 00:28:26,010
Vos roches de conception, non?

476
00:28:26,010 --> 00:28:29,600
Ce que vous voulez faire, c'est que vous souhaitez développer et faire que le processus recommence.

477
00:28:29,600 --> 00:28:32,110
C'est donc montrer aux amis une fois que vous avez mis au point, tester,

478
00:28:32,110 --> 00:28:36,630
développer, tester, développer, tester, répéter encore et encore et en avant.

479
00:28:36,630 --> 00:28:39,720
Le design est un processus très itératif dans ce sens.

480
00:28:39,720 --> 00:28:43,280
Vous avez en fait de construire quelque chose et puis se rendre compte des choses à ce sujet

481
00:28:43,280 --> 00:28:46,520
que vous n'avez pas réalisé avant et revenir en arrière et d'améliorer de cela.

482
00:28:46,520 --> 00:28:50,890
Maintenant, pour la partie développement, c'est ce que Tommy va vous montrer après la pause

483
00:28:50,890 --> 00:28:53,220
et comment vous pourriez être en mesure de mettre en œuvre quelque chose comme autocomplete

484
00:28:53,220 --> 00:28:56,610
d'une manière qui est assez simple.

485
00:28:57,440 --> 00:28:59,550
[Malan] Comme Tommy met en place ici, une question-là.

486
00:28:59,550 --> 00:29:03,780
Un grand nombre des premiers sites Internet - et quand Joseph dit des années 1990 site web de style,

487
00:29:03,780 --> 00:29:07,640
il était implémentations où si vous vouliez sélectionner une heure de début et une heure de fin,

488
00:29:07,640 --> 00:29:10,380
franchement, de retour dans la journée et même sur certains sites Web d'aujourd'hui,

489
00:29:10,380 --> 00:29:13,220
la façon dont vous le faire est de choisir une heure à partir d'une liste déroulante,

490
00:29:13,220 --> 00:29:15,910
vous chercher minutes d'une liste déroulante, peut-être que vous choisissez AM, PM,

491
00:29:15,910 --> 00:29:17,440
et puis vous faire que 3 fois plus.

492
00:29:17,440 --> 00:29:19,920
Et donc avec 6 clics et peut-être quelques-uns de défilement

493
00:29:19,920 --> 00:29:24,000
votre nom d'utilisateur peut effectivement fournir une sorte de date et / ou intervalle de temps dans ce sens.

494
00:29:24,000 --> 00:29:27,920
>> Donc, définitivement sous-optimale et encore à ce jour, nous avons vu pas de capacités expressives

495
00:29:27,920 --> 00:29:30,330
dans l'une des langues, nous avons regardé à faire quelque chose plus sexy

496
00:29:30,330 --> 00:29:32,620
comme ce curseur de temps de début et de fin des temps.

497
00:29:32,620 --> 00:29:36,290
Mais si vous repensez à la semaine 0 quand nous avons parlé Scratch,

498
00:29:36,290 --> 00:29:39,080
là aussi il n'y avait pas les widgets n'avait tout simplement certaines choses.

499
00:29:39,080 --> 00:29:42,700
Vous avez vraiment eu ces principes fondamentaux comme les boucles et les conditions, etc.

500
00:29:42,700 --> 00:29:46,910
Alors sorte de juste à y penser très abstraitement maintenant, indépendamment des particularités de HTML,

501
00:29:46,910 --> 00:29:51,260
ce qui se passe vraiment à quelque chose comme ceci heure de début et heure de fin curseur?

502
00:29:51,260 --> 00:29:54,960
Lorsque je déplace ma souris et je clique sur ce symbole carotte peu sur la gauche

503
00:29:54,960 --> 00:29:59,220
et commencez à faire glisser, programmation, qu'est-ce que vous voulez être en mesure de mettre en œuvre

504
00:29:59,220 --> 00:30:01,000
pour y arriver?

505
00:30:01,000 --> 00:30:04,920
Quelles questions, quels expressions booléennes voulez-vous être en mesure de demander?

506
00:30:04,920 --> 00:30:06,930
Qu'est-ce qui se passe vraiment? Sammy?

507
00:30:06,930 --> 00:30:10,080
[L'élève] Où est la position du curseur? Bon >>. Quelle est la position du curseur?

508
00:30:10,080 --> 00:30:11,970
C'est quelque chose que nous avons besoin d'exprimer retour à rayures,

509
00:30:11,970 --> 00:30:14,690
si elle était fondée sur place ou même la couleur ou autre.

510
00:30:14,690 --> 00:30:18,410
Vous vous rappelez peut très brièvement le lundi, il y avait toutes ces choses appelées événements

511
00:30:18,410 --> 00:30:22,370
dans le monde du Web, et donc il ya des choses comme onclick et onkeypress

512
00:30:22,370 --> 00:30:25,960
et onkeyup et onmouseover et onmouseout.

513
00:30:25,960 --> 00:30:29,130
Alors rends compte que même ces choses que nous avons été en prenant pour acquis sur le Web

514
00:30:29,130 --> 00:30:32,190
avec des sites comme Facebook et Gmail, même si vous n'avez aucune idée

515
00:30:32,190 --> 00:30:34,890
comment vous peut-être mettre en œuvre que parce qu'il n'y a rien de tel dans même conférence

516
00:30:34,890 --> 00:30:38,570
ou un problème Set 7, se rendre compte que ces principes fondamentaux exactement les mêmes,

517
00:30:38,570 --> 00:30:41,090
avec HTTP et les paramètres et GET et POST,

518
00:30:41,090 --> 00:30:44,010
avec les entrées HTML de base que nous avons examinés jusqu'à présent

519
00:30:44,010 --> 00:30:47,690
et dans un moment avec les mécanismes programmatiques de Tommy sur le point d'introduire

520
00:30:47,690 --> 00:30:51,300
vous pouvez commencer à vous exprimer tout comme vous l'avez fait dans la semaine 0

521
00:30:51,300 --> 00:30:53,800
très intuitive par glisser-déposer.

522
00:30:53,800 --> 00:30:58,950
>> Donc, avec cela dit, Tommy MacWilliam et quelques nouvelles pièces du puzzle pour nous pour le Web.

523
00:30:58,950 --> 00:31:03,450
Très bien. Mon nom est Tommy et je vais en parler JavaScript.

524
00:31:03,450 --> 00:31:07,150
Juste un avertissement: je suis d'avis que JavaScript est le meilleur langage de programmation

525
00:31:07,150 --> 00:31:09,010
dans le monde entier ensemble.

526
00:31:09,010 --> 00:31:11,940
Il ya beaucoup de gens qui sont en désaccord avec moi, mais c'est tout simplement incroyable.

527
00:31:11,940 --> 00:31:16,330
Une fois que vous revenez à C, si vous avez à écrire C pour une autre classe ou d'autres langues,

528
00:31:16,330 --> 00:31:19,780
c'est vraiment frustrant dans tous les détails de bas niveau que vous avez à s'enliser po

529
00:31:19,780 --> 00:31:23,050
Donc, si jamais vous êtes triste à propos de comment ennuyeux C est d'écrire,

530
00:31:23,050 --> 00:31:25,130
juste revenir, écrire un peu de JavaScript. C'est le nirvana.

531
00:31:25,130 --> 00:31:27,980
Vous vous sentirez beaucoup mieux dans votre mauvaise journée.

532
00:31:27,980 --> 00:31:31,900
Une grande partie de la magie de JavaScript vient de sa capacité à manipuler les choses

533
00:31:31,900 --> 00:31:33,730
qui sont déjà sur la page.

534
00:31:33,730 --> 00:31:38,520
Lorsque nous avons écrit nos scripts PHP, ils ont été exécutés sur le serveur,

535
00:31:38,520 --> 00:31:42,270
et, finalement, que script PHP sans doute sortir un peu de HTML.

536
00:31:42,270 --> 00:31:45,860
Que le HTML a été envoyé au client, puis c'est tout.

537
00:31:45,860 --> 00:31:50,180
Si PHP a voulu ajouter un bouton à une page, par exemple, on ne peut pas vraiment faire cela.

538
00:31:50,180 --> 00:31:54,350
Il faudrait rendre l'ensemble nouveau fichier HTML et l'envoyer au navigateur.

539
00:31:54,350 --> 00:31:57,840
Avec JavaScript, nous savons que nous pouvons mettre à jour les choses alors qu'ils sont déjà sur la page,

540
00:31:57,840 --> 00:32:00,840
et à cause de cela, nous pouvons fournir des commentaires beaucoup plus immédiat,

541
00:32:00,840 --> 00:32:06,150
qui va vraiment améliorer l'expérience utilisateur sur notre site.

542
00:32:06,150 --> 00:32:09,330
Juste un bref récapitulatif des sélecteurs JavaScript.

543
00:32:09,330 --> 00:32:11,590
Nous savons que lorsque nous téléchargeons une page HTML,

544
00:32:11,590 --> 00:32:13,890
qui va être représenté dans les DOM.

545
00:32:13,890 --> 00:32:19,340
>> Le DOM est rappelez-vous juste ce grand arbre où les éléments sont liés dans cette grande hiérarchie.

546
00:32:19,340 --> 00:32:21,810
Lorsque nous avons travaillé avec des bases de données en pset 7,

547
00:32:21,810 --> 00:32:26,280
l'une des premières choses que nous avions besoin de savoir comment faire, c'était interroger la base de données.

548
00:32:26,280 --> 00:32:29,060
Nous avons cette grande table utilisateurs, et parfois nous avons juste envie de dire,

549
00:32:29,060 --> 00:32:33,260
«Je veux seulement certains de ces utilisateurs qui répondent à certaines conditions."

550
00:32:33,260 --> 00:32:36,020
De même, lorsque nous avons le DOM nous avons besoin d'une certaine façon de l'interroger.

551
00:32:36,020 --> 00:32:39,490
Nous avons besoin d'une certaine façon de dire: «Je veux que tous les boutons qui ressemblent à ceci

552
00:32:39,490 --> 00:32:41,860
"Ou l'ensemble des images sur la page."

553
00:32:41,860 --> 00:32:44,330
Et ces sélecteurs permettent de le faire.

554
00:32:44,330 --> 00:32:45,690
Alors juste un résumé rapide.

555
00:32:45,690 --> 00:32:50,770
Cette première ici, ce # soumettre, qu'est-ce que va choisir? Quelqu'un se souvient?

556
00:32:50,770 --> 00:32:54,880
[Réponse de l'élève inaudible] >> Oui, exactement.

557
00:32:54,880 --> 00:32:59,510
Cela va sélectionner un élément sur la page qui a un ID de présenter.

558
00:32:59,510 --> 00:33:03,470
Et si cette balise de hachage dit ce sélecteur est d'aller travailler avec des identifications.

559
00:33:03,470 --> 00:33:07,630
Que diriez-vous d'une seconde, ce. Centré, ce qui va choisir ce que?

560
00:33:11,360 --> 00:33:15,180
Ouais. >> [L'élève] de classe. >> Exactement. Ce va maintenant sélectionner par classe.

561
00:33:15,180 --> 00:33:18,840
La différence entre ID et classes ici est généralement l'ID doit être unique

562
00:33:18,840 --> 00:33:20,820
au sein de tout l'espace que vous êtes à la recherche terminée.

563
00:33:20,820 --> 00:33:23,080
Donc, si vous recherchez sur une page Web entière,

564
00:33:23,080 --> 00:33:27,740
vous devriez vraiment seulement 1 élément avec cet ID certain, donc dans ce cas de se soumettre.

565
00:33:27,740 --> 00:33:31,330
Avec les classes, d'autre part, nous pouvons avoir plus de 1 élément sur la même page

566
00:33:31,330 --> 00:33:33,130
avec la même classe.

567
00:33:33,130 --> 00:33:36,580
Cela pourrait être utile pour dire que je veux pour sélectionner tout ce qui est centrée sur la page

568
00:33:36,580 --> 00:33:38,450
plutôt que seulement 1 chose.

569
00:33:38,450 --> 00:33:40,310
>> Et enfin, cette dernière est ici un peu plus compliqué,

570
00:33:40,310 --> 00:33:43,890
mais ce qui est ce que ça va sélectionner dans le DOM?

571
00:33:46,650 --> 00:33:48,810
[Réponse de l'élève inaudible] >> Qu'est-ce que c'est?

572
00:33:48,810 --> 00:33:53,250
[L'élève] Tout ce qui est une balise. >> Nous avons 2 parties ici.

573
00:33:53,250 --> 00:33:58,070
La deuxième partie va dire que je veux pour sélectionner ces balises avec une étiquette d'entrée,

574
00:33:58,070 --> 00:34:00,730
de sorte que tout élément qui est une balise input.

575
00:34:00,730 --> 00:34:03,080
Mais je ne veux pas juste de sélectionner toutes les entrées

576
00:34:03,080 --> 00:34:05,170
parce que quelque chose comme un bouton submit pourrait être une entrée

577
00:34:05,170 --> 00:34:08,409
et quelque chose comme une zone de texte pourrait être une entrée.

578
00:34:08,409 --> 00:34:11,909
Donc, avec ces crochets que je dis que je ne veux pour sélectionner les éléments

579
00:34:11,909 --> 00:34:14,110
qui sont de type texte.

580
00:34:14,110 --> 00:34:17,400
Quelque part dans mon tag HTML j'ai un attribut appelé type,

581
00:34:17,400 --> 00:34:19,750
et la valeur de cet attribut doit être du texte.

582
00:34:19,750 --> 00:34:21,340
Alors que diriez-vous de cette première partie ici?

583
00:34:21,340 --> 00:34:25,489
Le premier mot de ce sélecteur est forme alors j'ai un espace, puis cette partie d'entrée.

584
00:34:25,489 --> 00:34:29,620
Qu'est-ce que ça fait, de mettre la forme en face d'elle?

585
00:34:33,409 --> 00:34:35,860
Cela va fondamentalement limiter notre requête.

586
00:34:35,860 --> 00:34:38,510
Ce pourrait être le cas que nous avons quelques entrées sur la page

587
00:34:38,510 --> 00:34:41,080
qui ne sont pas descendants d'un formulaire.

588
00:34:41,080 --> 00:34:46,150
Ce que cela va faire, c'est de cela que je veux seulement les balises d'entrée qui ont quelque part au-dessus de leur

589
00:34:46,150 --> 00:34:49,030
un élément parent d'un formulaire.

590
00:34:49,030 --> 00:34:52,100
Et aussi de cette manière que nous pouvons rendre ces questions plus hiérarchiques

591
00:34:52,100 --> 00:34:55,000
nous n'avons donc pas suffit de sélectionner tout assorti d'un sélecteur de donnée.

592
00:34:55,000 --> 00:35:00,760
Nous pouvons sorte de limite la portée de cette requête à autre chose.

593
00:35:00,760 --> 00:35:04,000
Alors, maintenant que nous savons comment sélectionner des éléments sur la page,

594
00:35:04,000 --> 00:35:06,780
Parlons un peu d'AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX est un acronyme encore très à la mode qui signifie Asynchronous JavaScript and XML.

596
00:35:12,270 --> 00:35:15,640
Il se trouve que XML est une façon de représenter les données.

597
00:35:15,640 --> 00:35:20,920
>> Ce genre de popularité perdue récemment, de sorte que le X dans AJAX n'est pas utilisé tout le temps.

598
00:35:20,920 --> 00:35:26,220
Fondamentalement, ce que AJAX nous permet de faire, c'est de faire des requêtes HTTP

599
00:35:26,220 --> 00:35:28,620
du contexte de JavaScript.

600
00:35:28,620 --> 00:35:32,310
Lorsque nous sommes dans notre navigateur web et nous sommes naviguer dans les pages et on clique sur un lien,

601
00:35:32,310 --> 00:35:37,790
ce que notre navigateur va faire est de faire une requête HTTP à tout lien on clique.

602
00:35:37,790 --> 00:35:41,670
Mais ce n'est pas toujours la solution idéale parce que si c'est le cas, alors que David l'a dit,

603
00:35:41,670 --> 00:35:45,220
nous devons toujours rendre les utilisateurs cliquent sur un bouton d'envoi ou de cliquer sur un lien

604
00:35:45,220 --> 00:35:50,380
afin de rendre quelque chose arrive qui va impliquer une requête HTTP.

605
00:35:50,380 --> 00:35:54,160
Donc, avec AJAX, nous pouvons faire ces demandes au nom du JavaScript.

606
00:35:54,160 --> 00:35:57,020
Cela signifie que chaque fois que l'utilisateur interagit avec la page ou quoi que ce soit arrive,

607
00:35:57,020 --> 00:36:01,780
nous pouvons réellement faire une demande de programmation à un fichier PHP d'autres sur notre site internet

608
00:36:01,780 --> 00:36:06,280
ou quelque chose d'autre et récupérer les données de ce fichier recrache.

609
00:36:06,280 --> 00:36:09,860
Jetons un coup d'oeil à un exemple d'AJAX.

610
00:36:09,860 --> 00:36:16,140
Ceci est notre page Finances CS50 avec laquelle j'espère que certains d'entre nous sont familiers.

611
00:36:16,140 --> 00:36:21,790
Si nous regardons le code HTML de cette page, nous voyons ici que j'ai ajouté quelques petites choses,

612
00:36:21,790 --> 00:36:23,820
dont je vous ai donné cette forme d'identité.

613
00:36:23,820 --> 00:36:26,480
Je l'ai dit id = "form-citation".

614
00:36:26,480 --> 00:36:31,910
Je l'ai fait juste parce que ça va faire cela un peu plus facile de choisir des DOM

615
00:36:31,910 --> 00:36:35,090
puisque je peux juste faire une requête très simple.

616
00:36:35,090 --> 00:36:38,960
Ce que je veux faire ici est que je veux corriger un problème avec CS50 Finances.

617
00:36:38,960 --> 00:36:41,550
Donc, si nous allons à finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
chaque fois que je veux obtenir un devis, je dois cliquer sur ce bouton Get Quote,

619
00:36:45,700 --> 00:36:48,960
et que le bouton Récupérer Citation prend alors moi à une autre page entière.

620
00:36:48,960 --> 00:36:52,400
Et si je veux une autre citation, je dois appuyer sur le bouton Précédent, puis je l'ai taper,

621
00:36:52,400 --> 00:36:54,480
Je obtenir un devis, et je suis tombé sur le bouton Retour.

622
00:36:54,480 --> 00:36:56,840
Ce n'est vraiment pas la meilleure expérience utilisateur.

623
00:36:56,840 --> 00:37:01,570
Qui aurait vraiment utiliser le site si ce n'est que lente pour obtenir des cours boursiers?

624
00:37:01,570 --> 00:37:05,630
Donc, ce que nous voulons faire avec AJAX est supprimer cette étape d'aller à une page séparée

625
00:37:05,630 --> 00:37:08,410
afin d'afficher les résultats.

626
00:37:08,410 --> 00:37:11,240
>> Qu'est-ce que nous sommes vraiment demandons, c'est que le prix vraiment petit,

627
00:37:11,240 --> 00:37:14,240
et c'est seulement une quantité très faible de données.

628
00:37:14,240 --> 00:37:17,400
Donc, il n'est pas nécessaire pour moi d'aller d'une autre page HTML entière,

629
00:37:17,400 --> 00:37:20,670
télécharger une nouvelle fournée de HTML, peut-être télécharger des images un peu plus,

630
00:37:20,670 --> 00:37:24,410
d'autres fichiers CSS juste pour moi de répondre à cette question très simple

631
00:37:24,410 --> 00:37:27,810
de combien coûte ce stock.

632
00:37:27,810 --> 00:37:31,000
Avec AJAX, nous pouvons faire cela beaucoup plus facile.

633
00:37:31,000 --> 00:37:36,400
Nous voyons ici que je suis de liaison dans un fichier JavaScript appelé quote.js.

634
00:37:36,400 --> 00:37:40,140
Nous allons effectivement ouvrir ce fichier. Pas là.

635
00:37:42,610 --> 00:37:45,860
Tous mes fichiers JavaScript vont être situé en HTML

636
00:37:45,860 --> 00:37:47,630
afin que le navigateur puisse y accéder.

637
00:37:47,630 --> 00:37:50,330
Ensuite, nous avons un répertoire séparé ici pour JavaScript

638
00:37:50,330 --> 00:37:54,340
et maintenant voici quote.js.

639
00:37:54,340 --> 00:38:00,930
Au sommet de ce fichier est dit ici ce que je veux attendre que la page entière soit chargée

640
00:38:00,930 --> 00:38:04,830
avant d'essayer de faire quelque chose. Pourquoi est-ce nécessaire?

641
00:38:04,830 --> 00:38:08,650
Il s'avère que la prochaine chose que je vais faire ici est de commencer la recherche d'un élément

642
00:38:08,650 --> 00:38:10,810
qui correspond à une certaine sélection.

643
00:38:10,810 --> 00:38:15,600
Si cette JavaScript est toujours exécutée avant cet élément est chargé sur la page,

644
00:38:15,600 --> 00:38:17,820
alors tout j'essaie de faire est de ne pas aller travailler

645
00:38:17,820 --> 00:38:20,580
parce que je vais essayer de choisir quelque chose qui n'est pas encore là.

646
00:38:20,580 --> 00:38:23,780
Donc cette ligne là-haut me dit que je veux que vous attendez que tout est chargé

647
00:38:23,780 --> 00:38:28,030
Nous sommes donc garanti que tous les éléments que je suis à la recherche sont effectivement sur la page.

648
00:38:29,730 --> 00:38:34,310
Ce signe dollar ici signifie que je suis en utilisant la bibliothèque jQuery appelé.

649
00:38:34,310 --> 00:38:38,570
Cette bibliothèque jQuery nous permet d'utiliser ces sélecteurs que nous venons d'examiner.

650
00:38:38,570 --> 00:38:44,010
En disant $ puis en passant en argument de cette forme # devis,

651
00:38:44,010 --> 00:38:47,910
Je suis en train de choisir cette forme que nous avons juste pris un coup d'oeil.

652
00:38:47,910 --> 00:38:52,290
Maintenant, j'ai une représentation de cette forme dans la mémoire en quelque sorte.

653
00:38:52,290 --> 00:38:56,760
>> Sur cet objet maintenant, cette représentation de la forme,

654
00:38:56,760 --> 00:38:58,890
Je suis maintenant en utilisant une fonction appelée.

655
00:38:58,890 --> 00:39:02,710
Qu'est-ce que cette fonction fait est que ça va attacher un gestionnaire d'événement.

656
00:39:02,710 --> 00:39:06,310
L'événement que nous allons écouter est l'événement submit.

657
00:39:06,310 --> 00:39:08,890
Ainsi, lorsque l'utilisateur clique sur ce bouton Envoyer ou appuie sur Entrée,

658
00:39:08,890 --> 00:39:11,730
cet événement se passe au feu.

659
00:39:11,730 --> 00:39:16,390
En accrochant là-dedans, je peux maintenant remplacer le comportement par défaut du formulaire.

660
00:39:16,390 --> 00:39:19,770
Sans cette JavaScript forme serait soumettre à tout fichier PHP

661
00:39:19,770 --> 00:39:22,110
nous avons utilisé dans cet attribut action.

662
00:39:22,110 --> 00:39:25,440
Mais à la place, je suis en train de dire, attendez, attendez, attendez, je ne veux pas que tu réellement le faire.

663
00:39:25,440 --> 00:39:31,140
Je veux que cela se produise avant de partir et essayer de se soumettre à un fichier PHP.

664
00:39:31,140 --> 00:39:32,870
Maintenant, qu'est-ce que je veux faire?

665
00:39:32,870 --> 00:39:39,270
A ce stade, je tiens à utiliser AJAX pour charger en quelque sorte à ce que le prix de l'action est.

666
00:39:39,270 --> 00:39:44,170
La première chose que j'ai besoin de savoir ce qui est disponible à l'utilisateur est à la recherche.

667
00:39:44,170 --> 00:39:46,760
Pour ce faire, je vais utiliser un autre sélecteur.

668
00:39:46,760 --> 00:39:49,020
Il s'agit de la troisième sélecteur, nous avons examiné auparavant.

669
00:39:49,020 --> 00:39:54,460
Ceci signifie que je veux commencer cet élément forme avec un ID de la forme-citation.

670
00:39:54,460 --> 00:39:58,440
Puis, quelque part à l'intérieur de cette forme il doit y avoir un élément d'entrée

671
00:39:58,440 --> 00:40:01,270
qui a un nom de symbole.

672
00:40:01,270 --> 00:40:05,460
Si nous regardons en arrière à notre HTML, nous avons vu que nous avions une entrée [name = symbole].

673
00:40:05,460 --> 00:40:12,380
Cela signifie que ce qui se passe pour sélectionner cette zone de texte que l'utilisateur tape dans.

674
00:40:12,380 --> 00:40:13,870
C'est bien. Nous avons la zone de texte.

675
00:40:13,870 --> 00:40:17,360
Maintenant, nous avons juste besoin de savoir ce qu'il ya dedans d'elle.

676
00:40:17,360 --> 00:40:20,290
Pour ce faire, nous pouvons appeler cette méthode ici, ce val.,

677
00:40:20,290 --> 00:40:23,240
et ceci dit je sais ce que vous avez zone de texte.

678
00:40:23,240 --> 00:40:28,160
Je veux que vous me disiez ce que c'est que l'utilisateur a tapé dans cette zone de texte.

679
00:40:28,160 --> 00:40:34,440
Maintenant, nous avons une chaîne appelée symbole qui est égale à ce que l'utilisateur a tapé po

680
00:40:34,440 --> 00:40:39,820
C'est bien. Nous pouvons utiliser cette chaîne pour rendre notre demande.

681
00:40:39,820 --> 00:40:42,450
Ceci est une nouvelle fonction ici, cette somme,

682
00:40:42,450 --> 00:40:44,900
sauf que nous ne sommes plus aller à la sélection des éléments,

683
00:40:44,900 --> 00:40:48,910
nous allons appeler une autre fonction qui est fournie à nous par jQuery.

684
00:40:48,910 --> 00:40:54,810
Cette fonction AJAX est ce qui se passe réellement à faire cette demande HTTP.

685
00:40:54,810 --> 00:40:57,000
Donc, il faut dire que quelques petites choses.

686
00:40:57,000 --> 00:41:01,410
La première chose que nous devons dire à cette fonction là où je veux aller la demande.

687
00:41:01,410 --> 00:41:08,910
Quelque part dans mon projet, j'ai ce fichier à l'intérieur du répertoire HTML appelé quote.php.

688
00:41:08,910 --> 00:41:15,150
Je ne peux accéder à ce fichier, nous l'avons vu, juste comme ça, si je vais à localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Je veux que mon JavaScript afin de faire une demande à cette page.

690
00:41:20,450 --> 00:41:22,920
Quel type de demande maintenant?

691
00:41:22,920 --> 00:41:27,210
Nous avons vu auparavant que le formulaire a cette method = "post" attribut,

692
00:41:27,210 --> 00:41:29,270
ce qui signifie qu'il va faire une requête POST,

693
00:41:29,270 --> 00:41:32,630
donc il ne va pas mettre n'importe quoi dans l'URL, plutôt que d'une requête GET,

694
00:41:32,630 --> 00:41:36,860
ce qui serait tout simplement tiré si nous venez d'accéder à la page avec le navigateur, par exemple.

695
00:41:36,860 --> 00:41:41,260
Maintenant que nous avons dit je veux faire une requête HTTP POST

696
00:41:41,260 --> 00:41:44,840
à une page située à quote.php.

697
00:41:44,840 --> 00:41:51,490
Quand nous envoyer le formulaire, n'oubliez pas que nous pourrions accéder aux éléments d'entrée à l'intérieur de cette forme

698
00:41:51,490 --> 00:41:54,430
à cette variable $ _POST.

699
00:41:54,430 --> 00:41:58,710
Jusqu'ici, dans l'histoire, nous n'avons pas réellement envoyé en même temps toutes les données pour le moment.

700
00:41:58,710 --> 00:42:00,640
Nous avons simplement dit que nous faisons une requête AJAX

701
00:42:00,640 --> 00:42:03,200
et voici le type de demande que nous faisons.

702
00:42:03,200 --> 00:42:07,090
Maintenant, nous devons effectivement envoyer des données à la page.

703
00:42:07,090 --> 00:42:10,930
Pour ce faire, nous pouvons utiliser cette propriété appelée données.

704
00:42:10,930 --> 00:42:14,950
La valeur de cette propriété est en fait un tableau associatif.

705
00:42:14,950 --> 00:42:19,390
La raison en est qu'il nous permet d'envoyer plus que juste 1 morceau de données.

706
00:42:19,390 --> 00:42:24,750
C'est pourquoi nous avons ces accolades ici imbriquées dans ces autres accolades bouclées.

707
00:42:24,750 --> 00:42:29,680
Les touches de ces tableaux associatifs vont être la même chose

708
00:42:29,680 --> 00:42:32,630
que ceux attributs name dans nos éléments de formulaire.

709
00:42:32,630 --> 00:42:35,740
Cela signifie que si j'envoie le long d'une touche de symbole,

710
00:42:35,740 --> 00:42:41,870
cela signifie que ma page PHP peut accéder à ces données avec $ _POST [symbole]

711
00:42:41,870 --> 00:42:44,640
comme nous l'avons fait avant, quand nous étions soumission d'un formulaire.

712
00:42:44,640 --> 00:42:47,090
Et maintenant, les données réelles que nous voulons envoyer

713
00:42:47,090 --> 00:42:50,790
va être à l'intérieur de cette valeur tableau associatif.

714
00:42:50,790 --> 00:42:54,070
>> Nous avons laissé ce texte dans un symbole de variable appelée,

715
00:42:54,070 --> 00:42:57,380
et si nous envoyons le long maintenant une touche de symbole

716
00:42:57,380 --> 00:43:01,380
et une valeur de ce que l'utilisateur a entré po

717
00:43:01,380 --> 00:43:06,270
Maintenant que nous avons fait cette demande HTTP, notre fichier PHP a été exécutée,

718
00:43:06,270 --> 00:43:11,480
et il va envoyer des données en arrière maintenant au client qui vient de faire cette demande.

719
00:43:11,480 --> 00:43:15,220
Maintenant nous avons besoin pour répondre à tout ce que le serveur nous a dit.

720
00:43:15,220 --> 00:43:20,180
Pour ce faire, nous avons cette dernière propriété appelée ici succès.

721
00:43:20,180 --> 00:43:24,240
La valeur de cette clé de succès qui se passe réellement être une fonction,

722
00:43:24,240 --> 00:43:26,910
et c'est l'une des choses vraiment cool que vous pouvez faire avec JavaScript.

723
00:43:26,910 --> 00:43:31,720
Non seulement vous pouvez avoir entiers ou des tableaux comme à l'intérieur de la valeur d'un tableau associatif,

724
00:43:31,720 --> 00:43:34,170
nous pouvons aussi avoir une fonction.

725
00:43:34,170 --> 00:43:36,380
Donc, en disant succès, c'est ma clé.

726
00:43:36,380 --> 00:43:38,830
Un colon est dit ici est la valeur,

727
00:43:38,830 --> 00:43:41,810
et maintenant la valeur de cette fonction est en fait un.

728
00:43:41,810 --> 00:43:44,460
Donc, nous n'avons pas besoin de donner un nom de cette fonction en soi.

729
00:43:44,460 --> 00:43:48,820
Nous pouvons simplement dire que cela va être une fonction. Il va prendre 1 argument.

730
00:43:48,820 --> 00:43:51,190
L'argument de cette fonction va être

731
00:43:51,190 --> 00:43:54,460
quel que soit le serveur nous a renvoyé de la demande.

732
00:43:54,460 --> 00:43:57,750
Tout comme lors de notre navigateur envoie une requête, le serveur envoie quelque chose en retour

733
00:43:57,750 --> 00:43:59,060
et le navigateur affiche,

734
00:43:59,060 --> 00:44:03,030
dans le cadre d'AJAX nous venons de faire une demande, le serveur a envoyé quelque chose en retour,

735
00:44:03,030 --> 00:44:07,110
et maintenant que nous avons représenté sous forme de chaîne.

736
00:44:07,110 --> 00:44:11,280
Avec cette chaîne, je voudrais juste afficher que sur la page.

737
00:44:11,280 --> 00:44:14,040
Pour ce faire, je vais avoir un sélecteur dernière.

738
00:44:14,040 --> 00:44:17,570
Je veux sélectionner l'élément avec le prix d'identité.

739
00:44:17,570 --> 00:44:20,710
Ceci est juste un div vide que j'ai créé sur la page,

740
00:44:20,710 --> 00:44:26,640
et je tiens à mettre le contenu de ce div à être ce que le serveur nous a renvoyé.

741
00:44:26,640 --> 00:44:30,280
En fait, j'ai modifié un peu quote.php.

742
00:44:30,280 --> 00:44:33,460
>> Plutôt que d'appeler rendu et rendant une page,

743
00:44:33,460 --> 00:44:38,100
quote.php est maintenant tout simplement aller pour imprimer la valeur de l'action sous forme de chaîne.

744
00:44:38,100 --> 00:44:41,880
Donc, si vous étiez réellement visiter la page, vous devez juste voir que petite chaîne

745
00:44:41,880 --> 00:44:45,030
de ce que le prix de l'action est.

746
00:44:45,030 --> 00:44:50,170
Une dernière chose que nous devons faire ici est juste s'assurer que cette fonction retourne false.

747
00:44:50,170 --> 00:44:53,560
Ce que cela dit, c'est que si je suis à l'intérieur d'un gestionnaire d'événements

748
00:44:53,560 --> 00:44:57,300
et ce gestionnaire d'événements renvoie la valeur false au lieu de retourner vrai,

749
00:44:57,300 --> 00:45:01,510
cela veut dire que je ne veux pas l'événement d'origine au feu.

750
00:45:01,510 --> 00:45:05,270
Dans ce cas, si nous n'avons pas de JavaScript et nous avons soumis un formulaire,

751
00:45:05,270 --> 00:45:08,280
notre navigateur va dire: «Je vais envoyer ces données le long»,

752
00:45:08,280 --> 00:45:10,130
et ils vont vous envoyer vers une autre page.

753
00:45:10,130 --> 00:45:14,360
Parce que nous utilisons AJAX maintenant, il n'est pas nécessaire d'envoyer l'utilisateur vers une autre page.

754
00:45:14,360 --> 00:45:17,920
Nous allons juste pour afficher les résultats de façon dynamique sur cette même page.

755
00:45:17,920 --> 00:45:21,460
Nous ne voulons vraiment pas à aller n'importe où, et je veux rester sur la même page.

756
00:45:21,460 --> 00:45:27,060
Donc, en retournant false, nous nous assurons que la forme ne fait pas cela pour nous.

757
00:45:27,060 --> 00:45:31,170
Jetons un coup d'oeil à ce que ressemble réellement.

758
00:45:31,170 --> 00:45:34,180
Notre page Devis semble le même.

759
00:45:34,180 --> 00:45:37,240
Permettez-moi de tirer vers le haut l'inspecteur ici afin que nous puissions voir ce qui se passe.

760
00:45:37,240 --> 00:45:40,270
Faites-en un peu moins grand.

761
00:45:40,270 --> 00:45:44,590
N'oubliez pas que si nous ouvrons l'onglet Réseau, c'est là que nous pouvons voir toutes les requêtes HTTP

762
00:45:44,590 --> 00:45:47,570
qui se produisent sur la page.

763
00:45:47,570 --> 00:45:52,890
>> Pour un symbole permettez-moi de saisir AAPL et cliquez sur Obtenir un prix.

764
00:45:52,890 --> 00:45:56,720
Or nous avons vu que la part d'Apple coûte un certain nombre de dollars

765
00:45:56,720 --> 00:46:00,410
vient d'apparaître sur la page, mais l'URL n'a pas changé du tout.

766
00:46:00,410 --> 00:46:04,570
En fait, voici la requête HTTP que nous venons de faire.

767
00:46:04,570 --> 00:46:09,980
Nous avons fait une requête POST à ​​quote.php. Cela a du sens.

768
00:46:09,980 --> 00:46:12,800
C'est ce que le serveur nous a renvoyé.

769
00:46:12,800 --> 00:46:16,320
Ce n'est plus ce document gigantesque HTML avec des images et des choses comme ça,

770
00:46:16,320 --> 00:46:20,920
c'est juste une ligne de texte, puis nous avons juste affiché la ligne de texte.

771
00:46:20,920 --> 00:46:26,290
Si nous revenons aux en-têtes et de voir ce que nous avons envoyé à l'intérieur de cette requête HTTP,

772
00:46:26,290 --> 00:46:33,950
nous pouvons voir ici que nous avons envoyé le long d'une clé de symbole et une valeur de AAPL,

773
00:46:33,950 --> 00:46:36,430
qui est ce que l'utilisateur a tapé po

774
00:46:36,430 --> 00:46:39,230
C'est bien joli, mais c'est quand même un peu ennuyeux.

775
00:46:39,230 --> 00:46:42,490
Il me reste à cliquer sur ce bouton pour obtenir le cours de bourse.

776
00:46:42,490 --> 00:46:45,880
Nous sommes des gens très occupés et nous n'avons pas eu le temps de cliquer sur les boutons.

777
00:46:45,880 --> 00:46:49,910
Google a réalisé ce petit il ya un moment où ils ont mis Google Instant.

778
00:46:49,910 --> 00:46:53,590
Que Google Instant fait est que vous tapez il commence juste l'affichage des résultats pour vous

779
00:46:53,590 --> 00:46:56,520
de sorte que vous n'avez pas à vous soucier de même en cliquant sur Rechercher.

780
00:46:56,520 --> 00:46:58,730
En fait, une histoire amusante lié à cela.

781
00:46:58,730 --> 00:47:01,100
Une fois que Google Instant est sorti, les gens disaient: «Waouh, c'est super étonnant."

782
00:47:01,100 --> 00:47:02,540
"C'est trop cool."

783
00:47:02,540 --> 00:47:05,950
Et un étudiant en bas à Stanford qui avait 19 ans au moment

784
00:47:05,950 --> 00:47:09,000
faites ce site appelé YouTube instantanée.

785
00:47:09,000 --> 00:47:13,170
Tout instantanée YouTube ne soit effectivement rechercher instantanément sur YouTube.

786
00:47:13,170 --> 00:47:17,020
Ainsi, plutôt que d'avoir à aller à YouTube.com et appuyez sur Rechercher,

787
00:47:17,020 --> 00:47:21,650
quand je commence à taper dans quelque chose de YouTube instantanée comme CS50,

788
00:47:21,650 --> 00:47:25,320
nous avons pu voir ici qu'il a essayé de se sur une connexion Internet lente

789
00:47:25,320 --> 00:47:28,500
remplir ces résultats en direct.

790
00:47:28,500 --> 00:47:35,590
Pour ce faire, nous pouvons réellement apporter une modification très simple à notre fichier quote.js.

791
00:47:35,590 --> 00:47:40,900
En ce moment nous fixer cet événement lorsque le formulaire est soumis.

792
00:47:40,900 --> 00:47:43,760
Nous n'avons pas vraiment envie de faire valoir que l'utilisateur sous forme plus,

793
00:47:43,760 --> 00:47:48,570
nous allons donc tirer au lieu cet événement chaque fois que l'utilisateur appuie sur une touche.

794
00:47:48,570 --> 00:47:53,200
Pour ce faire, nous allons d'abord changer l'événement de se soumettre à keyup.

795
00:47:53,200 --> 00:47:55,740
Cela signifie que, plutôt que d'attendre que le formulaire pour soumettre,

796
00:47:55,740 --> 00:47:58,490
chaque fois que la touche est enfoncée, quelque chose qui va se passer.

797
00:47:58,490 --> 00:48:02,030
Il n'a plus de sens pour fixer cet événement keyup à l'intégralité du formulaire.

798
00:48:02,030 --> 00:48:05,080
Nous avons vraiment ne se soucient que ce champ de recherche.

799
00:48:05,080 --> 00:48:09,320
>> Pour sélectionner que maintenant, nous pouvons changer ce soit, plutôt que formulaire devis,

800
00:48:09,320 --> 00:48:14,220
forme devis et nous aurons une entrée (type = text) ou pourrait-on dire (nom du symbole =) -

801
00:48:14,220 --> 00:48:16,420
ce que nous voulons.

802
00:48:16,420 --> 00:48:18,650
Maintenant, il ya une dernière chose que nous devons faire.

803
00:48:18,650 --> 00:48:21,190
Rappelez-vous ici quand nous avons dit fausse déclaration

804
00:48:21,190 --> 00:48:24,370
nous avons dit que nous ne voulons pas que l'événement par défaut au feu.

805
00:48:24,370 --> 00:48:26,390
Mais il se trouve que si on désactive que maintenant,

806
00:48:26,390 --> 00:48:29,660
tout ce que nous taper ne va pas apparaître dans le navigateur plus

807
00:48:29,660 --> 00:48:33,000
parce que ce serait le comportement par défaut de taper dans une zone de texte.

808
00:48:33,000 --> 00:48:38,660
Nous ne voulons plus de passer outre cela, nous allons donc détruire cette fausse déclaration.

809
00:48:38,660 --> 00:48:44,800
Si nous sauvons que et rechargez la page, maintenant, quand je commence à taper AAPL

810
00:48:44,800 --> 00:48:50,160
vous verrez que le prix de l'action au fond ici est terminé automatiquement.

811
00:48:50,160 --> 00:48:53,150
Voici donc CS50 instantanée Finances.

812
00:48:53,150 --> 00:48:55,860
En fait, une histoire amusante à propos de l'Instant YouTube

813
00:48:55,860 --> 00:48:59,420
est que l'élève tout type de ai écrit comme un projet 1-nuit,

814
00:48:59,420 --> 00:49:03,800
et le lendemain, on lui a offert un emploi par le PDG de YouTube.

815
00:49:03,800 --> 00:49:10,610
Donc, aussi simple que cela, vous CS50 étudiants, vos projets finaux, vous pouvez obtenir un emploi à YouTube.

816
00:49:10,610 --> 00:49:14,720
Quelque chose comme ça, c'est une idée vraiment cool pour un projet final, non?

817
00:49:14,720 --> 00:49:18,170
Nous avons eu quelques fonctionnalités existantes que nous avons voulu intégrer.

818
00:49:18,170 --> 00:49:20,330
Nous améliorons l'expérience utilisateur un peu,

819
00:49:20,330 --> 00:49:24,340
et tout à coup quelque chose de chercher sur YouTube instantanée pourrait être beaucoup plus facile

820
00:49:24,340 --> 00:49:27,290
que de chercher sur YouTube régulière.

821
00:49:27,290 --> 00:49:30,790
Donc, c'est AJAX en un mot.

822
00:49:30,790 --> 00:49:34,860
>> Dans les exemples que Joseph a été montrant, nous avons vu beaucoup de autocompletes,

823
00:49:34,860 --> 00:49:39,250
et ces autocompletes sont vraiment, vraiment très pratique car nous n'avons pas à retenir -

824
00:49:39,250 --> 00:49:41,770
Par exemple, si vous ne me souviens pas du prix de l'action pour Apple

825
00:49:41,770 --> 00:49:45,110
et nous savons juste que c'est quelque chose aa, plutôt que de simplement dire à moi,

826
00:49:45,110 --> 00:49:48,740
"Une part de cette chose coûte tant d'argent»,

827
00:49:48,740 --> 00:49:52,540
Je peu comme de savoir ce que les stocks commencent par aa.

828
00:49:52,540 --> 00:49:58,340
Nous pouvons le faire vraiment bien avec la bibliothèque d'amorçage qui est déjà inclus

829
00:49:58,340 --> 00:50:01,380
l'intérieur du CS50 Finances.

830
00:50:01,380 --> 00:50:09,390
Si vous venez ici pour la balise JavaScript et faites défiler vers le bas pour typeahead,

831
00:50:09,390 --> 00:50:13,730
c'est juste un plugin agréable que quelqu'un a déjà écrit pour nous,

832
00:50:13,730 --> 00:50:16,980
et nous pouvons facilement utiliser sa fonctionnalité de ce genre.

833
00:50:16,980 --> 00:50:21,410
J'ai tapé un A et voici une liste de certains États qui commencent par la lettre A.

834
00:50:21,410 --> 00:50:25,360
Disons que je pense que c'est vraiment cool et il est temps pour moi de comprendre ce sur ma page.

835
00:50:25,360 --> 00:50:28,300
Il s'avère que c'est vraiment, vraiment simple.

836
00:50:28,300 --> 00:50:32,810
Ouvrons ici pour quote3.js.

837
00:50:34,890 --> 00:50:37,380
Mon fichier ressemble un peu différent.

838
00:50:37,380 --> 00:50:39,700
Ici-bas tous mes trucs AJAX est la même.

839
00:50:39,700 --> 00:50:43,170
Je veux charger les données de stock sans avoir à passer à une autre page.

840
00:50:43,170 --> 00:50:46,220
Mais maintenant je veux utiliser ce plugin.

841
00:50:46,220 --> 00:50:51,020
La documentation Bootstrap a d'excellents exemples de la façon dont je peux faire exactement cela.

842
00:50:51,020 --> 00:50:54,350
Je veux dire: «Voici l'entrée que je veux autocomplete sur"

843
00:50:54,350 --> 00:50:56,640
et je vais appeler cette fonction appelée typeahead,

844
00:50:56,640 --> 00:50:59,730
et qui va gérer tous les trucs typeahead pour nous.

845
00:50:59,730 --> 00:51:02,090
Il va initialiser la liste, il fera tout de nos filtrage.

846
00:51:02,090 --> 00:51:06,680
La seule chose qu'il a besoin de savoir est ce que les données nous sur autocompleting.

847
00:51:06,680 --> 00:51:10,480
Donc j'ai découvert cette touche juste en lisant la documentation et en regardant les exemples.

848
00:51:10,480 --> 00:51:14,150
Si je lui donne une touche de source, la valeur de cette clé

849
00:51:14,150 --> 00:51:17,770
est juste une série de choses que je veux saisie semi-automatique sur.

850
00:51:17,770 --> 00:51:20,180
Cette variable est venu de cette autre fichier.

851
00:51:20,180 --> 00:51:23,400
J'ouvre symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Cette symbols.js est juste ce tableau vraiment, vraiment grand contenant des chaînes

853
00:51:27,980 --> 00:51:32,080
de tous ces symboles boursiers du NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Si je veux revenir au HTML, de sorte jharvard, vhosts, globalhost, html, modèles,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Depuis ce qu'on appelle maintenant quote3.js, permettez-moi de modifier le fichier JavaScript j'inclus ici.

857
00:51:50,910 --> 00:51:55,110
Maintenant, je dois quote3.js, donc je vais charger dans ce fichier JavaScript séparé,

858
00:51:55,110 --> 00:51:57,910
celui qui a cette saisie semi-automatique Bootstrap.

859
00:51:57,910 --> 00:52:04,430
Maintenant, quand je revenir au navigateur, rechargez la page, et je commence à taper aa,

860
00:52:04,430 --> 00:52:06,880
il ya ma saisie semi-automatique. Et c'était vraiment aussi simple que cela.

861
00:52:06,880 --> 00:52:11,400
J'ai eu 1 ligne de code qui vient d'être dit, «Voici les choses que je veux autocomplete sur"

862
00:52:11,400 --> 00:52:16,590
et tout à coup j'ai cette fonctionnalité vraiment, vraiment sympa avec pas beaucoup d'effort.

863
00:52:16,590 --> 00:52:19,810
Comme vous développez des sites Web et particulièrement le côté frontal de choses,

864
00:52:19,810 --> 00:52:21,840
vous allez trouver que c'est le cas de beaucoup.

865
00:52:21,840 --> 00:52:25,700
Il ya beaucoup, beaucoup, beaucoup de bibliothèques gratuites vraiment cool là-bas

866
00:52:25,700 --> 00:52:30,190
qui font qu'il est super facile de faire des choses comme ça.

867
00:52:30,190 --> 00:52:37,230
Peut-on penser de tous les inconvénients de simplement autocompleting sur cette grande liste de symboles?

868
00:52:37,230 --> 00:52:41,580
Quel pourrait être quelque chose qui n'est pas le meilleur avec cette approche?

869
00:52:42,790 --> 00:52:45,960
Ouais. >> [L'élève] Le temps, si vous avez beaucoup de [inaudible]

870
00:52:45,960 --> 00:52:50,420
Ouais. Actuellement, nous sommes téléchargement de ce fichier JavaScript énorme et il ya beaucoup de symboles.

871
00:52:50,420 --> 00:52:54,360
Et si nous avons une tonne de choses, ce genre pourrait d'augmenter la latence non seulement de la recherche

872
00:52:54,360 --> 00:52:56,600
mais aussi télécharger le fichier réel.

873
00:52:56,600 --> 00:52:58,670
Grande. Rien d'autre?

874
00:53:01,950 --> 00:53:05,280
À l'heure actuelle il n'y a aucun sens réel de pertinence.

875
00:53:05,280 --> 00:53:08,190
Si je tape dans un A, les sociétés qui apparaissent ici

876
00:53:08,190 --> 00:53:11,220
pourraient ne pas être les entreprises les plus populaires qui commencent par la lettre A.

877
00:53:11,220 --> 00:53:17,130
>> Avant d'en arriver à Apple, il pourrait prendre encore quelques caractères pour trouver ce que je cherche.

878
00:53:17,130 --> 00:53:20,420
Cette saisie semi-automatique n'a pas ce sens de la pertinence.

879
00:53:20,420 --> 00:53:24,400
Il va tout simplement de dire: «Tout ce qui correspond, je vais à afficher."

880
00:53:24,400 --> 00:53:30,510
Au lieu de cela, je voudrais moyen d'intégrer une certaine pertinence dans mes recherches.

881
00:53:30,510 --> 00:53:36,440
Si je vais là-bas pour Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Si j'essaie d'entrer un symbole sur la page Yahoo! Finance

883
00:53:42,100 --> 00:53:52,310
et je commence à taper goog, j'ai cette belle liste de choses.

884
00:53:52,310 --> 00:53:57,100
De toute évidence, il ressemble Yahoo! Finance fait quelque chose de plus intelligent ici.

885
00:53:57,100 --> 00:53:59,790
Ils ont une certaine pertinence et ils ont aussi des informations supplémentaires

886
00:53:59,790 --> 00:54:01,430
comme le nom de l'action.

887
00:54:01,430 --> 00:54:05,850
C'est quelque chose que je ne peux pas vraiment avec juste ma liste de stock de symboles.

888
00:54:05,850 --> 00:54:09,520
Je veux cela et je vais le prendre.

889
00:54:09,520 --> 00:54:11,790
Pour ce faire, nous allons faire quelques petites choses.

890
00:54:11,790 --> 00:54:15,580
Voyons d'abord ouvrir l'inspecteur sur cette page

891
00:54:15,580 --> 00:54:18,100
car nous avons vu que cette page n'est pas du tout rechargement,

892
00:54:18,100 --> 00:54:21,960
il est donc probablement en utilisant AJAX en quelque sorte à charger ses données.

893
00:54:21,960 --> 00:54:23,920
Nous ne pouvons savoir quelles données il est chargé.

894
00:54:23,920 --> 00:54:28,390
Si je clique sur cet onglet Réseau, ceux-ci vont être toutes les demandes qui commencent à être tirés.

895
00:54:28,390 --> 00:54:34,020
Maintenant, si je tape dans goo, nous pouvons voir que je viens de recevoir une requête HTTP nouvelle.

896
00:54:34,020 --> 00:54:37,490
C'est probablement là que les données provenant d'.

897
00:54:37,490 --> 00:54:41,990
Effectivement, si je regarde cette URL, ce qui est un peu curieusement nommé,

898
00:54:41,990 --> 00:54:46,930
nous pouvons voir que c'est exactement là où Yahoo est l'envoi de ses données.

899
00:54:46,930 --> 00:54:53,400
>> J'ai créé un fichier distinct appelé suggest.php qui est très semblable dans l'esprit à la fonction de recherche.

900
00:54:53,400 --> 00:54:57,730
C'est fondamentalement va faire une requête à l'URL de Yahoo, obtenir certaines données,

901
00:54:57,730 --> 00:54:59,750
et de l'envoyer de nouveau à moi.

902
00:54:59,750 --> 00:55:02,570
Maintenant, plutôt que d'utiliser cette grosse énorme liste de symboles,

903
00:55:02,570 --> 00:55:05,280
Je peux utiliser des choses Yahoo pertinence belles,

904
00:55:05,280 --> 00:55:08,150
et je n'ai pas de télécharger ce fichier massif JavaScript.

905
00:55:08,150 --> 00:55:12,040
Je ne vais abattre les symboles de stocks effectivement pertinents.

906
00:55:12,040 --> 00:55:13,960
Débutons cela.

907
00:55:13,960 --> 00:55:17,360
Donc, html, js. Nous sommes maintenant en quote4.

908
00:55:17,360 --> 00:55:22,120
Maintenant, nous ne sommes plus en utilisant cette grande liste de fichiers JavaScript.

909
00:55:22,120 --> 00:55:24,430
Mais il ya une sorte de petit problème de conception ici.

910
00:55:24,430 --> 00:55:28,200
Nous avons dit que le A dans AJAX est asynchrone.

911
00:55:28,200 --> 00:55:31,000
Qu'est-ce que cela signifie, c'est que quand je fais une requête AJAX,

912
00:55:31,000 --> 00:55:36,490
donc ici sur la ligne 8, c'est là que ma requête AJAX est réellement lancé.

913
00:55:36,490 --> 00:55:40,370
Disons que maintenant, j'ai un peu de code ici-bas qui va faire des trucs

914
00:55:40,370 --> 00:55:43,930
comme alerter l'utilisateur ou changer quelque chose sur la page.

915
00:55:43,930 --> 00:55:49,830
Qu'est-ce qui ne va pas arriver, c'est le navigateur ne va pas attendre que cette demande de continuer

916
00:55:49,830 --> 00:55:53,480
avant de redescendre et de toucher cette ligne.

917
00:55:53,480 --> 00:55:55,900
C'est la partie asynchrone.

918
00:55:55,900 --> 00:55:58,400
Il va faire cette demande et dire: «Chaque fois que vous avez terminé,

919
00:55:58,400 --> 00:56:03,080
«Revenir et appeler cette fonction que je vous ai dit d'appeler à l'intérieur de la réussite."

920
00:56:03,080 --> 00:56:07,300
Cela signifie que nous ne pouvons pas vous suffit de télécharger tous les stocks à l'avance.

921
00:56:07,300 --> 00:56:10,300
Nous devons faire la demande et attendre que quelque chose de revenir.

922
00:56:10,300 --> 00:56:13,330
Cela signifie qu'avant, nous pourrions simplement dire Bootstrap,

923
00:56:13,330 --> 00:56:15,580
»Voici la liste des choses que je vous voulez saisie semi-automatique sur."

924
00:56:15,580 --> 00:56:18,950
Nous ne pouvons plus faire ça parce que nous ne savons pas

925
00:56:18,950 --> 00:56:21,780
ce que nous voulons réellement saisie semi-automatique sur.

926
00:56:21,780 --> 00:56:25,190
Heureusement, Bootstrap pensé à cela parce que ce sont les gars intelligents là-bas,

927
00:56:25,190 --> 00:56:30,160
et ils nous ont donné une autre réalité moyen de charger ce plugin typeahead.

928
00:56:30,160 --> 00:56:35,630
Avant, la valeur de cette propriété source était juste ce grand tableau de choses à saisie semi-automatique sur.

929
00:56:35,630 --> 00:56:39,580
>> Maintenant, la propriété source est en fait une fonction,

930
00:56:39,580 --> 00:56:44,580
et le but de cette fonction est de déterminer quelles sont les choses à saisie semi-automatique sur sont.

931
00:56:44,580 --> 00:56:48,730
La façon dont il va comprendre cela est-il va demander Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
quelles sont les meilleures choses à saisie semi-automatique sont.

933
00:56:51,750 --> 00:56:54,500
Pour ce faire, je vais faire une demande très similaire AJAX.

934
00:56:54,500 --> 00:56:59,010
Je vais demander à suggest.php cette page.

935
00:56:59,010 --> 00:57:01,360
Je veux envoyer le long des symboles encore.

936
00:57:01,360 --> 00:57:05,570
Et maintenant, mon succès, la documentation Bootstrap m'a dit

937
00:57:05,570 --> 00:57:09,130
que, afin de peupler cette liste de choses,

938
00:57:09,130 --> 00:57:14,370
tout ce que je dois faire est passer dans ce tableau maintenant à la fonction callback.

939
00:57:14,370 --> 00:57:15,660
Mais attendez une minute.

940
00:57:15,660 --> 00:57:20,240
Si cela est censé être un tableau et AJAX est me renvoyer le texte,

941
00:57:20,240 --> 00:57:22,720
comment est-ce possible?

942
00:57:22,720 --> 00:57:27,910
Cela introduit une nouvelle façon d'échanger des données JSON appelés.

943
00:57:27,910 --> 00:57:33,000
Dans ce cas, nous ne sommes pas seulement renvoyer une simple chaîne de texte.

944
00:57:33,000 --> 00:57:37,670
Maintenant, nous avons affaire à cette liste plus complexe de symboles boursiers.

945
00:57:37,670 --> 00:57:41,730
Ces symboles d'actions peuvent également inclure des choses comme le nom de l'entreprise ou les prix courants.

946
00:57:41,730 --> 00:57:47,550
Tout en utilisant une grande chaîne longue qui n'est pas formaté en aucune manière prévisible

947
00:57:47,550 --> 00:57:51,970
ne va pas être la meilleure façon d'obtenir ces données à partir du serveur de Yahoo pour moi

948
00:57:51,970 --> 00:57:54,540
d'une manière que je peux facilement comprendre.

949
00:57:54,540 --> 00:58:01,280
JSON est une technologie qui tire parti de la façon dont nous créer des tableaux associatifs en JavaScript.

950
00:58:01,280 --> 00:58:04,510
Cela ressemble beaucoup à un tableau associatif JavaScript,

951
00:58:04,510 --> 00:58:06,600
et en fait, c'est parce qu'il est.

952
00:58:06,600 --> 00:58:09,710
JSON est synonyme de JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Il s'agit essentiellement d'un format convenu pour transférer des données dans les deux sens.

954
00:58:15,020 --> 00:58:18,280
Voici cet objet JSON JSON ou du présent tableau associatif

955
00:58:18,280 --> 00:58:21,010
envoie-moi quelques données sur un cours.

956
00:58:21,010 --> 00:58:25,110
>> Les clés de ce tableau sont des choses comme cours qui a une valeur de CS50,

957
00:58:25,110 --> 00:58:29,140
et ici nous pouvons voir que je peux avoir une valeur qui est un tableau.

958
00:58:29,140 --> 00:58:32,730
Je n'ai pas à faire des choses comme parse sur cordes et de chercher des virgules

959
00:58:32,730 --> 00:58:35,330
et faire des choses folles comme ça.

960
00:58:35,330 --> 00:58:38,820
Parce que cela est déclaré dans ce format JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript et jQuery déjà des fonctions pour convertir une chaîne

962
00:58:43,510 --> 00:58:48,140
qui ressemble à ceci JSON dans un tableau associatif JavaScript réelle

963
00:58:48,140 --> 00:58:50,440
que nous pouvons travailler avec.

964
00:58:50,440 --> 00:58:56,660
Faire cela est aussi simple que de dire qui n'est plus ce fichier, suggest.php,

965
00:58:56,660 --> 00:58:59,040
me renvoyer simplement une chaîne de texte,

966
00:58:59,040 --> 00:59:01,950
mais je sais que ça va être me renvoyer JSON.

967
00:59:01,950 --> 00:59:06,760
Cela signifie que ce que JSON peut être converti en un tableau associatif JavaScript.

968
00:59:06,760 --> 00:59:10,830
Et si jQuery, je voudrais que tu fasses ça pour moi.

969
00:59:10,830 --> 00:59:13,990
Cela signifie que ce paramètre de réponse ici,

970
00:59:13,990 --> 00:59:16,070
ce n'est plus seulement une chaîne.

971
00:59:16,070 --> 00:59:19,860
Parce que nous avons dit jQuery qui vient ici quelques JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery va être assez intelligent pour dire: «Vous avez voulu JSON?"

973
00:59:22,950 --> 00:59:26,890
«Je vais convertir en un tableau associatif pour vous."

974
00:59:26,890 --> 00:59:32,100
Nous allons effectivement jeter un oeil à l'onglet Réseau une fois que nous avons quote4.js.

975
00:59:32,100 --> 00:59:35,400
Nous allons changer cela et rechargez la page.

976
00:59:37,150 --> 00:59:41,250
Maintenant, je vais taper un nouveau-un.

977
00:59:41,250 --> 00:59:45,600
J'ai fait une couple lui demande à suggest.php, mais maintenant cette réponse,

978
00:59:45,600 --> 00:59:48,670
plutôt que de simplement la chaîne, c'est JSON.

979
00:59:48,670 --> 00:59:52,580
J'ai donc une accolade ouvrante disant: «Voici un tableau associatif."

980
00:59:52,580 --> 00:59:56,830
>> La première clé et seulement de ce tableau associatif est appelé symboles,

981
00:59:56,830 --> 01:00:00,240
puis est ici un ensemble de tous les symboles pertinents

982
01:00:00,240 --> 01:00:04,820
vient maintenant de Yahoo! Finance, et non pas à partir de cette liste gigantesque.

983
01:00:06,110 --> 01:00:10,630
C'est comme ça que je peux simplement remplir ce plugin autocomplete

984
01:00:10,630 --> 01:00:14,280
avec des données qui ne viennent pas d'un fichier local qui est déjà prédéterminé

985
01:00:14,280 --> 01:00:17,490
mais de quelque chose d'autre.

986
01:00:17,490 --> 01:00:21,160
Il s'avère que nous pouvons profiter d'une technologie appelée JSONP,

987
01:00:21,160 --> 01:00:27,420
ou JSON avec un rembourrage, qui permettra d'éliminer cet intermédiaire suggest.php.

988
01:00:27,420 --> 01:00:34,010
Mais au lieu de cela, nous allons plutôt jeter un oeil à la façon dont je peux améliorer cela encore plus.

989
01:00:34,010 --> 01:00:36,040
J'aime vraiment typeahead Bootstrap a. C'est vraiment agréable.

990
01:00:36,040 --> 01:00:39,570
Mais n'allons pas trop bon à JavaScript et nous voulons sorte de le faire nous-mêmes,

991
01:00:39,570 --> 01:00:43,870
peut-être jeter un oeil à ce que ce plugin pourrait faire.

992
01:00:43,870 --> 01:00:46,500
Laissez-est de ne plus utiliser ce truc typeahead,

993
01:00:46,500 --> 01:00:50,550
et nous allons essayer de mettre cette liste de valeurs suggérées nous-mêmes.

994
01:00:50,550 --> 01:00:53,790
Ici, dans quote6.php nous allons commencer de la même manière.

995
01:00:53,790 --> 01:00:58,050
Chaque fois que quelqu'un tape quelque chose, nous voulons faire une requête AJAX.

996
01:00:58,050 --> 01:01:01,590
Ceci est similaire à notre origine CS50 instantanée Finances.

997
01:01:01,590 --> 01:01:05,020
Plutôt que de faire une demande de quote.php,

998
01:01:05,020 --> 01:01:08,530
nous sommes en train de faire une demande en ce même fichier que précédemment, ce suggest.php,

999
01:01:08,530 --> 01:01:12,460
qui va juste pour extraire des données de Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Encore une fois, nous sommes toujours en attente JSON, mais maintenant, depuis le typeahead ne le fait pas pour nous,

1001
01:01:19,480 --> 01:01:24,850
nous avons également besoin d'envoyer le long de la valeur qui est à l'intérieur de la zone de texte courant.

1002
01:01:24,850 --> 01:01:28,120
Maintenant, nous savons ce qu'il faut demander Yahoo! Finance pour,

1003
01:01:28,120 --> 01:01:34,160
et maintenant voici la fonction que nous voulons exécuter une fois la demande terminée.

1004
01:01:34,160 --> 01:01:36,520
Nous n'avons pas le plugin pour faire la liste pour nous,

1005
01:01:36,520 --> 01:01:40,630
si c'est là que nous allons en fait de construire une liste de suggestions.

1006
01:01:40,630 --> 01:01:44,850
Pour ce faire, un peu comme en PHP, nous concaténés ces chaînes de grands HTML

1007
01:01:44,850 --> 01:01:48,170
puis nous les faire imprimer, nous pouvons faire exactement la même chose en JavaScript.

1008
01:01:48,170 --> 01:01:51,850
D'abord, nous allons commencer cette chaîne appelée suggestions,

1009
01:01:51,850 --> 01:01:54,590
et cette chaîne va juste pour contenir du code HTML.

1010
01:01:54,590 --> 01:01:58,320
Nous voulons que ce soit une liste de choses, donc nous allons commencer avec ce tag liste,

1011
01:01:58,320 --> 01:02:03,340
et maintenant nous allons itérer sur tous les symboles qui ont été retournés de nouveau à nous.

1012
01:02:03,340 --> 01:02:06,500
Rappelez-vous, parce que nous avons dit dataType: "json", ce n'est pas une chaîne.

1013
01:02:06,500 --> 01:02:09,500
C'est déjà un tableau pour nous. C'est vraiment cool.

1014
01:02:09,500 --> 01:02:13,790
Nous pouvons simplement dire: «Je veux que vous pour ajouter un élément de la liste."

1015
01:02:13,790 --> 01:02:16,000
Nous allons le mettre à l'intérieur d'un élément dans un côté de cela,

1016
01:02:16,000 --> 01:02:19,030
nous allons lui donner une classe de suggestions afin que nous sachions ce qu'elle est,

1017
01:02:19,030 --> 01:02:23,880
et maintenant voici le symbole que nous sommes rentrés de Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Une fois que nous avons créé un élément de chacun des symboles que nous avons décidé de remonter,

1019
01:02:27,230 --> 01:02:30,100
nous voulons juste fermer la liste.

1020
01:02:30,100 --> 01:02:33,040
Alors maintenant, suggestions représente ce petit fragment HTML

1021
01:02:33,040 --> 01:02:37,860
qui, posée sur une page va être la liste des choses que nous recherchons.

1022
01:02:37,860 --> 01:02:41,070
Maintenant, nous allons effectivement mis que sur la page.

1023
01:02:41,070 --> 01:02:46,390
Pour ce faire, j'ai effectivement créé un autre div vide et je lui ai donné un ID de suggestions.

1024
01:02:46,390 --> 01:02:52,520
Tout comme nous avons mis le contenu de la div qui affichent le prix des données sur les stocks,

1025
01:02:52,520 --> 01:02:58,600
nous avons juste à définir le contenu de ce div à ce que cette chaîne est

1026
01:02:58,600 --> 01:03:00,290
qui contient les symboles.

1027
01:03:00,290 --> 01:03:07,650
En utilisant cette méthode HTML, cette variable suggestions, cette chaîne est une chaîne HTML.

1028
01:03:07,650 --> 01:03:13,490
Je veux que vous preniez que le HTML et le mettre dans la div appelle suggestions.

1029
01:03:13,490 --> 01:03:15,680
Nous venons tout juste ajouté quelque chose au DOM maintenant.

1030
01:03:15,680 --> 01:03:20,360
Nous avons ajouté quelques nouveaux éléments au DOM que nous pouvons maintenant afficher sur la page.

1031
01:03:20,360 --> 01:03:22,540
Voyons voir à quoi cela ressemble.

1032
01:03:22,540 --> 01:03:29,110
Si nous chargeons de quote6 et maintenant nous revenons,

1033
01:03:29,110 --> 01:03:34,480
maintenant, quand je commence à taper AAPL, nous n'avons plus que Bootstrap saisie semi-automatique,

1034
01:03:34,480 --> 01:03:38,470
mais nous avons maintenant cette liste que nous avons nous-mêmes fait.

1035
01:03:38,470 --> 01:03:43,230
C'est un peu plus laid que le typeahead Bootstrap, par exemple,

1036
01:03:43,230 --> 01:03:45,580
mais il ne nous permettent de faire autre chose.

1037
01:03:45,580 --> 01:03:48,660
Quand nous cherchions à ce plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
nous avons vu que lorsque nous autocompleted, l'une des valeurs saisie semi-automatique a été AAPL.

1039
01:03:52,590 --> 01:03:54,820
Cela pourrait ne pas être si utile.

1040
01:03:54,820 --> 01:03:59,100
En tant qu'utilisateur, je ne pourrais pas reconnaître immédiatement tous les symboles boursiers.

1041
01:03:59,100 --> 01:04:02,370
Ce que je suis probablement plus susceptibles de reconnaître des noms réels de la société.

1042
01:04:02,370 --> 01:04:05,310
Donc, ça ne serait pas vraiment utile si plutôt que de dire AAPL

1043
01:04:05,310 --> 01:04:07,970
cela dit quelque chose comme Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Parce que nous avons roulé nous-mêmes, nous pouvons très facilement le faire.

1045
01:04:12,240 --> 01:04:17,630
Ouvrons notre fichier dernière citation ici, donc quote7.

1046
01:04:17,630 --> 01:04:23,200
>> C'est la même chose. Je viens de créer un autre fichier PHP qui va nous retourner plus que les symboles.

1047
01:04:23,200 --> 01:04:25,550
Il nous donnera aussi de retour noms de l'entreprise.

1048
01:04:25,550 --> 01:04:28,150
Et si nous faisons la même chose. Nous faisons une requête AJAX.

1049
01:04:28,150 --> 01:04:32,370
Une fois la demande complétée, nous allons exécuter cette fonction ici,

1050
01:04:32,370 --> 01:04:36,520
et cette fonction va construire une grande chaîne d'éléments.

1051
01:04:36,520 --> 01:04:39,520
Mais la différence ici est que la valeur de ces listes n'est plus seulement le symbole,

1052
01:04:39,520 --> 01:04:45,370
c'est maintenant le nom.

1053
01:04:45,370 --> 01:04:47,070
Donc, nous avons un petit problème.

1054
01:04:47,070 --> 01:04:51,590
Lorsque nous utilisons notre recherche, il nous faut en quelque sorte passer le symbole.

1055
01:04:51,590 --> 01:04:54,950
Nous ne pouvons pas passer à quelque chose de la recherche, comme Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Nous devons lui passer MSFT.

1057
01:04:57,900 --> 01:05:01,640
Lorsque nous écrivons HTML, nous avons beaucoup de belles intégré dans les attributs.

1058
01:05:01,640 --> 01:05:05,440
Un A peut-être associé à un href ou une classe.

1059
01:05:05,440 --> 01:05:08,230
Mais ce dont nous avons besoin maintenant, c'est pour chacun de ces liens

1060
01:05:08,230 --> 01:05:11,120
d'avoir un symbole qui lui est associé.

1061
01:05:11,120 --> 01:05:14,240
Il n'y a aucun attribut prédéfini HTML pour symbole boursier,

1062
01:05:14,240 --> 01:05:21,010
mais heureusement, HTML5 nous permet de créer nos propres attributs pour être ce que nous voulons.

1063
01:05:21,010 --> 01:05:24,620
En disant symbole de données, j'ai introduit un nouvel attribut

1064
01:05:24,620 --> 01:05:29,350
dont le nom que je viens d'inventer, et c'est bien parce que je l'ai fait précéder ces données.

1065
01:05:29,350 --> 01:05:34,270
Nous allons stocker à l'intérieur de là le symbole du stock maintenant.

1066
01:05:34,270 --> 01:05:39,590
Ce que cela signifie, c'est que même si nous sommes d'afficher la valeur du nom de l'entreprise

1067
01:05:39,590 --> 01:05:43,380
à l'intérieur de notre auto-complétion, nous sommes toujours en se rappelant le symbole

1068
01:05:43,380 --> 01:05:47,110
qui est associée à chaque entreprise.

1069
01:05:47,110 --> 01:05:50,350
La façon dont nous le faisons est à l'intérieur de cet élément lui-même.

1070
01:05:50,350 --> 01:05:52,930
Cela signifie donc que nous devons faire encore un changement.

1071
01:05:52,930 --> 01:05:57,090
Quand nous l'avons cliquez maintenant, nous devons effectivement profiter de l'attribut de symbole

1072
01:05:57,090 --> 01:06:00,220
plutôt que sa valeur.

1073
01:06:00,220 --> 01:06:05,010
Si nous soutenons, nous attachons un gestionnaire d'événements aux suggestions.

1074
01:06:05,010 --> 01:06:09,280
Chaque fois que l'une de ces suggestions est cliqué maintenant, je veux faire quelque chose.

1075
01:06:09,280 --> 01:06:13,160
Ce que je veux faire est de changer la valeur de cette zone de saisie.

1076
01:06:13,160 --> 01:06:16,100
Maintenant, je veux régler cette fonction val même.

1077
01:06:16,100 --> 01:06:21,060
>> Donc, sans aucun argument de cette fonction val revient vers vous ce qui est déjà dans la zone de texte,

1078
01:06:21,060 --> 01:06:27,070
mais si vous lui donnez une chaîne, il va prendre cette chaîne et le placer dans la zone de texte.

1079
01:06:27,070 --> 01:06:28,980
Je sélectionne la zone de texte de la même manière.

1080
01:06:28,980 --> 01:06:31,230
Son nom est à l'intérieur de la forme-symbole devis.

1081
01:06:31,230 --> 01:06:37,540
Maintenant, je lui envoyant la valeur de l'attribut de symbole de données.

1082
01:06:37,540 --> 01:06:41,560
Cette chose ici est nouveau, ce $ (this).

1083
01:06:41,560 --> 01:06:46,850
De quoi il s'agit est l'élément qui a été cliqué.

1084
01:06:46,850 --> 01:06:50,880
Nous pouvons voir ici que nous ne sommes pas attacher un événement de clic

1085
01:06:50,880 --> 01:06:54,690
à chaque élément avec une classe de suggestion individuellement.

1086
01:06:54,690 --> 01:06:57,140
Au contraire, nous nous approchons de cela un peu différemment.

1087
01:06:57,140 --> 01:07:01,700
Au lieu de cela, nous disons chaque fois à l'intérieur quelque chose de ce div suggestions,

1088
01:07:01,700 --> 01:07:04,080
rappelez-vous ce qui est juste le conteneur pour cette liste,

1089
01:07:04,080 --> 01:07:10,150
si quelque chose à l'intérieur de ce div est cliqué et il a une classe de suggestion,

1090
01:07:10,150 --> 01:07:13,000
Je veux cet événement au feu.

1091
01:07:13,000 --> 01:07:17,490
Fondamentalement, ce que cela signifie que nous pouvons faire est que nous pouvons utiliser ce gestionnaire d'événement

1092
01:07:17,490 --> 01:07:20,000
pour toutes les choses de la liste.

1093
01:07:20,000 --> 01:07:22,080
Donc, nous n'avons pas besoin d'avoir un gestionnaire d'événements pour le premier élément

1094
01:07:22,080 --> 01:07:24,550
et un gestionnaire d'événements différent pour le second élément.

1095
01:07:24,550 --> 01:07:29,880
Nous pouvons plutôt dire: «Je veux le gestionnaire d'événement à s'appliquer à tout dans ma liste."

1096
01:07:29,880 --> 01:07:34,420
Mais nous devons en quelque sorte savoir quel élément a été cliqué.

1097
01:07:34,420 --> 01:07:38,450
Cette "ce" mot-clé représente exactement cela.

1098
01:07:38,450 --> 01:07:42,360
C'est l'objet qui vient d'être cliqué par l'utilisateur.

1099
01:07:42,360 --> 01:07:47,680
Si je clique sur le lien 3e, ce qui représente l'élément de ce lien 3e,

1100
01:07:47,680 --> 01:07:51,670
ce qui signifie que je peux obtenir son attribut, symbole de données,

1101
01:07:51,670 --> 01:07:57,760
que nous connaissons doit contenir le symbole qui est associé à l'entreprise que j'ai juste cliqué.

1102
01:07:57,760 --> 01:08:04,550
Si nous revenir à notre page d'finances,

1103
01:08:04,550 --> 01:08:08,580
nous pouvons voir maintenant que lorsque je commence à taper quelque chose comme msft,

1104
01:08:08,580 --> 01:08:11,220
nous ne sommes plus seulement obtenir les symboles boursiers,

1105
01:08:11,220 --> 01:08:13,720
nous recevons maintenant des sociétés réelles.

1106
01:08:13,720 --> 01:08:20,410
Mais lorsque je clique sur une de ces sociétés,

1107
01:08:20,410 --> 01:08:25,180
nous pouvons voir que nous sommes réellement remplir la zone de texte non par le nom de l'entreprise

1108
01:08:25,180 --> 01:08:29,850
mais avec tout ce qui était stocké à l'intérieur de ces attributs de données.

1109
01:08:29,850 --> 01:08:32,880
Et si je fait inspecter un de ces éléments en cliquant droit dessus

1110
01:08:32,880 --> 01:08:36,200
Inspectez et en cliquant sur l'élément, nous pouvons voir à quoi cela ressemble.

1111
01:08:36,200 --> 01:08:40,290
>> Rappelez-vous que c'est quelque chose que nous avons créé à l'intérieur de cette boucle for

1112
01:08:40,290 --> 01:08:42,649
lorsque nous avons construit jusqu'à cette chaîne de HTML.

1113
01:08:42,649 --> 01:08:47,870
Nous pouvons voir ici que ce symbole de données a la valeur d'MSFT, qui est grand.

1114
01:08:47,870 --> 01:08:49,189
C'est ce que nous attendions.

1115
01:08:49,189 --> 01:08:53,170
C'est le symbole et c'est comme ça que nous avons obtenu la valeur que nous avions besoin d'utiliser

1116
01:08:53,170 --> 01:08:56,140
l'intérieur de cette zone de texte.

1117
01:08:56,140 --> 01:08:58,850
C'est suffisant pour le formulaire de soumission, parce que c'est un peu ennuyeux.

1118
01:08:58,850 --> 01:09:02,990
Disons simplement faire quelques améliorations rapides à notre page de portefeuille.

1119
01:09:02,990 --> 01:09:08,109
Si vous avez utilisé CS50 Finances pendant un certain temps et vous commencez à acheter et à vendre un grand nombre de stocks,

1120
01:09:08,109 --> 01:09:11,300
finalement cette table va devenir assez grand,

1121
01:09:11,300 --> 01:09:13,850
et vous allez avoir un téléscripteur, bien sûr.

1122
01:09:13,850 --> 01:09:20,350
Une fois que la table est vraiment, vraiment grand, il pourrait être utile pour l'utilisateur d'essayer de chercher sur elle.

1123
01:09:20,350 --> 01:09:23,290
A l'intérieur du champ de recherche si je commence à taper quelque chose comme Disney

1124
01:09:23,290 --> 01:09:26,359
et la recherche de mon stock de Mickey Mouse, nous pouvons voir que la table est maintenant de filtrage

1125
01:09:26,359 --> 01:09:28,189
d'après ce que je viens de tapé po

1126
01:09:28,189 --> 01:09:31,640
Cette fonctionnalité semble super compliqué, mais c'est vraiment, vraiment facile

1127
01:09:31,640 --> 01:09:33,859
avec jQuery et JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Ce fichier comprend portfolio.php un fichier JavaScript appelé portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Jetons un coup d'oeil.

1130
01:09:41,130 --> 01:09:44,890
Donc, html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
C'est là que nous faisons que la recherche sur la table.

1132
01:09:49,210 --> 01:09:52,750
La première chose que je dois faire, c'est attacher un gestionnaire d'événement pour cette zone de texte

1133
01:09:52,750 --> 01:09:55,760
parce que nous savons que nous voulons que notre fonction de filtrage au feu

1134
01:09:55,760 --> 01:09:59,800
chaque fois que l'utilisateur appuie sur quelque chose parce que nous n'avons pas le temps pour les boutons de recherche.

1135
01:09:59,800 --> 01:10:03,000
La première chose que nous devons faire est de déterminer ce que l'utilisateur est à la recherche,

1136
01:10:03,000 --> 01:10:04,780
tout comme nous le faisions auparavant.

1137
01:10:04,780 --> 01:10:11,320
Ce mot clé renvoie à l'élément courant l'utilisateur interagit avec.

1138
01:10:11,320 --> 01:10:14,070
>> Parce que l'utilisateur interagit avec le champ de recherche,

1139
01:10:14,070 --> 01:10:17,020
$ Ce qui représente la zone de recherche,

1140
01:10:17,020 --> 01:10:21,820
si this.val nous donne ce qu'il ya dedans de la boîte de recherche de l'utilisateur est en train de taper.

1141
01:10:22,810 --> 01:10:27,320
Donc, maintenant ce que nous voulons faire, c'est que nous voulons pour itérer sur toutes les lignes

1142
01:10:27,320 --> 01:10:29,240
à l'intérieur de notre table.

1143
01:10:29,240 --> 01:10:35,630
Pour sélectionner toutes les lignes dans le tableau, j'ai donné cette table une pièce d'identité du portefeuille de table,

1144
01:10:35,630 --> 01:10:39,060
et chaque ligne est représenté par un élément de TR,

1145
01:10:39,060 --> 01:10:42,080
si ce sélecteur va revenir pour moi un grand tableau

1146
01:10:42,080 --> 01:10:44,370
de toutes les lignes dans ma table.

1147
01:10:44,370 --> 01:10:47,010
Maintenant, je veux itérer sur ce tableau.

1148
01:10:47,010 --> 01:10:52,390
Je pourrais vous une boucle for, mais jQuery fournit en fait nous la fonction de bien appelé «chacun».

1149
01:10:52,390 --> 01:10:55,220
Ce que chacun fait, c'est chacun prend un argument,

1150
01:10:55,220 --> 01:10:57,090
et que l'argument est une fonction.

1151
01:10:57,090 --> 01:11:02,760
Qu'est-ce que ça va faire, c'est que ça va appliquer cette fonction à chaque élément à l'intérieur de cette liste.

1152
01:11:02,760 --> 01:11:05,550
Cette fonction prend un argument qui est e,

1153
01:11:05,550 --> 01:11:10,090
et lorsque cette fonction est exécutée, ce e va être remplacée par la première rangée,

1154
01:11:10,090 --> 01:11:12,070
puis la deuxième rangée, puis la troisième rangée.

1155
01:11:12,070 --> 01:11:15,150
De cette manière, c'est la même chose que l'exécution d'une boucle for

1156
01:11:15,150 --> 01:11:21,360
et ensuite réfléchir à l'élément actuel, basé sur l'index de votre intérieur de la boucle.

1157
01:11:21,360 --> 01:11:24,750
À chaque itération, pour chacune de ces éléments dans le tableau,

1158
01:11:24,750 --> 01:11:30,560
Je veux vérifier si le texte de l'élément - le texte de la cellule à l'intérieur de la ligne -

1159
01:11:30,560 --> 01:11:33,130
correspond à ce que je recherche.

1160
01:11:33,130 --> 01:11:36,390
Cette grande chaîne longue de commandes est de savoir comment je pourrais le faire.

1161
01:11:36,390 --> 01:11:40,900
Tout d'abord, encore une fois, il s'agit maintenant de - parce que c'est à l'intérieur d'une nouvelle fonction -

1162
01:11:40,900 --> 01:11:45,020
c'est maintenant la ligne en cours dans la table.

1163
01:11:45,020 --> 01:11:47,340
Je veux prendre la ligne courante de la table,

1164
01:11:47,340 --> 01:11:49,950
et je veux obtenir tous ses enfants.

1165
01:11:49,950 --> 01:11:51,940
Rappelez-vous, le DOM est un arbre hiérarchique,

1166
01:11:51,940 --> 01:11:54,200
ce qui signifie que les éléments ont un nombre d'enfants.

1167
01:11:54,200 --> 01:12:00,180
>> Cette fonction. Enfants va me revenir en arrière d'un tableau de tous les éléments

1168
01:12:00,180 --> 01:12:03,240
qui sont les enfants d', dans ce cas, une ligne dans la table.

1169
01:12:03,240 --> 01:12:07,150
Il s'agit tout simplement les cellules à l'intérieur de la ligne.

1170
01:12:07,150 --> 01:12:09,230
Je veux juste chercher sur la première cellule.

1171
01:12:09,230 --> 01:12:13,090
Cette fonction. Premier dit de me donner le premier élément de ce tableau.

1172
01:12:13,090 --> 01:12:17,070
Ensuite, la fonction texte dit exactement ce que me trouve à l'intérieur de cette cellule

1173
01:12:17,070 --> 01:12:19,530
puisque je veux effectuer une recherche sur ce texte.

1174
01:12:19,530 --> 01:12:21,040
Enfin, nous allons convertir en minuscules,

1175
01:12:21,040 --> 01:12:23,940
afin que nous puissions faire des requêtes de cas de texte insensibles.

1176
01:12:23,940 --> 01:12:29,990
Enfin, nous voulons voir si cette chaîne à l'intérieur d'une table contient la chaîne que nous cherchons.

1177
01:12:29,990 --> 01:12:32,980
La fonction indexOf en JavaScript est là pour ça.

1178
01:12:32,980 --> 01:12:37,060
Il nous dit si oui ou non cette chaîne contient une autre chaîne.

1179
01:12:37,060 --> 01:12:40,150
S'il est vrai que la cellule contient ce que je cherche,

1180
01:12:40,150 --> 01:12:42,140
alors je veux m'assurer que c'est indiqué.

1181
01:12:42,140 --> 01:12:45,330
La méthode show va dire: «Montrez l'élément."

1182
01:12:45,330 --> 01:12:50,350
Si ce n'est pas le cas, alors cela signifie que tout ce que je cherche n'est pas contenue

1183
01:12:50,350 --> 01:12:53,550
au sein de cette ligne, et je tiens donc à cacher, c'est à l'utilisateur.

1184
01:12:53,550 --> 01:12:59,240
Qui permet d'obtenir cet effet de filtrage agréable où plus nous voir l'ensemble du tableau.

1185
01:12:59,240 --> 01:13:01,480
Si vous êtes intéressé par la façon de faire de ce symbole, ainsi,

1186
01:13:01,480 --> 01:13:04,180
nous afficherons la source en ligne. Mais il est vraiment simple.

1187
01:13:04,180 --> 01:13:09,860
JQuery a des méthodes impressionnantes pour ces animations et la manipulation des propriétés CSS.

1188
01:13:09,860 --> 01:13:11,020
Donc, c'est ça pour moi.

1189
01:13:11,020 --> 01:13:15,560
>> Qu'y at-il donc venir? Comme vous le verrez dans quelques jours, la proposition finale des projets est due.

1190
01:13:15,560 --> 01:13:17,730
La proposition finale projets vous poser quelques questions,

1191
01:13:17,730 --> 01:13:19,420
mais parmi eux aura trois étapes -

1192
01:13:19,420 --> 01:13:22,840
de lui une «bonne» étape, un jalon de mieux, et un best.

1193
01:13:22,840 --> 01:13:25,870
L'idée étant vraiment vous aider les gars définir vos attentes

1194
01:13:25,870 --> 01:13:29,160
de sorte que très peu, vous serez heureux avec la sortie de votre projet final

1195
01:13:29,160 --> 01:13:32,060
et il sera «bon» pour autant que vous êtes concerné.

1196
01:13:32,060 --> 01:13:34,540
Mais alors, dans l'intérêt de vous amener à atteindre un tout petit peu de quelque chose de mieux

1197
01:13:34,540 --> 01:13:37,680
ou quelque chose de mieux, nous allons également trier de vous pousser vers cela aussi.

1198
01:13:37,680 --> 01:13:40,660
Le CS50 Hack-a-thon, quant à lui, est dans quelques semaines.

1199
01:13:40,660 --> 01:13:44,340
En général, nous le faisons sur une base par tirage au sort en raison de l'intérêt,

1200
01:13:44,340 --> 01:13:47,680
mais les chances sont que nous allons prendre quelques centaines d'entre nous dans des navettes de Harvard Square

1201
01:13:47,680 --> 01:13:51,540
vers le bas pour Kendall Square, où Microsoft a une belle installation justement appelé "NERD" -

1202
01:13:51,540 --> 01:13:53,830
la Nouvelle-Angleterre et de la recherche du Centre de développement.

1203
01:13:53,830 --> 01:13:56,380
Nous allons y arriver vers 8 heures, nous aurons un peu de nourriture.

1204
01:13:56,380 --> 01:13:58,160
Environ 1 heures, nous aurons un peu plus de nourriture.

1205
01:13:58,160 --> 01:14:02,150
Environ 5 heures du matin si vous êtes encore éveillé, nous nous dirigerons vers IHOP ou vous emmener vers le campus.

1206
01:14:02,150 --> 01:14:04,380
L'objectif est d'y plonger dans des projets finaux

1207
01:14:04,380 --> 01:14:06,190
aux côtés de ses camarades de classe et le personnel.

1208
01:14:06,190 --> 01:14:08,280
Puis, quelques jours plus tard, est la Foire CS50,

1209
01:14:08,280 --> 01:14:10,990
qui est vraiment destiné à être une opportunité pour vous les gars pour présenter votre travail

1210
01:14:10,990 --> 01:14:12,700
et réalisations pour le semestre

1211
01:14:12,700 --> 01:14:15,610
tout en côtoyant les uns avec les autres et se faire une idée de ce que chacun fait.

1212
01:14:15,610 --> 01:14:17,850
Cela dit, un grand merci à Tommy et à Joseph,

1213
01:14:17,850 --> 01:14:19,960
et nous vous verrai lundi.

1214
01:14:19,960 --> 01:14:24,070
 [Applaudissements]