Файл: Отчет о прохождении учебной и производственной практики по модулям пм02, пм04 в гбпоу "Тверской колледж им. А. Н. Коняева".docx

Министерство промышленности и торговли Тверской области

ГБПОУ «Тверской колледж им. А.Н.Коняева»

ОТЧЕТ О ПРОХОЖДЕНИИ УЧЕБНОЙ И ПРОИЗВОДСТВЕННОЙ ПРАКТИКИ ПО МОДУЛЯМ ПМ02, ПМ04

в ГБПОУ "Тверской колледж им. А.Н. Коняева"
с 27.10.22 по 26.01.23
студента, группы 3ИС1, специальности 09.02.07

«Информационные системы и программирование»
Николаев Дмитрий Юрьевич

(ф. и. о.)

Оценка руководителя практики от колледжа:
УП ПМ02

ПП ПМ02

УП ПМ04

ПП ПМ04
Тверь

2023

«Согласованно» «Утверждаю»

Председатель ЦМК Зам. директора по УПР

/Петрушенко Л.Л../ /Каплунов М.А./

«__»______ 202_ «__»______ 202_

Аттестационный лист

Характеристика профессиональной деятельности студента во время учебной и производственной практики

1.ФИО студента Николаева Дмитрия Брьевича Группа 3ИС1

Специальность 09.02.07 «Информационные системы и программирование»
2. Место проведения практики (организация), наименование, юридический адрес

ГБПОУ "Тверской колледж им. А.Н. Коняева", Российская Федерация, наб. Реки Лазури, 1, корп. 1, Тверь.
3. Время проведения практики с 27.10.22 – 26.01.23
4. Виды и объем работ, выполненные студентом во время практики: дневник и отчет по практике
5. Качество выполнения работ в соответствии с технологией и (или) требованиями организации, в которой проходила практика.
Аттестация по итогам производственной практики проводится с учетом (или на основании) результатов, подтвержденных документами соответствующих организаций.

Виды и объем работ, выполненных обучающимся во время практики	Качество выполнения работ в соответствии с технологией и (или) требованиями организации, в которой проходила практика
	Качество работ высокое	Качество работ среднее	Качество работ низкое
Организационная часть: инструктаж по технике безопасности
Ознакомление со структурой и деятельностью предприятия (организации) места практики
Сбор материала на предприятии по ПМ 02 «Осуществление интеграции программных модулей».
Сбор материала на предприятии по ПМ 04 «Сопровождение и обслуживание программного обеспечения компьютерных систем».
Выполнение работ на предприятии по ПМ 02 «Осуществление интеграции программных модулей». Выполнение индивидуального задания по учебной практики
Выполнение работ на предприятии по ПМ 02 «Осуществление интеграции программных модулей». Выполнение индивидуального задания по производственной практике
Выполнение работ на предприятии по ПМ 04 «Сопровождение и обслуживание программного обеспечения компьютерных систем». Выполнение индивидуального задания по учебной практике
Выполнение работ на предприятии по ПМ 04 «Сопровождение и обслуживание программного обеспечения компьютерных систем». Выполнение индивидуального задания по производственной практике

Место печати Оценка _________ _______ / ____________________________/

Роспись ФИО руководителя практики,

ответственного лица организации

Дата « » 202__ г.

Индивидуальное задание

Разработка страницы «Избранное» для сайта «Electronics»

Основной концепт продукта заключается в:

Хранение данных о продаваемых товарах
Хранение данных о характеристике товара
Хранение данных о цене товаров
Возможность сохранения товара в корзину
Возможность сохранения товара в избранное
Проверка статуса заказа
Помощь в выборе подходящих товаров
Возможность сравнения товаров

Информация о товарах

Каждый товар имеет свои характеристики. В них указано следующее:

Название товара
Фото товара
Способы оплаты товара
Технические характеристики товара
Цена товара
Размер скидки и старая цена товара

Информация о магазине

Состоит из:

Названия магазина
Номера телефона магазина
Информация о бонусной программе
Информация о сервисных центрах
Адрес магазина
Социальные сети магазина

Создания страницы «Сравнение» для сайта «Electronics» для удобства пользователей и подбора подходящего товара.

Что включает в себя:

Реализация дизайнерского макета
Создание функциональной части сайта
Тестирование страницы сайта
Внедрение страницы в общую структуру сайта

Реализация

Страницы сайта должны быть написаны на HTML5
Для настройки стилей страниц используется CSS
Весь макет сайта разрабатывается в графическом редакторе для проектирования и дизайна интерфейсов – Figma.
Логическая часть сайта должна быть написана на языке JavaScript

Дневник практики

Дата занятий	Краткое содержание работы	Оценка	Роспись руководителя практики
31.10.22- 04.11.22	Ознакомление c HTML и Visual Studio Code. Просмотр краткого курса по HTML и создание своего первого сайта.
04.11.22- 06.11.22	Ознакомление с информацией о домене и хостинге.
08.11.22- 09.11.22	Ознакомление с принципом работы браузера.
09.11.22- 10.1122	Семантические элементы в HTML. Ознакомление с GIT и настройка GIT в VS Cod’е
12.11.22- 15.11.22	Формы и доступность в HTML. Разработка HTML структуры. Семантика в верстке сайта.
16.11.22- 19.11.22	Разработка CSS структуры. Изучение, применение на практике CSS в верстке.
21.11.22- 23.11.22	Позиционирование, отображение, блочная модель, сетка в CSS
24.11.22- 26.11.22	Изучение медиа-запросов. Разбор методологии БЭМ и применение в коде.
27.11.22- 05.12.22	Практическое задание. Создание одностраничного сайта «Electronics», его адаптивность. Создание слайдера для сайтов, интерактивных модулей страницы. Добавление на сайт переключателей вкладок
05.12.22- 06.12.22	Ознакомление с языком программирования JavaScript.
07.12.22- 11.12.22	Прохождение курса по JavaScript.
11.12.22- 13.12.22	Исправление ошибок при создании сайта «Electronics»
14.12.22- 21.12.22	Практическое задание с использованием JavaScript.
21.12.22- 26.12.22	Практическая работа с запросами и выводом пользователей на сайт «Electronics»
26.12.22- 31.12.22	Практическая работа с localStorage, создание корзины и вкладки "Избранное"
9.01.22- 13.01.22	Начало проектирования страницы сайта "Electronics"
13.01.22- 16.01.22	Добавление Адаптивной верстки на страницу сайта "Electronics"
16.01.22- 20.01.22	Подключение js для функционала сайта
20.01.22- 21.01.22	Тестирование адаптивности сайта, функциональной части сайта. Исправление багов и недочетов.
22.01.22- 25.01.22	Развертывание сервера и настройка. Загрузка сайта на сервер, тестирование сайта на сервере.

Содержание

Аттестационный лист 2

Индивидуальное задание 3

Дневник практики 4

Содержание 5

О компании 6

Основная часть 7

УП ПМ 02 «Осуществление интеграции программных модулей» 7

ПП ПМ 02 «Осуществление интеграции программных модулей» 13

УП ПМ 04 «Сопровождение и обслуживание программного обеспечения компьютерных систем» 16

ПП ПМ 04 «Сопровождение и обслуживание программного обеспечения компьютерных систем» 17

Список используемых источников 20

Приложения 20

О компании

Сроки прохождения практики: 03.11.2022 - 25.01.2023

Предприятие: Тверской колледж им. А. Н. Коняева

Все задачи ставит ИП Макеев. Он же предоставляет оборудование и программное обеспечение: сервер на базе Microsoft Server, база данных PostgreSQL, командный доступ для Figma

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

Проектирование веб-сервера;
Разработка ПО для решения прикладных задач
Применение ООП в анализе и проектировании ПО
Обеспечение безопасного хранения и передачи информации в локальной сети;
Создание веб сайтов
Проектирование и разработка БД
Удаленное администрирование и восстановление работоспособности сетевой инфраструктуры;
Поддержка пользователей сети, настройка аппаратного и программного обеспечения сетевой инфраструктуры.

Основная часть

УП ПМ 02 «Осуществление интеграции программных модулей»

Разработка интерфейса пользователя

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

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

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

Программное обеспечение становится более популярным, если его пользовательский интерфейс:

привлекательный
Прост в использовании
Отзывчивый в короткие сроки
Ясно, чтобы понять
Последовательный на всех интерфейсных экранах

Frontend-разработка — это разработка пользовательского интерфейса и функций, которые работают на клиентской стороне веб-сайта или приложения. Это всё, что видит пользователь, открывая веб-страницу, и с чем он взаимодействует.

Процесс создания сайта состоит из следующих шагов:

Определение начальных требований.
Верстка страниц на HTML.
Верстка страниц на CSS.
Разработка логики пользовательского интерфейса (обычно на языке JavaScript).
Изучение требований заказчика и конечными пользователями, получение обратной связи о необходимых изменениях и дополнениях.
Переработка и улучшение сайта: с учетом полученных замечаний и предложений, после этого шаги 2, 3 и 4 могут повторяться.

В своем проекте я создавал интерфейс при помощи следующих языков:

HTML-для создания разметки страницы
CSS-для настройки стилей страницы
JavaScript-для настройки логики страницы и взаимодействия с пользователем

В своем проект я использовал все эти 3 языка для написания сайта, на скринах 1-3 можно видеть части кода, написанные на HTML, благодаря которому я сделал «скелет» страницы.

Рисунок 1 Начало HTML Файла, тег HEAD

Рисунок 2 Header в HTML

Рисунок 3 Часть кода элемента Accordion
Благодаря CSS удалось осуществить адаптивную верстку сайта, а также привлекательный внешний вид интерфейса сайта. На рисунках 4-5 можно увидеть некоторые стили, написанные в CSS.

Рисунок 4 Настройка стилей поля поиска CSS

Рисунок 5 настройка стилей Checkbox CSS

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

Современные сайты конкурируют между собой, борясь за внимание и расположение людей. При этом пользователи все более критично относятся к тому, насколько удобно взаимодействовать с тем или иным ресурсом. Чем проще и комфортнее на сайте — тем больше привлекаемая им аудитория.

Цель адаптивной верстки — добиться того, чтобы сайт оставался удобным и обеспечивал конверсию при загрузке на разных устройствах.

Я использовал следующие контрольные точки адаптива:

1200px
1000px
900px
480px
360px

Благодаря адаптивной верстке удалось добиться нормального отображения сайта на различных устройствах и экранах с разным разрешением и соотношением сторон.

На рисунках 6-8 из приложения можем увидеть, как работает адаптив на различных устройствах.
Так же на сайте были реализованы различные анимации с использованием JavaScript. На этом языке были написаны функции, например, функция для аккордеона приведена ниже:

Таким образом благодаря этой функции пользователь может открывать и закрывать нужные и ненужные характеристики, что добавляет удобства пользования сайтом. А анимации добавляют визуальный эффект плавного открывания. На рисунке 11 из приложения можно увидеть, как выглядит аккордеон до нажатия на одну из его вкладок. На рисунке 12 из приложения мы видим анимацию закрытия вкладки аккордеона. На рисунке 13 видно, как выглядит закрытая вкладка.

Ниже приведен отрывок из кода содержащий функцию открытия вкладок «табов» на сайте:

let navItem = document.querySelectorAll('.tabs__header-item');

let contentItem = document.querySelectorAll('.tabs__body-content');

let contTab = document.querySelectorAll('.tab-2');

let navTab = document.querySelectorAll('.tab');

function open(){

navItem.forEach(function(elem){

elem.classList.remove('active');

})

contentItem.forEach(function(elem){

elem.classList.remove('active');

})

navTab.forEach(function(elem){

elem.classList.add('active');

})

contTab.forEach(function(elem){

elem.classList.add('active');

})

}
navItem.forEach(function(elem){

elem.addEventListener('click',activeTab);

})

function activeTab(){

navItem.forEach(function(elem){

elem.classList.remove('active');

})

this.classList.add('active');

let tabName = this.getAttribute('data-tab');

// console.log(tabName);

activeTabContent(tabName);

}

function activeTabContent(tabName){

contentItem.forEach(function(item){

if(item.classList.contains(tabName)){

item.classList.add('active');

}else{

item.classList.remove('active');

}

})

}

Эта функция создает возможность пользователю создавать сразу несколько сравнений товаров в различных категориях, будь то это наушники, смартфоны, или смарт часы, это неважно, все будет на своих местах. На рисунке 9-10 из приложения можем увидеть, как работают табы, и их анимацию.