Индивидуальное задание по производственной практике по профессиональному модулю ПМ.05 Основы верстки сайтов 1…

Индивидуальное задание по производственной практике

по профессиональному модулю ПМ.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.

Благотворительный фонд

Миссия, проекты, форма пожертвования.