Your SlideShare is downloading. ×
  • Like
  • Save
Graduate Project: designing a web site and 3D application for Elby Adbertising
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Graduate Project: designing a web site and 3D application for Elby Adbertising

  • 373 views
Published

Department of Information Technologies in Design …

Department of Information Technologies in Design
Saint-Petersburg State Polytechnical University
www.it-design.org

The project by students Nikita Shanin and Maria Garkusha

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
373
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Санкт-Петербургский Государственный Политехнический УниверситетИнститут Международных Образовательных ПрограммКафедра «Информационные технологии в дизайне»Разработка Web-ресурса с внедреннымприложением для работы с трехмернымиобъектами Авторы: Гаркуша М. А. , Шанин Н. А. Руководители: Орлов П. А. , Холина А. А.
  • 2. Цели и задачи Целью данного проекта является создание сайта компании, занимающейся производством оборудования для торговли и рекламы, с возможностью просмотра высокодетализированных трёхмерных моделей продукции компании в окне браузера. Анализ Художественное решение Программная реализация • аналоги • логотип • классы анализа и проектные классы • 3D-объекты в Web-среде • графическая концепция проекта • средства реализации • метод и процесс проектирования • графический интерфейс • диаграммы действий • персоны • шейдеры • реализация • пользовательские задачи • ритерии оценки проекта • прототипирование • тестирование2
  • 3. Описание проекта. Актуальность3
  • 4. Этапы работ Вся работа была поделена на две основные части. Каждая часть выполнялась отдельнным исполнителем и была поделена на более мелкие этапы. Web-сайт Приложение • разработка логотипа • разработка каркаса приложения • дизайн интерфейса • добавление моделей из 3D Studio Max • верстка Web-страниц • добавление шейдеров и эффектов • разработка классов анализа и проектных • оптимизация классов • создание Web-апплета • проектирование базы данных • интеграция с сайтом • программирование • тестирование • отладка4
  • 5. Выбор аналогов ресурса В качестве аналогов было рассмотрено несколько сайтов B2B компаний, работающих в сфере торговли рекламным оборудованием. Среди аналогов присутствуют как российские компании, так и зарубежные агенства. Аналоги      5
  • 6. Определение критериев оценки ресурса MoSCow — это метод расставления Номер Требование Пользователи MoSCoW приоритетов при разработке различного 1 Возможность поиска Все пользователи s 2 Возможность авторизации Пользователь m рода приложений путем использования 3 Поддержка 2D картинок Все пользователи m слов, принимающих определенные 4 Поддержка 3D моделей Все пользователи m значения: 5 Возможность заказа изделия Все пользователи s 6 Возможность оставлять Авторизированный m комментарии пользователь M — must (должен иметь) 7 Возможность читать Авторизированный s комментарии (история пользователь переписки) S — should (должен иметь, если это 8 Отображение тех. Все пользователи s вообще возможно) документации изделия 9 Обратная связь Все пользователи m C — could (может иметь, если это 10 Кросс-платформенность Все пользователи m будет полезным) 11 Отображение информации о Все пользователи m компании W — won’t (не будет иметь, но будет 12 Мобильная версия Все пользователи w иметь в будущем) 13 Использование HTML5 Все пользователи s 14 Использование CSS3 Все пользователи s 15 Использование ASP.NET MVC Все пользователи m 16 Англоязычная версия Все пользователи w 17 Базы данных Все пользователи m 18 Фиксированная ширина Все пользователи s 19 Отсутствие прокрутки Все пользователи c Пользователь - лицо, использующее систему 20 Возможность редактирования Администратор m в своих целях. контента6
  • 7. Выбор метода и процесса проектирования При разработке данного проекта использовался унифицированный язык моделирования UML (Unified Modeling Language). Диаграммы классов (class diagrams) для моделирования статической структуры классов системы и связей между ними.7
  • 8. Выявление персон Персоны — один из способов сбора и формализации требований к интерфейсу. Персона позволяет: донести информацию до всех членов команды, сократить ресурсы на разработку интерфейсов, получить представление об ожиданиях пользователя. Катя Суворова Иосиф Авраамович Берг Егор Мельников Менеджер компании Заказчик Посетитель Цель — общение с заказчиком, Цель — просмотр своих заказов, Цель — узнать о компании, ведение заказа. общение с изготовителем. посмотреть портфолио, сделать       заказ.8
  • 9. Формирование вариантов использования Вариант использования представляет собой последовательность действий, выполняемых системой в ответ на событие, инициируемое некоторым внешним объектом (действующим лицом).9
  • 10. Создание пользовательских тестов Основная цель тестирования – выявить потенциальные проблемы в приложении, проверить, насколько приложение соответствует потребностям и ожиданиям пользователя и обнаружить расхождения с требованиями к графическому интерфейсу пользователя.10
  • 11. Выбор метода прототипирования Прототипирование — этап разработки программного обеспечения, процесс создания пробной версии программы, обычно — с целью проверки пригодности предлагаемых для применения концепций, решений. Прототипом Web-ресурса данной работы является существующий сайт компании     Создание прототипов приложения для просмотра трехмерных моделей является невозможным, так как прототипы и будут являтся самим приложением, поэтому в качестве способа прототипирования был выбран способ создания Alpha и Beta версий с промежуточным функционалом, и их тестирование.11
  • 12. Выбор средств реализации Web-ресурса В качестве средств для реализации Web-ресурса были выбраны Microsoft SQL Server — система управления реляционными базами данных (СУБД) и технология создания Web-приложений ASP.NET. Данный выбор был обусловлен тем, что в компании, для которой создается данный проект, в настоящее время используется система Microsoft SQL Server.12
  • 13. Художественное решение13
  • 14. Выбор модульной сетки Web-страниц В основу верстки сайта легла система 960 Grid System, разработанная для создания Web- приложений.14
  • 15. Логотип и дополнительная графика Идея Варианты Дополнительная графика15
  • 16. Логотип16
  • 17. Логотип17
  • 18. Цветовое решение сайта18
  • 19. Цветовое решение сайта19
  • 20. Анализ технологий В ходе работы были проанализированы различные современные технологии, а также аналоги приложений, реализованные с их использованием. Flash и silverlight WPF Java WebGl • просты • новая технология • возможность • библиотека OpenGL в использовании полноценной работы с • множество • не до конца 3D-графикой • не поддерживают возможностей разработанная аппаратное ускорение • библиотека OpenGL технология • хорошая 3D-графики производительность • сложная разработка • низкая приложений • запуск приложений производительность только из Windows20
  • 21. Определение критериев оценки технологий • отображение трехмерной сцены • возможность поворота камеры • загрузка моделей из внешних файлов в форматах .obj или .3ds • высокая производительность • применение шейдеров для создания реалистичного изображения • простота использования и программного внедрения • наличие документации и описания API21
  • 22. Выбор средств реализации приложения После анализа требований и аналогов приложения в качестве средства реализации был выбран язык Java и библиотека JOGL. Данный выбор был обусловлен: • возможностью запуска приложения в окне браузера • кроссплатформенностью • высокой производительностью22
  • 23. Описание оптимизации приложения В процессе разработки приложения, работающего с высокодетализированными объектами, большое внимание было уделено оптимизации. Пути разрешения проблемы • испробовано несколько алгоритмов рендеринга • произведен анализ использования системных ресурсов — операционной памяти • выбран способ с использованием VBO (Vertex Buffer Object) • выявлены и исправлены «утечки» памяти  23
  • 24. Описание шейдеров Шейдер — это программа используемая в трёхмерной графике для определения окончательных параметров объекта или изображения.24
  • 25. Демонстрация работы сайта и приложения25