David J. MALAN: Rendben. Visszajöttünk. Tehát a cél ennek a záró ülésén kell bevezetni néhány fogalom hanem hogy mindenki egy esélyt hogy milyen nyúlik ujjaival és valóban tenni valamit egy kis kéz-on. A cél nem az, hogy kapcsolja mindannyiunkat webfejlesztők bármilyen eszközzel, de tényleg csak hogy adjak egy kis ízelítőt néhány Az alapvető konstrukciók, hogy mi bemegy webes programozás és a mai web fejlesztés, így a statikus oldala things-- nincs logika, nem programozás nyelv, csak statikus tartalmat. És ez ad nekünk egy lehetőséget hogy ténylegesen mi a web szerver, hogy milyen egy HTML fájl, milyen ez HTTP ténylegesen szolgálja ki. De mielőtt tovább olvasna, visszamenőleges kérdések a számítási felhő vagy biztonsági, vagy bármi a kettő között? Nem? Rendben, nos, Ehhez, csak abban az esetben A folyamat feliratkozás valami néhány percet vesz igénybe. Majd hagyjuk, hogy csináld a háttérben. Menj előre, ha lehetne, erre az URL here-- c9.io. Ez egy harmadik fél service-- platform mint szolgáltatás, ha will-- hogy megy, hogy meghívjuk Önt regisztrál egy fiókot, és ez meg fog adni minden van egy számlát az úgynevezett cloud valaki másnak az infrastruktúra, nevű cég Cloud9. De mi szép a ez az, hogy kapsz közelítése az tényleges valós fejlesztési környezet, bár a felhő és egy web böngésző, és fogjuk használni ezt a tulajdonképpen kísérlet egy kicsit ma. És akkor megy előre, és csak navigáljon az utat a regisztrációs folyamat ha tudnál. Így történhet meg, hogy használja ezt az osztályban Tanítok minden diákunk, mind az egyetemen, és most már le, és cserélődik, amit történelmileg egyébként letölthető szoftver. Tehát mit jutását Ezek egyike a virtuális gépek, lényegében azt leírtam korábban. Tehát ez a cég Cloud9 valószínűleg bérleti díjak egy harmadik party-- valóban Ebben az esetben a Google-- egy egész csomó virtuális gépek hogy valahogy vágjuk fel Az illúzió az egyes kiszolgálók hogy mindannyiunknak van teljes ellenőrzése alatt. Ez nem egészen pontosan megmondani hogy ők a virtuális gépek, mégis, mert mi Cloud9 ténylegesen használja egy kissé újabb technológia nevezett tárolási. És hadd fogd ezt a képet Itt festeni ezt a képet. 

A konténer, ha felidézni a képet A korábbi, egy kicsit könnyebb súlya van, mint egy virtuális gép. Sőt, mivel az elmúlt időben beszéltünk ott hogy a működési rendszer és egy hypervisor majd a vendég operációs rendszer, a vendég operációs rendszer, a vendég operációs rendszer, a tetején a fizikai hardver, A különbség ez újabb technológia, tárolási, az, hogy minden valahogy osztani ugyanazt az operációs rendszert. De még így is létre az illúziót mindenki amelynek saját kizárólagos közigazgatási jog és fájlok a szerveren. De van kisebb szoftver közted és a hardver. Az eredmény, amely, a Elméletben egy nagyobb teljesítményű, mert még a jó vagy pazarlás kevesebb erőforrást on, hogy az úgynevezett virtualizációs réteg. Ezért hívják tárolási természet útján egy technológia az úgynevezett Docker, ami nagyon jön be a saját. És ez az, amit mérnökök a cég Lehet ilyen fajta elkezd beszélni mintegy hamarosan, ha még nem tette meg, bár biztosan nem ok ugrik bármilyen bandwagons. 

Tehát, hogy azt mondta, hogy mi akkor talán most látni egy képernyő, amely úgy néz ki, egy kicsit olyan, mint ez. RENDBEN. És csak hívj át, ha nem. És ha so-- átjövök, ha nem. Menj előre, és kattintson, hogy a nagy plusz, hogy hozzon létre egy munkaterületet, és meglátja a képernyőn, mint ez. Akkor hívja a munkaterület Íme, amit akarsz most. És csak tényleg az egyszerűség kedvéért, megy és-- is, néhányan Már munkaterületeket. Nevezzük amit want-- üzleti, Harvard, csütörtök, amit szeretne. Nem kell a leírást. Akkor hagyja magán, ha nem Már van egy csomó munkaterületeket. Ha kénytelen legyen nyilvános, ez rendben van a mai célra. Itt is az egyik upsells. Kapsz egy saját munkaterületet alapértelmezett. De ha többet szeretne, meg kell fizetni több. Ellenkező esetben, erőt, hogy a munka nyilvános. De ez rendben van, mert ők is célozza ezt a nyílt forráskódú közösség ösztönözni az embereket, ténylegesen együtt. 

És az utolsó dolog, ami fontos, bár ez után úgy dönt, egy név és miután kiválasztotta a magán- vagy az állami, kattintson HTML5, a nagy narancssárga ikon balról a második, és a majd a Create munkaterület. És ez valószínűleg hogy egy perc múlva, de akkor majd egy környezet, ha egyszer csinálni, hogy úgy néz ki, emlékeztető amim van a képernyőn itt. De ismét, ez eltarthat egy percig vagy annál több, hogy ezt a képernyőt Miután rákattintottál létrehozása munkaterület. De csak jelölj engem, ha szeretnéd, hogy megnézzük semmit, vagy tanácsot. Rendben. Így fogok háttér ezt most. Hívj át, ha úgy tűnik, hogy bármilyen technikai nehézségeket. De ismét, ez eltart egy kicsit arra, hogy nyissa ki. És menjünk előre, és beszélni, hogy mit ez valójában azt jelenti, hogy egy weboldal, ami a HTML, és hogy mindez hogyan most összeköti a kezdünk hogy ténylegesen használni bizonyos technológiával. Így kiderül, hogy tudok menj az én kis Mac ide, nyit egy egyszerű program neve TextEdit vagy a Windows tudnék nyitott egy úgynevezett Notepad.exe. És én is csak egyszerűen csinálni valamit Így-- "hello, world". És akkor tudtam menteni ezt hello.txt Tehát nem varázslat van. Ennek semmi köze a web programozás, semmi köze a HTML. Csak létre egy egyszerű szöveges fájl. De kiderül, hogy a web oldal szó, hogy csak. Ez egy egyszerű szöveges fájl, amely a szöveg hogy lehet gépelni a billentyűzeten, de általában, de nem mindig végződik nem .txt, hanem .html vagy .htm. És nem csak típus szó a fájlban. Te tényleg kell használni a dolgokat az úgynevezett címkék vagy általánosabban, valami nevezett jelölőnyelv. 

Úgyhogy nagyon gyorsan írja majd magyarázza a következő. Megyek az első írja ezt, amely azt mondja, hé, böngészője, itt jön egy weboldal írt HTML. És ez a két dolog együtt mondják, hé, böngésző, a következő valóban HTML. Hé, böngészője, itt jön a fej vagy a felső oldalam. Hé, böngészője, belsejében a felső Az oldalam, hogy egy cím, hogy "hello, világ." Hé, böngészője, miután a fejét az én oldal, itt jön a test oldalam. És, hé, a böngésző, a test az én oldal is mondani, hogy "hello world". Tehát mi a legjellemzőbb részleteket itt? Ez az, amit általában úgynevezett doc-típusú nyilatkozatot, és őszintén szólva, ez egy kicsit Nehéz megjegyezni ezt először. Csak ilyen copy-paste is. Ez a hivatalos utat mondván, hé, böngészője, Én használ HTML 5-ös verzió, amely kijött az utóbbi időben némileg. Ez egy mágikus ráolvasás, hogy néhány emberekben a rossz értelemben vett tervezés úgy döntött, hogy a legtetején a fájlt. Annak ellenére, hogy ez egy kis misztikus, ennyi az egész ez means-- hé, böngészője, itt jön 5. verzió HTML. 

A többi ezt már velünk egy ideje már, történelmileg, de ez már fejlődik, és ez Valószínűleg már kezd egy kicsit egyszerűbb. Figyeljük meg néhány jellemzői Az, amit én kiemelve. Vannak ezek a dolgok hajlított brackets-- a bal oldali zárójel és a megfelelő tartót. És észre a szimmetria. És szimmetria, úgy értem, ahogy én ezt kezdőcímke itt vagy nyitott tag ha úgy tetszik, itt lent van egy A záró tag vagy zárócímkét ez különböző csak annyiban van ez perjel elején a szó HTML. És azt lehet gondolni ezt én véletlenül javasolja előtt, hé, böngésző, itt jön néhány HTML. És megfordítva, hé, a böngésző, az azt a HTML-- kezdetét és végét. 

Eközben hé, böngészője, itt jön a fej oldalam. Hé, a böngésző, hogy ez az a fej. Hé, böngészője, itt van a test oldalam. Hé, böngésző, ez a szervezet számára. És aztán az valami tetszőleges szöveget most. És belül a fej, eközben valami önkényes, de címkézett, hogy úgy mondjam, a szöveg, amely azt mondja, a cím Az oldalam legyen "hello, world". Most, most, akkor Feltételezzük, hogy a böngészők Van only-- vagy inkább, web oldalak csak két részre osztódik, a fej és a test. És a fej általában csak mint például a menü, a cucc tényleg csak a legtetején. És a test a beleket az oldal, mindent, hogy a nagy téglalap amely kitölti a képernyőt. Így fogok menni előre, és erre a célra. Fogok menni előre, és Mentés gombra kattint, a Fájl mentése. És én fogom megmenteni ezt hello.html, és én csak megy tedd az asztalon. És én megyek előre, és kattintson a Mentés gombra. És notice-- a Mac át Legalább ordít rám. Biztos, hogy akarja ezt? És én fogom mondani, igen, használj HTML. Tudom, jobb ebben az esetben. És most fogok menni az asztalon hol van ez a fájl hirtelen. És megyek, dupla kattintással meg. És észre fogod venni, hogy a Chrome alapértelmezés megnyílt. Azért, mert ez az, az alapértelmezett böngésző. És ez csak mondja, "hello, világ". De azt mondja, "hello, világ "két helyen. Figyeljük meg a bal felső sarokban. Elég nehéz nem észrevenni, hogy az. Ez nagy és merész. És hol máshol nem tűnik mondani, hogy "hello, világ"? 

KÖZÖNSÉG: a lap. 

David J. MALAN: Igen, a fület. Tehát amikor azt mondta a fejét a oldal mindent top-- és valóban ez a címe. Ez csak a lap itt. És tudom húzni ezt a lapot ki oly módon, hogy ne keverjük össze. Ez csak egyetlen lap most, és valóban látni a "hello, világ" itt és a "hello, world" idelent. Tehát nagyon egyszerű. De ez is elég egyszerű. És valóban, én nagyított. Meg tudom változtatni a betűméretet csak felmagasztalni a hozzáférhetőség. De nézzük most tenni valamit egy kicsit érdekes. 

Megyek go-- Hoppá, hadd térjek vissza a szöveges fájl. Megyek vissza a szöveges fájl, és megyek hogy ez megváltozzon, és azt mondják "Hello, Disney World." Mentés. És menj vissza a böngészőt, és kattintson újratöltése. És most, persze, azt mondja: "Disney World." És fogok mesterségesen zoom mindössze így könnyebb látni. Tehát most, sajnos, azt a fajta akar alábbiakra: valóban, ez egy Mac funkciót. Azt akarom, hogy kattintson a Disney World és valahol, mint disney.com, de ez nem működik. Tehát egy alap tétele a web hivatkozások, linkek, menjen máshová. Tehát hogyan tudom ezt? Nos, én is csak azt mondom, "Hello, http://www.disney.com." Mentése. Újratöltése. De ez is, nem lehet rákattintani. És mi szép itt, bár ez nem működik még, az, hogy úgy tűnik, hogy a böngésző szó csak azt teszi, amit mondok, hogy igen. Tehát, ha én csak írjon be egy URL, mint ez, ez csak megy, hogy mutassa meg az URL-t. Azt kell használni tag vagy kijelölés nyelv valójában mondani A böngésző, hogy még többet. Így fogok menni előre, és törölni ezt egy pillanatra. És én fogom mondani, hé, böngésző, amikor egy horgony itt, egy linket úgy mondjam. És a hiper-referencia, a cél Az, hogy a rögzített, legyen ez az URL. És észre a idézetek. Jól jönne aposztrófot is de van, hogy legyen következetes, és én általában csak használ idézőjelek között, hogy ez egyszerű. Figyeljük meg fogom zárni a címkét. És akkor itt fogok mondani, hogy "a Disney World." És most kell egy kis symmetry-- nyitva tartó, / a, zárt tartót. 

Tehát mit tettem be? Már volt egy pár tag már. HTML, Head, cím, test, mind címke, hogy úgy mondjam, nyitott és zárt társaik. De észre, ez a fajta az alapvetően eltérő. Ez az, amit fogjuk hívni HTML attribútum. És egy attribútum Csak egy kulcs-érték pár. Ez egy gyakori dolog számítógép tudomány-kulcsértékpárhoz. Ez a fajta a szerszám a kereskedelemben. A kulcs és az érték. Egy szó, majd néhány szót vagy szavakat. És ebben az esetben, a kulcs href, és ez az érték, hogy a teljes URL-t. És mi az az attribútum nem ez befolyásolja a viselkedését egy tag. És ebben az esetben van szükség, hogy befolyásolja viselkedését a horgony tag, mert szükségünk van a horgonyt ezt a linket valahol. És hogy te, hogy az útján az attribútumot. 

Így fogok menni előre és mentse a fájlt most. Menj vissza a böngésző és reload. És íme, most már a kezdetei jogos weboldal. Szuper-egyszerű, de ha fölé viszi this-- értesítést a bal alsó sarokban, ez szuper kicsi. De te látni www.disney.com. És ha rákattintasz, akkor valóban ez habverők el engem a disney.com. Most, a furcsa dolog itt az, hogy nem A best-- a leginkább piacképes URL, de ez rendben van, mert a fájl nem létezik a World Wide Web. Létezik egy helyi fájlt látszólag én Felhasználók directory-- / jharvard-- John Harvard-- / asztalon. De van egy URL-t. Ez most történik, hogy a helyi. Sajnos, sem akkor látogasson ezt, mert ha beírja ezt az URL, akkor lenne elmondja a böngésző, keresse meg a fájlt úgynevezett hello.html a merevlemezen. És, persze, kivéve, ha követte végig kézzel, ez nem fog létezni ott. 

Tehát ez rendben van. Kell még egy út, végül, hogy ezt a fájlt a web, de nézzük ugratni egymástól pár biztonsági vonatkozásai, amit most látta, és kösse vissza a korábbi vita a ma reggeli. Kiderült, hogy ha egy böngésző szó szerint csak igen amit mondok, hogy ezt, és úgy tűnik, hogy ez a helyzet, hogy egy horgony tag befolyásolja az értékét Az attribútum nevezett href de akkor a kijelző a szöveg, ez tűnik jelenti azt, hogy én is fel az URL-t mindkét helyen, majd töltse be újra és most látni az URL-t és menj a URL-t. Figyelmeztetés, ha az egérmutatót a bal alsó, Én valóban ezt még disney.com. 

Tehát, ha valaha is phished-- P-H-I-S-H-E-D-- az egyik ilyen hamis e-mailek re, mint a PayPal a bank, akkor már valószínűleg ütött linkeket belül Az e-mail, hogy olvasod, hogy azt mondja, hogy ide kattintva erősítse a jelszót, vagy hagyja jóvá a születési társadalmi vagy valami szociálisan mérnöki, hogy hozzák nyilvánosságra információ. Nos, talán egyfajta venni Előnye ennek is, nem igaz? Mondhatnám valamit mint, www.paypal.com. És ahelyett, hogy disney.com, I Lehet menni, mint a badguy.com. Újratöltése. És milyen egyszerű ez, hogy balek, különösen a nem műszaki olvasó vagy felületesen olvas olvasó, mint kattintani egy linket, ami ha rákattintok it-- Igazából nem akar menni badguy.com. Nem tudom, hogy mi van ott valójában. Tehát paypal.com, értesítést, az mit mond ez fog, de persze, ha lenézek rendkívül alacsony, ez egy kicsit homályos, de azt mondja badguy.com. Ez az egyetlen mondani most hogy megyek a rossz helyen. És amikor azt mondta korábban, hogy a bankok tényleg nem ösztönözheti vagy vonattal felhasználókat kattintva kapcsolatokkal rendelkező csak egy megnyilvánulása is. És ez ilyen egyszerű. Ön most egy ellenség, ha teszel valamit, mint ez és megpróbálják becsapni a felhasználó a látogató a honlapon. De most fogjuk tartani dolgokat, szép és tiszta. Megyünk, hogy menjen előre és visszatekerés ezeket a változásokat. Az oldal újratöltődik. És megyek vissza disney.com. 

Lássuk, mi nem kötekedik ezt leszámítva még egy kicsit. Tehát a "hello, Disney World." Azt fogom mondani itt. Talán megyek, hogy néhány szoba. "Reméljük, hogy jó szórakozást!" Mentés. Újratöltése. Ez nem rea-- ez nem amit akartam, nem? Úgy értem, ha én kezelésére én szöveges fájlt, mint egy szövegszerkesztő, mit remélsz fog történni itt? Igen, úgy érzem, ott legyen sortörés van, ezért úgy érzi, hibás valamilyen módon. De ez valójában szándékos, mert csak, mint korábban, A böngésző csak akkor fog nem amit mondani, hogy igen. Nem mondtam azt, hogy megtörje vonalak. Már nem mondta, hogy mozog lefelé, akár bár, ösztönösen, úgy érzem, mint én. Így kiderül, szükségünk van egy kicsit több jelölés, és megyek, hogy erősít ez a következő. Megyek előszavában ezt először szia A mi úgynevezett paragrafus. Aztán megyek előre és csavarja a másik mondat egy másik paragrafus, noha ők szuper-rövid bekezdések. Most fogom menteni. Újratöltése. És most, hogy tér, és mi fajta van szemantikája két külön bekezdésben. 

Ez mind szép és jó, de ez Jó lehet hozzáadni egy képet az oldalon így fogok menni keresni Mickey Mouse on Google Images. És csak a móka kedvéért, én fog megragadni ezt a képet. Megyek, hogy menjen előre, és most megragad az URL ennek a képnek, bár van más módon lehet megtenni. Egyelőre én csak fog másolni az URL. Megyek, hogy menjen vissza a saját szöveges fájlt, és fogok mondani itt, img src = idézet idézőjel bezárva hogy az URL, szuper hosszú. És akkor a fogalom egy A kép egy kicsit más. Már tényleg nincs fogalma kiindulási egy képet, és szüntesse meg a képet, mint egy kezdőcímke zárócímkét. Tehát úgy érzi, egy kicsit furcsa, hogy nekem szemantikailag Ehhez hogy van egy közeli kép tag. Ez nem hibás. Ez teljesen korrekt, és ez ösztönözte, de van rövidített jelölése. Tudok a fajta egyszerre nyitni és zárni ugyanazt a címkét, és teszi a böngésző boldog. Tehát ez csak egy kicsit tömörebb dolgok hogy fogalmilag tényleg nem értelme kezdetét és végét. Ők csak ott van, vagy ők nem. 

Így fogok menteni ezt, és menjen vissza az én "hello, world" oldalra, és reload. És ez egy kicsit az ellenőrzés, mert ez a kép valójában egy kicsit nagy, de ez rendben van. Tudtam átméretezni egy programban. Vagy tudod mit. Csak bizonyítani, én fog tulajdonképpen azt mondják hogy a szélessége ezt a dolgot kellene csak 200 pixel, 200 pont. Hadd menjek előre, és mentse és töltse be újra, és most az oldalt úgy néz ki, egy kicsit ésszerűbb. De észre a mintát. Nos, a fajta tanított meg minden HTML bizonyos értelemben, legalábbis fogalmilag, mert minden HTML van ezek tags-- nyitott tag, zárt címkék, és attribútumok módosítani a viselkedésüket. És úgy tűnik, minden tag lehet nulla vagy egy vagy két vagy több attribútum mindegyik amely nem egy kicsit más. Most, hogy tudod, hogy mi van? Te csak figyelj, hogy valaki mint én megmondom, mit létezik, vagy ha csak a Google körül egy bemutató HTML, és ez tényleg ilyen egyszerű. 

Valóban, amikor én egyetemista évvel ezelőtt, és tanult HTML, az egyik matematika tanítás asszisztensek most töltött Egy kis idő tutori nekem a hasonló fél óra, egy óra, majd én utamat. Én utamon felé, hogy legborzalmasabb honlapok valaha, amely, úgy tűnik, én nem igazán haladt túl. De a lényeg az, hogy ha egyszer megérteni ezeket az egyszerű ideái ha misztikus text-- de ezek egyszerű ötletek a kezdő gondolat és a záró gondolat, tartása Mindent szépen egyensúlyban, keres valamit, módosításával viselkedése, hogy a tag, hogy tényleg minden van rá. És valóban, ha most megy valami hasonló google.com-- valójában, menjünk a hely egy kicsit reasonable-- stanford.edu. És fogok menni megtekintése, Fejlesztő, Forrás megtekintése. Ez csúnya, de notice-- és én nagyítás nyilatkozat Néhány dolog, ami már ismerős lehet. Van ez itt, amely egy böngésző. Itt jön HTML5. Van HTML. Úgy tűnik, van egy attribútum, amit én nem használja, hogy meghatározza a oldal nyelve, és ez segít az automatikus fordítás és ilyesmi. Itt a fejét az oldal. Itt a címe Stanford oldalon. Van egy tag nem tettem beszélni rákattintani Meta tag. Ez csak egyfajta háttér-információ. Segít a SEO, vagy Keresőoptimalizáció, vagy a Google-találatokat, vagy hasonlók. De ha folyamatosan keresi, folyamatosan keres, itt a Body tag. És van fürtök egyéb címkék már nem beszéltünk még. De Div egyike a felosztása az oldalt. Ez olyan, mint egy láthatatlan téglalap ha a fajta szeretne mentálisan osztani az oldalt különböző egységek az interneten. Aztán sok divs I lásd úgynevezett osztály, de majd jön vissza, hogy a. 

Ez interesting-- Forms. Az űrlapok az egész weben. Bármilyen keresőmező te valaha egy formája. És így, nézzük valóban látni. Forma. Akció. Az akció ebben a formában, bármilyen Történelmi okokból az, hogy URL-t. Módszer "üzenet." Kiderült, hogy a HTTP kérések használhatja Az ige "kap", mint láttuk korábban, vagy "post". És látni fogja a különbséget E egy pillanatra. Nézzük valóban látni, hogy mi ez. Térjünk vissza a Stanford oldalon. Milyen formában ők beszélnek kb, mit gondolsz? Mi ugrik ki rád? 

KÖZÖNSÉG: Keresés mezőbe. 

David J. MALAN: Igen. Tehát fel a jobb felső Itt van ez a Keresés mezőbe. És ez hogyan hajtják végre it-- egy címke, ami a szó szoros értelmében a nyílt konzol formában. És akkor nézzük keresni valamit. Keressünk egy haver A mine-- "Nick Parlante." Belép. És persze, hogy elment a egy kicsit más URL-t. Térjünk vissza ide. Keressünk "képzések". A fenébe is. Elmentem egy másik URL-t. Tehát, a Stanford hozzá néhány mágikus hogy ők nem viszel az URL hogy láttuk a akció attribútum van. De ebben a formában itt végre tisztán Ez által jelölés van, ezeket a címkéket. Sőt, itt a bemenet a keresés típusát, amit akar. Itt van a bemenet más típusú keresést. Itt van a bemenet a húr is. És így a cél nem az, hogy lezárja elménket körül az összes ilyen tag de csak látni. Ez csak nyitó és záró címkék és keresi a dolgokat. Igen? Victoria? 

KÖZÖNSÉG: [hallható] David J. MALAN: Ez egy jó kérdés. Ez egy kicsit trükkösebb látni. Hadd jöjjön vissza, hogy a kérdés mindössze néhány perc alatt ha megnézzük egy úgynevezett CSS, vagy a Cascading Style Sheets, és próbáljuk meg kikövetkeztetni annyi az oldalról. Tehát, ha most megnézzük google.com, lássuk, mi a lap néz ki. Azt they're-- ez aranyos ma. RENDBEN. Minden kész. Rendben, tehát Forrás megtekintése. Azt gondolnánk, a Google nagyon szép forráskód. Tehát úgy tűnik, hogy mi folyik itt? És valóban, ez nem is a HTML. Ez egy úgynevezett JavaScript. És maradjunk megy és megy. Azt sem tudom, hol az oldalt kezd. Azt fogom használni Command F, nyitó zárójel HTML. Rendben, ez van. Találtam kezdete az oldal, és van annyi dolog van itt. 

Mi történt valójában? Nos, tudod mit, mi is tiszta ezt fel. Ha ehelyett megy ez Ellenőrizzük eszköztár, ez a különleges diagnosztikai eszköz, és nem megy a hálózat, ahol folyamatosan megy ma, de ha elmegyek Elements, ami igazán szép az, hogy a böngésző egy csomó sokkal jobb szeme, mint én. És a böngésző tudja olvasni hogy rendetlenség a weboldal, hogy a HTML mail mi csak nézett, és azt is feldolgozni, vagy olvassa el és elemezze és formázza meg egy szép ember-barát módon. Tehát, amit látok most Ezen a képernyőn ide alatt Elements, pontosan ugyanazt a tartalmat, de már behúzott mindent, ők már színezett, de ez pontosan ugyanaz a szöveg amit letöltöttem a szerverről. 

És mi szép most látok a szervezetben, az instance-- értesítést, Az oldal még mindig áll A csak egy fej és egy test, és én is hierarchikusan merülés itt. Figyeljük meg, hogy a Google úgy tűnik, hogy hogy divs-- ez és ez. Azt lehet bővíteni, hogy. Van egy csomó más divs. Tehát ez egy kicsit bonyolult. De várj. Ez úgy tűnik, hogy sokkal olvasható, viszonylag, mint ez. Miért Google kínos magát elküldésének ez a hatalmas rendetlenség a kódex egyes sort, csak hogy végre valami hogy úgy néz ki, egyszerű, első pillantásra? Mint, miért nem hozzá több hely? Miért nem nyomja meg az Enter, mint én? Nézd, milyen jó voltam írási egy internetes oldalon. Azt hit Enter oly szorgalmasan. Azt behúzva, így minden olyan szép és olvasható. A Google miért nem gyakorolják az ugyanaz? 

KÖZÖNSÉG: [hallható] David J. MALAN: Jó. Nagyon szép. Nem kell valamilyen személy Google kézzel frissítése a honlapon már. Ez nem 1999 már. Tehát ezek szoftver. Vannak más eszközök generál dinamikusan ők HTML. Persze, hogy a kód maga írta emberek, de a valóság az, ez elég elmondhatjuk, A böngésző biztosan nem érdekel, hogy rendetlen a kód. De van egy még kényszerítő technikai ok hogy a Google forgalmazza a HTML kódot egy ilyen hanyag, látszólag nyomasztó módon minden összezsúfolva nagyon kevés way-- nagyon kevés ahogy a formázás, mint én. 

KÖZÖNSÉG: [hallható] 

David J. MALAN: gyorsabb? Miért? És mit mondott, Lydia? Gyorsabb? Miért gyorsabb? KÖZÖNSÉG: [hallható] David J. MALAN: Van nincs hely, hogy olvassa el. Igen. Tehát úgy gondolja, hogy mi az a hely. Így minden karaktert a billentyűzeten tart bizonyos mennyiségű helyet, hogy képviselje, akár fizikailag, akár tetszik, vesz fel, hogy sok helyet, vagy valahogy alatt motorháztető, amely előírja, hogy a memória. És mint aside-- és mi még beszélni ezt tomorrow-- minden karaktert a billentyűzeten tipikusan 8 bit, vagy egy bájt. Tehát a minta 8 nullát vagy is, vagy csak 1 byte, mint mi emberek jellemzően mondani. Tehát ez a kicsi, de ez még mindig nem nulla. Ez még mindig egy kis mennyiségű helyet. Tehát, ha egy mérnök vagy Google találat a szóköz csak egyszer, és tegyük fel, Google számára ez a szuper-popular-- Tegyük fel, hogy egy milliárd ember látogasson el a honlapon egy nap, vagy valamilyen emberek száma keresse fel a honlap egy milliárd alkalommal egy nap, hány további bájt van, hogy szoftvermérnök csak költség Google ütő ő szóköz egyszer? 

KÖZÖNSÉG: [hallható] David J. MALAN: nem elég, hogy rossz. Csak egy byte-szor egy milliárd. Tehát egy-- KÖZÖNSÉG: 8000000000 gigabájt. David J. MALAN: Nem 8000000000. 8000000000 bájt. De 1 gigabájt. 1 gigabájt lesz a mértékegység. Ha ő nem két terek, 2 gigabájt. Három gigabájt. Jobbra? Ez mérlegek drágán. És az olyan esetekben, mint a Google, amelyek megadják, szélsőséges esetekben, vannak más kérdések merülnek fel, csak azáltal, hogy nagyon ésszerű döntéseket vagy vesz nagyon egyszerű emberi tevékenységek, mert nagyított hatása. Tehát az egyik oka ez úgy néz ki, sűrített pontosan úgy, ahogy Victoria said-- volt Csak generált számítógépek egyébként. Tehát nem nagy ügy. Hagyja, hogy a böngésző kitalálni. De ez is tudatosan nincs sok hely, mert a tér nem szükséges. És a tér valóban pénzbe kerül. 

Ez sem kerül időben, mert csak, hogy álljon hogy sokkal több adatot ki google.com székhelye csak kapott, hogy bizonyos mennyiségű idő, akkor is, ha ez ezredmásodperc vagy ezredmásodperc, de összeadódik mint oly sok felhasználó, vagy ami valószínűbb, valószínűleg pénzbe. A Google valószínűleg csatlakozik valaki a világon, az egyik e hajol pontokat, és ha van valamilyen pénzügyi kapcsolat amelyben ezek az adatok pénzbe, Lehet, valamint minimalizálása, hogy mennyi adatot ők kiköpte a az internetes kapcsolat. 

Tehát az a vicces, de végül, vagy talán a megnyugtató dolog, az, hogy bár ez úgy néz ki szörnyen nyomasztó, a végén a nap, ez még mindig pontosan ugyanolyan elvek ezt a nagyon egyszerű oldalt itt egy HTML oldal. Tehát csak összefoglalni, és így Van egy kanonikus verzió, ha nem következő mentén választás itt, itt lehet a legegyszerűbb weboldalak, így valami játszani talán később. 

Nos, nézzük bevezetni pár más ötletek most. Azon vagyunk, hogy vezessenek egy úgynevezett stílus tag. Mi stilizálhatja ezt az oldalt több érdekes módon. Tehát míg a HTML e-mail arról szól megjelöléséről Az adatok egyfajta meghatározva a böngésző hogyan strukturálják az adatokat, hová tegye, CSS, vagy Cascading Style Sheets, egy második nyelv, általában kap keveredni HTML mivel mi see-- de mi is tiszta hogy akár egy moment-- vevő ez az utolsó mérföld, és stilizálja azt. Ez lesz a megfelelő szín, A betűméret csak jobb, A helymeghatározás csak jobb. Ez az egész arról az esztétika vagy formázza, és nem a Az alapvető adatok is. És a legegyszerűbb módja, hogy mutassa ez talán jó példával. Szóval megyek át az én egyszerű szöveges fájl. És csak egy pillanatra, én séta minket a folyamat Az ezt magunkat. 

Fogok menni vissza a fájlt Itt és újratölti az oldalt csak megerősíteni, amit úgy néz ki. Ez itt tartunk most. Úgy érzem, a gyerekek élvezni fogják némi színt a weboldalon. Így fogok menni ide a fej az oldal. És én fogom csinálni stílus / stílus. És akkor belsejében ez, megyek mondani a test az én page-- és ez a formázás, a Első pillantásra talán egy kicsit Furcsa, de a hagyományos. Azt fogom mondani, hogy a háttérben színes oldal zöldnek kell lennie. És ez sajnos fajta nem a legjobb design. Figyeljük meg, hogy a korábban a HTML világában, Azt mondta, hogy attribútumok ezek kulcsértékpárok. Valami egyenlő idézet idézet vége "valami". A világ a CSS, ami Ajánlott néhány különböző emberek, úgy határozott, hogy a világ, kulcsértékpárok lenne szó kettőspont valamit. Tehát ugyanaz a gondolat, mégis. Ez tömörítő érték néhány kulcsfontosságú, hogy valahogy befolyásolja a viselkedését ezen az oldalon. 

És akkor talán kitalálni. Mi ez valószínűleg fog hogy még ha soha nem látott HTML vagy CSS előtt? KÖZÖNSÉG: változtassa meg a háttér színét. David J. MALAN: Igen, változtatni a háttér színét. És különösen a háttér színe a test. De amennyiben az testület most a web page-- ez az egyetlen dolog, a címsor alatt really-- ez valószínűleg a befolyásolják ugyanezt. Tehát lássuk. Mentsük ezt. Menj ide, és töltse be újra. Elég undorító. És mi a helyzet itt van egy mellékhatás. Én csak úgy döntött, ez a kép véletlenszerűen. Miért van a zöld nem átható mögött Mickey? KÖZÖNSÉG: [hallható] David J. MALAN: Pontosan. Kiderül, hogy a képek, szép sok minden kép, amit lehet használni, mind rectangles-- téglalapok. Még ha Mickey vannak görbék magában, és a háttérben, Ebben az összefüggésben kell lennie valaminek. Meg kell fehér. Azt, hogy fekete, vagy valami mást. Ez lehet átlátszó. És valóban, én is nyissa Mickey Mouse ide a program neve Photoshop vagy valami hasonló és a változás az összes, hogy a fehér háttér átlátható, így a zöld lenne ragyog rajta. De ez olyasmi, amit kellene kérni magam, vagy egy grafikus vagy a tervező az én cég, például, tenni, különösen azért, mert én csak kölcsönzött ez az interneten. De hogy ez miért történik. 

Tehát mi mást akarunk csinálni? Nos, érdemes lehet mondjuk Nagyon remélem, élvezni az üdülés. És hangsúlyt szeretnék hogy ez az erős, és így azt mondom nyitott erős és zárja erős, majd töltse be újra. És ez egy kicsit nehéz hogy a kivetítő de talán most tényleg ugrik ki téged egy kicsit. Így hozzá dőlt ebben módon, félkövér néző ezen a módon. Mi lehet változtatni a színeket. Sőt, csak a hecc kedvéért, én fog menni előre, és erre a célra. Nem igazán tetszik, hogy én bekezdések ez közel vannak egymáshoz, úgyhogy lehet ilyesmire. Azt fogom mondani a böngésző, változás minden paragrafus van, nézzük say-- valójában, tudod mit, nézzük igazítsa text-align, központ. És ismét, tudom, hogy ez csak mert valaki tanított meg rá vagy Utánanéztem a egy online referencia. Szóval hadd mentse el ezt. És, ah, most már középre a kép ott. És valóban, tudod mit, ha Mozgok én képet egy bekezdés tag-- így egy harmadik bekezdésben annak ellenére, hogy nem a szövegre. Nézzük meg, de ekkor és újra. Most a oldal kezdi meg kedves of-- Úgy értem, ez még mindig elég csúnya, de legalább úgy néz ki, mint én töltöttem Két perc helyett egy perc így. 

És így, fokozatosan, tehetjük ezek esztétikai változtatásokat most az oldalt? Már nem igazán változott az adatokat a oldal kivételével hozzáadjuk a szó valóban. Adtam metaadatokat, ha úgy tetszik. Hé, a böngésző, hogy a szó "igazán" merész. De az adatok nem erős. Ez metaadatokat. Az adatok "igazán." Tehát még mindig van néhány ugyanazokat a fogalmakat, mint korábban. Most, persze, ez nem az interneten, így fogok tenni egy utolsó lépés itt. 

Megyek menni hello.html és csak kiemelni, és másolja ezt. És most megyek bemegy Cloud9, amely Majd végigvezeti csak egy pillanatra. És esély akkor hamarosan, ha nem tette meg, a képernyőn, mint ez. És hadd adjak egy gyors bemutatjuk a Cloud9 valójában. Így ismét felhő 9 ez a felhő-alapú szolgáltatás hogy megadja neked és nekem az illúzió , amelyek a saját virtuális gép a felhő, technikailag egy tartályt a felhő, hogy teljes mértékben adminisztrátori jogosultsággal. Így elméletileg senki máshol a világon Belépés a képernyőn vagyok nézi most, kivéve talán az emberek aki fut a helyén, mert technikailag vannak fizikai hozzáférés és így tovább. 

Tehát mit látunk ebben a környezetben? Megyek kicsinyítéshez mert ez egy kicsit kicsi. És hadd pont felett Itt csak egy pillanatra. A bal oldali az én és a képernyőn, van egy fájl böngésző bal oldalon. Tehát hasonló szellemben Mac OS és a Windows. Ezek mind a fájlok számlám. És alapértelmezés szerint, ha a figyelembe, mint az enyém, látni fogja, vagy hamarosan látni helloworld.html és readme.md. Több mint itt a jobb oldalon, ez ahol a szöveges fájlok fognak menni. Ha valaha is használt Microsoft Szó vagy Notepad vagy TextEdit ez szó én szerkesztése fájlok fog menni. És akkor a legnagyobb misztikus jellemzője ennek a környezet hogy nem igazán kell használni az idelent úgynevezett terminál ablakot. Ha már használt DOS yesteryear, ez a Linux vagy a Linux egyenértékű DOS. Ez egy szöveg-alapú interface-- nincs kattintással, nem húzzuk. Minden, amit tehetünk, hogy írja parancsokat, de a parancsokat létrehozhat fájlokat, a fájlok áthelyezése, nyílt könyvtárak, közel könyvtárak, do tetszőleges számú dolog. De most, akkor csak töltjük az időnket ide. 

És így csináljuk. Ha ebben a környezet, amely be lehet, ha létre egy munkaterületet már, megy előre, és csak megy felfelé File, New egy pillanatra. És, hogy kapsz egy új fül itt a közepén. És én csak-- és menjünk megy előre, és erre a célra. Menjünk előre, és most már fájlba mentése és megy előre, és hívja meg hello.html, Nem tévesztendő össze a helloworld.html, amely jött az új ingyenes fiókot, amely csak egy minta fájlt. Látni fogja, hogy hirtelen megjelenik, valószínűleg a bal oldali, és a lap továbbra is nyitott. És hadd javasoljuk, most, hogy újra ez a fájl, vagy néhány variánsai. És ha nem elég látni a képernyő, ez megegyezik a diákat hogy valószínűleg van egy másik lapon. 

Tehát röviden, hogy az első weboldalt, mentse el, majd egy pillanat, Majd én megmutatom, hogyan ténylegesen megtekintéséhez. De a változás legalább egy dolgot. Változás helloworld a valamit a saját választása, így meg van győződve, hogy ez a fájlt, és nem az, aki az imént létrehozott. Rendben. És ha nem ready-- rush--, ha készen áll, megy előre, és mentse el a fájlt ha már elvégezte ezeket a változásokat. És ha rákattint a Run gomb fel tetején, ezt kell nyitni egy új lapot, amely megmondja, mit URL, akkor látogasson el a fájlt, de lehet, hogy egy pillanatra idézet idézőjel bezárva "start Apache", amely a neve a webszerver. Ezért legyünk óvatosak, hogy pontosan mi van a fájlban végül. Tehát most, én nagyítás. Ha elkezd gépelni nyílt konzol HTML, értesítés ez arra kéri, hogy befejezzem a gondolatot. És ha végeztem a gondolat, hogy automatikusan ad nekem a záró tag. De az elvárás aztán majd nyomja Enter, majd mozgassa odabenn és ne fej és belül akkor én test belsejében. És ez egy kicsit furcsa először, mert ez ezzel a munka az Ön számára, de észre, hogy végül takarít meg karakternél. És valóban, egy nagyon gyakori jellemzője programozási környezet manapság mind a webes fejlesztés, mint a ez és a tényleges programozás, amely fogunk beszélni holnap, ezek automatikus teljes funkciók, dolog, hogy csak lehetővé teszi a programozó vagy tervező hogy írja kevesebb billentyűket elérni ugyanazt a dolgot. Néha jó, mégis. Néha csak bosszantó. És újra, ha már átírt A dia vagy valamilyen variánsa, akkor kattintson a Futtatás gombra fel tetején. És akkor az alsó ablak, akkor tájékoztatni kell hogy milyen URL meglátogathatja a weboldal. Az enyém például, a business-daharvard.c9users.io és így tovább. Rendben, igen, legyen me-- bármilyen kérdése? Bármilyen további kérdése van csak arra, hogy ez működik, mielőtt új funkciókat? És hadd javasolni, csak hogy emberek comfortable-- mert ez az egyik dolog, hogy csak copy-paste vakon, amit tettem. De csak azért, hogy az emberek birkózni legalább egy to-do, Megyek, hogy bekapcsolja a zenét. Megyek javasolt jegyzékét, dolog, amit esetleg hozzá. És akkor biztosan a Google. És miért nem megyünk javaslom, hogy próbálja megoldani legalább egy különleges problémát. Így tekintve címkék hadd újra ezt itt. 

Valójában, hadd tegye ez egy szöveges formában. Tegyük fel, hogy többek között a címkék talán használja itt van néhány tag itt. Láttuk a paragrafus. Most ez lesz az automatikus kitöltés. Paragrafus, a horgony tag. Tegyük fel, hogy azt szeretnénk, hogy hogy valami nagyobb, így előfordulhat, így: A span címke segítségével. Nos, lehet, hogy kell egy kis segítség az, hogy csak egy pillanatra. Láttuk div. Meglátod van táblázatot. Van egy úgynevezett tr, td. Th, td. Gyere vissza, hogy egy pillanat alatt. Mi mást lehet praktikus? Van erős. Van hangsúly, vagy inkább em. There's-- mi mást Lehet kedve van? Nos, vessünk egy nézd, hogy együtt. Form, amit valaha láttam. Van formában. Van bemenet és egy pár mások. Rendben, csináljuk. Hogy válaszoljak a Victoria kérdés, először hadd Csak győződjön meg róla, hogy mindenki tudja, hogy a halló dolgozik. Akkor hadd mutassam be Pár más ötlete. Akkor hagyja emberek megoldani Néhány probléma a saját. Aztán tényleg jön vissza hogy ez a fogalom a forma, és mi valóban újra végrehajtani együtt a front-end felület, hogy úgy mondjam, a Google is. Használni fogjuk a Google a hátsó, és hagyja őket nem a kemény munka, a keresés, de majd újra az elülső A Google és a keresési forma hogy azok a saját honlapján. És így fogunk térni ezeket a címkéket csak egy pillanatra. 

Tehát ez volt az, amit én javasolt Egy perce. Mi adhat a stilizáció egy oldal belsejében ez a stílus tag, és mi lehet stilizált háttér szín, a szöveg igazítás, hogy ez központ vagy balra vagy jobbra. De nagyon gyorsan tenné találni, vagy egy web designer azt találjuk, hogy ez a lesz egy kicsit nehézkes, mert te mit csinál úgynevezett keverési tartalom prezentációs képezik. Te keverés adatait és az esztétika cikke. És valóban, ha figyelembe vesszük, mi fog történni át time-- ez egy nagyon kicsi weboldal, természetesen. De ha új tartalommal ezen az oldalon és stílusossá ezt az oldalt, Az oldal nagyon gyorsan jelentkeznek hosszabb és hosszabb és hosszabb. És tegyük fel, hogy szeretnék Van egy másik weboldal, amely osztja néhány ilyen attribútumokat. Tegyük fel, hogy a második weboldal az én site-- is, azt akarom, hogy minden központban, és azt is akarom, hogy minden egy zöld háttér előtt. Én elég sok lesz, hogy másolás és beillesztés néhány ezeket a sorokat figyelembe, hogy a második fájl, amely úgy érzi, rendben van. Ez megoldja a problémát. 

De mi van, ha szeretnék egy harmadik oldal vagy 30. oldal, vagy egy 40. oldalon? Most megyek, hogy a másolás és beillesztés egy csomó kettős kód több fájl. És így tegyük fel, hogy Úgy döntök, vagy én mondtam, hé, mi nem használjuk a zöld háttér többé. Fogunk kezdeni a narancs. Mit kell változtatni? Nos, meg kell változtatni, hogy a stílus zöldről narancsra hány helyen? Mint 30 vagy 40 férőhelyes. Ez unalmas. Ez a hibalehetőség. Van számos oka ahol nem szeretne indukálni ezt a fájdalmat magad. És így nem lenne jó ha tudnánk venni, amit most tegye a két sárga címkék, ezek stílusú címkék faktort ki, és tegye az összes az én stilizáció egy központi fájlba hogy mind a 30 vagy 40 az én más fájlokat hitelt vagy valahogy hivatkozás, Nem ellentétben a hálózati ábrák csinálunk előtt? 

Tehát, ha megyek itt vagyok fog ténylegesen javasolni hogy cserélje ki a stíluscímke valami az úgynevezett link tag, amely szörnyen, rettenetesen nevű, mert nem használja a link tag létrehozni, amit mi emberek tudjuk, mint egy link egy internetes oldalon. Az, hogy használható, amely tag? Hogyan hozható létre egy linket egy weboldalon? Közönség: a a. David J. MALAN: A egy, vagy horgony tag, hogy elment a Disney előtt. A link tag itt azt mondja, this-- linket nevű fájl styles.css a kapcsolatot, amelyre lesz, hogy ez az én stíluslapot. Tehát ez az egyik az S In CSS-- Cascading Style Sheets. Stílus sheet-- két S CSS. CSS. Ez csak azt jelenti, hé, a böngészőt, menjen megtalálni styles.css a helyi kiszolgálón és használja az ott megadott stíluslapot, ami azt jelenti, hogy a fájl belsejében lesz az összes stylizations, hogy már csak tenni. És akkor mi van, hogy a fájl nézhet ez. És én csak ezt egy gyors Például azért, mert nem kell hogy túl sok a gyom itt. De ha másolni ezt, amit én javaslatot az, hogy a programozó új fájlt hoz létre, illessze azokban lines-- whoops-- illessze be ezeket a sorokat, mentse el styles.css, majd a A másik fájl, törölje az összes, hogy és cserélje ki helyette ezzel link tag. Tehát ha én link href = "styles.css" A jogviszony "stylesheet" A záró tag. Mentsd el. Menj vissza a helloworld. Újratöltése. 

Szó szerint semmi sem történt. Ez egy jó dolog, mert azt jelenti, hogy tulajdonképpen az összes dolgozó. Annak bizonyítására, annyi, tegyük fel, hogy egy typo, és én ezt "styles.css" nagybetűvel kezdve, ami hibás, majd töltse be újra. Most láthatjuk, hogy egyszerűen nem működik. Most, hogy miért? Nos, vegyünk egy technika a korábbi. Hadd menjek előre, és a böngésző, a Chrome, én fog nyitni, hogy a különleges hálózat lapon, mint korábban, és hadd töltse be újra az oldalt. Mit nem meglepő, hogy most? Vagy talán te meglepett, hogy azt. Akárhogy is, mit látsz most? KÖZÖNSÉG: [hallható] David J. MALAN: Ez nem találtak. Miért nem találtak? Nos, Styles.css-- tőke S- nem létezik. Azt misnamed azt. Egyszerű elírás. De kapok érthetően most 404, mert a szerver azt mondja, hé, ez nem található. Szó szerint, nem tudom, hol van a fájl. Tehát ennek eredményeként, a böngésző megmutatja, mit tud, A nyers az oldal tartalmát, ami egy 200, a HTML, de a stilizálás nem egészül ki ezután. És ez az, ami azt jelentette, lépcsőzetes. Akkor valami hozzá után, és ez a fajta finomítja az esztétika a weboldalt. És akkor még felülbírálják stílusok mégis más stíluslap fájlt ha akarod. Ez nem talált, bár ebben az esetben, mert persze, én misnamed meg. Tehát azt kell rögzíteni, hogy az első. 

Szóval menjünk előre, és javaslatot tesz a következő. Menjünk előre, és erre a célra. Kezdve talán A helloworld fájlt, hadd meghívja egy pár A funkció javaslatokat. Tehát, Victoria, te akartad hogy néhány szöveg nagyobb, igaz? Rendben, így tudjuk nem teszik szöveg nagyobb. És mi minden tépni ki Csak egy probléma megoldására. A szöveg nagyobb. Nem fogom zavarni írom ezt, amikor van golyó technológia jobb itt. Tehát néhány probléma. Így megyünk próbálni hogy a szöveg nagyobb. Rendben. Mi mást valaki javasolni? Mi mást lehet akarunk itt a weblapon? Nézzük felér egy rövid lista azokról a dolgokról majd átruházhatja a csoport kitaláljuk. 

KÖZÖNSÉG: [hallható] 

David J. MALAN: OK, álláspont szövege különböző oldalára? Rendben. Valami más. 

KÖZÖNSÉG: [hallható] David J. MALAN: Így van. Tehát egy gif csak egy más formátumban. Mi csak használni, amit egy png vagy jpg talán? Mi egy jpg. Ha kíváncsi, túlzott válaszolni a kérdésre egy jpg általában használt fényképek, mert támogatja millió szín vagy 24 bites színmélység. A gif általánosan használt, mint például, internetes mém ezek days-- animációk, mint animált gif. De előfordul, hogy egy kisebb színes paletta, mindössze 256 lehetséges szín, de támogatja átláthatóság és az animáció. És akkor ott van png, amely támogatja átláthatóságot és több színben de nem animáció. Tehát ez egy trade-off. Így hozzá egy gif, bár, lenne funkcionálisan egyenértékű azzal, mintha a png vagy jpg. Igen. Kép forrása megegyezik. Tehát valami mást. Nézzük elér valamit, küldtünk Victoria köze van. 

KÖZÖNSÉG: Gombok hozzáadása formában. David J. MALAN: OK. Így add gombok formája. És mi nem, hogy az egyik együtt. Tehát ez lesz a tökéletes váltása után ezt a kihívást. Akármi más? Mi lehet szeretsz csinálni? A web úgy érzi, nagyon underwhelming ha ez minden, amit tehetünk. KÖZÖNSÉG: színének megváltoztatása a szöveg. David J. MALAN: Változás az mi? Közönség: a szöveg színét. David J. MALAN: Változás a szöveg színét. Rendben. Nos, nézzük ezt. Csak ismét úgy, hogy te nem, csak gépiesen, csinál pontosan mit csinálok, Megyek bekapcsolja a zenét A talán öt percig itt. Nyugodtan használja a Google. Nyugodtan kérdezd, és Majd suttogva egy csipetnyi a füledbe. Nyugodtan nézd több mint a másik vállán. De megoldani csak az egyik ezeket a problémákat. De mi nem az utolsó, a alkot egy, ha lehet, együtt. Tehát öt perc alatt megoldani valamelyik ezeket a problémákat A Google, az intuíció, vagy bármilyen más módon áll az Ön rendelkezésére. 

[ZENE] Rendben. Nem gond, ha azt szeretné, tartani bütyköl, de én elrontani egy pár A válaszok. Tehát az első javaslatot a Victoria volt, hogy a szöveg nagyobb. Tehát van néhány módja erre. Már jelenleg felújított a képernyő, hogy ezt a méretet, bár már nagyított mesterségesen, csak hogy lásd a dolgokat. És csináljuk. Hadd menjek előre, és megragad néhány általános latin szöveg Csak így van valami, hogy működjön együtt. Így adj csak egy pillanatra. Csinálok három bekezdést. RENDBEN. Ez lesz a jobb példa. Tehát a kíváncsi, a én hello.html, csak beillesztett három értelmetlen Latin bekezdések Csak így van némi szöveget dolgozni. És Victoria célja az volt, hogy hogy néhány, a szöveg nagyobb. Így tudtam, mint korábban, megy itt. És hadd ez a helyes út. Megyek egy linket címke, ami rámutat egy fájlba az úgynevezett "styles.css", a kapcsolat amelyek ismét "stylesheet". És akkor fogok, hogy megtartsa, és nyissa ki ezt a "styles.css." 

Tehát, mint korábban, már a képesség ebben CSS fájlban hogy ténylegesen felülírja az alapértelmezett esztétika egy internetes oldal, és az alapértelmezett esztétika, Természetesen elég unalmas. Ez a fajta normál betűméret, fekete szöveg, fehér háttér, és így tovább. Tegyük fel, hogy azt szeretnénk, hogy mindezt szöveg nagyobb. Tudtam csinálni egy pár dolgot. Az én styles.css fájlba, mondhatnánk, tudod mit, alkalmazza a következőket a test oldalam. Menj előre, és a betűméret 24 pont, amely számos talán használja a Microsoft Word. Hadd menjen vissza a web oldal itt és újratölteni, és láthatjuk, hogy a ez már sokkal nagyobb. És tudjuk, hogy egy kicsit őrült, mint tudjuk a desktop-- hogy ez a 96 pont. Újratöltése. És ez kezd egy kicsit ormótlan ezen a ponton. 

De lehet, hogy egy kicsit pontosabb. Ahelyett alkalmazó stíluslapját a test oldalam, mi mást én alkalmazza azt a helyett, milyen egyéb címke, hogy talán még funkció ugyanúgy? 

Közönség: a p tag? David J. MALAN: P tag. Tehát a fej nem lenne helyes, mert a fej, akkor valójában nem ellenőrzik az esztétika. Van vagy szöveges, vagy sem. De a p tag-- tudok merülni egy kicsit mélyebb, hogy úgy mondjam, a bekezdés címkék. És bár van három, ez tökéletesen megfelel, mert a CSS, amikor azt mondjuk, "p", ez azt jelenti, alkalmazza az alábbi bármely tag, amelyek megfelelnek a választó, a választó csak hogy a neve a tag. Így bárhol látsz "P" alkalmazza a betűméret, és tegyük több ésszerű again-- 24 pont. És tudod mit, Csak a jó intézkedés, tegyük a szín piros csak a pillanat. És most, ha látsz, most lásd három csúnya bekezdések. 

De most tegyük fel, hogy én vagyok a fajta of-- szeretnék az első bekezdésben ugrik ki a felhasználó. Nem akarom, hogy csak növeli A betűméret mindent. És így valóban szeretné azonosítani, vagy különbséget ezek között bekezdések. Tehát lássuk megszabadulni a piros, mert ez csak egyfajta ragacsos, és menjünk előre, és a betűméret 12 pontos alapértelmezés szerint így mi vissza valamit egy kicsit ésszerűbb. És most már csak azt szeretném, hogy növelje a betűméret az első bekezdés. Meg tudom csinálni egy pár módon, de az egyik módja, hogy az talán a legtöbb oktató a pillanat, hogy tegye a következőket. Hadd menjek előre, és azt mondják, ez a bekezdésben van egy egyedi azonosítója "első". Nevezhetném ezt, amit csak akarok. Nevezhetném ezt "valami" vagy bármilyen más szóval, de fogok, hogy ez némi szemantikailag értelmes név mint "első". Ez az egyedi azonosító, Az azonosító az első bekezdésben. 

Amit most itt az én stíluslap ez egy kicsit pontosabb. Ahelyett, hogy alkalmazzák A következő a p tag, Azt lehet mondani, a following-- alkalmazni a következő, vagy válasszuk a HTML elem hogy van egy egyedi azonosítója "első". Mit akarok hatálya alá? A betűméret 24 pont. Szóval van két szelektor most. Egy teszi az összes pontját 12 pontot. De ez, főleg, mert jön second-- jön utoljára a file-- ez egy lépcsőzetes hatás. Most mindent az én bekezdés tag 12 pont, de ez most zuhatag, felülbírálja, hogy minden elem Az oldal bármely tag az oldalon, amelynek egyedi azonosító idézet idézőjel bezárva "első". És a hashtag ebben az összefüggésben Csak azt jelenti, "egyedi azonosító". Azt ne tedd a HTML fájlban. Én több, mint itt, csak azt mondják, idézet idézőjel bezárva "első". 

Tehát hadd váljanak. És most látom, ah, OK. Úgy értem, ez nem olyan szép, de ez a fajta hasonló az előszót a könyv, vagy valami ilyesmi, ahol az első bekezdésben is nagyobb. Lehet, hogy még pontosabb és csak az első betű, de legalább Már gyakorolni nagyobb ellenőrzést. Most maybe-- talán szeretnék ezt esetenként bármilyen okból, és így nem akarom, hogy ez alkalmazni, hogy csak egy HTML tag. Inkább nézzük say-- nézzük is tegye a következőket. Class = "import". Mivel egy azonosítót, amellyel egyénileg azonosítani egy dolog, az egyik tag, a weboldal, egy osztály célja, hogy Használható bármilyen számú elem vagy tag a weboldal. Tehát újrahasznosítható. Az azonosító nem használható újra. Egy osztály újrahasznosítható. 

És tudod mit, bármilyen filozófiai reasons-- Nem befejezni az thought-- fogok mondani hogy az első bekezdés és a második bekezdés fontosak. Így fogok alkalmazni a nevű osztályt "Fontos", hogy ha menteni a fájlt, és újratölteni, nincs funkcionális hatás még. De én már hozzá néhány metaadatokat a fájl, izével külön Az alapadatok a fájl, így most az én stíluslap, ha ahelyett, hogy ".important" - tudod, bármit, ami fontos, én megy, hogy font-color, red-- vagy inkább nem font-szín, csak színes. Van következetlenségek CSS sajnos. És újra. Most észre az első két bekezdés piros de nem a harmadik, mert csak alkalmazva az osztály a "fontos" az első két olyan dolog. 

Tehát azonosítók, megvan a képessége, megadásához nagyon pontosan. Az osztályok, akkor újrafelhasználhatóságot. De mindkét esetben észre a fajta jó tervezés elve ahol tényezőként ki az összes esztétika az én styles.css fájlt. Tehát nincs messiness itt. Nincs említés vörös vagy félkövér néző vagy betűméret ebben a fájlban. Inkább azt kell szemantikailag értelmesen jellemzi én adatokat, itt van néhány fontos adat. Itt van néhány további fontos adatokat. Sőt, itt van a "Első" az én fontos adatokat. Tehát HTML szól fajta tagging, szó, szó és bekezdések és konstrukciót a oldal ezekkel a kis tippeket, ha lesz, hogy akkor valahogy tőkeáttétel segítségével más technikák, mint a CSS ezen a módon. 

Tehát válaszolva Victoria kérdésére, tudjuk, hogy a szöveg nagyobb az említett módon. Vannak sok más módon, de a betűtípus tag-- nyitva tartó "font" - valójában több éves. És ez a probléma, is, a hagyatkoznának online resources-- hajlamosak elavult. És valóban, hogy a már elavult, mert a világ rájött, mit jelent a "font-size = 7" kifejezés? Ez nem. És így sok év, és a ez day-- egyik oldalsó megjegyzi, itt az, hogy valójában hihetetlenül fájdalmas is néha hogy dolgozzon helyszínek web, mert a Microsoft A Google és a Mozilla és az mások gyakran nem értenek egyet abban, hogy milyen értelmezni a specifikáció, mint a HTML. 

Van egy szabálykönyv HTML általában azt mondja, amit minden tag jelent. De néha ez marad a végrehajtás saját belátása szerint, A Microsoft és a Google belátása. És így akkor nagyon gyakran lásd a honlapon valami másképp néz ki a PC-n mint ez a Mac, és ez igazán, mert a nap végén, ők nem teszteltem valamint mindkét platformon. De ez azért is, mert az ésszerű, okos emberek nem értenek egyet és a vállalatok nem értenek egyet, és így az egyik kihívás a programozás az interneten, vagy tervezés dolgokat az interneten az írás a honlapon olyan módon hogy működik minden böngészőben. De még ez ésszerűtlen, nem igaz? Olyan sok változata annyi böngészők arra nézve, hogy egy bizonyos ponton, akkor is van, hogy az ítélet hívást és el kell döntenie, mint egy vállalat, különösen az e-kereskedelem-style webhelyet, ahol a akarják használni a legújabb és legnagyobb technológiákat, hogy egy igazán jó felhasználói tapasztalat. De néhány százaléka a gondozottak még az Internet Explorer 6 vagy 7 vagy 8, különösen attól függően, hogy a ország, hogy ők jönnek. 

És így nagyon gyakran megkérdezett valami mint a "böngésző statisztika." És ha megyünk az alábbiakra: lássuk Wikipedia és hogyan up-to-date A táblázatban ha van ilyen. Tehát itt láthatjuk ahol böngészők tulajdonképpen amelyek szerint a 2015. december szerint az amerikai kormány. Chrome 42% -os piaci részesedéssel, ezt követi IE nagyrészt vállalati környezetben vagy PC beállításait, persze, majd a Firefox, akkor Safari, Opera, akkor nem hogy a térkép itt valamilyen oknál fogva, majd társai. Lehet, hogy ez alatt társai. De még ennél is problematikusabb, mint hogy is-- Lássuk, Wikipedia is változatai böngészők version-- 

Menjünk böngésző statisztikát. AZAZ. Még ez nem elég. Böngésző statisztikák. Saját verzió. Ez nem lesz jobb. Lássuk változatok. Böngésző piaci részesedése. Lássuk, ha ez jön ki. RENDBEN. Most ez kezd egy kicsit hasznosabb. Tehát itt, észre, hogy mi minden különböző változatai böngészők. És, istenem, ha look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Úgy értem, a böngészők egyre frissíteni, és néha néhány ilyen változások jelentősek funkcionalitás szempontjából. És így egy bizonyos ponton, a termék vezetők, illetve a mérnökök kell, hogy a te decision-- hogy mit, csak 1% -át a világ még mindig használja az IE 7. A pokolba velük. Mi csak nem fog támogatja, hogy a böngésző. És mit jelent, hogy nem támogatja? Ez azt jelentheti, hogy a gombok Nem működik a weboldal, vagy az azt jelentheti, a formázás teljesen ki van kapcsolva. Vagy lehet, hogy van, hogy Ugyanezen ítélet hívás mobil ezekben a napokban, ahol vagyunk nem fog támogatni IOS 5 többé. Tehát az emberek csak azt kell frissíteni. Vagy nem fogunk támogatni Cupcake Android OS az Android készülékek, mert a world--, mint a tech világ akar előrelépni, ez a fajta akarja, hogy húzza a világ ezzel úgy, hogy nem az van, hogy továbbra is visszafelé kompatibilis, így kínálunk új és jó tulajdonságait. Ez az egyik oka annak, miért olyan sok vállalat elterjedni Az automatikus frissítések és egyfajta kényszerítve a legújabb szoftver nekünk. És még cégek mint az Apple fogja rendezni a kényszeríti, majdnem vagy kötelezővé Ön a piaci erők hogy vesz egy új telefont, mert ők csak nem fogja frissíteni a régi telefon már. Szóval hagyja ki a legújabb és legjobb funkciókat, mert költséges őket, mint a cég fenntartása idősebb, vitathatatlanul gyengébb változatai szoftver. De a hatása az, hogy mi is szenvedünk ezt is. 

Szóval vessünk egy pillantást, csak Pár végső dolgokat. Nézzük leüt igazi böjt néhány a többi golyót, ha kíváncsi. Tehát, ha akarták, például pozíció a szöveg különböző oldalain a oldal, fogok csinálni egy gyors módja, de van más módon teheti ezt meg. Hadd menjen előre és eliminate-- egyszerűsítse ezt a következők szerint. Hadd menjen vissza a egyszerű, egyszerű bekezdések. Hadd menjen vissza a styles.css. És én csak fogja használni a simple-- ami lehet, hogy látta a Google vagy visszahívja a earlier-- szöveg igazítása jobbra. És töltse be újra ezt az oldalt. Most úgy tűnik, minden hogy jobbra igazított, ahogy lehet látni a mennyezeti itt. 

Tudjuk, hogy ez úgy néz ki egy kicsit foglalja-szerű, és azt mondhatjuk, "igazolja" és újra. Most már szép és tér mindkét oldalán, ami elég szép. A másik cél, hogy mi volt itt változása volt a szöveg színét. Így láttuk, hogy az én piros szöveget. És most add gombok formája. Akkor miért nem próbáljuk pontosan ezt? De először hadd menjen a helyszínen, hogy a legtöbb ember használja minden day-- Google. És vessünk egy pillantást hogy a Google tényleg működik. De én ezt. Először is hadd csinálni in-- igen, hadd menjen a Google az első. Megyek, hogy menni a Google-beállítások, mert szeretnék letiltani úgynevezett azonnali eredményeket. 

Tehát lehet, hogy észre Google ezeket days-- hadd menjen vissza és kapcsolja be ezt. Tehát, ha elkezdem keresni A "macskák", mint ez, észre, hogy nem csak Kapok automatikus kiegészítéséhez up top, hirtelen, maga az oldal Úgy tűnik, hogy változtatni elég gyorsan is, és ez a Google nyelv használatával nevű JavaScript próbál segítséget. De sajnos ez a fajta A elrontja a vitát Az amit valójában a motorháztető alatt van. Így vagyok csak ilyen gyorsan kapcsolja ki az azonnali eredményeket. És megyek, hogy kattintson a Mentés gombra. És most megyek nyitni hogy a diagnosztikai eszköztár, hogy én tartsa nyitás alatt a Hálózat fülre. Tehát lássuk ezt. Let me-- whoops-- lapozzunk ezt le egy kicsit. És hadd keressen a "macskák". 

És most notice-- valójában, ez egy jó lehetőség hogy megvitassák egy pillanatra. Figyeljük a pillanatban type-- megállítani. Fejezd be. RENDBEN. Figyeljük a pillanatban írja be a betűket C, nézni a képernyő alján. A- T- S. Mit jelent az alsó Erre a képernyőre, a Network fülön, sugallják történik minden Mire egy betűt? Sajnos, a béka nagyon zavaró ma vagy a lóhere vagy bármi is az. Mi történik minden alkalommal beírtam? És hadd törölje a puffer és írja be újra. So-- Hoppá. Minden alkalommal, amikor egy betűt, C- A- T-- így egy új sort természetesen nem szűnik meg. Mit jelent minden egyes ilyen sorai, alapján, amit láttunk és tárgyalt eddig? KÖZÖNSÉG: A keresés? David J. MALAN: A kereső, vagy több általánosan, egy HTTP kérés én böngésző a szervernek. Nos, miért van a böngésző, hogy a HTTP Kérjük minden alkalommal, amikor egy betűt? 

KÖZÖNSÉG: [hallható] David J. MALAN: Igen, ez így nekem ezeket az automatikus teljes eredményt. Mint, ahol ezek a keresési eredmények származik? Nos, minden alkalommal, amikor írja levél, Google küld több és egyre több a A szavamat beírni. Miért? Mivel akarnak adni nekem egy jobb és jobb, jobb javaslata, a javaslatok listáját, amit szó Próbálok ténylegesen teljes. Tehát ez azt szó szerint minden begépelt karakter a Google küldik, végső soron ömlesztve, hanem néha egy egy időben végrehajtása érdekében ezek automatikus teljes jellemzőkre az adatok, természetesen, az interneten. 

Most vessünk egy pillantást, amit valójában történik, ha rákattintok a Google Search. És aztán segítik ezt magunknak. Tehát, ha én lépjünk le most a nagyon első kérelmét, hogy most történt. Figyeljük meg a következő. Úgy küldték egy meglehetősen hosszú URL-- https://www.google.com/search? majd egy csomó cuccot. Lássuk ez valójában most a böngésző fülön is. Nézzük megszabadulni az eszköztár itt. Itt a találati oldalon. És vegyük észre az URL-t. Most, akkor valószínűleg kitalálni mi folyik itt részben. Tehát először is, a meghatározás. Ez nyilvánvalóan a cél ahol az űrlap elküldése. Tehát, ha beírtam a szavak "macska" és nyomj Enter-t, látszólag Google küldött én szövegbeviteli erre az URL hogy amit kiemelt ott, perjel keresést. Kiderült, hogy egy URL-t, bármit, ami történik, miután a kérdőjel, ahogy mondogatta, egy kulcsértékpár amit beírt formában vagy valamilyen módon továbbítja a böngésző a szervernek. 

Tehát minden alkalommal, amikor írja bemenet egy internetes űrlap és ez küldi el voltunk tárgyalunk, egy get, az egyik ilyen virtuális borítékok tartalmát E envelope-- igen, folyamatosan szerzés töltött fizikailag a borítékba osztályban ma, de technológiailag ez ténylegesen az URL-t. Tehát valójában, hadd szitál ezt. Hol látja felhasználói? Hol látsz valamit hogy magam gépelt itt? Igen, "macskák". Jobbra? Tehát hadd csöpögtet ezt valami egyszerűbb. Fogok törölni mindent Ez az URL, hogy nem értem, és én csak hagyom azt this-- / search? q = macskák. Meglátjuk, ahol q származik egy pillanat, de úgy érzi, mint a minimális mennyiségű információt, amit nyújtott. És most megyek, hogy elérje az Enter billentyűt. És észre még mindig működik. Még mindig vissza egy csomó macskák. Tehát a Google szakértő mint ez manapság. Ez 2016-ban nem 1999-ben. Tehát van más dolog, hogy én böngésző küld a szerverre. De ez minimálisan minden, ami szükséges. 

Nos, miújság? Nos, először is hadd menjen előre, és megy vissza Cloud9 és hadd menjen előre és becsukom a lapok korábban. És én megteszem ezt én saját csak egy pillanatra. Megyek, hogy menjen előre és hozzon létre új fájlt. És én fogom menteni, mint google.html. És fogok nagyon quickly-- Megyek lopni, valóban, néhány ilyen szöveg, csak hogy időt takaríthat meg. Megyek be ezt itt. Nem fogok bajlódni minden stilizáció ebben az időben. Megyünk hívja ezt a "My Google." És fogok megszabadulni A mindenre a szervezetben. És fogok csinálni a következő. Hadd nagyítás. Forma action-- és röviden megemlítettem earlier-- whoops-- ahogy röviden korábban már említettük, a működés során a forma az, ahol küldi az adatokat. Tehát google.com/search. És az eljárás szeretném használni lehet két dolog. Ez lehet akár "get", ahogy folyamatosan megvitatása, vagy lehet "post". Most, az alapvető különbség, ha "kap" az összes információt, amely a A Felhasználó eljut az URL. 

Ez nagyszerű dolgok, mint kereső motorok és néhány más alkalmazások, de milyen körülmények között Ön nem szeretné kitölteni egy űrlapot , és az információt a végén a URL, mint a böngésző címsorába? Milyen formák csinálni you-- KÖZÖNSÉG: [hallható] David J. MALAN: Igen, mint mi? KÖZÖNSÉG: jelszavak. David J. MALAN: Igen, így log A Facebook vagy valamilyen honlapján. Ez a felhasználói bemenet formában, egy szöveges mezőben, de valószínűleg nem akarják felbukkan a böngésző URL-t. Miért? Úgy értem, lehet, hogy van némi biztonsági vonatkozásait a hálózaton, de more-- tetszik, még egyszerűbben, mi van, ha A szobatársam, más jelentős, a gyerekek, a házastárs néz keresztül a böngésző előzményeket? Van jelszavát jobbra ott a böngésző történetében. Ez nem érzem jó design. Vagy még inkább technikailag, tegyük fel, hogy megpróbálja hogy feltölt egy képet a Flickr vagy a Facebook vagy wherever-- vagyis felhasználói bemenetet, bár ez egy kicsit interesting-- hogyan tudom teletölteni egy képet az URL bar? Te milyen fajta nem. Te milyen lehet. De tényleg, én szorongatott elképzelni csinálja. Szóval kell egy másik módszert feltölteni képeket a honlapon, és a másik módszer az úgynevezett "post". De most, akkor csak beszélni "Kap", ami az egyszerűbb a kettő. Csak hozza a felhasználó viszi be az URL-t. 

Tehát itt a forma hozok létre. Szeretnék egy bemenet. És tudod mit? Megyek, hogy egy kitalálni itt. Megyek én felidézni input "q" a "lekérdezés". És azt hiszem, ez az egyik eredeti tervek, talán a 1999. És akkor milyen típusú ez a bemenet csak lesz "szöveget." Aztán megyek egy másik bemenet hogy nem kell a név, hiszen hamarosan lásd a fajta, amely a "be". És ez meg fog adj egy külön gomb. És ez az. 

Tehát hadd menjen előre, és mentse el a fájlt. Fogok menni vissza a és lépjen a google.html. Belép. És ez a fajta ritka hogy mondjuk a legkevésbé. De hadd menjen előre és keressen a "macskák". És észre vagyok jelenleg Ebben Cloud9 URL. De abban a pillanatban én kattintson erre, hol remélem végzed? 

KÖZÖNSÉG: Google. 

David J. MALAN: Google. Szóval kattintson a Küldés gombra. És valóban Már újra végrehajtani a Google. Jobbra? Ez egyszerűbb. Ez könnyebb. Úgy értem, a kód egyértelműen jobb, mint övék, a rendetlenség korábban láttuk. És tudod mit? Megyek vértezze ez egy kicsit. Én ezt nem említette korábban. Vannak címkéket, mint a H1, fejezet 1, A legfontosabb fejezetének egy oldalon. "Saját Google" hívom ezt. Hadd töltse be újra. Ez már egy kicsit már jobban. És valóban, tudod mit? Nekem already-- hazudtam. Azt mondtam, hogy nem fog a stílus ez, de fogom stílus ez, mint korábban. És a testem lesz, mondjuk, text-align center. Úgy néz ki, mint a Google már. 

Kell egy sortörés, mégis, e Küldés gombra. És kiderül, akkor használhatja bekezdések vagy ha több szó csak annyit, adj egy sortörést here-- a br címke. És ha be újra ezt, most megy oda. Ez egy kicsit csúnya, úgyhogy tehetett többsoros szünetek, de ne legyen túl mohó itt. Tehát most lássuk, működik-e a "kutyák". Úgy tűnik, működik a "kutyák" is. Tehát mi a vonzó elvihető itt? One-- nem volt olyan hatalmas ugrás tegyünk néhány további címkék, mint a form tag a bemeneti címkét. De még ennél is alapvetően van, minden, amit csinálunk amely kihasználja a megértés A HTTP és az a tény, hogy formák végül megváltoztatják mi az URL a böngésző, és így, ezért tudjuk mechanikusan is hozzájárul a szerveren azáltal, hogy egy HTML űrlapot, és tudta, hogy a szerver megérti HTTP, akárcsak testünk megérti, mint, megrázta a kezem, hogy ugyanazt a protokollt, és így jutunk vissza a válasz hogy végül számítunk. 

Így próbáljuk tenni egy utolsó dolog most a mobil, és én make-- adom hozzá ezt a kódot a diák. Tehát, ha azt szeretné, hogy bütykölni, akkor biztosan vigye onnan. De én megyek előre, és nem egy dolog. Megyek megy előre, és nyitnom az index page-- my hello oldal, mint korábban, ami van egy csomó ez ál-latin szöveg, vagy értelmetlen latin szöveget, és has-- úgy néz ki, mint ez ebben a betűméretet. De hadd menjen előre, és erre a célra. Én megyek be Cloud9. És akkor nem kell tennie ezt a lépést. Én csak csinálni magamnak. Megyek a Megosztás lehetőséget. És ez a funkció Csak a Cloud9, amelynek Azt is, hogy a környezetem számára. 

És csak a kedvéért bemutató, hadd tegye ezt. Megyek, hogy az én alkalmazás számára. Figyeld meg, hogy figyelmeztetése rám, am Azt biztos, hogy akarom ezt, mert ez lesz, hogy mindenki a világon, hogy ők itt most vagy nézi a videót később a internet képes, amit látok. De ez rendben van. Azt fogom mondani: "Kész." És hadd javasoljuk, ha én ez correctly-- hadd először ellenőrizni. Menj előre, ha nem mind-- a böngésző a számítógépén, megy ez az URL, és remélhetőleg meglátja az én latin szöveget. És hogy tisztázzuk, ez futó nem az én laptop. Ez a felhő. Ez a Cloud9, szó szerint, hanem Csináltam én munkaterület nyilvános hogy bárki az interneten férhet hozzá a Latin honlapon. 

Mert ugyanazt az URL-t A telefon, ha lehetne. Ha ez fog kerülni, mégis, akkor egyszerűen nézd át a vállát. KÖZÖNSÉG: [hallható] David J. MALAN: Sajnálom? KÖZÖNSÉG: [hallható] David J. MALAN: Just latin szó. Ez minden. De ez az, amit meg kell látni. 

KÖZÖNSÉG: Igen. David J. MALAN: Igen. Igen. RENDBEN. Így tudok tartsa fel a telefon egy pillanatra? Így remélhetőleg ha elérésével meg, meg kell nézni szinte olvashatatlan. Ez still-- értem, ez olvashatatlan, mert a latin. De ez is olvasható hogy milyen más okból? Mint, mi tetszik neked erről? KÖZÖNSÉG: Ez kicsi. David J. MALAN: Ez szuper, szuper kicsi. Tehát hogyan tudnánk ezt orvosolni? Ez szuper, szuper kis Victoria telefonon és, ha már kihúzta fel magad, valószínűleg kis telefonján is, kivéve, ha Kisegítő beállítások engedélyezve. Mi az? Lehet csak csipet és zoom, ami működőképes, de akkor csak látni néhány szót egy időben. Tehát egy pillanat. Tudom, hogyan erősít ez. Jobbra? Jól jönne CSS, és tudtam változtatni a betűméret 12 pontos és 24 pontos. De a mellékhatása, hogy a Természetesen lesz most, egy asztali vagy laptop, most a szöveg kétszer akkora. És ez így lenne ilyen szép megkülönböztetni készülékek, és kiderül, ott olyan módon csinál, hogy. Számos különböző módon, sőt, amelynek segítségével CSS és szakértő jellemzői hogy nem fog menni a nagy részletességgel, akkor lényegében lekérdezés A böngésző és azt mondják, hogy ha a képernyő kisebb, mint ez Sok pixel, használja ezt a betűméretet. Ha a képernyő nagyobb, mint ez Sok pixel, használja ezt más betűméretet. 

Akkor még cifrább is. Ha valaha is meglátogatott weblap, hogy egy asztalon, van egy nagy menüt, talán le a oldalán, majd az összes, a tartalom hogy az oldalán, hogy menu-- ez a fajta közös paradigma. Menü a bal, a tartalom A jobb oldalon, vagy fordítva. Nem igazán működik a mobil, amikor a képernyő csak ennyi pixel széles. Így sokkal gyakoribb mobil, A menü hirtelen kap összeomlott, és meg kell kattintson a gombra, látni, illetve a honlap fogja állítani a menüben fölötte, és tegye a tartalom alatta. És akkor végre ezeket dolgokat többféle módon is. Akkor kérdezze meg a programozók, hé, csapat, bármikor látsz egy HTTP kérést egy Android eszköz, a Microsoft eszköz, egy Google készüléket, egy Apple eszköz használatához betűméret és ezt menü, vagy pedig használja ezt az alapértelmezett nagyobb elrendezést. 

Most, a mi alapvető technika mai lehetne a mérnökök tudni, hogy ez az Az iPhone, Android telefon, laptop, Asztali látogatás a cég szerver? Miben kapnak az információkat? 

KÖZÖNSÉG: fejléc? 

David J. MALAN: Igen, a HTTP fejlécben. Tehát minden HTTP kérés jön hogy az ügyfelek a szerverek többek között, hogy a virtuális belül boríték, egy csomó HTTP fejlécek, amelyek közül az egyik a böngésző és az operációs rendszer még, ha érdekel, hogy hogy részletességgel. Most ez egy rejtélyes külsejű húr, de létezik szoftver, amely csak egyszerűsítése, és ezt te is csak kérdez programozási code-- PHP, Java, C ++, whatever-- milyen telefon this-- mi az eszköz felhasználó használ? És akkor azt mondják, mutasd meg nekik ezt változata a honlapon, ha ez egy telefon. Mutasd meg nekik, ez a változat a honlapon, ha ez egy laptop vagy asztali. De nem is kell szerver oldali komplexitás. Meg tudod csinálni még a legegyszerűbb dolgokat. 

Azt fogom tenni ezt. Megyek, hogy menjen előre be én Cloud9 környezet, és megyek hozzá egy címkét láttál a Google előtt. Ezt hívják a metacímke. És soha nem emlékszem ez egy, így Megyek, hogy átdolgozza itt. Meta name = "nézetnek", majd content = "width = az eszköz szélessége, intital scale = 1 ", és ennyi. 

Így akár azt is lehet mint egy mágikus ráolvasás. Ez még nem minden, hogy világos, de ez van valami köze az ablakon, és az ablakon csak a test egy weboldal, a téglalap alakú területet, amely definiálja a legtöbb oldalon. És ez csak azt mondja A böngésző, tudod mit? Tedd a szélessége oldal hatékonyan egyenlő a készülék szélessége. Más szavakkal, nem feltételezik, hogy Van egyfajta korlátlan teret. Tételezzük fel, hogy csak annyi helyet, mint maga az eszköz nagy. És így most, ha én be újra ezt az a böngészőm, nem látok változást. De ha ezt tettem correctly-- és hadd keresztbe tettem ujjmozdulatokba ha minden újratölti a telefonok, ugye lásd kényszerítő változás? Igen, ez hogy-- 

KÖZÖNSÉG: [hallható] David J. MALAN: Igen. RENDBEN. Tehát vitathatatlanul olvasható most? Még kicsi, hogy tisztességes, de nem Olyan apró, hogy kezelhetetlen. És én minden bizonnyal felülírja ezt a tovább CSS vagy a szerver oldalon, de egyre inkább mit te látva egyre több szolgáltatást bekerüljön kliensoldali environments-- JavaScript, ahogy megbeszéljük Holnap, CSS és HTML-- így hogy ezek a lekérdezések lehet tenni az ügyfél oly módon, hogy zavarja a szerver sokkal kevesebb, és nem hogy meg kell tartani a számára Például az állandó támadása Az új operációs rendszer változatok, új böngésző verzió. Akkor csak hagyja, hogy a böngésző kérje a készülék, milyen nagy vagy te, majd, hogy némileg logikus döntések alapuló. De majd meglátjuk több lehetőséget logikai döntések Holnap keretében egy programozási nyelv. 

Tehát, bármilyen kérdése van, akkor, A webfejlesztés? Ma nem webes programozás, per se, mivel a legtöbb mindent csináltunk nagyon esztétikus, ha úgy tetszik. Nincs döntéshozatal A kód, amit írt, és hogy ezért a HTML egy jelölő nyelv, nem egy programozási nyelv. De holnap viszem egy gyors pillantást, végül, A JavaScript, ami tényleges programozás nyelv, amely lehetővé teszi számunkra, nem egy kicsit. 

Bármi kérdés? Nos, hadd javasol két lehetőségeket kötelező házi feladatot. Egy is-- ezek Cloud9 beszámoló nem jár le. Nyugodtan használja őket bütykölni. Ez az ingyenes szolgáltatás színvonala. Tudatában annak, hogy ha létrehozásakor A munkaterület, akkor hozta nyilvánosságra, amely nem jelenti azt, hogy bárki a internet láthatja, hogy mit írsz. Így talán csak úgy Nem kínos magad ha üzembe az első web oldal ott nyilvánosan véletlenül, de senki sem fog tudom, hogy néz ki van egyébként. 

És two-- hadd dobálják fel ezt az URL is, különösen akkor, ha ma érkezett egy kicsit kevésbé kényelmes, mint mások, biztos benne, mi ez az egész jelent. Ismerd fel, hogy sokkal több ez a videó, ami egyszerre jó módja annak, hogy elalszik és nevetni, miközben Ennek során is van egy csomó társadalmilag érdekes és biztonság tekintetében lényeges viták abba John Oliver, bár egy humorista. 

De ha nincsenek további kérdése, amely elvezet minket a recepción. Akkor miért nem tudom bekapcsolni a zenét. Ott kell lennie italok és rágcsálnivalók kívül. Örülök, hogy keveredik a mint Amíg az emberek szeretnék, kérdések megválaszolására több egy-egy. De, egyébként, szívesen felszállni bármely ponton, és találkozunk újra Holnap reggel egy kicsit. Rendben, köszi.