David J. MALAN: W porządku. Jesteśmy z powrotem. Tak więc, celem tej ostatniej sesji jest wprowadzenie jeszcze kilka pojęć ale także dać każdemu szansę do rodzaju rozciągnąć palcami i faktycznie coś zrobić trochę hands-on. Celem jest, aby nie skręcić nam wszystkim do programistów za pomocą dowolnych środków, ale tak naprawdę dać smak niektóre z podstawowych konstrukcji, co przechodzi do programowania stron internetowych i sieci dzisiaj rozwój, tak statyczna strona things-- brak logiki, bez programowania język, po prostu zawartość statyczną. A to daje nam możliwość rzeczywiście zobaczyć co to jest serwer WWW, Zobacz, co plik HTML, zobacz co HTTP jest faktycznie obsługujących. Zanim jednak zabierzesz się, każdy retrospektywę pytania o chmurze lub bezpieczeństwa albo coś pomiędzy? Nie? No dobrze, dobrze, niech to zrobić, tak na wszelki wypadek Proces rejestracji w coś trwa kilka minut. Będziemy niech to zrobić w tle. Śmiało, jeśli można, do tego adresu URL here-- c9.io. Jest to jedna trzecia firm serwis-- platforma jako usługa, jeśli will-- że ma zamiar zaprosić Państwa podpisać się na konto, i to się dzieje, aby dać każdemu z was konto w tak zwanej chmurze na infrastrukturę cudzej, firma o nazwie Cloud9. Ale to, co miłe, o jest to, że dają ci przybliżeniem Rzeczywisty rozwój w świecie rzeczywistym środowiska, chociaż w Chmura w przeglądarce internetowej, i użyjemy tego, aby faktycznie trochę poeksperymentować dziś. A potem iść dalej i po prostu poruszać Twoja droga do procesu rejestracji Jeśli mógłbyś. Tak więc stało się to wykorzystać w klasie Uczę dla wszystkich naszych uczniów, zarówno na terenie kampusu i wyłącza się, a to otrzymuje co historycznie było inaczej oprogramowanie do pobrania. Więc czego uzyskanie dostępu do jest jedną z tych maszyn wirtualnych w istocie, że opisałem wcześniej. Więc pewnie ta firma Cloud9 czynsze z trzeciego party-- rzeczywiście w tym przypadku, Google-- całość pęczek maszyn wirtualnych że jakoś się posiekać iluzja poszczególnych serwerów że każdy z nas ma pełną kontrolę nad. To nie jest dość dokładne, aby powiedzieć, że są maszyny wirtualne, chociaż, ponieważ to, co Cloud9 nie używa Jest to nieco nowsze technologie nazywa konteneryzacja. I pozwól mi chwycić tego obrazu tu malować ten obraz. 

Kontener jest, jeżeli pamiętacie obraz od początku, trochę lżejszy wagę niż maszynie wirtualnej. W rzeczywistości, podczas gdy w ubiegłym czas rozmawialiśmy o nie bycie operacyjnego System i hypervisor a następnie system operacyjny gościa, gość System operacyjny gościa operacyjnego System, na górze fizycznego sprzętu, różnica z tym nowsze Technologia, konteneryzacja, jest to, że wszystkie one w jakiś sposób podzielić ten sam system operacyjny. Ale wciąż tworzyć iluzja wszystkich konieczności jego lub jej wyłącznym prawa administracyjne i pliki serwera. Ale nie mniej programy w między użytkownikiem a sprzętem. Wynik, który jest w Teoria, większa wydajność, ponieważ używasz lub marnować mniej zasobów w tym tak zwane warstwy wirtualizacji. Tak to się nazywa konteneryzacja przez naturę za pomocą technologii zwanej dokowanym, która jest bardzo wchodzenia w jego rękę. I to jest coś, co Inżynierowie firmy Może trochę jakby zacząć mówić Wkrótce o ile nie zostało to wykonane, choć z pewnością nie istnieje powód, aby wskoczyć na wszelkie bandwagons. 

Więc z tym powiedział, to co pewnie teraz zobaczyć Jest to ekran, który wygląda trochę jak ten. OK. I po prostu zadzwoń do mnie na razie nie. A jeśli SO- Przyjdę na ile nie. Śmiało i kliknij ten wielki oraz stworzyć miejsce pracy, i zobaczysz ekran podobny do tego. Możesz zadzwonić do obszaru roboczego wymienić wszystko, co chcesz teraz. I tak naprawdę dla uproszczenia, przejdź and-- dobrze, że niektórzy z was już obszarów roboczych. Można to nazwać cokolwiek want-- działalności gospodarczej, Harvard, czwartek, cokolwiek chcesz. Nie musisz opis. Możesz zostawić go prywatny, chyba że już kilka obszarów roboczych. Jeśli jesteś zmuszony do ich upublicznienie, to dobrze dla dzisiejszych potrzeb. Tutaj też jest jednym z upsells. Otrzymasz jeden prywatny obszar roboczy przez zaniedbanie. Ale jeśli chcesz więcej, trzeba zapłacić więcej. W przeciwnym razie, zmuszają cię do opublikowania pracy. Ale to dobrze, bo one również target to w społeczności open source aby zachęcić ludzi do faktycznie współpracują. 

I ostatnia rzecz, która jest ważna, jednak to, że po wybraniu nazwy i po wybraniu prywatnego lub publicznego, kliknij ikonę HTML5, duży pomarańczowy drugi od lewej, a następnie kliknij przycisk Utwórz obszar roboczy. I to będzie prawdopodobnie zająć minutę lub tak, ale będziesz wtedy mieć Środowisko, po zrobić, który wygląda przypomina co mam na ekranie teraz tutaj. Ale znowu, to może potrwać kilka minut lub więcej, aby dostać się do tego ekranu po kliknięciu Tworzenie obszaru roboczego. Ale tylko flaga mnie, gdybyś mnie lubić spojrzeć na cokolwiek lub poradzić. W porządku. Więc mam zamiar tle tego teraz. Zadzwoń do mnie, jeśli wydaje się, masz jakieś problemy techniczne. Ale znowu, to może potrwać Trochę na to otworzyć. I chodźmy naprzód i rozmawiać o tym, co Oznacza to faktycznie zrobić stronę internetową, HTML, co jest i jak to wszystko teraz łączy ze sobą tak zaczynamy faktycznie wykorzystane niektóre techniki. Tak więc okazuje się, że mogę pójść na moim małym Mac tutaj otwórz prosty program o nazwie TextEdit lub Windows mogłem otwarta coś o nazwie Notepad.exe. I może po prostu coś zrobić jak this-- "Hello, World". A potem mogę zapisać to jako hello.txt Więc nie ma magii. To nie ma nic wspólnego z sieci programowanie, nic wspólnego z HTML. Wystarczy stworzenia prostego pliku tekstowego. Ale okazuje się, że w internecie Strona jest dosłownie tylko to. Jest to prosty plik tekstowy zawierający tekst które można wpisać na klawiaturze, ale zazwyczaj, ale nie zawsze kończy się nie .txt ale .html lub .htm. I nie tylko wpisać słowa w pliku. Tak naprawdę trzeba używać rzeczy zwanych tagi lub, bardziej ogólnie, coś zwany język znaczników. 

Więc jadę bardzo szybko wpisać a następnie wyjaśnić, co następuje. Idę pierwszy wpisz to, co mówi, hej, przeglądarka, oto Strona internetowa napisana w HTML. I te dwie rzeczy razem powiedzieć, hej, Przeglądarka następujące rzeczywiście HTML. Hej, przeglądarka, oto nadchodzi Głowa i górna część mojej stronie. Hej, przeglądarka, wewnątrz góry moja strona, umieść tytuł, który brzmi: "cześć, świat." Hej, przeglądarka, po szef mojego Strona, oto ciało moje strony. I hej, przeglądarka, ciało moje strona powinna również powiedzieć "Hello World". Więc jakie są najistotniejsze szczegóły tutaj? To, co jest na ogół zwana deklaracja typu doc, i, szczerze mówiąc, to trochę trudno zapamiętać to na początku. Po prostu rodzaj skopiować i wkleić go. Jest to formalna droga powiedzieć, hej, przeglądarka, Używam wersji HTML 5, który wyszedł dość niedawno. To magiczne zaklęcia, że ​​niektóre ludzie o ubogim sensie designu postanowił umieścić u samej górze pliku. Mimo, że jest to Trochę Arcane, to wszystko Hej, to means-- przeglądarkę tutaj pochodzi z wersji 5 HTML. 

Reszta to było z nami od jakiegoś czasu, historycznie, ale to już się rozwija, i to Prawdopodobnie zostało już trochę prostsze. Zwróć uwagę na kilka cech co mam podświetlone. Tam te rzeczy z kątowym brackets-- lewy wspornik a prawy nawias. I tu zauważyć symetrię. I symetrii, to znaczy, tak jak ja mieć ten początkowy znacznik tutaj lub otwartą tag jeśli chcesz, tu mam blisko tag lub znacznik końcowy to różnią się tylko, o ile ma to ciąć na początku słowa HTML. A może myślisz to jak ja od niechcenia proponując wcześniej, hej, Przeglądarka, oto niektóre HTML. I odwrotnie, hej, przeglądarka, to to na początku i na końcu HTML--. 

Tymczasem hej, przeglądarka, tutaj przychodzi szef mojej stronie. Hej, przeglądarka, to wszystko na głowie. Hej, przeglądarka, tu jest ciało mojej stronie. Hej, przeglądarka, to jest to dla organizmu. A wewnątrz tego pewne arbitralne tekst teraz. A wewnątrz głowicy tymczasem jest jakaś arbitralna, ale oznaczone, by tak rzec, tekst, który mówi, tytuł mojej stronie będzie "Hello, world". Teraz, teraz, można Zakładamy, że przeglądarki mają only-- czy raczej stron internetowych mają tylko dwa parts-- głowy i ciała. A szef jest na ogół po prostu jak pasek menu, rzeczy naprawdę tylko na samej górze. A ciało jest wnętrzności strony wszystko w tym wielkim prostokąta który wypełnia cały ekran. Więc mam zamiar iść do przodu i to zrobić. Mam zamiar iść do przodu i kliknij przycisk Zapisz, Zapisz plik. I mam zamiar zapisać to jako hello.html, a ja po prostu się umieścić go na pulpicie. I zamierzam iść naprzód i kliknij Zapisz. I notice-- na mój Mac najmniej krzyczy na mnie. Czy na pewno chcesz to zrobić? A ja powiem tak, używać HTML. Wiem, że lepiej w tym przypadku. A teraz mam zamiar iść do mojego pulpitu gdzie mam ten plik nagle. A ja zamierzam dwukrotnie jego ikonę. I można zauważyć, że poprzez Domyślnie Chrome otworzył. To dlatego, że to moja domyślna przeglądarka. A to po prostu mówi: "Hello, world". Ale to mówi "cześć, świat "w dwóch miejscach. Zauważ, górnym rogu. Dość trudno przegapić. To duże i pogrubione. A gdzie indziej nie wydaje się powiedzieć: "Witaj, świecie"? 

PUBLICZNOŚCI: Zakładka. 

David J. MALAN: Tak, sama karta. Kiedy więc powiedziałam szef Strona jest wszystko się top-- i rzeczywiście to tytuł. To tylko w zakładce tutaj. I mogę wyciągnąć tę kartę się tak, aby nie pomylić. To jest tylko jedna zakładka teraz i rzeczywiście widzimy "Hello, world" tu i "Hello, world" na dole. Więc całkiem proste. Ale jest to również dość prosta. I rzeczywiście, ja powiększeniu. Mogę zmienić rozmiar czcionki po prostu powiększać za dostępność. Ale niech teraz coś zrobić trochę bardziej interesująca. 

Idę go-- okrzyki, niech mi wrócić do mojego pliku tekstowego. Wracam do mojego plik tekstowy, a ja jadę to zmienić i powiedzieć "Hello, Disney World." Zapisać. I wrócić do mojego Przeglądarka i kliknij przycisk Odśwież. A teraz, oczywiście, mówi "Disney World". A ja zamierzam sztucznie powiększyć W tak łatwiej zobaczyć. Więc teraz, niestety, I niby chcą to-- właściwie, to funkcja Mac. Chcę, aby kliknąć na Disney World i iść gdzieś jak disney.com, ale to nie działa. Dlatego podstawowym założeniem wstęgi jest linki, linki, które idź gdzie indziej. Więc jak mam to zrobić? Cóż, mogę tylko powiedzieć, "Hello, http://www.disney.com". Zapisz tego. Przeładować. Ale to też nie kliknąć. I co tu miła, chociaż to jeszcze nie działa, jest to, że wydaje się, że Przeglądarka nie tylko dosłownie co mogę powiedzieć to zrobić. Więc jeśli wystarczy wpisać adres URL w ten sposób, to po prostu będzie mi pokazać URL. Muszę używać znaczników i znaczników Język rzeczywiście powiedzieć przeglądarka zrobić jeszcze więcej. Więc mam zamiar iść do przodu i usuwać tym przez chwilę. A ja powiem, hej, Przeglądarka, start kotwicę tutaj link tak powiem. A hiper-odniesienia, miejsce przeznaczenia tej kotwicy, powinny mieć ten adres URL. I zauważył moje cytaty. Mógłbym użyć apostrofów też ale trzeba być konsekwentnym, a ja na ogół wystarczy użyć cudzysłowy keep it simple. Zauważ, mam zamiar zamknąć znacznik. I to tutaj jadę powiedzieć: "Disney World". A teraz muszę trochę symmetry-- otwarta wspornikach / a, zamknięty uchwyt. 

Więc co ja wprowadzone? Mieliśmy już kilka znaczników. HTML, Głowa, tytuł, treść są wszystkie znaczniki, by tak rzec, z otwartych i zamkniętych odpowiedników. Ale informacja, to jest rodzaj fundamentalnie różne. To, co będziemy nazywać HTML atrybut. A jest atrybutem zaledwie parę klucz-wartość. Jest to wspólny rzeczą parę klucz-wartość komputera science--. To coś w rodzaju narzędzia handlu. Kluczowym a wartość. Słowo, a następnie kilka inne słowo lub słowa. I w tym przypadku kluczem jest href, a wartością jest to, że pełny adres URL. A co robi jest atrybutem go wpływ na zachowanie etykiety. I w tym przypadku, musimy wpływać zachowaniem znacznika podrzędną ponieważ musimy zakotwiczyć ten link gdzieś. A jak to zrobić to za pomocą atrybutu. 

Więc mam zamiar iść do przodu i zapisz plik teraz. Wróć do mojej przeglądarce i przeładować. I voila, mamy teraz Początki uzasadnionych stronie internetowej. Super-proste, ale jeśli najedź this-- Zawiadomienie w lewym dolnym rogu, to super mały. Ale ty patrz www.disney.com. A jeśli kliknę to rzeczywiście ta zawozi mnie do disney.com. Teraz, ciekawa rzecz jest to, że nie jest best-- najbardziej zbywalnego URL, ale to dobrze, ponieważ ten plik nie istnieje w sieci World Wide Web. Istnieje jako lokalnego pliku w pozornie Moi użytkownicy directory-- / jharvard-- przez John Harvard-- / pulpitu. Ale ma URL. To właśnie dzieje się lokalne. Niestety, żaden z was może odwiedzić tego, bo po wpisaniu tego adresu, chcesz opowiadać swoją przeglądarkę, poszukaj pliku o nazwie hello.html na dysku twardym. I, oczywiście, o ile nie masz śledzi razem ręcznie, to nie będzie tam istnieć. 

Tak to jest w porządku. Nadal potrzebny jest sposób, w ostatecznym rozrachunku, aby uzyskać ten plik w internecie, ale niech odciąć kilka Implikacje zabezpieczeń, co właśnie widział i powiązać go z powrotem do wcześniejszego Dyskusja z tej rano. Okazuje się, że jeśli Przeglądarka dosłownie robi co mogę powiedzieć to zrobić, i wydaje się, być tak, że znacznik jest kotwica pod wpływem wartości Ten atrybut nazywa href ale ta wyświetla Tekst, byłoby to wydawać sugerować, że mogę umieścić adres URL w obu miejscach, a następnie załaduj a teraz patrz URL i przejść do adresu URL. Zauważ, gdybym najechaniu na dolnej lewej Ja rzeczywiście będzie jeszcze disney.com. 

Więc jeśli kiedykolwiek byłeś phished-- P-H-l-H-S-E-D-- z jednym z tych fałszywych e-maili od jak PayPal banku, masz prawdopodobnie zdobyć linki wewnątrz wiadomości e-mail, który czytasz, że Informuje, kliknij tutaj, aby przejść potwierdzić hasło lub potwierdź swoją datę urodzenia społecznie lub społeczną albo coś inżynierii do ujawnienia Informacja. Cóż, mogę rodzaj podjąć Zaletą tego nie mogłem? Mogę coś powiedzieć podobnych, www.paypal.com. I zamiast Disney.com, ja może udać się do, jak, badguy.com. Przeładować. I jak łatwo jest oszukać, zwłaszcza czytnik nietechniczne lub pobieżnie czyta Czytelnik nie kliknąć link jak to, które, jeśli kliknę it-- I rzeczywiście nie chcą iść badguy.com. Nie wiem, co to właściwie jest. Więc paypal.com, zawiadomienia, jest to co mówi to będzie, Ale oczywiście, jeśli spojrzeć w dół super-niskie, to trochę rozmazane, ale mówi badguy.com. To tylko powiedzieć teraz że będę złym miejscu. A kiedy powiedziałem wcześniej, że banki Naprawdę nie powinny zachęcać lub pociągiem użytkowników do kliknięcia łącza, ten Jest tylko jeden przejaw niego. A to takie proste. Teraz jesteś przeciwnikiem, jeśli zrobić coś takiego i próbują oszukać użytkownika na odwiedzenie witryny. Na razie jednak będziemy trzymać rzeczy ładne i czyste. Mamy zamiar iść do przodu i do tyłu te zmiany. Odśwież stronę. I wrócić do disney.com. 

Zobaczmy, czy nie możemy drażnić Pomimo tego trochę więcej. Więc "cześć, Disney World." Idę powiedzieć tutaj. Może mam zamiar zrobić trochę miejsca. "Mamy nadzieję, że Państwa pobyt!" Zapisać. Przeładować. To nie tak, że nie jest rea-- co zamierzałem, prawda? To znaczy, jeśli mam traktując mój tekst pliku, podobnie jak w edytorze tekstu, co miałeś nadzieję, że zdarzy się tutaj? Tak, czuję się tam powinna być przerwa linia tutaj więc czuje buggy w jakiś sposób. Ale to faktycznie celowe, ponieważ tak jak poprzednio, przeglądarka będzie się tylko Rób to, co powiedzieć to zrobić. Nie powiedziałem jej przełamać linie. Nie powiedziałem jej, aby przejść w dół, nawet choć intuicyjnie czuję, jak ja. Tak więc okazuje się, musimy trochę więcej znaczników, i mam zamiar to naprawić w następujący sposób. Będę przedmowa ta pierwsza cześć z tego, co się nazywa tag pkt. A potem mam zamiar iść do przodu i owinąć to inne zdanie w innym znaczniku akapitu, chociaż oni są super krótkie akapity. Teraz mam zamiar zapisać. Przeładować. A teraz mamy, że przestrzeń, a my rodzaj mają semantyki dwa oddzielne akapity. 

To wszystko dobrze i dobre, ale to byłoby byłoby miło, aby dodać zdjęcie do tej strony, więc mam zamiar iść szukać Myszka Miki w Google Images. I tylko dla zabawy, jestem zamiar pobrać ten obraz. Mam zamiar iść do przodu i teraz chwycić URL tego obrazu, choć nie jest inaczej sposoby, aby to zrobić. Na razie jestem po prostu skopiować adres URL. Mam zamiar wrócić do mojego tekstu Plik, a ja zamierzam tu powiedzieć, img src = cytat cytatu że adres URL, super-długie. I wtedy pojęcie obraz jest nieco inna. Tam naprawdę nie ma pojęcia rozruchu obraz, a kończąc obraz, jak początek tag znacznik końcowy. Więc to jest trochę dziwne semantycznie mi to zrobić, mieć tag zbliżenie obrazu. To nie jest błędna. Jest to całkowicie poprawne, i jest to zalecane, ale tam zapis skrótowy. Mogę rodzaj jednocześnie otworzyć i zamknąć ten sam znacznik, i że uczyni przeglądarka szczęśliwy. Więc to jest tylko trochę bardziej zwięzłe rzeczy że tak naprawdę nie koncepcyjnie sensu początku i na końcu. po prostu tam są, czy nie są. 

Więc mam zamiar zapisać to i wrócić do mojego "Hello World", strony i przeładować. I to jest trochę spod kontroli, dlatego, że obraz jest rzeczywiście trochę duże, ale to jest OK. Mógłbym zmienić jego rozmiar w programie. Albo wiesz co. Wystarczy wykazać, że jestem będzie rzeczywiście powiedzieć że szerokość tego co należy tylko 200 pikseli, 200 punktów. Pozwólcie mi iść do przodu i zapisać i odświeżyć, a teraz strona wygląda trochę bardziej uzasadnione. Należy jednak zauważyć, wzór. Dobrze, ja rodzaj nauczył was wszystkich HTML w pewnym sensie, przynajmniej koncepcyjnie, bo wszystko to jest HTML Znaczniki te tags-- otwarte, zamknięte znaczniki, i atrybutów, które modyfikować swoje zachowanie. I, oczywiście, każdy Znacznik może mieć zero lub jeden albo dwa lub większą liczbę atrybutów, a każdy z która robi coś trochę innego. Teraz, jak pan wie, co istnieje? Po prostu słuchać kogoś jakby mi powiedzieć, co istnieje, lub po prostu Google od jakiegoś tutoriala HTML, a tak naprawdę jest to proste. 

Rzeczywiście, kiedy byłem w trakcie studiów lat temu i dowiedział HTML, jeden z moich nauczania matematyki asystenci właśnie spędziliśmy trochę czasu mi korepetycje jak dla pół godziny, godzinę, a potem byłem na mojej drodze. Byłem w drodze do dokonywania najbardziej ohydne witryn kiedykolwiek, która, jak widać, nie mam Naprawdę postępowała dalej. Ale chodzi o to, że po zrozumieć te proste ideas-- jeśli Arcane text-- ale te proste idee począwszy myśl i zamykania myśli, utrzymując Wszystko ładnie zrównoważone, poszukuje coś, modyfikując Zachowanie tego znacznika, to naprawdę wszystko nie ma do niego. I rzeczywiście, jeśli teraz przejść do coś jak google.com-- właściwie chodźmy miejsce trochę bardziej reasonable-- stanford.edu. I mam zamiar przejść do widoku, Developer View Source. Jest brzydka, ale notice-- a ja powiększyć powiadomienia niektóre rzeczy, które już znają. Jest to tutaj, który jest przeglądarką. Nadchodzi HTML5. Jest HTML. Najwyraźniej, nie ma atrybut, że nie używać określająca Język strony a to może pomóc w automatycznym tłumaczenie i takie tam. Oto szef stronie. Oto tytuł strony Stanford. Jest tag ja nie mówić o yet-- Meta tag. To tylko rodzaj Informacje tła. Pomaga SEO, lub optymalizacja wyszukiwarki, lub wyników wyszukiwania Google lub podobne. Ale jeśli mamy zachować się zachować patrząc, oto tag ciała. I tam pęki inne Tagi nie rozmawialiśmy o jeszcze. Ale jest jedna strefa dla Podział strony. To tak, jakby niewidzialny prostokąt jeśli rodzaj chcą psychicznie podzielić stronę na różne jednostki online. A następnie wiele div I patrz, coś o nazwie klasy, ale wrócimy do tego. 

To interesting-- formach. Formy są w całym internecie. Każde pole wyszukiwania jesteś kiedykolwiek używane jest formą. A więc, niech rzeczywiście zobaczyć. Formularz. Akcja. Działanie tej postaci, niezależnie od Ze względów historycznych, jest to, że adres URL. Metoda jest "post". Okazuje się, że żądania HTTP można użyć czasownik "get", jak widzieliśmy wcześniej, lub "post". I będzie widać różnicę Z tego w momencie. Załóżmy, rzeczywiście zobaczyć co to jest. Pozwól mi wrócić do strony Stanford. W jakiej formie są rozmowy o, o tym sądzisz? Co wyskakuje na ciebie? 

PUBLICZNOŚCI: Pole wyszukiwania. 

David J. MALAN: Tak. Tak się w prawym górnym rogu tutaj jest to pole wyszukiwania. A to, w jaki sposób realizowane it-- tag, który dosłownie formą otwartym uchwycie. A potem niech szukać czegoś. Chodźmy poszukać kumplem z mine-- "Nick Parlante." Wchodzić. I oczywiście, że udał się do nieco inny URL. Pozwól mi wrócić tutaj. Chodźmy poszukać "kursów". Cholera. Poszedłem do innego adresu URL. Tak, Stanford dodając trochę magii że oni nie zabiera mnie do adresu URL które widzieliśmy w atrybut nie działania. Ale ta forma jest tu realizowany czysto w drodze owego narzutu tutaj, te znaczniki. W rzeczywistości, tutaj jest wejście dla rodzaj wyszukiwania, które chcesz. Tutaj jest wejście do inny rodzaj wyszukiwania. Tutaj jest wejście do samego łańcucha. A więc celem nie jest do owijania nasze umysły wokół wszystkich tych tagów ale po prostu zobaczyć. To tylko otwieranie i zamykanie tagi i rzeczy patrząc w górę. Tak? Wiktoria? 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: To jest dobre pytanie. To jest trochę trudniejsze do zobaczenia. Pozwól mi wrócić do tego, pytanie w ciągu kilku minut kiedy patrzymy na coś, co nazywa arkusze CSS lub kaskadowy styl, i możemy próbować wnioskować tyle ze strony. Więc jeśli teraz spojrzeć na google.com, Zobaczmy, co ich stronie wygląda. Można by they're-- to słodkie dziś. OK. Wszystko zrobione. W porządku, więc View Source. Można by pomyśleć, Google ma Kod źródłowy naprawdę ładne. Tak więc, jak widać, co się tu dzieje? I w rzeczywistości nie jest jeszcze HTML. To jest coś, co nazywa JavaScript. I niech nie poddawać się i odchodzą. Ja nawet nie wiem, gdzie rozpoczyna się strona. Zamierzam użyć komendy F, otwarta Uchwyt HTML. W porządku, nie jest. Znalazłem początek strony, a jest tak wiele rzeczy tutaj. 

Co się właściwie dzieje? No wiesz co, możemy to posprzątać. Gdybym zamiast iść do tego sprawdzać Pasek narzędzi, to specjalne narzędzie diagnostyczne, i iść nie do sieci, gdzie my wracamy dziś ale jeśli idę do Elements co jest naprawdę ładny jest to, że przeglądarka ma wiele znacznie lepsze oczy niż ja. A przeglądarka może odczytać że bałagan na stronie internetowej, że poczta HTML po prostu spojrzał, a może przeanalizować, czy czytać i analizować i formatować je w miły sposób przyjazny dla człowieka. Więc co widzę teraz Na tym ekranie tutaj pod Elements, dokładnie takie same treści, ale już wcięty wszystko oni pokolorowane, ale jest to dokładnie ten sam tekst że pobrane z serwera. 

A co miłe jest teraz widzę w organizmie, na instance-- powiadomienia strona jest nadal w składzie: stanowi tylko głowa i ciało, i mogę hierarchicznie nurkowania tutaj. Zauważ, że Google wydaje się mieć do divs-- to jeden i ten jeden. Mogę rozwinąć to. Jest cała masa innych div. Tak więc jest to trochę skomplikowane. Ale poczekaj. Wydaje się to o wiele więcej czytelne, względnie, niż to. Dlaczego Google żenujące Sama tylko przez wysyłanie Ten ogromny bałagan z kodem niektóre Sortuj po prostu zaimplementować coś który wygląda tak prosta na pierwszy rzut oka? Jak, dlaczego nie dodać więcej przestrzeni? Dlaczego nie trafią Wprowadź tak jak ja? Spójrz, jak dobry jestem w pisaniu stronę internetową. I hit Enter tak pilnie. I wcięty więc wszystko jest tak ładny i czytelny. Dlaczego Google nie ćwiczyć tak samo? 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Dobrze. Bardzo uczciwa. Oni nie mają niektóre Osoba w Google ręcznie aktualizowanie strony startowej więcej. To nie jest już 1999. Więc mają oprogramowania. Mają inne narzędzia generować dynamicznie oni HTML. Oczywiście, że sam kod została napisana przez ludzi, ale rzeczywistość jest taka, to całkiem uczciwie powiedzieć, przeglądarka na pewno nie robi obchodzi, jak niechlujny kod jest. Ale jest jeszcze bardziej przekonujące powody techniczne że Google dystrybuuje swoje HTML Kod w taki niechlujny, pozornie Zdecydowana sposób wszystkie pakowane razem bardzo mało way-- bardzo mało w sposób formatowania jak ja. 

PUBLICZNOŚCI: [INAUDIBLE] 

David J. MALAN: Szybsze? Czemu? I co powiedziałeś, Lydia? Szybciej? Dlaczego szybciej? PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Jest brak miejsca do czytania. Tak. Więc pomyśl o tym, co jest przestrzeń. Więc każdy znak na klawiaturze trwa pewna ilość przestrzeni do reprezentowania, zarówno fizycznie, jak to zajmuje tak dużo miejsca, albo jakoś pod spodem Kaptur, która wymaga pamięci. I jako aside-- a my porozmawiać o tym tomorrow-- każda postać na klawiaturze zazwyczaj wymaga 8 bitów lub jeden bajt. Zatem wzór 8 zera, z nich, lub tylko jeden bajt, jak ludzie będą zazwyczaj powiedzieć. Więc to jest mały, ale nadal jest niezerowe. Jest jeszcze pewna ilość przestrzeni. Więc jeśli inżynier lub Google uderza spacji tylko raz, i załóżmy Google-- to super popular-- Załóżmy, że miliard ludzi odwiedzić ich stronę główną dziennie, lub niektórych liczba osób Przejdź na stronę gospodarzy miliard razy na dobę, ile dodatkowych bajtów, które ma inżynier oprogramowania po prostu kosztować Google uderzając jego spacji raz? 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Nie aż tak źle. Zaledwie jeden bajt miliard razy. Więc A-- PUBLICZNOŚCI: 8 mld gigabajtów. David J. MALAN: Nie 8000000000. 8 miliardów bajtów. Ale jeden gigabajt. 1 gigabajt byłaby jednostka miary. Jeśli on lub ona ma dwa przestrzenie, 2 gigabajty. Trzy gigabajty. Dobrze? Wagi Jest drogo. I tak w przypadkach takich jak Google, które przyznawane są skrajne przypadki, istnieją inne problemy, które pojawiają się po prostu poprzez bardzo rozsądne decyzje lub przy bardzo prostych działań ludzkich, ponieważ jest to powiększony efekt. Tak więc jedną z przyczyn wygląda to tak skompresowane Jest dokładnie tak, jak to było Victoria said-- właśnie generowane przez komputery i tak. Więc nic wielkiego. Niech przeglądarka rysunek. Ale to również świadomie nie ma zbyt wiele miejsca, ponieważ miejsca nie jest konieczne. A przestrzeń rzeczywiście kosztuje. 

To też kosztuje czas, bo tylko do pchania że dużo więcej danych spośród siedziba google.com tuż ma podjąć pewną ilość czas, nawet jeśli jest to milisekundy lub mikrosekund, ale to dodaje się na tak wielu użytkowników, albo co bardziej prawdopodobne, to chyba kosztuje. Google prawdopodobnie łączy się ktoś inny na świecie, jednego tych zaglądanie punktów, a jeśli mają pewien rodzaj relacji finansowych przy czym ich dane kosztuje, mogliby równie dobrze minimalizacja ilości danych oni wypluwając na ich połączenie z internetem. 

Więc najśmieszniejsze, choć ostatecznie czy może uspokajający rzeczą, jest to, że mimo, że wygląda strasznie Przeważająca pod koniec dnia, to jeszcze dokładnie te same zasady jak Ta bardzo prosta strona tu HTML strona. Więc po prostu podsumować i tak, że masz wersję kanoniczną, jeśli nie były następujące wraz z wyboru tutaj, tutaj może być najbardziej proste stron internetowych, więc coś do zabawy może później. 

Cóż, wprowadzenie Kilka innych pomysłów teraz. Mamy zamiar przedstawić coś, co nazywa tag stylu. Możemy stylizować tę stronę w bardziej interesujący sposób. Więc podczas gdy e-mail HTML jest wszystko o oznaczaniu dane, rodzaj informując Przeglądarka jak struktura danych, gdzie umieścić to, CSS, lub Kaskadowe arkusze stylów, Jest to drugi język, który na ogół dostaje zmieszane z HTML jak będziemy see-- ale możemy oczyścić że nawet w moment-- które odbywają że ostateczny mile, i to stylizes go. Robi kolory tylko w prawo, czcionka o wielkości tylko w prawo, pozycjonowanie tylko w prawo. To wszystko o estetyce lub formatowanie, a nie o same dane fundamentalne. A najprostszym sposobem, aby pokazać Może to przykład. Więc mam zamiar przejść do mojego prostego pliku tekstowego. A za chwilę, będę chodzić nas przez proces to zrobić sami. 

Mam zamiar wrócić do mojego pliku tu i przeładowanie strony po prostu w celu potwierdzenia, jak to wygląda. To miejsce, gdzie jesteśmy na teraz. Czuję się jak dzieci, by cieszyć mając trochę kolorów do tej strony. Więc mam zamiar udać się tutaj w nagłówku strony. A ja zamierzam zrobić, styl / styl. A potem w środku tego, idę powiedzieć ciało mojego page-- i to formatowania przy pierwszy rzut oka, może trochę dziwne, ale konwencjonalne. Mam zamiar powiedzieć, że w tle Kolor tej stronie powinny być zielone. I to jest niestety jakby nie najlepszy projekt. Zauważ, że uprzednio w świecie HTML, Powiedziałem, że atrybuty są te pary klucz-wartość. Coś równa cytat koniec cytatu "coś". W świecie CSS, który był zaprojektowane przez kilka różnych osób, postanowili, że w swoich Świat, par klucz-wartość Słowo okrężnicy byłoby coś. Więc to jest ten sam pomysł, choć. To skojarzenie wartości z jakimś kluczem, który w jakiś sposób wpływa na zachowanie tej strony. 

I można się domyślić. Czym jest ta prawdopodobnie będzie zrobić, nawet jeśli nigdy wcześniej nie postrzegane HTML lub CSS wcześniej? PUBLICZNOŚCI: Zmiana koloru tła. David J. MALAN: Tak, zmienić kolor tła. A konkretnie Kolor tła ciała. Ale, o ile Ciało na razie jest w internecie page-- to jedyna rzecz, poniżej paska tytułu really-- to prawdopodobnie będzie wpływać na to samo. Więc zobaczmy. Ratujmy tego. Przejdź tutaj i przeładować. Jest to dość ohydne. A co się dzieje o to efekt uboczny. Po prostu wybrał ten obraz losowo. Dlaczego nie zielona przenikając za Mickey? PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Dokładnie. Okazuje się, że obrazy, całkiem much wszystkie zdjęcia, które możemy użyć, są rectangles-- prostokątów. Nawet jeśli Mickey ma jakieś krzywe do siebie i ma doświadczenie, że tło ma być coś. To musi być biała. To musi być czarny lub coś innego. Może być przejrzyste. I rzeczywiście, nie mogłem otworzyć Mickey Mouse tutaj w programie o nazwie Photoshop lub coś podobnego i zmienić wszystko, że białe tła na przezroczyste, tak zielona będzie prześwitywać. Ale to jest coś, co muszę zapytać o sobie lub grafik lub projektodawca na moim Spółka, na przykład, zrobić, zwłaszcza, że ​​ja po prostu pożyczyłem to jedno z Internetu. Ale to, dlaczego tak się dzieje. 

Więc co jeszcze może chcemy zrobić? No, może chcemy powiedzieć, że Naprawdę mam nadzieję, cieszyć się z pobytu. I dla podkreślenia, chcę aby ten silny, i tak powiem silna i otwarta zamknąć silna, a następnie przeładować. I to jest trochę trudne zobaczyć na projektorze ale chyba tak naprawdę teraz wyskakuje na ciebie trochę więcej. Więc można dodać w tym kursywy sposobem, pogrubienie wychodzą w ten sposób. Możemy zmienić kolory. W rzeczywistości, po prostu dla zabawy, jestem zamiar iść naprzód i to zrobić. Naprawdę nie lubię jak mój paragrafy są tak blisko siebie, więc może zrobić coś takiego. Zamierzam poinformować przeglądarkę, zmienić każdy znacznik akapitu mieć, niech say-- właściwie, wiesz co, niech dostosowania go text-align, centrum. I znowu, wiem, że to tylko bo ktoś nauczył go do mnie lub Spojrzałem go w referencja Internecie. Więc pozwól mi uratować tego. I, ach, teraz mam wyśrodkowany obraz tam. I rzeczywiście, wiesz co, jeśli I przenieść obraz do ust tag-- więc akapit trzeci chociaż to nie jest tekst. Ratujmy to i przeładować. Teraz strona zaczyna wyglądać rodzaju of-- mam na myśli, to wciąż dość brzydki, ale przynajmniej to wygląda Spędziłem dwie minuty zamiast jednej minuty robić to. 

I tak stopniowo, możemy Te estetyczne zmienia się teraz na stronie? Nie byłem naprawdę zmienił dane w Strona inna niż dodanie słowa naprawdę. Dodałem metadane, jeśli będzie. Hej, przeglądarka, sprawiają, że Słowo "naprawdę" pogrubione. Jednak dane te nie są mocne. To metadane. Dane są "naprawdę". Więc mamy jeszcze kilka te same pojęcia, jak wcześniej. Teraz, oczywiście, nie jest to w sieci, więc mam zamiar zrobić jeden ostatni krok tutaj. 

Mam zamiar iść do hello.html i po prostu zaznaczyć i skopiować ten. A teraz mam zamiar wchodzić Cloud9, która Będę Cię przez za chwilę. A kursy są wkrótce będziesz, jeśli jeszcze nie, na ekranie takiego. I niech mi tylko dać szybkie Wycieczka co Cloud9 rzeczywistości. Więc znowu Cloud 9 jest Ta usługa w chmurze który daje i mi złudzenie posiadania własnej maszyny wirtualnej w chmurze, technicznie pojemnik w chmurze, że mamy pełne uprawnień administracyjnych. Więc teoretycznie nikt indziej na świecie nie ma Dostęp do ekranu jestem patrząc na teraz, może z wyjątkiem osób którzy prowadzą to miejsce, ponieważ mają one technicznie fizyczny dostęp i tak dalej. 

Więc co widzimy w tym środowisku? Mam zamiar pomniejszyć, bo to trochę małe. I pozwól mi wskazać na tu tylko na chwilę. Po stronie lewej mój i twój Ekran nie jest przeglądarka plików w lewo. Tak więc w duchu podobnym Mac OS i Windows. Są to wszystkie z Pliki na moim rachunku. I domyślnie, jeśli Konto jest jak moja, zobaczysz lub wkrótce helloworld.html i readme.md. Tutaj po prawej stronie, to jest gdzie moje pliki tekstowe będą iść. Jeśli kiedykolwiek używałeś Microsoft Słowo lub Notepad lub TextEdit, Słowo to jest moja edycja plików pójdzie. I wtedy najbardziej zaawansowanych Funkcja tego środowiska że nie będzie naprawdę trzeba użyć jest tu nazywa oknie terminala. Jeśli używany DOS z yesteryear, to jest Linux lub równowartość Linux DOS. Jest to interface-- tekstowy Brak kliknięć myszką, bez przeciągania. Wszystko, co można zrobić, to wpisać polecenia, ale te komendy Można tworzyć pliki, przenosić pliki, otwarta katalogi, katalogi, zamknij zrobić dowolną ilość rzeczy. Ale teraz, będziemy po prostu spędzać czas tutaj. 

A więc zróbmy to. Jeśli jesteś w tym środowisko, który powinien być gdyby został utworzony obszar roboczy Już teraz śmiało i po prostu iść w górę Plik, Nowy chwilę. A to daje nowy Zakładka tutaj w środku. A Ja tylko I spójrzmy prawdzie śmiało i to zrobić. Idziemy do przodu i teraz nie Plik, Zapisz i iść do przodu i nazywają to hello.html, Nie należy mylić z helloworld.html, co przyszedł z nowego bezpłatnego konta który jest tylko przykładowy plik. Przekonasz się, że pojawiają się nagle, prawdopodobnie z lewej strony, a karta będzie nadal otwarta. I niech mi teraz zachęcam do odtworzenia Ten plik lub kilka ich wariantów. A jeśli nie dość zobaczyć go na Ekran ten jest identyczny z preparatów że prawdopodobnie masz w innej karcie. 

Tak w skrócie, dokonaj pierwszej strony internetowej, zapisać go, a następnie za chwilę, Pokażę ci, jak może faktycznie widok. Ale zmienić przynajmniej jedną rzecz. Zmień helloworld się coś z własnego wyboru, tak, że jesteś przekonany, że twoja złożyć i nie jeden ja właśnie utworzony. W porządku. A kiedy jesteś ready-- brak rush-- kiedy jesteś gotowy, idź i zapisz plik Po dokonaniu tych zmian. A jeśli kliknij Uruchom przycisk góra top ten należy otworzyć nową kartę, która powie Ci co URL można znaleźć w pliku, ale może to chwilę potrwać do cytat cytatu "start Apache", który to nazwa serwera. Tak więc należy uważać, aby dokładnie zrobić co jest w pliku ostatecznie. Więc teraz, będę powiększać. Jeśli zacznę pisać open-Wspornik HTML, informacja to skłoniło mnie, aby zakończyć moją myśl. A jeśli skończyłem myśl, to automatycznie daje mi znacznika zamykającego. Ale oczekiwanie jest następnie Uderzę Enter, a następnie przenieść Wewnątrz i nie udać się do środka i Następnie robię ciało do środka. I to jest trochę dziwne na początku, ponieważ robi za Ciebie, ale uświadomić sobie, że ostatecznie To oszczędza klawiszy. W rzeczywistości, bardzo powszechną cechą programowanie Środowiska te dni zarówno do tworzenia stron WWW, takich jak to i rzeczywista programowania, które będziemy rozmawiać o jutrze, właśnie te funkcje autouzupełniania, rzeczy, które po prostu pozwalają Programista lub projektant wpisać mniejszą liczbę klawiszy do osiągnąć to samo. Czasami jest to dobre, choć. Czasami jest to po prostu irytujące. I znowu, kiedy już przepisywane slajd lub jakiś jej wariant, można kliknąć przycisk Uruchom w górę szczycie. A następnie w dolnej części Okno, będziesz informowany URL, co można odwiedzić stronę internetową. Kopalni, na przykład, jest w business-daharvard.c9users.io i tak dalej. W porządku, więc niech me-- jakieś pytania? Wszelkie inne pytania dotyczące tylko coraz tej pracy, zanim dodamy funkcje? I niech mi zaproponuje, po prostu dostać ludzie comfortable-- bo to tylko jedno kopiuj-wklej na ślepo, co zrobiłem. Ale tylko dlatego, że ludzie walczyć z co najmniej jednego do zrobienia, Zamierzam włączyć jakąś muzykę. Zamierzam zaproponować listę rzeczy można potencjalnie Add. I z pewnością można korzystać z Google. I dlaczego nie możemy po prostu Proponuję, aby spróbować rozwiązać co najmniej jeden szczególny problem. Tak więc w zakresie znacznikami pozwól mi ponownie wykorzystać to tutaj. 

Właściwie, powiem go w formie tekstowej. Powiedzmy, że wśród tagów możemy używać oto niektóre znaczniki tutaj. Widzieliśmy znacznik akapitu. Teraz to będzie autouzupełniania. Ustęp tag, tag kotwicy. Powiedzmy, że chcesz zrobić coś większego, więc może like-- tag rozpiętość może pomóc. Cóż, może potrzebować pomocy do tego za chwilę. Widzieliśmy div. Zobaczysz tam stół. Istnieje coś takiego jak tr, td. Th, td. Wracaj do tego za chwilę. Co jeszcze może się przydać? Jest silny. Jest nacisk, albo raczej em. There's-- co jeszcze Może masz ochotę tutaj? Dobrze, weźmiemy popatrz na to razem. Form, które widzieliśmy. Jest formą. Jest wejście i kilka innych. Dobrze, więc zróbmy to. Aby odpowiedzieć na Victorii Pytanie, pozwól mi najpierw wystarczy upewnić się, że każdy jest w stanie uzyskać ich pracy Halo. Pozwól mi przedstawić parę innych pomysłów. Potem niech ludzie rozwiązać jakiś problem na własną rękę. Wtedy rzeczywiście wróci z tym pojęciem formie a my rzeczywiście CMC wraz interfejs front-end, że tak powiem, dla samej Google. Użyjemy Google jako back-end i niech im wykonywać ciężką pracę, rewizje, ale my odtworzyć przód Google oraz formularz wyszukiwania że nie mają własnej strony głównej. A więc wracamy do Znaczniki te za chwilę. 

Więc to, co ja Proponowana chwilą. Możemy dodać Do stylizacji Strona wewnątrz tego znacznika style, i możemy stylizować tło kolor, wyrównanie tekstu, czy jest to centrum lub w lewo lub w prawo. Ale bardzo szybko byś znaleźć lub projektanta stron internetowych by stwierdzić, że ta staje się trochę nieporęczny, bo robisz co nazywa treść mieszania z jego prezentacji. Ty mieszania swoje dane i ich estetyka. I rzeczywiście, jeśli wziąć pod uwagę co się wydarzy w ciągu time-- Jest to bardzo mała Strona internetowa, oczywiście. Ale jeśli dodać treść do tej strony i dodać styl do tej strony, strona bardzo szybko dostaje coraz dłużej i dłużej. I załóżmy, że chcę mieć drugą stronę WWW Dzieli niektórych z tych cech. Załóżmy, że moją drugą stronę dla mojego site-- też chcę centrum wszystkiego, a ja też chcę wszystko z zielonym tłem. Mam dość dużo będzie musiał skopiuj i wklej niektóre z tych linii do tego drugiego pliku, który czuje się dobrze. Będzie to rozwiązać problem. 

Ale co zrobić, jeśli chcę trzecią stronę lub 30-ci stronę lub 40-ci stronę? Teraz mam zamiar być skopiowanie i wklejając wiele zduplikowanych kodu w wielu plikach. A więc załóżmy, że Ja decyduję czy mi powiedziano, hej, nie używasz zielone tło więcej. Mamy zamiar rozpocząć korzystanie pomarańczowo. Co trzeba zmienić? Cóż, trzeba zmienić ten styl z zielonego na pomarańczowy, w ilu miejscach? Podobnie jak 30 lub 40 miejsc. Jest to uciążliwe. Jest podatny na błędy. Jest wiele powodów, gdzie nie chcą wywoływać ten rodzaj bólu dla siebie. I tak nie byłoby miło czy możemy wziąć to, co po prostu umieścić pomiędzy nimi dwie żółte Znaczniki te znaczniki w stylu, czynnik je i umieścić wszystkie moje stylizacja w jednym centralnym pliku że wszystkie 30 lub 40 z moich innych plików pożyczyć od lub w jakiś sposób odwołać, nie w przeciwieństwie do sieci Schematy robiliśmy wcześniej? 

Więc jeśli pójdę tu jestem zamierza zaproponować w rzeczywistości które zastąpi Styl znacznika z czymś zwany znacznik łącza, które jest strasznie, strasznie nazwane, bo nie używać tag link, aby stworzyć to, co my, ludzie wiedzą jako link na stronie internetowej. W tym celu należy użyć które tag? Jak utworzyć link do strony WWW? Uczestniczyć: a. David J. MALAN: A, czy kotwica tag, który udał się do Disney wcześniej. Link tag tutaj mówi this-- Link do pliku o nazwie styles.css, związek, do którego będzie, że to jest mój arkusz stylów. Jest to więc jeden z tych w S CSS-- kaskadowych arkuszy stylów. Styl sheet-- dwa S-tych w CSS. Arkusz Stylów Kaskadowych. To po prostu oznacza, hej, przeglądarki, przejdź znaleźć styles.css na serwerze lokalnym i używać go jako arkusza stylów, co oznacza, że ​​wewnątrz tego pliku będzie wszystkie z stylizacje że właśnie zrobić. I co z tego, że plik może wyglądać jest następująca. A ja po prostu zrobić to szybkie przykładem, ponieważ nie musimy aby dostać się tutaj zbyt wiele chwastów. Ale jeśli kopia tego, co mi proponuje jest to, że programista utworzyć nowy plik, wklej w tych lines-- whoops-- wklej w tych liniach, zapisać go jako styles.css, a następnie w inny plik, usuń wszystko to i zastąpienie go zamiast z tego tagu łącza. Tak, że jeśli połączyć href = "styles.css" relacja jest "stylesheet" blisko tag. Zapisz to. Wróć do mojego HelloWorld. Przeładować. 

Dosłownie nic się nie stało. To jest dobre, bo to Oznacza to rzeczywiście wszyscy pracujemy. Aby udowodnić, jak wiele, załóżmy robię literówka, i nazywają to "styles.css" z kapitałem S, który jest nieprawidłowe, a następnie przeładować. Teraz widać, że po prostu nie działa. Teraz, dlaczego? Cóż, użyjmy Technika z wcześniej. Pozwólcie mi iść do przodu, aw Moja przeglądarka, w Chrome, jestem zamierza otworzyć się, że specjalne karta sieciowa, jak poprzednio, i pozwól mi odświeżyć stronę. Czego się nie dziwi, aby zobaczyć teraz? A może jesteś zaskoczony, aby go zobaczyć. Tak czy inaczej, to co teraz widzisz? PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: To nie znalazł. Dlaczego nie znalazł? Cóż, Styles.css-- kapitału S- nie istnieje. I misnamed go. Proste literówka. Ale jestem coraz zrozumiałe teraz 404, ponieważ serwer mówi, hej, nie znalazł. Dosłownie, nie wiem gdzie ten plik jest. Tak więc, w rezultacie, przeglądarkę pokazuje, co może, surowe Zawartość strony co było 200, HTML, ale stylizacja nie może być dodane później. A to, co się rozumie przez kaskadowe. Możesz dodać rodzaj po, a to rodzaj poprawia estetykę strony. I można nawet zastąpić te style z jeszcze innych plików stylesheet Jeśli chcesz. To nie stwierdzono jednak, w tym przypadku, ponieważ oczywiście, misnamed go. Więc będę musiał to naprawić w pierwszej kolejności. 

Więc idź naprzód i Proponuję następujące. Idziemy naprzód i to zrobić. Począwszy chyba plik helloworld, pozwól mi tylko zaprosić parę z funkcji sugestie. Tak, Victoria, chciałeś aby jakiś tekst większy, prawda? No dobrze, więc możemy rób tekst większe. I będziemy każdego zrywać off tylko jeden problem do rozwiązania. Dodać tekst większe. Nie mam zamiaru się przejmować pisząc o tym, kiedy posiada technologię pocisku tuż nad tutaj. Więc pewne problemy. Więc mamy zamiar spróbować by tekst był większy. W porządku. Co jeszcze ktoś zaproponuje? Co jeszcze możemy chcieć zrobić na stronie internetowej? Załóżmy wymyślić krótka lista rzeczy a następnie przekazać do Grupa dowiedzieć się tego. 

PUBLICZNOŚCI: [INAUDIBLE] 

David J. MALAN: OK, tekst pozycji na różnych stronach kartki? W porządku. Coś innego. 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Jest. Więc to tylko gif inny format pliku. Właśnie używany, co, o png lub jpg pewnie? Użyliśmy jpg. Jeśli jesteś ciekawy, nadmierny odpowiedzieć na Twoje pytanie jest jpg jest powszechnie stosowany do fotografie, ponieważ obsługuje miliony kolorów lub 24-bitowym kolorze. GIF jest powszechnie stosowany do, jak, memy internetowe te days-- animacje, takie jak animowane gify. Ale zdarza się, aby użyć mniejszego kolor Paleta, zaledwie 256 możliwych kolorów, ale obsługuje Przejrzystość i animacji. A jeszcze png, który wspiera przejrzystość i więcej kolorów ale bez animacji. Więc jest to kompromis. Więc dodanie gif, choć byłoby funkcjonalnie równoważne do dodawania png lub jpg. Tak. Źródło obrazu równa. Więc coś innego. Chodźmy coś wymyślić, że wysłaliśmy do Victorii zrobić tutaj. 

PUBLICZNOŚCI: Dodaj przyciski do formularza. David J. MALAN: OK. Więc dodać przyciski do formularza. I zrobimy to jeden ze sobą. Tak, że będzie to idealne segue zaraz po tym wyzwaniem. Coś jeszcze? Co może chcesz zrobić? Wstęgę czuje się bardzo rozczarowująca jeśli jest to wszystko, co możemy zrobić. PUBLICZNOŚCI: Zmień kolor tekstu. David J. MALAN: Zmiana, co? PUBLICZNOŚCI: Kolor tekstu. David J. MALAN: Zmień kolor tekstu. W porządku. Więc zróbmy to. Tylko raz, więc nie, że jesteś, po prostu na pamięć, robić to, co robię dokładnie to, Zamierzam włączyć muzyki przez jakieś pięć minut tutaj. Zapraszamy do korzystania z Google. Zapraszam do mnie zapytać, a Będę szeptać podpowiedź w uchu. Zapraszamy szukać Powyżej na inne barki. Ale rozwiązać tylko jeden z tych problemów. Ale zrobimy ostatni z nich, tworzy jedną, gdybyśmy mogli razem. Więc pięć minut, aby rozwiązać jeden z tych problemów za pomocą Google, intuicji lub dowolny inne środki dostępne. 

[MUZYKA] W porządku. Nie martw się, jeśli chcesz zachować majsterkowania, ale będę psuć kilka z tych odpowiedzi. Więc pierwszej sugestii Victoria była by tekst był większy. Więc jest kilka sposobów, aby to zrobić. Mam obecnie przywrócony ekran do tego rozmiaru, jakbym powiększony sztucznie tylko zobaczyć rzeczy. I zróbmy to. Pozwólcie mi iść do przodu i grab niektóre rodzajowe tekst łaciński tak mamy coś do pracy. Więc daj mi tylko jeden moment. Zrobię trzy akapity. OK. będzie to lepiej przykład. Tak dla ciekawskich, w moja hello.html, po prostu wklejony trzy bezsensowne łacińskie akapity tak więc mamy jakiś tekst do pracy. A celem było Wiktorii że niektóre z tekstem większego. Więc może, jak poprzednio, przejdź tutaj. I pozwól mi zrobić to we właściwy sposób. Mam zamiar mieć związek Znacznik, który wskazuje na plik zwany "styles.css" relacja z których ponownie "stylów". A potem mam zamiar zapisać, że i otworzyć ten "styles.css". 

Tak, jak poprzednio, mam umiejętność w tym pliku CSS faktycznie zastąpić domyślny estetyka strony internetowej, a domyślne estetyki, Oczywiście, są dość nudne. To coś w rodzaju normalnego rozmiaru czcionki, czarna tekst, białe tło, i tak dalej. Więc załóżmy, chcę zrobić wszystkich tego tekstu większy. Mógłbym zrobić kilka rzeczy. W moim pliku styles.css, ja można powiedzieć, wiesz co, stosuje się następujące ciało mojej stronie. Śmiało i uczynić wielkość czcionki 24 punktów, która jest liczbą mogę używać w programie Microsoft Word. Pozwól mi wrócić do mojej sieci Strona tu i przeładować, i widać, że to już o wiele większe. I możemy być trochę szalony, jak możemy na desktop-- sprawiają, że 96 punktów. Przeładować. I robi się trochę nieporęczny w tym momencie. 

Ale mogę być trochę bardziej precyzyjny. Zamiast stosowania tego arkusz stylów do treści strony, co jeszcze mogę zastosować go zamiast Jakie inne tag, który nadal może działają w taki sam sposób? 

PUBLICZNOŚCI: Znacznik p? David J. MALAN: P tag. Więc głowa nie będzie prawidłowe, ponieważ głowy nie można rzeczywiście kontrolować estetykę. Jest zarówno tekst, czy nie. Ale p tag-- mogę nurkować w nieco głębiej, by tak rzec, do ust tagi. I mimo, że istnieją trzy, to perfekcyjnie, bo w CSS kiedy po prostu powiedzieć "p", to oznacza zastosowanie następujące do dowolnego znacznika, który pasuje do tej selektor selektor prostu jest nazwą znacznika. Więc gdziekolwiek zobaczyć "P", zastosować rozmiar czcionki i zróbmy to bardziej rozsądne again-- 24 pkt. I wiesz co, tak na wszelki wypadek, zróbmy kolor czerwone tylko na chwilę. A teraz, gdybym przeładować, teraz my zobaczyć trzy brzydkie akapity. 

A teraz przypuśćmy, że jestem sortowania of-- Chcę pierwszy akapit wyskoczyć na użytkownika. Nie chcę po prostu zwiększyć rozmiar czcionki wszystkiego. I tak rzeczywiście chcą do zidentyfikowania lub rozróżnić tych ustępach. Warto więc pozbyć się czerwony, bo to po prostu rodzaj tandetny, i chodźmy naprzód i zrobić wielkość czcionki 12 pkt domyślnie tak, że wracamy do czegoś trochę bardziej rozsądne. A teraz po prostu chcesz zwiększyć rozmiar czcionki akapitu pierwszego. Mogę to zrobić w kilku sposobów, ale jednym ze sposobów to chyba najbardziej instruktażowe u moment jest, aby wykonać następujące czynności. Pozwól mi iść dalej i powiedzieć, że to pkt posiada unikalny identyfikator "pierwsze". mogę nazwać to co zechcę. mogę nazwać to "foo" lub jakiekolwiek inne słowo ale mam zamiar dać mu pewne semantycznie znaczącą nazwę jak "pierwszy". Jest to unikatowy identyfikator, identyfikator, na moim pierwszym akapicie. 

Co mogę teraz zrobić w moim arkusza stylów Jest trochę bardziej precyzyjny. Zamiast mówić, zastosowanie następujące do znacznika p, Mogę powiedzieć, że following-- Stosuje się następujące, lub wybierz element HTML że posiada unikalny identyfikator "pierwsze". Co chcę mieć do niego? O rozmiarze czcionki 24-punktowej. Więc mam dwóch selektorów teraz. Jeden sprawia, że ​​wszystkie z pkt 12 pkt. Ale ten, zwłaszcza, że ​​chodzi second-- chodzi ostatni w file-- ma to efekt kaskadowy. Właśnie się wszystkich moich znaczniki akapitu 12-punktowe, ale teraz i kaskady nadpisuje że dla dowolnych elementów na stronie, każdy tag na stronie, której unikatowy identyfikator jest cytat cytatu "pierwsze". A w związku z tym Hashtag oznacza po prostu "unikatowy identyfikator". Nie należy umieszczać go w pliku HTML. I tu, po prostu powiedzieć cytat cytatu "pierwsze". 

Więc pozwól mi przeładować. A teraz widzę, ach, OK. To znaczy, że nie jest to ładna, ale to trochę jakby przedmowie do A książka lub coś w tym rodzaju, gdzie pierwszy akapit jest większy. Może być jeszcze bardziej precyzyjny tylko pierwszych liter, ale przynajmniej Mam sprawuje większą kontrolę. Teraz maybe-- Może chcę to zrobić od czasu do czasu bez względu na przyczynę, i tak nie chcę o tym dotyczyć tylko jednego tagu HTML. Raczej niech say-- niech również wykonać następujące czynności. Class = "import". Zważywszy, że identyfikator jest wykorzystywany do jednoznacznej zidentyfikowanie jedno, jeden tag, na swojej stronie internetowej, klasa ma być stosowane na dowolnej liczbie elementów lub znaczników na swojej stronie internetowej. Więc to jest wielokrotnego użytku. Identyfikator nie jest wielokrotnego użytku. Klasa jest wielokrotnego użytku. 

I wiesz co, na co filozoficzna reasons-- I nie skończyć thought-- Idę powiedzieć że pierwszy akapit i akapit drugi są ważne. Więc mam zamiar zastosować klasę o nazwie "Ważne", że jeśli mogę zapisać plik i odświeżyć, nie ma Jeszcze wpływ funkcjonalny. Ale dodałem niektóre metadanych do pliku, jakby coś odrębnego Z danych podstawowych pliku tak, że teraz w moim arkusza stylów, gdybym zamiast powiedzieć ".WAŻNE" - wiesz, coś, co jest ważne, jestem zamiar zrobić font-kolor, red-- czy raczej nie font-kolor, tylko kolor. Jest niespójności w CSS niestety. I przeładować. Teraz zauważył pierwszy dwa akapity są czerwone oprócz trzecich, bo tylko zastosowano klasę "ważne" do pierwszych dwóch z tych miejsc. 

Tak więc w identyfikatorach, masz możliwość określić bardzo precyzyjnie. Z klas, trzeba ponownego wykorzystania. Ale w obu przypadkach zauważysz rodzaj zasady dobrej projektowania gdzie zbitek wszystkie z Estetyka do mojego pliku styles.css. Więc nie ma tu niechlujstwa. Nie ma wzmianki o czerwonym lub pogrubienie wychodzą lub rozmiar czcionki w tym pliku. Raczej mam semantycznie, wymownie charakteryzuje moich danych jak Oto kilka ważnych danych. Oto kilka ważnych danych. Ponadto jest tutaj "Pierwszy" z moich ważnych danych. Więc HTML jest o porządek tagowania, dosłownie, słowami oraz ust i tworzy w twojej Strona z tych małych wskazówek, jeśli ciebie będzie, że można jakoś wykorzystać stosując inne techniki, takie jak CSS w ten sposób. 

Tak w odpowiedzi na pytanie Victorii, możemy powiększyć tekst w ten sposób. Istnieje wiele innych sposobów, ale czcionka tag-- otwarty nawias "font" - jest w rzeczywistości kilka lat. I to jest problem, Również z polegając tylko na resources-- internetowym mają tendencję do być nieaktualne. I rzeczywiście, która została zaniechana, bo świat zrozumiał, Co to znaczy "font-size = 7" oznacza? To nie robi. A więc dla wielu lat i Ten day-- jednym boku zauważa, jest to, że to jest rzeczywiście niezwykle bolesne czasem nadal do opracowania obiektów do WWW, ponieważ Microsoft a Google i Mozilla i inni często nie zgadzają się co do sposobu interpretować specyfikację jak HTML. 

Jest to zbiór zasad dla HTML ogólnie mówi, co każdy tag znaczy. Ale czasami to co pozostało do Wdrożenie jest dyskrecja, dyskrecja i Google Microsoft. I tak będziesz bardzo często zobacz na stronie czegoś wygląda inaczej na PC niż ma to miejsce na Macu i to jest naprawdę, bo pod koniec dnia, oni nie przetestować go dobrze na obu platformach. Ale to także dlatego, że rozsądne, inteligentni ludzie nie zgadzają a firmy nie zgadzają, a więc jednym z wyzwań programowania w internecie lub projektowania rzeczy dla sieci pisze swoją stronę w sposób który działa na każdej przeglądarce internetowej. Ale nawet, że to nierozsądne, prawda? Istnieje tak wiele tak wielu wersjach przeglądarek tam, że w pewnym momencie, trzeba także wykonać połączenie wyrok i trzeba zdecydować, jako firma, specjalnie dla e-commerce stylu Miejsca, gdzie jesteśmy stara się wykorzystać najnowsze i najlepsze Technologie dać naprawdę dobrą użytkownikowi doświadczenie. Ale niektóre procent użytkowników może wciąż być pomocą programu Internet Explorer 6 lub 7 lub 8, w szczególności w zależności od kraj, który oni pochodzą. 

I tak bardzo często konsultowane jest coś jak "statystyki przeglądarki internetowej." A jeśli pójdziemy to-- zobaczmy Wikipedii i zobaczyć, jak się na bieżąco wykres ten jest jeśli taki istnieje. Więc tutaj można zobaczyć gdzie faktycznie przeglądarek są, zgodnie z grudnia 2015 roku, według rządu USA. Chrome jest na 42% udziału w rynku, a następnie przez IE głównie w placówkach firmowych lub ustawienia komputera, oczywiście, następnie Firefoksa Następnie Safari, Opera wtedy nie dokonać mapę tutaj z jakiegoś powodu, a następnie inne. Może to w ramach podsłuchu. Ale bardziej problematyczne niż is-- zobaczmy, czy Wikipedia ma również wersje przeglądarek version-- 

Chodźmy do statystyk przeglądarek. TO ZNACZY. Nawet to nie wystarczy. Statystyki przeglądarkę. Moja wersja. To nie będzie dobrze. Zobaczmy wersje. udział w rynku przeglądarki. Zobaczymy, czy to wyjdzie. OK. Teraz jest coraz trochę bardziej użyteczne. Więc tutaj zauważyć, że mamy wszystko różne wersje przeglądarek. A, mój Boże, jeśli look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. To znaczy, przeglądarek coraz częściej aktualizowane, a czasami niektóre z tych zmian są istotne w Warunki funkcjonalności. I tak, w pewnym momencie, menedżerów produktu i inżynierowie trzeba dokonać decision-- jesteś Wiesz co, tylko 1% świata nadal używa IE 7. Do diabła z nimi. Nie jesteśmy po prostu będzie wspierania tej przeglądarki. A co to znaczy, aby nie wspierać? To może oznaczać, że przyciski nie działają na swojej stronie internetowej, lub może oznaczać formatowanie jest całkowicie wyłączony. A może trzeba zrobić ten sam osąd w telefonach tych dni, w których, których jesteśmy Nie zamierza wspierać iOS 5 już. Więc ludzie po prostu trzeba uaktualnić. Albo nie zamierzamy wspierać Cupcake Android OS dla urządzeń z systemem Android, ponieważ w miarę jak world-- tech świat chce iść do przodu, to niby chce przeciągnąć Świat z nim tak, że nie muszą nadal kompatybilny wstecz więc może zaoferować nowe i dobre cechy. Jest to jeden z powodów dlaczego tak wiele firm toczenia automatyczne aktualizacje i rodzaj zmuszając najnowsze wersje oprogramowania od nas. A nawet firm jak Apple będzie rodzaj zmusić cię prawie lub zobowiązać ci w zakresie sił rynkowych kupić nowy telefon, bo oni po prostu nie będzie aktualizować swój stary telefon już. Więc przegap najnowsze i najlepsze cechy, ponieważ jest to kosztowne dla nich jako firma, aby utrzymać starsze, prawdopodobnie gorsze wersje oprogramowania. Jednak efekt jest taki, że my także cierpieć to za dobrze. 

Warto więc przyjrzeć się Kilka końcowych rzeczy tutaj. Załóżmy strącać naprawdę szybko niektóre te inne pociski, jeśli ciekawi. Więc jeśli próbowali, Na przykład, stanowisko tekst na różnych stronach Strona, mam zamiar zrobić jeden szybki sposób, ale jest inaczej sposoby na zrobienie tego. Pozwólcie mi iść do przodu i eliminate-- uprościć to w następujący sposób. Niech mi tylko wrócić do mojego proste, proste akapity. Pozwól mi wrócić do mojego styles.css. A ja po prostu będzie używać upraszcza użytkowanie co może widzieliście w Google lub wycofania z earlier-- text-align rację. I przeładuj stronę. Teraz wszystko wydaje być wyrównany do prawej strony, jak można zobaczyć na napowietrznych tutaj. 

Możemy sprawić, że wygląda trochę bardziej Book-podobne, i można powiedzieć "justify" i odświeżyć. Teraz jest to miła i placu na obu boki, co jest miłe. Innym celem, który mieliśmy tutaj była zmiana koloru tekstu. Tak więc widzieliśmy, że z moim czerwonym tekstem. A teraz dodawać przyciski do formularza. Więc dlaczego nie staramy się dokładnie to zrobić? Ale pozwól mi najpierw pójść do witryny, która większość z nas korzysta na co day-- Google. I rzućmy okiem na jak Google faktycznie działa. Ale mam zamiar to zrobić. Po pierwsze chciałbym zrobić in-- yep, pozwól mi najpierw pójść do Google. Mam zamiar iść w Ustawieniach Google bo chcę, aby wyłączyć coś, co nazywa natychmiastowe rezultaty. 

Więc można zauważyć w Google days-- nich pozwolił mi wrócić i obrócić to. Więc jeśli zacznę poszukiwania dla "kotów", jak ta, zauważyć, że nie tylko Mam autouzupełnianie górę top, nagle, sama strona Wydaje się dość szybko zmieniać, jak również, i to jest Google za pomocą języka nazywa JavaScript stara się być pomocny. Ale niestety, to niby o bałagan naszą dyskusję tego, co się rzeczywiście dzieje pod maską tutaj. Więc jestem tylko trochę szybciej wyłączyć natychmiastowe rezultaty. A ja zamierzam kliknij Zapisz. A teraz mam zamiar otworzyć że pasek narzędzi diagnostyczno że utrzymać otwór w karcie sieciowej. Więc zróbmy to. Niech me-- whoops-- przewijać tę nieco w dół. I pozwól mi szukać "kotów". 

A teraz notice-- właściwie Jest to dobra okazja do dyskusji na chwilę. Zwróć uwagę na chwilę type-- mi go zatrzymać. Przestań. OK. Zwróć uwagę na chwilę wpisuję literę C, oglądać na dole ekranu. A- T- S. Co dno tego ekranu, moja karta sieciowa sugeruje się dzieje każdego Czas wpisuję list? Niestety, żaba jest bardzo rozpraszać dziś lub Shamrock lub cokolwiek to jest. Co się dzieje za każdym razem, gdy wpisane? I pozwól mi wyczyścić bufor i wpisać go ponownie. SO- okrzyki. Za każdym razem, kiedy wpisać literę, C A- T-- więc nowy wiersz oczywiście utrzymuje się pojawiają. Co ma każdy z tych rzędów reprezentują, na podstawie tego, co widzieliśmy i omawiane dotąd? PUBLICZNOŚCI: Przeszukanie? David J. MALAN: Przeszukanie lub bardziej ogólnie, żądanie HTTP z mojego przeglądarki do serwera. Cóż, dlaczego moja przeglądarka dokonywania HTTP zażądać za każdym razem wpisać literę? 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Tak, to daje mnie te wyniki autouzupełniania. Jak, skąd te Wyniki wyszukiwania pochodzą? Cóż, za każdym razem wpisuję List, Google wysyła więcej i coraz częściej słowo piszę. Czemu? Ponieważ chcą mi dać lepiej, lepiej, sugestia, lista sugestii, co słowo Próbuję faktycznie zakończona. Więc to znaczy dosłownie każdego Charakter wpisaniu w Google jest wysyłany, ostatecznie Większość, ale czasami jeden w czasie, w celu wprowadzenia te funkcje auto-zakończone, gdy dane są oczywiście w internecie. 

Teraz rzućmy okiem na to, co faktycznie się dzieje, gdy kliknę wyszukiwarki Google. A potem będziemy wykorzystywać tego sami. Więc jeśli mogę przewinąć teraz do bardzo Pierwszy wniosek, że tak się stało. Zwróć uwagę na następujące. Został on wysłany do dość długi URL-- https://www.google.com/search? a następnie cała masa rzeczy. Zobaczmy to faktycznie teraz w zakładce samej przeglądarki. Miejmy pozbyć pasku tutaj. Oto strona z wynikami wyszukiwania. I nota oto URL. Teraz można się domyślić co się dzieje w części. Więc przede wszystkim definicja. To podobno jest celem w którym został złożony wniosek. Kiedy więc wpisałem w słowa "Koty" i naciśnij Enter, Najwyraźniej Google wysłany moja metoda wprowadzania tekstu do tego adresu URL że mam podświetlone tam, slash wyszukiwanie. Okazuje się, że w adresie URL, wszystko, dzieje się po znakiem zapytania to, jak zachować mówiąc, parę klucz-wartość który został wpisany w formularzu lub w jakiś sposób przekazywane z Przeglądarka do serwera. 

Więc za każdym razem wpisać wejście do formularza na stronie internetowej i jest wysyłany jako mamy dyskutuje, poprzez GET, jeden z tych wirtualnych koperty, zawartość tego envelope-- tak trzymać uzyskiwanie nadziewany fizycznie do koperty w klasie dzisiaj, ale technologicznie to faktycznie umieścić w adresie URL. Faktycznie więc, pozwól mi przesiać przez to. Gdzie widzisz wejściowych użytkownika? Gdzie widzisz coś że ja sam wpisał się tutaj? Tak, i "Koty". Dobrze? Więc pozwól mi to destylować do czegoś prostszego. Mam zamiar usunąć wszystko na temat ten adres URL, że nie rozumiem, a ja po prostu odejdzie to tak this-- / search? q = koty. Zobaczymy gdzie Q pochodzi ze w jednej chwili, ale czuje się jak najmniej Ilość informacji, które podałem. A teraz mam zamiar naciśnij Enter. I zauważył, że nadal działa. Nadal wrócić całą masę kotów. Więc Google hodowcy niż to w dzisiejszych czasach. To jest 2016, a nie 1999. Więc nie ma innych rzeczy, że mój Przeglądarka przesyła do serwera. Ale to jest minimalnie wszystko, co niezbędne. 

Więc co się dzieje? Cóż, pozwól mi najpierw pójść dalej i przejść Powrót do Cloud9 i pozwól mi iść do przodu i zamknąć moje zakładki wcześniej. I będę to zrobić na moim właścicielem tylko na chwilę. Mam zamiar iść do przodu i utworzyć nowy plik. I mam zamiar zapisać go jako google.html. I będę bardzo quickly-- Idę do kradzieży, w rzeczywistości, część tego tekstu, tak aby zaoszczędzić czas. Mam zamiar wkleić tutaj. Nie mam zamiaru zajmować się każda stylizacja tym razem. Jedziemy do nazywają to "My Google". I zamierzam się pozbyć wszystko w organizmie. A ja zamierzam wykonać następujące czynności. Pozwól mi przybliżyć. Postać action-- a jak już wspomniano krótko earlier-- whoops-- tak pokrótce wspomniano wcześniej, działaniem Formularz jest gdzie wysyłać dane. Więc google.com/search. Natomiast sposób chcę używać może być jedną z dwóch czynności. Może to być albo "dostać", jak trzymamy dyskusji, lub może to być "post". Na razie podstawowym Różnica polega na tym, jeśli używasz "dostać" wszystkich informacji, że Użytkownik podaje zostanie wysłane w adresie URL. 

To jest dobre dla takich rzeczy jak wyszukiwanie silniki i kilka innych aplikacji, ale w jakich okolicznościach nie chcą wypełnić formularz i mają informacje zakończyć w górę URL, jak w pasku adresu przeglądarki? Jakich form zrobić pan: PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Tak, jak co? PUBLICZNOŚCI: Hasła. David J. MALAN: Tak, więc zalogować się do serwisu Facebook lub jakiejś stronie. To wejście użytkownika z formą, pole tekstowe, ale chyba nie chcesz go pojawiają się w adresie URL przeglądarki. Czemu? To znaczy, może istnieją pewne implikacje bezpieczeństwa w sieci, ale more-- podoba, prościej, co jeśli Twój współlokator, innych znaczących, dzieci, małżonek wygląda poprzez historię przeglądarki? Jest prawą hasło tam w historii przeglądarki. To nie ma ochoty dobrego projektu. Albo jeszcze bardziej technicznie, załóżmy, że próbujesz przesłać zdjęcia do serwisu Flickr lub Facebook lub wherever-- czyli wprowadzania danych przez użytkownika, nawet jeśli to trochę więcej jak interesting-- mogę dopchać obrazu w pasku adresu? Jesteś rodzaju rodzaju nie może. Ty niby mogę. Ale, naprawdę, jestem mocno naciskany wyobrazić sobie robić. Więc muszę inny sposób przesyłanie zdjęć do serwisów i że inna metoda nazywana jest "post". Ale teraz, po prostu mówić o "Dostać", który jest prostszy od tych dwóch. To po prostu kładzie wszystko dane wprowadzone przez użytkownika w adresie URL. 

Więc oto forma tworzę. Chcę wejście. I wiesz co? Idę wziąć przypuszczenie tutaj. Mam zamiar przypomnieć moje Wejście "q" za "zapytania". I myślę, że jest to jeden z Oryginalne wzory, być może, od 1999 r. A potem rodzaj tego wejścia jest po prostu będzie "text". A potem będę mieć innego wejścia który nie potrzebuje nazwy, jak będziesz wkrótce zobacz, typ, który jest "submit". I to będzie daj mi specjalnego przycisku. I to wszystko. 

Więc pozwól mi iść do przodu i zapisać ten plik. Mam zamiar wrócić do mojego Przeglądarka i przejdź do google.html. Wchodzić. A to niby rzadki delikatnie mówiąc. Ale pozwól mi iść do przodu i wyszukiwania dla "kotów". I zauważył, że jestem obecnie w tym Cloud9 URL. Ale chwila klikam to gdzie masz nadzieję skończę? 

PUBLICZNOŚCI: Google. 

David J. MALAN: Google. Więc kliknij przycisk Prześlij. I rzeczywiście ja ponownie wdrożyć Google. Dobrze? To prostsze. Jest lżejszy. To znaczy, mój kod jest wyraźnie lepsza niż ich, z bałaganu widzieliśmy wcześniej. I wiesz co? Mam zamiar urozmaicić ten się trochę. Nie wspominając już o tym wcześniej. Są to znaczniki H1, jak dla pozycji 1, najważniejszą pozycją na stronie. "My Google" Zadzwonię do tego. Pozwól mi przeładować. To wygląda już trochę lepiej. I rzeczywiście, wiesz co? Mam already-- skłamałem. Powiedziałem, że nie miał zamiaru projektować tego, ale zamierzam projektować tym jak przedtem. A moje ciało będzie, powiedzmy, centrum text-align. To wygląda bardziej jak Google już. 

Muszę podział wiersza, choć do tego przycisk Prześlij. I okazuje się, ty Można używać akapitów, albo może bardziej dosłownie tylko powiedzieć, daj mi linię przerwy here-- znacznik br. A gdybym przeładować to teraz idzie. To trochę brzydki, więc może zrobić wiele podziałów wierszy, ale niech nie zbyt chciwi tutaj. Więc teraz zobaczmy czy działa dla "psów". Wydaje się pracować dla "psy", jak również. Więc co jest przekonujące wynos tutaj? Jedno- nie był to ogromny skok do wprowadzić jeszcze kilka tagów, jak tagu formularza w tagu wejściowego. Ale bardziej fundamentalnie to wszystko robimy jest wykorzystanie naszej wiedzy HTTP oraz fakt że formy ostatecznie zmienić co jest w adresie URL przeglądarki, a więc w związku z tym, możemy mechanicznie dostarczenie danych do serwera poprzez formularz HTML i wiedząc, Rozumie się, że serwer HTTP, tak jak nasze ciało wie, jak, ściskając moją rękę, że sam protokół, i tak wracamy odpowiedź że ostatecznie spodziewać. 

Więc spróbujmy wykonać jedną Ostatnią rzeczą, jakiej teraz z telefonu, a ja dodam make-- ten kod do slajdów. Więc jeśli chcesz majsterkować, ty z pewnością może go stamtąd. Ale mam zamiar iść zrób jedną rzecz. Mam zamiar iść do przodu i otwarcie mojego indeksu page-- moja strona witam jak poprzednio, które ma dużo tego tekstu faux-Łacińskiej lub bezsensowne tekst łaciński, a has-- wygląda to w tym rozmiarze czcionki. Ale pozwól mi iść do przodu i to zrobić. Mam zamiar iść do Cloud9. I nie trzeba zrobić ten krok. Ja po prostu zrób to sam. Idę kliknąć Wyślij. I to jest funkcja tylko z Cloud9, przy czym mogę uczynić moje środowisko publicznego. 

I właśnie ze względu na Demonstracja, pozwól mi to zrobić. Idę do mojego wniosku do wiadomości publicznej. Zauważ, że to ja ostrzegam am I na pewno chcę to zrobić, bo to się dzieje, aby wszyscy w świecie, czy są tu teraz lub oglądania wideo na później internet w stanie zobaczyć, co widzę. Ale to jest OK. Mam zamiar powiedzieć "Gotowe". I pozwól mi zachęcamy, gdybym to zrobił Ten correctly-- pozwól mi go przetestować w pierwszej kolejności. Śmiało, jeśli nie mind-- W przeglądarce na komputerze, przejdź pod ten adres URL, i mam nadzieję, zobaczysz mój tekst łaciński. I żeby było jasne, że to nie działa na moim laptopie. Jest w chmurze. Jest na Cloud9, dosłownie, ale Podjąłem obszaru roboczego publiczną tak, że ktoś w internecie można uzyskać dostępu do strony łacińskiego domu. 

Idź do tej samej zawartości na telefon, jeśli można. Jeśli to będzie kosztować, choć, może po prostu patrzeć przez ramię. PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Przepraszam? PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Tylko łacińskie słowa. To wszystko. Ale to, co powinieneś zobaczyć. 

PUBLICZNOŚCI: Tak. David J. MALAN: Tak. Tak. OK. Więc mogę pomieścić swoje Telefon na chwilę? Więc miejmy nadzieję, że jeśli dostęp to powinno wyglądać prawie nieczytelny. To still-- mam na myśli, to nieczytelne ze względu na łacinę. Ale jest to również nieczytelny z jakiego innego powodu? Podobnie jak to, co podoba ci o tym? PUBLICZNOŚCI: To jest mały. David J. MALAN: To super, super mały. Więc jak możemy rozwiązać ten problem? To super, super małe na telefon Victorii a jeśli już wyciągnął że się samemu, chyba mała w telefonie, a także, o ile nie mieć włączoną ustawienia dostępu. Co to jest? Można po prostu przyciąć i zoom, co jest wykonalne, ale wtedy tylko zobaczyć Kilka słów na raz. Więc chwileczkę. Wiem, jak to naprawić. Dobrze? Mógłbym użyć CSS i mogłem zmienić rozmiar czcionki od 12 do 24 punkt-punkt. Jednak efektem ubocznym, że Oczywiście, będzie to teraz, na komputerze stacjonarnym lub laptopie, Teraz tekst jest dwa razy większy. I tak to będzie rodzaj być miły odróżnić urządzeniach i okazuje się, że Są sposoby na zrobienie tego. Istnieje kilka różne sposoby, w rzeczywistości przy czym za pomocą CSS i bardziej wyszukane funkcje że nie będziemy wchodzić w najdrobniejszych szczegółach, można zasadniczo zapytania przeglądarka i powiedzieć, Jeśli ekran jest mniejszy niż to wiele pikseli, należy użyć tego rozmiaru czcionki. Jeśli ekran jest większy niż to wiele pikseli, użyj innego rozmiaru czcionki. 

Możesz być nawet jeszcze bardziej wyszukane. Jeśli kiedykolwiek odwiedził Strona internetowa, która, na biurku, ma duży menu może się do z boku, a następnie całość treści jest po stronie, która menu-- to rodzaj wspólnego paradygmatu. Menu po lewej stronie, treści po prawej lub odwrotnie. Czy naprawdę nie działa na telefonie komórkowym, gdy twój Ekran jest tylko w tym wiele pikseli szerokości. Więc bardziej powszechne na telefon jest Twoje menu nagle dostać upadł, i trzeba kliknij przycisk, aby go zobaczyć, lub na stronie internetowej będzie można umieścić menu nad nim i umieścić treść poniżej niego. I można je realizować rzeczy na wiele sposobów, too. Można zwrócić się do programistów, hej, zespół, o każdej porze widać żądania HTTP z Android Urządzenie, urządzenie Microsoft, Google Urządzenie, urządzenie Apple to wykorzystać rozmiar czcionki i wykorzystać ten układ menu, albo użyć tego domyślnego większy układ. 

Teraz, za pomocą tego, co podstawową techniką dziś inżynierowie mogli korzystać wiedzieć, czy to iPhone, Android telefon, laptop, pulpit wizyty serwer firmy? Gdzie oni uzyskać te informacje? 

PUBLICZNOŚCI: nagłówek? 

David J. MALAN: Tak, nagłówek HTTP. Więc każde żądanie HTTP pochodzące z ich klientów do swoich serwerów to, że wewnątrz wirtualnego koperty, cała masa nagłówki HTTP, jeden z nich jest przeglądarka i system operacyjny Nawet, jeśli zależy Ci na że poziom szczegółowości. Teraz jest to ciąg tajemniczy wyglądający, ale istnieje oprogramowanie, które będzie po prostu uproszczenia, że ​​można po prostu zapytać w programowaniu code-- PHP, Java, C ++, whatever-- co telefon jest this-- jakiego urządzenia jest użytkownik użyciu? I wtedy można powiedzieć, pokazać im to wersja strony jeśli jest to telefon. Pokaż im tej wersji strona internetowa, czy jest to laptop lub stacjonarny. Ale nawet nie trzeba server-side złożoności. Można to zrobić nawet najprostszych rzeczy. 

Mam zamiar to zrobić. Mam zamiar iść do przodu w Moje środowisko Cloud9, i mam zamiar dodać tag które widzieliśmy w Google przed. To się nazywa metatag. I nigdy Pamiętam ten jeden, więc Zamierzam go rozpisać tutaj. Meta name = "rzutni", a następnie content = "width = szerokość urządzenia, intital scale = 1 "i to wszystko. 

Więc może to być równie dobrze jak magiczne zaklęcie. To nie wszystko, co jasne, ale to nie ma coś zrobić z rzutni, oraz rzutnia jest tylko ciało Strona internetowa, prostokątna, że ​​region definiuje większość strony. A to jest po prostu mówienie przeglądarka, wiesz co? Bądź szerokość tej stronie faktycznie równa szerokości urządzenia. Innymi słowy, nie należy zakładać, że masz rodzaj nieograniczonej przestrzeni. Załóżmy, że masz tylko tyle Przestrzeń jako samo urządzenie jest duża. A więc teraz, jeśli to reload w przeglądarce, widzę żadnej zmiany. Ale gdybym to zrobił, a correctly-- pozwól mi przekroczyć moje fingers-- jeśli was wszystkich załaduj telefony, prawda zobacz atrakcyjną zmianę? Tak, jest that-- 

PUBLICZNOŚCI: [INAUDIBLE] David J. MALAN: Tak. OK. Więc zapewne teraz bardziej czytelna? Jeszcze małe, żeby być w porządku, ale nie tak małe, aby być niewykonalna. A może ja na pewno to zmienić dalej z CSS lub po stronie serwera, ale coraz częściej, co masz widząc coraz więcej funkcji dodawanych do po stronie klienta environments-- JavaScript, jak omówimy jutro, CSS i HTML-- tak że wszystkie te zapytania Można to zrobić na kliencie tak, aby niepokoić Serwer o wiele mniej i nie musiała nadążać za Przykładowo, stała nawała nowego systemu operacyjnego wersje, nowe wersje przeglądarek. Można po prostu pozwolić przeglądarkę zwrócić się do urządzenia, jak wielki jesteś, a następnie dokonać dość logiczne Decyzje oparte na tym. Ale zobaczymy więcej możliwości do podejmowania decyzji logicznych Jutro w kontekście języka programowania. 

Tak więc, wszelkie pytania, a następnie, na tworzenie stron internetowych? Dziś nie jest programowanie stron internetowych, za se, ponieważ prawie wszystko zrobiliśmy bardzo estetyczne, jeśli będzie. Nie ma podejmowanie decyzji w kod, który pisaliśmy, a więc dlatego jest znaczników HTML języka, a nie język programowania. Ale jutro weźmiemy szybkie spojrzenie, a ostatecznie w JavaScript, który jest rzeczywiste programowania język, który pozwala nam zrobić trochę więcej. 

Jakieś pytania? Cóż, pozwól mi zaproponować dwa Możliwości opcjonalne do lekcji. Jeden is-- te Cloud9 rachunki nie wygaśnie. Zapraszamy do korzystania im majstrować. To wolna poziom usług. Sobie sprawę, że jeśli podczas tworzenia Twój obszar roboczy, to sprawiło, że publiczne, to znaczy, że ktoś na Internet może zobaczyć, co piszesz. Więc może po prostu uważają Nie żenujące siebie jeśli oddanie pierwszej wstęgi Strona tam publicznie przypadkowo, ale nikt nie będzie wiedzieć, aby nie wyglądać tak. 

I daj mi wrzucić two-- do tego adresu URL, jak również, zwłaszcza jeśli przyszedł dzisiaj trochę mniej wygodne niż inne, niepewny, co oznacza, że ​​wszystkie te rzeczy. Sobie sprawę, że o wiele więcej tym filmie która jest zarówno dobrym sposobem zasnąć a także śmiać chwilę Czyniąc tak, ma również wiele społecznie interesujące i dyskusje z punktu widzenia bezpieczeństwa nim John Oliver, choć komik. 

Ale jeśli nie ma więcej pytań, to prowadzi nas do recepcji. Więc dlaczego nie mogę włączyć muzykę. Nie powinno być napoje i przekąski na zewnątrz. Cieszę się, że mieszają się tak Dopóki ludzie chcieliby, odpowiedzieć na pytania bardziej jeden-na-jeden. Ale inaczej, jesteś mile widziany zdjąć w dowolnym momencie, i do zobaczenia ponownie Jutro rano na trochę więcej. W porządku, dzięki.