Новое поколение инструментальных средств разработки мобильных HTML5-приложений. Intel XDK

18.2 Используемые технологии

Тройка HTML, CSS и Javascript уже давно вышла за пределы технологий для отображения содержимого web-страниц. Принципы простоты, модульности, совместимости и расширяемости, которые лежат в основе этих технологий, позволили им стать универсальными. Сегодня с их помощью можно:

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

Браузеры с поддержкой HTML, CSS и Javascript сегодня можно встретить в мобильных устройствах, телевизорах и даже некоторых холодильниках [47].

HTML, CSS и Javascript лежат в основе разработки мобильных приложений в среде Intel XDK.

18.2.1 HTML

HTML (Hypertext Markup Language), так называемый "язык разметки гипертекста", был разработан еще в конце 80-х годов прошлого века как язык для обмена научной и технической документацией [48]. Сегодня HTML - стандарт для оформления документов во Всемирной паутине. При разработке HTML-документа выполняется разметка текстового документа точно так же, как это делает редактор при помощи красного карандаша. Эти пометки служат для указания формы представления информации, содержащейся в документе: где будут заголовки, что выделить цветом или может подчеркнуть, а где будут находиться иллюстрации. Совокупность команд, которыми оперирует язык, называют тегами. Для просмотра HTML-документов, оформленных с использованием тегов, используются браузеры. Существует большое количество программ-браузеров, разработанных различными компаниями, каждый из которых имеет свои уникальные особенности.

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

Большинство браузеров поддерживает целый ряд новых элементов, созданных в HTML5 и API: новые элементы для организации более грамотной семантики и структурирования элементов документа, рисования и для медиа-контента. Среди них <header> и <footer>, регламентирующие заголовочный блок и "футер" подвал документа (секции), <nav> для работы с навигационное меню. Несомненным плюсом данного стандарта стало появление двух новых элементов для стандартного способа вставки аудио и видео файлов на web-страницу: это соответственно <audio> и <video> с рядом вспомогательных тегов для тонкой настройки параметров воспроизведения.

Один из самых интересных и функциональных тегов, появившихся в новом стандарте, - холст для рисования <canvas> для создания двумерных изображений и динамической анимации, осуществляемой с помощью языка JavaScript. Кроме того, элемент <figure> позволяет работать с отображением фотографий, иллюстраций, диаграмм и графиков, листингов кода и т.п.

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

В скором времени технология HTML5 будет признана консорциумом World Wide Web Consortium (W3C) новым стандартом HTML. С каждой новой версией все современные браузеры поддерживают все больше новых тегов. Не является исключением и ОС Android, которая отличается великолепной поддержкой почти всех новых возможностей.

18.2.2 CSS

Второе звено тройки технологий - CSS (Cascading Style Sheets, каскадные таблицы стилей) - набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид.

Возможность работы со стилями издавна включают в издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный заранее установленный вид. Эта же возможность реализована и для web-страниц: цвет, размеры текста и другие параметры хранятся в определенном месте и легко применяются к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML. "HTML-страница похожа на человека … если HTML задает "скелет" нашего человечка (страницы), то CSS позволяет задать цвет глаз, кожи, вид и форму одежды, и т.д." [49].

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

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

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

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

Еще одно свойство, которого ждали многие - возможность добавления скругленных углов. К каким только ухищрениям не прибегали, пытаясь реализовать одно из направлений WEB 2.0. С помощью нового CSS3 свойства border-radius это делается элементарно. CSS 3 сделал шаг и в сторону перемещения web-пространства в трехмерную среду, добавив возможность задания теней для текста и блочных элементов.

18.2.3 JavaScript

Наконец, третий в тройке универсальных технологий - JavaScript. Данный язык программирования зародился как сценарный язык программирования, применяемый для придания интерактивности web-страницам. Сценарий - это программа, которая вызывается из HTML-документа или непосредственно в него вложена и исполняется на компьютере-клиенте. Сценарии позволяли авторам дополнить HTML-документы динамически изменяемыми свойствами и интерактивными возможностями.

Результат конкурентной борьбы двух компаний-производителей браузеров JavaScript сегодня из узкоспециализированного языка сценариев браузера превратился в язык общего назначения. Так серверная программная платформа Node.js предоставляет возможность JavaScript взаимодействовать с устройствами ввода/вывода через свой API, подключать другие внешние библиотеки, написанные на разных языках, разрабатывать десктопные оконные приложения и даже программировать микроконтроллеры [50].

JavaScript позволяет:

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

Создание графического интерфейса средствами JavaScript гораздо проще, чем создание GUI для самого простого приложения, ведь работа с HTML, CSS или JavaScript гораздо проще, чем с C++, Objective-C или Java. Именно поэтому программирование веб-приложений привлекает все больше разработчиков.