Оригинал доступен на сайте www.maxdesign.com.au/

Дата: 23 февраля 2004
Автор: Руси Уэкли

1. Веб-стандарты

"Веб-стандарты предназначены для общей базы ... основу для Всемирной паутины так, что браузеры и другое программное обеспечение понять же базовый словарный запас". Эрика Мейера

W3C (World Wide Web Consortium) и другими органами по стандартизации установили технологий для создания и интерпретации веб-контента. Фактические стандарты:

Структурные Языки

Расширяемый язык разметки гипертекстовых (XHTML) 1,0

XHTML 1.1

Расширяемый язык разметки (XML) 1,0

Презентация Языки

Cascading Style Sheets (CSS) Уровень 1

CSS Level 2

CSS уровня 3

Объект Модели

Document Object Model (DOM) Уровень 1 (Core)

DOM Level 2

Языки сценариев

ECMAScript 262 (стандартная версия JavaScript)

Дополнительные Языки представления (разметки)

Mathematical Markup Language (MathML) 1.01

MathML 2.0

Масштабируемая векторная графика (SVG) 1,0

2. Что такое веб-стандарты?

Эти "веб-стандарты" предназначены для:

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

Для веб-дизайнеров и разработчиков, веб-стандарты об использовании стандартов (структурные, презентационных, объект и языки сценариев) и передового опыта (действительно, семантические и доступной код) в интересах ваших пользователей, клиентов и себя.

3. Мышление изменения

Традиционные веб-сайт

Традиционные развития сайта является расширение печатных СМИ - разработан, чтобы сделать сайты выглядят пикселей совершенное в 5-6 основных браузерах. Общие характеристики включают в себя:

• Таблица макетов на основе
• Презентация в рамках содержания (шрифт тегов)
• Неверный код
• Недоступный код
• Семантически неправильный код

"Веб-стандарты" сайт

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

• Семантически правильная разметка
• Действительный код
• Доступный код (для людей и устройств)
• Cascading Style Sheets (CSS), чтобы отделить содержание от представления

4. Семантически правильная разметка

Семантически правильная разметка HTML использует элементы для своих определенных целей. Хорошо структурирован HTML имеет смысловое значение для широкого круга пользователей агентов (браузеры без стилей, текстовые браузеры, КПК, поисковые системы и т.д.)

Вы должны использовать стандартные элементы HTML для разметки и избежать стиль элементов HTML, чтобы посмотреть, как и другие элементы HTML. Говоря простым языком, это означает:

• для заголовков, используйте заголовок элементов, начиная с H1
• для абзацев текста, используйте пункт элемент
• для списков, использование элементов списка

5. Что такое правильный код?

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

Зачем использовать правильный код?

• Действительный код будет оказывать быстрее, чем код с ошибками
• Действительный код сделает лучше, чем неверный код
• Браузеры становятся все более стандартам, и она становится все более необходимым, чтобы написать всем требованиям и стандартам HTML

Как проверить, если ваш код правильный

• W3C Markup Сервис проверки
• W3C CSS Сервис проверки
• WDG HTML Validator
• Многие программные продукты теперь имеют встроенные инструменты проверки

Как сделать ваш код действителен?

• Начните с правой DOCTYPE
• Будьте в курсе DOCTYPE режимов (стандартам, режим совместимости и т.д.)
• Использование набора символов
• Закрыть HTML элементов
• Нажмите Alt тегов для изображений
• Избегайте HTML хаки
• Использование HTML-валидаторов регулярно
• Исправьте все ошибки вы найдете, прежде чем идти жить
• Сделайте проверку часть вашего нормальный процесс работы

6. Зачем использовать доступный код?

• Позволяет вашего сайта быть доступным для более широкой аудитории (людей с ослабленным зрением, нарушением двигательных навыков, когнитивные нарушения)
• Позволяет ваш сайт будет доступен более широкий спектр устройств (стороны helds, чтения с экрана, текстовых браузеров, поисковых систем)
• Это требование федерального и государственного управления сайтов

Как сделать код доступным?

• Обеспечить текстовые эквиваленты для нетекстовых элементов
• Используйте доступные таблицы данных (определить заголовки строк и столбцов)
• Используйте доступные формы (этикетки для, ID, FIELDSET, легенда)
• Используйте разметку, а не изображения для передачи информации.
• Обеспечить видимая ссылка "пропустить
• Обеспечить доступ к ключам
• Использование таблиц стилей с относительных единицах контролировать формат и оформление
• Убедитесь, что документы могут быть прочитаны без стилей
• Метаданные добавить семантической информации

7. Зачем использовать CSS, чтобы отделить содержание от представления?

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

• Более доступными для широкого круга устройств
• Легче сделать на веб-узле изменений - один CSS файл, а не все страницы
• Меньшие файлы / быстрой загрузки - меньше кода на странице
• Меньше кода на странице - легче код
• Позволяет пользователям настраивать под свои нужды - стиль коммутаторы
• Больше контроля над кодом - может поставить код в порядке предпочтения для чтения с экрана

Презентация на всех страницах HTML

Презентация в separater CSS файл

Separater CSS файлы для современных браузеров, принтеров и старых браузерах

8. CSS основан сайт в действии

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

• Styled страницы
• Styled изменения
• Версия для печати

9. Как ваши посетители выгоду от веб-стандартов?

• Файлы загружаются быстрее (меньше кода, ни общей таблицы, действительный код)
• Содержание доступно для широкого круга пользователей (обычные пользователи, слепых пользователей, пользователей с ослабленным зрением, dislexic пользователей, двигательных навыков пользователей с нарушениями и т.д.)
• Содержание доступно для широкого спектра устройств (чтения с экрана, браузеры, текстовые браузеры, стороны helds, поисковые роботы, принтеры, холодильники и т.д.)
• Позволяет пользователям настраивать внешний вид сайта (стиль коммутаторы)
• Предоставляет для печати версия для всех страниц

10. Как ваши клиенты получают преимущества от веб-стандартов?

• Проще в обслуживании (меньше кода, модульный код)
• Дешевле расходы на хостинг (скрыть код)
• Лучше поисковой системы рейтинга
• Содержимое может быть легко рестайлинг без изменения кода
• Предоставляет пользователям настройки
• Обеспечивает печатные версии без тиражирование содержание
• Повышает доступность (необходимо для клиентов правительства)

11. Как Вы получаете выгоду от веб-стандартов?

• Легче код (модульный код)
• Проще в обслуживании (меньше кода, модульный код)
• Меньше зависит от устройства кодирования (стабильный через широкое разнообразие устройств)
• Обеспечивает конкурентное преимущество как более мир движется к использованию веб-стандартов.

12. Какие минусы

• Крутой кривой обучения
• проблемы совместимости браузера
• Некоторые макеты могут быть достигнуты гораздо легче, чем с использованием таблиц CSS

13. Как достичь веб-стандартов?

Веб-стандарты не черно-белый вопрос. Все разработчики должны быть целью постепенно перейти к веб-стандартов-сайтов.

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

Основные изменения

• Добавить правильный DOCTYPE для всех страниц
• Добавить альтернативный текст для всех изображений
• Добавить значимые названия страниц

Промежуточные изменения

• правильный код
• семантически правильный код
• заменить встроенные теги шрифта и встроенный цвета с CSS
• доступных форм, таблиц данных, и "пропустить"

Дополнительные изменения

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

Практика CSS макеты

• читать CSS учебники и книги, чтобы получить понимание практических CSS
• выделить время, чтобы научиться CSS позиционирования без внешнего давления
• практике различные CSS макеты, пока вы не уверены,

14. Заключение

Веб-стандарты обеспечивают:

• быстрее скачать файл
• доступной код широкого круга пользователей и устройств
• пользовательских настроек
• Простая реализация версии для печати
• дешевле расходы на хостинг
• лучше рейтинге поисковой системы
• быстрее и эффективнее Maintenace сайте
• конкурентное преимущество перед конкурентами

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

15. Веб-стандарты ресурсов

Веб-стандартов

• zeldman.com
• webstandards.org
• webstandardsgroup.org
• nypl.org/styleguide/

Семантический код

• brainstormsandraves.com/articles/semantics/structure/

Проверки

• validator.w3.org/
• htmlhelp.com/tools/validator/
• webboy.net/presentation/ict2004/validation.htm
• webboy.net/presentation/validation.cfm

Доступность

• joeclark.org
• accessify.com
• juicystudio.com

CSS

• webboy.net/presentation/ict2004/01.htm
• webboy.net/presentation/ict2004/02.htm
• webboy.net/presentation/ict2004/03.htm
• westciv.com/style_master/academy/css_tutorial/
• css.maxdesign.com.au
• thenoodleincident.com/tutorials/css/

Переводы

• Spanish translation - Xoan Sampaiño
• Finnish translation - Kalamuki
• Catalan translation - Neurotic
• Korean translation - Kukie