HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Владимир Дронов

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Введение

Мир Web-дизайна в очередной раз лихорадит. Шутка ли — новые интернет-технологии на подходе!

Что грядет нового в Web-дизайне

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

Все эти языки и технологии были созданы более десяти лет тому назад, и за последнее время в них мало что изменилось (а в языке HTML не изменилось вообще ничего). Так что за последние лет десять в Web-дизайне не было никаких революций — только небольшие эволюционные изменения.

Но уже готовятся новые стандарты, которые описывают очередные версии этих языков: HTML 5 и CSS 3. Они обещают принести в Web-дизайн много нового.

— Упрощенную вставку на Web-страницу аудио- и видеоматериалов.

— Возможности рисования на Web-страницах.

— Многоколоночную верстку текста.

— Поддержку работы в оффлайновом режиме (при отключении от Интернета).

— Дополнительную поддержку мобильных устройств.

— Поддержку специальных Web-обозревателей для лиц с ограниченными физическими возможностями.

— И, как водится, многое-многое другое.

Звучит заманчиво, но… Сейчас эти стандарты существуют только в виде "черновых" редакций, и когда выйдут "чистовые", окончательные, никто не знает.

Так отчего же разгорелся весь сыр-бор?

Разработчики Web-обозревателей, не дожидаясь, пока их коллеги, "сочиняющие" интернет-стандарты, завершат работу над HTML 5 и CSS 3, уже внедряют поддержку некоторых их возможностей в свои творения. Так, Mozilla Firefox, Opera, Google Chrome и Apple Safari уже поддерживают интернет-мультимедиа в стиле HTML 5, программное рисование на Web-страницах и работу в оффлайновом режиме. Пусть и не в полной мере, но все-таки поддерживают!

"Не в теме" пока еще Microsoft Windows Internet Explorer. Однако Microsoft уже довольно давно объявила о разработке новой версии своего Web-обозревателя под номером 9. И в плане поддержки всех "горячих" интернет-новинок грозит заткнуть за пояс всех конкурентов. Что ж, у автора есть причины верить: даже предварительная версия Internet Explorer 9, совсем-совсем "сырая", на момент написания этой книги выглядит очень даже неплохо.

Но даже возможности действующих на сегодняшний день версий HTML и CSS на деле используются не в полной мере:

— подгружаемое содержимое — загрузка части содержимого вместо целой Web-страницы — практически не применяется;

— генерируемое содержимое — программное создание части содержимого Web-страницы после ее загрузки — применяется мало;

— разделение содержимого, представления и поведения Web-страниц также почти не реализуется.

А ведь все это способно значительно упростить труд Web-дизайнера и заметно улучшить вид и удобство использования Web-сайтов. Вот такие они Web- дизайнеры, не ведают своей выгоды…

О чем эта книга

В книге описываются:

— Язык HTML и принципы создания содержимого Web-страниц.

— Язык CSS и принципы создания представления Web-страниц.

— Возможности HTML 5 и CSS 3, уже поддерживаемые современными Web-обозревателями.

— Основы Web-программирования, язык JavaScript и принципы создания поведения Web-страниц.

— Библиотека Ext Core — инструмент, призванный упростить труд Web-программиста.

— Создание интерактивных Web-страниц с конкретными примерами.

— Реализация подгружаемого и генерируемого содержимого и семантической разметки данных средствами JavaScript.

— Использование специальных средств — Web-форм, элементов управления и свободных контейнеров — для обеспечения дополнительной функциональности Web-сайтов.

— Реализация программного рисования на Web-страницах средствами HTML 5.

В результате читатель создаст полнофункциональный Web-сайт — справочник по HTML и CSS. Конечно, это только пример — данные технологии можно применить и для разработки любого другого Web-сайта.

Какие программы используются в этой книге

Вопрос далеко не праздный, учитывая то, что за программы сегодня приходится платить… Так что же за программы использовал автор?

Только бесплатные!

— Блокнот — простейший текстовый редактор, стандартно поставляемый в составе Windows.

— Firefox версий 3.6.* — Web-обозреватель. Все примеры тестировались на нем.

— Opera 10.52 и Apple Safari 4.* — Web-обозреватели. На них автор тестировал некоторые примеры.

Другие программы автор в работе практически не применял.

Типографские соглашения

В этой книге часто приводятся форматы написания различных тегов HTML, атрибутов стилей CSS и выражений JavaScript. Нам необходимо запомнить типографские соглашения, используемые для их написания.

ВНИМАНИЕ!

Все эти типографские соглашения автор применяет только в форматах написания тегов HTML, атрибутов стилей CSS и выражений JavaScript. В коде примеров они не имеют смысла.

В угловые скобки (<>) заключены названия значений атрибутов, параметров или фрагментов кода, которые, в свою очередь, набраны курсивом. В код реального Web-сценария, разумеется, нужно подставить реальное значение, конкретный параметр или код.

Пример:

<MAP NAME="<имя карты>">

</MAP>

Здесь вместо подстроки <имя карты> нужно подставить конкретное имя карты. Пример:

<FORM>

<теги, формирующие элементы управления>

</FORM>

Здесь вместо подстроки <теги, формирующие элементы управления> следует подставить реальные HTML-теги, формирующие элементы управления.

В квадратные скобки ([]) заключены необязательные фрагменты кода:

<LEGEND [ACCESSKEY="<быстрая клавиша>"]><текст заголовка></LEGEND>

Здесь атрибут тега ACCESSKEY может присутствовать, а может и отсутствовать. Символом вертикальной черты (|) разделены фрагменты кода, из которых в данном месте должен присутствовать только один:

SHAPE="rect|circle|poly"

Здесь в качестве значения атрибута тега SHAPE должна присутствовать только одна из доступных строк: rect, circle или poly.

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

Пример:

var s = "<LI><CODE><A HREF=\"" + aDataBase[i].url + "\">" + aDataBase[i].name + "</A></CODE></LI>";

Приведенный код разбит на две строки, но должен быть набран в одну. Знаки переноса при этом нужно удалить.

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

Автор приносит благодарности своим родителям, знакомым и коллегам по работе.

Губиной Наталье Анатольевне, начальнику отдела АСУ Волжского гуманитарного института (г. Волжский Волгоградской обл.), где работает автор, — за понимание и поддержку.

Всем работникам отдела АСУ Волжского гуманитарного института — за понимание и поддержку.

Родителям — за терпение, понимание и поддержку. Архангельскому Дмитрию Борисовичу — за дружеское участие.

Шапошникову Игорю Владимировичу — за содействие.

Рыбакову Евгению Евгеньевичу, заместителю главного редактора издательства "БХВ-Петербург", — за неоднократные побуждения к работе, без которых автор давно бы обленился.

Издательству " БХВ-Петербург" — за издание моих книг.

Разработчикам Web-обозревателей Firefox, Opera, Chrome и Safari и библиотеки Ext Core, если они меня слышат, — за замечательные программные продукты.

Всем своим читателям и почитателям — за прекрасные отзывы о моих книгах. Всем, кого я забыл здесь перечислить, — за все хорошее.

Часть 1

Содержимое Web-страниц. Язык HTML 5

Глава 1

Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц

Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница — все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы начнется данная книга. Далее мы немного поговорим о принципах функционирования Интернета, Web-страницах и Web-сайтах, создадим нашу первую Web-страницу, начнем изучать язык HTML 5 и подберем программы, которые будем использовать в работе. Так сказать, с места в карьер…

Современный Web-дизайн. Концепция Web 2.0

Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра — кто знает; может быть, мы будем выходить на Web-сайты с утюга или пылесоса…

"Я буду везде, — заявляет Интернет. — Я стану вездесущим. Все готовьтесь к моему приходу!"

Что требуется от современного Web-сайта

Будем готовиться… Но что нам, как будущим Web-дизайнерам, для этого следует сделать? Соблюсти три несложных правила.

1. Строго соблюдать все интернет-стандарты.

2. Тщательно продумать наполнение Web-страниц.

3. Позаботиться о доступности Web-страниц.

Рассмотрим их подробнее.

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

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

Из этого следует первое правило из перечисленных ранее — Web-дизайнеры при создании Web-страниц обязаны строго придерживаться современных интернет-стандартов, чтобы их творения одинаково (ну, или почти одинаково) отображались на всех устройствах.

Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье — не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.

Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org. Все опубликованные там стандарты обязательны к применению.

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

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

Отсюда вытекает второе правило — Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.

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

— Web-страницы должны легко читаться и не "резать" глаза.

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

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

— Одним словом — все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)

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

Вот и третье правило — Web-дизайнеры должны заботиться о доступности страниц.