автордың кітабын онлайн тегін оқу HTML5 и CSS3. Веб-разработка по стандартам нового поколения
Б. Хоган

Үзіндіні оқу

Кітап туралы Пікірлер1 Дәйексөздер235 Қазір оқып жатыр2.8K Сөрелерде Тегін фрагмент

Б. Хоган

HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд.

Научный редактор Е. Матвеев

Переводчик Е. Матвеев

Технический редактор Е. Милюкова

Литературный редактор Е. Матвеев

Художники Л. Адуевская, Л. Родионова

Корректор В. Листова

Верстка Л. Родионова

Б. Хоган

HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд.. — СПб.: Питер, 2014.

ISBN 978-5-496-00979-9

Благодарности

Работа над вторым изданием обычно занимает немного времени — автор исправляет ошибки или вносит усовершенствования и обновления в первое издание. Но на этот раз все выглядело так, словно я написал новую книгу, и я хочу поблагодарить многих людей, существенно упростивших мою работу.

Прежде всего я хочу поблагодарить вас за то, что вы читаете эту книгу. Надеюсь, она поможет вам взяться за собственные интересные и впечатляющие проекты.

Замечательный коллектив издательства «The Pragmatic Bookshelf» заслуживает не только моей благодарности — он внес значительный вклад в создание книги. Сюзанна Пфальцер (Susannah Pfalzer) снова проследила за тем, чтобы мои тексты выглядели осмысленно. Она замечательный редактор, и я благодарен ей за потраченное время и внимание к деталям – особенно в такой книге (с тысячами мелких деталей, требующих внимания). Дэйв Томас (Dave Thomas) и Энди Хант (Andy Hunt) делились своим мнением, и я благодарен им за неустанную поддержку. Спасибо вам!

Мне повезло еще и в том, что над книгой работала совершенно потрясающая группа технических рецензентов. Комментарии и обратная связь были превосходными, исчерпывающими и полными полезных советов по улучшению материала. Спасибо всем, кто мне помогал: Шайен Кларк (Cheyenne Clark), Джоэл Клермон (Joel Clermont), Джон Кули (Jon Cooley), Чед Думлер-Монплезир (Chad Dumler-Montplaisir), Джефф Холланд (Jeff Holland), Майкл Хантер (Michael Hunter), Кэролайн Клевер (Karoline Klever), Стивен Орр (Stephen Orr), Дэн Риди (Dan Reedy), Лорен Сэндс-Рэмшоу (Loren Sands-Ramshaw), Брайан Шо (Brian Schau), Мэтью Джон Сайас (Matthew John Sias), Тибор Симик (Tibor Simic), Чарли Стрэн (Charley Stran) и Колин Йейтс (Colin Yates). Ваши рецензии не только были подробными, но содержали замечательные советы и наблюдения, существенно повлиявшие на окончательную версию этой книги.

Спасибо Джессике Янюк (Jessica Janiuk) за предоставленные снимки экранов для устройств Android. Я также хочу поблагодарить своих деловых партнеров — Криса Уоррена (Chris Warren), Криса Джонсона (Chris Johnson), Майка Уэбера (Mike Weber), Ника ЛаМуро (Nick LaMuro), Остена Отта (Austen Ott), Эрика Тески (Erich Tesky), Кевина Гизи (Kevin Gisi) и Джона Кинни (Jon Kinney) — за их постоянную поддержку.

Наконец, моя жена Карисса изо всех сил следила за тем, чтобы я работал изо всех сил. Она — мой безмолвный соавтор, и я вечно благодарен ей за любовь и поддержку. Спасибо тебе, Карисса, за все, что ты для меня делаешь.

Предисловие

Для веб-разработчика три месяца в веб-программировании — все равно что год реального времени. А это означает, что с выхода предыдущего издания этой книги прошло 12 веб-лет.

Мы, веб-разработчики, постоянно слышим о чем-то новом. Еще несколько лет назад HTML5 и CSS3 казались делом будущего, но уже сегодня компании используют эти технологии в своей работе, потому что браузеры (Chrome, Safari, Firefox, Opera и Internet Explorer) начали реализовывать отдельные части этой спецификации.

Технологии HTML5 и CSS3 закладывают основу для мощных, интерактивных веб-приложений. Сайты, созданные с применением этих технологий, более просты в разработке и сопровождении и более удобны для пользователей. В HTML5 появились новые элементы для определения структуры сайта и встроенного контента, которые избавляют нас от необходимости использовать дополнительные атрибуты, разметку или плагины. CSS3 предоставляет расширенные селекторы, графические усовершенствования и улучшенную поддержку работы со шрифтами, которые позволят нам сделать наши сайты более привлекательными без применения графической замены шрифтов, сложного кода JavaScript и графических инструментов. Динамические клиентские приложения JavaScript станут более доступными для людей с ограниченными возможностями, а поддержка автономной работы позволит строить приложения, не нуждающиеся в подключении к Интернету.

В этой книге вы узнаете о том, как использовать HTML5 и CSS3 прямо сейчас, несмотря на то что браузеры ваших пользователей еще не поддерживают всех возможностей. Но сначала мы немного поговорим о HTML5 и некоторых модных словечках.

HTML5: платформа и спецификация

HTML5 — спецификация, описывающая некоторые новые теги и разметку, а также ряд замечательных JavaScript API, но она попала в вихрь рекламной шумихи и обещаний. К сожалению, стандарт HTML5 развился до платформы HTML5, что создало невероятную путаницу среди разработчиков и клиентов. В некоторых случаях фрагменты спецификации CSS3 (например, тени, градиентные заливки и трансформации) называются «HTML». Создатели браузеров стараются превзойти друг друга в степени поддержки «HTML5» их продуктами. Заказчики начинают выдвигать странные требования: «Мой сайт должен быть написан на HTML5».

В основной части этой книги мы сосредоточимся на спецификациях HTML5 и CSS3 и на использовании описанных в них методов в основных браузерах. В завершающей части книги рассматривается группа сопутствующих спецификаций, которые прямо сейчас используются на разных платформах. К их числу относятся спецификации Geolocation и Web Sockets. Хотя формально эти технологии не относятся к HTML5, в сочетании с HTML5 и CSS3 они позволяют добиться потрясающего эффекта.

Как это делается

Каждая глава книги посвящена конкретной группе задач, которые могут решаться с использованием HTML5 и CSS3. В каждой главе приводится сводка и таблица с перечислением тегов, возможностей и концепций, рассмотренных в этой главе. Основной материал каждой главы состоит из разделов, в которых излагается некоторая концепция, после чего рассматривается процесс построения простого примера с использованием этой концепции. Главы книги группируются по темам. Вместо деления книги на части по технологиям (HTML5 и CSS3), нам показалось более разумным сгруппировать материал в соответствии с решаемыми задачами. В книге есть несколько отдельных глав, посвященных исключительно CSS3, но материал, посвященный CSS3, встречается и в других главах.

Во многих разделах присутствует подраздел «Обходное решение», в котором рассказано, что делать, если браузер пользователя еще не поддерживает необходимые функции. Работоспособность обходных решений обеспечивается разными средствами, от сторонних библиотек до наших собственных решений на базе JavaScript и jQuery.

Каждая глава завершается разделом «Перспективы», в нем обсуждается возможность применения концепции по мере ее более широкого распространения.

Книга открывается кратким обзором HTML5 и CSS3. Мы рассмотрим несколько новых структурных тегов, используемых для описания содержимого страницы. Затем мы поработаем с формами; вам представится возможность воспользоваться новыми полями и возможностями форм — такими, как автофокус и заполняющий текст. Далее мы немного поэкспериментируем с новыми селекторами CSS3, и вы узнаете, как применять стили к элементам без включения в контент дополнительной разметки.

Затем мы займемся поддержкой аудио и видео в HTML5 и использованием холста (canvas) для рисования геометрических фигур. Кроме того, в этой части рассматривается работа с тенями, градиентами и трансформациями CSS3, а также операции со шрифтами, переходами и анимациями.

Далее будут представлены клиентские средства HTML5 — Web Storage, IndexedDB и режим автономной работы для построения приложений, работающих на стороне клиента. Мы используем Web Sockets для построения простого чата, и вы увидите, как в HTML5 обеспечивается передача отправки сообщений и данных между доменами. Также вам представится возможность поэкспериментировать с Geolocation API и историей просмотра.

Основное внимание в книге уделяется тому, что можно использовать уже сегодня в современных браузерах. Некоторые возможности HTML5 и CSS3 еще не получили широкого распространения, но выглядят достаточно перспективно. Они более подробно описаны в главе 11.

В приложении А перечислены всех возможности HTML5, представленные в книге, с указанием глав, в которых эти возможности описаны более подробно. В книге широко используется технология jQuery, поэтому в приложении Б приводится краткий вводный курс. Также в небольшом приложении В объясняются особенности кодирования аудио- и видеофайлов для использования с HTML5.

Списки совместимости

В начале каждой главы приводится список возможностей HTML, рассматриваемых в этой главе. В этих списках поддержка браузеров обозначается сокращенным названием браузера и минимальным номером версии в квадратных скобках. Используются следующие сокращения C: Google Chrome, F: Firefox, IE: Internet Explorer, O: Opera, S: Safari, IOS: устройства iOS с Safari, A: Android Browser.

Что в книге не рассматривается

Мы не будем рассматривать версии Internet Explorer, предшествующие Internet Explorer 8. Компания Microsoft активно отваживает пользователей от этих старых браузеров.

Также мы не будем рассматривать все без исключения аспекты HTML5 и CSS3. О некоторых вещах говорить просто бессмысленно, потому что их реализации изменились или еще не имеют практического применения. Например, сетчатые макеты CSS выглядят заманчиво1, но на них не стоит тратить время, пока все браузеры не выйдут на один уровень. В этой книге я постарался показать, как использовать средства HTML5 и CSS прямо сейчас и с расчетом на самую широкую аудиторию.

Так как в книге отсутствует базовый материал по HTML и CSS, она написана, прежде всего, для веб-разработчиков с хорошим знанием HTML и CSS. Новичкам я бы порекомендовал сначала прочитать книгу Джона Дакетта HTML and CSS: Design and Build Websites [Duc11], в ней хорошо излагаются основы. Также стоит обратить внимание на книгу Джеффри Зельдмана Designing with Web Standards [Zel09].

Также предполагается, что читатель хотя бы в общих чертах разбирается в JavaScript и jQuery2 (последняя технология будет использована для реализации многих обходных решений). Все основные методы jQuery, используемые в книге, рассматриваются в приложении Б, но читатель также может обратиться к другим источникам информации — например, к книге Кристофа Портнева Pragmatic Guide to JavaScript [Por10], содержащей более подробную справочную информацию о JavaScript. В последней части книги JavaScript используется довольно интенсивно, но я уверен, что вы справитесь.

Изменения во втором издании

Второе издание книги содержит обновленный материал; из него исключено все, что относилось непосредственно к Internet Explorer 7 и ниже. В ней представлена более подробная информация о средствах доступности HTML5, более надежные и проверенные обходные решения, а также девять новых рецептов:

• Рецепт 2, «Вывод информации о ходе выполнения операции с использованием элемента <meter>».

• Рецепт 4, «Применение списков описаний для определения FAQ».

• Рецепт 8, «Проверка пользовательского ввода без использования JavaScript».

• Рецепт 16, «Улучшение доступности таблиц».

• Рецепт 19, «Создание векторной графики SVG».

• Рецепт 22, «Доступность видео».

• Рецепт 26, «Переходы и анимации».

• Рецепт 28, «Хранение информации в базе данных на стороне клиента с использованием IndexedDB».

• Рецепт 34, «Перетаскивание».

Также в главе 11 мы рассмотрим модель CSS Flexible Box, междоменный доступ к ресурсам, фоновые вычисления (web workers), отправка событий серверами и эффекты фильтров CSS.

Помимо нового материала, в другие рецепты при необходимости были включены новые обходные решения. В архиве примеров кода вы найдете удобный веб-сервер на базе Node.js, который упростит тестирование всех проектов в разных браузерах.

Как читать книгу

Не думайте, будто вы обязаны прочитать книгу «от корки до корки». Материал разбит на доступные разделы, сосредоточенные на одной или двух базовых концепциях. В каждой главе представлено несколько проектов. Загрузив архив примеров кода с сайта книги3, вы найдете в нем папку template/, которая станет хорошей отправной точкой для экспериментов.

В книге встречаются примеры кода следующего вида:

html5_new_tags/index.html

Метка над кодом показывает, где можно найти файл в коде примеров.

Наконец, разбирайте код, приведенный в книге, и не бойтесь экспериментировать с готовыми примерами. А теперь давайте выясним более конкретно, что же понадобится для работы с примерами.

Что вам понадобится

Для тестирования кода, приведенного в книге, потребуется браузер Firefox 20 и выше, Chrome 20 и выше, Opera 10.6 или Safari 6. А еще лучше иметь все эти браузеры, потому что каждый из них несколько отличается в нюансах от других. Устройство на базе Android или iOS тоже пригодится, но не является обязательным.

Тестирование в Internet Explorer

Также вам понадобится возможность тестирования сайтов в Internet Explorer 8 и выше для проверки работоспособности обходных решений. Проще всего эта задача решается установкой Microsoft Windows в VirtualBox4 для тестирования. Компания Microsoft предоставляет бесплатные виртуальные машины для тестирования веб-приложений на сайте Modern.IE, где можно загрузить готовые образы для VirtualBox, Parallels или VMWare5. Эти машины работают тридцать дней, после чего их придется загружать заново.

Node.js и сервер примеров

Для тестирования некоторых возможностей в книге необходимо, чтобы файлы HTML и CSS поставлялись с веб-сервера, а тестирование других требует более сложной служебной части. В архиве примеров кода вы найдете сервер, который упрощает работу с примерами. Для запуска этого сервера необходимо установить Node.js по инструкциям, размещенным на сайте Node.js6. Для предотвращения периодических сбоев сервера следует установить версию не ниже 0.10.0.

Также вам понадобится программа командной строки npm (Node Packaged Modules) для установки зависимостей. Эта программа устанавливается в составе установки Node.js.

После установки Node.js посетите сайт книги и загрузите примеры кода. Распакуйте архив, перейдите к местонахождению распакованных файлов в терминале (или окне командной строки, если вы работаете в Windows) и выполните следующую команду (естественно, без $) для загрузки всех зависимостей:

$ npm install

Затем введите следующую команду (также без $):

$ node server

Команда запускает сервер на порте 8000. Загрузите в браузере страницу http://localhost:8000 и просмотрите примеры. Если тестирование осуществляется на виртуальных машинах, ваши машины должны быть способны установить связь с фактическим IP-адресом компьютера, на котором работает сервер примеров. А самое замечательное, что все папки и файлы, находящиеся в одной папке с файлом сервера, будут автоматически предоставляться им, так что вы сможете работать с материалом книги, перемещаясь по папкам примеров.

Пара слов об использовании JavaScript и jQuery

В этой книге широко используется JavaScript. В прошлом файлы JavaScript часто загружались в секции <head> страницы, после чего различными средствами (такими, как метод jQuery document.ready()) приложение ожидало, пока модель DOM (Document Object Model) станет доступной для изменения. Однако сейчас рекомендуется загружать все сценарии в нижней части страницы, так как это улучшает быстродействие. Мы так и будем поступать. Все сценарии, включая jQuery, будут загружаться в конце страницы — за исключением немногочисленных ситуаций, в которых необходимо изменять DOM до загрузки всех элементов.

Кроме того, мы будем использовать jQuery там, где это разумно. Если нам потребуется просто найти элемент по идентификатору, мы воспользуемся document.getElementById(), но для обработки событий или более сложных манипуляций с DOM, которые должны работать в Internet Explorer 8, будет применяться jQuery.

Другими словами, мы будем «выбирать инструмент под конкретную задачу». Возможно, в отдельных случаях это будет выглядеть немного непоследовательно, но это неизбежно, когда мы начинаем вводить обходные решения для сохранения работоспособности приложения в старых браузерах. А я непременно объясню причины для выбора того или иного решения.

Сетевые ресурсы

На сайте книги7 размещены ссылки на форумы, списки опечаток и ссылка на исходный код всех примеров.

Если вы обнаружили ошибку, пожалуйста, сообщите о ней на соответствующей странице, чтобы мы могли решить проблему. Если вы используете электронную версию книги, в нижнем колонтитуле страницы имеются ссылки для удобной отправки сообщений об ошибках.

Наконец, обязательно посетите блог этой книги8. В нем будут публиковаться сопутствующие материалы, обновления и рабочие примеры.

Готовы? Отлично! Наше знакомство с HTML5 и CSS3 начинается.

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу электронной почты comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

Глава 1. Обзор HTML5 и CSS3

HTML5 и CSS3 — не просто два новых стандарта, предложенных комитетом W3C (World Wide Web Consortium) и его рабочими группами. Это следующее поколение ежедневно используемых технологий, созданное для того, чтобы вам было проще и удобнее строить современные веб-приложения. Прежде чем погружаться в подробности HTML5 и CSS3, давайте немного поговорим о преимуществах этих стандартов, а также о некоторых проблемах, с которыми мы столкнемся при использовании этих технологий.

1.1. Платформа веб-разработки

Многие новые возможности HTML направлены на совершенствование платформы для построения веб-приложений. HTML5 предоставляет в распоряжение разработчика много новых инструментов для улучшения пользовательского интерфейса, от более содержательных тегов и улучшенных средств межсайтовых и межоконных коммуникаций до анимации и улучшенной мультимедийной поддержки.

Обратная совместимость

Одна из самых веских причин для немедленного перехода на HTML5 заключается в том, что разметка работает в большинстве существующих браузеров. Вы можете начать использовать HTML5 прямо сейчас, даже в Internet Explorer 6, и постепенно перерабатывать свою разметку. Она даже будет проходить валидацию W3C (условно, конечно, потому что стандарты продолжают развиваться).

Каждый, кто когда-либо работал с HTML или XML, уже сталкивался с объявлением doctype. Оно сообщает программам валидации и редакторам, какие теги и атрибуты будут использоваться в документе и как должен быть сформирован документ. Объявление doctype также используется многими браузерами для определения того, как браузер должен воспроизводить страницу. Действительное объявление doctype обычно заставляет браузер воспроизводить страницу в «режиме соответствия стандартам».

По сравнению с довольно пространным объявлением XHTML 1.0 Transitional, используемым на многих сайтах:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

объявление doctype в HTML5 выглядит до смешного просто:

html5_why/index.html

<!DOCTYPE html>

Поместите его в начало документа — и с этого момента вы используете HTML5. Конечно, вы не сможете использовать многие новые элементы HTML5, которые еще не поддерживаются целевыми браузерами, но документ будет проверяться на валидность как разметка HTML5.

Более содержательная разметка

В каждой версии HTML появляется новая разметка, но еще никогда не было столько дополнений, напрямую связанных с описанием контента. Элементы для определения заголовков, завершителей, навигационных областей, боковых панелей и статей рассматриваются в главе 2. Также вы узнаете о датчиках, индикаторах выполнения и возможностях разметки данных с применением пользовательских атрибутов.

Меньше хлама

Многие элементы HTML5 были упрощены, и для них были определены более разумные значения по умолчанию. Вы уже видели, насколько проще стал элемент doctype, но это далеко не единственный пример. Скажем, нас годами учили, что тег JavaScript <script> должен определяться следующим образом:

Но в HTML5 предполагается, что вы будете использовать JavaScript во всех тегах <script>, так что эти дополнительные атрибуты смело можно опустить.

Если вы хотите указать, что документ содержит символы UTF-8, достаточно воспользоваться тегом

вместо громоздкого и часто копируемого тега

content=text/html; charset=utf-8

http://www.w3.org/TR/css3-grid-layout/

http://www.jquery.com/

http://pragprog.com/titles/bhh52e/

http://virtualbox.org

http://modern.ie

http://nodejs.org

http://www.pragprog.com/titles/bhh52e/

http://www.beyondhtml5andcss3.com/

http://www.w3.org/TR/html-polyglot/

http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html

http://www.w3.org/TR/html5-diff/

http://validator.w3.org/

Часть 1. Усовершенствования пользовательского интерфейса

В начальных главах этой книги мы поговорим о том, как использовать возможности HTML5 и CSS3 для совершенствования интерфейсов, с которыми работают пользователи. Вы увидите, как создать улучшенные формы, как легко определять стилевое оформление таблиц и улучшить доступность страниц для использования с вспомогательными устройствами. Мы рассмотрим генерирование контента для удобной работы со стилевыми таблицами печати и возможности редактирования «на месте» с использованием атрибута contenteditable.

Глава 2. Новые структурные теги и атрибуты

Существует одно серьезное «заболевание», которому подвержены многие веб-разработчики нашего времени. Вокруг нас бушует эпидемия дивита — хронического синдрома, который заставляет людей упаковывать элементы в лишние теги <div> с идентификаторами banner, sidebar, article, footer и т.д. Заболевание в высшей степени заразное. Разработчики быстро подхватывают дивит друг от друга, а так как лишние теги <div> не видны невооруженным глазом, легкие случаи дивита могут оставаться незамеченными годами.

Типичное проявление дивита выглядит так:

<ul>

<li><a href="/products">Products</a></li>

…

</ul>

</div>

Здесь неупорядоченный список, уже являющийся блочным элементом, упакован в два тега div, которые также являются блочными элементами. Напомним, что блочные элементы всегда начинаются с новой строки, тогда как встроенные (inline) элементы не требуют разрыва строки, так что тег <div> оказывае

...