David J. Malan: Dobře. Jsme zpět. Takže, cílem tohoto posledního zasedání je představit několik dalších konceptů ale také dát každému příležitost na druh natáhnout prsty a vlastně něco dělat trochu hands-on. Cílem není obrátit Všechny nás do webové vývojáře jakýmkoliv způsobem, ale ve skutečnosti jen aby vám ochutnat některá ze základních konstrukty toho, co jde do programování pro web a dnes web vývoj, takže statická strana things-- žádná logika, žádný programovací jazyk, jen statický obsah. A to nám dá příležitost skutečně vidět, co je webový server, Podívejte se, co soubor HTML, je vidět, co to je HTTP je ve skutečnosti servírují. Ale dříve, než se ponoříme do libovolné retrospektivu otázky týkající se cloud computing nebo bezpečnosti nebo něco mezi tím? Ne? Dobře, dobře, pojďme to jen v případě, Proces přihlášení k odběru něco, co trvá několik minut. Necháme to udělat v pozadí. Jen do toho, kdybyste mohl, na tuto adresu URL here-- c9.io. Jedná se o třetí strany service-- Platforma jako služba, když se will-- že se tě pozvat se přihlásit k účtu, a to bude dát každému z vás účet v tzv mraku na infrastruktuře někoho jiného, společnost s názvem Cloud9. Ale co je hezké o To je, že poskytují vám aproximace skutečný vývoj v reálném světě životní prostředí, i když v mrak a ve webovém prohlížeči, a my budeme používat to vlastně trochu experimentovat dnes. A pak jít dopředu a jen navigovat vaše cesta k procesu registrace Pokud bys mohl. Tak jsme se náhodou použít ve třídě Učím pro všechny naše studenty, a to jak na akademické půdě i mimo teď, a to, co nahradil historicky jinak byl software ke stažení. Takže to, co bylo získání přístupu k je jeden z těchto virtuálních strojů, v podstatě, že jsem popsal výše. Takže tato společnost Cloud9 patrně nájemné ze třetí party-- ba v tomto případě, Google-- celek banda virtuálních strojů že nějak rozsekat na iluze jednotlivé servery že každý z nás má plnou kontrolu nad. Není to úplně přesné říkat že jsou virtuální stroje, ačkoli, protože to, co Cloud9 ve skutečnosti používá je poněkud novější technologie volal containerization. A dovolte mi chytit tento obrázek Zde se malovat tento obrázek. 

Kontejner je, pokud Vzpomínáte si obrázek z dřívějška, poněkud lehčí hmotnost než virtuálním stroji. Ve skutečnosti, vzhledem k tomu, poslední Tentokrát jsme mluvili o tu bytí provozní Systém a hypervizor a pak hostujícího operačního systému, host operačního systému, hostující operační Systém, na vrcholu své fyzického hardwaru, Rozdíl od této novější Technologie, containerization, je, že všichni nějakým způsobem sdílet stejný operační systém. Ale stále vytvářet iluze každého s jeho nebo její vlastní exkluzivní práva pro správu a soubory na serveru. Ale je tu méně softwarem mezi vámi a hardwaru. Jejímž výsledkem je, v Teorie, vyšší výkon, protože používáte nebo plýtvání méně zdrojů Na tomto tzv virtualizační vrstvou. Tak tomu se říká containerization od přírody prostřednictvím technologie zvané Docker, která je do značné míry přichází do jeho vlastní. A to je něco, Technici ve vaší firmě Možná trochu druh začne mluvit asi brzy, pokud tak již neučinili, i když tam to určitě ne Důvodem skočit na jakýchkoli bandwagons. 

Takže s tím řekl, co budete pravděpodobně vidět nyní je obrazovka, která vypadá trochu jako je tento. OK. A stačí zavolat mi, než v opačném případě. A jestli tak-- Půjdu přes ne-li. Jděte do toho a klikněte na tak velký navíc k vytvoření pracovního prostoru, a uvidíte obrazovku podobnou následující. Můžete zavolat na pracovní plochu pojmenovat, co chcete pro tuto chvíli. A ve skutečnosti jen pro jednoduchost, go a- dobře, někteří z vás již mají pracovní prostory. Nazvěme to cokoliv want-- podnikání, Harvard, čtvrtek, cokoliv chcete. Nepotřebujete popis. Můžete ji nechat v soukromí, pokud jste již mají spoustu pracovních prostorech. Pokud jste nuceni, aby to veřejná, je to v pořádku pro dnešní účely. I zde je jeden z upsells. Máte jednu soukromou pracovním místě default. Ale pokud chcete víc, budete muset platit více. V opačném případě vás nutit aby svou práci veřejnosti. Ale to je v pořádku, protože i oni zaměřit tento na open-source komunit aby se lidé skutečně spolupracovat. 

A poslední věc, která je důležitá, když je po zvolíte název a poté, co si vyberete soukromé nebo veřejné, kliknutím HTML5 velký oranžový ikonu druhý zleva, a klepněte na tlačítko Vytvořit pracovní prostor. A to bude pravděpodobně trvat minutu nebo tak, ale budete pak mít životní prostředí, jakmile vás dělat to, co vypadá připomínající co mám na obrazovce tady. Ale opět, to může trvat minutu nebo více, aby si na tuto obrazovku jakmile jste klikli Vytvořit pracovní prostor. Ale právě označili mě přes jestli mě chtěli aby se podívat na něco nebo doporučovat. Dobře. Takže budu pozadí to pro tuto chvíli. Zavolej mi přes když se zdá, že máte nějaké technické problémy. Ale opět, to by mohlo trvat Trochu za to otevřít. A pojďme do toho a mluvit o tom, to vlastně znamená, aby webové stránky, co je HTML, a jak se to všechno Propojuje jako my začínáme aby skutečně používat některé technologie. Tak to dopadá, že mohu jít na můj malý Mac tady, otevřít jednoduchý program nazvaný TextEdit, nebo na Windows jsem mohl open něco, co nazývá Notepad.exe. A mohl bych prostě něco udělat jako tohle-- "Hello, World". A pak bych mohl uložit jako hello.txt Takže tam žádná magie. To nemá nic společného s web programování, nic co do činění s HTML. Jen vytvoření jednoduchého textového souboru. Ale ukazuje se, že web Stránka je doslova jen to. Je to jednoduchý textový soubor obsahující textový které můžete psát na klávesnici, ale obvykle, ale ne vždy skončí ne .txt, ale .html nebo .htm. A vy ne jen zadávat slova v souboru. Jste skutečně používat věci zvané tagy nebo obecněji, něco zvané značkovací jazyk. 

Takže budu velmi rychle psát a potom vysvětlit následující. Jdu první zadejte tento, který říká, hej, prohlížeč, přichází webová stránka napsána v HTML. A tyto dvě věci dohromady říci, hej, prohlížeč, následující je opravdu HTML. Hej, prohlížeče, přichází Hlava nebo horní mé stránky. Hej, prohlížeče, uvnitř horní části moje strana, dát název, který zní: "Dobrý den, svět." Hej, prohlížeč, poté, co hlava my strana, přichází tělo mé stránce. A, hej, prohlížeč, tělo mé stránka by měla také říci, "hello world". Takže jaké jsou zde Význačnými podrobnosti? To je to, co je všeobecně volal prohlášení o doc typu, a upřímně řečeno, je to trochu těžké zapamatovat si to na prvním místě. Můžete tak nějak kopírovat-vložit jej. To je formální způsob říkat, hej, prohlížeč, Já používám HTML verze 5, které vyšel v poslední době poněkud. Je to kouzelné zaříkadlo, že některé lidé s nedostatečným smyslem návrhu se rozhodl dát u Velmi horní části souboru. I přesto, že je to trochu tajemné, to je všechno to means-- hej, prohlížeč, zde dodáván s verzí 5 HTML. 

Zbytek to bylo u nás již nějakou dobu, historicky, ale bylo to vyvíjí, a to Pravděpodobně došlo k Začínám být trochu jednodušší. Všimněte si několik charakteristik z toho, co jsem se zvýrazní. Je tam tyto věci s hranatý brackets-- levou hranatou závorku a pravá závorka. A všimněte si symetrii zde. A symetrie, myslím, stejně jako já mají tuto počáteční tag zde nebo otevřenou značku chcete-li, tady dole mám V blízkosti tag nebo koncová značka, která je odlišné pouze tehdy, pokud má tento lomítko na začátku slova HTML. A můžete myslet to když jsem byl nedbale navrhuje předtím, hej, prohlížeče, přichází nějaký HTML. A naopak, hej, prohlížeč, který je že pro začátek a konec HTML--. 

Mezitím hej, prohlížeč, zde přichází hlavu mé stránky. Hej, prohlížeč, to je pro hlavu. Hej, prohlížeč, zde je Tělo mé stránky. Hej, browser, že je to pro tělo. A vnitřní části, která je nějaký libovolný text pro teď. A uvnitř hlavy, zatím, Je nějaký svévolný, ale označil, tak říkajíc, text, který říká, titul mé straně bude "Hello, World". Nyní, pro tuto chvíli, můžete Předpokládejme, že prohlížečů mají only-- nebo spíše, webové stránky mají Pouze dva parts-- hlavu a tělo. A hlava je obvykle jen jako nabídkové liště se věci opravdu jen na samém vrcholu. A tělo je střevech stránky, Všechno v tom velkém obdélníku který vyplní celou obrazovku. Takže já jdu dopředu a to udělat. Budu pokračovat a klepněte na tlačítko Uložit, Uložit soubor. A budu šetřit to jako hello.html, a já jsem prostě jít dát to na mém desktopu. A já jdu neváhejte a klikněte na tlačítko Uložit. A notice-- můj Mac na je alespoň na mě ječet. Jste si jisti, že to chceš udělat? A já chtěl říct, ano, používat HTML. Znám lepší v tomto případě. A teď budu jít do mého počítače kde jsem tento soubor mít najednou. A budu poklepejte na něj. A všimněte si, že tím, že default, Chrome otevřel. To proto, že to je jako výchozí prohlížeč. A to jen říká: "Hello, World". Ale říká, že "Dobrý den, svět "na dvou místech. Všimněte si vlevo nahoře. Dost těžké přehlédnout. Je to velká a tučným písmem. A kde jinde se nezdá říkat, "ahoj, svět"? 

Diváků: Karta. 

David J. Malan: Jo, karta sama o sobě. Takže když jsem řekl šéf Stránka je vše až top-- a ve skutečnosti se jedná o titul. Je to jen v záložce zde. A můžu vytáhnout tuto kartu ven tak, aby se plést. To je nyní jen jedné kartě, a opravdu vidíme "Hello, World" tady nahoře a "ahoj, svět" tady dole. Takže docela jednoduché. Ale je to také docela jednoduché. A vlastně jsem přiblížení. Mohu změnit velikost písma právě zvětšit pro přístupnost. Ale pojďme teď něco udělat trochu zajímavější. 

Jdu do go-- Jejda, dovolte mi dostat zpátky do svého textového souboru. Vracím se k mému textový soubor, a jdu tuto situaci změnit a říkají, "Dobrý den, Disney World." Uložit. A vrátit se do mého prohlížeč a klepněte na tlačítko Načíst znovu. A teď, samozřejmě, to říká: "Disney World." A já jdu k umělému zvětšení V právě proto je lépe vidět. Takže teď, bohužel, jsem tak trochu chtít to-- ve skutečnosti, to je funkce Mac. Chci kliknout na Disney World a jít někam, jako disney.com, ale to nefunguje. Takže základním principem webu je hypertextové odkazy, odkazy, které jdou jinam. Tak jak to mám udělat? No, mohl bych jen říct, "Dobrý den, http://www.disney.com." Uložit toto. Reload. Ale to také není kliknout. A co je příjemné tady, přestože není funkční ještě, je, že se zdá, že Prohlížeč dělá doslova jen co řeknu to dělat. Tak právě píšu, jestli URL takhle, je to jen bude, aby mi ukázal URL. Musím použít značky nebo značky Jazyk, který vlastně říci prohlížeč dělat ještě více. Takže já jdu dopředu a smazat tuto chvíli. A já chtěl říct, hej, Prohlížeč jazyce kotvu tady, odkaz tak říkajíc. A hyper-reference, cíl uvedené kotvy, by mělo být toto URL. A všimněte si mé citace. Mohl bych použít apostrofy taky, ale musíte být konzistentní, a já bych obvykle stačí použít uvozovky, aby to jednoduché. Všimněte si, Chystám se zavřít tag. A pak tady jdu říkat, "Disney World." A teď potřebuju nějaký symmetry-- otevřený držák, / a, uzavřený držák. 

Tak co jsem představil? Měli jsme několik značek již. HTML, Hlava, Hlava, tělo, jsou všechny tagy, tak říkajíc, s otevřenými i uzavřenými protějšky. Ale oznámení, je to druh z zásadně odlišná. To je to, co budeme nazývat v HTML atributu. A je atribut jen pár klíč-hodnota. To je běžná věc počítače science-- pár klíč-hodnota. Je to něco jako nástroj obchodu. Klíčovou a hodnotu. Slovo a ještě něco navíc jiné slovo nebo slova. A v tomto případě je klíč href, a hodnota je, že úplná URL. A co je atribut dělá, je to ovlivňuje chování tagu. A v tomto případě musíme ovlivňovat chování značky ukotvení, protože musíme zakotvit odkaz někam. A jak to udělat, je prostřednictvím atributu. 

Takže budu pokračovat a uložte soubor nyní. Vrať se do svého prohlížeče a znovu načíst. A voila, máme na mapě Počátky legitimní webové stránky. Super-jednoduchý, ale když jsem se vznášet se nad tohle-- oznámení v levém dolním rohu, je super-small. Ale vy vidět www.disney.com. A když jsem na něj, opravdu to whisks mě pryč disney.com. Nyní je zvláštní věc Zde je to, že není best-- nejvíce prodejní URL, ale je to v pořádku, protože tento soubor není existují na World Wide Web. Existuje jako lokální soubor ve zjevně moji uživatelé directory-- / jharvard-- Pro John Harvard-- / desktop. Ale má URL. Prostě se to stane, že je místní. Bohužel, nikdo z vás mohou navštívit to, protože pokud zadáte tuto adresu URL byste říkat prohlížeče, Vyhledejte soubor s názvem hello.html na pevném disku. A samozřejmě, pokud jste Sledoval spolu ručně, to nebude existovat tam. 

Takže je to v pořádku. Stále potřebujeme cestu, nakonec, stáhni soubor do webu, ale pojďme šprýmaři odděleně pár bezpečnostní důsledky, co jsme právě viděl a svázat jej zpět na dřívější Diskuse z dnešního rána. Ukazuje se, že pokud Prohlížeč doslova dělá co řeknu to udělat, a zdá se, aby se stát, že kotva tag ovlivněna hodnotou Tento atribut volal href ale zobrazí se toto text, toto se zdá naznačit, že bych mohl dát URL V obou místech a pak znovu načíst a nyní vidět URL a přejít na adresu URL. Všimněte si, když jsem vznášet se nad dolním rohu, Já opravdu jít ještě disney.com. 

Takže pokud jste někdy byli phished-- P-H-I-S-H-E-D-- s jedním z těchto falešných e-mailů od jako PayPal vaší banky, pravděpodobně jste dostali odkazy uvnitř e-mailu, který čtete, že vám řekne, klikněte sem jít potvrdit heslo nebo potvrzení své datum narození nebo sociální nebo něco společensky inženýrství vám sdělit informace. No, mohl jsem tak trochu vzít Výhodou tohoto postupu, nemohl jsem? Mohl bych říci něco podobně, www.paypal.com. A místo disney.com, I mohli jít, stejně jako, badguy.com. Reload. A jak snadné je napálit, zejména netechnické čtečka nebo zběžně čtení Čtenář než kliknout odkaz takhle, která, pokud kliknu to-- Já vlastně nechci jít badguy.com. Nevím, co je vlastně tam. Takže paypal.com, vývěsní, je co říká, že to bude, ale samozřejmě, pokud se podívám dolů super-nízko, je to trochu rozmazaný, ale říká, že badguy.com. To je jediná říct právě teď že jdu na špatném místě. A když jsem řekl dříve, že banky Opravdu by nemělo být podnětem nebo vlakem Uživatelé ke kliknutí odkazy, toto je jen jedním z projevů toho. A je to tak jednoduché. Nyní jste protivníkem, pokud děláte něco takového a pokusit se přimět uživatele k návštěvě svých webových stránkách. Ale teď, budeme věci pěkné a čisté. Budeme pokračovat a přetočit těchto změn. Znovu načíst stránku. A já se vrátit do disney.com. 

Uvidíme, jestli nemůžeme dráždit Tento sebe trochu víc. Takže "Dobrý den, Disney World." Chystám se říct, tady dole. Možná, že budu dělat nějaký prostor. "Doufáme, že si svůj pobyt!" Uložit. Reload. Není to rea-- to není co jsem zamýšlel, že jo? Mám na mysli, když jsem ošetřovat textu soubor jako textový procesor, Co jste doufat, že by se stalo tady? Jo, mám pocit, že tam by měl být konec řádku tady, tak to je kočárek nějakým způsobem. Ale to je ve skutečnosti úmyslné, protože stejně jako dříve, prohlížeč je teprve ve chvíli, to, co jste to říct dělat. Jsem to řekl, aby rozbít linky. Já jsem to řekl, aby pohybovat dolů, a to i i když intuitivně, mám pocit, že jsem to udělal. Tak to dopadá potřebujeme trochu víc značkovací, a budu opravit to následujícím způsobem. Jdu do této předmluvě prvního ahoj s tím, co se nazývá bod tag. A pak budu pokračovat a zabalit tuto druhou větu v jiném tagu odstavce, i když jsou super-krátkých odstavců. Teď budu šetřit. Reload. A teď máme, že prostor, a my jsme tak nějak mají sémantiku dvě oddělené body. 

To je vše v pořádku a dobré, ale to by bylo pěkné přidat obrázek na tuto stránku, takže budu jít hledat Mickey Mouse na Google Images. A jen tak pro zábavu, jsem chystá chytit tento obrázek. Chystám se jít dopředu a hned chytit URL tohoto obrázku, i když tam je něco jiného způsobů, jak to udělat. Pro tuto chvíli, já jsem prostě jít ke zkopírování URL. Chystám se jít zpět do mého textu soubor, a budu zde říci, img src = cenovou nabídku konec citátu že URL, super-long. A pak představou obraz je trochu jiný. To fakt není představa startování obraz a konče obraz, jako počáteční značka koncový tag. Tak to je trochu divné me sémanticky, jak to udělat, mít detailní značku obrázku. To není správné. Je to naprosto správné, a to je podporováno ale je tu zkrácený zápis. Mohu druh souběžně otevírat a zavírat stejnou značku, a že učiní prohlížeč spokojeni. Takže je to jen trochu stručnější pro věci že koncepčně opravdu ne smysl začínat a končit. Prostě tu jsou, nebo nejsou. 

Takže jdu zachránit to a vrátit se mého "Hello, world", str a obnovte. A je to trochu mimo kontrolu, protože ten obraz je vlastně trochu velký, ale to je v pořádku. Mohl jsem to změnit velikost v programu. Nebo víte co. Jen demonstrovat, že jsem bude vlastně říci že šířka této věci by měl jen 200 pixelů, 200 tečky. Nech mě jít dopředu a uložit a znovu, a nyní stránky vypadá trochu rozumnější. Ale všimněte si vzor. No, já jsem trochu naučil vy všichni HTML v nějakém smyslu, přinejmenším koncepčně, protože všechny HTML je Tyto tags-- otevřené tagy, uzavřený tagy, a atributy, které modifikovat jejich chování. A zdá se, že každý tag může mít nula nebo jeden nebo dvě nebo více atributů, každý z který dělá něco trochu jiného. Nyní, jak víte, co existuje? Stačí poslouchat někoho stejně jako ti povím, co existuje, nebo si jen věnované asi za tutorial na HTML, a je to opravdu to jednoduché. 

Opravdu, když jsem byl undergrad Před lety se naučil HTML, jeden z mých matematiky výuky asistenti právě strávila trochu času mi doučování Pro jako půl hodiny, hodinu, a pak jsem byl na cestě. Byl jsem na cestě k vytváření nejohavnějším webové stránky vůbec, který, zdá se, nemám Opravdu postupoval dál. Ale jde o to, že jakmile vás porozumět těchto jednoduchých ideas-- pokud tajemné text-- ale tyto jednoduché představy o spuštění myšlenku a zavírání myšlenku, udržování všechno pěkně vyvážené, hledá něco nahoru, modifikování Chování této značce, to je opravdu vše tam je k tomu. A ve skutečnosti, pokud bychom teď jít něco jako google.com-- ve skutečnosti, pojďme si místo trochu víc reasonable-- stanford.edu. A já jdu k zobrazení, Developer, Zobrazit zdrojový kód. Je to ošklivé, ale notice-- a budu přiblížit oznámení některé věci, které je již obeznámen. Tam je to tady, což je prohlížeč. Přichází HTML5. Tam je HTML. Zdá se, že je tu atribut, který jsem neměl použití, které určuje jazyk stránky a to může pomoci s automatickým Překlad a tak podobně. Zde je hlava stránky. Tady je titulní strana Stanfordu of. Tam je značka já ne mluvit o yet-- Meta tag. Je to jen jakýsi Informace o pozadí. Pomáhá s SEO, nebo optimalizace pro vyhledávače-motor, nebo výsledky vyhledávání Google, nebo podobně. Ale pokud budeme hledat dál, udržet hledáte, tady je tělo tag. A je tu další svazky Značky jsme nemluvili o dosud. Ale Div je jedno pro rozdělení stránky. Je to jako neviditelné obdélník pokud jste trochu chtít mentálně rozdělit stránku do různé jednotky online. A pak spousta divs I vidět, něco jako třída, ale vrátíme se k tomu. 

To je interesting-- formulářů. Formuláře jsou po celém webu. Jakékoliv vyhledávací pole jsi někdy použitý je forma. A tak, pojďme skutečně vidět. Formulář. Akce. Účinek tohoto formuláře z jakéhokoliv Z historických důvodů je to, že URL. Metoda je "post". Ukazuje se, že požadavky HTTP může používat sloveso "dostat", jako jsme viděli předtím, nebo "post". A uvidíte rozdíl z toho za chvíli. Pojďme skutečně vidět, co to je. Nech mě jít zpět na stránku Stanfordu. Jaká forma to mluví o, o tom myslíš? Co vyskočí na vás? 

Diváků: Vyhledávací pole. 

David J. Malan: Jo. Tak se v pravém horním rohu Zde je to vyhledávacího pole. A to je způsob, jakým realizován to-- tag, který je doslova pod širým držák forma. A pak pojďme něco hledat. Pojďme hledat kamaráda z mine-- "Nick Parlante." Enter. A samozřejmě, to šlo trochu jiný URL. Nech mě jít zpátky. Pojďme hledat "kurzy." Sakra. Šel na jinou adresu URL. Takže, Stanford je přidání nějaké kouzlo že oni mě brát na adresu URL které jsme viděli v atributu tam akce. Ale tato forma je zde realizována ryze prostřednictvím této přirážky tady, tyto značky. Ve skutečnosti, zde je vstup pro typ vyhledávání, které chcete. Zde je vstup pro jiný typ vyhledávání. Zde je vstup pro samotný řetězec. A tak cílem není zabalit naše mysl kolem všech těchto značek ale prostě vidět. Je to prostě otevírání a zavírání tagy a hledají věci. To jo? Victorie? 

Diváků: [neslyšitelné] David J. Malan: To je dobrá otázka. To je trochu složitější vidět. Dovolte mi, abych se vrátil k tomu otázka několika málo minut když se podíváme na takzvaný CSS, nebo kaskádové styly, a můžeme se pokusit odvodit jak hodně ze stránky. Takže pokud bychom se teď podívat na google.com, podívejme se, co jejich strana vypadá. Ty by they're-- to roztomilé dnes. OK. Vše hotovo. V pořádku, takže View Source. Člověk by si myslel Google má opravdu pěkné zdrojový kód. Takže, zdá se, že to, co se tady děje? A ve skutečnosti, to není ani HTML. To je něco, co nazývá JavaScript. A pojďme dál a dál. Já ani nevím, kde začíná stránky. Chystám se použít příkaz F, otevřený držák HTML. Dobře, tady to je. Zjistil jsem, začátek stránky a tam je tolik věcí zde. 

Co se vlastně děje? No, víte co, můžeme vyčistit to. Pokud bych místo toho jít do toho Zkontrolujte Panel nástrojů, tato speciální diagnostický nástroj, a nechoďte do sítě, kde jsme jít dál dnes, ale když jdu na Elements co je opravdu pěkné je to, že prohlížeč má hodně mnohem lepší oči než já. A prohlížeč umí číst že nepořádek z webové stránky, že HTML mailu jsme právě Podíval se na, a to může rozebere ho nebo číst a analyzovat a přeformátovat v pěkné člověka příjemným způsobem. Takže to, co jsem teď viděl V této obrazovce zde pod Elements, přesně stejný obsah, ale už odsazeny všechno, obarvit, že jsem to, ale to je přesně stejný text že jsem si stáhnul ze serveru. 

A co je teď Nice je vidím v těle, pro instance-- oznámení stránka je stále složena of jen hlava a tělo, a mohu hierarchicky ponořit zde. Všimněte si, že Google Zdá se, že aby divs-- tohle a tohle. Mohu rozšiřovat to. Je tu celá řada dalších divs. Takže je to trochu složitější. Ale počkej. To se zdá být mnohem víc čitelný, relativně, než toto. Proč je Google trapné Samotný pouhým zasláním tento obrovský nepořádek kódu některých třídit jen realizovat něco to vypadá tak jednoduše na první pohled? Stejně jako, proč ne oni přidat více mezer? Proč to stisknutím klávesy Enter, jako jsem to udělal? Podívejte se, jak dobrý jsem byl při psaní webové stránky. Trefil jsem Enter tak pilně. odsazeny jsem tak vše Je tak hezká a čitelný. Proč Google nepraktikuje totéž? 

Diváků: [neslyšitelné] David J. Malan: Dobrý. Velmi fér. Nemají některé osoba u Googlu manuálně aktualizace domovské stránky ještě. Není to už 1999. Takže oni mají software. Mají další nástroje, které generovat dynamicky jsou HTML. Samozřejmě, že kód sám o sobě byla napsána lidmi, ale skutečnost je taková, je to docela spravedlivé říci, prohlížeč rozhodně není jedno, jak chaotický kód je. Ale je tam ještě závažný technický důvod že Google distribuuje své HTML Kód v takové nedbalý, zdánlivě Drtivá způsob, jak vše zabaleno dohromady s velmi málo way-- velmi málo ve způsobu formátování jako já. 

Diváků: [neslyšitelné] 

David J. Malan: Rychlejší? Proč? A co jsi řekl, Lydie? Rychleji? Proč rychleji? Diváků: [neslyšitelné] David J. Malan: Existuje žádný prostor pro čtení. To jo. Takže přemýšlet o tom, co je to prostor. Takže každý znak na klávesnici se určité množství prostoru pro reprezentaci, buď fyzicky, to líbí zabírá že mnoho prostoru, nebo nějak Vespod digestoř, která vyžaduje paměť. A jako aside-- a my mluvit víc o tomto tomorrow-- každá postava na klávesnici obvykle vyžaduje 8 bitů, nebo jeden bajt. Takže vzor 8 nul nebo Ti, nebo jen jeden bajt, jak jsme by lidé obvykle říkají. Tak to je malý, ale je to stále non-nula. Je to stále určité množství prostoru. Takže pokud inženýr nebo Google hity mezerníku jen jednou, a předpokládejme Google-- je to super-popular-- Předpokládejme, že miliarda lidí navštívit jejich domovskou stránku denně, nebo nějaký počet osob navštívit domov strana A miliardy krát denně, kolik dalších bytů má tu Softwarový inženýr prostě stojí Google tím, že udeří jeho nebo její Mezerník jednou? 

Diváků: [neslyšitelné] David J. Malan: Ne tak docela tak špatné. Jen jeden krát byte miliardy. tak je-- Diváků: 8 miliard gigabajtů. David J. Malan: Není 8000000000. 8 miliarda bytů. Ale 1GB. 1 GB bude měrná jednotka. Jestliže on nebo ona dělá dva prostory, 2 GB. Tři gigabajtů. Právo? To váhy nákladně. A tak v případech, jako je Google, která udělil, jsou extrémní případy, existují i ​​jiné problémy, které vznikají právě tím, že velmi rozumné rozhodnutí nebo při velmi prosté lidské činnosti, proto, že má tento zvětšený účinek. Takže jeden z důvodů to vypadá tak stlačený je přesně tak, jak to bylo Victoria said-- Jen generovaný počítačem tak jako tak. Takže žádný velký problém. Nechte prohlížeč na to přijít. Ale také záměrně nemá moc prostoru, proto, že prostor není nutné. A prostor skutečně stojí peníze. 

Je to buď stojí čas, protože jen aby se zasadila že mnohem více dat z webu Google.com hlavní stan jen má vzít nějaké množství čas, i když je to milisekund nebo mikrosekund, ale to sečte přes tak mnoho uživatelů, nebo spíše, to asi stojí peníze. Google zřejmě připojí k někdo jiný na světě, jeden z těch, peering body, a pokud budou mít nějaký druh finančního vztahu přičemž jejich data stojí peníze, mohli by stejně minimalizovat, jak velké množství dat oni plivat na Jejich připojení k internetu. 

Takže legrační věc, ale nakonec, nebo možná uklidňující věc, je to, že i když to vypadá nesmírně ohromující, na konci dne, je to stále přesně stejné zásady jako Tento velmi jednoduchá stránka zde z HTML strana. Takže jen shrnout a tak, abyste mají kanonickou verzi, pokud jste nebyli Následující spolu volbou zde, zde může být nejjednodušší webových stránek, takže něco hrát s snad později. 

Dobře, pojďme zavést Pár dalších nápadů teď. Chystáme se zavádět něco, co nazývá styl značky. Můžeme stylizovat tuto stránku V další zajímavé způsoby. Takže zatímco HTML e-mail vše o značkování data, druh uvedením do A browser, jak strukturovat data, kam umístit to, CSS, nebo Kaskádové styly, je druhý jazyk, který obvykle dostane smíšeny s HTML jak budeme see-- ale můžeme čistit že až do moment--, který bere to finále míle, a to ho stylizuje. To dostane barvy tak akorát, velikostí písma tak akorát, polohovací tak akorát. Je to všechno o estetice nebo formátování, ne o Základním samotná data. A nejjednodušší způsob, jak ukázat toto je možná příkladem. Takže jdu projít mého jednoduchého textového souboru. A za chvíli, budu chodit k nám prostřednictvím procesu dělat to sami. 

Chystám se vrátit do svého souboru tady a obnovte stránku právě Pro potvrzení, jak to vypadá. To je to, kde jsme teď. Mám pocit, že děti by se nyní mají nějaké barvy na této webové stránce. Takže já jdu sem nahoru do záhlaví stránky. A já udělám styl, / styl. A pak uvnitř toho jdu sdělit tělo mé page-- a to formátování, v první pohled možná trochu divně, ale konvenční. Chystám se říci, že na pozadí barva této stránce by měly být zelené. A to je bohužel druh není nejlepší návrh. Všimněte si, že dříve ve světě HTML, Řekl jsem, že atributy jsou tyto dvojice klíč-hodnota. Něco se rovná cenovou nabídku konec citátu "něco". Ve světě, který byl CSS navržený některými jinými lidmi, oni se rozhodli, že v jejich world, klíč-hodnota páry by bylo slovo něco tlustého střeva. Takže je to stejná myšlenka, ačkoli. Je to sdružující hodnotu s některými klíč, který nějakým způsobem ovlivňuje chování této stránce. 

A asi tušíte. Co je to pravděpodobně bude dělat to iv případě, že jste nikdy Viděl HTML nebo CSS předtím? Diváků: Změna barvy pozadí. David J. Malan: Jo, změnit barvu pozadí. A specificky barva pozadí těla. Ale pokud tato Tělo teď je web page-- je to jediná věc, pod záhlaví really-- to asi bude ovlivní to samé. Takže uvidíme. Zachraňme to. Jít sem a znovu. Je to docela odporný. A co se děje Zde je vedlejším účinkem. Jen jsem si vybral tento obrázek náhodně. Proč je zelený není prostupující za Mickey? Diváků: [neslyšitelné] David J. Malan: Přesně tak. Ukazuje se, že obrazy, pěkný mnoho všechny obrázky, které bychom mohli použít, jsou všechny rectangles-- obdélníků. I v případě, Mickey má některé křivky pro sebe a má zázemí, že pozadí musí být něco. Musí být bílá. To má být černý nebo něco jiného. To může být transparentní. A ve skutečnosti, mohl bych otevřít Mickey Mouse zde v programu s názvem Photoshop nebo něco podobného a změnit všechny ta bílá pozadí na průhledné, takže zelená bude prosvítat. Ale to je něco, co by bylo třeba požádat o sobě nebo grafik nebo designer v mém společnost, například, dělat, zejména proto, že jsem právě půjčil tenhle z internetu. Ale to je důvod, proč se to děje. 

Tak co ještě můžeme udělat? No, možná chceme říci, že jsme Opravdu doufám, že si můžete vychutnat svůj pobyt. A pro důraz, chci aby tento silný, a tak řeknu otevřený a silný zavřít silný a pak znovu načíst. A je to trochu těžké zobrazit na projektoru ale snad opravdu teď vyskočí na vás trochu víc. Takže můžete přidávat kurzívu v tomto způsob, tučné obklad tímto způsobem. Mohli bychom změnit barvy. Ve skutečnosti je jen pro zábavu, jsem jít dopředu a to udělat. Nemám opravdu rád, jak my odstavce jsou to blízko u sebe, takže jsem mohl udělat něco takového. Chystám se říct, prohlížeč, se mění každý bod značku mají, pojďme say-- ve skutečnosti, víte, co, pojďme sladit to text-align, centrum. A opět, vím, že to jen Vzhledem k tomu, někdo mě naučil nebo Vyhledal jsem si to v online reference. Takže dovolte mi zachránit to. A, ach, teď jsem soustředěný obraz tam. A skutečně, víte co, pokud Pohnu obrazu do odstavce tag-- takže třetí odstavec, i když to není text. Zachraňme to a znovu. Nyní je stránka začíná vypadat druh of-- Myslím, že je to stále dost ošklivý, ale alespoň to vypadá, že jsem strávila Dvě minuty namísto jedna minuta dělat to. 

A tak postupně, můžeme učinit Tyto estetické změny teď stránce? Jsem příliš nezměnil údajů v systému Strana jiné než přidáním slova vážně. Přidal jsem metadata, chcete-li. Hej, prohlížeče, aby se Slovo "opravdu" tučně. Ale data není silná. To je metadata. Data jsou "opravdu". Takže máme ještě některé stejné pojmy jako předtím. Nyní, samozřejmě, to není na webu, takže budu dělat jeden poslední krok zde. 

Chystám se jít do hello.html a jen zvýraznit a kopírovat to. A teď jdu jít do Cloud9, který Tě projít za chvíli. A šance, že budete brzy, pokud Není již na obrazovce, jako je tento. A dovolte mi, abych vám rychlý Prohlídka co Cloud9 ve skutečnosti je. Takže znovu Cloud 9 je Tato služba cloud-based že vy a mi dává iluzi mít svůj vlastní virtuální stroj v cloudu, technicky kontejner v cloudu, že máme plné oprávnění správce. Takže teoreticky, nikdo jinde ve světě nemá Přístup na obrazovku Jsem při pohledu na právě teď, snad s výjimkou lidí kteří běží na webu, protože technicky mají fyzický přístup a tak dále. 

Tak co vidíme v tomto prostředí? Chystám se vzdálíte, protože je to trochu malé. A dovolte mi připomenout, přes Zde jen na chvíli. Na levé straně mého a vaše obrazovce, je tu prohlížeč souborů na levé straně. Takže svým duchem podobat Mac OS a Windows. To jsou všechny Soubory na mém účtu. A ve výchozím nastavení, pokud vaše Účet je jako moje, uvidíte nebo brzy vidět helloworld.html a readme.md. Tady na pravé straně, to je kde jsou mé textové soubory se chystáte jít. Pokud jste někdy používali Microsoft Word nebo Poznámkový blok nebo TextEdit, To je slovo, moje editace souborů se chystá jít. A pak nejobskurnější Funkce tohoto prostředí že nebudeme opravdu potřeba použít, je sem volal okno terminálu. Pokud jste použili DOS od minulý rok, to je Linux nebo Linux ekvivalent DOS. Je to text-based interface-- žádné kliknutí myší, ne tažením. Jediné, co můžete udělat, je zadat příkazy, ale tyto příkazy může vytvářet soubory, přesouvat soubory, otevřené adresáře, v blízkosti adresáře, udělat libovolný počet věcí. Ale teď, prostě budeme trávit čas tady. 

A tak jdeme na to. Pokud jste v této Prostředí, které byste měli bylo, kdyby jste vytvořili pracovní prostředí Již, jděte do toho a prostě jít nahoru do souboru, Nový chvíli. A to vám dá nový Karta tady uprostřed. A já jen-- a pojďme jděte do toho a toho dosáhnout. Pojďme dál a teď se souboru, uložte a jít dopředu a nazývat to hello.html, nesmí být zaměňována s helloworld.html, který přišel se svým novým účtu zdarma, což je jen ukázkový soubor. Uvidíte, že se náhle objeví, s největší pravděpodobností na levé straně, a karta bude stále otevřený. A dovolte, abych vás povzbudit nyní znovu tento soubor nebo některé jejich varianty. A pokud si není úplně vidět jej na obrazovky, to je totožný s sklíčka že máte pravděpodobně na jiné kartě. 

Takže ve zkratce, aby vaše první webové stránky, uložte jej a pak za chvíli, Ukážu vám, jak se může skutečně zobrazit toto. Ale změnit alespoň jednu věc. Změnit HelloWorld na něco vlastního výběru, takže jste přesvědčeni, že je to vaše soubor a ne ten, který právě jsem vytvořil. Dobře. A když jste ready-- ne rush--, když jste připraveni, jděte do toho a uložte soubor Po provedení těchto změn. A pokud kliknete na Běžet tlačítka nahoru top, toto měl otevřít novou kartu, která bude vyprávět co máte URL můžete navštívit soubor na, ale může to chvíli trvat, než k quote konec citátu "start Apache", který je název webového serveru. Takže buďte opatrní a dělat přesně co je v souboru nakonec. Takže teď, budu přiblížit. Mám-li začít psát open-držák HTML, vývěsní to mě výzvou dokončit svou myšlenku. A když jsem dokončil svou myšlenku, ji automaticky mi dává uzavírací tag. Ale očekávání se pak budu hit Vstoupit, a pak se přesunout tam uvnitř a to hlavu dovnitř a pak jsem si tělo uvnitř. A je to trochu divné na první, protože to dělá práci za vás, ale uvědomit, že v konečném důsledku to vám ušetří stisky kláves. A ve skutečnosti, velmi častým znakem programovací prostředí v těchto dnech a to jak pro vývoj webových aplikací, jako je Tento a skutečné programování, které budeme hovořit o budoucnosti, Právě tyto auto-kompletní funkce, věci, které prostě umožňovat programátor nebo designer psát méně úhozy dokázat totéž. Někdy je to dobře, ačkoli. Někdy je to jen nepříjemné. A opět, jakmile jste přepisována posuvná nebo nějakou její variantu, můžete kliknout na tlačítko Spustit do vrcholu. A pak se na dně okna, budete informováni na to, co URL můžete navštívit své webové stránky. Dolu, například, je v business-daharvard.c9users.io a tak dále. Dobře, takže, ať me-- nějaké dotazy? Jakékoliv další otázky týkající se jen na to, tento pracovní předtím, než jsme přidat funkce? A dovolte mi navrhnout, jen dostat lidi comfortable-- protože to je jedna věc jen copy-paste slepě, co jsem udělal. Ale jen proto, aby lidé zápasit s alespoň jednou to-do, Jdu zapnout nějakou hudbu. Chystám se navrhnout seznam věci, které mohou potenciálně přidat. A můžete samozřejmě použít Google. A proč ne my jen navrhuji pokusu o vyřešení alespoň jeden zde zvláštní problém. Takže, pokud jde o značky, dovolte mi, abych znovu použít tohle. 

Ve skutečnosti, dovolte mi, abych dal že v textové podobě. Řekněme, že mezi značkami bychom mohli použijte zde jsou některé značky tady. Viděli jsme odstavce značku. Teď to bude auto-kompletní. Odstavec tag, kotva tag. Řekněme, že chcete aby se něco větší, takže je možné jako-- Rozpětí tag může pomoci. No, možná budete potřebovat nějakou pomoc za to za chvíli. Viděli jsme div. Uvidíte tu tabulku. Existuje něco, co nazývá tr, td. Th, td. Vrať se k tomu za chvíli. Co jiného by mohlo být užitečné? Tam je silná. Tam je důraz, nebo spíše em. There's-- co jiného Možná máte chuť tady? No, budeme trvat Podívejte se na to společně. Formulář, který jsme viděli. Tam je forma. K dispozici je vstupní a několik dalších. Dobře, takže jdeme na to. Chcete-li přijmout Victorie otázka, dovolte mi nejprve jen ujistit, že všichni schopný dostat své ahoj práci. Pak dovolte mi představit pár dalších nápadů. Pak necháme lidi řešit nějaký problém na vlastní pěst. Pak budeme vlastně vracet do tohoto pojmu formuláře, a my vlastně re-implementovat spolu front-end rozhraní, tak říkajíc, pro společnost Google. Budeme používat Google jako back end a nechat je dělat těžkou práci bude hledání, ale budeme znovu předek Google a vyhledávacího formuláře že mají na své vlastní domovské stránce. A tak se vrátíme k tyto značky za chvíli. 

Tak tohle bylo to, co jsem Navrhovaná před chvílí. Můžeme přidat stylizaci do A stránky odpovídá tohoto stylu tagu a můžeme stylizovat pozadí barva, zarovnání textu, ať už je to střed nebo vlevo či vpravo. Ale velmi rychle byste najít nebo web designer by se zjistit, že toto se stává trochu nepraktický, proto, že děláte to, co je volal smíchání obsahu s prezentací z nich. Ty smíchání svá data a estetika těchto látek. A ve skutečnosti, pokud se domníváte, co se bude dít v průběhu time-- To je velmi malý webové stránky, samozřejmě. Ale když jsem přidat obsah na tuto stránku a přidám styl na tuto stránku, stránky velmi rychle dostane delší a delší a delší. A předpokládám, že chci mít druhý webovou stránku, která sdílí některé z těchto atributů. Předpokládejme, že můj druhý webové stránky pro můj site-- Vám chci všechno centrum, i já chci všechno se zeleným pozadím. Jsem docela hodně bude muset zkopírovat a vložit některé z těchto řádků do tohoto druhého souboru, který se cítí v pořádku. To bude problém vyřešit. 

Ale co když chci třetí strana nebo 30. strana nebo strana 40.? Teď bude kopírovat a vkládání hodně duplicitního kódu ve více souborech. A tak předpokládám, že I rozhodnout, nebo mi bylo řečeno, hej, nejsme s použitím zeleném pozadí už ne. Chystáme se začít používat oranžově. Co budete muset změnit? No, budete muset změnit tento styl ze zelené na oranžovou, jak mnoha místech? Stejně jako 30 nebo 40 míst. Je to únavné. To je náchylné k chybám. K dispozici je celá řada důvodů, kde byste nechtěli vyvolat že druh bolesti na sebe. A tak nebylo by to bylo hezké kdybychom mohli vzít to, co jsem právě vložit mezi těmito dvěma žlutý tagy, tyto tagy styl, faktor ho a dát všechny mé stylizace do jednoho centrálního souboru že všechny 30 nebo 40 z mých dalších souborů půjčovat z nebo nějakým způsobem odkazovat, ne na rozdíl od sítě diagramy jsme dělali předtím? 

Takže když jdu sem, že jsem bude ve skutečnosti navrhnout že nahradit Styl štítek s něčím volal link tag, který Je hrozně, hrozně pojmenovaný, protože nemusíte používat link tag vytvořit co my lidé známe jako odkaz na webové stránce. Za to, že budete používat která značka? Jak si vytvořit odkaz na webové stránce? Publikum: a. David J. Malan: A, nebo kotva tag, který šel do Disney předtím. Odkaz tag zde říká: tohle-- odkaz na soubor nazvaný styles.css, vztah, ke kterému bude, že je to moje stylů. Takže to je jedna z S letech v CSS-- kaskádové styly. Styl sheet-- dva S letech v CSS. Kaskádových stylů. To jen znamená, hej, prohlížeč, přejděte najít styles.css na místním serveru a použít ji jako svůj stylů, což znamená, že uvnitř tohoto souboru bude všechny stylizace, že jsme právě udělal. A tak to, co tento soubor může vypadat jako je tato. A budu dělat to je rychlý Například proto, že nepotřebujeme dostat příliš do plevel zde. Ale když jsem kopírovat to, co chci navrhnout je to, že programátor vytvořit nový soubor, vložit do těchto lines-- whoops-- vložit do těchto linkách, uložte jej jako styles.css, a pak v Druhý soubor, odstranit všechny, které a nahradit ji namísto s tímto link tag. Takže když jsem propojit href = "styles.css" vztah musí být "stylesheet" V blízkosti tag. Ulož to. Vraťte se zpět do mého helloworld. Reload. 

Doslova se nic nestalo. To je dobrá věc, protože to znamená, že je vlastně všechno funguje. Dokázat tolik, že bych učinit překlep, a říkám to "styles.css" s velkým S, který je nesprávné, a pak znovu načíst. Nyní můžete vidět, že prostě nefunguje. A teď, proč? Dobře, pojďme použijte Technika z dřívějška. Nech mě jít dopředu, a můj prohlížeč, v Chrome, jsem chystá otevřít, že zvláštní Karta sítě jako dříve, a nech mě znovu načíst stránku. Co jste nepřekvapilo, že teď vidět? Nebo možná jste překvapen, když to viděl. Ať tak či onak, to, co vidíte teď? Diváků: [neslyšitelné] David J. Malan: To nebyl nalezen. Proč je to nebyl nalezen? No, Styles.css-- kapitál S- neexistuje. jej nesprávně pojmenovaný jsem. Jednoduché překlep. Ale já jsem stále pochopitelně nyní 404, protože server říká, hej, to není nalezen. Doslova, nevím kde tento soubor je. Takže jako výsledek, prohlížeče ukazuje, co je v jejích silách, syrové obsah stránky, který byl 200, HTML, ale stylizace nemůže Poté budou přidány. A to je to, co se rozumí pod pojmem kaskádové. Můžete nějak přidat po, a to tak nějak zjemňuje estetiku webové stránky. A dokonce můžete přepsat ty, styly s ještě dalších StyleSheet souborech jestli chceš. To není nalezen, i když v tomto případě, protože samozřejmě to nesprávně pojmenovaný já. Takže budu muset napravit jako první. 

Tak pojďme do toho a navrhují následující. Pojďme dál a to udělat. Počínaje možná Váš helloworld soubor, dovolte mi pozvat pár z funkce návrhy. Takže, Victoria, co jste chtěli aby nějaký text větší, že jo? V pořádku, takže můžeme dělat, aby textu větší. A budeme každý trhat off jen jeden problém k řešení. Udělat textu větší. Nebudu obtěžovat psát, když jsme mají kulka technologii támhle. Takže některé problémy. Takže budeme snažit aby textu větší. Dobře. Co jiného by někdo navrhnout? Co jiného můžeme chtít dělat na webové stránce? Pojďme přijít s krátký seznam věcí, a pak přenést do Skupina přijít na to. 

Diváků: [neslyšitelné] 

David J. Malan: OK, umístění textu na různých stranách stránky? Dobře. Něco jiného. 

Diváků: [neslyšitelné] David J. Malan: Je. Takže gif je jen jiný formát souboru. Jen jsme použili, co, je png nebo jpg asi? Použili jsme jpg. Pokud jste zvědaví, nadměrný odpověď na vaši otázku je jpg se obecně používá pro fotografie, protože podporuje milióny barev nebo 24bitové barvy. GIF se obvykle používá pro, například, internetový mem tyto days-- animace, jako animované soubory GIF. Ale to se stává použít menší barvu paleta, jen 256 možných barev, ale podporuje transparentnosti a animace. A pak je tu png, který podporuje transparentnosti a více barev ale ne animaci. Takže je to trade-off. Takže přidání gif, ačkoli, by být funkčně ekvivalentní k přidání png nebo jpg. To jo. zdrojový obraz rovná. Takže něco jiného. Pojďme přijít s něčím, jsme poslali Victoria dělat tady. 

Diváků: Přidejte tlačítka pro formulář. David J. Malan: OK. Tak přidat tlačítka na formuláři. A budeme dělat, že jeden dohromady. Tak to bude perfektní segue hned po této výzvě. Něco dalšího? Co můžete udělat? Webový cítí velmi neohromující pokud je to vše, co můžeme dělat. Diváků: Změna barvy textu. David J. Malan: Změna co? Publikum: Barva textu. David J. Malan: Změna barvy textu. Dobře. Tak jdeme na to. Jen znovu tak, že nejste, jen nazpaměť, dělá přesně to, co dělám, Jdu se obrátit na hudbu pro asi pět minut zde. Rádo se používat Google. Rádo se mě ptát, a Budu šeptat náznak do ucha. Rádo se podívat více než na ostatních ramen. Ale řeší jen jeden z těchto problémů. Ale uděláme ten poslední, na tvoří jeden, kdybychom mohli společně. Tak pět minut řešit některé z těchto problémů používáte Google, intuice, nebo jakákoli jiné prostředky k dispozici. 

[MUSIC PŘEHRÁVÁNÍ] Dobře. Žádné starosti, pokud chcete zachovat šťourat, ale budu kazit pár z těchto odpovědí. Takže první návrh z Victoria byla dělat textu větší. Takže tam je několik způsobů, jak toho dosáhnout. Já jsem v současné době obnoveny obrazovka na tuto velikost, když jsem zvětšených uměle prostě vidět věci. A jdeme na to. Nech mě jít dopředu a urvat některé generické latinský text Jen tak máme něco pracovat. Tak dej mi jen jeden okamžik. Udělám tři odstavce. OK. Bude to lepší příklad. Takže pro zvědavé, v můj hello.html, jen jsem vložit tři nesmyslný Latinské body Jen tak máme nějaký text pracovat. A Victoria cílem bylo učinit některé z textu větší. Takže jsem mohl, stejně jako dříve, jít sem. A nech mě to udělat správným způsobem. Budu mít odkaz tag, který odkazuje na soubor s názvem "styles.css," vztah z nichž je opět "stylů." A pak budu tou výjimkou, že a otevřít tento "styles.css." 

Tak, jako dříve, mám Schopnost v tomto souboru CSS skutečně přepsat výchozí estetika webové stránky, a výchozí estetika, Samozřejmě, jsou docela nudné. Je to něco normální velikosti písma, černá text, bílé pozadí, a tak dále. Takže předpokládám, že chci, aby se všechny tohoto textu větší. Mohl bych udělat pár věcí. Podle mého styles.css souboru, I Dalo by se říci, víte co, platí následující Tělo mé stránky. Jděte do toho a dělat velikost písma 24 bodů, což je číslo bych mohl použít v aplikaci Microsoft Word. Nech mě jít zpátky do mého webu Stránka tady a znovu, a můžete vidět, že už je mnohem větší. A můžeme dostat trochu blázen, stejně jako můžeme na desktop-- aby bylo 96 bodů. Reload. A je to stále málo nepraktický v tomto bodě. 

Ale můžu být trochu přesnější. Namísto použití této stylů k tělu mé stránky, co jiného bych mohl použít ji na místo, jaké další značka, která by ještě funkce stejným způsobem? 

Publikum: p tag? David J. Malan: P štítek. Takže hlava nebude správné, protože hlavy, nemůžete vlastně ovládat estetiku. Je tam, nebo ne formou textu. Ale p tag-- můžu ponořit trochu hlouběji, tak říkajíc, na odstavec tagy. A i když jsou tam tři, To je naprosto v pořádku, protože v CSS, když jsem jen říct "p", tato znamená platí následující na jakoukoli značku, která odpovídá této volič, volič jen je název tagu. Takže tam, kde vidíte "P", platí velikost písma, a pojďme dělat to více rozumné again-- 24 bod. A víte co, Jen pro jistotu, udělejme barvu red jen na chvíli. A teď když jsem znovu, teď vidět tři ošklivé body. 

Ale teď předpokládejme, že jsem nějak of-- Chci první odstavec vyskočit na uživatele. Já nechci jen zvýšit velikost písma všeho. A tak jsem se skutečně chtějí identifikaci nebo rozlišovat mezi těmito body. Takže pojďme se zbavit červené, protože to je jen trochu laciné, a pojďme do toho a aby se velikost písma 12-bodový ve výchozím nastavení, takže jsme zpátky k něčemu trochu rozumnější. A teď chci jen ke zvýšení velikost písma v prvním odstavci. Zvládnu to v několika způsoby, ale jeden způsob, jak to je snad nejvíce instruktážní at the moment je následující. Nech mě jít a říct, toto odstavec má jedinečný identifikátor "první". Mohl bych zavolat tuto co chci. Mohl bych volat toto "foo" nebo jakékoli jiné slovo, ale já jdu dát mu nějaký sémanticky smysluplné jméno jako "první". To je jedinečný identifikátor, ID, na můj první odstavec. 

Co mohu dělat teď v mém stylů Je o něco přesnější. Místo toho říká, platí následující p tagu Mohu říci, že following-- platí následující, nebo zvolte, HTML element který má jedinečné ID "první". Co chci, aby se na něj vztahují? Velikost písma 24 bodu. Takže mám dva selektory teď. Jeden dělá všechny body 12 bodů. Ale tento jeden, zejména proto, že jde second-- to přijde minule v file-- to má kaskádový účinek. Právě jsem udělal všechnu mou Značky odstavce 12 bodů, ale to teď kaskády a přepíše, že pro jakékoliv prvky na stránce jakýkoli štítek na stránce, jejíž jedinečný identifikátor je citát konec citátu "první". A hashtag v této souvislosti prostě znamená "jedinečný identifikátor." Nechci dát do HTML souboru. I tady, stačí říct citát konec citátu "první". 

Tak ať mi znovu. A teď vidím, ah, OK. Myslím, že to není tak pěkný, ale je to trochu jako se samotným předmluvě ke kniha nebo něco takového, kde první odstavec je větší. Mohl by to být ještě přesnější jen první písmena, ale přinejmenším Já jsem vykonával větší kontrolu. Nyní maybe-- možná chci to udělat příležitostně z jakéhokoli důvodu, a tak nechci to vztahovat pouze na jeden HTML tagu. Spíše, pojďme say-- pojďme také udělat následující. Class = "import". Zatímco ID slouží k jednoznačné identifikovat jednu věc, jednu značku, do webové stránky, třída má být používat na libovolném počtu prvků nebo tagy Na své webové stránce. Takže je to k opakovanému použití. ID nelze použít znovu. Třída je na jedno použití. 

A víte co, pro cokoliv filozofické reasons-- Nechtěl jsem dokončil svůj Myslel jsem chtěl říct že první odstavec a Druhý bod je důležitý. Takže jdu požádat o třídu s názvem "Důležité", že pokud I ušetřit soubor a znovu, nemá žádný funkční dopad dosud. Ale já jsem přidal některé metadata Ze spisu vyplývá, druh něco oddělený ze základních údajů ve spisu o, takže teď v mém stylů, kdybych Místo toho říkají ".Upozornění" - víte, cokoliv, co je důležité, že jsem bude dělat font-barvy, red-- nebo spíše ne font-barvy, jen barvu. Je tu rozpory v CSS bohužel. A znovu. Nyní si všimnout první dva odstavce jsou červené ale ne třetí, protože jsem jen aplikoval třídu "důležité" k prvnímu dvou z těchto věcí. 

Takže ID, budete mít možnost určit velmi přesně. S třídami, máte opětovnou použitelnost. Ale v obou případech všimnete druh principu dobré designu kde jsem vytknout všechny estetika v mém styles.css souboru. Takže tam to tady žádný nepořádek. Neexistuje žádná zmínka o červené nebo tučné-obklad nebo velikost písma v tomto souboru. Spíše mám sémanticky, smysluplně charakterizován mých osobních údajů jako, Zde jsou některé důležité údaje. Zde je některé další důležitá data. Kromě toho, je zde "První" z mých důležitých dat. Takže HTML je především o třídění tagování doslova slova a odstavců a konstrukty ve vašem Stránka s těmito malými náznaky, pokud vás bude, že můžete nějakým způsobem využít používání Jiné techniky, jako je CSS tímto způsobem. 

Takže v odpovědi na otázku Victoria, můžeme textu větší tímto způsobem. Existuje mnoho jiných způsobů, ale písmo tag-- otevřený držák "font" - je ve skutečnosti několik let. A to je ten problém, Také se spoléhat pouze na online resources-- mají tendenci být zastaralé. A skutečně, který byl zastaralý, protože svět si uvědomil, co znamená "font-size = 7" znamená? To není. A tak po mnoho let a Tento day-- jeden z boku bere na vědomí, zde je to, že je ve skutečnosti neuvěřitelně bolestivé ještě někdy vyvinout místa pro web, protože Microsoft a Google a Mozilla a jiní často rozcházejí v tom, jak interpretovat specifikace jako HTML. 

Tam je soubor pravidel pro HTML, které obecně říká, že to, co každá značka znamená. Ale někdy je to ponecháno na uvážení implementace je, diskrétnost a Google Microsoft. A tak se budete velmi často vidět na webových stránkách něčem vypadá jinak na PC než to dělá na počítači Mac, a to je opravdu proto, že na konci dne, neměli to vyzkoušet dobře na obou platformách. Ale je to také proto, že rozumná, chytří lidé nebudou souhlasit a společnosti budou souhlasit, a tak Jednou z výzev programování pro web nebo projektování věci na webu píše své webové stránky takovým způsobem, který funguje na každém webovém prohlížeči. Ale i to je nerozumné, že jo? Existuje mnoho verzí tolik prohlížeče tam, že v určitém okamžiku, máte také udělat úsudek volání a vy budete muset rozhodnout, jako společnost, zejména pro e-commerce stylu místa, kam pokusu o použití nejnovější a největší Technologie dát opravdu dobrý uživatele zažít. Ale někteří procento uživatelů by mohlo stále používáte Internet Explorer 6 nebo 7 nebo 8, a to zejména v závislosti na Země, která oni přicházejí. 

A tak velmi často konzultovány je něco, jako "statistiky webového prohlížeče." A pokud půjdeme to-- podívejme Wikipedia a uvidíte, jak up-to-date tento graf je pokud existuje. Takže tady vidíte kde prohlížeče vlastně jsou podle prosince 2015, Podle vlády USA. Chrome je v podílu na trhu 42%, následoval IE do značné míry na firemní nastavení nebo nastavení PC, samozřejmě, následuje Firefox, pak Safari, Opera pak ne aby mapy tady z nějakého důvodu, a pak další. Možná je to v kategorii Ostatní. Ale problematičtější než to je-- Uvidíme, jestli Wikipedia má také verze prohlížečů version-- 

Pojďme do statistik prohlížeče. TJ. Ani to nestačí. Statistiky prohlížeči. Moje verze. Že to nebude mít pravdu. Podívejme se verze. tržní podíl prohlížeče. Uvidíme, jestli to přijde. OK. Teď to začíná trochu užitečnější. Tak tady si všimněte, že máme všichni různé verze prohlížečů. A, můj bože, když se look-- Chrome 48, 47 Chrome, Chrome 31, Chrome 45. Myslím, prohlížeče stále aktualizována, a někdy některé z těchto změn jsou významné z hlediska funkčnosti. A tak v určitém bodě, produktoví manažeři nebo inženýři je třeba provést decision-- vás Víš co, jen 1% na světě stále používá IE 7. K čertu s nimi. My prostě nebude podporu tohoto prohlížeče. A co to znamená nepodporovat? To by mohlo znamenat, že knoflíky nefungují na své webové stránky, nebo by to mohlo znamenat, že Formátování je úplně mimo. Nebo možná budete muset provést ten samý úsudku v mobilních těchto dnech, kdy, jsme nebude podporovat iOS 5 už ne. Takže lidé prostě muset upgradovat. Nebo nebudeme podporovat Cupcake Android OS pro zařízení se systémem Android, protože jak world-- jako tech svět chce posunout vpřed, to jaksi chce přetáhnout svět s ním tak, že tomu tak není musí být i nadále zpětně kompatibilní, takže mohou nabídnout nové a dobré vlastnosti. To je jedním z důvodů, proč tak mnoho firem vyvalit automatické aktualizace a tak nějak nutit nejnovější verze softwaru na nás. A dokonce i firmy stejně jako Apple bude třídit podle nutí vás téměř nebo zavázat vy z hlediska tržní síly koupit nový telefon, protože prostě nebude aktualizovat svůj starý telefon ještě. Takže si ujít nejnovější a nejlepší funkce, protože je to nákladné pro ně jako Společnost udržet starší, pravděpodobně podřadné verze softwaru. Ale Výsledkem je, že také trpět to stejně. 

Takže pojďme se podívat na právě pár finálních věcí zde. Pojďme ukrást opravdu rychle některá ty ostatní kulky, pokud zvědavý. Takže pokud jste se snažili, Například pozici text na různých stranách strana, budu dělat jednu rychlý způsob, ale je tu jiný způsobů, jak toho dosáhnout. Nech mě jít dopředu a eliminate-- zjednodušit to následujícím způsobem. Nech mě jít zpátky do mého jednoduché, prosté body. Nech mě jít zpátky do mého styles.css. A já jsem prostě jít používat simple-- které jste mohli vidět na Google nebo jej vyvolejte z earlier-- text-align pravdu. A obnovte tuto stránku. Nyní je vše se zdá být zarovnaný vpravo, jak jste mohli vidět na stropě zde. 

Můžeme se, aby to vypadalo trochu víc si podobné a můžeme říci, "ospravedlnit" a znovu. Teď je to pěkné a na náměstí oba strany, což je docela hezké. Dalším cílem, který jsme zde měli byla změna barvy textu. Takže jsme viděli, že se svým červeným textem. A teď přidat tlačítka pro formulář. Tak proč ne se snažíme dělat přesně to? Ale nejdřív nech mě jít na stránky, které většina z nás používá každý day-- Google. A pojďme se podívat na Jak Google skutečně funguje. Ale budu to dělat. Nejprve mi dovolte to in-- ano, nech mě jít do Google jako první. Budu muset jít do Nastavení Google, protože chci vypnout něco, co nazývá okamžité výsledky. 

Takže jste si možná všimli v Google tyto days-- nech mě jít zpět a to zapnout. Takže když jsem začít hledat pro "kočky", jako je tento, Všimněte si, že nejenom Mám auto-dokončení up top, najednou, samotná stránka Zdá se, že změnit docela rychle, stejně, a to je Google pomocí jazyka volal JavaScript snaží být užitečný. Ale bohužel, to laskavý z zkazí naši diskusi o tom, co se skutečně děje Pod kapotou zde. Takže jsem tak nějak rychle vypnutí okamžité výsledky. A já jdu na tlačítko Uložit. A teď jdu otevřít že diagnostický panel nástrojů, které jsem udržovat otvor na kartě síť. Tak jdeme na to. Nechť me-- whoops-- rolovat to trochu dolů. A nech mě hledat "kočky". 

A teď notice-- vlastně To je dobrá příležitost diskutovat na chvíli. Povšimněte si okamžiku, kdy jsem ji type-- zastavit. Přestaň. OK. Všimněte si ten okamžik jsem napíšete C, dívat se na spodní části obrazovky. A- T- S. Co na dno z této obrazovky, moje karta Network, navrhnou se děje každý Když jsem psát dopis? Bohužel, žába je velmi rozptylující dnes nebo trojlístek nebo co to je. Co se děje pokaždé, když jsem napsal? A dovolte mi zrušte bufferu a znovu jej zadejte. Tak-- pokřiky. Pokaždé, když jsem psát dopis, C- A- T-- takže nový řádek evidentně stále objevují. Co každý z těchto řádků představují základě toho, co jsme viděli a diskutovali tak daleko? Diváků: Hledání? David J. Malan: Hledání, nebo obecněji, požadavek HTTP z mého prohlížeče na serveru. Tak proč je můj prohlížeč dělat HTTP vyžádat pokaždé, když píšu dopis? 

Diváků: [neslyšitelné] David J. Malan: Jo, to dává me tyto auto-kompletní výsledky. Stejně jako tam, kde se tyto Výsledky vyhledávání pochází? No, pokaždé, když jsem typ domu písmeno, Google posílá více a víc a víc Slovo jsem psát. Proč? Protože chtějí, aby mi dal lepší a lepší, lepší návrh, seznam návrhů, za to, co slovo Snažím se skutečně kompletní. Takže to znamená, že doslova každý znak zadáte do Googlu je odesílán, v konečném důsledku objem, ale také někdy jeden v době za účelem provádění Tyto auto-kompletní funkce, když data je samozřejmě na webu. 

Nyní se pojďme podívat na to, co vlastně se stane, když na tlačítko Vyhledat Googlem. A pak budeme využívat to sami. Takže když jsem se posunout dolů nyní velmi První žádost, která se právě stalo. Všimněte si, že následující. To byl poslán k poměrně dlouhé URL-- https://www.google.com/search? a pak celá řada věcí. Podívejme se to vlastně nyní V záložce prohlížeče sám. Pojďme se zbavit panelu nástrojů zde. Zde je na stránce výsledků vyhledávání. A oznámení tady je URL. Nyní můžete asi tušíte co se tady děje částečně. Takže v první řadě, definice. Toto zřejmě je cíl kde je formulář odeslán. Takže když jsem napsal v Slova "kočky" a stiskněte klávesu Enter, zřejmě Google poslal moje psaní textu na tuto adresu URL že jsem zdůraznila tam, lomítko vyhledávání. Ukázalo se, že v URL, nic, co by se stane poté, otazník je, jak jsme pořád říkáš, pár klíč-hodnota která byla zadána do formuláře nebo nějakým přenášena z prohlížeče na server. 

Takže kdykoliv napíšete vstup do formy na webu a je odeslána jako máme Diskutoval přes Get, jeden z nich virtuální obálky, obsah Z toho envelope-- ano, udržet stále plněná fyzicky do obálky ve třídě dnes, ale technologicky je to vlastně dát do URL. Takže ve skutečnosti, dovolte mi prosít přes to. Kde vidíte vstup od uživatele? Kde vidíte něco že já sám napsal tady děje? Jo, tak "kočky". Právo? Tak ať mi to destilovat do něčeho jednoduššího. Jdu smazat vše o Tato adresa URL, které nerozumím, a já jsem prostě jít k odchodu to jak tohle-- / hledat? q = kočky. Uvidíme kde Q pochází z roku chvíli, ale že se cítí jako minimum Množství informací, které mám k dispozici. A teď budu stiskněte klávesu Enter. A všimněte si to ještě funguje. Stále se vrátíme spoustu koček. Tak Google je milovník než to v těchto dnech. Je to 2016, ne 1999. Takže je tu další věci, že mí prohlížeč posílá na server. Ale to je minimálně to vše je nutné. 

Tak o co jde? No, v první nech mě jít dopředu a jít zpět na Cloud9 a nech mě jít napřed a zavřu kartách dříve. A budu to dělat na mém vlastnit jen na chvíli. Chystám se pokračovat a vytvořit nový soubor. A budu ji uložit jako google.html. A budu velmi quickly-- Jdu ukrást, ve skutečnosti, některé z těchto textu jen proto, aby ušetřil čas. Jdu vložit to tady. Nebudu se obtěžovat s jakákoli stylizace tentokrát. Budeme volat toto "Můj Google." A já jdu zbavit všechno v těle. A já budu dělat následující. Nech mě přiblížit. Formulář action-- a jak jsem krátce zmínil earlier-- whoops-- jak jsem stručně již bylo zmíněno, působením Formulář je místo, kde můžete odeslat data. Tak google.com/search. A způsob chci použít může být jedna ze dvou věcí. To může být buď "dostat", jak držíme diskutovat, nebo to může být "post". Pro tuto chvíli je zásadní Rozdíl je v tom, pokud používáte "dostat" veškeré informace, které Uživatel poskytuje dostane poslal v URL. 

To je skvělé pro věci, jako je vyhledávání motory a několik dalších aplikací, ale v tom, co by to okolnosti nebudete chtít vyplnit formulář a mít informace neskončil URL, stejně jako v adresním řádku prohlížeče? Jaké formy dělat vás-- Diváků: [neslyšitelné] David J. Malan: Jo, jako co? Diváků: Hesla. David J. Malan: Jo, tak se přihlásit na Facebook nebo nějaké webové stránky. To je vstup uživatele z formuláře, textové pole, ale asi to nechci objevil v URL prohlížeče. Proč? Myslím, možná tam jsou některé bezpečnostní důsledky na síti, ale more-- rád, jednodušeji, co kdyby váš spolubydlící, vaše dalších významných, vaše děti, váš manžel vypadá skrz historii prohlížeče? Tam je vaše heslo pravdu tam v historii prohlížeče. Že nemá pocit, že dobrý design. Nebo dokonce více technicky, Předpokládám, že se snažíš nahrát fotky na Flickr nebo Facebook nebo wherever-- že je na vstupu uživatele, i když je to trochu víc interesting-- jak mám vtěsnat obraz v adresním řádku? Tak nějak jaksi nemůže. Tak nějak půjde. Ale fakt, že jsem zle si představit, že dělá. Tak jsem třeba další způsob nahrávání fotografií na webové stránky, a že jiná metoda se nazývá "post". Ale teď, budeme jen mluvit o "Se", což je jednodušší ze dvou. Prostě to dává všechno Uživatelský vstup do URL. 

Takže tady je forma Já vytváření. Chci vstup. A víte co? Chystám se vzít hádat zde. Jdu připomenout můj input "q" pro "dotaz". A myslím, že je to jeden z originálním designem, snad z roku 1999. A pak typ tohoto vstupu Je jen bude "text". A pak budu mít další vstupy který nepotřebuje jméno, jak jsme brzy uvidíme viz, jehož typ je "předložit". A to bude dej mi speciálního tlačítka. A to je vše. 

Tak nech mě jít dopředu a uložit tento soubor. Chystám se vrátit do mé prohlížeč a přejděte na google.html. Enter. A je to docela řídké přinejmenším. Ale nech mě jít napřed a hledat "kočky". A všimněte si, že jsem v současné době na této adrese Cloud9. Ale ve chvíli, kdy jsem na tlačítko to, kde si doufám, že skončíte? 

Diváků: Google. 

David J. Malan: Google. Takže pojďme na tlačítko Odeslat. A skutečně jsem re-implementována Google. Právo? Je to jednodušší. Je to lehčí. Myslím, že můj kód je jednoznačně lepší než jejich, od nepořádku jsme viděli dříve. A víte co? Chystám se okořenit to až trochu. Nezmínil jsem se o to dříve. Tam jsou značky, jako H1, v okruhu 1, nejdůležitější nadpis na stránce. "Google My," Zavolám to. Nech mě znovu. Vypadá to trochu lépe už. A skutečně, víte co? Mám already-- jsem lhal. Řekl jsem, že nebudeme styl to, ale budu styl to jako předtím. A mé tělo se stane, řekněme, text-align centrum. Vypadá to již více jako Google. 

Musím zalomení řádku, i když, za to tlačítko Odeslat. A ukázalo se, vy mohou používat body, nebo si můžete více doslova jen říct, dej mi čáru přestávka here-- na br značku. A když jsem znovu to, teď to tam chodí. Je to trochu ošklivé, a tak jsem mohl dělat více řádků, ale pojďme se dostat sem příliš nenasytní. Takže teď uvidíme, jestli to funguje u "psy". Zdá se, že pracovat pro "psy", stejně. Takže to, co je tady přesvědčivé stánek s jídlem? One-- nebyl obrovský skok na zavádět několik dalších značek, jako tagu form ve vstupním značce. Ale ještě podstatnější znamená, že všichni děláme je využití naše porozumění HTTP a skutečnost, že formy nakonec změnit co je v URL prohlížeče, a tak tedy můžeme mechanicky přispívat k serveru tím, že formulář HTML a vědět, že server chápe, HTTP, stejně jako naše tělo chápe, stejně jako, třást ruce mé, že stejný protokol, a tak se vrátíme odpověď že jsme nakonec očekávat. 

Tak pojďme zkusit provést jednu To poslední, co teď s mobilní, a budu make-- Přidám tento kód sklíčka. Takže pokud byste chtěli pohrát, vás lze jistě vzít odtud. Ale já jdu dopředu a udělat jednu věc. Chystám se jít dopředu a otevřou své indexu page-- Dobrý den můj stránky jako dříve, což Má spoustu tohoto textu faux-latiny, nebo bezvýznamný latinský text, a has-- vypadá to, že to v této velikosti písma. Ale dovolte mi jít dopředu a to udělat. Chystám se jít do Cloud9. A vy nemusíte dělat tento krok. Budu dělat to sám. Jdu na tlačítko Share. A to je vlastnost Jen z Cloud9, přičemž Mohu se životní prostředí, veřejné. 

A právě kvůli Demonstrace, nech mě to udělat. Jdu dělat mé žádosti veřejnosti. Všimněte si, to mě varoval, am Určitě chci to udělat, protože to bude dělat každý ve světě, ať už je to tady nebo sledování videa na později internet možnost vidět, co vidím. Ale to je v pořádku. Budu říkat "Hotovo." A dovolte mi, abych vás povzbudit, kdybych to udělal Tento correctly-- dovolte mi, abych ji nejprve otestovat. Jen do toho, pokud nechcete mind-- do prohlížeče v počítači, jděte na tuto adresu URL, a doufejme uvidíte můj latinský text. A aby bylo jasné, že je to běžící ne na mém notebooku. Je to v cloudu. Je to na Cloud9, a to doslova, ale Už jsem se pracovního prostoru veřejnosti takže kdokoli na internetu mohou přistupovat domovskou stránku latinu. 

Přejděte na stejnou adresu URL na telefon, pokud byste mohli. Pokud vás to bude stát, když byste stačí se podívat přes rameno. Diváků: [neslyšitelné] David J. Malan: Je mi to líto? Diváků: [neslyšitelné] David J. Malan: Jen latinská slova. To je vše. Ale to, co byste měli vidět. 

Diváků: Jo. David J. Malan: Jo. To jo. OK. Takže můžu zvednout vaše telefon na chvilku? Takže doufejme, že pokud jste v přístupu to by mělo vypadat téměř nečitelný. Je to still-- Myslím, že je to nečitelný kvůli latiny. Ale je to také nečitelný z jakého jiného důvodu? Stejně jako to, co vám nelíbí o tom? Diváků: Je to malý. David J. Malan: Je to super, super malý. Tak jak můžeme tento problém vyřešit? Je to super, super malý Na Victoria telefonu a pokud jste stáhl it up sami, nejspíš malá na telefonu stejně, není-li vás mít zapnutý nastavení přístupnosti. Co to je? Dalo by se prostě štípat a zoom, který je funkční, ale pak uvidíte pouze několik slov najednou. Tak počkej. Vím, jak to opravit. Právo? Mohl bych použít CSS, a já mohl změnit velikost písma z 12 bodů na 24-bod. Ale vedlejší účinek, který, Samozřejmě, bude teď, na stolním počítači nebo notebooku, Nyní text je dvakrát tak velký. A tak to by bylo hezké druh rozlišovat mezi zařízeními, a to dopadá tam jsou způsoby, jak dělat to. Existuje několik různé způsoby, ve skutečnosti, přičemž pomocí CSS a pokročilejších funkcí že nebudeme jít do velmi podrobně, můžete v podstatě dotaz prohlížeč a říkají, Jestliže je Vaše obrazovka menší než toto Mnoho pixelů, použít tuto velikost písma. Pokud obrazovka je větší než toto Mnoho pixelů, použijte tento jiný velikost písma. 

Můžete být stále ještě chovatel. Pokud jste někdy navštívil webová stránka, že na stole, Má velkou nabídku možná off na boční a poté veškerý obsah je na straně, která menu-- to je druh společného paradigmatu. Menu na levé straně, obsah Na pravé straně, nebo naopak. Není opravdu pracovat na mobil, když si Obrazovka je pouze tato řada pixelů. Takže běžnější na mobil, Vaše nabídka se náhle dostanete zhroutil, a budete muset kliknout na tlačítko vidět, nebo webové stránky bude klást na nabídku nad ní a dát obsah pod ním. A můžete implementovat tyto věci různými způsoby, taky. Můžete požádat své programátory, hej, týmu, kdykoliv vidíte požadavku HTTP z Androidu zařízení, zařízení Microsoft, je Google zařízení Apple zařízení, použijte tento velikost písma a používat toto rozvržení menu jinak použít výchozí větší rozložení. 

Nyní, s použitím co Základním technika dnes mohli inženýři používají vědět, zda je to iPhone, Android, telefon, laptop, desktop hostující serveru společnosti? Ve kterém se dostat tyto informace? 

Diváků: Hlavička? 

David J. Malan: Jo, hlavička HTTP. Takže každý požadavek HTTP přicházející z jejich zákazníci do svých serverech patří, uvnitř které virtuální obálka, celá parta hlaviček HTTP, z nichž jeden je prohlížeč a operační systém dokonce, pokud vám záleží na že úroveň detailu. Nyní je to mystická vypadající řetězec, ale existuje software, který bude jen zjednodušit to, a můžete se zeptat programování code-- PHP, Java, C ++, whatever-- co telefon je tohle-- jaké zařízení je tento uživatel používat? A pak si můžete říct, ukázat jim to verze stránek, jestli je to telefon. Ukažte jim tuto verzi webové stránky, jestli je to notebook nebo desktop. Ale vy ani nemusíte na straně serveru složitost. Můžete to udělat i ty nejjednodušší věci. 

Chystám se to udělat. Chystám se pokračovat do můj Cloud9 prostředí, a jdu přidat značku že jste viděli v Googlu předtím. Je to nazývá metatag. A nikdy Vzpomínám si tohle, tak Chystám se ji přepsat zde. Meta name = "viewportu" a poté content = "width = šířka zařízení, intital scale = 1 "a to je vše. 

Tak, že to může být i jako magické zaříkávání. To není všechno, že jasné, ale to má něco společného s průzoru, a výřezu je jen tělo webová stránka je obdélníková oblast, která definuje většinu stránky. A to je právě říká prohlížeč, víš co? Udělat šířku této stránce účinně rovná šířce zařízení. Jinými slovy, nepředpokládejte, že Máte jakési neomezený prostor. Předpokládejme, že máte jen tolik, kolik Prostor jak samotného zařízení je velký. A tak teď, když jsem znovu toto ve svém prohlížeči, nevidím žádnou změnu. Ale kdybych to udělal correctly-- a dovolte mi na mou fingers-- pokud vám všem přeložit své telefony, viď viz přesvědčivé změnu? Jo, je to-- 

Diváků: [neslyšitelné] David J. Malan: Ano. OK. Takže pravděpodobně čitelnější teď? Ještě malý, abychom byli spravedliví, ale ne tak malý, aby byl neovladatelný. A mohl bych určitě přepsat dále s CSS nebo na straně serveru, ale stále to, co jste vidění je stále více a více funkcí přidávané na straně klienta environments-- JavaScript, jak budeme diskutovat Zítra, CSS, a tak HTML-- že všechny tyto dotazy lze provést na straně klienta tak, aby se obtěžovat Server mnohem méně, a nikoli muset držet krok s, pro instance, konstantní nápor nového operačního systému verze, nové verze prohlížeče. Stačí si jen nechat prohlížeč zeptejte zařízení, jak velké jsou ti, a pak se poněkud logickým rozhodnutí založená na tom. Ale uvidíme více příležitostí pro logické rozhodování Zítra v kontextu programovacího jazyka. 

Takže nějaké otázky, poté, na vývoj webových aplikací? V současné době není webové programování, per o sobě, protože většina všechno, co jsme udělali Byl velmi estetický, chcete-li. Neexistuje žádný rozhodování v kód, který jsme napsali, a tak to je důvod, proč HTML je značkovací jazyk, není programovací jazyk. Ale zítra budeme brát letmý pohled, v konečném důsledku, v JavaScriptu, který je skutečný programování jazyk, který nám umožňuje dělat trochu víc. 

Nějaké otázky? No, dovolte mi navrhnout dvě Příležitosti pro nepovinné úkoly. Jeden je-- tyto Cloud9 účty nevyprší. Jste vítáni k využití aby pohrát. Je to volná úroveň služeb. Uvědomte si, že pokud při vytváření Váš pracovní prostor, můžete zveřejnili, že nemá znamenat, že kdokoli na straně internet může vidět, co píšete. Takže možná jen za ne do rozpaků sami pokud jste uvedení své první web Strana tam veřejně náhodou, ale nikdo to bude vědí, že vypadají stejně. 

A two-- dovolte mi přehazovat up této adrese také, zvláště pokud jste přišel dnes trochu méně pohodlné než ostatní, jisti, co tohle všechno znamená. Uvědomte si, že mnohem více o tomto videu která je jak dobrý způsob, jak usnout a také se smát chvíli Přitom je také hodně společensky zajímavé a bezpečnostní relevantní diskuse v něm od Johna Oliver, byť komik. 

Ale pokud nejsou k dispozici žádné další otázky, To nás přivádí k recepci. Tak proč ne zapnu hudby. Mělo by být nápojů a občerstvení venku. Jsem rád, že se mísí tak Dokud lidé chtěli, odpovědět na otázky více one-on-one. Ale jinak, není zač vzlétnout na jakémkoli místě, a uvidíme se zase Zítra ráno trochu víc. Dobře, díky.