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 Войти. 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, а не 1999. 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 Войти. 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