Мобильное обучение веб-технологиям и веб-программированию

Широкое распространение и институционализация электронного обучения обусловили необходимость развития у всех участников образовательного процесса компетенций, связанных с использованием и разработкой электронных образовательных ресурсов (ЭОР), включая массовые открытые онлайновые курсы (MOOC). Платформой реализации современных ЭОР и MOOC являются кроссбраузерные веб-ресурсы, и это делает актуальным развитие методики обучения разработке ресурсов на веб-платформе и для нее. Данная статья посвящена описанию инновационного подхода к обучению клиентскому веб-программированию (вебразработке) на основе формирования компетенций в области клиентских вебтехнологий (HTML, CSS, Javascript) с помощью технологии бордкастинга в условиях мобильной электронной информационно-образовательной среды (МЭИОС).

Обучение в мобильной электронной информационнообразовательной среде

В течение последних 10 лет автор данной статьи создавал и развивал методику подготовки различных категорий обучающихся к созданию электронных ресурсов. Подготовке будущих учителей к проектированию учебных курсов в области вебтехнологий была посвящена кандидатская диссертация [1] . В дальнейшем внимание было сосредоточено на двух категориях: будущие инженеры (специальность «Информационные технологии в образовании», бакалавры «Информатика и вычислительная техника»), и действующие учителя информатики (магистранты программы «Технологии и менеджмент электронного обучения» и слушатели системы дополнительного профессионального образования).

В основу обучения были положены системно-деятельностный и компетентностный подходы, концепция создания МЭИОС за счет интеграции облачных технологий и системы электронного обучения (LMS) [2] . Вслед за Н.Ф.Радионовой, А.П.Тряпицыной и другими ведущими теоретиками компетентностного подхода [3] , автор рассматривает компетентность в аспекте решения классов типовых профессиональных и квазипрофессиональных задач. Подготовка к решению задач осуществляется за счет соответствующей организации проектной, исследовательской и учебной деятельности обучающихся.

Анализ публикаций в области мобильного и облачного обучения приводит к выводу о развитии двух подходов к пониманию мобильности. Так, в работе И.Н. Голицыной и Н.Л. Половниковой [4] находит отражение подход, акцентирующий внимание на аппаратной платформе реализации мобильного обучения – мобильных устройствах. В публикации [5] автором данной статьи был предложен подход, при котором мобильность обучения рассматривается как результат организации ЭИОС, не зависящей от физического, географического расположения участников образовательного процесса. Таким образом организованную среду и предлагается называть мобильной. Очевидно, оба указанных подхода должны применяться скоординированно на соответствующих этапах организации процесса обучения.

Автором был также проанализирован изложенный в публикациях опыт обучения веб-программированию и, в частности, программированию на языке Javascript. В [6] представлены требования работодателей̆ к специалистам в области веб-программирования и веб-дизайна на рынке труда и выявлены компетенции, которыми должны обладать данные специалисты. В таблице 1 приведены наиболее востребованные языки и технологии (что согласуется с данными, предоставляемыми такими агрегатами как habrahabr.ru).

Таблица 1.

Востребованные работодателями языки и технологии

Языки и технологии	Доля в требованиях
HTML4, XHTML1, HTML5	81 %
PHP и фреймворки на его основе	79 %
CSS	64 %
Javascript	34 %
jQuery	45 %

Авторы [6] соотнесли эти результаты с требованиями государственных образовательных стандартов по бакалаврским направлениям «230700 Прикладная информатика», «080500 Бизнес информатика», «230400 Информационные системы и технологии». Авторы работ [7 ,8] также анализируют содержание обучения вебпрограммированию с аналогичных позиций.

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

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

В общей сложности за период с 2005 года автор данной статьи осуществил обучение по курсам «Веб-проектирование» и «Веб-дизайн» около пятисот студентов и учителей. Основной инновационной идеей, представленной автором при разработке программ указанных курсов, было использование ЭОР нового типа – ресурсов, сочетающих использование принципа работы облачных документов с разделяемым доступом и принципа работы онлайн-интерпретаторов языков программирования. Для обозначения интерпретируемого ресурса (программного кода, результаты отображения которого видны в окне браузера обучающегося), который предоставляется в разделяемый доступ, автор предлагает использовать слово «борд», а термином «бордкастинг» обозначать процесс «вещания» такого ресурса, при котором преподаватель управляет редактированием кода, а аудитория (локальная или удаленная) наблюдает за этим процессом, соучаствует в редактировании и создает свои версии кода на основе предлагаемого. Для данного термина автор создал соответствующую викистатью [9] .

Для подтверждения гипотезы об эффективности применения изложенной методологии обучения занятия проводились в экспериментальной и контрольной группах. Студентам (бакалаврам направления 230100 "Информатика и вычислительная техника») обеих групп предлагался один и тот же стандартный набор заданий, но студенты контрольной группы 1 не имели доступа к бордкастингу, выполняя задания традиционным путем (т.е. используя оффлайновые редакторы и среды программирования). По итогам эксперимента студенты экспериментальной группы 2 продемонстрировали более высокую скорость выполнения и более стабильные результаты в аспекте полноты выполнения заданий. Для оценки скорости выполнения были применены параллельно среда разработки (NetBeans в группе 1, Кодактор в группе 2) и тест в LMS Moodle (где содержится формулировка задания и фиксируется время выполнения). Пример результата оценки приведен в таблице 2.

Таблица 2.

Сравнение скоростей выполнения типовых квазипрофессиональных заданий (приведено время в минутах с округлением до целых).

Задание	Средняя скорость выполнения, мин
	(группа 1)	(группа 2)
Разметка и ее валидация	16	12
Создание    файла    стилей    и подключение его к разметке	4	1
Конструирование правила CSS для данного набора элементов	15	11
Подключение библиотеки jQuery и создание входной точки приложения	6	2
Создание файла сценария и подключение его к разметке	4	1
Создание обработчика события	10	3
Реализация циклического алгоритма над элементами DOM	14	5
Отладка фрагмента Javascript-кода с ошибкой	17	6

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

• •    МЭИОС развертывается на основе ЭУМК, включающего LMS;

• •    Электронный курс в LMS содержит ссылки на бордкастинг и вспомогательные ресурсы;

• •    Результаты выполнения заданий размещаются студентами на хостинге;

• •    Ссылки на эти результаты размещаются студентами в блогах.

В качестве LMS может быть выбрана любая современная система электронного обучения. В [10] автор описал с технической точки зрения процесс развертывания системы edX и интеграции на ее основе электронного УМК. Там же проанализирован эволюционный процесс миграции от широко распространенной LMS MOODLE к edX как более высокоуровневому решению.

Ниже рассматривается практическая реализация методики обучения студентов (и других категорий обучающихся) веб-программированию на языке Javascript с учетом вышеизложенной методологии.

Реализация онлайн-редактора бордкастинга

Как показано в [10] , в результате развития HTML5 и сопутствующих стандартов в любом современном браузере всю функциональность, типичную для современного мультимедийного интерактивного ЭОР можно реализовать на основе базовых языков и связанных с ними API (таблица 3).

Таблица 3.

Реализация функциональности ЭОР в HTML5/CSS/Javascript

Функциональность	Реализация
Встраивание мультимедиа	Теги HTML5 (audio, video)
Пространственный звук и эффекты	Web Audio API
Анимация	Свойства CSS3

Геометрические преобразования	Преобразования CSS3
Векторная декларативная графика	Язык SVG
Динамическая графика	Canvas
Трехмерная   графика,   виртуальные миры	WebGL
Сторонние приложения	Различные API (Dropbox)
Интерактивность	Javascript и библиотеки типа jQuery

Исходя из этого, а также из данных таблицы 1, инновационное средство обучения – онлайн-редактор кода с возможностью бордкастинга, то есть реализации управляемого «вещания» кода в Интернете, – создавалось прежде всего для работы с этими тремя языками. Инструмент получил название «Кодактор» и под этим именем был зарегистрирован в Роспатенте (Федеральной службе по интеллектуальной собственности, свидетельство №2014613612 от 01.04.2014). Адрес Кодактора в интернете – kodaktor.info.

Техническая реализация бордкастинга [10] зависит от платформы, на которой предполагается развертывать приложение. Технически бордкастинг – это просто чат, поэтому программно он может быть реализован двумя основными способами:

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

• •    Участники представляют собой равноправные хосты, вступающие в полнодуплексное взаимодействие на базе соответствующего протокола типа WebSocket; сервер инициирует обновления на клиентах, выступая одним из них.

Чтобы обеспечить настоящее полнодуплексное взаимодействие, нужна платформа наподобие node.js с такими библиотеками как sockjs или Socket.IO. Кодактор же развернут на экземпляре решения XAMPP (Apache, MySQL, PHP) на виртуальном облачном сервере, поэтому в его текущей версии взаимодействие организовано по первой схеме. Это означает, что информация в браузерах обучающихся обновляется на стороне клиента с некоторой периодичностью (например, раз в 3 секунды).

Веб-приложение Кодактор, построенное по модели Single Page Application (то есть имеющее одну фронтэнд-страницу в качестве интерфейса), используется для обучения веб-программированию в интеграции с другими решениями, включая облачные технологии, в совокупности образующими электронный учебнометодический комплекс ЭУМК [11, 12] (рис. 1).

Кодактор (приложение)

Подключаемые библиотеки >---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------1

Справочные ресурсы

Демонстрационные борды

Рис. 1. Концептуальная схема ЭУМК.

Компоненты этой структуры вполне допустимо использовать и по отдельности, однако для достижения совокупной цели, поставленной перед курсом типа «Веб-программирование», рационально применять ЭУМК как единое целое – с системами электронного обучения, системами контроля версий и управления проектами, инфраструктурами тестирования, сторонними библиотеками, а также с облачными ресурсами, скринкастами и видеолекциями, другими видами ЭОР.

Для удобства пользователей в приложении сохраняются работоспособными два интерфейса (в классическом стиле и в стиле Bootstrap). Интерфейс классического стиля основан на стандартных элементах управления базового HTML (Рис. 2):

Рис. 2. Классический интерфейс Кодактора.

Интерфейс стиля Bootstrap основан на использовании пиктограмм шрифта Awesome и элементов управления нового типа (HTML5).

Рис. 3. Интерфейс в стиле Bootstrap.

Методика организации деятельности обучающихся

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

Рис. 4. Примерная схема взаимодействия с помощью Кодактора.

После создания борда (в обоих вариантах интерфейса это кнопка в левом верхнем углу) ему присваивается уникальный ключ, под которым содержимое хранится в базе данных. Пример ключа: ba3ddb8. Содержимым борда может быть любой текст, включая разметку на языках HTML5, XHTML1, SVG, каскадные стили и сценарии. Студенты получают этот ключ (в виде текста по электронной почте, в виде QR-кода) и открывают в своих браузерах, после чего находятся в режиме приема вещания («Борд» или «F5») до тех пор, пока не отключат этот режим для внесения изменений в борд. Концепция «всё есть борд» предполагает хранение в виде борда дополнений к функциональности Кодактора (addons), альтернативных вариантов интерфейса (skins) и компонентов клиентских веб-приложений. Отметим, что создаваемые борды не зависят от географического положения студентов и преподавателя, могут быть импортированы из Кодактора в облачные диски или на локальный диск. Это позволяет организовать полностью мобильное учебное взаимодействие – т.е. развернуть МЭИОС.

Итак, для того, чтобы разработать простое клиентское приложение, использующее разметку на HTML5, подключенную таблицу стилей и сценарий на языке Javascript, необходимо создать три борда (таким образом, получив три ключа), вставить в один из бордов шаблонную HTML5-разметку (поддерживаются и производные шаблоны, например, на основе Bootstrap), в двух других, соответственно, создать код для стилей и сценария, а затем подключить их к основному борду с помощью тегов вида:

Тогда мы получим комплект из трех бордов:

- с разметкой;

- с каскадными стилями;

- со сценариям на Javascript

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

Если в кодакторе открыт борд с определенным ключом, то при создании нового борда он будет использован в качестве основы. Например: - борд с простым примером имитации тени за счет отрицательного отступа, - борд на его основе с примером реализации аналогичного эффекта за счет специального свойства каскадных стилей. В случае возникновения длинных ключей полезно использовать QR-коды, что особенно функционально для мобильных устройств. Коды для упомянутых выше двух примеров приведены на рис. 5.

Рис. 5. QR-коды для взаимосвязанных бордов.

В отличие от других подобных проектов (например, jsfiddle), Кодактор изначально ориентирован на обучение и разрабатывается как встраиваемое в МЭИОС образовательное приложение, являясь ЭОР. Это означает, что можно получить «локальную» копию Кодактора с библиотекой бордов-примеров в виде базы данных SQLite и интегрировать в существующую инфраструктуру. Библиотека бордов включает задания с инструкциями по их выполнению и образцы решений. Борды с ключами от 1 до 100 представляют собой типичные решения с использованием базовых технологий и API. Например, борд 5 демонстрирует встраивание в веб-страницу мультимедиа в форматах HTML5, а борд 3 содержит образец использования геолокационного API.

Борды могут образовывать кейсы-подборки, включающие формулировки заданий, инструкции по их выполнению, фрагменты для поиска ошибок и т.д. Интеграция бордов с другими технологиями позволяет получать интересные результаты – это веб-портфолио, облачные лабораторные работы, готовые группы для модульного тестирования [13] и др.

Тематика кейсов может быть самой широкой. Например, если цель включает изучение базовых алгоритмов на языке Javascript, в том числе при подготовке к государственной итоговой аттестации, полезно использовать борды с реализациями алгоритмов с применением «чистого Javascript» и различных библиотек (миграция к использованию библиотек является одной из лидирующих тенденций в вебразработке и, как следствие, в обучении веб-программированию). Так, борд содержит реализацию сортировки «пузырьком», а борд – реализацию его же с построением клиентского интерфейса с помощью jQuery. Преподаватель может внести в алгоритм ошибки или удалить часть алгоритма, поставив перед студентами задачу на основе такого борда создать борды с исправлением ошибок или дополнением недостающих фрагментов кода – это формат заданий C1 и C2 из ЕГЭ по информатике.

С другой стороны, базовый борд может содержать начало решения задачи по созданию пользовательского интерфейса, в то время как студентам предлагается продолжить это решение своими способами, после чего осуществляется совместное обсуждение предложенных вариантов решений. Таковы борды и , содержащие, соответственно, постановку задачи о создании микшера цветов из RGB-компонент и пример ее решения с помощью jQuery. На их основе создан борд с формулировкой задания: «В этом коде содержится ошибка. Из-за нее перетаскивание бегунков не изменяет фон страницы. Создайте новый борд с исправлением ошибки. Укажите номер строки с ошибкой.» и борд с примером выполнения задания студентом.

При решении подобных задач формируются компоненты компетенций, связанных с синтаксисом и семантикой языка, проверкой и отладкой программ, реализацией алгоритмических моделей и конструкций и стилей программирования, идиом, обработчиков событий, асинхронных взаимодействий, обработки данных в форматах JSON/XML, генерации элементов интерфейса пользователя, взаимодействий с различными API.

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

Заключение

В статье описан ЭУМК, включающий зарегистрированное в Роспатенте программное средство – онлайн-редактор кода (бордкастинга) на языках HTML, CSS, Javascript «Кодактор», – и пути развертывания на его основе МЭИОС. В настоящее время его функциональность расширяется: среди ближайших планов – возможность создания кейсов-подборок бордов с метаописаниями в личном кабинете, автоматическая генерация QR-кодов для вновь созданных бордов, а также более тесная интеграция с другими облачными сервисами и FTP-серверами. Из результатов экспериментального обучения можно сделать вывод о существенном повышении эффективности обучения веб-программированию при использовании бордкастинга.

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