DAVID J. Malan: Bone. Ni estas reen. Do, la celo de tiu lasta kunsido estas enkonduki kelkajn pliajn konceptojn sed ankaŭ donas ĉiuj ŝancon al speco de etendos viajn fingrojn kaj efektive fari ion iom manoj-sur. La celo ne turni ni ĉiuj en ttt programistoj iel sed vere nur doni al vi guston de iu el la fundamentaj konstruoj de kio iras en retejo programado kaj hodiaŭ retejo disvolviĝo, tial la statika flanko de things-- neniu logiko, sen programado lingvo, nur statika enhavo. Kaj ĝi donos al ni ŝancon reale vidi kion retservilo estas, vidu kio HTML dosiero, vidas ĝi estas HTTP estas efektive servanta supren. Sed antaŭ ol ni plonĝi en, ia retrospektiva demandoj pri cloud computing aŭ sekureco aŭ io intere? Ne? Bone, nu, ni ordonu, ĉiaokaze la procezo de subskribanta supre por ion prenas kelkajn minutojn. Ni lasu lin fari ĝin en la fono. Antaŭen, se vi povus, al tiu retadreso here-- c9.io. Jen triaj service-- platformo kiel servo, se vi will-- kiu tuj invitos vin subskribi por rakonto, kaj ĝi tuj donas ĉiun el vi konton en la tn nubo sur aliulaj infrastrukturo, entrepreno nomita Cloud9. Sed kio estas agrabla pri tio estas ke ili donas vin proksimuma kalkulado de fakta reala mondo evoluo medio, kvankam en la nubo kaj per foliumilo, kaj ni uzos ĉi reale eksperimenti iom hodiaŭ. Kaj poste iru antaŭen kaj nur navigas via vojo al la signo-supren procezo se vi povus. Do ni hazarde uzas tiun en la klaso Mi instruas pro ĉiuj niaj studentoj, ambaŭ sur campus kaj ekstere nun, kaj ĝi estas anstataŭita kio historie Estis alie elŝuteblaj programaro. Do kion vi gajni aliro al estas unu el tiuj virtualaj maŝinoj, esence, ke mi priskribis antaŭe. Do tiu entrepreno Cloud9 verŝajne rentojn de tria party-- ja tiukaze, Google-- tuto faskon de virtualaj maŝinoj ke iel haki sur la iluzio de individuaj serviloj ke ĉiu el ni havas plenan kontrolon super. Ĝi ne estas sufiĉe preciza diri ke ili estas virtuala maŝinoj, kvankam, pro kio Cloud9 fakte uzas Estas iom pli nova teknologio nomita containerization. Kaj lasu min ekpreni tiun bildon tie pentri tiun bildon. 

Ujo estas, se vi memoras la bildon el antaŭe, iom pli hela pezo ol virtuala maŝino. Fakte, dum la lasta tempo ni parolis pri ekzistas esti mastruma sistemo kaj hypervisor kaj tiam gasto mastruma sistemo, gasto mastruma sistemo, gasto mastruma sistemo, aldone al via fizika aparataro, la diferenco kun ĉi nova teknologio, containerization, estas ke ili ĉiuj iel dividas la sama mastruma sistemo. Sed ili ankoraŭ kreas la iluzio de ĉiu havi sian propran ekskluzivan administraj rajtoj kaj dosieroj sur la servilo. Sed estas malpli programaron inter vi kaj la aparataron. La rezulto de tio estas, en teorio, pli altan rendimenton, ĉar vi uzas aŭ malŝpari malpli rimedoj en tiu tielnomita virtualización tavolo. Do tiu estas vokita containerization nature tra teknologio nomita Docker, kiu estas tre venanta en lia propra. Kaj tiu estas iu kiu inĝenieroj ĉe via entrepreno povus ia speco de komenci parolanta pri baldaŭ se ili ne jam, kvankam ekzistas certe neniu kialo salti sur ajna bandwagons. 

Do kun kiu diris, kio vi probable vidos nun Estas ekrano kiu aspektas iom kiel tiu. BONE. Kaj simple nomas min se ne. Kaj se so-- mi venu se ne. Antaŭeniri kaj klaku ke granda plus krei laborspaca, kaj vi vidos ekranon kiel tiu. Vi povas voki la laborspaca nomi ion vi deziras nun. Kaj nur reale por simpleco, iri kaj-- bone, kelkaj el vi jam havas workspaces. Nomu ĝin kion ajn vi want-- negoco, Harvard, ĵaŭdo, kiom vi deziras. Vi ne bezonas priskribon. Vi povas lasi ĝin privata, se vi jam havas faskon de workspaces. Se vi devis fari ĝin publika, tio estas bone por hodiaŭa celoj. Tie, ankaŭ, estas unu el la upsells. Vi ricevas unu privata laborspaca per defaŭlta. Sed se vi volas pli, Vi devi pagi pli. Alie, ili devigas vin fari vian laboron publiko. Sed tio estas bone, ĉar ili ankaŭ celi tion de malferma-fonto komunumoj por instigi homojn fakte kunlabori. 

Kaj la lasta afero, ke estas grave, tamen, estas, post vi elektas nomon kaj post vi elektas privata aŭ publiko, klaku HTML5, la granda oranĝkolora piktogramon dua de maldekstre, kaj Tiam klako Krei Workspace. Kaj ĝi probable preni minuton, sed vi tiam havas medio, iam vi fari tion, kiu aspektas memoras kion mi havas sur la ekrano tie nun. Sed, denove, ĝi povus preni momenton aŭ pli por atingi tiun ekranon iam vi klakis Krei Workspace. Sed nur denuncas min se vi ŝatus mi preni rigardi ion aŭ konsili. Bone. Do mi tuj fono tion por nun. Voku min se vi ŝajnas havas teknikajn malfacilaĵojn. Sed, denove, ĝi povus preni iomete por ke malfermi. Kaj ni iru antaŭen kaj parolado pri kio ĝi fakte signifas fari retpaĝon, kion HTML estas, kaj kiel ĉio ĉi nun interkonektas kiel ni startanta por fakte uzi iuj de la teknologio. Do rezultas ke mi povas iri sur mia malgranda Mac tie, malfermu simplan programon nomitan TextEdit, aŭ sur Vindozo mi povis malfermita iu nomita Notepad.exe. Kaj mi povis nur simple fari ion kiel this-- "saluton, mondo." Kaj tiam mi povis savi tion kiel hello.txt Do neniu magio ekzistas. Tio havas nenion komunan kun ttt programado, nenion fari kun HTML. Nur kreante simpla teksta dosiero. Sed rezultu ke ttt paĝo estas laŭvorte nur tio. Ĝi estas simpla teksta dosiero enhavanta tekston ke vi povus tajpi en via klavaro, sed tipe sed ne ĉiam finiĝas ne .txt sed .html aŭ .htm. Kaj vi ne nur tajpas vortojn en la dosiero. Vi vere devas uzi aĵoj nomata etikedoj aŭ, pli ĝenerale, io nomita markado lingvo. 

Do mi tuj tre rapide tajpi kaj tiam klarigi la sekvan. Mi tuj unuajn tajpi ĉi, kiu diras: hey, retumilo, tie venas retpaĝo skribita en HTML. Kaj tiujn du aferojn kune diri, hej, retumilo, jeno estas ja HTML. Hey, retumilo, jen venas la kapo aŭ la supro de mia paĝo. Hey, retumilo, ene de la supro de mia paĝo, metita titolo kiu estas "saluton, mondo. " Hey, retumilo, post la kapo de mia paĝo, tie venas la korpo de mia paĝo. Kaj, hej, retumilo, la korpo de mia paĝo devus ankaŭ diri, "saluton mondo." Do kio estas la elstaraĵo detalojn ĉi tie? Tiu estas kio estas ĝenerale nomita doc-tipo deklaro, kaj, sincere, ĝi estas iom malfacile parkerigi tiun unue. Vi nur speco de kopii-alglui ĝin. Tio estas la formala maniero diri, hey, retumilo, Mi uzas HTML- versio 5 kiu elvenis iom ĵus. Ĝi estas magia sorcxkanto ke iuj homoj kun malriĉa sento de dezajno decidis meti en la plejsupro de la dosiero. Kvankam ĝi estas iom arkaikaj, jen ĉio ĝi means-- hey, retumilo, tie venas kun la versio 5 de HTML. 

La resto de ĉi tiu estis kun ni por iu tempo nun, historie, sed jam pasis evoluis, kaj ĝi estas verŝajne ricevas iom pli simpla. Rimarki kelkajn trajtojn kion mi reliefigis. Ekzistas tion kun angled brackets-- maldekstren krampo kaj la dekstra krampo. Kaj rimarki la simetrion tie. Kaj per simetrio, mi volas diri, kiel mi havas tiun komencon etikedo tie aŭ malferma etikedo se vi volas, cxi tie mi havas fermi etikedo aŭ finon etikedon tio malsamaj nur en la mezuro kiu havas ĉi oblikvo komence de la vorto HTML. Kaj vi povas pensi tiun mi estis indiferente proponante antaŭe, hej, retumilo, tie venas iu HTML. Kaj inverse, hey, retumilo, tio CXu pri la HTML-- komenco kaj fino. 

Dume hey, retumilo, tie venas la kapo de mia paĝo. Hey, retumilo, tio estas por la kapo. Hey, retumilo, jen la korpo de mia paĝo. Hey, retumilo, tio estas por la korpo. Kaj ene de tiu estas iuj arbitra teksto nun. Kaj ene de la kapo, dume, Estas iu arbitra sed etikeditaj, tiel diri, teksto kiu diras, la titolo de mia paĝo estu "saluton, mondo." Nun, nuntempe, oni povas supozi ke retumiloj havas only-- aŭ, pli ĝuste, retpaĝoj havas nur du parts-- la kapo kaj la korpo. Kaj la kapo estas ĝenerale nur kiel la menuo trinkejo, la aĵoj vere nur ĉe la supro. Kaj la korpo estas la intestoj de la paĝo, ĉio en tiu granda rektangulo kiu plenigas la ekranon. Do mi tuj iros antaŭen kaj fari tion. Mi tuj iros antaŭen kaj alklakas Konservi, Dosiero Konservi. Kaj mi tuj savi tiu kiel hello.html, kaj mi simple tuj metu ĝin sur mia labortablo. Kaj mi tuj iros antaŭen kaj klaku Save. Kaj notice-- mia Mac ĉe Almenaŭ estas kriante al mi. Ĉu vi certas ke vi volas fari tion? Kaj mi tuj diros, jes, uzi HTML. Mi scias pli bone en ĉi tiu kazo. Kaj nun mi tuj iros al mia labortablo kie mi havas tiun dosieron subite. Kaj mi tuj duobligi-klaki ĝin. Kaj vi rimarkos ke, Defaŭlte, Chrome malfermiĝis. Tio estas ĉar tio mia defaŭlta retumilo. Kaj ĝi simple diras, "saluton, mondo." Sed diras "saluton, mondo "en du lokoj. Rimarki supre maldekstre. Sufiĉe malfacile preterlasi tion. Estas granda kaj aŭdaca. Kaj kie ajn ĝi ŝajnas diri, "saluton, mondo"? 

Spektantaro: La langeto. 

DAVID J. Malan: Jes, la langeto mem. Do kiam mi diris la kapo de la paĝo estas ĉio supren top-- kaj ĝuste ĉi tiu estas la titolo. Estas nur en la langeto tie. Kaj mi povas tiri tiun langeto eksteren por ne konfuzi. Tiu estas nur unu langeto nun, kaj ja vidas "saluton, mondo" ĝis ĉi tie kaj "saluton, mondo" malsupren tie. Tiel bela simpla. Sed estas ankaŭ sufiĉe simpla. Kaj, fakte, mi zomis je. Mi povas ŝanĝi la tiparon grandeco nur altigi por alirebleco. Sed ni nun faros ion iom pli interesa. 

Mi tuj go-- whoops, lasu Mi reiros al mia tekstdosiero. Mi tuj revenos al mia teksta dosiero, kaj mi tuj ŝanĝi tion kaj diri "Saluton, Disney World." Savi. Kaj reiri al mia retumilo kaj klaku Reŝarĝi. Kaj nun, kompreneble, ĝi diras "Disney World." Kaj mi tuj artefarite zomi en nur tiel ĝi estas pli facile vidi. Do nun, bedaŭrinde, mi specon de volas to-- fakte, jen Mac karakterizaĵo. Mi volas alklaki Disney Mondo kaj iri #ie kiel disney.com, sed tio ne funkcias. Tiel baza dogmo de la retejo estas hiperligiloj, ligoj kiuj iras aliloke. Do kiel mi faru tion? Nu, mi povus simple diri, "Saluton, http://www.disney.com." Savi tiun. Reŝarĝi. Sed tiu ankaŭ ne traktata. Kaj kio estas bela ĉi tie, eĉ se tio ne funkciaj ankoraŭ, estas ke ĝi similas ke la retumilo laŭvorte nur faras kion mi diros ĝin fari. Do se mi nur tajpas URL tiel, ĝi estas nur tuj montros al mi la adreson. Mi bezonas uzi etikedoj aŭ markado lingvo efektive diri la retumilo fari eĉ pli. Do mi tuj iros antaŭen kaj forviŝi ĉi momente. Kaj mi tuj diros, hej, retumilo, starti ankron tie, ligilon por tiel diri. Kaj la hiper-referenco, la destino de tiu ankro, estu tiu URL. Kaj rimarki mian citaĵoj. Mi povus uzi solan citaĵoj, tro, sed vi devas esti konsekvenca, kaj mi ĝenerale nur uzas citiloj teni ĝin simpla. Rimarku mi tuj fermi la etikedo. Kaj tiam ĉi tie mi iras diri, "Disney World." Kaj nun mi bezonas symmetry-- malferma krampo, / al, fermita krampo. 

Do kion mi enkondukis? Ni havis kelkajn etikedoj jam. HTML, kapo, titolo, Korpo, ĉiuj etikedoj, por tiel diri, kun malferma kaj fermita ekvivalentoj. Sed rimarki, ĉi tiu estas speco de fundamente malsamaj. Jen kion ni nomas en HTML atributo. Kaj atributo estas nur klavo valoro paro. Tiu estas komuna afero en komputilo science-- ŝlosilo valoro paro. Ĝi estas speco de la ilo de la komerco. Ŝlosila kaj valoro. Vorto kaj tiam iuj alia vorto aŭ vortoj. Kaj en tiu kazo, la ŝlosilo estas href, kaj la valoro estas tiu plena URL. Kaj kio atributo faras estas ĝi influas la konduton de etikedo. Kaj en ĉi tiu kazo, ni bezonas influi la konduto de la ankron etikedo, ĉar ni bezonas ankrumi tiu ligilo al ie. Kaj kiel vi faros tion estas tra la atributo. 

Do mi tuj iros antaŭen kaj savu la dosieron nun. Reiru al mia retumilo kaj Reload. Kaj, voila, ni nun havas la komencoj de legitima retpaĝo. Super-simpla, sed se mi ŝvebi super this-- rimarki en la fundo-maldekstra angulo, ĝi estas super-malgranda. Sed vi vidos www.disney.com. Kaj se mi klakas ĝin, ja tiu whisks min for al disney.com. Nun, la kurioza afero tie estas ke ĝi estas ne la best-- la plej comercializable URL, sed tio estas bone ĉar ĉi dosiero ne ekzistas sur la TTT. Ekzistas kiel loka dosiero en ŝajne mia Uzantoj directory / jharvard-- John Harvard-- / labortablo. Sed ĝi havas URL. Ĝi nur hazarde estas loka. Bedaŭrinde, neniu el vi povas viziti tiu, ĉar se vi tajpas ĉi URL vi estus rakontanta via retumilo, serĉi dosiero nomata hello.html sur via malfacila stirado. Kaj, kompreneble, se vi havas estis sekvante kune permane, ĝi ne tuj ekzistos tie. 

Do tio estas bone. Ni ankoraŭ bezonas manieron, finfine, akiri tiun dosieron en la reto, sed ni turmentus aparte kelkajn sekureco implikaĵoj de kio ni ĵus vidis kaj ligi ĝin al la pli frua diskuto de ĉimatene. Ĝi rezultas ke, se retumilo laŭvorte simple faras kion mi diras ĝin fari, kaj ŝajnas esti la kazo ke ankron etikedo influita de la valoro de ĉi atributo nomata href sed montras ĉi teksto, tio ŝajnus implici ke mi povus meti la URL en ambaŭ lokoj kaj tiam reŝarĝi kaj nun vidas la URL kaj iri al la URL. Avizo, se mi ŝvebi super la malsupro-maldekstran, Mi ja iros ankoraŭ al disney.com. 

Do se vi iam estis phished-- P-H-mi-S-H-Kaj-D-- kun unu el tiuj falsaj retpoŝtojn de kiel PayPal via banko, vi probable alvenas ligiloj interne de la retpoŝton ke vi legas ke rakontas al vi klaku ĉi tie por konfirmi vian pasvorton aŭ konfirmi vian naskiĝo aŭ socia aŭ io socie inĝenierio vin malkaŝi informo. Nu, mi povus ia preni avantaĝo de tio, ne povis mi? Mi povus diri ion kiel, www.paypal.com. Kaj anstataŭ disney.com mi povus iri al, kiel, badguy.com. Reŝarĝi. Kaj kiel facile estas por trompi, precipe ne-teknika leganto aŭ cursorily legaĵo leganto ol alklaki ligilon kiel tiu, kiu, se mi klakas it-- Mi vere ne volas iri badguy.com. Mi ne scias kio estas reale ekzistas. Tiel paypal.com, avizo, estas kion diras ŝin tuj, sed kompreneble, se mi rigardas malsupren super-malalta, ĝi estas iom neklara, sed diras badguy.com. Tio estas la sola diri nun ke mi iras al la malĝusta loko. Kaj kiam mi diris antaŭe, ke bankoj vere ne devus kuraĝigi aŭ trejni uzantoj en klakante ligojn, tiu Estas nur unu manifestiĝo de ĝi. Kaj ĝi estas simpla. Vi nun kontraŭulo se vi fari ion kiel tiu kaj provi trompi uzanto en vizitante vian retejon. Sed nuntempe, ni konservos aferojn bela kaj pura. Ni tuj iru antaŭen kaj malantaŭenigi tiujn ŝanĝojn. Reŝarĝi la paĝon. Kaj mi reiros al disney.com. 

Ni vidu se ni ne povas turmentus ĉi dise iom pli. Do "saluton, Disney World." Mi tuj diros tie. Eble mi tuj faros iu ĉambro. "Ni esperas ke vi ĝuos vian restadon!" Savi. Reŝarĝi. Ĝi ne rea-- tio ne kion mi celas, ĉu ne? Mi volas diri, se mi traktas mian tekston dosieron kiel vorto procesoro, kion vi esperas okazus tie? Yeah, Mi sentas ŝatas devus esti linerompo tie, do ĝi sentas kalesxo iel. Sed tio vere intenca, ĉar kiel antaŭe, la retumilo estas nur iranta do kion vi diros ĝin fari. Mi ne sciigis lin rompi liniojn. Mi ne sciigis lin moviĝi malsupren, eĉ kvankam, intuicie, mi sentas kiel mi faris. Do rezultas ni bezonas iom pli markado, kaj mi tuj ripari tion kiel sekvas. Mi tuj antaŭparolo tiun unuan saluton kun kio nomiĝas paragrafo etikedo. Kaj tiam mi iros por antaŭeniri kaj envolver tiu alia frazo en alia alineo etikedo, kvankam ili estas super-mallongaj alineoj. Nun mi iros por savi. Reŝarĝi. Kaj nun ni havas tion spaco, kaj ni ia havas la semantiko de du apartaj paragrafoj. 

Jen ĉio bone kaj bona, sed farus agrabla aldoni bildon al tiu paĝo, do mi tuj iros serĉi Mickey Mouse en Google Images. Kaj simple por amuzo, mi estas tuj kapti tiun bildon. Mi tuj iros antaŭen nun kaj ekpreni la URL de ĉi tiu bildo, kvankam ekzistas malsamaj rimedoj por tio. Nuntempe, mi simple tuj kopii la URL. Mi tuj reiri en mian tekston dosiero, kaj mi tuj diros tie, img src = citaĵo unquote ke URL, ekstra-longa. Kaj tiam la nocio de bildo estas iom malsamaj. Ekzistas vere neniu nocio de startanta bildon kaj finante bildon, kiel komenco tag finon etikedon. Do ĝi sentas iom stranga al mi semantike fari tion, havi proksiman-bildo etikedo. Ĝi ne malĝusta. Ĝi estas perfekte ĝusta, kaj ĝin instigis, sed estas stenografio skribmaniero. Mi povas ia samtempe malfermi kaj fermi la sama etikedo, kaj kiu faros la retumilo feliĉaj. Do estas nur iomete pli konciza por aĵoj ke koncepte vere ne sencon al komenco kaj fino. Ili simple estas tie, aŭ ili ne estas. 

Do mi tuj savi ĉi kaj reiru al mia "saluton, mondo" paĝo kaj Reload. Kaj ĝi estas iom ekstere de kontrolo, ĉar tiu bildo estas fakte iom granda, sed tio estas bone. Mi povus regrandigi ĝin en programo. Aŭ vi scias kion. Nur pruvi, mi estas tuj reale diri ke la larĝeco de la afero devus nur 200 rastrumeroj, 200 punktoj. Lasu min antaŭeniri kaj savi kaj reŝarĝi, kaj nun la paĝo aspektas iom pli racia. Sed rimarki la mastron. Nu, mi ia instruis vin ĉiujn de HTML iusence, almenaŭ koncepte, ĉar ĉiuj HTML estas estas tiuj tags-- malfermitaj etikedoj, fermitaj etikedoj, kaj ecoj ke modifi sian konduton. Kaj, ŝajne, ĉiu etikedo povas havi nul aŭ unu aŭ du aŭ pli atributojn, ĉiu el kiu faras iun iom malsama. Nun, kiel vi scias, kio ekzistas? Aŭskultu do iu kiel mi diras al vi, kio ekzistas, aŭ vi simple Google ĉirkaŭe por lernilo en HTML, kaj ĝi vere estas tiu simpla. 

Vere, kiam mi estis studentoj de jaroj kaj lernis HTML, unu el miaj matematikaj instruado helpantoj ĵus pasigis iomete da tempo Tutoring mi cxar kiel duonhoro, horo, kaj tiam mi estis sur mia vojo. Mi estis sur mia vojo al faranta la plej malbelega retejoj ĉiam, kiu, ŝajne, mi ne vere progresis preter. Sed la punkto estas ke, kiam oni kompreni tiujn simplajn ideas-- se arcano text-- sed tiuj simplaj ideoj komenci penso kaj fermante penso, tenanta ĉio bele balancita, rigardante ion, modifante la konduton de tiu etikedo, jen vere ĉiuj oni devas ĝin. Kaj fakte, se ni nun iru al io kiel google.com-- fakte, ni iru lokon iom pli reasonable-- stanford.edu. Kaj mi tuj iros al Rigardu, Developer, Vidi Fonto. Ĝi estas malbela, sed notice-- kaj mi zomi en avizo iuj aĵoj estas familiara jam. Ekzistas ĉi tie, kiu estas retumilo. Jen venas HTML5. Tie estas HTML. Ŝajne, ekzistas atribui mi ne uzi kiu specifas la lingvo de la paĝo, kaj tiu povas helpi kun aŭtomata traduko kaj da tio. Jen la kapo de la paĝo. Jen la titolo de Stanford pagxo. Ekzistas etikedo mi ne paroli pri yet-- Meta etikedo. Ĝi estas nur ia fono informo. Ĝi helpas kun SEO, aŭ serĉo-motoro optimization, aŭ Google-serĉrezultoj aŭ similaj. Sed se ni plenumas rigardante, Teni rigardante, jen la Korpo etikedo. Kaj estas aroj da aliaj etikedoj ni ne parolis pri ankoraŭ. Sed Div estas el unu divido de la paĝo. Estas kiel nevidebla rektangulo se ia volas mense dividu vian paĝon al malsamaj unuoj rete. Kaj tiam multa divs mi vidu, iu nomita Klaso, sed ni revenos al tio. 

Jen interesting-- Formoj. Formoj estas ĉiuj super la araneaĵo. Ajna sercxilo vi iam uzata estas formo. Kaj, do, ni vere vidos. Formo. Agado. La agado de tiu formo, por kiaj historiaj kialoj, estas tiu URL. Metodo estas "post." Rezultas ke HTTP petojn povas uzi la verbo "preni" kiel ni vidis antaŭe, aŭ "post." Kaj vidos diferenco de tiu en momento. Ni vere vidos, kia estas. Lasu min reiri al Stanfordo pagxo. Kia estas ili parolas pri, vi pensas? Kio elsaltas ĉe vi? 

Spektantaro: Serĉu skatolo. 

DAVID J. Malan: Jes. Tiel supre ĉe la supra dekstra jen tiu Serĉu skatolo. Kaj tiel ili implementado it-- a etikedo jen laŭvorte malferma-krampo formo. Kaj tiam ni serĉu ion. Ni serĉu por amikon de mine-- "Nick Parlante." Eniri. Kaj kompreneble, ĝi iris al iomete malsaman URL. Lasu min reiri tien. Ni serĉu por "kursoj". Damnu ĝin. Iris al malsama retadreso. Do, Stanfordo la aldonanta kelkajn magiajn ke ili ne prenas al mi la URL ke ni vidis en la ago atributo tie. Sed tiun formon ĉi tie estas implementado pure tra ĉi markado tie, tiuj etikedoj. Fakte, jen la enigo por la tipo de serĉo kiun vi volas. Tie estas la enigo al alia tipo de serĉo. Tie estas la enigo al la kordo mem. Do la celo ne volvi niaj mensoj ĉirkaŭ ĉiu el tiuj etikedoj sed nur por vidi. Ĝi simple malfermante kaj fermante etikedoj kaj rigardante aĵojn. Yeah? Victoria? 

Spektantaro: [inaudible] DAVID J. Malan: Bona demando. Ke estas iom pli delikata vidi. Lasu min reveni al tiu demando en nur kelkaj minutoj Kiam ni rigardas ion nomatan CSS, aŭ akvofalo stilo littukojn, kaj ni povas provi konkludi tiel de la paĝo. Do se ni nun rigardu google.com, ni vidu kion lia paĝo aspektas. Vi they're-- jen bela hodiaŭ. BONE. Ĉiuj farita. Bone, do View Source. Vi pensus Google vere bela fontkodo. Do, ŝajne, kio okazas ĉi tie? Kaj fakte, tio ne eĉ HTML. Tio estas io nomata Ĝavoskripto. Kaj ni plu iri kaj iri. Mi eĉ ne scias kie la paĝo komenciĝas. Mi tuj uzos Komando F, malferma krampo HTML. Bone, tie ĝi estas. Mi trovis la komenco de la paĝo, kaj estas tiom da aĵoj en ĉi tie. 

Kio fakte okazas? Nu, vi scias kion, ni povas purigi ĉi supre. Se mi anstataŭ iri al tiu Inspekti ilobreton, tiu speciala diagnoza ilo, Kaj ne komunikigxu al Network, kie ni daǔre iranta hodiaŭ, sed se mi iras al Elementoj, kio estas vere bela estas ke retumilo havas multajn multe pli bone okulojn ol mi. Kaj la retumilo povas legi ke salaton de retpaĝo, ke HTML poŝto ni ĵus rigardis, kaj ĝi povas analizi ĝin aŭ legi kaj analizi ĝin kaj reformatear ĝi en bela homa-amika maniero. Do kion mi vidas nun en tiu ekrano tie sub Elementoj, la ĝusta sama enhavo, sed ili dentado ĉio, ili jam colorized ĝin, sed ĝi estas la ĝusta sama teksto ke mi elŝutis de la servilo. 

Kaj kio estas bela hodiaŭ estas mi povas vidi en la korpo, por instance-- avizo, la paĝo estas ankoraŭ kunmetita de nur kapo kaj korpo, kaj mi povas hierarkie plonĝi en tie. Rimarku ke Google ŝajnas havi al divs-- ĉi tiu kaj ĉi tiu. Mi povas pligrandigi tion. Ekzistas tuta aro da aliaj divs. Do ĝi estas iom kompleksa. Sed atendi. Tio ŝajnas tiom pli legebla, relative, ol tiu. Kial Google hontinda sin per nur sendado tiu grandega katastrofo de kodo de iuj speco nur apliki ion kiu aspektas tiel simpla unuavide? Kiel, kial ne ili aldonos pli spacoj? Kial ne ili batis Enter kiel mi faris? Aspektas kiel bona mi trovis ĉe skribado retpaĝo. Mi batis Enter tiel diligente. Mi dentado do ĉio estas tiel bela kaj legebla. Kial Google ne praktikas la sama? 

Spektantaro: [inaudible] DAVID J. Malan: Bone. Tre bela. Ili ne havas iun persono ĉe Google permane ĝisdatigi la ĉefpaĝon anymore. Ĝi ne 1999 anymore. Do ili havas programaron. Ili havas aliajn ilojn kiuj generi dinamike ili estas HTML. Kompreneble, ke kodo estis skribita de homoj, sed la realaĵo estas, estas tute ĝuste diri, la retumilo certe ne gravas kiom senorda la kodo estas. Sed estas eĉ pli deviganta teknika kialo ke Google distribuas iliajn HTML kodo en tia fuŝa, ŝajne superforta maniero ĉiuj pakitaj kune kun tre malmulta bare malmulte en la vojo de formatting kiel mi faris. 

Spektantaro: [inaudible] 

DAVID J. Malan: Faster? Kial? Kaj kion vi diris, Lydia? Rapida? Kial rapida? Spektantaro: [inaudible] DAVID J. Malan: Estas neniu spaco por legi. Yeah. Do pensu pri kia spaco estas. Do ĉiu karaktero sur la klavaro prenas iu kvanto de spaco por reprezenti, ĉu fizike, kiel ĝi okupas tiom da spaco, aŭ iel sub la kapuĉo, kiu postulas memoro. Kaj kiel aside-- kaj ni paroli pli pri tio tomorrow-- ĉiu karaktero sur la klavaro tipe postulas 8 bitoj, aŭ unu bajto. Tiel mastro de 8 nuloj aŭ , aŭ nur 1 bajto, kiel ni homoj devus tipe diri. Do jen malgranda, sed ĝi estas ankoraŭ ne-nulo. Estas ankoraŭ iuj kvanto de spaco. Do se inĝeniero aŭ Google trafas la spaco trinkejo nur unufoje, kaj supozu Google-- estas super- popular-- supozu ke miliardoj da homoj viziti sian ĉefpaĝon tago, aŭ iu nombro da personoj viziti la hejmpaĝo de miliardo fojojn tage, kiom da aldonaj bajtoj havas tiun softvaristo nur kostis Google trafante sian spacon trinkejo tuj? 

Spektantaro: [inaudible] DAVID J. Malan: Ne tute tiel malbona. Nur unu bajto fojojn miliardo. tiel a-- Spektantaro: 8 miliardoj gigabajtoj. DAVID J. Malan: Ne 8 miliardoj. 8 miliardoj bajtoj. Sed 1 gigabajto. 1 gigabajto estus la unueco de mezuro. Se li aŭ ŝi faras du spacoj, 2 gigabajtoj. Tri gigabajtoj. Maljuste Ĝi grimpas peniga. Kaj tiel en kazoj kiel Google, kiu, donita, estas ekstremaj kazoj, estas aliaj aferoj kiuj ŝprucas simple farante tre racia decidoj aŭ prenante tre simplaj homaj agoj, ĉar ĝi havas tiun Pligrandigita efekton. Do unu el la kialoj tio aspektas tiel kunpremita Estas ekzakte kiel Viktorio said-- estis nur generita per komputiloj ĉiuokaze. Do neniu granda interkonsento. Lasu la retumilo elpensi. Sed ankaŭ konscie Ne havas multan spacon, ĉar la spaco ne estas necesa. Kaj la spaco reale kostas monon. 

Ĝi ĉu kostas tempon, ĉar nur puŝi ke multe pli da datumoj el google.com ĉefsidejo nur jam alvenis al iu kvanto de tempo, eĉ se ĝi estas milisekundoj aŭ mikrosekundoj, sed tio aldonas supren tiom da uzantoj, aŭ pli verŝajne, ĝi probable kostas monon. Google probable konektas al iu alia en la mondo, oni de tiuj skoltis punktoj, kaj se ili havas ia financa interrilato per ilia datumoj kostas monon, ili povus tiel minimumigi kiom datumoj ili estas kracxi sur ilian interretan konekton. 

Tial la amuza afero, kvankam, finfine, aŭ eble la trankviliga afero, estas ke eĉ kvankam tio aspektas terure blindiga, fine de la tago, ĝi estas ankoraŭ la ĝusta sama principoj kiel ĉi tre simplan paĝon de HTML paĝo. Tiel nur resumi kaj por ke vi havi kanona versio se vi ne sekvante nur laux elekto tie, tie povus esti la plej simpla el retpaĝoj, tial io ludi kun eble poste. 

Nu, ni enkonduki kelkaj aliaj ideoj nun. Ni pri enkonduki iu nomita stilo etikedo. Ni povas stylize ĉi paĝo en pli interesaj manieroj. Do dum HTML retpoŝto Estas ĉio pri markante supren la datumoj, ia preciziganta al retumilo kiel strukturi la datumoj, kie meti ĝin, CSS, aŭ kaskadan stilo littukojn, estas dua lingvo ĝenerale akiras kunmiksitaj kun HTML kiel ni see-- sed ni povas purigi ke en tia moment-- kiu prenas ĝi la fina mejlo kaj ĝi stylizes ĝin. Ĝi ricevas kolorojn nur rajto, la tiparo grandecoj uste, la posicionamiento ĝuste. Ĝi estas ĉiuj pri la estetiko aŭ formatado, ne pri la fundamentan datumon mem. Kaj la plej facila maniero por montri tio estas eble per ekzemplo. Do mi tuj transiru al mia simpla teksta dosiero. Kaj en nur momente, mi instruos vin marŝi nin tra la procezo fari tion mem. 

Mi tuj iros reen al mia dosiero tie kaj reŝarĝi la paĝon nur konfirmi kion gxi aspektas. Tio estas kie ni estas en nun. Mi sentas kiel infanoj ĝuus havi iun koloron al tiu retpaĝo. Do mi tuj iros tien en la kapo de la paĝo. Kaj mi tuj faros stilo, / stilo. Kaj tiam ene de tiu, mi tuj diri la korpo de mia page-- kaj ĉi formatado estas, unuavide, eble iom stranga sed convencional. Mi tuj diru, ke la fono koloro de ĉi paĝo devus esti verda. Kaj tio estas bedaŭrinde ia ne la plej bona dezajno. Rimarku ke antaŭe en la mondo de HTML, Mi diris ke atributoj estas tiuj ŝlosilaj valoro paroj. Io egalas citaĵo unquote "io." En la mondo de CSS, kiu estis desegnita de kelkaj malsamaj personoj, ili decidis ke, en sia mondo, ŝlosilo-valoro paroj estus vorto dupunkto ion. Do ĝi estas la sama ideo, kvankam. Ĝi estas asocii valoro kun iuj ŝlosilaj ke iel influas la konduton de tiu ĉi paĝo. 

Kaj vi versxajne povas diveni. Kio estas tio verŝajne iranta fari eĉ se vi neniam vidis HTML aŭ CSS antaŭe? Spektantaro: Ŝanĝi la fonkoloro. DAVID J. Malan: Jes, ŝanĝi la fonkoloro. Kaj specife la fonkoloro de la korpo. Sed koncerne la korpo nuntempe estas la TTT page-- estas la sola sub la titolo trinkejo really-- ĝi estas probable tuj influi la sama afero. Do ni vidu. Ni savu tion. Iri tien kaj reŝarĝi. Estas bela malbelega. Kaj kio daŭriĝas jen kromefikon. Mi nur elektis tiun bildon hazarde. Kial la verda ne penetrante malantaŭ Mickey? Spektantaro: [inaudible] DAVID J. Malan: Ĝuste. Ĝi rezultas ke bildoj, belaj multa ĉiuj bildoj kiujn ni uzas, ĉiuj rectangles-- de ortanguloj. Eĉ se Mickey havas iujn kurbojn al si kaj havas fonon, ke fono devas esti io. Ĝi devas esti blanka. Ĝi devas esti nigra aŭ io alia. Ĝi povas esti travidebla. Kaj fakte, mi povus malfermu Mickey Muso tie en programo nomita Photoshop aŭ io simila kaj ŝanĝi ĉiujn de tiu blanka fono travidebla, do la verda brilus tra. Sed tio estas io mi bezonus peti de mi mem aŭ grafika artisto aŭ dezajnisto ĉe mia entrepreno, ekzemple, fari, precipe kiam mi nur prunteprenis tiun unu el la interreto. Sed tio estas kial tio okazas. 

Do kio alia povus ni volas fari? Nu, ni eble volas diri ni vere esperas ke vi ĝuos vian restadon. Kaj por emfazo, mi volas fari tiun fortan, kaj tial mi diros malfermitaj forta kaj fermi forta kaj tiam reŝarĝi. Kaj ĝi estas iom malfacila vidi sur la projekciilo sed eble vere nun elsaltas ĉe vi iom pli. Do vi povas aldoni kursivo en ĉi vojo, aŭdaca Facing tiamaniere. Ni povus ŝanĝi la kolorojn. Fakte, ĝuste por piedbatoj, mi estas tuj iros antaŭen kaj fari tion. Mi ne vere ŝatas kiom mia alineoj estas ĉi proksime kune, do mi povus fari ion kiel tiu. Mi tuj rakontos la retumilo, ŝanĝi ĉiun alineon etikedo havi, ni say-- reale, vi scias kion, ni vicigi ĝin teksto-align: centro. Kaj denove, mi scias nur ĉar iu instruis ĝin al mi aŭ mi rigardis ĝin en reta referenco. Do lasu min konservi tiun. Kaj, ah, nun mi havas centrita la bildo ekzistas. Kaj fakte, vi scias kion, se Mi movas mian bildon en paragrafo tag-- tiel tria alineo, kvankam ĝi ne estas teksto. Ni savu tion kaj reŝarĝi. Nun la paĝo estas komencanta rigardi speco of-- Mi volas diri, ĝi estas ankoraŭ bela malbela, sed almenaŭ ĝi aspektas kiel mi pasigis du minutoj anstataŭe de unu minuto igante ĝin. 

Kaj tiel, incrementally, ni povas fari tiuj estetikaj ŝanĝoj nun al la paĝo? Mi ne vere ŝanĝis la datumoj en la paĝo aliaj ol aldoni la vorton vere. Mi aldonis metadatenojn, se vi volas. Hey, retumilo, fari la vorto "vere" aŭdaca. Sed la datumoj ne estas forta. Jen pridatumon. La datumoj estas "vere". Tial ni ankoraŭ havas kelkajn la samaj konceptoj kiel antaŭe. Nun, kompreneble, tio ne estas sur la araneaĵo, do mi faros unu fina paŝo tie. 

Mi tuj iros al hello.html kaj nur reliefigi kaj kopii ĉi. Kaj nun mi tuj eniru en Cloud9, kiu Mi irados vin tra en nur momento. Kaj prognozoj estas vi baldaŭ, se ne jam, en ekrano kiel ĉi. Kaj lasu min nur donas al vi rapidan tour de kio Cloud9 reale estas. Do denove nebuligi 9 estas tiun nubon-bazita servo kiu donas al vi kaj al mi la iluzion havi nian propran virtualan maŝinon en la nubo, teknike ujo en la nubo, ke ni havas plenan administraj privilegioj por. Tial en teorio, neniu alie en la mondo havas aliro al la ekrano mi rigardante nun, krom eble la homoj kiu kuras la retejo, ĉar teknike ili havas fizika aliro kaj tiel plu. 

Do kion ni vidas en ĉi tiu medio? Mi tuj malzomi, ĉar ĝi estas iom malgranda. Kaj mi atentigi pri tie por nur momento. Sur la maldekstra flanko de mia kaj via ekrano, ekzistas dosiero retumilo maldekstre. Tiel similaj en spirito por Mac VIN kaj Windows. Tiuj estas ĉiuj la dosierojn en mia konto. Kaj defaŭlte, se via konto estas kiel la mia, vi vidos aŭ baldaŭ vidos helloworld.html kaj readme.md. Super tie sur la dekstra, tio estas kie mia teksto dosierojn tuj iros. Se vi iam uzis Microsoft Vorto aŭ Notepad aŭ TextEdit, tio estas vorto de mia redaktado de dosieroj tuj iros. Kaj tiam la plej arkaikaj trajto de tiu medio ke ni ne vere bezonas uzi estas malsupren tie nomiĝas Terminal Fenestro. Se vi uzis DOS de pasintaj tempoj, tio estas la Linukso aŭ Linukso ekvivalento de DU. Ĝi estas teksto-bazita interface-- neniu musklakoj, neniu trenante. Ĉiuj vi povas fari estas tajpi komandojn, sed tiuj komandoj povas krei dosierojn, kopii dosierojn, malferma subdosierujoj, proksime dosierujoj, fari ajnan nombron de aferoj. Sed nuntempe, ni certigos elspezi nian tempon ĝis tie. 

Kaj do ni faru ĉi. Se vi estas en tiu medio, kiujn vi devas se vi kreis laborspaca jam, iru antaŭen kaj nur iri supren al Dosiero: Nova momente. Kaj kiu donos al vi novan langeton dekstra tie en la mezo. Kaj mi just-- kaj ni antaŭeniri kaj fari tion. Ni iru antaŭen kaj nun ne Dosiera: Konservi kaj iri antaŭen kaj nomas ĝin hello.html, Ne devu konfuzi kun helloworld.html, kiu venis kun via nova libera konto, kiu estas nur specimeno dosiero. Vi vidos subite aperas, plej verŝajne sur la maldekstra flanko, kaj la langeto ankoraŭ estos malfermita. Kaj mi kuraĝigas vin nun amuzi dosiero aŭ iuj variantoj de tio. Kaj se vi ne tute povas vidi ĝin en la ekrano, tiu estas identa al la glitejoj ke vi probable havos en alia langeto. 

Do mallonge, Fari vian unuan retpaĝon, savi ĝin, kaj tiam en nur momente, Mi montros al vi kiel vi povas fakte vidi tion. Sed ŝanĝas almenaŭ unu aferon. Ŝanĝi helloworld al ion de via propra elekto, tial vi estas konvinkita, ke ĝi estas via dosieron kaj ne la mi ĵus kreis. Bone. Kaj kiam vi ready-- neniu rush-- kiam vi pretas, antaŭeniri kaj savi la dosieron Kiam vi faris tiujn ŝanĝojn. Kaj se vi klakas la Kuri butono supren supro, ĉi devus malfermi novan langeton ke rakontos Vi kion URL vi povas viziti vian dosieron je, sed ĝi povus preni momenton por citaĵo unquote "komenci Apache," kiu estas la nomo de la retservilo. Tiel penu fari precize kio estas en la dosiero finfine. Do nun, mi zomi. Se mi ektajpu malferma-krampo HTML, avizo ĝi instigante min fini mian penson. Se mi finis mian penson, ĝi aŭtomate donas al mi la fermo etikedo. Sed la atendo estas poste mi trafis Eniri, kaj poste movi ene tie kaj cxu gvidi ene kaj mi faras korpon enen. Kaj estas iom stranga unue, ĉar ĝi estas faranta laboron por vi, sed rimarkas ke finfine ĝi savas vin pulsbatoj. Kaj fakte, tre komuna trajto de programado medioj tiuj tagoj ambaŭ por ttt evoluo kiel ĉi kaj fakta programado, kiun ni parolos pri morgaŭ, Estas tiuj auto-kompleta karakterizaĵoj, aferoj simple permesi programisto aŭ dezajnisto tajpi pli malmultaj keystrokes al plenumi la saman aferon. Foje ĝi estas bona, tamen. Foje ĝi estas nur ĝena. Kaj, denove, iam vi transskribita la glito aŭ iu varianto gxiajn Vi povas alklaki la Run butono supren supro. Kaj tiam en la fundo fenestro, vi estos informita ĉe kio URL vi povas viziti vian retejon. Mia, ekzemple, estas ĉe business-daharvard.c9users.io kaj tiel plu. Bone, do, lasu kunulinon demandojn? Aliajn demandojn pri nur nun tiu laboro antaŭ ni aldonu trajtoj? Kaj mi proponas, ĝuste akiri ulojn comfortable-- ĉar ĝi estas unu afero simple Kopio-almeti blinde kion mi faris. Sed nur por ke homoj luktas kun almenaŭ por-do, Mi tuj ŝalti iun muzikon. Mi tuj proponos Listo aferoj vi povas potenciale aldoni. Kaj vi certe povas uzi Google. Kaj kial ni ne simple proponas ke vi provu solvi almenaŭ unu aparta problemo tie. Do en terminoj de etikedoj, mi reuzi tiun ĉi tie. 

Fakte, mi metis ĝin en teksta formo. Diru ke inter la etikedoj ni eble uzas jen kelkaj etikedoj super tie. Ni vidis la paragrafo etikedo. Nun ĝi tuj auto-pleneco. Alineo etikedo, la ankron etikedo. Imagu ke vi volas fari ion pli granda, do eble vi like-- la interspaco etikedo povas helpi. Nu, vi eble bezonas helpon por ke en nur momento. Ni vidis div. Vi vidos ke estas tablo. Io nomata tr, td. A, td. Revenu al tio post momento. Kion alian povus esti oportuna? Ekzistas forta. Ekzistas emfazo, aŭ prefere ilin. There's-- kion alian povus vin imagas tie? Nu, ni preni Rigardu tiun kune. Formo, kiun ni vidis. Ekzistas formo. Ekzistas enigo kaj kelkaj aliaj. Bone, do ni faru tion. Alrespondi Venko demando, permesu al mi unue nur certigi ke ĉiu estas povis akiri sian saluton laborista. Tiam mi konigu paro aliajn ideojn. Tiam ni lasu uloj solvi iu problemo arope. Tiam ni vere revenos por ke nocio de formo, kaj ni fakte re-apliki kune la antaŭa fino interfaco, por tiel diri, por Google mem. Ni uzos Google kiel la dorso fino kaj lasu ilin fari la laboremo, la serĉadon, sed ni recreate la antaŭa fino de Google kaj la serĉo formo ke ili havas sur ilia propra hejmpaĝo. Kaj tiel ni revenos al tiuj etikedoj en nur momento. 

Do jen kion mi proponis nur antaŭ momento. Ni povas aldoni la estilización al paĝo ene de tiu stilo etikedo, kaj ni povas stylize fone koloro, la teksto alineamiento, ĉu ĝi estas centro aŭ dekstra aŭ maldekstra. Sed tre rapide vi farus trovi aŭ ttt diseñador trovus ke tiu iĝas iom maloportunaj, ĉar vi faras kio estas nomita miksante enhavo kun prezento de gxi. Vi miksante viajn datumojn kaj la estetiko de tio. Kaj fakte, se vi konsideras kio okazos super time-- tiu estas tre malgranda retpaĝo, kompreneble. Sed se mi aldonas enhavon al ĉi tiu paĝo kaj mi aldonos stilon al tiu paĝo, la paĝo tre rapide ricevas plu kaj plu kaj plu. Kaj supozu ke mi volas havas duan retpaĝon ke dividas iujn el tiuj atributoj. Supozu mian duan retpaĝon por mia site-- ankaŭ mi deziras ĉion centro, kaj mi ankaŭ deziras ĉion kun verda fono. Mi preskaux tuj devas kopii kaj alglui kelkajn el tiuj linioj en tiu dua dosiero, kiu sentas bone. Ĝi solvos la problemon. 

Sed kio se mi volas trian paĝon aŭ 30a paĝo aŭ 40a paĝo? Nun mi tuj devas kopii kaj alglui multajn duplikatajn kodo en plurajn dosierojn. Kaj do supozas ke Mi decidi aŭ mi diris, hej, ni ne uzas verda fono anymore. Ni tuj ekuzi oranĝo. Kio vi devas ŝanĝi? Nu, vi devas ŝanĝi tiun stilon el verda al oranĝa en kiom da lokoj? Kiel 30 aŭ 40 lokoj. Ĝi estas teda. Estas inklina al eraro. Ekzistas diversaj eblaj kialoj kie vi ne volas indukti tian doloron mem. Do ĉu ne estus bela se ni povus preni kion mi ĵus metis inter tiuj du flavaj etikedoj, tiuj stilo etikedoj, faktora ĝin, kaj meti ĉiujn miajn estilización en unu centra dosiero ke ĉiuj 30 aŭ 40 el miaj aliaj dosieroj prunti de aŭ iel referenci, Ne male al la retoj diagramoj ni faris antaŭe? 

Do se mi iros tien, mi tuj reale proponi ke ni anstataŭigi la stilo etikedo kun io vokis la ligilon etikedo, kiu Estas terure, terure nomata, ĉar vi ne uzu la ligilo etikedo krei kion ni homoj scias kiel ligilo en retpaĝo. Por tio, vi uzos kiu etikedo? Kiel vi kreas ligilon en retpaĝo? Spektantaro: La aK. DAVID J. Malan: La a, aŭ ankron etikedo, kiuj iris al Disney antaŭ. La ligilo etikedo tie diras this-- ligilo al dosiero nomata styles.css, la rilato al kiu tuj esti ke ĝi estas mia stilfolio. Do ĉi tiu estas unu el la S-a en CSS-- kaskadan stilo littukojn. Stilo sheet-- du de la S-a en CSS. CSS. Tio nur signifas, hey, retumilo, Iri trovi styles.css sur la loka servilo kaj uzi ĝin kiel via stilfolio, kio signifas ene de tiu dosiero tuj estos ĉiu el la stylizations ke ni ĵus faris. Kaj tiel kion tiu dosiero povus aspekti estas tio. Kaj mi nur faras ĉi estas rapida Ekzemple, ĉar ni ne bezonas akiri tro multe en la herbaĉoj tie. Sed se mi kopias ĉi, kion mi proponante estas ke programisto krei novan dosieron, alglui en tiuj lines-- whoops-- almeti en tiuj linioj, konservi ĝin kiel styles.css, kaj tiam, en alian dosieron, forigi ĉiujn ke kaj anstataŭi ĝin anstataŭe kun tiu ligilo etikedo. Tiel ke se mi ligas href = "styles.css", la interrilato estu "stilfolio" fermi etikedo. Savos. Reiru al mia helloworld. Reŝarĝi. 

Laŭvorte nenio okazis. Kiu estas bona afero, ĉar ĝi signifas ĝi estas fakte ĉiuj laborante. Pruvi tiel, supozu ke mi faras tajperaro, kaj mi nomas "styles.css" kun majuskla S, kiu estas malĝusta, kaj tiam reŝarĝi. Nun vi povas vidi ĝin simple ne funkcias. Nun, kial? Nu, ni uzu tekniko de antaŭe. Lasu min antaŭeniri kaj, mia krozilo, en Chrome, mi estas tuj malfermi tiu speciala reto langeto kiel antaŭe, kaj lasu min reŝarĝi la paĝon. Kion vi ne surprizis vidi nun? Aŭ eble vi estas surprizita por vidi ŝin. De ajna formo, kion vi vidas nun? Spektantaro: [inaudible] DAVID J. Malan: Ĝi ne troviĝas. Kial ne trovis? Nu, Styles.css-- ĉefurbo S-- ne ekzistas. Mi misnamed ĝin. Simpla tajperaro. Sed mi ricevas kompreneble nun 404, ĉar la servilo diras, hey, ĝi ne trovis. Laŭvorte, mi ne scias kie tiu dosiero. Tiel kiel rezulto, la retumilo montras vin kio povas, la kruda enhavo de la paĝo, kiu estis 200, la HTML, sed la estilización ne povas aldoni poste. Kaj tio estas kio signifas kaskada. Vi povas ia aldoni ĝin poste, kaj ĝi ian rafinas la estetiko de la retpaĝo. Kaj vi povas eĉ nuligi tiujn stiloj kun ankoraŭ alia stilfolio dosierojn se vi volas. Ĝi ne trovis, kvankam, en tiu kazo, ĉar kompreneble mi misnamed ĝin. Do mi devus korekti tiun unuan. 

Do ni iru antaŭen kaj proponi la sekvan. Ni iru antaŭen kaj fari tion. Komencante eble via helloworld dosiero, lasu min nur inviti paro de karakterizaĵo sugestoj. Do, Viktorio, vi volis fari tekston pli granda, ĉu ne? Bone, do ni povas farata teksto granda. Kaj ni ĉiu desxiras nur unu problemo por solvi. Fari tekston pli granda. Mi ne tuj tedi skribi tion kiam ni havas kuglon teknologio rajton super tie. Tial iuj problemoj. Do ni tuj provi fari tekston pli granda. Bone. Kio alia estus iu proponas? Kion alian povus ni volas fari retejon? Ni venis supre kun Mallonga listo de aferoj kaj tiam delegi al la grupo al eltrovis tion. 

Spektantaro: [inaudible] 

DAVID J. Malan: Bone, pozicio teksto sur malsamaj flankoj de la paĝo? Bone. Io alia. 

Spektantaro: [inaudible] DAVID J. Malan: Jes. Do gif estas nur malsamaj dosierformato. Ni nur uzata, kio, oni png aŭ jpg probable? Ni uzis jpg. Se vi estas scivola, troa respondi al via demando Estas jpg ĝenerale uzata por fotoj, ĉar ĝi eltenas milionoj de koloroj aŭ 24-bita koloro. A gif ĝenerale uzata por, kiel, Interreto memes tiuj days-- kuraĝigoj, kiel vigla gifs. Sed okazas uzi pli malgrandan koloro paletro, nur 256 eblaj koloroj, sed subtenas travidebleco kaj kuraĝigo. Kaj tiam ekzistas png, kiu subtenas travidebleco kaj pli koloroj sed ne kuraĝigo. Do ĝi estas komerco-ekstere. Tiel aldonante gif, kvankam, estus funkcie ekvivalenta al aldonanta png aŭ jpg. Yeah. Bildo fonto egalas. Do io alia. Ni venis supre kun io kiu Ni sendis al Viktorio fari tie. 

Spektantaro: Aldoni butonoj formon. DAVID J. Malan: Bone. Do aldoni butonojn por formo. Kaj ni faros ke oni kune. Tial estos perfekta segue tuj post tiu defio. Io alia? Kio povus vi ŝatas fari? La ttt sentas tre underwhelming se ĉi ĉio ni povas fari. Spektantaro: Ŝanĝi la koloron de la teksto. DAVID J. Malan: Ŝanĝi la kion? Spektantaro: Koloro de la teksto. DAVID J. Malan: ŝanĝi koloron de teksto. Bone. Do, ni faru tion. Nur denove por ke vi ne estas, ĝuste per rote, farante ĝuste kion mi faras, Mi tuj ŝalti la muzikon por eble kvin minutojn tie. Vi plene rajtas uzi Google. Vi estas bonvena demandi min, kaj Mi flustri aludo en via orelo. Vi plene rajtas rigardi super sur alies ŝultrojn. Sed solvi nur unu el tiuj problemoj. Sed ni faros la lasta, la formas, se ni povus, kune. Do kvin minutoj por solvi iu el tiuj problemoj uzante Google, intuicio, aŭ ajnan aliaj rimedoj havebla al vi. 

[MUZIKO Ludanta] Bone. Neniu ĉagrenoj se vi volas teni laboreti, sed mi ruinigu paro de tiuj respondoj. Do la unua sugesto de Victoria estis fari tekston pli granda. Do ekzistas kelkaj manieroj por fari tion. Mi nuntempe restaŭrita mia ekrano al tiu grandeco, kvankam mi zomis en artefarite nur vidi aferojn. Kaj ni faru ĉi. Lasu min antaŭeniri kaj kroĉi kelkaj genraj latina teksto nur tiel ni havas ion labori kun. Tial donu al mi nur unu momento. Mi faros tri alineoj. BONE. Tio estos bona ekzemplo. Tiel por la scivola, en mia hello.html, mi ĵus batitaj tri sensenca latina alineoj nur tiel ni havas tekston por labori kun. Kaj Venko celo estis fari iujn de la teksto pli granda. Do mi povis, kiel antaŭe, iru tien. Kaj mi faru ĝin la ĝusta vojo. Mi tuj havas ligilon etikedo kiu notas al dosiero nomita "styles.css," la rilato el kiuj estas denove "stilfolio." Kaj tiam mi iros por savi tion kaj malfermu tiun "styles.css." 

Tiel, kiel antaŭe, mi havas la kapablo en tiu CSS dosiero efektive superregi la defaŭltan estetiko de retpaĝo, kaj la defaŭlta estetiko, kompreneble, estas sufiĉe teda. Ĝi estas speco de normala tiparo, nigra teksto, blanka fono, kaj tiel plu. Do supozas, ke mi volas fari ĉio ĉi teksto granda. Mi povis fari kelkajn aferojn. En mia styles.css dosieron, mi povus diri, vi scias kion, aplikas la sekvan al la korpo de mia paĝo. Antaŭeniri kaj fari la tiparo 24 poentoj, kiu estas nombro mi uzi en Microsoft Word. Lasu min reiri al mia retejo paĝo tie kaj reŝarĝi, kaj vi povas vidi ke ĝi estas jam multe pli granda. Kaj ni povas akiri iom freneza, ĝuste kiel ni povas iun desktop-- fari 96 punktoj. Reŝarĝi. Kaj ĝi iĝas iom maloportunaj ĉe tiu punkto. 

Sed mi povus esti iom pli preciza. Anstataŭ apliki tiun stilfolion al la korpo de mia paĝo, kion alian povus mi aplikas ĝin anstataŭe, kio alia etikedo kiu povus ankoraŭ funkcio en la sama maniero? 

Spektantaro: La p etikedo? DAVID J. Malan: P etikedo. Do la kapo ne estus ĝusta, ĉar la kapo, vi ne povas reale kontroli la estetiko de. Ekzistas ĉu teksto ekzistas aŭ ne. Sed la p tag-- mi povas plonĝi en iom profunden, tiel diri, al la alineo etikedoj. Kaj kvankam estas tri, tio perfekte bone, ĉar en CSS, Kiam mi nur diru "p", ĉi signifas apliki la jenajn al ajna etikedo kiu kongruas tiu seleccionador, la seleccionador nur esti la nomo de la etikedo. Do kie ajn vi vidas "P", apliki la tiparo, kaj ni faru ĝin pli racia again-- 24 punkto. Kaj vi scias kion, nur por bono mezuro, ni faru la koloro ruĝa nur por la momento. Kaj nun se mi povos reŝargi, nun ni vidi tri malbela alineoj. 

Sed nun supozas ke mi estas ia of-- Mi volas la unuan alineon salti tra la uzanto. Mi ne volas nur pliigi la tiparon grandeco de ĉiu. Do mi vere volas identigi aŭ distingi inter tiuj alineoj. Do ni forigi la ruĝa, ĉar tio estas nur ia pegajoso, kaj ni iru antaŭen kaj fari la tiparo 12-punkta defaŭlte, tiel ke ni estas reen al io iom pli racia. Kaj nun mi volas nur pliigi la tiparo grandeco de la unua alineo. Mi povas fari tion en kelkaj vojoj, sed iel tio eble plej instru ĉe la momento estas fari la sekvan. Lasu min antaŭeniri kaj diru: ĉi alineo havas unikan ID de "unua". Mi povus voki ĉi ajn mi volas. Mi povus nomi tiun "umo" aŭ ajna alia vorto, sed mi tuj donos iun semantike senchava nomo kiel "unua". Tiu estas la sola ensalutilo, la ID, cxar mia unua alineo. 

Kion mi povas nun fari en mia stilfolio estas iom pli preciza. Anstataŭ diri, apliki la jenajn al la p etikedo, Mi povas diri la following-- apliki la sekvaj, aŭ unuaranga, la HTML elemento kiu havas unikan ID de "unua". Kion mi volas apliki ĝin? Al tiparo de 24-punkto. Do mi havas du selectores nun. Oni faras ĉiujn Alineoj 12-punkto. Sed ĉi tiu, ĉefe ĉar ĝi venas second-- temas lasta en la file-- tiu havas kaskada efiko. Mi ĵus faris ĉiujn miajn paragrafo etikedoj 12-punkta, sed tiu nun akvofaloj kaj anstataŭigas ke por ajna elementoj en la paĝo, ĉiu etikedo sur la paĝo kies unika ID estas citaĵo unquote "unue." Kaj la hashtag en tiu kunteksto nur signifas "unika identigilo." Mi ne metis ĝin en la HTML-dosiero. Mi, ĉi tie, nur diru citaĵo unquote "unue." 

Do lasu min reŝarĝi. Kaj nun mi vidas, ha, OK. Mi volas diri, ne ke bela, sed estas afable de kiel la antaŭparolo al libro aŭ io simila, kie la unua alineo estas pli granda. Povus esti eĉ pli preciza per nur la unuajn literojn, sed almenaŭ Mi ekzercis pli kontrolo. Nun maybe-- eble volas fari tion foje por ajna kialo, do mi ne volas tion apliki al nur unu HTML etikedo. Prefere, ni say-- ni ankaŭ fari la sekvan. Class = "importado". Dum ID estas uzata por unike identigi unu afero, unu etikedo, en via retpaĝo, klaso estas intencita esti uzata en ajna nombro de elementoj aŭ etikedoj sur via retpaĝo. Do ĝi estas reuzebla. IRU ne reuzebla. Klaso estas reuzebla. 

Kaj vi scias kion, por kiaj filozofia reasons-- Mi ne finis mian thought-- mi tuj diru ke la unua paragrafo kaj la dua alineo estas gravaj. Do mi tuj apliki la klaso nomita "Grava," ke, se mi savos mian dosieron freŝigi, havas nenian funkcia efiko ankoraŭ. Sed mi aldonis kelkajn metadatenoj por la dosiero, ia io aparta el la kerna datumo de la dosiero, por ke nun en mia stilfolio, se mi anstataŭ diri ".important" - vi scias, io, kio estas grava, mi estas tuj faros tiparo-koloro, red-- aŭ prefere ne tiparo-koloro, ĝuste koloro. Ekzistas faktkonfliktoj en CSS bedaŭrinde. Kaj reŝarĝi. Nun rimarkas la unua du alineoj estas ruĝaj sed ne la tria, ĉar mi nur aplikis la klaso de "grava" al la unuaj du el tiuj aferoj. 

Tiel en IDs, vi havas la kapablon specifi tre precize. Kun klasoj, vi havas reutilización. Sed en ambaŭ kazoj, rimarki la ia bonvolo dezajno principo kie mi faktorita el ĉiuj estetikon al miaj styles.css dosieron. Do ne messiness tie. Ekzistas neniu mencio de ruĝaj aŭ aŭdaca-Facing aŭ tiparo en tiu dosiero. Prefere mi semantike, signifoplene karakterizita miaj datumoj, tie estas kelkaj gravaj datumoj. Tie estas iuj pli gravaj datumoj. Cetere, ĉi tie estas la "Unua" el miaj gravaj datumoj. Do HTML estas ĉiuj pri ia de etiquetado, laŭvorte, vortoj kaj alineoj kaj ĝi konstruas en via paĝo kun tiuj malgranduloj aludoj, se vi volas, ke vi povas iel utiligi uzante aliaj teknikoj kiel CSS tiamaniere. 

Do en respondo al Venko demando, ni povas fari tekston pli grandaj en tiu maniero. Estas tiom multaj aliaj manieroj, sed la tiparo tag-- malferma krampo "tiparo" - fakte pluraj jaroj. Kaj tio estas la problemo, tro, kun fidanta nur sur rete resources-- Ili emas esti antikva. Kaj ja, kiu estas estis evitinda, ĉar la mondo rimarkis, kion signifas "font-size = 7" signifas? Ĝi ne. Kaj tiel multaj jaroj kaj al ĉi day-- de la flanko notas tie estas ke ĝi estas reale nekredeble dolora ankoraŭ foje disvolvi lokojn por la retejo, ĉar Microsoft kaj Google kaj Mozilla kaj aliaj ofte malkonsentas pri kiel interpreti specifo kiel HTML. 

Estas rulebook por HTML tio ĝenerale diras kion ĉiu etikedo signifas. Sed foje ĝi estas lasita al la efektivigo de diskreteco, Microsoft bontrovo kaj Google. Kaj tiel vi tre ofte vidi en retejo ion aspektas malsama en la PC ol jes sur Mac, kaj tio estas vere ĉar, fine de la tago, ne testi gxin bone en ambaŭ platformoj. Sed estas ankaŭ ĉar racia, inteligentaj homoj malkonsentas kaj kompanioj malkonsentas, kaj tiel unu el la defioj de programado por la retejo aŭ desegni aĵojn por la reto skribas retpagxon en maniero kiu funkcias sur ĉiu retumilo. Sed eĉ tio senkaŭza, dekstra? Estas tantas versioj de multaj foliumiloj tie ke, en iu momento, Vi ankaŭ devas fari juĝon alvoko kaj vi devas decidi kiel entrepreno, speciale por e-komerco-stilo ejoj kie vi estas provas uzi la plej lastan kaj plej granda teknologioj doni vere bona uzanto sperto. Sed iuj procento de viaj uzantoj povus ankoraŭ uzas Interreton Explorer 6 aŭ 7 aŭ 8, precipe laŭ la lando kiu ili venas de. 

Kaj tiel tre ofte konsultis estas io kiel "foliumilo statistiko." Kaj se ni iros to-- ni vidu Vikipedio kaj vidi kiel supren-ĝis-dato tiu abako estas se ekzistas unu. Do jen vi povas vidi kie retumiloj reale estas, laŭ decembro 2015, laŭ la usona Registaro. Chrome estas ĉe 42% de la merkato, sekvita per IE plejparte en korporacia agordojn aŭ PC agordojn, kompreneble, sekvita de Firefox, tiam Safari, do Opero ne fari la mapon tie ial, kaj tiam Aliaj. Eble estas sub Aliaj. Sed pli problemaj ol is-- ni vidu, se Vikipedio ankaŭ versiojn de retumiloj version-- 

Ni iru al retumilo statistiko. IE. Eĉ tio ne sufiĉas. Browser statistiko. Mia versio. Tio ne tuj estos ĝuste. Vidu versioj. Retumilo merkato. Ni vidu se tio venas supren. BONE. Nun tiu estas akiranta iom pli utila. Do tie, rimarki ke ni cxiuj havas malsamaj versioj de retumiloj. Kaj mia dio, se vi look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Mi volas diri, retumiloj kaj pli ĝisdatigita, Kaj foje iuj de tiuj ŝanĝoj estas signifa en laŭ funcionalidad. Kaj tiel en iu momento, la produkto perantoj aŭ la inĝenieroj bezonos fari decision-- vin scias kion, nur 1% de la mondo ankoraŭ uzas IE 7. Inferon kun ili. Ni nur ne tuj subteni ke retumilo. Kaj kion tio signifas ne apogi? Ĝi povus signifi ke butonoj ne funkcias en via TTT-paĝo, aŭ ĝi povus signifi la formatado estas tute ekstere. Aŭ vi eble devas fari tiu sama juĝo alvoko en movebla tiuj tagoj, kie, ni estas Ne tuj apogos iOS 5 anymore. Do homoj nur devas ĝisdatigi. Aŭ ni ne tuj subteni Magdalena sur Android VIN Android aparatoj, cxar kiel world-- kiel la tech mondo volas movi antaŭen, ĝi ia volas treni la mondo kun ĝi por ke ili ne devas daŭrigi esti kongrua tiel ili povas proponi novajn kaj bonajn trajtojn. Tiu estas ĝuste unu el la kialoj kial tiel multaj firmaoj estas elrulanta aŭtomataj ĝisdatigoj kaj ia devigante la lastaj versioj de programaro nin. Kaj eĉ kompanioj kiel Apple ordigi de devigi vin preskaŭ aŭ devigi vi en terminoj de merkato fortoj aĉeti novan telefonon ĉar ili ĵus ne ĝisdatigi vian malnovan telefonon anymore. Do vi maltrafi sur la lasta kaj plej granda karakterizaĵoj, ĉar ĝi estas multekosta por ili kiel kompanio subteni malnovaj, disputeble malsupera versioj de programaro. Sed la pura efekto estas ke ni ankaux suferadas ĉi tiel. 

Do ni rigardu nur paro de fina aferoj tie. Ni paŭzu reala rapida kelkaj tiuj aliaj kugloj, se scivola. Do se vi volis, ekzemple, pozicio la teksto en malsamaj flankoj de la paĝo, mi tuj fari rapidan vojon, sed ekzistas malsamaj manieroj fari tion. Lasu min antaŭeniri kaj eliminate-- simpligi tion kiel sekvas. Lasu min nur reiri al mia simpla, simpla alineoj. Lasu min reiri al mia styles.css. Kaj mi simple tuj uzi la simple-- kiun vi eble vidis en Google aŭ memoras de earlier-- teksto-align dekstra. Kaj reŝarĝi la paĝon. Nun ĉio ŝajnas esti dekstra-vicigitaj, kiel vi povus vidi en la supre tie. 

Ni povas fari ĝin rigardi iom pli rezervi-similaj, kaj ni povas diri "pravigi" kaj reŝarĝi. Nun ĝi estas bela kaj kvadrata sur ambaŭ flankoj, kiu estas speco de agrabla. Alia celo kiun ni havis tie Estis ŝanĝo koloro de teksto. Do ni vidis ke kun mia ruĝa teksto. Kaj nun aldonas butonojn por formo. Do kial ni ne provu fari ĝuste tion? Sed unue permesu al mi iri al loko kiu plimulto de ni uzu ĉiun day-- Google. Kaj ni rigardu kiom Google efektive funkcias. Sed mi tuj faros tion. Unue, mi faros in-- Yep, lasu min iri al Google unue. Mi tuj devos iri en Google Fiksoj, ĉar mi volas malebligi iu nomita Instant Rezultoj. 

Do vi eble rimarkis en Google tiuj days-- lasu min iri reen kaj defali sur. Do se mi ekserĉi por "katoj" kiel tiu, rimarki ke ne nur faras Mi alvenas aŭto- kompletigi supren supro, subite, la paĝon mem ŝajnas ŝanĝi bela rapide tiel, kaj tio Google uzante lingvon nomata Ĝavoskripto provas esti helpemaj. Sed bedaŭrinde, ĝi speco de fuŝas niajn diskuto de kio vere okazas sub la kapuĉo tie. Tial mi estas nur speco de rapide malŝalti momenteto rezultojn. Kaj mi tuj klaku Save. Kaj nun mi tuj malfermos ke diagnozaj ilobreton mi teni malfermo sub la Reto langeto. Do ni faru ĉi. Lasu kunulinon whoops-- rulumu ĉi malsupren iom. Kaj lasu min serĉi "katoj." 

Kaj nun notice-- fakte, tiu estas bona ŝanco diskuti dum momento. Rimarki la momento mi type-- halti ĝin. Halti ĝin. BONE. Rimarki la momento mi tajpas la literon C, spekti la fundo de la ekrano. A- T- S. Kion la fundo de tiu ekrano, mia Reto langeto, sugestas okazas ĉiun tempo mi tajpas leteron? Bedaŭrinde, la rano estas tre distrante hodiaŭ aŭ la trébol aŭ kio ajn ĝi estas. Kio okazas ĉiufoje mi tajpas? Kaj lasu min liberigi la buffer kaj tajpi ĝin. So-- whoops. Ĉiufoje mi tajpas leteron, C- A- T-- tiel nova vico evidente tenas aperanta. Kion ĉiu el tiuj vicoj reprezentas, bazita sur kion ni vidis kaj diskutis tiel malproksime? Spektantaro: Serĉo? DAVID J. Malan: Serĉo, aŭ pli genéricamente, HTTP peto de mia retumilo al servilo. Nu, kial mia retumilo faras HTTP peti ĉiufoje mi tajpi leteron? 

Spektantaro: [inaudible] DAVID J. Malan: Jes, ĝi estas doni Mi jam auto-pleneco rezultoj. Kiel, kie fari tiujn serĉrezultoj venas? Nu, ĉiufoje mi tajpi letero, Google sendas pli kaj pli kaj pli la vorto mi tajpas. Kial? Ĉar ili volas doni al mi bona kaj pli bona, pli bona sugesto, listo de sugestoj, por kiu vorto Mi provas vere kompleta. Do tiu estas laŭvorte ĉiu karaktero vi tajpi en Google estas sendita, finfine en dika, sed ankaŭ kelkfoje samtempe por implementar tiuj auto-kompleta karakterizaĵoj kiam la datumoj estas, kompreneble, en la reto. 

Nun, ni rigardu kio reale okazas kiam mi klakas Google Search. Kaj tiam ni utiligi ĉi mem. Do se mi rulumu malsupren nun al la tre unua peto ke ĵus okazis. Rimarki la jenan. Estis sendita al sufiĉe longa URL-- https://www.google.com/search? kaj tiam tutan faskon da aĵoj. Vidu ĉi reale nun en la retumilo langeto mem. Ni forigi la toolbar tie. Jen la paĝo de serĉrezultoj. Kaj avizo jen la URL. Nun, vi povas verŝajne diveni kio okazas ĉi tie en parto. Do unue, difino. Tio ŝajne estas la destino kie la formo estas donita. Do kiam mi tajpas en la vortoj "katoj" kaj batis Enter, ŝajne Google sendis mia teksto enigo al tiu retadreso ke mi reliefigis tie, oblikvo serĉo. Rezultas, en URL, ion, kio okazas post demandosigno estas, kiel ni parolas tiele ŝlosila valoro paro kiu tajpitaj en la formo aŭ iel transdonita de la retumilo al la servilo. 

Do ajn vi tajpas enigo en formon de la TTT kaj estas sendita kiel ni havas diskutis, tra get, unu el tiuj virtuala kovertoj, la enhavo de tiu envelope-- jes, Teni akiranta plenigita fizike en la koverton en klaso hodiaŭ, sed teknologie ĝi estas fakte metitaj en la URL. Do fakte, lasu min kribri tra ĉi. Kie vi vidas uzanto enigo? Kie vi vidas ion ke mi estu tajpita supren tie? Jes, do "katoj." Maljuste Do lasu min distili ĉi en ion pli simpla. Mi tuj forviŝi ĉion pri tiu retadreso, kiun mi ne komprenas, kaj mi simple tuj forlasi kiel this-- / serĉu? q = katoj. Ni vidos kie q venas de tre frue, sed kiu sentas kiel la minimuma kvanto de informo kiun mi provizis. Kaj nun mi tuj batis Enter. Kaj rimarki ankoraŭ funkcias. Ni ankoraŭ reiri tuta fasko de katoj. Tiel Google estas amatoro ol ĉi tiuj tagoj. Ĝi estas 2016, ne 1999. Do ekzistas aliaj aĵoj kiuj mia retumilo sendas al la servilo. Sed tiu estas minimume ĉiuj kiuj necesas. 

Do kio okazas? Nu, unue lasu min antaŭeniri kaj iri reen al Cloud9 kaj lasu min antaŭeniri kaj fermas mian langetoj antaŭe. Kaj mi faros tion en mia posedas nur dum momento. Mi tuj iros antaŭen kaj krei novan dosieron. Kaj mi tuj savi ĝin kiel google.html. Kaj mi tuj tre quickly-- Mi tuj sxteli fakte, iuj de ĉi teksto nur por ŝpari tempon. Mi tuj almeti ĉi tien. Mi ne ĝenus kun iu estilización tiu tempo. Ni tuj nomas tiun "Mia Google." Kaj mi tuj seniĝi de ĉiu en la korpo. Kaj mi tuj faru la sekvajn. Lasu min zomi. Formi action-- kaj kiel mi mallonge menciita earlier-- whoops-- kiel mi mallonge menciis antaŭe, la ago de formo estas kie vi sendas la datumojn al. Tiel google.com/search. Kaj la metodo Mi volas uzi povas esti unu el du aferoj. Ĝi povas ĉu esti "akiri", kiel ni tenas diskutanta, aŭ ĝi povas esti "post." Nuntempe, la fundamenta diferenco estas, se vi uzas "get" ĉiuj la informo ke la uzanto provizas akiras sendita en la URL. 

Kiu estas granda por aĵoj kiel serĉo motoroj kaj kelkaj aliaj aplikoj, sed en kiaj cirkonstancoj estus vi ne volas plenigi formularon kaj la informo finas la URL, kiel en via retumilo stango? Kiajn formojn fari you-- Spektantaro: [inaudible] DAVID J. Malan: Jes, kiel kio? Spektantaro: Pasvortoj. DAVID J. Malan: Jes, do vi ensalutas en Facebook aŭ iu retejo. Jen uzanto enigo de formo, teksto skatolo, sed vi verŝajne ne volas ĝin montrante supren en la retumilo URL. Kial? Mi volas diri, eble estas iuj sekureco implikaĵoj sur la reto, sed more-- ŝatas, pli simple, se via kompano, via signifa aliaj, viaj infanoj, viaj edz aspektas tra via retumilo historio? Ekzistas vian pasvorton dekstra tie en via retumilo historio. Kiu ne sentas bonan dezajnon. Aŭ eĉ pli teknike, supozu vi provas alŝuti foton al Flickr aŭ Facebook aŭ wherever-- ke estas uzanto enigo, kvankam ĝi estas iom pli interesting-- kiom mi Cram bildon en la URL trinkejo? Vi ia speco de povas. Vi ia povas. Sed, vere, mi estas malmola premis Imagi faranta tion. Do mi bezonas alian metodon por alŝutado fotojn al retejo, kaj ke alia metodo estas nomita "post." Sed nuntempe, ni nur parolas pri "Get", kio estas pli facila de la du. Ĝi nur metas ĉiujn uzanto enigo en la URL. 

Do jen la formo mi krei. Mi volas enigo. Kaj vi scias kion? Mi tuj prenos diveno tie. Mi tuj rememoras mian enigo "q" por "demando." Kaj mi pensas, ke estas unu el la originalaj dezajnoj, eble, de 1999. Kaj tiam la tipo de ĉi enigo Estas ĝuste tuj estos "teksto." Kaj tiam mi iros al havi alia enigo kiu ne bezonas nomon, kiel ni baldaŭ vidu, la tipo de kiuj estas "submit". Kaj tiu tuj donu al mi specialan butonon. Kaj tio estas ĝi. 

Do lasu min antaŭeniri kaj savi ĉi tiun dosieron. Mi tuj iros reen al mia retumilo kaj iri al google.html. Eniri. Kaj ĝi estas speco de maldensa diri la malpli. Sed lasu min antaŭeniri kaj serĉi "katoj." Kaj rimarki Mi aktuale en ĉi Cloud9 URL. Sed la momento mi klakas ĉi, kie vi esperas mi finos? 

Spektantaro: Google. 

DAVID J. Malan: Google. Do ni klaku Submetu. Kaj efektive mi re-implementado de Google. Maljuste Ĝi estas simpla. Ĝi estas malpeza. Mi volas diri, mia kodo estas klare pli bona ol apartenos el la salaton ni vidis antaŭe. Kaj vi scias kion? Mi tuj spico ĉi supren iomete. Mi ne menciis tiun antaŭe. Ekzistas etikedoj kiel H1, por Titolo 1, la plej grava rubriko en paĝo. "Mia Google," mi nomas tiun. Lasu min reŝarĝi. Ĝi rigardas iom pli bona jam. Kaj, fakte, vi scias kion? Mi havas already-- mi mensogis. Mi diris ke mi ne tuj stiligi ĉi, sed mi iros por stiligi tiu kiel antaŭe. Kaj mia korpo tuj estos, diru, teksto-align centro. Ĝi estas rigardanta pli kiel Google jam. 

Mi bezonas linerompo, kvankam, por ke Submetu butonon. Kaj ĝi rezultas, vi povas uzi alineojn, aŭ vi povas pli laŭvorte nur diru, donu al mi linerompo here-- la br etikedo. Kaj se mi povos reŝargi tiun, nun iras tien. Ĝi estas iom malbela, do mi povus fari multoblajn linisaltojn, sed ni ne tro avidaj tie. Do nun ni vidu se ĝi laboras por "hundoj." Ĝi ŝajnas funkcii por "hundoj", tiel. Do kio estas la konvinka takeaway tie? One-- ne grandega salto por enkonduki kelkajn pli etikedoj, kiel la formo etikedo en la enigo etikedo. Sed pli funde estas, ĉiuj ni faras estas ekspluatanta nia kompreno de HTTP kaj la fakto ke formoj finfine ŝanĝi kio estas en la URL de la navegador, kaj tiel do, ni povas mekanike havigi enigo al servilo farante HTML formo kaj sciante ke la servilo komprenas HTTP, nur ŝatas nian korpon komprenas, kiel, skuante mian manon, ke saman protokolon, kaj do ni reiros la respondo ke ni finfine atendas. 

Do ni provu fari unu lasta afero nun kun moveblaj, kaj mi make-- mi aldonos tiun kodon al la diapozitivoj. Do se vi ŝatus toquetear, vi certe povas preni ĝin de tie. Sed mi tuj iros antaŭen kaj fari unu aferon. Mi tuj iros antaŭen kaj malfermu mian indekso page-- mian saluton paĝon antaŭe, kiu havas multajn tiun faux-latina teksto, aŭ sensignifa latina teksto, kaj has-- ĝi aspektas kiel ĉi tiun tiparon grandeco. Sed lasu min antaŭeniri kaj fari tion. Mi tuj iros en Cloud9. Kaj vi ne devas fari ĉi tiun paŝon. Mi nur faras min. Mi tuj klaku Interŝanĝado. Kaj tio estas eco nur de Cloud9, per Mi povas fari mian medion publiko. 

Kaj ĝuste pro pruvo, lasu min fari tion. Mi tuj faros mian aplikon publiko. Rimarku ĝi estas averto mi, am Mi certas ke mi volas fari tion, ĉar tio tuj fari ĉiuj en la mondo, ĉu ili estas tie nun aŭ rigardante la video poste sur la Interreto kapabla vidi kion mi vidas. Sed tio estas bone. Mi tuj diros "Done." Kaj mi kuraĝigas vin, se mi faris ĉi correctly-- lasu min provi ĝin unue. Antaŭen, se vi ne mind-- en retumilo sur via komputilo, iri al tiu retadreso, kaj espereble Vi vidos mian latina teksto. Kaj esti klara, estas kurante ne sur mia tekkomputilo. Ĝi estas en la nubo. Ĝi estas sur Cloud9, laŭvorte, sed Mi faris mian laborspaca publika por ke cxiu ajn, sur la interreto povas aliri mian latina ĉefpaĝon. 

Iri al la sama URL sur via telefono, se vi povus. Se ĝi kostos vin, kvankam vi povas nur rigardi super la ŝultro. Spektantaro: [inaudible] DAVID J. Malan: Mi bedaŭras? Spektantaro: [inaudible] DAVID J. Malan: Ĝuste latinaj vortoj. Tio estas ĉio. Sed tion vi devus vidi. 

Spektantaro: Jes. DAVID J. Malan: Jes. Yeah. BONE. Do mi povas teni vian telefono por nur momenta? Do, espereble, se vi konsentas ĝin, ĝi devus aspekti preskaŭ nelegebla. Estas still-- Mi volas diri, estas nelegeblan pro la latina. Sed estas ankaŭ nelegeblan por kio alia kialo? Kiel, kio placxas al Vi pri tio? Spektantaro: Ĝi estas malgranda. DAVID J. Malan: Estas súper, súper malgrandaj. Do kiel ni povus ripari tion? Ĝi estas super, super malgranda sur Venko telefono kaj, se vi tiris ĝin vi mem, probable malgranda sur via telefono tiel, se vi havi alireblecon agordojn ebligita. Kio estas tio? Vi povus simple pinĉi kaj zoom, kiu estas praktika, sed tiam vi nur vidos kelkajn vortojn samtempe. Do atendi minuton. Mi scias kiel ripari tion. Maljuste Mi povus uzi CSS, kaj mi povus ŝanĝi la tiparo grandeco de 12-punkta ĝis 24-punkto. Sed la flanka efiko de tiu, kompreneble, tuj estos nun, sur labortablo aŭ portebla, Nun la teksto estas duoble granda. Kaj tiel ĝi estus speco de agrabla distingi inter mekanismoj, kaj ĝi rezultas ke Estas manieroj fari tion. Estas pluraj malsamaj manieroj, fakte, per uzanta CSS kaj amatoro karakterizaĵoj ke ni ne eniros en granda detalo, vi povas esence konsulti la retumilo kaj diru: se via ekrano estas pli malgranda ol tiu multaj rastrumeroj, uzi tiun tiparon grandeco. Se la ekrano estas pli granda ol tiu multaj rastrumeroj, uzu tiun alian tiparon grandeco. 

Vi povas eĉ amatoro ankoraŭ. Se vi iam vizitis retpaĝo ke, sur labortablo, havas grandan menuo eble ekstere al la flanko, kaj tiam ĉiuj la enhavo trovas al la bordo de tiu menu-- jen speco de komuna paradigmo. Menuo maldekstre, enhavo sur dekstra, aŭ inverse. Ne vere laboras en porteblaj kiam via ekrano estas nur tio multaj rastrumeroj larĝa. Tiom pli komunaj en porteblaj estas, via menuo subite ricevas kolapsis, kaj vi devos klaku butonon por vidi ĝin, aŭ la paĝaro metos la menuo super ĝi kaj metis la enhavon sub ĝi. Kaj vi povas apliki ĉi tiujn aferoj en diversaj manieroj, ankaŭ. Vi povas demandi vian programistoj, hej, teamo, ajna tempo vi vidos HTTP peto de Android aparato, Microsoft aparato, Google aparato, Apple mekanismoj, uzu tiun tiparo grandeco kaj uzi tiun menuo aranĝo, aŭ alie uzi ĉi defaŭlta granda aranĝo. 

Nun, uzante kio fundamenta tekniko hodiaŭ povus la inĝenieroj uzas scii ĉu ĝi estas iPhone, Android telefono, Tekkomputilo, labortabla vizitante la firmao servilo? Kien ili ricevas tiun informon? 

Spektantaro: Header? 

DAVID J. Malan: Jes, la HTTP header. Tiel cxiu HTTP peto venas de iliajn klientojn al iliaj serviloj inkluzivi, ene tiu virtuala koverton, tuta aro de HTTP kaplinioj, unu el kiuj estas la retumilo kaj la mastruma sistemo eĉ, se vi volos ke nivelo de detalo. Nun ĝi estas kripta-aspekta kordo, sed tie ekzistas programaro kiu volas nur simpligi tion, kaj vi povas simple demandi en programado code-- PHP, Java, C ++, whatever-- kio telefono estas this-- kio mekanismo estas jena uzanto uzanta? Kaj tiam vi povas diri, montri al ili ĉi versio de la retejo se ĝi estas telefono. Montri ilin ĉi tiu versio de la retejo se ĝi estas portebla aŭ labortablo. Sed vi eĉ ne bezonas servilo-flanko komplekseco. Vi povas fari eĉ la plej simpla de aferoj. 

Mi tuj faros tion. Mi tuj iros antaŭen en mia Cloud9 medio, kaj mi tuj aldonu etikedo ke vi vidis en Google antaŭe. Ĝi nomiĝas la metatag. Kaj mi neniam memoros ĉi tiu, tiel Mi tuj transskribi gxin cxi tie. Meta name = "vidujo" kaj tiam enhavo = "width = aparato larĝa, intital skalo = 1 "kaj tio estas ĝi. 

Do ĝi povus tiel esti kiel magian sorĉon. Ĝi ne estas ĉiu, kiu klara, sed tiu havas ion fari kun la vidujo, kaj la vidujo estas nur la korpo de retpaĝo, la rektangula regiono kiu difinas la plejparto de la paĝo. Kaj tiu estas nur rakontanta la retumilo, vi scias kion? Fari la larĝeco de la paĝo efike egala al la aparato larĝa. Alivorte, ne supozu ke vi havas ia senlima spaco. Supozi vi nur havas tiom multe spaco kiel la aparato mem estas granda. Kaj tial nun, se mi povos reŝargi tiun en mia retumilo, mi vidas neniun ŝanĝon. Sed se mi faris ĉi correctly-- kaj mi transiras miaj fingers-- se vi ĉiuj reŝarĝi viajn telefonojn, do vi vidi konvinkan ŝanĝo? Yeah, estas that-- 

Spektantaro: [inaudible] DAVID J. Malan: Jes. BONE. Do eble pli legebla nun? Ankoraŭ malgranda, por esti justa, sed ne tiel eta kiel esti malobeema. Kaj mi certe povus nuligi tiun cetere kun CSS aŭ sur la servilo flanko, sed ĉiam pli kion vi vidante estas pli kaj pli karakterizaĵoj esti aldonita al kliento-flanko environments-- JavaScript, kiel ni diskutos Morgaŭ, CSS kaj HTML-- tiel ke ĉiuj tiuj demandoj povas esti farita sur la kliento tiel kiel tedi la servilo multe malpli kaj ne havi teni supre kun, Ekzemple, la konstanta alsturmo de nova mastruma-sistemo versioj, nova retumilo versioj. Vi povas simple lasu la retumilo demandu la aparato, kiom granda vi estas, kaj tiam fari iom logika decidojn bazita sur tio. Sed ni vidos pli ŝancoj por logikaj decidoj Morgaŭ en la kunteksto de programlingvo. 

Do, demandojn, tiam, sur ttt disvolviĝo? Hodiaŭ ne ttt programado, po se, ekde plej ĉio ni faris Estis tre estetika, se vi volas. Ne ekzistas decidado en la kodo kiun ni skribis, kaj tial estas kial HTML estas markado lingvo, ne estas programlingvo. Sed morgaŭ ni prenos rapidan rigardon, finfine, en JavaScript, kiu estas fakta programado lingvo kiu ebligas al ni fari iom pli. 

Demandojn? Nu, lasu min proponi du ŝancojn laŭvola por hejmtasko. Unu is-- tiuj Cloud9 kontoj ne eksvalidiĝos. Vi plene rajtas uzi ilin toquetear. Ĝi estas la libera nivelo de servo. Rimarki ke, se dum kreado via laborspaca, vi faris ĝin publika, kiu faras signifi ke iu sur la Interreto povas vidi kion vi estas tajpanta. Do eble nur konsideri Ne hontigante mem se vi metas vian unuan retejo paĝo tie publike hazarde, sed neniu tuj scias rigardi tie ĉiuokaze. 

Kaj two-- mi ĵeti tiun URL tiel, speciale se vi envenis hodiaŭ iom malpli komfortaj ol aliaj, certas kion ĉio ĉi aĵoj signifas. Rimarkas ke multe pli de ĉi tiu video, kiu estas ambaŭ bona maniero endormiĝi kaj ankaŭ ridi dum Tiamaniere ankaŭ multajn societally interesa kaj sekureco-rilata diskutoj gxi de John Oliver, kvankam comediante. 

Sed se ne estas plua demandojn, kiu alportas nin al la ricevo. Do kial ne mi ŝaltas la muzikon. Malaperis trinkaĵoj kaj manĝetoj ekstere. Mi estas feliĉa por miksi cxar Dum homoj ŝatus, respondi demandojn pli unu-sur-unu. Sed, alie, vi estas bonvena demeti en ajna punkto, kaj ni vidos vin denove morgaŭ matene por iom pli. Bone, dankon.