МДК.08.01 Проектирование и разработка интерфейсов пользователя

Государственное бюджетное профессиональное образовательное учреждение
«Дербентский профессионально-педагогический колледж им.
Г.Б.Казиахмедова»

РАБОЧАЯ ПРОГРАММА ПРОФЕССИОНАЛЬНОГО МОДУЛЯ
ПМ 08. РАЗРАБОТКА ДИЗАЙНА ВЕБ-ПРИЛОЖЕНИЙ
МДК 08.01 Проектирование и разработка интерфейсов пользователя

Дербент, 2025 г.

Программа междисциплинарного курса разработана на основе федерального
государственного образовательного стандарта среднего профессионального
образования

по

специальности

09.02.07

Информационные

системы

программирование утверждённым приказом Министерства образования и науки
Российской Федерации 09 декабря 2016 г. №1547, зарегистрированным в
Министерстве

юстиции

Российской

Федерации

декабря

2016

года,

регистрационный № 44936, входящим в укрупненную группу ТОП-50 09.00.00
Информатика и вычислительная техника и примерной основной образовательной
программы, разработанной Федеральным учебно-методическим объединением в
системе среднего профессионального образования по укрупненным группам
профессий, специальностей 09.00.00 Информатика и вычислительная техника,
зарегистрированной

Федеральном

реестре

примерных

основных

образовательных программ СПО под номером 09.02.07-17.05.11.
Организация-разработчик: ГБПОУ ДППК им. Г.Б.Казиахмедова
Разработчики:
Махмудова Наима Гаджиевна, зам.директора по УР ГБПОУ ДППК им.
Г.Б.Казиахмедова;
Абдулхаликова Индира Магомадовна, преподаватель ГБПОУ ДППК им.
Г.Б.Казиахмедова
Программа рассмотрена на заседании методического объединения
преподавателей
Рекомендована методическим советом ГБПОУ ДППК им. Г.Б.Казиахмедова
к использованию в качестве рабочей программы предмета для специальностей
универсального профиля от 21.02.2025
Утверждена приказом директора ГБПОУ ДППК им. Г.Б.Казиахмедова
№ _54_от 24.02.25

СОДЕРЖАНИЕ

1. ОБЩАЯ ХАРАКТЕРИСТИКА РАБОЧЕЙ ПРОГРАММЫ
МЕЖДИСЦИПЛИНАРНОГО КУРСА
2. СТРУКТУРА И СОДЕРЖАНИЕ МЕЖДИСЦИПЛИНАРНОГО КУРСА

3
5

3. УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ МЕЖДИСЦИПЛИНАРНОГО
КУРСА

4. КОНТРОЛЬ И ОЦЕНКА РЕЗУЛЬТАТОВ ОСВОЕНИЯ
МЕЖДИСЦИПЛИНАРНОГО КУРСА

1. ОБЩАЯ ХАРАКТЕРИСТИКА РАБОЧЕЙ ПРОГРАММЫ
МЕЖДИСЦИПЛИНАРНОГО КУРСА

«МДК 08.01 Проектирование и разработка интерфейсов пользователя»
1.1. Цель и планируемые результаты освоения профессионального модуля
В результате изучения междисциплинарного курса студент должен освоить основной вид
деятельности Разработка дизайна веб-приложений и соответствующие ему общие
компетенции, и профессиональные компетенции:
1.1.1 Перечень общих компетенций
Код
Наименование общих компетенций
Выбирать способы решения задач профессиональной деятельности,
ОК 1
применительно к различным контекстам.
Осуществлять поиск, анализ и интерпретацию информации, необходимой
ОК 2
для выполнения задач профессиональной деятельности.
Планировать и реализовывать собственное профессиональное и
ОК 3
личностное развитие.
Работать в коллективе и команде, эффективно взаимодействовать с
ОК 4
коллегами, руководством, клиентами.
Осуществлять устную и письменную коммуникацию на государственном
ОК 5
языке Российской Федерации с учетом особенностей социального и
культурного контекста.
Проявлять гражданско-патриотическую позицию, демонстрировать
ОК 6
осознанное поведение на основе традиционных общечеловеческих
ценностей, применять стандарты антикоррупционного поведения.
Содействовать сохранению окружающей среды, ресурсосбережению,
ОК 7
эффективно действовать в чрезвычайных ситуациях.
Использовать средства физической культуры для сохранения и укрепления
ОК 8
здоровья в процессе профессиональной деятельности и поддержания
необходимого уровня физической подготовленности.
Использовать информационные технологии в профессиональной
ОК 9
деятельности.
ОК 10 Пользоваться профессиональной документацией на государственном и
иностранном языках.
ОК 11 Использовать знания по финансовой грамотности, планировать
предпринимательскую деятельность в профессиональной сфере.
1.1.2 Перечень профессиональных компетенций
Код
Наименование видов деятельности и профессиональных компетенций
Разработка дизайна веб-приложений
ВД 8
ПК 8.1 Разрабатывать дизайн-концепции веб-приложений в соответствии с
корпоративным стилем заказчика
1.1.3 В результате освоения профессионального модуля студент должен:
В разработке дизайна веб-приложений в соответствии со
Иметь
практический стандартами и требованиями заказчика; создании, использовании и
оптимизировании изображений для веб-приложений; разработке
опыт
3

уметь

знать

интерфейса пользователя для веб-приложений с использованием
современных стандартов
создавать, использовать и оптимизировать изображения для вебприложений; выбирать наиболее подходящее для целевого рынка
дизайнерское решение; создавать дизайн с применением
промежуточных эскизов, требований к эргономике и технической
эстетике; разрабатывать интерфейс пользователя для вебприложений с использованием современных стандартов
нормы и правила выбора стилистических решений; современные
методики разработки графического интерфейса; требования и нормы
подготовки и использования изображений в информационнотелекоммуникационной сети "Интернет" (далее - сеть Интернет);
государственные стандарты и требования к разработке дизайна вебприложений

1.1.4 Реализация программы воспитания
Код
Личностные результаты
личностных
реализации программы воспитания
результатов
(дескрипторы)
реализации
программы
воспитания
Сформированность мировоззрения, соответствующего
современному уровню развития науки и общественной практики,
основанного на диалоге культур, а также различных форм
ЛР 4
общественного сознания, осознание своего места в поликультурном
мире
Готовность и способность к образованию, в том числе
самообразованию, на протяжении всей жизни; сознательное
ЛР 9
отношение к непрерывному образованию как условию успешной
профессиональной и общественной деятельности
1.2. Количество часов, отводимое на освоение профессионального модуля
Всего часов на освоение МДК
Из них
на лекции, уроки
на практические занятия
на самостоятельную работу
на промежуточную аттестацию

252
126
114
6
6

2. СТРУКТУРА И СОДЕРЖАНИЕ ПРОФЕССИОНАЛЬНОГО МОДУЛЯ «ПМ.08. Разработка дизайна веб-приложений»
2.1. Структура профессионального модуля
Коды
профессиональны
х общих
компетенций
ПК 8.1

Наименования разделов
профессионального модуля
Раздел 1. Технология
проектирования и
разработки интерфейсов
пользователя
Всего:

Объем профессионального модуля, час.
Обучение по МДК
Практики
Лабораторных и
Курсовых
Производст
практических
работ
Учебная
венная
занятий
(проектов)

Суммарный
объем
нагрузки, час.

Всего

252

240

114

252

240

114

Самостоят
ельная
работа1

Промеж.
аттест.

Самостоятельная работа в рамках образовательной программы планируется образовательной организацией с соответствии с требованиями ФГОС СПО в пределах объема
профессионального модуля в количестве часов, необходимом для выполнения заданий самостоятельной работы обучающихся, предусмотренных тематическим планом и
содержанием учебной дисциплины.
1

2.2. Тематический план и содержание профессионального модуля (ПМ)
Наименование
разделов и тем
профессионального
модуля (ПМ),
междисциплинарных
курсов (МДК)
1

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

Личностные
результаты
реализации
программы
воспитания

Объем
часов

Раздел 1. Технология проектирования и разработки интерфейсов пользователя

226

МДК. 08.01 Проектирование и разработка интерфейсов пользователя
Тема 08.01.01 Основы
3 семестр
web-технологий.
Содержание
1. Введение. Язык разметки HTML. Синтаксис HTML
2. Гиперссылки. Использование изображений на странице. Форматирование текста и фона
3. Списки. Таблицы. Фреймы, плавающие фреймы, формы
4. Каскадные таблицы стилей (CSS). Использование стилей при создании сайта.
5. Веб-стандарты и их поддержка. Элементы и атрибуты HTML5 и структура страницы.
6. Селекторы в HTML5.Использование свойств CSS2 и CSS3.
7. Вёрстка страниц веб-сайта
8. CSS-фреймворки. Динамический CSS (на примере LESS).
9. Шаблоны CMS. Типовые решения
10. Размещение сайта на сервере и поддержка сайта
Тематика практических занятий и лабораторных работ
1. Практическая работа «Составление технического задания на разработку web-сайта.»
2. Практическая работа «Применение тегов HTML при создании web-страниц.»
3. Практическая работа «Создание формы на html-странице.»
4. Практическая работа «Форматирование web-страниц с использованием каскадных
таблиц стилей.»
5. Практическая работа «Вёрстка»
Самостоятельная учебная работа
- оформление практических работ

220
34
20
2
2
2
2
2
2
2
2
2
2
12
2
2
2

ЛР4, ЛР9

2
4
2
2
6

4 семестр
Содержание
1. Язык сценариев JavaScript. Переменные в JavaScript.
2. Управляющие конструкции в JavaScript.
3. Функции и функциональное программирование в JavaScript.
4. Объектно-ориентированное программирование в JavaScript.
5. Числа и даты в JavaScript.
6. Строки и регулярные выражения в JavaScript.
7. Массивы и коллекции в JavaScript.
8. Интернационализация в JavaScript.
9. Асинхронное программирование в JavaScript.
10. Модули в JavaScript.
11. Метапрограммирование в JavaScript.
12. Итераторы и генераторы в JavaScript.
13. Платформа Node.js
14. Основы синтаксиса TypeScript
15. Объектно-ориентированное программирование в TypeScript
16. Совместное использование TypeScript и JavaScript
Тематика практических занятий и лабораторных работ
1. Практическая работа "Построение выражений на языке JavaScript".
2. Практическая работа "Использование циклических конструкций на языке JavaScript".
3. Практическая работа "Построение функций и повторяющихся операций на языке
JavaScript".
4. Практическая работа "Разработка методов, прототипов и конструкторов на JavaScript".
5. Практическая работа "Использование строк и регулярных выражений в JavaScript".
6. Практическая работа "Создание баннера для web-страницы"
7. Практическая работа "Создание слайдера на JavaScript".
8. Практическая работа "Разработка логики валидности введенных данных".
9. Практическая работа "Использование языка сценариев JavaScript при создании webсайта"
10. Практическая работа "Подготовка и оптимизация графики на web-странице"
11. Практическая работа "Установка и настройка платформы Node.js"
12. Практическая работа "Использование платформы Node.js для построения страниц"
13. Практическая работа "Построение выражений на TypeScript".

ЛР4, ЛР9

78
36
2
2
2
2
2
2
2
2
2
2
2
2
4
2
4
2
40
2
4
4
4
4
4
4
4
4
2
2
4
4
7

14. Практическая работа "Использование ООП в TypeScript"
15. Практическая работа "Использование TypeScript и JavaScript для построения страниц"
Самостоятельная учебная работа
- оформление практических работ
5 семестр
Содержание
1. Библиотека Bootstrap: установка, настройка, основы разметки
2. Библиотека Bootstrap: формы, компоненты и помощники
3. Библиотека Jquery: установка, синтаксис, селекторы и события
4. Библиотека Jquery: анимация, цепочки, работа с HTML и CSS
5. Библиотеки React: установка, синтаксис, элементы
6. Библиотеки React: состояния, жизненный цикл, события
7. Библиотеки React: стейты
8. Библиотеки React: структуры и компоненты
9. Библиотека Vue.js: установка, синтаксис, экземпляры
10. Библиотека Vue.js: синтаксис шаблонов, классы и стили
11. Библиотека Vue.js: события, формы, компоненты
12. Библиотека Vue.js: анимация, примеси
13. Фреймворк Angular: установка
14. Фреймворк Angular: создание приложения и компонентов
15. Фреймворк Angular: сборка приложения
Тематика практических занятий и лабораторных работ
1. Практическая работа "Использование Bootstrap при создании страниц".
2. Практическая работа "Использование Jquery при создании страниц".
3. Практическая работа "Разработка страниц на React".
4. Практическая работа "Разработка страниц на Vue.js".
5. Практическая работа "Установка и настройка фреймворка Angular"
6. Практическая работа "Использование фреймворка Angular для построения страниц
сайта"
Самостоятельная учебная работа
- оформление практических работ
Дифференцированные зачет
Тема 08.01.02 Web6 семестр
дизайн
Содержание

ЛР4, ЛР9

6
4
2
2
54
30
2
2
2
2
2
2
2
2
2
2
2
2
2
2
2
22
2
4
4
4
2
4

ЛР4, ЛР9
ЛР4, ЛР9

2
2
2
80
40
8

1. WEB-дизайн. Способности необходимые web-дизайнеру.
2. Специализация в web-дизайне. Юзабилити
3. Основные этапы разработки сайта. Техническое задание.
4. Файловая структура сайта. Два типа графики на web-сайтах. Имена файлов
5. Аудит юзабилити web-сайта, тестирование и документирование
6. Организация Web-узла и создание схемы навигации
7. Построение подробной карты Web-узла
8. Дизайн шрифтов для Web-страницы
9. Программа Pencil для построения дизайна
10. Программа Figma для построения дизайна
11. Программа Adobe XD для построения дизайна
12. Программа MockFlow для построения дизайна
13. Понятие Zero-code на примере Tilda
Тематика практических занятий и лабораторных работ
1. Практическая работа "Разработка эскизов веб-приложения"
2. Практическая работа "Разработка прототипа дизайна веб-приложения"
3. Практическая работа "Разработка схемы интерфейса веб-приложения"
4. Практическая работа "Построение карты узла и карты для реконструкции сайта"
5. Практическая работа "Создание визуального интерфейса"
6. Практическая работа "Визуальные приоритеты, освобождение пространства страницы,
разработка основ интерфейса"
7. Практическая работа "Использование Pencil для построения дизайна"
8. Практическая работа "Использование Figma для построения дизайна"
9. Практическая работа "Использование Adobe XD для построения дизайна"
10. Практическая работа "Использование MockFlow для построения дизайна"
11. Практическая работа "Регистрация нового сайта в системе Tilda"
12. Практическая работа "Построение концепции сайта в системе Tilda"
13. Практическая работа "Использование стандартных компонентов Tilda"
14. Практическая работа "Построение zero-code решений"
Экзамен

2
4
4
4
4
4
4
4
2
2
2
2
2
40
4
4
4
4
4
4
4
4
4
2
2
4
4
6

3. УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ
ПРОФЕССИОНАЛЬНОГО МОДУЛЯ
«ПМ.08. Разработка дизайна веб-приложений»
3.1. Для реализации программы профессионального модуля должны быть предусмотрены
следующие специальные помещения:
Студия «Разработки дизайна веб-приложений» оснащенная в соответствии с п. 6.1.2.1.
Примерной программы по специальности:
Оснащенные базы практики, в соответствии с п 6.1.2.3 Примерной программы по специальности.
3.2. Информационное обеспечение реализации программы
Для реализации программы библиотечный фонд образовательной организации должен иметь
печатные и/или электронные образовательные и информационные ресурсы, рекомендуемые для
использования в образовательном процессе.
3.2.1. Печатные издания
1. Немцова, Т.И., Назарова, Ю.В. Практикум по информатике: учеб. пособие / Под редакцией Л.Г.
Гагариной. Ч. I и II. – М.: Форум, 2014. – 288 с.: ил.
2. Разработка дизайна веб-приложений. Учебник / Мусаева Т., Поколодина Е., Трифанов М. и др.
– Москва: Академия, 2020. – 256 с.
3.2.2. Электронные издания (электронные ресурсы)
1. Федеральный образовательный портал «Информационно-коммуникационные технологии в
образовании». [Электронный ресурс] – режим доступа: http://window.edu.ru/. Дата обращения 23.07.2021.
3.2.3. Дополнительные источники
1. Храмцов, П.Б. Основы Web-технологий: учебное пособие / П.Б. Храмцов, С.А. Брик, А.М.
Русак, А.И. Сурин – 2-е изд., испр. –М.: Интернет-Университет Информационных технологий; БИНОМ.
Лаборатория знаний, 2014. – 512с.

4. КОНТРОЛЬ И ОЦЕНКА РЕЗУЛЬТАТОВ ОСВОЕНИЯ
ПРОФЕССИОНАЛЬНОГО МОДУЛЯ
«ПМ.08. Разработка дизайна веб-приложений»
Код и
наименование
профессиональных
и общих
Критерии оценки
Методы оценки
компетенций,
формируемых в
рамках модуля
Раздел модуля 1. Технология проектирования и разработки интерфейсов пользователя
ПК 8.1.
Оценка «отлично» - разработаны эскизы
Экзамен/зачет в форме
Разрабатывать
пользовательского интерфейса с помощью
собеседования:
дизайн-концепции
профессионального инструментария; обоснован
практическое задание
веб-приложений в
выбор эскиза для дальнейшей разработки;
по разработке дизайн –
соответствии с
разработана и обоснована схема пользовательского
концепции вебкорпоративным
веб-интерфейса; во всех элементах приложения
приложения в
стилем заказчика.
учтены требования стандартов к пользовательскому
соответствии с
интерфейсу и корпоративный стиль.
запросами заказчика
Оценка «хорошо» - разработан и обоснован эскиз
Защита отчетов по
пользовательского интерфейса с помощью
практическим и
профессионального инструментария; разработана
лабораторным работам
схема пользовательского веб-интерфейса; во всех
Интерпретация резульэлементах приложения учтены требования
татов наблюдений за
стандартов к пользовательскому интерфейсу и
деятельностью обукорпоративный стиль.
чающегося в процессе
Оценка «удовлетворительно» - разработан и
практики
обоснован эскиз пользовательского интерфейса с
помощью профессионального инструментария;
разработана схема пользовательского вебинтерфейса; во всех элементах приложения учтены
требования стандартов к пользовательскому
интерфейсу и корпоративный стиль.
Раздел 2. Разработка графических изображений и мультимедиа
ПК 8.2.
Оценка «отлично» - проанализированы предметная
Экзамен/зачет в форме
Формировать
область, государственные стандарты (и/или
собеседования:
требования к
законодательство региона) и целевая аудитория; на
практическое задание
дизайну вебоснове анализа сформированы и оформлены в
по формированию
приложений на
стандартном виде ограничения на стиль и
требований к дизайну
основе анализа
содержание веб – приложения; сформированы
веб – приложения.
предметной
ограничения для мобильных устройств; требования
Защита отчетов по
области и целевой
сгруппированы и выбрано дизайнерское решение.
практическим и
аудитории.
Оценка «хорошо» - проанализированы предметная
лабораторным
область, государственные стандарты (и/или
работам.
законодательство региона) и целевая аудитория; на
Интерпретация резульоснове анализа сформированы ограничения на стиль татов наблюдений за
и содержание веб – приложения; сформированы
деятельностью обуограничения для мобильных устройств; выбрано
чающегося в процессе
дизайнерское решение.
практики
Оценка «удовлетворительно» - сформированы
ограничения на стиль и содержание веб –
приложения; сформированы ограничения для
мобильных устройств; выбрано дизайнерское
решение.

ПК 8.3.
Осуществлять
разработку дизайна
веб-приложения с
учетом
современных
тенденций в
области вебразработки.

ОК 01. Выбирать
способы решения
задач
профессиональной
деятельности,
применительно к
различным
контекстам.
ОК 02.
Осуществлять
поиск, анализ и
интерпретацию
информации,
необходимой для
выполнения задач
профессиональной
деятельности.
ОК 03.
Планировать и
реализовывать
собственное
профессиональное
и личностное
развитие.
ОК 04. Работать в
коллективе и
команде,
эффективно
взаимодействовать
с коллегами,
руководством,
клиентами.

Оценка «отлично» - разработан и реализован
отзывчивый дизайн веб – приложения с
использованием специальных графических
редакторов, применением относительных размеров,
контрольных точек и вложенных объектов; макет
корректно отображается на различных устройствах;
заданные элементы интегрированы в дизайн
оптимальным образом; разработанный дизайн
полностью соответствует современным стандартам.
Оценка «хорошо» - разработан и реализован
отзывчивый дизайн веб – приложения с
использованием специальных графических
редакторов, применением нескольких методов;
макет корректно отображается на большинстве
устройств; заданные элементы интегрированы в
общий дизайн; разработанный дизайн соответствует
современным стандартам.
Оценка «удовлетворительно» - разработан и
реализован отзывчивый дизайн веб – приложения с
использованием специальных графических
редакторов, применением нескольких методов;
большинство заданных элементов интегрировано в
дизайн; макет корректно отображается на одном
устройстве; разработанный дизайн в основном
соответствует современным стандартам.

обоснованность постановки цели, выбора и
применения методов и способов решения
профессиональных задач;
- адекватная оценка и самооценка эффективности и
качества выполнения профессиональных задач

Экзамен/зачет в форме
собеседования:
практическое задание
по разработке
графических макетов
для веб-приложений и
интеграции новых
графических
элементов.
Защита отчетов по
практическим и
лабораторным работам
Интерпретация результатов наблюдений за
деятельностью обучающегося в процессе
практики

Экспертное
наблюдение за
выполнением работ

- использование различных источников, включая
электронные ресурсы, медиаресурсы, Интернетресурсы, периодические издания по специальности
для решения профессиональных задач

- демонстрация ответственности за принятые
решения;
- обоснованность самоанализа и коррекция
результатов собственной работы

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

ОК 05.
Осуществлять
устную и
письменную
коммуникацию на
государственном
языке с учетом
особенностей
социального и
культурного
контекста.
ОК 06. Проявлять
гражданскопатриотическую
позицию,
демонстрировать
осознанное
поведение на
основе
традиционных
общечеловеческих
ценностей,
применять
стандарты
антикоррупционног
о поведения.
ОК 07.
Содействовать
сохранению
окружающей
среды,
ресурсосбережению
, эффективно
действовать в
чрезвычайных
ситуациях.
ОК 08.
Использовать
средства
физической
культуры для
сохранения и
укрепления
здоровья в процессе
профессиональной
деятельности и
поддержания
необходимого
уровня физической
подготовленности.
ОК 09.
Использовать
информационные
технологии в
профессиональной
деятельности.

- демонстрировать грамотность устной и
письменной речи, - ясность формулирования и
изложения мыслей

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

- эффективное выполнение правил ТБ во время
учебных занятий, при прохождении учебной и
производственной практик;
- демонстрация знаний и использование
ресурсосберегающих технологий в
профессиональной деятельности

- эффективность использовать средств физической
культуры для сохранения и укрепления здоровья при
выполнении профессиональной деятельности

- эффективность использования информационнокоммуникационных технологий в профессиональной
деятельности согласно формируемым умениям и
получаемому практическому опыту

ОК 10.
Пользоваться
профессиональной
документацией на
государственном и
иностранном
языках.
ОК 11.

Использовать
знания по
финансовой
грамотности,
планировать
предприниматель
скую
деятельность в
профессионально
й сфере.

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

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