РИП. Лекция 2 - nadin.miem.edu.runadin.miem.edu.ru/!!!_lec_2018_pdf/l_02_2018.pdf ·...
42
РИП. Лекция 2 Начало группового проектирования интернет-приложения (ИП) ТНК 2018-2019 Лекция 02 1
Transcript of РИП. Лекция 2 - nadin.miem.edu.runadin.miem.edu.ru/!!!_lec_2018_pdf/l_02_2018.pdf ·...
РИП. Лекция 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
Balsamiq Mockups
Сайт: balsamiq.com/products/mockups
Лекция 02 22
+ 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
