отчет. Отчет по УП05 Котова. Отчет по учебной практике пм. 05 Проектирование и разработка информационных систем Создание сайтапортфолио на языке гипертекстовой разметки html и применением css

• Название: Отчет по учебной практике пм. 05 Проектирование и разработка информационных систем Создание сайтапортфолио на языке гипертекстовой разметки html и применением css
• Анкор: отчет
• Дата: 06.07.2022
• Размер: 1.22 Mb.
• Имя файла: Отчет по УП05 Котова.docx
• Тип: Отчет; #625645

Министерство образования, науки и молодежной политики

Нижегородской области

Государственное бюджетное профессиональное образовательное учреждение

"Чкаловский техникум транспорта и информационных технологий"
09.02.07 Информационные системы и программирование


ОТЧЕТ ПО УЧЕБНОЙ ПРАКТИКЕ

ПМ. 05 Проектирование и разработка информационных систем

«Создание сайта-портфолио на языке гипертекстовой разметки HTML и применением CSS»
Выполнила: студентки 3 курса

группы 3-07и

Котова.А.А

Проверил: преподаватель

Исакова Е.В.
Чкаловск

2022

Содержание

Введение 2

1.Теоретическая часть 3

1.1Понятие сайта и его основные виды 3

1.2Способы создания сайта 5

2. Практическая часть 8

2.1. Цель разработки сайта 8

2.2. Характеристики языка программирования 8

2.3. Требования к разработке сайта 10

2.4. Макет разрабатываемого сайта 10

Заключение 13

Список используемой литературы 14

Приложения 15

Введение

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

Цель практики – ознакомиться с программным продуктом Visual Studio Code, изучить основные функции и назначение программы, научиться программировать и создавать сайт на языке программирования HTML.

Задачи учебной практики:

1. 
   Знать понятие сайта и его виды.
   
2. 
   Ознакомиться со способами создания сайта.
   
3. 
   Знать требования к сайту.
   
4. 
   Научиться создавать макет сайта.
   
5. 
   Знать основы создания сайта.
   
6. 
   Уметь проектировать и создавать сайт.
   

Период прохождения практики:

Начало практики 07.06.2021г. – конец практики 26.06.2021г. (2 курс)

Начало практики 07.12.2021г. – конец практики 13.12.2021г. (3 курс)

Начало практики 30.03.2022г. – конец практики 12.04.2022г. (3 курс)

Начало практики 08.06.2022. – конец практики 28.06.2022г. (3 курс)

1. Теоретическая часть

1. Понятие сайта и его основные виды

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

• 
  Сайт-визитка — это своеобразная электронная версия вашей визитки, размещенная в интернете. Такой сайт обычно содержит основную информацию об организации или частном лице, товарах или услугах, прейскуранты, контактные данные и адреса.
  
• 
  Сайт-портфолио — это такой вид сайта идеально подходит для художников, фотографов, мастеров и всех тех, кто имеете отношение к искусству. Раньше, когда не было такого понятия как сайт, и люди просто устраивали выставку. Сейчас эту функцию может выполнить интернет-выставка — то есть сайт-портфолио, если вашему клиенту, например, фотографу, нужно показать собственноручно выполненные работы. Любой автор пытающийся заявить о себе будет пользоваться таким видом сайта, чтобы через портфолио привлечь клиентов.
  
• 
  Интернет-магазин — это то же самое, что и обычный магазин. Разница в том, что для покупки не надо никуда ехать. Сайт такого вида обязательно должен содержать каталог с товарами, его подробным описанием, фотографиями и ценами, корзину, выбор «любимых» товаров, систему онлайн-оплаты, часто личный кабинет. Клиенту остается просто зайти на сайт, выбрать подходящий товар и выбрать способ оплаты и доставки.
  
• 
  Сайт- витрина (каталог) — это такой сайт разрабатывается, как правило, для организаций, занимающихся оптовой и розничной торговлей. На нем бывают представлены перечень товаров с подробным описанием, подкрепленным фотографиями и статьями. Он предназначается для ознакомления потенциальных клиентов с ассортиментом товаров из каталога, но этот сайт не продает: там отсутствует корзина для моментальной покупки в режиме онлайн.
  
• 
  Такой сайт обычно состоит из нескольких частей и рассчитан для сотрудников компании и клиентов этой компании.
  На корпоративном сайте могут быть:
  

1. 
   Разделы технической поддержки;
   
2. 
   Клиентская база;
   
3. 
   Блоги;
   
4. 
   Онлайн калькуляторы;
   
5. 
   Онлайн-чаты и так далее.
   

Такой сайт служит качественной и полноценной презентацией компании в Интернете. Его основная цель – привлечь не только новых клиентов, но и партнеров.

2. Способы создания сайта

1. Запуск своего сайта от конструктора веб-сайтов

Конструктор веб-сайтов — это тип онлайн-программного обеспечения, предлагаемого хостинговыми компаниями, которые позволяют создавать и публиковать веб-сайт без ручного кодирования. К ним относятся такие компании, как Wix, Weebly, SiteBuilder, SquareSpace.

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

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

Недостатки:
Хотя веб-конструкторы просты в использовании и недороги, они приходят со своими ограничениями. Один из них заключается в том, что у Вас нет доступа к коду Вашего сайта, параметры настройки ограничены.

С большим количеством бесплатных пакетов, Вы ограничены количеством страниц, которые Вы можете иметь, количество пространства для хранения и доменное имя, которое Вы можете выбрать. Во многих случаях конструкторы оставляют за собой право показывать свои объявления и рекламу, пока Вы не заплатите им деньги и не улучшите свой план.

2. Использование системы управления контентом

Система управления контентом (CMS) — это тип программного обеспечения, такого как WordPress, Joomla или Drupal, которые позволяют создавать и управлять цифровым контентом. Они более универсальны, чем конструкторы веб-сайтов.

WordPress – это самая популярная система управления контентом, занимает долю сайтов в интернете более половины в сети. Вы можете начать использовать свое свободное пространство на сервере WordPress.com, но лучший вариант, самостоятельное размещение на своем сервере, скачав полную версию cms WordPress. Программное обеспечение всегда бесплатное, но Вам придется заплатить за хостинг через компанию, например «reg.ru«. (Вы также можете разместить свой сайт на своем сервере)

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

Преимущества:

С CMS в качестве WordPress, Вы будете иметь доступ к тысячам шаблонов или Вы можете скачать свой или купить готовый шаблон. Вы также можете установить сторонние плагины, которые расширяют функции Вашего сайта, а также код Вашего сайта для полной настройки.

Программное обеспечение может управлять самыми маленькими личными веб-сайтами на веб-сайтах крупных компаний. Фактически, многие крупные бренды, такие как Tech Crunch, Time и The Wall Street Journal, пользуются WordPress.

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

Недостатки:

Достаточно иметь минимум технических знаний, при использовании системы управления контентом, но с ростом популярности этих платформ, очень легко найти помощь в интернете.

Также имейте в виду, что безопасность является большой проблемой, особенно с платформой, популярной как WordPress.

3. Создайте свой сайт с нуля

Последний вариант создания веб-сайта, разработка сайта с «чистого листа». Вы можете создать свой сайт через HTML, который является всемирно признанным языком программирования, который контролирует форму и содержание Вашего сайта.

Если Вы готовы учиться, Вы можете создать свой собственный сайт на HTML; если нет, Вы можете нанять программиста или веб-студию, чтобы сделать это вместо Вас. Они могут использоваться в сочетании с HTML, JavaScript, CSS, программным обеспечением для создания шаблонов, таких как Dreamweaver и многое другое.

Преимущества:

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

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

Недостатки:

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

Если Вы решите нанять веб-разработчика для администрирования сайта или его доработки, это может быть очень дорогостоящим удовольствием. Кроме того, Вы откажетесь от некоторых элементов управления, потому что Вам нужно будет постоянно связаться с Вашим веб-программистом, когда Вы захотите внести какие-нибудь изменения. Даже малейшие.
HTML не является лучшим вариантом для динамических веб-сайтов, где содержание сайта необходимо часто менять.

2. Практическая часть

2.1. Цель разработки сайта

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

Под целями портфолио можно подразумевать следующее:

• 
  показать все, на что студент способен, продемонстрировать его наиболее сильные стороны, максимально раскрыть его (её) человеческий, профессиональный, творческий потенциал;
  
• 
  привить студенту навыки анализа собственной деятельности, самоорганизации, самоконтроля, самооценки, а также позитивному и конструктивному отношению к сторонней критике;
  
• 
  сформировать у студента навыки самосознания и адекватной самооценки своих результатов, понимания их динамики.
  

2.2. Характеристики языка программирования

HTML – это язык гипертекстовой разметки страницы. Он используется для того, чтобы дать браузеру понять, как нужно отображать загруженный сайт.

HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

Особенности HTML:

1. 
   Изначально перечень команд оформления текстов включал всего 18 элементов, 11 из которых используются даже в последних релизах.
   
2. 
   Основная задача языка заключалась в воспроизведении контента без искажений независимо от технического оснащения устройства.
   
3. 
   Современные версии HTML стали более зависимыми от платформы из-за появления тегов для мультимедийного и графического оформления.
   

Основные элементы HTML:

1. 
   Форматирование текста – выделение курсивом, жирным шрифтом, подчеркивание, размер кегля, нумерованные/маркированные списки.
   
2. 
   Текстовые блоки – заголовки уровней H1-H6, абзацы, перенос на новую строку.
   
3. 
   Таблицы – любое количество строк, столбцов, фиксированная высота, ширина, заголовки.
   
4. 
   Вставка объектов – изображения, звуковые, текстовые, видеофайлы и т.д.
   
5. 
   Гиперссылки – на файл изображения, прайс-листа, страницу, на которую ссылается пункт меню или анкор в тексте. Есть атрибуты открытия документа в текущем или новом окне.
   

Достоинства:

Основными достоинствами HTML-документов являются:• малый информационный объем; • возможность просмотра на персональных компьютерах, оснащенных различными операционными системами. Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста.

Недостатки:

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

2.3. Требования к разработке сайта

Требования к оформлению портфолио:

• 
  Системность и регулятивность, самомониторинг (сбор и наполнение материалов в соответствии с разделами Портфолио осуществляет работник в течение всей своей деятельности);
  
• 
  Достоверность (то есть вся размещенная информация должна быть реальной и иметь подтверждение);
  
• 
  Объективность;
  
• 
  Нацеливание автора на самосовершенствование (показывает что автор старается самосовершенствоваться);
  
• 
  Структуризация материалов, логичность и лаконичность всех письменных пояснений (текст должен быть взаимосвязан между собой);
  
• 
  Аккуратность и эстетичность оформления (всё должно быть структурировано, цвета должны гармонично смотреться);
  
• 
  Целостность, тематическая завершенность представленных материалов;
  
• 
  Наглядность результатов работы (то есть должны быть представлены фотографии или сканы сертификатов, дипломов, грамот);
  
• 
  Технологичность (структурированность кода);
  

2.4. Макет разрабатываемого сайта

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

Макет отображает цветовую гамму, шрифт, расположение меню, навигацию и многое другое. Индивидуальный и грамотный макет – это первый шаг к созданию хорошего сайта.

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

В первую очередь необходимо определиться с целями и задачами сайта.

При разработке макета сайта необходимо учитывать критерии:

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

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

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

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

Макеты сайтов можно классифицировать по ширине: т.е это макет сайта с фиксированной шириной; резиновый макет сайта; эластичный макет сайта; адаптивный и комбинированный.

Макет сайта с фиксированной шириной – это макет, ширина которого имеет постоянное значение, которое не зависит от разрешения окна браузера пользователя. Обычно такой макет располагается по центру экрана. Минус его в том, что он некрасиво смотрится на больших мониторах. Примером может служить сайт vkontakte.ru.

Резиновый макет сайта задается в процентах и поэтому вне зависимости от разрешении и размеров окна браузера, сайт занимает всю его ширину. Такой сайт смотрится хорошо на любом мониторе. Минус в том, что при создании такого макета разработчику сложно контролировать то, что может увидеть пользователь. Примером такого сайта может быть yandex.ru.

Эластичный макет отличается от двух предыдущих тем, что при изменении размера шрифта будет изменяться и размер основных элементов.

Адаптивный макет подстраивается под разрещение монитора и окна браузера, меняя ширину макета, число колонок, размеры изображений и текста.

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

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

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



Рисунок 1 - Макет сайта Портфолио

Заключение

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

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

• 
  Изучила что такое сайт и его виды;
  
• 
  Узнала способы создания сайта;
  
• 
  Изучила требования к созданию сайта;
  
• 
  Научилась создавать макет сайта;
  
• 
  Узнала основы для создания сайта;
  
• 
  Научилась создавать сайт с помощью языка программирования HTML.
  

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

Список используемой литературы

1. 
   Алексеев А.. Введение в Web-дизайн. Учебное пособие. — М.: ДМК Пресс, 2019. — 184 c.
   
2. 
   Барысов Р. Постройте профессиональный сайт сами. – СПб., 2019г.
   
3. 
   Гаевский, А.Ю., Романовский, В.А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML. – К. : А.С.К., 2020г.
   
4. 
   Дронов В. А. Самоучитель Macromedia Dreamweaver 8. — СПб.: БХВ-Петербург, 2021г.
   
5. 
   Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов / Д. Дакетт. - М.: Эксмо, 2018. - 208 c.
   

Приложения

Приложение 1



Рисунок 1 - Сайт Порфолио

Приложение 2

Код страницы Портфолио







   

   

       

           

               

               

                       
Котова Анастасия Андреевна


               

       

   

Биография

   

   
Я Котова Анастасия родилась 18 декабря 2003 года в п. Пестяках. С 2006 по 2010 год посещала детский садик в п. Верхний Ландех. С 2010 училась в школе. В 2019 году поступила в ЧТТИТ, на информационные системы и программирования. В техникуме хожу на секию волейбол,участвую в соревнованиях спортивных. С семи ходила в танцевальный кружок, увлекалась шитьем. Люблю ходить гулять по тихим местам и наслаждаться звукам природы.Я учусь на 3-ом курсе по специальности 09.02.07 Информационные системы и программирования. Также увлекаюсь театральным искусством: не только посещаю спектакли, но и сама играю в любительских постановках. Главная черта моего характера — коммуникабельность. Я открытый, весёлый человек, сангвиник по типу темперамента. Иногда бываю слишком импульсивной, но стараюсь не забывать о рассудительности, быть более организованной. Мой жизненный девиз — цитата Генри Форда: «Время не любит, когда его тратят впустую». Я стараюсь не допускать пустых часов и даже минут: учусь, прохожу тренинги и вебинары, читаю, смотрю интересные фильмы, провожу время с друзьями и семьёй. Мне кажется, это гораздо продуктивнее, чем просто предаваться мечтам или переживать о неудачах. После окончания техникума, я планирую поступить в магистратуру и параллельно работать. Мне бы хотелось устроиться в какое-нибудь учреждение культуры, в отдел международных связей. Я верю, что там смогу приносить пользу и при этом заниматься любимым делом.  


   

   

       
Мои достижения


   

   

       
Мои фотографии