РАЗРАБОТКА САЙТА УЧЕБНОГО ЗАВЕДЕНИЯ
Зелинский Владислав Владимирович
Донецкий промышленно-экономический колледж, г. Донецк
Научный руководитель: Волков Владимир Александрович
Аннотация: публикация посвящена разработке сайта учебного заведения на примере обновления сайта ГПОУ «ДОНПЭК»
Ключевые слова: сайт, интернет, информация, контент, файловая структура, навигационная панель, страница, скорость загрузки.
Введение
Общество, в котором мы живём, приобретает всё больше черт информационного, и это сказывается во всех сферах жизни. Сферу образования можно назвать «передним флангом», который принимает на себя основной удар наступления информационных технологий.
Образовательная среда за последние годы претерпела значительные изменения. Это обусловлено большим ростом потока информации и способов ее получения. Результаты многочисленных мониторинговых исследований свидетельствуют о том, что компьютер является сегодня одним из наиболее значимых источников информации. Поэтому образовательные учреждения должны по-новому функционировать в современных условиях. Web-сайт - это в какой-то степени «лицо» учебного заведения, его своеобразная «визитная карточка». Грамотно построенный сайт выполняет множество самых различных функций. Это и возможность размещения информации с целью знакомства посетителей с деятельностью данного образовательного учреждения, оперативность и доступность получения учащимися и их родителями необходимой информации, средство общения посетителей посредством форума, дополнительный информационный ресурс образовательного интернет-пространства и многое, многое другое.
Информационная культура и информационная компетентность, соответствующие этому, включают умения находить, анализировать, систематизировать информацию с помощью современных информационных технологий, а также грамотно подготавливать, представлять и использовать персональную и корпоративную информацию для установления и развития контактов с потребителями образовательных услуг, коллегами и спонсорами.
Сайт ГПОУ «ДОНПЭК» в Интернете официально представляет наше учебное заведение. Поставлена задача создать Интернет-ресурс, который будет привлекательно выглядеть внешне и достаточно полно отражать весь необходимый материал по содержанию, эффективно использовать возможности глобальной компьютерной сети, выполнять представительские функции в расчёте на различные категории потенциальных посетителей и играть роль связующего звена со студентами, абитуриентами и родителями.
Профессионально созданный сайт обеспечивает легкость его нахождения по запросам в поисковых системах, поскольку целевую аудиторию составляют пользователи, которые ищут конкретную информацию в Интернете. Постоянный контакт с абитуриентами и студентами позволяет оперативно реагировать на изменения тенденций и проводить своевременную коррекцию. Кроме того, расходы на рекламу в Интернете значительно ниже, чем в традиционных средствах.
Сайт сегодня является информационным средством, визиткой учебного заведения, полноценным инструментом для привлечения новых студентов.
Качественный сайт является основным информационным ресурсом всего колледжа. При помощи сайта можно:
передать всю необходимую информацию о колледже и о специальностях, в том числе самые последние новости;
наладить прямой контакт с абитуриентами и студентами (например, в форуме и с помощью блиц-опросов);
современно разрекламировать колледж так, чтобы иметь одновременно зрелищность телевизионной рекламы и информативность буклета.
Целью разработки стал сайт учебного заведения ГПОУ «Донецкий промышленно - экономического колледж».
Основная часть
Сайт donpek создан в качестве обновления предыдущего варианта. Были исправлены некоторые ошибки, улучшен пользовательский интерфейс, изменён дизайн сайта. Дизайн вдохновлен современными лединговыми шаблонами (одностаничниками). Сайт donpek много от них почерпнул - удобный интерфейс, отсутствие базы данных, что естественно благотворно сказалось на скорости загрузки страниц и выполнении скриптов. Сайт адаптивен, подстраивается под размер монитора. Внешний вид сайта представлен на рис 1.
При создании применялись современные технологии верстки. Код написан по всем правилам БЕМ методологии (аббревиатура Блок Элемент Модификатор), разделяющей все сущности на три данные группы и подразумевающей семантические имена классов и переменных. Это сильно упрощает работу с долгосрочной поддержкой проекта. Код оптимизирован и минимизирован сборщиком проектов Gulp. Что уменьшило размер данных передаваемых при загрузке страницы. Сборка проекта с помощью Gulp позволяет хранить в отдельных файлах многократно дублирующийся код HTML и вставлять его при необходимости использования SCSS. Это и многое другое позволяет упростить разработку и повысить качество конечного продукта.
Рис 1. – Внешний вид сайта donpek
Сайт имеет ряд изменений:
уменьшение числа страниц путем более логичного и удобного распределения контента;
удаление, по возможности, дубликатов и лишней информации, которая запутывает пользователя.
организация четкой файловой структуры, отчасти позаимствованной у проектов на Ruby on rails (мощный Фреймворк для создания сайтов и приложений использующий ruby вместо php для серверной части).
Схема сайта представлена на рис. 2.
Описание разделов схемы в таблице
Описание схемы сайта donpek
| ./ | Содержит все файлы HTML |
| ./assets | содержит файлы необходимые для клиентской части сайта |
| /assets/css | содержит файлы стилей |
| /assets/js | содержит скрипты |
| /assets/img | содержит картинки |
| /assets/fonts | содержит файлы шрифтов |
| /data | содержит информацию хранимую в файлах json |
| /bin | содержит серверные скрипты |
Рис 2. – Схема сайта donpek
Каждая страница представляет собой «сэндвич». Контент зажимается между header и footer «шапкой и подвалом сайта». В том месте, где в header обычно располагается навигационная панель, заголовок и т.д., Footer содержит контакты и ссылки. В нашем случае только ссылки на сайты партнеров.
Схема страницы сайта представлена на рис. 3.
Рис 3. – Схема страницы сайта donpek
Вывод
Немного усилий помноженных на знание и получен готовый сайт отвечающий современным стандартам. По сравнению с предыдущим сайтом, скорость загрузки главной страницы уменьшилась, что порадует нетерпеливого пользователя. Интерфейс стал более современным и гармоничным, появилась поддержка малых устройств.
Литература
Домненко В.М., Бурсов М.В. Создание образовательных интернет-ресурсов. Учебное пособие. - СПбГИТМО(ТУ), 2012.
Норт Б. WordPress Практическое руководство. - Пер. с англ. - СПб: Символ-Плюс, 2013.
Колисниченко Д.Н. WordPress 1.5. Руководство пользователя. - М.: Изд-во Диалектика, 2010.
Рамел д. Самоучитель WordPress: Пер. с анг. - СПб.: БХВ-Петербург. 2010.
Рева О.Н. Создание Web-страниц. Просто как дважды два. М.: Изд-во Эксмо, 2011.
Белозубов А. В., Николаев Д. Г. Основы работы с HTML-редактором Abobe Dreamweaver CS3. Учебно-методическое пособие, 2007.
Дьячков А. П. «Как рассчитать цену на свой продукт или услугу». «РусЭнергоМир» - Новосибирск. 2012.
Комолова Н.В. «CorelDRAW X4. Самоучитель. СПб.: «БХВ-Петербург», 2008.
Осипова О., Самоучитель Abobe Dreamweaver. СПб.: «БХВ-Петербург», 2008.
Официальный учебный курс Adobe Dreamweaver CS5 и CS5.5. Использование Adobe Dreamweaver CS5 и CS5.5., 2012.
Официальный учебный курс Adobe Dreamweaver CS4 + CD / Adobe Dreamweaver CS4: Classroom in a Book, М.: «Эксмо», 2009.
Смолина М. А. «CorelDRAW 12. Самоучитель. М.: «Диалектика», 2011.
Соболевская Т.А. «Товарные знаки», А.М. Суперацская 2013
Уорнер Д., Macromedia Dreamweaver 8 для "чайников", «Вильямс», 2010
Хаген Граф Создание веб-сайтов с помощью WordPress 1.5. / Издательский дом "Вильямс", 2011
Рамел д. Самоучитель Joomla!: Пер. с анг. – СПб.: БХВ-Петербург. 2008. – 448 с.
Блог AllForJoomla http://allforjoomla.ru/info/
Создание и продвижение сайтов http://www.regioninfo.ru/