Так как браузеры Web могут только интерпретировать и выводить определенные технологии, такие как стандарты Web, то при запросе адреса URL, который указывает либо на сложный формат файла, либо на страницу Web, содержащую технологию, которая требует подключаемого модуля (плагина), файл будет либо загружен на компьютер, либо открыт с помощью требуемого плагина, если он установлен в браузере. Например:
- Если вы встретите документ Word, файл Excel, PDF, сжатый файл (ZIP, или SIT, например), сложный файл изображения, такой как Photoshop PSD, или другой сложный файл, который браузер не понимает, браузер обычно спрашивает, хотите ли вы загрузить или открыть этот файл. Оба действия обычно имеют аналогичные результаты, за исключением того, что во втором случае файл будет загружен в компьютер и затем открыт приложением, которое его понимает, если такое приложение установлено на компьютере.
- Если вы встретите страницу, содержащую фильм Flash, MP3 или другой музыкальный формат, MPEG или другой формат видео, то браузер будет воспроизводить его с помощью установленного плагина, если такой плагин был установлен. Если плагина нет, то либо будет выведена ссылка для установки требуемого плагина, либо файл будет загружен и будет сделана попытка найти на компьютере приложения для его выполнения.
Конечно, имеется некоторая серая область - например формат SVG (Масштабируемая векторная графика) является стандартом Web, который реализован в некоторых браузерах, таких как Opera, но не реализован в других, таких как Internet Explorer - IE требуется плагин для понимания SVG. Ряд браузеров поставляется с некоторыми предустановленными плагинами, поэтому вы можете не знать, что некоторый контент выводится через плагин, а не естественным образом в браузере.
Сравнение статических и динамических Web-сайтов
Итак, что же такое статические и динамические Web-сайты, и в чем между ними различие? Очевидно, что все зависит от начинки.
Статический Web -сайт является Web-сайтом, контент которого, HTML и графика, всегда статичны — он обслуживает любого посетителя одинаково, если только создатель Web-сайта не решит вручную изменить его копию на сервере.
На динамическом Web-сайте, с другой стороны, контент сервера будет таким же, но кроме обычного кода HTML он содержит также динамический код, который может выводить различные данные, в зависимости от информации, которая передается на Web-сайт. Например, — перейдите в своем браузере на сайт https://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 (https://www.alistapart.com/articles/slashdot/), где автор берет очень популярный Web-сайт и переписывает его с помощью XHTML/CSS.
- Легкость обслуживания: Следует из предыдущего пункта, так как если информация об оформлении и компоновке определяется только в одном месте, то обновления нужно сделать тоже только в одном месте, если потребуется изменить внешний вид сайта. Предпочли бы вы обновлять эту информацию на каждой странице сайта? В это трудно поверить.
- Доступность: Пользователи Web со слабым зрением могут использовать программу, называемую "считыватель экрана", для доступа к информации с помощью слуха, а не зрения — она дословно читает для них страницу. Кроме того, программное обеспечение голосового ввода, используемое людьми с ограниченной подвижностью, также выигрывает от хорошо спроектированной семантики Web-страниц. Также как в случае считывателя экрана пользователь использует клавиатурные команды для перемещения по заголовкам, ссылкам и формам, так и пользователь голосового ввода будет использовать голосовые команды. Документы Web, размеченные семантически, а не с точки зрения представления, могут быть проще для навигации, а информацию в них пользователю найти легче. Другими словами, чем быстрее вы "доберетесь до места" (контента), тем лучше. Считыватели экрана не могут прочитать текст скрытый в изображениях, и иногда не могут понять действия JavaScript. Сделайте так, чтобы ваш критически важный контент был доступен каждому.
- Совместимость с устройствами: Так как страница XHTML является просто обычной разметкой, не содержащей информации о стилях оформления, ее можно переформатировать для различных устройств с совершенно различными атрибутами (например, размер экрана), применяя просто альтернативную таблицу стилей - это можно сделать несколькими различными способами (можно просмотреть статьи о мобильных устройства на сайте dev.opera.com для получения дополнительной информации). CSS также изначально позволяет определить различные таблицы стилей для различных типов среды/методов представления (например, просмотра на экране, печати, просмотра на мобильном устройстве).
- Web-роботы /поисковые системы: Вполне вероятно, что вы захотите, чтобы ваши страницы можно было легко найти с помощью Google, или других поисковых систем. Поисковая система использует специальную "программу-робота", которая считывает содержимое страниц на сайтах и индексирует их. Если эта программа не сможет прочитать содержимое страницы, или неправильно интерпретирует важные вещи, потому что заголовки не были определены как заголовки и т.д., то вероятность того, что в результатах поиска вы окажетесь на верхних позициях, существенно уменьшится.
- Это просто хорошая методика: Это несколько напоминает аргумент "потому что я так сказал", но поговорите с любым профессиональным разработчиком или дизайнером, имеющим представление о стандартах, и они скажут вам, что разделение контента, стилевого оформления, и поведения является лучшим способом разработки приложений.