Webscript.RU

Прислал: Andrew Sumin [ 19.06.2009 @ 01:11 ]
Раздел:: [ Веб-технологии ]

Как я уже говорил ( http://webscript.ru///www.quirksmode.org/blog/archives/2009/03/testing_mobile.html ), в данный момент я работаю в Vodafone над совместимостью мобильного браузера и виджетов W3C. Я обсуждал ( http://webscript.ru///www.quirksmode.org/blog/archives/2009/03/testing_mobile_1.html ) некоторые проблемы, связанные с мобильными браузерами, и вы можете заглянуть мне через плечо ( http://webscript.ru///www.quirksmode.org/m/ ), пока я анализирую странности их работы. Если вы хотите быть в курсе моих самых последних мобильных приключений, следите за мной на Твиттере ( http://webscript.ru///twitter.com/ppk ).

Пришло время поговорить о той части моей работы, что связана с виджетами W3C. Что же такое виджет, как его создать, зачем это делать и какие системы их поддерживают?

Лично я считаю, что виджеты — это будущее мобильного интернета. Они просты в разработке, основаны на открытых стандартах, здорово экономят трафик и многие люди по всему миру уже знают, как их создавать.

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

Что такое виджет?

По сути, виджет — это локальное веб-приложение, использующее HTML, CSS и JavaScript. Пользователь скачивает виджет на свой мобильный телефон, и получает веб-приложение, хранящееся локально в памяти телефона.

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

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

Многим веб-приложениям понадобится отображать свежие данные, поэтому большинство виджетов посылают Ajax-запрос сразу после запуска. Для этого необходимо Интернет-соединение и немного трафика.

Но, несмотря на это, тот факт, что приложение не надо скачивать каждый раз, значительно уменьшает объём трафика; и это важно по отношению к мобильным телефонам с их ненадёжным и подчас очень медленным Интернет-соединением.

Уникальные коммерческие преимущества

Сама по себе, концепция виджетов не отличается от бесчисленных моделей приложений, использующихся в iPhone, Android, Blackberry, Windows Mobile и многих других системах. Они так же сохраняют файлы приложения в память телефона, используя Интернет-соединение только для передачи данных.

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

Более того, в конце концов, виджеты станут соответствовать принципу «один раз написано — можно запускать везде», хоть сейчас это и не совсем так.

Технический обзор

Виджеты — это всего лишь архивированные веб-сайты. Вы создаёте HTML-файл, добавляете CSS, JavaScript и изображения, архивируете всё это в zip, меняете расширение на .wgt и вот, всё готово к работе. Так просто.

Ну, почти так просто. Остальная часть статьи объясняет эти «почти».

Спецификация

Виджеты описаны в спецификации виджетов W3C ( http://webscript.ru///www.w3.org/TR/widgets-apis/ ). В настоящее время она всё ещё находится на стадии разработки (медленной), как и многие спецификации W3C, однако основные положения довольно ясны.

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

Все технические детали я приведу для этой реализации Opera/Vodafone, которая не совсем соответствует текущему черновику стандарта. Тем не менее, всё работает — я сам проверял.

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

SDK для виджетов

К сожалению, в Маке есть проблема с архивированием. Я не уверен в деталях, но если вы будете использовать стандартное архивирование в Маке, ваш виджет не будет работать.

Чтобы решить эту и некоторые другие проблемы, Vodafone выпустила SDK для виджетов ( http://webscript.ru///www.betavine.net/bvportal/web/guest/widgetzone/research ). Хотя на сайте это явно не указано, SDK находится на стадии бета-версии и финальный релиз ожидается в течение этого года. Взгляните на него, если вы серьёзно намерены создавать виджеты.

SDK содержит специальную версию Vodafone Widget Manager, которая позволит отлаживать виджеты через Bluetooth в Opera Dragonfly. Этот процесс иногда становится запутанным, за техническими деталями обращайтесь к статье « Отладка мобильных виджетов с помощью Opera Dragonfly ( http://webscript.ru///blog.stefankolb.de/2009/04/13/debugging-mobile-widgets-with-opera-dragonfly/ )».

config.xml

Виджету требуется файл config.xml, который указывает некоторую конфигурационную информацию. Вот пример конфигурационного файла:

<widget id="//quirksmode.org/widget" dockable="true">

<widgetname>Test widget</widgetname>
<icon>pix/myIcon.gif</icon>
<width>200</width>
<height>200</height>

<security>
<access>
<host>quirksmode.org</host>
</access>
</security>

</widget>

Большинство из приведённого довольно просто для понимания. <width> и <height>, как и следовало ожидать, задают ширину и высоту виджета в пикселах.

Это начальные значения, если хотите, вы сможете впоследствии изменять размеры виджета обычными методами resizeTo() и resizeBy(). Однако, в любом случае, виджет не может быть больше экрана.

Тег <icon> указывает иконку, которую пользователь видит, когда виджет выключен, она, конечно же, должна быть локальным файлом.

Тег <widgetname> содержит название, которое будет отображено вместе с иконкой. Рекомендуется использовать короткие названия, поскольку в пристыкованном состоянии у виджета есть всего лишь около 60 пикселов для отображения названия. Некоторые телефоны автоматически прокручивают более длинные тексты, когда пользователь переводит фокус на иконку, но это не оптимальный способ.

Атрибут id необходим, если вы хотите иметь возможность обновлять виджет. Я вернусь к процессу обновлений позже, сейчас же важно сказать, что значением параметра должен быть уникальный URI.

Элемент <host> указывает, с какими адресами разрешено соединяться через Ajax-запросы. В виджетах не используется политика ограничения доступа, иначе они были бы бесполезны, поскольку не могли бы ниоткуда скачивать данные. Тем не менее, создатель виджета должен явно указывать домены, к которым виджет будет иметь доступ.

(К сожалению, Opera неожиданно изменила политику безопасности в Opera 10 Desktop. Приведённый выше код работает в Opera 9 и Widget Manager, но в Opera 10 он должен быть немного другим ( http://webscript.ru///my.opera.com/WebApplications/blog/2009/01/14/new-security-model-for-widgets-opera-10-and-network-public ).)

Пристыкованные виджеты

Виджеты имеют пристыкованное состояние, которое довольно похоже на свёрнутое состояние в десктопных приложениях, причём скрипты могут продолжать выполняться и в пристыкованном виджете, например чтобы в фоновом режиме обновлять данные для RSS-читалки.

Тем не менее, вам надо явно разрешить скриптам продолжать выполнение, добавив атрибут dockable="true" для тега <widget>. Иначе, виджет считает, что выполнять скрипты в пристыкованном состоянии не надо.

Пока виджет пристыкован, он всё ещё видим пользователю как иконка, хотя его область просмотра становится порядка 60x60 пикселов (и остаётся такой до тех пор, пока пользователь не отстыкует виджет).

Если хотите, вы можете предоставить пользователю особый интерфейс для пристыкованного состояния, например, специальную иконку. Для этого вам необходимо описать обработчик события widgetmodechange, который будет проверять, является ли текущее состояние widget.widgetMode равным docked, и если да — скрывать обычный интерфейс и показывать другой, оптимизированный для разрешения 60x60.

Объект widget и внешние ссылки

В среде виджетов к глобальному объекту JavaScript добавляется объект widget, содержащий такую полезную функциональность, как событие widgetmodechange и свойство widgetMode. Полный обзор вы можете найти в таблице совместимости виджетов ( http://webscript.ru///www.quirksmode.org/m/widgets.html ).

И наконец, обычные ссылки открываются не внутри виджета, а в стандартном браузере S60 WebKit (на мобильных телефонах) или в Opera (на десктопах). Я не понимаю, почему так должно быть. В конце концов, среда виджетов способна обработать HTTP-запросы и интерпретировать HTML, CSS и JavaScript.

Поддержка

Хотя я твёрдо верю в то, что со временем поддержка виджетов W3C будет становиться всё лучше и лучше, в настоящее время она всё ещё на начальной стадии.

Opera — главный поборник концепции виджетов, поэтому неудивительно, что Opera Desktop поддерживает их. Если вы создали файл .wgt на своём компьютере, двойной клик на нём запустит Opera, которая отобразит виджет в специальном режиме. Это полезно для тестирования.

Vodafone Widget Manager

На мобильных телефонах ситуация печальней. Vodafone Widget Manager, который работает только на телефонах с Symbian S60 (в основном, Nokia), поддерживает виджеты W3C, некоторые другие приложения и телефоны — тоже.

Vodafone Widget Manager (неожиданно!) был создан Vodafone для управления виджетами. Он содержит систему для их установки, равно как и полный движок Opera Mobile, используемый для интерпретирования HTML, CSS и JavaScript.

Между обычной Opera Mobile и Opera Widget Runtime есть некоторые небольшие различия. В моих таблицах ( http://webscript.ru///www.quirksmode.org/m/table.html ) эта специальная версия указана как «Opera VF WM» (для Vodafone Widget Manager).

Opera — довольно хороший браузер, поэтому вы можете быть полностью уверены, что ваши виджеты будут работать корректно, пока вы используете корректный HTML, CSS и JavaScript. С другой стороны, это новая, не оттестированная технология, поэтому неприятные сюрпризы могут поджидать вас в самый неподходящий момент разработки.

Opera/T-Mobile Widget Manager

Opera сообщала ( http://webscript.ru///dev.opera.com/articles/view/creating-t-mobile-widgets/ ) недавно о создании подобной системы для T-Mobile. Поскольку на всех скриншотах фигурирует только Windows Mobile, можно предполагать, что эта система работает (только лишь?) на этой операционной системе.

Странно, но когда я ищу «виджеты» на сайте T-Mobile, я получаю три страницы о других системах виджетов ( http://webscript.ru///www.t-mobile.de/suche?qt=widgets&vgn_form_encoding=ISO-8859-1 ) на немецком сайте, в то время как английский ( http://webscript.ru///www.t-mobile.co.uk/search/results/ ) и американский ( http://webscript.ru///search.t-mobile.com/inquiraapp/ui.jsp?ui_mode=question&question_box=widgets ) сайты выдают один, не связанный с запросом результат.

Интересно, что этот менеджер виджетов, по-видимому, имеет API для устройства. API устройства — это JavaScript-интерфейс, предназначенный для доступа к таким функциям телефона, как камера, календарь, список контактов и так далее. Очевидно, что API устройства чрезвычайно важны для создания виджетов, которые могут более тесно работать с функциями телефона.

Насколько я понимаю, сейчас API устройства Opera/T-Mobile закрыты (и, возможно, ограничены операционной системой Windows Mobile). Это не столь неожиданно, в настоящее время стандарты на API для устройств должна формулировать спецификация BONDI ( http://webscript.ru///bondi.omtp.org/apis/ ), но она ещё не готова, и, в любом случае, будет непонятна тем, кто не знает языка Java.

Несмотря на закрытость, я рад инициативе Opera/T-Mobile. Чем больше компаний поддержат виджеты, тем быстрее они станут широко распространёнными.

Nokia Web Runtime Widgets

Я думаю, что виджеты Vodafone могут быть портированы на Web Runtime Widgets ( http://webscript.ru///www.forum.nokia.com/Resources_and_Information/Explore/Web_Technologies/Web_Runtime/ ), нативную среду для виджетов в Nokia S60. Они так же являются виджетами на HTML/CSS/JavaScript, хотя запускаются в S60 WebKit и требуют XML-файл info.plist вместо config.xml.

Насколько я понимаю, чтобы сделать ваш виджет совместимым с Nokia, необходимо всего лишь добавить к нему info.plist и проверить работу в S60 WebKit. Я ещё не пробовал сделать это самостоятельно, поэтому могут возникнуть непредвиденные проблемы, которые усложнят задачу.

Кстати, «XML» в файле plist довольно странный. Кто-то пытался (тщетно) перевести пары имя/значение в XML. Схема основана на Apple’s Dashboard Widgets, так что, если вы с ней знакомы, то в этом вопросе у вас есть надо мной преимущество.

Palm Pre?

Возможно, виджеты будет поддерживать Palm Pre, который сделал веб-технологии краеугольным камнем своей операционной системы webOS ( http://webscript.ru///developer.palm.com/webos_book/book1.html ), но об этом ещё так мало сведений, что я не могу сказать ничего, кроме того, что виджеты были бы логичным продолжением их планов. Кстати, Palm Pre использует браузер из семейства WebKit.

Кроме того, я не уверен, где мы могли бы разрабатывать виджеты в настоящее время. Как бы то ни было, я советую вам тестировать ваши виджеты в WebKit (Safari или Chrome — наиболее очевидные кандидаты) вдобавок к Opera. Это устранит некоторые трудности в дальнейшем.

Наш список дел

В идеале, через несколько лет я, используя Android, смогу передать виджет своему другу на Nokia S60 или Windows Mobile HTC через Bluetooth (или как-нибудь ещё), и они будут просто работать, не заставляя меня или друзей заботиться о совместимости.

Вот было бы здорово! Как хорошо, когда нет проблем с совместимостью!

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

Однако, этот прекрасный новый мир не может зародиться сам по себе. Мы, как веб-разработчики, пользующиеся открытыми стандартами, созданы для этой работы. Мы должны распространять идеи совместимых со стандартами виджетов W3C. Если вы увидите мои выступления в этом году ( http://webscript.ru///www.quirksmode.org/about/conferences.html ), скорее всего я буду вести речь именно об этом.

Тем не менее, мы должны осторожно подчёркивать — виджеты нужны нам не вместо, а вместе с закрытыми системами, которые производители мобильных телефонов устанавливают в настоящее время.

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

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

Если бы я был марксистом, я бы сказал, что наша победа неизбежна, но, так как я не настолько ортодоксален, скажу, что, вероятно, нас ждёт успех.

Оригинал: « Введение в виджеты W3C ( http://webscript.ru///www.quirksmode.org/blog/archives/2009/04/introduction_to.html )».

Введение в виджеты W3C