DAVID J. MALAN: Oké.
We zijn terug.
Dus, het doel van deze laatste sessie is een paar concepten te introduceren
maar geven ook iedereen een kans van de soort strek je vingers
en eigenlijk iets te doen een beetje hands-on.
Het doel is te draaien ons allemaal in webontwikkelaars
met alle middelen, maar eigenlijk gewoon om u een voorproefje van enkele geven
van de fundamentele constructen wat gaat in web programmeren en vandaag web
ontwikkeling, zodat de statische kant van things--
geen logica, geen programmering taal, maar statische content.
En het zal ons een kans te geven om daadwerkelijk te zien wat een webserver,
Zie wat een HTML-bestand is, zien wat HTTP is eigenlijk serveren.
Maar voordat we een duik in, terugwerkende kracht vragen over cloud computing
of de veiligheid of iets daar tussenin?
>> Nee?
Oké, goed, laten we Dit doen, voor het geval
het proces van het aanmelden voor iets duurt een paar minuten.
We zullen laten doen het op de achtergrond.
Ga je gang, als je zou kunnen, naar deze URL hier-- c9.io.
Dit is een third-party service-- platform as a service, als je will--
dat gaat u uit te nodigen aan te melden voor een account,
en het gaat om een ​​ieder van jullie geven een rekening in de zogenaamde cloud
op de infrastructuur van iemand anders, een bedrijf genaamd Cloud9.
Maar wat er leuk is hiervoor is dat ze je geven
een benadering van een werkelijke real-world ontwikkeling
omgeving, zij het in de wolk en in een webbrowser,
en we zullen dit gebruiken om daadwerkelijk een beetje experimenteren vandaag.
En dan ga je gang en gewoon navigeren je weg naar de sign-up proces
als je zou kunnen.
Dus gebeuren dat we om dit te gebruiken in de klas Ik geef les voor al onze studenten,
zowel op de campus en off nu, en het is vervangen wat historisch gezien
was anders downloadbare software.
Dus wat je toegang verkrijgen tot is een van deze virtuele machines,
in wezen, dat ik eerder beschreef.
Dus dit bedrijf Cloud9 waarschijnlijk huurt van een derde Party-- inderdaad
in dit geval Google als geheel bos van virtuele machines
dat ze een of andere manier hakken in de illusie van afzonderlijke servers
dat ieder van ons heeft de volledige controle over.
Het is niet helemaal juist om te zeggen dat ze virtuele machines,
maar, want wat Cloud9 gebruikt eigenlijk
is een enigszins nieuwere technologie genaamd containerisatie.
En laat me deze foto te grijpen hier om deze foto te schilderen.
>> Een container, indien Herinnert u zich de foto
uit eerder, een beetje lichter gewicht dan een virtuele machine.
In feite, terwijl de laatste tijd hebben we gesproken over daar
zijnde een operationeel -systeem en een hypervisor
en dan gast-besturingssysteem, gast besturingssysteem, gastbesturingssystemen
systeem, op de top van je fysieke hardware,
Het verschil met deze nieuwere technologie, containerisatie,
is dat ze allemaal ergens delen hetzelfde besturingssysteem.
Maar ze nog steeds te maken de illusie van iedereen
het hebben van zijn of haar eigen exclusieve beheerdersrechten en bestanden
op de server.
Maar er is minder software in tussen u en de hardware.
Het resultaat daarvan is, in theorie, een hogere prestatie,
want je gebruikt of verspillen minder middelen
op die zogenaamde virtualisatie laag.
Dus dit wordt genoemd containerisatie door de natuur
door middel van een technologie genaamd Docker, dat is heel erg komt tot zijn recht.
En dit is iets dat ingenieurs bij uw bedrijf
misschien soort soort beginnen te praten over snel als ze dat nog niet gedaan,
al is er zeker geen reden om te springen op een bandwagons.
>> Dus met dat gezegd, wat je waarschijnlijk nu zien
is een scherm dat een beetje lijkt op dit.
OK.
En bel me dan zo niet.
En als so-- ik zal komen, zo niet.
Ga je gang en klik op die grote plus een werkruimte te maken,
en je krijgt een scherm zoals dit te zien.
U kunt de werkruimte bellen noem alles wat je wilt voor nu.
En net eigenlijk voor eenvoud, ga en-- goed, sommigen van jullie
al werkruimten.
Noem het wat je zaken want--, Harvard, donderdag, wat je wilt.
U hoeft niet een beschrijving.
Laat je hem gewoon privé, tenzij je hebben al een heleboel werkruimten.
Als je gedwongen deze openbaar te maken, dat is prima voor de doeleinden van vandaag.
Ook hier is een van de upsells.
Je krijgt een private werkruimte door standaard. Maar als je meer wilt,
je moet betalen voor meer.
Anders, ze dwingen je om uw werk openbaar te maken.
Maar dat is prima, want ze ook richten deze op open-source communities
om mensen te stimuleren daadwerkelijk samenwerken.
>> En het laatste wat dat is belangrijk, is echter, nadat u een naam te kiezen
en nadat u private of publieke kiezen, klik op HTML5, de grote oranje icoontje
tweede van links, en klik vervolgens op Maken Workspace.
En het zal waarschijnlijk neem een ​​minuut of zo,
maar je zult dan een milieu, als je eenmaal
dat doen, dat doet denken aan kijkt wat ik heb op het scherm nu hier.
Maar, nogmaals, het kan even duren of meer om naar dit scherm te krijgen
als je eenmaal hebt geklikt Maak Workspace.
Maar vlag me over als je me wilt een kijkje nemen op iets of advies te nemen.
Okee.
Dus ik ga naar de achtergrond dit voor nu.
Bel me over als je lijkt te technische problemen.
Maar, nogmaals, misschien neem een iets daarvoor te openen.
En laten we gaan en praten over wat Het betekent in feite om een ​​webpagina te maken,
wat HTML is, en hoe dit alles Nu verbindt als we beginnen
daadwerkelijk te gebruiken deel van de technologie.
Dus het blijkt dat ik kan ga op mijn kleine Mac hier,
open een eenvoudig programma genaamd TextEdit of Windows ik kon
geopend iets genaamd Notepad.exe.
En ik kon gewoon iets te doen zoals dit-- "hello, world."
En toen kon ik dit op te slaan als hello.txt Dus geen magie daar.
Dit heeft niets te maken met web programmering, niets te maken met HTML.
Gewoon het creëren van een eenvoudig tekstbestand.
Maar het blijkt dat een web pagina is letterlijk alleen dat.
Het is een eenvoudig tekstbestand met tekst dat je zou kunnen typen op uw toetsenbord,
maar gewoonlijk maar niet altijd eindigt niet .txt, maar .html of .htm.
En je niet zomaar Typ woorden in het bestand.
U eigenlijk om dingen geroepen te gebruiken markeringen of meer in het algemeen iets
genaamd opmaaktaal.
>> Dus ik ga heel snel typen en dan het volgende uit te leggen.
Ik ga eerst typ dit, die zegt:
hey, browser, hier komt een webpagina geschreven in HTML.
En deze twee dingen samen zeggen: hey, browser, de volgende inderdaad HTML.
Hey, browser, hier komt de hoofd of de top van mijn pagina.
Hey, browser, de binnenkant van de top van mijn pagina, zet een titel die, "hallo,
wereld."
Hey, browser, nadat het hoofd van mijn pagina, hier komt het lichaam van mijn pagina.
En, hey, browser, het lichaam van mijn pagina moet ook zeggen, "hallo wereld."
Dus wat zijn de meest opvallende gegevens hier?
Dit is wat over het algemeen riep een doc-type verklaring,
en, eerlijk gezegd, het is een beetje moeilijk om dit eerst memoriseren.
Je gewoon een soort van kopiëren-plakken.
Dit is de formele weg te zeggen, hey, browser,
Ik ben met behulp van HTML-versie 5, die kwam enigszins onlangs.
Het is een magische bezwering dat sommige mensen met een slecht gevoel voor design
besloten op de te zetten top van het bestand.
Ook al is het een beetje mysterieus, dat is alles
Het means-- hey, browser, hier wordt geleverd met versie 5 van HTML.
>> De rest van deze is bij ons al enige tijd, historisch gezien,
maar het is in ontwikkeling geweest, en het is waarschijnlijk een beetje eenvoudiger.
Let op een paar kenmerken van wat ik heb gemarkeerd.
Er zijn deze dingen met haakse brackets-- de linker beugel
en de rechter beugel.
En let op de symmetrie hier.
En door symmetrie, ik bedoel, net zoals ik hebben deze start tag hier of een open tag
als je wil, hier beneden Ik heb een sluit tag of een eind tag dat is
verschillende voor zover zij deze slash aan het begin van het woord
HTML.
En je kunt bedenken dit als ik was terloops
voorstellen voor, hey, browser, hier komt een aantal HTML.
En omgekeerd, hey, browser, dat is het voor de HTML-- begin en einde.
>> Ondertussen hey, browser, hier komt het hoofd van mijn pagina.
Hey, browser, dat is het voor het hoofd.
Hey, browser, hier is het lichaam van mijn pagina.
Hey, browser, dat is het voor het lichaam.
En de binnenkant van dat sommige willekeurige tekst voor nu.
En de binnenkant van het hoofd, ondertussen, is een willekeurig, maar hebben,
zo te zeggen, tekst die zegt, de titel van mijn pagina zal worden "hello, world."
Nu, voor nu, kunt u veronderstellen dat browsers
hebben only-- of liever, webpagina's slechts twee parts-- de kop en het lichaam.
En het hoofd is over het algemeen gewoon zoals de menubalk, het spul
eigenlijk alleen maar aan de top.
En het lichaam is het lef van de pagina, alles in die grote rechthoek
dat vult het scherm.
Dus ik ga om te gaan en dit te doen.
Ik ga om verder te gaan en klik op Opslaan, Bestand opslaan.
En ik ga op te slaan dit als hello.html,
en ik ga gewoon zet het op mijn desktop.
En ik ga om te gaan vooruit en klik op Opslaan.
En notice-- mijn Mac bij minimaal is schreeuwen tegen me.
Weet je zeker dat je dit wilt doen?
En ik ga zeggen, ja, HTML gebruiken.
Ik weet wel beter in dit geval.
En nu ga ik naar mijn desktop waar ik dit bestand plotseling.
En ik ga dubbelklik erop.
En je zult merken dat, door Standaard Chrome geopend.
Dat is want dat is mijn standaard browser.
En het is gewoon zegt: "hello, world."
Maar het zegt "hello, wereld 'op twee plaatsen.
Let linksboven.
Vrij moeilijk te missen.
Het is groot en vet.
En waar anders lijkt het te zeggen: "hello, world"?
>> Publiek: Het tabblad.
>> DAVID J. MALAN: Ja, het tabblad zelf.
Dus toen ik zei het hoofd van de page is alles up top--
en in feite is dit de titel.
Het is gewoon op het tabblad hier.
En ik kan dit tabblad trekken uit om niet te verwarren.
Dit is slechts een enkele tab nu, en inderdaad zien we "hello, world"
hier en "hello, world" hier beneden.
Dus vrij eenvoudig.
Maar het is ook vrij eenvoudig.
En, eigenlijk, ik ingezoomd.
Ik kan de lettergrootte verander gewoon te vergroten voor toegankelijkheid.
Maar laten we nu iets te doen een beetje meer interessant.
>> Ik ga gaan-- whoops, laat me terug naar mijn tekstbestand.
Ik ga terug naar mijn tekstbestand, en ik ga
om dit te veranderen en te zeggen "Hallo, Disney World."
Besparen.
En ga terug naar mijn browser en klik op vernieuwen.
En nu, natuurlijk, het zegt: "Disney World."
En ik ga kunstmatig zoomen in slechts zodat het makkelijker is om te zien.
Dus nu, helaas, ik soort van wil to-- eigenlijk, dat is een Mac-functie.
Ik wil om te klikken op Disney World en ga ergens zoals disney.com,
maar dat werkt niet.
Dus een basisprincipe van het web is hyperlinks, links die ergens anders heen gaan.
Dus hoe kan ik dat doen?
Nou, ik kan alleen maar zeggen, "Hallo, http://www.disney.com."
Red Dit.
Herladen.
Maar dit ook niet klikbaar.
En wat is leuk hier, ook al Dit is nog niet functioneel,
is dat het lijkt dat de browser doet letterlijk alleen
wat ik vertel het aan te doen.
Dus als ik typ gewoon een URL zoals deze, het is gewoon om te laten zien me de URL.
Ik moet om tags of markup taal om daadwerkelijk te vertellen
de browser om nog meer te doen.
Dus ik ga om te gaan en verwijder dit voor een moment.
En ik ga zeggen, hey, browser, start een anker hier,
een link om zo te zeggen.
En de hyper-verwijzing, de bestemming van dat anker moet deze URL.
En merk mijn quotes.
Ik kon enkele aanhalingstekens te gebruiken, ook, maar je moet consequent zijn,
en ik zou in het algemeen gewoon gebruik dubbele aanhalingstekens om het simpel te houden.
Let op, ik ga naar de tag te sluiten.
En dan hier ga ik te zeggen: "Disney World."
En nu moet ik wat symmetry-- geopend beugel / a, gesloten beugel.
>> Dus wat heb ik geïntroduceerd?
We hebben een paar labels al gehad.
HTML, hoofd, titel, Body, zijn alle tags zogezegd,
met open en gesloten tegenhangers.
Maar let op, dit is een soort van fundamenteel verschillend.
Dit is wat we zullen noemen in HTML een attribuut.
En een attribuut slechts een key-waarde paar.
Dit is een gemeenschappelijk ding in computer science-- key-waarde paar.
Het is een soort van het gereedschap van de handel.
Een sleutel en een waarde.
Het woord en vervolgens een aantal ander woord of woorden.
En in dit geval, de sleutel href, en de waarde die volledige URL.
En wat een attribuut doet is het beïnvloedt het gedrag van een label.
En in dit geval, moeten we beïnvloeden het gedrag van de ankertag,
want we moeten verankeren Deze link ergens.
En hoe je dat doet is door middel van het attribuut.
>> Dus ik ga om verder te gaan en nu sla het bestand op.
Ga terug naar mijn browser en herladen.
En voila, we hebben nu de begin van een legitieme webpagina.
Super-eenvoudig, maar als ik de muisaanwijzer over dit-- mededeling in de linkerbenedenhoek,
het is super-klein.
Maar je ziet www.disney.com.
En als ik erop klik, inderdaad dit gardes me weg te disney.com.
Nu is het merkwaardig Hier is dat het niet
de best-- de meest verkoopbare URL, maar dat is prima, want dit bestand niet doet
bestaan ​​op het World Wide Web.
Het bestaat als een lokaal bestand in schijnbaar mijn Gebruikers directory-- / jharvard--
voor John Harvard-- / desktop.
Maar het heeft een URL.
Het gebeurt gewoon lokaal te zijn.
Helaas kan niemand van jullie te bezoeken dit, want als je deze URL typt,
je zou vertellen van uw browser, zoek naar een bestand met de naam hello.html
op uw harde schijf.
En, natuurlijk, tenzij je hebt handmatig volgende mee,
het gaat niet om er te bestaan.
>> Dus dat is prima.
We moeten nog een manier, uiteindelijk, om dit bestand te krijgen in het web,
maar laten we plagen elkaar een paar gevolgen voor de beveiliging van wat we zojuist
zag en bind het terug naar de vroegere bespreking van deze ochtend.
Het blijkt dat, indien een browser letterlijk net doet
wat ik vertel het aan te doen, en het lijkt het geval dat een anker tag is zijn
beïnvloed door de waarde van dit kenmerk genoemd href
maar het toont dit tekst, deze lijkt
te impliceren dat ik de URL kon zetten in beide plaatsen en vervolgens opnieuw
en nu de URL en ga naar de URL.
Let op, als ik de muisaanwijzer op de bottom-links, Ik ben inderdaad nog steeds te disney.com.
>> Dus als je ooit bent geweest phished-- P-H-I-S-H-E-D--
met een van die valse e-mails uit zoals PayPal uw bank,
je hebt waarschijnlijk gekregen links in van de e-mail die je leest dat
vertelt u hier klikken om te bevestigen gaan uw wachtwoord of bevestig uw geboortedatum
of sociale of iets sociaal Techniek u bekend te maken
informatie.
Nou, ik kon soort nemen Voordeel van deze, kon ik niet?
Ik zou iets kunnen zeggen zoals, www.paypal.com.
En in plaats van disney.com, I zou kunnen gaan, als, badguy.com.
Herladen.
En hoe gemakkelijk is het om dupe, met name een niet-technische lezer
of een vluchtig lezen reader dan te klikken
een link als deze, die, als ik klik het-- Ik eigenlijk niet willen badguy.com gaan.
Ik weet niet wat er eigenlijk.
Dus paypal.com, bericht, is wat het zegt dat het gaat om,
maar natuurlijk, als ik kijk naar beneden super-laag, het is een beetje wazig,
maar het zegt badguy.com.
Dat is de enige nu vertellen dat ik ga naar de verkeerde plaats.
En toen ik zei eerder dat de banken moet echt niet aanmoedigen of trein
gebruikers in het klikken op koppelingen, deze is slechts een manifestatie van.
En het is zo simpel.
Je bent nu een tegenstander als je zoiets als dit te doen
en proberen om een ​​gebruiker te misleiden in het bezoeken van uw website.
Maar voor nu, we houden dingen mooi en schoon.
We gaan om verder te gaan en terugspoelen deze veranderingen.
Vernieuw de pagina.
En ik ga terug naar disney.com.
>> Laten we eens kijken of we niet kunnen plagen Dit apart een beetje meer.
Dus "hallo, Disney World."
Ik ga om hier te zeggen.
Misschien ga ik wat ruimte te maken.
"Wij hopen dat u geniet van uw verblijf!"
Besparen.
Herladen.
Het is niet rea-- dat is niet wat ik van plan was, toch?
Ik bedoel, als ik de behandeling van mijn tekst bestand als een tekstverwerker,
wat heb je hopen zou hier gebeuren?
Ja, ik voel me alsof er moet een lijn break hier te zijn,
dus het voelt buggy op een bepaalde manier.
Maar dat is eigenlijk opzettelijk, want net als voorheen,
de browser zal alleen maar doe wat je hem vertelt wat te doen.
Ik heb niet verteld dat het om lijnen te breken.
Ik heb niet verteld dat het naar beneden te bewegen, zelfs hoewel, intuïtief, ik voel me alsof ik deed.
Dus het blijkt dat we nodig hebben een beetje meer markup,
en ik ga om dit te bevestigen als volgt.
Ik ga dit eerst voorafgaan hello met wat een paragraaf tag genoemd.
En dan ga ik om verder te gaan en wikkel deze andere zin
in een andere paragraaf tag, ook al ze zijn super-korte alinea's.
Nu ga ik om op te slaan.
Herladen.
En nu hebben we dat ruimte, en we soort
de semantiek van twee aparte paragrafen.
>> Dat is allemaal prima en goed, maar het zou leuk zijn om een ​​afbeelding toe te voegen aan deze pagina
dus ik ga om te gaan kijken voor Mickey Mouse op Google Afbeeldingen.
En gewoon voor de lol, ik ben gaat deze afbeelding te grijpen.
Ik ga nu verder te gaan en pak de URL van het beeld
hoewel er verschillende manieren om dit te doen.
Voor nu, ga ik gewoon naar de URL te kopiëren.
Ik ga terug te gaan in mijn tekst bestand, en ik ga hier te zeggen,
img src = citaat unquote dat URL, super-lang.
En dan is het idee van een beeld is een beetje anders.
Er is echt geen notie van start een beeld en eindigt een beeld,
als een start van een label een eind tag.
het voelt zo een beetje raar om semantisch me om dit te doen,
een close-image-tag hebben.
Het is niet onjuist.
Het is volkomen juist, en het wordt aangemoedigd,
maar er is verkorte schrijfwijze.
Ik kan soort tegelijk openen en sluiten hetzelfde label,
en dat zal de browser gelukkig maken.
Dus het is gewoon een beetje beknopter voor zaken
dat conceptueel echt niet zin om te beginnen en eindigen.
Ze zijn er gewoon, of zijn ze niet.
>> Dus ik ga dit op te slaan en terug te gaan mijn "hello, world" pagina en reload.
En het is een beetje uit de hand, want dat imago is eigenlijk
een beetje groot, maar dat is OK.
Ik kon het formaat in een programma.
Of weet je wat.
Gewoon om te laten zien, ik ben gaat eigenlijk zeggen
dat de breedte van dit ding moet slechts 200 pixels, 200 dots.
Laat me ga je gang en op te slaan en herladen, en nu de pagina
ziet er een beetje meer redelijk.
Maar let op het patroon.
Nou, ik heb soort onderwezen jullie allemaal HTML in zekere zin ten minste
conceptueel, omdat alle HTML is is deze tags-- geopend labels, gesloten markeringen,
en attributen die hun gedrag aan te passen.
En blijkbaar elke tag kan nul of één hebben
of twee of meer attributen, waarbij elk van die wel iets anders.
Nu, hoe weet je wat bestaat?
Je luistert alleen maar naar iemand zoals ik je vertellen wat er bestaat,
of als je gewoon Google rond voor een tutorial op HTML, en het is echt zo eenvoudig.
>> Waarlijk, toen ik een undergrad jaar geleden en leerde HTML,
een van mijn wiskunde onderwijs assistenten brachten
een beetje tijd begeleiding me voor als een half uur, een uur,
en toen was ik op mijn weg.
Ik was op weg naar het maken van de meest afschuwelijke websites ooit,
die blijkbaar heb ik niet echt verder gekomen dan.
Maar het punt is dat, als je eenmaal begrijpen deze eenvoudige ideas--
Als mysterieuze text-- maar deze eenvoudige ideeën van het starten van een gedachte
en het sluiten van een gedachte, het houden alles mooi in balans,
op zoek naar iets omhoog, het wijzigen van de gedrag van die tag, dat is echt alles
daar is aan het.
En inderdaad, als we nu naar zoiets eigenlijk google.com--,
laten we gaan een plek een beetje meer reasonable-- stanford.edu.
En ik ga om te gaan bekijken, Developer, Bron weergeven.
Het is lelijk, maar notice-- en ik zal in de mededeling te zoomen
sommige dingen die vertrouwd is reeds.
Er is dit hier, die een browser.
Hier komt HTML5.
Er is HTML.
Blijkbaar is er een toeschrijven dat ik niet
Gebruik dat specificeert de taal van de pagina,
en dit kan helpen met automatische vertaling en dat soort dingen.
Hier is de kop van de pagina.
Hier is de titel van de pagina Stanford.
Er is een tag ik niet praten over yet-- Meta tag.
Het is gewoon een soort van achtergrond informatie.
Het helpt met SEO, of zoek machine optimalisatie,
of Google-zoekresultaten of iets dergelijks.
Maar als we blijven zoeken, blijven kijken, hier is de Body tag.
En er is trossen van andere labels hebben we nog niet over gesproken.
Maar Div is een ten verdeling van de pagina.
Het is alsof een onzichtbare rechthoek als je soort wilt mentaal
verdeel uw pagina in verschillende eenheden online.
En dan veel divs I zie, iets genaamd Class,
maar we zullen hierop terugkomen.
>> Dit is interesting-- Forms.
Formulieren zijn over het hele web.
Elke zoekvak je bent ooit gebruikt is een vorm.
En, ja, laten we eigenlijk zien.
Formulier.
Actie.
De werking van dit formulier, om welke historische redenen, is dat URL.
Methode is "post."
Blijkt dat HTTP-verzoeken kunnen gebruiken het werkwoord "krijgen", zoals we eerder zagen,
of "post."
En zal een verschil te zien dit in een moment.
Laten we eens echt zien wat dit is.
Laat me terug naar pagina Stanford gaan.
Welke vorm hebben ze het over, denk je?
Wat springt uit bij u?
>> PUBLIEK: zoekvak.
>> DAVID J. MALAN: Yeah.
Dus op naar de rechterbovenhoek hier is dit zoekvak.
En dat is hoe ze geïmplementeerd het-- een tag dat is letterlijk open beugel vorm.
En dan laten we zoeken naar iets.
Laten we zoeken naar een buddy van mine-- "Nick Parlante."
Enter.
En natuurlijk, het ging om een iets andere URL.
Laat me hier terug te gaan.
Laten we zoeken voor "cursussen."
Verdorie.
We gingen naar een andere URL.
Dus, Stanford's toe te voegen wat magie dat ze me niet re nemen om de URL
die we zagen in de actie toeschrijven daar.
Maar deze vorm hier is louter geïmplementeerd door middel van deze markup hier, deze tags.
In feite, hier is de input voor het type zoekopdracht dat u wilt.
Hier is de input voor een ander type zoekopdracht.
Hier is de input voor de string zelf.
En zo het doel is niet om te wikkelen onze gedachten rond al deze tags
maar gewoon om te zien.
Het is gewoon het openen en sluiten labels en op zoek dingen.
Ja?
Victoria?
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Dat is een goede vraag.
Dat is een beetje lastiger te zien.
Laat me terug te komen op dat vraag in slechts een paar minuten
wanneer we kijken naar iets genaamd CSS of cascading style sheets,
en we kunnen proberen af ​​te leiden zo veel van de pagina.
Dus als we nu een kijkje nemen op google.com, laten we zien wat hun pagina eruit ziet.
Je zou they're-- dat is leuk vandaag.
OK.
Helemaal klaar.
Oké, dus Bron weergeven.
Je zou denken dat Google heeft echt leuk broncode.
Dus, blijkbaar, wat is hier aan de hand?
En in feite is dit zelfs HTML.
Dit is iets JavaScript genoemd.
En laten we blijven gaan en gaan.
Ik weet niet eens weten waar de pagina begint.
Ik ga Command gebruiken F, geopend beugel HTML.
Oké, daar is het.
Ik vond het begin van de pagina en er is zo veel spullen in hier.
>> Wat is er eigenlijk aan de hand?
Nou, weet je wat, kunnen we dit opruimen.
Als ik in plaats daarvan ga naar deze Inspect toolbar, deze speciale diagnose-instrument,
en ga niet om te netwerken, waar we blijven gaan vandaag,
maar als ik naar Elements, wat is echt leuk
is dat een browser een stuk veel beter ogen dan ik.
En de browser kan lezen die rotzooi van een webpagina,
dat HTML-mail we gewoon bekeken, en kan
ontleden het of lezen en analyseren en formatteren
in een mooi mens-vriendelijke manier.
Dus wat ik nu zien in dit scherm hier
onder Elements, exact dezelfde inhoud, maar ze hebben alles ingesprongen,
ze hebben het ingekleurd, maar Het is exact dezelfde tekst
dat ik gedownload van de server.
>> En wat is nu mooi is dat ik kan zien in het lichaam, voor instance-- bericht,
de pagina is nog steeds bestaat van slechts een kop en een lichaam,
en ik kan hiërarchisch duiken hier.
Merk op dat Google lijkt te hebben om deze en deze divs--.
Ik kan uitbreiden dat.
Er is een hele boel andere divs.
Dus het is een beetje complex.
Maar wacht.
Dit lijkt zo veel meer leesbare, relatief, dan dit.
Waarom is Google gênant zich door alleen het verzenden
deze enorme puinhoop van code van een aantal sort gewoon iets uit te voeren
dat ziet er zo eenvoudig op het eerste gezicht?
Zoals, waarom niet ze meer ruimte toe te voegen?
Waarom hebben ze geen druk op Enter zoals ik deed?
Kijk eens hoe goed ik was bij het schrijven van een webpagina.
Ik druk op Enter zo ijverig.
Ik ingesprongen dus alles is zo mooi en leesbaar.
Waarom heeft Google niet dezelfde praktijk?
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Goed.
Heel eerlijk.
Ze hebben geen enkele hebben persoon bij Google handmatig
bijwerken van de home page meer.
Het is geen 1999 meer.
Dus ze hebben software.
Ze hebben andere tools die genereren dynamisch ze HTML.
Natuurlijk, dat code zelf werd geschreven door mensen,
maar de realiteit is, het is heel eerlijk om te zeggen,
de browser doet zeker niet schelen hoe rommelig de code.
Maar er is een nog dwingende technische reden
dat Google verdeelt hun HTML code in zo'n slordige, schijnbaar
overweldigende manier allemaal bij elkaar gepakt met zeer weinig way-- zeer weinig
in de manier van het formatteren zoals ik deed.
>> PUBLIEK: [ONVERSTAANBAAR]
>> DAVID J. MALAN: Sneller?
Waarom?
En wat zei je, Lydia?
Sneller?
Waarom sneller?
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Er is geen ruimte om te lezen.
Ja.
Dus na te denken over wat een ruimte.
Dus elk teken op het toetsenbord neemt een bepaalde hoeveelheid ruimte te vertegenwoordigen,
hetzij fysiek, alsof het neemt dat er veel ruimte,
of ergens onder de motorkap, dat het geheugen vereist.
En als een aside-- en we zullen praten meer over dit tomorrow--
elk teken op het toetsenbord vereist meestal 8 bits of een byte.
Dus een patroon van 8 nullen of degenen, of slechts 1 byte, zoals we
mensen zouden in het algemeen zeggen.
Dus dat is klein, maar het is nog steeds niet-nul.
Het is nog een bepaalde hoeveelheid ruimte.
Dus als een ingenieur of Google raakt de spatiebalk maar een keer, en veronderstellen
Google als super-popular-- veronderstellen dat een miljard mensen
bezoek hun home page per dag, of een aantal mensen
Ga naar de home page van een miljard keer per dag,
hoeveel extra bytes heeft dat software engineer kosten slechts Google
door het raken van zijn of haar spatiebalk een keer?
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Niet helemaal zo slecht.
Slechts één byte keer per miljard.
dus een--
Publiek: 8 miljard gigabytes.
DAVID J. MALAN: Niet 8 miljard.
8 miljard bytes.
Maar 1 gigabyte.
1 gigabyte zou de eenheid van de maatregel.
Als hij of zij doet twee ruimten, 2 gigabyte.
Drie gigabytes.
Rechts?
Het schalen duur.
En dus in gevallen als Google, die, toegegeven, zijn extreme gevallen,
Er zijn andere zaken die gewoon ontstaan door het maken van zeer redelijke beslissingen
of het nemen van zeer eenvoudige menselijk handelen, omdat het deze vergrote effect.
Dus een van de redenen dit ziet er zo gecomprimeerd
is precies zoals Victoria said-- het was gewoon gegenereerd door computers toch.
Dus geen big deal.
Laat de browser figure it out.
Maar ook bewust niet veel ruimte,
omdat de ruimte is niet noodzakelijk.
En de ruimte kost daadwerkelijk geld.
>> Het ofwel kost tijd, want net te duwen
dat er veel meer gegevens uit google.com hoofdkwartier net
heeft om een ​​bepaalde hoeveelheid van te nemen tijd, zelfs als het milliseconden
of microseconden, maar dat draagt ​​bij tot dan zo veel gebruikers, of meer waarschijnlijk,
het waarschijnlijk kost geld.
Google waarschijnlijk aangesloten op iemand anders in de wereld, een
van deze turen punten, en als ze
een soort van financiële relatie waarbij hun gegevens kost geld,
ze kan net zo goed minimaliseren hoeveel gegevens
ze spugen op hun internetverbinding.
>> Dus de grappig ding, maar uiteindelijk, of misschien de geruststellende ding,
is dat, hoewel dit ziet er vreselijk overweldigend, aan het eind van de dag,
het is nog steeds exact dezelfde principes als Deze zeer eenvoudige pagina hier van een HTML
pagina.
Dus gewoon samen te vatten en zodat u hebben een canonieke versie als je niet
volgende samen met de keuze hier, hier misschien wel de meest eenvoudige webpagina's,
dus iets om mee te spelen met misschien later.
>> Nou, laten we de invoering van een paar andere ideeën nu.
We staan ​​op het punt in te voeren zoiets als een stijl tag.
We kunnen deze pagina stileren in meer interessante manieren.
Dus terwijl HTML e-mail heeft alles te markeren
de gegevens, een soort van het specificeren van een browser hoe de data te structureren,
waar te zetten, CSS, of cascading style sheets,
is een tweede taal over het algemeen wordt vermengd met HTML
zoals we zullen see-- maar we kunnen reinigen dat in een moment-- die draait
zij de laatste mijl, en het stileert het.
Het krijgt de kleuren precies goed, de lettergroottes precies goed,
de plaatsing precies goed.
Het draait allemaal om de esthetiek of formatteren, niet over
de fundamentele gegevens zelf.
En de makkelijkste manier om te tonen Dit is misschien wel het goede voorbeeld.
Dus ik ga om te gaan over aan mijn eenvoudig tekstbestand.
En in slechts een moment, zal ik wandelen ons door het proces
om dit te doen onszelf.
>> Ik ga terug naar mijn dossier hier en reload de pagina gewoon
om te bevestigen hoe het eruit ziet.
Dat is waar we op nu.
Ik voel me als kinderen zou genieten met wat kleur aan deze webpagina.
Dus ik ga hier te gaan in de kop van de pagina.
En ik ga stijl / style doen.
En dan binnenkant van deze, ga ik het lichaam van mijn page-- vertellen
en deze opmaak is, op het eerste gezicht misschien een beetje
vreemd, maar conventioneel.
Ik ga om te zeggen dat de achtergrond kleur van deze pagina moet groen zijn.
En dit is helaas soort niet het beste ontwerp.
Merk op dat eerder in de wereld van HTML,
Ik zei dat attributen zijn deze key-waarde paren.
Iets gelijk citaat unquote "iets."
In de wereld van CSS, die ontworpen door een aantal verschillende mensen,
zij besloten dat in hun wereld, key-value pairs
zou woord colon iets te zijn.
Dus het is hetzelfde idee, dat wel.
Het associëren van een waarde met enkele sleutel die een of andere manier
invloed op het gedrag van deze pagina.
>> En je kunt waarschijnlijk wel raden.
Wat is dit waarschijnlijk te doen, zelfs als je nog nooit hebt
gezien HTML of CSS voor?
PUBLIEK: Verander de achtergrondkleur.
DAVID J. MALAN: Ja, verander de achtergrondkleur.
En in het bijzonder de achtergrondkleur van het lichaam.
Maar voor zover orgaan voor nu is het web
page-- het is het enige onder de titelbalk really--
Het gaat waarschijnlijk om beïnvloeden hetzelfde.
Dus laten we eens kijken.
Laten we dit op te slaan.
Ga hier en herladen.
Het is vrij afschuwelijk.
En wat er aan de hand Hier is een neveneffect.
Ik dacht dat ik koos voor deze afbeelding willekeurig.
Waarom is de green niet doordringt achter Mickey?
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Precies.
Het blijkt dat de beelden, vrij veel Alle beelden die we zouden kunnen gebruiken,
zijn rectangles-- van rechthoeken.
Zelfs als Mickey heeft een aantal bochten zichzelf en heeft een achtergrond,
In deze context moet iets zijn.
Het heeft wit zijn.
Het is zwart of iets anders te zijn.
Het kan transparant zijn.
En in feite, ik kon Open Mickey Mouse hier
in een programma genaamd Photoshop of iets dergelijks
en verander dat alles wit achtergrond transparant,
zodat de groene zou doorschemeren.
Maar dat is iets wat ik nodig zou hebben om te vragen van mijzelf of een graficus
of ontwerper bij mijn bedrijf, bijvoorbeeld,
te doen, vooral omdat ik gewoon leende deze van het internet.
Maar dat is waarom dit gebeurt.
>> Dus wat zouden we willen doen?
Nou, we zouden willen we zeggen: hoop echt dat u geniet van uw verblijf.
En voor nadruk, ik wil deze sterk te maken,
en dus ik zal zeggen geopend sterk en sluit sterk en vervolgens opnieuw.
En het is een beetje moeilijk te zien op de projector
maar misschien nu echt springt uit bij u een beetje meer.
Zo kunt u cursief te plaatsen in deze Zo vet facing op deze manier.
We kunnen de kleuren te veranderen.
In feite, enkel voor de kick, ik ben gaan om verder te gaan en dit te doen.
Ik hou er niet echt hoe mijn alinea's zijn zo dicht bij elkaar,
dus ik zou zoiets als dit te doen.
Ik ga naar de browser te vertellen, veranderen elke paragraaf tag te hebben,
laten we say-- eigenlijk, weet je wat, laten we lijn het text-align, center.
En nogmaals, ik weet dat dit alleen omdat iemand leerde het me
of ik heb het opgezocht in een online naslagwerk.
Dus laat me dit op te slaan.
En, ah, nu heb ik gecentreerd het beeld daar.
En eigenlijk, weet je wat, als Ik beweeg mijn afbeelding in een paragraaf
tag-- dus een derde paragraaf, ook al is het niet tekst.
Laten we behalve dat en herladen.
Nu is de pagina begint te soort kijken van-- Ik bedoel, het is nog steeds vrij lelijk,
maar in ieder geval lijkt het alsof ik bracht twee minuten in plaats van één minuut
het maken.
>> En zo, stapsgewijs, kunnen wij Deze esthetische veranderingen nu naar de pagina?
Ik heb niet echt veranderd de gegevens in de pagina anders dan toevoeging van het woord echt.
Ik heb metadata toegevoegd, als je wil.
Hey, browser, maken het woord "echt" bold.
De gegevens zijn echter niet sterk.
Dat is metadata.
De data is "echt."
Dus hebben we nog een aantal van dezelfde concepten als voorheen.
Nu, natuurlijk, dit is niet op het web, dus ik ga nog een laatste stap doen hier.
>> Ik ga om te gaan naar hello.html en gewoon te markeren en kopieer deze.
En nu ga ik gaan in Cloud9, waarin
Ik zal u door in slechts een moment.
En de kans groot dat je snel zijn, als niet reeds op een scherm als dit.
En laat ik geef je een snelle tour van wat Cloud9 eigenlijk is.
Dus nogmaals Cloud 9 is Deze cloud-based service
dat geeft jou en mij de illusie van het hebben van onze eigen virtuele machine
in de cloud, technisch een container in de cloud,
dat we vol beheerdersrechten aan.
Dus in theorie, niemand anders in de wereld heeft
toegang tot het scherm ik ben op zoek naar rechts nu,
behalve misschien het volk die lopen van de site,
omdat technisch ze hebben fysieke toegang enzovoort.
>> Dus wat zien we in deze omgeving?
Ik ga om uit te zoomen, want het is een beetje klein.
En laat me wijzen op hier slechts voor een ogenblik.
Aan de linkerkant van mijn en uw scherm, is er een bestandsbrowser aan de linkerzijde.
Zo op elkaar lijken in de geest Mac OS en Windows.
Dit zijn alle bestanden in mijn rekening.
En standaard, als uw rekening is als de mijne,
je zult zien of binnenkort helloworld.html en readme.md.
Hier aan de rechterkant, dit is waar mijn tekstbestanden gaan om te gaan.
Als je ooit hebt gebruikt Microsoft Word of Kladblok of TextEdit,
dit is mijn woord editing van bestanden gaat om te gaan.
En dan is de meest mysterieuze kenmerk van deze omgeving
dat we niet echt nodig om te gebruiken is hier beneden riep een Terminal-venster.
Als u hebt gebruikt DOS uit vroeger, dit is de Linux
of de Linux-equivalent van DOS.
Het is een op tekst gebaseerde interface-- geen muisklikken, geen slepen.
Alles wat je kunt doen is het type commando, maar die commando
kan bestanden maken, bestanden verplaatsen, geopend directories, dicht directories,
doen een aantal dingen.
Maar voor nu, zullen we gewoon besteden onze tijd hier.
>> En dus laten we dit doen.
Als je in deze omgeving, die je moet
als je een werkplek gecreëerd al, ga je gang en gewoon gaan omhoog
naar Bestand, Nieuw voor een moment.
En dat zal u een nieuw te geven tab hier in het midden.
En ik gewoon-- en laten ga je gang en dit te doen.
Laten we ga je gang en nu doen Bestand, Opslaan en ga je gang en noemen het hello.html,
niet te verwarren met helloworld.html, die
kwam met uw nieuwe gratis account, dat is gewoon een voorbeeld bestand.
U ziet het plotseling verschijnen, waarschijnlijk op de linkerzijde,
en het tabblad nog steeds open.
En laat me je nu aan te moedigen om te recreëren Dit bestand of een aantal varianten daarvan.
En als je niet helemaal kan zien op de scherm is identiek aan de objectglaasjes
dat heb je waarschijnlijk in een ander tabblad.
>> Dus in het kort, maak uw eerste webpagina, opslaan, en vervolgens in slechts een moment,
Ik zal je laten zien hoe je kan dit ook daadwerkelijk te bekijken.
Maar veranderen ten minste één ding.
Verander helloworld naar iets van je eigen keuze,
zodat u ervan overtuigd bent dat het jouw bestand en niet degene die ik zojuist hebt gemaakt.
Okee.
En als je geen ready-- rush-- als je klaar bent,
ga je gang en sla het bestand op Zodra u deze wijzigingen heeft aangebracht.
En als je het klikt Run knop omhoog top, dit
moet een nieuwe tab die zal vertellen openen je wat URL kunt u uw bestand bezoeken,
maar het kan een moment te nemen citaat unquote "start Apache," die
is de naam van de webserver.
Dus wees voorzichtig om precies te doen wat er in het dossier uiteindelijk.
Dus nu, zal ik in te zoomen.
Als ik begin te typen open beugel HTML, bericht
het is gevraagd mij om mijn gedachten af ​​te maken.
En als ik klaar met mijn gedachte, dat geeft mij automatisch de afsluitende tag.
Maar de verwachting is dan zal ik hit Enter, en ga dan binnen is er
en doen het hoofd binnen en dan doe ik het lichaam binnen.
En het is een beetje raar op het eerste, want het doet het werk voor u,
maar beseffen dat uiteindelijk het bespaart u toetsaanslagen.
En inderdaad, een gemeenschappelijk kenmerk van programmeeromgevingen deze dagen
zowel voor webontwikkeling zoals Hierdoor en werkelijke programmering,
die we zullen praten over morgen, is deze auto-complete functies,
dingen die gewoon toestaan ​​dat een programmeur of ontwerper
minder toetsaanslagen te typen volbrengen hetzelfde.
Soms is het goed, dat wel.
Soms is het gewoon vervelend.
En, nogmaals, als je eenmaal hebt getranscribeerd de schuif of een variant daarvan,
klikt u op de knop Uitvoeren boven.
En vervolgens in de bodem venster, zult u worden geïnformeerd
op welke URL kunt u een bezoek uw webpagina.
Mine, bijvoorbeeld ten business-daharvard.c9users.io
enzovoorts.
Oké, zo is, laat mij-- vragen?
Een andere vragen over het net dit werkt voordat we functies toe te voegen?
En laat me voor te stellen, maar te krijgen mensen comfortable--
want het is één ding om gewoon copy-paste blindelings wat ik heb gedaan.
Maar gewoon zo dat mensen worstelen met ten minste een takenlijst,
Ik ga aan te zetten wat muziek.
Ik ga een lijst met voorstellen dingen die je kan mogelijk toevoegen.
En je kan zeker gebruik maken van Google.
En waarom doen we niet gewoon stel voor dat je probeert op te lossen
ten minste één hier bepaald probleem.
Dus in termen van markeringen, laat me hergebruiken deze hier.
>> Eigenlijk, laat ik in tekstvorm.
Laten we zeggen dat er onder de labels we misschien Gebruik hier zijn enkele labels hier.
We hebben de paragraaf tag gezien.
Nu het gaat om auto-complete.
Paragraaf tag, het anker tag.
Laten we zeggen dat je wilt maken iets groters,
dus je zou like-- de overspanning tag kan helpen.
Nou, je zou wat hulp nodig voor dat in slechts een moment.
We hebben div gezien.
Je zult zien dat er tabel.
Er iets genaamd tr, td.
Th, td.
Kom terug naar dat in een moment.
Wat anders zou handig zijn?
Er is sterk.
Er is aandacht, of liever em.
There's-- wat anders zou je hier zin in?
Nou, we nemen een kijk naar die samen.
Vorm, die we hebben gezien.
Er is vorm.
Er is input en een paar anderen.
Oké, laten we dit doen.
Te beantwoorden van een Victoria's vraag, laat ik eerst
maar zorg ervoor dat iedereen in staat om hun gedag werkend te krijgen.
Dan laat ik me even een paar andere ideeën.
Dan zullen we laten mensen op te lossen een probleem op hun eigen.
Dan zullen we eigenlijk terugkomen die begrip vorm,
en we eigenlijk opnieuw te implementeren samen het front-end interface,
zo te zeggen, voor Google zelf.
We zullen gebruik maken van Google als de back-end en laat ze doen het harde werk, het zoeken,
maar we zullen opnieuw de front-end van Google en het zoekformulier
dat ze op hun eigen home page.
En dus zullen we terugkomen naar deze tags in slechts een moment.
>> Dus dit was wat ik voorgesteld slechts een moment geleden.
We kunnen de stilering toevoegen aan een pagina binnenkant van deze stijl tag,
en we kunnen de achtergrond stileren kleur, de tekst uitlijning,
of het midden of links of rechts.
Maar heel snel je zou te vinden of een webdesigner
zou ontdekken dat dit wordt een beetje onhandig,
want je doet wat genoemd mengen inhoud
met de presentatie daarvan.
Je bent het mengen van uw gegevens en de esthetiek daarvan.
En in feite, als je bedenkt wat er gaat gebeuren 'tijd--
Dit is een zeer klein webpagina, natuurlijk.
Maar als ik de inhoud toe te voegen aan deze pagina en ik stijl toe te voegen aan deze pagina
de pagina zeer snel weer steeds langer en langer.
En stel dat ik wil hebben een tweede webpagina die
deelt een aantal van deze attributen.
Stel dat mijn tweede website voor mijn site-- ook, ik wil alles center,
en ik wil ook alles met een groene achtergrond.
Ik ben er vrij veel aan de hand te hebben Kopieer en plak een aantal van deze lijnen
in die tweede bestand, wat prima voelt.
Het zal het probleem op te lossen.
>> Maar wat als ik wil een derde pagina of een 30 pagina of een 40 pagina?
Nu ga ik om te kopiëren en te plakken veel dubbele code
in meerdere bestanden.
En zo veronderstellen dat Ik beslis of ik word verteld,
hey, we zijn niet met behulp van een groene achtergrond meer.
We gaan aan de slag met oranje.
Wat heb je te veranderen?
Nou, dan moet je die stijl te veranderen van groen naar oranje in hoeveel plaatsen?
Net als 30 of 40 plaatsen.
Het is vervelend.
Het is foutgevoelig.
Er is een aantal redenen waar je niet zou willen opwekken
dat soort pijn voor jezelf.
En dus zou het niet leuk zijn als we konden nemen wat ik zojuist
gebracht tussen deze twee gele labels, die stijltags,
factor het uit, en zet al mijn stilering in een centraal bestand
alle 30 of 40 van mijn andere bestanden lenen van of andere manier verwijzen,
niet anders dan de netwerken diagrammen we deden voordat?
>> Dus als ik ga hier, ik ben gaan om daadwerkelijk te stellen
dat we de plaats van de stijl tag met iets
riep de link tag, die is verschrikkelijk, afschuwelijk genoemd,
omdat je niet gebruik maken van de koppeling tag aan wat te maken
wij mensen kennen als een link in een webpagina.
Daarvoor, die tag gebruikt u?
Hoe maak je een link in een webpagina?
Publiek in een.
DAVID J. MALAN: De een of anker tag, die voorgingen naar Disney.
De link tag hier zegt dit-- link naar een bestand genaamd
styles.css de relatie waarin gaat worden dat het mijn stylesheet.
Dus dit is een van de S in CSS-- cascading style sheets.
Style sheet-- twee van de S in CSS.
Cascading style sheet.
Dit betekent gewoon, hey, browser, ga vind styles.css op de lokale server
en gebruik het als uw stylesheet, waardoor binnenkant van dat bestand
gaat alle worden stylizations dat we net hebben gedaan.
En dus wat dat bestand eruit zou kunnen zien is het volgende.
En ik zal gewoon dit te doen is een snelle Bijvoorbeeld, omdat we niet nodig hebben
te veel in het onkruid hier te komen.
Maar als ik dit te kopiëren, wat ik voorstellen is dat een programmeur een nieuw bestand,
plakken in die lines-- whoops-- plakken in die lijnen,
opslaan als styles.css, en vervolgens in het andere bestand, verwijdert u dat allemaal
en te vervangen in plaats daarvan via deze link tag.
Zodat als ik een link href = "styles.css", de relatie zal "stylesheet" te zijn
close tag.
Bewaar het.
Ga terug naar mijn helloworld.
Herladen.
>> Letterlijk niets is gebeurd.
Dat is een goede zaak, want het betekent dat het eigenlijk allemaal werken.
Om zo veel te bewijzen, veronderstel ik een typo, en ik noem dit "styles.css"
met een hoofdletter S, dat is incorrect, en vervolgens opnieuw.
Nu kun je zien dat het werkt gewoon niet.
Nu, waarom?
Nou, laten we gebruik maken van een techniek uit de eerder.
Laat me ga je gang en, in mijn browser, Chrome, ik ben
gaat openen die speciale tabblad Netwerk als voorheen,
en laat me opnieuw te laden de pagina.
Wat ben je niet verbaasd zijn om nu te zien?
Of misschien bent u verbaasd om het te zien.
Hoe dan ook, wat zie je nu?
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Het is niet gevonden.
Waarom is het niet gevonden?
Nou, Styles.css-- hoofdstad S-- bestaat niet.
Ik verkeerde naam het.
Eenvoudige typo.
Maar ik krijg begrijpelijkerwijs nu 404, omdat de server zegt, hey,
het is niet gevonden.
Letterlijk, ik weet het niet wanneer dat bestand is.
Teneinde daardoor de browser laat je zien wat het kan,
de ruwe inhoud van de pagina, die een 200, de HTML,
maar de stilering kan niet daarna worden toegevoegd.
En dit is wat er bedoeld wordt met het draperen.
U kunt soort toevoegen na, en het soort
verfijnt de esthetiek van de webpagina.
En je kunt zelfs overschrijven die stijlen met nog een andere stylesheet bestanden
als je wil.
Het is niet gevonden, maar in dit geval, want natuurlijk, ik verkeerde naam het.
Zo zou ik moet eerst vast te stellen dat.
>> Dus laten we gaan vooruit en stellen het volgende.
Laten we gaan en dit te doen.
Beginnend met misschien uw helloworld bestand,
laat me gewoon uit te nodigen een paar van zijn voorzien van suggesties.
Dus, Victoria, je wilde maak wat tekst groter, toch?
Oké, dus we kunnen do tekst groter te maken.
En we zullen elkaar afrukken slechts een probleem op te lossen.
Maak tekst groter.
Ik ben niet van plan om te vallen het schrijven van dit toen we
hebben bullet technologie recht over hier.
Dus sommige problemen.
Dus we gaan proberen om tekst groter te maken.
Okee.
Wat anders zou iemand voor te stellen?
Wat zouden we willen om te doen in een webpagina?
Laten we komen met een korte lijst van dingen
en dan delegeren aan de groep om dit uit te zoeken.
>> PUBLIEK: [ONVERSTAANBAAR]
>> DAVID J. MALAN: OK, positie tekst aan verschillende kanten van de pagina?
Okee.
Iets anders.
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Het is.
Dus een gif is slechts een ander bestandsformaat.
We gebruikten gewoon, wat een png of jpg waarschijnlijk?
We gebruikten een jpg.
Als je nieuwsgierig, een buitensporige bent antwoord op uw vraag
wordt een jpg wordt meestal gebruikt voor foto, want het ondersteunt
miljoenen kleuren of 24-bits kleuren.
Een gif wordt meestal gebruikt voor, zoals, internet memes deze dagen-- animaties,
als animated gifs.
Maar het gebeurt om een ​​kleinere kleur te gebruiken palet, slechts 256 mogelijke kleuren,
maar het ondersteunt transparantie en animatie.
En dan is er nog png, die steunt transparantie en meer kleuren
maar niet animatie.
Dus het is een trade-off.
Dus het toevoegen van een gif, maar, zou functioneel
gelijk aan het toevoegen van een png of jpg.
Ja.
Bron van het beeld gelijk.
Dus iets anders.
Laten we komen met iets dat stuurden we naar Victoria te doen hier.
>> PUBLIEK: knoppen toevoegen voor een formulier.
DAVID J. MALAN: OK.
Dus knoppen toe te voegen voor een formulier.
En we zullen dat men samen doen.
Dus dat zal een perfecte segue zijn direct na deze uitdaging.
Nog iets anders?
Wat zou je graag willen doen?
Het web voelt erg underwhelming als dit is alles wat we kunnen doen.
PUBLIEK: Verander de kleur van de tekst.
DAVID J. MALAN: Verander de wat?
PUBLIEK: kleur van de tekst.
DAVID J. MALAN: Verander de kleur van de tekst.
Okee.
Dus, laten we dit doen.
Gewoon weer zo dat je niet, enkel uit het hoofd, doen precies wat ik doe,
Ik ga om te schakelen muziek voor misschien vijf minuten hier.
U bent welkom om Google te gebruiken.
U bent van harte welkom om te vragen, en Ik zal een hint in je oor fluisteren.
U bent van harte welkom om te kijken Dan op elkaars schouders.
Maar lossen slechts een van deze problemen.
Maar we zullen de laatste, het doen vormt een, als we konden, samen.
Dus vijf minuten op te lossen een van deze problemen
met behulp van Google, intuïtie, of een een andere manier voor u beschikbaar.
>> [Muziek]
Okee.
Geen zorgen als je wilt te blijven sleutelen,
maar ik zal een paar bederven Deze antwoorden.
Dus de eerste suggestie van Victoria was om tekst groter te maken.
Dus er is een paar manieren om dit te doen.
Ik heb momenteel gerestaureerd mijn scherm van deze omvang,
al heb ik ingezoomd kunstmatig alleen maar om dingen te zien.
En laten we dit doen.
Laat me ga je gang en grijp een aantal generieke Latijnse tekst
gewoon zo hebben we iets om mee te werken.
Dus geef me maar een moment.
Ik zal drie alinea's te maken.
OK.
Dit zal een beter voorbeeld zijn.
Dus voor de nieuwsgierigen, in mijn hello.html, ik heb net
geplakt drie onzinnige Latijns-leden
zodat we wat tekst om mee te werken.
En Victoria's doel was om een aantal van de tekst groter.
Dus ik kon, zoals voorheen, ga hier.
En laat ik doe het op de juiste manier.
Ik ga om een ​​link te hebben tag die verwijst naar een bestand
genaamd "styles.css," de relatie waarvan again "stylesheet."
En dan ga ik te redden en openen van deze "styles.css."
>> Dus, zoals voorheen, heb ik de bekwaamheid op dit CSS-bestand
om daadwerkelijk te overschrijven de standaard esthetiek van een webpagina,
en de standaard esthetiek, Natuurlijk zijn behoorlijk saai.
Het is een soort van normale lettergrootte, zwart tekst, witte achtergrond, enzovoort.
Dus stel ik wil maken alles Tekst vergroten.
Ik kon een paar dingen doen.
In mijn styles.css bestand, I zou kunnen zeggen, weet je wat,
gelden de volgende aan het lichaam van mijn pagina.
Ga je gang en maak de lettergrootte 24 punten,
dat is een nummer dat ik zou kunnen te gebruiken in Microsoft Word.
Laat me terug naar mijn web pagina hier en herladen,
en je kunt zien dat het is al veel groter.
En we kunnen krijgen een beetje gek, net als wij kan op een desktop--
maken het 96 punten.
Herladen.
En het wordt steeds een beetje logge op dit punt.
>> Maar ik kon een beetje meer precies te zijn.
In plaats van dit stylesheet om het lichaam van mijn pagina,
wat anders zou ik pas het toe in plaats daarvan, wat andere tag die misschien nog steeds
werken op dezelfde manier?
>> Publiek: De p tag?
DAVID J. MALAN: P tag.
Zodat de kop zou niet juist omdat het hoofd,
je kunt eigenlijk niet de controle van de esthetiek van.
Er is daar of niet zowel tekst.
Maar de p tag-- ik kan duiken in een klein diepere, zo te zeggen, de paragraaf
labels.
En hoewel er drie, dat is prima, want in CSS,
als ik zeg gewoon "p", dit betekent gelden de volgende
elke tag die overeenkomt met deze selector, de selector gewoon
is de naam van het label.
Dus waar zie je een "P", gelden de lettergrootte,
en laten we maken het meer redelijke again-- 24 punt.
En weet je wat, gewoon voor een goede maatregel,
laten we de kleur rood net voor het moment.
En nu als ik herladen, nu zijn we zie drie lelijke paragrafen.
>> Maar nu denk dat ik een soort van-- Ik wil dat de eerste paragraaf
te springen op de gebruiker.
Ik wil niet alleen maar toenemen de lettergrootte van alles.
En dus wil ik eigenlijk te identificeren of onderscheid tussen deze punten.
Dus laten we te ontdoen van de rode, want dat is gewoon een soort van plakkerig,
en laten we gaan vooruit en maken de lettergrootte 12-punts standaard
zodat we weer iets een beetje meer redelijk.
En nu wil ik alleen maar om het te vergroten lettergrootte van de eerste paragraaf.
Ik kan dit doen in een paar wegen, maar een manier die
misschien wel het meest educatieve aan de Momenteel is het volgende doen.
Laat me gaan en zeggen dat dit paragraaf heeft een unieke ID van de "eerste."
Ik kon dit wat ik wil bellen.
Ik zou deze "foo" noemen of enig ander woord,
maar ik ga het sommige geven semantisch betekenisvolle naam
zoals "de eerste."
Dit is de unieke identificatie, de ID, voor mijn eerste paragraaf.
>> Wat ik nu kan doen in mijn stylesheet is een beetje nauwkeuriger.
In plaats van te zeggen, toe te passen het volgende aan de p-tag,
Ik kan zeggen dat de following-- gelden de volgende
of selecteer het HTML-element dat heeft een unieke ID van de "eerste."
Wat wil ik van toepassing zijn?
Een lettergrootte van 24 punten.
Dus ik heb twee selectors nu.
Men maakt alle van de punten 12 punten.
Maar deze, vooral omdat het gaat second-- komt het laatste in de file--
Dit heeft een cascade-effect.
Ik heb zojuist al mijn paragraaf-tags 12-punts,
maar dit nu cascades en overschrijft dat voor alle elementen
in de pagina, elke tag in de pagina waarvan unieke ID is citaat unquote "eerst."
En hashtag in deze context gewoon betekent "unieke identificatie."
Ik zet het niet in het HTML-bestand.
Ik, hier, gewoon zeggen citaat unquote "eerst."
>> Dus laat me opnieuw te laden.
En nu zie ik, ah, OK.
Ik bedoel, het is niet zo mooi, maar het is een soort
of zoals het voorwoord van een boek of iets dergelijks,
waar de eerste paragraaf is groter.
Kon nog preciezer zijn met slechts de eerste letters, maar in ieder geval
Ik heb meer controle uitgeoefend.
Nu maybe-- misschien wil ik dit doen af en toe om wat voor reden dan ook,
en dus heb ik dit niet wil van toepassing op slechts één HTML-tag.
In plaats daarvan laten we say-- laten Ook het volgende doen.
Class = "import".
Overwegende dat een ID wordt gebruikt om op unieke wijze identificeren één ding, een tag,
in uw webpagina, wordt een klasse bedoeld om te worden gebruikt op een aantal elementen of markeringen
op uw webpagina.
Dus het is herbruikbaar.
Een ID is niet herbruikbaar.
Een klasse is herbruikbaar.
>> En weet je wat, om welke filosofische reasons--
Ik heb niet het einde van mijn thought-- ik ga zeggen
dat de eerste paragraaf en de tweede paragraaf zijn belangrijk.
Dus ik ga naar de klasse met de naam van toepassing "Belangrijk", dat, als ik spaar mijn dossier
en herladen, heeft geen functionele gevolgen nog niet.
Maar ik heb een aantal extra metadata naar het bestand,
soort van iets apart de kerngegevens van het bestand,
zodat nu in mijn stylesheet, als ik in plaats daarvan zeggen ".important '- je weet wel,
iets dat is belangrijk, ik ben gaat font-kleur te maken, red--
of liever niet font-kleur, maar kleur.
Er is inconsistenties in CSS helaas.
En herladen.
Let nu op de eerste twee alinea's zijn rood
maar niet de derde, omdat ik alleen maar paste de klasse van "belangrijke"
de eerste twee van deze dingen.
>> Dus in IDs, heb je de mogelijkheid om heel precies te specificeren.
Met klassen, je hebt herbruikbaarheid.
Maar in beide gevallen, let op de soort van goed-ontwerpprincipe
waar ik meegenomen uit alle van de esthetiek aan mijn styles.css bestand.
Dus er is geen slordigheid hier.
Er is geen melding gemaakt van rood of vet-facing of lettergrootte in dit bestand.
Eerder heb ik semantisch, betekenisvol gekenmerkt mijn gegevens,
hier is een aantal belangrijke gegevens.
Hier is wat meer belangrijke gegevens.
Bovendien is hier de "Eerste" van mijn belangrijke gegevens.
Dus HTML is alles over het soort van tagging, letterlijk, woorden
en alinea's en constructies in uw pagina met deze kleine hints, als je
wil, dat u kunt een of andere manier profiteren van het gebruik van
andere technieken zoals CSS op deze manier.
>> Dus in antwoord op de vraag van Victoria's, kunnen we tekst groter op die manier te maken.
Er zijn zo veel andere manieren, maar De lettergrootte tag-- geopend beugel "font" -
is eigenlijk verschillende jaren oud.
En dit is het probleem, Ook met slechts een beroep
over online resources-- hebben ze de neiging om te worden achterhaald.
En inderdaad, die is afgekeurd, omdat de wereld gerealiseerd
wat betekent "font-size = 7" bedoel je?
Het maakt niet.
En zo vele jaren en dit dag-- één van de kant
merkt is dat het eigenlijk ongelooflijk pijnlijk soms nog steeds
naar locaties voor de ontwikkeling van web, omdat Microsoft
en Google en Mozilla en anderen vaak oneens over de wijze waarop
een specificatie zoals HTML interpreteren.
>> Er is een reglement voor HTML die over het algemeen zegt wat elk label betekent.
Maar soms is het overgelaten aan de discretie implementatie's,
discretie en Google Microsoft's.
En dus zul je heel vaak zien op een website iets
ziet er anders op een PC dan het doet op een Mac,
en dat is echt, want, aan het einde van de dag,
ze niet testen goed op beide platforms.
Maar het is ook omdat redelijk, slimme mensen zullen het niet eens
en bedrijven zullen het niet eens, en zo Een van de uitdagingen van de programmering
voor het web of het ontwerpen dingen voor het web
is het schrijven van uw website op een manier dat werkt op elke webbrowser.
Maar zelfs dat is onredelijk, toch?
Er zijn zo veel versies van zoveel browsers die er zijn die, op een bepaald punt,
heb je ook een oordeel te bellen en je hebt om te beslissen als een bedrijf,
in het bijzonder voor e-commerce-stijl sites waar je bent
proberen om de nieuwste en beste gebruiken technologieën om een ​​echt goede gebruikerservaring te geven
ervaring.
Maar sommige percentage van uw gebruikers zouden nog steeds met behulp van Internet Explorer 6 of 7
of 8, met name afhankelijk van de land waar ze vandaan komen.
>> En zo zeer vaak geraadpleegde is iets
zoals "statistieken web browser."
En als we gaan to-- laten we eens kijken Wikipedia en zie hoe up-to-date deze grafiek is
indien aanwezig.
Dus hier kun je zien waar de browsers eigenlijk
zijn volgens december 2015 volgens de Amerikaanse regering.
Chrome is op 42% marktaandeel, gevolgd door IE grotendeels in de corporate-instellingen
of PC instellingen natuurlijk gevolgd door Firefox,
dan Safari, dan is Opera niet maken de kaart hier om wat voor reden,
en dan anderen.
Misschien is het onder anderen.
Maar problematischer dan dat is-- laten we kijken of Wikipedia heeft ook
versies van browsers version--
>> Laten we naar de statistieken browser.
D.W.Z.
Zelfs dat is niet genoeg.
Browser statistieken.
Mijn versie.
Dat gaat niet om gelijk te hebben.
Laten we eens kijken versies.
Browser marktaandeel.
Laten we eens zien of dit komt.
OK.
Nu wordt dit steeds wat nuttiger.
Dus hier, merken dat we alle verschillende versies van browsers.
En, mijn god, als je look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Ik bedoel, browsers steeds bijgewerkt, en soms enkele van deze veranderingen
dat significant termen van functionaliteit.
En dus op een gegeven moment, het product managers of engineers
moet een decision-- je Weet je wat, slechts 1% van de wereld
is nog steeds met behulp van IE 7.
Naar de hel met hen.
We zijn gewoon niet van plan om ondersteunen die browser.
En wat betekent het niet te steunen?
Het zou kunnen betekenen dat de knoppen werken niet op uw webpagina,
of het zou kunnen betekenen van de formatteren is volledig uitgeschakeld.
Of je zou moeten maken diezelfde beslissing call
in mobiele deze dagen, waar we zijn niet van plan om IOS 5 niet meer te steunen.
Dus mensen moeten gewoon om te upgraden.
Of we gaan niet Cupcake ondersteunen op Android OS voor Android-apparaten,
want de wereld-- de tech wereld wil om vooruit te komen,
Het soort wil het slepen wereld mee zodat ze niet
moeten blijven achterwaarts compatibel, zodat ze
kunnen nieuwe en goede voorzieningen voor mindervaliden.
Dit is inderdaad een van de redenen waarom zo veel bedrijven zijn het uitrollen
automatische updates en soort dwingen de nieuwste versies van de software op ons.
En zelfs bedrijven zoals Apple zal sorteren van
bijna dwingen of verplichten u in termen van marktwerking
om een ​​nieuwe telefoon te kopen omdat ze gewoon zal niet uw oude telefoon niet meer te werken.
Dus u missen op de nieuwste en beste features,
omdat het duur daarvan als bedrijf om oudere te behouden, misschien wel
inferieure softwareversies.
Maar het netto effect is dat we lijden ook dit zo goed.
>> Dus laten we eens een kijkje nemen op iets een paar van de laatste dingen hier.
Laten we kloppen echt snel een aantal van die andere kogels, zo nieuwsgierig.
Dus als je probeert om, bijvoorbeeld positie
de tekst aan verschillende zijden van de pagina, ik ga naar een snelle manier te doen,
maar er is anders manieren om dit te doen.
Laat me ga je gang en eliminate-- vereenvoudigen dit als volgt.
Laat me gewoon terug naar mijn eenvoudige, eenvoudig paragrafen.
Laat me terug naar mijn styles.css.
En ik ga gewoon naar de simple-- gebruiken die je misschien al hebt gezien op Google
of herinneren van earlier-- text-align rechts.
En de pagina verversen.
Nu lijkt alles naar rechts uitgelijnd zijn,
zoals je kunt zien op de overhead hier.
>> We kunnen het er een beetje meer boek-achtig, en we kunnen zeggen: "rechtvaardigen"
en herladen.
Nu is het mooi en vierkant op beide kanten, dat is wel leuk.
Een ander doel dat we hier hadden was de verandering kleur van de tekst.
Zo zagen we dat met mijn rode tekst.
En nu knoppen toe te voegen voor een formulier.
Dus waarom niet proberen we juist dit te doen?
Maar eerst laat me gaan naar een site die de meesten van ons gebruiken elke dag-- Google.
En laten we eens een kijkje nemen op hoe Google werkt.
Maar ik ga om dit te doen.
Allereerst wil ik het doen in-- yep, laat me gaan naar Google eerst.
Ik ga om te gaan in Google-instellingen,
want ik wil uitschakelen iets genaamd Instant Results.
>> Dus je zou kunnen hebben gemerkt in Google deze dagen-- laat me terug te gaan
en zet deze op.
Dus als ik beginnen met zoeken voor "katten", zoals deze,
merken dat niet alleen Ik krijg auto-voltooien up
top, alle van een plotselinge, de pagina zelf lijkt vrij snel veranderen als goed,
en dat is Google met behulp van een taal JavaScript geroepen proberen om behulpzaam te zijn.
Maar helaas, het soort van messes up onze bespreking
van wat er daadwerkelijk gebeurt onder de motorkap hier.
Dus ik ben gewoon een soort van snel uit te schakelen direct resultaat.
En ik ga op Opslaan.
En nu ga ik om te openen dat de diagnostische werkbalk die ik
houden opening onder het tabblad Netwerk.
Dus laten we dit doen.
Laat mij-- whoops-- scroll dit een beetje.
En laat me zoeken naar "katten."
>> En nu notice-- eigenlijk, Dit is een goede gelegenheid
om te bespreken voor een moment.
Let op het moment dat ik Motortype- het te stoppen.
Hou op.
OK.
Let op het moment dat ik de letter C, kijken naar de onderkant van het scherm.
A- T- S. Wat doet de bodem van dit scherm, mijn tabblad Netwerk
suggereren gebeurt elk keer dat ik een brief typen?
Helaas, de kikker is zeer afleidende vandaag of de klaver
of wat hij is.
Wat gebeurde er elke keer als ik typte?
En laat me duidelijk de buffer en typ het opnieuw.
So-- whoops.
Elke keer als ik typ een letter, C- A- T-- zodat een nieuwe rij houdt uiteraard verschijnen.
Wat betekent elk van die rijen te vertegenwoordigen, op basis van wat we hebben gezien en besproken
zo ver?
PUBLIEK: Een zoektocht?
DAVID J. MALAN: Een zoektocht, of Meer in het algemeen, een HTTP-verzoek
van mijn browser naar de server.
Nou ja, waarom is mijn browser het maken van een HTTP vragen elke keer als ik typ een brief?
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Ja, het geven van mij deze auto-complete resultaten.
Zoals, waar deze nog zoekresultaten vandaan?
Nou, elke keer als ik typ een letter, Google stuurt meer
en steeds meer het woord dat ik ben het typen.
Waarom?
Omdat ze willen me een beter en beter, een betere suggestie,
een lijst met suggesties voor welk woord Ik probeer eigenlijk compleet.
Dus dit is letterlijk elke zeggen teken dat u typt in Google
wordt verzonden, uiteindelijk in bulk, maar soms ook een
op een moment voor de tenuitvoerlegging deze auto-complete functies bij
de gegevens uiteraard op het web.
>> Laten we nu eens een kijkje nemen op wat er werkelijk gebeurt er als ik op Google Search.
En dan zullen we dit zelf benutten.
Dus als ik nu scroll naar beneden naar de zeer eerste verzoek dat gebeurde gewoon.
Let op de volgende.
Het werd verzonden naar een vrij lange URL-- https://www.google.com/search?
en dan een hele hoop dingen.
Laten we nu zien dit ook daadwerkelijk in het tabblad browser zelf.
Laten we te ontdoen van de toolbar hier.
Hier is de pagina van de zoekresultaten.
En merk hier is de URL.
Nu, kunt u waarschijnlijk wel raden wat is hier aan de hand voor een deel.
Dus allereerst een definitie.
Dit is blijkbaar de bestemming wanneer het formulier wordt ingediend.
Dus toen ik getypt in de woorden "katten" en druk op Enter,
blijkbaar Google verzonden mijn tekstinvoer naar deze URL
die ik heb gewezen op daar slash zoeken.
Blijkt dat, in een URL, iets dat gebeurt er na een vraagteken is,
als we blijven zeggen, een key-value pair die werd ingevoerd in de vorm of andere manier
uitgezonden door de browser naar de server.
>> Dus elke keer dat je typt ingang in een vorm op het web
en het is verzonden als wij hebben besproken, via een get,
een van deze virtuele enveloppen, de inhoud
van die envelope-- ja, houden krijgen fysiek gevulde
in de omhulling van klasse vandaag, maar technologisch
het is eigenlijk zet in de URL.
Dus in feite, laat me uitpluizen dit.
Waar zie je input van de gebruiker?
Waar zie je iets dat ik mezelf getypt hier?
Ja, dus "katten."
Rechts?
Dus laat me dit destilleren in iets eenvoudiger.
Ik ga om alles te verwijderen over deze URL die ik niet begrijp,
en ik ga gewoon om te vertrekken het als dit-- / search? q = katten.
We zullen zien waar q komt uit in een moment,
maar dat voelt als het minimum hoeveelheid informatie die ik verstrekt.
En nu ga ik druk op Enter.
En let het werkt nog steeds.
We krijgen nog steeds terug een hele hoop katten.
Dus Google is liefhebber dan dat deze dagen.
Het is 2016, niet 1999.
Dus er is andere dingen die mijn browser stuurt naar de server.
Maar dit is minimaal alles wat nodig is.
>> Dus wat is er aan de hand?
Nou, laat ik eerst ga je gang en ga terug naar Cloud9 en laat me ga je gang
en eerder sluit mijn tabbladen.
En ik zal dit doen op mijn bezitten slechts voor een moment.
Ik ga om verder te gaan en het creëren van nieuw bestand.
En ik ga het op te slaan als google.html.
En ik ga heel quickly-- Ik ga om te stelen, eigenlijk,
sommige van deze tekst alleen maar om tijd te besparen.
Ik ga dit plakken in hier.
Ik ga niet lastig te vallen met elk stilering deze tijd.
We gaan noemen dit "My Google."
En ik ga om zich te ontdoen krijgen alles in het lichaam.
En ik ga het volgende doen.
Laat me in te zoomen.
Vorm Action-- en zoals ik in het kort gezegd earlier-- whoops-- als ik in het kort
eerder vermeld, de werking van een formulier is waar u de gegevens te sturen naar.
Dus google.com/search.
En de methode die ik wil gebruiken kan een van twee dingen.
Het kan ofwel "krijgen", zoals we houden bespreken of het kan "post."
Voor nu, de fundamentele verschil is, als je gebruik "krijgen"
alle informatie die de gebruiker levert wordt verzonden in de URL.
>> Dat is geweldig voor dingen zoals zoeken motoren en een paar andere toepassingen,
maar in welke omstandigheden zou je niet wilt een formulier invullen
en hebben de informatie uiteindelijk de URL, net als in de adresbalk van uw browser?
Wat voor soort vormen doen je--
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Ja, zoals wat?
PUBLIEK: Wachtwoorden.
DAVID J. MALAN: Ja, dus u zich aanmeldt in op Facebook of een website.
Dat is de input van de gebruiker uit een vorm, een tekstvak,
maar je waarschijnlijk niet wilt weergegeven in de URL van de browser.
Waarom?
Ik bedoel, misschien zijn er een aantal gevolgen voor de veiligheid in het netwerk,
maar more-- willen, meer gewoon, wat als je kamergenoot, uw significante andere,
uw kinderen, uw echtgenoot kijkt via uw browser geschiedenis?
Er is uw wachtwoord rechts er in de geschiedenis van uw browser.
Dat voelt niet als een goed ontwerp.
Of zelfs meer technisch, neem aan dat je probeert
om een ​​foto te uploaden Flickr of Facebook of wherever--
dat wil gebruikersinvoer, hoewel het is een beetje meer interesting-- hoe
ik proppen een afbeelding in de URL-balk?
U kunt de vorm van een soort van niet.
U soort kan.
Maar, echt, ik ben hard ingedrukt voor te stellen dat te doen.
Dus ik moet een andere methode voor het uploaden van foto's naar een website,
en dat andere methode wordt "post."
Maar voor nu, zullen we gewoon praten over "Krijgen" dat het eenvoudiger van de twee.
Het zet gewoon alle gebruikersinvoer in de URL.
>> Dus hier is de vorm Ik ben het creëren van.
Ik wil een input.
En weet je wat?
Ik ga een gok hier te nemen.
Ik ga om te herinneren mijn ingang "q" voor "query."
En ik denk dat dit een van de originele ontwerpen, misschien, vanaf 1999.
En dan is het type van deze ingang is gewoon gaat worden "tekst."
En dan ga ik naar een andere input dat betekent geen naam nodig heeft, zoals we zullen binnenkort
zie, het type dat "in te dienen."
En dit gaat geef me een speciale knop.
En dat is het.
>> Dus laat me ga je gang en sla het bestand.
Ik ga terug naar mijn browser en ga naar google.html.
Enter.
En het is een soort van sparse op zijn zachtst gezegd.
Maar laat me ga je gang en zoek naar "katten."
En let op, ik ben momenteel Dit Cloud9 URL.
Maar het moment dat ik op deze, waar denk je hoop dat ik terecht?
>> PUBLIEK: Google.
>> DAVID J. MALAN: Google.
Dus laten we klik op Verzenden.
En inderdaad heb ik opnieuw geïmplementeerd Google.
Rechts?
Het is eenvoudiger.
Het is lichter.
Ik bedoel, mijn code is duidelijk beter dan van hen, uit de puinhoop die we eerder zagen.
En weet je wat?
Ik ga dit kruid omhoog een beetje.
Ik heb dit niet eerder te noemen.
Er zijn tags zoals H1, voor rubriek 1, de belangrijkste rubriek van een pagina.
"My Google:" Ik zal deze oproep.
Laat me herladen.
Het ziet er een beetje beter al.
En, eigenlijk, weet je wat?
Ik heb already-- ik loog.
Ik zei dat ik was niet van plan om deze stijl, maar ik ga deze stijl als voorheen.
En mijn lichaam gaat worden, laten we zeggen, text-align center.
Het ziet er meer als Google al.
>> Ik heb een nieuwe regel, hoewel, voor die Submit knop.
En het blijkt, je kunnen de leden gebruik maken,
of u kunt meer letterlijk gewoon zeggen, geef me een regeleinde hier-- de br tag.
En als ik deze opnieuw te laden, nu gaat het daar.
Het is een beetje lelijk, dus ik meerdere regeleinden kon doen,
maar laten we hier niet te hebberig te krijgen.
Dus nu laten we eens kijken of het werkt voor "honden."
Het lijkt te werken voor "honden" bevatten, alsmede.
Dus wat is het dwingende afhaalmaaltijd hier?
Een-- was niet een enorme sprong naar invoering van een paar meer tags,
zoals de vorm tag in de input-tag.
Maar fundamenteler is, alles wat we doen
is gebruik te maken van onze kennis van HTTP en het feit
dat formulieren uiteindelijk veranderen wat er in de URL van de browser,
en zo, daarom kunnen we mechanisch bijdrage te leveren tot een server
door het maken van een HTML-formulier en weten begrijpt dat de server HTTP,
net als ons lichaam begrijpt, als, schudde mijn hand, dat hetzelfde protocol,
en zo krijgen we terug de reactie dat we uiteindelijk verwachten.
>> Dus laten we proberen om een ​​te doen laatste wat nu met mobiele,
en ik zal make-- ik zal toevoegen Dit stelt dia.
Dus als je wilt sleutelen, u kan zeker neem het van daar.
Maar ik ga om te gaan gang en doe een ding.
Ik ga om te gaan en open mijn index page--
hallo mijn pagina als voorheen, die heeft veel van deze faux-Latijnse tekst,
of betekenisloze Latijnse tekst en has-- het lijkt erop dat dit in dit lettertype.
Maar laat me gaan en dit te doen.
Ik ga in Cloud9 om te gaan.
En je hoeft niet om deze stap te doen.
Ik zal gewoon doen het zelf.
Ik ga naar klik op Delen.
En dit is een functie net van Cloud9, waarbij
Ik kan mijn omgeving openbaar maken.
>> En alleen omwille van demonstratie, laat mij dit te doen.
Ik ga mijn aanvraag openbaar te maken.
Merk op dat het waarschuwt me, ben Ik zeker dat ik dit wil doen,
want dit gaat maken voor iedereen in de wereld, of ze nu hier
of later het bekijken van de video op de internet in staat om te zien wat ik zie.
Maar dat is oke.
Ik ga om te zeggen "Klaar."
En laat me raden u aan, als ik dat deed Dit correctly-- laat ik eerst testen.
Ga je gang, als je niet mind-- in een browser op uw computer,
ga naar deze URL, en hopelijk je zal mijn Latijnse tekst te zien.
En om duidelijk te zijn, is het loopt niet op mijn laptop.
Het is in de cloud.
Het is op Cloud9, letterlijk, maar Ik heb mijn werkruimte openbaar gemaakt
zodat iedereen op het internet kan toegang tot mijn Latijns-startpagina.
>> Ga naar dezelfde URL op je telefoon, als je kon.
Als het u zal kosten, hoewel, je kan gewoon kijken over een schouder.
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Het spijt me?
PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Just Latijnse woorden.
Dat is alles.
Maar dat is wat je moet zien.
>> Publiek: Ja.
DAVID J. MALAN: Yeah.
Ja.
OK.
Dus ik kan houden van uw telefoon voor slechts een moment?
Dus, hopelijk, als je de toegang tot het, moet het er bijna onleesbaar.
Het is still-- Ik bedoel, het is onleesbaar vanwege het Latijn.
Maar het is ook onleesbaar voor welke andere reden?
Zoals, wat mishaagt u hierover?
Publiek: Het is klein.
DAVID J. MALAN: Het is super, super klein.
Dus hoe kunnen we dit oplossen?
Het is super, super klein op Victoria's telefoon
en, als je hebt getrokken het op jezelf, waarschijnlijk
kleine op je telefoon als goed, tenzij je hebben toegankelijkheidsinstellingen ingeschakeld.
Wat is dat?
Je kon gewoon knijpen en zoom, die werkbaar is,
maar dan zie je alleen een paar woorden tegelijk.
Dus wacht een minuut.
Ik weet hoe dit op te lossen.
Rechts?
Ik kon gebruik maken van CSS, en ik kon het veranderen lettergrootte van 12 punten tot 24 punten.
Maar als neveneffect dat, Uiteraard zal nu,
op een desktop of een laptop, Nu de tekst is twee keer zo groot.
En zo zou het wel leuk zijn onderscheid tussen apparaten,
en het blijkt dat er zijn manieren om dat te doen.
Er zijn meerdere verschillende manieren, in feite,
waarbij met behulp van CSS en liefhebber functies dat we niet in zal gaan in groot detail,
je kunt in wezen opvragen de browser en zeggen:
Als uw scherm kleiner is dan deze veel pixels Gebruik deze lettergrootte.
Als uw scherm is groter dan deze veel pixels, gebruik dan deze andere lettergrootte.
>> U kunt zelfs liefhebber nog steeds.
Als je ooit hebt bezocht een webpagina die, op een desktop,
heeft een groot menu misschien af ​​naar de kant, en vervolgens alle inhoud
is aan de zijkant van die menu-- dat is een soort van een gemeenschappelijk paradigma.
Menu links, content rechts, of vice versa.
Niet echt werken op mobiele wanneer uw scherm is alleen zoveel pixels breed.
Dus vaker op mobiel is, het menu zal plotseling krijgen
ingestort, en je moet klik op een knop om het te zien,
of de website zal het menu te zetten erboven en zet de inhoud eronder.
En u kunt deze implementeren dingen op meerdere manieren, ook.
U kunt uw programmeurs vragen, hey, team, op elk moment
zie je een HTTP-verzoek vanaf een Android apparaat, een Microsoft-apparaat, een Google
apparaat, een Apple-apparaat Gebruik deze lettergrootte en het gebruik van dit menu lay-out,
of anders te gebruiken deze standaard grotere lay-out.
>> Nu, met behulp van wat fundamentele techniek vandaag
konden de ingenieurs gebruiken om te weten of het
een iPhone, een Android-telefoon, een laptop, een desktop een bezoek aan de server van het bedrijf?
Waarin krijgen ze die informatie?
>> PUBLIEK: header?
>> DAVID J. MALAN: Ja, de HTTP-header.
Dus elke HTTP request uit hun klanten aan hun servers
omvatten, in die virtuele envelop, een hele hoop
HTTP headers, waarvan een de browser en het besturingssysteem
zelfs, als je de zorg om dat niveau van detail.
Nu, het is een cryptische uitziende koord, maar bestaat er software die maar
vereenvoudigen dat, en je kunt gewoon vragen in de programmering code-- PHP, Java, C ++,
whatever-- welke telefoon is dit-- welk apparaat is deze gebruiker met behulp van?
En dan kun je zeggen, laat ze dit versie van de website als het een telefoon.
Laat ze deze versie van de website als het een laptop of desktop.
Maar je hoeft niet eens nodig server-side complexiteit.
U kunt zelfs de eenvoudigste dingen te doen.
>> Ik ga dit doen.
Ik ga om verder te gaan in Cloud9 mijn omgeving,
en ik ga om een ​​tag toe te voegen die je zag in Google voor.
Het heet de metatag.
En ik herinner me nog nooit zo een, dus Ik ga het hier transcriberen.
Meta name = "viewport" en dan content = "width = breedte apparaat, intital
schaal = 1 "en dat is het.
>> Dus het kan net zo goed als een magische bezwering.
Het is niet zo duidelijk, maar dit heeft iets te maken met de viewport,
en het kijkvenster is slechts het lichaam van een webpagina, het rechthoekige gebied dat
definieert het grootste deel van de pagina.
En dit is gewoon te vertellen de browser, weet je wat?
Maak de breedte van deze pagina in feite gelijk aan de breedte apparaat.
Met andere woorden, niet van uit dat je hebt een soort van onbeperkte ruimte.
Stel dat u alleen zo veel ruimte het apparaat zelf groot.
En nu, als ik dit opnieuw te laden in mijn browser, zie ik geen verandering.
Maar als ik deed dit correctly-- en laat me mijn fingers-- steken als je alle
herlaad je telefoon, heb je zie een dwingende verandering?
Ja, is dat--
>> PUBLIEK: [ONVERSTAANBAAR]
DAVID J. MALAN: Ja.
OK.
Dus misschien wel beter leesbaar nu?
Nog klein, om eerlijk te zijn, maar niet zo klein als te onhandelbaar zijn.
En ik zou zeker dit overschrijven verder met CSS of op de server,
maar in toenemende mate wat je bent zien is meer en meer functies
wordt toegevoegd aan client-side environments--
JavaScript, zoals we zullen bespreken morgen, CSS, en dus HTML--
dat al deze vragen kan op de client
teneinde de last server een stuk minder en niet
moeten bijhouden, voor Zo is de constante aanval
nieuwe besturingssysteem versies, nieuwe browserversies.
Je kunt gewoon laten de browser vraagt ​​het apparaat, hoe groot bent u,
en vervolgens enigszins logisch beslissingen op basis van dat.
Maar we zullen zien meer kansen voor logische beslissingen
morgen in het kader van een programmeertaal.
>> Dus, nog vragen, dan, on web development?
Vandaag is het niet web programmeren, per se, omdat de meeste alles wat we deden
was zeer esthetisch, als je wil.
Er is geen besluitvorming in de code die we hebben geschreven,
en dus dat is waarom HTML is een markup taal, niet een programmeertaal.
Maar morgen zullen we nemen een snelle blik, uiteindelijk,
in JavaScript, die een effectief programmering
taal die laat ons een beetje meer te doen.
>> Nog vragen?
Nou, laat me stellen twee mogelijkheden optioneel voor huiswerk.
Eén is-- deze Cloud9 accounts niet verlopen.
U bent van harte welkom om te gebruiken ze te sleutelen aan.
Het is het gratis niveau van de dienstverlening.
Realiseer je dat, als bij het maken van uw werkruimte, je het openbaar worden gemaakt,
dat betekent wel dat iedereen op de internet kan zien wat je aan het typen bent.
Dus misschien maar eens kijken jezelf niet gênant
als je het zetten van uw eerste web pagina die er publiekelijk ongeluk,
maar niemand gaat weet er toch kijken.
>> En two-- laat me gooien up deze URL als goed,
vooral als je binnen kwam vandaag een iets minder comfortabel dan anderen,
niet zeker wat dit allemaal betekent.
Realiseer je dat nog veel meer van deze video, die zowel een goede manier om in slaap te vallen
en ook om te lachen, terwijl Daarbij heeft ook
veel maatschappelijk interessante en security-relevante discussies
daarin van John Oliver, zij het een komiek.
>> Maar als er geen verdere vragen, dat brengt ons bij de receptie.
Dus waarom niet ik weer op de muziek.
Er moeten drankjes en snacks buiten.
Ik ben blij om zich te mengen voor zo Zolang mensen zouden willen,
vragen te beantwoorden meer één-op-één.
Maar, anders, u bent van harte welkom af te nemen op elk punt,
en we zullen je weer te zien morgen voor een beetje meer.
Oke, dankjewel.