1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. Малан: Добре. 3 00:00:01,210 --> 00:00:02,160 Ми повернулись. 4 00:00:02,160 --> 00:00:05,810 Таким чином, мета цієї останньої сесії щоб ввести ще кілька понять 5 00:00:05,810 --> 00:00:09,290 але і дати кожному шанс щоб вид розім'яти пальці 6 00:00:09,290 --> 00:00:11,270 і насправді зробити щось трохи практичний. 7 00:00:11,270 --> 00:00:13,897 Мета полягає в тому, щоб не перетворити всі ми в веб-розробників 8 00:00:13,897 --> 00:00:16,230 будь-якими засобами, але насправді просто щоб дати вам смак деяких 9 00:00:16,230 --> 00:00:21,750 з фундаментальних конструкцій з того, що переходить в веб-програмування та веб-сьогодні 10 00:00:21,750 --> 00:00:23,980 розвиток, тому статична сторона things-- 11 00:00:23,980 --> 00:00:26,660 немає ніякої логіки, ніякого програмування мова, просто статичний контент. 12 00:00:26,660 --> 00:00:29,660 І це дасть нам можливість насправді побачити, що веб-сервер, 13 00:00:29,660 --> 00:00:34,140 Подивіться, що HTML-файл, подивитися, що це HTTP насправді обслуговує до. 14 00:00:34,140 --> 00:00:38,600 Але перш ніж ми заглибимося в, ретроспектива питання про хмарних обчислень 15 00:00:38,600 --> 00:00:43,922 або безпеки, або що-небудь між ними? 16 00:00:43,922 --> 00:00:44,890 >> Немає? 17 00:00:44,890 --> 00:00:47,181 Добре, добре, давайте зробити це, про всяк випадок 18 00:00:47,181 --> 00:00:49,680 процес підписавшись щось займає всього кілька хвилин. 19 00:00:49,680 --> 00:00:51,221 Ми дозволимо це робити в фоновому режимі. 20 00:00:51,221 --> 00:00:56,860 Ідіть вперед, якщо ви могли б, У зв'язку з цим URL here-- c9.io. 21 00:00:56,860 --> 00:01:02,810 Це третя сторона service-- Платформа як сервіс, якщо ви will-- 22 00:01:02,810 --> 00:01:05,190 що збирається запросити Вас підписатися на рахунок, 23 00:01:05,190 --> 00:01:08,650 і він збирається дати кожному з вас рахунок в так званому хмарі 24 00:01:08,650 --> 00:01:11,330 на розвиток інфраструктури когось іншого, компанія під назвою Cloud9. 25 00:01:11,330 --> 00:01:13,350 Але що приємно про в тому, що вони дають вам 26 00:01:13,350 --> 00:01:15,990 апроксимація фактичний розвиток реального світу 27 00:01:15,990 --> 00:01:18,530 охорона навколишнього середовища, хоча і в хмари і в веб-браузері, 28 00:01:18,530 --> 00:01:21,175 і ми будемо використовувати це насправді експериментувати трохи сьогодні. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 А потім йти вперед і просто переміщатися ваш шлях до процесу реєстрації 31 00:01:30,260 --> 00:01:32,630 якщо ви могли б. 32 00:01:32,630 --> 00:01:36,080 Таким чином, ми вирішили використовувати це в класі Я вчу для всіх наших студентів, 33 00:01:36,080 --> 00:01:39,140 як на кампусі і поза тепер, і це замінити те, що історично 34 00:01:39,140 --> 00:01:41,390 в іншому випадку було завантажувати програмне забезпечення. 35 00:01:41,390 --> 00:01:44,620 Так що ви отримати доступ до є одним з цих віртуальних машин, 36 00:01:44,620 --> 00:01:46,460 по суті, що я описав вище. 37 00:01:46,460 --> 00:01:50,260 Так що ця компанія Cloud9 ймовірно рента від третього party-- справді 38 00:01:50,260 --> 00:01:52,760 У цьому випадку, Google-- ціле купа віртуальних машин 39 00:01:52,760 --> 00:01:56,500 що вони якось кришити в ілюзія окремих серверів 40 00:01:56,500 --> 00:01:58,610 що кожен з нас має повний контроль над. 41 00:01:58,610 --> 00:02:01,640 Це не зовсім правильно говорити що вони віртуальні машини, 42 00:02:01,640 --> 00:02:04,550 хоча, тому, що Cloud9 фактично використовує 43 00:02:04,550 --> 00:02:07,570 є кілька більш нова технологія називається контейнеризації. 44 00:02:07,570 --> 00:02:13,150 І дозвольте мені захопити цю картину тут, щоб намалювати цю картину. 45 00:02:13,150 --> 00:02:16,540 >> Контейнер, якщо ви пам'ятаєте картину 46 00:02:16,540 --> 00:02:19,900 від раніше, трохи світліше вага, ніж на віртуальній машині. 47 00:02:19,900 --> 00:02:22,090 Насправді, в той час як в минулому раз, коли ми говорили про там 48 00:02:22,090 --> 00:02:25,170 будучи операційної система і гипервизор 49 00:02:25,170 --> 00:02:28,260 а потім гостьовий операційної системи, гість операційна система, гостьовою операційною 50 00:02:28,260 --> 00:02:30,940 Система, на верхній панелі фізичного обладнання, 51 00:02:30,940 --> 00:02:33,740 різниця з цим новий технології, контейнеризації, 52 00:02:33,740 --> 00:02:37,290 в тому, що всі вони так чи інакше розділяють та ж операційна система. 53 00:02:37,290 --> 00:02:39,970 Але вони як і раніше створюють ілюзія всіх 54 00:02:39,970 --> 00:02:44,590 маючи його або її власний ексклюзивний адміністративні права і файли 55 00:02:44,590 --> 00:02:45,400 на сервері. 56 00:02:45,400 --> 00:02:48,230 Але є менше програмного забезпечення в між вами і апаратними засобами. 57 00:02:48,230 --> 00:02:52,260 Результатом якого є, в теорія, більш високу продуктивність, 58 00:02:52,260 --> 00:02:55,470 тому що ви використовуєте або витрачати менше ресурсів 59 00:02:55,470 --> 00:02:57,360 на цьому так званому шарі віртуалізації. 60 00:02:57,360 --> 00:02:59,420 Отже, це називається контейнеризації за своєю природою 61 00:02:59,420 --> 00:03:02,920 шляхом технології під назвою Docker, який дуже підходить в свої права. 62 00:03:02,920 --> 00:03:05,086 І це те, що Інженери компанії 63 00:03:05,086 --> 00:03:08,610 може частково свого роду почати говорити про незабаром, якщо вони ще не зробили цього, 64 00:03:08,610 --> 00:03:11,590 хоча, звичайно, немає Причина стрибати на будь-яких bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> Так з цим сказав, що ви, напевно, дивіться зараз 66 00:03:15,410 --> 00:03:22,670 являє собою екран, який виглядає трохи як це. 67 00:03:22,670 --> 00:03:23,170 ДОБРЕ. 68 00:03:23,170 --> 00:03:25,260 І просто зателефонувати мені на себе, якщо немає. 69 00:03:25,260 --> 00:03:27,440 І якщо so-- я прийду, якщо немає. 70 00:03:27,440 --> 00:03:30,244 Ідіть вперед і натисніть що великий плюс для створення робочого простору, 71 00:03:30,244 --> 00:03:31,660 і ви побачите екран, як це. 72 00:03:31,660 --> 00:03:35,020 Ви можете зателефонувати в робочий простір назвати все, що ви хочете зараз. 73 00:03:35,020 --> 00:03:38,660 І тільки на самому ділі для простоти, йти і-- добре, деякі з вас 74 00:03:38,660 --> 00:03:39,660 вже є робочі області. 75 00:03:39,660 --> 00:03:47,050 Називайте це як want-- бізнес, Гарвард, четвер, що ви хотіли. 76 00:03:47,050 --> 00:03:48,800 Вам не потрібно опис. 77 00:03:48,800 --> 00:03:52,380 Ви можете залишити його закритим, якщо не вам вже є купа робочих просторів. 78 00:03:52,380 --> 00:03:55,280 Якщо ви змушені зробити це публічно, це нормально для сьогоднішніх цілей. 79 00:03:55,280 --> 00:03:56,750 Тут, також, є одним з Upsells. 80 00:03:56,750 --> 00:03:59,939 Ви отримуєте одне закрите робочий простір за замовчуванням. Але якщо ви хочете більше, 81 00:03:59,939 --> 00:04:00,980 ви повинні платити більше. 82 00:04:00,980 --> 00:04:02,870 В іншому випадку, вони змушують вас щоб зробити Вашу роботу громадськості. 83 00:04:02,870 --> 00:04:05,600 Але це нормально, тому що вони також мета цього на відкритих вихідних спільнот 84 00:04:05,600 --> 00:04:07,700 щоб спонукати людей насправді співпрацювати. 85 00:04:07,700 --> 00:04:10,699 >> І останнє, що дуже важливо, хоча, це, після того, як ви вибираєте ім'я 86 00:04:10,699 --> 00:04:17,140 і після того, як ви вибрали приватні або державні, натисніть HTML5, помаранчевий значок великий 87 00:04:17,140 --> 00:04:22,430 другий ліворуч, та потім натисніть кнопку Створити робочу область. 88 00:04:22,430 --> 00:04:24,580 І це, ймовірно, зайняти хвилину або близько того, 89 00:04:24,580 --> 00:04:26,540 але ви будете тоді мати охорона навколишнього середовища, як тільки ви 90 00:04:26,540 --> 00:04:30,544 зробити це, що виглядає нагадує що у мене є на екрані тут. 91 00:04:30,544 --> 00:04:33,210 Але, знову ж таки, це може зайняти хвилину або більше, щоб отримати цей екран 92 00:04:33,210 --> 00:04:34,770 як тільки ви натиснули Створити робочу область. 93 00:04:34,770 --> 00:04:37,936 Але якраз прапор мене, якщо ви хочете, щоб я щоб поглянути на що-небудь або радити. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Добре. 96 00:04:40,690 --> 00:04:42,390 Так що я збираюся тлі цього зараз. 97 00:04:42,390 --> 00:04:44,260 Зателефонуйте мені більше, якщо ви, здається, є якісь технічні труднощі. 98 00:04:44,260 --> 00:04:46,210 Але, знову ж таки, це може зайняти трохи для того, щоб відкрити. 99 00:04:46,210 --> 00:04:49,570 І давайте йти вперед і говорити про те, що це фактично означає, щоб зробити веб-сторінку, 100 00:04:49,570 --> 00:04:52,780 то, що HTML, і як все це Тепер з'єднує між собою, як ми починаємо 101 00:04:52,780 --> 00:04:54,730 насправді використовувати деякі технології. 102 00:04:54,730 --> 00:04:58,310 Так виходить, що я можу йти на моєму маленькому Mac тут, 103 00:04:58,310 --> 00:05:01,650 відкрити просту програму під назвою TextEdit, або на Windows, я міг 104 00:05:01,650 --> 00:05:04,480 відкрити щось називається Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 І я міг би просто зробити щось як this-- "Привіт, світ". 106 00:05:08,260 --> 00:05:12,020 І тоді я міг би зберегти це як hello.txt Так немає магії там. 107 00:05:12,020 --> 00:05:15,200 Це не має нічого спільного з веб програмування, нічого спільного з HTML. 108 00:05:15,200 --> 00:05:16,790 Просто створити простий текстовий файл. 109 00:05:16,790 --> 00:05:20,600 Але виявляється, що веб сторінка буквально тільки що. 110 00:05:20,600 --> 00:05:24,020 Це простий текстовий файл, що містить текст що ви можете набрати на клавіатурі, 111 00:05:24,020 --> 00:05:30,070 але це, як правило, але не завжди закінчувати не .txt, але .html або .htm. 112 00:05:30,070 --> 00:05:32,050 І ви не просто введіть слова в файлі. 113 00:05:32,050 --> 00:05:35,280 Ви насправді потрібно використовувати речі, які називаються теги або, в більш загальному плані, щось 114 00:05:35,280 --> 00:05:37,190 називається мову розмітки. 115 00:05:37,190 --> 00:05:40,510 >> Так що я збираюся дуже швидко набрати а потім пояснити наступне. 116 00:05:40,510 --> 00:05:42,290 Я буду першим типу це, в якому говориться, 117 00:05:42,290 --> 00:05:45,730 агов, браузер, ось іде веб-сторінки написані на HTML. 118 00:05:45,730 --> 00:05:51,850 І ці дві речі разом кажуть, агов, браузер, наступний дійсно HTML. 119 00:05:51,850 --> 00:05:55,790 Гей, браузер, тут йде голови або верхньої частини моєї сторінки. 120 00:05:55,790 --> 00:05:59,900 Гей, браузер, всередині верхньої частини моя сторінка, покласти назва, яке, "Привіт, 121 00:05:59,900 --> 00:06:01,610 світ ". 122 00:06:01,610 --> 00:06:08,370 Гей, браузер, після того, як глава мого сторінка, ось іде тіло сторінки. 123 00:06:08,370 --> 00:06:12,170 І, агов, браузер, тіло мого сторінка повинна також сказати, "привіт світ". 124 00:06:12,170 --> 00:06:15,500 Так, які характерні деталі тут? 125 00:06:15,500 --> 00:06:17,960 Це те, що в цілому називається документ типу декларації, 126 00:06:17,960 --> 00:06:20,190 і, чесно кажучи, це трохи важко запам'ятати це на перший погляд. 127 00:06:20,190 --> 00:06:21,481 Ви тільки частково скопіювати і вставити його. 128 00:06:21,481 --> 00:06:23,760 Це формальний спосіб сказати, агов, браузер, 129 00:06:23,760 --> 00:06:28,030 Я використовую HTML версії 5, яка вийшов кілька недавно. 130 00:06:28,030 --> 00:06:31,380 Це магічне заклинання, що деякі люди з поганим почуттям дизайну 131 00:06:31,380 --> 00:06:33,640 вирішив поставити на самий верх файлу. 132 00:06:33,640 --> 00:06:35,473 Незважаючи на те, що це трохи аркан, ось і все 133 00:06:35,473 --> 00:06:38,250 це означає: Гей, браузер, тут поставляється з 5-ї версії HTML. 134 00:06:38,250 --> 00:06:41,741 >> Інша частина цього була з нами протягом деякого часу, історично склалося так, 135 00:06:41,741 --> 00:06:44,740 але це було еволюціонує, і це ймовірно, стає трохи простіше. 136 00:06:44,740 --> 00:06:47,320 Зверніть увагу на деякі характеристики про те, що я виділив. 137 00:06:47,320 --> 00:06:49,890 Там в ці речі з кутовими brackets-- лівий кронштейн 138 00:06:49,890 --> 00:06:51,040 і права дужка. 139 00:06:51,040 --> 00:06:52,490 І зверніть увагу на симетрію тут. 140 00:06:52,490 --> 00:06:57,340 І в силу симетрії, я маю на увазі, так само, як я Тобто цей початковий тег тут або відкритий тег 141 00:06:57,340 --> 00:07:01,560 якщо ви будете, тут у мене є закриває тег або кінцевий тег це 142 00:07:01,560 --> 00:07:06,460 відрізняється лише остільки, оскільки він має цей слеш на початку слова 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 І ви можете думати про це як я був випадково 145 00:07:09,360 --> 00:07:12,280 пропонуючи перед тим, агов, браузер, ось деякі HTML. 146 00:07:12,280 --> 00:07:16,060 І, навпаки, агов, браузер, це це для початку і кінця HTML--. 147 00:07:16,060 --> 00:07:18,440 >> У той же час гей, браузер, тут приходить глава моєї сторінки. 148 00:07:18,440 --> 00:07:20,140 Гей, браузер, це все для голови. 149 00:07:20,140 --> 00:07:22,240 Гей, браузер, ось тіло моєї сторінки. 150 00:07:22,240 --> 00:07:24,020 Гей, браузер, це все для тіла. 151 00:07:24,020 --> 00:07:26,940 А всередині що деяка довільний текст на даний момент. 152 00:07:26,940 --> 00:07:30,520 А всередині голови, тим часом, деяка довільна, але позначено, 153 00:07:30,520 --> 00:07:34,410 так би мовити, текст, який говорить, назва моєї сторінки повинні бути "Здрастуй, світ». 154 00:07:34,410 --> 00:07:37,470 Тепер, на даний момент, ви можете Припустимо, що браузери 155 00:07:37,470 --> 00:07:41,762 мають only-- або, вірніше, веб-сторінки мають тільки два parts-- голову і тіло. 156 00:07:41,762 --> 00:07:44,220 І голова, як правило, просто як в рядку меню, матеріал 157 00:07:44,220 --> 00:07:45,510 насправді просто на самому верху. 158 00:07:45,510 --> 00:07:48,910 А тіло кишки сторінки, все в цій великий прямокутник 159 00:07:48,910 --> 00:07:50,239 що заповнює екран. 160 00:07:50,239 --> 00:07:51,780 Так що я збираюся йти вперед і робити це. 161 00:07:51,780 --> 00:07:54,400 Я збираюся йти вперед і натисніть кнопку Зберегти, Файл Зберегти. 162 00:07:54,400 --> 00:07:58,580 І я збираюся зберегти це як hello.html, 163 00:07:58,580 --> 00:08:00,870 і я просто збираюся поклав його на моєму робочому столі. 164 00:08:00,870 --> 00:08:03,520 І я збираюся піти вперед і натисніть кнопку Зберегти. 165 00:08:03,520 --> 00:08:05,806 І notice-- мій Mac в міру кричить на мене. 166 00:08:05,806 --> 00:08:07,180 Ви впевнені, що хочете це зробити? 167 00:08:07,180 --> 00:08:08,710 І я збираюся сказати, так, використовувати HTML. 168 00:08:08,710 --> 00:08:10,400 Я знаю, що краще в цьому випадку. 169 00:08:10,400 --> 00:08:14,686 А тепер я збираюся піти на мій робочий стіл де у мене є цей файл раптово. 170 00:08:14,686 --> 00:08:16,060 І я збираюся двічі клацнути по ньому. 171 00:08:16,060 --> 00:08:18,268 І ви помітите, що, за замовчуванням, Chrome відкрив. 172 00:08:18,268 --> 00:08:19,996 Це тому, що це мій браузер за замовчуванням. 173 00:08:19,996 --> 00:08:21,370 І це як раз говорить: "Привіт, світ." 174 00:08:21,370 --> 00:08:23,078 Але він каже: "Привіт, світ "в двох місцях. 175 00:08:23,078 --> 00:08:23,979 Зверніть увагу, в лівому верхньому кутку. 176 00:08:23,979 --> 00:08:25,020 Досить важко пропустити це. 177 00:08:25,020 --> 00:08:26,180 Це великий і сміливий. 178 00:08:26,180 --> 00:08:30,690 А де ще вона здається сказати: "Привіт, світ"? 179 00:08:30,690 --> 00:08:31,470 >> ГЛЯДАЧІ: На вкладці. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. Малан: Так, вкладка сама. 181 00:08:33,100 --> 00:08:35,159 Тому, коли я сказав глава сторінка все вгору top-- 182 00:08:35,159 --> 00:08:36,367 і насправді ця назва. 183 00:08:36,367 --> 00:08:37,710 Це просто на вкладці тут. 184 00:08:37,710 --> 00:08:40,320 І я можу витягнути цю вкладку так, щоб не переплутати. 185 00:08:40,320 --> 00:08:43,360 Це тільки одна вкладка в даний час, і насправді ми бачимо, "Привіт, світ" 186 00:08:43,360 --> 00:08:45,970 тут і "Привіт, світ" тут. 187 00:08:45,970 --> 00:08:47,160 Так що досить просто. 188 00:08:47,160 --> 00:08:49,050 Але це також досить просто. 189 00:08:49,050 --> 00:08:50,440 І, насправді, я збільшенні масштабу. 190 00:08:50,440 --> 00:08:53,272 Я можу змінити розмір шрифту просто щоб збільшити для доступності. 191 00:08:53,272 --> 00:08:56,830 Але давайте тепер зробити щось трохи цікавішим. 192 00:08:56,830 --> 00:08:59,760 >> Я збираюся go-- вигуки, нехай мені повернутися в мій текстовий файл. 193 00:08:59,760 --> 00:09:02,400 Я повертаюся до мого текстовий файл, і я збираюся 194 00:09:02,400 --> 00:09:06,320 щоб змінити це і сказати "Привіт, Світ Діснея". 195 00:09:06,320 --> 00:09:07,970 Зберегти. 196 00:09:07,970 --> 00:09:10,919 І повернутися до моїх браузера та натисніть Оновити. 197 00:09:10,919 --> 00:09:12,710 І тепер, звичайно, каже: "Світ Діснея". 198 00:09:12,710 --> 00:09:15,500 І я збираюся штучно збільшити в просто так легше бачити. 199 00:09:15,500 --> 00:09:19,012 Так що тепер, на жаль, я як би хочу насправді, метою яких, це функція Mac. 200 00:09:19,012 --> 00:09:21,720 Я хочу, щоб натиснути на Disney World і піти куди-небудь, як disney.com, 201 00:09:21,720 --> 00:09:23,290 але це не працює. 202 00:09:23,290 --> 00:09:26,850 Таким чином, основним принципом в Інтернеті є гіперпосилань, посилання, які йдуть в іншому місці. 203 00:09:26,850 --> 00:09:28,390 Так як же я можу це зробити? 204 00:09:28,390 --> 00:09:34,690 Ну, я міг би просто сказати, "Привіт, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Зберегти. 206 00:09:36,110 --> 00:09:37,620 Оновити. 207 00:09:37,620 --> 00:09:39,400 Але це теж не клікабельні. 208 00:09:39,400 --> 00:09:42,930 І що тут добре, незважаючи на те, це не функціональна ще, 209 00:09:42,930 --> 00:09:45,930 є те, що здається, що браузер робить буквально тільки 210 00:09:45,930 --> 00:09:46,950 то, що я говорю це зробити. 211 00:09:46,950 --> 00:09:50,110 Так що, якщо я просто введіть URL, як це, це просто буде показати мені URL. 212 00:09:50,110 --> 00:09:54,270 Мені потрібно використовувати теги або розмітки мова насправді сказати 213 00:09:54,270 --> 00:09:55,621 браузер, щоб зробити ще більше. 214 00:09:55,621 --> 00:09:57,870 Так що я збираюся йти вперед і видалити це на мить. 215 00:09:57,870 --> 00:10:00,980 І я збираюся сказати, агов, браузер, почніть якір тут, 216 00:10:00,980 --> 00:10:02,650 посилання, так би мовити. 217 00:10:02,650 --> 00:10:07,500 А гіпер-посилання, призначення цього якоря, повинен бути цей URL. 218 00:10:07,500 --> 00:10:08,750 І зауважте, мої цитати. 219 00:10:08,750 --> 00:10:11,590 Я міг би використовувати одиничні лапки, теж, але ви повинні бути послідовними, 220 00:10:11,590 --> 00:10:14,270 і я б взагалі просто використовувати подвійні лапки, щоб зберегти його простим. 221 00:10:14,270 --> 00:10:16,820 Зверніть увагу, що я збираюся закрити тег. 222 00:10:16,820 --> 00:10:21,160 І тоді тут я йду сказати, "Світ Діснея". 223 00:10:21,160 --> 00:10:26,890 А тепер мені потрібно трохи symmetry-- відкрита дужка, / а, закрита дужка. 224 00:10:26,890 --> 00:10:28,090 >> Так що ж я представив? 225 00:10:28,090 --> 00:10:30,100 У нас було кілька тегів вже. 226 00:10:30,100 --> 00:10:32,410 HTML, керівник, Назва, Тіло, все мітки, так би мовити, 227 00:10:32,410 --> 00:10:34,280 з відкритими і закритими колегами. 228 00:10:34,280 --> 00:10:36,530 Але зауважте, що це свого роду принципово відрізняється. 229 00:10:36,530 --> 00:10:39,140 Це те, що ми будемо називати в HTML атрибут. 230 00:10:39,140 --> 00:10:41,451 І атрибут є просто ключ-значення пари. 231 00:10:41,451 --> 00:10:43,950 Це звичайна справа в science-- комп'ютера ключ-значення пари. 232 00:10:43,950 --> 00:10:45,770 Це свого роду інструмент торгівлі. 233 00:10:45,770 --> 00:10:47,040 Ключ і значення. 234 00:10:47,040 --> 00:10:49,390 Слово, а потім деякі інше слово або слова. 235 00:10:49,390 --> 00:10:53,790 І в цьому випадку, ключ HREF, і значення в тому, що повний URL. 236 00:10:53,790 --> 00:10:57,890 А що атрибут робить його впливає на поведінку тега. 237 00:10:57,890 --> 00:11:01,010 І в цьому випадку, ми повинні впливати поведінку тега прив'язки, 238 00:11:01,010 --> 00:11:04,140 тому що нам потрібно, щоб закріпити посилання де-небудь. 239 00:11:04,140 --> 00:11:06,960 А як ви робите це шляхом атрибута. 240 00:11:06,960 --> 00:11:08,970 >> Так що я збираюся йти вперед і збережіть файл зараз. 241 00:11:08,970 --> 00:11:11,300 Поверніться в браузері і перезавантажити. 242 00:11:11,300 --> 00:11:14,580 І, вуаля, ми тепер маємо Початок законного веб-сторінки. 243 00:11:14,580 --> 00:11:18,420 Супер-простий, але якщо я наведіть курсор миші на this-- повідомлення в лівому нижньому кутку, 244 00:11:18,420 --> 00:11:19,830 це супер-маленький. 245 00:11:19,830 --> 00:11:21,730 Але ви бачите www.disney.com. 246 00:11:21,730 --> 00:11:27,076 І якщо я натискаю його, насправді це віники мене до disney.com. 247 00:11:27,076 --> 00:11:29,380 Тепер, цікава річ тут є те, що це не так 248 00:11:29,380 --> 00:11:33,940 best-- найбільш ходовим URL, але це нормально, тому що цей файл не 249 00:11:33,940 --> 00:11:35,360 існують на World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Він існує у вигляді локального файлу в мабуть, мої Користувачі directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 для Джона Harvard-- / робочий стіл. 252 00:11:41,890 --> 00:11:42,634 Але у нього є URL. 253 00:11:42,634 --> 00:11:43,800 Це як раз трапляється бути локальним. 254 00:11:43,800 --> 00:11:47,050 На жаль, ніхто з вас не може відвідати це, тому що якщо ви вводите цей URL, 255 00:11:47,050 --> 00:11:49,980 ви будете розповідати свій браузер, шукає файл з ім'ям hello.html 256 00:11:49,980 --> 00:11:50,772 на жорсткому диску. 257 00:11:50,772 --> 00:11:53,271 І, звичайно ж, якщо ви не слідували уздовж вручну, 258 00:11:53,271 --> 00:11:54,530 це не буде існувати там. 259 00:11:54,530 --> 00:11:55,190 >> Так що це нормально. 260 00:11:55,190 --> 00:11:57,815 Ми як і раніше потрібен спосіб, в кінцевому рахунку, щоб отримати цей файл в Інтернеті, 261 00:11:57,815 --> 00:12:01,180 але давайте дражнити один від одного пару наслідки для безпеки того, що ми просто 262 00:12:01,180 --> 00:12:04,850 побачив і зв'язати його назад до раніше обговорення з цього ранку. 263 00:12:04,850 --> 00:12:08,200 Виявляється, що, якщо браузер буквально робить 264 00:12:08,200 --> 00:12:12,560 що я говорю це робити, і здається, щоб бути так, що якір тег 265 00:12:12,560 --> 00:12:17,380 під впливом вартості цей атрибут називається HREF 266 00:12:17,380 --> 00:12:20,810 але він відображає це текст, це, здавалося б 267 00:12:20,810 --> 00:12:26,520 має на увазі, що я міг би поставити URL в обох місцях, а потім перезавантажити 268 00:12:26,520 --> 00:12:29,100 і тепер побачити URL і перейти до URL. 269 00:12:29,100 --> 00:12:32,680 Зверніть увагу, якщо я наведіть курсор миші на нижньому лівому кутку, Я дійсно збираюся ще disney.com. 270 00:12:32,680 --> 00:12:38,340 >> Так що якщо ви коли-небудь phished-- С-Н-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 з одним з цих фіктивних листів від як PayPal вашого банку, 272 00:12:42,820 --> 00:12:46,470 ви, ймовірно, отримали посилання всередині з електронної пошти, який ви читаєте, що 273 00:12:46,470 --> 00:12:49,970 говорить вам, натисніть тут, щоб піти підтвердити ваш пароль або підтвердити дату свого народження 274 00:12:49,970 --> 00:12:53,840 або соціального чи щось соціально інжиніринг вам розкрити 275 00:12:53,840 --> 00:12:54,920 інформація. 276 00:12:54,920 --> 00:12:57,625 Ну, я міг би прийняти вид Перевага цього, чи не можу я? 277 00:12:57,625 --> 00:13:01,240 Я міг би сказати щось як, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 І замість того, щоб Disney.com, я може йти, як, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Оновити. 280 00:13:12,850 --> 00:13:16,620 І наскільки легко надути, особливо нетехнічних читача 281 00:13:16,620 --> 00:13:20,649 або читання побіжно Читач, ніж клацнути 282 00:13:20,649 --> 00:13:23,940 посилання, як це, що якщо я натисну it-- Я насправді не хочу йти badguy.com. 283 00:13:23,940 --> 00:13:25,398 Я не знаю, що насправді там. 284 00:13:25,398 --> 00:13:30,080 Так paypal.com, зауважте, це що він говорить, що це буде, 285 00:13:30,080 --> 00:13:33,210 але, звичайно, якщо я дивлюся вниз супер-низьким, це трохи розмито, 286 00:13:33,210 --> 00:13:34,230 але він каже badguy.com. 287 00:13:34,230 --> 00:13:38,644 Ось тільки сказати прямо зараз що я йду в неправильному місці. 288 00:13:38,644 --> 00:13:41,560 І коли я вже говорив раніше, що банки насправді не повинні заохочувати або навчати 289 00:13:41,560 --> 00:13:44,510 користувача клацнути посилання, це це лише один із проявів цього. 290 00:13:44,510 --> 00:13:45,430 І це так просто. 291 00:13:45,430 --> 00:13:48,120 Тепер ви противник, якщо Ви робите щось на зразок цього 292 00:13:48,120 --> 00:13:51,000 і намагаються обдурити користувача у відвідуванні вашого сайту. 293 00:13:51,000 --> 00:13:53,320 Але зараз, ми будемо тримати речі гарним і чистим. 294 00:13:53,320 --> 00:13:55,640 Ми будемо йти вперед і тому ці зміни. 295 00:13:55,640 --> 00:13:56,530 Оновити сторінку. 296 00:13:56,530 --> 00:13:57,740 І я повертаюся до disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Давайте подивимося, якщо ми не можемо дражнити це один від одного трохи більше. 298 00:14:00,660 --> 00:14:04,160 Таким чином, "Привіт, Світ Діснея". 299 00:14:04,160 --> 00:14:05,950 Я буду говорити тут. 300 00:14:05,950 --> 00:14:08,220 Може бути, я збираюся зробити деяку кімнату. 301 00:14:08,220 --> 00:14:12,730 "Ми сподіваємося, що вам сподобається ваше перебування!" 302 00:14:12,730 --> 00:14:13,830 Зберегти. 303 00:14:13,830 --> 00:14:15,850 Оновити. 304 00:14:15,850 --> 00:14:19,010 Це не rea--, що ні то, що я мав намір, чи не так? 305 00:14:19,010 --> 00:14:21,870 Я маю на увазі, якщо я обробляти мій текст файл як текстовий процесор, 306 00:14:21,870 --> 00:14:24,894 що ви сподіваюся, що станеться тут? 307 00:14:24,894 --> 00:14:27,060 Так, я відчуваю, як там повинен бути перерва лінії тут, 308 00:14:27,060 --> 00:14:28,799 тому він відчуває себе баггі в деякому роді. 309 00:14:28,799 --> 00:14:31,090 Але це насправді навмисним, тому що так само, як і раніше, 310 00:14:31,090 --> 00:14:33,381 браузер буде тільки робити те, що ви скажете їй зробити. 311 00:14:33,381 --> 00:14:34,806 Я не сказав це, щоб розірвати лінії. 312 00:14:34,806 --> 00:14:37,930 Я не сказав йому рухатися вниз, навіть хоча, інтуїтивно, я відчуваю, що я зробив. 313 00:14:37,930 --> 00:14:39,805 Так виходить, нам потрібно трохи більше розмітки, 314 00:14:39,805 --> 00:14:41,390 і я збираюся виправити це в такий спосіб. 315 00:14:41,390 --> 00:14:46,160 Я збираюся випередити цей перший привіт з тим, що називається тег абзацу. 316 00:14:46,160 --> 00:14:48,920 А потім я збираюся йти вперед і обернути це інша пропозиція 317 00:14:48,920 --> 00:14:54,370 в іншому пункті тега, незважаючи на те, вони супер-короткі параграфи. 318 00:14:54,370 --> 00:14:55,930 Тепер я збираюся зберегти. 319 00:14:55,930 --> 00:14:57,160 Оновити. 320 00:14:57,160 --> 00:14:59,070 І тепер у нас є що простір, і ми сортуємо 321 00:14:59,070 --> 00:15:01,680 мають семантику два окремих пункту. 322 00:15:01,680 --> 00:15:05,290 >> Це все добре і добре, але це було б непогано додати зображення на цій сторінці, 323 00:15:05,290 --> 00:15:08,710 так що я збираюся йти шукати Міккі Маус на Google Images. 324 00:15:08,710 --> 00:15:12,830 І просто для задоволення, я збирається захопити цей образ. 325 00:15:12,830 --> 00:15:15,350 Я збираюся йти вперед зараз і захопити URL цього зображення, 326 00:15:15,350 --> 00:15:16,510 хоча є різні способів зробити це. 327 00:15:16,510 --> 00:15:18,520 На даний момент, я просто хочу, щоб скопіювати URL. 328 00:15:18,520 --> 00:15:24,770 Я збираюся повернутися в мій текст файл, і я збираюся тут сказати, 329 00:15:24,770 --> 00:15:31,160 IMG SRC = цитатою Unquote що URL, наддовгих. 330 00:15:31,160 --> 00:15:34,580 І тоді поняття зображення трохи відрізняється. 331 00:15:34,580 --> 00:15:38,640 Там насправді ніякого поняття запуску зображення і закінчуючи зображення, 332 00:15:38,640 --> 00:15:40,630 як початковий тег кінцевий тег. 333 00:15:40,630 --> 00:15:43,840 Так він відчуває себе трохи дивно я семантично, щоб зробити це, 334 00:15:43,840 --> 00:15:45,390 мати тег великим зображення. 335 00:15:45,390 --> 00:15:46,780 Це не так. 336 00:15:46,780 --> 00:15:48,840 Це абсолютно правильно, і це заохочується, 337 00:15:48,840 --> 00:15:50,870 але є скорочений запис. 338 00:15:50,870 --> 00:15:53,780 Я можу вид одночасно відкривати і закривати один і той же тег, 339 00:15:53,780 --> 00:15:55,510 і що зробить браузер щасливим. 340 00:15:55,510 --> 00:15:56,950 Так що це просто трохи більш ємним для речей 341 00:15:56,950 --> 00:15:59,408 що концептуально справді не мають сенс для початку і закінчення. 342 00:15:59,408 --> 00:16:01,190 Вони просто є, або вони не є. 343 00:16:01,190 --> 00:16:06,020 >> Так що я збираюся зберегти це і повернутися до мого "Привіт, світ" сторінки і перезавантаження. 344 00:16:06,020 --> 00:16:09,880 І це трохи з-під контролю, тому що зображення насправді 345 00:16:09,880 --> 00:16:12,210 трохи великий, але це нормально. 346 00:16:12,210 --> 00:16:13,710 Я міг би змінити її розмір в програмі. 347 00:16:13,710 --> 00:16:14,900 Або ви знаєте, що. 348 00:16:14,900 --> 00:16:17,350 Просто щоб показати, що я буде насправді сказати 349 00:16:17,350 --> 00:16:21,760 що ширина цієї речі повинні тільки 200 пікселів, 200 точок. 350 00:16:21,760 --> 00:16:24,360 Дозвольте мені йти вперед і зберегти і перезавантаження, а тепер сторінка 351 00:16:24,360 --> 00:16:25,690 виглядає трохи більш розумним. 352 00:16:25,690 --> 00:16:27,260 Але зверніть увагу на малюнок. 353 00:16:27,260 --> 00:16:30,030 Ну, я начебто вчив вас всіх з HTML в якомусь сенсі, по крайней мере, 354 00:16:30,030 --> 00:16:33,531 концептуально, так як всі HTML це є ці tags-- відкриті мітки, закриті теги, 355 00:16:33,531 --> 00:16:35,280 і атрибути, які змінити свою поведінку. 356 00:16:35,280 --> 00:16:38,380 І, судячи з усього, кожен Тег може мати нуль або один 357 00:16:38,380 --> 00:16:43,005 або два або більше атрибутів, кожен з який робить щось трохи по-іншому. 358 00:16:43,005 --> 00:16:44,380 Тепер, як ви знаєте, що існує? 359 00:16:44,380 --> 00:16:46,800 Ви просто слухати когось як мені сказати вам, що існує, 360 00:16:46,800 --> 00:16:50,860 або ви просто Google навколо підручника на HTML, і це на самому ділі це просто. 361 00:16:50,860 --> 00:16:54,030 >> Справді, коли я був старшокурсник років тому і дізнався, HTML, 362 00:16:54,030 --> 00:16:56,530 один з моїх математики викладання помічники тільки що провели 363 00:16:56,530 --> 00:16:59,600 небагато часу навчаючи мене протягом як півгодини, годину, 364 00:16:59,600 --> 00:17:00,660 а потім я був на моєму шляху. 365 00:17:00,660 --> 00:17:03,300 Я був на моєму шляху до робити найогидніші сайти коли-небудь, 366 00:17:03,300 --> 00:17:05,549 який, мабуть, у мене немає дійсно просунулася далі. 367 00:17:05,549 --> 00:17:09,849 Але справа в тому, що, як тільки ви зрозуміти ці прості ideas-- 368 00:17:09,849 --> 00:17:13,450 якщо аркан text--, але ці прості ідеї запуску думки 369 00:17:13,450 --> 00:17:15,960 і закриття думку, зберігаючи все добре збалансований, 370 00:17:15,960 --> 00:17:19,150 дивлячись то вгору, змінює Поведінка цього тега, це дійсно все 371 00:17:19,150 --> 00:17:20,079 є на нього. 372 00:17:20,079 --> 00:17:28,140 І справді, якщо ми тепер переходимо до щось на зразок google.com-- насправді, 373 00:17:28,140 --> 00:17:31,920 давайте місце трохи більше reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 І я збираюся піти, щоб подивитися, Розробник, View Source. 375 00:17:37,800 --> 00:17:41,400 Це негарно, але notice-- і я буду наближати повідомлення 376 00:17:41,400 --> 00:17:43,432 деякі речі, які знайомі вже. 377 00:17:43,432 --> 00:17:45,140 Там ця тут, який є браузер. 378 00:17:45,140 --> 00:17:46,800 Ось йде HTML5. 379 00:17:46,800 --> 00:17:47,634 Там в HTML. 380 00:17:47,634 --> 00:17:49,550 Мабуть, є атрибутів, що я не зробив 381 00:17:49,550 --> 00:17:51,540 використовувати, що вказує мова сторінки, 382 00:17:51,540 --> 00:17:54,380 і це може допомогти з автоматичним переклад тощо. 383 00:17:54,380 --> 00:17:55,546 Ось глава сторінки. 384 00:17:55,546 --> 00:17:57,790 Ось назва сторінки Стенфорда. 385 00:17:57,790 --> 00:17:59,832 Там в тег я не зробив говорити про yet-- мета-тег. 386 00:17:59,832 --> 00:18:01,540 Це просто вид довідкова інформація. 387 00:18:01,540 --> 00:18:04,210 Це допомагає з SEO, або Пошукова оптимізація, 388 00:18:04,210 --> 00:18:06,320 або результати Google-пошуку або тощо. 389 00:18:06,320 --> 00:18:09,029 Але якщо ми будемо дивитися, тримати дивлячись, ось тег Body. 390 00:18:09,029 --> 00:18:11,570 І є грон інший теги ми не говорили про те ж. 391 00:18:11,570 --> 00:18:13,750 Але Див один для Поділ сторінки. 392 00:18:13,750 --> 00:18:16,680 Це як невидимий прямокутник якщо ви начебто хочете подумки 393 00:18:16,680 --> 00:18:20,160 розділити сторінку на різні підрозділи онлайн. 394 00:18:20,160 --> 00:18:22,650 А потім багато діви я см, то, що називається клас, 395 00:18:22,650 --> 00:18:24,440 але ми повернемося до цього. 396 00:18:24,440 --> 00:18:26,200 >> Це interesting-- форми. 397 00:18:26,200 --> 00:18:27,730 Форми по всій мережі. 398 00:18:27,730 --> 00:18:30,310 Будь вікно пошуку ви коли-небудь використовували це форма. 399 00:18:30,310 --> 00:18:31,490 І, тому, давайте насправді побачити. 400 00:18:31,490 --> 00:18:32,790 Форма. 401 00:18:32,790 --> 00:18:33,910 Дія. 402 00:18:33,910 --> 00:18:37,660 Дія цієї форми, з яких-небудь історичні причини, в тому, що URL. 403 00:18:37,660 --> 00:18:38,840 Метод "пост". 404 00:18:38,840 --> 00:18:44,060 Виявляється, що HTTP-запити можуть використовувати дієслово "отримати", як ми бачили раніше, 405 00:18:44,060 --> 00:18:45,070 або "пост". 406 00:18:45,070 --> 00:18:47,030 І побачите різницю це в один момент. 407 00:18:47,030 --> 00:18:48,363 Давайте подивимося, що насправді це. 408 00:18:48,363 --> 00:18:49,830 Дозвольте мені повернутися на сторінку Стенфорда. 409 00:18:49,830 --> 00:18:53,330 Яку форму вони говорять о, як ви думаєте? 410 00:18:53,330 --> 00:18:54,485 Що вискакує в Вас? 411 00:18:54,485 --> 00:18:54,970 >> ГЛЯДАЧІ: Вікно пошуку. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. Малан: Так. 413 00:18:55,845 --> 00:18:58,410 Так вгору в верхньому правому куті ось це вікно пошуку. 414 00:18:58,410 --> 00:19:02,441 І ось як вони реалізували it-- тег, який в буквальному сенсі форма відкрита дужка. 415 00:19:02,441 --> 00:19:03,940 А потім давайте шукати щось. 416 00:19:03,940 --> 00:19:09,220 Давайте шукати напарника з mine-- "Нік Parlante." 417 00:19:09,220 --> 00:19:11,380 Enter. 418 00:19:11,380 --> 00:19:13,750 І, звичайно ж, він пішов трохи інший URL. 419 00:19:13,750 --> 00:19:15,140 Дозвольте мені повернутися сюди. 420 00:19:15,140 --> 00:19:18,960 Давайте шукати "курси". 421 00:19:18,960 --> 00:19:19,460 Блін. 422 00:19:19,460 --> 00:19:20,484 Пішов до іншого URL. 423 00:19:20,484 --> 00:19:23,400 Отже, Стенфорд, додавши трохи магії що вони не приймають мене до URL 424 00:19:23,400 --> 00:19:25,820 що ми бачили в атрибутів там дії. 425 00:19:25,820 --> 00:19:32,480 Але ця форма тут реалізується чисто шляхом цієї розмітки тут, ці теги. 426 00:19:32,480 --> 00:19:35,710 Насправді, ось вхід для тип пошуку, який ви хочете. 427 00:19:35,710 --> 00:19:38,940 Ось вхід для інший тип пошуку. 428 00:19:38,940 --> 00:19:41,960 Тут вхід для самої рядки. 429 00:19:41,960 --> 00:19:45,394 І тому мета полягає в тому, щоб не обернути наші уми навколо всіх цих тегів 430 00:19:45,394 --> 00:19:46,060 але тільки, щоб бачити. 431 00:19:46,060 --> 00:19:48,300 Це просто відкриття і закриття теги і шукають речі. 432 00:19:48,300 --> 00:19:48,560 Так? 433 00:19:48,560 --> 00:19:48,920 Вікторія? 434 00:19:48,920 --> 00:19:49,795 >> ГЛЯДАЧІ: [нерозбірливо] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. Малан: Це хороше запитання. 437 00:19:53,550 --> 00:19:54,660 Це трохи складніше, щоб побачити. 438 00:19:54,660 --> 00:19:56,300 Дозвольте мені повернутися до того, що питання всього за кілька хвилин 439 00:19:56,300 --> 00:19:59,000 коли ми дивимося на те, що називається CSS або каскадні таблиці стилів листів, 440 00:19:59,000 --> 00:20:02,500 і ми можемо спробувати зробити висновок, як багато від сторінки. 441 00:20:02,500 --> 00:20:08,090 Так що, якщо ми тепер подивимося на google.com, давайте подивимося, що їх сторінка виглядає наступним чином. 442 00:20:08,090 --> 00:20:09,840 Ви б they're-- це мило сьогодні. 443 00:20:09,840 --> 00:20:12,490 444 00:20:12,490 --> 00:20:12,990 ДОБРЕ. 445 00:20:12,990 --> 00:20:13,690 Все зроблено. 446 00:20:13,690 --> 00:20:15,260 Добре, так що View Source. 447 00:20:15,260 --> 00:20:19,590 Можна було б подумати Google має дійсно хороший вихідний код. 448 00:20:19,590 --> 00:20:24,970 Так що, судячи з усього, що тут відбувається? 449 00:20:24,970 --> 00:20:27,880 І справді, це навіть не HTML. 450 00:20:27,880 --> 00:20:30,930 Це те, що називається JavaScript. 451 00:20:30,930 --> 00:20:32,344 І давайте продовжувати йти і йти. 452 00:20:32,344 --> 00:20:34,010 Я навіть не знаю, де починається сторінка. 453 00:20:34,010 --> 00:20:37,240 Я збираюся використовувати команду F, відкрита дужка HTML. 454 00:20:37,240 --> 00:20:38,200 Добре, там. 455 00:20:38,200 --> 00:20:44,150 Я знайшов початок сторінки, і є так багато речей тут. 456 00:20:44,150 --> 00:20:45,310 >> Що насправді відбувається? 457 00:20:45,310 --> 00:20:47,460 Ну, ви знаєте, що, ми можемо очистити це. 458 00:20:47,460 --> 00:20:52,109 Якщо я замість того, щоб піти на це огляд Панель інструментів, це спеціальний діагностичний інструмент, 459 00:20:52,109 --> 00:20:54,150 і йти не в мережі, де ми продовжуємо йти сьогодні, 460 00:20:54,150 --> 00:20:56,420 але якщо я йду до елементів, що дійсно приємно 461 00:20:56,420 --> 00:20:59,990 є те, що браузер має багато набагато краще очі, ніж я. 462 00:20:59,990 --> 00:21:02,670 І браузер може читати що безлад веб-сторінки, 463 00:21:02,670 --> 00:21:04,700 що HTML пошта ми просто дивився, і це може 464 00:21:04,700 --> 00:21:08,340 розібрати його або читати і аналізувати її і переформатувати 465 00:21:08,340 --> 00:21:09,910 в хорошому легкому для читання чином. 466 00:21:09,910 --> 00:21:11,740 Так що я бачу прямо зараз На цьому екрані тут 467 00:21:11,740 --> 00:21:15,470 під елементів, точно такий же зміст, але вони все з відступом, 468 00:21:15,470 --> 00:21:18,140 вони розфарбовані, але це той же самий текст 469 00:21:18,140 --> 00:21:19,620 що я скачав з сервера. 470 00:21:19,620 --> 00:21:23,630 >> І що тепер приємно, що я можу бачити, в організмі, для instance-- повідомлення, 471 00:21:23,630 --> 00:21:26,480 сторінка як і раніше складається просто голова і тіло, 472 00:21:26,480 --> 00:21:28,660 і я можу ієрархічно занурення тут. 473 00:21:28,660 --> 00:21:32,420 Зверніть увагу на те, що Google, здається, щоб divs-- цей і цей. 474 00:21:32,420 --> 00:21:33,310 Я можу розширити це. 475 00:21:33,310 --> 00:21:35,370 Там ціла купа інших діви. 476 00:21:35,370 --> 00:21:36,900 Так що це трохи складним. 477 00:21:36,900 --> 00:21:37,400 Але почекайте. 478 00:21:37,400 --> 00:21:40,970 Це, здається, набагато більше читаним, щодо, ніж це. 479 00:21:40,970 --> 00:21:43,840 Чому Google ніяково Сам просто посилати 480 00:21:43,840 --> 00:21:50,400 цей величезний безлад коду деяких сортувати просто реалізувати щось 481 00:21:50,400 --> 00:21:53,640 який виглядає так просто на перший погляд? 482 00:21:53,640 --> 00:21:55,270 Мовляв, чому вони не додають більше простору? 483 00:21:55,270 --> 00:21:56,811 Чому вони не потрапили Enter, як я зробив? 484 00:21:56,811 --> 00:21:59,110 Подивіться, наскільки добре я був при написанні веб-сторінки. 485 00:21:59,110 --> 00:22:00,680 Я вдарив Enter так старанно. 486 00:22:00,680 --> 00:22:03,760 Я з відступом, тому все це так красиво і читаним. 487 00:22:03,760 --> 00:22:08,463 Чому Google не практикують те ж саме? 488 00:22:08,463 --> 00:22:11,409 >> ГЛЯДАЧІ: [нерозбірливо] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. Малан: Добре. 491 00:22:13,180 --> 00:22:14,270 Дуже справедливо. 492 00:22:14,270 --> 00:22:16,650 Вони не мають якоїсь Людина в Google вручну 493 00:22:16,650 --> 00:22:18,160 оновлення домашньої сторінки більше. 494 00:22:18,160 --> 00:22:20,010 Це не 1999 більше. 495 00:22:20,010 --> 00:22:21,140 Таким чином, у них є програмне забезпечення. 496 00:22:21,140 --> 00:22:25,397 У них є інші інструменти, які генерувати динамічно вони HTML. 497 00:22:25,397 --> 00:22:27,480 Природно, що сам код була написана людьми, 498 00:22:27,480 --> 00:22:30,220 але реальність така, це цілком справедливо сказати, 499 00:22:30,220 --> 00:22:33,340 браузер, звичайно, не все одно, як брудний код. 500 00:22:33,340 --> 00:22:35,940 Але є ще більш переконливі технічні причини 501 00:22:35,940 --> 00:22:42,580 що Google поширює їх HTML код в такий неакуратний, здавалося б, 502 00:22:42,580 --> 00:22:48,350 переважним чином, всі упаковані разом з дуже мало way-- дуже мало 503 00:22:48,350 --> 00:22:51,274 на шляху форматування, як я зробив. 504 00:22:51,274 --> 00:22:52,570 >> ГЛЯДАЧІ: [нерозбірливо] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. Малан: Швидше? 506 00:22:53,528 --> 00:22:54,040 Чому? 507 00:22:54,040 --> 00:22:55,680 І що ви сказали, Лідія? 508 00:22:55,680 --> 00:22:56,240 Швидше? 509 00:22:56,240 --> 00:22:57,281 Чому швидше? 510 00:22:57,281 --> 00:22:58,156 ГЛЯДАЧІ: [нерозбірливо] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. Малан: Там в немає місця для читання. 513 00:23:02,230 --> 00:23:02,730 Так. 514 00:23:02,730 --> 00:23:04,560 Так що думайте про те, що таке простір. 515 00:23:04,560 --> 00:23:08,394 Таким чином, кожен символ на клавіатурі приймає деяка кількість простору для подання, 516 00:23:08,394 --> 00:23:10,560 або фізично, як це займає багато місця, що, 517 00:23:10,560 --> 00:23:13,250 або як-то під капот, який вимагає пам'яті. 518 00:23:13,250 --> 00:23:15,740 І як aside-- і ми говорити більше про це tomorrow-- 519 00:23:15,740 --> 00:23:19,930 кожен символ на клавіатурі як правило, потрібно 8 бітів або один байт. 520 00:23:19,930 --> 00:23:23,360 Таким чином, структура 8 нулів або з них, або тільки 1 байт, як ми 521 00:23:23,360 --> 00:23:24,720 люди, як правило, говорять, буде. 522 00:23:24,720 --> 00:23:27,690 Так що це невеликий, але вона як і раніше не дорівнюють нулю. 523 00:23:27,690 --> 00:23:29,940 Це все ще деяку кількість простору. 524 00:23:29,940 --> 00:23:36,082 Так що, якщо інженер або Google хіти пробіл, тільки один раз, і нехай 525 00:23:36,082 --> 00:23:38,540 Google-- це супер-popular-- Припустимо, що мільярд людей 526 00:23:38,540 --> 00:23:40,780 відвідати їх домашню сторінку в день, або кілька людей, 527 00:23:40,780 --> 00:23:43,290 відвідати домашній сторінці мільярд раз в день, 528 00:23:43,290 --> 00:23:48,890 скільки додаткових байт має те інженер-програміст просто стоїть Google 529 00:23:48,890 --> 00:23:51,310 на один раз потрапивши його або її -пробел-? 530 00:23:51,310 --> 00:23:52,692 >> ГЛЯДАЧІ: [нерозбірливо] 531 00:23:52,692 --> 00:23:54,150 DAVID J. Малан: Не зовсім так погано. 532 00:23:54,150 --> 00:23:57,070 Всього один раз байт мільярд. 533 00:23:57,070 --> 00:23:57,871 так a-- 534 00:23:57,871 --> 00:23:59,120 ГЛЯДАЧІ: 8 мільярдів гігабайт. 535 00:23:59,120 --> 00:24:00,370 DAVID J. Малан: Чи не 8 млрд. 536 00:24:00,370 --> 00:24:01,240 8 мільярдів байт. 537 00:24:01,240 --> 00:24:02,410 Але 1 гігабайт. 538 00:24:02,410 --> 00:24:04,080 1 гігабайт буде одиниця виміру. 539 00:24:04,080 --> 00:24:08,240 Якщо він або вона робить два місця, 2 гігабайти. 540 00:24:08,240 --> 00:24:09,030 Три гігабайти. 541 00:24:09,030 --> 00:24:09,530 Чи не так? 542 00:24:09,530 --> 00:24:11,860 Це ваги дорого. 543 00:24:11,860 --> 00:24:16,150 І тому в таких випадках, як Google, який, як належне, на крайній випадок, 544 00:24:16,150 --> 00:24:21,450 Є й інші проблеми, які виникають тільки роблячи дуже розумні рішення 545 00:24:21,450 --> 00:24:25,744 або приймати дуже прості людські дії, так як він має цей Magnified ефект. 546 00:24:25,744 --> 00:24:27,660 Таким чином, однією з причин це виглядає так стислий 547 00:24:27,660 --> 00:24:30,660 саме так, як Вікторія said-- це було просто генерується за допомогою комп'ютерів в будь-якому випадку. 548 00:24:30,660 --> 00:24:31,900 Так що немає нічого особливого. 549 00:24:31,900 --> 00:24:33,309 Нехай браузер зрозуміти це. 550 00:24:33,309 --> 00:24:35,350 Але це також навмисно не має багато місця, 551 00:24:35,350 --> 00:24:36,766 тому що простір не є необхідним. 552 00:24:36,766 --> 00:24:38,250 А простір насправді коштує грошей. 553 00:24:38,250 --> 00:24:40,670 >> Це або витрати часу, бо якраз натиснути 554 00:24:40,670 --> 00:24:44,670 що набагато більше даних з Штаб-квартира Google.com просто 555 00:24:44,670 --> 00:24:47,710 отримав зайняти кілька час, навіть якщо це мілісекунди 556 00:24:47,710 --> 00:24:51,190 або мікросекунди, але це додає над такою кількістю користувачів, або, швидше за все, 557 00:24:51,190 --> 00:24:52,270 це, ймовірно, коштує грошей. 558 00:24:52,270 --> 00:24:54,690 Google, ймовірно, підключається до хтось ще в світі, один 559 00:24:54,690 --> 00:24:56,398 з тих, вдивляючись точки, і якщо у них є 560 00:24:56,398 --> 00:24:59,880 свого роду фінансових відносин в результаті чого їх дані коштує грошей, 561 00:24:59,880 --> 00:25:01,730 вони могли б також звести до мінімуму, скільки даних 562 00:25:01,730 --> 00:25:04,530 вони впливів на їх підключення до Інтернету. 563 00:25:04,530 --> 00:25:07,630 >> Так що найсмішніше, хоча, в кінцевому рахунку, або, може бути обнадійливим річ, 564 00:25:07,630 --> 00:25:11,030 в тому, що не дивлячись на те, що це виглядає жахливо переважна, врешті-решт, 565 00:25:11,030 --> 00:25:16,750 це все ще ті ж самі принципи, як це дуже проста сторінка тут з HTML 566 00:25:16,750 --> 00:25:17,390 стр. 567 00:25:17,390 --> 00:25:20,610 Так що просто узагальнити і так, що ви мають канонічну версію, якщо ви не були 568 00:25:20,610 --> 00:25:25,900 слідуючи уздовж по вибору тут, тут може бути найпростіший веб-сторінок, 569 00:25:25,900 --> 00:25:28,240 так щось, щоб грати с, можливо, пізніше. 570 00:25:28,240 --> 00:25:30,790 >> Що ж, давайте ввести пара інших ідей в даний час. 571 00:25:30,790 --> 00:25:33,420 Ми збираємося ввести то, що називається тег стилю. 572 00:25:33,420 --> 00:25:38,110 Ми можемо стилізувати цю сторінку в більш цікавих способів. 573 00:25:38,110 --> 00:25:40,860 Так в той час як HTML електронної пошти все про розмітку 574 00:25:40,860 --> 00:25:44,470 дані, свого роду вказівки до браузер, як структура даних, 575 00:25:44,470 --> 00:25:48,110 де поставити його, CSS, або Каскадні таблиці стилів, 576 00:25:48,110 --> 00:25:52,640 є другою мовою, який як правило, отримує змішуватися з HTML 577 00:25:52,640 --> 00:25:55,670 як ми будемо see-- але ми можемо очистити що до в moment--, який приймає 578 00:25:55,670 --> 00:25:59,850 це кінцева милі, і він стилізує його. 579 00:25:59,850 --> 00:26:02,460 Він отримує кольору тільки право, шрифт розміром якраз, 580 00:26:02,460 --> 00:26:03,860 позиціонування раз. 581 00:26:03,860 --> 00:26:06,510 Це все про естетику або форматування, а не про 582 00:26:06,510 --> 00:26:08,330 сама по собі фундаментальні дані. 583 00:26:08,330 --> 00:26:11,390 І найпростіший спосіб, щоб показати це можливо, наприклад. 584 00:26:11,390 --> 00:26:15,320 Так що я збираюся перейти на мій простий текстовий файл. 585 00:26:15,320 --> 00:26:17,970 І в ту мить, я буду ходити з нами через процес 586 00:26:17,970 --> 00:26:19,360 робити це самі. 587 00:26:19,360 --> 00:26:23,310 >> Я збираюся повернутися в мій файл тут і перезавантажте сторінку просто 588 00:26:23,310 --> 00:26:25,800 щоб підтвердити, що він виглядає. 589 00:26:25,800 --> 00:26:27,190 Ось де ми знаходимося в даний час. 590 00:26:27,190 --> 00:26:31,170 Я відчуваю, що діти будуть користуватися маючи деякий колір до цієї веб-сторінці. 591 00:26:31,170 --> 00:26:34,480 Так що я збираюся йти тут в голові сторінки. 592 00:26:34,480 --> 00:26:38,130 І я збираюся зробити стиль, стиль /. 593 00:26:38,130 --> 00:26:44,060 А потім всередині цього, я збираюся сказати тіло моєї page-- 594 00:26:44,060 --> 00:26:46,870 і це форматування, при перший погляд, можливо, трохи 595 00:26:46,870 --> 00:26:49,400 дивно, але звичайний. 596 00:26:49,400 --> 00:26:55,010 Я хочу сказати, що на тлі Колір цієї сторінки повинен бути зеленим. 597 00:26:55,010 --> 00:26:57,960 І це, на жаль, вигляд не найкращий дизайн. 598 00:26:57,960 --> 00:27:00,710 Зверніть увагу на те, що раніше в світі HTML, 599 00:27:00,710 --> 00:27:03,190 Я сказав, що атрибути ці пари ключ-значення. 600 00:27:03,190 --> 00:27:05,760 Дещо дорівнює цитати Unquote "щось." 601 00:27:05,760 --> 00:27:08,810 У світі CSS, який був розроблені деякими різними людьми, 602 00:27:08,810 --> 00:27:11,020 вони вирішили, що, в свою світ, пар ключ-значення 603 00:27:11,020 --> 00:27:13,920 було б слово щось двокрапка. 604 00:27:13,920 --> 00:27:15,220 Так що це та ж сама ідея, хоча. 605 00:27:15,220 --> 00:27:18,620 Це асоціювання значення з деякими ключ, який якимось чином 606 00:27:18,620 --> 00:27:20,330 впливає на поведінку цієї сторінки. 607 00:27:20,330 --> 00:27:21,901 >> І ви, напевно, здогадалися. 608 00:27:21,901 --> 00:27:24,150 Що ж це, ймовірно, буде робити, навіть якщо ви ніколи не 609 00:27:24,150 --> 00:27:27,867 бачив HTML або CSS раніше? 610 00:27:27,867 --> 00:27:29,450 ГЛЯДАЧІ: Зміна кольору фону. 611 00:27:29,450 --> 00:27:30,560 DAVID J. Малан: Так, змінити колір фону. 612 00:27:30,560 --> 00:27:33,280 І зокрема, Колір фону тіла. 613 00:27:33,280 --> 00:27:36,290 Але остільки, оскільки Тіло на даний момент є веб 614 00:27:36,290 --> 00:27:38,870 page-- це єдине нижче рядки заголовка really-- 615 00:27:38,870 --> 00:27:40,870 це, ймовірно, буде впливають на те ж саме. 616 00:27:40,870 --> 00:27:41,430 Отже, давайте подивимося. 617 00:27:41,430 --> 00:27:42,490 Давайте збережемо це. 618 00:27:42,490 --> 00:27:44,310 Іди сюди і перезавантаження. 619 00:27:44,310 --> 00:27:46,140 Це досить потворно. 620 00:27:46,140 --> 00:27:48,070 А що відбувається тут є побічним ефектом. 621 00:27:48,070 --> 00:27:49,850 Я просто вибрав це зображення у випадковому порядку. 622 00:27:49,850 --> 00:27:53,305 Чому не зелений проникаючи за Міккі? 623 00:27:53,305 --> 00:27:54,180 ГЛЯДАЧІ: [нерозбірливо] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. Малан: Абсолютно вірно. 626 00:27:57,880 --> 00:28:01,750 Виявляється, що образи, досить багато все зображення, які ми могли б використовувати, 627 00:28:01,750 --> 00:28:03,670 все rectangles-- прямокутників. 628 00:28:03,670 --> 00:28:07,710 Навіть якщо Міккі має деякі криві до себе і має досвід роботи, 629 00:28:07,710 --> 00:28:09,330 що фон повинен бути чимось. 630 00:28:09,330 --> 00:28:10,280 Він повинен бути білим. 631 00:28:10,280 --> 00:28:11,910 Він повинен бути чорним або щось інше. 632 00:28:11,910 --> 00:28:13,650 Він може бути прозорим. 633 00:28:13,650 --> 00:28:16,100 І справді, я міг би відкрити Міккі Маус тут 634 00:28:16,100 --> 00:28:18,590 в програмі під назвою Photoshop або щось подібне 635 00:28:18,590 --> 00:28:21,176 і змінити все, що білий фон прозорим, 636 00:28:21,176 --> 00:28:22,550 так що зелений буде просвічувати. 637 00:28:22,550 --> 00:28:25,980 Але це те, що я мав би запитати себе чи графічного художника 638 00:28:25,980 --> 00:28:28,130 або дизайнер на мій компанії, наприклад, 639 00:28:28,130 --> 00:28:31,490 робити, тим більше, що я просто запозичив це один з Інтернету. 640 00:28:31,490 --> 00:28:33,030 Але ось чому це відбувається. 641 00:28:33,030 --> 00:28:34,980 >> Так що ще ми могли б зробити? 642 00:28:34,980 --> 00:28:41,040 Ну, ми могли б сказати, що ми Дуже сподіваюся, вам сподобається ваше перебування. 643 00:28:41,040 --> 00:28:44,150 І для акценту, я хочу щоб зробити цей сильний, 644 00:28:44,150 --> 00:28:48,310 і тому я буду говорити з відкритим сильним і закрити сильним, а потім перезавантажити. 645 00:28:48,310 --> 00:28:50,320 І це трохи важко щоб побачити на проекторі 646 00:28:50,320 --> 00:28:53,250 але, можливо, насправді в даний час вискакує у вас трохи більше. 647 00:28:53,250 --> 00:28:56,180 Таким чином, ви можете додати курсив в цьому шлях, напівжирний облицювальний таким чином. 648 00:28:56,180 --> 00:28:57,500 Ми могли б змінити кольори. 649 00:28:57,500 --> 00:29:01,610 Насправді, якраз для стусанів, я йти вперед і робити це. 650 00:29:01,610 --> 00:29:05,120 Я не дуже подобається, як мій абзаци це близько один до одного, 651 00:29:05,120 --> 00:29:06,870 так що я міг би зробити щось на зразок цього. 652 00:29:06,870 --> 00:29:13,310 Я збираюся повідомити браузеру, змінити кожен тег параграфа, щоб мати, 653 00:29:13,310 --> 00:29:16,952 давайте say-- насправді, ви знаєте, що, давайте вирівнювати його вирівнювання тексту, центр. 654 00:29:16,952 --> 00:29:19,410 І знову ж таки, я знаю, що це тільки тому що хтось навчив мене 655 00:29:19,410 --> 00:29:21,118 або я подивився його в онлайн-довідник. 656 00:29:21,118 --> 00:29:22,450 Отже, дозвольте мені зберегти це. 657 00:29:22,450 --> 00:29:25,070 І, ах, тепер я в центрі зображення там. 658 00:29:25,070 --> 00:29:28,490 І насправді, ви знаєте, що, якщо Я перенести зображення в пункті 659 00:29:28,490 --> 00:29:34,510 tag-- тому третій абзац, навіть якщо це не текст. 660 00:29:34,510 --> 00:29:36,917 Давайте збережемо, що і перезавантаження. 661 00:29:36,917 --> 00:29:40,000 Тепер сторінка починає виглядати вид of-- Я маю на увазі, це все ще досить потворні, 662 00:29:40,000 --> 00:29:43,180 але, по крайней мере, це виглядає як я провів дві хвилини замість однієї хвилини 663 00:29:43,180 --> 00:29:43,950 що робить його. 664 00:29:43,950 --> 00:29:47,200 >> І так, поступово, ми можемо зробити ці естетичні зміни тепер на сторінку? 665 00:29:47,200 --> 00:29:50,860 Я насправді не змінив дані в сторінка крім додавання слова насправді. 666 00:29:50,860 --> 00:29:52,650 Я додав метадані, якщо ви будете. 667 00:29:52,650 --> 00:29:54,830 Гей, браузер, зробити Слово "насправді" жирним шрифтом. 668 00:29:54,830 --> 00:29:56,940 Але дані не сильно. 669 00:29:56,940 --> 00:29:57,830 Це метадані. 670 00:29:57,830 --> 00:29:59,410 Дані "насправді." 671 00:29:59,410 --> 00:30:02,200 Так що у нас ще є деякі з ті ж самі концепції, як і раніше. 672 00:30:02,200 --> 00:30:05,990 Зараз, звичайно, це не в Інтернеті, так що я збираюся зробити один останній крок тут. 673 00:30:05,990 --> 00:30:10,300 >> Я збираюся поїхати в hello.html і просто виділити і скопіювати це. 674 00:30:10,300 --> 00:30:12,285 А тепер я збираюся вдаватися в Cloud9, який 675 00:30:12,285 --> 00:30:13,910 Я буду ходити вас через всього декілька хвилин. 676 00:30:13,910 --> 00:30:17,080 І напевно ви скоро будете, якщо вже не на екрані, як це. 677 00:30:17,080 --> 00:30:21,080 І дозвольте мені дати вам швидкий тур що Cloud9 насправді. 678 00:30:21,080 --> 00:30:26,590 Отже, ще раз хмара 9 це хмара-сервіс 679 00:30:26,590 --> 00:30:30,580 що дає і мені ілюзію мати власну віртуальну машину 680 00:30:30,580 --> 00:30:33,090 в хмарі, технічно контейнер в хмарі, 681 00:30:33,090 --> 00:30:35,160 що у нас є повна адміністративні привілеї. 682 00:30:35,160 --> 00:30:37,130 Так що в теорії, ні один ще в світі є 683 00:30:37,130 --> 00:30:39,152 Доступ до екрану я перебуваю дивлячись на прямо зараз, 684 00:30:39,152 --> 00:30:40,860 за винятком хіба що людей які керують сайтом, 685 00:30:40,860 --> 00:30:43,470 тому що технічно вони мають фізичного доступу і так далі. 686 00:30:43,470 --> 00:30:44,740 >> Так що ж ми бачимо в цьому середовищі? 687 00:30:44,740 --> 00:30:46,230 Я буду видаляти, тому що це трохи мала. 688 00:30:46,230 --> 00:30:48,104 І дозвольте мені вказати через тут на мить. 689 00:30:48,104 --> 00:30:53,210 На лівій стороні мої і ваші екраном, є файловий браузер зліва. 690 00:30:53,210 --> 00:30:55,362 Так близькі по духу для Mac OS і Windows. 691 00:30:55,362 --> 00:30:57,070 Це все з Файли на моєму рахунку. 692 00:30:57,070 --> 00:30:59,250 І за замовчуванням, якщо ваш рахунок, як у мене, 693 00:30:59,250 --> 00:31:05,090 ви побачите, чи найближчим часом побачити HelloWorld.html і readme.md. 694 00:31:05,090 --> 00:31:07,950 За тут справа, це де мої текстові файли збираються йти. 695 00:31:07,950 --> 00:31:11,620 Якщо ви коли-небудь використовували Microsoft Слово або Блокнот або TextEdit, 696 00:31:11,620 --> 00:31:14,100 це слово моє редагування файлів збирається йти. 697 00:31:14,100 --> 00:31:16,540 І тоді самий аркан Особливістю цього середовища 698 00:31:16,540 --> 00:31:20,100 що ми не будемо дійсно потрібно використовувати, тут називається вікно терміналу. 699 00:31:20,100 --> 00:31:23,390 Якщо ви використовували DOS від минулих років, це Linux 700 00:31:23,390 --> 00:31:25,450 або Linux еквівалент DOS. 701 00:31:25,450 --> 00:31:28,190 Це текст на основі interface-- відсутність клацань миші, які не захоплюючи. 702 00:31:28,190 --> 00:31:30,770 Все, що ви можете зробити, це набрати команди, але ці команди 703 00:31:30,770 --> 00:31:34,400 може створювати файли, переміщати файли, відкриті каталоги, довідники, близькі 704 00:31:34,400 --> 00:31:35,740 робити будь-яку кількість речей. 705 00:31:35,740 --> 00:31:38,060 Але зараз, ми просто витрачати наш час тут. 706 00:31:38,060 --> 00:31:39,050 >> І так давайте зробимо це. 707 00:31:39,050 --> 00:31:41,008 Якщо ви в цьому середовище, яке ви повинні 708 00:31:41,008 --> 00:31:45,900 бути, якщо ви створили робочий простір вже, йти вперед і просто йти вгору 709 00:31:45,900 --> 00:31:48,690 Файл, Створити на мить. 710 00:31:48,690 --> 00:31:51,740 І це дасть вам новий Вкладка прямо тут, в центрі. 711 00:31:51,740 --> 00:31:54,250 І я просто-- і давайте йти вперед і робити це. 712 00:31:54,250 --> 00:31:59,910 Давайте підемо далі і тепер зробити файл, зберегти і йти вперед і назвати його hello.html, 713 00:31:59,910 --> 00:32:02,740 не слід плутати з HelloWorld.html, який 714 00:32:02,740 --> 00:32:06,910 прийшов з новим безкоштовний обліковий запис, який є просто файл зразка. 715 00:32:06,910 --> 00:32:11,020 Ви побачите, що раптово з'являються, швидше за все, на лівій стороні, 716 00:32:11,020 --> 00:32:12,810 і вкладка буде як і раніше відкритий. 717 00:32:12,810 --> 00:32:21,300 І дозвольте мені порадити вам зараз відтворити цей файл або кілька варіантів їх. 718 00:32:21,300 --> 00:32:24,607 І якщо ви не можете досить побачити його на екран, це ідентично слайдах 719 00:32:24,607 --> 00:32:26,190 що ви, ймовірно, в іншій вкладці. 720 00:32:26,190 --> 00:32:29,296 >> Коротше кажучи, зробити свій перший веб-сторінки, зберегти його, а потім в мить, 721 00:32:29,296 --> 00:32:31,170 Я покажу вам, як ви може фактично розглядати це. 722 00:32:31,170 --> 00:32:32,970 Але змінити принаймні, одну річ. 723 00:32:32,970 --> 00:32:35,400 Зміна HelloWorld в щось з вашого власного вибору, 724 00:32:35,400 --> 00:32:39,821 так що ви переконані, що це ваша файл, а не той, який я тільки що створили. 725 00:32:39,821 --> 00:32:40,320 Добре. 726 00:32:40,320 --> 00:32:43,804 І коли ви не ready-- rush-- коли ви будете готові, 727 00:32:43,804 --> 00:32:46,220 йти вперед і зберегти файл як тільки ви зробили ці зміни. 728 00:32:46,220 --> 00:32:49,540 І якщо ви натиснете Run застібати зверху, це 729 00:32:49,540 --> 00:32:53,610 повинен відкрити нову вкладку, яка розповість ви що URL ви можете відвідати ваш файл на, 730 00:32:53,610 --> 00:32:56,380 але це може зайняти час до цитата кінець цитати "запустити Apache", який 731 00:32:56,380 --> 00:32:58,820 це ім'я веб-сервера. 732 00:32:58,820 --> 00:33:02,430 Так що будьте обережні, щоб зробити точно що в файлі, в кінцевому рахунку. 733 00:33:02,430 --> 00:33:04,610 Так прямо зараз, я буду збільшувати. 734 00:33:04,610 --> 00:33:07,780 Якщо я почну друкувати відкрита дужка HTML, повідомлення 735 00:33:07,780 --> 00:33:09,650 це спонукало мене закінчити мою думку. 736 00:33:09,650 --> 00:33:13,750 І якщо я закінчив свою думку, це автоматично дає мені закриває тег. 737 00:33:13,750 --> 00:33:17,190 Але очікування, то я вдарю Введіть, а потім рухатися всередині там 738 00:33:17,190 --> 00:33:21,180 і не всередині голови і Потім я роблю тіло всередині. 739 00:33:21,180 --> 00:33:24,430 І це трохи дивно на перший погляд, тому що це робить роботу для Вас, 740 00:33:24,430 --> 00:33:27,110 але розуміють, що в кінцевому рахунку це економить вам натискань клавіш. 741 00:33:27,110 --> 00:33:30,500 І справді, дуже поширена особливість середовища програмування в ці дні 742 00:33:30,500 --> 00:33:33,260 як для веб-розробки, як це і фактичне програмування, 743 00:33:33,260 --> 00:33:36,960 який ми будемо говорити про завтрашній день, ці автозаповнення функції, 744 00:33:36,960 --> 00:33:39,710 речі, які просто дозволяють програміст або дизайнер 745 00:33:39,710 --> 00:33:42,010 набрати менше натискань клавіш в зробити те ж саме. 746 00:33:42,010 --> 00:33:43,176 Іноді це добре, хоча. 747 00:33:43,176 --> 00:33:44,560 Іноді це просто дратує. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 І, знову ж таки, як тільки ви розшифровані слайд або деякі його варіант, 750 00:33:54,010 --> 00:33:57,360 ви можете натиснути кнопку Run нагорі. 751 00:33:57,360 --> 00:33:59,910 А потім в нижній вікна, ви будете проінформовані 752 00:33:59,910 --> 00:34:04,290 в який URL ви можете відвідати веб-сторінку. 753 00:34:04,290 --> 00:34:08,790 Шахта, наприклад, в business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 і так далі. 755 00:34:11,480 --> 00:34:14,580 Добре, так, нехай me-- будь-які питання? 756 00:34:14,580 --> 00:34:19,460 Будь-які інші питання про просто отримати це працює, перш ніж додавати нові функції? 757 00:34:19,460 --> 00:34:21,692 І дозвольте мені запропонувати, просто щоб отримати люди comfortable-- 758 00:34:21,692 --> 00:34:24,400 тому що одна справа просто копіпаст наосліп, що я зробив. 759 00:34:24,400 --> 00:34:27,177 Але тільки так, щоб люди лайка принаймні один поточних справ, 760 00:34:27,177 --> 00:34:28,510 Я збираюся включити якусь музику. 761 00:34:28,510 --> 00:34:32,630 Я збираюся запропонувати список речі, які ви потенційно можете додати. 762 00:34:32,630 --> 00:34:34,086 І ви можете, звичайно, використовувати Google. 763 00:34:34,086 --> 00:34:36,210 А чому б нам не просто припускають, що ви намагаєтеся вирішити 764 00:34:36,210 --> 00:34:38,710 щонайменше, однієї конкретної проблеми тут. 765 00:34:38,710 --> 00:34:45,090 Так що з точки зору тегів, дозвольте мені повторно використовувати це тут. 766 00:34:45,090 --> 00:34:48,280 >> Насправді, дозвольте мені сказати це в текстовому вигляді. 767 00:34:48,280 --> 00:35:02,380 Припустимо, що серед тегів ми можемо використовувати тут деякі теги тут. 768 00:35:02,380 --> 00:35:06,090 Ми бачили, тег абзацу. 769 00:35:06,090 --> 00:35:07,850 Тепер він збирається автозаповнення. 770 00:35:07,850 --> 00:35:12,220 Пункт тег, якір тег. 771 00:35:12,220 --> 00:35:15,250 Припустимо, ви хочете зробити щось більше, 772 00:35:15,250 --> 00:35:19,480 так що ви могли б like-- проліт тег може допомогти. 773 00:35:19,480 --> 00:35:23,010 Ну, ви, можливо, буде потрібно деяка допомога для цього в мить. 774 00:35:23,010 --> 00:35:24,830 Ми вже бачили DIV. 775 00:35:24,830 --> 00:35:26,170 Ви побачите, що є таблиця. 776 00:35:26,170 --> 00:35:27,928 Там щось називається тр, тд. 777 00:35:27,928 --> 00:35:30,736 778 00:35:30,736 --> 00:35:32,860 Th, тд. 779 00:35:32,860 --> 00:35:34,770 Вернись до того, що в один момент. 780 00:35:34,770 --> 00:35:36,590 Що ще може бути під рукою? 781 00:35:36,590 --> 00:35:38,310 Там сильний. 782 00:35:38,310 --> 00:35:43,640 Там в упор, або, вірніше, ем. 783 00:35:43,640 --> 00:35:50,110 There's-- що ще могли б ви собі тут? 784 00:35:50,110 --> 00:35:51,930 Що ж, ми будемо приймати дивитися на це разом. 785 00:35:51,930 --> 00:35:53,230 Форма, яку ми вже бачили. 786 00:35:53,230 --> 00:35:54,130 Там в формі. 787 00:35:54,130 --> 00:35:56,500 Там в вхід і кілька інших. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Добре, давайте зробимо це. 790 00:36:00,090 --> 00:36:02,330 Для того, щоб відповісти на Вікторії питання, дозвольте мені спочатку 791 00:36:02,330 --> 00:36:05,020 просто переконайтеся, що всі в змозі отримати свою роботу привіт. 792 00:36:05,020 --> 00:36:06,900 Тоді дозвольте мені представити пара інших ідей. 793 00:36:06,900 --> 00:36:09,209 Тоді ми дамо люди вирішити деякі проблеми самі по собі. 794 00:36:09,209 --> 00:36:11,500 Тоді ми насправді повернутися до цього поняття форми, 795 00:36:11,500 --> 00:36:14,950 і ми насправді повторно реалізувати разом передній кінець інтерфейс, 796 00:36:14,950 --> 00:36:16,450 так би мовити, для самої Google. 797 00:36:16,450 --> 00:36:19,700 Ми будемо використовувати Google в якості заднього кінця і нехай вони роблять важку роботу, шукає, 798 00:36:19,700 --> 00:36:22,760 але ми відтворюють передній кінець від Google і формі пошуку 799 00:36:22,760 --> 00:36:24,520 що вони мають на своїй домашній сторінці. 800 00:36:24,520 --> 00:36:27,050 І тому ми повернемося до ці теги в мить. 801 00:36:27,050 --> 00:36:30,270 >> Так що це було те, що я запропонував тільки хвилину назад. 802 00:36:30,270 --> 00:36:33,940 Ми можемо додати до стилізації сторінка всередині цього стилю тега, 803 00:36:33,940 --> 00:36:36,950 і ми можемо стилізувати фон колір, вирівнювання тексту, 804 00:36:36,950 --> 00:36:39,000 будь то центр або вліво або вправо. 805 00:36:39,000 --> 00:36:41,630 Але дуже швидко ви б знайти або веб-дизайнер 806 00:36:41,630 --> 00:36:44,060 виявив би, що це стає трохи громіздким, 807 00:36:44,060 --> 00:36:48,330 тому що ви робите те, що називається змішування вмісту 808 00:36:48,330 --> 00:36:50,120 з поданням їх. 809 00:36:50,120 --> 00:36:53,756 Ви змішуєте свої дані і естетика їх. 810 00:36:53,756 --> 00:36:56,380 І справді, якщо ви вважаєте, що станеться через time-- 811 00:36:56,380 --> 00:36:58,350 це дуже мало веб-сторінки, звичайно. 812 00:36:58,350 --> 00:37:01,590 Але якщо я додати вміст цієї сторінки і додати стиль до цієї сторінки, 813 00:37:01,590 --> 00:37:04,650 сторінка дуже швидко отримує довше і довше і довше. 814 00:37:04,650 --> 00:37:07,510 І припустимо, що я хочу мають другу веб-сторінку, 815 00:37:07,510 --> 00:37:09,010 розділяє деякі з цих атрибутів. 816 00:37:09,010 --> 00:37:12,350 Припустимо, що мій другий веб-сторінку для мого site-- також, я хочу, щоб все-центр, 817 00:37:12,350 --> 00:37:14,960 і я також хочу, щоб всі з зеленим фоном. 818 00:37:14,960 --> 00:37:17,940 Я в значній мірі доведеться скопіювати і вставити деякі з цих ліній 819 00:37:17,940 --> 00:37:20,730 в цей другий файл, який відчуває себе прекрасно. 820 00:37:20,730 --> 00:37:22,030 Це дозволить вирішити проблему. 821 00:37:22,030 --> 00:37:26,060 >> Але що, якщо я хочу третю сторінку або 30-я сторінка або сторінка 40-а? 822 00:37:26,060 --> 00:37:28,730 Тепер я збираюся бути копіювання та приклеювання багато повторюваного коду 823 00:37:28,730 --> 00:37:30,430 в декількох файлах. 824 00:37:30,430 --> 00:37:32,600 І так припустимо, що Я вирішив, чи я сказав, 825 00:37:32,600 --> 00:37:34,780 агов, ми не використовуючи зелений фон більше. 826 00:37:34,780 --> 00:37:36,380 Ми збираємося почати використовувати помаранчевий колір. 827 00:37:36,380 --> 00:37:38,690 Що ви повинні змінити? 828 00:37:38,690 --> 00:37:42,900 Ну, ви повинні змінити цей стиль від зеленого до помаранчевого, скільки місць? 829 00:37:42,900 --> 00:37:44,920 Як і 30 або 40 місць. 830 00:37:44,920 --> 00:37:45,900 Це втомлює. 831 00:37:45,900 --> 00:37:47,039 Це схильні до помилок. 832 00:37:47,039 --> 00:37:49,580 Там є ряд причин де ви не хотіли б, щоб спонукати 833 00:37:49,580 --> 00:37:51,840 що вид болю для себе. 834 00:37:51,840 --> 00:37:54,760 І так не було б непогано якщо ми могли б взяти те, що я просто 835 00:37:54,760 --> 00:37:58,240 ставити між цими двома жовтий , Ці теги стиль, 836 00:37:58,240 --> 00:38:04,050 фактор його, і поставити всі мої стилізації в один центральний файл 837 00:38:04,050 --> 00:38:08,470 що всі 30 або 40 з моїх інших файлів запозичити або якось посилатися, 838 00:38:08,470 --> 00:38:11,640 не в відміну від мереж діаграми ми робили раніше? 839 00:38:11,640 --> 00:38:15,030 >> Так що, якщо я йду тут, я збирається запропонувати насправді 840 00:38:15,030 --> 00:38:17,880 що ми замінимо стиль тегів з чимось 841 00:38:17,880 --> 00:38:21,620 називається посилання тег, який це жахливо, жахливо по імені, 842 00:38:21,620 --> 00:38:24,370 тому що ви не використовуєте посилання тег, щоб створити що 843 00:38:24,370 --> 00:38:26,380 ми, люди, знаємо, як посилання на веб-сторінці. 844 00:38:26,380 --> 00:38:29,750 Для цього, ви використовуєте який тег? 845 00:38:29,750 --> 00:38:31,464 Як створити посилання на веб-сторінці? 846 00:38:31,464 --> 00:38:32,130 Аудиторія: а. 847 00:38:32,130 --> 00:38:34,870 DAVID J. Малан: а-, або якір тег, який пішов в Дісней раніше. 848 00:38:34,870 --> 00:38:39,090 Посилання Тег тут говорить this-- посилання на файл під назвою 849 00:38:39,090 --> 00:38:44,350 styles.css, ставлення до яких буде, що це моя таблиця стилів. 850 00:38:44,350 --> 00:38:48,290 Так що це одна з S-х років в CSS-- каскадні таблиці стилів. 851 00:38:48,290 --> 00:38:50,490 Стиль sheet-- два S-х років в CSS. 852 00:38:50,490 --> 00:38:52,550 Каскадних таблиць стилів. 853 00:38:52,550 --> 00:38:58,640 Це просто означає, агов, браузер, перейдіть знайти styles.css на локальному сервері 854 00:38:58,640 --> 00:39:01,870 і використовувати його в якості таблиці стилів, що означає всередині цього файлу 855 00:39:01,870 --> 00:39:05,310 буде все з стилізацій, що ми тільки що зробили. 856 00:39:05,310 --> 00:39:07,396 І так, що цей файл може виглядати наступним чином полягає в наступному. 857 00:39:07,396 --> 00:39:10,020 І я буду просто робити це швидкий приклад, тому що нам не потрібні 858 00:39:10,020 --> 00:39:12,000 щоб отримати занадто багато в бур'янах тут. 859 00:39:12,000 --> 00:39:17,840 Але якщо я скопіювати це, що я пропоную є те, що програміст створює новий файл, 860 00:39:17,840 --> 00:39:24,450 вставити в цих lines-- whoops-- вставити в цих рядках, 861 00:39:24,450 --> 00:39:32,270 зберегти його як styles.css, а потім, в інший файл, видалити всі, що 862 00:39:32,270 --> 00:39:35,450 і замінити його замість того, щоб з цим тегом посилання. 863 00:39:35,450 --> 00:39:43,090 Так що, якщо я зв'яжу HREF = "styles.css", відносини повинні бути "таблиця стилів" 864 00:39:43,090 --> 00:39:44,170 закриває тег. 865 00:39:44,170 --> 00:39:45,250 Збережи це. 866 00:39:45,250 --> 00:39:47,000 Поверніться до мого HelloWorld. 867 00:39:47,000 --> 00:39:48,690 Оновити. 868 00:39:48,690 --> 00:39:51,290 >> Буквально нічого не сталося. 869 00:39:51,290 --> 00:39:54,710 Це хороша річ, тому що це означає, що насправді це все працює. 870 00:39:54,710 --> 00:39:58,860 Для того, щоб довести, як багато, припустимо, що я роблю опечатка, і я називаю це "styles.css" 871 00:39:58,860 --> 00:40:03,080 з капіталом S, який є неправильними, а потім перезавантажити. 872 00:40:03,080 --> 00:40:05,470 Тепер ви можете бачити, що це просто не працює. 873 00:40:05,470 --> 00:40:06,362 Тепер, чому? 874 00:40:06,362 --> 00:40:08,070 Що ж, давайте використовувати Техніка з раніше. 875 00:40:08,070 --> 00:40:10,153 Дозвольте мені йти вперед і, в мій браузер, в Chrome, я 876 00:40:10,153 --> 00:40:12,900 збирається відкрити, що спеціальні Вкладка мережі, як і раніше, 877 00:40:12,900 --> 00:40:15,560 і дайте мені перезавантажити сторінку. 878 00:40:15,560 --> 00:40:19,341 Що ви не здивовані бачити зараз? 879 00:40:19,341 --> 00:40:20,840 Або, може бути, ви здивовані, щоб побачити його. 880 00:40:20,840 --> 00:40:23,225 У будь-якому випадку, що ви бачите зараз? 881 00:40:23,225 --> 00:40:24,100 ГЛЯДАЧІ: [нерозбірливо] 882 00:40:24,100 --> 00:40:24,770 DAVID J. Малан: Це не знайдено. 883 00:40:24,770 --> 00:40:25,680 Чому він не знайдений? 884 00:40:25,680 --> 00:40:28,480 Ну, Styles.css-- капітал S-- не існує. 885 00:40:28,480 --> 00:40:29,230 Я його невірно названі. 886 00:40:29,230 --> 00:40:30,430 Проста помилка. 887 00:40:30,430 --> 00:40:33,816 Але я отримую зі зрозумілих причин зараз 404, так як сервер каже, агов, 888 00:40:33,816 --> 00:40:34,440 він не знайдений. 889 00:40:34,440 --> 00:40:36,300 Буквально, я не знаю, де цей файл. 890 00:40:36,300 --> 00:40:38,880 Таким чином, в результаті, браузер показує, що вона може, 891 00:40:38,880 --> 00:40:42,860 необроблене вміст сторінки, який був 200, то HTML, 892 00:40:42,860 --> 00:40:45,390 але стилізація не може бути додані в подальшому. 893 00:40:45,390 --> 00:40:47,120 І це те, що мається на увазі під каскадом. 894 00:40:47,120 --> 00:40:49,070 Ви можете сортувати додати після того, як, і це свого роду 895 00:40:49,070 --> 00:40:50,874 подрібнює естетика веб-сторінки. 896 00:40:50,874 --> 00:40:53,790 І ви навіть можете перевизначити ті, стилі з ще іншими файлами таблиць стилів 897 00:40:53,790 --> 00:40:54,700 якщо ви хочете. 898 00:40:54,700 --> 00:40:57,780 Це не знайшов, хоча, в даному випадку, тому що, звичайно, я його невірно названі. 899 00:40:57,780 --> 00:41:00,330 Так що я б виправити це в першу чергу. 900 00:41:00,330 --> 00:41:04,667 >> Так що давайте йти вперед і запропонувати наступне. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Давайте йти вперед і робити це. 903 00:41:11,140 --> 00:41:14,220 Починаючи з, можливо, ваш файл HelloWorld, 904 00:41:14,220 --> 00:41:17,740 дозвольте мені запросити пару ознаки пропозиції. 905 00:41:17,740 --> 00:41:20,400 Так, Вікторія, ви хотіли зробити який-небудь текст більше, чи не так? 906 00:41:20,400 --> 00:41:24,555 Добре, так що ми можемо дійсно зробити текст більше. 907 00:41:24,555 --> 00:41:26,860 І ми будемо кожен обривати тільки одна проблема, щоб вирішити. 908 00:41:26,860 --> 00:41:30,867 Зробити текст більше. 909 00:41:30,867 --> 00:41:32,700 Я не буду турбувати писати про це, коли ми 910 00:41:32,700 --> 00:41:35,600 є технологія кулі прямо тут. 911 00:41:35,600 --> 00:41:39,970 Так що деякі проблеми. 912 00:41:39,970 --> 00:41:44,670 Таким чином, ми будемо намагатися щоб зробити текст більше. 913 00:41:44,670 --> 00:41:45,170 Добре. 914 00:41:45,170 --> 00:41:48,360 Що б ще хтось запропонувати? 915 00:41:48,360 --> 00:41:50,332 Що ще може ми хочемо зробити на веб-сторінці? 916 00:41:50,332 --> 00:41:52,040 Давайте придумати короткий список речей 917 00:41:52,040 --> 00:41:55,366 а потім передати в групи, щоб зрозуміти це. 918 00:41:55,366 --> 00:41:56,270 >> ГЛЯДАЧІ: [нерозбірливо] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. Малан: OK, положення тексту на різних сторонах аркуша? 920 00:42:02,251 --> 00:42:02,750 Добре. 921 00:42:02,750 --> 00:42:04,620 Щось ще. 922 00:42:04,620 --> 00:42:05,784 >> ГЛЯДАЧІ: [нерозбірливо] 923 00:42:05,784 --> 00:42:06,700 DAVID J. Малан: Це. 924 00:42:06,700 --> 00:42:08,720 Таким чином, GIF просто інший формат файлу. 925 00:42:08,720 --> 00:42:12,830 Ми просто використовували те, що, A PNG або JPG, ймовірно? 926 00:42:12,830 --> 00:42:14,480 Ми використовували JPG. 927 00:42:14,480 --> 00:42:16,780 Якщо вам цікаво, надмірне відповісти на ваше запитання 928 00:42:16,780 --> 00:42:19,404 є JPG, як правило, використовується для фотографії, оскільки вона підтримує 929 00:42:19,404 --> 00:42:21,500 мільйони квітів або 24-бітному кольорі. 930 00:42:21,500 --> 00:42:26,930 GIF зазвичай використовується для, як, Інтернет-меми ці days-- анімації, 931 00:42:26,930 --> 00:42:28,810 як анімовані GIF. 932 00:42:28,810 --> 00:42:32,320 Але це трапляється використовувати менший колір палітра, тільки 256 можливих кольорів, 933 00:42:32,320 --> 00:42:35,230 але вона підтримує прозорості та анімації. 934 00:42:35,230 --> 00:42:40,330 І потім є PNG, який підтримує прозорість і більше квітів 935 00:42:40,330 --> 00:42:41,300 але не анімація. 936 00:42:41,300 --> 00:42:42,133 Так що це компроміс. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 Таким чином, додавання GIF, хоча, буде функціонально 939 00:42:46,060 --> 00:42:48,396 еквівалентно додаванню PNG або JPG. 940 00:42:48,396 --> 00:42:49,110 Так. 941 00:42:49,110 --> 00:42:50,550 Джерело зображення дорівнює. 942 00:42:50,550 --> 00:42:51,590 Так щось інше. 943 00:42:51,590 --> 00:42:57,288 Давайте придумати щось, що ми послали до Вікторії, щоб зробити тут. 944 00:42:57,288 --> 00:42:59,209 >> ГЛЯДАЧІ: Додайте кнопки для форми. 945 00:42:59,209 --> 00:43:00,000 DAVID J. Малан: OK. 946 00:43:00,000 --> 00:43:02,179 Так додати кнопки для форми. 947 00:43:02,179 --> 00:43:03,470 І ми зробимо це разом один. 948 00:43:03,470 --> 00:43:07,220 Так що це буде ідеальний Segue відразу після цього виклику. 949 00:43:07,220 --> 00:43:10,357 Ще щось? 950 00:43:10,357 --> 00:43:11,440 Те, що ви хотіли б зробити? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 Полотно відчуває себе дуже нищівної якщо це все, що ми можемо зробити. 953 00:43:16,516 --> 00:43:18,140 ГЛЯДАЧІ: Змініть колір тексту. 954 00:43:18,140 --> 00:43:19,500 DAVID J. Малан: Зміна чого? 955 00:43:19,500 --> 00:43:20,666 ГЛЯДАЧІ: Колір тексту. 956 00:43:20,666 --> 00:43:22,311 DAVID J. Малан: Змінити колір тексту. 957 00:43:22,311 --> 00:43:22,810 Добре. 958 00:43:22,810 --> 00:43:23,790 Отже, давайте зробимо це. 959 00:43:23,790 --> 00:43:27,209 Просто знову так, щоб ви не просто зубрінням, роблячи саме те, що я роблю, 960 00:43:27,209 --> 00:43:29,500 Я збираюся включити музику протягом можливо п'ять хвилин тут. 961 00:43:29,500 --> 00:43:30,450 Ви можете використовувати Google. 962 00:43:30,450 --> 00:43:33,130 Ви завжди можете запитати мене, і Я шепочу натяк на вухо. 963 00:43:33,130 --> 00:43:35,171 Ви завжди можете подивитися понад на чужі плечі. 964 00:43:35,171 --> 00:43:37,340 Але вирішити тільки одну з цих проблем. 965 00:43:37,340 --> 00:43:40,190 Але ми зробимо останній, формує один, якби ми могли разом. 966 00:43:40,190 --> 00:43:42,790 Таким чином, через п'ять хвилин, щоб вирішити будь-який з цих проблем 967 00:43:42,790 --> 00:43:46,780 за допомогою Google, інтуїції, або будь-який інші засоби доступні для вас. 968 00:43:46,780 --> 00:43:48,630 >> [МУЗИКА] 969 00:43:48,630 --> 00:43:49,130 Добре. 970 00:43:49,130 --> 00:43:50,838 Не турбуйтеся, якщо ви хочете зберегти майструвати, 971 00:43:50,838 --> 00:43:53,880 але я буду псувати пару з цих відповідей. 972 00:43:53,880 --> 00:43:57,986 Таким чином, перше речення від Вікторія була зробити шрифт більше. 973 00:43:57,986 --> 00:43:59,360 Таким чином, є кілька способів зробити це. 974 00:43:59,360 --> 00:44:01,530 Я в даний час відновлено мій екран такого розміру, 975 00:44:01,530 --> 00:44:04,310 хоча я збільшенні масштабу штучно тільки, щоб бачити речі. 976 00:44:04,310 --> 00:44:07,470 І давайте зробимо це. 977 00:44:07,470 --> 00:44:11,380 Дозвольте мені йти вперед і захопити деякі загальні латинський текст 978 00:44:11,380 --> 00:44:19,540 тільки тому у нас є щось, щоб працювати с. 979 00:44:19,540 --> 00:44:20,715 Так дайте мені тільки один момент. 980 00:44:20,715 --> 00:44:21,840 Я зроблю три абзаци. 981 00:44:21,840 --> 00:44:53,430 982 00:44:53,430 --> 00:44:53,930 ДОБРЕ. 983 00:44:53,930 --> 00:44:55,560 Це буде найкращий приклад. 984 00:44:55,560 --> 00:44:57,840 Так що для цікавих, в мій hello.html, я просто 985 00:44:57,840 --> 00:45:01,645 вставили три нонсенс латинські пункти 986 00:45:01,645 --> 00:45:03,270 тільки тому у нас є певний текст, щоб працювати с. 987 00:45:03,270 --> 00:45:06,720 І мета Вікторії було зробити деякі з тексту більшого. 988 00:45:06,720 --> 00:45:09,879 Так що я міг би, як і раніше, йдуть сюди. 989 00:45:09,879 --> 00:45:11,170 І дозвольте мені зробити це правильний шлях. 990 00:45:11,170 --> 00:45:13,253 Я буду мати посилання тег, який вказує на файл 991 00:45:13,253 --> 00:45:20,560 називається "styles.css," відносини з яких знову "таблиця стилів". 992 00:45:20,560 --> 00:45:25,221 А потім я збираюся врятувати і відкрити цей "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> Так що, як і раніше, у мене є здатність в цьому файлі CSS 994 00:45:28,940 --> 00:45:31,569 насправді перевизначити значення за замовчуванням естетика веб-сторінки, 995 00:45:31,569 --> 00:45:33,860 і естетика за замовчуванням, Звичайно, досить нудно. 996 00:45:33,860 --> 00:45:36,943 Це свого роду нормальний розмір шрифту, чорний текст, білий фон, і так далі. 997 00:45:36,943 --> 00:45:39,440 Тому припустимо, я хочу зробити весь цей текст більше. 998 00:45:39,440 --> 00:45:40,460 Я міг би зробити кілька речей. 999 00:45:40,460 --> 00:45:43,750 У моєму файлі styles.css я може сказати, що ви знаєте, що, 1000 00:45:43,750 --> 00:45:46,950 застосувати наступне тіло моєї сторінки. 1001 00:45:46,950 --> 00:45:51,390 Ідіть вперед і зробити розмір шрифту 24 балів, 1002 00:45:51,390 --> 00:45:54,130 який являє собою число, яке я міг би використовувати в Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Дозвольте мені повернутися до моєї мережі сторінка тут і перезавантаження, 1004 00:45:57,620 --> 00:45:59,640 і ви можете бачити, що це вже набагато більше. 1005 00:45:59,640 --> 00:46:02,223 І ми можемо отримати трохи розуму, так само, як ми можемо на desktop-- 1006 00:46:02,223 --> 00:46:03,670 зробити це 96 балів. 1007 00:46:03,670 --> 00:46:04,950 Оновити. 1008 00:46:04,950 --> 00:46:07,610 І це трохи стає громіздким в цій точці. 1009 00:46:07,610 --> 00:46:09,500 >> Але я міг би бути трохи більш точним. 1010 00:46:09,500 --> 00:46:14,530 Замість застосування цього таблиці стилів в тіло сторінки, 1011 00:46:14,530 --> 00:46:21,740 що ще я міг би застосувати його замість цього, що інші теги, які могли б ще 1012 00:46:21,740 --> 00:46:25,445 функціонують таким же чином? 1013 00:46:25,445 --> 00:46:26,444 >> ГЛЯДАЧІ: р-тег? 1014 00:46:26,444 --> 00:46:27,360 DAVID J. Малан: P бирка. 1015 00:46:27,360 --> 00:46:29,350 Таким чином, голова не буде правильно, так як голова, 1016 00:46:29,350 --> 00:46:31,300 ви не можете насправді контроль естетики. 1017 00:46:31,300 --> 00:46:32,700 Там в тексті або є, або немає. 1018 00:46:32,700 --> 00:46:36,760 Але р tag-- я можу пірнути в трохи глибше, так би мовити, в пункті 1019 00:46:36,760 --> 00:46:37,350 теги. 1020 00:46:37,350 --> 00:46:41,600 І хоча є три, що це прекрасно, тому що в CSS, 1021 00:46:41,600 --> 00:46:44,900 коли я просто говорю "р", це засоби застосовуються такі 1022 00:46:44,900 --> 00:46:48,300 до будь-якого тегу, який відповідає цим селектор, селектор просто 1023 00:46:48,300 --> 00:46:49,430 це ім'я тега. 1024 00:46:49,430 --> 00:46:52,350 Так що всюди, де ви бачите "Р" застосувати розмір шрифту, 1025 00:46:52,350 --> 00:46:55,222 і давайте зробимо його більш розумно again-- 24 пункт. 1026 00:46:55,222 --> 00:46:56,930 І ви знаєте, що, просто для хорошої заходом, 1027 00:46:56,930 --> 00:46:59,810 давайте зробимо колір червоний тільки на даний момент. 1028 00:46:59,810 --> 00:47:03,740 І тепер, якщо я перезавантажити, тепер ми побачити три потворні пункти. 1029 00:47:03,740 --> 00:47:07,180 >> Але тепер припустимо, що я начебто of-- Я хочу, щоб перший абзац 1030 00:47:07,180 --> 00:47:08,210 вискочити у користувача. 1031 00:47:08,210 --> 00:47:11,150 Я не хочу, щоб просто збільшити розмір шрифту всього. 1032 00:47:11,150 --> 00:47:16,105 І тому я насправді хочу, щоб визначити чи відмінності між цими пунктами. 1033 00:47:16,105 --> 00:47:18,730 Так що давайте позбутися від червоного, тому що це просто якась липким, 1034 00:47:18,730 --> 00:47:23,885 і давайте йти вперед і зробити розмір шрифту 12 пунктів за замовчуванням, 1035 00:47:23,885 --> 00:47:26,260 так що ми повернулися до чогось трохи більш розумним. 1036 00:47:26,260 --> 00:47:29,190 А тепер я просто хочу, щоб збільшити розмір шрифту першого абзацу. 1037 00:47:29,190 --> 00:47:31,440 Я можу зробити це в кілька способами, але один із способів це 1038 00:47:31,440 --> 00:47:37,180 можливо, саме навчальне на момент, щоб зробити наступне. 1039 00:47:37,180 --> 00:47:43,280 Дозвольте мені йти вперед і говорити, що це пункт має унікальний ідентифікатор "в першу чергу." 1040 00:47:43,280 --> 00:47:45,000 Я міг би назвати це все, що хочу. 1041 00:47:45,000 --> 00:47:46,874 Я міг би назвати це "Foo" або будь-яке інше слово, 1042 00:47:46,874 --> 00:47:49,290 але я збираюся дати йому деякі семантично значуща ім'я 1043 00:47:49,290 --> 00:47:50,320 як "перший". 1044 00:47:50,320 --> 00:47:54,790 Це унікальний ідентифікатор, ідентифікатор, для мого першого абзацу. 1045 00:47:54,790 --> 00:47:59,360 >> Те, що я тепер можу зробити в моїй таблиці стилів це бути трохи точнішим. 1046 00:47:59,360 --> 00:48:02,330 Замість того щоб сказати, застосувати наступне р тега, 1047 00:48:02,330 --> 00:48:04,890 Я можу сказати, що following-- застосовуються такі, 1048 00:48:04,890 --> 00:48:11,000 або виберіть, HTML-елемент що має унікальний ідентифікатор "в першу чергу." 1049 00:48:11,000 --> 00:48:12,350 Що я хочу, щоб застосувати до нього? 1050 00:48:12,350 --> 00:48:15,250 Розмір шрифту 24 пункту. 1051 00:48:15,250 --> 00:48:16,640 Так що у мене є два селектори в даний час. 1052 00:48:16,640 --> 00:48:19,690 Один робить все з пункти 12 пунктів. 1053 00:48:19,690 --> 00:48:24,960 Але це одне, тим більше, що мова йде про second-- мова йде про останню в file-- 1054 00:48:24,960 --> 00:48:27,090 це має каскадний ефект. 1055 00:48:27,090 --> 00:48:30,200 Я тільки що зробив все мої теги параграфів 12-точка, 1056 00:48:30,200 --> 00:48:34,350 але це зараз і каскади переопределяет, що для будь-яких елементів 1057 00:48:34,350 --> 00:48:38,800 на сторінці, будь-який тег на сторінці якого унікальний ідентифікатор цитата Unquote "в першу чергу." 1058 00:48:38,800 --> 00:48:41,720 І хештегом в цьому контексті просто означає, що "унікальний ідентифікатор". 1059 00:48:41,720 --> 00:48:43,750 Я не ставлю його в HTML-файл. 1060 00:48:43,750 --> 00:48:46,880 Я, тут, просто сказати, цитата Unquote "в першу чергу." 1061 00:48:46,880 --> 00:48:48,470 >> Отже, дозвольте мені перезавантажити. 1062 00:48:48,470 --> 00:48:49,919 А тепер я бачу, ах, добре. 1063 00:48:49,919 --> 00:48:51,710 Я маю на увазі, що це не так красиво, але це свого роду 1064 00:48:51,710 --> 00:48:53,600 як з передмові до книги або щось подібне, 1065 00:48:53,600 --> 00:48:55,100 де перший пункт більше. 1066 00:48:55,100 --> 00:48:57,933 Може бути ще більш точним з тільки перші літери, але, по крайней мере, 1067 00:48:57,933 --> 00:48:59,110 Я здійснював більше контролю. 1068 00:48:59,110 --> 00:49:04,760 Тепер maybe-- може бути, я хочу, щоб це зробити іноді з яких-небудь причин, 1069 00:49:04,760 --> 00:49:09,010 і тому я не хочу, щоб це відносяться до тільки один HTML-тег. 1070 00:49:09,010 --> 00:49:15,110 Швидше за все, давайте say-- давайте Також зробіть наступне. 1071 00:49:15,110 --> 00:49:18,810 Клас = "імпорт". 1072 00:49:18,810 --> 00:49:23,970 У той час як ідентифікатор використовується для однозначної визначити одну річ, один тег, 1073 00:49:23,970 --> 00:49:30,190 у вашій веб-сторінці, клас призначається, щоб бути використаний на будь-якій кількості елементів або тегів 1074 00:49:30,190 --> 00:49:30,950 на веб-сторінці. 1075 00:49:30,950 --> 00:49:31,710 Так що багаторазового використання. 1076 00:49:31,710 --> 00:49:33,090 ID не підлягає повторному використанню. 1077 00:49:33,090 --> 00:49:34,450 Клас можна використовувати повторно. 1078 00:49:34,450 --> 00:49:37,830 >> І ви знаєте, що, з яких-небудь філософська reasons-- 1079 00:49:37,830 --> 00:49:40,180 Я не закінчив thought-- Я збираюся сказати, 1080 00:49:40,180 --> 00:49:44,300 що перший пункт і другий пункт мають важливе значення. 1081 00:49:44,300 --> 00:49:48,600 Так що я збираюся застосувати клас під назвою "Важливо", що, якщо я зберегти файл 1082 00:49:48,600 --> 00:49:51,510 і перезавантаження, не має функціональне вплив ще. 1083 00:49:51,510 --> 00:49:53,780 Але я додав деякі метаданих в файл, 1084 00:49:53,780 --> 00:49:56,610 начебто щось окреме від основних даних файлу, 1085 00:49:56,610 --> 00:50:02,300 так що тепер в моїй таблиці стилів, якщо я замість того, щоб сказати: ".important" - ви знаєте, 1086 00:50:02,300 --> 00:50:07,110 все, що важливо, я збирається зробити колір шрифту, red-- 1087 00:50:07,110 --> 00:50:09,930 або, вірніше, не колір шрифту, тільки колір. 1088 00:50:09,930 --> 00:50:12,930 Там в неузгодженості В CSS, на жаль. 1089 00:50:12,930 --> 00:50:14,120 І перезавантажити. 1090 00:50:14,120 --> 00:50:17,640 Тепер зверніть увагу на перший два абзаци червоні 1091 00:50:17,640 --> 00:50:20,880 але не третього, тому що я тільки застосовується клас "важливий" 1092 00:50:20,880 --> 00:50:25,020 в перших двох з цих речей. 1093 00:50:25,020 --> 00:50:28,030 >> Таким чином, в ідентифікаторах, у вас є можливість вказати дуже точно. 1094 00:50:28,030 --> 00:50:30,110 З класів, у вас є можливість багаторазового використання. 1095 00:50:30,110 --> 00:50:33,800 Але в обох випадках, зверніть увагу на свого роду принцип хорошого дизайну 1096 00:50:33,800 --> 00:50:39,072 де я факторізовано все з естетика в мій файл styles.css. 1097 00:50:39,072 --> 00:50:40,280 Так що немає безладності тут. 1098 00:50:40,280 --> 00:50:44,490 Там немає жодної згадки про червоний або напівжирний або кутами розмір шрифту в цьому файлі. 1099 00:50:44,490 --> 00:50:49,430 Швидше за все у мене є семантично, за значенням характеризується мої дані як дані, 1100 00:50:49,430 --> 00:50:51,240 ось деякі важливі дані. 1101 00:50:51,240 --> 00:50:52,800 Ось деякі важливіші дані. 1102 00:50:52,800 --> 00:50:56,500 Крім того, тут "Перший" з моїх важливих даних. 1103 00:50:56,500 --> 00:51:01,050 Так HTML все про сортувати мічення, в буквальному сенсі слова, слова 1104 00:51:01,050 --> 00:51:05,270 і пункти і конструкції в вашому сторінка з цими маленькими підказками, якщо ви 1105 00:51:05,270 --> 00:51:07,640 буде, що ви можете якось використовувати, використовуючи 1106 00:51:07,640 --> 00:51:10,880 інші методи, такі як CSS, таким чином. 1107 00:51:10,880 --> 00:51:14,760 >> Таким чином, у відповідь на запитання Вікторії, ми можемо зробити шрифт більше таким чином. 1108 00:51:14,760 --> 00:51:18,380 Є так багато інших способів, але шрифт tag-- відкрита дужка "шрифт" - 1109 00:51:18,380 --> 00:51:19,770 насправді кілька років. 1110 00:51:19,770 --> 00:51:21,410 І це проблема, теж з покладаючись тільки 1111 00:51:21,410 --> 00:51:23,485 на онлайн resources-- вони мають тенденцію бути застарілими. 1112 00:51:23,485 --> 00:51:26,110 І справді, що це є застарілим, тому що світ зрозумів, 1113 00:51:26,110 --> 00:51:28,970 що означає "розмір шрифту = 7" означає? 1114 00:51:28,970 --> 00:51:29,670 Це не робить. 1115 00:51:29,670 --> 00:51:32,770 І так протягом багатьох років і це day-- одна зі сторін 1116 00:51:32,770 --> 00:51:36,060 зазначає, в тому, що це насправді неймовірно болісний досі іноді 1117 00:51:36,060 --> 00:51:38,900 розробка сайтів для веб, так як Microsoft 1118 00:51:38,900 --> 00:51:44,220 і Google і Mozilla і інші часто розходяться в думках щодо того, як 1119 00:51:44,220 --> 00:51:47,480 інтерпретувати специфікацію як HTML. 1120 00:51:47,480 --> 00:51:52,490 >> Існує книга правил для HTML, який як правило, говорить, що означає, що кожен тег. 1121 00:51:52,490 --> 00:51:55,690 Але іноді це залишилося до розсуду реалізації, в 1122 00:51:55,690 --> 00:51:57,290 свій розсуд і Google від Microsoft. 1123 00:51:57,290 --> 00:52:00,000 І так що ви будете дуже часто побачити на сайті щось 1124 00:52:00,000 --> 00:52:04,954 виглядає по-іншому на ПК ніж це робить на Mac, 1125 00:52:04,954 --> 00:52:06,995 і це насправді, тому що, в кінці дня, 1126 00:52:06,995 --> 00:52:08,891 вони не перевіряли його добре на обох платформах. 1127 00:52:08,891 --> 00:52:11,390 Але це також тому, що розумно, розумні люди не погодяться 1128 00:52:11,390 --> 00:52:14,970 і компанії будуть не згодні, і так одне із завдань програмування 1129 00:52:14,970 --> 00:52:16,980 для Інтернету або проектування речі для Інтернету 1130 00:52:16,980 --> 00:52:21,700 пише свій сайт таким чином, який працює на кожному веб-браузері. 1131 00:52:21,700 --> 00:52:23,410 Але навіть це нерозумно, чи не так? 1132 00:52:23,410 --> 00:52:27,807 Є так багато версій так багато браузерів, що там, в якийсь момент, 1133 00:52:27,807 --> 00:52:30,890 Ви також повинні зробити дзвінок судження і ви повинні вирішити, як компанія, 1134 00:52:30,890 --> 00:52:33,082 особливо для електронної комерції стилі сайти, де ви 1135 00:52:33,082 --> 00:52:36,290 намагаються використовувати останні і найбільші технології, щоб дати дійсно хороший користувач 1136 00:52:36,290 --> 00:52:37,110 досвід. 1137 00:52:37,110 --> 00:52:41,019 Але деякий відсоток користувачів може як і раніше за допомогою Internet Explorer 6 або 7 1138 00:52:41,019 --> 00:52:43,810 або 8, особливо в залежності від країна, що вони приходять. 1139 00:52:43,810 --> 00:52:46,760 >> І тому дуже часто консультувалися щось 1140 00:52:46,760 --> 00:52:50,920 як "статистика веб-браузер." 1141 00:52:50,920 --> 00:52:56,560 І якщо ми підемо, метою яких давайте подивимося Вікіпедія і подивитися, як останню дату ця діаграма 1142 00:52:56,560 --> 00:52:59,320 якщо є один. 1143 00:52:59,320 --> 00:53:02,420 Так що тут ви можете побачити де браузери насправді 1144 00:53:02,420 --> 00:53:06,160 є, відповідно з грудня 2015 року, відповідно до урядом США. 1145 00:53:06,160 --> 00:53:11,170 Хром на 42% частки ринку, а потім від IE в основному в корпоративних настройках 1146 00:53:11,170 --> 00:53:14,490 або настройки комп'ютера, звичайно ж, слідують Firefox, 1147 00:53:14,490 --> 00:53:17,440 потім Safari, Opera, то не зробив зробити карту тут з якоїсь причини, 1148 00:53:17,440 --> 00:53:18,210 а потім інші. 1149 00:53:18,210 --> 00:53:19,500 Може бути, це в інших. 1150 00:53:19,500 --> 00:53:27,700 Але більш проблематичним, ніж is-- давайте подивимося, якщо Вікіпедія також має 1151 00:53:27,700 --> 00:53:35,194 версії браузерів version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Давайте повернемося до статистики браузера. 1154 00:53:39,190 --> 00:53:40,680 IE. 1155 00:53:40,680 --> 00:53:42,030 Навіть цього недостатньо. 1156 00:53:42,030 --> 00:53:44,854 Статистика браузер. 1157 00:53:44,854 --> 00:53:45,353 Моя версія. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Це не буде правильним. 1160 00:53:50,540 --> 00:53:53,414 Давайте подивимося версії. 1161 00:53:53,414 --> 00:53:54,830 Частка браузера на ринку. 1162 00:53:54,830 --> 00:53:57,110 Давайте подивимося, якщо виникне така ситуація. 1163 00:53:57,110 --> 00:53:57,610 ДОБРЕ. 1164 00:53:57,610 --> 00:54:00,010 Тепер це стає трохи більш корисним. 1165 00:54:00,010 --> 00:54:04,870 Так ось, зверніть увагу, що у нас є всі різні версії браузерів. 1166 00:54:04,870 --> 00:54:09,887 І, Боже мій, якщо ви look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Я маю на увазі, браузери все частіше оновлюється, а іноді і деякі з цих змін 1168 00:54:12,970 --> 00:54:16,430 мають важливе значення в З точки зору функціональності. 1169 00:54:16,430 --> 00:54:20,630 І ось в якийсь момент, менеджери продуктів або інженери 1170 00:54:20,630 --> 00:54:23,620 потрібно зробити decision-- ви знати, що, тільки 1% від світу 1171 00:54:23,620 --> 00:54:24,740 все ще використовує IE 7. 1172 00:54:24,740 --> 00:54:25,490 Чорт з ними. 1173 00:54:25,490 --> 00:54:27,470 Ми просто не будемо підтримувати цей браузер. 1174 00:54:27,470 --> 00:54:28,740 І що це значить не підтримувати? 1175 00:54:28,740 --> 00:54:31,170 Це може означати, що кнопки не працюють на вашій веб-сторінці, 1176 00:54:31,170 --> 00:54:33,050 або це може означати, форматування повністю відключений. 1177 00:54:33,050 --> 00:54:35,091 Або ви могли б зробити той же самий виклик суд 1178 00:54:35,091 --> 00:54:39,089 в мобільних ці дні, де ми не збирається підтримувати IOS 5 більше. 1179 00:54:39,089 --> 00:54:40,380 Таким чином, люди просто повинні оновити. 1180 00:54:40,380 --> 00:54:45,850 Або ми не збираємося підтримувати Cupcake на ОС Android для пристроїв Android, 1181 00:54:45,850 --> 00:54:48,629 тому як world-- як тек світ хоче рухатися вперед, 1182 00:54:48,629 --> 00:54:51,170 вона як би хоче перетягнути світ з ним так, щоб вони цього не роблять 1183 00:54:51,170 --> 00:54:53,295 повинні як і раніше зворотну сумісність, щоб вони 1184 00:54:53,295 --> 00:54:54,920 може запропонувати нові і хороші характеристики. 1185 00:54:54,920 --> 00:54:57,878 Це дійсно одна з причин, чому так багато компаній викочують 1186 00:54:57,878 --> 00:55:01,440 автоматичні оновлення і свого роду примус останні версії програмного забезпечення на нас. 1187 00:55:01,440 --> 00:55:04,010 І навіть компанії як Apple, буде свого роду 1188 00:55:04,010 --> 00:55:07,280 змусить вас майже або змусити ви з точки зору ринкових сил 1189 00:55:07,280 --> 00:55:11,164 щоб купити новий телефон, тому що вони просто НЕ буде оновлювати свій старий телефон більше. 1190 00:55:11,164 --> 00:55:13,330 Таким чином, ви пропустіть на останні і найбільші можливості, 1191 00:55:13,330 --> 00:55:17,520 тому що це дорого їх як компанії підтримувати старі, можливо, 1192 00:55:17,520 --> 00:55:19,330 нижчі версії програмного забезпечення. 1193 00:55:19,330 --> 00:55:23,660 Але чистий ефект є те, що ми також страждають цим, а також. 1194 00:55:23,660 --> 00:55:26,550 >> Отже, давайте розглянемо тільки декілька заключних речей тут. 1195 00:55:26,550 --> 00:55:29,740 Давайте скостити дуже швидко деякі з ті і інші кулі, якщо цікаво. 1196 00:55:29,740 --> 00:55:33,440 Так що якщо ви намагаєтеся, наприклад, положення 1197 00:55:33,440 --> 00:55:36,420 текст на різних сторонах сторінки, я збираюся зробити один швидкий шлях, 1198 00:55:36,420 --> 00:55:38,360 але є різні способи зробити це. 1199 00:55:38,360 --> 00:55:42,610 Дозвольте мені йти вперед і eliminate-- спростити це в такий спосіб. 1200 00:55:42,610 --> 00:55:45,330 Дозвольте мені повернутися до моїх прості, прості пункти. 1201 00:55:45,330 --> 00:55:47,760 Дозвольте мені повернутися до моєї styles.css. 1202 00:55:47,760 --> 00:55:51,040 І я просто хочу, щоб використовувати simple-- який ви могли б побачити на Google 1203 00:55:51,040 --> 00:55:54,430 або згадати з earlier-- вирівнювання тексту вправо. 1204 00:55:54,430 --> 00:55:56,220 І перезавантажити цю сторінку. 1205 00:55:56,220 --> 00:55:58,470 Тепер все, здається, бути вирівняний по правому краю, 1206 00:55:58,470 --> 00:56:00,770 як ви можете побачити на накладні витрати тут. 1207 00:56:00,770 --> 00:56:04,470 >> Ми можемо зробити це виглядати трохи більше як книга, і ми можемо сказати, "виправдати" 1208 00:56:04,470 --> 00:56:05,640 і перезавантаження. 1209 00:56:05,640 --> 00:56:09,870 Тепер це приємно і квадрат на обох Сторони, яка є свого роду приємно. 1210 00:56:09,870 --> 00:56:12,220 Ще одна мета, яку ми мали тут була зміна кольору тексту. 1211 00:56:12,220 --> 00:56:13,650 Таким чином, ми побачили, що з моїм червоним текстом. 1212 00:56:13,650 --> 00:56:15,630 А тепер додати кнопки для форми. 1213 00:56:15,630 --> 00:56:19,390 Так чому б нам не спробувати зробити саме це? 1214 00:56:19,390 --> 00:56:23,656 Але спочатку дозвольте мені перейти на сайт, більшість з нас використовують кожен day-- Google. 1215 00:56:23,656 --> 00:56:25,780 І давайте подивимося на як Google насправді працює. 1216 00:56:25,780 --> 00:56:26,821 Але я збираюся зробити це. 1217 00:56:26,821 --> 00:56:31,930 Перш за все дозвольте мені це зробити in-- Дa, дозвольте мені перейти до Google в першу чергу. 1218 00:56:31,930 --> 00:56:34,530 Я збираюся доведеться йти в настройках Google, 1219 00:56:34,530 --> 00:56:40,660 тому що я хочу, щоб відключити що називається миттєві результати. 1220 00:56:40,660 --> 00:56:43,580 >> Таким чином, ви, можливо, помітили Google ці days-- дозвольте мені повернутися 1221 00:56:43,580 --> 00:56:44,850 і включіть цю. 1222 00:56:44,850 --> 00:56:47,900 Так що якщо я почну шукати для "кішок", як це, 1223 00:56:47,900 --> 00:56:50,120 помітити, що не тільки Я отримую автоматичне заповнення вгору 1224 00:56:50,120 --> 00:56:54,520 зверху, раптом, сама сторінка здається, змінюється досить швидко, а також, 1225 00:56:54,520 --> 00:56:58,750 і це Google, використовуючи мову називається JavaScript намагається бути корисним. 1226 00:56:58,750 --> 00:57:01,540 Але, на жаль, це свого роду з плутає наше обговорення 1227 00:57:01,540 --> 00:57:04,010 про те, що насправді відбувається під капотом тут. 1228 00:57:04,010 --> 00:57:09,070 Так що я просто вид швидко вимкнути миттєві результати. 1229 00:57:09,070 --> 00:57:11,510 І я збираюся натиснути кнопку Зберегти. 1230 00:57:11,510 --> 00:57:13,930 А тепер я збираюся відкрити що діагностична панель інструментів, що я 1231 00:57:13,930 --> 00:57:16,150 тримати відкриття на вкладці Network. 1232 00:57:16,150 --> 00:57:17,720 Так давайте зробимо це. 1233 00:57:17,720 --> 00:57:21,960 Нехай me-- whoops-- прокрутити це трохи вниз. 1234 00:57:21,960 --> 00:57:24,410 І дозвольте мені шукати "кішок". 1235 00:57:24,410 --> 00:57:26,790 >> А тепер notice-- насправді, це хороша можливість 1236 00:57:26,790 --> 00:57:28,840 обговорити на мить. 1237 00:57:28,840 --> 00:57:32,460 Зверніть увагу на момент, коли я type-- зупинити його. 1238 00:57:32,460 --> 00:57:35,250 Зупини це. 1239 00:57:35,250 --> 00:57:35,790 ДОБРЕ. 1240 00:57:35,790 --> 00:57:40,870 Зверніть увагу на той момент, я друкую лист C, дивіться в нижній частині екрана. 1241 00:57:40,870 --> 00:57:48,600 A- T- S. Що робить дно цього екрану, моя вкладка Мережа, 1242 00:57:48,600 --> 00:57:53,320 припускають, що відбувається кожен раз ввести букву? 1243 00:57:53,320 --> 00:57:57,700 На жаль, жаба дуже відволікаючим сьогодні або трилисник 1244 00:57:57,700 --> 00:58:00,339 або те, що він є. 1245 00:58:00,339 --> 00:58:01,880 Те, що відбувається кожного разу, коли я надрукував? 1246 00:58:01,880 --> 00:58:04,230 І дозвольте мені очистити буфера і введіть його ще раз. 1247 00:58:04,230 --> 00:58:06,580 So-- вигуки. 1248 00:58:06,580 --> 00:58:13,280 Кожен раз, коли я друкую лист, C- A- T-- тому новий рядок, очевидно, продовжує з'являтися. 1249 00:58:13,280 --> 00:58:16,530 Що кожен з цих рядків є, засновані на тому, що ми бачили і обговорювали 1250 00:58:16,530 --> 00:58:17,339 до сих пір? 1251 00:58:17,339 --> 00:58:18,130 ГЛЯДАЧІ: Пошук? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. Малан: пошук, або в більш загальному плані, запит HTTP 1253 00:58:21,770 --> 00:58:23,125 від мого браузера до сервера. 1254 00:58:23,125 --> 00:58:29,090 Ну, чому мій браузер роблячи HTTP запитувати кожного разу, коли я друкую лист? 1255 00:58:29,090 --> 00:58:30,502 >> ГЛЯДАЧІ: [нерозбірливо] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. Малан: Так, це дає мені ці автозаповнення результати. 1257 00:58:33,210 --> 00:58:35,190 Мовляв, де роблять ці Результати пошуку прийшли? 1258 00:58:35,190 --> 00:58:38,120 Ну, кожен раз, коли я типу лист, Google посилає більше 1259 00:58:38,120 --> 00:58:40,460 і все більше і більше слово я друкую. 1260 00:58:40,460 --> 00:58:41,040 Чому? 1261 00:58:41,040 --> 00:58:44,540 Тому що вони хочуть, щоб дати мені краще і краще, краще пропозицію, 1262 00:58:44,540 --> 00:58:48,880 список пропозицій, для того, що слово Я намагаюся насправді завершена. 1263 00:58:48,880 --> 00:58:53,030 Так що це сказати буквально кожен символ, який ви вводите в Google 1264 00:58:53,030 --> 00:58:56,900 направляється, в кінцевому рахунку, в навалом, але іноді один 1265 00:58:56,900 --> 00:59:00,620 в той час, з метою реалізації ці автоматичного завершення, коли 1266 00:59:00,620 --> 00:59:03,000 дані, звичайно, в Інтернеті. 1267 00:59:03,000 --> 00:59:08,780 >> Тепер давайте поглянемо на те, що насправді відбувається, коли я натискаю Google Search. 1268 00:59:08,780 --> 00:59:10,420 І тоді ми будемо використовувати це самі. 1269 00:59:10,420 --> 00:59:15,320 Так що якщо я перейдіть тепер до дуже Перший запит, що тільки що відбулося. 1270 00:59:15,320 --> 00:59:17,130 Зверніть увагу на наступне. 1271 00:59:17,130 --> 00:59:25,550 Він був відправлений у досить довго URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 а потім ціла купа речей. 1273 00:59:27,100 --> 00:59:29,620 Давайте подивимося це насправді прямо зараз в самій вкладці браузера. 1274 00:59:29,620 --> 00:59:31,310 Давайте позбутися панелі інструментів тут. 1275 00:59:31,310 --> 00:59:33,140 Ось сторінка результатів пошуку. 1276 00:59:33,140 --> 00:59:34,790 І зверніть увагу ось URL. 1277 00:59:34,790 --> 00:59:37,430 Тепер, ви можете здогадатися що відбувається тут, в частині. 1278 00:59:37,430 --> 00:59:39,090 Отже, перш за все, визначення. 1279 00:59:39,090 --> 00:59:42,570 Це, мабуть, є місцем де форма була відправлена. 1280 00:59:42,570 --> 00:59:44,910 Так що, коли я ввів слова "кішки" і натисніть Enter, 1281 00:59:44,910 --> 00:59:48,460 мабуть, Google послав мій введення тексту на цей URL 1282 00:59:48,460 --> 00:59:50,770 що я виділив там, слеш пошуку. 1283 00:59:50,770 --> 00:59:56,530 Виявляється, в URL, все, що відбувається після того, як знак питання, 1284 00:59:56,530 --> 01:00:01,270 як ми продовжувати говорити, пара ключ-значення що було надруковано в формі або якимось чином 1285 01:00:01,270 --> 01:00:04,500 передану від браузера до сервера. 1286 01:00:04,500 --> 01:00:07,180 >> Таким чином, в будь-який час ввести дані в форму в Інтернеті 1287 01:00:07,180 --> 01:00:10,000 і це було відправлено, як ми обговорювали, через GET, 1288 01:00:10,000 --> 01:00:12,400 один з цих віртуальних конверти, вміст 1289 01:00:12,400 --> 01:00:15,510 з цього envelope-- так, продовжуйте отримання опудала фізично 1290 01:00:15,510 --> 01:00:19,010 в конверт в класі сьогодні, але технологічно 1291 01:00:19,010 --> 01:00:21,110 це насправді покласти в URL. 1292 01:00:21,110 --> 01:00:22,940 Так що насправді, дозвольте мені просіяти через це. 1293 01:00:22,940 --> 01:00:25,010 Де ви бачите введення даних користувачем? 1294 01:00:25,010 --> 01:00:27,490 Де ви бачите щось що я сам надрукував тут? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Так, так що "кішки". 1297 01:00:33,491 --> 01:00:33,990 Чи не так? 1298 01:00:33,990 --> 01:00:36,380 Отже, дозвольте мені відігнати це в чомусь простіше. 1299 01:00:36,380 --> 01:00:39,917 Я збираюся видалити всі про цей URL, що я не розумію, 1300 01:00:39,917 --> 01:00:42,250 і я просто хочу, щоб залишити це, як this-- / пошук? Q = кішки. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 Ми будемо бачити, де д приходить від нині, 1303 01:00:47,890 --> 01:00:51,220 але це відчуває, як мінімум Кількість інформації, яку я надав. 1304 01:00:51,220 --> 01:00:53,050 А тепер я вдарю Enter. 1305 01:00:53,050 --> 01:00:55,520 І зауважте, це все ще працює. 1306 01:00:55,520 --> 01:00:57,950 Ми ще повернемося цілу купу кішок. 1307 01:00:57,950 --> 01:01:00,340 Таким чином, Google є вправнішим ніж це в ці дні. 1308 01:01:00,340 --> 01:01:01,934 Це 2016, а не одна тисяча дев'ятсот дев'яносто дев'ять. 1309 01:01:01,934 --> 01:01:04,600 Так що є інші речі, що мій Браузер посилає на сервер. 1310 01:01:04,600 --> 01:01:07,100 Але це мінімально все, що потрібно. 1311 01:01:07,100 --> 01:01:08,380 >> Так що ж відбувається? 1312 01:01:08,380 --> 01:01:14,320 Ну, перш за все дозвольте мені йти вперед і йти повернутися до Cloud9 і дозвольте мені йти вперед 1313 01:01:14,320 --> 01:01:15,620 і закрити вкладки раніше. 1314 01:01:15,620 --> 01:01:18,230 І я зроблю це на моєму володіти тільки на мить. 1315 01:01:18,230 --> 01:01:20,730 Я збираюся йти вперед і створити новий файл. 1316 01:01:20,730 --> 01:01:23,739 І я збираюся зберегти його як google.html. 1317 01:01:23,739 --> 01:01:26,280 І я буду дуже quickly-- Я збираюся вкрасти, насправді, 1318 01:01:26,280 --> 01:01:28,510 деякі з цього тексту, щоб заощадити час. 1319 01:01:28,510 --> 01:01:30,610 Я збираюся вставити цю інформацію тут. 1320 01:01:30,610 --> 01:01:33,850 Я не збираюся возитися з будь-яка стилізація на цей раз. 1321 01:01:33,850 --> 01:01:38,340 Ми будемо називати це "Мій Google." 1322 01:01:38,340 --> 01:01:41,230 І я збираюся позбутися всього в організмі. 1323 01:01:41,230 --> 01:01:42,740 І я збираюся зробити наступне. 1324 01:01:42,740 --> 01:01:45,690 Дозвольте мені збільшити. 1325 01:01:45,690 --> 01:01:50,620 Форма action-- і, як я коротко згадав earlier-- whoops-- як я коротко 1326 01:01:50,620 --> 01:01:54,130 вже згадувалося раніше, дія А форма, де ви відправити дані. 1327 01:01:54,130 --> 01:01:56,620 Так google.com/search. 1328 01:01:56,620 --> 01:01:59,390 І метод, який я хочу використовувати може бути одним з двох речей. 1329 01:01:59,390 --> 01:02:02,870 Це може бути або "отримати", як ми тримаємо обговорення, або це може бути "пост". 1330 01:02:02,870 --> 01:02:05,340 В даний час, фундаментальна Різниця в тому, якщо ви використовуєте "отримати" 1331 01:02:05,340 --> 01:02:09,590 вся інформація про те, що Користувач надає відправляється в URL. 1332 01:02:09,590 --> 01:02:13,530 >> Це відмінно підходить для таких речей, як пошук двигуни і кілька інших додатків, 1333 01:02:13,530 --> 01:02:17,080 але в якому разі ви не хочете, щоб заповнити форму 1334 01:02:17,080 --> 01:02:21,620 і інформація в кінцевому підсумки URL, як в адресному рядку браузера? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Які форми роблять you-- 1337 01:02:26,605 --> 01:02:27,480 ГЛЯДАЧІ: [нерозбірливо] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. Малан: Так, як і що? 1339 01:02:28,450 --> 01:02:29,270 ГЛЯДАЧІ: Паролі. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. Малан: Так, так що ви увійти в Facebook або на якомусь сайті. 1341 01:02:31,936 --> 01:02:34,395 Це для користувача введення з форма, текстове поле, 1342 01:02:34,395 --> 01:02:37,020 але ви, ймовірно, не хочуть його показ в URL браузера. 1343 01:02:37,020 --> 01:02:38,121 Чому? 1344 01:02:38,121 --> 01:02:40,870 Я маю на увазі, може бути, є деякі наслідки для безпеки в мережі, 1345 01:02:40,870 --> 01:02:44,830 але more-- подобається, простіше кажучи, що, якщо Ваш сусід по кімнаті, іншими значними, 1346 01:02:44,830 --> 01:02:47,710 ваші діти, ваш чоловік виглядає через історію браузера? 1347 01:02:47,710 --> 01:02:50,762 Існує ваш пароль прямо там в історії вашого браузера. 1348 01:02:50,762 --> 01:02:52,220 Це не відчуває, як хороший дизайн. 1349 01:02:52,220 --> 01:02:54,500 Або ще більш технічно, Припустимо, ви намагаєтеся 1350 01:02:54,500 --> 01:02:59,180 щоб завантажити фотографію на Flickr або Facebook або wherever-- 1351 01:02:59,180 --> 01:03:03,010 тобто для користувача введення, незважаючи на те, це трохи більше, як interesting-- 1352 01:03:03,010 --> 01:03:05,530 я втиснути зображення в рядку URL? 1353 01:03:05,530 --> 01:03:06,730 Ви ніби як би не може. 1354 01:03:06,730 --> 01:03:07,396 Ви можете вид. 1355 01:03:07,396 --> 01:03:10,210 Але, насправді, я насилу натискається уявити, що робити. 1356 01:03:10,210 --> 01:03:13,470 Так що мені потрібен інший метод завантаження фотографій на сайт, 1357 01:03:13,470 --> 01:03:15,657 і що інший метод називається "пост". 1358 01:03:15,657 --> 01:03:18,740 Але зараз, ми просто говоримо про "Отримати", який є більш простим з двох. 1359 01:03:18,740 --> 01:03:21,100 Це просто ставить все вводяться користувачем в URL. 1360 01:03:21,100 --> 01:03:22,830 >> Так ось форма я створюю. 1361 01:03:22,830 --> 01:03:24,070 Я хочу, щоб вхід. 1362 01:03:24,070 --> 01:03:24,820 І ви знаєте, що? 1363 01:03:24,820 --> 01:03:26,111 Я збираюся зробити припущення тут. 1364 01:03:26,111 --> 01:03:31,600 Я буду згадувати мій вхід "д" для "запиту." 1365 01:03:31,600 --> 01:03:34,970 І я думаю, що це один з оригінальний дизайн, можливо, з 1999 року. 1366 01:03:34,970 --> 01:03:39,560 І тоді тип цього входу тільки збирається бути "текст". 1367 01:03:39,560 --> 01:03:43,040 І тоді я буду мати інший вхід що не потрібно ім'я, як ми будемо найближчим часом 1368 01:03:43,040 --> 01:03:45,120 см, тип якого є "відправити". 1369 01:03:45,120 --> 01:03:47,070 І це буде дайте мені спеціальну кнопку. 1370 01:03:47,070 --> 01:03:48,320 І це все. 1371 01:03:48,320 --> 01:03:50,790 >> Отже, дозвольте мені йти вперед і зберегти цей файл. 1372 01:03:50,790 --> 01:03:54,910 Я збираюся повернутися до моїх браузер і перейти до google.html. 1373 01:03:54,910 --> 01:03:56,140 Enter. 1374 01:03:56,140 --> 01:03:59,680 І це свого роду рідкісні м'яко кажучи. 1375 01:03:59,680 --> 01:04:03,110 Але дозвольте мені йти вперед і пошук "кішок". 1376 01:04:03,110 --> 01:04:06,510 І зауважте, я в даний час за цією адресою Cloud9. 1377 01:04:06,510 --> 01:04:09,240 Але в той момент я натискаю на це, де ви сподіваюся, що в кінцевому підсумку? 1378 01:04:09,240 --> 01:04:10,160 >> ГЛЯДАЧІ: Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. Малан: Google. 1380 01:04:11,118 --> 01:04:12,740 Так що давайте натисніть кнопку Надіслати. 1381 01:04:12,740 --> 01:04:15,200 І дійсно я повторно реалізований Google. 1382 01:04:15,200 --> 01:04:15,700 Чи не так? 1383 01:04:15,700 --> 01:04:16,480 Це простіше. 1384 01:04:16,480 --> 01:04:17,120 Це легше. 1385 01:04:17,120 --> 01:04:20,350 Я маю на увазі, мій код явно краще, ніж їх, з безлад, який ми бачили раніше. 1386 01:04:20,350 --> 01:04:21,100 І ви знаєте, що? 1387 01:04:21,100 --> 01:04:22,610 Я збираюся приправити це вгору небагато. 1388 01:04:22,610 --> 01:04:23,860 Я не згадав про це раніше. 1389 01:04:23,860 --> 01:04:27,860 Є теги, як H1, для Heading 1, найважливіший заголовок на сторінці. 1390 01:04:27,860 --> 01:04:30,570 "Мій Google," Я буду називати це. 1391 01:04:30,570 --> 01:04:31,940 Дозвольте мені перезавантажити. 1392 01:04:31,940 --> 01:04:33,772 Це виглядає трохи краще вже. 1393 01:04:33,772 --> 01:04:34,980 І, насправді, ви знаєте, що? 1394 01:04:34,980 --> 01:04:36,430 У мене already-- я збрехав. 1395 01:04:36,430 --> 01:04:40,200 Я сказав, що не мав наміру стиль це, але я збираюся стиль це, як і раніше. 1396 01:04:40,200 --> 01:04:46,860 І моє тіло буде, скажімо, вирівнювання тексту центр. 1397 01:04:46,860 --> 01:04:48,800 Він більше схожий Google вже. 1398 01:04:48,800 --> 01:04:51,090 >> Мені потрібна перерва лінії, хоча, для цього кнопку Надіслати. 1399 01:04:51,090 --> 01:04:52,798 І виходить, ви можна використовувати пункти, 1400 01:04:52,798 --> 01:04:57,320 або ви можете більш буквально просто сказати, дайте мені розрив рядка here-- ІФІКА тег. 1401 01:04:57,320 --> 01:04:59,319 І якщо я перезарядити це, тепер він йде туди. 1402 01:04:59,319 --> 01:05:01,610 Це трохи негарно, тому я може зробити кілька розривів рядків, 1403 01:05:01,610 --> 01:05:03,310 але давайте не будемо занадто жадібними тут. 1404 01:05:03,310 --> 01:05:06,430 Отже, тепер давайте подивимося, чи працює він для "собак". 1405 01:05:06,430 --> 01:05:08,640 Це схоже на роботу для "собак", а також. 1406 01:05:08,640 --> 01:05:10,780 Так що ж тут переконливим винос? 1407 01:05:10,780 --> 01:05:13,600 Одно-- ні величезний стрибок ввести кілька тегів, 1408 01:05:13,600 --> 01:05:15,370 як тег форми у вхідному тезі. 1409 01:05:15,370 --> 01:05:17,120 Але більш фундаментально це все, що ми робимо 1410 01:05:17,120 --> 01:05:20,610 задіє наше розуміння з HTTP і той факт, 1411 01:05:20,610 --> 01:05:24,900 що в кінцевому підсумку змінити форми що в URL браузера, 1412 01:05:24,900 --> 01:05:28,540 і так, тому, ми можемо механічно забезпечують введення на сервер 1413 01:05:28,540 --> 01:05:33,600 зробивши форму HTML і знаючи, що сервер розуміє HTTP, 1414 01:05:33,600 --> 01:05:36,890 так само, як наше тіло розуміє, як, струшуючи мою руку, той же протокол, 1415 01:05:36,890 --> 01:05:40,920 і таким чином ми отримуємо назад відповідь що ми в кінцевому рахунку очікувати. 1416 01:05:40,920 --> 01:05:44,050 >> Так давайте спробуємо зробити один Останнє, що тепер з мобільного, 1417 01:05:44,050 --> 01:05:47,052 і я буду make-- я додам цей код на слайдах. 1418 01:05:47,052 --> 01:05:49,760 Так що якщо ви хочете повозитися, ви безумовно, може взяти його звідти. 1419 01:05:49,760 --> 01:05:51,551 Але я збираюся йти вперед і зробити одну річ. 1420 01:05:51,551 --> 01:05:54,120 Я збираюся йти вперед і відкрити свій індекс page-- 1421 01:05:54,120 --> 01:05:59,030 моя сторінка привіт, як і раніше, що має багато цієї лже-латинський текст, 1422 01:05:59,030 --> 01:06:05,470 або безглуздими латинський текст, і has-- це виглядає на цьому розмір шрифту. 1423 01:06:05,470 --> 01:06:07,850 Але дозвольте мені йти вперед і робити це. 1424 01:06:07,850 --> 01:06:09,300 Я збираюся піти в Cloud9. 1425 01:06:09,300 --> 01:06:10,380 І ви не повинні зробити цей крок. 1426 01:06:10,380 --> 01:06:11,420 Я просто зроблю це сам. 1427 01:06:11,420 --> 01:06:12,890 Я збираюся натиснути Share. 1428 01:06:12,890 --> 01:06:15,170 І це особливість просто з Cloud9, в результаті чого 1429 01:06:15,170 --> 01:06:17,710 Я можу зробити моє оточення громадськості. 1430 01:06:17,710 --> 01:06:20,240 >> І тільки заради демонстрація, зробимо це. 1431 01:06:20,240 --> 01:06:22,870 Я збираюся зробити мою заяву громадськості. 1432 01:06:22,870 --> 01:06:25,230 Зверніть увагу на те, що це мені попередження, я Я впевнений, що я хочу зробити це, 1433 01:06:25,230 --> 01:06:28,438 тому що це збирається зробити все в світі, чи є вони зараз тут 1434 01:06:28,438 --> 01:06:33,560 або дивитися відео пізніше на Інтернет в змозі побачити, що я бачу. 1435 01:06:33,560 --> 01:06:34,440 Але це нормально. 1436 01:06:34,440 --> 01:06:37,870 Я збираюся сказати: "Готово". 1437 01:06:37,870 --> 01:06:42,080 І дозвольте мені порадити вам, якби я зробив це correctly-- дозвольте мені перевірити його в першу чергу. 1438 01:06:42,080 --> 01:06:45,590 Ідіть вперед, якщо ви не mind-- в браузері на комп'ютері, 1439 01:06:45,590 --> 01:06:49,900 перейти до цього URL, і ми сподіваємося, ви побачите мій латинський текст. 1440 01:06:49,900 --> 01:06:52,820 І ясно, що це працює не на моєму ноутбуці. 1441 01:06:52,820 --> 01:06:53,610 Це в хмарі. 1442 01:06:53,610 --> 01:06:58,120 Це на Cloud9, в буквальному сенсі, але Я зробив моє робоче простір громадськості 1443 01:06:58,120 --> 01:07:03,450 так що кожен в Інтернеті може отримати доступ до свого латинську домашню сторінку. 1444 01:07:03,450 --> 01:07:07,209 >> Перейти до того ж URL на ваш телефон, якщо ви могли б. 1445 01:07:07,209 --> 01:07:09,750 Якщо це буде коштувати вам, хоча, ви може просто дивитися через плече. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 ГЛЯДАЧІ: [нерозбірливо] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. Малан: Я шкодую? 1449 01:07:43,550 --> 01:07:45,390 ГЛЯДАЧІ: [нерозбірливо] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. Малан: Тільки латинські слова. 1451 01:07:47,710 --> 01:07:48,210 Це все. 1452 01:07:48,210 --> 01:07:49,250 Але це те, що ви повинні побачити. 1453 01:07:49,250 --> 01:07:49,875 >> ГЛЯДАЧІ: Так. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. Малан: Так. 1455 01:07:50,790 --> 01:07:51,300 Так. 1456 01:07:51,300 --> 01:07:51,540 ДОБРЕ. 1457 01:07:51,540 --> 01:07:53,530 Так що я можу затримати ваш телефон на мить? 1458 01:07:53,530 --> 01:07:57,504 Так що, сподіваюся, якщо ви звертаєтеся він, вона повинна виглядати майже нечитабельним. 1459 01:07:57,504 --> 01:07:59,920 Це still-- я маю на увазі, це нечитабельним через латині. 1460 01:07:59,920 --> 01:08:01,920 Але це також нечитабельним з якоїсь іншої причини? 1461 01:08:01,920 --> 01:08:03,775 Як і те, чого Я не жадав ви про це? 1462 01:08:03,775 --> 01:08:04,650 АУДИТОРІЯ: Це маленький. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. Малан: Це супер, супер маленький. 1464 01:08:06,420 --> 01:08:07,920 Отже, як ми могли б це виправити? 1465 01:08:07,920 --> 01:08:09,730 Це супер, супер малий по телефону Вікторії 1466 01:08:09,730 --> 01:08:11,400 і, якщо ви витягнув це до себе, ймовірно, 1467 01:08:11,400 --> 01:08:14,660 не маленький на вашому телефоні, а також, якщо ви Включені настройки доступності. 1468 01:08:14,660 --> 01:08:15,530 Що це? 1469 01:08:15,530 --> 01:08:18,497 Можна просто затиснути і зум, який є працездатним, 1470 01:08:18,497 --> 01:08:20,330 але тоді ви бачите тільки кілька слів одночасно. 1471 01:08:20,330 --> 01:08:20,859 Так, почекайте хвилину. 1472 01:08:20,859 --> 01:08:21,720 Я знаю, як це виправити. 1473 01:08:21,720 --> 01:08:22,219 Чи не так? 1474 01:08:22,219 --> 01:08:26,130 Я міг би використовувати CSS, і я міг би змінити розмір шрифту з 12 пунктів до 24 пункту. 1475 01:08:26,130 --> 01:08:29,020 Але побічний ефект, який, звичайно, буде зараз, 1476 01:08:29,020 --> 01:08:32,630 на робочому столі або ноутбук, Тепер текст в два рази більше. 1477 01:08:32,630 --> 01:08:35,810 І тому було б частково бути хорошим розрізняти між пристроями, 1478 01:08:35,810 --> 01:08:37,840 і виявляється там способи зробити це. 1479 01:08:37,840 --> 01:08:39,590 є кілька різні способи, справді, 1480 01:08:39,590 --> 01:08:44,189 при цьому за допомогою CSS і вправнішим функції що ми не будемо вдаватися в дуже докладно, 1481 01:08:44,189 --> 01:08:46,960 ви можете по суті запиту браузер і сказати, 1482 01:08:46,960 --> 01:08:51,550 якщо ваш екран менше, ніж це багато пікселів, використовуйте цей розмір шрифту. 1483 01:08:51,550 --> 01:08:55,180 Якщо ваш екран більше, ніж це багато пікселів, використовуйте цей інший розмір шрифту. 1484 01:08:55,180 --> 01:08:57,080 >> Ви можете бути ще вправнішим досі. 1485 01:08:57,080 --> 01:09:00,140 Якщо ви коли-небудь відвідав веб-сторінка, яка, на робочому столі, 1486 01:09:00,140 --> 01:09:04,404 має велике меню, може бути виключений на сторона, а потім весь вміст 1487 01:09:04,404 --> 01:09:07,029 знаходиться в стороні, що menu-- це свого роду загальної парадигми. 1488 01:09:07,029 --> 01:09:09,670 Меню на лівій, зміст на правій, так і навпаки. 1489 01:09:09,670 --> 01:09:13,569 Чи є насправді не працює на мобільному телефоні, коли ваш екран тільки це багато пікселів в ширину. 1490 01:09:13,569 --> 01:09:16,233 Так що частіше зустрічається на мобільний, Ваше меню буде раптово отримати 1491 01:09:16,233 --> 01:09:18,399 рухнула, і ви повинні натисніть кнопку, щоб побачити його, 1492 01:09:18,399 --> 01:09:22,404 або веб-сайт поставить меню над ним і поставити утримання під ним. 1493 01:09:22,404 --> 01:09:24,779 І ви можете реалізувати ці речі в декількох аспектах. 1494 01:09:24,779 --> 01:09:28,340 Ви можете попросити своїх програмістів, агов, команда, в будь-який час 1495 01:09:28,340 --> 01:09:34,450 ви бачите запит HTTP від ​​Android пристрій, пристрій Microsoft, з Google 1496 01:09:34,450 --> 01:09:39,930 пристрій, пристрій компанії Apple, використовувати цю функцію розмір шрифту і використовувати цей макет меню, 1497 01:09:39,930 --> 01:09:42,670 або ж використовувати цю функцію за замовчуванням більшого розміру макета. 1498 01:09:42,670 --> 01:09:45,410 >> Тепер, використовуючи те, що фундаментальна техніка сьогодні 1499 01:09:45,410 --> 01:09:48,529 могли б використовувати інженери знати, чи є це 1500 01:09:48,529 --> 01:09:53,660 iPhone, андроїд телефон, ноутбук, настільний відвідування сервера компанії? 1501 01:09:53,660 --> 01:09:55,310 У чому ж вони отримують цю інформацію? 1502 01:09:55,310 --> 01:09:56,080 >> ГЛЯДАЧІ: Тема? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. Малан: Так, заголовок HTTP. 1504 01:09:57,740 --> 01:10:01,714 Таким чином, кожен запит HTTP виходячи з їх клієнтів до серверів 1505 01:10:01,714 --> 01:10:03,880 включають в себе, в те, що віртуальна конверт, цілий букет 1506 01:10:03,880 --> 01:10:08,260 з HTTP заголовків, один з яких є браузер і операційна система 1507 01:10:08,260 --> 01:10:10,290 навіть, якщо ви дбаєте що рівень деталізації. 1508 01:10:10,290 --> 01:10:13,790 Тепер, це загадкове виглядає рядок, але існує програмне забезпечення, яке буде просто 1509 01:10:13,790 --> 01:10:18,530 спростити це, і ви можете просто запитати в програмуванні code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever--, що телефон this-- який пристрій знаходиться цей користувач за допомогою? 1511 01:10:23,650 --> 01:10:27,501 І тоді ви можете сказати, показати їм це версія сайту, якщо це телефон. 1512 01:10:27,501 --> 01:10:30,250 Покажіть їм цю версію сайт, якщо це ноутбук або настільний. 1513 01:10:30,250 --> 01:10:32,316 Але вам не потрібно навіть на стороні сервера складності. 1514 01:10:32,316 --> 01:10:33,940 Ви можете зробити навіть найпростіші речі. 1515 01:10:33,940 --> 01:10:34,815 >> Я збираюся зробити це. 1516 01:10:34,815 --> 01:10:38,995 Я збираюся йти вперед в моє середовище Cloud9, 1517 01:10:38,995 --> 01:10:41,370 і я збираюся додати тег що ви бачили в Google раніше. 1518 01:10:41,370 --> 01:10:42,770 Це називається метатега. 1519 01:10:42,770 --> 01:10:45,520 І я ніколи не пам'ятаю цей, так Я збираюся транскрибувати його тут. 1520 01:10:45,520 --> 01:10:50,552 Мета ім'я = "вьюпорте", а потім зміст = "ширина = ширина пристрою, intital 1521 01:10:50,552 --> 01:11:02,060 масштаб = 1 ", і це все. 1522 01:11:02,060 --> 01:11:06,230 >> Так що це могло б також бути як чарівний заклинанням. 1523 01:11:06,230 --> 01:11:11,300 Це не все, що зрозуміло, але це має щось робити з перегляду, 1524 01:11:11,300 --> 01:11:15,070 і вікно перегляду просто тіло Веб-сторінка, прямокутна область, яка 1525 01:11:15,070 --> 01:11:16,690 визначає більшу частину сторінки. 1526 01:11:16,690 --> 01:11:19,060 І це просто говорить браузер, ви знаєте, що? 1527 01:11:19,060 --> 01:11:22,589 Зробіть ширину цієї сторінки ефективно рівній ширині пристрою. 1528 01:11:22,589 --> 01:11:25,380 Іншими словами, вони передбачають, що у вас є те необмежений простір. 1529 01:11:25,380 --> 01:11:29,920 Припустимо, у вас є тільки стільки, скільки простір як сам пристрій є великим. 1530 01:11:29,920 --> 01:11:34,454 І ось тепер, якщо я перезавантажити цей в моєму браузері, я не бачу ніяких змін. 1531 01:11:34,454 --> 01:11:37,370 Але якби я зробив це correctly-- і дайте мені хрест мій fingers--, якщо ви все 1532 01:11:37,370 --> 01:11:42,920 перезавантажити ваш телефон, не так побачити переконливі зміни? 1533 01:11:42,920 --> 01:11:43,620 Так, це that-- 1534 01:11:43,620 --> 01:11:45,067 >> ГЛЯДАЧІ: [нерозбірливо] 1535 01:11:45,067 --> 01:11:45,900 DAVID J. Малан: Так. 1536 01:11:45,900 --> 01:11:46,400 ДОБРЕ. 1537 01:11:46,400 --> 01:11:47,850 Так що, можливо, більш зручним для читання зараз? 1538 01:11:47,850 --> 01:11:53,070 Ще маленький, щоб бути справедливим, але не настільки малі, щоб бути некерованим. 1539 01:11:53,070 --> 01:11:56,920 І я, безумовно, може перевизначити далі за допомогою CSS або на стороні сервера, 1540 01:11:56,920 --> 01:12:00,120 але все більше і більше, що ви бачачи, як все більше і більше можливостей 1541 01:12:00,120 --> 01:12:02,900 додається до на стороні клієнта environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, як ми обговоримо завтра, CSS, і так HTML-- 1543 01:12:06,530 --> 01:12:09,190 що всі ці запити може бути зроблено на клієнті 1544 01:12:09,190 --> 01:12:11,910 так, щоб турбувати сервер набагато менше і не 1545 01:12:11,910 --> 01:12:14,530 щоб йти в ногу з, для Наприклад, постійна натиск 1546 01:12:14,530 --> 01:12:17,210 новій операційній системі версії, нові версії браузерів. 1547 01:12:17,210 --> 01:12:20,190 Ви можете просто дозволити браузеру запитаєте пристрою, наскільки велика ви, 1548 01:12:20,190 --> 01:12:22,890 а потім зробити кілька логічно рішення, засновані на цьому. 1549 01:12:22,890 --> 01:12:25,140 Але ми побачимо більше можливостей для логічних рішень 1550 01:12:25,140 --> 01:12:27,223 завтра в контексті мови програмування. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> Таким чином, будь-які питання, то, на веб-розробки? 1553 01:12:32,760 --> 01:12:36,130 Сьогодні не веб-програмування, за се, так як більшість все, що ми зробили 1554 01:12:36,130 --> 01:12:38,370 був дуже естетично, якщо ви будете. 1555 01:12:38,370 --> 01:12:41,750 Там немає прийняття рішень в код, який ми написали, 1556 01:12:41,750 --> 01:12:44,990 і саме тому HTML є розмітки мова, а не мова програмування. 1557 01:12:44,990 --> 01:12:47,140 Але завтра ми візьмемо швидкий погляд, в кінцевому рахунку, 1558 01:12:47,140 --> 01:12:49,340 на JavaScript, який є фактичне програмування 1559 01:12:49,340 --> 01:12:54,220 мова, яка дозволяє нам зробити трохи більше. 1560 01:12:54,220 --> 01:12:56,800 >> Які-небудь питання? 1561 01:12:56,800 --> 01:13:00,480 Що ж, дозвольте мені запропонувати два Можливості необов'язкові для виконання домашніх завдань. 1562 01:13:00,480 --> 01:13:02,900 Один з цих is-- Cloud9 рахунки не має терміну дії. 1563 01:13:02,900 --> 01:13:04,669 Ви можете використовувати їх підправляти. 1564 01:13:04,669 --> 01:13:05,960 Це вільний рівень сервісу. 1565 01:13:05,960 --> 01:13:08,754 Розуміють, що, якщо при створенні ваш робочий простір, ви зробили це публічно, 1566 01:13:08,754 --> 01:13:11,670 що означає, що будь-хто на Інтернет може побачити, що ви друкуєте. 1567 01:13:11,670 --> 01:13:15,104 Так що, може бути, просто розглянути НЕ ніяково себе 1568 01:13:15,104 --> 01:13:18,020 якщо ви кладете свій перший веб сторінка там публічно випадково, 1569 01:13:18,020 --> 01:13:20,134 але ніхто не збирається знати, щоб шукати там в будь-якому випадку. 1570 01:13:20,134 --> 01:13:23,760 >> І two-- дозвольте мені кинути до цього URL, а також, 1571 01:13:23,760 --> 01:13:28,250 особливо якщо ви прийшли в сьогодні трохи менш комфортно, ніж інші, 1572 01:13:28,250 --> 01:13:30,430 не знаючи, що означає, що всі ці речі. 1573 01:13:30,430 --> 01:13:36,780 Усвідомте, що набагато більше цього відео, який є одночасно гарним способом, щоб заснути 1574 01:13:36,780 --> 01:13:39,380 а також сміятися час Роблячи таким чином, також має 1575 01:13:39,380 --> 01:13:44,300 багато societally цікаво і безпеки, відповідні обговорення 1576 01:13:44,300 --> 01:13:47,370 в ньому від Джона Олівера, хоча і комік. 1577 01:13:47,370 --> 01:13:55,456 >> Але якщо немає питань, то що призводить нас до прийому. 1578 01:13:55,456 --> 01:13:56,830 Так чому ж я не включаємо музику. 1579 01:13:56,830 --> 01:13:58,610 Там повинно бути напої і закуски зовні. 1580 01:13:58,610 --> 01:14:00,220 Я радий, щоб змішатися з Поки люди хотіли б, 1581 01:14:00,220 --> 01:14:01,600 відповісти на питання, ще один-на-один. 1582 01:14:01,600 --> 01:14:03,330 Але, в іншому випадку, ви завжди можете щоб зняти в будь-який момент, 1583 01:14:03,330 --> 01:14:05,740 і ми побачимося завтра вранці для трохи більше. 1584 01:14:05,740 --> 01:14:07,290 Добре, спасибі. 1585 01:14:07,290 --> 01:14:10,428