Введение 3
1 Обзор литературы по теме «Создание баннеров средствами языка
гипертекстовой разметки и каскадных таблиц стилей» 5
1.1 Обзор литературы и интернет-источников 5
1.1.1 Обзор литературных источников 5
1.1.2 Обзор интернет-источников 10
1.2 Анализ рабочей программы дисциплины «Информационные
технологии в рекламе» 20
1.3 Понятие и преимущества электронного учебного пособия 23
2 Описание электронного учебного пособия 26
2.1 Педагогический адрес 26
2.2 Структура электронного учебного пособия 26
2.3 Интерфейс и навигация электронного учебного пособия 28
2.4 Описание теоретического материала 32
2.5 Описание практического материала 34
2.6 Описание справочного материала 42
2.7 Методические указания по использованию электронного учебного
пособия для преподавателя 43
2.8 Методические указания по использованию электронного учебного
пособия для студентов 44
Заключение 47
Список использованных источников 49
Приложение 52
В настоящее время интернет-пространство открывает абсолютно безграничные возможности для продвижения любого товара пользователя сети Интернет. Количество постоянных пользователей, посещающих всемирную паутину для поиска различной информации, в том числе и о товарах, по-прежнему растет.
В настоящее время существует два вида баннеров для интернет- страниц:
• статические;
• динамические.
Баннеры, использующие технологию языка гипертекстовой разметки (HTML5) — это полностью адаптивные анимированные баннеры. НТМЬ5-баннеры создаются как обычная резиновая HTML5-страница с использованием каскадных таблиц стилей (CSS3). Такие баннеры имеют множество преимуществ:
• рекламные HTML-баннеры отображаются на любом устройстве, а также подходят для скрин-ридеров благодаря семантической верстке;
• возможно использование любых элементов веб-страниц в HTML5- баннерах: текст, изображения, видео, скрипты и формы;
• возможность использовать динамические сценарии и базы данных на серверной стороне;
• возможность редактирования баннера после его размещения;
• файлы могут иметь достаточно небольшой размер HTML5-баннера;
• не нужно осваивать ничего нового, используются технологии обычной веб-разработки;
• абсолютная адаптивность, с помощью CSS медиа-запросов можно подстраивать элементы баннера под любые размеры экрана.
Актуальность настоящей работы обусловлена отсутствием электронных учебных пособий (ЭУП) по теме создания баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей, содержащих теоретический, практический материал, контролирующий блок и адаптированных к тематическому плану раздела «Создание рекламной анимации» дисциплины «Информационные технологии в рекламе».
Объект работы — процесс обучения бакалавров по направлению под-готовки 09.03.02 «Информационные системы и технологии» профилю «Информационные технологии в медиаиндустрии» дисциплине «Информационные технологии в рекламе».
Предметом работы являются учебные материалы по дисциплине «Информационные технологии в рекламе».
Цель выпускной квалификационной работы — разработать электронное учебное пособие «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей».
Для достижения поставленной цели необходимо выполнить следующие задачи:
• проанализировать литературу и интернет-источники по теме «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей» с целью формирования теоретической базы для наполнения учебного пособия;
• проанализировать рабочую программу с целью формирования структуры электронного учебного пособия;
• спроектировать структуру и реализовать интерфейс электронного учебного пособия на тему «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей»;
• наполнить электронное учебное пособие учебными материалами по теме «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей».
В рамках выпускной квалификационной работы было разработано электронное учебное пособие «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей», для студентов специальности 09.03.02 «Информационные системы и технологии», изучающих дисциплину «Информационные технологии в рекламе». Пособие включает в себя два теоретических материала для самостоятельного изучения, шесть практических работ, итоговое задание, два справочника по трансформации и анимации, а также методические указания по использованию электронного учебного пособия преподавателем и студентами.
В процессе выполнения выпускной квалификационной работы был выполнен обзор литературных и интернет-источников по теме «Создание баннеров средствами языка гипертекстовой разметки и каскадных таблиц стилей». Выявлено, что теоретического и практического материала на общую тему изучения CSS3 много, но подобных электронных учебных пособий нет, а также в источниках минимальное количество практического материала по теме «создание баннеров». Разработка электронного учебного пособия, объединяющего структурированный теоретический и справочный материал, лабораторные задания и итоговое задание, становится актуальной, потому что подобные пособия по данному курсу отсутствуют.
Была подробно рассмотрена рабочая программа дисциплины «Информационные технологии в рекламе», которая входит в учебный план для под-готовки студентов всех форм обучения по направлению 09.03.02 «Информационные системы и технологии» профиль подготовки «Информационные технологии в медиаиндустрии», в которой рассмотрены:
• цель изучения дисциплины;
• задачи дисциплины;
• результаты освоения дисциплины;
• тематический план изучения дисциплины;
• раздел, для которого создавалось электронное учебное пособие.
С помощью технологий разработки веб-сайтов был разработан интерфейс спроектированного учебного пособия.
В ходе разработки интерфейса был подобран теоретический материал по двум темам, соответствующий содержанию темы, описанному в рабочей про-грамме. Также были разработаны шесть лабораторных работ для изучения но-вого материала обучающимися.
Целью выпускной квалификационной работы было разработать электронное учебное пособие. Для достижения цели были выполнены все постав-ленные задачи.
1. Веру Л. Секреты CSS. Идеальные решения ежедневных задач. [Текст] / Л. Веру. — Санкт-Петербург: Питер, 2016. — 336 с.
2. Вуль В. А. Электронные издания: глава IX. Электронные учебники [Электронный ресурс]. — Режим доступа: http://www.hi-edu.ru/e- books/xbookl 19/01/part-010.htm (дата обращения: 09.01.2019).
3. Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов [Текст] / Д. Дакетт. — Москва: Эксмо, 2013. — 480 с.
4. Дронов В. А. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов [Текст]: практическое руководство / В. А. Дронов. — Санкт- Петербург: БХВ-Петербург, 2011. — 416 с.
5. Журнал «WebForMySelf» — все о создании сайтов —
Webformyself.com[Электронный ресурс].— Режим доступа:
https://webformyself.com/tag/css3-animaciya/(дата обращения: 13.12.2018).
6. Интернет работа — блог по созданию и продвижению сайтов [Электронный ресурс]. — Режим доступа: https://blogwork.ru/chto-takoe-html/(дата обращения: 26.12.2018).
7. Коллекция анимаций CSS3 [Электронный ресурс]. —
Режим доступа: https://daneden.github.io/animate.css/ (дата обращения:
24.10.2018).
8. Коллекция качественных материалов для тех, кто делает сайты — Ruseller.com[Электронный ресурс]. — Режим доступа: https://ruseller.com/(дата обращения: 13.12.2018).
9. Макфарлан Д. Большая книга CSS3. 4-е изд. [Текст] / Д. Макфарлан. — Санкт-Петербург: Питер, 2016. — 608 с.
10. Мейер Э. А. CSS. Карманный справочник. 4-е изд. [Текст] / Э. А. Мейер. — Москва: ООО «И.Д. Вильямс», 2016. — 288 с.
11. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 [Текст] / Р. Никсон. — 4-е изд. — Санкт- Петербург: Питер, 2016. — 768 с.
12. Официальный сайт разработчиков HTML5 [Электронный ресурс]. — Режим доступа: https://www.w3.org/(дата обращения: 24.10.2018).
13. Подсветка синтаксиса — highlight.js [Электронный ресурс]. — Режим доступа: https://highlightjs.org/(дата обращения: 26.12.2018).
14. Портал о психологии — psychologyc.ru[Электронный ресурс]. — Режим доступа: https://psychologyc.ru/psixologiya-cveta-i-znachenie-cvetov-v- psixologii/(дата обращения: 26.12.2018).
15. Разработка электронного учебного пособия [Электронный ресурс]. — Режим доступа: https://sites.google.com/site/razrabotkaelektronnogopo- sobia/(дата обращения: 24.10.2018).
16. Сайт для тех, кто изучает веб-технологии и создает сайты — HTML5BOOK.ru[Электронный ресурс]. — Режим доступа: https://html5book.ru/(дата обращения: 24.10.2018).
17. Сообщество web-дизайнеров и разработчиков — Uwebde- sign.ru[Электронный ресурс]. — Режим доступа: https://uwebdesign.ru/(дата обращения: 13.12.2018).
18. Титтел Э. HTML, XHTML и CSS для чайников [Текст] / Э. Титтел, Н. Джеф. — 7-е изд. — Москва: ООО «И.Д. Вильямс», 2011. — 400 с.
19. Трегубова О. П. Создание электронного учебника [Электронный ресурс]. —
Режим доступа: http://открытыйурок.рф/%D1%81%D 1 %82%D0%B0%D 1%82 %D1%8C%D0%B8/526252/ (дата обращения: 09.01.2019).
20. Троян Д. Как создать новичку интерактивный баннер на HTML5 и
CSS3 [Электронный ресурс].— Режим доступа:
https://www.youtube.com/watch?v=EEqaV-dIPwc(дата обращения: 13.12.2018).
21. Учебники, задачники, справочники по web языкам — Code.mu [Электронный ресурс]. — Режим доступа: http://code.mu/(дата обращения: 13.12.2018).
22. Фреймворк bootstrap — getbootstrap.ru[Электронный ресурс]. — Режим доступа: http://getbootstrap.ru/docs/3.3.7/(дата обращения: 26.12.2018).
23. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств [Текст] / Б. Фрейн. — 2-е изд. — Санкт-Петербург: Питер, 2016. — 213 с.
24. Хабр — ресурс для IT-специалистов [Электронный ресурс]. — Режим доступа: https://habr.com/post/141780/(дата обращения: 24.10.2018).
25. Хеник Б. HTML и CSS. Путь к совершенству [Текст] / Б. Хеник. — Санкт-Петербург: Питер, 2011. — 336 с.
26. Энциклопедия HTML5 [Электронный ресурс]. — Режим доступа: http://html-5.ru/(дата обращения: 24.10.2018).
27. Stott J. — Animated Banner Using HTML5 & CSS3 [Электронный ресурс]. — Режим доступа: https://youtu.be/G4EDMrw4CsU(дата обращения: 13.12.2018).
28. Notepad++ [Электронный ресурс]. — Режим доступа: https://notepad- plus-plus.org/(дата обращения: 26.12.2018).
29. Sublime text 3 [Электронный ресурс]. — Режим доступа:
http://www.sublimetext.com/3(дата обращения: 26.12.2018).
30. W3schools.com— the world's largest web developer site [Электронный ресурс]. — Режим доступа: https://www.w3schools.com/tags/default.asp(дата обращения: 13.12.2018).