CC BY
95
Pedagogy
УДК 374.31 йй!: 10.21661/Г-80676
И.В. Курдюкова
Специфика разработки веб-сайта для детских компьютерных курсов
Аннотация
В статье отражены особенности создания сайта для детского и подросткового образовательного проекта на примере веб-сайта архангельской Летней компьютерной школы, который используется не только для информирования, но и непосредственно для обучения. В статье также описаны основные этапы разработки сайта, способы обучения при помощи действующего веб-ресурса, затронута специфика выбора CMS (Content management system).
I Ключевые слова: веб-сайт, веб-ресурс, информационные технологии, компьютерные курсы, компьютерная школа, информатизация системы образования, контент, контент-менеджмент, разработка сайта, веб-программирование, веб-верстка.
I.V. Kurdyukova
Specifics of website development for children's computer courses
Abstract
The article reflects the features of a site for children and adolescents educational project on the case of the Arkhangelsk Summer computer school website, which is used not only for informing, but also directly for teaching. The article also describes the main stages of the site development, the methods of teaching with the help of this web resource, the principals of CMS (Content management system) selection.
I Keywords: website, web resources, information technology, computer courses, computer school, educational system computerization, content, content management, site development, web programming, web layout.
В настоящее время одним из направлений модернизации развития образования выступает процесс информатизации системы образования, процесс внедрения в обучение комплекса разнообразных информационных технологий. Основными задачами информатизации являются обеспечение доступности, качества и эффективности предоставления образовательных услуг, а также организация условий для поддержки системного внедрения и активного использования информационно-коммуникативных технологий в образовательном процессе [1, с. 153]. Многие педагоги все с большей готовностью включают информационные технологии в свою методическую систему, так как понимают, что это даст им возможность качественно изменить содержание, методы и организационные формы обучения [4].
В свою очередь, разработка веб-сайтов - одно из самых перспективных направлений в области информационных технологий [3, с. 33]. Работа с веб-сайтами -это направление, которое в равной степени развивает как технические, так и творческие навыки обучающихся. Прогресс не стоит на месте, постоянно появляются новые версии популярных браузеров, возникают новые
свойства и параметры HTML-технологий и, как следствие, возможности HTML приобретают все большее значение в ходе работы с сайтами различной сложности [3, с. 4].
Создание сайта, в том числе и для компьютерных курсов, включает в себя несколько этапов, среди которых - определение целей веб-ресурса и его позиционирование, создание технического задания (ТЗ) на разработку, создание дизайн-макета, верстка, программирование, наполнение информацией.
На первом этапе важно выяснить, какие задачи должен решать веб-сайт, затем необходимо как можно подробнее описать целевую аудиторию, что дает возможность разработать правильный дизайн для проекта, а также выбрать верное направление для создания текстов [7].
В результате было определено, что веб-сайт для Летней компьютерной школы должен решать следующие задачи:
- возможность использовать сайт как по прямому назначению, так и для обучения участников курсов;
Педагогика
- благодаря структуре сайта, включающей в себя новостную ленту, организация максимально полного и удобного информирования родителей о программе летних компьютерных курсов, сроках проведения;
- создание условий для размещения особых обучающих материалов контент-менеджерами только для зарегистрированных пользователей;
- организация контакта между организаторами и участниками школы в рамках сайта.
Сайты для детей представляют собой неограниченные возможности для познания нового, не терпят шаблонности, являются полем для экспериментов, поэтому допустимо использовать большое количество визуальных акцентов, но, если говорить о функциональности, сайт должен быть понятным в использовании. В то же время детей старшего возраста привлекают сайты, созданные по образу и подобию сайтов для родителей, следовательно, основными отличиями интерфейса для данной целевой аудитории становятся сложные комбинации оттенков, расширение цветовой палитры [6]. Целевой аудиторией курсов являются дети, подростки в возрасте от 10 до 15 лет и их родители, в связи с чем были сформированы соответствующие требования к дизайну сайта, некоторые из которых - сочная, преимущественно светлая цветовая гамма, креативный логотип в «детском» стиле, большое количество «воздуха» (свободного пространства) на сайте.
Часто этапы программирования и верстки объединяют в один, что было сделано и в случае Летней компьютерной школы. Во время верстки дизайн-макет переводится на язык, понятный компьютеру [7]. В этом процессе используются языки HTML (Hyper Text Markup Language) и CSS (Cascading Style Sheets). HTML - это простой язык гипертекстовой разметки, используемый для создания гипертекстовых документов, допускающих переноску с одной платформы на другую. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме. В свою очередь, CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Если HTML используется для структурирования содержимого страницы, то CSS используется для форматирования этого структурированного содержимого [3, с. 5-6].
На этапе программирования, в частности, определяется порядок работы меню, расставляются гиперссылки, создается динамика на сайте и т. д. [7]. Так, для организации максимально удобной структуры сайта архангельского проекта было создано горизонтальное меню, доступ к которому предусмотрен на всех страницах сайта, новостная лента, включающая саму публикацию, ее анонс, фото-галерею, поле для комментариев. В разделе «Гостевая книга» интернет-пользователи могут задать интересующий вопрос, что позволяет в рамках веб-сайта наладить контакт между учащимися, потенциальными учениками, родителями и организаторами. Для реализации функционала сайта использовались
как встроенные возможности выбранной CMS (Content management system), так и отдельно разработанные модули (при помощи HTML, CSS, а также языков программирования PHP, JavaScript).
Учебная программа Летней компьютерной школы включает, в частности, обучение основам HTML и CSS, а также контент-менеджменту (наполнение сайта необходимой информацией) - теоретический и практический блоки. В связи с этим, наиболее подходящей CMS для создания сайта была признана MODX Evolution, которая имеет базу данных, возможность вывода кода чанков (куски (X)HTML-кода, используемые в неизменном виде в нескольких местах) и сниппетов (чистый PHP-код, обеспечивающий динамическую логику) на странице. CMS является бесплатной и в то же время удобной как для сотрудников компьютерной школы, исполняющих обязанности контент-менеджеров, так и для учеников соответствующей дисциплины (наличие удобного «дерева ресурсов», возможность размещения статей и фотографий без использования языка разметки: при помощи классического текстового редактора, встроенного в CMS, и заранее предусмотренных разработчиками TV-параметров, фото-галереи).
В то же время разработчики и администраторы сайта могут без сложностей устанавливать и обновлять дополнения, не беспокоясь о потерянных шагах или зависимостях [2].
В свою очередь, будущие веб-верстальщики размещают публикации о жизни компьютерной школы, используя встроенный в MODX редактор кода, позволяющий отформатировать текст именно при помощи HTML-тегов и CSS. Тег (более правильное название -дескриптор) - это элемент языка разметки гипертекста [3, с. 5].
Отметим, что функции систем управления контентом можно разделить на следующие категории: создание (предоставление авторам удобных и привычных средств создания контента.), управление (хранение контента в едином репозитории), публикация (автоматическое размещение контента на терминале пользователя), представление (дополнительные функции, позволяющие улучшить форму представления данных) [5].
Материалы, которые пишут и сами ученики, публикуются в специально созданных разделах «Новостная лента» и «Смена», что знакомит учащихся с понятиями «дерево ресурсов веб-сайта», «дочерний ресурс», «TV-параметры», «редактор кода», «анонс публикации» и другими терминами, актуальными для разработчиков и контент-менеджеров.
Кроме того, администратор сайта компьютерной школы создает отдельную учетную запись для каждого ученика (чаще всего с правами «менеджера» и ролью «редактора»), что служит цели научить работать с административной панелью сайта и в то же время ограничить права для редактирования системных файлов, изменение которых может повредить работе сайта и доступ к которым есть только у администратора.
40 Интерактивная наука | 4 • 2016
Pedagogy
В дополнение каждый может зарегистрироваться на специально созданной странице сайта, приобретая также права «веб-пользователя», а затем авторизироваться прямо на сайте при помощи самостоятельно созданных логина и пароля. «Веб-пользователь», в отличие от «менеджера», не имеет доступа к административной панели, но получает доступ к обучающим материалам, скрытым для незарегистрированных пользователей, и личному кабинету. В результате ученики начинают видеть разницу между ролями и правами в управлении сайтом, что помогает глубже понять работу сайта.
Таким образом, ученики закрепляют полученные знания, работая с действующим проектом, начинают понимать отличия между сайтом, состоящим только из HTML-страниц, и сайтом, созданном при помощи CMS.
В результате мы приходим к следующим выводам:
- на первом этапе разработки нужно четко определить задачи сайта, что поможет правильно структурировать работу на следующих этапах;
- при выборе CMS для детского образовательного проекта нужно предусматривать возможность удобной выкладки материалов;
- веб-сайт, созданный для образовательного проекта, может служить не только для информирования посетителей сайта, но и для конкретного обучения основам контент-менеджмента, веб-вертки, веб-программирования, что является перспективным направлением в области информационных технологий;
- при обучении верстке сайтов при помощи HTML и CSS можно использовать встроенный в CMS редактор кода, а контент-менеджменту - текстовый редактор, что дает учащемуся возможность попробовать свои силы в работе с Content management system;
- чтобы учащийся лучше понял, как работает веб-сайт, созданный при помощи CMS, можно предоставить ему доступ к административной панели действующего сайта, ограничив права на редактирование системных файлов. При этом полезно предусмотреть возможность самостоятельной регистрации на сайте без доступа к административной панели, наличие личного кабинета пользователя, возможность задать вопрос или оставить комментарий на сайте.
Литература
1. Акимов С.С. Возможности применения информационных технологий в дополнительном образовании детей / С.С. Акимов, Н.С. Андреева, М.А. Коровина // Педагогическое мастерство: Материалы II междунар. науч. конф. (г. Москва, декабрь 2012 г.). - М.: Буки-Веди, 2012. - С. 153-157.
2. Возможности MODX Evolution // MODX creative freedom [Электронный ресурс]. - Режим доступа: https://modx. ru/o-sisteme-modx/modx-evolution/
3. Курдюков А.И. Создание Web-сайтов: Учебно-методическое пособие / А.И. Курдюков. - Архангельск, 2014. - 34 с.
4. Ляшок А.К. Информационные технологии в образовании: компьютеризация школ и роль интернета в процессе обучения / А.К. Ляшок, М.О. Титовская // Научное сообщество студентов XXI столетия: Сб. ст. по мат. XV междунар. студ. науч.-практ. конф. [Электронный ресурс]. - Режим доступа: http://sibac.info/studconf/tech/xv/35903
5. Савельева Н. Системы управления контентом // Открытые системы [Электронный ресурс]. - Режим доступа: http://www.osp.ru/os/2004/04/184166/
6. Федорова Ю. Детские сайты: особенности проектирования [Электронный ресурс]. - Режим доступа: http://blog. getgoodrank.ru/detskie-sajty-osobennosti-proektirovaniya/
7. Шукалова Е. Этапы создания веб-сайта / Е. Шукалова, Р. Тихонов // Обучающий центр «Интернет-маркетинг» [Электронный ресурс]. - Режим доступа: http://im.fert.ru/pages/jetapy_sozdanija_veb-sajta/
