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. Малан: Так, змінити колір фону. І зокрема, Колір фону тіла. Але остільки, оскільки Тіло на даний момент є веб 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-- Дa, дозвольте мені перейти до 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, а не одна тисяча дев'ятсот дев'яносто дев'ять. Так що є інші речі, що мій Браузер посилає на сервер. Але це мінімально все, що потрібно. 

Так що ж відбувається? Ну, перш за все дозвольте мені йти вперед і йти повернутися до 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 цікаво і безпеки, відповідні обговорення в ньому від Джона Олівера, хоча і комік. 

Але якщо немає питань, то що призводить нас до прийому. Так чому ж я не включаємо музику. Там повинно бути напої і закуски зовні. Я радий, щоб змішатися з Поки люди хотіли б, відповісти на питання, ще один-на-один. Але, в іншому випадку, ви завжди можете щоб зняти в будь-який момент, і ми побачимося завтра вранці для трохи більше. Добре, спасибі.