DAVID J. MALAN: Greit.
Vi er tilbake.
Så målet med denne siste økten er å innføre noen flere konsepter
men også gi alle en sjanse til slags strekke fingrene
og faktisk gjøre noe litt hands-on.
Målet er ikke å snu oss alle inn webutviklere
på noen måte, men egentlig bare for å gi deg en smak av noen
av de grunnleggende konstruksjoner av hva går inn i web-programmering og i dag web
utvikling, så statisk side av things--
ingen logikk, ingen programmering språk, bare statisk innhold.
Og det vil gi oss en mulighet å faktisk se hva en web server er,
Se hva som en HTML-fil er, se hva det er HTTP faktisk tjene opp.
Men før vi dykker i, noen retrospektive spørsmål om cloud computing
eller sikkerhet eller noe midt i mellom?
>> Nei?
Greit, vel, la oss gjøre dette, bare i tilfelle
prosessen med å registrere deg for noe tar noen få minutter.
Vi skal la den gjøre det i bakgrunnen.
Kom igjen, hvis du kan, til denne nettadressen her-- c9.io.
Dette er en tredjeparts service-- plattform som en tjeneste, hvis du will--
som kommer til å invitere deg å registrere deg for en konto,
og det kommer til å gi hver av dere en konto i den såkalte nettskyen
på andres infrastruktur, et firma som heter Cloud9.
Men hva er fint om dette er at de gir deg
en tilnærming av en faktiske reelle utvikling
miljø, om enn i sky og i en nettleser,
og vi vil bruke dette til å faktisk eksperimentere litt i dag.
Og deretter gå videre og bare navigere veien til registreringsprosessen
hvis du kunne.
Så vi måtte bruke dette i klassen Jeg underviser for alle våre studenter,
både på campus og off nå, og det er erstattet hva historisk
var ellers nedlastbar programvare.
Så det du får tilgang til er en av disse virtuelle maskiner
hovedsak, som jeg beskrev tidligere.
Så dette selskapet Cloud9 sannsynligvis leier fra en tredje party-- faktisk
i dette tilfellet, Google-- en hel haug av virtuelle maskiner
at de en eller annen måte hogge opp i illusjonen av individuelle servere
at hver av oss har full kontroll over.
Det er ikke helt riktig å si at de er virtuelle maskiner,
skjønt, fordi det Cloud9 faktisk bruker
er en noe nyere teknologi kalt containerization.
Og la meg ta dette bildet her for å male dette bildet.
>> En beholder er, hvis du husker bildet
fra tidligere, litt lysere vekt enn en virtuell maskin.
Faktisk, mens siste Da vi snakket om det
å være en drifts system og en hypervisor
og deretter gjesteoperativsystem, gjest operativsystem, gjest drifts
system, på toppen av din fysisk maskinvare,
forskjellen med denne nyere teknologi, containerization,
er at de alle en eller annen måte dele det samme operativsystemet.
Men de fortsatt lage illusjonen av alle
har sin egen eksklusive administrative rettigheter og filer
på serveren.
Men det er mindre programvare i mellom deg og maskinvare.
Resultatet av dette er, i teori, en høyere ytelse,
fordi du bruker eller sløse færre ressurser
på den såkalte virtualiseringslaget.
Så dette kalles containerization av natur
ved hjelp av en teknologi som kalles Docker, som er veldig mye som kommer til sin rett.
Og dette er noe som ingeniører i bedriften
kan slags liksom begynne å snakke om snart hvis de ikke allerede har gjort,
men det er absolutt ingen grunn til å hoppe på noen bandwagons.
>> Så med det sagt, hva du sannsynligvis se nå
er en skjerm som ser litt ut som dette.
OK.
Og bare kalle meg over hvis ikke.
Og hvis Slik: Jeg kommer over hvis ikke.
Gå videre og klikk på den store pluss å skape en arbeidsplass,
og du vil se en skjerm som dette.
Du kan ringe arbeidsområdet nevne noe du ønsker for nå.
Og bare faktisk for enkelhet, gå og-- vel, noen av dere
allerede har arbeidsområder.
Kall det hva du want-- virksomhet, Harvard, torsdag, uansett hva du ønsker.
Du trenger ikke en beskrivelse.
Du kan la det private, med mindre du allerede har en haug med arbeidsområder.
Hvis du er tvunget til å gjøre det offentlig, det er greit for dagens formål.
Også her er en av de oppgraderingsmuligheter.
Du får en privat arbeidsplass ved misligholde. Men hvis du vil ha mer,
du må betale for mer.
Hvis ikke, de tvinge deg å gjøre arbeidet ditt publikum.
Men det er greit, fordi de også målrette denne på åpen kildekode-miljøer
å oppmuntre folk til faktisk samarbeide.
>> Og det siste som er viktig, skjønt, er, etter at du velger et navn
og etter du velger privat eller offentlig, Klikk HTML5, den store oransje ikon
andre fra venstre, og klikk deretter Opprett arbeidsområde.
Og det vil sannsynligvis ta et minutt eller så,
men du vil da ha en miljø, når du
gjøre det, som ser ut som minner om hva jeg har på skjermen her nå.
Men, igjen, kan det ta et minutt eller mer for å få til dette skjermbildet
når du har klikket Opprett arbeidsområde.
Men bare flagg meg over hvis du vil at jeg å ta en titt på noe eller råd.
Greit.
Så jeg kommer til bakgrunns dette for nå.
Ring meg over hvis du synes å har noen tekniske problemer.
Men, igjen, kan det ta litt for at det skal åpnes.
Og la oss gå videre og snakke om hva det faktisk betyr å lage en nettside,
hva HTML er, og hvordan alt dette Nå sammenkoblinger som vi begynner
å faktisk bruke noe av teknologien.
Så det viser seg at jeg kan gå på min lille Mac her,
åpne et enkelt program som heter TextEdit, eller på Windows jeg kunne
åpne noe som kalles Notepad.exe.
Og jeg kunne bare rett og slett gjøre noe Slik: "Hei, verden."
Og da kunne jeg lagre dette som hello.txt Så ingen magi der.
Dette har ingenting å gjøre med web programmering, ingenting å gjøre med HTML.
Bare å lage en enkel tekstfil.
Men det viser seg at en web side er bokstavelig talt nettopp det.
Det er en enkel tekstfil som inneholder tekst at du kan skrive på tastaturet,
men det vanligvis, men ikke alltid slutter i ikke .txt men .html eller .htm.
Og du ikke bare skriv ord i filen.
Du faktisk må bruke ting som kalles tags eller, mer generelt, noe
kalt kodespråk.
>> Så jeg kommer til å raskt skrive og deretter forklare følgende.
Jeg kommer til å først skriver dette, som sier:
hei, nettleser, her kommer en nettside skrevet i HTML.
Og disse to tingene sammen si hei, Nettleseren er følgende faktisk HTML.
Hei, nettleser, her kommer hodet eller øverst på siden min.
Hei, nettleser, innsiden av toppen av min side, sette en tittel som er "hallo,
verden."
Hei, nettleser, etter hodet mitt side, her kommer teksten på siden min.
Og hei, nettleser, kroppen min side må også si, "hello world".
Så hva er de viktigste detaljene her?
Dette er hva som er generelt kalles en doc-typedeklarasjon,
og, ærlig, det er en liten vanskelig å huske dette først.
Du bare slags kopiere den.
Dette er den formelle måten for å si hei, nettleser,
Jeg bruker HTML-versjon 5 som kom ut noe nylig.
Det er en magisk besvergelse at noen mennesker med en dårlig følelse av design
bestemte seg for å sette på toppen av filen.
Selv om det er en litt uforståelige, det er alt
det means-- hei, nettleser, her kommer med versjon 5 av HTML.
>> Resten av dette har vært med oss for noen tid nå, historisk,
men det har vært under utvikling, og det er sannsynligvis fått en litt enklere.
Legg merke til noen kjennetegn av det jeg har uthevet.
Det er disse tingene med vinklet brackets-- venstre brakett
og høyre brakett.
Og legg merke til symmetrien her.
Og etter symmetri, jeg mener, akkurat som jeg har denne start tag her eller en åpen tag
om du vil, her nede har jeg en sluttkode eller en slutt tag som er
annerledes bare i den utstrekning det har denne slash på begynnelsen av ordet
HTML.
Og du kan tenke på dette som jeg var tilfeldig
foreslår før, hei, nettleser, her kommer noen HTML.
Og omvendt, hei, er nettleseren som det for HTML-- start og slutt.
>> I mellomtiden hei, nettleser, her kommer hodet på siden min.
Hei, er nettleseren som det for hodet.
Hei, nettleser, her er kroppen min side.
Hei, er nettleseren som det for kroppen.
Og innsiden av det er noen vilkårlig tekst for nå.
Og inne i hodet, i mellomtiden, er en oppkonstruert men merket,
så å si, tekst som sier, tittelen på siden min skal være "Hei, verden."
Nå, for nå kan du anta at nettlesere
har only-- eller, rettere sagt, websider har bare to parts-- hodet og kroppen.
Og hodet er vanligvis bare som menylinjen, ting
egentlig bare på toppen.
Og kroppen er tøff nok av siden, alt i det store rektangelet
som fyller skjermen.
Så jeg kommer til å gå videre og gjøre dette.
Jeg kommer til å gå videre og Klikk Lagre, File Save.
Og jeg kommer til å spare dette som hello.html,
og jeg skal bare sette den på skrivebordet mitt.
Og jeg kommer til å gå videre og klikk på Lagre.
Og notice-- min Mac på minst er roping på meg.
Er du sikker på at du vil gjøre dette?
Og jeg kommer til å si, ja, bruke HTML.
Jeg vet bedre i dette tilfellet.
Og nå kommer jeg til å gå til skrivebordet mitt hvor jeg har denne filen plutselig.
Og jeg kommer til å dobbeltklikke den.
Og du vil legge merke til at ved å standard, Chrome åpnet opp.
Det er fordi det er standard nettleser.
Og det bare sier, "Hei, verden."
Men det står "Hei, verden "på to steder.
Legg merke øverst til venstre.
Ganske vanskelig å gå glipp av det.
Det er stor og fet.
Og hvor ellers virker det å si: "Hei, verden"?
>> PUBLIKUM: Fanen.
>> DAVID J. MALAN: Ja, selve fanen.
Så når jeg sa leder av side er alt opp top--
og dette er faktisk tittelen.
Det er bare i den kategorien her.
Og jeg kan trekke denne kategorien ut for ikke å forvirre.
Dette er bare en enkelt fane nå, og faktisk vi se "Hei, verden"
opp her og "Hallo, verden" her nede.
Så ganske grei.
Men det er også ganske enkel.
Og, faktisk, jeg zoomet inn.
Jeg kan endre skriftstørrelsen bare å foredle for tilgjengelighet.
Men la oss nå gjøre noe litt mer interessant.
>> Jeg kommer til å Vær så god Uff, la meg komme tilbake til min tekstfil.
Jeg kommer tilbake til min tekstfil, og jeg kommer
å endre dette og si "Hallo, Disney World."
Spare.
Og gå tilbake til min nettleser og klikk Reload.
Og nå, selvfølgelig, det sier "Disney World."
Og jeg kommer til kunstig zoome i så er det lettere å se.
Så nå, dessverre, jeg slags ønsker to-- faktisk, det er en Mac-funksjonen.
Jeg ønsker å klikke på Disney World og gå et sted som disney.com,
men som ikke fungerer.
Så en grunnleggende læresetning av nettet er hyperkoblinger, lenker som går andre steder.
Så hvordan gjør jeg det?
Vel, jeg kan bare si, "Hei, http://www.disney.com."
Lagre dette.
Last.
Men dette også, ikke klikkbare.
Og hva er fint her, selv om dette er ikke funksjonell ennå,
er at det virker som om Nettleseren bokstavelig talt bare gjør
det jeg ber den om.
Så hvis jeg bare skriver inn en nettadresse som dette, det bare kommer til å vise meg nettadressen.
Jeg trenger å bruke koder eller markering språk for å faktisk fortelle
leseren til å gjøre enda mer.
Så jeg kommer til å gå videre og slette dette for et øyeblikk.
Og jeg kommer til å si hei, leseren, starte et anker her,
en link så å si.
Og hyper-referanse, reisemålet av at ankeret, bør denne nettadressen.
Og legg merke til mine sitater.
Jeg kunne bruke enkle anførselstegn, også, men du må være konsekvent,
og jeg ville vanligvis bare bruke doble anførselstegn for å holde det enkelt.
Legg merke til jeg kommer til å lukke taggen.
Og så her kommer jeg å si, "Disney World."
Og nå trenger jeg noen symmetry-- åpen brakett, / a, lukket brakett.
>> Så hva har jeg introdusert?
Vi har hatt noen tags allerede.
HTML, Head, tittel, Body, er alle tagger, så å si,
med åpne og lukkede kolleger.
Men legg merke til, er denne typen av fundamentalt forskjellig.
Dette er hva vi kaller i HTML et attributt.
Og et attributt er bare en nøkkelverdi-par.
Dette er en vanlig ting i datamaskin science-- nøkkelverdi-paret.
Det er liksom verktøy av handelen.
En nøkkel og en verdi.
Et ord og litt til andre ord eller ord.
Og i dette tilfelle er nøkkelen href, og verdien er at full URL.
Og hva en egenskap gjør er det påvirker atferden til en tag.
Og i dette tilfellet, må vi påvirke oppførselen til ankerkoden,
fordi vi trenger å forankre denne linken til et sted.
Og hvordan du gjør det er ved hjelp av attributtet.
>> Så jeg kommer til å gå videre og lagre filen nå.
Gå tilbake til nettleseren min og reload.
Og voila, har vi nå Begynnelsen av en legitim nettside.
Super-enkel, men hvis jeg sveve over dette-- varsel i nederste venstre hjørne,
det er super-liten.
Men du ser www.disney.com.
Og hvis jeg klikker på den, ja dette visper meg bort til disney.com.
Nå, nysgjerrige ting her er at det ikke er
den best-- den mest salgbare URL, men det er greit, fordi denne filen ikke
eksisterer på World Wide Web.
Det eksisterer som en lokal fil i tilsynelatende mine Brukere directory-- / jharvard--
for John Harvard-- / desktop.
Men det har en nettadresse.
Det skjer bare for å være lokale.
Dessverre kan ingen av du besøker dette, fordi hvis du skriver denne nettadressen,
du ville være å fortelle nettleseren din, se etter en fil som heter hello.html
på harddisken.
Og, selvfølgelig, med mindre du har fulgt sammen manuelt,
det er ikke til å eksistere der.
>> Så det er greit.
Vi trenger fortsatt en vei, til slutt, å få denne filen inn i nettet,
men la oss erte hverandre et par sikkerhetsmessige konsekvensene av det vi nettopp
så og knytte det tilbake til den tidligere diskusjonen fra i morges.
Det viser seg at, hvis en Nettleseren bokstavelig talt bare gjør
det jeg ber den om, og det virker å være slik at en ankerkode er
påvirket av verdien av dette attributt kalt href
men det viser denne tekst, vil dette virke
å antyde at jeg kunne sette URL på begge steder og legg
og nå ser det URL og gå til nettadressen.
Legg merke til, hvis jeg holde musepekeren over nederste venstre, Jeg faktisk kommer fortsatt til disney.com.
>> Så hvis du noen gang har vært phished-- P-H-I-S-H-E-D--
med en av disse falske e-poster fra som PayPal banken din,
du har sikkert fått linker inne av e-post som du leser det
forteller du klikke her for å gå confirm passordet eller bekrefte din fødselsdato
eller sosial eller noe sosialt ingeniør du å avsløre
informasjon.
Vel, jeg kunne slags ta nytte av dette, kunne ikke jeg?
Jeg kunne si noe som, www.paypal.com.
Og i stedet for disney.com, jeg kunne gå til, som, badguy.com.
Last.
Og hvor lett er det å lure, spesielt en ikke-teknisk-leser
eller en cursorily leser leseren enn å klikke
en link som dette, som hvis jeg klikker it-- Jeg faktisk ikke ønsker å gå badguy.com.
Jeg vet ikke hva som faktisk er der.
Så paypal.com, varsel, er hva den sier det kommer til å,
men selvfølgelig, hvis jeg ser ned super-lav, er det litt uskarpt,
men det sier badguy.com.
Det er den eneste fortelle akkurat nå at jeg kommer til feil sted.
Og da jeg sa tidligere at bankene bør ikke oppfordre eller tog
brukere til å klikke linker, dette er bare en manifestasjon av det.
Og det er så enkelt.
Du er nå en motstander hvis du gjør noe sånt som dette
og prøve å lure en bruker til å besøke nettstedet ditt.
Men for nå, vil vi holde ting rent og pent.
Vi kommer til å gå videre og spole disse endringene.
Oppdater siden.
Og jeg går tilbake til disney.com.
>> La oss se om vi ikke kan erte Dette leilighets litt mer.
Så "hallo, Disney World."
Jeg kommer til å si her nede.
Kanskje jeg kommer til å gjøre noen plass.
"Vi håper du trives!"
Spare.
Last.
Det er ikke rea-- det er ikke hva jeg skal, ikke sant?
Jeg mener, hvis jeg behandler min tekst fil som en tekstbehandler,
hva gjorde du håper vil skje her?
Ja, jeg føler det bør være et linjeskift her,
så det føles buggy på noen måte.
Men det er faktisk bevisst, fordi på samme måte som før,
leseren er bare kommer til gjør det du ber den om.
Jeg har ikke fortalt det til å bryte linjene.
Jeg har ikke fortalt det til å gå ned, selv skjønt, intuitivt, jeg føler at jeg gjorde.
Så det viser seg at vi trenger litt mer markering,
og jeg kommer til å fikse dette på følgende måte.
Jeg kommer til å forord denne første hallo med det som kalles et avsnitt tag.
Og så kommer jeg til å gå videre og pakk denne andre setningen
i en annen paragraf tag, selv om de er super-korte avsnitt.
Nå kommer jeg til å redde.
Last.
Og nå har vi at plass, og vi liksom
har semantikk to separate avsnitt.
>> Det er alt fint og bra, men det ville være fint å legge til et bilde til denne siden
så jeg kommer til å lete etter Mikke Mus på Google Images.
Og bare for moro skyld, jeg er kommer til å ta dette bildet.
Jeg kommer til å gå videre nå og gripe inn nettadressen til dette bildet,
selv om det er annerledes måter å gjøre dette.
For nå er jeg bare kommer til å kopiere URL.
Jeg kommer til å gå tilbake til min tekst fil, og jeg kommer til å si her,
img src = quote unquote som URL, super-lang.
Og da forestillingen om en Bildet er litt annerledes.
Det er egentlig ingen forestilling om start et bilde og slutter et bilde,
som en start tagge en slutt tag.
Så det føles litt rart å meg semantisk å gjøre dette,
å ha en nær-bildekode.
Det er ikke feil.
Det er helt riktig, og det er oppmuntret,
men det er stenografi notasjon.
Jeg kan slags samtidig åpner og lukker den samme koden,
og som vil gjøre nettleseren lykkelig.
Så det er bare en liten mer konsis for ting
som konseptuelt egentlig ikke fornuftig å starte og slutte.
De bare er der, eller er de ikke.
>> Så jeg kommer til å spare dette og gå tilbake til min "Hei, verden" side og reload.
Og det er litt ute av kontroll, fordi det bildet er faktisk
en litt stor, men det er OK.
Jeg kunne endre størrelsen på det i et program.
Eller vet du hva.
Bare for å demonstrere, jeg er kommer til å faktisk si
at bredden av denne tingen bør bare være 200 piksler, 200 prikker.
La meg gå videre og lagre og laste, og nå siden
ser litt mer fornuftig.
Men legg merke til mønsteret.
Vel, jeg har på en måte lært deg alt av HTML i noen forstand, i det minste
konseptuelt, fordi all HTML er er disse tags-- åpne koder, lukket koder,
og egenskaper som endre sin atferd.
Og tilsynelatende, hver tag kan ha null eller ett
eller to eller flere attributter, hver av som gjør noe litt annerledes.
Nå, hvordan vet du hva som finnes?
Du bare lytte til noen som meg fortelle deg hva som finnes,
eller du bare Google rundt for en tutorial på HTML, og det er virkelig dette enkelt.
>> Sannelig, da jeg var en undergrad år siden, og lærte HTML,
en av min matte undervisning assistenter nettopp tilbrakt
litt tid veiledning meg for som en halv time, en time,
og da jeg var på vei.
Jeg var på vei mot å gjøre de mest grusomme nettsteder noensinne,
som, tilsynelatende, har jeg ikke virkelig kommet lenger.
Men poenget er at når du forstå disse enkle ideas--
hvis uforståelige text-- men disse enkle ideer om å starte en tanke
og lukke en tanke, holde alt pent balansert,
ser noe opp, modifisere oppførsel av dette merket, det er egentlig alt
det som skal til.
Og faktisk, hvis vi nå gå til noe som google.com-- faktisk,
la oss gå et sted litt mer reasonable-- stanford.edu.
Og jeg kommer til å gå til Vis, Utvikler, Vis kilde.
Det er stygt, men notice-- og jeg skal zoome inn varsel
noen ting som er kjent allerede.
Det er dette opp her, som er en nettleser.
Her kommer HTML5.
Det er HTML.
Angivelig, det er en tilskriver at jeg ikke
bruker som angir språket på siden,
og dette kan hjelpe med automatisk oversettelse og sånne ting.
Her er hodet på siden.
Her er tittelen på Stanford side.
Det er et merke jeg ikke snakke om yet-- Meta tag.
Det er bare en slags bakgrunnsinformasjon.
Det hjelper med SEO, eller søkemotor-optimalisering,
eller Google-søkeresultater eller lignende.
Men hvis vi holde utkikk, holde ser, her er Body tag.
Og det er bunter av andre koder vi ikke har snakket om ennå.
Men Div er en for en divisjon på siden.
Det er som en usynlig rektangel hvis du slags ønsker å mentalt
dele siden inn ulike enheter online.
Og så mange divs jeg se, noe som kalles klasse,
men vi vil komme tilbake til det.
>> Dette er interesting-- Forms.
Skjemaer er over hele nettet.
Enhver søkefelt du er inne har brukt er en form.
Og så, la oss faktisk se.
Form.
Handling.
Handlingen i dette skjemaet, uansett historiske årsaker, er at nettadressen.
Metode er "post".
Viser seg at HTTP-forespørsler kan bruke verbet "bli", som vi så før,
eller "post".
Og vil du se en forskjell av dette i et øyeblikk.
La oss faktisk se hva dette er.
La meg gå tilbake til Stanford side.
Hvilken form de snakker om, tror du?
Hva hopper ut av deg?
>> PUBLIKUM: Søk-boksen.
>> DAVID J. MALAN: Ja.
Så opp øverst til høyre her er denne søkeboksen.
Og det er hvordan de implementeres it-- en kode som er bokstavelig talt åpen brakett form.
Og så la oss søke etter noe.
La oss søke etter en kompis av mine-- "Nick Parlante."
Gå.
Og selvfølgelig, det gikk til en litt annen nettadresse.
La meg gå tilbake hit.
La oss søke etter "kurs".
Pokker.
Gikk til en annen nettadresse.
Så, Stanford og legger litt magi at de ikke tar meg til URL
som vi så i handling attributt der.
Men denne formen her er implementert rent ved hjelp av denne markup her, disse kodene.
Faktisk, her er inngang for den type søk som du ønsker.
Her er en inngang for en annen type søk.
Her er inngangen for selve strengen.
Og så målet er ikke å vikle våre sinn rundt alle disse kodene
men bare for å se.
Det er bare å åpne og lukke koder og ser ting opp.
Ja?
Victoria?
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Det er et godt spørsmål.
Det er litt vanskeligere å se.
La meg komme tilbake til spørsmålet i løpet av få minutter
når vi ser på noe som kalles CSS, eller Cascading Style Sheets,
og vi kan prøve å antyde så mye fra siden.
Så hvis vi nå ta en titt på google.com, la oss se hva deres side ser ut.
Du ville they're-- som er søt i dag.
OK.
Ferdig.
Greit, så View Source.
Du tror Google har veldig hyggelig kildekode.
Så, tilsynelatende, er hva som skjer her?
Og faktisk, dette er ikke engang HTML.
Dette er noe som kalles Javascript.
Og la oss fortsette og fortsette.
Jeg vet ikke engang hvor siden starter.
Jeg kommer til å bruke Command F, åpen brakett HTML.
Greit, det er det.
Jeg fant starten av siden, og det er så mye ting i her.
>> Hva som faktisk skjer?
Vel, vet du hva, vi kan rydde opp dette.
Hvis jeg i stedet gå til denne Inspiser verktøylinjen, denne spesielle diagnostiske verktøy,
og gå ikke til nettverk, hvor vi holder det gående i dag,
men hvis jeg går til Elements, hva som er virkelig fint
er at en nettleser har mye mye bedre øyne enn jeg gjør.
Og leseren kan lese at rot av en web-side,
at HTML mail vi bare sett på, og det kan
analysere den eller lese og analysere den og reformatere den
i et hyggelig menneske-vennlig måte.
Så det jeg ser nå i dette skjermbildet her
henhold Elements, nøyaktig samme innhold, men de har rykket inn alt,
de har fargelegges det, men Det er nøyaktig samme tekst
som jeg lastet ned fra serveren.
>> Og hva er fint nå er at jeg kan se i kroppen, for instance-- varsel,
siden er fortsatt sammensatt for bare et hode og en kropp,
og jeg kan hierarkisk dykke her.
Legg merke til at Google ser ut til å ha å divs-- denne og denne.
Jeg kan utvide den.
Det er en hel haug med andre divs.
Så det er litt komplisert.
Men vent.
Dette virker så mye mer lesbar, relativt, enn dette.
Hvorfor er Google pinlig selv bare ved å sende
denne enorme rotet med kode av noe liksom bare for å gjennomføre noe
som ser så enkelt ved første øyekast?
Liker, hvorfor ikke de legge til flere områder?
Hvorfor gjorde de ikke trykk Enter som jeg gjorde?
Se hvor god jeg var på å skrive en nettside.
Jeg trykker Enter så flittig.
Jeg rykket så alt er så pen og lesbar.
Hvorfor ikke Google praktiserer det samme?
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Good.
Veldig rettferdig.
De har ikke noen person på Google manuelt
oppdatere hjemmesiden lenger.
Det er ikke 1999 lenger.
Så de har programvare.
De har andre verktøy som generere dynamisk de er HTML.
Selvsagt at koden selv ble skrevet av mennesker,
men realiteten er, det er ganske rimelig å si,
leseren absolutt ikke bryr seg hvor rotete koden er.
Men det er en enda mer overbevisende teknisk årsak
at Google distribuerer deres HTML kode i en slik slurvet, tilsynelatende
overveldende måte alt pakket sammen med meget lite måte-- meget lite
i veien for formatering som jeg gjorde.
>> PUBLIKUM: [uhørlig]
>> DAVID J. MALAN: Raskere?
Hvorfor?
Og hva sa du, Lydia?
Raskere?
Hvorfor raskere?
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Det er ingen plass til å lese.
Yeah.
Så tenk på hva en plass.
Så hvert tegn på tastaturet tar noen mengde plass til å representere,
enten fysisk, liker det tar opp så mye plass,
eller annen måte under hette, som krever minne.
Og som en aside-- og vi vil snakke mer om dette tomorrow--
hvert tegn på tastaturet vanligvis krever 8 biter, eller en byte.
Så et mønster av 8 nuller eller seg, eller bare en byte, som vi
mennesker vanligvis ville si.
Så det er liten, men det er fortsatt ikke er null.
Det er fortsatt en viss mengde plass.
Så hvis en ingeniør eller Google treffer space bare én gang, og antar
Google-- det er super-popular-- anta at en milliard mennesker
besøke deres hjemmeside en dag, eller et antall personer
besøke hjemmesiden en milliard ganger om dagen,
hvor mange flere byte har som programvare ingeniør bare koste Google
ved å treffe sin mellomromstasten en gang?
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Ikke fullt så ille.
Bare én byte ganger en milliard.
så a--
PUBLIKUM: 8 milliarder gigabyte.
DAVID J. MALAN: Ikke 8000000000.
8 milliarder bytes.
Men en gigabyte.
1 gigabyte vil være måleenheten.
Hvis han eller hun gjør to mellomrom, 2 gigabyte.
Tre gigabyte.
Høyre?
Det skalerer ligere.
Og så i tilfeller som Google, som, gitt, er ekstreme tilfeller,
det er andre problemer som oppstår bare ved å gjøre svært fornuftige beslutninger
eller tar svært enkle menneskelige handlinger, fordi det har denne forstørret effekt.
Slik at en av grunnene Dette ser så komprimert
er akkurat som Victoria said-- det var bare generert av datamaskiner uansett.
Så ingen big deal.
La leseren finne ut av det.
Men det også bevisst har ikke mye plass,
fordi plassen er ikke nødvendig.
Og plassen faktisk koster penger.
>> Det enten koster tid, fordi bare for å presse
at mye mer data ut av google.com hovedkvarter bare
har fått til å ta en viss mengde tid, selv om det er millisekunder
eller mikrosekunder, men som legger opp i løpet av så mange brukere, eller mer sannsynlig,
det koster sannsynligvis penger.
Google kobler sannsynligvis til noen andre i verden, en
av dem peering punkter, og hvis de har
noen form for økonomisk sammenheng hvorved sine data koster penger,
de kan like godt minimere hvor mye data
de spytter ut Internett-tilkoblingen.
>> Så det morsomme, men til syvende og sist eller kanskje betryggende ting,
er at selv om dette ser fryktelig overveldende, på slutten av dagen,
det er fortsatt de samme prinsippene som dette veldig enkelt siden her av en HTML
side.
Så bare for å oppsummere og slik at du har en kanonisk versjon hvis du ikke var
følge med ved valg her, her kan være den enkleste av nettsider,
så noe å leke med kanskje senere.
>> Vel, la oss innføre en par andre ideer nå.
Vi er i ferd med å introdusere noe som kalles en stil tag.
Vi kan stilisere denne siden i mer interessante måter.
Så mens HTML e-post handler om merking opp
dataene, liksom spesifisere til en leseren hvordan å strukturere dataene,
hvor du skal plassere det, CSS, eller Cascading Style Sheets,
er et andrespråk som generelt blir blandet med HTML
som vi vil see-- men vi kan rense som opp i en moment-- som tar
det siste mil, og det stylizes det.
Det blir fargene helt rett, skriftstørrelser akkurat,
posisjonering akkurat.
Det handler om estetikk eller formatering, ikke om
den grunnleggende data selv.
Og den enkleste måten å vise Dette er kanskje ved eksempel.
Så jeg kommer til å gå over til min enkel tekstfil.
Og i et øyeblikk, vil jeg lede oss gjennom prosessen
å gjøre dette selv.
>> Jeg kommer til å gå tilbake til min fil her og oppdater siden bare
for å bekrefte hvordan det ser ut.
Det er der vi er nå.
Jeg føler meg som barn ville nyte å ha litt farge på denne nettsiden.
Så jeg kommer til å gå opp her inn i hodet på siden.
Og jeg kommer til å gjøre stilen, / stil.
Og så innsiden av dette, kommer jeg å fortelle kroppen min page--
og denne formateringen er, på første øyekast, kanskje litt
merkelig, men konvensjonelle.
Jeg kommer til å si at bakgrunnen fargen på denne siden skal være grønn.
Og dette er dessverre liksom ikke den beste design.
Legg merke til at tidligere i verden av HTML,
Jeg sa at attributter er disse nøkkelverdi-par.
Noe lik sitat unquote "noe".
I en verden av CSS, som var designet av noen forskjellige mennesker,
de bestemte seg for at i deres verden, nøkkelverdi-par
ville være ordet kolon noe.
Så det er den samme ideen, skjønt.
Det å knytte en verdi med noen viktige som liksom
påvirker oppførselen til denne siden.
>> Og du kan sikkert gjette.
Hva er dette trolig kommer å gjøre selv om du har aldri
sett HTML eller CSS før?
PUBLIKUM: Endre bakgrunnsfargen.
DAVID J. MALAN: Ja, endre bakgrunnsfargen.
Og spesielt bakgrunnsfarge på kroppen.
Men i den grad det kroppen for nå er nettet
page-- det er den eneste under tittellinjen really--
det er trolig kommer til å påvirker det samme.
Så la oss se.
La oss lagre dette.
Gå hit og lesse.
Det er ganske heslig.
Og hva som skjer her er en bivirkning.
Jeg valgte nettopp dette bildet tilfeldig.
Hvorfor er det grønne ikke gjennomtrengende bak Mickey?
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Nettopp.
Det viser seg at bilder, pen mye alle bilder som vi kan bruke,
er alle rectangles-- av rektangler.
Selv om Mickey har noen kurver til seg selv og har en bakgrunn,
som bakgrunn må være noe.
Det må være hvit.
Det må være svart eller noe annet.
Det kan være gjennomsiktig.
Og faktisk, jeg kunne åpne Mikke Mus her
i et program som heter Photoshop eller noe lignende
og endre alle som hvit Bakgrunnen for gjennomsiktig,
så den grønne ville skinne gjennom.
Men det er noe jeg trenger å be for meg selv eller en grafiker
eller en designer på min selskap, for eksempel,
å gjøre, spesielt siden jeg bare lånt denne fra internett.
Men det er hvorfor dette skjer.
>> Så hva annet kan vi ønsker å gjøre?
Vel, vi vil kanskje si at vi håper virkelig du trives.
Og for å understreke, jeg vil ha for å gjøre denne sterke,
og så jeg vil si åpent sterk og lukke sterk og legg.
Og det er litt vanskelig å se på projektoren
men kanskje egentlig nå hopper ut på deg litt mer.
Så du kan legge kursiv i denne måte, fet vendt på denne måten.
Vi kunne endre fargene.
Faktisk, bare for moro skyld, jeg er kommer til å gå videre og gjøre dette.
Jeg vet egentlig ikke hvordan min avsnitt er så tett sammen,
så jeg kan gjøre noe som dette.
Jeg kommer til å fortelle leseren, endre alle ledd tag å ha,
la oss say-- faktisk, vet du hva, la oss justere den text-align, senter.
Og igjen, jeg vet at dette bare fordi noen lært det til meg
eller jeg kikket opp i en online referanse.
Så la meg lagre dette.
Og, ah, nå har jeg sentrert på bildet der.
Og faktisk, vet du hva, hvis Jeg flytter mitt bilde i et avsnitt
tag-- så en tredje ledd, selv om det ikke er tekst.
La oss lagre det og laste.
Nå siden begynner å se hva slags of-- Jeg mener, det er fortsatt ganske stygg,
men minst ser det ut som jeg har brukt to minutter i stedet for ett minutt
gjør det.
>> Og så, gradvis, kan vi gjøre disse estetiske endringer nå på siden?
Jeg har egentlig ikke endret data i side annet enn å legge ordet egentlig.
Jeg har lagt til metadata, hvis du vil.
Hei, nettleser, gjør Ordet "virkelig" fet.
Men dataene ikke er sterk.
Det er metadata.
Dataene er "virkelig".
Så vi har fortsatt noen av de samme begrepene som før.
Nå, selvfølgelig, er dette ikke på nettet, så jeg kommer til å gjøre en siste trinnet her.
>> Jeg kommer til å gå til hello.html og bare markere og kopiere dette.
Og nå skal jeg gå inn Cloud9, som
Jeg vil gå gjennom i løpet av et øyeblikk.
Og oddsen er vil du snart være, hvis ikke allerede, på en skjerm som dette.
Og la meg bare gi deg en rask gjennomgang av hva Cloud9 faktisk er.
Så igjen Cloud 9 er Dette skybasert tjeneste
som gir deg og meg illusjonen av å ha vår egen virtuell maskin
i skyen, teknisk en container i skyen,
at vi har full administrative rettigheter til.
Så i teorien, ingen ellers i verden har
tilgang til skjermen jeg er ser på akkurat nå,
bortsett fra kanskje folk som driver nettstedet,
fordi teknisk de har fysisk tilgang og så videre.
>> Så hva ser vi i dette miljøet?
Jeg kommer til å zoome ut, fordi det er litt lite.
Og la meg peke løpet her for bare et øyeblikk.
På venstre side av min og din skjermen, det er en fil nettleser til venstre.
Så like i ånden til Mac OS og Windows.
Disse er alle av filer i min konto.
Og som standard, hvis din konto er som min,
du vil se eller snart se helloworld.html og readme.md.
Over her til høyre, er dette hvor mine tekstfiler kommer til å gå.
Hvis du noen gang har brukt Microsoft Word eller Notepad eller TextEdit,
Dette er ordet mitt redigering filer kommer til å gå.
Og så er det mest uforståelige funksjon i dette miljøet
at vi ikke egentlig trenger å bruke er ned her kalles et terminalvindu.
Hvis du har brukt DOS fra yesteryear, dette er Linux
eller Linux tilsvarer DOS.
Det er et tekstbasert interface-- ingen museklikk, uten å dra.
Alt du kan gjøre er å skrive kommandoer, men disse kommandoene
kan opprette filer, flytte filer, åpne kataloger, nær kataloger,
gjøre en rekke ting.
Men for nå, vil vi bare bruke vår tid her oppe.
>> Og så la oss gjøre dette.
Hvis du er i denne miljø, som du bør
være hvis du opprettet et arbeidsområde allerede, gå videre og bare gå opp
til fil, New for et øyeblikk.
Og som vil gi deg en ny Kategorien her i midten.
Og jeg just-- og la oss gå videre og gjøre dette.
La oss gå videre og nå trenger Fil, Lagre og gå videre og kaller det hello.html,
må ikke forveksles med helloworld.html, som
kom med den nye gratis konto, som er bare et utvalg fil.
Du vil se det plutselig dukke opp, mest sannsynlig på venstre side,
og kategorien vil fortsatt være åpen.
Og la meg oppfordrer deg nå til å gjenskape denne filen eller noen varianter av disse.
Og hvis du kan ikke helt se det på skjerm, er denne identisk med skinnene
at du sannsynligvis har i en annen fane.
>> Så kort sagt, gjør ditt første web side, lagre den, og deretter i et øyeblikk,
Jeg skal vise deg hvordan du faktisk kan se dette.
Men endre minst én ting.
Endre Helloworld til noe av ditt eget valg,
slik at du er overbevist om at det er din fil og ikke den jeg nettopp laget.
Greit.
Og når du er ready-- no rush-- når du er klar,
gå videre og lagre filen når du har gjort disse endringene.
Og hvis du klikker på Kjør knappen opp toppen, dette
bør åpne en ny fane som vil fortelle du hva URL du kan besøke filen på,
men det kan ta en stund å quote unquote "start Apache", som
er navnet på webserveren.
Så vær forsiktig med å gjøre akkurat hva som er i filen slutt.
Så akkurat nå, vil jeg zoome inn.
Hvis jeg begynner å skrive åpen brakett HTML, varsel
det er å spørre meg å fullføre min tanke.
Og hvis jeg ferdig med min tanke, det gir meg automatisk den avsluttende koden.
Men forventningen så skal jeg treffe Enter, og deretter flytte inn der
og har hodet inni og så gjør jeg kroppen innvendig.
Og det er litt rart i begynnelsen, fordi det gjør jobben for deg,
men innser at til syvende og sist det sparer deg for tastetrykk.
Og i virkeligheten en meget vanlig funksjon av programmering miljøer i disse dager
både for webutvikling som dette og selve programmeringen,
som vi skal snakke om i morgen, er disse auto-fullføre funksjoner,
ting som bare tillater en programmerer eller en designer
å skrive færre tastetrykk til oppnå det samme.
Noen ganger er det bra, skjønt.
Noen ganger er det bare irriterende.
Og igjen, når du har transkribert lysbildet eller annen variant av denne,
du kan klikke på knappen Kjør opp toppen.
Og deretter i den nederste vindu, vil du bli informert
hva URL kan du besøke nettsiden din.
Mine, for eksempel, er på business-daharvard.c9users.io
og så videre.
Greit, så, la me-- noen spørsmål?
Eventuelle andre spørsmål om bare å få dette arbeidet før vi legge til funksjoner?
Og la meg foreslå, bare å få folk komfortabel--
fordi det er en ting å bare copy-paste blindt hva jeg har gjort.
Men bare slik at folk kjempe med minst en to-do,
Jeg kommer til å slå på litt musikk.
Jeg kommer til å foreslå en liste over ting du potensielt kan legge.
Og du kan sikkert bruke Google.
Og hvorfor gjør vi ikke bare foreslår at du prøver å løse
i det minste ett bestemt problem her.
Så i form av koder, la meg bruke dette her.
>> Egentlig, la meg sette det i en tekstlig form.
La oss si at blant de kodene vi kan bruke her er noen tags over her.
Vi har sett avsnittet tag.
Nå kommer det til å auto-fullføre.
Avsnitt tag, ankerkoden.
La oss si at du ønsker å gjøre noe større,
slik at du kan like-- span tag kan hjelpe.
Vel, kanskje du trenger litt hjelp for at det i bare et øyeblikk.
Vi har sett div.
Du vil se det er tabellen.
Det noe som heter st, td.
Th, td.
Kom tilbake til det i et øyeblikk.
Hva annet kan være nyttig?
Det er sterk.
Det er lagt vekt, eller snarere em.
There's-- hva annet kanskje du har lyst på her?
Vel, vi tar en se på det sammen.
Form, som vi har sett.
Det er form.
Det er inngang og noen få andre.
Greit, så la oss gjøre dette.
For å svare på en Victorias spørsmålet, la meg først
bare sørg for at alle er i stand til å få sin hallo arbeider.
Så la meg presentere et par andre ideer.
Så får vi la folk løse noen problem på egenhånd.
Så får vi faktisk kommer tilbake til at oppfatningen av en form,
og vi vil faktisk re-implementere sammen front-end grensesnitt,
så å si, for Google selv.
Vi kommer til å bruke Google som bakenden og la dem gjøre det harde arbeidet, søking,
men vi vil gjenskape fronten Google og søkeskjemaet
som de har på sin egen hjemmeside.
Og så vil vi komme tilbake til disse kodene i bare et øyeblikk.
>> Så dette var det jeg foreslått bare et øyeblikk siden.
Vi kan legge til stilisering til en side inne i denne stilen tag,
og vi kan stylize bakgrunnen farge, tekstjustering,
enten det er sentrum eller til venstre eller høyre.
Men svært raskt du ville finne eller en webdesigner
vil finne at denne blir litt uhåndterlig,
fordi du gjør det som er kalt blande innhold
med presentasjon av disse.
Du blande din data og estetikk av disse.
Og faktisk, hvis du anser hva kommer til å skje over tid--
dette er en veldig liten nettside, selvfølgelig.
Men hvis jeg legger innhold til denne siden og jeg legge stil til denne siden
siden blir veldig fort lengre og lengre og lengre.
Og antar at jeg vil ha har en annen nettside som
deler noen av disse egenskapene.
Anta at min andre nettside for min site-- også, jeg vil ha alt sentrum,
og jeg ønsker også alt med en grønn bakgrunn.
Jeg er ganske mye nødt til å kopiere og lime inn noen av disse linjene
inn i den andre fil, som føles bra.
Det vil løse problemet.
>> Men hva om jeg vil ha en tredje siden eller en 30 side eller en 40-side?
Nå kommer jeg til å bli kopiert og lime mye likt kode
i flere filer.
Og så anta at Jeg bestemmer meg eller jeg er blitt fortalt,
hei, vi bruker ikke en grønn bakgrunn lenger.
Vi kommer til å begynne å bruke oransje.
Hva har du å endre?
Vel, må du endre stilen fra grønt til oransje i hvor mange steder?
Som 30 eller 40 plasser.
Det er kjedelig.
Det er utsatt for feil.
Det er en rekke årsaker der du ikke ønsker å indusere
den slags smerte for deg selv.
Og så ville det ikke vært fint om vi kunne ta det jeg nettopp
satt mellom disse to gule koder, disse stil koder,
faktor det ut, og sette alle mine stilisering i en sentral fil
at alle 30 eller 40 av mine andre filer låne fra eller annen referanse,
ikke ulikt nettverk diagrammer vi gjorde før?
>> Så hvis jeg går inn her, jeg kommer til å faktisk foreslå
at vi erstatter stil tag med noe
kalt link tag, som er forferdelig, forferdelig navngitt,
fordi du ikke bruker link tag for å skape det
vi mennesker kjenner som en link i en nettside.
For det, kan du bruke hvilken tag?
Hvordan skaper du en link i en nettside?
PUBLIKUM: The en.
DAVID J. MALAN: The en eller anker tag, som gikk til Disney før.
Koblingen tag her sier dette-- lenke til en fil som heter
styles.css, forholdet til hvilken kommer til å være at det er min stilark.
Så dette er en av de S 'i CSS-- Cascading Style Sheets.
Stil sheet-- to av S 'i CSS.
Cascading Style Sheet.
Dette betyr bare, hei, nettleser, gå finne styles.css på den lokale serveren
og bruke den som din stilark, som betyr innsiden av den filen
kommer til å være hele stiliseringer som vi nettopp har gjort.
Og så hva denne filen kan se ut som dette er.
Og jeg vil bare gjøre dette på er en rask eksempel, fordi vi ikke trenger
å få for mye inn i ugress her.
Men hvis jeg kopierer dette, hva jeg foreslår er at en programmerer oppretter en ny fil,
lim i disse lines-- whoops-- lim i disse linjene,
lagre det som styles.css, og deretter, i den andre filen, slette alt dette
og erstatte den i stedet med denne link tag.
Slik at hvis jeg knytter href = "styles.css", forholdet skal være "stylesheet"
sluttkode.
Lagre det.
Gå tilbake til min Helloworld.
Last.
>> Bokstavelig talt ingenting har skjedd.
Det er en god ting, fordi det betyr at det er faktisk alt fungerer.
For å bevise så mye, antar jeg lage en skrivefeil, og jeg kaller dette "Styles.css"
med en stor S, som er feil, og legg.
Nå kan du se det fungerer bare ikke.
Nå, hvorfor?
Vel, la oss bruke en teknikk fra tidligere.
La meg gå videre og, i nettleseren min, i Chrome, jeg
kommer til å åpne opp den spesielle nettverk fanen som før,
og la meg laste siden på nytt.
Hva er du ikke overrasket over å se nå?
Eller kanskje du er overrasket over å se den.
Uansett, hva ser du nå?
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Det er ikke funnet.
Hvorfor er det ikke funnet?
Vel, Styles.css-- kapital S- finnes ikke.
Jeg misnamed det.
Enkel skrivefeil.
Men jeg får forståelig nok nå en 404, fordi serveren sier, hei,
det er ikke funnet.
Bokstavelig talt, jeg vet ikke hvor filen er.
Så som et resultat av leseren viser deg hva det kan,
rå innholdet på siden, som var en 200, HTML,
men stilisering kan ikke legges deretter.
Og dette er hva som menes med gjennomgripende.
Du kan liksom legge den etter, og den slags
foredler estetikk av websiden.
Og du kan selv overstyre de stiler med ennå andre stilark filer
hvis du vil.
Det er ikke funnet, men i dette tilfellet fordi selvfølgelig, jeg misnamed det.
Så jeg måtte fikse det først.
>> Så la oss gå videre og foreslå følgende.
La oss gå videre og gjøre dette.
Fra og med kanskje din Helloworld fil,
la meg bare invitere et par av funksjonen forslag.
Så, Victoria, ville at du skulle gjøre noen teksten større, ikke sant?
Greit, så vi kan gjør teksten større.
Og vi vil hver nappe ut bare ett problem å løse.
Gjør teksten større.
Jeg kommer ikke til å bry seg skriver dette når vi
har bullet teknologi rett over her.
Så noen problemer.
Så vi kommer til å prøve for å gjøre teksten større.
Greit.
Hva annet ville noen foreslå?
Hva annet kan vi ønsker å gjøre i en web-side?
La oss komme opp med en kort liste over ting
og deretter delegere til gruppe for å finne ut av dette.
>> PUBLIKUM: [uhørlig]
>> DAVID J. MALAN: OK, posisjon tekst på forskjellige sider av papiret?
Greit.
Noe annet.
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Det er det.
Så en gif er bare en annet filformat.
Vi brukte bare, hva, en png eller jpg sannsynligvis?
Vi brukte en jpg.
Hvis du er nysgjerrig, en overdreven svare på spørsmålet ditt
er en jpg brukes vanligvis for fotografier, fordi den støtter
millioner av farger eller 24-bits farger.
En gif er vanligvis brukt for, som, internett memes disse days-- animasjoner,
som animerte GIF-filer.
Men det skjer for å bruke en mindre farge palett, bare 256 mulige farger,
men den støtter gjennomsiktighet og animasjon.
Og så er det png, som støtter åpenhet og mer farger
men ikke animasjon.
Så det er en avveining.
Så legger en gif, skjønt, ville være funksjonelt
tilsvarer å legge til en png eller jpg.
Yeah.
Bildekilde lik.
Så noe annet.
La oss komme opp med noe som vi sendte til Victoria for å gjøre her.
>> PUBLIKUM: Legg til knapper for et skjema.
DAVID J. MALAN: OK.
Så legge til knapper for et skjema.
Og vi vil gjøre at en sammen.
Så det vil være en perfekt segue rett etter denne utfordringen.
Alt annet?
Hva kan du gjøre?
Nettet føles veldig uimponerende hvis dette er alt vi kan gjøre.
PUBLIKUM: Endre fargen på teksten.
DAVID J. MALAN: Endre hva?
PUBLIKUM: Farge på teksten.
DAVID J. MALAN: Endre farge på tekst.
Greit.
Så, la oss gjøre dette.
Bare en gang slik at du ikke bare utenat, gjøre akkurat hva jeg gjør,
Jeg kommer til å slå på musikk for kanskje fem minutter her.
Du er velkommen til å bruke Google.
Du er velkommen til å spørre meg, og Jeg skal hviske et hint i øret.
Du er velkommen til å se over på andre skuldre.
Men løse bare ett av disse problemene.
Men vi vil gjøre det siste, danner en, hvis vi kunne, sammen.
Så fem minutter for å løse hvilken som helst av disse problemene
ved hjelp av Google, intuisjon, eller en hvilken som helst andre midler tilgjengelig for deg.
>> [MUSIKK]
Greit.
Ingen grunn til bekymring dersom du ønsker å holde fiksing og triksing,
men jeg vil ødelegge et par av disse svarene.
Så det første forslaget fra Victoria var å gjøre teksten større.
Så det er noen måter å gjøre dette.
Jeg har for tiden restaurert min skjerm på denne størrelsen,
selv om jeg har zoomet inn kunstig bare for å se ting.
Og la oss gjøre dette.
La meg gå videre og grip noen generiske latinske teksten
bare så vi har noe å jobbe med.
Så gi meg bare et øyeblikk.
Jeg skal lage tre avsnitt.
OK.
Dette vil være en bedre eksempel.
Så for de nysgjerrige, i min hello.html, jeg bare
limt tre nonsens Latin avsnitt
bare så vi har litt tekst å jobbe med.
Og Victoria mål var å gjøre noe av teksten større.
Så jeg kunne, som før, gå inn her.
Og la meg gjøre det på den riktige måten.
Jeg kommer til å ha en link tag som peker til en fil
kalt "styles.css," forholdet som er igjen "stylesheet".
Og så kommer jeg til å lagre og åpne opp denne "styles.css."
>> Så, som før, har jeg evne i denne CSS-fil
å faktisk overstyre standard estetikk på en nettside,
og standard estetikk, selvfølgelig, er ganske kjedelig.
Det er liksom normal skriftstørrelse, svart tekst, hvit bakgrunn, og så videre.
Så antar jeg ønsker å gjøre alt dette tekst større.
Jeg kunne gjøre et par ting.
I min styles.css fil, jeg kunne si, vet du hva,
gjelder følgende for å kroppen min side.
Gå videre og gjøre skriftstørrelse 24 poeng,
som er et tall jeg kan bruke i Word.
La meg gå tilbake til min web side her og laste,
og du kan se at det er allerede mye større.
Og vi kan få litt gal, akkurat som vi kan på en desktop--
gjøre det 96 poeng.
Last.
Og det blir litt uhåndterlig på dette punktet.
>> Men jeg kunne være litt mer presis.
I stedet for å bruke dette stilark til kroppen min side,
hva annet kan jeg bruke det på stedet, hva andre kode som kanskje fortsatt
funksjon på samme måte?
>> PUBLIKUM: The p tag?
DAVID J. MALAN: P tag.
Så hodet ville ikke være riktig, fordi hodet,
du kan faktisk ikke kontrollere estetikk.
Det er enten tekst der eller ikke.
Men p tag-- jeg kan dykke i en liten dypere, så å si, for å avsnittet
tags.
Og selv om det er tre, det er helt greit, fordi i CSS,
når jeg bare si "p", denne betyr gjelder følgende
til hvilken som helst kode som samsvarer med dette velgeren, velger bare
er navnet på taggen.
Så uansett hvor du ser en "P", gjelder skriftstørrelsen,
og la oss gjøre det mer rimelig igjen-- 24 poeng.
Og vet du hva, bare for godt mål,
la oss gjøre fargen rød bare for øyeblikket.
Og nå hvis jeg laste, nå er vi se tre stygge avsnitt.
>> Men nå antar at jeg er liksom of-- Jeg vil første ledd
å hoppe ut på brukeren.
Jeg ønsker ikke å bare øke skriftstørrelsen på alt.
Og så jeg faktisk ønsker å identifisere eller skille mellom disse punktene.
Så la oss bli kvitt de røde, fordi det er bare slags klebrig,
og la oss gå videre og gjøre skriftstørrelse 12 punkt som standard,
slik at vi er tilbake til noe litt mer fornuftig.
Og nå vil jeg bare til å øke skriftstørrelsen i første ledd.
Jeg kan gjøre dette i noen måter, men en måte som er
kanskje mest instruksjons på øyeblikket er å gjøre følgende.
La meg gå videre og si, dette avsnitt har en unik ID "først."
Jeg kunne kalle dette noe jeg vil.
Jeg kan kalle dette "foo" eller noe annet ord,
men jeg kommer til å gi den enkelte semantisk meningsfullt navn
som "først."
Dette er en unik identifikator, ID, for min første ledd.
>> Hva kan jeg nå gjøre i mitt stil er å være litt mer presis.
Istedenfor å si, gjelder følgende til p-taggen,
Jeg kan si following-- gjelder følgende,
eller velg, HTML-elementet som har en unik ID "først."
Hva ønsker jeg å bruke den?
En skriftstørrelsen på 24-punkt.
Så jeg har to velgere nå.
En gjør alle pkt 12-punkt.
Men dette, spesielt siden det kommer second-- det kommer sist i av filen
dette har en gjennomgripende effekt.
Jeg har bare gjort hele mitt ledd koder 12-punkts,
men dette nå kaskader og styrer at for alle elementer
på siden, noe tag på siden der unik ID er sitat unquote "først."
Og hashtag i denne sammenheng bare betyr "unik identifikator."
Jeg vil ikke sette det i HTML-filen.
Jeg, over her, bare si quote unquote "først."
>> Så la meg laste.
Og nå ser jeg, ah, OK.
Jeg mener, det er ikke så pen, men det er slags
av som forordet til en bok eller noe sånt,
der første ledd er større.
Kan være enda mer presis med bare de første bokstavene, men i det minste
Jeg har trent i mer kontroll.
Nå maybe-- kanskje jeg ønsker å gjøre dette noen ganger uansett grunn,
og så jeg vil ikke at dette skal gjelder bare en HTML-kode.
Snarere, la oss say-- la oss også gjøre følgende.
Class = "import".
Mens en ID brukes til entydig identifisere en ting, en tag,
i din web side, er en klasse ment å være brukes på en rekke elementer eller koder
på nettsiden din.
Så det er gjenbrukbare.
En ID er ikke gjenbrukes.
En klasse er gjenbrukbare.
>> Og vet du hva, uansett filosofisk reasons--
Jeg ble ikke ferdig min thought-- jeg kommer til å si
at første ledd og andre ledd er viktig.
Så jeg kommer til å bruke klasse kalt "Viktig", som, hvis jeg lagre filen
og reload, har ingen funksjonell innvirkning ennå.
Men jeg har lagt noen metadata til filen,
liksom noe eget fra kjernedata i filen,
slik at nå i min stilark, hvis jeg i stedet si ".important" - du vet,
noe som er viktig, er jeg kommer til å gjøre font-farge, red--
eller snarere ikke font-farge, bare farge.
Det er uoverensstemmelser i CSS dessverre.
Og lesse.
Legg merke til nå den første to avsnittene er røde
men ikke den tredje, fordi jeg bare anvendt klassen av "viktig"
til de to første av disse tingene.
>> Så i IDer, har du muligheten for å angi meget nøyaktig.
Med klasser, har du gjenbruk.
Men i begge tilfeller merke slags god design prinsipp
hvor jeg tatt ut alle estetikk til min styles.css fil.
Så det er ingen messi her.
Det er ingen omtale av rød eller fet vendt eller skriftstørrelsen i denne filen.
Snarere har jeg semantisk, menings preget mine data,
her er noen viktige data.
Her er noen flere viktige data.
Dessuten er det her "Første" av mine viktige data.
Så HTML handler om sortering av tagging, bokstavelig talt, ord
og avsnitt og konstruksjoner i din side med disse små hint, hvis du
vil, som du kan en eller annen måte utnytte hjelp
andre teknikker som CSS på denne måten.
>> Så som svar på Victoria spørsmål, vi kan gjøre teksten større på den måten.
Det er så mange andre måter, men skrift tag-- åpen brakett "font" -
er faktisk flere år gammel.
Og dette er problemet, også, med å stole bare
på nettet resources-- de har en tendens til å være utdatert.
Og ja, som er blitt foreldet, fordi verden realisert,
hva betyr "font-size = 7" betyr?
Det gjør det ikke.
Og det i mange år, og for å denne day-- en av side
bemerker her er at det faktisk er utrolig smertefullt fortsatt noen ganger
for å utvikle områder for web, fordi Microsoft
og Google og Mozilla og andre ofte uenige om hvordan
å tolke en spesifikasjon som HTML.
>> Det er en regelbok for HTML som vanligvis sier hva hver tag betyr.
Men noen ganger er det overlatt til implementering skjønn,
Microsoft skjønn og Google.
Og så vil du veldig ofte se på en nettside noe
ser annerledes på en PC enn det gjør på en Mac,
og det er egentlig fordi, på slutten av dagen,
de ikke teste det godt på begge plattformer.
Men det er også fordi rimelig, smarte mennesker vil være uenige
og selskaper vil være uenige, og så en av utfordringene i programmering
for web eller design ting for web
skriver nettstedet ditt på en måte som fungerer på alle nettlesere.
Men selv det er urimelig, ikke sant?
Det er så mange versjoner av så mange lesere der ute som, på et tidspunkt,
du må også gjøre en vurderingssak og du må bestemme som selskap,
spesielt for e-handel-stil nettsteder der du er
prøver å bruke den nyeste og beste teknologier for å gi en virkelig god brukeropplevelse
erfaring.
Men noen prosent av brukerne kanskje fortsatt være å bruke Internet Explorer 6 eller 7
eller 8, særlig avhengig land som de kommer fra.
>> Og så veldig ofte konsultert er noe
som "nettleser statistikk."
Og hvis vi går to-- la oss se Wikipedia og se hvordan up-to-date dette diagrammet er
hvis det er én.
Så her kan du se hvor nettlesere faktisk
er ifølge desember 2015, i henhold til den amerikanske regjeringen.
Chrome er på 42% markedsandel, etterfulgt av IE i stor grad i bedriftens innstillinger
eller PC-innstillinger, selvfølgelig, etterfulgt av Firefox,
deretter Safari, så Opera gjorde ikke gjøre kartet her for noen grunn,
og deretter andre.
Kanskje det er under Andre.
Men mer problematisk enn det er-- la oss se om Wikipedia har også
versjoner av nettlesere version--
>> La oss gå til nettleserens statistikk.
DVS.
Selv det er ikke nok.
Nettleserstatistikk.
Min versjon.
Det kommer ikke til å være riktig.
La oss se versjoner.
Browser markedsandel.
La oss se om dette kommer opp.
OK.
Nå blir litt mer nyttig.
Så her, ser at vi har alt ulike versjoner av nettlesere.
Og herregud, hvis du look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Jeg mener, nettlesere stadig oppdatert, og noen ganger noen av disse endringene
er betydelige i når det gjelder funksjonalitet.
Og så på et eller annet tidspunkt, produktsjefer eller ingeniørene
trenger for å gjøre en decision-- deg vet hva, bare 1% av verdens
fortsatt bruker IE 7.
Til helvete med dem.
Vi er bare ikke til å støtte den nettleseren.
Og hva betyr det å ikke støtte?
Det kan bety at knappene fungerer ikke på din nettside,
eller det kan bety formatering er helt av.
Eller du kan ha å gjøre det samme dom samtale
i mobile disse dager, hvor, men vi kan ikke kommer til å støtte IOS 5 lenger.
Så folk må bare oppgradere.
Eller vi kommer ikke til å støtte Cupcake på Android OS for Android-enheter,
fordi som world-- som tech verden ønsker å gå videre,
den slags ønsker å dra verden med det, slik at de ikke gjør
må fortsette å bli bakoverkompatibel slik at de
kan tilby nye og gode funksjoner.
Dette er faktisk en av grunnene hvorfor så mange bedrifter er å rulle ut
automatiske oppdateringer og liksom tvinge de siste versjonene av programvaren på oss.
Og selv om selskapene som Apple vil sortere av
tvinge deg nesten eller tvinge deg i form av markedskreftene
å kjøpe en ny telefon fordi de bare vil ikke oppdatere den gamle telefonen lenger.
Så du gå glipp av nyeste og beste funksjonene,
fordi det er kostbart for dem som selskapet å opprettholde eldre, uten tvil
mindreverdig versjoner av programvare.
Men nettoeffekten er at Vi lider også dette også.
>> Så la oss ta en titt på et par siste ting her.
La oss kutte ut virkelig fort noen av de andre kuler, hvis nysgjerrig.
Så hvis du prøvde å, for eksempel, plassering
teksten på forskjellige sider av side, kommer jeg til å gjøre en rask måte,
men det er annerledes måter å gjøre dette.
La meg gå videre og eliminate-- forenkle dette som følger.
La meg bare gå tilbake til min enkle, enkle avsnitt.
La meg gå tilbake til min styles.css.
Og jeg bare kommer til å bruke simple-- som du kanskje har sett på Google
eller husker fra earlier-- text-align høyre.
Og oppdater denne siden.
Nå er alt virker å være høyrestilt,
som du kan se på overhead her.
>> Vi kan gjøre det ser litt mer bestiller-aktig, og vi kan si "rettferdiggjøre"
og lesse.
Nå er det fint og plassen på begge sider, som er slags hyggelig.
Et annet mål som vi hadde her var endre farge på teksten.
Så vi så at med min rød tekst.
Og nå legge til knapper for et skjema.
Så hvorfor ikke vi prøve å gjøre akkurat dette?
Men først la meg gå til et nettsted som de fleste av oss bruker hver day-- Google.
Og la oss ta en titt på hvordan Google faktisk fungerer.
Men jeg kommer til å gjøre dette.
Først la meg gjøre det in-- Jepp, la meg gå til Google først.
Jeg kommer til å gå i Google Innstillinger,
fordi jeg ønsker å deaktivere noe som kalles øyeblikkelige resultater.
>> Så du kanskje har lagt merke til i Google disse days-- la meg gå tilbake
og slå dette på.
Så hvis jeg begynne å søke for "katter" som dette,
Legg merke til at ikke bare gjøre Jeg får auto-fullføre opp
toppen, plutselig, selve siden ser ut til å endre ganske raskt også,
og det er Google bruker et språk kalt Javascript prøver å være nyttig.
Men dessverre, det slag av søl opp vår diskusjon
av hva som faktisk skjer under panseret her.
Så jeg er bare litt raskt slå av øyeblikkelige resultater.
Og jeg kommer til å klikke på Lagre.
Og nå kommer jeg til å åpne som diagnostisk verktøylinje som jeg
holde åpningen under kategorien Nettverk.
Så la oss gjøre dette.
La me-- whoops-- bla dette ned litt.
Og la meg søke etter "katter."
>> Og nå notice-- faktisk, Dette er en god mulighet
for å diskutere et øyeblikk.
Legg merke til det øyeblikket jeg type-- stoppe det.
Slutt med det.
OK.
Legg merke til det øyeblikket jeg skriver bokstaven C, se nederst på skjermen.
A- T- S. Hva gjør bunnen av denne skjermen, min kategorien Network,
foreslår som skjer hver gang jeg skriver et brev?
Dessverre er frosken veldig distraherende dag eller shamrock
eller hva han er.
Hva som skjedde hver gang jeg skrev?
Og la meg tømme buffer og skriv det på nytt.
Slik: Uff da.
Hver gang jeg skriver et brev, C- A- T-- så en ny rad åpenbart fortsatt vises.
Hva gjør hver av disse radene representerer, basert på hva vi har sett og diskutert
så langt?
PUBLIKUM: Et søk?
DAVID J. MALAN: Et søk, eller mer generelt, en HTTP-forespørsel
fra nettleseren til serveren.
Vel, hvorfor er nettleseren min å gjøre en HTTP be hver gang jeg skriver et brev?
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Ja, det er å gi meg disse auto-fullføre resultater.
Liker, hvor gjøre disse søkeresultatene kommer fra?
Vel, hver gang jeg skriver inn et brev, sender Google mer
og mer og mer av ordet jeg skriver.
Hvorfor?
Fordi de ønsker å gi meg en bedre og bedre, bedre forslag,
en liste med forslag, for hva ordet Jeg prøver å faktisk ferdig.
Så dette er å si bokstavelig talt hver tegn du skriver inn i Google
blir sendt, til slutt i bulk, men også noen ganger en
i en tid for å gjennomføre disse auto-fullføre funksjoner når
dataene er naturligvis på nettet.
>> Nå, la oss ta en titt på hva som faktisk skjer når jeg klikker Google Search.
Og så skal vi utnytte dette selv.
Så hvis jeg ruller nedover nå til meget første forespørselen som nettopp skjedde.
Legg merke til følgende.
Den ble sendt til en ganske lang URL-- https://www.google.com/search?
og deretter en hel haug med ting.
La oss se dette faktisk nå i kategorien leseren selv.
La oss bli kvitt verktøylinjen her.
Her er siden med søkeresultater.
Og legg merke til her er nettadressen.
Nå kan du sikkert gjette hva som skjer her delvis.
Så først av alt, en definisjon.
Dette er tilsynelatende reisemålet hvor det er sendt inn skjemaet.
Så når jeg skrev i ordene "cats" og trykk Enter,
tilsynelatende Google sendte min skriving til denne nettadressen
som jeg har uthevet der, slash søk.
Slår ut, i en URL, noe som skjer etter et spørsmålstegn er,
som vi fortsetter å si, en nøkkelverdi-par som ble skrevet inn i skjema eller annen måte
overføres fra leseren til serveren.
>> Så når du skriver inn inn i et skjema på nettet
og det er sendt som vi har vært diskutert, via en bli,
en av disse virtuelle konvolutter, innholdet
av at envelope-- ja, holde får fylt fysisk
i konvolutten i klassen i dag, men teknologisk
det er faktisk satt i nettadressen.
Så faktisk, la meg sile gjennom dette.
Hvor ser du brukerundersøkelser?
Hvor ser du noe at jeg selv har skrevet opp her?
Ja, så "katter."
Høyre?
Så la meg destillere dette til noe enklere.
Jeg kommer til å slette alt om denne nettadressen som jeg ikke forstår,
og jeg bare kommer til å forlate det som dette-- / søke? q = katter.
Vi får se hvor q kommer fra i et øyeblikk,
men det føles som et minimum mengden av informasjon som jeg gitt.
Og nå kommer jeg til å trykke Enter.
Og legg merke til den fortsatt fungerer.
Vi fortsatt få tilbake en hel haug med katter.
Så Google er mer avansert enn dette i disse dager.
Det er 2016, ikke 1999.
Så det er andre ting som min leseren sender til serveren.
Men dette er minimalt alt som er nødvendig.
>> Så hva skjer?
Vel, først la meg gå videre og gå tilbake til Cloud9 og la meg gå videre
og lukker faner tidligere.
Og jeg vil gjøre dette på min eier bare for et øyeblikk.
Jeg kommer til å gå videre og opprette ny fil.
Og jeg kommer til å lagre det som google.html.
Og jeg kommer til å veldig quickly-- Jeg kommer til å stjele, faktisk,
noe av denne teksten bare for å spare tid.
Jeg kommer til å lime dette inn her.
Jeg kommer ikke til å bry seg med noen stilisering denne gangen.
Vi kommer til å kalle dette "My Google."
Og jeg kommer til å bli kvitt av alt i kroppen.
Og jeg kommer til å gjøre følgende.
La meg zoome inn.
Form action-- og som jeg kort nevnt earlier-- whoops-- som jeg kort
nevnt tidligere, virkningen av en formen er der du sender data til.
Så google.com/search.
Og den metoden jeg vil bruke kan være en av to ting.
Det kan enten være "få", som vi holder diskutere, eller det kan være "post".
For nå, den grunnleggende Forskjellen er, hvis du bruker "bli"
all informasjon som bruker gir blir sendt i nettadressen.
>> Det er flott for ting som søk motorer og noen få andre programmer,
men under hvilke omstendigheter ville du ikke ønsker å fylle ut et skjema
og har den informasjonen ender opp URL, som i adresselinjen i nettleseren?
Hva slags former gjør you--
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Ja, som hva?
PUBLIKUM: Passord.
DAVID J. MALAN: Ja, så du logger på Facebook eller noen nettside.
Det er brukerundersøkelser fra et skjema, en tekstboks,
men du sannsynligvis ikke vil ha det dukke opp i nettleserens URL.
Hvorfor?
Jeg mener, kanskje det er noen sikkerhetsrisikoen på nettverket,
men mer-- liker, enklere, hva om romkameraten, signifikante andre,
barna, ser din ektefelle via nettleseren din historie?
Det er ditt passord riktig der i nettleserens historikk.
Det føles ikke som god design.
Eller enda mer teknisk, anta at du prøver
å laste opp et bilde til Flickr eller Facebook eller wherever--
som er brukerundersøkelser, selv om det er litt mer interesting-- hvordan
skal jeg stappe et bilde i adresselinjen?
Du slags liksom ikke kan.
Du slags kan.
Men egentlig er jeg hardt pressede å forestille seg å gjøre det.
Så jeg trenger en annen metode for laste opp bilder til et nettsted,
og at andre metoden kalles "post".
Men for nå, vil vi bare snakke om "Få", som er den enkleste av de to.
Det setter bare alle brukerundersøkelser i URL.
>> Så her er formen jeg skaper.
Jeg vil ha en inngang.
Og vet du hva?
Jeg kommer til å ta en gjetning her.
Jeg kommer til å huske min input "q" for "spørring."
Og jeg tror dette er en av de opprinnelige design, kanskje, fra 1999.
Og deretter hvilken type denne inngangen bare kommer til å være "tekst".
Og så kommer jeg til å ha en annen inngang som ikke trenger et navn, så vi vil snart
se, den type som er "send".
Og dette kommer til å gi meg en spesiell knapp.
Og det er det.
>> Så la meg gå videre og lagre denne filen.
Jeg kommer til å gå tilbake til min nettleser og gå til google.html.
Gå.
Og det er litt sparsom å si det mildt.
Men la meg gå videre og søk etter "katter."
Og legg merke til jeg er for tiden på dette Cloud9 URL.
Men i det øyeblikket jeg klikker på denne, hvor du håper jeg vil ende opp med?
>> PUBLIKUM: Google.
>> DAVID J. MALAN: Google.
Så la oss klikk Send.
Og ja jeg har re-implementert Google.
Høyre?
Det er enklere.
Det er lettere.
Jeg mener, min kode er klart bedre enn deres, fra rotet vi så tidligere.
Og vet du hva?
Jeg kommer til å krydre dette opp litt.
Jeg nevnte ikke dette tidligere.
Det er tagger som H1, for Overskrift 1, den viktigste overskriften på en side.
"My Google," Jeg vil kalle dette.
La meg lesse.
Det ser litt bedre allerede.
Og, faktisk, vet du hva?
Jeg har already-- jeg løy.
Jeg sa at jeg ikke kom til å style denne, men jeg kommer til å style dette som før.
Og kroppen min kommer til å være, la oss si, text-align center.
Det ser mer ut som Google allerede.
>> Jeg trenger et linjeskift, skjønt, for at Send-knappen.
Og det viser seg, du kan bruke avsnitt,
eller du kan mer bokstavelig talt bare si, gi meg et linjeskift her-- BR tag.
Og hvis jeg laste dette, nå går det der.
Det er litt stygg, så jeg kunne gjøre flere linjeskift,
men la oss ikke bli for grådig her.
Så nå får vi se om det fungerer for "hunder".
Det ser ut til å jobbe for "hunder", også.
Så hva er den overbevisende takeaway her?
One-- var ikke et stort sprang å introdusere noen flere koder,
som skjemaet tag i inngangslappen.
Men mer fundamentalt er, er alt vi gjør
er å utnytte vår forståelse av HTTP og det faktum
som danner til slutt endre hva som er i nettadressen i nettleseren,
og så derfor kan vi mekanisk gi innspill til en server
Legg inn et HTML-skjema og vite at serveren forstår HTTP,
akkurat som kroppen vår forstår, som, rister hånden min, den samme protokollen,
og slik at vi får tilbake svar at vi til slutt kan forvente.
>> Så la oss prøve å gjøre en siste ting nå med mobil,
og jeg skal make-- jeg vil legge denne koden til lysbildene.
Så hvis du ønsker å tinker, du kan sikkert ta det derfra.
Men jeg kommer til å gå videre og gjøre en ting.
Jeg kommer til å gå videre og åpne opp peke page--
min hallo side som før, noe som har mye av dette faux-latinske teksten,
eller meningsløst latinske teksten, og has-- det ser ut som dette på denne skriftstørrelse.
Men la meg gå videre og gjøre dette.
Jeg kommer til å gå inn i Cloud9.
Og du trenger ikke å gjøre dette trinnet.
Jeg vil bare gjøre det selv.
Jeg kommer til å klikke på Del.
Og dette er en funksjon bare av Cloud9, der
Jeg kan gjøre mitt miljø publikum.
>> Og bare for moro skyld demonstrasjon, la meg gjøre dette.
Jeg kommer til å gjøre min søknad publikum.
Legg merke til det advarer meg, jeg Jeg sikker på at jeg ønsker å gjøre dette,
fordi dette kommer til å gjøre alle i verden, enten de er her nå
eller ser på video senere på Internett i stand til å se det jeg ser.
Men det er OK.
Jeg kommer til å si "Ferdig".
Og la meg oppmuntre deg, hvis jeg gjorde dette correctly-- la meg teste det først.
Kom igjen, hvis du ikke mind-- i en nettleser på datamaskinen,
gå til denne nettadressen, og forhåpentligvis vil du se min latinske teksten.
Og for å være klar, er det kjører ikke på min laptop.
Det er i skyen.
Det er på Cloud9, bokstavelig talt, men Jeg har gjort mitt arbeidsområde offentlig
slik at alle på internett kan få tilgang til min Latin hjemmeside.
>> Gå til samme nettadresse på telefonen, hvis du kunne.
Hvis det vil koste deg, men du kan bare se over en skulder.
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Jeg beklager?
PUBLIKUM: [uhørlig]
DAVID J. MALAN: Bare latinske ord.
Det er alt.
Men det er hva du bør se.
>> PUBLIKUM: Yeah.
DAVID J. MALAN: Ja.
Yeah.
OK.
Så kan jeg holde opp telefon for bare et øyeblikk?
Så, forhåpentligvis, hvis du skal ha tilgang det, bør det ser nesten uleselig.
Det er still-- Jeg mener, det er uleselig på grunn av det latinske.
Men det er også uleselig for hva andre grunner?
Liker, hva behager du om dette?
PUBLIKUM: Det er liten.
DAVID J. MALAN: Det er super, super liten.
Så hvordan kan vi fikse dette?
Det er super, super liten på Victoria telefon
og hvis du har trukket det opp selv, trolig
lite på telefonen også, med mindre du tilgjengelighetsinnstillinger aktivert.
Hva er det?
Du kunne bare klemme og zoom, som er gjennomførbar,
men da må du bare se noen få ord om gangen.
Så vent litt.
Jeg vet hvordan å fikse dette.
Høyre?
Jeg kunne bruke CSS, og jeg kunne endre skriftstørrelsen fra 12-punkt til 24 punkter.
Men den bivirkning av dette, selvfølgelig, kommer til å være nå,
på en stasjonær eller en bærbar PC, Nå teksten er dobbelt så stor.
Og så det ville slags være hyggelig for å skille mellom enhetene,
og det viser seg at det er måter å gjøre det.
Det er flere forskjellige måter, faktisk
der ved hjelp av CSS og mer avansert funksjoner at vi ikke vil gå inn i stor detalj,
du kan faktisk spørre leseren og si:
Hvis skjermen er mindre enn dette mange piksler, bruker denne skriftstørrelsen.
Hvis skjermen er større enn dette mange piksler, bruk denne annen skriftstørrelse.
>> Du kan bli enda mer avansert fortsatt.
Hvis du noensinne har besøkt en nettside som, på et skrivebord,
har en stor meny kanskje ut til side, og deretter alt innholdet
er på siden av det menu-- det er en slags felles paradigme.
Meny på venstre, innhold på høyre, eller vice versa.
Har egentlig ikke fungerer på mobil når Skjermen er bare så mange piksler bredt.
Så mer vanlig på mobil er, menyen vil plutselig få
kollapset, og du må Klikk på en knapp for å se det,
eller nettsiden vil sette menyen over den og sette innholdet under.
Og du kan implementere disse ting på flere måter, også.
Du kan be dine programmerere, hei, team, som helst
du ser en HTTP-forespørsel fra en Android enhet, en Microsoft-enhet, et Google
enhet, en Apple-enhet, bruker du denne skriftstørrelse og bruke denne menyen layout,
ellers bruker denne standard større layout.
>> Nå, ved hjelp av det fundamental teknikk i dag
kunne ingeniørene bruke å vite om det er
en iPhone, en Android-telefon, en bærbar datamaskin en stasjonær besøke selskapets server?
Der får de denne informasjonen?
>> PUBLIKUM: header?
>> DAVID J. MALAN: Ja, HTTP-hodet.
Så hver HTTP-forespørsel fra sine kunder til sine servere
omfatter, inne som virtuell konvolutt, en hel haug
av HTTP-hoder, er en av dem nettleseren og operativsystemet
selv, hvis du har lyst til å at detaljnivået.
Nå er det en kryptisk utseende streng, men det finnes programvare som vil like
forenkle det, og du kan bare spørre i programmering code-- PHP, Java, C ++,
whatever-- hva telefonen er dette-- hvilken enhet er denne brukeren bruker?
Og så kan du si, vise dem denne versjon av nettsiden hvis det er en telefon.
Vis dem denne versjonen av nettside hvis det er en bærbar eller stasjonær.
Men du trenger ikke engang server-side kompleksitet.
Du kan gjøre selv de enkleste ting.
>> Jeg kommer til å gjøre dette.
Jeg kommer til å gå videre inn i min Cloud9 miljø,
og jeg kommer til å legge til en kode som du så i Google før.
Det kalles metakode.
Og jeg husker aldri dette, så Jeg kommer til å transkribere det her.
Meta name = "view" og deretter content = "width = enhetens bredde, intital
skala = 1 "og det er det.
>> Så det kan like godt være som en magisk besvergelse.
Det er ikke alle som klart, men dette har noe å gjøre med visningsfeltet,
og view er bare kroppen til en nettside, den rektangulære regionen som
definerer det meste av siden.
Og dette er bare å fortelle leseren, vet du hva?
Gjør bredden på denne siden effektivt lik enheten bredde.
Med andre ord, ikke anta at du har liksom ubegrenset plass.
Anta at du bare har så mye plass som selve enheten er stor.
Og så nå, hvis jeg laste dette i nettleseren min, ser jeg ingen endring.
Men hvis jeg gjorde dette correctly-- og la meg krysse min fingerbevegelsene, hvis dere alle
laste inn telefoner, gjør du se en overbevisende forandring?
Ja, er at--
>> PUBLIKUM: [uhørlig]
DAVID J. MALAN: Ja.
OK.
Så kanskje mer lesbar nå?
Fortsatt liten, for å være rettferdig, men ikke så liten som å være uhåndterlig.
Og jeg kunne sikkert overstyre dette videre med CSS eller på serversiden,
men i økende grad hva du er se er flere og flere funksjoner
blir lagt til i klientsiden environments--
Javascript, som vi vil diskutere i morgen, CSS og HTML-- så
at alle disse søkene kan gjøres på klienten
slik som å bry Serveren mye mindre og ikke
å ha for å holde tritt med, for eksempel, den konstante angrep
av nye operativsystemet versjoner, nye nettleserversjoner.
Du kan bare la nettleseren spør enheten, hvor stor er du,
og deretter gjøre noe logisk avgjørelser basert på det.
Men vi får se flere muligheter for logiske beslutninger
morgen i sammenheng av et programmeringsspråk.
>> Så, noen spørsmål, da, på web utvikling?
I dag er ikke web-programmering, per se, siden de fleste alt vi gjorde
var svært estetiske, hvis du vil.
Det er ingen beslutningsprosesser i koden som vi har skrevet,
og så det er derfor HTML er et markerings språk, ikke et programmeringsspråk.
Men i morgen vil vi ta en rask titt, til slutt,
på Javascript, noe som er en faktisk programmering
språk som lar oss gjøre litt mer.
>> Noen spørsmål?
Vel, la meg foreslå to muligheter valg for lekser.
En er-- disse Cloud9 kontoer vil ikke utløpe.
Du er velkommen til å bruke dem å tinker med.
Det er gratis servicenivået.
Innse at hvis når du oppretter arbeidsområdet, du har gjort det offentlig,
som betyr at hvem som helst på Internett kan se hva du skriver.
Så kanskje bare vurdere ikke pinlig selv
hvis du setter ditt første web side der ute offentlig uhell,
men ingen kommer til å vet å se det allikevel.
>> Og two-- la meg kaste opp denne URL også,
spesielt hvis du kom i dag en litt mindre behagelig enn andre,
usikker på hva alt dette betyr.
Innse at mye mer av denne videoen som er både en god måte å sovne
og også til å le mens å gjøre dette, har også
mye societally interessant og sikkerhetsrelevante diskusjoner
deri fra John Oliver, riktignok en komiker.
>> Men hvis det er noen flere spørsmål, som bringer oss til resepsjonen.
Så hvorfor ikke jeg slår på musikk.
Det bør være drikkevarer og snacks utenfor.
Jeg er glad for å blande for så lenge folk ønsker,
besvare spørsmål mer en-mot-en.
Men, ellers er du velkommen å ta av når som helst,
og vi vil se deg igjen i morgen for litt mer.
Greit, takk.