РИП. Лекция 2

Начало группового проектирования интернет-приложения (ИП)

ТНК

2018-2019

Лекция 02 1

В ПОМОЩЬ ГРУППАМ РАЗРАБОТЧИКОВ ВЕБ-ПРИЛОЖЕНИЙ

Лекция 02 2

Вариант 1 (тема ИП известна) Сделать удобное и современное интернет приложение, которое будет держать пользователей в курсе всех событий в стенах университета.

Лекция 02 3

Вариант 2. Тема ИП не известна.

1. Выбирается тема проекта ИП

• Критерии проекта: – Актуальность (это кому-то нужно)

– Новизна (такого ни у кого нет)

– Коммерциализуемость (способность использовать коммерчески)

• Высший уровень - внедрение проекта (использование на предприятии, фирме, и др.)

Можно использовать в качестве ВКР

Лекция 02 4

Собирается группа

С основными функциями:

• Креативщик (К)

• Разработчик (Р)

• Веб-дизайнер (Д)

• Программист (П)

• Тестировщик (Т)

К Р Д П Т

Иванов + +

Петров + +

Сидоров + +

Васин + +

Степин + + + + +

Функции

Лекция 02 5

Этапы разработки интернет-приложения (ИП)

Тема уже известна

Лекция 02 6

Аналитика (К)

Разработка интернет приложения начинается с того, что выясняются • цели проекта (зачем?, для чего?), • определяется целевая аудитория (для кого?), • анализируются конкуренты (кто лучший?). • выбрается модель монетизации (если есть

необходимость) • выделяются уникальные конкурентные преимущества

(чем ваше ИП лучше). Результат — готовая конкурентоспособная модель разработки и продвижения приложения. Список функциональных возможностей продукта.

Лекция 02 7

Задание для креативщика-аналитика (К)

На основе обзора и анализа интернет-ресурсов

каждому члену группы проекта (тема уже должна быть определена)

• провести работу аналитика (К)

• сделать презентацию

• показать ее на практическом занятии

группе

• обсудить частные решения и создать общее

Лекция 02 8

Разработка

• Определятся структуры – Интернет-приложения – баз данных

• Делаются прототипы страниц, – наглядно отражающие

информацию (для , и – элементы управления

будущего продукта.

Результат — прототип страниц

Лекция 02 9

1

Лекция 02 10

2

Лекция 02 11

3

Лекция 02 12

4

Лекция 02 13

Веб-дизайн

• Опираясь на прототип, создаем концепцию, согласно которой происходит разработка дизайна сайта (цветовые решения, стили кнопок, ссылок, текстов и т.д.).

• Полное визуальное представление о том, каким будет сайт в финале.

Результат — визуально оформленные макеты страниц сайта

Лекция 02 14

Адаптивный веб-дизайн

• Дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к Интернет и динамически подстраивающийся под заданные размеры окна браузера.

• Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств.

• • Проектирование для мобильных устройств с самых ранних этапов;

• • Применение гибкого макета на основе сетки; • • Использование гибких изображений (flexible images); • • Работа с медиазапросами (media queries); • • Применение постепенного улучшения.

Лекция 02 15

Этапы веб-дизайна

• • Техническое задание (ТЗ)

• Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности задаются основные параметры визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком.

Лекция 02 16

Визуальные представления

Лекция 02 17

Структурирование информации (юзабилити)

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

Лекция 02 18

Графическое оформление

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

Лекция 02 19

Результат – графические файлы

Софт для создания прототипов страниц moqups.com

Лекция 02 20

moqups.com

Лекция 02 21

Balsamiq Mockups

Сайт: balsamiq.com/products/mockups

Лекция 02 22

Mockplus Сайт: mockplus.com

Лекция 02 23

Mockplus Сайт: mockplus.com

Лекция 02 24

Pidoco Сайт: pidoco.com Бесплатная версия: 31 день

Лекция 02 25

Pidoco Сайт: pidoco.com Бесплатная версия: 31 день

Лекция 02 26

+ Axure Сайт: axure.com Бесплатная версия: 30 дней, без ограничений

Лекция 02 27

Другой метод создания прототипа

Лекция 02 28

https://www.templatemonster.com/

Лекция 02 29

https://www.templatemonster.com/

Лекция 02 30

Адаптивный дизайн

Лекция 02 31

Примеры

Lecture 02 Start of the site or web application development

32

Responsive template

Lecture 02 Start of the site or web application development

33

Features

Lecture 02 Start of the site or web application development

34

Sources and development tools

Lecture 02 Start of the site or web application development

35

Examples of sites or Web

applications

Lecture 02 Start of the site or web application development

36

Web application examples 01

Lecture 02 Start of the site or web application development

37

Web application examples 02

Lecture 02 Start of the site or web application development

38

WA 03

Lecture 02 Start of the site or web application development

39

WA 04

Lecture 02 Start of the site or web application development

40

WA 05

Lecture 02 Start of the site or web application development

41

WA 06

Lecture 02 Start of the site or web application development

42