РАСЧЕТНАЯ РАБОТА

ПО ДИСЦИПЛИНЕ «МОДЕЛИРОВАНИЕ И АНАЛИЗ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ»

НА ТЕМУ: ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА ПРОГРАММНОГО ПРОДУКТА

Выполнила студентка группы ПОС-10б Лысакова Н.В.Руководитель ст. преп. Гудаев О.А.

Донецкий Национальный Технический Университет

2

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

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

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

3

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

Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек. Ячейка - это пустое место поля, занятая ячейка поля - это плитка. Плитка имеет типовое оформление: цвет фона; рамка {цвет, толщина линии, ширина отступа от края не меньше двух}, текстовое содержание {тема, категория, автор, дата и время}, картинка, положение текста относительно картинки {слева, справа, внизу, вверху, сначала и слева, но в тексте}. Плитки добавляются динамически программным способом разработчиком сайта в свободную ячейку с начала игрового мира или мир формируется заданной конфигурации. Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать плитку в «карман»; поставить плитку из «кармана» или «сундука». Пользователь собирает плитки из ячеек в карман, при этом освобождаемая ячейка на поле отображается цветом подложки. Карман - это временный список плиток для перемещения по игровому полю. Если пользователь не решил, куда поставить плитку на игровом поле, то он может переместить её в сундук. Сундук - это долговременный список ненужных на поле плиток. Плитки в кармане организованы очередью FIFO. Плитки в сундуке отсортированы подбиванию даты и времени. Существует специальная плитка «стикер», которая не имеет рамки и картинки и может занимать несколько ячеек, а самое главное, текст стикера программируется пользователем или разработчиком. Только в пустую ячейку поля пользователь может разместить плитку из кармана. Для размещаемой из кармана плитки выполняется автоматическое определение цвета фона. В восьмисвязной окрестности Мура для ячейки, куда помещается плитка, определяется максимальное количество плиток одинакового цвета фона, но приоритет цвета перекрашивания выше для соседних плиток в четырёхсвязной окрестности фон Неймана. Поле имеет цветной фон или градацию двух цветов или картинку подложки, которую изменяет пользователь. Различают тематические картинки подложки: «голубой океан», лунная поверхность», «крупная листва», «континенты планеты». Поле масштабируется ползунком до минимума: одна ячейка два горизонтальных пикселя цвета фона плитки или цвет поля. Уменьшив поле до минимума, получим цифровую карту, где группа плиток будут выглядеть как остров. Группа рядом стоящих плиток имеет одинаковый цвет фона, поэтому образует «остров». На фоне подложки «лунная поверхность» можно разместить на фоне кратера остров плиток и подписать стикером: кратер «Музыка» или кратер «Спортивные новости». Для зарегистрированных пользователей конфигурация размещения на поле плиток сохраняется в базе данных. Для решение навигации по сайту в стиле «Pixelcraft» необходимо три действия: переход, забрать, оставить. А у мышки две кнопки. Первыйвариант: LClick мышки - переход по гиперссылке, RClick мышки+удерживание -забираем плитку в карман; «трусим курсор» над свободной ячейкой, делаем не размашистый зигзаг курсором мышки над пустой ячейкой, в которую автоматически "сбрасывается» первая плитка из обоймы кармана и стек кармана сдвигается. Таким образом, можно быстро «струсить» все плитки из кармана. Второй вариант: LClick иRClick аналогичные действия первому варианту, а вот если LClick мышки+удерживаниенад свободной ячейкой, прикоснутся и держать, то плитка из кармана перетекает, как капелька воды, т.е. построчно проявляется в ячейке с прозрачность трех ведущих строк{коэффициент альфа-канала 25%, 50%, 80% для самой крайней строки}, задержка 20 мс.

4

DEMOHTTP://PIXELCRAFT.SOMEE.COM/

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

6

ГЛАВНАЯ СТРАНИЦАСодержит три ссылки: на страницу регистрации для новых пользователей, на страницу авторизации для уже зарегистрированных, и на страницу информации о разработчике.Внизу автоматически размещена ссылка на сайт хостера.

7

СТРАНИЦА РЕГИСТРАЦИИ И АВТОРИЗАЦИИНа слайде изображены страницы с формой авторизации, а также регистрации и подтверждением об успешной регистрации.

8

ИГРОВОЕ ПОЛЕНа слайде изображено игровое поле, представляющее из себя сетку, наполненную плитками. Каждая плитка ведет на какой либо контент: музыка, фильмы, новости. В зависимости от категории контента рамка плитки имеет определённый цвет. Карман и Сундук вызываются кнопками, расположенными в нижней части поля.Нажатие кнопки «Выход» влечет за собой выход из системы и перенаправление пользователя на страницу авторизации.

9

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

10

СТРАНИЦА «ОБ АВТОРЕ»На данном слайде изображена страница «Об авторе», которая содержит информацию о разработчике и системе

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

12

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

13

ОПИСАНИЕ Системный элемент навигации Pixelcraft представляет собой

масштабируемое рабочее пространство с настраиваемым отображением информации.

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

является мышь.

14

СОДЕРЖИТ

15

ОПИСАНИЕ Система состоит из трех основных компонентов: Поле, Сундук и карман. Минимальная единица на поле – плитка. Сундук – долговременное хранилище ненужных плиток. Карман – хранилище для новых плиток.

16

ПОЛЕ

17

ОПИСАНИЕ Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных

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

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

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

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

18

ПЛИТКИ

19

ОПИСАНИЕ Плитка имеет типовое оформление: цвет фона; рамка, текстовое содержание, картинка,

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

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

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

программируется пользователем или разработчиком. Каждая плитка может ссылаться либо на адрес url либо на любой файл/приложение на

устройстве.

20

ПРОЦЕСС

21

ОПИСАНИЕ В системе можно выделить несколько процессов: Анимация,

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

«острова». рамка Плитки становиться такого же цвета как и остров к которому она присоединилась.

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

22ПРОТОКОЛ В ФОРМАТЕ RTF

Системный компонент навигации PixelCraft

1 Участвуют 1.1 Разработчик 1.2 Пользователь 2 Содержит 2.1 Карман 2.2 Сундук 2.3 Поле

2.3.1 Ячейки 2.3.1.1 Ширина 2.3.1.2 Высота 2.3.2 Плитки 2.3.2.1 Цвет фона 2.3.2.2 Текстовое содержание

2.3.2.2.1 Тема 2.3.2.2.2 Категория 2.3.2.2.3 Автор 2.3.2.2.4 Время

2.3.2.3 Ссылка 2.3.2.3.1 URL 2.3.2.3.2 Путь к файлу

2.3.2.3.2.1 Фильм 2.3.2.3.2.2 Документ

2.3.2.3.2.3 Музыка

23ПРОТОКОЛ В ФОРМАТЕ RTF

2.3.2.4 Рамка 2.3.2.4.1 Цвет 2.3.2.4.2 Отступ 2.3.2.4.2.1 Сверху 2.3.2.4.2.2 Снизу 2.3.2.4.2.3 Слева 2.3.2.4.2.4 Справа 2.3.2.4.3 Толщина 2.3.2.5 Картинка 2.3.2.5.1 Обтекание текстом

2.3.2.5.1.1 Слева 2.3.2.5.1.2 Справа 2.3.2.5.1.3 Сверху 2.3.2.5.1.4 Снизу 2.3.3 Сетка 2.3.3.1 Цвет 2.3.3.2 Прозрачность

2.3.3.3 Подложка 2.3.3.4 Размер 2.3.3.4.1 Столбцов

2.3.3.4.2 Строк 2.3.4 Стикер 2.3.4.1 Текст 2.3.4.2 Ширина 2.3.4.3 Высота 2.3.4.4 Цвет

24ПРОТОКОЛ В ФОРМАТЕ RTF

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

3 Процесс 3.1 Действия 3.1.1 Перейти 3.1.1.1 LClick 3.1.2 Поместить 3.1.2.1 (1 вариант) Z-обазное движение мышью

3.1.2.2 (1 вариант)

3.1.3 Забрать 3.1.3.1 RClick + удерживание

3.2 Преобразование

3.2.1 Присоеенение 3.2.2 Отсоеденение 3.3 Масштабирование

3.3.1 Увеличение 3.3.2 Уменьшение

3.4 Время анимации

3.4.1 Милисекунды 3.4.2 2 вариант 4 Инструмент 4.1 Мышь

25СХЕМА ЗНАНИЙ

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

27

28

WEB-ИНТЕРФЕЙС САЙТАНа слайде отображен процесс – создание web-интерфейса сайта со стороны разработчика. Входными данными для данного процесса является пустое поле и идентификатор пользователя. Выходными данными является сам пользовательский интерфейс по умолчанию. Исполнительный механизм – разработчик и браузер. Ограничения: поле в 50 строк и 50 столбцов и реализация при помощи HTML5

29

30

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

31

32

На слайде изображена декомпозиция процесса добавления плиток на поле. В качестве входных данных появляется источник контента. Контент должен быть в формате XML. По умолчанию на поле располагается 100 плиток, 20 из них помещаются непосредственно на поле, 80 в карман, чтоб пользователь в дальнейшем мог расположить их по собственному желанию.

33

34

На слайде изображена декомпозиция процесса подготовки плиток. Сначала необходимо получить текст и изображения из XML-файла. Размер изображения ограничен 250х250 px. Затем сформировать плитку, содержащую текст и изображения и установить для неё серый фон.

35

36

WEB-ИНТЕРФЕЙС САЙТАНа слайде отображен процесс – создание web-интерфейса сайта со стороны пользователя. Входными данными для данного процесса является поле по умолчанию и идентификатор пользователя. Выходными данными является кастомизированный пользовательский интерфейс или осуществление навигации о ссылке. Исполнительный механизм – пользователь и мышь. Ограничения: поле в 50 строк и 50 столбцов

37

38

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

39

40

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

41

42

НАСТРОЙКА ПОЛЯ ПО УМОЛЧАНИЮНа слайде изображена контекстная DFD диаграмма настройки пользовательского интерфейса по умолчанию. В систему из источника контента передается контент в формате XML. В результате работы системы пользователю передаться поле по умолчанию. Настройка поля осуществляется разработчиком.

43

44

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

45

46

НАВИГАЦИЯ ПРИ ПОМОЩИ WEB-ИНТЕРФЕЙСАНа слайде изображена контекстная DFD диаграмма навигации при помощи web-интерфейса. В систему от разработчика поступает поле по умолчанию, а пользователь выбирает плитки, с которыми будет взаимодействовать. В результате работы системы пользователю предоставляется запрашиваемый контент.

47

48

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

49 UML ДИАГРАММЫ

50

51

ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ На диаграмме изображена структура одного из вариантов

использования системы. Разработчик формирует для пользователя поле по умолчанию.

Для наполнения поля необходимо распарсить контент, сформировать плитки и добавить их на поле.

Таким же образом наполняется карман новыми плитками для пользователя.

Пользователь взаимодействует вариантом использования «Работа с системой»

«Работа с системой» включает в себя такие варианты как: «Переход по ссылке», «Перемещение плиток из кармана», «перемещение плиток в сундук», «Обновление поля»

52

123

53

1

54

2

55

3

56

ДИАГРАММА КОМПОНЕНТОВ Данная диаграмма показывает из каких реальны компонентов

состоит проектируемая система. При анализе системы нам потребуются такие компоненты: Web-

клиент (browser), Web-сервер (с модулями сайта PixelCraft), Модули сайта (Defaut.aspx, Default.css, Default.cs, MasterPage.master (Auth.aspx, Auth.cs, Auth.css, Setting.aspx, Setting.css, Setting.cs), User.db, ContentPlaceHolder (Field.cs, Tile.cs, Chest.cs), Filed.db)

Компонент Filed.cs связан с базой данны Field.db по интерфейсу Ifeld, компоненты Auth.aspx, Setting.aspx связаны с базой данных User.db по интерфейсам IAdd и IDelete, с которой свзан и компонет Fied.cs по интерфеусу IUser.

Компоненты Web-клиент и Web-сервер соедены интерфейсов HTTP.

57

1

2

58

1

592

60

ДИАГРАММА ДЕЯТЕЛЬНОСТИ На данной диаграмме показана последовательность действия которая происходит при взаимодействии с интерфейсом сайта «PixelCraft».

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

Проверка кармана происходит до тех пор, пока в кармане есть непроверенные плитки.

61

1

2

62

1

632

64

ДИАГРАММА КЛАССОВ Главный класс системы : Field, он содержит в себе объекты всех остальных классов.

Классы Pocket и Chest наследуются от абстрактного класса Storadge.

Классе Storadge хранит в себе колекцию объектов Tile. От класса Tile наследуются два класса Sticker и ContentTile. Класс ContentTile содержит в себе структуры Border, TilteText, TileImage

65

1

2

66

1

67

2

68

ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ Данная диаграмма является частным случаем диаграммы взаимодействия, но в отличии от неё, отображается временную последовательность выполнения действий.

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

СТАРТОВАЯ СТРАНИЦА САЙТА

СТАРТОВАЯ СТРАНИЦА САЙТА

ОПИСАНИЕ СТАРТОВОЙ СТРАНИЦЫ САЙТА На главной странице изображено две кнопки «Авторизация» и

«Регистрация» Если у пользователя уже есть логин и пароль, то он нажимает кнопку

«Авторизация» и переходит на форму вода логина и пароля. Если пользователь еще ни разу не пользовался сайтом, то он

нажимает на кнопку «Регистрация» и переходит на страницу регистрации.

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

СТРАНИЦА ПОДТВЕРЖДЕНИЯ РЕГИСТРАЦИИ

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

ОПИСАНИЕ СТРАНИЦЫ РЕГИСТРАЦИИ На странице регистрации пользователю предложено придумать себе

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

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

После нажатия на кнопку «Зарегистрироваться», в случае если все данные верны, пользователь получает сообщение с подтверждением регистрации и ссылку на страницу авторизации для ввода логина и пароля.

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

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

ОПИСАНИЕ СТРАНИЦЫ АВТОРИЗАЦИИ На странице авторизации пользователь вводит свой логин и пароль

для входа в систему. Если авторизация прошла успешно, то пользователь

перенаправляется на страницу со своим игровым полем.

ИГРОВОЕ ПОЛЕ

ИГРОВОЕ ПОЛЕ C ОТОБРАЖЕНИЕМ СЕТКИ

ИГРОВОЕ ПОЛЕ

ИГРОВОЕ ПОЛЕ: КАРМАН

ИГРОВОЕ ПОЛЕ: СУНДУК

ИГРОВОЕ ПОЛЕ: ВИДЫ ПЛИТОК

Расширенный вид плитки. Используется в кармане для отображения наиболее полной информации о плитке.

Широкая плитка. Используетсяна поле тля отображения краткой информации о плитке

Простая плитка. Используется на полеОтображает только картинку.

ИГРОВОЕ ПОЛЕ: НАВИГАЦИЯ

ОПИСАНИЕ ИГРОВОГО ПОЛЯ Игровое поле состоит из нескольких частей: поле, карман и сундук. При нажатии кнопки «Карман» поверх рабочего поля появляется слой,

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

содержащий плитки, которые пользователь поместил туда на длительное хранение.

По нажатию кнопки «Выход» происходит выход из системы и для повторного её использования необходимо авторизоваться заново.

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

При клике на плитку открывается связанная с ней ссылка, либо файл.

88

ССЫЛКИ Презентация SlideShare - http://www.slideshare.net/NatashaLysakova/ss-28570264

GUI Designer Project - https://www.dropbox.com/sh/idv26v3qf7rrz5e/I0TjMdX51w

ASP.NET прототип – http://pixelcraft.somee.com ASP.NET проект - https://www.dropbox.com/sh/qsa28hrnmkcv3hx/KoSc-4gP7G

89 ВЫВОДЫ

90

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

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

В качестве дополнительных опций можно реализовать интеграцию с социальными сетями, кнопки “Share”, “Like” а также возможность регистрации про помощи профилей из социальных сетей (Facebook, Google+, Twitter, LinkedIn, Вконтакте).

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