Основы web-программирования - Рабочая программа дисциплины - 09.03.03. Прикладная информатика - Направления подготовки

Закреплена за кафедрой	Кафедра информатики
Направление подготовки	09.03.03. Прикладная информатика
Профиль	Прикладная информатика в дизайне
Форма обучения	Очная
Общая трудоемкость	6 ЗЕТ
Учебный план	09_03_03_Прикладная информатика_ПИвД-2021

Курс (семестр)	3 (5)	Итого
Недель	16
Вид занятий	УП	РПД	УП	РПД
Лекции	32	32	32	32
Лабораторные	54	54	54	54
Сам. работа	103	103	103	103
Часы на контроль	27	27	27	27
Итого	216	216	216	216

1. Цели освоения дисциплины

1.1.	получение целостного представления о методах и подходах, используемых в web-разработке; формирование умения и навыков работы с web-приложениями; изучение программных средств web-разработки.

2. Место дисциплины в структуре ООП

Цикл (раздел) ООП: Б1.В.01

3. Компетенции обучающегося, формируемые в результате освоения дисциплины

ПК-2	Способен проектировать информационные ресурсы, web и мультимедийные приложения
ПК-2.1	Знает методы и средства проектирования информационных ресурсов, WEB и мультимедийных приложений, типовые решения, используемые при их разработке
ПК-2.2	Умеет использовать типовые решения и шаблоны, применять методы и средства проектирования информационных ресурсов, WEB и мультимедийных приложений
ПК-2.3	Владеет навыком построения архитектуры информационных ресурсов, WEB и мультимедийных приложений
ПК-4	Способен проектировать дизайн интерфейса с учетом потребностей пользователей, особенностей пользовательского опыта и эргономических требований
ПК-4.1	Знает основные эргономические требования к пользовательскому интерфейсу, принципы проектирования пользовательского опыта
ПК-4.2	Умеет описать логику работы элементов интерфейса, их взаимосвязи, взаимодействия и вариантов состояний
ПК-4.3	Владеет навыком проектирования дизайна интерфейса с учетом потребностей пользователей, особенностей пользовательского опыта и эргономических требований
В результате освоения дисциплины обучающийся должен
3.1.	Знать:
3.1.1.	об основных концепциях и принципах разработки web-приложений; о программных средствах, используемых в web-разработке.
3.2.	Уметь:
3.2.1.	основные подходы и технологии, применяемые в web-разработке; использовать различные инструментальные средства в процессе создания web-приложений.
3.3.	Иметь навыки и (или) опыт деятельности (владеть):
3.3.1.	верстки гипертекстовых документов с использованием языка разметки HTML и таблицы стилей CSS; создания клиент-серверные приложения, выполняемых в сети World Wide Web.

4. Структура и содержание дисциплины

Код занятия	Наименование разделов и тем	Вид занятия	Семестр	Часов	Литература
Раздел 1. Архитектура Web-приложений
1.1.	Стек протоколов TCP\IP. Протокол HTTP: структура протокола, стандартизация.	Лекции	5	4	Л2.2, Л1.1, Л1.2, Л2.1
1.2.	Архитектура Web приложений Задача отделение данных от логики N-уровневая архитектура (1, 2, 3) Шаблоны проектирования Архитектурный шаблон MWC Сравнение MVC и трёх-уровневой архитектуры	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
Раздел 2. Технологии представления
2.1.	Проблемы отображения информации. Развитие протокола передачи гипертекстов HTML, структура, отличие стандартов (HTML 4.1, XHTML, HTML 5). Отделение данных от представления (CSS).	Лекции	5	6	Л2.2, Л1.1, Л1.2, Л2.1
2.2.	Формирование простых HTML станиц	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
2.3.	Проблемы создания динамического интерфейса. История появления JavaScript, синтаксис, распростра-нённые варианты использования.	Лекции	5	4	Л2.2, Л1.1, Л1.2, Л2.1
2.4.	Применение пользовательских скриптов (JavaScript)	Лабораторные	5	4	Л2.2, Л1.1, Л1.2, Л2.1
2.5.	Применения CSS: селекторы, комбинаторы, псевдо-классы, псевдо-элементы, свойства, правила. CSS фреймворки.	Лекции	5	6	Л2.2, Л1.1, Л1.2, Л2.1
2.6.	Особенности представления информации	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
2.7.	Применение JavaScript: приведение типов, об-ласть видимости, портативное наследование. Применение регулярных выражений. JavaScript библиотеки (jQuery).	Лекции	5	6	Л2.2, Л1.1, Л1.2, Л2.1
2.8.	Сложная структура пользовательских скриптов (JavaScript)	Лабораторные	5	4	Л2.2, Л1.1, Л1.2, Л2.1
2.9.	Применение CSS библиотеки TwitterBootstrup.	Лекции	5	6	Л2.2, Л1.1, Л1.2, Л2.1
2.10.	Использование фреймворка Bootstrup для упрощения разработки Web-приложений	Лабораторные	5	8	Л2.2, Л1.1, Л1.2, Л2.1
Раздел 3. Серверные технологии
3.1.	Синхронная и асинхронная передача данных от клиента к серверу (JSONP, Ajax, Pos2HiddenIframe, CORS, postMessage, LongPolling, EventSource, Web-Socket). JavaScript библиотеки для передачи данных.	Лабораторные	5	4	Л2.2, Л1.1, Л1.2, Л2.1
3.2.	Использование Ajax для отображения информации о текущем состоянии сервера	Лабораторные	5	8	Л2.2, Л1.1, Л1.2, Л2.1
3.3.	Основы Java: синтаксические конструкции, ти-пы данных, загрузка классов, reflection.	Лабораторные	5	8	Л2.2, Л1.1, Л1.2, Л2.1
3.4.	Использование баз данных в Web приложениях. Механизм работы с базами данных JDBC. Оптимизация использования соединений (Pull соеди-нение с базой данных). Авторизация и аутентификация с использованием JAAS	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
3.5.	Подключение базы данных к приложению, использование пулов соединений с базой данных	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
3.6.	Передача данных внешним подсистемам (меха-низм сериализации и десериализации). Стандартный механизм (Serializable) Сериализация в текстовый формат (маршалинг) с ис-пользованием jaxb и xsd.	Сам. работа	5	9	Л2.2, Л1.1, Л1.2, Л2.1
3.7.	Сериализация десериализация данных	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
3.8.	История появлдения многопоточных приложе-ниях. Многопоточность в java, приметивы управления пото-ками. Многопоточность в Web приложениях (избегания бло-кировок и гонки за ресурсы).	Сам. работа	5	10	Л2.2, Л1.1, Л1.2, Л2.1
3.9.	Оптимизация серверной части Web-приложения за счёт использования специальных языковых средств	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
3.10.	Защита канала передачи данных (https). Проблема открытых протоколов. Симметричное и несимметричное шифрование (пере-дача ключа) Алгоритм работы RSA, передача ключа сеанса. Проблема аутентификации (сертификаты и сервисы сертификации)	Сам. работа	5	10	Л2.2, Л1.1, Л1.2, Л2.1
3.11.	Изучения сертификатов на сторонних сайтах, подключение самоподписанного сертификата	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1
3.12.	Протекания процесса работы сервиса (легиро-вание состояния).	Сам. работа	5	12	Л2.2, Л1.1, Л1.2, Л2.1
3.13.	Использование базы данных через ORM Hibernate	Сам. работа	5	12	Л2.2, Л1.1, Л1.2, Л2.1
3.14.	Web-сервисы, взаимодействие удалённых про-граммных компонент. Архитектуры SOAP и REST	Сам. работа	5	18	Л2.2, Л1.1, Л1.2, Л2.1
3.15.	Реализация интерфейсов подсистем на базе протокола SOAP	Сам. работа	5	32	Л2.2, Л1.1, Л1.2, Л2.1
3.16.	Написание собственных скриптов сборки проекта	Лабораторные	5	2	Л2.2, Л1.1, Л1.2, Л2.1

5. Фонд оценочных средств

5.1. Контрольные вопросы и задания для проведения текущего контроля и промежуточной аттестации по итогам освоения дисциплины

Оценочные материалы для текущего контроля по разделам и темам дисциплины в полном объеме размещены в онлайн-курсе на образовательном портале «Цифровой университет АлтГУ» – https://portal.edu.asu.ru/course/view.php?id=11253

ОЦЕНКА СФОРМИРОВАННОСТИ КОМПЕТЕНЦИИ ПК-4 и ПК-2
Способен проектировать дизайн интерфейса с учетом потребностей пользователей, особенностей пользовательского опыта и эргономических требований и способен проектировать информационные ресурсы, web и мультимедийные приложения

ПРИМЕРЫ ЗАДАНИЙ ЗАКРЫТОГО ТИПА -
Примеры заданий закрытого типа

1. Последний элемент на нашей простейшей странице — абзац текста. Как будут выглядеть три последних закрывающих тега в документе?
1. </body></html>
2. </html></body>
3. </head></html>
4. </html></body>
5. </html></body>

2. Как можно изменить правый внешний отступ у элемента?
1. margin-right +
2. border-right
3. indent
4. padding-right
5. Top-rigth

3. Как добавить цвет фона для всех элементов <h2>?
1. h2 {background-color:#FFFFFF;} +
2. all.h2 {background-color:#FFFFFF;}
3. h2.all {background-color:#FFFFFF;}
4. h2.all {background-color: FFFFFF;}
5. h2 {color: #FFFFFFFF;}

4. Какие есть типы адаптивности для классов в Bootstrap?
1. sm, xs
2. lg, md, sm, xs +
3. md, sm, xs
4. lg, md
5. lg, md, sm

5. Какое значение будет напечатано на экран?
Let name1 = ‘Bill’
Let name1 = ‘James’
Name1 = ‘Fill’
Console.log(name1)
a. Fill +
b. James
c. Bill
d. name
e. name1

6. Функция sayHi использует внешнюю переменную name. Будет ли показано имя, если да, то какое?
Let name = ‘Михаил’
Function sayHi () {
Alert (‘Привет,’ + name);
}
Name = ‘Олег’
sayHi
1. будет ошибка
2. Михаил
3. undefined
4. Олег +
5. Маша

7. Какие методы позволяют найти элемент по css-селектору?(возможно несколько вариантов)
1. querySelector +
2. querySelectorAll +
3. getElementById
4. getElementByTagName
5. .slice.call

8. Какие основные особенности XML?(выберите несколько вариантов)
1. не закодирован +
2. только компьютер может его прочитать
3. у него есть DOM +
4. данные хранятся в виде текста +
5. имеет древовидную структуру +

9. Какое действие выполняет эта строка?let xhr = new XMLHttpRequest();
1. создаёт переменную xhr и присваивает ей ответ сервера
2. создаёт переменную xhr и присваивает ей объект XMLHttp-запроса с текстом "Microsoft.XMLHTTP"
3. создаёт объект XMLHttp-запроса и присваивает его переменной xhr +

10. Укажите, в каком формате AJAX может получать данные с сервера? (несколько вариантов)
1. текст +
2. XML +
3. JSON +
4. HTML +
5. YII

11.Что будет выведено в результате выполнения следующего кода:
$x = 6;
If ($x == 10) {
echo ‘A’;
}
elseif ($x>7 && $x<10) {
echo ‘B’;
}
elseif ($x == 20) {
echo ‘C’;
}
elseif ($x>7 && $x<10) {
echo ‘D’;
}
1. A
2. B
3. C
4. D +
5. ошибка

12. Сколько раз следующий код напечатает "Hello"?
$i = 1;
Do { echo ‘Hello’; }
While ($i < 0);
1. Один раз +
2. Несколько раз
3. В этом цикле не выхода, печатать будет бесконечное число раз
4. Ни одного раза
5. 10 раз

13. С помощью какой функции можно удалить Cookie?
1. deletecookie
2. readcookie
3. reabcookie
4. setcookie +
5. Cookieset

14. Укажите, какого робота не существует в поисковых системах:
1. Робот, который индексирует rss-ленту для поиска по блогам
2. Медленный робот +
3. Основной индексирующий робот, функция которого — поиск и индексирование информации для формирования базы основного поиска
4. Робот, который индексирует только картинки
5. Быстрый робот

15. Как определить валидность HTML-кода? (несколько вариантов)
1. Проверить корректность HTML-верстки с помощью специального валидатора. +
2. Проверить код на соответствие спецификации CSS +
3. Проверить код на наличие битых ссылок +
4. Проверить адаптивность кода +
5. Добавить код JavaScript

ПРИМЕРЫ ЗАДАНИЙ ОТКРЫТОГО ТИПА - https://clck.ru/35gLvd

КРИТЕРИИ ОЦЕНИВАНИЯ: Каждое задание оценивается 1 баллом. Оценивание КИМ в целом: «отлично» – верно выполнено 85-100% заданий; «хорошо» – верно выполнено 70-84% заданий; «удовлетворительно» – верно выполнено 51-69% заданий; «неудовлетворительно» – верно выполнено 50% или менее 50% заданий.

5.2. Темы письменных работ для проведения текущего контроля (эссе, рефераты, курсовые работы и др.)

Не предусмотренно.

5.3. Фонд оценочных средств для проведения промежуточной аттестации

Список вопросов

Разновидности сайтов
Информационная архитектура. Способы организации сайта
Создание таблицы на HTML5
Добавление ссылки на страницу
Работа с изображениями. Высота и ширина, описание картинки.
Семантические элементы HTML5
HTML5-видео, HTML5-аудио. Параметры видео, аудио
HTML5-формы. Кнопка, текстовое поле, группировка элементов формы.
Каскадные таблицы стилей. Способы подключения к странице
CSS. Базовый синтаксис (правило написания)
CSS-верстка текста. Стили к тексту.
CSS. Использование классов. Идентификаторы. Правило написания
CSS. Работа со слоями. Свойство z-index.
CSS. Позиционирование элементов
CSS. Стиль графических элементов

6. Учебно-методическое и информационное обеспечение дисциплины

6.1. Рекомендуемая литература
6.1.1. Основная литература
	Авторы	Заглавие	Издательство, год	Эл. адрес
Л1.1	Громов Ю. , Иванова О. Г. , Шахов Н. Г. , Однолько В. Г.	Информационные Web-технологии:	ФГБОУ ВПО «Тамбовский государственный технический университет», 2014	biblioclub.ru
Л1.2	Тузовский А.Ф.	ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ. Учебное пособие для академического бакалавриата: Гриф УМО	М.:Издательство Юрайт, 2018	biblio-online.ru
6.1.2. Дополнительная литература
	Авторы	Заглавие	Издательство, год	Эл. адрес
Л2.1	Хенриксон Х., Хофманн С.	Администрирование web-серверов в IIS: Учебная литература для ВУЗов	Национальный Открытый Университет «ИНТУИТ», 2016	biblioclub.ru
Л2.2	Диков А. А.	Веб-технологии HTML и CSS.:Учебное пособие:	М. : Директ-медиа//ЭБС "Университетская библиотека online", 2012	biblioclub.ru
6.2. Перечень ресурсов информационно-телекоммуникационной сети "Интернет"
	Название		Эл. адрес
Э1	http://www.w3schools.com/ Информация о стандартах технологий представления
Э2	http://habrahabr.ru/company/yandex/blog/168259/ Видео материалы школы Web-разработки yandex
Э3	http://habrahabr.ru/ Коллективный блог содержащий множество аналитических статей косающихся использования различных техзнологий разработки приложений
Э4	http://www.lektorium.tv/course/?id=22824 Открытое сервис видеолекций (Курс посвящённый языку программирования java)		www.lektorium.tv
Э5	Основы веб программирования		portal.edu.asu.ru
6.3. Перечень программного обеспечения
1. Microsoft Office 2010 (Office 2010 Professional, № 4065231 от 08.12.2010), (бессрочно); 2. Microsoft Windows 7 (Windows 7 Professional, № 61834699 от 22.04.2013), (бессрочно); 3. Chrome (http://www.chromium.org/chromium-os/licenses ), (бессрочно); 4. 7-Zip (http://www.7-zip.org/license.txt ), (бессрочно); 5. AcrobatReader (http://wwwimages.adobe.com/content/dam/Adobe/en/legal/servicetou/Acrobat_com_Additional_TOU-en_US-20140618_1200.pdf), (бессрочно); 6. ASTRA LINUX SPECIAL EDITION (https://astralinux.ru/products/astra-linux-special-edition/), (бессрочно); 7. LibreOffice (https://ru.libreoffice.org/), (бессрочно); 8. Веб-браузер Chromium (https://www.chromium.org/Home/), (бессрочно); 9. Антивирус Касперский (https://www.kaspersky.ru/), (до 23 июня 2024); 10. Архиватор Ark (https://apps.kde.org/ark/), (бессрочно); 11. Okular (https://okular.kde.org/ru/download/), (бессрочно); 12. Редактор изображений Gimp (https://www.gimp.org/), (бессрочно)
6.4. Перечень информационных справочных систем
1. Электронная база данных «Scopus» (http://www.scopus.com); 2. Электронная библиотечная система Алтайского государственного университета (http://elibrary.asu.ru/); 3. Научная электронная библиотекаelibrary(http://elibrary.ru)

7. Материально-техническое обеспечение дисциплины

Аудитория	Назначение	Оборудование
Учебная аудитория	для проведения занятий лекционного типа, занятий семинарского типа (лабораторных и(или) практических), групповых и индивидуальных консультаций, текущего контроля и промежуточной аттестации, курсового проектирования (выполнения курсовых работ), проведения практик	Стандартное оборудование (учебная мебель для обучающихся, рабочее место преподавателя, доска)
Помещение для самостоятельной работы	помещение для самостоятельной работы обучающихся	Компьютеры, ноутбуки с подключением к информационно-телекоммуникационной сети «Интернет», доступом в электронную информационно-образовательную среду АлтГУ
206Л	лаборатория информационных технологий - компьютерный класс - учебная аудитория для проведения занятий семинарского типа (лабораторных и(или) практических); проведения групповых и индивидуальных консультаций, текущего контроля и промежуточной аттестации	Учебная мебель на 14 посадочных мест; компьютеры: марка DEPO модель Neos 260, мониторы: марка Philips модель 227E3LHSU - 14 единиц
207Л	лаборатория информационных технологий - компьютерный класс - учебная аудитория для проведения занятий семинарского типа (лабораторных и(или) практических); проведения групповых и индивидуальных консультаций, текущего контроля и промежуточной аттестации	Учебная мебель на 14 посадочных мест; компьютеры: марка DEPO модель Neos 260, мониторы: марка Philips модель 227E3LHSU - 14 единиц

8. Методические указания для обучающихся по освоению дисциплины

На лекционных занятиях необходимо конспектировать изучаемый материал.
- Для систематизации лекционного материала, который будет полезен при подготовке к итоговому контролю знаний, записывайте на каждой лекции тему, вопросы для изучения, рекомендуемую литературу.
- В каждом вопросе выделяйте главное, обязательно запишите ключевые моменты (определение, факты, правила, примеры и т.д.), подчеркните их.
- Если по содержанию материала возникают вопросы, не нужно выкрикивать, запишите их и задайте по окончании лекции или на семинарском занятии.
- Перед следующей лекцией обязательно прочитайте предыдущую, чтобы актуализировать знания и осознанно приступить к освоению нового содержания

Лабораторная работа – это форма работы, которая направлена на обобщение, систематизацию, углубление теоретических знаний; формирование умений применять полученные знания в практической деятельности; развитие аналитических, проектировочных, конструктивных умений;
выработку самостоятельности, ответственности и творческой инициативы. В ходе выполнения лабораторной работы студент должен проявить умение самостоятельно работать с учебной и научной литературой, Интернет-ресурсами, продемонстрировать навыки владения компьютерной техникой и пакетами прикладных программ соответствующего назначения. Контрольной точкой лабораторной работы является ее защита. Защита проводится в устной форме: студент должен уметь объяснить и обосновать каждый выполненный этап работы.
Защита лабораторных работ проводится, в часы, отведенные на лабораторные занятия или по графику консультаций преподавателя.
- Самостоятельную подготовку к занятию необходимо начинать с изучения понятийного аппарата темы. Рекомендуем использовать справочную литературу (словари, справочники, энциклопедии), целесообразно создать и вести свой словарь терминов.
- Важно запомнить, что любой источник должен нести достоверную информацию, особенно это относится к Internet-ресурсам. При использовании Internet - ресурсов в процессе подготовки не нужно их автоматически «скачивать», они должны быть проанализированы. Не нужно «скачивать» готовые рефераты, так как их однообразие преподаватель сразу выявляет, кроме того, они могут быть сомнительного качества.
- В процессе изучения темы анализируйте несколько источников.
- Полезным будет работа с электронными учебниками и учебными пособиями в Internet-библиотеках. Зарегистрируйтесь в них: университетская библиотека Онлайн (http://www.biblioclub.ru/) и электронно-библиотечная система «Лань» (http://e.lanbook.com/).
- При возникновении трудностей в процессе подготовки взаимодействуйте с преподавателем, консультируйтесь по самостоятельному изучению темы.

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

Итоговый контроль.
- Для подготовки к зачету/экзамену возьмите перечень примерных вопросов у преподавателя.
- В списке вопросов выделите те, которые были рассмотрены на занятиях. Обратитесь к своим записям, выделите существенное. Для более детального изучения изучите рекомендуемую литературу.
- Если в списке вопросов есть те, которые не рассматривались на занятии, изучите их самостоятельно.