CC BY
20
HTML5 в системе подготовки бакалавров педагогического образования (информатика)
Д.А. Грамаков, Московский государственный областной университет, профессор, gramakov@gmail. com
Современный мир быстро меняется. Важную роль в этих изменениях играют информационные и коммуникационные технологии. Вклад в эти изменения вносят самые разные составляющие мира ИКТ. Если еще несколько лет назад основными устройствами, используемыми в этом мире, являлись персональные компьютеры. Сегодня форм-фактор устройств используемых в ИКТ стал самым широким. Смартфоны, планшеты, нетбуки - это те устройства, которые меняют современный мир, делая информационные технологии более доступными современным пользователям. По прогнозу Gartner, при менее 20 млн планшетов, проданных в мире в 2010 г., в 2016 г. их будет продано 900 млн шт. — т. е. их купит каждый восьмой житель планеты. К 2014 г. число эксплуатируемых вычислительных устройств на базе мобильных ОС, таких как Apple iOS, Google Android и Microsoft Windows 8, превысит всю установленную базу стандартных ПК. Новые устройства делают мир информационных и коммуникационных технологий более мобильным, обеспечивая самую широкую доступность различной информации. Использование мобильных устройств не возможно без самого широкого использования веб-технологий. Здесь также наметилась важная тенденция. Самое широкое использование нового стандарта HTML5. Важность этого стандарта в современном мире уже ни у кого не вызывает сомнения. Он получил самую широкую поддержку в современных браузерах, которые за последние годы стали программами, которые в своем функционировании учитывают последние достижения в области аппаратного обеспечения: многоядерная архитектура, графические чипсеты, сенсоры и различные медийные устройства ввода. Браузеры учитывают и последние тенденции в развитии программного обеспечения: облачные вычисления, социальные сервисы, мобильность.
Важность этого стандарта определяется еще и тем, что он определяет новые подходы к созданию веб-приложений. Веб-приложения составляют важнейшую часть современного программного обеспечения. HTML5 позволяет создавать веб-приложения для мобильных устройств. Обычно такие приложения создаются с использованием некоторого языка программирования, используемого той или иной операционной системой. Для операционной системы iOS, таким языком является Objective-C, для операционной системы Android - это язык программи-
рования Java. Для операционной системы Windows Phone 7 в качестве языков программирования используются языки C# и Visual Basic. Однако использование HTML5, CSS3 и JavaScript позволяет создавать для всех этих операционных систем богатые интернет приложения (Rich Internet Application). HTML5 будет использоваться и при создании различных приложений для новой операционной системы Windows 8 компании Microsoft. В этой операционной системе будет две возможности создания приложений. Первая возможность предполагает использование традиционных для операционной системы Windows языков: C#, C++ и Visual Basic. Вторая возможность предполагает использование языка JavaScript и новых возможностей языка HTML вместе с каскадными таблицами стилей. Все вышесказанное и определило необходимость создания специального курса по изучению HTML5. Данный курс читается на физико-математическом факультете Московского государственного областного университета. Он должен подготовить будущих бакалавров педагогического образования (информатика) к профессиональной деятельности в мире новых веб-технологий.
Разработанный курс «Введение в современное веб-программирование», включает следующие разделы:
Исторические предпосылки появления HTML5.
HTML5 = HTML + CSS + JavaScript.
Взгляд на HTML до появления HTML5.
Семантические изменения в HTML5.
Основы CSS3.
Основы рисования в браузере.
Видео и звук в HTML5.
Основы геопозицирования.
Работа с формами в HTML5.
Технология Web Storage.
Разработка автономных Web-приложений.
Будущее развитие HTML5.
Общие положения курса.
Разработанный курс направлен на формирование правильных понятий, связанных с использованием HTML. В литературе, которая публиковалась до появления HTML5, а также выходит сейчас, очень часто центральным понятием, используемым при описании языка HTML, является тег. С нашей точки зрения, это не совсем правильно, так как тег -это одна из составляющих более общего понятия «элемент». Понятие элемента является центральным в описаниях спецификаций языков HTML 4.01, XHTML 1.0 и XHTML 1.1, а также в спецификации языка XML, который является метаязыком, позволяющим создавать конкретные языки разметки для различных областей знаний. Создание таких
языков, прежде всего, это формирование тех типов данных (элементов) которые составляют основу в описываемой области знаний. Тег - это имя типа элемента. Каждое использование типа элемента обычно включает три части: открывающий тег и атрибуты, содержимое и закрывающий тег. Используются также элементы, содержащие только открывающий тег. Вышеописанные спецификации являются описаниями различных типов элементов, которые могут использоваться при создании Web-документов. Расширение языка HTML в новой спецификации HTML5, например, включает добавление новых типов элементов, описывающих те части семантической разметки документа, которые ранее не были описаны. Например, элемент header - предназначен для описания верхней части страницы или ее секции (аналогия с верхним колонтитулом), элемент footer - описывает нижнюю часть страницы или ее секции (нижний колонтитул), элемент section - предназначен для описания секции Web-страницы и т.д. Элементы, используемые в современных веб-страницах - это не просто одни теги, а определенное количество атрибутов, которые допустимы для каждого элемента. При этом, есть достаточно большое количество атрибутов, которые являются общими для всех типов элементов. Например, id - позволяет программно управлять элементом, используя язык программирования JavaScript. Здесь возникает второй нюанс использования понятия «элемент» вместо понятия «тег». Когда в веб-документе, используется тот или иной элемент, то тег этого элемента говорит только о том, как браузер должен интерпретировать данный элемент. Программно с помощью языка JavaScript или с помощью каскадных таблиц стилей (CSS) можно выполнить какие-либо действия над элементом, но нельзя выполнять действия над тегом элемента или управлять тегом. Ведь тег - это имя элемента заключенное в следующие знаки < и >. Если быть терминологически корректным, то действия выполняются над содержимым элемента, которое находится между открывающим и закрывающим тегами, или тем содержимым, на который указывает соответствующий атрибут в элементе. Необходимо, также отметить, что в предметном указателе спецификации HTML 4.01 отсутствует даже упоминание о таком понятии как «тег». Понятие «элемент» позволяет лучше понимать структуру и особенности языков разметки, производных от языка XML. Например, язык XAML - декларативный язык разметки. В модели программирования .NET Framework язык XAML упрощает создание пользовательского интерфейса для приложения .NET Framework. Он позволяет создать видимые элементы пользовательского интерфейса в декларативной разметке XAML. Этот язык обеспечивает такой процесс проектирования приложения, когда разработка пользовательского интерфейса и бизнес
логика приложения могут разрабатываться различными средствами проектирования и различными людьми.
Второй важный вопрос при изложении курса - запись имен элементов и их атрибутов. Согласно спецификации HTML 4.01 имена элементов и атрибуты не зависят от регистра. Очень часто в литературе имена элементов записываются прописными буквами, а имена атрибутов строчными. Спецификация XML 1.0, а также спецификации XHTML 1.0 и XHTML 1.1, используют более строгий подход, когда имена элементов и их атрибутов записываются строчными символами, а значения атрибутов записываются, так как они определены в спецификации или строчными символами и обязательно заключенными в кавычки. Подход характерный для XML-подобных языков разметки и используется при представлении учебных материалов по курсу.
Возможны два подхода по изучению материалов данного курса. Первый предполагает предварительное знакомство с языком программирования JavaScript, что и применялось нами. Студенты ранее уже прослушали курс программирования с использованием языка JavaScript. Второй вариант должен включать изучение основ языка программирования JavaScript внутри данного курса.
Содержание курса
Первая лекция посвящена историческим предпосылкам появления HTML5. Почему это важно? У студентов необходимо сформировать понимание того, что HTML5 это не просто следующая спецификация языка HTML, а спецификация, описывающая больше чем 100 технических характеристик, которые касаются следующего поколения веб-технологий. Спецификация, которая будет предоставлять новые функциональные возможности, необходимые современным веб-приложениям. Кроме того, она будет регламентировать многие функции, уже используемые в веб-разработке, но которые еще не стандартизовались. Студенты должны знать различные подходы, которые предлагали консорциум WWW и рабочая группа WHAT (Web Hypertext Applications Technology Working Group - WHATWG). Понимание этих различий позволяет увидеть особенности и важность тех нововведение, которые уже предлагаются, и которые еще будут разрабатываться и предлагаться. Они должны знать о четырех новых принципах используемых в разработке спецификации: совместимость, удобство в использовании, независимость от типа браузера и универсальность доступа.
Важнейший тезис, который проходит через весь курс, можно сформулировать в следующей формуле:
HTML5 = HTML + CSS + JavaScript
Эта формула показывает, что язык HTML5 должен рассматривать как обобщенное понятие, описывающее новые возможности языка
HTML, сформулированные в новой спецификации, которая пока находится в стадии рабочего документа. К HTML должны применяться новые возможности, реализуемые в спецификации CSS3, которая вводит селекторы для отображения как старых, так и новых элементов HTML, обеспечивая красивый внешний вид веб-документов. Данная спецификация уже является стандартом, и этот стандарт находит все более широкую поддержку ведущими браузерами (Internet Explorer, Firefox, Google Chrome, Opera и Apple Safari). Эти браузеры поддерживают пятую версию стандарта ECMAScipt, утвержденного в конце 2009 года организацией ECMA. Язык JavaScript, построенный на основе этого стандарта, добавляет новый поведенческий уровень, оживляя веб-документы, и позволяет создавать богатые интернет приложения (RIA).
В виду того, что студенты имеют различный уровень знаний языка HTML, а по ГОС педагогического образования (информатика), он не изучается, начальная лекция и первые лабораторные работы, знакомят их основными элементами, составляющими основу HTML 4.01. Но эти элементы используются в структуре документа, которая присуща HTML5, т.е. используются новые объявления типа документа
<! DOCTYPE html>
и кодировки. Студентам объясняется важность указания типа документа в начале документа. Все браузеры могут интерпретировать документы и без указания типа документа, но затрачивая определенное время на предварительный анализ документа. Указание типа документа, позволяет браузеру без предварительного анализа документа, включить правильное направление интерпретации документа и построить дерево DOM (объектная модель документа) быстрее.
В дальнейшем студенты знакомятся с семантической разметкой, позволяющей разбивать документы на отдельные части. Эта разметка имеет сходство, с разметкой, которая применяет для документов, создаваемых текстовыми редакторами, типа Microsoft Word. К этим элементам относятся: <section>, <nav>, <article> <aside>, <hgroup>, <header>, <footer>, <mark>.
В виду того, что большинство студентов мало знакомы с каскадными таблицами стилей (CSS). Этой технологии посвящаются две лекции и три лабораторные работы, которые позволяют сформировать базовые знания по CSS. При изучении дальнейших разделов курса эти знания широко используются.
Раздел курса, посвященный изучения элемента <canvas>, позволяет показать широкие возможности, которые предоставляет полотно для изменения внешнего вида веб-приложения. В качестве курсовой работы многие студенты выбирают создание простейшего игрового или учеб-
ного приложения с использование элемента <canvas>. Этот раздел служит, хорошим примером использования CSS3 и Canvas API.
В следующем разделе курса студенты знакомятся с двумя очень важными элементами HTML5: <audio> и <video>. Раньше также имелась возможность подключать аудио и видео к веб-документа. Для этого использовалось достаточно сложное подключение с использованием элемента <object>. Новый подход облегчил это подключение и обеспечил возможность использования звука и видео без помощи подключаемых модулей. Студенты знакомятся с кодеками звука и видео, особенностями поддержки их в различных браузерах. Они также изучают возможность управления аудио- и видео-содержимым программным путем с использованием встроенных функций и применением программных интерфейсов HTML5 Audio и Video в различных веб-приложениях.
В разделе курса посвященного геолокации, изучается программный интерфейс HTML5 Geolocation. Студенты узнают, из каких элементов формируется информация о местоположении (широта, долгота) и как получить геолокационную информацию, использую различные подходы. В этом разделе курса, они знакомятся с уже готовыми приложениями использующими Geolocation API.
Знакомство с формами, начинается с обзора тех возможностей, которые предоставляет спецификация HTML 4.01. Ведь формы являются важнейшими элементами веб-страницы обеспечивающими интерактивное взаимодействие с пользователем. Без использования форм трудно представить современный Интернет, ведь благодаря им, функционируют интернет-магазины, социальные сети, происходит поиск информации. Студенты получают представлением о новых элементах, атрибутах и функциях появившихся в спецификации HTML5. Несмотря на то, что эта часть спецификации находится еще в стадии бурного развития, полученные знания по данному разделу позволяют сформировать путь использования уже готовых элементов и тех, которые должны появиться позднее. Путь, выбранный консорциумом WWW при использовании форм, основам на использовании элемента <form> в качестве контейнера, в котором располагаются все остальные элементы, как новые, так старые. Часть студентов курса выбрали использование форм в веб-приложениях в качестве курсовой работы.
Знакомство с HTML5 Web Storage начинается с рассмотрения с предшествующей технологии cookie, обеспечивающей обмен небольшими порциями данных в виде текста между сервером и клиентом. Сохраняемые в файлах «cookie» данные используются серверами для запоминания информации о конкретных пользователях, которые просматривали веб-документы на данном сервере. Далее изучается подход, который реализуется с использованием Web Storage. Этот подход сохра-
няет локальные копии данных при переходах между вкладками или окнами и при закрытии и повторном открытии браузера. В отличии от cookie-файлов эти данные никогда не передаются на удаленный сервер, за исключением случаев, когда пользователь сам отправляет их. Изучение технологии Web Storage строится на знакомстве с текстами уже разработанных приложений.
В разделе посвященной разработке автономных веб-приложений, студенты строят приложения, позволяющие использовать их при отсутствии подключения к Интернету. Для этого используется файл манифеста, представляющий собой текстовый файл, содержащий список всех ресурсов, которые могут понадобиться веб-приложению в течении того времени, когда отсутствует сетевое подключение.
Раздел посвященный будущему HTML5 содержит обзор возможностей, которые реализованы или будут реализоваться в браузерах. Сюда относятся трехмерная графика, реализуемая в программном интерфейсе WebGL, программные интерфейсы для работы со звуком и др.
Данный курс предполагает применение наиболее широко используемых браузеров. В большинстве случаев созданные веб-приложения, запускались в двух или трех браузерах, чтобы можно было видеть особенности реализации HTML5.
При обучении широко использовались материалы о новых возможностях HTML5, размещенные на веб-серверах, в частности: www.htmlgoodies.com/html5,www.w3schools.com,www.w3.org.
По итогам чтения курса предполагается издание учебного пособия.
Литература
1. Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений. : Пер. с анг. - М. : ООО "И.Д. Вильямс", 2011. - 272 c.: ил.
2. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста. - СПб.: Питер, 2011. - 272 с. ил.
