DAVID J. Malan: Të gjithë të drejtë.
Ne jemi kthyer.
Pra, qëllimi i kësaj seance të fundit është për të futur disa koncepte më shumë
por edhe të japë të gjithëve një shans të lloj zgjas gishtat
dhe të vërtetë të bëjë diçka një duart-në pak.
Qëllimi nuk është që të kthehet të gjithë ne në web developers
me çdo mjet, por me të vërtetë vetëm për të ju jap një shije të disa
prej koncepteve themelore të asaj shkon në programimin e web dhe sot web
zhvillimit, kështu që Ana statike e things--
ka logjikë, nuk ka programimi gjuha, vetëm përmbajtje statike.
Dhe kjo do të na japë një mundësi për të vërtetë shohim se çfarë një web server është,
Shih se çfarë një skedar HTML është, të shohim se çfarë ajo është HTTP është në të vërtetë shërbejnë deri.
Por, para se të zhyten në diskutim, çdo retrospektivë pyetje në lidhje me cloud
ose sigurisë apo diçka në mes?
>> Nuk ka?
Në rregull, mirë, le të ta bërë këtë, vetëm në rast
procesi i nënshkrimit për diçka që merr disa minuta.
Ne do të le të bëjë atë në sfond.
Shko përpara, në qoftë se ju mund të, për këtë URL here-- c9.io.
Kjo është një palë e tretë service-- Platforma si një shërbim, nëse ju will--
që do të ju ftojmë për të nënshkruar për një llogari,
dhe ajo do të japë secili nga ju një llogari në të ashtuquajturën re
në infrastrukturën e dikujt tjetër, një kompani e quajtur Cloud9.
Por ajo që është e bukur për kjo është që ata të ju jap
një përafrim i një Zhvillimi aktual botës reale
mjedisi, megjithëse në re dhe në një shfletues web,
dhe ne do të përdorni këtë për të vërtetë eksperimentojnë pak sot.
Dhe pastaj të shkojnë përpara dhe të vetëm të lundruar rrugën tuaj për procesin shenjë-up
në qoftë se ju mund të.
Pra, ne të ndodhë për të përdorur këtë në klasë I japin mësim për të gjithë studentët tanë,
si në kampus dhe jashtë tani, dhe është e zëvendësuar atë që historikisht
ishte software ndryshe shkarkohen.
Pra, atë që ju po duke fituar qasje në është një nga këto makina virtuale,
në thelb, se kam përshkruar më parë.
Pra, kjo kompani Cloud9 ndoshta qiratë nga një party-- tretë vërtet
në këtë rast, Google-- një tërësi bandë e makinave virtuale
se ata disi pres deri në iluzionin e servers individuale
që secili prej nesh ka kontroll të plotë mbi të.
Kjo nuk është shumë e saktë për të thënë se ata janë makina virtuale,
pse, sepse ajo Cloud9 fakt përdor
është një teknologji disi më të reja quajtur Containerization.
Dhe më lejoni të rrëmbyer këtë foto këtu për të pikturuar këtë foto.
>> Një kontenier është, nëse ju kujtohet foto
nga më parë, pak më të lehta Pesha se një makinë virtuale.
Në fakt, ndërsa e fundit herë kemi biseduar për aty
duke qenë një operativ sistemit dhe një hypervisor
dhe pastaj të sistemit operativ mysafir, mysafir sistemit operativ, operativ mysafir
sistemit, në krye të tuaj hardware fizike,
diferenca me këtë më të reja teknologji, Containerization,
është se ata të gjithë disi të ndarë të njëjtin sistem operativ.
Por ata ende të krijuar iluzionin e të gjithëve
duke pasur ekskluzive tij ose të saj vetë Të drejtat administrative dhe fotografi
në server.
Por ka pak software në mes jush dhe hardware.
Rezultat i cili është, në Teoria, një performancë më të lartë,
për shkak se ju jeni duke përdorur ose humbur më pak burime
në atë të ashtuquajturën shtresë Virtualization.
Pra, kjo quhet Containerization nga natyra
me anë të një teknologji të quajtur Docker, e cila është shumë e ardhur në vete.
Dhe kjo është diçka që inxhinierë në kompaninë tuaj
mund të lloj lloj fillojnë të bisedojnë për së shpejti në qoftë se ata nuk e keni tashmë,
edhe pse ka sigurisht asnjë arsye për të hidhen në çdo bandwagons.
>> Pra, me tha se, çfarë ju ndoshta shikoni tani
është një ekran që duket pak si kjo.
NE RREGULL.
Dhe vetëm më thirrni më shumë se në qoftë se jo.
Dhe në qoftë se so-- unë do të vijnë gjatë në qoftë se jo.
Shkoni përpara dhe klikoni aq i madh plus për të krijuar një hapësirë ​​pune,
dhe ju do të shihni një ekran si kjo.
Ju mund të telefononi workspace përmendur ndonjë gjë që ju dëshironi për të tani.
Dhe vetëm në të vërtetë për thjeshtësi, shkoni and-- mirë, disa prej jush
tashmë kanë hapësirat e punës.
E quajti atë çdo gjë që ju want-- të biznesit, Harvard, e enjte, çdo gjë që ju dëshironi.
Ju nuk keni nevojë për një përshkrim.
Ju mund të lënë atë private, nëse ju tashmë kanë një bandë e hapësirave të punës.
Nëse ju jeni të detyruar për ta bërë atë publike, kjo është në rregull për qëllime të sotme.
Këtu, gjithashtu, është një nga upsells.
Ju merrni një hapësirë ​​pune private nga default. Por në qoftë se ju doni më shumë,
ju duhet të paguani për më shumë.
Përndryshe, ato fuqi të për të bërë publike punën tuaj.
Por kjo është në rregull, sepse ata edhe synuar këtë në komunitetet burim të hapur
për të inkurajuar njerëzit për në fakt bashkëpunojnë.
>> Dhe gjëja e fundit që është e rëndësishme, Megjithatë, është, në fund ju zgjidhni një emër
dhe pasi ju zgjidhni private apo publike, klikoni HTML5, ikonën portokalli i madh
i dyti nga e majta, dhe pastaj klikoni Krijo Workspace.
Dhe kjo ndoshta do të marrë një minutë apo më shumë,
por atëherë ju do të keni një mjedisit, një herë ju
bëjë këtë, që duket të kujton ajo që unë kam në ekran këtu tani.
Por, përsëri, ajo mund të marrë një minutë ose më shumë për të marrë në këtë ekran
një herë ju keni klikuar Krijo Workspace.
Por vetëm flamurin më gjatë në qoftë se ju dëshironi të më për të marrë një sy në çdo gjë ose këshillojë.
Në rregull.
Kështu që unë jam duke shkuar për sfond këtë tani për tani.
Call me më shumë se në qoftë se ju duket për të ndonjë vështirësi teknike.
Por, përsëri, ajo mund të marrë një pak që kjo të hapur.
Dhe le të shkojnë përpara dhe të flasin për atë në të vërtetë do të thotë për të bërë një faqe interneti,
ajo HTML është, dhe se si e gjithë kjo tani interconnects si ne jemi duke filluar
që në fakt përdorin disa të teknologjisë.
Pra, rezulton që unë mund të shkojnë në Mac tim të vogël këtu,
të hapur një program të thjeshtë të quajtur TextEdit, ose në Windows unë mund të
diçka të hapur të quajtur notepad.exe.
Dhe unë mund të thjesht të bëjë diçka si this-- "Hello, botës."
Dhe atëherë unë mund të shpëtojë këtë si HELLO.TXT Pra nuk ka magjike atje.
Kjo nuk ka të bëjë me web programimi, nuk ka të bëjë me HTML.
Vetëm të krijuar një skedar të thjeshtë teksti.
Por kjo rezulton se në web faqe është fjalë për fjalë vetëm se.
Kjo është një e thjeshtë text file teksti që përmban që ju mund të shkruani në tastierën tuaj,
por zakonisht, por jo gjithmonë përfundon në nuk txt, por skedarit si më poshtë ose htm.
Dhe ju nuk bëni vetëm shkruani fjalë në dosjen.
Ju në fakt duhet të përdorni gjëra quajtur tags ose, më në përgjithësi, diçka
quajtur gjuhë markup.
>> Kështu që unë jam duke shkuar për të shumë shpejt të tipit dhe pastaj të shpjegojë në vijim.
Unë jam duke shkuar për të parë këtë lloj, i cili thotë:
hey, browser, këtu vjen një web faqe të shkruara në HTML.
Dhe këto dy gjëra së bashku të thënë, hej, shfletues, në vijim është me të vërtetë HTML.
Hej, browser, këtu vjen kokë apo në krye të faqen time.
Hej, browser, brenda krye faqja ime, e vënë një titull që është, "hello,
botë."
Hej, browser, pasi kreu i tim faqe, këtu vjen trupin e faqen time.
Dhe, hej, shfletuesi, trupi i tim faqe duhet të thotë: "Hello World".
Pra, çfarë janë të dhënat e spikatur këtu?
Kjo është ajo që është në përgjithësi quajtur një deklaratë doc-lloj,
dhe, sinqerisht, kjo është pak e vështirë për të mësuar përmendësh këtë në fillim.
Ju vetëm lloj kopje-paste atë.
Kjo është mënyra formal për të thënë, hej, browser,
Unë jam duke përdorur versionin HTML 5 të cilat doli disi kohët e fundit.
Kjo është një magji magjike që disa njerëzit me një ndjenjë të dobët të dizajnit
vendosi për të vënë më së Shumë e lartë e dosjes.
Edhe pse kjo është një pak misterioze, kjo është e gjitha
ajo means-- hey, shfletues, këtu vjen me versionin 5 të HTML.
>> Pjesa tjetër e kësaj ka qenë me ne për një kohë tani, historikisht,
por kjo është në evolim, dhe kjo është ndoshta qenë duke marrë një pak më të thjeshtë.
Vini re disa karakteristika të asaj që unë e kam theksuar.
Ka këto gjëra me angled brackets-- kllapa majtë
dhe kllapa e drejtë.
Dhe njoftim simetri këtu.
Dhe me simetri, dua të them, ashtu si unë kanë këtë tag të filloni këtu ose një etiketë të hapur
nëse do, këtu poshtë unë kam një tag të ngushtë ose një tag fund kjo është
të ndryshme vetëm për aq sa ka kjo zvogëluar në fillim të fjalës
HTML.
Dhe ju mund të mendoni këtë si unë kam qenë rastësisht
propozuar më parë, hej, shfletuesi, këtu vjen një HTML.
Dhe, anasjelltas, hey, browser, kjo është ajo për fillimin HTML-- dhe në fund.
>> Ndërkohë hey, browser, këtu vjen kokën e faqen time.
Hej, browser, kjo është ajo për kokë.
Hej, browser, këtu është trupi i faqes sime.
Hej, browser, kjo është ajo për trupin.
Dhe brenda se disa Teksti arbitrare tani për tani.
Dhe në brendësi të kokës, ndërkohë, disa arbitrare, por tagged,
kështu që të flasin, tekst që thotë se, titullin e faqen time do të jetë "hello, bota."
Tani, tani për tani, ju mund të supozojmë se shfletues
kanë only-- ose, më saktë, faqet e internetit kanë vetëm dy parts-- kokën dhe trupin.
Dhe kreu në përgjithësi është vetëm si menu bar, sende
me të vërtetë vetëm në krye.
Dhe trupi është guxim e faqes, çdo gjë në këtë drejtkëndësh i madh
që mbush ekranin.
Kështu që unë jam duke shkuar për të shkuar përpara dhe të bëjë këtë.
Unë do të shkoj përpara dhe të klikoni Save, Save dokumentit.
Dhe unë jam duke shkuar për të shpëtuar këtë si hello.html,
dhe unë jam vetëm duke shkuar për të vënë atë në tavolinën e punës time.
Dhe unë jam duke shkuar për të shkuar përpara dhe klikoni Ruaj.
Dhe notice-- Mac tim në paktën është yelling në mua.
Jeni te sigurte qe doni ta bëni këtë?
Dhe unë jam duke shkuar për të thënë, po, përdor HTML.
Unë e di më mirë në këtë rast.
Dhe tani unë jam duke shkuar për të shkuar në tavolinën e punës time ku kam këtë fotografi papritur.
Dhe unë jam duke shkuar për të klikoni dy herë atë.
Dhe ju do të vini re se, duke parazgjedhur, Chrome hapur.
Kjo për shkak se kjo është shfletuesi im default.
Dhe vetëm ajo thotë, "hello, bota."
Por ai thotë se "hello, Bota "në dy vende.
Njoftim majtë të lartë.
Goxha e vështirë të humbasë atë.
Kjo është e madhe dhe të guximshme.
Dhe ku tjetër nuk duket për të thënë, "hello, bota"?
>> AUDIENCA: The tab.
>> DAVID J. Malan: Yeah, tab vetë.
Kështu që kur kam thënë kokën e të faqe është gjithçka deri top--
dhe në të vërtetë ky është titulli.
Është vetëm në tab këtu.
Dhe unë mund të tërheqë këtë skedë se në mënyrë që të mos ngatërruar.
Kjo është vetëm një tab të vetëm tani, dhe në të vërtetë ne e shohim "hello, bota"
deri këtu dhe "hello, bota", këtu poshtë.
Pra, shumë i thjeshtë.
Por është gjithashtu mjaft e thjeshtë.
Dhe, në të vërtetë, unë zoomed në.
Unë mund të ndryshojë madhësinë e shkronjave vetëm për të lartësuar për qasje.
Por tani le të bëjë diçka pak më shumë interesante.
>> Unë do të go-- uh, le Më të kthehet në dosjen time teksti.
Unë jam duke shkuar prapa në tim file teksti, dhe unë jam duke shkuar
për të ndryshuar këtë dhe thonë "Hello, Disney World."
Ruaj.
Dhe të kthehemi në my shfletues dhe klikoni Rifresko.
Dhe tani, sigurisht, atë thotë se "Disney World".
Dhe unë jam duke shkuar për të zmadhuar artificialisht në vetëm kështu është më e lehtë për të parë.
Deri tani, për fat të keq, unë lloj i dua to-- fakt, kjo është një tipar Mac.
Unë dua të klikoni në Disney World dhe shkoni diku si disney.com,
por kjo nuk funksionon.
Pra, një parim themelor i web është hyperlinks, links që shkojnë në vende të tjera.
Pra, si mund ta bëjmë këtë?
E pra, unë mund të them vetëm, "Hello, http://www.disney.com."
Ruaj këtë.
Ringarkoj.
Por kjo gjithashtu, nuk klikueshme.
Dhe çfarë është e bukur këtu, edhe pse kjo nuk është ende funksionale,
është se duket se shfletuesi bën fjalë për fjalë vetëm
ajo që unë them se për të bërë.
Pra, nëse unë vetëm shkruani një URL si kjo, ajo është vetëm do të ma trego URL.
Unë kam nevojë për të përdorur etiketa ose Markup Gjuha e që në fakt të treguar
shfletuesi për të bërë edhe më shumë.
Kështu që unë jam duke shkuar për të shkuar përpara dhe fshini këtë për një moment.
Dhe unë jam duke shkuar për të thënë, hej, shfletuesi, të fillojë një spirancë këtu,
një lidhje mënyrë që të flasin.
Dhe hiper-reference, destinacioni e atij spirancë, duhet të jetë në këtë URL.
Dhe vini re kuotat e mia.
Unë mund të përdorni kuotat e vetme, gjithashtu, por ju duhet të jenë në përputhje,
dhe unë do të në përgjithësi vetëm përdorni Kuotat e dyfishtë për ta mbajtur atë të thjeshtë.
Njoftim Unë jam duke shkuar për të mbyllur tag.
Dhe atëherë këtu unë jam duke shkuar për të thënë, "Disney World".
Dhe tani kam nevojë për disa symmetry-- parantezë të hapur, / a, të mbyllur kllapa.
>> Pra, çfarë kam futur?
Ne kemi pasur një tags pak tashmë.
HTML, Head, Titulli, Trupi, janë të gjithë tags, kështu që të flasin,
me homologët e hapura dhe të mbyllura.
Por vini re, kjo është lloj e krejtësisht të ndryshme.
Kjo është ajo që ne do të thërrasë në HTML një atribut.
Dhe një atribut është vetëm një palë me vlerë kryesore.
Kjo është një gjë e zakonshme në kompjuteri science-- palë-vlera kryesore.
Kjo është lloj mjet të tregtisë.
Një kyç dhe një vlerë.
Një fjalë dhe pastaj disa fjalë apo fjalë të tjera.
Dhe në këtë rast, çelësi është href, dhe vlera është se URL e plotë.
Dhe çfarë një atribut nuk është ajo ndikon në sjelljen e një tag.
Dhe në këtë rast, ne kemi nevojë për të ndikuar sjellja e tag spirancë,
sepse ne kemi nevojë për të ankoruar kjo lidhje për diku.
Dhe si ta bëni këtë është me anë të cilësie.
>> Kështu që unë jam duke shkuar për të shkuar përpara dhe ruajtur kartelën tani.
Kthehu mbrapa në shfletuesin tim dhe reload.
Dhe, voila, ne tani kemi Fillimet e një faqe web legjitime.
Super-e thjeshtë, por në qoftë se unë rri pezull mbi Njoftimi this-- në këndin e poshtëm të majtë,
kjo është super-vogël.
Por ju e shihni www.disney.com.
Dhe në qoftë se unë klikoni atë, në të vërtetë kjo whisks më larg në disney.com.
Tani, gjëja më kurioze këtu është se nuk eshte
best-- URL më të shitshëm, por kjo është në rregull, sepse kjo fotografi nuk ka
ekzistojnë në World Wide Web.
Ajo ekziston si një file lokal në dukje Përdoruesit e mi directory-- / jharvard--
për John Harvard-- / desktop.
Por ajo ka një URL.
Ajo vetëm ndodh që të jetë lokal.
Për fat të keq, asnjë nga ju mund të vizitoni kjo, sepse në qoftë se ju shkruani këtë URL,
ju do të jetë i thënë shfletuesit tuaj, shikoni për një skedar të quajtur hello.html
në hard drive tuaj.
Dhe, sigurisht, nëse ju keni ndjekur së bashku me dorë,
kjo nuk do të ekzistojnë atje.
>> Pra, kjo është në rregull.
Ne ende nevojë për një mënyrë, në fund të fundit, për të marrë këtë fotografi në web,
por le të ngas përveç disa Implikimet e sigurisë të asaj që ne vetëm
e pa dhe do ta lidhë atë me parë diskutim nga ky mëngjes.
Ajo rezulton se, në qoftë se një shfletuesi fjalë për fjalë vetëm bën
ajo që unë them se për të bërë, dhe kjo duket të jetë rasti që një tag spirancë është
ndikuar nga vlera e ky atribut i quajtur href
por ajo tregon kjo text, kjo do të duket
të thotë se unë mund të vënë URL në të dy vendet dhe më pas reload
dhe tani e shohin URL dhe të shkojnë në URL.
Njoftim, në qoftë se unë rri pezull mbi pjesën e poshtme të majtë, Unë jam me të vërtetë duke shkuar ende për disney.com.
>> Pra, nëse ju keni qenë ndonjëherë phished-- P-H-I-S-H-E-D--
me një nga ato email fals nga si PayPal banka juaj,
ju keni marrë ndoshta lidhjet brenda e-mail që ju jeni duke lexuar se
ju tregon se për të klikoni këtu për të shkuar konfirmuar fjalëkalimin tuaj ose konfirmuar ditëlindjen tuaj
ose shoqërore apo diçka shoqërore inxhinieri ju për të ditur
informacion.
E pra, unë mund të lloj të Avantazhi i kësaj, nuk mund unë?
Unë mund të them diçka si, www.paypal.com.
Dhe në vend të disney.com, I mund të shkojnë në, si, badguy.com.
Ringarkoj.
Dhe sa e lehtë është për të mashtruar, sidomos një lexues jo-teknike
ose një cursorily leximit lexues se sa për të klikoni
një lidhje si kjo, e cila në qoftë se unë klikoni arsyetimet tuaja, Unë në fakt nuk duan të shkojnë badguy.com.
Unë nuk e di se çfarë është në të vërtetë atje.
Pra paypal.com, njoftim, është atë që ajo thotë se do të,
por natyrisht, në qoftë se unë shoh poshtë super-të ulët, është pak blurry,
por ai thotë badguy.com.
Kjo është e them vetëm tani se unë jam duke shkuar për në vendin e gabuar.
Dhe kur kam thënë më parë se bankat me të vërtetë nuk duhet të nxisin apo tren
përdoruesit në klikuar lidhjet, kjo është vetëm një manifestim i tij.
Dhe kjo është kaq e thjeshtë.
Ju jeni tani një kundërshtari nëse ju bëni diçka si kjo
dhe të përpiqen ta gënjejnë një përdorues në vizituar faqen tuaj.
Por tani për tani, ne do të vazhdojmë gjëra të bukur dhe të pastër.
Ne jemi duke shkuar për të shkuar përpara dhe Rewind këto ndryshime.
Rifreskoni faqen.
Dhe unë të kthehem në disney.com.
>> Le të shohim nëse ne nuk mund të vë në lojë kjo përveç pak më shumë.
Pra, "hello, Disney World."
Unë jam duke shkuar për të thënë këtu poshtë.
Ndoshta unë jam duke shkuar për të bërë disa dhoma.
"Ne shpresojmë që ju të gëzojnë qëndrimit tuaj!"
Ruaj.
Ringarkoj.
Kjo nuk është rea-- që nuk është atë që kam menduar, apo jo?
Unë do të thotë, në qoftë se unë jam duke e trajtuar tekstin tim paraqesë si një përpunues teksti,
çfarë shpresoni do të ndodhë këtu?
Yeah, unë të ndjehen si ka duhet të jetë një pushim linjë këtu,
kështu që ajo ndihet buggy në një farë mënyre.
Por kjo është në fakt e qëllimshme, sepse ashtu si më parë,
shfletuesi është vetëm do të bëni atë që ju them se për të bërë.
Unë nuk e kam thënë atë për të thyer linjat.
Unë nuk e kam thënë atë për të lëvizur poshtë, madje edhe Megjithatë, intuitive, unë të ndjehen si unë e bëri.
Pra, ajo rezulton ne kemi nevojë një markup pak më shumë,
dhe unë jam duke shkuar për të rregulluar këtë si më poshtë.
Unë jam duke shkuar për të parathënie këtë të parë përshëndetje me atë që quhet një tag paragraf.
Dhe atëherë unë jam duke shkuar për të shkuar përpara dhe të mbyllë këtë fjali të tjera
në një tag paragrafi, edhe pse ata janë paragrafët super-shkurtër.
Tani unë jam duke shkuar për të shpëtuar.
Ringarkoj.
Dhe tani ne kemi se hapësirë, dhe ne lloj
kanë semantikë e dy paragrafë të veçanta.
>> Kjo është e gjitha mirë dhe të mirë, por ajo do të të jetë mirë për të shtuar një imazh në këtë faqe,
kështu që unë jam duke shkuar për të shkuar për të kërkuar Mickey Mouse në Google Images.
Dhe vetëm për argëtim, unë jam i duke shkuar për të rrëmbyer këtë imazh.
Unë jam duke shkuar për të shkuar përpara dhe tani kap URL e këtij imazhi,
edhe pse nuk është e ndryshme mënyra për ta bërë këtë.
Tani për tani, unë jam vetëm do të kopjoni URL.
Unë jam duke shkuar për të shkuar mbrapa në tekstin e mia fotografi, dhe unë jam duke shkuar për të thënë këtu,
img src = quote mbyll thonjëzat që URL, super-të gjatë.
Dhe pastaj nocioni i një Imazhi është pak më ndryshe.
Ka të vërtetë nuk nocioni i fillimit një imazh dhe duke i dhënë fund një imazh,
si një fillim të etiketuar një etiketë fund.
Pra, ajo ndihet pak i çuditshëm për të me semantikisht për të bërë këtë,
të ketë një tag të ngushtë-imazhit.
Kjo nuk është e gabuar.
Kjo është krejtësisht e saktë, dhe është e inkurajuar,
por ka simbol stenografi.
Unë mund të lloj të njëjtën kohë të hapur dhe të mbyllur të njëjtën tag,
dhe që do të bëjë shfletuesi lumtur.
Pra, kjo është vetëm pak më të ngjeshur për gjëra
që konceptualisht me të vërtetë nuk kuptim për të filluar dhe për fund.
Ata vetëm janë atje, ose ata nuk janë.
>> Kështu që unë jam duke shkuar për të shpëtuar këtë dhe të kthehemi për "Hello, bota" faqe dhe ringarkoni tim.
Dhe kjo është pak jashtë kontrollit, për shkak se imazhi është në fakt
pak e madhe, por kjo është në rregull.
Unë mund të resize atë në një program.
Ose ju e dini se çfarë.
Vetëm për të treguar, unë jam do të në fakt të thënë
që gjerësia e kjo gjë duhet të jetë vetëm 200 pixels, 200 dots.
Më lejoni të shkojnë përpara dhe për të shpëtuar dhe ringarkoni, dhe tani faqja
duket pak më e arsyeshme.
Por vini re model.
E pra, unë kam lloj i mësoi të gjitha i HTML në një kuptim, të paktën
konceptualisht, sepse të gjithë HTML është është këto tags-- tags hapura, të mbyllura tags,
dhe atributet që modifikojë sjelljen e tyre.
Dhe, me sa duket, çdo tag mund të ketë zero ose një
ose dy ose më shumë atribute, secili prej i cili bën diçka pak më ndryshe.
Tani, si nuk e dini se çfarë ekziston?
Ju vetëm të dëgjojnë për dikë si unë ju them se çfarë ekziston,
ose ju thjesht Google rreth e rrotull për një tutorial në HTML, dhe me të vërtetë është kjo thjeshtë.
>> Me të vërtetë, kur unë isha një undergrad vjet më parë dhe mësuar HTML,
një nga mësimin tim të matematikës asistentë vetëm shpenzuar
pak kohë më tutoring për si gjysmë ore, një orë,
dhe pastaj unë isha në rrugën time.
Unë isha në rrugën time drejt duke e bërë faqet e internetit më të shëmtuar ndonjëherë,
i cili, me sa duket, nuk kanë të vërtetë të përparuar më tej.
Por çështja është se, një herë ju kuptojnë këto ideas-- thjeshtë
nëse errët text-- por këto thjeshtë idetë e duke filluar një mendim
dhe mbylljen e një mendim, duke e mbajtur çdo gjë balanced bukur,
duke kërkuar diçka, modifikohet Sjellja e atij kodi, kjo është e vërtetë të gjithë
nuk është për të.
Dhe në fakt, në qoftë se ne tani të shkojnë në diçka si google.com-- fakt,
le të shkojnë në një vend pak më shumë reasonable-- stanford.edu.
Dhe unë jam duke shkuar për të shkuar në View, Developer, View Source.
Është e shëmtuar, por notice-- dhe unë do të zoom në njoftim
disa gjëra që është e njohur tashmë.
Nuk është kjo këtu, i cili është një shfletues.
Këtu vjen HTML5.
Ka HTML.
Me sa duket, ka një atribut që nuk e kam
përdorim që specifikon gjuha e faqes,
dhe kjo mund të ndihmojë me automatik përkthim dhe stuff like that.
Këtu është kreu i faqes.
Këtu është titulli i faqes Stanford.
Ka një tag nuk e kam flasim për tag yet-- Meta.
Është vetëm lloj i informacion sfond.
Ajo i ndihmon me SEO, ose search-engine optimization,
ose rezultatet e Google-search apo të ngjashme.
Por në qoftë se do të vazhdojmë të kërkuar, të mbajtur duke kërkuar, këtu është tag Body.
Dhe nuk ka bunches e tjera tags ne nuk kemi biseduar rreth ende.
Por Div është një për një Ndarja e faqes.
Është si një drejtkëndësh të padukshme në qoftë se ju lloj i duan të mentalisht
të ndarë faqen tuaj në njësi të ndryshme online.
Dhe pastaj shumë divs I parë, diçka që quhet Class,
por ne do të kthehen në atë.
>> Kjo është Forms interesting--.
Format janë të gjitha mbi web.
Çdo kutinë e kërkimit të jeni përdorur ndonjëherë është një formë.
Dhe, kështu, le të shohim në të vërtetë.
Form.
Veprimi.
Veprimi i kësaj forme, për çfarëdo Arsyet historike, është se URL.
Metodë është "post".
Rezulton se kërkesat HTTP mund të përdorni folja "të marrë", siç e pamë më parë,
ose "post".
Dhe do të shihni një ndryshim për këtë në një moment.
Le të vërtetë shohim se çfarë është kjo.
Më lejoni të kthehemi në faqen e Stanford.
Çfarë forme ata janë duke folur lidhje, mendoni ju?
Ajo që hedhje nga ju?
>> AUDIENCA: Kërko box.
>> DAVID J. Malan: Po.
Pra, në krye të drejtë këtu është kjo kuti Kërko.
Dhe kjo është se si ata zbatuar arsyetimet tuaja, a tag kjo është fjalë për fjalë formë të hapur kllapa.
Dhe pastaj le të kërkoni për diçka.
Le të kërkoni për një mik e mine-- "Nick Parlante."
Enter.
Dhe sigurisht, ajo shkoi në një URL pak më të ndryshme.
Më lejoni të kthehem këtu.
Le të kërkoni për "kurset".
Mallkuar atë.
Shkoi në një URL të ndryshme.
Pra, Stanford-së duke shtuar disa magji se ata nuk janë duke marrë më të URL
sepse e pamë në Veprimi atribut atje.
Por kjo formë këtu është zbatuar tërësisht me anë të këtij Markup këtu, këto tags.
Në fakt, këtu është input për llojin e kërkimit që ju dëshironi.
Këtu është input për një lloj tjetër të kërkimit.
Këtu është input për vetë vargun.
Dhe kështu qëllimi nuk është për të përfunduar mendjet tona rreth të gjitha këto tags
por vetëm për të parë.
Është vetëm hapjes dhe të mbylljes tags dhe kërkim gjërat.
Po?
Victoria?
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Kjo është një pyetje e mirë.
Kjo është pak e komplikuar për të parë.
Më lejoni të kthehem në atë Pyetja në vetëm disa minuta
kur shohim diçka të quajtur fletë CSS, ose stil Cascading,
dhe ne mund të përpiqemi për të konkludoj sa më shumë nga faqja.
Pra, nëse ne tani të marrë një sy në google.com, le të shohim se çfarë faqja e tyre duket si.
Ju do të they're-- kjo është e bukur sot.
NE RREGULL.
Të gjitha të bërë.
Të gjithë të drejtë, kështu që Shiko Burimi.
Ju do të mendoni se Google ka Kodi vërtetë e bukur burim.
Pra, me sa duket, çfarë po ndodh këtu?
Dhe në fakt, kjo nuk është edhe HTML.
Kjo është diçka që quhet JavaScript.
Dhe le të mbajë dhe shkon.
Unë nuk e di edhe ku faqja fillon.
Unë jam duke shkuar për të përdorur Command F, të hapur HTML kllapa.
Të gjithë të drejtë, nuk është.
Kam gjetur fillimin e faqes, dhe ka aq shumë gjëra në këtu.
>> Çfarë është në të vërtetë ndodh?
E pra, ju e dini se çfarë, ne mund të pastër këtë ide.
Nëse unë në vend që të shkojnë në këtë inspektojë toolbar, ky mjet të veçantë diagnostike,
dhe të mos shkojnë në rrjet, ku do të mbajë sot,
por në qoftë se unë shkoj në Elements, ajo që është me të vërtetë e bukur
është se një shfletues ka shumë Sytë e shumë më mirë se unë.
Dhe shfletuesi mund të lexoni se rrëmujë e një faqe web,
që postë HTML ne vetëm shikoi, dhe kjo mund të
kuptoj atë apo lexuar dhe analizuar atë dhe reformat atë
në një mënyrë të bukur të njeriut-miqësore.
Pra, ajo që unë jam duke parë tani në këtë ekran këtu
në bazë të elementeve, të njëjtën përmbajtje të saktë, por ata kanë prerë çdo gjë,
ata kanë ngjyrosur atë, por është e njëjta tekstin e saktë
që kam shkarkuar nga serveri.
>> Dhe çfarë është e bukur tani është unë mund të shoh në trup, për njoftimin instance--,
faqja përbëhet ende e vetëm një kokë dhe një trup,
dhe unë hierarkike mund të zhyten në këtu.
Vini re se Google duket se ka të divs-- këtë një dhe këtë një të tillë.
Unë mund të zgjerohet që.
Ka një bandë e tërë e divs tjera.
Kështu që është një kompleks i vogël.
Por prit.
Kjo duket shumë më shumë lexueshëm, relativisht, se sa kjo.
Pse Google turpshme vetë nga vetëm duke dërguar
kjo rrëmujë e madhe e kodit të disa lloj vetëm për të zbatuar diçka
që duket kaq e thjeshtë në shikim të parë?
Si, pse nuk shtoni shumë hapësira?
Pse ata nuk hit Enter si kam bërë?
Shikoni se si e mirë unë kam qenë të shkruarit e një faqe web.
I hit Enter aq zell.
I prerë kështu çdo gjë është aq e bukur dhe lexueshëm.
Pse Google nuk e praktikojnë të njëjtën gjë?
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Mirë.
Shumë të drejtë.
Ata nuk kanë ndonjë Personi në Google me dorë
përditësimin faqen kryesore anymore.
Kjo nuk është më 1999.
Pra, ata kanë softuer.
Ata kanë mjete të tjera që gjeneruar dinamike ata janë të HTML.
Sigurisht, që kodi vetë ishte shkruar nga njerëzit,
por realiteti është, është mjaft e drejtë të thuhet,
shfletuesi sigurisht nuk ka kujdes se si çrregullt kodi është.
Por ka një edhe më shumë arsye bindëse teknike
që Google shpërndan HTML tyre Kodi në një lëngshëm të tilla, me sa duket
mënyrë e madhe mbushur të gjitha së bashku me shumë pak way-- shumë pak
në rrugën e formatimit si unë e bëri.
>> AUDIENCA: [padëgjueshme]
>> DAVID J. Malan: Faster?
Pse?
Dhe çfarë ju thoni, Lydia?
Faster?
Pse më të shpejtë?
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Nuk ka nuk ka hapësirë ​​për të lexuar.
Po.
Pra, mendoni se çfarë një hapësirë ​​është.
Pra, çdo karakter në tastierë merr disa sasia e hapësirës për të përfaqësuar,
ose fizikisht, si ajo merr se shumë hapësirë,
ose disi nën individualitet, që kërkon kujtesës.
Dhe si një aside-- dhe ne do të të flasim më shumë për këtë tomorrow--
çdo karakter në tastierë zakonisht kërkon 8 bit, ose një bajt.
Pra, një model i 8 zero ose ato, ose vetëm 1 byte, si ne
njerëzit do të thonë zakonisht.
Pra, kjo është e vogël, por është ende jo-zero.
Është ende disa sasia e hapësirës.
Pra, nëse një inxhinier ose Google godet bar hapësirë ​​vetëm një herë, dhe mendoj
Google-- kjo është super-popular-- supozojmë se një miliard njerëz
vizitoni faqen e tyre në shtëpi një ditë, apo ndonjë numër i njerëzve
vizitoni faqen kryesore a miliardë herë në ditë,
sa bytes shtesë ka se inxhinier software vetëm të kushtojë Google
duke e goditur bar hapësirë ​​të saj të tij ose një herë?
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Jo mjaft aq keq.
Vetëm një herë byte një miliard.
Pra a--
AUDIENCA: 8 miliardë gigabajt.
DAVID J. Malan: Jo 8 miliardë.
8 miliardë bytes.
Por 1 Gigabyte.
1 Gigabyte do të jetë njësia e masës.
Nëse ai ose ajo ka dy hapësira, 2 gigabajt.
Tre gigabajt.
Apo jo?
Kjo peshore shtrenjtë.
Dhe kështu në raste si Google, e cila, dhënë, janë raste ekstreme,
ka çështje të tjera që mund të dalin vetëm duke marrë vendime shumë të arsyeshme
ose duke ndërmarrë veprime shumë të thjeshta të njeriut, sepse ajo ka këtë efekt madhëruar.
Pra, një nga arsyet kjo duket aq i ngjeshur
është pikërisht si Victoria said-- ishte të krijuara vetëm nga kompjuterat anyway.
Pra, ndonjë gjë e madhe.
Le shfletuesi kuptoj atë.
Por ajo gjithashtu qëllimisht nuk ka shumë hapësirë,
për shkak se hapësira nuk është e nevojshme.
Dhe hapësira në fakt kushton para.
>> Ajo ose kushton kohë, sepse vetëm për të nxitur
që sa më shumë të dhëna nga Selia google.com i vetëm
ka marrë për të marrë disa shuma e kohë, edhe nëse është milisekonda
ose microseconds, por kjo shton deri mbi kaq shumë përdorues, ose më shumë të ngjarë,
ai ndoshta kushton para.
Google ndoshta lidhet me dikush tjetër në botë, një
e atyre hedhur sytë pikë, dhe në qoftë se ata kanë
një lloj marrëdhënie financiare ku të dhënat e tyre kushton para,
ata mund edhe minimizuar dhënat sa më shumë
ata janë pështyrë mbi lidhja e tyre në internet.
>> Pra, gjëja qesharake, edhe pse, në fund të fundit, ose ndoshta gjëja e siguruar,
është se edhe pse kjo duket tmerrësisht e madhe, në fund të ditës,
është ende të njëjtat parime si e saktë kjo faqe shumë e thjeshtë këtu e një HTML
faqe.
Pra, vetëm për të përmbledhur dhe në mënyrë që ju kanë një version kanonik në qoftë se nuk keni qenë
pas së bashku me zgjedhje këtu, këtu mund të jetë më e thjeshtë e faqet e internetit,
kështu diçka për të luajtur me të, ndoshta më vonë.
>> E pra, le të prezantoj një Disa ide të tjera tani.
Ne jemi gati për të futur diçka që quhet një tag stil.
Ne mund të stilizoj këtë faqe në mënyra më interesante.
Pra, ndërsa email HTML është mbi të gjitha duke shënuar deri
të dhënat, lloj i specifikuar për një shfletuesi se si të strukturës e të dhënave,
ku për të vënë atë, CSS, ose Cascading Style Sheets,
është një gjuhë e dytë që në përgjithësi merr përzier me HTML
si ne do të see--, por ne mund të pastër që në një moment-- që merr
atë milje final, dhe ajo stylizes atë.
Ajo merr ngjyrat e vetëm e drejtë, font madhësive vetëm e drejtë,
pozicionimin vetëm e drejtë.
Kjo është e gjitha në lidhje me estetikë ose formatimit, jo për
të dhënat themelore në vetvete.
Dhe mënyra më e lehtë për të treguar kjo është ndoshta nga shembull.
Kështu që unë jam duke shkuar për të shkuar mbi në dosjen time të thjeshtë teksti.
Dhe në një moment të vetëm, unë do të na ecin ju nëpërmjet procesit
për të bërë këtë veten.
>> Unë do të kthehem në dosjen time këtu dhe rifreskoni faqen vetëm
për të konfirmuar atë që duket si.
Kjo është ajo ku ne jemi në tani.
Ndjehem si fëmijët do të gëzojnë duke pasur pak ngjyrë në këtë web faqe.
Kështu që unë jam duke shkuar për të shkuar deri ketu në krye të faqes.
Dhe unë jam duke shkuar për të bërë stil, / stil.
Dhe pastaj brenda kësaj, unë jam duke shkuar për të treguar trupin e page-- tim
dhe kjo formatimit është, në shikim të parë, ndoshta pak
çuditshme, por konvencionale.
Unë do të them se sfond Ngjyra e kësaj faqe duhet të jetë e gjelbër.
Dhe kjo është për fat të keq lloj nuk dizajn të mirë.
Vini re se më parë në botën e HTML,
I tha se atributet janë këto çifte me vlerë kryesore.
Diçka është e barabartë me kuotë mbyll thonjëzat "diçka."
Në botën e CSS, e cila ishte projektuar nga disa njerëz të ndryshëm,
ata vendosën që, në e tyre botërore, palë me vlerë kryesore
do të jetë fjala e zorrës së trashë diçka.
Pra është e njëjta ide, pse.
Është shoqëruar një vlerë me disa kyçe që në njëfarë mënyre
ndikon në sjelljen e kësaj faqe.
>> Dhe ju ndoshta mund të mendoj.
Çfarë është kjo ndoshta do për të bërë edhe në qoftë se ju kurrë nuk kam
shihet HTML ose CSS para?
AUDIENCA: Të ndryshojë ngjyra e sfondit.
DAVID J. Malan: Po, ndryshuar ngjyrën e sfondit.
Dhe veçanërisht ngjyrën e sfondit e trupit.
Por, për aq sa Trupi tani për tani është web
page-- kjo është e vetmja gjë nën really-- bar titullin
ajo ndoshta do të ndikojnë të njëjtën gjë.
Pra, le të shohim.
Le të shpëtuar këtë.
Shko këtu dhe reload.
Është shumë e shëmtuar.
Dhe çfarë po ndodh këtu është një efekt anësor.
Unë vetëm zgjedhur këtë imazh rastësisht.
Pse të mos e gjelbër përshkon mbrapa Mickey?
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Pikërisht.
Ajo rezulton se imazhet, pretty shumë të gjitha imazhet që ne mund të përdorin,
janë të gjitha rectangles-- të rectangles.
Edhe në qoftë se ka disa kthesa Mickey për veten e tij dhe ka një sfond,
që background duhet të jetë diçka.
Ajo duhet të jetë e bardhë.
Ajo duhet të jetë e zezë apo diçka tjetër.
Ajo mund të jetë transparent.
Dhe në fakt, unë mund të hapur Mickey Mouse këtu
në një program të quajtur Photoshop apo diçka të ngjashme
dhe për të ndryshuar të gjithë se bardhë background të transparent,
në mënyrë që të gjelbër do të shkëlqejë përmes.
Por kjo është diçka që unë do të duhet për të pyetur për veten ose një artist grafik
ose një projektuesi në my Kompania, për shembull,
për të bërë, sidomos pasi që unë vetëm huazuar këtë një nga interneti.
Por, kjo është arsyeja pse kjo po ndodh.
>> Pra, çfarë tjetër mund të duam të bëjmë?
E pra, ne mund të duam të themi ne me të vërtetë shpresoj që ju të gëzojnë qëndrimit tuaj.
Dhe për theks, unë dua për të bërë këtë të fortë,
dhe kështu që unë do të them hapur dhe të fortë të ngushtë të fortë dhe më pas reload.
Dhe kjo është një pak e vështirë për të parë në projektor
por ndoshta me të vërtetë tani hedhje nga ju një pak më shumë.
Kështu që ju mund të shtoni në këtë italics mënyrë, ballafaqohet guximshme në këtë mënyrë.
Ne mund të ndryshojë ngjyra.
Në fakt, vetëm për shkelma, unë jam i do të shkojnë përpara dhe të bëjë këtë.
Unë vërtetë nuk e pëlqen se si my Paragrafët janë këtë të ngushtë së bashku,
kështu që unë mund të bëjë diçka si kjo.
Unë do të them të shfletuesit, ndryshojë çdo tag paragrafi të ketë,
le të say-- fakt, ju e dini se çfarë, le të lidhur të tekst-align, qendër.
Dhe përsëri, unë e di këtë vetëm sepse dikush mësoi atë për mua
apo kam shikuar atë deri në një referencë online.
Pra më lejoni të shpëtuar këtë.
Dhe, ah, tani unë kam përqendruar imazhin atje.
Dhe në fakt, ju e dini se çfarë, nëse I lëvizin imazhin tim në një paragraf
tag-- kështu që një paragrafi i tretë, edhe pse kjo nuk është tekst.
Le të shpëtuar atë dhe të reload.
Tani faqja ka filluar të duket lloj of-- Unë do të thotë, kjo është ende mjaft e shëmtuar,
por të paktën kjo duket si kam kaluar dy minuta në vend të një minutë
duke e bërë atë.
>> Dhe kështu, hap pas hapi, mund të bëjmë këto ndryshime estetike tani në faqen?
Unë nuk e kam ndryshuar me të vërtetë e të dhënave në faqe përveç duke shtuar fjalën vërtetë.
Unë kam shtuar metadata, nëse ju do.
Hej, browser, e bëjnë fjala "të vërtetë" të guximshme.
Por të dhënat nuk është e fortë.
Kjo është metadata.
Të dhënat është "me të vërtetë."
Pra, ne ende kemi disa të njëjtat koncepte si më parë.
Tani, sigurisht, kjo nuk është në internet, kështu që unë jam duke shkuar për të bërë një hap të fundit këtu.
>> Unë jam duke shkuar për të shkuar në hello.html dhe vetëm të nxjerrë në pah dhe kopje këtë.
Dhe tani unë jam duke shkuar për shkojnë në Cloud9, e cila
Unë do të ecin ju nëpërmjet në një moment të vetëm.
Dhe shanset janë që ju do të jetë së shpejti, në qoftë se Nuk tashmë, në një ekran të tillë.
Dhe më lejoni vetëm të ju jap një të shpejtë Turneu i asaj Cloud9 të vërtetë është.
Pra, përsëri cloud 9 është ky shërbim i bazuar në cloud
se ju dhe më jep iluzionin e ka vet makinën tonë virtuale
në një re, teknikisht një enë në një re,
se kemi të plotë privilegje administrative për të.
Pra, në teori, askush tjetër në botë ka
qasje në ekran unë jam duke kërkuar në të drejtë tani,
me përjashtim ndoshta njerëzit të cilët të drejtuar vendin,
sepse teknikisht ata kanë qasja fizike e kështu me radhë.
>> Pra, çfarë shohim në këtë mjedis?
Unë jam duke shkuar për të zvogëluar, sepse kjo është pak e vogël.
Dhe më lejoni të vënë mbi këtu për vetëm një moment.
Në anën e majtë të tim dhe tuaj ekran, ka një shfletues fotografi në të majtë.
Aq të ngjashme në frymë për Mac OS dhe Windows.
Këto janë të gjitha të fotografi në llogarinë time.
Dhe nga default, nëse tuaj llogari është si e imja,
ju do të shihni ose të shihni së shpejti helloworld.html dhe readme.md.
Mbi këtu për të drejtën, kjo është ku dosjet e mia tekst do të shkojnë.
Nëse e keni përdorur ndonjëherë Microsoft Word ose Notepad ose TextEdit,
kjo është fjala ime e redaktimi e dosjeve do të shkojë.
Dhe pastaj më misterioze Karakteristikë e këtij mjedisi
se ne nuk do të duhet të vërtetë për të përdorur është këtu poshtë quhet Window Terminal.
Nëse e keni përdorur DOS nga vitin e kaluar, ky është Linux
ose Linux ekuivalente e DOS-it.
Kjo është një interface-- tekst me bazë ka klikime të miut, nuk ka zvarritje.
Të gjithë ju mund të bëni është të shtypni komandat, por ato komandat
mund të krijojë fotografi, lëvizin fotografi, e hapur directories, directories të ngushtë,
të bëjë ndonjë numër të gjërave.
Por tani për tani, ne vetëm do të kalojnë kohën tonë deri këtu.
>> Dhe kështu që le të bëjmë këtë.
Nëse ju jeni në këtë mjedisi, të cilat ju duhet
të jetë në qoftë se keni krijuar një hapësirë ​​pune tashmë, të shkojnë përpara dhe vetëm të shkojnë deri
tek File, New për një moment.
Dhe kjo do të ju jap një të ri tab të drejtë këtu në mes.
Dhe unë just-- dhe le të shkojnë përpara dhe të bëjë këtë.
Le të shkojnë përpara dhe tani e dokumentit, Save dhe të shkojnë përpara dhe e quajti atë hello.html,
nuk duhet të ngatërrohet me helloworld.html, e cila
erdhi me llogarinë tuaj të re të lirë, e cila është vetëm një fotografi mostër.
Ju do të shihni se papritur shfaqet, ka shumë të ngjarë në anën e majtë,
dhe tab do të vazhdojë të jetë e hapur.
Dhe më lejoni të ju inkurajojmë që tani për të rikrijuar këtë fotografi ose disa variante tyre.
Dhe në qoftë se ju nuk mund të mjaft të shohin atë në anën ekran, kjo është identike me slides
që ju ndoshta keni në një tjetër tab.
>> Pra me pak fjalë, të bëjë faqen tuaj të parë të internetit, shpëtuar atë, dhe pastaj në një moment të vetëm,
Unë do të ju tregojnë se si ju në fakt mund të shihni këtë.
Por, të ndryshojë të paktën një gjë.
Ndrysho helloworld të diçka e zgjedhjes tuaj,
në mënyrë që të jeni të bindur se kjo është tuaj paraqesë dhe nuk e kam vetëm të krijuar.
Në rregull.
Dhe kur ju jeni ready-- asnjë rush-- kur ju jeni gati,
të shkojnë përpara dhe ruajtur kartelën një herë ju keni bërë këto ndryshime.
Dhe në qoftë se ju klikoni Drejtuar button up top, kjo
duhet të hapë një skedë të re që do të tregojë ju çfarë URL ju mund të vizitoni dosjen tuaj në,
por ajo mund të marrë një moment për të quote mbyll thonjëzat "të fillojë Apache", e cila
është emri i web server.
Pra, të jenë të kujdesshëm për të bërë pikërisht çfarë është në dosjen në fund të fundit.
Deri tani, unë do të zmadhuar.
Nëse unë të fillojë të shtypni hapur parantezë HTML, njoftimi
kjo është bërë që të kryej mendimin tim.
Dhe në qoftë se kam mbaruar mendimin tim, atë automatikisht më jep etiketë mbyllëse.
Por shpresa është atëherë unë do të goditur Enter, dhe pastaj të lëvizë brenda ka
dhe nuk kokë brenda dhe bëj trupin brenda.
Dhe kjo është pak e çuditshme në fillim, për shkak se është duke bërë punë për ju,
por e kuptojnë se në fund të fundit kjo ju kursen tasteve.
Dhe në fakt, një tipar shumë i zakonshëm i programimit mjedise këto ditë
si për zhvillimin e web si këtë dhe programimi aktual,
të cilat ne do të flasim për nesër, Janë këto karakteristika auto-plotë,
gjëra që vetëm lejojnë një programues apo një projektuesi
të tipit pak tasteve për të kryer të njëjtën gjë.
Ndonjëherë është e mirë, edhe pse.
Ndonjëherë kjo është vetëm i bezdisshëm.
Dhe, përsëri, një herë ju keni transkriptuar rrëshqitje ose disa variant te tij,
ju mund të klikoni butonin Run deri të lartë.
Dhe pastaj në fund dritare, ju do të jetë i informuar
në atë URL që ju mund të vizitoni faqen tuaj web.
Mine, për shembull, është në business-daharvard.c9users.io
dhe kështu me radhë.
Të gjithë të drejtë, kështu që, le me-- ndonjë pyetje?
Çdo pyetje të tjera në lidhje vetëm duke u kjo pune para se të shtuar karakteristika?
Dhe më lejoni të propozojë, vetëm për të marrë folks comfortable--
sepse kjo është një gjë për të vetëm copy-paste verbërisht atë që kam bërë.
Por vetëm në mënyrë që folks luftoj me të paktën një deri-bërë,
Unë do të kthehet në disa muzikë.
Unë do të propozojë një listë të gjëra që ju potencialisht mund të shtoni.
Dhe ju me siguri mund të përdorni Google.
Dhe pse nuk kemi vetëm të propozojmë që ju të përpiqet për të zgjidhur
të paktën një problem të veçantë këtu.
Pra, për sa i përket tags, më lejoni të ripërdorimin këtë këtu.
>> Në fakt, më lejoni të vënë në një formë tekstuale.
Le të thonë se në mesin e tags që ne mund të përdorur këtu janë disa tags këtu.
Ne e kemi parë tag paragrafi.
Tani ajo do të auto-plotë.
tag paragrafi, tag spirancë.
Le të thonë se ju doni të të bëjë diçka të madhe,
kështu që ju mund të like-- tag hapësirë ​​mund të ndihmojë.
E pra, ju mund të kenë nevojë për ndihmë për këtë në vetëm një moment.
Ne kemi parë div.
Ju do të shihni se ka tabela.
Ka diçka që quhet tr, td.
Th, td.
Kthehuni për të se në një moment.
Çfarë tjetër mund të jetë i dobishëm?
Ka fortë.
Ka theksi, ose më mirë em.
There's-- çfarë tjetër mund të ju dashuroj këtu?
E pra, ne do të marrin një shikoni në atë së bashku.
Forma, të cilën ne e kemi parë.
Ka formë.
Ka të dhëna dhe disa të tjerë.
Të gjithë të drejtë, kështu që le të bëjmë këtë.
Për t'iu përgjigjur një Victoria-së pyetje, le të më parë
vetëm sigurohuni që të gjithë janë të në gjendje për të marrë të punës tyre Hello.
Atëherë më lejoni të prezantoj nja dy ide të tjera.
Pastaj ne do të le folks zgjidhur një problem më vete.
Atëherë ne në fakt do të kthehen në atë nocionin e një formë,
dhe ne do të vërtetë të ri-zbatuar së bashku interface front-end,
mënyrë që të flasin, për vetë Google.
Ne do të përdorim Google si në fund mbrapa dhe le ata të bëjnë punën e vështirë, që të kërkoni,
por ne do të krijosh fund para Google dhe formën e kërkimit
se ata kanë në faqen e tyre në shtëpi.
Dhe kështu që ne do të kthehen në këto tags në një moment të vetëm.
>> Pra, kjo ishte ajo që unë propozoi vetëm një moment më parë.
Ne mund të shtoni stilizim të një faqe brenda këtij tag stil,
dhe ne mund të stilizoj sfond ngjyra, shtrirjes teksti,
nëse kjo është qendër ose majtas ose djathtas.
Por shumë shpejt ju do të gjeni ose një projektuesi web
do të gjeni se ky bëhet pak i ngathët,
për shkak se ju jeni duke bërë atë që është e quajtur përzierjen përmbajtja
me prezantimin e saj.
Ju jeni përzierjen dhënat tuaja dhe estetikë e saj.
Dhe në fakt, nëse ju e konsideroni çfarë do të ndodhë gjatë time--
kjo është një shumë e vogël web faqe, natyrisht.
Por në qoftë se unë të shtoni përmbajtje në këtë faqe dhe shtoj stil në këtë faqe,
faqja shumë shpejt merr më të gjatë dhe më të gjatë dhe më të gjatë.
Dhe mendoj se unë dua të ketë një faqe interneti që të dytë
ndan disa prej këtyre cilësive.
Supozoni faqen time të dytë të internetit për tim site-- Gjithashtu, unë dua qendër çdo gjë,
dhe unë gjithashtu dua gjithçka me një sfond të gjelbër.
Unë jam shumë e shumë do të duhet të kopjoni dhe ngjisni disa prej këtyre linjave
në këtë dosje të dytë, e cila ndjehet mirë.
Ai do të zgjidhë problemin.
>> Por, çfarë nëse unë dua një faqe të tretë ose një faqe në 30 ose një faqe në 40?
Tani unë jam duke shkuar për të kopjimit dhe pasting një shumë të kodit kopjuar
në fotografi të shumta.
Dhe kështu mendoj që I vendosin ose unë jam i tha,
hej, ne nuk jeni duke përdorur një sfond të gjelbër më.
Ne jemi duke shkuar për të filluar përdorimin e portokalli.
Çfarë ju duhet të ndryshojë?
E pra, ju keni për të ndryshuar atë stil nga e gjelbër për portokalli në mënyrën se si shumë vende?
Ashtu si 30 apo 40 vende.
Është e lodhshme.
Është e prirur për të gabimit.
Ka një numër arsyesh ku ju nuk do të duan për të nxitur
kjo lloj dhimbje për veten tuaj.
Dhe kështu që nuk do të ishte mirë në qoftë se ne mund të marrë atë që unë vetëm
vënë në mes të këtyre dy të verdhë tags, këto tags stil,
faktor atë, dhe të vënë të gjitha mia stilizim në një skedar qendrore
që të gjitha 30 ose 40 nga dosjet e mia të tjera të marrë hua nga ose disi referencë,
jo ndryshe nga rrjeteve diagramet ne ishim duke bërë më parë?
>> Pra, nëse unë shkoj në këtu, unë jam i do të propozojë në fakt
që ne të zëvendësojë tag style me diçka
quajtur tag link, i cili është e tmerrshëm, i quajtur tmerrshëm,
sepse ju nuk përdorni tag lidhje për të krijuar atë
ne njerëzit e dimë si një lidhje në një web faqe.
Për këtë, ju përdorni të cilat tag?
Si do ta keni krijuar një lidhje në një faqe interneti?
AUDIENCA: The a.
DAVID J. Malan: The a, ose spirancë tag, që kishte shkuar të Disney para.
Lidhje tag këtu është thënë this-- lidhje në një skedar të quajtur
styles.css, marrëdhënia në të cilën do të jetë se kjo është stylesheet ime.
Kështu që kjo është një nga S-së në CSS-- fletët stil Cascading.
Style sheet-- dy nga S-së në CSS.
Cascading fletë stil.
Kjo thjesht do të thotë, hej, browser, shkoni gjeni styles.css në server lokal
dhe e përdorin atë si stylesheet tuaj, që do të thotë brenda atë dosje
do të jetë mbi të gjitha e stylizations që ne kemi bërë vetëm.
Dhe kështu që ajo që dosja mund të duket si ky.
Dhe unë do të të bëjë vetëm kjo është një shpejtë shembull, për shkak se ne nuk kemi nevojë
për të marrë shumë në barërat e këqija këtu.
Por në qoftë se unë të kopjoni këtë, ajo që unë jam duke propozuar është se një programues të krijuar një skedë të re,
ngjitur në ato lines-- whoops-- ngjitur në këto linja,
ruani atë si styles.css, dhe më pas, në fotografi të tjera, fshini të gjithë që
dhe ta zëvendësojë atë në vend me këtë tag link.
Kështu që në qoftë se unë të lidhë a href = "styles.css", marrëdhënia do të jetë "stylesheet"
tag të ngushtë.
Ruaje atë.
Kthehuni në helloworld tim.
Ringarkoj.
>> Fjalë për fjalë asgjë nuk ka ndodhur.
Kjo është një gjë e mirë, sepse ajo do të thotë është e vërtetë të gjithë punës.
Për të provuar sa më shumë, mendoj unë të bëjë një typo, dhe unë e quaj këtë "Styles.css"
me një kapital S, i cili është pasaktë, dhe pastaj të reload.
Tani ju mund të shihni vetëm ajo nuk punon.
Tani, pse?
E pra, le të përdorim një teknikë nga më parë.
Më lejoni të shkojnë përpara dhe, në shfletuesi im, në Chrome, unë jam
duke shkuar për të hapur që të veçantë tab rrjeti si më parë,
dhe më lejoni të rifreskoni faqen.
Ajo që nuk janë të befasuar për të parë tani?
Apo ndoshta ju jeni të befasuar për të parë atë.
Sido që të jetë, ajo që ju shihni tani?
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Kjo nuk është gjetur.
Pse është ajo nuk gjendet?
E pra, kapitali Styles.css-- S-- nuk ekziston.
I sot quhet atë.
typo thjeshtë.
Por unë jam duke kuptueshme tani 404, për shkak se serveri është duke thënë, hej,
nuk është gjetur.
Fjalë për fjalë, unë nuk e di ku kjo skedë është.
Kështu që, si rezultat, shfletuesin ju tregon se çfarë ajo mund të,
përmbajtja e parë e faqes, i cili ishte 200, HTML,
por stilizim nuk mund të të shtohet pas kësaj.
Dhe kjo është ajo që nënkuptohet me Cascading.
Ju mund të lloj të shtoni atë pas, dhe kjo lloj
pastron estetikë e web faqe.
Dhe ju mund edhe të pranoj ato stilet me fotografi akoma tjera stylesheet
në qoftë se ju dëshironi.
Kjo nuk është gjetur, edhe pse, në këtë rast, sepse natyrisht, unë sot quhet atë.
Kështu që unë do të duhet për të rregulluar atë për herë të parë.
>> Pra, le të shkojnë përpara dhe të propozojë në vijim.
Le të shkojnë përpara dhe të bëjë këtë.
Duke filluar me ndoshta dosja juaj helloworld,
më lejoni vetëm të ftojë një çift e funksion sugjerime.
Pra, Victoria, ju të kërkuar për të bëjë një tekst më të madhe, apo jo?
Të gjithë të drejtë, kështu që ne mund të e bëjnë tekstin më të mëdha.
Dhe ne do të hiqni çdo vetëm një problem për të zgjidhur.
Bëni text madhe.
Unë nuk jam duke shkuar për të shqetësojë këtë shkrim kur ne
kemi teknologji plumb të drejtë mbi këtu.
Kështu që disa probleme.
Pra, ne jemi duke shkuar për të provoni për të bërë tekstin më të mëdha.
Në rregull.
Çfarë tjetër do të propozojë dikush?
Çfarë tjetër mund të duam për të bërë në një faqe interneti?
Le të dalë me një listë e shkurtër e gjërave
dhe pastaj të delegojnë Grupi i të kuptoj këtë.
>> AUDIENCA: [padëgjueshme]
>> DAVID J. Malan: OK, teksti pozicioni në anët e ndryshme të faqes?
Në rregull.
Diçka tjetër.
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Kjo është.
Pra, një gif është vetëm një format e ndryshme file.
Ne vetëm e përdorur, çfarë, a png ose jpg ndoshta?
Ne kemi përdorur një jpg.
Nëse ju jeni kurioz, nje tepruar përgjigjen në pyetjen tuaj
është një jpg përdoret në përgjithësi për fotografi, sepse ajo mbështet
miliona ngjyra apo 24-bit ngjyra.
A gif përdoret në përgjithësi për, si, memes internet këto animacione days--,
gifs animuar si.
Por kjo ndodh që të përdorin një ngjyrë më të vogël paleta, vetëm 256 ngjyra të mundshme,
por ajo mbështet transparenca dhe animacion.
Dhe pastaj nuk ka png, i cili mbështet transparencë dhe më shumë ngjyra
por jo animacion.
Pra, kjo është një tregti-off.
Pra, duke shtuar një gif, edhe pse, do të jetë funksionalisht
ekuivalent me duke shtuar një png apo jpg.
Po.
Burimi Image barabartë.
Pra, diçka tjetër.
Le të dalë me diçka që kemi dërguar për Victoria për të bërë këtu.
>> AUDIENCA: Shto butonat për një formë.
DAVID J. Malan: OK.
Pra, shtoni butona për një formë.
Dhe ne do të bëjmë atë një së bashku.
Kështu që do të jetë një Segue përsosur menjëherë pas kësaj sfide.
Ndonje gje tjeter?
Çfarë mund të ju pëlqen të bëni?
Web ndihet shumë underwhelming nëse kjo është e gjitha që mund të bëjmë.
AUDIENCA: Të ndryshojë ngjyra e tekstit.
DAVID J. Malan: Ndryshoni çfarë?
AUDIENCA: Ngjyra e tekstit.
DAVID J. Malan: Ndryshimi ngjyra e tekstit.
Në rregull.
Pra, le ta bëjmë këtë.
Vetëm një herë në mënyrë jo se ju jeni, vetëm përmendsh, duke bërë pikërisht atë që unë jam duke bërë,
Unë do të kthehet në muzikë për ndoshta pesë minuta këtu.
Ju jeni të mirëpritur të përdorin Google.
Ju jeni të mirëpritur të pyesni mua, dhe Unë do të pëshpëritje një aluzion në vesh.
Ju jeni të mirëpritur për të parë mbi mbi supet e tjetrit.
Por zgjidh vetëm një nga këto probleme.
Por ne do të bëjmë atë të fundit, të formon një, në qoftë se ne mund të, së bashku.
Pra, pesë minuta për të zgjidhur ndonjë nga këto probleme
duke përdorur Google, intuitë, apo ndonjë mjete të tjera në dispozicion për ju.
>> [MUSIC Duke luajtur]
Në rregull.
Nuk shqetësohet nëse doni për të mbajtur ngatërresë,
por unë do të prishin një çift prej këtyre përgjigjeve.
Pra sugjerimin e parë nga Victoria ishte për të bërë tekstin më të mëdha.
Pra, ka disa mënyra për ta bërë këtë.
Unë kam restauruar aktualisht ekranin tim të kësaj madhësie,
pse unë kam zoomed në artificialisht vetëm për të parë gjërat.
Dhe le ta bëjmë këtë.
Më lejoni të shkojnë përpara dhe të kap disa text generic Latin
vetëm kështu ne kemi diçka për të punuar me të.
Pra, më jepni vetëm një moment.
Unë do të bëjë tre paragrafë.
NE RREGULL.
Kjo do të jetë një shembull i mirë.
Kështu për kurioz, në hello.html im, unë vetëm
ngjit tre absurd paragrafët Latine
vetëm kështu ne kemi një tekst për të punuar me të.
Dhe qëllimi Victoria ishte të të bëjë një pjesë e tekstit të madhe.
Kështu që unë mund të, si më parë, shkoni këtu.
Dhe më lejoni të bëjë atë rrugën e drejtë.
Unë do të ketë një lidhje tag që tregon në një skedar
quajtur "styles.css," marrëdhënia i cili është përsëri "stylesheet".
Dhe atëherë unë jam duke shkuar për të shpëtuar atë dhe të hapur këtë "styles.css."
>> Pra, si më parë, unë kam Aftësia në këtë skedar CSS
që në fakt të shkelur default estetikë e një faqe web,
dhe estetikë parazgjedhur, natyrisht, janë mjaft të shurdhër.
Kjo është lloj i madhësisë normale font, black text, sfond të bardhë, dhe kështu me radhë.
Kështu mendoj unë dua të bëj gjithë këtij teksti më e madhe.
Unë mund të bëjë disa gjëra.
Në dosjen time styles.css, I mund të them, ju e dini se çfarë,
zbatohen në vijim për trupi i faqes sime.
Shkoni përpara dhe të bëjë font size 24 pikë,
i cili është një numër I mund përdorur në Microsoft Word.
Më lejoni të kthehemi në web tim faqe këtu dhe reload,
dhe ju mund të shihni se kjo është tashmë shumë më të mëdha.
Dhe ne mund të merrni pak i çmendur, ashtu si ne mund të në një desktop--
e bëjnë atë 96 pikë.
Ringarkoj.
Dhe kjo është marrë pak ngathët në këtë pikë.
>> Por unë mund të jetë pak më të saktë.
Në vend të aplikimit të këtij stylesheet në trupin e faqen time,
çfarë tjetër mund të aplikoj atë në vend të kësaj, çfarë tag të tjera që mund ende
funksion në të njëjtën mënyrë?
>> AUDIENCA: The p tag?
DAVID J. Malan: P tag.
Pra koka nuk do të jetë saktë, sepse në kokë,
ju nuk mund të vërtetë kontrolluar estetikë e.
Ka ose teksti atje apo jo.
Por p tag-- unë mund të zhyten në pak më të thellë, si të thuash, në paragrafin
tags.
Dhe, edhe pse ka tre, kjo është e përkryer gjobë, për shkak se në CSS,
kur them vetëm "p", kjo do të thotë të zbatohen në vijim
për çdo tag që përputhet kjo përzgjedhës, përzgjedhës vetëm
qenë emri i tag.
Pra, kudo që të shihni një "P" të aplikojnë madhësinë e shkronjave,
dhe le të bëjë atë më të arsyeshme again-- 24 pikë.
Dhe ju e dini se çfarë, vetëm për masë të mirë,
le të bëjë ngjyra vetëm të kuqe për momentin.
Dhe tani, në qoftë se unë të rifreskoni, tani ne parë tre paragrafë të shëmtuara.
>> Por tani mendoj se unë jam lloj of-- Dua paragrafin e parë
të hidhen jashtë në të përdoruesit.
Unë nuk dua të rritet vetëm font size për çdo gjë.
Dhe kështu që unë në fakt dua të identifikuar ose dalluar në mesin e këtyre paragrafëve.
Pra, le të heqin qafe e kuqe, sepse kjo është vetëm lloji i ngjitës,
dhe le të shkojnë përpara dhe të bëjë font size 12 pikë nga default,
kështu që ne jemi kthyer në diçka pak më e arsyeshme.
Dhe tani unë vetëm dua për të rritur font size të paragrafit të parë.
Unë mund ta bëjë këtë në disa mënyra, por një mënyrë që është e
ndoshta më e mësimore në nivel moment është që të bëjë të mëposhtme.
Më lejoni të shkojnë përpara dhe të thonë, kjo paragrafi ka një ID unike të "parë."
Unë mund ta quajmë këtë gjë unë dua.
Unë mund ta quajmë këtë "foo" ose ndonjë fjalë tjetër,
por unë jam duke shkuar për të dhënë atë disa Emri semantike kuptimplotë
si "i pari."
Kjo është identifikues unik, ID, për pikën time të parë.
>> Ajo që unë mund të bëjë në stylesheet tim është të jetë pak më të saktë.
Në vend të thënë, zbatohen në vijim të p tag,
Unë mund të them following-- zbatohen në vijim,
ose zgjidhni, elementi HTML që ka një ID unike të "parë."
Çfarë dua të zbatohen për të?
Një font size e 24-pikë.
Pra, unë kam dy selectors tani.
Një i bën të gjithë të paragrafët 12-pikë.
Por kjo, veçanërisht pasi ajo vjen second-- është fjala e fundit në file--
kjo ka një efekt Cascading.
Unë e kam bërë vetëm të gjithë tim paragrafi tags 12-pikë,
por kjo tani kaskadat dhe refuzon që për çdo elementi
në faqen e, çdo tag në faqen e të cilit ID unike është quote mbyll thonjëzat "i pari."
Dhe hashtag në këtë kontekst thjesht do të thotë "identifikues unik."
Unë nuk e vënë atë në skedar HTML.
Unë, këtu, vetëm të thonë quote mbyll thonjëzat "i pari."
>> Pra më lejoni të reload.
Dhe tani shoh, ah, OK.
Unë do të thotë, nuk është se bukur, por kjo është lloj
e si parathënie të një libër apo diçka të tillë,
ku paragrafi i parë është më e madhe.
Mund të jetë edhe më të saktë me vetëm shkronjat e para, por të paktën
Unë e kam ushtruar më shumë kontroll.
Tani maybe-- ndoshta unë dua të bëj këtë herë pas here për çfarëdo arsye,
dhe kështu që unë nuk dua që kjo të zbatohet për vetëm një tag HTML.
Përkundrazi, le të say-- le gjithashtu të bëjë të mëposhtme.
Class = "import".
Ndërsa një ID është përdorur për të në mënyrë unike të identifikuar një gjë, një tag,
në faqen tuaj të internetit, një klasë është menduar të jetë përdoret në çdo numër të elementeve apo klikoni:
në faqen tuaj web.
Pra, kjo është reusable.
Një ID nuk është reusable.
Një klasë është reusable.
>> Dhe ju e dini se çfarë, për çfarëdo reasons-- filozofike
Unë nuk ka përfunduar mia thought-- Unë jam duke shkuar për të thënë
se paragrafi i parë dhe paragrafi i dytë janë të rëndësishme.
Kështu që unë jam duke shkuar për të aplikuar klasën e quajtur "E rëndësishme", që, në qoftë se unë të shpëtuar dosjen time
dhe ringarkoni, nuk ka Ndikimi funksionale ende.
Por unë kam shtuar disa metadata të dosjes,
lloj diçka të veçantë nga të dhënat kryesore të dosjes,
kështu që tani në stylesheet time, në qoftë se unë në vend thonë ".important" - ju e dini,
çdo gjë që është e rëndësishme, unë jam do të bëjë font-ngjyra, red--
ose më mirë të mos font-ngjyra, vetëm ngjyra.
Ka mospërputhje në CSS për fat të keq.
Dhe reload.
Tani vini re i pari dy paragrafë janë të kuqe
por jo i treti, sepse unë vetëm aplikuar klasën e "rëndësishme"
me dy të parët e këtyre gjërave.
>> Pra, në kartat e identitetit, ju keni mundësinë për për të specifikuar shumë të saktë.
Me klasat, ju keni Ripërdorimi.
Por në të dyja rastet, vini re lloj i parimit të mirë-design
ku unë faktorë nga të gjitha të estetikë në dosjen time styles.css.
Kështu që nuk ka Çrregullimi këtu.
Nuk ka asnjë përmendje të kuqe ose bold-ballafaqohet ose madhësia e shkronjave në këtë fotografi.
Përkundrazi kam semantike, kuptimplotë karakterizohet dhënat e mia si,
këtu është disa të dhëna të rëndësishme.
Ja disa të dhëna më të rëndësishme.
Për më tepër, këtu është "Parë" të dhënat e mia të rëndësishme.
Pra HTML është mbi të gjitha lloj i tagging, fjalë për fjalë, fjalë
dhe paragrafët dhe ndërton në tuaj faqe me këto lë të kuptohet pak, në qoftë se ju
do të, që të mund të disi levave përdorur
teknika të tjera të tilla si CSS në këtë mënyrë.
>> Pra, në përgjigje të pyetjes Victoria-s, ne mund të bëjë tekstin më të mëdha në këtë mënyrë.
Ka kaq shumë mënyra të tjera, por font tag-- kllapa e hapur "font" -
është në fakt disa vjet të vjetra.
Dhe ky është problemi, gjithashtu, me të duke u mbështetur vetëm
në resources-- internet ata kanë tendencë të jetë e vjetëruar.
Dhe me të vërtetë, që i është deprecated, sepse bota e kuptoi,
çfarë bën "font-size = 7" do të thotë?
Ajo nuk ka.
Dhe kështu për shumë vite dhe për të ky day-- një nga ana
vë në dukje këtu është se ajo është në fakt tepër të dhimbshme ende ndonjëherë
për zhvillimin e vendeve për web, për shkak se Microsoft
dhe Google dhe Mozilla dhe të tjerë shpesh nuk bien dakord për mënyrën se si
për të interpretuar një specifikim si HTML.
>> Ka një Rregullore për HTML që në përgjithësi thotë se çfarë do të thotë çdo tag.
Por ndonjëherë ka mbetur me diskrecioni zbatimi së,
diskrecioni Microsoft dhe Google.
Dhe kështu që ju do shumë shpesh parë në një diçka të internetit
duket ndryshe në një PC se ajo ka në një Mac,
dhe kjo është me të vërtetë, sepse, në fund të ditës,
ata nuk e provuar atë dhe në të dyja platformat.
Por është edhe për shkak të arsyeshëm, njerëzit e zgjuar do të pajtohen
dhe kompanitë do të pajtohen, dhe kështu një nga sfidat e programimit
për web ose projektim gjëra për web
është shkruar faqen tuaj në një mënyrë të që punon në çdo shfletues.
Por edhe kjo është e paarsyeshme, e drejtë?
Ka kaq shumë versione të kaq shumë shfletues atje se jashtë, në një pikë,
edhe ju keni për të bërë një telefonatë gjykim dhe ju duhet të vendosë se si një kompani,
sidomos për e-commerce-style faqet ku ju jeni
duke u përpjekur për të përdorur të fundit dhe më të mëdha teknologjive për të dhënë një përdorues të vërtetë të mirë
Përvoja.
Por disa përqindja e përdoruesve tuaj fuqisë të jetë ende duke përdorur Internet Explorer 6 ose 7
ose 8, në veçanti në varësi të vend që ata janë të ardhur nga.
>> Dhe kështu shumë shpesh konsultoi është diçka
si "Statistikat e shfletuesit web."
Dhe në qoftë se ne do të shkojmë to-- le të shohim Wikipedia dhe shikoni se si up-to-date kjo tabelë është
nëse ka një të tillë.
Kështu që këtu ju mund të shihni ku shfletues në të vërtetë
janë, sipas dhjetor 2015, në bazë të Qeverisë së SHBA.
Chrome është në 42% të tregut, e ndjekur nga IE kryesisht në mjedise të korporatave
ose settings PC, natyrisht, ndjekur nga Firefox,
pastaj Safari, atëherë Opera nuk ka të bëjë hartën këtu për disa arsye,
dhe pastaj të tjerët.
Ndoshta kjo është në bazë të tjerët.
Por më problematike se kaq is-- le të shohim nëse Wikipedia gjithashtu ka
versionet e shfletuesit version--
>> Le të shkojnë në statistikat e shfletuesit.
IE.
Edhe kjo nuk është e mjaftueshme.
Statistikat e shfletuesit.
versioni im.
Kjo nuk do të jetë e drejtë.
Le të shohim versione.
pjesa e tregut Browser.
Le të shohim nëse vjen deri.
NE RREGULL.
Tani kjo po bëhet pak më e dobishme.
Kështu që këtu, vini re se ne kemi të gjithë versione të ndryshme të shfletuesit.
Dhe, Perëndia im, në qoftë se ju look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Unë do të thotë, shfletues përditësuar gjithnjë, dhe nganjëherë disa nga këto ndryshime
janë të rëndësishme në kushtet e funksionalitetit.
Dhe kështu në një pikë, menaxherët e produktit apo inxhinierët
nevojë për të bërë një decision-- ju e di se çfarë, vetëm 1% të botës
është ende duke përdorur IE 7.
Në ferr me ta.
Ne jemi vetëm nuk do të mbështetur këtë shfletues.
Dhe çfarë do të thotë të mos për të mbështetur?
Kjo mund të thotë se buttons nuk punojnë në faqen tuaj të internetit,
ose ajo mund të thotë formatimit është plotësisht jashtë.
Ose ju mund të keni për të bërë që të njëjtën çështje gjykimi
në celular këto ditë, ku, ne jemi nuk do të mbështesë IOS 5 më.
Pra, njerëzit vetëm duhet për të përmirësuar.
Apo ne nuk jemi duke shkuar për të mbështetur Cupcake në Android OS për pajisje Android,
sepse si world-- si Bota tech do të shkojë përpara,
ai lloj i dëshiron të terhiq bota me të në mënyrë që ata nuk e bëjnë
duhet të vazhdojë të jetë prapa në përputhje në mënyrë që ata
mund të ofrojë karakteristika të reja dhe të mira.
Kjo është me të vërtetë një nga arsyet pse kaq shumë kompani janë të lëkundet nga
përditësimet automatike dhe lloj i detyruar versionet e fundit të programeve në ne.
Dhe madje edhe kompanitë si Apple do lloj i
të detyruar që pothuajse ose të detyrojë ju në drejtim të forcave të tregut
për të blerë një telefon të ri, sepse ata vetëm nuk do të të rinovuar telefonin tuaj të vjetër më.
Kështu që ju humbas në anën fundit dhe karakteristika më të mëdha,
sepse kjo është e kushtueshme për ta si një Kompania për të ruajtur më të vjetër, ndoshta
versionet inferiore e softuerit.
Por efekti neto është se ne gjithashtu vuajnë këtë gjithashtu.
>> Pra, le të marrin një vështrim në vetëm disa gjëra përfundimtare këtu.
Le të trokas off reale të shpejtë disa nga ato plumba të tjerë, nëse kurioz.
Pra, nëse ju ishin duke u përpjekur për të, për shembull, pozicion
teksti në anë të ndryshme të të faqe, unë jam duke shkuar për të bërë një mënyrë të shpejtë,
por ka të ndryshme mënyra për ta bërë këtë.
Më lejoni të shkojnë përpara dhe të eliminate-- lehtësuar këtë si më poshtë.
Më lejoni të kthehemi në my të thjeshta, paragrafët thjeshtë.
Më lejoni të kthehemi në styles.css tim.
Dhe unë jam vetëm duke shkuar për të përdorur simple-- të cilat ju mund të keni parë në Google
ose kujtojnë nga earlier-- text-align drejtë.
Dhe rifreskoni këtë faqe.
Tani çdo gjë duket të jetë e drejtë-linjë,
si ju mund të shihni në lart ketu.
>> Ne mund të bëjë atë të duket pak më shumë libër-si, dhe ne mund të themi "justifikuar"
dhe reload.
Tani është e mirë dhe katrore në të dy anët, e cila është lloj i bukur.
Një qëllim tjetër që kemi pasur këtu ishte ndryshimi ngjyra e tekstit.
Pra, ne pamë se me tekstin tim të kuqe.
Dhe tani shtoni butona për një formë.
Pra, pse nuk ne përpiqemi për të bërë pikërisht këtë?
Por së pari më lejoni të shkoj në një vend që shumica prej nesh përdorin çdo day-- Google.
Dhe le të marrin një vështrim në se si Google në fakt funksionon.
Por unë jam duke shkuar për të bërë këtë.
Së pari më lejoni të bëjë atë in-- yep, më lejoni të shkoj në Google për herë të parë.
Unë do të duhet të shkojnë në Google Settings,
sepse unë dua të çaktivizoni diçka që quhet rezultate të menjëhershme.
>> Kështu që ju mund të keni vënë re në Google këto days-- më lejoni të kthehem
dhe të kthehet kjo në.
Pra, nëse unë të fillojë në kërkim për "macet" si kjo,
vini re se jo vetëm që I merrni auto-plotë up
lartë, të gjithë një e papritur, faqja në vetvete duket të ndryshojë shumë shpejt, si dhe,
dhe kjo është Google duke përdorur një gjuhë quajtur JavaScript duke u përpjekur të jenë të dobishëm.
Por për fat të keq, kjo lloj e messes up diskutimin tonë
të asaj që po ndodh në të vërtetë nën kapuç këtu.
Kështu që unë jam vetëm lloji i shpejt fikur rezultate të menjëhershme.
Dhe unë jam duke shkuar për të klikoni Ruaj.
Dhe tani unë jam duke shkuar për të hapur se diagnostike toolbar që unë
mbani hapjen nën skedën e rrjetit.
Pra, le ta bëjmë këtë.
Le me-- whoops-- lëviz kjo poshtë pak.
Dhe më lejoni të kërkoni për "macet".
>> Dhe tani notice-- fakt, kjo është një mundësi e mirë
për të diskutuar për një moment.
Njoftim moment I type-- ndaluar atë.
Ndaluar atë.
NE RREGULL.
Njoftim momentin unë lloji letër C, të shikojnë pjesën e poshtme të ekranit.
A- T- S. Çfarë pjesën e poshtme e këtë ekran, tab im Network,
sugjerojnë që po ndodh çdo herë që unë të shkruani një letër?
Për fat të keq, bretkocë është shumë e sot shkëputur ose tërfil
apo çfarëdo që ai është.
Ajo që po ndodhte çdo herë kam shtypur?
Dhe më lejoni të pastruar tampon dhe shkruani atë përsëri.
uh So--.
Çdo herë që unë të shkruani një letër, C- A- T-- kështu që një rresht të ri padyshim mban shfaqen.
Çfarë do të paraqesin secila prej këtyre rreshtave, bazuar në atë që kemi parë dhe diskutuar
deri tani?
AUDIENCA: Një kërkim?
DAVID J. Malan: Një kërkim, ose më shumë generically, një kërkesë HTTP
nga shfletuesin tim në server.
E pra, pse është shfletuesi im duke bërë një HTTP kërkojnë çdo herë që unë të shkruani një letër?
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Yeah, kjo është duke i dhënë me këto rezultate të auto-plotë.
Si, ku bëjnë këto rezultatet e kërkimit vijnë nga?
E pra, çdo herë që unë lloji një letër, Google dërgon më shumë
dhe gjithnjë e më shumë fjala Unë jam i shtypur.
Pse?
Sepse ata duan të më jepni një më të mirë dhe më të mirë, sugjerim më të mirë,
një listë e sugjerimeve, për atë fjalë Unë jam duke u përpjekur për të vërtetë të plotë.
Pra, kjo do të thotë fjalë për fjalë çdo Karakteri ju shkruani në Google
është dërguar, në fund të fundit në pjesa më e madhe, por edhe nganjëherë një
në një kohë në mënyrë që të zbatohet këto karakteristika auto-plotë kur
të dhënave është, natyrisht, në web.
>> Tani, le të marrin një vështrim në atë që në fakt ndodh kur unë klikoni Google Search.
Dhe pastaj ne do të levave këtë veten.
Pra, nëse unë lëvizni poshtë tani për shumë Kërkesa e parë që ka ndodhur vetëm.
Vini re në vijim.
Ajo u dërgua në një mënyrë të drejtë të gjatë URL-- https://www.google.com/search?
dhe pastaj një bandë e tërë e gjëra.
Le të shohim këtë të vërtetë tani në vetë tab të shfletuesit.
Le të heqin qafe e toolbar këtu.
Ja faqja e rezultateve të kërkimit.
Dhe vini re këtu është URL.
Tani, ju mund ndoshta me mend çfarë po ndodh këtu në pjesë.
Pra, para së gjithash, një përkufizim.
Kjo me sa duket është destinacioni ku paraqitet forma.
Kështu që kur unë shtypur në fjalët "macet" dhe hit Enter,
me sa duket Google ka dërguar input text për këtë URL e mia
që unë e kam theksuar atje, çaj kërkim.
Rezulton se, në një URL, çdo gjë që ndodh pas një pikëpyetje është,
si do të vazhdojmë duke thënë: një palë me vlerë kryesore që ishte shtypur në formë apo në një farë mënyre
transmetuar nga shfletues në server.
>> Pra, çdo herë që ju shkruani të dhëna në një formë në web
dhe është dërguar si ne kemi diskutuar, nëpërmjet një marrë,
një nga këto virtual zarf, përmbajtja
e që envelope-- po, të mbajtur duke u mbushur fizikisht
në zarf në klasë sot, por teknologjikisht
ajo është vënë në të vërtetë në URL.
Pra, në fakt, më lejoni të analizoj me këtë.
Ku e shihni të dhëna përdoruesi?
Ku e shihni diçka që unë shtypur deri këtu?
Po, kështu që "macet".
Apo jo?
Pra më lejoni të gjej këtë në diçka të thjeshtë.
Unë jam duke shkuar për të fshirë çdo gjë në lidhje me këtë URL që unë nuk e kuptoj,
dhe unë jam vetëm duke shkuar për të lënë atë si this-- / kërko? q = macet.
Ne do të shohim ku q vjen nga një moment,
por ndjehet si minimum Sasia e informacionit që kam dhënë.
Dhe tani unë jam duke shkuar për të goditur Enter.
Dhe vini re ai ende punon.
Ne ende të marrë përsëri një bandë e tërë e macet.
Pra, Google është njohës se ky këto ditë.
Është e 2016 jo 1999.
Pra, ka gjëra të tjera që my shfletuesi është dërguar në server.
Por kjo është minimalisht të gjitha që është e nevojshme.
>> Pra, çfarë po ndodh?
E pra, së pari më lejoni të shkoj përpara dhe të shkojnë përsëri në Cloud9 dhe më lejoni të shkoj përpara
dhe mbyll skedat e mia më herët.
Dhe unë do të bëj këtë në tim vet vetëm për një moment.
Unë jam duke shkuar për të shkuar përpara dhe për të krijuar fotografi të re.
Dhe unë jam duke shkuar për të shpëtuar atë si google.html.
Dhe unë jam duke shkuar për shumë quickly-- Unë jam duke shkuar për të vjedhur, në të vërtetë,
disa prej këtij teksti vetëm për të kursyer kohë.
Unë jam duke shkuar për të ngjitur këtë në këtu.
Unë nuk jam duke shkuar për të shqetësojë me të çdo stilizim këtë herë.
Ne jemi duke shkuar për të thirrur këtë "Google mia."
Dhe unë jam duke shkuar për të hequr qafe i çdo gjëje në trup.
Dhe unë jam duke shkuar për të bërë në vijim.
Më lejoni të zmadhuar.
Forma action-- dhe siç e përmenda shkurtimisht earlier-- whoops-- si unë shkurtimisht
u përmend më parë, veprimi i një Forma është ajo ku ju të dërgoni të dhënat për të.
Pra google.com/search.
Dhe metoda unë dua të përdorni mund të jetë një nga dy gjëra.
Ajo ose mund të "marrë", siç do të vazhdojmë diskutuar, ose ajo mund të jetë "post".
Tani për tani, themelore Dallimi është, në qoftë se ju përdorni "të"
të gjithë informacionin që Përdorues ofron merr dërguar në URL.
>> Kjo është e madhe për gjëra të tilla si kërkim motorëve dhe disa aplikacione të tjera,
por në çfarë rrethanash do të ju nuk dëshironi të plotësoni një formular
dhe kanë informacioni përfundojnë deri URL, si në shiritin e adresës shfletuesit tuaj?
Çfarë lloj i formave të bëni ju, duke filluar
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Yeah, si çfarë?
AUDIENCA: Fjalëkalimet.
DAVID J. Malan: Yeah, kështu që ju të hyni në Facebook apo ndonjë website.
Kjo është e dhëna përdoruesi nga një formë, një kuti teksti,
por ju ndoshta nuk e duan atë treguar në URL të shfletuesit.
Pse?
Unë do të thotë, ndoshta ka disa Implikimet e sigurisë në rrjet,
por more-- pëlqen, më thjesht, çfarë nëse shokun tuaj, tjera tuaj të rëndësishme,
fëmijët tuaj, bashkëshorti juaj duket me historinë e shfletuesit tuaj?
Nuk është e drejta juaj fjalëkalimin ka në historinë e shfletuesit tuaj.
Kjo nuk do të ndjehen si dizajn të mirë.
Apo edhe më shumë teknikisht, mendoj që ju jeni duke u përpjekur
të ngarkoj një foto në Flickr ose Facebook ose wherever--
që është e dhëna përdoruesi, edhe pse kjo është pak më shumë se sa interesting--
mund të mbushur një imazh në URL bar?
Ju lloj lloj nuk mund të.
Ju mund të lloj.
Por, me të vërtetë, unë jam i vështirë-presion të imagjinohet bëjnë këtë.
Kështu që kam nevojë për një metodë për ngarkimi fotot në një faqe interneti,
dhe kjo metodë tjetër është quajtur "post".
Por tani për tani, ne do të flasim vetëm për "Të marrë", që është e thjeshtë të dy.
Ajo vetëm vë të gjithë input përdorues në URL.
>> Kështu që këtu është forma unë jam duke krijuar.
Dua një kontribut.
Dhe ju e dini se çfarë?
Unë jam duke shkuar për të marrë me mend ketu.
Unë do të kujtoj tim input "q" për "pyetje".
Dhe unë mendoj se kjo është një nga harton origjinale, ndoshta, nga viti 1999.
Dhe pastaj lloji i këtij input është vetëm do të jetë "text."
Dhe atëherë unë jam duke shkuar për të ketë një tjetër kontribut që nuk ka nevojë për një emër, si ne do të shpejt
parë, lloji i të cilit është "submit".
Dhe kjo do të më jepni një buton të veçantë.
Dhe kjo eshte.
>> Pra më lejoni të shkoj përpara dhe për të shpëtuar këtë fotografi.
Unë do të kthehem në my shfletues dhe të shkojnë në google.html.
Enter.
Dhe kjo është lloj i rrallë për të thënë aspak.
Por më lejoni të shkoj përpara dhe kërko për "macet".
Dhe vini re unë jam duke në këtë URL Cloud9.
Por në momentin që unë klikoni këtë, ku do të shpresoj se do të përfundojë?
>> AUDIENCA: Google.
>> DAVID J. Malan: Google.
Pra, le të klikoni Submit.
Dhe me të vërtetë unë e kam ri-zbatuar Google.
Apo jo?
Është e thjeshtë.
Është e lehtë.
Unë do të thotë, kodi im është qartësisht më i mirë se tyre, nga rrëmujë kemi parë më parë.
Dhe ju e dini se çfarë?
Unë jam duke shkuar për të nuancë këtë deri pak.
Unë nuk e përmend këtë më parë.
Ka tags H1 si, për kreun 1, titulli më i rëndësishëm në një faqe.
"Google im," unë do të thërrasë këtë.
Më lejoni të reload.
Është duke kërkuar një pak më të mirë tashmë.
Dhe, në fakt, ju e dini se çfarë?
Unë e kam already-- I gënjyer.
I tha se unë nuk ishte duke shkuar për të stilit këtë, por unë jam duke shkuar për të stilit këtë si më parë.
Dhe trupi im do të jetë, le të themi, qendra text-align.
Ajo është në kërkim të më shumë si Google tashmë.
>> Unë kam nevojë për një pushim linjë, edhe pse, për këtë Submit button.
Dhe kjo rezulton, ju mund të përdorni paragrafët,
ose ju mund të më shumë fjalë për fjalë vetëm të thonë: më jepni një linjë pushim here-- tag br.
Dhe në qoftë se unë rifreskoni këtë, tani ajo shkon atje.
Kjo është pak e shëmtuar, kështu që unë mund të bëjë pushime të shumta e linjës,
por le të mos merrni shumë lakmitar këtu.
Pra, tani le të shohim nëse ajo punon për "qentë".
Kjo duket për të punuar për "qentë", si.
Pra, çfarë është takeaway bindëse këtu?
One-- nuk ishte një hap i madh për të futur disa etiketa të tjera,
si formë tag në tag input.
Por më në thelb është, të gjithë ne jemi duke bërë
është leveraging të kuptuarit tonë e HTTP dhe fakti
që në fund të fundit ndryshon format çfarë është në URL të shfletuesit,
dhe kështu, për këtë arsye, ne mund mekanikisht të sigurojë të dhëna në një server
duke bërë një formë të HTML dhe duke e ditur se serveri HTTP kupton,
ashtu si trupi ynë e kupton, si, duke tundur dorën time, të njëjtën protokoll,
dhe kështu që ne të kthehemi përgjigje që në fund të fundit të presim.
>> Pra, le të përpiqemi të bëjmë një Gjëja e fundit tani me celular,
dhe unë do të make-- unë do të shtoj ky kod për slides.
Pra, nëse ju dëshironi të kallajxhi, ju mund të patjetër të marrë atë nga atje.
Por unë jam duke shkuar për të shkuar përpara dhe të bëjë një gjë.
Unë jam duke shkuar për të shkuar përpara dhe të hapur tregues page-- tim
faqja ime përshëndetje si më parë, të cilat ka një shumë të këtij teksti faux-latine,
ose kuptim teksti latinisht, dhe has-- kjo duket si ky në këtë font size.
Por më lejoni të shkoj përpara dhe të bëjë këtë.
Unë jam duke shkuar për të shkuar në Cloud9.
Dhe ju nuk keni për të bërë këtë hap.
Unë vetëm do të bëjë atë vetë.
Unë jam duke shkuar për të klikoni Share.
Dhe kjo është një tipar vetëm e Cloud9, ku
Unë mund të bëjë mjedisi im publike.
>> Dhe vetëm për hir të Demonstrata, më lejoni të bëjë këtë.
Unë jam duke shkuar për të bërë publike tim aplikimit.
Vini re se është paralajmëruar mua, jam I sigurt se unë dua të bëj këtë,
sepse kjo do të bëjë të gjithë në botë, nëse ata janë këtu tani
ose shikuar këtë video më vonë nga ana internet gjendje për të parë atë që unë shoh.
Por kjo është në rregull.
Unë jam duke shkuar për të thënë "Done".
Dhe më lejoni të ju inkurajoj që, nëse kam bërë kjo correctly-- lejoni të provuar atë më parë.
Shko përpara, nëse ju nuk mind-- në një shfletues në kompjuterin tuaj,
shkojnë në këtë URL, dhe shpresojmë se ju do të shihni tekstin tim latin.
Dhe të jetë i qartë, është e Nuk kandidon në laptop tim.
Është në re.
Është në Cloud9, fjalë për fjalë, por Unë e kam bërë publik time hapësira e punës
në mënyrë që kushdo në internet mund të hyni në faqen time latin në shtëpi.
>> Shkojnë në të njëjtën URL në telefoni juaj, nëse ju mund të.
Në qoftë se ajo do të kushtojë ju, edhe pse, ju vetëm mund të shikoni mbi një shpatull.
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Unë jam i keq?
AUDIENCA: [padëgjueshme]
DAVID J. Malan: Vetëm fjalë latine.
Kjo eshte e gjitha.
Por kjo është ajo që ju duhet të shihni.
>> AUDIENCA: Po.
DAVID J. Malan: Po.
Po.
NE RREGULL.
Kështu që mund të mbajë deri tuaj telefoni për vetëm një çast?
Pra, shpresojmë se, në qoftë se ju jeni duke hyrë në ai, ajo duhet të duken pothuajse të palexueshëm.
Është still-- Unë do të thotë, është e paqartë për shkak të latinisht.
Por është gjithashtu i paqartë për çfarë arsye tjetër?
Si, çfarë nuk i pëlqen në lidhje me këtë?
AUDIENCA: Është e vogël.
DAVID J. Malan: Kjo është super, super të vogla.
Pra, si mund ta fix this?
Kjo është super, super e vogël në telefonin Victoria-s
dhe, në qoftë se ju keni tërhequr it up veten, ndoshta
vogël në telefonin tuaj, si dhe, nëse ju kanë settings aksesueshmërisë aktivizuar.
Cfare eshte kjo?
Ju vetëm mund të majë dhe zoom, i cili është i realizueshëm,
por pastaj ju vetëm shikoni disa fjalë në një kohë.
Pra, prit një minutë.
Unë e di se si për të rregulluar këtë.
Apo jo?
Unë mund të përdorin CSS, dhe unë mund të ndryshojë font size nga 12 pikë në 24 pikë.
Por efekti anësor i kësaj, sigurisht, do të jetë tani,
në një desktop apo një kompjuter portativ, tani tekst është dy herë më i madh.
Dhe kështu ajo do lloj të ishte mirë për të dalluar në mes të pajisjeve,
dhe ajo rezulton atje janë mënyra për ta bërë këtë.
Ka disa mënyra të ndryshme, në fakt,
ku duke përdorur CSS dhe karakteristika njohës se ne nuk do të shkojë në në hollësi të madhe,
në thelb ju mund të query shfletuesi dhe të thonë:
nëse ekrani juaj është më i vogël se sa kjo shumë pixels, përdorni këtë madhësinë e shkronjave.
Nëse ekrani është më e madhe se sa kjo shumë pixels, përdorni këtë madhësi tjetër font.
>> Ju mund të jetë edhe njohës ende.
Nëse e keni vizituar ndonjëherë një web faqe që, në një desktop,
ka një meny të madhe ndoshta off të anë, dhe pastaj gjithë përmbajtjen
është në anën e që menu-- kjo është lloj i një paradigmë të përbashkët.
Menu në të majtë, përmbajtjen në të djathtë, ose anasjelltas.
nuk ka të vërtetë punojnë në celular kur tuaj Ekrani është vetëm kjo shumë pixels i gjerë.
Pra, më shumë i zakonshëm në celular është, Menuja juaj do të papritmas merrni
u shemb, dhe ju duhet të klikoni një buton për të parë atë,
ose në faqen e internetit do të vënë menu majë të saj dhe të vënë përmbajtjen poshtë atë.
Dhe ju mund të zbatojë këto gjërat në mënyra të shumta, too.
Ju mund të kërkoni programuesit tuaja, hey, ekipi, në çdo kohë
ju shihni një kërkesë HTTP nga një Android Pajisja, një pajisje Microsoft, një Google
Pajisja, një pajisje Apple, e përdorin këtë font size dhe të përdorin këtë plan urbanistik menu,
ose ndryshe të përdorin pamjen këtë parazgjedhur të madhe.
>> Tani, duke përdorur atë teknikë themelore sot
mund të përdorin inxhinierët të di nëse kjo është
një iPhone, një telefon Android, një laptop, një desktop vizituar serverin e kompanisë?
Ku ata marrin këtë informacion?
>> AUDIENCA: Header?
>> DAVID J. Malan: Yeah, HTTP header.
Pra, çdo kërkesë HTTP vjen nga klientët e tyre në serverat e tyre
përfshijnë, brenda se virtual zarf, një bandë e tërë
i HTTP headers, njëra prej të cilave është shfletuesi dhe të sistemit operativ
madje, në qoftë se ju kujdeseni për të se niveli i detajeve.
Tani, kjo është një fshehtë-looking string, por ekziston software që do të vetëm
lehtësuar atë, dhe ju vetëm mund të kërkoni në programimin code-- PHP, Java, C ++,
whatever-- atë telefon është this-- çfarë pajisje është ky përdorues duke përdorur?
Dhe pastaj ju mund të thoni, tregojnë ata këtë version i internetit në qoftë se ajo është një telefon.
Tregoni atyre këtë version të website qoftë se kjo është një laptop apo desktop.
Por ju nuk duhet edhe Kompleksiteti server-side.
Ju mund të bëjë edhe më të thjeshtë të gjërave.
>> Unë jam duke shkuar për të bërë këtë.
Unë jam duke shkuar për të shkuar përpara në Mjedisi Cloud9 im,
dhe unë do të shtoni një tag që ke parë në Google para.
Është quajtur metatag.
Dhe unë kurrë nuk e mbani mend këtë, kështu Unë do të shkruajshe atë këtu.
Emri Meta = "prezgjedhur" dhe pastaj content = "width = width pajisje, intital
shkallë = 1 ", dhe kjo është ajo.
>> Pra, ajo mund edhe të jetë si një yshtje magjike.
Kjo nuk është e gjitha se e qartë, por kjo ka diçka të bëjë me të dritares së pamjes,
dhe pamjes është vetëm trupi i një web faqe, rajoni drejtkëndëshe që
përcakton shumica e faqes.
Dhe kjo është vetëm duke u thënë shfletuesi, ju e dini se çfarë?
Bëni gjerësinë e kësaj faqe efektive e barabartë me gjerësinë e pajisjes.
Me fjalë të tjera, nuk do të supozojmë se ju keni lloj hapësirë ​​të pakufizuar.
Supozojmë se ju keni vetëm sa më shumë Hapësira si vetë pajisjen është i madh.
Dhe kështu që tani, në qoftë se unë ringarkoni këtë në shfletuesin tim, unë nuk shoh asnjë ndryshim.
Por, nëse unë e bëri këtë correctly-- dhe më lejoni të kaloj fingers-- tim në qoftë se ju të gjithë
ringarkoni telefonat tuaj; u bëni ju të shihni një ndryshim bindëse?
Po, është that--
>> AUDIENCA: [padëgjueshme]
DAVID J. Malan: Po.
NE RREGULL.
Pra, ndoshta më i lexueshëm tani?
Ende i vogël, të jetë e drejtë, por jo kaq e vogël që të jetë i pakontrollueshëm.
Dhe unë me siguri mund të pranoj këtë më tej me CSS ose në anën e serverit,
por gjithnjë e më shumë atë që ju jeni parë është gjithnjë e më shumë karakteristika
duke shtuar për klient-side environments--
JavaScript, si ne do të diskutuar nesër, CSS, dhe kështu HTML--
se të gjitha këto pyetje mund të bëhet në të klientit
në mënyrë që të shqetësojë server shumë më pak dhe jo
që të ketë për të mbajtur me, për shembull, sulmi i vazhdueshëm
e ri operativ-sistemit versionet, versione të reja shfletuesit.
Ju vetëm mund të le të shfletuesit të kërkojë pajisjen, sa i madh je,
dhe pastaj të bëjë disi logjike vendimet e bazuara në atë.
Por ne do të shohim më shumë mundësi për vendimet logjike
nesër në kontekstin nga një gjuhë programimi.
>> Pra, ndonjë pyetje, atëherë, në zhvillimin e web?
Sot nuk është e programimit web, per se, pasi që më çdo gjë që ne e bëmë
ishte shumë estetike, nëse ju do.
Nuk ka asnjë vendim-marrjes në kodi që kemi shkruar,
dhe kështu që kjo është arsyeja pse HTML është markup gjuha, nuk është një gjuhë programimi.
Por nesër ne do të marrin një vështrim të shpejtë, në fund të fundit,
në JavaScript, që është një programimit aktuale
gjuhë që na lejon të bëjmë pak më shumë.
>> Ndonje pyetje?
E pra, më lejoni të propozojë dy mundësi opsionale për detyrat e shtëpisë.
Një is-- këto Cloud9 Llogaritë nuk skadon.
Ju jeni të mirëpritur të përdorin ata të kallajxhi me.
Është niveli lirë të shërbimit.
Kuptojnë se, në qoftë se gjatë krijimit workspace tuaj, ju e bëri atë publike,
që do të thotë se të gjithë në internet mund të shihni se çfarë ju jeni të shtypur.
Pra, ndoshta vetëm e konsiderojnë nuk e turpshme veten
në qoftë se ju jeni duke web tuaj të parë faqe atje publikisht aksidentalisht,
por askush nuk do të e di se për të parë atje anyway.
>> Dhe two-- më lejoni të hedh up këtë URL, si dhe,
veçanërisht në qoftë se keni ardhur në sot pak më pak të rehatshme se të tjerët,
të sigurtë se çfarë do të thotë të gjitha këto gjëra.
Kuptojnë se shumë më tepër i kësaj video, e cila është edhe një mënyrë e mirë për të bjerë në gjumë
dhe gjithashtu për të qeshur ndërsa duke bërë kështu, ka edhe
një shumë e societally interesante dhe diskutimet me rëndësi për sigurinë
aty nga John Oliver, megjithëse një komedian.
>> Por në qoftë se nuk ka pyetje të mëtejshme, që na sjell në pritje.
Pra, pse nuk I kthehet në muzikë.
Nuk duhet të jetë pije dhe ushqime jashtë.
Unë jam i lumtur për të shoqërohem për aq kohë që folks do të doja,
përgjigjet pyetjeve më shumë një-në-një.
Por, ndryshe, ju jeni të mirëpritur për të marrë jashtë në çdo moment,
dhe ne do t'ju shoh përsëri në mëngjes nesër për pak më shumë.
Të gjithë të drejtë, faleminderit.