HTML5. Основы клиентской разработки

HTML5. Основы клиентской разработки

2-е издание, исправленное

Савельев А.О.
Алексеев А.А.

Национальный Открытый Университет “ИНТУИТ”
2016

2

HTML5. Основы клиентской разработки/ А.О. Савельев , А.А. Алексеев - М.: Национальный
Открытый Университет “ИНТУИТ”, 2016

Данный курс ориентирован на начинающих веб-разработчиков. Курс иллюстрирует основные
возможности HTML5 и неотъемлемых от него CSS3 и JavaScript, особое внимание уделено canvas-
составляющей и Microsoft WebMatrix, как инструменту разработки.
Основной направленностью курса является описание возможностей HTML5, детальное рассмотрение
которых будет невозможным без CSS и javascript. В связи с этим, курс содержит разделы по
соответствующим темам, достаточные для формирования цельного и структурированного понимания
HTML5.

(c) ООО “ИНТУИТ.РУ”, 2012-2016
(c) Савельев А.О., Алексеев А.А., 2012-2016

3

Предисловие

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

Все вышеперечисленное ускоряет разработку веб и SaaS решений (как одних из
наиболее востребованных и популярных), повышает их качество, отказоустойчивость и
юзабилити, как правило, путем совершенствования соответствующих инструментов
создания решений.

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

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

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

Первоочередной целью авторов является формирование четкого понимания роли
каждой из описываемых технологий веб - разработки, их взаимосвязи и
взаимовлияния. С учетом наличия легкодоступных материалов по основам HTML, CSS
и JavaScript, основное внимание будет уделено ключевым отличиям и преимуществам
последних версий указанных средств.

Центральным элементом курса выступает HTML5 и новшества, которые он привносит
в веб - разработку. “Ядром” практической части является инструментарий WebMatrix.

4

Концепция WEB 2.0

В данной лекции будут рассмотрены следующие вопросы: основы концепции Web 2.0:
что такое web 2.0; крах доткомов; отличия от web 1.0; концепция web 2.0. Особенности
проектирование современных веб-решений.

Часто, когда говорят о новом Интернет-проекте, продвигают сетевые услуги и сервисы,
либо выпускают инструментальное средство для создания Интернет-решений, говорят
о том, что объект обсуждения придерживается (использует, развивает, действует в
соответствии и т.п.) концепции web 2.0. Более того, иногда доводится слышать и о Web
3.0! Прежде чем в рамках настоящего курса мы перейдем к непосредственному
изучению средств создания веб-приложений, автором предлагается внести некоторую
ясность.

Что такое web 2.0

Впервые термин “Web 2.0” использовал американский издатель Тим О’Райли. С
опубликованной им 18 октября 2005 года статьи и началась самостоятельная жизнь
этого понятия.

В настоящее время существует достаточно много версий и определений того, чем
является web 2.0. Отметим также, что не все признают существование такого понятия
как “Web 2.0” (к примеру, к числу таких людей относится и Тим Бернерс-Ли, с чьим
мнением нельзя не считаться).

Согласно определению О’Райли, web 2.0 – это методика проектирования систем с
учетом сетевых взаимодействий, т.е. приложение становится лучше с возрастанием
числа его пользователей.

Таким образом, можно сказать, что web 2.0 не является каким-либо четким стандартом,
технологией, либо концепцией создания сайтов или их дизайна. Автор согласен с
точкой зрения, что сейчас web 2.0 – это скорее философия построения веб-приложений.

Чтобы внести ясность, предлагается разобраться с тем, что же было до web 2.0.

Крах доткомов

Примечание. Доткомом называют компанию, полностью специализирующуюся на
Интернет-коммерции.

Сегодня обязательное наличие веб-сайтов организаций, предоставление услуг и
обеспечение взаимодействий посредством глобальной сети является обыденной
вещью. Однако, в свое время, подобный подход казался (да в общем – то и являлся
тоже) настоящей революцией с точки зрения правил ведения бизнеса.

Начиная с 1995 года, в результате скачка стоимости акций Интернет-компаний, начал
формироваться так называемый экономический пузырь. Все это, в совокупности с

5

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

Впоследствии, после того как 10 марта 2000 года, пузырь лопнул, помимо очевидных
последствий в виде банкротства многих компаний, также сильно упал уровень доверия
к “технологическим чудесам”, которые предлагал Интернет-бизнес.

В статье Тима О’Райли говорится о том, что именно крах доткомов, а также компании,
его пережившие, позволяют говорить о существовании web 2.0. То есть, имеет место
мнение, что обанкротились именно компании, придерживающиеся стандартов web 1.0,
а именно, подхода, при котором компания-поставщик услуг определяет форму и
содержание контента, правила его предоставления (поставки конечному
пользователю). Иными словами, web 1.0 предполагал централизацию Интернета,
введение жестких, единых правил и ограничений предоставления услуг (занятно, что
сейчас на волне борьбы с пиратским контентом предлагается примерно то же самое).

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

Для наглядной иллюстрации приведем примеры, от которых отталкивался О’Райли:

Таблица 1.1.

Web 1.0
Web 2.0

Doubleclick
Google AdSense

Ofoto
Flickr

Akamai
BitTorrent

mp3.com
Napster

Britannica Online
Wikipedia

Персональные сайты
Блоги

Evite
upcoming.org и EVDB

Спекуляция доменными именами
Поисковая оптимизация

Оплата рекламы по количеству показов Оплата рекламы по количеству переходов
Извлечение данных из HTML
Веб-сервисы

Публикация
Соавторство

Системы управления контентом (CMS) Wiki
Каталоги (таксономия)
Теги (фолксономия)

Удержание пользователей
Синдикация контента

Много ли найдется активных пользователей Интернета, которые помнят компании,
указанные в первом столбце таблицы?

Концепция web 2.0

6

После достаточного количества вступительных слов, попробуем выделить основные
моменты концепции web 2.0.

В настоящее время web 2.0 является совокупностью ряда тенденций формирования
веб-среды:

Веб-платформа. Приложения должны быть доступны для использования
непосредственно через браузер. То есть не должно быть никаких избыточных
действий со стороны пользователя (подготовка аппаратно-программной части,
установка и т.д.), для использования приложения. Все необходимые средства и
функциональная часть, со стороны пользователя, не должны “выходить” за
пределы браузера.
Веб-сервисы. Подход, позволяющий одному веб - приложению использовать
возможности другого.
Mash-up. Возможность создания веб-сервисов путем интеграции нескольких
других сервисов.
Социализация (Коллективный интеллект). Одна из ключевых особенностей,
отличающих web 2.0 от web 1.0. Последний не предполагал взаимодействия
пользователей между собой. Веб-приложения web 2.0 зачастую являются просто
посредником для своих пользователей, самостоятельно создающих интересующий
их контент.
Теги. Использование различных тегов позволяет сортировать контент по его
содержанию, что упрощает поиск (переход) смежной либо информации
аналогичной направленности.

Это далеко не полный перечень тенденций, а лишь самые заметные из них, с точки
зрения автора, также выделяют: ajax, rss, дизайн.

Особенности проектирования современных веб-решений

Исходя из указанных выше тенденций web 2.0 можно сформулировать ряд принципов
построения веб-сайтов. Отметим, что речь идет как раз о сайтах “длинного хвоста”, в
случае если компания предоставляет веб-решение, направленное на определенную
узкоспециализированную задачу, критерии его успешности и популярности будут
иными.

Вехи проектирования сайта:

1. Ориентация на веб-серфинг. Пользователь нетерпелив, не мотивирован на чтение

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

2. Дружественный интерфейс. Пользователь разборчив, привык к простоте и

быстрым действиям. То есть, у пользователя не должно возникать вопросов, как
осуществить то, или иное действие (опубликовать пост, ответить на сообщение,
оценить товар и т.д.).

3. Однородность. Большинство решений (социальные сети, форумы, новостные

7

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

Кроме того, следует помнить, что:

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

Ключевые термины и определения

Дотком – компания, специализирующаяся на Интернет-коммерции.

Краткие итоги

Отметим еще раз, что единого определения, поясняющего термин Web 2.0 не
существует. Учитывая особенности “раскрутки” проектов и решений, буквально все
веб-решения носят гриф “Web 2.0”, который, как правило, сами создатели и
навешивают. В этом есть своего рода опасность, хотя, с точки зрения автора, не
критичная – как и в случае с доткомами, могут сформироваться завышенные ожидания,
которые впоследствии способны “бросить тень” на концепцию в целом.

Если говорить просто и коротко, то любое веб-решение, за создание контента которого
(или значительной его части) отвечают сами пользователи, может быть отнесено к web
2.0.

Список материалов для самостоятельного изучения

ссылка: http://oreilly.com/web2/archive/what-is-web-20.html
ссылка: http://shkolazhizni.ru/archive/0/n-3081
ссылка: http://www.computerra.ru/think/234100/
ссылка: http://indexpay.ru/indexpay.ru/elektronnye-dengi-i-internet-
kommertsiya/krakh-dotkomov-kak-eto-bylo.html
ссылка:
http://www.arbconsulting.ru/about/blog/marketing/2008/07/14/marketing_8.html
ссылка: http://www.computerra.ru/readitorial/394494/

8

Основы HTML. Особенности HTML5

Сущность гипертекста. Развитие стандартов HTML. Уровни HTML. Обзор HTML5.

Любая веб-страница, вне зависимости от контента, стиля оформления, баннеров и
прочих элементов внешнего вида, описывается обычным текстом. Практически любой
школьник знает, что “за” веб-страницей находится гипертекст, хотя далеко не каждый
может сказать, что же это значит.

Сущность гипертекста

Термин “гипертекст” ввел в оборот в 1965 году американец Тед Нельсон. Автор
термина понимал под ним “ветвящийся текст, выполняющий действия по запросу”.
Иначе говоря, текст, содержащий ссылки на другие фрагменты, структурированный
как система возможных переходов является гипертекстом.

При этом, если следовать ссылкам и переходам можно получить линейную,
традиционную форму представления текстов.

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

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

Гипертекст позволяет представить в явной форме сеть фрагментов или тезисов.
Соответственно, благодаря структуризации значительно повышается эффективность
процедур поиска определенной информации.

Если обратиться к истории возникновения гипертекста, то общепринятой точкой
отсчета является статья Ванневара Буша “As We May Think” опубликованная в 1945
году. В статье было представлено устройство машины Memex, хранящей на
микрофильмах информацию (книги, корреспонденцию и т.п.). Для поиска
необходимой информации предлагалось использование ассоциативных связей, что
фактически является прообразом гипертекстовых систем.

После появления, разработанных Тимом Бернерсом - Ли протокола передачи данных
HTTP, системы адресации URL и языка HTML, понятие гипертекста стало
неразрывно ассоциироваться с информационными технологиями в общем и глобальной
паутиной – в частности.

Развитие стандартов HTML

Определение HTML найти нетрудно, как правило, оно выглядит следующим образом:
это язык гипертекстовой разметки.

9

HTML, в своем первоначальном виде, был основан на языке SGML – Standart
Generalized Markup Language (стандартный обобщенный язык разметки).

Основной идеей SGML было создание языка разметки документов не привязанного к
определенной аппаратно - программной платформе. Основной принцип SGML –
внедрение в текст управляющих конструкций, которые разделяли элементы структуры,
но не содержали информации о том, как эти структуры должны отображаться. В
отдельный файл выносилась структура, отвечающая за оформление (лист стилей).
Таким образом, одна и та же, с точки зрения содержания, информация могла быть
представлена в различных видах.

Также отдельно от существующего текста выносился DTD - файл, определяющий тип
документа, для гарантии его обработки.

В 1969 году был создан язык, удовлетворяющий описанным выше правилам – GML
(Generalized Markup Language). После того, как в 1989 году язык был принят
международной организацией по стандартизации (ISO) в качестве международного
стандарта, к названию языка добавилась начальная литера S.

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

Европейский институт физики элементарных частиц (CERN) в 1991 году приступил к
разработке первого текстового браузера, поддерживающего гипертекстовую разметку,
т.е. способного отображать графику и поддерживающего переходы по ссылкам.
Сотрудником института, ведущим данную работу был Тим Бернерс-Ли. В процессе
разработки появился язык HTML, во многом схожий с SGML, за исключением
структур, позволяющих отображать текст особенным образом (отступы, выделение и
т.п.).

Чтобы не повторять многочисленные источники, приведем лишь пару ключевых дат в
дальнейшей истории развития HTML: в 1993 году был создан первый браузер с
графическим интерфейсом; в 1994 году был основан консорциум W3C.

Если же кратко пробежаться по датам, то получим следующее:

22 декабря 1995 – принят стандарт HTML 2.

1996 – консорциумом W3C принята спецификация CSS1.

14 января 1996 – принят стандарт HTML 3.2.

18 декабря 1997 – принят стандарт HTML 4.0.

24 декабря 1999 – принят стандарт HTML 4.01.

1999 – принята спецификация CSS2.

26 января 2000 – принят стандарт XHTML 1.0.

10