DAVID J. Malan: V redu. Mi smo nazaj. Torej, cilj te sklepnega zasedanja je uvesti še nekaj konceptov ampak tudi dati vsakemu posamezniku možnost da nekako raztezajo prstov in dejansko nekaj storiti malo hands-on. Cilj je, da ne bo obrniti vse nas v spletne razvijalce na kakršen koli način, ampak res samo da vam okus nekaj temeljnih konstruktov za kaj gre v spletno programiranje in danes spletu Razvoj, zato statična stran things-- ni logike, no programiranje jezik, le statična vsebina. In to nam bo dalo priložnost bi dejansko videli, kaj je spletni strežnik, glej kakšna datoteka HTML, si oglejte, kaj je HTTP dejansko služi navzgor. Toda preden se spustimo v, vse retrospektivo vprašanja o računalništvu v oblaku ali varnost ali kaj vmes? Ne? Dobro, dobro, kaj je To storite tako, za vsak slučaj Proces se prijavili za nekaj, kar traja nekaj minut. Bomo pustite, da se to v ozadju. Daj, če bi lahko, da c9.io. ta URL here-- To je tretja oseba service-- platforma kot storitev, če will-- da se dogaja, da vas vabimo, da se prijavite za račun, in to se dogaja, da vsak od vas račun v tako imenovanem oblaku na infrastrukturi nekoga drugega, podjetje, imenovano Cloud9. Toda kaj je lepo o to je, da daš približevanje Dejanski razvoj v realnem svetu okolje, čeprav v oblak in v spletnem brskalniku in bomo to uporabili za dejansko poskus bit danes. In potem gredo naprej in samo smer svojo pot v procesu prijave če lahko. Tako se zgodi, da ta način uporabljajo v razredu Učim za vse naše študente, tako na univerzi in tam zdaj, in to je nadomestila tisto zgodovinsko je sicer downloadable software. Torej, kaj si dostop do je ena od teh virtualnih strojev, v bistvu, da sem opisal prej. Torej, ta družba Cloud9 verjetno najemnine iz tretje party-- dejansko v tem primeru, Google-- celoto kup virtualnih strojev da so nekako Usitniti v iluzija posameznih strežnikov da je vsak od nas ima popoln nadzor nad. To ni čisto natančno reči da oni virtualne stroje, čeprav, ker tisto, kar Cloud9 dejansko uporablja je nekoliko novejša tehnologija imenuje kontejnerizacija. In naj me zgrabi to sliko tu slikati to sliko. 

Posoda je, če se spomnite sliko iz prej, nekoliko lažje teže kot virtualni stroj. V bistvu, medtem ko zadnja Tokrat smo se pogovarjali o tam da operacijski sistem in Hipervizor in nato gost operacijski sistem, gost operacijski sistem, gost operacijski sistem, na vrhu fizične strojne opreme, Razlika s tem novejša tehnologija, kontejnerizacija, je, da so vsi nekako delijo isti operacijski sistem. Ampak še vedno ustvarijo iluzija vsakogar ima svojo lastno ekskluzivno administrativne pravice in datoteke na strežniku. Ampak tam je manj programska oprema med vami in strojne opreme. Rezultat, ki je v teorija, višjo učinkovitost, zato, ker ga uporabljate, ali zapravlja manj sredstev o tem tako imenovanem virtualizacijo plasti. Torej se to imenuje kontejnerizacija po naravi s pomočjo tehnologije imenovane DOCKER, ki je zelo veliko, ki prihajajo v svoje. In to je nekaj, kar inženirji v vašem podjetju Morda nekako nekako začeli govoriti o tem takoj, če tega še niste storili, čeprav je gotovo ni Razlog za skok na vseh bandwagons. 

Torej s tem je dejal, kaj si verjetno videl je zaslon, ki izgleda nekaj takega. V REDU. In samo pokliči me več, če se ne. In če SO- bom prišel, če ne. Pojdi naprej in kliknite, da je velik plus, da ustvarite delovni prostor, in boste videli zaslon, kot je ta. Lahko pokličete delovni prostor ime, kar hočeš, za zdaj. In samo dejansko zaradi enostavnosti, iti in-- dobro, nekateri od vas že imajo delovne prostore. rečejo karkoli want-- poslovanja, Harvard, četrtek, karkoli želite. Vi ne potrebujete opis. Lahko jo pustite zasebni, če vas že kup delovnih prostorov. Če si prisiljen, da bi bilo javno, da je v redu za današnje namene. Tudi tu je eden od upsells. Dobiš en zasebni delovni prostor, ki ga privzeto. Toda, če želite še več, boste morali plačati več. V nasprotnem primeru vas silijo da bi svoje delo javnosti. Ampak to je v redu, ker so tudi Ta cilj v odprtokodnih skupnostih spodbuditi ljudi k dejansko sodelovanje. 

In zadnja stvar, ki je pomembna, čeprav je, po tem, ko ste izbrali ime in po tem, ko se odločite, zasebno ali javno, kliknite HTML5, velik ikono oranžno drugi z leve, in nato Ustvari delovni prostor. In to se bo verjetno traja minuto ali tako, vendar boste potem imeti okolje, ko vas storiti, da izgleda spominja kaj moram na zaslonu tukaj. Ampak, še enkrat, to lahko traja minuto ali več, da bi prišli do tega zaslona Ko boste kliknili Ustvari delovni prostor. Vendar me je z zastavico kot če bi me rad da si na vse ali svetuje. V redu. Torej bom ozadju to za zdaj. Pokliči me več, če se vam zdi, da kakršne koli tehnične težave. Ampak, še enkrat, da bi trajalo malo za to, da se odpre. In gremo naprej in govori o tem, kaj to dejansko pomeni, da bi spletno stran, kaj HTML je, kako vse to zdaj povezuje tako začenjamo dejansko uporabo nekaterih tehnologije. Tako se izkaže, da sem lahko gredo na mojega malega Mac tukaj, odpreti preprost program, imenovan TextEdit, ali Windows sem lahko open nekaj, kar ti notepad.exe. In lahko sem samo preprosto naredite nekaj kot this-- "Hello, world". In potem sem to lahko shranite kot hello.txt Torej ni magija obstaja. To nima nič opraviti s spleta programiranje, nič opraviti s HTML. Samo ustvarjanje preprosto besedilno datoteko. Vendar se je izkazalo, da je na spletu Stran je dobesedno samo to. To je preprosta besedilna datoteka, ki vsebuje besedilo da bi lahko tip na tipkovnici, vendar je tipično, a ne vedno konča ne .txt, ampak .html ali .htm. In ti ne samo tip besed v datoteki. Si dejansko morali uporabiti stvari, imenovane oznake ali bolj na splošno, nekaj imenuje označevalni jezik. 

Torej bom zelo hitro tip in nato razloži naslednje. Bom najprej ta tip, ki pravi, hej, brskalnik, tukaj prihaja Spletna stran v jeziku HTML. In ti dve stvari skupaj rekli, hej, brskalnik, tole ni res HTML. Hej, brskalnik, tukaj prihaja glavo ali na vrhu moje strani. Hej, brskalnik, znotraj vrhu mojo stran, dal naslov, ki je, "zdravo, svet. " Hej, brskalnik, ko vodja mojega stran, tukaj prihaja telo na svoji strani. In, hej, brskalnik, telo moje strani je treba tudi povedati, "zdravo svet." Torej, kaj so najpomembnejše podrobnosti tukaj? To je tisto, kar je na splošno imenovano izjavo o doc tipa, in, odkrito rečeno, da je malo težko zapomniti to na prvi. Pravkar si nekako kopirajte prilepite. To je formalna pot rekel, hej, brskalnik, Jaz sem z uporabo HTML različica 5, ki prišel nekoliko pred kratkim. To je čarobno zaklinjanje, da nekateri ljudje s slabim občutkom za oblikovanje odločila, da bo dana na Zelo začetek datoteke. Kljub temu, da je malo Skrivnosten, da je vse je means-- hej, brskalnik, tukaj prihaja z verzijo 5 HTML. 

Preostali del tega je bil z nami že nekaj časa, zgodovinsko, ampak to je bilo razvija, in to je Verjetno je že malo lažje. Opazili nekaj značilnosti kar sem poudaril. Tam je te stvari s kotno brackets-- levi nosilec in pravi nosilec. In opazili simetrijo tukaj. In simetrije, mislim, kot sem imajo to start oznako tukaj ali odprto oznako če hočete, tukaj imam blizu tag ali končna oznaka, ki je razlikuje le v kolikor je to poševnica na začetku besede HTML. In si lahko zamislite To, kot sem bil mimogrede predlagala prej, hej, brskalnik, prihaja nekaj HTML. In obratno, hej, brskalnik, ki je da za začetek HTML-- in koncem. 

Medtem hej, brskalnik, tukaj prihaja glavo moji strani. Hej, brskalnik, ki ga je za glavo. Hej, brskalnik, tukaj je telo moje strani. Hej, brskalnik, ki ga je za telo. In notranjost, ki je nekaj poljubna besedila za zdaj. In znotraj glave, medtem, je nekaj samovoljno, ampak označeni, tako rekoč, besedilo, ki pravi, naslov moje strani je "zdravo, svet." Zdaj, za zdaj, lahko Predvidevam, da brskalniki imajo only-- ali, bolje rečeno, imajo spletne strani samo dva parts-- glavo in telo. In glava je na splošno samo kot menijski vrstici, stvari res samo na samem vrhu. In telo je črevesje v stran, vse, kar je v tem velik pravokotnik da zapolni zaslon. Tako da sem šel naprej in to. Sem šel naprej in Kliknite Shrani, File Save. In bom rešil je to hello.html, in sem le, da bo ga na mojem namizju. In sem šel naprej in kliknite Shrani. In notice-- moj Mac na Vsaj je kričati name. Ali ste prepričani, da želite to narediti? In sem hotel reči, da, uporabljam HTML. Vem, da bolje v tem primeru. In zdaj sem šel na namizje kjer sem imel to datoteko naenkrat. In bom jo dvokliknite. In boste opazili, da je z privzeto, Chrome odprla. To je zato, ker je to privzeti brskalnik. In to samo pravi: "Zdravo, svet." Vendar pa pravi, "zdravo, svet "na dveh mestih. Obvestilo zgornjem levem kotu. Precej težko zgrešiti, da je. To je velik in krepko. In kje drugje se ne zdi, pravi, "zdravo, svet"? 

OBČINSTVO: Zavihek. 

DAVID J. Malan: Ja, zavihek sama. Torej, ko sem dejal vodja Stran je vse do top-- in vsekakor je to naslov. To je samo v zavihku tukaj. In sem lahko pull to kartico načrtovana tako, da se ne zamenja. To je samo ena zanka zdaj, in seveda vidimo "zdravo, svet" tu in "zdravo, svet" tukaj. Torej precej preprosta. Ampak to je tudi dokaj preprost. In, pravzaprav povečavi. Lahko spremenite velikost pisave samo povečave za dostopnost. Ampak kaj je zdaj nekaj storiti malo bolj zanimivo. 

Bom go-- Ops, kaj pridem nazaj v svojo besedilno datoteko. Grem nazaj na moj besedilna datoteka, in bom to spremeniti in reči "Pozdravljeni, Disney World." Shranite. In šel nazaj na moj brskalnik in kliknite Reload. In sedaj, seveda, da pravi, da "Disney World." In bom umetno povečavo V samo zato, da je lažje videti. Torej, zdaj, žal, sem nekako želim to-- pravzaprav, da je funkcija Mac. Želim, da kliknete na Disney World in iti nekam kot disney.com, vendar to ne deluje. Torej, osnovno načelo spletu je hiperpovezave, povezave, ki gredo drugam. Torej, kako naj naredim to? No, jaz lahko samo rečem, "Zdravo, http://www.disney.com." Shrani to. Osveži. Ampak to tudi ni mogoče klikniti. In kaj je lepo tu, čeprav to še ne deluje, je, da se zdi, da je brskalnik ne dobesedno samo kaj mi je povedal, da storiti. Torej, če sem tip URL, kot je ta, to je samo dogaja, da mi pokaže URL. Moram uporabiti oznake ali oznake jezik dejansko povedati brskalnik storiti še več. Tako da sem šel naprej in izbrisati to za trenutek. In sem hotel reči, hej, brskalnik, zagon sidro tukaj, povezava tako rekoč. In hiper-referenca, destinacija te sidro, bi morala biti ta URL. In opazil moje ponudbe. Lahko uporabite enojne narekovaje, preveč, vendar pa morajo biti usklajeni, in jaz bi na splošno šele raba dvojni narekovaji naj bo enostavno. Obvestilo bom zapreti oznako. In potem tukaj bom reči, "Disney World." In zdaj moram nekaj symmetry-- odprt nosilec, / A, zaprt nosilec. 

Torej, kaj sem predstavil? Imeli smo nekaj oznak že. HTML, Head, naslov, telo, so vse oznake, tako rekoč, z odprtimi in zaprtimi kolegi. Ampak obvestilo, da je to neke za bistveno razlikujejo. To je tisto, kar pokličem HTML atribut. In atribut je samo ključni vrednosti par. To je običajna stvar v računalnika science-- ključ-vrednost par. To je neke vrste orodje za trgovino. Ključna in vrednost. Beseda in nato nekaj druga beseda ali besede. In v tem primeru, je ključ href, in vrednost je, da je celoten URL. In kakšna lastnost pa je, da vpliva na obnašanje oznake. In v tem primeru moramo vplivati obnašanje sidro tag, ker moramo zasidrati Ta povezava do nekje. In kako to, da je s pomočjo atributa. 

Tako da sem šel naprej in shranite datoteko zdaj. Vrnite se v mojem brskalniku in osvežite. In voila, imamo zdaj Začetki zakonit spletne strani. Super-enostavno, ampak če sem hover nad this-- obvestilo v spodnjem levem kotu, to je super, majhna. Ampak ne vidite www.disney.com. In če sem ga kliknite, res to me popelje proč disney.com. Zdaj, Nenavadno Tukaj je, da ni best-- najbolj tržno URL, vendar da je v redu, ker ta datoteka ne obstaja na svetovnem spletu. Obstaja kot lokalno datoteko v navidezno moje Uporabniki directory-- / jharvard-- za John Harvard-- / namizju. Vendar ima URL. Samo zgodi, da bo lokalna. Žal pa nihče od vas obišče to, ker če vnesete URL, da boš povedal brskalnik poglej za datoteke imenovane hello.html na trdem disku. In, seveda, če ste je po vzdolž ročno to ne dogaja, da obstajajo. 

Tako da je v redu. Še vedno potrebujemo način, na koncu, da bi dobili te datoteke v spletu, vendar pa draži narazen nekaj varnostne posledice tega, kar smo pravkar videl in ga kravato nazaj na prejšnjo Razprava iz tega jutra. Izkazalo se je, da če Brskalnik dobesedno le ne kaj mi je povedal, da ne, in zdi se, da se v primeru, da je sidro oznaka vplivalo na vrednost Ta lastnost se imenuje href vendar prikazuje ta Besedilo, bi to zdi bi pomenilo, da sem lahko dal URL na obeh mestih in nato osvežite in zdaj videli URL in pojdite na URL. Obvestilo, če sem hover nad spodaj levo, Jaz res dogaja še disney.com. 

Torej, če ste kdaj bili phished-- P-H-I-S-H-E-D-- z eno od teh lažnih e-poštnih sporočil od kot PayPal vaše banke, ste verjetno prišel povezave znotraj e-pošte, ki berete, da pove, da kliknite tukaj, da gredo potrjujejo geslo ali potrdite datum rojstva ali socialni ali kaj socialno vas inženiring razkriti informacije. No, jaz bi nekako sprejeti Prednost je v tem, ne bi jaz? Lahko bi rekel, kaj kot, www.paypal.com. In namesto disney.com, I lahko gre za, kot so, badguy.com. Osveži. In kako enostavno je tepec, zlasti netehnični bralnik ali površno branje Bralec, kot da kliknete povezava, kot je ta, ki bi, če sem kliknite it-- Pravzaprav ne želim iti badguy.com. Ne vem, kaj se je dejansko tam. Torej paypal.com, obvestilo, je kaj pa pravi, da se bo, ampak seveda, če pogledam dol super-low, to je malo zamegljen, vendar pa pravi, badguy.com. To je povedal, samo zdaj da bom na napačnem mestu. In ko sem že dejal, da banke res ne sme spodbujati ali vlak Uporabniki v klikom povezave, to je le ena manifestacija nje. In to je tako preprosto. Zdaj ste nasprotnik, če narediš nekaj takega in poskušajo pretentati uporabnika na obisku vaše spletne strani. Ampak za zdaj, bomo naprej stvari, lep in čist. Smo šli naprej in nazaj te spremembe. Osveži stran. In sem šel nazaj na disney.com. 

Poglejmo, če ne moremo draži To narazen malo več. Torej "zdravo, Disney World." Bom povedal tukaj. Mogoče bom narediti nekaj prostora. "Upamo, da boste uživali v vaše bivanje!" Shranite. Osveži. To ni rea-- to ni kar sem nameraval, kajne? Mislim, če sem zdravljenje moje besedilo datoteko kot urejevalnik besedil, kaj si upamo, se bo zgodilo tukaj? Ja, počutim se, kot da mora biti prelom vrstice tukaj, zato se počuti buggy na nek način. Ampak to je pravzaprav namerno, ker je tako kot prej, brskalnik je le, da bo pa kaj vam je povedal, da storiti. Nisem ga povedal, da prekinitev vrstice. Sem ne povedal, da se premaknete navzdol, celo čeprav, intuitivno, se počutim, kot sem. Tako se izkaže, da potrebujemo malo bolj označevalni, in bom to popraviti, kot sledi. Bom ta uvod najprej pozdravi s tem, kar se imenuje točka tag. In potem bom šel naprej in zaviti ta drugi stavek V drugem odstavku tag, čeprav oni so super-kratke odstavke. Zdaj bom rešil. Osveži. In zdaj imamo, da prostor, in mi nekako imajo semantiko dve ločeni točki. 

To je vse lepo in prav, vendar pa bi lepo, da dodate sliko na to stran, tako da sem šel iskati Mickey Mouse na Google Slike. In samo za zabavo, sem dogaja, da zgrabi to sliko. Bom, da gredo naprej zdaj in zgrabi URL te slike, čeprav je drugače načinov, da to storijo. Za zdaj sem le, da bo kopirajte URL. Bom šel nazaj v moje besedilo datotek, in bom tu povedati, img src = quote citata da URL, super-dolgo. In potem mora pojem Slika je nekoliko drugačna. Pa je res ni pojem začetek slike in konča sliko, kot začetek označiti končni oznako. Tako se mu zdi malo čudno, da me pomensko za to, da imajo blizu oznako slike. To ni napačna. To je popolnoma pravilna, in to je spodbujati, vendar pa je okrajšava zapis. Ne morem nekako istočasno Odpiranje in zapiranje enako oznako, in da bo brskalnik vesel. Torej, to je samo malo bolj jedrnat stvari da konceptualno res ne smisla za začetek in konec. Pravkar so tam, ali pa nisi. 

Torej bom rešil to in iti nazaj na moj "Hello, world" strani in polnitve. In to je malo izpod nadzora, ker je ta slika je dejansko malo veliko, ampak to je v redu. Lahko ga spremenite velikost v programu. Ali veste, kaj. Samo, da dokaže, da sem bo dejansko reči da je širina te stvari naj le 200 slikovnih pik, 200 pik. Naj gredo naprej in shranite in osvežite, in zdaj stran izgleda malo bolj razumno. Toda opazili vzorec. No, sem se nekako naučil vse HTML v nekem smislu, vsaj konceptualno, ker so vsi HTML je je ti tags-- odprte oznake, zaprta oznake, in lastnosti, ki jih spremenijo svoje vedenje. In, očitno, vsak Oznaka je lahko nič ali ena ali dva ali več atributov, pri čemer vsaka ki pa nekaj malo drugačen. Zdaj, kako veš, kaj obstaja? Ti samo poslušaj nekoga kot ti povem, kaj obstaja, ali si Google približno za vaje na HTML, in res je to preprosto. 

Resnično, ko sem bil undergrad pred leti in se naučili, HTML, eden od mojih poučevanje matematike pomočniki preživel malo časa mi mentorstvo Za kot pol ure, uro, in potem sem bil na poti. Bil sem na poti proti izdelavo najbolj ostudno spletne strani doslej, ki je, očitno, nisem res korak dlje. Ampak bistvo je, da, ko vas razumem te preproste ideas-- če Skrivnosten text-- vendar ti preprosto ideje se začne misel in zapiranje misel, vodenje Vse lepo uravnoteženo, videti kaj gor, spreminjanje vedenje te oznake, da je res vse je z njo. In v resnici, če bomo zdaj iti nekaj podobnega google.com-- dejansko, pojdimo prostor malo več reasonable-- stanford.edu. In sem šel na View, Razvijalec, View Source. To je grda, ampak notice-- in bom povečavo obvestila nekatere stvari, ki je že znano. Tam je to tukaj, ki je brskalnik. Prihaja HTML5. Tam je HTML. Očitno tam je atribut, da nisem uporabiti, da podaja Jezik strani in to lahko pomaga z avtomatskim prevajanje in takšne stvari. Tu je glava strani. Tukaj je naslov strani Stanford. Tam je oznaka nisem govorimo o yet-- Meta tag. To je nekako osnovne informacije. To pomaga pri SEO, ali iskanje motor optimizacijo, ali Google rezultati iskanja ali podobno. Ampak, če smo ostali videti, da je videti, tukaj je telo tag. In tam je šopke drugo Oznake smo ne govori še. Vendar Div ena za delitev strani. To je kot nevidna pravokotnika Če nekako želite duševno razdeliti svojo stran v različne enote na spletu. In nato veliko Divs I glej, kaj se imenuje razred, vendar se bomo vrnili k temu. 

To je interesting-- oblike. Obrazci so po vsem spletu. Vsako polje za iskanje, da si kdaj uporabili je oblika. In, da, kaj je dejansko videli. Form. Ukrep. Delovanje tega obrazca, za kar zgodovinskih razlogov je, da URL. Metoda je "post". Izkazalo se je, da lahko zahteve HTTP uporabo glagol "zaslužiti", kot smo videli prej, ali "post". In boste videli razliko to v trenutku. Poglejmo dejansko videli, kaj je to. Naj grem nazaj na stran Stanford. Kakšni obliki se pogovarjajo o, misliš? Kaj skoči ven na vas? 

OBČINSTVO: Iskanje polje. 

DAVID J. Malan: Ja. Torej se v zgornjem desnem kotu tukaj je to polje za iskanje. In to je, kako se izvajajo it-- oznaka, ki je dobesedno odprto nosilec obliki. In potem pa iskati nekaj. Poiščimo kolega od mine-- "Nick Parlante." Enter. In seveda, da je šlo za nekoliko drugačen URL. Naj grem nazaj. Poiščimo "tečaje". Prekleto. Šel na drug URL. Torej, Stanford je dodal nekaj čarobno da oni ne me pelje na URL da smo videli v Akcijski atribut tam. Vendar pa je ta oblika tu izvaja izključno s pomočjo te provizije tukaj, te oznake. V bistvu, tukaj je vhod za vrsto iskanja, ki jo želite. Tu je vhod za druga vrsta iskanja. Tukaj je vhod za sam niz. In tako je cilj, da ne zaviti naš um okoli vseh teh oznak ampak samo, da vidim. To je samo odpiranje in zapiranje oznake in videti stvari. Ja? Victoria? 

OBČINSTVO: [neslišno] DAVID J. Malan: To je dobro vprašanje. To je malo težje videti. Naj pridejo nazaj, da vprašanje v samo nekaj minutah ko gledamo na nekaj, kar se imenuje CSS ali kaskadnih slogov, in lahko poskušamo izpeljati toliko od strani. Torej, če zdaj pogledamo na google.com, da vidimo, kaj je njihova stran izgleda. Ti bi they're-- da je srčkan danes. V REDU. Končano. Vse je v redu, tako da View Source. Ti misliš, Google ima res lepo izvorna koda. Torej, očitno, kaj se dogaja? In v resnici, to ni niti HTML. To je nekaj, kar se imenuje JavaScript. In kaj je nadaljuj in tekoč. Sploh ne vem, kje se začne stran. Bom ukazom F, odprt nosilec HTML. V redu, to je to. Našel sem na začetni strani, in je toliko stvari tukaj. 

Kaj se pravzaprav dogaja? No, veš kaj, to lahko čiščenje. Če bi namesto da bi šel na to preglejte orodna vrstica, to posebno diagnostično orodje, in ne gredo Network, kjer smo vedno dogaja danes, ampak če grem v Elements, kaj je res lepo je, da ima brskalnik veliko veliko boljše oči kot jaz. In brskalnik lahko bere da nered spletne strani da HTML mail smo pravkar pogledal, in je lahko ga razčleniti ali brati in analizirati in reformacija v lepi človeka prijazen način. Torej, kaj vidim sedaj V tem zaslonu tukaj pod Elements, točno isto vsebino, ampak oni zamaknjeni vse, oni ga Colorized, vendar to je točno isto besedilo da sem prenesli iz strežnika. 

In kaj je zdaj lepo je, vidim v telesu, za instance-- obvestila stran je še vedno sestavljen od le glave in telesa, in sem lahko hierarhično potopite v tukaj. Opazimo, da Google se zdi, da imajo da divs-- tole in tole. Lahko razširite to. Obstaja cel kup drugih Divs. Tako da je malo zapletena. Toda počakaj. To se zdi toliko bolj berljivo, relativno, kot je ta. Zakaj je Google neprijetno Sam ga pravkar pošilja to velik nered kode nekaterih sortiranje samo izvajati nekaj da izgleda tako enostavno na prvi pogled? Kot, zakaj ne dodajo več prostorov? Zakaj niso zadeti nastopiti kot sem storil? Poglej, kako dobro sem na pisanje spletne strani. udaril sem Enter tako marljivo. I zamaknjeni tako da vse, kar je je tako lepa in berljiva. Zakaj Google ne izvajajo enako? 

OBČINSTVO: [neslišno] DAVID J. Malan: Dobro. Zelo pošteno. Nimajo nekaj oseba na Googlu ročno posodabljanje domače strani več. To ni 1999 več. Torej imajo programsko opremo. Oni imajo druga orodja, ustvarjajo dinamično oni HTML. Seveda, da sama oznaka je napisal človek, ampak realnost je, to je povsem pošteno reči, brskalnik gotovo ne zanima me, kako grdo je koda. Ampak tam je še bolj prepričljivi tehničnih razlogov da Google distribuira svoje HTML koda v tako površni, navidezno Velika način vse pakirati skupaj z zelo malo way-- zelo malo na poti oblikovanje, kot sem storil. 

OBČINSTVO: [neslišno] 

DAVID J. Malan: hitrejši? Zakaj? In kaj si rekel, Lydia? Hitreje? Zakaj hitreje? OBČINSTVO: [neslišno] DAVID J. Malan: Obstaja ni prostora za branje. Ja. Tako da mislim o tem, kaj je prostor. Torej, vsak znak na tipkovnici je določena količina prostora za zastopanje, bodisi fizično, kot je to zavzame toliko prostora, ali nekako pod napa, ki zahteva spomin. In kot aside-- in bomo govori več o tem tomorrow-- vsak znak na tipkovnici običajno zahteva 8 bitov ali en bajt. Torej vzorec 8 ničel ali tisti, ali samo 1 bajt, kot smo ljudje bi običajno rekli. Torej, to je majhna, vendar je še vedno ni nič. To je še vedno določena količina prostora. Torej, če inženir ali Google zadetkov preslednico samo enkrat, in domnevam Google-- je super-popular-- Predpostavimo, da milijarde ljudi obiščite njihovo domačo stran na dan, ali kakšno število ljudi obiščite stran domov milijarde krat na dan, koliko dodatnih bajtov je, da inženir za programsko opremo samo strošek Google s pritiskom njegov ali njen preslednico enkrat? 

OBČINSTVO: [neslišno] DAVID J. Malan: Ni čisto tako slabo. Samo en bajt krat milijarde. Torej a-- OBČINSTVO: 8 milijard gigabajtov. DAVID J. Malan: Ni 8 milijard. 8 milijard bajtov. Ampak 1 GB. 1 GB bi merska enota. Če on ali ona ne dva prostori, 2 gigabajta. Tri gigabajtov. Prav? To lestvice dragem. In tako v primerih, kot so Google, ki je odobrena, so ekstremni primeri, obstajajo druga vprašanja, ki se pojavljajo samo tako da zelo razumno odločitev ali ob zelo preprosta človeška dejanja, ker ima to povečan učinek. Tako da eden od razlogov To izgleda tako stisnjen je točno tako, kot Victoria said-- je bilo pravkar ustvarila z računalniki anyway. Tako da ni nič takega. Naj brskalnik pogruntal. Ampak tudi namerno nima veliko prostora, ker je prostor ni potreben. In prostor dejansko stane. 

Bodisi stane časa, ker je samo za potiskanje da je veliko več podatkov od Sedež google.com je pravkar je dobil, da sprejmejo nekatere znesek čas, tudi če je milisekund ali mikrosekund, vendar to sešteje več kot toliko uporabnikov, ali bolj verjetno, verjetno stane. Google verjetno poveže nekdo drug v svetu, ki je eden tistih pokukati točk, in če imajo neke vrste finančnega razmerja pri čemer stroške svoje podatke denarja, so morda tudi zmanjšanje koliko podatkov oni izpljunil na njihovo internetno povezavo. 

Tako je smešno, čeprav na koncu, ali morda pomirjujoče stvar, je, da čeprav ta izgleda strašno velika, ob koncu dneva, je še vedno natančni enaka načela kot To je zelo preprosta stran tukaj za HTML stran. Torej le povzeti, in tako, da imajo kanonično različico, če ne bi bilo po skupaj z izbiro tukaj, tukaj morda najbolj enostavna spletnih strani, tako nekaj igral z morda kasneje. 

No, pa uvesti Nekaj ​​drugih idej sedaj. Mi smo o tem, da uvedejo nekaj, kar se imenuje slog oznako. Lahko Stilizovati stran na bolj zanimive načine. Torej, medtem ko e-pošte HTML je vse o označevanju up podatki, nekako navedbo k Brskalnik kako strukturirati podatke, kam it, CSS, ali kaskadnih slogov, je drugi jezik, ki običajno dobi pomešane s HTML kot bomo see-- vendar smo lahko čisto da se v moment--, ki bo je zadnji kilometer in jo stylizes. To postane barve ravno prav, pisave velikosti ravno prav, pozicioniranje ravno prav. To je vse o estetiki ali oblikovanje, ne gre osnovni podatki sami po sebi. In najlažji način za prikaz To je mogoče z zgledom. Torej bom šel čez na moje preprosto besedilno datoteko. In vsak trenutek, bom nas je vodil skozi postopek za to sami. 

Bom šel nazaj v svojo datoteko tukaj in osvežite stran samo potrditi, kako izgleda. To je, če smo na zdaj. Počutim se, kot bi otroci uživajo ob nekaj barve na tej spletni strani. Tako da sem šel tu gor v glavi strani. In bom naredil slog, / stil. In potem znotraj tega, grem povedati telo mojega page-- in to oblikovanje je pri prvi pogled, morda malo čudno, ampak običajna. Bom rekel, da je v ozadju Barva te strani mora biti zelene barve. In to je žal nekako ni najboljši dizajn. Obvestilo, ki je prej v svetu HTML, Rekel sem, da atributi so ti pari ključnih vrednosti. Nekaj ​​enako ponudbo konec citata "nekaj". V svetu CSS, ki je ki ga je zasnoval nekaj različnih ljudi, so se odločili, da v svojih svetu, ključ-vrednost parov bi bila beseda debelega črevesa nekaj. Torej, to je ista ideja, čeprav. To povezujejo vrednost z nekaterimi ključ, ki nekako vpliva na obnašanje te strani. 

In ti si verjetno lahko uganiti. Kaj je to verjetno bo storiti, tudi če ste nikoli videl HTML ali CSS prej? OBČINSTVO: spremenite barvo ozadja. DAVID J. Malan: Ja, spremenite barvo ozadja. In natančneje Barva ozadja telesa. Toda v kolikor Telo za zdaj je spletna page-- to je edina stvar, pod naslovno vrstico really-- v to je verjetno bo vplivajo na isto stvar. Torej, da vidimo. Rešimo to. Pojdi tukaj in osvežite. To je zelo grd. In kaj se dogaja Tukaj je stranski učinek. Pravkar sem izbral to sliko naključno. Zakaj je zelena ni prežema za Mickey? OBČINSTVO: [neslišno] DAVID J. Malan: Točno tako. Izkazalo se je, da so slike, precej veliko vse slike, ki bi jih uporabljamo, so vsi rectangles-- kvadratkov. Tudi če je Mickey nekaj krivulje k sebi in ima ozadje, da je v ozadju mora biti nekaj. To mora biti bela. To mora biti črna ali kaj drugega. To je lahko pregledna. In v resnici, sem lahko Odpri Mickey Mouse tukaj v program, imenovan Photoshop ali kaj podobnega in spremeniti vse, da se bela ozadje pregledno, tako da bi zeleno sijalo skozi. Ampak to je nekaj, kar bi morali vprašati sebe ali grafični umetnik ali oblikovalec na moj Podjetje, na primer, storiti, še posebej, ker sem sposodil tole iz interneta. Ampak to je, zakaj se to dogaja. 

Torej, kaj bi mi želeli narediti? No, mi bi želeli, da smo rekli, Res upam, da boste uživali v vaše bivanje. In za poudarek, hočem da bi to močno, in tako bom rekel odprt močna in zapre močna in nato osvežite. In to je malo težko videti na projektorju morda pa res zdaj skoči ven na vas malo več. Tako da lahko dodate ležeče na tem Tako krepko obrnjena na ta način. Mi lahko spremenite barve. Dejstvo je, samo za brcne, da sem dogaja, da gredo naprej in to. Res ne všeč, kako moj odstavki so tako blizu skupaj, tako da sem lahko naredil kaj takega. Bom povedal, brskalnik, spremeniti vsak odstavek oznako, da so, kaj je say-- pravzaprav, veš kaj, kaj je uskladiti, da besedilo-align, center. In še enkrat, vem da je to le ker je nekdo naučil, da me ali Pogledal sem ga v spletni sklic. Torej mi rešiti to. In, ah, zdaj nimam središčem sliko tam. In dejansko, veš kaj, če Sem premakniti moje slike v odstavku tag-- tako da tretji odstavek, čeprav to ni besedilo. Rešimo to in osvežite. Zdaj stran se začenja iskati vrste of-- Mislim, da je še vedno precej grdo, ampak vsaj izgleda, da sem preživel dve minuti namesto eno minuto zaradi česar je. 

In tako, postopoma, lahko naredimo te estetske spremembe zdaj na strani? Sem res ne spremeni podatke v Stran razen doda beseda res. Sem dodal metapodatke, če hočete. Hej, brskalnik, da Beseda "zares" krepko. Vendar podatki niso trdni. To je metapodatki. Podatki so "Res." Torej imamo še nekaj isti pojmi kot prej. Zdaj, seveda to ni na spletu, tako bom naredil en zadnji korak tukaj. 

Bom šel na hello.html in samo označite in kopirate to. In zdaj bom gredo v Cloud9, ki Vam bom sprehod skozi vsak trenutek. In verjetnost, da boste kmalu, če še ni na zaslonu, kot je ta. In želim, da vam na hitro Ogled kaj Cloud9 dejansko je. Torej, še enkrat oblak 9 je ta storitev v oblaku da vi in ​​mi daje iluzijo imajo lastne virtualni stroj v oblaku, tehnično posoda v oblaku, da imamo polno administrativne privilegije. Torej, v teoriji, nihče drugje na svetu ima dostop do zaslona Jaz sem gledaš zdaj, razen morda ljudi ki vodijo v mesto, ker tehnično imajo fizični dostop in tako naprej. 

Torej, kaj smo videli v tem okolju? Bom pomanjšati, ker je malo majhen. In naj omenim več sem za trenutek. Na levi strani mojega in si zaslon, tam je brskalnik datoteko na levi strani. Torej podobno kot v duhu Mac OS in Windows. To so vse datoteke v mojem računu. In privzeto, če je vaš račun, kot je moja, boste videli, ali kmalu videli helloworld.html in readme.md. Tukaj na desni, to je kjer moji besedilne datoteke so šli. Če ste že uporabljali Microsoft Beseda ali Beležnica ali TextEdit, to je beseda moja urejanja datotek je šel. In potem je najbolj Skrivnosten značilnost tega okolja da ne bomo res potrebovali, da je uporaba tukaj imenuje Terminal Window. Če ste uporabljali DOS minulih dni, to je Linux ali Linux ekvivalent DOS. To je besedilo, ki temelji interface-- Ni klikov z miško, ne vlečenje. Vse, kar lahko storite, je tip ukazi, vendar ukazi lahko ustvarite datoteke, premikanje datotek, odprtih imenikov, blizu imenikov, storiti vse več stvari. Ampak za zdaj, bomo samo preživijo svoj čas tukaj. 

In tako naredimo to. Če ste v tem okolje, ki ga naj bi bilo, če ste ustvarili delovno okolje že, pojdi naprej in pojdi gor na File, New za trenutek. In to vam bo dala nov Kartica tukaj v sredini. In sem samo-- in kaj je gredo naprej in to. Gremo naprej in zdaj se datoteke, Shrani in iti naprej in ga imenujemo hello.html, ne sme zamenjati z helloworld.html, ki je prišel z novim brezplačen račun, ki je le vzorčna datoteka. Videli boste, da se nenadoma pojavi, najverjetneje na levi strani, in kartica bo še vedno odprta. In naj vas spodbujamo, zdaj poustvariti ta datoteka ali nekatere njegove variante. In če si ne more povsem videti na zaslon, to je identična diapozitive da imate verjetno v drugem zavihku. 

Torej na kratko, bo svojo prvo spletno stran, ga shranite, nato pa vsak trenutek, Pokazal vam bom, kako lahko dejansko videti to. Toda spremeniti vsaj eno stvar. Spremenite helloworld za nekakšen lastni izbiri, tako da ste prepričani, da je vaš datoteko in ne tistega, ki sem ustvaril. V redu. In ko ste ready-- ne rush--, ko ste pripravljeni, gredo naprej in shranite Ko ste naredili te spremembe. In če kliknete Run gumb up top, to mora odpreti nov zavihek, ki bo povedal, si kaj URL lahko obiščete datoteko na, vendar lahko traja nekaj trenutkov, da quote citata "start Apache", ki je ime spletnega strežnika. Torej, bodite previdni, da narediti točno kaj je v datoteki na koncu. Torej sedaj, bom povečavo. Če začnem tipkati open-nosilec HTML, obvestilo to me je spodbudilo, da končam misel. In če sem zaključil misel je, samodejno mi daje zaključno oznako. Toda pričakovanje je potem bom udaril Enter, nato pa notri in ne glavo notri in Nato sem naredil telo v notranjosti. In to je malo čudno na prvi, ker počne delo za vas, vendar spoznali, da na koncu vam prihrani tipkanja. In v resnici, zelo pogosta značilnost programiranje okoljih v teh dneh tako za razvoj spletnih podobnega to in dejansko programiranje, ki bomo govorili o prihodnosti, je ta auto-popolna funkcije, stvari, ki samo omogočajo, da se programer ali oblikovalec vnesti manj pritiskov na izpolnitev isto stvar. Včasih je dobro, čeprav. Včasih je prav nadležno. In še enkrat, ko sem prepisal drsnik ali kakšno njegovo varianto, lahko s klikom na gumb Zaženi do vrha. In nato na dnu okno, boste obveščeni kaj URL lahko obiščejo vašo spletno stran. Mine, na primer, je v business-daharvard.c9users.io in tako naprej. V redu, torej, naj me-- kakšna vprašanja? Vsa druga vprašanja o ravno ta delovni preden smo dodali funkcije? In mi predlagala, samo da se ljudje comfortable-- ker je ena stvar, da samo copy-paste slepo, kar sem naredil. Ampak samo zato, da ljudje rokoborbi z vsaj eno izmed opravil, Bom vklopite glasbo. Bom predlaga seznam stvari, ki jih lahko potencialno dodate. In lahko zagotovo uporabljati Google. In zakaj ne bi samo Predlagamo, da se lotite reševanja vsaj en poseben problem. Torej, glede na oznake, Naj ponovno to tukaj. 

Pravzaprav, mi dal je v obliki tekstovnih. Recimo, da je med oznakami bomo morda uporabiti tukaj je nekaj oznake tukaj. Videli smo, da odstavek oznako. Zdaj se dogaja, da auto-popolna. Odstavek tag, sidro tag. Recimo, da želite narediti kaj večjega, tako da boste morda like-- razpon tag lahko pomaga. No, boste morda potrebovali pomoč za to v samo nekaj trenutkov. Videli smo div. Videli boste, da je miza. Obstaja nekaj, kar ti tr, td. Th, td. Pridejo nazaj, da je v trenutku. Kaj drugega bi bilo prav? Tam je močna. Tu je poudarek, oziroma em. There's-- kaj Morda bi radi tu? No, bomo vzeli poglej to skupaj. Oblika, ki smo ga videli. Tam je oblika. Tam je vhod in nekaj drugih. Vse je v redu, tako da je to. Če želite odgovoriti na Victoria je Vprašanje, kaj me najprej Samo se prepričajte, da so vsi lahko dobili svoje zdravo delovanje. Potem naj vam predstavim Nekaj ​​druge ideje. Potem bomo kaj ljudje rešiti nekaj težav na svoje. Potem bomo dejansko vrnili s tem pojmom obliki in bomo dejansko ponovno izvajati skupaj front-end vmesnik, tako rekoč, da Google sam. Bomo uporabili Google kot zadnji konec in pustite jim delati trdo delo, preiskavo, vendar bomo ponovno sprednji konec Google in iskalnega obrazca da imajo na svoji domači strani. In tako bomo prišli nazaj Te oznake v samo trenutek. 

Torej, to je bilo tisto, kar sem Predlagana pred nekaj trenutki. Lahko dodate stilizacijo k Stran znotraj tega sloga oznake, in lahko Stilizovati ozadje barvo, poravnavo besedila, ali je center ali levo ali desno. Ampak zelo hitro bi jih ugotovili, ali spletni oblikovalec bi ugotovili, da je to postane malo okoren, ker si to, kar je imenovano mešanje vsebine s predstavitvijo le-teh. Ste mešanje svoje podatke in njegove estetike. In v resnici, če menite, da kaj se bo zgodilo čez time-- To je zelo majhen Spletna stran, seveda. Ampak, če dodam vsebino na tej strani in dodam slog na to stran, stran zelo hitro dobi daljša in daljša. In domnevam, da hočem še eno spletno stran, ki ima nekaj od teh lastnosti. Recimo moj drugi spletno stran za moje site-- tudi, hočem vse, kar center, in tudi jaz želim vse z zelenim ozadjem. Jaz sem precej dogaja, da imajo za kopiraj in prilepi nekaj teh vrstic v to drugo datoteko, ki se počuti v redu. To bo rešil problem. 

Kaj pa, če hočem tretjo stran ali 30. strani ali 40. strani? Zdaj bom za kopiranje in lepljenje veliko podvojene kode v več datotek. In tako predpostavimo, da Sem se odločil, ali bom povedal, hej, ne bomo z uporabo zeleno ozadje več. Bomo začeli uporabljati oranžno. Kaj spremeniti? Torej, boste morali spremeniti ta slog od zelene do oranžne, kako marsikje? Kot 30 ali 40 mest. To je dolgočasno. To je nagnjena k napakam. Obstaja več razlogov kjer si ne bi želeli, da povzroči da vrsta bolečine za sebe. In tako ne bi bilo lepo, če bi lahko vzamemo tisto, kar sem dal med ta dva rumena oznake, ta slog oznake, je faktor ven, in dal vse moje stilizacijo v eno centralno datoteko da so vsi 30 ali 40 mojih drugih datotek sposoditi od ali nekako reference, ni v nasprotju z mreženjem diagrami smo počeli prej? 

Torej, če grem sem, da sem bo dejansko predlagati da se zamenja slog tag z nečim imenuje povezava tag, ki je strašno, strašno imenom, ker jih ne uporabljate povezava tag ustvariti kaj smo ljudje poznamo kot povezavo na spletno stran. Za to, boste uporabili katero tag? Kako si ustvariti povezavo na spletno stran? OBČINSTVO: The a. DAVID J. Malan: A, ali sidro tag, da je šel na Disney prej. Povezava tag tukaj govori this-- povezava do datoteke imenovane styles.css, razmerje, v katerem se bo, da je moja slogovno. Zato je to eden izmed S v CSS-- kaskadnih slogov. Style sheet-- dva S-ih v CSS. CSS. To samo pomeni, hej, brskalnik, pojdite zdi styles.css na lokalnem strežniku in jo uporabite kot slogom, kar pomeni znotraj te datoteke se bo vse stilizacije, da smo pravkar storili. In kaj ta datoteka lahko izgleda, kot je to. In bom samo to, da je to hitro Na primer, ker ne potrebujemo da se preveč v plevel tukaj. Ampak, če sem kopirati to, kar sem predlagala je, da programer ustvariti novo datoteko prilepite v teh lines-- whoops-- prilepite v teh vrsticah, ga shranite kot styles.css, nato pa v drugo datoteko, izbrišite vse to in jo nadomestiti namesto s tem link tag. Tako, da če sem povezal href = "styles.css" razmerje mora biti "slogovne" blizu tag. Shrani. Pojdi nazaj na moj helloworld. Osveži. 

Dobesedno se ni nič zgodilo. To je dobro, saj to pomeni, da je pravzaprav vse deluje. Da bi dokazali toliko, domnevam naredim slovnične napake, in to imenujemo "styles.css" s kapitalom S, ki je napačna, in nato osvežite. Sedaj lahko vidite, da preprosto ne deluje. Zdaj, zakaj? No, pa uporabite tehniko od prej. Naj gredo naprej in v moj brskalnik, v Chrome, da sem bo odprla, da je posebna Kartica omrežja kot prej, in mi osvežite stran. Kaj nisi presenečen, da je sedaj? Ali pa ste presenečeni, da ga vidim. Kakorkoli, kaj vidite zdaj? OBČINSTVO: [neslišno] DAVID J. Malan: To ni bilo mogoče najti. Zakaj je ni bilo mogoče najti? No, Styles.css-- kapitala S- ne obstaja. Sem misnamed. Enostavno slovnične napake. Ampak sem že razumljivo zdaj 404, ker je strežnik je rekel, hej, to ni bilo mogoče najti. Dobesedno, ne vem če je ta datoteka. Tako se je zaradi tega brskalnika vam pokaže, kaj je v njeni moči, surovo vsebino strani ki je bil 200, HTML, vendar stilizacijo ne more se nato doda. In to je tisto, kar je mišljeno z kaskadno. Lahko nekako dodate potem, in to nekako izboljšuje estetiko spletne strani. In lahko celo prednost pred tistimi, stili s še drugimi slogovne datoteke če želiš. To ni bilo mogoče najti, čeprav je v tem primeru, ker seveda, sem misnamed. Zato bi morali popraviti, da je prvi. 

Torej, gremo naprej in predlagam naslednje. Gremo naprej in to. Začenši z morda Vaše helloworld datoteka Naj samo povabi nekaj za funkcijo predloge. Torej, Victoria, želiš da so nekateri besedilo večji, kajne? Vse je v redu, tako da bomo lahko ne predstavljajo besedila večji. In bomo vsak odtrgal off samo en problem rešiti. Znamka besedilo večji. Ne bom moti to pišem, ko smo imajo bullet tehnologije prav tukaj. Torej nekaj težav. Torej bomo poskušali da besedilo večji. V redu. Kaj drugega bi nekdo predlaga? Kaj še lahko želimo storiti v spletno stran? Kaj je prišel gor z kratek seznam stvari in nato prenese na skupino, da to ugotovite. 

OBČINSTVO: [neslišno] 

DAVID J. Malan: OK, položaj besedila na različnih straneh stran? V redu. Nekaj ​​drugega. 

OBČINSTVO: [neslišno] DAVID J. Malan: Res je. Torej gif je samo drugačna oblika datoteke. Pravkar smo se uporablja, kaj, A png ali jpg verjetno? Uporabili smo jpg. Če vas zanima, čezmerni odgovoriti na vaše vprašanje se je jpg splošno uporablja za fotografije, saj podpira milijoni barv ali 24-bitne barve. GIF se običajno uporablja za, na primer, internet meme te days-- animacije, kot animirani gif. Ampak to se zgodi uporabiti manjši barvo palete, le 256 možnih barv, vendar podpira preglednost in animacija. In potem je tukaj še png, ki podpira preglednosti in več barv vendar ne animacijo. Torej, to je kompromis. Torej dodal gif, čeprav, bi funkcionalno enakovredno dodal png ali jpg. Ja. vir slike enaka. Torej nekaj drugega. Oglejmo prišli do nečesa, smo poslali Victoria storiti tukaj. 

OBČINSTVO: Dodaj gumbe za obliko. DAVID J. Malan: OK. Torej dodali gumbe za obliko. In bomo storili, da je eden skupaj. Tako, da bo popolna segue takoj po tem izzivom. Še kaj? Kaj bi radi storili? Spletna počuti zelo underwhelming če je to vse, kar lahko storimo. OBČINSTVO: spremenite barvo besedila. DAVID J. Malan: Spreminjanje kaj? OBČINSTVO: Barva besedila. DAVID J. Malan: Spreminjanje barve besedila. V redu. Torej, kaj je to. Samo še enkrat, tako da si ne samo s pamet, počne točno to, kar delam, Bom vklopite glasbo za morda pet minut tukaj. Ste dobrodošli, da uporabite Google. Ste dobrodošli, da me prosi, in Bom šepetajo namig v uho. Ste dobrodošli, da si več na ramena drugih. Toda rešiti le enega od teh težav. Vendar bomo storili zadnjega, je predstavlja eno, če bi lahko skupaj. Torej, pet minut za reševanje koli od teh težav s pomočjo Google, intuicijo, ali druga sredstva, ki so na voljo za vas. 

[GLASBA] V redu. Brez skrbi, če želite da krpanje, ampak bom pokvariti nekaj teh odgovorov. Torej, prvi predlog iz Victoria je bila, da bi besedilo večji. Torej je nekaj načinov, da to storijo. Sem trenutno obnovljena moj zaslon na ta format, čeprav sem Povečano umetno samo, da vidim stvari. In kaj je to. Naj gredo naprej in zgrabi nekateri generični latinsko besedilo samo zato, da bomo imeli kaj za delati. Torej daj mi samo en trenutek. Bom tri odstavke. V REDU. To bo bolje primer. Tako za radovedne, v moj hello.html, sem prilepili tri nesmiseln Latin odstavki samo zato, da imamo nekaj besedila za delo. In cilj Victoria je bil, da narediti nekaj besedila večjega. Tako bi lahko, tako kot prej, gre tukaj. In mi to storiti na pravi način. Bom imel povezavo oznaka, ki kaže na datoteko imenovano "styles.css," je razmerje od katerih je spet "slogovne". In potem bom rešiti da in odprla to "styles.css." 

Torej, kot prej, imam sposobnosti v tem CSS datoteki dejansko preglasijo privzeto estetika spletne strani, in privzete estetika, Seveda, so precej dolgočasno. To je neke normalne velikosti pisave, črna besedilo, belo ozadje in tako naprej. Tako, da sem želite vse to besedilo večji. Jaz lahko naredim nekaj stvari. Po mojem styles.css datoteke, I Lahko bi rekli, veš kaj, velja naslednje telo moje strani. Pojdi naprej in da velikost pisave 24 točk, ki je številka da bi uporabljajo v programu Microsoft Word. Naj grem nazaj na moj splet stran tukaj in osvežite, in lahko vidite, da to je že veliko večja. In bomo lahko dobili malo nor, tako kot smo lahko na desktop-- bi bilo 96 točk. Osveži. In to je že malo upočasnila na tej točki. 

Ampak jaz bi se lahko malo bolj natančno. Namesto uporabe tega Slogovna na telo moji strani, kaj bi mi jo uporabljajo namesto, kakšna druga oznaka, ki bi lahko še deluje na isti način? 

OBČINSTVO: The p tag? DAVID J. Malan: P tag. Tako da glava ne bi bilo pravilna, saj je verjeti, ne moreš dejansko nadzor nad estetiko. Tam je bodisi besedilo tam ali ne. Toda p tag-- lahko potopite v malo globlje, tako rekoč, na točki oznake. In čeprav obstajajo tri, To je popolnoma v redu, saj je v CSS, ko sem rekel "p", to pomeni uporabi naslednji za vsako oznako, ki ustreza tem selektor, selektor samo pri čemer ime oznake. Torej, kjerkoli že ste videli "P", velja velikost pisave, in kaj je uspelo več smiselno again-- 24. točka. In veš kaj, Samo za dober ukrep, Naredimo barvo rdeča samo za trenutek. In zdaj, če sem se osvežite, zdaj smo glej tri grde odstavke. 

Zdaj pa predpostavimo, da sem neke of-- Želim prvi odstavek da skoči ven na uporabnika. Ne želim, da samo povečanje velikost pisave vsega. In zato sem pravzaprav želijo ugotoviti, ali razlikovati med temi odstavki. Torej, kaj je znebiti rdeče, saj to je samo nekako lepljiv, in gremo naprej in da velikost pisave 12 točk, ki jih privzeto tako da smo nazaj na nekaj malo bolj smiselno. In zdaj sem samo želim, da povečanje velikost pisave prvega odstavka. To lahko storite v nekaj načinov, vendar eden od načinov, da je morda najbolj poučni Na moment je, da naredite naslednje. Naj gredo naprej in rekli, to odstavek ima edinstven ID "prvi". Lahko bi poklical to, kar želim. Lahko bi rekli "foo" ali druga beseda, ampak bom, da ga nekateri semantično smiselno ime kot "prvi". To je edinstven identifikator, ID, za moj prvi odstavek. 

Kaj lahko sedaj storiti v mojem slogovni je malo bolj natančno. Namesto da bi rekel, uporablja naslednje p tag, Lahko rečem following-- velja naslednje, ali izberite, HTML element da ima edinstven ID "prvi". Kaj želite uporabiti za to? Velikost pisave 24. točko. Torej imam dva selektorje zdaj. Eden naredi vse točke od 12-točko. Ampak ta, še posebej, ker gre second-- gre zadnji v file-- To ima kaskadni učinek. Pravkar sem na vse moje odstavek oznake 12-point, vendar je to zdaj kaskade in preglasi, da je za vse elemente Na strani vsaka oznaka na strani katere edinstven ID je citat citata "prvi". In hashtag v tem kontekstu samo pomeni "posebni identifikator." Ne ga v datoteki HTML. Jaz, tukaj, samo reči quote citata "prvi". 

Torej mi osvežite. In zdaj vidim, ah, OK. Mislim, da to ni tako lepa, ampak to je nekako podobnega uvodu zavarovalnici za knjiga ali nekaj takega, kjer je prvi odstavek večji. Lahko bi bilo še bolj natančna le prve črke, ampak vsaj Sem izvaja večji nadzor. Zdaj maybe-- morda želim, da to storijo občasno iz kakršnega koli razloga, in zato ne želim, da je to velja za samo eno oznako HTML. Namesto tega pa say-- dovolimo Prav tako naredite naslednje. Class = "uvoz". Ker se ID se uporablja za edinstveno prepoznati eno stvar, eno oznako, v vašo spletno stran, je razred mišljeno, da se uporabiti na poljubnem številu elementov ali oznak na vaši spletni strani. Torej je za enkratno uporabo. ID-ja ni mogoče ponovno uporabiti. Razred je za enkratno uporabo. 

In veš kaj, za kar filozofsko reasons-- Nisem končal moj thought-- bom povedal da se prvi odstavek in Drugi odstavek so pomembni. Torej bom uporabila razred imenovano "Pomembno", da če shranim datoteko in osvežite, nima funkcionalni učinek še. Ampak sem dodal nekaj metapodatki v datoteko, nekako nekaj ločenega iz osnovnih podatkov spisa, tako da je zdaj v moji slogom, če I namesto da bi rekel ".important" - saj veste, vse, kar je pomembno, da sem dogaja, da pisave-barvo, red-- oziroma ne pisave, barvo, samo barvo. Tam je nedoslednosti V CSS žal. In osvežite. Zdaj opazili prvi dve točki so rdeče ne pa tudi tretje, ker sem samo uporabila razred "pomembne" v prvih dveh te stvari. 

Torej v ID, imate možnost zelo natančno opredeliti. Z razredi, imate ponovne uporabe. Toda v obeh primerih, opazili nekako načela dobre zasnove kjer sem vključeno ven vse estetika na mojo styles.css datoteko. Torej ni messiness tukaj. Ni omembe rdeča ali krepko obrnjena ali velikost pisave v tej datoteki. Namesto imam pomensko, smiselno značilna moje podatke, kot je, Tukaj je nekaj pomembnih podatkov. Tukaj je nekaj bolj pomembnih podatkov. Poleg tega, tukaj je "Prvi" mojih pomembnih podatkov. Torej HTML je vse okoli neke z označevanjem, dobesedno, besede in odstavki in konstrukti v vašem Stran s temi malo namigov, če vas bo, da lahko nekako vzvoda uporabo druge tehnike, kot so CSS na ta način. 

Torej, v odgovor na vprašanje, Victoria, lahko naredimo besedilo večji na ta način. Obstaja veliko drugih načinov, vendar pisave tag-- odprti oklepaj "font" - je pravzaprav stara več let. In to je problem Tudi s samo opira na spletni resources-- v glavnem so zastareli. In res, da je bila zastarela, ker je svet spoznal, Kaj "font-size = 7" pomeni? To pa ne. In tako že vrsto let in da To day-- ena od strani Tukaj ugotavlja, da je dejansko neverjetno boleče včasih še vedno za razvoj območij za web, ker Microsoft Google in Mozilla in drugi pogosto ne strinjajo o tem, kako razlagati specifikacijo kot HTML. 

Obstaja pravilnik za HTML, na splošno pravi, kaj vsaka oznaka pomeni. Ampak včasih je to prepuščena diskretnost izvajanja je, Microsoft diskretnost in Google. In tako da bom zelo pogosto glej na spletni strani nekaj videti drugačen na osebnem računalniku kot ga ima na Mac, in da je res, ker, Na koncu dneva, niso ga preizkusiti tudi na obeh platformah. Ampak to je tudi zato, ker razumno, pametni ljudje se ne strinjajo in podjetja bodo ne strinjajo, in tako eden od izzivov programiranja za splet ali za projektiranje stvari za splet piše vašo spletno stran na način, ki deluje na vsaki spletni brskalnik. Toda tudi to je nesmiselno, kajne? Obstaja veliko različic toliko brskalniki tam, da na neki točki, imate tudi, da bi sodbo klic in boste morali odločiti, kot podjetje, predvsem za e-poslovanje slog strani, kjer boste dali poskuša uporabiti najnovejše in najboljše tehnologije, da bi res dobro uporabnika izkušnja. Toda nekateri odstotek svojim uporabnikom morda še vedno uporabljate Internet Explorer 6 ali 7 ali 8, zlasti glede na Država, ki ste prihajajo iz. 

In tako zelo pogosto posvetoval je nekaj kot "statistika spletnega brskalnika." In če gremo to-- poglejmo Wikipedia in videli, kako je to graf up-to-datum če obstaja. Torej, tukaj si lahko ogledate kjer brskalniki dejansko so, glede na december 2015 v skladu z ameriško vlado. Chrome je na 42% tržni delež, sledijo ga IE večinoma v nastavitvah podjetij ali računalniku, seveda, sledi Firefox, nato Safari, nato pa Opera ni da zemljevid sem iz neznanega razloga, in potem drugi. Mogoče je pod drugi. Toda bolj problematično kot to is-- da vidimo, če je tudi Wikipedia različice brskalnikov version-- 

Pojdimo v statistiko brskalnika. TJ. Tudi to ni dovolj. Statistika brskalnika. Moja verzija. To se ne bo zgodilo. Poglejmo različice. Brskalnik tržni delež. Poglejmo, če to pride gor. V REDU. Zdaj to postaja malo bolj koristno. Torej, tukaj, opazili, da smo vsi različne različice brskalnikov. In, moj bog, če look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Mislim, brskalniki bolj posodobljena, in včasih nekatere od teh sprememb so pomembne pri Pogoji funkcionalnosti. In tako na neki točki se je produktne vodje ali inženirji morali narediti decision-- vas veš kaj, samo 1% na svetu še vedno uporablja IE 7. K vragu z njimi. Mi samo ne bo podpira ta brskalnik. In kaj to pomeni, da ne podpira? To lahko pomeni, da tipke ne deluje na vaši spletni strani ali bi to pomenilo, Oblikovanje je popolnoma off. Ali boste morda morali narediti da isto sodbo klic v mobilnih teh dneh, kjer sva Ne gre za podporo IOS 5 več. Torej ljudje samo še nadgraditi. Ali pa ne bomo za podporo Cupcake Android OS za naprave Android, ker kot world-- kot tech svet želi napredovati, je nekako želi povlecite svet z njim, tako da ne morajo ostati nazaj združljiv tako da lahko ponudijo nove in dobre lastnosti. To je dejansko eden od razlogov, zakaj toliko podjetja uvajajo samodejne posodobitve in nekako silijo najnovejše različice programske opreme na nas. In celo podjetja kot bo Apple razvrstite po prisili, skoraj ali zahtevajo vi v smislu tržnih sil kupiti nov telefon, ker so pravkar ne bo posodobil svoj stari telefon več. Torej ste izpustili na najnovejše in najboljše lastnosti, ker je drago za njih kot Družba za vzdrževanje starejši, verjetno slabše različice programske opreme. Vendar je neto učinek je, da smo tudi to trpi tudi. 

Tako da je lahko pogled na samo Nekaj ​​končnih stvari tukaj. Oglejmo knock off zelo hitro nekaj te druge krogle, če radoveden. Torej, če ste skušali, na primer, položaj besedilo na različnih straneh Stran, bom naredil en hiter način, vendar pa je drugače načinov za to. Naj gredo naprej in eliminate-- poenostaviti to takole. Naj gre nazaj na moj preproste, enostavne odstavki. Naj grem nazaj na moj styles.css. In sem le, da bo za uporabo simple-- ki ste morda videli na Googlu ali prikličite iz earlier-- text-align right. In osveži stran. Zdaj je vse videti biti desno poravnano, kot lahko vidite v zgornjem tukaj. 

Lahko bi bilo videti malo bolj Rezervirajte podobno, in lahko rečemo, "opravičujejo" in osvežite. Zdaj je lepo in kvadrat na obeh strani, ki je nekako lepo. Drugi cilj, da smo imeli tukaj je sprememba barve besedila. Tako smo videli, da s svojim rdečim besedilom. In zdaj dodali gumbe za obliko. Torej, zakaj ne bi poskušali narediti točno to? Ampak najprej mi gre na stran, ki večina od nas uporablja vsak day-- Googlu. In kaj je si oglejte Kako Google dejansko deluje. Ampak bom to naredil. Najprej naj to in-- ja, Naj gredo na Google prvi. Bom moral iti v Google Nastavitve ker želim, da onemogočite nekaj, kar se imenuje Instant rezultate. 

Torej, ste morda opazili v Google ti days-- me nazaj in to vključite. Torej, če začnem iskati za "mačke", kot je ta, opazili, da ne samo, da Dobim samodejno dokončanje up top, kar naenkrat, sama stran Zdi se, da se zelo hitro spreminjajo, kot tudi, in da je Google s pomočjo jezika imenuje JavaScript poskušam biti v pomoč. Ampak žal, to nekako od zamoči našo razpravo o tem, kaj se dejansko dogaja pod pokrovom tukaj. Torej, jaz sem samo nekako hitro izklopite takojšnje rezultate. In bom kliknite Shrani. In zdaj bom odpreti da diagnostični orodna vrstica, ki sem da odprtino pod jeziček Network. Torej, kaj je to. Naj me-- whoops-- pomaknite tole malo. In mi iskanje "mačke". 

In zdaj notice-- dejansko, To je dobra priložnost za razpravo za trenutek. Obvestilo trenutek, ko sem type-- ga ustavili. Prenehaj. V REDU. Obvestilo trenutek, ko sem tipa črko C, pazi na dnu zaslona. A- T- S. Kaj dno tega zaslona, ​​moj jeziček Omrežje, Predlagamo se dogaja vsak ko sem tipa pismo? Žal žaba zelo moteča danes ali deteljica ali karkoli je. Kaj se dogaja vsakič, ko sem tipkal? In mi jasno, buffer in ga ponovno vnesite. SO- Ups. Vsakič, ko sem tipa pismo, C- A- T-- tako nova vrstica očitno še vedno navedena. Kaj vsaka od teh vrstic predstavljata podlagi tega, kar smo videli in obravnavali doslej? OBČINSTVO: Iskanje? DAVID J. Malan: Iskanje, ali bolj na splošno, zahteva HTTP iz mojega brskalnika v strežniku. No, zakaj je moj brskalnik izdelavo HTTP zahteva, vsakič, ko sem vnesete pismo? 

OBČINSTVO: [neslišno] DAVID J. Malan: Ja, to je kar me ti auto-popolna rezultate. Kot, kjer se ti Rezultati iskanja prišel? Torej, vsakič, ko sem vtipkajte pismo, Google pošlje več in vedno bolj beseda sem tipkanje. Zakaj? Zato, ker želijo, da mi boljši in boljši, boljši predlog, seznam predlogov, za kaj beseda Poskušam pravzaprav popolna. Torej, to se pravi dobesedno vsak znak vnesete v Google se pošlje končno v razsutem stanju, včasih pa tudi eden v času, da bi za izvedbo ti auto-popolna funkcije kadar podatki so seveda na spletu. 

Zdaj pa si oglejte, kaj se dejansko se zgodi, ko kliknem Iskanje Google. In potem bomo to vzvod sami. Torej, če sem se pomaknite navzdol zdaj zelo Prva zahteva, ki se je pravkar zgodilo. Obvestilo naslednje. To je bil poslan na dokaj dolgo URL-- https://www.google.com/search? in potem cel kup stvari. Poglejmo to dejansko zdaj v zavihku brskalnika samega. Oglejmo znebiti orodni vrstici tukaj. Tukaj je stran rezultatov iskanja. In obvestilo tukaj je URL. Zdaj si verjetno lahko uganiti kaj se dogaja v delu. Torej, najprej opredelitev. To očitno je destinacija če se predloži obrazec. Torej, ko sem tipkal v besedi "mačke" in pritisnite tipko Enter, očitno Google pošlje moj vnos besedila na ta URL da sem izpostavil tam, poševnica iskanje. Izkazalo se je, v URL-ju, vse, kar se zgodi, ko se zastavlja vprašanje, kot smo ostali pravijo, ključna vrednost par ki ste ga vpisali v obrazec ali nekako prenašajo iz brskalnika na strežnik. 

Torej kadarkoli vnesete vhod v obliki na spletu in je bilo poslano, kot smo jih razpravljali, preko stopijo, eden od teh virtualni ovojnice, vsebina tega envelope-- ja, da dobili polnjene fizično v kuverto v razredu Danes, vendar tehnološko to je dejansko dal v URL. Torej, v resnici, mi presejemo skozi to. Kje vidite vnosa od uporabnika? Kje vidite nekaj da sem jaz tipkal tukaj? Ja, tako da "mačke". Prav? Torej mi destilirati to v nekaj enostavnejši. Bom izbrisati vse o ta URL, da ne razumem, in sem le, da bo zapustil je kot this-- / iskati? q = mačke. Bomo videli, kjer je Q prihaja v trenutku, ampak, da se počuti, kot minimum Količina informacij, ki sem jih podal. In zdaj bom zadeti nastopiti. In opazil, da še vedno deluje. Še vedno dobil nazaj cel kup mačk. Torej Google je ljubitelj kot je to v teh dneh. To je 2016, ne 1999. Torej je drugih stvari, da je moj brskalnik pošilja na strežnik. Toda to je minimalno vse, kar je potrebno. 

Torej, kaj se dogaja? No, najprej naj grem naprej in iti nazaj na Cloud9 in mi daj in zaprem zavihke prej. In to bom naredil na mojem lastnik le za trenutek. Bom, da gredo naprej in ustvariti novo datoteko. In bom, da ga shranite kot google.html. In bom zelo quickly-- Bom ukradel, pravzaprav, nekaj tega besedila samo za prihranek časa. Bom prilepite tukaj. Ne bom ukvarjati s any stilizacijo tokrat. Bomo rekli "Moj Google." In bom, da se znebite vsega v telesu. In bom naredil naslednje. Naj povečavo. Oblika action-- in kot sem na kratko omenil earlier-- whoops-- kot sem na kratko je bilo že omenjeno, zaradi delovanja oblika je, če pošljete podatke. Torej google.com/search. In način želim uporabljati je lahko eden od dveh stvari. To je lahko bodisi "dobili", kot smo ostali razpravljamo, ali je lahko "post". Za zdaj, je temeljna Razlika je, če uporabljate "zaslužiti" vse informacije, ki jih Uporabnik zagotavlja dobi poslal v URL. 

To je super za stvari, kot so iskanje motorji in nekaj drugih aplikacij, toda v katerih bi okoliščinah si ne želim, da izpolnite obrazec in so podatki na koncu gor URL, kot je v naslovni vrstici brskalnika? Kakšne oblike storiti you-- OBČINSTVO: [neslišno] DAVID J. Malan: Ja, kot kaj? OBČINSTVO: gesla. DAVID J. Malan: Ja, tako da se prijavite v Facebook ali neki spletni strani. To je uporabnik vhod iz oblika, polje z besedilom, ampak verjetno ga ne želijo prikazuje v URL brskalnika. Zakaj? Mislim, morda obstaja nekaj varnostne posledice na omrežju, vendar more-- všeč, bolj preprosto, kaj pa če tvoj sostanovalec, vaše pomembne druge, vaši otroci, vaš zakonec izgleda skozi zgodovino brskalnika? Obstaja geslo prav tam v zgodovini brskalnika. Da se ne počutim kot dobrega oblikovanja. Ali pa še bolj tehnično, Predvidevam, da poskušate naložiti fotografijo Flickr ali Facebook ali wherever-- da je vhod uporabnik, čeprav to je malo več interesting-- kako naj strpati slike v naslovni vrstici? Si nekako nekako ne more. Si nekako lahko. Ampak, res, da sem težko pritisniti predstavljati tem. Tako da moram še eno metodo za nalaganje fotografij na spletni strani, in da je druga metoda se imenuje "post". Ampak za zdaj, bomo samo govorili o "Dobili", ki je enostavnejši od obeh. Samo postavlja vse Uporabnik vhod v URL. 

Torej, tukaj je oblika sem ustvarjanju. Hočem vhod. In veste kaj? Bom vzeti ugibati tukaj. Bom spomniti na moj input "q" za "poizvedbo." In mislim, da je to ena izmed izvirne modele, morda, od leta 1999. Nato vrsto tem vhodu je le, da bo treba "text". In potem bom še en vhod da ne potrebuje ime, saj bomo kmalu glej vrsta, ki je "predloži". In to se dogaja, da daj mi poseben gumb. In to je to. 

Zato naj gredo naprej in shranite datoteko. Bom šel nazaj na moj brskalnik in pojdite na google.html. Enter. In to je vrsta redka reči najmanj. Ampak naj gredo naprej in iskanje za "mačke". In opazil sem trenutno Na tem URL Cloud9. Toda v trenutku, ko kliknem to, kje Upam, da boste na koncu? 

OBČINSTVO: Google. 

DAVID J. Malan: Google. Torej, kaj je kliknite Pošlji. In res sem se ponovno izvaja Google. Prav? To je enostavnejša. To je vžigalnik. Mislim, moja številka je vsekakor bolje, kot njihova, od nered smo videli prej. In veste kaj? Bom to začiniti malo. Nisem omenil že prej. Obstajajo oznake, kot so H1, za razdelek 1, najpomembnejša postavka v stran. "Moj Google," to bom poklical. Naj osvežite. To je videti malo že bolje. In, pravzaprav, veste kaj? Sem already-- sem lagal. Rekel sem, da ne bom slog to, ampak bom ta stil kot prej. In moje telo se bo, recimo, text-align center. To je videti bolj kot je Google že. 

Rabim prelom vrstice, čeprav, za to gumb Pošlji. In se je izkazalo, si lahko uporabijo odstavke, ali si lahko bolj dobesedno samo reči, daj mi linijo prelom here-- BR oznako. In če sem osvežite to, zdaj gre tam. To je malo grd, tako da sem bi lahko storili več prelomov vrstic, vendar naj ne bi dobili preveč pohlepni tukaj. Zdaj pa poglejmo, če deluje za "pse." Zdi se, da delo za "psi", kot tudi. Torej, kaj je privlačna takeaway tukaj? One-- ni bil velik preskok na uvesti nekaj več oznak, kot obliko oznako v vhodnem oznako. Ampak bolj bistveno je, da vsi delamo je vplivno naše razumevanje HTTP in dejstva ki tvori končno spremeniti kaj je v URL brskalnika, in tako, zato smo lahko mehansko prispevati k strežniku tako, da obrazec HTML in poznavanje da strežnik razume HTTP, tako kot naše telo razume, kot so, tresenje moje roke, da istega protokola, in tako smo dobili nazaj odgovor da smo na koncu pričakujejo. 

Torej, poskusimo narediti eno Zadnja stvar, ki je zdaj z mobilno, in bom make-- bom dodati to kodo na diapozitive. Torej, če želite Lemiti, vas lahko zagotovo traja od tam. Ampak bom šel naprej in eno stvar. Bom, da gredo naprej in odpreti svoj indeks page-- moja zdravo stran kot prej, kar ima veliko tega faux-Latinska besedila, ali brez pomena latinsko besedilo, in has-- izgleda, da je ta na tej velikosti pisave. Ampak naj gredo naprej in to. Bom šel v Cloud9. In ti ne bi bilo treba storiti ta korak. Bom to naredil sam. Bom kliknite Skupna raba. In to je funkcija samo za Cloud9, pri čemer Lahko bi moj okolje javnosti. 

In samo zaradi demonstracija, naj to storijo. Jaz bom, da bo moja vloga za javnost. Opazite, da me je opozorila, am prepričan sem, da želite to narediti, saj to se dogaja, da vse v svetu, pa naj oni zdaj tukaj ali gledanje video pozneje na Internet lahko videli, kaj vidim. Ampak to je v redu. Bom rekel "Done". In naj vas spodbujamo, če sem To correctly-- mi ga preizkusiti prvi. Daj, če ne mind-- v brskalniku v računalniku, pojdite na ta URL, in upajmo, da boste videli moj latinski tekst. In da bo jasno, da je teče, ne na moj laptop. To je v oblaku. To je na Cloud9, dobesedno, ampak Naredil sem svoj delovni prostor javnosti tako, da vsakdo na internetu morem dostopati latinski domačo stran. 

Pojdi na isti URL za telefon, če bi lahko. Če bo to stalo, čeprav, lahko samo gledajo čez ramo. OBČINSTVO: [neslišno] DAVID J. Malan: Žal mi je? OBČINSTVO: [neslišno] DAVID J. Malan: Samo latinske besede. To je vse. Ampak to je tisto, kar bi morali videti. 

OBČINSTVO: Ja. DAVID J. Malan: Ja. Ja. V REDU. Tako lahko sprejme do vašega telefon za trenutek? Torej, upam, če dostopate da bi bilo videti skoraj neberljiv. To je still-- Mislim, da je neberljive zaradi latinščine. Ampak to je tudi neberljiv za kakšen drug razlog? Kot, kaj displeases vi o tem? OBČINSTVO: To je majhen. DAVID J. Malan: To je super, super majhna. Torej, kako bi lahko to popravimo? To je super, super majhna na telefonu Victoria in, če ste potegnil da se sami, verjetno mali na telefonu, kot tudi, če vas imeti omogočen nastavitev dostopnosti. Kaj je to? Si lahko samo stisnite in zoom, ki je izvedljiv, potem pa vidiš samo nekaj besed naenkrat. Torej, počakaj malo. Vem, kako to popraviti. Prav? Lahko bi uporabili CSS, in sem lahko spremenite velikosti od 12-točke na 24-točko pisave. Vendar je stranski učinek, da Seveda se bo sedaj na namizni ali prenosni računalnik, Zdaj je besedilo dvakrat tako velika. In zato, da bi nekako bilo lepo razlikovati med napravami, in se izkaže, da načini za tem. Obstaja več različne načine, v resnici, pri čemer s pomočjo CSS in ljubitelj funkcije da ne bomo šli v zelo podrobno, lahko bistveno poizvedbo brskalnik in pravijo, Če je zaslon manjši od tega veliko pik, s to velikost pisave. Če je zaslon večji od tega veliko pik, s to drugo velikost pisave. 

Lahko še vedno tudi ljubitelj. Če ste kdaj obiskal spletna stran, da na namizju ima veliko meni, morda off na stran, in nato celotno vsebino je na strani, ki menu-- to je neke vrste skupne paradigme. Meni na levi, vsebini na desni ali obratno. Ne res deluje na mobilni telefon, ko bo Zaslon je le to veliko slikovnih pik. Torej bolj pogosti na mobilne naprave, vaš jedilnik bo nenadoma dobil propadel, in moraš s klikom na gumb, da ga vidim, ali bo spletna stran dal meni nad njo in čaka vsebine pod njim. In lahko izvajajo te stvari na različne načine, tudi. Lahko se posvetujte s svojim programerji, hej, ekipa, kadarkoli vidiš zahtevo HTTP iz Androida Naprava, Microsoft naprava, Google napravo, napravo za Apple, uporabite ta velikost pisave in uporabo te postavitev menija, ali pa uporabite privzeta večji postavitev. 

Sedaj, s pomočjo katere temeljna tehnika danes lahko inženirji uporabili vedeti, ali je to iPhone, Android telefon, prenosni računalnik, namizni obisku strežnika podjetja? Kjer se dobijo te informacije? 

OBČINSTVO: Glava? 

DAVID J. Malan: Ja, glava HTTP. Torej, vsak zahteva HTTP, ki prihajajo iz njihove stranke na svojih strežnikih vključujejo v notranjosti, da virtualna ovojnica, cel kup HTTP glave, od katerih je brskalnik in operacijski sistem tudi, če vas skrbi, da da je raven podrobnosti. Zdaj, to je skrivnosten videza niz, vendar obstaja programska oprema, ki bo le poenostaviti to, in si lahko samo vprašam pri načrtovanju code-- PHP, Java, C ++, whatever-- kaj telefon this-- katero napravo je ta uporabnik uporablja? In potem lahko rečemo, pokaži jim to različica spletne strani, če je telefon. Pokaži jim to različico Spletna stran, če je laptop ali pult. Ampak sploh ne potrebujemo Server-side kompleksnost. To lahko storite tudi najenostavnejši stvari. 

Bom, da to storijo. Bom šel naprej v moj Cloud9 okolje, in bom dodati oznako da ste videli v Googlu prej. To se imenuje metaoznaka. In nikoli ne pozabite, ta, da Bom ga prepisati tukaj. Meta name = "prikaznega polja" in nato content = "width = širina naprave, intital Lestvica = 1 "in to je to. 

Tako da lahko sodelujejo tudi kot čarobni urok. To pa še ni vse, da je jasno, ampak to je kaj storiti z začetnega prikaza, in Vidno je le telo spletna stran, pravokotna regija, ki definira večina strani. In to je samo povedal, brskalnik, veš kaj? Mora biti širina te strani dejansko enaka širini naprave. Z drugimi besedami, ne domneva, da ste vrste neomejen prostor. Predvidevam, da ste samo toliko Prostor kot naprava sama velika. In zdaj, če sem osvežite to v mojem brskalniku, ne vidim sprememb. Ampak, če sem to correctly-- in Naj prečka moje fingers-- če vas vse osvežite svoje telefone, kajne glej prepričljiv spremembe? Ja, je that-- 

OBČINSTVO: [neslišno] DAVID J. Malan: Da. V REDU. Torej verjetno bolj berljiva zdaj? Še vedno majhen, bi bilo pošteno, ne pa tudi tako majhen, da so neobvladljivi. In jaz bi vsekakor preglasijo to nadalje s CSS ali na strani strežnika, ampak vse tisto, kar si vidim se več in več funkcij se doda Strani odjemalca environments-- JavaScript, saj bomo razpravljali Jutri, CSS in HTML-- tako da so vse te poizvedbe je mogoče storiti na stranko tako, da se moti Strežnik veliko manj in ne da so sledili, za primer, stalno Juriš novega operacijskega sistemu različice, nove različice brskalnika. Lahko samo pustiti brskalnik vprašajte napravo, kako velik si, in nato nekako logična odločitve, ki temeljijo na tem. Ampak bomo videli več priložnosti za logične odločitve jutri v okviru iz programskega jezika. 

Torej, vsa vprašanja, potem, na spletni razvoj? Danes ni spletno programiranje, na se, ker je bilo vse, kar smo storili je zelo estetsko, če hočete. Ni odločanje v kodo, ki smo jih napisal, in da je, zakaj HTML je označevalni jezik, ni programski jezik. Jutri bomo lahko hiter pogled, navsezadnje, v JavaScript, ki je dejansko programiranje jezik, ki nam omogoča narediti malo več. 

Kakšno vprašanje? No, naj predlaga dve možnosti neobvezne za domačo nalogo. Ena is-- te Cloud9 računi ne bo potekla. Ste dobrodošli za uporabo jim brkljati. To je prost raven storitev. Zavedam se, da, če pri ustvarjanju svoj delovni prostor, ki jih je bilo javnosti, ki ne pomeni, da kdorkoli na Internet lahko vidite, kaj tipkate. Torej, morda samo menijo, ni neprijetno sami Če ste dajanje svojo prvo spletno Stran tam javno nesreči, vendar nihče ne bo vedeti, da je videti nekako. 

In dvo mi kretnjo do tega URL-ja, kot tudi, še posebej, če ste prišli danes malo manj udoben kot drugi, prepričani, kaj vse to pomeni. Zavedaj se, da je veliko več od tega videa, ki je hkrati dober način zaspati in tudi za smeh, medtem ko tem je treba tudi veliko druţbeno zanimivo in varovanje pomembnih razprav tam John Oliver, čeprav komik. 

Ampak, če ni več vprašanj, ki nas pripelje na recepciji. Torej, zakaj ne prižgem glasbo. Treba bi bilo pijače in prigrizki zunaj. Vesel sem, da se družijo tako Dokler bodo ljudje radi, odgovoriti na vprašanja, bolj ena na ena. Ampak drugače, ste dobrodošli za vzlet na kateri koli točki, in bomo spet videli jutri zjutraj, za malo več. V redu, hvala.