HTML 5,CSS 3, and Web 2.0

Введение

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

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

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

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

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

Но уже готовятся новые стандарты, которые описывают очередные версии этих языков: HTML 5 и CSS 3. Они обещают принести в Web-дизайн много нового.Упрощенную вставку на Web-страницу аудио- и видеоматериалов.Возможности рисования на Web-страницах.Многоколоночную верстку текста.Поддержку работы в оффлайновом режиме (при отключении от Интернета).Дополнительную поддержку мобильных устройств.Поддержку специальных Web-обозревателей для лиц с ограниченными физическими возможностями

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

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

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

Разработчики Web-обозревателей, не дожидаясь, пока их коллеги, “сочиняющие” интернет-стандарты, завершат работу над HTML 5 и CSS 3, уже внедряют под-Основы Web-программирования, язык JavaScript и принципы создания поведения Web-страниц.Библиотека Ext Core — инструмент, призванный упростить труд Web-программиста.Создание интерактивных Web-страниц с конкретными примерами.

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

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

• современный 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-обозревателя.Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со-временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org.Что же мы здесь видим?Web-сайт создан с учетом всех современных интернет-стандартов.

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

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

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

Понятие о стилях CSS
Для создания представления Web-страниц предназначена технология каскадных таблиц стилей (Cascading Style Sheets, CSS), или просто таблиц стилей. Таблица стилей содержит набор правил (стилей), описывающих оформление самой Webстраницы и отдельных ее фрагментов.Эти правила определяют цвет текста и выравнивание абзаца, отступы между графическим изображением и

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

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

Селектор используется для привязки стиля к элементу Web-страницы, на который он должен распространять свое действие. Фактически селектор однозначно идентифицирует данный стиль.За селектором, через пробел, указывают список атрибутов стиля и их значений, заключенный в фигурные скобки.Атрибут стиля (не путать с атрибутом тега!) представляет один из параметров элемента Web-страницы: цвет шрифта, выравнивание текста, величину отступа, толщину рамки и др. Значение атрибута стиля указывают после него через сим- вол : (двоеточие). В некоторых случаях значение атрибута стиля заключают в кавычки.

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

Элемент выводится на экран в том месте, в котором находится определяющий его HTML-код. Так, контейнер cheader мы определили в самом начале HTMLкода Web-страницы index.htm, поэтому он будет выведен в самом ее начале, т. е. в верхней части.Если для элементов задано значение none атрибута стиля float (см. главу 10) или этот атрибут стиля вообще отсутствует, то элементы выстроятся друг за другом по вертикали. Пример: контейнеры cheader и cnavbar, для которых мы не указа- ли этот атрибут стиля. При других значениях атрибута стиля float элементы выстроятся по горизонта- ли. Пример: контейнеры cnavbar и cmain, для которых мы задали значение left атрибута стиля float.

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

Под свободно позиционируемый элемент на Web-странице место не выделяется.Свойства и методы объекта HTMLElement, применяемые для работы с элементами управления.Сначала мы рассмотрим самые полезные для нас свойства и методы объектов Webобозревателя, представляющих различные элементы управления. Запомним: это именно объекты Web-обозревателя, производные от объекта HTMLElement.Свойство disabled позволяет сделать элемент управления доступным или недоступным для посетителя. Значение true этого свойства делает элемент управления доступным, значение false — недоступным

Здесь мы с помощью метода getDom получаем экземпляр объекта HTMLElement, представляющий поле ввода почтового адреса email, и делаем его недоступным для ввода, присвоив свойству disabled значение false.Свойство readOnly позволяет сделать элемент управления доступным или недоступным для ввода. Значение true этого свойства делает элемент управления недоступным для ввода, значение false — доступным.Свойство value задает или возвращает значение, введенное в поле ввода или область редактирования, в виде строки

Свойство checked позволяет получить или задать состояние флажка или переключателя — установлен он или нет. Значение true обозначает, что флажок или переключатель установлен, значение false — сброшен.Здесь мы привязываем к флажку updates функцию — обработчик события click, которую тут же и объявляем. Эта функция делает доступным для посетителя поле ввода email, если флажок установлен, и недоступным — если он сброшен. Наша задача упрощается тем, что переменная this, доступная в теле функции- обработчика события и хранящая элемент Web-страницы, в котором обрабатывает- ся событие, хранит этот элемент в виде экземпляра объекта HTMLElement.

Свойство selectedIndex задает или возвращает номер выбранного в списке пункта в виде числа. При этом:
если список позволяет выбирать одновременно только один пункт, возвращается номер именно этого пункта;
если список позволяет выбирать сразу несколько пунктов, возвращается номер первого выбранного пункта;
если ни один пункт в списке не выбран, возвращается значение –1

Свойство options возвращает коллекцию пунктов списка. Эта коллекция является экземпляром объекта HTMLOptionsCollection.Свойство length объекта HTMLOptionsCollection возвращает число элементов в кол- лекции, т. е. количество пунктов в списке.Для доступа к отдельным пунктам в этой коллекции мы можем использовать числовые индексы, как и в случае массива.Здесь мы получаем второй пункт списка. Отдельный пункт списка представляется экземпляром объекта HTMLOptionElement. Он поддерживает уже знакомое нам свойство disabled, позволяющее разрешить или запретить доступ к данному пункту списка.

А еще он поддерживает свойство selected, указывающее, выбран ли данный пункт списка. Значение true обозначает, что пункт списка выбран, а значение false — не выбран. Это свойство удобно применять, чтобы выяснить, какие пункты выбраны в списке, позволяющем выбирать сразу несколько пунктов.Свойство form возвращает экземпляр объекта HTMLElement, представляющий Webформу, в которой находится данный элемент управления.Метод focus делает данный элемент управления активным. Он не принимает пара- метров и не возвращает результата.

Метод blur делает данный элемент управления, наоборот, неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления. Данный метод также не принимает параметров и не возвращает результата.Метод select выделяет все содержимое поля ввода или области редактирования. Он не принимает параметров и не возвращает результата.Метод click позволяет имитировать щелчок на кнопке. Он не принимает параметров и не возвращает результата.

Мы познакомились с азами Web-дизайна, языками HTML, CSS И не только познакомились, но и применили полученные знания на практике, создав электронную книгу Наш проект, хоть и невелик по объему, но зато использует самые “горячие” новинки Webдизайна и Web-программирования. Подгружаемое и генерируемое содержимое, базы данных, семантическая разметка, интерактивные элементы — такое не везде встретишь.