David J. Malan: Dobre. Sme späť. Takže, cieľom tohto posledného zasadnutia je predstaviť niekoľko ďalších konceptov ale tiež dať každému príležitosť na druh natiahnuť prsty a vlastne niečo robiť trochu hands-on. Cieľom nie je obrátiť Všetky nás do webovej vývojárov akýmkoľvek spôsobom, ale v skutočnosti len aby vám ochutnať niektorá zo základných konštrukty toho, čo ide do programovania pre web a dnes web vývoj, takže statická strana things-- žiadna logika, žiadny programovací jazyk, len statický obsah. A to nám dá príležitosť skutočne vidieť, čo je webový server, Pozrite sa, čo súbor HTML, je vidieť, čo to je HTTP je v skutočnosti servírujú. Ale skôr, než sa ponoríme do ľubovoľnej retrospektívu otázky týkajúce sa cloud computing alebo bezpečnosti alebo niečo medzi tým? Nie? Dobre, dobre, poďme to len v prípade, Proces prihlásenia na odber niečo, čo trvá niekoľko minút. Necháme to urobiť v pozadí. Len do toho, keby mohol, na túto adresu URL here-- c9.io. Jedná sa o tretej strany service-- Platforma ako služba, keď sa will-- že sa ťa pozvať sa prihlásiť k účtu, a to bude dať každému z vás účet v tzv mraku na infraštruktúre niekoho iného, spoločnosť s názvom Cloud9. Ale čo je pekné o To je, že poskytujú vám aproximácie skutočný vývoj v reálnom svete životné prostredie, aj keď v mrak a vo webovom prehliadači, a my budeme používať to vlastne trochu experimentovať dnes. A potom ísť dopredu a len navigovať vaša cesta k procesu registrácie Ak by si mohol. Tak sme sa náhodou použiť v triede Učím pre všetkých našich študentov, a to ako na akademickej pôde aj mimo teraz, a to, čo nahradil historicky inak bol softvér na stiahnutie. Takže to, čo bolo získanie prístupu k je jeden z týchto virtuálnych strojov, v podstate, že som opísal vyššie. Takže táto spoločnosť Cloud9 zrejme nájomné z tretej party-- ba v tomto prípade, Google-- celok banda virtuálnych strojov že nejako rozsekať na ilúzie jednotlivé servery že každý z nás má plnú kontrolu nad. Nie je to úplne presné hovoriť že sú virtuálne stroje, hoci, pretože to, čo Cloud9 v skutočnosti používa je trochu novšie technológie volal containerization. A dovoľte mi chytiť tento obrázok Tu sa maľovať tento obrázok. 

Kontajner je, ak Spomínate si obrázok z minulosti, trochu ľahší hmotnosť ako virtuálnom stroji. V skutočnosti, vzhľadom k tomu, posledný Tentoraz sme hovorili o tú bytia prevádzkové Systém a hypervízor a potom hosťujúceho operačného systému, hosť operačného systému, hosťujúci operačný Systém, na vrchole svojej fyzického hardvéru, Rozdiel od tejto novšie Technológia, containerization, je, že všetci nejakým spôsobom zdieľať rovnaký operačný systém. Ale stále vytvárať ilúzie každého s jeho alebo jej vlastné exkluzívne práva pre správu a súbory na serveri. Ale je tu menej softvérom medzi vami a hardvéru. Ktorej výsledkom je, v Teória, vyšší výkon, pretože používate alebo plytvanie menej zdrojov Na tomto tzv virtualizačné vrstvou. Tak tomu sa hovorí containerization od prírody prostredníctvom technológie zvanej Docker, ktorá je do značnej miery prichádza do jeho vlastnej. A to je niečo, Technici vo vašej firme Možno trochu druh začne hovoriť asi skoro, ak tak už neurobili, aj keď tam to určite nie Dôvodom skočiť na akýchkoľvek bandwagons. 

Takže s tým povedal, čo budete pravdepodobne vidieť teraz je obrazovka, ktorá vyzerá trochu ako je tento. OK. A stačí zavolať mi, ako v opačnom prípade. A ak tak-- Pôjdem cez ak nie. Choďte do toho a kliknite na tak veľký navyše k vytvoreniu pracovného priestoru, a uvidíte obrazovku podobnú nasledujúcej. Môžete zavolať na pracovnú plochu pomenovať, čo chcete pre túto chvíľu. A v skutočnosti len pre jednoduchosť, go a- dobre, niektorí z vás už majú pracovné priestory. Nazvime to čokoľvek want-- podnikania, Harvard, štvrtok, čokoľvek chcete. Nepotrebujete popis. Môžete ju nechať v súkromí, ak ste už majú veľa pracovných priestoroch. Ak ste nútení, aby to verejná, je to v poriadku pre dnešné účely. Aj tu je jeden z Upsells. Máte jednu súkromnú pracovnom mieste default. Ale ak chcete viac, budete musieť platiť viac. V opačnom prípade vás nútiť aby svoju prácu verejnosti. Ale to je v poriadku, pretože aj oni zamerať tento na open-source komunít aby sa ľudia skutočne spolupracovať. 

A posledná vec, ktorá je dôležitá, keď je po zvolíte názov a potom, čo si vyberiete súkromné ​​alebo verejné, kliknutím HTML5 veľký oranžový ikonu druhý zľava, a kliknite na tlačidlo Vytvoriť pracovný priestor. A to bude pravdepodobne trvať minútu alebo tak, ale budete potom mať životné prostredie, akonáhle vás robiť to, čo vyzerá pripomínajúce čo mám na obrazovke tady. Ale opäť, to môže trvať minútu alebo viac, aby si na túto obrazovku akonáhle ste klikli Vytvoriť pracovný priestor. Ale práve označili ma cez či ma chceli aby sa pozrieť na niečo alebo odporúčať. Dobre. Takže budem pozadie to pre túto chvíľu. Zavolaj mi cez keď sa zdá, že máte nejaké technické problémy. Ale opäť, to by mohlo trvať Trochu za to otvoriť. A poďme do toho a hovoriť o tom, to vlastne znamená, aby webové stránky, čo je HTML, a ako sa to všetko Prepája ako my začíname aby skutočne používať niektoré technológie. Tak to dopadá, že môžem ísť na môj malý Mac tu, otvoriť jednoduchý program nazvaný TextEdit, alebo na Windows som mohol open niečo, čo nazýva notepad.exe. A mohol by som jednoducho niečo urobiť ako tohle-- "Hello, World". A potom by som mohol uložiť ako hello.txt Takže tam žiadna mágia. To nemá nič spoločné s web programovanie, nič čo do činenia s HTML. Len vytvorenie jednoduchého textového súboru. Ale ukazuje sa, že web Stránka je doslova len to. Je to jednoduchý textový súbor obsahujúci textový ktoré môžete písať na klávesnici, ale zvyčajne, ale nie vždy skončí nie .txt, ale .html alebo .htm. A vy nie len zadávať slová v súbore. Ste skutočne používať veci zvanej tagy alebo všeobecnejšie, niečo zvanej značkovací jazyk. 

Takže budem veľmi rýchlo písať a potom vysvetliť nasledujúce. idem prvý zadajte tento, ktorý hovorí, hej, prehliadač, prichádza webová stránka napísaná v HTML. A tieto dve veci dohromady povedať, hej, prehliadač, nasledujúci je naozaj HTML. Hej, prehliadača, prichádza Hlava alebo hornej mojej stránky. Hej, prehliadača, vo vnútri hornej časti moja strana, dať názov, ktorý znie: "Dobrý deň, svet. " Hej, prehliadač, potom, čo hlava my strana, prichádza telo mojej stránke. A, hej, prehliadač, moje telo stránka by mala tiež povedať, "hello world". Takže aké sú tu význačným podrobnosti? To je to, čo je všeobecne volal vyhlásenie o doc typu, a úprimne povedané, je to trochu ťažké zapamätať si to na prvom mieste. Môžete tak nejako kopírovať-vložiť ho. To je formálny spôsob hovoriť, hej, prehliadač, Ja používam HTML verzie 5, ktoré vyšiel v poslednej dobe trochu. Je to čarovné zaklínadlo, že niektoré ľudia s nedostatočným zmyslom návrhu sa rozhodol dať u Veľmi hornej časti súboru. Aj napriek tomu, že je to trochu tajomné, to je všetko to means-- hej, prehliadač, tu dodávaný s verziou 5 HTML. 

Zvyšok to bolo u nás už nejakú dobu, historicky, ale bolo to vyvíja, a to Pravdepodobne došlo k Začínam byť trochu jednoduchšie. Všimnite si niekoľko charakteristík z toho, čo som sa zvýrazní. Je tam tieto veci s hranatý brackets-- ľavú hranatú zátvorku a pravá zátvorka. A všimnite si symetriu tu. A symetria, myslím, rovnako ako ja majú túto počiatočnú tag tu alebo otvorenú značku ak chcete, tu dole mám V blízkosti tag alebo koncová značka, ktorá je odlišné iba vtedy, ak má tento lomítko na začiatku slova HTML. A môžete myslieť to keď som bol nedbalo navrhuje predtým, hej, prehliadača, prichádza nejaký HTML. A naopak, hej, prehliadač, ktorý je že pre začiatok a koniec HTML--. 

Medzitým hej, prehliadač, tu prichádza hlavu mojej stránky. Hej, prehliadač, to je pre hlavu. Hej, prehliadač, tu je Telo moje stránky. Hej, browser, že je to pre telo. A vnútornej časti, ktorá je nejaký ľubovoľný text pre teraz. A vo vnútri hlavy, zatiaľ, Je nejaký svojvoľný, ale označil, tak povediac, text, ktorý hovorí, titul mojej strane bude "Hello, World". Teraz, pre túto chvíľu, môžete Predpokladajme, že prehliadačov majú only-- alebo skôr, webové stránky majú Iba dva parts-- hlavu a telo. A hlava je zvyčajne len ako ponukovej lište sa veci naozaj len na samom vrchole. A telo je črevách stránky, Všetko v tom veľkom obdĺžniku ktorý vyplní celú obrazovku. Takže ja idem dopredu a to urobiť. Budem pokračovať a kliknite na tlačidlo Uložiť, Uložiť súbor. A budem šetriť to ako hello.html, a ja som jednoducho ísť dať to na mojom desktope. A ja idem neváhajte a kliknite na tlačidlo Uložiť. A notice-- môj Mac na je aspoň na mňa jačať. Ste si istí, že to chceš urobiť? A ja chcel povedať, áno, používať HTML. Poznám lepšie v tomto prípade. A teraz budem ísť do môjho počítača kde som tento súbor mať naraz. A budem dvakrát kliknite na neho. A všimnite si, že tým, že default, Chrome otvoril. To preto, že to je ako predvolený prehliadač. A to len hovorí: "Hello, World". Ale hovorí, že "Dobrý deň, svet "na dvoch miestach. Všimnite si vľavo hore. Dosť ťažké prehliadnuť. Je to veľká a tučným písmom. A kde inde sa nezdá hovoriť, "ahoj, svet"? 

Divákov: Karta. 

David J. Malan: Jo, karta sama o sebe. Takže keď som povedal šéf Stránka je všetko až top-- a v skutočnosti sa jedná o titul. Je to len v záložke tu. A môžem vytiahnuť túto kartu von tak, aby sa pliesť. To je teraz len jednej karte, a naozaj vidíme "Hello, World" tu hore a "ahoj, svet" tu dole. Takže celkom jednoduché. Ale je to tiež celkom jednoduché. A vlastne som priblíženia. Môžem zmeniť veľkosť písma práve zväčšiť pre prístupnosť. Ale poďme teraz niečo urobiť trochu zaujímavejšie. 

Idem do go-- Och, dovoľte mi dostať späť do svojho textového súboru. Vraciam sa k môjmu textový súbor, a idem túto situáciu zmeniť a hovoria, "Dobrý deň, Disney World." Ušetriť. A vrátiť sa do môjho prehliadač a kliknite na tlačidlo Načítať znova. A teraz, samozrejme, to hovorí: "Disney World." A ja idem k umelému zväčšeniu V práve preto je lepšie vidieť. Takže teraz, bohužiaľ, som tak trochu chcieť to-- v skutočnosti, to je funkcia Mac. Chcem kliknúť na Disney World a ísť niekam, ako disney.com, ale to nefunguje. Takže základným princípom webe je hypertextové odkazy, odkazy, ktoré idú inam. Tak ako to mám urobiť? No, mohol by som len povedať, "Dobrý deň, http://www.disney.com." Uložiť toto. Reload. Ale to tiež nie je kliknúť. A čo je príjemné tu, hoci to nie je funkčná ešte, je, že sa zdá, že Prehliadač robí doslova len čo poviem to robiť. Tak práve píšem, či URL takto, je to len bude, aby mi ukázal URL. Musím použiť značky alebo značky Jazyk, ktorý vlastne povedať prehliadač robiť ešte viac. Takže ja idem dopredu a zmazať túto chvíľu. A ja chcel povedať, hej, Prehliadač jazyku kotvu tu, odkaz tak povediac. A hyper-referencie, cieľ uvedenej kotvy, by malo byť toto URL. A všimnite si moje citácie. Mohol by som použiť apostrofy taky, ale musíte byť konzistentné, a ja by som zvyčajne stačí použiť úvodzovky, aby to jednoduché. Všimnite si, Chystám sa zavrieť tag. A potom tu idem hovoriť, "Disney World." A teraz potrebujem nejaký symmetry-- otvorený držiak, / a, uzavretý držiak. 

Tak čo som predstavil? Mali sme niekoľko značiek už. HTML, Hlava, Hlava, telo, sú všetky tagy, tak povediac, s otvorenými aj uzatvorenými náprotivky. Ale oznámenia, je to druh z zásadne odlišná. To je to, čo budeme nazývať v HTML atribútu. A je atribút len pár kľúč-hodnota. To je bežná vec počítače science-- pár kľúč-hodnota. Je to niečo ako nástroj obchodu. Kľúčovou a hodnotu. Slovo a ešte niečo navyše iné slovo alebo slová. A v tomto prípade je kľúč href, a hodnota je, že úplná URL. A čo je atribút robí, je to ovplyvňuje správanie tagu. A v tomto prípade musíme ovplyvňovať správanie značky ukotvenie, pretože musíme zakotviť odkaz niekam. A ako to urobiť, je prostredníctvom atribútu. 

Takže budem pokračovať a uložte súbor teraz. Vráť sa do svojho prehliadača a znova načítať. A voila, máme na mape Počiatky legitímne webové stránky. Super-jednoduchý, ale keď som sa vznášať sa nad tohle-- oznámenia v ľavom dolnom rohu, je super-small. Ale vy vidieť www.disney.com. A keď som na neho, naozaj to whisks ma preč disney.com. Teraz je zvláštna vec Tu je to, že nie je best-- najviac predajné URL, ale je to v poriadku, pretože tento súbor nie je existujú na World Wide Web. Existuje ako lokálny súbor vo zjavne moji užívatelia directory-- / jharvard-- Pre John Harvard-- / desktop. Ale má URL. Proste sa to stane, že je miestny. Bohužiaľ, nikto z vás môžu navštíviť to, pretože ak zadáte túto adresu URL by ste hovoriť prehliadača, Vyhľadajte súbor s názvom hello.html na pevnom disku. A samozrejme, ak ste Sledoval spolu ručne, to nebude existovať tam. 

Takže je to v poriadku. Stále potrebujeme cestu, nakoniec, stiahni súbor do webu, ale poďme šprýmař oddelene pár bezpečnostné dôsledky, čo sme práve videl a zviazať ho späť na skorší Diskusia z dnešného rána. Ukazuje sa, že ak Prehliadač doslova robí čo poviem to urobiť, a zdá sa, aby sa stať, že kotva tag ovplyvnená hodnotou Tento atribút volal href ale zobrazí sa toto text, toto sa zdá naznačiť, že by som mohol dať URL V oboch miestach a potom znova načítať a teraz vidieť URL a prejsť na adresu URL. Všimnite si, keď som vznášať sa nad dolnom rohu, Ja naozaj ísť ešte disney.com. 

Takže ak ste niekedy boli phished-- P-H-I-S-H-E-D-- s jedným z týchto falošných e-mailov od ako PayPal vašej banky, pravdepodobne ste dostali odkazy vnútri e-mailu, ktorý čítate, že vám povie, kliknite sem ísť potvrdiť heslo alebo potvrdenie svojej dátum narodenia alebo sociálne alebo niečo spoločensky inžinierstva vám oznámiť informácie. No, mohol som tak trochu zobrať Výhodou tohto postupu, nemohol som? Mohol by som povedať niečo podobne, www.paypal.com. A miesto disney.com, I mohli ísť, rovnako ako, badguy.com. Reload. A ako ľahké je napáliť, najmä netechnické čítačka alebo zbežne čítanie Čitateľ než kliknúť odkaz takto, ktorá, ak kliknem to-- Ja vlastne nechcem ísť badguy.com. Neviem, čo je vlastne tam. Takže paypal.com, vývesné, je čo hovorí, že to bude, ale samozrejme, ak sa pozriem dolu super-nízko, je to trochu rozmazaný, ale hovorí, že badguy.com. To je jediná povedať práve teraz že idem na zlom mieste. A keď som povedal predtým, že banky Naozaj by nemalo podporovať alebo vlakom Užívatelia ku kliknutie odkazy, toto je len jedným z prejavov toho. A je to tak jednoduché. Teraz ste protivníkom, ak robíte niečo také a pokúsiť sa prinútiť používateľov k návšteve svojich webových stránkach. Ale teraz, budeme veci pekné a čisté. budeme pokračovať a pretočiť týchto zmien. Znova načítať stránku. A ja sa vrátiť do disney.com. 

Uvidíme, či nemôžeme dráždiť Tento seba trochu viac. Takže "Dobrý deň, Disney World." Chystám sa povedať, tu dole. Možno, že budem robiť nejaký priestor. "Dúfame, že si svoj pobyt!" Ušetriť. Reload. Nie je to rea-- to nie je čo som zamýšľal, že jo? Mám na mysli, keď som ošetrovať texte súbor ako textový procesor, Čo ste dúfať, že by sa stalo tu? Jo, mám pocit, že tam by mal byť koniec riadku tu, tak to je kočík nejakým spôsobom. Ale to je v skutočnosti úmyselné, pretože rovnako ako predtým, prehliadač je až vo chvíli, to, čo ste to povedať robiť. Som to povedal, aby rozbiť linky. Ja som to povedal, aby pohybovať dole, a to aj aj keď intuitívne, mám pocit, že som to urobil. Tak to dopadá potrebujeme trochu viac značkovacie, a budem opraviť to nasledujúcim spôsobom. Idem do tejto predslove prvého ahoj s tým, čo sa nazýva bod tag. A potom budem pokračovať a zabaliť túto druhú vetu v inom tagu odseku, aj keď sú super-krátkych odsekov. Teraz budem šetriť. Reload. A teraz máme, že priestor, a my sme tak nejako majú sémantiku dve oddelené body. 

To je všetko v poriadku a dobré, ale to by bolo pekné pridať obrázok na túto stránku, takže budem ísť hľadať Mickey Mouse na Google Images. A len tak pre zábavu, som chystá chytiť tento obrázok. Chystám sa ísť dopredu a hneď chytiť URL tohto obrázku, aj keď tam je niečo iné spôsobov, ako to urobiť. Pre túto chvíľu, ja som jednoducho ísť na kopírovanie URL. Chystám sa ísť späť do môjho textu súbor, a budem tu povedať, img src = cenovú ponuku koniec citátu že URL, super-long. A potom predstavou obraz je trochu iný. To fakt nie je predstava štartovanie obraz a končiac obraz, ako počiatočný značka koncový tag. Tak to je trochu divné me sémanticky, ako to urobiť, mať detailné značku obrázku. To nie je správne. Je to úplne správne, a to je podporované ale je tu skrátený zápis. Môžem druh súbežne otvárať a zatvárať rovnakú značku, a že urobí prehliadač spokojní. Takže je to len trochu stručnejšia pre veci že koncepčne naozaj nie zmysel začínať a končiť. Jednoducho tu sú, alebo nie sú. 

Takže idem zachrániť to a vrátiť sa môjho "Hello, world", str a obnovte. A je to trochu mimo kontrolu, pretože ten obraz je vlastne trochu veľký, ale to je v poriadku. Mohol som to zmeniť veľkosť v programe. Alebo viete čo. Len demonštrovať, že som bude vlastne povedať že šírka tejto veci by mal len 200 pixelov, 200 bodky. Nechaj ma ísť dopredu a uložiť a znova, a teraz stránky vyzerá trochu rozumnejšie. Ale všimnite si vzor. No, ja som trochu naučil vy všetci HTML v nejakom zmysle, prinajmenšom koncepčne, pretože všetky HTML je Tieto tags-- otvorené tagy, uzavretý tagy, a atribúty, ktoré modifikovať ich správanie. A zdá sa, že každý tag môže mať nula alebo jedna alebo dve alebo viac atribútov, každý z ktorý robí niečo trochu iné. Teraz, ako viete, čo existuje? Stačí počúvať niekoho rovnako ako ti poviem, čo existuje, alebo si len venovanej asi za tutorial na HTML, a je to naozaj to jednoduché. 

Naozaj, keď som bol undergrad Pred rokmi sa naučil HTML, jeden z mojich matematiky výučby asistenti práve strávila trochu času mi doučovanie Pre ako pol hodiny, hodinu, a potom som bol na ceste. Bol som na ceste k vytváraniu najohavnejším webové stránky vôbec, ktorý, zdá sa, nemám Naozaj postupoval ďalej. Ale ide o to, že akonáhle vás porozumieť týchto jednoduchých ideas-- ak tajomné text-- ale tieto jednoduché predstavy o spustenie myšlienku a zatváranie myšlienku, udržiavanie všetko pekne vyvážené, hľadá niečo hore, modifikovanie Správanie tejto značke, to je naozaj všetko tam je k tomu. A v skutočnosti, ak by sme teraz ísť niečo ako google.com-- v skutočnosti, poďme si miesto trochu viac reasonable-- stanford.edu. A ja idem k zobrazenie, Developer, Zobraziť zdrojový kód. Je to škaredé, ale notice-- a budem priblížiť oznámenia niektoré veci, ktoré je už oboznámený. Tam je to tu, čo je prehliadač. Prichádza HTML5. Tam je HTML. Zdá sa, že je tu atribút, ktorý som nemal použitie, ktoré určuje jazyk stránky a to môže pomôcť s automatickým Preklad a tak podobne. Tu je hlava stránky. Tu je titulná strana Stanforde of. Tam je značka ja nie hovoriť o yet-- Meta tag. Je to len akýsi Informácie o pozadí. Pomáha s SEO, alebo optimalizácia pre vyhľadávače-motor, alebo výsledky vyhľadávania Google, alebo podobne. Ale ak budeme hľadať ďalej, udržať hľadáte, tu je telo tag. A je tu ďalší zväzky Značky sme nehovorili o doteraz. Ale Div je jedno pre rozdelenie stránky. Je to ako neviditeľné obdĺžnik ak ste trochu chcieť mentálne rozdeliť stránku do rôzne jednotky online. A potom veľa divs I vidieť, niečo ako trieda, ale vrátime sa k tomu. 

To je interesting-- formulárov. Formuláre sú po celom webe. Akékoľvek vyhľadávacie pole si niekedy použitý je forma. A tak, poďme skutočne vidieť. Formulár. Action. Účinok tohto formulára z akéhokoľvek Z historických dôvodov je to, že URL. Metóda je "post". Ukazuje sa, že požiadavky HTTP môže používať sloveso "dostať", ako sme videli predtým, alebo "post". A uvidíte rozdiel z toho za chvíľu. Poďme skutočne vidieť, čo to je. Nechaj ma ísť späť na stránku Stanforde. Aká forma to hovorí o, o tom myslíš? Čo vyskočí na vás? 

Divákov: Vyhľadávacie pole. 

David J. Malan: Jo. Tak sa v pravom hornom rohu Tu je to vyhľadávacieho poľa. A to je spôsob, akým realizovaný to-- tag, ktorý je doslova pod šírym držiak forma. A potom poďme niečo hľadať. Poďme hľadať kamaráta z mine-- "Nick Parlante." Enter. A samozrejme, to šlo trochu iný URL. Nechaj ma ísť späť. Poďme hľadať "kurzy." Dočerta. Išiel na inú adresu URL. Takže, Stanford je pridanie nejaké kúzlo že oni ma brať na adresu URL ktoré sme videli v atribútu tam akcie. Ale táto forma je tu realizovaná rýdzo prostredníctvom tejto prirážky tu, tieto značky. V skutočnosti, tu je vstup pre typ vyhľadávania, ktoré chcete. Tu je vstup pre iný typ vyhľadávania. Tu je vstup pre samotný reťazec. A tak cieľom nie je zabaliť naša myseľ okolo všetkých týchto značiek ale jednoducho vidieť. Je to proste otváranie a zatváranie tagy a hľadajú veci. Jo? Victorie? 

Divákov: [nepočuteľné] David J. Malan: To je dobrá otázka. To je trochu zložitejšie vidieť. Dovoľte mi, aby som sa vrátil k tomu otázka niekoľkých málo minút keď sa pozrieme na takzvaný CSS, alebo kaskádové štýly, a môžeme sa pokúsiť odvodiť ako veľa zo stránky. Takže ak by sme sa teraz pozrieť na google.com, pozrime sa, čo ich strana vyzerá. Tie by they're-- to roztomilé dnes. OK. Hotovo. V poriadku, takže View Source. Človek by si myslel Google má naozaj pekné zdrojový kód. Takže, zdá sa, že to, čo sa tu deje? A v skutočnosti, to nie je ani HTML. To je niečo, čo nazýva JavaScript. A poďme ďalej a ďalej. Ja ani neviem, kde začína stránky. Chystám sa použiť príkaz F, otvorený držiak HTML. Dobre, tu to je. Zistil som, začiatok stránky a tam je toľko vecí tu. 

Čo sa vlastne deje? No, viete čo, môžeme vyčistiť to. Ak by som namiesto toho ísť do toho Skontrolujte Panel nástrojov, táto špeciálna diagnostický nástroj, a nechoďte do siete, kde sme ísť ďalej dnes, ale keď idem na Elements čo je naozaj pekné je to, že prehliadač má veľa oveľa lepší oči ako ja. A prehliadač vie čítať že neporiadok z webovej stránky, že HTML mailu sme práve Pozrel sa na, a to môže rozoberie ho alebo čítať a analyzovať a preformátovať v pekné človeka príjemným spôsobom. Takže to, čo som teraz videl V tejto obrazovke tu pod Elements, presne rovnaký obsah, ale už odsadené všetko, zafarbiť, že som to, ale to je presne ten istý text že som si stiahol zo servera. 

A čo je teraz pekná je vidím v tele, pre instance-- oznámenia stránka je stále zložená of len hlava a telo, a môžem hierarchicky ponoriť tu. Všimnite si, že Google Zdá sa, že aby divs-- toto a toto. Môžem rozširovať to. Je tu celý rad ďalších divs. Takže je to trochu zložitejšie. Ale počkaj. To sa zdá byť oveľa viac čitateľný, relatívne, ako toto. Prečo je Google trápne Samotný jednoduchým zaslaním tento obrovský neporiadok kódu niektorých triediť len realizovať niečo to vyzerá tak jednoducho na prvý pohľad? Rovnako ako, prečo nie oni pridať viac medzier? Prečo to stlačením klávesy Enter, ako som to urobil? Pozrite sa, ako dobrý som bol pri písaní webové stránky. Trafil som Enter tak usilovne. odsadené som tak všetko Je tak pekná a čitateľný. Prečo Google nepraktizuje to isté? 

Divákov: [nepočuteľné] David J. Malan: Dobrý. Spravodlivé. nemajú niektoré osoba u Googlu manuálne aktualizácie domovskej stránky ešte. Nie je to už 1999. Takže oni majú softvér. Majú ďalšie nástroje, ktoré generovať dynamicky sú HTML. Samozrejme, že kód sám o sebe bola napísaná ľuďmi, ale skutočnosť je taká, je to celkom spravodlivé povedať, prehliadač rozhodne nie je jedno, ako chaotický kód je. Ale je tam ešte závažný technický dôvod že Google distribuuje svoje HTML Kód v takej nedbalý, zdanlivo Drvivá spôsob, ako všetko zabalené dohromady s veľmi málo way-- veľmi málo v spôsobe formátovania ako ja. 

Divákov: [nepočuteľné] 

David J. Malan: Rýchlejšie? Prečo? A čo si povedal, Lydie? Rýchlejšie? Prečo rýchlejšie? Divákov: [nepočuteľné] David J. Malan: Existuje žiadny priestor pre čítanie. Jo. Takže premýšľať o tom, čo je to priestor. Takže každý znak na klávesnici sa určité množstvo priestoru pre reprezentáciu, buď fyzicky, to páči zaberá že veľa priestoru, alebo nejako Naspodku digestor, ktorá vyžaduje pamäť. A ako aside-- a my hovoriť viac o tomto tomorrow-- každá postava na klávesnici zvyčajne vyžaduje 8 bitov, alebo jeden bajt. Takže vzor 8 núl alebo Tí, alebo len jeden bajt, ako sme by ľudia zvyčajne hovoria. Tak to je malý, ale je to stále non-nula. Je to stále určité množstvo priestoru. Takže ak inžinier alebo Google hity medzerníka len raz, a predpokladajme Google-- je to super-popular-- Predpokladajme, že miliarda ľudí navštíviť ich domovskú stránku denne, alebo nejaký počet osôb navštíviť domov strana A miliardy krát denne, koľko ďalších bytov má tú Softvérový inžinier jednoducho stojí Google tým, že udrie jeho alebo jej Medzerník raz? 

Divákov: [nepočuteľné] David J. Malan: Nie tak celkom tak zlé. Len jeden krát byte miliardy. tak je-- Divákov: 8 miliárd gigabajtov. David J. Malan: Nie je 8000000000. 8 miliarda bytov. Ale 1GB. 1 GB bude merná jednotka. Ak on alebo ona robí dva priestory, 2 GB. Tri gigabajtov. Správny? To váhy nákladne. A tak v prípadoch, ako je Google, ktoré udelil, sú extrémne prípady, existujú aj iné problémy, ktoré vznikajú práve tým, že veľmi rozumné rozhodnutie alebo pri veľmi prosté ľudskej činnosti, preto, že má tento zväčšený účinok. Takže jeden z dôvodov to vyzerá tak stlačený je presne tak, ako to bolo Victoria said-- Len generovaný počítačom tak ako tak. Takže žiadny veľký problém. Nechajte prehliadač na to prísť. Ale tiež zámerne nemá moc priestoru, preto, že priestor nie je nutné. A priestor skutočne stojí peniaze. 

Je to buď stojí čas, pretože len aby sa zasadila že oveľa viac dát z webu Google.com hlavný stan len má vziať nejaké množstvo čas, aj keď je to milisekúnd alebo mikrosekúnd, ale to spočíta cez tak mnoho užívateľov, alebo skôr, to asi stojí peniaze. Google zrejme pripojí k niekto iný na svete, jeden z tých, peering body, a ak budú mať nejaký druh finančného vzťahu pričom ich dáta stojí peniaze, mohli by rovnako minimalizovať, aké veľké množstvo dát oni pľuvať na Ich pripojenie k internetu. 

Takže legrační vec, ale nakoniec, alebo možno upokojujúce vec, je to, že aj keď to vyzerá nesmierne ohromujúci, na konci dňa, je to stále presne rovnaké zásady ako Tento veľmi jednoduchá stránka tu z HTML str. Takže len zhrnúť a tak, aby ste majú kánonickú verziu, ak ste neboli Nasledujúce spolu voľbou tu, tu môže byť najjednoduchšie webových stránok, takže niečo hrať s snáď neskôr. 

Dobre, poďme zaviesť Pár ďalších nápadov teraz. Chystáme sa zavádzať niečo, čo nazýva štýl značky. Môžeme štylizovať túto stránku V ďalšej zaujímavé spôsoby. Takže zatiaľ čo HTML e-mail všetko o značkovanie dáta, druh uvedením do A browser, ako štruktúrovať dáta, kam umiestniť to, CSS, alebo kaskádové štýly, je druhý jazyk, ktorý zvyčajne dostane pomiešané s HTML ako budeme see-- ale môžeme čistiť že až do moment--, ktorý berie to finále míle, a to ho štylizuje. To dostane farby tak akurát, veľkosťou písma tak akurát, polohovacie tak akurát. Je to všetko o estetike alebo formátovanie, nie o Základným samotné dáta. A najjednoduchší spôsob, ako ukázať toto je možná príkladom. Takže idem prejsť môjho jednoduchého textového súboru. A za chvíľu, budem chodiť k nám prostredníctvom procesu robiť to sami. 

Chystám sa vrátiť do svojho súboru tu a obnovte stránku práve Pre potvrdenie, ako to vyzerá. To je to, kde sme teraz. Mám pocit, že deti by sa teraz majú nejaké farby na tejto webovej stránke. Takže ja idem sem hore do záhlavia stránky. A ja urobím štýl, / štýl. A potom vnútri toho idem oznámiť telo mojej page-- a to formátovanie, v prvý pohľad možno trochu divne, ale konvenčné. Chystám sa povedať, že na pozadí farba tejto stránke by mali byť zelené. A to je bohužiaľ druh nie je najlepší návrh. Všimnite si, že skôr vo svete HTML, Povedal som, že atribúty sú tieto dvojice kľúč-hodnota. Niečo sa rovná cenovú ponuku koniec citátu "niečo". Vo svete, ktorý bol CSS navrhnutý niektorými inými ľuďmi, oni sa rozhodli, že v ich world, kľúč-hodnota páry by bolo slovo niečo hrubého čreva. Takže je to rovnaká myšlienka, hoci. Je to združujúca hodnotu s niektorými kľúč, ktorý nejakým spôsobom ovplyvňuje správanie tejto stránke. 

A asi tušíte. Čo je to pravdepodobne bude robiť to aj v prípade, že ste nikdy Videl HTML alebo CSS predtým? Divákov: Zmena farby pozadia. David J. Malan: Jo, zmeniť farbu pozadia. A špecificky farba pozadia tela. Ale ak táto Telo teraz je web page-- je to jediná vec, pod záhlavie really-- to asi bude ovplyvní to isté. Takže uvidíme. Zachráňme to. Ísť sem a znovu. Je to celkom odporný. A čo sa deje Tu je vedľajším účinkom. Len som si vybral tento obrázok náhodne. Prečo je zelený nie je prestupujúce za Mickey? Divákov: [nepočuteľné] David J. Malan: Presne tak. Ukazuje sa, že obrazy, pekný mnoho všetky obrázky, ktoré by sme mohli použiť, sú všetky rectangles-- obdĺžnikov. Aj v prípade, Mickey má niektoré krivky pre seba a má zázemie, že pozadie musí byť niečo. Musí byť biela. To má byť čierny alebo niečo iné. To môže byť transparentné. A v skutočnosti, mohol by som otvoriť Mickey Mouse tu v programe s názvom Photoshop alebo niečo podobné a zmeniť všetky tá biela pozadia na priehľadné, takže zelená bude presvitať. Ale to je niečo, čo by bolo treba požiadať o sebe alebo grafik alebo designer v mojom spoločnosť, napríklad, robiť, najmä preto, že som práve požičal tento z internetu. Ale to je dôvod, prečo sa to deje. 

Tak čo ešte môžeme urobiť? No, možno chceme povedať, že sme Naozaj dúfam, že si môžete vychutnať svoj pobyt. A pre dôraz, chcem aby tento silný, a tak poviem otvorený a silný zavrieť silný a potom znova načítať. A je to trochu ťažké zobraziť na projektore ale snáď naozaj teraz vyskočí na vás trochu viac. Takže môžete pridávať kurzívu v tomto spôsob, tučné obklad týmto spôsobom. Mohli by sme zmeniť farby. V skutočnosti je len pre zábavu, som ísť dopredu a to urobiť. Nemám naozaj rád, ako my odseku sú to blízko pri sebe, takže som mohol urobiť niečo také. Chystám sa povedať, prehliadač, sa mení každý bod značku majú, poďme say-- v skutočnosti, viete, čo, poďme zladiť to text-align, centrum. A opäť, viem, že to len Vzhľadom k tomu, niekto ma naučil alebo Vyhľadal som si to v online referencie. Takže dovoľte mi zachrániť to. A, ach, teraz som sústredený obraz tam. A skutočne, viete čo, ak Pohnem obrazu do odseku tag-- takže tretí odsek, aj keď to nie je text. Zachráňme to a znova. Teraz je stránka začína vyzerať druh of-- Myslím, že je to stále dosť škaredý, ale aspoň to vyzerá, že som strávila Dve minúty namiesto jedna minúta robiť to. 

A tak postupne, môžeme urobiť Tieto estetické zmeny teraz stránke? Som príliš nezmenil údajov v systéme Strana iné ako pridaním slová vážne. Pridal som metadáta, ak chcete. Hej, prehliadača, aby sa Slovo "naozaj" tučne. Ale dáta nie je silná. To je metadáta. Dáta sú "naozaj". Takže máme ešte niektoré rovnaké pojmy ako predtým. Teraz, samozrejme, to nie je na webe, takže budem robiť jeden posledný krok tu. 

Chystám sa ísť do hello.html a len zvýrazniť a kopírovať to. A teraz idem ísť do Cloud9, ktorý Ťa prejsť za chvíľu. A šanca, že budete čoskoro, ak Nie je už na obrazovke, ako je tento. A dovoľte mi, aby som vám rýchly Prehliadka čo Cloud9 v skutočnosti je. Takže znovu Cloud 9 je Táto služba cloud-based že vy a mi dáva ilúziu mať svoj vlastný virtuálny stroj v cloude, technicky kontajner v cloude, že máme plné oprávnenia správcu. Takže teoreticky, nikto inde vo svete nemá Prístup na obrazovku Som pri pohľade na práve teraz, snáď s výnimkou ľudí ktorí bežia na webe, pretože technicky majú fyzický prístup a tak ďalej. 

Tak čo vidíme v tomto prostredí? Chystám sa vzdialite, pretože je to trochu malé. A dovoľte mi pripomenúť, cez Tu len na chvíľu. Na ľavej strane môjho a vaše obrazovke, je tu prehliadač súborov na ľavej strane. Takže svojím duchom podobať Mac OS a Windows. To sú všetky Súbory na mojom účte. A v predvolenom nastavení, ak vaše Účet je ako moje, uvidíte alebo čoskoro vidieť helloworld.html a readme.md. Tu na pravej strane, to je kde sú moje textové súbory sa chystáte ísť. Ak ste niekedy používali Microsoft Word alebo Poznámkový blok alebo TextEdit To je slovo, moje úpravy súborov sa chystá ísť. A potom nejobskurnějších Funkcia tohto prostredia že nebudeme naozaj potreba použiť, je sem volal okno terminálu. Ak ste použili DOS od minulý rok, to je Linux alebo Linux ekvivalent DOS. Je to text-based interface-- žiadne kliknutia myšou, nie ťahaním. Jediné, čo môžete urobiť, je zadať príkazy, ale tieto príkazy môže vytvárať súbory, presúvať súbory, otvorené adresára, v blízkosti adresára, urobiť ľubovoľný počet vecí. Ale teraz, proste budeme tráviť čas tu. 

A tak ideme na to. Ak ste v tejto Prostredie, ktoré by ste mali bolo, keby ste vytvorili pracovné prostredie Už, choďte do toho a jednoducho ísť hore do súboru, Nový chvíľu. A to vám dá nový Karta tu uprostred. A ja jen-- a poďme choďte do toho a to dosiahnuť. Poďme ďalej a teraz sa súboru, uložte a ísť dopredu a nazývať to hello.html, nesmie zamieňať s helloworld.html, ktorý prišiel so svojím novým účtu zadarmo, čo je len ukážkový súbor. Uvidíte, že sa náhle objaví, s najväčšou pravdepodobnosťou na ľavej strane, a karta bude stále otvorený. A dovoľte, aby som vás povzbudiť teraz znovu tento súbor alebo niektoré ich varianty. A ak si nie je úplne vidieť ho na obrazovky, to je totožný s sklíčka že máte pravdepodobne na iné karte. 

Takže v skratke, aby vaše prvé webové stránky, uložte ho a potom za chvíľu, Ukážem vám, ako sa môže skutočne zobraziť toto. Ale zmeniť aspoň jednu vec. Zmeniť HelloWorld na niečo vlastného výberu, takže ste presvedčení, že je to vaša súbor a nie ten, ktorý práve som vytvoril. Dobre. A keď ste ready-- nie rush--, keď ste pripravení, choďte do toho a uložte súbor Po vykonaní týchto zmien. A ak kliknete na Bežať tlačidla nahor top, toto mal otvoriť novú kartu, ktorá bude rozprávať čo máte URL môžete navštíviť súbor na, ale môže to chvíľu trvať, než k quote koniec citátu "štart Apache", ktorý je názov webového servera. Takže buďte opatrní a robiť presne čo je v súbore nakoniec. Takže teraz, budem priblížiť. Ak mám začať písať open-držiak HTML, vývesné to ma výzvou dokončiť svoju myšlienku. A keď som dokončil svoju myšlienku, ju automaticky mi dáva uzatvárací tag. Ale očakávania sa potom budem hit Vstúpiť, a potom sa presunúť tam vnútri a to hlavu dovnútra a potom som si telo vo vnútri. A je to trochu divné na prvý, pretože to robí prácu za vás, ale uvedomiť, že v konečnom dôsledku to vám ušetrí stlačenia klávesov. A v skutočnosti, veľmi častým znakom programovacie prostredie v týchto dňoch a to ako pre vývoj webových aplikácií, ako je Tento a skutočné programovanie, ktoré budeme hovoriť o budúcnosti, Práve tieto auto-kompletné funkcie, veci, ktoré jednoducho umožňovať programátor alebo designer písať menej údery dokázať to isté. Niekedy je to dobre, hoci. Niekedy je to len nepríjemné. A opäť, akonáhle ste prepisovaná posuvná alebo nejakú jej variantu, môžete kliknúť na tlačidlo Spustiť do vrcholu. A potom sa na dne okná, budete informovaní na to, čo URL môžete navštíviť svoje webové stránky. Dolu, napríklad, je v business-daharvard.c9users.io a tak ďalej. Dobre, takže, nech me-- nejaké otázky? Akékoľvek ďalšie otázky týkajúce sa len na to, tento pracovný predtým, ako sme pridať funkcie? A dovoľte mi navrhnúť, len dostať ľudí comfortable-- pretože to je jedna vec len copy-paste slepo, čo som urobil. Ale len preto, aby ľudia zápasiť s aspoň jednou to-do, Idem zapnúť nejakú hudbu. Chystám sa navrhnúť zoznam veci, ktoré môžu potenciálne pridať. A môžete samozrejme použiť Google. A prečo nie my len navrhujem pokusu o vyriešenie aspoň jeden tu zvláštny problém. Takže, pokiaľ ide o značky, dovoľte mi, aby som znovu použiť toto. 

V skutočnosti, dovoľte mi, aby som dal že v textovej podobe. Povedzme, že medzi značkami by sme mohli použite tu sú niektoré značky tu. Videli sme odseku značku. Teraz to bude auto-kompletný. Bod tag, kotva tag. Povedzme, že chcete aby sa niečo väčšie, takže je možné jako-- Rozpätie tag môže pomôcť. No, možno budete potrebovať nejakú pomoc za to za chvíľu. Videli sme div. Uvidíte tu tabuľku. Existuje niečo, čo nazýva tr, td. Th, td. Vráť sa k tomu za chvíľu. Čo iné by mohlo byť užitočné? Tam je silná. Tam je dôraz, alebo skôr em. There's-- čo iného Možno máte chuť tu? No, budeme trvať Pozrite sa na to spoločne. Formulár, ktorý sme videli. Tam je forma. K dispozícii je vstupná a niekoľko ďalších. Dobre, takže ideme na to. Ak chcete prijať Victorie otázka, dovoľte mi najprv len uistiť, že všetci schopný dostať svoje ahoj práci. Potom dovoľte mi predstaviť pár ďalších nápadov. Potom necháme ľudí riešiť nejaký problém na vlastnú päsť. Potom budeme vlastne vracať do tohto pojmu formulára, a my vlastne re-implementovať spolu front-end rozhranie, tak povediac, pre spoločnosť Google. Budeme používať Google ako back end a nechať je robiť ťažkú ​​prácu bude hľadanie, ale budeme znovu predok Google a vyhľadávacieho formulára že majú na svoje vlastné domovskej stránke. A tak sa vrátime k tieto značky za chvíľu. 

Tak toto bolo to, čo som Navrhovaná pred chvíľou. Môžeme pridať štylizáciu do A Strana vnútri tohto štýlu tagu a môžeme štylizovať pozadia farba, zarovnanie textu, či už je to stred alebo doľava alebo doprava. Ale veľmi rýchlo by ste nájsť alebo web designer by sa zistiť, že toto sa stáva trochu nepraktický, preto, že robíte to, čo je volal zmiešaní obsahu s prezentáciou z nich. Tie zmiešaní svoje dáta a estetika týchto látok. A v skutočnosti, ak sa domnievate, čo sa bude diať v priebehu time-- To je veľmi malý webové stránky, samozrejme. Ale keď som pridať obsah na túto stránku a pridám štýl na túto stránku, stránky veľmi rýchlo dostane dlhšie a dlhšie a dlhšie. A predpokladám, že chcem mať druhý webovú stránku, ktorá zdieľa niektoré z týchto atribútov. Predpokladajme, že môj druhý webové stránky pre môj site-- Vám chcem všetko centrum, aj ja chcem všetko so zeleným pozadím. Som celkom veľa bude musieť skopírovať a vložiť niektoré z týchto riadkov do tohto druhého súboru, ktorý sa cíti v poriadku. To bude problém vyriešiť. 

Ale čo keď chcem tretia strana alebo 30. strana alebo strana 40.? Teraz bude kopírovať a vkladanie veľa duplicitného kódu vo viacerých súboroch. A tak predpokladám, že Aj rozhodnúť, alebo mi bolo povedané, hej, nie sme s použitím zelenom pozadí už nie. Chystáme sa začať používať oranžovo. Čo budete musieť zmeniť? No, budete musieť zmeniť tento štýl zo zelenej na oranžovú, ako mnohých miestach? Rovnako ako 30 alebo 40 miest. Je to únavné. To je náchylné na chyby. K dispozícii je celý rad dôvodov, kde by ste nechceli vyvolať že druh bolesti na seba. A tak nebolo by to bolo pekné keby sme mohli vziať to, čo som práve vložiť medzi týmito dvoma žltý tagy, tieto tagy štýl, faktor ho a dať všetky moje štylizácia do jedného centrálneho súboru že všetky 30 alebo 40 z mojich ďalších súborov požičiavať z alebo nejakým spôsobom odkazovať, nie na rozdiel od siete diagramy sme robili predtým? 

Takže keď idem sem, že som bude v skutočnosti navrhnúť že nahradiť Štýl štítok s niečím volal link tag, ktorý Je hrozne, hrozne pomenovaný, pretože nemusíte používať link tag vytvoriť čo my ľudia poznáme ako odkaz na webovej stránke. Za to, že budete používať ktorá značka? Ako si vytvoriť odkaz na webovej stránke? Publikum: a. David J. Malan: A, alebo kotva tag, ktorý išiel do Disney predtým. Odkaz tag tu hovorí: tohle-- odkaz na súbor nazvaný styles.css, vzťah, ku ktorému bude, že je to moja štýlov. Takže to je jedna z S rokoch v CSS-- kaskádové štýly. Štýl sheet-- dva S rokoch v CSS. Kaskádových štýlov. To jednoducho znamená, hej, prehliadač, prejdite nájsť styles.css na lokálnom serveri a použiť ju ako svoj štýlov, čo znamená, že vo vnútri tohto súboru bude všetky štylizácia, že sme práve urobil. A tak to, čo tento súbor môže vyzerať ako je táto. A budem robiť to je rýchly Napríklad preto, že nepotrebujeme dostať príliš do burinu tu. Ale keď som kopírovať to, čo chcem navrhnúť je to, že programátor vytvoriť nový súbor, vložiť do týchto lines-- whoops-- vložiť do týchto linkách, uložte ho ako styles.css, a potom v Druhý súbor, odstrániť všetky, ktoré a nahradiť ju namiesto s týmto link tag. Takže keď som prepojiť href = "styles.css" vzťah musí byť "stylesheet" V blízkosti tag. Ulož to. Vráťte sa späť do môjho HelloWorld. Reload. 

Doslova sa nič nestalo. To je dobrá vec, pretože to znamená, že je vlastne všetko funguje. Dokázať toľko, že by som urobiť preklep, a hovorím to "styles.css" s veľkým S, ktorý je nesprávne, a potom znova načítať. Teraz môžete vidieť, že jednoducho nefunguje. A teraz, prečo? Dobre, poďme použite Technika z minulosti. Nechaj ma ísť dopredu, a môj prehliadač, v Chrome, som chystá otvoriť, že osobitné Karta siete ako predtým, a nechaj ma znovu načítať stránku. Čo ste neprekvapilo, že teraz vidieť? Alebo možno ste prekvapený, keď to videl. Či tak alebo onak, to, čo vidíte teraz? Divákov: [nepočuteľné] David J. Malan: To nebol nájdený. Prečo je to nebol nájdený? No, Styles.css-- kapitál S- neexistuje. ho nesprávne pomenovaný som. Jednoduché preklep. Ale ja som stále pochopiteľne teraz 404, pretože server hovorí, hej, to nie je nájdený. Doslova, neviem kde tento súbor je. Takže ako výsledok, prehliadače ukazuje, čo je v jej silách, surové obsah stránky, ktorý bol 200, HTML, ale štylizácia nemôže Potom budú pridané. A to je to, čo sa rozumie pod pojmom kaskádové. Môžete nejako pridať po, a to tak nejako zjemňuje estetiku webové stránky. A dokonca môžete prepísať tie, štýly s ešte ďalších Stylesheet súboroch Ak chceš. To nie je nájdený, aj keď v tomto prípade, pretože samozrejme to nesprávne pomenovaný ja. Takže budem musieť napraviť ako prvá. 

Tak poďme do toho a navrhujú nasledujúce. Poďme ďalej a to urobiť. počnúc možná Váš HelloWorld súbor, dovoľte mi pozvať pár z funkcie návrhy. Takže, Victoria, čo ste chceli aby nejaký text väčšia, že jo? V poriadku, takže môžeme robiť, aby textu väčšia. A budeme každý trhať off len jeden problém k riešeniu. Urobiť textu väčšia. nebudem obťažovať písať, keď sme majú guľka technológiu tamto. Takže niektoré problémy. Takže budeme snažiť aby textu väčšia. Dobre. Čo iné by niekto navrhnúť? Čo iné môžeme chcieť robiť na webovej stránke? Poďme prísť s krátky zoznam vecí, a potom preniesť do Skupina prísť na to. 

Divákov: [nepočuteľné] 

David J. Malan: OK, umiestnenie textu na rôznych stranách stránky? Dobre. Niečo iné. 

Divákov: [nepočuteľné] David J. Malan: Je. Takže gif je len iný formát súboru. Len sme použili, čo, je png alebo jpg asi? Použili sme jpg. Ak ste zvedaví, nadmerný odpoveď na vašu otázku je jpg sa všeobecne používa pre fotografie, pretože podporuje milióny farieb alebo 24 bitové farby. GIF sa zvyčajne používa pre, napríklad, internetový mem tieto days-- animácie, ako animované súbory GIF. Ale to sa stáva použiť menší farbu paleta, len 256 možných farieb, ale podporuje transparentnosti a animácie. A potom je tu png, ktorý podporuje transparentnosti a viac farieb ale nie animáciu. Takže je to trade-off. Takže pridanie gif, hoci, by byť funkčne ekvivalentná k pridanie png alebo jpg. Jo. zdrojový obraz rovná. Takže niečo iné. Poďme prísť s niečím, sme poslali Victoria robiť tu. 

Divákov: Pridajte tlačidlá pre formulár. David J. Malan: OK. Tak pridať tlačidlá na formulári. A budeme robiť, že jeden dohromady. Tak to bude perfektné segue hneď po tejto výzve. Čokoľvek iné? Čo môžete urobiť? Webový cíti veľmi neohromující ak je to všetko, čo môžeme robiť. Divákov: Zmena farby textu. David J. Malan: Zmena čo? Publikum: Farba textu. David J. Malan: Zmena farby textu. Dobre. Tak ideme na to. Len znovu tak, že nie ste, len naspamäť, robí presne to, čo robím, Idem sa obrátiť na hudbu pre asi päť minút tu. Rado sa používať Google. Rado sa ma pýtať, a Budem šepkať náznak do ucha. Rado sa pozrieť viac než na ostatných ramien. Ale rieši len jeden z týchto problémov. Ale urobíme ten posledný, na tvoria jeden, keby sme mohli spoločne. Tak päť minút riešiť niektoré z týchto problémov používate Google, intuícia, alebo akákoľvek iné prostriedky k dispozícii. 

[MUSIC PLAYBACK] Dobre. Žiadne starosti, ak chcete zachovať šťourat, ale budem kaziť pár z týchto odpovedí. Takže prvý návrh z Victoria bola robiť texte väčší. Takže tam je niekoľko spôsobov, ako to dosiahnuť. Ja som v súčasnej dobe obnovené obrazovka na túto veľkosť, keď som zväčšených umelo jednoducho vidieť veci. A ideme na to. Nechaj ma ísť dopredu a urvat niektoré generické latinský text Len tak máme niečo pracovať. Tak daj mi len jeden okamih. Urobím tri odseky. OK. Bude to lepšie príklad. Takže pre zvedavé, v môj hello.html, len som vložiť tri nezmyselný latinské body Len tak máme nejaký text pracovať. A Victoria cieľom bolo urobiť niektoré z textu väčšia. Takže som mohol, rovnako ako predtým, ísť sem. A nechaj ma to urobiť správnym spôsobom. Budem mať odkaz tag, ktorý odkazuje na súbor s názvom "styles.css," vzťah z ktorých je opäť "štýlov." A potom budem tou výnimkou, že a otvoriť tento "styles.css." 

Tak, ako predtým, mám Schopnosť v tomto súbore CSS skutočne prepísať predvolené estetika webové stránky, a východiskové estetika, Samozrejme, sú celkom nudné. Je to niečo normálne veľkosti písma, čierna text, biele pozadie, a tak ďalej. Takže predpokladám, že chcem, aby sa všetky tohto textu väčšia. Mohol by som urobiť pár vecí. Podľa môjho styles.css súboru, I Dalo by sa povedať, viete čo, platia nasledujúce Telo moje stránky. Choďte do toho a robiť veľkosť písma 24 bodov, čo je číslo by som mohol použiť v aplikácii Microsoft Word. Nechaj ma ísť späť do môjho webu Stránka tu a znova, a môžete vidieť, že už je oveľa väčší. A môžeme dostať trochu blázon, rovnako ako môžeme na desktop-- aby bolo 96 bodov. Reload. A je to stále málo nepraktický v tomto bode. 

Ale môžem byť trochu presnejší. Namiesto použitia tejto štýlov k telu mojej stránky, čo iného by som mohol použiť ju na miesto, aké ďalšie značka, ktorá by ešte funkcie rovnakým spôsobom? 

Publikum: p tag? David J. Malan: P štítok. Takže hlava nebude správne, pretože hlavy, nemôžete vlastne ovládať estetiku. Je tam, alebo nie formou textu. Ale p tag-- môžem ponoriť trochu hlbšie, tak povediac, na odsek tagy. A aj keď sú tam tri, To je úplne v poriadku, pretože v CSS, keď som len povedať "p", táto znamená platia nasledujúce na akúkoľvek značku, ktorá zodpovedá tejto volič, volič len je názov tagu. Takže tam, kde vidíte "P", platí veľkosť písma, a poďme robiť to viac rozumné again-- 24 bod. A viete čo, Len pre istotu, urobme farbu red len na chvíľu. A teraz keď som znova, teraz vidieť tri škaredé body. 

Ale teraz predpokladajme, že som nejako of-- Chcem prvý odsek vyskočiť na používateľa. Ja nechcem len zvýšiť veľkosť písma všetkého. A tak som sa skutočne chcú identifikáciu alebo rozlišovať medzi týmito bodmi. Takže poďme sa zbaviť červené, pretože to je len trochu lacné, a poďme do toho a aby sa veľkosť písma 12-bodový v predvolenom nastavení, takže sme späť k niečomu trochu rozumnejšie. A teraz chcem len k zvýšeniu veľkosť písma v prvom odseku. Zvládnem to v niekoľkých spôsobmi, ale jeden spôsob, ako to je snáď najviac inštruktážne at the moment je nasledujúci. Nechaj ma ísť a povedať, toto odsek má jedinečný identifikátor "prvý". Mohol by som zavolať túto čo chcem. Mohol by som volať toto "foo" alebo akékoľvek iné slovo, ale ja idem dať mu nejaký sémanticky zmysluplné meno ako "prvý". To je jedinečný identifikátor, ID, na môj prvý odsek. 

Čo môžem robiť teraz v mojom štýlov Je o niečo presnejšie. Namiesto toho hovorí, platí nasledujúce p tagu Môžem povedať, že following-- platia nasledujúce, alebo zvoľte, HTML element ktorý má jedinečné ID "prvý". Čo chcem, aby sa na neho vzťahujú? Veľkosť písma 24 bodu. Takže mám dva selektory teraz. Jeden robí všetky body 12 bodov. Ale tento jeden, najmä preto, že ide second-- to príde minule v file-- to má kaskádový účinok. Práve som urobil všetku moju Značky odseky 12 bodov, ale to teraz kaskády a prepíše, že pre akékoľvek prvky na stránke akýkoľvek štítok na stránke, ktorej jedinečný identifikátor je citát koniec citátu "prvý". A hashtag v tejto súvislosti jednoducho znamená "jedinečný identifikátor." Nechcem dať do HTML súboru. Aj tu, stačí povedať citát koniec citátu "prvý". 

Tak nech mi znovu. A teraz vidím, ah, OK. Myslím, že to nie je tak pekný, ale je to trochu ako so samotným predhovore ku kniha alebo niečo také, kde prvý odsek je väčšia. Mohol by to byť ešte presnejší len prvé písmená, ale prinajmenšom Ja som vykonával väčšiu kontrolu. Teraz maybe-- možno chcem to urobiť príležitostne z akéhokoľvek dôvodu, a tak nechcem to vzťahovať iba na jeden HTML tagu. Skôr, poďme say-- poďme tiež urobiť nasledujúce. Class = "import". Kým ID slúži na jednoznačnú identifikovať jednu vec, jednu značku, do webovej stránky, trieda má byť používať na ľubovoľnom počte prvkov alebo tagy Na svojej webovej stránke. Takže je to na opakované použitie. ID nemožno použiť znovu. Trieda je na jedno použitie. 

A viete čo, pre čokoľvek filozofické reasons-- Nechcel som dokončil svoj Myslel som chcel povedať že prvý odsek a Druhý bod je dôležitý. Takže idem požiadať o triedu s názvom "Dôležité", že ak I ušetriť súbor a znova, nemá žiadny funkčný dopad doteraz. Ale ja som pridal niektoré metadáta Zo spisu vyplýva, druh niečo oddelený zo základných údajov v spise o, takže teraz v mojom štýlov, keby som Namiesto toho hovoria ".Upozornění" - viete, čokoľvek, čo je dôležité, že som bude robiť font-farby, red-- alebo skôr nie font-farby, len farbu. Je tu rozpory v CSS bohužiaľ. A znova. Teraz si všimnúť prvý dva odseky sú červené ale nie tretí, pretože som len aplikoval triedu "dôležité" k prvému dvoch z týchto vecí. 

Takže ID, budete mať možnosť určiť veľmi presne. S triedami, máte opätovnú použiteľnosť. Ale v oboch prípadoch všimnete druh princípe dobré dizajnu kde som vytknúť všetky estetika v mojom styles.css súbore. Takže tam to tu žiadny neporiadok. Neexistuje žiadna zmienka o červené alebo tučné-obklad alebo veľkosť písma v tomto súbore. Skôr mám sémanticky, zmysluplne charakterizovaný mojich údajov ako, Tu sú niektoré dôležité údaje. Tu je niektoré ďalšie dôležité dáta. Okrem toho, je tu "Prvý" z mojich dôležitých dát. Takže HTML je predovšetkým o triedení tagovanie doslova slová a odsekov a konštrukty vo vašom Stránka s týmito malými náznakmi, ak vás bude, že môžete nejakým spôsobom využiť používaní Iné techniky, ako je CSS týmto spôsobom. 

Takže v odpovedi na otázku Victoria, môžeme textu väčšia týmto spôsobom. Existuje mnoho iných spôsobov, ale písmo tag-- otvorený držiak "font" - je v skutočnosti niekoľko rokov. A to je ten problém, Tiež sa spoliehať iba na online resources-- majú tendenciu byť zastaralé. A skutočne, ktorý bol zastaraný, pretože svet si uvedomil, čo znamená "font-size = 7" znamená? To nie je. A tak po mnoho rokov a Tento day-- jeden z boku berie na vedomie, tu je to, že je v skutočnosti neuveriteľne bolestivé ešte niekedy vyvinúť miesta pre web, pretože Microsoft a Google a Mozilla a iní často rozchádzajú v tom, ako interpretovať špecifikácie ako HTML. 

Tam je súbor pravidiel pre HTML, ktoré všeobecne hovorí, že to, čo každá značka znamená. Ale niekedy je to ponechané na uváženia implementácie je, diskrétnosť a Google Microsoft. A tak sa budete veľmi často vidieť na webových stránkach niečom vyzerá inak na PC než to robí na počítači Mac, a to je naozaj preto, že na konci dňa, nemali to vyskúšať dobre na oboch platformách. Ale je to aj preto, že rozumná, chytrí ľudia nebudú súhlasiť a spoločnosti budú súhlasiť, a tak Jednou z výziev programovania pre web alebo projektovanie veci na webe píše svoje webové stránky takým spôsobom, ktorý funguje na každom webovom prehliadači. Ale aj to je nerozumné, že jo? Existuje mnoho verzií toľko prehliadača tam, že v určitom okamihu, máte tiež urobiť úsudok volanie a vy budete musieť rozhodnúť, ako spoločnosť, najmä pre e-commerce štýle miesta, kam pokusu o použitie najnovšie a najväčšie Technológia dať naozaj dobrý užívateľa zážitok. Ale niektorí percento užívateľov by mohlo stále používate Internet Explorer 6 alebo 7 alebo 8, a to najmä v závislosti na Krajina, ktorá oni prichádzajú. 

A tak veľmi často konzultované je niečo, ako "štatistiky webového prehliadača." A ak pôjdeme to-- pozrime Wikipedia a uvidíte, ako up-to-date tento graf je ak existuje. Takže tu vidíte kde prehliadača vlastne sú podľa decembra 2015, Podľa vlády USA. Chrome je v podiele na trhu 42%, nasledoval IE do značnej miery na firemné nastavenie alebo nastavenia PC, samozrejme, nasleduje Firefox, potom Safari, Opera potom nie aby mapy tu z nejakého dôvodu, a potom ďalšie. Možno je to v kategórii Ostatné. Ale problematickejšie ako to je-- Uvidíme, či Wikipedia má tiež verzie prehliadačov version-- 

Poďme do štatistík prehliadača. IE. Ani to nestačí. Štatistiky prehliadači. Moja verzia. Že to nebude mať pravdu. Pozrime sa verzie. trhový podiel prehliadača. Uvidíme, či to príde. OK. Teraz to začína trochu užitočnejšie. Tak tu si všimnite, že máme všetci rôzne verzie prehliadačov. A, môj bože, keď sa look-- Chrome 48, 47 Chrome, Chrome 31, Chrome 45. Myslím, prehliadača stále aktualizovaná, a niekedy niektoré z týchto zmien sú významné z hľadiska funkčnosti. A tak v určitom bode, produktoví manažéri alebo inžinieri je potrebné vykonať decision-- vás Vieš čo, len 1% na svete stále používa IE 7. Do čerta s nimi. My jednoducho nebude podporu tohto prehliadača. A čo to znamená nepodporovať? To by mohlo znamenať, že gombíky nefungujú na svoje webové stránky, alebo by to mohlo znamenať, že Formátovanie je úplne mimo. Alebo možno budete musieť vykonať ten istý úsudku v mobilných týchto dňoch, kedy, sme nebude podporovať iOS 5 už nie. Takže ľudia jednoducho musieť upgradovať. Alebo nebudeme podporovať Cupcake Android OS pre zariadenia so systémom Android, pretože ako world-- ako tech svet chce posunúť vpred, to akosi chce pretiahnuť svet s ním tak, že to tak nie je musí byť aj naďalej spätne kompatibilné, takže môžu ponúknuť nové a dobré vlastnosti. To je jedným z dôvodov, prečo tak veľa firiem vyvaliť automatické aktualizácie a tak nejako nútiť najnovšia verzia softvéru na nás. A dokonca aj firmy rovnako ako Apple bude triediť podľa núti vás takmer alebo zaviazať vy z hľadiska trhovej sily kúpiť nový telefón, pretože jednoducho nebude aktualizovať svoj starý telefón ešte. Takže si ujsť najnovšie a najlepšie funkcie, pretože je to nákladné pre nich ako Spoločnosť udržať starší, pravdepodobne podradné verzie softvéru. Ale Výsledkom je, že tiež trpieť to rovnako. 

Takže poďme sa pozrieť na práve pár finálnych vecí tu. Poďme ukradnúť naozaj rýchlo niektorá tie ostatné guľky, ak zvedavý. Takže ak ste sa snažili, napríklad pozíciu text na rôznych stranách strana, budem robiť jednu rýchly spôsob, ale je tu iný spôsobov, ako to dosiahnuť. Nechaj ma ísť dopredu a eliminate-- zjednodušiť to nasledujúcim spôsobom. Nechaj ma ísť späť do môjho jednoduché, prosté body. Nechaj ma ísť späť do môjho styles.css. A ja som jednoducho ísť používať simple-- ktoré ste mohli vidieť na Google alebo ho vyvolajte z earlier-- text-align pravdu. A obnovte túto stránku. Teraz je všetko sa zdá byť zarovnaný vpravo, ako ste mohli vidieť na strope tu. 

Môžeme sa, aby to vyzeralo trochu viac si podobné a môžeme povedať, "ospravedlniť" a znovu. Teraz je to pekné a na námestí oba strany, čo je celkom pekné. Ďalším cieľom, ktorý sme tu mali bola zmena farby textu. Takže sme videli, že so svojím červeným textom. A teraz pridať tlačidlá pre formulár. Tak prečo nie sa snažíme robiť presne to? Ale najprv nechaj ma ísť na stránky, ktoré väčšina z nás používa každý day-- Google. A poďme sa pozrieť na Ako Google skutočne funguje. Ale budem to robiť. Najprv mi dovoľte to in-- áno, nechaj ma ísť do Google ako prvý. Budem musieť ísť do Nastavenie Google, pretože chcem vypnúť niečo, čo nazýva okamžité výsledky. 

Takže ste si možno všimli v Google tieto days-- nechaj ma ísť späť a to zapnúť. Takže keď som začať hľadať pre "mačky", ako je tento, Všimnite si, že nielen Mám auto-dokončenie up top, naraz, samotná stránka Zdá sa, že zmeniť celkom rýchlo, rovnako, a to je Google pomocou jazyka volal JavaScript snaží byť užitočný. Ale bohužiaľ, to láskavý z skazí našu diskusiu o tom, čo sa skutočne deje Pod kapotou tu. Takže som tak nejako rýchlo vypnutie okamžité výsledky. A ja idem na tlačidlo Uložiť. A teraz idem otvoriť že diagnostický panel nástrojov, ktoré som udržiavať otvor na karte sieť. Tak ideme na to. Nech me-- whoops-- rolovať to trochu dole. A nechaj ma hľadať "mačky". 

A teraz notice-- vlastne To je dobrá príležitosť diskutovať na chvíľu. Všimnite si okamihu, kedy som ju type-- zastaviť. Prestaň. OK. Všimnite si ten okamih som napíšete C, pozerať sa na spodnej časti obrazovky. A- T- S. Čo na dno z tejto obrazovky, moja karta Network, navrhnú sa deje každý Keď som písať list? Bohužiaľ, žaba je veľmi rozptyľujúce dnes alebo trojlístok alebo čo to je. Čo sa deje zakaždým, keď som napísal? A dovoľte mi zrušte bufferu a znovu ho zadajte. Tak-- pokriky. Zakaždým, keď som písať list, C- A- T-- takže nový riadok evidentne stále objavujú. Čo každý z týchto riadkov predstavujú základe toho, čo sme videli a diskutovali tak ďaleko? Divákov: Hľadanie? David J. Malan: Hľadanie, alebo všeobecnejšie, požiadavka HTTP z môjho prehliadača na serveri. Tak prečo je môj prehliadač robiť HTTP vyžiadať zakaždým, keď píšem list? 

Divákov: [nepočuteľné] David J. Malan: Jo, to dáva me tieto auto-kompletné výsledky. Rovnako ako tam, kde sa tieto Výsledky vyhľadávania pochádza? No, zakaždým, keď som typ domu písmeno, Google posiela viac a viac a viac Slovo som písať. Prečo? Pretože chcú, aby mi dal lepšie a lepšie, lepší návrh, zoznam návrhov, za to, čo slovo Snažím sa skutočne kompletný. Takže to znamená, že doslova každý znak zadáte do Googlu je odosielaný, v konečnom dôsledku objem, ale tiež niekedy jeden v čase za účelom vykonávania Tieto auto-kompletné funkcie, keď dáta je samozrejme na webe. 

Teraz sa poďme pozrieť na to, čo vlastne sa stane, keď na tlačidlo Hľadať v Google. A potom budeme využívať to sami. Takže keď som sa posunúť nadol teraz veľmi Prvá žiadosť, ktorá sa práve stalo. Všimnite si, že nasledujúce. To bol poslaný k pomerne dlhé URL-- https://www.google.com/search? a potom celý rad vecí. Pozrime sa to vlastne teraz V záložke prehliadača sám. Poďme sa zbaviť paneli nástrojov tu. Tu je na stránke výsledkov vyhľadávania. A oznámenia tu je URL. Teraz môžete asi tušíte čo sa tu deje čiastočne. Takže v prvom rade, definície. Toto zrejme je cieľ kde je formulár odoslaný. Takže keď som napísal v Slová "mačky" a stlačte klávesu Enter, zrejme Google poslal môj vstup textu na túto adresu URL že som zdôraznila tam, lomítko vyhľadávanie. Ukázalo sa, že v URL, nič, čo by sa stane potom, otáznik je, ako sme stále hovoríš, pár kľúč-hodnota ktorá bola zadaná do formulára alebo nejakým prenášaná z prehliadača na server. 

Takže kedykoľvek napíšete vstup do formy na webe a je odoslaná ako máme Diskutoval cez Get, jeden z nich virtuálnej obálky, obsah Z toho envelope-- áno, udržať stále plnená fyzicky do obálky v triede dnes, ale technologicky je to vlastne dať do URL. Takže v skutočnosti, dovoľte mi preosiať cez to. Kde vidíte vstup od užívateľa? Kde vidíte niečo že ja sám napísal tu deje? Jo, tak "mačky". Správny? Tak nech mi to destilovať do niečoho jednoduchšieho. Idem zmazať všetko o Táto adresa URL, ktoré nerozumiem, a ja som jednoducho ísť k odchodu to ako tohle-- / hľadať? q = mačky. Uvidíme kde Q pochádza z roku chvíľu, ale že sa cíti ako minimum Množstvo informácií, ktoré mám k dispozícii. A teraz budem stlačte Enter. A všimnite si to ešte funguje. Stále sa vrátime veľa mačiek. Tak Google je milovník ako to v týchto dňoch. Je to 2016, nie 1999. Takže je tu ďalšie veci, že moji prehliadač posiela na server. Ale to je minimálne to všetko je nutné. 

Tak čo sa deje? No, v prvom nechaj ma ísť dopredu a ísť späť na Cloud9 a nechaj ma ísť napred a zavriem kartách skôr. A budem to robiť na mojom vlastniť len na chvíľu. Chystám sa pokračovať a vytvoriť nový súbor. A budem ju uložiť ako google.html. A budem veľmi quickly-- Idem ukradnúť, v skutočnosti, niektoré z týchto texte len preto, aby ušetril čas. Idem vložiť to tu. Nebudem sa obťažovať s akákoľvek štylizácia tentoraz. Budeme volať toto "Môj Google." A ja idem zbaviť všetko v tele. A ja budem robiť nasledujúce. Nechaj ma priblížiť. Formulár action-- a ako som krátko zmienil earlier-- whoops-- ako som stručne už bolo spomenuté, pôsobením formulár, kam posielať dáta. Tak google.com/search. A spôsob chcem použiť môže byť jedna z dvoch vecí. To môže byť buď "dostať", ako držíme diskutovať, alebo to môže byť "post". Pre túto chvíľu je zásadný Rozdiel je v tom, ak používate "dostať" všetky informácie, ktoré Užívateľ poskytuje dostane poslal v URL. 

To je skvelé pre veci, ako je vyhľadávanie motory a niekoľko ďalších aplikácií, ale v tom, čo by to okolnosti nebudete chcieť vyplniť formulár a mať informácie neskončil URL, rovnako ako v adresnom riadku prehliadača? Aké formy robiť vás-- Divákov: [nepočuteľné] David J. Malan: Jo, ako čo? Divákov: Heslá. David J. Malan: Jo, tak sa prihlásiť na Facebook alebo nejaké webové stránky. To je vstup používateľa z formuláre, textové pole, ale asi to nechcem objavil v URL prehliadača. Prečo? Myslím, možno tam sú niektoré bezpečnostné dôsledky na sieti, ale more-- rád, jednoduchšie, čo keby váš spolubývajúci, vaše ďalších významných, vaše deti, váš manžel vyzerá cez históriu prehliadača? Tam je vaša heslo pravdu tam v histórii prehliadača. Že nemá pocit, že dobrý dizajn. Alebo dokonca viac technicky, Predpokladám, že sa snažíš nahrať fotky na Flickr alebo Facebook alebo wherever-- že je na vstupe užívateľa, aj keď je to trochu viac interesting-- ako mám vtesnať obraz v adresou? Tak nejako akosi nemôže. Tak nejako pôjde. Ale fakt, že som zle si predstaviť, že robí. Tak som potrebné ďalší spôsob nahrávanie fotografií na webové stránky, a že iná metóda sa nazýva "post". Ale teraz, budeme len hovoriť o "So", čo je jednoduchšie z dvoch. Jednoducho to dáva všetko Užívateľský vstup do URL. 

Takže tu je forma Ja vytváranie. Chcem vstup. A viete čo? Chystám sa vziať hádať tu. Idem pripomenúť môj input "q" pre "dopyt". A myslím, že je to jeden z originálnym dizajnom, snáď z roku 1999. A potom typ tohto vstupu Je len bude "text". A potom budem mať ďalšie vstupy ktorý nepotrebuje meno, ako sme skoro uvidíme pozri, ktorého typ je "predložiť". A to bude daj mi špeciálneho tlačidla. A to je všetko. 

Tak nechaj ma ísť dopredu a uložiť tento súbor. Chystám sa vrátiť do mojej prehliadač a prejdite na google.html. Enter. A je to celkom riedke povedať najmenej. Ale nechaj ma ísť napred a hľadať "mačky". A všimnite si, že som v súčasnosti na tejto adrese Cloud9. Ale vo chvíli, keď som na tlačidlo to, kde si dúfam, že skončíte? 

Divákov: Google. 

David J. Malan: Google. Takže poďme na tlačidlo Odoslať. A skutočne som re-implementovaná Google. Správny? Je to jednoduchšie. Je to ľahšie. Myslím, že môj kód je jednoznačne lepší ako ich, od neporiadku sme videli skôr. A viete čo? Chystám sa okoreniť to až trochu. Nezmienil som sa o to skôr. Tam sú značky, ako H1, v okruhu 1, najdôležitejšie nadpis na stránke. "Google My," Zavolám to. Nechaj ma znovu. Vyzerá to trochu lepšie už. A skutočne, viete čo? Mám already-- som klamal. Povedal som, že nebudeme štýl to, ale budem štýl to ako predtým. A moje telo sa stane, povedzme, text-align centrum. Vyzerá to už viac ako Google. 

Musím zalomenie riadku, aj keď, za to tlačidlo Odoslať. A ukázalo sa, vy môžu používať body, alebo si môžete viac doslova len povedať, daj mi čiaru prestávka here-- na br značku. A keď som znovu to, teraz to tam chodí. Je to trochu škaredé, a tak som mohol robiť viac riadkov, ale poďme sa dostať sem príliš nenásytní. Takže teraz uvidíme, či to funguje u "psy". Zdá sa, že pracovať pre "psov", rovnako. Takže to, čo je tu presvedčivé stánok s jedlom? One-- nebol obrovský skok na zavádzať niekoľko ďalších značiek, ako tagu form vo vstupnom značke. Ale ešte podstatnejšie znamená, že všetci robíme je využitie naša porozumenie HTTP a skutočnosť, že formy nakoniec zmeniť čo je v URL prehliadača, a tak teda môžeme mechanicky prispievať k serveru tým, že formulár HTML a vedieť, že server chápe, HTTP, rovnako ako naše telo chápe, rovnako ako, triasť ruky mojej, že rovnaký protokol, a tak sa vrátime odpoveď že sme nakoniec očakávať. 

Tak poďme skúsiť vykonať jednu To posledné, čo teraz s mobilnou, a budem make-- Pridám tento kód sklíčka. Takže ak by ste chceli pohrať, vás možno určite vziať odtiaľ. Ale ja idem dopredu a urobiť jednu vec. Chystám sa ísť dopredu a otvoria svoje indexu page-- Dobrý deň môj stránky ako predtým, čo Má veľa tohto textu faux-latinčiny, alebo bezvýznamný latinský text, a has-- vyzerá to, že to v tejto veľkosti písma. Ale dovoľte mi ísť dopredu a to urobiť. Chystám sa ísť do Cloud9. A vy nemusíte robiť tento krok. Budem robiť to sám. Idem na tlačidlo Share. A to je vlastnosť Len z Cloud9, pričom Môžem sa životné prostredie, verejné. 

A práve kvôli Demonštrácie, nechaj ma to urobiť. Idem robiť mojej žiadosti verejnosti. Všimnite si, to ma varoval, am Určite chcem to urobiť, pretože to bude robiť každý vo svete, či už je to tu alebo sledovanie videa na neskôr internet možnosť vidieť, čo vidím. Ale to je v poriadku. Budem hovoriť "Hotovo." A dovoľte mi, aby som vás povzbudiť, keby som to urobil Tento correctly-- dovoľte mi, aby som ju najprv otestovať. Len do toho, ak nechcete mind-- do prehliadača v počítači, choďte na túto adresu URL, a dúfajme uvidíte môj latinský text. A aby bolo jasné, že je to bežiaci nie na mojom notebooku. Je to v cloude. Je to na Cloud9, a to doslova, ale Už som sa priestoru verejnosti takže ktokoľvek na internete môžu pristupovať domovskú stránku latinčinu. 

Prejdite na rovnakú adresu URL na telefón, ak by ste mohli. Ak vás to bude stáť, keď by ste stačí sa pozrieť cez rameno. Divákov: [nepočuteľné] David J. Malan: Je mi to ľúto? Divákov: [nepočuteľné] David J. Malan: Len latinské slová. To je všetko. Ale to, čo by ste mali vidieť. 

Divákov: Jo. David J. Malan: Jo. Jo. OK. Takže môžem zdvihnúť vaše telefón na chvíľku? Takže dúfajme, že ak ste v prístupe to by malo vyzerať takmer nečitateľný. Je to still-- Myslím, že je to nečitateľný kvôli latinčiny. Ale je to tiež nečitateľný z akého iného dôvodu? Rovnako ako to, čo vám nepáči o tom? Divákov: Je to malý. David J. Malan: Je to super, super malý. Tak ako môžeme tento problém vyriešiť? Je to super, super malý Na Victoria telefóne a ak ste stiahol it up sami, najskôr malá na telefóne rovnako, ak nie je vás mať zapnutý nastavenia prístupnosti. Čo je to? Dalo by sa jednoducho štípať a zoom, ktorý je funkčný, ale potom uvidíte iba niekoľko slov naraz. Tak počkaj. Viem, ako to opraviť. Správny? Mohol by som použiť CSS, a ja mohol zmeniť veľkosť písma z 12 bodov na 24-bod. Ale vedľajší účinok, ktorý, Samozrejme, bude teraz, na stolnom počítači alebo notebooku, Teraz text je dvakrát tak veľký. A tak to by bolo pekné druh rozlišovať medzi zariadeniami, a to dopadá tam sú spôsoby, ako robiť to. existuje niekoľko rôzne spôsoby, v skutočnosti, pričom pomocou CSS a pokročilejších funkcií že nebudeme ísť do veľmi podrobne, môžete v podstate otázku prehliadač a hovoria, Ak je Vaša obrazovka menšia ako toto Mnoho pixelov, použiť túto veľkosť písma. Ak obrazovka je väčšia ako toto Mnoho pixelov, použite tento iný veľkosť písma. 

Môžete byť stále ešte chovateľ. Ak ste niekedy navštívil webová stránka, že na stole, Má veľkú ponuku možná off na bočné a potom všetok obsah je na strane, ktorá menu-- to je druh spoločného paradigmy. Menu na ľavej strane, obsah Na pravej strane, alebo naopak. Nie je naozaj pracovať na mobil, keď si Obrazovka je len táto rada pixelov. Takže bežnejšie na mobil, Vaša ponuka sa náhle dostanete zrútil, a budete musieť kliknúť na tlačidlo vidieť, alebo webové stránky bude klásť na ponuku nad ňou a dať obsah pod ním. A môžete implementovať tieto veci rôznymi spôsobmi, taky. Môžete požiadať svojich programátorov, hej, tímu, kedykoľvek vidíte požiadavke HTTP z Androidu zariadenia, zariadenia Microsoft, je Google zariadenia Apple zariadenia, použite tento veľkosť písma a používať toto rozvrhnutie menu inak použiť predvolený väčšie rozloženie. 

Teraz, s použitím čo Základným technika dnes mohli inžinieri používajú vedieť, či je to iPhone, Android, telefón, laptop, desktop hosťujúci servera spoločnosti? V ktorom sa dostať tieto informácie? 

Divákov: Hlavička? 

David J. Malan: Jo, hlavička HTTP. Takže každý požiadavka HTTP prichádzajúce z ich zákazníci do svojich serveroch patrí, vnútri ktoré virtuálne obálka, celá partia hlavičiek HTTP, z ktorých jeden je prehliadač a operačný systém dokonca, ak vám záleží na že úroveň detailu. Teraz je to mystická vyzerajúci reťazec, ale existuje softvér, ktorý bude len zjednodušiť to, a môžete sa opýtať programovanie code-- PHP, Java, C ++, whatever-- čo telefón je tohle-- aké zariadenie je tento užívateľ používať? A potom si môžete povedať, ukázať im to verzia stránok, či je to telefón. Ukážte im túto verziu webové stránky, či je to notebook alebo desktop. Ale vy ani nemusíte na strane servera zložitosť. Môžete to urobiť aj tie najjednoduchšie veci. 

Chystám sa to urobiť. Chystám sa pokračovať do môj Cloud9 prostredie, a idem pridať značku že ste videli v Googlu predtým. Je to nazýva metatag. A nikdy Spomínam si toto, tak Chystám sa ju prepísať tu. Meta name = "viewporte" a potom content = "width = šírka zariadenia, intital scale = 1 "a to je všetko. 

Tak, že to môže byť aj ako magické zariekavania. To nie je všetko, že jasné, ale to má niečo spoločné s priezoru, a výrezu je len telo webová stránka je obdĺžniková oblasť, ktorá definuje väčšinu stránky. A to je práve hovorí prehliadač, vieš čo? Urobiť šírku tejto stránke účinne rovná šírke zariadenia. Inými slovami, nepredpokladajte, že Máte akési neobmedzený priestor. Predpokladajme, že máte len toľko, koľko Priestor ako samotného zariadenia je veľký. A tak teraz, keď som znovu toto vo svojom prehliadači, nevidím žiadnu zmenu. Ale keby som to urobil correctly-- a dovoľte mi na moju fingers-- ak vám všetkým preložiť svoje telefóny, viď pozri presvedčivé zmenu? Jo, je to-- 

Divákov: [nepočuteľné] David J. Malan: Áno. OK. Takže pravdepodobne čitateľnejší teraz? Ešte malý, aby sme boli spravodliví, ale nie tak malý, aby bol neovládateľný. A mohol by som určite prepísať ďalej s CSS alebo na strane servera, ale stále to, čo ste videnie je stále viac a viac funkcií pridávanej na strane klienta environments-- JavaScript, ako budeme diskutovať Zajtra, CSS, a tak HTML-- že všetky tieto otázky možno vykonať na strane klienta tak, aby sa obťažovať Server oveľa menej, a nie musieť držať krok s, pre inštancie, konštantný nápor nového operačného systému verzia, nové verzie prehliadača. Stačí si len nechať prehliadač opýtajte zariadenia, aké veľké sú tí, a potom sa trochu logickým rozhodnutia založené na tom. Ale uvidíme viac príležitostí pre logické rozhodovanie Zajtra v kontexte programovacieho jazyka. 

Takže nejaké otázky, potom, na vývoj webových aplikácií? V súčasnej dobe nie je webové programovanie, per o sebe, pretože väčšina všetko, čo sme urobili Bol veľmi estetický, ak chcete. Neexistuje žiadny rozhodovanie v kód, ktorý sme napísali, a tak to je dôvod, prečo HTML je značkovací jazyk, nie je programovací jazyk. Ale zajtra budeme brať letmý pohľad, v konečnom dôsledku, v JavaScripte, ktorý je skutočný programovanie jazyk, ktorý nám umožňuje robiť trochu viac. 

Nejaké otázky? No, dovoľte mi navrhnúť dve Príležitosti pre nepovinné úlohy. Jeden je-- tieto Cloud9 účty nevyprší. Ste vítaní na využitie aby pohrať. Je to voľná úroveň služieb. Uvedomte si, že ak pri vytváraní Váš pracovný priestor, môžete zverejnili, že nemá znamenať, že ktokoľvek na strane internet môže vidieť, čo píšete. Takže možno len za nie do rozpakov sami ak ste uvedenie svojej prvej web Strana tam verejne náhodou, ale nikto to bude vedia, že vyzerajú rovnako. 

A two-- dovoľte mi prehadzovať up tejto adrese tiež, najmä ak ste prišiel dnes trochu menej pohodlné ako ostatné, istí, čo toto všetko znamená. Uvedomte si, že oveľa viac o tomto videu ktorá je ako dobrý spôsob, ako zaspať a tiež sa smiať chvíľu Pritom je tiež veľa spoločensky zaujímavé a bezpečnostné relevantné diskusie v ňom od Johna Oliver, hoci komik. 

Ale ak nie sú k dispozícii žiadne ďalšie otázky, To nás privádza k recepcii. Tak prečo nie zapnem hudby. Malo by byť nápojov a občerstvenie vonku. Som rád, že sa mieša tak Kým ľudia chceli, odpovedať na otázky viac one-on-one. Ale inak, nie je zač vzlietnuť na akomkoľvek mieste, a uvidíme sa zase Zajtra ráno trochu viac. Dobre, vďaka.