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

2
00:00:00,127 --> 00:00:01,210
DAVID J. Malan: Baiklah.

3
00:00:01,210 --> 00:00:02,160
Kami kembali.

4
00:00:02,160 --> 00:00:05,810
Jadi, tujuan dari sesi akhir ini
adalah untuk memperkenalkan beberapa konsep yang lebih

5
00:00:05,810 --> 00:00:09,290
tetapi juga memberikan setiap orang kesempatan
untuk jenis meregangkan jari-jari Anda

6
00:00:09,290 --> 00:00:11,270
dan benar-benar melakukan sesuatu
hands-on kecil.

7
00:00:11,270 --> 00:00:13,897
Tujuannya bukan untuk mengubah
kita semua menjadi pengembang web

8
00:00:13,897 --> 00:00:16,230
dengan cara apapun tapi benar-benar hanya
untuk memberikan rasa dari beberapa

9
00:00:16,230 --> 00:00:21,750
dari konstruksi dasar apa
masuk ke pemrograman web dan hari ini web

10
00:00:21,750 --> 00:00:23,980
pembangunan, sehingga
sisi statis things--

11
00:00:23,980 --> 00:00:26,660
ada logika, ada pemrograman
bahasa, hanya konten statis.

12
00:00:26,660 --> 00:00:29,660
Dan itu akan memberi kita kesempatan
untuk benar-benar melihat apa web server,

13
00:00:29,660 --> 00:00:34,140
lihat apa file HTML adalah, melihat apa
itu adalah HTTP sebenarnya melayani sampai.

14
00:00:34,140 --> 00:00:38,600
Tapi sebelum kita menyelam di, retrospektif setiap
pertanyaan tentang komputasi awan

15
00:00:38,600 --> 00:00:43,922
atau keamanan atau apa pun di antara?

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

17
00:00:44,890 --> 00:00:47,181
Baiklah, baik, mari kita
melakukan ini, hanya dalam kasus

18
00:00:47,181 --> 00:00:49,680
proses mendaftar untuk
sesuatu yang membutuhkan waktu beberapa menit.

19
00:00:49,680 --> 00:00:51,221
Kami akan membiarkannya melakukan itu di latar belakang.

20
00:00:51,221 --> 00:00:56,860
Silakan, jika Anda bisa,
untuk c9.io. URL ini di sini-

21
00:00:56,860 --> 00:01:02,810
Ini adalah pihak ketiga service--
platform sebagai layanan, jika Anda will--

22
00:01:02,810 --> 00:01:05,190
yang akan mengundang Anda
untuk mendaftar untuk sebuah account,

23
00:01:05,190 --> 00:01:08,650
dan itu akan memberi Anda masing-masing
account di yang disebut cloud

24
00:01:08,650 --> 00:01:11,330
pada infrastruktur orang lain,
sebuah perusahaan bernama Cloud9.

25
00:01:11,330 --> 00:01:13,350
Tapi apa yang baik tentang
ini adalah bahwa mereka memberi Anda

26
00:01:13,350 --> 00:01:15,990
perkiraan dari
pengembangan dunia nyata yang sebenarnya

27
00:01:15,990 --> 00:01:18,530
lingkungan, meskipun dalam
awan dan di web browser,

28
00:01:18,530 --> 00:01:21,175
dan kami akan menggunakan ini untuk benar-benar
bereksperimen sedikit hari ini.

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

30
00:01:27,116 --> 00:01:30,260
Dan kemudian pergi ke depan dan hanya menavigasi
jalan ke proses sign-up

31
00:01:30,260 --> 00:01:32,630
jika Anda bisa.

32
00:01:32,630 --> 00:01:36,080
Jadi kita kebetulan menggunakan ini di kelas
Saya mengajar untuk semua siswa kami,

33
00:01:36,080 --> 00:01:39,140
baik di kampus dan pergi sekarang, dan
itu diganti apa historis

34
00:01:39,140 --> 00:01:41,390
adalah software jika download.

35
00:01:41,390 --> 00:01:44,620
Jadi apa yang Anda mendapatkan akses ke
adalah salah satu mesin virtual,

36
00:01:44,620 --> 00:01:46,460
dasarnya, yang saya jelaskan sebelumnya.

37
00:01:46,460 --> 00:01:50,260
Jadi perusahaan ini Cloud9 mungkin
sewa dari party-- ketiga memang

38
00:01:50,260 --> 00:01:52,760
dalam hal ini, Google-- keseluruhan
sekelompok mesin virtual

39
00:01:52,760 --> 00:01:56,500
bahwa mereka entah bagaimana memotong menjadi
ilusi setiap server

40
00:01:56,500 --> 00:01:58,610
bahwa masing-masing dari kita memiliki kontrol penuh atas.

41
00:01:58,610 --> 00:02:01,640
Ini tidak cukup akurat untuk mengatakan
bahwa mereka mesin virtual,

42
00:02:01,640 --> 00:02:04,550
meskipun, karena apa
Cloud9 benar-benar menggunakan

43
00:02:04,550 --> 00:02:07,570
adalah teknologi yang agak baru
disebut containerization.

44
00:02:07,570 --> 00:02:13,150
Dan biarkan aku ambil gambar ini
di sini untuk melukis gambar ini.

45
00:02:13,150 --> 00:02:16,540
>> Sebuah wadah, jika
Anda ingat gambar

46
00:02:16,540 --> 00:02:19,900
dari sebelumnya, sedikit lebih ringan
Berat dari mesin virtual.

47
00:02:19,900 --> 00:02:22,090
Bahkan, sedangkan lalu
kali kami berbicara tentang ada

48
00:02:22,090 --> 00:02:25,170
menjadi operasi
sistem dan hypervisor

49
00:02:25,170 --> 00:02:28,260
dan kemudian sistem operasi tamu, tamu
sistem operasi, operasi tamu

50
00:02:28,260 --> 00:02:30,940
sistem, di atas Anda
hardware fisik,

51
00:02:30,940 --> 00:02:33,740
perbedaan dengan ini baru
teknologi, pengepakan,

52
00:02:33,740 --> 00:02:37,290
adalah bahwa mereka semua entah bagaimana berbagi
sistem operasi yang sama.

53
00:02:37,290 --> 00:02:39,970
Tapi mereka masih membuat
ilusi orang

54
00:02:39,970 --> 00:02:44,590
memiliki nya sendiri eksklusif
hak administratif dan file

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

56
00:02:45,400 --> 00:02:48,230
Tapi ada software kurang
antara Anda dan perangkat keras.

57
00:02:48,230 --> 00:02:52,260
Hasil yang, di
teori, kinerja yang lebih tinggi,

58
00:02:52,260 --> 00:02:55,470
karena Anda menggunakan atau
membuang-buang sumber daya yang lebih sedikit

59
00:02:55,470 --> 00:02:57,360
pada yang disebut lapisan virtualisasi.

60
00:02:57,360 --> 00:02:59,420
Jadi ini disebut
containerization oleh alam

61
00:02:59,420 --> 00:03:02,920
dengan cara teknologi yang disebut Docker,
yang sangat banyak datang ke dalam sendiri.

62
00:03:02,920 --> 00:03:05,086
Dan ini adalah sesuatu yang
insinyur di perusahaan Anda

63
00:03:05,086 --> 00:03:08,610
mungkin jenis jenis mulai berbicara
tentang segera jika mereka belum melakukannya,

64
00:03:08,610 --> 00:03:11,590
meskipun ada tentu ada
Alasan untuk melompat pada setiap bandwagons.

65
00:03:11,590 --> 00:03:15,410
>> Jadi dengan mengatakan bahwa, apa yang
Anda mungkin melihat sekarang

66
00:03:15,410 --> 00:03:22,670
adalah layar yang terlihat sedikit seperti ini.

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

68
00:03:23,170 --> 00:03:25,260
Dan panggil aku lebih jika tidak.

69
00:03:25,260 --> 00:03:27,440
Dan jika so-- Aku akan datang jika tidak.

70
00:03:27,440 --> 00:03:30,244
Cobalah dan klik yang besar
ditambah untuk membuat ruang kerja,

71
00:03:30,244 --> 00:03:31,660
dan Anda akan melihat layar seperti ini.

72
00:03:31,660 --> 00:03:35,020
Anda dapat memanggil ruang kerja
nama apa pun yang Anda inginkan untuk saat ini.

73
00:03:35,020 --> 00:03:38,660
Dan hanya benar-benar untuk kesederhanaan,
pergi dan- baik, beberapa dari Anda

74
00:03:38,660 --> 00:03:39,660
sudah memiliki ruang kerja.

75
00:03:39,660 --> 00:03:47,050
Sebut saja apa pun yang Anda want-- bisnis,
Harvard, Kamis, apa pun yang Anda inginkan.

76
00:03:47,050 --> 00:03:48,800
Anda tidak perlu deskripsi.

77
00:03:48,800 --> 00:03:52,380
Anda dapat meninggalkan itu pribadi, kecuali jika Anda
sudah memiliki banyak ruang kerja.

78
00:03:52,380 --> 00:03:55,280
Jika Anda terpaksa membuat publik,
yang baik untuk tujuan hari ini.

79
00:03:55,280 --> 00:03:56,750
Di sini, juga, adalah salah satu upsells.

80
00:03:56,750 --> 00:03:59,939
Anda mendapatkan satu ruang kerja pribadi oleh
default. Tetapi jika Anda ingin lebih,

81
00:03:59,939 --> 00:04:00,980
Anda harus membayar lebih.

82
00:04:00,980 --> 00:04:02,870
Jika tidak, mereka memaksa Anda
untuk membuat publik pekerjaan Anda.

83
00:04:02,870 --> 00:04:05,600
Tapi itu baik-baik saja, karena mereka juga
menargetkan ini di komunitas open-source

84
00:04:05,600 --> 00:04:07,700
untuk mendorong orang untuk
sebenarnya berkolaborasi.

85
00:04:07,700 --> 00:04:10,699
>> Dan hal terakhir yang penting,
meskipun, adalah, setelah Anda memilih nama

86
00:04:10,699 --> 00:04:17,140
dan setelah Anda memilih swasta atau publik,
klik HTML5, ikon oranye besar

87
00:04:17,140 --> 00:04:22,430
kedua dari kiri, dan
kemudian klik Buat Workspace.

88
00:04:22,430 --> 00:04:24,580
Dan itu mungkin akan
mengambil satu menit atau lebih,

89
00:04:24,580 --> 00:04:26,540
tetapi Anda kemudian akan memiliki
lingkungan, setelah Anda

90
00:04:26,540 --> 00:04:30,544
melakukan itu, yang terlihat mengingatkan
apa yang saya miliki di layar di sini sekarang.

91
00:04:30,544 --> 00:04:33,210
Tapi, sekali lagi, itu mungkin mengambil satu menit
atau lebih untuk sampai ke layar ini

92
00:04:33,210 --> 00:04:34,770
setelah Anda mengklik Buat Workspace.

93
00:04:34,770 --> 00:04:37,936
Tapi hanya bendera saya lebih jika Anda ingin me
untuk melihat pada sesuatu atau saran.

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

95
00:04:40,191 --> 00:04:40,690
Baiklah.

96
00:04:40,690 --> 00:04:42,390
Jadi aku akan latar belakang ini untuk saat ini.

97
00:04:42,390 --> 00:04:44,260
Menelepon saya lebih jika Anda tampaknya
memiliki kesulitan teknis.

98
00:04:44,260 --> 00:04:46,210
Tapi, sekali lagi, itu mungkin mengambil
sedikit untuk itu untuk membuka.

99
00:04:46,210 --> 00:04:49,570
Dan mari kita pergi ke depan dan berbicara tentang apa
itu benar-benar berarti untuk membuat halaman web,

100
00:04:49,570 --> 00:04:52,780
apa HTML, dan bagaimana semua ini
sekarang interkoneksi seperti yang kita mulai

101
00:04:52,780 --> 00:04:54,730
untuk benar-benar menggunakan beberapa teknologi.

102
00:04:54,730 --> 00:04:58,310
Jadi ternyata yang saya dapat
pergi pada Mac sedikit saya di sini,

103
00:04:58,310 --> 00:05:01,650
membuka program sederhana yang disebut
TextEdit, atau pada Windows aku bisa

104
00:05:01,650 --> 00:05:04,480
terbuka sesuatu yang disebut Notepad.exe.

105
00:05:04,480 --> 00:05:08,260
Dan aku bisa hanya cukup melakukan sesuatu
seperti ini-- "halo, dunia."

106
00:05:08,260 --> 00:05:12,020
Dan kemudian saya bisa menyelamatkan ini sebagai
hello.txt Jadi tidak ada sihir di sana.

107
00:05:12,020 --> 00:05:15,200
Ini tidak ada hubungannya dengan web
pemrograman, tidak ada hubungannya dengan HTML.

108
00:05:15,200 --> 00:05:16,790
Hanya menciptakan file teks sederhana.

109
00:05:16,790 --> 00:05:20,600
Tapi ternyata web
Halaman secara harfiah hanya itu.

110
00:05:20,600 --> 00:05:24,020
Ini adalah teks file teks yang berisi sederhana
Anda mungkin mengetik di keyboard,

111
00:05:24,020 --> 00:05:30,070
tetapi biasanya tetapi tidak selalu
berakhir di tidak Txt tapi Html atau .htm.

112
00:05:30,070 --> 00:05:32,050
Dan Anda tidak hanya
mengetik kata-kata dalam file.

113
00:05:32,050 --> 00:05:35,280
Anda benar-benar harus menggunakan hal-hal yang disebut
tag atau, lebih umum, sesuatu yang

114
00:05:35,280 --> 00:05:37,190
disebut bahasa markup.

115
00:05:37,190 --> 00:05:40,510
>> Jadi aku akan sangat cepat mengetik
dan kemudian menjelaskan berikut.

116
00:05:40,510 --> 00:05:42,290
Aku akan pertama
ketik ini, yang mengatakan,

117
00:05:42,290 --> 00:05:45,730
hey, browser, di sini datang
Halaman web yang ditulis dalam HTML.

118
00:05:45,730 --> 00:05:51,850
Dan dua hal ini bersama-sama mengatakan, hey,
Browser, berikut ini memang HTML.

119
00:05:51,850 --> 00:05:55,790
Hei, browser, di sini datang
kepala atau bagian atas halaman saya.

120
00:05:55,790 --> 00:05:59,900
Hei, browser, dalam puncak
halaman saya, menempatkan judul yang, "halo,

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

122
00:06:01,610 --> 00:06:08,370
Hei, browser, setelah kepala saya
Halaman, inilah tubuh halaman saya.

123
00:06:08,370 --> 00:06:12,170
Dan, hey, browser, tubuh saya
Halaman juga harus mengatakan, "Halo dunia."

124
00:06:12,170 --> 00:06:15,500
Jadi apa adalah rincian menonjol di sini?

125
00:06:15,500 --> 00:06:17,960
Ini adalah apa yang umumnya
disebut doc-deklarasi tipe,

126
00:06:17,960 --> 00:06:20,190
dan, terus terang, itu sedikit
sulit untuk menghafal ini pada awalnya.

127
00:06:20,190 --> 00:06:21,481
Anda hanya jenis copy-paste.

128
00:06:21,481 --> 00:06:23,760
Ini adalah cara yang formal
mengatakan, hei, browser,

129
00:06:23,760 --> 00:06:28,030
Saya menggunakan HTML versi 5 yang
keluar agak baru-baru.

130
00:06:28,030 --> 00:06:31,380
Ini adalah mantra ajaib bahwa beberapa
manusia dengan rasa miskin desain

131
00:06:31,380 --> 00:06:33,640
memutuskan untuk menempatkan di
paling atas dari file.

132
00:06:33,640 --> 00:06:35,473
Meskipun itu adalah
sedikit misterius, itu saja

133
00:06:35,473 --> 00:06:38,250
itu means-- hey, browser, di sini
dilengkapi dengan versi 5 dari HTML.

134
00:06:38,250 --> 00:06:41,741
>> Sisa ini telah bersama kami
untuk beberapa waktu sekarang, secara historis,

135
00:06:41,741 --> 00:06:44,740
tapi sudah berkembang, dan itu
mungkin telah mendapatkan sedikit lebih sederhana.

136
00:06:44,740 --> 00:06:47,320
Perhatikan beberapa karakteristik
dari apa yang saya disorot.

137
00:06:47,320 --> 00:06:49,890
Ada hal-hal ini dengan siku
brackets-- braket kiri

138
00:06:49,890 --> 00:06:51,040
dan braket yang tepat.

139
00:06:51,040 --> 00:06:52,490
Dan melihat simetri sini.

140
00:06:52,490 --> 00:06:57,340
Dan dengan simetri, maksud saya, sama seperti aku
memiliki start tag ini di sini atau tag terbuka

141
00:06:57,340 --> 00:07:01,560
jika Anda mau, di sini saya memiliki
tag dekat atau tag akhir yang

142
00:07:01,560 --> 00:07:06,460
yang berbeda hanya sejauh itu ini
slash di awal kata

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

144
00:07:07,360 --> 00:07:09,360
Dan Anda bisa memikirkan
ini karena aku santai

145
00:07:09,360 --> 00:07:12,280
mengusulkan sebelumnya, hey,
Browser, di sini datang beberapa HTML.

146
00:07:12,280 --> 00:07:16,060
Dan, sebaliknya, hey, browser, itu
itu untuk HTML-- awal dan akhir.

147
00:07:16,060 --> 00:07:18,440
>> Sementara itu hey, browser, di sini
datang kepala halaman saya.

148
00:07:18,440 --> 00:07:20,140
Hei, browser, itu saja untuk kepala.

149
00:07:20,140 --> 00:07:22,240
Hei, browser, di sini adalah
tubuh halaman saya.

150
00:07:22,240 --> 00:07:24,020
Hei, browser, itu saja bagi tubuh.

151
00:07:24,020 --> 00:07:26,940
Dan dalam yang beberapa
teks yang sewenang-wenang untuk saat ini.

152
00:07:26,940 --> 00:07:30,520
Dan di dalam kepala, sementara itu,
beberapa sewenang-wenang tetapi ditandai,

153
00:07:30,520 --> 00:07:34,410
sehingga untuk berbicara, teks yang mengatakan, judul
halaman saya harus "halo, dunia."

154
00:07:34,410 --> 00:07:37,470
Sekarang, untuk saat ini, Anda bisa
berasumsi browser yang

155
00:07:37,470 --> 00:07:41,762
memiliki only-- atau, lebih tepatnya, halaman web memiliki
hanya dua bagian- kepala dan tubuh.

156
00:07:41,762 --> 00:07:44,220
Dan kepala umumnya hanya
seperti menu bar, barang-barang

157
00:07:44,220 --> 00:07:45,510
benar-benar hanya di bagian paling atas.

158
00:07:45,510 --> 00:07:48,910
Dan tubuh adalah keberanian halaman,
segala sesuatu dalam persegi panjang besar

159
00:07:48,910 --> 00:07:50,239
yang mengisi layar.

160
00:07:50,239 --> 00:07:51,780
Jadi aku akan pergi ke depan dan melakukan hal ini.

161
00:07:51,780 --> 00:07:54,400
Aku akan pergi ke depan dan
klik Simpan, File Save.

162
00:07:54,400 --> 00:07:58,580
Dan aku akan menyimpan
ini sebagai hello.html,

163
00:07:58,580 --> 00:08:00,870
dan aku hanya akan
meletakkannya di desktop saya.

164
00:08:00,870 --> 00:08:03,520
Dan aku akan pergi
Cobalah dan klik Simpan.

165
00:08:03,520 --> 00:08:05,806
Dan notice-- Mac saya di
Setidaknya berteriak padaku.

166
00:08:05,806 --> 00:08:07,180
Apakah Anda yakin ingin melakukan ini?

167
00:08:07,180 --> 00:08:08,710
Dan aku akan mengatakan, ya, gunakan HTML.

168
00:08:08,710 --> 00:08:10,400
Aku tahu lebih baik dalam hal ini.

169
00:08:10,400 --> 00:08:14,686
Dan sekarang aku akan pergi ke desktop saya
di mana saya memiliki file ini tiba-tiba.

170
00:08:14,686 --> 00:08:16,060
Dan aku akan klik dua kali-itu.

171
00:08:16,060 --> 00:08:18,268
Dan Anda akan melihat bahwa, dengan
default, Chrome membuka.

172
00:08:18,268 --> 00:08:19,996
Itu karena itulah
browser default saya.

173
00:08:19,996 --> 00:08:21,370
Dan ia hanya mengatakan, "Halo, dunia."

174
00:08:21,370 --> 00:08:23,078
Tetapi mengatakan "halo,
dunia "di dua tempat.

175
00:08:23,078 --> 00:08:23,979
Perhatikan kiri atas.

176
00:08:23,979 --> 00:08:25,020
Cukup sulit untuk melewatkan itu.

177
00:08:25,020 --> 00:08:26,180
Ini besar dan tebal.

178
00:08:26,180 --> 00:08:30,690
Dan di mana lagi hal itu tampaknya
mengatakan, "Halo, dunia"?

179
00:08:30,690 --> 00:08:31,470
>> AUDIENCE: Tab.

180
00:08:31,470 --> 00:08:33,100
>> DAVID J. Malan: Ya, tab itu sendiri.

181
00:08:33,100 --> 00:08:35,159
Jadi ketika saya mengatakan kepala
Halaman ini semuanya top--

182
00:08:35,159 --> 00:08:36,367
dan memang ini adalah judul.

183
00:08:36,367 --> 00:08:37,710
Hanya saja di tab sini.

184
00:08:37,710 --> 00:08:40,320
Dan saya dapat menarik tab ini
keluar sehingga tidak membingungkan.

185
00:08:40,320 --> 00:08:43,360
Ini hanya satu tab sekarang,
dan memang kita melihat "halo, dunia"

186
00:08:43,360 --> 00:08:45,970
di sini dan "halo, dunia" di sini.

187
00:08:45,970 --> 00:08:47,160
Jadi cukup sederhana.

188
00:08:47,160 --> 00:08:49,050
Tapi itu juga cukup sederhana.

189
00:08:49,050 --> 00:08:50,440
Dan, sebenarnya, aku diperbesar.

190
00:08:50,440 --> 00:08:53,272
Aku dapat mengubah ukuran font hanya
untuk memperbesar untuk aksesibilitas.

191
00:08:53,272 --> 00:08:56,830
Tapi sekarang mari kita lakukan sesuatu
sedikit lebih menarik.

192
00:08:56,830 --> 00:08:59,760
>> Aku akan go-- whoops, biarkan
saya kembali ke file teks saya.

193
00:08:59,760 --> 00:09:02,400
Aku akan kembali ke saya
file teks, dan aku akan

194
00:09:02,400 --> 00:09:06,320
untuk mengubah ini dan mengatakan
"Halo, Disney World."

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

196
00:09:07,970 --> 00:09:10,919
Dan kembali ke saya
Browser dan klik Reload.

197
00:09:10,919 --> 00:09:12,710
Dan sekarang, tentu saja, itu
mengatakan "Disney World."

198
00:09:12,710 --> 00:09:15,500
Dan aku akan artifisial tampilannya
hanya sehingga lebih mudah untuk melihat.

199
00:09:15,500 --> 00:09:19,012
Jadi sekarang, sayangnya, saya agak ingin
to-- sebenarnya, itu fitur Mac.

200
00:09:19,012 --> 00:09:21,720
Saya ingin klik pada Disney World
dan pergi ke suatu tempat seperti disney.com,

201
00:09:21,720 --> 00:09:23,290
tapi itu tidak bekerja.

202
00:09:23,290 --> 00:09:26,850
Jadi prinsip dasar dari web ini
hyperlink, link yang pergi ke tempat lain.

203
00:09:26,850 --> 00:09:28,390
Jadi bagaimana saya melakukannya?

204
00:09:28,390 --> 00:09:34,690
Yah, aku hanya bisa mengatakan,
"Halo, http://www.disney.com."

205
00:09:34,690 --> 00:09:36,110
Simpan ini.

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

207
00:09:37,620 --> 00:09:39,400
Tapi ini juga, tidak dapat diklik.

208
00:09:39,400 --> 00:09:42,930
Dan apa yang bagus di sini, meskipun
ini bukan fungsional namun,

209
00:09:42,930 --> 00:09:45,930
adalah bahwa tampaknya bahwa
Browser harfiah hanya melakukan

210
00:09:45,930 --> 00:09:46,950
apa yang saya katakan untuk dilakukan.

211
00:09:46,950 --> 00:09:50,110
Jadi jika saya hanya mengetik URL seperti ini,
itu hanya akan menunjukkan URL.

212
00:09:50,110 --> 00:09:54,270
Saya perlu menggunakan tag atau markup
bahasa untuk benar-benar memberitahu

213
00:09:54,270 --> 00:09:55,621
browser untuk berbuat lebih banyak lagi.

214
00:09:55,621 --> 00:09:57,870
Jadi aku akan pergi ke depan dan
menghapus ini sejenak.

215
00:09:57,870 --> 00:10:00,980
Dan aku akan mengatakan, hey,
Browser, mulai jangkar di sini,

216
00:10:00,980 --> 00:10:02,650
link sehingga untuk berbicara.

217
00:10:02,650 --> 00:10:07,500
Dan hiper-referensi, tujuan
jangkar itu, harus URL ini.

218
00:10:07,500 --> 00:10:08,750
Dan perhatikan kutipan saya.

219
00:10:08,750 --> 00:10:11,590
Saya bisa menggunakan tanda kutip tunggal, juga,
tetapi Anda harus konsisten,

220
00:10:11,590 --> 00:10:14,270
dan saya akan umumnya hanya menggunakan
tanda kutip ganda untuk tetap sederhana.

221
00:10:14,270 --> 00:10:16,820
Perhatikan Aku akan menutup tag.

222
00:10:16,820 --> 00:10:21,160
Dan maka di sini saya akan
mengatakan, "Disney World."

223
00:10:21,160 --> 00:10:26,890
Dan sekarang aku butuh symmetry--
terbuka braket, / a, ditutup braket.

224
00:10:26,890 --> 00:10:28,090
>> Jadi apa yang saya diperkenalkan?

225
00:10:28,090 --> 00:10:30,100
Kami punya beberapa tag sudah.

226
00:10:30,100 --> 00:10:32,410
HTML, Head, Judul, Body,
semua tag, sehingga untuk berbicara,

227
00:10:32,410 --> 00:10:34,280
dengan rekan-rekan terbuka dan tertutup.

228
00:10:34,280 --> 00:10:36,530
Tapi pemberitahuan, ini adalah semacam
dari dasarnya berbeda.

229
00:10:36,530 --> 00:10:39,140
Ini adalah apa yang akan kita sebut
di HTML atribut.

230
00:10:39,140 --> 00:10:41,451
Dan atribut adalah
hanya sepasang kunci-nilai.

231
00:10:41,451 --> 00:10:43,950
Ini adalah hal yang umum di
komputer science-- pasangan kunci-nilai.

232
00:10:43,950 --> 00:10:45,770
Ini semacam alat perdagangan.

233
00:10:45,770 --> 00:10:47,040
Kunci dan nilai.

234
00:10:47,040 --> 00:10:49,390
Sebuah kata dan kemudian beberapa
Dengan kata lain atau kata-kata.

235
00:10:49,390 --> 00:10:53,790
Dan dalam hal ini, kuncinya adalah href,
dan nilai adalah bahwa URL lengkap.

236
00:10:53,790 --> 00:10:57,890
Dan apa atribut dilakukannya itu
mempengaruhi perilaku tag.

237
00:10:57,890 --> 00:11:01,010
Dan dalam hal ini, kita perlu untuk mempengaruhi
perilaku tag anchor,

238
00:11:01,010 --> 00:11:04,140
karena kita perlu jangkar
link ini ke suatu tempat.

239
00:11:04,140 --> 00:11:06,960
Dan bagaimana Anda melakukannya adalah
dengan cara atribut.

240
00:11:06,960 --> 00:11:08,970
>> Jadi aku akan pergi ke depan
dan menyimpan file sekarang.

241
00:11:08,970 --> 00:11:11,300
Kembali ke browser dan reload.

242
00:11:11,300 --> 00:11:14,580
Dan, voila, kita sekarang memiliki
awal dari sebuah halaman web yang sah.

243
00:11:14,580 --> 00:11:18,420
Super sederhana, tetapi jika aku membawa lebih
pemberitahuan ini-- di sudut kiri bawah,

244
00:11:18,420 --> 00:11:19,830
itu super-kecil.

245
00:11:19,830 --> 00:11:21,730
Tapi Anda melihat www.disney.com.

246
00:11:21,730 --> 00:11:27,076
Dan jika saya klik, memang ini
whisks saya pergi ke disney.com.

247
00:11:27,076 --> 00:11:29,380
Sekarang, hal penasaran
di sini adalah bahwa hal itu tidak

248
00:11:29,380 --> 00:11:33,940
yang best-- URL yang paling berharga, tapi
itu baik-baik saja karena file ini tidak

249
00:11:33,940 --> 00:11:35,360
ada di World Wide Web.

250
00:11:35,360 --> 00:11:39,740
Ini ada sebagai file lokal di rupanya
Pengguna saya directory-- / jharvard--

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

252
00:11:41,890 --> 00:11:42,634
Tetapi memiliki URL.

253
00:11:42,634 --> 00:11:43,800
Itu hanya kebetulan lokal.

254
00:11:43,800 --> 00:11:47,050
Sayangnya, tak satu pun dari Anda dapat mengunjungi
ini, karena jika Anda mengetik URL ini,

255
00:11:47,050 --> 00:11:49,980
Anda akan memberitahu browser Anda,
mencari file yang bernama hello.html

256
00:11:49,980 --> 00:11:50,772
pada hard drive Anda.

257
00:11:50,772 --> 00:11:53,271
Dan, tentu saja, kecuali Anda telah
telah mengikuti bersama secara manual,

258
00:11:53,271 --> 00:11:54,530
itu tidak akan ada di sana.

259
00:11:54,530 --> 00:11:55,190
>> Jadi itu baik-baik saja.

260
00:11:55,190 --> 00:11:57,815
Kami masih perlu cara, akhirnya,
untuk mendapatkan file ini ke web,

261
00:11:57,815 --> 00:12:01,180
tapi mari kita menggoda terpisah beberapa
implikasi keamanan dari apa yang kita hanya

262
00:12:01,180 --> 00:12:04,850
melihat dan mengikatnya kembali ke awal
diskusi dari pagi ini.

263
00:12:04,850 --> 00:12:08,200
Ternyata, jika
Browser harfiah hanya melakukan

264
00:12:08,200 --> 00:12:12,560
apa yang saya katakan itu untuk melakukan, dan tampaknya
menjadi kasus bahwa tag anchor adalah

265
00:12:12,560 --> 00:12:17,380
dipengaruhi oleh nilai
atribut yang disebut href ini

266
00:12:17,380 --> 00:12:20,810
tetapi menampilkan ini
teks, ini akan tampak

267
00:12:20,810 --> 00:12:26,520
menyiratkan bahwa aku bisa meletakkan URL
di kedua tempat dan kemudian kembali

268
00:12:26,520 --> 00:12:29,100
dan sekarang melihat URL dan pergi ke URL.

269
00:12:29,100 --> 00:12:32,680
Perhatikan, jika saya arahkan kursor ke kiri bawah,
Aku memang akan masih disney.com.

270
00:12:32,680 --> 00:12:38,340
>> Jadi, jika Anda sudah pernah
phished-- P-H-I-S-H-E-D--

271
00:12:38,340 --> 00:12:42,820
dengan salah satu email palsu
dari seperti PayPal bank Anda,

272
00:12:42,820 --> 00:12:46,470
Anda mungkin sudah mendapatkan link dalam
dari email yang Anda membaca bahwa

273
00:12:46,470 --> 00:12:49,970
Ia minta agar Anda klik di sini untuk pergi confirm
sandi atau konfirmasi tanggal lahir Anda

274
00:12:49,970 --> 00:12:53,840
atau sosial atau sesuatu yang secara sosial
rekayasa Anda untuk mengungkapkan

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

276
00:12:54,920 --> 00:12:57,625
Yah, aku bisa jenis mengambil
keuntungan dari ini, tidak bisa saya?

277
00:12:57,625 --> 00:13:01,240
Saya bisa mengatakan sesuatu
seperti, www.paypal.com.

278
00:13:01,240 --> 00:13:11,340
Dan bukannya disney.com, saya
bisa pergi ke, seperti, badguy.com.

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

280
00:13:12,850 --> 00:13:16,620
Dan bagaimana mudah untuk menipu,
terutama pembaca non-teknis

281
00:13:16,620 --> 00:13:20,649
atau sepintas membaca
pembaca daripada klik

282
00:13:20,649 --> 00:13:23,940
link seperti ini, yang jika saya klik itu--
Aku benar-benar tidak ingin pergi badguy.com.

283
00:13:23,940 --> 00:13:25,398
Aku tidak tahu apa yang sebenarnya ada.

284
00:13:25,398 --> 00:13:30,080
Jadi paypal.com, pemberitahuan, adalah
apa yang dikatakan itu akan,

285
00:13:30,080 --> 00:13:33,210
tapi tentu saja, jika saya melihat ke bawah
super-rendah, itu sedikit kabur,

286
00:13:33,210 --> 00:13:34,230
tetapi mengatakan badguy.com.

287
00:13:34,230 --> 00:13:38,644
Itulah satu-satunya memberitahu sekarang
bahwa saya akan pergi ke tempat yang salah.

288
00:13:38,644 --> 00:13:41,560
Dan ketika saya mengatakan sebelumnya bahwa bank
benar-benar tidak harus mendorong atau kereta

289
00:13:41,560 --> 00:13:44,510
pengguna ke link mengklik, ini
adalah salah satu manifestasi dari itu.

290
00:13:44,510 --> 00:13:45,430
Dan itu yang sederhana.

291
00:13:45,430 --> 00:13:48,120
Anda sekarang musuh jika
Anda melakukan sesuatu seperti ini

292
00:13:48,120 --> 00:13:51,000
dan mencoba untuk mengelabui pengguna
ke mengunjungi website Anda.

293
00:13:51,000 --> 00:13:53,320
Tapi untuk saat ini, kami akan terus
hal-hal baik dan bersih.

294
00:13:53,320 --> 00:13:55,640
Kita akan pergi ke depan
dan mundur perubahan ini.

295
00:13:55,640 --> 00:13:56,530
Kembali halaman tersebut.

296
00:13:56,530 --> 00:13:57,740
Dan aku kembali ke disney.com.

297
00:13:57,740 --> 00:14:00,660
>> Mari kita lihat apakah kita tidak bisa menggoda
ini terpisah sedikit lebih.

298
00:14:00,660 --> 00:14:04,160
So "Halo, Disney World."

299
00:14:04,160 --> 00:14:05,950
Aku akan mengatakan di sini.

300
00:14:05,950 --> 00:14:08,220
Mungkin aku akan membuat beberapa ruang.

301
00:14:08,220 --> 00:14:12,730
"Kami harap Anda menikmati masa tinggal Anda!"

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

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

304
00:14:15,850 --> 00:14:19,010
Ini tidak rea-- itu tidak
apa yang dimaksudkan, kan?

305
00:14:19,010 --> 00:14:21,870
Maksudku, jika saya memperlakukan teks saya
file seperti pengolah kata,

306
00:14:21,870 --> 00:14:24,894
apa yang Anda harapkan akan terjadi di sini?

307
00:14:24,894 --> 00:14:27,060
Ya, saya merasa seperti ada
harus satu baris di sini,

308
00:14:27,060 --> 00:14:28,799
jadi rasanya kereta dalam beberapa cara.

309
00:14:28,799 --> 00:14:31,090
Tapi itu benar-benar disengaja,
karena sama seperti sebelumnya,

310
00:14:31,090 --> 00:14:33,381
browser hanya akan
melakukan apa yang Anda katakan untuk dilakukan.

311
00:14:33,381 --> 00:14:34,806
Saya belum diberitahu itu untuk istirahat garis.

312
00:14:34,806 --> 00:14:37,930
Aku sudah tidak diberitahu itu bergerak turun, bahkan
meskipun, intuitif, aku merasa seperti aku lakukan.

313
00:14:37,930 --> 00:14:39,805
Jadi ternyata kita perlu
lebih markup sedikit,

314
00:14:39,805 --> 00:14:41,390
dan aku akan memperbaiki hal ini sebagai berikut.

315
00:14:41,390 --> 00:14:46,160
Aku akan Pendahuluan ini pertama halo
dengan apa yang disebut tag paragraf.

316
00:14:46,160 --> 00:14:48,920
Dan kemudian aku akan pergi ke depan
dan membungkus kalimat lainnya ini

317
00:14:48,920 --> 00:14:54,370
di tag paragraf lain, meskipun
mereka paragraf super-pendek.

318
00:14:54,370 --> 00:14:55,930
Sekarang aku akan menyelamatkan.

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

320
00:14:57,160 --> 00:14:59,070
Dan sekarang kita memiliki
ruang, dan kami semacam

321
00:14:59,070 --> 00:15:01,680
memiliki semantik
dua paragraf terpisah.

322
00:15:01,680 --> 00:15:05,290
>> Itu semua baik dan bagus, tapi itu akan
menyenangkan untuk menambahkan gambar ke halaman ini,

323
00:15:05,290 --> 00:15:08,710
jadi aku akan pergi mencari
Mickey Mouse di Google Images.

324
00:15:08,710 --> 00:15:12,830
Dan hanya untuk bersenang-senang, aku
akan ambil gambar ini.

325
00:15:12,830 --> 00:15:15,350
Aku akan pergi ke depan sekarang dan
ambil URL dari gambar ini,

326
00:15:15,350 --> 00:15:16,510
meskipun ada yang berbeda
cara untuk melakukan ini.

327
00:15:16,510 --> 00:15:18,520
Untuk saat ini, aku hanya akan menyalin URL.

328
00:15:18,520 --> 00:15:24,770
Aku akan kembali ke teks saya
File, dan aku akan mengatakan di sini,

329
00:15:24,770 --> 00:15:31,160
img src = kutipan tanda kutip
URL, super panjang.

330
00:15:31,160 --> 00:15:34,580
Dan kemudian gagasan tentang
gambar sedikit berbeda.

331
00:15:34,580 --> 00:15:38,640
Ada benar-benar tidak ada gagasan awal
gambar dan berakhir gambar,

332
00:15:38,640 --> 00:15:40,630
seperti sebuah awal tag tag akhir.

333
00:15:40,630 --> 00:15:43,840
Jadi rasanya sedikit aneh untuk
saya semantik untuk melakukan hal ini,

334
00:15:43,840 --> 00:15:45,390
memiliki tag dekat-gambar.

335
00:15:45,390 --> 00:15:46,780
Ini tidak benar.

336
00:15:46,780 --> 00:15:48,840
Ini sangat benar,
dan itu mendorong,

337
00:15:48,840 --> 00:15:50,870
tapi ada notasi singkat.

338
00:15:50,870 --> 00:15:53,780
Aku agak bisa secara simultan
membuka dan menutup tag yang sama,

339
00:15:53,780 --> 00:15:55,510
dan yang akan membuat browser bahagia.

340
00:15:55,510 --> 00:15:56,950
Jadi itu hanya sedikit
lebih ringkas untuk hal-hal

341
00:15:56,950 --> 00:15:59,408
yang secara konseptual benar-benar tidak
masuk akal untuk memulai dan akhir.

342
00:15:59,408 --> 00:16:01,190
Mereka hanya berada di sana, atau mereka tidak.

343
00:16:01,190 --> 00:16:06,020
>> Jadi aku akan menyimpan ini dan kembali
untuk saya "halo, dunia" halaman dan isi ulang.

344
00:16:06,020 --> 00:16:09,880
Dan itu sedikit di luar kendali,
karena gambar yang sebenarnya

345
00:16:09,880 --> 00:16:12,210
sedikit besar, tapi itu OK.

346
00:16:12,210 --> 00:16:13,710
Aku bisa mengubah ukurannya dalam sebuah program.

347
00:16:13,710 --> 00:16:14,900
Atau Anda tahu apa.

348
00:16:14,900 --> 00:16:17,350
Hanya untuk menunjukkan, aku
akan benar-benar mengatakan

349
00:16:17,350 --> 00:16:21,760
bahwa lebar hal ini harus
hanya menjadi 200 pixel, 200 titik.

350
00:16:21,760 --> 00:16:24,360
Biarkan aku pergi ke depan dan menyimpan
dan kembali, dan sekarang halaman

351
00:16:24,360 --> 00:16:25,690
terlihat sedikit lebih masuk akal.

352
00:16:25,690 --> 00:16:27,260
Tapi perhatikan pola.

353
00:16:27,260 --> 00:16:30,030
Yah, aku sudah jenis diajarkan semua
HTML dalam arti, setidaknya

354
00:16:30,030 --> 00:16:33,531
konseptual, karena semua HTML adalah adalah
ini tags-- tag terbuka, tag ditutup,

355
00:16:33,531 --> 00:16:35,280
dan atribut yang
memodifikasi perilaku mereka.

356
00:16:35,280 --> 00:16:38,380
Dan, tampaknya, setiap
tag dapat memiliki nol atau satu

357
00:16:38,380 --> 00:16:43,005
atau dua atau lebih atribut, masing-masing
yang melakukan sesuatu yang sedikit berbeda.

358
00:16:43,005 --> 00:16:44,380
Sekarang, bagaimana Anda tahu apa yang ada?

359
00:16:44,380 --> 00:16:46,800
Anda hanya mendengarkan seseorang
seperti saya memberitahu Anda apa yang ada,

360
00:16:46,800 --> 00:16:50,860
atau Anda hanya Google sekitar untuk tutorial
pada HTML, dan itu benar-benar sederhana.

361
00:16:50,860 --> 00:16:54,030
>> Sesungguhnya, ketika saya masih undergrad
tahun yang lalu dan belajar HTML,

362
00:16:54,030 --> 00:16:56,530
salah satu pengajaran matematika saya
asisten hanya menghabiskan

363
00:16:56,530 --> 00:16:59,600
sedikit waktu les saya
untuk seperti setengah jam, satu jam,

364
00:16:59,600 --> 00:17:00,660
dan kemudian aku sedang dalam perjalanan.

365
00:17:00,660 --> 00:17:03,300
Aku sedang dalam perjalanan menuju pembuatan
situs yang paling mengerikan yang pernah,

366
00:17:03,300 --> 00:17:05,549
yang, tampaknya, saya belum
benar-benar berkembang di luar.

367
00:17:05,549 --> 00:17:09,849
Tapi intinya adalah bahwa, sekali Anda
memahami ini ideas-- sederhana

368
00:17:09,849 --> 00:17:13,450
jika misterius text-- tetapi ini sederhana
ide untuk memulai sebuah pemikiran

369
00:17:13,450 --> 00:17:15,960
dan menutup pikiran, menjaga
segala sesuatu baik seimbang,

370
00:17:15,960 --> 00:17:19,150
mencari sesuatu, memodifikasi
perilaku tag itu, itu benar-benar semua

371
00:17:19,150 --> 00:17:20,079
ada untuk itu.

372
00:17:20,079 --> 00:17:28,140
Dan pada kenyataannya, jika kita sekarang pergi ke
sesuatu seperti google.com-- sebenarnya,

373
00:17:28,140 --> 00:17:31,920
mari kita pergi tempat yang sedikit lebih
reasonable-- stanford.edu.

374
00:17:31,920 --> 00:17:37,800
Dan aku akan pergi ke Lihat,
Developer, View Source.

375
00:17:37,800 --> 00:17:41,400
Itu jelek, tapi notice--
dan aku akan memperbesar pemberitahuan

376
00:17:41,400 --> 00:17:43,432
beberapa hal yang familiar sudah.

377
00:17:43,432 --> 00:17:45,140
Ada ini di sini,
yang merupakan browser.

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

379
00:17:46,800 --> 00:17:47,634
Ada HTML.

380
00:17:47,634 --> 00:17:49,550
Rupanya, ada sebuah
atribut yang saya tidak

381
00:17:49,550 --> 00:17:51,540
menggunakan yang menentukan
bahasa halaman,

382
00:17:51,540 --> 00:17:54,380
dan ini dapat membantu dengan otomatis
terjemahan dan hal-hal seperti itu.

383
00:17:54,380 --> 00:17:55,546
Berikut kepala halaman.

384
00:17:55,546 --> 00:17:57,790
Berikut judul halaman Stanford.

385
00:17:57,790 --> 00:17:59,832
Ada tag aku tidak
berbicara tentang tag Meta yet--.

386
00:17:59,832 --> 00:18:01,540
Ini hanya semacam
informasi latar belakang.

387
00:18:01,540 --> 00:18:04,210
Ini membantu dengan SEO, atau
Optimisasi Mesin Pencari,

388
00:18:04,210 --> 00:18:06,320
atau Google-hasil pencarian atau sejenisnya.

389
00:18:06,320 --> 00:18:09,029
Tetapi jika kita terus mencari, terus
mencari, inilah tag Tubuh.

390
00:18:09,029 --> 00:18:11,570
Dan ada tandan lainnya
tag kita sudah tidak bicara tentang belum.

391
00:18:11,570 --> 00:18:13,750
Tapi Div adalah salah satu untuk
pembagian halaman.

392
00:18:13,750 --> 00:18:16,680
Ini seperti sebuah persegi panjang tak terlihat
jika Anda jenis ingin mental

393
00:18:16,680 --> 00:18:20,160
membagi halaman Anda ke dalam
unit yang berbeda secara online.

394
00:18:20,160 --> 00:18:22,650
Dan kemudian banyak divs I
lihat, sesuatu yang disebut Class,

395
00:18:22,650 --> 00:18:24,440
tapi kami akan kembali ke itu.

396
00:18:24,440 --> 00:18:26,200
>> Ini Bentuk interesting--.

397
00:18:26,200 --> 00:18:27,730
Formulir seluruh web.

398
00:18:27,730 --> 00:18:30,310
Setiap kotak pencarian Anda
pernah digunakan adalah formulir.

399
00:18:30,310 --> 00:18:31,490
Dan, jadi, mari kita benar-benar melihat.

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

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

402
00:18:33,910 --> 00:18:37,660
Aksi formulir ini, untuk apa pun
alasan historis, adalah URL itu.

403
00:18:37,660 --> 00:18:38,840
Metode adalah "post."

404
00:18:38,840 --> 00:18:44,060
Ternyata permintaan HTTP dapat menggunakan
kata kerja "mendapatkan," seperti yang kita lihat sebelumnya,

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

406
00:18:45,070 --> 00:18:47,030
Dan akan melihat perbedaan
ini dalam sekejap.

407
00:18:47,030 --> 00:18:48,363
Mari kita benar-benar melihat apa ini.

408
00:18:48,363 --> 00:18:49,830
Biarkan aku kembali ke halaman Stanford.

409
00:18:49,830 --> 00:18:53,330
Bentuk apa yang mereka bicarakan
tentang, menurut Anda?

410
00:18:53,330 --> 00:18:54,485
Apa yang melompat keluar pada Anda?

411
00:18:54,485 --> 00:18:54,970
>> AUDIENCE: Cari kotak.

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

413
00:18:55,845 --> 00:18:58,410
Jadi di bagian kanan atas
di sini adalah kotak pencarian ini.

414
00:18:58,410 --> 00:19:02,441
Dan itulah bagaimana mereka menerapkan itu-- sebuah
tag yang secara harfiah bentuk open-braket.

415
00:19:02,441 --> 00:19:03,940
Dan kemudian mari kita mencari sesuatu.

416
00:19:03,940 --> 00:19:09,220
Mari kita mencari seorang teman
dari mine-- "Nick Parlante."

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

418
00:19:11,380 --> 00:19:13,750
Dan tentu saja, ia pergi ke
URL yang sedikit berbeda.

419
00:19:13,750 --> 00:19:15,140
Biarkan aku kembali ke sini.

420
00:19:15,140 --> 00:19:18,960
Mari kita cari "kursus."

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

422
00:19:19,460 --> 00:19:20,484
Pergi ke URL yang berbeda.

423
00:19:20,484 --> 00:19:23,400
Jadi, Stanford menambahkan beberapa sihir
bahwa mereka tidak membawa saya ke URL

424
00:19:23,400 --> 00:19:25,820
yang kita lihat di
tindakan atribut ada.

425
00:19:25,820 --> 00:19:32,480
Namun bentuk ini di sini diimplementasikan murni
dengan cara markup ini di sini, tag ini.

426
00:19:32,480 --> 00:19:35,710
Bahkan, inilah masukan untuk
jenis pencarian yang Anda inginkan.

427
00:19:35,710 --> 00:19:38,940
Berikut adalah masukan untuk
jenis lain dari pencarian.

428
00:19:38,940 --> 00:19:41,960
Berikut adalah masukan untuk string itu sendiri.

429
00:19:41,960 --> 00:19:45,394
Dan tujuannya adalah tidak untuk membungkus
pikiran kita sekitar semua tag

430
00:19:45,394 --> 00:19:46,060
tapi hanya untuk melihat.

431
00:19:46,060 --> 00:19:48,300
Itu hanya membuka dan menutup
tag dan mencari hal-hal.

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

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

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

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

436
00:19:51,925 --> 00:19:53,550
DAVID J. Malan: Itu pertanyaan yang bagus.

437
00:19:53,550 --> 00:19:54,660
Itu sedikit rumit untuk melihat.

438
00:19:54,660 --> 00:19:56,300
Biarkan aku datang kembali ke
Pertanyaan hanya dalam beberapa menit

439
00:19:56,300 --> 00:19:59,000
ketika kita melihat sesuatu yang disebut
CSS, atau cascading style sheet,

440
00:19:59,000 --> 00:20:02,500
dan kita dapat mencoba untuk menyimpulkan
banyak dari halaman.

441
00:20:02,500 --> 00:20:08,090
Jadi jika sekarang kita melihat di google.com,
mari kita lihat apa halaman mereka terlihat seperti.

442
00:20:08,090 --> 00:20:09,840
Anda akan they're-- yang lucu hari ini.

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

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

445
00:20:12,990 --> 00:20:13,690
Semua selesai.

446
00:20:13,690 --> 00:20:15,260
Baiklah, jadi View Source.

447
00:20:15,260 --> 00:20:19,590
Anda akan berpikir Google memiliki
kode sumber yang benar-benar bagus.

448
00:20:19,590 --> 00:20:24,970
Jadi, tampaknya, apa yang terjadi di sini?

449
00:20:24,970 --> 00:20:27,880
Dan pada kenyataannya, ini bahkan tidak HTML.

450
00:20:27,880 --> 00:20:30,930
Ini adalah sesuatu yang disebut JavaScript.

451
00:20:30,930 --> 00:20:32,344
Dan mari kita terus dan pergi.

452
00:20:32,344 --> 00:20:34,010
Aku bahkan tidak tahu di mana halaman dimulai.

453
00:20:34,010 --> 00:20:37,240
Aku akan menggunakan Command
F, terbuka braket HTML.

454
00:20:37,240 --> 00:20:38,200
Baiklah, itu dia.

455
00:20:38,200 --> 00:20:44,150
Saya menemukan awal halaman, dan
ada begitu banyak hal di sini.

456
00:20:44,150 --> 00:20:45,310
>> Apa yang sebenarnya terjadi?

457
00:20:45,310 --> 00:20:47,460
Nah, Anda tahu apa,
kita bisa membersihkan ini.

458
00:20:47,460 --> 00:20:52,109
Jika saya bukannya pergi ke ini Periksa
toolbar, alat diagnostik khusus ini,

459
00:20:52,109 --> 00:20:54,150
dan pergi tidak Jaringan,
di mana kita terus hari ini,

460
00:20:54,150 --> 00:20:56,420
tetapi jika aku pergi ke Elements,
apa yang benar-benar baik

461
00:20:56,420 --> 00:20:59,990
adalah bahwa browser memiliki banyak
mata jauh lebih baik daripada yang saya lakukan.

462
00:20:59,990 --> 00:21:02,670
Dan browser dapat membaca
yang berantakan dari halaman web,

463
00:21:02,670 --> 00:21:04,700
bahwa HTML email kita hanya
memandang, dan itu bisa

464
00:21:04,700 --> 00:21:08,340
mengurai atau membaca dan
menganalisis dan memformat ulang

465
00:21:08,340 --> 00:21:09,910
dengan cara yang ramah-manusia yang bagus.

466
00:21:09,910 --> 00:21:11,740
Jadi apa yang saya lihat sekarang
di layar ini di sini

467
00:21:11,740 --> 00:21:15,470
di bawah Elements, konten yang sama persis,
tapi mereka sudah menjorok segalanya,

468
00:21:15,470 --> 00:21:18,140
mereka sudah berwarna itu, tapi
itu adalah teks yang sama persis

469
00:21:18,140 --> 00:21:19,620
yang saya download dari server.

470
00:21:19,620 --> 00:21:23,630
>> Dan apa yang bagus saat ini adalah saya bisa melihat
dalam tubuh, untuk pemberitahuan instance--,

471
00:21:23,630 --> 00:21:26,480
Halaman ini masih terdiri
hanya kepala dan tubuh,

472
00:21:26,480 --> 00:21:28,660
dan saya hierarkis bisa menyelam di sini.

473
00:21:28,660 --> 00:21:32,420
Perhatikan bahwa Google tampaknya memiliki
untuk divs-- ini satu dan yang satu ini.

474
00:21:32,420 --> 00:21:33,310
Saya dapat memperluas itu.

475
00:21:33,310 --> 00:21:35,370
Ada sejumlah besar divs lainnya.

476
00:21:35,370 --> 00:21:36,900
Jadi itu sedikit rumit.

477
00:21:36,900 --> 00:21:37,400
Tapi tunggu.

478
00:21:37,400 --> 00:21:40,970
Hal ini tampaknya jauh lebih
dibaca, relatif, dari ini.

479
00:21:40,970 --> 00:21:43,840
Mengapa Google memalukan
sendiri dengan hanya mengirimkan

480
00:21:43,840 --> 00:21:50,400
ini kekacauan besar dari kode beberapa
semacam hanya untuk melaksanakan sesuatu

481
00:21:50,400 --> 00:21:53,640
yang terlihat begitu sederhana pada pandangan pertama?

482
00:21:53,640 --> 00:21:55,270
Seperti, mengapa tidak mereka menambahkan lebih banyak ruang?

483
00:21:55,270 --> 00:21:56,811
Mengapa mereka tidak tekan Enter seperti yang kulakukan?

484
00:21:56,811 --> 00:21:59,110
Lihatlah seberapa baik aku
pada menulis halaman web.

485
00:21:59,110 --> 00:22:00,680
Saya tekan Enter begitu rajin.

486
00:22:00,680 --> 00:22:03,760
Aku menjorok jadi semuanya
begitu cantik dan dibaca.

487
00:22:03,760 --> 00:22:08,463
Mengapa Google tidak berlatih sama?

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

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

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

491
00:22:13,180 --> 00:22:14,270
Sangat adil.

492
00:22:14,270 --> 00:22:16,650
Mereka tidak memiliki beberapa
Orang di Google secara manual

493
00:22:16,650 --> 00:22:18,160
memperbarui halaman rumah lagi.

494
00:22:18,160 --> 00:22:20,010
Ini bukan 1999 lagi.

495
00:22:20,010 --> 00:22:21,140
Sehingga mereka memiliki perangkat lunak.

496
00:22:21,140 --> 00:22:25,397
Mereka memiliki alat-alat lain yang
menghasilkan dinamis mereka HTML.

497
00:22:25,397 --> 00:22:27,480
Tentu saja, bahwa kode itu sendiri
ditulis oleh manusia,

498
00:22:27,480 --> 00:22:30,220
tetapi kenyataannya adalah,
itu cukup adil untuk mengatakan,

499
00:22:30,220 --> 00:22:33,340
browser tentu tidak
peduli bagaimana berantakan kode ini.

500
00:22:33,340 --> 00:22:35,940
Tapi ada bahkan lebih
alasan teknis menarik

501
00:22:35,940 --> 00:22:42,580
bahwa Google mendistribusikan HTML mereka
kode ceroboh seperti itu, tampaknya

502
00:22:42,580 --> 00:22:48,350
cara luar biasa semua dikemas bersama-sama
dengan sangat sedikit way-- sangat sedikit

503
00:22:48,350 --> 00:22:51,274
di jalan format seperti yang kulakukan.

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

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

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

507
00:22:54,040 --> 00:22:55,680
Dan apa yang Anda katakan, Lydia?

508
00:22:55,680 --> 00:22:56,240
Lebih cepat?

509
00:22:56,240 --> 00:22:57,281
Mengapa lebih cepat?

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

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

512
00:23:00,522 --> 00:23:02,230
DAVID J. Malan: Ada
tidak ada ruang untuk membaca.

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

514
00:23:02,730 --> 00:23:04,560
Jadi berpikir tentang apa ruang adalah.

515
00:23:04,560 --> 00:23:08,394
Jadi masing-masing karakter pada keyboard mengambil
beberapa jumlah ruang untuk mewakili,

516
00:23:08,394 --> 00:23:10,560
baik secara fisik, seperti itu
memakan banyak ruang,

517
00:23:10,560 --> 00:23:13,250
atau entah bagaimana di bawah
hood, yang membutuhkan memori.

518
00:23:13,250 --> 00:23:15,740
Dan sebagai aside-- dan kami akan
berbicara lebih banyak tentang tomorrow-- ini

519
00:23:15,740 --> 00:23:19,930
setiap karakter pada keyboard
biasanya membutuhkan 8 bit, atau satu byte.

520
00:23:19,930 --> 00:23:23,360
Jadi pola 8 nol atau
yang, atau hanya 1 byte, seperti yang kita

521
00:23:23,360 --> 00:23:24,720
manusia biasanya akan mengatakan.

522
00:23:24,720 --> 00:23:27,690
Jadi itu kecil, tapi
itu masih non-nol.

523
00:23:27,690 --> 00:23:29,940
Ini masih beberapa jumlah ruang.

524
00:23:29,940 --> 00:23:36,082
Jadi jika seorang insinyur atau Google hit
spasi hanya sekali, dan anggaplah

525
00:23:36,082 --> 00:23:38,540
Google-- itu super-popular--
misalkan satu miliar orang

526
00:23:38,540 --> 00:23:40,780
kunjungi halaman rumah mereka sehari,
atau jumlah orang

527
00:23:40,780 --> 00:23:43,290
kunjungi halaman rumah
miliar kali sehari,

528
00:23:43,290 --> 00:23:48,890
berapa banyak byte tambahan memiliki yang
software engineer hanya biaya Google

529
00:23:48,890 --> 00:23:51,310
dengan memukul atau ruang nya bar sekali?

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

531
00:23:52,692 --> 00:23:54,150
DAVID J. Malan: Tidak cukup buruk.

532
00:23:54,150 --> 00:23:57,070
Hanya satu byte kali miliar.

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

534
00:23:57,871 --> 00:23:59,120
AUDIENCE: 8 miliar gigabyte.

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

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

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

538
00:24:02,410 --> 00:24:04,080
1 gigabyte akan menjadi satuan ukuran.

539
00:24:04,080 --> 00:24:08,240
Jika ia melakukan dua
ruang, 2 gigabyte.

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

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

542
00:24:09,530 --> 00:24:11,860
Sisik mahal.

543
00:24:11,860 --> 00:24:16,150
Dan dalam kasus-kasus seperti Google,
yang diberikan, adalah kasus yang ekstrim,

544
00:24:16,150 --> 00:24:21,450
ada masalah lain yang muncul hanya
dengan membuat keputusan yang sangat wajar

545
00:24:21,450 --> 00:24:25,744
atau mengambil tindakan manusia sangat sederhana,
karena memiliki efek luar biasa ini.

546
00:24:25,744 --> 00:24:27,660
Jadi salah satu alasan
ini terlihat begitu terkompresi

547
00:24:27,660 --> 00:24:30,660
adalah persis seperti Victoria said-- itu
hanya dihasilkan oleh komputer pula.

548
00:24:30,660 --> 00:24:31,900
Jadi bukan masalah besar.

549
00:24:31,900 --> 00:24:33,309
Biarkan browser mengetahuinya.

550
00:24:33,309 --> 00:24:35,350
Tetapi juga sengaja
tidak memiliki banyak ruang,

551
00:24:35,350 --> 00:24:36,766
karena ruang tidak diperlukan.

552
00:24:36,766 --> 00:24:38,250
Dan ruang benar-benar membutuhkan uang.

553
00:24:38,250 --> 00:24:40,670
>> Ini baik biaya waktu,
karena hanya untuk mendorong

554
00:24:40,670 --> 00:24:44,670
bahwa lebih banyak data dari
markas google.com saja

555
00:24:44,670 --> 00:24:47,710
telah mendapat untuk mengambil beberapa jumlah
waktu, bahkan jika itu milidetik

556
00:24:47,710 --> 00:24:51,190
atau mikrodetik, namun yang menambahkan sampai
lebih banyak pengguna, atau lebih mungkin,

557
00:24:51,190 --> 00:24:52,270
mungkin biaya uang.

558
00:24:52,270 --> 00:24:54,690
Google mungkin menghubungkan ke
orang lain di dunia, salah satu

559
00:24:54,690 --> 00:24:56,398
dari mereka mengintip
poin, dan jika mereka memiliki

560
00:24:56,398 --> 00:24:59,880
beberapa jenis hubungan keuangan
dimana data mereka biaya uang,

561
00:24:59,880 --> 00:25:01,730
mereka mungkin juga
meminimalkan jumlah data

562
00:25:01,730 --> 00:25:04,530
mereka menyemburkan di
koneksi internet mereka.

563
00:25:04,530 --> 00:25:07,630
>> Jadi hal yang lucu, meskipun, pada akhirnya,
atau mungkin hal meyakinkan,

564
00:25:07,630 --> 00:25:11,030
adalah bahwa meskipun ini terlihat sangat
luar biasa, di akhir hari,

565
00:25:11,030 --> 00:25:16,750
itu masih prinsip yang sama persis seperti
Halaman ini sangat sederhana di sini dari HTML

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

567
00:25:17,390 --> 00:25:20,610
Jadi hanya untuk meringkas dan sehingga Anda
memiliki versi kanonik jika Anda tidak

568
00:25:20,610 --> 00:25:25,900
berikut bersama dengan pilihan di sini, di sini
mungkin yang paling sederhana dari halaman web,

569
00:25:25,900 --> 00:25:28,240
jadi sesuatu untuk bermain dengan mungkin nanti.

570
00:25:28,240 --> 00:25:30,790
>> Nah, mari kita memperkenalkan
beberapa ide lain sekarang.

571
00:25:30,790 --> 00:25:33,420
Kami akan memperkenalkan
sesuatu yang disebut tag gaya.

572
00:25:33,420 --> 00:25:38,110
Kami bisa menyesuaikan dgn mode halaman ini
dengan cara yang lebih menarik.

573
00:25:38,110 --> 00:25:40,860
Jadi sedangkan email HTML
adalah semua tentang menandai

574
00:25:40,860 --> 00:25:44,470
data, semacam menentukan ke
Browser bagaimana struktur data,

575
00:25:44,470 --> 00:25:48,110
di mana harus menaruhnya, CSS, atau
cascading style sheet,

576
00:25:48,110 --> 00:25:52,640
adalah bahasa kedua yang
umumnya akan bercampur dengan HTML

577
00:25:52,640 --> 00:25:55,670
karena kami akan see-- tapi kita bisa membersihkan
yang di sebuah moment-- yang mengambil

578
00:25:55,670 --> 00:25:59,850
itu mil akhir, dan itu stylizes itu.

579
00:25:59,850 --> 00:26:02,460
Ia mendapat warna tepat,
font ukuran tepat,

580
00:26:02,460 --> 00:26:03,860
positioning yang tepat.

581
00:26:03,860 --> 00:26:06,510
Ini semua tentang estetika
atau memformat, bukan tentang

582
00:26:06,510 --> 00:26:08,330
data fundamental itu sendiri.

583
00:26:08,330 --> 00:26:11,390
Dan cara termudah untuk menunjukkan
ini mungkin dengan contoh.

584
00:26:11,390 --> 00:26:15,320
Jadi aku akan pergi
ke file teks sederhana saya.

585
00:26:15,320 --> 00:26:17,970
Dan hanya dalam beberapa saat, aku akan
berjalan kita melalui proses

586
00:26:17,970 --> 00:26:19,360
melakukan hal ini diri kita sendiri.

587
00:26:19,360 --> 00:26:23,310
>> Aku akan kembali ke file saya
di sini dan kembali halaman tersebut hanya

588
00:26:23,310 --> 00:26:25,800
untuk mengkonfirmasi apa yang tampak seperti.

589
00:26:25,800 --> 00:26:27,190
Di situlah kita berada di saat ini.

590
00:26:27,190 --> 00:26:31,170
Saya merasa seperti anak-anak akan menikmati
memiliki beberapa warna untuk halaman web ini.

591
00:26:31,170 --> 00:26:34,480
Jadi aku akan pergi ke sini
ke kepala halaman.

592
00:26:34,480 --> 00:26:38,130
Dan aku akan melakukan gaya, / gaya.

593
00:26:38,130 --> 00:26:44,060
Dan kemudian di dalam ini, saya akan
untuk memberitahu tubuh page-- saya

594
00:26:44,060 --> 00:26:46,870
dan format ini, di
Sepintas, mungkin sedikit

595
00:26:46,870 --> 00:26:49,400
aneh tapi konvensional.

596
00:26:49,400 --> 00:26:55,010
Aku akan mengatakan bahwa latar belakang
warna halaman ini harus hijau.

597
00:26:55,010 --> 00:26:57,960
Dan ini sayangnya
semacam bukan desain terbaik.

598
00:26:57,960 --> 00:27:00,710
Perhatikan bahwa sebelumnya
dalam dunia HTML,

599
00:27:00,710 --> 00:27:03,190
Saya mengatakan bahwa atribut
apakah ini pasangan kunci-nilai.

600
00:27:03,190 --> 00:27:05,760
Sesuatu sama kutipan
tanda kutip "sesuatu."

601
00:27:05,760 --> 00:27:08,810
Dalam dunia CSS, yang
dirancang oleh beberapa orang yang berbeda,

602
00:27:08,810 --> 00:27:11,020
mereka memutuskan bahwa, dalam mereka
dunia, kunci-nilai pasangan

603
00:27:11,020 --> 00:27:13,920
akan menjadi kata usus sesuatu.

604
00:27:13,920 --> 00:27:15,220
Jadi itu ide yang sama, meskipun.

605
00:27:15,220 --> 00:27:18,620
Ini menghubungkan nilai
dengan beberapa kunci yang entah bagaimana

606
00:27:18,620 --> 00:27:20,330
mempengaruhi perilaku halaman ini.

607
00:27:20,330 --> 00:27:21,901
>> Dan Anda mungkin bisa menebak.

608
00:27:21,901 --> 00:27:24,150
Apa ini mungkin akan
untuk melakukan bahkan jika Anda belum pernah

609
00:27:24,150 --> 00:27:27,867
dilihat HTML atau CSS sebelumnya?

610
00:27:27,867 --> 00:27:29,450
AUDIENCE: Mengubah warna latar belakang.

611
00:27:29,450 --> 00:27:30,560
DAVID J. Malan: Ya,
mengubah warna latar belakang.

612
00:27:30,560 --> 00:27:33,280
Dan khususnya
warna latar belakang dari tubuh.

613
00:27:33,280 --> 00:27:36,290
Tapi sejauh yang
tubuh untuk saat ini adalah web

614
00:27:36,290 --> 00:27:38,870
page-- itu satu-satunya hal yang
di bawah judul bar really--

615
00:27:38,870 --> 00:27:40,870
itu mungkin akan
mempengaruhi hal yang sama.

616
00:27:40,870 --> 00:27:41,430
Jadi mari kita lihat.

617
00:27:41,430 --> 00:27:42,490
Mari kita simpan ini.

618
00:27:42,490 --> 00:27:44,310
Pergi di sini dan reload.

619
00:27:44,310 --> 00:27:46,140
Ini cukup mengerikan.

620
00:27:46,140 --> 00:27:48,070
Dan apa yang terjadi
di sini adalah efek samping.

621
00:27:48,070 --> 00:27:49,850
Aku hanya memilih gambar ini secara acak.

622
00:27:49,850 --> 00:27:53,305
Mengapa hijau tidak
menyerap belakang Mickey?

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

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

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

626
00:27:57,880 --> 00:28:01,750
Ternyata gambar, cukup
banyak semua gambar yang mungkin kita gunakan,

627
00:28:01,750 --> 00:28:03,670
semua rectangles-- persegi panjang.

628
00:28:03,670 --> 00:28:07,710
Bahkan jika Mickey memiliki beberapa kurva
untuk dirinya sendiri dan memiliki latar belakang,

629
00:28:07,710 --> 00:28:09,330
latar belakang yang harus menjadi sesuatu.

630
00:28:09,330 --> 00:28:10,280
Itu harus putih.

631
00:28:10,280 --> 00:28:11,910
Itu harus hitam atau sesuatu yang lain.

632
00:28:11,910 --> 00:28:13,650
Hal ini dapat transparan.

633
00:28:13,650 --> 00:28:16,100
Dan pada kenyataannya, aku bisa
membuka Mickey Mouse di sini

634
00:28:16,100 --> 00:28:18,590
dalam program yang disebut Photoshop
atau yang serupa

635
00:28:18,590 --> 00:28:21,176
dan mengubah semua putih yang
latar belakang transparan,

636
00:28:21,176 --> 00:28:22,550
begitu hijau akan bersinar.

637
00:28:22,550 --> 00:28:25,980
Tapi itu sesuatu yang saya perlu
untuk meminta dari diri sendiri atau seorang seniman grafis

638
00:28:25,980 --> 00:28:28,130
atau desainer di saya
perusahaan, misalnya,

639
00:28:28,130 --> 00:28:31,490
untuk dilakukan, terutama karena saya hanya
meminjam satu ini dari internet.

640
00:28:31,490 --> 00:28:33,030
Tapi itulah mengapa hal ini terjadi.

641
00:28:33,030 --> 00:28:34,980
>> Jadi apa lagi yang mungkin ingin kita lakukan?

642
00:28:34,980 --> 00:28:41,040
Yah, kita mungkin ingin mengatakan kami
sangat berharap Anda menikmati masa tinggal Anda.

643
00:28:41,040 --> 00:28:44,150
Dan untuk penekanan, saya ingin
untuk membuat ini kuat,

644
00:28:44,150 --> 00:28:48,310
dan jadi saya akan mengatakan terbuka yang kuat dan
menutup kuat dan kemudian kembali.

645
00:28:48,310 --> 00:28:50,320
Dan itu agak sulit
untuk melihat pada proyektor

646
00:28:50,320 --> 00:28:53,250
tapi mungkin benar-benar sekarang
melompat keluar pada Anda sedikit lebih.

647
00:28:53,250 --> 00:28:56,180
Sehingga Anda dapat menambahkan huruf miring dalam hal ini
cara, menghadap berani dengan cara ini.

648
00:28:56,180 --> 00:28:57,500
Kita bisa mengubah warna.

649
00:28:57,500 --> 00:29:01,610
Bahkan, hanya untuk iseng, aku
akan pergi ke depan dan melakukan hal ini.

650
00:29:01,610 --> 00:29:05,120
Aku tidak benar-benar suka bagaimana saya
paragraf yang dekat ini bersama-sama,

651
00:29:05,120 --> 00:29:06,870
jadi saya mungkin melakukan sesuatu seperti ini.

652
00:29:06,870 --> 00:29:13,310
Aku akan memberitahu browser,
mengubah setiap tag paragraf untuk memiliki,

653
00:29:13,310 --> 00:29:16,952
mari say-- sebenarnya, Anda tahu apa,
mari kita sejajarkan teks-align, center.

654
00:29:16,952 --> 00:29:19,410
Dan lagi, aku tahu ini hanya
karena seseorang mengajarkan kepada saya

655
00:29:19,410 --> 00:29:21,118
atau saya mencarinya di
referensi online.

656
00:29:21,118 --> 00:29:22,450
Jadi biarkan aku menyimpan ini.

657
00:29:22,450 --> 00:29:25,070
Dan, ah, sekarang aku sudah
berpusat gambar di sana.

658
00:29:25,070 --> 00:29:28,490
Dan sebenarnya, Anda tahu apa, jika
Aku memindahkan gambar saya ke sebuah paragraf

659
00:29:28,490 --> 00:29:34,510
tag-- jadi sebuah paragraf ketiga,
meskipun itu tidak teks.

660
00:29:34,510 --> 00:29:36,917
Mari kita simpan itu dan reload.

661
00:29:36,917 --> 00:29:40,000
Sekarang halaman mulai terlihat baik
of-- Maksudku, itu masih sangat jelek,

662
00:29:40,000 --> 00:29:43,180
tapi setidaknya itu terlihat seperti aku menghabiskan
dua menit, bukan satu menit

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

664
00:29:43,950 --> 00:29:47,200
>> Dan, secara bertahap, bisa kita buat
perubahan estetika sekarang ke halaman?

665
00:29:47,200 --> 00:29:50,860
Aku tidak benar-benar mengubah data dalam
Halaman selain menambahkan kata benar-benar.

666
00:29:50,860 --> 00:29:52,650
Saya telah menambahkan metadata, jika Anda mau.

667
00:29:52,650 --> 00:29:54,830
Hei, browser, membuat
Kata "benar-benar" berani.

668
00:29:54,830 --> 00:29:56,940
Namun data tersebut tidak kuat.

669
00:29:56,940 --> 00:29:57,830
Itu metadata.

670
00:29:57,830 --> 00:29:59,410
Data adalah "benar-benar."

671
00:29:59,410 --> 00:30:02,200
Jadi kita masih memiliki beberapa
konsep yang sama seperti sebelumnya.

672
00:30:02,200 --> 00:30:05,990
Sekarang, tentu saja, ini bukan di web,
jadi saya akan melakukan satu langkah terakhir di sini.

673
00:30:05,990 --> 00:30:10,300
>> Aku akan pergi ke hello.html
dan hanya menyorot dan copy ini.

674
00:30:10,300 --> 00:30:12,285
Dan sekarang aku akan
pergi ke Cloud9, yang

675
00:30:12,285 --> 00:30:13,910
Saya akan memandu Anda melalui hanya dalam beberapa saat.

676
00:30:13,910 --> 00:30:17,080
Dan kemungkinan besar Anda akan segera, jika
belum, di layar seperti ini.

677
00:30:17,080 --> 00:30:21,080
Dan biarkan aku hanya memberikan cepat
tur apa yang sebenarnya Cloud9 adalah.

678
00:30:21,080 --> 00:30:26,590
Jadi sekali lagi awan 9 adalah
layanan berbasis cloud ini

679
00:30:26,590 --> 00:30:30,580
yang memberi Anda dan saya ilusi
memiliki mesin virtual kita sendiri

680
00:30:30,580 --> 00:30:33,090
di awan, secara teknis
wadah di awan,

681
00:30:33,090 --> 00:30:35,160
bahwa kita memiliki penuh
hak akses administratif untuk.

682
00:30:35,160 --> 00:30:37,130
Jadi dalam teori, tidak ada
lain di dunia memiliki

683
00:30:37,130 --> 00:30:39,152
Akses ke layar saya
melihat sekarang,

684
00:30:39,152 --> 00:30:40,860
kecuali mungkin orang-orang
yang menjalankan situs,

685
00:30:40,860 --> 00:30:43,470
karena secara teknis mereka memiliki
akses fisik dan sebagainya.

686
00:30:43,470 --> 00:30:44,740
>> Jadi apa yang kita lihat di lingkungan ini?

687
00:30:44,740 --> 00:30:46,230
Aku akan zoom out,
karena itu agak kecil.

688
00:30:46,230 --> 00:30:48,104
Dan biarkan saya menunjukkan lebih
di sini untuk sesaat.

689
00:30:48,104 --> 00:30:53,210
Di sisi kiri dan Anda
layar, ada file browser di sebelah kiri.

690
00:30:53,210 --> 00:30:55,362
Sangat mirip dalam roh
untuk Mac OS dan Windows.

691
00:30:55,362 --> 00:30:57,070
Ini semua dari
file dalam akun saya.

692
00:30:57,070 --> 00:30:59,250
Dan secara default, jika Anda
account seperti saya,

693
00:30:59,250 --> 00:31:05,090
Anda akan melihat atau segera melihat
helloworld.html dan readme.md.

694
00:31:05,090 --> 00:31:07,950
Di sini di sebelah kanan, ini adalah
di mana file teks saya akan pergi.

695
00:31:07,950 --> 00:31:11,620
Jika Anda pernah menggunakan Microsoft
Word atau Notepad atau TextEdit,

696
00:31:11,620 --> 00:31:14,100
ini adalah kata editing saya
file akan pergi.

697
00:31:14,100 --> 00:31:16,540
Dan kemudian yang paling misterius
Fitur lingkungan ini

698
00:31:16,540 --> 00:31:20,100
bahwa kita tidak akan benar-benar perlu menggunakan adalah
di sini disebut Window Terminal.

699
00:31:20,100 --> 00:31:23,390
Jika Anda telah menggunakan DOS dari
tadi, ini adalah Linux

700
00:31:23,390 --> 00:31:25,450
atau setara Linux dari DOS.

701
00:31:25,450 --> 00:31:28,190
Ini adalah interface-- berbasis teks
tidak ada klik mouse, tidak ada menyeret.

702
00:31:28,190 --> 00:31:30,770
Semua dapat Anda lakukan adalah ketik
perintah, tetapi perintah-perintah tersebut

703
00:31:30,770 --> 00:31:34,400
dapat membuat file, memindahkan file, terbuka
direktori, direktori dekat,

704
00:31:34,400 --> 00:31:35,740
melakukan banyak hal.

705
00:31:35,740 --> 00:31:38,060
Tapi untuk saat ini, kita hanya akan
menghabiskan waktu kita di sini.

706
00:31:38,060 --> 00:31:39,050
>> Dan jadi mari kita melakukan hal ini.

707
00:31:39,050 --> 00:31:41,008
Jika Anda berada di ini
lingkungan, yang Anda harus

708
00:31:41,008 --> 00:31:45,900
jika Anda membuat ruang kerja
sudah, pergi ke depan dan hanya pergi

709
00:31:45,900 --> 00:31:48,690
File, New sejenak.

710
00:31:48,690 --> 00:31:51,740
Dan itu akan memberi Anda baru
tab di sini di tengah.

711
00:31:51,740 --> 00:31:54,250
Dan aku hanya-- dan mari
pergi ke depan dan melakukan hal ini.

712
00:31:54,250 --> 00:31:59,910
Mari kita pergi ke depan dan sekarang jangan Berkas, Simpan
dan pergi ke depan dan menyebutnya hello.html,

713
00:31:59,910 --> 00:32:02,740
tidak menjadi bingung dengan
helloworld.html, yang

714
00:32:02,740 --> 00:32:06,910
datang dengan akun gratis yang baru Anda,
yang hanya file sampel.

715
00:32:06,910 --> 00:32:11,020
Anda akan melihatnya tiba-tiba muncul,
kemungkinan besar di sisi kiri,

716
00:32:11,020 --> 00:32:12,810
dan tab masih akan terbuka.

717
00:32:12,810 --> 00:32:21,300
Dan biarkan aku mendorong Anda sekarang untuk menciptakan
file ini atau beberapa varian daripadanya.

718
00:32:21,300 --> 00:32:24,607
Dan jika Anda tidak bisa melihat itu pada
layar, ini identik dengan slide

719
00:32:24,607 --> 00:32:26,190
Anda mungkin memiliki di tab lain.

720
00:32:26,190 --> 00:32:29,296
>> Jadi singkatnya, membuat halaman web pertama Anda,
simpan, dan kemudian hanya dalam beberapa saat,

721
00:32:29,296 --> 00:32:31,170
Saya akan menunjukkan bagaimana Anda
benar-benar dapat melihat ini.

722
00:32:31,170 --> 00:32:32,970
Tapi mengubah setidaknya satu hal.

723
00:32:32,970 --> 00:32:35,400
Ubah helloworld untuk
sesuatu pilihan Anda sendiri,

724
00:32:35,400 --> 00:32:39,821
sehingga Anda yakin bahwa itu Anda
mengajukan dan tidak yang saya buat.

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

726
00:32:40,320 --> 00:32:43,804
Dan ketika Anda ready-- ada
rush-- ketika Anda siap,

727
00:32:43,804 --> 00:32:46,220
pergi ke depan dan menyimpan file
setelah Anda membuat perubahan ini.

728
00:32:46,220 --> 00:32:49,540
Dan jika Anda mengklik
tombol up menjalankan atas, ini

729
00:32:49,540 --> 00:32:53,610
harus membuka tab baru yang akan memberitahu
Anda apa URL Anda dapat mengunjungi file Anda di,

730
00:32:53,610 --> 00:32:56,380
tapi mungkin butuh waktu untuk
kutipan tanda kutip "mulai Apache," yang

731
00:32:56,380 --> 00:32:58,820
adalah nama dari web server.

732
00:32:58,820 --> 00:33:02,430
Jadi hati-hati untuk melakukan hal
apa yang ada di file akhirnya.

733
00:33:02,430 --> 00:33:04,610
Jadi sekarang, saya akan memperbesar.

734
00:33:04,610 --> 00:33:07,780
Jika saya mulai mengetik
open-braket HTML, pemberitahuan

735
00:33:07,780 --> 00:33:09,650
itu mendorong saya untuk menyelesaikan pikiran saya.

736
00:33:09,650 --> 00:33:13,750
Dan jika saya selesai pikiran saya, itu
otomatis memberi saya tag penutup.

737
00:33:13,750 --> 00:33:17,190
Tapi harapan tersebut maka saya akan memukul
Masukkan, dan kemudian bergerak di dalam sana

738
00:33:17,190 --> 00:33:21,180
dan jangan kepala di dalam dan
maka saya melakukan tubuh dalam.

739
00:33:21,180 --> 00:33:24,430
Dan itu sedikit aneh pada awalnya,
karena itu melakukan pekerjaan untuk Anda,

740
00:33:24,430 --> 00:33:27,110
tapi menyadari bahwa pada akhirnya
menghemat keystrokes.

741
00:33:27,110 --> 00:33:30,500
Dan sebenarnya, fitur yang sangat umum
pemrograman lingkungan hari ini

742
00:33:30,500 --> 00:33:33,260
baik untuk pengembangan web seperti
ini dan pemrograman yang sebenarnya,

743
00:33:33,260 --> 00:33:36,960
yang akan kita bicarakan besok,
adalah fitur auto-complete ini,

744
00:33:36,960 --> 00:33:39,710
hal-hal yang hanya memungkinkan
programmer atau desainer

745
00:33:39,710 --> 00:33:42,010
mengetik lebih sedikit keystrokes untuk
mencapai hal yang sama.

746
00:33:42,010 --> 00:33:43,176
Kadang-kadang itu baik, meskipun.

747
00:33:43,176 --> 00:33:44,560
Kadang-kadang itu hanya mengganggu.

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

749
00:33:49,290 --> 00:33:54,010
Dan, sekali lagi, setelah Anda ditranskrip
slide atau beberapa varian daripadanya,

750
00:33:54,010 --> 00:33:57,360
Anda dapat mengklik tombol Run di bagian atas.

751
00:33:57,360 --> 00:33:59,910
Dan kemudian di bagian bawah
jendela, Anda akan diberitahu

752
00:33:59,910 --> 00:34:04,290
apa URL Anda dapat mengunjungi halaman web Anda.

753
00:34:04,290 --> 00:34:08,790
Tambang, misalnya, adalah pada
business-daharvard.c9users.io

754
00:34:08,790 --> 00:34:11,480
dan seterusnya.

755
00:34:11,480 --> 00:34:14,580
Baiklah, jadi, biarkan me-- pertanyaan?

756
00:34:14,580 --> 00:34:19,460
Pertanyaan lain tentang hanya mendapatkan
ini kerja sebelum kita menambahkan fitur?

757
00:34:19,460 --> 00:34:21,692
Dan biarkan aku mengusulkan, hanya
untuk mendapatkan orang-orang comfortable--

758
00:34:21,692 --> 00:34:24,400
karena itu salah satu hal yang hanya
copy-paste membabi buta apa yang saya lakukan.

759
00:34:24,400 --> 00:34:27,177
Tapi hanya supaya orang bergulat
dengan setidaknya satu to-do,

760
00:34:27,177 --> 00:34:28,510
Aku akan menyalakan musik.

761
00:34:28,510 --> 00:34:32,630
Aku akan mengusulkan daftar
hal yang berpotensi dapat menambahkan.

762
00:34:32,630 --> 00:34:34,086
Dan Anda pasti dapat menggunakan Google.

763
00:34:34,086 --> 00:34:36,210
Dan kenapa tidak kita hanya
mengusulkan bahwa Anda mencoba untuk memecahkan

764
00:34:36,210 --> 00:34:38,710
setidaknya satu masalah tertentu di sini.

765
00:34:38,710 --> 00:34:45,090
Jadi dalam hal tag,
biarkan aku menggunakan kembali ini di sini.

766
00:34:45,090 --> 00:34:48,280
>> Sebenarnya, saya menempatkan
dalam bentuk tekstual.

767
00:34:48,280 --> 00:35:02,380
Katakanlah bahwa di antara tag kita mungkin
gunakan di sini adalah beberapa tag di sini.

768
00:35:02,380 --> 00:35:06,090
Kami telah melihat tag paragraf.

769
00:35:06,090 --> 00:35:07,850
Sekarang itu akan auto-complete.

770
00:35:07,850 --> 00:35:12,220
tag paragraf, tag anchor.

771
00:35:12,220 --> 00:35:15,250
Katakanlah Anda ingin
membuat sesuatu yang lebih besar,

772
00:35:15,250 --> 00:35:19,480
sehingga Anda mungkin like--
tag span dapat membantu.

773
00:35:19,480 --> 00:35:23,010
Nah, Anda mungkin perlu bantuan
untuk itu hanya dalam beberapa saat.

774
00:35:23,010 --> 00:35:24,830
Kami telah melihat div.

775
00:35:24,830 --> 00:35:26,170
Anda akan melihat ada meja.

776
00:35:26,170 --> 00:35:27,928
Ada sesuatu yang disebut 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
Kembali ke suatu saat.

780
00:35:34,770 --> 00:35:36,590
Apa lagi yang mungkin berguna?

781
00:35:36,590 --> 00:35:38,310
Ada yang kuat.

782
00:35:38,310 --> 00:35:43,640
Ada penekanan, atau lebih tepatnya em.

783
00:35:43,640 --> 00:35:50,110
There's-- apa lagi
Anda mungkin suka di sini?

784
00:35:50,110 --> 00:35:51,930
Yah, kami akan mengambil
lihat itu bersama-sama.

785
00:35:51,930 --> 00:35:53,230
Bentuk, yang pernah kita lihat.

786
00:35:53,230 --> 00:35:54,130
Ada bentuk.

787
00:35:54,130 --> 00:35:56,500
Ada masukan dan beberapa orang lainnya.

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

789
00:35:58,924 --> 00:36:00,090
Baiklah, jadi mari kita melakukan hal ini.

790
00:36:00,090 --> 00:36:02,330
Untuk menjawab Victoria
pertanyaan, biarkan aku pertama

791
00:36:02,330 --> 00:36:05,020
hanya memastikan bahwa setiap orang
bisa mendapatkan kerja halo mereka.

792
00:36:05,020 --> 00:36:06,900
Lalu biarkan saya memperkenalkan
beberapa ide lain.

793
00:36:06,900 --> 00:36:09,209
Kemudian kita akan membiarkan orang memecahkan
beberapa masalah pada mereka sendiri.

794
00:36:09,209 --> 00:36:11,500
Kemudian kita benar-benar akan kembali
itu gagasan formulir,

795
00:36:11,500 --> 00:36:14,950
dan kami akan benar-benar kembali melaksanakan
bersama-sama antarmuka front-end,

796
00:36:14,950 --> 00:36:16,450
sehingga untuk berbicara, untuk Google sendiri.

797
00:36:16,450 --> 00:36:19,700
Kami akan menggunakan Google sebagai akhir kembali dan membiarkan
mereka melakukan kerja keras, pencarian,

798
00:36:19,700 --> 00:36:22,760
tapi kami akan menciptakan ujung depan
Google dan form pencarian

799
00:36:22,760 --> 00:36:24,520
yang mereka miliki di halaman rumah mereka sendiri.

800
00:36:24,520 --> 00:36:27,050
Dan jadi kita akan kembali ke
tag ini hanya sesaat.

801
00:36:27,050 --> 00:36:30,270
>> Jadi ini adalah apa yang saya
mengusulkan beberapa saat yang lalu.

802
00:36:30,270 --> 00:36:33,940
Kita dapat menambahkan stilisasi yang ke
Halaman dalam tag gaya ini,

803
00:36:33,940 --> 00:36:36,950
dan kami dapat menyesuaikan dgn mode latar belakang
warna, perataan teks,

804
00:36:36,950 --> 00:36:39,000
apakah itu pusat atau kiri atau kanan.

805
00:36:39,000 --> 00:36:41,630
Tapi sangat cepat Anda akan
menemukan atau desainer web

806
00:36:41,630 --> 00:36:44,060
akan menemukan bahwa ini
menjadi sedikit berat,

807
00:36:44,060 --> 00:36:48,330
karena Anda melakukan apa yang
disebut konten pencampuran

808
00:36:48,330 --> 00:36:50,120
dengan presentasi daripadanya.

809
00:36:50,120 --> 00:36:53,756
Anda mencampur data Anda
dan estetika daripadanya.

810
00:36:53,756 --> 00:36:56,380
Dan pada kenyataannya, jika Anda mempertimbangkan
apa yang akan terjadi atas time--

811
00:36:56,380 --> 00:36:58,350
ini adalah sangat kecil
Halaman web, tentu saja.

812
00:36:58,350 --> 00:37:01,590
Tapi jika saya menambahkan konten ke halaman ini
dan saya menambah gaya ke halaman ini,

813
00:37:01,590 --> 00:37:04,650
Halaman sangat cepat mendapat
lagi dan lagi dan lagi.

814
00:37:04,650 --> 00:37:07,510
Dan anggaplah bahwa saya ingin
memiliki halaman web kedua yang

815
00:37:07,510 --> 00:37:09,010
saham beberapa atribut ini.

816
00:37:09,010 --> 00:37:12,350
Misalkan halaman web kedua saya untuk saya
site-- juga, saya ingin pusat segalanya,

817
00:37:12,350 --> 00:37:14,960
dan saya juga ingin semuanya
dengan latar belakang hijau.

818
00:37:14,960 --> 00:37:17,940
Aku cukup banyak akan harus
copy dan paste beberapa baris

819
00:37:17,940 --> 00:37:20,730
ke dalam file kedua, yang terasa baik-baik saja.

820
00:37:20,730 --> 00:37:22,030
Ini akan memecahkan masalah.

821
00:37:22,030 --> 00:37:26,060
>> Tapi bagaimana jika saya ingin halaman ketiga
atau halaman 30 atau halaman 40?

822
00:37:26,060 --> 00:37:28,730
Sekarang aku akan menyalin dan
menyisipkan banyak duplikat kode

823
00:37:28,730 --> 00:37:30,430
dalam beberapa file.

824
00:37:30,430 --> 00:37:32,600
Dan anggaplah bahwa
Saya memutuskan atau aku diberitahu,

825
00:37:32,600 --> 00:37:34,780
hey, kita tidak menggunakan
latar belakang hijau lagi.

826
00:37:34,780 --> 00:37:36,380
Kita akan mulai menggunakan jeruk.

827
00:37:36,380 --> 00:37:38,690
Apa yang Anda harus mengubah?

828
00:37:38,690 --> 00:37:42,900
Nah, Anda harus mengubah gaya yang
dari hijau ke oranye di berapa tempat?

829
00:37:42,900 --> 00:37:44,920
Seperti 30 atau 40 tempat.

830
00:37:44,920 --> 00:37:45,900
Ini membosankan.

831
00:37:45,900 --> 00:37:47,039
Ini rawan kesalahan.

832
00:37:47,039 --> 00:37:49,580
Ada sejumlah alasan
di mana Anda tidak ingin mendorong

833
00:37:49,580 --> 00:37:51,840
bahwa jenis rasa sakit untuk diri sendiri.

834
00:37:51,840 --> 00:37:54,760
Sehingga tidak akan menyenangkan
jika kita bisa mengambil apa yang saya hanya

835
00:37:54,760 --> 00:37:58,240
menempatkan antara dua kuning ini
tag, gaya tag ini,

836
00:37:58,240 --> 00:38:04,050
faktor itu, dan meletakkan semua saya
stilisasi ke dalam satu file sentral

837
00:38:04,050 --> 00:38:08,470
bahwa semua 30 atau 40 file saya yang lain
meminjam dari atau entah bagaimana referensi,

838
00:38:08,470 --> 00:38:11,640
tidak seperti jaringan yang
diagram yang kami lakukan sebelumnya?

839
00:38:11,640 --> 00:38:15,030
>> Jadi jika saya pergi di sini, aku
akan benar-benar mengusulkan

840
00:38:15,030 --> 00:38:17,880
bahwa kita mengganti
tag gaya dengan sesuatu

841
00:38:17,880 --> 00:38:21,620
disebut tag link, yang
adalah mengerikan, mengerikan bernama,

842
00:38:21,620 --> 00:38:24,370
karena Anda tidak menggunakan
tag link untuk membuat apa

843
00:38:24,370 --> 00:38:26,380
kita manusia tahu sebagai link dalam sebuah halaman web.

844
00:38:26,380 --> 00:38:29,750
Untuk itu, Anda gunakan yang tag?

845
00:38:29,750 --> 00:38:31,464
Bagaimana Anda membuat link di halaman web?

846
00:38:31,464 --> 00:38:32,130
AUDIENCE: a.

847
00:38:32,130 --> 00:38:34,870
DAVID J. Malan: a, atau jangkar
tag, yang pergi ke Disney sebelumnya.

848
00:38:34,870 --> 00:38:39,090
Link tag di sini mengatakan
ini-- link ke file yang disebut

849
00:38:39,090 --> 00:38:44,350
styles.css, hubungan yang
akan menjadi bahwa itu stylesheet saya.

850
00:38:44,350 --> 00:38:48,290
Jadi ini adalah salah satu S di
CSS-- cascading style sheet.

851
00:38:48,290 --> 00:38:50,490
Gaya sheet-- dua dari S di CSS.

852
00:38:50,490 --> 00:38:52,550
Lembar bergaya susun.

853
00:38:52,550 --> 00:38:58,640
Ini hanya berarti, hey, browser, pergi
menemukan styles.css di server lokal

854
00:38:58,640 --> 00:39:01,870
dan menggunakannya sebagai stylesheet Anda,
yang berarti dalam file yang

855
00:39:01,870 --> 00:39:05,310
akan menjadi semua
stilisasi yang baru saja kita lakukan.

856
00:39:05,310 --> 00:39:07,396
Dan jadi apa file yang
mungkin terlihat seperti yaitu ini.

857
00:39:07,396 --> 00:39:10,020
Dan aku hanya akan melakukan ini cepat
Misalnya, karena kita tidak perlu

858
00:39:10,020 --> 00:39:12,000
untuk mendapatkan terlalu banyak ke dalam gulma sini.

859
00:39:12,000 --> 00:39:17,840
Tetapi jika saya copy ini, apa yang saya usulkan
adalah bahwa programmer membuat file baru,

860
00:39:17,840 --> 00:39:24,450
tempelkan pada mereka lines--
whoops-- tempelkan di garis,

861
00:39:24,450 --> 00:39:32,270
simpan sebagai styles.css, dan kemudian, di
file lain, menghapus semua itu

862
00:39:32,270 --> 00:39:35,450
dan menggantinya sebaliknya
dengan tag link ini.

863
00:39:35,450 --> 00:39:43,090
Sehingga jika saya menghubungkan href = "styles.css",
hubungan harus "stylesheet"

864
00:39:43,090 --> 00:39:44,170
tag dekat.

865
00:39:44,170 --> 00:39:45,250
Simpan itu.

866
00:39:45,250 --> 00:39:47,000
Kembali ke helloworld saya.

867
00:39:47,000 --> 00:39:48,690
Reload.

868
00:39:48,690 --> 00:39:51,290
>> Secara harfiah tidak ada yang terjadi.

869
00:39:51,290 --> 00:39:54,710
Itu adalah hal yang baik, karena
berarti itu benar-benar semua kerja.

870
00:39:54,710 --> 00:39:58,860
Untuk membuktikan sebagai banyak, kira saya membuat
typo, dan saya menyebutnya "styles.css"

871
00:39:58,860 --> 00:40:03,080
dengan modal S, yang merupakan
tidak benar, dan kemudian kembali.

872
00:40:03,080 --> 00:40:05,470
Sekarang Anda bisa melihat hal itu tidak bekerja.

873
00:40:05,470 --> 00:40:06,362
Sekarang, mengapa?

874
00:40:06,362 --> 00:40:08,070
Nah, mari kita gunakan
Teknik dari sebelumnya.

875
00:40:08,070 --> 00:40:10,153
Biarkan aku pergi ke depan dan, di
browser saya, di Chrome, aku

876
00:40:10,153 --> 00:40:12,900
akan membuka yang khusus
tab jaringan seperti sebelumnya,

877
00:40:12,900 --> 00:40:15,560
dan biarkan aku kembali halaman tersebut.

878
00:40:15,560 --> 00:40:19,341
Apa yang Anda tidak terkejut melihat sekarang?

879
00:40:19,341 --> 00:40:20,840
Atau mungkin Anda terkejut melihatnya.

880
00:40:20,840 --> 00:40:23,225
Either way, apa yang Anda lihat sekarang?

881
00:40:23,225 --> 00:40:24,100
AUDIENCE: [tidak terdengar]

882
00:40:24,100 --> 00:40:24,770
DAVID J. Malan: Ini tidak ditemukan.

883
00:40:24,770 --> 00:40:25,680
Mengapa tidak ditemukan?

884
00:40:25,680 --> 00:40:28,480
Nah, modal Styles.css--
S-- tidak ada.

885
00:40:28,480 --> 00:40:29,230
Saya misnamed itu.

886
00:40:29,230 --> 00:40:30,430
ketik sederhana.

887
00:40:30,430 --> 00:40:33,816
Tapi aku mendapatkan dimengerti sekarang
404, karena server mengatakan, hei,

888
00:40:33,816 --> 00:40:34,440
itu tidak ditemukan.

889
00:40:34,440 --> 00:40:36,300
Secara harfiah, saya tidak tahu
di mana file yang.

890
00:40:36,300 --> 00:40:38,880
Jadi sebagai hasilnya, browser
menunjukkan apa yang bisa,

891
00:40:38,880 --> 00:40:42,860
isi baku halaman,
yang merupakan 200, HTML,

892
00:40:42,860 --> 00:40:45,390
tapi stilisasi yang tidak bisa
ditambahkan setelahnya.

893
00:40:45,390 --> 00:40:47,120
Dan ini adalah apa yang dimaksud dengan Cascading.

894
00:40:47,120 --> 00:40:49,070
Anda dapat semacam menambahkannya
setelah, dan itu semacam

895
00:40:49,070 --> 00:40:50,874
memurnikan estetika halaman web.

896
00:40:50,874 --> 00:40:53,790
Dan Anda bahkan dapat menimpa mereka
gaya dengan file stylesheet belum lainnya

897
00:40:53,790 --> 00:40:54,700
jika kamu mau.

898
00:40:54,700 --> 00:40:57,780
Itu tidak ditemukan, meskipun, dalam hal ini,
karena tentu saja, saya misnamed itu.

899
00:40:57,780 --> 00:41:00,330
Jadi saya harus memperbaikinya dulu.

900
00:41:00,330 --> 00:41:04,667
>> Jadi mari kita pergi ke depan dan
mengusulkan berikut.

901
00:41:04,667 --> 00:41:07,410

902
00:41:07,410 --> 00:41:11,140
Mari kita pergi ke depan dan melakukan hal ini.

903
00:41:11,140 --> 00:41:14,220
Dimulai dengan mungkin
File helloworld Anda,

904
00:41:14,220 --> 00:41:17,740
saya hanya mengundang pasangan
dari fitur saran.

905
00:41:17,740 --> 00:41:20,400
Jadi, Victoria, Anda ingin
membuat beberapa teks lebih besar, kan?

906
00:41:20,400 --> 00:41:24,555
Baiklah, jadi kita bisa
jangan membuat teks lebih besar.

907
00:41:24,555 --> 00:41:26,860
Dan kami akan setiap memetik off
hanya satu masalah untuk memecahkan.

908
00:41:26,860 --> 00:41:30,867
Membuat teks lebih besar.

909
00:41:30,867 --> 00:41:32,700
Aku tidak akan repot-repot
menulis ini ketika kita

910
00:41:32,700 --> 00:41:35,600
memiliki teknologi peluru tepat di sini.

911
00:41:35,600 --> 00:41:39,970
Jadi beberapa masalah.

912
00:41:39,970 --> 00:41:44,670
Jadi kita akan mencoba
untuk membuat teks lebih besar.

913
00:41:44,670 --> 00:41:45,170
Baiklah.

914
00:41:45,170 --> 00:41:48,360
Apa lagi yang akan seseorang mengusulkan?

915
00:41:48,360 --> 00:41:50,332
Apa lagi yang kita inginkan
dilakukan di halaman web?

916
00:41:50,332 --> 00:41:52,040
Mari kita datang dengan
daftar singkat dari hal-hal

917
00:41:52,040 --> 00:41:55,366
dan kemudian mendelegasikan ke
kelompok untuk memikirkan hal ini.

918
00:41:55,366 --> 00:41:56,270
>> AUDIENCE: [tidak terdengar]

919
00:41:56,270 --> 00:42:02,251
>> DAVID J. Malan: OK, teks posisi
pada sisi yang berbeda dari halaman?

920
00:42:02,251 --> 00:42:02,750
Baiklah.

921
00:42:02,750 --> 00:42:04,620
Sesuatu yang lain.

922
00:42:04,620 --> 00:42:05,784
>> AUDIENCE: [tidak terdengar]

923
00:42:05,784 --> 00:42:06,700
DAVID J. Malan: Ini adalah.

924
00:42:06,700 --> 00:42:08,720
Jadi gif hanyalah sebuah
format file yang berbeda.

925
00:42:08,720 --> 00:42:12,830
Kami hanya menggunakan, apa, yang
png atau jpg mungkin?

926
00:42:12,830 --> 00:42:14,480
Kami menggunakan jpg.

927
00:42:14,480 --> 00:42:16,780
Jika Anda penasaran, suatu yang berlebihan
menjawab pertanyaan Anda

928
00:42:16,780 --> 00:42:19,404
adalah jpg umumnya digunakan untuk
foto, karena mendukung

929
00:42:19,404 --> 00:42:21,500
jutaan warna atau warna 24-bit.

930
00:42:21,500 --> 00:42:26,930
Sebuah gif umumnya digunakan untuk, seperti,
meme internet ini animasi days--,

931
00:42:26,930 --> 00:42:28,810
seperti gifs animasi.

932
00:42:28,810 --> 00:42:32,320
Tapi itu terjadi untuk menggunakan warna yang lebih kecil
palet, hanya 256 mungkin warna,

933
00:42:32,320 --> 00:42:35,230
tapi mendukung
transparansi dan animasi.

934
00:42:35,230 --> 00:42:40,330
Dan kemudian ada png, yang mendukung
transparansi dan warna yang lebih

935
00:42:40,330 --> 00:42:41,300
tapi tidak animasi.

936
00:42:41,300 --> 00:42:42,133
Jadi itu adalah trade-off.

937
00:42:42,133 --> 00:42:44,144

938
00:42:44,144 --> 00:42:46,060
Jadi menambahkan gif, meskipun,
akan fungsional

939
00:42:46,060 --> 00:42:48,396
setara dengan menambahkan png atau jpg.

940
00:42:48,396 --> 00:42:49,110
Ya.

941
00:42:49,110 --> 00:42:50,550
sumber gambar sama.

942
00:42:50,550 --> 00:42:51,590
Jadi sesuatu yang lain.

943
00:42:51,590 --> 00:42:57,288
Mari kita datang dengan sesuatu yang
kami dikirim ke Victoria untuk dilakukan di sini.

944
00:42:57,288 --> 00:42:59,209
>> AUDIENCE: Tambahkan tombol untuk formulir.

945
00:42:59,209 --> 00:43:00,000
DAVID J. Malan: OK.

946
00:43:00,000 --> 00:43:02,179
Jadi menambahkan tombol untuk formulir.

947
00:43:02,179 --> 00:43:03,470
Dan kami akan melakukan yang bersama-sama.

948
00:43:03,470 --> 00:43:07,220
Sehingga akan menjadi Shalawat sempurna
tepat setelah tantangan ini.

949
00:43:07,220 --> 00:43:10,357
Ada yang lain?

950
00:43:10,357 --> 00:43:11,440
Apa yang mungkin Anda lakukan?

951
00:43:11,440 --> 00:43:14,040

952
00:43:14,040 --> 00:43:16,516
web terasa sangat underwhelming
jika ini adalah semua yang bisa kita lakukan.

953
00:43:16,516 --> 00:43:18,140
AUDIENCE: Mengubah warna teks.

954
00:43:18,140 --> 00:43:19,500
DAVID J. Malan: Mengubah apa?

955
00:43:19,500 --> 00:43:20,666
AUDIENCE: Warna teks.

956
00:43:20,666 --> 00:43:22,311
DAVID J. Malan: Perubahan warna teks.

957
00:43:22,311 --> 00:43:22,810
Baiklah.

958
00:43:22,810 --> 00:43:23,790
Jadi, mari kita lakukan ini.

959
00:43:23,790 --> 00:43:27,209
Hanya lagi sehingga Anda tidak, hanya
di luar kepala, melakukan persis apa yang saya lakukan,

960
00:43:27,209 --> 00:43:29,500
Aku akan menyalakan musik
untuk mungkin lima menit di sini.

961
00:43:29,500 --> 00:43:30,450
Anda dipersilakan untuk menggunakan Google.

962
00:43:30,450 --> 00:43:33,130
Anda dipersilakan untuk bertanya kepada saya, dan
Aku akan berbisik petunjuk di telinga Anda.

963
00:43:33,130 --> 00:43:35,171
Anda dipersilakan untuk melihat
lebih pada bahu lain.

964
00:43:35,171 --> 00:43:37,340
Tapi memecahkan salah satu masalah ini.

965
00:43:37,340 --> 00:43:40,190
Tapi kami akan melakukan yang terakhir,
membentuk satu, jika kita bisa, bersama-sama.

966
00:43:40,190 --> 00:43:42,790
Jadi lima menit untuk memecahkan
salah satu dari masalah ini

967
00:43:42,790 --> 00:43:46,780
menggunakan Google, intuisi, atau
cara lain yang tersedia untuk Anda.

968
00:43:46,780 --> 00:43:48,630
>> [MUSIC PLAYING]

969
00:43:48,630 --> 00:43:49,130
Baiklah.

970
00:43:49,130 --> 00:43:50,838
Jangan khawatir jika Anda ingin
untuk menjaga bermain-main,

971
00:43:50,838 --> 00:43:53,880
tapi aku akan merusak pasangan
jawaban ini.

972
00:43:53,880 --> 00:43:57,986
Jadi saran pertama dari
Victoria adalah untuk membuat teks lebih besar.

973
00:43:57,986 --> 00:43:59,360
Jadi ada beberapa cara untuk melakukan hal ini.

974
00:43:59,360 --> 00:44:01,530
Aku saat ini dipulihkan
layar saya untuk ukuran ini,

975
00:44:01,530 --> 00:44:04,310
meskipun aku sudah diperbesar
artifisial hanya untuk melihat hal-hal.

976
00:44:04,310 --> 00:44:07,470
Dan mari kita lakukan ini.

977
00:44:07,470 --> 00:44:11,380
Biarkan aku pergi ke depan dan ambil
beberapa teks Latin generik

978
00:44:11,380 --> 00:44:19,540
hanya supaya kita memiliki sesuatu untuk bekerja dengan.

979
00:44:19,540 --> 00:44:20,715
Jadi beri aku satu saat.

980
00:44:20,715 --> 00:44:21,840
Aku akan membuat tiga paragraf.

981
00:44:21,840 --> 00:44:53,430

982
00:44:53,430 --> 00:44:53,930
BAIK.

983
00:44:53,930 --> 00:44:55,560
Ini akan menjadi contoh yang lebih baik.

984
00:44:55,560 --> 00:44:57,840
Jadi bagi yang penasaran, di
hello.html saya, saya hanya

985
00:44:57,840 --> 00:45:01,645
disisipkan tiga masuk akal
paragraf latin

986
00:45:01,645 --> 00:45:03,270
hanya supaya kita memiliki beberapa teks untuk bekerja dengan.

987
00:45:03,270 --> 00:45:06,720
Dan tujuan Victoria adalah untuk
membuat beberapa teks lebih besar.

988
00:45:06,720 --> 00:45:09,879
Jadi saya bisa, seperti sebelumnya, pergi di sini.

989
00:45:09,879 --> 00:45:11,170
Dan biarkan aku melakukannya dengan cara yang benar.

990
00:45:11,170 --> 00:45:13,253
Aku akan memiliki link
tag yang menunjuk ke file

991
00:45:13,253 --> 00:45:20,560
disebut "styles.css," hubungan
dari yang lagi "stylesheet."

992
00:45:20,560 --> 00:45:25,221
Dan kemudian aku akan menyimpan yang
dan membuka ini "styles.css."

993
00:45:25,221 --> 00:45:28,940
>> Jadi, seperti sebelumnya, saya memiliki
kemampuan dalam file CSS ini

994
00:45:28,940 --> 00:45:31,569
untuk benar-benar menimpa default
estetika dari halaman web,

995
00:45:31,569 --> 00:45:33,860
dan estetika default,
tentu saja, cukup membosankan.

996
00:45:33,860 --> 00:45:36,943
Ini semacam ukuran font normal, hitam
teks, latar belakang putih, dan sebagainya.

997
00:45:36,943 --> 00:45:39,440
Jadi misalkan saya ingin membuat
semua teks ini lebih besar.

998
00:45:39,440 --> 00:45:40,460
Aku bisa melakukan beberapa hal.

999
00:45:40,460 --> 00:45:43,750
Dalam file styles.css saya, saya
bisa mengatakan, Anda tahu apa,

1000
00:45:43,750 --> 00:45:46,950
menerapkan berikut untuk
tubuh halaman saya.

1001
00:45:46,950 --> 00:45:51,390
Pergi ke depan dan membuat
ukuran font 24 poin,

1002
00:45:51,390 --> 00:45:54,130
yang merupakan nomor saya mungkin
digunakan dalam Microsoft Word.

1003
00:45:54,130 --> 00:45:57,620
Biarkan aku kembali ke web saya
Halaman sini dan kembali,

1004
00:45:57,620 --> 00:45:59,640
dan Anda dapat melihat bahwa
itu sudah jauh lebih besar.

1005
00:45:59,640 --> 00:46:02,223
Dan kita bisa mendapatkan sedikit gila,
seperti yang kita dapat pada desktop-- sebuah

1006
00:46:02,223 --> 00:46:03,670
membuat 96 poin.

1007
00:46:03,670 --> 00:46:04,950
Reload.

1008
00:46:04,950 --> 00:46:07,610
Dan itu semakin sedikit
berat pada saat ini.

1009
00:46:07,610 --> 00:46:09,500
>> Tapi aku bisa sedikit lebih tepat.

1010
00:46:09,500 --> 00:46:14,530
Alih-alih menerapkan ini
stylesheet ke tubuh halaman saya,

1011
00:46:14,530 --> 00:46:21,740
apa lagi yang mungkin saya menerapkannya ke sebaliknya,
apa tag lain yang mungkin masih

1012
00:46:21,740 --> 00:46:25,445
fungsi dalam cara yang sama?

1013
00:46:25,445 --> 00:46:26,444
>> AUDIENCE: The p tag?

1014
00:46:26,444 --> 00:46:27,360
DAVID J. Malan: tag P.

1015
00:46:27,360 --> 00:46:29,350
Jadi kepala tidak akan
benar, karena kepala,

1016
00:46:29,350 --> 00:46:31,300
Anda tidak dapat benar-benar
mengontrol estetika.

1017
00:46:31,300 --> 00:46:32,700
Ada baik teks ada atau tidak.

1018
00:46:32,700 --> 00:46:36,760
Tapi p tag-- saya dapat menyelam dalam sedikit
lebih dalam, sehingga untuk berbicara, untuk paragraf

1019
00:46:36,760 --> 00:46:37,350
tag.

1020
00:46:37,350 --> 00:46:41,600
Dan meskipun ada tiga,
itu baik-baik saja, karena dalam CSS,

1021
00:46:41,600 --> 00:46:44,900
ketika saya hanya mengatakan "p," ini
berarti menerapkan berikut

1022
00:46:44,900 --> 00:46:48,300
untuk setiap tag yang cocok ini
pemilih, pemilih hanya

1023
00:46:48,300 --> 00:46:49,430
menjadi nama tag.

1024
00:46:49,430 --> 00:46:52,350
Jadi di mana pun Anda melihat
"P," menerapkan ukuran font,

1025
00:46:52,350 --> 00:46:55,222
dan mari kita membuatnya lebih
wajar again-- 24 titik.

1026
00:46:55,222 --> 00:46:56,930
Dan kau tahu apa,
hanya untuk mengukur baik,

1027
00:46:56,930 --> 00:46:59,810
mari kita membuat warna
hanya merah untuk saat ini.

1028
00:46:59,810 --> 00:47:03,740
Dan jika saya reload, sekarang kita
melihat tiga paragraf jelek.

1029
00:47:03,740 --> 00:47:07,180
>> Tapi sekarang anggaplah bahwa aku semacam
of-- Saya ingin paragraf pertama

1030
00:47:07,180 --> 00:47:08,210
untuk melompat keluar pada pengguna.

1031
00:47:08,210 --> 00:47:11,150
Saya tidak ingin hanya meningkatkan
ukuran font dari segala sesuatu.

1032
00:47:11,150 --> 00:47:16,105
Dan jadi saya benar-benar ingin mengidentifikasi atau
membedakan antara paragraf tersebut.

1033
00:47:16,105 --> 00:47:18,730
Jadi mari kita menyingkirkan merah,
karena itu hanya jenis norak,

1034
00:47:18,730 --> 00:47:23,885
dan mari kita pergi ke depan dan membuat
ukuran font 12-point secara default,

1035
00:47:23,885 --> 00:47:26,260
sehingga kita kembali ke sesuatu
sedikit lebih masuk akal.

1036
00:47:26,260 --> 00:47:29,190
Dan sekarang saya hanya ingin meningkatkan
ukuran font dari paragraf pertama.

1037
00:47:29,190 --> 00:47:31,440
Aku bisa melakukan ini dalam beberapa
cara, tapi salah satu cara yang

1038
00:47:31,440 --> 00:47:37,180
mungkin yang paling instruksional di
saat ini untuk melakukan hal berikut.

1039
00:47:37,180 --> 00:47:43,280
Biarkan aku pergi ke depan dan berkata, ini
paragraf memiliki ID unik "pertama."

1040
00:47:43,280 --> 00:47:45,000
Aku bisa menelepon apa ini yang saya inginkan.

1041
00:47:45,000 --> 00:47:46,874
Saya bisa menyebutnya "foo"
atau kata lainnya,

1042
00:47:46,874 --> 00:47:49,290
tapi aku akan memberikan beberapa
Nama semantik bermakna

1043
00:47:49,290 --> 00:47:50,320
seperti "pertama."

1044
00:47:50,320 --> 00:47:54,790
Ini adalah pengenal unik,
ID, untuk paragraf pertama saya.

1045
00:47:54,790 --> 00:47:59,360
>> Apa yang bisa saya lakukan sekarang di stylesheet saya
adalah sedikit lebih tepat.

1046
00:47:59,360 --> 00:48:02,330
Alih-alih mengatakan, berlaku
berikut dengan tag p,

1047
00:48:02,330 --> 00:48:04,890
Saya dapat mengatakan following--
berlaku berikut ini,

1048
00:48:04,890 --> 00:48:11,000
atau pilih, elemen HTML
yang memiliki ID unik "pertama."

1049
00:48:11,000 --> 00:48:12,350
Apa yang saya ingin berlaku untuk itu?

1050
00:48:12,350 --> 00:48:15,250
Sebuah ukuran 24-point.

1051
00:48:15,250 --> 00:48:16,640
Jadi saya memiliki dua penyeleksi sekarang.

1052
00:48:16,640 --> 00:48:19,690
Salah satu yang membuat semua
paragraf 12-point.

1053
00:48:19,690 --> 00:48:24,960
Tapi yang satu ini, terutama karena datang
second-- datang terakhir di file-- yang

1054
00:48:24,960 --> 00:48:27,090
ini memiliki efek cascading.

1055
00:48:27,090 --> 00:48:30,200
Saya baru saja membuat semua saya
tag paragraf 12-point,

1056
00:48:30,200 --> 00:48:34,350
tapi ini sekarang terjun dan
mengabaikan bahwa untuk setiap elemen

1057
00:48:34,350 --> 00:48:38,800
di halaman, setiap tag di halaman yang
ID unik adalah kutipan tanda kutip "pertama."

1058
00:48:38,800 --> 00:48:41,720
Dan hashtag dalam konteks ini
hanya berarti "identifier unik."

1059
00:48:41,720 --> 00:48:43,750
Saya tidak memasukkannya ke dalam file HTML.

1060
00:48:43,750 --> 00:48:46,880
Aku, di sini, hanya mengatakan
quote tanda kutip "pertama."

1061
00:48:46,880 --> 00:48:48,470
>> Jadi biar ulang.

1062
00:48:48,470 --> 00:48:49,919
Dan sekarang saya melihat, ah, OK.

1063
00:48:49,919 --> 00:48:51,710
Maksudku, bukan itu
cantik, tapi agak

1064
00:48:51,710 --> 00:48:53,600
seperti kata pengantar untuk
buku atau sesuatu seperti itu,

1065
00:48:53,600 --> 00:48:55,100
mana paragraf pertama lebih besar.

1066
00:48:55,100 --> 00:48:57,933
Bisa lebih tepat dengan
hanya huruf pertama, tapi setidaknya

1067
00:48:57,933 --> 00:48:59,110
Aku sudah dilaksanakan lebih banyak kontrol.

1068
00:48:59,110 --> 00:49:04,760
Sekarang maybe-- mungkin aku ingin melakukan ini
kadang-kadang untuk alasan apapun,

1069
00:49:04,760 --> 00:49:09,010
dan jadi saya tidak ingin ini
berlaku untuk hanya satu tag HTML.

1070
00:49:09,010 --> 00:49:15,110
Sebaliknya, mari kita say-- mari
juga melakukan hal berikut.

1071
00:49:15,110 --> 00:49:18,810
Class = "impor."

1072
00:49:18,810 --> 00:49:23,970
Sedangkan ID digunakan untuk unik
mengidentifikasi satu hal, satu tag,

1073
00:49:23,970 --> 00:49:30,190
di halaman web Anda, kelas ini dimaksudkan untuk menjadi
digunakan pada sejumlah elemen atau tag

1074
00:49:30,190 --> 00:49:30,950
pada halaman web Anda.

1075
00:49:30,950 --> 00:49:31,710
Jadi itu dapat digunakan kembali.

1076
00:49:31,710 --> 00:49:33,090
ID tidak dapat digunakan kembali.

1077
00:49:33,090 --> 00:49:34,450
Sebuah kelas dapat digunakan kembali.

1078
00:49:34,450 --> 00:49:37,830
>> Dan kau tahu apa, untuk apa pun
reasons-- filosofis

1079
00:49:37,830 --> 00:49:40,180
Aku tidak menyelesaikan saya
thought-- Aku akan mengatakan

1080
00:49:40,180 --> 00:49:44,300
bahwa paragraf pertama dan
paragraf kedua yang penting.

1081
00:49:44,300 --> 00:49:48,600
Jadi aku akan menerapkan kelas yang disebut
"Penting," bahwa, jika saya menyimpan file saya

1082
00:49:48,600 --> 00:49:51,510
dan kembali, tidak memiliki
dampak fungsional belum.

1083
00:49:51,510 --> 00:49:53,780
Tapi aku telah menambahkan beberapa
metadata untuk file,

1084
00:49:53,780 --> 00:49:56,610
semacam sesuatu yang terpisah
dari data inti file,

1085
00:49:56,610 --> 00:50:02,300
sehingga sekarang di stylesheet saya, jika saya
bukannya mengatakan ".important" - Anda tahu,

1086
00:50:02,300 --> 00:50:07,110
sesuatu yang penting, aku
akan membuat font-warna, red--

1087
00:50:07,110 --> 00:50:09,930
atau lebih tepatnya tidak font yang warna, hanya warna.

1088
00:50:09,930 --> 00:50:12,930
Ada inkonsistensi
di CSS sayangnya.

1089
00:50:12,930 --> 00:50:14,120
Dan reload.

1090
00:50:14,120 --> 00:50:17,640
Sekarang perhatikan pertama
dua paragraf merah

1091
00:50:17,640 --> 00:50:20,880
tapi tidak ketiga, karena saya hanya
menerapkan kelas "penting"

1092
00:50:20,880 --> 00:50:25,020
untuk dua pertama dari hal-hal.

1093
00:50:25,020 --> 00:50:28,030
>> Jadi di ID, Anda memiliki kemampuan
untuk menentukan sangat tepat.

1094
00:50:28,030 --> 00:50:30,110
Dengan kelas, Anda memiliki usabilitas.

1095
00:50:30,110 --> 00:50:33,800
Tetapi dalam kedua kasus, perhatikan
semacam prinsip yang baik-desain

1096
00:50:33,800 --> 00:50:39,072
di mana saya keluar faktor semua
estetika ke file styles.css saya.

1097
00:50:39,072 --> 00:50:40,280
Jadi tidak ada kekacauan di sini.

1098
00:50:40,280 --> 00:50:44,490
Tidak ada menyebutkan merah atau
berani menghadap atau ukuran font dalam file ini.

1099
00:50:44,490 --> 00:50:49,430
Sebaliknya Saya memiliki semantik,
arti ditandai data saya sebagai,

1100
00:50:49,430 --> 00:50:51,240
di sini adalah beberapa data penting.

1101
00:50:51,240 --> 00:50:52,800
Berikut adalah beberapa data lebih penting.

1102
00:50:52,800 --> 00:50:56,500
Selain itu, di sini adalah
"Pertama" dari data penting saya.

1103
00:50:56,500 --> 00:51:01,050
Jadi HTML adalah semua tentang semacam
penandaan, secara harfiah, kata

1104
00:51:01,050 --> 00:51:05,270
dan paragraf dan konstruksi di Anda
Halaman dengan petunjuk ini sedikit, jika Anda

1105
00:51:05,270 --> 00:51:07,640
akan, bahwa Anda dapat
entah bagaimana memanfaatkan menggunakan

1106
00:51:07,640 --> 00:51:10,880
teknik lain seperti CSS dengan cara ini.

1107
00:51:10,880 --> 00:51:14,760
>> Jadi dalam menjawab pertanyaan Victoria,
kita dapat membuat teks lebih besar dengan cara itu.

1108
00:51:14,760 --> 00:51:18,380
Ada begitu banyak cara lain, tapi
font tag-- terbuka braket "Font" -

1109
00:51:18,380 --> 00:51:19,770
sebenarnya beberapa tahun.

1110
00:51:19,770 --> 00:51:21,410
Dan ini adalah masalah,
juga, dengan hanya mengandalkan

1111
00:51:21,410 --> 00:51:23,485
pada resources-- secara online
mereka cenderung menjadi usang.

1112
00:51:23,485 --> 00:51:26,110
Dan memang, yang sudah tidak digunakan lagi,
karena dunia menyadari,

1113
00:51:26,110 --> 00:51:28,970
apa "font-size = 7" berarti?

1114
00:51:28,970 --> 00:51:29,670
Tidak.

1115
00:51:29,670 --> 00:51:32,770
Dan selama bertahun-tahun dan untuk
ini day-- salah sisi

1116
00:51:32,770 --> 00:51:36,060
mencatat di sini adalah bahwa sebenarnya
sangat menyakitkan masih kadang-kadang

1117
00:51:36,060 --> 00:51:38,900
untuk mengembangkan situs untuk
web, karena Microsoft

1118
00:51:38,900 --> 00:51:44,220
dan Google dan Mozilla dan
orang lain sering tidak setuju bagaimana

1119
00:51:44,220 --> 00:51:47,480
menafsirkan spesifikasi seperti HTML.

1120
00:51:47,480 --> 00:51:52,490
>> Ada buku aturan untuk HTML yang
umumnya mengatakan apa artinya setiap tag.

1121
00:51:52,490 --> 00:51:55,690
Tapi kadang-kadang itu diserahkan kepada
kebijaksanaan pelaksanaan ini,

1122
00:51:55,690 --> 00:51:57,290
kebijaksanaan Microsoft dan Google.

1123
00:51:57,290 --> 00:52:00,000
Dan begitu Anda akan sangat sering
melihat pada sesuatu situs

1124
00:52:00,000 --> 00:52:04,954
terlihat berbeda pada PC
daripada yang dilakukannya pada Mac,

1125
00:52:04,954 --> 00:52:06,995
dan itu benar-benar karena,
pada akhir hari,

1126
00:52:06,995 --> 00:52:08,891
mereka tidak mengujinya
baik pada kedua platform.

1127
00:52:08,891 --> 00:52:11,390
Tapi itu juga karena wajar,
orang pintar akan tidak setuju

1128
00:52:11,390 --> 00:52:14,970
dan perusahaan akan setuju, dan sebagainya
salah satu tantangan pemrograman

1129
00:52:14,970 --> 00:52:16,980
untuk web atau merancang
hal untuk web

1130
00:52:16,980 --> 00:52:21,700
menulis situs web Anda dengan cara
yang bekerja pada setiap web browser.

1131
00:52:21,700 --> 00:52:23,410
Tetapi bahkan itu tidak masuk akal, kan?

1132
00:52:23,410 --> 00:52:27,807
Ada begitu banyak versi begitu banyak
browser di luar sana yang, di beberapa titik,

1133
00:52:27,807 --> 00:52:30,890
Anda juga harus membuat panggilan penilaian
dan Anda harus memutuskan sebagai perusahaan,

1134
00:52:30,890 --> 00:52:33,082
terutama untuk e-commerce-gaya
situs mana Anda

1135
00:52:33,082 --> 00:52:36,290
mencoba untuk menggunakan terbaru dan terbesar
teknologi untuk memberikan pengguna benar-benar baik

1136
00:52:36,290 --> 00:52:37,110
pengalaman.

1137
00:52:37,110 --> 00:52:41,019
Tetapi beberapa persentase pengguna Anda mungkin
masih menggunakan Internet Explorer 6 atau 7

1138
00:52:41,019 --> 00:52:43,810
atau 8, terutama tergantung pada
negara yang mereka berasal.

1139
00:52:43,810 --> 00:52:46,760
>> Dan sangat umum
berkonsultasi adalah sesuatu

1140
00:52:46,760 --> 00:52:50,920
seperti "statistik web browser."

1141
00:52:50,920 --> 00:52:56,560
Dan jika kita pergi to-- mari kita lihat Wikipedia
dan melihat bagaimana up-to-date grafik ini

1142
00:52:56,560 --> 00:52:59,320
jika ada satu.

1143
00:52:59,320 --> 00:53:02,420
Jadi di sini Anda bisa melihat
di mana browser sebenarnya

1144
00:53:02,420 --> 00:53:06,160
yang, menurut Desember 2015,
menurut Pemerintah AS.

1145
00:53:06,160 --> 00:53:11,170
Chrome adalah di pangsa pasar 42%, diikuti
oleh IE sebagian besar dalam pengaturan perusahaan

1146
00:53:11,170 --> 00:53:14,490
atau pengaturan PC, tentu saja,
diikuti oleh Firefox,

1147
00:53:14,490 --> 00:53:17,440
kemudian Safari, maka Opera tidak
membuat peta di sini untuk beberapa alasan,

1148
00:53:17,440 --> 00:53:18,210
dan kemudian Lainnya.

1149
00:53:18,210 --> 00:53:19,500
Mungkin di bawah Lainnya.

1150
00:53:19,500 --> 00:53:27,700
Tapi lebih bermasalah dari itu is--
mari kita lihat apakah Wikipedia juga memiliki

1151
00:53:27,700 --> 00:53:35,194
versi browser version--

1152
00:53:35,194 --> 00:53:36,160

1153
00:53:36,160 --> 00:53:39,190
>> Mari kita pergi ke statistik browser.

1154
00:53:39,190 --> 00:53:40,680
YAITU.

1155
00:53:40,680 --> 00:53:42,030
Bahkan itu tidak cukup.

1156
00:53:42,030 --> 00:53:44,854
statistik browser.

1157
00:53:44,854 --> 00:53:45,353
versi saya.

1158
00:53:45,353 --> 00:53:48,980

1159
00:53:48,980 --> 00:53:50,540
Itu tidak akan menjadi benar.

1160
00:53:50,540 --> 00:53:53,414
Mari kita lihat versi.

1161
00:53:53,414 --> 00:53:54,830
pangsa pasar browser.

1162
00:53:54,830 --> 00:53:57,110
Mari kita lihat apakah ini muncul.

1163
00:53:57,110 --> 00:53:57,610
BAIK.

1164
00:53:57,610 --> 00:54:00,010
Sekarang ini semakin
sedikit lebih berguna.

1165
00:54:00,010 --> 00:54:04,870
Jadi di sini, melihat bahwa kita memiliki semua
versi yang berbeda dari browser.

1166
00:54:04,870 --> 00:54:09,887
Dan, Tuhan, jika Anda look-- Chrome
48, Chrome 47, Chrome 31, Chrome 45.

1167
00:54:09,887 --> 00:54:12,970
Maksudku, browser semakin diperbarui,
dan kadang-kadang beberapa dari perubahan itu

1168
00:54:12,970 --> 00:54:16,430
yang signifikan dalam
hal fungsi.

1169
00:54:16,430 --> 00:54:20,630
Dan di beberapa titik, yang
manajer produk atau insinyur

1170
00:54:20,630 --> 00:54:23,620
perlu membuat decision-- kamu
tahu apa, hanya 1% dari dunia

1171
00:54:23,620 --> 00:54:24,740
masih menggunakan IE 7.

1172
00:54:24,740 --> 00:54:25,490
Persetan dengan mereka.

1173
00:54:25,490 --> 00:54:27,470
Kami hanya tidak akan
mendukung browser.

1174
00:54:27,470 --> 00:54:28,740
Dan apa artinya untuk tidak mendukung?

1175
00:54:28,740 --> 00:54:31,170
Ini mungkin berarti bahwa tombol
tidak bekerja pada halaman web Anda,

1176
00:54:31,170 --> 00:54:33,050
atau mungkin berarti
format benar-benar off.

1177
00:54:33,050 --> 00:54:35,091
Atau Anda mungkin harus membuat
bahwa panggilan pengadilan yang sama

1178
00:54:35,091 --> 00:54:39,089
di ponsel hari ini, di mana, kami
tidak akan mendukung iOS 5 lagi.

1179
00:54:39,089 --> 00:54:40,380
Jadi orang hanya perlu meng-upgrade.

1180
00:54:40,380 --> 00:54:45,850
Atau kita tidak akan mendukung Cupcake
pada OS Android untuk perangkat Android,

1181
00:54:45,850 --> 00:54:48,629
karena sebagai dunia-- sebagai
dunia teknologi ingin bergerak maju,

1182
00:54:48,629 --> 00:54:51,170
itu jenis ingin menyeret
dunia dengan itu sehingga mereka tidak

1183
00:54:51,170 --> 00:54:53,295
harus terus menjadi
kompatibel sehingga mereka

1184
00:54:53,295 --> 00:54:54,920
dapat menawarkan fitur-fitur baru dan baik.

1185
00:54:54,920 --> 00:54:57,878
Ini memang salah satu alasan
mengapa begitu banyak perusahaan yang menggelar

1186
00:54:57,878 --> 00:55:01,440
update otomatis dan semacam memaksa
versi terbaru dari perangkat lunak pada kami.

1187
00:55:01,440 --> 00:55:04,010
Dan bahkan perusahaan
seperti Apple akan mengurutkan dari

1188
00:55:04,010 --> 00:55:07,280
memaksa Anda hampir atau memaksa
Anda dalam hal kekuatan pasar

1189
00:55:07,280 --> 00:55:11,164
untuk membeli ponsel baru karena mereka hanya
tidak akan memperbarui ponsel lama Anda lagi.

1190
00:55:11,164 --> 00:55:13,330
Jadi Anda lewatkan pada
terbaru dan fitur terbesar,

1191
00:55:13,330 --> 00:55:17,520
karena itu mahal untuk mereka sebagai
perusahaan untuk mempertahankan lebih tua, bisa dibilang

1192
00:55:17,520 --> 00:55:19,330
versi lebih rendah dari software.

1193
00:55:19,330 --> 00:55:23,660
Tapi efek bersih adalah bahwa
kami juga menderita ini juga.

1194
00:55:23,660 --> 00:55:26,550
>> Jadi mari kita lihat hanya
beberapa hal akhir sini.

1195
00:55:26,550 --> 00:55:29,740
Mari knock off sangat cepat beberapa
mereka peluru lain, jika penasaran.

1196
00:55:29,740 --> 00:55:33,440
Jadi, jika Anda mencoba untuk,
misalnya, posisi

1197
00:55:33,440 --> 00:55:36,420
teks pada sisi yang berbeda dari
Halaman, aku akan melakukan satu cara cepat,

1198
00:55:36,420 --> 00:55:38,360
tapi ada yang berbeda
cara untuk melakukan hal ini.

1199
00:55:38,360 --> 00:55:42,610
Biarkan aku pergi ke depan dan eliminate--
menyederhanakan ini sebagai berikut.

1200
00:55:42,610 --> 00:55:45,330
Saya hanya kembali ke saya
sederhana, paragraf sederhana.

1201
00:55:45,330 --> 00:55:47,760
Biarkan aku kembali ke styles.css saya.

1202
00:55:47,760 --> 00:55:51,040
Dan aku hanya akan menggunakan simple-- yang
yang Anda mungkin telah melihat di Google

1203
00:55:51,040 --> 00:55:54,430
atau ingat dari earlier--
text-rata kanan.

1204
00:55:54,430 --> 00:55:56,220
Dan muat ulang laman ini.

1205
00:55:56,220 --> 00:55:58,470
Sekarang semuanya terlihat
untuk menjadi benar-blok,

1206
00:55:58,470 --> 00:56:00,770
seperti yang mungkin Anda lihat di atas sini.

1207
00:56:00,770 --> 00:56:04,470
>> Kita bisa membuatnya terlihat sedikit lebih
buku-seperti, dan kita dapat mengatakan "membenarkan"

1208
00:56:04,470 --> 00:56:05,640
dan reload.

1209
00:56:05,640 --> 00:56:09,870
Sekarang itu bagus dan persegi pada kedua
sisi, yang merupakan jenis yang baik.

1210
00:56:09,870 --> 00:56:12,220
Tujuan lain yang kami punya di sini
adalah perubahan warna teks.

1211
00:56:12,220 --> 00:56:13,650
Jadi kita melihat bahwa dengan teks merah saya.

1212
00:56:13,650 --> 00:56:15,630
Dan sekarang menambahkan tombol untuk formulir.

1213
00:56:15,630 --> 00:56:19,390
Jadi kenapa tidak kita mencoba untuk melakukan hal ini?

1214
00:56:19,390 --> 00:56:23,656
Tapi pertama-tama biarkan aku pergi ke sebuah situs yang
kebanyakan dari kita menggunakan setiap day-- Google.

1215
00:56:23,656 --> 00:56:25,780
Dan mari kita lihat
bagaimana Google benar-benar bekerja.

1216
00:56:25,780 --> 00:56:26,821
Tapi aku akan melakukan hal ini.

1217
00:56:26,821 --> 00:56:31,930
Pertama-tama saya melakukannya in-- yep,
biarkan aku pergi ke Google pertama.

1218
00:56:31,930 --> 00:56:34,530
Aku akan harus pergi
ke Google Setelan,

1219
00:56:34,530 --> 00:56:40,660
karena saya ingin menonaktifkan
sesuatu yang disebut Hasil Instan.

1220
00:56:40,660 --> 00:56:43,580
>> Jadi Anda mungkin telah memperhatikan di
Google ini days-- membiarkan saya kembali

1221
00:56:43,580 --> 00:56:44,850
dan mengaktifkannya.

1222
00:56:44,850 --> 00:56:47,900
Jadi jika saya mulai mencari
untuk "kucing" seperti ini,

1223
00:56:47,900 --> 00:56:50,120
melihat bahwa tidak hanya
Saya mendapatkan auto-selesai up

1224
00:56:50,120 --> 00:56:54,520
atas, tiba-tiba, halaman itu sendiri
tampaknya mengubah cukup cepat juga,

1225
00:56:54,520 --> 00:56:58,750
dan itulah Google menggunakan bahasa
disebut JavaScript mencoba untuk membantu.

1226
00:56:58,750 --> 00:57:01,540
Namun sayangnya, jenis
dari mengacaukan diskusi kita

1227
00:57:01,540 --> 00:57:04,010
dari apa yang sebenarnya terjadi
bawah kap sini.

1228
00:57:04,010 --> 00:57:09,070
Jadi saya hanya jenis cepat
mematikan hasil instan.

1229
00:57:09,070 --> 00:57:11,510
Dan aku akan klik Simpan.

1230
00:57:11,510 --> 00:57:13,930
Dan sekarang aku akan membuka
bahwa toolbar diagnostik yang saya

1231
00:57:13,930 --> 00:57:16,150
tetap membuka di bawah tab Jaringan.

1232
00:57:16,150 --> 00:57:17,720
Jadi mari kita lakukan ini.

1233
00:57:17,720 --> 00:57:21,960
Mari me-- whoops--
gulir ini turun sedikit.

1234
00:57:21,960 --> 00:57:24,410
Dan biarkan aku mencari "kucing."

1235
00:57:24,410 --> 00:57:26,790
>> Dan sekarang notice-- sebenarnya,
ini adalah kesempatan yang baik

1236
00:57:26,790 --> 00:57:28,840
untuk membahas sejenak.

1237
00:57:28,840 --> 00:57:32,460
Perhatikan saat aku jenis usaha-- menghentikannya.

1238
00:57:32,460 --> 00:57:35,250
Hentikan.

1239
00:57:35,250 --> 00:57:35,790
BAIK.

1240
00:57:35,790 --> 00:57:40,870
Perhatikan saat saya ketik huruf
C, menonton bawah layar.

1241
00:57:40,870 --> 00:57:48,600
A- T- S. Apa bagian bawah
layar ini, tab Jaringan saya,

1242
00:57:48,600 --> 00:57:53,320
sarankan yang terjadi setiap
Waktu saya ketik surat?

1243
00:57:53,320 --> 00:57:57,700
Sayangnya, katak ini sangat
mengganggu hari ini atau shamrock

1244
00:57:57,700 --> 00:58:00,339
atau apa pun dia.

1245
00:58:00,339 --> 00:58:01,880
Apa yang terjadi setiap kali saya mengetik?

1246
00:58:01,880 --> 00:58:04,230
Dan biarkan aku menghapus
buffer dan ketik lagi.

1247
00:58:04,230 --> 00:58:06,580
whoops So--.

1248
00:58:06,580 --> 00:58:13,280
Setiap kali saya mengetik surat, C- A- T--
jadi baris baru jelas terus muncul.

1249
00:58:13,280 --> 00:58:16,530
Apa masing-masing baris mewakili,
berdasarkan apa yang telah kita lihat dan bahas

1250
00:58:16,530 --> 00:58:17,339
sejauh ini?

1251
00:58:17,339 --> 00:58:18,130
AUDIENCE: Sebuah pencarian?

1252
00:58:18,130 --> 00:58:21,770
DAVID J. Malan: Sebuah pencarian, atau
lebih umum, permintaan HTTP

1253
00:58:21,770 --> 00:58:23,125
dari browser saya ke server.

1254
00:58:23,125 --> 00:58:29,090
Nah, mengapa browser saya membuat HTTP
meminta setiap kali saya ketik surat?

1255
00:58:29,090 --> 00:58:30,502
>> AUDIENCE: [tidak terdengar]

1256
00:58:30,502 --> 00:58:33,210
DAVID J. Malan: Ya, itu memberi
saya hasil auto-lengkap ini.

1257
00:58:33,210 --> 00:58:35,190
Seperti, di mana ini
hasil pencarian berasal?

1258
00:58:35,190 --> 00:58:38,120
Nah, setiap kali saya ketik
surat, Google mengirimkan lebih

1259
00:58:38,120 --> 00:58:40,460
dan lebih dan lebih dari
kata aku mengetik.

1260
00:58:40,460 --> 00:58:41,040
Mengapa?

1261
00:58:41,040 --> 00:58:44,540
Karena mereka ingin memberi saya
lebih baik dan lebih baik, saran yang lebih baik,

1262
00:58:44,540 --> 00:58:48,880
daftar saran, untuk apa kata
Saya mencoba untuk benar-benar lengkap.

1263
00:58:48,880 --> 00:58:53,030
Jadi ini adalah untuk mengatakan secara harfiah setiap
Karakter yang diketik dalam Google

1264
00:58:53,030 --> 00:58:56,900
sedang dikirim, akhirnya di
massal, tetapi juga kadang-kadang salah satu

1265
00:58:56,900 --> 00:59:00,620
pada waktu untuk melaksanakan
fitur auto-complete ini ketika

1266
00:59:00,620 --> 00:59:03,000
Data ini, tentu saja, di web.

1267
00:59:03,000 --> 00:59:08,780
>> Sekarang, mari kita lihat apa yang sebenarnya
terjadi ketika saya klik Google Search.

1268
00:59:08,780 --> 00:59:10,420
Dan kemudian kita akan memanfaatkan ini diri kita sendiri.

1269
00:59:10,420 --> 00:59:15,320
Jadi jika saya gulir ke bawah sekarang untuk sangat
Permintaan pertama yang baru saja terjadi.

1270
00:59:15,320 --> 00:59:17,130
Perhatikan berikut ini.

1271
00:59:17,130 --> 00:59:25,550
Itu dikirim ke cukup panjang URL--
https://www.google.com/search?

1272
00:59:25,550 --> 00:59:27,100
dan kemudian seluruh banyak hal.

1273
00:59:27,100 --> 00:59:29,620
Mari kita lihat ini benar-benar sekarang
di tab browser itu sendiri.

1274
00:59:29,620 --> 00:59:31,310
Mari kita menyingkirkan toolbar di sini.

1275
00:59:31,310 --> 00:59:33,140
Berikut halaman hasil pencarian.

1276
00:59:33,140 --> 00:59:34,790
Dan pemberitahuan inilah URL.

1277
00:59:34,790 --> 00:59:37,430
Sekarang, Anda mungkin bisa menebak
apa yang terjadi di sini di bagian.

1278
00:59:37,430 --> 00:59:39,090
Jadi pertama-tama, definisi.

1279
00:59:39,090 --> 00:59:42,570
Ini tampaknya adalah tujuan
mana formulir dikirimkan.

1280
00:59:42,570 --> 00:59:44,910
Jadi ketika saya mengetik di
kata "kucing" dan tekan Enter,

1281
00:59:44,910 --> 00:59:48,460
rupanya Google mengirim
input teks saya untuk URL ini

1282
00:59:48,460 --> 00:59:50,770
bahwa saya telah disorot
ada, memangkas pencarian.

1283
00:59:50,770 --> 00:59:56,530
Ternyata, dalam URL, apa pun yang
terjadi setelah tanda tanya adalah,

1284
00:59:56,530 --> 01:00:01,270
seperti yang kita terus mengatakan, sepasang kunci-nilai
yang diketik ke dalam formulir atau entah bagaimana

1285
01:00:01,270 --> 01:00:04,500
ditransmisikan dari
browser untuk server.

1286
01:00:04,500 --> 01:00:07,180
>> Jadi setiap kali Anda mengetik masukan
menjadi bentuk di web

1287
01:00:07,180 --> 01:00:10,000
dan itu dikirim karena kami sudah
mendiskusikan, melalui get a,

1288
01:00:10,000 --> 01:00:12,400
salah maya ini
amplop, isi

1289
01:00:12,400 --> 01:00:15,510
itu envelope-- ya, tetap
mendapatkan diisi secara fisik

1290
01:00:15,510 --> 01:00:19,010
ke dalam amplop di kelas
hari ini, namun teknologi

1291
01:00:19,010 --> 01:00:21,110
itu benar-benar dimasukkan ke dalam URL.

1292
01:00:21,110 --> 01:00:22,940
Jadi sebenarnya, biarkan aku menyaring ini.

1293
01:00:22,940 --> 01:00:25,010
Di mana Anda melihat input pengguna?

1294
01:00:25,010 --> 01:00:27,490
Di mana Anda melihat sesuatu
bahwa saya sendiri diketik di sini?

1295
01:00:27,490 --> 01:00:32,100

1296
01:00:32,100 --> 01:00:33,491
Ya, jadi "kucing."

1297
01:00:33,491 --> 01:00:33,990
Kanan?

1298
01:00:33,990 --> 01:00:36,380
Jadi biar menyaring ini
menjadi sesuatu yang sederhana.

1299
01:00:36,380 --> 01:00:39,917
Aku akan menghapus segala sesuatu tentang
URL ini yang saya tidak mengerti,

1300
01:00:39,917 --> 01:00:42,250
dan aku hanya akan meninggalkan
sebagai ini-- / search? q = kucing.

1301
01:00:42,250 --> 01:00:45,640

1302
01:00:45,640 --> 01:00:47,890
Kami akan melihat di mana q
berasal dari dalam sekejap,

1303
01:00:47,890 --> 01:00:51,220
tapi yang terasa seperti minimum
Jumlah informasi yang saya berikan.

1304
01:00:51,220 --> 01:00:53,050
Dan sekarang aku akan tekan Enter.

1305
01:00:53,050 --> 01:00:55,520
Dan melihat itu masih bekerja.

1306
01:00:55,520 --> 01:00:57,950
Kami masih mendapatkan kembali sejumlah besar kucing.

1307
01:00:57,950 --> 01:01:00,340
Jadi Google adalah pengujian
dari ini hari ini.

1308
01:01:00,340 --> 01:01:01,934
Ini 2016, tidak 1999.

1309
01:01:01,934 --> 01:01:04,600
Jadi ada hal-hal lain yang saya
browser mengirimkan ke server.

1310
01:01:04,600 --> 01:01:07,100
Tapi ini minimal
semua yang diperlukan.

1311
01:01:07,100 --> 01:01:08,380
>> Jadi apa yang terjadi?

1312
01:01:08,380 --> 01:01:14,320
Nah, pertama-tama saya pergi ke depan dan pergi
kembali ke Cloud9 dan biarkan aku pergi ke depan

1313
01:01:14,320 --> 01:01:15,620
dan menutup tab saya sebelumnya.

1314
01:01:15,620 --> 01:01:18,230
Dan saya akan melakukan ini pada saya
memiliki hanya sesaat.

1315
01:01:18,230 --> 01:01:20,730
Aku akan pergi ke depan
dan membuat file baru.

1316
01:01:20,730 --> 01:01:23,739
Dan aku akan menyimpannya sebagai google.html.

1317
01:01:23,739 --> 01:01:26,280
Dan aku akan sangat quickly--
Aku akan mencuri, sebenarnya,

1318
01:01:26,280 --> 01:01:28,510
beberapa teks ini hanya untuk menghemat waktu.

1319
01:01:28,510 --> 01:01:30,610
Aku akan paste di sini.

1320
01:01:30,610 --> 01:01:33,850
Aku tidak akan repot-repot dengan
setiap stilisasi saat ini.

1321
01:01:33,850 --> 01:01:38,340
Kita akan menyebutnya "My Google."

1322
01:01:38,340 --> 01:01:41,230
Dan aku akan menyingkirkan
segala sesuatu dalam tubuh.

1323
01:01:41,230 --> 01:01:42,740
Dan aku akan melakukan hal berikut.

1324
01:01:42,740 --> 01:01:45,690
Biarkan aku memperbesar.

1325
01:01:45,690 --> 01:01:50,620
Bentuk action-- dan sesingkat yang saya sebutkan
earlier-- whoops-- seperti yang saya singkat

1326
01:01:50,620 --> 01:01:54,130
disebutkan sebelumnya, aksi dari
Formulir adalah di mana Anda mengirim data ke.

1327
01:01:54,130 --> 01:01:56,620
Jadi google.com/search.

1328
01:01:56,620 --> 01:01:59,390
Dan metode yang saya ingin menggunakan
dapat menjadi salah satu dari dua hal.

1329
01:01:59,390 --> 01:02:02,870
Itu baik bisa menjadi "mendapatkan," seperti yang kita terus
mendiskusikan, atau bisa "post."

1330
01:02:02,870 --> 01:02:05,340
Untuk saat ini, fundamental
perbedaan adalah, jika Anda menggunakan "mendapatkan,"

1331
01:02:05,340 --> 01:02:09,590
semua informasi yang
pengguna menyediakan akan dikirim dalam URL.

1332
01:02:09,590 --> 01:02:13,530
>> Yang sangat bagus untuk hal-hal seperti pencarian
mesin dan beberapa aplikasi lainnya,

1333
01:02:13,530 --> 01:02:17,080
tetapi dalam keadaan apa akan
Anda tidak ingin mengisi formulir

1334
01:02:17,080 --> 01:02:21,620
dan telah informasi berakhir pada
URL, seperti di address bar browser Anda?

1335
01:02:21,620 --> 01:02:25,470

1336
01:02:25,470 --> 01:02:26,605
Apa jenis bentuk lakukan you--

1337
01:02:26,605 --> 01:02:27,480
AUDIENCE: [tidak terdengar]

1338
01:02:27,480 --> 01:02:28,450
DAVID J. Malan: Ya, seperti apa?

1339
01:02:28,450 --> 01:02:29,270
AUDIENCE: Sandi.

1340
01:02:29,270 --> 01:02:31,936
DAVID J. Malan: Ya, jadi Anda log
ke Facebook atau situs.

1341
01:02:31,936 --> 01:02:34,395
Itu masukan pengguna dari
bentuk, kotak teks,

1342
01:02:34,395 --> 01:02:37,020
tapi Anda mungkin tidak ingin
muncul di URL browser.

1343
01:02:37,020 --> 01:02:38,121
Mengapa?

1344
01:02:38,121 --> 01:02:40,870
Maksudku, mungkin ada beberapa
implikasi keamanan pada jaringan,

1345
01:02:40,870 --> 01:02:44,830
tapi more-- suka, lebih sederhana, bagaimana jika
teman sekamar Anda, penting lainnya Anda,

1346
01:02:44,830 --> 01:02:47,710
anak-anak Anda, pasangan Anda terlihat
melalui sejarah browser Anda?

1347
01:02:47,710 --> 01:02:50,762
Ada sandi Anda tepat
ada dalam sejarah browser Anda.

1348
01:02:50,762 --> 01:02:52,220
Itu tidak merasa seperti desain yang baik.

1349
01:02:52,220 --> 01:02:54,500
Atau bahkan lebih teknis,
misalkan Anda mencoba

1350
01:02:54,500 --> 01:02:59,180
untuk meng-upload foto ke Flickr
atau Facebook atau wherever--

1351
01:02:59,180 --> 01:03:03,010
yang input pengguna, meskipun
itu sedikit lebih interesting-- bagaimana

1352
01:03:03,010 --> 01:03:05,530
saya menjejalkan gambar di bar URL?

1353
01:03:05,530 --> 01:03:06,730
Anda jenis semacam tidak bisa.

1354
01:03:06,730 --> 01:03:07,396
Anda jenis bisa.

1355
01:03:07,396 --> 01:03:10,210
Tapi, sungguh, aku kesulitan
membayangkan melakukan hal itu.

1356
01:03:10,210 --> 01:03:13,470
Jadi saya perlu metode lain untuk
upload foto ke sebuah situs web,

1357
01:03:13,470 --> 01:03:15,657
dan bahwa metode lain disebut "post."

1358
01:03:15,657 --> 01:03:18,740
Tapi untuk saat ini, kita hanya akan berbicara tentang
"Dapatkan," yang merupakan sederhana dari dua.

1359
01:03:18,740 --> 01:03:21,100
Itu hanya menempatkan semua
input pengguna ke URL.

1360
01:03:21,100 --> 01:03:22,830
>> Jadi, inilah bentuk aku menciptakan.

1361
01:03:22,830 --> 01:03:24,070
Saya ingin masukan.

1362
01:03:24,070 --> 01:03:24,820
Dan kau tahu apa?

1363
01:03:24,820 --> 01:03:26,111
Aku akan mengambil menebak di sini.

1364
01:03:26,111 --> 01:03:31,600
Aku akan mengingat saya
masukan "q" untuk "query."

1365
01:03:31,600 --> 01:03:34,970
Dan saya pikir ini adalah salah satu
desain asli, mungkin, dari tahun 1999.

1366
01:03:34,970 --> 01:03:39,560
Dan kemudian jenis masukan ini
hanya akan menjadi "teks."

1367
01:03:39,560 --> 01:03:43,040
Dan kemudian aku akan memiliki masukan lain
yang tidak perlu nama, karena kami akan segera

1368
01:03:43,040 --> 01:03:45,120
lihat, jenis yang "submit."

1369
01:03:45,120 --> 01:03:47,070
Dan ini akan
memberikan tombol khusus.

1370
01:03:47,070 --> 01:03:48,320
Dan hanya itu.

1371
01:03:48,320 --> 01:03:50,790
>> Jadi biarkan aku pergi ke depan dan menyimpan file ini.

1372
01:03:50,790 --> 01:03:54,910
Aku akan kembali ke saya
Browser dan pergi ke google.html.

1373
01:03:54,910 --> 01:03:56,140
Memasukkan.

1374
01:03:56,140 --> 01:03:59,680
Dan itu semacam jarang
untuk sedikitnya.

1375
01:03:59,680 --> 01:04:03,110
Tapi biarkan aku pergi ke depan
dan mencari "kucing."

1376
01:04:03,110 --> 01:04:06,510
Dan melihat aku saat ini
di URL Cloud9 ini.

1377
01:04:06,510 --> 01:04:09,240
Tapi saat saya klik ini,
di mana Anda berharap saya akan berakhir?

1378
01:04:09,240 --> 01:04:10,160
>> AUDIENCE: Google.

1379
01:04:10,160 --> 01:04:11,118
>> DAVID J. Malan: Google.

1380
01:04:11,118 --> 01:04:12,740
Jadi mari kita klik Submit.

1381
01:04:12,740 --> 01:04:15,200
Dan memang saya sudah kembali dilaksanakan Google.

1382
01:04:15,200 --> 01:04:15,700
Kanan?

1383
01:04:15,700 --> 01:04:16,480
Ini sederhana.

1384
01:04:16,480 --> 01:04:17,120
Ini lebih ringan.

1385
01:04:17,120 --> 01:04:20,350
Maksudku, kode saya jelas lebih baik daripada
mereka, dari kekacauan yang kita lihat sebelumnya.

1386
01:04:20,350 --> 01:04:21,100
Dan kau tahu apa?

1387
01:04:21,100 --> 01:04:22,610
Aku akan rempah-rempah ini up sedikit.

1388
01:04:22,610 --> 01:04:23,860
Saya tidak menyebutkan ini sebelumnya.

1389
01:04:23,860 --> 01:04:27,860
Ada tag seperti H1, untuk Heading 1,
judul yang paling penting dalam sebuah halaman.

1390
01:04:27,860 --> 01:04:30,570
"Google saya," Aku akan menyebutnya.

1391
01:04:30,570 --> 01:04:31,940
Mari saya ulang.

1392
01:04:31,940 --> 01:04:33,772
Itu tampak sedikit lebih baik sudah.

1393
01:04:33,772 --> 01:04:34,980
Dan, sebenarnya, Anda tahu apa?

1394
01:04:34,980 --> 01:04:36,430
Saya sudah already-- aku berbohong.

1395
01:04:36,430 --> 01:04:40,200
Aku bilang aku tidak akan gaya ini,
tapi aku akan gaya ini seperti sebelumnya.

1396
01:04:40,200 --> 01:04:46,860
Dan tubuh saya akan menjadi,
katakanlah, pusat text-align.

1397
01:04:46,860 --> 01:04:48,800
Itu tampak lebih seperti Google sudah.

1398
01:04:48,800 --> 01:04:51,090
>> Saya perlu satu baris, meskipun,
untuk itu tombol Submit.

1399
01:04:51,090 --> 01:04:52,798
Dan ternyata, Anda
dapat menggunakan paragraf,

1400
01:04:52,798 --> 01:04:57,320
atau Anda bisa lebih harfiah hanya mengatakan,
memberi saya satu baris di sini-tag br.

1401
01:04:57,320 --> 01:04:59,319
Dan jika saya reload ini, sekarang pergi ke sana.

1402
01:04:59,319 --> 01:05:01,610
Ini sedikit jelek, jadi saya
bisa melakukan istirahat beberapa line,

1403
01:05:01,610 --> 01:05:03,310
tapi jangan terlalu serakah sini.

1404
01:05:03,310 --> 01:05:06,430
Jadi sekarang mari kita lihat apakah ia bekerja untuk "anjing."

1405
01:05:06,430 --> 01:05:08,640
Tampaknya bekerja untuk "anjing," juga.

1406
01:05:08,640 --> 01:05:10,780
Jadi apa takeaway menarik di sini?

1407
01:05:10,780 --> 01:05:13,600
Satu-- bukan lompatan besar untuk
memperkenalkan beberapa tag yang lebih,

1408
01:05:13,600 --> 01:05:15,370
seperti tag form di tag input.

1409
01:05:15,370 --> 01:05:17,120
Tapi yang lebih mendasar
adalah, semua yang kita lakukan

1410
01:05:17,120 --> 01:05:20,610
adalah meningkatkan pemahaman kita
HTTP dan fakta

1411
01:05:20,610 --> 01:05:24,900
bahwa bentuk-bentuk akhirnya mengubah
apa yang ada di URL browser,

1412
01:05:24,900 --> 01:05:28,540
dan sebagainya, oleh karena itu, kita bisa
mekanis memberikan masukan ke server

1413
01:05:28,540 --> 01:05:33,600
dengan membuat bentuk HTML dan mengetahui
bahwa server mengerti HTTP,

1414
01:05:33,600 --> 01:05:36,890
sama seperti tubuh kita mengerti, seperti,
menjabat tangan saya, bahwa protokol yang sama,

1415
01:05:36,890 --> 01:05:40,920
dan begitu kita kembali respon
bahwa kita akhirnya harapkan.

1416
01:05:40,920 --> 01:05:44,050
>> Jadi mari kita coba untuk melakukan satu
Hal terakhir yang sekarang dengan ponsel,

1417
01:05:44,050 --> 01:05:47,052
dan aku akan make-- saya akan menambahkan
kode ini ke slide.

1418
01:05:47,052 --> 01:05:49,760
Jadi jika Anda ingin bermain-main, Anda
pasti bisa mengambilnya dari sana.

1419
01:05:49,760 --> 01:05:51,551
Tapi aku akan pergi
ke depan dan melakukan satu hal.

1420
01:05:51,551 --> 01:05:54,120
Aku akan pergi ke depan dan
membuka page-- Indeks saya

1421
01:05:54,120 --> 01:05:59,030
Halaman halo saya seperti sebelumnya, yang
memiliki banyak teks faux-Latin ini,

1422
01:05:59,030 --> 01:06:05,470
atau berarti teks Latin, dan has--
sepertinya ini pada ukuran font ini.

1423
01:06:05,470 --> 01:06:07,850
Tapi biarkan aku pergi ke depan dan melakukan hal ini.

1424
01:06:07,850 --> 01:06:09,300
Aku akan pergi ke Cloud9.

1425
01:06:09,300 --> 01:06:10,380
Dan Anda tidak perlu melakukan langkah ini.

1426
01:06:10,380 --> 01:06:11,420
Aku hanya akan melakukannya sendiri.

1427
01:06:11,420 --> 01:06:12,890
Aku akan klik Share.

1428
01:06:12,890 --> 01:06:15,170
Dan ini adalah fitur
hanya dari Cloud9, dimana

1429
01:06:15,170 --> 01:06:17,710
Aku bisa membuat lingkungan saya publik.

1430
01:06:17,710 --> 01:06:20,240
>> Dan hanya untuk kepentingan
demonstrasi, biarkan aku melakukan ini.

1431
01:06:20,240 --> 01:06:22,870
Aku akan membuat publik aplikasi saya.

1432
01:06:22,870 --> 01:06:25,230
Perhatikan itu peringatan saya, saya
Saya yakin saya ingin melakukan ini,

1433
01:06:25,230 --> 01:06:28,438
karena ini akan membuat semua orang
di dunia, apakah mereka ada di sini sekarang

1434
01:06:28,438 --> 01:06:33,560
atau menonton video kemudian pada
internet dapat melihat apa yang saya lihat.

1435
01:06:33,560 --> 01:06:34,440
Tapi itu OK.

1436
01:06:34,440 --> 01:06:37,870
Aku akan mengatakan "Selesai."

1437
01:06:37,870 --> 01:06:42,080
Dan biarkan aku mendorong Anda, jika saya lakukan
ini correctly-- biarkan aku mengujinya pertama.

1438
01:06:42,080 --> 01:06:45,590
Silakan, jika Anda tidak mind--
di browser pada komputer Anda,

1439
01:06:45,590 --> 01:06:49,900
pergi ke URL ini, dan mudah-mudahan
Anda akan melihat teks Latin saya.

1440
01:06:49,900 --> 01:06:52,820
Dan harus jelas, itu
berjalan tidak di laptop saya.

1441
01:06:52,820 --> 01:06:53,610
Ini di awan.

1442
01:06:53,610 --> 01:06:58,120
Itu di Cloud9, secara harfiah, tapi
Saya telah membuat ruang kerja saya publik

1443
01:06:58,120 --> 01:07:03,450
sehingga siapa pun di internet
dapat mengakses halaman rumah Latin saya.

1444
01:07:03,450 --> 01:07:07,209
>> Pergi ke URL yang sama pada
telepon Anda, jika Anda bisa.

1445
01:07:07,209 --> 01:07:09,750
Jika itu akan dikenakan biaya, meskipun, Anda
hanya dapat melihat di pundak.

1446
01:07:09,750 --> 01:07:40,688

1447
01:07:40,688 --> 01:07:42,467
AUDIENCE: [tidak terdengar]

1448
01:07:42,467 --> 01:07:43,550
DAVID J. Malan: Maaf?

1449
01:07:43,550 --> 01:07:45,390
AUDIENCE: [tidak terdengar]

1450
01:07:45,390 --> 01:07:47,710
DAVID J. Malan: Hanya kata-kata Latin.

1451
01:07:47,710 --> 01:07:48,210
Itu saja.

1452
01:07:48,210 --> 01:07:49,250
Tapi itulah yang harus Anda lihat.

1453
01:07:49,250 --> 01:07:49,875
>> AUDIENCE: Ya.

1454
01:07:49,875 --> 01:07:50,790
DAVID J. Malan: Ya.

1455
01:07:50,790 --> 01:07:51,300
Ya.

1456
01:07:51,300 --> 01:07:51,540
BAIK.

1457
01:07:51,540 --> 01:07:53,530
Jadi dapat saya pegang sampai Anda
telepon untuk sesaat?

1458
01:07:53,530 --> 01:07:57,504
Jadi, mudah-mudahan, jika Anda mengakses
itu, seharusnya terlihat hampir tidak terbaca.

1459
01:07:57,504 --> 01:07:59,920
Ini still-- Maksudku, itu
terbaca karena Latin.

1460
01:07:59,920 --> 01:08:01,920
Tapi itu juga terbaca
untuk apa alasan lain?

1461
01:08:01,920 --> 01:08:03,775
Seperti, apa yang tidak menyenangkan Anda tentang hal ini?

1462
01:08:03,775 --> 01:08:04,650
AUDIENCE: Ini kecil.

1463
01:08:04,650 --> 01:08:06,420
DAVID J. Malan: Ini super, super kecil.

1464
01:08:06,420 --> 01:08:07,920
Jadi bagaimana kita bisa memperbaiki ini?

1465
01:08:07,920 --> 01:08:09,730
Ini super, super kecil
di telepon Victoria

1466
01:08:09,730 --> 01:08:11,400
dan, jika Anda telah ditarik
itu sendiri, mungkin

1467
01:08:11,400 --> 01:08:14,660
kecil pada ponsel Anda juga, kecuali jika Anda
memiliki pengaturan aksesibilitas diaktifkan.

1468
01:08:14,660 --> 01:08:15,530
Apa itu?

1469
01:08:15,530 --> 01:08:18,497
Anda hanya bisa mencubit dan
zoom, yang bisa diterapkan,

1470
01:08:18,497 --> 01:08:20,330
tapi kemudian Anda hanya melihat
beberapa kata pada suatu waktu.

1471
01:08:20,330 --> 01:08:20,859
Jadi tunggu sebentar.

1472
01:08:20,859 --> 01:08:21,720
Aku tahu bagaimana memperbaikinya.

1473
01:08:21,720 --> 01:08:22,219
Kanan?

1474
01:08:22,219 --> 01:08:26,130
Saya bisa menggunakan CSS, dan aku bisa mengubah
ukuran font dari 12-point ke 24-point.

1475
01:08:26,130 --> 01:08:29,020
Tapi efek samping dari itu,
tentu saja, akan menjadi sekarang,

1476
01:08:29,020 --> 01:08:32,630
pada desktop atau laptop,
sekarang teks dua kali lebih besar.

1477
01:08:32,630 --> 01:08:35,810
Dan sehingga akan jenis menyenangkan
untuk membedakan antara perangkat,

1478
01:08:35,810 --> 01:08:37,840
dan ternyata ada
cara melakukan hal itu.

1479
01:08:37,840 --> 01:08:39,590
Ada beberapa
cara yang berbeda, pada kenyataannya,

1480
01:08:39,590 --> 01:08:44,189
dimana menggunakan CSS dan fitur yang lebih menarik
bahwa kita tidak akan masuk ke dalam detail,

1481
01:08:44,189 --> 01:08:46,960
Anda pada dasarnya dapat query
browser dan berkata,

1482
01:08:46,960 --> 01:08:51,550
jika layar lebih kecil dari ini
banyak piksel, menggunakan ukuran font ini.

1483
01:08:51,550 --> 01:08:55,180
Jika layar Anda lebih besar dari ini
banyak piksel, menggunakan ukuran font lain ini.

1484
01:08:55,180 --> 01:08:57,080
>> Anda bahkan bisa lebih menarik masih.

1485
01:08:57,080 --> 01:09:00,140
Jika Anda pernah mengunjungi
Halaman web yang, pada desktop,

1486
01:09:00,140 --> 01:09:04,404
memiliki menu besar mungkin pergi ke
sisi, dan kemudian semua konten

1487
01:09:04,404 --> 01:09:07,029
adalah sisi yang menu--
itu semacam paradigma umum.

1488
01:09:07,029 --> 01:09:09,670
Menu di sebelah kiri, konten
di sebelah kanan, atau sebaliknya.

1489
01:09:09,670 --> 01:09:13,569
Tidak benar-benar bekerja pada ponsel ketika Anda
layar hanya ini luas banyak piksel.

1490
01:09:13,569 --> 01:09:16,233
Jadi lebih umum pada ponsel adalah,
menu Anda tiba-tiba akan mendapatkan

1491
01:09:16,233 --> 01:09:18,399
runtuh, dan Anda harus
klik tombol untuk melihatnya,

1492
01:09:18,399 --> 01:09:22,404
atau website akan menempatkan menu
di atas itu dan menempatkan konten di bawahnya.

1493
01:09:22,404 --> 01:09:24,779
Dan Anda dapat menerapkan ini
hal dalam berbagai cara, juga.

1494
01:09:24,779 --> 01:09:28,340
Anda dapat meminta programmer Anda,
hey, tim, setiap saat

1495
01:09:28,340 --> 01:09:34,450
Anda melihat permintaan HTTP dari Android
perangkat, perangkat Microsoft, Google

1496
01:09:34,450 --> 01:09:39,930
perangkat, perangkat Apple, gunakan ini
ukuran font dan menggunakan tata letak menu ini,

1497
01:09:39,930 --> 01:09:42,670
atau yang lain menggunakan layout default ini lebih besar.

1498
01:09:42,670 --> 01:09:45,410
>> Sekarang, dengan menggunakan apa
Teknik fundamental hari ini

1499
01:09:45,410 --> 01:09:48,529
bisa para insinyur menggunakan
untuk mengetahui apakah itu

1500
01:09:48,529 --> 01:09:53,660
iPhone, ponsel Android, laptop,
desktop mengunjungi server perusahaan?

1501
01:09:53,660 --> 01:09:55,310
Dimana mereka mendapatkan informasi itu?

1502
01:09:55,310 --> 01:09:56,080
>> AUDIENCE: Sundulannya?

1503
01:09:56,080 --> 01:09:57,740
>> DAVID J. Malan: Ya, header HTTP.

1504
01:09:57,740 --> 01:10:01,714
Jadi setiap permintaan HTTP yang berasal dari
pelanggan mereka ke server mereka

1505
01:10:01,714 --> 01:10:03,880
termasuk, dalam yang maya
amplop, sejumlah besar

1506
01:10:03,880 --> 01:10:08,260
header HTTP, salah satunya adalah
browser dan sistem operasi

1507
01:10:08,260 --> 01:10:10,290
bahkan, jika Anda peduli untuk
bahwa tingkat detail.

1508
01:10:10,290 --> 01:10:13,790
Sekarang, itu string samar-cari, tapi
terdapat software yang hanya akan

1509
01:10:13,790 --> 01:10:18,530
menyederhanakan itu, dan Anda hanya dapat meminta
dalam pemrograman code-- PHP, Java, C ++,

1510
01:10:18,530 --> 01:10:23,650
whatever-- apa telepon ini--
apa perangkat pengguna ini menggunakan?

1511
01:10:23,650 --> 01:10:27,501
Dan kemudian Anda bisa mengatakan, menunjukkan kepada mereka ini
versi website jika telepon.

1512
01:10:27,501 --> 01:10:30,250
Tampilkan mereka versi ini
situs apakah itu laptop atau desktop.

1513
01:10:30,250 --> 01:10:32,316
Tapi Anda bahkan tidak perlu
kompleksitas server-side.

1514
01:10:32,316 --> 01:10:33,940
Anda dapat melakukan bahkan yang paling sederhana hal.

1515
01:10:33,940 --> 01:10:34,815
>> Aku akan melakukan hal ini.

1516
01:10:34,815 --> 01:10:38,995
Aku akan pergi ke depan ke
lingkungan Cloud9 saya,

1517
01:10:38,995 --> 01:10:41,370
dan aku akan menambahkan tag
Anda lihat di Google sebelumnya.

1518
01:10:41,370 --> 01:10:42,770
Ini disebut metatag.

1519
01:10:42,770 --> 01:10:45,520
Dan saya tidak pernah ingat satu ini, sehingga
Aku akan menuliskan di sini.

1520
01:10:45,520 --> 01:10:50,552
Meta name = "viewport" dan kemudian
content = "width = lebar perangkat, intital

1521
01:10:50,552 --> 01:11:02,060
skala = 1 "dan hanya itu.

1522
01:11:02,060 --> 01:11:06,230
>> Jadi mungkin juga menjadi
seperti mantra magis.

1523
01:11:06,230 --> 01:11:11,300
Ini tidak semua yang jelas, tapi ini memiliki
ada hubungannya dengan viewport,

1524
01:11:11,300 --> 01:11:15,070
dan viewport hanya tubuh dari
Halaman web, wilayah persegi panjang yang

1525
01:11:15,070 --> 01:11:16,690
mendefinisikan sebagian halaman.

1526
01:11:16,690 --> 01:11:19,060
Dan ini hanya memberitahu
browser, Anda tahu apa?

1527
01:11:19,060 --> 01:11:22,589
Membuat lebar halaman ini
efektif sama dengan lebar perangkat.

1528
01:11:22,589 --> 01:11:25,380
Dengan kata lain, jangan menganggap bahwa
Anda memiliki semacam ruang terbatas.

1529
01:11:25,380 --> 01:11:29,920
Asumsikan Anda hanya memiliki sebanyak
ruang sebagai perangkat itu sendiri besar.

1530
01:11:29,920 --> 01:11:34,454
Dan sekarang, jika saya reload ini
di browser saya, saya melihat tidak ada perubahan.

1531
01:11:34,454 --> 01:11:37,370
Tapi jika saya melakukan correctly-- ini dan
biarkan aku menyeberangi fingers-- saya jika Anda semua

1532
01:11:37,370 --> 01:11:42,920
ulang ponsel Anda, apakah Anda
melihat perubahan yang menarik?

1533
01:11:42,920 --> 01:11:43,620
Ya, adalah itu--

1534
01:11:43,620 --> 01:11:45,067
>> AUDIENCE: [tidak terdengar]

1535
01:11:45,067 --> 01:11:45,900
DAVID J. Malan: Ya.

1536
01:11:45,900 --> 01:11:46,400
BAIK.

1537
01:11:46,400 --> 01:11:47,850
Jadi bisa dibilang lebih mudah dibaca sekarang?

1538
01:11:47,850 --> 01:11:53,070
Masih kecil, untuk menjadi adil, tapi tidak
sangat kecil untuk menjadi tidak terkendali.

1539
01:11:53,070 --> 01:11:56,920
Dan saya pasti bisa menimpa ini
lebih lanjut dengan CSS atau pada sisi server,

1540
01:11:56,920 --> 01:12:00,120
tapi semakin apa yang Anda
melihat lebih banyak fitur

1541
01:12:00,120 --> 01:12:02,900
ditambahkan ke
client-side environments--

1542
01:12:02,900 --> 01:12:06,530
JavaScript, karena kami akan mendiskusikan
besok, CSS, dan HTML-- sehingga

1543
01:12:06,530 --> 01:12:09,190
bahwa semua pertanyaan ini
dapat dilakukan pada klien

1544
01:12:09,190 --> 01:12:11,910
sehingga mengganggu
Server jauh lebih sedikit dan tidak

1545
01:12:11,910 --> 01:12:14,530
harus bersaing dengan, untuk
Misalnya, serangan konstan

1546
01:12:14,530 --> 01:12:17,210
dari sistem operasi baru
versi, versi browser baru.

1547
01:12:17,210 --> 01:12:20,190
Anda hanya bisa membiarkan browser
meminta perangkat, seberapa besar Anda,

1548
01:12:20,190 --> 01:12:22,890
dan kemudian membuat agak logis
keputusan berdasarkan itu.

1549
01:12:22,890 --> 01:12:25,140
Tapi kita akan melihat lebih banyak kesempatan
untuk keputusan logis

1550
01:12:25,140 --> 01:12:27,223
besok dalam konteks
dari bahasa pemrograman.

1551
01:12:27,223 --> 01:12:29,800

1552
01:12:29,800 --> 01:12:32,760
>> Jadi, pertanyaan, kemudian,
pada pengembangan web?

1553
01:12:32,760 --> 01:12:36,130
Hari ini tidak pemrograman web, per
se, karena hampir semua yang kita lakukan

1554
01:12:36,130 --> 01:12:38,370
sangat estetika, jika Anda mau.

1555
01:12:38,370 --> 01:12:41,750
Tidak ada pengambilan keputusan di
kode yang kita tulis,

1556
01:12:41,750 --> 01:12:44,990
dan jadi itu sebabnya HTML adalah markup
bahasa, bukan bahasa pemrograman.

1557
01:12:44,990 --> 01:12:47,140
Tapi besok kami akan mengarahkan
sekilas, akhirnya,

1558
01:12:47,140 --> 01:12:49,340
di JavaScript, yang merupakan
pemrograman yang sebenarnya

1559
01:12:49,340 --> 01:12:54,220
bahasa yang memungkinkan kita melakukan sedikit lebih.

1560
01:12:54,220 --> 01:12:56,800
>> Ada pertanyaan?

1561
01:12:56,800 --> 01:13:00,480
Nah, biarkan aku mengusulkan dua
Kesempatan opsional untuk pekerjaan rumah.

1562
01:13:00,480 --> 01:13:02,900
Satu is-- Cloud9 ini
account tidak akan berakhir.

1563
01:13:02,900 --> 01:13:04,669
Anda dipersilakan untuk menggunakan
mereka untuk bermain-main dengan.

1564
01:13:04,669 --> 01:13:05,960
Ini tingkat gratis layanan.

1565
01:13:05,960 --> 01:13:08,754
Sadarilah bahwa, jika saat membuat
ruang kerja Anda, Anda membuatnya publik,

1566
01:13:08,754 --> 01:13:11,670
yang tidak berarti bahwa siapa pun di
internet dapat melihat apa yang Anda mengetik.

1567
01:13:11,670 --> 01:13:15,104
Jadi mungkin hanya mempertimbangkan
tidak mempermalukan diri sendiri

1568
01:13:15,104 --> 01:13:18,020
jika Anda menempatkan web pertama Anda
Halaman luar sana publik sengaja,

1569
01:13:18,020 --> 01:13:20,134
tapi tidak ada yang akan
tahu untuk mencari di sana pula.

1570
01:13:20,134 --> 01:13:23,760
>> Dan two-- biarkan aku melemparkan
up URL ini juga,

1571
01:13:23,760 --> 01:13:28,250
terutama jika Anda datang di hari ini
sedikit kurang nyaman daripada yang lain,

1572
01:13:28,250 --> 01:13:30,430
yakin apa artinya semua ini.

1573
01:13:30,430 --> 01:13:36,780
Sadarilah bahwa lebih dari video ini,
yang merupakan sebuah cara yang baik untuk tertidur

1574
01:13:36,780 --> 01:13:39,380
dan juga tertawa sementara
melakukannya, juga memiliki

1575
01:13:39,380 --> 01:13:44,300
banyak societally menarik
dan diskusi keamanan yang relevan

1576
01:13:44,300 --> 01:13:47,370
di dalamnya dari John Oliver,
meskipun pelawak.

1577
01:13:47,370 --> 01:13:55,456
>> Tapi jika tidak ada pertanyaan lebih lanjut,
yang membawa kita ke resepsi.

1578
01:13:55,456 --> 01:13:56,830
Jadi kenapa tidak saya nyalakan musik.

1579
01:13:56,830 --> 01:13:58,610
Harus ada minuman
dan makanan ringan di luar.

1580
01:13:58,610 --> 01:14:00,220
Saya senang untuk berbaur untuk sebagai
Selama orang ingin,

1581
01:14:00,220 --> 01:14:01,600
menjawab pertanyaan lebih satu-satu.

1582
01:14:01,600 --> 01:14:03,330
Tapi, jika tidak, Anda dipersilakan
lepas landas pada setiap titik,

1583
01:14:03,330 --> 01:14:05,740
dan kami akan bertemu lagi
besok pagi untuk sedikit lebih.

1584
01:14:05,740 --> 01:14:07,290
Baiklah, terima kasih.

1585
01:14:07,290 --> 01:14:10,428