DAVID J. MALAN: Okej.
Vi är tillbaka.
Så målet för denna sista session är att införa några fler begrepp
men också ge alla en chans att typ av sträcka fingrarna
och faktiskt göra något lite hands-on.
Målet är inte att vända oss alla i webbutvecklare
på något sätt, men egentligen bara att ge dig en smak av vissa
av de grundläggande konstruktionerna enligt vad går in i webbprogrammering och idag webben
utveckling, så det statiska sidan av saker--
ingen logik, ingen programmering språk, bara statiskt innehåll.
Och det kommer att ge oss en möjlighet att faktiskt se vad en webbserver är,
Se vad en HTML-fil är, se vad det är HTTP är faktiskt betjäna upp.
Men innan vi dyka i, någon retroaktiv frågor om cloud computing
eller säkerhet eller något däremellan?
>> Nej?
Okej, låt oss göra detta, ifall
processen för att registrera dig för något tar några minuter.
Vi kommer att låta den göra det i bakgrunden.
Gå vidare, om du kunde, till denna URL här-- c9.io.
Detta är en tredje part service-- plattform som en tjänst, om du will--
som kommer att bjuda in dig registrera dig för ett konto,
och det kommer att ge er alla ett konto i den så kallade molnet
på någon annans infrastruktur, ett företag som heter Cloud9.
Men vad är trevligt om detta är att de ger dig
en approximation av en faktiska verkliga utveckling
miljö, om än i moln och i en webbläsare,
och vi kommer att använda denna för att verkligen experimentera lite idag.
Och sedan gå vidare och bara navigera din väg till registreringsprocessen
om du kunde.
Så vi råkar använda detta i klassen Jag undervisar för alla våra elever,
både på campus och off nu, och det är ersatt vad historiskt
annars var nedladdningsbar programvara.
Så vad du får tillgång till är en av dessa virtuella maskiner,
i huvudsak som jag beskrev tidigare.
Så detta företag Cloud9 förmodligen hyror från en tredje Party-- verkligen
i detta fall, Google-- helhet gäng virtuella maskiner
att de på något sätt hugga upp i illusionen av enskilda servrar
att var och en av oss har full kontroll över.
Det är inte helt korrekt att säga att de är virtuella maskiner,
men eftersom det Cloud9 använder faktiskt
är en något nyare teknik kallas containerisering.
Och låt mig ta den här bilden här för att måla bilden.
>> En behållare är, om ni minns bilden
från tidigare lite ljusare vikt än en virtuell maskin.
I själva verket, medan förra När vi talade om det
är en rörelse system och en hypervisor
och sedan gästoperativsystemet, gäst operativsystem, gästoperativsystemet
systemet, på toppen av din fysisk hårdvara,
skillnaden med denna nyare teknik, containerisering,
är att de alla på något sätt delar samma operativsystem.
Men de fortfarande skapa illusionen av alla
har sin egen exklusiva administrativa rättigheter och filer
på servern.
Men det finns mindre programvara i mellan dig och hårdvaran.
Vars resultat är, i teori, en högre prestanda,
eftersom du använder eller slösa mindre resurser
på den så kallade virtualiseringslagret.
Så detta kallas container av naturen
med hjälp av en teknik som kallas Docker, vilket är mycket kommer till sin rätt.
Och detta är något som ingenjörer på ditt företag
kanske slags slags börja prata om snart om de inte redan har,
men det är verkligen ingen anledning att hoppa på någon bandwagons.
>> Så med det sagt, vad du ser förmodligen nu
är en skärm som ser lite ut så här.
OK.
Och ring mig över om inte.
Och om so-- jag ska komma över om inte.
Gå vidare och klicka på den stora plus att skapa en arbetsyta,
och du ser en skärm som denna.
Du kan ringa arbetsytan namnge vad du vill nu.
Och bara faktiskt för enkelhets skull gå och-- väl, några av er
redan har arbetsytor.
Kalla det vad du want-- företag, Harvard, torsdag, vad du vill.
Du behöver inte en beskrivning.
Du kan lämna den privata, om du redan har en massa arbetsytor.
Om du är tvungen att göra det offentligt, det är bra för dagens ändamål.
Här är också en av de upsells.
Du får en privat arbetsplats efter standard. Men om du vill ha mer,
du måste betala för mer.
Annars tvinga de dig att göra din offentligt arbete.
Men det är bra, eftersom de också rikta detta på öppen källkod samhällen
att uppmuntra människor att faktiskt samarbeta.
>> Och det sista som är viktigt, är dock, när du har valt ett namn
och när du har valt privat eller offentlig, klicka HTML5, den stora orange ikon
andra från vänster, och klicka på Skapa arbetsyta.
Och det kommer förmodligen ta en minut eller så,
men du kommer då att ha en miljö, när du
göra det, som ser påminner om vad jag har på skärmen här nu.
Men, återigen, kan det ta en minut eller mer för att få till den här skärmen
När du har klickat på Skapa arbetsyta.
Men bara flagga mig över om du vill att jag att ta en titt på något eller råd.
Okej.
Så jag ska bakgrund detta för nu.
Ring mig över om du verkar har några tekniska problem.
Men, återigen, kan det ta en lite för att det ska öppnas.
Och låt oss gå vidare och prata om vad det faktiskt innebär att göra en webbsida,
vad HTML är, och hur allt detta Nu sammanbinder som vi börjar
att faktiskt använda en del av tekniken.
Så visar det sig att jag kan gå på min lilla Mac här,
öppna ett enkelt program som heter Textedit, eller på Windows jag kunde
öppna något som kallas Notepad.exe.
Och jag kunde helt enkelt göra något som this-- "Hello, World."
Och då kunde jag spara detta som hello.txt Så ingen magi där.
Detta har ingenting att göra med webben programmering, ingenting att göra med HTML.
Bara skapa en enkel textfil.
Men det visar sig att en bana sida är bokstavligen just detta.
Det är en enkel textfil som innehåller text att du kan skriva på tangentbordet,
men det typiskt men inte alltid slutar i inte .txt men .html eller .htm.
Och du inte bara skriver ord i filen.
Du har faktiskt att använda saker som kallas taggar eller, mer allmänt, något
kallas märkningsspråk.
>> Så jag kommer att mycket snabbt skriva och sedan förklara följande.
Jag ska först skriver detta, som säger,
hej, webbläsare, här kommer en webbsida skriven i HTML.
Och dessa två saker att säga tillsammans, hej, webbläsare, är verkligen HTML följande.
Hej, webbläsare, här kommer huvudet eller toppen av min sida.
Hej, webbläsare, insidan av toppen av min sida, sätta en titel som är, "Hej,
värld."
Hej, webbläsare, efter chefen för min sida, här kommer kroppen av min sida.
Och hej, webbläsare, kroppen av min sida bör också säga, "Hello World".
Så vad är de framträdande detaljer här?
Detta är vad som är allmänt kallas en förklaring doc-typ,
och, uppriktigt sagt, det är lite svårt att memorera detta till en början.
Du kopiera och klistra in bara typ av det.
Detta är den formella sättet att säga, hej, webbläsare,
Jag använder HTML version 5 som kom ut något under senare tid.
Det är en magisk besvärjelse att vissa människor med en dålig känsla för design
beslutat att lägga på högst upp i filen.
Även om det är en lite hemligt, det är allt
det means-- hey, webbläsare, här levereras med version 5 av HTML.
>> Resten av detta har varit med oss under en tid nu, historiskt,
men det har varit utvecklas, och det är förmodligen fått en lite enklare.
Lägg märke till några egenskaper av vad jag har markerat.
Det finns dessa saker med vinklad brackets-- den vänstra konsolen
och den högra konsolen.
Och lägg märke till symmetrin här.
Och genom symmetri, jag menar, precis som jag har denna starttagg här eller en öppen tagg
om man så vill, här nere har jag en tagg eller en sluttagg som är
annorlunda endast i den mån det har denna snedstreck i början av ordet
HTML.
Och du kan tänka på detta som jag var nonchalant
föreslår innan, hej, webbläsare, här kommer några HTML.
Och omvänt, hej, webbläsare, det är det för HTML-- start och slut.
>> Samtidigt hey, webbläsare, här kommer chefen för min sida.
Hej, webbläsare, det är det för huvudet.
Hej, webbläsare, här är kroppen av min sida.
Hej, webbläsare, det är det för kroppen.
Och insidan av detta finns en viss godtycklig text för nu.
Och insidan av huvudet, under tiden, är en godtycklig men taggade,
så att säga, text som säger titeln min sida ska vara "Hello, World."
Nu, för nu kan du anta att webbläsarna
har only-- eller snarare webbsidor har endast två parts-- huvudet och kroppen.
Och huvudet är i allmänhet bara som menyraden, grejer
egentligen bara högst upp.
Och kroppen är modet på sidan, allt i det stora rektangel
som fyller hela skärmen.
Så jag kommer att gå vidare och göra det.
Jag kommer att gå vidare och klicka på Spara, Arkiv Spara.
Och jag kommer att spara detta som hello.html,
och jag ska bara satte den på mitt skrivbord.
Och jag kommer att gå framåt och klicka på Spara.
Och notice-- min Mac på minst skriker på mig.
Är du säker på att du vill göra detta?
Och jag kommer att säga, ja, använda HTML.
Jag vet bättre i det här fallet.
Och nu ska jag gå till mitt skrivbord där jag har den här filen plötsligt.
Och jag kommer att dubbelklicka på den.
Och du kommer att märka att genom standard öppnade Chrome upp.
Det beror på att det är min standardwebbläsare.
Och det bara säger: "Hej, världen".
Men det säger "Hej, värld "på två ställen.
Lägg märke till uppe till vänster.
Ganska svårt att missa det.
Det är stora och djärva.
Och var annars verkar det att säga, "hej, världen"?
>> PUBLIK: Fliken.
>> DAVID J. MALAN: Ja, fliken själv.
Så när jag sa chefen för sida är allt upp top--
och detta är den i rubriken.
Det är bara på fliken här.
Och jag kan dra den här fliken ut för att inte blanda ihop.
Detta är bara en flik nu, och faktiskt ser vi "Hej, världen"
upp här och "Hej, världen" här nere.
Så ganska enkelt.
Men det är också ganska enkelt.
Och faktiskt, jag zoomat in.
Jag kan ändra teckenstorlek bara att förstora för tillgänglighet.
Men låt oss nu göra något lite mer intressant.
>> Jag kommer att go-- hoppsan, låt mig komma tillbaka till min textfil.
Jag kommer tillbaka till min textfil, och jag kommer
att ändra på detta och säga "Hej, Disney World."
Spara.
Och gå tillbaka till min webbläsare och klicka på Ladda.
Och nu, naturligtvis, det säger "Disney World."
Och jag kommer att artificiellt zooma i bara så det är lättare att se.
Så nu, tyvärr, jag slags vill att-- faktiskt, det är en Mac-funktionen.
Jag vill klicka på Disney World och gå någonstans som disney.com,
men det fungerar inte.
Så en grundläggande grundsats av banan är hyperlänkar, länkar som går någon annanstans.
Så hur gör jag det?
Tja, jag kan bara säga, "Hej, http://www.disney.com."
Spara detta.
Ladda om.
Men även detta, inte klickbara.
Och vad är trevligt här, även om detta är inte fungerar ännu,
är att det verkar som om webbläsare bokstavligen bara har
vad jag säger det att göra.
Så om jag skriver bara en URL som denna, det är bara kommer att visa mig webbadressen.
Jag behöver använda taggar eller markup språk för att faktiskt berätta
webbläsaren att göra ännu mer.
Så jag kommer att gå vidare och ta bort detta för ett ögonblick.
Och jag kommer att säga, hej, webbläsare, starta ett ankare här,
en länk så att säga.
Och hyper-referens, destinationen av att ankaret, bör vara den här webbadressen.
Och lägg märke till mina citat.
Jag skulle kunna använda enkla citattecken, också, men du måste vara konsekvent,
och jag skulle i allmänhet bara använda citationstecken för att hålla det enkelt.
Märker jag ska stänga taggen.
Och så här kommer jag att säga, "Disney World."
Och nu behöver jag lite symmetry-- öppna fäste, / a, stängd konsol.
>> Så vad har jag infört?
Vi har haft några taggar redan.
HTML, huvud, titel, kropp, är alla taggar, så att säga,
med öppna och slutna motsvarigheter.
Men varsel, är den här sortens av fundamentalt annorlunda.
Detta är vad vi kallar i HTML ett attribut.
Och ett attribut är bara en nyckel-värde-par.
Detta är en gemensam sak i dator science-- nyckel-värdepar.
Det är typ av verktyg för handeln.
En nyckel och ett värde.
Ett ord och sedan några annat ord eller ord.
Och i det här fallet, är nyckeln href, och värdet är att hela webbadressen.
Och vad ett attribut gör det påverkar beteendet hos en tagg.
Och i det här fallet måste vi påverka beteendet hos ankarmärket,
eftersom vi måste förankra denna länk i någonstans.
Och hur du gör det är med hjälp av attributet.
>> Så jag kommer att gå vidare och spara filen nu.
Gå tillbaka till min webbläsare och ladda om.
Och voila, har vi nu början av en legitim webbsida.
Super enkel, men om jag svävar över this-- meddelande i det nedre vänstra hörnet,
det är super-liten.
Men du ser www.disney.com.
Och om jag klickar på den, verkligen detta vispar mig bort till disney.com.
Nu märkliga här är att det inte är
den best-- mest säljbara webbadressen, men det är bra eftersom den här filen inte
existerar på World Wide Web.
Det finns som en lokal fil i till synes mina Användare directory-- / jharvard--
John Harvard-- / desktop.
Men det har en URL.
Det råkar bara vara lokal.
Tyvärr kan ingen av er besöka detta, för om du skriver den här webbadressen,
du skulle tala om din webbläsare, leta efter en fil som heter hello.html
på din hårddisk.
Och, naturligtvis, om du inte har följt tillsammans manuellt
det kommer inte att finnas där.
>> Så det är bra.
Vi behöver fortfarande ett sätt, i slutändan, att få den här filen i banan,
men låt oss retas isär ett par konsekvenser för säkerheten vad vi just
såg och knyta den tillbaka till den tidigare diskussion från i morse.
Det visar sig att om en webbläsare bokstavligen bara gör
vad jag säger det att göra, och det verkar att vara fallet att ett ankare tagg är
påverkas av värdet av detta attribut kallas href
men det visar denna text, skulle detta verkar
att antyda att jag kunde sätta webbadressen på båda ställena och sedan ladda
och nu se webbadressen och gå till webbadressen.
Lägg märke till om jag muspekaren över det nedre vänstra, Jag verkligen kommer fortfarande disney.com.
>> Så om du någonsin varit phished-- P-H-I-S-H-E-D--
med en av de falska e-postmeddelanden från som PayPal din bank,
du har förmodligen fått länkar inne av e-post som du läser det
berättar du klicka här för att gå bekräfta ditt lösenord eller bekräfta ditt födelsedatum
eller social eller något socialt engineering dig att avslöja
information.
Tja, jag kunde slags ta Fördelen med detta, kunde inte jag?
Jag kunde säga något liknande, www.paypal.com.
Och i stället för disney.com jag kunde gå till, liksom, badguy.com.
Ladda om.
Och hur lätt är det att lura, speciellt en icke-teknisk läsare
eller en summariskt läsning läsare än att klicka
en länk som den här, som om jag klickar det-- Jag faktiskt inte vill gå badguy.com.
Jag vet inte vad som faktiskt finns.
Så paypal.com, varsel, är vad det säger att det kommer att,
men naturligtvis, om jag tittar ner super-låg, det är lite suddiga,
men det står badguy.com.
Det är bara berätta just nu att jag ska till fel ställe.
Och när jag sade tidigare att bankerna borde verkligen inte uppmuntra eller tåg
användare till att klicka länkar, detta är bara en manifestation av den.
Och det är så enkelt.
Du är nu en motståndare om du göra något liknande
och försök att lura en användare i att besöka din webbplats.
Men nu kommer vi att hålla saker fin och ren.
Vi kommer att gå vidare och spola tillbaka dessa förändringar.
Uppdatera sidan.
Och jag går tillbaka till disney.com.
>> Låt oss se om vi inte kan reta Detta lägenhets lite mer.
Så "Hej, Disney World."
Jag kommer att säga här nere.
Kanske kommer jag att göra några rum.
"Vi hoppas att du ska trivas!"
Spara.
Ladda om.
Det är inte rea-- det är inte vad jag tänkt, eller hur?
Jag menar, om jag behandla min text fil som en ordbehandlare,
vad gjorde du hoppas skulle hända här?
Ja, jag tycker det bör vara en radbrytning här,
så det känns buggy på något sätt.
Men det är faktiskt avsiktligt, eftersom precis som tidigare,
webbläsaren är bara att gör vad du säger den att göra.
Jag har inte sagt att bryta rader.
Jag har inte sagt det att röra sig nedåt, även Men intuitivt, jag känner att jag gjorde.
Så visar det sig att vi behöver lite mer markup,
och jag kommer att fixa detta på följande sätt.
Jag kommer att inleda denna första hello med vad som kallas ett stycke tagg.
Och då kommer jag att gå vidare och linda denna andra meningen
i en annan punkt taggen, även om de är super-korta stycken.
Nu ska jag spara.
Ladda om.
Och nu har vi att utrymme, och vi slags
har semantiken för två separata stycken.
>> Det är allt bra och bra, men det skulle vara trevligt att lägga till en bild på denna sida,
så jag kommer att leta efter Musse Pigg på Google Bilder.
Och bara för skojs skull, jag är kommer att ta bilden.
Jag kommer att gå vidare nu och ta webbadressen till den här bilden
även om det finns olika sätt att göra detta.
För nu, jag kommer bara att kopiera webbadressen.
Jag kommer att gå tillbaka till min text fil, och jag kommer att säga här,
img src = quote unquote webbadressen, superlång.
Och då begreppet en bild är lite annorlunda.
Det finns egentligen ingen begreppet start en bild och slutar en bild,
som en start märka en sluttagg.
Så det känns lite konstigt att mig semantiskt att göra detta,
att ha en nära-bildtaggen.
Det är inte fel.
Det är helt korrekt, och det uppmuntras,
men det finns en förkortning notation.
Jag kan typ av samtidigt öppna och stänga samma tagg,
och som kommer att göra webbläsaren glad.
Så det är bara en liten mer kortfattad saker
att begrepps verkligen inte vettigt att börja och sluta.
De är bara där, eller att de inte är.
>> Så jag kommer att spara och gå tillbaka min "Hej, världen" sida och reload.
Och det är lite utom kontroll, eftersom denna bild är faktiskt
lite stor, men det är OK.
Jag kunde ändra storlek på det i ett program.
Eller vet du vad.
Bara för att demonstrera, jag kommer att faktiskt säga
att bredden av denna sak bör endast 200 pixlar, 200 punkter.
Låt mig gå vidare och spara och ladda, och nu sidan
ser lite mer rimlig.
Men märker mönstret.
Tja, jag har typ av lärt er alla HTML i någon mening, åtminstone
konceptuellt, eftersom alla HTML är är dessa tags-- öppna taggar, slutna taggar,
och attribut som ändra sitt beteende.
Och, uppenbarligen, varje tagg kan ha noll eller ett
eller två eller flera attribut, varje dos om som gör något lite annorlunda.
Nu, hur vet du vad som finns?
Du lyssnar bara någon som mig berätta vad som finns,
eller om du bara Google runt för en tutorial på HTML, och det är verkligen denna enkla.
>> Sannerligen, när jag var en undergrad år sedan och lärde HTML,
en av min matematik undervisning assistenter tillbringade bara
lite tid handledning mig för som en halvtimme, en timme,
och då jag var på väg.
Jag var på väg mot att göra de mest avskyvärda webbplatser någonsin,
som uppenbarligen har jag inte verkligen utvecklats bortom.
Men poängen är att, när du förstå dessa enkla ideas--
om svårbegripliga text-- men dessa enkla idéer om att starta en tanke
och stänga en tanke, att hålla allt fint balanserad,
ser något upp, modifiera beteendet hos den taggen, det är verkligen allt
det finns det.
Och i själva verket, om vi nu går till något i stil google.com-- faktiskt,
låt oss gå en plats lite mer reasonable-- stanford.edu.
Och jag kommer att gå till Visa, Utvecklare, Visa källa.
Det är fult, men notice-- och jag ska zooma i meddelandet
några saker som är bekant redan.
Det är det här upp här, som är en webbläsare.
Här kommer HTML5.
Det finns HTML.
Uppenbarligen finns det en attribut att jag inte
Använd som anger språk på sidan,
och detta kan hjälpa till med automatisk översättning och sånt.
Här är huvudet på sidan.
Här är titeln på Stanford sida.
Det finns en tagg jag inte tala om yet-- metataggen.
Det är bara sorts bakgrundsinformation.
Det hjälper med SEO, eller sökmotoroptimering,
eller Google-sökresultat eller liknande.
Men om vi fortsätta leta, hålla ser här är body-taggen.
Och det finns knippen av andra taggar vi inte har talat om ännu.
Men Div är en för en uppdelning av sidan.
Det är som en osynlig rektangel Om du slags vill mentalt
dela din sida i olika enheter på nätet.
Och sedan massor av divs I se, något som kallas klass,
men vi ska återkomma till det.
>> Detta är interesting-- formulär.
Formulär är hela webben.
Alla sökrutan du någonsin använt är en form.
Och så, låt oss faktiskt se.
Form.
Handling.
Verkan av denna form, oavsett historiska skäl, är webbadressen.
Metod är "post."
Det visade sig att HTTP-förfrågningar kan använda verbet "få", som vi såg tidigare,
eller "post".
Och kommer att se en skillnad om detta i ett ögonblick.
Låt oss faktiskt se vad detta är.
Låt mig gå tillbaka till Stanford sida.
Vilken form de talar om, tror du?
Vad hoppar ut på dig?
>> PUBLIK: sökrutan.
>> DAVID J. MALAN: Ja.
Så upp längst upp till höger här är sökrutan.
Och det är hur de genomförs det-- en tagg som är bokstavligen öppen fäste form.
Och sedan ska vi söka efter något.
Låt oss söka efter en kompis av mine-- "Nick Parlante."
Stiga på.
Och naturligtvis, gick det att en något annorlunda webbadress.
Låt mig gå tillbaka hit.
Låt oss söka efter "kurser."
Helvete.
Gick till en annan adress.
Så, Stanfords lägga till några magiska att de inte tar mig till URL
som vi såg i åtgärd attribut där.
Men denna form här genomförs rent med hjälp av denna markering här, dessa taggar.
I själva verket, här är ingången för den typ av sökning som du vill.
Här är ingång för en annan typ av sökning.
Här är ingången för själva strängen.
Och så målet är inte att linda våra sinnen runt alla dessa taggar
men bara för att se.
Det är bara att öppna och stänga taggar och söker upp saker.
Ja?
Victoria?
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Det är en bra fråga.
Det är lite svårare att se.
Låt mig återkomma till detta fråga på bara några minuter
när vi tittar på något som kallas CSS, eller Cascading Style Sheets,
och vi kan försöka att sluta så mycket från sidan.
Så om vi nu ta en titt på google.com, Låt oss se vad deras sida ser ut.
Du skulle they're-- som är söt idag.
OK.
Helt klar.
Okej, så Visa källa.
Man skulle kunna tro Google har riktigt nice källkod.
Så uppenbarligen vad som händer här?
Och i själva verket är detta inte ens HTML.
Detta är något som kallas JavaScript.
Och låt oss hålla på och gå.
Jag vet inte ens där sidan börjar.
Jag kommer att använda Command F, öppna fäste HTML.
Okej, det är det.
Jag hittade i början av sidan, och det finns så mycket grejer här.
>> Vad är det egentligen som händer?
Tja, du vet vad, vi kan städa upp detta.
Om jag istället gå till denna Inspektera verktygsfältet denna speciella diagnosverktyg,
och gå inte till nätverk, där vi hålla i dag,
men om jag går till Elements, Vad är riktigt nice
är att en webbläsare har en hel del mycket bättre ögon än jag.
Och webbläsaren kan läsa att röra av en webbsida,
som HTML mail vi bara tittat på, och det kan
tolka det eller läsa och analysera det och formatera om den
i en trevlig människa vänligt sätt.
Så vad jag ser nu i den här skärmen här
enligt Elements, exakt samma innehåll, men de har indragen allt,
de har färglagt det, men Det är exakt samma text
att jag hämtat från servern.
>> Och vad är trevligt nu är jag kan se i kroppen, för instance-- varsel,
sidan fortfarande består av bara ett huvud och en kropp,
och jag kan hierarkiskt dyka in här.
Lägg märke till att Google verkar ha att divs-- här och här.
Jag kan expandera det.
Det finns en hel massa andra divar.
Så det är lite komplicerat.
Men vänta.
Detta verkar så mycket mer läsbar, relativt, än detta.
Varför är Google pinsamt sig genom att skicka
denna enorma röra av kod av något sortera bara för att genomföra något
som ser så enkelt vid första anblicken?
Liksom, varför inte de lägga till fler utrymmen?
Varför de inte trycka Enter som jag gjorde?
Titta hur bra jag var på att skriva en webbsida.
Jag trycker på Retur så flitigt.
Jag indragen så allt är så söt och läsbar.
Varför Google inte utövar samma?
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Bra.
Väldigt rättvist.
De har inte några personen på Google manuellt
uppdatera hemsidan längre.
Det är inte 1999 längre.
Så de har programvara.
De har andra verktyg som generera dynamiskt de är HTML.
Naturligtvis att själva koden skriven av människor,
men verkligheten är, det är ganska rimligt att säga,
webbläsaren gör verkligen inte care hur rörigt koden.
Men det finns en ännu mer tvingande tekniska skäl
att Google distribuerar deras HTML kod i en sådan slarvig, synes
överväldigande sätt packat ihop med mycket lite way-- mycket lite
i vägen för formatering som jag gjorde.
>> PUBLIK: [OHÖRBART]
>> DAVID J. MALAN: Snabbare?
Varför?
Och vad sa du, Lydia?
Snabbare?
Varför snabbare?
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Det finns inget utrymme att läsa.
Ja.
Så fundera på vad en plats är.
Så varje tecken på tangentbordet tar en viss mängd utrymme för att representera,
antingen fysiskt, som om det tar upp så mycket utrymme,
eller på något sätt under den huv, kräver att minnet.
Och som en aside-- och vi ska prata mer om detta tomorrow--
varje tecken på tangentbordet typiskt kräver 8 bitar, eller en bitgrupp.
Så ett mönster av 8 nollor eller kära, eller bara ett byte, som vi
människor skulle normalt säga.
Så det är liten, men det är fortfarande icke-noll.
Det är fortfarande en viss mängd utrymme.
Så om en ingenjör eller Google träffar mellanslagstangenten bara en gång, och antar
Google-- det är super-popular-- Anta att en miljard människor
besök deras hemsida en dag, eller något antal människor
Besök hemsidan en miljard gånger om dagen,
hur många ytterligare byte har att mjukvaruingenjör bara kostar Google
genom att slå hans eller hennes mellanslagstangenten en gång?
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Inte riktigt så illa.
Bara ett byte gånger en miljard.
så en--
PUBLIK: 8 miljarder gigabyte.
DAVID J. MALAN: Ej 8 miljarder.
8 miljard byte.
Men en gigabyte.
1 gigabyte skulle vara måttenhet.
Om han eller hon gör två utrymmen, 2 gigabyte.
Tre gigabyte.
Höger?
Det vågar dyrt.
Och så i fall som Google, som beviljas är extrema fall,
det finns andra frågor som uppstår bara genom att göra mycket rimliga beslut
eller ta mycket enkla mänskliga handlingar, eftersom den har denna förstorad effekt.
Så en av anledningarna detta ser så komprimerade
är precis som Victoria sa-- det var bara genereras av datorer ändå.
Så ingen big deal.
Låt webbläsaren räkna ut det.
Men det är också medvetet har inte mycket utrymme,
eftersom utrymmet är inte nödvändigt.
Och utrymmet kostar faktiskt pengar.
>> Det antingen kostar tid, eftersom bara att driva
Så mycket mer data av google.com huvudkontor bara
har fått ta en viss mängd tid, även om det är millisekunder
eller mikro, men som lägger upp över så många användare, eller mer troligt,
det kostar förmodligen pengar.
Google ansluter förmodligen någon annanstans i världen, en
av dem peering poäng, och om de har
någon form av finansiell relation varigenom deras uppgifter kostar pengar,
de kan lika gärna minimera hur mycket data
de är spottar ut på deras internet-anslutning.
>> Så rolig sak, men i slutändan, eller kanske lugnande sak,
är att även om det ser fruktansvärt överväldigande, vid slutet av dagen,
det är fortfarande exakt samma principer som detta mycket enkel sida här av en HTML
sida.
Så bara för att sammanfatta och så att du har en kanonisk version om du inte var
följer med genom val här, här kan vara den mest enkla av webbsidor,
så något att leka med kanske senare.
>> Nåväl, låt oss införa en par andra idéer nu.
Vi håller på att införa något som kallas en stil tagg.
Vi kan stilisera denna sida mer intressant sätt.
Så medan HTML-e handlar om märkning upp
data, typ av specificerar till en webbläsare hur man strukturerar data,
var att sätta den, CSS, eller Cascading Style Sheets,
är ett andra språk som i allmänhet blir blandas med HTML
som vi see-- men vi kan rengöra att upp i en moment-- som tar
den sista milen, och det stylizes det.
Det blir färgerna precis rätt, den teckenstorlekar precis rätt,
placeringen precis lagom.
Det handlar om estetik eller formatering, inte om
den fundamentala data själv.
Och det enklaste sättet att visa detta är kanske genom exempel.
Så jag kommer att gå över min enkel textfil.
Och på bara ett ögonblick, jag guida oss genom processen
att göra detta själva.
>> Jag kommer att gå tillbaka till min fil här och ladda om sidan bara
för att bekräfta hur det ser ut.
Det är där vi är på nu.
Det känns som barnen skulle åtnjuta med lite färg på denna webbsida.
Så jag kommer att gå upp här i huvudet på sidan.
Och jag kommer att göra stil, / stil.
Och sedan insidan av denna, kommer jag att tala om kroppen av min page--
och denna formatering är på första anblick kanske lite
konstigt men konventionell.
Jag kommer att säga att bakgrunden Färgen på denna sida bör vara grön.
Och detta är tyvärr sorts inte den bästa designen.
Märker att tidigare i en värld av HTML,
Jag sa att attribut är dessa nyckelvärdepar.
Något lika med citat unquote "något."
I en värld av CSS, som var designad av några olika personer,
de beslutade att i deras värld, par nyckel-
skulle vara ordet kolon något.
Så det är samma idé, men.
Det associera ett värde med några viktiga som på något sätt
påverkar beteendet hos denna sida.
>> Och du kan nog gissa.
Vad är detta förmodligen kommer att göra även om du har aldrig
sett HTML eller CSS förut?
PUBLIK: Ändra bakgrundsfärgen.
DAVID J. MALAN: Ja, ändra bakgrundsfärgen.
Och särskilt bakgrundsfärg kroppen.
Men i den mån organ för nu är webben
page-- det är det enda under namnlisten really--
det förmodligen kommer att påverka samma sak.
Så låt oss se.
Låt oss spara.
Gå hit och ladda om.
Det är ganska ohyggliga.
Och vad som händer här är en bieffekt.
Jag valde just den här bilden slumpmässigt.
Varför är den gröna inte permeerande bakom Mickey?
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Exakt.
Det visar sig att bilderna, ganska mycket alla bilder som vi kan använda,
är alla rectangles-- av rektanglar.
Även om Mickey har några kurvor för sig själv och har en bakgrund,
den bakgrunden måste vara något.
Det måste vara vit.
Det måste vara svart eller något annat.
Det kan vara transparent.
Och faktiskt, jag kunde Öppna Musse Pigg här
i ett program som kallas Photoshop eller något liknande
och ändra allt detta vita Bakgrunden till transparent,
så den gröna skulle lysa igenom.
Men det är något jag skulle behöva att be mig eller grafiker
eller en designer på mitt bolag, till exempel,
att göra, särskilt eftersom jag bara lånat en från internet.
Men det är varför detta händer.
>> Så vad kan vi vill göra?
Tja, kanske vi vill säga vi verkligen hoppas du ska trivas.
Och för betoning, jag vill för att göra denna starka,
och så jag ska säga öppen stark och stäng stark och sedan ladda om.
Och det är lite svårt att se på projektorn
men kanske egentligen nu hoppar ut på dig lite mer.
Så du kan lägga till kursiv stil i detta sätt, djärvt vända på detta sätt.
Vi kunde ändra färger.
I själva verket bara för sparkar, jag kommer att gå vidare och göra det.
Jag vet inte riktigt gillar hur min punkterna är så nära varandra,
så jag kan göra något sådant.
Jag kommer att tala om för webbläsaren, ändra varje stycke tagg för att ha,
låt oss säga-- faktiskt, du vet vad, låt oss rikta in den text-align, center.
Och återigen, jag vet att detta bara att någon lärt det till mig
eller jag såg upp i en online-referens.
Så låt mig spara.
Och ah, nu har jag centrerad bilden där.
Och faktiskt, du vet vad, om Jag flyttar min bild i ett stycke
tag-- så en tredje stycket, även om det inte är text.
Låt oss spara den och ladda om.
Nu sidan börjar se snäll of-- Jag menar, det är fortfarande ganska ful,
men åtminstone det ser ut som jag tillbringade två minuter i stället för en minut
gör det.
>> Och så, stegvis, kan vi göra dessa estetiska förändringar nu till sidan?
Jag har egentligen inte ändrats uppgifterna i sida annat än att lägga till ordet egentligen.
Jag har lagt till metadata, om man så vill.
Hej, webbläsare, gör ordet "verkligen" fet.
Men uppgifterna är inte stark.
Det är metadata.
Datan är "egentligen".
Så vi har fortfarande några av samma koncept som tidigare.
Nu, naturligtvis, är detta inte på webben, så jag kommer att göra ett sista steget här.
>> Jag kommer att gå till hello.html och bara markera och kopiera.
Och nu ska jag gå in Cloud9, vilket
Jag ska gå igenom på bara ett ögonblick.
Och oddsen är att du kommer snart att bli, om inte redan vid en skärm som denna.
Och låt mig bara ge dig en snabb rundtur i vad Cloud9 faktiskt är.
Så återigen moln 9 är denna molnbaserade tjänsten
som ger dig och mig illusionen med vår egen virtuell maskin
i molnet, tekniskt en behållare i molnet,
att vi har full administratörsbehörighet till.
Så i teorin, utan en annanstans i världen har
tillgång till skärmen är jag tittar på just nu,
utom kanske folk som driver sajten,
eftersom tekniskt sett har fysisk tillgång och så vidare.
>> Vad ser vi i denna miljö?
Jag kommer att zooma ut, eftersom det är en liten liten.
Och låt mig påpeka över här bara ett ögonblick.
På den vänstra sidan av min och din skärm, det finns en filhanterare till vänster.
Så i samma anda Mac OS och Windows.
Dessa är alla av filer på mitt konto.
Och som standard, om din konto är som mitt,
du ser eller snart se HelloWorld.html och readme.md.
Över här till höger, är detta där mina textfiler kommer att gå.
Om du någonsin har använt Microsoft Word eller Anteckningar eller Textedit,
Detta är ord min redigering filer kommer att gå.
Och sedan mest svårbegripliga inslag i denna miljö
att vi inte riktigt kommer att behöva använda är här nere kallas en terminalfönster.
Om du har använt DOS från förr, detta är Linux
eller Linux motsvarighet till DOS.
Det är en textbaserad interface-- inga musklick, ingen släp.
Allt du kan göra är att skriva kommandon, men dessa kommandon
kan skapa filer, flytta filer, öppna kataloger, nära kataloger,
göra en rad olika saker.
Men nu, vi ska bara ägna vår tid här.
>> Och så låt oss göra detta.
Om du är i detta miljö, som du bör
vara om du har skapat en arbetsyta redan, gå vidare och bara gå upp
till fil Nytt för ett ögonblick.
Och det kommer att ge dig en ny Fliken här i mitten.
Och jag bara-- och låt oss gå vidare och göra det.
Låt oss gå vidare och nu gör Arkiv, Spara och gå vidare och kalla det hello.html,
inte att förväxla med HelloWorld.html, vilket
kom med nya gratiskonto, vilket är bara ett urval fil.
Du kommer att se det plötsligt visas, troligen på vänstra sidan,
och fliken kommer fortfarande att vara öppen.
Och låt mig uppmuntra dig nu att återskapa filen eller vissa varianter därav.
Och om du inte kan riktigt se det på skärmen är detta identiskt med sliderna
att du förmodligen i en annan flik.
>> Så kort sagt, gör din första webbsida, spara den och sedan på bara ett ögonblick,
Jag ska visa dig hur du kan faktiskt visa detta.
Men ändra åtminstone en sak.
Ändra Helloworld till något av ditt eget val,
så att du är övertygad om att det är din fil och inte en jag just skapat.
Okej.
Och när du ready-- ingen rush-- när du är redo,
gå vidare och spara filen När du har gjort dessa ändringar.
Och om du klickar på Kör knappen uppe, detta
ska öppna en ny flik som kommer att berätta vad URL kan du besöka filen på,
men det kan ta en stund att quote unquote "start Apache", som
är namnet på webbservern.
Så var noga med att göra exakt vad som finns i filen i slutändan.
Så just nu, jag zooma in.
Om jag börjar skriva öppen fäste HTML, meddelande
det föranledde mig att avsluta min tanke.
Och om jag avslutat min tanke, det ger mig automatiskt den avslutande taggen.
Men förväntningarna är då jag ska träffa Ange och sedan röra sig inuti det
och inte huvudet inne och då gör jag kropp inuti.
Och det är lite konstigt i början, eftersom det gör jobbet åt dig,
men inser att slutligen det sparar tangenttryckningar.
Och i själva verket ett mycket vanligt särdrag hos programmeringsmiljöer dessa dagar
både för webbutveckling som Detta och faktiska programmering,
som vi kommer att prata om i morgon, är dessa auto-komplett funktioner,
saker som bara tillåter en programmerare eller en designer
att skriva färre knapptryckningar till åstadkomma samma sak.
Ibland är det bra, men.
Ibland är det bara irriterande.
Och återigen, när du har transkriberas sliden eller någon variant därav,
Du kan klicka på knappen Kör där uppe.
Och sedan i botten fönster, kommer du bli informerad
på vilken webbadress kan du besöka webbsidan.
Gruvan, till exempel, är i business-daharvard.c9users.io
och så vidare.
Okej, så låt mig-- några frågor?
Alla andra frågor om bara få detta fungerar innan vi lägger till funktioner?
Och låt mig föreslå bara att få folks comfortable--
eftersom det är en sak att bara kopiera och klistra in blint vad jag har gjort.
Men bara så att folk brottas med åtminstone en uppgift,
Jag kommer att slå på lite musik.
Jag kommer att föreslå en lista över saker du kan eventuellt lägga till.
Och du kan säkert använda Google.
Och varför inte vi bara föreslå att du försöker lösa
åtminstone ett särskilt problem här.
Så när det gäller taggar Låt mig åter det här.
>> Faktiskt, låt mig uttrycka den i en textform.
Låt oss säga att bland taggarna vi kan Använd här är några taggar hit.
Vi har sett punkt taggen.
Nu är det kommer att komplettera automatiskt.
Punkt tag, ankartaggen.
Låt oss säga att du vill göra något större,
så du kanske like-- span taggen kan hjälpa.
Tja, kanske du behöver lite hjälp för att på bara ett ögonblick.
Vi har sett div.
Du ser att det finns bord.
Det kallas något tr, td.
Th, td.
Kom tillbaka till det om en stund.
Vad kan vara praktiskt?
Det finns starka.
Det finns betoning, eller snarare em.
There's-- vad kanske du vill ha här?
Tja, tar vi en titta på det tillsammans.
Form, som vi har sett.
Det finns formulär.
Det finns ingång och några andra.
Okej, så låt oss göra detta.
För att besvara ett Victorias fråga, låt mig först
bara se till att alla är kunna få sin hello arbets.
Låt mig presentera ett par andra idéer.
Sedan kommer vi att låta folk löser vissa problem på egen hand.
Då kommer vi faktiskt komma tillbaka som begreppet ett formulär,
och vi kommer faktiskt åter genomföra tillsammans front-end-gränssnitt,
så att säga, för Google.
Vi kommer att använda Google som den bakre änden och låt dem göra det hårda arbete, sökningen,
men vi återskapa den främre änden Google och sökfunktionen
som de har på sin egen hemsida.
Och så vi kommer tillbaka till dessa taggar på bara ett ögonblick.
>> Så det här var vad jag föreslagna nyss.
Vi kan lägga till stilisering till en sida insidan av denna stil tagg,
och vi kan stilisera bakgrunden färg, textjusteringen,
oavsett om det är centrum eller till vänster eller höger.
Men mycket snabbt du skulle hitta eller en webbdesigner
skulle finna att detta blir lite otymplig,
eftersom du gör vad som är kallas blandningsinnehåll
med presentation av dessa.
Du blandar data och estetik därav.
Och faktiskt, om man betänker vad som kommer att hända över time--
detta är en mycket liten webbsida, naturligtvis.
Men om jag lägga till innehåll på denna sida och jag lägga stil till denna sida,
sidan blir mycket snabbt längre och längre och längre.
Och antar att jag vill har en andra webbsida som
delar vissa av dessa attribut.
Antar att min andra webbsida för min site-- också, jag vill ha allt centrum,
och jag vill också allt med en grön bakgrund.
Jag är ganska mycket kommer att behöva kopiera och klistra in några av dessa linjer
in i den andra filen, vilket känns bra.
Det kommer att lösa problemet.
>> Men om jag vill ha en tredje sidan eller en 30 sida eller en 40 sida?
Nu ska jag vara kopiering och klistra in en hel del duplikat kod
i flera filer.
Och så antar att Jag bestämmer eller jag har hört,
Hej, vi inte använder en grön bakgrund längre.
Vi kommer att börja använda orange.
Vad har du att ändra?
Tja, måste du ändra den stilen från grönt till orange hur många platser?
Som 30 eller 40 platser.
Det är långtråkigt.
Det är risk för fel.
Det finns ett antal skäl där du inte vill att förmå
den typen av smärta för dig själv.
Och så skulle det inte vara trevligt om vi kunde ta vad jag bara
sätta mellan dessa två gula taggar, dessa stil taggar,
faktor ut och sätta alla mina stilisering i en central fil
att alla 30 eller 40 av mina andra filer låna från eller på något sätt referera,
inte olikt nätverk diagram vi gjorde innan?
>> Så om jag går in här, jag är kommer att faktiskt föreslå
att vi byter ut stil tagg med något
kallas länken taggen, som är fruktansvärt, fruktansvärt namngiven,
eftersom du inte använder link tag att skapa vad
vi människor känner som en länk på en webbsida.
För detta använder man vilken tagg?
Hur skapar man en länk på en webbsida?
PUBLIK: Den a.
DAVID J. MALAN: Den a, eller ankare tagg, som gick till Disney innan.
Länken taggen här säger this-- länk till en fil som heter
styles.css, förhållandet till vilken kommer att vara att det är min mall.
Så det här är en av de S i CSS-- CSS.
Style sheet-- två av S i CSS.
CSS.
Detta betyder bara, hej, webbläsare, gå hitta styles.css på den lokala servern
och använda den som din stilmall, vilket innebär insidan av den filen
kommer att bli alla av stylizations som vi just har gjort.
Och så vad filen kan se ut är detta.
Och jag ska bara göra detta är en snabb exempel, eftersom vi inte behöver
att få för mycket till ogräs här.
Men om jag kopiera, vad jag föreslår är att en programmerare skapa en ny fil,
klistra i dessa lines-- whoops-- klistra in dessa rader,
spara den som styles.css, och sedan, i den andra filen, ta bort allt detta
och ersätta den i stället med den här länken tag.
Så att om jag länkar href = "styles.css" förhållandet skall vara "stylesheet"
tagg.
Spara den.
Gå tillbaka till min Helloworld.
Ladda om.
>> Bokstavligen ingenting har hänt.
Det är en bra sak, eftersom det innebär att det är faktiskt allt arbete.
För att bevisa så mycket, antar jag göra en stavfel, och jag kallar detta "styles.css"
med en huvudstad S, som är felaktig, och sedan ladda om.
Nu kan du se det bara inte fungerar.
Nu, varför?
Nåväl, låt oss använda en teknik från tidigare.
Låt mig gå vidare och, i min webbläsare, i Chrome, jag
kommer att öppna upp den speciella Fliken nätverk som tidigare,
och låt mig ladda om sidan.
Vad är du inte förvånad över att se nu?
Eller kanske du är förvånad över att se det.
Hursomhelst, vad ser du nu?
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Det är inte hittats.
Varför är det inte hittas?
Tja, Styles.css-- kapital S-- finns inte.
Jag misnamed det.
Enkel stavfel.
Men jag blir förståeligt nu en 404, eftersom servern säger, hej,
det är inte hittas.
Bokstavligen, jag vet inte där filen är.
Så som ett resultat, webbläsaren visar hur det kan,
den råa innehållet på sidan, som var en 200, HTML,
men stilisering kan inte tillsättas därefter.
Och detta är vad som menas med kaskadkoppling.
Du kan slags lägga det efter, och det slags
förfinar estetik webbsidan.
Och du kan även åsidosätta de stilar med ytterligare andra formatfiler
om du vill.
Det är inte hittats, men i det här fallet, på grund av kursen, jag misnamed det.
Så jag måste fixa det första.
>> Så låt oss gå vidare och föreslå följande.
Låt oss gå vidare och göra det.
Börjar med kanske din Helloworld-fil,
Låt mig bara bjuda ett par av funktionen förslag.
Så, Victoria, du ville göra några text större, eller hur?
Okej, så vi kan gör texten större.
Och vi var plocka bort bara ett problem att lösa.
Gör texten större.
Jag tänker inte bry skriver detta när vi
har kula teknik rätt över här.
Så några problem.
Så vi ska försöka att göra texten större.
Okej.
Vad skulle någon föreslå?
Vad kan vi vill att göra i en webbsida?
Låt oss komma med en kort lista över saker
och sedan delegera till grupp att räkna ut detta.
>> PUBLIK: [OHÖRBART]
>> DAVID J. MALAN: OK, textposition på olika sidor av papperet?
Okej.
Något annat.
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Det är.
Så en gif är bara en olika filformat.
Vi använde bara, vad, en png eller jpg förmodligen?
Vi använde en jpg.
Om du är nyfiken, en överdriven svara på din fråga
är en JPG används i allmänhet för fotografier, eftersom det stöder
miljontals färger eller 24-bitars färg.
En gif används vanligen för, som, Internet memes dessa days-- animationer,
som animerade GIF.
Men det händer att använda en mindre färg palett, endast 256 möjliga färger,
men det stöder insyn och animation.
Och så finns det png, som stöder öppenhet och fler färger
men inte animering.
Så det är en kompromiss.
Så att lägga en gif, men, skulle vara funktionellt
motsvarar lägga till en png eller jpg.
Ja.
Bildkälla är lika.
Så något annat.
Låt oss komma fram till något som vi skickade till Victoria att göra här.
>> PUBLIK: Lägg till knappar för ett formulär.
DAVID J. MALAN: OK.
Så lägga till knappar för ett formulär.
Och vi kommer att göra det en tillsammans.
Så det kommer att bli en perfekt segue direkt efter denna utmaning.
Något annat?
Vad skulle du vilja göra?
Webben känns mycket underwhelming Om detta är allt vi kan göra.
PUBLIK: Ändra färgen på texten.
DAVID J. MALAN: Ändra vad?
PUBLIK: Färg på texten.
DAVID J. MALAN: Ändra färg på text.
Okej.
Så, låt oss göra detta.
Bara en gång så inte att du är bara utantill, att göra exakt vad jag gör,
Jag kommer att slå på musik för kanske fem minuter här.
Du är välkommen att använda Google.
Du är välkommen att fråga mig, och Jag ska viska en antydan i örat.
Du är välkommen att titta över på andra axlar.
Men lösa bara en av dessa problem.
Men vi ska göra det sista, bildar en, om vi kunde tillsammans.
Så fem minuter för att lösa något av dessa problem
med hjälp av Google, intuition, eller någon andra medel som finns tillgängliga för dig.
>> [Musik spelar]
Okej.
Inga bekymmer om du vill att hålla mixtra,
men jag ska förstöra ett par av dessa svar.
Så det första förslaget från Victoria var att göra texten större.
Så det finns några sätt att göra detta.
Jag har för närvarande återställs min skärm till denna storlek,
även om jag har zoomat in artificiellt bara för att se saker.
Och låt oss göra detta.
Låt mig gå vidare och ta tag några generiska latinska texten
bara så vi har något att arbeta med.
Så ge mig bara ett ögonblick.
Jag ska göra tre stycken.
OK.
Detta kommer att vara ett bättre exempel.
Så för den nyfikne, i min hello.html, jag bara
klistras tre meningslösa latin punkterna
bara så vi har en text att arbeta med.
Och Victoria mål var att göra en del av texten större.
Så jag kunde, som tidigare, gå in här.
Och låt mig göra det på rätt sätt.
Jag kommer att ha en länk tagg som pekar på en fil
kallas "styles.css," förhållandet av vilka är igen "formatmall."
Och då kommer jag att spara som och öppna upp denna "styles.css."
>> Så, som tidigare, jag har förmåga i detta CSS-fil
faktiskt åsidosätta standard estetik på en webbsida,
och standard estetik, Naturligtvis är ganska tråkig.
Det är typ av normal textstorlek, svart text, vit bakgrund, och så vidare.
Så antar jag vill göra allt detta text större.
Jag kunde göra ett par saker.
I mitt styles.css fil, jag kan säga, vet du vad,
tillämpa följande till kroppen av min sida.
Gå vidare och göra teckenstorlek 24 punkter,
som är ett nummer jag kan användning i Microsoft Word.
Låt mig gå tillbaka till min hemsida sida här och ladda om,
och du kan se att Det är redan mycket större.
Och vi kan få lite galen, precis som vi kan på en desktop--
göra det 96 poäng.
Ladda om.
Och det blir lite otymplig på denna punkt.
>> Men jag kunde vara lite mer exakt.
I stället för att tillämpa denna format till kroppen av min sida,
vad kan jag använda den istället, vad andra tagg som kanske fortfarande
fungerar på samma sätt?
>> PUBLIK: p-taggen?
DAVID J. MALAN: P-tagg.
Så att huvudet inte skulle vara korrekt, eftersom huvudet,
Du kan faktiskt inte styra estetik.
Det finns antingen text där eller inte.
Men p tag-- jag kan dyka i en liten djupare, så att säga, i den punkt
taggar.
Och även om det finns tre, det är helt bra, eftersom det i CSS,
när jag bara säga "p" detta betyder tillämpa följande
till en tagg som matchar detta väljare, väljaren bara
är namnet på etiketten.
Så var du se en "P" tillämpa teckenstorlek,
och låt oss göra det mer rimlig igen-- 24 poäng.
Och vet du vad, bara för bra åtgärd,
Låt oss göra färgen röd bara för stunden.
Och nu om jag ladda om, nu har vi se tre fula stycken.
>> Men nu antar att jag är typ of-- Jag vill i första stycket
att hoppa ut på användaren.
Jag vill inte bara öka teckenstorleken på allt.
Och så vill jag faktiskt att identifiera eller skilja mellan dessa punkter.
Så låt oss bli av med röda, eftersom det är bara typ av klibbig,
och låt oss gå vidare och göra teckenstorlek 12 punkter som standard,
så att vi är tillbaka till något lite mer rimlig.
Och nu vill jag bara att öka teckenstorlek i första stycket.
Jag kan göra detta på ett fåtal sätt, men ett sätt som är
kanske mest instruktions på just nu är att göra följande.
Låt mig gå vidare och säga, detta punkt har ett unikt ID av "först."
Jag kan kalla detta vad jag vill.
Jag skulle kunna kalla detta "foo" eller något annat ord,
men jag ska ge det några semantiskt meningsfullt namn
som "först."
Detta är en unik identifierare, ID för min första stycket.
>> Vad jag kan göra nu i min stilmall är vara lite mer exakt.
Istället för att säga, tillämpa följande till p-taggen,
Jag kan säga following-- tillämpa följande,
eller välj, HTML-elementet som har ett unikt ID av "först."
Vad vill jag att gälla för det?
En teckenstorlek på 24 punkter.
Så jag har två väljare nu.
Man gör alla punkterna 12 poäng.
Men detta, särskilt eftersom det kommer second-- det kommer sist i file--
detta har en kaskadeffekt.
Jag har bara gjort alla mina punkt tags 12-point,
men detta nu kaskader och åsidosätter att för varje element
på sidan, en tagg i sidan vars unikt ID är citat unquote "först."
Och hashtaggen i detta sammanhang bara betyder "unik identifierare."
Jag vill inte säga det i HTML-filen.
Jag, här borta, bara säga citat unquote "först."
>> Så låt mig ladda om.
Och nu ser jag, ah, OK.
Jag menar, det är inte så söt, men det är typ
av som förordet till en bok eller något liknande,
där det första stycket är större.
Skulle kunna vara ännu mer exakt med bara de första bokstäverna, men åtminstone
Jag har utövat mer kontroll.
Nu maybe-- kanske jag vill göra detta ibland av någon anledning,
och så jag inte vill att det ska gäller bara en HTML-tagg.
Snarare, låt oss säga-- låt oss också göra följande.
Class = "import".
Medan en ID används för att unikt identifiera en sak, en tagg,
i din webbsida, är en klass tänkt att vara användas på valfritt antal element eller taggar
på din hemsida.
Så det är återanvändbara.
Ett ID kan inte återanvändas.
En klass är återanvändbar.
>> Och vet du vad, oavsett filosofiska reasons--
Jag ville inte avsluta min thought-- Jag ska säga
att det första stycket och andra stycket är viktiga.
Så jag kommer att tillämpa den klass som kallas "Viktigt" att om jag sparar min fil
och ladda, har ingen funktionell effekt ännu.
Men jag har lagt några metadata till filen,
typ av något separat från kärnuppgifter i filen,
så att nu i min stilmall, om jag istället säga ".important" - ni vet,
något som är viktigt, jag är kommer att göra font-färg, red--
eller snarare inte font-färg, bara färg.
Det finns inkonsekvenser i CSS tyvärr.
Och ladda om.
Nu märker först två stycken är röda
men inte den tredje, eftersom jag bara tillämpas klassen "viktig"
till två av dessa saker först.
>> Så i ID, har du möjlighet att specificera mycket exakt.
Med klasser, har du återanvändbarhet.
Men i båda fallen märker sorts princip bra design
där jag räknade ut alla estetik till min styles.css fil.
Så det finns ingen messiness här.
Det finns ingen uppgift om rött eller fet vänd eller teckenstorlek i den här filen.
Snarare jag har semantiskt, ett meningsfullt sätt kännetecknas mina uppgifter som,
här är några viktiga data.
Här är några mer viktiga data.
Dessutom, här är "Första" av mina viktiga data.
Så HTML handlar om sort av märkning, bokstavligen, ord
och punkterna och konstruktioner i din sida med dessa små tips, om du
kommer, att du kan på något sätt utnyttja användning av
andra tekniker som CSS på detta sätt.
>> Så som svar på Victoria fråga, vi kan göra texten större på det sättet.
Det finns så många andra sätt, men typsnittet tag-- öppna fäste "font" -
är faktiskt flera år.
Och detta är problemet, Även med endast förlitar
på nätet resources-- de tenderar att vara föråldrad.
Och faktiskt, det är fasats, eftersom världen insåg,
vad betyder "font-size = 7" betyder?
Det gör det inte.
Och så i många år och detta day-- en av sido
noterar här är att det är faktiskt otroligt smärt fortfarande ibland
att utveckla platser för webb, eftersom Microsoft
och Google och Mozilla och andra håller ofta på hur
att tolka en specifikation som HTML.
>> Det finns en regelbok för HTML som i allmänhet säger vad varje tagg betyder.
Men ibland är det kvar till genomförandet gottfinnande,
Microsofts godtycke och Google.
Och så du kommer mycket ofta se på en webbplats något
ser annorlunda på en dator än det gör på en Mac,
och det är verkligen eftersom, Vid slutet av dagen,
de inte testa den väl på båda plattformarna.
Men det är också därför rimligt, smarta människor kommer att vara oense
och företag kommer att vara oense, och så en av de utmaningar som programmering
för webben eller design saker för webben
skriver din webbplats på ett sätt som fungerar på alla webbläsare.
Men även det är orimligt, eller hur?
Det finns så många versioner av så många webbläsare där ute som, vid någon tidpunkt,
du måste också göra en bedömning och du måste bestämma som företag,
särskilt för e-handel-stil platser där du är
försöker använda den senaste och bästa teknik för att ge en riktigt bra användar
erfarenhet.
Men några procent av användarna kanske fortfarande använder Internet Explorer 6 eller 7
eller 8, i synnerhet beroende på land som de kommer ifrån.
>> Och så mycket vanligt rådfrågas är något
som "statistik webbläsare."
Och om vi går att-- låt oss se Wikipedia och se hur up-to-date detta diagram är
om det finns en.
Så här kan du se där webbläsare faktiskt
är enligt december 2015 Enligt den amerikanska regeringen.
Chrome är på 42% av marknaden, följt av IE till stor del i företagens inställningar
eller PC inställningar, naturligtvis, följt av Firefox,
då Safari, då Opera inte göra kartan här av någon anledning,
och sedan andra.
Kanske det är under övriga.
Men mer problematisk än det är-- Låt oss se om Wikipedia har också
versioner av webbläsare version--
>> Låt oss gå till statistik webbläsare.
IE.
Även det är inte tillräckligt.
Webbläsare statistik.
Min version.
Det kommer inte att vara rätt.
Låt oss se versioner.
Webbläsare marknadsandel.
Låt oss se om detta kommer upp.
OK.
Nu blir lite mer användbar.
Så här märke till att vi har alla olika versioner av webbläsare.
Och herregud, om du look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Jag menar, webbläsare allt uppdateras, och ibland vissa av dessa förändringar
är betydande i termer av funktionalitet.
Och så vid någon tidpunkt, den produktchefer eller ingenjörer
måste göra en decision-- du vet vad, bara 1% av världens
fortfarande använder IE 7.
Åt helvete med dem.
Vi bara inte gå till stödja den webbläsaren.
Och vad betyder det inte att stödja?
Det kan innebära att knapparna inte fungerar på din hemsida,
eller det kan betyda att formatering är helt avstängd.
Eller du kanske måste göra samma dom samtal
i mobila dessa dagar, där vi är inte kommer att stödja IOS 5 längre.
Så att folk bara måste uppgradera.
Eller vi inte kommer att stödja Cupcake på Android OS för Android-enheter,
eftersom som world-- som den tech världen vill gå framåt,
det slags vill dra värld med den så att de inte
måste fortsätta att vara bakåtkompatibel så att de
kan erbjuda nya och bra funktioner.
Detta är verkligen en av orsakerna varför så många företag rullar ut
automatiska uppdateringar och slags tvinga de senaste versionerna av programvara på oss.
Och även företag som Apple kommer att sortera av
tvinga dig nästan eller tvinga dig när det gäller marknadskrafterna
att köpa en ny telefon, eftersom de bara kommer inte att uppdatera din gamla telefon längre.
Så du miste om senaste och bästa funktionerna,
eftersom det är kostsamt för dem som företaget att behålla äldre, utan tvekan
sämre versioner av programvara.
Men nettoeffekten är att vi lider också detta.
>> Så låt oss ta en titt på precis ett par av slut saker här.
Låt oss slå ut riktigt snabbt en del av dessa andra kulor, om nyfiken.
Så om du försökte, till exempel, positionen
texten på olika sidor av sida, kommer jag att göra ett snabbt sätt,
men det finns olika sätt att göra detta.
Låt mig gå vidare och eliminate-- förenkla denna på följande sätt.
Låt mig bara gå tillbaka till min enkla, enkla stycken.
Låt mig gå tillbaka till mitt styles.css.
Och jag ska bara använda simple-- som du kanske har sett på Google
eller hämta från earlier-- text-align höger.
Och uppdatera den här sidan.
Nu verkar allt att vara högerjusterad,
som du kan se på overhead här.
>> Vi kan göra det ser lite mer bokliknande, och vi kan säga "rättfärdiga"
och ladda om.
Nu är det trevligt och offentlig på båda sidor, som är ganska trevligt.
Ett annat mål som vi hade här var ändra färg på texten.
Så vi såg det med min röd text.
Och nu lägga till knappar för ett formulär.
Så varför inte vi försöker att göra just detta?
Men låt mig först gå till en webbplats som de flesta av oss använder varje day-- Google.
Och låt oss ta en titt på hur Google faktiskt fungerar.
Men jag ska göra det.
Låt mig göra det in-- Japp, Låt mig gå till Google först.
Jag kommer att behöva gå i Google Inställningar,
eftersom jag vill inaktivera något som kallas snabba resultat.
>> Så du kanske har märkt i Google dessa days-- låt mig gå tillbaka
och slå på.
Så om jag börja söka för "katter" som denna,
märka att inte bara Jag får automatiskt fylla upp
topp, helt plötsligt, själva sidan verkar förändras ganska snabbt också,
och det är Google med ett språk kallas JavaScript försöker vara till hjälp.
Men tyvärr, det slags av förstör vår diskussion
av vad som faktiskt händer under huven här.
Så jag bara typ av snabbt stänga omedelbara resultat.
Och jag kommer att klicka på Spara.
Och nu ska jag öppna att diagnostisk verktygsfält som jag
hålla öppningen under fliken Nätverk.
Så låt oss göra detta.
Låt mig-- whoops-- rulla ner det lite.
Och låt mig söka efter "katter."
>> Och nu notice-- faktiskt, Detta är ett bra tillfälle
att diskutera en stund.
Lägg märke till det ögonblick jag Motortyp- stoppa det.
Sluta.
OK.
Lägg märke till det ögonblick jag skriver brev C, titta ned på skärmen.
A- T- S. Vad botten den här skärmen, min fliken Nätverk
föreslår händer varje gång jag skriver ett brev?
Tyvärr är grodan mycket störande dag eller vitklöver
eller vad han är.
Vad som hände varje gång jag skrev?
Och låt mig rensa buffert och skriver det igen.
So-- hoppsan.
Varje gång jag skriver ett brev, C- A- T-- så en ny rad håller uppenbarligen förekommer.
Vad gör var och en av dessa rader representerar baserat på vad vi har sett och diskuterat
än så länge?
PUBLIK: En sökning?
DAVID J. MALAN: En sökning, eller mer allmänt, en HTTP-begäran
från min webbläsare till servern.
Tja, varför är min webbläsare att göra en HTTP begära varje gång jag skriver ett brev?
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Ja, det ger mig dessa auto-komplett resultat.
Liksom, där dessa sökresultat ifrån?
Tja, varje gång jag skriver en brev, Google skickar mer
och mer och mer av ordet jag skriver.
Varför?
Eftersom de vill ge mig en bättre och bättre, bättre förslag,
en lista med förslag, för det ordet Jag försöker faktiskt klar.
Så detta är att säga bokstavligen varje tecken du skriver i Google
sänds slutligen i bulk, men också ibland en
vid en tidpunkt för att genomföra dessa auto-komplett funktioner när
data är, naturligtvis, på webben.
>> Nu ska vi ta en titt på vad som faktiskt händer när jag klickar Google Search.
Och då kommer vi utnyttja detta själva.
Så om jag bläddra ner nu till mycket första begäran om att just hänt.
Lägg märke till följande.
Det sändes till en ganska lång URL-- https://www.google.com/search?
och sedan en massa saker.
Låt oss se detta faktiskt nu på fliken webbläsaren själv.
Låt oss bli av verktygsfältet här.
Här är sidan med sökresultat.
Och varsel här är webbadressen.
Nu kan du nog gissa vad som händer här delvis.
Så först av allt, en definition.
Detta är tydligen destinationen där formuläret skickas.
Så när jag skrev på Orden "katter" och tryck Enter,
tydligen Google skickade min textinmatning till den här webbadressen
att jag har markerat där snedstreck sökning.
Det visade sig, i en webbadress, något som händer efter ett frågetecken är,
som vi fortsätter att säga, en nyckel-värde-par som skrivs in i form eller på något sätt
sänds från den webbläsare till servern.
>> Så när du skriver ingång i ett formulär på webben
och det skickas som vi har diskuterat, via en get,
en av dessa virtuella kuvert, innehållet
av detta envelope-- ja, fortsätt få fyllda fysiskt
i kuvertet i klassen idag, men tekniskt
det är faktiskt sätta i webbadressen.
Så i själva verket, låt mig gå igenom detta.
Var ser du användarens input?
Var ser du något att jag själv skrivit upp här?
Ja, så "katter."
Höger?
Så låt mig destillera detta till något enklare.
Jag kommer att ta bort allt om denna URL som jag inte förstår,
och jag ska bara lämna det som this-- / söka? q = katter.
Vi får se var q kommer från ett ögonblick,
men det känns som ett minimum mängd information som jag har uppgetts.
Och nu ska jag slå Enter.
Och märker det fortfarande fungerar.
Vi får fortfarande tillbaka en massa katter.
Så Google är snyggare än detta i dessa dagar.
Det är 2016, inte 1999.
Så det finns andra saker som min webbläsare skickar till servern.
Men detta är minimalt allt som behövs.
>> Så vad händer?
Tja, låt mig först gå vidare och gå tillbaka till Cloud9 och låt mig gå vidare
och stänger mina flikar tidigare.
Och jag ska göra detta på min äger bara för ett ögonblick.
Jag kommer att gå vidare och skapa en ny fil.
Och jag kommer att spara det som google.html.
Och jag tänker mycket quickly-- Jag kommer att stjäla, faktiskt,
en del av denna text bara för att spara tid.
Jag kommer att klistra in den här här.
Jag tänker inte bry sig om någon stilisering denna gång.
Vi kommer att kalla detta "Min Google."
Och jag kommer att bli allt i kroppen.
Och jag kommer att göra följande.
Låt mig zooma in.
Form action-- och som jag nämnde i korthet earlier-- whoops-- som jag kortfattat
tidigare nämnts, verkan av en formulär kan du skicka data till.
Så google.com/search.
Och metoden jag vill använda kan vara en av två saker.
Det kan antingen vara "få", som vi håller diskutera, eller det kan vara "post."
För nu, de grundläggande Skillnaden är, om du använder "få"
all den information som användaren ger får skickas i webbadressen.
>> Det är bra för saker som sökning motorer och några andra program,
men under vilka omständigheter skulle du inte vill fylla i ett formulär
och har informationen hamnar i URL, som i webbläsarens adressfält?
Vilken typ av blanketter gör du--
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Ja, precis vad?
PUBLIK: Lösenord.
DAVID J. MALAN: Ja, så du loggar in på Facebook eller någon hemsida.
Det är användarens input från en form, en textruta,
men du förmodligen inte vill det dyka upp i webbläsarens URL.
Varför?
Jag menar, kanske det finns några säkerhetskonsekvenser på nätet,
men more-- vill, enklare, vad händer om din rumskamrat, betydande andra,
dina barn, ser din make genom webbläsarhistoriken?
Det är ditt lösenord rätt det i webbläsarens historik.
Det känns inte som god design.
Eller ännu mer tekniskt, antar att du försöker
att ladda upp en bild till Flickr eller Facebook eller wherever--
det vill säga användarinmatning, även om det är lite mer interesting-- hur
jag klämma en bild i adressfältet?
Du kan slags slags inte.
Du kan typ av.
Men egentligen, jag är hårt pressade att föreställa sig att göra det.
Så jag behöver en annan metod för ladda upp bilder till en webbplats,
och den andra metoden kallas "post."
Men nu ska vi prata om "Få", som är den enklare av de två.
Det sätter bara alla användarinmatning i webbadressen.
>> Så här är formen jag skapar.
Jag vill ha en ingång.
Och vet du vad?
Jag kommer att ta en gissning här.
Jag kommer att minnas min input "q" för "fråga."
Och jag tror att detta är en av de ursprungliga mönster, kanske, från 1999.
Och sedan den typ av denna ingång bara kommer att bli "text."
Och då jag kommer att ha en annan ingång som inte behöver ett namn, som vi snart
se, den typ som är "skicka".
Och detta kommer att ge mig en speciell knapp.
Och det är allt.
>> Så låt mig gå vidare och spara filen.
Jag kommer att gå tillbaka till min webbläsare och gå till google.html.
Stiga på.
Och det är ganska gles minst sagt.
Men låt mig gå vidare och sök efter "katter."
Och märker jag för närvarande Detta Cloud9 URL.
Men det ögonblick jag klickar på, där ni hoppas jag kommer att sluta?
>> PUBLIK: Google.
>> DAVID J. MALAN: Google.
Så låt oss klicka på Skicka.
Och faktiskt jag har åter implementerat Google.
Höger?
Det är enklare.
Det är lättare.
Jag menar, min kod är klart bättre än deras, från röran vi såg tidigare.
Och vet du vad?
Jag kommer att krydda upp detta lite.
Jag nämnde inte detta tidigare.
Det finns taggar som H1, för rubrik 1, den viktigaste rubriken i en sida.
"Min Google," Jag kallar detta.
Låt mig ladda om.
Det ser lite bättre redan.
Och, faktiskt, vet du vad?
Jag har already-- jag ljög.
Jag sa att jag inte kommer att styla detta, men jag ska styla detta som förut.
Och min kropp kommer att bli, låt oss säga, text-align center.
Det ser mer ut som Google redan.
>> Jag behöver en radbrytning, men, för att Skicka-knappen.
Och det visar sig, du kan använda stycken,
eller så kan mer bokstavligen bara säga, ge mig en radbrytning här-- br taggen.
Och om jag ladda om, nu går där.
Det är en lite ful, så jag skulle kunna göra flera radbrytningar,
men låt oss inte bli för girig här.
Så nu ska vi se om det fungerar för "hundar".
Det verkar fungera för "hundar", liksom.
Så vad är tvingande takeaway här?
En-- var inte ett stort steg till införa några fler taggar,
liknande form taggen i inmatnings taggen.
Men mer fundamentalt är, är alla vi gör
är att utnyttja vår förståelse HTTP och det faktum
som bildas i slutändan förändrar vad som finns i webbadressen i webbläsaren,
och så, därför kan vi tillhandahålla mekaniskt ingång till en server
genom att göra ett HTML-formulär och veta att servern förstår HTTP,
precis som vår kropp förstår, liksom, skaka min hand, samma protokoll,
och så får vi tillbaka svaret att vi i slutändan förväntar sig.
>> Så låt oss försöka göra en sista nu med mobil,
och jag ska make-- jag ska lägga denna kod till bilderna.
Så om du vill att mixtra, du kan säkert ta det därifrån.
Men jag kommer att gå vidare och göra en sak.
Jag kommer att gå vidare och öppna upp mitt index page--
min hej sida som tidigare, vilket har en hel del av denna faux-latinsk text,
eller menings latinska texten, och has-- det ser ut så här på denna teckenstorlek.
Men låt mig gå vidare och göra det.
Jag kommer att gå in i Cloud9.
Och du behöver inte göra det här steget.
Jag ska bara göra det själv.
Jag kommer att klicka på Dela.
Och detta är en funktion bara av Cloud9, varvid
Jag kan offentliggöra min omgivning.
>> Och bara för sakens skull demonstration, låt mig göra detta.
Jag kommer att göra min offentliga ansökan.
Lägg märke till det varna mig, är Jag säker på att jag vill göra detta,
eftersom detta kommer att göra alla i världen, oavsett om de är här nu
eller titta på video senare på Internet kan se vad jag ser.
Men det är OK.
Jag kommer att säga "Klar."
Och låt mig uppmuntra dig, om jag gjorde detta correctly-- låt mig testa det först.
Gå vidare, om du inte mind-- i en webbläsare på datorn,
gå till denna URL, och förhoppningsvis du ser min latinska texten.
Och för att vara tydlig, det är körs inte på min laptop.
Det är i molnet.
Det är på Cloud9, bokstavligen, men Jag har gjort min offentliga arbetsyta
så att vem som helst på internet kan komma åt mitt latinska hemsida.
>> Gå till samma webbadress på telefonen om du kunde.
Om det kommer att kosta dig, men du kan bara titta på en axel.
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Jag är ledsen?
PUBLIK: [OHÖRBART]
DAVID J. MALAN: Bara latinska ord.
Det är allt.
Men det är vad du bör se.
>> PUBLIK: Ja.
DAVID J. MALAN: Ja.
Ja.
OK.
Så kan jag hålla upp din telefonen för en liten stund?
Så förhoppningsvis om du öppnar det bör det ser nästan oläslig.
Det är still-- jag menar, det är oläslig på grund av det latinska.
Men det är också oläslig för vad andra skäl?
Liksom, vad misshagar dig om detta?
PUBLIK: Den är liten.
DAVID J. MALAN: Det är super, super liten.
Så hur kan vi åtgärda detta?
Det är super, super liten på Victoria telefon
och, om du har dragit den själv, antagligen
små på din telefon också, om du har tillgänglighetsinställningar aktiverade.
Vad är det?
Du kan bara klämma och zoom, vilket är genomförbart,
men då du bara se några ord åt gången.
Så vänta en minut.
Jag vet hur man löser detta.
Höger?
Jag kunde använda CSS, och jag skulle kunna ändra teckenstorlek 12 punkter till 24 punkter.
Men bieffekt av att naturligtvis kommer att vara nu,
på en stationär eller bärbar dator, nu texten är dubbelt så stor.
Och så skulle det slags vara trevligt att skilja mellan enheter,
och det visar sig att det är ett sätt att göra det.
Det finns flera olika sätt, i själva verket,
varigenom användning av CSS och snyggare funktioner att vi inte kommer att gå in i detalj,
Du kan i princip fråga webbläsaren och säga,
om skärmen är mindre än detta många pixlar använda teckenstorlek.
Om skärmen är större än detta många pixlar använda andra teckenstorlek.
>> Du kan bli ännu finare fortfarande.
Om du någonsin har besökt en webbsida som, på ett skrivbord,
har en stor meny kanske ut till sida, och sedan allt innehåll
är att den sida av det menu-- det är lite av en gemensam paradigm.
Menyn till vänster, innehåll på höger, eller vice versa.
Fungerar inte riktigt på mobilen när Skärmen är bara så här många pixlar bred.
Så allt vanligare på mobilen är, menyn kommer plötsligt får
kollapsade, och du måste klicka på en knapp för att se det,
eller webbplatsen kommer att sätta på menyn ovanför och sätta innehållet under den.
Och du kan genomföra dessa saker på flera olika sätt, också.
Du kan be dina programmerare, hej, lag, helst
du ser en HTTP-begäran från en Android enhet, en Microsoft-enhet, en Google
enhet, en Apple-enhet, använda teckenstorlek och använda denna meny layout,
annars använder denna standard större layout.
>> Nu, med hjälp av vad grundläggande teknik idag
kunde ingenjörerna använda att veta om det är
en iPhone, en Android-telefon, en bärbar dator, en stationär besöker företagets server?
Vari de får den informationen?
>> PUBLIK: Header?
>> DAVID J. MALAN: Ja, HTTP-huvudet.
Så varje HTTP-begäran som kommer från sina kunder till sina servrar
innefattar, inuti den virtuella kuvert, en massa
av HTTP-huvuden, är en av dessa webbläsaren och operativsystemet
även om du bryr dig att att detaljnivå.
Nu är det ett kryptiskt utseende sträng, men det finns programvara som bara
förenkla det, och du kan bara be i programmerings code-- PHP, Java, C ++,
whatever-- vad telefonen är this-- vilken enhet är denna användare använder?
Och då kan man säga, visa dem här version av webbplatsen om det är en telefon.
Visa dem den här versionen av webbplats om det är en bärbar eller stationär.
Men du behöver inte ens serversidan komplexitet.
Du kan göra även den enklaste saker.
>> Jag kommer att göra detta.
Jag kommer att gå vidare till min Cloud9 miljö,
och jag kommer att lägga till en tagg som du såg i Google innan.
Det heter metatagg.
Och jag minns aldrig här, så Jag kommer att skriva om den här.
Meta name = "View" och sedan content = "width = enhet bredd, intital
skala = 1 "och det är det.
>> Så det kan lika gärna vara som en magisk besvärjelse.
Det är inte så tydlig, men det har något att göra med visnings,
och visningsområdet är bara kroppen av en webbsida, det rektangulära området som
definierar de flesta av sidan.
Och detta är bara berätta webbläsaren, vet du vad?
Gör bredden på denna sida effektivt är lika med bredden av enheten.
Med andra ord, inte anta att du har typ av obegränsat utrymme.
Tänk dig att du bara har så mycket utrymme som själva enheten är stor.
Och så nu, om jag ladda om i min webbläsare, jag ser ingen förändring.
Men om jag gjorde detta correctly-- och Låt mig passera min fingers-- om ni alla
ladda dina telefoner, gör du se en övertygande förändring?
Ja, det är that--
>> PUBLIK: [OHÖRBART]
DAVID J. MALAN: Ja.
OK.
Så utan tvekan mer lättläst nu?
Fortfarande liten, för att vara rättvis, men inte så liten att vara ohanterlig.
Och jag kan säkert åsidosätta detta vidare med CSS eller på serversidan,
men allt vad du är ser är fler och fler funktioner
läggs i klientsidan environments--
JavaScript, som vi kommer att diskutera i morgon, CSS och HTML-- så
att alla dessa frågor kan göras på klienten
så bry server en mycket mindre och inte
att behöva hänga med, för Exempelvis den konstanta angrepp
nya operativsystemet versioner, nya webbläsarversioner.
Du kan bara låta webbläsaren frågar enheten, hur stor är du,
och sedan göra något logiskt beslut baserat på det.
Men vi får se fler möjligheter för logiska beslut
i morgon i samband av ett programmeringsspråk.
>> Så, några frågor, då, på webbutveckling?
Idag är inte webbprogrammering, per se, eftersom det mesta vi gjorde
var mycket estetiskt, om man så vill.
Det finns ingen beslutsfattandet i den kod som vi har skrivit,
och så det är därför HTML är ett märk språket, inte ett programmeringsspråk.
Men i morgon vi tar en snabb titt i slutändan,
vid JavaScript, vilket är en verklig programmering
språk som låter oss göra lite mer.
>> Några frågor?
Nåväl, låt mig föreslå två möjligheter tillval för läxor.
Man är-- dessa Cloud9 konton kommer inte ut.
Du är välkommen att använda dem att mixtra med.
Det är den fria servicenivån.
Inse att om när du skapar din arbetsyta, gjorde du det offentligt,
det betyder att vem som helst på Internet kan se vad du skriver.
Så kanske bara överväga inte pinsamt själv
om du lägger din första banan sida ute offentligt misstag,
men ingen kommer att vet att se det ändå.
>> Och two-- låt mig kasta upp denna URL samt,
särskilt om du kom i dag ett lite mindre bekväm än andra,
osäker på vad allt det här innebär.
Inser att mycket mer av denna video, som är både ett bra sätt att somna
och även att skratta medan att göra så, har också
en massa samhälls intressant och säkerhetsrelevanta diskussioner
däri från John Oliver, än en komiker.
>> Men om det inte finns några ytterligare frågor, som leder oss till receptionen.
Så varför jag inte sätta på musiken.
Det bör finnas drycker och snacks utanför.
Jag är glad att mingla så länge folk vill,
svara på frågor mer en-mot-en.
Men annars är du välkommen att ta bort när som helst,
och vi kommer att se dig igen i morgon för lite mer.
Okej, tack.