Виджеты: интернет-проект за пределами сайта

Глеб Белогорцев (РБК)

Введение Виджет - это небольшой, лёгкий в установке и использовании программный модуль, требующий для своей работы некоторой среды (т.н. «движка», widget engine) и исполняющий, как правило, одну определённую функцию.

В чем прелесть виджетовДля пользователей:

• Новые возможности• Украшение рабочего стола и сайта

Для владельцев интернет-проектов:• Распространение влияния за пределы сайта• Новые посетители, повышение лояльности старых

Обзор платформ для виджетов

Виджеты

Для веба Для рабочего стола Мобильные

Виджеты для веба

ВКонтактеТехнологии: Flash.

Популярность: у самого популярного более 8 млн. участников, меньше года назад было 3 млн.

МойМир@Mail.RuТехнологии: Flash, iframe (HTML, JS, Silverlight и т.д.)

Популярность: У самого популярного приложения 3 с лишним млн. пользователей.

LiveJournalТехнологии: HTML, Flash, не разрешён JavaScript

Стартовые страницы

iGoogle

Технологии: XML, JavaScript. Есть поддержка OpenSocial.

Мой Rambler (Netvibes)Технологии: XHTML, JavaScript, используется движок http://netvibes.com

Open source: http://netvibes.org

Виджеты ЯндексаТехнологии: XHTML, JavaScript

Виджеты для рабочего стола

Yahoo! Widgets

Самый популярный русский виджет, который я нашёл, имеет 31 000 загрузок.

Гаджеты Windows 7/VistaБлагодаря распространенности ОС, имеют большие перспективы.

Наиболее популярный русский гаджет имеет 1 млн. загрузок

Примеры:

Виджеты OperaУ самого популярного русского, который я нашёл, 2700 загрузок за последнюю неделю

Для мобильных телефонов

Samsung – уже можно разрабатывать.

LG – есть SDK и эмулятор, но устанавливать в телефон ещё нельзя.

Своя технология есть у Nokia.

Для телевизоров

Yahoo! Widgets под конец подались в ТВ.

Телевизоры с виджетами делают Sony, Samsung и Panasonic.

Особенности проектирования и разработки виджетов

Основные составные части• Серверная

• Функциональное «ядро»

• Хранилище данных виджета

• Система загрузки обновлений

• Система сбора статистики

Как добиться максимальной степени кроссплатформанности

Проблема: у всех платформ разные API, требования к разметке и описанию приложения.

Задача: облегчить написание версий одного виджета для разных платформ

Способ №1 Ядро (Flash)

«Обёртка» (зависит от платформы)

Способ №2

Неизменная часть

настройки

описаниеэффекты

Статистика использования Задача: собрать данные об использовании виджета.

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

Мой вариант решения

БД

AJAX

Код действия с виджетом

Уникальный id клиента

Посмотреть систему в действии можно здесь: http://widgetok.ru/wstat/view/wikiday/

Загрузка обновлений

• У виджета есть номер версии, и сам виджет его всегда знает.

• На сервере лежит XML с описанием последней стабильной версии

<?xml version="1.0" encoding="utf-8" ?><update><version>1.0</version> <url>http://widgets.rbc.ru/files/windows/TNews.gadget</url></update>

В XML хранится номер версии и ссылка для скачивания виджета.

Виджет запускается

получает с сервера XML

сравнивает свой номер

версии

если его версия устарела,

предлагает обновиться

Нужно ли вообще заморачиваться с обновлениями?

Гаджеты Windows 7/Vista

Почему о них стоит знать?

По данным LiveInternet

Материалы для знакомства

• находятся в Гугле по запросу «msdn gadget»

• на русском: «Создание гаджетов для Windows sidebar» на сайте http://designformasters.info

Что они из себя представляют• HTML документ, отображаемый движком от IE

• Добавлено несколько дополнительных тегов разметки (g:background, g:image, g:text)

• Разрешен JavaScript

• Есть JS-API для работы с гаджетом и системой

Верстка

• Можно не думать о кроссбраузерности

• Проверять - прямо в гаджете, или в IE

Основная проблема с вёрсткой – прозрачный фон

g:background + PNG с прозрачностью => могут появиться розовые и чёрные области. Как этого избежать?

Если гаджет имеет фиксированный размер

1. Прописать для элементов body и g:background в css-стилях нужную ширину и высоту.

2. Сделать картинку-фон для g:background точно таких же размеров.

3. Если не помогло и на фоне остались розовые пикселы, скорее всего они не полностью прозрачные

Если размер гаджета заранее не известен

g:background.addImageObject()

Код можно посмотреть в гаджете РБК, скачав с http://w7.rbc.ru

Фон, N x 1px

Шапка

Подвал

Текст на прозрачном фоне – увы... :(

JavaScript Можно использовать JS-фреймворки, я пользуюсь JQuery и JQueryUI

Особенности onсlick • Если навесить его на элемент, за этот

элемент виджет нельзя будет перетаскивать мышью по экрану

• Клики на прозрачных областях не обрабатываются.

Устанавливать обработчик события можно только в виде

element.onclick=function(){…}

$(‘selector’).get(0).onclick= function(){…}

А вот

element.attachEvent(‘onclick’, function(){…})

$(‘selector’).click( function(){…})

не сработают.

Хранение данных

• Встроенный механизм - значения до 2048 символов

• Если хочется больше и дольше - PersistentSettings.js

http://blogs.msdn.com/sidebar/

Доступ к системеС помощью объекта ActiveX можно читать, писать, копировать файлы, смотреть содержимое директорий и т.д.

Также можно использовать VBSctipt.

Безопасность• Гаджеты ближе к программам, чем к веб-страницам

• Запускаются со стандартными правами пользователя

• Если для выполнения операции гаджету требуются права администратора, операция не выполняется и не показывается диалоговое окно разрешения действия

Спасибо за вниманиеВопросы?

Контакты

E-mail: belgleb@gmail.com

Блог: http://WidgetOK.ru