Сравнение статических и динамических Web-сайтов
Итак, что же такое статические и динамические Web-сайты, и в чем между ними различие? Очевидно, что все зависит от начинки.
Статический Web-сайт является Web-сайтом, контент которого, HTML и графика, всегда статичны — он обслуживает любого посетителя одинаково, если только создатель Web-сайта не решит вручную изменить его копию на сервере.
На динамическом Web-сайте, с другой стороны, контент сервера будет таким же, но кроме обычного кода HTML он содержит также динамический код, который может выводить различные данные, в зависимости от информации, которая передается на Web-сайт. Например, — перейдите в своем браузере на сайт http://www.amazon.com, и выберите 5 различных продуктов. Сайт Amazon не посылает вам просто 5 различных страниц, он пришлет одну и ту же страницу 5 раз, но с различной динамически заполняемой каждый раз информацией. Эта различная информация хранится в базе данных, которая извлекает при запросе требуемую информацию и предоставляет ее серверу Web для включения в динамическую страницу.
Необходимо отметить также, что на сервере должно быть установлено специальное программное обеспечение, позволяющее создавать динамический Web-сайт. В то время как обычные статические файлы HTML хранятся с расширением файла .html, эти файлы содержат специальный динамический код в дополнение к HTML, и хранятся со специальным расширением файлов, чтобы сообщить серверу Web, что они требуют дополнительной обработки перед отправкой клиенту (такой как вставка данных из базы данных) — файлы PHP, например, имеют обычно расширение файла .php.
Существует множество динамических языков программирования — уже был упомянут PHP, а другими примерами являются Python, Ruby on Rails, ASP.NET и Coldfusion. В конечном счете, все эти языки имеют по большей части одинаковые возможности, такие как общение с базами данных, проверка вводимой в формы информации и т.д., но они делают все это немного по разному, и имеют некоторые достоинства и недостатки. Все сводится к тому, что вам лучше всего подходит.
В предыдущей лекции мы слегка затронули базовые строительные блоки Web — HTML (или XHTML), CSS и JavaScript. Теперь пришло время немного углубиться и посмотреть на каждый из них в отдельности — что они делают, и как эти три составляющие взаимодействуют друг с другом при создании Web-сайта. Данная лекция имеет следующее содержание:
Зачем разделять?
Разметка - основа каждой страницы
Что такое XHTML?
Валидация - что это такое?
CSS - давайте добавим немного стиля
JavaScript - добавление поведения на страницы Web
Пример страницы
index.html
styles.css
Заключение
Контрольные вопросы
Зачем разделять?
Это обычно первый вопрос, который задают о стандартах Web. Можно успешно реализовать контент, стилевое оформление и компоновку используя только HTML — элементы шрифта для стиля и таблицы HTML для компоновки, поэтому зачем беспокоиться о каких-то там XHTML/CSS? Таблицы для компоновки и т.д. использовались в худшие времена дизайна Web, и многие по-прежнему это используют (хотя в действительности не должны бы этого делать), что и явилось прежде всего одной из причин создания данного курса. Мы не будем рассматривать такие методы в этом курсе. Ниже представлены наиболее очевидные причины использования CSS и HTML вместо устаревших методов:
Эффективность кода: Чем больше становятся ваши файлы, тем больше требуется времени для их загрузки, и тем дороже это будет для некоторых людей (которые все еще платят за загрузку каждого мегабайта). Поэтому было бы нежелательно попусту занимать полосу пропускания большими страницами, захламленными информацией об оформлении и компоновке в каждом файле HTML. Значительно лучшей альтернативой является создание простых и опрятных файлов HTML, и включение информации об оформлении и компоновке только один раз в отдельные файлы CSS. Чтобы увидеть реальный пример такой работы, просмотрите статью на сайте "A List Apart" о том, как переписать сайт Slashdot (http://www.alistapart.com/articles/slashdot/), где автор берет очень популярный Web-сайт и переписывает его с помощью XHTML/CSS.
Легкость обслуживания: Следует из предыдущего пункта, так как если информация об оформлении и компоновке определяется только в одном месте, то обновления нужно сделать тоже только в одном месте, если потребуется изменить внешний вид сайта. Предпочли бы вы обновлять эту информацию на каждой странице сайта? В это трудно поверить.
Доступность: Пользователи Web со слабым зрением могут использовать программу, называемую "считыватель экрана", для доступа к информации с помощью слуха, а не зрения — она дословно читает для них страницу. Кроме того, программное обеспечение голосового ввода, используемое людьми с ограниченной подвижностью, также выигрывает от хорошо спроектированной семантики Web-страниц. Также как в случае считывателя экрана пользователь использует клавиатурные команды для перемещения по заголовкам, ссылкам и формам, так и пользователь голосового ввода будет использовать голосовые команды. Документы Web, размеченные семантически, а не с точки зрения представления, могут быть проще для навигации, а информацию в них пользователю найти легче. Другими словами, чем быстрее вы "доберетесь до места" (контента), тем лучше. Считыватели экрана не могут прочитать текст скрытый в изображениях, и иногда не могут понять действия JavaScript. Сделайте так, чтобы ваш критически важный контент был доступен каждому.
Совместимость с устройствами: Так как страница XHTML является просто обычной разметкой, не содержащей информации о стилях оформления, ее можно переформатировать для различных устройств с совершенно различными атрибутами (например, размер экрана), применяя просто альтернативную таблицу стилей - это можно сделать несколькими различными способами (можно просмотреть статьи о мобильных устройства на сайте dev.opera.com для получения дополнительной информации). CSS также изначально позволяет определить различные таблицы стилей для различных типов среды/методов представления (например, просмотра на экране, печати, просмотра на мобильном устройстве).
Web-роботы /поисковые системы: Вполне вероятно, что вы захотите, чтобы ваши страницы можно было легко найти с помощью Google, или других поисковых систем. Поисковая система использует специальную "программу-робота", которая считывает содержимое страниц на сайтах и индексирует их. Если эта программа не сможет прочитать содержимое страницы, или неправильно интерпретирует важные вещи, потому что заголовки не были определены как заголовки и т.д., то вероятность того, что в результатах поиска вы окажетесь на верхних позициях, существенно уменьшится.
Это просто хорошая методика: Это несколько напоминает аргумент "потому что я так сказал", но поговорите с любым профессиональным разработчиком или дизайнером, имеющим представление о стандартах, и они скажут вам, что разделение контента, стилевого оформления, и поведения является лучшим способом разработки приложений.