Возможности использования html5 при создании элементов интерфейса обучающих систем Текст научной статьи по специальности «Компьютерные и информационные науки»

Возможности использования HTML5 при создании элементов интерфейса обучающих систем

Алексей Романович Гроцев,

Mg.sc.ing., докторант кафедры технологий разработки ПО,

Рижский Технический университет, ул. Межа, 1/3, г. Рига, LV-1048, Латвия, (371) 67089549 aleksejs. grocevs@rtu.lv

Владимир Николаевич Томко,

Mg.sc.ing., докторант кафедры технологий разработки ПО,

Рижский Технический университет, ул. Межа, 1/3, г. Рига, LV-1048, Латвия, (371) 67089571 vladimir.tomko@gmail.com

Аннотация

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

The paper studies the possibility of using HTML5 in development of user interface elements of e-learning systems. Popular existing practices of using HTML5 in user interface design are examined, some examples relevant to e-learning environments are presented.

Ключевые слова

э-обучение, пользовательский интерфейс, html5 e-learning, user interface, html5

Введение

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

[1]. Большое количество программного обеспечения, доступного ранее лишь для домашних и офисных стационарных систем стало привычным явлением в Интернете

[2]. Для огромного спектра современных задач, сегодня необходимо иметь лишь вебобозреватель и выход в Интернет. Серьезным шагом в этом направлении стало появления HTML5, технологии призванной сделать Интернет быстрее, проще и доступней для каждого, а так же, в связке с CSS3 призванной заменить Adobe Flash во многих ее нишах. Дополнительно к этому, HTML5 является единственным унифицированном разметочным языком полноценно работающим наравне с родными языками программирования большинства современных мобильных операционных систем, таких как Android, iOS, Windows Mobile, Blackberry and WebOS [3]. По исследованию проведенному компанией Chitika [4], к 25 маю 2010 года, 46% всех Интернет пользователей мира уже использовало веб-обозреватели поддерживающие HTML5 (рис. 1).

HTML5 Browser Compatibility - Total HTML5 Compatible Browsers

Chrome Safari 3+

Total 26% 24%

Total Compatible

Incompatible 46% Opera

54% 4%

'ч • Firefox 3.5+

46%

Chitika Chitika

Tumtng № гши mto prottti

Рис. 1. Результаты полученные компанией СЫйка в 2010 году, демонстрирующие готовность пользователей использовать HTML5

К 28 ноября 2011 года это число, на персональных не-мобильных

компьютерах, достигло точных 51,7% [5] (рис. 2.).

■ HTML5 - Yes

■ HTML5 - No

■ HTML5-Unknown

Рис. 2. Результаты полученные компанией NetMarketShare в 2011 году, демонстрирующие готовность пользователей использовать HTML5

Несмотря на то, что спецификация HTML5 еще целиком не готова и W3C планирует полностью ее выпустить лишь к 2022 году, большинство современных веб браузеров уже сегодня осуществляет качественную поддержку многих возможностей, описанных в вышедших модулях упомянутой спецификации. Этому способствует сама модульная структура спецификации, что в свою очередь позволяет производителям веб-обозревателей с каждой новой версией своих продуктов улучшать поддержку HTML5 и оказывать благоприятное влияние на растущую популярность этой технологии.

Данная технология может предоставить важные преимущества, способные оказать позитивное влияние на продукты сферы дистанционного обучения, особенно, если учесть тот факт, что в последнее время для веб-серфинга все чаще используются различные мобильные устройства, такие как современные сотовые телефоны и планшеты, доля рынка которых от общего числа всех веб-обозревателей в мире, по данным NetMarketShare, на апрель 2012 года, составляет 7,2% [6]. Серьезная часть этих мобильных браузеров так же поддерживает технологию HTML5, что даёт возможность использовать эти устройства в обучающем процессе [7, 8, 9, 10].

Помимо всего прочего, HTML5 позволяет сделать процесс э-обучения более интерактивным и современным, создавать компьютезированные системы обучения более универсальными и доступными, как для стационарных операционных систем, так и мобильных [11]. Такой подход помогает не отставать от последних тенденций и

4-1.9% 517%

L J

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

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

Шт5.

Использование элементов оформления

Плюсы которые может предоставить технология HTML5 в сфере электронного обучения не стоит недооценивать. Ниже следует список примеров, относящихся к разным областям электронного обучения, демонстрирующий выгодность использования HTML5 в соответствии с доступной на текущей момент спецификацией [13].

Пример: программа по изучению иностранного языка. Часто при изучении иностранного языка, помимо правильного написания слова, студенту так же необходимо знать его правильное звучание. Для этих целей, в информационном блоке с самим словом следует размещать аудио запись, притом необходимо позволять пользователю прослушивать ее в онлайн режиме, не скачивая себе на локальную машину. Используя HTML5 тег <audio> можно разместить встроенный аудио проигрыватель, предоставляемый самим веб-обозревателем, рядом со словом. Этот плеер сможет воспроизвести корректное звучание слова для студента.

Для внедрения возможности воспроизведения аудио-файлов HTML5 предоставляет тег <audio>, который отображает на странице небольшой аудиоплеер, способный обрабатывать .mp3, .wav и .ogg файлы. Для управления отображением доступны атрибуты, перечисленные в таблице 1.

Таблица 1.

Атрибуты тега <audio>

Атрибут Описание

controls Показывает или прячет кнопки управления проигрыванием

autoplay Начинает воспроизведение сразу после отображения браузером

loop Повторяет воспроизведение аудио-файла

src URL аудио-файла

preload Варианты значений для загрузки файла перед воспроизведением: none: не буферизировать файл заранее metadata: загружать метаданные из файла auto: загрузить весь файл до воспроизведения

Пример использования:

<audio src="lecture_02_04_part3.mp3" controls autoplay></audio>

Разные браузеры отображают управляющие элементы по-разному, так как это не определено в спецификации W3C (рис. 3). К моменту утверждения стандарта

разработчики браузеров обещают добавить возможность стилизации элементов управления с помощью CSS-стилей.

Рис. 3. Представления элементов управления тега <аи^о> в разных веб-обозревателях.

Пример: видео-курс по какому-либо предмету. Одним из самых

популярных методов электронного обучения на сей день является просмотр видео-курсов по интересующему студента предмету. Существуют целые библиотеки подобного материала и коммерческие компании специализирующиеся на предоставлении и распространении таких курсов (например, Lynda.com). Обычно онлайн просмотр видео файлов обеспечивается поддержкой технологии Adobe Flash [14, 15, 16], для использования которой необходимо установленное в вебобозревателе специальное расширение (т.н. плагин). С помощью HTML5 и тега <video> можно делать тоже самое, подгружая нужные файлы и указывая к ним путь напрямую. Тег <video> имеет дополнительные атрибуты, позволяя настроить то, как следует отображать видео, однако атрибуты controls, autoplay, loop, src и preload семантически равносильны таким же атрибутам тега <audio>. Дополнительные возможные атрибуты тега перечислены в таблице 2:

Таблица 2.

Атрибуты тега <video>

Атрибут Описание

width Ширина видео-фрагмента

height Высота видео-фрагмента

poster Адрес картинки, которая будет показываться до начала воспроизведения видео файла

В текущей версии стандарта не указано, какие кодеки (программы, способные выполнять преобразование данных или сигнала) браузеры обязаны поддерживать, поэтому реальная реализация их поддержки разнится от разработчика к разработчику. Все современные веб-обозреватели могут воспроизводить видео как минимум в двух форматах - Ogg ^еога и \Р8. Поддержка кодека Н.264 в некоторых браузерах является дискутируемым вопросом в связи с политикой лицензирования, но в случае необходимости его можно поставить как отдельный пакет [17, 18].

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

обезопасить подход к стратегическому объекту так, чтобы вражеские войска попадали под оптимальный обстрел и не смогли эвакуировать объект (рис. 4).

Рис. 4. Пример тактического расположения боевых единиц в HTML5 игре “Pirates love daisies”

Для подобных целей хорошо подойдет HTML5 тег <canvas>. Сам по себе тег задает в веб странице определенное место, в рамках которого возможно интерактивное общение пользователя с объектами расположенными внутри. Посредством такого общения можно создавать полноценный инструментарий для самого разного рода задач, например графический редактор, как это сделала компания Mudcu (рис. 5.). Обычно все взаимодействие осуществляется связкой технологий HTML5, CSS3 и JavaScript.

Рис. 5. Веб приложение Sketchpad созданное на базе HTML5, CSS3, JavaScript

Тег <canvas> не предоставляет возможности рисовать графические элементы на нем с помощью его атрибутов, для этого используется JavaScript. Есть несколько групп возможностей взаимодействия с элементом:

• цвет и стиль - с их помощью задаются цвета рамок/заполнения, окончаний линий, теней и прочих элементов;

Б7Б

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

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

• текст - добавление на канву текста определенного размера и шрифта;

• рисунки и работа с пикселями - загрузка внешних рисунков в объект канвы и снятие слепка области пикселей из нее;

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

Пример: задачи тестового/анкетного типа. Большинство предметов могут иметь тестовые задания, выполнение которых предусмотрено после прохождения каждой главы или какого-то определенного объема материала. В задачах тестового типа обычно встречаются вопросы отвечать на которые нужно или выбирая что-то из предоставляемого списка решений или самостоятельно вписывая (вводя) ответ в указанное поле. Реализовать подобные тесты можно и без использования HTML5, но использование этой технологии облегчает процесс создания таких тестов, а так же улучшает их юзабилити (пользуемость) и расширяет их возможности.

Ввод информации производится посредством тега <input>, который на самой веб странице отображается как обычное, пустое поле. Для того, чтобы указать пользователю, что нужно вводить в отдельное определенное поле, ранее, посредством JavaScipt, в поле добавлялся временный текст, который исчезал при нажатии на поле курсором мышки. В HTML5 для этой цели появился отдельный атрибут тега <input> - placeholder.

Для ускорения начала выполнения теста (что может быть актуально в тестах на время), у тега <input> имеется атрибут autofocus, который при загрузке страницы автоматически переводит текстовую каретку в нужное поле, чтобы пользователь мог тут же начинать вводить свой ответ.

В коде страницы указать на текст-заглушку в <input>-поле можно используя следующий HTML-код:

<label for="first_name">First Name</label> : <input id="first_name" placeholder="First name goes here">

При использовании данного фрагмента не только появляется текст-заглушка “Введите ваше имя” в поле для ввода, но так же ярлык “Имя” становится кликабельным и передает фокус ввода полю при нажатии на него. На рисунке 6 показаны внешние изменения простого поля для ввода - текст-заглушка. В браузерах, которые поддерживают данное HTML5-свойство, он по умолчанию выделяется светло-серым цветом. В устаревших веб-обозревателях на месте заглушки ничего не показывается, но базовая работоспособность поля для ввода сохраняется.

First Name : First name goes here

Рис. б. Поле для ввода с использованием текста-заглушки

Атрибут <input> тега required отвечает за поддержку обязательных полей для заполнения. Его применение может быть полезно при выполнении студентом большого теста, где на сервер отсылается вся форма сразу и у пользователя, имеется серьезный шанс забыть заполнить какое-то поле. В таком случае, веб-обозреватель сообщит пользователю о том, что он забыл заполнить какое-то важное поле, перед тем, как разрешить отослать ему весь тест на сервер (рис. 7).

Б76

Рис. 7. Сообщение о том, что пользователь забыл заполнить обязательное поле

Атрибут тега <input> - datalist. Выдает список возможных значений в поле, при нажатии клавиши “наверх” или “вниз”. Первый вводимый в поле символ осуществляет фильтрацию значений по этой букве. Данный атрибут может быть полезен в случае как усложненный вариант самостоятельного вписывания решения задачи (текстом), для осуществления проверки на правописание. Отличие данного подхода от использования готовых решений на базе AJAX, когда данные при вводе пользователем подгружаются с сервера в том, что весь список уже заранее подготовлен (скачан) и поиск ведется без использования сетевого подключения. Фильтры такого рода удобно использовать для быстрого выбора нужного государства из большого списка доступных стран (рис. 8) или другого множества данных.

Рис. 8. Автоматическая фильтрация стран по первым буквам вводимого

названия

Атрибуты тега <input> - email, website, phone являются помощниками для мобильных устройств, где, в зависимости от данной пометки, телефоны могут автоматически выбрать специальную раскладку клавиатуры, предназначенную для облегчения ввода данных именно запрашиваемого формата (рис. 9).

Рис. 9. Автоматическая смена раскладок клавиатуры в зависимости от типа

поля в Safari, Apple iOS

Атрибут тега <input> - range позволяет пользователю, посредством двигаемого ползунка выбирать нужное ему значение в заданных пределах. Данный элемент может быть использован в обучающих задачках для детей, где провоцируя движение таких ползунков можно объяснять принципы простой арифметики на графических примерах. Так же как и в случае с элементами управления аудиопроигрывателя, различные веб обозреватели по разному отображают данный элемент интерфейса (рис. 10).

Рис. 10. Отображение элемента “range” в разных браузерах

Атрибут тега <input> - number позволяет создавать поля, куда нужно вводить только числовые значения, а так же предоставляет подсказку мобильным устройствам, какую клавиатуру необходимо показывать пользователю (так же как и в примере <input type="phone">). Помимо базовой функциональности ввода с клавиатуры имеется возможность вводить нужные цифры с помощью дополнительных кнопок справа от поля ввода (рис. 11)

Number of user license

12

L±J

Q

Рис. ll. Отображение поля типа “number”

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

Таблица 3.

Атрибуты тега <input type="number">

Атрибут Описание

value Значение по умолчанию

min Минимальное значение, которое может ввести пользователь

max Максимальное значение, которое может ввести пользователь

step Шаг увеличения значения

Атрибут тега <input> - date позволяет выводить в поле графический интерфейс календаря, который может разрешать пользователю выбирать как произвольную или четко фиксированную дату, так и неделю или месяц целиком. Этот параметр может быть полезен для применения в разного рода тестах, особенно по истории, где часто нужно знать и указывать даты тех или иных важных событий.

Атрибут тега <input> - color разрешает посредством поля вручную выбирать какой-либо цвет. В дальнейшем шестнадцатеричное значение выбранного цвета может быть передано в другое поле. Этот параметр может быть использован в программах для обучения маленьких детей различению цветов и для решения цветовых задачек. При использовании данного элемента браузер показывает небольшое выпадающее меню с базовыми цветами, однако, при нажатии на кнопку “Other...” вызывается стандартный диалог выбора цветов операционной системы, где можно задать любой цвет (рис. 12).

Choose a color for background : В

*ff0000

|__________Other...________J

Рис. 12. Выбор цвета с использованием стандартных возможностей веб обозревателя Opera

Не все браузеры поддерживают как перечисленные в этой статье так и другие возможности, однако последние версии популярных браузеров, таких как Opera, Internet Explorer, Mozilla Firefox и Google Chrome имеют либо начальную, либо уже значительно развитую поддержку стандарта HTML5. Сравнение их возможностей в зависимости от типа браузера дано в таблице 4:

Таблица 4.

Поддержка возможностей HTML5 в современных браузерах

Браузер IE Firefox Opera Chrome Общий % поддержки

Версия 6 7 8 9 11 12 18

Touch Нет Нет Нет Нет Нет Нет Нет 5%

WebSockets Нет Нет Нет Нет Да Нет Да 42%

WebSQL Database Нет Нет Нет Нет Нет Да Да 46%

History Management Нет Нет Нет Нет Да Да Да 61%

Workers Нет Нет Нет Нет Да Да Да 81%

Offline Applications Нет Нет Нет Нет Да Да Да 84%

GeoLocation Нет Нет Нет Да Да Да Да 87%

Hash Change (Event) Нет Нет Да Да Да Да Да 92%

Query Selector Нет Нет Да Да Да Да Да 93%

Local Storage Нет Нет Да Да Да Да Да 94%

Drag and Drop Да Да Да Да Да Нет Да 94%

Session Storage Нет Нет Да Да Да Да Да 95%

Post Message Нет Нет Да Да Да Да Да 96%

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

Заключение

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

Популяризацией HTML5 занимаются ведущие IT компании мира, такие как Apple, Google, Facebook, Twitter, и Microsoft. Даже корпорация Adobe недавно заявила о прекращении поддержки технологии Adobe Flash для мобильных устройств и операционных систем на базе GNU/Linux и более активном участии в развитии HTML5 [19]. Преимущества такой поддержки очевидны — они понижают риски вкладывания времени и денежных средств необходимых для полноценного перехода на HTML5 в веб-приложениях и системах предназначенных для дистанционного обучения с возможностью хранения локальных данных пользователей [20, 21].

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

Тема использования HTML5 в системах электронного обучения является предметом дальнейших исследований авторов этой статьи.

Литература

1. Ожидает ли рынок браузерных игр изменений в ближайшем будущем? иЯЬ: http://rabota.ua/Info/Employer/post/2012/02/29/rynok_brauzernyh_igr.aspx (дата обращения: 20.04.2012)

2. Clarke A., Hardboiled Web Design. - Five Simple Steps, 2010. - 400 p.

12

3. Google I/O 2011: HTML5 versus Android: Apps or Web for Mobile

Development? [Online]. URL:

http://www.youtube.com/watch?v=4f2Zky_YyyQ (дата обращения:

20.04.2012)

4. How Many Web Surfers are Ready for HTML5? j Chitika Insights URL: http://insights.chitika.com/2010/html5-compatibility/ (дата обращения: 20.04.2012)

5. Доля рынка браузеров поддерживающих HTML5 на 28.11.2011 URL: http://www.streaminglearningcenter.com/articles/stat-of-the-week-html5-desktop-market-share-at-581-max.html (дата обращения: 20.04.2012)

6. Доля рынка мобильных устройств URL:

http://www.netmarketshare.com/ (дата обращения: 20.04.2012)

7. The How & Why of iPads, HTML5 & Mobile Devices in eLearning,

Training & Education URL:

http://blogs.adobe.com/captivate/2011/11/the-how-why-of-ipads-html5-mobile-devices-in-elearning-training-education.html (дата обращения:

20.04.2012)

8. Marc J. Rosenberg, E-Learning: Strategies for Delivering Knowledge in the Digital Age, McGraw-Hill, October 26, 2000, 344 с.

9. William Horton, e-Learning by Design, Pfeiffer; 2 edition, October 11,

2011, 640 с.

10. Ruth C. Clark, Richard E. Mayer, e-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning (Essential Knowledge Resource), Pfeiffer; 3 edition, August 16, 2011, 528 с.

11. HTML5 Examples - Interactive graphics, infographics and interactivity :: E-learning Examples URL: http://elearningexamples.com/examples/interactive-graphics/html-interactive-graphics/ (дата обращения: 20.04.2012)

12. The Evolution of Western Dance Music! URL: http://www.thomson.co.uk/blog/wp-content/uploads/infographic/interactive-music-map/index.html (дата обращения:

20.04.2012)

13. All Standards and Drafts - W3C URL: http://www.w3.org/TR/ (дата обращения: 20.04.2012)

14. Зайцева Л. В., Томко В. Н. Проблемы визуального дизайна систем электронного обучения // Международный электронный журнал "Образовательные технологии и общество" - 2010. - V13. - №1.- C. 335 - 347.- ISSN 1436-4522. URL: http://ifets.ieee.org/russian/periodical/journal.html

15. Зайцева Л.В. Технология разработки адаптивных электронных учебных курсов для компьютерных систем обучения // Международный электронный журнал "Образовательные технологии и общество" - 2008. - V11. - № 1. - C. 400 - 412. -ISSN 1436-4522. URL: http://ifets.ieee.org/russian/periodical/journal.html

16. Adobe stops flash mobile, goes HTML5. URL:

http://blogs.adobe.com/conversations/2011/11/flash-focus.html (дата

обращения: 20.04.2012)

17. HTML5 Video URL: http://www.w3schools.com/html5/html5_video.asp (дата обращения: 20.04.2012)

18. Pfeiffer S., The Definitive Guide to HTML5 Video (Expert's Voice in Web Development). - Apress, 2010. - 336 p.

19. HTML updates in Adobe AIR 3 URL:

http://www.adobe.com/devnet/air/ajax/articles/air_and_webkit.html (дата

обращения: 20.04.2012)

20. Introduction to HTML5 Web Storage URL: http://sixrevisions.com/html/introduction-web-storage/ (дата обращения: 20.04.2012)

21. Mobile HTML 5. URL: http://mobilehtml5.org/ (дата обращения:

20.04.2012)