Практическое руководство по созданию современных Web-сайтов, соответствующих концепции Web 2.0. Описаны языки HTML 5 и CSS 3, применяемые, соответственно, для создания содержимого и представления Web-страниц. Даны принципы Web-программирования на языке JavaScript с использованием библиотеки Ext Core. Рассказано о создании интерактивных Web-страниц, приведены примеры интерактивных элементов, позволяющие сделать Web-страницы удобнее для посетителя. Раскрыты вопросы реализации подгружаемого и генерируемого содержимого, семантической разметки, применения баз данных для формирования Web-страниц. Показаны способы расширения функциональности Web-сайтов с использованием Web-форм, элементов управления, свободно позиционируемых эле- ментов и программного рисования средствами HTML 5.
Содержание:
Введение 1
ЧАСТЬ 1. Содержимое Web-страниц. Язык HTML 5 2
ЧАСТЬ 2. - Представление Web-страниц. Каскадные таблицы стилей CSS 3 19
ЧАСТЬ 3. Поведение Web-страниц. Web-сценарии 39
ЧАСТЬ 4. Подгружаемое и генерируемое содержимое. Семантическая разметка 60
ЧАСТЬ 5. Последние штрихи 67
Заключение 84
ПРИЛОЖЕНИЕ - Расширения CSS 84
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-дизайнеры должны заботиться о доступности страниц.
- Web-страницы следует делать как можно более компактными. Чем компактнее файл, тем быстрее он загружается по сети - это аксиома.
- Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вы- вод.
- Web-страницы не должны требовать для отображения никакого дополнительно- го программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.
Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со- временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org.
Рис. 1.1. Главная Web-страница Web-сайта организации W3C
Что же мы здесь видим?
- Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.
- Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.
- Структура Web-страниц исключительно ясна - мы можем без проблем найти все, что нужно. Слева находится набор гиперссылок, ведущих на другие Web- страницы Web-сайта, посередине - список новостей и гиперссылки на избранные статьи, справа - гиперссылки на дополнительные материалы.
- Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.
- Есть даже видеоролик!
- Web-страница быстро загружается и мгновенно выводится на экран.
- Web-страница ничего не требует для своего вывода, кроме Web-обозревателя. Налицо и соблюдение стандартов, и наполнение, и доступность. Три из трех!
Именно такие Web-страницы мы и будем учиться создавать в данной книге.
Концепция Web 2.0
Давайте еще раз обратимся к рассмотренным ранее правилам и немного расширим их.
- При создании Web-страниц следует придерживаться современных интернет-стандартов. При этом нужно полностью отказаться от устаревших и закрытых интернет-технологий, как не укладывающихся в современную парадигму Web- дизайна и зачастую не поддерживаемых всеми Web-обозревателями.
- Особое внимание нужно обратить на структуру и наполнение Web-страниц. Структура Web-страниц должна быть максимально простой, а наполнение - достаточно богатым, чтобы посетитель быстро нашел нужную ему информацию. Кроме того, необходимо создавать Web-страницы так, чтобы дизайн не мешал восприятию информации.
- Web-страницы обязательно следует делать максимально доступными на любых устройствах. Web-страницы должны быстро загружаться и выводиться на экран. Также Web-страницы не должны требовать для отображения никакого дополнительного программного обеспечения.
Фактически здесь мы привели постулаты так называемой концепции Web 2.0. Это список правил, которым должен удовлетворять любой Web-сайт, претендующий на звание современного. Образно выражаясь, это флаг, который совместно несут труженики Web-индустрии, шагая в ногу со временем.
Также концепция Web 2.0 предусматривает четыре принципа, являющиеся "перед- ним краем" Web-дизайна. Пока еще очень мало Web-сайтов им следует (и "домашний" Web-сайт W3C, увы, не исключение...). Рассмотрим их по порядку.
Принцип первый - разделение содержимого, представления и поведения Web- страницы. Здесь содержимое - это информация, которая выводится на Web- странице, представление описывает формат вывода этой информации, а поведение - реакцию Web-страницы или отдельных ее элементов на действия посетите- ля. Благодаря их разделению мы сможем править, скажем, содержимое, не затрагивая представление и поведение, или поручать создание содержимого, представления и поведения разным людям.
Принцип второй - подгружаемое содержимое. Вместо того чтобы обновлять всю Web-страницу в ответ на щелчок на гиперссылке, мы можем подгружать только ее часть, содержащую необходимую информацию. Это сильно уменьшит объем пере- даваемой по сети информации (сетевой трафик) и позволит выполнять какие-либо действия с данными после их подгрузки.
Принцип третий - генерируемое содержимое. Какая-то часть Web-страницы может не загружаться по сети, а генерироваться прямо на месте, в Web-обозревателе. Так мы еще сильнее сократим сетевой трафик.