[Powered by Google Translate] [Седмица 7, Продължава]
[Дейвид Дж. Малан, Харвардски университет]
[Това е CS50. [CS50.TV]
Добре. Welcome Back. Това е CS50,
и това е края на седмица 7.
Така един от тези глупави малки неща, които обикаля интернет
и ние slurped, и сега следва да направи малко шантавите смисъл за вас.
Е, това е смешно с този човек, отколкото е било за вас, момчета.
Говорейки за добре, момчета,
днес е рождения ден на Нейт.
Да ви даде усещане на колко добър Нейт и аз сме
уеб разработки въз основа на клас в понеделник и сега на този,
Мислех, че ще спра на Нейт начална страница, ако не съм го виждал още.
Това тук иа Нейт HTML.
Така че, да види изходния код, ако искате да видите как да направите това, както и Нейт,
ако можем да ви embarass само накратко, персоналът имаш нещо, което
ако искате да споделя някои десерт с някои от децата в класа тук.
Ако искате да хайде надолу.
Всички ръкопляскат и са много хубави, но никой не е седнал някъде близо до Нейт,
по някаква причина, в зоната назад.
Така че може би можете да намерите някои хора, за да се насладите на тези с.
Честит рожден ден, Нейт.
>> Допълнителни 'Здравей!': Ние показахме няколко клипове от нашите CS50x ученици.
Ако искате да видите кой друг е в света
че след заедно, можете да се отправите към този URL
където Йосиф, един от нашите TFS, взети заедно монтаж на видове
на всеки, който е представянето на тези клипове, сред които Рик Астли.
И ако превъртите чрез тях, това е наистина доста вдъхновяващо
за да видите разнообразието на страните и градовете, от които хората са сигнализиране.
Така че, ако искате да погледнете в това, че ще бъде до края на семестъра.
Днес ние продължаваме нашия поглед към уеб, уеб програмиране, HTML и други подобни,
и ние също обяд идва този петък
ако искате, и по-специално, не са го направили преди.
Тема Този петък ще бъде рождения ден на Нейт,
така че ако биха искали да имат обяд рожден ден с Нейт
и други, някои от нашите приятели от индустрията,
моля глава към този адрес там.
Пространство, както винаги, е ограничен. Също така, ако сте забравили,
осъзнават, че следващата седмица е крайният срок за проблем, 4, лов,
, при която след възстановява всички тези JPEG файлове от card.raw,
вас и вашите раздел приятели, ако искате, може да опитайте да снимате
, тъй като много от компютърни специалисти от тази карта с памет е възможно,
и вие и вашата секция ще спечели страхотна награда.
Обърнете се назад към спецификация pset 4 какво да представи и кога.
Също така, ако искате да имате ръкоделие увековечен
на интернет страницата на курса и нейната история на облекло,
знаете, че сте дошли сега, за да започне подаване на проекти
за тази година T-ризи и горнища и други подобни.
Ние ще направим всичко възможно, за да се включат колкото се може повече, колкото можем,
но ние ще трябва някои от членовете на персоналът за преглед на всички проекти
да се уверете, че те са в съответствие със спецификациите,
и след това изберете обикновено една шепа от тях, за да бъдат изложени.
Така че, ако вие сте този тип конструкция, просто знам, че изискванията
за графика са PNG, най-малко 200 DPI,
те не трябва да бъде повече от 4000 x 4000 пиксела,
и не повече от 10 MB, но сте добре дошли да използват неща като
Photoshop или GIMP или различни програми на графични,
онова, което имате на ваше разположение.
>> На хоризонта е окончателния проект. Окончателният проект наистина е кулминацията на 50 г.
като на всички задачи в хода,
наистина това е вашата възможност да направите своя собствена нещо.
И това може да бъде просто да се направи нещо за забавление,
тя може да бъде за решаване на някои належащият проблем, студент група има,
за някой нов уебсайт, някакъв нов механизъм за събиране на данни.
Тя може да бъде мобилно приложение за Android, IOS.
Наистина, небето е граница, и през следващите няколко седмици,
като преход от C до тези на по-високо ниво езици като PHP и JavaScript,
ще откриете себе си все по-запознати с някои реални техники,
някои реални инструменти, както и да допълни, че
знаете, че разбира се, има история на семинари,
, като през следващите няколко седмици, някои от преподавателския състав
и наши приятели от територията на колежа ще предлагат опционални семинари
които излизат над и отвъд това, което обикновено се прави в раздел
да ви запозная с неща като програмиране Android,
да ви запозная с неща като IOS програмиране
или по-напредналите техники за уеб развитие.
Има цяла история от тях вече са онлайн.
Ако отидете на cs50.net/seminars, ние сме били прави това от доста години,
и ще видите, че архивират тук с PDF файлове и видеоклипове и други подобни
са няколко дузина клипове на семинари.
Миналата година, например, имахме семинар за acing на вашите технически интервюта,
ако сте всъщност търсят да си тръгна и да направя стаж или на пълен работен ден концерт.
Развитие на Windows Mobile, Android развитие, Google Maps,
API, CSS, разработване за BlackBerry, Emacs.
Наистина, сте добре дошли да погледнете на всеки от тези семинари в удобно за вас време.
И ние ще се държи някои нови този семестър, както добре.
>> Така че това, което е напред с окончателния проект?
Ами, на първо място, въпреки че тази дата е малко неизбежна,
това е наистина само една възможност да започнем да мислим за окончателния проект съвсем реалистично.
Ние знаем само началото на някои от това, което ние все пак ще разгледаме в хода,
HTML, PHP и други подобни, но всички сме запознати с уеб
и аз пристрастия този разговор към мрежата само защото
повечето хора до края правене на уеб-базирани окончателните проекти,
но това по никакъв начин не е необходимо условие.
Използване на C е добре, цел C, Java,
всеки друг език, може би знаете или искате да знаете е доста добре.
Но за да получите сокове, произтичащи първоначално, ние ще очакваме представянето на preproposal
, които на PDF на сайта, който е в cs50.net
и в горния ляв ъгъл ще видите окончателен проект
е спецификация за окончателния проект,
и там подробности относно preproposal и други подобни.
До голяма степен се свежда до имейл на преподавателската ви колега
само за да завърже разговор с него или нея, за какво си мислиш.
На projects.cs50.net е хранилище на идеи от хора на територията на колежа
ако сте се борят да излезе с някаква идея,
и manual.cs50.net/APIs е хранилище на връзки към APIs.
>> Какво, обаче, е API?
Какво е API? Казвал съм го поне два пъти
според на преписи от последните няколко седмици.
Какво е това? [Student, неразбираем]
>> Добре, добре. Така програмен интерфейс нещо.
Интерфейс за приложно програмиране, а това може да отнеме няколко форми,
но това наистина се свежда до код
че някой друг ХС писмено или данни, че някой друг е събрал
, който е на ваше разположение в някои програмни начин.
Можете да пишете код в C, PHP, Python, Ruby,
независимо от езика си на избор обикновено е
и може по някакъв начин да надграждат някой друг функционалност
или на някой друг набор от данни.
Например, ако отидете на този линк тук,
и на следващата страница ще видите чифт връзки
която имаме APIs CS50, които са много Харвард-ориентирана, и след това на трета страна APIs.
Сред трета страна APIs са наистина полезни неща
като е в състояние да изпрати SMS на хора,
могат да получават SMS текстови съобщения от хора.
И подобни неща, които може да нямат представа как да се прилагат,
но благодарение на услуги, някои безплатни, а някои търговски,
може да се изгради на върха на тях и да направи нещо от интерес за вас.
Сред APIs CS50 са тези колежа ориентирани неща, като
Харвард курсове, енергия, събития, храна, карти, новини, туитове и Shuttleboy собствена,
и те са APIs, които изглеждат малко нещо като това.
>> Остави ме да извадя на API HarvardFood.
Ако някога сте били уебсайт HUD, вероятно сте били там
да видим какво има за вечеря или да видя какво време е известно г-зала.
Е, това не е особено лесен за навигация,
и какво от това, което направихме преди известно време писахме софтуер,
се случи да бъде в PHP, че всъщност екран ожулвания цялост на уебсайт HUD.
На екрана нещо остъргвам означава да се напише програма на език, като PHP
, който се преструва на браузъра, въпреки че може да го стартирате в командния ред,
, която се преструва на браузъра, се свързва към уебсайта,
изтегля HTML, езика, на който е написано,
и след това го чете, или по-точно, тя прави разбор
горе до долу, от ляво на дясно.
И това, което направих, беше писахме нашия код по такъв начин, че
всеки път, когато видя нещо в този HTML, което изглеждаше като нещо в менюто,
като хамбургер, щяхме след това да импортирате, че в нашата база данни.
И всеки път, когато видя хранителното съдържание, ние ще внасят в нашата база данни.
И това, което направихме, беше да се възползва от факта, че HUD сайта,
въпреки че тя може да бъде малко предизвикателство за нас, хората, за да се движите
под капака на HTML, генерирани от собствените си компютърни програми.
Така че всички HTML им, въпреки че може да изглежда разхвърлян,
като повечето сайтове Под капака следва модел.
Така че ние просто прекарали няколко часа разберете този модел
, така че в края на краищата, ние изхвърлите всички разхвърлян HTML,
всички естетиката на смели изложение и курсив и други подобни,
и това, което сме в състояние да направи, е да се изложи, че едни и същи данни.
Така например, по този начин.
Така че ние, в съответствие с документацията тук,
да информира света, че ако поискате URL
че прилича на това, food.cs50.net / нещо,
и ще ви даде определени параметри, които ние ще говорим днес,
като края на дата и час, време за начална дата, грис и т.н.,
какви са нашите сървъри ще се върне към вас, например,
се CSV файл, запетая separted ценности като файл на Excel,
съдържащ всичко за закуска на тази дата през март миналата година
, когато се случи да напиша тази документация.
>> За тези, запознати, CSV не е единственият файлов формат.
Има и друг формат, който е по-гъвкав
JSON, JavaScript Object Notation.
Данните могат да се върнат в този формат.
Така че за вкъщи тук е, че независимо дали сте се потопите в този API
или някой друг от CS50 или нещо там в интернет,
или изобщо не осъзнават, че светът е все по-често започна да се стандартизират
как общувам машини.
Ние използваме стандартни формати за данни като CSV или JSON.
И какво означава това за вас, можете да напишете интересна част от програма
, която ви позволява вашето потребителско търсене антре меню за хранене,
, който им позволява да създавате списъци с любими клипове, която ви позволява да ги получите текстови сигнали
, когато любимата им храна е на път да бъде връчен в някои г-зала
чрез използване на чужди данни и комплекти за изграждане на върха на тяхната приложен програмен интерфейс (API).
Така че повече под формата на семинари и документация, че имате тук онлайн.
Така че тези, които тогава са APIs.
>> Това ни връща към HTML. Бързо рекапитулация.
Какво е HTML?
[Student, неразбираем] >> Добър. HyperText Markup Language.
Някой друг, какво е Hypertext Markup Language?
HyperText Markup Language.
Добре. Така че, HTML, хипертекст.
HyperText току-що се отнася до Интернет, за по-голямата си част.
Markup означава, че той всъщност не е език за програмиране, HTML.
Това не е език, който можете да изразите логика инча
То не трябва цикли. То не трябва условия.
Тя не разполага с функции, сами за себе си.
Вместо това, тя има тези неща, наречени етикети, или по-правилно, елементи.
И тези елементи имат начален маркер и краен маркери,
или отворени тагове и затворени тагове, и това, което тези тагове обикновено означава за браузър е,
започнем да правим нещо и след това да спрем да правим нещо, въпреки че има изключения от това.
Понякога това е просто "сложи край на линията," например.
И видяхме примери, че на другия ден, между смели изложение,
редове, а след това две други етикети.
Така че HTML е езикът, на който са написани уеб страници.
Така че, ако отида в нещо като Google.com
и издърпайте нагоре просто си начална страница,
припомни, че ако кликнете с десния бутон на мишката или контролира кликнете
и гледам при източника на изгледа на страницата, обикновено
това е пълна бъркотия тези дни под предния капак, но това е защото
компютри не се грижи за празно пространство, така че това не трябва да изглежда доста.
Но ако увеличите на части от него,
забележите, че Chrome, само за да бъде хубаво, цвят кодирани неща.
В действителност, това е първият маркер, който видяхме в една уеб страница.
И отново, HTML 5, последната версия на този език,
няма това нещо в началото,
<! DOCTYPE HTML, независимо дали са малки или главни букви,
но това е просто нещо като стандарт, който казва, хей свят, тук идва HTML файл във версия 5.
>> Тук започва интересната част. Така <HTML, и тогава имаше две деца
на HTML елементи последен път.
Какви бяха тези две основни деца?
Главата и тялото, като човек с татуировка преди малко.
Има две части на уеб страница, главата и тялото,
и изземване, а след това, че може би най-простият уеб страница, можем да направим изглежда по този начин.
И аз съм го отстъп само за да бъде вид на чисти и спретнати, с моя код,
но това, което е наистина важно тук е, че има някаква йерархия.
И всеки маркер, който отворил съм съм затворен и че поради тази симетрия
за всички на маркиране, което съм създал.
Така че последния път, когато започнах да пиша уеб страници на собствения си лаптоп.
Отворих редактиране на текст, аз спасих файла като hello.html,
След това повлече файла на браузъра си, и готово, имах страница в Интернет.
Сега, това не е точно така, имах страница на моя твърд диск,
и аз бях буквално единственият човек в света, който ще видите, че уеб страница в браузъра.
>> Така че днес, ще се въведе реален уеб сървър
и понятието за действително служи съдържание в Интернет
и как всичко това започва да се поберат заедно.
Така се оказва, че през цялото това време в уреда CS50
сте имали уеб сървър на вашия компютър.
Ние сме в справедливостта, само го използва за Gedit, звъня, за GDB и други подобни,
, но също така са инсталирали от нас за вас в уреда е уеб сървър,
и че уеб сървъра се случва да бъде безплатен, с отворен код,
един от най-популярните в света, наречен Apache.
Повече техническа име е HTTPd г за услуга,
което е технически дума за даден сървър.
Така инсталирани в CS50 уред е уеб сървър, както и какво означава това?
Е, уеб сървър, концептуално някои сървър в Интернет, който служи на уеб съдържание.
Когато го попитали за даден файл, той плюе на HTML, който композира този файл, и готово.
Вие виждате началната страница някои сайт.
Но сървър е по-точно, част от софтуера.
То не трябва да бъде на физическа машина, той просто трябва да бъде част от софтуер, работещ.
Така че CS50 уред, разбира се, е част от софтуера
въпреки че това е нещо преструвайки се на машина.
Преструвайки се на компютър вътрешността на компютъра,
, но това просто означава, че уредът със сигурност може да тече неща като уеб сървъри.
Тя може действително да работи имейл сървъри.
Бихме могли да стартирате сървър за съобщения в уреда, ако искаме да
и наистина можем да се стартират един друг тип сървър, известен като сървър за база данни, MySQL.
Но повече, че през следващата седмица.
Това означава, че всъщност може да посетите уеб страници
вътрешността на уреда ми с помощта на браузър вътре в уреда
или дори на моя собствен лаптоп, Mac или моя компютър.
И така, какво означава това? Оказва се, че всеки път, когато работите с Linux компютър,
му прякор е "локалния хост.
Не име на домейн, защото не сме купили име на домейн
нещо подобно на уреда, така че неговото име по подразбиране е локалния хост.
>> Но за да получи уреда, за да започнат да се показват на уеб-страници,
ние трябва да ги създадете първата.
Така че нека да го направим. Нека отидем в терминален прозорец тук
и да забележите, че аз съм типичен Джон Харвард ред.
Нека отида напред и да въведете ли, и ние ще видите някои познати неща от този семестър,
десктоп, сваляния, Dropbox и т.н.,
но сега започваме да насочим вниманието си към една двойка.
На много от Linux уеб сървъри има тази папка, наречена обществен HTML,
но отиваме да пропуснете, че за сега и се съсредоточи върху това, хостове.
Някой знае ли какво vhost е?
Само глупав жаргон за виртуален хост,
и какво означава това е, че на един типичен сървър
всъщност може да бъде домакин на множество сайтове.
Можете да си купите име на домейн, като foo.com, и можете да го бъде домакин на предприятието на сървъра.
Но можете да си купите също bar.com и домакин на същия сървър.
Причината е, че браузърите са достатъчно умни, за да информира сървъра
, когато потребителят иска някаква уеб страница, какво име на домейн потребителят иска началната страница.
Така че това, което е хубаво за това е, че не е нужно един физически сървър
или CS50 уред за всеки уеб сайт, може да искате да създадете.
Можете да използвате един и същ сървър и разработване на сто различни уебсайтове.
И наистина, ако сте човек, който се опитва да започне уебсайт,
независимо дали става дума за шега или за бизнес, обикновено ще излязат в интернет,
и ще се плаща на някого десет долара на месец, сто долара на месец
да бъде домакин на вашия сайт за вас.
И начина, по който работи, е, че те се зареждат други хора
десет долара на месец или сто долара на месец
да бъде домакин на уебсайтове на други хора на една и съща техния сървър.
Причина те могат да направят, че е така, защото на тази функция, наречена bhosts,
но повече за това, когато дойде време за крайните проекти.
>> За сега, нека просто да се потопите в там. Така CD хостове, и ако напиша ли сега,
забележите, че има папка в локалния хост.
Това е, защото по подразбиране, уредът цифри
ти никога няма да тече един сайт на уреда.
Това не е точно реалния свят, това не е реалния свят уеб сървър.
Така че нека да отиде в локалния хост, а сега ще видим там
един последен директория, наречена HTML.
Така че това е малко по-дълбоко, йерархията, но ако и когато
решите да започне разработването на множество уебсайтове през следващите месеци или година на н
този вид структура на папките има тенденция да бъдат полезни.
Сега нека отидем в HTML, както току-що,
тип ли е, и нищо не е там.
Така че сега да вървим напред и да направите това. Нека се отвори Chrome
вътрешността на уреда, и ме пусна да http://localhost.
Така буквално името ми уред, въведете и получавам индекс /.
Това не е наистина ми показваше нещо на интереси,
но се оказва, че това, което виждаме е, че папка, HTML.
Няма нищо вътре в тази папка точно сега,
така че вместо това, какво ще трябва да направя, е първо да създадете файл.
Създаване на HTML файл, както направихме в понеделник, но този път го вътрешността на уреда.
За тези от вас, които се опитват да следват заедно с лаптопи,
нека направете едно настрана, че ще бъдат включени в уеб-базирания pset,
но за да се получи това, за да работи за първи път,
вие ще трябва да стартирате тази команда: Sudo началото HTTPD.
И това отново ще се повтаря в последния pset,
но ако играеш у дома, уеб сървър
е изключено в уреда, и това е, така че да не се изцеди RAM
и памет за 7 седмици на семестъра, когато ние не се нуждаят.
Така че ще трябва да стартирате тази команда веднъж, и ще получите мощност като тази.
Тогава би трябвало да могат да играят заедно.
Сега нека се върнем в тази папка.
Тази папка е празна, така че нека да започнете да създавате файл,
Gedit hello.html.
>> Добре. Gedit е отворена, както обикновено. Остави ме да DOCTYPE, HTML,
HTML, ме остави пред себе си и да започне затворих маркери предварително.
Сега имам на главата. Позволете ми да отида напред и затваряне на главата,
нека сега направете заглавието на страницата, здравей свят като миналия път,
близо заглавие, сега позволете ми да направя едно тяло.
Тук ще кажа здравей, свят с някои exclams
за да стане ясно, че това е друг низ.
Затвори тяло, и сега ме пусна напред и подаде спаси.
Нека да се върна на моя терминален прозорец, и ако пиша ли,
Трябва да се предполага, hello.html. И аз правя.
Така че сега, нека се върнем към браузъра си, щракнете върху презареди,
и можете да видите, ние наистина сме вътре в този HTML папка.
Не виждам още уеб страница, това е уеб сървъра Apache,,
просто ми показа списък съдържанието на тази директория.
Точно като Mac OS или Windows обикновено на собствения си локалния твърд диск.
Така че, ако искате да видите тази уеб страница, да кликнете върху тази връзка тук, hello.html,
И наистина, това е, което аз очаквах да видя.
Сега, отново, това не е URL, че някой от вас да посетите сега,
защото за вас, локалния хост, ако имате лаптоп,
тя се позовава на собствения си например на уреда.
Това е от моя личен уред,
но това е нещо тъпо за мен да има, да има
потребител като мен кликнете върху hello.html действително да видите съдържанието на тази страница.
Оказва се, че уеб сървъри като Apache ви позволяват да имат по подразбиране за всеки уеб сървър.
Забележете, имаме hello.html.
Каква е команда в Linux за преименуване на файл?
>> MV за движение. Така че нека да направим това,
и ме остави да преименувате hello.html index.html.
Нека ме въведете ли да потвърдя, че сега е преименуван.
Сега това се случва - ако аз се връщам към локалния хост,
забележите, че сега съм автоматично виждайки, че уеб страница.
Това е идентична всъщност прави / index.html,
но хубавото е, че уеб сървърът е фигуриращ
о, ако имате файл, който, от конвенции, се нарича index.html,
нека покажем на потребителя, че файлът по подразбиране
, а не някаква глупава списъка с директории, които изобщо не е лесен за употреба.
Всъщност, повечето уеб сайтове, които посещавате в интернет, не е нужно списък на файловете да кликнете върху,
те просто ви показва съдържанието. Така че как можем да направим това, index.html.
Така че това е забавно и добро, но това е доста проста уеб страница.
Нека вървим напред и да се отворят index.html в моите хостове,
локални хостове, HTML директория, и нека добавим нещо на по-голям интерес.
Така че има здравей свят, нека вместо да каже "Това е CS50, Харвардския колеж. . -
Така че в началото на описанието каталог на курсовете на някаква там.
Сега, ако се презареди, че трябва да видите това в моята начална страница.
Добре, и аз виждам, че, но предполагам, че искам да изброят повече съдържание в този файл.
Мога да сляза тук и да кажа, предпоставки никой,
въпреки че някои от вас вероятно са искали, "Ха-ха-ха, няма предпоставки.
Но официално. Така презареди, и сега ние имаме същата приумица, която видяхме за последен път.
Но защо е така? Това беше просто решение.
Защо е тази страница, разбити?
[Student, неразбираем] >> Да, ние сме решили този преди
като изрично се казва на браузъра "нов ред".
И това е така, защото, отново, браузърът е само да се направи
изрично какъв език за маркиране казва да се направи,
така, макар че може да удари веднъж или два пъти или дори десет пъти,
ще комбинирате, че всички в един интервал, просто по силата на споразумение.
Така че, ако наистина искате нов ред, трябва да се използва етикет ДВУСТАЕН,
и сега предизвестие, като понеделник, сложих / вътрешността на този етикет,
само защото това просто не се чувстват право
да започне нов ред и след това да го спре нищо между тях.
>> Така е прието в HTML е да се отварят и затварят етикет едновременно.
Като настрана, ще видите много сайтове в книгите, които не правят това.
Е правилно да се прави или да не го направя, но ще твърдят,
че дизайнът-мъдър и стилистично, това е просто по-добре
защото тогава всеки таг се отваря и затваря някак.
Така че сега, нека спасим и се презарежда. Върнете се в браузъра, добре.
Сега отбелязват известен напредък, но това не е напълно достатъчно.
Нека вървим напред и започнете да пишете в някои дълго тяло на текста.
Така че, да речем, "Един бърз кафява лисица скача над мързелив куче".
А сега нека просто да копирате и поставяте това няколко пъти
така, че ние имаме параграф от текст.
Нека да се върна тук. Така че не е много добра.
Имам нов ред, така че всичко е наред,
но сега, след като сме Как да стигнем до точката на уеб страница
че има много съдържание и не само отделни линии, за да демонстрират HTML,
можем да започнем да мислим за тези неща, като действителните точки.
И можем да започнем да се структурира нашата уеб страница малко по-чисто.
И наистина, какво мога да направя, е да отидете тук вътре в тялото ми маркер
и знаеш ли какво, ако "Това е CS50. . - наистина demarks началото на параграф,
добре, нека маркират като такива.
Нека тире текст, само по силата на споразумение, позволете ми да кажа
че този параграф свършва тук,
и след това, отколкото този нов ред, нека да кажа само
, че това принадлежи и като нов параграф,
и аз просто ще бързо тире само с clobbering всички тези неща.
>> Така че сега имаме отстъп параграф,
и сега нашата маркиране започва да се получи малко по-
семантично съответствие с това, което се опитваме да направим.
Ние имаме една точка, така че да го наричат ​​параграф с етикет стр..
Имаме втора алинея, така че нека го наричат ​​параграф с етикет стр..
И сега, какво браузъра обикновено правя
е точно като в една английска книга или есе,
, където обикновено се наблюдават някои редове между параграфите.
Браузъри ще направи това за вас автоматично.
Така че сега имаме две точки и можем да продължим това.
Но, разбира се, в интернет, когато имате органите на текст
това не е обикновено само на огромни петна на текст.
Често има хипервръзки там.
Така че, ако искаме, например, да включват някои връзки там,
Предполагам, че това, което може да бъде от интерес в каквато и уеб страница Аз съм създаване тук -
нека да отида до Google.com,
и нека ме търсят за бързо кафява лисица.
Отиди на Google изображения, и, какво ще кажеш - това е сладък.
Ние ще отидем с това. Така че тук имаме бързо кафява лисица скокове над мързелив куче.
Така че това, което аз ще направя тук, само за целите на демонстрацията,
е да се предположи, че този образ е на моя сървър,
и аз бяхме създаването на тези изображения.
Което току-що пък бе кликнете с десния бутон на мишката или контролира кликване върху изображението,
и това, което ще видите в повечето браузъри е малко меню -
спрете да правите това - малко меню, което ви позволява да изберете място на копие връзка или URL копие.
Така че нека да се върна сега, за да ми HTML, и предполагам, че искам
хипервръзка към друга уеб страница.
>> Какво е етикет за това?
[Student, неразбираем] >> Да. Така HREF за хипер справки.
Нека вървим напред и поставете инча
Това е доста дълго URL, така че нека я увеличите обратно.
Близки скоби, така че сега забележите, аз съм тук
защото този адрес се случи да бъде доста дълъг.
Нека превъртете тук до края на бърз кафява лисица,
и след това да ми затворите този етикет с </ A,
затворен само името на етикет.
Сега нека да вървим напред и спести този файл, презаредите уеб страница,
и сега, по подразбиране, че ще трябва да бъдат подчертани със синьо, за мен,
но наистина, аз вече могат да кликнете върху това и готово. Налице е този образ.
И това не трябва да бъде образ, може да са свързани
някой друг случаен сайт в Интернет.
Бих могъл да направя това, например, с CS50, така че един последен пример тук.
"Това е CS50 може да направи смисъл да отида, HREF =
http://www.cs50.net, в близост цитат, в близост котва.
Така че сега е още по-кратък URL, и този път ние няма да се свържете с изображение.
Ние сме вместо да се свърже към друга страница.
Сега имаме тук изображение.
Имам чувството, че можем да направим малко по-добре, отколкото просто да се свързва с изображение.
Какво ще стане, ако искаме наистина да го въплъщават в нашата собствена уеб страница?
>> Е, какво мога да направя тук, отколкото сочат към тази графика,
нека вместо намаляване на URL, и ние ще се отървем от тази хипервръзка и почистване на този нагоре.
И ние ще отидем тук и да се отървете от това.
Ние наистина не се нуждаят от всички тези изречения, така че нека да съкрати малко.
И тогава тук ме пусна напред в нов параграф,
кажа, че не искам текст, изображение, чийто източник се случва е, че URL.
Изображение, като нов ред, е там или не е така.
Така че, нека веднага да затворите този етикет.
Позволете ми давай сега и затворете параграф, че съм вътре,
и ако всичко върви добре с Здравей, свят, ако зареждам сега,
Аз наистина, вижте вътре в собствената си уеб страница изображение.
Така че сега имаме изображение етикет, етикет за котва и като
и за добра мярка, позволете ми да направя едно друго нещо, което често се пренебрегва
на уеб сайтове тези дни: Нека някой описателен текст за тази снимка
за хора, които са на мобилно устройство
и следователно не може да бъде в състояние много бързо да свалите този образ,
за хора, които са слепи и не може да бъде в състояние да видите изображението
но те могат да имат екранен четец, който може да им каже какво този образ е на.
И за да направи това, там е друг атрибут за изображения тагове
ALT, за алтернативен текст.
И какво мога да направя тук е да кажеш: "Това е бърз кафява лисица".
Така че дори ако човек не може да види изображението на екрана,
той или тя може да чуе най-малко, тъй като с малко парче от софтуер,
какво всъщност е на екрана.
>> Това няма да се промени естетиката на страницата
но със сигурност е добра практика за потребителите.
Добре, нека да оставим тази уеб страница в сегашната му форма,
но нека да видим, ако ние сега не може да се въведе
някои по-добри подходи към написването на тези уеб страници,
някои уроци, които ще ни служи добре както нашите страници получите повече и по-сложни.
Това, което не започваш да се направи през следващите няколко седмици
ви преведе през всички няколко дузина тагове HTML, че има.
Това е подобно на нулата през седмица 0, то вероятно ще е достатъчно
да се даде на високо равнище преглед на някои от концепциите,
бърза обиколка на някои от блоковете, които вероятно са били в състояние,
доста удобно, за да се придвижвате по своему, различните парчета от пъзел.
И това ще се случи отново в HTML, най-вероятно,
, при която има достатъчно ресурси в мрежата, че ще ви посочи,
различни учебници, ако предпочитате да се чете учебник,
, който ще ви преведе през всички различни неща, които можете да правите с HTML,
но наистина, ние сме виждали до този момент в HTML-голямата част от основните понятия.
Имаме идеята на етикети отварянето тагове, се затваря.
Някои етикети, които са отворени, така и затворени
в смисъл, че те са празни; трябва да има нищо вътре в тях
като изображение тагове или нов ред, които са там само.
Ние също изглеждаше вече понятието за атрибут, като ALT или източник.
Забележете, че тези думи са склонни, по силата на споразумение, за да бъде кратко и сбито.
>> Ние нямаме свобода на преценка какви са тези неща се наричат,
дойде някой друг, който е изобретил HTML с тези имена.
Така че просто трябва да започнем да знае или да погледнете нагоре, всеки път, когато се нуждаят от тях,
какви имена са тези тагове и атрибути.
В случай на тези атрибути, атрибути
промяна на поведението на някои етикет.
В този случай, източникът атрибут разказва изображението маркер
това, което трябва да бъде източник на изображението.
HREF атрибут разказва котва тагове какво всъщност трябва да се свързва с.
Но по отношение на структурата на дадена уеб страница, въпреки че Facebook
и Google и други подобни изглежда като пълна бъркотия
под капака на пръв поглед, ако започне да чете през него
по-методично, всички те следват този основен материал, основният структура.
Но ние можем да подобрим стилизация на тези неща.
Така че нека да отида до някои примери, които предварително подготвени.
Позволете ми да отида напред и да ги копирате от друга папка тук
и ги сложи в тази директория.
В предварително, това което направих беше да подготвя някои файлове:
search0, search1, search2 и search3 и 4.
Нека вървим напред и да се отворят първата от тези файлове,
и нека да видим дали не можем да започваме да създаваме нашата собствена търсачка.
В горната част на този файл, както е обикновено в клас, само един куп коментари.
В HTML, обаче, средствата, чрез които да започнете коментар
<- и тогава вие сте вътре на коментар, мулти-лайн коментар.
Когато сте готови да спрат този коментар, можете да направите ->.
Така че всичко на върха в синьо е просто коментар.
>> Това е моят DOCTYPE декларация, която отново,
можете просто да копирате и поставите на вярата, за сега.
Това просто казва на браузъра, "Тук идва някои HTML 5.
Долу, че по линия 14, е първата от действителните тагове,
и това просто казва, както и преди, тук идва някои HTML,
тук идва на главата на страницата си, тук идва заглавието,
и след това обратно, че това е за титлата, че това е в главата.
Ето сега идва тялото на моята страница.
Така няколко нови етикети: h1 стои за позиция 1.
Има традиция в HTML за много години назад
с различни размери на текст.
И през деня, означава всяка една, като цяло, само големи и смели.
Но има и h2, който е голям, но не е чак толкова голям и смел.
Има h3, което е нещо голямо, но не са чак толкова големи и смели,
и така нататък, чак до h6.
Тези дни, обаче, H1, H2 и H3 наистина означава
да имат по-семантично значение за тях,
който h1 е наистина заглавие: заглавието на дадена уеб страница,
заглавието на колона или нещо подобно, че от текста.
Така че аз съм умишлено каза h1 CS50 търсене> h1
за да се посочи, че това наистина е заглавието, заглавието на страницата си.
Не е заглавието в смисъл, заглавната лента,
но заглавие, което всъщност виждате в самата уеб страница, в тялото.
Сега това, вероятно можете да се досетите какво е то,
въпреки че имаме няколко нови парчета на синтаксиса.
Това е форма. Така че наистина става интересно в интернет
когато сайтове вход от потребителите.
В този клас, в проблема за уеб програмиране,
ние няма да се направи сайт, на себе си,
със статично съдържание, което показва снимки, които сте направили,
или това е моята автобиография, и неща за мен,
защото тези неща са сравнително лесно да се съберат.
Трудно е да направим нещата по-красиво в мрежата,
но поне поставяне на съдържание е доста тривиално.
Но нещата стават наистина интересно, когато някой може да посещават вашия сайт
и да предостави информация и могат да попълват формуляри,
да проверите квадратчетата и могат да взаимодействат с вашия сайт.
И наистина, най-вероятно всеки уеб сайт, ви е грижа за
тези дни, във всеки детайл, е някак интерактивни.
Facebook, Google и други подобни, които вземат приноса на потребителите
и производството на потребителски изход.
>> Така че нека започнем да го направя сега. Да преход сега
само с помощта на HTML за маркиране на статично съдържание
тъй като вместо механизъм за доставка на динамично съдържание.
И към тази цел, нека да реализираме нашата собствена търсачка.
Нека го направим, както следва. Ето формата маркер.
Атрибут за действие се посочва, че когато потребителят попълва тази форма
с тяхната клавиатура, то ще бъде представено на този адрес тук.
Така че аз съм вид измама. Това ще ни отнеме малко повече време
от един клас да прилага цялото търсачката,
така че ние просто ще направи предния край, така да се каже.
Ние ще направим частта, която позволява на потребителя търсене, и ние ще сортирате шута към Google
най-трудната част за намиране на резултатите от търсенето,
но, по-специално, аз отивам да говоря с Google на уеб сървър
използва един от две много популярни методи.
Един се получи, друг, че ние в крайна сметка ще видите, е мнение,
въпреки че има и други, които са по-често използвани.
Така се получи просто внушава идеята за, искам да получа част от съдържанието, да получите някои резултати от търсенето.
Това, може би ще се досетите какво прави това.
Това е някакъв вид на входа, е в действителност, ще изглежда като текстово поле,
и името на този вход, името на тази променлива, така да се каже,
ще бъде Q за заявката от конвенцията.
И отново, вида на този вход не се случва да бъде отметка;
това няма да бъде менюто, той ще бъде текстово поле
обозначен с този атрибут, и това текстово поле,
като нов ред, или е там или не.
Така че ние имаме празен елемент с наклонена черта вътре в този етикет.
Тогава аз отивам да се сложи край на линията, и можете да, може би, познайте какво ще направи.
Това е друг вид на формата вход.
>> Това ще се използва за подаване на формуляра.
Така че това ще бъде голям бутон, който потребителят може да щракне да представят формуляра,
и етикет върху този бутон ще бъде "CS50 Търсене".
Затвори форма, плътно тяло, в близост HTML.
Нека да видим какво имаме под формата на тази страница.
Така че нека да отида в браузъра си,
ме пуснеш, все още, за да локалния хост.
Това все още е index.html, така че, ако искате да видите този файл, наречен search0
Може просто да направи / search0.html, въведете
и първото от моите грешки.
Какво става? Очевидно не е нужно разрешение
за достъп до този файл, поради някаква причина.
Но това е, защото, за разлика от работата, която съм правил до този момент в C
където се предполага, че програмите, които пишат да runable от вас,
изпълняван от вас, че не е наистина в интернет,
с което понякога може да искате да създавате файлове на сървъра,
но не искате целият свят да бъде в състояние да ги види.
, По-скоро искам светът да видите някои файлове
но други не, просто заради неприкосновеността на личния живот.
Така че това е повече от едно неучастие в базата, когато правиш неща в мрежата.
И така, нека всъщност въвежда ли тук,
и ще видите файловете, които имам, но припомни, че ако го направя ли-л за дълго,
Ще получите по-дълъг списък, който ми дава малко повече подробности за тези файлове
, които са сега, наистина, за първи път, значение за нас.
Забележете, че в дясно са имената на мои файлове,
и след момента, в който последно са били променяни или копирани.
Този номер тук е какво? Спомняте ли си?
Размерът в байтове, колко е голям файла.
>> Така че изглежда да има някакъв вид на лого, че тук е по-голям от всички други файлове.
Това е, което съм аз, това е, което съм и коя група съм.
Но след това, тук от ляво е малко загадъчен последователност,
и ние говорихме, мисля, накратко за това в миналото,
но това трябва да се направи с разрешения.
И дори ако това е малко неясен,
RW вероятно означава, четат и пишат.
Така се оказва, че тези тирета означават различни набори от разрешения за различните хора.
И моделът е по същество, както следва.
Когато видите поредица от тирета тук, те изглеждат по следния начин.
Има тире, след това има още три тирета,
след това има още три часа, след това има още три.
Първият от тях е тире или това е реклама за директорията.
Така че е доста лесно. Ако това е папка, казва г, в противен случай това е с тире.
Има няколко други случаи, но за сега ние просто ще се грижи за файлове и директории.
Тези следващите три тирета - и аз изкуствено поставена пространства.
Те са били очевидно не там, когато ги видяхме преди малко.
Това са разрешения на собственика на файла,
и припомни преди секунда, че четат и пишат.
Това е, защото аз като човек, който е създал този файл преди малко,
I, по подразбиране, на компютър с Linux,
имат възможност да продължи четенето и писането на този файл.
>> Така че операционната система просто ми дава RW автоматично.
Средните са свързани с моята група, че на студентите,
която е нещо безсмислено върху уреда, защото аз съм единственият човек, който да използвате уреда.
Така че нека само размахва ръцете ми, че за сега.
Но последните са най-важни за уеб.
Това е всеки друг в света, както и факта,
че това е --- означава, че никой друг в света
има всички разрешения за този файл.
Ясно е проблем, така че трябва да се определи това
като по някакъв начин дава на света това, което? Прочети пиша?
Това е може би тъпо, нали? Аз не искам никого в Интернет
да отида да посети страницата ми и някак си се промени този файл,
въпреки че те наистина не можех с HTML файл,
но само по принцип, най-вероятно просто искате те да могат да го прочетат.
Какво означава това да го прочетеш? Това не означава, че започваш да се грижи за действителното HTML,
но браузър трябва да бъде в състояние да прави разбор на този език за маркиране,
горе до долу, от ляво на дясно.
Значи някой в ​​мрежата трябва да бъде в състояние да го прочете, така че минимално трябва да я дам R.
Мога да направя това по няколко различни начина, но може би
най-простият е да стартирате тази команда.
CHMOD, промяна на режима, а след това A + R, така че всички, всеки в света + Прочети
и след това името на файла, search0.html.
>> Сега, ако го направя отново LS-л, забележете, че този файл се е променило,
и наистина съм включен R за всеки.
Аз също се оказа за моята група, но това е добре,
защото, ако аз се обърна за всички, моята група е подмножество на това.
Така че това е добре също. Това просто означава, че компютърът е сега да се чете.
Сега ме пуснеш обратно към браузъра си, щракнете върху презареди.
А-ха. Ние сега имаме CS50 Търсене.
Съм увеличени в малко изкуствено - доста отвратителен търсачката.
Но нека да видим дали тя наистина работи.
Първо, позволете ми да направя една бърза проверка на здрав разум, да ме контролират, кликнете и преглед на изходния код на страницата.
Забележете, че в рамките на Chrome ние сега виждаме същото HTML че аз самият създаден.
Да не се бърка тук, все пак. Не мога да започна промяната на кода тук,
, защото браузъра има само за четене на този кодекс.
Браузърът е зададен локалния хост файл, наречен search0.html.
Сега е чиста случайност, че уредът
се случва да бъде на същия компютър като моя браузър.
Бих могъл просто, което е същото, са въвели в www.facebook.com/search0.html
и ако Facebook файл с име, че аз тогава ще се видим HTML им.
И, разбира се, аз не мога да променя файла, който се връща от Facebook,.
Така че сега ние сме вид размива линии.
Уредът е на сървъра, обслужващи уеб страници,
но тя също е клиент, в смисъл, че аз съм с помощта на браузър
всъщност говорим на този сървър.
Така че нека да видим дали Google търсачката ми работи.
Позволете ми да отида напред и да търсят бърз кафява лисица, въведете.
И готово, аз сега имам моя собствена търсачка.
>> Но как става тази работа?
Bit на участък, но и сега не можете да видите, точно частта, която е от интерес.
Забележете какво се случва.
Обърнете внимание на URL. Оказва се, че този метод,
нарича се, е супер проста.
Когато зададете във форма, която искате да "" резултатите от някои сървър,
това, което ще направи, е да вземе каквото сте въвели във формата
и го сложи в URL.
Ще стандартизира как той получава в URL, както следва.
Забележете, че това е URL, това е стойността на моето действие атрибут.
Това е мястото, където исках форма до края.
Но тогава забележите това въпросителен знак.
Това е конвенция за Web, чрез която да се осигури въвеждане от потребителя
уеб сайт, добавяне на URL въпросителен знак,
и тогава ще трябва цял куп двойки ключ-стойност.
Името на ключ, иначе известни като параметър в уеб,
тогава ще има знак за равенство, тогава ще трябва стойността на този параметър.
Така че това е по същество името на променливата и стойността на променлива,
но имената на тези променливи и стойности от HTML форма.
Защо са плюсове, не мислиш ли?
Защото аз не въвеждате + между думите ми.
[Student, неразбираем]
>> Да, това е само за разстояние. Коефициентите са, когато сте виждали URL
никога няма интервали в него, дори и само заради
ако имаше, не можеше наистина да копирате и го поставете
в IM или в имейл, защото може да се счупи.
Вие искате всичко да бъде една съседна низ от символи.
>> Така че браузърът е достатъчно умен, за да разбере, ъ-ъ-ъ-ъ.
Не просто да сложите пространството си там. Нека кодиране на място в някои стандартния начин.
Един от конвенциите за това е да има браузъра
автоматично +, където в противен случай ще има място.
Така че сега, забележете, Google е вид лесен за употреба.
Аз със сигурност не е създал тази уеб страница,
но те са prepopulated своя текстово поле
с какво точно написах инча
Да предположим, че искате да търсите за нещо друго, като мързелив куче.
Мога само да въведете тук, повторно търсене.
Забележете, че URL променя тук,
но забелязах това, че всъщност може да се търси нещо, което искам
само от разбиране как URL адреси работата.
Бих могъл да направя мързелива котка, въведете
и забележи, сега съм много мързелив - трябва ли? Имам чувството, че трябва.
Получавам много мързелива котка.
Добре. Това е един от най-тъпото неща, които сме направили.
Но това е мързелива котка.
Във всеки случай, това, което е ключът за вкъщи?
Сега сме на игра в света на HTTP.
HTML е само на този език за маркиране, отварящия таг, в близост етикет,
, който казва на браузъра как да направят съдържанието на уеб страница.
Но когато започне да предава данни в интернет
между уеб браузър и сървъра, това е мястото, където този протокол
известен като Hypertext Transfer Protocol поема.
Това е нещо, на човешкото конвенция, когато Сам и аз си стиснаха ръцете в понеделник,
започване на връзка и след това затваряне на връзка, същата идея.
Как се резултатите на Google се завръща при мен?
Каква е моята форма подаване на Google?
Е, спомняте от онзи ден, че това, което наистина се случва
под капака, когато поискате една уеб страница е,
вашия браузър изпраща донякъде загадъчно съобщение като
GET / HTTP/1.1 за начална страница по подразбиране.
>> Или, в този случай, защото аз изрично поискани по-рано
search0.html, това ще бъде малко по-загадъчно съобщение
че навигаторът ми изпраща на уреда.
Или, в този случай на Google, какво всъщност изпращат
е искане / търсене, а след това? = мързелива котка, плюс има.
Така че това съобщение, че аз, човек, никога не съм типичен,
но се изпраща от браузъра си, това е как HTTP случва.
Това е еквивалентът на нашите като здрависал.
Това е искане, а сървърът е на път да изпрати отговор.
Така че нека да погледнем под капака.
Както и преди, ние може да отвори тази специална област в браузъра.
Виж, да се запознаят елементи.
Така под инспектира елемент, забележете, че това, което се е случило в Chrome,
и IE и Firefox имат подобни механизми,
имаме тези инструменти за разработчици, които са достъпни за нас.
Нормалните хора не използвате тези раздели.
Но ние, сега, се интересуват какво се случва
под капака на мрежово ниво.
Така че, ако аз извадя на ниво мрежа,
нека вървим напред и да се разшири този прозорец,
отвори този пост тук, и погледнете заглавията.
Така че това, което се случва, когато поискате файл от уеб сървър
е моя браузър изпраща цял куп неща.
И нека ме видите източник. Така че, по заявка заглавията,
И това е само Chrome ми показва някои диагностични изход,
вид като дебъгер на някакъв вид,
забележите, че това, което съм отбелязани тук е точно това, което
Chrome изпраща на сървъра, за да поиска файл, наречен search0.html.
Показателно е, сървър, това, което мисли, че името му е,
благодарение на тази област домакин на дебелото черво, а след това има някои
доста езотерично неща тук, като нещо общо с дати и часове,
нещо общо с езиците, че браузърът разбира,
но наистина важни линии са първите две тук.
>> Какво сървъра отговори? Е, ако ние превъртете надолу тук
и да видите източник на това нещо, обърнете внимание, че сървърът
е отговорил с малко загадъчно съобщение, както и, не 304 променени.
Това е малко странно, нека се опитаме да оправим това.
Нека задръжте смени и кликнете презареди тук
да накара браузъра, за да направи това искане за първи път.
Тогава ми позволете да я увеличите, и ние ще видим, че отговора на сървъра,
защото държах смяна, е 200 OK.
Така че най-вероятно никога не сте виждали номер 200
в контекста на интернет, но какви номера
понякога се наблюдава неочаквано от сървър?
404, файла не е намерен, 403, забранена, 500, грешка в сървъра.
Така че там са тези цифровите кодове, че светът използва в уеб
за да покаже грешки, само като функция на C
може да се върне на грешки и да се върнете изходните кодове.
200, макар и рядко, защото това означава, всичко е наред.
А 304 вероятно никога няма да видите, защото това, което се показваше?
Че нищо не е - нека да видим дали можем да симулира това отново -
О, сега това не е сътрудничество. 304 каза, че не се променя,
така че защо да е сървър, дори да отговарят?
Е, за ефективност, уеб сървър автоматично за вас,
ако файлът не се е променило, няма да препредава целия HTML файл.
Тя просто ще каже на браузъра, че не се е променила.
Просто използвайте вече имате копие.
Така че това понятие за кеширане на уеб
за изпълнение, така че не си губете време и трафик на отпадъците
сваляне на файлове отново и отново ненужно.
>> Но тази интернет страница, сега е супер просто,
и то само ми показа HTML, която се върна.
Нека всъщност използвайте раздела на мрежата сега, за да направи Google търсене като бързо кафява лисица.
Нека след това щракнете върху CS50 търсене,
и сега, забележете, в дъното тук един куп неща се върна
, защото когато посетите сайт като Google.com,
имат изображения, те имат текст, те имат език, наречен JavaScript там.
Така че всеки ред в тази таблица тук
представлява нещо, което Google плюе в отговор на единственото ми желание.
Единственото, което ме интересува, обаче това е първият.
И ако отида за търсене, заявка, кликнете видите изходния тук,
забележите, че наистина загадъчно съобщение, че навигаторът ми изпрати
да Google е тези две линии,
последвано от някаква тайнствена информация тук, които ще игнорират за сега.
Но забележете също, какво Chrome е доста удобен,
тя също ми показа заявка низ, който е бил изпратен инча
Така че вместо да ми покаже това, което буквално е изпратен,
ако го видите декодира, Chrome, само за отстраняване на грешки,
за разработчиците като нас, просто ми показа човека версия на
това не е как се пише лисица, очевидно.
Аз съм просто забележи това сега, но ви показва това, което, както изглежда, на пишеща машина.
Междувременно, отговор, който се върна от сървъра отново е 200 OK.
Но включени в този отговор, разбира се,
ако ние всъщност преглед на HTML страницата -
Съжалявам, но това е малко по-клавишна комбинация се проваля днес.
>> Аз ще се оправя с това по-късно. Така че, ако ние всъщност Преглед на изходния код на страницата,
което мога да направя тук, като щракнете на отговор,
това е, което всъщност е плюе обратно, в допълнение на този загадъчен 200 OK съобщение от сървъра.
Малко загадъчно, но къде е всичко това идва от?
Е, нека да направим нещо друго тук. Друг малко по-загадъчен команда,
но вид на чист в това, че ни разкрива точно какво се случва под капака.
Така че аз съм тук, аз на моя Mac свързали
чрез програма, наречена SSH Secure Shell, на друг сървър
защото повечето компютри Харвард блокират команда ние сме на път да тече
защото има тази команда за някои сървъри, наречени Traceroute
, който ви позволява да се проследи пътя между точките "а" и "б,
и до този момент сме се изцяло за даденост
, че мога да пиша в Google.com и някак си данни за минали периоди
от другия край на страната, или другия край на света.
С Traceroute ние всъщност може да се потопите в малко по-дълбоко
как работи интернет, и да видим какво се случва под капака.
Така че нека да вървим напред и произволно проследи маршрута, да речем, Stanford.edu
което е в цялата страна, и натиснете Enter.
Тази команда може да бъде супер-бързо или супер-бавно,
но това, което виждаме сега, ред по ред,
е всеки един от стъпки или хмел между нас и Пало Алто, или Станфорд,
, където те имат своите уеб сървър.
Така че, какво прави всеки от тези редове представляват по-конкретно, нали?
Парче на жаргон от интернет? [Student, неразбираем]
>> Какво е това? [Student, неразбираем]
>> О, така че има време, но какво прави всеки ред - какво имам предвид от хоп?
>> Е, има тези неща в Интернет, наречени рутери.
И рутери, както подсказва и името, информация за маршрута от точка А до точка Б.
Но има няколко точки, които са извън а и б.
Има в и г и д и е между ред 1,
, който се случва да бъде IP адреса на моя компютър,
или цифров адрес, който идентифицира компютъра ми,
и стъпка 15, който всъщност е шестото уеб сървър,
очевидно, което аз съм от това заключава, или 6-та версия на техния уеб сървър в Станфорд.
Но това, което е вид на чист е, можем да видим пътя
че ми 0 и 1, като от моя компютър в Станфорд.
Така стъпка 1 е адрес на собствения си компютър.
Всеки компютър в Интернет има уникален идентификатор, който изглежда така.
Number.number.number.number.
Някъде на този университет, вероятно в центъра на науката,
рутер, наречена Core Gateway 2-te83, каквото и да означава,
така че това е един от големите фантазия рутери Харвард, който маршрутизира много на техния трафик.
Ето още един рутери Харвард, това е Border Gateway,
границата означава, че вероятно някъде в периферията на колежа.
Тогава там е NOx, ред 4, която е Северна Crossroads,
което е голям Интернет доставчик, доставчик на интернет услуги,
че места като Харвард свързване.
Но тогава нещата стават малко интересно в ред 6.
Къде са ми бита изведнъж? Канзас.
В света има навика да се използват кодове на летища в много от тези неща,
или най-малкото съкращения на държавите или градовете,
така че изглежда, само в 60 държави-членки,
пакет от информация, 0 и 1 е от моя лаптоп
целия път до Канзас, и отново, в 60 държави-членки.
>> Освен това, след Канзас, те взеха турне през Хюстън, вероятно,
както бе предложено от името на този сървър.
Така че просто като сървър в Интернет трябва да има цифров адрес,
по желание, то също може да имат малко повече за човека, че хората дойдоха с адрес.
Сега, в стъпка 8, ние не знаем какво е това.
Понякога рутери просто се игнорират,
и те просто не отговори на въпросите, така че това е добре.
След стъпка 8 е очевидно, където? L.A.
Забележете, само в 78 държави-членки, което ни хора като 6 + часа, за да извършваме физически,
пакети от информация в интернет 78 мс да пътуват толкова далеч.
Стъпка 10 е в Лос Анджелис, както и 11 изглежда да са отишли ​​на север, близо до Станфорд.
Това е тяхната граница рутер или маршрутизатор граница.
Няколко стъпки в Станфорд, които ни пренебрегват,
и накрая, стигаме до уеб сървър само за 87 мс.
Сега, всички тези числа, като освен,
само да ви кажа, колко време е необходимо за пренос на данни, за да получите от мен
за всеки един от тези рутери, и това не е набирателна.
Какво прави тази програма е, че първо изпраща съобщение по същество, на първия маршрутизатор.
Тогава на втория рутер, тогава един трети рутер,
измерване всеки път. Така на теория, тези времена ще се разраства
или най-малкото доста близо един до друг,
и, наистина, тези, които са тук на територията на колежа са супер-малък.
Веднага след като тръгват в цялата страна, тя отнема данни
малко по-дълго, за да пътуват, близо до 100 милисекунди, даде или отнеме.
Но нека да отидем в друга посока сега. Какво ще кажете за Кеймбриджкия университет във Великобритания?
Нека вместо да тичам Traceroute на www.cam за Кеймбридж,
AC за академично, Великобритания, и натиснете въведете тук.
Това беше доста бързо.
Моите данни буквално отиде в Кеймбридж, Англия, в тази частица от секундата от време.
>> Така че нека да видим пътя, който го взе.
Харвард, Харвард, Харвард, Северна Crossroads,
, която е доставчик на интернет, а след това това е Северна Crossroads, и след това бам.
Каква е между стъпки 6 и 7, рутер 6 и 7?
Атлантическия океан. И ние сме се изведе от факта, че
отидем от 20 мс тук до 80 мс.
Така че нещо взе 60 мс, или да даде, за да получите повече.
И това вероятно е бил голям воден.
Какво става след това? Е, ние сме тук в Лондон,
само 88 мс-късно. По-Лондон, Лондон,
не сте сигурни къде е това, но ние ще приемем, че е извън Лондон,
Кеймбридж тук, и ние най-накрая - буквално, Университета в Кеймбридж
. Something.net, и най-накрая, на ред 16,
техния уеб сървър е очевидно Scorpius
под предния капак, въпреки че го знаем като WWW.
Вид на ума-разпенващ, мисля. Първи път, което някога съм правил това, то напълно взривиха съзнанието ми.
За съжаление, Харвард блокира този вид трафик, обикновено в мрежата.
Така че не може да го направи супер лесно.
Осъзнайте, все пак, това тук е възможно.
Добре. Нека вземем нашата 5-минутна почивка тук. Ще се върнем и да се потопите още по-дълбоко.
Така че ние сме назад, и ние сме вид, без да бърза, за тук в няколко различни посоки.
Така че нека да обобщим какво точно става тук.
Ние започнахме разговора, да говорим за този език, наречен HTML.
Отново, не е език за програмиране. Това е просто един език за маркиране
, която е до голяма степен за естетика и структуриране на съдържанието под формата на уеб страница.
Но HTML, следователно, се нуждае от някакъв механизъм
за пътуване между уеб браузър и сървъра.
HTML следователно вид вози на върха на този друг език,
или по-правилно, протокол, известен като HTTP.
>> И HTTP, както сме го виждали до този момент,
е един вид аналогична на тази конвенция на човека се ръкува.
Когато браузър иска да поискат страница от сървъра,
го изпраща искане "да" от браузъра към сървъра,
и след това сървъра отговаря с номер като 200, всичко е наред,
, както и като HTML или някакъв лош номер като 404, не бе намерен файл.
Но междувременно, HTTP себе си не е в интернет, на себе си.
HTTP е просто услуга, функция на интернет
много като G чат е друга услуга, много прилича имейл е друга услуга.
Има всякакви неща, които можем да направим в интернет.
HTTP е само един от тези заявления.
Така на върха на HTTP е на върха на нещо друго
които не се споменава по име, може би сте чували по име, TCP / IP.
Така че историята, която току-що каза, че е за всички
как данните пътува от точка А до точка Б.
И в този случай, ние видяхме на много ниско ниво
рутер към рутера към рутера към рутера,
как действително се предават данни.
Но по пътя, ще се сблъскват с различни пречки.
Освен тези рутери, има неща, наречени защитни стени в интернет,
и така данни, като бяхме просто предаване
от мен в Станфорд, от мен в Кеймбридж,
се изпраща на това ниво, нещо, наречено IP адрес.
Ние видяхме това преди малко, и IP адрес
е просто цифров адрес на формуляра w.x.y.z,
, където всеки от тях е между тях, или да даде, 0 и 255,
макар че съвсем не могат да използват всички тези номера.
Но всеки от тези притежатели на място е число между 0 и 255.
Така че IP адрес тези дни е 32 бита.
>> Сега, това ни дава колко е възможно адреси в света?
Около 4 млрд. евро, защото всеки път, когато броя в правомощията на две
по целия път до 32 на нещо, което обикновено ни дава 4 млрд. евро.
Така че това е много IP адреси, но може да сте прочели,
или може да забележите в популярната преса,
тласък към нова версия на IP, наречен IPv6.
В момента се използва версия 4.
Там наистина не е версия 5, ние просто скача до 6.
Версия 6 ще използва 128 бита за IP адреси, които се възбуждате огромен.
Ние не би трябвало да работи за известно време сега,
но е започнал да тече от IP адреси версия 4,
защото всички ние имаме не само неща като лаптопи и настолни компютри,
много от нас имат телефони, много от нас имат и други устройства
като TiVo и други подобни, които имат IP адреси.
Харвард себе си има десетки хиляди компютри.
Така светът действително изтича на IP адреси, поне на този формуляр.
Така че през следващите няколко години, вие ще да видите адресите
на собствените си компютри вероятно бавно се променят
тъй като все повече и повече компании и университети започват да подкрепят по-нова версия.
Но един IP адрес не е достатъчно за компютър да поиска данни от компютъра б.
Тъй като компютър б може да бъде сървър,
и сървър, както споменах по-рано, може да направи букети неща.
Тя може да бъде домакин на уеб страници, може да бъде сървър за електронна поща,
тя може да бъде Skype сървър, може да бъде чат G сървър.
>> Всички тези различни услуги, които могат да бъдат предоставени на предприятието на сървъра
всички физически, да бъдат на една и съща машина.
Така че, в допълнение към IP адреси,
света има неща, наречени пристанищата в интернет.
Порт е само един номер, така че има уникален номер за HTTP.
Неговият номер е 80.
HTTP също използва номер 443, но по-специално, за криптирана HTTPS.
Когато видите S, за сигурна, че използва различен номер.
Има други числа като 25, които се използват за нещо, което се нарича SMTP, иначе известни като имейл.
Има нещо, което се нарича 22 за SSH,
и там има цял куп други пристанища.
Сега, ние, хората рядко виждат тези номера.
Въпреки това, когато напишете адрес като http://www.facebook.com
браузъра е тайно вмъкване на 80, защото използвате HTTP.
Ако, вместо тип HTTPS, е тайно вмъкване 443.
И ние да видите това ръчно, ако извадя на браузъра
и си отиват до http://www.facebook.com:80.
Затова категорично не се цитира само името на сайта
но порт, който искам да говоря, и натиснете Enter.
Забележете, тя изчезва, защото браузъра предполага,
о, 80, аз не съм дори да се притеснява да показва, че за вас.
Но причината за това е, че ако наистина иска да изпрати някой имейл,
Наистина бих се изпращат ги на порт 25, че SMTP.
Малко прекалено опростяване, но някои от вас имат приятели
, които действително работят в Facebook, и те, също така, има сървъри, които получават имейл.
>> Всеки път, когато изпращате имейл, какво Gmail прави за вас
или Outlook или каквото програмата, която използвате,
тя е нещо тайно да поставите този брой, както и 25, в този случай.
Това е тази комбинация от IP адрес и номер, който идентифицира еднозначно
компютър в Интернет и конкретна услуга на този компютър.
Сега, разбира се, повечето от нас вероятно никога не са въвели ръчно IP адрес.
Може би имате в уреда, но в реалния свят, не толкова много.
Защо не напишете IP адресите в браузъри?
Тя ще работи в действителност, можем да видим, нека да ви покажа
една друга команда, която трябва да работи навсякъде на територията на колежа Харвард на Mac или PC.
Тази команда, наречена nslookup, името на сървъра справка.
Ако гледам www.cnn.com, се оказва, че CNN има - О, интересно.
CNN започна да използва Amazon Web Services.
Може би знаете, на изчислителни облаци, Amazon е един от големите играчи в облачния компютинг.
Това, което току-що направих, беше, аз казах: "Дай ми адреса на уеб сървъра на CNN"
но се оказва, че Си Ен Ен уеб сървъра се управлява от Amazon,
Amazon Web Services, това предполага.
И адреса на този сървър е това тук.
Така че аз не съм сигурен дали това ще работи, защото те не са свикнали да използват Amazon.
Но нека се опитаме това; http://, IP адрес, въведете и -
ще се получи?
Да. Тя ще работи. Интернет е супер-бавен днес.
Но в един момент, ще видите някои новина.
Точно така. Банката на Америка да бъдат съдени. Добре.
>> Това е, защото това IP адрес просто се случва от синоним на www.cnn.com.
Разбира се, би било ужасно за пускане на пазара да се каже, посетете ни в мрежата на 50.112.94.127.
Никога няма да си спомня. Така че дори и тези дни можете да си спомните неща
като 1-800-COLLECT или мнемоника свят дойдоха с телефонни номера.
, Които преди мобилни телефони, са по-скоро трудно да се запомнят
, докато можете да го напишете и да забравите за нея.
Така че в Интернет, също има тази конвенция на имената и IP адресите,
и там са тези неща там, наречен DNS сървъри,
системи за имена на домейни, сървъри,, които превръщат IP адресите в имена и обратно.
Така че това, което се случва под капака.
В края на краищата, ние имаме TCP / IP, който е този протокол от ниско ниво
че, наистина, просто получава 0 и 1 в интернет,
и го прави така, като ги постави в един виртуален пакет,
ако щете, и писане от външната страна на плика
IP адреса на дестинацията, както и цифров номер на порт
на услугата по тази дестинация, че иска да говори с.
Междувременно, в плика има и нещо, известно като обратен адрес,
е вашият IP адрес, така че когато CNN получава пакет информация от вас,
отваря този виртуален пакет, вижда, че искате началната страница,
знае от подателя част от този виртуален пакет, които да изпратите HTML обратно към.
Така че нека да погледнем на това в малко по-подробно.
Това е от една компания, наречена Ericson, от няколко години назад.
И те си взеха някои свободи как всъщност работи интернет,
но тя рисува много по-визуална картина от обикновен тебешир тук.
Така че аз ви давам "A Bit на Интернет."
>> [Разказвач] За първи път в историята,
хора и машини работят заедно, реализирането на една мечта.
Обединяваща сила, която не познава географски граници.
Без оглед на раса, вероизповедание или цвят.
Нова ера, където комуникацията наистина обединява хората.
Това е
В зората на мрежата.
Искате ли да знаете как става това? Щракнете тук, за да започне пътуването си в мрежата.
Сега, какво точно се е случило, когато сте кликнали върху този линк?
Ти започна поток от информация.
Тази информация се движи в личен Mailroom
където г-н IP пакети, етикети, и го изпраща по пътя си.
Всеки пакет е ограничена по своя размер.
Стая поща трябва да реши как да раздели информацията
и как да го пакет.
Сега, пакетът се нуждае от етикет, съдържащ важна информация
като адреса на подателя, адрес на получателя, както и вида на пакета е.
Тъй като този пакет ще излезе в интернет,
то получава и адрес за прокси сървър,
който има специална функция, както ще видим по-късно.
Пакетът е сега стартира към вашата локална мрежа или LAN.
Тази мрежа се използва за свързване на всички локални компютри "
рутери, принтери, и така нататък, за обмен на информация в рамките на физическите стени на сградата.
LAN е доста неконтролирано място, и, за съжаление,
произшествия може да се случи.
Магистрала на LAN е натъпкан с всички видове информация.
Това са IP пакети, Novell пакети, AppleTalk пакети.
Те ще срещу трафика, както обикновено.
Местната рутер чете адрес и, ако е необходимо,
повдига пакет към друга мрежа.
Ах, рутера. Символ на контрол в привидно по-дезорганизиран свят.
[Router мънкане и говори за себе си]
>> [Разказвач] Има той е систематичен, незаинтересовани, методичен,
консервативна, а понякога и не съвсем да се ускори.
Но поне е точна, по-голямата част.
Тъй като пакетите напускат рутера, те да си проправят път в корпоративната интернет
и главата ключа за рутера.
Малко по-ефективно, отколкото на рутера, на рутера превключвател играе бързо и в насипно състояние с IP пакети,
ловко ги маршрута по пътя си.
Цифров "пинбол съветника," ако щете.
[Router превключвател, говори за себе си]
[Разказвач] Както пакетите пристигнат в тяхното местоназначение,
те се качват от мрежов интерфейс,
готов да бъде изпратен към следващото ниво.
В този случай пълномощникът.
Пълномощникът се използва от много компании като вид на средата човек
за да се намали натоварването на интернет връзката
и от съображения за сигурност, както добре.
Както можете да видите, пакетите са с различни размери, в зависимост от тяхното съдържание.
Пълномощникът отваря пакета и търси уеб адрес или URL.
В зависимост от това дали адреса е приемливо,
пакет се изпраща в интернет.
Има, обаче, някои адреси, които не отговарят с одобрението на пълномощника.
Това е да се каже, корпоративни или управление насоки.
Те са безцеремонно.
Ще трябва нищо от това.
За тези, които го правят, то е на път отново.
>> Следващата, защитната стена.
Корпоративната защитна стена има две цели.
Това пречи на някои доста гадни неща от интернет от влизането в интранет
и той може да предотврати поверителна корпоративна информация да бъдат изпратени към Интернет.
След като през защитната стена, рутер взима пакета
и го поставя върху много по-тесен път, или лента, както казваме ние.
Очевидно е, че пътят не е достатъчно широко, за да ги взема.
Сега, може би се чудите какво се случва с всички тези пакети, които не го правят по протежение на пътя.
Е, когато г-н IP не получи потвърждение
, че пакетът е получено своевременно,
той просто изпраща заместващ пакет.
Вече сме готови да влязат в света на интернет.
Паяжина на взаимосвързаните мрежи, които обхващат цялото земно кълбо.
Ето, маршрутизатори и комутатори, създаване на връзки между мрежите.
Сега, Net е напълно различна среда, отколкото ще намерите
в рамките на защитните стени на вашата локална мрежа.
Няма тук, това е Дивия Запад.
Изобилие от пространство, изобилие от възможности,
много неща, които трябва да се изследват и места, за да отида.
Благодарение на много малко контрол и регулиране,
нови идеи намират плодородна почва, за да се разкрия на възможностите им.
Но тъй като на тази свобода, някои опасности се крият.
Ще никога не знаете кога ще се срещнем страховитите пинг на смъртта,
специална версия на нормален пинг искане,
която някой идиот, че да се забъркваш нищо неподозиращите домакините.
Пътят нашите пакети вземе може да бъде чрез сателит,
телефонни линии, безжична или дори презокеански кабели.
Те не винаги вземат възможно най-бързо или най-кратки маршрути,
но те в крайна сметка ще стигнем до там.
Може би затова понякога се нарича "World Wide Чакай".
Но когато всичко работи гладко,
можете да заобиколи света пет пъти в капка шапка, буквално.
И всичко това за цената на един градски разговор или по-малко.
До края на нашата дестинация, ще намерим друга защитна стена.
>> В зависимост от вашата гледна точка като за пакети данни,
защитната стена може да бъде бастион на сигурността или страховитите противник.
Всичко зависи от това от коя страна сте и какви са вашите намерения.
Защитната стена е проектиран да само онези пакети, които отговарят на неговите критерии.
Тази защитна стена работи на портове 80 и 25.
Всички опити да проникват през други пристанища са затворени за бизнеса.
Порт 25 се използва за пощенски пакети,
докато порт 80 е входът за пакети от Интернет с уеб сървъра.
Вътре в защитната стена, пакетите, се изследват по-задълбочено.
Някои пакети го правят лесно през митницата,
докато други изглежда само малко съмнително.
Сега служителят, защитната стена не е лесно заблуждавайте,
като когато това пинг на смърт пакет се опитва да се дегизира като нормален пакет пинг.
[Firewall служител, който говори за опаковките]
[Разказвач] За тези пакети, които са достатъчно късмет, за да го направи толкова далеч,
пътуването е почти към края си.
Това е просто една линия на интерфейса, които трябва да бъдат предприети в уеб сървър.
Днес, уеб сървър може да работи на много неща,
от мейнфрейм уеб камера към компютъра на бюрото си.
Защо не си хладилник?
С правилна настройка, можете да разберете дали имате заложби
Пиле Cacciatore, или ако имате да пазаруват.
Не забравяйте, че това е зората на Net.
Почти всичко е възможно.
Един по един, пакетите се получават,
се отвори и разопаковани.
Информацията, която се съдържа в тях, че е искането си за предоставяне на информация,
се изпраща на уеб сървъра заявление.
Самият пакет е рециклирана,
готови да бъдат използвани отново и да се запълнят с исканата информация,
адресирани и изпратени по пътя си обратно към вас.
Обратно миналото защитна стена, рутери и чрез интернет.
Обратно през корпоративната защитна стена
и на вашия интерфейс,
готов да предостави своя уеб браузър с поисканата от вас информация.
Това означава, че този филм.
Доволни от усилията си, доверявайки се на по-добър свят,
нашите пакети надежден данни вози блажено в залеза на още един ден,
знаейки, напълно те са служили добре техните господари.
Сега, не е, че има щастлив край?
[Малан Добре, това е достатъчно. Ще се видим следващата седмица.
[CS50.TV]