Институт управления, бизнеса и права учебно-методический комплекс (стр. 4 )

Рис. 3. Диаграмма последовательностей для "тонкого" Web-клиента

Обязанности серверных страниц можно сузить еше в большей степени за счет отделения бизнес-логики от построения интерфейса пользователя. Для этого можно ввести еще одну страницу BuildOrderSummary, единственной функцией которой является построение итоговой страницы OrderSummary для содержимого торговой тележки, а именно, на этой странице должна отображаться общая стоимость товаров, налог на добавленную стоимость и стоимость доставки. Серверная страница checkout делегирует этой странице право создания интерфейса пользователя с помощью меха­низма перенаправления (redirection). Обновленная диаграмма последовательностей представлена на рис. 4. После делегирования обязанностей-по реализации бизнес-логики отдельным компонентам и освобождения от функций создания интерфейса пользователя страница стала более конкретной и однозначной.

Остальные части этого простого сценария начинаются с новой клиентской страницы OrderSummary, поскольку теперь она отображается в броузере клиента вместо страницы checkout. В этом сценарии исполнитель подтверждает свой заказ путем отправки сообщения странице OrderSummary. Это сообщение, скорее всего, тоже должно являться гиперссылкой на другую серверную страницу. Логическая схема объ­ектов этих новых страниц показана на рис. 5.

На рис. 5 представлены и объекты предметной области, и Web-страницы. Эти Web-страницы тоже напоминают объекты, поскольку взаимосвязаны с другими объек­тами и выполняют единственную функцию. На этой диаграмме они "сосуществуют" с классами, моделирующими объекты предметной области, и системными классами, а са­мое главное, здесь показаны их взаимоотношения. Теперь в модели мы перешли от формулировки требований к описанию прецедентов, затем — к проектированию объек­тов предметной области, приложения и, наконец, Web-страниц.

Рис. 4. Обновленная диаграмма последовательностей

Рис. 5. Логическая взаимосвязь классов при подтверждении покупки

Естественно, эти концептуальные Web-страницы (серверная и клиентская) должны стать компонентами системы. На рис. 10.6 показаны три компонента, каждый из ко­торых представляет Web-страницу разрабатываемой системы.

После идентификации Web-страниц, основных способов их взаимодействия и обя­занностей можно перейти к разработке каждой отдельной страницы. В архитектурах на основе "тонкого" клиента этот вид деятельности сводится к описанию операций и атрибутов серверных страниц.

Серверные страницы. Мы стараемся представить страницы ASP в виде объектов, однако, к сожалению, они по своей природе являются процедурами. Процесс обработки страницы состоит в ее чтении от начала до конца и начинается с выполнения первого же исполняемого оператора, даже если он не является частью функции. По существу, вся страница представляет собой функцию main(). При этом каждый атрибут класса <<Server Page>> (страница сервера) отображается в переменную, определенную в начале стра­ницы. Областью видимости этой переменной является вся страница, и она доступна во всех определенных на этой странице функциях. Операции, определенные для сер­верной страницы, становятся функциями в файле ASP. Весь код, расположенный в файле ASP за пределами этих функций, рассматривается как часть главной функции страницы main (). С другой стороны, расширения ISAPI, NSAPI и сервлеты Java обеспечивают более "объектно-подобный" интерфейс для серверных страниц.

Ассоциация с объектом Cart предполагает наличие переменной, ссылающейся на экземпляр этого объекта. Таким образом, большая часть функциональности серверной страницы Checkout делегирована объекту Cart. Однако в реальных приложениях обыч­но выполняется несколько проверок. Например, задержка при отклике исполнителя может оказаться настолько длительной, что соответствующий объект Session на серве­ре (серверный механизм для управления состоянием клиента) тоже должен перейти в режим ожидания. Это может произойти при кратковременном сбое в сети, поэтому та­кая функция очень важна для приложений Internet. В подобной ситуации в текущем се­ансе больше не существует экземпляра Cart, поскольку для исполнителя будет создан новый экземпляр Session. Эту исключительную ситуацию можно обработать только в пределах данной страницы, например, с помощью операции ValidateShoppingCart(). проверяющей состояние экземпляров Session и Cart перед подтверждением покупки. Если экземпляр Cart не существует или содержит некорректные данные, то функция должна перенаправлять дальнейшую обработку другой странице. На рис. 6 показана схема обработки этой исключительной ситуации. Обратите внимание, что параметры URL используются для задания условий исключения.

Серверная страница ProcessError — это родовая страница обработки исключе­ний, которой в качестве параметров передается номер ошибки и, при необходимости, ее расширенное описание. Имена этих параметров обозначаются в модели с помощью тегированных значений для ассоциации <<redirect>> (перенаправляет).

Рис. 6. Схема обработки исключительной ситуации

Связи. Взаимосвязи между страницами можно изобразить несколькими способами. Если эта связь является гиперссылкой на другую страницу, клиентская страница связывается с компонентом Web-страницы, а не с абстракцией клиентской или серверной страницы. Таким образом, связь одной клиентской страницы с другой и связь клиентской страни­цы с серверной, которая строит (<<build>>) клиентскую страницу, по существу, иден­тичны.

Возможность представления связи с клиентской или серверной страницей тесно связана с организацией диаграмм. Диаграммы предназначены для отображения струк­турной взаимосвязи Web-страниц, поддерживающих определенный поток сообщений в приложении, в котором могут содержаться только клиентские страницы и, следова­тельно, связи лишь с клиентскими страницами, даже несмотря на то что большинство этих страниц создаются серверными страницами. На рис. 7 показан набор клиент­ских страниц, которые строятся серверными страницами. Однако несмотря на это ни одна из серверных страниц на диаграмме не представлена. Эта диаграмма призвана отобразить структурные взаимосвязи персонального рабочего стола Web. Обратите внимание на двунаправленную связь <<link>> (связывает), которая показывает, что исполнитель может передвигаться между этими страницами в обоих направлениях.

Рис. 7. Клиентская страница

Формы. Формы в модели изображаются как агрегат клиентской страницы. Объект <<Form>> существует лишь в контексте клиентской страницы. Этот объект представ­ляет собой множество стандартных элементов ввода данных, которые позволяют по­лучить от пользователя входную информацию и передать ее серверной странице для обработки. Атрибутами формы являются поля для ввода данных.

Лекция 5. Артефакты моделирования

План

1. Построение диаграмм путей в сайте.

2. Составление тематической схемы.

3. Интерактивная раскадровка.

4. Инвентарная опись контента.

5. Схема сайта

6. Словарь схемы сайта.

7. Логическая схема сайта.

Содержание

1. Построение диаграмм путей в сайте

Построение диаграмм путей в сайте (sitepath diagramming) - это создание системы набросков для определения того, кто будет пользователями вашего сай­та и какие действия они будут пытаться выполнить на сайте.

Где применять. Подходит для определения типичных маршрутов в сайте (site flow), для ранней стадии проектирования интерактивного взаимодей­ствия и для проектирования последовательности операций.

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

Материалы: доска, цветные маркеры.

Методика

1. Нарисуйте большой круг - изображение интерактивной системы. Она мо­жет быть веб-сайтом или набором взаимосвязанных веб-сайтов.

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

3. Учтите альтернативные пути, по которым люди могут зайти на сайт - например, через информационный бюллетень, - и поместите их в ниж­ний левый угол.

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

Рис. 5.1

5. Нанесите на диаграмму сценарии.

Пример. Поиск подарка на сайте электронной коммерции.

- Пользователь начинает с домашней страницы, ищет реестр с подарками и ищет по­дарок по названию,

- Выбирает подарок, покупает его, пишет открытку и посылает подарок.

Каждый кружок на рисунке представляет событие, которое может произойти в системе. Он может соответствовать одной странице, части страницы или нескольким страницам.

Рис 5.2.

Рис 5.3

2. Составление тематической схемы

Составление тематической схемы (topic mapping) является инструментом для сфокусированного мозгового штурма, направленного на разработку воз­можного варианта архитектуры,

Где применять. При создании архитектуры контента.

Достоинства. Позволяет создать более гибкую архитектуру контента.

Материалы: доска, цветные маркеры, блокнот

Методика

1. Начните в середине листа бумаги (или классной доски) и напишите название
ключевой темы. Пример - схема для магазина кухонных товаров. В центре можно тогда написать "кухня".

2. Выбрать разделы, связанные с кухней и кухонным оборудованием.

Рис. 5.4.

3. К каждому разделу добавляйте как можно больше подразделов.

Рис. 5.4.

4. Организуйте сеанс группового моделирования, дополняя схему.

5.  Зафиксируйте схему в качестве возможной иерархии для структуры вашего контента.

6. Приведите контент или продукцию в соответствие с полученной организационной структурой. Поместите вместе вещи, имеющие связь друг с другом, и уберите неуместные предметы и неиспользованные разделы.

Оборудование для выпечки

Противни

Жаровни для открытого огня

Ростеры

Кастрюли и сковороды

Сотейники

Кастрюли для бульона

Сковороды

Кастрюли для гриля и т. д.

3. Интерактивная раскадровка

Где применять. Для придания большего смысла блок-схеме и выделения дискретных шагов интерактивного процесса.

Достоинства. Диаграммы достаточно просты в построении, но датют общее представление о сайте.

Материалы: большой блокнот или стопка бумаги небольшого газетного фор­мата, программа для рисования.

Методика

1. Выберите один конкретный интерактивный процесс в сайте. Напри­мер, если вы создаете сайт розничной торговли, то можно выбрать оформле­ние покупок или поиск товаров

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

3. Создайте диаграмму самого типичного пути в этом процессе. Отметьте воз­можные ответвления, чтобы оставить под них место. (Ниже на рисунке показана диаграмма оформления покупок: первый листок соответствует преды­дущему рисунку; на втором показано поле ввода адреса электронной почты, переключатель между новым посетителем и зарегистрированным ранее и по­ле ввода пароля; на третьем - выбор адреса доставки; на четвертом - выбор адреса для посылки счета; на пятом - выбор скорости доставки; на шестом - проверка заказа с кнопками "изменить" и "купить"; на последнем листке - по­здравление с покупкой» подробности получения заказа и кнопки с предложе­нием купить что-нибудь еще и ознакомиться с информацией о фирме.)

4. Добавьте альтернативные пути. Не стройте пути для каждой незна­чительной единичной возможности (например, для сообщения об ошибке при неправильном наборе адреса электронной почты), а дополняйте диаграмму только наиболее вероятными альтернативными сценариями. Важно помнить, что эта диаграмма является просто инструментом для беседы, а не специфи­кацией. Ее не надо передавать инженерам для реализации. Она послужит ис­ходным вариантом для этого на последующих стадиях проекта, но сейчас со­средоточьтесь на передаче публике основ интерактивного процесса. Диа­грамма поможет достичь понимания в группе архитекторов. (На следую­щем рисунке добавлены к предыдущему рисунку два листка: около первого листка указано, что пароль и данные кредитной карточки запрашиваются только у новых посетителей, и если это новый посетитель, то нужно перейти к адресу доставки - иначе, к адресу для посылки счета. В первом добавлен­ном листке изображена форма для установления пароля и адресных данных, а также кредитной карточки. Во втором листке нарисованы варианты перехода при изменении покупателем заказа.)

4. Инвентарная опись контента

Наиболее трудоемкой работой в информационной архитектуре являет­ся создание инвентарной описи контента.

Инвентарная опись контента получается в процессе определения каждого контента веб-сайта, как имеющегося, так и будущего.

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

Достоинства. Лучший способ узнать действительное состояние контента сайта. Его применение жизненно необходимо для сайтов, не использующих систему управления контентом.

Материалы: программа для работы с таблицами.

Методика

1. Определить характеристики страниц.

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

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

- Содержание. - Краткое резюме контента страницы или куска контента. Например, "Требования к применению".

- Темы, - несколько клю­чевых уникальных фраз

- Примечания. - Для любой информации, не подходящей к основной об­ласти, но которая, является или может стать важной.

- Адрес. - URL

- Автор. - Полезно для периодических изданий.

- Сопровождающий. - Кто обновляет страницу?

- Тип пользователя. - Член/не член, покупатель/продавец и т. п.

- Владелец. - Компания и/или ее подразделение, ответственные за контент.

2. Выполнить опись

Таблица 5.1. Предполагаемое начало инвентарной описи контента для веб-сайта

5. Схема сайта

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

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

Отметьте также, какую еще информацию вы будете отражать в документе, кроме общепринятой. Хотите ли вы показать:

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

- Это новый контент или архивный? - Может быть важным для газетных сайтов.

- Кем создан контент: пользователями или компанией? - Для сайтов, со­держащих контент, создаваемый его членами, например, как на сайте "" - сетевом хранилище закладок.

- Характер контента: статический или динамический. - Некоторые страни­цы контента, такие, как статьи, являются статическими, в то время как другие страницы меняются в зависимости от действий пользователя - например, до­машние страницы "My" ("My yahoo!", "My MSN", "My Netscape" и т. п.).

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

И как всегда, сначала делайте наброски на бумаге, а затем совершенствуйте их на компьютере.

Построение схемы сайта

Существуют различные типовые схемы сайтов. Их выбор зависит от назначе­ния проекта и ваших дизайнерских наклонностей.

- Широкая схема включает в себя множество эле­ментов на одном уровне. Если все на вашем сайте расположено в одном щелчке мыши от домашней страницы, то такой сайт имеет широкую струк­турную схему.

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

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

Типы схем

- Древовидная схема (tree map). - Незаменима для показа иерархии. Тем не менее быстро возникает нехватка горизонтального пространства. Для устра­нения этого, можно воспользоваться гребешковой схемой.

- Гребешковая схема (comb map). - Полезна для протяженных рабочих об­ластей со структурной схемой скорее глубокой, чем широкой.

- Звездообразная схема (star map). - Полезна, когда иерархия не является строгой, а структурная схема скорее широкая, чем глубокая. При глубокой структуре такую схему трудно строить, и она становится немного запутан­ной.

- Схема с вкладками (tab map). - Хорошо применима для схем с нечеткой иерархией и возможностью группировки элементов по их сходству. Она по­зволяет архитектору указывать наличие таких групп, не чувствуя, что он обя­зан создавать для каждой главную (обзорную) страницу. В древовидной схе­ме видна необходимость выделения для каждого уровня иерархии своей страницы, а в схеме с вкладками сходные элементы группируются без указа­ния "главной" страницы.

6. Словарь схемы сайта

Кроме выбора формы для схемы сайта необходимо определить словарь для его элементов. Они должны легко различаться с первого взгляда. Например, вы може­те изобразить разными способами веб-страницу, набор сходных страниц (такой, как раздел пресс-релизов) и файл, который не является веб-страницей (такой, как графическая презентация PowerPoint). Опись контента может оказаться полезной для подго­товки словаря. Вы можете просмотреть ее столбцы с типами контента и найти повторяющиеся элементы, которые можно изобразить одним способом.

Пример минимального словаря, используемого для схемы сайта

	Страница" и "стопка страниц
	"Файл" и "стопка файлов", презентации PowerPoint, документы Word или руководства в формате PDF
	Решение". Применяется в каждом случае, когда в системе принимается решение. Является пользователем членом или нет, зарегистрировался он или нет - это рас­пространенные виды точек принятия решений на сайте с ограниченным доступом,
	"Продолжение следует". Сохраняет аккуратный вид и читаемость сайта при помощи переноса подразделов и подпроцессов на другую страницу,

3  План самостоятельной работы студентов.

№	Содержание самостоятельной работы	Кол-во часов	Форма контроля
О	З	С
1	Изучение материала по теме «Определение архитектуры Web-приложений»	3	4	4	тест модуля 1
2	Изучение материала по теме «Требования и прецеденты при разработке Web-приложений»	3	4	4
3	Изучение материала по теме «Стадия анализа при разработке Web-приложений»	3	4	4
4	Изучение материала по теме «Стадия проектирования при разработке Web-приложений»	3	4	4
5	Изучение материала по теме «Артефакты моделирования»	3	4	4
6	Изучение материала по теме «Создание документа об образе и границах проекта»	5	10	10	тест модуля 2
7	Изучение материала по теме «Создание документа о вариантах использования»	4	10	10
8	Изучение материала по теме «Создание спецификации требований к ПО»	6	10	10
	Выполнение контрольного проекта	18			Материалы проекта
	Выполнение контрольной работы		18	18	Материалы проекта
9	Изучение материала по теме «Аттестация требований к ПО»	2	4	4	тест модуля 3
10	Изучение материала по теме «Разработка доменной модели диаграммы классов»	2	4	4
11	Изучение материала по теме «Разработка диаграммы состояний»	2	4	4
12	Изучение материала по теме «Разработка диаграммы деятельности»	2	4	4
13	Изучение материала по теме «Разработка диаграммы последовательности»	2	4	4
14	Изучение материала по теме «Завершение проектирования приложения»	2	4	4
15	Изучение материала по теме «Проектирование базы данных приложения»	2	4	4
	Выполнение и оформление контрольного проекта	14			Отчет
	Выполнение и оформление контрольной работы		14	14	Отчет

4  Контрольные работы (только для ЗО).

4.1  Методические рекомендации по выполнению и оформлению контрольных работ;

4.2  Перечень рекомендуемой литературы;

4.3  Темы (варианты) контрольных работ.

Не предусмотрены учебным планом