DAVID J. MALAN: Okay.
Vi er tilbage.
Så målet med denne afsluttende session er at indføre nogle flere begreber
men også give alle en chance at slags strække fingrene
og rent faktisk gør noget lidt hands-on.
Målet er ikke at slå os alle i web-udviklere
af ethvert middel, men virkelig kun at give dig en smagsprøve på nogle
af de grundlæggende konstruktioner af hvad går i webprogrammering og i dag web
udvikling, så statisk side af things--
ingen logik, ingen programmering sprog, bare statisk indhold.
Og det vil give os en mulighed til rent faktisk at se, hvad en web-server er,
Se, hvad en HTML-fil er, se, hvad det er HTTP faktisk tjener op.
Men før vi dykke i, enhver retrospektiv spørgsmål om cloud computing
eller sikkerhed eller noget midt imellem?
>> Ingen?
Okay, godt, lad os gøre dette, bare i tilfælde
processen med at tilmelde dig noget tager nogle få minutter.
Vi lader det gøre det i baggrunden.
Gå fremad, hvis du kunne, til denne webadresse her-- c9.io.
Dette er en tredjepart service-- platform som en tjeneste, hvis du will--
der kommer til at invitere dig at tilmelde dig en konto,
og det kommer til at give hver af jer en konto i den såkaldte sky
på en andens infrastruktur, et firma kaldet Cloud9.
Men hvad er rart om dette er, at de giver dig
en tilnærmelse af en faktiske udvikling virkelige verden
miljø, omend i sky og i en webbrowser,
og vi vil bruge dette til rent faktisk eksperimentere lidt i dag.
Og derefter gå videre og bare navigere din vej til tilmeldingen
hvis du kunne.
Så vi tilfældigvis bruge dette i klassen Jeg underviser for alle vores elever,
både på campus og off nu, og det er erstattet hvad historisk
var software ellers kan downloades.
Så hvad du få adgang til er et af disse virtuelle maskiner,
væsentlige, at jeg beskrev tidligere.
Så dette selskab Cloud9 sandsynligvis lejer fra en tredje Party-- faktisk
i dette tilfælde Google-- helhed bundt af virtuelle maskiner
at de på en måde hugge op i illusionen af ​​individuelle servere
at hver af os har fuld kontrol over.
Det er ikke helt korrekt at sige at de er virtuelle maskiner,
selv om, fordi det, Cloud9 rent faktisk bruger
er en noget nyere teknologi kaldet containere.
Og lad mig få fat i denne billede her at male dette billede.
>> En container er, hvis du husker billedet
fra tidligere, lidt lysere vægt end en virtuel maskine.
I virkeligheden, mens sidste gang vi talte om der
være et operativsystem system og en hypervisor
og derefter gæst operativsystem, gæst operativsystem, gæsteoperativsystem
systemet, på toppen af ​​din fysisk hardware,
forskellen med denne nyere teknologi, containere,
er, at de alle en eller anden måde deler det samme operativsystem.
Men de stadig skabe illusionen af ​​alle
har hans eller hendes egen eksklusive administrative rettigheder og filer
på serveren.
Men der er mindre software i mellem dig og hardware.
Resultatet heraf er, i teori, en højere ydelse,
fordi du bruger eller spilder færre ressourcer
på, at den såkaldte virtualisering lag.
Så dette kaldes containeriseringen af ​​natur
ved hjælp af en teknologi kaldet Docker, som i høj grad kommer til sin ret.
Og det er noget, ingeniører på din virksomhed
måske slags slags begynde at tale om snart, hvis de ikke allerede har,
selvom der er bestemt ingen grund til at hoppe på eventuelle bandwagons.
>> Så med det sagt, hvad du sandsynligvis se nu
er en skærm, der ligner lidt dette.
OKAY.
Og bare ringe til mig over, hvis ikke.
Og hvis so-- jeg kommer over, hvis ikke.
Gå videre og klik det store plus at skabe en arbejdsplads,
og du vil se en skærm som denne.
Du kan ringe arbejdsområdet navngive noget, du ønsker for nu.
Og bare faktisk for enkelhed, gå og-- godt, nogle af jer
allerede har arbejdsområder.
Kald det hvad du want-- virksomhed, Harvard, torsdag, uanset hvad du gerne vil.
Du behøver ikke en beskrivelse.
Du kan lade det private, medmindre du har allerede en masse arbejdspladser.
Hvis du er tvunget til at gøre det offentligt, det er fint for nutidens formål.
Også her er en af ​​de eftersalg.
Du får en privat arbejdsplads ved misligholdelse. Men hvis du vil have mere,
du skal betale for mere.
Ellers er de tvinge dig at gøre dit arbejde offentligt.
Men det er fint, fordi de også målrette dette på open source fællesskaber
at tilskynde folk til faktisk samarbejder.
>> Og den sidste ting, der er vigtigt, er dog, når du har valgt et navn
og efter du vælger privat eller offentlig, klik HTML5, den store orange ikon
sekunder fra venstre, og klik derefter på Opret arbejdsområde.
Og det vil formentlig tage et minut eller deromkring,
men du vil så have en miljø, når du
gøre det, der ser minder om hvad jeg har på skærmen her nu.
Men igen, kan det tage et minut eller mere for at komme til denne skærm
når du har klikket på Opret Workspace.
Men bare markere mig over hvis du gerne vil mig at tage et kig på noget eller rådgive.
Okay.
Så jeg har tænkt mig at baggrunden dette for nu.
Ring til mig over, hvis du synes at har tekniske vanskeligheder.
Men igen, kan det tage et lille smule for at åbne.
Og lad os gå videre og snakke om, hvad det egentlig betyder at lave en webside,
hvad HTML er, og hvordan alt dette nu forbinder som vi er begyndt
faktisk bruge nogle af teknologien.
Så det viser sig, at jeg kan gå på min lille Mac her,
åbne et simpelt program kaldet TextEdit, eller på Windows jeg kunne
åben noget, der hedder Notepad.exe.
Og jeg kunne simpelthen gøre noget ligesom denne-- "hello, world."
Og så kunne jeg gemme denne som hej.txt Så ingen magisk der.
Dette har intet at gøre med web programmering, intet at gøre med HTML.
Bare skabe en simpel tekstfil.
Men det viser sig, at en web side er bogstavelig talt lige det.
Det er en simpel tekstfil, der indeholder tekst at du kan skrive på dit tastatur,
men det typisk, men ikke altid ender i ikke .txt men .html eller .htm.
Og du ikke bare skrive ord i filen.
Du faktisk nødt til at bruge ting kaldet tags eller mere generelt, noget
kaldet markup sprog.
>> Så jeg har tænkt mig at meget hurtigt skrive og derefter forklare følgende.
Jeg har tænkt mig at først skriver dette, som siger,
hey, browser, her kommer en webside skrevet i HTML.
Og disse to ting sammen sige, hey, browser, følgende er faktisk HTML.
Hey, browser, her kommer hoved eller øverst på min side.
Hey, browser, indersiden af ​​toppen af min side, sætte en titel, der er, "Hej,
verden."
Hey, browser, efter at lederen af ​​min side, her kommer kroppen af ​​min side.
Og hey, browser, kroppen af ​​min side bør også sige, "Hej verden".
Så hvad er de vigtigste detaljer her?
Dette er, hvad der er generelt kaldes en doc-typen erklæring,
og helt ærligt, det er lidt svært at huske dette i første omgang.
Du skal bare slags copy-paste det.
Dette er den formelle måde at sige, hey, browser,
Jeg bruger HTML-version 5, der kom ud noget for nylig.
Det er en magisk besværgelse, at nogle mennesker med en dårlig følelse af design
besluttede at sætte på meget toppen af ​​filen.
Selvom det er en lidt mystiske, det er alt
det means-- hey, browser, her kommer med version 5 i HTML.
>> Resten af ​​dette har været med os i nogen tid nu, historisk,
men det har været udvikling, og det er sandsynligvis været at få lidt enklere.
Læg mærke et par karakteristika af hvad jeg har fremhævet.
Der er disse ting med vinklet brackets-- venstre beslag
og højreparentesen.
Og mærke til symmetri her.
Og ved symmetri, mener jeg, ligesom jeg har denne start tag her, eller et åbent tag
hvis du vil, hernede har jeg en tæt tag eller en ende tag, der er
anderledes kun, hvis det har denne skråstreg ved begyndelsen af ​​ordet
HTML.
Og du kan tænke på dette som jeg var henkastet
foreslår før, hey, browser, her kommer nogle HTML.
Og omvendt, hey, browser, det er det for HTML-- starten og slutningen.
>> Imens hey, browser, her kommer lederen af ​​min side.
Hey, browser, det er det for hovedet.
Hey, browser, her er kroppen af ​​min side.
Hey, browser, det er det for kroppen.
Og inde i det er nogle vilkårlig tekst for nu.
Og inde i hovedet, i mellemtiden, er en vilkårlig, men mærkede,
så at sige, tekst, der siger, at titlen på min side skal være "Hej, verden."
Nu, for nu kan du antage, at browsere
har only-- eller rettere websider har kun to parts-- hovedet og kroppen.
Og hovedet er generelt bare ligesom menulinjen, stuff
virkelig bare helt i top.
Og kroppen er tarme af siden, alt i den store rektangel
der fylder skærmen.
Så jeg har tænkt mig at gå videre og gøre dette.
Jeg kommer til at gå videre og klik på Gem, Fil Gem.
Og jeg har tænkt mig at spare dette som hello.html,
og jeg bare til sætte det på mit skrivebord.
Og jeg har tænkt mig at gå videre og klik på Gem.
Og notice-- min Mac på mindst er råben på mig.
Er du sikker på du vil gøre dette?
Og jeg har tænkt mig at sige, ja, bruge HTML.
Jeg ved bedre i dette tilfælde.
Og nu vil jeg gå til mit skrivebord hvor jeg har denne fil pludseligt.
Og jeg har tænkt mig at dobbeltklikke på den.
Og du vil opdage, at ved standard Chrome åbnet.
Det er fordi det er min standardbrowser.
Og det bare siger, "Hej, verden."
Men det siger "Hej, verden "to steder.
Bemærk øverst til venstre.
Temmelig svært at brænde den.
Det er stort og fed.
Og hvor ellers virker det at sige, "hej, verden"?
>> PUBLIKUM: Fanen.
>> DAVID J. MALAN: Ja, selve fanen.
Så når jeg sagde lederen af ​​den side er alt op top--
og faktisk er dette den titel.
Det er bare i fanen her.
Og jeg kan trække denne fane ud for ikke at forvirre.
Dette er blot en enkelt fane nu, og faktisk vi se "goddag, verden"
heroppe og "hej, verden" hernede.
Så temmelig ligetil.
Men det er også forholdsvis enkel.
Og, faktisk, jeg zoomet ind.
Jeg kan ændre skriftstørrelsen bare at forstørre for tilgængelighed.
Men lad os nu gøre noget lidt mere interessant.
>> Jeg har tænkt mig at go-- hovsa, så lad mig komme tilbage til min tekstfil.
Jeg vil tilbage til min tekstfil, og jeg har tænkt mig
at ændre dette og sige "Hej, Disney World."
Spare.
Og gå tilbage til min browser og klik Genindlæs.
Og nu, selvfølgelig, det siger "Disney World."
Og jeg har tænkt mig at kunstigt zoome i lige så det er nemmere at se.
Så nu, desværre, jeg slags ønsker at-- faktisk, det er en Mac-funktion.
Jeg ønsker at klikke på Disney World og gå et sted som disney.com,
men det virker ikke.
Så en grundlæggende princip i internettet er hyperlinks, links, gå andre steder.
Så hvordan gør jeg det?
Tja, jeg kunne bare sige, "Hej, http://www.disney.com."
Gem dette.
Opdater.
Men også dette, ikke klikbare.
Og hvad er rart her, selvom dette er ikke funktionel endnu,
er, at det lader til, at browser bogstaveligt kun gør
hvad jeg fortæller det til at gøre.
Så hvis jeg bare skrive en URL som denne, det bare at gå at vise mig URL'en.
Jeg har brug for at bruge tags eller markup sprog til rent faktisk at fortælle
browseren til at gøre endnu mere.
Så jeg har tænkt mig at gå videre og slette denne for et øjeblik.
Og jeg har tænkt mig at sige, hey, browser, starte et anker her,
et link så at sige.
Og hyper-reference, destinationen af denne anker, bør være denne webadresse.
Og mærke mine citater.
Jeg kunne bruge enkelte anførselstegn, også, men du er nødt til at være konsekvent,
og jeg vil generelt bare bruge dobbelte anførselstegn til at holde det simpelt.
Bemærk, at jeg har tænkt mig at lukke tag.
Og så her vil jeg at sige, "Disney World."
Og nu har jeg brug for nogle symmetry-- åben konsol, / a, lukket beslag.
>> Så hvad har jeg indført?
Vi har haft et par tags allerede.
HTML, Head, titel, Krop, er alle tags, så at sige,
med åbne og lukkede modstykker.
Men varsel, dette er slags af fundamentalt forskellige.
Dette er, hvad vi vil kalde i HTML en attribut.
Og en attribut er bare en nøgle-værdi par.
Dette er en fælles ting i computer science-- nøgleværdiparret.
Det er sortering af værktøjet af handelen.
En nøgle og en værdi.
Et ord og derefter nogle andre ord eller ord.
Og i dette tilfælde, er nøglen href, og værdien er, at fuld webadresse.
Og hvad en attribut gør, er det påvirker adfærden hos et tag.
Og i dette tilfælde, er vi nødt til at påvirke adfærd ankerkode,
fordi vi har brug for at forankre dette link til et sted.
Og hvordan du gør det er ved hjælp af attributten.
>> Så jeg har tænkt mig at gå videre og gem filen nu.
Gå tilbage til min browser og reload.
Og voila, vi nu har begyndelsen til en legitim webside.
Super-enkel, men hvis jeg svæver over her-- meddelelse i nederste venstre hjørne,
det er super-small.
Men du kan se www.disney.com.
Og hvis jeg klikker på det, ja dette piskeris mig væk til disney.com.
Nu, den nysgerrige ting her er, at det ikke er
den best-- den mest salgbare webadresse, men det er fint, fordi denne fil ikke
findes på World Wide Web.
Den eksisterer som en lokal fil i tilsyneladende mine Brugere directory-- / jharvard--
for John Harvard-- / desktop.
Men det har en URL.
Det sker bare at være lokale.
Desværre kan ingen af ​​jer besøger dette, fordi hvis du skriver denne webadresse,
du ville være at fortælle din browser, kigge efter en fil kaldet hello.html
på din harddisk.
Og, selvfølgelig, medmindre du har fulgt sammen manuelt,
er det ikke kommer til at eksistere der.
>> Så det er fint.
Vi har stadig brug for en måde, i sidste ende, at få denne fil ind i nettet,
men lad os drille hinanden et par sikkerhedsmæssige konsekvenser af hvad vi lige
så og binde det tilbage til den tidligere diskussion fra i morges.
Det viser sig, at hvis en browser bogstaveligt talt bare gør
hvad jeg fortæller det til at gøre, og det synes at være tilfældet, at et anker tag er
påvirket af værdien af denne attribut kaldet href
men den viser denne tekst, ville dette virke
at antyde, at jeg kunne sætte URL'en begge steder og derefter genindlæse
og nu se webadressen og gå til URL'en.
Bemærk, hvis jeg svæver over nederste venstre, Jeg faktisk går stadig til disney.com.
>> Så hvis du nogensinde har været phished-- P-H-I-S-H-E-D--
med en af ​​disse falske e-mails fra som PayPal din bank,
du har sikkert fået links inde af e-mailen, som du læser, at
fortæller dig at klikke her for at gå bekræfte din adgangskode eller bekræfte din fødselsdato
eller social eller noget socialt engineering dig at afsløre
information.
Tja, jeg kunne slags tage fordel af dette, kunne jeg ikke?
Jeg kunne sige noget lignende, www.paypal.com.
Og i stedet for disney.com, jeg kunne gå til, ligesom, badguy.com.
Opdater.
Og hvor let er det at narre, især en ikke-teknisk læser
eller et flygtigt læser læseren end at klikke på
et link som dette, som, hvis jeg klikker it-- Jeg faktisk ikke ønsker at gå badguy.com.
Jeg ved ikke, hvad er faktisk der.
Så paypal.com, varsel, er hvad det siger, det kommer til at,
men selvfølgelig, hvis jeg ser ned super-lav, det er lidt sløret,
men det siger badguy.com.
Det er den eneste fortælle lige nu at jeg har tænkt mig at det forkerte sted.
Og da jeg sagde tidligere, at bankerne virkelig bør ikke fremme eller tog
brugere til at klikke links, dette er blot en manifestation af den.
Og det er så simpelt.
Du er nu en modstander, hvis du gør noget som dette
og forsøge at narre en bruger til at besøge din hjemmeside.
Men for nu, vil vi holde ting pæn og ren.
Vi kommer til at gå videre og spole disse ændringer.
Genindlæs siden.
Og jeg går tilbage til disney.com.
>> Lad os se, om vi ikke kan drille dette fra hinanden lidt mere.
Så "hello, Disney World."
Jeg har tænkt mig at sige hernede.
Måske vil jeg gøre nogle rum.
"Vi håber du nyder dit ophold!"
Spare.
Opdater.
Det er ikke rea-- det er ikke hvad jeg hensigten, ikke?
Jeg mener, hvis jeg behandler min tekst fil som et tekstbehandlingsprogram,
hvad gjorde du håber vil ske her?
Ja, jeg har lyst til der bør være et linjeskift her,
så det føles buggy på en eller anden måde.
Men det er faktisk bevidst, fordi lige som før,
browseren er kun vil Gør hvad du fortæller det til at gøre.
Jeg har ikke fortalt det til at bryde linjer.
Jeg har ikke fortalt det til at bevæge sig ned, selv dog, intuitivt, jeg føler, at jeg gjorde.
Så det viser sig, vi har brug for lidt mere markup,
og jeg har tænkt mig at løse dette på følgende måde.
Jeg har tænkt mig at forord dette første goddag med, hvad der kaldes et afsnit tag.
Og så jeg har tænkt mig at gå videre og wrap denne anden sætning
i en anden punkt-tag, selv om de er super-korte afsnit.
Nu vil jeg til at redde.
Opdater.
Og nu har vi at plads, og vi slags
har semantik af to separate stykker.
>> Det er alt fint og godt, men det ville være rart at tilføje et billede til denne side,
så jeg har tænkt mig at gå se efter Mickey Mouse på Google Billeder.
Og bare for sjov, jeg er kommer til at få fat i dette billede.
Jeg har tænkt mig at gå videre nu, og grab webadressen på billedet,
selvom der er anderledes måder at gøre dette.
For nu er jeg bare at kopiere URL'en.
Jeg har tænkt mig at gå tilbage til min tekst fil, og jeg har tænkt mig at sige her,
img src = quote citat slut denne webadresse, super-lange.
Og så begrebet en Billedet er lidt anderledes.
Der er virkelig ingen begrebet start et billede og slutter et billede,
som en begyndelse tag en ende tag.
Så det føles lidt underligt at mig semantisk at gøre dette,
at have et tæt-image tag.
Det er ikke forkert.
Det er helt korrekt, og det er opmuntret,
men der er stenografi notation.
Jeg kan slags samtidigt åbne og lukke samme tag,
og som vil gøre browseren glad.
Så det er bare en lille smule mere kortfattet for ting
at begrebsmæssigt virkelig ikke mening at starte og slutte.
De bare er der, eller de er ikke.
>> Så jeg har tænkt mig at gemme denne og gå tilbage til min "hej, verden" side og reload.
Og det er lidt ude af kontrol, fordi billedet er faktisk
lidt stor, men det er OK.
Jeg kunne ændre størrelsen på et program.
Eller ved du hvad.
Blot for at vise, jeg er vil faktisk sige,
at bredden af ​​denne ting bør kun være 200 pixels, 200 dots.
Lad mig gå videre og spare og genindlæse, og nu siden
ser lidt mere rimelig.
Men bemærk mønsteret.
Tja, jeg har sådan lært dig alt af HTML i en vis forstand, i det mindste
konceptuelt, fordi alle HTML er, er disse tags-- åbne tags, lukkede tags,
og attributter, ændre deres adfærd.
Og tilsyneladende hver tag kan have nul eller en
eller to eller flere attributter, der hver som gør noget lidt anderledes.
Nu, hvordan kan du vide, hvad der findes?
Du skal bare lytte til nogen som mig fortælle dig, hvad der eksisterer,
eller du bare Google rundt efter en tutorial på HTML, og det er virkelig det simpelt.
>> Sandelig, da jeg var en bachelorstuderendes år siden og lærte HTML,
en af ​​mine matematik undervisning assistenter lige brugt
en lille smule tid tutoring mig for ligesom en halv time, en time,
og så var jeg på min vej.
Jeg var på min vej mod at gøre de mest hæslige hjemmesider nogensinde,
som tilsyneladende har jeg ikke virkelig skred ud.
Men pointen er, at når du forstå disse enkle ideas--
hvis mystiske text-- men disse enkle ideer om at starte en tanke
og lukke en tanke, at holde alt pænt afbalanceret,
leder noget op, modificere adfærd af denne tag, det er virkelig alt
der er til det.
Og i virkeligheden, hvis vi nu gå til noget som google.com-- faktisk,
lad os gå et sted lidt mere reasonable-- stanford.edu.
Og jeg har tænkt mig at gå til Vis, Udvikler, Vis kilde.
Det er grimt, men notice-- og jeg vil zoome ind varsel
nogle ting, der er bekendt allerede.
Der er denne her, som er en browser.
Her kommer HTML5.
Der er HTML.
Tilsyneladende er der en tilskriver, at jeg ikke
bruge, der angiver den sprog på siden,
og dette kan hjælpe med automatisk oversættelse og den slags.
Her er lederen af ​​siden.
Her er titlen på Stanford side.
Der er et tag jeg ikke taler om yet-- Meta tag.
Det er bare slags baggrundsinformation.
Det hjælper med SEO, eller Søgemaskine optimering,
eller Google-søgning resultater eller lignende.
Men hvis vi holde leder, holde ser, her er Body tag.
Og der er klaser af andre tags vi har ikke talt om endnu.
Men Div er en for en opdeling af siden.
Det er ligesom en usynlig rektangel hvis du slags ønsker at mentalt
opdele din side i forskellige enheder online.
Og så masser af divs I se, noget, der hedder klasse,
men vi vil vende tilbage til.
>> Dette er interesting-- Forms.
Formularer er over hele internettet.
Enhver søgefeltet du er nogensinde brugt er en form.
Og, ja, lad os faktisk se.
Form.
Handling.
Virkningen af ​​denne formular, uanset historiske grunde er, at URL.
Metode er "post".
Viser sig, at HTTP-anmodninger kan bruge verbet "få", ligesom vi så før,
eller "post".
Og vil se en forskel af dette i et øjeblik.
Lad os faktisk se, hvad det er.
Lad mig gå tilbage til Stanford side.
Hvilken form taler de om, tror du?
Hvad springer ud på dig?
>> PUBLIKUM: søgefeltet.
>> DAVID J. MALAN: Ja.
Så op øverst til højre her er denne søgefeltet.
Og det er, hvordan de implementeret det-- en tag, der er bogstaveligt talt åbent-beslag formular.
Og så lad os søge efter noget.
Lad os søge efter en kammerat af mine-- "Nick Parlante."
Enter.
Og selvfølgelig gik det til en lidt anden URL.
Lad mig gå tilbage her.
Lad os søge efter "kurser."
For pokker.
Gik til en anden URL.
Så Stanfords tilføje nogle magi at de ikke tager mig til webadressen
at vi så i handling attribut der.
Men denne formular her gennemføres rent ved hjælp af denne markup her, disse tags.
Faktisk, her er input for den type søgning, som du ønsker.
Her er input til en anden type søgning.
Her er indgangen til selve strengen.
Og så er målet ikke at vikle vores sind omkring alle disse tags
men bare for at se.
Det er bare at åbne og lukke tags og søger ting op.
Ja?
Victoria?
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Det er et godt spørgsmål.
Det er lidt tricky at se.
Lad mig vende tilbage til det spørgsmål i blot et par minutter
når vi ser på noget, der hedder CSS, eller cascading style sheets,
og vi kan forsøge at udlede så meget fra siden.
Så hvis vi nu tage et kig på google.com, lad os se hvad deres side ser ud.
Du ville they're-- der er sød i dag.
OKAY.
Helt færdig.
Okay, så Vis kilde.
Man skulle tro Google har virkelig rart kildekode.
Så tilsyneladende, hvad der foregår her?
Og faktisk er det ikke engang HTML.
Dette er noget, der hedder JavaScript.
Og lad os bare ved og ved.
Jeg ved ikke engang, hvor siden starter.
Jeg har tænkt mig at bruge Kommando F, åben bøjle HTML.
Okay, der er det.
Jeg fandt starten af ​​siden, og der er så mange ting i her.
>> Hvad der rent faktisk sker?
Tja, ved du hvad, Vi kan rense det op.
Hvis jeg i stedet gå til denne Undersøg værktøjslinje, denne særlige diagnostisk værktøj,
og gå ikke til Netværk, hvor vi holde gå i dag,
men hvis jeg går til Elements, hvad er virkelig rart
er, at en browser har en masse meget bedre øjne end jeg.
Og browseren kan læse at rod af en webside,
at HTML mail vi bare kigget på, og det kan
parse det eller læse og analysere det og omformatere det
i et dejligt menneske-venlig måde.
Så hvad jeg ser nu i denne skærm her
under Elements, nøjagtig samme indhold, men de har indrykket alt,
de har farvelagt det, men det er nøjagtigt den samme tekst
at jeg downloades fra serveren.
>> Og hvad er rart nu kan jeg se i kroppen, for instance-- meddelelse,
siden er stadig sammensat af blot et hoved og en krop,
og jeg kan hierarkisk dykke ind her.
Bemærk, at Google synes at have at divs-- denne ene og dette ene.
Jeg kan udvide det.
Der er en hel masse andre divs.
Så det er en lidt kompliceret.
Men vent.
Dette synes så meget mere læsbar, relativt, end dette.
Hvorfor er Google pinligt selv ved blot at sende
denne enorme rod af kode nogle sortere blot at gennemføre noget
der ser så enkelt ved første øjekast?
Ligesom, hvorfor de ikke tilføje flere rum?
Hvorfor de ikke ramt Enter ligesom jeg gjorde?
Se hvor god jeg var ved at skrive en webside.
Jeg ramte Indtast så flittigt.
Jeg indrykket så alt er så smuk og læsbar.
Hvorfor Google ikke praktiserer det samme?
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Godt.
Meget retfærdigt.
De har ikke nogen person på Google manuelt
opdatere hjemmesiden længere.
Det er ikke 1999 længere.
Så de har software.
De har andre værktøjer, som generere dynamisk de er HTML.
Selvfølgelig, det selve koden blev skrevet af mennesker,
men virkeligheden er, det er ganske rimeligt at sige,
browseren bestemt ikke pleje, hvor rodet koden er.
Men der er en endnu mere tvingende teknisk årsag
at Google distribuerer deres HTML kode i sådan en sjusket, tilsyneladende
overvældende måde hele pakket sammen med meget lidt way-- meget lidt
i vejen for formatering som jeg gjorde.
>> PUBLIKUM: [uhørligt]
>> DAVID J. MALAN: Hurtigere?
Hvorfor?
Og hvad sagde du, Lydia?
Hurtigere?
Hvorfor hurtigere?
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Der er ingen plads til at læse.
Ja.
Så tænk over, hvad et rum er.
Så hvert tegn på tastaturet tager en vis mængde af plads til at repræsentere,
enten fysisk, ligesom det fylder så meget plads,
eller anden måde under hætte, der kræver hukommelse.
Og som en aside-- og vi vil tale mere om denne tomorrow--
hvert tegn på tastaturet kræver typisk 8 bit eller en byte.
Så et mønster af 8 nuller eller dem, eller kun 1 byte, som vi
mennesker vil typisk sige.
Så det er små, men det er stadig ikke-nul.
Det er stadig en vis mængde af plads.
Så hvis en ingeniør eller Google hits mellemrumstasten bare én gang, og formoder
Google-- det er super-popular-- antage, at en milliard mennesker
besøge deres hjemmeside en dag, eller nogle antal mennesker
besøge hjemmesiden en milliarder gange om dagen,
hvor mange ekstra bytes har at software ingeniør bare koste Google
ved at ramme hans eller hendes mellemrumstasten én gang?
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Ikke helt så slemt.
Blot én byte gange milliard.
Så en--
PUBLIKUM: 8 milliarder gigabytes.
DAVID J. MALAN: Ikke 8 mia.
8 milliarder bytes.
Men en gigabyte.
1 gigabyte ville være måleenheden.
Hvis han eller hun gør to rum, 2 gigabytes.
Tre gigabyte.
Højre?
Det skalaer dyrt.
Og så i tilfælde som Google, der, indrømmet, er ekstreme tilfælde,
der er andre problemer, der opstår bare ved at gøre meget rimelige beslutninger
eller tage meget enkle menneskelige handlinger, fordi det har denne forstørret virkning.
Så en af ​​grundene dette ser så komprimeret
er præcis som Victoria said-- det var blot genereret af computere alligevel.
Så nogen big deal.
Lad browseren regne det ud.
Men det er også bevidst har ikke meget plads,
fordi rummet ikke er nødvendig.
Og pladsen faktisk koster penge.
>> Det enten koster tid, fordi bare at skubbe
at langt flere data ud af google.com hovedkvarter bare
har fået til at tage en vis mængde af tid, selvom det er millisekunder
eller mikrosekunder, men der tilføjer op i så mange brugere, eller mere sandsynligt,
det sandsynligvis koster penge.
Google sandsynligvis forbindelse til en anden i verden, en
af dem peering point, og hvis de har
anden form for økonomisk forhold hvorved deres data koster penge,
de kan lige så godt minimere hvor meget data
de er spytte ud på deres internetforbindelse.
>> Så det sjove, men i sidste ende, eller måske den beroligende ting,
er, at selvom det ser forfærdeligt overvældende, ved slutningen af ​​dagen,
det er stadig præcis de samme principper som denne meget enkle side her af en HTML
side.
Så bare for at opsummere og så du har en kanonisk version, hvis du ikke var
følgende sammen ved valg her, her kan være den mest enkle af websider,
så noget at lege med måske senere.
>> Nå, lad os indføre en par andre ideer nu.
Vi er ved at indføre noget, der hedder en stil tag.
Vi kan stilisere denne side i mere interessante måder.
Så mens HTML e-mail handler om mærkning op
dataene, en slags specificere til en browser, hvordan man strukturere dataene,
hvor at sætte det, CSS, eller cascading style sheets,
er et andet sprog, som generelt bliver blandet med HTML
som vi vil see--, men vi kan rense at i at moment-- der tager
det endelige mile, og det stylizes det.
Det bliver farverne lige højre, skrifttypen størrelser lige højre,
positioneringen lige højre.
Det handler om æstetik eller formatering, ikke om
den grundlæggende data selv.
Og den nemmeste måde at vise dette er måske ved eksempel.
Så jeg har tænkt mig at gå over til min simpel tekstfil.
Og på bare et øjeblik, vil jeg gå os gennem processen
at gøre dette selv.
>> Jeg har tænkt mig at gå tilbage til min fil her og genindlæse siden bare
at bekræfte, hvad det ligner.
Det er der vi er på nu.
Jeg har lyst til børn ville nyde have nogle farver til denne webside.
Så jeg har tænkt mig at gå op her ind i hovedet på siden.
Og jeg har tænkt mig at gøre stil, / stil.
Og så inde i dette, vil jeg at fortælle kroppen af ​​min page--
og dette formatering er, på første øjekast, måske lidt
mærkeligt, men konventionelle.
Jeg har tænkt mig at sige, at baggrunden Farven på denne side skal være grøn.
Og det er desværre slags ikke det bedste design.
Bemærk, at tidligere i verden af ​​HTML,
Jeg sagde, at attributter er disse nøgleværdipar.
Noget lig citat citat slut "noget."
I en verden af ​​CSS, som var designet af nogle forskellige mennesker,
de besluttede, at, i deres verden, nøgleværdipar
ville være ord kolon noget.
Så det er den samme idé, selv om.
Det er at knytte en værdi med nogle nøgle, en eller anden måde
påvirker adfærden på denne side.
>> Og du kan sikkert gætte.
Hvad er det sandsynligvis vil at gøre, selv om du aldrig har
set HTML eller CSS før?
PUBLIKUM: Skift baggrundsfarve.
DAVID J. MALAN: Ja, ændre baggrundsfarven.
Og specifikt baggrundsfarve af kroppen.
Men for så vidt som organ for nu er den web
page-- det er det eneste, under titellinjen really--
det sandsynligvis kommer til at påvirke det samme.
Så lad os se.
Lad os gemme denne.
Gå her og genindlæse.
Det er temmelig hæslige.
Og hvad der foregår her er en bivirkning.
Jeg valgte billedet tilfældigt.
Hvorfor er det grønne ikke gennemsyrer bag Mickey?
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Præcis.
Det viser sig, at billederne, pretty set alle billeder, som vi kan bruge,
er alle rectangles-- af rektangler.
Selv om Mickey har nogle kurver til sig selv og har en baggrund,
at baggrunden skal være noget.
Det skal være hvid.
Det skal være sorte eller noget andet.
Det kan være transparent.
Og i virkeligheden, jeg kunne åbne Mickey Mouse her
i et program kaldet Photoshop eller noget lignende
og ændre alt dette hvide baggrunden til gennemsigtige,
så den grønne ville skinne igennem.
Men det er noget, jeg skulle at spørge mig selv eller en grafiker
eller en designer på min selskab, for eksempel,
at gøre, især da jeg lige lånt denne ene fra internettet.
Men det er, hvorfor dette sker.
>> Så hvad der ellers måtte vi ønsker at gøre?
Nå, vi måske ønsker at sige, at vi virkelig håber du nyder dit ophold.
Og for vægt, jeg vil at gøre dette stærke,
og så jeg vil sige åben stærk og luk stærk og læg.
Og det er lidt svært at se på projektoren
men måske virkelig nu springer ud på dig lidt mere.
Så du kan tilføje kursiv i denne måde, fed vendende på denne måde.
Vi kunne ændre farverne.
I virkeligheden, bare for sjov, jeg er kommer til at gå videre og gøre dette.
Jeg kan ikke rigtig lide, hvordan min stykker er så tæt sammen,
så jeg kunne gøre noget som dette.
Jeg har tænkt mig at fortælle browseren, ændre hvert afsnit tag til have,
lad os say-- faktisk, ved du hvad, lad os tilpasse den tekst-align, center.
Og igen, jeg ved det eneste fordi nogen lærte mig det
eller jeg kiggede det op i en online reference.
Så lad mig gemme denne.
Og, ah, nu har jeg centreret aftrykket der.
Og faktisk, ved du hvad, hvis Jeg flytter mit billede ind i et afsnit
tag-- så en tredje afsnit, selvom det er ikke tekst.
Lad os gemme det og genindlæse.
Nu siden er begyndt at se slags of-- Jeg mener, det er stadig temmelig grim,
men i det mindste ser det ud som jeg brugte to minutter i stedet på et minut
gør det.
>> Og så, trinvist, kan vi gøre disse æstetiske ændringer nu til siden?
Jeg har ikke rigtig ændret data i bortset tilføje ordet virkelig side.
Jeg har tilføjet metadata, hvis du vil.
Hey, browser, gør ordet "virkelig" fed.
Men data er ikke stærk.
Det er metadata.
Dataene er "virkelig".
Så vi har stadig nogle af de samme begreber som før.
Nu, selvfølgelig, er dette ikke på nettet, så jeg har tænkt mig at gøre et sidste trin her.
>> Jeg har tænkt mig at gå til hello.html og bare markere og kopiere dette.
Og nu vil jeg gå i Cloud9, som
Jeg vil lede dig gennem på bare et øjeblik.
Og odds er du vil snart være, hvis ikke allerede på en skærm som denne.
Og lad mig bare give dig en hurtig rundtur i hvad Cloud9 egentlig er.
Så igen cloud 9 er denne sky-baseret tjeneste
der giver dig og mig illusionen for at have vores egen virtuelle maskine
i skyen, teknisk en container i skyen,
at vi har fuld administrative privilegier til.
Så i teorien, ingen steder i verden har
adgang til skærmen er jeg kigger på lige nu,
måske bortset fra de mennesker der kører stedet,
fordi teknisk de har fysisk adgang og så videre.
>> Så hvad ser vi i dette miljø?
Jeg har tænkt mig at zoome ud, fordi det er lidt lille.
Og lad mig påpege løbet her for et øjeblik.
På venstre side af min og din skærm, der er en fil browser til venstre.
Så ligner i ånden til Mac OS og Windows.
Disse er alle af filer i min konto.
Og som standard, hvis din konto er som mit,
du vil se eller snart se helloworld.html og readme.md.
Over her til højre, det er hvor mine tekstfiler kommer til at gå.
Hvis du nogensinde har brugt Microsoft Word eller Notesblok eller TextEdit,
dette er ord min redigering af filer kommer til at gå.
Og så den mest mystiske træk ved dette miljø
at vi ikke virkelig bliver nødt til at bruge, er hernede kaldes et terminalvindue.
Hvis du har brugt DOS fra Gårsdagens, det er Linux
eller Linux svarer til DOS.
Det er en tekstbaseret interface-- ingen museklik, ingen trække.
Alt hvad du kan gøre er at skrive kommandoer, men disse kommandoer
kan oprette filer, flytte filer, åbne mapper, tæt telefonbøger,
gøre en række ting.
Men for nu, vil vi bare bruge vores tid heroppe.
>> Og så lad os gøre det.
Hvis du er i denne miljø, som du bør
være, hvis du har oprettet et arbejdsområde allerede, gå videre og bare gå op
til Fil, Ny et øjeblik.
Og det vil give dig en ny Fanen lige her i midten.
Og jeg bare-- og lad os se gå videre og gøre dette.
Lad os gå videre og nu gør Fil, Gem og gå videre og kalder det hello.html,
ikke at forveksle med helloworld.html, som
fulgte med din nye gratis konto, som er blot en prøve-fil.
Du vil se det pludselig dukke, mest sandsynligt på venstre side,
og fanen vil stadig være åben.
Og lad mig opfordre dig nu for at genskabe denne fil eller nogle varianter deraf.
Og hvis du kan ikke helt se det på skærmen, er identisk til objektglassene
at du sandsynligvis have i en anden fane.
>> Så kort, gør din første webside, gemme det, og derefter i et øjeblik,
Jeg vil vise dig, hvordan du kan faktisk se disse.
Men ændre mindst én ting.
Skift helloworld til noget af dit eget valg,
så du er overbevist om, at det er din fil og ikke den, jeg lige har oprettet.
Okay.
Og når du ready-- nej rush-- når du er klar,
gå videre og gemme filen når du har foretaget disse ændringer.
Og hvis du klikker på Kør knap op toppen, dette
skal åbne en ny fane, der vil fortælle dig, hvad URL du kan besøge din fil på,
men det kan tage et øjeblik at quote citat slut "start Apache", som
er navnet på webserveren.
Så vær omhyggelig med at gøre præcis hvad der er i filen til sidst.
Så lige nu, vil jeg zoome ind.
Hvis jeg begynder at skrive open-beslag HTML, varsel
det er at spørge mig at afslutte min tanke.
Og hvis jeg færdig min tanke, det giver mig automatisk afsluttende tag.
Men forventningen er så vil jeg ramt Enter, og derefter flytte inde der
og gør hovedet inde og så jeg gør kroppen indeni.
Og det er lidt underligt i starten, fordi det gør arbejdet for dig,
men indse, at i sidste ende det sparer dig tastetryk.
Og faktisk en meget fælles træk ved programmering miljøer i disse dage
både for webudvikling ligesom dette, og faktisk programmering,
som vi vil tale om i morgen, er disse auto-complete funktioner,
ting, der bare giver et programmør eller en designer
at skrive færre tastetryk til opnå det samme.
Nogle gange er det godt, selv om.
Nogle gange er det bare irriterende.
Og igen, når du har transskriberet dias eller nogle variant deraf
du kan klikke på knappen Kør op øverst.
Og så i bunden vindue, vil du blive informeret
på, hvad URL kan besøge din webside.
Mine, for eksempel, er ved business-daharvard.c9users.io
og så videre.
Okay, så lad mig-- nogen spørgsmål?
Eventuelle andre spørgsmål om blot at få dette arbejde, før vi tilføje funktioner?
Og lad mig foreslå, bare at få folk comfortable--
fordi det er én ting at bare copy-paste blindt hvad jeg har gjort.
Men lige så folk kæmper med mindst en to-do,
Jeg har tænkt mig at tænde noget musik.
Jeg har tænkt mig at foreslå en liste over ting kan du potentielt tilføje.
Og du kan helt sikkert bruge Google.
Og hvorfor gør vi ikke bare foreslå, at du prøver at løse
mindst et særligt problem her.
Så med hensyn til tags, lad mig genbruge denne her.
>> Faktisk, lad mig sætte det i en tekstform.
Lad os sige, at blandt de tags vi måske bruge her er nogle tags herovre.
Vi har set det afsnit tag.
Nu det vil automatisk udfyldning.
§ tag, anker tag.
Lad os sige, at du vil gøre noget større,
så du måske like-- span tag kan hjælpe.
Nå, du måske har brug for hjælp for at i bare et øjeblik.
Vi har set div.
Du vil se, at der er bord.
Der noget, der hedder tr, td.
Th, td.
Kom tilbage til om et øjeblik.
Hvad andet kan være praktisk?
Der er stærk.
Der er vægt, eller rettere em.
There's-- hvad der ellers måske du har lyst til her?
Nå, vi vil tage et se på det sammen.
Form, som vi har set.
Der er formular.
Der er input og et par andre.
Okay, så lad os gøre det.
Sådan besvares et Victorias spørgsmål, lad mig først
bare sørg for, at alle er stand til at få deres hej arbejder.
Så lad mig introducere en par andre ideer.
Så vil vi lade folk løser nogle problemer på egen hånd.
Så vil vi faktisk kommer tilbage til begrebet en formular,
og vi vil faktisk re-implementere sammen front-end interface,
så at sige, for Google selv.
Vi bruger Google som bagenden og lad dem gøre det hårde arbejde, det søgende,
men vi vil genskabe den forreste ende Google og søgeskemaet
at de har på deres egen hjemmeside.
Og så vi vil vende tilbage til disse tags på blot et øjeblik.
>> Så dette var, hvad jeg foreslået et øjeblik siden.
Vi kan tilføje stilisering til en side indersiden af ​​denne stil tag,
og vi kan stilisere baggrunden farve, tekstjusteringen,
uanset om det er centrum eller til venstre eller højre.
Men meget hurtigt du ville finde eller en webdesigner
ville finde, at dette bliver lidt uhåndterlig,
fordi du laver, hvad der er kaldet blande indhold
med præsentation heraf.
Du blande dine data og æstetik deraf.
Og i virkeligheden, hvis du overveje hvad der kommer til at ske i løbet af time--
dette er en meget lille webside, selvfølgelig.
Men hvis jeg tilføje indhold til denne side og jeg tilføje stil til denne side,
siden bliver meget hurtigt længere og længere og længere.
Og formoder, at jeg vil have en anden webside,
deler nogle af disse attributter.
Antag min anden webside for min site-- også, jeg vil have det hele center,
og jeg vil også alt med en grøn baggrund.
Jeg er temmelig meget nødt til at kopiere og indsætte nogle af disse linjer
ind i den anden fil, som føles fint.
Det vil løse problemet.
>> Men hvad hvis jeg vil have en tredje side eller en 30-side eller en 40th side?
Nu vil jeg være at kopiere og indsætte en masse duplo kode
i flere filer.
Og så antage, at Jeg beslutter eller jeg har fået fortalt,
hey, vi bruger ikke en grøn baggrund længere.
Vi kommer til at begynde at bruge orange.
Hvad har du at ændre?
Nå, er du nødt til at ændre den stil fra grøn til orange, hvor mange steder?
Ligesom 30 eller 40 pladser.
Det er trættende.
Det er udsat for fejl.
Der er en række årsager hvor du ikke ønsker at fremkalde
den slags smerte for dig selv.
Og så ville det ikke være rart hvis vi kunne tage, hvad jeg lige
sat mellem disse to gule tags, disse stil-tags,
faktor det ud, og sætte alle mine stilisering i én central fil
at alle 30 eller 40 af mine andre filer låne fra eller anden måde referere,
ikke i modsætning til netværk diagrammer vi lavede før?
>> Så hvis jeg går i her, er jeg vil faktisk foreslå
at vi erstatte stil tag med noget
kaldet taglinket, som er forfærdeligt, forfærdeligt navngivet,
fordi du ikke bruger den link-tag til at skabe, hvad
vi mennesker kender som et link i en webside.
Til det, du bruge som tag?
Hvordan skaber man et link i en webside?
PUBLIKUM: Den a.
DAVID J. MALAN: Den a, eller anker tag, der gik til Disney før.
Linket tag her siger denne-- link til en fil kaldet
styles.css, forholdet til hvilken vil være, at det er min stylesheet.
Så dette er en af ​​de S 'i CSS-- cascading style sheets.
Style sheet-- to af S 'i CSS.
Cascading Style Sheet.
Det betyder bare, hey, browser, gå finde styles.css på den lokale server
og bruge det som dit stilark, hvilket betyder indersiden af ​​denne fil
bliver alle de stylizations som vi lige har gjort.
Og så hvad denne fil kunne ligne dette.
Og jeg vil bare gøre dette er en hurtig eksempel, fordi vi ikke har brug for
at komme for meget i ukrudtet her.
Men hvis jeg kopiere denne, hvad jeg foreslår er, at en programmør oprette en ny fil,
indsætte disse lines-- whoops-- indsætte disse linjer,
gemme det som styles.css, og derefter, i den anden fil, slette alle, der
og erstatte det i stedet med dette link tag.
Så hvis jeg linker href = "styles.css", forholdet skal være "stylesheet"
tæt tag.
Gem det.
Gå tilbage til min helloworld.
Opdater.
>> Bogstaveligt talt intet er sket.
Det er en god ting, fordi det betyder, at det er faktisk alle arbejder.
For at bevise så meget, formoder jeg lave en tastefejl, og jeg kalder denne "styles.css"
med stort S, som er forkert, og derefter genindlæse.
Nu kan du se det bare ikke fungerer.
Nu, hvorfor?
Nå, lad os bruge et teknik fra tidligere.
Lad mig gå videre og, i min browser, i Chrome, jeg er
kommer til at åbne op, at særlige Fanen netværk som før,
og lad mig genindlæse siden.
Hvad er du ikke overrasket over at se nu?
Eller måske er du overrasket over at se det.
Uanset hvad, hvad ser du nu?
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Det er ikke fundet.
Hvorfor er det ikke fundet?
Nå, Styles.css-- kapital S-- findes ikke.
Jeg misnamed det.
Simple typo.
Men jeg får forståeligt nok nu en 404, fordi serveren siger, hey,
det er ikke fundet.
Bogstaveligt, ved jeg ikke når denne fil er.
Så som et resultat, browseren viser dig, hvad det kan,
den rå indholdet på siden, som var en 200, HTML,
men stilisering ikke kan tilsættes derefter.
Og det er, hvad der menes med cascading.
Du kan slags tilføje det efter, og det slags
raffinerer æstetik websiden.
Og du kan endda tilsidesætte dem stilarter med endnu andre stylesheet filer
Hvis du vil.
Det er ikke fundet, men i dette tilfælde, fordi selvfølgelig, jeg misnamed det.
Så jeg ville have til at ordne det første.
>> Så lad os gå videre og foreslå følgende.
Lad os gå videre og gøre dette.
Startende med måske din HelloWorld fil,
lad mig bare invitere et par af funktionen forslag.
Så, Victoria, du ville lave noget tekst større, ikke?
Okay, så vi kan gør teksten større.
Og vi vil hver plukke off kun et problem at løse.
Gør teksten større.
Jeg har ikke tænkt mig at genere skriver dette, når vi
har bullet teknologi lige herovre.
Så nogle problemer.
Så vi vil prøve at gøre teksten større.
Okay.
Hvad ellers ville nogen foreslå?
Hvad andet kunne vi ønsker at gøre i en webside?
Lad os komme op med en kort liste over ting
og derefter uddelegere gruppe til at finde ud af dette.
>> PUBLIKUM: [uhørligt]
>> DAVID J. MALAN: OK, position tekst på forskellige sider af siden?
Okay.
Noget andet.
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Det er.
Så en gif er bare en andet filformat.
Vi har lige brugt, hvad en png eller jpg sandsynligvis?
Vi brugte en jpg.
Hvis du er nysgerrig, en overdreven svar på dit spørgsmål
er en jpg anvendes normalt til fotografier, fordi det understøtter
millioner af farver eller 24-bit farve.
En gif anvendes normalt til, ligesom, internetfænomen disse days-- animationer,
som animerede gif-filer.
Men det sker at anvende en mindre farve palet, kun 256 mulige farver,
men det understøtter gennemsigtighed og animation.
Og så er der png, som understøtter gennemsigtighed og flere farver
men ikke animation.
Så det er en afvejning.
Så tilføje en gif, selv om, ville være funktionelt
svarer til at tilføje en png eller en jpg.
Ja.
Billede kilde lig.
Så noget andet.
Lad os komme op med noget, der vi sendt til Victoria at gøre her.
>> PUBLIKUM: Tilføj knapper til en formular.
DAVID J. MALAN: OK.
Så tilføje knapper til en formular.
Og vi vil gøre, at man sammen.
Så det vil være en perfekt Overgang lige efter denne udfordring.
Ellers andet?
Hvad kan du lide at gøre?
Den web føles meget underwhelming hvis det er alt vi kan gøre.
PUBLIKUM: Ændre farven på teksten.
DAVID J. MALAN: Skift hvad?
PUBLIKUM: Farve af teksten.
DAVID J. MALAN: Skift farve på tekst.
Okay.
Så lad os gøre det.
Bare igen, så du ikke bare udenad, gør præcis, hvad jeg gør,
Jeg har tænkt mig at tænde musik for måske fem minutter her.
Du er velkommen til at bruge Google.
Du er velkommen til at spørge mig, og Jeg vil hviske et tip i øret.
Du er velkommen til at kigge over på andre skuldre.
Men løser kun et af disse problemer.
Men vi vil gøre det sidste, de danner en, hvis vi kunne, sammen.
Så fem minutter til at løse helst af disse problemer
ved hjælp af Google, intuition, eller en hvilken som helst andre midler til rådighed for dig.
>> [MUSIK AFSPILLER]
Okay.
Ingen bekymringer, hvis du ønsker at holde lappeløsninger,
men jeg vil ødelægge et par af disse svar.
Så den første forslag fra Victoria var at gøre teksten større.
Så der er et par måder at gøre dette.
Jeg har i øjeblikket restaureret min skærm til denne størrelse,
selvom jeg har zoomet ind kunstigt bare at se tingene.
Og lad os gøre det.
Lad mig gå videre og grab nogle generiske latinske tekst
bare så vi har noget at arbejde med.
Så giv mig bare et øjeblik.
Jeg vil gøre tre stykker.
OKAY.
Dette vil være et bedre eksempel.
Så for de nysgerrige, i min hello.html, jeg bare
indsat tre meningsløse latinske stykker
bare så vi har noget tekst at arbejde med.
Og Victoria mål var at gøre noget af teksten større.
Så jeg kunne, som før, gå her.
Og lad mig gøre det på den rigtige måde.
Jeg har tænkt mig at have et link tag, der peger på en fil
kaldet "styles.css" forholdet hvoraf er igen "stylesheet."
Og så jeg har tænkt mig at redde denne og åbne denne "styles.css."
>> Så som før, jeg har kvalifikationer på dette CSS-fil
til faktisk tilsidesætte standardindstillingen æstetik af en webside,
og standardindstillingerne æstetik, selvfølgelig er temmelig kedelig.
Det er en slags normal skriftstørrelse, sort tekst, hvid baggrund, og så videre.
Så formoder jeg ønsker at gøre alt dette tekst større.
Jeg kunne gøre et par ting.
I min styles.css fil, jeg kunne sige, ved du hvad,
anvende følgende til kroppen af ​​min side.
Gå videre og gøre skriftstørrelse 24 point,
hvilket er et tal jeg måske brug i Microsoft Word.
Lad mig vende tilbage til mit web side her og genindlæse,
og du kan se, at det er allerede meget større.
Og vi kan få lidt skør, ligesom vi kan på en desktop--
gøre det 96 point.
Opdater.
Og det er at få lidt uhåndterlig på dette punkt.
>> Men jeg kunne være lidt mere præcis.
I stedet for at anvende denne stylesheet til kroppen af ​​min side,
hvad der ellers kunne jeg anvende det på stedet, hvilke andre tag, der måske stadig
fungerer på samme måde?
>> PUBLIKUM: p tag?
David J. MALAN: P-tag.
Så hovedet ville ikke være korrekt, fordi hovedet,
du kan faktisk ikke styre æstetik.
Der er enten tekst der eller ej.
Men p tag-- jeg kan dykke i en lille dybere, så at sige, til punkt
tags.
Og selv om der er tre, det er helt fint, for i CSS,
når jeg bare sige "p", dette betyder anvender følgende
til alle tags, der matcher dette selector, vælgeren bare
er navnet på mærket.
Så uanset hvor du ser en "P", anvende den skriftstørrelse,
og lad os gøre det mere rimelig igen-- 24 point.
Og ved du hvad, bare for god foranstaltning,
lad os gøre farven rød lige for øjeblikket.
Og nu, hvis jeg genindlæse, nu vi se tre grimme stykker.
>> Men nu antage, at jeg er sort of-- Jeg vil have det første afsnit
at springe ud på brugeren.
Jeg ønsker ikke at bare stige skriftstørrelsen af ​​alting.
Og så jeg rent faktisk ønsker at identificere eller skelne mellem disse stykker.
Så lad os slippe af med den røde, fordi det er bare slags tarvelige,
og lad os gå videre og gøre det skriftstørrelse 12-punkts som standard,
så vi er tilbage til noget lidt mere rimelig.
Og nu vil jeg bare at øge skriftstørrelse i første afsnit.
Jeg kan gøre dette i et par måder, men en måde, der er
måske mest instruktions- på øjeblik er at gøre følgende.
Lad mig gå videre og sige, det afsnit har et unikt ID af "først."
Jeg kunne kalde dette noget jeg vil.
Jeg kunne kalde denne "foo" eller andre ord,
men jeg har tænkt mig at give det lidt semantisk meningsfulde navn
som "først."
Dette er den entydige identifikationskode, ID, for min første afsnit.
>> Hvad jeg kan nu gøre i min stilark er være lidt mere præcis.
I stedet for at sige, gælder følgende til p-tag,
Jeg kan sige det following-- anvende det følgende,
eller vælg, HTML element der har et unikt id af "først."
Hvad ønsker jeg at gælde for det?
En skriftstørrelse 24-point.
Så jeg har to selektorer nu.
Man gør alle de præmis 12-point.
Men denne ene, især da det kommer second-- det kommer sidst i file--
dette har en dominoeffekt.
Jeg har lige lavet alle mine stk tags 12-punkts,
men dette nu kaskader og tilsidesætter, at for nogen elementer
på siden, nogen tag i den side, hvis unikt id er citat citat slut "først."
Og hashtag i denne sammenhæng bare betyder "entydigt id."
Jeg kan ikke sætte det i HTML-filen.
Jeg, herovre, bare sige quote citat slut "først."
>> Så lad mig genindlæse.
Og nu ser jeg, ah, OK.
Jeg mener, det er ikke det smuk, men det er sådan
ligesom forordet til en bog eller noget lignende,
hvor det første afsnit er større.
Kunne være endnu mere præcis med bare de første bogstaver, men i det mindste
Jeg har udøvet mere kontrol.
Nu maybe-- måske jeg ønsker at gøre dette lejlighedsvis uanset årsagen,
og så kan jeg ikke ønsker, at dette gælder kun én HTML-tag.
Snarere, lad os say-- lad os også gøre følgende.
Class = "import".
Betragtninger en ID bruges til entydigt identificere én ting, en tag,
i din webside, er en klasse menes at være bruges på et vilkårligt antal elementer eller tags
på din webside.
Så det er genanvendeligt.
En id er ikke genbruges.
En klasse er genanvendelig.
>> Og ved du hvad, uanset filosofiske reasons--
Jeg har ikke slutte min thought-- Jeg har tænkt mig at sige
at det første afsnit og andet afsnit er vigtige.
Så jeg har tænkt mig at anvende klasse kaldet "Vigtigt", at hvis jeg gemmer min fil
og genindlæse, har ingen funktionel effekt endnu.
Men jeg har tilføjet nogle metadata til filen,
slags noget særskilt fra de centrale data for filen,
så der nu i min stylesheet, hvis jeg i stedet sige ".important" - du ved,
noget, der er vigtigt, er jeg vil gøre font-farve, red--
eller rettere ikke font-farve, bare farve.
Der er uoverensstemmelser i CSS desværre.
Og genindlæse.
Bemærk nu det første to stykker er røde
men ikke den tredje, fordi jeg kun anvendt klassen af ​​"vigtige"
til de to første af disse ting.
>> Så i id'er, har du mulighed at angive meget præcist.
Med klasser, har du genanvendelighed.
Men i begge tilfælde, bemærk slags princippet godt design
hvor jeg indregnet ud af alle de æstetik til min styles.css fil.
Så der er ingen roderi her.
Der er ingen omtale af rød eller fed-vendende eller skriftstørrelse i denne fil.
Jeg har Snarere semantisk, meningsfuldt karakteriseret mine data som,
her er nogle vigtige data.
Her er nogle mere vigtige data.
Endvidere her er den "Første" af mine vigtige data.
Så HTML handler om sortering af tagging, bogstaveligt, ord
og afsnit og konstruktioner i dit side med disse små hints, hvis du
vil, at du kan en eller anden måde udnytte hjælp
andre teknikker som CSS på denne måde.
>> Så som svar på Victoria spørgsmål, vi kan gøre teksten større på den måde.
Der er så mange andre måder, men skrifttypen tag-- åben beslag "font" -
er faktisk flere år.
Og det er problemet, også, med kun stole
på online resources-- de tendens til at være forældet.
Og ja, der er blevet forældet, fordi verden indså,
hvad betyder "font-size = 7" betyder?
Det gør det ikke.
Og det i mange år og til dette dag-- en af ​​side
bemærker her er, at det faktisk utroligt smertefuldt undertiden stadig
at udvikle steder for web, fordi Microsoft
og Google og Mozilla og andre ofte er uenige om, hvordan
at fortolke en specifikation som HTML.
>> Der er en regelsæt for HTML, der generelt siger, hvad hver mærke betyder.
Men nogle gange er det overlades til implementering skøn,
Microsofts skøn og Google.
Og så vil du meget ofte se på en hjemmeside noget
ser anderledes på en pc end den gør på en Mac,
og det er virkelig fordi, i sidste ende,
de ikke teste det godt på begge platforme.
Men det er også fordi rimeligt, intelligente mennesker vil være uenige
og virksomheder vil være uenige, og så en af ​​udfordringerne i programmering
til nettet eller design ting til nettet
skriver dit website på en måde der virker på hver webbrowser.
Men selv det er urimeligt, ikke?
Der er så mange versioner af så mange browsere derude, der, på et tidspunkt,
du også nødt til at foretage en dom opkald og du er nødt til at beslutte, som en virksomhed,
især for e-handel-stil steder, hvor du er
forsøger at bruge den nyeste og bedste teknologier til at give en rigtig god brugeroplevelse
erfaring.
Men nogle procentdel af dine brugere kunne stadig bruger Internet Explorer 6 eller 7
eller 8, især afhængigt af land, de kommer fra.
>> Og så meget almindeligt hørt på noget
lignende "web browser statistik."
Og hvis vi går at-- lad os se Wikipedia og se, hvordan up-to-date dette diagram er
hvis der er én.
Så her kan du se hvor browsere faktisk
er ifølge december 2015 i henhold til den amerikanske regering.
Chrome er på 42% af markedet, fulgt af IE stort set i virksomhedernes indstillinger
eller pc-indstillinger, selvfølgelig, efterfulgt af Firefox,
derefter Safari, så Opera gjorde ikke gøre kortet her en eller anden grund,
og derefter Andre.
Måske er det under andre.
Men mere problematisk end det is-- lad os se om Wikipedia har også
versioner af browsere version--
>> Lad os gå til browser statistik.
IE.
Selv det er ikke nok.
Browser statistik.
Min version.
Det kommer ikke til at være rigtigt.
Lad os se versioner.
Browser markedsandel.
Lad os se, om det kommer op.
OKAY.
Nu bliver lidt mere nyttigt.
Så her, bemærke, at vi har alle forskellige versioner af browsere.
Og, min Gud, hvis du look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Jeg mener, browsere stigende grad opdateret, og undertiden nogle af disse ændringer
er signifikante i hensyn til funktionalitet.
Og så på et tidspunkt, den produktchefer eller ingeniører
nødt til at gøre en decision-- dig hvad, kun 1% af verdens
er stadig bruger IE 7.
Til helvede med dem.
Vi bare ikke kommer til at understøtte denne browser.
Og hvad betyder det ikke at støtte?
Det kan betyde, at knapper virker ikke på din webside,
eller det kan betyde formatering er helt slukket.
Eller du måske nødt til at gøre samme dom opkald
i mobile disse dage, hvor vi er ikke kommer til at støtte IOS 5 længere.
Så folk bare nødt til at opgradere.
Eller vi kommer ikke til at understøtte Cupcake på Android OS til Android-enheder,
fordi som den verden-som tech verden ønsker at bevæge sig fremad,
den slags ønsker at trække verden med det, således at de ikke
nødt til at fortsætte med at være bagudkompatibel, så de
kan tilbyde nye og gode funktioner.
Dette er faktisk en af ​​grundene hvorfor så mange virksomheder er rullende ud
automatiske opdateringer og slags tvinge de nyeste versioner af software på os.
Og selv virksomheder ligesom Apple vil sortere på
tvinge dig næsten eller tvinge dig i form af markedskræfterne
at købe en ny telefon, fordi de bare vil ikke opdatere din gamle telefon længere.
Så du glip af nyeste og største funktioner,
fordi det er dyrt at dem som en selskabet at opretholde ældre, velsagtens
ringere versioner af software.
Men nettovirkningen er, at vi lider også det så godt.
>> Så lad os tage et kig på netop et par af de endelige ting her.
Lad os banke off reelle hurtigt nogle af disse andre kugler, hvis nysgerrig.
Så hvis du prøvede at, for eksempel, position
teksten på forskellige sider af side, jeg har tænkt mig at gøre én hurtig måde,
men der er anderledes måder at gøre dette.
Lad mig gå videre og eliminate-- forenkle denne som følger.
Lad mig bare gå tilbage til min simple, enkle stykker.
Lad mig gå tilbage til min styles.css.
Og jeg bare bruge simple-- som du måske har set på Google
eller huske fra earlier-- tekst-justere højre.
Og genindlæse denne side.
Nu alt synes at være højrestillet,
som du kan se på overhead her.
>> Vi kan gøre det ser lidt mere bog-lignende, og vi kan sige "retfærdiggøre"
og genindlæse.
Nu er det rart og firkant på begge sider, som er slags nice.
Et andet mål, som vi havde her var ændre farven på tekst.
Så så vi, at med min røde tekst.
Og nu tilføje knapper til en formular.
Så hvorfor skal vi ikke forsøge at gøre netop dette?
Men først lad mig gå til et websted, de fleste af os bruger hver dag-- Google.
Og lad os tage et kig på hvordan Google rent faktisk virker.
Men jeg har tænkt mig at gøre dette.
Første Lad mig gøre det in-- jep, lad mig gå til Google først.
Jeg har tænkt mig at have til at gå ind i Google Indstillinger,
fordi jeg ønsker at deaktivere noget, der hedder Instant resultater.
>> Så du måske har bemærket i Google disse days-- lade mig gå tilbage
og slå det på.
Så hvis jeg begynder at søge for "katte" som denne,
bemærke, at ikke kun Jeg får auto-udfylde op
top, pludselig, selve siden synes at ændre temmelig hurtigt samt,
og det er Google ved hjælp af et sprog kaldet JavaScript forsøger at være hjælpsom.
Men desværre, den slags af messer op vores diskussion
af, hvad der faktisk sker under emhætten her.
Så jeg er bare lidt hurtigt slukke øjeblikkelige resultater.
Og jeg har tænkt mig at klikke på Gem.
Og nu vil jeg åbne at diagnostisk værktøjslinje, jeg
holde åbning under fanen Netværk.
Så lad os gøre det.
Lad mig-- whoops-- rulle det ned lidt.
Og lad mig søger efter "katte".
>> Og nu notice-- faktisk, dette er en god mulighed
at diskutere et øjeblik.
Læg mærke det øjeblik jeg Motortype- stoppe det.
Stop det.
OKAY.
Læg mærke det øjeblik jeg skriver brevet C, se bunden af ​​skærmen.
A- T- S. Hvad gør bunden af denne skærm, min fanen Netværk,
tyder sker hver gang jeg skriver et brev?
Desværre Frøen er meget distraherende dag eller shamrock
eller hvad han er.
Hvad skete hver gang jeg har skrevet?
Og lad mig rydde buffer og skrive det igen.
So-- hovsa.
Hver gang jeg skriver et brev, C- A- T-- så en ny række tydeligvis holder vises.
Hvad betyder hver af disse rækker repræsenterer, baseret på, hvad vi har set og diskuteret
så langt?
PUBLIKUM: En søgning?
DAVID J. MALAN: En søgning, eller mere generisk, en HTTP-anmodning
fra min browser til serveren.
Tja, hvorfor er min browser gør en HTTP anmode hver gang jeg skriver et brev?
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Ja, det er at give mig disse auto-complete resultater.
Ligesom, hvor vil disse søgeresultater fra?
Nå, hver gang jeg skriver en brev, Google sender mere
og flere og flere af det ord, jeg skriver.
Hvorfor?
Fordi de ønsker at give mig en bedre og bedre, bedre forslag,
en liste med forslag, for hvad ord Jeg forsøger at faktisk færdig.
Så dette er at sige bogstaveligt talt hver tegn, du skriver i Google
bliver sendt, i sidste ende i bulk, men også nogle gange en
på et tidspunkt for at gennemføre disse auto-complete funktioner, når
dataene er naturligvis på nettet.
>> Lad os nu tage et kig på, hvad der egentlig sker der, når jeg klikker Google-søgning.
Og så vil vi udnytte dette selv.
Så hvis jeg rulle ned nu til den meget første anmodning om, at der lige er sket.
Læg mærke til følgende.
Det blev sendt til en temmelig lang URL-- https://www.google.com/search?
og derefter en hel masse ting.
Lad os se det faktisk nu i browseren fanen selv.
Lad os slippe af værktøjslinjen her.
Her er den side med søgeresultater.
Og varsel her er den URL.
Nu kan du sikkert gætte hvad der foregår her delvist.
Så først og fremmest, en definition.
Denne tilsyneladende er destinationen hvor formularen er indsendt.
Så når jeg har skrevet i den ordene "katte" og tryk Enter,
tilsyneladende Google sendt min tekst input til denne URL
at jeg har fremhævet der, skråstreg søgning.
Slår ud, i en URL, noget, der der sker efter et spørgsmålstegn er,
som vi altid siger, en nøgleværdiparret der blev indtastet i formularen eller anden måde
transmitteret fra browser til serveren.
>> Så hver gang du skriver input til en form på nettet
og det er sendt som vi har talt via en get,
en af ​​disse virtuelle kuverter, hvis indhold
af det envelope-- ja, holde få proppet fysisk
i kuverten i klassen dag, men teknologisk
det er faktisk sat i webadressen.
Så i virkeligheden, lad mig finkæmme gennem dette.
Hvor ser du brugerinput?
Hvor ser du noget at jeg selv har skrevet op her?
Ja, så "katte".
Højre?
Så lad mig destillere denne til noget enklere.
Jeg har tænkt mig at slette alt om denne webadresse, som jeg ikke forstår,
og jeg bare at forlade det som denne-- / søge? q = katte.
Vi vil se, hvor q kommer fra i et øjeblik,
men der føles som minimum mængden af ​​oplysninger, jeg forudsat.
Og nu vil jeg trykke Enter.
Og mærke det stadig virker.
Vi har stadig få tilbage en hel masse katte.
Så Google er mere avanceret end dette disse dage.
Det er 2016, ikke 1999.
Så der er andre ting, som min browser sender til serveren.
Men dette er minimalt alt, hvad der er nødvendigt.
>> Så hvad sker der?
Nå, lad mig gå videre og gå tilbage til Cloud9 og lad mig gå videre
og lukker faner tidligere.
Og jeg vil gøre dette på min ejer bare for et øjeblik.
Jeg har tænkt mig at gå videre og skabe ny fil.
Og jeg har tænkt mig at gemme det som google.html.
Og jeg har tænkt mig at meget quickly-- Jeg har tænkt mig at stjæle, faktisk,
nogle af denne tekst blot for at spare tid.
Jeg har tænkt mig at indsætte denne i her.
Jeg har ikke tænkt mig at genere med enhver stilisering denne gang.
Vi kommer til at kalde denne "Min Google."
Og jeg har tænkt mig at slippe af alt i legemet.
Og jeg har tænkt mig at gøre følgende.
Lad mig zoome ind.
Form action-- og som jeg kort nævnt earlier-- whoops-- da jeg kort
nævnt tidligere, virkningen af ​​et formen er, hvor du sende data til.
Så google.com/search.
Og den metode, jeg vil bruge kan være en af ​​to ting.
Det kan enten være "få", som vi holder diskuterer, eller det kan være "post".
For nu, den grundlæggende Forskellen er, hvis du bruger "få"
alle de oplysninger, som bruger giver bliver sendt i URL'en.
>> Det er fantastisk til ting som søgning motorer og nogle få andre anvendelser,
men i hvilke omstændigheder ville du ikke ønsker at udfylde en formular
og har de oplysninger ender den URL, ligesom i din browsers adresselinje?
Hvilken slags former gør du--
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Ja, som hvad?
PUBLIKUM: Adgangskoder.
DAVID J. MALAN: Ja, så du logger ind på Facebook eller nogle hjemmeside.
Det er brugerens input fra en formular, en tekstboks,
men du sandsynligvis ikke ønsker det dukke op i browserens URL.
Hvorfor?
Jeg mener, måske er der nogle sikkerhedsmæssige konsekvenser på netværket,
men more-- lide, mere enkelt, hvad nu hvis din værelseskammerat, din betydelige andre,
dine børn, din ægtefælle ser gennem din browser historien?
Der er dit password til højre der i browserens historik.
Det betyder ikke lyst til godt design.
Eller endnu mere teknisk, formoder du prøver
at uploade et billede til Flickr eller Facebook eller wherever--
der er brugerinput, selv om det er lidt mere interesting-- hvordan
skal jeg proppe et billede i adresselinjen?
Du slags slags ikke kan.
Du slags kan.
Men virkelig, jeg er hårdt pressede at forestille sig at gøre det.
Så jeg har brug for en anden metode til uploade billeder til en hjemmeside,
og denne anden metode kaldes "post".
Men for nu, vil vi bare tale om "Get", som er den enkleste af de to.
Det bare sætter alle de brugerinput i URL.
>> Så her er formen jeg skaber.
Jeg vil have et input.
Og ved du hvad?
Jeg har tænkt mig at tage et gæt her.
Jeg har tænkt mig at huske min input "q" for "forespørgsel."
Og jeg tror, ​​det er en af ​​de originale tegninger, måske, fra 1999.
Og derefter typen af ​​denne indgang er bare at være "tekst".
Og så jeg har tænkt mig at have en anden indgang som ikke behøver et navn, som vi snart
se, hvilken type der er "send".
Og det kommer til at give mig en særlig knap.
Og det er det.
>> Så lad mig gå videre og gemme denne fil.
Jeg har tænkt mig at gå tilbage til min browser og gå til google.html.
Enter.
Og det er slags sparsomme mildest talt.
Men lad mig gå videre og søg efter "katte".
Og mærke jeg er i øjeblikket på denne Cloud9 webadresse.
Men i det øjeblik jeg klikker dette, hvor vil du håber jeg ender?
>> PUBLIKUM: Google.
>> DAVID J. MALAN: Google.
Så lad os klikke på Send.
Og faktisk har jeg re-implementeret Google.
Højre?
Det er enklere.
Det er lysere.
Jeg mener, min kode er klart bedre end deres, fra det rod, vi så tidligere.
Og ved du hvad?
Jeg har tænkt mig at krydre dette op en lille smule.
Jeg nævner ikke dette tidligere.
Der er tags som H1, for udgiftsområde 1, den vigtigste post i en side.
"Min Google," Jeg vil kalde dette.
Lad mig genindlæse.
Det ser lidt bedre allerede.
Og, faktisk, ved du hvad?
Jeg har already-- jeg løj.
Jeg sagde, jeg var ikke til at style det, men jeg har tænkt mig at style dette som før.
Og min krop bliver, lad os sige, tekst-align center.
Det ser mere som Google allerede.
>> Jeg har brug for et linjeskift, selv om, for at Submit knap.
Og det viser sig, du kan bruge stykker,
eller du kan mere bogstavelig talt bare sige, give mig et linjeskift her-- den br tag.
Og hvis jeg genindlæse dette, nu går det der.
Det er lidt grimt, så jeg kunne gøre flere linjeskift,
men lad os ikke blive for grådig her.
Så lad os nu se om det virker for "hunde."
Det synes at arbejde for "hunde", så godt.
Så hvad er den overbevisende takeaway her?
En-- var ikke et stort spring til indføre nogle flere tags,
ligesom formen tag i input tag.
Men mere fundamentalt er, er alle vi laver
er at udnytte vores forståelse af HTTP og den omstændighed
at formularer i sidste ende ændre hvad der er i URL'en i browseren,
og så derfor kan vi mekanisk give input til en server
ved at gøre et HTML-formular og vide at serveren forstår HTTP,
ligesom vores krop forstår, ligesom, ryste min hånd, at samme protokol,
og så vi får tilbage svaret at vi i sidste ende forventer.
>> Så lad os prøve at gøre en sidste ting nu med mobil,
og jeg vil make-- jeg vil tilføje denne kode til dias.
Så hvis du gerne vil pille, du kan helt sikkert tage den derfra.
Men jeg har tænkt mig at gå videre og gøre én ting.
Jeg har tænkt mig at gå videre og åbne op for min indeks page--
min hello side som før, hvilket har en masse af denne faux-latinsk tekst,
eller meningsløs latinsk tekst, og has-- det ser sådan ud på denne skriftstørrelse.
Men lad mig gå videre og gøre dette.
Jeg har tænkt mig at gå ind i Cloud9.
Og du behøver ikke at gøre dette skridt.
Jeg vil bare gøre det selv.
Jeg har tænkt mig at klikke på Del.
Og dette er en funktion bare for Cloud9, hvorved
Jeg kan offentliggøre mine omgivelser.
>> Og bare af hensyn til demonstration, lad mig gøre det.
Jeg har tænkt mig at gøre min ansøgning offentligt.
Bemærk det advarer mig, er Jeg sikker på at jeg ønsker at gøre dette,
fordi dette vil gøre alle i verden, uanset om de er her nu
eller se videoen senere på internet i stand til at se, hvad jeg ser.
Men det er OK.
Jeg har tænkt mig at sige "Udført".
Og lad mig opfordre dig, hvis jeg gjorde dette correctly-- lade mig teste det først.
Gå fremad, hvis du ikke mind-- i en browser på din computer,
gå til denne URL, og forhåbentlig vil du se min latinske tekst.
Og for at være klar, det er kører ikke på min laptop.
Det er i skyen.
Det er på Cloud9, bogstaveligt talt, men Jeg har lavet mit arbejdsområde offentligt
så alle på internettet kan få adgang til min latin hjemmeside.
>> Gå til den samme webadresse på din telefon, hvis du kunne.
Hvis det vil koste dig, selvom du kan bare se over en skulder.
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Jeg er ked af?
PUBLIKUM: [uhørligt]
DAVID J. MALAN: Bare latinske ord.
Det er alt.
Men det er, hvad du skal se.
>> PUBLIKUM: Ja.
DAVID J. MALAN: Ja.
Ja.
OKAY.
Så kan jeg holde din telefon for et øjeblik?
Så forhåbentlig hvis du adgang det, bør det se næsten ulæselige.
Det er still-- jeg mener, det er ulæselig på grund af det latinske.
Men det er også ulæselig for hvad anden grund?
Ligesom, hvad mishager dig om dette?
PUBLIKUM: Den er lille.
DAVID J. MALAN: Det er super, super lille.
Så hvordan kunne vi løse dette?
Det er super, super lille på Victoria telefon
og hvis du har trukket den op selv, sandsynligvis
lille på din telefon så godt, medmindre du har indstillinger for tilgængelighed aktiveret.
Hvad er det?
Du kunne bare knibe og zoom, som er brugbar,
men så du kun ser et par ord ad gangen.
Så vent et øjeblik.
Jeg ved, hvordan man kan løse dette.
Højre?
Jeg kunne bruge CSS, og jeg kunne ændre skriftstørrelse fra 12-punkt til 24-punkt.
Men den bivirkning af denne, naturligvis vil være nu,
på en stationær eller en bærbar computer, nu teksten er dobbelt så stor.
Og så ville den slags være rart at skelne mellem enheder,
og det viser sig der er måder at gøre det.
Der er flere forskellige måder, i virkeligheden,
hvorved bruger CSS og amatør funktioner at vi ikke vil gå ind i detaljer,
kan du hovedsageligt forespørge browseren og sige,
Hvis din skærm er mindre end denne mange pixels, bruge denne skriftstørrelse.
Hvis din skærm er større end dette mange pixels, bruge denne anden skriftstørrelse.
>> Du kan være endnu mere avanceret endnu.
Hvis du nogensinde har besøgt en webside,, på et skrivebord,
har en stor menu måske ud til side, og derefter alt indhold
er til den side af det menu-- der er slags en fælles paradigme.
Menu på venstre, indhold på højre eller omvendt.
Ikke virkelig arbejde på mobil, når din Skærmen er kun så mange pixels bredt.
Så mere almindelige på mobile er, din menu vil pludselig få
kollapsede, og du er nødt til klikke på en knap for at se det,
eller hjemmesiden vil sætte menuen over det og sætte indholdet under den.
Og du kan gennemføre disse ting på flere måder, også.
Du kan spørge dine programmører, hey, hold, helst
du ser en HTTP-anmodning fra en Android enhed, en Microsoft-enhed, en Google
enhed, en Apple-enhed, skal du bruge denne skriftstørrelse og bruge denne menu layout,
ellers bruge denne standard større layout.
>> Nu, ved hjælp af hvad grundlæggende teknik i dag
kunne ingeniørerne bruge at vide, om det er
en iPhone, en Android-telefon, en bærbar computer, en desktop besøger virksomhedens server?
Hvori de får disse oplysninger?
>> PUBLIKUM: Header?
>> DAVID J. MALAN: Ja, HTTP header.
Så hver HTTP-anmodning, der kommer fra deres kunder til deres servere
omfatter, indeni, virtuelle kuvert, en hel masse
af HTTP headers, hvoraf den ene er browseren og operativsystemet
selv, hvis du holder til at detaljeringsgraden.
Nu er det en kryptisk udseende streng, men der findes software, der vil bare
forenkle det, og du kan bare spørge i programmering code-- PHP, Java, C ++,
whatever-- hvad telefonen er denne-- hvilken enhed er denne bruger bruger?
Og så kan du sige, vise dem denne udgave af hjemmesiden, hvis det er en telefon.
Vis dem denne version af hjemmeside, hvis det er en bærbar eller stationær.
Men du behøver ikke engang server-side kompleksitet.
Du kan gøre selv den simpleste ting.
>> Jeg har tænkt mig at gøre dette.
Jeg har tænkt mig at gå videre ind i min Cloud9 miljø,
og jeg har tænkt mig at tilføje et tag at du så i Google før.
Det hedder metatag.
Og jeg husker aldrig denne ene, så Jeg har tænkt mig at omskrive det her.
Meta name = "viewport" og derefter content = "width = enhed bredde, intital
skala = 1 "og det er det.
>> Så det kan lige så godt være ligesom en magisk besværgelse.
Det er ikke alt, klar, men det har noget at gøre med den viewport,
og viewport er bare kroppen af ​​en webside, den rektangulære region,
definerer det meste af siden.
Og det er bare at fortælle browseren, ved du hvad?
Gøre bredden af ​​denne side effektivt lig med enhedens bredde.
Med andre ord, ikke antage, at du har slags ubegrænset plads.
Antag, at du kun har så meget plads som selve enheden er stor.
Og så nu, hvis jeg genindlæse denne i min browser, ser jeg ingen ændring.
Men hvis jeg gjorde dette correctly-- og lad mig krydser min fingers-- hvis du alle
genindlæse dine telefoner, gør du se en overbevisende forandring?
Ja, er at--
>> PUBLIKUM: [uhørligt]
DAVID J. MALAN: Ja.
OKAY.
Så velsagtens mere læsbar nu?
Stadig lille, for at være fair, men ikke så lille som at være uhåndterlige.
Og jeg kunne sikkert tilsidesætte denne videre med CSS eller på serveren side,
men i stigende grad, hvad du er se er flere og flere funktioner
føjes til klientsiden environments--
JavaScript, som vi vil diskutere i morgen, CSS, og HTML-- så
at alle disse forespørgsler kan gøres på klienten
således at genere den server en masse mindre og ikke
at nødt til at holde op med, for eksempel den konstante stormløb
af nyt operativsystem-system versioner, nye browserversioner.
Du kan bare lade browseren spørger enheden, hvor stor er du,
og derefter foretage noget logisk beslutninger baseret på det.
Men vi vil se flere muligheder for logiske beslutninger
i morgen i forbindelse med af et programmeringssprog.
>> Så nogen spørgsmål, så, på webudvikling?
I dag er ikke webprogrammering, per se, da de fleste alt, hvad vi gjorde
var meget æstetisk, hvis du vil.
Der er ingen beslutningsprocessen i den kode, vi har skrevet,
og så det er derfor, HTML er et markup sprog, ikke et programmeringssprog.
Men i morgen tager vi et hurtigt kig, i sidste ende,
på JavaScript, som er et virkeligt programmering
sprog, der lader os gøre lidt mere.
>> Nogen spørgsmål?
Nå, lad mig foreslå to muligheder valgfri for hjemmearbejde.
Man is-- disse Cloud9 konti vil ikke udløbe.
Du er velkommen til at bruge dem til at rode med.
Det er gratis serviceniveau.
Indse, at hvis, når du opretter din arbejdsplads, du gjorde det offentligt,
der betyder, at alle på internettet kan se, hvad du skriver.
Så måske bare overveje ikke pinligt dig selv
hvis du lægger dit første web side derude offentligt uheld,
men ingen kommer til at ved at se der alligevel.
>> Og to-- lad mig kaste op denne URL så godt,
især hvis du kom i dag et lidt mindre behagelig end andre,
usikker på, hvad alle disse ting betyder.
Erkend, at meget mere af denne video, som både er en god måde at falde i søvn
og også til at grine, mens Herved har også
en masse samfundsmæssigt interessant og sikkerhedsrelaterede relevante diskussioner
deri fra John Oliver, omend en komiker.
>> Men hvis der ikke er flere spørgsmål, det bringer os til receptionen.
Så hvorfor jeg ikke tænde for musikken.
Der bør være drikkevarer og snacks udenfor.
Jeg er glad for at blande sig, så længe folk gerne vil,
besvare spørgsmål mere en-til-en.
Men ellers, er du velkommen at tage ud på noget tidspunkt,
og vi vil se dig igen i morgen formiddag til lidt mere.
Okay, tak.