Yahoo! Widgets – платформа для десктоп-виджетов от компании Yahoo!. Мне она очень нравится, так что в ближайшее время я посвящу ей несколько постов.

Изначально этот движок назывался Konfabulator и первая его версия, созданная програмистами Арло Розом (Arlo Rose) и Перри Кларком (Perry Clarke), была выпущена в феврале 2003 года.
Легенда гласит, что сама идея пришла в голову Арло ещё в 1998 г.: он менял скин MP3-проигрывателя (уж не Winamp ли? ) и подумал, что здорово было бы так же легко менять оформление для любых данных, которые хочется видеть на рабочем столе.
Konfabulator 1.0 была платным и предназначался исключительно для Mac OS X. Позже к команде присоединился Эд Вос (Ed Voas), который помог разработать версию для Windows, и в ноябре 2004 вышла кроссплатформенная версия Konfabulator.

Проект пришёлся по вкусу как пользователям, так и разработчикам виджетов, и быстро набрал популярность. В 2005 году основатели продали его Yahoo! и какое-то время продолжали работать над ним в этой компании. Yahoo! поставила дело на широкую ногу: движок был переименован в Yahoo! Widgets, стал  бесплатным, была организована галерея виджетов и сайт с документацией. Разработчики виджетов могут предлагать свои творения для добавления в галерею, и после их одобрения модератором, пользователи получают возможность установить виджет себе на рабочий стол всего парой кликов.

Осенью и в начале зимы в работе галереи наблюдался застой, а на форуме разработчики жаловались, что проект заброшен. По слухам, это происходило из-за того, что все силы небольшой команды, работающей над виджетами, были брошены на новый проект – внедрение виджетов в телевизоры. Причём не последнюю роль тут играл Арло. Судя по тому, что уже анонсирован выход телевизоров Samsung и Sony с Yahoo! Widgets, дело идёт успешно.

Если вам стало интересно, зайдите на сайт, установите Yahoo! Widgets и попробуйте сами, что это такое. А если ещё не прониклись, ждите следующего поста: в нём я расскажу, что может этот движок.

Сегодня я покажу, как самому за 15 минут сделать простой веб-виджет, расскажу, как его можно использовать, а заодно познакомлю вас с интересным сервисом Yahoo! Pipes. Создание этого виджета потребует минимальных знаний веб-технологий: хватит начального уровня HTML и JavaScript.

Если говорить в общем, Yahoo! Pipes – это сервис для получения и обработки данных с веб-сайтов. Создаём новую «трубу», задаём источник данных (например, URL RSS-ленты), указываем, что с этими данными надо делать (фильтровать, преобразовывать), а на выходе получаем результат. Причём всё это делается с помощью простого графического интерфейса. В технические подробность углубляться не буду: благо, в Рунете об этом уже много написано. Самое интересное для нас – это то, что Yahoo! Pipes позволяет получить результат не только в виде RSS или JSON, но и в виде практически готового виджета.

Итак, поехали!
Читать далее

Заканчивая обзор технологий разработки веб-виджетов, расскажу о самых «мощных» из них.

HTML+JavaScript+серверный язык (например, PHP).

Такая связка позволяет создавать очень гибкие и интерактивные виджеты, поведение которых может зависеть как от действий пользователя, так и, например, от контента страницы, на которой виджет размещается. Эти технологии используются, в частности, для показа контекстной рекламы.
При такой схеме JavaScript, как правило, отвечает за формирование внешнего вида виджета, а сервер – за ресурсоёмкие операции вроде обработки текста и вычислений (а часто ещё и за формирование JavaScript-а).
Распространяться такие виджеты могут везде, где разрешена вставка JavaScript: на сайтах, в автономных блогах, некоторых блогохостингах.

Плюсы:

• максимальная гибкость и интерактивность, можно реализовать самые смелые идеи

Минусы:

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

Где можно использовать:

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

Flash или Silverlight (+ сервер)

С помощью Adobe Flash делаются самые красивые виджеты, и самые технически сложные: например, всем знакомая вставка видео с YouTube. Сейчас набирает обороты конкурент Flash – технология Microsoft Silverlight. И хотя виджетов на ней я пока не встречал, уверен, скоро они начнут появляться.
Распространяться такие виджеты могут везде, где разрешена вставка Flash, а в некоторых случаях эта технология является вообще единственным вариантом: например, только с её помощью можно создавать приложения Вконтакте.

Плюсы:

• большие возможности для дизайнеров
• облегчается реализация технически сложных функций

Минусы:

• трудоёмкость разработки
• виджеты часто получаются «тяжёлыми», медленно загружаются

Ещё одна прелесть flash-виджетов состоит в том, что существуют сервисы для их автоматической генерации. К сожалению, в Рунете я таких не нашёл, а западные использовать неудобно, потому что они ориентированы на другую часть Сети. Приведу лишь пару примеров:

• Sprout – мощный редактор. К сожалению, с февраля становится полностью платным и с русским языком не умеет работать абсолютно.
• Widgetbox – позволяет легко делать несколько типов виджетов. Например, вот я буквально парой кликов сделал виджет для показа RSS своего блога:

Но увы, интерфейс этого виджета не русифицирован, местами слетает кодировка, а механизм распространения «заточен» под западные социальные сети. Так что полноценно использовать его в Рунете не получится. Хотя, например, в качестве элемента дизайна блога (показывать в сайдбаре анонсы постов) или в качестве рекламы блога на других своих площадках – почему бы и нет.

Перейдём к динамическим виджетам и рассмотрим ещё пару технологий.

HTML+JavaScript (формируются статически)

Статически – в смысле, каждый пользователь виджета получает один и тот же код, и его содержимое впоследствии не меняется.

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

У меня пока есть только одна идея, как это можно использовать: счётчики. Например, организуете вы конкурс, который должен начаться через 14 дней. Делаете виджет с надписью «До начала мегаконкурса осталось:  столько-то часов-минут-секунд», на котором тикает время в обратную сторону, вешаете у себя в блоге и предлагаете посетителям тоже повесить на своих блогах. Постоянно тикающий таймер будет подогревать аудиторию ничуть не хуже зажигательных постов, и вам для этого ничего не надо будет делать.

Микросайтинг

Очень интересная технология, которую нельзя не упомянуть. Интересная своей простотой, изяществом и «живучестью».

Придумал её Дамир Ramainen ainu Фахрутдинов, и началось всё с этого поста (по крайней мере, это первое упоминание, которое мне известно).

В чём «фишка». Микросайт – это маленький самостоятельный сайт, встраиваемый в код другого, «большого» сайта. Код его представляет собой только ссылки и картинки, чем и объясняется «живучесть»: такой сайт-виджет можно разместить мало того что на любом блоге, но даже в подписи на форуме, где кроме BB-кодов вставлять ничего не разрешается.

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

Плюсы:

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

Минусы:

• При клике по ссылке микросайта происходит перезагрузка страницы (есть варианты без перезагрузки, но они используют JavaScript)
• Улучшение дизайна – несколько более трудоёмкий процесс по сравнению с HTML

Где это можно использовать?

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

У меня есть мысль на этой технологии построить игру для блоггеров. Например, крестики-нолики. Представьте: блоггер вставляет картинку с клеткми 3х3 в конец поста. Первый читатель, который видит эту картинку, кликает на клетку – там ставится крестик и его видят остальные читатели. Потом ходит автор поста, а все остальные ждут, пока он поставит свой нолик, после чего ходить уже может другой читатель, и так далее. Этакое интеллектуальное соревнование между автором и аудиторией. Как считаете, это было бы интересно?

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

Начнём со статического HTML.

Это просто HTML-код, который вставляется на страницу, и впоследствии уже не меняется. В таком виде, например, по блогам расходятся результаты тестов и анонсы новостей с новостных сайтов. Если вы видите на сайте текст «Код для вставки в блог», в 90% случаев это окажется статический HTML-виджет.

Дороги Москвы будут поливать горячими реагентами

Мэр Москвы Юрий Лужков предложил новое средство для борьбы с гололедицей на столичных магистралях. Как сообщил РБК заместитель руководителя Федеральной службы по надзору в сфере природопользования (Росприроднадзор) Олег Митволь, вопрос о применении антигололедных реагентов был рассмотрен на совещании в правительстве столицы. Ю.Лужков предложил применить в столице технологию подогрева жидких реагентов. По мнению градоначальника, эта технология гораздо действеннее и экономнее, чем традиционные средства. Для обработки магистралей…Читать далее > РБК. Москва

Плюсы:

• поддерживается всеми платформами: от сайтов до бесплатных блогохостингов и форумов;
• как правило, содержит прямо в коде ссылку на ваш сайт, что положительно сказывается с точки зрения SEO. Например, мой http://123lj.ru получил за 5 месяцев существования тИЦ 50 и PR 5 исключительно за счёт ссылок из виджетов в LiveJournal (причём, не все ссылки из виджетов ведут напрямую на этот домен: некоторые ведут на старый, где виджет жил вначале).
• самый «дешёвый» вариант с точки зрения разработки: на его реализацию требуется меньше всего времени.

Минусы:

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

Где можно применять:

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

Насчёт интернет-магазинов могу рассказать поучительный эпизод. Несколько лет назад, работая работая в одном из них, я предложил публиковать на сайте к каждому товару код для вставки в блог. Такого тогда никто на рынке не делал, руководство идею проигнорировало, коллеги только похихикали. А какое-то время спустя я обнаружил, что такая фишка появилась на Яндекс.Маркете (ссылка в правой колонке).

Sony-Ericsson XPERIA X1 — описание и цены на Яндекс.Маркете

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

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

Продолжение следует.