DAVID J. Malan: U redu.
Vratili smo se.
Dakle, cilj ove zadnje sjednice je uvesti još nekoliko pojmova
ali i svima dati šansu na neki način protežu svoje prste
i zapravo učiniti nešto a little hands-on.
Cilj je da se ne okrenuti nas sve u web programere
na bilo koji način, ali zapravo samo da vam dati okus neke
od osnovnih konstrukata što odlazi u web programiranje i danas webu
razvoj, tako da je statički strana things--
nema logike, nema programiranja jezik, samo statički sadržaj.
I to će nam dati priliku zapravo vidjeti što je web poslužitelj,
Pogledajte što HTML datoteke, vidjeti što to je HTTP zapravo služi gore.
No, prije nego što zaronite u, bilo retrospektiva pitanja o cloud computing
ili sigurnost ili nešto između?
>> Ne?
U redu, dobro, neka je to, za svaki slučaj
proces prijave za nešto traje nekoliko minuta.
Pustit ćemo da to učiniti u pozadini.
Ajde, ako bi mogao, na ovaj URL here-- c9.io.
Ovo je treća strana service-- platforma kao usluga, ako will--
koji će vas pozvati potpisati gore za račun,
i to će dati svakome od vas račun u tzv oblaku
na tuđe infrastrukture, tvrtka zove Cloud9.
No, ono što je lijepo o to je da su ti dati
aproksimacija jedne Stvarni razvoj u stvarnom svijetu
okoliš, iako se u oblak u web pregledniku
a mi ćemo koristiti kako bi zapravo eksperimentirati malo danas.
A onda ići naprijed i samo kretanje svoj put do postupka prijave
ako bi mogao.
Tako smo se dogoditi to primijeniti u razredu Učim za sve naše studente,
kako na kampusu i off sada, i to je zamijenio ono povijesno
je inače preuzeti softver.
Dakle, ono što su dobivanjem pristupa na je jedan od tih virtualnih strojeva,
u biti, to sam opisao ranije.
Dakle, ova tvrtka Cloud9 vjerojatno rente iz trećeg party-- doista
u ovom slučaju, Googleu, jednu cjelinu hrpa virtualnih strojeva
da su oni na neki način usitniti u iluzija pojedine poslužitelje
da svatko od nas ima punu kontrolu nad.
To nije sasvim precizno reći da su oni virtualnih strojeva,
ipak, jer ono Cloud9 zapravo koristi
je nešto novija tehnologija zove Kontejneri.
I neka mi iskoristite ovu sliku ovdje slikati ovu sliku.
>> Spremnik je, ako li podsjetiti na sliku
od ranije, malo lakši Težina od virtualnog stroja.
U stvari, dok je posljednji Vrijeme smo razgovarali o tamo
biti operativni sustav i hipervizoru
a zatim gost operativni sustav, gost operativni sustav, gost operativni
sustava, na vrhu svoje Fizički hardverski,
razlika u ova novija tehnologija, Kontejneri,
je da su svi na neki način podijeliti isti operativni sustav.
Ali oni i dalje stvarati iluzija svima
što je njegov ili njezin vlastiti ekskluzivni administrativna prava i datoteke
na poslužitelju.
No, tu je manje softvera u između vas i hardvera.
Rezultat koji je u teorija, veći učinak,
jer upotrebljavate ili troši manje resursa
na tom tzv virtualizacije sloj.
Dakle, to se zove Kontejneri po prirodi
putem tehnologije koja se naziva Docker, koji je jako dolazi do izražaja.
A to je nešto što Inženjeri u vašem poduzeću
Možda vrsta vrsta početi govoriti oko uskoro, ako već nisu,
iako je svakako nema Razlog za skok na bilo bandwagons.
>> Dakle, s koje je rekao, što vjerojatno vidjeti danas
je zaslon koji izgleda malo kao što je ovaj.
U REDU.
I baš me zvati više ako nije.
A ako so-- ću doći ako nije.
Idi naprijed i kliknite da je velika plus stvoriti radni prostor,
a vi ćete vidjeti zaslon kao što je ovaj.
Možete nazvati radni prostor ime sve što želite za sada.
I samo zapravo zbog jednostavnosti, idi and-- dobro, neki od vas
već imaju radne prostore.
Nazovite to god want-- posao, Harvard, u četvrtak, što god želite.
Ne treba opis.
Možete ga ostaviti privatnim, osim ako već imaju hrpu radnih prostora.
Ako ste prisiljeni učiniti javnim, to je u redu za današnje potrebe.
Ovdje je, također, jedan od Upsells.
Možete dobiti jednu privatnu radni prostor zadano. Ali ako želite više,
morate platiti za više.
Inače, oni vas prisiliti kako bi vaš rad javnosti.
No, to je u redu, jer oni također ciljati to na open-source zajednica
potaknuti ljude da zapravo surađuju.
>> I posljednja stvar koja je važna, iako je, nakon što odabrati ime
a nakon što odaberete privatni ili javni, kliknite HTML5, veliki ikonu naranče
drugi s lijeve strane, a zatim Stvori radnog prostora.
I to će se vjerojatno potrajati nekoliko minuta ili tako,
ali ćete onda imati okoliš, nakon što
to, da izgleda koji podsjeća na ono što imam na ekranu ovdje.
Ali, opet, to bi moglo potrajati nekoliko minuta ili više doći do ovog zaslona
nakon što kliknete Stvaranje radnog prostora.
No, baš me označiti više ako bi mi se sviđa za pogledati nešto ili savjet.
U redu.
Dakle, idem na pozadini toga za sada.
Nazovi me više, ako vam se čini da imate bilo kakvih tehničkih poteškoća.
Ali, opet, to bi moglo potrajati malo za to otvoriti.
I idemo naprijed i razgovarati o tome što to zapravo znači napraviti web stranicu,
ono što je HTML, i kako je sve to sada povezuje kako smo krenuli
zapravo koristiti neke od tehnologija.
Tako ispada da ja mogu idi na moj mali Mac ovdje,
otvoriti jednostavan program koji se zove TextEdit ili na Windowsima sam mogao
otvoreno nešto što se zove notepad.exe.
A ja samo mogu jednostavno učiniti nešto kao što učinimo, "Zdravo, svijet".
A onda sam mogao spremiti kao hello.txt Dakle, nema magije tamo.
To nema nikakve veze s web programiranje, nema nikakve veze s HTML-u.
Samo stvaranje jednostavne tekstualne datoteke.
No, ispada da web Stranica je doslovno samo to.
To je jednostavna tekstualna datoteka koja sadrži tekst da bi mogli upisati na tipkovnici,
ali to obično, ali ne uvijek završava u ne Txt, ali .html ili .htm.
A ti ne samo vrstu riječi u datoteci.
Vi zapravo morate koristiti stvari zove oznake ili, općenitije, nešto
zove označni jezik.
>> Tako da ću vrlo brzo upisati a onda objasniti na sljedeći način.
Idem prvi ovaj tip, koji kaže:
hej, preglednik, ovdje dolazi web stranica napisana u HTML-u.
A te dvije stvari zajedno reći, hej, preglednik, sljedeći je doista HTML.
Hej, preglednik, ovdje dolazi Glava ili na vrhu moje stranice.
Hej, preglednik, unutar vrha moja stranica, stavite naslov koji je "dobar dan,
svijet."
Hej, preglednik, nakon što je šef mom stranica, ovdje dolazi u tijelo moje stranice.
I, hej, preglednik, tijelo moje Stranica također treba reći: "Hello World".
Pa što su istaknute detalje ovdje?
To je ono što je općenito zove doc tipa deklaracija,
i, iskreno, to je malo teško zapamtiti to na prvom mjestu.
Vi samo vrsta copy-paste ga.
To je formalni način govoreći, hej, preglednik,
Ja sam koristeći HTML verzije 5 koji izašla nešto u zadnje vrijeme.
To je čarobno bajanje da su neki ljudi sa siromašnima smislu dizajna
odlučila staviti na samom vrhu datoteke.
Iako je to Malo arcane, to je sve
to means-- Hej, preglednik, ovdje dolazi s verzijom 5 HTML-a.
>> Ostatak toga je s nama već neko vrijeme, povijesno,
ali to je bio razvija, a to je Vjerojatno je uzimajući malo jednostavnije.
Obavijest nekoliko karakteristika onoga što sam istaknuo.
Tu je sve to s pod kutom brackets-- lijevi nosač
i pravo nosač.
A primijetiti simetriju ovdje.
I simetrije, mislim, baš kao što sam imaju ovaj start oznaku mjesta ili otvorenu oznaku
ako hoćete, ovdje imam blizu tag ili završna oznaka da je to
razlikuju samo utoliko što je ovaj slash na početku riječi
HTML.
A možete misliti to kao što sam bio slučajno
predlaganje prije, hej, preglednik, ovdje dolazi neki HTML.
A, s druge strane, hej, preglednik, to je to za HTML-- početku i na kraju.
>> U međuvremenu hej, preglednik, ovdje dolazi glavu moju stranicu.
Hej, preglednik, to je to za glavu.
Hej, preglednik, ovdje je tijelo moje stranice.
Hej, preglednik, to je to za tijelo.
A unutar toga neki proizvoljan tekst za sada.
A unutar glave, u međuvremenu, neka proizvoljna, ali označene,
da tako kažemo, tekst koji kaže, naslov moje stranice će biti "dobar dan, svijet."
Sada, za sada, možete pretpostaviti da preglednike
imaju only-- ili, bolje rečeno, web stranice imaju samo dva parts-- glavu i tijelo.
A glava je uglavnom samo kao na traci izbornika, stvari
zapravo samo na samom vrhu.
A tijelo je utrobu stranice sve u tom velikom pravokutniku
da ispunjava zaslon.
Tako ću ići naprijed i učiniti.
Ja ću ići naprijed i kliknite Spremi, File Save.
I ja ću spasiti ovo kao hello.html,
a ja sam samo ide stavi ga na radnoj površini.
I ja ću otići naprijed i kliknite Spremi.
I notice-- moj Mac na Najmanje je vikala na mene.
Jeste li sigurni da želite to učiniti?
A ja ću reći, da, koristite HTML.
Ja znam bolje u ovom slučaju.
A sada ću ići na moj desktop gdje sam imati taj dokument koji iznenada.
A ja ću dvaput kliknite na nju.
A vi ćete primijetiti da je, default, Chrome otvorio.
To je zato što je to moj zadani preglednik.
I to samo kaže: "dobar dan, svijet."
No, ona kaže: "dobar dan, svijet "na dva mjesta.
Obavijest gornjem lijevom kutu.
Prilično je teško propustiti.
To je velik i hrabar.
A gdje drugdje se čini reći: "hello, world"?
>> PUBLIKA: kartica.
>> DAVID J. Malan: Da, sama kartica.
Dakle, kada sam rekao na glavu stranica je sve gore top--
i doista, ovo je naslov.
To je samo na kartici ovdje.
I mogu povući ovu karticu van kako ne bi zbuniti.
Ovo je samo jedan tab sada, i zaista vidimo "hello, world"
ovdje i "Hello, World" ovdje.
Dakle, prilično jednostavan.
No, to je također prilično jednostavan.
I, zapravo, zumirao sam.
Ja mogu mijenjati veličinu fonta jednostavno uvećati za pristupačnost.
Ali neka se sada nešto učiniti malo više zanimljiv.
>> Idem go-- ups, neka mi da se vratim na moj tekst datoteku.
Vraćam se na moj tekstualna datoteka, a ja ću
da se to promijeni i reći "Halo, Disney World."
Uštedjeti.
I vratiti se u moj Preglednik i kliknite Obnovi.
I sad, naravno, to kaže: "Disney World".
A ja ću umjetno povećavanje u samo tako da je lakše za vidjeti.
Tako sada, na žalost, ja vrsta želim to-- zapravo, to je Mac značajka.
Želim kliknite na Disney World i otići negdje kao disney.com,
ali to ne radi.
Dakle, osnovno načelo webu hiperveza, poveznice koje idu negdje drugdje.
Pa kako ću to učiniti?
Pa, ja samo mogu reći: "Halo, http://www.disney.com".
Spremi.
Ponovno učitati.
Ali i to, ne možete odabrati.
A što je lijepo ovdje, iako ovo nije funkcionalna još,
je da se čini da je Preglednik doslovno samo da
što ja to kažem.
Dakle, ako sam samo upisati URL ovako, to je samo ide da mi pokaže URL.
Moram koristiti oznake ili oznake jezik zapravo reći
preglednik učiniti još više.
Tako ću ići naprijed i brisanje tome na trenutak.
A ja ću reći, hej, preglednik, pokretanje sidro ovdje
veza da se tako izrazim.
I hiper-referenca, odredište tog sidra, trebao bi biti taj URL.
A primijetiti moje citate.
Dobro bi mi jednostruke navodnike, također, ali morate biti dosljedni,
a ja uglavnom bih samo koristiti dvostruki navodnici da i dalje ostane jednostavan.
Obavijest ću zatvoriti oznaku.
I onda ovdje idem reći, "Disney World".
I sad mi treba neki symmetry-- otvorena zagrada, / a, zatvorena zagrada.
>> Zato što sam uveo?
Mi smo imali već nekoliko oznaka.
HTML, voditelj, glava, tijelo, Sve su oznake, da tako kažemo,
s otvorenim i zatvorenim kolegama.
No, obavijest, to je neka vrsta od temelja drugačije.
To je ono što ćemo nazvati u HTML atribut.
A atribut je samo ključ-vrijednost par.
To je uobičajena stvar u računala science-- ključ-vrijednost par.
To je vrsta alata u trgovini.
Ključni i vrijednost.
Riječ, a zatim neke druga riječ ili riječi.
I u ovom slučaju, ključ je href, a vrijednost je kako je puna URL.
A što atribut se je to utječe na ponašanje oznake.
I u ovom slučaju, moramo utjecati ponašanje oznaka za sidrenje,
jer moramo sidriti ovaj link na negdje.
I kako ti se učini da je putem atributa.
>> Tako ću ići naprijed i spremite datoteku sada.
Vratite se na moj preglednik i ponovno učitati.
I, voila, mi sada imamo Počeci legitimne web stranice.
Super jednostavno, ali ako sam lebdjeti iznad učinimo obavijest u donjem lijevom kutu,
to je super-mali.
Ali vidite www.disney.com.
I ako sam ga klik, dapače to whisks me da disney.com.
Sada je interesantna stvar ovdje je da se ne
best-- najviše utržive URL, ali to je u redu, jer je ova datoteka ne
postoje na World Wide Webu.
Ona postoji kao lokalni datoteke u naizgled moji korisnici directory-- / jharvard--
za John Harvard-- / desktop.
Ali to ima URL.
To se događa samo da se lokalno.
Nažalost, nitko od vas ne može posjetiti ovo, jer ako upišete ovaj URL,
da bih se reći preglednik, Potražite datoteku pod nazivom hello.html
na tvrdom disku.
I, naravno, osim ako ste prati uz ručno,
to neće postojati tamo.
>> Dakle, to je u redu.
Još uvijek je potrebno način, u konačnici, dobiti ovu sliku na webu,
ali neka se zafrkavati, osim par sigurnosne implikacije onoga što smo upravo
vidio i vezati ga natrag na ranije rasprava od jutros.
Ispada da, ako Preglednik doslovno samo radi
što ja to kažem, a čini biti slučaj da sidro tag
utjecajem vrijednosti ovaj atribut zove href
ali to pokazuje ova tekst, to bi izgledalo
implicirati da sam mogao staviti URL na oba mjesta, a zatim ponovno
a sada vidim URL i otići u URL-u.
Obavijest, ako sam lebdjeti iznad donjem lijevom, Ja zaista ide još disney.com.
>> Dakle, ako ste ikada bili phished-- P-H-I-S-H-E-D-
jedan od onih lažnih poruka e-pošte od kao što je PayPal svoje banke,
vjerojatno ste stečen veze unutar od e-mail koji ste čitajući to
kaže da kliknite ovdje da ide potvrdu ste lozinku ili potvrdite svoj datum rođenja
ili socijalnog ili nešto društveno inženjering vam otkriti
informacija.
Pa, mogao bih nekako uzeti Prednost ove, ne bih?
Mogla bih reći nešto kao, www.paypal.com.
I umjesto disney.com sam mogao ići na, kao, badguy.com.
Ponovno učitati.
A kako je lako prevariti, pogotovo ne-tehnički čitač
ili površno čitanje Čitatelj ne kliknuti
veza kao što je ovaj, što ako ja kliknite it-- Ja zapravo ne želim ići badguy.com.
Ne znam što je stvarno tamo.
Dakle paypal.com, obavijest je ono što kaže da će,
ali naravno, ako pogledam dolje super niska, to je malo mutno,
ali ona kaže badguy.com.
To je jedini odmah reći da idem na krivom mjestu.
A kad sam rekao ranije da su banke stvarno ne bi trebao poticati ili vlak
korisnike da kliknu veze, to je samo jedna od manifestacija toga.
I to je tako jednostavno.
Sada ste protivnik, ako učiniti nešto ovako
i pokušati izigrati korisnika u posjetu vaše web stranice.
No, za sada ćemo zadržati stvari lijepo i čisto.
Mi ćemo ići naprijed i natrag te promjene.
Ponovo učitajte stranicu.
I ja sam se vratiti na disney.com.
>> Da vidimo, ako ne možemo zafrkavati ovo osim malo više.
Dakle, "hello, Disney World."
Ja ću reći ovdje.
Možda ću napraviti malo mjesta.
"Nadamo se da ćete uživati ​​u Vašem boravku!"
Uštedjeti.
Ponovno učitati.
Nije rea-- to nije ono što sam namjeravao, zar ne?
Mislim, ako sam liječenje moj tekst file kao program za obradu teksta,
što si nadam se će se dogoditi ovdje?
Da, osjećam se kao da treba biti prijelom reda ovdje,
tako da se osjeća lud na neki način.
Ali to je zapravo namjerno, jer baš kao i prije,
preglednik je samo da odete na to što ti to kažem.
Nisam to ispričao probiti linije.
Nisam to rekla za pomicanje prema dolje, čak Ipak, intuitivno, osjećam se kao da jesam.
Tako ispada da je potrebno malo više označavanje,
a ja ću popraviti ovo što slijedi.
Idem predgovor ovaj prvi zdravo s tim što se naziva stav oznaka.
A onda ću ići naprijed i zamotati ovu drugu rečenicu
u drugom stavku oznaku, iako oni su super kratke odlomke.
Sada ću spasiti.
Ponovno učitati.
I sada imamo da prostor, a mi na neki način
imaju semantiku dva zasebna stavka.
>> To je sve u redu i dobro, ali to bi biti lijepo dodati sliku na ovu stranicu,
pa ću ići tražiti Mickey Mouse na Google slikama.
I samo za zabavu, ja sam ide da iskoristite ovu sliku.
Ja ću ići naprijed i sada zgrabite URL ove slike,
iako je drukčije načina kako to učiniti.
Za sada, Samo ću kopirati URL.
Idem se vratiti u moj tekst file, a ja ću reći ovdje,
img src = citat citat koji URL, super-dugo.
A onda je pojam jednog slika je malo drugačija.
Tu stvarno nema pojam pokretanja slika i završio sliku,
kao početna oznaka krajnjeg oznaku.
Tako da se osjeća malo čudno mi semantički to učiniti,
imati oznaku close-slike.
To nije netočno.
To je savršeno u pravu, i to je ohrabrio,
ali tu je skraćenica.
Ja mogu vrsta istovremeno otvaranje i zatvaranje istu oznaku,
te da će učiniti preglednik sretan.
Dakle, to je samo malo jezgrovitija za stvari
da konceptualno stvarno ne smisla za početak i kraj.
Oni samo postoje ili nisu.
>> Zato ću spasiti ovu i vratiti mom "Halo, svijet" stranicu i reload.
A to je malo van kontrole, jer ta slika je zapravo
malo velika, ali to je u redu.
Mogao sam ga promijeniti veličinu u programu.
Ili znaš što.
Samo pokazati, ja sam će zapravo reći
da je širina ovome treba samo 200 piksela, 200 točaka.
Pusti me naprijed i spasiti i ponovno učitati, a sada stranici
izgleda malo razumnije.
Ali primijetite uzorak.
Pa, ja sam nekako naučio sve što HTML u nekom smislu, barem
konceptualno, jer sve HTML je je to tags-- otvorene oznake, zatvorena oznake,
i atributa koji mijenjati svoje ponašanje.
I, očito, svaki Oznaka može imati nula ili jedan
odnosno dva ili više atributa, svaki od koji se nešto malo drugačije.
Sada, kako znaš što postoji?
Vi samo slušati nekoga kao što ću vam što postoji,
ili se samo Google okolo za tutorial o HTML-u, i to je zapravo vrlo jednostavno.
>> Zaista, kad sam bio undergrad prije mnogo godina i naučili HTML,
jedan od mojih matematike nastave asistenti samo proveo
malo vremena me podučavanje za kao što je pola sata, sat vremena,
i tada sam bio na putu.
Bio sam na putu prema tome najviše odvratna web ikad,
koja je, očito, nisam stvarno napredovala dalje.
No, poanta je da, nakon što se razumijem ove jednostavne ideas--
ako kompliciranih text-- ali to jednostavno ideje počinju misao
i zatvaranje misao, imajući sve lijepo uravnotežena,
gleda nešto gore, mijenjanja Ponašanje tom oznakom, to je stvarno sve
što je na njega.
A u stvari, ako ćemo sada ići nešto poput google.com-- zapravo,
idemo mjesto malo više reasonable-- stanford.edu.
I ja ću ići za pregled, Programer, Pogledaj izvor.
To je ružno, ali notice-- a ja ću povećavanje obavijesti
neke stvari koje je poznato već.
Tu je to ovdje, koji je browser.
Ovdje dolazi HTML5.
Postoji HTML.
Navodno, postoji atribut da nisam
korištenje koji određuje jezik stranice,
i to može pomoći s automatskim prijevod i takve stvari.
Evo glava stranice.
Evo naslov Stanfordskog stranice.
Tu je oznaka nisam govoriti o yet-- Meta tag.
To je samo neka vrsta popratne informacije.
Pomaže kod SEO, ili search-engine optimizacija,
ili Google-rezultatima pretraživanja ili slično.
Ali ako smo držati obličje, voditi izgleda, ovdje je tijelo oznaka.
A tu je i grozdove drugi Oznake nismo razgovarali o još.
Ali Div je jedan za Podjela stranice.
To je poput nevidljivog pravokutnika ako vrsta želi psihički
podijeliti svoju stranicu u Različite jedinice online.
I onda puno divova sam vidjeti, nešto što se zove klasa,
ali ćemo se vratiti na to.
>> To je interesting-- Obrasci.
Obrasci su na cijelom webu.
Svaki okvir za pretraživanje da si nikad korišten je oblik.
I, tako, neka je zapravo vidjeti.
Oblik.
Akcijski.
Radnja ovog oblika, iz bilo kojeg povijesni razlozi, da je URL.
Metoda je "post".
Ispostavilo se da je HTTP zahtjevi mogu koristiti glagol "get", kao što smo vidjeli prije,
ili "post".
I da će vidjeti razliku to je u ovom trenutku.
Idemo zapravo vidjeti što je to.
Pusti me da se vratim na Stanford stranici.
Koji oblik razgovaraju o, što misliš?
Ono što skače na vas?
>> PUBLIKA: Okvir za pretraživanje.
>> DAVID J. Malan: Da.
Tako se u gornjem desnom kutu Ovdje je to okvir za pretraživanje.
A to je kako oni provode it-- oznaka koja je doslovno otvorenih zagrada oblika.
A onda ćemo tražiti nešto.
Idemo tražiti prijatelj od mine-- "Nick Parlante".
Enter.
I naravno, on je otišao na malo drugačiji URL.
Pusti me da se vratim ovdje.
Idemo tražiti "tečajevi".
Kvragu.
Otišao na drugom URL-u.
Dakle, Stanford je dodao neke magije da oni ne me da se na URL
što smo vidjeli u akcija atribut tamo.
No, ovaj oblik ovdje se provodi isključivo putem ovog markup ovdje, ove oznake.
U stvari, ovdje je ulaz za vrsta pretraživanja koje želite.
Ovdje je ulaz za druga vrsta pretraživanja.
Ovdje je ulaz za samu niza.
I tako nije cilj da zamotate naše misli oko svih tih oznaka
ali samo da vidi.
To je samo otvaranje i zatvaranje oznake i traže stvari.
Da?
Victoria?
>> PUBLIKA: [nečujan]
DAVID J. Malan: To je dobro pitanje.
To je malo trickier vidjeti.
Pusti me da se vratim na to pitanje u samo nekoliko minuta
kad smo pogled na nešto što se zove CSS ili Cascading Style Sheets,
i mi možemo pokušati zaključiti koliko sa stranice.
Dakle, ako mi sada pogledati google.com, da vidimo što je njihova stranica izgleda.
Ti bi they're-- da je slatka i danas.
U REDU.
Sve učinjeno.
U redu, tako View Source.
Vi mislite da bi Google jako lijepo izvorni kod.
Dakle, očito, ono što se ovdje događa?
A u stvari, to nije čak i HTML.
To je nešto što se zove JavaScript.
I neka je zadržati ide i ide.
Ja uopće ne znam gdje se stranica počne.
Idem koristiti Command F, otvorena zagrada HTML.
U redu, tu je.
Našao sam početak stranice i Postoji toliko stvari ovdje.
>> Što se zapravo događa?
Pa, znaš što, možemo očistiti ovo gore.
Ako sam umjesto toga ići na to provjerite, alatna traka, ovaj posebni dijagnostički alat,
i otići da ne mrežu, gdje ćemo zadržati ide danas,
ali ako idem elemenata, ono što je stvarno lijepo
je da preglednik ima puno mnogo bolje oči nego ja.
I preglednik može čitati koji nered na web-stranici,
da HTML mail samo mi pogledao, a to može
analizirati ga i čitati i analizirati ga i formatirati ga
u lijepoj ljudskoj-friendly način.
Dakle, ono što sam sada vidjela u ovom zaslonu ovdje
pod elemenata, isti sadržaj, ali su razvedene sve,
oni su ga colorized, ali to je isti tekst
da sam skinuti s poslužitelja.
>> A što je lijepo sad je vidim u tijelu, za instance-- obavijesti,
stranica još uvijek u sastavu samo glava i tijelo,
i ja hijerarhijski može roniti ovdje.
Uočite da je Google izgleda da ima da divs-- ovo i ovo.
Mogu proširiti to.
Tu je cijela hrpa drugih divova.
Dakle, to je malo složenija.
Ali čekaj.
To se čini tako mnogo više čitati, relativno, od ovoga.
Zašto je Google neugodno Sama po samo slanje
ovaj veliki nered kod nekih sortirati samo provesti nešto
da izgleda tako jednostavno na prvi pogled?
Kao, zašto ne dodati više prostora?
Zašto nisu pritisnite Enter kao što sam učinio?
Pogledajte kako dobro sam u pisanju web stranice.
Udario sam Unesite toliko vrijedno.
razvedena sam tako sve je tako lijepa i čitljiv.
Zašto Google ne prakticiraju isto?
>> PUBLIKA: [nečujan]
DAVID J. Malan: Dobro.
Vrlo pošteno.
Oni nemaju neki Osoba na Googleu ručno
ažuriranje početnu stranicu više.
Nije 1999 više.
Dakle, oni imaju softver.
Oni imaju i druge alate koji generirati dinamički oni HTML.
Naravno, da je sama kod napisao je ljudi,
ali stvarnost je, to je sasvim pošteno reći,
preglednik sigurno ne zanima me koliko je neuredan kod je.
No, tu je još uvjerljiv tehnički razlog
da Google distribuira svoj HTML kod u takav neuredan, naizgled
neodoljiv način svi upakiran zajedno s vrlo malo way-- vrlo malo
na putu oblikovanja kao što sam učinio.
>> PUBLIKA: [nečujan]
>> DAVID J. Malan: Brže?
Zašto?
I što si rekao, Lydia?
Brže?
Zašto brže?
PUBLIKA: [nečujan]
DAVID J. Malan: Nema nema mjesta za čitanje.
Da.
Tako da mislim o tome što je prostor.
Dakle, svaki lik na tipkovnici traje neki iznos od prostora za zastupanje,
ili fizički, kao što je to zauzima toliko prostora,
ili nekako ispod napa, koja zahtijeva memoriju.
I kao aside--, a mi ćemo više govoriti o ovom tomorrow--
svaki lik na tipkovnici obično zahtijeva 8 bitova, ili jedan bajt.
Dakle, uzorak od 8 nula ili one, ili samo jedan bajt, kao što smo
ljudi će obično reći.
Dakle, to je mala, ali to je još uvijek nije nula.
To je još uvijek neki iznos od prostor.
Dakle, ako je inženjer ili Google hits razmaknicu samo jednom, i pretpostavimo
Googleu, to je super-popular-- Pretpostavljam da milijardu ljudi
posjetite njihovu stranicu za jedan dan, ili neki broj ljudi
posjetite početnu stranicu A milijardu puta na dan,
koliko dodatnih bajtova mora da Softver inženjer samo košta Google
skom njegov ili njezin razmaknicu jednom?
>> PUBLIKA: [nečujan]
DAVID J. Malan: Nije baš tako loše.
Samo jedan puta bajta milijardu.
Tako A-
PUBLIKA: 8 milijardi gigabajta.
DAVID J. Malan: Nije 8000000000.
8 milijardi bajtova.
No, jedan gigabajt.
1 gigabajt će biti jedinica mjere.
Ako on ili ona ne dva prostori, 2 gigabajta.
Tri gigabajta.
Pravo?
To vage nepovoljnije.
I tako u slučajevima kao što su Google, koji je, gotovo, su ekstremni slučajevi,
postoje i drugi problemi koji se javljaju samo čineći vrlo razumne odluke
ili uzimanje vrlo jednostavne ljudske aktivnosti, jer ima uvećanom učinak.
Dakle, jedan od razloga ovo izgleda tako stisnut
Upravo kao što je Victoria said-- je to samo generira računalima ionako.
Dakle, nije velika stvar.
Neka preglednik shvatiti.
Ali to isto tako namjerno nema puno prostora,
jer prostor nije potrebno.
A prostor je zapravo košta.
>> To bilo košta vremena, jer samo na guranje
da je mnogo više podataka izvan Sjedište Google.com je upravo
ima da se neki iznos vrijeme, čak i ako je to milisekundi
ili mikrosekundi, ali dodaje da više toliko korisnika, ili vjerojatnije,
to vjerojatno košta.
Google vjerojatno se povezuje s netko drugi u svijetu, jedan
onih viri boda, a ako su
neka vrsta financijske veze pri čemu troškovi svoje podatke novac,
oni možda i minimizirati koliko podataka
oni pljuju na njihov priključak za internet.
>> Tako je smiješno što je, međutim, u konačnici, ili možda ohrabrujuća stvar,
je da, iako ovo izgleda strašno Velika je na kraju krajeva,
to je još uvijek točne istim načelima kao i Ovo je vrlo jednostavan stranica ovdje za HTML
stranica.
Dakle, samo sažeti i tako da imaju kanonske verzije, ako niste bili
sljedeće zajedno po izboru ovdje, ovdje Možda najjednostavnija web stranica,
tako nešto da se igraju s možda kasnije.
>> Pa, neka je uvesti Nekoliko drugih ideja sada.
Uskoro ćemo uvesti nešto što se zove stil oznaku.
Možemo stilizovati ovu stranicu u više zanimljivih načina.
Dakle, dok je HTML e-mail je sve o označavanje
podaci, vrsta navođenja do Preglednik kako strukturirati podatke,
gdje staviti to, CSS, ili Cascading Style Sheets,
je drugi jezik koji općenito dobiva miješati s HTML
kao što ćemo see-- ali možemo očistiti da se u moment-- koji traje
to je konačni milja, a to je stilizira.
Ona dobiva boje samo pravo, font veličine samo pravo,
pozicioniranje samo pravo.
To je sve o estetici ili oblikovanje, a ne o
temeljni podaci sama.
A najlakši način da se pokaže to je možda primjer.
Tako ću ići preko na moje jednostavne tekstualne datoteke.
A u samo jednom trenutku, ja ću hoda nas kroz proces
za to sami.
>> Idem se vratiti na moj datoteku tu i ponovno učitati stranicu samo
Za potvrdu kako to izgleda.
To je mjesto gdje smo na sada.
Osjećam se kao djeca će uživati ima malo boje na ovoj web stranici.
Tako ću ići ovdje u zaglavlju stranice.
I ja ću učiniti stil, / stil.
I onda unutar toga, ja ću za reći tijelo moje page--
i to oblikovanje je, na prvi pogled, možda i malo
čudno, ali konvencionalni.
Ja ću reći da je u pozadini Boja ove stranice bi trebao biti zelene boje.
A to je, nažalost, vrsta nije najbolji dizajn.
Uočite da je prethodno u svijetu HTML,
Rekao sam da atributi su ti parovi ključeva i vrijednosti.
Nešto jednak citat citat "nešto".
U svijetu CSS, koji je bio dizajniran od strane nekih različitih ljudi,
odlučili su da je, u svojim svijet, parovi ključeva i vrijednosti
bi riječ debelo nešto.
Dakle, to je ista ideja, ipak.
To je udruživanje vrijednost s nekim ključ koji na neki način
utječe na ponašanje ove stranice.
>> A što vjerojatno možete pogoditi.
Što je to vjerojatno ide učiniti čak i ako ste nikada
Vidio HTML ili CSS prije?
PUBLIKA: Promjena boje pozadine.
DAVID J. Malan: Da, promijeniti boju pozadine.
A posebno Boja pozadine tijela.
No, u mjeri u kojoj Tijelo za sada je web
page-- to je jedina stvar ispod naslovne trake really--
vjerojatno će utjecati na istu stvar.
Tako ćemo vidjeti.
Idemo spasiti ovo.
Ići ovdje i ponovno učitati.
To je prilično odvratan.
A što se događa Ovdje je nuspojava.
Samo sam izabrao ovu sliku slučajno.
Zašto je nije zelena prožima iza Mickey?
PUBLIKA: [nečujan]
DAVID J. Malan: Upravo tako.
Ispostavilo se da slika, lijepa mnogo sve slike koje smo mogli koristiti,
svi rectangles-- pravokutnika.
Čak i ako Mickey ima neke krivulje za sebe i ima pozadinu,
da pozadina mora biti nešto.
To mora biti bijela.
To mora biti crno ili nešto drugo.
To može biti transparentan.
A u stvari, mogao bih otvoriti Mickey Mouse ovdje
u programu pod nazivom Photoshop ili nešto slično
i promijeniti sve to bijelo pozadina transparentna,
tako da je zeleni bi se sjaji kroz.
Ali to je nešto što bi trebao pitati o sebi ili grafičar
ili dizajner na mom društvo, na primjer,
učiniti, pogotovo jer sam upravo posudio ovaj jedan s interneta.
No, to je razlog zašto se to događa.
>> Dakle, ono što drugi možda želimo učiniti?
Pa, možda želite kažemo Stvarno se nadam da ćete uživati ​​u boravku.
A za naglasak, želim da bi se ova jaka,
pa ja ću reći otvoreno jaka i zatvoriti jaka, a zatim ponovno učitati.
I to je malo teško vidjeti na projektoru
ali možda stvarno sada skače na vas malo više.
Na taj način možete dodati kurziv u ovom Tako hrabar okrenuto na ovaj način.
Mogli bismo promijeniti boje.
U stvari, samo za slatkiš, ja sam ići naprijed i učiniti.
Ja stvarno ne sviđa kako je stavci su tako blizu zajedno,
tako da sam mogao učiniti nešto ovako.
Idem reći preglednik, promijene stav oznaku da su,
neka je say-- zapravo, znaš što, neka je uskladiti to text-align, centar.
I opet, znam da je ovo samo zato što je netko nauči me
ili sam ga gledao u online referenca.
Pa neka me spasi ovo.
I, ah, sada sam usmjeren sliku tamo.
I zapravo, znaš što, ako Ja se presele moju sliku u stavku
tag-- tako i treći stavak, iako to nije tekst.
Idemo spasiti i ponovno učitati.
Sada je stranica počinje izgledati vrsta of-- Mislim, to je još uvijek prilično ružno,
ali barem izgleda da sam proveo dvije minute umjesto jedne minute
čineći ga.
>> I tako, postupno, možemo napraviti te estetske promjene sada se na stranicu?
Nisam stvarno promijenio podatke u Stranica osim dodavanja riječ stvarno.
Ja sam dodao metapodatke, ako hoćete.
Hej, preglednik, iskoristite Riječ "stvarno" podebljano.
No, podaci nisu jaki.
To je metapodataka.
Podaci su "stvarno".
Dakle, još uvijek imamo neke isti pojmovi kao prije.
Sada, naravno, to nije na webu, pa ću to učiniti posljednji korak ovdje.
>> Ja ću ići na hello.html i samo istaknuti i kopirati ovaj.
A sada idem ići u Cloud9, koji
Ja ću vas provesti kroz koji trenutak.
A izgledi su da ćete uskoro biti, ako već nije, na zaslonu kao što je ovaj.
I neka mi samo ti brz Obilazak što Cloud9 zapravo jest.
Dakle, opet Oblak 9 ova usluga u oblaku
da ti i mi daje iluziju da ima svoj vlastiti virtualni stroj
u oblaku, tehnički spremnik u oblaku
da imamo punu administrativne povlastice.
Dakle, u teoriji, nitko drugdje u svijetu ima
Pristup na ekran Ja sam gledajući upravo sada,
osim možda ljudi koji upravljaju site,
jer tehnički su fizički pristup i tako dalje.
>> Dakle, što ćemo vidjeti u ovom okruženju?
Idem smanjivanje, jer je malo mala.
I dopustite mi naglasiti iznad ovdje samo na trenutak.
Na lijevoj strani svomu i ekran, tu je preglednik datoteka na lijevoj strani.
Tako je sličan u duhu Mac OS i Windows.
To su sve od datoteke na mom računu.
I po defaultu, ako je vaš Račun je poput moje,
vidjet ćete i uskoro helloworld.html i readme.md.
Ovamo na desnoj strani, to je gdje je moja tekstualne datoteke su idući u ići.
Ako ste ikada koristili Microsoft Riječ ili Notepad ili TextEdit,
To je riječ moja uređivanje datoteka će ići.
A onda najviše kompliciranih značajka ovog okruženja
da nećemo stvarno potrebno koristiti se ovdje se zove Terminal prozor.
Ako ste koristili DOS iz prošlost, to je Linux
ili Linux ekvivalent DOS-a.
To je tekst-temeljen interface-- nema klikova mišem, bez povlačenjem.
Sve što možete učiniti je upisati naredbe, ali te naredbe
može stvoriti datoteke, premještanje datoteka, otvaranje koji vodi, koji vodi, u neposrednoj blizini
učiniti bilo koji broj stvari.
No, za sada, samo ćemo troše naše vrijeme ovdje.
>> I tako ćemo to učiniti.
Ako ste u to okoliš, koji bi trebali
se, ako ste stvorili radni prostor već, ići naprijed i samo ići gore
na File, New trenutak.
A to će vam dati novi Kartica upravo ovdje u sredini.
I ja just-- i neka ići naprijed i učiniti.
Idemo naprijed, a sada ne File, Save i ići naprijed i pozvati ga hello.html,
Ne smije se miješati s helloworld.html, što
došao sa svojim novim besplatni korisnički račun, što je samo uzorak datoteka.
Vidjet ćete da se iznenada pojavi, najvjerojatnije na lijevoj strani,
a kartica će i dalje biti otvoren.
I dopustite mi da vas potaknuti sad stvoriti Na ovu sliku ili neki njihovi varijante.
A ako ne može baš vidjeti na ekran, to je identična preparatima
da vjerojatno ima u drugoj kartici.
>> Dakle, ukratko, napravite svoj prvi web stranicu, spremiti ga, a zatim u samo jednom trenutku,
Ja ću vam pokazati kako zapravo može vidjeti ovo.
No promijeniti barem jednu stvar.
Promjena helloworld se nešto po vlastitom izboru,
tako da ste uvjereni da je vaš file a ne onaj samo sam stvorio.
U redu.
A kad ste ready-- nema rush-- kada ste spremni,
ići naprijed i spremite datoteku nakon što ste napravili ove promjene.
A ako kliknete Trčanje gumb do vrha, ovaj
treba otvoriti novu karticu koja će reći vi koji URL možete posjetiti datoteku na,
ali to bi moglo potrajati nekoliko trenutaka da citat citat "Start Apache", koji
je naziv web poslužitelja.
Dakle, budite oprezni kako bi učiniti upravo što je u spisu u konačnici.
Pa sad, ja ću zumirati.
Ako počnem tipkati open-nosač HTML, obavijest
to me je navelo da završim misao.
A ako sam završio misao ga, automatski mi daje završnu oznaku.
No, očekivanje onda ću pogoditi Enter, a zatim premjestiti unutra
a ne glavu unutra i onda sam to tijelo iznutra.
I to je malo čudno u početku, jer radi posao za vas,
ali shvatite da u konačnici to vam štedi tipke.
A u stvari, vrlo česta značajka programskim okruženjima ovih dana
i za izradu web stranica kao što su ovo i stvarna programiranje,
koje ćemo razgovarati sutra, je te auto-kompletan značajke,
stvari koje baš dopuštaju programer ili dizajner
upisati manje tipke na postići istu stvar.
Ponekad je dobro, ipak.
Ponekad je samo neugodno.
A, opet, nakon što ste transkribira slide ili neka njegova varijanta,
možete kliknuti na gumb Pokreni se vrhu.
A onda je u dnu prozor, vi ćete biti informirani
na ono URL možete posjetiti Vašu web stranicu.
Mina, na primjer, je na business-daharvard.c9users.io
i tako dalje.
U redu, neka me-- bilo kakvih pitanja?
Bilo koja druga pitanja o samo dobivanje to radi prije nego što smo dodali mogućnosti?
I neka mi predloži, samo da se ljudi comfortable--
jer to je jedna stvar da se samo copy-paste slijepo ono što sam učinio.
Ali samo tako da se ljudi boriti s barem jednim do-do,
Idem okrenuti na neku glazbu.
Idem predložiti popis stvari koje potencijalno mogu dodati.
I, naravno, možete koristiti Google.
A zašto ne bismo samo Predlažem da pokušate riješiti
barem jedan određeni problem.
Tako je u odnosu na oznake, neka me ponovno ovo ovdje.
>> Zapravo, neka mi stavi ona u tekstualnom obliku.
Recimo da je među oznakama možemo korištenje ovdje su neke oznake ovamo.
Vidjeli smo stava oznaku.
Sada će se auto-kompletan.
Stavak oznaka, oznaka za sidrenje.
Recimo da želite napraviti nešto veći,
tako da možda volimo-članovima raspon oznaka može pomoći.
Pa, možda vam je potrebna pomoć za to u samo nekoliko trenutaka.
Vidjeli smo div.
Vidjet ćete da postoji tablica.
Postoji nešto što se zove tr, td.
Th, td.
Vratite se da je u trenutku.
Što bi drugo moglo biti pri ruci?
Postoji jaka.
Tu je naglasak, odnosno em.
There's-- što drugo Možda volite ovdje?
Pa, mi ćemo uzeti pogledajte ovo zajedno.
Oblik, koji smo vidjeli.
Ima oblik.
Ima ulaz i nekoliko drugih.
U redu, učinimo to.
Za odgovaranje na Victoria je pitanje, neka me prvi
samo bi bili sigurni da su svi u mogućnosti da biste dobili njihov Hello rad.
Onda neka me upoznati par drugih ideja.
Onda ćemo pustiti narod riješiti neki problem sami.
Tada smo zapravo će se vratiti takvoj ideji obliku,
a mi ćemo zapravo ponovno provesti zajedno front-end sučelje,
da tako kažemo, jer sam Google.
Mi ćemo koristiti Google kao leđa kraj i neka ih obaviti težak posao, traganje,
ali ćemo stvoriti prednji kraj Google i obrazac za pretraživanje
da su na vlastitu početnu stranicu.
I tako ćemo se vratiti ove oznake u samo jednom trenutku.
>> Dakle, to je ono što sam predložio je prije samo trenutak.
Možemo dodati stilizacija do stranica unutar ovog stila oznake,
a možemo stilizovati pozadinu u boji, poravnavanje teksta,
da li je to centar ili lijevo ili desno.
No, vrlo brzo što bi pronaći ili web dizajner
bi se naći da je ovaj postaje malo nezgrapan,
jer radite ono što je zove miješanje sadržaja
uz predočenje istih.
Ti miješanje podataka i njegove estetike.
A u stvari, ako uzmete u obzir što će se dogoditi preko time--
to je vrlo mali web stranica, naravno.
Ali ako dodam sadržaja na ovoj stranici i ja dodavanje stila na ovu stranicu,
stranica vrlo brzo dobiva duže i duže i duže.
I pretpostavimo da ja želim imaju drugi web-stranicu koja
dijeli neke od tih atributa.
Recimo moj drugi web stranicu za moju site-- Također, želim sve što centar,
i ja također želim sve sa zelenom pozadinom.
Ja sam prilično mnogo morati kopirati i zalijepiti neke od tih linija
u toj drugoj datoteci, koja se osjeća dobro.
To će riješiti problem.
>> No, što ako želim novu stranicu ili 30. stranici ili 40. stranici?
Sada ću biti kopiranje i lijepljenje puno duple koda
u više datoteka.
I tako pretpostavimo da Ja odlučujem ili mi je rečeno,
hej, mi ne upotrebljavate zelena pozadina više.
Mi ćemo početi koristiti naranču.
Što morate promijeniti?
Pa, morate promijeniti taj stil od zelene do narančaste koliko mjesta?
Kao i 30 ili 40 mjesta.
To je zamorno.
To je sklona pogreškama.
Postoji cijeli niz razloga gdje ne bi htio da izazove
koja vrsta boli za sebe.
I tako ne bi bilo lijepo ako smo mogli uzeti ono što sam upravo
staviti između ova dva žuta oznake, te stil oznake,
faktor ga i staviti sve moje stilizacija u jednoj središnjoj datoteci
da su svi 30 ili 40 mojih ostalih datoteka posuditi od ili nekako referenca,
ne za razliku od umrežavanja Dijagrami smo radili prije?
>> Dakle, ako ja ići u tu, ja sam će zapravo predložiti
da mi zamijenite Oznaka stila s nečim
zove veza oznaka, koji je je užasno, užasno ime,
zato što uopće ne koriste Veza oznaka za stvaranje što
mi ljudi znamo kao veza na web-stranici.
Za to koristite kojima oznaku?
Kako stvoriti vezu na web-stranici?
Publika: a.
DAVID J. Malan: U a, ili sidro oznaka, koji je otišao u Disney prije.
Veza oznaka se ovdje govori učinimo link na datoteku pod nazivom
styles.css, odnos u kojem koja će se da je moja stila.
Dakle, ovo je jedan od S-ih u CSS-- CSS.
Stil sheet-- dva slova S u CSS.
CSS.
To samo znači, hej, preglednik, idite naći styles.css na lokalnom poslužitelju
i koristi ga kao stilovima, što znači da unutar te datoteke
će biti sve od stilizacije koje smo upravo učinili.
I što je ta datoteka može izgledati ovako je ovo.
A ja ću samo napraviti to je brz primjer, jer mi ne treba
da se previše u korov ovdje.
Ali ako ja to kopirati, ono što sam predlaže je da programer stvoriti novu datoteku,
zalijepiti u tim lines-- whoops-- zalijepiti u tim linijama,
spremite ga kao styles.css, a zatim u s druge datoteke, izbrisati sve to
i zamijeniti ga umjesto s tim veze oznaku.
Tako da, ako mogu povezati href = "styles.css" odnos mora biti "stylesheet"
blizu oznaka.
Spremi.
Vrati se na moju helloworld.
Ponovno učitati.
>> Doslovno ništa se nije dogodilo.
To je dobra stvar, jer to znači to je zapravo sve funkcionira.
Da bi dokazali koliko, recimo ja bi pogreška pri upisu, a ja to nazivamo "styles.css"
s velikim S, koja je netočno, a zatim ponovno učitati.
Sada možete vidjeti da jednostavno ne radi.
Sada, zašto?
Pa, neka je koristiti tehnika od ranije.
Pusti me naprijed i, preglednik, u Chromeu, ja sam
će otvoriti posebnu Kartica mreže kao i prije,
i neka mi se ponovno učitati stranicu.
Koje su vam se ne iznenađen vidjeti sada?
Ili možda ste iznenađeni da ga vidi.
Bilo kako bilo, ono što vidite sada?
PUBLIKA: [nečujan]
DAVID J. Malan: To nije pronađen.
Zašto se to nije pronađena?
Pa, Styles.css-- kapital S- ne postoji.
Ja ga misnamed.
Jednostavan pogreška pri upisu.
Ali ja sam uzimajući razumljivo sada 404, jer server je rekao, hej,
to nije pronađena.
Doslovno, ne znam gdje je ta datoteka.
Dakle, kao rezultat toga, u preglednik pokazuje ono što može,
sirovi sadržaj stranice, koji je bio 200, HTML,
ali stilizacija ne mogu se dodati nakon toga.
A to je ono što se podrazumijeva pod kaskadno.
Vi na neki način može dodati nakon toga, i to na neki način
oplemenjuje estetiku web stranici.
A čak možete nadjačati one stilova s ​​nekim drugim stylesheet datoteke
ako želiš.
To nije pronađena, ipak, u tom slučaju, jer naravno, to sam misnamed.
Dakle, ja bi to popraviti na prvom mjestu.
>> Dakle idemo naprijed i predlažu sljedeće.
Idemo naprijed i to učiniti.
Počevši s možda Vaš helloworld datoteka,
neka mi samo pozvati par od sadrže prijedloge.
Dakle, Victoria, htjela si napraviti neki tekst veći, zar ne?
U redu, tako da možemo ne čine tekst veći.
A mi ćemo svakog iščupati off samo jedan problem riješiti.
Provjerite Tekst veći.
Neću gnjaviti pisanja ovog kad smo
imaju metak tehnologiju upravo ovdje.
Dakle, neki problemi.
Dakle, idemo probati da bi tekst veći.
U redu.
Što još će netko predložiti?
Što još možda želimo učiniti u web stranicu?
Idemo se s kratki popis stvari
a zatim prenijeti pravo Skupina to shvatiti.
>> PUBLIKA: [nečujan]
>> DAVID J. Malan: OK, tekst pozicija na različitim stranama stranici?
U redu.
Nešto drugo.
>> PUBLIKA: [nečujan]
DAVID J. Malan: To je.
Dakle, gif je samo drugačiji format datoteke.
Mi smo samo koristili, što, A png ili jpg vjerojatno?
Koristili smo jpg.
Ako vas zanima, prekomjerna odgovoriti na Vaše pitanje
je jpg općenito koristi za fotografije, jer podržava
milijuni boja ili 24-bitnu boju.
GIF obično se koristi za, kao, internetski fenomeni ove days-- animacije,
kao što su animirane GIF-ove.
Ali to se događa da koriste manje boja paleta, samo 256 mogućih boja,
ali podržava transparentnost i animacija.
A tu je gif, koji podržava transparentnost i više boja
ali ne i animaciju.
Tako da je trade-off.
Dakle, dodajući gif, ipak, će biti funkcionalno
ekvivalent za dodavanje png ili jpg.
Da.
izvor slike je jednaka.
Tako nešto drugo.
Idemo se s nečim što uputili smo se Victoria učiniti ovdje.
>> PUBLIKA: Dodavanje gumba za obrazac.
DAVID J. Malan: U redu.
Dakle, dodati gumbe za obrazac.
I mi ćemo učiniti da je jedan zajedno.
Tako da će biti savršen prikazali odmah nakon tog izazova.
Još nešto?
Ono što možda želite učiniti?
Web osjeća vrlo underwhelming ako je to sve što možemo učiniti.
PUBLIKA: Promjena boje teksta.
DAVID J. Malan: Promjena što?
PUBLIKA: boja teksta.
DAVID J. Malan: Promjena boje teksta.
U redu.
Dakle, neka je to.
Samo jednom, tako da nisi, samo po sjećanju, čini upravo ono što radim,
Idem uključiti glazbu za možda pet minuta ovdje.
Vi ste dobrodošli da koristite Google.
Vi ste dobrodošli da se mene pita, i Ja ću šaptati savjet u uho.
Vi ste dobrodošli da gledati više na tuđim ramenima.
Ali riješiti samo jedan od tih problema.
No, mi ćemo učiniti posljednji, na predstavlja jedan, i kad bismo mogli zajedno.
Dakle, pet minuta riješiti bilo koji od ovih problema
pomoću Google, intuiciju, ili bilo druga sredstva koje su Vam dostupne.
>> [MUSIC SVIRA]
U redu.
Bez brige, ako želite da petljaju,
ali ja ću pokvariti par od tih odgovora.
Dakle, prvu sugestiju Victoria je bila da se tekst veći.
Dakle, postoji nekoliko načina da se to učini.
Ja trenutno nisam obnovljena moj ekran na ovu veličinu,
iako sam zumirao umjetno samo da vidi stvari.
I neka je to.
Pusti me naprijed i grab neki generički latinski tekst
Samo tako ćemo imati nešto za raditi.
Dakle, daj mi samo jedan trenutak.
Ja ću napraviti tri paragrafa.
U REDU.
To će biti bolji primjer.
Dakle, za znatiželjne, u moj hello.html, samo sam
zalijepiti tri besmislen Latinski stavci
Samo tako da imamo neki tekst za rad.
Victoria je cilj bio da čine dio teksta veći.
Tako sam mogao, kao i prije, idu ovdje.
I neka mi to učiniti na pravi način.
Idem da imaju vezu oznaka koja upućuje na datoteku
pod nazivom "styles.css" odnos od kojih je opet "stylesheet".
A onda ću spasiti i otvoriti taj "styles.css".
>> Dakle, kao i prije, imam Sposobnost u ovom CSS datoteke
zapravo nadjačati zadane Estetika web stranicu,
i zadane estetika, naravno, prilično dosadno.
To je vrsta normalne veličine fonta, crna tekst, bijela pozadina, i tako dalje.
Dakle, pretpostavimo da želim napraviti sve ovaj tekst veći.
Što mogu učiniti nekoliko stvari.
U mom styles.css datoteku, ja Moglo bi se reći, znaš što,
primjenjuju se sljedeće da tijelo moje stranice.
Idi naprijed i učiniti veličina slova 24 točaka,
što je broj koji sam mogao koristiti u Microsoft Word.
Pusti me da se vratim na moj web stranica ovdje i ponovno učitavanje,
i možete vidjeti da je to je već mnogo veći.
I mi možemo dobiti malo lud, baš kao što možemo na desktop--
čine ga 96 bodova.
Ponovno učitati.
I to je sve malo nezgrapan u ovom trenutku.
>> Ali mogao sam biti malo precizniji.
Umjesto primjene ove stylesheet na tijelo moje stranice
Što mi još može ga primijeniti na umjesto toga, što druge oznake koji bi mogli dalje
funkcionira na isti način?
>> PUBLIKA: p oznaku?
DAVID J. Malan: P oznaka.
Dakle, glava ne bi bilo točno, jer po glavi,
ne mogu zapravo kontrolira estetiku.
Tu je bilo tekst ili ne.
No, p tag-- mogu zaroniti u nešto dublje, da tako kažemo, u stavku
oznake.
I iako postoje tri, to je savršeno u redu, jer je u CSS,
kad sam samo reći: "p", to znači primijeniti sljedeće
na bilo koji tag da odgovara ovom Selektor, selektor samo
kao naziv oznake.
Dakle, gdje god vidite "P", primjenjuju veličinu fonta,
i neka je to učiniti više razumno again-- 24 bod.
I znate što, samo za dobru mjeru,
Uljepšajmo boju crvena samo za trenutak.
A sada, ako sam ponovno učitavanje, sada smo vidjeti tri ružne paragrafa.
>> Ali sada pretpostavimo da sam ja neka vrsta of-- Želim prvi stavak
iskočiti na korisnika.
Ne želim da se samo povećati veličina fonta svega.
I tako sam zapravo žele identificirati ili razlikuju među tim stavcima.
Tako ćemo se riješiti crvene, jer to je samo vrsta ljepljiv,
i neka je ići naprijed i učiniti veličina slova 12 točaka po defaultu,
tako da smo opet na nešto malo više razuman.
A sada samo želim da se poveća veličina slova u prvom paragrafu.
Mogu to učiniti u nekoliko načina, ali jedan način na koji je
možda najviše nastavni Na Trenutak je učiniti sljedeće.
Pusti me naprijed i reći, ovo stavka ima jedinstveni ID "prvi".
Mogao sam nazvati sve što želim.
Mogao sam nazvati ovaj "foo" ili bilo koja druga riječ,
ali ja ću dati neke semantički smisleno ime
kao što je "prvi".
Ovo je jedinstveni identifikator, ID, za moj prvi stavak.
>> Ono što sada mogu učiniti u mom stilova je biti malo precizniji.
Umjesto da se kaže, primjenjuju sljedeće na p tag,
Mogu reći following-- primjenjuju se sljedeće,
ili odabrati, HTML element da ima vlastiti ID za "prvi".
Što želim da se odnosi na njega?
Veličinu fonta od 24 točke.
Dakle, imam dva selektora sada.
Jedan čini sve od stavci 12 točaka.
Ali ovaj, pogotovo jer se radi o second-- je u pitanju posljednji u datoteke nije uspjelo
to ima kaskadni učinak.
Upravo sam napravio sve moje stavak oznake 12 točaka,
ali to se sada kaskadama i nadjačava da za bilo elemenata
na stranici, svaka oznaka na stranici čiji Jedinstveni ID je citat citat "prvi".
A hashtag u ovom kontekstu samo znači "jedinstveni identifikator".
Ja ne staviti ga u HTML datoteku.
I, ovdje, samo reci citat citat "prvi".
>> Pa neka mi ponovno učitati.
A sada vidim, ah, u redu.
Mislim, nije to lijepa, ali to je vrsta
poput predgovora u A knjige ili nešto slično,
gdje je prva stavka je veća.
Moglo bi biti još precizniji s samo prva slova, ali barem
Ja sam vršio više kontrole.
Sada maybe-- možda želim to učiniti povremeno iz bilo kojeg razloga,
pa ne želim to primjenjuju se samo jedan HTML oznake.
Umjesto toga, neka je say-- neka je Također učinite sljedeće.
Class = "uvoz".
Dok osobna se koristi za jedinstveno utvrditi jednu stvar, jednu oznaku,
Vaše web stranice, klasa je značilo da se koristiti na bilo koji broj elemenata ili oznake
na web stranici.
Tako da je moguće ponovno koristiti.
ID je nije moguće ponovno koristiti.
Klasa je moguće ponovno koristiti.
>> I znate što, iz bilo kojeg filozofski reasons--
Nisam završiti Mislila sam reći
da je prva stavka i Drugi paragraf su važni.
Zato ću primijeniti klase pod nazivom "Važno" da, ako sam spasiti svoju sliku
i ponovno učitavanje, nema funkcionalni učinak još.
Ali ja sam dodao neke metapodataka do datoteke,
vrsta nešto odvojeno od osnovnih podataka o datoteci u,
tako da je sada u mom stilovima, ako sam umjesto da kažu ".important" - znate,
sve što je važno, ja sam će napraviti font-boje, red--
odnosno ne font-boje, samo boje.
Postoji nedosljednosti u CSS žalost.
I ponovno učitati.
Sada primijetite prva dvije točke su crvene
ali ne i treći, jer sam samo primjenjuju klasu "važno"
na prve dvije od tih stvari.
>> Tako je u ID, imate mogućnost odrediti vrlo precizno.
S klase, imate višekratnog.
No, u oba slučaja, primijetiti vrsta načela dobre dizajn
gdje sam uračunata sve od estetika mom styles.css datoteku.
Dakle, nema nereda ovdje.
Nema spomena o crvenom ili bold-suočava ili veličine fonta u ovoj datoteci.
Radije imam semantički, smisleno karakterizira moje podatke,
Ovdje je neke važne podatke.
Evo još neke važne podatke.
Osim toga, ovdje je "Prvi" od mojih važnih podataka.
Dakle, HTML je sve o sortiranje označavanja, doslovno, riječi
i odlomci i konstrukti u svoj stranica sa ovim malim naznakama, ako vas
će se, da možete nekako utjecati pomoću
druge tehnike kao što su CSS na ovaj način.
>> Tako je u odgovoru na Victoria pitanje, možemo napraviti tekst veći na taj način.
Postoji toliko mnogo drugih načina, ali font tag-- otvorena zagrada "font" -
je zapravo nekoliko godina.
I to je problem, također, uz oslanjajući se samo
na online resources-- oni imaju tendenciju da se zastarjeli.
I doista, to je obustavljena, jer je svijet shvatio,
sto "font-size = 7" znači?
To ne čini.
I tako već dugi niz godina i da se ovaj day-- jedna od bočnih
napominje da je ovdje to je zapravo nevjerojatno bolno i dalje ponekad
razviti web stranice za web, jer Microsoft
i Google i Mozilla i drugi često ne slažu kako
interpretirati specifikaciju kao HTML.
>> Postoji Pravilnik o HTML-a koji uglavnom govori što svaka oznaka znači.
No, ponekad je ostalo na diskrecija za provedbu,
Microsoft je diskrecija i Google.
I tako da ćete vrlo često vidjeti na web stranici nešto
izgleda drugačije na PC-u nego što to radi na Macu,
i to je stvarno, jer, na kraju dana,
nisu ga testirati i na obje platforme.
No, to je i zato što razumno, pametni ljudi će se ne slažem
a tvrtke će se ne slažu, i tako jedan od izazova za programiranje
za web ili projektiranje stvari za web
piše svoje web stranice na neki način koji radi na svakom web pregledniku.
No, čak i da je to nerazumno, zar ne?
Postoji toliko mnogo verzija tako da mnogi preglednici vani da, u nekom trenutku,
te isto tako morati napraviti sud poziva i morate odlučiti kao tvrtka,
posebno za e-commerce stilu mjesta gdje ste
pokušavate koristiti najnoviji i najveći Tehnologije dati stvarno dobar korisnika
iskustvo.
No, neki Postotak korisnika moglo još uvijek koristite Internet Explorer 6 ili 7
ili 8, posebno ovisno o zemlja da oni dolaze.
>> I tako vrlo često konzultirani je nešto
kao što je "statistika web preglednik."
A ako idemo to-- vidimo Wikipedia i vidjeti kako up-to-date to grafikon
ako postoji.
Dakle, ovdje možete vidjeti gdje preglednici zapravo
su, prema prosincu 2015. godine, prema američke vlade.
Chrome je na 42% tržišnog udjela, a slijedi IE uglavnom u korporacijskim okruženjima
ili PC postavke, naravno, nakon čega slijedi Firefox,
onda Safari, onda Opera nije izraditi kartu ovdje iz nekog razloga,
i onda drugih.
Možda je u drugima.
No, veći problem od toga is-- neka je vidjeti ako Wikipedia također ima
verzije preglednika version--
>> Idemo statistikama preglednika.
IE.
Čak i da to nije dovoljno.
Statistika preglednika.
Moja verzija.
To neće biti u pravu.
Da vidimo verzije.
preglednik na tržištu dionica.
Da vidimo je li to dolazi gore.
U REDU.
Sada ovo postaje malo više koristan.
Pa evo, primijetiti da smo svi različite verzije preglednika.
I, moj Bože, ako look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Mislim, preglednici sve obnovljeno, a ponekad i neke od tih promjena
su značajne u Uvjeti funkcionalnost.
I tako u nekom trenutku, Voditelji proizvoda ili inženjeri
potrebno napraviti decision-- ti Znaš što, samo 1% na svijetu
se još uvijek koriste IE 7.
Do vraga s njima.
Mi jednostavno ne ide podršku tom preglednik.
I što to znači da ne podržavaju?
To bi moglo značiti da gumbi ne rade na svoju web stranicu,
ili bi to moglo značiti Oblikovanje je potpuno isključena.
Ili možda morati napraviti taj isti sud poziva
u mobilnim ovih dana, gdje je, mi smo neće podržavati iOS 5 više.
Dakle, ljudi jednostavno moraju nadograditi.
Ili nećemo podržati cupcake na Android OS za Android uređaje,
jer kao što svijet-kao tech svijet želi da se krene naprijed,
To je vrsta želi povucite svijet s njom, tako da oni ne
moraju i dalje biti unatrag kompatibilan, tako da
mogu ponuditi nove i dobre osobine.
Ovo je zaista jedan od razloga zašto tako mnoge tvrtke su rolling out
automatska ažuriranja i vrsta prisiljavajući najnovije verzije softvera na nas.
Pa čak i tvrtke kao što je Apple će na neki način
snagu da gotovo i prisiljavaju što u smislu tržišnih sila
kupiti novi mobitel jer su upravo neće obnoviti svoj stari telefon više.
Tako da propustite Najnoviji i najveći značajke,
jer to je skupo za njih kao Tvrtka za održavanje stariji, vjerojatno
slabije verzije softvera.
No, neto učinak je da mi također trpe to kao dobro.
>> Tako ćemo pogledati samo par završnih stvari ovdje.
Recimo sklepati jako brzo neke od oni drugi meci, ako je znatiželjan.
Dakle, ako ste pokušali, na primjer, položaj
tekst na različitim stranama stranica, ja ću učiniti jedan brz način,
ali ima drukčije načina za to.
Pusti me naprijed i eliminate-- pojednostaviti na sljedeći način.
Pusti me samo vratiti na moj jednostavna, jednostavna stavci.
Pusti me da se vratim na moj styles.css.
A ja sam samo namjeravate koristiti simple-- koje ste možda vidjeli na Googleu
ili opoziv iz earlier-- text-align pravu.
I ponovno odaberete ovu stranicu.
Sada sve izgleda biti u pravu poravnat,
kao što ste mogli vidjeti na pretek ovdje.
>> Mi možemo učiniti da izgleda malo više knjiga kao što su, i mi možemo reći: "opravdati"
i ponovno učitati.
Sada je lijepo i kvadrat na oba strane, što je vrsta lijepo.
Drugi cilj koji smo imali ovdje je promjena boje teksta.
Tako smo vidjeli da sa svojim crvenim tekstom.
A sada dodati gumbe za obrazac.
Pa zašto ne bismo pokušati učiniti upravo to?
Ali prvo me pusti na mjesto koje većina nas koristiti svaki day-- Google.
I neka je pogledati kako Google zapravo radi.
Ali ja ću to učiniti.
Prvo neka mi to in-- yep, Pusti me da Googleu.
Ja ću morati ići u Google postavkama
jer želim isključiti nešto što se zove instant rezultate.
>> Dakle, možda ste primjetili u Google ove days-- neka mi se vrati
i uključite ovo.
Dakle, ako sam početak traženja za "cats" kao što je ovaj,
primijetiti da ne samo da JA dobiti auto-kompletan gore
vrh, odjednom, sama stranica Čini se promijeniti vrlo brzo, kao i,
a to je Google koristi jezik pozvao JavaScript pokušava biti od pomoći.
Ali, nažalost, to vrsta od uprska našu raspravu
onoga što se zapravo događa ispod haube ovdje.
Dakle, ja sam samo vrsta brzo isključite instant rezultate.
A ja ću kliknite Spremi.
A sada idem otvoriti da dijagnostička alatna traka koja sam
čuvati otvor na kartici Network.
Tako ćemo to učiniti.
Neka me-- whoops-- dođite ovaj dolje malo.
I neka mi tražiti "mačke".
>> A sada notice-- zapravo, ovo je dobra prilika
kako bi razgovarali na trenutak.
Obavijest trenutak sam type-- ga zaustavi.
Prestani.
U REDU.
Obavijest trenutak sam upišite slovo C, gledati na dnu zaslona.
A- T S. Što dno ovog zaslona, ​​moja mreža kartica,
ukazuju se događa svaki put sam upišete slovo?
Nažalost, žaba je vrlo zbunjujući danas ili djetelina
ili što god da je.
Ono što se događa svaki put kad sam upisali?
I neka mi brisanje buffer i upišite ga opet.
So-- Joj.
Svaki put kad upišete slovo, C- A- T-- pa novi red očito drži se pojavljuju.
Što svaki od tih redaka predstavljaju, na temelju onoga što smo vidjeli i razgovarali
do sada?
PUBLIKA: Potraga?
DAVID J. Malan: Potraga ili više generički, HTTP zahtjev
iz mog preglednika na poslužitelj.
Pa, zašto se moja web preglednik stvaranje HTTP zahtijevati svaki put kad upišete slovo?
>> PUBLIKA: [nečujan]
DAVID J. Malan: Da, to je davanje ja te auto-kompletan rezultata.
Kao, gdje ti Rezultati pretraživanja dolaze iz?
Pa, svaki put kad tip a pismo, Google šalje više
a sve više i više Riječ sam tipkati.
Zašto?
Zato što žele da mi daju sve bolje i bolje, bolje prijedlog,
popis prijedloga, za ono što riječi Pokušavam da se zapravo ne završi.
Dakle, ovo je za reći doslovno svaki znak upišete u Google
se šalje, napose u bulk, ali isto tako ponekad jedan
na vrijeme u cilju provedbe te auto-kompletan značajkama dok
podataka je, naravno, na webu.
>> Sada, neka je pogledati što se zapravo događa kad kliknem na Google pretraživanje.
A onda ćemo iskoristiti to sami.
Dakle, ako sam se pomaknite prema dolje sada vrlo Prvi zahtjev koji se upravo dogodilo.
Obratite pozornost na sljedeće.
To je bio poslan u prilično dugo URL-- https://www.google.com/search?
a zatim cijela hrpa stvari.
Pogledajmo to zapravo sada u kartici preglednika sama.
Idemo riješiti na alatnoj traci ovdje.
Evo stranica rezultata pretraživanja.
I obavijest evo URL.
Sada vjerojatno možete pogoditi što se događa ovdje u dijelu.
Dakle, prije svega, definicija.
To očito je odredište gdje se obrazac.
Dakle, kada sam upisao u riječi "mačke" i pritisnite Enter,
očito Google je poslao moj unos teksta u ovom URL-u
koje sam istaknuo tamo, slash pretragu.
Ispostavilo se, u URL, sve što događa nakon upitnik je,
kao što smo zadržati govoreći, ključni-vrijednost par koji je unijeli u obrazac ili na neki način
prenosi od preglednik na poslužitelj.
>> Dakle, svaki put kad upišete ulaz u obliku na webu
i to je poslana kao što smo raspravljali, preko get,
jedan od tih virtualnih omotnice, sadržaj
to envelope-- da, zadržati uzimajući punjena fizički
u omotnicu u razredu danas, ali tehnološki
to je zapravo staviti u URL-u.
Tako je, u stvari, neka mi prosijati kroz to.
Gdje vidiš korisničkog unosa?
Gdje vidiš nešto da sam ja upisao ovdje?
Da, pa "mačke".
Pravo?
Pa neka mi destilirati ovo u nešto jednostavnije.
Idem obrisati sve o ovaj URL koji ne razumijem,
a ja sam samo idući u dopust to što učinimo / pretraživati? q = mačke.
Vidjet ćemo gdje je Q dolazi iz u trenutku,
ali to se osjeća kao minimum Količina informacija koju sam naveo.
A sada idem pritisnite Enter.
I primijetiti to još uvijek radi.
Još uvijek se vratiti hrpu mačaka.
Dakle, Google je ljubitelj od toga ovih dana.
To je 2016, a ne 1999.
Dakle, tu je druga stvar da je moj preglednik šalje na server.
No, to je minimalno sve što je potrebno.
>> I što ima?
Pa, dopusti mi ići naprijed i idi natrag na Cloud9 i neka mi ići naprijed
i zatvoriti kartice ranije.
A ja ću to učiniti na moj posjedovati samo na trenutak.
Idem samo naprijed i stvoriti novu datoteku.
I ja ću ga spremiti kao google.html.
A ja ću vrlo quickly-- Idem ukrasti, zapravo,
neki od ovog teksta samo uštedjeti na vremenu.
Idem zalijepiti ovdje.
Neću se zamarati s bilo stilizacija ovaj put.
Ćemo nazvati "Moj Google".
I ja ću se riješiti svega u tijelu.
I ja ću učiniti sljedeće.
Dopustite mi zumirati.
Obrazac action-- i kao što sam ukratko spomenuo earlier-- whoops-- kako je ukratko sam
što je ranije spomenuto, djelovanjem Obrazac je mjesto gdje možete poslati podatke.
Tako google.com/search.
Te način želim koristiti može biti jedna od dvije stvari.
To mogu biti bilo "dobiti", kao što smo zadržati raspravlja, ili to može biti "post".
Za sada, temeljni Razlika je u tome, ako koristite "dobiti"
sve informacije da je Korisnik pruža se šalje u URL-u.
>> To je super za stvari kao što su pretraživanje motori i nekoliko drugih aplikacija,
ali u kojim okolnostima bi ne žele ispuniti obrazac
te su informacije završiti gore URL, kao u adresnu traku preglednika?
Kakav oblika učiniti you--
PUBLIKA: [nečujan]
DAVID J. Malan: Da, kao što?
PUBLIKA: Lozinke.
DAVID J. Malan: Da, tako da se prijavite na Facebook ili neke web stranice.
To je user ulaz iz oblik, tekstualni okvir,
ali vjerojatno ne želite prikazuje se u URL-preglednika.
Zašto?
Mislim, možda postoje neki sigurnosne implikacije na mreži,
ali more-- sviđa, jednostavnije, što ako vaš cimer, vaše druge značajne,
vaša djeca, vaš suprug izgleda kroz svoju povijest preglednika?
Tu je zaporka ispravna Postoji u povijesti preglednika.
To ne osjećam kao dobar dizajn.
Ili čak i više tehnički, Pretpostavljam da pokušavate
uploadati fotografiju Flickr ili Facebook ili wherever--
da je unos korisnika, iako to je malo više interesting-- kako
mogu strpati sliku u URL traku?
Vi vrsta vrsta ne mogu.
Vi vrsta može.
Ali, stvarno, ja sam pod velikim pritiskom zamisliti da radi.
Dakle, trebam još jednu metodu postavljanje fotografija na web stranicu,
a ta druga metoda se zove "post".
No, za sada, samo ćemo razgovarati o "Dobiti", što je jednostavnije od dva.
To samo stavlja sve korisničkog ulaza u URL-u.
>> Dakle ovdje je forma Izrađujem.
Želim ulaz.
I znate što?
Idem uzeti pogodak ovdje.
Idem da se sjeti moja input "q" za "upita."
I mislim da je to jedan od originalni dizajn, možda, od 1999.
A onda se tip tog ulaza je samo će biti "tekst".
A onda ću imati još jedan ulaz da ne treba ime, kao što ćemo uskoro
vidi, tip koji je "submit".
A to će se daj mi poseban gumb.
I to je to.
>> Pa neka mi ići naprijed i spremiti ovu datoteku.
Idem se vratiti u moj preglednik i idite na google.html.
Enter.
I to je vrsta rijetka u najmanju ruku.
No, dopustite mi ići naprijed i potražite "mačke".
A primjetiti ja sam trenutno U ovom Cloud9 URL.
No, u trenutku sam kliknite ovaj, gdje ti se nadam da ću završiti?
>> PUBLIKA: Google.
>> DAVID J. Malan: Google.
Tako ćemo kliknite Pošalji.
I doista sam ponovno provodi Google.
Pravo?
To je jednostavnije.
To je lakši.
Mislim, moj broj je očito bolje nego njih, od nereda smo vidjeli ranije.
I znate što?
Idem začiniti ovaj gore malo.
Nisam spomenuo ovo ranije.
Postoje oznake kao što su H1, za Heading 1, najvažniji naslov na stranici.
"Moj Google" Nazvat ću ovo.
Pusti me da ponovno učitati.
To je izgleda malo bolje već.
I, zapravo, znate što?
Imam already-- sam lagao.
Rekao sam da neću stil toga, ali idem na stil to kao prije.
I moje tijelo će biti, recimo, text-align centar.
To je izgleda više kao Google već.
>> Trebam prijelom retka, ipak, za to gumb Pošalji.
I ispada, vi Možete koristiti stavke,
ili možete više doslovno samo reći: daj mi liniju pauze here-- BR oznaku.
A ako sam ponovno učitati ovaj, sada to ide tamo.
Malo je ružno, pa sam mogao učiniti više redaka,
ali nemojmo se previše pohlepni ovdje.
Tako sada neka je vidjeti ako to radi za "psi".
Čini se da rade za "pasa", kao dobro.
Dakle, što je izuzetan takeaway ovdje?
One-- nije bio ogroman skok na uvesti još nekoliko oznaka,
kao oblik oznake u ulaznu oznaku.
No, važnije je, sve što radite
je utjecati na naše razumijevanje HTTP i činjenice
da oblici u konačnici mijenjaju ono što je u URL u pregledniku,
i tako, dakle, možemo mehanički osigurati ulaz na server
čineći HTML obrazac i znajući da poslužitelj razumije HTTP,
baš kao i naše tijelo ne razumije, kao što su, trese moje strane, taj isti protokol,
i tako smo dobili natrag odgovor da smo na kraju očekivali.
>> Tako ćemo pokušati napraviti jedan Posljednje što je sada sa mobilnim,
a ja ću make-- ću dodati ovaj kod na slajdovima.
Dakle, ako želite da prtljati, te može sigurno uzeti od tamo.
Ali ja ću otići naprijed i učiniti jednu stvar.
Ja ću ići naprijed i otvoriti moje indeks page--
moj bok stranica kao i prije, kojima ima puno tog promašaj-latinski tekst,
ili besmislena latinski tekst i has-- to izgleda ovako na ovu veličinu fonta.
No, dopustite mi ići naprijed i učiniti.
Ja ću ići u Cloud9.
I ne morate učiniti taj korak.
Samo ću to učiniti.
Idem kliknite Dijeli.
A to je značajka Samo od Cloud9, pri čemu
Mogu napraviti moj okoliš javnosti.
>> I samo radi demonstracije, neka mi to učiniti.
Idem da bi moj zahtjev javnosti.
Obavijest to me upozorio, ja Ja sigurna da želim to učiniti,
jer ovo ide kako bi sve u svijetu, bez obzira jesu li sada ovdje
ili gledanje video kasnije na internet u stanju vidjeti ono što ja vidim.
Ali to je u redu.
Ja ću reći: "Gotovo."
I neka mi vam preporučujemo, ako sam ovo correctly-- neka mi ga testirati na prvom mjestu.
Samo naprijed, ako ne mind-- u pretraživač na računalu,
ići na ovaj URL, i nadamo se vidjet ćete moj latinski tekst.
I da bude jasno, to je trčanje a ne na moj laptop.
To je u oblaku.
To je na Cloud9, doslovno, ali Ja sam napravio moj radni prostor javnost
tako da bilo tko na internetu mogu pristupiti latinski početnu stranicu.
>> Idi na istom URL na telefon, ako može.
Ako to će vas koštati, ipak, mogu samo gledati preko ramena.
PUBLIKA: [nečujan]
DAVID J. Malan: Žao mi je što?
PUBLIKA: [nečujan]
DAVID J. Malan: Samo latinske riječi.
To je sve.
Ali to je ono što bi trebao vidjeti.
>> PUBLIKA: Da.
DAVID J. Malan: Da.
Da.
U REDU.
Dakle, mogu držati do svoje Telefon samo na trenutak?
Dakle, nadam se, ako ste u pristupu da, to bi trebalo izgledati gotovo nečitak.
To je still-- Mislim, to je nečitak zbog latinski.
No, to je također nečitljiva za ono zbog čega drugog?
Kao, ono što neprijatan o tome?
PUBLIKA: To je mala.
DAVID J. Malan: To je super, super mala.
Pa kako bismo mogli popraviti?
To je super, super mala na Victoria telefon
i, ako ste izdvajali da se sami, vjerojatno
mala na telefonu, kao i, osim ako omogućena postavki pristupačnosti.
Što je to?
Vi samo mogu patiti i zoom, koji je djelatan,
ali onda vidite samo nekoliko riječi u isto vrijeme.
Pa čekaj malo.
Znam kako to škripac ovaj.
Pravo?
Mogao sam koristiti CSS, i mogao sam promjeniti slova od 12 točaka do 24 točke.
Ali nuspojava toga naravno, će biti i sada,
na desktop ili laptop, Sada je tekst dvostruko veći.
I tako bi nekako bilo lijepo razlikovati uređaja,
i ispada vani načini da radi.
Postoji nekoliko različitih načina, u stvari,
pri čemu se pomoću CSS i ljubitelj značajke da nećemo ići u vrlo detaljno,
da u suštini može upit preglednik i reći:
ako je vaš zaslon je manji od toga broj piksela, koristite ovu veličinu fonta.
Ako je zaslon veći od ovoga broj piksela, koristite ovu drugu veličinu fonta.
>> Možete biti još raskošnije i dalje.
Ako ste ikada posjetili Web-stranica koja, na radnoj površini,
ima veliki izbornik možda off na strana, a onda sav sadržaj
je na strani koja menu-- to je vrsta zajedničke paradigme.
Meni se na lijevo, sadržaj na desno ili obrnuto.
Zapravo ne radi na mobitelu kad tvoj Ekran je samo to mnogi piksela.
Dakle, sve češće na mobitel je, Vaš izbornik će iznenada doći
propali, i morate kliknite na gumb da ga vide,
ili na web stranici će se staviti u izbornik iznad nje i stavio sadržaja ispod njega.
A možete provesti ove stvari na više načina, previše.
Možete postaviti programera, hej, ekipa, u bilo koje vrijeme
vidite HTTP zahtjev od Androida Uređaj, Microsoft uređaj, Google
uređaj, Apple uređaj, koristiti veličinu fonta i koristiti ovaj izgled izbornika,
inače koristiti zadani veći izgled.
>> Sada, koristeći ono Temeljna tehnika danas
mogli su inženjeri koristiti da znam da li je
iPhone, Android telefon, laptop, desktop posjeti tvrtke server?
U čemu se oni dobiti tu informaciju?
>> PUBLIKA: Zaglavlje?
>> DAVID J. Malan: Da, HTTP zaglavlja.
Tako svaki HTTP zahtjev dolazi iz njihovi kupci na njihove servere
uključuju, iznutra da virtualni omotnice, cijela hrpa
HTTP zaglavlja, od kojih je jedan preglednik i operativni sustav
čak i ako vam je stalo da da razina detalja.
Sada, to je zagonetna izgleda niz, ali postoji softver koji će samo
pojednostaviti to, a vi samo možete pitati u programiranju code-- PHP, Java, C ++,
whatever-- što je telefon učinimo što je uređaj taj korisnik koristi?
I onda se može reći, pokazati im to verzija web stranice ako je telefon.
Pokaži im Ova verzija Web stranica ako je to laptop ili desktop.
Ali ti ni ne treba server-side složenosti.
To možete učiniti čak i najjednostavniji stvari.
>> Idem to učiniti.
Idem da ide naprijed u moj Cloud9 okoliš,
a ja ću dodati oznaku koje ste vidjeli na Googleu prije.
To se zove metatag.
I nikad ne zaboravite ovo, pa Ja ću ga prepisati ovdje.
Meta name = "Pogledu", a zatim content = "width = širina uređaja, intital
scale = 1 "i to je to.
>> Tako bi moglo biti i kao kao čarobni bajanje.
To nije sve to jasno, ali ovo je nešto učiniti s prikaza,
a vidljivi dio je samo Tijelo web stranica je pravokutno područje koje
određuje najveći dio stranice.
A to je samo priča preglednik, znate što?
Provjerite širinu ovoj stranici učinkovito jednaka širini uređaja.
Drugim riječima, nemojte pretpostavljati da Imate li kakve neograničen prostor.
Pretpostavimo da imate samo onoliko koliko Prostor kao i sam uređaj je velika.
I tako sada, ako sam učitajte u svom pregledniku, ne vidim promjene.
Ali, ako sam ovo correctly-- i neka mi križ moj fingers-- ako vas sve
reload svoje telefone, zar ne vidi uvjerljiv promjenu?
Da je that--
>> PUBLIKA: [nečujan]
DAVID J. Malan: Da.
U REDU.
Dakle, vjerojatno više čitati sada?
Ipak mala, da bude fer, ali ne tako malen da bude nepodesan za rukovanje.
I sigurno mogu zaobići ovo dalje s CSS ili na strani poslužitelja,
ali sve što si vidim se više i više mogućnosti
dodaje se u strani klijenta environments--
JavaScript, kako ćemo raspravljati Sutra, CSS i HTML-- tako
da su sve ove upite može obaviti na klijentu
tako da smetaju poslužitelj puno manje, a ne
morati držati korak s, za Primjerice, konstantna navala
novog operativnog sistema verzije, nove verzije preglednika.
Vi samo možete pustiti preglednik pitajte uređaj, koliki su ti,
a zatim napraviti nešto logično odluke na temelju toga.
No, vidjet ćemo više prilika za logičke odluke
Sutra u kontekstu o programskom jeziku.
>> Dakle, bilo kakva pitanja, a onda, na izradu web stranica?
Danas nije web programiranje, po sebi, jer gotovo sve što smo učinili
bio je vrlo estetski, ako hoćete.
Nema donošenja odluka u kod koje smo napisali,
pa to je razlog zašto HTML je markup jezik, a ne programski jezik.
Ali sutra ćemo se brz pogled, u konačnici,
u JavaScriptu, što je stvarna programiranje
jezik koji omogućuje nam da radimo malo više.
>> Ima li pitanja?
Pa, neka mi predloži dva mogućnosti izborni za domaću zadaću.
Jedan is-- ove Cloud9 računi neće isteći.
Vi ste dobrodošli da koristite im da prtljati s.
To je besplatno razina usluge.
Shvatiti da, ako se prilikom izrade vaš radni prostor, te je napravio to javno,
to ne znači da bilo tko na Internet može vidjeti što pišete.
Dakle, možda samo uzeti u obzir Nemojte se sramiti sebe
ako ste stavljajući svoju prvu web Stranica vani javno slučajno,
ali nitko ne će znam da izgleda tamo ionako.
>> I two-- neka mi bacanje do ovog URL kao i,
pogotovo ako je došao u danas malo manje udobna od drugih,
sigurni što su sve ove stvari znači.
Shvatite da je mnogo više od ovog videa, koji je ujedno i dobar način da se spava
kao i da se smiju dok Pritom, također ima
puno društveno interesantno i sigurnosne relevantne rasprave
njemu od John Oliver, iako komičara.
>> Ali ako nema više pitanja, to nas dovodi do recepcije.
Pa zašto se ne uključim glazbu.
Tu bi trebao biti pića i grickalice vani.
Drago mi je da druženje za sve Sve dok ljudi bi htjeli,
odgovoriti na pitanja još jedan-na-jedan.
Ali, inače, vi ste dobrodošli skinuti u bilo kojem trenutku,
pa ćemo vidjeti te opet sutra ujutro za malo više.
U redu, hvala.