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