Основные правила и этапы создания сайта

 

Спецификация HTML 4.0 вводит ряд  новых атрибутов и тегов, созданных  специально для того, чтобы сделать  Web-документы доступными для более широкого круга пользователей. Кратко перечислим некоторые новые возможности HTML 4.0. (Расширенный список возможностей размещен на сайте http://www.w3.org/WAI/References/HTML4-access, а полные спецификации данной версии - на сайте http://www.w3.org/TR/REC-html40).

 

HTML 4.0 предлагает следующие  новые возможности, обеспечивающие  доступность:

 

- дальнейшее разделение  структуры документа и его  внешнего представления. Информацию  о стиле HTML 4.0 предлагает размещать  в каскадных таблицах стилей;

 

- навигационная помощь, например, клавиши доступа и индексирование  порядка табуляции для доступа  к элементам страницы с использованием  только клавиатуры;

 

- рекомендации, касающиеся  новой клиентской карты-изображения,  объединяющей графические и текстовые  ссылки;

 

- новые теги <abbr> и <acronym>, которые помогают речевым и другим устройствам интерпретировать аббревиатуры и акронимы;

 

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

 

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

 

- улучшенный механизм  создания альтернативного текста. Атрибут alt теперь обязателен для тега <img>. Чтобы обеспечить связь с более длинными текстовыми пояснениями к изображениям, введен атрибут longdesc.

 

Для добавления информации о  любом элементе, можно использовать атрибут title.

 

Каскадные таблицы стилей или CSS (от английского Cascading Style Sheets) являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

 

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

 

Однако с тех пор  много что изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

 

Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был  революционным, а лишь расставил  по местам все нововведения и выработал  общие рекомендации для производителей браузеров. Революционные изменения  были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель браузера.

 

В новом стандарте попытались вернуться к истокам концепции HTML. Четвертая версия, как и первая, рекомендует создавать странички  таким образом, чтобы они могли  быть воспроизведены на любом устройстве - будь это 21" дисплей или маленький  черно-белый экран сотового телефона.

 

Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается  революционность подхода. Все оформление рекомендуется вынести во внешний  стилевой файл. Основная же страничка  будет содержать только информацию и ссылки на необходимые стили.

 

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

 

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

 

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

 

CSS2 (Cascading Style Sheets, Level 2) - самая последняя рекомендация по каскадным таблицам стилей, предоставляет механизмы для улучшенной интерпретации страниц неграфическими и не визуальными устройствами. Усовершенствования включают:

 

- механизмы, с помощью  которых созданная пользователем  таблица стилей может заменить  все таблицы стилей более высоких  уровней в каскаде. Это дает  конечному пользователю возможность  полностью управлять отображением. Пользователь получает возможность  создавать настраиваемые таблицы стилей для вывода страниц в соответствии со специальными требованиями;

 

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

 

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

 

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

 

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

 

Источники разработки доступных  страниц:

 

1). Официальный сайт WAI. На  нем есть ряд полезных ссылок  к источникам, связанным с проблемой  доступности (http://www.w3.org/WAI).

 

2).Очень хороший источник  статей и руководств для авторов  HTML расположен на сайте Фонда  слепых Юрия Рубинского, который является своеобразным оружием борьбы за права инвалидов на расширенный доступ к технологиям (http://www.уun.org/Webable).

 

1.4 Представление текста  на Web-страницах

 

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

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

Пропорциональный шрифт - иначе "шрифт переменной ширины" для каждого символа выделяет разное количество места в зависимости  от его начертания. Например, в пропорциональном шрифте заглавная "W" занимает больше места в строке по горизонтали, чем прописная "I". Такие гаринитуры, как: Times, Helvetica и Arial являются примерами пропорциональных шрифтов.

Web-браузеры для большинства текстов на Web-странице, включая основной текст, заголовки, списки, цитаты и т. д., используют пропорциональные шрифты. Как правило, большие отрывки основного текста удобнее читать, когда они напечатаны пропорциональными шрифтами. Поскольку большинство пользователей не имеют времени заменить шрифты, установленные по умолчанию, с большой вероятностью можно предположить, что текст на вашей странице будет отображен шрифтом Times размером 10 или 12 пунктов (по умолчанию в Netscape) или Helvetica (по умолчанию в Microsoft Internet Explorer). Но это всего лишь общее правило.

Шрифт с фиксированной  шириной предоставляет одинаковое место для всех символов шрифта. Заглавная "W" занимает не больше места, чем прописная "I". Примерами шрифтов фиксированной ширины являются гарнитуры Courier и Monaco. В Web-браузерах шрифты фиксированной ширины используются для отображения любого текста внутри следующих HTML-тегов: <рге>, <tt>, <code>, <kbd>,<samp>, <хтр>.

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

Дизайнеры быстро поняли, что  самый верный способ абсолютного  контроля над шрифтами - поместить  текст в изображение. Можно часто  видеть заголовки, подзаголовки и объявления, выполненные в виде файлов GIF. Многие Web-страницы представлены исключительно в графике, которая содержит внутри себя весь текст страницы.

Преимущества использования  графики вместо HTML-текста абсолютно  очевидны:

- можно определять тип  шрифта, размер, интерлиньяж, промежуток  между буквами, цвет и выравнивание - все атрибуты, которые вызывают  сложности только в HTML;

- ваша страница будет  одинакова при выводе во всех  графических браузерах.

Но у этого метода имеется  ряд недостатков:

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

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

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

Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями. Обычно Windows использует разрешение экрана 96 точек/дюйм, a MacOS - 72 точек/дюйм. Мониторы MultiScan допускай более высокое разрешение.

Шрифт на экране дисплея Масintosh имеет точно такой же размер, как и при печати (например, 12 пт Times на экране выглядит так же, как 12 пт Times на бумаге).

Для шрифтов Microsoft подобное соглашение не выполняется, и размер шрифта при выводе на экран больше, что облегчает чтение с дисплея. В результате шрифт размером 12 пт на Windows больше похож на печатный шрифт в 16 пунктов. Чтобы получить на Windows печатный размер 12 пт, вам нужно выбрать размер шрифта 9 пунктов (но тогда пользователи компьютеров Масintosh увидят текст почти неразборчивым, так как он будет отображен шрифтом размером всего 6,75 пт).

1.5 Представление графики  на Web-страницах

На данный момент почти  все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее - краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.

GIF - Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в  следующем:

- поддерживает не более  256 цветов (меньше можно и часто  нужно);

- использует палитру цветов;

- использует сжатие без  потери информации по методу LZW (который подобен применяемому  в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически  не сжимаются);

- поддерживает чересстрочную  развертку;

- является поточным форматом, т.е. показ картинки начинается  во время перекачки;

- позволяет назначить  одному из цветов в палитре  атрибут прозрачный, что применяется  при создании так называемых  прозрачных GIFов;

- имеет возможность сохранения  в одном файле нескольких изображений,  что находит свое применение  при изготовлении анимированных  GIFов;

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

А теперь немножко разъяснений - к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что  все изображения, которые мы сохраняем  в GIF-формате, явно или неявно уменьшают  количество цветов, чтобы уложиться  в этот лимит (разные программы с разным успехом). А отсюда вывод - если взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже - оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

Вторым наиболее популярным графическим форматом в Web является JPEG - Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн. цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.