DAVID J. Humala: Hea küll. Me oleme tagasi. Nii Eesmärk on see viimasel istungil on tutvustada veel mõned mõisted vaid ka anda kõigile võimaluse et selline venitada oma sõrme ja tegelikult midagi natuke käed. Eesmärgiks ei ole pöörduda meid kõiki veebi arendajad mis tahes viisil, kuid tõesti ainult Teile maitsta fundamentaalsetest konstruktsioone, mida läheb veebi programmeerimine ja täna veebis arengut, nii et staatiline pool things-- no loogika ei ole programmeerimine keel, vaid staatiline sisu. Ja see annab meile võimaluse tegelikult näha, mida veebiserver, vaata, mida HTML fail on näha, millised see on HTTP tegelikult teenivad üles. Aga enne kui me sukelduda, tagasiulatuva küsimusi cloud computing või julgeoleku või midagi vahel? Ei? Olgu, hästi, olgem Selleks igaks juhuks protsessi registreerumist midagi võtab paar minutit. Me lase tal seda teha taustal. Lase käia, kui sa saaksid, Selle URL siin-- c9.io. See on kolmanda osapoole service-- platvorm teenusena, kui te will-- et läheb kutsun teid logida konto ja see läheb annavad igaüks teist konto niinimetatud pilv kellegi teise infrastruktuuri, firma nimega Cloud9. Aga mis on tore See on see, et nad teile ühtlustamise kohta tegeliku reaalse arengu keskkonda, kuigi on pilv ja veebibrauser, ja me kasutame seda tegelikult eksperimenteerida natuke täna. Ja siis minna ja lihtsalt navigeerida teed kirjautumisprosessia kui sa saaksid. Nii et me juhtuda, et kasutada seda klassis Ma õpetan kõigile meie õpilastele, nii ülikoolilinnakus ja välja nüüd, ja see asendatakse, mida ajalooliselt oli muidu allalaaditav tarkvara. Nii et mida sa juurdepääsu on üks neist virtuaalseid masinaid, sisuliselt seda, et ma varem kirjeldatud. Nii et see firma Cloud9 ilmselt üür kolmandast party-- tõepoolest Sel juhul Google'i abil kogu hunnik virtuaalset masinad et nad kuidagi tükelda üles illusiooni üksikute serverite et igaühel meist on täielik kontroll selle üle. See ei ole päris õige öelda et nad virtuaalarvutid küll, sest mida Cloud9 tegelikult kasutab on mõnevõrra uuem tehnoloogia nimetatakse konteinerveod. Ja las ma haarata seda pilti siin maalida seda pilti. 

Konteiner on, kui te mäletate pilt varasematest, natuke kergem kaalu kui virtuaalne masin. Tegelikult, samas viimase kord, kui me rääkisime seal on operatsioonisüsteemi süsteem ja hüperviisorit ja siis külaline operatsioonisüsteemi külaline operatsioonisüsteemi külaline operatsioonisüsteemi süsteemi peal oma füüsilise riistvara, vahe selles uuem tehnoloogia, konteinerveod, on see, et nad kõik kuidagi jagada sama operatsioonisüsteemi. Aga nad siiski luua illusiooni igaühele võttes enda eksklusiivne administratiivõigused ja failid serveris. Aga seal on vähem tarkvara Teie ja riistvara. Mistõttu on Teoreetiliselt võimsamat, sest te kasutate või raisata vähem ressursse kohta, et nn virtualiseerimine kiht. Nii et see on nn konteinerveod olemuselt teel tehnoloogiat nimega sadamatööline, mis on väga tulevad oma. Ja see on midagi, mis insenerid oma firma võib selline omamoodi hakata rääkima umbes peagi, kui nad ei ole juba, kuigi seal on kindlasti mingi põhjust hüpata tahes bandwagons. 

Nii et öelda, mida sa tõenäoliselt näha nüüd on ekraan, mis tundub natuke niimoodi. OKEI. Ja lihtsalt helista mulle enam, kui mitte. Ja kui so-- ma tulen üle, kui mitte. Lase käia ja klõpsake, et suur pluss luua tööruumi, ja näete ekraanil niimoodi. Teil on võimalik helistada tööruumi nimi iganes tahad nüüd. Ja just tegelikult lihtsuse, minna Ja-- hästi, mõned teist juba tööruumid. Kõne see iganes sa want-- äri Harvard, Neljapäev, mida iganes sa soovid. Sa ei pea kirjeldus. Võite jätta see era-, kui sa juba on hunnik tööruumid. Kui oled sunnitud tegema seda avalikult, siis hästi tänapäeva eesmärkidel. Ka siin on üks upsells. Sa saad ühe era tööruumi poolt vaikimisi. Aga kui sa tahad rohkem, sa pead maksma rohkem. Muidu nad sunnivad sind teha oma tööd avalik. Aga see on hea, sest nad ka suunata see on avatud lähtekoodiga kogukonnad julgustada inimesi tegelikult teevad. 

Ja viimane asi, mis on oluline, aga on ju valida nime ja pärast valid era- või avalik- klõpsa HTML5, suur oranž ikoon vasakult teine, ja Seejärel klõpsa Loo tööruumi. Ja see on ilmselt võta minut või nii, aga sa pead siis on keskkonda, kui sa seda, mis tundub meenutab Mis mul ekraanil nüüd siin. Kuid jällegi, see võib võtta minut või rohkem, et saada sellele ekraanile kui olete klõpsanud Loo tööruumi. Aga lippu mind, kui soovite mind võtta pilk midagi või nõu. Hästi. Nii et ma lähen taustal seda nüüd. Helista mulle üle, kui teile tundub, et mingeid tehnilisi probleeme. Kuid jällegi, see võib võtta natuke ette, et avada. Ja olgem minna ja rääkida, mida see tegelikult tähendab, et veebilehe Mis HTML on ja kuidas see kõik Nüüd ühendab nii oleme hakanud tegelikult kasutada mõned tehnoloogia. Nii selgub, et suudan minna mu väike Mac siin avada lihtne programm nimega TextEdit või Windows suutsin Avatud midagi, mida nimetatakse Notepad.exe. Ja ma võiks lihtsalt lihtsalt midagi teha nagu see-- "Hello, world." Ja siis ma võiks päästa seda hello.txt Seega ei ole magic seal. See on midagi pistmist web programmeerimine, midagi pistmist HTML. Lihtsalt luua lihtne tekstifaili. Selgub aga, et veebi leht on sõna otseses mõttes just seda. See on lihtne tekstifail, mis sisaldab teksti et sa võiksid kirjutada oma klaviatuuri, kuid see tavaliselt, kuid mitte alati lõpeb ei .txt kuid .html või .htm. Ja sa ei ole lihtsalt kirjuta sõnad failis. Sa tegelikult on kasutada asju nimetatakse silte või üldisemalt midagi nimetatakse märgistuskeel. 

Nii et ma lähen väga kiiresti sisestada ja siis selgitama. Ma lähen esimest kirjuta see, mis ütleb, hei, brauser, siin on veebilehe kirjutatud HTML. Ja need kaks asja kokku öelda, hei, brauser, järgmine on tõepoolest HTML. Hei, brauser, siin tuleb pea või peale minu lehele. Hei, brauser, sees tippu minu leheküljel panna pealkiri, mis on, "tere, maailma. " Hei, brauser, pärast pea minu lehele, siin on keha minu lehele. Ja hei, brauser, keha minu lehel peaks ka öelda, "tere." Millised on olulisemad detailid siin? See on see, mis on üldiselt nimetatakse dok-tüüpi deklaratsiooni, Ja ausalt öeldes, see on natuke raske meelde jätta see esimene. Sa lihtsalt selline kopeeri see. See on formaalselt öelda, hei, brauser, Ma kasutan HTML versioon 5, mis tuli välja viimasel ajal veidi. See on maagiline loits, et mõned inimestel halb tunne disain otsustanud panna juures väga faili algusesse. Kuigi see on natuke kauge, see on kõik see means-- hei, brauser, siin Kaasas versioon 5 HTML. 

Ülejäänud see on olnud meiega juba mõnda aega, ajalooliselt kuid see on olnud arenev, ja see on Tõenäoliselt on saada vähe lihtsam. Pange tähele, mõned omadused mida ma olen rõhutanud. Seal on need asjad nurgelised brackets-- vasakul sulg ja õige sulg. Ja märgata sümmeetriat siin. Ja sümmeetria, ma mõtlen, nagu ma on see start tag siit või avatud tag kui soovite, siia alla mul on sulgemissilti või lõpumärgendina see erinevad vaid niivõrd, kuivõrd see on tema kaldkriips alguses sõna HTML. Ja sa ei mõtle See, kui ma olin juhuslikult ettepaneku enne, hei, brauser, siin on mõned HTML. Ja vastupidi, hei, brauser, mis on see, et HTML-- alguse ja lõpu. 

Vahepeal hei, brauser, siin tegemist pea minu lehele. Hei, brauser, mis on selle juht. Hei, brauser, siin on keha minu lehele. Hei, brauser, mis on see, et keha. Ja sees, et on mõned suvalist teksti nüüd. Ja sees pähe, vahepeal on mingi teatud kuid sildistatud, niiöelda teksti, mis ütleb, pealkiri minu leheküljel peab olema "Hello, world." Nüüd, nüüd, saate eeldada, et brauserid on ainult-- või pigem veebilehti on ainult kaks osa- pea ja keha. Ja pea on üldiselt lihtsalt nagu menüüribal kraami tõesti ainult tipus. Ja keha on julgust lehe kõik see suur ristkülik mis täidab ekraani. Nii et ma lähen edasi minna ja seda teha. Ma lähen edasi minna ja klõpsad Salvesta, Fail Salvesta. Ja ma lähen säästa seda hello.html, ja ma lihtsalt lähen pane see minu töölaual. Ja ma lähen käia ja klõpsake Salvesta. Ja notice-- minu Mac on Vähemalt on minu peale karjud. Olete kindel, et soovid seda teha? Ja ma lähen, siis jah, kasutage HTML. Ma tean, et parem sel juhul. Ja nüüd ma lähen oma töölaual kus ma olen seda pilti äkki. Ja ma lähen topeltklõpsake seda. Ja märkad, et kuna Vaikimisi Chrome'i avanud. Seda sellepärast, et see on vaikebrauserina. Ja see lihtsalt ütleb: "Tere, maailm." Aga ta ütleb: "Tere, maailma "kahes kohas. Pange tähele, ülal vasakul. Päris raske mitte märgata seda. See on suur ja julge. Ja kus mujal see tundub öelda, "tere, maailma"? 

Publik: vaheleht. 

DAVID J. Humala: Jah, ka sakk. Nii et kui ma ütlesin juht leht on kõik üles top-- ja tõepoolest see on pealkiri. See on lihtsalt sakki siin. Ja ma ei tõmba seda tab välja, et mitte segi ajada. See on ainult üks sakk nüüd, ja tõepoolest näeme "Hello, world" siin ja "Hello, world" siin. Nii päris lihtne. Aga see on ka üsna lihtne. Ja tegelikult, ma suumitud. Ma ei muuda fondi suurust lihtsalt võimenduvad ligipääsetavuse. Kuid olgem nüüd midagi natuke põnevamaks. 

Ma lähen go-- Oih, las mul saada tagasi oma tekstifaili. Ma lähen tagasi oma tekstifaili, ja ma lähen Selle muutmiseks ja öelda "Tere, Disney World." Säästa. Ja lähen tagasi oma brauser ja klõpsake Värskenda. Ja nüüd muidugi see ütleb "Disney World." Ja ma lähen kunstlikult suurendada just nii see on lihtsam näha. Nüüd kahjuks ma sellist soovi mina-- tegelikult, see on Mac funktsioon. Ma tahan klõpsata Disney World ja minna kuhugi, nagu disney.com, kuid see ei tööta. Nii põhidoktriini veebis on hüperlinke, lingid, et minna mujale. Niisiis, kuidas ma seda teen? Noh, ma võiks öelda, "Tere, http://www.disney.com." Salvesta see. Värskenda. Kuid ka see ei ole klikitav. Ja mis on tore siin, kuigi see ei ole funktsionaalne veel, on see, et tundub, et brauseri sõna otseses mõttes ainult ei mida ma öelda seda teha. Nii et kui ma lihtsalt tippige URL niimoodi, see on lihtsalt läheb näidata mulle URL. Mul on vaja kasutada silte ja märgistuseta keele tegelikult öelda Brauseri teha veelgi rohkem. Nii et ma lähen edasi minna ja kustuta see hetk. Ja ma lähen öelda, hei, brauser, alustada ankur siin link nii rääkida. Ja hüper-viide sihtpunkti Selle ankur, peaks see URL. Ja märka minu hinnapakkumisi. Ma võiks kasutada ülakoma Ka aga sa pead olema järjekindel, ja ma üldiselt lihtsalt kasutada jutumärkide hoida lihtsa. Pange tähele, et ma lähen sulgeda tag. Ja siis siin ma lähen öelda, "Disney World." Ja nüüd ma vajan symmetry-- avatud klambri / a, suletud sulg. 

Mida ma olen kasutusele? Meil on olnud mõned juba sildid. HTML, Head, pealkiri, keha, kõik sildid, nii et rääkida, avatud ja suletud kolleegidega. Aga teate, see on omamoodi fundamentaalselt erinevad. See on see, mida me nimetame HTML atribuut. Ja atribuut on lihtsalt võtmeväärtuste paari. See on tavaline asi arvuti science-- võtmeväärtusega paari. See on omamoodi näitaja kaubandusest. Võtme ja väärtuse. Sõna ja siis mõned muu sõna või sõnad. Ja sel juhul, võti on href, ja väärtus on see, et täielik URL. Ja mis atribuut ei ole see mõjutab käitumist silt. Ja sel juhul peame mõjutada käitumist ankrusildi, sest meil on vaja kinnistada see link kusagil. Ja kuidas sa seda ei teel atribuut. 

Nii et ma lähen edasi minna ja salvestage fail nüüd. Mine tagasi oma brauser ja uuesti laadida. Ja voila, on meil nüüd algus õigustatud veebilehel. Super-lihtne, kuid kui ma kursorit see-- teate allosas vasakus nurgas, see on super-väike. Aga sa vaata www.disney.com. Ja kui ma vajutan seda tõepoolest see visplid mind ära disney.com. Nüüd, imelik on selles, et see ei ole best-- kõige likviidsete URL, kuid see on hea, sest see fail ei olemas on World Wide Web. See on olemas kohaliku failina näiliselt minu Kasutajad directory-- / jharvard-- John Harvard-- / töölaual. Aga see on URL. See lihtsalt juhtub olema kohalik. Kahjuks ei ole ükski saad külastada see, sest kui sa kirjutad selle URL siis oleksin öelnud oma brauseri otsida faili nimega hello.html kõvakettal. Ja muidugi, kui te pole jälginud mööda käsitsi ta ei kavatse olemasolu kohta. 

Nii et trahvi. Meil on vaja veel viis lõpuks saada see fail veebis, kuid olgem tease peale paari turvalisusega seotud tagajärjed, mida me lihtsalt nägi ja siduda see tagasi varem arutelu selle hommikul. Selgub, et kui brauseri sõna otseses mõttes lihtsalt ei mida ma öelda seda teha, ja tundub, et olla nii, et ankrusilt on mõjutatud väärtus Seda omadust nimetatakse href kuid see näitab seda tekst, see tundub tähenda, et ma võiks panna URL mõlemas kohas ja siis uuesti ja nüüd vaata URL ja minna URL. Teade, kui ma kursorit alt vasakule, Ma tõesti läheb veel disney.com. 

Nii et kui olete kunagi olnud phished-- P-H-I-S-H-E-D-- üks neist võlts kirju alates nagu PayPal oma panga, olete ilmselt saanud viidad e-posti, et sa loed, et ütleb, et siit minema kinnitavad parool või kinnitage sünnikuupäev sotsiaalse või midagi sotsiaalselt insener sa avaldada teavet. Noh, ma võiks sellist võtta Kasutage seda ei saanud ma? Ma ei suutnud midagi öelda nagu, www.paypal.com. Ja selle asemel, disney.com, ma võiks minna, nagu badguy.com. Värskenda. Ja kui lihtne on seda Narri, eriti üldarusaadav lugeja või põgusalt lugemine Lugeja kui klikkida link niimoodi, mis siis, kui ma vajutan see-- Ma tegelikult ei taha minna badguy.com. Ma ei tea, mis on tegelikult olemas. Nii paypal.com, teate, on mida ta ütleb, et see läheb, Aga muidugi, kui ma odavnema ülimadala, see on natuke udune, kuid ta ütleb badguy.com. See on ainus öelda kohe et ma lähen vales kohas. Ja kui ma ütlesin, et pangad tõesti ei tohiks julgustada või treenida kasutajaid klikkides linke, see on vaid üks ilming see. Ja nii lihtne see ongi. Olete nüüd vastane, kui sa midagi sellist ja proovige trikk kasutaja arvesse külastavad oma veebilehel. Aga nüüd, hoiame asjad kena ja puhas. Me läheme edasi minna ja tagasikerimine need muutused. Laadi leht uuesti. Ja ma lähen tagasi disney.com. 

Vaatame, kas me ei kiusa Selle peale veidi rohkem. Nii "tere, Disney World." Ma ütlen siin. Võib-olla ma lähen tegema ruumi. "Loodame, et naudite oma viibimist!" Säästa. Värskenda. See ei ole rea-- see pole mida ma mõeldud, eks? Ma mõtlen, et kui ma ravivad oma teksti faili nagu sõna töötleja, mida sa loota juhtuks siin? Jah, ma tunnen, et seal peaks olema reapiiri siin nii tundub vigane kuidagi. Aga see on tegelikult tahtlik, sest nagu seni, brauser on ainult kavatse seda, mida sa öelda tahad. Ma ei öelnud seda, et murda read. Ma ei ole öelnud, et liikuda allapoole, isegi kuigi intuitiivselt, ma tunnen nagu ma tegin. Nii selgub peame veidi rohkem juurdehindlus, ja ma lähen seda parandada järgmiselt. Ma juhatan seda esimest tere mida nimetatakse lõigu tag. Ja siis ma lähen edasi minna ja murrab see teine ​​lause Teises punktis tag, kuigi nad super-lühike punktid. Nüüd ma lähen säästa. Värskenda. Ja nüüd on meil see ruumi, ja me omamoodi on semantika kaks eraldi punktid. 

See on kõik hästi ja hea, kuid see kena pildi lisada sellele lehele nii et ma lähen otsida Mickey Mouse Google Images. Ja just for fun, ma olen läheb haarata see pilt. Ma lähen edasi minna nüüd ja haarata URL selle pildi, kuigi seal on erinevad kuidas seda teha. Praegu ma lihtsalt kopeerida URL. Ma lähen tagasi oma teksti fail ja ma lähen öelda, img src = tsitaat lõppeb et URL, super-pikk. Ja siis mõiste kohta pilt on veidi erinev. Seal tõesti ei ole mõiste lähtekohaks pilt ja lõpetades pilt, nagu alguses sildi lõpu tag. Nii tundub natuke imelik mulle tähenduslikult seda teha, et tihedas pildi tag. See ei ole vale. See on täiesti õige, ja see on julgustanud, kuid seal on stenografisti märke. Saan mingi üheaegselt avada ja sulgeda sama tag ja mis muudab brauseri õnnelik. Nii et see on natuke sisutihedamat asju et põhimõtteliselt tõesti ei mõtet alguse ja lõpu. Nad lihtsalt on olemas, ega nad ei ole. 

Nii et ma lähen salvestada ja minna tagasi minu "Hello, world" lehel ja reload. Ja see on natuke kontrolli alt, sest, et pilt on tegelikult natuke suur, kuid see on OK. Ma võiks suurust muuta programmis. Või sa tead, mida. Lihtsalt, et näidata, ma olen läheb tegelikult öelda et laius see asi peaks ainult 200 pikslit, 200 dots. Lubage mul minna ja päästa ja uuesti, ja nüüd lehele tundub veidi enam mõistlik. Aga märgata muster. Noh, ma olen selline õpetanud kõik HTML mõnes mõttes, vähemalt kontseptuaalselt, sest kõik HTML on on Nende tags-- avatud sildid, suletud silte ja atribuudid, mis muuta oma käitumist. Ja ilmselt iga tag võib olla null või üks või kahe või enama atribuutidega Kõik mis teeb midagi natuke erinev. Nüüd, kui sa tead, mida on olemas? Sa kuula keegi nagu mina ütlen teile, mida ei eksisteeri, või sa lihtsalt Google ringi juhendaja HTML, ja see tõesti on see lihtne. 

Tõesti, kui ma olin undergrad aastat tagasi ja sain teada, HTML, üks mu matemaatika õpetamise assistendid just kulutanud natuke aega juhendamine mind samasuguste pool tundi, tund, ja siis ma olin teel. Ma olin teel suunas muuta Kõige kole veebilehed kunagi varem mis ilmselt ma ei ole tõesti jõudnud kaugemale. Kuid küsimus on, et kui sa mõista neid lihtsaid ideas-- kui kauge text-- kuid neid lihtsaid ideed alustades arvasin ja sulgemise mõte, hoides kõik kenasti tasakaalustatud, otsin midagi üles, muutes käitumist, mis tag, mis on tõesti kõik on seda. Ja tegelikult, kui me nüüd minema midagi google.com-- tegelikult, lähme koht natuke rohkem reasonable-- stanford.edu. Ja ma lähen Vaade Arendaja, View Source. See on kole, kuid notice-- ja ma suumida teate mõned asjad, mis on tuttav juba. Seal on see siin, mis on brauser. Siin on HTML5. Seal on HTML. Ilmselt seal on atribuut, et ma ei kasutada mis määrab lehekülje keeles, ja see aitab koos automaatse tõlkimise ja värki. Siin juht lehel. Siin pealkiri Stanfordi lehel. Seal on silt ma ei rääkida yet-- Meta tag. See on lihtsalt omamoodi taustainfo. See aitab SEO või Otsingumootori optimeerimine, või Google'i otsingutulemuste vms. Aga kui me otsime edasi, hoida otsin, siin body. Ja seal on kobarad muu sildid oleme ei rääkinud veel. Aga Div on üks võtta vastu jaotus lehel. See on nagu nähtamatu ristkülik kui sa sellist soovi vaimselt jagada oma lehe eri üksused online. Ja siis palju divs ma vaata, midagi, mida nimetatakse klassi, kuid me tuleme tagasi selle. 

See on interesting-- vormid. Vormid on kogu veebist. Iga otsingukasti oled kunagi kasutatud on kujul. Ja nii, olgem tegelikult näha. Vorm. Action. Tegevus selles vormis, mis iganes Ajaloolistel põhjustel on see, et URL. Meetod on "post". Selgub, et HTTP päringuid saab kasutada tegusõna "saada", nagu me nägime enne, või "post". Ja näed erinevust Selle ühe hetkega. Olgem tegelikult näha, mis see on. Lubage mul minna tagasi Stanfordi lehel. Mis vormis nad on rääkinud umbes, sa arvad? Mis hüppab läbi olete? 

Publik: otsingukasti. 

DAVID J. Humala: Jah. Nii up üleval paremal siin on see otsingukasti. Ja see, kuidas nad ellu see-- tag, mis on sõna otseses mõttes avatud sulg kujul. Ja siis olgem otsida midagi. Otsime semu ning mine-- "Nick PARLANTE." Sisenema. Ja muidugi, see läks veidi erinev URL. Lubage mul minna siia tagasi. Otsime "kursused". Pagan võtaks. Läksin erinev URL. Niisiis, Stanfordi lisades mõned magic et nad ei võta mind URL et me nägime tegevuse atribuut seal. Kuid see vorm on siin rakendatud puhtalt teel seda juurdehindlus siin, neid silte. Tegelikult siin on sisendiks otsingu tüüp, mida soovite. Siin on sisendiks teist tüüpi otsing. Siin on sisendiks stringi ise. Ja nii eesmärk ei ole murrab meie mõtetes ümber kõik need sildid aga lihtsalt näha. See on lihtsalt avamise ja sulgemise sildid ja otsin asju. Jah? Victoria? 

Publik: [kuuldamatu] DAVID J. Humala: See on hea küsimus. See on veidi keerukam näha. Lubage mul tagasi tulla, et Küsimus on vaid paar minutit kui me vaatame midagi, mida nimetatakse CSS või Kaskaadlaadistik, ja saame proovida järeldada nii palju lehelt. Nii et kui me nüüd vaatleme google.com, Vaatame, millised on nende lehekülgede välimust. Sa oleks they're-- see armas täna. OKEI. Kõik tehtud. Olgu, nii View Source. Sa arvad, Google on tore lähtekoodi. Niisiis, ilmselt, mis toimub siin? Ja tegelikult ei ole see isegi HTML. See on midagi, mida nimetatakse JavaScript. Ja olgem hoida läheb ja läheb. Ma isegi ei tea, kus lehe hakkab. Ma lähen kasutada Command F, avatud sulg HTML. Olgu, siin see on. Leidsin algust leht ja seal on nii palju asju siin. 

Mis tegelikult toimub? Noh, sa tead, mida, saame puhastada see üles. Kui ma mitte minna sellele Kontrollige tööriistariba, see eriline diagnostiline vahend, ja minna mitte võrgustik, kus meie läheme täna aga kui ma lähen elemendid, Mis on tõesti kena on see, et brauser on palju palju parem silmad kui mina. Ja brauser on võimalik lugeda mis jama veebilehele, et HTML mail me lihtsalt vaatasin, ja see võib sõeluda või lugeda ja analüüsida ja vormindada kena inimsõbraliku viisil. Nii, mida ma praegu näen Selles ekraani siin all Elements, täpselt sama sisuga, kuid nad on liigestatud kõike, nad on värviline, aga see on täpselt sama teksti et ma serverist tõmmata. 

Ja mis on tore nüüd on Näen keha jaoks instance-- teate, leht on ikka koosneb lihtsalt pea ja keha, ja ma ei saa hierarhiliselt sukelduda siin. Pange tähele, et Google on ilmselt kuni divs-- see üks ja see üks. Ma ei laiendada seda. Seal on terve hulk muid divs. Nii et see on natuke keeruline. Aga oota. See tundub nii palju loetav, suhteliselt, kui see. Miks on Google piinlik ise just saates Selle suure segaduse koodi mõne Sorteeri lihtsalt ellu midagi mis näeb välja nii lihtne esimesel pilgul? Nagu, miks nad lisada rohkem ruumi? Miks nad ei Enter nagu mina tegin? Vaata, kui hea ma olin kirjutamiseks veebilehel. Ma Enter nii usinalt. Ma liigestatud nii et kõik on nii ilus ja loetav. Miks Google ei praktiseeri sama? 

Publik: [kuuldamatu] DAVID J. Humala: Hea. Väga aus. Neil ei ole mõned Isik, Google käsitsi ajakohastamine kodulehel enam. See ei ole 1999 enam. Nii on neil tarkvara. Nad on ka teisi vahendeid, et genereerida dünaamiliselt nad HTML. Muidugi, et kood ise oli kirjutatud inimeste poolt, kuid reaalsus on, see on üsna õiglane öelda, brauseri kindlasti ei huvita, kuidas räpane kood on. Aga seal on isegi rohkem mõjuvatel tehnilistel põhjusel et Google jagab oma HTML koodi selline lohakas, näiliselt valdav viis kõik kokku pakkida väga vähe way-- väga vähe teed vormingu nagu mina tegin. 

Publik: [kuuldamatu] 

DAVID J. Humala: kiiremini? Miks? Ja mida sa ütlesid, Lydia? Kiiremini? Miks kiiremini? Publik: [kuuldamatu] DAVID J. Humala: Ei pole ruumi lugeda. Jah. Nii mõelda, mida ruumi on. Nii iga klaviatuuril tähemärk võtab mingi summa ruumi esindama, kas füüsiliselt, nagu see võtab nii palju ruumi, või kuidagi all hood, mis nõuab mälu. Ja kui aside-- ja me rääkida rohkem sellest tomorrow-- iga klaviatuuril tähemärk nõuab tavaliselt 8 bitti või üks bait. Nii muster 8 nulli või need, või lihtsalt 1 bait, nagu me Inimestel on tavaliselt öelda. Nii et väike, kuid see on ikka nullist. See on ikka mingi summa ruumi. Nii et kui insener või Google'i tabamust tühikut ainult üks kord, ja oletame Google'i abil on super-popular-- Oletame, et miljard inimest külastada oma kodulehel päevas, või mõned inimeste arv külastada kodulehel esitletakse miljardit korda päevas, kui palju täiendavaid baiti on, et tarkvara insener maksavad vaid Google pihta tema tühikut kord? 

Publik: [kuuldamatu] DAVID J. Humala: Mitte päris nii hull. Lihtsalt üks bait korda miljardit. nii a-- Publik: 8 miljardit gigabaiti. DAVID J. Humala: Mitte 8 miljardit. 8 miljardit baiti. Aga 1 GB. 1 GB oleks mõõtühik. Kui ta teeb kaks ruumid, 2 gigabaiti. Kolm gigabaiti. Right? See kaalud kallis. Ja nii juhtudel, nagu Google, mis antud, on äärmisel juhul, on ka teisi küsimusi, mis tekivad ainult tehes väga mõistlikud otsused või võtta väga lihtne inimtegevustes sest see on tema suurendatud mõju. Nii et üks põhjus, See näeb välja nii, suru on täpselt nii, nagu Victoria said-- see oli lihtsalt elektrooniliselt niikuinii. Nii ei ole suur asi. Lase brauseri aru saada. Aga see ka tahtlikult ei ole palju ruumi, kuna ruumi ei ole vajalik. Ja ruumi tegelikult maksab raha. 

See kas maksab aeg, sest lihtsalt suruda et palju rohkem andmeid välja google.com peakorter lihtsalt on saanud võtta mingi summa aega, isegi kui see on millisekundit või mikrosekundit, kuid mis lisab kuni üle nii palju kasutajaid, või veelgi tõenäolisemalt see ilmselt maksab raha. Google ilmselt ühendab keegi teine ​​maailmas, üks nende piilumas punktid, ja kui nad on mingi rahaline suhe kusjuures nende andmete maksab raha, nad võiks samuti vähendada, kui palju andmeid nad sülitada välja oma internetiühendust. 

Nii naljakas asi, aga lõppkokkuvõttes või äkki rahustav asi, on see, et kuigi see näeb kohutavalt valdav, lõpus päeval, see on ikka täpselt samu põhimõtteid, See on väga lihtne leht siin HTML- lehel. Nii lihtsalt kokku ja nii, et teil on kanooniline versioon kui teil ei olnud järgmised poolt kaasa valik siin, siin võib olla kõige lihtsam veebilehti, nii midagi mängida võibolla hiljem. 

Noh, kehtestada Paar muid ideid nüüd. Oleme umbes tutvustada midagi, mida nimetatakse stiilis tag. Me ei Stilisoida see leht rohkem huvitavaid võimalusi. Nii et HTML e-posti on kõike markeerimiseks andmed, justkui täpsustades kuni brauseri kuidas struktureerida andmeid, kuhu panna see, CSS, või Kaskaadlaadistik, on teine ​​keel, Üldiselt saab segatud HTML kui me see-- kuid me saame puhastada et üles moment--, mis võtab see lõpliku miil, ja see stylizes seda. Läheb värve just, font suurused just, positsioneerimise just õige. See kõik on umbes esteetika või vormingu, ei tähenda põhiline andmed ise. Ja lihtsaim viis näidata See on võib-olla eeskujuks. Nii et ma lähen üle minu lihttekstifaili. Ja üks hetk, ma kõndida meid läbi protsessi seda teha ise. 

Ma lähen tagasi oma faili siin ja lae leht lihtsalt kinnitada milline see välja näeb. See, kui me oleme nüüd. Ma tunnen, et lapsed saaksid võttes mõned värvi sellele lehele. Nii et ma lähen siin peasse lehel. Ja ma lähen tegema, stiilis, / stiili. Ja siis sees see, et ma lähen öelda keha minu page-- ja seda vormingut on kell Esmapilgul võib-olla natuke kummaline, kuid tavalised. Ma ütlen, et taustal värvi see leht peaks olema roheline. Ja see on kahjuks omamoodi mitte parim disain. Pange tähele, et varem maailma HTML, Ma ütlesin, et atribuute need key-väärtus paare. Midagi võrdub tsitaat lõppeb "midagi." Tänapäeva maailmas on CSS, mis oli kujundas mõned erinevad inimesed, nad otsustasid, et nende maailma, võtmete ja väärtuste paaridest oleks sõna jämesoole midagi. Nii et see on sama mõte, kuigi. See ühendab väärtus kesksete et kuidagi mõjutab käitumist sellele lehele. 

Ja saab ilmselt arvata. Mis see on ilmselt läheb teha isegi siis, kui te pole kunagi näinud HTML või CSS enne? Publik: Muuda tausta värvi. DAVID J. Humala: Jah, muuta tausta värvi. Ja konkreetselt taustavärvi keha. Aga kuivõrd kere nüüd on veebis page-- see on ainus asi, pealkirja alla baari really-- see on ilmselt läheb mõjutada sama asi. Vaatame. Hoiame seda. Mine siia ja laadida. See on päris kole. Ja mis toimub siin on kõrvaltoime. Ma valisin selle pildi juhuslikult. Miks on rohelised mitte läbivat taga Mickey? Publik: [kuuldamatu] DAVID J. Humala: Täpselt. Selgub, et pildid, päris palju kõik pildid, mis me võiksime kasutada, kõik rectangles-- ristkülik. Isegi kui Mickey on mõned kõverad ise ja on taust, Selle taustal peab olema midagi. See peab olema valge. See peab olema must või midagi muud. See võib olla läbipaistev. Ja tegelikult, suutsin avada Mickey Mouse siin aastal programmi nimega Photoshop või midagi sarnast ja muuta kõik, et valge taust läbipaistvaks nii roheline paistaks läbi. Aga see on midagi, mida ma vajaks küsida ennast või graafik või disainer minu Ettevõte, näiteks teha, eriti kuna ma lihtsalt laenatud see internet. Aga see, miks see toimub. 

Mida veel võiks me tahame teha? Noh, me võiksite öelda, et me tõesti loodan, et te nautida oma viibimise. Ja tähelepanu, ma tahan teha see tugev, ja nii ma ütlen lahti tugevad ja sulgeda tugev ja seejärel uuesti. Ja see on natuke raske näha projektorit aga võibolla tõesti nüüd hüppab välja ennast natuke rohkem. Nii saate lisada kaldkirjas selles Nii julge jääksid sel viisil. Me võiks muuta värve. Tegelikult lihtsalt peksab, ma olen läheb edasi minna ja seda teha. Ma tõesti ei meeldi, kuidas minu punktid on see lähestikku, nii et ma võiks teha midagi sellist. Ma lähen sirvija, muuta iga punkt tag on, olgem say-- tegelikult, sa tead, mida, olgem viia see text-align, keskus. Ja jälle, ma tean, et see ainult sest keegi õpetas seda mulle või Vaatasin seda üles online-viide. Nii et lubage mul salvestada. Ja ah, nüüd ma olen tsentreeritud pildi sinna. Ja tegelikult, sa tead, mida, kui Ma liikuda mu pilt mõnda lõikes tag-- nii kolmanda lõigu kuigi see ei ole teksti. Hoiame seda ja uuesti laadida. Nüüd lehekülg on hakanud otsima liiki of-- Ma mõtlen, see on ikka päris kole, aga vähemalt tundub Veetsin Kahe minuti asemel üks minut tegemist. 

Ja nii sammhaaval, me saame Nende esteetiline muutusi nüüd lehele? Ma ei ole tõesti muutunud andmed lehekülje peale, lisades sõna tõesti. Olen lisanud metaandmed, kui soovite. Hei, brauser, teha Sõna "tõesti" julge. Kuid andmed ei ole tugev. See on metaandmed. Andmed on "tõesti." Nii on meil veel mõned Samal mõisted nagu enne. Nüüd, muidugi, see ei ole veebis nii et ma lähen tegema veel ühe sammu siin. 

Ma lähen, et hello.html ja lihtsalt rõhutada ja kopeeri see. Ja nüüd ma lähen minema Cloud9, mis Ma sõelub vaid hetkeks. Ja koefitsiendid saate varsti, kui ei ole, kui ekraani niimoodi. Ja las ma anda teile kiire Tour mida Cloud9 tegelikult on. Nii jälle pilve 9 on see pilvepõhine teenus mis annab teile ja mulle illusiooni millel on oma virtuaalne masin pilv, tehniliselt konteiner pilv, et meil on täielik administraatori. Nii teoreetiliselt keegi mujal maailmas on juurdepääsu ekraani ma olen vaadates kohe, välja arvatud ehk inimesed kes jooksevad saidile, sest tehniliselt on neil füüsilist juurdepääsu ja nii edasi. 

Niisiis, mida me näeme selles keskkonnas? Ma lähen välja suumida, sest see on natuke väike. Ja lubage mul üle siin üks hetk. Vasakul servas minu ja teie ekraan, seal on failisirvijat vasakul. Nii sarnase sisuga Mac OS ja Windows. Need on kõik failide minu kontol. Ja vaikimisi, kui teie konto on nagu minul, näete või varsti näha helloworld.html ja readme.md. Üle siin paremal, see on kus mu tekstifaile lähevad. Kui olete kunagi kasutada Microsoft Word või Notepad või TextEdit, See on sõna minu toimetamine faile ei lähe. Ja siis kõige kauge tunnuseks see keskkond et me tegelikult ei vaja kasutada on siin nimetatakse terminali aknas. Kui oled kasutanud DOS Läinud, see on Linux või Linux samaväärne DOS. See on teksti põhjal interface-- no hiireklõpsuga, ei lohistades. Kõik, mida saab teha, on sisestada käske, aga need käsud saab luua faile, teisaldada, avatud kataloogid lähedal kataloogid, teha ükskõik kui palju asju. Aga nüüd, me lihtsalt kulutada oma aega siin. 

Ja nii teeme selle ära. Kui oled selles keskkonda, mida tuleb kui sa lõid tööruumi juba minna ja lihtsalt minna üles File, New hetkeks. Ja see annab sulle uue tab siin keset. Ja ma lihtsalt-- ja olgem minna ja seda teha. Lähme edasi ja nüüd ei File, Save ja minna ja nimetame seda hello.html, ei tohi segi ajada helloworld.html, mis tuli endale tasuta konto mis on lihtsalt proov faili. Sa näed, see äkki ilmuvad, tõenäoliselt vasakul servas ja tab ikkagi avatud. Ja las ma kutsun teid nüüd taastada Selle faili või mõned variandid. Ja kui sa ei saa päris näha seda kohta ekraan, see on identne slaidid et siis ilmselt on teises tab. 

Lühidalt öeldes, teeme oma esimese veebilehe salvestada ja siis üks hetk, Ma näitan teile, kuidas võib tegelikult näha seda. Aga muuta vähemalt üks asi. Muuda helloworld kuni midagi teie enda valik, nii et sa oled veendunud, et see on teie esitada ja mitte see, mida ma just loodud. Hästi. Ja kui sa ready-- ole rush-- kui olete valmis, minna ja salvestage fail kui olete need muudatused. Ja kui klõpsate Run nupp üles tippu, seda peaks avama uue kaardi, mis näitab, teile, mida URL võib külastada oma faili, kuid see võib võtta hetk tsitaat lõppeb "start Apache", mis on nimi veebiserver. Nii et ole ettevaatlik, et teha täpselt Mis failis lõpuks. Nii kohe, ma suumida. Kui ma kirjutama hakata Avatud sulg HTML, teate see sunnib mind lõpetan oma mõtte. Ja kui ma lõpetasin oma mõtte, siis automaatselt annab mulle lõpusildiga. Aga ootus on, siis ma löön Sisesta ja seejärel liiguvad seal ja ei pea sees ja siis ma teen keha sees. Ja see on natuke imelik alguses, sest see teeb töö ära, aga aru, et lõppkokkuvõttes see säästab klahvivajutusi. Ja tegelikult väga ühine joon programmeerimise keskkonnad nendel päevadel nii veebi arengut nagu seda ja tegelik programmeerimine, mis me räägime homme on neid auto-complete funktsioone, asju, mis lihtsalt võimaldab programmeerija või disainer kirjuta vähem klahvivajutused täita sama asi. Mõnikord on hea, kuigi. Vahel on lihtsalt tüütu. Ja jällegi, kui olete transkribeeritud slaidi või mõne varianti võite nuppu Käivita kuni top. Ja siis põhjas aken, siis tuleb teavitada millise URL võib külastada oma kodulehel. Mine näiteks on business-daharvard.c9users.io ja nii edasi. Olgu, nii, las mind-- küsimusi? Muid küsimusi lihtsalt saada see töötab enne kui me lisada funktsioone? Ja andke mulle ettepaneku, lihtsalt saada inimesed comfortable-- sest see on üks asi lihtsalt kopeeri pimesi, mida ma olen teinud. Aga lihtsalt nii, et inimesed maadelda vähemalt ühe ülesande, Ma lähen sisse lülitada mõned muusika. Ma lähen ettepaneku nimekiri asju saab potentsiaalselt lisada. Ja saab kindlasti kasutada Google. Ja miks ei võiks lihtsalt ettepaneku, et püüate lahendada vähemalt üks probleem siin. Nii poolest silte andke mulle uuesti seda siin. 

Tegelikult, las ma panna seda teksti kujul. Oletame, et üks sildid me võiksime kasutada siin on mõned sildid siin. Me oleme näinud lõikes tag. Nüüd läheb auto-complete. § sildi, ankrusildi. Oletame, et soovite teha midagi suuremat, nii et siin võib like-- span tag aitab. Noh, siis võib abi vaja eest, et üks hetk. Me oleme näinud div. Näete seal tabelis. On midagi, mida nimetatakse tr, td. Th, td. Tule tagasi, et ühel hetkel. Mis veel võiks olla mugav? Seal on tugev. Seal on rõhk, või pigem em. There's-- mida veel võib teile meeldib siin? Noh, me võtame vaadata, et üheskoos. Vorm, mida me oleme näinud. Seal kujul. Seal on sisend ja mõned teised. Olgu, teeme siis seda. Kõnele Victoria Küsimus, lubage mul kõigepealt lihtsalt veendumaks, et kõik on võimalik saada oma hello töö. Siis lubage mul tutvustada paar muid ideid. Siis lasen inimesed lahendada mõningaid probleeme oma. Siis me tegelikult tulevad tagasi Selle mõiste kujul, ja me tegelikult uuesti rakendada koos esiotsa liides, niiöelda, Google ise. Me kasutame Google kolp ja lase neid tegema rasket tööd, otsides, kuid me uuesti esiotsa Google ja otsingumootorit et neil on ka oma kodulehekülg. Ja nii me tuleme tagasi Nende silte hetk. 

Nii see oli, mida ma kavandatud hetk tagasi. Me võime lisada stilisatsioon kuni siselehekülgedel selle stiili tag, ja me saame Stilisoida taustal värvi, teksti joondamine, kas see on keskel või vasakule või paremale. Kuid väga kiiresti soovid leida või veebi disainer ei leia, et see muutub veidi kohmakas, sest sa teed, mis on nimetatakse segamine sisu koos esitluse hulgast. Sa segamine oma andmeid ja esteetika selle. Ja tegelikult, kui arvestada Mis juhtub üle AEG_ see on väga väike veebilehe, muidugi. Aga kui ma lisan sisu sellele lehele ja lisan stiilis sellele lehele, lehekülje väga kiiresti saab pikemaks ja pikemaks. Ja oletame, et ma tahan on teine ​​veebileht, mis jagab mõned neist atribuutidest. Oletame, minu teine ​​veebilehe minu site-- ka, ma tahan kõike keskus, ja ma tahan ka kõike rohelise taustaga. Ma olen päris palju läheb on kopeeri ja kleebi mõned read arvesse, et teist faili, mis tundub hea. See lahendab probleemi. 

Aga mis siis, kui ma tahan kolmanda lehekülje või 30. leheküljel või 40. leheküljel? Nüüd ma lähen kopeerimine ja kleepides palju eksemplaris koodi Mitme faili. Ja nii oletame, et Ma otsustan või ma ütlesin, hei, me ei kasuta rohelisel taustal enam. Me läheme kasutama hakata oranž. Mida sa pead muutma? Noh, sa pead muutma, et stiili rohelisest oranžiks, kuidas paljudes kohtades? Nagu 30 või 40 kohta. See on tüütu. See on vigu tekkida. Seal on mitmeid põhjuseid kus sa ei taha et kutsuda esile sellist valu ise. Ja nii ei oleks tore kui me võiksime seda, mida ma just pane nende kahe kollane sildid, need stiilis sildid, tegur see välja ja pani kõik minu stilisatsioon ühte keskset faili et kõik 30 või 40 minu muid faile laenata või kuidagi viide ei ole erinevalt võrgustiku diagrammid me teeme varem? 

Nii et kui ma lähen siin, ma olen läheb tegelikult ettepaneku et me asendada stiilis tag midagi nimetatakse link tag, mis on kohutavalt, kohutavalt nimega, sest sa ei kasuta link tag luua, mida meil inimestel teada, kui link veebilehele. Sest, et te kasutate mis tag? Kuidas luua lingi veebilehele? Publik: A. DAVID J. Humala: A või ankur tag, mis läks Disney enne. Link tag siin ütleb see-- faili link nimega styles.css, suhe, millele saab olema, et see on minu laaditabeli. Nii et see on üks S-sid CSS-- Kaskaadlaadistik. Style sheet-- kaks S'i CSS. CSS-stiil. See tähendab lihtsalt, hei, brauser, minge leida styles.css kohalikus serveris ja kasutada seda oma Stiil mis tähendab sees, et faili läheb kõik stilisatsioonidega, et oleme lihtsalt teha. Ja mis siis, et faili tunduda on järgmine. Ja ma lihtsalt seda teha on kiire Näiteks, kuna me ei pea saada liiga palju umbrohtu siin. Aga kui ma koopia sellest, mida ma ettepaneku on see, et programmeerija luua uus fail, kleebi need lines-- whoops-- kleebi need read, salvestage see styles.css, ja siis, et Teisest faili kustutada kõik selle ja asendada selle asemel Selle link tag. Nii et kui ma saan href = "styles.css" suhe peab olema "laaditabeli" sulgemissilti. Säästa ta. Mine tagasi oma helloworld. Värskenda. 

Sõna otseses mõttes midagi juhtunud. See on hea, sest see tähendab see tegelikult kõik töötab. Et tõestada, kui palju, arvan, et ma teha kirjaviga, ja ma kutsun seda "styles.css" suure tähega S, mis on vale, ja siis uuesti. Nüüd näed see lihtsalt ei tööta. Nüüd, miks? Noh, kasutage tehnikat varem. Lubage mul minna, ja minu brauser, Chrome, ma olen läheb avama, et erilist võrgu tab nagu enne, ja andke lae leht. Mida sa ei ole üllatunud, et näha kohe? Või äkki sa oled üllatunud, et seda näha. Nii või teisiti, mida sa näed nüüd? Publik: [kuuldamatu] DAVID J. Humala: See ei ole leitud. Miks ei leidnud? Noh, Styles.css-- kapitali S- ei ole olemas. Ma misnamed ta. Lihtne kirjaviga. Aga ma saan arusaadavalt nüüd 404, kuna server ütleb, hei, see ei ole leitud. Sõna otseses mõttes, ma ei tea kui see fail on. Nii selle tulemusena brauseri näitab sulle, mida ta suudab, toores lehe sisu, mis oli 200, HTML, kuid stilisatsiooni ei saa lisada pärast. Ja see on see, mis tähendas, kaskaadi. Võite omamoodi lisada pärast, ja see omamoodi puhastab esteetika veebilehel. Ja võite isegi alistavad stiile veel teisi laaditabeli faili kui sa tahad. See ei ole leitud, kuigi sel juhul, sest muidugi ma misnamed ta. Nii et ma oleks määrata, et esimene. 

Nii lähme edasi ja välja järgmise. Lähme edasi ja tee seda. Alustades ehk Teie helloworld faili las ma kutsun paar funktsiooni ettepanekuid. Niisiis, Victoria, et sa tahtsid teha mingi tekst suuremaks, eks? Olgu, et saaksime ei tee teksti suuremaks. Ja me iga rebite ainult üks probleem lahendada. Tee tekst suuremaks. Ma ei viitsinud Kirjutan seda, kui me on bullet tehnoloogia õige siin. Nii mõningaid probleeme. Nii et me läheme püüdma teha teksti suuremaks. Hästi. Mida peaks keegi pakkuda? Mida võiks me tahame teha veebilehe? Olgem tulla lühike nimekiri asjadest ja siis delegeerida grupi näitaja see läbi. 

Publik: [kuuldamatu] 

DAVID J. Humala: OK, seisukoha tekst teine ​​teisel pool lehekülge? Hästi. Midagi muud. 

Publik: [kuuldamatu] DAVID J. Humala: On. Nii gif on lihtsalt teise faili kujul. Me lihtsalt kasutatav minu arust png või jpg ilmselt? Me kasutasime jpg. Kui oled uudishimulik, ülemäärase oma küsimusele vastust on jpg kasutatakse üldjuhul fotode, sest see toetab miljoneid värve või 24-bitise värvi. GIF on tavaliselt kasutatakse, nagu Internet meemid need days-- animatsioonid nagu animeeritud GIF. Aga see juhtub kasutada väiksemat värvi palett, vaid 256 võimalikud värvid kuid see toetab läbipaistvuse ja animatsioon. Ja siis on png, mis toetab läbipaistvuse ja värvid kuid mitte animatsiooni. Nii et see on kompromiss. Nii lisades gif, kuigi oleks funktsionaalselt samaväärne lisades png või jpg. Jah. Pilt allikas võrdne. Nii midagi muud. Olgem tulla midagi, et saatsime Victoria teha siin. 

Publik: Lisa nupud vormi. DAVID J. Humala: OK. Nii lisada nupud vormi. Ja me teeme, et üks koos. Nii et saab olema täiuslik Segue peale selle väljakutse. Veel midagi? Mis võiks sa tahaksid teha? Veebist leiab väga underwhelming Kui see on kõik, mida me saame teha. Publik: Muutke teksti värvi. DAVID J. Humala: Muutke mida? Publik: teksti värvi. DAVID J. Humala: Muuda värvi teksti. Hästi. Niisiis, teeme selle ära. Lihtsalt jälle nii, et sa ei ole lihtsalt pähe, teeb täpselt seda, mida ma teen, Ma lähen sisse lülitada muusika võibolla viis minutit siin. Sa oled teretulnud kasutama Google. Sa oled teretulnud küsi, ja Ma sosistada vihje kõrva. Sa oled teretulnud vaatama üle teiste õlgadele. Aga lahendada vaid üks neist probleemidest. Aga me teeme viimane on moodustab ühe, kui me saaksime koos. Nii viis minutit, et lahendada mõni neist probleemidest Google'ist, intuitsioon, või mis tahes muul viisil teile kättesaadavaks. 

[MUSIC MÄNGIB] Hästi. Ära muretse, kui soovite hoida sisemusse, aga ma rikkuda paar need vastused. Nii et esimese soovituse peale Victoria oli teha teksti suuremaks. Nii seal on vähe võimalusi seda teha. Olen praegu taastatud minu ekraanil selle suurus, kuigi ma olen suuminud kunstlikult lihtsalt näha asju. Ja teeme seda. Lubage mul minna ja haarata mõned üldised Ladina teksti lihtsalt nii on meil midagi töötada. Nii et anna mulle vaid üks hetk. Ma teen kolm punkti. OKEI. See on parem näide. Nii uudishimulik, in minu hello.html, ma lihtsalt kleebitud kolm Absurdne Ladina-punktid lihtsalt nii on meil mõned teksti töötada. Ja Victoria eesmärk oli teha mõned teksti suuremaks. Nii et ma võiks nagu enne, minna siin. Ja las ma teen selle õige tee. Ma lähen on link tag, mis viitab failile nimega "styles.css," suhe mis on jällegi "laaditabeli." Ja siis ma lähen päästma ja avada see "styles.css." 

Nii nagu varemgi, on mul võime selles CSS faili tegelikult vaike esteetika veebilehele, ja vaikimisi esteetika, muidugi on päris igav. See on omamoodi Tavaline kirjasuurus, must teksti, valgel taustal, ja nii edasi. Nii arvan, et ma tahan teha kõik see tekst suuremaks. Ma võiks teha mõned asjad. Minu styles.css faili, ma Võiks öelda, et tead, mida, kohaldatakse järgmist keha minu lehele. Lase käia ja teha fondi suurus 24 punkti, mis on number ma võin kasutada Microsoft Word. Las ma lähen tagasi oma veebi leht siin ja uuesti, ja te näete, et see on juba palju suurem. Ja me saame natuke hull, nagu me saame iga desktop-- oleks 96 punkti. Värskenda. Ja see muutub veidi kohmakas selles punktis. 

Aga ma võiks olla natuke täpsem. Selle asemel, et kohaldada seda laaditabeliga keha minu leheküljel mida veel võiks ma seda kohaldada selle asemel, mida teised tag, mis võiks siiski funktsioon samamoodi? 

Publik: p silt? DAVID J. Humala: P tag. Nii pea ei oleks õige, sest pea, See ei ole ju kontrollida esteetika. Seal on kas teksti seal või mitte. Aga p tag-- võin sukelduda väike sügavam, kui nii võib öelda, et lõikes sildid. Ja kuigi seal on kolm, see on täiesti trahvi, sest CSS, kui ma lihtsalt öelda "p" See tähendab kohaldada järgmisi mis tahes sildi, et see sobib valija, rakendub ainult olles sildi nime. Nii iganes sa näed "P" kohaldata fondi suurust, ja olgem muuta see mõistliku again-- 24 punkti. Ja tead mis, lihtsalt hea meede, Teeme värvi punane just praegu. Ja nüüd, kui ma uuesti, nüüd vaata kolm kole punktid. 

Aga nüüd arvate, et ma olen omamoodi of-- Tahan esimeses lõigus hüpata läbi kasutaja. Ma ei taha lihtsalt suurendada tähesuurus kõike. Ja nii ma tegelikult tahan, et identifitseerida või eristada nende seas punktid. Nii saab vabaneda punane, sest see on just selline kleepuv, ja lähme edasi ja teha suurusega 12 punkti vaikimisi nii et me oleme tagasi midagi veidi enam mõistlik. Ja nüüd ma tahan, et suurendada tähesuuruse esimeses lõigus. Ma ei tee seda mõne võimalusi, kuid üks võimalus, mis on võib-olla kõige juhendmaterjalid juures hetkel on teha järgmist. Lubage mul minna ja öelda, et see lõikes on unikaalne ID "esimene". Ma võiks nimetada seda kõike ma tahan. Ma võiks nimetada seda "foo" või mõni muu sõna, aga ma annan siis mõned oma tähenduse nimi nagu "esimene". See on kordumatu tunnus, ID-, minu esimene lõik. 

Mida saan nüüd teha minu laaditabeli on veidi täpsemaks. Selle asemel, et öelda, kohaldatakse järgmine on p tag, Ma ei saa öelda following-- kohaldatakse järgmist või valige, HTML element mis on unikaalne ID "esimene". Mida ma tahan taotleda seda? Font suurus 24 punkti. Nii et mul on kaks valijad nüüd. Üks teeb kõik punktid 12 punkti. Aga see üks, eriti kuna tegemist on second-- tegemist viimase aasta-failina See on doominoefekti. Ma olen lihtsalt teinud kõik minu lõikes sildid 12 punkti, aga see nüüd kaskaadide ja alistab et iga elemendid lehel, silt lehel kelle unikaalne ID on tsitaat lõppeb "esimene". Ja hashtag selles kontekstis tähendab lihtsalt "kordumatu tunnus." Ma ei pane see HTML faili. I, siin, lihtsalt öelda tsitaat lõppeb "esimene". 

Nii et lubage mul uuesti. Ja nüüd ma näen, ah, OK. Ma mõtlen, et see ei ole nii ilus, aga see on selline on nagu eessõnas raamat või midagi sellist, kus esimene punkt on suurem. Võiks olla isegi täpsemaks lihtsalt esimesed tähed, kuid vähemalt Olen kasutanud rohkem kontrolli. Nüüd maybe-- äkki ma tahan seda teha aeg-ajalt mingil põhjusel ja nii ma ei taha, et see kehtivad vaid üks HTML tag. Pigem olgem say-- olgem teha ka järgmist. Class = "import". Arvestades ID kasutatakse üheselt tuvastada üks asi, üks silt, oma veebilehele, klass on mõeldud kasutada mis tahes elementide arvu või sildid veebilehe. Nii et see on korduvkasutatav. ID ei ole korduvkasutatav. Klass on korduvkasutatavad. 

Ja sa tead, mida mingil filosoofiline reasons-- Ma ei lõpeta minu thought-- ma öelda et esimeses lõigus ja Teine punkt on oluline. Nii et ma lähen kohaldada klassi nimetatakse "Oluline", et kui ma hoian oma faili ja uuesti, ei ole funktsionaalne mõju veel. Aga ma olen lisanud metaandmete fail, omamoodi midagi eraldi tuum faili andmeid, nii et nüüd minu laaditabeli, kui ma selle asemel öelda ".important" - sa tead, midagi, mis on oluline, ma olen kavatseb teha font-värv, red-- või pigem ei ole Fondi värv, vaid värv. Seal on vastuolud CSS kahjuks. Ja uuesti. Nüüd märkate esimene kaks lõiku on punased kuid mitte kolmas, sest ma ainult kohaldatud klassi "tähtis" kahele esimesele nendest asjadest. 

Nii ID-d, siis on võime täpsustada väga täpselt. Klasside, teil on taaskasutada. Kuid mõlemal juhul märgata omamoodi hea disaini põhimõte kus ma tegureid välja kõik esteetika minu styles.css faili. Seega puudub segadus siin. Seal ei mainita punane või julge poole või fondi suurust faili. Pigem Mul on semantiliselt, tähenduslikult iseloomustab minu andmed, Siin on mõned olulised andmed. Siin on veel mõned olulised andmed. Lisaks on siin "Esimene" minu olulised andmed. Nii HTML on kõike omamoodi sildistamine, sõna otseses mõttes, sõnad ja punktid ja konstrueerib oma lehekülje neid vähe vihjed, kui te tahan, et saate kuidagi ära kasutades muud tehnikat nagu CSS sel viisil. 

Nii vastuseks Victoria küsimusele, saame teksti suuremaks niimoodi. Seal on nii palju muid võimalusi, kuid font tag-- avatud sulg "font" - on tegelikult mitu aastat vana. Ja see on probleem, liiga, kus tuginedes ainult online resources-- nad kipuvad vananenud. Ja tõepoolest, see on iganenud, sest maailm mõistis, mida tähendab "font-size = 7" tähendab? See ei ole. Ja nii aastaid ja Selle day-- üks külg märgib siin see, et see on tegelikult uskumatult valus ikka mõnikord arendada saite web, sest Microsoft ja Google ja Mozilla ja teised sageli vaidlevad selle üle, kuidas tõlgendada spetsifikatsioon nagu HTML. 

On reeglistik HTML, et Üldiselt ütleb, mida iga silt tähendab. Aga mõnikord on jäetud rakendamise äranägemisel Microsoft äranägemisel ja Google. Ja nii saate väga tihti vaata veebilehel midagi näeb välja teistsugune arvutis kui ta teeb Mac'i ja see on tõesti sellepärast, Päeva lõpuks, nad ei testida hästi mõlemal alustel. Aga see on ka seetõttu mõistlik, arukad inimesed on nõus ja firmad ei ole nõus, ja nii üks väljakutseid programmeerimise veebi või projekteerimine asju veebis kirjutab oma kodulehel viisil mis töötab iga veebilehitsejat. Aga isegi see on ebamõistlik, eks? Seal on nii palju versioone nii palju brauserid seal, et mingil hetkel, teil ka kohtumõistja ja sa pead otsustama, kui firma, eriti e-kaubanduse stiilis kohtades, kus sa oled üritas viimane ja suurim tehnoloogiate anda väga hea kasutaja kogemus. Aga mõned protsenti oma kasutajad võivad ikkagi kasutades Internet Explorer 6 või 7 või 8, eriti sõltuvalt riik, et nad tulevad. 

Ja nii väga sageli konsulteeris on midagi nagu "veebilehitseja statistika." Ja kui me läheme mina-- vaatame Wikipedia ja näha, kuidas up-to-date see skeem on kui see on olemas. Nii et siin saab näha kus brauserid tegelikult on vastavalt detsembril 2015 vastavalt USA valitsuse. Chrome on 42% turuosa, millele IE suuresti ettevõtete seaded või PC seaded muidugi järgneb Firefox, siis Safari, siis Opera ei teha kaardi siin mingil põhjusel ja siis teised. Võib-olla on alla Muusika. Aga rohkem probleeme kui on-- Vaatame, kas Wikipedia on ka versioone brauserid version-- 

Lähme brauseri statistika. IE. Isegi sellest ei piisa. Brauser statistika. Minu versioon. See ei lähe kohe. Vaatame versioonid. Brauser turuosa. Vaatame, kas see kerkib. OKEI. Nüüd see muutub veidi rohkem kasulik. Nii et siin, märkate, et meil on kõik erinevaid versioone brauseritega. Ja my god, kui te look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Ma mõtlen brauserid üha uuendatud, ja mõnikord mõned neist muutustest on oluline nii funktsionaalsuse. Ja nii mingil hetkel on toode juhid või insenerid on vaja teha decision-- sa tean, mida ainult 1% maailma on endiselt kasutades IE 7. Põrgusse nendega. Me lihtsalt ei hakka toetada, et brauser. Ja mida see tähendab mitte toetada? See võib tähendada, et nupud ei tööta oma veebilehel, või see võib tähendada, et vormindamine on täiesti välja. Või siis võib-olla teha Samas kohtuotsuses kõne mobiilne nendel päevadel, kus me oleme ei kavatse toetada IOS 5 enam. Nii et inimesed lihtsalt uuendada. Või me ei kavatse toetada Cupcake Android OS Android seadmeid, sest kui world-- kui tech maailm tahab edasi liikuda, see selline tahab lohistada maailma seda nii, et nad ei ole on jätkuvalt tahapoole ühilduvad, et nad pakkuda uusi ja häid omadusi. See on tõepoolest üks põhjusi, miks nii paljud ettevõtted on jooksvalt läbi automaatsed uuendused ja omamoodi sundides uusimad tarkvara meid. Ja isegi ettevõtted nagu Apple sorteerida ja sunnivad sind peaaegu või sundida sa nii turujõudude osta uus telefon, sest nad lihtsalt ei uuenda oma vana telefoni enam. Nii et sa laseks Viimane ja suurim funktsioone, sest see on kulukas neid kui Ettevõte säilitada vanemate väidetavalt halvem versioonid tarkvara. Aga kogumõju on see, et Samuti kannatavad ka seda. 

Võtame pilk lihtsalt paar lõplik asju siin. Olgem Varastada reaalne kiire mõned need teised täppe, kui uudishimulik. Nii et kui sa üritasid, Näiteks positsiooni teksti erinevatel külgedel lehele, ma lähen tegema üks kiire viis, kuid seal on erinevad viise. Lubage mul minna ja eliminate-- lihtsustada käesoleva järgmiselt. Las ma lähen tagasi oma Lihtne, lihtne punktid. Las ma lähen tagasi oma styles.css. Ja ma lihtsalt kasutada simple-- mis sa võisid näha Google või tagasikutsumise earlier-- teksti joondada paremale. Ja laadige see leht. Nüüd tundub kõik olema õigus joondatud, nagu võite näha õhuliini siin. 

Me ei saa teha seda vaadata veidi rohkem broneerida moodi, ja me ei saa öelda "õigustada" ja uuesti laadida. Nüüd on see kena ja väljaku nii külge, mis on omamoodi tore. Teine eesmärk, mis meil oli siin oli muudavad värvi teksti. Nii nägime, et minu punane tekst. Ja nüüd lisada nupud vormi. Miks me ei püüa seda täpselt? Aga kõigepealt lubage mul minna veebilehekülg, mis enamik meist kasutavad iga day-- Google. Ja võtame pilk kuidas Google tegelikult toimib. Aga ma lähen seda teha. Esiteks lubage mul seda teha in-- yep, lase mul minna Google esimene. Ma lähen minema Google Settings sest ma tahan keelata midagi, mida nimetatakse Instant Tulemused. 

Nii võite märganud Google neid days-- lase mul minna tagasi ja see sisse lülitada. Nii et kui ma hakkan otsima jaoks "kassid", nagu see, märgata, et mitte ainult ei Ma saan auto-complete üles top, äkki, leht ise Tundub, et muuta päris kiiresti samuti, ja see on Google abil keeles nimetatakse JavaScript üritab olla kasulik. Aga kahjuks see omamoodi ja messide up meie arutelu sellest, mis tegelikult toimub all kapuuts siin. Nii et ma olen lihtsalt selline kiiresti lülitada kohe tulemusi. Ja ma lähen nuppu Salvesta. Ja nüüd ma lähen, et avada et diagnostika tööriistariba, mis ma hoida avamine all Network alt. Nii teeme seda. Lase mind-- whoops-- Leidke selle alla natuke. Ja las ma otsida "kassid". 

Ja nüüd notice-- tegelikult, See on hea võimalus arutada hetkeks. Märka hetkel ma liik-- peatada. Lõpeta. OKEI. Märka hetkel ma tähe C, vaadata ekraani allosas. A- T- S. Mida põhja Selle ekraan, minu Network sakk soovitan toimub iga aeg writing kirja? Kahjuks konn on väga häirivad täna või Shamrock või mis iganes ta on. Mis juhtub iga kord, kui ma kirjutada? Ja andke mulle selgeks puhver ja kirjuta see uuesti. So-- whoops. Iga kord, kui ma kirjutada kirja, C- A- T-- nii uue rea ilmselt hoiab ilmumist. Mida kõik need read esindavad, põhjal, mida oleme näinud ja arutanud siiani? Publik: Läbiotsimine? DAVID J. Humala: Läbiotsimine või rohkem üldmõistena, HTTP taotluse minu brauseri server. Noh, miks on minu brauser muutes HTTP nõuda iga kord, kui ma kirjutada kirja? 

Publik: [kuuldamatu] DAVID J. Humala: Jah, see annab mulle need auto-complete tulemusi. Nagu, kus teha neid otsingu tulemused tulevad? Noh, iga kord, kui ma kirjutada kirja, Google saadab rohkem ja veel ja veel sõna ma kirjutades. Miks? Sest nad tahavad mulle paremaks, parem soovitus, soovituste nimekirja, mida sõna Püüan tegelikult täielik. Nii et see tähendab sõna otseses mõttes iga iseloomu tipite Google saadetakse, lõppkokkuvõttes lahtiselt, aga mõnikord ka üks korraga, et rakendada Nende auto-complete funktsioone, kui andmed on muidugi veebis. 

Nüüd võtame pilk tegelikult juhtub, kui ma vajutan Google Search. Ja siis me võimendada seda ise. Nii et kui ma keri nüüd väga esimesel nõudmisel, et lihtsalt juhtus. Märka järgnevat. See saadeti üsna pikk URL-- https://www.google.com/search? ja siis terve hunnik asju. Vaatame seda tegelikult nüüd brauseri tab ise. Olgem vabaneda tööriistariba siin. Siin lehel otsingutulemustes. Ja teate siin on URL. Nüüd saab ilmselt vist Mis siin toimub osaliselt. Nii esiteks mõiste. See ilmselt on sihtkoht kui vorm esitatakse. Nii et kui ma tipitud sõnad "kass" ja vajuta Enter, ilmselt Google saata minu tekstisisestus selle URL et ma olen rõhutanud seal, kaldkriips otsing. Selgub, et URL, midagi, mis juhtub pärast küsimärk on, kui me ütleme, võtmeväärtuste paari mis Vormi sisestatud või kuidagi edastatakse brauseri server. 

Nii igal ajal kirjutad input kujule veebis ja see saadetakse Kuna me oleme arutanud kaudu get, üks neist virtuaalsetest ümbrikud, sisu Selle envelope-- jah, hoida saada täidisega füüsiliselt ümbrisesse klassis täna, kuid tehnoloogiliselt see on tegelikult panna URL. Nii tegelikult, las ma sõeluma läbi selle. Kus sa näed kasutaja sisend? Kus sa näed midagi et ma ise kirjutada siia üles? Jah, nii et "kass". Right? Nii et lubage mul destilleerida seda midagi lihtsamat. Ma lähen kustutada kõike Selle URL, et ma ei saa aru, ja ma lihtsalt jätan seda see-- / otsida? q = kassidele. Me näeme, kus q pärineb ühe hetkega, aga see tunne minimaalne palju teavet, mis ma ette. Ja nüüd ma lähen Enter. Ja märka seda ikka töötab. Me ikka tagasi terve hulk kassid. Nii Google on Kasvataja kui seda nendel päevadel. See on 2016 mitte 1999. Nii et muud kraami, et minu brauser saadab serverisse. Aga see on minimaalselt kõik, mis on vajalik. 

Mis siis toimub? Noh, esiteks lubage mul minna ja minna tagasi Cloud9 ja lase mul minna ja sulen kaarte varem. Ja ma teen seda minu ise lihtsalt hetkeks. Ma lähen edasi minna ja luua uus fail. Ja ma lähen salvestage see google.html. Ja ma lähen väga quickly-- Ma lähen varastada, tegelikult, mõned selle teksti lihtsalt säästa aega. Ma lähen kleebi see siin. Ma ei viitsinud mis tahes stilisatsioon seekord. Me läheme nimetame seda "Minu Google." Ja ma lähen lahti saada kõike organismis. Ja ma lähen tegema järgmist. Las ma suumida. Olek action-- ja nagu ma põgusalt mainitud earlier-- whoops-- nagu ma lühidalt varem mainitud, tegevusulatus vorm on see, kui sa saadad andmed. Nii google.com/search. Ja meetod ma tahan kasutada võib olla üks kahest. See võib olla kas "saada", nagu me hoida arutada, või see võib olla "post". Praegu on põhiline Erinevus on, kui te kasutate "saada" kõik andmed, et kasutaja annab saab saata URL. 

See on suurepärane asjad otsing mootorid ja mõned muud rakendused, aga millistel asjaoludel sa ei taha, et täita vormi ja on teavet lõpuks üles URL, nagu brauseri aadressiribale? Millist vorme teha sina-- Publik: [kuuldamatu] DAVID J. Humala: Jah, nagu mida? Publik: paroolid. DAVID J. Humala: Jah, nii et logida sisse Facebook või mõnel veebilehel. See kasutaja sisend vormi, tekstiväljale aga sa ilmselt ei taha seda ilmumise brauseri URL. Miks? Ma mõtlen, et äkki on olemas mõned julgeolekumõjud võrgus, kuid more-- meeldib rohkem lihtsalt, mis siis, kui Teie toakaaslane, teie teised olulised, teie lapsed, teie abikaasa vaatab läbi brauseri ajalugu? On oma parooli õigus seal oma brauseri ajalugu. See ei tunne hea disain. Või veelgi tehniliselt, Oletame, et olete püüdnud üles laadida foto Flickr või Facebook või wherever-- mis on kasutaja sisend, kuigi see on natuke rohkem interesting-- kuidas ma tuupima pildi URL bar? Sa selline omamoodi saa. Sa liiki võimalik. Aga tõesti, ma olen kitsikuses ette kujutada seda tehes. Nii et ma pean teist meetodit fotode veebilehel, ja see teine ​​meetod on nn "post". Aga nüüd, me lihtsalt rääkida "Saada", mis on lihtsam kahest. See lihtsalt paneb kõiki kasutaja sisestatud URL. 

Nii et siin on vorm ma loon. Ma tahan sisend. Ja teate mis? Ma lähen teen oletuse siin. Ma lähen meenutavad minu input "q" jaoks "päring." Ja ma arvan, et see on üks originaalseid disainilahendusi ehk 1999. Ja siis tüüp selle sisendi on lihtsalt saab olema "tekst". Ja siis ma lähen teise sisendi et ei ole vaja nime, nagu me varsti vaata, tüüp, mis on "esitama." Ja see läheb anna mulle eraldi nupp. Ja see ongi kõik. 

Nii et lubage mul minna ja salvestada faili. Ma lähen tagasi oma brauser ja mine google.html. Sisenema. Ja see on selline hõre pehmelt öeldes. Aga lubage mul minna ja otsida "kassid". Ja teate ma olen praegu sel Cloud9 URL. Aga hetkel ma vajutan seda, kus te loodate ma lõpuks? 

Publik: Google. 

DAVID J. Humala: Google. Nii saab käsul Saada. Ja tõepoolest olen uuesti ellu Google. Right? See on lihtsam. See on kergem. Ma mõtlen, et minu kood on selgelt parem kui päralt, alates jama me nägime. Ja teate mis? Ma lähen vürtsi see üles natuke. Ma ei maininud seda varem. On siltidega nagu H1, rubriigis 1 kõige olulisem rubriigi lehel. "Minu Google:" Ma nimetan seda. Lubage mul uuesti. See vaadates natuke parem juba. Ja tegelikult, tead mis? Olen already-- ma valetasin. Ma ütlesin, et ma ei hakka stiilis see, aga ma lähen stiilis see nagu enne. Ja minu keha saab olema, oletame, text-align center. See on suunatud rohkem nagu Google juba. 

Vajan reavahetus, kuigi sel Saada nuppu. Ja selgub, siis saab kasutada lõiked, või saab rohkem sõna otseses mõttes lihtsalt öelda, anna mulle reapiiri siin-- BR tag. Ja kui ma uuesti seda, nüüd läheb seal. See on natuke kole, et ma võiks teha mitu reavahetused, aga ärme liiga ahne siin. Nüüd vaatame, kas see toimib "koera." Tundub, et töö eest "koerad," samuti. Mis siis mõjuvad Buffee siin? One-- ei olnud suur hüpe tutvustada veel mõned sildid, nagu vormi tag sisend tag. Aga põhilisemalt on kõik teeme võimendamisega meie arusaamist HTTP ja asjaolu, et vormid lõpuks muuta Mis on URL brauseri ja nii, seega saame mehaaniliselt anda oma panus server tehes HTML vormi ja teades et server mõistab HTTP, just nagu meie keha mõistab, nagu raputades oma käsi, et sama protokolli, ja nii me saada tagasi vastus et me lõpuks oodata. 

Nii proovime teha ühe Viimane asi, mida nüüd mobiil ja ma make-- Ma lisan See kood slaidid. Nii et kui soovite käpard, siis saab kindlasti võtab ta sealt. Aga ma lähen käia ja teha ühte asja. Ma lähen edasi minna ja avada minu indeks page-- Tema lehele nagu enne, millest on palju seda faux-ladina teksti või mõttetu Ladina teksti ja has-- see näeb välja selline selles kirjas. Aga lubage mul minna ja seda teha. Ma lähen minema Cloud9. Ja sa ei pea seda sammu. Ma lihtsalt teen seda ise. Ma lähen klõpsake Jaga. Ja see on omadus lihtsalt on Cloud9, mille Saan keskkonda avalik. 

Ja just huvides demonstratsioon, lubage mul seda teha. Ma lähen avalduse esitada avalikkusele. Pange tähele, see on hoiatus mulle, olen Ma tõesti tahan seda teha, sest see saab teha igaüks maailmas, kas nad nüüd siin või videot vaadates hiljem Internetis näha, mida ma näen. Aga see on OK. Ma ei ütle "Valmis". Ja las ma kutsun teid, kui ma See correctly-- las ma katsetada seda esimesena. Lase käia, kui sa ei mind-- brauseris arvuti mine selle URL ja loodetavasti näete oma ladinakeelse tekstiga. Ja peab olema selge, et see on töötab mitte minu sülearvuti. See pilv. See on Cloud9, sõna otseses mõttes, vaid Olen teinud minu tööruumi avaliku nii et igaüks internetis ei pääse oma Ladina kodulehekülg. 

Mine sama URL telefoni kui saaksid. Kui see saab teile maksma, aga sa lihtsalt vaadata üle õla. Publik: [kuuldamatu] DAVID J. Humala: Vabandust? Publik: [kuuldamatu] DAVID J. Humala: Just ladina sõnad. See on kõik. Aga see, mida sa peaksid nägema. 

Publik: Jah. DAVID J. Humala: Jah. Jah. OKEI. Nii saan ma hoida oma telefoni hetkeks? Niisiis, loodetavasti, kui te pole oluline see, see peaks välja nägema peaaegu loetamatu. See on still-- Ma mõtlen, see on loetamatu sest ladina keeles. Aga see on ka loetamatu mida muul põhjusel? Nagu, mida rahulda teid selle kohta? Publik: See on väike. DAVID J. Humala: See on super, super väike. Niisiis, kuidas me saaksime seda parandada? See on super, super väike Victoria telefoninumber ja kui olete tõmbas see ise üles, ilmselt väike telefoni ka, kui sa on hõlbustussätted lubatud. Mis see on? Sa võid lihtsalt näputäis ja zoom, mis on toimiv, aga siis näed ainult paar sõna korraga. Nii oodake minut. Ma tean, kuidas seda parandada. Right? Ma võiks kasutada CSS, ja ma ei muuda fondi suurus on 12 punkti 24 punkti. Aga kõrvalmõjuks, et Loomulikult saab olema nüüd, töölaual või sülearvuti, Nüüd tekst on kaks korda suurem. Ja nii see oleks omamoodi tore eristada seadmete ja selgub, et viise, kuidas seda tehes. On mitmeid erinevalt, tegelikult mille abil CSS ja Kasvataja omadused et me ei hakka väga täpselt, saab sisuliselt päringuid brauser ja öelda, kui teie ekraan on väiksem kui see palju piksleid, kasutada seda fondi suurust. Kui ekraanil on suurem kui see palju piksleid, kasutage seda teiste fondi suurust. 

Võite olla isegi Kasvataja ikka. Kui olete kunagi käinud veebilehe, et lauale, on suur menu äkki välja, et küljele ja kogu sisu on külje et menu-- see on mingi ühine paradigma. Menüü vasakul, sisu paremale või vastupidi. Tegelikult ei tööta mobiil, kui teie ekraan on ainult see palju pikslit lai. Nii sagedamini mobiil on, oma menüü äkki saada lagunes, ja sa pead Klõpsake nuppu, et näha seda, või veebilehe paneb menüü kohal ja pane sisaldus alla selle. Ja saab rakendada neid asju mitmel moel ka. Te võite paluda oma programmeerijad, hei, meeskond, igal ajal näed HTTP taotluse Android seade, Microsoft seade, Google seade, Apple seade, kasutage seda tähesuurust ja kasutada seda menüükujundusele või siis kasutada seda vaikimisi suurem paigutuse. 

Nüüd, kasutades seda, mida põhiline meetod täna võiks insenerid kasutada teada, kas see on iPhone, Android telefon, sülearvuti, töölaua külastate ettevõtte server? Kus nad saavad seda teavet? 

Publik: Header? 

DAVID J. Humala: Jah, HTTP päise kaudu. Nii et iga HTTP taotluse pärit nende kliendid oma servereid hulka, sees, et virtuaalne ümbrik, terve hunnik HTTP päiseid, millest üks on brauseri ja operatsioonisüsteemi isegi, kui sa hoolid et detailsuse. Nüüd on segasena suunatud string, kuid on olemas tarkvara, mis lihtsalt lihtsustada, et, ja te saate lihtsalt küsida programmeerimise code-- PHP, Java, C ++, whatever-- mida telefon on see-- Mis seade selle kasutaja kasutab? Ja siis saab öelda, näidata neile seda versiooni veebilehel, kui see on telefon. Näita neile see versioon veebilehel, kui see on sülearvuti või lauaarvuti. Aga sa ei pea isegi serveripoolse keerukust. Seda saab teha isegi kõige lihtsamaid asju. 

Ma teen seda. Ma lähen edasi minna sisse minu Cloud9 keskkond ja ma lähen lisada tag et nägid Google varem. Seda nimetatakse meta. Ja ma ei mäleta seda lugu, mistõttu Ma lähen transkribeerida siin. Meta name = "vaateava" ja seejärel content = "width = seade laius intital skaala = 1 "ja see on kõik. 

Nii et see võib samuti olla nagu maagiline loits. See pole veel kõik, et selge, kuid see on midagi pistmist vaateavalt ja vaateakna on lihtsalt keha veebilehe ristkülikukujuline piirkond, mis määratleb kõige lehel. Ja see on lihtsalt ütlen brauser, tead mis? Tee laius see leht tõhusalt võrdne seadme laius. Teisisõnu, ei saa eeldada, et sul on mingi piiramatu ruumi. Oletame, et sul on vaid nii palju ruumi kui seade ise on suur. Ja nii nüüd, kui ma uuesti seda minu brauser ei näe ma muutusi. Aga kui ma seda correctly-- ja andke mulle risti minu fingers-- kui te kõik reload oma telefonid, sa vaata kaalukaid muutus? Jah, on selle-- 

Publik: [kuuldamatu] DAVID J. Humala: Jah. OKEI. Nii vaieldamatult loetavamaks nüüd? Ikka väike, kui aus olla, kuid mitte nii väike, et see oleks hallata. Ja ma võiks kindlasti alistada see edasi CSS või serveri poolel, kuid üha enam, mida sa nägemine on rohkem ja rohkem funktsioone lisanduvad kliendipoolse environments-- JavaScript kui me arutada Homme, CSS ja HTML-- nii et kõik need päringuid saab teha kliendi nii, et vaeva server palju vähem ja mitte on kursis, sest Näiteks pidev rünnakut Uute operatsioonisüsteemidega versioonid, uus brauseri versioonid. Sa võid lasta brauseri küsi seade, kui suur sa oled, ja seejärel teha mõnevõrra loogiline põhinevaid. Aga me näeme rohkem võimalusi loogiline otsused Homme kontekstis programmeerimiskeelt. 

Nii tekib küsimusi, siis veebi arengut? Täna ei ole veebi programmeerimine kohta se, sest enamik kõike tegime oli väga esteetiline, kui soovite. Ei ole otsuse tegemisel kood, mis me oleme kirjutanud, ja nii sellepärast HTML on juurdehindlus keelt, mitte programmeerimiskeelt. Aga homme me võtame Kiire pilk lõpuks kell JavaScript, mis on tegelik programmeerimine keel, mis võimaldab meil teha natuke rohkem. 

Kas küsimusi on? Noh, lubage mul kaks ettepanekut võimalusi vabatahtlik kodutöö. Üks on-- need Cloud9 kontode ei aegu. Sa oled teretulnud kasutama neid käpard. See on vaba tasemel teenust. Aru, et kui luues oma tööruumi, sa tegid seda avalikult, mis ei tähenda, et keegi on Internetis saab näha, mida sa kirjutad. Ehk lihtsalt kaaluda ei piinlik ennast kui sa oled pannes oma esimese veebi lehekülje seal avalikult kogemata, kuid keegi läheb tean, et otsida seal niikuinii. 

Ja two-- lase mul Toss kuni see URL samuti, eriti kui sa tulid täna Veidi vähem mugav kui teised, kindel, mida kõik see värk tähendab. Aru, et palju selle video, mis on nii hea võimalus uinuda ja ka naerda, kui Seejuures on ka palju societally huvitav ja turvalisusega seotud arutelud selles John Oliver, kuigi koomik. 

Aga kui ei ole nimetatud, mis viib meid vastuvõtt. Miks ma ei lülita muusika. Seal peaks olema joogid ja suupisted väljaspool. Ma olen õnnelik, et segama nii Niikaua kui inimesed sooviksid, vastata küsimustele enam üks-ühele. Aga muidu, sa oled teretulnud stardi mis tahes punktis, ja me näeme jälle Homme hommikul natuke rohkem. Olgu, aitäh.