Курс «Разработка интернет приложений» (РИП)

Лекция 1

Трубочкина Надежда Константиновна

Москва 2018

. Цели и задачи освоения дисциплины

Данная дисциплина нацелена на освоение:

• теоретических знаний по разработке интернет приложений и сервисов,

• и проектной командной работы по разработке интернет приложений и сервисов.

В результате изучения дисциплины студенты поймут основные концепции и принципы разработки интернет-приложений и сервисов и получат знания и навыки frontend и backend разработчиков.

Frontend

структура знаний

Программа курса. 1. HTML и CSS вёрстка

• Чтобы создать крутой дизайн веб-проекта, необходимо хорошо понимать возможности и ограничения среды, в которой он будет реализован. Поэтому обучение дизайну мы начинаем с изучения основ вёрстки макетов и возможностей HTML и CSS.

• • Базовая HTML-разметка, HTML5 • Знакомство с CSS, CSS3 • Блочные элементы • Семантическая разметка документа • Управление блоками в потоке • Позиционирование блоков • CSS-селекторы • Стили текста и оформления • Стили позиционирования, отступы и размеры блоков • Сетки • Процесс верстки сайта • Профессиональное оформление кода • Работа с Adobe Photoshop, вёрстка в точном соответствии с макетом • Особенности подготовки изображений для верстки • Возможности JavaScript

Навыки, которые вы получите

• Создание базовой HTML-разметки • Умение задавать стили отображения с

помощью CSS • Применение Adobe Photoshop в веб-

разработке • Обеспечение кроссбраузерности • Оптимизация работы с изображениями • Применение принципов клиент-серверного

взаимодействия • Полноценная верстка страниц сайта

2. Веб-дизайн В этом блоке учимся выстраивать визуальную иерархию, работать с композицией и правильно расставлять акценты. Осваиваем инструменты для создания макетов и правила разработки адаптивных мультиплатформенных интерфейсов.

• Введение в профессию дизайнера • Композиция • Веб-типографика • Теория цвета • Модульные сетки • Адаптивный дизайн • Веб-анимация • Системы ведения проектов • Составление технического задания • Вдохновение, творчество, импровизация • Презентация работ и подготовка портфолио

Навыки, которые вы получите

• Разработка дизайн-макета сайта

• Работа с модульной сеткой

• Тестирование взаимодействия с пользователями

• Выстраивание визуальной иерархии

• Разработка адаптивного макета

• Создание веб-анимации

• Взаимодействие с командой

• Разработка презентации

3. Проектирование интерфейсов

Чтобы создавать по-настоящему удобные интерфейсы, разберемся, как пользователи взаимодействуют с сервисами: научимся собирать пользовательские истории, анализировать восприятие интерфейсов и использовать это в разработке.

• Введение в предметную область • Азбука пользовательского интерфейса • Психофизиология восприятия интерфейсов • Методологии командной работы • Качественные исследования аудитории • Информационная архитектура

Навыки, которые вы получите

• Проектирование интерфейса цифрового продукта

• Исследование пользовательского взаимодействия

• Выстраивание информационной архитектуры проекта

• Формирование команды и внутреннего взаимодействия

• Выстраивание визуальной коммуникации

• Создание карты пользовательских сценариев

• Психофизиология восприятия интерфейсов

4. Вёрстка адаптивного макета

Современный веб-сервис все чаще используется на мобильных устройствах, поэтому интерфейс должен быть не просто удобным — он должен быть удобным на любом устройстве. В этом модуле мы учимся адаптировать макеты под разные устройства и платформы. • Верстка резинового макета • Введение в медиа-запросы • Медиа-функции • Особенности верстки для мобильных устройств • Адаптивная типографика • Адаптивные изображения и видео

Навыки, которые вы получите

• Аналитика поставленной задачи и выработка идеи

• Композиционное видение • Применение основ цветовой психологии,

подбор цветовых решения и связки • Верстка текста, базовые знания типографики • Структурирование проекта в Adobe Photoshop • Применение правил анимации и владение

инструментами анимации Adobe Flash • Работа с таймлайном

Backend

структура знаний

Получат следующие навыки:

• верстки сайтов и шаблонов, разработки веб-интерфейсов и внедрения скриптов;

• работы с HTML5 и CSS3, изменения содержимого и внешнего вида веб-интерфейсов (страниц);

• Использования библиотеки jQuery, которая помогает создавать качественные веб-интерфейсы

• разработки адаптивных веб-интерфейсов, меняющихся в зависимости от размера экрана;

• создания интерактивных веб-интерфейсов, применения всех возможностей современных браузеров для своего проекта;

• написания программного кода на Jscript, PHP, Python;

1 м

од

уль

2 м

од

уль

Получат следующие навыки: (2)

• использования для разработки веб-сервисов расширяемого языка разметки XML, предназначенного для хранения и передачи структурированных данных;

• использования SOAP: протокола обмена сообщениями на базе XML;

• использования WSDL: языка описания внешних интерфейсов веб-служб на базе XML;

• использования UDDI: универсального интерфейса распознавания, описания и интеграции (Universal Discovery, Description and Integration);

• использования JSON: более эффективного языка разметки; • использования облачных сервисов для реализации своего веб-

проекта. • В связи с необходимостью при создании своего веб-проекта

студенты вправе выбирать самостоятельно любые дополнительные средства разработки (языки, платформы и пр.), обеспечивающие качественное выполнение проекта.

3 м

од

уль

Формы контроля Тип контроля Форма

контроля

4 курс Модули Параметры **

1 2 3

Домашнее

задание

Поэтапное создание

индивидуального

адаптивного сайта

Поэтапное

создание

индивидуального

интернет

приложения на

CMS

7 заданий по

работе с данными:

формы на РНР

Поэтапное создание

группового проекта (2-

5 человек) по

разработке интернет

приложения или

интернет сервиса

Поэтапный текущий

контроль на

практических занятиях

Самостоятел

ьная работа

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

(индивидуальный)

Приложение,

сделанное в CMS

(индивидуальное).

Работа с данными

Групповой проект по

разработке интернет

приложения или

интернет сервиса

1 модуль - HTML5,

CSS3, JavaScript, JQuery;

2 модуль CMS, PHP;

3 модуль - Python, XML,

Java и пр. по

необходимости

Проект Поэтапная разработка группового проекта по созданию интернет

приложения или интернет сервиса

Интернет приложение

или интернет сервис.

Презентация из 15

слайдов, отчет

Научно-

практически

й семинар

По мере выполнения группового проекта на практических занятиях

проводится Научно-практический семинар

Обсуждение групповых

проектов (группа: 2-5

человек)

Итоговый Экзамен

Экзамен в форме

защиты проекта

В конце 3 модуля на

экзамене – защита

групповых проектов

Итоговая оценка

Весовые коэффициенты: Накопленная оценка: 50% (Kн=0,5)

Экзамен: защита интернет проекта: 50%(Kэ=0,5)

Итоговая оценка вычисляется по формуле:

Оитоговая = Kн*Он + Kэ *Опроект

Примеры работ 2017-2018 г.г. (Индивиуальное обучение)

Дворцов Владислав Александрович

Фотогалерея Электронный учебник – блокчейн и криптовалюты Инвестиционный портфель

Кравченко Алла

Тема одна для сайта и веб-приложений: Региональная транспортная компания.

Можаев Борис Александрович

Сайты: 1-й "Сетевая прачечная" 2 и 3 Aquatermo.

Маслова Юлия

1-й сайт: "Благотворительный фонд помощи защиты животным"; 2-й сайт: "Smart-образование"; 3-й сайт: "Smart-образование".

Яськевич Евгений Владиславович

Научно-популярное новостное интернет-издание;

Путеводитель путешественника;

Сайт туроператора.

Лыжин Илья

1.1 сайт - Промо-сайт проекта образовательного бота.

1.2 сайт - Сайт инновационного проекта «Общественная розетка»

2 сайт - Интернет-магазин конструктора интернет вещей.

3 сайт - Сайт-портфолио.

Митрофанов А.М. 1. Игровой проект STALCRAFT. 2. Фотогалерея. 3. Сайт для поиска игроков в команду. Катунин А.В. 1-й модуль: Сайт «Центр спорта и отдыха «Комела» в Вологде» (HTML, CSS, Codeinteger, Bootstrap) 2-й модуль: Веб-приложение «Реестр мошенников для страховых кампаний с использованием технологии Блокчейн» (HTML, CSS, Bootstrap, Codeinteger, PHP, Python, MySQL) 3-й модуль: Веб-приложение «Почтовый робот» (Bootstrap, PHP, MySQL)

Шарова Дарья Сергеевна

Сайт №1 “Book journal” (HTML5, CSS3, JS, jQuery)

Веб-приложение “Book journal” (CMS Wordpress и плагины Visual form Builder, Visualizer: Charts and Graphs Lite, Elementor а также HTML)

Веб-приложение “Book journal” (CMS Wordpress и плагины Visual form Builder, Visualizer: Charts and Graphs Lite, Elementor а также HTML)+ PHP, MySQL

Пример презентации на экзамене.

Презентация Дворцова Владислава Александровича

2018 весна

Портфолио Дворцова В.А.

по результатам разработки веб-приложений различной сложности

Руководитель: проф., д.т.н. Трубочкина Н.К.

Москва 2018

САЙТ 1

«ФОТОГАЛЕРЕЯ»

Постановка задачи

Используя HTML, CSS, JS разработать адаптивный сайт на тему «Фотогалерея», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.

Структура сайта

Фотогалерея

Новости Категории

Города

Пейзажи

Горы

Панорама Контакты

...

Обзор аналогов pexels.com shutterstock.com

unsplash.com istockphoto.com

Сравнение сайта с аналогами

Главным отличием разработанного сайта от аналогов является наличие возможности просмотра панорамных изображений.

Содержание сайта

Главная страница Категории

Содержание сайта Панорама Контакты

Содержание сайта

Выпадающий список Просмотр изображения

Выводы по сайту • Разработан адаптивный сайт «Фотогалерея».

• При разработке были использованы: HTML, CSS, JS, jQuery, Bootstrap.

• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – 5 страниц, 3 уровень – 6 страниц.

• В главной навигации 1 выпадающее меню.

• На главной странице размещен тематический слайдер.

• Графические файлы оптимизированы по объему. Итоговый размер 26 файлов: 11,65 Мб.

САЙТ 2

«ЭЛЕКТРОННЫЙ УЧЕБНИК – БЛОКЧЕЙН И

КРИПТОВАЛЮТЫ»

Постановка задачи

Используя WordPress разработать адаптивный сайт-учебник на тему «Блокчейн и криптовалюты», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.

Структура сайта

Главная страница

Котировки

BTC/USD

ETH/USD

LTC/USD

Статьи

О биткоине просто

О биткоине детально

Как добываются

криптовалюты

Контакты Профиль Обучение

...

Обзор аналогов blockgeeks.com bitcoin.com

bitcoin.org bitcoin.it

Сравнение сайта с аналогами

Функционал Личный кабинет

Комментирование записей

Добавление статей

Платная подписка

Сайты

blockgeeks.com

+ + - +

bitcoin.com + + - -

bitcoin.org - - - -

bitcoin.it + - + -

Текущий сайт + + + +

Содержание сайта

Котировки Доступные статьи

Содержание сайта

Статья Профиль

Содержание сайта

Оплата обучения Общий чат

Выводы по сайту

• Разработан адаптивный сайт-учебник на тему «Блокчейн и криптовалюты».

• При разработке были использованы: HTML, CSS, JS, WordPress.

• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – 5 страниц, 3 уровень – 7 страниц.

• В главной навигации 2 выпадающих меню.

• Имеется личный кабинет, чат, графики от TradingView.

• Доступно приобретение платной подписки через форму Яндекс.

САЙТ 3

«ИНВЕСТИЦИОННЫЙ ПОРТФЕЛЬ»

Постановка задачи

Используя HTML, CSS, JS, PHP разработать адаптивный сайт на тему «Инвестиционный портфель», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.

Структура сайта

Главная страница

Личный кабинет

Графики

Настройки пользователя

Диаграммы

Обзор аналогов Google Finance Yahoo Portfolios

ET Portfolio Morningstar Portfolio Manager

Сравнение сайта с аналогами

Функционал Детальное

отслеживание Валютный

рынок Фондовый

рынок Диаграммы

Сайты

Google Finance - + + -

Yahoo Portfolios

+ + + -

ET Portfolio + - + -

Morningstar PM

- - + +

Текущий сайт + + + +

Содержание сайта

Работа с портфелем

Содержание сайта

Разделы сайта

Содержание сайта

Портфель Диаграммы

Выводы по сайту • Разработан адаптивный сайт «Инвестиционный

портфель».

• При разработке были использованы: HTML, CSS, JS, PHP, MySQL.

• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – личный кабинет, 3 уровень – 3 страницы.

• На главной странице расположена форма для входа/регистрации.

• Данные о текущей цене активов берутся динамически посредством GET запросов к Alpha Vantage API.

• Подключены графики от TradingView и динамические диаграммы из библиотеки Chart.js.

Общие выводы

• Разработаны 1 адаптивный сайт и 2 интернет приложения: «Фотогалерея», «Электронный учебник – блокчейн и криптовалюты», «Инвестиционный портфель».

• Изучены языки и технологии: HTML5, CSS3, JS, PHP, CMS WordPress, библиотека jQuery, фреймворк Bootstrap.

• Привлечены дополнительные ресурсы: Alpha Vantage API, TradingView и динамические диаграммы из библиотеки Chart.js.

Груп

по

вое п

ро

ектир

ован

ие

Ко

ман

да IT п

ро

екта

Задание • Выбрать тему проекта (на основе анализа

предметной области)

• Собрать команду (2-5 человек)

• Определиться с функциями каждого человека. Например:

• Креативщик

• Продюссер (постановщик)

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

• Дизайнер

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

• Попробовать описать проект

Примеры тем проектов Программной Инженерии

• Визуальный конструктор смарт-контрактов • Социальная сеть для свободной коммуникации и

обмена опытом между людьми с диабетом с возможностью дистанционной консультации со врачом

• Система анализа покупателей и покупательской корзины

• Мобильный эквайринг • Мобильное приложение компании "Подворье" • HseRoomFinder -Telegram-бот для поиска

свободных аудиторий