Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Министерство образования и науки Самарской области

ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ САМАРСКОЙ ОБЛАСТИ

«КОЛЛЕДЖ ГУМАНИТАРНЫХ И СОЦИАЛЬНО-ПЕДАГОГИЧЕСКИХ ДИСЦИПЛИН ИМЕНИ СВЯТИТЕЛЯ АЛЕКСИЯ, МИТРОПОЛИТА МОСКОВСКОГО»

Отчет по производственной практике

ПП.04 Производственная практика (по профилю специальности)

ПМ.04 Выполнение работ по профессии 16199 «Оператор электронно-вычислительных и вычислительных машин»

09.02.03 Программирование в компьютерных системах

База практики: Колледж гуманитарных и социально-педагогических дисциплин имени Святителя Алексия Митрополита Московского

Выполнил:

Пирогов А.

Тольятти, 2020



Введение

Местом прохождения практики по профилю специальности ПП.04 Производственная практика по профессиональному модулю ПМ.04 Выполнение работ по профессии 16199 «Оператор электронно-вычислительных и вычислительных машин» является Государственное бюджетное профессиональное образовательное учреждение Самарской области «Колледж гуманитарных и социально-педагогических дисциплин имени Святителя Алексия, Митрополита Московского» (ГБПОУ СО «Гуманитарный колледж). Практика проходила в период с 30.11.2020 г. по 26.12.2020 г.

Практика по профилю специальности направлена на формирование у общих и профессиональных компетенций, приобретение практического опыта по виду профессиональной деятельности «Выполнение работ по профессии 16199 «Оператор электронно-вычислительных и вычислительных машин»:

1) Общие компетенции:

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

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

- ОК 3. Принимать решения в стандартных и нестандартных ситуациях и нести за них ответственность.

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

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

- ОК 6. Работать в коллективе и в команде, эффективно общаться с коллегами, руководством, потребителями.

- ОК 7. Брать на себя ответственность за работу членов команды (подчиненных), за результат выполнения заданий.

- ОК 8. Самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации.

- ОК 9. Ориентироваться в условиях частой смены технологий в профессиональной деятельности.

2) Профессиональные компетенции:

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

- ПК 4.2 Выполнять ввод цифровой и аналоговой информации в персональный компьютер с различных носителей.

- ПК 4.3 Формировать медиатеки для структурированного хранения и каталогизации цифровой информации.

- ПК 4.4 Управлять размещением цифровой информации на дисках персонального компьютера, а также дисковых хранилищах локальной и глобальной компьютерной сети.

3) Практический опыт:

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

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

- формирования медиатеки для структурированного хранения и каталогизации цифровой информации;

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

Темой практики по профилю специальности ПП.04 Производственная практика по профессиональному модулю ПМ.04 Выполнение работ по профессии 16199 «Оператор электронно-вычислительных и вычислительных машин» является «Проектирование и реализация веб-приложения электронного учебника по дисциплине ОП.02 «Архитектура компьютерных систем».

Цель практики: формирование у общих и профессиональных компетенций, приобретение практического опыта при выполнении проектирования и реализации веб-приложения электронного учебника по дисциплине ОП.02 «Архитектура компьютерных систем».

Задачи практики:

1) Разработать техническое задание на разработку web-сайта;

2) Выполнить техническое проектирование web-сайта;

3) Реализовать web-сайт и описать результаты реализации в рабочем проекте.



1. Техническое задание на разработку web-сайта

1.1 Назначение и цели создания Web-сайта

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

Цель предоставить ученикам возможность получать обучающий материал на электронных устройствах. Целевой аудиторией web-сайта являются обучающиеся юноши и девушки от 16 до 26 лет.

1.2 Функции Web-сайта

1. Реализация интерфейса электронного учебника, который содержит блоки:

1.1 Контентная зона: шапка сайта которая содержит гиперссылки; блок с лекциями, практическими работами, списком источников; блок с названием лекции, названием практической работы; блок с заполненными лекциями, блок с заполненными практическими работами.

2. Хранение информации о лекциях и практических работах в электронные учебники:

2.1 Вся информация хранится в виде базы данных на сервере web-приложения.

1.3 Требования к Web-сайту

Web-сайт ОП.02 «Архитектура компьютерных систем» является адаптивным приложением, которое должно открываться на телефоне, планшете и компьютере, без изменения функций сайта. Разработка ведется как на стороне сервера так и на стороне клиента. Выполнение верстки, реализация дизайнерской концепции выполнена с помощь HTML5 и CSS, а так же с помощь Bootsrap5.

1.4 Состав и содержание работ по созданию Web-сайта

График выполнения работ по созданию Web-сайта ОП.02 «Архитектура компьютерных систем» представлен в таблице 1.

Таблица 1 - График выполнения работ по созданию Web-сайта

Срок выполнения	Характеристика работ
30.11.2020 - 5.12.2020	Обследование предметной области, определение функций решаемой задачи Выявление процессов и данных, использующихся при решении задачи Сбор и ознакомление с документами, содержащими информацию для решения задачи
07.12.2020 - 12.12.2020	Выбор средств и методов реализации Web-сайта. Определение технологии решения задачи и источников загрузки БД. Составление функциональной схемы решения задачи. Разработка интерфейса Web-сайта. Реализация интерфейсных визуальных элементов и эффектов на главной и других страницах Web-сайта
14.12.2020 - 26.12.2020	Реализация Web-сайта, составление спецификации и инструкций пользователю и программисту. Опытная эксплуатация Web-сайта

1.5 Требования к составу и содержанию работ по подготовке Web-сайта к вводу в эксплуатацию

Для установки web-приложения необходимо наличие интернета. Программное обеспечение, которое необходимо установить.

1. Bootstrap5 -- свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

2. JQuery -- JavaScript библиотека с широкими возможностями. Проста в понимании и удобна в использовании. Все операции JQuery выполняются из кода JavaScript. Библиотека jQuery управляет поведением html-элементов и меняет структуру веб-страницы. Изменения касаются отображения страницы для пользователя -- файлы HTML и CSS не меняются.

1.6 Требования к документированию

Этапы проектирования и реализации Web-сайта ОП.02 «Архитектура компьютерных систем» должны быть отражены в разделах:

- Технический проект Web-сайта;

- Рабочий проект Web-сайта.

Таблица 2 - Требования к документированию этапов проектирования и реализации Web-сайта ОП.02 «Архитектура компьютерных систем»

Раздел	Содержание
Технический проект Web-сайта	Обоснование средств и методов реализации Web-сайта Описание логической структуры Web-сайта Описание интерфейса Web-сайта Описание структуры страниц Web-сайта Описание технологии решения задачи Описание алгоритмов решения задачи
Рабочий проект Web-сайта	Спецификация Web-сайта Физическая структура Web-сайта Инструкция программисту (описание технологии установки и администрирования Web-сайта) Инструкция пользователю (описание технологии работы с Web-сайтом)

1.7 Источники разработки

Источниками разработки является официальная документация и видео уроки.

1. html и css. Разработка и дизайн веб-сайтов [электронный ресурс] // Книга -- режим доступа: https://litportal.ru/avtory/dzhon-dakett/kniga-html-i-css-razrabotka-i-dizayn-veb-saytov-803468.html [дата обращения: 15.12.2020]

2. bootstrap [электронный ресурс] // документация - режим доступа: https://www.npmjs.com/package/bootstrap [дата обращения: 17.12.2020]

3. javascript для детей [электронная книга] // книга - режим доступа: https://www.labirint.ru/books/551756/ [дата обращения: 18.12.2020].

4. express.js [электронный ресурс] // фреймворк веб-приложений node.js -- режим доступа: https://expressjs.com/ru/api.html [дата обращения: 19.12.2020]



2. Технический проект web-сайта

2.1 Обоснование средств и методов реализации Web-сайта

1. Express -- фреймворк web-приложений для Node.js, реализованный как свободное и открытое программное обеспечение под лицензией MIT.

2. Visual Studio Code -- редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.

3. jQuery -- Изначально JQuery библиотека, анонсированная Джоном Резигом в 2006 г., несмотря на возраст до сих пор популярна. Обладает отличными кроссплатформенными возможностями. JQuery в значительной мере снимает с разработчика обязанность адаптировать код под разные браузеры. Код с использованием JQuery становится компактнее. Одна функция JQuery может стать аналогом нескольких строк кода. Это повышает скорость его написания и делает код проще, удобнее. Популярность JQuery по данным сервиса Google Trends JQuery набирал популярность с 2007 г. до конца 2012 г. После этого востребованность JavaScript фреймворка постепенно снижается, этот процесс продолжается и в 2020 г.

4. HTML -- стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства

5. CSS -- формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.



2.2 Описание логической структуры Web-сайта

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

Логическая структура Web-сайта ОП.02 «Архитектура компьютерных систем» состоит из 6 разделов, реализована с помощью программного обеспечения FreeMind и представлена на рисунке 1.

Рисунок 1 - Логическая структура Web-сайта ОП.02 «Архитектура компьютерных систем»

2.3 Описание интерфейса Web-сайта

Интерфейс Web-сайта ОП.02 «Архитектура компьютерных систем» реализован с помощью:

1) CSS -- формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

2) Figma -- онлайн сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реально времени.

3) Adobe Photoshop -- ногофункциональный графический редактор, разрабатываемый и распространяемый компанией Adobe Systems. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты.

Главная страница Web-сайта ОП.02 «Архитектура компьютерных систем» имеет следующую структуру, изображенную на рисунке 2.

Рисунок 2 - Структура главной страницы Web-сайта ОП.02 «Архитектура компьютерных систем»

Требования к размещению и реализации основных структурных элементов Web-сайта ОП.02 «Архитектура компьютерных систем» представлены в таблице 3.

Таблица 3 - Требования к реализации главной страницы сайта Web-сайта ОП.02 «Архитектура компьютерных систем»

№ п/п	Структурный элемент главной страницы	Требования к реализации и размещению
1	Шапка (header) страницы	Шапка (header) резмещена сверху экрана и растянута по всей ширине. Реализована с помощью HTML, CSS, Bootstrap5.
2	Текст на главной странице	Текст размещен по всей странице и выровнен по середине. Реализован с помощью HTML, CSS
3	Кнопки находящиеся в шапке сайта: «Гуманитарный колледж, Оглавление, Рекомендации, Словарь, Об учебнике, Контроль.»	Кнопки размещены в шапке (header), и имеют отступы между собой. Реализованы с помощью HTML, CSS, Bootstrap5.



Цветовая схема Web-сайта ОП.02 «Архитектура компьютерных систем» реализована с использованием цветов, которые описаны в таблице 4.

Таблица 4 - Описание цветовой схемы Web-сайта ОП.02 «Архитектура компьютерных систем»

№ п/п	Структурный элемент главной страницы	Цвет (код и название цвета)	Обоснование выбора цвета
1	Фон	#fff Белый	Белый цвет выбран потому что, он символизирует чистоту, незапятнанность, невинность, добродетель, радость.
2	Шапка (header)	#00612e Зеленый	Зеленый цвет выбран потому что, акцент при создании сайта делался на основной сайт колледж. Шапка сайта колледжа имеет зеленый цвет.
3	Текст на главной странице	#000 Черный	Черный цвет текста, выбран потому что на белом фоне он хорошо смотрится.
4	Текст кнопок внутри шапки (header)	#fff Белый	Белый цвет выбран потому что, он символизирует чистоту, незапятнанность, невинность, добродетель, радость.

2.4 Описание структуры страниц Web-сайта

При реализации Web-сайта ОП.02 «Архитектура компьютерных систем» используются следующие макеты страниц:

1) информационная web-страница, отображающая учебный материал по разделам и темам электронного учебника ОП.02 «Архитектура компьютерных систем».

2) Главная страница сайта.

3) Раздел с оглавлением, в котором находятся лекции и практические работы.

4) Раздел рекомендаций в котором каждый пользователь электронного учебника может получить рекомендацию от учителей.

5) Раздел словарь, в котором пользователя может воспользоваться словарем для поиска неизвестных ему слов или определений.

6) web-страница итогового тестирования.

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

1. Содержание.

2. Лекции.

3. Практические работы.

4. Перечень вариантов контрольных работ.

5. Перечень примерных вопросов к зачету.

6. Список литературы.

Рисунок 3 - Структура информационной web-страницы электронного учебника

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



Рисунок 4 - Структура web-страницы тестирования электронного учебника



3. Рабочий проект web-сайта

3.1 Спецификация Web-сайта

Программная реализация Web-сайта ОП.02 «Архитектура компьютерных систем» состоит из 11 файлов, списочный состав и назначение которых представлено в таблице 5

Таблица 5 - Спецификация Web-сайта ОП.02 «Архитектура компьютерных систем»

№ п/п	Путь и имя файла	Назначение файла
1	C:\Users\admin\Desktop\Электронный учебник	Корневая папка проекта
2	C:\Users\admin\Desktop\Электронный учебник\index.html	Основной текстовый файл
3	C:\Users\admin\Desktop\Электронный учебник\lek1.html	Текстовый файл файл в котором находится первая лекция
4	C:\Users\admin\Desktop\Электронный учебник\lek2.html	Текстовый файл файл в котором находится вторая лекция
5	C:\Users\admin\Desktop\Электронный учебник\lek3.html	Текстовый файл файл в котором находится третья лекция
6	C:\Users\admin\Desktop\Электронный учебник\lek4.html	Текстовый файл файл в котором находится четвертая лекция
7	C:\Users\admin\Desktop\Электронный учебник\oglav.html	Текстовый файл в котором находится лекции, практические работы, варианты контрольных работ.
8	C:\Users\admin\Desktop\Электронный учебник\prac1.html	Текстовый файл в котором находятся практические работы
9	C:\Users\admin\Desktop\Электронный учебник\contr.html	Текстовый файл в котором находятся варианты контрольных работ
10	C:\Users\admin\Desktop\Электронный учебник\img	Папка в которой хранится изображения, которые использовались в лекциях
11	C:\Users\admin\Desktop\Электронный учебник\css	В этой папке лежат основные файлы стилей CSS



Общий объем Web-сайта ОП.02 «Архитектура компьютерных систем» составляет 1,31 Мбайт.

3.2 Физическая структура Web-сайта

Физическая структура Web-сайта ОП.02 «Архитектура компьютерных систем» отображает алгоритм размещения физических файлов по поддиректориям папки, в которой должен быть опубликован сайт. Физическая структура Web-сайта ОП.02 «Архитектура компьютерных систем» построена с помощью программного обеспечения FreeMind и представлена на рисунке 5.

Рисунок 5 - Физическая структура Web-сайта ОП.02 «Архитектура компьютерных систем»

3.3 Инструкция программисту

Чтобы открыть проект необходимо:

1. Скачать проект с git.

2. Открыть папку проекта, затем открыть главный файл «index.html»

3.4 Инструкция пользователю

1. Чтобы открыть сайт нужно открыть главный файл «index.html»

2. Чтобы перемещаться по сайту сверху в шапке есть гиперссылки.

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

4. Чтобы открыть любую другую гиперссылку нужно так нажать по ней правой кнопкой мышки.



Заключение

web сайт программный оформление

В период прохождения практики по профилю специальности ПП.04 Производственная практика по профессиональному модулю ПМ.04 Выполнение работ по профессии 16199 «Оператор электронно-вычислительных и вычислительных машин» с 30.11.201920 г. по 26.12.2020 г. были выполнены следующие виды работ:

1) Постановка общей задачи. Формулировка основных задач, которые должны быть решены сайтом.

2) Подготовка контента сайта: текста сайта, таблицы и рисунки сайта, подлежащие размещению на сайте.

3) Разработка технического задания на создания сайта.

4) Разработка программного кода сайта и внешнего оформления сайта, т.e. веб-дизайна. В том числе:

- Разработка оптимальной блок-схемы.

- Выбор оптимального типа гиперссылок сайта (кнопок системы управления).

- Выбор основной палитры цветов сайта.

- Выбор типа и размера основных шрифтов сайта.

5) Наполнение сайта контентом.

6) Подключение базы данных к Web-сайту.

7) Реализация функции отправки сообщений пользователями.

8) Добавление блока в котором показываются онлайн пользователи.

9) Различные виды редизайна сайта.

Сформирован отчет по практике, который отражает этапы проектирования и реализации Web-сайта ОП.02 «Архитектура компьютерных систем» содержащий 20 страниц, 5 рисунков, 5 таблиц.



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

1. ГОСТ Р 56713-2015 Системная и программная инженерия. Содержание информационных продуктов процесса жизненного цикла систем и программного обеспечения (документация).

2. ГОСТ Р 57100-2016 Системная и программная инженерия. Описание архитектуры.

3. ГОСТ Р 57193-2016 Системная и программная инженерия. Процессы жизненного цикла систем.

4. ГОСТ Р 56920-2016 Системная и программная инженерия. Тестирование программного обеспечения. Часть 1. Понятия и определения.

5. ГОСТ Р 56921-2016 Системная и программная инженерия. Тестирование программного обеспечения. Часть 2. Процессы тестирования.

6. ГОСТ Р 56922-2016 Системная и программная инженерия. Тестирование программного обеспечения. Часть 3. Документация тестирования.

7. ГОСТ Р ИСО/МЭК 12207-2010 Информационная технология. Системная и программная инженерия. Процессы жизненного цикла программных средств.

8. Лубашева, Т.В. Основы алгоритмизации и программирования: учебное пособие / Т.В. Лубашева, Б.А. Железко. - Минск: РИПО, 2016. - 378 с.: ил. - Библиогр. в кн. - ISBN 978-985-503-625-9 ; [Электронный ресурс]. - [Дата обращения: 12.12.2018]

9. Мир ПК [Электронный ресурс] // Открытые системы: журнал для пользователей персональных компьютеров [Дата обращения: 12.12.2018]

10. Дунаев В., Самоучитель JavaScript. -- СПб.: Питер, 2005.- 395 с. [Дата обращения: 17.12.2020]

11. JavaScript для детей [Электронная книга] // Книга - [Дата обращения: 18.12.2020].

Размещено на Allbest.ru

...