1
00:00:00,000 --> 00:00:00,127

2
00:00:00,127 --> 00:00:01,210
DAVID J. Malan: Très bien.

3
00:00:01,210 --> 00:00:02,160
Nous sommes de retour.

4
00:00:02,160 --> 00:00:05,810
Ainsi, l'objectif de cette dernière session
est d'introduire un peu plus de concepts

5
00:00:05,810 --> 00:00:09,290
mais aussi donner une chance à tous
au genre d'étirer vos doigts

6
00:00:09,290 --> 00:00:11,270
et effectivement faire quelque chose
un peu pratique.

7
00:00:11,270 --> 00:00:13,897
Le but est de ne pas tourner
nous tous dans les développeurs web

8
00:00:13,897 --> 00:00:16,230
par tout moyen, mais vraiment juste
pour vous donner un avant-goût de certains

9
00:00:16,230 --> 00:00:21,750
des constructions fondamentales de ce que
va dans la programmation web et aujourd'hui web

10
00:00:21,750 --> 00:00:23,980
développement, de sorte que le
côté statique de things--

11
00:00:23,980 --> 00:00:26,660
aucune logique, aucune programmation
la langue, tout le contenu statique.

12
00:00:26,660 --> 00:00:29,660
Et cela nous donnera l'occasion
de voir réellement ce qu'est un serveur web est,

13
00:00:29,660 --> 00:00:34,140
voir ce qu'est un fichier HTML est, voir ce que
il est HTTP est effectivement un service vers le haut.

14
00:00:34,140 --> 00:00:38,600
Mais avant de nous plonger dans, toute rétrospective
questions sur le cloud computing

15
00:00:38,600 --> 00:00:43,922
ou à la sécurité ou quelque chose entre les deux?

16
00:00:43,922 --> 00:00:44,890
>> Non?

17
00:00:44,890 --> 00:00:47,181
Bon, eh bien, nous allons
faire, juste au cas où

18
00:00:47,181 --> 00:00:49,680
le processus de signature pour
quelque chose prend quelques minutes.

19
00:00:49,680 --> 00:00:51,221
Nous laissons le faire en arrière-plan.

20
00:00:51,221 --> 00:00:56,860
Allez-y, si vous pouviez,
au c9.io. de cette URL

21
00:00:56,860 --> 00:01:02,810
Ceci est un tiers Clients--
la plate-forme en tant que service, si vous will--

22
00:01:02,810 --> 00:01:05,190
qui va vous inviter
pour vous inscrire à un compte,

23
00:01:05,190 --> 00:01:08,650
et il va donner à chacun de vous
un compte dans le nuage que l'on appelle

24
00:01:08,650 --> 00:01:11,330
sur l'infrastructure de quelqu'un d'autre,
une société appelée Cloud9.

25
00:01:11,330 --> 00:01:13,350
Mais ce qui est agréable au sujet
est qu'ils vous donnent

26
00:01:13,350 --> 00:01:15,990
une approximation d'un
développement réel du monde réel

27
00:01:15,990 --> 00:01:18,530
environnement, bien que dans le
nuée et dans un navigateur Web,

28
00:01:18,530 --> 00:01:21,175
et nous allons utiliser ce réellement
expérimenter un peu aujourd'hui.

29
00:01:21,175 --> 00:01:27,116

30
00:01:27,116 --> 00:01:30,260
Et puis aller de l'avant et juste naviguer
votre chemin vers le processus d'inscription

31
00:01:30,260 --> 00:01:32,630
si tu peux.

32
00:01:32,630 --> 00:01:36,080
Donc, il nous arrive d'utiliser dans la classe
J'enseigne pour tous nos étudiants,

33
00:01:36,080 --> 00:01:39,140
à la fois sur le campus et en dehors maintenant, et
il est remplacé ce qui historiquement

34
00:01:39,140 --> 00:01:41,390
était un logiciel téléchargeable autrement.

35
00:01:41,390 --> 00:01:44,620
Donc ce que vous gagnez l'accès à
est l'une de ces machines virtuelles,

36
00:01:44,620 --> 00:01:46,460
en substance, que je l'ai décrit plus tôt.

37
00:01:46,460 --> 00:01:50,260
Donc, cette société Cloud9 probablement
les loyers provenant d'une troisième Party-- effet

38
00:01:50,260 --> 00:01:52,760
dans ce cas, Google-- ensemble
tas de machines virtuelles

39
00:01:52,760 --> 00:01:56,500
qu'ils coupent en quelque sorte vers le haut dans
l'illusion de serveurs individuels

40
00:01:56,500 --> 00:01:58,610
que chacun de nous a un contrôle total sur.

41
00:01:58,610 --> 00:02:01,640
Il est pas tout à fait exact de dire
qu'ils sont des machines virtuelles,

42
00:02:01,640 --> 00:02:04,550
cependant, parce que ce
Cloud9 utilise en fait

43
00:02:04,550 --> 00:02:07,570
est une technologie un peu plus récente
appelé conteneurisation.

44
00:02:07,570 --> 00:02:13,150
Et laissez-moi prendre cette image
ici pour peindre cette image.

45
00:02:13,150 --> 00:02:16,540
>> Un conteneur est, si
Vous rappelez-vous l'image

46
00:02:16,540 --> 00:02:19,900
à partir plus tôt, un peu plus léger
poids qu'une machine virtuelle.

47
00:02:19,900 --> 00:02:22,090
En fait, alors que la dernière
le temps nous avons parlé il

48
00:02:22,090 --> 00:02:25,170
étant une exploitation
système et un hyperviseur

49
00:02:25,170 --> 00:02:28,260
puis le système d'exploitation invité, invité
système d'exploitation, exploitation invité

50
00:02:28,260 --> 00:02:30,940
système, au-dessus de votre
matériel physique,

51
00:02:30,940 --> 00:02:33,740
la différence avec ce plus récent
la technologie, conteneurisation,

52
00:02:33,740 --> 00:02:37,290
est qu'ils partagent tous en quelque sorte
le même système d'exploitation.

53
00:02:37,290 --> 00:02:39,970
Mais ils créent encore
l'illusion de tout le monde

54
00:02:39,970 --> 00:02:44,590
ayant sa propre exclusive
droits administratifs et les fichiers

55
00:02:44,590 --> 00:02:45,400
sur le serveur.

56
00:02:45,400 --> 00:02:48,230
Mais il y a moins de logiciels
entre vous et le matériel.

57
00:02:48,230 --> 00:02:52,260
Dont le résultat est, en
la théorie, une performance supérieure,

58
00:02:52,260 --> 00:02:55,470
parce que vous utilisez ou
gaspiller moins de ressources

59
00:02:55,470 --> 00:02:57,360
sur ce que l'on appelle la couche de virtualisation.

60
00:02:57,360 --> 00:02:59,420
Donc, ce qu'on appelle
conteneurisation, par nature,

61
00:02:59,420 --> 00:03:02,920
par le biais d'une technologie appelée Docker,
qui est très bien venir dans son propre.

62
00:03:02,920 --> 00:03:05,086
Et ceci est quelque chose qui
les ingénieurs de votre entreprise

63
00:03:05,086 --> 00:03:08,610
pourrait sorte de sorte de commencer à parler
au sujet bientôt si elles ne l'ont pas déjà,

64
00:03:08,610 --> 00:03:11,590
mais il n'y a certainement pas
raison de sauter sur tout bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Donc, avec cela dit, ce
vous voyez probablement maintenant

66
00:03:15,410 --> 00:03:22,670
est un écran qui ressemble un peu à ce sujet.

67
00:03:22,670 --> 00:03:23,170
D'ACCORD.

68
00:03:23,170 --> 00:03:25,260
Et appelez-moi plus sinon.

69
00:03:25,260 --> 00:03:27,440
Et si so-- je viendrai plus sinon.

70
00:03:27,440 --> 00:03:30,244
Allez-y et cliquez sur ce grand
ainsi que pour créer un espace de travail,

71
00:03:30,244 --> 00:03:31,660
et vous verrez un écran comme celui-ci.

72
00:03:31,660 --> 00:03:35,020
Vous pouvez appeler l'espace de travail
le nom que vous voulez pour l'instant.

73
00:03:35,020 --> 00:03:38,660
Et effectivement, pour simplifier,
aller et-- bien, certains d'entre vous

74
00:03:38,660 --> 00:03:39,660
ont déjà des espaces de travail.

75
00:03:39,660 --> 00:03:47,050
Appelez ça comme vous want-- affaires,
Harvard, jeudi tout ce que vous souhaitez.

76
00:03:47,050 --> 00:03:48,800
Vous n'avez pas besoin d'une description.

77
00:03:48,800 --> 00:03:52,380
Vous pouvez le laisser privé, à moins que vous
ont déjà un tas d'espaces de travail.

78
00:03:52,380 --> 00:03:55,280
Si vous êtes obligé de le rendre public,
qui est très bien pour les besoins d'aujourd'hui.

79
00:03:55,280 --> 00:03:56,750
Ici aussi, est l'un des upsells.

80
00:03:56,750 --> 00:03:59,939
Vous obtenez un espace de travail privé par
défaut. Mais si vous voulez plus,

81
00:03:59,939 --> 00:04:00,980
vous devez payer pour plus.

82
00:04:00,980 --> 00:04:02,870
Sinon, ils vous forcent
pour rendre votre travail public.

83
00:04:02,870 --> 00:04:05,600
Mais ça va, parce que ils ont également
cibler ce aux communautés open-source

84
00:04:05,600 --> 00:04:07,700
pour encourager les gens à
effectivement collaborer.

85
00:04:07,700 --> 00:04:10,699
>> Et la dernière chose qui est important,
cependant, est, après avoir choisi un nom

86
00:04:10,699 --> 00:04:17,140
et après que vous choisissez privé ou public,
cliquez sur HTML5, l'icône big orange

87
00:04:17,140 --> 00:04:22,430
deuxième à partir de la gauche, et
puis cliquez sur Créer l'espace de travail.

88
00:04:22,430 --> 00:04:24,580
Et ce sera probablement
prendre une minute ou deux,

89
00:04:24,580 --> 00:04:26,540
mais vous aurez alors une
environnement, une fois que vous

90
00:04:26,540 --> 00:04:30,544
faire, qui ressemble rappelle
ce que je dois à l'écran ici maintenant.

91
00:04:30,544 --> 00:04:33,210
Mais, encore une fois, cela peut prendre une minute
ou plus pour se rendre à cet écran

92
00:04:33,210 --> 00:04:34,770
une fois que vous avez cliqué sur Créer l'espace de travail.

93
00:04:34,770 --> 00:04:37,936
Mais juste signaler un moi plus si vous voulez que je
à jeter un oeil à quelque chose ou conseiller.

94
00:04:37,936 --> 00:04:40,191

95
00:04:40,191 --> 00:04:40,690
D'accord.

96
00:04:40,690 --> 00:04:42,390
Donc, je vais fond ce pour le moment.

97
00:04:42,390 --> 00:04:44,260
Appelez-moi plus si vous semblez
ont des difficultés techniques.

98
00:04:44,260 --> 00:04:46,210
Mais, encore une fois, cela peut prendre un
peu pour cela d'ouvrir.

99
00:04:46,210 --> 00:04:49,570
Et nous allons aller de l'avant et de parler de ce que
cela signifie en fait de faire une page web,

100
00:04:49,570 --> 00:04:52,780
ce que HTML est, et comment tout cela
interconnecte maintenant que nous commençons

101
00:04:52,780 --> 00:04:54,730
pour réellement utiliser une partie de la technologie.

102
00:04:54,730 --> 00:04:58,310
Donc, il se trouve que je peux
aller sur mon petit Mac ici,

103
00:04:58,310 --> 00:05:01,650
ouvrir un programme simple appelé
TextEdit, ou sur Windows je pouvais

104
00:05:01,650 --> 00:05:04,480
quelque chose d'ouvert appelé Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Et je ne pouvais tout simplement faire quelque chose
comme this-- "bonjour, monde."

106
00:05:08,260 --> 00:05:12,020
Et alors je pourrais enregistrer comme
hello.txt donc pas de magie là-bas.

107
00:05:12,020 --> 00:05:15,200
Cela n'a rien à voir avec web
programmation, rien à voir avec HTML.

108
00:05:15,200 --> 00:05:16,790
Il suffit de créer un fichier texte simple.

109
00:05:16,790 --> 00:05:20,600
Mais il se trouve qu'une bande
page est littéralement juste que.

110
00:05:20,600 --> 00:05:24,020
Il est un texte simple fichier texte contenant
que vous pouvez taper à votre clavier,

111
00:05:24,020 --> 00:05:30,070
mais généralement, mais pas toujours
se termine à ne pas .txt mais .html ou .htm.

112
00:05:30,070 --> 00:05:32,050
Et vous faites pas seulement
taper des mots dans le fichier.

113
00:05:32,050 --> 00:05:35,280
Vous avez en fait d'utiliser des choses appelées
balises ou, plus généralement, quelque chose

114
00:05:35,280 --> 00:05:37,190
appelé langage de balisage.

115
00:05:37,190 --> 00:05:40,510
>> Je vais donc taper très rapidement
et ensuite expliquer ce qui suit.

116
00:05:40,510 --> 00:05:42,290
Je vais d'abord
tapez ceci, qui dit,

117
00:05:42,290 --> 00:05:45,730
hey, navigateur, voici un
page Web écrite en HTML.

118
00:05:45,730 --> 00:05:51,850
Et ces deux choses disent ensemble, hey,
navigateur, ce qui suit est en effet HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, navigateur, voici le
tête ou le haut de ma page.

120
00:05:55,790 --> 00:05:59,900
Hey, navigateur, à l'intérieur de la partie supérieure
ma page, mettez un titre qui est, "bonjour,

121
00:05:59,900 --> 00:06:01,610
monde."

122
00:06:01,610 --> 00:06:08,370
Hey, navigateur, après la tête de mon
la page, voici le corps de ma page.

123
00:06:08,370 --> 00:06:12,170
Et, hé, navigateur, le corps de mon
page devrait aussi dire «Bonjour tout le monde."

124
00:06:12,170 --> 00:06:15,500
Alors, quels sont les détails importants ici?

125
00:06:15,500 --> 00:06:17,960
Ceci est ce qui est généralement
appelé une déclaration de type doc,

126
00:06:17,960 --> 00:06:20,190
et, franchement, il est un peu
difficile à mémoriser ce au premier abord.

127
00:06:20,190 --> 00:06:21,481
Vous avez juste sorte de copier-coller.

128
00:06:21,481 --> 00:06:23,760
Ceci est la manière formelle
de dire, hé, navigateur,

129
00:06:23,760 --> 00:06:28,030
J'utilise la version HTML 5 qui
est sorti quelque peu récemment.

130
00:06:28,030 --> 00:06:31,380
Il est une incantation magique que certains
l'homme avec un mauvais sens de la conception

131
00:06:31,380 --> 00:06:33,640
a décidé de mettre à la
haut du fichier.

132
00:06:33,640 --> 00:06:35,473
Même si elle est un
peu mystérieux, qui est tout

133
00:06:35,473 --> 00:06:38,250
il désigne: hey, navigateur, ici
est livré avec la version 5 de HTML.

134
00:06:38,250 --> 00:06:41,741
>> Le reste de ce qui a été avec nous
depuis un certain temps, historiquement,

135
00:06:41,741 --> 00:06:44,740
mais il a été en constante évolution, et il est
sans doute été d'obtenir un peu plus simple.

136
00:06:44,740 --> 00:06:47,320
Notez quelques caractéristiques
de ce que je l'ai souligné.

137
00:06:47,320 --> 00:06:49,890
Il y a ces choses avec un angle
brackets-- le support gauche

138
00:06:49,890 --> 00:06:51,040
et le support droit.

139
00:06:51,040 --> 00:06:52,490
Et remarquez la symétrie ici.

140
00:06:52,490 --> 00:06:57,340
Et par symétrie, je veux dire, comme je
avoir cette balise de début ici ou un tag ouvert

141
00:06:57,340 --> 00:07:01,560
si vous voulez, ici j'ai un
à proximité tag ou une balise de fin qui est

142
00:07:01,560 --> 00:07:06,460
autrement que dans la mesure où elle a cette
slash au début du mot

143
00:07:06,460 --> 00:07:07,360
HTML.

144
00:07:07,360 --> 00:07:09,360
Et vous pouvez penser
ce que j'était nonchalamment

145
00:07:09,360 --> 00:07:12,280
proposer avant, hey,
navigateur, voici quelques-uns HTML.

146
00:07:12,280 --> 00:07:16,060
Et, à l'inverse, hé, navigateur, qui est
pour le début et la fin de HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Pendant ce temps hey, navigateur, ici
vient la tête de ma page.

148
00:07:18,440 --> 00:07:20,140
Hey, navigateur, qui est pour la tête.

149
00:07:20,140 --> 00:07:22,240
Hey, navigateur, voici
le corps de ma page.

150
00:07:22,240 --> 00:07:24,020
Hey, navigateur, qui est pour le corps.

151
00:07:24,020 --> 00:07:26,940
Et à l'intérieur de c'est un peu
texte arbitraire pour l'instant.

152
00:07:26,940 --> 00:07:30,520
Et à l'intérieur de la tête, en attendant,
est un peu arbitraire, mais marqué,

153
00:07:30,520 --> 00:07:34,410
pour ainsi dire, le texte qui indique, le titre
de ma page doit être "bonjour, monde."

154
00:07:34,410 --> 00:07:37,470
Maintenant, pour l'instant, vous pouvez
supposer que les navigateurs

155
00:07:37,470 --> 00:07:41,762
avoir ou terre que: plutôt, pages web ont
seulement deux parts-- la tête et le corps.

156
00:07:41,762 --> 00:07:44,220
Et la tête est généralement juste
comme la barre de menu, les choses

157
00:07:44,220 --> 00:07:45,510
vraiment juste au sommet.

158
00:07:45,510 --> 00:07:48,910
Et le corps est le courage de la page,
tout dans ce grand rectangle

159
00:07:48,910 --> 00:07:50,239
qui remplit l'écran.

160
00:07:50,239 --> 00:07:51,780
Je vais donc aller de l'avant et de le faire.

161
00:07:51,780 --> 00:07:54,400
Je vais aller de l'avant et
cliquez sur Enregistrer, Enregistrer le fichier.

162
00:07:54,400 --> 00:07:58,580
Et je vais sauver
ce que hello.html,

163
00:07:58,580 --> 00:08:00,870
et je vais juste
le mettre sur mon bureau.

164
00:08:00,870 --> 00:08:03,520
Et je vais aller
avant et cliquez sur Enregistrer.

165
00:08:03,520 --> 00:08:05,806
Et notice-- mon Mac au
moins est crier après moi.

166
00:08:05,806 --> 00:08:07,180
Es-tu sûr de vouloir faire ça?

167
00:08:07,180 --> 00:08:08,710
Et je vais vous dire, oui, utiliser HTML.

168
00:08:08,710 --> 00:08:10,400
Je sais mieux dans ce cas.

169
00:08:10,400 --> 00:08:14,686
Et maintenant, je vais aller à mon bureau
où je dois ce fichier soudainement.

170
00:08:14,686 --> 00:08:16,060
Et je vais double-cliquez dessus.

171
00:08:16,060 --> 00:08:18,268
Et vous remarquerez que, par
par défaut, Chrome ouvert.

172
00:08:18,268 --> 00:08:19,996
C'est parce que ce
mon navigateur par défaut.

173
00:08:19,996 --> 00:08:21,370
Et il dit simplement, "bonjour, monde."

174
00:08:21,370 --> 00:08:23,078
Mais il est dit "bonjour,
monde »en deux endroits.

175
00:08:23,078 --> 00:08:23,979
Remarquez en haut à gauche.

176
00:08:23,979 --> 00:08:25,020
Jolie difficile de rater ça.

177
00:08:25,020 --> 00:08:26,180
Il est gros et gras.

178
00:08:26,180 --> 00:08:30,690
Et où il ne semble
à-dire «bonjour, monde»?

179
00:08:30,690 --> 00:08:31,470
>> AUDIENCE: L'onglet.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. Malan: Oui, l'onglet lui-même.

181
00:08:33,100 --> 00:08:35,159
Alors, quand je l'ai dit le chef de la
page est tout jusqu'à top--

182
00:08:35,159 --> 00:08:36,367
et en effet cela est le titre.

183
00:08:36,367 --> 00:08:37,710
Il est juste dans l'onglet ici.

184
00:08:37,710 --> 00:08:40,320
Et je peux tirer cet onglet
de manière à ne pas confondre.

185
00:08:40,320 --> 00:08:43,360
Ceci est juste un seul onglet maintenant,
et en effet, nous voyons "bonjour, monde"

186
00:08:43,360 --> 00:08:45,970
ici et "bonjour, monde" ici-bas.

187
00:08:45,970 --> 00:08:47,160
Donc assez simple.

188
00:08:47,160 --> 00:08:49,050
Mais il est également assez simple.

189
00:08:49,050 --> 00:08:50,440
Et, en fait, je zoomé.

190
00:08:50,440 --> 00:08:53,272
Je peux changer la taille des caractères seulement
pour agrandir l'accessibilité.

191
00:08:53,272 --> 00:08:56,830
Mais nous allons faire maintenant quelque chose
un peu plus intéressant.

192
00:08:56,830 --> 00:08:59,760
>> Je vais go-- whoops, laissez
Je reviens à mon fichier texte.

193
00:08:59,760 --> 00:09:02,400
Je vais revenir à mon
fichier texte, et je vais

194
00:09:02,400 --> 00:09:06,320
de changer cela et dire
"Bonjour, Disney World."

195
00:09:06,320 --> 00:09:07,970
Sauvegarder.

196
00:09:07,970 --> 00:09:10,919
Et revenir à mon
navigateur et cliquez sur Recharger.

197
00:09:10,919 --> 00:09:12,710
Et maintenant, bien sûr, il
dit «Disney World».

198
00:09:12,710 --> 00:09:15,500
Et je vais faire un zoom artificiellement
en seulement il est donc plus facile de voir.

199
00:09:15,500 --> 00:09:19,012
Alors maintenant, malheureusement, je veux genre de
to-- fait, c'est une fonctionnalité Mac.

200
00:09:19,012 --> 00:09:21,720
Je veux cliquer sur Disney World
et aller quelque part comme disney.com,

201
00:09:21,720 --> 00:09:23,290
mais cela ne fonctionne pas.

202
00:09:23,290 --> 00:09:26,850
Ainsi, un principe de base de la nappe est
hyperliens, des liens qui vont ailleurs.

203
00:09:26,850 --> 00:09:28,390
Alors, comment dois-je faire cela?

204
00:09:28,390 --> 00:09:34,690
Eh bien, je ne pouvais dire,
"Bonjour, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Sauvegarde ça.

206
00:09:36,110 --> 00:09:37,620
Recharger.

207
00:09:37,620 --> 00:09:39,400
Mais cela aussi, pas cliquable.

208
00:09:39,400 --> 00:09:42,930
Et ce qui est bien ici, même si
ce ne fonctionne pas encore,

209
00:09:42,930 --> 00:09:45,930
est qu'il semble que le
navigateur ne littéralement seulement

210
00:09:45,930 --> 00:09:46,950
ce que je dis de faire.

211
00:09:46,950 --> 00:09:50,110
Donc, si je viens de taper une URL comme ceci,
il va juste me montrer l'URL.

212
00:09:50,110 --> 00:09:54,270
Je dois utiliser des balises ou balisage
langue pour réellement dire

213
00:09:54,270 --> 00:09:55,621
le navigateur pour faire encore plus.

214
00:09:55,621 --> 00:09:57,870
Je vais donc aller de l'avant et
supprimer cela pour un moment.

215
00:09:57,870 --> 00:10:00,980
Et je vais dire, hey,
navigateur, démarrez une ancre ici,

216
00:10:00,980 --> 00:10:02,650
un lien pour ainsi dire.

217
00:10:02,650 --> 00:10:07,500
Et l'hyper-référence, la destination
de cette ancre, devrait être cette URL.

218
00:10:07,500 --> 00:10:08,750
Et remarquez mes citations.

219
00:10:08,750 --> 00:10:11,590
Je pourrais utiliser des guillemets simples, aussi,
mais vous devez être cohérent,

220
00:10:11,590 --> 00:10:14,270
et je voudrais utiliser généralement
guillemets pour le garder simple.

221
00:10:14,270 --> 00:10:16,820
Remarquez que je vais fermer la balise.

222
00:10:16,820 --> 00:10:21,160
Et puis ici, je vais
à-dire, «Disney World».

223
00:10:21,160 --> 00:10:26,890
Et maintenant je besoin d'symmetry--
support ouvert, / a, support fermé.

224
00:10:26,890 --> 00:10:28,090
>> Alors qu'est-ce que j'introduit?

225
00:10:28,090 --> 00:10:30,100
Nous avons déjà quelques tags.

226
00:10:30,100 --> 00:10:32,410
HTML, Chef, Titre, Body,
sont tous les tags, pour ainsi dire,

227
00:10:32,410 --> 00:10:34,280
avec leurs homologues ouverts et fermés.

228
00:10:34,280 --> 00:10:36,530
Mais remarquez, c'est une sorte
de fondamentalement différent.

229
00:10:36,530 --> 00:10:39,140
Ceci est ce que nous appellerons
en HTML un attribut.

230
00:10:39,140 --> 00:10:41,451
Et un attribut est
juste une paire clé-valeur.

231
00:10:41,451 --> 00:10:43,950
Ceci est une chose courante dans
la paire clé-valeur de l'ordinateur.

232
00:10:43,950 --> 00:10:45,770
Il est en quelque sorte de l'outil de travail.

233
00:10:45,770 --> 00:10:47,040
Une clé et une valeur.

234
00:10:47,040 --> 00:10:49,390
Un mot et puis certains
ou plusieurs autres mots.

235
00:10:49,390 --> 00:10:53,790
Et dans ce cas, la clé est href,
et la valeur est que l'URL complète.

236
00:10:53,790 --> 00:10:57,890
Et quel attribut fait est-il
influe sur le comportement d'un tag.

237
00:10:57,890 --> 00:11:01,010
Et dans ce cas, nous avons besoin d'influencer
le comportement de la balise d'ancrage,

238
00:11:01,010 --> 00:11:04,140
parce que nous devons ancrer
ce lien quelque part.

239
00:11:04,140 --> 00:11:06,960
Et comment vous faites cela est
par l'intermédiaire de l'attribut.

240
00:11:06,960 --> 00:11:08,970
>> Je vais donc aller de l'avant
et enregistrez le fichier maintenant.

241
00:11:08,970 --> 00:11:11,300
Retour à mon navigateur et reload.

242
00:11:11,300 --> 00:11:14,580
Et voila, nous avons maintenant la
début d'une page Web légitime.

243
00:11:14,580 --> 00:11:18,420
Super-simple, mais si je planer sur
avis this-- dans le coin inférieur gauche,

244
00:11:18,420 --> 00:11:19,830
il est super-petite.

245
00:11:19,830 --> 00:11:21,730
Mais vous voyez www.disney.com.

246
00:11:21,730 --> 00:11:27,076
Et si je clique dessus, en effet cette
me fouets loin pour disney.com.

247
00:11:27,076 --> 00:11:29,380
Maintenant, ce qui est curieux
ici est qu'il n'y a pas

248
00:11:29,380 --> 00:11:33,940
l'best-- l'URL la plus commercialisable, mais
qui est bien parce que ce fichier ne

249
00:11:33,940 --> 00:11:35,360
existent sur le World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Il existe en tant que fichier local en apparence
mes utilisateurs directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
pour John Harvard-- / bureau.

252
00:11:41,890 --> 00:11:42,634
Mais il a une URL.

253
00:11:42,634 --> 00:11:43,800
Il se trouve être local.

254
00:11:43,800 --> 00:11:47,050
Malheureusement, aucun d'entre vous pouvez visiter
cela, parce que si vous tapez cette URL,

255
00:11:47,050 --> 00:11:49,980
vous seriez en parler à votre navigateur,
chercher un hello.html de fichier appelé

256
00:11:49,980 --> 00:11:50,772
sur votre disque dur.

257
00:11:50,772 --> 00:11:53,271
Et, bien sûr, sauf si vous avez
été suivant le long de la main,

258
00:11:53,271 --> 00:11:54,530
il ne va pas y exister.

259
00:11:54,530 --> 00:11:55,190
>> Donc, ça va.

260
00:11:55,190 --> 00:11:57,815
Nous avons encore besoin d'une façon, en fin de compte,
pour obtenir ce fichier dans le web,

261
00:11:57,815 --> 00:12:01,180
mais nous allons démêler quelques
conséquences sur la sécurité de ce que nous venons

262
00:12:01,180 --> 00:12:04,850
vu et l'attacher vers le plus haut
discussion de ce matin.

263
00:12:04,850 --> 00:12:08,200
Il se trouve que, si
navigateur ne littéralement juste

264
00:12:08,200 --> 00:12:12,560
ce que je dis de faire, et il semble
d'être le cas où une balise d'ancrage est

265
00:12:12,560 --> 00:12:17,380
influencée par la valeur du
cet attribut appelé href

266
00:12:17,380 --> 00:12:20,810
mais il affiche cette
texte, cela semble

267
00:12:20,810 --> 00:12:26,520
impliquer que je pourrais mettre l'URL
dans les deux endroits puis rechargez

268
00:12:26,520 --> 00:12:29,100
et maintenant voir l'URL et aller à l'URL.

269
00:12:29,100 --> 00:12:32,680
Remarquez, si je plane sur le fond à gauche,
Je vais en effet encore disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Donc, si vous avez déjà été
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
avec un de ces e-mails faux
à partir comme PayPal votre banque,

272
00:12:42,820 --> 00:12:46,470
vous avez probablement eu des liens à l'intérieur
de l'e-mail que vous avez lu que

273
00:12:46,470 --> 00:12:49,970
vous dit de cliquer ici pour aller confirmer
votre mot de passe ou de confirmer votre date de naissance

274
00:12:49,970 --> 00:12:53,840
socialement ou social ou quelque chose
vous ingénierie de divulguer

275
00:12:53,840 --> 00:12:54,920
information.

276
00:12:54,920 --> 00:12:57,625
Eh bien, je pourrais sorte de prendre
avantage de cela, pourrait-ce pas?

277
00:12:57,625 --> 00:13:01,240
Je pourrais dire quelque chose
comme, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Et au lieu de disney.com, je
pourrait aller, comme, badguy.com.

279
00:13:11,340 --> 00:13:12,850
Recharger.

280
00:13:12,850 --> 00:13:16,620
Et comment est-il facile à duper,
en particulier un lecteur non-technique

281
00:13:16,620 --> 00:13:20,649
ou une lecture sommairement
lecteur que de cliquer sur

282
00:13:20,649 --> 00:13:23,940
un lien comme celui-ci, qui, si je clique sur it--
En fait, je ne veux pas aller badguy.com.

283
00:13:23,940 --> 00:13:25,398
Je ne sais pas ce qui est réellement là.

284
00:13:25,398 --> 00:13:30,080
Donc paypal.com, avis, est
ce qu'il dit qu'il va,

285
00:13:30,080 --> 00:13:33,210
mais bien sûr, si je regarde vers le bas
super-bas, il est un peu floue,

286
00:13:33,210 --> 00:13:34,230
mais il dit badguy.com.

287
00:13:34,230 --> 00:13:38,644
C'est le seul dire en ce moment
que je vais au mauvais endroit.

288
00:13:38,644 --> 00:13:41,560
Et quand je l'ai dit plus tôt que les banques
ne devrait vraiment pas encourager ou former

289
00:13:41,560 --> 00:13:44,510
utilisateurs en liens en cliquant sur ce
est juste une manifestation.

290
00:13:44,510 --> 00:13:45,430
Et il est aussi simple que cela.

291
00:13:45,430 --> 00:13:48,120
Vous êtes maintenant un adversaire si
vous faites quelque chose comme ça

292
00:13:48,120 --> 00:13:51,000
et essayer de tromper un utilisateur
à visiter votre site Web.

293
00:13:51,000 --> 00:13:53,320
Mais pour l'instant, nous allons continuer
les choses belles et propres.

294
00:13:53,320 --> 00:13:55,640
Nous allons aller de l'avant
et rembobiner ces changements.

295
00:13:55,640 --> 00:13:56,530
Recharger la page.

296
00:13:56,530 --> 00:13:57,740
Et je reviens à disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Voyons voir si nous ne pouvons pas taquiner
cet appart un peu plus.

298
00:14:00,660 --> 00:14:04,160
Donc, "bonjour, Disney World."

299
00:14:04,160 --> 00:14:05,950
Je vais dire ici.

300
00:14:05,950 --> 00:14:08,220
Peut-être que je vais faire de la place.

301
00:14:08,220 --> 00:14:12,730
"Nous esperons que vous aimez votre sejour!"

302
00:14:12,730 --> 00:14:13,830
Sauvegarder.

303
00:14:13,830 --> 00:14:15,850
Recharger.

304
00:14:15,850 --> 00:14:19,010
Il est pas rea-- ce n'est pas
ce que je voulais, non?

305
00:14:19,010 --> 00:14:21,870
Je veux dire, si je traite mon texte
le fichier comme un traitement de texte,

306
00:14:21,870 --> 00:14:24,894
qu'est-ce que vous espérez se passerait-il ici?

307
00:14:24,894 --> 00:14:27,060
Ouais, je me sens comme il
devrait être un saut de ligne ici,

308
00:14:27,060 --> 00:14:28,799
donc il se sent bogué en quelque sorte.

309
00:14:28,799 --> 00:14:31,090
Mais cela fait délibérée,
parce que tout comme avant,

310
00:14:31,090 --> 00:14:33,381
le navigateur ne va
faire ce que vous lui demandez de faire.

311
00:14:33,381 --> 00:14:34,806
Je l'ai pas dit à briser les lignes.

312
00:14:34,806 --> 00:14:37,930
Je l'ai pas dit de se déplacer vers le bas, même
mais, intuitivement, je me sens comme je l'ai fait.

313
00:14:37,930 --> 00:14:39,805
Donc, il se trouve que nous devons
un peu plus de balisage,

314
00:14:39,805 --> 00:14:41,390
et je vais résoudre ce problème de la manière suivante.

315
00:14:41,390 --> 00:14:46,160
Je vais faire précéder ce premier bonjour
avec ce qu'on appelle une étiquette de paragraphe.

316
00:14:46,160 --> 00:14:48,920
Et puis je vais aller de l'avant
et envelopper cette autre phrase

317
00:14:48,920 --> 00:14:54,370
dans une autre balise de paragraphe, même si
ils sont super-paragraphes courts.

318
00:14:54,370 --> 00:14:55,930
Maintenant, je vais sauver.

319
00:14:55,930 --> 00:14:57,160
Recharger.

320
00:14:57,160 --> 00:14:59,070
Et maintenant nous avons ce que
l'espace, et nous sorte de

321
00:14:59,070 --> 00:15:01,680
ont la sémantique
deux paragraphes distincts.

322
00:15:01,680 --> 00:15:05,290
>> C'est tout beau et bon, mais il serait
être agréable d'ajouter une image à cette page,

323
00:15:05,290 --> 00:15:08,710
donc je vais aller chercher
Mickey Mouse sur Google Images.

324
00:15:08,710 --> 00:15:12,830
Et juste pour le plaisir, je suis
va saisir cette image.

325
00:15:12,830 --> 00:15:15,350
Je vais aller de l'avant maintenant et
saisir l'URL de cette image,

326
00:15:15,350 --> 00:15:16,510
mais il est différent
façons de le faire.

327
00:15:16,510 --> 00:15:18,520
Pour l'instant, je vais juste copier l'URL.

328
00:15:18,520 --> 00:15:24,770
Je vais retourner dans mon texte
fichier, et je vais dire ici,

329
00:15:24,770 --> 00:15:31,160
img src = entre guillemets
cette URL, super long.

330
00:15:31,160 --> 00:15:34,580
Et puis la notion de
l'image est un peu différent.

331
00:15:34,580 --> 00:15:38,640
Il n'y a vraiment aucune idée de départ
une image et se terminant une image,

332
00:15:38,640 --> 00:15:40,630
comme une balise de début d'une balise de fin.

333
00:15:40,630 --> 00:15:43,840
Donc, il se sent un peu bizarre
me sémantiquement de faire cela,

334
00:15:43,840 --> 00:15:45,390
d'avoir une étiquette close-image.

335
00:15:45,390 --> 00:15:46,780
Il est pas incorrect.

336
00:15:46,780 --> 00:15:48,840
Il est parfaitement correct,
et il est encouragé,

337
00:15:48,840 --> 00:15:50,870
mais il y a notation abrégée.

338
00:15:50,870 --> 00:15:53,780
Je peux sorte de simultanément
ouvrir et fermer la même étiquette,

339
00:15:53,780 --> 00:15:55,510
et qui feront le navigateur heureux.

340
00:15:55,510 --> 00:15:56,950
Donc, il est juste un peu
plus succinct pour les choses

341
00:15:56,950 --> 00:15:59,408
que conceptuellement vraiment pas
logique de début et de fin.

342
00:15:59,408 --> 00:16:01,190
Ils ne sont tout simplement là, ou ils ne sont pas.

343
00:16:01,190 --> 00:16:06,020
>> Donc, je vais enregistrer ce et revenir
à mon "bonjour, monde" la page et reload.

344
00:16:06,020 --> 00:16:09,880
Et il est un peu hors de contrôle,
parce que cette image est en réalité

345
00:16:09,880 --> 00:16:12,210
un peu gros, mais c'est OK.

346
00:16:12,210 --> 00:16:13,710
Je pourrais le redimensionner dans un programme.

347
00:16:13,710 --> 00:16:14,900
Ou vous savez quoi.

348
00:16:14,900 --> 00:16:17,350
Juste pour montrer, je suis
va effectivement dire

349
00:16:17,350 --> 00:16:21,760
que la largeur de cette chose devrait
seulement 200 pixels, 200 points.

350
00:16:21,760 --> 00:16:24,360
Laissez-moi aller de l'avant et sauver
et de recharger, et maintenant la page

351
00:16:24,360 --> 00:16:25,690
regarde un peu plus raisonnable.

352
00:16:25,690 --> 00:16:27,260
Mais remarquez le motif.

353
00:16:27,260 --> 00:16:30,030
Eh bien, je l'ai appris genre de vous tous
du HTML dans un certain sens, au moins

354
00:16:30,030 --> 00:16:33,531
conceptuellement, parce que tout est HTML est
ces tags-- balises ouvertes, balises fermées,

355
00:16:33,531 --> 00:16:35,280
et les attributs que
modifier leur comportement.

356
00:16:35,280 --> 00:16:38,380
Et, apparemment, chaque
tag peut avoir zéro ou un

357
00:16:38,380 --> 00:16:43,005
ou deux ou plusieurs attributs, chacun des
qui fait quelque chose d'un peu différent.

358
00:16:43,005 --> 00:16:44,380
Maintenant, comment savez-vous ce qui existe?

359
00:16:44,380 --> 00:16:46,800
Vous venez d'écouter quelqu'un
comme moi vous dire ce qui existe,

360
00:16:46,800 --> 00:16:50,860
ou que vous venez de Google autour d'un tutoriel
le HTML, et il est vraiment ce simple.

361
00:16:50,860 --> 00:16:54,030
>> Vraiment, quand j'étais un étudiant de premier cycle
il y a des années et appris HTML,

362
00:16:54,030 --> 00:16:56,530
un de mon enseignement de mathématiques
assistants venons de passer

363
00:16:56,530 --> 00:16:59,600
un peu de temps à me tutorat
car, comme une demi-heure, une heure,

364
00:16:59,600 --> 00:17:00,660
et puis je suis sur mon chemin.

365
00:17:00,660 --> 00:17:03,300
J'étais sur mon chemin vers la prise
les sites les plus hideuses jamais,

366
00:17:03,300 --> 00:17:05,549
qui, apparemment, je n'ai pas
vraiment progressé au-delà.

367
00:17:05,549 --> 00:17:09,849
Mais le fait est que, une fois que vous
comprendre ces simples ideas--

368
00:17:09,849 --> 00:17:13,450
si arcane text-- mais ces simples
idées de départ une pensée

369
00:17:13,450 --> 00:17:15,960
et la fermeture d'une pensée, en gardant
tout bien équilibré,

370
00:17:15,960 --> 00:17:19,150
regarder quelque chose, la modification de la
comportement de cette balise, qui est vraiment tout

371
00:17:19,150 --> 00:17:20,079
il est à elle.

372
00:17:20,079 --> 00:17:28,140
Et en effet, si nous passons maintenant à
quelque chose comme google.com-- fait,

373
00:17:28,140 --> 00:17:31,920
Allons un endroit un peu plus
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Et je vais aller pour voir,
Développeur, Afficher la source.

375
00:17:37,800 --> 00:17:41,400
Il est laid, mais notice--
et je zoome avis

376
00:17:41,400 --> 00:17:43,432
certaines choses qui sont déjà familiers.

377
00:17:43,432 --> 00:17:45,140
Il y a cette ici,
qui est un navigateur.

378
00:17:45,140 --> 00:17:46,800
Voici HTML5.

379
00:17:46,800 --> 00:17:47,634
Il y a HTML.

380
00:17:47,634 --> 00:17:49,550
Apparemment, il y a une
attribue que je ne l'ai pas

381
00:17:49,550 --> 00:17:51,540
utilisation qui spécifie le
langue de la page,

382
00:17:51,540 --> 00:17:54,380
et cela peut aider avec automatique
traduction et des trucs comme ça.

383
00:17:54,380 --> 00:17:55,546
Voici la tête de la page.

384
00:17:55,546 --> 00:17:57,790
Voici le titre de la page de Stanford.

385
00:17:57,790 --> 00:17:59,832
Il y a un tag que je ne l'ai pas
parler yet-- Meta tag.

386
00:17:59,832 --> 00:18:01,540
Il est juste une sorte de
Informations d'arrière-plan.

387
00:18:01,540 --> 00:18:04,210
Il aide avec la SEO, ou
optimisation du moteur de recherche,

388
00:18:04,210 --> 00:18:06,320
ou les résultats Google-recherche ou similaire.

389
00:18:06,320 --> 00:18:09,029
Mais si nous continuons à regarder, garder
la recherche, voici la balise Body.

390
00:18:09,029 --> 00:18:11,570
Et il y a des grappes d'autres
balises nous avons pas encore parlé.

391
00:18:11,570 --> 00:18:13,750
Mais Div est un pour un
division de la page.

392
00:18:13,750 --> 00:18:16,680
Il est comme un rectangle invisible
si vous voulez sorte de mentalement

393
00:18:16,680 --> 00:18:20,160
diviser votre page en
différentes unités en ligne.

394
00:18:20,160 --> 00:18:22,650
Et puis beaucoup de divs I
voir, ce qu'on appelle la classe,

395
00:18:22,650 --> 00:18:24,440
mais nous reviendrons à cela.

396
00:18:24,440 --> 00:18:26,200
>> Ceci est interesting-- formes.

397
00:18:26,200 --> 00:18:27,730
Les formulaires sont sur tout le web.

398
00:18:27,730 --> 00:18:30,310
Toute boîte de recherche vous êtes
jamais utilisé est une forme.

399
00:18:30,310 --> 00:18:31,490
Et, donc, nous allons effectivement voir.

400
00:18:31,490 --> 00:18:32,790
Forme.

401
00:18:32,790 --> 00:18:33,910
Action.

402
00:18:33,910 --> 00:18:37,660
L'action de cette forme, pour quelque
des raisons historiques, est cette URL.

403
00:18:37,660 --> 00:18:38,840
Méthode est "post".

404
00:18:38,840 --> 00:18:44,060
Avère que les requêtes HTTP peuvent utiliser
le verbe «obtenir», comme nous l'avons vu précédemment,

405
00:18:44,060 --> 00:18:45,070
ou "post".

406
00:18:45,070 --> 00:18:47,030
Et va voir une différence
cela dans un moment.

407
00:18:47,030 --> 00:18:48,363
Voyons effectivement voir ce que cela est.

408
00:18:48,363 --> 00:18:49,830
Permettez-moi de revenir à la page de Stanford.

409
00:18:49,830 --> 00:18:53,330
Quelle forme sont-ils parler
à propos, pensez-vous?

410
00:18:53,330 --> 00:18:54,485
Qu'est-ce que vous saute au?

411
00:18:54,485 --> 00:18:54,970
>> AUDIENCE: zone de recherche.

412
00:18:54,970 --> 00:18:55,845
>> DAVID J. Malan: Oui.

413
00:18:55,845 --> 00:18:58,410
Donc, jusqu'à en haut à droite
voici ce champ de recherche.

414
00:18:58,410 --> 00:19:02,441
Et voilà comment ils ont mis un it--
tag qui est littéralement forme ouverte-support.

415
00:19:02,441 --> 00:19:03,940
Et puis nous allons chercher quelque chose.

416
00:19:03,940 --> 00:19:09,220
Cherchons un copain
de mine-- "Nick Parlante."

417
00:19:09,220 --> 00:19:11,380
Entrer.

418
00:19:11,380 --> 00:19:13,750
Et bien sûr, il est allé à
une URL légèrement différente.

419
00:19:13,750 --> 00:19:15,140
Permettez-moi de revenir ici.

420
00:19:15,140 --> 00:19:18,960
Cherchons "cours."

421
00:19:18,960 --> 00:19:19,460
Bon sang.

422
00:19:19,460 --> 00:19:20,484
Nous sommes allés à une URL différente.

423
00:19:20,484 --> 00:19:23,400
Donc, Stanford ajoutant un peu de magie
qu'ils ne sont pas me prendre à l'URL

424
00:19:23,400 --> 00:19:25,820
que nous avons vu dans la
attribut action là.

425
00:19:25,820 --> 00:19:32,480
Mais cette forme ici est mis en œuvre purement
par le biais de ce balisage ici, ces balises.

426
00:19:32,480 --> 00:19:35,710
En fait, voici l'entrée pour
le type de recherche que vous souhaitez.

427
00:19:35,710 --> 00:19:38,940
Voici l'entrée pour
un autre type de recherche.

428
00:19:38,940 --> 00:19:41,960
Voici l'entrée de la chaîne elle-même.

429
00:19:41,960 --> 00:19:45,394
Et l'objectif est de ne pas envelopper
nos esprits autour de l'ensemble de ces balises

430
00:19:45,394 --> 00:19:46,060
mais juste pour voir.

431
00:19:46,060 --> 00:19:48,300
Il vient d'ouvrir et de fermer
tags et regardant les choses.

432
00:19:48,300 --> 00:19:48,560
Ouais?

433
00:19:48,560 --> 00:19:48,920
Victoria?

434
00:19:48,920 --> 00:19:49,795
>> AUDIENCE: [Inaudible]

435
00:19:49,795 --> 00:19:51,925

436
00:19:51,925 --> 00:19:53,550
DAVID J. Malan: Voilà une bonne question.

437
00:19:53,550 --> 00:19:54,660
C'est un peu plus délicat à voir.

438
00:19:54,660 --> 00:19:56,300
Permettez-moi de revenir à ce que
question en quelques minutes

439
00:19:56,300 --> 00:19:59,000
quand on regarde quelque chose appelé
feuilles CSS, ou style en cascade,

440
00:19:59,000 --> 00:20:02,500
et nous pouvons essayer de déduire
autant de la page.

441
00:20:02,500 --> 00:20:08,090
Donc, si nous prenons maintenant un regard sur google.com,
nous allons voir ce que leur page ressemble.

442
00:20:08,090 --> 00:20:09,840
Vous they're-- c'est mignon aujourd'hui.

443
00:20:09,840 --> 00:20:12,490

444
00:20:12,490 --> 00:20:12,990
D'ACCORD.

445
00:20:12,990 --> 00:20:13,690
Terminé.

446
00:20:13,690 --> 00:20:15,260
Très bien, alors Afficher la source.

447
00:20:15,260 --> 00:20:19,590
On pourrait penser que Google a
vraiment sympa code source.

448
00:20:19,590 --> 00:20:24,970
Donc, apparemment, ce qui se passe ici?

449
00:20:24,970 --> 00:20:27,880
Et en fait, ce n'est pas même HTML.

450
00:20:27,880 --> 00:20:30,930
Ceci est quelque chose appelé JavaScript.

451
00:20:30,930 --> 00:20:32,344
Et nous allons continuer et aller.

452
00:20:32,344 --> 00:20:34,010
Je ne sais même pas où la page commence.

453
00:20:34,010 --> 00:20:37,240
Je vais utiliser la Command
F, ouvert support HTML.

454
00:20:37,240 --> 00:20:38,200
D'accord, il est là.

455
00:20:38,200 --> 00:20:44,150
J'ai trouvé le début de la page, et
il y a tellement de choses ici.

456
00:20:44,150 --> 00:20:45,310
>> Qu'est-ce qui se passe réellement?

457
00:20:45,310 --> 00:20:47,460
Eh bien, vous savez quoi,
nous pouvons nettoyer cette place.

458
00:20:47,460 --> 00:20:52,109
Si je vais à la place de cette Inspectez
barre d'outils, cet outil de diagnostic spécial,

459
00:20:52,109 --> 00:20:54,150
et pas aller au Réseau,
où nous continuons aujourd'hui,

460
00:20:54,150 --> 00:20:56,420
mais si je vais à Elements,
ce qui est vraiment agréable

461
00:20:56,420 --> 00:20:59,990
est qu'un navigateur a beaucoup
bien meilleurs yeux que moi.

462
00:20:59,990 --> 00:21:02,670
Et le navigateur peut lire
ce gâchis d'une page Web,

463
00:21:02,670 --> 00:21:04,700
que HTML courrier que nous venons
regardé, et il peut

464
00:21:04,700 --> 00:21:08,340
analyser ou lire et
analyser et reformater

465
00:21:08,340 --> 00:21:09,910
d'une manière humaine conviviale agréable.

466
00:21:09,910 --> 00:21:11,740
Donc, ce que je vois maintenant
dans cet écran ici

467
00:21:11,740 --> 00:21:15,470
sous Elements, exactement le même contenu,
mais ils ont tout en retrait,

468
00:21:15,470 --> 00:21:18,140
ils ont colorisées, mais
il est exactement le même texte

469
00:21:18,140 --> 00:21:19,620
que j'ai téléchargé à partir du serveur.

470
00:21:19,620 --> 00:21:23,630
>> Et ce qui est agréable est maintenant je peux voir
dans le corps, pour avis instance--,

471
00:21:23,630 --> 00:21:26,480
la page est toujours composé
de seulement une tête et un corps,

472
00:21:26,480 --> 00:21:28,660
et je peux plonger hiérarchiquement ici.

473
00:21:28,660 --> 00:21:32,420
Notez que Google semble avoir
à divs-- celui-ci et celui-ci.

474
00:21:32,420 --> 00:21:33,310
Je peux développer cela.

475
00:21:33,310 --> 00:21:35,370
Il y a tout un tas d'autres divs.

476
00:21:35,370 --> 00:21:36,900
Donc, il est un peu complexe.

477
00:21:36,900 --> 00:21:37,400
Mais attendez.

478
00:21:37,400 --> 00:21:40,970
Cela semble tellement plus
lisible, relativement, que celui-ci.

479
00:21:40,970 --> 00:21:43,840
Pourquoi Google embarrassant
lui-même en envoyant simplement

480
00:21:43,840 --> 00:21:50,400
cet immense gâchis de code de certains
sorte juste pour mettre en œuvre quelque chose

481
00:21:50,400 --> 00:21:53,640
qui semble si simple à première vue?

482
00:21:53,640 --> 00:21:55,270
Comme, pourquoi ne pas ajouter plus de places?

483
00:21:55,270 --> 00:21:56,811
Pourquoi ne pas frapper Entrez comme je le faisais?

484
00:21:56,811 --> 00:21:59,110
Regardez à quel point je suis
à l'écriture d'une page Web.

485
00:21:59,110 --> 00:22:00,680
Je frappe Entrez avec tant de diligence.

486
00:22:00,680 --> 00:22:03,760
J'indenté donc tout
est si jolie et lisible.

487
00:22:03,760 --> 00:22:08,463
Pourquoi Google ne pratique pas la même chose?

488
00:22:08,463 --> 00:22:11,409
>> AUDIENCE: [Inaudible]

489
00:22:11,409 --> 00:22:12,305

490
00:22:12,305 --> 00:22:13,180
DAVID J. Malan: Good.

491
00:22:13,180 --> 00:22:14,270
Très juste.

492
00:22:14,270 --> 00:22:16,650
Ils ne sont pas certains
personne à Google manuellement

493
00:22:16,650 --> 00:22:18,160
mettre à jour la page d'accueil plus.

494
00:22:18,160 --> 00:22:20,010
Ce n'est pas plus 1999.

495
00:22:20,010 --> 00:22:21,140
Ils ont donc un logiciel.

496
00:22:21,140 --> 00:22:25,397
Ils ont d'autres outils
générer dynamiquement ils sont HTML.

497
00:22:25,397 --> 00:22:27,480
Bien sûr, ce code lui-même
a été écrit par les humains,

498
00:22:27,480 --> 00:22:30,220
mais la réalité est,
il est tout à fait juste de dire,

499
00:22:30,220 --> 00:22:33,340
le navigateur ne certainement pas
soin comment salissant le code est.

500
00:22:33,340 --> 00:22:35,940
Mais il y a encore plus
raison technique convaincante

501
00:22:35,940 --> 00:22:42,580
que Google distribue leur HTML
code dans un tel bâclée, apparemment

502
00:22:42,580 --> 00:22:48,350
manière écrasante tous emballés ensemble
avec très peu way-- très peu

503
00:22:48,350 --> 00:22:51,274
dans la voie de mise en forme comme je le faisais.

504
00:22:51,274 --> 00:22:52,570
>> AUDIENCE: [Inaudible]

505
00:22:52,570 --> 00:22:53,528
>> DAVID J. Malan: Faster?

506
00:22:53,528 --> 00:22:54,040
Pourquoi?

507
00:22:54,040 --> 00:22:55,680
Et qu'est-ce que vous dites, Lydia?

508
00:22:55,680 --> 00:22:56,240
Plus vite?

509
00:22:56,240 --> 00:22:57,281
Pourquoi plus vite?

510
00:22:57,281 --> 00:22:58,156
AUDIENCE: [Inaudible]

511
00:22:58,156 --> 00:23:00,522

512
00:23:00,522 --> 00:23:02,230
DAVID J. Malan: Il y a
pas d'espace pour lire.

513
00:23:02,230 --> 00:23:02,730
Ouais.

514
00:23:02,730 --> 00:23:04,560
Alors, pensez à ce que l'espace est.

515
00:23:04,560 --> 00:23:08,394
Ainsi, chaque caractère sur le clavier prend
une certaine quantité d'espace pour représenter,

516
00:23:08,394 --> 00:23:10,560
soit physiquement, comme il
prend beaucoup de place,

517
00:23:10,560 --> 00:23:13,250
ou en quelque sorte sous le
hotte, qui nécessite de la mémoire.

518
00:23:13,250 --> 00:23:15,740
Et comme un aside-- et nous
parler plus sur ce tomorrow--

519
00:23:15,740 --> 00:23:19,930
chaque caractère sur le clavier
nécessite généralement 8 bits, ou un octet.

520
00:23:19,930 --> 00:23:23,360
Ainsi, un modèle de 8 zéros ou
ceux, ou juste 1 octet, comme nous

521
00:23:23,360 --> 00:23:24,720
les humains diraient généralement.

522
00:23:24,720 --> 00:23:27,690
Voilà donc petit, mais
il est toujours non nulle.

523
00:23:27,690 --> 00:23:29,940
Il est encore une certaine quantité d'espace.

524
00:23:29,940 --> 00:23:36,082
Donc, si un ingénieur ou Google frappe
la barre d'espace qu'une seule fois, et supposons

525
00:23:36,082 --> 00:23:38,540
Google-- il est super-popular--
Supposons qu'un milliard de personnes

526
00:23:38,540 --> 00:23:40,780
visitez leur page d'accueil par jour,
ou d'un nombre de personnes

527
00:23:40,780 --> 00:23:43,290
visitez la page d'accueil d'un
milliards de fois par jour,

528
00:23:43,290 --> 00:23:48,890
combien d'octets supplémentaires a ce
ingénieur logiciel juste coûte Google

529
00:23:48,890 --> 00:23:51,310
en frappant son espace bar une fois?

530
00:23:51,310 --> 00:23:52,692
>> AUDIENCE: [Inaudible]

531
00:23:52,692 --> 00:23:54,150
DAVID J. Malan: Pas tout à fait mauvais.

532
00:23:54,150 --> 00:23:57,070
Juste un temps d'octets d'un milliard.

533
00:23:57,070 --> 00:23:57,871
Alors a--

534
00:23:57,871 --> 00:23:59,120
AUDIENCE: 8 milliards de gigaoctets.

535
00:23:59,120 --> 00:24:00,370
DAVID J. Malan: Non 8 milliards.

536
00:24:00,370 --> 00:24:01,240
8 milliards d'octets.

537
00:24:01,240 --> 00:24:02,410
Mais 1 gigaoctet.

538
00:24:02,410 --> 00:24:04,080
1 gigaoctet serait l'unité de mesure.

539
00:24:04,080 --> 00:24:08,240
S'il ou elle fait deux
espaces, 2 gigaoctets.

540
00:24:08,240 --> 00:24:09,030
Trois gigaoctets.

541
00:24:09,030 --> 00:24:09,530
Droite?

542
00:24:09,530 --> 00:24:11,860
Il évolue cher.

543
00:24:11,860 --> 00:24:16,150
Et dans des cas comme Google,
qui, certes, sont des cas extrêmes,

544
00:24:16,150 --> 00:24:21,450
il y a d'autres questions qui se posent tout simplement
en prenant des décisions très raisonnables

545
00:24:21,450 --> 00:24:25,744
ou de prendre des actions humaines très simples,
parce qu'il a cet effet amplifié.

546
00:24:25,744 --> 00:24:27,660
Donc, l'une des raisons
cela ressemble tellement comprimé

547
00:24:27,660 --> 00:24:30,660
est exactement comme Victoria dit-- était
vient d'être généré par les ordinateurs de toute façon.

548
00:24:30,660 --> 00:24:31,900
Donc, pas une grosse affaire.

549
00:24:31,900 --> 00:24:33,309
Laissez le navigateur comprendre.

550
00:24:33,309 --> 00:24:35,350
Mais elle a aussi délibérément
n'a pas beaucoup d'espace,

551
00:24:35,350 --> 00:24:36,766
parce que l'espace est pas nécessaire.

552
00:24:36,766 --> 00:24:38,250
Et l'espace coûte réellement l'argent.

553
00:24:38,250 --> 00:24:40,670
>> Soit il coûte du temps,
parce que juste à pousser

554
00:24:40,670 --> 00:24:44,670
que beaucoup plus de données sur
siège de google.com juste

555
00:24:44,670 --> 00:24:47,710
a obtenu de prendre une certaine quantité de
le temps, même si elle est millisecondes

556
00:24:47,710 --> 00:24:51,190
ou microsecondes, mais qui ajoute
sur tant d'utilisateurs, ou plus probablement,

557
00:24:51,190 --> 00:24:52,270
il en coûte probablement de l'argent.

558
00:24:52,270 --> 00:24:54,690
Google relie probablement
quelqu'un d'autre dans le monde, un

559
00:24:54,690 --> 00:24:56,398
de ceux peering
des points, et si elles ont

560
00:24:56,398 --> 00:24:59,880
une sorte de relation financière
de sorte que coûte de l'argent de leurs données,

561
00:24:59,880 --> 00:25:01,730
ils pourraient aussi bien
minimiser les données combien

562
00:25:01,730 --> 00:25:04,530
ils cracher sur
leur connexion Internet.

563
00:25:04,530 --> 00:25:07,630
>> Donc, la chose drôle, mais, en fin de compte,
ou peut-être la chose rassurante,

564
00:25:07,630 --> 00:25:11,030
est que même si cela ressemble terriblement
écrasante, à la fin de la journée,

565
00:25:11,030 --> 00:25:16,750
il est toujours les mêmes principes exacts que
cette page très simple ici d'un HTML

566
00:25:16,750 --> 00:25:17,390
page.

567
00:25:17,390 --> 00:25:20,610
Donc, pour résumer et que vous
avoir une version canonique si vous n'êtes pas

568
00:25:20,610 --> 00:25:25,900
suivant le long par le choix ici, ici
pourrait être le plus simple des pages web,

569
00:25:25,900 --> 00:25:28,240
donc quelque chose à jouer avec peut-être plus tard.

570
00:25:28,240 --> 00:25:30,790
>> Eh bien, nous allons introduire un
quelques autres idées maintenant.

571
00:25:30,790 --> 00:25:33,420
Nous sommes sur le point d'introduire
ce qu'on appelle une balise de style.

572
00:25:33,420 --> 00:25:38,110
Nous pouvons styliser cette page
de façon plus intéressante.

573
00:25:38,110 --> 00:25:40,860
Ainsi, alors que HTML email
est tout au sujet de balisage

574
00:25:40,860 --> 00:25:44,470
les données, sorte de spécifier à un
navigateur comment structurer les données,

575
00:25:44,470 --> 00:25:48,110
où le mettre, CSS, ou
feuilles de style en cascade,

576
00:25:48,110 --> 00:25:52,640
est une deuxième langue
généralement obtient amalgamés avec HTML

577
00:25:52,640 --> 00:25:55,670
comme nous allons see-- mais nous pouvons nettoyer
que dans une moment-- qui prend

578
00:25:55,670 --> 00:25:59,850
il le dernier mile, et il stylise elle.

579
00:25:59,850 --> 00:26:02,460
Il obtient les couleurs juste,
la taille de police juste à droite,

580
00:26:02,460 --> 00:26:03,860
le positionnement juste.

581
00:26:03,860 --> 00:26:06,510
Il est tout au sujet de l'esthétique
ou le formatage, pas

582
00:26:06,510 --> 00:26:08,330
les données fondamentales lui-même.

583
00:26:08,330 --> 00:26:11,390
Et la meilleure façon de montrer
cela est peut-être par exemple.

584
00:26:11,390 --> 00:26:15,320
Donc, je vais aller sur
à mon fichier texte simple.

585
00:26:15,320 --> 00:26:17,970
Et dans un instant, je vais
nous guider dans le processus

586
00:26:17,970 --> 00:26:19,360
de le faire nous-mêmes.

587
00:26:19,360 --> 00:26:23,310
>> Je vais revenir à mon dossier
ici et recharger la page juste

588
00:26:23,310 --> 00:26:25,800
pour confirmer à quoi il ressemble.

589
00:26:25,800 --> 00:26:27,190
Voilà où nous en sommes maintenant.

590
00:26:27,190 --> 00:26:31,170
Je me sens comme les enfants jouiraient
ayant une certaine couleur à cette page Web.

591
00:26:31,170 --> 00:26:34,480
Donc, je vais aller ici
dans la tête de la page.

592
00:26:34,480 --> 00:26:38,130
Et je vais faire le style, / style.

593
00:26:38,130 --> 00:26:44,060
Et puis à l'intérieur de cela, je vais
de dire le corps de mon page--

594
00:26:44,060 --> 00:26:46,870
et cette mise en forme est, à
première vue, peut-être un peu

595
00:26:46,870 --> 00:26:49,400
étrange, mais classique.

596
00:26:49,400 --> 00:26:55,010
Je vais dire que l'arrière-plan
couleur de cette page doit être vert.

597
00:26:55,010 --> 00:26:57,960
Et cela est malheureusement
sorte de ne pas la meilleure conception.

598
00:26:57,960 --> 00:27:00,710
Notez que précédemment
dans le monde du HTML,

599
00:27:00,710 --> 00:27:03,190
Je dis que les attributs
sont ces paires clé-valeur.

600
00:27:03,190 --> 00:27:05,760
Quelque chose égale citation
«Quelque chose». Unquote

601
00:27:05,760 --> 00:27:08,810
Dans le monde de CSS, qui était
conçu par des personnes différentes,

602
00:27:08,810 --> 00:27:11,020
ils ont décidé que, dans leur
monde, paires clé-valeur

603
00:27:11,020 --> 00:27:13,920
serait mot colon quelque chose.

604
00:27:13,920 --> 00:27:15,220
Il est donc la même idée, cependant.

605
00:27:15,220 --> 00:27:18,620
Il est d'associer une valeur
avec une certaine clé en quelque sorte

606
00:27:18,620 --> 00:27:20,330
influe sur le comportement de cette page.

607
00:27:20,330 --> 00:27:21,901
>> Et vous pouvez probablement le deviner.

608
00:27:21,901 --> 00:27:24,150
Quel est ce va probablement
à faire même si vous avez jamais

609
00:27:24,150 --> 00:27:27,867
vu HTML ou CSS avant?

610
00:27:27,867 --> 00:27:29,450
AUDIENCE: Changer la couleur de fond.

611
00:27:29,450 --> 00:27:30,560
DAVID J. Malan: Oui,
changer la couleur de fond.

612
00:27:30,560 --> 00:27:33,280
Et en particulier la
la couleur de fond du corps.

613
00:27:33,280 --> 00:27:36,290
Mais dans la mesure où le
corps pour le moment est le web

614
00:27:36,290 --> 00:27:38,870
page-- il est la seule chose
en dessous de la barre de titre really--

615
00:27:38,870 --> 00:27:40,870
il va probablement
influencer la même chose.

616
00:27:40,870 --> 00:27:41,430
Voyons donc.

617
00:27:41,430 --> 00:27:42,490
Sauvons cela.

618
00:27:42,490 --> 00:27:44,310
Rendez-vous ici et recharger.

619
00:27:44,310 --> 00:27:46,140
Il est assez hideux.

620
00:27:46,140 --> 00:27:48,070
Et ce qui se passe
ici est un effet secondaire.

621
00:27:48,070 --> 00:27:49,850
Je viens choisi cette image au hasard.

622
00:27:49,850 --> 00:27:53,305
Pourquoi le vert pas
imprégnant derrière Mickey?

623
00:27:53,305 --> 00:27:54,180
AUDIENCE: [Inaudible]

624
00:27:54,180 --> 00:27:56,880

625
00:27:56,880 --> 00:27:57,880
DAVID J. Malan: Exactement.

626
00:27:57,880 --> 00:28:01,750
Il se trouve que les images, assez
beaucoup toutes les images que nous pourrions utiliser,

627
00:28:01,750 --> 00:28:03,670
sont tous rectangles-- de rectangles.

628
00:28:03,670 --> 00:28:07,710
Même si Mickey a des courbes
à lui-même et a un fond,

629
00:28:07,710 --> 00:28:09,330
Dans ce contexte doit être quelque chose.

630
00:28:09,330 --> 00:28:10,280
Il doit être blanc.

631
00:28:10,280 --> 00:28:11,910
Il doit être noir ou autre chose.

632
00:28:11,910 --> 00:28:13,650
Il peut être transparent.

633
00:28:13,650 --> 00:28:16,100
Et en fait, je pouvais
ouvrir Mickey Mouse ici

634
00:28:16,100 --> 00:28:18,590
dans un programme appelé Photoshop
ou quelque chose de similaire

635
00:28:18,590 --> 00:28:21,176
et changer tout cela blanc
arrière-plan transparent,

636
00:28:21,176 --> 00:28:22,550
de sorte que le vert serait briller à travers.

637
00:28:22,550 --> 00:28:25,980
Mais ce quelque chose que je devrais
de demander à moi-même ou un artiste graphique

638
00:28:25,980 --> 00:28:28,130
ou un concepteur chez moi
société, par exemple,

639
00:28:28,130 --> 00:28:31,490
à faire, d'autant plus que je viens
emprunté celui de l'Internet.

640
00:28:31,490 --> 00:28:33,030
Mais c'est pourquoi ce qui se passe.

641
00:28:33,030 --> 00:28:34,980
>> Alors, que pourrions-nous faire?

642
00:28:34,980 --> 00:28:41,040
Eh bien, nous pourrions vouloir nous dire
vraiment espérons que vous apprécierez votre séjour.

643
00:28:41,040 --> 00:28:44,150
Et pour mettre l'accent, je veux
pour faire de cette forte,

644
00:28:44,150 --> 00:28:48,310
et je vais le dire fort et ouvert
fermer fort et puis rechargez.

645
00:28:48,310 --> 00:28:50,320
Et il est un peu difficile
à voir sur le projecteur

646
00:28:50,320 --> 00:28:53,250
mais peut-être vraiment maintenant
vous saute au un peu plus.

647
00:28:53,250 --> 00:28:56,180
Ainsi, vous pouvez ajouter des italiques dans ce
Ainsi, face gras de cette façon.

648
00:28:56,180 --> 00:28:57,500
Nous pourrions changer les couleurs.

649
00:28:57,500 --> 00:29:01,610
En fait, juste pour le plaisir, je suis
aller de l'avant et de le faire.

650
00:29:01,610 --> 00:29:05,120
Je n'aime pas vraiment comment mon
paragraphes sont ce rapprochés,

651
00:29:05,120 --> 00:29:06,870
donc je pourrais faire quelque chose comme ça.

652
00:29:06,870 --> 00:29:13,310
Je vais dire au navigateur,
changer chaque balise de paragraphe pour avoir,

653
00:29:13,310 --> 00:29:16,952
nous allons say-- fait, vous savez quoi,
nous allons alignez text-align, centre.

654
00:29:16,952 --> 00:29:19,410
Et encore, je sais que cela ne
parce que quelqu'un me l'a enseigné

655
00:29:19,410 --> 00:29:21,118
ou je l'ai regardé dans
une référence en ligne.

656
00:29:21,118 --> 00:29:22,450
Alors permettez-moi de sauver ce.

657
00:29:22,450 --> 00:29:25,070
Et, ah, maintenant je l'ai
centré l'image là.

658
00:29:25,070 --> 00:29:28,490
Et en fait, vous savez quoi, si
Je déplace mon image dans un paragraphe

659
00:29:28,490 --> 00:29:34,510
tag-- donc un troisième paragraphe,
même si elle est pas de texte.

660
00:29:34,510 --> 00:29:36,917
Sauvons cela et recharger.

661
00:29:36,917 --> 00:29:40,000
Maintenant, la page est en train de regarder type
de-- Je veux dire, il est encore assez laid,

662
00:29:40,000 --> 00:29:43,180
mais au moins il semble que je passai
deux minutes au lieu d'une minute

663
00:29:43,180 --> 00:29:43,950
faire.

664
00:29:43,950 --> 00:29:47,200
>> Et donc, progressivement, pouvons-nous faire
ces changements esthétiques maintenant à la page?

665
00:29:47,200 --> 00:29:50,860
Je ne l'ai pas vraiment changé les données dans le
page autre que l'ajout du mot vraiment.

666
00:29:50,860 --> 00:29:52,650
J'ai ajouté des métadonnées, si vous voulez.

667
00:29:52,650 --> 00:29:54,830
Hey, navigateur, faire le
mot "vraiment" gras.

668
00:29:54,830 --> 00:29:56,940
Mais les données ne sont pas forts.

669
00:29:56,940 --> 00:29:57,830
Voilà les métadonnées.

670
00:29:57,830 --> 00:29:59,410
Les données sont «vraiment».

671
00:29:59,410 --> 00:30:02,200
Nous avons donc encore quelques-uns
les mêmes concepts que précédemment.

672
00:30:02,200 --> 00:30:05,990
Maintenant, bien sûr, cela ne figure pas sur le web,
donc je vais faire une dernière étape ici.

673
00:30:05,990 --> 00:30:10,300
>> Je vais aller à hello.html
et juste mettre en évidence et copier ce.

674
00:30:10,300 --> 00:30:12,285
Et maintenant, je vais
aller dans Cloud9, qui

675
00:30:12,285 --> 00:30:13,910
Je vais vous guider à travers dans un instant.

676
00:30:13,910 --> 00:30:17,080
Et les chances sont que vous serez bientôt, si
pas déjà, un écran comme celui-ci.

677
00:30:17,080 --> 00:30:21,080
Et permettez-moi de vous donner un rapide
visite de ce Cloud9 est en réalité.

678
00:30:21,080 --> 00:30:26,590
Donc, encore une fois Cloud 9 est
ce service en nuage

679
00:30:26,590 --> 00:30:30,580
que vous et me donne l'illusion
d'avoir notre propre machine virtuelle

680
00:30:30,580 --> 00:30:33,090
dans le nuage, techniquement
un conteneur dans le nuage,

681
00:30:33,090 --> 00:30:35,160
que nous avons plein
privilèges administratifs à.

682
00:30:35,160 --> 00:30:37,130
Donc, en théorie, personne ne
ailleurs dans le monde a

683
00:30:37,130 --> 00:30:39,152
l'accès à l'écran, je suis
regardant en ce moment,

684
00:30:39,152 --> 00:30:40,860
sauf peut-être les gens
qui gèrent le site,

685
00:30:40,860 --> 00:30:43,470
parce que techniquement ils ont
l'accès physique et ainsi de suite.

686
00:30:43,470 --> 00:30:44,740
>> Alors qu'est-ce que nous voyons dans cet environnement?

687
00:30:44,740 --> 00:30:46,230
Je vais faire un zoom arrière,
parce qu'il est un peu petite.

688
00:30:46,230 --> 00:30:48,104
Et permettez-moi de plus
ici pour un moment.

689
00:30:48,104 --> 00:30:53,210
Sur le côté gauche de mon et votre
écran, il y a un navigateur de fichiers à gauche.

690
00:30:53,210 --> 00:30:55,362
Donc, dans le même esprit
pour Mac OS et Windows.

691
00:30:55,362 --> 00:30:57,070
Celles-ci sont toutes de la
fichiers dans mon compte.

692
00:30:57,070 --> 00:30:59,250
Et par défaut, si votre
compte est comme le mien,

693
00:30:59,250 --> 00:31:05,090
vous verrez ou à bientôt
helloworld.html et readme.md.

694
00:31:05,090 --> 00:31:07,950
Ici à droite, cela est
où vont mes fichiers texte à partir.

695
00:31:07,950 --> 00:31:11,620
Si vous avez déjà utilisé Microsoft
Word ou Notepad ou TextEdit,

696
00:31:11,620 --> 00:31:14,100
c'est la parole de mon édition
de fichiers va aller.

697
00:31:14,100 --> 00:31:16,540
Et puis le plus mystérieux
caractéristique de cet environnement

698
00:31:16,540 --> 00:31:20,100
que nous allons pas vraiment besoin d'utiliser est
ici appelé une fenêtre de terminal.

699
00:31:20,100 --> 00:31:23,390
Si vous avez utilisé DOS
antan, c'est le Linux

700
00:31:23,390 --> 00:31:25,450
ou l'équivalent Linux de DOS.

701
00:31:25,450 --> 00:31:28,190
Il est un interface-- basé sur du texte
pas de clics de souris, pas traîner.

702
00:31:28,190 --> 00:31:30,770
Tout ce que vous pouvez faire est de taper
les commandes, mais ces commandes

703
00:31:30,770 --> 00:31:34,400
peut créer des fichiers, déplacer des fichiers, ouvert
répertoires, répertoires proches,

704
00:31:34,400 --> 00:31:35,740
faire un certain nombre de choses.

705
00:31:35,740 --> 00:31:38,060
Mais pour l'instant, nous allons simplement
passer notre temps ici.

706
00:31:38,060 --> 00:31:39,050
>> Et nous allons le faire.

707
00:31:39,050 --> 00:31:41,008
Si vous êtes dans cette
environnement, vous devriez

708
00:31:41,008 --> 00:31:45,900
être si vous avez créé un espace de travail
déjà, aller de l'avant et juste aller jusqu'à

709
00:31:45,900 --> 00:31:48,690
to File, New un instant.

710
00:31:48,690 --> 00:31:51,740
Et cela vous donnera une nouvelle
onglet ici au milieu.

711
00:31:51,740 --> 00:31:54,250
Et je just-- et celui laissé
aller de l'avant et le faire.

712
00:31:54,250 --> 00:31:59,910
Allons de l'avant et maintenant ne Fichier, Enregistrer
et aller de l'avant et l'appeler hello.html,

713
00:31:59,910 --> 00:32:02,740
à ne pas confondre avec
helloworld.html, qui

714
00:32:02,740 --> 00:32:06,910
est venu avec votre nouveau compte gratuit,
qui est juste un exemple de fichier.

715
00:32:06,910 --> 00:32:11,020
Vous verrez apparaître tout à coup,
très probablement sur le côté gauche,

716
00:32:11,020 --> 00:32:12,810
et l'onglet sera toujours ouverte.

717
00:32:12,810 --> 00:32:21,300
Et laissez-moi vous encourage maintenant à recréer
ce fichier ou certaines variantes de ceux-ci.

718
00:32:21,300 --> 00:32:24,607
Et si vous ne pouvez pas tout voir sur le
écran, cela est identique aux diapositives

719
00:32:24,607 --> 00:32:26,190
que vous avez probablement dans un autre onglet.

720
00:32:26,190 --> 00:32:29,296
>> Donc en bref, faites votre première page web,
l'enregistrer, puis dans un instant,

721
00:32:29,296 --> 00:32:31,170
Je vais vous montrer comment vous
peut réellement voir ce.

722
00:32:31,170 --> 00:32:32,970
Mais changer au moins une chose.

723
00:32:32,970 --> 00:32:35,400
Changer helloworld à
quelque chose de votre choix,

724
00:32:35,400 --> 00:32:39,821
de sorte que vous êtes convaincu que c'est votre
déposer et non celui que je viens de créer.

725
00:32:39,821 --> 00:32:40,320
D'accord.

726
00:32:40,320 --> 00:32:43,804
Et quand vous ready-- pas
rush-- lorsque vous êtes prêt,

727
00:32:43,804 --> 00:32:46,220
aller de l'avant et enregistrez le fichier
une fois que vous avez fait ces changements.

728
00:32:46,220 --> 00:32:49,540
Et si vous cliquez sur le
button up top Run, cette

729
00:32:49,540 --> 00:32:53,610
devrait ouvrir un nouvel onglet qui indiquera
vous ce que l'URL, vous pouvez visiter votre dossier,

730
00:32:53,610 --> 00:32:56,380
mais il pourrait prendre un moment pour
je cite "start Apache", qui

731
00:32:56,380 --> 00:32:58,820
est le nom du serveur.

732
00:32:58,820 --> 00:33:02,430
Soyez donc prudent de faire exactement
ce qui est dans le fichier en fin de compte.

733
00:33:02,430 --> 00:33:04,610
Donc maintenant, je vais un zoom avant.

734
00:33:04,610 --> 00:33:07,780
Si je commence à taper
open-support HTML, un avis

735
00:33:07,780 --> 00:33:09,650
ça me demandant de terminer ma pensée.

736
00:33:09,650 --> 00:33:13,750
Et si je terminais ma pensée, il
me donne automatiquement la balise de fermeture.

737
00:33:13,750 --> 00:33:17,190
Mais l'attente est alors je vais frapper
Entrée, puis déplacer à l'intérieur il y

738
00:33:17,190 --> 00:33:21,180
et ne diriger à l'intérieur et
alors je fais corps à l'intérieur.

739
00:33:21,180 --> 00:33:24,430
Et il est un peu bizarre au début,
parce qu'il fait le travail pour vous,

740
00:33:24,430 --> 00:33:27,110
mais se rendre compte que finalement,
il vous évite les frappes.

741
00:33:27,110 --> 00:33:30,500
Et en fait, une caractéristique très commune
la programmation des environnements ces jours-ci

742
00:33:30,500 --> 00:33:33,260
à la fois pour le développement web comme
Ceci et la programmation proprement dite,

743
00:33:33,260 --> 00:33:36,960
dont nous parlerons demain,
est ces caractéristiques de l'auto-complétion,

744
00:33:36,960 --> 00:33:39,710
les choses qui permettent seulement
programmeur ou un designer

745
00:33:39,710 --> 00:33:42,010
taper moins de frappes à
accomplir la même chose.

746
00:33:42,010 --> 00:33:43,176
Parfois, il est bon, cependant.

747
00:33:43,176 --> 00:33:44,560
Parfois, il est tout simplement ennuyeux.

748
00:33:44,560 --> 00:33:49,290

749
00:33:49,290 --> 00:33:54,010
Et, encore une fois, une fois que vous avez transcrite
la glissière ou une variante de celui-ci,

750
00:33:54,010 --> 00:33:57,360
vous pouvez cliquer sur le bouton Exécuter en haut.

751
00:33:57,360 --> 00:33:59,910
Et puis dans le fond
fenêtre, vous serez informé

752
00:33:59,910 --> 00:34:04,290
à quel URL vous pouvez visiter votre page Web.

753
00:34:04,290 --> 00:34:08,790
Mine, par exemple, est à
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
et ainsi de suite.

755
00:34:11,480 --> 00:34:14,580
Très bien, alors, laissez moi-- des questions?

756
00:34:14,580 --> 00:34:19,460
Toutes les autres questions au sujet juste de
ce travail avant d'ajouter des fonctionnalités?

757
00:34:19,460 --> 00:34:21,692
Et permettez-moi de proposer, juste
pour obtenir les gens comfortable--

758
00:34:21,692 --> 00:34:24,400
parce qu'il est une chose juste
copier-coller aveuglément ce que je l'ai fait.

759
00:34:24,400 --> 00:34:27,177
Mais juste pour que les gens se débattent
avec au moins un à faire,

760
00:34:27,177 --> 00:34:28,510
Je vais tourner de la musique.

761
00:34:28,510 --> 00:34:32,630
Je vais proposer une liste de
choses que vous pouvez potentiellement ajouter.

762
00:34:32,630 --> 00:34:34,086
Et vous pouvez certainement utiliser Google.

763
00:34:34,086 --> 00:34:36,210
Et pourquoi ne pas nous venons de
proposez que vous essayez de résoudre

764
00:34:36,210 --> 00:34:38,710
au moins un problème particulier ici.

765
00:34:38,710 --> 00:34:45,090
Donc, en termes d'étiquettes,
permettez-moi de réutiliser cette ici.

766
00:34:45,090 --> 00:34:48,280
>> En fait, laissez-moi mettre
sous une forme textuelle.

767
00:34:48,280 --> 00:35:02,380
Disons que, parmi les balises que nous pourrions
utiliser voici quelques balises ici.

768
00:35:02,380 --> 00:35:06,090
Nous avons vu l'étiquette de paragraphe.

769
00:35:06,090 --> 00:35:07,850
Maintenant, il va à l'auto-complet.

770
00:35:07,850 --> 00:35:12,220
Paragraphe tag, la balise d'ancrage.

771
00:35:12,220 --> 00:35:15,250
Disons que vous voulez
faire quelque chose de plus grand,

772
00:35:15,250 --> 00:35:19,480
de sorte que vous pourriez like--
la balise span peut vous aider.

773
00:35:19,480 --> 00:35:23,010
Eh bien, vous pourriez avoir besoin d'aide
pour que, dans un instant.

774
00:35:23,010 --> 00:35:24,830
Nous avons vu div.

775
00:35:24,830 --> 00:35:26,170
Vous verrez qu'il ya table.

776
00:35:26,170 --> 00:35:27,928
Il quelque chose appelé tr, td.

777
00:35:27,928 --> 00:35:30,736

778
00:35:30,736 --> 00:35:32,860
Th, td.

779
00:35:32,860 --> 00:35:34,770
Revenez dans un instant.

780
00:35:34,770 --> 00:35:36,590
Que peut-être à portée de main?

781
00:35:36,590 --> 00:35:38,310
Il y a fort.

782
00:35:38,310 --> 00:35:43,640
Il y a un accent, ou plutôt em.

783
00:35:43,640 --> 00:35:50,110
There's-- quoi d'autre
pourriez vous avez envie d'ici?

784
00:35:50,110 --> 00:35:51,930
Eh bien, nous allons jeter un
regarder cela ensemble.

785
00:35:51,930 --> 00:35:53,230
Forme, que nous avons vu.

786
00:35:53,230 --> 00:35:54,130
Il y a la forme.

787
00:35:54,130 --> 00:35:56,500
Il y a entrée et quelques autres.

788
00:35:56,500 --> 00:35:58,924

789
00:35:58,924 --> 00:36:00,090
Très bien, alors nous allons le faire.

790
00:36:00,090 --> 00:36:02,330
Pour répondre à un de Victoria
question, laissez-moi d'abord

791
00:36:02,330 --> 00:36:05,020
assurez-vous que tout le monde est
en mesure d'obtenir leur travail de bonjour.

792
00:36:05,020 --> 00:36:06,900
Alors permettez-moi de vous présenter
un couple d'autres idées.

793
00:36:06,900 --> 00:36:09,209
Ensuite, nous allons laisser les gens à résoudre
un problème sur leur propre.

794
00:36:09,209 --> 00:36:11,500
Ensuite, nous allons effectivement revenir
à cette notion d'une forme,

795
00:36:11,500 --> 00:36:14,950
et nous allons effectivement re-mettre en œuvre
ainsi que l'interface frontale,

796
00:36:14,950 --> 00:36:16,450
pour ainsi dire, pour Google lui-même.

797
00:36:16,450 --> 00:36:19,700
Nous allons utiliser Google comme le back-end et laissez
faire le travail dur, la recherche,

798
00:36:19,700 --> 00:36:22,760
mais nous recréons l'extrémité avant
de Google et le formulaire de recherche

799
00:36:22,760 --> 00:36:24,520
qu'ils ont sur leur propre page d'accueil.

800
00:36:24,520 --> 00:36:27,050
Et nous reviendrons
ces balises en un instant.

801
00:36:27,050 --> 00:36:30,270
>> Donc, ce fut ce que je
proposé il y a un instant.

802
00:36:30,270 --> 00:36:33,940
Nous pouvons ajouter la stylisation à un
page à l'intérieur de cette balise de style,

803
00:36:33,940 --> 00:36:36,950
et nous pouvons styliser l'arrière-plan
la couleur, l'alignement du texte,

804
00:36:36,950 --> 00:36:39,000
que ce soit au centre ou à gauche ou à droite.

805
00:36:39,000 --> 00:36:41,630
Mais très vite vous le feriez
trouver ou un concepteur web

806
00:36:41,630 --> 00:36:44,060
trouveraient que cette
devient un peu lourde,

807
00:36:44,060 --> 00:36:48,330
parce que vous faites ce qui est
appelé le mélange contenu

808
00:36:48,330 --> 00:36:50,120
avec la présentation de celui-ci.

809
00:36:50,120 --> 00:36:53,756
Vous mélangez vos données
et l'esthétique de celui-ci.

810
00:36:53,756 --> 00:36:56,380
Et en fait, si vous considérez
ce qui va se passer sur time--

811
00:36:56,380 --> 00:36:58,350
ceci est très faible
page Web, bien sûr.

812
00:36:58,350 --> 00:37:01,590
Mais si j'ajouter du contenu à cette page
et ajouter du style à cette page,

813
00:37:01,590 --> 00:37:04,650
la page devient très rapidement
plus et plus et plus longtemps.

814
00:37:04,650 --> 00:37:07,510
Et suppose que je veux
une deuxième page Web

815
00:37:07,510 --> 00:37:09,010
partage certains de ces attributs.

816
00:37:09,010 --> 00:37:12,350
Supposons que ma deuxième page web pour mon
site-- aussi, je veux centre de tout,

817
00:37:12,350 --> 00:37:14,960
et je veux aussi tout
avec un fond vert.

818
00:37:14,960 --> 00:37:17,940
Je suis assez bien devoir
copier et coller certaines de ces lignes

819
00:37:17,940 --> 00:37:20,730
dans ce second fichier, qui se sent bien.

820
00:37:20,730 --> 00:37:22,030
Il va résoudre le problème.

821
00:37:22,030 --> 00:37:26,060
>> Mais si je veux une troisième page
ou d'une 30 page ou une page 40e?

822
00:37:26,060 --> 00:37:28,730
Maintenant, je vais être copier et
coller beaucoup de code en double

823
00:37:28,730 --> 00:37:30,430
dans plusieurs fichiers.

824
00:37:30,430 --> 00:37:32,600
Et donc supposer que
Je décide ou je l'ai dit,

825
00:37:32,600 --> 00:37:34,780
hé, nous ne sommes pas en utilisant un
fond vert plus.

826
00:37:34,780 --> 00:37:36,380
Nous allons commencer à utiliser orange.

827
00:37:36,380 --> 00:37:38,690
Qu'est-ce que vous avez à changer?

828
00:37:38,690 --> 00:37:42,900
Eh bien, vous devez changer ce style
du vert à l'orange dans combien de places?

829
00:37:42,900 --> 00:37:44,920
Comme 30 ou 40 places.

830
00:37:44,920 --> 00:37:45,900
Il est fastidieux.

831
00:37:45,900 --> 00:37:47,039
Il est sujet à l'erreur.

832
00:37:47,039 --> 00:37:49,580
Il y a un certain nombre de raisons
où vous ne voudriez pas induire

833
00:37:49,580 --> 00:37:51,840
ce genre de douleur pour vous-même.

834
00:37:51,840 --> 00:37:54,760
Et ça ne serait pas agréable
si nous pouvions prendre ce que je viens

835
00:37:54,760 --> 00:37:58,240
mis entre ces deux jaunes
balises, ces balises de style,

836
00:37:58,240 --> 00:38:04,050
facteur it out, et de mettre tout mon
stylisation dans un fichier central

837
00:38:04,050 --> 00:38:08,470
que tous les 30 ou 40 de mes autres fichiers
emprunter de ou en quelque sorte de référence,

838
00:38:08,470 --> 00:38:11,640
pas contrairement à la mise en réseau
diagrammes que nous faisions auparavant?

839
00:38:11,640 --> 00:38:15,030
>> Donc, si je vais ici, je suis
va effectivement proposer

840
00:38:15,030 --> 00:38:17,880
que nous remplaçons la
balise de style avec quelque chose

841
00:38:17,880 --> 00:38:21,620
appelé la balise link, qui
est horriblement, horriblement nommé,

842
00:38:21,620 --> 00:38:24,370
parce que vous n'utilisez pas le
lien tag pour créer ce

843
00:38:24,370 --> 00:38:26,380
nous, les humains connaissons comme un lien dans une page Web.

844
00:38:26,380 --> 00:38:29,750
Pour cela, vous utilisez qui tag?

845
00:38:29,750 --> 00:38:31,464
Comment créer un lien dans une page Web?

846
00:38:31,464 --> 00:38:32,130
AUDIENCE: Le a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. Malan: L'un ou l'ancre
tag, qui est allé à Disney avant.

848
00:38:34,870 --> 00:38:39,090
La balise de lien ici dit
this-- lien vers un fichier appelé

849
00:38:39,090 --> 00:38:44,350
styles.css, la relation à laquelle
va être qu'il est mon stylesheet.

850
00:38:44,350 --> 00:38:48,290
Donc, c'est l'un des les S dans
CSS-- feuilles de style en cascade.

851
00:38:48,290 --> 00:38:50,490
sheet-- deux les S en style CSS.

852
00:38:50,490 --> 00:38:52,550
Cascading feuille de style.

853
00:38:52,550 --> 00:38:58,640
Cela signifie simplement, hé, navigateur, aller
trouver styles.css sur le serveur local

854
00:38:58,640 --> 00:39:01,870
et l'utiliser comme votre feuille de style,
ce qui signifie que l'intérieur de ce fichier

855
00:39:01,870 --> 00:39:05,310
va être tous les
stylisations que nous venons de faire.

856
00:39:05,310 --> 00:39:07,396
Et qu'est-ce que le fichier
pourrait ressembler à ceci.

857
00:39:07,396 --> 00:39:10,020
Et je vais le faire est un rapide
par exemple, parce que nous ne devons

858
00:39:10,020 --> 00:39:12,000
pour obtenir trop dans les mauvaises herbes ici.

859
00:39:12,000 --> 00:39:17,840
Mais si je copie ce, ce que je propose
est qu'un programmeur créer un nouveau fichier,

860
00:39:17,840 --> 00:39:24,450
coller dans ces lines--
whoops-- coller dans ces lignes,

861
00:39:24,450 --> 00:39:32,270
enregistrer comme styles.css, puis, dans
l'autre fichier, supprimer tout cela

862
00:39:32,270 --> 00:39:35,450
et de le remplacer à la place
avec cette balise de lien.

863
00:39:35,450 --> 00:39:43,090
Alors que si je me connecte href = "styles.css",
la relation doit être "stylesheet"

864
00:39:43,090 --> 00:39:44,170
à proximité tag.

865
00:39:44,170 --> 00:39:45,250
Sauvegarde le.

866
00:39:45,250 --> 00:39:47,000
Retour à mon helloworld.

867
00:39:47,000 --> 00:39:48,690
Recharger.

868
00:39:48,690 --> 00:39:51,290
>> Littéralement rien n'a été fait.

869
00:39:51,290 --> 00:39:54,710
C'est une bonne chose, parce que ce
signifie qu'il est en fait tout travail.

870
00:39:54,710 --> 00:39:58,860
Pour prouver que beaucoup, suppose que je fais
typo, et ce que j'appelle "Styles.css"

871
00:39:58,860 --> 00:40:03,080
avec un S majuscule, ce qui est
incorrect, puis recharger.

872
00:40:03,080 --> 00:40:05,470
Maintenant, vous pouvez voir qu'il ne fonctionne tout simplement pas.

873
00:40:05,470 --> 00:40:06,362
Maintenant pourquoi?

874
00:40:06,362 --> 00:40:08,070
Eh bien, nous allons utiliser un
technique à partir plus tôt.

875
00:40:08,070 --> 00:40:10,153
Laissez-moi aller de l'avant et,
mon navigateur, Chrome, je suis

876
00:40:10,153 --> 00:40:12,900
va ouvrir cette spéciale
onglet réseau comme avant,

877
00:40:12,900 --> 00:40:15,560
et laissez-moi recharger la page.

878
00:40:15,560 --> 00:40:19,341
Que faites-vous pas surpris de voir maintenant?

879
00:40:19,341 --> 00:40:20,840
Ou peut-être vous êtes surpris de le voir.

880
00:40:20,840 --> 00:40:23,225
De toute façon, ce que vous voyez maintenant?

881
00:40:23,225 --> 00:40:24,100
AUDIENCE: [Inaudible]

882
00:40:24,100 --> 00:40:24,770
DAVID J. Malan: Il est introuvable.

883
00:40:24,770 --> 00:40:25,680
Pourquoi est-il pas trouvé?

884
00:40:25,680 --> 00:40:28,480
Eh bien, le capital Styles.css--
-S- N'existe pas.

885
00:40:28,480 --> 00:40:29,230
Je misnamed il.

886
00:40:29,230 --> 00:40:30,430
typo simple.

887
00:40:30,430 --> 00:40:33,816
Mais je suis en train compréhensible maintenant
404, parce que le serveur dit, hey,

888
00:40:33,816 --> 00:40:34,440
il est introuvable.

889
00:40:34,440 --> 00:40:36,300
Littéralement, je ne sais pas
où ce fichier est.

890
00:40:36,300 --> 00:40:38,880
Donc, par conséquent, le navigateur
vous montre ce qu'il peut,

891
00:40:38,880 --> 00:40:42,860
le contenu brut de la page,
qui était un 200, le code HTML,

892
00:40:42,860 --> 00:40:45,390
mais la stylisation ne peut pas
ajouter par la suite.

893
00:40:45,390 --> 00:40:47,120
Et voici ce qui signifie en cascade.

894
00:40:47,120 --> 00:40:49,070
Vous pouvez sorte d'ajouter
après, et ce genre de

895
00:40:49,070 --> 00:40:50,874
affine l'esthétique de la page Web.

896
00:40:50,874 --> 00:40:53,790
Et vous pouvez même l'emporter sur celui
styles avec encore d'autres fichiers de feuille de style

897
00:40:53,790 --> 00:40:54,700
si tu veux.

898
00:40:54,700 --> 00:40:57,780
Il ne le trouve pas, cependant, dans ce cas,
parce que bien sûr, je misnamed il.

899
00:40:57,780 --> 00:41:00,330
Je dois donc de fixer cette première.

900
00:41:00,330 --> 00:41:04,667
>> Donc, nous allons aller de l'avant et
proposer ce qui suit.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Allons de l'avant et faire cela.

903
00:41:11,140 --> 00:41:14,220
À partir avec peut-être
votre fichier helloworld,

904
00:41:14,220 --> 00:41:17,740
permettez-moi simplement inviter un couple
des suggestions en vedette.

905
00:41:17,740 --> 00:41:20,400
Donc, Victoria, vous vouliez
rendre le texte plus grand, non?

906
00:41:20,400 --> 00:41:24,555
Très bien, alors nous pouvons
ne rendre le texte plus grand.

907
00:41:24,555 --> 00:41:26,860
Et nous chaque arrachez
juste un problème à résoudre.

908
00:41:26,860 --> 00:41:30,867
Rendre le texte plus grand.

909
00:41:30,867 --> 00:41:32,700
Je ne vais pas déranger
écrit lorsque nous

910
00:41:32,700 --> 00:41:35,600
disposer d'une technologie de balle juste ici.

911
00:41:35,600 --> 00:41:39,970
Donc, certains problèmes.

912
00:41:39,970 --> 00:41:44,670
Nous allons donc essayer
pour rendre le texte plus grand.

913
00:41:44,670 --> 00:41:45,170
D'accord.

914
00:41:45,170 --> 00:41:48,360
Que voudrait-on proposer?

915
00:41:48,360 --> 00:41:50,332
Que pourrions-nous vouloir
à faire dans une page web?

916
00:41:50,332 --> 00:41:52,040
Venons-en avec un
courte liste des choses

917
00:41:52,040 --> 00:41:55,366
puis déléguer au
groupe pour comprendre cela.

918
00:41:55,366 --> 00:41:56,270
>> AUDIENCE: [Inaudible]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. Malan: OK, le texte de la position
sur les différents côtés de la page?

920
00:42:02,251 --> 00:42:02,750
D'accord.

921
00:42:02,750 --> 00:42:04,620
Autre chose.

922
00:42:04,620 --> 00:42:05,784
>> AUDIENCE: [Inaudible]

923
00:42:05,784 --> 00:42:06,700
DAVID J. Malan: Il est.

924
00:42:06,700 --> 00:42:08,720
Ainsi, un gif est juste un
format de fichier différent.

925
00:42:08,720 --> 00:42:12,830
Nous avons juste utilisé, ce qui, a
png ou jpg probablement?

926
00:42:12,830 --> 00:42:14,480
Nous avons utilisé un jpg.

927
00:42:14,480 --> 00:42:16,780
Si vous êtes curieux, une excessive
répondre à votre question

928
00:42:16,780 --> 00:42:19,404
est un jpg est généralement utilisé pour
photographies, car il prend en charge

929
00:42:19,404 --> 00:42:21,500
des millions de couleurs ou couleur 24 bits.

930
00:42:21,500 --> 00:42:26,930
Un gif est généralement utilisé pour, comme,
Internet Memes ces animations days--,

931
00:42:26,930 --> 00:42:28,810
gifs animés comme.

932
00:42:28,810 --> 00:42:32,320
Mais il arrive d'utiliser une couleur plus petite
palette, seulement 256 couleurs possibles,

933
00:42:32,320 --> 00:42:35,230
mais il soutient
la transparence et l'animation.

934
00:42:35,230 --> 00:42:40,330
Et puis il y a png, qui soutient
transparence et plus de couleurs

935
00:42:40,330 --> 00:42:41,300
mais pas d'animation.

936
00:42:41,300 --> 00:42:42,133
Il est donc un compromis.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Donc, l'ajout d'un gif, bien que,
serait fonctionnellement

939
00:42:46,060 --> 00:42:48,396
équivalent à l'ajout d'un png ou jpg.

940
00:42:48,396 --> 00:42:49,110
Ouais.

941
00:42:49,110 --> 00:42:50,550
Source de l'image est égale.

942
00:42:50,550 --> 00:42:51,590
Donc, quelque chose d'autre.

943
00:42:51,590 --> 00:42:57,288
Venons-en à quelque chose qui
nous avons envoyé à Victoria à faire ici.

944
00:42:57,288 --> 00:42:59,209
>> AUDIENCE: Ajouter des boutons pour une forme.

945
00:42:59,209 --> 00:43:00,000
DAVID J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Donc, ajouter des boutons pour une forme.

947
00:43:02,179 --> 00:43:03,470
Et nous ferons un ensemble.

948
00:43:03,470 --> 00:43:07,220
Donc, ce sera un enchaînement parfait
juste après ce défi.

949
00:43:07,220 --> 00:43:10,357
Rien d'autre?

950
00:43:10,357 --> 00:43:11,440
Que pourriez-vous faire?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Le web se sent très décevante
si cela est tout ce que nous pouvons faire.

953
00:43:16,516 --> 00:43:18,140
AUDIENCE: Changer la couleur du texte.

954
00:43:18,140 --> 00:43:19,500
DAVID J. Malan: Changer quoi?

955
00:43:19,500 --> 00:43:20,666
AUDIENCE: Couleur du texte.

956
00:43:20,666 --> 00:43:22,311
DAVID J. Malan: Change la couleur du texte.

957
00:43:22,311 --> 00:43:22,810
D'accord.

958
00:43:22,810 --> 00:43:23,790
Donc, nous allons le faire.

959
00:43:23,790 --> 00:43:27,209
Juste à nouveau de sorte que vous n'êtes pas, juste
par cœur, de faire exactement ce que je fais,

960
00:43:27,209 --> 00:43:29,500
Je vais tourner sur la musique
pour peut-être cinq minutes ici.

961
00:43:29,500 --> 00:43:30,450
Vous êtes invités à utiliser Google.

962
00:43:30,450 --> 00:43:33,130
Vous êtes les bienvenus pour me demander, et
Je murmure un indice dans votre oreille.

963
00:43:33,130 --> 00:43:35,171
Vous êtes invités à regarder
plus sur les épaules des autres.

964
00:43:35,171 --> 00:43:37,340
Mais seulement une solution de ces problèmes.

965
00:43:37,340 --> 00:43:40,190
Mais nous ferons le dernier, le
forme un, si nous pouvions, ensemble.

966
00:43:40,190 --> 00:43:42,790
Donc, cinq minutes pour résoudre
l'un de ces problèmes

967
00:43:42,790 --> 00:43:46,780
en utilisant Google, l'intuition, ou tout
d'autres moyens disponibles pour vous.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIC PLAYING]

969
00:43:48,630 --> 00:43:49,130
D'accord.

970
00:43:49,130 --> 00:43:50,838
Pas de soucis si vous voulez
de garder le bricolage,

971
00:43:50,838 --> 00:43:53,880
mais je vais gâcher un couple
de ces réponses.

972
00:43:53,880 --> 00:43:57,986
Donc, la première suggestion de
Victoria était de rendre le texte plus gros.

973
00:43:57,986 --> 00:43:59,360
Donc, il y a quelques façons de le faire.

974
00:43:59,360 --> 00:44:01,530
Je suis actuellement restauré
mon écran à cette taille,

975
00:44:01,530 --> 00:44:04,310
si j'ai zoomé
artificiellement juste pour voir les choses.

976
00:44:04,310 --> 00:44:07,470
Et nous allons le faire.

977
00:44:07,470 --> 00:44:11,380
Laissez-moi aller de l'avant et de saisir
un texte générique latine

978
00:44:11,380 --> 00:44:19,540
juste pour que nous avons quelque chose à travailler avec.

979
00:44:19,540 --> 00:44:20,715
Alors donnez-moi un instant.

980
00:44:20,715 --> 00:44:21,840
Je vais faire trois paragraphes.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
D'ACCORD.

983
00:44:53,930 --> 00:44:55,560
Ce sera un meilleur exemple.

984
00:44:55,560 --> 00:44:57,840
Donc, pour les curieux, en
mon hello.html, je viens

985
00:44:57,840 --> 00:45:01,645
collé trois absurde
paragraphes latins

986
00:45:01,645 --> 00:45:03,270
juste si nous avons un peu de texte pour travailler avec.

987
00:45:03,270 --> 00:45:06,720
Et l'objectif de Victoria était de
faire partie du texte plus grand.

988
00:45:06,720 --> 00:45:09,879
Je pourrais donc, comme auparavant, allez ici.

989
00:45:09,879 --> 00:45:11,170
Et permettez-moi de le faire de la bonne façon.

990
00:45:11,170 --> 00:45:13,253
Je vais avoir un lien
tag qui pointe vers un fichier

991
00:45:13,253 --> 00:45:20,560
appelé "styles.css," la relation
qui est à nouveau "stylesheet".

992
00:45:20,560 --> 00:45:25,221
Et puis je vais sauver ce
et d'ouvrir cette "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Donc, comme avant, je le
capacité dans ce fichier CSS

994
00:45:28,940 --> 00:45:31,569
à réellement remplacer la valeur par défaut
esthétique d'une page web,

995
00:45:31,569 --> 00:45:33,860
et l'esthétique par défaut,
bien sûr, sont assez terne.

996
00:45:33,860 --> 00:45:36,943
Il est une sorte de taille de police normale, noir
texte, fond blanc, et ainsi de suite.

997
00:45:36,943 --> 00:45:39,440
Donc, supposons que je veux faire
tous ce texte plus grand.

998
00:45:39,440 --> 00:45:40,460
Je pourrais faire quelques choses.

999
00:45:40,460 --> 00:45:43,750
Dans mon fichier styles.css, je
pourrait dire, vous savez quoi,

1000
00:45:43,750 --> 00:45:46,950
appliquer la suivante
le corps de ma page.

1001
00:45:46,950 --> 00:45:51,390
Allez-y et faire le
la taille de police 24 points,

1002
00:45:51,390 --> 00:45:54,130
qui est un numéro que je puisse
utiliser dans Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Permettez-moi de revenir à mon web
page, et la recharger,

1004
00:45:57,620 --> 00:45:59,640
et vous pouvez voir que
il est déjà beaucoup plus grand.

1005
00:45:59,640 --> 00:46:02,223
Et nous pouvons obtenir un peu fou,
tout comme nous pouvons sur un desktop--

1006
00:46:02,223 --> 00:46:03,670
faire 96 points.

1007
00:46:03,670 --> 00:46:04,950
Recharger.

1008
00:46:04,950 --> 00:46:07,610
Et ça devient un peu
lourde à ce stade.

1009
00:46:07,610 --> 00:46:09,500
>> Mais je pourrais être un peu plus précis.

1010
00:46:09,500 --> 00:46:14,530
Au lieu d'appliquer cette
stylesheet au corps de ma page,

1011
00:46:14,530 --> 00:46:21,740
quoi d'autre pourrais-je l'appliquer à la place,
quelle autre étiquette qui pourrait encore

1012
00:46:21,740 --> 00:46:25,445
fonction de la même manière?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIENCE: La balise p?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. Malan: P tag.

1015
00:46:27,360 --> 00:46:29,350
Donc, la tête ne serait pas
correct, parce que la tête,

1016
00:46:29,350 --> 00:46:31,300
vous ne pouvez pas réellement
contrôler l'esthétique.

1017
00:46:31,300 --> 00:46:32,700
Il y a soit du texte ou non.

1018
00:46:32,700 --> 00:46:36,760
Mais le p tag-- je peux plonger dans un peu
plus profond, pour ainsi dire, au paragraphe

1019
00:46:36,760 --> 00:46:37,350
Mots clés.

1020
00:46:37,350 --> 00:46:41,600
Et même si il y a trois,
qui est parfaitement bien, parce que dans CSS,

1021
00:46:41,600 --> 00:46:44,900
quand je viens de dire "p", ce
des moyens d'appliquer la suivante

1022
00:46:44,900 --> 00:46:48,300
à toute étiquette qui correspond à cette
sélecteur, le sélecteur juste

1023
00:46:48,300 --> 00:46:49,430
étant le nom de la balise.

1024
00:46:49,430 --> 00:46:52,350
Donc, chaque fois que vous voyez un
"P" appliquer la taille de la police,

1025
00:46:52,350 --> 00:46:55,222
et nous allons le rendre plus
raisonnable again-- 24 points.

1026
00:46:55,222 --> 00:46:56,930
Et tu sais quoi,
pour faire bonne mesure,

1027
00:46:56,930 --> 00:46:59,810
nous allons faire la couleur
juste rouge pour le moment.

1028
00:46:59,810 --> 00:47:03,740
Et maintenant, si je recharge, maintenant nous
voir trois paragraphes laid.

1029
00:47:03,740 --> 00:47:07,180
>> Mais maintenant, suppose que je suis une sorte
de-- Je veux que le premier paragraphe

1030
00:47:07,180 --> 00:47:08,210
pour sauter à l'utilisateur.

1031
00:47:08,210 --> 00:47:11,150
Je ne veux pas d'augmenter simplement
la taille de la police de tout.

1032
00:47:11,150 --> 00:47:16,105
Et donc je veux vraiment identifier ou
la distinction entre ces paragraphes.

1033
00:47:16,105 --> 00:47:18,730
Donc, nous allons nous débarrasser du rouge,
parce que ce juste un peu collant,

1034
00:47:18,730 --> 00:47:23,885
et nous allons aller de l'avant et de faire la
taille de la police de 12 points par défaut,

1035
00:47:23,885 --> 00:47:26,260
de sorte que nous sommes de retour à quelque chose
un peu plus raisonnable.

1036
00:47:26,260 --> 00:47:29,190
Et maintenant, je veux juste augmenter la
taille de la police du premier alinéa.

1037
00:47:29,190 --> 00:47:31,440
Je peux le faire dans quelques
manières, mais d'une façon qui est

1038
00:47:31,440 --> 00:47:37,180
peut-être plus d'enseignement à la
moment est de faire ce qui suit.

1039
00:47:37,180 --> 00:47:43,280
Laissez-moi aller de l'avant et de dire, ce
paragraphe a un ID unique de «premier».

1040
00:47:43,280 --> 00:47:45,000
Je pourrais appeler ce que je veux.

1041
00:47:45,000 --> 00:47:46,874
Je pourrais appeler cela "foo"
ou tout autre mot,

1042
00:47:46,874 --> 00:47:49,290
mais je vais lui donner une certaine
nom sémantiquement significatif

1043
00:47:49,290 --> 00:47:50,320
comme «premier».

1044
00:47:50,320 --> 00:47:54,790
Ceci est l'identifiant unique,
l'ID, pour mon premier paragraphe.

1045
00:47:54,790 --> 00:47:59,360
>> Qu'est-ce que je peux maintenant faire dans mon stylesheet
est d'être un peu plus précis.

1046
00:47:59,360 --> 00:48:02,330
Au lieu de dire, appliquer
ce qui suit à la balise p,

1047
00:48:02,330 --> 00:48:04,890
Je peux dire que le following--
appliquer ce qui suit,

1048
00:48:04,890 --> 00:48:11,000
ou sélectionnez l'élément HTML
qui a un ID unique de «premier».

1049
00:48:11,000 --> 00:48:12,350
Qu'est-ce que je veux appliquer à elle?

1050
00:48:12,350 --> 00:48:15,250
Une taille de police de 24 points.

1051
00:48:15,250 --> 00:48:16,640
J'ai donc deux sélecteurs maintenant.

1052
00:48:16,640 --> 00:48:19,690
On fait tous les
paragraphes 12 points.

1053
00:48:19,690 --> 00:48:24,960
Mais celui-ci, d'autant qu'il vient
second-- il vient en dernier dans le file--

1054
00:48:24,960 --> 00:48:27,090
ce qui a un effet en cascade.

1055
00:48:27,090 --> 00:48:30,200
Je viens de faire tout mon
Les balises de paragraphe 12 points,

1056
00:48:30,200 --> 00:48:34,350
mais maintenant cascades et
l'emporte sur que, pour tous les éléments

1057
00:48:34,350 --> 00:48:38,800
dans la page, toute balise dans la page dont
ID unique est entre guillemets "en premier."

1058
00:48:38,800 --> 00:48:41,720
Et le hashtag dans ce contexte
juste signifie «identifiant unique».

1059
00:48:41,720 --> 00:48:43,750
Je ne mets pas dans le fichier HTML.

1060
00:48:43,750 --> 00:48:46,880
I, ici, dis simplement
je cite "en premier."

1061
00:48:46,880 --> 00:48:48,470
>> Alors permettez-moi de recharger.

1062
00:48:48,470 --> 00:48:49,919
Et maintenant je vois, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Je veux dire, ce n'est pas
joli, mais il est un peu

1064
00:48:51,710 --> 00:48:53,600
de comme la préface d'un
livre ou quelque chose comme ça,

1065
00:48:53,600 --> 00:48:55,100
lorsque le premier alinéa est plus grand.

1066
00:48:55,100 --> 00:48:57,933
Peut-être encore plus précis avec
seulement les premières lettres, mais au moins

1067
00:48:57,933 --> 00:48:59,110
J'ai exercé plus de contrôle.

1068
00:48:59,110 --> 00:49:04,760
Maintenant maybe-- peut-être que je veux faire
de temps en temps pour une raison quelconque,

1069
00:49:04,760 --> 00:49:09,010
et donc je ne veux pas que cela
appliquer à une seule balise HTML.

1070
00:49:09,010 --> 00:49:15,110
Au contraire, nous allons say-- de laisser
aussi faire ce qui suit.

1071
00:49:15,110 --> 00:49:18,810
Class = "import".

1072
00:49:18,810 --> 00:49:23,970
Considérant qu'un ID est utilisé pour unique
identifier une chose, une étiquette,

1073
00:49:23,970 --> 00:49:30,190
dans votre page Web, une classe est censée être
utilisé sur un certain nombre d'éléments ou de balises

1074
00:49:30,190 --> 00:49:30,950
sur votre page Web.

1075
00:49:30,950 --> 00:49:31,710
Il est donc réutilisable.

1076
00:49:31,710 --> 00:49:33,090
Un ID est pas réutilisable.

1077
00:49:33,090 --> 00:49:34,450
Une classe est réutilisable.

1078
00:49:34,450 --> 00:49:37,830
>> Et vous savez quoi, quelle qu'en soit
reasons-- philosophique

1079
00:49:37,830 --> 00:49:40,180
Je ne l'ai pas fini mon
thought-- Je vais dire

1080
00:49:40,180 --> 00:49:44,300
que le premier alinéa et le
deuxième alinéa sont importants.

1081
00:49:44,300 --> 00:49:48,600
Donc, je vais appliquer la classe appelée
"Important" que, si je sauvegarde mon dossier

1082
00:49:48,600 --> 00:49:51,510
et rechargez, n'a pas
impact fonctionnel encore.

1083
00:49:51,510 --> 00:49:53,780
Mais je l'ai ajouté quelques
métadonnées dans le fichier,

1084
00:49:53,780 --> 00:49:56,610
sorte de quelque chose de séparé
à partir des données de base du fichier,

1085
00:49:56,610 --> 00:50:02,300
de sorte que maintenant dans mon stylesheet, si je
au lieu dit ".important" - vous savez,

1086
00:50:02,300 --> 00:50:07,110
tout ce qui est important, je suis
va faire la police couleur, red--

1087
00:50:07,110 --> 00:50:09,930
ou plutôt pas de la police de couleur, juste la couleur.

1088
00:50:09,930 --> 00:50:12,930
Il y a des incohérences
en CSS malheureusement.

1089
00:50:12,930 --> 00:50:14,120
Et recharger.

1090
00:50:14,120 --> 00:50:17,640
Maintenant, remarquez la première
deux paragraphes sont rouges

1091
00:50:17,640 --> 00:50:20,880
mais pas le troisième, parce que je ne
appliqué la classe de "important"

1092
00:50:20,880 --> 00:50:25,020
aux deux de ces choses d'abord.

1093
00:50:25,020 --> 00:50:28,030
>> Donc, dans les ID, vous avez la possibilité
pour spécifier très précisément.

1094
00:50:28,030 --> 00:50:30,110
Avec des classes, vous avez réutilisabilité.

1095
00:50:30,110 --> 00:50:33,800
Mais dans les deux cas, notez le
sorte de principe de bonne conception

1096
00:50:33,800 --> 00:50:39,072
où je refactorisée tous les
esthétique à mon fichier styles.css.

1097
00:50:39,072 --> 00:50:40,280
Donc, il n'y a pas messiness ici.

1098
00:50:40,280 --> 00:50:44,490
Il n'y a aucune mention de rouge ou
gras-face ou taille de la police dans ce dossier.

1099
00:50:44,490 --> 00:50:49,430
Au contraire, j'ai sémantiquement,
significative caractérisé mes données,

1100
00:50:49,430 --> 00:50:51,240
voici quelques données importantes.

1101
00:50:51,240 --> 00:50:52,800
Voici quelques données plus importantes.

1102
00:50:52,800 --> 00:50:56,500
De plus, voici le
"Première" de mes données importantes.

1103
00:50:56,500 --> 00:51:01,050
Donc HTML est tout genre
de marquage, littéralement, les mots

1104
00:51:01,050 --> 00:51:05,270
et les paragraphes et les constructions dans votre
page avec ces petits conseils, si vous

1105
00:51:05,270 --> 00:51:07,640
volonté, que vous pouvez
en quelque sorte tirer parti de l'aide

1106
00:51:07,640 --> 00:51:10,880
d'autres techniques comme CSS de cette manière.

1107
00:51:10,880 --> 00:51:14,760
>> Donc, en réponse à la question de Victoria,
nous pouvons agrandir le texte de cette façon.

1108
00:51:14,760 --> 00:51:18,380
Il y a tellement d'autres façons, mais
la police tag-- parenthèse ouverte "font" -

1109
00:51:18,380 --> 00:51:19,770
est en fait vieux de plusieurs années.

1110
00:51:19,770 --> 00:51:21,410
Et cela est le problème,
aussi, avec en se fondant uniquement

1111
00:51:21,410 --> 00:51:23,485
sur resources-- en ligne
ils ont tendance à être dépassée.

1112
00:51:23,485 --> 00:51:26,110
Et en effet, ce qui a été dépréciée,
parce que le monde a réalisé,

1113
00:51:26,110 --> 00:51:28,970
ce qui ne "font-size = 7" signifie?

1114
00:51:28,970 --> 00:51:29,670
Il ne fait pas.

1115
00:51:29,670 --> 00:51:32,770
Et pendant de nombreuses années et
ce day-- l'un des côtés

1116
00:51:32,770 --> 00:51:36,060
note ici est qu'il est effectivement
incroyablement douloureux encore parfois

1117
00:51:36,060 --> 00:51:38,900
de développer des sites pour la
web, parce que Microsoft

1118
00:51:38,900 --> 00:51:44,220
et Google et Mozilla et
d'autres sont souvent en désaccord quant à la façon

1119
00:51:44,220 --> 00:51:47,480
d'interpréter une spécification comme le HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Il y a un livre de règles pour HTML
dit généralement ce que signifie chaque balise.

1121
00:51:52,490 --> 00:51:55,690
Mais parfois, il est laissé à la
la discrétion de la mise en œuvre,

1122
00:51:55,690 --> 00:51:57,290
la discrétion et Google de Microsoft.

1123
00:51:57,290 --> 00:52:00,000
Et vous aurez très souvent
voir sur un site quelque chose

1124
00:52:00,000 --> 00:52:04,954
semble différent sur un PC
qu'elle ne le fait sur un Mac,

1125
00:52:04,954 --> 00:52:06,995
et c'est vraiment parce que,
à la fin de la journée,

1126
00:52:06,995 --> 00:52:08,891
ils ne testent
bien sur les deux plates-formes.

1127
00:52:08,891 --> 00:52:11,390
Mais il est aussi parce que raisonnable,
les gens intelligents seront en désaccord

1128
00:52:11,390 --> 00:52:14,970
et les entreprises seront en désaccord, et ainsi
l'un des défis de la programmation

1129
00:52:14,970 --> 00:52:16,980
pour le web ou la conception
choses pour le web

1130
00:52:16,980 --> 00:52:21,700
est l'écriture de votre site web d'une manière
qui fonctionne sur tous les navigateurs Web.

1131
00:52:21,700 --> 00:52:23,410
Mais même cela est déraisonnable, non?

1132
00:52:23,410 --> 00:52:27,807
Il y a tellement de versions de tant
navigateurs là-bas qui, à un moment donné,

1133
00:52:27,807 --> 00:52:30,890
vous devez aussi faire un appel du jugement
et vous devez décider en tant que société,

1134
00:52:30,890 --> 00:52:33,082
en particulier pour le commerce électronique de style
sites où vous êtes

1135
00:52:33,082 --> 00:52:36,290
d'essayer d'utiliser la plus récente et
technologies pour donner un très bon utilisateur

1136
00:52:36,290 --> 00:52:37,110
de l'expérience.

1137
00:52:37,110 --> 00:52:41,019
Mais un certain pourcentage de vos utilisateurs pourraient
toujours en utilisant Internet Explorer 6 ou 7

1138
00:52:41,019 --> 00:52:43,810
ou 8, en particulier en fonction de la
pays ils viennent.

1139
00:52:43,810 --> 00:52:46,760
>> Et très souvent
consultés est quelque chose

1140
00:52:46,760 --> 00:52:50,920
comme "les statistiques du navigateur Web."

1141
00:52:50,920 --> 00:52:56,560
Et si nous allons to-- nous allons voir Wikipedia
et de voir comment la mise à jour ce tableau est

1142
00:52:56,560 --> 00:52:59,320
s'il y a un.

1143
00:52:59,320 --> 00:53:02,420
Donc, ici vous pouvez voir
où les navigateurs en fait

1144
00:53:02,420 --> 00:53:06,160
sont, selon Décembre 2015,
selon le gouvernement des États-Unis.

1145
00:53:06,160 --> 00:53:11,170
Chrome est à 42% de parts de marché, suivi
par IE largement utilisé dans les entreprises

1146
00:53:11,170 --> 00:53:14,490
ou les paramètres du PC, bien sûr,
suivi par Firefox,

1147
00:53:14,490 --> 00:53:17,440
puis Safari, puis Opera n'a pas
rendre la carte ici pour une raison quelconque,

1148
00:53:17,440 --> 00:53:18,210
et puis les autres.

1149
00:53:18,210 --> 00:53:19,500
Peut-être qu'il est sous les autres.

1150
00:53:19,500 --> 00:53:27,700
Mais plus problématique que celle est--
nous allons voir si Wikipedia a aussi

1151
00:53:27,700 --> 00:53:35,194
versions des navigateurs version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Allons aux statistiques du navigateur.

1154
00:53:39,190 --> 00:53:40,680
C'EST À DIRE.

1155
00:53:40,680 --> 00:53:42,030
Même cela ne suffit pas.

1156
00:53:42,030 --> 00:53:44,854
statistiques du navigateur.

1157
00:53:44,854 --> 00:53:45,353
Ma version.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Cela ne va pas être juste.

1160
00:53:50,540 --> 00:53:53,414
Voyons voir versions.

1161
00:53:53,414 --> 00:53:54,830
la part de marché du navigateur.

1162
00:53:54,830 --> 00:53:57,110
Voyons voir si cela arrive.

1163
00:53:57,110 --> 00:53:57,610
D'ACCORD.

1164
00:53:57,610 --> 00:54:00,010
Maintenant, cela devient
un peu plus utile.

1165
00:54:00,010 --> 00:54:04,870
Donc, ici, notez que nous avons tous
différentes versions de navigateurs.

1166
00:54:04,870 --> 00:54:09,887
Et, mon dieu, si vous look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Je veux dire, les navigateurs de plus en plus mis à jour,
et parfois certains de ces changements

1168
00:54:12,970 --> 00:54:16,430
sont importantes dans
termes de fonctionnalité.

1169
00:54:16,430 --> 00:54:20,630
Et à un moment donné, la
chefs de produit ou les ingénieurs

1170
00:54:20,630 --> 00:54:23,620
besoin de faire un decision-- vous
savoir ce que, seulement 1% du monde

1171
00:54:23,620 --> 00:54:24,740
est encore en utilisant IE 7.

1172
00:54:24,740 --> 00:54:25,490
Pour l'enfer avec eux.

1173
00:54:25,490 --> 00:54:27,470
Nous sommes tout simplement pas aller à
soutenir ce navigateur.

1174
00:54:27,470 --> 00:54:28,740
Et qu'est-ce que cela veut dire de ne pas soutenir?

1175
00:54:28,740 --> 00:54:31,170
Cela pourrait signifier que les boutons
ne fonctionnent pas sur votre page web,

1176
00:54:31,170 --> 00:54:33,050
ou cela pourrait signifier la
la mise en forme est complètement éteint.

1177
00:54:33,050 --> 00:54:35,091
Ou vous pourriez avoir à faire
ce même appel de jugement

1178
00:54:35,091 --> 00:54:39,089
en mobiles ces jours-ci, où, nous sommes
ne va pas soutenir IOS 5 plus.

1179
00:54:39,089 --> 00:54:40,380
Alors, les gens ont juste de mettre à niveau.

1180
00:54:40,380 --> 00:54:45,850
Ou on ne va pas à soutenir Cupcake
sur OS Android pour les appareils Android,

1181
00:54:45,850 --> 00:54:48,629
parce que le monde-- le
World Tech veut aller de l'avant,

1182
00:54:48,629 --> 00:54:51,170
il sorte de veut faire glisser le
monde avec elle afin qu'ils ne soient pas

1183
00:54:51,170 --> 00:54:53,295
doivent continuer à être
rétrocompatible donc ils

1184
00:54:53,295 --> 00:54:54,920
peut offrir de nouvelles et de bonnes caractéristiques.

1185
00:54:54,920 --> 00:54:57,878
Ceci est en effet une des raisons
pourquoi tant d'entreprises déploient

1186
00:54:57,878 --> 00:55:01,440
les mises à jour automatiques et sorte de forçage
les dernières versions des logiciels sur nous.

1187
00:55:01,440 --> 00:55:04,010
Et même les entreprises
comme Apple va trier des

1188
00:55:04,010 --> 00:55:07,280
vous forcer ou obliger presque
vous en termes de forces du marché

1189
00:55:07,280 --> 00:55:11,164
d'acheter un nouveau téléphone, car ils ont juste
ne plus mettre à jour votre ancien téléphone.

1190
00:55:11,164 --> 00:55:13,330
Donc, vous manquez la
les plus récentes et les plus grands traits,

1191
00:55:13,330 --> 00:55:17,520
parce qu'il est coûteux pour eux comme un
entreprise de maintenir plus âgé, sans doute

1192
00:55:17,520 --> 00:55:19,330
versions inférieures du logiciel.

1193
00:55:19,330 --> 00:55:23,660
Cependant, l'effet net est que
nous souffrons aussi cela aussi.

1194
00:55:23,660 --> 00:55:26,550
>> Donc, nous allons jeter un coup d'oeil juste
quelques dernières choses ici.

1195
00:55:26,550 --> 00:55:29,740
Faisons tomber très vite certains
ces autres balles, si curieux.

1196
00:55:29,740 --> 00:55:33,440
Donc, si vous vouliez,
par exemple, la position

1197
00:55:33,440 --> 00:55:36,420
le texte sur différents côtés de la
page, je vais le faire d'une manière rapide,

1198
00:55:36,420 --> 00:55:38,360
mais il est différent
façons de le faire.

1199
00:55:38,360 --> 00:55:42,610
Laissez-moi aller de l'avant et eliminate--
simplifier la manière suivante.

1200
00:55:42,610 --> 00:55:45,330
Permettez-moi de revenir à mon
, paragraphes simples simples.

1201
00:55:45,330 --> 00:55:47,760
Permettez-moi de revenir à mon styles.css.

1202
00:55:47,760 --> 00:55:51,040
Et je vais juste utiliser le simple--
que vous pourriez avoir vu sur Google

1203
00:55:51,040 --> 00:55:54,430
ou rappeler de l'heure, à
text-align droite.

1204
00:55:54,430 --> 00:55:56,220
Et recharger cette page.

1205
00:55:56,220 --> 00:55:58,470
Maintenant, tout semble
être aligné à droite,

1206
00:55:58,470 --> 00:56:00,770
comme vous pouvez le voir sur le rétroprojecteur ici.

1207
00:56:00,770 --> 00:56:04,470
>> Nous pouvons le faire paraître un peu plus
réservez-like, et nous pouvons dire «justifier»

1208
00:56:04,470 --> 00:56:05,640
et recharger.

1209
00:56:05,640 --> 00:56:09,870
Maintenant, il est beau et carré à la fois
côtés, ce qui est plutôt agréable.

1210
00:56:09,870 --> 00:56:12,220
Un autre objectif que nous avions ici
était le changement de couleur du texte.

1211
00:56:12,220 --> 00:56:13,650
Donc, nous avons vu que mon texte en rouge.

1212
00:56:13,650 --> 00:56:15,630
Et maintenant ajouter des boutons pour un formulaire.

1213
00:56:15,630 --> 00:56:19,390
Alors, pourquoi ne pas essayer de faire exactement cela?

1214
00:56:19,390 --> 00:56:23,656
Mais d'abord, laissez-moi aller à un site qui
la plupart d'entre nous utilisent chaque day-- Google.

1215
00:56:23,656 --> 00:56:25,780
Et nous allons jeter un coup d'oeil
comment Google fonctionne réellement.

1216
00:56:25,780 --> 00:56:26,821
Mais je vais le faire.

1217
00:56:26,821 --> 00:56:31,930
D'abord, laissez-moi faire in-- yep,
laissez-moi aller à Google en premier.

1218
00:56:31,930 --> 00:56:34,530
Je vais devoir aller
dans Google Paramètres,

1219
00:56:34,530 --> 00:56:40,660
parce que je veux désactiver
ce qu'on appelle des résultats instantanés.

1220
00:56:40,660 --> 00:56:43,580
>> Donc, vous avez sans doute remarqué dans
Google ces days-- permettez-moi de revenir en arrière

1221
00:56:43,580 --> 00:56:44,850
et tourner cette suite.

1222
00:56:44,850 --> 00:56:47,900
Donc, si je commence la recherche
pour "chats" comme celui-ci,

1223
00:56:47,900 --> 00:56:50,120
remarquer que non seulement
Je reçois l'auto-complétion des

1224
00:56:50,120 --> 00:56:54,520
top, tout d'un coup, la page elle-même
semble changer assez rapidement aussi bien,

1225
00:56:54,520 --> 00:56:58,750
et c'est Google en utilisant une langue
appelé JavaScript essayer d'être utile.

1226
00:56:58,750 --> 00:57:01,540
Mais malheureusement, ce genre
de mess notre discussion

1227
00:57:01,540 --> 00:57:04,010
de ce qui se passe réellement
sous le capot ici.

1228
00:57:04,010 --> 00:57:09,070
Je suis juste un peu rapidement
désactiver des résultats instantanés.

1229
00:57:09,070 --> 00:57:11,510
Et je vais cliquer sur Enregistrer.

1230
00:57:11,510 --> 00:57:13,930
Et maintenant, je vais ouvrir
cette barre d'outils de diagnostic I

1231
00:57:13,930 --> 00:57:16,150
garder l'ouverture sous l'onglet Réseau.

1232
00:57:16,150 --> 00:57:17,720
Donc, nous allons le faire.

1233
00:57:17,720 --> 00:57:21,960
Laissez moi-- whoops--
faites défiler ce un peu.

1234
00:57:21,960 --> 00:57:24,410
Et permettez-moi de la recherche pour "chats".

1235
00:57:24,410 --> 00:57:26,790
>> Et maintenant notice-- effectivement,
cela est une bonne occasion

1236
00:57:26,790 --> 00:57:28,840
pour discuter un moment.

1237
00:57:28,840 --> 00:57:32,460
Remarquez le moment où je bien-- l'arrêter.

1238
00:57:32,460 --> 00:57:35,250
Arrêtez ça.

1239
00:57:35,250 --> 00:57:35,790
D'ACCORD.

1240
00:57:35,790 --> 00:57:40,870
Remarquez le moment où je tape la lettre
C, regarder le bas de l'écran.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Qu'est-ce que le fond
de cet écran, mon onglet Réseau,

1242
00:57:48,600 --> 00:57:53,320
suggérer se passe chaque
fois que je tape une lettre?

1243
00:57:53,320 --> 00:57:57,700
Malheureusement, la grenouille est très
aujourd'hui distraire ou le trèfle

1244
00:57:57,700 --> 00:58:00,339
ou tout ce qu'il est.

1245
00:58:00,339 --> 00:58:01,880
Qu'est-ce qui se passait chaque fois que je tapé?

1246
00:58:01,880 --> 00:58:04,230
Et laissez-moi effacer le
tampon et tapez-le à nouveau.

1247
00:58:04,230 --> 00:58:06,580
whoops So--.

1248
00:58:06,580 --> 00:58:13,280
Chaque fois que je tape une lettre, C- A- T--
donc une nouvelle ligne continue évidemment apparaître.

1249
00:58:13,280 --> 00:58:16,530
Qu'est-ce que chacune de ces lignes représentent,
sur la base de ce que nous avons vu et discuté

1250
00:58:16,530 --> 00:58:17,339
à ce jour?

1251
00:58:17,339 --> 00:58:18,130
AUDIENCE: Une recherche?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. Malan: Une recherche ou
de manière plus générale, une requête HTTP

1253
00:58:21,770 --> 00:58:23,125
de mon navigateur au serveur.

1254
00:58:23,125 --> 00:58:29,090
Eh bien, pourquoi est mon navigateur fait un HTTP
demander à chaque fois que je tape une lettre?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIENCE: [Inaudible]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. Malan: Ouais, ça donne
moi ces résultats de l'auto-complétion.

1257
00:58:33,210 --> 00:58:35,190
Comme, où faire ces
résultats de la recherche viennent?

1258
00:58:35,190 --> 00:58:38,120
Eh bien, chaque fois que je tape un
lettre, Google envoie plus

1259
00:58:38,120 --> 00:58:40,460
et de plus en plus
le mot que je tape.

1260
00:58:40,460 --> 00:58:41,040
Pourquoi?

1261
00:58:41,040 --> 00:58:44,540
Parce qu'ils veulent me donner un
mieux en mieux, meilleure suggestion,

1262
00:58:44,540 --> 00:58:48,880
une liste de suggestions, pour ce mot
Je suis en train de réellement complète.

1263
00:58:48,880 --> 00:58:53,030
Donc, c'est-à-dire littéralement chaque
caractère que vous tapez dans Google

1264
00:58:53,030 --> 00:58:56,900
est envoyé, en fin de compte
en vrac, mais aussi parfois un

1265
00:58:56,900 --> 00:59:00,620
à la fois pour mettre en œuvre
ces caractéristiques de l'auto-complétion lorsque

1266
00:59:00,620 --> 00:59:03,000
les données sont, bien entendu, sur le web.

1267
00:59:03,000 --> 00:59:08,780
>> Maintenant, nous allons jeter un coup d'oeil à ce qui est réellement
qui se passe lorsque je clique sur Google Search.

1268
00:59:08,780 --> 00:59:10,420
Et puis nous exploitons nous-mêmes.

1269
00:59:10,420 --> 00:59:15,320
Donc, si je fais défiler vers le bas maintenant à la très
première demande qui vient de se passer.

1270
00:59:15,320 --> 00:59:17,130
Notez ce qui suit.

1271
00:59:17,130 --> 00:59:25,550
Il a été envoyé à une assez longue URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
puis tout un tas de choses.

1273
00:59:27,100 --> 00:59:29,620
Voyons voir ce fait maintenant
dans l'onglet du navigateur lui-même.

1274
00:59:29,620 --> 00:59:31,310
Mettons-nous débarrasser de la barre d'outils ici.

1275
00:59:31,310 --> 00:59:33,140
Voici la page de résultats de recherche.

1276
00:59:33,140 --> 00:59:34,790
Et remarquez, voici l'URL.

1277
00:59:34,790 --> 00:59:37,430
Maintenant, vous pouvez probablement le deviner
ce qui se passe ici en partie.

1278
00:59:37,430 --> 00:59:39,090
Alors tout d'abord, une définition.

1279
00:59:39,090 --> 00:59:42,570
Ceci est apparemment la destination
où le formulaire est soumis.

1280
00:59:42,570 --> 00:59:44,910
Alors, quand je tapé dans le
mots «chats» et appuyez sur Entrée,

1281
00:59:44,910 --> 00:59:48,460
apparemment envoyé par Google
mon texte d'entrée à cette URL

1282
00:59:48,460 --> 00:59:50,770
que je l'ai souligné
là, slash recherche.

1283
00:59:50,770 --> 00:59:56,530
Tours dehors, dans une URL, tout ce qui
arrive après un point d'interrogation est,

1284
00:59:56,530 --> 01:00:01,270
comme nous le disons, une paire clé-valeur
qui a été tapé dans la forme ou en quelque sorte

1285
01:00:01,270 --> 01:00:04,500
transmis à partir du
navigateur au serveur.

1286
01:00:04,500 --> 01:00:07,180
>> Donc, chaque fois que vous tapez entrée
dans un formulaire sur le web

1287
01:00:07,180 --> 01:00:10,000
et il est envoyé comme nous l'avons
été discuter, via un get,

1288
01:00:10,000 --> 01:00:12,400
l'un d'eux virtuel
enveloppes, le contenu

1289
01:00:12,400 --> 01:00:15,510
de ce envelope-- oui, gardez
s'empaillé physiquement

1290
01:00:15,510 --> 01:00:19,010
dans l'enveloppe en classe
De nos jours, mais sur le plan technologique

1291
01:00:19,010 --> 01:00:21,110
il est effectivement mis dans l'URL.

1292
01:00:21,110 --> 01:00:22,940
Donc, en fait, permettez-moi de passer en revue ce.

1293
01:00:22,940 --> 01:00:25,010
Où voyez-vous l'entrée d'utilisateur?

1294
01:00:25,010 --> 01:00:27,490
Où voyez-vous quelque chose
que je me suis tapé ici?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ouais, donc "chats".

1297
01:00:33,491 --> 01:00:33,990
Droite?

1298
01:00:33,990 --> 01:00:36,380
Alors laissez-moi distiller cette
en quelque chose de plus simple.

1299
01:00:36,380 --> 01:00:39,917
Je vais supprimer tout ce qui concerne
cette URL que je ne comprends pas,

1300
01:00:39,917 --> 01:00:42,250
et je vais juste laisser
comme this-- / search? q = chats.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Nous verrons où q
provient en un instant,

1303
01:00:47,890 --> 01:00:51,220
mais qui se sent comme le minimum
quantité d'informations que je fournis.

1304
01:00:51,220 --> 01:00:53,050
Et maintenant, je vais appuyez sur Entrée.

1305
01:00:53,050 --> 01:00:55,520
Et remarquez qu'il fonctionne encore.

1306
01:00:55,520 --> 01:00:57,950
Nous obtenons toujours revenir tout un tas de chats.

1307
01:00:57,950 --> 01:01:00,340
Donc, Google est colombophile
que ce ces jours-ci.

1308
01:01:00,340 --> 01:01:01,934
Il est 2016, pas 1999.

1309
01:01:01,934 --> 01:01:04,600
Donc, il y a d'autres choses que mon
navigateur envoie au serveur.

1310
01:01:04,600 --> 01:01:07,100
Mais cela est peu
tout ce qui est nécessaire.

1311
01:01:07,100 --> 01:01:08,380
>> Alors que se passe-t-il?

1312
01:01:08,380 --> 01:01:14,320
Eh bien, d'abord laissez-moi aller de l'avant et aller
retour à Cloud9 et laissez-moi aller de l'avant

1313
01:01:14,320 --> 01:01:15,620
et fermer mes onglets plus tôt.

1314
01:01:15,620 --> 01:01:18,230
Et je vais le faire sur mon
posséder juste pour un moment.

1315
01:01:18,230 --> 01:01:20,730
Je vais aller de l'avant
et créer un nouveau fichier.

1316
01:01:20,730 --> 01:01:23,739
Et je vais l'enregistrer comme google.html.

1317
01:01:23,739 --> 01:01:26,280
Et je vais très quickly--
Je vais voler, en fait,

1318
01:01:26,280 --> 01:01:28,510
une partie de ce texte juste pour gagner du temps.

1319
01:01:28,510 --> 01:01:30,610
Je vais coller ce ici.

1320
01:01:30,610 --> 01:01:33,850
Je ne vais pas vous embêter avec
toute stylisation cette fois.

1321
01:01:33,850 --> 01:01:38,340
Nous allons appeler cette «Mon Google."

1322
01:01:38,340 --> 01:01:41,230
Et je vais vous débarrasser
de tout dans le corps.

1323
01:01:41,230 --> 01:01:42,740
Et je vais faire ce qui suit.

1324
01:01:42,740 --> 01:01:45,690
Permettez-moi un zoom avant.

1325
01:01:45,690 --> 01:01:50,620
La Forme action-- et comme je l'ai brièvement mentionné
comme je l'heure, à whoops-- brièvement

1326
01:01:50,620 --> 01:01:54,130
mentionné plus haut, l'action d'un
formulaire où vous envoyez les données.

1327
01:01:54,130 --> 01:01:56,620
Alors google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Et la méthode que je veux utiliser
peut être l'une des deux choses.

1329
01:01:59,390 --> 01:02:02,870
Il peut être soit «get», comme nous gardons
discute, ou il peut être «post».

1330
01:02:02,870 --> 01:02:05,340
Pour l'instant, la fondamentale
la différence est, si vous utilisez "get"

1331
01:02:05,340 --> 01:02:09,590
l'ensemble des informations que l'
l'utilisateur fournit est envoyé dans l'URL.

1332
01:02:09,590 --> 01:02:13,530
>> Ce qui est grand pour des choses comme la recherche
moteurs et quelques autres applications,

1333
01:02:13,530 --> 01:02:17,080
mais dans quelles circonstances
vous voulez pas remplir un formulaire

1334
01:02:17,080 --> 01:02:21,620
et ont l'information finir par la
URL, comme dans la barre d'adresse de votre navigateur?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Quel genre de formes vous-- faire

1337
01:02:26,605 --> 01:02:27,480
AUDIENCE: [Inaudible]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. Malan: Oui, comme quoi?

1339
01:02:28,450 --> 01:02:29,270
AUDIENCE: les mots de passe.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. Malan: Ouais, donc vous vous connectez
à Facebook ou un site Web.

1341
01:02:31,936 --> 01:02:34,395
C'est l'entrée d'utilisateur à partir
une forme, une zone de texte,

1342
01:02:34,395 --> 01:02:37,020
mais vous ne voulez probablement pas
montrant dans l'URL du navigateur.

1343
01:02:37,020 --> 01:02:38,121
Pourquoi?

1344
01:02:38,121 --> 01:02:40,870
Je veux dire, peut-être il y a quelques
implications de sécurité sur le réseau,

1345
01:02:40,870 --> 01:02:44,830
mais plus-- aime, plus simplement, si
votre colocataire, votre autre significatif,

1346
01:02:44,830 --> 01:02:47,710
vos enfants, votre conjoint regarde
à travers l'histoire de votre navigateur?

1347
01:02:47,710 --> 01:02:50,762
Il est de votre droit de mot de passe
là dans l'histoire de votre navigateur.

1348
01:02:50,762 --> 01:02:52,220
Cela ne se sent pas comme une bonne conception.

1349
01:02:52,220 --> 01:02:54,500
Ou encore plus techniquement,
supposons que vous essayez

1350
01:02:54,500 --> 01:02:59,180
de télécharger une photo sur Flickr
ou Facebook ou wherever--

1351
01:02:59,180 --> 01:03:03,010
qui est saisie de l'utilisateur, même si
il est un peu plus interesting-- comment

1352
01:03:03,010 --> 01:03:05,530
dois-je bourre une image dans la barre d'URL?

1353
01:03:05,530 --> 01:03:06,730
Vous ne pouvez pas sorte de quelque sorte.

1354
01:03:06,730 --> 01:03:07,396
Vous sorte de possible.

1355
01:03:07,396 --> 01:03:10,210
Mais, vraiment, je suis dur pressé
d'imaginer faire cela.

1356
01:03:10,210 --> 01:03:13,470
Il me faut donc une autre méthode pour
télécharger des photos vers un site web,

1357
01:03:13,470 --> 01:03:15,657
et cette autre méthode est appelée "post".

1358
01:03:15,657 --> 01:03:18,740
Mais pour l'instant, nous allons parler de
"Get", qui est le plus simple des deux.

1359
01:03:18,740 --> 01:03:21,100
Il met juste toute la
une entrée d'utilisateur dans l'URL.

1360
01:03:21,100 --> 01:03:22,830
>> Alors, voici la forme que je crée.

1361
01:03:22,830 --> 01:03:24,070
Je veux une entrée.

1362
01:03:24,070 --> 01:03:24,820
Et tu sais quoi?

1363
01:03:24,820 --> 01:03:26,111
Je vais faire une supposition ici.

1364
01:03:26,111 --> 01:03:31,600
Je vais rappeler mon
entrée "q" pour "requête."

1365
01:03:31,600 --> 01:03:34,970
Et je pense que cela est l'un des
dessins originaux, peut-être, de 1999.

1366
01:03:34,970 --> 01:03:39,560
Et puis le type de cette entrée
va tout simplement être «texte».

1367
01:03:39,560 --> 01:03:43,040
Et puis je vais avoir une autre entrée
qui n'a pas besoin d'un nom, comme nous allons bientôt

1368
01:03:43,040 --> 01:03:45,120
voir, dont le type est «soumettre».

1369
01:03:45,120 --> 01:03:47,070
Et cela va
donnez-moi un bouton spécial.

1370
01:03:47,070 --> 01:03:48,320
Et c'est tout.

1371
01:03:48,320 --> 01:03:50,790
>> Alors laissez-moi aller de l'avant et enregistrer ce fichier.

1372
01:03:50,790 --> 01:03:54,910
Je vais revenir à ma
navigateur et allez à google.html.

1373
01:03:54,910 --> 01:03:56,140
Entrer.

1374
01:03:56,140 --> 01:03:59,680
Et il est un peu clairsemée
Pour dire le moins.

1375
01:03:59,680 --> 01:04:03,110
Mais laissez-moi aller de l'avant
et la recherche de "chats".

1376
01:04:03,110 --> 01:04:06,510
Et notez que je suis actuellement
à cette adresse URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Mais au moment où je clique cela,
où espérez-vous que je vais finir?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIENCE: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Donc, nous allons cliquez sur Soumettre.

1381
01:04:12,740 --> 01:04:15,200
Et en effet, je l'ai re-implémenté Google.

1382
01:04:15,200 --> 01:04:15,700
Droite?

1383
01:04:15,700 --> 01:04:16,480
Il est plus simple.

1384
01:04:16,480 --> 01:04:17,120
Il est plus léger.

1385
01:04:17,120 --> 01:04:20,350
Je veux dire, mon code est nettement meilleure que
leur, du désordre, nous avons vu plus tôt.

1386
01:04:20,350 --> 01:04:21,100
Et tu sais quoi?

1387
01:04:21,100 --> 01:04:22,610
Je vais pimenter ce un peu.

1388
01:04:22,610 --> 01:04:23,860
Je ne mentionnais plus tôt.

1389
01:04:23,860 --> 01:04:27,860
Il y a des balises comme H1, pour la rubrique 1,
le titre le plus important dans une page.

1390
01:04:27,860 --> 01:04:30,570
"Mon Google," Je vais appeler cela.

1391
01:04:30,570 --> 01:04:31,940
Permettez-moi de recharger.

1392
01:04:31,940 --> 01:04:33,772
Il est à la recherche un peu mieux déjà.

1393
01:04:33,772 --> 01:04:34,980
Et, en fait, vous savez quoi?

1394
01:04:34,980 --> 01:04:36,430
J'ai already-- je mentais.

1395
01:04:36,430 --> 01:04:40,200
Je dis que je ne voulais pas le style de cela,
mais je vais coiffer ce comme avant.

1396
01:04:40,200 --> 01:04:46,860
Et mon corps va être,
disons, centre text-align.

1397
01:04:46,860 --> 01:04:48,800
Il est à la recherche plus comme Google déjà.

1398
01:04:48,800 --> 01:04:51,090
>> Je besoin d'un saut de ligne, cependant,
pour ce bouton Soumettre.

1399
01:04:51,090 --> 01:04:52,798
Et il se trouve, vous
peuvent utiliser des paragraphes,

1400
01:04:52,798 --> 01:04:57,320
ou vous pouvez plus littéralement juste dire,
me donner un saut de ligne ici-- la balise br.

1401
01:04:57,320 --> 01:04:59,319
Et si je recharge cela, maintenant il y va.

1402
01:04:59,319 --> 01:05:01,610
Il est un peu moche, donc je
pourrait faire plusieurs sauts de ligne,

1403
01:05:01,610 --> 01:05:03,310
mais ne nous laissons pas trop gourmand ici.

1404
01:05:03,310 --> 01:05:06,430
Alors maintenant, nous allons voir si cela fonctionne pour "chiens."

1405
01:05:06,430 --> 01:05:08,640
Il semble fonctionner pour «chiens», aussi bien.

1406
01:05:08,640 --> 01:05:10,780
Alors, quelle est la livraison convaincante ici?

1407
01:05:10,780 --> 01:05:13,600
One-- n'a pas été un énorme bond à
introduire un peu plus de tags,

1408
01:05:13,600 --> 01:05:15,370
comme la balise form dans la balise d'entrée.

1409
01:05:15,370 --> 01:05:17,120
Mais plus fondamentalement
est, tout ce que nous faisons

1410
01:05:17,120 --> 01:05:20,610
met à profit notre compréhension
du protocole HTTP et le fait

1411
01:05:20,610 --> 01:05:24,900
qui forme finalement modifient
ce qui est dans l'URL du navigateur,

1412
01:05:24,900 --> 01:05:28,540
et donc, par conséquent, nous pouvons
fournir mécaniquement entrée à un serveur

1413
01:05:28,540 --> 01:05:33,600
en faisant un formulaire HTML et sachant
que le serveur comprend HTTP,

1414
01:05:33,600 --> 01:05:36,890
tout comme notre corps comprend, comme,
me serrant la main, ce même protocole,

1415
01:05:36,890 --> 01:05:40,920
et ainsi nous serons de retour la réponse
que nous attendons en fin de compte.

1416
01:05:40,920 --> 01:05:44,050
>> Donc, nous allons essayer de faire un
dernière chose maintenant avec mobile,

1417
01:05:44,050 --> 01:05:47,052
et je vais make-- je vais ajouter
ce code pour les diapositives.

1418
01:05:47,052 --> 01:05:49,760
Donc, si vous souhaitez bricoler, vous
peut certainement à partir de là.

1419
01:05:49,760 --> 01:05:51,551
Mais je vais aller
avant et faire une chose.

1420
01:05:51,551 --> 01:05:54,120
Je vais aller de l'avant et
ouvrir mon index page--

1421
01:05:54,120 --> 01:05:59,030
ma page bonjour comme avant, qui
a beaucoup de ce texte faux-latine,

1422
01:05:59,030 --> 01:06:05,470
ou le texte de sens latin, et has--
il ressemble à ceci à cette taille de la police.

1423
01:06:05,470 --> 01:06:07,850
Mais laissez-moi aller de l'avant et de faire cela.

1424
01:06:07,850 --> 01:06:09,300
Je vais aller dans Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Et vous ne devez pas faire cette étape.

1426
01:06:10,380 --> 01:06:11,420
Je vais le faire moi-même.

1427
01:06:11,420 --> 01:06:12,890
Je vais cliquez sur Partager.

1428
01:06:12,890 --> 01:06:15,170
Et ceci est une caractéristique
juste de Cloud9, de sorte que

1429
01:06:15,170 --> 01:06:17,710
Je peux faire mon environnement public.

1430
01:06:17,710 --> 01:06:20,240
>> Et juste pour le plaisir de
démonstration, laissez-moi faire.

1431
01:06:20,240 --> 01:06:22,870
Je vais faire ma demande publique.

1432
01:06:22,870 --> 01:06:25,230
Notez qu'il est me prévenir, je suis
Je sûr que je veux faire,

1433
01:06:25,230 --> 01:06:28,438
parce que cela va rendre tout le monde
dans le monde, que ce soit ici maintenant

1434
01:06:28,438 --> 01:06:33,560
ou regarder la vidéo plus tard sur la
Internet capable de voir ce que je vois.

1435
01:06:33,560 --> 01:06:34,440
Mais ça va.

1436
01:06:34,440 --> 01:06:37,870
Je vais dire "Terminé."

1437
01:06:37,870 --> 01:06:42,080
Et laissez-moi vous encourage, si je faisais
ce correctly-- permettez-moi de le tester en premier.

1438
01:06:42,080 --> 01:06:45,590
Allez-y, si vous ne mind-- pas
dans un navigateur sur votre ordinateur,

1439
01:06:45,590 --> 01:06:49,900
aller à cette URL, et nous espérons
vous verrez mon texte latin.

1440
01:06:49,900 --> 01:06:52,820
Et pour être clair, il est
fonctionnant pas sur mon ordinateur portable.

1441
01:06:52,820 --> 01:06:53,610
Il est dans le nuage.

1442
01:06:53,610 --> 01:06:58,120
Il est sur Cloud9, littéralement, mais
J'ai fait mon espace de travail publique

1443
01:06:58,120 --> 01:07:03,450
de sorte que toute personne sur Internet
peut accéder à ma page d'accueil latine.

1444
01:07:03,450 --> 01:07:07,209
>> Aller à la même URL sur
votre téléphone, si vous le pouviez.

1445
01:07:07,209 --> 01:07:09,750
S'il vous en coûtera, cependant, vous
peut simplement regarder par-dessus l'épaule.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIENCE: [Inaudible]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. Malan: Je suis désolé?

1449
01:07:43,550 --> 01:07:45,390
AUDIENCE: [Inaudible]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. Malan: Juste des mots latins.

1451
01:07:47,710 --> 01:07:48,210
C'est tout.

1452
01:07:48,210 --> 01:07:49,250
Mais c'est ce que vous devriez voir.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIENCE: Ouais.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. Malan: Oui.

1455
01:07:50,790 --> 01:07:51,300
Ouais.

1456
01:07:51,300 --> 01:07:51,540
D'ACCORD.

1457
01:07:51,540 --> 01:07:53,530
Donc, je peux tenir votre
téléphone pour un instant?

1458
01:07:53,530 --> 01:07:57,504
Alors, espérons-le, si vous accédez
, il devrait ressembler presque illisible.

1459
01:07:57,504 --> 01:07:59,920
Il est still-- Je veux dire, il est
illisible en raison du latin.

1460
01:07:59,920 --> 01:08:01,920
Mais il est aussi illisible
pour quelle autre raison?

1461
01:08:01,920 --> 01:08:03,775
Comme, ce que vous déplaît à ce sujet?

1462
01:08:03,775 --> 01:08:04,650
AUDIENCE: Il est petit.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. Malan: Il est super, super petit.

1464
01:08:06,420 --> 01:08:07,920
Alors, comment pouvons-nous résoudre ce problème?

1465
01:08:07,920 --> 01:08:09,730
Il est super, super petit
sur le téléphone de Victoria

1466
01:08:09,730 --> 01:08:11,400
et, si vous avez tiré
il vous-même, probablement

1467
01:08:11,400 --> 01:08:14,660
petit sur votre téléphone, ainsi, à moins que vous
ont des paramètres d'accessibilité activés.

1468
01:08:14,660 --> 01:08:15,530
Qu'est-ce que c'est?

1469
01:08:15,530 --> 01:08:18,497
Vous pouvez tout simplement pincer et
zoom, ce qui est réalisable,

1470
01:08:18,497 --> 01:08:20,330
mais alors vous ne voyez que
quelques mots à la fois.

1471
01:08:20,330 --> 01:08:20,859
Donc, attendez une minute.

1472
01:08:20,859 --> 01:08:21,720
Je sais comment résoudre ce problème.

1473
01:08:21,720 --> 01:08:22,219
Droite?

1474
01:08:22,219 --> 01:08:26,130
Je pourrais utiliser les CSS, et je pouvais changer le
taille de la police de 12 points à 24 points.

1475
01:08:26,130 --> 01:08:29,020
Mais l'effet secondaire de cela,
bien sûr, va être maintenant,

1476
01:08:29,020 --> 01:08:32,630
sur un bureau ou un ordinateur portable,
maintenant le texte est deux fois plus grand.

1477
01:08:32,630 --> 01:08:35,810
Et il en serait de nature agréable
de faire la distinction entre les appareils,

1478
01:08:35,810 --> 01:08:37,840
et il se trouve là-bas
sont des moyens de le faire.

1479
01:08:37,840 --> 01:08:39,590
Il y a plusieurs
de différentes manières, en fait,

1480
01:08:39,590 --> 01:08:44,189
de sorte que l'utilisation de CSS et de caractéristiques fantaisistes
que nous ne rentrerons pas dans en détail,

1481
01:08:44,189 --> 01:08:46,960
vous pouvez essentiellement interroger
le navigateur et dire,

1482
01:08:46,960 --> 01:08:51,550
si votre écran est plus petit que celui-ci
de nombreux pixels, utilisent cette taille de la police.

1483
01:08:51,550 --> 01:08:55,180
Si votre écran est plus grand que celui-ci
de nombreux pixels, utilisent cette autre taille de la police.

1484
01:08:55,180 --> 01:08:57,080
>> Vous pouvez être encore plus fantaisistes encore.

1485
01:08:57,080 --> 01:09:00,140
Si vous avez déjà visité un
page web qui, sur un bureau,

1486
01:09:00,140 --> 01:09:04,404
a un grand menu de peut-être hors de la
côté, puis tout le contenu

1487
01:09:04,404 --> 01:09:07,029
est à côté de celui menu--
qui est une sorte de paradigme commun.

1488
01:09:07,029 --> 01:09:09,670
Menu à gauche, le contenu
à droite, ou vice versa.

1489
01:09:09,670 --> 01:09:13,569
Ne fonctionne pas vraiment sur mobile lorsque votre
l'écran est seulement ce nombre de pixels de large.

1490
01:09:13,569 --> 01:09:16,233
Donc, plus commune sur mobile est,
votre menu va soudainement se

1491
01:09:16,233 --> 01:09:18,399
effondré, et vous devez
cliquez sur un bouton pour voir,

1492
01:09:18,399 --> 01:09:22,404
ou le site Web mettra le menu
ci-dessus et mettre le contenu en dessous.

1493
01:09:22,404 --> 01:09:24,779
Et vous pouvez mettre en œuvre ces
les choses de plusieurs façons, aussi.

1494
01:09:24,779 --> 01:09:28,340
Vous pouvez demander à vos programmeurs,
hey, équipe, tout le temps

1495
01:09:28,340 --> 01:09:34,450
vous voyez une requête HTTP à partir d'un Android
appareil, un dispositif Microsoft, un Google

1496
01:09:34,450 --> 01:09:39,930
appareil, un appareil Apple, utilisez cette
taille de la police et utiliser ce menu mise en page,

1497
01:09:39,930 --> 01:09:42,670
ou bien utiliser cette valeur par défaut plus grande mise en page.

1498
01:09:42,670 --> 01:09:45,410
>> Maintenant, en utilisant ce que
technique fondamentale aujourd'hui

1499
01:09:45,410 --> 01:09:48,529
les ingénieurs pourraient utiliser
de savoir si elle est

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un téléphone Android, un ordinateur portable,
un ordinateur de bureau visitant le serveur de l'entreprise?

1501
01:09:53,660 --> 01:09:55,310
En quoi font-ils cette information?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIENCE: en-tête?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. Malan: Oui, l'en-tête HTTP.

1504
01:09:57,740 --> 01:10:01,714
Ainsi, chaque requête HTTP provenant de
leurs clients à leurs serveurs

1505
01:10:01,714 --> 01:10:03,880
inclure, à l'intérieur virtuel que
enveloppe, tout un tas

1506
01:10:03,880 --> 01:10:08,260
des en-têtes HTTP, dont l'un est
le navigateur et le système d'exploitation

1507
01:10:08,260 --> 01:10:10,290
même, si vous tenez à
ce niveau de détail.

1508
01:10:10,290 --> 01:10:13,790
Maintenant, il est une chaîne cryptique prospectifs, mais
il existe un logiciel qui sera juste

1509
01:10:13,790 --> 01:10:18,530
simplifier, et vous pouvez simplement demander
dans la programmation code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- ce téléphone est this--
ce dispositif est cet utilisateur en utilisant?

1511
01:10:23,650 --> 01:10:27,501
Et alors vous pouvez dire, leur montrer ce
version du site si elle est un téléphone.

1512
01:10:27,501 --> 01:10:30,250
Montrez-leur cette version de la
site Web si elle est un ordinateur portable ou de bureau.

1513
01:10:30,250 --> 01:10:32,316
Mais vous ne même pas besoin
complexité côté serveur.

1514
01:10:32,316 --> 01:10:33,940
Vous pouvez le faire même le plus simple des choses.

1515
01:10:33,940 --> 01:10:34,815
>> Je vais le faire.

1516
01:10:34,815 --> 01:10:38,995
Je vais aller de l'avant dans
mon environnement Cloud9,

1517
01:10:38,995 --> 01:10:41,370
et je vais ajouter un tag
que vous avez vu dans Google avant.

1518
01:10:41,370 --> 01:10:42,770
On l'appelle le metatag.

1519
01:10:42,770 --> 01:10:45,520
Et je ne me souviens jamais celui-ci, de sorte
Je vais transcrire ici.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "viewport", puis
content = "width = largeur de l'appareil, intital

1521
01:10:50,552 --> 01:11:02,060
échelle = 1 "et voilà.

1522
01:11:02,060 --> 01:11:06,230
>> Ainsi, il pourrait aussi bien être
comme une incantation magique.

1523
01:11:06,230 --> 01:11:11,300
Il est pas tout à fait clair, mais cela a
quelque chose à voir avec la fenêtre,

1524
01:11:11,300 --> 01:11:15,070
et la fenêtre se trouve le corps d'un
page web, la région rectangulaire

1525
01:11:15,070 --> 01:11:16,690
définit la plupart de la page.

1526
01:11:16,690 --> 01:11:19,060
Et cela est tout simplement dit
le navigateur, vous savez quoi?

1527
01:11:19,060 --> 01:11:22,589
Faire la largeur de cette page
effectivement égale à la largeur de l'appareil.

1528
01:11:22,589 --> 01:11:25,380
En d'autres termes, ne supposez pas que
vous avez sorte d'espace illimité.

1529
01:11:25,380 --> 01:11:29,920
Supposons que vous avez seulement autant
l'espace que l'appareil lui-même est grand.

1530
01:11:29,920 --> 01:11:34,454
Et maintenant, si je recharge cette
dans mon navigateur, je ne vois aucun changement.

1531
01:11:34,454 --> 01:11:37,370
Mais si je l'ai fait et correctly--
laissez-moi passer mon fingers-- si vous tous

1532
01:11:37,370 --> 01:11:42,920
recharger vos téléphones, avez-vous
voir un changement convaincant?

1533
01:11:42,920 --> 01:11:43,620
Ouais, est that--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIENCE: [Inaudible]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. Malan: Oui.

1536
01:11:45,900 --> 01:11:46,400
D'ACCORD.

1537
01:11:46,400 --> 01:11:47,850
Donc, sans doute plus lisible maintenant?

1538
01:11:47,850 --> 01:11:53,070
Encore petite, pour être juste, mais pas
si minuscule à être ingérable.

1539
01:11:53,070 --> 01:11:56,920
Et je pourrais certainement remplacer cette
en outre avec CSS ou sur le côté du serveur,

1540
01:11:56,920 --> 01:12:00,120
mais de plus en plus ce que vous êtes
voir est de plus en plus de fonctionnalités

1541
01:12:00,120 --> 01:12:02,900
être ajouté à
environments-- côté client

1542
01:12:02,900 --> 01:12:06,530
JavaScript, comme nous le verrons
demain, CSS et HTML-- donc

1543
01:12:06,530 --> 01:12:09,190
que toutes ces questions
peut être fait sur le client

1544
01:12:09,190 --> 01:12:11,910
de manière à déranger le
serveur beaucoup moins et non

1545
01:12:11,910 --> 01:12:14,530
d'avoir à suivre, pour
par exemple, l'assaut constant

1546
01:12:14,530 --> 01:12:17,210
du nouveau système d'exploitation
versions, de nouvelles versions du navigateur.

1547
01:12:17,210 --> 01:12:20,190
Vous pouvez simplement laisser le navigateur
demander à l'appareil, comment grand vous êtes,

1548
01:12:20,190 --> 01:12:22,890
et ensuite faire un peu logique
décisions sur cette base.

1549
01:12:22,890 --> 01:12:25,140
Mais nous verrons plus de possibilités
pour des décisions logiques

1550
01:12:25,140 --> 01:12:27,223
demain dans le contexte
d'un langage de programmation.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Ainsi, des questions, puis,
sur le développement web?

1553
01:12:32,760 --> 01:12:36,130
Aujourd'hui est pas la programmation web, par
soi, puisque la plupart tout ce que nous avons fait

1554
01:12:36,130 --> 01:12:38,370
était très esthétique, si vous voulez.

1555
01:12:38,370 --> 01:12:41,750
Il n'y a pas de décision dans
le code que nous avons écrit,

1556
01:12:41,750 --> 01:12:44,990
et voilà pourquoi HTML est un balisage
langue, pas un langage de programmation.

1557
01:12:44,990 --> 01:12:47,140
Mais demain, nous allons prendre
un coup d'œil, en fin de compte,

1558
01:12:47,140 --> 01:12:49,340
au JavaScript, qui est
une programmation effective

1559
01:12:49,340 --> 01:12:54,220
langue qui nous permet de faire un peu plus.

1560
01:12:54,220 --> 01:12:56,800
>> Des questions?

1561
01:12:56,800 --> 01:13:00,480
Eh bien, permettez-moi de proposer deux
opportunités en option pour les devoirs.

1562
01:13:00,480 --> 01:13:02,900
Un est-- ces Cloud9
comptes ne seront pas expirer.

1563
01:13:02,900 --> 01:13:04,669
Vous êtes invités à utiliser
qu'ils bricolent avec.

1564
01:13:04,669 --> 01:13:05,960
Il est le niveau de service gratuit.

1565
01:13:05,960 --> 01:13:08,754
Sachez que, si lors de la création
votre espace de travail, vous a rendue publique,

1566
01:13:08,754 --> 01:13:11,670
cela ne signifie pas que toute personne sur
Internet peut voir ce que vous tapez.

1567
01:13:11,670 --> 01:13:15,104
Alors peut-être considérer seulement
pas vous embarrasser

1568
01:13:15,104 --> 01:13:18,020
si vous mettez votre première web
la page là publiquement accidentellement,

1569
01:13:18,020 --> 01:13:20,134
mais personne ne va
savoir pour y chercher de toute façon.

1570
01:13:20,134 --> 01:13:23,760
>> Et two-- me jette
cette URL aussi bien,

1571
01:13:23,760 --> 01:13:28,250
surtout si vous êtes venu aujourd'hui
peu moins confortable que d'autres,

1572
01:13:28,250 --> 01:13:30,430
pas sûr ce que signifie tout ce genre de choses.

1573
01:13:30,430 --> 01:13:36,780
Sachez que beaucoup plus de cette vidéo,
qui est à la fois un bon moyen de se endormir

1574
01:13:36,780 --> 01:13:39,380
et aussi de rire tout en
Ce faisant, a également

1575
01:13:39,380 --> 01:13:44,300
beaucoup de sociétalement intéressant
et des discussions de sécurité pertinentes

1576
01:13:44,300 --> 01:13:47,370
celui-ci de John Oliver,
mais un comédien.

1577
01:13:47,370 --> 01:13:55,456
>> Mais s'il n'y a pas d'autres questions,
cela nous amène à la réception.

1578
01:13:55,456 --> 01:13:56,830
Alors pourquoi je tourne pas sur la musique.

1579
01:13:56,830 --> 01:13:58,610
Il devrait y avoir des boissons
et des collations à l'extérieur.

1580
01:13:58,610 --> 01:14:00,220
Je suis heureux de se mêler aussi
Tant que les gens aimeraient,

1581
01:14:00,220 --> 01:14:01,600
répondre à des questions plus en tête-à-un.

1582
01:14:01,600 --> 01:14:03,330
Mais, sinon, vous êtes les bienvenus
à décoller à tout moment,

1583
01:14:03,330 --> 01:14:05,740
et nous vous reverrons
demain matin pour un peu plus.

1584
01:14:05,740 --> 01:14:07,290
Très bien, merci.

1585
01:14:07,290 --> 01:14:10,428