по профессиональному модулю ПМ.05 Основы верстки сайтов
1.
Ознакомительная лекция, включая инструктаж по соблюдению правил противопожарной безопасности, правил охраны труда, техники безопасности, санитарно-эпидемиологических правил и гигиенических нормативов.
Пройти инструктивное совещание с руководителем практики от Образовательной организации, на котором ознакомиться с кругом обязанностей по определенным видам работ, связанным с будущей профессиональной деятельностью, а также уточнить правила в отношении субординации, внешнего вида, внутреннего трудового распорядка и режима конфиденциальности.
Пройти инструктаж по соблюдению правил противопожарной безопасности, правил охраны труда, техники безопасности, санитарно-эпидемиологических правил и гигиенических нормативов (в случае медицинских противопоказаний к выполнению определенных видов деятельности – принести подтверждающую справку из медицинского учреждения).
2.
Изучение дополнительной литературы и методических материалов.
В целях развития профессиональных навыков в разработке и дизайне веб-приложений необходимо ознакомиться с дополнительной литературой и методическими материалами по теме «Веб-приложения»:
Основная литература:
Вагин, Д. В. Современные технологии разработки веб-приложений : учебное пособие / Д. В. Вагин, Р. В. Петров. — Новосибирск : Новосибирский государственный технический университет, 2019. — 52 c. — ISBN 978-5-7782-3939-5. — Текст : электронный // Цифровой образовательный ресурс IPR SMART : [сайт]. — URL: [#alias|www.iprbookshop.ru/98738.html|https://www.iprbookshop.ru/98738.html]
Интернет-ресурсы:
Позевалкин В.В. Разработка веб-приложений на основе клиентских каркасов и библиотек : учебное пособие / Позевалкин В.В., Панова Н.Ф.. — Оренбург : Оренбургский государственный университет, ЭБС АСВ, 2025. — 191 c. — ISBN 978-5-7410-3380-7. — Текст : электронный // Цифровой образовательный ресурс IPR SMART : [сайт]. — URL: [#alias|www.iprbookshop.ru/153228.html|https://www.iprbookshop.ru/153228.html]
3.
Формирование теоретико-методологической базы экспериментально-практической работы
Провести аналитический обзор профильной технической документации и учебно-методических источников, регламентирующих:
— структуру HTML-документа и назначение его основных элементов (, ,
, ), принципы семантической разметки, использование тегов блочной и строчной структуры (header, main, footer, section, article, nav, div, span) и формирование логической иерархии контента;— основы CSS, включая понятие каскада, наследования и специфичности, применение селекторов и свойств для оформления текста, цвета, фона, границ, отступов и выравнивания элементов;
— блочную модель и особенности работы свойств margin, padding, border, display, box-sizing, обеспечивающих корректное расположение элементов;
— методы построения макета страницы с использованием Flexbox и CSS Grid, а также базовые принципы адаптивной и отзывчивой вёрстки (медиазапросы, относительные единицы измерения, масштабирование изображений);
— работу с графическими ресурсами и формами — подключение изображений, использование атрибутов alt, srcset, оформление таблиц и интерактивных форм (input, label, button);
— организацию файловой структуры проекта и подключение внешних ресурсов (таблицы стилей, шрифты, изображения), а также принципы валидации HTML и CSS в соответствии со стандартами W3C.
Сформировать персональный справочный материал (конспект, чек-листы, и др.), содержащий ключевые правила, синтаксические конструкции и практические примеры, необходимые для оперативного обращения в процессе вёрстки.
4.
Экспериментально-практическая работа. Приобретение необходимых умений и первоначального опыта практической работы по специальности в рамках освоения вида деятельности ВД 5. Основы верстки сайтов.
Получить практический опыт в:
— управлении процессом разработки приложений с использованием инструментальных средств;
— обеспечении сбора данных для анализа использования и функционирования информационной системы;
— программировании в соответствии с требованиями технического задания;
— использовании критериев оценки качества и надежности функционирования информационной системы;
— применении методики тестирования разрабатываемых приложений;
— определении состава оборудования и программных средств разработки информационной системы;
— разработке документации по эксплуатации информационной системы;
— проведении оценки качества и экономической эффективности информационной системы в рамках своей компетенции;
— модификации отдельных модулей информационной системы.
С целью получения практического опыта работы с веб-приложениями на проектном этапе обучающемуся предлагается выполнить следующие практические задания:
— в рамках производственной практики студенту предлагается выполнить проект по созданию многостраничного веб-сайта в выбранной предметной области, отражающей реальные сценарии применения веб-технологий (например, сайт кофейни, театра, туристического агентства, онлайн-школы и т.д.). Целью работы является отработка практических навыков профессиональной вёрстки с использованием HTML5 и CSS3, освоение принципов адаптивного макетирования, семантической структуры и единых стилевых решений для нескольких связанных страниц веб-приложения;
— разрабатывается три взаимосвязанные страницы (главную, контентную и контактную), реализует навигационное меню, формирует визуальную сетку с применением Flexbox или Grid, оформляет элементы интерфейса средствами каскадных таблиц стилей, обеспечивает корректное отображение на различных устройствах и проводит проверку валидности кода. Итоговый результат должен представлять собой структурированный, адаптивный и визуально согласованный прототип сайта, соответствующий требованиям современного уровня фронтенд-разработки.
5.
Обработка и систематизация полученного фактического материала.
С целью подготовки к сдаче экзамена по модулю ПМ.05 Основы верстки сайтов осуществить комплексный анализ результатов выполненных видов работ, оформить презентационные материалы, разработать свои предложения и рекомендации на основе сравнения полученных в процессе обучения теоретических знаний с навыками, полученными в период прохождения практики.
6.
Оформление отчетных документов о прохождении учебной практики и экспертная оценка результатов ее прохождения.
Оформить отчет по практике в формате презентации PowerPoint, содержащий базовую и информационно-вспомогательную информацию, согласно Приложению 1.
Оформить справку, заверенную подписью и печатью (при наличии) ответственного лица от Профильной организации, содержащую сведения о прохождении практики
Перечень предметных областей
№
Предметная область
Суть учебного кейса (о чём сайт)
1.
Онлайн-школа программирования
Главная с курсами, карточка курса, форма записи.
2.
Кофейня или пекарня
Меню, карточки десертов, контакты и карта.
3.
Туристическое агентство
Главная с баннером, список туров, страница тура.
4.
Интернет-магазин одежды
Каталог товаров, карточка товара, доставка.
5.
Фото-портфолио
Галерея, страница проекта, контакты фотографа.
6.
Театр и репертуар
Афиша, страница спектакля, билеты/контакты.
7.
Книжный магазин
или напишите нам прямо сейчас
Каталог книг, карточка книги, форма заказа.
8.
Фитнес-клуб
Услуги, расписание, форма записи на тренировку.
9.
Учебный центр
Программы обучения, карточка направления, контакты.
10.
Музыкальная студия
Услуги записи, примеры работ, контакты.
11.
Салон красоты
Услуги, портфолио мастеров, онлайн-запись.
12.
Библиотека
Каталог книг, страница книги, форма заявки.
13.
Городской музей
Главная с выставками, карточка экспозиции, карта.
14.
Кинотеатр
Афиша, страница фильма, бронирование билетов.
15.
Ресторан
Меню, карточка блюда, бронирование столика.
16.
Спортивный магазин
Каталог товаров, карточка, акции и скидки.
17.
Стартап или IT-компания
Главная с продуктами, страница продукта, обратная связь.
18.
Турнир по киберспорту
Главная, расписание матчей, регистрация участников.
19.
Ветеринарная клиника
Услуги, врачи, форма записи.
20.
Онлайн-портфолио дизайнера
Главная, проекты, контакты.
21.
Цветочный магазин
Каталог букетов, карточка, заказ.
22.
Автошкола
Главная, программы обучения, форма записи.
23.
Сайт фотографа-свадебщика
Галерея, отзывы, контакты.
24.
Курсы иностранных языков
Главная, карточка курса, контакты.
25.
Студия веб-дизайна
Главная, проекты, заявка на разработку.
26.
Блог-портал о технологиях
Главная с анонсами статей, страница статьи.
27.
Коворкинг
Описание помещений, тарифы, бронирование.
28.
Онлайн-журнал о моде
Главная, статья, подписка на рассылку.
29.
Агентство недвижимости
Каталог объектов, карточка объекта, контакты.
30.
Благотворительный фонд
Миссия, проекты, форма пожертвования.
или напишите нам прямо сейчас
