Курс «Разработка интернет...
TRANSCRIPT
![Page 1: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/1.jpg)
Курс «Разработка интернет приложений» (РИП)
Лекция 1
Трубочкина Надежда Константиновна
Москва 2018
![Page 2: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/2.jpg)
. Цели и задачи освоения дисциплины
Данная дисциплина нацелена на освоение:
• теоретических знаний по разработке интернет приложений и сервисов,
• и проектной командной работы по разработке интернет приложений и сервисов.
В результате изучения дисциплины студенты поймут основные концепции и принципы разработки интернет-приложений и сервисов и получат знания и навыки frontend и backend разработчиков.
![Page 3: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/3.jpg)
Frontend
структура знаний
![Page 4: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/4.jpg)
Программа курса. 1. HTML и CSS вёрстка
• Чтобы создать крутой дизайн веб-проекта, необходимо хорошо понимать возможности и ограничения среды, в которой он будет реализован. Поэтому обучение дизайну мы начинаем с изучения основ вёрстки макетов и возможностей HTML и CSS.
• • Базовая HTML-разметка, HTML5 • Знакомство с CSS, CSS3 • Блочные элементы • Семантическая разметка документа • Управление блоками в потоке • Позиционирование блоков • CSS-селекторы • Стили текста и оформления • Стили позиционирования, отступы и размеры блоков • Сетки • Процесс верстки сайта • Профессиональное оформление кода • Работа с Adobe Photoshop, вёрстка в точном соответствии с макетом • Особенности подготовки изображений для верстки • Возможности JavaScript
![Page 5: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/5.jpg)
Навыки, которые вы получите
• Создание базовой HTML-разметки • Умение задавать стили отображения с
помощью CSS • Применение Adobe Photoshop в веб-
разработке • Обеспечение кроссбраузерности • Оптимизация работы с изображениями • Применение принципов клиент-серверного
взаимодействия • Полноценная верстка страниц сайта
![Page 6: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/6.jpg)
2. Веб-дизайн В этом блоке учимся выстраивать визуальную иерархию, работать с композицией и правильно расставлять акценты. Осваиваем инструменты для создания макетов и правила разработки адаптивных мультиплатформенных интерфейсов.
• Введение в профессию дизайнера • Композиция • Веб-типографика • Теория цвета • Модульные сетки • Адаптивный дизайн • Веб-анимация • Системы ведения проектов • Составление технического задания • Вдохновение, творчество, импровизация • Презентация работ и подготовка портфолио
![Page 7: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/7.jpg)
Навыки, которые вы получите
• Разработка дизайн-макета сайта
• Работа с модульной сеткой
• Тестирование взаимодействия с пользователями
• Выстраивание визуальной иерархии
• Разработка адаптивного макета
• Создание веб-анимации
• Взаимодействие с командой
• Разработка презентации
![Page 8: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/8.jpg)
3. Проектирование интерфейсов
Чтобы создавать по-настоящему удобные интерфейсы, разберемся, как пользователи взаимодействуют с сервисами: научимся собирать пользовательские истории, анализировать восприятие интерфейсов и использовать это в разработке.
• Введение в предметную область • Азбука пользовательского интерфейса • Психофизиология восприятия интерфейсов • Методологии командной работы • Качественные исследования аудитории • Информационная архитектура
![Page 9: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/9.jpg)
Навыки, которые вы получите
• Проектирование интерфейса цифрового продукта
• Исследование пользовательского взаимодействия
• Выстраивание информационной архитектуры проекта
• Формирование команды и внутреннего взаимодействия
• Выстраивание визуальной коммуникации
• Создание карты пользовательских сценариев
• Психофизиология восприятия интерфейсов
![Page 10: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/10.jpg)
4. Вёрстка адаптивного макета
Современный веб-сервис все чаще используется на мобильных устройствах, поэтому интерфейс должен быть не просто удобным — он должен быть удобным на любом устройстве. В этом модуле мы учимся адаптировать макеты под разные устройства и платформы. • Верстка резинового макета • Введение в медиа-запросы • Медиа-функции • Особенности верстки для мобильных устройств • Адаптивная типографика • Адаптивные изображения и видео
![Page 11: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/11.jpg)
Навыки, которые вы получите
• Аналитика поставленной задачи и выработка идеи
• Композиционное видение • Применение основ цветовой психологии,
подбор цветовых решения и связки • Верстка текста, базовые знания типографики • Структурирование проекта в Adobe Photoshop • Применение правил анимации и владение
инструментами анимации Adobe Flash • Работа с таймлайном
![Page 12: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/12.jpg)
Backend
структура знаний
![Page 13: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/13.jpg)
Получат следующие навыки:
• верстки сайтов и шаблонов, разработки веб-интерфейсов и внедрения скриптов;
• работы с HTML5 и CSS3, изменения содержимого и внешнего вида веб-интерфейсов (страниц);
• Использования библиотеки jQuery, которая помогает создавать качественные веб-интерфейсы
• разработки адаптивных веб-интерфейсов, меняющихся в зависимости от размера экрана;
• создания интерактивных веб-интерфейсов, применения всех возможностей современных браузеров для своего проекта;
• написания программного кода на Jscript, PHP, Python;
1 м
од
уль
2 м
од
уль
![Page 14: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/14.jpg)
Получат следующие навыки: (2)
• использования для разработки веб-сервисов расширяемого языка разметки XML, предназначенного для хранения и передачи структурированных данных;
• использования SOAP: протокола обмена сообщениями на базе XML;
• использования WSDL: языка описания внешних интерфейсов веб-служб на базе XML;
• использования UDDI: универсального интерфейса распознавания, описания и интеграции (Universal Discovery, Description and Integration);
• использования JSON: более эффективного языка разметки; • использования облачных сервисов для реализации своего веб-
проекта. • В связи с необходимостью при создании своего веб-проекта
студенты вправе выбирать самостоятельно любые дополнительные средства разработки (языки, платформы и пр.), обеспечивающие качественное выполнение проекта.
3 м
од
уль
![Page 15: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/15.jpg)
Формы контроля Тип контроля Форма
контроля
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 модуля на
экзамене – защита
групповых проектов
![Page 16: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/16.jpg)
Итоговая оценка
Весовые коэффициенты: Накопленная оценка: 50% (Kн=0,5)
Экзамен: защита интернет проекта: 50%(Kэ=0,5)
Итоговая оценка вычисляется по формуле:
Оитоговая = Kн*Он + Kэ *Опроект
![Page 17: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/17.jpg)
Примеры работ 2017-2018 г.г. (Индивиуальное обучение)
Дворцов Владислав Александрович
Фотогалерея Электронный учебник – блокчейн и криптовалюты Инвестиционный портфель
Кравченко Алла
Тема одна для сайта и веб-приложений: Региональная транспортная компания.
Можаев Борис Александрович
Сайты: 1-й "Сетевая прачечная" 2 и 3 Aquatermo.
![Page 18: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/18.jpg)
Маслова Юлия
1-й сайт: "Благотворительный фонд помощи защиты животным"; 2-й сайт: "Smart-образование"; 3-й сайт: "Smart-образование".
Яськевич Евгений Владиславович
Научно-популярное новостное интернет-издание;
Путеводитель путешественника;
Сайт туроператора.
![Page 19: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/19.jpg)
Лыжин Илья
1.1 сайт - Промо-сайт проекта образовательного бота.
1.2 сайт - Сайт инновационного проекта «Общественная розетка»
2 сайт - Интернет-магазин конструктора интернет вещей.
3 сайт - Сайт-портфолио.
![Page 20: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/20.jpg)
Митрофанов А.М. 1. Игровой проект STALCRAFT. 2. Фотогалерея. 3. Сайт для поиска игроков в команду. Катунин А.В. 1-й модуль: Сайт «Центр спорта и отдыха «Комела» в Вологде» (HTML, CSS, Codeinteger, Bootstrap) 2-й модуль: Веб-приложение «Реестр мошенников для страховых кампаний с использованием технологии Блокчейн» (HTML, CSS, Bootstrap, Codeinteger, PHP, Python, MySQL) 3-й модуль: Веб-приложение «Почтовый робот» (Bootstrap, PHP, MySQL)
![Page 21: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/21.jpg)
Шарова Дарья Сергеевна
Сайт №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
![Page 22: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/22.jpg)
Пример презентации на экзамене.
Презентация Дворцова Владислава Александровича
2018 весна
![Page 23: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/23.jpg)
Портфолио Дворцова В.А.
по результатам разработки веб-приложений различной сложности
Руководитель: проф., д.т.н. Трубочкина Н.К.
Москва 2018
![Page 24: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/24.jpg)
САЙТ 1
«ФОТОГАЛЕРЕЯ»
![Page 25: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/25.jpg)
Постановка задачи
Используя HTML, CSS, JS разработать адаптивный сайт на тему «Фотогалерея», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.
![Page 26: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/26.jpg)
Структура сайта
Фотогалерея
Новости Категории
Города
Пейзажи
Горы
Панорама Контакты
...
![Page 27: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/27.jpg)
Обзор аналогов pexels.com shutterstock.com
unsplash.com istockphoto.com
![Page 28: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/28.jpg)
Сравнение сайта с аналогами
Главным отличием разработанного сайта от аналогов является наличие возможности просмотра панорамных изображений.
![Page 29: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/29.jpg)
Содержание сайта
Главная страница Категории
![Page 30: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/30.jpg)
Содержание сайта Панорама Контакты
![Page 31: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/31.jpg)
Содержание сайта
Выпадающий список Просмотр изображения
![Page 32: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/32.jpg)
Выводы по сайту • Разработан адаптивный сайт «Фотогалерея».
• При разработке были использованы: HTML, CSS, JS, jQuery, Bootstrap.
• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – 5 страниц, 3 уровень – 6 страниц.
• В главной навигации 1 выпадающее меню.
• На главной странице размещен тематический слайдер.
• Графические файлы оптимизированы по объему. Итоговый размер 26 файлов: 11,65 Мб.
![Page 33: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/33.jpg)
САЙТ 2
«ЭЛЕКТРОННЫЙ УЧЕБНИК – БЛОКЧЕЙН И
КРИПТОВАЛЮТЫ»
![Page 34: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/34.jpg)
Постановка задачи
Используя WordPress разработать адаптивный сайт-учебник на тему «Блокчейн и криптовалюты», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.
![Page 35: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/35.jpg)
Структура сайта
Главная страница
Котировки
BTC/USD
ETH/USD
LTC/USD
Статьи
О биткоине просто
О биткоине детально
Как добываются
криптовалюты
Контакты Профиль Обучение
...
![Page 36: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/36.jpg)
Обзор аналогов blockgeeks.com bitcoin.com
bitcoin.org bitcoin.it
![Page 37: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/37.jpg)
Сравнение сайта с аналогами
Функционал Личный кабинет
Комментирование записей
Добавление статей
Платная подписка
Сайты
blockgeeks.com
+ + - +
bitcoin.com + + - -
bitcoin.org - - - -
bitcoin.it + - + -
Текущий сайт + + + +
![Page 38: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/38.jpg)
Содержание сайта
Котировки Доступные статьи
![Page 39: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/39.jpg)
Содержание сайта
Статья Профиль
![Page 40: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/40.jpg)
Содержание сайта
Оплата обучения Общий чат
![Page 41: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/41.jpg)
Выводы по сайту
• Разработан адаптивный сайт-учебник на тему «Блокчейн и криптовалюты».
• При разработке были использованы: HTML, CSS, JS, WordPress.
• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – 5 страниц, 3 уровень – 7 страниц.
• В главной навигации 2 выпадающих меню.
• Имеется личный кабинет, чат, графики от TradingView.
• Доступно приобретение платной подписки через форму Яндекс.
![Page 42: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/42.jpg)
САЙТ 3
«ИНВЕСТИЦИОННЫЙ ПОРТФЕЛЬ»
![Page 43: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/43.jpg)
Постановка задачи
Используя HTML, CSS, JS, PHP разработать адаптивный сайт на тему «Инвестиционный портфель», содержащий не менее 5-6 страниц, полностью раскрывающих тему, и имеющий эргономичный дизайн.
![Page 44: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/44.jpg)
Структура сайта
Главная страница
Личный кабинет
Графики
Настройки пользователя
Диаграммы
![Page 45: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/45.jpg)
Обзор аналогов Google Finance Yahoo Portfolios
ET Portfolio Morningstar Portfolio Manager
![Page 46: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/46.jpg)
Сравнение сайта с аналогами
Функционал Детальное
отслеживание Валютный
рынок Фондовый
рынок Диаграммы
Сайты
Google Finance - + + -
Yahoo Portfolios
+ + + -
ET Portfolio + - + -
Morningstar PM
- - + +
Текущий сайт + + + +
![Page 47: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/47.jpg)
Содержание сайта
Работа с портфелем
![Page 48: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/48.jpg)
Содержание сайта
Разделы сайта
![Page 49: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/49.jpg)
Содержание сайта
Портфель Диаграммы
![Page 50: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/50.jpg)
Выводы по сайту • Разработан адаптивный сайт «Инвестиционный
портфель».
• При разработке были использованы: HTML, CSS, JS, PHP, MySQL.
• Структура сайта трехуровневая. 1 уровень – главная страница, 2 уровень – личный кабинет, 3 уровень – 3 страницы.
• На главной странице расположена форма для входа/регистрации.
• Данные о текущей цене активов берутся динамически посредством GET запросов к Alpha Vantage API.
• Подключены графики от TradingView и динамические диаграммы из библиотеки Chart.js.
![Page 51: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/51.jpg)
Общие выводы
• Разработаны 1 адаптивный сайт и 2 интернет приложения: «Фотогалерея», «Электронный учебник – блокчейн и криптовалюты», «Инвестиционный портфель».
• Изучены языки и технологии: HTML5, CSS3, JS, PHP, CMS WordPress, библиотека jQuery, фреймворк Bootstrap.
• Привлечены дополнительные ресурсы: Alpha Vantage API, TradingView и динамические диаграммы из библиотеки Chart.js.
![Page 52: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/52.jpg)
Груп
по
вое п
ро
ектир
ован
ие
Ко
ман
да IT п
ро
екта
![Page 53: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/53.jpg)
Задание • Выбрать тему проекта (на основе анализа
предметной области)
• Собрать команду (2-5 человек)
• Определиться с функциями каждого человека. Например:
• Креативщик
• Продюссер (постановщик)
• Программист
• Дизайнер
• Тестировщик
• Попробовать описать проект
![Page 54: Курс «Разработка интернет приложений»nadin.miem.edu.ru/!!!_lec_2018_pdf/l_01_2018.pdfприложений» (РИП) Лекция 1 Трубочкина](https://reader034.vdocuments.co/reader034/viewer/2022050515/5f9f8306cafda20d031f3c22/html5/thumbnails/54.jpg)
Примеры тем проектов Программной Инженерии
• Визуальный конструктор смарт-контрактов • Социальная сеть для свободной коммуникации и
обмена опытом между людьми с диабетом с возможностью дистанционной консультации со врачом
• Система анализа покупателей и покупательской корзины
• Мобильный эквайринг • Мобильное приложение компании "Подворье" • HseRoomFinder -Telegram-бот для поиска
свободных аудиторий