1. Донецкий Национальный Технический Университет
Выполнила студентка группы ПОС-10б Лысакова Н.В.
Руководитель ст. преп. Гудаев О.А.

2.  Класс ПО: Системный WebGL-класс векторной SVG-графики.
 Ник: Web-интерфейс сайта в стиле 2D Minecraft.
 Тема: Отображение пунктов графического интерфейса 2D полем плиток в игровой
«песочнице».
 Назначение: Применение двухмерного игрового поля «песочница строительных
блоков Pixelcraft» плиток как элемента управления графическим интерфейсом
сайта или программы для сенсорного экрана.
2

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

4. 4
HTTP://PIXELCRAFT.SOMEE.C
OM/

5. 5

6. Содержит три ссылки: на
страницу регистрации для
новых пользователей, на
страницу авторизации для
уже зарегистрированных, и
на страницу информации о
разработчике.
Внизу
автоматически
размещена ссылка на сайт
хостера.
6

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

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

9. 9

10. На
данном
слайде
изображена
страница
«Об авторе», которая
содержит информацию о
разработчике и системе
10

11. 11

12. 12

13.  Системный элемент навигации Pixelcraft представляет собой масштабируемое
рабочее пространство с настраиваемым отображением информации.
 Система настраивается разработчиками и пользователями.
 Инструментом взаимодействия между системой и пользователем является мышь.
13

14. 14

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

16. 16

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

18. 18

19.  Плитка имеет типовое оформление: цвет фона; рамка, текстовое содержание,





картинка, положение текста относительно картинки.
Плитки добавляются динамически программным способом разработчиком сайта в
свободную ячейку с начала игрового мира или мир формируется заданной
конфигурации.
Пользователю сайта доступны главные действия с плиткой: переход по ссылке; забрать
плитку в «карман»; поставить плитку из «кармана» или «сундука».
Стикер – отдельный вид плитки, который служит для группирования плиток на поле.
стикер, не имеет рамки и картинки и может занимать несколько ячеек, а его текст
программируется пользователем или разработчиком.
Каждая плитка может ссылаться либо на адрес url либо на любой файл/приложение на
устройстве.
19

20. 20

21.  В системе можно выделить несколько процессов: Анимация, масштабирование,
преобразование и действия с плитками.
 Масштабирование используется для получения цифровой карты поля.
 Преобразование – процесс присоединения/отсоединения плитки от «острова».
рамка Плитки становиться такого же цвета как и остров к которому она
присоединилась.
 С плитками можно совершить следующие действия: перейти по ссылке/открыть
файл, поместить плитку на поле, забрать плитку с поля.
21

22.  Системный
 2.3.1.1 Ширина
компонент
 2.3.1.2 Высота
навигации PixelCraft
 2.3.2 Плитки
 1 Участвуют
 2.3.2.1 Цвет фона
 1.1 Разработчик
 2.3.2.2 Текстовое
 1.2 Пользователь
содержание
 2 Содержит
 2.3.2.2.1 Тема
 2.1 Карман
 2.2 Сундук
 2.3 Поле
 2.3.1 Ячейки
 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 Музыка
 2.3.2.2.2 Категория
 2.3.2.2.3 Автор
 2.3.2.2.4 Время
 2.3.2.3 Ссылка
ПРОТОКОЛ В ФОРМАТЕ RTF
22

23.  2.3.2.4 Рамка
 2.3.2.5.1.1 Слева
 2.3.3.4.2 Строк
 2.3.2.4.1 Цвет
 2.3.2.5.1.2 Справа
 2.3.4 Стикер
 2.3.2.4.2 Отступ
 2.3.2.5.1.3 Сверху
 2.3.4.1 Текст
 2.3.2.4.2.1 Сверху
 2.3.2.5.1.4 Снизу
 2.3.4.2 Ширина
 2.3.2.4.2.2 Снизу
 2.3.3 Сетка
 2.3.4.3 Высота
 2.3.2.4.2.3 Слева
 2.3.3.1 Цвет
 2.3.4.4 Цвет
 2.3.2.4.2.4 Справа
 2.3.3.2 Прозрачность
 2.3.2.4.3 Толщина
 2.3.3.3 Подложка
 2.3.2.5 Картинка
 2.3.3.4 Размер
 2.3.2.5.1 Обтекание
 2.3.3.4.1 Столбцов
текстом
ПРОТОКОЛ В ФОРМАТЕ RTF
23

24.  2.3.5 Цифровая карта  3.1.3.1 RClick +
 4 Инструмент
 3 Процесс
 4.1 Мышь
 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.2 Преобразование
 3.2.1 Присоеенение
 3.2.2 Отсоеденение
 3.3 Масштабирование
 3.3.1 Увеличение
 3.3.2 Уменьшение
 3.4 Время анимации
 3.4.1 Милисекунды
 3.4.2 2 вариант
ПРОТОКОЛ В ФОРМАТЕ RTF
24

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

26. 26

27. 27

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

29. 29

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

31. 31

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

33. 33

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

35. 35

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

37. 37

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

39. 39

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

41. 41

42. На слайде изображена контекстная DFD
диаграмма
настройки
пользовательского
интерфейса по умолчанию. В систему из
источника контента передается контент в
формате XML. В результате работы системы
пользователю
передаться
поле
по
умолчанию. Настройка поля осуществляется
разработчиком.
42

43. 43

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

45. 45

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

47. 47

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

49. 49

50. 50

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

52. 52

53. 53

54. 54

55. 55

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.
56

57. 57

58. 58

59. 59

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

61. 61

62. 62

63. 63

64.  Главный класс системы : Field, он содержит в себе объекты всех
остальных классов.
 Классы Pocket и Chest наследуются от абстрактного класса
Storadge.
 Классе Storadge хранит в себе колекцию объектов Tile.
 От класса Tile наследуются два класса Sticker и ContentTile.
 Класс ContentTile содержит в себе структуры Border, TilteText,
TileImage
64

65. 65

66. 66

67. 67

68.  Данная
диаграмма является частным случаем диаграммы
взаимодействия, но в отличии от неѐ, отображается временную
последовательность выполнения действий.
68

69. 69

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

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

79.  На странице авторизации пользователь вводит свой логин и пароль для входа в
систему.
 Если авторизация прошла успешно, то пользователь перенаправляется на
страницу со своим игровым полем.

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

87.  Игровое поле состоит из нескольких частей: поле, карман и сундук.
 При нажатии кнопки «Карман» поверх рабочего поля появляется слой,
содержащий плитки, которые пользователь поместил туда.
 При нажатии кнопки «Сундук» поверх рабочего поля появляется слой,
содержащий плитки, которые пользователь поместил туда на длительное
хранение.
 По нажатию кнопки «Выход» происходит выход из системы и для повторного еѐ
использования необходимо авторизоваться заново.
 Плитки на поле группируются в зависимости от категории и имеют общий цвет
рамки.
 При клике на плитку открывается связанная с ней ссылка, либо файл.

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
88

89. 89

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

91. 91