Давид Ј Малан: У реду. Вратили смо се. Дакле, циљ ове завршне сесије је да се уведе још неколико концепата али и дати свима шансу да се некако протежу прсте и заиста уради нешто а литтле хандс-он. Циљ није да се окрену да сви у веб девелопера на било који начин, али заиста само да вам укус неких од основних конструкција од онога иде у веб програмирање и данас веб развој, тако да статички страна ствари-- никакве логике, не програмирање језика, само статички садржај. И то ће нам дати прилику да стварно видимо шта веб сервер је, Погледајте шта ХТМЛ фајл, види шта је ХТТП је заправо служи горе. Али пре него што почнемо, било ретроспективу питања о цлоуд цомпутинг или сигурност или нешто између? Не? У реду, па, хајде да ово, за сваки случај процес пријављивања за нешто траје неколико минута. Ми ћемо дозволити да то у позадини. Само напред, ако можеш, на овај УРЛ овде- ц9.ио. Ово је треће стране сервице-- платформа као услуга, ако вилл-- који ће вас позвати да се пријавите за налог, и да ће дати сваком од вас рачун у такозваној цлоуд на инфраструктуру туђој, компанија се зове Цлоуд9. Али оно што је лепо о ово је да ти дају апроксимација стварни реалном свету развој окружење, иако у облак и на веб претраживача, а ми ћемо их стварно експериментирати мало данас. А онда само напред и само смер свој пут до поступка пријаве ако можеш. Тако да се деси да користите у класи Ја предајем за све ученике, и на кампусу и ван сада, и то је заменио шта историјски је иначе Онлине софтвер. Дакле, оно што се добије приступ је један од тих виртуелних машина, у суштини, то сам описао раније. Дакле, ова компанија Цлоуд9 вероватно ренте из трећег забаву-- заиста у овом случају, Гоогле-- целину гомила виртуелних машина да су некако исецкати у илузија појединачних сервера да свако од нас има пуну контролу над. То није баш тачно рећи да су виртуелне машине, мада, јер оно Цлоуд9 заправо користи је нешто новија технологија зове Контејнеризација. И дозволите ми да узмем ову слику овде да сликам ову слику. 

Контејнер је, ако ли се сећате слику од раније, мало лакши тежина од виртуелној машини. У ствари, док задња време смо причали тамо Као оперативни систем и хипервизором а затим гост оперативни систем, гост оперативни систем, гост оперативни систем, на врху Физички хардверски, разлика са овим новија технологија, Контејнеризација, је да су сви некако деле исти оперативни систем. Али они и даље стварају илузија свакога да његов сопствени ексклузивни административних права и датотеке на серверу. Али мање софтвер у између вас и хардвера. Чији резултат је, теорија, већи учинак, јер користите или расипање мање ресурса на тој такозваној виртуелизације слоја. Дакле, ово се зове Контејнеризација по природи путем технологије која се зове Доцкер, који је у великој мери долази на своје. И то је нешто што инжењери у вашој компанији Можда мало врста проговори око ускоро ако већ нисте, мада сигурно нема разлог за скок на било бандвагонс. 

Имајући то рекао, шта вероватно видети сада је екран који изгледа мало овако. ОК. И само зови ме више ако не. И ако па-- Долазим ако не. Само напред и кликните да велики Плус да створи радни простор, и видећете екран овако. Можете позвати радни простор Име шта год хоћеш за сада. И само заправо због једноставности, го и-- добро, неки од вас већ имају радне просторе. Назовите то како год желим-- посао, Харвард, четвртак, шта год желите. Не треба ти опис. Можете га оставити приватним, осим ако вас већ имају гомилу радних простора. Ако сте приморани да то буде јавно, То је у реду за данашње потребе. Овде, такође, један од Упселлс. Имаш право на један сајт радни простор Уобичајено. Али ако желите више, морате да платите више. У супротном, они вас присилити како би ваш рад јавности. Али то је у реду, јер су и таргет овај у опен-соурце заједнице да охрабри људе да заправо сарађују. 

И последња ствар која је важна, иако је, након што одаберете име и након што одаберете приватно или јавно, кликните ХТМЛ5, наранџасту иконицу велики други са леве стране, и затим кликните на Цреате Воркспаце. И вероватно ће узети мало или тако, али ћете онда имати окружење, када то, то изгледа подсећа на шта имам овде сада на екрану. Али, опет, можда ће бити потребно мало или више да се на овај екран када кликнете на Цреате Воркспаце. Само ми застава изнад ако би волела да се погледамо шта или савет. У реду. Па ћу позадину ово за сада. Назови ме ако изгледа да имали техничких потешкоћа. Али, опет, то би могло потрајати Мало за то да се отвори. И идемо напред и говорити о томе шта то заправо значи да се направи веб страницу, шта ХТМЛ је, и како све ово сада повезује као почињемо да заправо користе неке од технологије. Тако испада да могу го он мој мали Мац овде, отвори једноставан програм под називом ТектЕдит, или на Виндовс сам могао отворен нешто што се зове нотепад.еке. И ја могли једноставно уради нешто овако-- "Хелло, ворлд." И онда сам могао сачували као хелло.ткт Дакле, нема магије тамо. Ово нема никакве везе са веб програмирање, нема никакве везе са ХТМЛ. Само креирање једноставне текстуалне датотеке. Али испоставило се да је веб страница је буквално само то. То је једноставан текст фајл који садржи текст да би куцате на тастатури, али обично, али не увек завршава у не .ткт, али .хтмл или .хтм. А ти не само тип речи у фајлу. Ти стварно морате да користите ствари које се зову ознаке, или уопште, нешто зове језик за означавање. 

Тако да ћу врло брзо куцате а онда објаснити следеће. Ја ћу први ово писем, који каже, хеј, претраживач, овде долази веб страница написан у ХТМЛ. И те две ствари заједно рећи, хеј, претраживач, следећи је заиста ХТМЛ. Хеј, претраживач, ево глава или на врху моје странице. Хеј, претраживач, унутар врха моја страна, стави наслов који је, "здраво, свет. " Хеј, претраживач, након што је шеф мој страна, ево тело моје стране. И, хеј, браузер, тело мог страна би требало да каже, "здраво свет." Дакле, шта су битне детаље овде? То је оно што је генерално зове декларација доктор-тип, и, искрено, мало је тешко да запамтите ово на први поглед. Ти некако цопи-пасте. Ово је формалан начин да се каже, хеј, браузер, Ја сам користећи ХТМЛ верзију 5 која је изашао нешто недавно. То је магичан бајање да неки људи са лошим смислу дизајна одлучио да ставе на самом врху датотеке. Иако је то мало волшебни, то је све то меанс-- Хеј, бровсер, овде долази са верзијом 5 ХТМЛ. 

Остатак је ово било код нас већ неко време, историјски, али то је било развија, а то је вероватно су се мало једноставније. Приметити неколико карактеристика онога што сам истакао. Има те ствари са углом брацкетс-- леву заграду и право носач. И приметити симетрију овде. И симетријом, мислим, баш као што сам имају ову ознаку старт овде или отворену ознаку ако хоћете, овде имам близу ознака или крај ознака да је разликује само утолико што је ово сласх на почетку речи ХТМЛ-а. И ти падне на памет ово што сам био лежерно предлагање пре, хеј, претраживач, ево мало ХТМЛ. И, обрнуто, хеј, браузер, то је је за почетак ХТМЛ-- и крај. 

У међувремену хеј, браузер, овде долази главу мог странице. Хеј, претраживач, то је за главу. Хеј, претраживач, овде је Тело моје стране. Хеј, претраживач, то је за тело. И унутар тога је неки произвољан текст за сада. И унутар главе, у међувремену, је неки произвољан, али таггед, да тако кажем, текст који каже, наслов на мојој страници ће бити "здраво, свет." Сада, за сада, можете претпоставити да је претраживаче има само--, односно, веб странице имају само два партс-- главу и тело. А глава је углавном само као и менија, ствари стварно само на самом врху. А тело је храбрости у страну, све у тој великој правоугаоника да испуњава екран. Тако да идем напред и уради то. Ја ћу да наставим кликните Саве, Филе Саве. И ја ћу спасити ово као хелло.хтмл, и ја ћу само да стави на радној површини. И ја идем напред и кликните на дугме Саве. И нотице-- ми Мац у бар се дере на мене. Да ли сте сигурни да желите да урадите ово? И ја ћу рећи, да користите ХТМЛ. Знам боље у овом случају. А сада ћу да одем у десктоп где сам ову слику одједном. И ја ћу двапут кликните на њу. И приметићете да, поред Цхроме подразумевано отвара. То је зато што је то подразумевани претраживач. И то само каже, "здраво, свет." Али каже "здраво, свет "на два места. Обратите пажњу на горњем левом углу. Прилично тешко да пропустим. То је велики и храбар. И где другде то изгледа да каже: "Хелло, Ворлд"? 

ПУБЛИКА: Картица. 

Давид Ј Малан: Да, сама картица. Дакле, када сам рекао је шеф страница је све горе топ-- и заиста ово је наслов. То је само на картици овде. И ја могу повући ову картицу од како се не би збунили. Ово је само једна таблета сада, и заиста видимо "Хелло, Ворлд" овде и "здраво, свете" овде доле. Тако прилично јасно. Али то је такође прилично једноставно. И, заправо, зумира сам у. Могу се променити величину слова само како би повећали за приступачност. Али хајде да сада урадимо нешто мало више занимљив. 

Идем да иде-- упс, нека ми да се вратим текстуалну датотеку. Враћам се на мој текст фајл, а ја идем да се то промени и рећи "Здраво, Дизниленд." Саве. И врати се у мој прегледач и кликните на дугме Релоад. И сада, наравно, да каже "Диснеи Ворлд". И ја ћу да вештачки зоом у само да је лакше видети. Тако да сада, на жалост, ја сам хтео да-- заправо, то је особина Мац. Желим да кликнете на Дизниленд и идем негде као диснеи.цом, али то не ради. Дакле, основни принцип оф тхе веб је хиперлинкови, везе које иду негде другде. Како то да урадим? Па, могао бих да кажем, "Здраво, хттп://ввв.диснеи.цом." Сачувајте ово. Релоад. Али то такође, не може да се кликне. А шта је лепо овде, иако ово није функционална још, је да се чини да је претраживач буквално само да шта ја кажем. Дакле, ако сам само укуцајте УРЛ овако, то је само да ми покаже УРЛ. Морам да користим ознаке или ознаке језика да заправо рећи бровсер да учини још више. Тако да идем напред и избрисати ово за тренутак. И ја ћу рећи, хеј, претраживач, почети сидро овде, линк да тако кажем. И хипер-референтна, одредиште те сидра, требало би да буде овај УРЛ. И приметио моје цитате. Добро би апострофе, такође, али морате бити доследни, и ја бих уопште само користити двоструки наводници да буде једноставно. Приметила сам да ћу затворити ознаку. А онда овде ћу да каже, "Диснеи Ворлд". Сада ми је потребно мало симметри-- отворено носач, / А, затворена конзолу. 

Дакле, шта сам увео? Ми смо већ неколико ознака. ХТМЛ Глава, наслов, тело, су све ознаке, да тако кажем, са отвореним и затвореним колегама. Али обавештење, ово је врста на фундаментално другачији. То је оно што ћемо назвати у ХТМЛ атрибут. И атрибут је само кључни вредност пар. То је уобичајена ствар у рачунара сциенце-- кључ-вредност паровима. То је нека врста алата у трговини. Кључни и вредност. Реч и онда неки друга реч или речи. И у овом случају, кључ је хреф, а вредност је да пуна УРЛ адреса. А шта је атрибут ради је то утиче на понашање ознаке. И у овом случају, треба да утиче са таквим понашањем ознака сидра, јер треба да се учврсти овај линк на негде. И како ти је то путем атрибута. 

Па ћу ићи напред и спремити датотеку сада. Да се ​​вратим свом бровсеру и релоад. И, воила, сада имамо Почеци легитимног веб страници. Супер-једноставан, али ако наведите курсор ово-- обавештење у доњем левом углу, то је супер мали. Али ти видиш ввв.диснеи.цом. И ако га кликните, заиста ово одводи ме на гостовању диснеи.цом. Сада је чудна ствар овде да није најбоље-- највише тртиште УРЛ, али То је у реду, јер ову слику не постоје на Ворлд Виде Веб. Она постоји као локални датотеке у свему судећи моји корисници дирецтори-- / јхарвард-- за Јохн Харвард-- / десктоп. Али има УРЛ. То се једноставно деси да се локално. На жалост, нико од вас да посетите то, јер ако откуцате ове УРЛ адресе, ти би рекао своје претраживача, Потражите датотеку под називом хелло.хтмл на чврстом диску. И, наравно, ако нисте пратили уз ручно, то неће постојати тамо. 

Дакле, то је у реду. Још увек потребан начин, у крајњој линији, да ову слику у мрежу, али хајде да задиркују, осим неколико безбедносне импликације шта смо видео и повезати га назад у раније дискусија од јутрос. Испоставило се да, ако претраживач буквално ради шта ја кажем да уради, и чини да је случај да је сидро ознака под утицајем вредности ово атрибут зове хреф али приказује ово текст, то би изгледа имплицира да бих могао да УРЛ у оба места, а затим поново и сада виде УРЛ и идите на УРЛ. Обавештење, ако наведите курсор у доњем левом, Ја заиста ћу и даље да диснеи.цом. 

Дакле, ако сте икада били пхисхед-- П-Х-И-С-Х-Е-Д-- са једним од тих лажних е-поште од као ПаиПал Ваше банке, вероватно сте добили линкове у на е-маил који сте прочитали да казује да кликнете овде да се потврди лозинка или потврдити датум рођења или социјалног или нешто друштвено инжењеринг вас да открије информације. Па, могао бих некако узети Предност овог, не могу ја? Могао бих да кажем нешто као, ввв.паипал.цом. И уместо диснеи.цом, ја могли да, као, бадгуи.цом. Релоад. И како је лако је то за дупе, посебно не-технички читач или површно читање читач него да кликнете линк овако, који ако кликнем то-- Ја заправо не желим да идем бадгуи.цом. Ја не знам шта је заправо тамо. Тако паипал.цом, обавештење, је шта она каже да ће се, али наравно, ако погледам доле супер ниска, мало је мутна, али каже бадгуи.цом. То је једини рећи одмах да идем на погрешно место. И када сам раније рекао да банке стварно не би требало да подстакне или воз корисници да кликне на линкове, ово је само једна од манифестација тога. И то је тако једноставно. Сада сте противник ако ви овако нешто и покушати да преваре корисника у посети ваш веб сајт. Али за сада, ми ћемо задржати ствари лепо и чисто. Ми ћемо ићи напред и уназад ове промене. Релоад тхе паге. И ја се вратим у диснеи.цом. 

Да видимо да ли можемо да задиркује ово осим мало више. Тако "здраво, Дизниленд." Ја ћу рећи овде. Можда ћу да направим собу. "Надамо се да ћете уживати боравак!" Саве. Релоад. Није реа-- то није оно што сам намеравао, зар не? Мислим, ако сам лечење мој текст филе као програм за обраду текста, шта сте се надам ће се десити овде? Да, осећам се као да треба да буде пауза линија овде, тако да осећа луд на неки начин. Али то је заправо намерно, јер баш као и раније, бровсер ће само то што ти то кажем. Нисам то рекао да се пробије линије. Нисам то рекао да се креће наниже, чак мада, интуитивно, осећам се као да јесам. Тако испада да је потребно мало више означавање, и ја ћу да поправим ово на следећи начин. Ја ћу први увод ово здраво са оним што се зове став ознака. А онда ћу да наставим и завршити ову другу реченицу у другом ставу ознаци, иако они су супер кратке пасусе. Сада ћу спасити. Релоад. И сада имамо да простор, и некако смо имају семантику два одвојена ст. 

То је све у реду и добро, али било би би лепо да бисте додали слику на овој страници, па ћу да потражим Мики Маус на Гоогле Имагес. И само за забаву, ја сам да узмем ову слику. Ја ћу да идем напред и зграбите УРЛ ове слике, мада је другачије начина за то. За сада, ја ћу да копирате УРЛ. Ја ћу да се вратим у мој текст фајл, а ја ћу рећи овде, имг срц = под знацима навода да УРЛ адреса, супер дуг. А онда је појам слика је мало другачија. стварно нема појма покретања слика и завршава слику, као почетак означили завршни таг. Тако да се осећа мало цудно ми семантички за то, да имају близак-ознаке слике. То није нетачно. То је потпуно у праву, и то је охрабрио, али ту је скраћеница ознаке. Ја могу некако истовремено отварање и затварање исту ознаку, и да ће учинити бровсер срећан. Тако да је само мали више језгровит за ствари да концептуално заиста не смисла за почетак и крај. Они само постоје, или нису. 

Тако да ћу ово да сачувам и вратити мом "Хелло, Ворлд" страницу и релоад. И то је мало ван контроле, јер та слика је у ствари мало велики, али то је у реду. Могу да га смањите у програму. Или знаш шта. Само да се покаже, ја сам да заправо рећи да је ширина те ствари треба бити само 200 пиксела, 200 тачака. Пусти ме напред и сачувати и поново, а сада страница Изгледа мало више разуман. Али приметите образац. Па, ја сам некако научио си све ХТМЛ у извесном смислу, барем концептуално, јер сви ХТМЛ је је ово тагс-- отворене ознаке, затворен ознаке, и атрибуте који мењају своје понашање. И, очигледно, сваки таг може имати нула или један или два или више атрибута, сваки од који ради нешто мало другачије. Сада, како знаш шта постоји? Ви само слушате некога као да ти кажем шта постоји, или само Гоогле около за туториал на ХТМЛ, а заиста је ово једноставно. 

Заиста, када сам био Ундерград пре неколико година и научио ХТМЛ, један од мојих из математике наставе асистенти сам провео мало времена ме подучавао за само пола сата, сат, а онда сам био на путу. Био сам на путу ка одлука највише одвратне сајтови икада, који, очигледно, нисам стварно пређе. Али поента је да, када разуме ове једноставне идејама-- ако волшебни тект-- али то једноставно идеје покретање мисао и затварање мисао, чување све лепо избалансиране, гледа нешто горе, модификовањем Понашање тага, то је стварно све што је потребно. И у ствари, ако сада идемо на нешто као гоогле.цом-- заправо, идемо место мало више разумном-- станфорд.еду. И ја идем на Виев, Девелопер, Погледај Извор. То је ружно, али нотице-- и ја ћу зумирати у обавештењу неке ствари то је већ познато. Ту је ово овде, који је бровсер. Ево долази ХТМЛ5. Има ХТМЛ-а. Изгледа да је атрибут да нисам користе да задаје језик странице, и то може помоћи са аутоматским превод и такве ствари. Овде је глава странице. Овде је наслов Станфорд страници. Ту је ознака нисам говоримо о иет-- Мета таг. То је некако основне информације. Помаже код СЕО, или оптимизација претраживача, или Гоогле претраживача резултата или слично. Али ако настави да тражи, задржати гледајући, ево ознака тела. А ту је и гомиле други ознаке смо нисмо разговарали још о томе. Али Див једна фор а подела странице. То је као невидљиви правоугаоника ако сам хтео само да ментално поделите страницу у различите јединице онлине. И онда много Дивс ја види, нешто што се зове класа, али ћемо се вратити на то. 

Ово је интерестинг-- облици. Облици су свуда по Интернету. Било поље за претраживање си увек користи је облик. И, тако, хајде да ствари видимо. Облик. Акција. Акција овог облика, из било ког историјских разлога, да УРЛ адреса. Метод је "порука." Испоставило се да је ХТТП захтеви могу користити глагол "гет", као што смо раније видели, или "порука." И видећете разлику ово у једном тренутку. Да ствари видимо шта је то. Да се ​​вратим на Станфорд страници. Који облик су они причају о, ти мислиш? Оно што скаче на вас? 

ПУБЛИКА: Поље за претрагу. 

Давид Ј Малан: Да. Дакле, горе у горњем десном углу овде је то Поље за претрагу. И тако они спроводе то-- ознака који је буквално отворено-носач облик. А онда да тражи нешто. Хајде да тражите пријатеља од мине-- "Ницк Парланте." Ентер. И наравно, да је отишао у мало другачије УРЛ адреса. Да се ​​вратим овде. Хајде да тражи "курсеве." Проклетство. Је на различит УРЛ. Дакле, Стенфорд је додао неку магију да ми не узимајући у УРЛ да смо видели у акција атрибута тамо. Али овај облик овде се реализује искључиво путем ове марже овде, ове ознаке. У ствари, овде је улаз за тип претраге које желите. Овде је улаз за други тип претраге. Овде је улаз за саму низ. Па циљ није да закључи наши умови око свих тих ознака али само да видимо. То је само отварање и затварање ознаке и траже ствари. Да? Вицториа? 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: То је добро питање. То је мало компликованије да се види. Дозволите ми да се вратим на то Питање за само неколико минута када погледамо нешто што се зове ЦСС или Цасцадинг Стиле Схеетс, и можемо покушати да закључи колико са странице. Дакле, ако сада погледамо гоогле.цом, Хајде да видимо шта је њихова страна изгледа. Ти би Она су да је слатко данас. ОК. Завршено. У реду, тако Виев Извор. Помислили бисте да Гоогле има лепо изворни код. Дакле, очигледно, шта се овде дешава? И у ствари, то није ни ХТМЛ. То је нешто што се зове Јавасцрипт. И хајде да иде и иде. Ја не знам ни где почиње страница. Ја ћу користити Цомманд П, отворен носач ХТМЛ-а. У реду, то је то. Нашао сам почетак странице, и има много ствари овде. 

Шта се заправо дешава? Па, знате шта, можемо очистити ово. Ако сам уместо тога идем у ово Проверите палета, овај посебан дијагностички алат, и не иди на мрежу, где наставимо данас, али ако одем у Елементс, шта је стварно лепо је да браузер има много много боље очи од мене. И претраживач може прочитати да неред на веб страници, да ХТМЛ-пошта смо погледао, и да може парсе или прочитајте и анализирају и мењање га у лијепом људски-пријатељски начин. Дакле, оно што видим сада у овом екрану овде под Елементс, потпуно исти садржај, али они су увлачи све, они су га цолоризед, али то је потпуно исти текст да ја преузети са сервера. 

А шта је лепо сад је видим у телу, за инстанце-- обавештење, страница је и даље састоји од само глава и тело, и ја хијерархијски могу ронити овде. Приметити да Гоогле изгледа да има да дивс-- овај и овај један. Могу да прошири то. Постоји гомила других Дивс. Тако да је мало комплекс. Али чекај. Ово изгледа много више читљив, релативно, него ово. Зашто је Гоогле непријатно Сама за само слање ово велика збрка код неких врста само да спроведе нешто да изгледа тако једноставно на први поглед? Као, зашто не додати још простора? Зашто нису притисните Ентер као ја? Види како сам добар био у писању веб страницу. Ударио сам Ентер да марљиво. Ја увучен тако све је тако лепа и читљив. Зашто Гоогле не практикују исти? 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: Добро. Веома поштено. Они немају неки Лице на Гоогле-у ручно ажурирање почетну страницу више. Није 1999 више. Дакле, они имају софтвер. Они имају и друге алате генеришу динамички су ХТМЛ. Наравно, да сама шифра је написао људи, али реалност је, сасвим је фер да се каже, бровсер сигурно не занима ме како прљав код је. Али постоји још више убедљив технички разлог да Гоогле дистрибуира своје ХТМЛ Код на такав аљкави, наизглед Огромна начин спаковано заједно са врло мало долази у обзир-- врло мало на путу форматирање као ја. 

ПУБЛИКА: [неразумљиво] 

Давид Ј Малан: Брже? Зашто? И шта си рекао, Лидију? Брже? Зашто брже? ПУБЛИКА: [неразумљиво] Давид Ј Малан: Има нема места за читање. Да. Дакле, размислите о томе шта размак је. Дакле, сваки знак на тастатури потребно одређена количина простора да представља, или физички, лике ит заузима толико простора, или некако се испод хауба, који захтева памћење. И као асиде-- и ми ћемо говорити више о овом сутра-- сваки лик на тастатури обично захтева 8 бита или један бајт. Дакле, образац 8 нула или Они, или само 1 бајт, као и ми Људи се обично каже. Тако да је мали, али ипак је не-нула. Још увек је одређена количина простора. Дакле, ако инжењер или Гоогле хитс размакницу само једном, и претпостављам Гоогле-- то је супер-популар-- Претпоставимо да милијарду људи посетите њихову почетну страницу дневно, или неки број људи посетите хоме паге А милијарду пута дневно, колико додатних бајтова је да софтверски инжењер само коштати Гоогле од удара његово или њено место бар једном? 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: Није баш тако лоше. Само један бите пута милијарде. tako је-- ПУБЛИКА: 8 милијарди гигабајта. Давид Ј Малан: Не 8 милијарди. 8 милијарди бајтова. Али 1 гигабајт. 1 гигабајт би била јединица мере. Ако он или она два простори, 2 гигабајта. Три гигабајта. У праву? То ваге скупо. И тако у случајевима попут Гоогле-а, који, готово, су екстремни случајеви, постоје и друга питања која се јављају само доношењем веома разумна одлука или узимање врло једноставне људске активности, јер има ту Магнифиед ефекат. Дакле, један од разлога ово изгледа тако компримовани је исто као Викторија рекао-- је било само генерише компјутера у сваком случају. Дакле, није велика ствар. Нека претраживач схватити. Али исто тако намерно нема пуно простора, јер простор није неопходно. И простор заправо кошта. 

То ни кошта времена, јер само гурати да много више података од Седиште Гоогле.цом је само има да се одређена количина време, чак и ако је то милисекунди или микросекунди, али то се своди преко многих корисника, или чешће, вероватно кошта. Гоогле вероватно се повезује са неко други у свету, један од оних који вири бодова, а ако имају нека врста финансијске везе при чему су њихови подаци кошта, Могли су и минимизира колико података они пљују се на њихов интернет конекција. 

Дакле, Смешно, ипак, на крају, или можда умирујуће ствар, је да, иако то изгледа ужасно огромна, на крају дана, то је још увек тачне исти принципи као Овај веома једноставан страна овде неког ХТМЛ страна. Дакле, само да резимирамо и тако да има канонски верзију ако нисте били након дуж по избору овде, овде може бити најједноставнији веб страница, тако нешто да се играју са можда касније. 

Па, хајде да уведе пар других идеја сада. Ми смо се да уведе нешто што се зове ознаку стилу. Можемо стилизовати ову страницу у више интересантне начине. Према томе, док ХТМЛ-маил је све о означавање подаци, на неки начин наводећи да претраживач како на структуру података, где да стави то, ЦСС, или Цасцадинг Стиле Схеетс, је други језик који углавном добија помешаних са ХТМЛ као што ћемо видео-- али можемо да почистимо да се у тренутак-- који узима то коначна миља, а то је стилизује. Постаје боје како треба, фонт величина таман, позиционирање само право. То је све о естетици или форматирање, а не о основна подаци сама. И најлакши начин да се покаже ово је можда примером. Тако да ћу да одем у мом једноставне текстуалне датотеке. И за тренутак, ја ћу хода нас кроз процес да се то уради сами. 

Ја ћу да се вратим у мој досије овде и поново страницу само да потврди како то изгледа. То је место где смо у сада. Осећам се као да деца уживају има мало боје на овој веб страници. Тако да ћу ићи горе у главу странице. И ја ћу учинити стил, / стил. А онда унутар тога, ја идем да каже тело моје паге-- а ово форматирање, на први поглед, можда мало чудно, али конвенционално. Ја ћу рећи да позадини боја ове странице треба да буде зелена. И то је, нажалост, некако није најбољи дизајн. Приметити да претходно у свету ХТМЛ, Ја сам рекао да атрибути су ови парови кључ-вредност. Нешто једнако цитат Крај цитата "нешто". У свету ЦСС, који је био десигнед неком од разних људи, одлучили су да, у њиховим ворлд, кључ-вредност парова ће бити реч дебело црево нешто. Тако да је иста идеја, мада. То је удруживање вредност са неким кључ који некако утиче на понашање ове странице. 

И што вероватно можете погодити. Шта је ово вероватно ће да раде чак и ако никад види ХТМЛ и ЦСС раније? ПУБЛИКА: Промените боју позадине. Давид Ј Малан: Да, променити боју позадине. И конкретно боја позадине тела. Али утолико што орган за сада је веб паге-- то је једина ствар Испод наслова бар стварно-- вероватно је да ће утичу на исту ствар. Па да видимо. Оставимо то. Иди овде и релоад. То је прилично одвратно. А шта се дешава Овде је нуспојава. Ја сам изабрао ову слику случајно. Зашто је зелено не прожима иза Мики? ПУБЛИКА: [неразумљиво] Давид Ј Малан: Управо тако. Испоставило се да су слике, прилично много све слике које бисмо могли користити, су сви рецтанглес-- од правоугаоника. Чак и ако Мики има неке криве за себе и има позадину, да позадина мора да буде нешто. То мора да буде бела. То мора бити црн или нешто друго. То може бити транспарентан. И, у ствари, да могу отвори Мицкеи Моусе овде у програму под називом Пхотосхоп или нешто слично и променити све те беле Позадина транспарентна, тако да је зелени би видело. Али то је нешто што би требало да питам себе или графичар или дизајнер на мој компанија, на пример, да уради, поготово јер сам само позајмио ово са интернета. Али то је зашто се ово дешава. 

Дакле, шта још може да желимо да урадимо? Па, могли бисмо да ми кажемо Стварно се надам да ћете уживати боравак. И за истицање, хоћу да ово јак, па ћу рећи отворено јак и затварање јака и затим поново. И то је мало тешко да се види на пројектор али можда баш сада скаче на вас мало више. Тако да можете додати курзив у ово начин, храбар облога на овај начин. Могли би да промените боју. У ствари, само из зезања, ја сам отићи напред и уради то. Ја стварно не волим како мој параграфи су тако близу заједно, тако да може да уради овако нешто. Ја ћу рећи бровсер, мењају сваки став ознаку да, хајде да заправо говоре--, знаш шта, Хајде да алигн то тект-алигн, центар. И опет, знам да је ово само јер га је неко научио да ми или сам погледао у онлине референца. Дакле, дозволите ми да спаси ово. И, ах, сад сам центрирана слику тамо. И заиста, знате шта, ако Прелазим мој лик у ставу таг-- па трећи пасус, иако није текст. Оставимо то и поново. Сада је страница почиње да изгледа од-- Мислим, то је још увек прилично ружно, али барем изгледа да сам провео два минута уместо један минут што га. 

И тако, постепено, можемо направити ове естетске промене сада на страници? Ја сам стварно променио податке у страна осим додајући реч заиста. Додао сам метаподатке, ако хоћете. Хеј, претраживач, чине Реч "стварно" храбар. Али подаци нису јаки. То је метаподатака. Податак је "стварно." Дакле, још увек имамо неке од исти концепти као и раније. Сада, наравно, то није на Интернету, па ћу да урадим један завршни корак овде. 

Ја идем у хелло.хтмл и само истаћи и копирати ово. А сада ћу иду у Цлоуд9, који Ја ћу вас провести кроз који тренутак. И шансе су ускоро ће бити, ако већ није, на екрану овако. И дозволите ми да вам брзо Обилазак што Цлоуд9 заправо. Дакле, опет Цлоуд 9 је овај облак-басед сервице да ти и ја даје илузију да имају своју виртуелну машину у облаку, технички контејнер у облаку, да имамо пуну административне привилегије то. Дакле, у теорији, нико другде у свету има приступ екрану сам гледајући сада, осим можда људи који воде сајт, јер технички имају физички приступ и тако даље. 

Дакле, шта видимо у овом окружењу? Идем да бисте умањили, јер је мало мали. И дозволите ми да преко овде на тренутак. На левој страни мог и вашег екран, ту је фајл браузер на левој страни. Тако слични по духу на Мац ОС и Виндовс. То су све од датотеке у мом рачуну. И по дефаулту, ако ваш рачун је као моја, видећете или ускоро хелловорлд.хтмл и реадме.мд. Овамо са десне стране, ово је где су моји текстуалне датотеке отићи. Ако сте икада користили Мицрософт Реч или Нотепад или ТектЕдит, ово је реч моја уређивање фајлова ће ићи. А онда највише волшебни одлика ове средине да нећемо стварно треба да користимо је овде се зове прозор терминала. Ако сте користили ДОС из прошла година, ово је Линук или Линук еквивалент ДОС. То је интерфаце-- текстуалних кликова мишем, не вуче. Све што можете да урадите је да унесете команде, али те команде може створити датотеке, померање фајлова, отворен именици, блиски именици, до било који број ствари. Али за сада, ми ћемо само трошимо време овде. 

Па хајде да урадимо то. Ако сте у ово окружење, које би требало бити ако сте креирали радни простор већ, само напред и само иди на Филе, Нев за тренутак. И да ће вам дати нови Картица овде у средини. И ја само и немојмо само напред и уради то. Идемо напред и сада не Филе, Саве и напред и зову га хелло.хтмл, не треба мешати са хелловорлд.хтмл, који дошао са својим новим бесплатан налог, што је само узорак датотеке. Видећете да је изненада појави, највероватније на левој страни, и картица ће и даље бити отворен. И дозволите ми да вам и сада да се поново ову слику или неки њихови варијанте. А ако не можеш баш да видимо на екран, то је идентична слајдовима да вероватно имате у другој картици. 

Дакле укратко, да своју прву веб страницу, саве то, а онда за тренутак, Ја ћу вам показати како може заправо видели ове. Али променити барем једну ствар. Цханге ХеллоВорлд на нешто по сопственом избору, тако да сте уверени да је ваш филе, а не онај сам створио. У реду. И кад реади-- не русх-- када сте спремни, само напред и сачувајте датотеку кад сте направили ове промене. И ако кликнете на Рун дугме на врху, ово би требало да отвори нову картицу која ће рећи Ви који УРЛ можете посетити датотеке у, али то може узети тренутак за под знацима навода "старт Апацхе," који је име веб сервера. Зато будите пажљиви да тачно до шта је у датотеци на крају. Тако да сада, ја ћу увећали. Ако почнем да куцате отворена-носач ХТМЛ обавештење то ме је навело да завршим мисао. И ако сам завршио своју мисао је, аутоматски ми даје завршну ознаку. Али је очекивање онда ћу ударити Ентер, а затим прећи унутра и да главу унутра и онда ја тело унутра. И то је мало чудно у почетку, јер ради посао за вас, али схватите да на крају То вам штеди типке. И, у ствари, веома заједничка карактеристика програмирање окружења ових дана како за веб развој као ово и стварни програмирање, који ћемо говорити о сутра, је ова ауто-комплетан функције, ствари које само дозвољавају програмер или дизајнер да куцате мање типке на постићи исту ствар. Понекад је добро. Понекад ме иритира. И, опет, кад сте транскрибује слајд или неки варијанта, можете да кликнете на дугме Рун горе. А затим у дну прозор, бићете обавештени на коју УРЛ адресу можете да посетите веб страницу. Мине, на пример, је у бусинесс-дахарвард.ц9усерс.ио и тако даље. У реду, па, ми реци-- било каквих питања? Неких питања у вези постаје све ово ради пре него што додамо функције? И дозволите ми да предложи, само да се људи цомфортабле-- јер једна је ствар само цопи-пасте слепо оно што сам урадио. Али само да људи рвати са најмање једним до-до, Ја ћу да пређем на неку музику. Ја ћу предложити листу ствари које потенцијално може да додате. А сигурно да користите Гоогле. А зашто не бисмо само Предлажем да покушате да решите најмање један посебан проблем. Дакле, у погледу ознака, дозволите ми да поновно ово овде. 

У ствари, ево да она у облику текста. Рецимо да је међу тагова бисмо могли користе овде су неки ознаке овде. Видели смо став ознаку. Сада ће ауто-комплетан. Став ознака, сидро ознака. Рецимо да желите да направити нешто већи, тако да би као-- распон ознака може да помогне. Па, можда требати помоћ за само који тренутак. Видели смо див. Видећете да је сто. Постоји нешто што се зове тр, тд. Тх, тд. Вратити на то у тренутку. Шта друго може да буде при руци? Постоји јак. Ту је нагласак, односно их. Је-- шта друго Можда пожелите овде? Па, Узећемо погледај заједно. Облик, који смо видели. Има облик. Постоји улаз и неколико других. У реду, хајде да урадимо то. За одговарање на Викторија је питање, пусти ме први само пазите да сви у стању да добију хелло рад. Онда дозволите да се представим пар друге идеје. Онда ћемо пустити људи решити неки проблем сами. Онда ћемо заиста вратити на тај појам форме, и ми ћемо заправо поново имплементирати заједно фронт-енд интерфејс, да тако кажем, за сам Гоогле. Ми ћемо користити Гоогле као задњем крају и пустити им раде тежак посао, претраживање, али ми ћемо поново предњи крај Гоогле и форме за претрагу да они имају на својој почетној страници. Па ћемо се вратити на Ове ознаке у само тренутак. 

Дакле, то је оно што сам предложио пре неколико тренутака. Можемо додати и стилизацију до А страна унутар овог стила таг, и можемо стилизовати позадину боја, усклађивање текста, да ли је то центар или лево или десно. Али врло брзо ти би наћи или веб дизајнер ће наћи да је ово постаје мало незграпна, јер радиш оно што је под називом садржај мешање са презентацијом истих. Мешате своје податке и естетика него. И у ствари, ако узмете у обзир шта ће се десити преко једном-- ово је веома мали веб страница, наравно. Али ако додам садржај ове странице и да додам стил на овој страници, страница врло брзо постаје дуже и дуже и дуже. И претпоставимо да желим имају другу веб страницу која дели неке од ових атрибута. Претпоставимо да моју другу веб страницу за мој сите-- Такође, желим све што центар, и ја исто желим све са зеленом позадином. Ја углавном морати да копирате неки од ових линија у овом другом фајлу, који осећа добро. То ће решити проблем. 

Али шта ако хоћу трећу страну или 30. страна или 40. страна? Сада ћу да се копира и лијепити доста дупликата кода у више фајлова. И тако претпостављам да Ја одлучујем или Речено ми је да, хеј, ми не користећи зелена позадина више. Ми ћемо да почнете да користите наранџасто. Шта имате да промените? Па, морате да промените тај стил од зелене у наранџасту за колико места? Као 30 или 40 места. То је досадан. То је склон грешкама. Постоји више разлога где не би желео да изазове та врста бола за себе. Па не би било лепо ако бисмо могли узети оно што сам пут између ова два жута ознаке, ове ознаке, фактор га, и стави све моје стилизација у један централни фајл да свих 30 или 40 мојих осталих списа позајмити од или некако референце, не за разлику од умрежавање дијаграми смо радили раније? 

Дакле, ако одем у ту, ја сам да стварно предложи да ми замени стил ознака са нечим назива веза ознака, који је ужасно, ужасно назван, јер не користите Линк ознака да створи шта ми људи знају као линк у веб страници. За то, користите што ознака? Како се креира везу на веб страници? ПУБЛИКА: Тхе А. Давид Ј Малан: Тхе А, или сидро ознака, који је отишао у Диснеи пре. Линк ознака овде говори ово-- линк до датотеке под називом стилес.цсс, однос према коме ће бити да је то моја стилова. Тако да је ово једна од С-их година у ЦСС-- Цасцадинг Стиле Схеетс. Стил схеет-- два С-их година у ЦСС. Каскадно стила. То само значи, хеј, браузер, иди пронађу стилес.цсс на локалном серверу и користити га као стилова, што значи да унутар тог фајла ће бити од стлизације да смо управо урадили. И шта тај фајл може изгледати као да је ово. И ја ћу учинити ово је брз пример, јер нам не треба да се превише у коров овде. Али ако копирате ово, шта сам предлаже је да је програмер креира нову датотеку, пасте у тим линес-- вхоопс-- пасте у тим линијама, сачувајте га као стилес.цсс, а затим, у други фајл, избрисати све то и замените га уместо тога са овом линку таг. Тако да ако линк хреф = "стилес.цсс", однос ће бити "стилесхеет" близу ознака. Сачувај то. Да се ​​вратим свом ХеллоВорлд. Релоад. 

Буквално ништа није десило. То је добра ствар, јер њега значи да је заправо све ради. Да би доказао колико, предпостављам да направи куцању, а ја зовем "стилес.цсс" са великим С, који је нетачна, а затим поново. Сада можете да видите да једноставно не ради. Е сад, зашто? Па, хајде да користи техника од раније. Пусти ме само напред и, у мој бровсер, у Цхроме-у, ја сам ће отворити да се посебна мрежа картица као и раније, и пусти ме да обнови страницу. Оно што се не чуди да видите? Или можда сте изненађени што га виде. У сваком случају, шта сада? ПУБЛИКА: [неразумљиво] Давид Ј Малан: То није пронађен. Зашто се то није пронађена? Па, Стилес.цсс-- капитал Успела-- не постоји. Ја га миснамед. Једноставно грешка. Али ја се разумљиво сада 404, јер сервер каже, хеј, није пронађен. Буквално, не знам где тај документ је. Дакле, као резултат тога, претраживача показује вам оно што може, сирова садржај странице, који је био 200, ХТМЛ, али стилизација не могу бити након тога додат. И то је оно што се подразумева под каскадно. Ти си некако да га додати после, а некако оплемењује естетику веб страници. А чак можете заменити оне Стилови са неким другим стилова датотеке ако желиш. То није пронађен, међутим, у овом случају, јер наравно, то миснамед сам. Тако да би требало да поправи онај први. 

Дакле, идемо напред и предлаже следеће. Идемо напред и уради то. Почевши од можда ваш ХеллоВорлд фајл, само да позове пар од имају предлоге. Дакле, Викторија, желео да да неки текст већи, зар не? У реду, тако да можемо да би текст већи. А ми ћемо сваки извади ван само један проблем да реши. Направи текст већи. Нећу да сметам ово писао када смо имају буллет технологију овамо. Тако неки проблеми. Па ћемо покушати да текст већи. У реду. Шта би друго неко запросио? Шта још може да желимо да раде у веб странице? Хајде да смисли кратак списак ствари и онда пренијети на група да то схватим. 

ПУБЛИКА: [неразумљиво] 

Давид Ј Малан: У реду, позиција текст на различитим странама странице? У реду. Нешто друго. 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: То је. Дакле, ГИФ је само другачији формат. Некада смо, колико, ПНГ или ЈПГ вероватно? Користили смо јпг. Ако сте радознали, прекомерна одговор на ваше питање ис а јпг се генерално користи за фотографије, јер подржава милиони боја или 24-битне боје. ГИФ се обично користи за, као, Интернет Мим ове даис-- анимације, као анимирани ГИФ. Али то се дешава да се користи мањи боју палета, само 256 могућих боја, али подржава транспарентност и анимација. А ту је ПНГ, који подржава транспарентност и више боја али не анимација. Тако да је компромис. Дакле, додајући гиф, ипак, ће бити функционално еквивалентно додавање ПНГ или јпг. Да. извор слика једнако. Тако нешто друго. Хајде да смислимо нешто што послали смо у Викторију да радим овде. 

ПУБЛИКА: Додај дугме за облик. Давид Ј Малан: У реду. Па додати дугмад за форму. И ми ћемо то урадити једну заједно. Тако да ће бити савршен Сегуе одмах након овог изазова. Још нешто? Шта би желите да учините? Веб осећа веома ундервхелминг ако је ово све што можемо да урадимо. ПУБЛИКА: Промените боју текста. Давид Ј Малан: Промена шта? ПУБЛИКА: Боја текста. Давид Ј Малан: Промена боје текста. У реду. Дакле, хајде да урадимо то. Само једном, тако да ти не, само по сећању, ради управо оно што ја радим, Ја ћу да укључите музику за неких пет минута овде. Добродошли сте да користите Гоогле. Добродошли сте да ме питате, и Ја ћу шапутати наговештај у ухо. Добродошли сте да погледате у на другим рамена. Али решити само један од ових проблема. Али ми ћемо учинити последњи, у формира један, ако можемо, заједно. Дакле, пет минута да реши сваки од ових проблема коришћењем Гоогле, интуиције, или било који друга средства на располагању. 

[Мусиц плаиинг] У реду. Без бриге, ако желите да би петљао, али ћу покварити пар од ових одговора. Дакле, први предлог из Вицториа је био да се текст већи. Дакле, постоји неколико начина да се то уради. Ја тренутно сам обновљена мој екран на ове величине, иако сам зумира вештачки само да видим ствари. И урадимо то. Пусти ме напред и зграби неки општи латински текст тако имамо нешто за рад. Па дај ми само један тренутак. Ја ћу направити три пасуса. ОК. Ово ће бити бољи пример. Дакле, за радознала, у мој хелло.хтмл, само налепљен три бесмислен латин ст тако да имамо неки текст за рад. И циљ је био да Вицториа да неке текста веће. Тако да сам могао, као и раније, идите овде. И пусти ме то на прави начин. Ја ћу имати везу ознака која указује на датотеку под називом "стилес.цсс," однос од којих је опет "стилова." А онда ћу да спасе и отвори ту "стилес.цсс." 

Дакле, као и раније, ја имам способност у овом ЦСС фајлу да стварно променити уобичајену естетика веб странице, и дефаулт естетика, наравно, прилично досадно. То је врста нормалне величине фонта, црна текст, бела позадина, и тако даље. Претпостављам да желите да се сви овог текста већи. Могао бих пар ствари. У мом стилес.цсс фајлу, ја Могло би се рећи, знаш шта, применити следеће у Тело моје стране. Само напред и чине величина 24 поена, што је број Можда користе у Мицрософт Ворд. Пусти ме да се вратим свом веб страна овде и релоад, а види се да већ је много већи. И можемо бити мало луд, баш као што можемо на десктоп-- да је 96 бодова. Релоад. И то постаје мало незграпан у овом тренутку. 

Али да могу да будем мало прецизнији. Уместо примене овог стиловима у тело моје стране, шта још могу ли га применити уместо тога, шта друго ознака која би могла још Функција на исти начин? 

ПУБЛИКА Тхе стр ознака? Давид Ј Малан: Д ознака. Тако да глава не би било исправан, јер главе, Ви заправо не може контролише естетику. Ту је било текстуалне тамо или не. Али с таг-- могу ронити у мало дубље, да тако кажем, са ставом ознаке. И иако постоје три, То је сасвим у реду, јер у ЦСС, кад сам само рећи "п" ово значи применити следеће на било који таг који одговара ово селектор, селектор само је име ознаке. Дакле, где год да видите "П" применити величину фонта, па да чине више разуман Поново: 24 поен. И знаш шта, само за сваки случај, хајде да боју црвена само за тренутак. И сада, ако ја поново, сада види три ружне ставове. 

Али сада претпоставимо да сам врста од-- Желим први пасус да искочи на корисника. Не желим да се повећа величина фонта свега. Па ја заправо желим да идентификују или разлику међу овим ставовима. Дакле, хајде да се ослободи од црвене, јер то је само мало лепљив, и идемо напред и чине величина слова 12 тачака подразумевано, тако да смо се вратили на нешто мало више разуман. И сада само желим да се повећа фонт сизе првог става. Могу ја то у неколико начине, али један од начина да се можда највише наставни На моменат је да урадите следеће. Пусти ме напред и рећи, ово став има јединствену ИД за "први". Могла бих да позовем ову шта желим. Могао бих ово назвао "фоо" или неку другу реч, али ћу му дати мало семантички смисао име као "први". Ово је јединствени идентификатор, лична, за мој први став. 

Оно што сада могу да радим у стилова је бити мало прецизнији. Уместо да се каже, важе следеће на п таг, Могу да кажем фолловинг-- применити следеће, или изаберите, ХТМЛ елемент који има јединствену ИД за "први". Оно што желим да се пријаве на то? Величине фонта 24 тачке. Тако да имам два селекторе сада. Један чини све од параграфи 12 тачака. Али овај, посебно јер се ради секунду-- је у питању последњи у филе-- ово има ефекат каскадни. Управо сам направио све моје пасуса 12-поинт, али ово сада каскаде и поништава да за било елемената на страници, свака ознака на страници чији јединствени ИД је под знацима навода "први". А хаштагот у том контексту само значи "јединствени идентификатор." Не стављати у ХТМЛ датотеку. Ја, овде, само реци под знацима навода "први". 

Па пусти ме поново. И сада видим, ах, у реду. Мислим, није то лепо, али некако Као предговору књига или нешто слично, где је први пасус је већи. Могао бити још прецизнији са само прва слова, али бар Ја сам вршио већу контролу. Сада маибе-- можда желим да урадим повремено из било ког разлога, па ја не желим то да примењују се само један ХТМЛ таг. Уместо тога, хајде да прицала- хајдемо Такође урадите следеће. Цласс = "увоз." Док се ИД користи за јединствено идентификују једну ствар, једну ознаку, у својој веб страници, класа треба да буде користити на било ком броју елемената или ознакама на својој веб страници. Тако да је за вишекратну употребу. Лична није поново употребљив. Класа је погодан за рециклажу. 

И знаш шта, за шта год филозофски реасонс-- Нисам завршио мој мислила сам ћу рећи да први став и Други став су важни. Зато ћу применити на класу "Важно" да, ако спасим слику и поново, нема функционалан утицај још. Али сам додао неке метаподатака датотеке, некако нешто одвојено од основних података датотеке, тако да сада у мом стилова, ако И уместо тога кажу ".импортант" - знате, све што је важно, ја сам да би боју слова, ред-- односно не фонт-боју, само боју. Има недоследности у ЦСС нажалост. И релоад. Сада приметите прва два пасуса су црвене али не и трећи, јер ја само примењена класа "важно" на прва два од тих ствари. 

Тако да у личним картама, имате могућност одредити веома прецизно. Класама, имате могућности поновног коришћења. Међутим, у оба случаја, приметити да врста принципа добре-дизајн где сам фактор од све од естетика то ми стилес.цсс фајл. Значи, нема збрци овде. Нема помена о црвеном или Болд-облога или величину текста у овом фајлу. Радије сам семантички имам, смислено карактерише моје податке као, Овде је неколико важних података. Овде је неки важнији подаци. Осим тога, ту је "Први" од мојих важних података. Дакле, ХТМЛ је све о врста од означавање, буквално, речи и ставови и конструкције у ваш страница са овим малим саветима, ако вас ће, да можете некако искористити користећи друге технике као што су ЦСС на овај начин. 

Дакле, у одговору на питање Вицториа, можемо направити текст већи на тај начин. Постоји толико много других начина, али фонт таг-- отворен носач "тект" - је заправо неколико година. И то је проблем, такође, са ослањајући се само на онлајн ресоурцес-- они имају тенденцију да буду застарели. И заиста, која је била застарела, јер је свет схватио, Шта значи "фонт-фамили = 7" значи? То не зна. И тако дуги низ година и да ова даи-- један од стране наводи овде је да је заправо невероватно болно и даље понекад да развију места за Веб, јер Мицрософт и Гоогле и Мозилла и други често не слажу како тумачити спецификацију као ХТМЛ. 

Постоји правилник за ХТМЛ то генерално каже шта свака ознака значи. Али понекад је остало до дискреција имплементација је, Мицрософт дискреција и Гоогле. И тако да ћу врло често види на сајту нешто изгледа другачије на ПЦ него ради на Мац, и то је заиста јер, на крају дана, нису га тестирамо и на обе платформе. Али исто тако је зато разумно, паметни људи неће сложити са мном и компаније неће сложити са мном, и тако један од изазова програмирања за веб или пројектовање ствари за веб пише веб-сајт на неки начин који ради на сваком веб бровсер. Али чак и да је неразумно, зар не? Постоји толико много верзија толико браузери тамо да, у неком тренутку, имате и да пресуду позив и морате одлучити као компанија, посебно за е-цоммерце стилу места где си покушавајући да користе најновије и најбоље технологије да би стварно добар корисника искуство. Међутим, неки проценат од ваших корисници могу још увек користе Интернет Екплорер 6 или 7 или 8, а посебно у зависности од земља која долазе из. 

И тако врло често консултовани је нешто као "статистика веб бровсер." И ако идемо да-- да видимо Википедиа и видети како горе-то-дате ово графикон ако постоји. Дакле, овде можете видети где претраживачи заправо су, према децембра 2015. године, према Владе САД. Цхроме је на 42% тржишног удела, затим од ИЕ углавном у корпоративним подешавањима или подешавања ПЦ, наравно, затим Фирефок, онда Фирефок, онда опера није направити мапу овде из неког разлога, и од других. Можда је под осталих. Али више проблематичан од тога је-- Хајде да видимо да ли Википедија има верзије претраживача версион-- 

Идемо у статистици претраживача. ИЕ. Ни то није довољно. Бровсер статистика. Моја верзија. То неће бити у праву. Да видимо верзије. Бровсер удео на тржишту. Да видимо да ли ово појави. ОК. Сада ово постаје мало користан. Дакле, овде, приметио да сви имамо различите верзије претраживача. И, боже, ако изгледаш-- Цхроме 48, хром 47, Хром 31 Цхроме 45. Мислим, претраживачи све ажуриран, и понекад неке од тих промена су значајне у Услови функционалности. И тако у једном тренутку, производа менаџери или инжењери треба да се направи децисион-- ти Знаш шта, само 1% света још увек користи ИЕ 7. У пакао са њима. Ми једноставно неће подржава тај бровсер. И шта то значи да не подржава? То би могло да значи да дугмад не раде на својој веб страници, или можда значе форматирање је потпуно искључен. Или можда морати да тај исти суд позива у мобилним ових дана, где, ми смо неће више да подржи иОС 5. Тако да људи једноставно морају да надограде. Или нећемо подржати Цупцаке на Андроид ОС за Андроид уређаје, јер као ворлд-- као Тецх Ворлд жели да иде напред, некако жели да превуците свет са њим, тако да они не морају да наставе да буду компатибилна тако да може да понуди нове и добре особине. Ово је заиста један од разлога зашто тако многе компаније су избацујемо аутоматско ажурирање и некако тера најновије верзије софтвера на нас. Па чак и компаније као Аппле ће те некако присилити вас скоро или присилити Ви у погледу тржишне снаге купити нови телефон јер само неће више ажурирати стари телефон. Тако да пропустите на најновији и највећи функције, јер је скупо да их као компанија за одржавање старији, вероватно инфериорни верзије софтвера. Али је нето ефекат је да такође трпе и ово. 

Дакле, хајде да погледамо само неколико коначних ствари овде. Хајде да склепати врло брзо неке од те друге меци, ако радознао. Дакле, ако сте покушавали да, на пример, положај текст на различитим странама страница, ја ћу да урадим један брз начин, али има другачији начини да се то уради. Пусти ме напред и елиминате-- поједноставити на следећи начин. Дозволите ми да се вратим у мој једноставни, прости ставови. Да се ​​вратим на мој стилес.цсс. И Ја ћу користити симпле-- који сте можда видели на Гоогле-у или га позовите из еарлиер-- текст-алигн у праву. И релоад тхис паге. Сада све делује да је десно поравнат, као што можете да видите на графоскоп овде. 

Можемо да изгледа мало више наручити налик, и можемо рећи "оправдати" и релоад. Сада је лепо и квадрат на оба стране, што је лепо. Још један циљ који смо имали овде је промена боје текста. Па видели смо да са својим црвеним текстом. И сада додати дугмад за форму. Па зашто не би пробали да ураде управо то? Али прво пусти ме на сајту који већина нас користи сваки даи-- Гоогле. И хајде да погледамо како Гоогле заправо ради. Али ја ћу учинити ово. Прво пусти мене у-- Да, Пусти ме да Гоогле. Ја ћу морати да иде у Гоогле подешавањима, јер желим да искључите нешто што се зове инстант резултати. 

Тако да можда приметили у Гоогле то даис-- пусти ме да се вратим и укључите ово. Па ако започели претрагу за "цатс" као што је ова, приметити да не само да Да добијем ауто заврши до врх, одједном, сама страница Изгледа да прилично брзо мењају, као, и да је Гоогле коришћењем језика позвао Јавасцрипт покушава да буде од помоћи. Али, нажалост, некако од поремети наше дискусију о томе шта се заиста дешава испод хаубе овде. Тако да сам некако брзо искључите инстант резултате. И ја ћу да кликнете Саве. А сада ћу да отворим да дијагностичка трака са алаткама да држати отвор на картици Нетворк. Хајде да урадимо ово. Пусти ме-- вхоопс-- идите ово доле мало. И пусти ме тражи "мачке." 

И сада нотице-- заправо, ово је добра прилика да разговарају на тренутак. Обратите пажњу на тренутак сам типе-- га заустави. Престани. ОК. Обратите пажњу на тренутак сам тип писмо Ц гледају дно екрана. А-Т С Шта дно овог екрана, моја мрежа картица, Предлажем се дешава сваки време сам тип писмо? На жалост, жаба је врло збуњујући данас или детелина или шта год да је. Шта се дешавало сваки пут кад откуцана? И пусти ме јасно да тај тампон и укуцајте је поново. Дакле-- упс. Сваки пут када притиснете слово, Ц-А-Т-- па нови ред очигледно настави да се приказује. Шта свака од ових редова представљају, на основу онога што смо видели и разговарали до сада? ПУБЛИКА: Претрес? Давид Ј Малан: Претрес, или више генерички, ХТТП захтев из мог претраживача на серверу. Па, зашто је мој бровсер што ХТТП тражити сваки пут када ја типкам писмо? 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: Да, то је давање ми ове ауто-комплетан резултата. Као, где се и ови Резултати претраге долазе? Па, сваки пут кад укуцате писмо, Гоогле пошаље више и све више и више Реч куцам. Зашто? Јер они желе да ми дају све боље и боље, боље предлог, списак предлога, за шта реч Покушавам да заиста потпун. Дакле, ово значи да буквално сваки карактер куцате у Гоогле се шаље, на крају у булк, али понекад оне у једном тренутку у циљу спровођења ови ауто-комплетан функције када подаци су, наравно, на Интернету. 

Сада, хајде да погледамо шта је заправо се дешава када кликнем Гоогле претрага. А онда ћемо искористити ово сами. Дакле, ако сам спустите сада у веома Први захтев који се управо догодило. Обратите пажњу на следеће. Упућено је прилично дуго УРЛ-- хттпс://ввв.гоогле.цом/сеарцх? а онда гомила ствари. Да стварно видим ово сада на картици претраживача саме. Хајде да се реши алаткама овде. Овде је страница резултата претраге. И обавештење овде је УРЛ адреса. Сада, што вероватно можете погодити шта се овде дешава у делу. Пре свега, дефиниција. Ово је очигледно дестинација где се образац. Дакле, када сам откуцао у речи "цатс" и хит Ентер, очигледно Гоогле је послао мој унос текста на овај УРЛ да сам истакао тамо, сласх претрагу. Испоставило се да, у УРЛ, било шта што се дешава после упитник је, као што смо стално говорим, кључни вредност пар који је откуцан у образац или некако преноси из претраживач на сервер. 

Дакле, сваки пут када Инпут у облику на веб и то је послата као што смо расправљали, преко гет, један од ових виртуал коверте, садржај од тога енвелопе-- да, задржати геттинг пуњена физички у коверти у класи данас, али технолошки то је заправо ставити у УРЛ. Дакле, у ствари, дозволите ми претура кроз ово. Где ви видите упутство за улаз? Где ви видите нешто да сам ја куцао овде? Да, тако "мачке." У праву? Дакле, да ми дестилирати ово у нешто једноставније. Ја ћу избрисати све у вези ово УРЛ који ја не разумем, и ја ћу само да одем она као ово-- / сеарцх? к = мачке. Видећемо где к долази из у тренутку, али да се осећа као минимум Количина информација које сам дао. А сада ћу да ударим Ентер. И приметити да и даље ради. Још увек се вратимо гомилу мачака. Дакле, Гоогле је одгајивач од овога ових дана. То је 2016, а не 1999. Тако да је остало, што ми претраживач шаље на сервер. Али ово је минимално све што је потребно. 

Дакле, шта се дешава? Па, прво пусти ме напред и го назад на Цлоуд9 и пусти ме само напред и затворим картице раније. И ја ћу то урадити на мој овн само за тренутак. Ја идем напред и створити нову датотеку. И ја ћу га спремити као гоогле.хтмл. И ја ћу врло куицкли-- Ја ћу да украдем, заправо, неки од овог текста да би уштедели време. Ја ћу да налепите ово овде. Нећу да сметам са било стилизација овај пут. Ми ћемо назвати "Ми Гоогле." И ја ћу да се отарасим свега у телу. И ја ћу да урадите следеће. Пусти ме увећање. Облик ацтион-- и као што сам поменуо еарлиер-- вхоопс-- као што сам укратко што је раније поменуто, дејства образац је место где послати податке на. Тако гоогле.цом/сеарцх. И метод желим да користим може бити један од две ствари. Може бити или "гет", како држимо расправља, или може бити "пост." За сада, основни Разлика је у томе, ако користите "гет" све је информацију да је Корисник обезбеђује шаљу у УРЛ. 

То је одлично за ствари као што су претрага мотори и неколико других апликација, али у каквим околностима би Ви не желите да попуните формулар и да информације завршити на УРЛ адреса, као у адресно поље читача? Какав облика до ти-- ПУБЛИКА: [неразумљиво] Давид Ј Малан: Да, као шта? ПУБЛИКА: Лозинке. Давид Ј Малан: Да, тако се улогујете на Фацебоок или неком сајту. То је корисник улаз из облик, текст кутија, али вероватно не желе појављују у УРЛ претраживача. Зашто? Мислим, можда постоји неки безбедносне импликације на мрежи, али море-- воле, више једноставно, шта ако цимер, ваше друге значајне, Ваша деца, ваш супружник изгледа кроз историју прегледача? Постоји лозинка праву тамо у историји вашег претраживача. То не изгледа као добар дизајн. Или чак и више технички, Претпостављам да покушаваш да поставите фотографију на Флицкр или Фацебоок или вхеревер-- да је корисник улаз, иако то је мало више интерестинг-- како да угура неку слику у УРЛ траци? Некако некако не могу. Некако могу. Али, стварно, ја сам под великим притиском замислити то ради. Па ми треба још један начин за постављање фотографија на сајту, и да други метод се зове "порука." Али за сада, само ћемо говорити о "Гет", који је једноставнији од та два. Управо ставља све корисник улаз у УРЛ. 

Дакле, ово је облик Ја правим. Желим улаз. И знаш шта? Ја ћу да претпоставите овде. Ја ћу да се сетим мој улаз "К" за "упит." И мислим да је ово један од оригинални дизајн, можда, из 1999. године. И онда тип овог улаза тек ће бити "текст." А онда ћу имати још један улаз да не треба име, као што ћемо ускоро види, тип који је "поднети." А ово ће дај ми посебан тастер. И то је то. 

Па пусти ме само напред и сачувајте ову датотеку. Ја ћу да се вратим у мој прегледач и идите на гоогле.хтмл. Ентер. И то је некако ретка у најмању руку. Али пусти ме напред и потражите "мачке." И приметио сам тренутно у овом Цлоуд9 УРЛ. Али оног тренутка када кликнем ово, где се надате да ћу завршити? 

ПУБЛИКА Гоогле. 

Давид Ј Малан Гоогле. Дакле, да кликнете на Пошаљи. И заиста сам поново спроводи Гоогле. У праву? То је једноставније. То је лакши. Мислим, мој код је јасно бољи од њихов, од нереда смо видели раније. И знаш шта? Ја ћу зачинити ово мало. Ја нисам поменуо раније. Постоје ознаке као што Х1, уз тарифни број 1, најважнија одредница у странице. "Моја Гоогле," Ја ћу назвати ово. Пусти ме релоад. Изгледа већ мало боље. И, у ствари, знаш шта? Ја сам алреади-- сам лагала. Рекао сам да неће стил ово, али ћу стил ово као раније. И моје тело ће бити, рецимо, фонт-сизе центар. Изгледа већ више као што је Гоогле. 

Треба ми нови ред, ипак, за то Субмит дугме. И испоставило се да, ви могу да користе ставове, или можете више буквално само да кажем, дај ми линију пауза овдје-- Бр таг. А ако поново ово, сада оде. Мало је ружно, па сам могао више редова, али немојмо се превише похлепни овде. Дакле, сада да видимо да ли ради за "псе." Чини се да ради за "пси", као и. Дакле, шта је убедљив понети овде? Један-- није био велики скок у увести још неколико ознака, као ознаке форме у улазном таг. Али, важније је, све што радимо је усклађивање нашег разумевања ХТТП и чињенице који се формира на крају мења шта је у УРЛ претраживача, и тако, стога, можемо механички дају свој допринос на сервер тако што ХТМЛ форму и знања да сервер разуме ХТТП, баш као наше тело схвата, као, тресе рукама, тај исти протокол, и тако се вратимо на одговор да смо на крају очекујемо. 

Дакле, хајде да покушамо да урадимо један Последња ствар коју сада са мобилног, и ја ћу маке-- ћу додати ово код на слајдовима. Дакле, ако желите да Тинкер, те свакако може узети одатле. Али ја идем напред и уради једну ствар. Ја идем напред и отворим индекс паге-- мој здраво страна као и раније, што има доста овог фаук-латиничног текста, или бесмислена латински текст, и хас-- то изгледа овако на ове величине фонта. Али, дозволите ми само напред и уради то. Ја идем у Цлоуд9. И не треба да урадите овај корак. Ја ћу то да урадим. Идем да кликнете Схаре. А то је карактеристика само од Цлоуд9, при чему Могу да моја околина јавност. 

И само ради демонстрација, пусти ме да урадим ово. Идем да направим апликација јавности. Приметити да ме упозорава, сам Сам сигуран да желим да радим ово, јер ће направити све у свету, без обзира да ли су овде сада или гледање видео касније на Интернет могао да види оно што ја видим. Али то је у реду. Ја ћу рећи "Доне." И да ти охрабри, да јесам ово цоррецтли-- Прво да га тестирамо. Само напред, ако не минд-- у претраживачу на рачунару, идите на овај УРЛ, и надам се видећете мој латински текст. И да буде јасно, то је ради не на лаптопу. То је у облаку. То је на цлоуд9, буквално, али Донео сам радног простора јавности тако да свако на интернету могу да приступим свом латински хоме паге. 

Иди на истом УРЛ на ваш телефон, ако можеш. Ако ће те то коштати, али, ти могу само гледати преко рамена. ПУБЛИКА: [неразумљиво] Давид Ј Малан: Жао ми је? ПУБЛИКА: [неразумљиво] Давид Ј Малан: Само Латин речи. То је све. Али, то је оно што треба да видите. 

ПУБЛИКА: Да. Давид Ј Малан: Да. Да. ОК. Да ли могу да Подигни телефон за тренутак? Дакле, надамо се, ако приступате то, то би требало да изгледа готово нечитљив. То је стилл-- Мислим, то је нечитак због латинског. Али је исто тако нечитљиве из ког другог разлога? Као, шта ви допада о овоме? ПУБЛИКА: То је мали. Давид Ј Малан: То је супер, супер мали. Па како можемо поправити ово? То је супер, супер мали на Вицториа телефону и, ако сте повукли да се сами, вероватно мали на свом телефону, све док вас има омогућено подешавања приступачности. Шта је ово? Ви само може укљештити и зум, који је изводљив, али онда видите само неколико речи одједном. Па цекај мало. Знам како да поправим ово. У праву? Ја могу да користе ЦСС, и ја могу да промените фонт сизе од 12 тачака до 24 тачке. Али нуспојава које, наравно, ће бити сада, на десктоп или лаптоп, сада је текст је двоструко већа. Па то би некако било лепо направити разлику између уређаја, и испоставило се тамо начини да се то ради. Има их неколико различити начини, у ствари, при чему користи ЦСС и одгајивача функције да нећемо ићи у веома детаљно, Ви у суштини можете упит претраживач и рећи, ако је екран мањи него ово Велики број пиксела, користите ову величину фонта. Ако екран је већи од овога Велики број пиксела, користите ову другу величину слова. 

Можете бити чак и одгајивач и даље. Ако сте икада посетила веб страница које, на радној површини, има велику мени можда искључен до сиде, а потом сав садржај је страни која мену-- То је нека врста заједничког парадигме. Мени на левој, садржају на десној страни, или обрнуто. Баш и не делује на мобилном телефону када ваш Екран је само оволико пиксела. Дакле, чешће на мобилни је, Ваш мени ће изненада пропао, а ви треба да кликните на дугме да га виде, или на сајту ће ставити мени изнад њега и ставио садржај испод њега. И можете имплементирати ове ствари у више начине. Можете да питате своје програмере, хеј, тим, сваки пут видиш ХТТП захтев од Андроид уређај, Мицрософт уређај, Гоогле уређај, Аппле уређај, користите величину фонта и користите овај изглед менија, иначе користе ово подразумевано већи изглед. 

Сада, користећи оно што Темељна техника данас Да ли су инжењери користе да ли је то иПхоне, Андроид телефон, лаптоп, десктоп посети сервер компаније? Где они добили ту информацију? 

ПУБЛИКА: хеадер? 

Давид Ј Малан: Да, ХТТП заглавље. Дакле, сваки ХТТП захтев из њихови клијенти њиховим серверима укључују, унутра је виртуална коверат, гомила ХТТП заглавља, од којих је један претраживач и оперативни систем чак, ако вам је стало до тај ниво детаља. Сада, то је загонетан изгледа низ, али постоји софтвер који ће само поједноставити да, а ви само да питате у програмирању цоде-- ПХП, Јава, Ц ++, вхатевер-- шта је телефон ово-- шта уређај је ово корисник користи? А онда можете рећи, показати им ово верзија сајта ако је телефон. Покажи им Ова верзија аутора ако је лаптоп или десктоп. Али не треба ни на страни сервера сложеност. То можете учинити чак и оне најједноставније ствари. 

Ја ћу да урадим ово. Ја ћу да наставим у мој Цлоуд9 окружење, и ја ћу додати ознаку да сте видели у Гоогле пре. То се зове метаознака. И никад се овога, тако Ја ћу да га препише овде. Мета наме = "виевпорт", а затим Садржај = "видтх = ширина уређај, интитал скала = 1 "и то је то. 

Тако да би могло бити и као магични Инцантатион. То није све то јасно, али ово је неке везе са прозора, и приказа је само орган јединице веб страница, правоугаони регион који дефинише највећи део странице. А ово је само говори бровсер, знаш шта? Направите ширину ове странице ефективно једнака ширини уређаја. Другим речима, немојте претпостављати да имате неку врсту неограниченог простора. Претпостављам да имате само толико простор као самог уређаја је велика. И сада, ако Релоад тхис у мом бровсер, видим никакву промену. Али, ако сам ову цоррецтли-- и пусти ме пало фингерс-- ако сви релоад телефоне, зар не види убедљиву промену? Да је то-- 

ПУБЛИКА: [неразумљиво] Давид Ј Малан: Да. ОК. Дакле, вероватно више читати сада? Ипак мали, да будемо фер, али не тако мали као да је неизводљива. И свакако могао да замени ово даље са ЦСС или на страни сервера, али све оно што сте види се све више и више функција се додаје у на страни клијента енвиронментс-- Јавасцрипт, као што ћемо дискутовати сутра, ЦСС и ХТМЛ-- тако да све те упита се може урадити на клијенту тако да замарамо Сервер много мање и не морати да држе корак са, за пример, стални најезда новог оперативног система верзија, нове верзије претраживача. Можете само нека претраживач питајте уређај, колики си, и онда направити нешто логично одлуке које се заснивају на томе. Али видећемо више могућности за логичке одлуке сутра у контексту од програмског језика. 

Дакле, било каква питања, онда, на веб развој? Данас није веб програмирање, по се, јер већина Све што смо радили је био веома естетски, ако хоћете. Нема одлучивање у код које смо написали, и тако зато ХТМЛ је означавање језика, а не програмски језик. Али сутра ћемо узети брз поглед, на крају, на ЈаваСцрипт, који је стварни програмирање језик који нам омогућава да урадимо нешто више. 

Неко питање? Па, да предложи два могућности по избору за домаћи. Један је-- ове Цлоуд9 рачуни неће истећи. Добродошли сте да користите да се поигравати са. То је бесплатно ниво услуге. Схватити да, ако приликом креирања ваш радни простор, ви сте га јавно, то значи да је свима на Интернет може да види шта куцате. Дакле, можда само узети у обзир не се срамотите ако ви износите свој први веб страна тамо јавно случајно, али нико неће да знам да погледају тамо ионако. 

И два-- пусти ме бацити горе овај УРЛ као и, посебно ако је у данас мало мање пријатнији од других, сигурни шта све ово значи. Схватити да је много више од овог видеа, који је и добар начин да заспим као и да се смеје док тај начин, такође има много социеталли занимљиво и безбедносни релевантне дискусије у њему од Јохн Оливер, иако комичар. 

Али ако нема више питања, који нас доводи до рецепције. Па зашто не укључим музику. Требало би да пије и грицкалице ван. Драго ми је да се мешају онолико док бих људи, одговорити на питања још један-на-један. Али, иначе, нема на чему да скине у било ком тренутку, па ћемо видети те опет сутра ујутру за мало више. У реду, хвала.