Your SlideShare is downloading. ×
0
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
Graduate Project: designing a web site and 3D application for Elby Adbertising
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.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

429

Published on

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
429
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

×