Дејвид Џ MALAN: Во ред. Ние сме назад. Значи, целта на оваа последната сесија е да се воведе уште неколку концепти но, исто така, им даде на сите шанси да вид на се водат вашите прсти и всушност направиме нешто малку практично. Целта не е да го вклучите сите нас во веб програмери од страна на било каков начин, но, навистина само да ви даде вкусот на некои од основните конструкции на она што оди во веб-програмирање и денес веб- развој, па статички страна на things-- Нема логика, без Програмирање јазик, само статична содржина. И тоа ќе ни даде можност да всушност гледаат она што е на веб сервер, Погледнете што се HTML датотека е, да видиме што тоа е HTTP е, всушност, служејќи се. Но, пред да нурне во, било ретроспектива прашања во врска со cloud computing или безбедност или нешто помеѓу? Не? Добро, добро, ајде да го направите ова, само во случај процесот на регистрирање нешто трае само неколку минути. Ќе нека го направи тоа во позадина. Оди напред, ако може, на овој URL here-- c9.io. Ова е трета страна service-- платформа како сервис, ако will-- кој ќе ве покани да се регистрирате за сметка, и тоа се случува да им даде на секој од вас сметка во т.н. облак на инфраструктурата на некој друг, компанија наречена Cloud9. Но, она што е убаво за ова е тоа што тие ви даде приближување на вистински развој на реалниот свет животната средина, иако на облакот и во веб прелистувачот, и ние ќе го користат ова за да всушност експериментирате малку денес. А потоа оди напред и само се движите на вашиот пат во процесот на регистрација ако можеш. Значи ние се случи да го користите овој во класата Јас ги учат за сите од нашите студенти, како на кампусот и надвор сега, и тоа е она што го замени историски беше поинаку превземање софтвер. Значи она што се добивање на пристап до е еден од овие виртуелни машини, Во суштина, тоа што е опишано претходно. Значи оваа компанија Cloud9 веројатно наемнини од трета party-- навистина во овој случај, Google-- целина куп на виртуелни машини дека тие некако се исецка до во илузијата на индивидуални сервери дека секој од нас има целосна контрола над. Тоа не е сосема точно да се каже дека тие се виртуелни машини, Сепак, затоа што Cloud9 всушност се користи е малку понова технологија наречен containerization. И дозволете ми да го зграби оваа слика тука за да се наслика оваа слика. 

А сад е, ако Се сеќаваш ли на сликата од порано, малку полесни тежина од виртуелната машина. Всушност, додека минатата време ние разговаравме за тоа има да се биде оперативен систем и хипервизорот а потоа гостин оперативен систем, гостин оперативен систем, гостин оперативен систем, на врвот на својата физички хардвер, разликата со оваа понова технологија, containerization, е дека сите тие некако споделување на истиот оперативен систем. Но, тие се уште се создаде илузија на сите има неговата или нејзината сопствена ексклузивни административни права и датотеки на серверот. Но, има помалку софтвер во помеѓу вас и хардвер. Како резултат на што е, теорија, повисоки перформанси, затоа што користите или трошат помалку ресурси на тој т.н. виртуелизација слој. Значи ова се нарекува containerization по природа по пат на технологија наречена Docker, кој е многу доаѓа во свои. И ова е нешто што инженери во вашата компанија може да се вид на вид на почнам да зборувам за наскоро, ако тие не се веќе, иако има сигурно нема причина да скокаат на секој bandwagons. 

Значи со тоа, рече, она што најверојатно видиме сега е екран кој изгледа нешто како ова. ДОБРО. И само ме викаат во текот ако не. И ако so-- ќе дојдат ако не. Оди напред и да кликнете дека големите плус да се создаде простор, и ќе го видите на екранот вака. Можете да се јавите на работниот простор именува нешто што сакате за сега. И само, всушност, за едноставност, and-- оди добро, некои од вас веќе имаат работни места. Наречи го тоа што ќе want-- бизнис, Харвард, четврток, она што би сакале. Вие не треба опис. Можете да го оставиме приватни, освен ако веќе имаат еден куп на работни површини. Ако сте принудени да се направи тоа јавно, тоа е во ред за денешните цели. Овде, исто така, е еден од upsells. Ќе добиете една приватна простор од страна на стандардните. Но, ако сакате повеќе, ќе мора да плаќаат за повеќе. Во спротивно, тие ги принуди да се направи вашата работа јавноста. Но, тоа е во ред, затоа што тие, исто така, се справуваат со оваа на софтвер со отворен код заедници да ги охрабри луѓето да се всушност соработуваат. 

И последното нешто што е важно, сепак, е, откако ќе се избере име и откако ќе се избере приватен или јавен, кликнете на HTML5, портокалова икона големите втор од лево, и потоа кликнете на Креирај работен простор. И тоа веројатно ќе се земе една минута или така, но тогаш ќе имаат животната средина, но откако ќе го направите тоа, што изгледа потсетува на она што го имам на екранот овде. Но, повторно, тоа може да потрае една минута или повеќе да се дојде до овој екран откако сте кликнале Креирајте работен простор. Но, само ме знаме над ако би ми се допаѓа да ги разгледаме во нешто или совети. Во ред. Па јас ќе одам да се оваа позадина за сега. Јави ми се над ако ви се чини дека имате било какви технички тешкотии. Но, повторно, тоа може да потрае малку за тоа да се отвори. И да одиме напред и да се зборува за она што тоа всушност значи да се направи веб страница, она што HTML е, и како сето тоа сега ги поврзува како ние сме почнуваат всушност да ги користат некои од технологија. Значи излегува дека можам да одат на мојот мал Mac тука, отвори едноставна програма наречена TextEdit, или на Windows можев отворен нешто што се нарекува Notepad.exe. И јас би можеле едноставно да се направи нешто како this-- "Здраво, свет". И тогаш јас би можела да спаси ова како hello.txt Значи без магија таму. Ова нема никаква врска со веб програмирање, нема никаква врска со HTML. Само создавање на едноставна текстуална датотека. Но, се покажа дека веб- страница е буквално само тоа. Тоа е едноставна текстуална датотека што го содржи текстот кои можеби ќе напишете во вашата тастатура, но тоа обично, но не секогаш завршува во .txt но не .htm или .html. И не само да внесуваат зборовите во датотеката. Што всушност треба да го користат нешта наречени тагови или, поопшто, нешто наречен Селектирај јазик. 

Па јас ќе одам да многу брзо пишувате а потоа објасни следново. Одам до првата тип овој, кој вели: Еј, интернет пребарувач, тука доаѓа веб-страница напишан во HTML. И овие две работи заедно се каже, еј, прелистувачот, следново е навистина HTML. Еј, интернет пребарувач, тука доаѓа главата или на врвот на мојата страница. Еј, интернет пребарувач, во внатрешноста на врвот на мојата страница, стави наслов кој е: "Здраво, светот ". Еј, интернет пребарувач, откако е на чело на мојот страница, тука доаѓа телото на мојата страница. И еј, интернет пребарувач, телото на мојот страница, исто така треба да се каже, "Здраво светот". Значи она што се истакнатите детали тука? Тоа е она што е, генерално, наречен декларација doc-тип, и, искрено, тоа е малку тешко да се запаметат ова во прв план. Вие само вид на копи-паста тоа. Ова е формален начин да се каже, еј, интернет пребарувач, Јас сум со користење на HTML верзија 5, кои излезе малку неодамна. Тоа е еден магичен инкантација дека некои луѓето со лоша смисла на дизајн одлучи да се стави на самиот врв на датотеката. И покрај тоа што е малку таинствени, тоа е се тоа means-- еј, интернет пребарувач, тука доаѓа со верзија 5 на HTML. 

Остатокот од овој беше со нас за некое време сега, историски, но тоа е се развива, а тоа е веројатно е добивање малку поедноставно. Забележите неколку карактеристики на она што сум го истакнат. Има овие работи со искосени brackets-- на лева заграда и правото заграда. И ќе забележите дека симетрија тука. И од страна на симетрија, мислам, само како што јас имаат оваа почетниот таг тука или отворен таг ако сакате, овде имам блиски таг или на крајот таг тоа е различни само доколку тоа има оваа намалување на почетокот на зборот HTML. И можете да замислите овој, како што беше случајно предлагање и досега, еј, пребарувачот, тука доаѓа некои HTML. И обратно, еј, интернет пребарувач, кој е тоа за почеток на HTML-- и крај. 

Во меѓувреме еј, интернет пребарувач, тука доаѓа на чело на мојата страница. Еј, интернет пребарувач, тоа е тоа за главата. Еј, интернет пребарувач, тука е телото на мојата страница. Еј, интернет пребарувач, тоа е тоа за телото. И во внатрешноста на тоа е некој произволен текст за сега. И во внатрешноста на главата, пак, некои произволни, но обележани, така да се каже, текст кој вели, насловот на мојата страница ќе биде "Здраво, свет". Сега за сега, можете да се претпостави дека пребарувачи имаат only-- или, поточно, веб страници имаат само две parts-- на главата и телото. И на главата е обично се само како на лента со мени, работи навистина само во самиот врв. И телото е храброст на страницата, се што е во толку голема правоаголник која го исполнува екранот. Па јас ќе одам да се оди напред и да го направите тоа. Јас да се оди напред и кликнете на Зачувај, File Save. И јас одам да се спаси ова како hello.html, и јас сум само ќе се го стави на мојот десктоп. И јас одам да се оди напред и да кликнете на Зачувај. И notice-- мојот Mac во барем се вика на мене. Дали сте сигурни дека сакате да го направите ова? И јас одам да се каже, да, да користам HTML. Знам подобро во овој случај. И сега јас ќе одам да одат на мојот десктоп каде што имам оваа датотека одеднаш. И јас одам да се зголеми двојно-кликнете на неа. И ќе забележите дека со Стандардно, Хром отвори. Тоа е затоа што тоа е мојот прелистувач. И тоа само вели: "Здраво, свет". Но, тој вели: "Здраво, светот ", на две места. Забележете горниот лев агол. Прилично тешко да го пропушти тоа. Тоа е голем и смел. А каде на друго место Ви се чини да се каже, "Здраво светот"? 

ПУБЛИКАТА: На табот. 

Дејвид Џ MALAN: Да, на самата картичка. Значи, кога го изјави шефот на страница е сè што top-- и навистина ова е насловот. Тоа е само во јазичето тука. И јас може да се извлече од ова јазиче надвор, така што нема да се збуни. Ова е само еден таб сега, и навистина ги гледаме "Здраво, свет" до тука и "Здраво, свет" овде долу. Значи прилично јасна. Но, тоа е, исто така, прилично едноставна. И, всушност, се зумира. Јас може да се промени големината на фонтот само да го зголемува за пристапност. Но, ајде сега да се направи нешто малку повеќе интересно. 

Одам да go-- Whoops, ајде ме да се вратам на мојот текст фајл. Јас сум да се вратам во мојата текстуална датотека, а јас ќе одам да се промени ова и велат "Здраво, Disney World." Спаси. И да се вратам во мојата прелистувач и кликнете Reload. И сега, се разбира, вели: "Disney World." И јас одам да се вештачки зумирате само така што е полесно да се види. Па сега, за жал, јас вид на сакаат to-- всушност, тоа е карактеристика Мак. Сакам да кликнете на Disney World и да си одат некаде како disney.com, но тоа не функционира. Значи, основниот принцип на веб е линкови, линкови, кои одат на друго место. Па, како да го направам тоа? Па, јас само може да се каже, "Здраво, http://www.disney.com". Зачувај ова. Вчитај ја страната повторно. Но, тоа исто така, не кликање. И, што е убаво тука, иако тоа се уште не е во функција, е во тоа што се чини дека прелистувачот е буквално само она што јас го кажам да се направи. Значи, ако јас само тип на URL-то, како таков, тоа е само ќе да ми го покаже URL-то. Јас треба да се користат тагови или Селектирај јазик за да всушност се каже на пребарувачот за да се направи дури и повеќе. Па јас ќе одам да се оди напред и да се ја избришете оваа за момент. И јас одам да се каже, еј, пребарувач, проектот сидро тука, линк така да се каже. И хипер-референтноста, дестинација тоа сидро, треба да биде на овој URL. И ќе забележите мојот цитати. Јас може да се користи единечен наводник, исто така, но мора да биде конзистентна, и јас генерално би само користење двојни наводници да биде едноставно. Забележиш јас ќе одам да го затвори таг. А потоа тука јас ќе одам да се каже, "Дизни Ворлд". И сега јас треба некои symmetry-- отворена заграда, / a, затворена заграда. 

Значи она што јас воведе? Имавме неколку тагови веќе. HTML, раководител, наслов, тело, сите тагови, така да се каже, со отворени и затворени колеги. Но известување, ова е вид од фундаментално различно. Тоа е она што ние ќе го наречеме во HTML атрибут. И атрибут е само клучна вредност пар. Ова е вообичаена работа во компјутер science-- клучните вредност пар. Тоа е еден вид на алатка на трговијата. Клучен и вредност. Еден збор, а потоа некои друг збор или зборови. И во овој случај, клучот е href, а вредноста е дека целосната URL-то. И што атрибут не е влијае на однесувањето на таг. И во овој случај, треба да се влијае врз однесувањето на таг сидро, затоа што ние треба да се зацврсти овој линк за да некаде. И како да го направите тоа е по пат на атрибутот. 

Па јас ќе одам да се оди напред и да ја зачувам датотеката сега. Вратете се на мојот интернет пребарувач и вчитување. И Voila, сега имаме Почетоците на легитимните веб-страница. Супер-едноставен, но ако можам да лебди над this-- известување во долниот лев агол, тоа е супер-мал. Но, не гледам www.disney.com. И ако јас кликнете на неа, навистина ова ме маталки далеку да disney.com. Сега, чудна работа тука е дека тоа не е на best-- најмногу се продава рачно, но тоа е во ред, бидејќи оваа датотека не постои на World Wide Web. Таа постои како локална датотека во навидум мојот Корисниците directory-- / jharvard-- Џон Harvard-- / десктоп. Но, тоа е URL-то. Тоа едноставно се случува да бидат локални. За жал, никој од вас не можат да го посетат ова, затоа што ако го напишете овој URL-то, што би се кажува вашиот интернет пребарувач, за датотека наречена hello.html погледнете на вашиот хард диск. И, се разбира, освен ако не сте следи по рачно, тоа не се случува да постои таму. 

Па тоа е во ред. Ние сè уште треба на некој начин, во крајна линија, да се добие оваа датотека во веб, но ајде да ги разграничат неколку безбедносни импликации на она што ние само видов и врзете ја во опавче на претходно Расправата од ова утро. Излегува дека, ако пребарувач буквално само го прави тоа она што јас го кажам да се направи, и се чини дека да биде случај дека сидро таг е под влијание на вредноста на овој атрибут наречен href но тоа покажува оваа текст, ова се чини да се имплицира дека би можел да стави на URL-то во двете места и повторно вчитајте и сега види на URL-то и да одат во URL-то. Известување, ако лебдат над долниот лев, Јас сум навистина се случува уште да disney.com. 

Значи, ако некогаш сте биле во phished-- Р-Н-И-С-Н-Е-D-- со еден од оние лажни пораки од како PayPal вашата банка, Веројатно сте добиле врски во на пораката што ти ја читаш дека ви кажува да кликнете тука за да се потврдуваат вашата лозинка или ја потврдите вашиот датум на раѓање или социјални или нешто општествено ќе инженерство за да се открие информации. Па, би можел да вид на се Предност на ова, не може јас? Можам да кажам нешто како, www.paypal.com. И наместо disney.com, јас можеше да оди, како, badguy.com. Вчитај ја страната повторно. И колку е лесно е тоа да будала, особено не-техничко читач или површно читање читателот отколку да кликнете линк како овој, што ако јас кликнете it-- Јас всушност не сакаат да одат badguy.com. Јас не знам што е всушност таму. Значи paypal.com, информации, е она што го кажува тоа се случува да, но се разбира, ако се погледне надолу супер-ниски, тоа е малку матно, но вели дека badguy.com. Тоа е единствениот кажам право сега дека јас ќе одам да се на погрешно место. И кога реков претходно дека банките навистина не треба да ги охрабри или воз корисници во кликање линкови, овој е само една манифестација на тоа. И тоа е толку едноставно. Вие сте сега противник ако да се направи нешто како ова и да се обиде да трик на корисникот во посета на вашиот веб-сајт. Но, за сега, ние ќе продолжиме работи убаво и чисто. Ние си оди за да се оди напред и премотување назад на овие промени. Вчитајте ја страницата. И ќе се вратам во disney.com. 

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

Тоа е се во ред и добро, но за тоа ќе било убаво да додадете слика на оваа страница, па јас ќе одам да се оди за да се погледне Мики Маус на слики на Google. И само за забава, јас сум ќе го имате оваа слика. Одам да се оди напред сега и дофати URL на оваа слика, Точно е дека постојат различни начини да го направите тоа. За сега, јас сум само ќе копирате URL-то. Одам да се вратам во мојот текст датотека, а јас ќе одам да се каже тука, img src = цитат unquote дека URL, супер-долго. И тогаш поимот на сликата е малку поинаква. Има навистина нема поим за почетна слика и стави крај на сликата, како почетниот таг крај таг. Значи тоа се чувствува малку чудно да ме семантички да го направите ова, да имаат ознака за затворање на слика. Тоа не е неточна. Сосема е точно, и тоа се охрабруваат, но има стенографија нотација. Можам вид на истовремено се отвораат и затвораат истата ознака, и дека ќе се направи пребарувач среќни. Така, тоа е само малку повеќе содржаен за работи кои концептуално навистина не да има смисла за почеток и крај. Тие само се таму, или тие не се. 

Па јас ќе одам да се спаси оваа и се врати во мојата "Здраво, свет" страница и вчитување. И тоа е малку надвор од контрола, затоа што на сликата е всушност малку е голема, но тоа е во ред. Можев да ја промените големината на програмата. Или знаете што. Само за да се покаже, јас сум ќе всушност се каже дека ширината на оваа работа треба да биде само 200 пиксели, 200 точки. Дозволете ми да оди напред и да се спаси ја и повторно, и сега на страницата изгледа малку повеќе разумни. Но забележите шема. Па, јас сум вид на предавал сите вас на HTML во некоја смисла, барем Концептуално, бидејќи сите HTML-от е е овие tags-- отворен ознаки, затворени ознаки, и атрибути кои менувате нивното однесување. И, очигледно, секој ознака може да има нула или еден или два или повеќе атрибути, секој од која се занимава со нешто малку различен. Сега, како да знаете што постои? Можете само да слушате некој како ми да ви кажам она што постои, или пак само Google околу еден туториал на HTML, и тоа навистина е овој едноставен. 

Навистина, кога бев undergrad пред неколку години и научив HTML, еден од моите математика настава асистенти само трошат малку време ми туторство како за половина час, еден час, и тогаш бев на мојот начин. Бев на пат за да го најмногу одбивни веб-сајтови секогаш, која, очигледно, не сум навистина напредуваше пошироко. Но поентата е во тоа што, откако ќе се разбере овие едноставни ideas-- ако таинствениот text-- но овие едноставни идеи за започнување на една мисла и затворање на мислата, чување се што е убаво избалансиран, барате нешто нагоре, менување на однесувањето на таа ознака, тоа е навистина сите што има на него. И всушност, ако ние сега одат на нешто како google.com-- всушност, ајде да одиме на место малку повеќе reasonable-- stanford.edu. И јас одам да се оди за да ја видите, Инвеститорот, View Source. Тоа е грда, но notice-- и јас ќе зумирате во огласот некои работи кои се веќе познати. Таму е овој овде, кој е пребарувач. Еве доаѓа HTML5. Има HTML. Очигледно, постои припишуваат дека не сум се користи за карактеристиките на јазик на страницата, и ова може да помогне со автоматски превод и работи како што. Еве ја главата на страната. Тука е насловот на страната на Стенфорд. Има еден таг јас не се зборува за yet-- Мета таг. Тоа е само вид на позадина информации. Тоа им помага со SEO, или оптимизација на пребарување моторот, или Google пребарување резултати или слично. Но, ако ние ги бараме, да ги задржи изглед, тука е таг тело. И таму е гроздовете на други тагови се уште не разговаравме за. Но Div е еден за еден поделба на страната. Тоа е како невидлива правоаголник ако вид на сакаат да се ментално поделете ја вашата страница во различни единици онлајн. И тогаш многу divs јас види, нешто што се нарекува класа, но ние ќе се вратам на тоа. 

Ова е interesting-- форми. Форми се сите во текот на веб. Секое поле за пребарување сте некогаш се користи е форма. И така, ајде да всушност гледаат. Форма. Акција. Дејството на оваа форма, за што историски причини, е дека URL-то. Метод е "пост". Излегува дека HTTP барања може да се користи глаголот "да", како што видовме претходно, или "пост". И ќе ја видите разликата на овој во еден момент. Ајде да всушност се види што е ова. Дозволете ми да се врати на страната на Стенфорд. Што форма се тие зборуваат за, мислите? Она што се издвојува во вас? 

ПУБЛИКАТА: полето за пребарување. 

Дејвид Џ MALAN: Да. Значи до во горниот десен агол тука е овој полето за пребарување. И тоа е како тие се спроведуваат на it-- таг, кој е буквално отворен заградата форма. А потоа нека си го бараат за нешто. Ајде да пребарувате за пријатели на mine-- "Ник Parlante". Enter. И, се разбира, таа отиде во малку поинаков URL-то. Дозволете ми да се вратам тука. Ајде да пребарувате за "предмети". По ѓаволите. Отиде во друг URL. Значи, Стенфорд, додавајќи некоја магија дека тие не се ме водеше во URL-то што сме го виделе во акција атрибут таму. Но, овој вид тука се спроведува чисто по пат на ова Селектирај тука, овие тагови. Всушност, тука е влез за од типот на пребарување, кои што го сакате. Тука е влез за друг тип на пребарување. Тука е влез за себе низа. И така цел не е да заврши нашите умови низ овие тагови но само за да ја видите. Тоа е само отворање и затворање тагови и гледа на работите. Да? Викторија? 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Тоа е добро прашање. Тоа е малку сложени да ја формира за да ја видите. Дозволете ми да се вратам на тоа прашање во само неколку минути кога ќе погледнеме во нешто што се нарекува CSS или Cascading Style Sheets, и можеме да се обидеме да заклучиме колку од страната. Значи, ако ние сега да ги разгледаме во google.com, ајде да видиме што на нивната страница изгледа како. Вие ќе they're-- дека е симпатична денес. ДОБРО. Се е готово. Сите во право, па View Source. Ќе помислите дека Google има навистина убаво изворниот код. Значи, очигледно, она што се случува овде? И всушност, тоа не е дури и HTML. Ова е нешто што се нарекува JavaScript. И ајде да продолжувам да одам и да оди. Јас дури и не знаат каде на страницата започнува. Одам да се користи команда F, отворен заградата HTML. Сите во право, таму е. Го најдов на почетокот на страницата, и има толку многу работи тука. 

Што всушност се случува? Па, знаеш што, ние може да се исчисти ова. Ако јас наместо да одат на овој Увид лентата со алатки, овој специјален дијагностичка алатка, и не одат да се поврзат, каде што ги чуваме случува денес, но ако одам со Елементи, што е навистина убаво е дека пребарувач има многу многу подобро очите од мене. И на прелистувачот може да се прочита тој метеж на веб-страница, дека HTML ние пошта само погледна, и тоа може да го анализирам или да прочитате и анализираат и да ја форматирате во еден убав човек-пријателски начин. Значи она што го гледам сега Во овој екран тука под Елементи, иста содржина, но тие го вовлечен сè, тие ги обоена, но тоа е точно ист текст дека јас преземена од серверот. 

И, што е убаво е сега можам да видам во телото, за instance-- известување, страната е сеуште составен на само главата и телото, и јас може да се нурне во хиерархиски тука. Забележете дека Google се чини дека да се има да divs-- оваа и оваа. Јас може да се прошири тоа. Постојат еден куп други divs. Така, тоа е малку комплексна. Но, чекајте. Ова се чини многу повеќе може да се чита, релативно, од ова. Зошто Google засрамувачки себе со само испраќање овој огромен хаос на кодот на некои Покажи само за спроведување на нешто кое изгледа толку едноставна на прв поглед? Како, зошто не ги додадете повеќе простори? Зошто тие не притиснете Enter како што го направив? Гледај колку е добар јас бев во пишување на веб-страница. Јас хит Внесете така внимателно. Јас вовлечени па сè е толку убаво и лесно читлива. Зошто Google не го практикуваат истото? 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Добро. Многу фер. Тие немаат некои лице во Google рачно ажурирање на почетната страница повеќе. Тоа не е 1999 година повеќе. Така што тие имаат софтвер. Тие имаат и други алатки кои генерираат динамички тие се HTML. Се разбира, овој код се е напишана од страна на луѓето, но реалноста е, тоа е сосема фер да се каже, прелистувачот секако не е гајле како неуредна кодот е. Но, има уште релевантни технички причини дека Google дистрибуира нивните HTML код на таков невешт, навидум Најголемиот начин сите спакувани заедно со многу малку way-- многу малку во начинот на форматирање како што го направив. 

ПУБЛИКАТА: [Беззвучен] 

Дејвид Џ MALAN: побрз? Зошто? И што да се каже, Лидија? Побрзо? Зошто побрзо? ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Нема нема простор за читање. Да. Така што мислам за тоа што просторот е. Значи секој лик на тастатурата се некои износот на простор да се претставува, или физички, како што тоа зазема толку многу простор, или некако под капакот на моторот, со која се бара меморија. И како aside-- и ние ќе се зборува повеќе за овој tomorrow-- секој лик на тастатурата обично бара 8 бити, или еден бајт. Значи модел на 8 нули или нови, или пак само 1 бајт, како што луѓето обично би рекол. Значи тоа е мал, но тоа е уште не е нула. Тоа е уште некои износот на просторот. Значи, ако инженер или Google хитови просторот бар само еднаш, и претпоставувам Google-- тоа е супер-popular-- Претпоставувам дека милијарда луѓе посетете ја нивната почетна страница на ден, или некои број на луѓе посетете ја страната на еден од милијарда пати на ден, колку дополнителни бајти е дека софтверски инженер само чини Google со притискање на неговиот или нејзиниот простор бар еднаш? 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Не е баш толку лошо. Само еден бајт пати милијарди долари. Значи a-- ПУБЛИКАТА: 8 милијарди гигабајти. Дејвид Џ MALAN: Не е 8 милијарди долари. 8 милијарди бајти. Но, 1 гигабајт. 1 гигабајт ќе биде единица мерка. Ако тој или таа не две простори, 2 гигабајти. Три гигабајти. Нели? Тоа скали скапо. И така, во случаи како Google, кои, готово, се екстремни случаи, постојат и други проблеми кои се јавуваат само со тоа што многу разумни одлуки или со земање на многу едноставен човечките постапки, бидејќи има зголемени овој ефект. Значи една од причините ова изгледа толку компресирана е токму онака како што беше Викторија said-- само генерирана од компјутери во секој случај. Па не е голема работа. Нека пребарувач да го дознаам. Но, тоа, исто така, намерно нема многу простор, бидејќи просторот не е потребно. И просторот, всушност, чини пари. 

Тоа било чини време, бидејќи само да им помогнам на дека многу повеќе податоци од седиштето google.com е само мора да преземе некои износот на време, дури и ако тоа е милисекунди или микросекунди, но дека додава до над толку многу корисници, или уште поверојатно, тоа веројатно чини пари. Google веројатно се поврзува со некој друг во светот, еден на оние peering поени, а ако тие имаат некој вид на финансиски односи при што нивните податоци чини пари, тие, како и минимизира колку податоци тие се плукање на нивната интернет конекција. 

Значи, смешно нешто, сепак, во крајна линија, или можеби нешто смирувачко, е тоа што и покрај тоа што изгледа страшно големо, на крајот на денот, тоа е се уште точно истите принципи како и оваа многу едноставна страница тука на HTML страница. Па само да резимираме и така што ќе има канонска верзија, ако не беа Следниве заедно со избор тука, тука може да биде најмногу едноставен на веб страници, така нешто да се игра со можеби подоцна. 

Па, ајде да се воведе неколку други идеи сега. Ние сме за да се воведе нешто што се нарекува таг стил. Ние можеме да стилизирам оваа страница во повеќе интересни начини. Па со оглед на HTML-мејл е за сите обележување до на податоци, вид на одредување на прелистувачот како да структура на податоци, каде да се стави тоа, CSS, или Cascading Style Sheets, е втор јазик, кој обично добива измешани со HTML како што ќе see-- но можеме да се исчисти дека во еден moment-- која се тоа го последниот чекор, при што ја стилизира. Станува бои само право, на големини само право, позиционирање само во право. Сето ова е за естетиката или форматирање, а не за самиот основните податоци. И најлесен начин да се покаже ова е можеби со пример. Па јас ќе одам да се премине во мојата едноставна текстуална датотека. И во само еден миг, јас ќе ни прошетка низ процесот на овој прават самите. 

Одам да се вратам во мојата датотека тука и повторно вчитајте ја страницата само се потврдува она што изгледа како. Тоа е каде што ние сме во моментов. Се чувствувам како деца ќе уживаат има малку боја на оваа веб-страница. Па јас ќе одам да одиме до тука во главата на страната. И јас одам да се направи стил, / стил. А потоа и во внатрешноста на оваа, јас ќе одам да им кажам на телото на мојот page-- и овој формат е, во прв поглед, можеби малку Чудно но конвенционално. Јас ќе одам да се каже дека на позадината боја на оваа страница треба да биде зелена. И тоа е за жал, вид на не е најдобар дизајн. Забележете дека претходно во светот на HTML, Јас реков дека атрибути овие се клучните вредност парови. Нешто еднаква цитат unquote "нешто". Во светот на CSS, која беше дизајниран од страна на некои различни луѓе, тие одлучија дека, во нивните светот, клучните вредност парови ќе биде зборот нешто на дебелото црево. Така, тоа е истата идеја, иако. Тоа е поврзување на вредност со некои клучни дека на некој начин влијае на однесувањето на оваа страница. 

И веројатно може да се погоди. Што е ова веројатно нема да се направи дури и ако никогаш не сум види CSS или HTML и пред тоа? ПУБЛИКАТА: Промена на боја на позадината. Дејвид Џ MALAN: Да, промени бојата на позадина. А особено на боја на позадината на телото. Но, со оглед дека тело за сега е веб- page-- тоа е единственото нешто под наслов лента really-- на тоа е веројатно нема да влијае на истото. Па ајде да видиме. Ајде да го спаси ова. Одете овде и да ја превчитате. Тоа е прилично одбивни. И она што се случува тука е пропратен ефект. Јас само ја одбрав оваа слика по случаен избор. Зошто не зелен permeating зад Мики? ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Токму така. Излегува дека сликите, убава многу ги сите слики кои ние може да се користи, сите rectangles-- на правоаголници. Дури и ако Мики има некои кривини за себе и има искуство, дека минатото треба да биде нешто. Тоа мора да биде бела. Таа треба да биде црна или нешто друго. Тоа може да биде транспарентен. И всушност, би можел отвори Мики Маус тука во програма наречена Photoshop или нешто слично и го промени сето тоа бело позадина на транспарентен, па зелени ќе блесне. Но, тоа е нешто што ќе треба да се бара од мене или графички уметник или дизајнер во мојата компанија, на пример, да се направи, особено бидејќи јас само позајмени овој пат од интернет. Но, тоа е причината зошто ова се случува. 

Па што друго би можеле да сакате да направите? Па, ние можеби ќе сакате да се каже Навистина се надевам дека ќе уживате во вашиот престој. И за нагласување, сакам да се направи оваа силна, и така јас ќе кажам отворено силна и затвори силна, а потоа повторно ставете го. И тоа е малку тешко да се види на проектор но можеби и навистина сега скокнува во вас малку повеќе. Така можете да додавате закосени букви во овој начин, храбар соочува во овој начин. Ние може да се промени бои. Всушност, само за клоци, јас сум да се оди напред и да го направите тоа. Јас не навистина ми се допаѓа како ми ставови се во оваа блиску, па јас може да се направи нешто како ова. Одам да се каже на прелистувачот, се менуваат на секои став таг за да имаат, ајде say-- всушност, знаеш што, ајде да го усогласат текст-align, центар. И повторно, знам дека ова само бидејќи некој го предава на мене или јас погледна нагоре во онлајн референца. Значи, да ме спаси ова. И, ах, сега сум во центарот на сликата таму. И всушност, знаеш што, ако Се движи мојот слика во ставот tag-- па третиот став, и покрај тоа што не е текст. Ајде да го спаси тоа и да ја превчитате. Сега на страницата почнува да изгледа вид of-- Мислам, тоа е сè уште прилично грда, но барем тоа изгледа како да сум поминал две минути, наместо на една минута што го прави. 

И така, постепено, можеме да овие естетски промени сега се на страната? Јас не сум навистина е изменета на податоци во страница која не е додавање на зборот навистина. Јас додадов метаподатоци, ако сакате. Еј, интернет пребарувач, го прават зборот "навистина" со задебелени букви. Но, податоците не е силна. Тоа е метаподатоци. Податоците претставуваат "навистина." Значи ние се уште имаат некои од истите концепти како порано. Сега, се разбира, тоа не е на интернет, па јас ќе одам да се направи еден последен чекор тука. 

Одам да се оди на hello.html и само се потенцира и копира оваа. И сега јас ќе одам да се одат во Cloud9, која Јас ќе ти прошетка низ во само еден миг. И шансите се дека наскоро ќе биде, ако веќе не, на екранот се допаѓа ова. И дозволете ми да ви даде брз турнеја на Cloud9 она што навистина е. Значи, повторно облак 9 е овој облак-базирани услуги дека јас и ти дава илузија на постоење на нашата сопствена виртуелна машина во облакот, технички контејнер во облакот, дека имаме целосна административни привилегии за. Така што во теорија, никој не на друго место во светот има пристап до екранот сум гледа во моментов, освен можеби луѓето кои се кандидира на сајт, бидејќи технички тие имаат физички пристап и така натаму. 

Значи она што го гледаме во оваа средина? Одам да одзумирате, затоа што тоа е малку мала. И дозволете ми да истакнам повеќе тука за само еден миг. На левата страна од мојот и вашиот екран, има интернет пребарувач датотека во лево. Така слични во духот до Mac OS и Windows. Овие се сите додадени фајлови во мојот профил. И по дифолт, ако вашиот сметка е како моите, ќе видите или наскоро да видат helloworld.html и readme.md. Овде на десната страна, ова е каде што моите текстуални датотеки се случува да одам. Ако некогаш сте се користи Microsoft Збор или Notepad или TextEdit, ова е мојот збор за уредување на датотеки се случува да одам. И тогаш повеќето таинствени карактеристика на оваа средина дека ние навистина не ќе треба да се користи е овде наречен терминален прозорец. Ако сте користеле ДОС од недалечното минато, тоа е Линукс или Линукс еквивалент на ДОС. Тоа е текст-базирани interface-- Не глувчето, без влечење. Сите можете да направите е тип команди, но тие заповеди да креирате датотеки, преместите датотеки, отворен директориуми, во близина директориуми, направи било кој број на нештата. Но, за сега, ние само ќе да поминат нашето време тука. 

И така да го направиме тоа. Ако сте во оваа животната средина, која треба да се да биде ако создаде простор веќе, одиме напред и само одат нагоре во датотека, Њу за момент. И тоа ќе ви даде ново табот, токму тука во средината на теренот. И јас just-- и ајде оди напред и да го направите тоа. Ајде да одиме напред и сега се фајл, зачувајте и да оди напред и да го наречеме hello.html, не треба да се меша со helloworld.html, што дојде со својата нова бесплатна сметка, што е само датотека примерок. Ќе видите дека одеднаш се појави, најверојатно на левата страна, и јазичето се уште ќе биде отворен. И дозволете ми да ве охрабруваме сега да се рекреираат оваа датотека или некои нивни варијанти. И ако може да не сосема го видите на екран, ова е идентичен со слајдовите кои најверојатно имаат во друг таб. 

Значи во кратки, направете ја вашата прва веб-страница, спаси го, а потоа во само еден миг, Јас ќе ви покажеме како можете всушност може да го видиш овој. Но промени барем една работа. Промена на HelloWorld нешто на свој избор, така што ќе се убедени дека тоа е вашата датотека, а не онаа што ја креиравте. Во ред. И кога сте ready-- не rush-- кога ќе завршиш, оди напред и да ја зачувам датотеката Откако сте го направиле овие промени. И ако кликнете на Стартувај копчето до врвот, овој треба да се отвори ново ливче што ќе каже URL вас она што можете да ја посетите вашата датотека во, но тоа може да се земе еден миг да се цитат unquote "Start Апачи", која е името на веб серверот. Па бидете внимателни да го прават токму што е во датотеката во крајна линија. Па сега, јас ќе зумирате. Ако почнам пишување отворен заградата HTML, известување тоа ме поттикна да се заврши мојата мисла. И ако го завршив мојата мисла него, автоматски ми дава таг затворање. Но, за очекување е тогаш јас ќе се погоди Enter, а потоа се пресели во внатрешноста има и да се упатат во и Јас тогаш се направи тело внатре. И тоа е малку чудно на прв, затоа што тоа се прави во право за вас, но сфати дека на крајот тоа ви заштедува тастатурата. И всушност, многу честа карактеристика на програмирање средини, овие денови и за веб развој, како на ова и Вистинското програмирање, што ние ќе зборуваме за утре, Токму овие авто-заврши карактеристики, работи кои само им овозможи на програмер или дизајнер да напишеш помалку тастатурата да се постигне истото. Понекогаш тоа е добро, иако. Понекогаш тоа е само досадни. И, повторно, откако ќе го транскрибира на лизгачот или некоја негова варијанта, можете да кликнете на копчето Изврши до врвот. А потоа и во долниот прозорец, ќе бидат информирани во она URL адресата што можат да го посетат вашиот веб-страница. Рудникот, на пример, е во business-daharvard.c9users.io и така натаму. Сите во право, па, нека me-- било какви прашања? Било други прашања за само добивање оваа работа, пред да додадете карактеристики? И дозволете ми предложи, само да се добие луѓе comfortable-- бидејќи тоа е една работа да се само копи-паста слепо она што го направив. Но, исто така, кои луѓе се борат со најмалку еден со обврски, Одам да го вклучите некои музика. Одам да предложи листа на работи што потенцијално може да го додадете. И сигурно може да користите Google. И зошто не ние само предложи да се обиде да го реши најмалку еден посебен проблем тука. Значи во однос на картичките, дозволете ми да повторна употреба на овој овде. 

Всушност, дозволете ми да се стави тоа во форма текстуални. Да речеме дека меѓу тагови ние би можеле користат тука се и некои тагови овде. Видовме на став таг. Сега тоа се случува да се авто-заврши. Став таг, сидро таг. Да речеме дека сакате да го направи нешто поголемо, па можеби ќе like-- таг век може да помогне. Па, можеби ќе треба помош за тоа во само еден миг. Видовме div. Ќе видите има маса. Постои нешто што се нарекува TR, td. Та, td. Се вратам на тоа во еден момент. Што друго може да биде корисна? Има силна. Постои акцент, или подобро кажано, Ем. There's-- што друго може да ви фенси тука? Па, ние ќе се гледам во тоа заедно. Форма, што сме виделе. Има форма. Има влез и уште неколку други. Сите во право, па ајде да го направите тоа. За да одговорите на Викторија прашање, дозволете ми да првата само бидете сигурни дека секој е во можност да добијат здраво за работа. Тогаш дозволете ми да се воведе неколку други идеи. Тогаш ние ќе ги споделите со луѓе се реши некој проблем на сопствените. Тогаш ние всушност ќе се вратам на тој поим на форма, и ние ќе всушност повторно спроведување заедно пред крајот на интерфејс, така да се каже, на Google себе. Ние ќе го користат Google како задниот крај и нека да го направите на напорна работа, пребарување, но ние ќе се рекреираат на предниот крај на Google и образецот за пребарување дека тие имаат на своја страница. И така ние ќе се вратам на овие тагови во само еден миг. 

Значи ова е она што предложен пред само еден миг. Ние можеме да додадете стилизација на страница во внатрешноста на овој стил таг, а ние може да стилизирам позадина боја, усогласување на текстот, без разлика дали тоа е центар или лево или десно. Но, многу брзо би најдете или веб-дизајнер ќе најдете дека ова станува малку тежок за употреба, затоа што го правиш она што е наречен мешање на содржината со презентација на истите. Ти си мешање на вашите податоци и естетиката на истите. И всушност, ако се земе предвид што ќе се случи во текот time-- ова е многу мал веб-страница, се разбира. Но, ако го додадете содржината на оваа страница и јас додадете стил на оваа страница, страницата многу брзо се добива подолго и подолго и подолго. И да претпоставиме дека сакам има втор веб страница, која акциите на некои од овие атрибути. Претпоставувам дека мојот втор веб-страница за мојата site--, исто така, сакам се што е центар, и јас исто така, сакаат се ' со зелена позадина. Јас сум прилично многу ќе мора да се копирајте го и ставете некои од овие линии во тој втор датотека, која се чувствува добро. Тоа ќе го реши проблемот. 

Но, што ако сакам третата страница или 30 страница или 40-страница? Сега ќе одам да се копирање и вметнување многу дупликат код во повеќе датотеки. И така се претпостави дека Јас одлучувам или јас сум изјави, еј, не сте со користење на повеќе зелена позадина. Ние ќе треба да започнат со користење на портокал. Што имаш да се промени? Па, мора да се промени тој стил од зелена во портокалова колку места? Како 30 или 40 места. Тоа е досаден. Тоа е склони кон грешки. Има голем број на причини каде што не би сакал да предизвикаат тој вид на болка за себе. И така не би било убаво ако би можеле да се земе она што јас само стави меѓу овие два жолти тагови, овие тагови стил, тоа фактор надвор, и го стави сите мои стилизација во една централна датотека дека сите 30 или 40 од моите други датотеки позајми од или некако референца, не за разлика од вмрежување дијаграми што се прави и пред тоа? 

Значи, ако јас одам во тука, јас сум ќе всушност предлага дека можеме замени стил таг со нешто наречен таг линк, како што е ужасно, ужасно име, затоа што не ги користат линк ознака за да се создаде она што ние, луѓето знаат како линк во веб-страница. За тоа, го користите која таг? Како да се создаде линк во веб-страница? ПУБЛИКАТА: a. Дејвид Џ MALAN: А, или котва таг, кој отиде на Дизни порано. таг линк тука е велејќи дека this-- линк до датотеката со име styles.css, односот на кои ќе биде дека тоа е моја интерфејс. Значи ова е еден од S во CSS-- Cascading Style Sheets. Стил sheet-- две од С во CSS. Каскадни стил лист. Ова само значи дека, еј, пребарувач, одете најдете styles.css на локален сервер и го користат како вашиот интерфејс, што значи во внатрешноста на оваа датотека се случува да се биде на сите стилизации дека ние сме само направено. И така, таа датотека може да изгледа како е тоа. И јас само ќе го направите ова е брз На пример, бидејќи ние не треба да се добие премногу во плевел тука. Но, ако јас го копирате овој, она што јас сум предлагање е дека програмер креирате нова датотека, ставете во оние lines-- whoops-- ставете во тие линии, зачувајте ја како styles.css, а потоа, во Од друга датотека, бришење сето тоа и да го замени, наместо Со овој линк таг. Така што ако јас се поврзат href = "styles.css" односот ќе биде "интерфејс" блиски таг. Зачувај го. Се вратам во мојата HelloWorld. Вчитај ја страната повторно. 

Буквално ништо не се случило. Тоа е добра работа, бидејќи тоа значи дека е всушност сите работи. За да се покаже како многу, претпоставувам дека се направи печатна грешка, и јас ова го нарекуваат "styles.css" со голема S, што е неточни, а потоа повторно ставете го. Сега може да се види тоа едноставно не функционира. Сега, зошто? Па, ајде да се користи техника од порано. Дозволете ми да оди напред и, мојот интернет пребарувач, во Хром, јас сум се случува да се отвори тој посебен јазичето мрежа како и досега, и дозволете ми да ја превчитате страната. Она што не сте изненадени да видите сега? Или можеби сте изненадени за да ја видите. Како и да е, она што го гледате сега? ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Тоа не е пронајден. Зошто е тоа не е пронајден? Па, Styles.css-- капитал S-- не постои. Јас го погрешно се нарекува. Едноставна грешка. Но, јас се разбира сега 404, бидејќи серверот е велејќи дека, еј, тоа не е пронајдена. Буквално, не знам каде што датотеката е. Па како резултат на тоа, на пребарувачот ви покажува она што може, сурова содржина на страницата, која беше 200, HTML, но стилизација не може да се додаде подоцна. И тоа е она што се подразбира под каскадни. На некој начин да го додадете по него, и тоа на некој начин рафинира на естетиката на веб-страница. Можете дури и да ја замени оние стилови со уште други дизајни за датотеки ако сакаш. Тоа не е пронајден, иако, во овој случај, бидејќи се разбира, јас тоа погрешно се нарекува. Па јас ќе треба да се утврдат дека во прв план. 

Па ајде да одиме напред и да предложи следново. Ајде да одиме напред и да го направите тоа. Почнувајќи со можеби вашиот HelloWorld датотека, дозволете ми да ги покани неколку на функција предлози. Значи, Викторија, си сакал да направи поголем дел од текстот, нели? Добро, така што можеме да се направи текст поголем. И ние ќе го секој извади надвор само еден проблем да се реши. Направи текст поголем. Јас не одам да се мачи пишувам ова, кога има куршум технологија право овде. Па така некои проблеми. Па ние ќе се обидеме да се направи текст поголем. Во ред. Што друго би било некој да предложи? Што друго би можеле да сакате да се направи во веб-страница? Ајде да излезе со краток список на работи а потоа да делегира на група да дознаам ова. 

ПУБЛИКАТА: [Беззвучен] 

Дејвид Џ MALAN: Океј, текст позиција на различни страни на страната? Во ред. Нешто друго. 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Тоа е. Значи gif е само различен формат. Ние само се користи, што, на PNG или JPG веројатно? Ние се користи JPG. Ако сте љубопитни, прекумерна одговорот на вашето прашање е jpg е генерално се користи за фотографии, затоа што тој поддржува милиони бои или 24-битна боја. А GIF е генерално се користи за, како, интернет меми овие days-- анимации, како анимирани GIFs. Но, тоа се случува да се користи помал боја бои, само 256 можни бои, но го поддржува транспарентност и анимација. А потоа, тука е png, која ја поддржува транспарентност и повеќе бои но не и анимација. Така, тоа е трампа. Значи додавање на GIF, сепак, ќе бидат функционално еквивалент на додавање на PNG или JPG. Да. Извор на сликата еднакви. Значи нешто друго. Ајде да излезе со нешто што ги испративме во Викторија да го направите тука. 

ПУБЛИКАТА: Додади копчиња за форма. Дејвид Џ MALAN: Добро. Па додадете копчиња за форма. И ние ќе го направи тоа еден заедно. Така што ќе биде совршен segue Веднаш по овој предизвик. Нешто друго? Што би можело да ви се допаѓа да се направи? На веб чувствува многу underwhelming ако тоа е се што може да направи. ПУБЛИКАТА: Сменете ја бојата на текстот. Дејвид Џ MALAN: Промена на што? ПУБЛИКАТА: Боја на текстот. Дејвид Џ MALAN: Промена на бојата на текстот. Во ред. Значи, ајде да го направите тоа. Само еднаш, па не дека си, само напамет, го прави токму она што јас го правам, Одам да го вклучите музика за можеби пет минути тука. Вие сте добредојдени да го користите Google. Вие сте добредојдени да ме праша, и Ќе шепот навестување во увото. Вие сте добредојдени да се погледне во текот на рамениците на другите. Но реши само еден од овие проблеми. Но, ние ќе направиме се за последен пат, на претставува една, ако би можеле, заедно. Значи пет минути за да се реши било кое од овие проблеми со помош на Google, интуиција, или било други достапни за да ви значи. 

[Музички] Во ред. Не се грижи, ако сакате да се задржи tinkering, но јас ќе се расипат неколку на овие одговори. Така, првиот предлог од Викторија беше да се направи текст поголем. Значи има неколку начини да го направите тоа. Јас сум во моментов врати мојот екран на оваа големина, иако сум зумира вештачки само за да ги гледам работите. И ајде да го направите тоа. Дозволете ми да оди напред и го имате некои генерички латински текст само така имаме нешто да се работи со. Значи ми го даде само еден момент. Ќе се направи три параграфи. ДОБРО. Ова ќе биде подобар пример. Така и за љубопитни, во мојот hello.html, јас само додадат три бесмислен Латинска ставовите само така имаме некој текст за работа со. И цел на Викторија беше да се направи некои од текстот поголеми. Па јас би можеле, како и досега, да одат во тука. И дозволете ми да го направи тоа на вистински начин. Јас ќе одам да имаат линк ознака што укажува на датотека наречен "styles.css", односот од кои едната е повторно "интерфејс." И тогаш јас ќе одам да го спаси и да се отвори овој "styles.css". 

Значи, како и досега, имам способност во овој CSS датотека за да всушност ја замени стандардната естетиката на веб страница, и естетика стандардно, се разбира, се прилично досадна. Тоа е вид на нормална големина на фонтот, црна текст, бела позадина, и така натаму. Па претпоставувам дека сакате да се направи сите на овој текст поголем. Јас би можеле да направите неколку работи. Во моето styles.css датотека, јас Може да се каже, знаеш што, се применуваат следниве да телото на мојата страница. Оди напред и да се направи големина на фонт 24 поени, кој е број би можел да се користи во Microsoft Word. Дозволете ми да се вратам на мојот веб- страница тука и да ја превчитате, и може да се види дека тоа е веќе многу поголем. И ние може да се добие малку луд, исто како што може во desktop-- го прават тоа 96 поени. Вчитај ја страната повторно. И тоа е добивање малку тежок за употреба во овој момент. 

Но, јас може да биде малку попрецизен. Наместо примена на овој интерфејс до органот на мојата страница, што друго би можел да се примени, наместо тоа, она што другите ознака што може сè уште функционира на ист начин? 

ПУБЛИКАТА: p таг? Дејвид Џ MALAN: P ознака. Па главата нема да биде точно, бидејќи на главата, вие всушност не можат да контрола на естетиката. Има или текст таму или не. Но, стр tag-- јас може да се нурне во малку подлабоко, така да се каже, на став тагови. И иако постојат три, тоа е совршено во ред, затоа што во CSS, кога јас само велат "p", овој значи применуваат следниве на секоја ознака што се совпаѓа со ова селектор, селекторот само е името на ознаката. Значи секогаш кога ќе ја видите "P" Примени големината на фонтот, и ајде да се направи повеќе разумен again-- 24 точка. И знаете што, само за добра мерка, ајде да се направи боја црвена само за момент. И сега, ако јас ја превчитате, сега види три грди ставови. 

Но, сега сметам дека сум вид of-- Сакам првиот став да скокаат на корисникот. Не сакам да се зголеми само големината на фонтот на сè. И така јас всушност сакаат да се идентификуваат или се направи разлика помеѓу овие ставови. Значи, да се ослободи од црвена, затоа што тоа е само вид на натруфен, и да одиме напред и да се направи големина на фонт 12 поени по дифолт, така што ние сме назад на нешто малку повеќе разумни. И сега јас само сакам да се зголеми големина на фонт од првиот став. Можам да го направите тоа во неколку начини, но еден начин на кој е можеби повеќето наставни на сега е да го направите следново. Дозволете ми да оди напред и да се каже, ова став, да има единствен број на "прва". Јас може да се нарече тоа што сакам. Јас би го нарекле "foo" или било кој друг збор, но јас ќе одам да го даде некои семантички значајно име како "прв". Ова е единствен идентификатор, проект, за мојот прв пасус. 

Она што сега можам да направам во мојата интерфејс е да биде малку попрецизен. Наместо да се каже, ќе се применуваат следниов до P ознака, Јас може да се каже following-- применува следново, или одберете, HTML елемент кој има единствен број на "прва". Што сакам да се однесуваат на тоа? Големина на фонтот на 24-точка. Значи имам две селектори сега. Еден прави сите ставови 12-точка. Но, ова, особено затоа што доаѓа second-- станува збор последен во file-- ова има каскадни ефект. Јас само го направи сите мои став тагови 12 поени, но ова сега каскади и надминува дека за било какви елементи во страница, било таг во страница чија единствен број е цитат unquote "во прв план." И хаштагот во овој контекст само значи "единствен идентификатор." Јас не го стави во HTML датотека. Јас, овде, да речеме цитат unquote "во прв план." 

Па дозволете ми да ја превчитате. А сега гледам, ах, ОК. Мислам, тоа не е толку убава, но тоа е вид на како предговорот на книга или нешто слично, каде што првиот став е поголем. Може да биде дури и попрецизно со само првите букви, но барем Сум остварува поголема контрола. Сега maybe-- можеби сакам да го направите тоа повремено за која било причина, и така јас не сакате ова да се се применуваат само на една HTML таг. Наместо тоа, ајде да say-- ајде исто така, го направите следново. Class = "увоз". Со оглед на тоа Проект се користи за уникатно идентификуваат една работа, еден таг, во вашиот веб страница, класа е замислена да биде користи на било кој број на елементи или ознаки на вашиот веб-страница. Така, тоа е еднократно. Еден проект не е еднократно. А класа е еднократно. 

И знаете што, за што филозофски reasons-- Јас не завршам thought-- јас ќе одам да се каже дека првиот став и вториот став се важни. Па јас ќе одам да се применуваат на класа наречена "Важно", дека, кога ќе ја спаси мојата датотека ја и повторно, нема но функционални влијание. Но, јас додадов некои Податоците во датотеката, вид на нешто посебно од основни податоци на датотеката, така што сега во мојот интерфејс, ако јас наместо да каже ".important" - што знаете, нешто што е важно, јас сум случува да се направи фонт-боја, red-- или подобро кажано не фонт-боја, само боја. Има недоследности во CSS за жал. И ја превчитате. Сега се забележи првиот два става се црвени но не и трето, затоа што само применуваат на класата на "важни" на првите две од тие работи. 

Значи во личните карти, ќе имаат способност мошне точно да наведете точно. Со часови, ќе мора reusability. Но, и во двата случаи, забележуваат вид на принципот добар дизајн каде што констатирано и од сите на естетика на мојот styles.css датотека. Значи нема неред овде. Нема спомнување на црвено или задебелени букви со кои се соочува или големина на фонт во оваа датотека. Наместо имам семантички, значајно карактеризира моите податоци како, тука е некои важни податоци. Еве уште некои важни податоци. Покрај тоа, тука е и "Првиот" од моите важни податоци. Значи HTML е за сите вид на означување, буквално, зборови и ставовите и конструкции во вашиот страница со овие мали совети, ако ќе, кои можете да ги некако потпора користење други техники како CSS овој начин. 

Така, во одговор на прашање на Викторија, ние може да се направи текст поголеми тој начин. Има толку многу други начини, но на фонтот tag-- отворена заграда "Фонт" - е всушност неколку години. И ова е проблем, исто така, со само потпирајќи на онлајн resources-- тие имаат тенденција да се застарени. И навистина, тоа е заостанато, бидејќи светот се реализира, што значи "font-size = 7" значи? Тоа не го прави тоа. И така за многу години и да се оваа day-- еден од несаканите истакнува овде е дека таа е, всушност, неверојатно болно уште понекогаш да се развие веб-сајтови за интернет, бидејќи на Microsoft и Google и Mozilla и другите често не се согласуваат за тоа како да се толкува спецификација како HTML. 

Постои правилник за HTML дека генерално се вели дека она што значи секоја ознака. Но понекогаш тоа е оставено на дискреционо право за спроведување на, дискреција и Google Мајкрософт. И така ќе многу често видете на веб страната нешто изгледа различно на компјутер од тоа го прави на Mac, и тоа е навистина, бидејќи, на крајот на денот, тие не го пробате добро на двете платформи. Но, тоа е, исто така, бидејќи разумни, паметни луѓе ќе се согласуваат и компаниите ќе се согласуваат, и така еден од предизвиците на програмирање за веб дизајнирање или работи за веб- е пишување на вашиот сајт во начинот на кој работи на секој веб прелистувач. Но, дури и дека е неразумно, нели? Има толку многу верзии на толку многу пребарувачи таму, кои, во одреден момент, исто така треба да се направи проценка на повик и ќе треба да одлучи како компанија, особено за е-трговија стил сајтови каде што си обидуваат да го користите најновите и најголема технологии за да се даде навистина добри корисник Искуство. Но, некои процент од вашите корисници може да уште може да биде користење на Internet Explorer 6 или 7 или 8, особено во зависност од земја што тие доаѓаат од. 

И така многу често се консултирани е нешто како "статистички веб пребарувач." И ако ние одиме to-- видиме Википедија и да видиме како до-to-date оваа шема е ако има е еден. Па тука може да се види каде пребарувачи всушност, се, според декември 2015 година, во согласност со Владата на САД. Chrome е на 42% удел на пазарот, а потоа од страна на IE во голема мера во корпоративното поставувања или компјутер поставувања, се разбира, проследено со Firefox, потоа Safari, а потоа Opera не направи картата тука поради некоја причина, а потоа другите. Можеби тоа е под други. Но, повеќе проблематично отколку што is-- ајде да видиме дали Википедија, исто така, има верзии на интернет прелистувачи version-- 

Ајде да одиме статистика пребарувач. IE. Дури и тоа не е доволно. статистика пребарувач. Мојата верзија. Тоа не се случува да бидат во право. Ајде да видиме верзии. Прелистувач удел на пазарот. Ајде да видиме дали ова доаѓа до. ДОБРО. Сега тоа е добивање на малку повеќе корисни. Па еве, да се забележи дека сите ние имаме различни верзии на интернет прелистувачи. И, Боже мој, ако look-- Chrome 48, Хром 47, Хром 31, Хром 45. Мислам, пребарувачи повеќе ажурирани, а понекогаш и некои од овие промени се значајни во однос на функционалноста. И така во одреден момент, производ менаџери или инженери треба да се направи decision-- вас Знаеш што, само 1% од светот се уште користите IE 7. По ѓаволите со нив. Ние едноставно не се случува да се поддршка на тој пребарувач. И што значи тоа да не го поддржи? Тоа би можело да значи дека копчињата не работат на вашиот веб-страница, или тоа би можело да значи форматирање е целосно исклучени. Или можеби ќе треба да се направи истата таа пресуда повик во мобилната овие денови, кога, ние сме нема да го поддржи iOS 5 повеќе. Така луѓето само треба да се надополни. Или ние нема да го поддржи Cupcake на Андроид оперативен систем за Android уреди, бидејќи, како што world-- како tech светот сака да се движи напред, тој вид на сака да го повлечете светот со тоа, така што тие не се треба да продолжи да биде компатибилни, па тие можат да понудат нови и добри карактеристики. Ова е навистина една од причините зошто толку многу компании се тркалаат автоматски ажурирања и вид на принудувајќи најновите верзии на софтвер на нас. А дури и компании како Apple ќе се најде решение на сила речиси или принудат вас во однос на пазарните сили да се купи нов телефон, бидејќи тие само нема да се ажурира вашиот стар телефон повеќе. Така да пропуштите на најновите и најголема карактеристики, бидејќи тоа е скапо за нив, како претпријатието за одржување на постари, веројатно инфериорни верзии на софтвер. Но Нето ефектот е дека ние, исто така, страдаат од тоа како добро. 

Па ајде да ги разгледаме во само неколку финалето работи овде. Ајде да намалам вистински пост некои од тие други куршуми, ако љубопитни. Значи, ако се обидуваат да, на пример, позиција текстот на различни страни на страница, јас ќе одам да се направи еден брз начин, но има различни начини на тоа. Дозволете ми да оди напред и да eliminate-- поедностави оваа како што следи. Дозволете ми да се вратам во мојата едноставна, едноставно ставови. Дозволете ми да се вратам во мојата styles.css. И јас сум само ќе го користи simple-- кој може да се гледа на Google или се потсетиме од earlier-- текст-align право. Ја и повторно пробајте. Сега се чини дека да биде подреден десно, како што може да се види на надземни тука. 

Ние можеме да го направите да изгледа малку повеќе книга-како, и можеме да кажеме "оправда" и ја превчитате. Сега тоа е убаво и плоштад на двете страни, која е вид на убаво. Уште еден гол што го имавме тука беше промена на бојата на текстот. Значи видовме дека со мојот црвен текст. И сега додадете копчињата за форма. Па зошто да не се обидеме да го стори токму тоа? Но, прво да одат на некој сајт кој повеќето од нас го користат секој day-- Google. И ајде да ги разгледаме во како Google всушност се работи. Но, јас ќе одам да го направите тоа. Прво дозволете ми да го направи тоа in-- Да, дозволете ми да одат на Google. Јас ќе одам да мора да одат во Google Settings, затоа што сакам да се оневозможи нешто што се нарекува инстант резултати. 

Така може да се забележи во Google овие days-- да се навратам и да се сврти ова. Значи, ако јас почнат да бараат за "мачки", како таков, се забележи дека не само што Јас се авто-заврши до врвот, одеднаш, на самата страница се чини да се промени многу брзо, како и, а тоа е Google со помош на јазикот наречен вклучите Javascript-се обидува да биде од корист. Но, за жал, тој вид на мензи до нашата дискусија на она што всушност се случува под хаубата тука. Па јас сум само вид на брзо исклучете инстант резултати. И јас одам да кликнете на Зачувај. И сега јас ќе одам да се отвори дека дијагностички алатки кои јас задржи отворот под јазичето мрежа. Па ајде да го направите тоа. Ајде me-- whoops-- дојдете на овој по малку. И дозволете ми да пребарувате за "мачки". 

И сега notice-- всушност, ова е добра можност за да разговараат за момент. Обрнете внимание на моментот кога type-- го спречи тоа. Престани. ДОБРО. Обрнете внимание на моментот кога го напишете буквата C, види на дното на екранот. А-Т С Што дното на овој екран, мојата јазичето мрежа, укажуваат на тоа што се случува секоја пат кога ќе напишете писмо? За жал, на жаба е многу оттргнува денес или детелина или што и да е тој. Што се случува секој пат кога јас ја внеле? И дозволете ми да го исчистите тампон и ја внесете повторно. So-- Whoops. Секој пат кога ќе напишете буква, C- А- T-- па нов ред очигледно постојано се појавуваат. Што значи секоја од овие редови претставуваат, врз основа на она што сум го видел и дискутирани волку далеку? ПУБЛИКАТА: А за пребарување? Дејвид Џ MALAN: А за пребарување, или повеќе генерички, HTTP барање од мојот интернет пребарувач со серверот. Па, зошто се прави HTTP мојот интернет пребарувач бара секој пат кога ќе напишете писмо? 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Да, тоа е давање на мене, овие авто-заврши резултати. Како, каде што овие Резултати од пребарувањето доаѓаат од? Па, секој пат кога ќе напишеш писмо, Google праќа повеќе и се повеќе и повеќе зборот јас сум пишување. Зошто? Затоа што тие сакаат да ми даде подобро и подобро, подобро предлог, листа на предлози, за она што зборот Се обидувам да се, всушност, заврши. Значи ова е да се каже буквално секој лик сте тип во Google се испраќа, во крајна линија Најголемиот дел, но, исто така, понекогаш еден во исто време, со цел да се спроведе овие авто-заврши функции, кога на податоци е, се разбира, на интернет. 

Сега, ајде да ги разгледаме во она што, всушност, се случува кога ќе кликнете на Google пребарување. А потоа ние ќе потпора оваа себе. Значи, ако јас дојдете долу сега на многу првото барање што се случило. Обрнете внимание на следново. Тоа беше испратен до прилично долга URL-- https://www.google.com/search? а потоа и целиот куп на работи. Ајде да видиме ова всушност сега во јазичето прелистувач себе. Ајде да се ослободите од лентата со алатки тука. Тука е страница на резултатите од пребарувањето. И информации тука е URL-то. Сега, што веројатно може да се погоди она што се случува овде во дел. Значи прво на сите, дефиниција. Ова очигледно е дестинација каде што се поднесува формуларот. Значи, кога јас ја внеле во зборовите: "мачки" и притиснете Enter, очигледно Google испрати внесување на мојот текст на овој URL што сум истакна таму, го намали пребарување. Излегува, во URL-то, нешто што се случува по знак прашање е, како што ние си велите пар клучна вредност кои се напишани во форма или на некој начин пренесува од прелистувачот на серверот. 

Затоа, секој пат кога ќе напишете влез во форма на веб и да биде испратен како што ние си се разговара, преку ГЕТ, еден од овие виртуелни коверти, содржината на тој envelope-- да, да ги задржи се полнети физички во плик во класата денес, но технолошки тоа е всушност се стави во URL-то. Така, всушност, дозволете ми да се кваси, преку ова. Каде ја гледате корисник влез? Каде ја гледате нешто дека јас ја внеле тука? Да, па "мачки". Нели? Па дозволете ми да го дестилираат ова во нешто поедноставно. Одам да го избришете сè за овој URL дека јас не ги разбирам, и јас сум само ќе ја напушти тоа како this-- / пребарување? q = мачки. Ќе видиме каде q доаѓа од во еден момент, но тоа се чувствува како на минимум количината на информации кои што се предвидени. И сега јас ќе одам да притиснете Enter. И ќе забележите дека се уште работи. Ние се уште се вратам еден куп на мачките. Така Google е познавач од тоа овие денови. Тоа е 2016 година, не во 1999 година. Значи има други работи кои ми прелистувачот испраќа на серверот. Но, тоа е минимално сите што е потребно. 

Значи она што се случува? Па, прво нека ми да оди напред и да си одат Вратете се на Cloud9 и дозволете ми да оди напред и затворете ми јазичиња порано. И јас ќе го направите тоа на мојот поседуваат само за момент. Одам да се оди напред и да се создаде нова датотека. И јас одам да го зачувате како google.html. И јас одам да се многу quickly-- Одам да се украде, всушност, некои на овој текст само за да заштедите време. Одам да го поставиш овде. Јас не одам за да се занимаваат со било стилизација тоа време. Ние ќе се нарекуваат "Мојот Google." И јас одам да се ослободи што се наоѓа во телото. И јас одам да го направите следново. Дозволете ми да зумирате. Образец action-- и како што јас накратко споменато earlier-- whoops-- како јас накратко што споменавме порано, дејството на форма е местото каде што ќе ги испрати податоци на. Значи google.com/search. И начинот Сакам да се користи може да биде една од две работи. Тоа може да биде "да", како што ние ги разговара, или тоа може да биде "пост". За сега, основните Разликата е во тоа, ако користите "добие" сите информации кои корисникот обезбедува добива испратени во URL-то. 

Тоа е одлично за нешта како пребарување мотори и неколку други апликации, но во какви околности би вие не сакате да се пополни формулар и да имаат информации кои се заокружи URL-то, како и во прелистувачот лента на прелистувачот? Каков вид на форми you-- направи ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Да, како што? ПУБЛИКАТА: лозинки. Дејвид Џ MALAN: Да, така што да се логирате на Facebook или на некој веб-сајт. Тоа е корисник влез од форма, поле за текст, но најверојатно не го сакаат тоа прикажани во URL-то на пребарувачот. Зошто? Мислам, можеби има некои безбедносни импликации на мрежата, но more-- се допаѓа, едноставно, што ако вашиот цимер, вашиот значајни други, вашите деца, вашиот брачен другар изгледа преку вашиот прелистувач историја? Таму е вашето право лозинка таму во историјата на прелистувачот. Дека не се чувствува како добар дизајн. Или дури и повеќе технички, Претпоставувам дека ти се обидуваш за да испратите фотографија на Flickr или Фејсбук или wherever-- кој е лесен за влез, иако тоа е малку повеќе interesting-- како можам да ставам слика во лентата со URL-то? Вие вид на вид не може. Можете вид на може. Но, навистина, јас сум под пресија да се замисли тоа го прават. Значи ми треба друг метод за да се постават слики на веб страница, и дека другите метод е наречен "пост". Но, за сега, ние само ќе зборуваме за "Добие", кој е поедноставен од двете. Тоа само ги става сите корисникот влез во URL-то. 

Па овде е форма Јас сум создавање. Сакам влез. И знаете што? Одам да се погоди тука. Одам да се потсетиме на мојот внесување на "П" за "пребарување". И мислам дека ова е еден од оригинални дизајни, можеби, од 1999 година. И тогаш типот на овој влез е само ќе биде "текст". И тогаш јас ќе одам да имаат друг влез тоа не треба име, како што наскоро ќе види, од типот на кој е "поднесе". И ова се случува да се ми даде посебно копче. И тоа е тоа. 

Па дозволете ми да оди напред и да се спаси оваа датотека. Одам да се вратам во мојата прелистувачот и одете на google.html. Enter. И тоа е вид на редок да се каже во најмала рака. Но, дозволете ми да оди напред и потрага по "мачки". И ќе забележите Јас сум моментално на оваа адреса Cloud9. Но, во моментот кога ќе кликнете тоа, каде да се надевам дека ќе заврши? 

ПУБЛИКАТА: Google. 

Дејвид Џ MALAN: Google. Значи, да кликнете на Прати. И навистина сум повторно спроведува Google. Нели? Тоа е поедноставно. Тоа е полесен. Мислам, мојот код е многу подобро отколку нивни, од неред што видовме претходно. И знаете што? Одам да го зачинат ова се малку. Јас не се споменуваат ова порано. Постојат тагови како H1, на Заглавие 1, најважниот наслов во една страница. "Мојата Google", јас ќе се јавам ова. Дозволете ми да ја превчитате. Тоа е во потрага малку подобро веќе. И, всушност, знаеш што? Јас сум already-- излажав. Реков дека не требаше да стил тоа, но јас ќе одам да стил тоа како порано. И моето тело ќе биде, да речеме, текст-align центар. Тоа повеќе личи на Google веќе. 

Ми треба еден празен ред, сепак, за тоа копчето Испрати. И што излезе, ќе може да се користи ставови, или може да се повеќе буквално да кажам, дај ми прелом here-- на br таг. И ако јас вчитајте ја оваа, сега тоа не оди таму. Тоа е малку грдо, па јас може да се направи повеќе линија паузи, но ајде да не се премногу алчен тука. Па сега ајде да видиме дали се работи за "кучиња". Се чини да се работи за "кучиња", како и. Значи, што е огромна готова брза тука? One-- не беше огромен скок на воведе уште неколку ознаки, како таг форма во влез таг. Но пофундаментално е, сите ние сме прави се проширува нашето разбирање на HTTP и фактот кој се формира на крајот се смени што е во URL-то на пребарувачот, и така, затоа, можеме да механички обезбеди влез на сервер со тоа што HTML форма и да се знае дека серверот го разбира HTTP, исто како нашето тело разбира, како, тресење мојата рака, истиот протокол, и така ќе се вратам на одговор дека ние на крајот се очекува. 

Па ајде да се обидеме да се направи една Последното нешто што сега со мобилни, и јас ќе make-- јас ќе додадете овој код на слајдови. Значи, ако сакате да нескопосник, ќе сигурно може да го земам од таму. Но јас ќе одам да се оди напред и да се направи една работа. Одам да се оди напред и да отвори мојот индекс page-- мојот здраво страница, како пред, за кое има многу на овој faux-латински текст, или бесмислен латински текст, и has-- тоа би изгледало вака во оваа големина на фонтот. Но, дозволете ми да оди напред и да го направите тоа. Одам да се оди во Cloud9. И вие не мора да се направи овој чекор. Јас само ќе го сторам тоа. Одам да кликнете Share. И ова е карактеристика само на Cloud9, при што Можам да ја направам мојата околина јавноста. 

И само за доброто на демонстрација, дозволете ми да го направите тоа. Одам да се направи моето барање јавноста. Забележете тоа ме предупреди, сум Јас сигурен дека сакате да го направите ова, затоа што тоа се случува да се направи сите во светот, без разлика дали тие се тука сега или гледање на видео подоцна на Интернет може да се види она што го гледам. Но, тоа е во ред. Јас ќе одам да се каже "Готово". И дозволете ми да ве охрабрат, ако сум го правела ова correctly-- дозволете ми да го пробате во прв план. Оди напред, ако не mind-- во прелистувачот на вашиот компјутер, одат на оваа адреса, и се надевам дека ќе видите мојата латински текст. И да биде јасно, тоа е не работи на мојот лаптоп. Тоа е во облакот. Тоа е на Cloud9, буквално, но Јас го направив мојот простор јавноста така што секој на интернет да пристапам до мојата Латинска почетната страница. 

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

ПУБЛИКАТА: Да. Дејвид Џ MALAN: Да. Да. ДОБРО. Така можам да се одржи до вашиот телефон за само еден миг? Па, се надевам, ако се пристапува тоа, таа треба да изгледа речиси прочите. Тоа е still-- Мислам, тоа е нечитливи заради латински. Но, тоа е, исто така, прочите за што друго? Како, што ќе се налути за тоа? ПУБЛИКАТА: Тоа е мала. Дејвид Џ MALAN: Тоа е супер, супер мал. Па како можеме да го надминете овој? Тоа е супер, супер мал на телефонот на Викторија и, ако го влечат тоа до себе, веројатно мали на вашиот телефон, како и, освен ако овозможен поставките за пристапност. Што е тоа? Вие може само да изклинвам и зум, кој е изводлив, но тогаш ќе се види само неколку зборови во исто време. Па почекајте една минута. Знам како да го поправите ова. Нели? Јас може да се користи CSS, и јас може да се промени големина на фонтот од 12 поени и 24 поени. Но, пропратен ефект на тоа, се разбира, ќе биде сега, на десктоп или лаптоп, Сега текстот е двојно поголем. И така тој вид на ќе биде убаво да се направи разлика помеѓу уредите, и испоставува таму начини тоа да го направам. Постојат неколку различни начини, всушност, при користење на CSS и познавач карактеристики дека нема да одат во во голема детали, вие во суштина може да пребарување на пребарувачот и да каже, Ако вашиот екран е помала од оваа многу пиксели, користете ја оваа големина на фонтот. Ако вашиот екран е поголем од овој многу пиксели, користете го ова на другите големина на фонтот. 

Вие може да биде дури и познавач уште. Ако некогаш сте посетиле веб-страница, која, на десктоп, има голем мени можеби и исклучување на страна, а потоа сите на содржината е на страната на која menu-- тоа е вид на заедничка парадигма. Мени на левата, содржината на право, или обратно. навистина не работат на мобилни телефони кога вашиот екранот е само тоа многу пиксели. Значи почести на мобилен е, вашето мени одеднаш ќе се пропадна, и треба да се кликнете на копчето за да ја видите, или на веб страната ќе се стави на менито над него и го стави на содржината под него. И може да се имплементираат овие работи на повеќе начини, исто така. Можете да побарате вашиот програмери, Еј, тим, во секое време ќе видите HTTP барање од Андроид уред, уредот Мајкрософт, Гугл уред, уред на Apple, користете го ова големина на фонт и го користат ова мени, или на друго место го користите овој стандардно поголем изглед. 

Сега, со помош на кој основните техника денес може да ги користат инженерите да се знае дали тоа е iPhone, Андроид телефон, лаптоп, десктоп посета на серверот на компанијата? Каде што тие се добие таа информација? 

ПУБЛИКАТА: заглавието? 

Дејвид Џ MALAN: Да, насловот на HTTP. Така што секој HTTP барањето доаѓа од нивните клиенти на нивните сервери вклучуваат, во таа виртуелна плик, целиот куп на HTTP заглавија, од кои еден е прелистувачот и оперативниот систем дури, ако се грижите да тоа ниво на детали. Сега, тоа е криптичната изглед стринг, но постои софтвер кој само ќе поедноставување на тоа, а вие само може да побара во програмирање code-- PHP, Java, C ++, whatever-- што телефонот е this-- што уредот е овој корисник користите? И тогаш може да се каже, да им покажеме на оваа верзија на сајт, ако тоа е телефон. Покажете им дека оваа верзија на сајт, ако тоа е лаптоп или десктоп. Но, можете дури и не треба од страна на серверот комплексност. Можете да го направите дури и наједноставните работи. 

Одам да го направите тоа. Одам да се оди напред во мојот Cloud9 животната средина, а јас ќе одам да додадете ознака што го виде во Google порано. Таа се вика на metatag. И никогаш не се сеќава на ова еден, па Одам да ја транскрибира тука. Мета име = "порта", а потоа содржината = "width = ширина на уредот, intital скала = 1 "и тоа е тоа. 

Па тоа би можело да биде како магична инкантација. Тоа не е сето тоа е јасно, но тоа има нешто да се направи со гледиштето, и гледиште е само тело на веб-страница, правоаголни регионот која дефинира поголемиот дел од страната. И ова е само кажувам прелистувачот, знаеш што? Направете ширината на оваа страница ефикасно еднаква на ширината на уредот. Со други зборови, не се претпостави дека имаш вид на неограничен простор. Да претпоставиме дека имате само колку простор, како на самиот уред е голема. И така сега, ако јас вчитајте ја оваа во мојот интернет пребарувач, не гледам промени. Но, ако јас го направи ова и correctly-- дозволете ми да премине мојот fingers-- ако сите што Вчитај ја страната повторно вашите телефони, нели види една огромна промена? Да, е that-- 

ПУБЛИКАТА: [Беззвучен] Дејвид Џ MALAN: Да. ДОБРО. Па веројатно повеќе може да се чита во моментов? Сеуште мал, за да биде фер, но не толку мали што ќе биде неподнослив. И јас секако може да ја пребришат оваа понатаму со CSS или на страната на серверот, но се повеќе она што си гледајќи се повеќе и повеќе функции да бидат додадени во клиент-страна environments-- JavaScript, како ние ќе разговараме утре, CSS, и така HTML-- дека сите овие прашања може да се направи на клиентот со цел да се мачат сервер за многу помалку, а не мора да остане во чекор со, На пример, на постојан напад на новиот оперативен систем верзии, нови верзии на прелистувачот. Вие само може да ги споделите со прелистувачот побара од уредот, колку е голема и да си, а потоа направи малку логички одлуки врз основа на тоа. Но, ќе видиме повеќе можности за логички одлуки утре во контекст на програмскиот јазик. 

Значи, било какви прашања, тогаш, на веб развој? Денес не е веб програмирање, по себе, бидејќи повеќето се што ние го сторивме беше многу естетски, ако сакате. Не постои донесување одлуки во на кодот кој го имаат напишано, и така тоа е причината зошто е HTML маркап јазик, не е програмски јазик. Но, утре ние ќе се брз поглед, во крајна линија, на JavaScript, која е вистински програмирање јазик, кој ни овозможува да се направи малку повеќе. 

Некакви прашања? Па, дозволете ми предложи два можности опција за домашна задача. Еден is-- овие Cloud9 сметки нема да истече. Вие сте добредојдени да се користи нив да нескопосник со. Тоа е слободно ниво на услуга. Сфатат дека, ако при создавањето вашиот работен простор, што го направи тоа јавно, што не значи дека некој на Интернет може да се види она што го пишувате. Па можеби само се разгледа не засрамувачки себе ако сте ставање вашиот прв веб страница таму јавно случајно, но никој не се случува да се знае да се погледне таму во секој случај. 

И two-- дозволете ми да се фрли до овој URL, како и, особено ако дојде денес малку помалку удобно од другите, сигурни што значи сето тоа работи. Сфатат дека многу повеќе од ова видео, што е и добар начин да се заспие а исто така и да се смее додека тоа, исто така, има многу интересна societally и релевантни безбедноста дискусии во него од Јован Оливер, иако комичар. 

Но, ако не постојат дополнителни прашања, што нè доведува до рецепцијата. Па зошто да не се вртам на музика. Треба да има пијалаци и закуски надвор. Среќен сум што можам да се мешаат за што додека луѓе би сакале, одговори на прашањата на уште еден-на-еден. Но, во спротивно, вие сте добредојдени да ги тргнеме во секој момент, и ќе се видиме повторно утре наутро за малку повеќе. Добро, благодарам.