4. Модель стандартов Web - html, css и JavaScript

Рассматривается чуть углубленней каждый из базовых строительных блоков Web - HTML (или XHTML), CSS и JavaScript. Что они делают, и как эти три составляющие взаимодействуют друг с другом при создании Web-сайта

Введение

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

Зачем разделять?

Разметка - основа каждой страницы

• Что такое XHTML?

• Валидация - что это такое?

CSS - давайте добавим немного стиля

JavaScript - добавление поведения на страницы Web

Пример страницы

• index.html

• styles.css

Заключение

Контрольные вопросы

Зачем разделять?

Это обычно первый вопрос, который задают о стандартах Web. Можно успешно реализовать контент, стилевое оформление и компоновку используя только HTML — элементы шрифта для стиля и таблицы HTML для компоновки, поэтому зачем беспокоиться о каких-то там XHTML/CSS? Таблицы для компоновки и т.д. использовались в худшие времена дизайна Web, и многие по-прежнему это используют (хотя в действительности не должны бы этого делать), что и явилось прежде всего одной из причин создания данного курса. Мы не будем рассматривать такие методы в этом курсе. Ниже представлены наиболее очевидные причины использования CSS и HTML вместо устаревших методов:

1. Эффективность кода: Чем больше становятся ваши файлы, тем больше требуется времени для их загрузки, и тем дороже это будет для некоторых людей (которые все еще платят за загрузку каждого мегабайта). Поэтому было бы нежелательно попусту занимать полосу пропускания большими страницами, захламленными информацией об оформлении и компоновке в каждом файле HTML. Значительно лучшей альтернативой является создание простых и опрятных файлов HTML, и включение информации об оформлении и компоновке только один раз в отдельные файлы CSS. Чтобы увидеть реальный пример такой работы, просмотрите статью на сайте "A List Apart" о том, как переписать сайт Slashdot (http://www.alistapart.com/articles/slashdot/), где автор берет очень популярный Web-сайт и переписывает его с помощью XHTML/CSS.

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

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

4. Совместимость с устройствами: Так как страница XHTML является просто обычной разметкой, не содержащей информации о стилях оформления, ее можно переформатировать для различных устройств с совершенно различными атрибутами (например, размер экрана), применяя просто альтернативную таблицу стилей - это можно сделать несколькими различными способами (можно просмотреть статьи о мобильных устройствах на сайте dev.opera.com для получения дополнительной информации). CSS также изначально позволяет определить различные таблицы стилей для различных типов среды/методов представления (например, просмотра на экране, печати, просмотра на мобильном устройстве).

5. Web-роботы /поисковые системы: Вполне вероятно, что вы захотите, чтобы ваши страницы можно было легко найти с помощью Google, или других поисковых систем. Поисковая система использует специальную "программу-робота", которая считывает содержимое страниц на сайтах и индексирует их. Если эта программа не сможет прочитать содержимое страницы, или неправильно интерпретирует важные вещи, потому что заголовки не были определены как заголовки и т.д., то вероятность того, что в результатах поиска вы окажетесь на верхних позициях, существенно уменьшится.

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