1. РАСЧЕТНАЯ РАБОТА
По дисциплине «моделирование и анализ
программного обеспечения»
на тему: «Проектирование и разработка
программного продукта»
Выполнила:
студентка гр. ПОС-10а
Лукьянченко Любовь
2. • В ходе выполнения лабораторных работ была разработана
модель Web-интерфейса сайта в стиле 2D Minecraft.
• Класс ПО: Системный WebGL-класс векторной SVG-графики.
• Тема: Отображение пунктов графического интерфейса 2D
полем плиток в игровой «песочнице».
• Назначение: Применение двухмерного игрового поля
«песочниц строительных блоков Pixelcraft» плиток как
элемента управления графическим интерфейсом сайта или
программы для сенсорного экрана.
2
3. ОПИСАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ:
•
•
Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек.
Ячейка - это пустое место поля, занятая ячейка поля - это плитка. Плитка имеет типовое
оформление: цвет фона; рамка, текстовое содержание, картинка, положение текста
относительно картинки. Существует специальная плитка «стикер», без рамки и картинки и
может занимать несколько ячеек, а самое главное, текст стикера программируется
пользователем или разработчиком. Только в пустую ячейку поля пользователь может
разместить плитку из кармана.
•
Карман - это временный список плиток для перемещения по игровому полю. Если
пользователь не решил, куда поставить плитку на игровом поле, то он может переместить её
в сундук. Плитки в кармане организованы очередью FIFO.
•
Сундук - это долговременный список ненужных на поле плиток. Плитки в сундуке
отсортированы по убыванию даты и времени.
•
Для решение навигации по сайту в стиле «Pixelcraft» необходимо три действия:
переход, забрать, поставить.
3
5. ГЛАВНАЯ СТРАНИЦА
Содержит ссылки: на страницу регистрации
для новых пользователей и на страницу
авторизации для уже зарегистрированных.
5
6. СТРАНИЦА РЕГИСТРАЦИИ И АВТОРИЗАЦИИ
На слайде изображены страницы с формой авторизации, а также регистрации.
6
7. ПОЛЕ ПЛИТОК
На следующем слайде изображено поле плиток. Каждая плитка является
ссылкой на какой либо контент: музыка, фильмы, новости. Карман и Сундук
вызываются нажатием на соответствующую плитку .
Нажатие кнопки «Выход» влечет за собой выход
перенаправление пользователя на страницу авторизации.
из
системы
и
7
13. Навигация по сайту в 2D поле «песочницы» прямоугольных плиток.
• Поле размечено невидимой или полупрозрачной к фону сеткой
прямоугольных ячеек.
• Ячейка - это пустое место поля.
• Плитка – это занятая ячейка поля .
• Группа рядом стоящих плиток имеет одинаковый цвет фона, поэтому
образует «остров».
• Уменьшив поле до минимума, получим цифровую карту, где группа плиток
будут выглядеть как остров.
14. • Можно выделить три основных компонента: Поле, пользователь и элементы управления.
• Поле размечено невидимой или полупрозрачной к фону сеткой прямоугольных ячеек, количество
которых можно настроить. Минимальная единица на поле – плитка.
• Поле имеет цветной фон или градацию нескольких цветов или картинку подложки, которую
изменяет пользователь. Различают тематические картинки подложки: «голубой океан», «лунная
поверхность», «крупная листва», «континенты планеты». Группа рядом стоящих плиток имеет
одинаковый цвет фона, поэтому образует «остров». Плитка имеет типовое оформление: цвет фона;
рамка, текстовое содержание, картинка, положение текста относительно картинки.
• Плитки добавляются динамически программным способом разработчиком сайта в свободную
ячейку с начала игрового мира или мир формируется заданной конфигурации.
• Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать плитку в
«карман»; поставить плитку из «кармана» или «сундука». Сундук – долговременное хранилище
ненужных плиток. Карман – хранилище для новых плиток.
• Стикер – отдельный вид плитки, который служит для группирования плиток на поле. Стикер, не
имеет рамки и картинки и может занимать несколько ячеек, а его текст программируется
пользователем или разработчиком.
18. •
картинка, положение текста относительно картинки
{слева, справа, внизу, вверху, сначала и слева, но в тексте};
19. • цвет фона. Поле имеет цветной фон или градацию двух цветов или картинку
подложки, которую изменяет пользователь. Различают тематические
картинки подложки: «голубой океан», «лунная поверхность», «крупная
листва», «континенты планеты»
20. • Карман - это временный список плиток для перемещения по игровому полю. Плитки в кармане
организованы очередью FIFO.
• Сундук - это долговременный список ненужных на поле плиток. Плитки в сундуке отсортированы по
убыванию даты и времени.
• Существует специальная плитка «стикер», которая не имеет рамки и картинки и может занимать
несколько ячеек.
21. • Пользователю сайта доступны главные действия с плиткой: переход по ссылке;
забрать плитку в «карман»; поставить плитку из «кармана» или «сундука».
Пользователь собирает плитки из ячеек в карман, при этом освобождаемая
ячейка на поле отображается цветом подложки.
• Если пользователь не решил, куда поставить плитку на игровом поле, то он может
переместить её в сундук.
• Существует специальная плитка «стикер», которая не имеет рамки и картинки и
может занимать несколько ячеек, а самое главное, текст стикера
программируется пользователем или разработчиком. Только в пустую ячейку поля
пользователь может разместить плитку из кармана. Для размещаемой из кармана
плитки выполняется автоматическое определение цвета фона.
• Поле имеет цветной фон или градацию двух цветов или картинку
подложки, которую изменяет пользователь. Различают тематические картинки
подложки: «голубой океан», «лунная поверхность», «крупная
листва», «континенты планеты».
23. • Для решение навигации по сайту в стиле «Pixelcraft» необходимо три
действия: переход, забрать, поставить.
• LClick и RClick мышки - переход по гиперссылке.
•
RClick мышки+удерживание - забираем плитку в карман; «трусим
курсор» над свободной ячейкой, делаем не размашистый зигзаг
курсором мышки над пустой ячейкой, в которую автоматически
«сбрасывается» первая плитка из обоймы кармана и стек кармана
сдвигается. Таким образом, можно быстро «струсить» все плитки из
кармана.
• LClick мышки+удерживание над свободной ячейкой, прикоснутся и
держать, то плитка из кармана перетекает, как капелька воды, т.е.
построчно проявляется в ячейке с прозрачность трех ведущих строк
{коэффициент альфа-канала 25%, 50%, 80% для самой крайней
строки}, задержка 20 мс.
25. ПРОТОКОЛ
Управление графическим
3 Поле "песочница"
интерфейсом с помощью Pixelcraft
3.1 Ячейка
1 Пользователь
3.1.1 Цифровая карта
1.1 Доступные действия
3.1.2 Остров
1.1.1 Переход по ссылке
3.1.3 Пустая
1.1.2 Забрать плитку в "карман"
3.1.4 Плитка
1.1.3 Поставить плитку из
3.1.4.1 Текстовое содержание
"сундука"
1.1.4 Выбрать фон поля
3.1.4.1.1 Тема
1.1.5 Выбрать текст "стикера"
3.1.4.1.2 Категория
1.1.6 Поставить плитку из
"кармана"
3.1.4.1.3 Автор
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.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 Картинка
3.1.4.5.2 Слева
3.1.4.5.1 Справа
3.1.4.5.3 Вверху
3.1.4.5.2 Слева
3.1.4.5.4 Внизу
3.1.4.5.3 Вверху
3.1.4.5.5 Сначала и слева,но в
тексте
3.1.4.5.4 Внизу
3.1.4.6 Стикер
3.1.4.5.5 Сначала и слева,но в
тексте
3.1.4.6.1 Занимает несколько ячеек 3.1.4.6 Стикер
3.1.4.6.2 Текст
3.1.4.6.1 Занимает несколько ячеек
3.1.4.6.2.1 Задается пользователем 3.1.4.6.2 Текст
3.1.4.6.2.2 Задается разработчиком 3.1.4.6.2.1 Задается пользователем
3.1.4.7 Фон
3.1.4.6.2.2 Задается разработчиком
3.1.4.7.1 Цвет
3.1.4.7 Фон
3.1.4.7.2 Градация двух цветов
3.1.4.7.1 Цвет
3.1.4.7.3 Картинка
3.1.4.7.2 Градация двух цветов
3.1.4.2.2 Толщина линии
3.1.4.7.3 Картинка
3.1.4.2.3 Ширина отступа
3.1.4.3 Карман
3.1.4.4 Сундук
28. • На слайде отображен процесс – создание web-интерфейса
сайта со стороны разработчика. Входными данными для
данного процесса является пустое 2D поле. Выходными
данными является сам пользовательский интерфейс.
Исполнительный механизм – разработчик и браузер.
Ограничения: Реализация при помощи HTML5 с
использованием SVG-графики.
29.
30. • На слайде изображена декомпозиция главного процесса
проектируемой системы. При декомпозиции были выделены
следующие подпроцессы: Разработка плиток и отправка их
пользователю.
31.
32. • На слайде изображена декомпозиция процесса добавления
плиток на поле. В качестве входных данных ячейка. При
оформлении плитки требуется текст,цвет,рамка и картинка
33.
34. • На слайде отображен процесс – создание web-интерфейса
сайта со стороны пользователя. Входными данными для
данного процесса является поле по умолчанию и
идентификатор пользователя. Выходными данными является
переход по ссылке. Исполнительный механизм –
пользователь и мышь.
35.
36. • На слайде отображена декомпозиция основного процесса,
состоящего из трех подпроцессов: добавление, оформление и
отображение. Для оформления пользовательского интерфейса
используется цвет,рамка,текст,картинка. Для перехода по ссылке
используется левый клик мышью. Для настройки поля
используется карман, содержащий новые плитки.
39. ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ
На слайде отображена диаграмма вариантов использования. При запуске
сайта пользователь имеет доступ к следующим действиям: перейти по
ссылке, изменять масштаб поля, и цветовой фон, размещать плитку из
«кармана» в пустую ячейку, ставить плитку из «сундука», выбирать текст
плитки «стикер», забирать плитку в карман и сохранять настройку интерфейса .
45. ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ
На слайде показана диаграмма последовательности. Она
отображает последовательность взаимодействия пользователя и
классов между собой. При запуске сайта создается класс сайт, с
помощью которого пользователь может выбрать дальнейшие
действия. При выборе действия настройка поля, создается класс
поле, при выборе действия выбрать плитку создается класс
плитка, далее пользователю предоставляется выбор плитки из
кармана или сундука, соответственно создается класс какрман
или сундук. При сохранении – класс сайт.
47. СТРАНИЦА АВТОРИЗАЦИИ
• На прототипе страницы авторизации незарегистрированные пользователи могут прейти
на страницу регистрации, с помощью кнопки «Регистрация», зарегистрированные – войти
в систему, с помощью кнопки «Вход».
50. • После входа в систему пользователю представлено поле с плитками.
• Пользователь может добавить плитку из кармана или сундука («трусим
курсор» над свободной ячейкой)
• Пользователь может убрать плитку во временный список карман (RClick
мышки+удерживание) или в долговременный список ненужных на поле
плиток-сундук.
• Нажав левой кнопкой мыши пользователь может перейти по гиперссылке.
• При нажатии на кнопку выход, пользователь переходит на страницу входа.
56. • Разработанный прототип программного обеспечения не выполняет
многих функций, которые должны быть в полноценном
продукте, поэтому первоочередной задачей дальнейшего развития
должна быть реализация всех запланированных функций.
• Разработанный прототип имеет статический шаблон, что очень
неудобно для различных разрешений экрана, поэтому реализация
динамического шаблона для системы – это также одна из
первоочередных задач дальнейшего развития.
56
