1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. Malan: Tất cả các quyền. 3 00:00:01,210 --> 00:00:02,160 Chúng tôi đã trở lại. 4 00:00:02,160 --> 00:00:05,810 Vì vậy, mục tiêu của kỳ họp cuối cùng này là giới thiệu một số khái niệm hơn 5 00:00:05,810 --> 00:00:09,290 mà còn cung cấp cho tất cả mọi người một cơ hội để loại căng ngón tay của bạn 6 00:00:09,290 --> 00:00:11,270 và thực sự làm một cái gì đó một chút trên tay. 7 00:00:11,270 --> 00:00:13,897 Mục tiêu không phải là để biến tất cả chúng ta vào các nhà phát triển web 8 00:00:13,897 --> 00:00:16,230 bằng bất kỳ phương tiện nhưng thực sự chỉ để cung cấp cho bạn một hương vị của một số 9 00:00:16,230 --> 00:00:21,750 của các cấu trúc cơ bản của những gì đi vào lập trình web và hôm nay web 10 00:00:21,750 --> 00:00:23,980 phát triển, do đó phía tĩnh của things-- 11 00:00:23,980 --> 00:00:26,660 không có logic, không có lập trình ngôn ngữ, chỉ cần nội dung tĩnh. 12 00:00:26,660 --> 00:00:29,660 Và nó sẽ cung cấp cho chúng tôi một cơ hội để thực sự nhìn thấy một máy chủ web là gì, 13 00:00:29,660 --> 00:00:34,140 xem những gì một tập tin HTML là, xem những gì nó là HTTP được thực sự phục vụ lên. 14 00:00:34,140 --> 00:00:38,600 Nhưng trước khi chúng ta đi sâu vào, bất kỳ hồi câu hỏi về điện toán đám mây 15 00:00:38,600 --> 00:00:43,922 an ninh hoặc bất cứ điều gì ở giữa? 16 00:00:43,922 --> 00:00:44,890 >> Không? 17 00:00:44,890 --> 00:00:47,181 Được rồi, tốt, chúng ta hãy làm điều này, chỉ trong trường hợp 18 00:00:47,181 --> 00:00:49,680 quá trình đăng ký cái gì mất một vài phút. 19 00:00:49,680 --> 00:00:51,221 Chúng tôi sẽ cho nó làm điều đó trong nền. 20 00:00:51,221 --> 00:00:56,860 Đi trước, nếu bạn có thể, để đây-- URL này c9.io. 21 00:00:56,860 --> 00:01:02,810 Đây là một bên thứ ba service-- nền tảng như một dịch vụ, nếu bạn will-- 22 00:01:02,810 --> 00:01:05,190 có nghĩa là sẽ mời các bạn để đăng ký một tài khoản, 23 00:01:05,190 --> 00:01:08,650 và nó sẽ cung cấp cho tất cả các bạn một tài khoản trong cái gọi là điện toán đám mây 24 00:01:08,650 --> 00:01:11,330 trên cơ sở hạ tầng của người khác, một công ty gọi là Cloud9. 25 00:01:11,330 --> 00:01:13,350 Nhưng những gì là tốt đẹp về này là họ cung cấp cho bạn 26 00:01:13,350 --> 00:01:15,990 một xấp xỉ của một phát triển thực tế thực tế 27 00:01:15,990 --> 00:01:18,530 môi trường, mặc dù trong đám mây và trong một trình duyệt web, 28 00:01:18,530 --> 00:01:21,175 và chúng tôi sẽ sử dụng điều này để thực sự thử nghiệm một chút ngày hôm nay. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 Và sau đó đi trước và chỉ cần điều hướng cách của bạn để quá trình đăng ký 31 00:01:30,260 --> 00:01:32,630 nếu bạn có thể. 32 00:01:32,630 --> 00:01:36,080 Vì vậy, chúng tôi xảy ra để sử dụng trong các lớp học Tôi dạy cho tất cả các sinh viên của chúng tôi, 33 00:01:36,080 --> 00:01:39,140 cả trong khuôn viên trường và tắt bây giờ, và nó thay thế những gì lịch sử 34 00:01:39,140 --> 00:01:41,390 là phần mềm khác có thể tải về. 35 00:01:41,390 --> 00:01:44,620 Vì vậy, những gì bạn đã đạt được quyền truy cập vào là một trong những máy ảo, 36 00:01:44,620 --> 00:01:46,460 về cơ bản, mà tôi đã mô tả trước đó. 37 00:01:46,460 --> 00:01:50,260 Vì vậy, công ty này có thể Cloud9 Giá thuê từ một party-- thứ ba thực sự 38 00:01:50,260 --> 00:01:52,760 trong trường hợp này, Google-- toàn loạt các máy ảo 39 00:01:52,760 --> 00:01:56,500 rằng họ bằng cách nào đó chop lên thành những ảo ảnh của máy chủ cá nhân 40 00:01:56,500 --> 00:01:58,610 rằng mỗi chúng ta có toàn quyền kiểm soát. 41 00:01:58,610 --> 00:02:01,640 Nó không hoàn toàn chính xác để nói rằng họ đang máy ảo, 42 00:02:01,640 --> 00:02:04,550 tuy nhiên, vì những gì Cloud9 thực sự sử dụng 43 00:02:04,550 --> 00:02:07,570 là một công nghệ khá mới hơn gọi Containerization. 44 00:02:07,570 --> 00:02:13,150 Và hãy để tôi lấy ảnh này ở đây để vẽ bức tranh này. 45 00:02:13,150 --> 00:02:16,540 >> Một container là, nếu bạn nhớ lại hình ảnh 46 00:02:16,540 --> 00:02:19,900 từ trước đó, một chút nhẹ trọng lượng hơn so với một máy ảo. 47 00:02:19,900 --> 00:02:22,090 Trong thực tế, trong khi cuối cùng Hiện chúng tôi đã nói chuyện về việc có 48 00:02:22,090 --> 00:02:25,170 là một điều hành hệ thống và một hypervisor 49 00:02:25,170 --> 00:02:28,260 và sau đó hệ thống điều hành khách, khách hệ điều hành, điều hành khách 50 00:02:28,260 --> 00:02:30,940 hệ thống, trên đầu trang của bạn phần cứng vật lý, 51 00:02:30,940 --> 00:02:33,740 sự khác biệt với phiên bản mới hơn này công nghệ, Containerization, 52 00:02:33,740 --> 00:02:37,290 là tất cả họ bằng cách nào đó chia sẻ cùng hệ điều hành. 53 00:02:37,290 --> 00:02:39,970 Nhưng họ vẫn tạo những ảo ảnh của tất cả mọi người 54 00:02:39,970 --> 00:02:44,590 có độc quyền của riêng mình quyền hành chính và các tập tin 55 00:02:44,590 --> 00:02:45,400 trên máy chủ. 56 00:02:45,400 --> 00:02:48,230 Nhưng có ít phần mềm giữa bạn và phần cứng. 57 00:02:48,230 --> 00:02:52,260 Kết quả của việc đó là, Về lý thuyết, một hiệu suất cao hơn, 58 00:02:52,260 --> 00:02:55,470 bởi vì bạn đang sử dụng hoặc lãng phí nguồn tài nguyên ít hơn 59 00:02:55,470 --> 00:02:57,360 về cái gọi là lớp ảo hóa. 60 00:02:57,360 --> 00:02:59,420 Vì vậy, đây được gọi là Containerization bởi thiên nhiên 61 00:02:59,420 --> 00:03:02,920 bằng cách của một công nghệ gọi là Docker, mà là rất nhiều trở thành chính mình. 62 00:03:02,920 --> 00:03:05,086 Và đây là cái gì đó kỹ sư tại công ty của bạn 63 00:03:05,086 --> 00:03:08,610 có thể loại loại bắt đầu nói chuyện về sớm nếu họ chưa có, 64 00:03:08,610 --> 00:03:11,590 mặc dù có chắc chắn không lý do để nhảy vào bất kỳ bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> Vì vậy, với những gì đã nói, những gì bạn có thể nhìn thấy bây giờ 66 00:03:15,410 --> 00:03:22,670 là một màn hình giống một chút như thế này. 67 00:03:22,670 --> 00:03:23,170 ĐƯỢC. 68 00:03:23,170 --> 00:03:25,260 Và chỉ cần gọi cho tôi hơn nếu không. 69 00:03:25,260 --> 00:03:27,440 Và nếu vậy-- tôi sẽ đi qua nếu không. 70 00:03:27,440 --> 00:03:30,244 Hãy kích là lớn cộng để tạo ra một không gian làm việc, 71 00:03:30,244 --> 00:03:31,660 và bạn sẽ thấy một màn hình như thế này. 72 00:03:31,660 --> 00:03:35,020 Bạn có thể gọi các không gian làm việc đặt tên cho bất cứ điều gì bạn muốn cho bây giờ. 73 00:03:35,020 --> 00:03:38,660 Và chỉ thực sự đơn giản, đi và- tốt, một số bạn 74 00:03:38,660 --> 00:03:39,660 đã có không gian làm việc. 75 00:03:39,660 --> 00:03:47,050 Gọi nó là bất cứ điều gì bạn want-- kinh doanh, Harvard, thứ năm, bất cứ điều gì bạn muốn. 76 00:03:47,050 --> 00:03:48,800 Bạn không cần một mô tả. 77 00:03:48,800 --> 00:03:52,380 Bạn có thể để lại cho tư nhân, trừ khi bạn đã có một loạt các không gian làm việc. 78 00:03:52,380 --> 00:03:55,280 Nếu bạn buộc phải thực hiện công khai, đó là tốt cho mục đích của ngày hôm nay. 79 00:03:55,280 --> 00:03:56,750 Ở đây cũng vậy, là một trong những Upsells. 80 00:03:56,750 --> 00:03:59,939 Bạn sẽ có được một không gian làm việc riêng của mặc định. Nhưng nếu bạn muốn biết thêm, 81 00:03:59,939 --> 00:04:00,980 bạn phải trả thêm. 82 00:04:00,980 --> 00:04:02,870 Nếu không, họ buộc bạn để làm cho công việc của bạn. 83 00:04:02,870 --> 00:04:05,600 Nhưng đó là tốt, bởi vì họ cũng nhắm mục tiêu này tại cộng đồng mã nguồn mở 84 00:04:05,600 --> 00:04:07,700 để khuyến khích mọi người thực sự cộng tác. 85 00:04:07,700 --> 00:04:10,699 >> Và điều cuối cùng đó là quan trọng, mặc dù, là, sau khi bạn chọn một tên 86 00:04:10,699 --> 00:04:17,140 và sau khi bạn chọn tư nhân hoặc công cộng, bấm HTML5, biểu tượng màu cam lớn 87 00:04:17,140 --> 00:04:22,430 thứ hai từ bên trái, và sau đó nhấp vào Tạo Workspace. 88 00:04:22,430 --> 00:04:24,580 Và nó sẽ có thể mất một phút hoặc lâu hơn, 89 00:04:24,580 --> 00:04:26,540 nhưng sau đó bạn sẽ có một môi trường, một khi bạn 90 00:04:26,540 --> 00:04:30,544 làm điều đó, trông gợi nhớ những gì tôi có trên màn hình ở đây bây giờ. 91 00:04:30,544 --> 00:04:33,210 Nhưng, một lần nữa, nó có thể mất một phút hoặc nhiều hơn để có được màn hình này 92 00:04:33,210 --> 00:04:34,770 một khi bạn đã nhấp vào Tạo Workspace. 93 00:04:34,770 --> 00:04:37,936 Nhưng chỉ cờ tôi lại nếu bạn muốn tôi để có một cái nhìn bất cứ điều gì hoặc tư vấn. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Tất cả các quyền. 96 00:04:40,690 --> 00:04:42,390 Vì vậy, tôi sẽ để nền tảng này cho bây giờ. 97 00:04:42,390 --> 00:04:44,260 Hãy gọi cho tôi hơn nếu bạn có vẻ có bất kỳ khó khăn kỹ thuật. 98 00:04:44,260 --> 00:04:46,210 Nhưng, một lần nữa, nó có thể mất một chút cho rằng để mở. 99 00:04:46,210 --> 00:04:49,570 Và chúng ta hãy đi trước và nói về những gì nó thực sự có nghĩa là để làm cho một trang web, 100 00:04:49,570 --> 00:04:52,780 những gì HTML là, và làm thế nào tất cả những điều này tại liên kết nối như chúng ta đang bắt đầu 101 00:04:52,780 --> 00:04:54,730 để thực sự sử dụng một số công nghệ. 102 00:04:54,730 --> 00:04:58,310 Vì vậy, nó quay ra rằng tôi có thể đi trên Mac nhỏ của tôi ở đây, 103 00:04:58,310 --> 00:05:01,650 mở một chương trình đơn giản được gọi là TextEdit, hoặc trên Windows tôi có thể 104 00:05:01,650 --> 00:05:04,480 mở một cái gì đó gọi là Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 Và tôi chỉ có thể chỉ đơn giản là làm điều gì đó như này-- "hello, thế giới." 106 00:05:08,260 --> 00:05:12,020 Và sau đó tôi có thể tiết kiệm này là hello.txt Vì vậy, không có phép thuật đó. 107 00:05:12,020 --> 00:05:15,200 Điều này không có gì để làm với web lập trình, không có gì để làm với HTML. 108 00:05:15,200 --> 00:05:16,790 Chỉ cần tạo ra một tập tin văn bản đơn giản. 109 00:05:16,790 --> 00:05:20,600 Nhưng nó chỉ ra rằng một web trang là nghĩa đen chỉ đó. 110 00:05:20,600 --> 00:05:24,020 Đó là một tập tin văn bản có chứa văn bản đơn giản mà bạn có thể gõ vào bàn phím của bạn, 111 00:05:24,020 --> 00:05:30,070 nhưng nó thường nhưng không phải lúc nào kết thúc trong không .txt nhưng .html hoặc .htm. 112 00:05:30,070 --> 00:05:32,050 Và bạn không chỉ gõ các từ trong tập tin. 113 00:05:32,050 --> 00:05:35,280 Bạn thực sự phải sử dụng những thứ được gọi là thẻ hoặc tổng quát hơn, một cái gì đó 114 00:05:35,280 --> 00:05:37,190 được gọi là ngôn ngữ đánh dấu. 115 00:05:37,190 --> 00:05:40,510 >> Vì vậy, tôi sẽ rất nhanh chóng gõ và sau đó giải thích như sau. 116 00:05:40,510 --> 00:05:42,290 Tôi sẽ lần đầu tiên loại này, trong đó nói rằng, 117 00:05:42,290 --> 00:05:45,730 hey, trình duyệt, ở đây có một trang web viết bằng HTML. 118 00:05:45,730 --> 00:05:51,850 Và hai điều này cùng nhau nói, hey, trình duyệt, sau đây thực sự là HTML. 119 00:05:51,850 --> 00:05:55,790 Hey, trình duyệt, ở đây có đầu hoặc đầu trang của tôi. 120 00:05:55,790 --> 00:05:59,900 Hey, trình duyệt, bên trong của đỉnh trang của tôi, đặt một tiêu đề đó là, "hello, 121 00:05:59,900 --> 00:06:01,610 thế giới. " 122 00:06:01,610 --> 00:06:08,370 Hey, trình duyệt, sau khi người đứng đầu của tôi trang, ở đây có cơ thể của trang web của tôi. 123 00:06:08,370 --> 00:06:12,170 Và, hey, trình duyệt, cơ thể của tôi trang cũng nên nói, "hello thế giới." 124 00:06:12,170 --> 00:06:15,500 Vì vậy, các chi tiết nổi bật ở đây là gì? 125 00:06:15,500 --> 00:06:17,960 Đây là những gì thường được gọi là một tuyên bố doc-loại, 126 00:06:17,960 --> 00:06:20,190 và, thẳng thắn, đó là một chút khó nhớ này lúc đầu tiên. 127 00:06:20,190 --> 00:06:21,481 Bạn chỉ cần loại sao chép-dán nó. 128 00:06:21,481 --> 00:06:23,760 Đây là cách thức nói, hey, trình duyệt, 129 00:06:23,760 --> 00:06:28,030 Tôi đang sử dụng phiên bản HTML 5 mà ra một chút gần đây. 130 00:06:28,030 --> 00:06:31,380 Đó là một câu thần chú ma thuật rằng một số con người với một ý thức kém của thiết kế 131 00:06:31,380 --> 00:06:33,640 quyết định đưa vào trên cùng của tập tin. 132 00:06:33,640 --> 00:06:35,473 Mặc dù đó là một ít phức tạp, đó là tất cả 133 00:06:35,473 --> 00:06:38,250 nó means-- hey, trình duyệt ở đây đi kèm với phiên bản 5 của HTML. 134 00:06:38,250 --> 00:06:41,741 >> Phần còn lại của điều này đã được với chúng tôi trong một thời gian bây giờ, lịch sử, 135 00:06:41,741 --> 00:06:44,740 nhưng nó được phát triển, và nó có thể được nhận được một chút đơn giản. 136 00:06:44,740 --> 00:06:47,320 Chú ý một vài đặc điểm về những gì tôi đã đánh dấu. 137 00:06:47,320 --> 00:06:49,890 Có những điều này với góc brackets-- khung bên trái 138 00:06:49,890 --> 00:06:51,040 và khung bên phải. 139 00:06:51,040 --> 00:06:52,490 Và nhận thấy sự đối xứng ở đây. 140 00:06:52,490 --> 00:06:57,340 Và bằng đối xứng, ý tôi là, cũng giống như tôi có bắt đầu từ khóa này ở đây hay một thẻ mở 141 00:06:57,340 --> 00:07:01,560 nếu bạn sẽ, xuống đây tôi có một tag gần hoặc một thẻ kết thúc đó là 142 00:07:01,560 --> 00:07:06,460 khác nhau chỉ trong chừng mực nó có này chém vào đầu của từ 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 Và bạn có thể nghĩ này như tôi đã tình cờ 145 00:07:09,360 --> 00:07:12,280 đề xuất trước, hey, trình duyệt, ở đây có một số mã HTML. 146 00:07:12,280 --> 00:07:16,060 Và ngược lại, hey, trình duyệt, đó là nó cho sự bắt đầu và kết thúc HTML--. 147 00:07:16,060 --> 00:07:18,440 >> Trong khi đó hey, trình duyệt ở đây đến đầu trang của tôi. 148 00:07:18,440 --> 00:07:20,140 Hey, trình duyệt, đó là nó cho người đứng đầu. 149 00:07:20,140 --> 00:07:22,240 Hey, trình duyệt, đây là cơ thể của trang web của tôi. 150 00:07:22,240 --> 00:07:24,020 Hey, trình duyệt, đó là nó cho cơ thể. 151 00:07:24,020 --> 00:07:26,940 Và bên trong đó là một số văn bản tùy ý cho bây giờ. 152 00:07:26,940 --> 00:07:30,520 Và bên trong của người đứng đầu, trong khi đó, là một số tùy ý, nhưng được gắn thẻ, 153 00:07:30,520 --> 00:07:34,410 có thể nói, văn bản mà nói, danh hiệu trang của tôi sẽ là "hello, thế giới." 154 00:07:34,410 --> 00:07:37,470 Bây giờ, bây giờ, bạn có thể giả định rằng các trình duyệt 155 00:07:37,470 --> 00:07:41,762 có only-- hoặc, đúng hơn, các trang web có chỉ có hai parts-- đầu và cơ thể. 156 00:07:41,762 --> 00:07:44,220 Và người đứng đầu thường là chỉ như thanh menu, các công cụ 157 00:07:44,220 --> 00:07:45,510 thực sự chỉ ở đầu. 158 00:07:45,510 --> 00:07:48,910 Và cơ thể là ruột của trang, tất cả mọi thứ trong đó hình chữ nhật lớn 159 00:07:48,910 --> 00:07:50,239 mà lấp đầy màn hình. 160 00:07:50,239 --> 00:07:51,780 Vì vậy, tôi sẽ đi trước và làm điều này. 161 00:07:51,780 --> 00:07:54,400 Tôi sẽ đi trước và bấm Save, File Save. 162 00:07:54,400 --> 00:07:58,580 Và tôi sẽ tiết kiệm này như hello.html, 163 00:07:58,580 --> 00:08:00,870 và tôi chỉ cần đi tới đặt nó trên máy tính để bàn của tôi. 164 00:08:00,870 --> 00:08:03,520 Và tôi sẽ đi trước và nhấn Save. 165 00:08:03,520 --> 00:08:05,806 Và notice-- Mac của tôi tại ít nhất là hét lên với em. 166 00:08:05,806 --> 00:08:07,180 Bạn có chắc chắn muốn làm điều này? 167 00:08:07,180 --> 00:08:08,710 Và tôi sẽ nói, có, sử dụng HTML. 168 00:08:08,710 --> 00:08:10,400 Tôi biết tốt hơn trong trường hợp này. 169 00:08:10,400 --> 00:08:14,686 Và bây giờ tôi sẽ đi đến máy tính để bàn của tôi nơi mà tôi có tập tin này đột ngột. 170 00:08:14,686 --> 00:08:16,060 Và tôi sẽ tăng gấp đôi vào nó. 171 00:08:16,060 --> 00:08:18,268 Và bạn sẽ nhận thấy rằng, bằng cách mặc định, Chrome đã mở ra. 172 00:08:18,268 --> 00:08:19,996 Đó là bởi vì đó là trình duyệt mặc định của tôi. 173 00:08:19,996 --> 00:08:21,370 Và nó chỉ nói, "hello, thế giới." 174 00:08:21,370 --> 00:08:23,078 Nhưng nó nói "xin chào, thế giới "trong hai nơi. 175 00:08:23,078 --> 00:08:23,979 Chú ý trên bên trái. 176 00:08:23,979 --> 00:08:25,020 Khá khó để bỏ lỡ. 177 00:08:25,020 --> 00:08:26,180 Nó lớn và đậm. 178 00:08:26,180 --> 00:08:30,690 Và nơi nào khác nó có vẻ nói, "hello, thế giới"? 179 00:08:30,690 --> 00:08:31,470 >> Đung Tab. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. Malan: Yeah, các tab riêng của mình. 181 00:08:33,100 --> 00:08:35,159 Vì vậy, khi tôi biết người đứng đầu của trang là tất cả mọi thứ lên top-- 182 00:08:35,159 --> 00:08:36,367 và thực sự đây là tiêu đề. 183 00:08:36,367 --> 00:08:37,710 Nó chỉ là trong tab ở đây. 184 00:08:37,710 --> 00:08:40,320 Và tôi có thể kéo tab này ra để không nhầm lẫn. 185 00:08:40,320 --> 00:08:43,360 Đây chỉ là một tab duy nhất bây giờ, và thực sự chúng ta thấy "hello, world" 186 00:08:43,360 --> 00:08:45,970 lên ở đây và "hello, world" xuống đây. 187 00:08:45,970 --> 00:08:47,160 Vì vậy, khá đơn giản. 188 00:08:47,160 --> 00:08:49,050 Nhưng nó cũng khá đơn giản. 189 00:08:49,050 --> 00:08:50,440 Và thật ra, tôi phóng to. 190 00:08:50,440 --> 00:08:53,272 Tôi có thể thay đổi kích thước phông chữ chỉ phóng đại khả năng truy cập. 191 00:08:53,272 --> 00:08:56,830 Nhưng bây giờ chúng ta làm điều gì đó một chút thú vị hơn. 192 00:08:56,830 --> 00:08:59,760 >> Tôi sẽ go-- Lỗi chính, chúng ta hãy tôi trở lại với tập tin văn bản của tôi. 193 00:08:59,760 --> 00:09:02,400 Tôi sẽ trở lại với tôi tập tin văn bản, và tôi sẽ 194 00:09:02,400 --> 00:09:06,320 để thay đổi điều này và nói "Hello, Disney World." 195 00:09:06,320 --> 00:09:07,970 Tiết kiệm. 196 00:09:07,970 --> 00:09:10,919 Và trở lại của tôi trình duyệt và nhấn Reload. 197 00:09:10,919 --> 00:09:12,710 Và bây giờ, tất nhiên, nó nói "Disney World." 198 00:09:12,710 --> 00:09:15,500 Và tôi sẽ để phóng to nhân tạo chỉ vì vậy nó dễ dàng hơn để xem. 199 00:09:15,500 --> 00:09:19,012 Vì vậy, bây giờ, không may, tôi loại muốn đối với: thực sự, đó là một tính năng Mac. 200 00:09:19,012 --> 00:09:21,720 Tôi muốn nhấn vào Disney World và đi đâu đó như disney.com, 201 00:09:21,720 --> 00:09:23,290 nhưng điều đó không làm việc. 202 00:09:23,290 --> 00:09:26,850 Vì vậy, một nguyên lý cơ bản của trang web là siêu liên kết, liên kết mà đi nơi khác. 203 00:09:26,850 --> 00:09:28,390 Vậy làm thế nào để tôi làm điều đó? 204 00:09:28,390 --> 00:09:34,690 Vâng, tôi chỉ có thể nói, "Hello, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Lưu này. 206 00:09:36,110 --> 00:09:37,620 Nạp lại. 207 00:09:37,620 --> 00:09:39,400 Nhưng điều này cũng không thể nhấp. 208 00:09:39,400 --> 00:09:42,930 Và những gì tốt đẹp ở đây, mặc dù đây không phải là chức năng nào, 209 00:09:42,930 --> 00:09:45,930 là nó có vẻ rằng trình duyệt theo nghĩa đen chỉ làm 210 00:09:45,930 --> 00:09:46,950 những gì tôi nói với nó để làm. 211 00:09:46,950 --> 00:09:50,110 Vì vậy, nếu tôi chỉ cần gõ một URL như thế này, nó chỉ cần đi để chỉ cho tôi các URL. 212 00:09:50,110 --> 00:09:54,270 Tôi cần phải sử dụng thẻ hoặc đánh dấu ngôn ngữ để thực sự nói 213 00:09:54,270 --> 00:09:55,621 trình duyệt để làm nhiều hơn. 214 00:09:55,621 --> 00:09:57,870 Vì vậy, tôi sẽ đi trước và xóa này cho một thời điểm. 215 00:09:57,870 --> 00:10:00,980 Và tôi sẽ nói, hey, trình duyệt, bắt đầu một neo ở đây, 216 00:10:00,980 --> 00:10:02,650 một liên kết như vậy để nói chuyện. 217 00:10:02,650 --> 00:10:07,500 Và các siêu tham khảo, các điểm đến neo rằng, nên URL này. 218 00:10:07,500 --> 00:10:08,750 Và thông báo báo giá của tôi. 219 00:10:08,750 --> 00:10:11,590 Tôi có thể sử dụng dấu ngoặc đơn, quá, nhưng bạn có để phù hợp, 220 00:10:11,590 --> 00:10:14,270 và tôi thường chỉ cần sử dụng dấu ngoặc kép để giữ cho nó đơn giản. 221 00:10:14,270 --> 00:10:16,820 Chú tôi sẽ đóng thẻ. 222 00:10:16,820 --> 00:10:21,160 Và sau đó ở đây tôi sẽ nói, "Disney World." 223 00:10:21,160 --> 00:10:26,890 Và bây giờ tôi cần một số symmetry-- mở khung, / a, đóng khung. 224 00:10:26,890 --> 00:10:28,090 >> Vì vậy, những gì đã giới thiệu tôi? 225 00:10:28,090 --> 00:10:30,100 Chúng tôi đã có một vài thẻ đã. 226 00:10:30,100 --> 00:10:32,410 HTML, Head, Tiêu đề, cơ thể, là tất cả các thẻ, có thể nói, 227 00:10:32,410 --> 00:10:34,280 với các đối tác mở và đóng cửa. 228 00:10:34,280 --> 00:10:36,530 Nhưng thông báo, đây là loại của cơ bản khác nhau. 229 00:10:36,530 --> 00:10:39,140 Đây là những gì chúng ta sẽ gọi trong HTML một thuộc tính. 230 00:10:39,140 --> 00:10:41,451 Và một thuộc tính là chỉ là một cặp khóa-giá trị. 231 00:10:41,451 --> 00:10:43,950 Đây là một điều phổ biến trong máy tính science-- cặp khóa-giá trị. 232 00:10:43,950 --> 00:10:45,770 Đó là loại công cụ của thương mại. 233 00:10:45,770 --> 00:10:47,040 Một khóa và giá trị. 234 00:10:47,040 --> 00:10:49,390 Một từ và sau đó một số Nói một cách khác hay từ. 235 00:10:49,390 --> 00:10:53,790 Và trong trường hợp này, chính là href, và giá trị là URL đầy đủ. 236 00:10:53,790 --> 00:10:57,890 Và những gì một thuộc tính nào là nó ảnh hưởng đến hành vi của một thẻ. 237 00:10:57,890 --> 00:11:01,010 Và trong trường hợp này, chúng ta cần phải ảnh hưởng hành vi của các thẻ neo, 238 00:11:01,010 --> 00:11:04,140 bởi vì chúng ta cần phải neo liên kết đến đâu đó. 239 00:11:04,140 --> 00:11:06,960 Và làm thế nào bạn làm điều đó là bằng cách của các thuộc tính. 240 00:11:06,960 --> 00:11:08,970 >> Vì vậy, tôi sẽ đi trước và lưu các tập tin bây giờ. 241 00:11:08,970 --> 00:11:11,300 Quay trở lại trình duyệt và tải lại của tôi. 242 00:11:11,300 --> 00:11:14,580 Và, thì đấy, bây giờ chúng ta có khởi đầu của một trang web hợp pháp. 243 00:11:14,580 --> 00:11:18,420 Super-đơn giản, nhưng nếu tôi đưa chuột qua thông báo này-- ở góc dưới bên trái, 244 00:11:18,420 --> 00:11:19,830 đó là siêu nhỏ. 245 00:11:19,830 --> 00:11:21,730 Nhưng bạn thấy www.disney.com. 246 00:11:21,730 --> 00:11:27,076 Và nếu tôi nhấp vào nó, thực sự đây whisks tôi đi đến disney.com. 247 00:11:27,076 --> 00:11:29,380 Bây giờ, những điều kỳ lạ ở đây là nó không phải là 248 00:11:29,380 --> 00:11:33,940 các best-- URL thị trường nhất, nhưng đó là tốt bởi vì tập tin này không 249 00:11:33,940 --> 00:11:35,360 tồn tại trên World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Nó tồn tại như là một tập tin cục bộ rõ ràng Người dùng của tôi directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 John Harvard-- / máy tính để bàn. 252 00:11:41,890 --> 00:11:42,634 Nhưng nó có một URL. 253 00:11:42,634 --> 00:11:43,800 Nó chỉ xảy ra được địa phương. 254 00:11:43,800 --> 00:11:47,050 Thật không may, không ai trong số các bạn có thể truy cập này, bởi vì nếu bạn nhập URL này, 255 00:11:47,050 --> 00:11:49,980 bạn muốn được nói cho trình duyệt của bạn, tìm kiếm một tập tin gọi là hello.html 256 00:11:49,980 --> 00:11:50,772 trên ổ cứng của bạn. 257 00:11:50,772 --> 00:11:53,271 Và, tất nhiên, trừ khi bạn đã được sau cùng bằng tay, 258 00:11:53,271 --> 00:11:54,530 nó sẽ không tồn tại ở đó. 259 00:11:54,530 --> 00:11:55,190 >> Vì vậy, đó là tốt. 260 00:11:55,190 --> 00:11:57,815 Chúng tôi vẫn cần có một cách, cuối cùng, để có được tập tin này vào trang web, 261 00:11:57,815 --> 00:12:01,180 nhưng chúng ta hãy trêu chọc nhau một vài Vấn đề bảo mật của những gì chúng ta chỉ 262 00:12:01,180 --> 00:12:04,850 thấy và buộc nó lại đến sớm hơn thảo luận từ sáng nay. 263 00:12:04,850 --> 00:12:08,200 Nó chỉ ra rằng, nếu một trình duyệt theo nghĩa đen chỉ làm 264 00:12:08,200 --> 00:12:12,560 những gì tôi nói với nó để làm, và có vẻ như là trường hợp mà một thẻ neo là 265 00:12:12,560 --> 00:12:17,380 ảnh hưởng bởi giá trị của thuộc tính được gọi href này 266 00:12:17,380 --> 00:12:20,810 nhưng nó sẽ hiển thị này văn bản, điều này có vẻ như 267 00:12:20,810 --> 00:12:26,520 ngụ ý rằng tôi có thể đặt URL ở cả hai nơi và sau đó tải lại 268 00:12:26,520 --> 00:12:29,100 và bây giờ thấy URL và đi vào URL. 269 00:12:29,100 --> 00:12:32,680 Thông báo, nếu tôi đưa chuột qua phía dưới bên trái, Tôi thực sự sẽ vẫn để disney.com. 270 00:12:32,680 --> 00:12:38,340 >> Vì vậy, nếu bạn đã từng phished-- P-H-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 với một trong những email không có thật từ như PayPal ngân hàng của bạn, 272 00:12:42,820 --> 00:12:46,470 bạn đã có thể nhận được các liên kết bên trong của email mà bạn đang đọc mà 273 00:12:46,470 --> 00:12:49,970 bảo bạn phải bấm vào đây để đi xác nhận mật khẩu hoặc xác nhận ngày sinh của bạn của bạn 274 00:12:49,970 --> 00:12:53,840 hay xã hội hoặc một cái gì đó về mặt xã hội kỹ thuật bạn tiết lộ 275 00:12:53,840 --> 00:12:54,920 thông tin. 276 00:12:54,920 --> 00:12:57,625 Vâng, tôi vẫn có thể mất lợi thế này, không có thể tôi? 277 00:12:57,625 --> 00:13:01,240 Tôi có thể nói điều gì đó như, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 Và thay vì disney.com, tôi có thể đi đến, như thế, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Nạp lại. 280 00:13:12,850 --> 00:13:16,620 Và làm thế nào là nó dễ dàng để gạt người, đặc biệt là một người đọc không kỹ thuật 281 00:13:16,620 --> 00:13:20,649 hoặc đọc qua loa đọc hơn để nhấp 282 00:13:20,649 --> 00:13:23,940 một liên kết như thế này, nếu tôi bấm it-- Tôi thực sự không muốn đi badguy.com. 283 00:13:23,940 --> 00:13:25,398 Tôi không biết những gì thực sự ở đó. 284 00:13:25,398 --> 00:13:30,080 Vì vậy, paypal.com, thông báo, là những gì nó nói nó sẽ, 285 00:13:30,080 --> 00:13:33,210 nhưng tất nhiên, nếu tôi nhìn xuống siêu thấp, đó là một chút mờ, 286 00:13:33,210 --> 00:13:34,230 nhưng nó nói badguy.com. 287 00:13:34,230 --> 00:13:38,644 Đó là chỉ nói cho ngay bây giờ rằng tôi sẽ đến chỗ sai. 288 00:13:38,644 --> 00:13:41,560 Và khi tôi đã nói trước đó rằng các ngân hàng thực sự không nên khuyến khích hoặc đào tạo 289 00:13:41,560 --> 00:13:44,510 người sử dụng vào các liên kết nhấp vào, này chỉ là một biểu hiện của nó. 290 00:13:44,510 --> 00:13:45,430 Và nó là đơn giản. 291 00:13:45,430 --> 00:13:48,120 Bây giờ bạn có một kẻ thù nếu bạn làm điều gì đó như thế này 292 00:13:48,120 --> 00:13:51,000 và cố gắng để lừa người dùng vào thăm trang web của bạn. 293 00:13:51,000 --> 00:13:53,320 Nhưng hiện nay, chúng tôi sẽ giữ những điều tốt đẹp và sạch sẽ. 294 00:13:53,320 --> 00:13:55,640 Chúng ta sẽ đi trước và tua lại những thay đổi này. 295 00:13:55,640 --> 00:13:56,530 Nạp lại trang. 296 00:13:56,530 --> 00:13:57,740 Và tôi trở lại disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Hãy xem, nếu chúng ta không thể trêu chọc hơn này ngoài một chút. 298 00:14:00,660 --> 00:14:04,160 Vì vậy, "hello, Disney World." 299 00:14:04,160 --> 00:14:05,950 Tôi sẽ nói ở đây. 300 00:14:05,950 --> 00:14:08,220 Có lẽ tôi sẽ làm cho một số phòng. 301 00:14:08,220 --> 00:14:12,730 "Chúng tôi hy vọng bạn tận hưởng kì nghỉ của bạn!" 302 00:14:12,730 --> 00:14:13,830 Tiết kiệm. 303 00:14:13,830 --> 00:14:15,850 Nạp lại. 304 00:14:15,850 --> 00:14:19,010 Nó không rea-- đó không những gì tôi dự định, phải không? 305 00:14:19,010 --> 00:14:21,870 Tôi có nghĩa là, nếu tôi đang điều trị văn bản của tôi nộp như một trình xử lý, 306 00:14:21,870 --> 00:14:24,894 những gì bạn đã hy vọng sẽ xảy ra ở đây? 307 00:14:24,894 --> 00:14:27,060 Vâng, tôi cảm thấy như có nên ngắt dòng ở đây, 308 00:14:27,060 --> 00:14:28,799 do đó, nó cảm thấy lỗi trong một số cách. 309 00:14:28,799 --> 00:14:31,090 Nhưng đó thực sự có chủ ý, vì như trước, 310 00:14:31,090 --> 00:14:33,381 trình duyệt chỉ là sẽ làm những gì bạn cho nó làm. 311 00:14:33,381 --> 00:14:34,806 Tôi đã không nói với nó để phá vỡ đường dây. 312 00:14:34,806 --> 00:14:37,930 Tôi đã không nói với nó để di chuyển xuống, thậm chí mặc dù, trực giác, tôi cảm thấy như tôi đã làm. 313 00:14:37,930 --> 00:14:39,805 Vì vậy, hóa ra chúng ta cần một chút đánh dấu nhiều hơn, 314 00:14:39,805 --> 00:14:41,390 và tôi sẽ sửa lỗi này như sau. 315 00:14:41,390 --> 00:14:46,160 Tôi sẽ lời nói đầu này đầu tiên xin chào với những gì được gọi là thẻ đoạn. 316 00:14:46,160 --> 00:14:48,920 Và sau đó tôi sẽ đi trước và quấn câu khác này 317 00:14:48,920 --> 00:14:54,370 trong một thẻ đoạn, mặc dù họ là đoạn văn siêu ngắn. 318 00:14:54,370 --> 00:14:55,930 Bây giờ tôi sẽ tiết kiệm. 319 00:14:55,930 --> 00:14:57,160 Nạp lại. 320 00:14:57,160 --> 00:14:59,070 Và bây giờ chúng tôi có mà không gian, và chúng tôi loại 321 00:14:59,070 --> 00:15:01,680 có ngữ nghĩa của hai đoạn riêng biệt. 322 00:15:01,680 --> 00:15:05,290 >> Đó là tất cả tốt và tốt, nhưng nó sẽ được tốt đẹp để thêm hình ảnh vào trang này, 323 00:15:05,290 --> 00:15:08,710 vì vậy tôi sẽ đi tìm Mickey Mouse trên Google Images. 324 00:15:08,710 --> 00:15:12,830 Và chỉ để cho vui, tôi sẽ lấy hình ảnh này. 325 00:15:12,830 --> 00:15:15,350 Tôi sẽ đi trước bây giờ và lấy URL của hình ảnh này, 326 00:15:15,350 --> 00:15:16,510 mặc dù có khác nhau cách để làm điều này. 327 00:15:16,510 --> 00:15:18,520 Để bây giờ, tôi chỉ cần đi để sao chép URL. 328 00:15:18,520 --> 00:15:24,770 Tôi sẽ quay trở lại vào văn bản của tôi tập tin, và tôi sẽ nói ở đây, 329 00:15:24,770 --> 00:15:31,160 img src = quote unquote URL đó, siêu dài. 330 00:15:31,160 --> 00:15:34,580 Và sau đó khái niệm về một hình ảnh là một chút khác nhau. 331 00:15:34,580 --> 00:15:38,640 Có thực sự không có khái niệm bắt đầu một hình ảnh và kết thúc một hình ảnh, 332 00:15:38,640 --> 00:15:40,630 như một sự khởi đầu thẻ thẻ kết thúc. 333 00:15:40,630 --> 00:15:43,840 Vì vậy, nó cảm thấy một chút lạ cho tôi về ngữ nghĩa để làm điều này, 334 00:15:43,840 --> 00:15:45,390 để có một thẻ cận hình ảnh. 335 00:15:45,390 --> 00:15:46,780 Đó không phải là không chính xác. 336 00:15:46,780 --> 00:15:48,840 Đó là hoàn toàn chính xác, và nó khuyến khích, 337 00:15:48,840 --> 00:15:50,870 nhưng có ký hiệu viết tắt. 338 00:15:50,870 --> 00:15:53,780 Tôi có thể loại cùng một lúc mở và đóng cùng một thẻ 339 00:15:53,780 --> 00:15:55,510 và điều đó sẽ làm cho trình duyệt hạnh phúc. 340 00:15:55,510 --> 00:15:56,950 Vì vậy, nó chỉ là một chút gọn gàng hơn cho những thứ 341 00:15:56,950 --> 00:15:59,408 rằng khái niệm thực sự không làm cho tinh thần để bắt đầu và kết thúc. 342 00:15:59,408 --> 00:16:01,190 Họ chỉ ở đó, hoặc họ không. 343 00:16:01,190 --> 00:16:06,020 >> Vì vậy, tôi sẽ tiết kiệm này và quay trở lại để "hello, world" trang của tôi và tải lại. 344 00:16:06,020 --> 00:16:09,880 Và đó là một chút mất kiểm soát, vì hình ảnh đó là thực sự 345 00:16:09,880 --> 00:16:12,210 một chút lớn, nhưng đó là OK. 346 00:16:12,210 --> 00:16:13,710 Tôi có thể thay đổi kích thước trong một chương trình. 347 00:16:13,710 --> 00:16:14,900 Hoặc bạn biết những gì. 348 00:16:14,900 --> 00:16:17,350 Chỉ cần để chứng minh, tôi sẽ thực sự nói 349 00:16:17,350 --> 00:16:21,760 độ rộng của điều này nên chỉ là 200 pixel, 200 điểm. 350 00:16:21,760 --> 00:16:24,360 Hãy để tôi đi trước và tiết kiệm và tải lại, và bây giờ trang 351 00:16:24,360 --> 00:16:25,690 trông hợp lý hơn một chút. 352 00:16:25,690 --> 00:16:27,260 Nhưng nhận thấy mô hình. 353 00:16:27,260 --> 00:16:30,030 Vâng, tôi đã loại dạy cho bạn tất cả HTML trong một ý nghĩa, ít nhất 354 00:16:30,030 --> 00:16:33,531 khái niệm, bởi vì tất cả HTML đang là những tags-- mở thẻ, thẻ đóng cửa, 355 00:16:33,531 --> 00:16:35,280 và các thuộc tính mà thay đổi hành vi của họ. 356 00:16:35,280 --> 00:16:38,380 Và, rõ ràng, mỗi thẻ có thể có không hoặc một 357 00:16:38,380 --> 00:16:43,005 hoặc hai hay nhiều thuộc tính, mỗi mà không một chút gì đó khác nhau. 358 00:16:43,005 --> 00:16:44,380 Bây giờ, làm thế nào để bạn biết những gì đang tồn tại? 359 00:16:44,380 --> 00:16:46,800 Bạn chỉ cần lắng nghe một ai đó như tôi nói cho bạn biết những gì tồn tại, 360 00:16:46,800 --> 00:16:50,860 hoặc bạn chỉ Google xung quanh cho một hướng dẫn về HTML, và nó thực sự là đơn giản này. 361 00:16:50,860 --> 00:16:54,030 >> Quả thật, khi tôi còn là sinh viên năm trước đây và đã học HTML, 362 00:16:54,030 --> 00:16:56,530 một trong giảng dạy toán học của tôi trợ lý chỉ cần bỏ ra 363 00:16:56,530 --> 00:16:59,600 một chút thời gian hướng dẫn tôi cho giống như nửa giờ, một giờ, 364 00:16:59,600 --> 00:17:00,660 và sau đó tôi đã được trên đường. 365 00:17:00,660 --> 00:17:03,300 Tôi đang trên đường hướng tới làm các trang web xấu xí nhất bao giờ hết, 366 00:17:03,300 --> 00:17:05,549 trong đó, rõ ràng, tôi có không thực sự tiến xa hơn nữa. 367 00:17:05,549 --> 00:17:09,849 Nhưng vấn đề là, một khi bạn hiểu những ideas-- đơn giản 368 00:17:09,849 --> 00:17:13,450 nếu phức tạp text-- nhưng đơn giản ý tưởng bắt đầu từ một ý nghĩ 369 00:17:13,450 --> 00:17:15,960 và đóng một tư tưởng, giữ tất cả mọi thứ độc đáo cân, 370 00:17:15,960 --> 00:17:19,150 tìm kiếm một cái gì đó, việc sửa đổi hành vi của các thẻ đó, đó là thực sự tất cả 371 00:17:19,150 --> 00:17:20,079 để có nó. 372 00:17:20,079 --> 00:17:28,140 Và trên thực tế, nếu chúng ta bây giờ đi đến một cái gì đó giống như google.com-- thực sự, 373 00:17:28,140 --> 00:17:31,920 chúng ta hãy đi một nơi nhiều hơn một chút reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 Và tôi sẽ đi vào View, Phát triển, View Source. 375 00:17:37,800 --> 00:17:41,400 Nó xấu xí, nhưng notice-- và tôi sẽ phóng to thông báo 376 00:17:41,400 --> 00:17:43,432 một số công cụ đó là quen thuộc rồi. 377 00:17:43,432 --> 00:17:45,140 Có này lên đây, mà là một trình duyệt. 378 00:17:45,140 --> 00:17:46,800 Ở đây có HTML5. 379 00:17:46,800 --> 00:17:47,634 Có HTML. 380 00:17:47,634 --> 00:17:49,550 Rõ ràng, có một thuộc tính mà tôi đã không 381 00:17:49,550 --> 00:17:51,540 sử dụng chỉ định ngôn ngữ của trang, 382 00:17:51,540 --> 00:17:54,380 và điều này có thể giúp tự động dịch thuật và công cụ như thế. 383 00:17:54,380 --> 00:17:55,546 Dưới đây là những người đứng đầu của trang. 384 00:17:55,546 --> 00:17:57,790 Đây là tiêu đề của trang Stanford. 385 00:17:57,790 --> 00:17:59,832 Có một thẻ tôi không nói về thẻ Meta yet--. 386 00:17:59,832 --> 00:18:01,540 Nó chỉ là loại thông tin lai lịch. 387 00:18:01,540 --> 00:18:04,210 Nó giúp với SEO, hoặc Search Engine Optimization, 388 00:18:04,210 --> 00:18:06,320 hoặc kết quả tìm kiếm của Google hoặc tương tự. 389 00:18:06,320 --> 00:18:09,029 Nhưng nếu chúng ta tiếp tục tìm kiếm, giữ tìm kiếm, đây là thẻ Body. 390 00:18:09,029 --> 00:18:11,570 Và có chùm khác thẻ chúng tôi đã không nói chuyện về chưa. 391 00:18:11,570 --> 00:18:13,750 Nhưng Div là một cho một bộ phận của trang. 392 00:18:13,750 --> 00:18:16,680 Nó giống như một hình chữ nhật vô hình nếu bạn loại muốn tinh thần 393 00:18:16,680 --> 00:18:20,160 chia trang web của bạn vào các đơn vị trực tuyến khác nhau. 394 00:18:20,160 --> 00:18:22,650 Và sau đó rất nhiều các div tôi thấy, cái gì gọi là Class, 395 00:18:22,650 --> 00:18:24,440 nhưng chúng tôi sẽ trở lại đó. 396 00:18:24,440 --> 00:18:26,200 >> Đây là hình thức interesting--. 397 00:18:26,200 --> 00:18:27,730 Hình thức là tất cả trên web. 398 00:18:27,730 --> 00:18:30,310 Bất kỳ hộp tìm kiếm bạn từng được sử dụng là một hình thức. 399 00:18:30,310 --> 00:18:31,490 Và, vì vậy, chúng ta hãy thực sự nhìn thấy. 400 00:18:31,490 --> 00:18:32,790 Hình thức. 401 00:18:32,790 --> 00:18:33,910 Hoạt động. 402 00:18:33,910 --> 00:18:37,660 Các hành động của mẫu này, cho bất cứ điều gì lý do lịch sử, là URL đó. 403 00:18:37,660 --> 00:18:38,840 Phương pháp là "bài". 404 00:18:38,840 --> 00:18:44,060 Chỉ ra rằng các yêu cầu HTTP có thể sử dụng động từ "được", như chúng ta đã thấy trước đây, 405 00:18:44,060 --> 00:18:45,070 hoặc "bài". 406 00:18:45,070 --> 00:18:47,030 Và sẽ thấy một sự khác biệt về điều này trong một thời điểm. 407 00:18:47,030 --> 00:18:48,363 Hãy thực sự thấy đây là những gì. 408 00:18:48,363 --> 00:18:49,830 Hãy để tôi quay trở lại trang của Stanford. 409 00:18:49,830 --> 00:18:53,330 hình thức những gì họ đang nói về, bạn nghĩ sao? 410 00:18:53,330 --> 00:18:54,485 Có gì nhảy ra lúc bạn? 411 00:18:54,485 --> 00:18:54,970 >> Đung hộp tìm kiếm. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. Malan: Yeah. 413 00:18:55,845 --> 00:18:58,410 Vì vậy, lên phía trên bên phải đây là hộp Search này. 414 00:18:58,410 --> 00:19:02,441 Và đó là cách họ thực hiện một it-- thẻ đó là nghĩa đen hình thức mở khung. 415 00:19:02,441 --> 00:19:03,940 Và sau đó chúng ta hãy tìm kiếm một cái gì đó. 416 00:19:03,940 --> 00:19:09,220 Hãy tìm kiếm một người bạn của mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Đi vào. 418 00:19:11,380 --> 00:19:13,750 Và tất nhiên, nó đã đi đến URL hơi khác nhau. 419 00:19:13,750 --> 00:19:15,140 Hãy để tôi trở lại đây. 420 00:19:15,140 --> 00:19:18,960 Hãy tìm kiếm "các khóa học." 421 00:19:18,960 --> 00:19:19,460 Chết tiệt. 422 00:19:19,460 --> 00:19:20,484 Đã đi đến một URL khác nhau. 423 00:19:20,484 --> 00:19:23,400 Vì vậy, Stanford thêm một số ma thuật rằng họ không đưa tôi tới các URL 424 00:19:23,400 --> 00:19:25,820 mà chúng ta thấy trong thuộc tính hành động đó. 425 00:19:25,820 --> 00:19:32,480 Nhưng hình thức này ở đây được thực hiện hoàn toàn bằng cách đánh dấu này ở đây, các thẻ. 426 00:19:32,480 --> 00:19:35,710 Trong thực tế, đây là đầu vào cho các loại tìm kiếm mà bạn muốn. 427 00:19:35,710 --> 00:19:38,940 Dưới đây là đầu vào cho một loại tìm kiếm. 428 00:19:38,940 --> 00:19:41,960 Dưới đây là đầu vào cho các chuỗi chính nó. 429 00:19:41,960 --> 00:19:45,394 Và như vậy mục tiêu là không để bọc tâm trí của chúng ta trên tất cả các thẻ 430 00:19:45,394 --> 00:19:46,060 nhưng chỉ để xem. 431 00:19:46,060 --> 00:19:48,300 Nó chỉ mở cửa và đóng cửa thẻ và tìm kiếm những thứ. 432 00:19:48,300 --> 00:19:48,560 Yeah? 433 00:19:48,560 --> 00:19:48,920 Victoria? 434 00:19:48,920 --> 00:19:49,795 >> Đung [IM LẶNG] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. Malan: Đó là một câu hỏi hay. 437 00:19:53,550 --> 00:19:54,660 Đó là một phức tạp hơn chút để xem. 438 00:19:54,660 --> 00:19:56,300 Hãy để tôi trở lại với câu hỏi chỉ trong vài phút 439 00:19:56,300 --> 00:19:59,000 khi chúng ta nhìn vào một cái gì đó gọi là tấm CSS, hoặc theo tầng, 440 00:19:59,000 --> 00:20:02,500 và chúng ta có thể cố gắng để suy ra càng nhiều từ trang. 441 00:20:02,500 --> 00:20:08,090 Vì vậy, nếu bây giờ chúng ta hãy nhìn vào google.com, hãy xem những gì trang của họ như thế nào. 442 00:20:08,090 --> 00:20:09,840 Bạn sẽ và-- đó là dễ thương ngày hôm nay. 443 00:20:09,840 --> 00:20:12,490 444 00:20:12,490 --> 00:20:12,990 ĐƯỢC. 445 00:20:12,990 --> 00:20:13,690 Tất cả đã được làm xong. 446 00:20:13,690 --> 00:20:15,260 Được rồi, vậy View Source. 447 00:20:15,260 --> 00:20:19,590 Bạn sẽ nghĩ rằng Google có mã nguồn thật sự tốt đẹp. 448 00:20:19,590 --> 00:20:24,970 Vì vậy, rõ ràng, những gì đang xảy ra ở đây? 449 00:20:24,970 --> 00:20:27,880 Và trên thực tế, đây không phải là thậm chí cả HTML. 450 00:20:27,880 --> 00:20:30,930 Đây là một cái gì đó gọi là JavaScript. 451 00:20:30,930 --> 00:20:32,344 Và chúng ta hãy tiếp tục đi và đi. 452 00:20:32,344 --> 00:20:34,010 Tôi thậm chí không biết nơi trang bắt đầu. 453 00:20:34,010 --> 00:20:37,240 Tôi sẽ sử dụng Command F, mở khung HTML. 454 00:20:37,240 --> 00:20:38,200 Được rồi, có nó được. 455 00:20:38,200 --> 00:20:44,150 Tôi tìm thấy sự khởi đầu của trang, và có quá nhiều thứ ở đây. 456 00:20:44,150 --> 00:20:45,310 >> Điều gì đang thực sự xảy ra? 457 00:20:45,310 --> 00:20:47,460 Vâng, bạn biết những gì, chúng ta có thể làm sạch này lên. 458 00:20:47,460 --> 00:20:52,109 Nếu tôi thay vì đi đến này Kiểm tra thanh công cụ, công cụ chẩn đoán đặc biệt này, 459 00:20:52,109 --> 00:20:54,150 và đi không để hình thành mạng lưới, nơi mà chúng tôi tiếp tục đi ngày hôm nay, 460 00:20:54,150 --> 00:20:56,420 nhưng nếu tôi đi vào các phần tử, những gì thực sự tốt đẹp 461 00:20:56,420 --> 00:20:59,990 là một trình duyệt có rất nhiều mắt tốt hơn nhiều so với tôi. 462 00:20:59,990 --> 00:21:02,670 Và các trình duyệt có thể đọc mà mess của một trang web, 463 00:21:02,670 --> 00:21:04,700 rằng HTML mail chúng tôi chỉ nhìn, và nó có thể 464 00:21:04,700 --> 00:21:08,340 phân tích nó hay đọc và phân tích nó và định dạng lại nó 465 00:21:08,340 --> 00:21:09,910 một cách tốt đẹp của con người thân thiện. 466 00:21:09,910 --> 00:21:11,740 Vì vậy, những gì tôi đang thấy bây giờ trong màn hình này ở đây 467 00:21:11,740 --> 00:21:15,470 trong Phần tử, nội dung chính xác như nhau, nhưng họ đã thụt vào tất cả mọi thứ, 468 00:21:15,470 --> 00:21:18,140 họ đã colorized nó, nhưng đó là cùng một văn bản chính xác 469 00:21:18,140 --> 00:21:19,620 mà tôi đã tải về từ máy chủ. 470 00:21:19,620 --> 00:21:23,630 >> Và những gì là tốt đẹp là bây giờ tôi có thể nhìn thấy trong cơ thể, để thông báo instance--, 471 00:21:23,630 --> 00:21:26,480 trang vẫn còn sáng tác chỉ một cái đầu và một cơ thể, 472 00:21:26,480 --> 00:21:28,660 và tôi có thứ bậc có thể lặn ở đây. 473 00:21:28,660 --> 00:21:32,420 Chú ý rằng Google dường như có để divs-- thế này và thế này. 474 00:21:32,420 --> 00:21:33,310 Tôi có thể mở rộng đó. 475 00:21:33,310 --> 00:21:35,370 Có một bó toàn bộ các div khác. 476 00:21:35,370 --> 00:21:36,900 Vì vậy, nó là một chút phức tạp. 477 00:21:36,900 --> 00:21:37,400 Nhưng chờ đợi. 478 00:21:37,400 --> 00:21:40,970 Điều này có vẻ nhiều hơn nữa có thể đọc được, tương đối, hơn này. 479 00:21:40,970 --> 00:21:43,840 Tại sao Google lúng túng bản thân bởi chỉ cần gửi 480 00:21:43,840 --> 00:21:50,400 lộn xộn này rất lớn của mã của một số loại chỉ để thực hiện một cái gì đó 481 00:21:50,400 --> 00:21:53,640 trông đơn giản như vậy ở cái nhìn đầu tiên? 482 00:21:53,640 --> 00:21:55,270 Giống như, tại sao họ không thêm các khoảng trống nhiều hơn? 483 00:21:55,270 --> 00:21:56,811 Tại sao họ không nhấn Enter như tôi đã làm? 484 00:21:56,811 --> 00:21:59,110 Nhìn như thế nào tốt tôi đã lúc viết một trang web. 485 00:21:59,110 --> 00:22:00,680 Tôi nhấn Enter rất siêng năng. 486 00:22:00,680 --> 00:22:03,760 Tôi thụt vào nên mọi thứ là rất đẹp và dễ đọc. 487 00:22:03,760 --> 00:22:08,463 Tại sao Google không thực hành giống nhau không? 488 00:22:08,463 --> 00:22:11,409 >> Đung [IM LẶNG] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. Malan: Tốt. 491 00:22:13,180 --> 00:22:14,270 Rất công bằng. 492 00:22:14,270 --> 00:22:16,650 Họ không có một số người tại Google bằng tay 493 00:22:16,650 --> 00:22:18,160 cập nhật trang nhà nữa. 494 00:22:18,160 --> 00:22:20,010 Nó không phải 1999 nữa. 495 00:22:20,010 --> 00:22:21,140 Vì vậy, họ có phần mềm. 496 00:22:21,140 --> 00:22:25,397 Họ có các công cụ khác tạo động họ HTML. 497 00:22:25,397 --> 00:22:27,480 Tất nhiên, đó là mã bản thân được viết bởi con người, 498 00:22:27,480 --> 00:22:30,220 nhưng thực tế là, nó khá công bằng mà nói, 499 00:22:30,220 --> 00:22:33,340 trình duyệt chắc chắn không chăm sóc như thế nào lộn xộn mã là. 500 00:22:33,340 --> 00:22:35,940 Nhưng có một thậm chí nhiều hơn lý do kỹ thuật hấp dẫn 501 00:22:35,940 --> 00:22:42,580 rằng Google phân HTML của họ mã trong một cẩu thả như vậy, dường như 502 00:22:42,580 --> 00:22:48,350 cách áp đảo tất cả các đóng gói cùng nhau với rất ít way-- rất ít 503 00:22:48,350 --> 00:22:51,274 trong cách định dạng như tôi đã làm. 504 00:22:51,274 --> 00:22:52,570 >> Đung [IM LẶNG] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. Malan: nhanh hơn? 506 00:22:53,528 --> 00:22:54,040 Tại sao? 507 00:22:54,040 --> 00:22:55,680 Và bạn đã nói gì, Lydia? 508 00:22:55,680 --> 00:22:56,240 Nhanh hơn? 509 00:22:56,240 --> 00:22:57,281 Tại sao nhanh hơn? 510 00:22:57,281 --> 00:22:58,156 Đung [IM LẶNG] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. Malan: Có không có không gian để đọc. 513 00:23:02,230 --> 00:23:02,730 Yeah. 514 00:23:02,730 --> 00:23:04,560 Vì vậy, suy nghĩ về những gì một không gian. 515 00:23:04,560 --> 00:23:08,394 Vì vậy, mỗi ký tự trên bàn phím mất một số lượng không gian để đại diện, 516 00:23:08,394 --> 00:23:10,560 hoặc thể chất, giống như nó chiếm nhiều không gian, 517 00:23:10,560 --> 00:23:13,250 hoặc bằng cách nào đó bên dưới mui xe, yêu cầu bộ nhớ. 518 00:23:13,250 --> 00:23:15,740 Và như một aside-- và chúng tôi sẽ nói thêm về tomorrow-- này 519 00:23:15,740 --> 00:23:19,930 mỗi ký tự trên bàn phím thường đòi hỏi 8 bit, hoặc một byte. 520 00:23:19,930 --> 00:23:23,360 Vì vậy, một mô hình của 8 số không hay những người thân, hay chỉ là 1 byte, như chúng ta 521 00:23:23,360 --> 00:23:24,720 con người thường sẽ nói. 522 00:23:24,720 --> 00:23:27,690 Vì vậy, đó là nhỏ, nhưng nó vẫn còn không bằng không. 523 00:23:27,690 --> 00:23:29,940 Nó vẫn còn một số lượng không gian. 524 00:23:29,940 --> 00:23:36,082 Vì vậy, nếu một kỹ sư hoặc Google lượt truy cập thanh không gian chỉ một lần, và giả sử 525 00:23:36,082 --> 00:23:38,540 Google-- nó siêu popular-- giả sử rằng một tỷ người 526 00:23:38,540 --> 00:23:40,780 ghé thăm trang nhà của họ một ngày, hoặc một số số lượng người 527 00:23:40,780 --> 00:23:43,290 truy cập vào trang nhà tỷ lần một ngày, 528 00:23:43,290 --> 00:23:48,890 bao nhiêu thêm byte có mà kỹ sư phần mềm chỉ tốn Google 529 00:23:48,890 --> 00:23:51,310 bằng cách nhấn thanh của mình hay không gian của mình một lần? 530 00:23:51,310 --> 00:23:52,692 >> Đung [IM LẶNG] 531 00:23:52,692 --> 00:23:54,150 DAVID J. Malan: Không hoàn toàn là xấu. 532 00:23:54,150 --> 00:23:57,070 Chỉ cần một byte lần một tỷ đồng. 533 00:23:57,070 --> 00:23:57,871 Vì vậy là-- 534 00:23:57,871 --> 00:23:59,120 Đung 8 tỷ gigabyte. 535 00:23:59,120 --> 00:24:00,370 DAVID J. Malan: Không 8 tỷ. 536 00:24:00,370 --> 00:24:01,240 8 tỷ byte. 537 00:24:01,240 --> 00:24:02,410 Nhưng 1 gigabyte. 538 00:24:02,410 --> 00:24:04,080 1 GB sẽ là đơn vị đo lường. 539 00:24:04,080 --> 00:24:08,240 Nếu người ấy không có hai không gian, 2 GB. 540 00:24:08,240 --> 00:24:09,030 Ba gigabyte. 541 00:24:09,030 --> 00:24:09,530 Đúng? 542 00:24:09,530 --> 00:24:11,860 Nó quy mô tốn kém. 543 00:24:11,860 --> 00:24:16,150 Và như vậy trong trường hợp như Google, trong đó, các cấp, là trường hợp cực đoan, 544 00:24:16,150 --> 00:24:21,450 có những vấn đề khác phát sinh chỉ bằng cách làm cho các quyết định rất hợp lý 545 00:24:21,450 --> 00:24:25,744 hoặc có những hành động của con người rất đơn giản, bởi vì nó có hiệu ứng phóng đại này. 546 00:24:25,744 --> 00:24:27,660 Vì vậy, một trong những lý do này trông như vậy nén 547 00:24:27,660 --> 00:24:30,660 là chính xác như Victoria said-- nó là chỉ được tạo ra bởi máy tính nào. 548 00:24:30,660 --> 00:24:31,900 Vì vậy, không có việc lớn. 549 00:24:31,900 --> 00:24:33,309 Hãy để cho trình duyệt con số nó ra. 550 00:24:33,309 --> 00:24:35,350 Nhưng nó cũng cố tình không có nhiều không gian, 551 00:24:35,350 --> 00:24:36,766 bởi vì không gian là không cần thiết. 552 00:24:36,766 --> 00:24:38,250 Và không gian thực sự chi phí tiền bạc. 553 00:24:38,250 --> 00:24:40,670 >> Nó hoặc là chi phí thời gian, vì chỉ để đẩy 554 00:24:40,670 --> 00:24:44,670 rằng nhiều dữ liệu ra khỏi trụ sở chính của google.com chỉ 555 00:24:44,670 --> 00:24:47,710 đã có để có một số lượng thời gian, thậm chí nếu nó mili giây 556 00:24:47,710 --> 00:24:51,190 hoặc micro, nhưng cho biết thêm rằng hơn rất nhiều người sử dụng, hoặc nhiều khả năng, 557 00:24:51,190 --> 00:24:52,270 nó có thể là chi phí tiền bạc. 558 00:24:52,270 --> 00:24:54,690 Google có thể kết nối đến một người nào khác trên thế giới, một 559 00:24:54,690 --> 00:24:56,398 của những người nhìn chăm chú điểm, và nếu họ có 560 00:24:56,398 --> 00:24:59,880 một số loại mối quan hệ tài chính theo đó chi phí dữ liệu của họ tiền, 561 00:24:59,880 --> 00:25:01,730 họ có thể là tốt giảm thiểu dữ liệu bao nhiêu 562 00:25:01,730 --> 00:25:04,530 họ đang phun ra trên kết nối internet của họ. 563 00:25:04,530 --> 00:25:07,630 >> Vì vậy, điều buồn cười, tuy nhiên, cuối cùng, hoặc có thể là điều yên tâm, 564 00:25:07,630 --> 00:25:11,030 đó là mặc dù điều này có vẻ khủng khiếp áp đảo, vào cuối ngày, 565 00:25:11,030 --> 00:25:16,750 nó vẫn là nguyên tắc chính xác giống như trang này rất đơn giản ở đây của một file HTML 566 00:25:16,750 --> 00:25:17,390 trang. 567 00:25:17,390 --> 00:25:20,610 Vì vậy, chỉ để tóm tắt và do đó bạn có một phiên bản kinh điển nếu bạn không 568 00:25:20,610 --> 00:25:25,900 sau cùng bởi sự lựa chọn ở đây, ở đây có thể là đơn giản nhất của các trang web, 569 00:25:25,900 --> 00:25:28,240 nên cái gì để chơi với có lẽ sau này. 570 00:25:28,240 --> 00:25:30,790 >> Vâng, chúng ta hãy giới thiệu một vài ý tưởng khác bây giờ. 571 00:25:30,790 --> 00:25:33,420 Chúng tôi về để giới thiệu một cái gì đó gọi là một từ khóa phong cách. 572 00:25:33,420 --> 00:25:38,110 Chúng ta có thể phong cách hóa trang này theo những cách thú vị hơn. 573 00:25:38,110 --> 00:25:40,860 Vì vậy, trong khi HTML email là tất cả về đánh dấu 574 00:25:40,860 --> 00:25:44,470 các dữ liệu, sắp xếp các quy định cụ thể để một trình duyệt như thế nào để cấu trúc dữ liệu, 575 00:25:44,470 --> 00:25:48,110 nơi để đặt nó, CSS, hoặc Cascading Style Sheets, 576 00:25:48,110 --> 00:25:52,640 là một ngôn ngữ thứ hai thường được trộn lẫn với HTML 577 00:25:52,640 --> 00:25:55,670 như chúng ta sẽ see-- nhưng chúng tôi có thể làm sạch rằng trong một moment-- mà mất 578 00:25:55,670 --> 00:25:59,850 nó những dặm cuối cùng, và nó stylizes nó. 579 00:25:59,850 --> 00:26:02,460 Nó được màu sắc vừa phải, font kích thước vừa phải, 580 00:26:02,460 --> 00:26:03,860 các vị vừa phải. 581 00:26:03,860 --> 00:26:06,510 Đó là tất cả về thẩm mỹ hoặc định dạng, không về 582 00:26:06,510 --> 00:26:08,330 các dữ liệu cơ bản của chính nó. 583 00:26:08,330 --> 00:26:11,390 Và cách dễ nhất để hiển thị điều này có lẽ bằng ví dụ. 584 00:26:11,390 --> 00:26:15,320 Vì vậy, tôi sẽ đi qua vào tập tin văn bản đơn giản của tôi. 585 00:26:15,320 --> 00:26:17,970 Và chỉ trong một khoảnh khắc, tôi sẽ đi bộ chúng tôi thông qua quá trình 586 00:26:17,970 --> 00:26:19,360 làm điều này bản thân mình. 587 00:26:19,360 --> 00:26:23,310 >> Tôi sẽ quay trở lại tập tin của tôi ở đây và tải lại trang chỉ 588 00:26:23,310 --> 00:26:25,800 để xác nhận những gì nó trông như thế nào. 589 00:26:25,800 --> 00:26:27,190 Đó là nơi chúng tôi đang ở bây giờ. 590 00:26:27,190 --> 00:26:31,170 Tôi cảm thấy như trẻ em sẽ được hưởng có một số màu sắc cho trang web này. 591 00:26:31,170 --> 00:26:34,480 Vì vậy, tôi sẽ đi lên đây vào đầu của trang. 592 00:26:34,480 --> 00:26:38,130 Và tôi sẽ làm phong cách, / phong cách. 593 00:26:38,130 --> 00:26:44,060 Và sau đó bên trong này, tôi sẽ nói với cơ thể của page-- của tôi 594 00:26:44,060 --> 00:26:46,870 và định dạng này là, tại Thoạt nhìn, có lẽ một chút 595 00:26:46,870 --> 00:26:49,400 lạ nhưng thông thường. 596 00:26:49,400 --> 00:26:55,010 Tôi sẽ nói rằng nền màu sắc của trang này phải có màu xanh. 597 00:26:55,010 --> 00:26:57,960 Và điều này là không may loại không phải là thiết kế tốt nhất. 598 00:26:57,960 --> 00:27:00,710 Chú ý rằng trước đây trong thế giới của HTML, 599 00:27:00,710 --> 00:27:03,190 Tôi cho rằng các thuộc tính là các cặp khóa-giá trị. 600 00:27:03,190 --> 00:27:05,760 Một cái gì đó tương đương với trích dẫn unquote "một cái gì đó." 601 00:27:05,760 --> 00:27:08,810 Trong thế giới của CSS, mà là được thiết kế bởi một số người khác nhau, 602 00:27:08,810 --> 00:27:11,020 họ quyết định rằng, trong họ thế giới, cặp khóa-giá trị 603 00:27:11,020 --> 00:27:13,920 sẽ từ ruột một cái gì đó. 604 00:27:13,920 --> 00:27:15,220 Vì vậy, đó là ý tưởng tương tự, mặc dù. 605 00:27:15,220 --> 00:27:18,620 Nó kết hợp một giá trị với một số trọng điểm rằng bằng cách nào đó 606 00:27:18,620 --> 00:27:20,330 ảnh hưởng đến hành vi của trang này. 607 00:27:20,330 --> 00:27:21,901 >> Và bạn có thể đoán. 608 00:27:21,901 --> 00:27:24,150 Cái gì thế này có lẽ sẽ để làm ngay cả khi bạn chưa bao giờ 609 00:27:24,150 --> 00:27:27,867 thấy HTML hoặc CSS trước? 610 00:27:27,867 --> 00:27:29,450 Đung Thay đổi màu nền. 611 00:27:29,450 --> 00:27:30,560 DAVID J. Malan: Yeah, thay đổi màu nền. 612 00:27:30,560 --> 00:27:33,280 Và đặc biệt là màu nền của cơ thể. 613 00:27:33,280 --> 00:27:36,290 Nhưng trong chừng mực cơ thể bây giờ là web 614 00:27:36,290 --> 00:27:38,870 page-- đó là điều duy nhất dưới really-- thanh tiêu đề 615 00:27:38,870 --> 00:27:40,870 nó có lẽ sẽ ảnh hưởng đến điều tương tự. 616 00:27:40,870 --> 00:27:41,430 Vì vậy, chúng ta hãy xem. 617 00:27:41,430 --> 00:27:42,490 Hãy tiết kiệm này. 618 00:27:42,490 --> 00:27:44,310 Tới đây và tải lại. 619 00:27:44,310 --> 00:27:46,140 Nó khá ghê gớm. 620 00:27:46,140 --> 00:27:48,070 Và những gì đang xảy ra đây là một tác dụng phụ. 621 00:27:48,070 --> 00:27:49,850 Tôi chỉ cần chọn hình ảnh này một cách ngẫu nhiên. 622 00:27:49,850 --> 00:27:53,305 Tại sao là màu xanh lá cây không thấm đằng sau Mickey? 623 00:27:53,305 --> 00:27:54,180 Đung [IM LẶNG] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. Malan: Chính xác. 626 00:27:57,880 --> 00:28:01,750 Nó chỉ ra rằng hình ảnh, khá nhiều tất cả những hình ảnh mà chúng ta có thể sử dụng, 627 00:28:01,750 --> 00:28:03,670 là tất cả rectangles-- của hình chữ nhật. 628 00:28:03,670 --> 00:28:07,710 Ngay cả khi Mickey có một số đường cong với chính mình và có một nền tảng, 629 00:28:07,710 --> 00:28:09,330 nền mà có được cái gì. 630 00:28:09,330 --> 00:28:10,280 Nó có phải là màu trắng. 631 00:28:10,280 --> 00:28:11,910 Nó có phải là màu đen hay cái gì khác. 632 00:28:11,910 --> 00:28:13,650 Nó có thể được minh bạch. 633 00:28:13,650 --> 00:28:16,100 Và trên thực tế, tôi có thể mở Mickey Mouse ở đây 634 00:28:16,100 --> 00:28:18,590 trong một chương trình được gọi là Photoshop hoặc một cái gì đó tương tự 635 00:28:18,590 --> 00:28:21,176 và thay đổi tất cả các màu trắng nền để minh bạch, 636 00:28:21,176 --> 00:28:22,550 vì vậy các màu xanh lá cây sẽ tỏa sáng qua. 637 00:28:22,550 --> 00:28:25,980 Nhưng đó là một cái gì đó tôi sẽ cần hỏi của bản thân mình hay một nghệ sĩ đồ họa 638 00:28:25,980 --> 00:28:28,130 hoặc một nhà thiết kế tại của tôi công ty, ví dụ, 639 00:28:28,130 --> 00:28:31,490 để làm, đặc biệt là kể từ khi tôi chỉ vay này từ internet. 640 00:28:31,490 --> 00:28:33,030 Nhưng đó là lý do tại sao điều này xảy ra. 641 00:28:33,030 --> 00:28:34,980 >> Vì vậy, những gì khác chúng ta có thể muốn làm gì? 642 00:28:34,980 --> 00:28:41,040 Vâng, chúng ta có thể muốn nói chúng tôi thực sự hy vọng bạn tận hưởng kì nghỉ. 643 00:28:41,040 --> 00:28:44,150 Và để nhấn mạnh, tôi muốn để làm cho mạnh mẽ, 644 00:28:44,150 --> 00:28:48,310 và vì vậy tôi sẽ nói mở mạnh mẽ và đóng mạnh và sau đó tải lại. 645 00:28:48,310 --> 00:28:50,320 Và đó là một khó khăn nhỏ để xem trên máy chiếu 646 00:28:50,320 --> 00:28:53,250 nhưng có lẽ thực sự bây giờ nhảy ra lúc bạn nhiều hơn một chút. 647 00:28:53,250 --> 00:28:56,180 Vì vậy, bạn có thể thêm chữ in nghiêng trong này cách, lát táo bạo trong cách này. 648 00:28:56,180 --> 00:28:57,500 Chúng ta có thể thay đổi màu sắc. 649 00:28:57,500 --> 00:29:01,610 Trong thực tế, chỉ cần cho đá, tôi sẽ đi trước và làm điều này. 650 00:29:01,610 --> 00:29:05,120 Tôi không thực sự thích làm thế nào tôi đoạn gần đây với nhau, 651 00:29:05,120 --> 00:29:06,870 vì vậy tôi có thể làm một cái gì đó như thế này. 652 00:29:06,870 --> 00:29:13,310 Tôi sẽ để cho trình duyệt, thay đổi mỗi thẻ đoạn để có, 653 00:29:13,310 --> 00:29:16,952 hãy say-- thực sự, bạn biết những gì, hãy canh nó nhắn tin cho-align, trung tâm. 654 00:29:16,952 --> 00:29:19,410 Và một lần nữa, tôi biết chỉ này vì có người đã dạy cho tôi 655 00:29:19,410 --> 00:29:21,118 hay tôi nhìn nó trong một tài liệu tham khảo trực tuyến. 656 00:29:21,118 --> 00:29:22,450 Vì vậy, hãy để tôi tiết kiệm này. 657 00:29:22,450 --> 00:29:25,070 Và, ah, bây giờ tôi đã trung tâm hình ảnh đó. 658 00:29:25,070 --> 00:29:28,490 Và trên thực tế, bạn biết không, nếu Tôi di chuyển hình ảnh của tôi vào một đoạn văn 659 00:29:28,490 --> 00:29:34,510 tag-- do đó, một đoạn thứ ba, mặc dù nó không phải văn bản. 660 00:29:34,510 --> 00:29:36,917 Hãy tiết kiệm đó và tải lại. 661 00:29:36,917 --> 00:29:40,000 Bây giờ, trang bắt đầu trở thành loại lượng-- Tôi có nghĩa là, nó vẫn còn khá xấu xí, 662 00:29:40,000 --> 00:29:43,180 nhưng ít nhất nó có vẻ như tôi đã trải qua hai phút thay vì một phút 663 00:29:43,180 --> 00:29:43,950 lam no. 664 00:29:43,950 --> 00:29:47,200 >> Và như vậy, từng bước, chúng ta có thể làm những thay đổi thẩm mỹ nay đến trang? 665 00:29:47,200 --> 00:29:50,860 Tôi đã không thực sự thay đổi dữ liệu trong trang khác vì thêm chữ thực sự. 666 00:29:50,860 --> 00:29:52,650 Tôi đã thêm siêu dữ liệu, nếu bạn muốn. 667 00:29:52,650 --> 00:29:54,830 Hey, trình duyệt, làm cho Từ "thực sự" đậm. 668 00:29:54,830 --> 00:29:56,940 Nhưng dữ liệu là không mạnh. 669 00:29:56,940 --> 00:29:57,830 Đó là siêu dữ liệu. 670 00:29:57,830 --> 00:29:59,410 Các dữ liệu là "thực sự." 671 00:29:59,410 --> 00:30:02,200 Vì vậy, chúng tôi vẫn có một số các khái niệm tương tự như trước. 672 00:30:02,200 --> 00:30:05,990 Bây giờ, tất nhiên, điều này không phải là trên trang web, vì vậy tôi sẽ phải làm một bước cuối cùng ở đây. 673 00:30:05,990 --> 00:30:10,300 >> Tôi sẽ đi đến hello.html và chỉ cần đánh dấu và sao chép này. 674 00:30:10,300 --> 00:30:12,285 Và bây giờ tôi sẽ đến đi vào Cloud9, mà 675 00:30:12,285 --> 00:30:13,910 Tôi sẽ hướng dẫn bạn thông qua chỉ trong một khoảnh khắc. 676 00:30:13,910 --> 00:30:17,080 Và tỷ lệ cược là bạn sẽ sớm được, nếu chưa, vào màn hình như thế này. 677 00:30:17,080 --> 00:30:21,080 Và hãy để tôi chỉ cho bạn một cách nhanh chóng tour du lịch của những gì Cloud9 là thực sự. 678 00:30:21,080 --> 00:30:26,590 Vì vậy, một lần nữa đám mây 9 là dịch vụ dựa trên đám mây này 679 00:30:26,590 --> 00:30:30,580 cung cấp cho bạn và cho tôi những ảo tưởng của việc có máy ảo của riêng của chúng tôi 680 00:30:30,580 --> 00:30:33,090 trong đám mây, về mặt kỹ thuật một container trong các đám mây, 681 00:30:33,090 --> 00:30:35,160 rằng chúng tôi có đầy đủ quyền quản trị để. 682 00:30:35,160 --> 00:30:37,130 Vì vậy, về mặt lý thuyết, không có ai khác trên thế giới có 683 00:30:37,130 --> 00:30:39,152 truy cập vào màn hình tôi xem ngay bây giờ, 684 00:30:39,152 --> 00:30:40,860 ngoại trừ những người người chạy các trang web, 685 00:30:40,860 --> 00:30:43,470 bởi vì về mặt kỹ thuật mà họ có truy cập vật lý và vv. 686 00:30:43,470 --> 00:30:44,740 >> Vì vậy, những gì chúng ta nhìn thấy trong môi trường này? 687 00:30:44,740 --> 00:30:46,230 Tôi sẽ thu nhỏ, bởi vì đó là một chút nhỏ. 688 00:30:46,230 --> 00:30:48,104 Và hãy để tôi chỉ hơn đây chỉ là một khoảnh khắc. 689 00:30:48,104 --> 00:30:53,210 Về phía bên tay trái của tôi và của bạn màn hình, có một trình duyệt tập tin ở bên trái. 690 00:30:53,210 --> 00:30:55,362 Vì vậy, tinh thần tương tự Mac OS và Windows. 691 00:30:55,362 --> 00:30:57,070 Đây là tất cả các tập tin trong tài khoản của tôi. 692 00:30:57,070 --> 00:30:59,250 Và theo mặc định, nếu bạn tài khoản là tôi như thế, 693 00:30:59,250 --> 00:31:05,090 bạn sẽ nhìn thấy hoặc sớm thấy helloworld.html và readme.md. 694 00:31:05,090 --> 00:31:07,950 Trên đây ở bên phải, đây là nơi các tập tin văn bản của tôi sẽ đi. 695 00:31:07,950 --> 00:31:11,620 Nếu bạn đã từng sử dụng Microsoft Word hay Notepad hoặc TextEdit, 696 00:31:11,620 --> 00:31:14,100 đây là từ chỉnh sửa của tôi các tập tin là sẽ đi. 697 00:31:14,100 --> 00:31:16,540 Và sau đó là phức tạp nhất tính năng của môi trường này 698 00:31:16,540 --> 00:31:20,100 rằng chúng tôi sẽ không thực sự cần sử dụng là xuống đây được gọi là một cửa sổ Terminal. 699 00:31:20,100 --> 00:31:23,390 Nếu bạn đã sử dụng hệ điều hành DOS từ năm qua, đây là Linux 700 00:31:23,390 --> 00:31:25,450 hoặc tương đương Linux của DOS. 701 00:31:25,450 --> 00:31:28,190 Đó là một interface-- dựa trên văn bản không có con chuột nhấp chuột, không kéo. 702 00:31:28,190 --> 00:31:30,770 Tất cả các bạn có thể làm là gõ lệnh, nhưng những lệnh 703 00:31:30,770 --> 00:31:34,400 có thể tạo ra các tập tin, chuyển tập tin, mở thư mục, thư mục gần gũi, 704 00:31:34,400 --> 00:31:35,740 làm bất kỳ số lượng của sự vật. 705 00:31:35,740 --> 00:31:38,060 Nhưng hiện nay, chúng tôi sẽ chỉ dành nhiều thời gian của chúng tôi ở đây. 706 00:31:38,060 --> 00:31:39,050 >> Và như vậy chúng ta hãy làm điều này. 707 00:31:39,050 --> 00:31:41,008 Nếu bạn đang ở trong này môi trường, mà bạn nên 708 00:31:41,008 --> 00:31:45,900 được nếu bạn tạo ra một không gian làm việc đã, đi trước và chỉ cần đi lên 709 00:31:45,900 --> 00:31:48,690 File, mới cho một thời điểm. 710 00:31:48,690 --> 00:31:51,740 Và đó sẽ cung cấp cho bạn một mới tab ngay tại đây ở giữa. 711 00:31:51,740 --> 00:31:54,250 Và tôi just-- và hãy đi trước và làm điều này. 712 00:31:54,250 --> 00:31:59,910 Hãy đi trước và bây giờ File, Save và đi trước và gọi nó hello.html, 713 00:31:59,910 --> 00:32:02,740 không nên nhầm lẫn với helloworld.html, mà 714 00:32:02,740 --> 00:32:06,910 đi kèm với tài khoản miễn phí mới của bạn, mà chỉ là một tập tin mẫu. 715 00:32:06,910 --> 00:32:11,020 Bạn sẽ thấy nó đột nhiên xuất hiện, nhiều khả năng ở phía bên trái, 716 00:32:11,020 --> 00:32:12,810 và các tab vẫn sẽ được mở. 717 00:32:12,810 --> 00:32:21,300 Và hãy để tôi khuyến khích các bạn bây giờ để tái tạo tập tin này hoặc một số biến thể của nó. 718 00:32:21,300 --> 00:32:24,607 Và nếu bạn không thể hoàn toàn thấy nó trên màn hình, đây là giống hệt với slide 719 00:32:24,607 --> 00:32:26,190 mà bạn có thể có trong một tab khác. 720 00:32:26,190 --> 00:32:29,296 >> Vì vậy, trong ngắn hạn, làm cho trang web đầu tiên của bạn, lưu nó, và sau đó chỉ trong một khoảnh khắc, 721 00:32:29,296 --> 00:32:31,170 Tôi sẽ cho bạn thấy làm thế nào bạn thực sự có thể xem này. 722 00:32:31,170 --> 00:32:32,970 Nhưng thay đổi ít nhất một điều. 723 00:32:32,970 --> 00:32:35,400 Thay đổi helloworld để một cái gì đó của sự lựa chọn của riêng bạn, 724 00:32:35,400 --> 00:32:39,821 để bạn thuyết phục rằng nó là của bạn nộp và không phải là người tôi vừa tạo ra. 725 00:32:39,821 --> 00:32:40,320 Tất cả các quyền. 726 00:32:40,320 --> 00:32:43,804 Và khi bạn đang ready-- không rush-- khi bạn đã sẵn sàng, 727 00:32:43,804 --> 00:32:46,220 đi trước và lưu các tập tin một khi bạn đã thực hiện những thay đổi này. 728 00:32:46,220 --> 00:32:49,540 Và nếu bạn nhấp vào Chạy nút lên hàng đầu, điều này 729 00:32:49,540 --> 00:32:53,610 nên mở một tab mới sẽ cho bạn biết những gì URL mà bạn có thể truy cập tập tin của bạn vào, 730 00:32:53,610 --> 00:32:56,380 nhưng nó có thể mất một chút thời gian để quote unquote "bắt đầu Apache", mà 731 00:32:56,380 --> 00:32:58,820 là tên của máy chủ web. 732 00:32:58,820 --> 00:33:02,430 Vì vậy, hãy cẩn thận để làm chính xác những gì trong tập cuối cùng. 733 00:33:02,430 --> 00:33:04,610 Vì vậy, ngay bây giờ, tôi sẽ phóng to. 734 00:33:04,610 --> 00:33:07,780 Nếu tôi bắt đầu nhập mở khung HTML, thông báo 735 00:33:07,780 --> 00:33:09,650 nó khiến tôi để kết thúc suy nghĩ của tôi. 736 00:33:09,650 --> 00:33:13,750 Và nếu tôi hoàn thành suy nghĩ của tôi, nó tự động mang lại cho tôi thẻ đóng. 737 00:33:13,750 --> 00:33:17,190 Nhưng kỳ vọng là sau đó tôi sẽ nhấn Nhập, và sau đó di chuyển bên trong có 738 00:33:17,190 --> 00:33:21,180 và làm đầu bên trong và Sau đó tôi làm cơ thể bên trong. 739 00:33:21,180 --> 00:33:24,430 Và đó là một chút lạ lúc đầu, bởi vì nó làm việc cho bạn, 740 00:33:24,430 --> 00:33:27,110 nhưng nhận ra rằng cuối cùng nó giúp bạn tiết kiệm phím bấm. 741 00:33:27,110 --> 00:33:30,500 Và trên thực tế, một tính năng rất phổ biến của lập trình các môi trường những ngày này 742 00:33:30,500 --> 00:33:33,260 cả hai để phát triển web như này và chương trình thực tế, 743 00:33:33,260 --> 00:33:36,960 mà chúng tôi sẽ nói chuyện về ngày mai, là những tính năng tự động hoàn tất, 744 00:33:36,960 --> 00:33:39,710 điều đó chỉ cho phép một lập trình viên hoặc một nhà thiết kế 745 00:33:39,710 --> 00:33:42,010 gõ ít tổ hợp phím thực hiện điều tương tự. 746 00:33:42,010 --> 00:33:43,176 Đôi khi nó là tốt, mặc dù. 747 00:33:43,176 --> 00:33:44,560 Đôi khi nó chỉ gây phiền nhiễu. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 Và, một lần nữa, một khi bạn đã sao chép slide hoặc một số biến thể của chúng, 750 00:33:54,010 --> 00:33:57,360 bạn có thể nhấp vào nút Run lên hàng đầu. 751 00:33:57,360 --> 00:33:59,910 Và sau đó ở phía dưới cửa sổ, bạn sẽ được thông báo 752 00:33:59,910 --> 00:34:04,290 vào những gì URL bạn có thể ghé thăm trang web của bạn. 753 00:34:04,290 --> 00:34:08,790 Mine, ví dụ, là tại business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 và kể từ đó trở đi. 755 00:34:11,480 --> 00:34:14,580 Tất cả các bên phải, vì vậy, chúng ta hãy tôi-- bất kỳ câu hỏi? 756 00:34:14,580 --> 00:34:19,460 Bất kỳ câu hỏi khác về chỉ nhận được này làm việc trước khi chúng tôi thêm các tính năng? 757 00:34:19,460 --> 00:34:21,692 Và hãy để tôi đề xuất, chỉ cần để có được folks comfortable-- 758 00:34:21,692 --> 00:34:24,400 bởi vì nó là một điều để chỉ copy-paste một cách mù quáng những gì tôi đã làm. 759 00:34:24,400 --> 00:34:27,177 Nhưng chỉ cần như vậy mà folks vật lộn có ít nhất một công việc phải làm, 760 00:34:27,177 --> 00:34:28,510 Tôi sẽ bật nhạc. 761 00:34:28,510 --> 00:34:32,630 Tôi sẽ đề nghị danh sách điều bạn có khả năng có thể thêm. 762 00:34:32,630 --> 00:34:34,086 Và bạn chắc chắn có thể sử dụng Google. 763 00:34:34,086 --> 00:34:36,210 Và tại sao chúng ta không chỉ đề nghị bạn cố gắng để giải quyết 764 00:34:36,210 --> 00:34:38,710 ít nhất một vấn đề đặc biệt ở đây. 765 00:34:38,710 --> 00:34:45,090 Vì vậy, trong điều kiện của thẻ, hãy để tôi tái sử dụng này tại đây. 766 00:34:45,090 --> 00:34:48,280 >> Trên thực tế, hãy để tôi đặt nó trong một hình thức văn bản. 767 00:34:48,280 --> 00:35:02,380 Hãy nói rằng trong số các thẻ chúng ta có thể sử dụng ở đây là một số thẻ trên đây. 768 00:35:02,380 --> 00:35:06,090 Chúng tôi đã nhìn thấy các thẻ đoạn. 769 00:35:06,090 --> 00:35:07,850 Bây giờ nó sẽ tự động hoàn tất. 770 00:35:07,850 --> 00:35:12,220 tag khoản, thẻ liên kết. 771 00:35:12,220 --> 00:35:15,250 Hãy nói rằng bạn muốn làm một cái gì đó lớn hơn, 772 00:35:15,250 --> 00:35:19,480 vì vậy bạn có thể like-- thẻ span thể giúp đỡ. 773 00:35:19,480 --> 00:35:23,010 Vâng, bạn có thể cần một số giúp đỡ cho rằng chỉ trong một khoảnh khắc. 774 00:35:23,010 --> 00:35:24,830 Chúng tôi đã nhìn thấy div. 775 00:35:24,830 --> 00:35:26,170 Bạn sẽ thấy có bảng. 776 00:35:26,170 --> 00:35:27,928 Có một cái gì đó gọi là 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 Hãy trở lại để rằng trong một thời điểm. 780 00:35:34,770 --> 00:35:36,590 Những gì người khác có thể là tiện? 781 00:35:36,590 --> 00:35:38,310 Có mạnh. 782 00:35:38,310 --> 00:35:43,640 Có nhấn mạnh, hay đúng hơn là em. 783 00:35:43,640 --> 00:35:50,110 There's-- gì khác bạn có thể ưa thích đây? 784 00:35:50,110 --> 00:35:51,930 Vâng, chúng ta sẽ nhìn vào đó với nhau. 785 00:35:51,930 --> 00:35:53,230 Hình thức, mà chúng tôi đã nhìn thấy. 786 00:35:53,230 --> 00:35:54,130 Có hình thức. 787 00:35:54,130 --> 00:35:56,500 Có đầu vào và một vài người khác. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Được rồi, vậy chúng ta hãy làm điều này. 790 00:36:00,090 --> 00:36:02,330 Để trả lời một của Victoria câu hỏi, hãy để tôi đầu tiên 791 00:36:02,330 --> 00:36:05,020 chỉ cần đảm bảo rằng tất cả mọi người là có thể có được làm việc chào hỏi của họ. 792 00:36:05,020 --> 00:36:06,900 Sau đó, hãy để tôi giới thiệu một vài ý tưởng khác. 793 00:36:06,900 --> 00:36:09,209 Sau đó chúng tôi sẽ cho folks giải quyết một số vấn đề của riêng họ. 794 00:36:09,209 --> 00:36:11,500 Sau đó, chúng tôi sẽ thực sự trở lại cho rằng khái niệm về một hình thức, 795 00:36:11,500 --> 00:36:14,950 và chúng tôi sẽ thực sự tái thực hiện cùng giao diện front-end, 796 00:36:14,950 --> 00:36:16,450 vậy để nói chuyện, cho bản thân Google. 797 00:36:16,450 --> 00:36:19,700 Chúng tôi sẽ sử dụng Google như là kết thúc và để lại họ làm công việc khó khăn, việc tìm kiếm, 798 00:36:19,700 --> 00:36:22,760 nhưng chúng tôi sẽ tái tạo lại kết thúc trước Google và các hình thức tìm kiếm 799 00:36:22,760 --> 00:36:24,520 rằng họ có trên trang chủ của mình. 800 00:36:24,520 --> 00:36:27,050 Và vì vậy chúng tôi sẽ trở lại các thẻ chỉ trong một khoảnh khắc. 801 00:36:27,050 --> 00:36:30,270 >> Vì vậy, đây là những gì tôi đề xuất chỉ là một khoảnh khắc trước. 802 00:36:30,270 --> 00:36:33,940 Chúng ta có thể thêm các cách điệu với một trang bên trong của thẻ phong cách này, 803 00:36:33,940 --> 00:36:36,950 và chúng ta có thể phong cách hóa nền màu sắc, sự liên kết văn bản, 804 00:36:36,950 --> 00:36:39,000 cho dù đó là trung tâm hoặc trái hoặc phải. 805 00:36:39,000 --> 00:36:41,630 Nhưng rất nhanh chóng bạn sẽ tìm hoặc một nhà thiết kế web 806 00:36:41,630 --> 00:36:44,060 sẽ thấy rằng đây trở thành một ít khó sử dụng, 807 00:36:44,060 --> 00:36:48,330 bởi vì bạn đang làm gì gọi là nội dung trộn 808 00:36:48,330 --> 00:36:50,120 với bài thuyết trình đó. 809 00:36:50,120 --> 00:36:53,756 Bạn đang trộn dữ liệu của bạn và tính thẩm mỹ của nó. 810 00:36:53,756 --> 00:36:56,380 Và trên thực tế, nếu bạn xem xét những gì sẽ xảy ra trên time-- 811 00:36:56,380 --> 00:36:58,350 điều này là rất nhỏ trang web, tất nhiên. 812 00:36:58,350 --> 00:37:01,590 Nhưng nếu tôi thêm nội dung cho trang này và tôi thêm phong cách cho trang này, 813 00:37:01,590 --> 00:37:04,650 trang rất nhanh chóng nhận được dài hơn và dài hơn và dài hơn. 814 00:37:04,650 --> 00:37:07,510 Và giả sử rằng tôi muốn có một trang web thứ hai 815 00:37:07,510 --> 00:37:09,010 chia sẻ một số các thuộc tính. 816 00:37:09,010 --> 00:37:12,350 Giả sử trang web thứ hai của tôi cho tôi site-- cũng có, tôi muốn trung tâm tất cả mọi thứ, 817 00:37:12,350 --> 00:37:14,960 và tôi cũng muốn mọi thứ với một nền màu xanh lá cây. 818 00:37:14,960 --> 00:37:17,940 Tôi khá nhiều sẽ phải sao chép và dán một số của những dòng này 819 00:37:17,940 --> 00:37:20,730 vào tập tin thứ hai, mà cảm thấy tốt. 820 00:37:20,730 --> 00:37:22,030 Nó sẽ giải quyết vấn đề. 821 00:37:22,030 --> 00:37:26,060 >> Nhưng nếu tôi muốn có một trang thứ ba hoặc một trang 30 hoặc trang 40? 822 00:37:26,060 --> 00:37:28,730 Bây giờ tôi sẽ được sao chép và dán rất nhiều mã trùng lặp 823 00:37:28,730 --> 00:37:30,430 trong nhiều tập tin. 824 00:37:30,430 --> 00:37:32,600 Và do đó, giả sử rằng Tôi quyết định hay tôi đã nói, 825 00:37:32,600 --> 00:37:34,780 hey, chúng tôi không sử dụng nền xanh nữa. 826 00:37:34,780 --> 00:37:36,380 Chúng ta sẽ bắt đầu sử dụng màu cam. 827 00:37:36,380 --> 00:37:38,690 Bạn phải thay đổi những gì? 828 00:37:38,690 --> 00:37:42,900 Vâng, bạn phải thay đổi phong cách từ màu xanh sang màu da cam trong bao nhiêu nơi? 829 00:37:42,900 --> 00:37:44,920 Giống như 30 hoặc 40 địa điểm. 830 00:37:44,920 --> 00:37:45,900 Đó là tẻ nhạt. 831 00:37:45,900 --> 00:37:47,039 Nó là dễ bị lỗi. 832 00:37:47,039 --> 00:37:49,580 Có một số lý do nơi bạn sẽ không muốn gây ra 833 00:37:49,580 --> 00:37:51,840 là loại đau cho chính mình. 834 00:37:51,840 --> 00:37:54,760 Và như vậy sẽ không được tốt đẹp nếu chúng ta có thể mất những gì tôi chỉ 835 00:37:54,760 --> 00:37:58,240 đặt giữa hai màu vàng này thẻ, các thẻ phong cách, 836 00:37:58,240 --> 00:38:04,050 yếu tố nó ra, và đặt tất cả của tôi cách điệu thành một tập tin trung tâm 837 00:38:04,050 --> 00:38:08,470 rằng tất cả 30 hoặc 40 của các tập tin khác của tôi vay từ hoặc bằng cách nào đó tham khảo, 838 00:38:08,470 --> 00:38:11,640 không giống như các mạng sơ đồ chúng tôi đã làm trước đây? 839 00:38:11,640 --> 00:38:15,030 >> Vì vậy, nếu tôi đi ở đây, tôi sẽ thực sự đề nghị 840 00:38:15,030 --> 00:38:17,880 rằng chúng ta thay thế từ khóa phong cách với một cái gì đó 841 00:38:17,880 --> 00:38:21,620 gọi là thẻ liên kết, là khủng khiếp, khủng khiếp đặt tên, 842 00:38:21,620 --> 00:38:24,370 bởi vì bạn không sử dụng liên kết thẻ để tạo ra những gì 843 00:38:24,370 --> 00:38:26,380 con người chúng ta biết như là một liên kết trong một trang web. 844 00:38:26,380 --> 00:38:29,750 Cho rằng, bạn sử dụng mà thẻ? 845 00:38:29,750 --> 00:38:31,464 Làm thế nào để bạn tạo ra một liên kết trong một trang web? 846 00:38:31,464 --> 00:38:32,130 Đung Các a. 847 00:38:32,130 --> 00:38:34,870 DAVID J. Malan: Các a, hoặc neo thẻ, mà đã đi đến Disney trước. 848 00:38:34,870 --> 00:38:39,090 Thẻ liên kết ở đây đang nói này-- liên kết đến một tập tin gọi là 849 00:38:39,090 --> 00:38:44,350 styles.css, các mối quan hệ mà sẽ được rằng nó là kiểu của tôi. 850 00:38:44,350 --> 00:38:48,290 Vì vậy, đây là một trong những của S trong CSS-- cascading style sheets. 851 00:38:48,290 --> 00:38:50,490 Phong cách sheet-- hai của S trong CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading Style Sheet. 853 00:38:52,550 --> 00:38:58,640 Điều này chỉ có nghĩa là, hey, trình duyệt, đi tìm styles.css trên máy chủ địa phương 854 00:38:58,640 --> 00:39:01,870 và sử dụng nó như kiểu của bạn, có nghĩa là bên trong của tập tin đó 855 00:39:01,870 --> 00:39:05,310 sẽ là tất cả các stylizations mà chúng ta vừa thực hiện. 856 00:39:05,310 --> 00:39:07,396 Và vì vậy những gì tập tin đó có thể trông giống như là này. 857 00:39:07,396 --> 00:39:10,020 Và tôi sẽ chỉ làm điều này là một cách nhanh chóng Ví dụ, bởi vì chúng ta không cần 858 00:39:10,020 --> 00:39:12,000 để có được quá nhiều vào cỏ dại ở đây. 859 00:39:12,000 --> 00:39:17,840 Nhưng nếu tôi sao chép này, những gì tôi đề xuất là một lập trình viên tạo ra một tập tin mới, 860 00:39:17,840 --> 00:39:24,450 dán trong những lines-- whoops-- dán vào những đường nét, 861 00:39:24,450 --> 00:39:32,270 lưu nó như styles.css, và sau đó, trong các tập tin khác, xóa tất cả điều đó 862 00:39:32,270 --> 00:39:35,450 và thay thế nó thay với thẻ liên kết này. 863 00:39:35,450 --> 00:39:43,090 Vì vậy, rằng nếu tôi liên kết href = "styles.css", các mối quan hệ sẽ là "stylesheet" 864 00:39:43,090 --> 00:39:44,170 tag gần. 865 00:39:44,170 --> 00:39:45,250 Lưu nó. 866 00:39:45,250 --> 00:39:47,000 Quay trở lại helloworld tôi. 867 00:39:47,000 --> 00:39:48,690 Nạp lại. 868 00:39:48,690 --> 00:39:51,290 >> Nghĩa đen không có gì đã xảy ra. 869 00:39:51,290 --> 00:39:54,710 Đó là một điều tốt, bởi vì nó có nghĩa là nó thực sự là tất cả làm việc. 870 00:39:54,710 --> 00:39:58,860 Để chứng minh càng nhiều, giả sử tôi thực hiện một lỗi đánh máy, và tôi gọi đây là "styles.css" 871 00:39:58,860 --> 00:40:03,080 với số vốn S, mà là không chính xác, và sau đó tải lại. 872 00:40:03,080 --> 00:40:05,470 Bây giờ bạn có thể nhìn thấy nó chỉ không làm việc. 873 00:40:05,470 --> 00:40:06,362 Bây giờ, tại sao? 874 00:40:06,362 --> 00:40:08,070 Vâng, chúng ta hãy sử dụng một kỹ thuật từ trước đó. 875 00:40:08,070 --> 00:40:10,153 Hãy để tôi đi trước, và trong trình duyệt của tôi, trong Chrome, tôi 876 00:40:10,153 --> 00:40:12,900 sẽ mở ra mà đặc biệt tab mạng như trước, 877 00:40:12,900 --> 00:40:15,560 và hãy để tôi tải lại trang. 878 00:40:15,560 --> 00:40:19,341 bạn là gì không ngạc nhiên khi nhìn thấy bây giờ? 879 00:40:19,341 --> 00:40:20,840 Hoặc có thể bạn ngạc nhiên khi nhìn thấy nó. 880 00:40:20,840 --> 00:40:23,225 Dù bằng cách nào, những gì bạn nhìn thấy bây giờ? 881 00:40:23,225 --> 00:40:24,100 Đung [IM LẶNG] 882 00:40:24,100 --> 00:40:24,770 DAVID J. Malan: Nó không tìm thấy. 883 00:40:24,770 --> 00:40:25,680 Tại sao nó không tìm thấy? 884 00:40:25,680 --> 00:40:28,480 Vâng, vốn Styles.css-- S-- không tồn tại. 885 00:40:28,480 --> 00:40:29,230 Tôi đặt tên sai nó. 886 00:40:29,230 --> 00:40:30,430 typo đơn giản. 887 00:40:30,430 --> 00:40:33,816 Nhưng tôi nhận dễ hiểu tại một 404, bởi vì các máy chủ đang nói, hey, 888 00:40:33,816 --> 00:40:34,440 nó không được tìm thấy. 889 00:40:34,440 --> 00:40:36,300 Theo nghĩa đen, tôi không biết nơi tập tin đó là. 890 00:40:36,300 --> 00:40:38,880 Vì vậy, kết quả là, các trình duyệt cho bạn thấy những gì nó có thể, 891 00:40:38,880 --> 00:40:42,860 các nội dung thô của trang, mà đã là một 200, HTML, 892 00:40:42,860 --> 00:40:45,390 nhưng cách điệu không thể được thêm vào sau đó. 893 00:40:45,390 --> 00:40:47,120 Và đây là những gì có nghĩa là của tầng. 894 00:40:47,120 --> 00:40:49,070 Bạn có thể sắp xếp thêm sau đó, và nó loại 895 00:40:49,070 --> 00:40:50,874 trau chuốt tính thẩm mỹ của trang web. 896 00:40:50,874 --> 00:40:53,790 Và thậm chí bạn có thể ghi đè lên những phong cách với các file stylesheet nào được nêu khác 897 00:40:53,790 --> 00:40:54,700 nếu bạn muốn. 898 00:40:54,700 --> 00:40:57,780 Nó không tìm thấy, tuy nhiên, trong trường hợp này, bởi vì tất nhiên, tôi đặt tên sai nó. 899 00:40:57,780 --> 00:41:00,330 Vì vậy, tôi sẽ phải khắc phục điều đó đầu tiên. 900 00:41:00,330 --> 00:41:04,667 >> Vì vậy, chúng ta hãy đi trước và kiến nghị sau đây. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Hãy đi trước và làm điều này. 903 00:41:11,140 --> 00:41:14,220 Bắt đầu với có lẽ tập helloworld của bạn, 904 00:41:14,220 --> 00:41:17,740 hãy để tôi chỉ mời một vài các tính năng gợi ý. 905 00:41:17,740 --> 00:41:20,400 Vì vậy, Victoria, bạn muốn làm cho một số văn bản lớn hơn, phải không? 906 00:41:20,400 --> 00:41:24,555 Được rồi, vì vậy chúng tôi có thể nào làm cho văn bản lớn hơn. 907 00:41:24,555 --> 00:41:26,860 Và mỗi chúng ta sẽ nhổ ra chỉ là một vấn đề để giải quyết. 908 00:41:26,860 --> 00:41:30,867 Làm cho văn bản lớn hơn. 909 00:41:30,867 --> 00:41:32,700 Tôi sẽ không làm phiền văn bản này khi chúng tôi 910 00:41:32,700 --> 00:41:35,600 có công nghệ đạn ngay trên đây. 911 00:41:35,600 --> 00:41:39,970 Vì vậy, một số vấn đề. 912 00:41:39,970 --> 00:41:44,670 Vì vậy, chúng ta sẽ cố gắng để làm cho văn bản lớn hơn. 913 00:41:44,670 --> 00:41:45,170 Tất cả các quyền. 914 00:41:45,170 --> 00:41:48,360 một người nào đó sẽ đề nghị gì khác? 915 00:41:48,360 --> 00:41:50,332 Những gì người khác chúng ta có thể muốn để làm trong một trang web? 916 00:41:50,332 --> 00:41:52,040 Hãy đến với một danh sách ngắn các điều 917 00:41:52,040 --> 00:41:55,366 và sau đó uỷ thác cho nhóm con số này ra. 918 00:41:55,366 --> 00:41:56,270 >> Đung [IM LẶNG] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. Malan: OK, văn bản vị trí trên các cạnh khác nhau của trang? 920 00:42:02,251 --> 00:42:02,750 Tất cả các quyền. 921 00:42:02,750 --> 00:42:04,620 Thứ gì khác. 922 00:42:04,620 --> 00:42:05,784 >> Đung [IM LẶNG] 923 00:42:05,784 --> 00:42:06,700 DAVID J. Malan: Nó là. 924 00:42:06,700 --> 00:42:08,720 Vì vậy, một gif chỉ là định dạng tập tin khác nhau. 925 00:42:08,720 --> 00:42:12,830 Chúng tôi chỉ sử dụng, cái gì, một png hoặc jpg lẽ? 926 00:42:12,830 --> 00:42:14,480 Chúng tôi sử dụng một jpg. 927 00:42:14,480 --> 00:42:16,780 Nếu bạn tò mò, một quá mức trả lời cho câu hỏi của bạn 928 00:42:16,780 --> 00:42:19,404 là một jpg thường được sử dụng cho hình ảnh, bởi vì nó hỗ trợ 929 00:42:19,404 --> 00:42:21,500 hàng triệu màu sắc hoặc 24-bit màu. 930 00:42:21,500 --> 00:42:26,930 Một gif thường được sử dụng cho, như thế, memes internet những hình ảnh động days--, 931 00:42:26,930 --> 00:42:28,810 hình động như thế nào. 932 00:42:28,810 --> 00:42:32,320 Nhưng nó sẽ xảy ra để sử dụng một màu nhỏ bảng, chỉ có 256 màu sắc có thể, 933 00:42:32,320 --> 00:42:35,230 nhưng nó hỗ trợ minh bạch và hoạt hình. 934 00:42:35,230 --> 00:42:40,330 Và sau đó là png, mà hỗ trợ minh bạch và màu sắc hơn 935 00:42:40,330 --> 00:42:41,300 nhưng không phải hoạt hình. 936 00:42:41,300 --> 00:42:42,133 Vì vậy, nó là một thương mại-off. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 Vì vậy, thêm một gif, mặc dù, sẽ là chức năng 939 00:42:46,060 --> 00:42:48,396 tương đương với việc thêm một png hoặc jpg. 940 00:42:48,396 --> 00:42:49,110 Yeah. 941 00:42:49,110 --> 00:42:50,550 nguồn hình ảnh bằng. 942 00:42:50,550 --> 00:42:51,590 Vì vậy, cái gì khác. 943 00:42:51,590 --> 00:42:57,288 Hãy đến với cái gì đó chúng tôi đã gửi đến Victoria để làm ở đây. 944 00:42:57,288 --> 00:42:59,209 >> Đung Thêm nút cho một mẫu. 945 00:42:59,209 --> 00:43:00,000 DAVID J. Malan: OK. 946 00:43:00,000 --> 00:43:02,179 Vì vậy, thêm nút cho một mẫu. 947 00:43:02,179 --> 00:43:03,470 Và chúng tôi sẽ làm một cùng nhau. 948 00:43:03,470 --> 00:43:07,220 Vì vậy, đó sẽ là một segue hoàn hảo ngay sau khi thử thách này. 949 00:43:07,220 --> 00:43:10,357 Còn gì nữa không? 950 00:43:10,357 --> 00:43:11,440 Những gì bạn có thể muốn làm gì? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 Các web cảm thấy rất underwhelming nếu điều này là tất cả chúng ta có thể làm. 953 00:43:16,516 --> 00:43:18,140 Đung Thay đổi màu sắc của văn bản. 954 00:43:18,140 --> 00:43:19,500 DAVID J. Malan: Thay đổi những gì? 955 00:43:19,500 --> 00:43:20,666 Đung Màu của văn bản. 956 00:43:20,666 --> 00:43:22,311 DAVID J. Malan: Thay đổi màu sắc của văn bản. 957 00:43:22,311 --> 00:43:22,810 Tất cả các quyền. 958 00:43:22,810 --> 00:43:23,790 Vì vậy, chúng ta hãy làm điều này. 959 00:43:23,790 --> 00:43:27,209 Chỉ cần một lần nữa để bạn không, chỉ cần thuộc lòng, làm chính xác những gì tôi đang làm, 960 00:43:27,209 --> 00:43:29,500 Tôi sẽ bật nhạc cho có thể năm phút ở đây. 961 00:43:29,500 --> 00:43:30,450 Bạn đang chào đón để sử dụng Google. 962 00:43:30,450 --> 00:43:33,130 Bạn đang chào đón để hỏi tôi, và Tôi sẽ thì thầm một gợi ý trong tai của bạn. 963 00:43:33,130 --> 00:43:35,171 Bạn đang chào đón để tìm hơn về vai khác. 964 00:43:35,171 --> 00:43:37,340 Nhưng giải quyết chỉ là một trong những vấn đề này. 965 00:43:37,340 --> 00:43:40,190 Nhưng chúng tôi sẽ làm mới nhất, tạo thành một, nếu chúng ta có thể, với nhau. 966 00:43:40,190 --> 00:43:42,790 Vì vậy, năm phút để giải quyết bất kỳ một trong những vấn đề này 967 00:43:42,790 --> 00:43:46,780 sử dụng Google, trực giác, hoặc bất kỳ các phương tiện khác có sẵn cho bạn. 968 00:43:46,780 --> 00:43:48,630 >> [NHẠC] 969 00:43:48,630 --> 00:43:49,130 Tất cả các quyền. 970 00:43:49,130 --> 00:43:50,838 Đừng lo lắng nếu bạn muốn để giữ mày mò, 971 00:43:50,838 --> 00:43:53,880 nhưng tôi sẽ làm hỏng một vài các câu trả lời. 972 00:43:53,880 --> 00:43:57,986 Vì vậy, đề nghị đầu tiên từ Victoria là làm cho văn bản lớn hơn. 973 00:43:57,986 --> 00:43:59,360 Vì vậy, có một số cách để làm điều này. 974 00:43:59,360 --> 00:44:01,530 Tôi hiện đã phục hồi màn hình của tôi đến cỡ này, 975 00:44:01,530 --> 00:44:04,310 mặc dù tôi đã phóng to nhân tạo chỉ để nhìn thấy mọi thứ. 976 00:44:04,310 --> 00:44:07,470 Và chúng ta hãy làm điều này. 977 00:44:07,470 --> 00:44:11,380 Hãy để tôi đi trước và lấy một số văn bản Latin chung 978 00:44:11,380 --> 00:44:19,540 chỉ cần để chúng ta có một cái gì đó để làm việc với. 979 00:44:19,540 --> 00:44:20,715 Vì vậy, cho tôi chỉ là một khoảnh khắc. 980 00:44:20,715 --> 00:44:21,840 Tôi sẽ làm ba đoạn. 981 00:44:21,840 --> 00:44:53,430 982 00:44:53,430 --> 00:44:53,930 ĐƯỢC. 983 00:44:53,930 --> 00:44:55,560 Đây sẽ là một ví dụ tốt hơn. 984 00:44:55,560 --> 00:44:57,840 Vì vậy, cho tò mò, trong hello.html của tôi, tôi chỉ 985 00:44:57,840 --> 00:45:01,645 dán ba vô nghĩa đoạn Latin 986 00:45:01,645 --> 00:45:03,270 chỉ vì vậy chúng tôi có một số văn bản để làm việc với. 987 00:45:03,270 --> 00:45:06,720 Và mục tiêu của Victoria đã đến làm cho một số các văn bản lớn hơn. 988 00:45:06,720 --> 00:45:09,879 Vì vậy, tôi có thể, như trước, đi ở đây. 989 00:45:09,879 --> 00:45:11,170 Và hãy để tôi làm điều đó một cách đúng đắn. 990 00:45:11,170 --> 00:45:13,253 Tôi sẽ có một liên kết tag trỏ đến một tập tin 991 00:45:13,253 --> 00:45:20,560 gọi là "styles.css," các mối quan hệ trong số đó là một lần nữa "stylesheet". 992 00:45:20,560 --> 00:45:25,221 Và sau đó tôi sẽ tiết kiệm mà và mở ra này "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> Vì vậy, như trước đây, tôi có khả năng trong file CSS này 994 00:45:28,940 --> 00:45:31,569 để thực sự ghi đè mặc định thẩm mỹ của một trang web, 995 00:45:31,569 --> 00:45:33,860 và tính thẩm mỹ mặc định, tất nhiên, là khá buồn tẻ. 996 00:45:33,860 --> 00:45:36,943 Đó là loại kích thước phông chữ bình thường, màu đen văn bản, nền trắng, và vv. 997 00:45:36,943 --> 00:45:39,440 Vì vậy, giả sử tôi muốn làm tất cả các văn bản này lớn hơn. 998 00:45:39,440 --> 00:45:40,460 Tôi có thể làm một vài điều. 999 00:45:40,460 --> 00:45:43,750 Trong file styles.css của tôi, tôi có thể nói, bạn biết những gì, 1000 00:45:43,750 --> 00:45:46,950 áp dụng những điều sau đây để cơ thể của trang web của tôi. 1001 00:45:46,950 --> 00:45:51,390 Đi trước và làm cho cỡ chữ 24 điểm, 1002 00:45:51,390 --> 00:45:54,130 mà là một số tôi có thể sử dụng trong Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Hãy để tôi quay trở lại trang web của tôi trang ở đây và tải lại, 1004 00:45:57,620 --> 00:45:59,640 và bạn có thể thấy rằng nó đã lớn hơn rất nhiều. 1005 00:45:59,640 --> 00:46:02,223 Và chúng ta có thể có được một chút điên rồ, giống như chúng ta có thể vào một desktop-- 1006 00:46:02,223 --> 00:46:03,670 làm cho nó 96 điểm. 1007 00:46:03,670 --> 00:46:04,950 Nạp lại. 1008 00:46:04,950 --> 00:46:07,610 Và nó nhận được một chút khó sử dụng vào thời điểm này. 1009 00:46:07,610 --> 00:46:09,500 >> Nhưng tôi có thể là một chút chính xác hơn. 1010 00:46:09,500 --> 00:46:14,530 Thay vì áp dụng này stylesheet để cơ thể của trang web của tôi, 1011 00:46:14,530 --> 00:46:21,740 những gì khác tôi có thể áp dụng nó để thay vào đó, những thẻ khác mà có thể vẫn 1012 00:46:21,740 --> 00:46:25,445 chức năng trong cùng một cách? 1013 00:46:25,445 --> 00:46:26,444 >> Đung p thẻ? 1014 00:46:26,444 --> 00:46:27,360 DAVID J. Malan: P thẻ. 1015 00:46:27,360 --> 00:46:29,350 Vì vậy, người đứng đầu sẽ không được đúng, bởi vì người đứng đầu, 1016 00:46:29,350 --> 00:46:31,300 bạn có thể không thực sự kiểm soát các thẩm mỹ của. 1017 00:46:31,300 --> 00:46:32,700 Có hai văn bản có hay không. 1018 00:46:32,700 --> 00:46:36,760 Nhưng p tag-- tôi có thể lặn trong một chút sâu hơn, có thể nói, đến đoạn 1019 00:46:36,760 --> 00:46:37,350 thẻ. 1020 00:46:37,350 --> 00:46:41,600 Và mặc dù có ba, đó là hoàn toàn tốt đẹp, bởi vì trong CSS, 1021 00:46:41,600 --> 00:46:44,900 khi tôi chỉ nói "p" này có nghĩa là áp dụng như sau 1022 00:46:44,900 --> 00:46:48,300 tới bất kỳ thẻ phù hợp này chọn, bộ chọn chỉ 1023 00:46:48,300 --> 00:46:49,430 là tên của thẻ. 1024 00:46:49,430 --> 00:46:52,350 Vì vậy, bất cứ nơi nào bạn nhìn thấy một "P", áp dụng các kích thước font chữ, 1025 00:46:52,350 --> 00:46:55,222 và chúng ta hãy làm cho nó thêm hợp lý again-- 24 điểm. 1026 00:46:55,222 --> 00:46:56,930 Và bạn biết những gì, chỉ cho các biện pháp tốt, 1027 00:46:56,930 --> 00:46:59,810 chúng ta hãy làm cho màu sắc chỉ có màu đỏ cho thời điểm này. 1028 00:46:59,810 --> 00:47:03,740 Và bây giờ nếu tôi tải lại, bây giờ chúng tôi thấy ba đoạn xấu xí. 1029 00:47:03,740 --> 00:47:07,180 >> Nhưng bây giờ giả sử rằng tôi đang sắp xếp lượng-- Tôi muốn đoạn đầu tiên 1030 00:47:07,180 --> 00:47:08,210 để nhảy ra ở người sử dụng. 1031 00:47:08,210 --> 00:47:11,150 Tôi không muốn chỉ tăng kích thước font chữ của tất cả mọi thứ. 1032 00:47:11,150 --> 00:47:16,105 Và vì vậy tôi thực sự muốn để xác định hoặc phân biệt giữa các đoạn văn. 1033 00:47:16,105 --> 00:47:18,730 Vì vậy, hãy thoát khỏi các màu đỏ, bởi vì đó chỉ là loại dính, 1034 00:47:18,730 --> 00:47:23,885 và chúng ta hãy đi trước và thực hiện các font size 12 điểm theo mặc định, 1035 00:47:23,885 --> 00:47:26,260 do đó chúng tôi trở lại với một cái gì đó hợp lý hơn một chút. 1036 00:47:26,260 --> 00:47:29,190 Và bây giờ tôi chỉ muốn tăng kích thước font chữ của đoạn đầu tiên. 1037 00:47:29,190 --> 00:47:31,440 Tôi có thể làm điều này trong một vài cách, nhưng một trong những cách đó là 1038 00:47:31,440 --> 00:47:37,180 có lẽ giảng dạy nhất tại thời điểm này là để làm như sau. 1039 00:47:37,180 --> 00:47:43,280 Hãy để tôi đi trước và nói, đây đoạn có một ID duy nhất của "đầu tiên." 1040 00:47:43,280 --> 00:47:45,000 Tôi có thể gọi bất cứ điều gì tôi muốn này. 1041 00:47:45,000 --> 00:47:46,874 Tôi có thể gọi đây là "foo" hoặc bất kỳ từ nào khác, 1042 00:47:46,874 --> 00:47:49,290 nhưng tôi sẽ cho nó một số Tên ngữ nghĩa có ý nghĩa 1043 00:47:49,290 --> 00:47:50,320 như "đầu tiên." 1044 00:47:50,320 --> 00:47:54,790 Đây là định danh duy nhất, ID, cho đoạn đầu tiên của tôi. 1045 00:47:54,790 --> 00:47:59,360 >> Những gì chúng ta có thể làm trong stylesheet của tôi là có một chút chính xác hơn. 1046 00:47:59,360 --> 00:48:02,330 Thay vì nói, áp dụng sau vào thẻ p, 1047 00:48:02,330 --> 00:48:04,890 Tôi có thể nói following-- áp dụng những điều sau đây, 1048 00:48:04,890 --> 00:48:11,000 hoặc lựa chọn, các phần tử HTML mà có một ID duy nhất của "đầu tiên." 1049 00:48:11,000 --> 00:48:12,350 Làm gì tôi muốn áp đặt cho nó? 1050 00:48:12,350 --> 00:48:15,250 Một kích thước font chữ của 24 điểm. 1051 00:48:15,250 --> 00:48:16,640 Vì vậy, tôi có hai bộ chọn bây giờ. 1052 00:48:16,640 --> 00:48:19,690 Một làm cho tất cả các đoạn 12 điểm. 1053 00:48:19,690 --> 00:48:24,960 Nhưng lần này, đặc biệt là kể từ khi nó đi kèm second-- nói cuối cùng trong file-- 1054 00:48:24,960 --> 00:48:27,090 này có hiệu ứng tầng. 1055 00:48:27,090 --> 00:48:30,200 Tôi đã chỉ cần thực hiện tất cả của tôi tags đoạn 12 điểm, 1056 00:48:30,200 --> 00:48:34,350 nhưng điều này bây giờ thác và ghi đè lên rằng với bất kỳ yếu tố 1057 00:48:34,350 --> 00:48:38,800 trong trang, bất kỳ thẻ trong trang mà ID duy nhất là quote unquote "đầu tiên." 1058 00:48:38,800 --> 00:48:41,720 Và hashtag trong bối cảnh này chỉ có nghĩa là "định danh duy nhất." 1059 00:48:41,720 --> 00:48:43,750 Tôi không đặt nó trong tập tin HTML. 1060 00:48:43,750 --> 00:48:46,880 Tôi, ở đây, chỉ cần nói quote unquote "đầu tiên." 1061 00:48:46,880 --> 00:48:48,470 >> Vì vậy, hãy để tôi tải lại. 1062 00:48:48,470 --> 00:48:49,919 Và bây giờ tôi thấy, ah, OK. 1063 00:48:49,919 --> 00:48:51,710 Ý tôi là, nó không phải là đẹp, nhưng nó là loại 1064 00:48:51,710 --> 00:48:53,600 giống như lời nói đầu cho một cuốn sách hoặc một cái gì đó như thế, 1065 00:48:53,600 --> 00:48:55,100 nơi đoạn đầu tiên là lớn hơn. 1066 00:48:55,100 --> 00:48:57,933 Có thể còn chính xác hơn với chỉ các chữ cái đầu tiên, nhưng ít nhất 1067 00:48:57,933 --> 00:48:59,110 Tôi đã thực hiện kiểm soát nhiều hơn. 1068 00:48:59,110 --> 00:49:04,760 Bây giờ maybe-- có lẽ tôi muốn làm điều này đôi khi vì lý do gì, 1069 00:49:04,760 --> 00:49:09,010 và vì vậy tôi không muốn điều này áp dụng để chỉ một thẻ HTML. 1070 00:49:09,010 --> 00:49:15,110 Thay vào đó, chúng ta hãy say-- hãy cũng làm như sau. 1071 00:49:15,110 --> 00:49:18,810 Class = "nhập khẩu". 1072 00:49:18,810 --> 00:49:23,970 Trong khi đó, một ID được sử dụng để duy nhất xác định một điều, một thẻ, 1073 00:49:23,970 --> 00:49:30,190 trong trang web của bạn, một lớp học được hiểu là được sử dụng trên bất kỳ số lượng các yếu tố hoặc thẻ 1074 00:49:30,190 --> 00:49:30,950 trên trang web của bạn. 1075 00:49:30,950 --> 00:49:31,710 Vì vậy, nó có thể dùng lại. 1076 00:49:31,710 --> 00:49:33,090 Một ID là không thể tái sử dụng. 1077 00:49:33,090 --> 00:49:34,450 Một lớp là tái sử dụng. 1078 00:49:34,450 --> 00:49:37,830 >> Và bạn biết không, cho bất cứ điều gì reasons-- triết học 1079 00:49:37,830 --> 00:49:40,180 Tôi đã không hoàn thành của tôi thought-- tôi sẽ nói 1080 00:49:40,180 --> 00:49:44,300 mà đoạn đầu tiên và Đoạn thứ hai là quan trọng. 1081 00:49:44,300 --> 00:49:48,600 Vì vậy, tôi sẽ áp dụng các lớp được gọi là "Quan trọng", rằng, nếu tôi lưu tập tin của tôi 1082 00:49:48,600 --> 00:49:51,510 và tải lại, không có ảnh hưởng chức năng nào. 1083 00:49:51,510 --> 00:49:53,780 Nhưng tôi đã thêm một số siêu dữ liệu vào tập tin, 1084 00:49:53,780 --> 00:49:56,610 loại một cái gì đó riêng biệt từ dữ liệu cốt lõi của tập tin, 1085 00:49:56,610 --> 00:50:02,300 vì vậy mà bây giờ trong stylesheet của tôi, nếu tôi thay vì nói ".important" - bạn đã biết, 1086 00:50:02,300 --> 00:50:07,110 bất cứ điều gì đó quan trọng, tôi sẽ làm cho phông chữ màu, red-- 1087 00:50:07,110 --> 00:50:09,930 hay đúng hơn là không phông chữ màu, chỉ màu. 1088 00:50:09,930 --> 00:50:12,930 Có mâu thuẫn trong CSS không may. 1089 00:50:12,930 --> 00:50:14,120 Và tải lại. 1090 00:50:14,120 --> 00:50:17,640 Bây giờ chú ý đầu tiên hai đoạn màu đỏ 1091 00:50:17,640 --> 00:50:20,880 nhưng không phải là thứ ba, bởi vì tôi chỉ áp dụng các lớp học của "quan trọng" 1092 00:50:20,880 --> 00:50:25,020 để hai đầu tiên của những điều đó. 1093 00:50:25,020 --> 00:50:28,030 >> Vì vậy, trong ID, bạn có khả năng xác định rất chính xác. 1094 00:50:28,030 --> 00:50:30,110 Với các lớp, bạn có thể dùng lại. 1095 00:50:30,110 --> 00:50:33,800 Nhưng trong cả hai trường hợp, thông báo loại nguyên tắc tốt-thiết kế 1096 00:50:33,800 --> 00:50:39,072 nơi tôi yếu tố ra tất cả các thẩm mỹ để tập styles.css của tôi. 1097 00:50:39,072 --> 00:50:40,280 Vì vậy, không có hỗn độn ở đây. 1098 00:50:40,280 --> 00:50:44,490 Không có đề cập đến màu đỏ hoặc đậm-lát hoặc kích thước phông chữ trong tập tin này. 1099 00:50:44,490 --> 00:50:49,430 Thay vào đó tôi có ngữ nghĩa, có ý nghĩa đặc trưng dữ liệu của tôi là, 1100 00:50:49,430 --> 00:50:51,240 đây là một số dữ liệu quan trọng. 1101 00:50:51,240 --> 00:50:52,800 Dưới đây là một số dữ liệu quan trọng hơn. 1102 00:50:52,800 --> 00:50:56,500 Hơn nữa, đây là "Đầu tiên" của dữ liệu quan trọng của tôi. 1103 00:50:56,500 --> 00:51:01,050 Vì vậy, HTML là tất cả về loại gắn thẻ, theo nghĩa đen, chữ 1104 00:51:01,050 --> 00:51:05,270 và đoạn văn và cấu trúc trong của bạn trang với những gợi ý nhỏ, nếu bạn 1105 00:51:05,270 --> 00:51:07,640 sẽ, mà bạn có thể bằng cách nào đó tận dụng sử dụng 1106 00:51:07,640 --> 00:51:10,880 các kỹ thuật khác như CSS theo cách này. 1107 00:51:10,880 --> 00:51:14,760 >> Vì vậy, trong câu trả lời cho câu hỏi của Victoria, chúng ta có thể làm cho văn bản lớn hơn theo cách đó. 1108 00:51:14,760 --> 00:51:18,380 Có rất nhiều cách khác, nhưng font tag-- mở khung "font" - 1109 00:51:18,380 --> 00:51:19,770 thực sự là một vài tuổi. 1110 00:51:19,770 --> 00:51:21,410 Và đây là vấn đề, quá, với chỉ dựa 1111 00:51:21,410 --> 00:51:23,485 trên resources-- trực tuyến họ có xu hướng bị lỗi thời. 1112 00:51:23,485 --> 00:51:26,110 Và quả thực, không được chấp, bởi vì thế giới nhận ra, 1113 00:51:26,110 --> 00:51:28,970 những gì hiện "font-size = 7" nghĩa là gì? 1114 00:51:28,970 --> 00:51:29,670 Nó không. 1115 00:51:29,670 --> 00:51:32,770 Và như vậy trong nhiều năm và đến này day-- một bên 1116 00:51:32,770 --> 00:51:36,060 lưu ý ở đây là nó thực sự là vô cùng đau đớn đôi khi vẫn còn 1117 00:51:36,060 --> 00:51:38,900 để phát triển trang web cho các web, bởi vì Microsoft 1118 00:51:38,900 --> 00:51:44,220 và Google và Mozilla và những người khác thường không đồng ý như thế nào 1119 00:51:44,220 --> 00:51:47,480 để giải thích một đặc điểm kỹ thuật như HTML. 1120 00:51:47,480 --> 00:51:52,490 >> Có một rulebook cho HTML thường nói những gì mỗi thẻ có nghĩa. 1121 00:51:52,490 --> 00:51:55,690 Nhưng đôi khi nó để lại cho ý thực hiện của, 1122 00:51:55,690 --> 00:51:57,290 Microsoft theo ý mình và Google. 1123 00:51:57,290 --> 00:52:00,000 Và như vậy bạn sẽ rất thường xuyên thấy trên một cái gì đó trang web 1124 00:52:00,000 --> 00:52:04,954 trông khác nhau trên một máy tính hơn là trên một máy Mac, 1125 00:52:04,954 --> 00:52:06,995 và đó thực sự bởi vì, vào cuối ngày, 1126 00:52:06,995 --> 00:52:08,891 họ đã không kiểm tra nó tốt trên cả hai nền tảng. 1127 00:52:08,891 --> 00:52:11,390 Nhưng nó cũng là vì lý, những người thông minh sẽ không đồng ý 1128 00:52:11,390 --> 00:52:14,970 và các công ty sẽ không đồng ý, và vì vậy một trong những thách thức của lập trình 1129 00:52:14,970 --> 00:52:16,980 cho web hay thiết kế thứ cho web 1130 00:52:16,980 --> 00:52:21,700 đang viết trang web của bạn trong một cách hoạt động trên mọi trình duyệt web. 1131 00:52:21,700 --> 00:52:23,410 Nhưng ngay cả khi đó là không hợp lý, phải không? 1132 00:52:23,410 --> 00:52:27,807 Có rất nhiều phiên bản của rất nhiều trình duyệt ra khỏi đó, tại một số điểm, 1133 00:52:27,807 --> 00:52:30,890 bạn cũng phải thực hiện một cuộc gọi phán quyết và bạn phải quyết định như một công ty, 1134 00:52:30,890 --> 00:52:33,082 đặc biệt là đối với thương mại điện tử theo phong cách các trang web mà bạn đang 1135 00:52:33,082 --> 00:52:36,290 cố gắng sử dụng mới nhất và lớn nhất công nghệ để cung cấp cho người dùng thực sự tốt 1136 00:52:36,290 --> 00:52:37,110 kinh nghiệm. 1137 00:52:37,110 --> 00:52:41,019 Nhưng một số tỷ lệ phần trăm của những người dùng của bạn có thể vẫn còn được sử dụng Internet Explorer 6 hoặc 7 1138 00:52:41,019 --> 00:52:43,810 hoặc 8, đặc biệt là phụ thuộc vào quốc gia mà họ đang đến từ. 1139 00:52:43,810 --> 00:52:46,760 >> Và như vậy rất thường được quan tâm là cái gì đó 1140 00:52:46,760 --> 00:52:50,920 như "thống kê trình duyệt web." 1141 00:52:50,920 --> 00:52:56,560 Và nếu chúng ta đi đối với: hãy xem Wikipedia và xem làm thế nào để luôn cập nhật bảng xếp hạng này là 1142 00:52:56,560 --> 00:52:59,320 nếu có một. 1143 00:52:59,320 --> 00:53:02,420 Vì vậy, ở đây bạn có thể nhìn thấy nơi các trình duyệt thực sự 1144 00:53:02,420 --> 00:53:06,160 là, theo tháng 12 năm 2015, Theo Chính phủ Hoa Kỳ. 1145 00:53:06,160 --> 00:53:11,170 Chrome là ở mức 42% thị phần, tiếp theo IE phần lớn trong các thiết lập của công ty 1146 00:53:11,170 --> 00:53:14,490 hoặc cài đặt máy tính, tất nhiên, tiếp theo là Firefox, 1147 00:53:14,490 --> 00:53:17,440 sau đó Safari, sau đó Opera không làm cho bản đồ ở đây đối với một số lý do, 1148 00:53:17,440 --> 00:53:18,210 và sau đó những người khác. 1149 00:53:18,210 --> 00:53:19,500 Có lẽ nó thuộc khác. 1150 00:53:19,500 --> 00:53:27,700 Nhưng vấn đề hơn mà hợp-- chúng ta hãy xem Wikipedia cũng có 1151 00:53:27,700 --> 00:53:35,194 các phiên bản của trình duyệt version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Hãy đi đến thống kê của trình duyệt. 1154 00:53:39,190 --> 00:53:40,680 IE. 1155 00:53:40,680 --> 00:53:42,030 Thậm chí đó là không đủ. 1156 00:53:42,030 --> 00:53:44,854 thống kê trình duyệt. 1157 00:53:44,854 --> 00:53:45,353 phiên bản của tôi. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Điều đó sẽ không đúng. 1160 00:53:50,540 --> 00:53:53,414 Hãy xem phiên bản. 1161 00:53:53,414 --> 00:53:54,830 thị phần trình duyệt. 1162 00:53:54,830 --> 00:53:57,110 Hãy xem nếu điều này đi lên. 1163 00:53:57,110 --> 00:53:57,610 ĐƯỢC. 1164 00:53:57,610 --> 00:54:00,010 Bây giờ điều này là nhận được hữu ích hơn một chút. 1165 00:54:00,010 --> 00:54:04,870 Vì vậy, ở đây, nhận thấy rằng chúng tôi có tất cả các phiên bản khác nhau của trình duyệt. 1166 00:54:04,870 --> 00:54:09,887 Và, my god, nếu bạn look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Tôi có nghĩa là, các trình duyệt ngày càng cập nhật, và đôi khi một số những thay đổi 1168 00:54:12,970 --> 00:54:16,430 có ý nghĩa trong Về chức năng. 1169 00:54:16,430 --> 00:54:20,630 Và như vậy tại một số điểm, quản lý sản phẩm hoặc các kỹ sư 1170 00:54:20,630 --> 00:54:23,620 cần phải thực hiện một decision-- bạn biết gì, chỉ có 1% của thế giới 1171 00:54:23,620 --> 00:54:24,740 vẫn còn sử dụng IE 7. 1172 00:54:24,740 --> 00:54:25,490 Để địa ngục với họ. 1173 00:54:25,490 --> 00:54:27,470 Chúng tôi chỉ sẽ không hỗ trợ trình duyệt đó. 1174 00:54:27,470 --> 00:54:28,740 Và những gì nó có nghĩa là không hỗ trợ? 1175 00:54:28,740 --> 00:54:31,170 Nó có thể có nghĩa là các nút không làm việc trên trang web của bạn, 1176 00:54:31,170 --> 00:54:33,050 hoặc nó có thể có nghĩa là định dạng là hoàn toàn tắt. 1177 00:54:33,050 --> 00:54:35,091 Hoặc bạn có thể phải làm mà gọi phán quyết tương tự 1178 00:54:35,091 --> 00:54:39,089 trong điện thoại di động những ngày này, ở đâu, chúng tôi sẽ không hỗ trợ iOS 5 nữa. 1179 00:54:39,089 --> 00:54:40,380 Vì vậy, người dân chỉ cần có để nâng cấp. 1180 00:54:40,380 --> 00:54:45,850 Hoặc chúng tôi sẽ không để hỗ trợ Cupcake trên hệ điều hành Android cho các thiết bị Android, 1181 00:54:45,850 --> 00:54:48,629 bởi vì như world-- như thế giới công nghệ muốn di chuyển về phía trước, 1182 00:54:48,629 --> 00:54:51,170 nó loại muốn kéo thế giới với nó vì vậy mà họ không 1183 00:54:51,170 --> 00:54:53,295 phải tiếp tục được tương thích ngược để họ 1184 00:54:53,295 --> 00:54:54,920 có thể cung cấp các tính năng mới và tốt. 1185 00:54:54,920 --> 00:54:57,878 Đây thực sự là một trong những lý do tại sao rất nhiều công ty đang triển khai 1186 00:54:57,878 --> 00:55:01,440 tự động cập nhật và loại buộc các phiên bản mới nhất của phần mềm trên chúng ta. 1187 00:55:01,440 --> 00:55:04,010 Và ngay cả các công ty như Apple sẽ sắp xếp của 1188 00:55:04,010 --> 00:55:07,280 buộc bạn gần như hoặc buộc bạn về các lực lượng thị trường 1189 00:55:07,280 --> 00:55:11,164 để mua một chiếc điện thoại mới, vì họ chỉ sẽ không cập nhật điện thoại cũ của bạn nữa. 1190 00:55:11,164 --> 00:55:13,330 Vì vậy, bạn bỏ lỡ mới nhất và tính năng lớn nhất, 1191 00:55:13,330 --> 00:55:17,520 vì nó tốn kém đối với họ như một công ty để duy trì tuổi, cho là 1192 00:55:17,520 --> 00:55:19,330 các phiên bản thấp hơn của phần mềm. 1193 00:55:19,330 --> 00:55:23,660 Nhưng tác động ròng là chúng tôi cũng phải chịu đựng điều này là tốt. 1194 00:55:23,660 --> 00:55:26,550 >> Vì vậy, chúng ta hãy nhìn vào chỉ một vài điều cuối cùng ở đây. 1195 00:55:26,550 --> 00:55:29,740 Hãy gõ tắt thật nhanh một số những viên đạn khác, nếu tò mò. 1196 00:55:29,740 --> 00:55:33,440 Vì vậy, nếu bạn đang cố gắng, Ví dụ, vị trí 1197 00:55:33,440 --> 00:55:36,420 các văn bản trên các mặt khác nhau của trang, tôi sẽ làm một cách nhanh chóng, 1198 00:55:36,420 --> 00:55:38,360 nhưng có khác nhau cách làm điều này. 1199 00:55:38,360 --> 00:55:42,610 Hãy để tôi đi trước và eliminate-- đơn giản hóa này như sau. 1200 00:55:42,610 --> 00:55:45,330 Hãy để tôi chỉ trở lại của tôi đơn giản, đoạn văn đơn giản. 1201 00:55:45,330 --> 00:55:47,760 Hãy để tôi quay trở lại styles.css của tôi. 1202 00:55:47,760 --> 00:55:51,040 Và tôi chỉ cần đi để sử dụng simple-- mà bạn có thể đã thấy trên Google 1203 00:55:51,040 --> 00:55:54,430 hoặc thu hồi từ earlier-- văn bản sắp xếp đúng. 1204 00:55:54,430 --> 00:55:56,220 Và tải lại trang này. 1205 00:55:56,220 --> 00:55:58,470 Bây giờ tất cả mọi thứ dường như được canh phải, 1206 00:55:58,470 --> 00:56:00,770 như bạn có thể thấy trên các nguyên cần thiết ở đây. 1207 00:56:00,770 --> 00:56:04,470 >> Chúng tôi có thể làm cho nó trông nhiều hơn một chút đặt-như thế, và chúng ta có thể nói rằng "biện minh" 1208 00:56:04,470 --> 00:56:05,640 và tải lại. 1209 00:56:05,640 --> 00:56:09,870 Bây giờ nó đẹp và vuông trên cả bên, đó là loại tốt đẹp. 1210 00:56:09,870 --> 00:56:12,220 Một mục tiêu khác mà chúng ta có ở đây là sự thay đổi màu sắc của văn bản. 1211 00:56:12,220 --> 00:56:13,650 Vì vậy, chúng ta thấy rằng với văn bản màu đỏ của tôi. 1212 00:56:13,650 --> 00:56:15,630 Và bây giờ thêm nút cho một mẫu. 1213 00:56:15,630 --> 00:56:19,390 Vậy tại sao chúng ta không cố gắng làm chính xác này? 1214 00:56:19,390 --> 00:56:23,656 Nhưng trước tiên hãy để tôi đi đến một trang web hầu hết chúng ta sử dụng hàng day-- Google. 1215 00:56:23,656 --> 00:56:25,780 Và chúng ta hãy nhìn vào cách Google thực sự hoạt động. 1216 00:56:25,780 --> 00:56:26,821 Nhưng tôi sẽ làm điều này. 1217 00:56:26,821 --> 00:56:31,930 Trước tiên hãy để tôi làm điều đó in-- vâng, cho tôi đi đến đầu tiên của Google. 1218 00:56:31,930 --> 00:56:34,530 Tôi sẽ phải đi vào cài đặt Google, 1219 00:56:34,530 --> 00:56:40,660 bởi vì tôi muốn vô hiệu hóa một cái gì đó gọi là kết quả tức thì. 1220 00:56:40,660 --> 00:56:43,580 >> Vì vậy, bạn có thể thấy trong Google những days-- cho tôi quay trở lại 1221 00:56:43,580 --> 00:56:44,850 và biến này. 1222 00:56:44,850 --> 00:56:47,900 Vì vậy, nếu tôi bắt đầu tìm kiếm cho "mèo" như thế này, 1223 00:56:47,900 --> 00:56:50,120 nhận thấy rằng không chỉ làm Tôi có được tự động hoàn thành lên 1224 00:56:50,120 --> 00:56:54,520 hàng đầu, tất cả của một đột ngột, trang này dường như thay đổi khá nhanh càng tốt, 1225 00:56:54,520 --> 00:56:58,750 và đó là Google sử dụng một ngôn ngữ gọi là JavaScript cố gắng để được giúp đỡ. 1226 00:56:58,750 --> 00:57:01,540 Nhưng thật không may, nó loại của messes lên cuộc thảo luận của chúng tôi 1227 00:57:01,540 --> 00:57:04,010 về những gì thực sự xảy ra bên dưới mui xe ở đây. 1228 00:57:04,010 --> 00:57:09,070 Vì vậy, tôi chỉ cần loại một cách nhanh chóng tắt kết quả tức thì. 1229 00:57:09,070 --> 00:57:11,510 Và tôi sẽ phải bấm Save. 1230 00:57:11,510 --> 00:57:13,930 Và bây giờ tôi sẽ mở rằng thanh công cụ chẩn đoán rằng tôi 1231 00:57:13,930 --> 00:57:16,150 giữ mở dưới tab Network. 1232 00:57:16,150 --> 00:57:17,720 Vì vậy, hãy làm điều này. 1233 00:57:17,720 --> 00:57:21,960 Hãy tôi-- whoops-- di chuyển này xuống một chút. 1234 00:57:21,960 --> 00:57:24,410 Và hãy để tôi tìm kiếm cho "mèo". 1235 00:57:24,410 --> 00:57:26,790 >> Và bây giờ notice-- thực sự, đây là một cơ hội tốt 1236 00:57:26,790 --> 00:57:28,840 để thảo luận về một lúc. 1237 00:57:28,840 --> 00:57:32,460 Chú ý thời điểm tôi doanh-- ngăn chặn nó. 1238 00:57:32,460 --> 00:57:35,250 Dừng lại đi. 1239 00:57:35,250 --> 00:57:35,790 ĐƯỢC. 1240 00:57:35,790 --> 00:57:40,870 Chú ý thời điểm này tôi gõ chữ C, xem phía dưới cùng của màn hình. 1241 00:57:40,870 --> 00:57:48,600 A- T S. gì phía dưới của màn hình này, tab Mạng của tôi, 1242 00:57:48,600 --> 00:57:53,320 đề nghị đang diễn ra từng Hiện tôi gõ một bức thư? 1243 00:57:53,320 --> 00:57:57,700 Thật không may, con ếch rất mất tập trung ngày hôm nay hoặc các shamrock 1244 00:57:57,700 --> 00:58:00,339 hoặc bất cứ điều gì anh ta. 1245 00:58:00,339 --> 00:58:01,880 Điều gì đã xảy ra mỗi khi tôi đánh máy? 1246 00:58:01,880 --> 00:58:04,230 Và hãy để tôi xóa đệm và gõ lại lần nữa. 1247 00:58:04,230 --> 00:58:06,580 Lỗi chính vậy--. 1248 00:58:06,580 --> 00:58:13,280 Mỗi lần tôi gõ một bức thư, C- A- T-- do đó, một hàng mới rõ ràng giữ xuất hiện. 1249 00:58:13,280 --> 00:58:16,530 Gì mỗi người trong những hàng đại diện, dựa trên những gì chúng tôi đã nhìn thấy và thảo luận 1250 00:58:16,530 --> 00:58:17,339 vậy, đến nay? 1251 00:58:17,339 --> 00:58:18,130 Đung A tìm kiếm? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. Malan: Một tìm kiếm, hoặc quát hơn, một yêu cầu HTTP 1253 00:58:21,770 --> 00:58:23,125 từ trình duyệt của tôi đến máy chủ. 1254 00:58:23,125 --> 00:58:29,090 Vâng, tại sao trình duyệt của tôi làm cho một HTTP yêu cầu mỗi khi tôi gõ một bức thư? 1255 00:58:29,090 --> 00:58:30,502 >> Đung [IM LẶNG] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. Malan: Vâng, nó đem lại cho tôi những kết quả tự động hoàn tất. 1257 00:58:33,210 --> 00:58:35,190 Giống như, nơi làm những kết quả tìm kiếm đến từ đâu? 1258 00:58:35,190 --> 00:58:38,120 Vâng, mỗi khi tôi gõ một thư, Google sẽ gửi hơn 1259 00:58:38,120 --> 00:58:40,460 và ngày càng nhiều của Những từ ngữ tôi đang gõ. 1260 00:58:40,460 --> 00:58:41,040 Tại sao? 1261 00:58:41,040 --> 00:58:44,540 Bởi vì họ muốn cho tôi một tốt hơn và tốt hơn, đề nghị tốt hơn, 1262 00:58:44,540 --> 00:58:48,880 một danh sách gợi ý, cho những gì từ Tôi đang cố gắng để thực sự hoàn chỉnh. 1263 00:58:48,880 --> 00:58:53,030 Vì vậy, đây là nói theo nghĩa đen mỗi nhân vật mà bạn gõ vào Google 1264 00:58:53,030 --> 00:58:56,900 đang được gửi đi, cuối cùng trong số lượng lớn, nhưng cũng đôi khi một 1265 00:58:56,900 --> 00:59:00,620 tại một thời điểm để thực hiện các tính năng tự động hoàn tất khi 1266 00:59:00,620 --> 00:59:03,000 dữ liệu, tất nhiên, trên web. 1267 00:59:03,000 --> 00:59:08,780 >> Bây giờ, chúng ta hãy nhìn vào những gì thực sự xảy ra khi tôi nhấp vào Google Search. 1268 00:59:08,780 --> 00:59:10,420 Và sau đó chúng tôi sẽ tận dụng này bản thân mình. 1269 00:59:10,420 --> 00:59:15,320 Vì vậy, nếu tôi di chuyển xuống nay đến rất yêu cầu đầu tiên vừa mới diễn ra. 1270 00:59:15,320 --> 00:59:17,130 Chú ý những điều sau đây. 1271 00:59:17,130 --> 00:59:25,550 Nó đã được gửi đến một hành trình khá dài URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 và sau đó một bó toàn bộ các công cụ. 1273 00:59:27,100 --> 00:59:29,620 Hãy xem này thực sự bây giờ trong tab trình duyệt. 1274 00:59:29,620 --> 00:59:31,310 Hãy thoát khỏi thanh công cụ ở đây. 1275 00:59:31,310 --> 00:59:33,140 Dưới đây là các trang kết quả tìm kiếm. 1276 00:59:33,140 --> 00:59:34,790 Và thông báo đây là URL. 1277 00:59:34,790 --> 00:59:37,430 Bây giờ, bạn có thể đoán những gì đang xảy ra ở đây một phần. 1278 00:59:37,430 --> 00:59:39,090 Vì vậy, trước hết, một định nghĩa. 1279 00:59:39,090 --> 00:59:42,570 Điều này dường như là điểm đến nơi mà các mẫu được gửi. 1280 00:59:42,570 --> 00:59:44,910 Vì vậy, khi tôi gõ vào chữ "mèo" và nhấn Enter, 1281 00:59:44,910 --> 00:59:48,460 dường như Google đã gửi nhập văn bản của tôi để URL này 1282 00:59:48,460 --> 00:59:50,770 mà tôi đã nêu bật có, dấu gạch chéo tìm kiếm. 1283 00:59:50,770 --> 00:59:56,530 Hóa ra, trong một URL, bất cứ điều gì xảy ra sau khi một dấu hỏi là, 1284 00:59:56,530 --> 01:00:01,270 như chúng ta luôn nói, một cặp khóa-giá trị đã được nhập vào biểu mẫu hoặc bằng cách nào đó 1285 01:00:01,270 --> 01:00:04,500 truyền từ duyệt đến máy chủ. 1286 01:00:04,500 --> 01:00:07,180 >> Vì vậy, bất cứ lúc nào bạn gõ vào vào một biểu mẫu trên web 1287 01:00:07,180 --> 01:00:10,000 và nó được gửi như chúng tôi đã được thảo luận, thông qua một get, 1288 01:00:10,000 --> 01:00:12,400 một trong những ảo phong bì, nội dung 1289 01:00:12,400 --> 01:00:15,510 đó envelope-- có, giữ bị nhồi thể chất 1290 01:00:15,510 --> 01:00:19,010 vào phong bì trong lớp ngày hôm nay, nhưng công nghệ 1291 01:00:19,010 --> 01:00:21,110 nó thực sự đặt trong URL. 1292 01:00:21,110 --> 01:00:22,940 Vì vậy, trong thực tế, hãy để tôi sàng lọc thông qua này. 1293 01:00:22,940 --> 01:00:25,010 Nơi nào bạn thấy đầu vào người sử dụng? 1294 01:00:25,010 --> 01:00:27,490 Nơi nào bạn nhìn thấy một cái gì đó mà bản thân tôi đã gõ lên đây? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Vâng, vì vậy "con mèo". 1297 01:00:33,491 --> 01:00:33,990 Đúng? 1298 01:00:33,990 --> 01:00:36,380 Vì vậy, hãy để tôi chưng cất này vào một cái gì đó đơn giản. 1299 01:00:36,380 --> 01:00:39,917 Tôi sẽ xóa tất cả mọi thứ về URL này mà tôi không hiểu, 1300 01:00:39,917 --> 01:00:42,250 và tôi chỉ đi để lại nó như này-- / tìm kiếm? q = mèo. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 Chúng ta sẽ thấy trong đó q xuất phát từ trong một thời điểm, 1303 01:00:47,890 --> 01:00:51,220 nhưng mà cảm thấy như tối thiểu số lượng thông tin mà tôi cung cấp. 1304 01:00:51,220 --> 01:00:53,050 Và bây giờ tôi sẽ nhấn Enter. 1305 01:00:53,050 --> 01:00:55,520 Và nhận thấy nó vẫn hoạt động. 1306 01:00:55,520 --> 01:00:57,950 Chúng tôi vẫn lấy lại một bó toàn bộ của con mèo. 1307 01:00:57,950 --> 01:01:00,340 Vì vậy, Google là fancier hơn này những ngày này. 1308 01:01:00,340 --> 01:01:01,934 Đó là năm 2016, không phải năm 1999. 1309 01:01:01,934 --> 01:01:04,600 Vì vậy, có những thứ khác mà tôi trình duyệt được gửi đến máy chủ. 1310 01:01:04,600 --> 01:01:07,100 Nhưng điều này là tối thiểu tất cả những gì cần thiết. 1311 01:01:07,100 --> 01:01:08,380 >> Vì vậy những gì đang xảy ra? 1312 01:01:08,380 --> 01:01:14,320 Vâng, trước tiên hãy để tôi đi trước và đi trở lại Cloud9 và cho tôi đi trước 1313 01:01:14,320 --> 01:01:15,620 và đóng các tab của tôi trước đó. 1314 01:01:15,620 --> 01:01:18,230 Và tôi sẽ làm điều này trên của tôi sở hữu chỉ trong một khoảnh khắc. 1315 01:01:18,230 --> 01:01:20,730 Tôi sẽ đi trước và tạo tập tin mới. 1316 01:01:20,730 --> 01:01:23,739 Và tôi sẽ lưu nó như google.html. 1317 01:01:23,739 --> 01:01:26,280 Và tôi sẽ rất quickly-- Tôi sẽ ăn cắp, trên thực tế, 1318 01:01:26,280 --> 01:01:28,510 một số văn bản này chỉ để tiết kiệm thời gian. 1319 01:01:28,510 --> 01:01:30,610 Tôi sẽ dán này tại đây. 1320 01:01:30,610 --> 01:01:33,850 Tôi sẽ không phải bận tâm với bất kỳ cách điệu thời gian này. 1321 01:01:33,850 --> 01:01:38,340 Chúng ta sẽ gọi đây là "My Google." 1322 01:01:38,340 --> 01:01:41,230 Và tôi sẽ thoát khỏi của tất cả mọi thứ trong cơ thể. 1323 01:01:41,230 --> 01:01:42,740 Và tôi sẽ làm như sau. 1324 01:01:42,740 --> 01:01:45,690 Hãy để tôi phóng to. 1325 01:01:45,690 --> 01:01:50,620 Mẫu action-- và như tôi đã đề cập ngắn gọn earlier-- whoops-- như tôi một thời gian ngắn 1326 01:01:50,620 --> 01:01:54,130 đề cập trước đó, các hành động của một hình thức là nơi bạn gửi dữ liệu đến. 1327 01:01:54,130 --> 01:01:56,620 Vì vậy google.com/search. 1328 01:01:56,620 --> 01:01:59,390 Và phương pháp tôi muốn sử dụng có thể là một trong hai điều. 1329 01:01:59,390 --> 01:02:02,870 Nó có thể là bạn "được", như chúng ta giữ thảo luận, hoặc nó có thể là "bài". 1330 01:02:02,870 --> 01:02:05,340 Để bây giờ, cơ bản Sự khác biệt là, nếu bạn sử dụng "có được" 1331 01:02:05,340 --> 01:02:09,590 tất cả các thông tin mà người sử dụng cung cấp được gửi trong URL. 1332 01:02:09,590 --> 01:02:13,530 >> Điều đó là rất tốt cho những thứ như tìm kiếm động cơ và một vài ứng dụng khác, 1333 01:02:13,530 --> 01:02:17,080 nhưng trong những trường hợp nào sẽ bạn không muốn để điền vào một mẫu 1334 01:02:17,080 --> 01:02:21,620 và có các thông tin kết thúc các URL, giống như trong thanh địa chỉ của trình duyệt của bạn? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Những loại hình thức làm bạn-- 1337 01:02:26,605 --> 01:02:27,480 Đung [IM LẶNG] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. Malan: Yeah, giống như những gì? 1339 01:02:28,450 --> 01:02:29,270 Đung Passwords. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. Malan: Vâng, bạn đăng nhập nhập vào Facebook hoặc một số trang web. 1341 01:02:31,936 --> 01:02:34,395 Đó là người dùng nhập vào từ một hình thức, một hộp văn bản, 1342 01:02:34,395 --> 01:02:37,020 nhưng có thể bạn không muốn nó hiển thị trong URL của trình duyệt. 1343 01:02:37,020 --> 01:02:38,121 Tại sao? 1344 01:02:38,121 --> 01:02:40,870 Ý tôi là, có thể có một số tác động an ninh trên mạng, 1345 01:02:40,870 --> 01:02:44,830 nhưng more-- thích, đơn giản hơn, nếu những gì Bạn cùng phòng của bạn, quan trọng khác của bạn, 1346 01:02:44,830 --> 01:02:47,710 trẻ em của bạn, người phối ngẫu của bạn trông thông qua lịch sử trình duyệt của bạn? 1347 01:02:47,710 --> 01:02:50,762 Có ngay mật khẩu của bạn có trong lịch sử của trình duyệt của bạn. 1348 01:02:50,762 --> 01:02:52,220 Điều đó không cảm thấy giống như thiết kế tốt. 1349 01:02:52,220 --> 01:02:54,500 Hoặc thậm chí nhiều hơn về mặt kỹ thuật, giả sử bạn đang cố gắng 1350 01:02:54,500 --> 01:02:59,180 để tải ảnh lên Flickr hoặc Facebook hoặc wherever-- 1351 01:02:59,180 --> 01:03:03,010 đó là người sử dụng đầu vào, mặc dù nó là nhiều hơn một chút interesting-- cách 1352 01:03:03,010 --> 01:03:05,530 Tôi nhồi nhét một hình ảnh vào thanh URL? 1353 01:03:05,530 --> 01:03:06,730 Bạn loại loại không thể. 1354 01:03:06,730 --> 01:03:07,396 Bạn có thể loại. 1355 01:03:07,396 --> 01:03:10,210 Nhưng, thực sự, tôi cứng ép để tưởng tượng làm điều đó. 1356 01:03:10,210 --> 01:03:13,470 Vì vậy, tôi cần một phương pháp khác để đưa các hình ảnh vào một trang web, 1357 01:03:13,470 --> 01:03:15,657 và rằng phương pháp khác được gọi là "bài". 1358 01:03:15,657 --> 01:03:18,740 Nhưng hiện nay, chúng tôi sẽ chỉ nói về "Nhận được", mà là đơn giản của hai. 1359 01:03:18,740 --> 01:03:21,100 Nó chỉ là đặt tất cả các sử dụng đầu vào URL. 1360 01:03:21,100 --> 01:03:22,830 >> Vì vậy, đây là hình thức tôi là tạo. 1361 01:03:22,830 --> 01:03:24,070 Tôi muốn một đầu vào. 1362 01:03:24,070 --> 01:03:24,820 Và bạn biết những gì? 1363 01:03:24,820 --> 01:03:26,111 Tôi sẽ lấy một đoán ở đây. 1364 01:03:26,111 --> 01:03:31,600 Tôi sẽ gọi lại tôi đầu vào "q" cho "truy vấn". 1365 01:03:31,600 --> 01:03:34,970 Và tôi nghĩ rằng đây là một trong những thiết kế ban đầu, có lẽ, từ năm 1999. 1366 01:03:34,970 --> 01:03:39,560 Và sau đó các loại đầu vào này chỉ sẽ là "văn bản". 1367 01:03:39,560 --> 01:03:43,040 Và sau đó tôi sẽ có đầu vào khác mà không cần một tên, như chúng ta sẽ sớm 1368 01:03:43,040 --> 01:03:45,120 thấy, các loại trong số đó là "submit". 1369 01:03:45,120 --> 01:03:47,070 Và điều này sẽ cho tôi một nút đặc biệt. 1370 01:03:47,070 --> 01:03:48,320 Và đó là nó. 1371 01:03:48,320 --> 01:03:50,790 >> Vì vậy, hãy để tôi đi trước và lưu tập tin này. 1372 01:03:50,790 --> 01:03:54,910 Tôi sẽ quay trở lại của tôi trình duyệt và đi đến google.html. 1373 01:03:54,910 --> 01:03:56,140 Đi vào. 1374 01:03:56,140 --> 01:03:59,680 Và nó loại thưa thớt để nói rằng ít nhất. 1375 01:03:59,680 --> 01:04:03,110 Nhưng hãy để tôi đi trước và tìm kiếm cho "mèo". 1376 01:04:03,110 --> 01:04:06,510 Và nhận thấy tôi hiện đang tại URL Cloud9 này. 1377 01:04:06,510 --> 01:04:09,240 Nhưng thời điểm này tôi bấm này, nơi nào bạn hy vọng tôi sẽ kết thúc? 1378 01:04:09,240 --> 01:04:10,160 >> Đung Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. Malan: Google. 1380 01:04:11,118 --> 01:04:12,740 Vì vậy, hãy nhấn Submit. 1381 01:04:12,740 --> 01:04:15,200 Và thực sự tôi đã tái triển khai Google. 1382 01:04:15,200 --> 01:04:15,700 Đúng? 1383 01:04:15,700 --> 01:04:16,480 Đó là đơn giản. 1384 01:04:16,480 --> 01:04:17,120 Nó nhẹ hơn. 1385 01:04:17,120 --> 01:04:20,350 Ý tôi là, mã của tôi rõ ràng là tốt hơn họ, từ sự lộn xộn, chúng tôi đã thấy trước đó. 1386 01:04:20,350 --> 01:04:21,100 Và bạn biết những gì? 1387 01:04:21,100 --> 01:04:22,610 Tôi sẽ thêm gia vị này lên một chút. 1388 01:04:22,610 --> 01:04:23,860 Tôi không đề cập đến trước đây. 1389 01:04:23,860 --> 01:04:27,860 Có thẻ như H1, cho Heading 1, tiêu đề quan trọng nhất trong một trang. 1390 01:04:27,860 --> 01:04:30,570 "My Google," Tôi sẽ gọi này. 1391 01:04:30,570 --> 01:04:31,940 Hãy để tôi tải lại. 1392 01:04:31,940 --> 01:04:33,772 Nó tìm kiếm một chút tốt hơn rồi. 1393 01:04:33,772 --> 01:04:34,980 Và, trên thực tế, bạn biết những gì? 1394 01:04:34,980 --> 01:04:36,430 Tôi đã already-- tôi nói dối. 1395 01:04:36,430 --> 01:04:40,200 Tôi nói tôi sẽ không để kiểu này, nhưng tôi sẽ để kiểu này như trước đây. 1396 01:04:40,200 --> 01:04:46,860 Và cơ thể tôi có được, hãy nói, trung tâm text-align. 1397 01:04:46,860 --> 01:04:48,800 Nó nhìn giống như Google đã. 1398 01:04:48,800 --> 01:04:51,090 >> Tôi cần một ngắt dòng, mặc dù, cho rằng nút Gửi. 1399 01:04:51,090 --> 01:04:52,798 Và hóa ra, bạn có thể sử dụng đoạn văn, 1400 01:04:52,798 --> 01:04:57,320 hoặc bạn có thể theo nghĩa đen chỉ nói, cho tôi một ngắt dòng đây-- tag br. 1401 01:04:57,320 --> 01:04:59,319 Và nếu tôi tải lại này, bây giờ nó đi đó. 1402 01:04:59,319 --> 01:05:01,610 Đó là một chút xấu xí, vì vậy tôi có thể làm nhiều ngắt dòng, 1403 01:05:01,610 --> 01:05:03,310 nhưng chúng ta không nên quá tham lam ở đây. 1404 01:05:03,310 --> 01:05:06,430 Vì vậy bây giờ chúng ta hãy xem nếu nó hoạt động cho "con chó". 1405 01:05:06,430 --> 01:05:08,640 Nó dường như làm việc cho "con chó", là tốt. 1406 01:05:08,640 --> 01:05:10,780 Vì vậy, các takeaway hấp dẫn là những gì ở đây? 1407 01:05:10,780 --> 01:05:13,600 Cùng-- không phải là một bước tiến rất lớn để giới thiệu thêm một vài thẻ, 1408 01:05:13,600 --> 01:05:15,370 như thẻ form trong thẻ đầu vào. 1409 01:05:15,370 --> 01:05:17,120 Nhưng về cơ bản nhiều hơn là, tất cả chúng ta đang làm 1410 01:05:17,120 --> 01:05:20,610 đang tận dụng sự hiểu biết của chúng tôi HTTP và thực tế 1411 01:05:20,610 --> 01:05:24,900 rằng các hình thức cuối cùng là thay đổi những gì trong các URL của trình duyệt, 1412 01:05:24,900 --> 01:05:28,540 và như vậy, do đó, chúng ta có thể máy móc cung cấp đầu vào cho một máy chủ 1413 01:05:28,540 --> 01:05:33,600 bằng cách làm cho một hình thức HTML và biết mà máy chủ hiểu HTTP, 1414 01:05:33,600 --> 01:05:36,890 giống như cơ thể của chúng tôi hiểu, như thế, lắc tay tôi, mà cùng một giao thức, 1415 01:05:36,890 --> 01:05:40,920 và vì vậy chúng tôi lấy lại phản ứng mà cuối cùng chúng ta mong đợi. 1416 01:05:40,920 --> 01:05:44,050 >> Vì vậy, hãy cố gắng làm một Điều cuối cùng bây giờ với điện thoại di động, 1417 01:05:44,050 --> 01:05:47,052 và tôi sẽ make-- Tôi sẽ thêm mã này vào các slide. 1418 01:05:47,052 --> 01:05:49,760 Vì vậy, nếu bạn muốn sửa lại, bạn chắc chắn có thể mang nó từ đó. 1419 01:05:49,760 --> 01:05:51,551 Nhưng tôi sẽ đi trước và làm một điều. 1420 01:05:51,551 --> 01:05:54,120 Tôi sẽ đi trước và mở page-- trỏ của tôi 1421 01:05:54,120 --> 01:05:59,030 Trang chào tôi như trước, mà có rất nhiều văn bản faux-Latinh này, 1422 01:05:59,030 --> 01:06:05,470 hoặc vô nghĩa chữ Latin, và has-- nó trông như thế này ở kích thước phông chữ này. 1423 01:06:05,470 --> 01:06:07,850 Nhưng hãy để tôi đi trước và làm điều này. 1424 01:06:07,850 --> 01:06:09,300 Tôi sẽ đi vào Cloud9. 1425 01:06:09,300 --> 01:06:10,380 Và bạn không cần phải thực hiện bước này. 1426 01:06:10,380 --> 01:06:11,420 Tôi sẽ chỉ làm điều đó bản thân mình. 1427 01:06:11,420 --> 01:06:12,890 Tôi sẽ bấm Share. 1428 01:06:12,890 --> 01:06:15,170 Và đây là một tính năng chỉ của Cloud9, theo đó 1429 01:06:15,170 --> 01:06:17,710 Tôi có thể làm cho môi trường tôi công khai. 1430 01:06:17,710 --> 01:06:20,240 >> Và chỉ vì lợi ích của trình diễn, hãy để tôi làm điều này. 1431 01:06:20,240 --> 01:06:22,870 Tôi sẽ làm cho công ứng dụng của tôi. 1432 01:06:22,870 --> 01:06:25,230 Chú ý nó cảnh báo tôi, tôi Tôi chắc rằng tôi muốn làm điều này, 1433 01:06:25,230 --> 01:06:28,438 bởi vì điều này sẽ làm cho tất cả mọi người trên thế giới, cho dù họ đang ở đây bây giờ 1434 01:06:28,438 --> 01:06:33,560 hoặc xem video sau này trên Internet có thể nhìn thấy những gì tôi thấy. 1435 01:06:33,560 --> 01:06:34,440 Nhưng đó là OK. 1436 01:06:34,440 --> 01:06:37,870 Tôi sẽ nói "Done". 1437 01:06:37,870 --> 01:06:42,080 Và hãy để tôi khuyến khích bạn, nếu tôi đã làm này correctly-- cho tôi kiểm tra nó trước. 1438 01:06:42,080 --> 01:06:45,590 Đi trước, nếu bạn không mind-- trong một trình duyệt trên máy tính của bạn, 1439 01:06:45,590 --> 01:06:49,900 đi đến URL này, và hy vọng bạn sẽ thấy dòng chữ Latin của tôi. 1440 01:06:49,900 --> 01:06:52,820 Và rõ ràng, đó là chạy không phải trên máy tính xách tay của tôi. 1441 01:06:52,820 --> 01:06:53,610 Đó là trong những đám mây. 1442 01:06:53,610 --> 01:06:58,120 Đó là trên Cloud9, theo nghĩa đen, nhưng Tôi đã thực hiện công không gian làm việc của tôi 1443 01:06:58,120 --> 01:07:03,450 để bất cứ ai trên internet có thể truy cập trang chủ Latin của tôi. 1444 01:07:03,450 --> 01:07:07,209 >> Tới cùng một URL trên điện thoại của bạn, nếu bạn có thể. 1445 01:07:07,209 --> 01:07:09,750 Nếu nó sẽ chi phí bạn, mặc dù, bạn chỉ có thể nhìn qua vai. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 Đung [IM LẶNG] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. Malan: Tôi xin lỗi? 1449 01:07:43,550 --> 01:07:45,390 Đung [IM LẶNG] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. Malan: Chỉ từ tiếng Latin. 1451 01:07:47,710 --> 01:07:48,210 Đó là tất cả. 1452 01:07:48,210 --> 01:07:49,250 Nhưng đó là những gì bạn sẽ thấy. 1453 01:07:49,250 --> 01:07:49,875 >> Đung Yeah. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. Malan: Yeah. 1455 01:07:50,790 --> 01:07:51,300 Yeah. 1456 01:07:51,300 --> 01:07:51,540 ĐƯỢC. 1457 01:07:51,540 --> 01:07:53,530 Vì vậy, tôi có thể giữ lên của bạn điện thoại chỉ trong một thời điểm? 1458 01:07:53,530 --> 01:07:57,504 Vì vậy, hy vọng, nếu bạn đang truy cập nó, nó trông gần như không đọc được. 1459 01:07:57,504 --> 01:07:59,920 Đó là still-- tôi là, nó là không đọc được vì tiếng Latinh. 1460 01:07:59,920 --> 01:08:01,920 Nhưng nó cũng có thể đọc được lý do gì khác? 1461 01:08:01,920 --> 01:08:03,775 Giống như, những gì bạn displeases về điều này? 1462 01:08:03,775 --> 01:08:04,650 Đung Nó nhỏ. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. Malan: Đó là siêu, siêu nhỏ. 1464 01:08:06,420 --> 01:08:07,920 Vậy làm thế nào chúng ta có thể khắc phục điều này? 1465 01:08:07,920 --> 01:08:09,730 Đó là siêu, siêu nhỏ trên điện thoại của Victoria 1466 01:08:09,730 --> 01:08:11,400 và, nếu bạn đã kéo nó lên bản thân, có lẽ 1467 01:08:11,400 --> 01:08:14,660 nhỏ trên điện thoại của bạn là tốt, trừ khi bạn có các cài đặt khả năng tiếp cận được kích hoạt. 1468 01:08:14,660 --> 01:08:15,530 đó là những gì? 1469 01:08:15,530 --> 01:08:18,497 Bạn chỉ có thể véo và zoom, mà là hoàn toàn khả thi, 1470 01:08:18,497 --> 01:08:20,330 nhưng sau đó bạn chỉ nhìn thấy một vài từ cùng một lúc. 1471 01:08:20,330 --> 01:08:20,859 Vì vậy, chờ một phút. 1472 01:08:20,859 --> 01:08:21,720 Tôi biết làm thế nào để sửa lỗi này. 1473 01:08:21,720 --> 01:08:22,219 Đúng? 1474 01:08:22,219 --> 01:08:26,130 Tôi có thể sử dụng CSS, và tôi có thể thay đổi cỡ chữ từ 12 điểm đến 24 điểm. 1475 01:08:26,130 --> 01:08:29,020 Nhưng các tác dụng phụ của điều đó, Tất nhiên, sẽ là bây giờ, 1476 01:08:29,020 --> 01:08:32,630 trên một máy tính để bàn hoặc máy tính xách tay, tại các văn bản là lớn gấp đôi. 1477 01:08:32,630 --> 01:08:35,810 Và do đó, nó sẽ loại được tốt đẹp để phân biệt giữa các thiết bị, 1478 01:08:35,810 --> 01:08:37,840 và nó quay ra có nhiều cách để làm điều đó. 1479 01:08:37,840 --> 01:08:39,590 Có một số cách khác nhau, trên thực tế, 1480 01:08:39,590 --> 01:08:44,189 theo đó sử dụng CSS và các tính năng fancier rằng chúng tôi sẽ không đi vào chi tiết, 1481 01:08:44,189 --> 01:08:46,960 bạn về cơ bản có thể truy vấn trình duyệt và nói, 1482 01:08:46,960 --> 01:08:51,550 nếu màn hình của bạn nhỏ hơn này nhiều pixel, sử dụng kích thước phông chữ này. 1483 01:08:51,550 --> 01:08:55,180 Nếu màn hình của bạn lớn hơn này nhiều pixel, sử dụng kích thước này font khác. 1484 01:08:55,180 --> 01:08:57,080 >> Bạn thậm chí có thể fancier vẫn. 1485 01:08:57,080 --> 01:09:00,140 Nếu bạn đã từng đến thăm một trang web, trên một máy tính để bàn, 1486 01:09:00,140 --> 01:09:04,404 có một menu lớn có thể ra vào bên, và sau đó tất cả các nội dung 1487 01:09:04,404 --> 01:09:07,029 là bên cạnh đó menu-- đó là loại một mô hình phổ biến. 1488 01:09:07,029 --> 01:09:09,670 Menu trên bên trái, nội dung bên phải, hoặc ngược lại. 1489 01:09:09,670 --> 01:09:13,569 Không thực sự làm việc trên điện thoại di động khi bạn màn hình chỉ là này nhiều điểm ảnh rộng. 1490 01:09:13,569 --> 01:09:16,233 Vì vậy, thông thường trên điện thoại di động là, thực đơn của bạn sẽ bất ngờ nhận được 1491 01:09:16,233 --> 01:09:18,399 sụp đổ, và bạn phải bấm vào một nút để xem nó, 1492 01:09:18,399 --> 01:09:22,404 hoặc các trang web sẽ đưa thực đơn ở trên nó và đưa nội dung bên dưới nó. 1493 01:09:22,404 --> 01:09:24,779 Và bạn có thể thực hiện các thứ theo nhiều cách, quá. 1494 01:09:24,779 --> 01:09:28,340 Bạn có thể yêu cầu các lập trình viên của bạn, hey, đội bóng, bất cứ lúc nào 1495 01:09:28,340 --> 01:09:34,450 bạn nhìn thấy một yêu cầu HTTP từ một Android thiết bị, một thiết bị Microsoft, Google 1496 01:09:34,450 --> 01:09:39,930 thiết bị, một thiết bị của Apple, sử dụng này cỡ chữ và sử dụng cách bố trí menu này, 1497 01:09:39,930 --> 01:09:42,670 hoặc nếu không sử dụng bố trí mặc định này lớn hơn. 1498 01:09:42,670 --> 01:09:45,410 >> Bây giờ, sử dụng những gì Kỹ thuật cơ bản ngày nay 1499 01:09:45,410 --> 01:09:48,529 các kỹ sư có thể sử dụng để biết liệu nó 1500 01:09:48,529 --> 01:09:53,660 iPhone, điện thoại Android, một máy tính xách tay, một máy tính để bàn đến thăm máy chủ của công ty? 1501 01:09:53,660 --> 01:09:55,310 Trong đó làm họ nhận được thông tin đó? 1502 01:09:55,310 --> 01:09:56,080 >> Đung tiêu đề? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. Malan: Vâng, các tiêu đề HTTP. 1504 01:09:57,740 --> 01:10:01,714 Vì vậy, mọi yêu cầu HTTP đến từ khách hàng của họ đến các máy chủ của họ 1505 01:10:01,714 --> 01:10:03,880 bao gồm, bên trong đó ảo phong bì, một bó toàn bộ 1506 01:10:03,880 --> 01:10:08,260 các tiêu đề HTTP, một trong số đó là trình duyệt và hệ điều hành 1507 01:10:08,260 --> 01:10:10,290 thậm chí, nếu bạn quan tâm đến mà mức độ chi tiết. 1508 01:10:10,290 --> 01:10:13,790 Bây giờ, đó là một chuỗi khó hiểu, tìm kiếm, nhưng có tồn tại phần mềm mà sẽ chỉ 1509 01:10:13,790 --> 01:10:18,530 đơn giản hóa đó, và bạn chỉ có thể yêu cầu trong lập trình code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- gì điện thoại là này-- thiết bị gì là người sử dụng này sử dụng? 1511 01:10:23,650 --> 01:10:27,501 Và sau đó bạn có thể nói, chỉ cho họ này phiên bản của trang web nếu nó là một điện thoại. 1512 01:10:27,501 --> 01:10:30,250 Hiện chúng phiên bản này của trang web nếu nó là một máy tính xách tay hoặc máy tính để bàn. 1513 01:10:30,250 --> 01:10:32,316 Nhưng bạn thậm chí không cần phía máy chủ phức tạp. 1514 01:10:32,316 --> 01:10:33,940 Bạn có thể làm thậm chí đơn giản của sự vật. 1515 01:10:33,940 --> 01:10:34,815 >> Tôi sẽ làm điều này. 1516 01:10:34,815 --> 01:10:38,995 Tôi sẽ đi trước vào môi trường Cloud9 của tôi, 1517 01:10:38,995 --> 01:10:41,370 và tôi sẽ để thêm một thẻ mà bạn đã thấy trong Google trước đây. 1518 01:10:41,370 --> 01:10:42,770 Nó được gọi là thẻ meta. 1519 01:10:42,770 --> 01:10:45,520 Và tôi không bao giờ nhớ này, vì vậy Tôi sẽ ghi lại nó ở đây. 1520 01:10:45,520 --> 01:10:50,552 meta name = "viewport" và sau đó content = "width = chiều rộng thiết bị, intital 1521 01:10:50,552 --> 01:11:02,060 quy mô = 1 "và đó là nó. 1522 01:11:02,060 --> 01:11:06,230 >> Vì vậy, nó cũng có thể là giống như một câu thần chú ma thuật. 1523 01:11:06,230 --> 01:11:11,300 Đó không phải là tất cả những gì rõ ràng, nhưng điều này có một cái gì đó để làm với các khung nhìn, 1524 01:11:11,300 --> 01:11:15,070 và các khung nhìn chỉ là cơ thể của một trang web, các khu vực hình chữ nhật 1525 01:11:15,070 --> 01:11:16,690 định nghĩa nhất của trang. 1526 01:11:16,690 --> 01:11:19,060 Và đây chỉ là nói cho trình duyệt, bạn biết những gì? 1527 01:11:19,060 --> 01:11:22,589 Hãy chiều rộng của trang này có hiệu quả tương đương với chiều rộng thiết bị. 1528 01:11:22,589 --> 01:11:25,380 Nói cách khác, đừng cho rằng bạn có loại không gian không giới hạn. 1529 01:11:25,380 --> 01:11:29,920 Giả sử bạn chỉ có càng nhiều không gian như các thiết bị chính nó là lớn. 1530 01:11:29,920 --> 01:11:34,454 Và vì vậy bây giờ, nếu tôi lại này trong trình duyệt của mình, tôi thấy không có sự thay đổi. 1531 01:11:34,454 --> 01:11:37,370 Nhưng nếu tôi đã làm correctly-- này và hãy để tôi vượt qua fingers-- tôi nếu tất cả các bạn 1532 01:11:37,370 --> 01:11:42,920 nạp lại điện thoại của bạn, làm bạn nhìn thấy một sự thay đổi hấp dẫn? 1533 01:11:42,920 --> 01:11:43,620 Vâng, là mà-- 1534 01:11:43,620 --> 01:11:45,067 >> Đung [IM LẶNG] 1535 01:11:45,067 --> 01:11:45,900 DAVID J. Malan: Có. 1536 01:11:45,900 --> 01:11:46,400 ĐƯỢC. 1537 01:11:46,400 --> 01:11:47,850 Vì vậy, cho là dễ đọc hơn bây giờ? 1538 01:11:47,850 --> 01:11:53,070 Vẫn còn nhỏ, để cho công bằng, nhưng không quá nhỏ bé để có thể quản lý. 1539 01:11:53,070 --> 01:11:56,920 Và tôi chắc chắn có thể ghi đè này hơn nữa với CSS hay ở phía máy chủ, 1540 01:11:56,920 --> 01:12:00,120 nhưng ngày càng những gì bạn nhìn thấy được nhiều hơn và nhiều tính năng hơn 1541 01:12:00,120 --> 01:12:02,900 được thêm vào phía khách hàng environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, như chúng ta sẽ thảo luận ngày mai, CSS, và HTML-- vậy 1543 01:12:06,530 --> 01:12:09,190 rằng tất cả các truy vấn có thể được thực hiện trên máy khách 1544 01:12:09,190 --> 01:12:11,910 để làm phiền máy chủ ít hơn rất nhiều và không 1545 01:12:11,910 --> 01:12:14,530 phải theo kịp với, cho Ví dụ, sự tấn công liên tục 1546 01:12:14,530 --> 01:12:17,210 của hệ điều hành mới phiên bản, phiên bản trình duyệt mới. 1547 01:12:17,210 --> 01:12:20,190 Bạn chỉ có thể cho các trình duyệt yêu cầu các thiết bị, lớn như thế nào là bạn, 1548 01:12:20,190 --> 01:12:22,890 và sau đó làm cho hơi hợp lý các quyết định dựa trên đó. 1549 01:12:22,890 --> 01:12:25,140 Nhưng chúng ta sẽ thấy nhiều cơ hội hơn các quyết định hợp lý 1550 01:12:25,140 --> 01:12:27,223 ngày mai trong bối cảnh của một ngôn ngữ lập trình. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> Vì vậy, bất kỳ câu hỏi, sau đó, về phát triển web? 1553 01:12:32,760 --> 01:12:36,130 Hôm nay không phải là lập trình web, mỗi se, tất cả mọi thứ vì hầu hết chúng ta đã làm 1554 01:12:36,130 --> 01:12:38,370 rất thẩm mỹ, nếu bạn muốn. 1555 01:12:38,370 --> 01:12:41,750 Không có quyết định trong mã mà chúng tôi đã viết, 1556 01:12:41,750 --> 01:12:44,990 và vì vậy đó là lý do tại sao HTML là một đánh dấu ngôn ngữ, không phải là một ngôn ngữ lập trình. 1557 01:12:44,990 --> 01:12:47,140 Nhưng ngày mai chúng ta sẽ mất một cái nhìn nhanh chóng, cuối cùng, 1558 01:12:47,140 --> 01:12:49,340 tại JavaScript, đó là một chương trình thực tế 1559 01:12:49,340 --> 01:12:54,220 ngôn ngữ cho phép chúng ta làm nhiều hơn một chút. 1560 01:12:54,220 --> 01:12:56,800 >> Bất kỳ câu hỏi? 1561 01:12:56,800 --> 01:13:00,480 Vâng, hãy để tôi đề xuất hai cơ hội tùy chọn cho bài tập về nhà. 1562 01:13:00,480 --> 01:13:02,900 Một hợp-- những Cloud9 tài khoản sẽ không hết hạn. 1563 01:13:02,900 --> 01:13:04,669 Bạn đang chào đón để sử dụng họ để tinker với. 1564 01:13:04,669 --> 01:13:05,960 Đó là mức phí của dịch vụ. 1565 01:13:05,960 --> 01:13:08,754 Nhận ra rằng, nếu khi tạo không gian làm việc của bạn, bạn đã thực hiện công khai, 1566 01:13:08,754 --> 01:13:11,670 điều đó không có nghĩa là bất cứ ai trên Internet có thể nhìn thấy những gì bạn đang gõ. 1567 01:13:11,670 --> 01:13:15,104 Vì vậy, có thể chỉ cần xem xét không lúng túng chính mình 1568 01:13:15,104 --> 01:13:18,020 nếu bạn đang đặt web đầu tiên của bạn trang ra có công khai vô tình, 1569 01:13:18,020 --> 01:13:20,134 nhưng không có ai sẽ biết để tìm ở đó anyway. 1570 01:13:20,134 --> 01:13:23,760 >> Và two-- cho tôi quăng lên URL này là tốt, 1571 01:13:23,760 --> 01:13:28,250 đặc biệt là nếu bạn đến vào ngày hôm nay một chút ít thoải mái hơn so với những người khác, 1572 01:13:28,250 --> 01:13:30,430 không chắc chắn những gì tất cả các công cụ này có nghĩa. 1573 01:13:30,430 --> 01:13:36,780 Nhận ra rằng nhiều hơn nữa của video này, đó là cả một cách tốt để ngủ 1574 01:13:36,780 --> 01:13:39,380 và cũng để cười trong khi làm như vậy, cũng có 1575 01:13:39,380 --> 01:13:44,300 rất nhiều societally thú vị và thảo luận an toàn liên quan 1576 01:13:44,300 --> 01:13:47,370 trong đó từ John Oliver, mặc dù là một diễn viên hài. 1577 01:13:47,370 --> 01:13:55,456 >> Nhưng nếu không có những câu hỏi khác, đó đưa chúng ta đến dự tiệc. 1578 01:13:55,456 --> 01:13:56,830 Vì vậy, tại sao tôi không bật nhạc. 1579 01:13:56,830 --> 01:13:58,610 Có nên uống và đồ ăn nhẹ bên ngoài. 1580 01:13:58,610 --> 01:14:00,220 Tôi đang hạnh phúc để hòa nhập cho như miễn là mọi người sẽ thích, 1581 01:14:00,220 --> 01:14:01,600 trả lời các câu hỏi nhiều hơn một ngày-một. 1582 01:14:01,600 --> 01:14:03,330 Nhưng, nếu không, bạn đang chào đón cất cánh tại bất kỳ điểm nào, 1583 01:14:03,330 --> 01:14:05,740 và chúng ta sẽ gặp lại buổi sáng ngày mai để biết thêm một chút. 1584 01:14:05,740 --> 01:14:07,290 Được rồi, cảm ơn. 1585 01:14:07,290 --> 01:14:10,428