DAVID J. малая: Добра.
Мы вярнуліся.
Такім чынам, мэта гэтай апошняй сесіі каб увесці яшчэ некалькі паняццяў
але і даць кожнаму шанец каб выгляд расцерці пальцы
і на самай справе зрабіць што-то трохі практычны.
Мэта складаецца ў тым, каб не ператварыць усе мы ў вэб-распрацоўнікаў
любымі сродкамі, але на самой справе проста каб даць вам густ некаторых
з фундаментальных канструкцый з таго, што пераходзіць у вэб-праграмавання і вэб-сёння
развіццё, таму статычная бок things--
няма ніякай логікі, ніякага праграмавання мова, проста статычны кантэнт.
І гэта дасць нам магчымасць на самай справе ўбачыць, што вэб-сервер,
Паглядзіце, што HTML-файл, паглядзець, што гэта HTTP на самай справе абслугоўвае да.
Але перш чым мы паглыбімся ў, рэтраспектыва пытанні аб хмарных вылічэнняў
або бяспекі, або што-небудзь паміж імі?
>> Няма?
Добра, добра, давайце зрабіць гэта, на ўсялякі выпадак
працэс падпісаўшыся нешта займае ўсяго некалькі хвілін.
Мы дазволім гэта рабіць у фонавым рэжыме.
Ідзіце наперад, калі вы маглі б, У сувязі з гэтым URL here-- c9.io.
Гэта трэцяя бок service-- Платформа як сэрвіс, калі вы will--
што збіраецца запрасіць Вас падпісацца на рахунак,
і ён збіраецца даць кожнаму з вас рахунак у так званым воблаку
на развіццё інфраструктуры кагосьці іншага, кампанія пад назвай Cloud9.
Але што прыемна пра у тым, што яны даюць вам
апраксімацыя фактычнае развіццё рэальнага свету
ахова навакольнага асяроддзя, хоць і ў воблака і ў вэб-браўзэры,
і мы будзем выкарыстоўваць гэта на самай справе эксперыментаваць трохі сёння.
А потым ісці наперад і проста перамяшчацца ваш шлях да працэсу рэгістрацыі
калі вы маглі б.
Такім чынам, мы вырашылі выкарыстаць гэта ў класе Я вучу для ўсіх нашых студэнтаў,
як на кампусе і па-за цяпер, і гэта замяніць тое, што гістарычна
у адваротным выпадку было загружанае праграмнае забеспячэнне.
Так што вы атрымаць доступ да з'яўляецца адным з гэтых віртуальных машын,
па сутнасці, што я апісаў вышэй.
Так што гэтая кампанія Cloud9 верагодна рэнта ад трэцяй party-- на самай справе
У гэтым выпадку, Google-- цэлае куча віртуальных машын
што яны неяк крышыць ў ілюзія асобных сервераў
што кожны з нас мае поўны кантроль над.
Гэта не зусім правільна казаць што яны віртуальныя машыны,
хоць, таму, што Cloud9 фактычна выкарыстоўвае
з'яўляецца некалькі больш новая тэхналогія называецца контейнеризации.
І дазвольце мне захапіць гэтую карціну тут, каб намаляваць гэтую карціну.
>> Кантэйнер, калі вы памятаеце карціну
ад раней, ледзь святлей вага, чым на віртуальнай машыне.
На самай справе, у той час як у мінулым раз, калі мы казалі аб там
быўшы аперацыйнай сістэма і гіпервізара
а затым гасцявой аперацыйнай сістэмы, госць аперацыйная сістэма, гасцявой аперацыйнай
Сістэма, на верхняй панэлі фізічнага абсталявання,
розніца з гэтым новы тэхналогіі, контейнеризации,
у тым, што ўсе яны так ці інакш падзяляюць тая ж аперацыйная сістэма.
Але яны па-ранейшаму ствараюць ілюзія ўсіх
маючы яго ці яе уласны эксклюзіўны адміністрацыйныя правы і файлы
на серверы.
Але ёсць менш праграмнага забеспячэння ў паміж вамі і апаратнымі сродкамі.
Вынікам якога з'яўляецца, у тэорыя, больш высокую прадукцыйнасць,
таму што вы карыстаецеся ці марнаваць менш рэсурсаў
на гэтым так званым пласце віртуалізацыі.
Такім чынам, гэта называецца контейнеризации па сваёй прыродзе
шляхам тэхналогіі пад назвай Docker, які вельмі падыходзіць у свае правы.
І гэта тое, што інжынеры кампаніі
можа збольшага свайго роду пачаць гаварыць аб хуткім часе, калі яны яшчэ не зрабілі гэтага,
хоць, вядома, няма Прычына скакаць на любых bandwagons.
>> Так з гэтым сказаў, што вы, напэўна, глядзіце зараз
ўяўляе сабой экран, які выглядае крыху як гэта.
ДОБРА.
І проста патэлефанаваць мне на сябе, калі няма.
І калі so-- я прыйду, калі няма.
Ідзіце наперад і націсніце што вялікі плюс для стварэння працоўнай прасторы,
і вы ўбачыце экран, як гэта.
Вы можаце патэлефанаваць у працоўная прастора назваць усе, што вы хочаце цяпер.
І толькі на самай справе для прастаты, ісці и-- добра, некаторыя з вас
ўжо ёсць працоўныя вобласці.
Называйце гэта як want-- бізнес, Гарвард, чацвер, што вы хацелі.
Вам не трэба апісанне.
Вы можаце пакінуць яго закрытым, калі не вам ўжо ёсць куча рабочых прастор.
Калі вы вымушаныя зрабіць гэта публічна, гэта нармальна для сённяшніх мэтаў.
Тут, таксама, з'яўляецца адным з Upsells.
Вы атрымліваеце адно закрытае працоўная прастора па змаўчанні. Але калі вы хочаце больш,
вы павінны плаціць больш.
У адваротным выпадку, яны прымушаюць вас каб зрабіць Вашу працу грамадскасці.
Але гэта нармальна, таму што яны таксама мэта гэтага на адкрытых зыходных супольнасцяў
каб заахвоціць людзей на самай справе супрацоўнічаць.
>> І апошняе, што вельмі важна, хоць, гэта, пасля таго, як вы выбіраеце імя
і пасля таго, як вы абралі прыватныя або дзяржаўныя, націсніце HTML5, аранжавы значок вялікі
другі злева, і затым націсніце кнопку Стварыць рабочую вобласць.
І гэта, верагодна, заняць хвіліну ці каля таго,
але вы будзеце тады мець ахова навакольнага асяроддзя, як толькі вы
зрабіць гэта, што выглядае нагадвае што ў мяне ёсць на экране тут.
Але, зноў жа, гэта можа заняць хвіліну ці больш, каб атрымаць гэты экран
як толькі вы націснулі Стварыць рабочую вобласць.
Але як раз сцяг мяне, калі вы хочаце, каб я каб зірнуць на што-небудзь ці раіць.
Добра.
Так што я збіраюся фоне гэтага цяпер.
Патэлефануеце мне больш, калі вы, здаецца, ёсць нейкія тэхнічныя цяжкасці.
Але, зноў жа, гэта можа заняць няшмат для таго, каб адкрыць.
І давайце ісці наперад і казаць пра тое, што гэта фактычна азначае, каб зрабіць вэб-старонку,
тое, што HTML, і як усё гэта Цяпер злучае паміж сабой, як мы пачынаем
на самай справе выкарыстаць некаторыя тэхналогіі.
Так атрымліваецца, што я магу ісці на маім маленькім Mac тут,
адкрыць простую праграму пад назвай TextEdit, або на Windows, я мог
адкрыць нешта называецца Notepad.exe.
І я мог бы проста зрабіць нешта як this-- "Прывітанне, свет".
І тады я мог бы захаваць гэта як hello.txt Дык не магіі там.
Гэта не мае нічога агульнага з вэб праграмаванне, нічога агульнага з HTML.
Проста стварыць просты тэкставы файл.
Але аказваецца, што вэб старонка літаральна толькі што.
Гэта просты тэкставы файл, які змяшчае тэкст што вы можаце набраць на клавіятуры,
але гэта, як правіла, але не заўсёды заканчваецца не .txt, але .html або .htm.
І вы не проста увядзіце слова ў файле.
Вы на самой справе трэба выкарыстоўваць рэчы, званыя тэгі або, у больш агульным плане, што-то
называецца мова разметкі.
>> Так што я збіраюся вельмі хутка набраць а затым растлумачыць наступнае.
Я буду першым тыпу гэта, у якім гаворыцца,
эй, браўзэр, вось ідзе вэб-старонкі напісаны на HTML.
І гэтыя дзве рэчы разам кажуць, эй, браўзэр, наступны сапраўды HTML.
Эй, браўзэр, тут ідзе галавы або верхняй частцы маёй старонкі.
Эй, браўзэр, ўнутры верхняй частцы мая старонка, пакласці назва, якое, "Прывітанне,
свет ".
Эй, браўзэр, пасля таго, як кіраўнік майго старонка, вось ідзе цела старонкі.
І, эй, браўзэр, цела майго старонка павінна таксама сказаць, "прывітанне свет".
Так, якія характэрныя дэталі тут?
Гэта тое, што ў цэлым называецца дакумент тыпу дэкларацыі,
і, шчыра кажучы, гэта крыху цяжка заўважыць гэтую на першы погляд.
Вы толькі збольшага скапіяваць і ўставіць яго.
Гэта фармальны спосаб сказаць, эй, браўзэр,
Я выкарыстоўваю HTML версіі 5, якая выйшаў некалькі нядаўна.
Гэта магічнае заклінанне, што некаторыя людзі з дрэнным пачуццём дызайну
вырашыў паставіць на самы верх файла.
Нягледзячы на ​​тое, што гэта трохі аркан, вось і ўсё
гэта азначае: Гэй, браўзэр, тут пастаўляецца з 5-й версіі HTML.
>> Астатняя частка гэтага была з намі на працягу некаторага часу, гістарычна склалася так,
але гэта было эвалюцыянуе, і гэта верагодна, становіцца трохі прасцей.
Звярніце ўвагу на некаторыя характарыстыкі аб тым, што я вылучыў.
Там у гэтыя рэчы з вуглавымі brackets-- левы кранштэйн
і правая дужка.
І звярніце ўвагу на сіметрыю тут.
І ў сілу сіметрыі, я маю на ўвазе, гэтак жа, як я ёсць гэты пачатковы тэг тут або адкрыты тэг
калі вы будзеце, тут у мяне ёсць які зачыняе тэг або канчатковы тэг гэта
адрозніваецца толькі пастолькі, паколькі ён мае гэты слэш у пачатку слова
HTML.
І вы можаце думаць аб гэта як я быў выпадкова
прапаноўваючы перад тым, эй, браўзэр, вось некаторыя HTML.
І, наадварот, эй, браўзэр, гэта гэта для пачатку і канца HTML--.
>> У той жа час эй, браўзэр, тут прыходзіць кіраўнік маёй старонкі.
Эй, браўзэр, гэта ўсё для галавы.
Эй, браўзэр, вось цела маёй старонкі.
Эй, браўзэр, гэта ўсё для цела.
А ўнутры што некаторая адвольны тэкст на дадзены момант.
А ўнутры галавы, тым часам, некаторая адвольная, але заўважана,
так бы мовіць, тэкст, які кажа, назва маёй старонкі павінны быць "Добры дзень, свет».
Цяпер, на дадзены момант, вы можаце Выкажам здагадку, што браўзэры
маюць only-- ці, дакладней, вэб-старонкі маюць толькі два parts-- галаву і цела.
І галава, як правіла, проста як у радку меню, матэрыял
на самай справе проста на самым версе.
А цела кішкі старонкі, ўсё ў гэтай вялікай прастакутнік
што запаўняе экран.
Так што я збіраюся ісці наперад і рабіць гэта.
Я збіраюся ісці наперад і націсніце кнопку Захаваць, Файл Захаваць.
І я збіраюся захаваць гэта як hello.html,
і я проста збіраюся паклаў яго на маім працоўным стале.
І я збіраюся пайсці наперад і націсніце кнопку Захаваць.
І notice-- мой Mac у меры крычыць на мяне.
Вы ўпэўненыя, што хочаце гэта зрабіць?
І я збіраюся сказаць, ды, выкарыстоўваць HTML.
Я ведаю, што лепш у гэтым выпадку.
А цяпер я збіраюся пайсці на мой працоўны стол дзе ў мяне ёсць гэты файл раптоўна.
І я збіраюся двойчы пстрыкнуць па ім.
І вы заўважыце, што, па змаўчанні, Chrome адкрыў.
Гэта таму, што гэта мой браўзэр па змаўчанні.
І гэта як раз кажа: "Прывітанне, свет."
Але ён кажа: "Прывітанне, свет "у двух месцах.
Звярніце ўвагу, у левым верхнім куце.
Даволі цяжка прапусціць гэта.
Гэта вялікі і смелы.
А дзе яшчэ яна здаецца сказаць: "Прывітанне, свет"?
>> ГЛЕДАЧЫ: На ўкладцы.
>> DAVID J. малая: Так, ўкладка сама.
Таму, калі я сказаў кіраўнік старонка ўсё дагары top--
і на самой справе гэта назва.
Гэта проста на ўкладцы тут.
І я магу выцягнуць гэтую ўкладку так, каб не пераблытаць.
Гэта толькі адна ўкладка ў цяперашні час, і на самай справе мы бачым, "Прывітанне, свет"
тут і "Прывітанне, свет" тут.
Так што даволі проста.
Але гэта таксама даволі проста.
І, на самай справе, я павелічэнні маштабу.
Я магу змяніць памер шрыфта проста каб павялічыць для даступнасці.
Але давайце зараз зрабіць нешта крыху больш цікавым.
>> Я збіраюся go-- воклічы, хай мне вярнуцца ў мой тэкставы файл.
Я вяртаюся да свайго тэкставы файл, і я збіраюся
каб змяніць гэта і сказаць "Прывітанне, Свет Дыснею".
Захаваць.
І вярнуцца да маіх браўзэра і націсніце Абнавіць.
І цяпер, вядома, кажа: "Свет Дыснею".
І я збіраюся штучна павялічыць ў проста так лягчэй бачыць.
Так што цяпер, на жаль, я як бы хачу на самай справе, мэтай якіх, гэта функцыя Mac.
Я хачу, каб націснуць на Disney World і пайсці куды-небудзь, як disney.com,
але гэта не працуе.
Такім чынам, асноўным прынцыпам у Інтэрнэце з'яўляецца гіперспасылак, спасылкі, якія ідуць у іншым месцы.
Дык як жа я магу гэта зрабіць?
Ну, я мог бы проста сказаць, "Прывітанне, http://www.disney.com."
Захаваць.
Абнавіць.
Але гэта таксама не клікабельнасць.
І што тут добра, нягледзячы на ​​тое, гэта не функцыянальная яшчэ,
з'яўляецца тое, што здаецца, што браўзэр робіць літаральна толькі
тое, што я кажу гэта зрабіць.
Так што, калі я проста ўвядзіце URL, як гэта, гэта проста будзе паказаць мне URL.
Мне трэба выкарыстоўваць тэгі або разметкі мова на самай справе сказаць
браўзэр, каб зрабіць яшчэ больш.
Так што я збіраюся ісці наперад і выдаліць гэта на імгненне.
І я збіраюся сказаць, эй, браўзэр, пачніце якар тут,
спасылку, так бы мовіць.
А гіпер-спасылка, прызначэнне гэтага якара, павінен быць гэты URL.
І заўважце, мае цытаты.
Я мог бы выкарыстаць адзінкавыя двукоссі, таксама, але вы павінны быць паслядоўнымі,
і я б наогул проста выкарыстоўваць падвойныя двукоссі, каб захаваць яго простым.
Звярніце ўвагу, што я збіраюся зачыніць тэг.
І тады тут я іду сказаць, "Свет Дыснею".
А цяпер мне трэба трохі symmetry-- адкрытая дужка, / а, закрытая дужка.
>> Дык што ж я прадставіў?
У нас было некалькі тэгаў ўжо.
HTML, кіраўнік, Назва, Цела, усе пазнакі, так бы мовіць,
з адкрытымі і зачыненымі калегамі.
Але заўважце, што гэта свайго роду прынцыпова адрозніваецца.
Гэта тое, што мы будзем называць у HTML атрыбут.
І атрыбут з'яўляецца проста ключ-значэнне пары.
Гэта звычайная справа ў science-- кампутара ключ-значэнне пары.
Гэта свайго роду інструмент гандлю.
Ключ і значэнне.
Слова, а затым некаторыя іншае слова ці словы.
І ў гэтым выпадку, ключ HREF, і значэнне ў тым, што поўны URL.
А што атрыбут робіць яго ўплывае на паводзіны тэга.
І ў гэтым выпадку, мы павінны ўплываць паводзіны тэга прывязкі,
таму што нам трэба, каб замацаваць спасылку дзе-небудзь.
А як вы робіце гэта шляхам атрыбуту.
>> Так што я збіраюся ісці наперад і захавайце файл цяпер.
Вярніцеся ў браўзэры і перазагрузіць.
І, вуаля, мы цяпер маем Пачатак законнага вэб-старонкі.
Супер-просты, але калі я навядзіце курсор мышы на this-- апавяшчэнне ў левым ніжнім куце,
гэта супер-маленькі.
Але вы бачыце www.disney.com.
І калі я націскаю яго, на самай справе гэта венікі мяне да disney.com.
Цяпер, цікаўная рэч тут з'яўляецца тое, што гэта не так
best-- самым хадавым URL, але гэта нармальна, таму што гэты файл ёсьць
існуюць на World Wide Web.
Ён існуе ў выглядзе лакальнага файла ў па-відаць, мае Карыстальнікі directory-- / jharvard--
для Джона Harvard-- / працоўны стол.
Але ў яго ёсць URL.
Гэта як раз здараецца быць лакальным.
На жаль, ніхто з вас не можа наведаць гэта, таму што калі вы ўводзіце гэты URL,
вы будзеце распавядаць свой браўзэр, шукае файл з імем hello.html
на цвёрдым дыску.
І, вядома ж, калі вы не ішлі ўздоўж ўручную,
гэта не будзе існаваць там.
>> Так што гэта нармальна.
Мы па-ранейшаму патрэбен спосаб, у канчатковым рахунку, каб атрымаць гэты файл у Інтэрнэце,
але давайце дражніць адзін ад аднаго пару наступствы для бяспекі таго, што мы проста
убачыў і звязаць яго назад да раней абмеркаванне з гэтага раніцы.
Аказваецца, што, калі браўзэр літаральна робіць
што я кажу гэта рабіць, і здаецца, каб быць так, што якар тэг
пад уплывам кошту гэты атрыбут называецца HREF
але ён адлюстроўвае гэта тэкст, гэта, здавалася б
мае на ўвазе, што я мог бы паставіць URL у абодвух месцах, а затым перазагрузіць
і цяпер убачыць URL і перайсці да URL.
Звярніце ўвагу, калі я навядзіце курсор мышы на ніжнім левым куце, Я сапраўды збіраюся яшчэ disney.com.
>> Так што калі вы калі-небудзь phished-- З-Н-I-S-H-E-D--
з адным з гэтых фіктыўных лістоў ад як PayPal вашага банка,
вы, верагодна, атрымалі спасылкі ўнутры з электроннай пошты, які вы чытаеце, што
кажа вам, націсніце тут, каб пайсці пацвердзіць ваш пароль ці пацвердзіць дату свайго нараджэння
або сацыяльнага ці нешта сацыяльна інжынірынг вам раскрыць
інфармацыя.
Ну, я мог бы прыняць выгляд Перавага гэтага, ці не магу я?
Я мог бы сказаць нешта як, www.paypal.com.
І замест таго, каб Disney.com, я можа ісці, як, badguy.com.
Абнавіць.
І наколькі лёгка надзьмуць, асабліва нетэхнічнае чытача
або чытанне бегла Чытач, чым пстрыкнуць
спасылку, як гэта, што калі я націсну it-- Я на самой справе не хачу ісці badguy.com.
Я не ведаю, што на самой справе там.
Так paypal.com, заўважце, гэта што ён кажа, што гэта будзе,
але, вядома, калі я гляджу ўніз супер-нізкім, гэта трохі размыта,
але ён кажа badguy.com.
Вось толькі сказаць прама зараз што я іду ў няправільным месцы.
І калі я ўжо казаў раней, што банкі на самай справе не павінны заахвочваць або навучаць
карыстальніка пстрыкнуць спасылкі, гэта гэта толькі адно з праяў гэтага.
І гэта так проста.
Цяпер вы праціўнік, калі Вы робіце нешта накшталт гэтага
і спрабуюць падмануць карыстальніка у наведванні вашага сайта.
Але цяпер, мы будзем трымаць рэчы прыгожым і чыстым.
Мы будзем ісці наперад і таму гэтыя змены.
Абнавіць старонку.
І я вяртаюся да disney.com.
>> Давайце паглядзім, калі мы не можам дражніць гэта адзін ад аднаго крыху больш.
Такім чынам, "Прывітанне, Свет Дыснею".
Я буду казаць тут.
Можа быць, я збіраюся зрабіць некаторую пакой.
"Мы спадзяемся, што вам спадабаецца ваша знаходжанне!"
Захаваць.
Абнавіць.
Гэта не rea--, што не тое, што я меў намер, ці не так?
Я маю на ўвазе, калі я апрацоўваць мой тэкст файл як тэкставы працэсар,
што вы спадзяюся, што адбудзецца тут?
Так, я адчуваю, як там павінен быць перапынак лініі тут,
таму ён адчувае сябе багі ў некаторым родзе.
Але гэта на самай справе наўмысным, таму што так жа, як і раней,
браўзэр будзе толькі рабіць тое, што вы скажаце ёй зрабіць.
Я не сказаў гэта, каб разарваць лініі.
Я не сказаў яму рухацца ўніз, нават хоць, інтуітыўна, я адчуваю, што я зрабіў.
Так атрымліваецца, нам трэба трохі больш разметкі,
і я збіраюся выправіць гэта наступным чынам.
Я збіраюся апярэдзіць гэты першы прывітанне з тым, што называецца тэг абзаца.
А потым я збіраюся ісці наперад і абгарнуць гэта іншая прапанова
у іншым пункце тэга, нягледзячы на ​​тое, яны супер-кароткія параграфы.
Цяпер я збіраюся захаваць.
Абнавіць.
І зараз у нас ёсць што прастору, і мы сартуем
маюць семантыку два асобных пункта.
>> Гэта ўсё добра і добра, але гэта было б нядрэнна дадаць малюнак на гэтай старонцы,
так што я збіраюся ісці шукаць Мікі Маўс на Google Images.
І проста для задавальнення, я збіраецца захапіць гэты вобраз.
Я збіраюся ісці наперад цяпер і захапіць URL гэтага малюнка,
хоць ёсць розныя спосабаў зрабіць гэта.
На дадзены момант, я проста хачу, каб скапіяваць URL.
Я збіраюся вярнуцца ў мой тэкст файл, і я збіраюся тут сказаць,
IMG SRC = цытатай Unquote што URL, звышдоўгіх.
І тады паняцце малюнак трохі адрозніваецца.
Там на самай справе ніякага паняцця запуску малюнак і заканчваючы малюнак,
як пачатковы тэг канчатковы тэг.
Так ён адчувае сябе крыху дзіўна я семантычна, каб зрабіць гэта,
мець тэг буйным малюнка.
Гэта не няправільна.
Гэта зусім правільна, і гэта заахвочваецца,
але ёсць скарочаная запіс.
Я магу выгляд адначасова адкрываць і зачыняць адзін і той жа тэг,
І што зрабіў браўзэр шчаслівым.
Так што гэта проста трохі больш ёмістым для рэчаў
што канцэптуальна сапраўды ня маюць сэнс для пачатку і заканчэння.
Яны проста ёсць, ці яны не з'яўляюцца.
>> Так што я збіраюся захаваць гэта і вярнуцца да майго "Прывітанне, свет" старонкі і перазагрузкі.
І гэта крыху з-пад кантролю, таму што малюнак на самай справе
трохі вялікі, але гэта нармальна.
Я мог бы змяніць яе памер у праграме.
Ці вы ведаеце, што.
Проста каб паказаць, што я будзе на самой справе сказаць
што шырыня гэтай рэчы павінны толькі 200 пікселяў, 200 кропак.
Дазвольце мне ісці наперад і захаваць і перазагрузкі, а цяпер старонка
выглядае крыху больш разумным.
Але зьвярніце ўвагу на малюнак.
Ну, я накшталт вучыў вас усіх з HTML ў нейкім сэнсе, па меншай меры,
канцэптуальна, так як усе HTML гэта з'яўляецца гэтыя tags-- адкрытыя пазнакі, закрытыя тэгі,
і атрыбуты, якія змяніць сваё паводзіны.
І, мяркуючы па ўсім, кожны Тэг можа мець нуль або адзін
ці два ці больш атрыбутаў, кожны з які робіць нешта крыху па-іншаму.
Зараз, як вы ведаеце, што існуе?
Вы проста слухаць кагосьці як мне сказаць вам, што існуе,
ці вы проста Google вакол падручніка на HTML, і гэта на самай справе гэта проста.
>> На самай справе, калі я быў старшакурснік гадоў таму і даведаўся, HTML,
адзін з маіх матэматыцы выкладання памочнікі толькі што правялі
крыху часу навучаючы мяне на працягу як паўгадзіны, гадзіну,
а потым я быў на маім шляху.
Я быў на маім шляху да рабіць самыя агідныя сайты калі-небудзь,
які, відаць, у мяне няма сапраўды прасунулася далей.
Але справа ў тым, што, як толькі вы зразумець гэтыя простыя ideas--
калі аркан text--, але гэтыя простыя ідэі запуску думкі
і закрыццё думка, захоўваючы усё добра збалансаваны,
гледзячы то ўверх, якая змяняе Паводзіны гэтага тэга, гэта сапраўды ўсё
ёсць на яго.
І на самай справе, калі мы зараз пераходзім да нешта накшталт google.com-- на самай справе,
давайце месца крыху больш reasonable-- stanford.edu.
І я збіраюся пайсці, каб паглядзець, Распрацоўшчык, View Source.
Гэта непрыгожа, але notice-- і я буду набліжаць апавяшчэння
некаторыя рэчы, якія знаёмыя ўжо.
Там гэтая тут, які з'яўляецца браўзэр.
Вось ідзе HTML5.
Там у HTML.
Па-відаць, ёсць атрыбутаў, што я не зрабіў
выкарыстоўваць, што паказвае мова старонкі,
і гэта можа дапамагчы з аўтаматычным пераклад і да таго падобнае.
Вось кіраўнік старонкі.
Вось назва старонкі Стэнфорда.
Там у тэг я не зрабіў казаць пра yet-- мета-тэг.
Гэта проста выгляд даведачная інфармацыя.
Гэта дапамагае з SEO, або аптымізацыя для пошукавых сістэм,
ці вынікі Google-пошуку ці таму падобнае.
Але калі мы будзем глядзець, трымаць гледзячы, вось тэг Body.
І ёсць гронак іншы тэгі мы не казалі пра тое ж.
Але дзіў адзін для Падзел старонкі.
Гэта як нябачны прастакутнік калі вы, здаецца, хочаце думках
падзяліць старонку на розныя падраздзялення анлайн.
А потым шмат дзівы я см, тое, што называецца клас,
але мы вернемся да гэтага.
>> Гэта interesting-- формы.
Формы па ўсёй сеткі.
Любы акно пошуку вы калі-небудзь выкарыстоўвалі гэта форма.
І, таму, давайце на самай справе ўбачыць.
Форма.
Дзеянне.
Дзеянне гэтай формы, па якіх-небудзь гістарычныя прычыны, у тым, што URL.
Метад "пост".
Аказваецца, што HTTP-запыты могуць выкарыстоўваць дзеяслоў "атрымаць", як мы бачылі раней,
ці "пост".
І ўбачыце розніцу гэта ў адзін момант.
Давайце паглядзім, што на самой справе гэта.
Дазвольце мне вярнуцца да старонкі Стэнфорда.
Якую форму яны кажуць о, як вы думаеце?
Што выскоквае ў Вас?
>> ГЛЕДАЧЫ: Акно пошуку.
>> DAVID J. малая: Так.
Так ўверх у верхнім правым куце вось гэта акно пошуку.
І вось як яны рэалізавалі it-- тэг, які ў літаральным сэнсе форма адкрытая дужка.
А потым давайце шукаць нешта.
Давайце шукаць напарніка з mine-- "Нік Parlante."
Enter.
І, вядома ж, ён пайшоў крыху іншы URL.
Дазвольце мне вярнуцца сюды.
Давайце шукаць "курсы".
Чорт пабяры.
Пайшоў да іншага URL.
Такім чынам, Стэнфард, дадаўшы трохі магіі што яны не прымаюць мяне да URL
што мы бачылі ў атрыбутаў там дзеянні.
Але гэтая форма тут рэалізуецца чыста шляхам гэтай разметкі тут, гэтыя тэгі.
На самай справе, вось уваход для тып пошуку, які вы хочаце.
Вось уваход для адзін з тыпаў пошуку.
Тут уваход для самой радка.
І таму мэта складаецца ў тым, каб не абгарнуць нашы розумы вакол усіх гэтых тэгаў
але толькі, каб бачыць.
Гэта проста адкрыццё і закрыццё тэгі і шукаюць рэчы.
Так?
Вікторыя?
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Гэта добры пытанне.
Гэта крыху больш складана, каб убачыць.
Дазвольце мне вярнуцца да таго, што пытанне ўсяго за некалькі хвілін
калі мы глядзім на тое, што называецца CSS або каскадныя табліцы стыляў лістоў,
і мы можам паспрабаваць зрабіць выснову, як шмат ад старонкі.
Так што, калі мы зараз паглядзім на google.com, давайце паглядзім, што іх старонка выглядае наступным чынам.
Вы б they're-- гэта міла сёння.
ДОБРА.
Усё зроблена.
Добра, так што View Source.
Можна было б падумаць Google мае сапраўды добры зыходны код.
Так што, мяркуючы па ўсім, што тут адбываецца?
І на самай справе, гэта нават не HTML.
Гэта тое, што называецца JavaScript.
І давайце працягваць ісці і ісці.
Я нават не ведаю, дзе пачынаецца старонка.
Я збіраюся выкарыстоўваць каманду F, адкрытая дужка HTML.
Добра, там.
Я знайшоў пачатак старонкі, і як многа розных рэчаў тут.
>> Што на самой справе адбываецца?
Ну, вы ведаеце, што, мы можам ачысціць гэта.
Калі я замест таго, каб пайсці на гэта агляд Панэль інструментаў, гэта спецыяльны дыягнастычны інструмент,
і ісці не ў сеткі, дзе мы працягваем ісці сёння,
але калі я іду да элементаў, што сапраўды прыемна
з'яўляецца тое, што браўзэр мае шмат значна лепш вочы, чым я.
І браўзэр можа чытаць што беспарадак вэб-старонкі,
што HTML пошта мы проста глядзеў, і гэта можа
разабраць яго ці чытаць і аналізаваць яе і перафарматаваць
у добрым лёгкачытальным чынам.
Так што я бачу прама цяпер На гэтым экране тут
пад элементаў, так падобны на ўтрыманне, але яны ўсё з водступам,
яны размаляваныя, але гэта той жа самы тэкст
што я запампаваў з сервера.
>> І што цяпер прыемна, што я магу бачыць, ў арганізме, для instance-- апавяшчэння,
старонка па-ранейшаму складаецца проста галава і цела,
і я магу іерархічна апусканне тут.
Звярніце ўвагу на тое, што Google, здаецца, каб divs-- гэты і гэты.
Я магу пашырыць гэта.
Там цэлая куча іншых дзівы.
Так што гэта крыху складаным.
Але пачакайце.
Гэта, здаецца, нашмат больш чытаным, адносна, чым гэта.
Чаму Google няёмка Сам проста пасылаць
гэты велізарны беспарадак кода некаторых сартаваць проста рэалізаваць нешта
які выглядае так проста на першы погляд?
Маўляў, чаму яны не дадаюць больш прасторы?
Чаму яны не патрапілі Enter, як я зрабіў?
Паглядзіце, наколькі добра я быў пры напісанні вэб-старонкі.
Я ўдарыў Enter так старанна.
Я з водступам, таму ўсе гэта так прыгожа і чытэльным.
Чаму Google не практыкуюць тое ж самае?
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Добра.
Вельмі справядліва.
Яны не маюць нейкі Чалавек у Google ўручную
абнаўленне хатняй старонкі больш.
Гэта не 1999 больш.
Такім чынам, у іх ёсць праграмнае забеспячэнне.
У іх ёсць іншыя інструменты, якія генераваць дынамічна яны HTML.
Натуральна, што сам код была напісана людзьмі,
але рэальнасць такая, гэта цалкам справядліва сказаць,
браўзэр, вядома, не ўсё роўна, як брудны код.
Але ёсць яшчэ больш пераканаўчыя тэхнічныя прычыны
што Google распаўсюджвае іх HTML код у такой неахайнай, здавалася б,
пераважнай чынам, сабраныя разам з вельмі мала way-- вельмі мала
на шляху фарматавання, як я зрабіў.
>> ГЛЕДАЧЫ: [неразборліва]
>> DAVID J. малая: Хутчэй?
Чаму?
І што вы сказалі, Лідзія?
Хутчэй?
Чаму хутчэй?
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Там у няма месца для чытання.
Так.
Так што думайце пра тое, што такое прастору.
Такім чынам, кожны знак на клавіятуры прымае некаторы колькасць прасторы для прадстаўлення,
альбо фізічна, як гэта займае шмат месца, што,
ці неяк пад капот, які патрабуе памяці.
І як aside-- і мы гаварыць больш аб гэтым tomorrow--
кожны знак на клавіятуры як правіла, патрабуецца 8 бітаў або адзін байт.
Такім чынам, структура 8 нулёў або з іх, ці толькі 1 байт, як мы
людзі, як правіла, кажуць, будзе.
Так што гэта невялікі, але яна па-ранейшаму не роўныя нулю.
Гэта ўсё яшчэ некаторы колькасць прасторы.
Так што, калі інжынер або Google хіты прабел, толькі адзін раз, і хай
Google-- гэта супер-popular-- Выкажам здагадку, што мільярд чалавек
наведаць іх хатнюю старонку ў дзень, або некаторая колькасць людзей,
наведаць хатняй старонцы мільярд раз у дзень,
колькі дадатковых байт мае тое інжынер-праграміст проста стаіць Google
на адзін раз патрапіўшы яго ці яе -пробел-?
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Не зусім так дрэнна.
Ўсяго адзін раз байт мільярд.
так a--
ГЛЕДАЧЫ: 8 мільярдаў гігабайт.
DAVID J. малая: Ці не за 8 млрд.
8 мільярдаў байт.
Але 1 гігабайт.
1 гігабайт будзе адзінка вымярэння.
Калі ён ці яна робіць два месца, 2 гігабайта.
Тры гігабайта.
Дакладна?
Гэта шалі дорага.
І таму ў такіх выпадках, як Google, які, як належнае, крайнія выпадкі,
Ёсць і іншыя праблемы, якія ўзнікаюць толькі робячы вельмі разумныя рашэнні
або прымаць вельмі простыя чалавечыя дзеянні, так як ён мае гэты Magnified эфект.
Такім чынам, адной з прычын гэта выглядае так сціснуты
менавіта так, як Вікторыя said-- гэта было проста генеруецца з дапамогай кампутараў у любым выпадку.
Так што няма нічога асаблівага.
Хай браўзэр зразумець гэта.
Але гэта таксама наўмысна не мае шмат месца,
таму што прастора не з'яўляецца неабходным.
А прастора на самай справе каштуе грошай.
>> Гэта альбо выдаткі часу, таму што як раз націснуць
што значна больш дадзеных з Штаб-кватэра Google.com проста
атрымаў заняць некаторы колькасць час, нават калі гэта мілісекунды
або мікрасекунды, але гэта дадае над такой колькасцю карыстальнікаў, або, хутчэй за ўсё,
гэта, верагодна, каштуе грошай.
Google, верагодна, падключаецца да хтосьці яшчэ ў свеце, адзін
з тых, узіраючыся кропкі, і калі ў іх ёсць
свайго роду фінансавых адносін у выніку чаго іх дадзеныя каштуе грошай,
яны маглі б таксама звесці да мінімуму, колькі дадзеных
яны выплёўваючы на іх падлучэнне да Інтэрнэту.
>> Так што самае пацешнае, хоць, у канчатковым рахунку, або, можа быць абнадзейваючым рэч,
у тым, што нягледзячы на ​​тое, што гэта выглядае жудасна пераважная, у рэшце рэшт,
гэта ўсё яшчэ тыя ж самыя прынцыпы, як гэта вельмі простая старонка тут з HTML
стар.
Так што проста абагульніць і так, што вы маюць кананічную версію, калі вы не былі
вынікаючы ўздоўж па выбары тут, тут можа быць самы просты вэб-старонак,
дык нешта, каб гуляць з, магчыма, пазней.
>> Што ж, давайце ўвесці пара іншых ідэй у цяперашні час.
Мы збіраемся ўвесці тое, што называецца тэг стылю.
Мы можам стылізаваць гэтую старонку ў больш цікавых спосабаў.
Так у той час як HTML электроннай пошты ўсё пра разметцы
дадзеныя, свайго роду ўказанні да браўзэр, як структура дадзеных,
дзе паставіць яго, CSS, або каскадныя табліцы стыляў,
з'яўляецца другім мовай, які як правіла, атрымлівае змешвацца з HTML
як мы будзем see-- але мы можам ачысціць што да ў moment--, які прымае
гэта канчатковая мілі, і ён стылізуются яго.
Ён атрымлівае колеру толькі права, шрыфт памерам як раз,
пазіцыянаванне раз.
Гэта ўсё аб эстэтыцы або фарматаванне, а не пра
сама па сабе фундаментальныя дадзеныя.
І самы просты спосаб, каб паказаць гэта магчыма, напрыклад.
Так што я збіраюся перайсці на мой просты тэкставы файл.
І ў той самы момант, я буду хадзіць з намі праз працэс
рабіць гэта самі.
>> Я збіраюся вярнуцца ў мой файл тут і перазагрузіце старонку проста
каб пацвердзіць, што ён выглядае.
Вось дзе мы знаходзімся ў цяперашні час.
Я адчуваю, што дзеці будуць карыстацца маючы некаторы колер да гэтай вэб-старонцы.
Так што я збіраюся ісці тут ў галаве старонкі.
І я збіраюся зрабіць стыль, стыль /.
А потым ўнутры гэтага, я збіраюся сказаць цела маёй page--
і гэта фарматаванне, пры першы погляд, магчыма, трохі
дзіўна, але звычайны.
Я хачу сказаць, што на фоне Колер гэтай старонкі павінен быць зялёным.
І гэта, на жаль, выгляд не самы лепшы дызайн.
Звярніце ўвагу на тое, што раней ў свеце HTML,
Я сказаў, што атрыбуты гэтыя пары ключ-значэнне.
Сёе-тое раўняецца цытаты Unquote "нешта."
У свеце CSS, які быў распрацаваны некаторымі рознымі людзьмі,
яны вырашылі, што, у сваю свет, пар ключ-значэнне
было б слова нешта двукроп'е.
Так што гэта тая ж самая ідэя, хоць.
Гэта асацыяванне значэнне з некаторымі ключ, які нейкім чынам
ўплывае на паводзіны гэтай старонкі.
>> І вы, напэўна, здагадаліся.
Што ж гэта, верагодна, будзе рабіць, нават калі вы ніколі не
бачыў HTML або CSS раней?
ГЛЕДАЧЫ: Змена колеру фону.
DAVID J. малая: Так, змяніць колер фону.
І ў прыватнасці, Колер фону цела.
Але настолькi, наколькi Цела на дадзены момант з'яўляецца вэб
page-- гэта адзінае ніжэй радкі загалоўка really--
гэта, верагодна, будзе ўплываюць на тое ж самае.
Такім чынам, давайце паглядзім.
Давайце захаваем гэта.
Ідзі сюды і перазагрузкі.
Гэта даволі пачварна.
А што адбываецца тут з'яўляецца пабочным эфектам.
Я проста выбраў гэта малюнак у выпадковым парадку.
Чаму не зялёны пранікаючы за Мікі?
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Вы маеце рацыю.
Аказваецца, што вобразы, даволі шмат ўсе выявы, якія мы маглі б выкарыстоўваць,
усе rectangles-- прастакутнікаў.
Нават калі Мікі мае некаторыя крывыя да сябе і мае досвед працы,
што фон павінен быць нечым.
Ён павінен быць белым.
Ён павінен быць чорным ці нешта іншае.
Ён можа быць празрыстым.
І на самай справе, я мог бы адкрыць Мікі Маўс тут
у праграме пад назвай Photoshop ці нешта падобнае
і змяніць усе, што белы фон празрыстым,
так што зялёны будзе прасвечваць.
Але гэта тое, што я павінен быў бы спытаць сябе або графічнага мастака
або дызайнер на мой кампаніі, напрыклад,
рабіць, тым больш, што я проста запазычаў гэта адзін з Інтэрнэту.
Але вось чаму гэта адбываецца.
>> Так што яшчэ мы маглі б зрабіць?
Ну, мы маглі б сказаць, што мы Вельмі спадзяюся, вам спадабаецца ваша знаходжанне.
І для акцэнту, я хачу каб зрабіць гэты моцны,
і таму я буду гаварыць з адкрытым моцным і зачыніць моцным, а затым перазагрузіць.
І гэта трохі цяжка каб убачыць на праектары
але, магчыма, на самай справе ў цяперашні час выскоквае ў вас трохі больш.
Такім чынам, вы можаце дадаць курсіў у гэтым шлях, паўтлусты абліцавальны такім чынам.
Мы маглі б змяніць колеру.
На самай справе, як раз для пінкоў, я ісці наперад і рабіць гэта.
Я не вельмі падабаецца, як мой абзацы гэта блізка адзін да аднаго,
так што я мог бы зрабіць нешта накшталт гэтага.
Я збіраюся паведаміць браўзэру, змяніць кожны тэг параграфа, каб мець,
давайце say-- на самай справе, вы ведаеце, што, давайце выраўноўваць яго выраўноўвання тэксту, цэнтр.
І зноў жа, я ведаю, што гэта толькі таму што хто-то навучыў мяне
ці я паглядзеў яго ў онлайн-даведнік.
Такім чынам, дазвольце мне захаваць гэта.
І, ах, цяпер я у цэнтры малюнак там.
І на самай справе, вы ведаеце, што, калі Я перанесці малюнак у пункце
tag-- таму трэці абзац, нават калі гэта не тэкст.
Давайце захаваем, што і перазагрузкі.
Цяпер старонка пачынае выглядаць выгляд of-- Я маю на ўвазе, гэта ўсё яшчэ даволі выродлівыя,
але, па меншай меры, гэта выглядае як я правёў дзве хвіліны замест адной хвіліны
што робіць яго.
>> І так, паступова, мы можам зрабіць гэтыя эстэтычныя змены цяпер да старонцы?
Я на самой справе не змяніў дадзеныя ў старонка акрамя дадання словы на самой справе.
Я дадаў метададзеныя, калі вы будзеце.
Эй, браўзэр, зрабіць Слова "на самай справе" тлустым шрыфтам.
Але дадзеныя не моцна.
Гэта метададзеныя.
Дадзеныя "на самай справе."
Так што ў нас яшчэ ёсць некаторыя з тыя ж самыя канцэпцыі, як і раней.
Цяпер, вядома, гэта не ў Інтэрнэце, так што я збіраюся зрабіць адзін апошні крок тут.
>> Я збіраюся паехаць у hello.html і проста вылучыць і скапіяваць гэта.
А цяпер я збіраюся ўдавацца ў Cloud9, які
Я буду хадзіць вас праз усяго хвіліну.
І напэўна вы хутка будзеце, калі ўжо не на экране, як гэта.
І дазвольце мне даць вам хуткі тур што Cloud9 на самай справе.
Такім чынам, яшчэ раз воблака 9 гэта воблака-сэрвіс
што дае і мне ілюзію мець уласную віртуальную машыну
у воблаку, тэхнічна кантэйнер ў воблаку,
што ў нас ёсць поўная адміністрацыйныя прывілеі.
Так што ў тэорыі, ні адзін яшчэ ў свеце ёсць
Доступ да экрана я знаходжуся гледзячы на ​​прама зараз,
за выключэннем хіба што людзей якія кіруюць сайтам,
таму што тэхнічна яны маюць фізічнага доступу і гэтак далей.
>> Дык што ж мы бачым у гэтым асяроддзі?
Я буду выдаляць, таму што гэта крыху малая.
І дазвольце мне было паказаць праз тут на імгненне.
На левай баку мае і вашыя экранам, ёсць файлавы браўзэр злева.
Так блізкія па духу для Mac OS і Windows.
Гэта ўсё з Файлы на маім рахунку.
І па змаўчанні, калі ваш кошт, як у мяне,
вы ўбачыце, або ў бліжэйшы час убачыць HelloWorld.html і readme.md.
За тут справа, гэта дзе мае тэкставыя файлы збіраюцца ісці.
Калі вы калі-небудзь выкарыстоўвалі Microsoft Слова або Блокнот або TextEdit,
гэтае слова маё рэдагаванне файлаў збіраецца ісці.
І тады самы аркан Асаблівасцю гэтага асяроддзя
што мы не будзем сапраўды трэба выкарыстоўваць, тут называецца акно тэрмінала.
Калі вы выкарыстоўвалі DOS ад мінулых гадоў, гэта Linux
або Linux эквівалент DOS.
Гэта тэкст на аснове interface-- адсутнасць пстрычак мышы, не захапляючы.
Усё, што вы можаце зрабіць, гэта набраць каманды, але гэтыя каманды
можа ствараць файлы, перамяшчаць файлы, адкрытыя каталогі, даведнікі, блізкія
рабіць любую колькасць рэчаў.
Але цяпер, мы проста марнаваць наш час тут.
>> І так давайце зробім гэта.
Калі вы ў гэтым серада, якую вы павінны
быць, калі вы стварылі працоўную прастору ўжо, ісці наперад і проста ісці ўверх
Файл, Стварыць на імгненне.
І гэта дасць вам новы Ўкладка прама тут, у цэнтры.
І я просто-- і давайце ісці наперад і рабіць гэта.
Давайце пойдзем далей і цяпер зрабіць файл, захаваць і ісці наперад і назваць яго hello.html,
не варта блытаць з HelloWorld.html, які
прыйшоў з новым бясплатнай ўліковага запісу, які з'яўляецца проста файл ўзору.
Вы ўбачыце, што раптам з'яўляюцца, хутчэй за ўсё, на левым баку,
і ўкладка будзе па-ранейшаму адкрыты.
І дазвольце мне параіць вам цяпер узнавіць гэты файл або некалькі варыянтаў іх.
І калі вы не можаце дастаткова ўбачыць яго на экран, гэта ідэнтычна слайдах
што вы, верагодна, у іншай ўкладцы.
>> Карацей кажучы, зрабіць свой першы вэб-старонкі, захаваць яго, а затым у імгненне,
Я пакажу вам, як вы можа фактычна разглядаць гэта.
Але змяніць прынамсі, адну рэч.
Змена HelloWorld ў што-небудзь з вашага ўласнага выбару,
так што вы перакананыя, што гэта ваша файл, а не той, які я толькі што стварылі.
Добра.
І калі вы не ready-- rush-- калі вы будзеце гатовыя,
ісці наперад і захаваць файл як толькі вы зрабілі гэтыя змены.
І калі вы націснеце Run зашпільваць зверху, гэта
павінен адкрыць новую ўкладку, якая раскажа вы што URL вы можаце наведаць ваш файл на,
але гэта можа заняць час да цытата канец цытаты "запусціць Apache", які
гэтае імя вэб-сервера.
Так што будзьце асцярожныя, каб зрабіць сапраўды што ў файле, у канчатковым рахунку.
Так прама зараз, я буду павялічваць.
Калі я пачну друкаваць адкрытая дужка HTML, апавяшчэнне
гэта заахвоціла мяне скончыць маю думку.
І калі я скончыў сваю думку, гэта аўтаматычна дае мне які зачыняе тэг.
Але чаканне, то я ўдару Калі ласка, увядзіце, а затым рухацца ўнутры там
і не ўнутры галавы і Затым я раблю цела ўнутры.
І гэта крыху дзіўна на першы погляд, таму што гэта робіць працу для Вас,
але разумеюць, што ў канчатковым рахунку гэта эканоміць вам націскаў клавіш.
І на самай справе, вельмі распаўсюджаная асаблівасць асяроддзя праграмавання ў гэтыя дні
як для вэб-распрацоўкі, як гэта і фактычнае праграмаванне,
які мы будзем казаць пра заўтрашні дзень, гэтыя аўтазапаўнення функцыі,
рэчы, якія проста дазваляюць праграміст ці дызайнер
набраць менш націскаў клавіш у зрабіць тое ж самае.
Часам гэта добра, хоць.
Часам гэта проста раздражняе.
І, зноў жа, як толькі вы расшыфраваныя слайд ці некаторыя яго варыянт,
вы можаце націснуць кнопку Run наверсе.
А затым у ніжняй вокны, вы будзеце праінфармаваныя
у якой URL вы можаце наведаць вэб-старонку.
Шахта, да прыкладу, у business-daharvard.c9users.io
і гэтак далей.
Добра, так, хай me-- якія-небудзь пытанні?
Любыя іншыя пытанні аб проста атрымаць гэта працуе, перш чым дадаваць новыя функцыі?
І дазвольце мне прапанаваць, проста каб атрымаць людзі comfortable--
таму што адна справа проста копипаст ўсляпую, што я зрабіў.
Але толькі так, каб людзі лаянку па меншай меры адзін бягучых спраў,
Я збіраюся ўключыць якую-небудзь музыку.
Я збіраюся прапанаваць спіс рэчы, якія вы патэнцыйна можаце дадаць.
І вы можаце, вядома, выкарыстоўваць Google.
А чаму б нам не проста мяркуюць, што вы спрабуеце вырашыць
па меншай меры, адной канкрэтнай праблемы тут.
Так што з пункту гледжання тэгаў, дазвольце мне паўторна выкарыстоўваць гэта тут.
>> На самай справе, дазвольце мне сказаць гэта ў тэкставым выглядзе.
Дапусцім, што сярод тэгаў мы можам выкарыстоўваць тут некаторыя тэгі тут.
Мы бачылі, тэг абзаца.
Цяпер ён збіраецца аўтазапаўнення.
Пункт тэг, якар тэг.
Дапусцім, вы хочаце зрабіць нешта большае,
так што вы маглі б like-- пралёт тэг можа дапамагчы.
Ну, вы, магчыма, спатрэбіцца некаторая дапамогу для гэтага ў імгненне.
Мы ўжо бачылі DIV.
Вы ўбачыце, што ёсць табліца.
Там нешта называецца тр, тд.
Th, тд.
Вярніся да таго, што ў адзін момант.
Што яшчэ можа быць пад рукой?
Там моцны.
Там ва ўпор, ці, дакладней, эм.
There's-- што яшчэ маглі б вы сабе тут?
Што ж, мы будзем прымаць глядзець на гэта разам.
Форма, якую мы ўжо бачылі.
Там у форме.
Там у ўваход і некалькі іншых.
Добра, давайце зробім гэта.
Для таго, каб адказаць на Вікторыі пытанне, дазвольце мне спачатку
проста пераканайцеся, што ўсе ў стане атрымаць сваю працу прывітанне.
Тады дазвольце мне прадставіць пара іншых ідэй.
Тады мы дамо людзі вырашыць некаторыя праблемы самі па сабе.
Тады мы на самай справе вярнуцца да гэтага паняцця формы,
і мы на самай справе паўторна рэалізаваць разам пярэдні канец інтэрфейс,
так бы мовіць, для самой Google.
Мы будзем выкарыстоўваць Google у якасці задняга канца і хай яны робяць цяжкую працу, які шукае,
але мы узнаўляюць пярэдні канец ад Google і формы пошука
што яны маюць на сваёй хатняй старонцы.
І таму мы вернемся да гэтыя тэгі ў імгненне.
>> Так што гэта было тое, што я прапанаваў толькі хвіліну таму.
Мы можам дадаць да стылізацыі старонка ўнутры гэтага стылю тэга,
і мы можам стылізаваць фон колер, выраўноўванне тэксту,
няхай гэта будзе цэнтр або налева або направа.
Але вельмі хутка вы б знайсці або вэб-дызайнер
выявіў бы, што гэта становіцца трохі грувасткім,
таму што вы робіце тое, што называецца змешванне змесціва
з прадстаўленнем іх.
Вы змешвае свае дадзеныя і эстэтыка іх.
І на самай справе, калі вы лічыце, што адбудзецца праз time--
гэта вельмі мала вэб-старонкі, вядома.
Але калі я дадаць змесціва гэтай старонкі і дадаць стыль да гэтай старонцы,
старонка вельмі хутка атрымлівае даўжэй і даўжэй і даўжэй.
І выкажам здагадку, што я хачу маюць другую вэб-старонку,
падзяляе некаторыя з гэтых атрыбутаў.
Выкажам здагадку, што мой другі вэб-старонку для майго site-- таксама, я хачу, каб усё-цэнтр,
і я таксама хачу, каб усе з зялёным фонам.
Я ў значнай ступені прыйдзецца скапіяваць і ўставіць некаторыя з гэтых ліній
ў гэты другі файл, які адчувае сябе выдатна.
Гэта дазволіць вырашыць праблему.
>> Але што, калі я хачу трэцюю старонку або 30-я старонка або старонка 40.?
Цяпер я збіраюся быць капіяванне і прыклейванне шмат паўтаральнага кода
ў некалькіх файлах.
І так выкажам здагадку, што Я вырашыў, ці я сказаў,
эй, мы не выкарыстоўваючы зялёны фон больш.
Мы збіраемся пачаць выкарыстоўваць аранжавы колер.
Што вы павінны змяніць?
Ну, вы павінны змяніць гэты стыль ад зялёнага да аранжавага, колькі месцаў?
Як і 30 або 40 месцаў.
Гэта цяжка.
Гэта схільныя памылак.
Там ёсць шэраг прычын дзе вы не хацелі б, каб заахвоціць
што выгляд болю для сябе.
І так не было б нядрэнна калі мы маглі б узяць тое, што я проста
ставіць паміж гэтымі двума жоўты , Гэтыя тэгі стыль,
фактар ​​яго, і паставіць усе мае стылізацыі ў адзін цэнтральны файл
што ўсе 30 ці 40 з маіх іншых файлаў запазычыць ці неяк спасылацца,
не ў адрозненне ад сетак дыяграмы мы рабілі раней?
>> Так што, калі я іду тут, я збіраецца прапанаваць на самай справе
што мы заменім стыль тэгаў з чымсьці
называецца спасылка тэг, які гэта жахліва, жахліва па імені,
таму што вы не выкарыстоўваеце спасылка тэг, каб стварыць што
мы, людзі, ведаем, як спасылкі на вэб-старонцы.
Для гэтага, вы карыстаецеся якой тэг?
Як стварыць спасылку на вэб-старонцы?
Аўдыторыя: а.
DAVID J. малая: а-, або якар тэг, які пайшоў у Дысней раней.
Спасылка Тэг тут кажа this-- спасылку на файл пад назвай
styles.css, адносіны да якіх будзе, што гэта мая табліца стыляў.
Так што гэта адна з S-х гадоў у CSS-- каскадныя табліцы стыляў.
Стыль sheet-- два S-х гадоў у CSS.
Каскадных табліц стыляў.
Гэта проста азначае, эй, браўзэр, перайдзіце знайсці styles.css на лакальным серверы
і выкарыстоўваць яго ў якасці табліцы стыляў, што азначае ўнутры гэтага файла
будзе ўсё з стылізацый, што мы толькі што зрабілі.
І так, што гэты файл можа выглядаць наступным чынам заключаецца ў наступным.
І я буду проста рабіць гэта хуткі прыклад, таму што нам не патрэбныя
каб атрымаць занадта шмат у пустазеллях тут.
Але калі я скапіяваць гэта, што я прапаную з'яўляецца тое, што праграміст стварае новы файл,
ўставіць у гэтых lines-- whoops-- ўставіць у гэтых радках,
захаваць яго як styles.css, а затым, у іншы файл, выдаліць усе, што
і замяніць яго замест таго, каб з гэтым тэгам спасылкі.
Так што, калі я звяжу HREF = "styles.css", адносіны павінны быць "табліца стыляў"
які зачыняе тэг.
Захавайце яго.
Вярніцеся да майго HelloWorld.
Абнавіць.
>> Літаральна нічога не адбылося.
Гэта добрая рэч, таму што гэта азначае, што на самой справе гэта ўсё працуе.
Для таго, каб даказаць, як шмат, выкажам здагадку, што я раблю памылка друку, і я называю гэта "styles.css"
з капіталам S, які з'яўляецца няправільнымі, а затым перазагрузіць.
Цяпер вы можаце бачыць, што гэта проста не працуе.
Цяпер, чаму?
Што ж, давайце выкарыстоўваць Тэхніка з раней.
Дазвольце мне ісці наперад і, у мой браўзэр, у Chrome, я
збіраецца адкрыць, што спецыяльныя Ўкладка сеткі, як і раней,
і дайце мне перазагрузіць старонку.
Што вы не здзіўлены ўгледзець?
Ці, можа быць, вы здзіўлены, каб убачыць яго.
У любым выпадку, што вы бачыце зараз?
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Гэта не знойдзена.
Чаму ён не знойдзены?
Ну, Styles.css-- капітал S-- не існуе.
Я яго няправільна названы.
Простая памылка друку.
Але я атрымліваю па зразумелых прычынах цяпер 404, так як сервер кажа, эй,
ён не знойдзены.
Літаральна, я не ведаю, дзе гэты файл.
Такім чынам, у выніку, браўзэр паказвае, што яна можа,
неапрацаванае змесціва старонкі, які быў 200, то HTML,
але стылізацыя не можа быць дададзены ў далейшым.
І гэта тое, што маецца на ўвазе пад каскадам.
Вы можаце сартаваць дадаць пасля таго, як, і гэта свайго роду
здрабняе эстэтыка вэб-старонкі.
І вы нават можаце перавызначыць тыя, стылі з яшчэ іншымі файламі табліц стыляў
калі хочаш.
Гэта не знайшоў, хоць, у дадзеным выпадку, таму што, вядома, я яго няправільна названы.
Так што я б выправіць гэта ў першую чаргу.
>> Так што давайце ісці наперад і прапанаваць наступнае.
Давайце ісці наперад і рабіць гэта.
Пачынаючы з, магчыма, ваш файл HelloWorld,
дазвольце мне запрасіць пару прыкметы прапановы.
Так, Вікторыя, вы хацелі зрабіць які-небудзь тэкст больш, ці не так?
Добра, так што мы можам сапраўды зрабіць тэкст больш.
І мы будзем кожны абрываць толькі адна праблема, каб вырашыць.
Зрабіць тэкст больш.
Я не буду турбаваць пісаць пра гэта, калі мы
ёсць тэхналогія кулі прама тут.
Так што некаторыя праблемы.
Такім чынам, мы будзем старацца каб зрабіць тэкст больш.
Добра.
Што б яшчэ хтосьці прапанаваць?
Што яшчэ можа мы хочам зрабіць на вэб-старонцы?
давайце прыдумаць кароткі спіс рэчаў
а затым перадаць у групы, каб зразумець гэта.
>> ГЛЕДАЧЫ: [неразборліва]
>> DAVID J. малая: OK, становішча тэксту на розных баках аркуша?
Добра.
Нешта іншае.
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Гэта.
Такім чынам, GIF проста іншы фармат файла.
Мы проста выкарысталі тое, што, A PNG або JPG, верагодна?
Мы выкарыстоўвалі JPG.
Калі вам цікава, празмернае адказаць на ваша пытанне
з'яўляецца JPG, як правіла, выкарыстоўваецца для фатаграфіі, паколькі яна падтрымлівае
мільёны кветак або 24-бітным колеры.
GIF звычайна выкарыстоўваецца для, як, Інтэрнэт-мемы гэтыя days-- анімацыі,
як аніміраваныя GIF.
Але гэта здараецца выкарыстоўваць меншы колер палітра, толькі 256 магчымых колераў,
але яна падтрымлівае празрыстасці і анімацыі.
І затым ёсць PNG, які падтрымлівае празрыстасць і больш кветак
але не анімацыя.
Так што гэта кампраміс.
Такім чынам, далучэнне GIF, хоць, будзе функцыянальна
эквівалентна даданню PNG або JPG.
Так.
Крыніца малюнка роўны.
Дык нешта іншае.
Давайце прыдумаць нешта, што мы паслалі да Вікторыі, каб зрабіць тут.
>> ГЛЕДАЧЫ: Дадайце кнопкі для формы.
DAVID J. малая: OK.
Так дадаць кнопкі для формы.
І мы зробім гэта разам адзін.
Так што гэта будзе ідэальны Segue адразу пасля гэтага выкліку.
Што-небудзь яшчэ?
Тое, што вы хацелі б зрабіць?
Палатно адчувае сябе вельмі руйнаваўся калі гэта ўсё, што мы можам зрабіць.
ГЛЕДАЧЫ: Зменіце колер тэксту.
DAVID J. малая: Змена чаго?
ГЛЕДАЧЫ: Колер тэксту.
DAVID J. малая: Змяніць колер тэксту.
Добра.
Такім чынам, давайце зробім гэта.
Проста зноў так, каб вы не проста зубрэння, робячы менавіта тое, што я раблю,
Я збіраюся ўключыць музыку на працягу магчыма пяць хвілін тут.
Вы можаце выкарыстоўваць Google.
Вы заўсёды можаце спытаць мяне, і Я шапчу намёк на вуха.
Вы заўсёды можаце паглядзець звыш на чужыя плечы.
Але вырашыць толькі адну з гэтых праблем.
Але мы зробім апошні, фарміруе адзін, калі б мы маглі разам.
Такім чынам, праз пяць хвілін, каб вырашыць любы з гэтых праблем
з дапамогай Google, інтуіцыі, або любы іншыя сродкі даступныя для вас.
>> [МУЗЫКА]
Добра.
Не хвалюйцеся, калі вы хочаце захаваць майстраваць,
але я буду псаваць пару з гэтых адказаў.
Такім чынам, першы сказ ад Вікторыя была зрабіць шрыфт больш.
Такім чынам, ёсць некалькі спосабаў зрабіць гэта.
Я ў цяперашні час адноўлены мой экран такога памеру,
хоць я павелічэнні маштабу штучна толькі, каб бачыць рэчы.
І давайце зробім гэта.
Дазвольце мне ісці наперад і захапіць некаторыя агульныя лацінскі тэкст
толькі таму ў нас ёсць што-тое, каб працаваць з.
Так дайце мне толькі адзін момант.
Я зраблю тры абзаца.
ДОБРА.
Гэта будзе лепшы прыклад.
Так што для цікаўных, у мой hello.html, я проста
ўставілі тры нонсэнс лацінскія пункты
толькі таму ў нас ёсць некаторы тэкст, каб працаваць з.
І мэта Вікторыі было зрабіць некаторыя з тэксту большага.
Так што я мог бы, як і раней, ідуць сюды.
І дазвольце мне зрабіць гэта правільны шлях.
Я буду мець спасылку тэг, які паказвае на файл
называецца "styles.css," адносіны з якіх зноў "табліца стыляў".
А потым я збіраюся выратаваць і адкрыць гэты "styles.css."
>> Так што, як і раней, у мяне ёсць здольнасць у гэтым файле CSS
на самай справе перавызначыць значэнне па змаўчанні эстэтыка вэб-старонкі,
і эстэтыка па змаўчанні, Вядома, даволі сумна.
Гэта свайго роду нармальны памер шрыфта, чорны тэкст, белы фон, і гэтак далей.
Таму выкажам здагадку, я хачу зрабіць ўвесь гэты тэкст больш.
Я мог бы зрабіць некалькі рэчаў.
У маім файле styles.css я можа сказаць, што вы ведаеце, што,
прымяніць наступнае цела маёй старонкі.
Ідзіце наперад і зрабіць памер шрыфта 24 балаў,
які ўяўляе сабой лік, якое я мог бы выкарыстоўваць у Microsoft Word.
Дазвольце мне вярнуцца да маёй сеткі старонка тут і перазагрузкі,
і вы можаце бачыць, што гэта ўжо значна больш.
І мы можам атрымаць крыху розуму, гэтак жа, як мы можам на desktop--
зрабіць гэта 96 балаў.
Абнавіць.
І гэта крыху становіцца грувасткім ў гэтай кропцы.
>> Але я мог бы быць трохі больш дакладным.
Замест прымянення гэтага табліцы стыляў ў цела старонкі,
што яшчэ я мог бы ўжыць яго замест гэтага, што іншыя тэгі, якія маглі б яшчэ
функцыянуюць такім жа чынам?
>> ГЛЕДАЧЫ: р-тэг?
DAVID J. малая: P бірка.
Такім чынам, галава не будзе правільна, так як галава,
вы не можаце на самой справе кантроль эстэтыкі.
Там у тэксце альбо ёсць, альбо няма.
Але р tag-- я магу нырнуць у трохі глыбей, так бы мовіць, у пункце
тэгі.
І хоць ёсць тры, што гэта выдатна, таму што ў CSS,
калі я проста кажу "р", гэта сродкі ўжываюцца наступныя
да любога тэга, які адпавядае гэтым селектар, селектар проста
гэтае імя тэга.
Так што ўсюды, дзе вы бачыце "Р" прымяніць памер шрыфта,
і давайце зробім яго больш разумна again-- 24 пункт.
І вы ведаеце, што, проста для добрай мерай,
давайце зробім колер чырвоны толькі на дадзены момант.
І зараз, калі я перазагрузіць, зараз мы ўбачыць тры выродлівыя пункты.
>> Але цяпер выкажам здагадку, што я накшталт of-- Я хачу, каб першы абзац
выскачыць у карыстальніка.
Я не хачу, каб проста павялічыць памер шрыфта за ўсё.
І таму я на самой справе хачу, каб вызначыць ці адрозненні паміж гэтымі пунктамі.
Так што давайце пазбавіцца ад чырвонага, таму што гэта проста нейкая ліпкім,
і давайце ісці наперад і зрабіць памер шрыфта 12 пунктаў па змаўчанні,
так што мы вярнуліся да нечага крыху больш за разумным.
А зараз я проста хачу, каб павялічыць памер шрыфта першага абзаца.
Я магу зрабіць гэта ў некалькі спосабамі, але адзін з спосабаў гэта
магчыма, самае навучалае на момант, каб зрабіць наступнае.
Дазвольце мне ісці наперад і казаць, што гэта пункт мае унікальны ідэнтыфікатар "ў першую чаргу."
Я мог бы назваць гэта ўсё, што хачу.
Я мог бы назваць гэта "Foo" або любое іншае слова,
але я збіраюся даць яму некаторыя семантычна значнае імя
як "першы".
Гэта унікальны ідэнтыфікатар, ідэнтыфікатар, для майго першага абзаца.
>> Тое, што я зараз магу зрабіць у маёй табліцы стыляў гэта быць трохі больш дакладным.
Замест таго каб сказаць, прымяніць наступнае р тэга,
Я магу сказаць, што following-- прымяняюцца наступныя,
або абярыце, HTML-элемент што мае унікальны ідэнтыфікатар "ў першую чаргу."
Што я хачу, каб прымяніць да яго?
Памер шрыфта 24 пункта.
Так што ў мяне ёсць два селектары ў цяперашні час.
Адзін робіць усё з пункты 12 пунктаў.
Але гэта адно, тым больш, што гаворка ідзе пра second-- гаворка ідзе пра апошнюю ў file--
гэта мае каскадны эфект.
Я толькі што зрабіў усе мае тэгі параграфаў 12-кропка,
але гэта зараз і каскады перавызначаем, што для любых элементаў
на старонцы, любой тэг на старонцы якога унікальны ідэнтыфікатар цытата Unquote "ў першую чаргу."
І хэштэгу ў гэтым кантэксце проста азначае, што "унікальны ідэнтыфікатар".
Я не стаўлю яго ў HTML-файл.
Я, тут, проста сказаць, цытата Unquote "ў першую чаргу."
>> Такім чынам, дазвольце мне перазагрузіць.
А цяпер я бачу, ах, добра.
Я маю на ўвазе, што гэта не так прыгожа, але гэта свайго роду
як з прадмове да кнігі ці нешта падобнае,
дзе першы пункт больш.
Можа быць яшчэ больш дакладным з толькі першыя літары, але, па меншай меры,
Я ажыццяўляў больш кантролю.
Цяпер maybe-- можа быць, я хачу, каб гэта зрабіць часам па якіх-небудзь прычынах,
і таму я не хачу, каб гэта ставяцца да толькі адзін HTML-тэг.
Хутчэй за ўсё, давайце say-- давайце Таксама зрабіце наступнае.
Клас = "імпарт".
У той час як ідэнтыфікатар выкарыстоўваецца для адназначнай вызначыць адну рэч, адзін тэг,
ў вашай вэб-старонцы, клас прызначаецца, каб быць выкарыстаны на любой колькасці элементаў або тэгаў
на вэб-старонцы.
Так што шматразовага выкарыстання.
ID не падлягае паўторнага выкарыстання.
Клас можна выкарыстоўваць паўторна.
>> І вы ведаеце, што, па якіх-небудзь філасофская reasons--
Я не скончыў thought-- Я збіраюся сказаць,
што першы пункт і другі пункт маюць важнае значэнне.
Так што я збіраюся прымяніць клас пад назвай "Важна", што, калі я захаваць файл
і перазагрузкі, не мае функцыянальнае ўздзеянне яшчэ.
Але я дадаў некаторыя метададзеных у файл,
вроде что-то асобнае ад асноўных дадзеных файла,
так што цяпер у маім табліцы стыляў, калі я замест таго, каб сказаць: ".important" - вы ведаеце,
усё, што важна, я збіраецца зрабіць колер шрыфта, red--
ці, дакладней, не колер шрыфта, толькі колер.
Там у няўзгодненасці У CSS, на жаль.
І перазагрузіць.
Зараз звернеце ўвагу на першы два абзаца чырвоныя
але не трэцяга, таму што я толькі ўжываецца клас "важны"
у першых двух з гэтых рэчаў.
>> Такім чынам, у ідэнтыфікатарах, у вас ёсць магчымасць пазначыць вельмі дакладна.
З класаў, у вас ёсць магчымасць шматразовага выкарыстання.
Але ў абодвух выпадках, звярніце ўвагу на свайго роду прынцып добрага дызайну
дзе я факторизовали усе з эстэтыка ў мой файл styles.css.
Так што няма бязладны тут.
Там няма ніякай згадкі аб чырвоным або паўтлусты або абліцавальны памер шрыфта ў гэтым файле.
Хутчэй за ўсё ў мяне ёсць семантычна, па значэнні характарызуецца мае дадзеныя як дадзеныя,
вось некаторыя важныя дадзеныя.
Вось некаторыя больш важныя дадзеныя.
Акрамя таго, тут "Першы" з маіх важных дадзеных.
Так HTML ўсё аб сартаваць пазначаны, у літаральным сэнсе слова, словы
і пункты і канструкцыі ў вашым старонка з гэтымі маленькімі падказкамі, калі вы
будзе, што вы можаце неяк выкарыстоўваць, выкарыстоўваючы
іншыя метады, такія як CSS, такім чынам.
>> Такім чынам, у адказ на пытанне Вікторыі, мы можам зрабіць шрыфт больш такім чынам.
Ёсць так шмат іншых спосабаў, але шрыфт tag-- адкрытая дужка "шрыфт" -
на самай справе некалькі гадоў.
І гэта праблема, тоже с спадзеючыся толькі
на онлайн resources-- яны маюць тэндэнцыю быць састарэлымі.
І на самай справе, што гэта з'яўляецца састарэлым, таму што свет зразумеў,
што значыць "памер шрыфта = 7" азначае?
Гэта не робіць.
І так на працягу многіх гадоў і гэта day-- адна з бакоў
адзначае, у тым, што гэта на самай справе неверагодна балючы да гэтага часу часам
распрацоўка сайтаў для вэб, так як Microsoft
і Google і Mozilla і іншыя часта разыходзяцца ў меркаванні наконт таго, як
інтэрпрэтаваць спецыфікацыю як HTML.
>> Існуе кніга правілаў для HTML, які як правіла, кажа, што азначае, што кожны тэг.
Але часам гэта засталося да меркавання рэалізацыі, у
сваім меркаванні і Google ад Microsoft.
І так што вы будзеце вельмі часта ўбачыць на сайце нешта
выглядае па-іншаму на ПК чым гэта робіць на Mac,
і гэта на самай справе, таму што, у рэшце рэшт,
яны не правяралі яго добра на абедзвюх платформах.
Але гэта таксама таму, што разумна, разумныя людзі не пагодзяцца
і кампаніі будуць не згодныя, і так адна з задач праграмавання
для Інтэрнэту ці праектавання рэчы для Інтэрнэту
піша свой сайт такім чынам, які працуе на кожным вэб-браўзэры.
Але нават гэта неразумна, ці не так?
Ёсць так шмат версій так шмат браўзэраў, што там, у нейкі момант,
Вы таксама павінны зрабіць званок меркаванні і вы павінны вырашыць, як кампанія,
асабліва для электроннай камерцыі стылі сайты, дзе вы
спрабуюць выкарыстоўваць апошнія і самыя вялікія тэхналогіі, каб даць сапраўды добры карыстальнік
вопыт.
Але некаторы адсотак карыстальнікаў можа па-ранейшаму з дапамогай Internet Explorer 6 ці 7
або 8, асабліва ў залежнасці ад краіна, што яны прыходзяць.
>> І таму вельмі часта кансультаваліся нешта
як "статыстыка вэб-браўзэр."
І калі мы пойдзем, мэтай якіх давайце паглядзім Вікіпедыя і паглядзець, як апошнюю дату Гэтая дыяграма
калі ёсць адзін.
Так што тут вы можаце ўбачыць дзе браўзэры на самай справе
з'яўляюцца, у адпаведнасці са снежня 2015 года, у адпаведнасці з урадам ЗША.
Хром на 42% долі рынку, а затым ад IE у асноўным у карпаратыўных наладах
або налады кампутара, вядома ж, вынікаюць Firefox,
затым Safari, Opera, то не зрабіў зрабіць карту тут па нейкай прычыне,
а затым іншыя.
Можа быць, гэта ў іншых.
Але больш праблематычным, чым is-- давайце паглядзім, калі Вікіпедыя таксама мае
версіі браўзэраў version--
>> Давайце вернемся да статыстыкі браўзэра.
IE.
Нават гэтага недастаткова.
Статыстыка браўзэр.
Мая версія.
Гэта не будзе правільным.
Давайце паглядзім версіі.
Дзель браўзэра на рынку.
Давайце паглядзім, калі ўзнікне такая сітуацыя.
ДОБРА.
Зараз гэта становіцца трохі больш карысным.
Дык вось, звярніце ўвагу, што ў нас ёсць усе розныя версіі браўзэраў.
І, Божа мой, калі вы look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45.
Я маю на ўвазе, браўзэры ўсё часцей абнаўляецца, а часам і некаторыя з гэтых змяненняў
маюць важнае значэнне ў З пункту гледжання функцыянальнасці.
І вось у нейкі момант, менеджэры прадуктаў ці інжынеры
трэба зрабіць decision-- вы ведаць, што, толькі 1% ​​ад свету
ўсё яшчэ выкарыстоўвае IE 7.
Чорт з імі.
Мы проста не будзем падтрымліваць гэты браўзэр.
І што гэта значыць ня падтрымліваць?
Гэта можа азначаць, што кнопкі не працуюць на вашай вэб-старонцы,
ці гэта можа азначаць, фарматаванне цалкам адключаны.
Ці вы маглі б зрабіць той жа самы выклік суд
ў мабільных гэтыя дні, дзе мы не збіраецца падтрымліваць IOS 5 больш.
Такім чынам, людзі проста павінны абнавіць.
Ці мы не збіраемся падтрымліваць Cupcake на АС Android для прылад Android,
таму як world-- як цёк свет хоча рухацца наперад,
яна як бы хоча перацягнуць свет з ім так, каб яны гэтага не робяць
павінны па-ранейшаму зваротную сумяшчальнасць, каб яны
можа прапанаваць новыя і добрыя характарыстыкі.
Гэта сапраўды адна з прычын, чаму так шмат кампаній выкатваюць
аўтаматычныя абнаўлення і свайго роду прымус апошнія версіі праграмнага забеспячэння на нас.
І нават кампаніі як Apple, будзе свайго роду
прымусіць вас амаль ці прымусіць вы з пункту гледжання рынкавых сіл
каб купіць новы тэлефон, таму што яны проста ня будзе абнаўляць свой стары тэлефон больш.
Такім чынам, вы прапусціце на апошнія і самыя вялікія магчымасці,
таму што гэта дорага іх як кампаніі падтрымліваць старыя, магчыма,
ніжэйшыя версіі праграмнага забеспячэння.
Але чысты эфект з'яўляецца тое, што мы таксама пакутуюць гэтым, а таксама.
>> Такім чынам, давайце разгледзім толькі некалькі заключных рэчаў тут.
Давайце скасцілі вельмі хутка некаторыя з тыя і іншыя кулі, калі цікава.
Так што калі вы спрабуеце, напрыклад, становішча
тэкст на розных баках старонкі, я збіраюся зрабіць адзін хуткі шлях,
але ёсць розныя спосабы зрабіць гэта.
Дазвольце мне ісці наперад і eliminate-- спрасціць гэта наступным чынам.
Дазвольце мне вярнуцца да маіх простыя, простыя пункты.
Дазвольце мне вярнуцца да маёй styles.css.
І я проста хачу, каб выкарыстоўваць simple-- які вы маглі б убачыць на Google
ці ўспомніць з earlier-- выраўноўвання тэксту направа.
І перазагрузіць гэтую старонку.
Цяпер усё, здаецца, быць выраўнаваны па правым краі,
як вы можаце ўбачыць на накладныя выдаткі тут.
>> Мы можам зрабіць гэта выглядаць трохі больш як кніга, і мы можам сказаць, "апраўдаць"
і перазагрузкі.
Зараз гэта прыемна і квадрат на абодвух Боку, якая з'яўляецца свайго роду прыемна.
Яшчэ адна мэта, якую мы мелі тут было змяненне колеру тэксту.
Такім чынам, мы ўбачылі, што з маім чырвоным тэкстам.
А цяпер дадаць кнопкі для формы.
Дык чаму б нам не паспрабаваць зрабіць менавіта гэта?
Але спачатку дазвольце мне перайсці на сайт, большасць з нас выкарыстоўваюць кожны day-- Google.
І давайце паглядзім на як Google на самай справе працуе.
Але я збіраюся зрабіць гэта.
Перш за ўсё дазвольце мне гэта зрабіць in-- Ды, дазвольце мне перайсці да Google у першую чаргу.
Я збіраюся прыйдзецца ісці у наладах Google,
таму што я хачу, каб адключыць што называецца імгненныя вынікі.
>> Такім чынам, вы, магчыма, заўважылі Google гэтыя days-- дазвольце мне вярнуцца
і ўключыце гэтую.
Так што калі я пачну шукаць для "котак", як гэта,
заўважыць, што не толькі Я атрымліваю аўтаматычнае запаўненне уверх
зверху, раптам, сама старонка здаецца, змяняецца даволі хутка, а таксама,
і гэта Google, выкарыстоўваючы мову называецца JavaScript спрабуе быць карысным.
Але, на жаль, гэта свайго роду з блытае наша абмеркаванне
пра тое, што на самой справе адбываецца пад капотам тут.
Так што я проста выгляд хутка выключыць імгненныя вынікі.
І я збіраюся націснуць кнопку Захаваць.
А цяпер я збіраюся адкрыць што дыягнастычная панэль інструментаў, што я
трымаць адкрыццё на ўкладцы Network.
Дык давайце зробім гэта.
Хай me-- whoops-- пракруціць гэта крыху ўніз.
І дазвольце мне шукаць "котак".
>> А цяпер notice-- на самай справе, гэта добрая магчымасць
абмеркаваць на імгненне.
Звярніце ўвагу на момант, калі я type-- спыніць яго.
Хопіць.
ДОБРА.
Звярніце ўвагу на той момант, я друкую ліст C, глядзіце ў ніжняй частцы экрана.
A- T- S. Што робіць дно гэтага экрана, мая ўкладка Сетка,
мяркуюць, што адбываецца кожны раз ўвесці літару?
На жаль, жаба вельмі адцягваючым увагу сёння або канюшына
або тое, што ён ёсць.
Тое, што адбываецца кожны раз, калі я надрукаваў?
І дазвольце мне ачысціць буфера і ўвядзіце яго яшчэ раз.
So-- воклічы.
Кожны раз, калі я друкую ліст, C- A- T-- таму новая радок, відавочна, працягвае з'яўляцца.
Што кожны з гэтых радкоў ўяўляюць сабой, заснаваныя на тым, што мы бачылі і абмяркоўвалі
да гэтага часу?
ГЛЕДАЧЫ: Пошук?
DAVID J. малая: пошук, або у больш агульным плане, запыт HTTP
ад майго браўзэра да сервера.
Ну, чаму мой браўзэр робячы HTTP запытваць кожны раз, калі я друкую ліст?
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Так, гэта дае мне гэтыя аўтазапаўнення вынікі.
Маўляў, дзе робяць гэтыя Вынікі пошуку прыйшлі?
Ну, кожны раз, калі я тыпу ліст, Google пасылае больш
і ўсё больш і больш слова я друкую.
Чаму?
Таму што яны хочуць, каб даць мне лепш і лепш, лепш прапанову,
спіс прапаноў, для таго, што слова Я спрабую на самай справе завершана.
Так што гэта сказаць літаральна кожны сімвал, які вы ўводзіце ў Google
накіроўваецца, у канчатковым рахунку, у навалам, але часам адзін
у той час, у мэтах рэалізацыі гэтыя аўтаматычнага завяршэння, калі
дадзеныя, вядома, у Інтэрнэце.
>> Зараз давайце зірнем на тое, што на самой справе адбываецца, калі я націскаю Google Search.
І тады мы будзем выкарыстоўваць гэта самі.
Так што калі я пракруціць ўніз зараз да вельмі Першы запыт, што толькі што адбылося.
Звярніце ўвагу на наступнае.
Ён быў адпраўлены ў даволі доўга URL-- https://www.google.com/search?
а затым цэлая куча рэчаў.
Давайце паглядзім гэта на самай справе прама зараз у самой ўкладцы браўзэра.
Давайце пазбавіцца ад панэлі інструментаў тут.
Вось старонка вынікаў пошуку.
І да вашага ведама вось URL.
Зараз, вы можаце здагадацца што адбываецца тут, у часткі.
Такім чынам, перш за ўсё, вызначэнне.
Гэта, мабыць, з'яўляецца месцам дзе форма была адпраўлена.
Так што, калі я ўвёў словы "кошкі" і націсніце Enter,
па-відаць, Google паслаў мой ўвод тэксту на гэты URL
што я вылучыў там, слэш пошуку.
Аказваецца, у URL, усё, што адбываецца пасля таго, як знак пытання,
як мы працягваць казаць, пара ключ-значэнне што было надрукавана ў форме, ці нейкім чынам
перададзеную ад браўзэра да сервера.
>> Такім чынам, у любы час ўвесці дадзеныя у форму ў Інтэрнэце
і гэта было адпраўлена, як мы абмяркоўвалі, праз GET,
адзін з гэтых віртуальных канверты, змесціва
з гэтага envelope-- ды, працягвайце атрыманне пудзілы фізічна
у канверт у класе сёння, але тэхналагічна
гэта на самай справе пакласці ў URL.
Так што на самой справе, дазвольце мне просеять праз гэта.
Дзе вы бачыце ўвод дадзеных карыстальнікам?
Дзе вы бачыце што-то што я сам надрукаваў тут?
Так, так што "кошкі".
Дакладна?
Такім чынам, дазвольце мне адагнаць гэта у чым-то прасцей.
Я збіраюся выдаліць усе аб гэты URL, што я не разумею,
і я проста хачу, каб пакінуць гэта, як this-- / пошук? Q = кошкі.
Мы будзем бачыць, дзе д прыходзіць ад ў цяперашні час,
але гэта адчувае, як мінімум Колькасць інфармацыі, якую я прадставіў.
А цяпер я ўдару Enter.
І заўважце, гэта ўсё яшчэ працуе.
Мы яшчэ вернемся цэлую кучу котак.
Такім чынам, Google з'яўляецца спрактыкаваней чым гэта ў гэтыя дні.
Гэта 2016, а не 1999.
Так што ёсць іншыя рэчы, што мой Браўзэр пасылае на сервер.
Але гэта мінімальна усё, што трэба.
>> Дык што ж адбываецца?
Ну, перш за ўсё дазвольце мне ісці наперад і ісці вярнуцца да Cloud9 і дазвольце мне ісці наперад
і зачыніць ўкладкі раней.
І я зраблю гэта на маім валодаць толькі на імгненне.
Я збіраюся ісці наперад і стварыць новы файл.
І я збіраюся захаваць яго як google.html.
І я буду вельмі quickly-- Я збіраюся скрасці, на самай справе,
некаторыя з гэтага тэксту, каб зэканоміць час.
Я збіраюся ўставіць гэтую інфармацыю тут.
Я не збіраюся важдацца з любая стылізацыя на гэты раз.
Мы будзем называць гэта "Мой Google."
І я збіраюся пазбавіцца за ўсё ў арганізме.
І я збіраюся зрабіць наступнае.
Дазвольце мне павялічыць.
Форма action-- і, як я коратка згадаў earlier-- whoops-- як я коратка
ужо згадвалася раней, дзеянне А форма, дзе вы адправіць дадзеныя.
Так google.com/search.
І метад, які я хачу выкарыстоўваць можа быць адным з двух рэчаў.
Гэта можа быць альбо "атрымаць", як мы трымаем абмеркавання, ці гэта можа быць "пост".
У цяперашні час, фундаментальная Розніца ў тым, калі вы выкарыстоўваеце "атрымаць"
уся інфармацыя аб тым, што Карыстальнік падае адпраўляецца ў URL.
>> Гэта выдатна падыходзіць для такіх рэчаў, як пошук рухавікі і некалькі іншых прыкладанняў,
але ў якіх абставінах вы не хочаце, каб запоўніць форму
і інфармацыя ў канчатковым вынікі URL, як у адраснай радку браўзэра?
Якія формы робяць you--
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Так, як і што?
ГЛЕДАЧЫ: Паролі.
DAVID J. малая: Так, так што вы увайсці ў Facebook або на нейкім сайце.
Гэта карыстацкі ўвод з форма, тэкставае поле,
але вы, верагодна, не хочуць яго паказ у URL браўзэра.
Чаму?
Я маю на ўвазе, можа быць, ёсць некаторыя наступствы для бяспекі ў сеткі,
але more-- падабаецца, прасцей кажучы, што, калі Ваш сусед па пакоі, іншымі значнымі,
вашыя дзеці, ваш муж выглядае праз гісторыю браўзэра?
Існуе ваш пароль прама там у гісторыі вашага браўзэра.
Гэта не адчувае, як добры дызайн.
Ці яшчэ больш тэхнічна, Выкажам здагадку, вы спрабуеце
каб загрузіць фатаграфію на Flickr або Facebook або wherever--
то ёсць карыстацкі ўвод, нягледзячы на ​​тое, гэта крыху больш, як interesting--
я ўціснуць малюнак у радку URL?
Вы, здаецца, як бы не можа.
Вы можаце выгляд.
Але, на самой справе, я з цяжкасцю націскаецца ўявіць, што рабіць.
Так што мне патрэбен іншы метад загрузкі фатаграфій на сайт,
і што іншы метад называецца "пост".
Але цяпер, мы проста гаворым пра "Атрымаць", які з'яўляецца больш простым з двух.
Гэта проста ставіць усё ўводныя карыстальнікам у URL.
>> Дык вось форма я ствараю.
Я хачу, каб ўваход.
І вы ведаеце, што?
Я збіраюся зрабіць здагадку тут.
Я буду ўзгадваць мой ўваход "д" для "запыту."
І я думаю, што гэта адзін з арыгінальны дызайн, магчыма, з 1999 года.
І тады тып гэтага ўваходу толькі збіраецца быць "тэкст".
І тады я буду мець іншы ўваход што ня трэба імя, як мы будзем у бліжэйшы час
см, тып якога з'яўляецца "адправіць".
І гэта будзе дайце мне спецыяльную кнопку.
І гэта ўсё.
>> Такім чынам, дазвольце мне ісці наперад і захаваць гэты файл.
Я збіраюся вярнуцца да маіх браўзэр і перайсці да google.html.
Enter.
І гэта свайго роду рэдкія каб не сказаць больш.
Але дазвольце мне ісці наперад і пошук "котак".
І заўважце, я ў цяперашні час па гэтым адрасе Cloud9.
Але ў той момант я націскаю на гэта, дзе вы спадзяюся, што ў канчатковым выніку?
>> ГЛЕДАЧЫ: Google.
>> DAVID J. малая: Google.
Так што давайце націсніце кнопку Адправіць.
І сапраўды я паўторна рэалізаваны Google.
Дакладна?
Гэта прасцей.
Гэта лягчэй.
Я маю на ўвазе, мой код відавочна лепш, чым іх, з беспарадак, які мы бачылі раней.
І вы ведаеце, што?
Я збіраюся заправіць гэта ўверх няшмат.
Я не згадаў пра гэта раней.
Ёсць тэгі, як H1, для Heading 1, самы важны загаловак на старонцы.
"Мой Google," Я буду называць гэта.
Дазвольце мне перазагрузіць.
Гэта выглядае крыху лепей ужо.
І, на самай справе, вы ведаеце, што?
У мяне already-- я схлусіў.
Я сказаў, што не збіраўся стыль гэта, але я збіраюся стыль гэта, як і раней.
І маё цела будзе, скажам, выраўноўвання тэксту цэнтр.
Ён больш падобны Google ужо.
>> Мне патрэбен перапынак лініі, хоць, для гэтага кнопку Адправіць.
І атрымліваецца, вы можна выкарыстоўваць пункты,
ці вы можаце больш літаральна проста сказаць, дайце мне разрыў радкі here-- ИФИК тэг.
І калі я перазарадзіць гэта, цяпер ён ідзе туды.
Гэта крыху непрыгожа, таму я можа зрабіць некалькі парываў радкоў,
але давайце не будзем занадта прагнымі тут.
Такім чынам, цяпер давайце паглядзім, ці працуе ён для "сабак".
Гэта падобна на працу для "сабак", а таксама.
Дык што ж тут пераканаўчым навынос?
Одно-- ня быў велізарны скок ўвесці некалькі тэгаў,
як тэг формы ць ўваходным тэгу.
Але больш фундаментальна гэта ўсё, што мы робім
задзейнічае наша разуменне з HTTP і той факт,
што ў канчатковым выніку змяніць формы што ў URL браўзэра,
і так, таму, мы можам механічна забяспечваюць увод на сервер
зрабіўшы форму HTML і ведаючы, што сервер разумее HTTP,
гэтак жа, як наша цела разумее, як, падтрасаючы маю руку, той жа пратакол,
і такім чынам мы атрымліваем назад адказ што мы ў канчатковым рахунку чакаць.
>> Дык давайце паспрабуем зрабіць адзін Апошняе, што зараз з мабільнага,
і я буду make-- я дадам гэты код на слайдах.
Так што калі вы хочаце павазіцца, вы безумоўна, можа ўзяць яго адтуль.
Але я збіраюся ісці наперад і зрабіць адну рэч.
Я збіраюся ісці наперад і адкрыць свой індэкс page--
мая старонка прывітанне, як і раней, што мае шмат гэтай ілжэ-лацінскі тэкст,
або бессэнсоўнымі лацінскі тэкст, і has-- гэта выглядае на гэтым памер шрыфта.
Але дазвольце мне ісці наперад і рабіць гэта.
Я збіраюся пайсці ў Cloud9.
І вы не павінны зрабіць гэты крок.
Я проста зраблю гэта сам.
Я збіраюся націснуць Share.
І гэта асаблівасць проста з Cloud9, у выніку чаго
Я магу зрабіць маё асяроддзе грамадскасці.
>> І толькі дзеля дэманстрацыя, зробім гэта.
Я збіраюся зрабіць маю заяву грамадскасці.
Звярніце ўвагу на тое, што гэта мне папярэджанне, я Я ўпэўнены, што я хачу зрабіць гэта,
таму што гэта збіраецца зрабіць усё у свеце, ці з'яўляюцца яны зараз тут
ці глядзець відэа пазней на Інтэрнэт у стане ўбачыць, што я бачу.
Але гэта нармальна.
Я збіраюся сказаць: "Зроблена".
І дазвольце мне параіць вам, калі б я зрабіў гэта correctly-- дазвольце мне праверыць яго ў першую чаргу.
Ідзіце наперад, калі вы не mind-- у браўзэры на кампутары,
перайсці да гэтага URL, і мы спадзяемся, вы ўбачыце мой лацінскі тэкст.
І ясна, што гэта працуе не на маім ноўтбуку.
Гэта ў воблаку.
Гэта на Cloud9, у літаральным сэнсе, але Я зрабіў маё працоўнае прастору грамадскасці
так што кожны ў Інтэрнэце можа атрымаць доступ да свайго лацінскую хатнюю старонку.
>> Перайсці да таго ж URL на ваш тэлефон, калі вы маглі б.
Калі гэта будзе каштаваць вам, хоць, вы можа проста глядзець праз плячо.
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Я шкадую?
ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Толькі лацінскія словы.
Гэта ўсе.
Але гэта тое, што вы павінны ўбачыць.
>> ГЛЕДАЧЫ: Так.
DAVID J. малая: Так.
Так.
ДОБРА.
Так што я магу затрымаць ваш тэлефон на імгненне?
Так што, спадзяюся, калі вы звяртаецеся ён, яна павінна выглядаць амаль нечытэльным.
Гэта still-- я маю на ўвазе, гэта нечытэльным з-латыні.
Але гэта таксама нечытэльныя па якой іншай прычыне?
Як і тое, што не даспадобы вы пра гэта?
АЎДЫТОРЫЯ: Гэта маленькі.
DAVID J. малая: Гэта супер, супер маленькі.
Такім чынам, як мы маглі б гэта выправіць?
Гэта супер, супер малы па тэлефоне Вікторыі
і, калі вы выцягнуў гэта да сябе, верагодна,
не маленькі на вашым тэлефоне, а таксама, калі вы Уключаныя налады даступнасці.
Што гэта?
Можна проста заціснуць і зум, які з'яўляецца працаздольным,
але тады вы бачыце толькі некалькі слоў адначасова.
Так, пачакайце хвіліну.
Я ведаю, як гэта выправіць.
Дакладна?
Я мог бы выкарыстаць CSS, і я мог бы змяніць памер шрыфта з 12 пунктаў да 24 пункты.
Але пабочны эфект, які, вядома, будзе цяпер,
на працоўным стале або ноўтбук, Цяпер тэкст у два разы больш.
І таму было б збольшага быць добрым адрозніваць паміж прыладамі,
і аказваецца там спосабы зрабіць гэта.
ёсць некалькі розныя спосабы, у самай справе,
пры гэтым з дапамогай CSS і спрактыкаваней функцыі што мы не будзем удавацца ў вельмі падрабязна,
вы можаце па сутнасці запыту браўзэр і сказаць,
калі ваш экран менш, чым гэта шмат пікселяў, выкарыстоўвайце гэты памер шрыфта.
Калі ваш экран больш, чым гэта шмат пікселяў, выкарыстоўвайце гэты іншы памер шрыфта.
>> Вы можаце быць яшчэ спрактыкаваней да гэтага часу.
Калі вы калі-небудзь наведаў вэб-старонка, якая, на працоўным стале,
мае вялікае меню, можа быць выключаны на бок, а затым усё змесціва
знаходзіцца ў баку, што menu-- гэта свайго роду агульнай парадыгмы.
Меню на левай, змест на правай, так і наадварот.
Ці ёсць на самой справе не працуе на мабільным тэлефоне, калі ваш экран толькі гэта шмат пікселяў у шырыню.
Так што часцей сустракаецца на мабільны, Ваша меню будзе раптам атрымаць
павалілася, і вы павінны націсніце кнопку, каб убачыць яго,
або вэб-сайт паставіць меню над ім і паставіць ўтрыманне пад ім.
І вы можаце рэалізаваць гэтыя рэчы ў некалькіх адносінах.
Вы можаце папрасіць сваіх праграмістаў, эй, каманда, у любы час
вы бачыце запыт HTTP ад Android прылада, прылада Microsoft, з Google
прылада, прылада кампаніі Apple, выкарыстоўваць гэтую функцыю памер шрыфта і выкарыстоўваць гэты макет меню,
ці ж выкарыстоўваць гэтую функцыю па змаўчанні большага памеру макета.
>> Цяпер, выкарыстоўваючы тое, што фундаментальная тэхніка сёння
маглі б выкарыстоўваць інжынеры ведаць, ці з'яўляецца гэта
iPhone, АНДРОІД тэлефон, ноўтбук, настольнае наведвання сервера кампаніі?
У чым жа яны атрымліваюць гэтую інфармацыю?
>> ГЛЕДАЧЫ: Загаловак?
>> DAVID J. малая: Так, загаловак HTTP.
Такім чынам, кожны запыт HTTP зыходзячы з іх кліентаў да сервераў
ўключаюць у сябе, у тым, што віртуальная канверт, цэлы букет
з HTTP загалоўкаў, адзін з якіх з'яўляецца браўзэр і аперацыйная сістэма
нават, калі вы клапоціцеся што ўзровень дэталізацыі.
Цяпер, гэта загадкавае які выглядае радок, але існуе праграмнае забеспячэнне, якое будзе проста
спрасціць гэта, і вы можаце проста спытаць у праграмаванні code-- PHP, Java, C ++,
whatever--, што тэлефон this-- якая прылада знаходзіцца гэты карыстальнік з дапамогай?
І тады вы можаце сказаць, паказаць ім гэта версія сайта, калі гэта тэлефон.
Пакажыце ім гэтую версію сайт, калі гэта ноўтбук або настольны.
Але вам не трэба нават на боку сервера складанасці.
Вы можаце зрабіць нават самыя простыя рэчы.
>> Я збіраюся зрабіць гэта.
Я збіраюся ісці наперад у мая сярод Cloud9,
і я збіраюся дадаць тэг што вы бачылі ў Google раней.
Гэта называецца метатега.
І я ніколі не памятаю гэты, так Я збіраюся транскрыбаваць яго тут.
Мета імя = "вьюпорт", а затым ўтрыманне = "шырыня = шырыня прылады, intital
маштаб = 1 ", і гэта ўсё.
>> Так што гэта магло б таксама быць як чароўны загаворам.
Гэта не ўсё, што зразумела, але гэта мае нешта рабіць з прагляду,
і акно прагляду проста цела Вэб-старонка, прастакутная вобласць, якая
вызначае вялікую частку старонкі.
І гэта проста кажа браўзэр, вы ведаеце, што?
Зрабіце шырыню гэтай старонкі эфектыўна роўнай шырыні прылады.
Іншымі словамі, не мяркуюць, што ў вас ёсць тое неабмежаваную прастору.
Выкажам здагадку, у вас ёсць толькі столькі, колькі прастору як само прылада з'яўляецца вялікім.
І вось цяпер, калі я перазагрузіць гэты ў маім браўзэры, я не бачу ніякіх зменаў.
Але калі б я зрабіў гэта correctly-- і дайце мне крыж мой fingers--, калі вы ўсё
перазагрузіць ваш тэлефон, не так убачыць пераканаўчыя змены?
Так, гэта that--
>> ГЛЕДАЧЫ: [неразборліва]
DAVID J. малая: Так.
ДОБРА.
Так што, магчыма, больш зручным для чытання зараз?
Яшчэ маленькі, каб быць справядлівым, але не настолькі малыя, каб быць некіравальным.
І я, безумоўна, можа перавызначыць далей з дапамогай CSS ці на боку сервера,
але ўсё больш і больш, што вы бачачы, як усё больш і больш магчымасцяў
дадаецца да на баку кліента environments--
JavaScript, як мы абмяркуем заўтра, CSS, і так HTML--
што ўсе гэтыя запыты можа быць зроблена на кліенце
так, каб турбаваць сервер нашмат менш і не
каб ісці ў нагу з, для Напрыклад, пастаянная націск
новай аперацыйнай сістэме версіі, новыя версіі браўзэраў.
Вы можаце проста дазволіць браўзэру спытаеце прылады, наколькі вялікая вы,
а затым зрабіць некалькі лагічна рашэнні, заснаваныя на гэтым.
Але мы ўбачым больш магчымасцяў для лагічных рашэнняў
заўтра ў кантэксце мовы праграмавання.
>> Такім чынам, любыя пытанні, то, на вэб-распрацоўкі?
Сёння не вэб-праграмаванне, за сёе, так як большасць усё, што мы зрабілі
быў вельмі эстэтычна, калі вы будзеце.
Там няма прыняцця рашэнняў у код, які мы напісалі,
і менавіта таму HTML з'яўляецца разметкі мова, а не мова праграмавання.
Але заўтра мы возьмем хуткі погляд, у канчатковым рахунку,
на JavaScript, які з'яўляецца фактычнае праграмаванне
мова, які дазваляе нам зрабіць трохі больш.
>> Ёсць пытанні?
Што ж, дазвольце мне прапанаваць два Магчымасці неабавязковыя для выканання хатніх заданняў.
Адзін з гэтых is-- Cloud9 рахункі не скончыцца.
Вы можаце выкарыстоўваць іх падпраўляць.
Гэта свабодны ўзровень сэрвісу.
Разумеюць, што, калі пры стварэнні ваша працоўная прастора, вы зрабілі гэта публічна,
што азначае, што хто-небудзь на Інтэрнэт можа ўбачыць, што вы друкуеце.
Так што, можа быць, проста разгледзець ня няёмка сябе
калі вы кладзеце свой першы вэб старонка там публічна выпадкова,
але ніхто не збіраецца ведаць, каб шукаць там у любым выпадку.
>> І two-- дазвольце мне кінуць да гэтага URL, а таксама,
асабліва калі вы прыйшлі ў сёння ледзь менш камфортна, чым іншыя,
не ведаючы, што азначае, што ўсе гэтыя рэчы.
Усвядомце, што нашмат больш гэтага відэа, які з'яўляецца адначасова добрым спосабам, каб заснуць
а таксама смяяцца час Паступаючы такім чынам, таксама мае
шмат societally цікава і бяспекі, якія адпавядаюць абмеркавання
у ім ад Джона Олівера, хоць і комік.
>> Але калі няма пытанняў, то што прыводзіць нас да прыёму.
Дык чаму ж я не ўключаем музыку.
Там павінна быць напоі і закускі звонку.
Я рады, каб змяшацца па Пакуль людзі хацелі б,
адказаць на пытанні, яшчэ адзін-на-адзін.
Але, у адваротным выпадку, вы заўсёды можаце каб зняць у любы момант,
і мы ўбачымся заўтра раніцай для трохі больш.
Добра, дзякуй.