РАСЧЕТНАЯ РАБОТАПо дисциплине «моделирование и анализ

программного обеспечения»на тему: «Проектирование и разработка

программного продукта»

Выполнила:

студентка гр. ПОС-10а

Лукьянченко Любовь

2

• В ходе выполнения лабораторных работ была разработана модель Web-интерфейса сайта в стиле 2D Minecraft.

• Класс ПО: Системный WebGL-класс векторной SVG-графики.• Тема: Отображение пунктов графического интерфейса 2D

полем плиток в игровой «песочнице».• Назначение: Применение двухмерного игрового поля

«песочниц строительных блоков Pixelcraft» плиток как элемента управления графическим интерфейсом сайта или программы для сенсорного экрана.

3

• Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек.

• Ячейка - это пустое место поля, занятая ячейка поля - это плитка. Плитка имеет типовое

оформление: цвет фона; рамка, текстовое содержание, картинка, положение текста относительно

картинки. Существует специальная плитка «стикер», без рамки и картинки и может занимать несколько ячеек, а самое главное, текст стикера программируется пользователем или разработчиком. Только в пустую ячейку поля пользователь может разместить плитку из кармана.

• Карман - это временный список плиток для перемещения по игровому полю. Если пользователь не решил, куда поставить плитку на игровом поле, то он может переместить её в сундук. Плитки в кармане организованы очередью FIFO.

• Сундук - это долговременный список ненужных на поле плиток. Плитки в сундуке отсортированы по убыванию даты и времени.

• Для решение навигации по сайту в стиле «Pixelcraft» необходимо три действия: переход, забрать, поставить.

•

ОПИСАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ:

4

ТЕСТИРОВАНИЕ ИНТЕРФЕЙСА

5

ГЛАВНАЯ СТРАНИЦА

Содержит ссылки: на страницу регистрации для новых пользователей и на страницу авторизации для уже зарегистрированных.

6

СТРАНИЦА РЕГИСТРАЦИИ И АВТОРИЗАЦИИ

На слайде изображены страницы с формой авторизации, а также регистрации.

7

ПОЛЕ ПЛИТОК

На следующем слайде изображено поле плиток. Каждая плитка является ссылкой на какой либо контент: музыка, фильмы, новости. Карман и Сундук вызываются нажатием на соответствующую плитку .

Нажатие кнопки «Выход» влечет за собой выход из системы и перенаправление пользователя на страницу авторизации.

8

9

РЕЗУЛЬТАТЫ КЛИКОВ ПО ПЛИТКАМ

10

РЕЗУЛЬТАТЫ КЛИКОВ ПО ПЛИТКАМ

11

КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ

Навигация по сайту в 2D поле «песочницы» прямоугольных плиток.

• Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек.

• Ячейка - это пустое место поля.

• Плитка – это занятая ячейка поля .

• Группа рядом стоящих плиток имеет одинаковый цвет фона, поэтому образует «остров».

• Уменьшив поле до минимума, получим цифровую карту, где группа плиток будут выглядеть как остров.

• Можно выделить три основных компонента: Поле, пользователь и элементы управления.

• Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек, количество которых можно настроить. Минимальная единица на поле – плитка.

• Поле имеет цветной фон или градацию нескольких цветов или картинку подложки, которую изменяет пользователь. Различают тематические картинки подложки: «голубой океан», «лунная поверхность», «крупная листва», «континенты планеты». Группа рядом стоящих плиток имеет одинаковый цвет фона, поэтому образует «остров». Плитка имеет типовое оформление: цвет фона; рамка, текстовое содержание, картинка, положение текста относительно картинки.

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

• Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать плитку в «карман»; поставить плитку из «кармана» или «сундука». Сундук – долговременное хранилище ненужных плиток. Карман – хранилище для новых плиток.

• Стикер – отдельный вид плитки, который служит для группирования плиток на поле. Стикер, не имеет рамки и картинки и может занимать несколько ячеек, а его текст программируется пользователем или разработчиком.

ИНТЕЛЛЕКТ-КАРТА

Плитка имеет типовое оформление:

• рамка {цвет, толщина линии, ширина отступа от края не меньше двух};

• текстовое содержание {тема, категория, автор, дата и время};

• картинка, положение текста относительно картинки {слева, справа, внизу, вверху, сначала и слева, но в тексте};

• цвет фона. Поле имеет цветной фон или градацию двух цветов или картинку подложки, которую изменяет пользователь. Различают тематические картинки подложки: «голубой океан», «лунная поверхность», «крупная листва», «континенты планеты»

• Карман - это временный список плиток для перемещения по игровому полю. Плитки в кармане организованы очередью FIFO.

• Сундук - это долговременный список ненужных на поле плиток. Плитки в сундуке отсортированы по убыванию даты и времени.

• Существует специальная плитка «стикер», которая не имеет рамки и картинки и может занимать несколько ячеек.

• Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать плитку в «карман»; поставить плитку из «кармана» или «сундука». Пользователь собирает плитки из ячеек в карман, при этом освобождаемая ячейка на поле отображается цветом подложки.

• Если пользователь не решил, куда поставить плитку на игровом поле, то он может переместить её в сундук.

• Существует специальная плитка «стикер», которая не имеет рамки и картинки и может занимать несколько ячеек, а самое главное, текст стикера программируется пользователем или разработчиком. Только в пустую ячейку поля пользователь может разместить плитку из кармана. Для размещаемой из кармана плитки выполняется автоматическое определение цвета фона.

• Поле имеет цветной фон или градацию двух цветов или картинку подложки, которую изменяет пользователь. Различают тематические картинки подложки: «голубой океан», «лунная поверхность», «крупная листва», «континенты планеты».

ИНТЕЛЛЕКТ-КАРТА

• Для решение навигации по сайту в стиле «Pixelcraft» необходимо три действия: переход, забрать, поставить.

• LClick и RClick мышки - переход по гиперссылке.

• RClick мышки+удерживание - забираем плитку в карман; «трусим курсор» над свободной ячейкой, делаем не размашистый зигзаг курсором мышки над пустой ячейкой, в которую автоматически «сбрасывается» первая плитка из обоймы кармана и стек кармана сдвигается. Таким образом, можно быстро «струсить» все плитки из кармана.

• LClick мышки+удерживание над свободной ячейкой, прикоснутся и держать, то плитка из кармана перетекает, как капелька воды, т.е. построчно проявляется в ячейке с прозрачность трех ведущих строк {коэффициент альфа-канала 25%, 50%, 80% для самой крайней строки}, задержка 20 мс.

ИНТЕЛЛЕКТ-КАРТА

ПРОТОКОЛ

Управление графическим интерфейсом с помощью Pixelcraft

1 Пользователь

1.1 Доступные действия

1.1.1 Переход по ссылке

1.1.2 Забрать плитку в "карман"

1.1.3 Поставить плитку из "сундука"

1.1.4 Выбрать фон поля

1.1.5 Выбрать текст "стикера"

1.1.6 Поставить плитку из "кармана"

1.1.7 Задать текст стикера

2 Элементы управления

2.1 Мышь

2.1.1 RClick+удерживание

2.1.2 LClick+удерживание

2.1.3 LClick

2.1.4 Курсор

2.1.5 Ползунок

3 Поле "песочница"

3.1 Ячейка

3.1.1 Цифровая карта

3.1.2 Остров

3.1.3 Пустая

3.1.4 Плитка

3.1.4.1 Текстовое содержание

3.1.4.1.1 Тема

3.1.4.1.2 Категория

3.1.4.1.3 Автор

3.1.4.1.4 Дата

3.1.4.1.5 Время

3.1.4.2 Рамка

3.1.4.2.1 Цвет

3.1.4.2.2 Толщина линии

3.1.4.2.3 Ширина отступа

3.1.4.3 Карман

3.1.4.4 Сундук

3.1.4.5 Картинка

3.1.4.5.1 Справа

3.1.4.5.2 Слева

3.1.4.5.3 Вверху

3.1.4.5.4 Внизу

3.1.4.5.5 Сначала и слева,но в тексте

3.1.4.6 Стикер

3.1.4.6.1 Занимает несколько ячеек

3.1.4.6.2 Текст

3.1.4.6.2.1 Задается пользователем

3.1.4.6.2.2 Задается разработчиком

3.1.4.7 Фон

3.1.4.7.1 Цвет

3.1.4.7.2 Градация двух цветов

3.1.4.7.3 Картинка

3.1.4.2.2 Толщина линии

3.1.4.2.3 Ширина отступа

3.1.4.3 Карман

3.1.4.4 Сундук

3.1.4.5 Картинка

3.1.4.5.1 Справа

3.1.4.5.2 Слева

3.1.4.5.3 Вверху

3.1.4.5.4 Внизу

3.1.4.5.5 Сначала и слева,но в тексте

3.1.4.6 Стикер

3.1.4.6.1 Занимает несколько ячеек

3.1.4.6.2 Текст

3.1.4.6.2.1 Задается пользователем

3.1.4.6.2.2 Задается разработчиком

3.1.4.7 Фон

3.1.4.7.1 Цвет

3.1.4.7.2 Градация двух цветов

3.1.4.7.3 Картинка

26

IDF0 И DFD ДИАГРАММЫ

• На слайде отображен процесс – создание web-интерфейса сайта со стороны разработчика. Входными данными для данного процесса является пустое 2D поле. Выходными данными является сам пользовательский интерфейс. Исполнительный механизм – разработчик и браузер. Ограничения: Реализация при помощи HTML5 с использованием SVG-графики.

• На слайде изображена декомпозиция главного процесса проектируемой системы. При декомпозиции были выделены следующие подпроцессы: Разработка плиток и отправка их пользователю.

• На слайде изображена декомпозиция процесса добавления плиток на поле. В качестве входных данных ячейка. При оформлении плитки требуется текст,цвет,рамка и картинка

• На слайде отображен процесс – создание web-интерфейса сайта со стороны пользователя. Входными данными для данного процесса является поле по умолчанию и идентификатор пользователя. Выходными данными является переход по ссылке. Исполнительный механизм – пользователь и мышь.

• На слайде отображена декомпозиция основного процесса, состоящего из трех подпроцессов: добавление, оформление и отображение. Для оформления пользовательского интерфейса используется цвет,рамка,текст,картинка. Для перехода по ссылке используется левый клик мышью. Для настройки поля используется карман, содержащий новые плитки.

37

UML ДИАГРАММЫ

ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ

ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ

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

ДИАГРАММА КЛАССОВ UML

ДИАГРАММА КЛАССОВ UML

На слайде изображена диаграмма классов uml. Проектируемая система содержит следующие классы: пользователь, поле, карман, сундук, плитка.

ДИАГРАММА КОМПОНЕНТОВ

ДИАГРАММА КОМПОНЕНТОВ

На слайде изображена диаграмма компонентов проектируемой системы. Пользователь войдя на сайт, настраивает поле(выбирает фон, текст, картинку) при выходе настройка сохраняется.

ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ

ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ

На слайде показана диаграмма последовательности. Она отображает последовательность взаимодействия пользователя и классов между собой. При запуске сайта создается класс сайт, с помощью которого пользователь может выбрать дальнейшие действия. При выборе действия настройка поля, создается класс поле, при выборе действия выбрать плитку создается класс плитка, далее пользователю предоставляется выбор плитки из кармана или сундука, соответственно создается класс какрман или сундук. При сохранении – класс сайт.

46

ПРОЕКТИРОВАНИЕ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

СТРАНИЦА АВТОРИЗАЦИИ

• На прототипе страницы авторизации незарегистрированные пользователи могут прейти на страницу регистрации, с помощью кнопки «Регистрация», зарегистрированные – войти в систему, с помощью кнопки «Вход».

СТРАНИЦА РЕГИСТРАЦИИ

• Для регистрации пользователю необходимо заполнить следующие поля: «Имя», «Логин», «E-mail», «Пароль», «Пароль повторно» и с помощью кнопки «Дальше» перейти на следующую страницу.

ПОЛЕ «ПЕСОЧНИЦА»

• После входа в систему пользователю представлено поле с плитками.

• Пользователь может добавить плитку из кармана или сундука («трусим курсор» над свободной ячейкой)

• Пользователь может убрать плитку во временный список карман (RClick мышки+удерживание) или в долговременный список ненужных на поле плиток-сундук.

• Нажав левой кнопкой мыши пользователь может перейти по гиперссылке.

• При нажатии на кнопку выход, пользователь переходит на страницу входа.

МОДЕЛЬ GUI STUDIO DESIGN

СОДЕРЖИМОЕ ПЛИТОК

СОДЕРЖИМОЕ ПЛИТОК

СОДЕРЖИМОЕ ПЛИТОК

СОДЕРЖИМОЕ ПЛИТОК «КАРМАН» И «СУНДУК»

56

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

• Разработанный прототип имеет статический шаблон, что очень неудобно для различных разрешений экрана, поэтому реализация динамического шаблона для системы – это также одна из первоочередных задач дальнейшего развития.

57

СПАСИБО ЗА ВНИМАНИЕ