Разработка архитектуры Web-узла Разработка архитектуры сайта сводится к разработке логической и физической структуры сайта, а также к разработке структуры. - презентация

1 Разработка архитектуры Web-узла Разработка архитектуры сайта сводится к разработке логической и физической структуры сайта, а также к разработке структуры логических связей документов Web-узла. Отсюда и название дисциплины: Структурно-логическое проектирование web-узлов.

2 Логическая и физическая структура сайта Каждый ресурс Интернета содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html.

3 Логическая и физическая структура сайта Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется логической структурой сайта. Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт. Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис.

4 Логическая и физическая структура сайта

5 Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.

6 Логическая и физическая структура сайта Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми».

7 Логическая и физическая структура сайта Документируйте проект: Имя файла ПапкаОписание Дата создания/ измене- ния index.html/mysite Стартовая страница сайта

8 Логическая и физическая структура сайта Физическая структура сайта скрыта от посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем именно так, как она представлена при помощи элементов навигации. Отсюда следует логический вывод: строение системы навигации должно если не полностью повторять, то хотя бы максимально соответствовать разработанной вами логической структуре сайта.

9 Заглавная и стартовая страницы Заглавная страница представляет собой html- документ, который не включает всебя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страница называется иначе и вызывается посредством организации гиперссылки с заглавной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит, как правило, логотип компании-владельца данного ресурса, счетчик посещений и другую дополнительную информацию. Пример web-ресурса, оснащенного такой страницей, показан на рис.

10 Заглавная и стартовая страницы

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

12 Заглавная и стартовая страницы

13 Динамическая и статическая компоновка сайта Web-страница может отображаться по разному в зависимости от используемого посетителем сайта экранного разрешения. Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Для того чтобы избежать «съезжания» элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение.

14 Динамическая и статическая компоновка сайта Данной таблице можно назначить строго определенную ширину в пикселах, например, 640 точек, после чего жестко позиционировать ее по центру экрана или «прижать» к левому его краю. Такой вариант компоновки сайта можно назвать статическим, поскольку ширина таблицы не меняется в зависимости от экранного разрешения. Разумеется, при изменении параметров экрана не происходит ни малейшего смещения элементов дизайна страницы.

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

16 Статическая компоновка сайта Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не «поплывут». Кроме того, данный вариант компоновки сайта в большинстве случаев позволяет добиться идентичности отображения html-документа в различных браузерах. Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.

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

18 Пример сайта со статической компоновкой страниц

19 Пример сайта с динамической компоновкой страниц

20 Проектирование структуры web-страницы Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера.

21 Проектирование структуры web-страницы Заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Непосредственно под заголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек.

22 Проектирование структуры web-страницы Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять 640 или 800 пикселов. Ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг.

23 Проектирование структуры web-страницы Основную часть документа занимает текстовое поле участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «контент» (от англ, content содержание). Расположение текстового поля зависит от того, каким образом web- дизайнер разместит остальные элементы документа. Следующей обязательной составляющей частью web-страницы являются элементы навигации гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, например Java-апплетов.

24 Проектирование структуры web-страницы Располагать элементы навигации следует таким образом, чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты, по которому посетители ресурса могут направить владельцам странички свои отклики, предложения и пожелания.

25 Проектирование структуры web-страницы Если web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений небольшой сценарий, вызывающий установленный на сервере CGI- скрипт, который фиксирует каждое открытие документа в браузере пользователей, изменяя значение индикатора счетчика. Благодаря этому web-мастер без труда определит количество посетителей, навестивших его страничку в течение какого-либо времени. Счетчик посещений устанавливается только на первой странице, вызываемой при обращении к сайту, в остальных документах ресурса он отсутствует.

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

27 Левосторонняя компоновка

28 Правосторонняя компоновка

29 Верхняя компоновка Элементы навигации можно разместить и в верхней части документа. Такой вариант компоновки наиболее подходит при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единственным недостатком подобного подхода является необходимость продублировать элементы навигации в нижней части документа, поскольку при вертикальной прокрутке страницы они исчезают за верхней границей экрана. Пример оформления страницы с верхним расположением элементов навигации показан на рис.

30 Верхняя компоновка

31 Смешанная компоновка

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

33 Структура логических связей документов

34 Коллективы участников процесса При разработке многостраничного сайта (уровня «Корпоративный» и выше) часто возникает необходимость формирования коллектива разработчиков. При этом, как правило, выделяют роли проектировщика, дизайнера, программиста. В функции проектировщика входит разработка проекта в целом, включая разработку логической и физической структуры сайта, структуры логических связей документов, выбор способа компоновки и разработка структуры типовой web-страницы. В последнем случае проектировщик выполняет и функции HTML-кодера.

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

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

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