Department of Information Technologies in Design
Saint-Petersburg State Polytechnical University
www.it-design.org
The project by students Nikita Shanin and Maria Garkusha
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).Yuri Vedenin
В докладе рассматриваются две дисциплины: бизнес-анализ и юзабалити (точнее, в более широком смысле - UX). Авторы рассматривают сходства и различия двух дисциплин. В итоге находят много общего и подсказывают, куда и где надо посмотреть специалистам обеих дисциплин.
Бизнес-анализ и юзабилити - найдите 10 отличий (и 10 сходств).Yuri Vedenin
В докладе рассматриваются две дисциплины: бизнес-анализ и юзабалити (точнее, в более широком смысле - UX). Авторы рассматривают сходства и различия двух дисциплин. В итоге находят много общего и подсказывают, куда и где надо посмотреть специалистам обеих дисциплин.
Method for Real Time Text Extraction of Digital Manga ComicCSCJournals
Manga is one of popular item in Japan and also in the rest of the world. Hundreds of manga book is printed everyday in Japan, and some of printed manga book is digitized into web content for reading comic through the internet. People then make translation of Japanese language in manga into other language to share enjoy of reading manga for non Japanese reader. However, people make translation of the text on printed comic book (they call it scanlation) in manually because there is no automatic method for translate comic text image into any other language. The challenge in extracting Japanese character in manga is how to detect comic balloon and extract text in vertical direction as Japanese classic writing direction is top down and right to left. Several research projects [1-4] proposed method for text extraction from images but not specific for extraction from comic image. There are two base methods for text extraction, using region based method and texture based method. In [5], propose the concept of automatic mobile content conversion using semantic image analysis that include comic text extraction, but this paper did not explain the details for text extraction. Also, Yamada [6] proposed method for comic image decomposition for reading comic on mobile phone that including comic text extraction but not details on comic text extraction. The conventional method assuming extraction process in offline way and using scanned comic image. In the internet and mobility era, we need advance method for extraction text in online way and automatically
The main reason behind this conference is to provide opportunity for the global participants to share their ideas and experience in person with their peers expected to join from different parts on the world
Понятие юзабилити
● Работа с guidelines
● Особенности создания продукта/проекта
● Знакомство с юзабилити для e-commerce
● Знакомство с юзабилити для корпоративных сайтов
● Особенности юзабилити для форумов
● Особенности создания мобильных приложения
● Обзор языков программирования для IOS и Android
● Особенности разработки пользовательского интерфейса для
мобильных приложений
● Структура сборки приложения
● Обзор языков программирования:
● PHP
● .NET
● Python
● Ruby on Rails
● C#
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...Yury Vetrov
Мастер-класс Юрия Ветрова "Контроль качества интерфейсных решений на всех этапах процесса проектирования и разработки" на пятой конференции SQA Days 2009.
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
Расскажу, чем разработка front end для Web отличается от остальных дисциплин программирования. Чему нужно научиться, чтобы разрабатывать быстрые, удобные и интуитивно понятные пользовательские интерфейсы.
NIGMA - облачная SaaS-платформа для оценки конкурентоспособности сайта с точки зрения его визуальной составляющей. В основе платформы NIGMA лежит авторская технология компьютерного зрения BIRD EYE, в 2 раза увеличивающая скорость проведения UX/UI-анализа человеком. А собственная технология экспертной оценки (SCORE МОДУЛЬ) позволяет в 5 раз увеличить скорость проведения комплексного аудита сайта.
Сервис не использует ручной труд, и способен оценивать огромное количество страниц сайтов, 24 часа в сутки, 7 дней в неделю, 365 дней в году. NIGMA дает мгновенную обратную связьпо интерфейсу веб-сайта или мобильной версии сайта, на основе которой можно разработать а/б тесты. NIGMA предсказывает на 93% то, как будут себя вести посетители сайта и на что они обратят внимание.
Method for Real Time Text Extraction of Digital Manga ComicCSCJournals
Manga is one of popular item in Japan and also in the rest of the world. Hundreds of manga book is printed everyday in Japan, and some of printed manga book is digitized into web content for reading comic through the internet. People then make translation of Japanese language in manga into other language to share enjoy of reading manga for non Japanese reader. However, people make translation of the text on printed comic book (they call it scanlation) in manually because there is no automatic method for translate comic text image into any other language. The challenge in extracting Japanese character in manga is how to detect comic balloon and extract text in vertical direction as Japanese classic writing direction is top down and right to left. Several research projects [1-4] proposed method for text extraction from images but not specific for extraction from comic image. There are two base methods for text extraction, using region based method and texture based method. In [5], propose the concept of automatic mobile content conversion using semantic image analysis that include comic text extraction, but this paper did not explain the details for text extraction. Also, Yamada [6] proposed method for comic image decomposition for reading comic on mobile phone that including comic text extraction but not details on comic text extraction. The conventional method assuming extraction process in offline way and using scanned comic image. In the internet and mobility era, we need advance method for extraction text in online way and automatically
The main reason behind this conference is to provide opportunity for the global participants to share their ideas and experience in person with their peers expected to join from different parts on the world
Понятие юзабилити
● Работа с guidelines
● Особенности создания продукта/проекта
● Знакомство с юзабилити для e-commerce
● Знакомство с юзабилити для корпоративных сайтов
● Особенности юзабилити для форумов
● Особенности создания мобильных приложения
● Обзор языков программирования для IOS и Android
● Особенности разработки пользовательского интерфейса для
мобильных приложений
● Структура сборки приложения
● Обзор языков программирования:
● PHP
● .NET
● Python
● Ruby on Rails
● C#
SQA Days 2009: Контроль качества интерфейсных решений на всех этапах процесса...Yury Vetrov
Мастер-класс Юрия Ветрова "Контроль качества интерфейсных решений на всех этапах процесса проектирования и разработки" на пятой конференции SQA Days 2009.
2017-03-26 02 Егор Непомнящих. Что такое web front end, и с чем его едятHappyDev-lite
Расскажу, чем разработка front end для Web отличается от остальных дисциплин программирования. Чему нужно научиться, чтобы разрабатывать быстрые, удобные и интуитивно понятные пользовательские интерфейсы.
NIGMA - облачная SaaS-платформа для оценки конкурентоспособности сайта с точки зрения его визуальной составляющей. В основе платформы NIGMA лежит авторская технология компьютерного зрения BIRD EYE, в 2 раза увеличивающая скорость проведения UX/UI-анализа человеком. А собственная технология экспертной оценки (SCORE МОДУЛЬ) позволяет в 5 раз увеличить скорость проведения комплексного аудита сайта.
Сервис не использует ручной труд, и способен оценивать огромное количество страниц сайтов, 24 часа в сутки, 7 дней в неделю, 365 дней в году. NIGMA дает мгновенную обратную связьпо интерфейсу веб-сайта или мобильной версии сайта, на основе которой можно разработать а/б тесты. NIGMA предсказывает на 93% то, как будут себя вести посетители сайта и на что они обратят внимание.
Как взаимодействовать с графическими дизайнерами: готовим UI Kit / Артем Моло...Ontico
Frontend-разработчики и веб-дизайнеры решают совместную задачу – чтобы пользователь получил лучший user experience. Но часто смотрят на проблему с разных позиций — либо наилучшего технического решения проблемы, либо художественного видения мира. Различие инженерных и художественных подходов нередко приводит к конфликту интересов и снижает эффективность работы команды. Однако поле битвы мировоззрений можно превратить в совместное рабочее пространство. В качестве основного подхода к поиску оптимального процесса создания и сопровождения визуального стиля веб-сайта рассматривается подготовка User Interface Kit (или UI Kit). UI Kit содержит элементы, которые служат кирпичами при построении единообразного интерфейса корпоративных веб-сайтов.
Из предлагаемого доклада слушатели смогут узнать следующее:
– какие плюсы предоставляет декомпозиция дизайна;
– что такое UI Kit и какими свойствами он обладает;
– почему работа с UI Kit понравится и разработчикам, и дизайнерам, и даже менеджеру проекта;
– как можно реализовать UI Kit и организовать его хранение.
Лучшие практики корпоративной разработки. Лекция 0: обзор курса.Vadim Martynov
Это настоящий курс молодого бойца по коммерческой разработке ПО в компаниях и распределённых командах.В рамках курса слушатели приобретут навыки по участию в командной разработке, взаимодействию с аналитиками, заказчиком, менеджером и отделом тестирования, совместной работой с кодом, пониманию особенностей построения высоконагруженных систем, анализу качества продукта и автоматизации тестирования.
История развития и применения CMS: Drupal и другие
Graduate Project: designing a web site and 3D application for Elby Adbertising
1. Санкт-Петербургский Государственный Политехнический Университет
Институт Международных Образовательных Программ
Кафедра «Информационные технологии в дизайне»
Разработка Web-ресурса с внедренным
приложением для работы с трехмерными
объектами
Авторы: Гаркуша М. А. , Шанин Н. А.
Руководители: Орлов П. А. , Холина А. А.
2. Цели и задачи
Целью данного проекта является создание сайта компании, занимающейся производством
оборудования для торговли и рекламы, с возможностью просмотра высокодетализированных
трёхмерных моделей продукции компании в окне браузера.
Анализ Художественное решение Программная реализация
• аналоги • логотип • классы анализа и проектные
классы
• 3D-объекты в Web-среде • графическая концепция
проекта • средства реализации
• метод и процесс
проектирования • графический интерфейс • диаграммы действий
• персоны • шейдеры • реализация
• пользовательские задачи
• ритерии оценки проекта
• прототипирование
• тестирование
2
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
20. Анализ технологий
В ходе работы были проанализированы различные современные технологии, а также аналоги
приложений, реализованные с их использованием.
Flash и silverlight WPF Java WebGl
• просты • новая технология • возможность • библиотека OpenGL
в использовании полноценной работы с
• множество • не до конца
3D-графикой
• не поддерживают возможностей разработанная
аппаратное ускорение • библиотека OpenGL технология
• хорошая
3D-графики
производительность • сложная разработка
• низкая приложений
• запуск приложений
производительность
только из Windows
20
21. Определение критериев оценки технологий
• отображение трехмерной сцены
• возможность поворота камеры
• загрузка моделей из внешних файлов в форматах .obj или .3ds
• высокая производительность
• применение шейдеров для создания реалистичного изображения
• простота использования и программного внедрения
• наличие документации и описания API
21
22. Выбор средств реализации приложения
После анализа требований и аналогов приложения в качестве средства реализации был выбран язык
Java и библиотека JOGL.
Данный выбор был обусловлен:
• возможностью запуска приложения
в окне браузера
• кроссплатформенностью
• высокой производительностью
22
23. Описание оптимизации приложения
В процессе разработки приложения, работающего с высокодетализированными объектами, большое
внимание было уделено оптимизации.
Пути разрешения проблемы
• испробовано несколько алгоритмов рендеринга • произведен анализ использования системных
ресурсов — операционной памяти
• выбран способ с использованием VBO (Vertex
Buffer Object) • выявлены и исправлены «утечки» памяти
23
24. Описание шейдеров
Шейдер — это программа используемая в трёхмерной графике для определения окончательных
параметров объекта или изображения.
24