DAVID J. Malan: Tất cả các quyền.
Chúng tôi đã trở lại.
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
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
và thực sự làm một cái gì đó một chút trên tay.
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
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ố
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
phát triển, do đó phía tĩnh của things--
không có logic, không có lập trình ngôn ngữ, chỉ cần nội dung tĩnh.
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ì,
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.
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
an ninh hoặc bất cứ điều gì ở giữa?
>> Không?
Được rồi, tốt, chúng ta hãy làm điều này, chỉ trong trường hợp
quá trình đăng ký cái gì mất một vài phút.
Chúng tôi sẽ cho nó làm điều đó trong nền.
Đi trước, nếu bạn có thể, để đây-- URL này c9.io.
Đây là một bên thứ ba service-- nền tảng như một dịch vụ, nếu bạn will--
có nghĩa là sẽ mời các bạn để đăng ký một tài khoản,
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
trên cơ sở hạ tầng của người khác, một công ty gọi là Cloud9.
Nhưng những gì là tốt đẹp về này là họ cung cấp cho bạn
một xấp xỉ của một phát triển thực tế thực tế
môi trường, mặc dù trong đám mây và trong một trình duyệt web,
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.
Và sau đó đi trước và chỉ cần điều hướng cách của bạn để quá trình đăng ký
nếu bạn có thể.
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,
cả trong khuôn viên trường và tắt bây giờ, và nó thay thế những gì lịch sử
là phần mềm khác có thể tải về.
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,
về cơ bản, mà tôi đã mô tả trước đó.
Vì vậy, công ty này có thể Cloud9 Giá thuê từ một party-- thứ ba thực sự
trong trường hợp này, Google-- toàn loạt các máy ảo
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
rằng mỗi chúng ta có toàn quyền kiểm soát.
Nó không hoàn toàn chính xác để nói rằng họ đang máy ảo,
tuy nhiên, vì những gì Cloud9 thực sự sử dụng
là một công nghệ khá mới hơn gọi Containerization.
Và hãy để tôi lấy ảnh này ở đây để vẽ bức tranh này.
>> Một container là, nếu bạn nhớ lại hình ảnh
từ trước đó, một chút nhẹ trọng lượng hơn so với một máy ảo.
Trong thực tế, trong khi cuối cùng Hiện chúng tôi đã nói chuyện về việc có
là một điều hành hệ thống và một hypervisor
và sau đó hệ thống điều hành khách, khách hệ điều hành, điều hành khách
hệ thống, trên đầu trang của bạn phần cứng vật lý,
sự khác biệt với phiên bản mới hơn này công nghệ, Containerization,
là tất cả họ bằng cách nào đó chia sẻ cùng hệ điều hành.
Nhưng họ vẫn tạo những ảo ảnh của tất cả mọi người
có độc quyền của riêng mình quyền hành chính và các tập tin
trên máy chủ.
Nhưng có ít phần mềm giữa bạn và phần cứng.
Kết quả của việc đó là, Về lý thuyết, một hiệu suất cao hơn,
bởi vì bạn đang sử dụng hoặc lãng phí nguồn tài nguyên ít hơn
về cái gọi là lớp ảo hóa.
Vì vậy, đây được gọi là Containerization bởi thiên nhiên
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.
Và đây là cái gì đó kỹ sư tại công ty của bạn
có thể loại loại bắt đầu nói chuyện về sớm nếu họ chưa có,
mặc dù có chắc chắn không lý do để nhảy vào bất kỳ bandwagons.
>> Vì vậy, với những gì đã nói, những gì bạn có thể nhìn thấy bây giờ
là một màn hình giống một chút như thế này.
ĐƯỢC.
Và chỉ cần gọi cho tôi hơn nếu không.
Và nếu vậy-- tôi sẽ đi qua nếu không.
Hãy kích là lớn cộng để tạo ra một không gian làm việc,
và bạn sẽ thấy một màn hình như thế này.
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ờ.
Và chỉ thực sự đơn giản, đi và- tốt, một số bạn
đã có không gian làm việc.
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.
Bạn không cần một mô tả.
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.
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.
Ở đây cũng vậy, là một trong những Upsells.
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,
bạn phải trả thêm.
Nếu không, họ buộc bạn để làm cho công việc của bạn.
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ở
để khuyến khích mọi người thực sự cộng tác.
>> 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
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
thứ hai từ bên trái, và sau đó nhấp vào Tạo Workspace.
Và nó sẽ có thể mất một phút hoặc lâu hơn,
nhưng sau đó bạn sẽ có một môi trường, một khi bạn
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ờ.
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
một khi bạn đã nhấp vào Tạo Workspace.
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.
Tất cả các quyền.
Vì vậy, tôi sẽ để nền tảng này cho bây giờ.
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.
Nhưng, một lần nữa, nó có thể mất một chút cho rằng để mở.
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,
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
để thực sự sử dụng một số công nghệ.
Vì vậy, nó quay ra rằng tôi có thể đi trên Mac nhỏ của tôi ở đây,
mở một chương trình đơn giản được gọi là TextEdit, hoặc trên Windows tôi có thể
mở một cái gì đó gọi là Notepad.exe.
Và tôi chỉ có thể chỉ đơn giản là làm điều gì đó như này-- "hello, thế giới."
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 đó.
Đ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.
Chỉ cần tạo ra một tập tin văn bản đơn giản.
Nhưng nó chỉ ra rằng một web trang là nghĩa đen chỉ đó.
Đó 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,
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.
Và bạn không chỉ gõ các từ trong tập tin.
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ì đó
được gọi là ngôn ngữ đánh dấu.
>> Vì vậy, tôi sẽ rất nhanh chóng gõ và sau đó giải thích như sau.
Tôi sẽ lần đầu tiên loại này, trong đó nói rằng,
hey, trình duyệt, ở đây có một trang web viết bằng HTML.
Và hai điều này cùng nhau nói, hey, trình duyệt, sau đây thực sự là HTML.
Hey, trình duyệt, ở đây có đầu hoặc đầu trang của tôi.
Hey, trình duyệt, bên trong của đỉnh trang của tôi, đặt một tiêu đề đó là, "hello,
thế giới. "
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.
Và, hey, trình duyệt, cơ thể của tôi trang cũng nên nói, "hello thế giới."
Vì vậy, các chi tiết nổi bật ở đây là gì?
Đây là những gì thường được gọi là một tuyên bố doc-loại,
và, thẳng thắn, đó là một chút khó nhớ này lúc đầu tiên.
Bạn chỉ cần loại sao chép-dán nó.
Đây là cách thức nói, hey, trình duyệt,
Tôi đang sử dụng phiên bản HTML 5 mà ra một chút gần đây.
Đó 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ế
quyết định đưa vào trên cùng của tập tin.
Mặc dù đó là một ít phức tạp, đó là tất cả
nó means-- hey, trình duyệt ở đây đi kèm với phiên bản 5 của HTML.
>> 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ử,
nhưng nó được phát triển, và nó có thể được nhận được một chút đơn giản.
Chú ý một vài đặc điểm về những gì tôi đã đánh dấu.
Có những điều này với góc brackets-- khung bên trái
và khung bên phải.
Và nhận thấy sự đối xứng ở đây.
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ở
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à
khác nhau chỉ trong chừng mực nó có này chém vào đầu của từ
HTML.
Và bạn có thể nghĩ này như tôi đã tình cờ
đề xuất trước, hey, trình duyệt, ở đây có một số mã HTML.
Và ngược lại, hey, trình duyệt, đó là nó cho sự bắt đầu và kết thúc HTML--.
>> Trong khi đó hey, trình duyệt ở đây đến đầu trang của tôi.
Hey, trình duyệt, đó là nó cho người đứng đầu.
Hey, trình duyệt, đây là cơ thể của trang web của tôi.
Hey, trình duyệt, đó là nó cho cơ thể.
Và bên trong đó là một số văn bản tùy ý cho bây giờ.
Và bên trong của người đứng đầu, trong khi đó, là một số tùy ý, nhưng được gắn thẻ,
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."
Bây giờ, bây giờ, bạn có thể giả định rằng các trình duyệt
có only-- hoặc, đúng hơn, các trang web có chỉ có hai parts-- đầu và cơ thể.
Và người đứng đầu thường là chỉ như thanh menu, các công cụ
thực sự chỉ ở đầu.
Và cơ thể là ruột của trang, tất cả mọi thứ trong đó hình chữ nhật lớn
mà lấp đầy màn hình.
Vì vậy, tôi sẽ đi trước và làm điều này.
Tôi sẽ đi trước và bấm Save, File Save.
Và tôi sẽ tiết kiệm này như hello.html,
và tôi chỉ cần đi tới đặt nó trên máy tính để bàn của tôi.
Và tôi sẽ đi trước và nhấn Save.
Và notice-- Mac của tôi tại ít nhất là hét lên với em.
Bạn có chắc chắn muốn làm điều này?
Và tôi sẽ nói, có, sử dụng HTML.
Tôi biết tốt hơn trong trường hợp này.
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.
Và tôi sẽ tăng gấp đôi vào nó.
Và bạn sẽ nhận thấy rằng, bằng cách mặc định, Chrome đã mở ra.
Đó là bởi vì đó là trình duyệt mặc định của tôi.
Và nó chỉ nói, "hello, thế giới."
Nhưng nó nói "xin chào, thế giới "trong hai nơi.
Chú ý trên bên trái.
Khá khó để bỏ lỡ.
Nó lớn và đậm.
Và nơi nào khác nó có vẻ nói, "hello, thế giới"?
>> Đung Tab.
>> DAVID J. Malan: Yeah, các tab riêng của mình.
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--
và thực sự đây là tiêu đề.
Nó chỉ là trong tab ở đây.
Và tôi có thể kéo tab này ra để không nhầm lẫn.
Đây chỉ là một tab duy nhất bây giờ, và thực sự chúng ta thấy "hello, world"
lên ở đây và "hello, world" xuống đây.
Vì vậy, khá đơn giản.
Nhưng nó cũng khá đơn giản.
Và thật ra, tôi phóng to.
Tôi có thể thay đổi kích thước phông chữ chỉ phóng đại khả năng truy cập.
Nhưng bây giờ chúng ta làm điều gì đó một chút thú vị hơn.
>> 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.
Tôi sẽ trở lại với tôi tập tin văn bản, và tôi sẽ
để thay đổi điều này và nói "Hello, Disney World."
Tiết kiệm.
Và trở lại của tôi trình duyệt và nhấn Reload.
Và bây giờ, tất nhiên, nó nói "Disney World."
Và tôi sẽ để phóng to nhân tạo chỉ vì vậy nó dễ dàng hơn để xem.
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.
Tôi muốn nhấn vào Disney World và đi đâu đó như disney.com,
nhưng điều đó không làm việc.
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.
Vậy làm thế nào để tôi làm điều đó?
Vâng, tôi chỉ có thể nói, "Hello, http://www.disney.com."
Lưu này.
Nạp lại.
Nhưng điều này cũng không thể nhấp.
Và những gì tốt đẹp ở đây, mặc dù đây không phải là chức năng nào,
là nó có vẻ rằng trình duyệt theo nghĩa đen chỉ làm
những gì tôi nói với nó để làm.
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.
Tôi cần phải sử dụng thẻ hoặc đánh dấu ngôn ngữ để thực sự nói
trình duyệt để làm nhiều hơn.
Vì vậy, tôi sẽ đi trước và xóa này cho một thời điểm.
Và tôi sẽ nói, hey, trình duyệt, bắt đầu một neo ở đây,
một liên kết như vậy để nói chuyện.
Và các siêu tham khảo, các điểm đến neo rằng, nên URL này.
Và thông báo báo giá của tôi.
Tôi có thể sử dụng dấu ngoặc đơn, quá, nhưng bạn có để phù hợp,
và tôi thường chỉ cần sử dụng dấu ngoặc kép để giữ cho nó đơn giản.
Chú tôi sẽ đóng thẻ.
Và sau đó ở đây tôi sẽ nói, "Disney World."
Và bây giờ tôi cần một số symmetry-- mở khung, / a, đóng khung.
>> Vì vậy, những gì đã giới thiệu tôi?
Chúng tôi đã có một vài thẻ đã.
HTML, Head, Tiêu đề, cơ thể, là tất cả các thẻ, có thể nói,
với các đối tác mở và đóng cửa.
Nhưng thông báo, đây là loại của cơ bản khác nhau.
Đây là những gì chúng ta sẽ gọi trong HTML một thuộc tính.
Và một thuộc tính là chỉ là một cặp khóa-giá trị.
Đây là một điều phổ biến trong máy tính science-- cặp khóa-giá trị.
Đó là loại công cụ của thương mại.
Một khóa và giá trị.
Một từ và sau đó một số Nói một cách khác hay từ.
Và trong trường hợp này, chính là href, và giá trị là URL đầy đủ.
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ẻ.
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,
bởi vì chúng ta cần phải neo liên kết đến đâu đó.
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.
>> Vì vậy, tôi sẽ đi trước và lưu các tập tin bây giờ.
Quay trở lại trình duyệt và tải lại của tôi.
Và, thì đấy, bây giờ chúng ta có khởi đầu của một trang web hợp pháp.
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,
đó là siêu nhỏ.
Nhưng bạn thấy www.disney.com.
Và nếu tôi nhấp vào nó, thực sự đây whisks tôi đi đến disney.com.
Bây giờ, những điều kỳ lạ ở đây là nó không phải là
các best-- URL thị trường nhất, nhưng đó là tốt bởi vì tập tin này không
tồn tại trên World Wide Web.
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--
John Harvard-- / máy tính để bàn.
Nhưng nó có một URL.
Nó chỉ xảy ra được địa phương.
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,
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
trên ổ cứng của bạn.
Và, tất nhiên, trừ khi bạn đã được sau cùng bằng tay,
nó sẽ không tồn tại ở đó.
>> Vì vậy, đó là tốt.
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,
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ỉ
thấy và buộc nó lại đến sớm hơn thảo luận từ sáng nay.
Nó chỉ ra rằng, nếu một trình duyệt theo nghĩa đen chỉ làm
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à
ảnh hưởng bởi giá trị của thuộc tính được gọi href này
nhưng nó sẽ hiển thị này văn bản, điều này có vẻ như
ngụ ý rằng tôi có thể đặt URL ở cả hai nơi và sau đó tải lại
và bây giờ thấy URL và đi vào URL.
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.
>> Vì vậy, nếu bạn đã từng phished-- P-H-I-S-H-E-D--
với một trong những email không có thật từ như PayPal ngân hàng của bạn,
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à
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
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ộ
thông tin.
Vâng, tôi vẫn có thể mất lợi thế này, không có thể tôi?
Tôi có thể nói điều gì đó như, www.paypal.com.
Và thay vì disney.com, tôi có thể đi đến, như thế, badguy.com.
Nạp lại.
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
hoặc đọc qua loa đọc hơn để nhấp
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.
Tôi không biết những gì thực sự ở đó.
Vì vậy, paypal.com, thông báo, là những gì nó nói nó sẽ,
nhưng tất nhiên, nếu tôi nhìn xuống siêu thấp, đó là một chút mờ,
nhưng nó nói badguy.com.
Đó là chỉ nói cho ngay bây giờ rằng tôi sẽ đến chỗ sai.
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
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ó.
Và nó là đơn giản.
Bây giờ bạn có một kẻ thù nếu bạn làm điều gì đó như thế này
và cố gắng để lừa người dùng vào thăm trang web của bạn.
Nhưng hiện nay, chúng tôi sẽ giữ những điều tốt đẹp và sạch sẽ.
Chúng ta sẽ đi trước và tua lại những thay đổi này.
Nạp lại trang.
Và tôi trở lại disney.com.
>> 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.
Vì vậy, "hello, Disney World."
Tôi sẽ nói ở đây.
Có lẽ tôi sẽ làm cho một số phòng.
"Chúng tôi hy vọng bạn tận hưởng kì nghỉ của bạn!"
Tiết kiệm.
Nạp lại.
Nó không rea-- đó không những gì tôi dự định, phải không?
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ý,
những gì bạn đã hy vọng sẽ xảy ra ở đây?
Vâng, tôi cảm thấy như có nên ngắt dòng ở đây,
do đó, nó cảm thấy lỗi trong một số cách.
Nhưng đó thực sự có chủ ý, vì như trước,
trình duyệt chỉ là sẽ làm những gì bạn cho nó làm.
Tôi đã không nói với nó để phá vỡ đường dây.
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.
Vì vậy, hóa ra chúng ta cần một chút đánh dấu nhiều hơn,
và tôi sẽ sửa lỗi này như sau.
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.
Và sau đó tôi sẽ đi trước và quấn câu khác này
trong một thẻ đoạn, mặc dù họ là đoạn văn siêu ngắn.
Bây giờ tôi sẽ tiết kiệm.
Nạp lại.
Và bây giờ chúng tôi có mà không gian, và chúng tôi loại
có ngữ nghĩa của hai đoạn riêng biệt.
>> Đó 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,
vì vậy tôi sẽ đi tìm Mickey Mouse trên Google Images.
Và chỉ để cho vui, tôi sẽ lấy hình ảnh này.
Tôi sẽ đi trước bây giờ và lấy URL của hình ảnh này,
mặc dù có khác nhau cách để làm điều này.
Để bây giờ, tôi chỉ cần đi để sao chép URL.
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,
img src = quote unquote URL đó, siêu dài.
Và sau đó khái niệm về một hình ảnh là một chút khác nhau.
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,
như một sự khởi đầu thẻ thẻ kết thúc.
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,
để có một thẻ cận hình ảnh.
Đó không phải là không chính xác.
Đó là hoàn toàn chính xác, và nó khuyến khích,
nhưng có ký hiệu viết tắt.
Tôi có thể loại cùng một lúc mở và đóng cùng một thẻ
và điều đó sẽ làm cho trình duyệt hạnh phúc.
Vì vậy, nó chỉ là một chút gọn gàng hơn cho những thứ
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.
Họ chỉ ở đó, hoặc họ không.
>> 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.
Và đó là một chút mất kiểm soát, vì hình ảnh đó là thực sự
một chút lớn, nhưng đó là OK.
Tôi có thể thay đổi kích thước trong một chương trình.
Hoặc bạn biết những gì.
Chỉ cần để chứng minh, tôi sẽ thực sự nói
độ rộng của điều này nên chỉ là 200 pixel, 200 điểm.
Hãy để tôi đi trước và tiết kiệm và tải lại, và bây giờ trang
trông hợp lý hơn một chút.
Nhưng nhận thấy mô hình.
Vâng, tôi đã loại dạy cho bạn tất cả HTML trong một ý nghĩa, ít nhất
khái niệm, bởi vì tất cả HTML đang là những tags-- mở thẻ, thẻ đóng cửa,
và các thuộc tính mà thay đổi hành vi của họ.
Và, rõ ràng, mỗi thẻ có thể có không hoặc một
hoặc hai hay nhiều thuộc tính, mỗi mà không một chút gì đó khác nhau.
Bây giờ, làm thế nào để bạn biết những gì đang tồn tại?
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,
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.
>> Quả thật, khi tôi còn là sinh viên năm trước đây và đã học HTML,
một trong giảng dạy toán học của tôi trợ lý chỉ cần bỏ ra
một chút thời gian hướng dẫn tôi cho giống như nửa giờ, một giờ,
và sau đó tôi đã được trên đường.
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,
trong đó, rõ ràng, tôi có không thực sự tiến xa hơn nữa.
Nhưng vấn đề là, một khi bạn hiểu những ideas-- đơn giản
nếu phức tạp text-- nhưng đơn giản ý tưởng bắt đầu từ một ý nghĩ
và đóng một tư tưởng, giữ tất cả mọi thứ độc đáo cân,
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ả
để có nó.
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ự,
chúng ta hãy đi một nơi nhiều hơn một chút reasonable-- stanford.edu.
Và tôi sẽ đi vào View, Phát triển, View Source.
Nó xấu xí, nhưng notice-- và tôi sẽ phóng to thông báo
một số công cụ đó là quen thuộc rồi.
Có này lên đây, mà là một trình duyệt.
Ở đây có HTML5.
Có HTML.
Rõ ràng, có một thuộc tính mà tôi đã không
sử dụng chỉ định ngôn ngữ của trang,
và điều này có thể giúp tự động dịch thuật và công cụ như thế.
Dưới đây là những người đứng đầu của trang.
Đây là tiêu đề của trang Stanford.
Có một thẻ tôi không nói về thẻ Meta yet--.
Nó chỉ là loại thông tin lai lịch.
Nó giúp với SEO, hoặc Search Engine Optimization,
hoặc kết quả tìm kiếm của Google hoặc tương tự.
Nhưng nếu chúng ta tiếp tục tìm kiếm, giữ tìm kiếm, đây là thẻ Body.
Và có chùm khác thẻ chúng tôi đã không nói chuyện về chưa.
Nhưng Div là một cho một bộ phận của trang.
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
chia trang web của bạn vào các đơn vị trực tuyến khác nhau.
Và sau đó rất nhiều các div tôi thấy, cái gì gọi là Class,
nhưng chúng tôi sẽ trở lại đó.
>> Đây là hình thức interesting--.
Hình thức là tất cả trên web.
Bất kỳ hộp tìm kiếm bạn từng được sử dụng là một hình thức.
Và, vì vậy, chúng ta hãy thực sự nhìn thấy.
Hình thức.
Hoạt động.
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 đó.
Phương pháp là "bài".
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,
hoặc "bài".
Và sẽ thấy một sự khác biệt về điều này trong một thời điểm.
Hãy thực sự thấy đây là những gì.
Hãy để tôi quay trở lại trang của Stanford.
hình thức những gì họ đang nói về, bạn nghĩ sao?
Có gì nhảy ra lúc bạn?
>> Đung hộp tìm kiếm.
>> DAVID J. Malan: Yeah.
Vì vậy, lên phía trên bên phải đây là hộp Search này.
Và đó là cách họ thực hiện một it-- thẻ đó là nghĩa đen hình thức mở khung.
Và sau đó chúng ta hãy tìm kiếm một cái gì đó.
Hãy tìm kiếm một người bạn của mine-- "Nick Parlante."
Đi vào.
Và tất nhiên, nó đã đi đến URL hơi khác nhau.
Hãy để tôi trở lại đây.
Hãy tìm kiếm "các khóa học."
Chết tiệt.
Đã đi đến một URL khác nhau.
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
mà chúng ta thấy trong thuộc tính hành động đó.
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ẻ.
Trong thực tế, đây là đầu vào cho các loại tìm kiếm mà bạn muốn.
Dưới đây là đầu vào cho một loại tìm kiếm.
Dưới đây là đầu vào cho các chuỗi chính nó.
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ẻ
nhưng chỉ để xem.
Nó chỉ mở cửa và đóng cửa thẻ và tìm kiếm những thứ.
Yeah?
Victoria?
>> Đung [IM LẶNG]
DAVID J. Malan: Đó là một câu hỏi hay.
Đó là một phức tạp hơn chút để xem.
Hãy để tôi trở lại với câu hỏi chỉ trong vài phút
khi chúng ta nhìn vào một cái gì đó gọi là tấm CSS, hoặc theo tầng,
và chúng ta có thể cố gắng để suy ra càng nhiều từ trang.
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.
Bạn sẽ và-- đó là dễ thương ngày hôm nay.
ĐƯỢC.
Tất cả đã được làm xong.
Được rồi, vậy View Source.
Bạn sẽ nghĩ rằng Google có mã nguồn thật sự tốt đẹp.
Vì vậy, rõ ràng, những gì đang xảy ra ở đây?
Và trên thực tế, đây không phải là thậm chí cả HTML.
Đây là một cái gì đó gọi là JavaScript.
Và chúng ta hãy tiếp tục đi và đi.
Tôi thậm chí không biết nơi trang bắt đầu.
Tôi sẽ sử dụng Command F, mở khung HTML.
Được rồi, có nó được.
Tôi tìm thấy sự khởi đầu của trang, và có quá nhiều thứ ở đây.
>> Điều gì đang thực sự xảy ra?
Vâng, bạn biết những gì, chúng ta có thể làm sạch này lên.
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,
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,
nhưng nếu tôi đi vào các phần tử, những gì thực sự tốt đẹp
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.
Và các trình duyệt có thể đọc mà mess của một trang web,
rằng HTML mail chúng tôi chỉ nhìn, và nó có thể
phân tích nó hay đọc và phân tích nó và định dạng lại nó
một cách tốt đẹp của con người thân thiện.
Vì vậy, những gì tôi đang thấy bây giờ trong màn hình này ở đây
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ứ,
họ đã colorized nó, nhưng đó là cùng một văn bản chính xác
mà tôi đã tải về từ máy chủ.
>> 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--,
trang vẫn còn sáng tác chỉ một cái đầu và một cơ thể,
và tôi có thứ bậc có thể lặn ở đây.
Chú ý rằng Google dường như có để divs-- thế này và thế này.
Tôi có thể mở rộng đó.
Có một bó toàn bộ các div khác.
Vì vậy, nó là một chút phức tạp.
Nhưng chờ đợi.
Điều này có vẻ nhiều hơn nữa có thể đọc được, tương đối, hơn này.
Tại sao Google lúng túng bản thân bởi chỉ cần gửi
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ì đó
trông đơn giản như vậy ở cái nhìn đầu tiên?
Giống như, tại sao họ không thêm các khoảng trống nhiều hơn?
Tại sao họ không nhấn Enter như tôi đã làm?
Nhìn như thế nào tốt tôi đã lúc viết một trang web.
Tôi nhấn Enter rất siêng năng.
Tôi thụt vào nên mọi thứ là rất đẹp và dễ đọc.
Tại sao Google không thực hành giống nhau không?
>> Đung [IM LẶNG]
DAVID J. Malan: Tốt.
Rất công bằng.
Họ không có một số người tại Google bằng tay
cập nhật trang nhà nữa.
Nó không phải 1999 nữa.
Vì vậy, họ có phần mềm.
Họ có các công cụ khác tạo động họ HTML.
Tất nhiên, đó là mã bản thân được viết bởi con người,
nhưng thực tế là, nó khá công bằng mà nói,
trình duyệt chắc chắn không chăm sóc như thế nào lộn xộn mã là.
Nhưng có một thậm chí nhiều hơn lý do kỹ thuật hấp dẫn
rằng Google phân HTML của họ mã trong một cẩu thả như vậy, dường như
cách áp đảo tất cả các đóng gói cùng nhau với rất ít way-- rất ít
trong cách định dạng như tôi đã làm.
>> Đung [IM LẶNG]
>> DAVID J. Malan: nhanh hơn?
Tại sao?
Và bạn đã nói gì, Lydia?
Nhanh hơn?
Tại sao nhanh hơn?
Đung [IM LẶNG]
DAVID J. Malan: Có không có không gian để đọc.
Yeah.
Vì vậy, suy nghĩ về những gì một không gian.
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,
hoặc thể chất, giống như nó chiếm nhiều không gian,
hoặc bằng cách nào đó bên dưới mui xe, yêu cầu bộ nhớ.
Và như một aside-- và chúng tôi sẽ nói thêm về tomorrow-- này
mỗi ký tự trên bàn phím thường đòi hỏi 8 bit, hoặc một byte.
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
con người thường sẽ nói.
Vì vậy, đó là nhỏ, nhưng nó vẫn còn không bằng không.
Nó vẫn còn một số lượng không gian.
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ử
Google-- nó siêu popular-- giả sử rằng một tỷ người
ghé thăm trang nhà của họ một ngày, hoặc một số số lượng người
truy cập vào trang nhà tỷ lần một ngày,
bao nhiêu thêm byte có mà kỹ sư phần mềm chỉ tốn Google
bằng cách nhấn thanh của mình hay không gian của mình một lần?
>> Đung [IM LẶNG]
DAVID J. Malan: Không hoàn toàn là xấu.
Chỉ cần một byte lần một tỷ đồng.
Vì vậy là--
Đung 8 tỷ gigabyte.
DAVID J. Malan: Không 8 tỷ.
8 tỷ byte.
Nhưng 1 gigabyte.
1 GB sẽ là đơn vị đo lường.
Nếu người ấy không có hai không gian, 2 GB.
Ba gigabyte.
Đúng?
Nó quy mô tốn kém.
Và như vậy trong trường hợp như Google, trong đó, các cấp, là trường hợp cực đoan,
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ý
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.
Vì vậy, một trong những lý do này trông như vậy nén
là chính xác như Victoria said-- nó là chỉ được tạo ra bởi máy tính nào.
Vì vậy, không có việc lớn.
Hãy để cho trình duyệt con số nó ra.
Nhưng nó cũng cố tình không có nhiều không gian,
bởi vì không gian là không cần thiết.
Và không gian thực sự chi phí tiền bạc.
>> Nó hoặc là chi phí thời gian, vì chỉ để đẩy
rằng nhiều dữ liệu ra khỏi trụ sở chính của google.com chỉ
đã có để có một số lượng thời gian, thậm chí nếu nó mili giây
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,
nó có thể là chi phí tiền bạc.
Google có thể kết nối đến một người nào khác trên thế giới, một
của những người nhìn chăm chú điểm, và nếu họ có
một số loại mối quan hệ tài chính theo đó chi phí dữ liệu của họ tiền,
họ có thể là tốt giảm thiểu dữ liệu bao nhiêu
họ đang phun ra trên kết nối internet của họ.
>> 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,
đó là mặc dù điều này có vẻ khủng khiếp áp đảo, vào cuối ngày,
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
trang.
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
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,
nên cái gì để chơi với có lẽ sau này.
>> Vâng, chúng ta hãy giới thiệu một vài ý tưởng khác bây giờ.
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.
Chúng ta có thể phong cách hóa trang này theo những cách thú vị hơn.
Vì vậy, trong khi HTML email là tất cả về đánh dấu
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,
nơi để đặt nó, CSS, hoặc Cascading Style Sheets,
là một ngôn ngữ thứ hai thường được trộn lẫn với HTML
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
nó những dặm cuối cùng, và nó stylizes nó.
Nó được màu sắc vừa phải, font kích thước vừa phải,
các vị vừa phải.
Đó là tất cả về thẩm mỹ hoặc định dạng, không về
các dữ liệu cơ bản của chính nó.
Và cách dễ nhất để hiển thị điều này có lẽ bằng ví dụ.
Vì vậy, tôi sẽ đi qua vào tập tin văn bản đơn giản của tôi.
Và chỉ trong một khoảnh khắc, tôi sẽ đi bộ chúng tôi thông qua quá trình
làm điều này bản thân mình.
>> Tôi sẽ quay trở lại tập tin của tôi ở đây và tải lại trang chỉ
để xác nhận những gì nó trông như thế nào.
Đó là nơi chúng tôi đang ở bây giờ.
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.
Vì vậy, tôi sẽ đi lên đây vào đầu của trang.
Và tôi sẽ làm phong cách, / phong cách.
Và sau đó bên trong này, tôi sẽ nói với cơ thể của page-- của tôi
và định dạng này là, tại Thoạt nhìn, có lẽ một chút
lạ nhưng thông thường.
Tôi sẽ nói rằng nền màu sắc của trang này phải có màu xanh.
Và điều này là không may loại không phải là thiết kế tốt nhất.
Chú ý rằng trước đây trong thế giới của HTML,
Tôi cho rằng các thuộc tính là các cặp khóa-giá trị.
Một cái gì đó tương đương với trích dẫn unquote "một cái gì đó."
Trong thế giới của CSS, mà là được thiết kế bởi một số người khác nhau,
họ quyết định rằng, trong họ thế giới, cặp khóa-giá trị
sẽ từ ruột một cái gì đó.
Vì vậy, đó là ý tưởng tương tự, mặc dù.
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 đó
ảnh hưởng đến hành vi của trang này.
>> Và bạn có thể đoán.
Cái gì thế này có lẽ sẽ để làm ngay cả khi bạn chưa bao giờ
thấy HTML hoặc CSS trước?
Đung Thay đổi màu nền.
DAVID J. Malan: Yeah, thay đổi màu nền.
Và đặc biệt là màu nền của cơ thể.
Nhưng trong chừng mực cơ thể bây giờ là web
page-- đó là điều duy nhất dưới really-- thanh tiêu đề
nó có lẽ sẽ ảnh hưởng đến điều tương tự.
Vì vậy, chúng ta hãy xem.
Hãy tiết kiệm này.
Tới đây và tải lại.
Nó khá ghê gớm.
Và những gì đang xảy ra đây là một tác dụng phụ.
Tôi chỉ cần chọn hình ảnh này một cách ngẫu nhiên.
Tại sao là màu xanh lá cây không thấm đằng sau Mickey?
Đung [IM LẶNG]
DAVID J. Malan: Chính xác.
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,
là tất cả rectangles-- của hình chữ nhật.
Ngay cả khi Mickey có một số đường cong với chính mình và có một nền tảng,
nền mà có được cái gì.
Nó có phải là màu trắng.
Nó có phải là màu đen hay cái gì khác.
Nó có thể được minh bạch.
Và trên thực tế, tôi có thể mở Mickey Mouse ở đây
trong một chương trình được gọi là Photoshop hoặc một cái gì đó tương tự
và thay đổi tất cả các màu trắng nền để minh bạch,
vì vậy các màu xanh lá cây sẽ tỏa sáng qua.
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
hoặc một nhà thiết kế tại của tôi công ty, ví dụ,
để làm, đặc biệt là kể từ khi tôi chỉ vay này từ internet.
Nhưng đó là lý do tại sao điều này xảy ra.
>> Vì vậy, những gì khác chúng ta có thể muốn làm gì?
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ỉ.
Và để nhấn mạnh, tôi muốn để làm cho mạnh mẽ,
và vì vậy tôi sẽ nói mở mạnh mẽ và đóng mạnh và sau đó tải lại.
Và đó là một khó khăn nhỏ để xem trên máy chiếu
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.
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.
Chúng ta có thể thay đổi màu sắc.
Trong thực tế, chỉ cần cho đá, tôi sẽ đi trước và làm điều này.
Tôi không thực sự thích làm thế nào tôi đoạn gần đây với nhau,
vì vậy tôi có thể làm một cái gì đó như thế này.
Tôi sẽ để cho trình duyệt, thay đổi mỗi thẻ đoạn để có,
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.
Và một lần nữa, tôi biết chỉ này vì có người đã dạy cho tôi
hay tôi nhìn nó trong một tài liệu tham khảo trực tuyến.
Vì vậy, hãy để tôi tiết kiệm này.
Và, ah, bây giờ tôi đã trung tâm hình ảnh đó.
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
tag-- do đó, một đoạn thứ ba, mặc dù nó không phải văn bản.
Hãy tiết kiệm đó và tải lại.
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í,
nhưng ít nhất nó có vẻ như tôi đã trải qua hai phút thay vì một phút
lam no.
>> 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?
Tôi đã không thực sự thay đổi dữ liệu trong trang khác vì thêm chữ thực sự.
Tôi đã thêm siêu dữ liệu, nếu bạn muốn.
Hey, trình duyệt, làm cho Từ "thực sự" đậm.
Nhưng dữ liệu là không mạnh.
Đó là siêu dữ liệu.
Các dữ liệu là "thực sự."
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.
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.
>> Tôi sẽ đi đến hello.html và chỉ cần đánh dấu và sao chép này.
Và bây giờ tôi sẽ đến đi vào Cloud9, mà
Tôi sẽ hướng dẫn bạn thông qua chỉ trong một khoảnh khắc.
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.
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ự.
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
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
trong đám mây, về mặt kỹ thuật một container trong các đám mây,
rằng chúng tôi có đầy đủ quyền quản trị để.
Vì vậy, về mặt lý thuyết, không có ai khác trên thế giới có
truy cập vào màn hình tôi xem ngay bây giờ,
ngoại trừ những người người chạy các trang web,
bởi vì về mặt kỹ thuật mà họ có truy cập vật lý và vv.
>> Vì vậy, những gì chúng ta nhìn thấy trong môi trường này?
Tôi sẽ thu nhỏ, bởi vì đó là một chút nhỏ.
Và hãy để tôi chỉ hơn đây chỉ là một khoảnh khắc.
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.
Vì vậy, tinh thần tương tự Mac OS và Windows.
Đây là tất cả các tập tin trong tài khoản của tôi.
Và theo mặc định, nếu bạn tài khoản là tôi như thế,
bạn sẽ nhìn thấy hoặc sớm thấy helloworld.html và readme.md.
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.
Nếu bạn đã từng sử dụng Microsoft Word hay Notepad hoặc TextEdit,
đây là từ chỉnh sửa của tôi các tập tin là sẽ đi.
Và sau đó là phức tạp nhất tính năng của môi trường này
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.
Nếu bạn đã sử dụng hệ điều hành DOS từ năm qua, đây là Linux
hoặc tương đương Linux của DOS.
Đó 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.
Tất cả các bạn có thể làm là gõ lệnh, nhưng những lệnh
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,
làm bất kỳ số lượng của sự vật.
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.
>> Và như vậy chúng ta hãy làm điều này.
Nếu bạn đang ở trong này môi trường, mà bạn nên
đượ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
File, mới cho một thời điểm.
Và đó sẽ cung cấp cho bạn một mới tab ngay tại đây ở giữa.
Và tôi just-- và hãy đi trước và làm điều này.
Hãy đi trước và bây giờ File, Save và đi trước và gọi nó hello.html,
không nên nhầm lẫn với helloworld.html, mà
đ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.
Bạn sẽ thấy nó đột nhiên xuất hiện, nhiều khả năng ở phía bên trái,
và các tab vẫn sẽ được mở.
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ó.
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
mà bạn có thể có trong một tab khác.
>> 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,
Tôi sẽ cho bạn thấy làm thế nào bạn thực sự có thể xem này.
Nhưng thay đổi ít nhất một điều.
Thay đổi helloworld để một cái gì đó của sự lựa chọn của riêng bạn,
để 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.
Tất cả các quyền.
Và khi bạn đang ready-- không rush-- khi bạn đã sẵn sàng,
đ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.
Và nếu bạn nhấp vào Chạy nút lên hàng đầu, điều này
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,
nhưng nó có thể mất một chút thời gian để quote unquote "bắt đầu Apache", mà
là tên của máy chủ web.
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.
Vì vậy, ngay bây giờ, tôi sẽ phóng to.
Nếu tôi bắt đầu nhập mở khung HTML, thông báo
nó khiến tôi để kết thúc suy nghĩ của tôi.
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.
Nhưng kỳ vọng là sau đó tôi sẽ nhấn Nhập, và sau đó di chuyển bên trong có
và làm đầu bên trong và Sau đó tôi làm cơ thể bên trong.
Và đó là một chút lạ lúc đầu, bởi vì nó làm việc cho bạn,
nhưng nhận ra rằng cuối cùng nó giúp bạn tiết kiệm phím bấm.
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
cả hai để phát triển web như này và chương trình thực tế,
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,
điều đó chỉ cho phép một lập trình viên hoặc một nhà thiết kế
gõ ít tổ hợp phím thực hiện điều tương tự.
Đôi khi nó là tốt, mặc dù.
Đôi khi nó chỉ gây phiền nhiễu.
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,
bạn có thể nhấp vào nút Run lên hàng đầu.
Và sau đó ở phía dưới cửa sổ, bạn sẽ được thông báo
vào những gì URL bạn có thể ghé thăm trang web của bạn.
Mine, ví dụ, là tại business-daharvard.c9users.io
và kể từ đó trở đi.
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?
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?
Và hãy để tôi đề xuất, chỉ cần để có được folks comfortable--
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.
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,
Tôi sẽ bật nhạc.
Tôi sẽ đề nghị danh sách điều bạn có khả năng có thể thêm.
Và bạn chắc chắn có thể sử dụng Google.
Và tại sao chúng ta không chỉ đề nghị bạn cố gắng để giải quyết
ít nhất một vấn đề đặc biệt ở đây.
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.
>> Trên thực tế, hãy để tôi đặt nó trong một hình thức văn bản.
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.
Chúng tôi đã nhìn thấy các thẻ đoạn.
Bây giờ nó sẽ tự động hoàn tất.
tag khoản, thẻ liên kết.
Hãy nói rằng bạn muốn làm một cái gì đó lớn hơn,
vì vậy bạn có thể like-- thẻ span thể giúp đỡ.
Vâng, bạn có thể cần một số giúp đỡ cho rằng chỉ trong một khoảnh khắc.
Chúng tôi đã nhìn thấy div.
Bạn sẽ thấy có bảng.
Có một cái gì đó gọi là tr, td.
Th, td.
Hãy trở lại để rằng trong một thời điểm.
Những gì người khác có thể là tiện?
Có mạnh.
Có nhấn mạnh, hay đúng hơn là em.
There's-- gì khác bạn có thể ưa thích đây?
Vâng, chúng ta sẽ nhìn vào đó với nhau.
Hình thức, mà chúng tôi đã nhìn thấy.
Có hình thức.
Có đầu vào và một vài người khác.
Được rồi, vậy chúng ta hãy làm điều này.
Để trả lời một của Victoria câu hỏi, hãy để tôi đầu tiên
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ọ.
Sau đó, hãy để tôi giới thiệu một vài ý tưởng khác.
Sau đó chúng tôi sẽ cho folks giải quyết một số vấn đề của riêng họ.
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,
và chúng tôi sẽ thực sự tái thực hiện cùng giao diện front-end,
vậy để nói chuyện, cho bản thân Google.
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,
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
rằng họ có trên trang chủ của mình.
Và vì vậy chúng tôi sẽ trở lại các thẻ chỉ trong một khoảnh khắc.
>> Vì vậy, đây là những gì tôi đề xuất chỉ là một khoảnh khắc trước.
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,
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,
cho dù đó là trung tâm hoặc trái hoặc phải.
Nhưng rất nhanh chóng bạn sẽ tìm hoặc một nhà thiết kế web
sẽ thấy rằng đây trở thành một ít khó sử dụng,
bởi vì bạn đang làm gì gọi là nội dung trộn
với bài thuyết trình đó.
Bạn đang trộn dữ liệu của bạn và tính thẩm mỹ của nó.
Và trên thực tế, nếu bạn xem xét những gì sẽ xảy ra trên time--
điều này là rất nhỏ trang web, tất nhiên.
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,
trang rất nhanh chóng nhận được dài hơn và dài hơn và dài hơn.
Và giả sử rằng tôi muốn có một trang web thứ hai
chia sẻ một số các thuộc tính.
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ứ,
và tôi cũng muốn mọi thứ với một nền màu xanh lá cây.
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
vào tập tin thứ hai, mà cảm thấy tốt.
Nó sẽ giải quyết vấn đề.
>> Nhưng nếu tôi muốn có một trang thứ ba hoặc một trang 30 hoặc trang 40?
Bây giờ tôi sẽ được sao chép và dán rất nhiều mã trùng lặp
trong nhiều tập tin.
Và do đó, giả sử rằng Tôi quyết định hay tôi đã nói,
hey, chúng tôi không sử dụng nền xanh nữa.
Chúng ta sẽ bắt đầu sử dụng màu cam.
Bạn phải thay đổi những gì?
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?
Giống như 30 hoặc 40 địa điểm.
Đó là tẻ nhạt.
Nó là dễ bị lỗi.
Có một số lý do nơi bạn sẽ không muốn gây ra
là loại đau cho chính mình.
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ỉ
đặt giữa hai màu vàng này thẻ, các thẻ phong cách,
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
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,
không giống như các mạng sơ đồ chúng tôi đã làm trước đây?
>> Vì vậy, nếu tôi đi ở đây, tôi sẽ thực sự đề nghị
rằng chúng ta thay thế từ khóa phong cách với một cái gì đó
gọi là thẻ liên kết, là khủng khiếp, khủng khiếp đặt tên,
bởi vì bạn không sử dụng liên kết thẻ để tạo ra những gì
con người chúng ta biết như là một liên kết trong một trang web.
Cho rằng, bạn sử dụng mà thẻ?
Làm thế nào để bạn tạo ra một liên kết trong một trang web?
Đung Các a.
DAVID J. Malan: Các a, hoặc neo thẻ, mà đã đi đến Disney trước.
Thẻ liên kết ở đây đang nói này-- liên kết đến một tập tin gọi là
styles.css, các mối quan hệ mà sẽ được rằng nó là kiểu của tôi.
Vì vậy, đây là một trong những của S trong CSS-- cascading style sheets.
Phong cách sheet-- hai của S trong CSS.
Cascading Style Sheet.
Đ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
và sử dụng nó như kiểu của bạn, có nghĩa là bên trong của tập tin đó
sẽ là tất cả các stylizations mà chúng ta vừa thực hiện.
Và vì vậy những gì tập tin đó có thể trông giống như là này.
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
để có được quá nhiều vào cỏ dại ở đây.
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,
dán trong những lines-- whoops-- dán vào những đường nét,
lưu nó như styles.css, và sau đó, trong các tập tin khác, xóa tất cả điều đó
và thay thế nó thay với thẻ liên kết này.
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"
tag gần.
Lưu nó.
Quay trở lại helloworld tôi.
Nạp lại.
>> Nghĩa đen không có gì đã xảy ra.
Đó 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.
Để 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"
với số vốn S, mà là không chính xác, và sau đó tải lại.
Bây giờ bạn có thể nhìn thấy nó chỉ không làm việc.
Bây giờ, tại sao?
Vâng, chúng ta hãy sử dụng một kỹ thuật từ trước đó.
Hãy để tôi đi trước, và trong trình duyệt của tôi, trong Chrome, tôi
sẽ mở ra mà đặc biệt tab mạng như trước,
và hãy để tôi tải lại trang.
bạn là gì không ngạc nhiên khi nhìn thấy bây giờ?
Hoặc có thể bạn ngạc nhiên khi nhìn thấy nó.
Dù bằng cách nào, những gì bạn nhìn thấy bây giờ?
Đung [IM LẶNG]
DAVID J. Malan: Nó không tìm thấy.
Tại sao nó không tìm thấy?
Vâng, vốn Styles.css-- S-- không tồn tại.
Tôi đặt tên sai nó.
typo đơn giản.
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,
nó không được tìm thấy.
Theo nghĩa đen, tôi không biết nơi tập tin đó là.
Vì vậy, kết quả là, các trình duyệt cho bạn thấy những gì nó có thể,
các nội dung thô của trang, mà đã là một 200, HTML,
nhưng cách điệu không thể được thêm vào sau đó.
Và đây là những gì có nghĩa là của tầng.
Bạn có thể sắp xếp thêm sau đó, và nó loại
trau chuốt tính thẩm mỹ của trang web.
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
nếu bạn muốn.
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ó.
Vì vậy, tôi sẽ phải khắc phục điều đó đầu tiên.
>> Vì vậy, chúng ta hãy đi trước và kiến nghị sau đây.
Hãy đi trước và làm điều này.
Bắt đầu với có lẽ tập helloworld của bạn,
hãy để tôi chỉ mời một vài các tính năng gợi ý.
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?
Đượ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.
Và mỗi chúng ta sẽ nhổ ra chỉ là một vấn đề để giải quyết.
Làm cho văn bản lớn hơn.
Tôi sẽ không làm phiền văn bản này khi chúng tôi
có công nghệ đạn ngay trên đây.
Vì vậy, một số vấn đề.
Vì vậy, chúng ta sẽ cố gắng để làm cho văn bản lớn hơn.
Tất cả các quyền.
một người nào đó sẽ đề nghị gì khác?
Những gì người khác chúng ta có thể muốn để làm trong một trang web?
Hãy đến với một danh sách ngắn các điều
và sau đó uỷ thác cho nhóm con số này ra.
>> Đung [IM LẶNG]
>> DAVID J. Malan: OK, văn bản vị trí trên các cạnh khác nhau của trang?
Tất cả các quyền.
Thứ gì khác.
>> Đung [IM LẶNG]
DAVID J. Malan: Nó là.
Vì vậy, một gif chỉ là định dạng tập tin khác nhau.
Chúng tôi chỉ sử dụng, cái gì, một png hoặc jpg lẽ?
Chúng tôi sử dụng một jpg.
Nếu bạn tò mò, một quá mức trả lời cho câu hỏi của bạn
là một jpg thường được sử dụng cho hình ảnh, bởi vì nó hỗ trợ
hàng triệu màu sắc hoặc 24-bit màu.
Một gif thường được sử dụng cho, như thế, memes internet những hình ảnh động days--,
hình động như thế nào.
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ể,
nhưng nó hỗ trợ minh bạch và hoạt hình.
Và sau đó là png, mà hỗ trợ minh bạch và màu sắc hơn
nhưng không phải hoạt hình.
Vì vậy, nó là một thương mại-off.
Vì vậy, thêm một gif, mặc dù, sẽ là chức năng
tương đương với việc thêm một png hoặc jpg.
Yeah.
nguồn hình ảnh bằng.
Vì vậy, cái gì khác.
Hãy đến với cái gì đó chúng tôi đã gửi đến Victoria để làm ở đây.
>> Đung Thêm nút cho một mẫu.
DAVID J. Malan: OK.
Vì vậy, thêm nút cho một mẫu.
Và chúng tôi sẽ làm một cùng nhau.
Vì vậy, đó sẽ là một segue hoàn hảo ngay sau khi thử thách này.
Còn gì nữa không?
Những gì bạn có thể muốn làm gì?
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.
Đung Thay đổi màu sắc của văn bản.
DAVID J. Malan: Thay đổi những gì?
Đung Màu của văn bản.
DAVID J. Malan: Thay đổi màu sắc của văn bản.
Tất cả các quyền.
Vì vậy, chúng ta hãy làm điều này.
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,
Tôi sẽ bật nhạc cho có thể năm phút ở đây.
Bạn đang chào đón để sử dụng Google.
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.
Bạn đang chào đón để tìm hơn về vai khác.
Nhưng giải quyết chỉ là một trong những vấn đề này.
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.
Vì vậy, năm phút để giải quyết bất kỳ một trong những vấn đề này
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.
>> [NHẠC]
Tất cả các quyền.
Đừng lo lắng nếu bạn muốn để giữ mày mò,
nhưng tôi sẽ làm hỏng một vài các câu trả lời.
Vì vậy, đề nghị đầu tiên từ Victoria là làm cho văn bản lớn hơn.
Vì vậy, có một số cách để làm điều này.
Tôi hiện đã phục hồi màn hình của tôi đến cỡ này,
mặc dù tôi đã phóng to nhân tạo chỉ để nhìn thấy mọi thứ.
Và chúng ta hãy làm điều này.
Hãy để tôi đi trước và lấy một số văn bản Latin chung
chỉ cần để chúng ta có một cái gì đó để làm việc với.
Vì vậy, cho tôi chỉ là một khoảnh khắc.
Tôi sẽ làm ba đoạn.
ĐƯỢC.
Đây sẽ là một ví dụ tốt hơn.
Vì vậy, cho tò mò, trong hello.html của tôi, tôi chỉ
dán ba vô nghĩa đoạn Latin
chỉ vì vậy chúng tôi có một số văn bản để làm việc với.
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.
Vì vậy, tôi có thể, như trước, đi ở đây.
Và hãy để tôi làm điều đó một cách đúng đắn.
Tôi sẽ có một liên kết tag trỏ đến một tập tin
gọi là "styles.css," các mối quan hệ trong số đó là một lần nữa "stylesheet".
Và sau đó tôi sẽ tiết kiệm mà và mở ra này "styles.css."
>> Vì vậy, như trước đây, tôi có khả năng trong file CSS này
để thực sự ghi đè mặc định thẩm mỹ của một trang web,
và tính thẩm mỹ mặc định, tất nhiên, là khá buồn tẻ.
Đó 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.
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.
Tôi có thể làm một vài điều.
Trong file styles.css của tôi, tôi có thể nói, bạn biết những gì,
áp dụng những điều sau đây để cơ thể của trang web của tôi.
Đi trước và làm cho cỡ chữ 24 điểm,
mà là một số tôi có thể sử dụng trong Microsoft Word.
Hãy để tôi quay trở lại trang web của tôi trang ở đây và tải lại,
và bạn có thể thấy rằng nó đã lớn hơn rất nhiều.
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--
làm cho nó 96 điểm.
Nạp lại.
Và nó nhận được một chút khó sử dụng vào thời điểm này.
>> Nhưng tôi có thể là một chút chính xác hơn.
Thay vì áp dụng này stylesheet để cơ thể của trang web của tôi,
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
chức năng trong cùng một cách?
>> Đung p thẻ?
DAVID J. Malan: P thẻ.
Vì vậy, người đứng đầu sẽ không được đúng, bởi vì người đứng đầu,
bạn có thể không thực sự kiểm soát các thẩm mỹ của.
Có hai văn bản có hay không.
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
thẻ.
Và mặc dù có ba, đó là hoàn toàn tốt đẹp, bởi vì trong CSS,
khi tôi chỉ nói "p" này có nghĩa là áp dụng như sau
tới bất kỳ thẻ phù hợp này chọn, bộ chọn chỉ
là tên của thẻ.
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ữ,
và chúng ta hãy làm cho nó thêm hợp lý again-- 24 điểm.
Và bạn biết những gì, chỉ cho các biện pháp tốt,
chúng ta hãy làm cho màu sắc chỉ có màu đỏ cho thời điểm này.
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í.
>> 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
để nhảy ra ở người sử dụng.
Tôi không muốn chỉ tăng kích thước font chữ của tất cả mọi thứ.
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.
Vì vậy, hãy thoát khỏi các màu đỏ, bởi vì đó chỉ là loại dính,
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,
do đó chúng tôi trở lại với một cái gì đó hợp lý hơn một chút.
Và bây giờ tôi chỉ muốn tăng kích thước font chữ của đoạn đầu tiên.
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à
có lẽ giảng dạy nhất tại thời điểm này là để làm như sau.
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."
Tôi có thể gọi bất cứ điều gì tôi muốn này.
Tôi có thể gọi đây là "foo" hoặc bất kỳ từ nào khác,
nhưng tôi sẽ cho nó một số Tên ngữ nghĩa có ý nghĩa
như "đầu tiên."
Đây là định danh duy nhất, ID, cho đoạn đầu tiên của tôi.
>> 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.
Thay vì nói, áp dụng sau vào thẻ p,
Tôi có thể nói following-- áp dụng những điều sau đây,
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."
Làm gì tôi muốn áp đặt cho nó?
Một kích thước font chữ của 24 điểm.
Vì vậy, tôi có hai bộ chọn bây giờ.
Một làm cho tất cả các đoạn 12 điểm.
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--
này có hiệu ứng tầng.
Tôi đã chỉ cần thực hiện tất cả của tôi tags đoạn 12 điểm,
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ố
trong trang, bất kỳ thẻ trong trang mà ID duy nhất là quote unquote "đầu tiên."
Và hashtag trong bối cảnh này chỉ có nghĩa là "định danh duy nhất."
Tôi không đặt nó trong tập tin HTML.
Tôi, ở đây, chỉ cần nói quote unquote "đầu tiên."
>> Vì vậy, hãy để tôi tải lại.
Và bây giờ tôi thấy, ah, OK.
Ý tôi là, nó không phải là đẹp, nhưng nó là loại
giống như lời nói đầu cho một cuốn sách hoặc một cái gì đó như thế,
nơi đoạn đầu tiên là lớn hơn.
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
Tôi đã thực hiện kiểm soát nhiều hơn.
Bây giờ maybe-- có lẽ tôi muốn làm điều này đôi khi vì lý do gì,
và vì vậy tôi không muốn điều này áp dụng để chỉ một thẻ HTML.
Thay vào đó, chúng ta hãy say-- hãy cũng làm như sau.
Class = "nhập khẩu".
Trong khi đó, một ID được sử dụng để duy nhất xác định một điều, một thẻ,
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ẻ
trên trang web của bạn.
Vì vậy, nó có thể dùng lại.
Một ID là không thể tái sử dụng.
Một lớp là tái sử dụng.
>> Và bạn biết không, cho bất cứ điều gì reasons-- triết học
Tôi đã không hoàn thành của tôi thought-- tôi sẽ nói
mà đoạn đầu tiên và Đoạn thứ hai là quan trọng.
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
và tải lại, không có ảnh hưởng chức năng nào.
Nhưng tôi đã thêm một số siêu dữ liệu vào tập tin,
loại một cái gì đó riêng biệt từ dữ liệu cốt lõi của tập tin,
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,
bất cứ điều gì đó quan trọng, tôi sẽ làm cho phông chữ màu, red--
hay đúng hơn là không phông chữ màu, chỉ màu.
Có mâu thuẫn trong CSS không may.
Và tải lại.
Bây giờ chú ý đầu tiên hai đoạn màu đỏ
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"
để hai đầu tiên của những điều đó.
>> Vì vậy, trong ID, bạn có khả năng xác định rất chính xác.
Với các lớp, bạn có thể dùng lại.
Nhưng trong cả hai trường hợp, thông báo loại nguyên tắc tốt-thiết kế
nơi tôi yếu tố ra tất cả các thẩm mỹ để tập styles.css của tôi.
Vì vậy, không có hỗn độn ở đây.
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.
Thay vào đó tôi có ngữ nghĩa, có ý nghĩa đặc trưng dữ liệu của tôi là,
đây là một số dữ liệu quan trọng.
Dưới đây là một số dữ liệu quan trọng hơn.
Hơn nữa, đây là "Đầu tiên" của dữ liệu quan trọng của tôi.
Vì vậy, HTML là tất cả về loại gắn thẻ, theo nghĩa đen, chữ
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
sẽ, mà bạn có thể bằng cách nào đó tận dụng sử dụng
các kỹ thuật khác như CSS theo cách này.
>> 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 đó.
Có rất nhiều cách khác, nhưng font tag-- mở khung "font" -
thực sự là một vài tuổi.
Và đây là vấn đề, quá, với chỉ dựa
trên resources-- trực tuyến họ có xu hướng bị lỗi thời.
Và quả thực, không được chấp, bởi vì thế giới nhận ra,
những gì hiện "font-size = 7" nghĩa là gì?
Nó không.
Và như vậy trong nhiều năm và đến này day-- một bên
lưu ý ở đây là nó thực sự là vô cùng đau đớn đôi khi vẫn còn
để phát triển trang web cho các web, bởi vì Microsoft
và Google và Mozilla và những người khác thường không đồng ý như thế nào
để giải thích một đặc điểm kỹ thuật như HTML.
>> Có một rulebook cho HTML thường nói những gì mỗi thẻ có nghĩa.
Nhưng đôi khi nó để lại cho ý thực hiện của,
Microsoft theo ý mình và Google.
Và như vậy bạn sẽ rất thường xuyên thấy trên một cái gì đó trang web
trông khác nhau trên một máy tính hơn là trên một máy Mac,
và đó thực sự bởi vì, vào cuối ngày,
họ đã không kiểm tra nó tốt trên cả hai nền tảng.
Nhưng nó cũng là vì lý, những người thông minh sẽ không đồng ý
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
cho web hay thiết kế thứ cho web
đ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.
Nhưng ngay cả khi đó là không hợp lý, phải không?
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,
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,
đặ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
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
kinh nghiệm.
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
hoặc 8, đặc biệt là phụ thuộc vào quốc gia mà họ đang đến từ.
>> Và như vậy rất thường được quan tâm là cái gì đó
như "thống kê trình duyệt web."
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à
nếu có một.
Vì vậy, ở đây bạn có thể nhìn thấy nơi các trình duyệt thực sự
là, theo tháng 12 năm 2015, Theo Chính phủ Hoa Kỳ.
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
hoặc cài đặt máy tính, tất nhiên, tiếp theo là Firefox,
sau đó Safari, sau đó Opera không làm cho bản đồ ở đây đối với một số lý do,
và sau đó những người khác.
Có lẽ nó thuộc khác.
Nhưng vấn đề hơn mà hợp-- chúng ta hãy xem Wikipedia cũng có
các phiên bản của trình duyệt version--
>> Hãy đi đến thống kê của trình duyệt.
IE.
Thậm chí đó là không đủ.
thống kê trình duyệt.
phiên bản của tôi.
Điều đó sẽ không đúng.
Hãy xem phiên bản.
thị phần trình duyệt.
Hãy xem nếu điều này đi lên.
ĐƯỢC.
Bây giờ điều này là nhận được hữu ích hơn một chút.
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.
Và, my god, nếu bạn look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
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
có ý nghĩa trong Về chức năng.
Và như vậy tại một số điểm, quản lý sản phẩm hoặc các kỹ sư
cần phải thực hiện một decision-- bạn biết gì, chỉ có 1% của thế giới
vẫn còn sử dụng IE 7.
Để địa ngục với họ.
Chúng tôi chỉ sẽ không hỗ trợ trình duyệt đó.
Và những gì nó có nghĩa là không hỗ trợ?
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,
hoặc nó có thể có nghĩa là định dạng là hoàn toàn tắt.
Hoặc bạn có thể phải làm mà gọi phán quyết tương tự
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.
Vì vậy, người dân chỉ cần có để nâng cấp.
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,
bởi vì như world-- như thế giới công nghệ muốn di chuyển về phía trước,
nó loại muốn kéo thế giới với nó vì vậy mà họ không
phải tiếp tục được tương thích ngược để họ
có thể cung cấp các tính năng mới và tốt.
Đâ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
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.
Và ngay cả các công ty như Apple sẽ sắp xếp của
buộc bạn gần như hoặc buộc bạn về các lực lượng thị trường
để 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.
Vì vậy, bạn bỏ lỡ mới nhất và tính năng lớn nhất,
vì nó tốn kém đối với họ như một công ty để duy trì tuổi, cho là
các phiên bản thấp hơn của phần mềm.
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.
>> Vì vậy, chúng ta hãy nhìn vào chỉ một vài điều cuối cùng ở đây.
Hãy gõ tắt thật nhanh một số những viên đạn khác, nếu tò mò.
Vì vậy, nếu bạn đang cố gắng, Ví dụ, vị trí
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,
nhưng có khác nhau cách làm điều này.
Hãy để tôi đi trước và eliminate-- đơn giản hóa này như sau.
Hãy để tôi chỉ trở lại của tôi đơn giản, đoạn văn đơn giản.
Hãy để tôi quay trở lại styles.css của tôi.
Và tôi chỉ cần đi để sử dụng simple-- mà bạn có thể đã thấy trên Google
hoặc thu hồi từ earlier-- văn bản sắp xếp đúng.
Và tải lại trang này.
Bây giờ tất cả mọi thứ dường như được canh phải,
như bạn có thể thấy trên các nguyên cần thiết ở đây.
>> 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"
và tải lại.
Bây giờ nó đẹp và vuông trên cả bên, đó là loại tốt đẹp.
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.
Vì vậy, chúng ta thấy rằng với văn bản màu đỏ của tôi.
Và bây giờ thêm nút cho một mẫu.
Vậy tại sao chúng ta không cố gắng làm chính xác này?
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.
Và chúng ta hãy nhìn vào cách Google thực sự hoạt động.
Nhưng tôi sẽ làm điều này.
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.
Tôi sẽ phải đi vào cài đặt Google,
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ì.
>> Vì vậy, bạn có thể thấy trong Google những days-- cho tôi quay trở lại
và biến này.
Vì vậy, nếu tôi bắt đầu tìm kiếm cho "mèo" như thế này,
nhận thấy rằng không chỉ làm Tôi có được tự động hoàn thành lên
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,
và đó là Google sử dụng một ngôn ngữ gọi là JavaScript cố gắng để được giúp đỡ.
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
về những gì thực sự xảy ra bên dưới mui xe ở đây.
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ì.
Và tôi sẽ phải bấm Save.
Và bây giờ tôi sẽ mở rằng thanh công cụ chẩn đoán rằng tôi
giữ mở dưới tab Network.
Vì vậy, hãy làm điều này.
Hãy tôi-- whoops-- di chuyển này xuống một chút.
Và hãy để tôi tìm kiếm cho "mèo".
>> Và bây giờ notice-- thực sự, đây là một cơ hội tốt
để thảo luận về một lúc.
Chú ý thời điểm tôi doanh-- ngăn chặn nó.
Dừng lại đi.
ĐƯỢC.
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.
A- T S. gì phía dưới của màn hình này, tab Mạng của tôi,
đề nghị đang diễn ra từng Hiện tôi gõ một bức thư?
Thật không may, con ếch rất mất tập trung ngày hôm nay hoặc các shamrock
hoặc bất cứ điều gì anh ta.
Điều gì đã xảy ra mỗi khi tôi đánh máy?
Và hãy để tôi xóa đệm và gõ lại lần nữa.
Lỗi chính vậy--.
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.
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
vậy, đến nay?
Đung A tìm kiếm?
DAVID J. Malan: Một tìm kiếm, hoặc quát hơn, một yêu cầu HTTP
từ trình duyệt của tôi đến máy chủ.
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ư?
>> Đung [IM LẶNG]
DAVID J. Malan: Vâng, nó đem lại cho tôi những kết quả tự động hoàn tất.
Giống như, nơi làm những kết quả tìm kiếm đến từ đâu?
Vâng, mỗi khi tôi gõ một thư, Google sẽ gửi hơn
và ngày càng nhiều của Những từ ngữ tôi đang gõ.
Tại sao?
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,
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.
Vì vậy, đây là nói theo nghĩa đen mỗi nhân vật mà bạn gõ vào Google
đang được gửi đi, cuối cùng trong số lượng lớn, nhưng cũng đôi khi một
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
dữ liệu, tất nhiên, trên web.
>> 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.
Và sau đó chúng tôi sẽ tận dụng này bản thân mình.
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.
Chú ý những điều sau đây.
Nó đã được gửi đến một hành trình khá dài URL-- https://www.google.com/search?
và sau đó một bó toàn bộ các công cụ.
Hãy xem này thực sự bây giờ trong tab trình duyệt.
Hãy thoát khỏi thanh công cụ ở đây.
Dưới đây là các trang kết quả tìm kiếm.
Và thông báo đây là URL.
Bây giờ, bạn có thể đoán những gì đang xảy ra ở đây một phần.
Vì vậy, trước hết, một định nghĩa.
Điều này dường như là điểm đến nơi mà các mẫu được gửi.
Vì vậy, khi tôi gõ vào chữ "mèo" và nhấn Enter,
dường như Google đã gửi nhập văn bản của tôi để URL này
mà tôi đã nêu bật có, dấu gạch chéo tìm kiếm.
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à,
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 đó
truyền từ duyệt đến máy chủ.
>> 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
và nó được gửi như chúng tôi đã được thảo luận, thông qua một get,
một trong những ảo phong bì, nội dung
đó envelope-- có, giữ bị nhồi thể chất
vào phong bì trong lớp ngày hôm nay, nhưng công nghệ
nó thực sự đặt trong URL.
Vì vậy, trong thực tế, hãy để tôi sàng lọc thông qua này.
Nơi nào bạn thấy đầu vào người sử dụng?
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?
Vâng, vì vậy "con mèo".
Đúng?
Vì vậy, hãy để tôi chưng cất này vào một cái gì đó đơn giản.
Tôi sẽ xóa tất cả mọi thứ về URL này mà tôi không hiểu,
và tôi chỉ đi để lại nó như này-- / tìm kiếm? q = mèo.
Chúng ta sẽ thấy trong đó q xuất phát từ trong một thời điểm,
nhưng mà cảm thấy như tối thiểu số lượng thông tin mà tôi cung cấp.
Và bây giờ tôi sẽ nhấn Enter.
Và nhận thấy nó vẫn hoạt động.
Chúng tôi vẫn lấy lại một bó toàn bộ của con mèo.
Vì vậy, Google là fancier hơn này những ngày này.
Đó là năm 2016, không phải năm 1999.
Vì vậy, có những thứ khác mà tôi trình duyệt được gửi đến máy chủ.
Nhưng điều này là tối thiểu tất cả những gì cần thiết.
>> Vì vậy những gì đang xảy ra?
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
và đóng các tab của tôi trước đó.
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.
Tôi sẽ đi trước và tạo tập tin mới.
Và tôi sẽ lưu nó như google.html.
Và tôi sẽ rất quickly-- Tôi sẽ ăn cắp, trên thực tế,
một số văn bản này chỉ để tiết kiệm thời gian.
Tôi sẽ dán này tại đây.
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.
Chúng ta sẽ gọi đây là "My Google."
Và tôi sẽ thoát khỏi của tất cả mọi thứ trong cơ thể.
Và tôi sẽ làm như sau.
Hãy để tôi phóng to.
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
đề 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.
Vì vậy google.com/search.
Và phương pháp tôi muốn sử dụng có thể là một trong hai điều.
Nó có thể là bạn "được", như chúng ta giữ thảo luận, hoặc nó có thể là "bài".
Để bây giờ, cơ bản Sự khác biệt là, nếu bạn sử dụng "có được"
tất cả các thông tin mà người sử dụng cung cấp được gửi trong URL.
>> Đ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,
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
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?
Những loại hình thức làm bạn--
Đung [IM LẶNG]
DAVID J. Malan: Yeah, giống như những gì?
Đung Passwords.
DAVID J. Malan: Vâng, bạn đăng nhập nhập vào Facebook hoặc một số trang web.
Đó là người dùng nhập vào từ một hình thức, một hộp văn bản,
nhưng có thể bạn không muốn nó hiển thị trong URL của trình duyệt.
Tại sao?
Ý tôi là, có thể có một số tác động an ninh trên mạng,
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,
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?
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.
Điều đó không cảm thấy giống như thiết kế tốt.
Hoặc thậm chí nhiều hơn về mặt kỹ thuật, giả sử bạn đang cố gắng
để tải ảnh lên Flickr hoặc Facebook hoặc wherever--
đó 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
Tôi nhồi nhét một hình ảnh vào thanh URL?
Bạn loại loại không thể.
Bạn có thể loại.
Nhưng, thực sự, tôi cứng ép để tưởng tượng làm điều đó.
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,
và rằng phương pháp khác được gọi là "bài".
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.
Nó chỉ là đặt tất cả các sử dụng đầu vào URL.
>> Vì vậy, đây là hình thức tôi là tạo.
Tôi muốn một đầu vào.
Và bạn biết những gì?
Tôi sẽ lấy một đoán ở đây.
Tôi sẽ gọi lại tôi đầu vào "q" cho "truy vấn".
Và tôi nghĩ rằng đây là một trong những thiết kế ban đầu, có lẽ, từ năm 1999.
Và sau đó các loại đầu vào này chỉ sẽ là "văn bản".
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
thấy, các loại trong số đó là "submit".
Và điều này sẽ cho tôi một nút đặc biệt.
Và đó là nó.
>> Vì vậy, hãy để tôi đi trước và lưu tập tin này.
Tôi sẽ quay trở lại của tôi trình duyệt và đi đến google.html.
Đi vào.
Và nó loại thưa thớt để nói rằng ít nhất.
Nhưng hãy để tôi đi trước và tìm kiếm cho "mèo".
Và nhận thấy tôi hiện đang tại URL Cloud9 này.
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?
>> Đung Google.
>> DAVID J. Malan: Google.
Vì vậy, hãy nhấn Submit.
Và thực sự tôi đã tái triển khai Google.
Đúng?
Đó là đơn giản.
Nó nhẹ hơn.
Ý 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 đó.
Và bạn biết những gì?
Tôi sẽ thêm gia vị này lên một chút.
Tôi không đề cập đến trước đây.
Có thẻ như H1, cho Heading 1, tiêu đề quan trọng nhất trong một trang.
"My Google," Tôi sẽ gọi này.
Hãy để tôi tải lại.
Nó tìm kiếm một chút tốt hơn rồi.
Và, trên thực tế, bạn biết những gì?
Tôi đã already-- tôi nói dối.
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.
Và cơ thể tôi có được, hãy nói, trung tâm text-align.
Nó nhìn giống như Google đã.
>> Tôi cần một ngắt dòng, mặc dù, cho rằng nút Gửi.
Và hóa ra, bạn có thể sử dụng đoạn văn,
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.
Và nếu tôi tải lại này, bây giờ nó đi đó.
Đó là một chút xấu xí, vì vậy tôi có thể làm nhiều ngắt dòng,
nhưng chúng ta không nên quá tham lam ở đây.
Vì vậy bây giờ chúng ta hãy xem nếu nó hoạt động cho "con chó".
Nó dường như làm việc cho "con chó", là tốt.
Vì vậy, các takeaway hấp dẫn là những gì ở đây?
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ẻ,
như thẻ form trong thẻ đầu vào.
Nhưng về cơ bản nhiều hơn là, tất cả chúng ta đang làm
đang tận dụng sự hiểu biết của chúng tôi HTTP và thực tế
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,
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ủ
bằng cách làm cho một hình thức HTML và biết mà máy chủ hiểu HTTP,
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,
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.
>> 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,
và tôi sẽ make-- Tôi sẽ thêm mã này vào các slide.
Vì vậy, nếu bạn muốn sửa lại, bạn chắc chắn có thể mang nó từ đó.
Nhưng tôi sẽ đi trước và làm một điều.
Tôi sẽ đi trước và mở page-- trỏ của tôi
Trang chào tôi như trước, mà có rất nhiều văn bản faux-Latinh này,
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.
Nhưng hãy để tôi đi trước và làm điều này.
Tôi sẽ đi vào Cloud9.
Và bạn không cần phải thực hiện bước này.
Tôi sẽ chỉ làm điều đó bản thân mình.
Tôi sẽ bấm Share.
Và đây là một tính năng chỉ của Cloud9, theo đó
Tôi có thể làm cho môi trường tôi công khai.
>> Và chỉ vì lợi ích của trình diễn, hãy để tôi làm điều này.
Tôi sẽ làm cho công ứng dụng của tôi.
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,
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ờ
hoặc xem video sau này trên Internet có thể nhìn thấy những gì tôi thấy.
Nhưng đó là OK.
Tôi sẽ nói "Done".
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.
Đ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,
đi đến URL này, và hy vọng bạn sẽ thấy dòng chữ Latin của tôi.
Và rõ ràng, đó là chạy không phải trên máy tính xách tay của tôi.
Đó là trong những đám mây.
Đó 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
để bất cứ ai trên internet có thể truy cập trang chủ Latin của tôi.
>> Tới cùng một URL trên điện thoại của bạn, nếu bạn có thể.
Nếu nó sẽ chi phí bạn, mặc dù, bạn chỉ có thể nhìn qua vai.
Đung [IM LẶNG]
DAVID J. Malan: Tôi xin lỗi?
Đung [IM LẶNG]
DAVID J. Malan: Chỉ từ tiếng Latin.
Đó là tất cả.
Nhưng đó là những gì bạn sẽ thấy.
>> Đung Yeah.
DAVID J. Malan: Yeah.
Yeah.
ĐƯỢC.
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?
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.
Đó là still-- tôi là, nó là không đọc được vì tiếng Latinh.
Nhưng nó cũng có thể đọc được lý do gì khác?
Giống như, những gì bạn displeases về điều này?
Đung Nó nhỏ.
DAVID J. Malan: Đó là siêu, siêu nhỏ.
Vậy làm thế nào chúng ta có thể khắc phục điều này?
Đó là siêu, siêu nhỏ trên điện thoại của Victoria
và, nếu bạn đã kéo nó lên bản thân, có lẽ
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.
đó là những gì?
Bạn chỉ có thể véo và zoom, mà là hoàn toàn khả thi,
nhưng sau đó bạn chỉ nhìn thấy một vài từ cùng một lúc.
Vì vậy, chờ một phút.
Tôi biết làm thế nào để sửa lỗi này.
Đúng?
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.
Nhưng các tác dụng phụ của điều đó, Tất nhiên, sẽ là bây giờ,
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.
Và do đó, nó sẽ loại được tốt đẹp để phân biệt giữa các thiết bị,
và nó quay ra có nhiều cách để làm điều đó.
Có một số cách khác nhau, trên thực tế,
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,
bạn về cơ bản có thể truy vấn trình duyệt và nói,
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.
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.
>> Bạn thậm chí có thể fancier vẫn.
Nếu bạn đã từng đến thăm một trang web, trên một máy tính để bàn,
có một menu lớn có thể ra vào bên, và sau đó tất cả các nội dung
là bên cạnh đó menu-- đó là loại một mô hình phổ biến.
Menu trên bên trái, nội dung bên phải, hoặc ngược lại.
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.
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
sụp đổ, và bạn phải bấm vào một nút để xem nó,
hoặc các trang web sẽ đưa thực đơn ở trên nó và đưa nội dung bên dưới nó.
Và bạn có thể thực hiện các thứ theo nhiều cách, quá.
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
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
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,
hoặc nếu không sử dụng bố trí mặc định này lớn hơn.
>> Bây giờ, sử dụng những gì Kỹ thuật cơ bản ngày nay
các kỹ sư có thể sử dụng để biết liệu nó
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?
Trong đó làm họ nhận được thông tin đó?
>> Đung tiêu đề?
>> DAVID J. Malan: Vâng, các tiêu đề HTTP.
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ọ
bao gồm, bên trong đó ảo phong bì, một bó toàn bộ
các tiêu đề HTTP, một trong số đó là trình duyệt và hệ điều hành
thậm chí, nếu bạn quan tâm đến mà mức độ chi tiết.
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ỉ
đơn giản hóa đó, và bạn chỉ có thể yêu cầu trong lập trình code-- PHP, Java, C ++,
whatever-- gì điện thoại là này-- thiết bị gì là người sử dụng này sử dụng?
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.
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.
Nhưng bạn thậm chí không cần phía máy chủ phức tạp.
Bạn có thể làm thậm chí đơn giản của sự vật.
>> Tôi sẽ làm điều này.
Tôi sẽ đi trước vào môi trường Cloud9 của tôi,
và tôi sẽ để thêm một thẻ mà bạn đã thấy trong Google trước đây.
Nó được gọi là thẻ meta.
Và tôi không bao giờ nhớ này, vì vậy Tôi sẽ ghi lại nó ở đây.
meta name = "viewport" và sau đó content = "width = chiều rộng thiết bị, intital
quy mô = 1 "và đó là nó.
>> Vì vậy, nó cũng có thể là giống như một câu thần chú ma thuật.
Đó 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,
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
định nghĩa nhất của trang.
Và đây chỉ là nói cho trình duyệt, bạn biết những gì?
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ị.
Nói cách khác, đừng cho rằng bạn có loại không gian không giới hạn.
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.
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.
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
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?
Vâng, là mà--
>> Đung [IM LẶNG]
DAVID J. Malan: Có.
ĐƯỢC.
Vì vậy, cho là dễ đọc hơn bây giờ?
Vẫn còn nhỏ, để cho công bằng, nhưng không quá nhỏ bé để có thể quản lý.
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ủ,
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
được thêm vào phía khách hàng environments--
JavaScript, như chúng ta sẽ thảo luận ngày mai, CSS, và HTML-- vậy
rằng tất cả các truy vấn có thể được thực hiện trên máy khách
để làm phiền máy chủ ít hơn rất nhiều và không
phải theo kịp với, cho Ví dụ, sự tấn công liên tục
của hệ điều hành mới phiên bản, phiên bản trình duyệt mới.
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,
và sau đó làm cho hơi hợp lý các quyết định dựa trên đó.
Nhưng chúng ta sẽ thấy nhiều cơ hội hơn các quyết định hợp lý
ngày mai trong bối cảnh của một ngôn ngữ lập trình.
>> Vì vậy, bất kỳ câu hỏi, sau đó, về phát triển web?
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
rất thẩm mỹ, nếu bạn muốn.
Không có quyết định trong mã mà chúng tôi đã viết,
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.
Nhưng ngày mai chúng ta sẽ mất một cái nhìn nhanh chóng, cuối cùng,
tại JavaScript, đó là một chương trình thực tế
ngôn ngữ cho phép chúng ta làm nhiều hơn một chút.
>> Bất kỳ câu hỏi?
Vâng, hãy để tôi đề xuất hai cơ hội tùy chọn cho bài tập về nhà.
Một hợp-- những Cloud9 tài khoản sẽ không hết hạn.
Bạn đang chào đón để sử dụng họ để tinker với.
Đó là mức phí của dịch vụ.
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,
đ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õ.
Vì vậy, có thể chỉ cần xem xét không lúng túng chính mình
nếu bạn đang đặt web đầu tiên của bạn trang ra có công khai vô tình,
nhưng không có ai sẽ biết để tìm ở đó anyway.
>> Và two-- cho tôi quăng lên URL này là tốt,
đặ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,
không chắc chắn những gì tất cả các công cụ này có nghĩa.
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ủ
và cũng để cười trong khi làm như vậy, cũng có
rất nhiều societally thú vị và thảo luận an toàn liên quan
trong đó từ John Oliver, mặc dù là một diễn viên hài.
>> Nhưng nếu không có những câu hỏi khác, đó đưa chúng ta đến dự tiệc.
Vì vậy, tại sao tôi không bật nhạc.
Có nên uống và đồ ăn nhẹ bên ngoài.
Tôi đang hạnh phúc để hòa nhập cho như miễn là mọi người sẽ thích,
trả lời các câu hỏi nhiều hơn một ngày-một.
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,
và chúng ta sẽ gặp lại buổi sáng ngày mai để biết thêm một chút.
Được rồi, cảm ơn.