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

2
00:00:00,127 --> 00:00:01,210
David J. MALAN: Va bene.

3
00:00:01,210 --> 00:00:02,160
Siamo tornati.

4
00:00:02,160 --> 00:00:05,810
Quindi, l'obiettivo di questa sessione finale
è quello di introdurre un paio di concetti

5
00:00:05,810 --> 00:00:09,290
ma anche dare a tutti la possibilità
al tipo di allungare le dita

6
00:00:09,290 --> 00:00:11,270
ed effettivamente fare qualcosa
un po 'hands-on.

7
00:00:11,270 --> 00:00:13,897
L'obiettivo non è di trasformare
tutti noi in sviluppatori web

8
00:00:13,897 --> 00:00:16,230
con qualsiasi mezzo, ma in realtà solo
per darvi un assaggio di alcuni

9
00:00:16,230 --> 00:00:21,750
dei costrutti fondamentali quali
va in programmazione web e oggi web

10
00:00:21,750 --> 00:00:23,980
sviluppo, quindi la
parte statica di things--

11
00:00:23,980 --> 00:00:26,660
nessuna logica, nessuna programmazione
lingua, solo contenuto statico.

12
00:00:26,660 --> 00:00:29,660
E ci darà l'opportunità
per vedere in realtà ciò che un server web è,

13
00:00:29,660 --> 00:00:34,140
Vedere che cosa è un file HTML, vedere che cosa
è HTTP è in realtà servendo.

14
00:00:34,140 --> 00:00:38,600
Ma prima di tuffarci in, qualsiasi retrospettiva
domande su cloud computing

15
00:00:38,600 --> 00:00:43,922
o la sicurezza o nulla in mezzo?

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

17
00:00:44,890 --> 00:00:47,181
D'accordo, beh, diciamo
fare questo, nel caso in cui

18
00:00:47,181 --> 00:00:49,680
il processo di firma per
qualcosa richiede pochi minuti.

19
00:00:49,680 --> 00:00:51,221
Ci lasciar fare in background.

20
00:00:51,221 --> 00:00:56,860
Vai avanti, se si potesse,
a c9.io. questo URL qui--

21
00:00:56,860 --> 00:01:02,810
Si tratta di una terza parte Clienti--
Platform as a Service, se si will--

22
00:01:02,810 --> 00:01:05,190
che sta per invitarvi
a firmare per un account,

23
00:01:05,190 --> 00:01:08,650
e sta andando a dare a ciascuno di voi
un conto nella cosiddetta nuvola

24
00:01:08,650 --> 00:01:11,330
sulle infrastrutture di qualcun altro,
una società denominata Cloud9.

25
00:01:11,330 --> 00:01:13,350
Ma cosa c'è di bello
questo è che ti danno

26
00:01:13,350 --> 00:01:15,990
un'approssimazione di
attuale di sviluppo del mondo reale

27
00:01:15,990 --> 00:01:18,530
ambiente, pur nella
nuvola e in un browser web,

28
00:01:18,530 --> 00:01:21,175
e useremo questo per davvero
sperimentare un po 'di oggi.

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

30
00:01:27,116 --> 00:01:30,260
E poi andare avanti e basta navigare
la strada per il processo di iscrizione

31
00:01:30,260 --> 00:01:32,630
se potessi.

32
00:01:32,630 --> 00:01:36,080
Così ci capita di utilizzare questo in classe
Insegno per tutti i nostri studenti,

33
00:01:36,080 --> 00:01:39,140
sia nel campus e fuori ora, e
è sostituito quello che storicamente

34
00:01:39,140 --> 00:01:41,390
Era software altrimenti scaricabile.

35
00:01:41,390 --> 00:01:44,620
Quindi, quello che l'accesso ai
è una di queste macchine virtuali,

36
00:01:44,620 --> 00:01:46,460
in sostanza, che ho descritto in precedenza.

37
00:01:46,460 --> 00:01:50,260
Così questa azienda Cloud9 probabilmente
canoni di locazione da un terzo Party-- davvero

38
00:01:50,260 --> 00:01:52,760
in questo caso, Google-- un intero
mucchio di macchine virtuali

39
00:01:52,760 --> 00:01:56,500
che in qualche modo chop fino in
l'illusione di singoli server

40
00:01:56,500 --> 00:01:58,610
che ognuno di noi ha il pieno controllo.

41
00:01:58,610 --> 00:02:01,640
Non è del tutto esatto dire
che sono le macchine virtuali,

42
00:02:01,640 --> 00:02:04,550
però, perché ciò che
Cloud9 in realtà usa

43
00:02:04,550 --> 00:02:07,570
è una tecnologia leggermente più recente
chiamato containerizzazione.

44
00:02:07,570 --> 00:02:13,150
E mi permetta di afferrare questa immagine
qui per dipingere questo quadro.

45
00:02:13,150 --> 00:02:16,540
>> Un contenitore è, se
si richiama l'immagine

46
00:02:16,540 --> 00:02:19,900
da prima, un po 'più leggero
peso che una macchina virtuale.

47
00:02:19,900 --> 00:02:22,090
Infatti, mentre lo scorso
ora abbiamo parlato di lì

48
00:02:22,090 --> 00:02:25,170
essendo un esercizio
del sistema e un hypervisor

49
00:02:25,170 --> 00:02:28,260
e poi il sistema operativo guest, guest
sistema operativo, operativo guest

50
00:02:28,260 --> 00:02:30,940
sistema, in cima alla vostra
hardware fisico,

51
00:02:30,940 --> 00:02:33,740
la differenza con questa nuova
La tecnologia, containerizzazione,

52
00:02:33,740 --> 00:02:37,290
è che tutti in qualche modo condividono
lo stesso sistema operativo.

53
00:02:37,290 --> 00:02:39,970
Ma ancora creano
l'illusione di tutti

54
00:02:39,970 --> 00:02:44,590
avendo la propria esclusiva
diritti amministrativi e file

55
00:02:44,590 --> 00:02:45,400
sul server.

56
00:02:45,400 --> 00:02:48,230
Ma c'è meno software
tra l'utente e l'hardware.

57
00:02:48,230 --> 00:02:52,260
Il risultato che è, in
teoria, un rendimento elevato,

58
00:02:52,260 --> 00:02:55,470
perché si sta utilizzando o
sprecare meno risorse

59
00:02:55,470 --> 00:02:57,360
su tale cosiddetto strato virtualizzazione.

60
00:02:57,360 --> 00:02:59,420
Quindi, questo è chiamato
containerizzazione per natura

61
00:02:59,420 --> 00:03:02,920
per mezzo di una tecnologia chiamata Docker,
che è molto affermando la propria identità.

62
00:03:02,920 --> 00:03:05,086
E questo è qualcosa che
ingegneri della vostra azienda

63
00:03:05,086 --> 00:03:08,610
potrebbe sorta di sorta di cominciare a parlare
su presto se non l'hanno già,

64
00:03:08,610 --> 00:03:11,590
anche se non c'è certamente
motivo per saltare su qualsiasi carro dei vincitori.

65
00:03:11,590 --> 00:03:15,410
>> Quindi, con quello detto, ciò che
probabilmente vede ora

66
00:03:15,410 --> 00:03:22,670
è uno schermo che sembra un po 'come questo.

67
00:03:22,670 --> 00:03:23,170
OK.

68
00:03:23,170 --> 00:03:25,260
E appena mi chiamano sopra se non.

69
00:03:25,260 --> 00:03:27,440
E se so-- vengo sopra se non.

70
00:03:27,440 --> 00:03:30,244
Andare avanti e fare clic su tale grande
oltre a creare uno spazio di lavoro,

71
00:03:30,244 --> 00:03:31,660
e vedrete una schermata come questa.

72
00:03:31,660 --> 00:03:35,020
È possibile chiamare l'area di lavoro
nome tutto quello che vuoi per il momento.

73
00:03:35,020 --> 00:03:38,660
E proprio in realtà per semplicità,
andare e- bene, alcuni di voi

74
00:03:38,660 --> 00:03:39,660
già avere aree di lavoro.

75
00:03:39,660 --> 00:03:47,050
Chiamatela quello che want-- affari,
Harvard, Giovedi, qualunque cosa vuoi.

76
00:03:47,050 --> 00:03:48,800
Non hai bisogno di una descrizione.

77
00:03:48,800 --> 00:03:52,380
Si può lasciare privata, a meno che non
già avere un gruppo di spazi di lavoro.

78
00:03:52,380 --> 00:03:55,280
Se si è costretti a renderlo pubblico,
che va bene per scopi di oggi.

79
00:03:55,280 --> 00:03:56,750
Anche qui, è uno dei upsell.

80
00:03:56,750 --> 00:03:59,939
È possibile ottenere uno spazio di lavoro privato per
predefinito. Ma se si vuole di più,

81
00:03:59,939 --> 00:04:00,980
si deve pagare di più.

82
00:04:00,980 --> 00:04:02,870
In caso contrario, ti obbligano
per rendere il vostro lavoro pubblico.

83
00:04:02,870 --> 00:04:05,600
Ma va bene, perché anche
obiettivo questo a comunità open-source

84
00:04:05,600 --> 00:04:07,700
per incoraggiare le persone a
in realtà collaborare.

85
00:04:07,700 --> 00:04:10,699
>> E l'ultima cosa che è importante,
però, è, dopo aver scelto un nome

86
00:04:10,699 --> 00:04:17,140
e dopo aver scelto privato o pubblico,
clicca HTML5, l'icona grande arancione

87
00:04:17,140 --> 00:04:22,430
secondo da sinistra, e
quindi fare clic su Crea area di lavoro.

88
00:04:22,430 --> 00:04:24,580
E probabilmente
prendere un minuto o giù di lì,

89
00:04:24,580 --> 00:04:26,540
ma avrete poi avere un
ambiente, una volta che si

90
00:04:26,540 --> 00:04:30,544
farlo, che sembra che ricorda
quello che ho sullo schermo qui ora.

91
00:04:30,544 --> 00:04:33,210
Ma, ancora una volta, si potrebbe prendere un minuto
o più per arrivare a questa schermata

92
00:04:33,210 --> 00:04:34,770
una volta che hai cliccato Crea area di lavoro.

93
00:04:34,770 --> 00:04:37,936
Ma solo a me Bandiera oltre se vuoi me
a dare un'occhiata a qualche cosa o consigli.

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

95
00:04:40,191 --> 00:04:40,690
Tutto ok.

96
00:04:40,690 --> 00:04:42,390
Quindi ho intenzione di sfondo questo per ora.

97
00:04:42,390 --> 00:04:44,260
Chiamami su se ti sembra di
avere difficoltà tecniche.

98
00:04:44,260 --> 00:04:46,210
Ma, ancora una volta, si potrebbe prendere un
po 'per che per aprire.

99
00:04:46,210 --> 00:04:49,570
E andiamo avanti e parlare di ciò che
significa in realtà per fare una pagina web,

100
00:04:49,570 --> 00:04:52,780
ciò che HTML è, e come tutto questo
ora interconnette come stiamo iniziando

101
00:04:52,780 --> 00:04:54,730
utilizzare effettivamente alcune delle tecnologie.

102
00:04:54,730 --> 00:04:58,310
Così si scopre che posso
andare sul mio piccolo Mac qui,

103
00:04:58,310 --> 00:05:01,650
aprire un semplice programma chiamato
TextEdit, o su Windows ho potuto

104
00:05:01,650 --> 00:05:04,480
aperto qualcosa chiamato Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
E potrei semplicemente fare qualcosa
come questo-- "ciao, mondo".

106
00:05:08,260 --> 00:05:12,020
E poi ho potuto salvare questo come
ciao.txt Quindi nessuna magia lì.

107
00:05:12,020 --> 00:05:15,200
Questo non ha nulla a che fare con il web
programmazione, niente a che fare con l'HTML.

108
00:05:15,200 --> 00:05:16,790
Basta creare un semplice file di testo.

109
00:05:16,790 --> 00:05:20,600
Ma si scopre che un web
pagina è letteralmente proprio questo.

110
00:05:20,600 --> 00:05:24,020
Si tratta di un semplice file di testo contenente il testo
che è possibile digitare a vostra tastiera,

111
00:05:24,020 --> 00:05:30,070
ma tipicamente ma non sempre
finisce in non .txt ma .html o .htm.

112
00:05:30,070 --> 00:05:32,050
E non lo fai solo
digitare parole del file.

113
00:05:32,050 --> 00:05:35,280
In realtà usare cose chiamate
tag o, più in generale, qualcosa

114
00:05:35,280 --> 00:05:37,190
chiamato linguaggio di markup.

115
00:05:37,190 --> 00:05:40,510
>> Quindi ho intenzione di digitare molto rapidamente
e poi spiegare il seguente.

116
00:05:40,510 --> 00:05:42,290
Sto per primo
digitare questo, che dice:

117
00:05:42,290 --> 00:05:45,730
Hey, il browser, ecco che arriva un
pagina web scritta in HTML.

118
00:05:45,730 --> 00:05:51,850
E queste due cose insieme dicono, hey,
del browser, il seguente è davvero HTML.

119
00:05:51,850 --> 00:05:55,790
Hey, il browser, ecco che arriva la
testa o la parte superiore della mia pagina.

120
00:05:55,790 --> 00:05:59,900
Hey, il browser, all'interno della parte superiore del
la mia pagina, mettere un titolo che è, "ciao,

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

122
00:06:01,610 --> 00:06:08,370
Hey, il browser, dopo la testa del mio
pagina, ecco che arriva il corpo della pagina.

123
00:06:08,370 --> 00:06:12,170
E, ehi, il browser, il corpo di mia
pagina dovrebbe anche dire, "Ciao mondo".

124
00:06:12,170 --> 00:06:15,500
Ma quali sono i dati salienti in questo modo?

125
00:06:15,500 --> 00:06:17,960
Questo è ciò che è generalmente
chiamato una dichiarazione di doc-tipo,

126
00:06:17,960 --> 00:06:20,190
e, francamente, è un po '
difficile memorizzare questo all'inizio.

127
00:06:20,190 --> 00:06:21,481
È solo tipo di copia-incolla.

128
00:06:21,481 --> 00:06:23,760
Questo è il modo convenzionale
di dire, ehi, il browser,

129
00:06:23,760 --> 00:06:28,030
Sto usando la versione HTML 5, che
è venuto fuori un po 'di recente.

130
00:06:28,030 --> 00:06:31,380
Si tratta di una formula magica che alcuni
gli esseri umani con un scarso senso del design

131
00:06:31,380 --> 00:06:33,640
ha deciso di mettere a
molto all'inizio del file.

132
00:06:33,640 --> 00:06:35,473
Anche se si tratta di un
poco arcane, questo è tutto

133
00:06:35,473 --> 00:06:38,250
esso designa: hey, il browser, qui
viene fornito con la versione 5 di HTML.

134
00:06:38,250 --> 00:06:41,741
>> Il resto di questo è stato con noi
da qualche tempo, storicamente,

135
00:06:41,741 --> 00:06:44,740
ma è stato in continua evoluzione, ed è
probabilmente stato sempre un po 'più semplice.

136
00:06:44,740 --> 00:06:47,320
Notare alcune caratteristiche
di quello che ho evidenziato.

137
00:06:47,320 --> 00:06:49,890
Ci sono queste cose con angolato
brackets-- la staffa sinistra

138
00:06:49,890 --> 00:06:51,040
e la staffa destra.

139
00:06:51,040 --> 00:06:52,490
E notare la simmetria qui.

140
00:06:52,490 --> 00:06:57,340
E per simmetria, voglio dire, come io
avere questo tag di inizio qui o un tag aperto

141
00:06:57,340 --> 00:07:01,560
se si vuole, qui ho una
tag di chiusura o di un tag di chiusura che è

142
00:07:01,560 --> 00:07:06,460
diverso solo in quanto ha questa
tagliare all'inizio della parola

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

144
00:07:07,360 --> 00:07:09,360
E si può pensare di
questo come mi è stato casualmente

145
00:07:09,360 --> 00:07:12,280
proponendo prima, hey,
del browser, ecco che arriva un po 'di HTML.

146
00:07:12,280 --> 00:07:16,060
E, viceversa, hey, il browser, che è
per l'inizio e la fine HTML--.

147
00:07:16,060 --> 00:07:18,440
>> Nel frattempo hey, il browser, qui
arriva il capo della mia pagina.

148
00:07:18,440 --> 00:07:20,140
Hey, il browser, questo è tutto per la testa.

149
00:07:20,140 --> 00:07:22,240
Hey, il browser, qui è
il corpo della pagina.

150
00:07:22,240 --> 00:07:24,020
Hey, il browser, il gioco è fatto per il corpo.

151
00:07:24,020 --> 00:07:26,940
E all'interno di questo è certa
testo arbitrario per ora.

152
00:07:26,940 --> 00:07:30,520
E all'interno della testa, nel frattempo,
è un po 'arbitrario, ma etichettato,

153
00:07:30,520 --> 00:07:34,410
per così dire, testo che dice, il titolo
della mia pagina sarà "ciao, mondo".

154
00:07:34,410 --> 00:07:37,470
Ora, per il momento, è possibile
supporre che i browser

155
00:07:37,470 --> 00:07:41,762
hanno only-- o, meglio, le pagine web hanno
solo due parts-- la testa e il corpo.

156
00:07:41,762 --> 00:07:44,220
E la testa è in genere solo
come la barra dei menu, la roba

157
00:07:44,220 --> 00:07:45,510
in realtà solo in cima.

158
00:07:45,510 --> 00:07:48,910
E il corpo è il coraggio della pagina,
tutto in quella grande rettangolo

159
00:07:48,910 --> 00:07:50,239
che riempie lo schermo.

160
00:07:50,239 --> 00:07:51,780
Quindi ho intenzione di andare avanti e fare questo.

161
00:07:51,780 --> 00:07:54,400
Ho intenzione di andare avanti e di
fare clic su Salva, File Salva.

162
00:07:54,400 --> 00:07:58,580
E ho intenzione di salvare
questo come hello.html,

163
00:07:58,580 --> 00:08:00,870
e sto solo andando a
metterlo sul mio desktop.

164
00:08:00,870 --> 00:08:03,520
E ho intenzione di andare
avanti e fare clic su Salva.

165
00:08:03,520 --> 00:08:05,806
E notice-- mio Mac a
almeno sta urlando contro di me.

166
00:08:05,806 --> 00:08:07,180
Sei sicuro di volerlo fare?

167
00:08:07,180 --> 00:08:08,710
E ho intenzione di dire, sì, utilizzare HTML.

168
00:08:08,710 --> 00:08:10,400
So meglio in questo caso.

169
00:08:10,400 --> 00:08:14,686
E ora ho intenzione di andare al mio desktop
dove ho questo file improvvisamente.

170
00:08:14,686 --> 00:08:16,060
E ho intenzione di fare doppio clic su di esso.

171
00:08:16,060 --> 00:08:18,268
E si noterà che, per
predefinita, Chrome aperto.

172
00:08:18,268 --> 00:08:19,996
Ecco perché è
come browser predefinito.

173
00:08:19,996 --> 00:08:21,370
E si dice solo: "ciao, mondo".

174
00:08:21,370 --> 00:08:23,078
Ma si dice "ciao,
mondo "in due punti.

175
00:08:23,078 --> 00:08:23,979
Si noti in alto a sinistra.

176
00:08:23,979 --> 00:08:25,020
Abbastanza duro da mancare questo.

177
00:08:25,020 --> 00:08:26,180
E 'grande e grassetto.

178
00:08:26,180 --> 00:08:30,690
E dove altro non sembra
per dire, "ciao, mondo"?

179
00:08:30,690 --> 00:08:31,470
>> PUBBLICO: la scheda.

180
00:08:31,470 --> 00:08:33,100
>> David J. MALAN: Sì, la scheda stessa.

181
00:08:33,100 --> 00:08:35,159
Così, quando ho detto che il capo della
pagina è tutto fino top--

182
00:08:35,159 --> 00:08:36,367
e in effetti questo è il titolo.

183
00:08:36,367 --> 00:08:37,710
E 'solo nella scheda qui.

184
00:08:37,710 --> 00:08:40,320
E posso tirare questa scheda
in modo da non confondere.

185
00:08:40,320 --> 00:08:43,360
Questa è solo una scheda singola ora,
e in effetti si vede "ciao, mondo"

186
00:08:43,360 --> 00:08:45,970
qui e "ciao, mondo" quaggiù.

187
00:08:45,970 --> 00:08:47,160
Così abbastanza semplice.

188
00:08:47,160 --> 00:08:49,050
Ma è anche abbastanza semplice.

189
00:08:49,050 --> 00:08:50,440
E, in realtà, ho ingrandito.

190
00:08:50,440 --> 00:08:53,272
Posso cambiare la dimensione del carattere solo
per ingrandire per l'accessibilità.

191
00:08:53,272 --> 00:08:56,830
Ma andiamo ora fare qualcosa
un po 'più interessante.

192
00:08:56,830 --> 00:08:59,760
>> Ho intenzione di go-- whoops, lasciare
mi tornare al mio file di testo.

193
00:08:59,760 --> 00:09:02,400
Io torno al mio
file di testo, e ho intenzione

194
00:09:02,400 --> 00:09:06,320
di cambiare questo e dire
"Ciao, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
E tornare al mio
browser e fare clic su Ricarica.

197
00:09:10,919 --> 00:09:12,710
E ora, naturalmente,
dice "Disney World".

198
00:09:12,710 --> 00:09:15,500
E ho intenzione di ingrandire artificialmente
nel solo così è più facile da vedere.

199
00:09:15,500 --> 00:09:19,012
Così ora, purtroppo, io tipo di voglio
a-- in realtà, questa è una caratteristica di Mac.

200
00:09:19,012 --> 00:09:21,720
Voglio cliccare su Disney World
e andare da qualche parte, come disney.com,

201
00:09:21,720 --> 00:09:23,290
ma questo non funziona.

202
00:09:23,290 --> 00:09:26,850
Quindi, un principio fondamentale del web è
collegamenti ipertestuali, i collegamenti che vanno altrove.

203
00:09:26,850 --> 00:09:28,390
Allora, come faccio a farlo?

204
00:09:28,390 --> 00:09:34,690
Beh, ho potuto solo dire,
"Ciao, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Salva questo.

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

207
00:09:37,620 --> 00:09:39,400
Ma anche questo, non è cliccabile.

208
00:09:39,400 --> 00:09:42,930
E ciò che è bello qui, anche se
questo non è ancora funzionale,

209
00:09:42,930 --> 00:09:45,930
è che sembra che la
il browser fa letteralmente solo

210
00:09:45,930 --> 00:09:46,950
quello che io dico di fare.

211
00:09:46,950 --> 00:09:50,110
Quindi, se ho appena digita un URL come questo,
è solo andare a farmi vedere l'URL.

212
00:09:50,110 --> 00:09:54,270
Ho bisogno di usare tag o markup
lingua per raccontare realtà

213
00:09:54,270 --> 00:09:55,621
il browser per fare ancora di più.

214
00:09:55,621 --> 00:09:57,870
Quindi ho intenzione di andare avanti e
eliminare questo per un momento.

215
00:09:57,870 --> 00:10:00,980
E ho intenzione di dire, hey,
del browser, avviare un ancoraggio qui,

216
00:10:00,980 --> 00:10:02,650
un link per così dire.

217
00:10:02,650 --> 00:10:07,500
E l'iper-di riferimento, la destinazione
di che ancora, dovrebbe essere questo URL.

218
00:10:07,500 --> 00:10:08,750
E notare mie citazioni.

219
00:10:08,750 --> 00:10:11,590
Potrei usare le virgolette singole, troppo,
ma bisogna essere coerenti,

220
00:10:11,590 --> 00:10:14,270
e vorrei in genere basta usare
doppi apici per mantenere le cose semplici.

221
00:10:14,270 --> 00:10:16,820
Si noti che ho intenzione di chiudere il tag.

222
00:10:16,820 --> 00:10:21,160
E poi qui ho intenzione
per dire, "Disney World".

223
00:10:21,160 --> 00:10:26,890
E ora ho bisogno di un po symmetry--
parentesi aperta, / a, staffa chiusa.

224
00:10:26,890 --> 00:10:28,090
>> Quindi che cosa ho introdotto?

225
00:10:28,090 --> 00:10:30,100
Abbiamo avuto un paio di tag già.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, Titolo, Corpo,
sono tutti i tag, per così dire,

227
00:10:32,410 --> 00:10:34,280
con le controparti aperti e chiusi.

228
00:10:34,280 --> 00:10:36,530
Ma notate, questo è una sorta
di fondamentalmente diverso.

229
00:10:36,530 --> 00:10:39,140
Questo è ciò che chiameremo
in HTML un attributo.

230
00:10:39,140 --> 00:10:41,451
Ed è un attributo
solo una coppia chiave-valore.

231
00:10:41,451 --> 00:10:43,950
Questa è una cosa comune in
coppia chiave-valore del computer science--.

232
00:10:43,950 --> 00:10:45,770
È un po 'lo strumento del commercio.

233
00:10:45,770 --> 00:10:47,040
Una chiave e un valore.

234
00:10:47,040 --> 00:10:49,390
Una parola e poi alcuni
altra parola o le parole.

235
00:10:49,390 --> 00:10:53,790
E in questo caso, la chiave è href,
e il valore è che la piena URL.

236
00:10:53,790 --> 00:10:57,890
E che un attributo fa è
influenza il comportamento di un tag.

237
00:10:57,890 --> 00:11:01,010
E in questo caso, dobbiamo influenzare
il comportamento del tag di ancoraggio,

238
00:11:01,010 --> 00:11:04,140
perché abbiamo bisogno di ancorare
questo link da qualche parte.

239
00:11:04,140 --> 00:11:06,960
E come si fa che è
mediante dell'attributo.

240
00:11:06,960 --> 00:11:08,970
>> Quindi ho intenzione di andare avanti
e salvare il file ora.

241
00:11:08,970 --> 00:11:11,300
Torna al mio browser e ricarica.

242
00:11:11,300 --> 00:11:14,580
E, voilà, ora abbiamo la
inizio di una pagina web legittima.

243
00:11:14,580 --> 00:11:18,420
Super-semplice, ma se mi passa il mouse sopra
avviso questo-- nell'angolo in basso a sinistra,

244
00:11:18,420 --> 00:11:19,830
è super-piccole.

245
00:11:19,830 --> 00:11:21,730
Ma si fa vedere www.disney.com.

246
00:11:21,730 --> 00:11:27,076
E se lo scatto, in effetti questo
mi rapisce a disney.com.

247
00:11:27,076 --> 00:11:29,380
Ora, la cosa curiosa
ecco che non è

248
00:11:29,380 --> 00:11:33,940
il best-- l'URL più commerciabili, ma
va bene, perché questo file non lo fa

249
00:11:33,940 --> 00:11:35,360
esistono sul World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Esiste come un file locale a quanto pare
I miei utenti directory-- / jharvard--

251
00:11:39,740 --> 00:11:41,890
per John Harvard-- / desktop.

252
00:11:41,890 --> 00:11:42,634
Ma ha un URL.

253
00:11:42,634 --> 00:11:43,800
Succede solo per essere locale.

254
00:11:43,800 --> 00:11:47,050
Purtroppo, nessuno di voi può visitare
questo, perché se si digita questo URL,

255
00:11:47,050 --> 00:11:49,980
si sarebbe dire al vostro browser
cercare un file chiamato hello.html

256
00:11:49,980 --> 00:11:50,772
sul disco rigido.

257
00:11:50,772 --> 00:11:53,271
E, naturalmente, a meno che non hai
stato seguito lungo manualmente,

258
00:11:53,271 --> 00:11:54,530
non sta andando ad esistere lì.

259
00:11:54,530 --> 00:11:55,190
>> Così va bene.

260
00:11:55,190 --> 00:11:57,815
Abbiamo ancora bisogno di un modo, in ultima analisi,
per ottenere questo file nel web,

261
00:11:57,815 --> 00:12:01,180
ma cerchiamo di prendere in giro a parte un paio di
implicazioni per la sicurezza di ciò che abbiamo appena

262
00:12:01,180 --> 00:12:04,850
visto e legare di nuovo al precedente
discussione da questa mattina.

263
00:12:04,850 --> 00:12:08,200
Risulta che, se un
del browser letteralmente appena fa

264
00:12:08,200 --> 00:12:12,560
quello che io dico di fare, e sembra
essere il caso che un tag di ancoraggio è

265
00:12:12,560 --> 00:12:17,380
influenzato dal valore
questo attributo chiamato href

266
00:12:17,380 --> 00:12:20,810
ma visualizza questo
testo, questo sembra

267
00:12:20,810 --> 00:12:26,520
implicare che ho potuto mettere l'URL
in entrambi i posti e quindi ricaricare

268
00:12:26,520 --> 00:12:29,100
e ora vedere l'URL e accedere all'URL.

269
00:12:29,100 --> 00:12:32,680
Avviso, se mi passa il mouse sopra la parte inferiore a sinistra,
Sono infatti in corso ancora da disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Quindi, se siete mai stati
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
con uno di quei messaggi di posta elettronica fasulli
da come PayPal vostra banca,

272
00:12:42,820 --> 00:12:46,470
probabilmente avete ottenuto i collegamenti all'interno
dell'e-mail che stai leggendo che

273
00:12:46,470 --> 00:12:49,970
ti dice di fare clic qui per andare conferma
la password o confermare la data di nascita

274
00:12:49,970 --> 00:12:53,840
o sociale o qualcosa di socialmente
si ingegneria di divulgare

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

276
00:12:54,920 --> 00:12:57,625
Beh, potrei tipo di prendere
Il vantaggio di questo, non avrei potuto?

277
00:12:57,625 --> 00:13:01,240
Potrei dire qualcosa
come, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
E invece di disney.com, I
potrebbe andare a, come, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
E come è facile di ingannare,
in particolare un lettore non tecnico

281
00:13:16,620 --> 00:13:20,649
o un cursorily lettura
lettore di cliccare

282
00:13:20,649 --> 00:13:23,940
un link come questo, che se clicco it--
Io in realtà non voglio andare badguy.com.

283
00:13:23,940 --> 00:13:25,398
Non so che cosa è in realtà c'è.

284
00:13:25,398 --> 00:13:30,080
Così paypal.com, avviso, è
quello che dice che sta andando,

285
00:13:30,080 --> 00:13:33,210
ma naturalmente, se guardo verso il basso
super-basso, è un po 'sfocata,

286
00:13:33,210 --> 00:13:34,230
ma si dice badguy.com.

287
00:13:34,230 --> 00:13:38,644
Questo è l'unico dicono in questo momento
che sto andando al posto sbagliato.

288
00:13:38,644 --> 00:13:41,560
E quando ho detto prima che le banche
in realtà non dovrebbe incoraggiare o treno

289
00:13:41,560 --> 00:13:44,510
utenti in link cliccando, questo
è solo una manifestazione di esso.

290
00:13:44,510 --> 00:13:45,430
Ed è così semplice.

291
00:13:45,430 --> 00:13:48,120
Ora sei un avversario, se
si fa qualcosa di simile

292
00:13:48,120 --> 00:13:51,000
e cercare di ingannare un utente
a visitare il tuo sito web.

293
00:13:51,000 --> 00:13:53,320
Ma per ora, vi terremo
le cose belle e pulite.

294
00:13:53,320 --> 00:13:55,640
Stiamo per andare avanti
e riavvolgere questi cambiamenti.

295
00:13:55,640 --> 00:13:56,530
Ricaricare la pagina.

296
00:13:56,530 --> 00:13:57,740
E torno a disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Vediamo se non siamo in grado di prendere in giro
questo a parte un po 'di più.

298
00:14:00,660 --> 00:14:04,160
Quindi, "ciao, Disney World."

299
00:14:04,160 --> 00:14:05,950
Sto per dire qui.

300
00:14:05,950 --> 00:14:08,220
Forse sto andando a fare un po 'di spazio.

301
00:14:08,220 --> 00:14:12,730
"Ci auguriamo che il vostro soggiorno!"

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

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

304
00:14:15,850 --> 00:14:19,010
Non è che non è rea--
quello che intendevo, giusto?

305
00:14:19,010 --> 00:14:21,870
Voglio dire, se io sto trattando il mio testo
presentare come un word processor,

306
00:14:21,870 --> 00:14:24,894
che cosa speri sarebbe successo qui?

307
00:14:24,894 --> 00:14:27,060
Sì, mi sento come se ci
dovrebbe essere una interruzione di linea qui,

308
00:14:27,060 --> 00:14:28,799
così ci si sente buggy in qualche modo.

309
00:14:28,799 --> 00:14:31,090
Ma che in realtà è deliberata,
perché come prima,

310
00:14:31,090 --> 00:14:33,381
il browser sta solo
fai quello che gli si dice di fare.

311
00:14:33,381 --> 00:14:34,806
Non l'ho detto a rompere le linee.

312
00:14:34,806 --> 00:14:37,930
Non ho detto che a muoversi verso il basso, anche
però, intuitivamente, mi sento come ho fatto io.

313
00:14:37,930 --> 00:14:39,805
Così si scopre che dobbiamo
un po 'più markup,

314
00:14:39,805 --> 00:14:41,390
e ho intenzione di risolvere il problema nel modo seguente.

315
00:14:41,390 --> 00:14:46,160
Ho intenzione di precedere questo primo ciao
con quello che viene chiamato un tag di paragrafo.

316
00:14:46,160 --> 00:14:48,920
E poi ho intenzione di andare avanti
e avvolgere quest'altra frase

317
00:14:48,920 --> 00:14:54,370
in un altro tag di paragrafo, anche se
sono paragrafi super-corti.

318
00:14:54,370 --> 00:14:55,930
Ora ho intenzione di risparmiare.

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

320
00:14:57,160 --> 00:14:59,070
E ora abbiamo che
spazio, e specie di

321
00:14:59,070 --> 00:15:01,680
avere la semantica di
due paragrafi distinti.

322
00:15:01,680 --> 00:15:05,290
>> Questo è tutto bello e buono, ma sarebbe
bello poter aggiungere un'immagine a questa pagina,

323
00:15:05,290 --> 00:15:08,710
così ho intenzione di andare a cercare
Topolino su Google Immagini.

324
00:15:08,710 --> 00:15:12,830
E solo per divertimento, io sono
andando a prendere questa immagine.

325
00:15:12,830 --> 00:15:15,350
Ho intenzione di andare avanti ora e
afferrare l'URL di questa immagine,

326
00:15:15,350 --> 00:15:16,510
anche se non c'è diverso
modi per farlo.

327
00:15:16,510 --> 00:15:18,520
Per ora, sto solo andando a copiare l'URL.

328
00:15:18,520 --> 00:15:24,770
Ho intenzione di tornare nel mio testo
file e ho intenzione di dire qui,

329
00:15:24,770 --> 00:15:31,160
img src = tra virgolette
tale URL, super-lungo.

330
00:15:31,160 --> 00:15:34,580
E poi l'idea di un
immagine è un po 'diverso.

331
00:15:34,580 --> 00:15:38,640
Non c'è davvero alcuna nozione di partenza
un'immagine e termina un'immagine,

332
00:15:38,640 --> 00:15:40,630
come un inizio contrassegnare un tag di chiusura.

333
00:15:40,630 --> 00:15:43,840
Così ci si sente un po 'strano per
Mi semanticamente per fare questo,

334
00:15:43,840 --> 00:15:45,390
di avere un tag vicino immagine.

335
00:15:45,390 --> 00:15:46,780
Non è corretto.

336
00:15:46,780 --> 00:15:48,840
E 'perfettamente corretto,
ed è incoraggiato,

337
00:15:48,840 --> 00:15:50,870
ma c'è notazione abbreviata.

338
00:15:50,870 --> 00:15:53,780
Posso tipo di simultaneamente
aprire e chiudere lo stesso tag,

339
00:15:53,780 --> 00:15:55,510
e che farà felice il browser.

340
00:15:55,510 --> 00:15:56,950
Quindi è solo un po '
più succinta per le cose

341
00:15:56,950 --> 00:15:59,408
che concettualmente in realtà non fare
dare un senso a inizio e fine.

342
00:15:59,408 --> 00:16:01,190
Hanno appena ci sono, o non lo sono.

343
00:16:01,190 --> 00:16:06,020
>> Quindi ho intenzione di salvare questo e tornare
al mio "ciao, mondo" ed ricarica.

344
00:16:06,020 --> 00:16:09,880
Ed è un po 'fuori controllo,
perché l'immagine è in realtà

345
00:16:09,880 --> 00:16:12,210
un po 'grande, ma va bene.

346
00:16:12,210 --> 00:16:13,710
Ho potuto ridimensionare in un programma.

347
00:16:13,710 --> 00:16:14,900
O se si sa che cosa.

348
00:16:14,900 --> 00:16:17,350
Proprio per dimostrare, io sono
andando a dire in realtà

349
00:16:17,350 --> 00:16:21,760
che la larghezza di questa cosa dovrebbe
solo 200 pixel, 200 punti.

350
00:16:21,760 --> 00:16:24,360
Lasciami andare avanti e salvare
e ricaricare, e ora la pagina

351
00:16:24,360 --> 00:16:25,690
sembra un po 'più ragionevole.

352
00:16:25,690 --> 00:16:27,260
Ma notare il modello.

353
00:16:27,260 --> 00:16:30,030
Beh, ho tipo di insegnato a tutti voi
di HTML in un certo senso, almeno

354
00:16:30,030 --> 00:16:33,531
concettualmente, perché tutto è HTML è
questi tags-- tag aperti, i tag chiusi,

355
00:16:33,531 --> 00:16:35,280
e gli attributi che
modificare il loro comportamento.

356
00:16:35,280 --> 00:16:38,380
E, a quanto pare, ogni
tag può avere zero o un

357
00:16:38,380 --> 00:16:43,005
o due o più attributi, ciascuno di
che fa qualcosa di un po 'diverso.

358
00:16:43,005 --> 00:16:44,380
Ora, come fai a sapere ciò che esiste?

359
00:16:44,380 --> 00:16:46,800
Basta ascoltare qualcuno
come vi dica ciò che esiste,

360
00:16:46,800 --> 00:16:50,860
o semplicemente Google in giro per un tutorial
su HTML, ed è davvero così semplice.

361
00:16:50,860 --> 00:16:54,030
>> In verità, quando ero un undergrad
anni fa e ho imparato HTML,

362
00:16:54,030 --> 00:16:56,530
uno del mio insegnamento di matematica
assistenti appena trascorso

363
00:16:56,530 --> 00:16:59,600
un po 'di tempo mi tutoraggio
per come mezz'ora, un'ora,

364
00:16:59,600 --> 00:17:00,660
e poi sono stato per la mia strada.

365
00:17:00,660 --> 00:17:03,300
Ero sul mio cammino verso la realizzazione
le più orribili siti di sempre,

366
00:17:03,300 --> 00:17:05,549
che, a quanto pare, non ho
davvero progredito oltre.

367
00:17:05,549 --> 00:17:09,849
Ma il punto è che, una volta che si
capire queste semplici ideas--

368
00:17:09,849 --> 00:17:13,450
se arcana text-- ma questi semplici
idee di iniziare un pensiero

369
00:17:13,450 --> 00:17:15,960
e la chiusura di un pensiero, mantenendo
tutto ben equilibrato,

370
00:17:15,960 --> 00:17:19,150
guardando qualcosa, modificando il
comportamento di quel tag, che è davvero tutto

371
00:17:19,150 --> 00:17:20,079
c'è da esso.

372
00:17:20,079 --> 00:17:28,140
E infatti, se ora andiamo a
qualcosa come google.com-- in realtà,

373
00:17:28,140 --> 00:17:31,920
andiamo un posto un po 'più
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
E ho intenzione di andare a Visualizza,
,. Developer Visualizza sorgente

375
00:17:37,800 --> 00:17:41,400
E 'brutto, ma notice--
e io lo zoom in comunicazione

376
00:17:41,400 --> 00:17:43,432
alcune cose che è già familiare.

377
00:17:43,432 --> 00:17:45,140
C'è questo qui,
che è un browser.

378
00:17:45,140 --> 00:17:46,800
Ecco che arriva HTML5.

379
00:17:46,800 --> 00:17:47,634
C'è HTML.

380
00:17:47,634 --> 00:17:49,550
A quanto pare, c'è un
attributo che non ho

381
00:17:49,550 --> 00:17:51,540
uso che specifica il
lingua della pagina,

382
00:17:51,540 --> 00:17:54,380
e questo può aiutare con automatica
traduzione e cose del genere.

383
00:17:54,380 --> 00:17:55,546
Ecco la testa della pagina.

384
00:17:55,546 --> 00:17:57,790
Ecco il titolo della pagina Stanford.

385
00:17:57,790 --> 00:17:59,832
C'è un tag non ho
parlare di yet-- meta-tag.

386
00:17:59,832 --> 00:18:01,540
E 'solo una sorta di
informazioni di base.

387
00:18:01,540 --> 00:18:04,210
Aiuta con SEO, o
ottimizzazione del motore di ricerca,

388
00:18:04,210 --> 00:18:06,320
o risultati di Google-ricerca o simili.

389
00:18:06,320 --> 00:18:09,029
Ma se continuiamo a guardare, tenere
cercando, ecco il tag body.

390
00:18:09,029 --> 00:18:11,570
E ci sono mazzi di altri
tag non abbiamo ancora parlato.

391
00:18:11,570 --> 00:18:13,750
Ma Div è uno per un
divisione della pagina.

392
00:18:13,750 --> 00:18:16,680
E 'come un rettangolo invisibile
se di tipo desidera mentalmente

393
00:18:16,680 --> 00:18:20,160
suddividere la pagina in
diverse unità online.

394
00:18:20,160 --> 00:18:22,650
E poi un sacco di div I
vedere, qualcosa che si chiama classe,

395
00:18:22,650 --> 00:18:24,440
ma ci torneremo a questo.

396
00:18:24,440 --> 00:18:26,200
>> Si tratta di forme interesting--.

397
00:18:26,200 --> 00:18:27,730
Le forme sono in tutto il web.

398
00:18:27,730 --> 00:18:30,310
Ogni casella di ricerca si è
mai usato è una forma.

399
00:18:30,310 --> 00:18:31,490
E, così, cerchiamo di vedere in realtà.

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

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

402
00:18:33,910 --> 00:18:37,660
L'azione di questo modulo, per qualsiasi
ragioni storiche, è tale URL.

403
00:18:37,660 --> 00:18:38,840
Metodo è "post".

404
00:18:38,840 --> 00:18:44,060
Risulta che le richieste HTTP possono utilizzare
il verbo "avere", come abbiamo visto prima,

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

406
00:18:45,070 --> 00:18:47,030
E vedrà la differenza
questo in un momento.

407
00:18:47,030 --> 00:18:48,363
Andiamo a vedere in realtà che cosa si tratta.

408
00:18:48,363 --> 00:18:49,830
Lasciatemi tornare alla pagina di Stanford.

409
00:18:49,830 --> 00:18:53,330
Quale forma stanno parlando
A proposito, cosa ne pensi?

410
00:18:53,330 --> 00:18:54,485
Ciò che salta fuori di te?

411
00:18:54,485 --> 00:18:54,970
>> PUBBLICO: Casella di ricerca.

412
00:18:54,970 --> 00:18:55,845
>> David J. MALAN: Sì.

413
00:18:55,845 --> 00:18:58,410
Così fino in alto a destra
qui è questa casella di ricerca.

414
00:18:58,410 --> 00:19:02,441
Ed è così che hanno implementato un it--
tag che letteralmente forma open-staffa.

415
00:19:02,441 --> 00:19:03,940
E poi cerchiamo di cercare qualcosa.

416
00:19:03,940 --> 00:19:09,220
Andiamo a cercare un compagno
di mine-- "Nick Parlante".

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

418
00:19:11,380 --> 00:19:13,750
E, naturalmente, è andato a
un URL leggermente diverso.

419
00:19:13,750 --> 00:19:15,140
Mi permetta di tornare qui.

420
00:19:15,140 --> 00:19:18,960
Facciamo della ricerca di "corsi".

421
00:19:18,960 --> 00:19:19,460
Accidenti.

422
00:19:19,460 --> 00:19:20,484
È andato a un URL diverso.

423
00:19:20,484 --> 00:19:23,400
Quindi, Stanford di aggiungere un po 'di magia
che non mi stanno prendendo all'URL

424
00:19:23,400 --> 00:19:25,820
che abbiamo visto nella
azione attributo lì.

425
00:19:25,820 --> 00:19:32,480
Ma questa forma qui è implementato puramente
per mezzo di questo markup qui, questi tag.

426
00:19:32,480 --> 00:19:35,710
In realtà, qui è l'ingresso per
il tipo di ricerca che si desidera.

427
00:19:35,710 --> 00:19:38,940
Qui è l'ingresso per
un altro tipo di ricerca.

428
00:19:38,940 --> 00:19:41,960
Qui è l'ingresso per la stringa stessa.

429
00:19:41,960 --> 00:19:45,394
E così l'obiettivo non è quello di avvolgere
le nostre menti intorno a tutti questi tag

430
00:19:45,394 --> 00:19:46,060
ma solo per vedere.

431
00:19:46,060 --> 00:19:48,300
E 'solo l'apertura e chiusura
tag e guardando le cose.

432
00:19:48,300 --> 00:19:48,560
Sì?

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

434
00:19:48,920 --> 00:19:49,795
>> PUBBLICO: [INAUDIBLE]

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

436
00:19:51,925 --> 00:19:53,550
David J. MALAN: Questa è una buona domanda.

437
00:19:53,550 --> 00:19:54,660
Questo è un po 'più complicato da vedere.

438
00:19:54,660 --> 00:19:56,300
Mi permetta di tornare a quella
domanda in pochi minuti

439
00:19:56,300 --> 00:19:59,000
quando guardiamo qualcosa chiamato
fogli CSS, o di stile CSS,

440
00:19:59,000 --> 00:20:02,500
e possiamo cercare di dedurre
tanto dalla pagina.

441
00:20:02,500 --> 00:20:08,090
Quindi, se oggi diamo uno sguardo a google.com,
vediamo cosa loro pagina assomiglia.

442
00:20:08,090 --> 00:20:09,840
Si potrebbe they're-- che carino oggi.

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

444
00:20:12,490 --> 00:20:12,990
OK.

445
00:20:12,990 --> 00:20:13,690
Tutto fatto.

446
00:20:13,690 --> 00:20:15,260
Va bene, quindi Visualizza origine.

447
00:20:15,260 --> 00:20:19,590
Si potrebbe pensare che Google ha
codice sorgente veramente bello.

448
00:20:19,590 --> 00:20:24,970
Quindi, a quanto pare, quello che sta succedendo qui?

449
00:20:24,970 --> 00:20:27,880
Ed infatti, questo non è nemmeno HTML.

450
00:20:27,880 --> 00:20:30,930
Questo è qualcosa che si chiama JavaScript.

451
00:20:30,930 --> 00:20:32,344
E cerchiamo di andare avanti e andare avanti.

452
00:20:32,344 --> 00:20:34,010
Io non so nemmeno dove la pagina inizia.

453
00:20:34,010 --> 00:20:37,240
Ho intenzione di usare Command
F, aperto staffa HTML.

454
00:20:37,240 --> 00:20:38,200
Va bene, non vi è.

455
00:20:38,200 --> 00:20:44,150
Ho trovato l'inizio della pagina, e
c'è così tanta roba qui dentro.

456
00:20:44,150 --> 00:20:45,310
>> Che cosa sta realmente succedendo?

457
00:20:45,310 --> 00:20:47,460
Beh, sai una cosa,
possiamo pulire questo in su.

458
00:20:47,460 --> 00:20:52,109
Se io invece vado a questo Ispezionare
barra degli strumenti, questo strumento diagnostico speciale,

459
00:20:52,109 --> 00:20:54,150
e non andare a rete,
dove continuiamo a oggi,

460
00:20:54,150 --> 00:20:56,420
ma se vado a Elements,
ciò che è veramente bello

461
00:20:56,420 --> 00:20:59,990
è che un browser ha molto
occhi molto meglio di me.

462
00:20:59,990 --> 00:21:02,670
E il browser in grado di leggere
quel casino di una pagina web,

463
00:21:02,670 --> 00:21:04,700
che la posta HTML abbiamo appena
guardato, e può

464
00:21:04,700 --> 00:21:08,340
analizzarlo o leggere e
analizzarlo e lo riformatta

465
00:21:08,340 --> 00:21:09,910
in un bel modo human-friendly.

466
00:21:09,910 --> 00:21:11,740
Quindi quello che sto vedendo ora
in questa schermata qui

467
00:21:11,740 --> 00:21:15,470
sotto Elementi, esattamente lo stesso contenuto,
ma sono rientrate tutto,

468
00:21:15,470 --> 00:21:18,140
hanno colorized, ma
è lo stesso testo esatto

469
00:21:18,140 --> 00:21:19,620
che ho scaricato dal server.

470
00:21:19,620 --> 00:21:23,630
>> E ciò che è bello è ora posso vedere
nel corpo, per la comunicazione instance--,

471
00:21:23,630 --> 00:21:26,480
La pagina è ancora composto
di solo una testa e un corpo,

472
00:21:26,480 --> 00:21:28,660
e posso gerarchicamente immergersi qui.

473
00:21:28,660 --> 00:21:32,420
Si noti che Google sembra avere
a divs-- questo e questo.

474
00:21:32,420 --> 00:21:33,310
Posso espandere tale.

475
00:21:33,310 --> 00:21:35,370
C'è un sacco di altri div.

476
00:21:35,370 --> 00:21:36,900
Quindi è un po 'complessa.

477
00:21:36,900 --> 00:21:37,400
Ma aspetta.

478
00:21:37,400 --> 00:21:40,970
Questo sembra molto di più
leggibile, relativamente, di questo.

479
00:21:40,970 --> 00:21:43,840
Perché Google imbarazzante
stesso semplicemente inviando

480
00:21:43,840 --> 00:21:50,400
questo enorme pasticcio di codice di alcuni
sorta proprio per implementare qualcosa

481
00:21:50,400 --> 00:21:53,640
che sembra così semplice a prima vista?

482
00:21:53,640 --> 00:21:55,270
Come, perché non aggiungono più spazi?

483
00:21:55,270 --> 00:21:56,811
Perché non hanno colpito Inserisci come ho fatto?

484
00:21:56,811 --> 00:21:59,110
Guardate quanto è buono sono stato
a scrivere una pagina web.

485
00:21:59,110 --> 00:22:00,680
Mi ha colpito Enter così diligentemente.

486
00:22:00,680 --> 00:22:03,760
I rientrato quindi tutto
è così bella e leggibile.

487
00:22:03,760 --> 00:22:08,463
Perché Google non pratica la stessa cosa?

488
00:22:08,463 --> 00:22:11,409
>> PUBBLICO: [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
Molto giusto.

492
00:22:14,270 --> 00:22:16,650
Non hanno un po '
persona a Google manualmente

493
00:22:16,650 --> 00:22:18,160
l'aggiornamento più la home page.

494
00:22:18,160 --> 00:22:20,010
Non è 1.999 più.

495
00:22:20,010 --> 00:22:21,140
Così hanno software.

496
00:22:21,140 --> 00:22:25,397
Hanno altri strumenti
generare dinamicamente sono HTML.

497
00:22:25,397 --> 00:22:27,480
Naturalmente, tale codice stesso
è stato scritto da esseri umani,

498
00:22:27,480 --> 00:22:30,220
ma la realtà è,
è abbastanza giusto dire,

499
00:22:30,220 --> 00:22:33,340
il browser di certo non lo fa
importa quanto disordinato il codice è.

500
00:22:33,340 --> 00:22:35,940
Ma c'è un ancor più
ragione tecnica convincente

501
00:22:35,940 --> 00:22:42,580
che Google distribuisce la loro HTML
codice in un tale sloppy, apparentemente

502
00:22:42,580 --> 00:22:48,350
modo schiacciante tutto imballato insieme
con pochissimo way-- pochissimo

503
00:22:48,350 --> 00:22:51,274
nel modo di formattazione come ho fatto io.

504
00:22:51,274 --> 00:22:52,570
>> PUBBLICO: [INAUDIBLE]

505
00:22:52,570 --> 00:22:53,528
>> David J. MALAN: più veloce?

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

507
00:22:54,040 --> 00:22:55,680
E che cosa hai detto, Lydia?

508
00:22:55,680 --> 00:22:56,240
Più veloce?

509
00:22:56,240 --> 00:22:57,281
Perché più veloce?

510
00:22:57,281 --> 00:22:58,156
PUBBLICO: [INAUDIBLE]

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

512
00:23:00,522 --> 00:23:02,230
David J. MALAN: Non c'è
spazio per leggere.

513
00:23:02,230 --> 00:23:02,730
Sì.

514
00:23:02,730 --> 00:23:04,560
Quindi, pensare a quello che è uno spazio.

515
00:23:04,560 --> 00:23:08,394
Così ogni carattere sulla tastiera prende
una certa quantità di spazio per rappresentare,

516
00:23:08,394 --> 00:23:10,560
sia fisicamente, come se fosse
occupa molto spazio,

517
00:23:10,560 --> 00:23:13,250
o in qualche modo sotto il
Cappuccio, che richiede la memoria.

518
00:23:13,250 --> 00:23:15,740
E come un aside-- e faremo
comunicare di più circa questo tomorrow--

519
00:23:15,740 --> 00:23:19,930
ogni carattere sulla tastiera
tipicamente richiede 8 bit o un byte.

520
00:23:19,930 --> 00:23:23,360
Così un reticolo di 8 zeri o
quelli, o solo 1 byte, come noi

521
00:23:23,360 --> 00:23:24,720
gli esseri umani sarebbero tipicamente dire.

522
00:23:24,720 --> 00:23:27,690
Ecco, questo è piccolo, ma
è ancora non-zero.

523
00:23:27,690 --> 00:23:29,940
E 'ancora una certa quantità di spazio.

524
00:23:29,940 --> 00:23:36,082
Quindi, se un ingegnere o Google colpisce
la barra spaziatrice una sola volta, e supponiamo

525
00:23:36,082 --> 00:23:38,540
Google-- è super-popular--
supporre che un miliardo di persone

526
00:23:38,540 --> 00:23:40,780
visitare la loro home page al giorno,
o un numero di persone

527
00:23:40,780 --> 00:23:43,290
visitare la home page di un
miliardo di volte al giorno,

528
00:23:43,290 --> 00:23:48,890
quanti byte aggiuntivi che ha
ingegnere del software appena costato Google

529
00:23:48,890 --> 00:23:51,310
colpendo il suo spazio bar una volta?

530
00:23:51,310 --> 00:23:52,692
>> PUBBLICO: [INAUDIBLE]

531
00:23:52,692 --> 00:23:54,150
David J. MALAN: non è così male.

532
00:23:54,150 --> 00:23:57,070
Solo uno volte byte un miliardo.

533
00:23:57,070 --> 00:23:57,871
Così a--

534
00:23:57,871 --> 00:23:59,120
PUBBLICO: 8 miliardi di gigabyte.

535
00:23:59,120 --> 00:24:00,370
David J. MALAN: Non 8 miliardi.

536
00:24:00,370 --> 00:24:01,240
8 miliardi di byte.

537
00:24:01,240 --> 00:24:02,410
Ma 1 gigabyte.

538
00:24:02,410 --> 00:24:04,080
1 gigabyte sarebbe l'unità di misura.

539
00:24:04,080 --> 00:24:08,240
Se lui o lei fa due
spazi, 2 gigabyte.

540
00:24:08,240 --> 00:24:09,030
Tre gigabyte.

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

542
00:24:09,530 --> 00:24:11,860
Si scale costoso.

543
00:24:11,860 --> 00:24:16,150
E così, in casi come Google,
che, scontato, sono casi estremi,

544
00:24:16,150 --> 00:24:21,450
ci sono altre questioni che sorgono appena
prendendo decisioni molto ragionevoli

545
00:24:21,450 --> 00:24:25,744
o prendendo molto semplici azioni umane,
perché ha questo effetto amplificato.

546
00:24:25,744 --> 00:24:27,660
Quindi uno dei motivi
questo sembra così compresso

547
00:24:27,660 --> 00:24:30,660
è esattamente come Victoria said-- era
appena generato da computer in ogni caso.

548
00:24:30,660 --> 00:24:31,900
Quindi un grosso problema.

549
00:24:31,900 --> 00:24:33,309
Lasciate che il browser capirlo.

550
00:24:33,309 --> 00:24:35,350
Ma è anche volutamente
non ha molto spazio,

551
00:24:35,350 --> 00:24:36,766
perché lo spazio non è necessaria.

552
00:24:36,766 --> 00:24:38,250
E lo spazio in realtà costa denaro.

553
00:24:38,250 --> 00:24:40,670
>> E 'uno costa tempo,
perché solo a spingere

554
00:24:40,670 --> 00:24:44,670
che molti più dati su
sede di google.com solo

555
00:24:44,670 --> 00:24:47,710
ha avuto modo di prendere una certa quantità di
tempo, anche se è millisecondi

556
00:24:47,710 --> 00:24:51,190
o microsecondi, ma che aggiunge fino
in tanti utenti, o più probabilmente,

557
00:24:51,190 --> 00:24:52,270
probabilmente costa denaro.

558
00:24:52,270 --> 00:24:54,690
Google probabilmente si connette a
qualcun altro nel mondo, uno

559
00:24:54,690 --> 00:24:56,398
di quelli peering
punti, e se hanno

560
00:24:56,398 --> 00:24:59,880
qualche tipo di rapporto finanziario
il quale i costi i loro dati denaro,

561
00:24:59,880 --> 00:25:01,730
si potrebbe anche
ridurre al minimo la quantità di dati

562
00:25:01,730 --> 00:25:04,530
stanno sputando su
la loro connessione internet.

563
00:25:04,530 --> 00:25:07,630
>> Quindi la cosa divertente, anche se, in ultima analisi,
o forse la cosa rassicurante,

564
00:25:07,630 --> 00:25:11,030
è che anche se questo sembra terribilmente
schiacciante, alla fine della giornata,

565
00:25:11,030 --> 00:25:16,750
è ancora gli stessi principi esatto
questo molto semplice pagina qui di HTML

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

567
00:25:17,390 --> 00:25:20,610
Quindi, solo per riassumere e in modo che si
avere una versione canonica se non erano

568
00:25:20,610 --> 00:25:25,900
in seguito insieme per scelta qui, qui
potrebbe essere la più semplice delle pagine web,

569
00:25:25,900 --> 00:25:28,240
quindi qualcosa di giocare con forse più tardi.

570
00:25:28,240 --> 00:25:30,790
>> Bene, introdurre un
paio di altre idee ora.

571
00:25:30,790 --> 00:25:33,420
Stiamo per introdurre
qualcosa chiamato un tag di stile.

572
00:25:33,420 --> 00:25:38,110
Siamo in grado di stilizzare questa pagina
in modi più interessanti.

573
00:25:38,110 --> 00:25:40,860
Così, mentre e-mail HTML
è tutta una questione di marcatura fino

574
00:25:40,860 --> 00:25:44,470
i dati, sorta di specificare un
browser come strutturare i dati,

575
00:25:44,470 --> 00:25:48,110
dove metterlo, CSS, o
Fogli di stile,

576
00:25:48,110 --> 00:25:52,640
è una seconda lingua
generalmente viene mescolate ad HTML

577
00:25:52,640 --> 00:25:55,670
come vedremo see-- ma possiamo pulire
che in un moment-- che prende

578
00:25:55,670 --> 00:25:59,850
è il miglio finale, e stilizza esso.

579
00:25:59,850 --> 00:26:02,460
Ottiene i colori giusto,
la dimensioni dei caratteri appena a destra,

580
00:26:02,460 --> 00:26:03,860
il posizionamento giusto.

581
00:26:03,860 --> 00:26:06,510
E 'tutta una questione di estetica
o la formattazione, non si tratta di

582
00:26:06,510 --> 00:26:08,330
i dati fondamentali in sé.

583
00:26:08,330 --> 00:26:11,390
E il modo più semplice per mostrare
questo è forse l'esempio.

584
00:26:11,390 --> 00:26:15,320
Quindi ho intenzione di andare oltre
al mio semplice file di testo.

585
00:26:15,320 --> 00:26:17,970
E in un momento, io
noi a piedi attraverso il processo

586
00:26:17,970 --> 00:26:19,360
di fare questo noi stessi.

587
00:26:19,360 --> 00:26:23,310
>> Ho intenzione di tornare al mio file
qui e ricaricare la pagina appena

588
00:26:23,310 --> 00:26:25,800
per confermare quello che sembra.

589
00:26:25,800 --> 00:26:27,190
Ecco dove siamo ora.

590
00:26:27,190 --> 00:26:31,170
Mi sento come figli godrebbero
avendo un pò di colore a questa pagina web.

591
00:26:31,170 --> 00:26:34,480
Quindi ho intenzione di andare qui
nella testa della pagina.

592
00:26:34,480 --> 00:26:38,130
E ho intenzione di fare stile, / style.

593
00:26:38,130 --> 00:26:44,060
E poi all'interno di questo, sto andando
a dire il corpo del mio page--

594
00:26:44,060 --> 00:26:46,870
e questa formattazione è, a
prima vista, forse un po '

595
00:26:46,870 --> 00:26:49,400
strano ma convenzionale.

596
00:26:49,400 --> 00:26:55,010
Io vado a dire che lo sfondo
il colore di questa pagina deve essere di colore verde.

597
00:26:55,010 --> 00:26:57,960
E questo è, purtroppo,
sorta di non il miglior design.

598
00:26:57,960 --> 00:27:00,710
Si noti che in precedenza
nel mondo di HTML,

599
00:27:00,710 --> 00:27:03,190
Ho detto che gli attributi
sono queste coppie chiave-valore.

600
00:27:03,190 --> 00:27:05,760
Qualcosa è uguale a quote
unquote "qualcosa".

601
00:27:05,760 --> 00:27:08,810
Nel mondo dei CSS, che era
progettato da alcune persone diverse,

602
00:27:08,810 --> 00:27:11,020
hanno deciso che, nella loro
mondo, coppie chiave-valore

603
00:27:11,020 --> 00:27:13,920
sarebbe parola colon qualcosa.

604
00:27:13,920 --> 00:27:15,220
Quindi è la stessa idea, però.

605
00:27:15,220 --> 00:27:18,620
E 'associare un valore
con qualche chiave che in qualche modo

606
00:27:18,620 --> 00:27:20,330
influenza il comportamento di questa pagina.

607
00:27:20,330 --> 00:27:21,901
>> E si può intuire.

608
00:27:21,901 --> 00:27:24,150
Che cosa è questo probabilmente sta andando
da fare anche se non hai mai

609
00:27:24,150 --> 00:27:27,867
visto HTML o CSS prima?

610
00:27:27,867 --> 00:27:29,450
AUDIENCE: Cambiare il colore di sfondo.

611
00:27:29,450 --> 00:27:30,560
David J. MALAN: Sì,
cambiare il colore di sfondo.

612
00:27:30,560 --> 00:27:33,280
E in particolare il
colore di sfondo del corpo.

613
00:27:33,280 --> 00:27:36,290
Ma nella misura in cui la
corpo per ora è il web

614
00:27:36,290 --> 00:27:38,870
page-- è l'unica cosa
al di sotto della barra del titolo really--

615
00:27:38,870 --> 00:27:40,870
è probabilmente andando a
influenzare la stessa cosa.

616
00:27:40,870 --> 00:27:41,430
Quindi vediamo.

617
00:27:41,430 --> 00:27:42,490
Salviamo questo.

618
00:27:42,490 --> 00:27:44,310
Vai qui e ricaricare.

619
00:27:44,310 --> 00:27:46,140
E 'piuttosto orribile.

620
00:27:46,140 --> 00:27:48,070
E cosa sta succedendo
qui è un effetto collaterale.

621
00:27:48,070 --> 00:27:49,850
Ho appena scelto questa immagine in modo casuale.

622
00:27:49,850 --> 00:27:53,305
Perché il non verde
permea dietro Mickey?

623
00:27:53,305 --> 00:27:54,180
PUBBLICO: [INAUDIBLE]

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

625
00:27:56,880 --> 00:27:57,880
David J. MALAN: Esattamente.

626
00:27:57,880 --> 00:28:01,750
Si scopre che le immagini, piuttosto
molto tutte le immagini che potremmo utilizzare,

627
00:28:01,750 --> 00:28:03,670
sono tutti rectangles-- di rettangoli.

628
00:28:03,670 --> 00:28:07,710
Anche se Mickey ha alcune curve
a se stesso e ha un background,

629
00:28:07,710 --> 00:28:09,330
In tale contesto deve essere qualcosa.

630
00:28:09,330 --> 00:28:10,280
Deve essere bianco.

631
00:28:10,280 --> 00:28:11,910
Deve essere nero o qualcosa d'altro.

632
00:28:11,910 --> 00:28:13,650
Può essere trasparente.

633
00:28:13,650 --> 00:28:16,100
E infatti, ho potuto
aprire Topolino qui

634
00:28:16,100 --> 00:28:18,590
in un programma chiamato Photoshop
o qualcosa di simile

635
00:28:18,590 --> 00:28:21,176
e cambiare tutto questo bianco
sfondo trasparente,

636
00:28:21,176 --> 00:28:22,550
in modo che il verde sarebbe trasparire.

637
00:28:22,550 --> 00:28:25,980
Ma questo è qualcosa che avrei bisogno
a chiedere di me stesso o un artista grafico

638
00:28:25,980 --> 00:28:28,130
o un designer al mio
società, ad esempio,

639
00:28:28,130 --> 00:28:31,490
da fare, soprattutto perché ho appena
preso in prestito questo uno da internet.

640
00:28:31,490 --> 00:28:33,030
Ma questo è il motivo per cui questo sta accadendo.

641
00:28:33,030 --> 00:28:34,980
>> Quindi, che cosa potremmo desiderare di fare?

642
00:28:34,980 --> 00:28:41,040
Beh, potremmo voler dire che
veramente auguriamo che il vostro soggiorno.

643
00:28:41,040 --> 00:28:44,150
E per dare enfasi, voglio
per rendere questo forte,

644
00:28:44,150 --> 00:28:48,310
e così ti dico forte e aperto
chiudere forte e quindi ricaricare.

645
00:28:48,310 --> 00:28:50,320
Ed è un po 'difficile
per vedere il proiettore

646
00:28:50,320 --> 00:28:53,250
ma forse proprio ora
salta fuori di te un po 'di più.

647
00:28:53,250 --> 00:28:56,180
Quindi è possibile aggiungere il corsivo in questo
modo, rivestimento in grassetto in questo modo.

648
00:28:56,180 --> 00:28:57,500
Potremmo cambiare i colori.

649
00:28:57,500 --> 00:29:01,610
In realtà, solo per calci, io sono
intenzione di andare avanti e fare questo.

650
00:29:01,610 --> 00:29:05,120
Non mi piace molto come la mia
paragrafi sono così vicino insieme,

651
00:29:05,120 --> 00:29:06,870
così potrei fare qualcosa di simile.

652
00:29:06,870 --> 00:29:13,310
Io vado a dire al browser,
cambiare ogni tag di paragrafo di avere,

653
00:29:13,310 --> 00:29:16,952
cerchiamo di say-- in realtà, si sa che cosa,
cerchiamo di allinearlo text-align, centro.

654
00:29:16,952 --> 00:29:19,410
E ancora, so che questo solo
perché qualcuno ha insegnato a me

655
00:29:19,410 --> 00:29:21,118
o Ho cercato in
un punto di riferimento on-line.

656
00:29:21,118 --> 00:29:22,450
Quindi, mi permetta di salvare questo.

657
00:29:22,450 --> 00:29:25,070
E, ah, ora ho
centrato l'immagine lì.

658
00:29:25,070 --> 00:29:28,490
E in realtà, si sa che cosa, se
Mi muovo la mia immagine in un paragrafo

659
00:29:28,490 --> 00:29:34,510
tag-- così un terzo paragrafo,
anche se non del testo.

660
00:29:34,510 --> 00:29:36,917
Salviamo che e ricaricare.

661
00:29:36,917 --> 00:29:40,000
Ora la pagina sta cominciando a sembrare tipo
di-- Voglio dire, è ancora abbastanza brutto,

662
00:29:40,000 --> 00:29:43,180
ma almeno sembra che ho trascorso
due minuti invece del minuto

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

664
00:29:43,950 --> 00:29:47,200
>> E così, in modo incrementale, possiamo fare
queste modifiche estetiche ora alla pagina?

665
00:29:47,200 --> 00:29:50,860
Non ho davvero cambiato i dati nel
pagina diversa aggiungendo la parola davvero.

666
00:29:50,860 --> 00:29:52,650
Ho metadati aggiunti, se si vuole.

667
00:29:52,650 --> 00:29:54,830
Hey, il browser, rendono la
parola "veramente" in grassetto.

668
00:29:54,830 --> 00:29:56,940
Ma i dati non è forte.

669
00:29:56,940 --> 00:29:57,830
Ecco i metadati.

670
00:29:57,830 --> 00:29:59,410
I dati sono "davvero".

671
00:29:59,410 --> 00:30:02,200
Così abbiamo ancora un po 'di
gli stessi concetti come prima.

672
00:30:02,200 --> 00:30:05,990
Ora, naturalmente, questo non è sul web,
così ho intenzione di fare un passo finale qui.

673
00:30:05,990 --> 00:30:10,300
>> Ho intenzione di andare a hello.html
e basta evidenziare e copiare questo.

674
00:30:10,300 --> 00:30:12,285
E ora ho intenzione di
andare in Cloud9, che

675
00:30:12,285 --> 00:30:13,910
Ti accompagno attraverso in un attimo.

676
00:30:13,910 --> 00:30:17,080
E le probabilità sono sarete presto, se
Non già, in una schermata come questa.

677
00:30:17,080 --> 00:30:21,080
E vorrei solo darvi un rapido
giro di ciò che Cloud9 è in realtà.

678
00:30:21,080 --> 00:30:26,590
Quindi, di nuovo Cloud 9 è
questo servizio basato su cloud

679
00:30:26,590 --> 00:30:30,580
che voi e mi dà l'illusione
di avere la nostra macchina virtuale

680
00:30:30,580 --> 00:30:33,090
in the cloud, tecnicamente
un contenitore in the cloud,

681
00:30:33,090 --> 00:30:35,160
che abbiamo piena
privilegi amministrativi a.

682
00:30:35,160 --> 00:30:37,130
Quindi, in teoria, nessuno
altra parte del mondo ha

683
00:30:37,130 --> 00:30:39,152
l'accesso alla schermata Sono
guardando in questo momento,

684
00:30:39,152 --> 00:30:40,860
tranne forse la gente
che gestiscono il sito,

685
00:30:40,860 --> 00:30:43,470
perché tecnicamente hanno
accesso fisico e così via.

686
00:30:43,470 --> 00:30:44,740
>> Quindi, cosa vediamo in questo ambiente?

687
00:30:44,740 --> 00:30:46,230
Ho intenzione di diminuire,
perché è un po 'piccola.

688
00:30:46,230 --> 00:30:48,104
E vorrei sottolineare sopra
qui solo per un momento.

689
00:30:48,104 --> 00:30:53,210
Sul lato sinistro del mio e vostro
schermo, c'è un browser di file a sinistra.

690
00:30:53,210 --> 00:30:55,362
Quindi, simile nello spirito
per Mac OS e Windows.

691
00:30:55,362 --> 00:30:57,070
Queste sono tutte le
i file nel mio conto.

692
00:30:57,070 --> 00:30:59,250
E per impostazione predefinita, se il vostro
conto è come la mia,

693
00:30:59,250 --> 00:31:05,090
vedrete o subito vedere
HelloWorld.html e readme.md.

694
00:31:05,090 --> 00:31:07,950
Qui a destra, questo è
dove i miei file di testo stanno per andare.

695
00:31:07,950 --> 00:31:11,620
Se avete mai utilizzato Microsoft
Word o Blocco note o TextEdit,

696
00:31:11,620 --> 00:31:14,100
questa è la parola il mio editing
di file sta per andare.

697
00:31:14,100 --> 00:31:16,540
E poi il più arcano
caratteristica di questo ambiente

698
00:31:16,540 --> 00:31:20,100
che non sarà davvero bisogno di usare è
qui chiamato una finestra terminale.

699
00:31:20,100 --> 00:31:23,390
Se hai utilizzato DOS da
altri tempi, questo è il Linux

700
00:31:23,390 --> 00:31:25,450
o l'equivalente Linux di DOS.

701
00:31:25,450 --> 00:31:28,190
Si tratta di un interface-- basato su testo
nessun clic del mouse, senza trascinamento.

702
00:31:28,190 --> 00:31:30,770
Tutto quello che puoi fare è digitare
comandi, ma questi comandi

703
00:31:30,770 --> 00:31:34,400
in grado di creare file, spostare file, aperto
directory, directory, chiudere

704
00:31:34,400 --> 00:31:35,740
fare qualsiasi numero di cose.

705
00:31:35,740 --> 00:31:38,060
Ma per ora, ci limiteremo a
passare il nostro tempo qui.

706
00:31:38,060 --> 00:31:39,050
>> E così facciamo questo.

707
00:31:39,050 --> 00:31:41,008
Se siete in questa
ambiente, che si dovrebbe

708
00:31:41,008 --> 00:31:45,900
essere se è stato creato uno spazio di lavoro
già, andare avanti e basta salire

709
00:31:45,900 --> 00:31:48,690
File, Nuovo per un momento.

710
00:31:48,690 --> 00:31:51,740
E che vi darà una nuova
scheda a destra qui in mezzo.

711
00:31:51,740 --> 00:31:54,250
E io solo-- e andiamo
andare avanti e fare questo.

712
00:31:54,250 --> 00:31:59,910
Andiamo avanti e ora non File, Salva
e andare avanti e chiamare hello.html,

713
00:31:59,910 --> 00:32:02,740
da non confondere con
HelloWorld.html, che

714
00:32:02,740 --> 00:32:06,910
è venuto con il nuovo account gratuito,
che è solo un file di esempio.

715
00:32:06,910 --> 00:32:11,020
Vedrete apparire improvvisamente,
probabilmente sul lato sinistro,

716
00:32:11,020 --> 00:32:12,810
e la scheda sarà ancora aperta.

717
00:32:12,810 --> 00:32:21,300
E lasciate che vi incoraggio ora di ricreare
questo file o alcune loro varianti.

718
00:32:21,300 --> 00:32:24,607
E se non riesco a vedere sul
schermo, questo è identica alle slitte

719
00:32:24,607 --> 00:32:26,190
che probabilmente avete in un'altra scheda.

720
00:32:26,190 --> 00:32:29,296
>> Così, in breve, effettuare la prima pagina web,
salvarlo, e poi in un attimo,

721
00:32:29,296 --> 00:32:31,170
Ti faccio vedere come si
può effettivamente vedere questo.

722
00:32:31,170 --> 00:32:32,970
Ma cambiare almeno una cosa.

723
00:32:32,970 --> 00:32:35,400
Cambiare HelloWorld a
qualcosa di vostra scelta,

724
00:32:35,400 --> 00:32:39,821
in modo che sei convinto che è il tuo
di file e non quello che ho appena creato.

725
00:32:39,821 --> 00:32:40,320
Tutto ok.

726
00:32:40,320 --> 00:32:43,804
E quando sei ready-- no
rush-- quando si è pronti,

727
00:32:43,804 --> 00:32:46,220
andare avanti e salvare il file
una volta che hai fatto queste modifiche.

728
00:32:46,220 --> 00:32:49,540
E se si fa clic sul
button up Esegui superiore, questo

729
00:32:49,540 --> 00:32:53,610
dovrebbe aprire una nuova scheda che vi dirà
che cosa URL si può visitare il file in,

730
00:32:53,610 --> 00:32:56,380
ma potrebbe prendere un momento per
tra virgolette "start Apache", che

731
00:32:56,380 --> 00:32:58,820
è il nome del server web.

732
00:32:58,820 --> 00:33:02,430
Quindi state attenti a fare esattamente
cosa c'è nel file in ultima analisi.

733
00:33:02,430 --> 00:33:04,610
Quindi in questo momento, io Zoom avanti.

734
00:33:04,610 --> 00:33:07,780
Se si digita
open-staffa HTML, avviso

735
00:33:07,780 --> 00:33:09,650
mi sta spingendo a finire il mio pensiero.

736
00:33:09,650 --> 00:33:13,750
E se ho finito il mio pensiero,
mi dà automaticamente il tag di chiusura.

737
00:33:13,750 --> 00:33:17,190
Ma l'attesa viene poi mi ha colpito
Invio, e quindi spostare all'interno vi

738
00:33:17,190 --> 00:33:21,180
e non la testa dentro e
poi faccio corpo all'interno.

739
00:33:21,180 --> 00:33:24,430
Ed è un po 'strano in un primo momento,
perché sta facendo il lavoro per voi,

740
00:33:24,430 --> 00:33:27,110
ma rendersi conto che in ultima analisi,
esso consente di risparmiare battute.

741
00:33:27,110 --> 00:33:30,500
Ed in effetti, una caratteristica molto comune
programmazione ambienti in questi giorni

742
00:33:30,500 --> 00:33:33,260
sia per lo sviluppo web come
questo e programmazione attuale,

743
00:33:33,260 --> 00:33:36,960
che parleremo domani,
è queste funzionalità di completamento automatico,

744
00:33:36,960 --> 00:33:39,710
cose che solo consentono una
programmatore o un designer

745
00:33:39,710 --> 00:33:42,010
digitare un minor numero di tasti a
ottenere la stessa cosa.

746
00:33:42,010 --> 00:33:43,176
A volte è bello, però.

747
00:33:43,176 --> 00:33:44,560
A volte è solo fastidioso.

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

749
00:33:49,290 --> 00:33:54,010
E, ancora una volta, una volta che hai trascritto
diapositiva o qualche variante di esso,

750
00:33:54,010 --> 00:33:57,360
è possibile fare clic sul pulsante Esegui sulla parte superiore.

751
00:33:57,360 --> 00:33:59,910
E poi sul fondo
finestra, sarai informato

752
00:33:59,910 --> 00:34:04,290
a che cosa URL è possibile visitare la vostra pagina web.

753
00:34:04,290 --> 00:34:08,790
Miniera, per esempio, è
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
e così via.

755
00:34:11,480 --> 00:34:14,580
Va bene, quindi, lasciare che me-- delle domande?

756
00:34:14,580 --> 00:34:19,460
Tutte le altre domande circa ottenere giusto
questo lavoro prima di aggiungere funzioni?

757
00:34:19,460 --> 00:34:21,692
E mi permetta di proporre, basta
per ottenere la gente comfortable--

758
00:34:21,692 --> 00:34:24,400
perché è una cosa da poco
copia-incollare ciecamente quello che ho fatto.

759
00:34:24,400 --> 00:34:27,177
Ma solo in modo che la gente lottare
con almeno una delle cose da fare,

760
00:34:27,177 --> 00:34:28,510
Ho intenzione di accendere po 'di musica.

761
00:34:28,510 --> 00:34:32,630
Ho intenzione di proporre un elenco di
cose che si possono potenzialmente aggiungere.

762
00:34:32,630 --> 00:34:34,086
E si può certamente utilizzare Google.

763
00:34:34,086 --> 00:34:36,210
E perché non abbiamo solo
propone che si tenta di risolvere

764
00:34:36,210 --> 00:34:38,710
almeno un particolare problema qui.

765
00:34:38,710 --> 00:34:45,090
Quindi, in termini di tag,
mi permetta di riutilizzare questo qui.

766
00:34:45,090 --> 00:34:48,280
>> A dire il vero, mi permetta di mettere
in una forma testuale.

767
00:34:48,280 --> 00:35:02,380
Diciamo che tra i tag che potremmo
usare qui ci sono alcuni tag qui.

768
00:35:02,380 --> 00:35:06,090
Abbiamo visto il tag di paragrafo.

769
00:35:06,090 --> 00:35:07,850
Ora sta andando per il completamento automatico.

770
00:35:07,850 --> 00:35:12,220
tag di paragrafo, il tag di ancoraggio.

771
00:35:12,220 --> 00:35:15,250
Diciamo che si desidera
fare qualcosa di più grande,

772
00:35:15,250 --> 00:35:19,480
così si potrebbe like--
il tag span può aiutare.

773
00:35:19,480 --> 00:35:23,010
Beh, potrebbe essere necessario qualche aiuto
per questo in un momento.

774
00:35:23,010 --> 00:35:24,830
Abbiamo visto div.

775
00:35:24,830 --> 00:35:26,170
Vedrete c'è tavolo.

776
00:35:26,170 --> 00:35:27,928
C'è qualcosa chiamato 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
Tornate a che in un attimo.

780
00:35:34,770 --> 00:35:36,590
Che altro potrebbe essere a portata di mano?

781
00:35:36,590 --> 00:35:38,310
C'è forte.

782
00:35:38,310 --> 00:35:43,640
Non c'è enfasi, o meglio em.

783
00:35:43,640 --> 00:35:50,110
There's-- che altro
Potrebbe avete voglia di qui?

784
00:35:50,110 --> 00:35:51,930
Bene, prenderemo un
guarda che insieme.

785
00:35:51,930 --> 00:35:53,230
Modulo, che abbiamo visto.

786
00:35:53,230 --> 00:35:54,130
C'è modulo.

787
00:35:54,130 --> 00:35:56,500
C'è di ingresso e pochi altri.

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

789
00:35:58,924 --> 00:36:00,090
Va bene, quindi cerchiamo di fare questo.

790
00:36:00,090 --> 00:36:02,330
Per rispondere ad una Victoria
domanda, mi lascia prima

791
00:36:02,330 --> 00:36:05,020
basta assicurarsi che tutti siano
in grado di ottenere il loro lavoro ciao.

792
00:36:05,020 --> 00:36:06,900
Allora mi permetta di introdurre
un paio di altre idee.

793
00:36:06,900 --> 00:36:09,209
Poi lasceremo la gente a risolvere i
qualche problema da soli.

794
00:36:09,209 --> 00:36:11,500
Poi ci troveremo a tornare
a questa nozione di una forma,

795
00:36:11,500 --> 00:36:14,950
e faremo in realtà re-implementare
insieme l'interfaccia front-end,

796
00:36:14,950 --> 00:36:16,450
per così dire, per Google stessa.

797
00:36:16,450 --> 00:36:19,700
Useremo Google come il back-end e lasciare
loro fare il duro lavoro, la ricerca,

798
00:36:19,700 --> 00:36:22,760
ma staremo a ricreare il front-end
di Google e il modulo di ricerca

799
00:36:22,760 --> 00:36:24,520
che essi hanno sulla propria home page.

800
00:36:24,520 --> 00:36:27,050
E così torneremo a
questi tag in un attimo.

801
00:36:27,050 --> 00:36:30,270
>> Quindi questo è stato quello che ho
proposto solo un momento fa.

802
00:36:30,270 --> 00:36:33,940
Possiamo aggiungere la stilizzazione di un
pagina interna di questo tag stile,

803
00:36:33,940 --> 00:36:36,950
e siamo in grado di stilizzare sullo sfondo
colore, l'allineamento del testo,

804
00:36:36,950 --> 00:36:39,000
che si tratti di centro o di sinistra o di destra.

805
00:36:39,000 --> 00:36:41,630
Ma molto rapidamente si farebbe
trovare o un web designer

806
00:36:41,630 --> 00:36:44,060
avrebbe trovato che questo
diventa un po 'ingombrante,

807
00:36:44,060 --> 00:36:48,330
perché si sta facendo ciò che è
chiamato il contenuto di miscelazione

808
00:36:48,330 --> 00:36:50,120
con la presentazione della stessa.

809
00:36:50,120 --> 00:36:53,756
Si sta mescolando i dati
e l'estetica della stessa.

810
00:36:53,756 --> 00:36:56,380
E in effetti, se si considera
cosa sta per accadere nel corso tempo--

811
00:36:56,380 --> 00:36:58,350
questa è una molto piccola
La pagina web, ovviamente.

812
00:36:58,350 --> 00:37:01,590
Ma se posso aggiungere contenuti di questa pagina
e aggiungo lo stile a questa pagina,

813
00:37:01,590 --> 00:37:04,650
Nella pagina diventa molto rapidamente
più a lungo e più a lungo e più a lungo.

814
00:37:04,650 --> 00:37:07,510
E immagino che voglio
avere una seconda pagina web che

815
00:37:07,510 --> 00:37:09,010
condivide alcuni di questi attributi.

816
00:37:09,010 --> 00:37:12,350
Supponiamo che la mia pagina web per il mio secondo
site-- anche, voglio il centro di tutto,

817
00:37:12,350 --> 00:37:14,960
e voglio anche tutto
con uno sfondo verde.

818
00:37:14,960 --> 00:37:17,940
Sto praticamente andando ad avere per
copiare e incollare alcune di queste linee

819
00:37:17,940 --> 00:37:20,730
in quel secondo file, che si sente bene.

820
00:37:20,730 --> 00:37:22,030
Si risolverà il problema.

821
00:37:22,030 --> 00:37:26,060
>> Ma cosa succede se voglio una terza pagina
o una pagina 30 o una pagina 40?

822
00:37:26,060 --> 00:37:28,730
Ora ho intenzione di essere la copia e
incollando un sacco di codice duplicato

823
00:37:28,730 --> 00:37:30,430
in più file.

824
00:37:30,430 --> 00:37:32,600
E così supporre che
Decido o mi è stato detto,

825
00:37:32,600 --> 00:37:34,780
Ehi, non stiamo utilizzando un
sfondo verde più.

826
00:37:34,780 --> 00:37:36,380
Stiamo per iniziare a utilizzare arancione.

827
00:37:36,380 --> 00:37:38,690
Che cosa si deve cambiare?

828
00:37:38,690 --> 00:37:42,900
Ebbene, devi cambiare quello stile
da verde a arancione in quanti posti?

829
00:37:42,900 --> 00:37:44,920
Come 30 o 40 posti.

830
00:37:44,920 --> 00:37:45,900
E 'noioso.

831
00:37:45,900 --> 00:37:47,039
E 'soggetto ad errori.

832
00:37:47,039 --> 00:37:49,580
C'è un certo numero di ragioni
dove non si vorrebbe indurre

833
00:37:49,580 --> 00:37:51,840
quel tipo di dolore per te stesso.

834
00:37:51,840 --> 00:37:54,760
E così non sarebbe bello
se potessimo prendere quello che ho appena

835
00:37:54,760 --> 00:37:58,240
mettere tra queste due gialli
tag, questi tag di stile,

836
00:37:58,240 --> 00:38:04,050
fattore fuori, e mettere tutto il mio
stilizzazione in un unico file centrale

837
00:38:04,050 --> 00:38:08,470
che tutti i 30 o 40 dei miei altri file
prendere in prestito da o in qualche modo riferimento,

838
00:38:08,470 --> 00:38:11,640
Non dissimile la messa in rete
diagrammi stavamo facendo prima?

839
00:38:11,640 --> 00:38:15,030
>> Quindi, se vado a qui, sono
andare a proporre realtà

840
00:38:15,030 --> 00:38:17,880
che si sostituisce la
tag di stile con qualcosa

841
00:38:17,880 --> 00:38:21,620
chiamato il tag link, che
è terribilmente, terribilmente nome,

842
00:38:21,620 --> 00:38:24,370
perché non si usa il
tag link per creare quello che

843
00:38:24,370 --> 00:38:26,380
noi umani conosciamo come un link in una pagina web.

844
00:38:26,380 --> 00:38:29,750
Per questo, è possibile utilizzare quale tag?

845
00:38:29,750 --> 00:38:31,464
Come si crea un collegamento a una pagina web?

846
00:38:31,464 --> 00:38:32,130
PUBBLICO: L'a.

847
00:38:32,130 --> 00:38:34,870
David J. MALAN: The a, o ancora
tag, che è andato a Disney prima.

848
00:38:34,870 --> 00:38:39,090
Il tag link qui sta dicendo
questo-- link a un file chiamato

849
00:38:39,090 --> 00:38:44,350
styles.css, il rapporto cui
sta per essere che è il mio foglio di stile.

850
00:38:44,350 --> 00:38:48,290
Quindi questo è uno dei S di a
fogli di stile CSS CSS--.

851
00:38:48,290 --> 00:38:50,490
Stile sheet-- due delle S di in CSS.

852
00:38:50,490 --> 00:38:52,550
Foglio di stile a cascata.

853
00:38:52,550 --> 00:38:58,640
Questo significa solo, hey, il browser, andare
trovare styles.css sul server locale

854
00:38:58,640 --> 00:39:01,870
e usarlo come il foglio di stile,
il che significa all'interno di quel file

855
00:39:01,870 --> 00:39:05,310
sta per essere tutte le
stilizzazioni che abbiamo appena fatto.

856
00:39:05,310 --> 00:39:07,396
E così quello che quel file
potrebbe essere simile è questo.

857
00:39:07,396 --> 00:39:10,020
E mi limiterò a fare questo un breve
esempio, perché non abbiamo bisogno di

858
00:39:10,020 --> 00:39:12,000
per ottenere troppo nelle erbacce qui.

859
00:39:12,000 --> 00:39:17,840
Ma se copio questo, quello che sto proponendo
è che un programmatore creare un nuovo file,

860
00:39:17,840 --> 00:39:24,450
incollare in quei lines--
whoops-- incollare in quelle righe,

861
00:39:24,450 --> 00:39:32,270
salvarlo come styles.css, e poi, in
l'altro file, cancellare tutto questo

862
00:39:32,270 --> 00:39:35,450
e sostituirlo invece
con questo tag link.

863
00:39:35,450 --> 00:39:43,090
In modo che se io link href = "styles.css",
il rapporto è "foglio di stile"

864
00:39:43,090 --> 00:39:44,170
tag di chiusura.

865
00:39:44,170 --> 00:39:45,250
Salvarla.

866
00:39:45,250 --> 00:39:47,000
Torna al mio helloworld.

867
00:39:47,000 --> 00:39:48,690
Ricaricare.

868
00:39:48,690 --> 00:39:51,290
>> Letteralmente non è successo nulla.

869
00:39:51,290 --> 00:39:54,710
Questa è una buona cosa, perché
significa che è in realtà tutto lavoro.

870
00:39:54,710 --> 00:39:58,860
Per dimostrare tanto, supponiamo che io faccio un
errore di battitura, e io chiamo questo "Styles.css"

871
00:39:58,860 --> 00:40:03,080
con un capitale S, che è
non corretta, e quindi ricaricare.

872
00:40:03,080 --> 00:40:05,470
Ora si può vedere semplicemente non funziona.

873
00:40:05,470 --> 00:40:06,362
Ora, perché?

874
00:40:06,362 --> 00:40:08,070
Bene, usiamo un
tecnica di prima.

875
00:40:08,070 --> 00:40:10,153
Lasciami andare avanti e, in
mio browser, in Chrome, sono

876
00:40:10,153 --> 00:40:12,900
andando ad aprire quella speciale
scheda di rete come prima,

877
00:40:12,900 --> 00:40:15,560
e mi permetta di ricaricare la pagina.

878
00:40:15,560 --> 00:40:19,341
Quello che non sei sorpreso di vedere ora?

879
00:40:19,341 --> 00:40:20,840
O forse sei sorpreso di vederlo.

880
00:40:20,840 --> 00:40:23,225
In entrambi i casi, cosa vedi adesso?

881
00:40:23,225 --> 00:40:24,100
PUBBLICO: [INAUDIBLE]

882
00:40:24,100 --> 00:40:24,770
David J. MALAN: Non è stato trovato.

883
00:40:24,770 --> 00:40:25,680
Perché non è trovato?

884
00:40:25,680 --> 00:40:28,480
Ebbene, il capitale Styles.css--
S-- non esiste.

885
00:40:28,480 --> 00:40:29,230
I misnamed esso.

886
00:40:29,230 --> 00:40:30,430
errore di battitura semplice.

887
00:40:30,430 --> 00:40:33,816
Ma sto comprensibilmente ora un
404, perché il server sta dicendo, hey,

888
00:40:33,816 --> 00:40:34,440
non è stato trovato.

889
00:40:34,440 --> 00:40:36,300
Letteralmente, non lo so
dove il file è.

890
00:40:36,300 --> 00:40:38,880
Così come risultato, il browser
vi mostra quello che può,

891
00:40:38,880 --> 00:40:42,860
il contenuto grezzo della pagina,
che era 200, il HTML,

892
00:40:42,860 --> 00:40:45,390
ma la stilizzazione non può
essere aggiunti successivamente.

893
00:40:45,390 --> 00:40:47,120
E questo è ciò che si intende con cascata.

894
00:40:47,120 --> 00:40:49,070
È possibile sorta di aggiungerlo
dopo, ed è una sorta di

895
00:40:49,070 --> 00:40:50,874
affina l'estetica della pagina web.

896
00:40:50,874 --> 00:40:53,790
E si può anche ignorare quelli
stili con ancora altri fogli di stile

897
00:40:53,790 --> 00:40:54,700
se vuoi.

898
00:40:54,700 --> 00:40:57,780
Non è trovato, tuttavia, in questo caso,
perché naturalmente, ho misnamed esso.

899
00:40:57,780 --> 00:41:00,330
Così avrei dovuto sistemare le cose prima.

900
00:41:00,330 --> 00:41:04,667
>> Quindi andiamo avanti e
proporre la seguente.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Andiamo avanti e fare questo.

903
00:41:11,140 --> 00:41:14,220
Partendo forse
il file HelloWorld,

904
00:41:14,220 --> 00:41:17,740
vorrei solo invitare una coppia
di caratterizzare suggerimenti.

905
00:41:17,740 --> 00:41:20,400
Così, Victoria, si voleva
rendere il testo più grande, giusto?

906
00:41:20,400 --> 00:41:24,555
Va bene, in modo che possiamo
non rendere il testo più grande.

907
00:41:24,555 --> 00:41:26,860
E faremo ogni pizzichiamo off
solo un problema da risolvere.

908
00:41:26,860 --> 00:41:30,867
Rendere il testo più grande.

909
00:41:30,867 --> 00:41:32,700
Non ho intenzione di preoccuparsi
scrivere questo quando abbiamo

910
00:41:32,700 --> 00:41:35,600
avere la tecnologia proiettile proprio qui.

911
00:41:35,600 --> 00:41:39,970
Così alcuni problemi.

912
00:41:39,970 --> 00:41:44,670
Quindi stiamo andando a provare
per rendere il testo più grande.

913
00:41:44,670 --> 00:41:45,170
Tutto ok.

914
00:41:45,170 --> 00:41:48,360
Che altro qualcuno dovrebbe proporre?

915
00:41:48,360 --> 00:41:50,332
Cos'altro potremmo desiderare
di fare in una pagina web?

916
00:41:50,332 --> 00:41:52,040
Veniamo con un
breve elenco di cose

917
00:41:52,040 --> 00:41:55,366
e poi delegare alla
gruppo di conoscere questo numero.

918
00:41:55,366 --> 00:41:56,270
>> PUBBLICO: [INAUDIBLE]

919
00:41:56,270 --> 00:42:02,251
>> David J. MALAN: OK, testo della posizione
su diversi lati della pagina?

920
00:42:02,251 --> 00:42:02,750
Tutto ok.

921
00:42:02,750 --> 00:42:04,620
Qualcos'altro.

922
00:42:04,620 --> 00:42:05,784
>> PUBBLICO: [INAUDIBLE]

923
00:42:05,784 --> 00:42:06,700
David J. MALAN: E '.

924
00:42:06,700 --> 00:42:08,720
Quindi un GIF è solo un
formato di file diverso.

925
00:42:08,720 --> 00:42:12,830
Abbiamo usato solo, quello che, una
png o jpg probabilmente?

926
00:42:12,830 --> 00:42:14,480
Abbiamo usato un jpg.

927
00:42:14,480 --> 00:42:16,780
Se siete curiosi, un eccessivo
risposta alla tua domanda

928
00:42:16,780 --> 00:42:19,404
è un jpg viene generalmente utilizzato per
fotografie, perché sostiene

929
00:42:19,404 --> 00:42:21,500
milioni di colori o di colori a 24 bit.

930
00:42:21,500 --> 00:42:26,930
Una gif è generalmente utilizzato per, come,
memi internet queste animazioni days--,

931
00:42:26,930 --> 00:42:28,810
gif animate come.

932
00:42:28,810 --> 00:42:32,320
Ma succede usare un colore più piccolo
tavolozza, solo 256 colori possibili,

933
00:42:32,320 --> 00:42:35,230
ma supporta
la trasparenza e l'animazione.

934
00:42:35,230 --> 00:42:40,330
E poi c'è il png, che supporta
trasparenza e più colori

935
00:42:40,330 --> 00:42:41,300
ma non l'animazione.

936
00:42:41,300 --> 00:42:42,133
Quindi è un trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Quindi, l'aggiunta di una gif, però,
sarebbe funzionalmente

939
00:42:46,060 --> 00:42:48,396
equivalente ad aggiungere un png o jpg.

940
00:42:48,396 --> 00:42:49,110
Sì.

941
00:42:49,110 --> 00:42:50,550
Immagine fonte è uguale.

942
00:42:50,550 --> 00:42:51,590
Quindi, qualcosa di diverso.

943
00:42:51,590 --> 00:42:57,288
Veniamo con qualcosa che
abbiamo inviato a Victoria da fare qui.

944
00:42:57,288 --> 00:42:59,209
>> PUBBLICO: Aggiungere i pulsanti per un modulo.

945
00:42:59,209 --> 00:43:00,000
David J. MALAN: OK.

946
00:43:00,000 --> 00:43:02,179
Così pulsanti aggiungere un modulo.

947
00:43:02,179 --> 00:43:03,470
E lo faremo uno insieme.

948
00:43:03,470 --> 00:43:07,220
In modo che sarà un perfetto segue
subito dopo questa sfida.

949
00:43:07,220 --> 00:43:10,357
Qualunque altra cosa?

950
00:43:10,357 --> 00:43:11,440
Che cosa potrebbe desideri fare?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
Il web si sente molto deludente
se questo è tutto quello che possiamo fare.

953
00:43:16,516 --> 00:43:18,140
AUDIENCE: Cambiare il colore del testo.

954
00:43:18,140 --> 00:43:19,500
David J. MALAN: Cambiare la cosa?

955
00:43:19,500 --> 00:43:20,666
PUBBLICO: Il colore del testo.

956
00:43:20,666 --> 00:43:22,311
David J. MALAN: Cambia il colore del testo.

957
00:43:22,311 --> 00:43:22,810
Tutto ok.

958
00:43:22,810 --> 00:43:23,790
Quindi, cerchiamo di fare questo.

959
00:43:23,790 --> 00:43:27,209
Proprio di nuovo in modo non che sei, semplicemente
a memoria, facendo esattamente quello che sto facendo,

960
00:43:27,209 --> 00:43:29,500
Ho intenzione di attivare la musica
per forse cinque minuti qui.

961
00:43:29,500 --> 00:43:30,450
Siete invitati a utilizzare Google.

962
00:43:30,450 --> 00:43:33,130
Sei il benvenuto a chiedere a me, e
Io sussurro un suggerimento in un orecchio.

963
00:43:33,130 --> 00:43:35,171
Sei il benvenuto a guardare
Oltre di altre spalle.

964
00:43:35,171 --> 00:43:37,340
Ma risolvere solo uno di questi problemi.

965
00:43:37,340 --> 00:43:40,190
Ma faremo l'ultimo, il
forma uno, se potessimo, insieme.

966
00:43:40,190 --> 00:43:42,790
Così cinque minuti per risolvere
uno qualsiasi di questi problemi

967
00:43:42,790 --> 00:43:46,780
utilizzando Google, l'intuizione, o qualsiasi
altri mezzi a vostra disposizione.

968
00:43:46,780 --> 00:43:48,630
>> [RIPRODUZIONE DI BRANI MUSICALI]

969
00:43:48,630 --> 00:43:49,130
Tutto ok.

970
00:43:49,130 --> 00:43:50,838
Nessun problema se si desidera
per mantenere armeggiare,

971
00:43:50,838 --> 00:43:53,880
ma io rovinare una coppia
di queste risposte.

972
00:43:53,880 --> 00:43:57,986
Quindi il primo consiglio da
Victoria era per rendere il testo più grande.

973
00:43:57,986 --> 00:43:59,360
Quindi c'è un paio di modi per farlo.

974
00:43:59,360 --> 00:44:01,530
Ho attualmente ripristinato
il mio schermo di queste dimensioni,

975
00:44:01,530 --> 00:44:04,310
se ho zoomato
artificialmente solo per vedere le cose.

976
00:44:04,310 --> 00:44:07,470
E facciamo questo.

977
00:44:07,470 --> 00:44:11,380
Lasciami andare avanti e afferrare
un po 'di testo latino generica

978
00:44:11,380 --> 00:44:19,540
solo così abbiamo qualcosa su cui lavorare.

979
00:44:19,540 --> 00:44:20,715
Quindi, dammi solo un momento.

980
00:44:20,715 --> 00:44:21,840
Farò tre paragrafi.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
OK.

983
00:44:53,930 --> 00:44:55,560
Questo sarà un esempio migliore.

984
00:44:55,560 --> 00:44:57,840
Così, per i curiosi, in
il mio hello.html, ho solo

985
00:44:57,840 --> 00:45:01,645
incollato a tre senza senso
paragrafi in latino

986
00:45:01,645 --> 00:45:03,270
solo così abbiamo un testo con cui lavorare.

987
00:45:03,270 --> 00:45:06,720
E l'obiettivo di Victoria è stato quello di
far parte del testo più grande.

988
00:45:06,720 --> 00:45:09,879
Così ho potuto, come prima, andate qui.

989
00:45:09,879 --> 00:45:11,170
E mi permetta di fare nel modo giusto.

990
00:45:11,170 --> 00:45:13,253
Ho intenzione di avere un collegamento
tag che punta a un file

991
00:45:13,253 --> 00:45:20,560
chiamato "styles.css," il rapporto
dei quali è di nuovo "foglio di stile."

992
00:45:20,560 --> 00:45:25,221
E poi ho intenzione di salvare quella
e di aprire questo "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Quindi, come prima, ho la
capacità in questo file CSS

994
00:45:28,940 --> 00:45:31,569
per ignorare realmente il default
estetica di una pagina web,

995
00:45:31,569 --> 00:45:33,860
e l'estetica predefinite,
naturalmente, sono abbastanza noiosa.

996
00:45:33,860 --> 00:45:36,943
È una specie di normale dimensione del carattere, il nero
il testo, sfondo bianco, e così via.

997
00:45:36,943 --> 00:45:39,440
Quindi supponiamo che io voglio fare
tutto questo testo più grande.

998
00:45:39,440 --> 00:45:40,460
Ho potuto fare un paio di cose.

999
00:45:40,460 --> 00:45:43,750
Nel mio file styles.css, io
potrebbe dire, si sa che cosa,

1000
00:45:43,750 --> 00:45:46,950
applicare la seguente alle
il corpo della pagina.

1001
00:45:46,950 --> 00:45:51,390
Andare avanti e fare la
dimensione del carattere 24 punti,

1002
00:45:51,390 --> 00:45:54,130
che è un numero che potrebbe
utilizzare in Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Mi permetta di tornare nel mio spazio web
pagina qui e ricaricare,

1004
00:45:57,620 --> 00:45:59,640
e si può vedere che
è già molto più grande.

1005
00:45:59,640 --> 00:46:02,223
E siamo in grado di ottenere un po 'pazzo,
proprio come abbiamo può su un desktop--

1006
00:46:02,223 --> 00:46:03,670
renderlo 96 punti.

1007
00:46:03,670 --> 00:46:04,950
Ricaricare.

1008
00:46:04,950 --> 00:46:07,610
E si sta facendo un po '
ingombrante a questo punto.

1009
00:46:07,610 --> 00:46:09,500
>> Ma potrei essere un po 'più preciso.

1010
00:46:09,500 --> 00:46:14,530
Invece di applicare questa
foglio di stile per il corpo della pagina,

1011
00:46:14,530 --> 00:46:21,740
Che altro potrei applicarlo a posto,
Quali altri tag che potrebbe ancora

1012
00:46:21,740 --> 00:46:25,445
funzionano nello stesso modo?

1013
00:46:25,445 --> 00:46:26,444
>> PUBBLICO: Il tag p?

1014
00:46:26,444 --> 00:46:27,360
David J. MALAN: tag P.

1015
00:46:27,360 --> 00:46:29,350
Quindi la testa non sarebbe
corretta, perché la testa,

1016
00:46:29,350 --> 00:46:31,300
non si può effettivamente
controllare l'estetica.

1017
00:46:31,300 --> 00:46:32,700
C'è sia il testo c'è o non c'è.

1018
00:46:32,700 --> 00:46:36,760
Ma il p tag-- che può immergersi in un po '
profondo, per così dire, al punto

1019
00:46:36,760 --> 00:46:37,350
tag.

1020
00:46:37,350 --> 00:46:41,600
E anche se ci sono tre,
questo è perfettamente bene, perché in CSS,

1021
00:46:41,600 --> 00:46:44,900
quando dico solo "p", questo
significa applicare la seguente

1022
00:46:44,900 --> 00:46:48,300
a qualsiasi tag che corrisponde a questo
selettore, il selettore basta

1023
00:46:48,300 --> 00:46:49,430
è il nome del tag.

1024
00:46:49,430 --> 00:46:52,350
Quindi, ovunque si vede un
"P", applicare la dimensione del carattere,

1025
00:46:52,350 --> 00:46:55,222
e facciamo più
ragionevole again-- 24 punti.

1026
00:46:55,222 --> 00:46:56,930
E sai una cosa,
per buona misura,

1027
00:46:56,930 --> 00:46:59,810
facciamo il colore
solo rosso per il momento.

1028
00:46:59,810 --> 00:47:03,740
E ora se ricarico, ora ci
vedere tre brutti paragrafi.

1029
00:47:03,740 --> 00:47:07,180
>> Ma ora immagino che Sono una specie
di-- Voglio che il primo paragrafo

1030
00:47:07,180 --> 00:47:08,210
saltare fuori presso l'utente.

1031
00:47:08,210 --> 00:47:11,150
Non voglio aumentare solo
la dimensione del carattere di ogni cosa.

1032
00:47:11,150 --> 00:47:16,105
E così io in realtà voglio identificare o
distinguere tra questi paragrafi.

1033
00:47:16,105 --> 00:47:18,730
Quindi cerchiamo di sbarazzarsi del rosso,
perché questo è solo tipo di cattivo gusto,

1034
00:47:18,730 --> 00:47:23,885
e andiamo avanti e fare il
dimensione del carattere di 12 punti per impostazione predefinita,

1035
00:47:23,885 --> 00:47:26,260
così che siamo tornati a qualcosa
un po 'più ragionevole.

1036
00:47:26,260 --> 00:47:29,190
E ora ho solo voglia di aumentare il
la dimensione del carattere del primo paragrafo.

1037
00:47:29,190 --> 00:47:31,440
Posso fare questo in pochi
modi, ma in un modo che è

1038
00:47:31,440 --> 00:47:37,180
forse più didattico al
momento è quello di fare quanto segue.

1039
00:47:37,180 --> 00:47:43,280
Lasciami andare avanti e dire, questo
paragrafo ha un ID univoco di "prima".

1040
00:47:43,280 --> 00:47:45,000
Potrei chiamare questo tutto quello che voglio.

1041
00:47:45,000 --> 00:47:46,874
Potrei chiamare questo "foo"
o qualsiasi altra parola,

1042
00:47:46,874 --> 00:47:49,290
ma ho intenzione di dargli un po '
Nome semanticamente significative

1043
00:47:49,290 --> 00:47:50,320
come "prima".

1044
00:47:50,320 --> 00:47:54,790
Questo è l'identificatore univoco,
l'ID, per il mio primo paragrafo.

1045
00:47:54,790 --> 00:47:59,360
>> Che cosa posso ora fare nel mio foglio di stile
è un po 'più precisa.

1046
00:47:59,360 --> 00:48:02,330
Invece di dire, si applicano
il seguente al tag p,

1047
00:48:02,330 --> 00:48:04,890
Posso dire che il following--
applica quanto segue,

1048
00:48:04,890 --> 00:48:11,000
o selezionare l'elemento HTML
che ha un ID univoco di "prima".

1049
00:48:11,000 --> 00:48:12,350
Cosa voglio di applicare ad esso?

1050
00:48:12,350 --> 00:48:15,250
Una dimensione del carattere di 24 punti.

1051
00:48:15,250 --> 00:48:16,640
Così ho due selettori ora.

1052
00:48:16,640 --> 00:48:19,690
Si fa tutto il
punti 12 punti.

1053
00:48:19,690 --> 00:48:24,960
Ma questo, soprattutto perché si tratta
secondo-- si tratta ultimo in file--

1054
00:48:24,960 --> 00:48:27,090
questo ha un effetto a cascata.

1055
00:48:27,090 --> 00:48:30,200
Ho appena fatto tutti i miei
tag di paragrafo 12 punti,

1056
00:48:30,200 --> 00:48:34,350
ma questo ora cascate e
sostituzioni per tutti gli elementi

1057
00:48:34,350 --> 00:48:38,800
nella pagina, un tag nella pagina di cui
ID univoco è tra virgolette "prima".

1058
00:48:38,800 --> 00:48:41,720
E il hashtag in questo contesto
significa semplicemente "identificatore unico".

1059
00:48:41,720 --> 00:48:43,750
Io non metto in file HTML.

1060
00:48:43,750 --> 00:48:46,880
Io, qui, solo dire
tra virgolette "prima".

1061
00:48:46,880 --> 00:48:48,470
>> Quindi, mi permetta di ricaricare.

1062
00:48:48,470 --> 00:48:49,919
E ora vedo, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Voglio dire, non è che
bella, ma è una specie

1064
00:48:51,710 --> 00:48:53,600
di come la prefazione a un
libro o qualcosa del genere,

1065
00:48:53,600 --> 00:48:55,100
dove il primo paragrafo è grande.

1066
00:48:55,100 --> 00:48:57,933
Potrebbe essere ancora più preciso con
solo le prime lettere, ma almeno

1067
00:48:57,933 --> 00:48:59,110
Ho esercitato un maggiore controllo.

1068
00:48:59,110 --> 00:49:04,760
Ora maybe-- forse io voglio fare questo
di tanto in tanto per qualsiasi motivo,

1069
00:49:04,760 --> 00:49:09,010
e quindi non voglio che questo
applicare a un solo tag HTML.

1070
00:49:09,010 --> 00:49:15,110
Piuttosto, cerchiamo di say-- facciamo
anche effettuare le seguenti operazioni.

1071
00:49:15,110 --> 00:49:18,810
Class = "importazione".

1072
00:49:18,810 --> 00:49:23,970
Considerando che un ID univoco viene utilizzato per
individuare una cosa, un tag,

1073
00:49:23,970 --> 00:49:30,190
nella vostra pagina web, una classe è destinata ad essere
utilizzato su qualsiasi numero di elementi o tag

1074
00:49:30,190 --> 00:49:30,950
sulla tua pagina web.

1075
00:49:30,950 --> 00:49:31,710
Quindi è riutilizzabile.

1076
00:49:31,710 --> 00:49:33,090
Un ID non è riutilizzabile.

1077
00:49:33,090 --> 00:49:34,450
Una classe è riutilizzabile.

1078
00:49:34,450 --> 00:49:37,830
>> E sai una cosa, per qualsiasi
reasons-- filosofica

1079
00:49:37,830 --> 00:49:40,180
Non ho finito la mia
thought-- ho intenzione di dire

1080
00:49:40,180 --> 00:49:44,300
che il primo paragrafo e la
secondo comma sono importanti.

1081
00:49:44,300 --> 00:49:48,600
Quindi ho intenzione di applicare la classe chiamata
"Importante", che, se io salvo il mio file

1082
00:49:48,600 --> 00:49:51,510
e ricaricare, non ha
impatto funzionale ancora.

1083
00:49:51,510 --> 00:49:53,780
Ma ho aggiunto un po '
metadati del file,

1084
00:49:53,780 --> 00:49:56,610
sorta di qualcosa di separato
dai dati di base del file,

1085
00:49:56,610 --> 00:50:02,300
così che ora nel mio foglio di stile, se io
invece dire ".important" - si sa,

1086
00:50:02,300 --> 00:50:07,110
tutto ciò che è importante, io sono
andando a fare font-colore, red--

1087
00:50:07,110 --> 00:50:09,930
o meglio, non font-colore, solo il colore.

1088
00:50:09,930 --> 00:50:12,930
C'è incongruenze
in CSS purtroppo.

1089
00:50:12,930 --> 00:50:14,120
E ricaricare.

1090
00:50:14,120 --> 00:50:17,640
Ora notate la prima
due paragrafi sono di colore rosso

1091
00:50:17,640 --> 00:50:20,880
ma non il terzo, perché solo
applicata la classe di "importante"

1092
00:50:20,880 --> 00:50:25,020
al primo due di queste cose.

1093
00:50:25,020 --> 00:50:28,030
>> Quindi, in ID, si avrà la possibilità
secondo molto preciso.

1094
00:50:28,030 --> 00:50:30,110
Con le classi, si dispone di riutilizzabilità.

1095
00:50:30,110 --> 00:50:33,800
In entrambi i casi, si noti il
sorta di principio di buona progettazione

1096
00:50:33,800 --> 00:50:39,072
dove ho scomposto fuori tutto il
estetica per il mio file styles.css.

1097
00:50:39,072 --> 00:50:40,280
Quindi non c'è alcuna confusione qui.

1098
00:50:40,280 --> 00:50:44,490
Non c'è alcuna menzione di rosso o
grassetto esposta o la dimensione del carattere in questo file.

1099
00:50:44,490 --> 00:50:49,430
Piuttosto ho semanticamente,
significato caratterizzato i miei dati,

1100
00:50:49,430 --> 00:50:51,240
ecco alcuni dati importanti.

1101
00:50:51,240 --> 00:50:52,800
Ecco alcuni dati più importanti.

1102
00:50:52,800 --> 00:50:56,500
Inoltre, ecco il
"Prima" dei miei dati importanti.

1103
00:50:56,500 --> 00:51:01,050
Così HTML è tutto di sorta
del tagging, letteralmente, le parole

1104
00:51:01,050 --> 00:51:05,270
e paragrafi e costrutti nella vostra
Pagina con questi piccoli suggerimenti, se si

1105
00:51:05,270 --> 00:51:07,640
volontà, che si può
in qualche modo sfruttare utilizzando

1106
00:51:07,640 --> 00:51:10,880
altre tecniche come CSS in questo modo.

1107
00:51:10,880 --> 00:51:14,760
>> Quindi, in risposta alla domanda di Victoria,
siamo in grado di rendere il testo più grande in questo modo.

1108
00:51:14,760 --> 00:51:18,380
Ci sono tanti altri modi, ma
il tipo di carattere tag-- parentesi aperta "carattere" -

1109
00:51:18,380 --> 00:51:19,770
è in realtà diversi anni.

1110
00:51:19,770 --> 00:51:21,410
E questo è il problema,
Anche con contando solo

1111
00:51:21,410 --> 00:51:23,485
su resources-- on-line
essi tendono ad essere superata.

1112
00:51:23,485 --> 00:51:26,110
E in effetti, che è stato sconsigliato,
perché il mondo si rese conto,

1113
00:51:26,110 --> 00:51:28,970
cosa significa "font-size = 7" significa?

1114
00:51:28,970 --> 00:51:29,670
Non è così.

1115
00:51:29,670 --> 00:51:32,770
E così per molti anni e
questo giorno-- uno dei lati

1116
00:51:32,770 --> 00:51:36,060
osserva qui è che è effettivamente
incredibilmente dolorosa ancora a volte

1117
00:51:36,060 --> 00:51:38,900
per sviluppare siti per la
web, perché Microsoft

1118
00:51:38,900 --> 00:51:44,220
e Google e Mozilla e
gli altri sono spesso in disaccordo su come

1119
00:51:44,220 --> 00:51:47,480
di interpretare una specifica come HTML.

1120
00:51:47,480 --> 00:51:52,490
>> C'è un libro di regole per HTML che
generalmente dice che cosa significa ogni tag.

1121
00:51:52,490 --> 00:51:55,690
Ma a volte è lasciato al
discrezione di implementazione,

1122
00:51:55,690 --> 00:51:57,290
discrezione di Microsoft e Google.

1123
00:51:57,290 --> 00:52:00,000
E così sarete molto spesso
vedere su un sito web qualcosa

1124
00:52:00,000 --> 00:52:04,954
un aspetto diverso su un PC
di quanto non faccia su un Mac,

1125
00:52:04,954 --> 00:52:06,995
e questo è proprio perché,
alla fine del giorno,

1126
00:52:06,995 --> 00:52:08,891
essi non testarlo
bene su entrambe le piattaforme.

1127
00:52:08,891 --> 00:52:11,390
Ma è anche perché ragionevole,
le persone intelligenti non saranno d'accordo

1128
00:52:11,390 --> 00:52:14,970
e le aziende non saranno d'accordo, e così
una delle sfide di programmazione

1129
00:52:14,970 --> 00:52:16,980
per il web o la progettazione
cose per il web

1130
00:52:16,980 --> 00:52:21,700
sta scrivendo il tuo sito web in un modo
che funziona su tutti i browser web.

1131
00:52:21,700 --> 00:52:23,410
Ma anche questo è irragionevole, giusto?

1132
00:52:23,410 --> 00:52:27,807
Ci sono così tante versioni di tanti
i browser là fuori che, ad un certo punto,

1133
00:52:27,807 --> 00:52:30,890
si hanno anche per effettuare una chiamata in giudizio
e si deve decidere come azienda,

1134
00:52:30,890 --> 00:52:33,082
in particolare per il commercio elettronico in stile
siti dove sei

1135
00:52:33,082 --> 00:52:36,290
cercando di utilizzare la versione più recente
tecnologie per dare un ottimo utente

1136
00:52:36,290 --> 00:52:37,110
Esperienza.

1137
00:52:37,110 --> 00:52:41,019
Ma una certa percentuale di utenti potrebbero
essere ancora utilizzando Internet Explorer 6 o 7

1138
00:52:41,019 --> 00:52:43,810
o 8, in particolare a seconda del
paese che stanno venendo da.

1139
00:52:43,810 --> 00:52:46,760
>> E così molto comunemente
consultati è qualcosa

1140
00:52:46,760 --> 00:52:50,920
come "le statistiche del browser web."

1141
00:52:50,920 --> 00:52:56,560
E se andiamo a-- vediamo Wikipedia
e vedere come up-to-date questo grafico è

1142
00:52:56,560 --> 00:52:59,320
se ce n'è uno.

1143
00:52:59,320 --> 00:53:02,420
Così qui si può vedere
dove i browser in realtà

1144
00:53:02,420 --> 00:53:06,160
sono, secondo dicembre 2015,
secondo il governo degli Stati Uniti.

1145
00:53:06,160 --> 00:53:11,170
Chrome è a quota di mercato del 42%, seguita
da IE in gran parte in ambienti aziendali

1146
00:53:11,170 --> 00:53:14,490
o impostazioni del PC, ovviamente,
seguito da Firefox,

1147
00:53:14,490 --> 00:53:17,440
poi Safari, quindi Opera non ha fatto
rendere la mappa qui per qualche motivo,

1148
00:53:17,440 --> 00:53:18,210
e poi gli altri.

1149
00:53:18,210 --> 00:53:19,500
Forse è sotto gli altri.

1150
00:53:19,500 --> 00:53:27,700
Ma più problematico di quello è--
Vediamo se Wikipedia ha anche

1151
00:53:27,700 --> 00:53:35,194
versioni dei browser version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Andiamo alle statistiche del browser.

1154
00:53:39,190 --> 00:53:40,680
IE.

1155
00:53:40,680 --> 00:53:42,030
Anche questo non è sufficiente.

1156
00:53:42,030 --> 00:53:44,854
Statistiche browser.

1157
00:53:44,854 --> 00:53:45,353
La mia versione.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Che non sta andando essere di destra.

1160
00:53:50,540 --> 00:53:53,414
Vediamo le versioni.

1161
00:53:53,414 --> 00:53:54,830
quota di mercato del browser.

1162
00:53:54,830 --> 00:53:57,110
Vediamo se questo viene in su.

1163
00:53:57,110 --> 00:53:57,610
OK.

1164
00:53:57,610 --> 00:54:00,010
Ora, questo sta diventando
un po 'più utile.

1165
00:54:00,010 --> 00:54:04,870
Così qui, si noti che abbiamo tutti
diverse versioni di browser.

1166
00:54:04,870 --> 00:54:09,887
E, mio ​​Dio, se si look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Voglio dire, i browser sempre più aggiornato,
e talvolta alcuni di questi cambiamenti

1168
00:54:12,970 --> 00:54:16,430
sono significativi in
termini di funzionalità.

1169
00:54:16,430 --> 00:54:20,630
Così ad un certo punto, la
product manager o gli ingegneri

1170
00:54:20,630 --> 00:54:23,620
bisogno di fare un decision-- voi
sapere che cosa, solo l'1% del mondo

1171
00:54:23,620 --> 00:54:24,740
sta ancora utilizzando IE 7.

1172
00:54:24,740 --> 00:54:25,490
Al diavolo con loro.

1173
00:54:25,490 --> 00:54:27,470
Non stiamo solo andando a
sostenere questo browser.

1174
00:54:27,470 --> 00:54:28,740
E cosa significa non sostenere?

1175
00:54:28,740 --> 00:54:31,170
Potrebbe significare che i pulsanti
non funzionano sulla tua pagina web,

1176
00:54:31,170 --> 00:54:33,050
o potrebbe significare la
formattazione è completamente spento.

1177
00:54:33,050 --> 00:54:35,091
Oppure si potrebbe dover fare
quella stessa chiamata in giudizio

1178
00:54:35,091 --> 00:54:39,089
nei telefoni in questi giorni, in cui, stiamo
non andare a sostenere IOS 5 più.

1179
00:54:39,089 --> 00:54:40,380
Quindi, le persone hanno solo per l'aggiornamento.

1180
00:54:40,380 --> 00:54:45,850
O non stiamo andando a sostenere Cupcake
su sistema operativo Android per i dispositivi Android,

1181
00:54:45,850 --> 00:54:48,629
perché come il world-- come il
mondo tecnologico vuole andare avanti,

1182
00:54:48,629 --> 00:54:51,170
che tipo di vuole trascinare la
mondo con esso in modo che essi non

1183
00:54:51,170 --> 00:54:53,295
continuare ad essere
compatibile in modo da

1184
00:54:53,295 --> 00:54:54,920
in grado di offrire nuove e buone caratteristiche.

1185
00:54:54,920 --> 00:54:57,878
Questo è infatti uno dei motivi
perché così molte aziende stanno rotolando fuori

1186
00:54:57,878 --> 00:55:01,440
aggiornamenti automatici e sorta di forzatura
le ultime versioni del software su di noi.

1187
00:55:01,440 --> 00:55:04,010
E anche le aziende
come Apple ordinerà di

1188
00:55:04,010 --> 00:55:07,280
costringerà quasi o costringere
voi in termini di forze di mercato

1189
00:55:07,280 --> 00:55:11,164
di acquistare un nuovo telefono cellulare, perché solo
non aggiornerà più il vecchio telefono.

1190
00:55:11,164 --> 00:55:13,330
Così si perde sul
più recenti e più grandi caratteristiche,

1191
00:55:13,330 --> 00:55:17,520
perché è costoso per loro come un
società di mantenere più vecchio, forse

1192
00:55:17,520 --> 00:55:19,330
versioni inferiori del software.

1193
00:55:19,330 --> 00:55:23,660
Ma l'effetto netto è che
abbiamo anche soffrire questo.

1194
00:55:23,660 --> 00:55:26,550
>> Quindi, diamo uno sguardo a solo
un paio di cose finale qui.

1195
00:55:26,550 --> 00:55:29,740
Facciamo staccare veloce reale alcune delle
quegli altri proiettili, se curioso.

1196
00:55:29,740 --> 00:55:33,440
Quindi, se si stava tentando di,
per esempio, la posizione

1197
00:55:33,440 --> 00:55:36,420
il testo su lati diversi della
pagina, ho intenzione di fare in un modo rapido,

1198
00:55:36,420 --> 00:55:38,360
ma c'è diverso
modi di fare questo.

1199
00:55:38,360 --> 00:55:42,610
Lasciami andare avanti e eliminate--
semplificare questo come segue.

1200
00:55:42,610 --> 00:55:45,330
Lasciatemi tornare al mio
semplici, paragrafi semplici.

1201
00:55:45,330 --> 00:55:47,760
Lasciatemi tornare al mio styles.css.

1202
00:55:47,760 --> 00:55:51,040
E sto solo andando a utilizzare il simple--
che si potrebbe avere visto su Google

1203
00:55:51,040 --> 00:55:54,430
o richiamare da earlier--
text-align destra.

1204
00:55:54,430 --> 00:55:56,220
E ricarica questa pagina.

1205
00:55:56,220 --> 00:55:58,470
Ora tutto sembra
di essere allineato a destra,

1206
00:55:58,470 --> 00:56:00,770
come si può vedere sulla testa qui.

1207
00:56:00,770 --> 00:56:04,470
>> Siamo in grado di farlo sembrare un po 'più
a libro, e possiamo dire "giustificare"

1208
00:56:04,470 --> 00:56:05,640
e ricaricare.

1209
00:56:05,640 --> 00:56:09,870
Ora è bello e la piazza su entrambi
lati, che è una specie di piacevole.

1210
00:56:09,870 --> 00:56:12,220
Un altro obiettivo che abbiamo avuto qui
era il cambiamento di colore del testo.

1211
00:56:12,220 --> 00:56:13,650
Così abbiamo visto che con il mio testo rosso.

1212
00:56:13,650 --> 00:56:15,630
E ora aggiungere i pulsanti per un modulo.

1213
00:56:15,630 --> 00:56:19,390
Allora perché non proviamo a fare esattamente questo?

1214
00:56:19,390 --> 00:56:23,656
Ma prima lasciatemi andare a un sito che
la maggior parte di noi utilizza ogni giorno-- Google.

1215
00:56:23,656 --> 00:56:25,780
E diamo uno sguardo a
come Google funziona realmente.

1216
00:56:25,780 --> 00:56:26,821
Ma ho intenzione di farlo.

1217
00:56:26,821 --> 00:56:31,930
Prima di tutto lasciatemi farlo dentro-- sì,
lasciami andare a Google prima.

1218
00:56:31,930 --> 00:56:34,530
Ho intenzione di andare
in Impostazioni di Google,

1219
00:56:34,530 --> 00:56:40,660
perché voglio disabilitare
una cosa chiamata risultati immediati.

1220
00:56:40,660 --> 00:56:43,580
>> Così si potrebbe aver notato in
Google questi days-- Torniamo

1221
00:56:43,580 --> 00:56:44,850
e attivare questa opzione.

1222
00:56:44,850 --> 00:56:47,900
Quindi, se mi metto a cercare
per i "gatti" come questo,

1223
00:56:47,900 --> 00:56:50,120
notare che non solo
Ottengo auto-completamento up

1224
00:56:50,120 --> 00:56:54,520
top, tutto ad un tratto, la pagina stessa
sembra cambiare abbastanza rapidamente, così,

1225
00:56:54,520 --> 00:56:58,750
e questo è Google utilizzando un linguaggio
chiamato JavaScript cercando di essere utile.

1226
00:56:58,750 --> 00:57:01,540
Ma, purtroppo, esso genere
di scombina nostra discussione

1227
00:57:01,540 --> 00:57:04,010
di ciò che sta realmente accadendo
sotto il cofano qui.

1228
00:57:04,010 --> 00:57:09,070
Quindi io sono solo un po 'in fretta
spegnere risultati immediati.

1229
00:57:09,070 --> 00:57:11,510
E ho intenzione di fare clic su Salva.

1230
00:57:11,510 --> 00:57:13,930
E ora vado ad aprire
quella barra degli strumenti di diagnostica che ho

1231
00:57:13,930 --> 00:57:16,150
mantenere l'apertura sotto la scheda di rete.

1232
00:57:16,150 --> 00:57:17,720
Quindi cerchiamo di fare questo.

1233
00:57:17,720 --> 00:57:21,960
Let me-- whoops--
scorrere questo un po '.

1234
00:57:21,960 --> 00:57:24,410
E mi permetta di ricerca di "gatti".

1235
00:57:24,410 --> 00:57:26,790
>> E ora notice-- in realtà,
questa è una buona opportunità

1236
00:57:26,790 --> 00:57:28,840
a discutere per un momento.

1237
00:57:28,840 --> 00:57:32,460
Si noti il ​​momento in cui ho type-- fermarlo.

1238
00:57:32,460 --> 00:57:35,250
Smettila.

1239
00:57:35,250 --> 00:57:35,790
OK.

1240
00:57:35,790 --> 00:57:40,870
Si noti il ​​momento in cui si digita la lettera
C, guardare la parte inferiore dello schermo.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Che cosa significa il fondo
di questo schermo, la mia scheda di rete,

1242
00:57:48,600 --> 00:57:53,320
suggerire che sta accadendo ogni
volta che si digita una lettera?

1243
00:57:53,320 --> 00:57:57,700
Purtroppo, la rana è molto
oggi distrazione o il trifoglio

1244
00:57:57,700 --> 00:58:00,339
o quello che è.

1245
00:58:00,339 --> 00:58:01,880
Quello che stava accadendo ogni volta che ho digitato?

1246
00:58:01,880 --> 00:58:04,230
E mi permetta di cancellare il
tampone e digitare di nuovo.

1247
00:58:04,230 --> 00:58:06,580
whoops So--.

1248
00:58:06,580 --> 00:58:13,280
Ogni volta che si digita una lettera, C- A- T--
così una nuova riga mantiene ovviamente apparire.

1249
00:58:13,280 --> 00:58:16,530
Che cosa significa ciascuna di queste righe rappresentano,
sulla base di ciò che abbiamo visto e discusso

1250
00:58:16,530 --> 00:58:17,339
finora?

1251
00:58:17,339 --> 00:58:18,130
PUBBLICO: una ricerca?

1252
00:58:18,130 --> 00:58:21,770
David J. MALAN: Una ricerca, o
più genericamente, una richiesta HTTP

1253
00:58:21,770 --> 00:58:23,125
dal mio browser al server.

1254
00:58:23,125 --> 00:58:29,090
Bene, perché è il mio browser facendo un HTTP
richiedere ogni volta che si digita una lettera?

1255
00:58:29,090 --> 00:58:30,502
>> PUBBLICO: [INAUDIBLE]

1256
00:58:30,502 --> 00:58:33,210
David J. MALAN: Sì, è dando
me questi risultati completamento automatico.

1257
00:58:33,210 --> 00:58:35,190
Come, dove fare queste
risultati della ricerca vengono?

1258
00:58:35,190 --> 00:58:38,120
Bene, ogni volta che si digita una
lettera, Google invia più

1259
00:58:38,120 --> 00:58:40,460
e sempre più di
la parola che sto scrivendo.

1260
00:58:40,460 --> 00:58:41,040
Perché?

1261
00:58:41,040 --> 00:58:44,540
Perché vogliono darmi un
meglio, meglio suggerimento,

1262
00:58:44,540 --> 00:58:48,880
un elenco di suggerimenti, per quale parola
Sto cercando di realmente completa.

1263
00:58:48,880 --> 00:58:53,030
Quindi questo è per dire letteralmente ogni
carattere digitato in Google

1264
00:58:53,030 --> 00:58:56,900
viene inviato, in ultima analisi, in
alla rinfusa, ma anche a volte uno

1265
00:58:56,900 --> 00:59:00,620
in un momento per attuare
queste funzionalità di completamento automatico quando

1266
00:59:00,620 --> 00:59:03,000
dati è, ovviamente, sul web.

1267
00:59:03,000 --> 00:59:08,780
>> Ora, diamo uno sguardo a ciò che è effettivamente
succede quando si fa clic su Google Search.

1268
00:59:08,780 --> 00:59:10,420
E poi ci sfruttare questo noi stessi.

1269
00:59:10,420 --> 00:59:15,320
Quindi, se ho scorrere verso il basso ora al molto
prima richiesta che è appena accaduto.

1270
00:59:15,320 --> 00:59:17,130
Si noti quanto segue.

1271
00:59:17,130 --> 00:59:25,550
E 'stato inviato a un tempo abbastanza lungo URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
e poi un sacco di roba.

1273
00:59:27,100 --> 00:59:29,620
Vediamo questo in realtà ora
nella scheda del browser stesso.

1274
00:59:29,620 --> 00:59:31,310
Liberiamoci della barra degli strumenti qui.

1275
00:59:31,310 --> 00:59:33,140
Ecco la pagina dei risultati di ricerca.

1276
00:59:33,140 --> 00:59:34,790
E notate ecco l'URL.

1277
00:59:34,790 --> 00:59:37,430
Ora, si può intuire
quello che sta succedendo qui in parte.

1278
00:59:37,430 --> 00:59:39,090
Quindi, prima di tutto, una definizione.

1279
00:59:39,090 --> 00:59:42,570
Questo a quanto pare è la destinazione
in cui il modulo viene inviato.

1280
00:59:42,570 --> 00:59:44,910
Così, quando ho digitato nel
parole "gatti" e premere invio,

1281
00:59:44,910 --> 00:59:48,460
a quanto pare Google ha inviato
il mio input di testo a questo URL

1282
00:59:48,460 --> 00:59:50,770
che ho evidenziato
lì, tagliare ricerca.

1283
00:59:50,770 --> 00:59:56,530
Si scopre che, in un URL, tutto ciò che
succede dopo un punto di domanda è,

1284
00:59:56,530 --> 01:00:01,270
come noi continuiamo a dire, una coppia chiave-valore
che è stato digitato nella forma o in qualche modo

1285
01:00:01,270 --> 01:00:04,500
trasmessa dalla
browser al server.

1286
01:00:04,500 --> 01:00:07,180
>> Così ogni volta che si digita ingresso
in una forma sul web

1287
01:00:07,180 --> 01:00:10,000
ed è inviato come abbiamo
discusso, tramite un GET,

1288
01:00:10,000 --> 01:00:12,400
uno di questi virtuali
buste, i contenuti

1289
01:00:12,400 --> 01:00:15,510
di che envelope-- sì, tenere
ottenendo farcito fisicamente

1290
01:00:15,510 --> 01:00:19,010
nella busta in classe
oggi, ma tecnologicamente

1291
01:00:19,010 --> 01:00:21,110
in realtà è messo in URL.

1292
01:00:21,110 --> 01:00:22,940
Quindi, in realtà, mi permetta di vagliare attraverso questo.

1293
01:00:22,940 --> 01:00:25,010
Dove si vede l'input dell'utente?

1294
01:00:25,010 --> 01:00:27,490
Dove si vede qualcosa
che io stesso digitato qui?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Sì, così "gatti".

1297
01:00:33,491 --> 01:00:33,990
Destra?

1298
01:00:33,990 --> 01:00:36,380
Quindi, mi permetta di distillare questo
in qualcosa di più semplice.

1299
01:00:36,380 --> 01:00:39,917
Ho intenzione di eliminare tutto ciò che riguarda
questo URL che non capisco,

1300
01:00:39,917 --> 01:00:42,250
e sto solo andando a lasciare
come questo-- / search? q = gatti.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Vedremo dove q
proviene da in un momento,

1303
01:00:47,890 --> 01:00:51,220
ma che si sente come il minimo
quantità di informazioni che ho fornito.

1304
01:00:51,220 --> 01:00:53,050
E ora ho intenzione di premere Invio.

1305
01:00:53,050 --> 01:00:55,520
E notate funziona ancora.

1306
01:00:55,520 --> 01:00:57,950
Abbiamo comunque tornare indietro un sacco di gatti.

1307
01:00:57,950 --> 01:01:00,340
Quindi Google è più elaborato
rispetto a questo in questi giorni.

1308
01:01:00,340 --> 01:01:01,934
E 'il 2016, non 1999.

1309
01:01:01,934 --> 01:01:04,600
Quindi non c'è altra roba che il mio
browser invia al server.

1310
01:01:04,600 --> 01:01:07,100
Ma questo è minimamente
tutto ciò che è necessario.

1311
01:01:07,100 --> 01:01:08,380
>> Allora, cosa sta succedendo?

1312
01:01:08,380 --> 01:01:14,320
Beh, in primo luogo mi permetta di andare avanti e andare
torna a Cloud9 e lasciami andare avanti

1313
01:01:14,320 --> 01:01:15,620
e chiudere le mie schede in precedenza.

1314
01:01:15,620 --> 01:01:18,230
E io farò questo sul mio
possedere solo per un momento.

1315
01:01:18,230 --> 01:01:20,730
Ho intenzione di andare avanti
e creare un nuovo file.

1316
01:01:20,730 --> 01:01:23,739
E ho intenzione di salvarlo come google.html.

1317
01:01:23,739 --> 01:01:26,280
E ho intenzione di molto quickly--
Ho intenzione di rubare, in realtà,

1318
01:01:26,280 --> 01:01:28,510
alcuni di questo testo solo per risparmiare tempo.

1319
01:01:28,510 --> 01:01:30,610
Io vado a incollare questo qui.

1320
01:01:30,610 --> 01:01:33,850
Io non ho intenzione di perdere tempo con
qualsiasi stilizzazione questa volta.

1321
01:01:33,850 --> 01:01:38,340
Stiamo andando a chiamare questo "My Google."

1322
01:01:38,340 --> 01:01:41,230
E ho intenzione di sbarazzarsi
del tutto nel corpo.

1323
01:01:41,230 --> 01:01:42,740
E ho intenzione di fare quanto segue.

1324
01:01:42,740 --> 01:01:45,690
Mi permetta di zoom avanti.

1325
01:01:45,690 --> 01:01:50,620
Forma Action-- e come ho brevemente accennato
earlier-- whoops-- come ho brevemente

1326
01:01:50,620 --> 01:01:54,130
accennato in precedenza, l'azione di un
modulo è dove vengono inviati i dati.

1327
01:01:54,130 --> 01:01:56,620
Così google.com/search.

1328
01:01:56,620 --> 01:01:59,390
E il metodo che si desidera utilizzare
può essere una delle due cose.

1329
01:01:59,390 --> 01:02:02,870
Può essere sia "get", come continuiamo a
discutendo, oppure può essere "post".

1330
01:02:02,870 --> 01:02:05,340
Per ora, il fondamentale
differenza è, se si usa "get"

1331
01:02:05,340 --> 01:02:09,590
tutte le informazioni che il
utente fornisce viene inviato nella URL.

1332
01:02:09,590 --> 01:02:13,530
>> Che è grande per le cose come la ricerca
motori e poche altre applicazioni,

1333
01:02:13,530 --> 01:02:17,080
ma in quali circostanze sarebbe
Non si vuole compilare un modulo

1334
01:02:17,080 --> 01:02:21,620
e avere le informazioni finire il
URL, come nella barra degli indirizzi del browser?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Che tipo di forme fare you--

1337
01:02:26,605 --> 01:02:27,480
PUBBLICO: [INAUDIBLE]

1338
01:02:27,480 --> 01:02:28,450
David J. MALAN: Sì, come cosa?

1339
01:02:28,450 --> 01:02:29,270
PUBBLICO: Le password.

1340
01:02:29,270 --> 01:02:31,936
David J. MALAN: Sì, così si accede
a facebook o qualche sito web.

1341
01:02:31,936 --> 01:02:34,395
Questo è l'input dell'utente da
una forma, una casella di testo,

1342
01:02:34,395 --> 01:02:37,020
ma probabilmente non vuole
mostrando in URL del browser.

1343
01:02:37,020 --> 01:02:38,121
Perché?

1344
01:02:38,121 --> 01:02:40,870
Voglio dire, forse ci sono alcuni
implicazioni per la sicurezza sulla rete,

1345
01:02:40,870 --> 01:02:44,830
ma more-- come, più semplicemente, che cosa se
il tuo compagno di stanza, il vostro altro significativo,

1346
01:02:44,830 --> 01:02:47,710
i vostri figli, il coniuge sembra
attraverso la cronologia del browser?

1347
01:02:47,710 --> 01:02:50,762
Vi è il vostro diritto della password
lì nella storia del browser.

1348
01:02:50,762 --> 01:02:52,220
Che non si sente come un buon design.

1349
01:02:52,220 --> 01:02:54,500
O anche più tecnicamente,
supponiamo che si sta cercando

1350
01:02:54,500 --> 01:02:59,180
caricare una foto su Flickr
o Facebook o wherever--

1351
01:02:59,180 --> 01:03:03,010
cioè l'input dell'utente, anche se
è un po 'più interesting-- come

1352
01:03:03,010 --> 01:03:05,530
faccio a stipare un'immagine nella barra degli indirizzi?

1353
01:03:05,530 --> 01:03:06,730
È sorta di sorta di no.

1354
01:03:06,730 --> 01:03:07,396
Si tipo di possibile.

1355
01:03:07,396 --> 01:03:10,210
Ma, in realtà, io sono hard-premuto
a immaginare di fare questo.

1356
01:03:10,210 --> 01:03:13,470
Quindi ho bisogno di un altro metodo per
caricamento di foto a un sito web,

1357
01:03:13,470 --> 01:03:15,657
e tale altro metodo è chiamato "post".

1358
01:03:15,657 --> 01:03:18,740
Ma per ora, ci limiteremo a parlare di
"Get", che è il più semplice dei due.

1359
01:03:18,740 --> 01:03:21,100
E 'appena mette tutto il
input dell'utente nell'URL.

1360
01:03:21,100 --> 01:03:22,830
>> Quindi, ecco la forma sto creando.

1361
01:03:22,830 --> 01:03:24,070
Voglio un ingresso.

1362
01:03:24,070 --> 01:03:24,820
E sai una cosa?

1363
01:03:24,820 --> 01:03:26,111
Vado a prendere una supposizione qui.

1364
01:03:26,111 --> 01:03:31,600
Ho intenzione di ricordare il mio
ingresso "q" per "interrogazione".

1365
01:03:31,600 --> 01:03:34,970
E credo che questo è uno dei più
disegni originali, forse, a partire dal 1999.

1366
01:03:34,970 --> 01:03:39,560
E quindi il tipo di questo ingresso
è solo andare a essere "testo".

1367
01:03:39,560 --> 01:03:43,040
E poi ho intenzione di avere un altro ingresso
che non ha bisogno di un nome, come vedremo a breve

1368
01:03:43,040 --> 01:03:45,120
vedere, il tipo dei quali è "Invia".

1369
01:03:45,120 --> 01:03:47,070
E questo sta per
dammi un apposito pulsante.

1370
01:03:47,070 --> 01:03:48,320
E questo è tutto.

1371
01:03:48,320 --> 01:03:50,790
>> Quindi, mi permetta di andare avanti e salvare il file.

1372
01:03:50,790 --> 01:03:54,910
Ho intenzione di tornare al mio
browser e andare a google.html.

1373
01:03:54,910 --> 01:03:56,140
Invio.

1374
01:03:56,140 --> 01:03:59,680
Ed è una specie di rada
per non dire altro.

1375
01:03:59,680 --> 01:04:03,110
Ma mi permetta di andare avanti
e cercare "gatti".

1376
01:04:03,110 --> 01:04:06,510
E noto che sono attualmente
a questo URL Cloud9.

1377
01:04:06,510 --> 01:04:09,240
Ma il momento in cui fare clic su questo,
dove speri finirò?

1378
01:04:09,240 --> 01:04:10,160
>> PUBBLICO: Google.

1379
01:04:10,160 --> 01:04:11,118
>> David J. MALAN: Google.

1380
01:04:11,118 --> 01:04:12,740
Quindi cerchiamo di fare clic su Invia.

1381
01:04:12,740 --> 01:04:15,200
E infatti ho ri-implementato Google.

1382
01:04:15,200 --> 01:04:15,700
Destra?

1383
01:04:15,700 --> 01:04:16,480
E 'più semplice.

1384
01:04:16,480 --> 01:04:17,120
E 'più leggero.

1385
01:04:17,120 --> 01:04:20,350
Voglio dire, il mio codice è chiaramente migliore rispetto
loro, dal caos che abbiamo visto prima.

1386
01:04:20,350 --> 01:04:21,100
E sai una cosa?

1387
01:04:21,100 --> 01:04:22,610
Ho intenzione di rendere questo un po '.

1388
01:04:22,610 --> 01:04:23,860
Non ho menzionato questo in precedenza.

1389
01:04:23,860 --> 01:04:27,860
Ci sono tag come H1, per la rubrica 1,
la voce più importante in una pagina.

1390
01:04:27,860 --> 01:04:30,570
"Il mio Google," Ti chiamo questo.

1391
01:04:30,570 --> 01:04:31,940
Mi permetta di ricaricare.

1392
01:04:31,940 --> 01:04:33,772
Si sta cercando un po 'meglio già.

1393
01:04:33,772 --> 01:04:34,980
E, in realtà, sai una cosa?

1394
01:04:34,980 --> 01:04:36,430
Ho already-- ho mentito.

1395
01:04:36,430 --> 01:04:40,200
Ho detto che non avevo intenzione di stile questo,
ma ho intenzione di stile questo come prima.

1396
01:04:40,200 --> 01:04:46,860
E il mio corpo sta per essere,
diciamo, centro text-align.

1397
01:04:46,860 --> 01:04:48,800
E 'guardando più come Google già.

1398
01:04:48,800 --> 01:04:51,090
>> Ho bisogno di una interruzione di linea, però,
per quel pulsante Invia.

1399
01:04:51,090 --> 01:04:52,798
E si scopre, si
può usare i paragrafi,

1400
01:04:52,798 --> 01:04:57,320
oppure si può più letteralmente solo dire,
dammi una linea di interruzione qui-- il tag br.

1401
01:04:57,320 --> 01:04:59,319
E se ricarico questo, ora si va lì.

1402
01:04:59,319 --> 01:05:01,610
E 'un po' brutto, così ho
potrebbe fare di più interruzioni di linea,

1403
01:05:01,610 --> 01:05:03,310
ma cerchiamo di non arrivare troppo avidi qui.

1404
01:05:03,310 --> 01:05:06,430
Così ora vediamo se funziona per "cani".

1405
01:05:06,430 --> 01:05:08,640
Sembra funzionare per "cani", come pure.

1406
01:05:08,640 --> 01:05:10,780
Allora qual è il takeaway convincente qui?

1407
01:05:10,780 --> 01:05:13,600
Tra-- non è stato un salto enorme per
introdurre un paio di tag,

1408
01:05:13,600 --> 01:05:15,370
come il tag form nel tag di ingresso.

1409
01:05:15,370 --> 01:05:17,120
Ma più fondamentalmente
è, tutto quello che stiamo facendo

1410
01:05:17,120 --> 01:05:20,610
sta sfruttando la nostra comprensione
di HTTP e il fatto

1411
01:05:20,610 --> 01:05:24,900
che le forme in ultima analisi, alterano
cosa c'è nella URL del browser,

1412
01:05:24,900 --> 01:05:28,540
e così, di conseguenza, possiamo
fornire meccanicamente input per un server

1413
01:05:28,540 --> 01:05:33,600
elaborando un form HTML e conoscere
che il server comprende HTTP,

1414
01:05:33,600 --> 01:05:36,890
proprio come il nostro corpo capisce, come,
stringendomi la mano, lo stesso protocollo,

1415
01:05:36,890 --> 01:05:40,920
e così torniamo alla risposta
che in ultima analisi, aspettiamo.

1416
01:05:40,920 --> 01:05:44,050
>> Quindi cerchiamo di fare una
ultima cosa che ora con il mobile,

1417
01:05:44,050 --> 01:05:47,052
e io make-- io aggiungo
questo codice per diapositive.

1418
01:05:47,052 --> 01:05:49,760
Quindi, se si desidera sperimentare, è
può certamente prendere da lì.

1419
01:05:49,760 --> 01:05:51,551
Ma ho intenzione di andare
avanti e fare una cosa.

1420
01:05:51,551 --> 01:05:54,120
Ho intenzione di andare avanti e
aprire il mio indice page--

1421
01:05:54,120 --> 01:05:59,030
la mia pagina ciao come prima, che
ha un sacco di questo testo finto-latino,

1422
01:05:59,030 --> 01:06:05,470
o senza senso testo latino, e has--
sembra che questo in questo dimensione del carattere.

1423
01:06:05,470 --> 01:06:07,850
Ma mi permetta di andare avanti e fare questo.

1424
01:06:07,850 --> 01:06:09,300
Ho intenzione di andare in Cloud9.

1425
01:06:09,300 --> 01:06:10,380
E non c'è bisogno di fare questo passo.

1426
01:06:10,380 --> 01:06:11,420
Mi limiterò a farlo io.

1427
01:06:11,420 --> 01:06:12,890
Ho intenzione di fare clic su Condividi.

1428
01:06:12,890 --> 01:06:15,170
E questa è una caratteristica
solo di Cloud9, per cui

1429
01:06:15,170 --> 01:06:17,710
Posso fare il mio ambiente pubblico.

1430
01:06:17,710 --> 01:06:20,240
>> E solo per il gusto di
dimostrazione, mi permetta di fare questo.

1431
01:06:20,240 --> 01:06:22,870
Io vado a fare la mia domanda pubblica.

1432
01:06:22,870 --> 01:06:25,230
Si noti mi sta avvertimento, sono
Sono sicuro che voglio fare questo,

1433
01:06:25,230 --> 01:06:28,438
perché questo sta andando a rendere tutti
nel mondo, sia che si trovino qui ora

1434
01:06:28,438 --> 01:06:33,560
o guardare il video in seguito alla
Internet in grado di vedere ciò che vedo.

1435
01:06:33,560 --> 01:06:34,440
Ma va bene.

1436
01:06:34,440 --> 01:06:37,870
Sto per dire "Done".

1437
01:06:37,870 --> 01:06:42,080
E lasciate che vi incoraggio, se l'ho fatto
questo correctly-- mi permetta di provarlo prima.

1438
01:06:42,080 --> 01:06:45,590
Vai avanti, se non mind--
in un browser del computer,

1439
01:06:45,590 --> 01:06:49,900
andare a questo URL, e si spera
vedrete il mio testo latino.

1440
01:06:49,900 --> 01:06:52,820
E per essere chiari, è
non è in esecuzione sul mio portatile.

1441
01:06:52,820 --> 01:06:53,610
E 'in the cloud.

1442
01:06:53,610 --> 01:06:58,120
E 'su Cloud9, letteralmente, ma
Ho fatto il mio lavoro pubblico

1443
01:06:58,120 --> 01:07:03,450
così che chiunque su Internet
può accedere alla mia home page Latina.

1444
01:07:03,450 --> 01:07:07,209
>> Vai allo stesso URL su
il telefono, se fosse possibile.

1445
01:07:07,209 --> 01:07:09,750
Se ti costerà, però,
può solo guardare sopra una spalla.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
PUBBLICO: [INAUDIBLE]

1448
01:07:42,467 --> 01:07:43,550
David J. MALAN: mi dispiace?

1449
01:07:43,550 --> 01:07:45,390
PUBBLICO: [INAUDIBLE]

1450
01:07:45,390 --> 01:07:47,710
David J. MALAN: Solo parole latine.

1451
01:07:47,710 --> 01:07:48,210
È tutto.

1452
01:07:48,210 --> 01:07:49,250
Ma questo è ciò che si dovrebbe vedere.

1453
01:07:49,250 --> 01:07:49,875
>> PUBBLICO: Sì.

1454
01:07:49,875 --> 01:07:50,790
David J. MALAN: Sì.

1455
01:07:50,790 --> 01:07:51,300
Sì.

1456
01:07:51,300 --> 01:07:51,540
OK.

1457
01:07:51,540 --> 01:07:53,530
Così posso tenere il vostro
telefono solo per un momento?

1458
01:07:53,530 --> 01:07:57,504
Così, si spera, se si sta accedendo
esso, dovrebbe essere quasi illeggibile.

1459
01:07:57,504 --> 01:07:59,920
E 'still-- Voglio dire, e'
illeggibile a causa del latino.

1460
01:07:59,920 --> 01:08:01,920
Ma è anche illeggibile
per quale altro motivo?

1461
01:08:01,920 --> 01:08:03,775
Come, quello che dispiace di questo?

1462
01:08:03,775 --> 01:08:04,650
PUBBLICO: E 'piccola.

1463
01:08:04,650 --> 01:08:06,420
David J. MALAN: E 'super, super piccolo.

1464
01:08:06,420 --> 01:08:07,920
Quindi, come possiamo risolvere questo problema?

1465
01:08:07,920 --> 01:08:09,730
E 'super, super piccoli
sul telefono di Victoria

1466
01:08:09,730 --> 01:08:11,400
e, se hai tirato
su voi stessi, probabilmente

1467
01:08:11,400 --> 01:08:14,660
piccolo sul telefono, così, a meno che non
hanno impostazioni di accessibilità abilitate.

1468
01:08:14,660 --> 01:08:15,530
Cos'è quello?

1469
01:08:15,530 --> 01:08:18,497
Si potrebbe semplicemente stringere e
zoom, che è praticabile,

1470
01:08:18,497 --> 01:08:20,330
ma poi si vede solo
poche parole alla volta.

1471
01:08:20,330 --> 01:08:20,859
Quindi, aspetta un minuto.

1472
01:08:20,859 --> 01:08:21,720
Io so come risolvere questo problema.

1473
01:08:21,720 --> 01:08:22,219
Destra?

1474
01:08:22,219 --> 01:08:26,130
Potrei usare i CSS, e ho potuto cambiare il
dimensione del carattere da 12 punti a 24 punti.

1475
01:08:26,130 --> 01:08:29,020
Ma l'effetto collaterale di questo,
ovviamente, sta per essere ora,

1476
01:08:29,020 --> 01:08:32,630
su un desktop o un laptop,
Ora il testo è due volte più grande.

1477
01:08:32,630 --> 01:08:35,810
E così sarebbe sorta di bello
per distinguere tra i dispositivi,

1478
01:08:35,810 --> 01:08:37,840
e si scopre là
sono modi di farlo.

1479
01:08:37,840 --> 01:08:39,590
Ce ne sono diversi
modi diversi, infatti,

1480
01:08:39,590 --> 01:08:44,189
per cui usando CSS e caratteristiche amatore
che non andremo in in grande dettaglio,

1481
01:08:44,189 --> 01:08:46,960
si può sostanzialmente interrogare
il browser e dire,

1482
01:08:46,960 --> 01:08:51,550
se lo schermo è più piccolo di questo
numero di pixel, usano questa dimensione del carattere.

1483
01:08:51,550 --> 01:08:55,180
Se lo schermo è più grande di questo
numero di pixel, utilizzano quest'altra dimensione del carattere.

1484
01:08:55,180 --> 01:08:57,080
>> Si può essere ancora più elaborato ancora.

1485
01:08:57,080 --> 01:09:00,140
Se avete mai visitato un
pagina web che, su un desktop,

1486
01:09:00,140 --> 01:09:04,404
ha un menu grande forse fuori al
lato, e quindi tutto il contenuto

1487
01:09:04,404 --> 01:09:07,029
è al lato di tale menu--
che è una specie di paradigma comune.

1488
01:09:07,029 --> 01:09:09,670
Menu a sinistra, contenuti
sulla destra, o viceversa.

1489
01:09:09,670 --> 01:09:13,569
in realtà non funziona sul cellulare quando il
schermo è solo questo molti pixel di larghezza.

1490
01:09:13,569 --> 01:09:16,233
Quindi più comune sul cellulare è,
il vostro menu improvvisamente ottenere

1491
01:09:16,233 --> 01:09:18,399
crollato, e si deve
fare clic su un pulsante per vederlo,

1492
01:09:18,399 --> 01:09:22,404
o il sito web metterà il menu
sopra di esso e mettere il contenuto sotto di esso.

1493
01:09:22,404 --> 01:09:24,779
E si può implementare questi
cose in molteplici modi.

1494
01:09:24,779 --> 01:09:28,340
Si può chiedere ai tuoi programmatori,
Hey, squadra, in qualsiasi momento

1495
01:09:28,340 --> 01:09:34,450
si vede una richiesta HTTP da un Android
dispositivo, un dispositivo di Microsoft, Google

1496
01:09:34,450 --> 01:09:39,930
dispositivo, un dispositivo Apple, utilizzare questo
dimensione del carattere e utilizzare questo layout del menu,

1497
01:09:39,930 --> 01:09:42,670
oppure utilizzare il layout di default questa grande.

1498
01:09:42,670 --> 01:09:45,410
>> Ora, utilizzando ciò che
tecnica fondamentale oggi

1499
01:09:45,410 --> 01:09:48,529
potrebbero usare gli ingegneri
per sapere se si tratta di

1500
01:09:48,529 --> 01:09:53,660
un iPhone, un telefono Android, un computer portatile,
un desktop visita del server della società?

1501
01:09:53,660 --> 01:09:55,310
In cui ottengono queste informazioni?

1502
01:09:55,310 --> 01:09:56,080
>> PUBBLICO: Intestazione?

1503
01:09:56,080 --> 01:09:57,740
>> David J. MALAN: Sì, l'header HTTP.

1504
01:09:57,740 --> 01:10:01,714
Così ogni richiesta HTTP proveniente da
i loro clienti ai loro server

1505
01:10:01,714 --> 01:10:03,880
includere, all'interno di quella virtuale
busta, un intero gruppo

1506
01:10:03,880 --> 01:10:08,260
di intestazioni HTTP, uno dei quali è
il browser e il sistema operativo

1507
01:10:08,260 --> 01:10:10,290
anche, se si cura di
che livello di dettaglio.

1508
01:10:10,290 --> 01:10:13,790
Ora, si tratta di una stringa criptica di bell'aspetto, ma
esiste un software che appena sarà

1509
01:10:13,790 --> 01:10:18,530
semplificare questo, e si può solo chiedere
nella programmazione code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- ciò telefono è questo--
quale dispositivo è questo utente utilizzando?

1511
01:10:23,650 --> 01:10:27,501
E allora si può dire, mostrare loro questo
versione del sito web se si tratta di un telefono cellulare.

1512
01:10:27,501 --> 01:10:30,250
Mostrate loro questa versione del
sito web, se si tratta di un computer portatile o desktop.

1513
01:10:30,250 --> 01:10:32,316
Ma non è nemmeno necessario
complessità lato server.

1514
01:10:32,316 --> 01:10:33,940
Si può fare anche la più semplice delle cose.

1515
01:10:33,940 --> 01:10:34,815
>> Ho intenzione di fare questo.

1516
01:10:34,815 --> 01:10:38,995
Ho intenzione di andare avanti in
il mio ambiente Cloud9,

1517
01:10:38,995 --> 01:10:41,370
e ho intenzione di aggiungere un tag
che si è visto in Google prima.

1518
01:10:41,370 --> 01:10:42,770
Si chiama il metatag.

1519
01:10:42,770 --> 01:10:45,520
E non ho mai ricordo di questo, quindi
Ho intenzione di trascrivere qui.

1520
01:10:45,520 --> 01:10:50,552
meta name = "viewport" e poi
content = "width = larghezza del dispositivo, intital

1521
01:10:50,552 --> 01:11:02,060
scala = 1 "e il gioco è fatto.

1522
01:11:02,060 --> 01:11:06,230
>> Quindi potrebbe anche essere
come una formula magica.

1523
01:11:06,230 --> 01:11:11,300
E non è tutto chiaro, ma questo ha
qualcosa a che fare con la finestra,

1524
01:11:11,300 --> 01:11:15,070
e la finestra è solo il corpo di un
pagina web, l'area rettangolare che

1525
01:11:15,070 --> 01:11:16,690
definisce maggior parte della pagina.

1526
01:11:16,690 --> 01:11:19,060
E questo è solo dicendo
il browser, sai una cosa?

1527
01:11:19,060 --> 01:11:22,589
Rendere la larghezza di questa pagina
effettivamente uguale alla larghezza del dispositivo.

1528
01:11:22,589 --> 01:11:25,380
In altre parole, non assumere che
si ha una sorta di spazio illimitato.

1529
01:11:25,380 --> 01:11:29,920
Si supponga di avere solo la quantità di
spazio come il dispositivo stesso è grande.

1530
01:11:29,920 --> 01:11:34,454
E così ora, se ricaricare questa
nel mio browser, non vedo nessun cambiamento.

1531
01:11:34,454 --> 01:11:37,370
Ma se ho fatto questo correctly-- e
mi permetta di attraversare la mia fingers-- se tutti

1532
01:11:37,370 --> 01:11:42,920
ricaricare i telefoni, si fa
vedere un cambiamento interessante?

1533
01:11:42,920 --> 01:11:43,620
Sì, è che--

1534
01:11:43,620 --> 01:11:45,067
>> PUBBLICO: [INAUDIBLE]

1535
01:11:45,067 --> 01:11:45,900
David J. MALAN: Sì.

1536
01:11:45,900 --> 01:11:46,400
OK.

1537
01:11:46,400 --> 01:11:47,850
Quindi forse più leggibile ora?

1538
01:11:47,850 --> 01:11:53,070
Ancora piccolo, ad essere onesti, ma non
così piccola da essere ingestibile.

1539
01:11:53,070 --> 01:11:56,920
E potrei certamente ignorare questa
ulteriormente con CSS o sul lato server,

1540
01:11:56,920 --> 01:12:00,120
ma sempre più quello che sei
vedendo è sempre più funzioni

1541
01:12:00,120 --> 01:12:02,900
essendo aggiunto
environments-- lato client

1542
01:12:02,900 --> 01:12:06,530
JavaScript, come vedremo
domani, CSS, e così HTML--

1543
01:12:06,530 --> 01:12:09,190
che tutte queste query
può essere fatto sul client

1544
01:12:09,190 --> 01:12:11,910
in modo da fastidio la
server di molto meno e non

1545
01:12:11,910 --> 01:12:14,530
di dover tenere il passo con, per
esempio, l'attacco costante

1546
01:12:14,530 --> 01:12:17,210
di un nuovo sistema operativo
versioni, le nuove versioni del browser.

1547
01:12:17,210 --> 01:12:20,190
Si può solo lasciare che il browser
chiedere al dispositivo, quanto grande sei,

1548
01:12:20,190 --> 01:12:22,890
e poi fare un po 'logico
decisioni basate su questo.

1549
01:12:22,890 --> 01:12:25,140
Ma vedremo più opportunità
per le decisioni logiche

1550
01:12:25,140 --> 01:12:27,223
domani nel contesto
di un linguaggio di programmazione.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Quindi, tutte le domande, poi,
sullo sviluppo web?

1553
01:12:32,760 --> 01:12:36,130
Oggi non è programmazione web, per
SE, poiché la maggior parte tutto quello che abbiamo fatto

1554
01:12:36,130 --> 01:12:38,370
era molto estetico, se si vuole.

1555
01:12:38,370 --> 01:12:41,750
Non vi è alcun processo decisionale in
il codice che abbiamo scritto,

1556
01:12:41,750 --> 01:12:44,990
e così è per questo che HTML è un markup
linguaggio, non un linguaggio di programmazione.

1557
01:12:44,990 --> 01:12:47,140
Ma domani prenderemo
un rapido sguardo, in ultima analisi,

1558
01:12:47,140 --> 01:12:49,340
in JavaScript, che è
una programmazione vera

1559
01:12:49,340 --> 01:12:54,220
lingua che ci permette di fare un po 'di più.

1560
01:12:54,220 --> 01:12:56,800
>> Qualsiasi domanda?

1561
01:12:56,800 --> 01:13:00,480
Beh, mi permetta di proporre due
opportunità opzionali per fare i compiti.

1562
01:13:00,480 --> 01:13:02,900
Una è-- questi Cloud9
conti non scadono.

1563
01:13:02,900 --> 01:13:04,669
Siete invitati ad utilizzare
loro di armeggiare con.

1564
01:13:04,669 --> 01:13:05,960
E 'il livello gratuito del servizio.

1565
01:13:05,960 --> 01:13:08,754
Rendetevi conto che, se al momento della creazione
l'area di lavoro, è reso pubblico,

1566
01:13:08,754 --> 01:13:11,670
che vuol dire che chiunque su
Internet può vedere ciò che si sta digitando.

1567
01:13:11,670 --> 01:13:15,104
Quindi, forse solo prendere in considerazione
Non imbarazzante se stessi

1568
01:13:15,104 --> 01:13:18,020
se avete deciso di mettere la prima web
Pagina là fuori accidentalmente pubblicamente,

1569
01:13:18,020 --> 01:13:20,134
ma nessuno sta andando a
sapere di guardare comunque.

1570
01:13:20,134 --> 01:13:23,760
>> E two-- lasciato Passami
questa URL, nonche,

1571
01:13:23,760 --> 01:13:28,250
soprattutto se siete venuti a oggi
poco meno confortevole rispetto ad altri,

1572
01:13:28,250 --> 01:13:30,430
sicuri del significato di tutta questa roba.

1573
01:13:30,430 --> 01:13:36,780
Rendetevi conto che molto di più di questo video,
che è sia un buon modo per addormentarsi

1574
01:13:36,780 --> 01:13:39,380
e anche a ridere, mentre
Così facendo, ha anche

1575
01:13:39,380 --> 01:13:44,300
un sacco di interessanti societally
e discussioni relative alla sicurezza

1576
01:13:44,300 --> 01:13:47,370
in esso da John Oliver,
anche se un comico.

1577
01:13:47,370 --> 01:13:55,456
>> Ma se non ci sono altre domande,
questo ci porta alla reception.

1578
01:13:55,456 --> 01:13:56,830
Allora, perché non posso attivare la musica.

1579
01:13:56,830 --> 01:13:58,610
Non ci dovrebbero essere le bevande
e spuntini fuori.

1580
01:13:58,610 --> 01:14:00,220
Sono felice di mescolarsi per quanto
Finché la gente vorrebbe,

1581
01:14:00,220 --> 01:14:01,600
rispondere alle domande più one-to-one.

1582
01:14:01,600 --> 01:14:03,330
Ma, in caso contrario, sei il benvenuto
a decollare in qualsiasi momento,

1583
01:14:03,330 --> 01:14:05,740
e vedremo di nuovo
domani mattina per un po 'di più.

1584
01:14:05,740 --> 01:14:07,290
Va bene grazie.

1585
01:14:07,290 --> 01:14:10,428