15 апреля 2010, Я.Субботник в Минске Роман Иванов "Возможности Яндекс.Бара"

1. Возможности Яндекс.Бара
для привлечения аудитории к вашему сайту
Роман Иванов
kukutz@yandex‐team.ru
Я.Субботник, Минск, 16 апреля 2010 года

2. Самое важное о Яндекс.Баре
Яндекс.Бар — панель для браузеров MSIE и Mozilla
Firefox — используют более 10 млн. человек
2

3. Хорошо, но причём тут я?
Начиная с версии 5.0, которая была выпущена вчера, в
Баре появилась поддержка «виджетов».
3

4. И где же в Баре виджеты?
Так вот же они ^^
Все кнопки, кроме кнопки «Яндекс», поискового поля,
кнопки «Отзывов» и блока «Погода и Пробки» могут
быть замещены виджетами.
4

5. Какими бывают виджеты?
Виджет может быть представлен одной кнопкой…
…или сразу несколькими
5

6. Что они умеют делать?
Показывать счетчик и по клику открывать страницу
или так
Открывать страницу и показывать меню
И делать много других
интересных вещей…
6

7. Кстати, об интересных вещах
Нажимаете «Установить» и вместо
информационной панели…
7

8. Кстати, об интересных вещах
…получаете социальную. Здорово.
7

9. И зачем мне ваши виджеты?
Сделайте виджет и предложите его всем
посетителям вашего сайта. Им станет проще
взаимодействовать с вашим сервисом.
PROFIT: Они станут чаще к вам возвращаться
8

10. Зачем мне писать виджеты?
Почему сразу не написать
свою панель/бар?
<f Формат данных, отдаваемых
<f:data name="my-cookie"> <f:data name="my-cookie"> веб-сервисом: <f:data name="my-cookie"> <f:data name="my-cookie"> <f:data name="my-cookie">
<f:cookie url="http:// <f:cookie url="http:// необходимо написать следующий <f:cookie url="http:// <f:cookie url="http://
mywebservice.ru/" mywebservice.ru/" nam код на xButton: mywebservice.ru/" mywebservice.ru/"
name="mycookie"/> name="update">600</f:param> name="mycookie"/> name="mycookie"/>
</f:data> <f:param <?xml version="1.0" </f:data> </f:data>
name="expire">172800</f:param> encoding="utf-8"?>
<f:data name="has-cookie"> </f:request> <widget icon="olymp/olymp.ico" <f:data name="has-cookie"> <f:data name="has-cookie">
<f:not> </f:data> name="Олимпиада 2010" <f:not> <f:not>
<f:is-empty value="$my-cookie"/ <f:data name="content"> xmlns="http://bar.yandex.ru/dev/ <f:is-empty value="$my-cookie"/ <f:is-empty value="$my-cookie"/
> <!-- используем ответ gui" xmlns:f="http://bar.yandex.ru/ > >
</f:not> сервиса из определенного выше dev/functional"> </f:not> </f:not>
</f:data> запроса --> <!-- формируем запрос к </f:data> </f:data>
<f:content> сервису -->
<f:data name="external-data"> <f:value-of name="request"/ <f:data name="request"> <f:data name="external-data"> <f:data name="external-data">
<f:content> > <f:request> <f:content> <f:content>
<f:request url="http:// </f:content> <?xml version="1.0" <f:param name="url">http:// <f:request url="http:// version="1.0" encoding="utf-8"?>
mywebservice.ru/export.xml"/> </f:data> encoding="utf-8"?> olymp2010-xml.yandex.ru/export/ mywebservice.ru/export.xml"/> <widget icon="olymp/olymp.ico"
</f:content> <!-- описываем внешний вид <medals_archive> medals/?year=2010</f:param> </f:content> name="Олимпиада 2010"
</f:data> e="mycookie"/> <medals year="2010"> <f:param </f:data> xmlns="http://bar.yandex.ru/dev/
</f:data> <team> :data name="my- name="update">600</f:param> gui" xmlns:f="http://bar.yandex.ru/
<ui:button> cookie"> <f:param <ui:button> dev/functional">
<f:optional> <f:data name="has-cookie"> <f:cookie url="http:// name="expire">172800</f:param> <f:optional> <!-- формируем запрос к
<f:value-of name="has-cookie"> <f:not> mywebservice.ru/" </f:request> <f:value-of name="has-cookie"> сервису -->
<ui:text> <f:is-empty value="$my-cook name="mycookie"/> </f:data> <ui:text> <f:data name="request">
<f:value-of name="external- name="request"/> </f:data> <f:data name="content"> <f:value-of name="external- <f:request>
data"/> </f:content> <!-- используем ответ data"/> <f:param name="url">http://
</ui:text> </f:data> <f:data name="has-cookie"> сервиса из определенного выше </ui:text> olymp2010-xml.yandex.ru/export/
<ui:url>http://mywebservice.ru/ <!-- описываем внешний вид <f:not> запроса --> <ui:url>http://mywebservice.ru/ medals/?year=2010</f:param>
authorize.html</ui:url> кнопки --> <f:is-empty value="$my-cookie"/ <f:content> authorize.html</ui:url> <f:param
</f:optional> <button> > <f:value-of name="request"/ </f:optional> name="update">600</f:param>
Формат данных, отдаваемых веб- <icon>olymp/olymp.ico</icon> </f:not> > Формат данных, отдаваемых веб- <f:param
сервисом: <url>http:// </f:data> </f:content> сервисом: name="expire">172800</f:param>
olymp2010.yandex.ru/</url> </f:data> </f:request>
<?xml version="1.0" <tooltip>Открыть сайт <f:data name="external-data"> <?xml version="1.0" </f:data>
encoding="utf-8"?> Олимпиады 2010</tooltip> <f:content> <f:cookie url="http:// encoding="utf-8"?> <f:data name="content">
<medals_archive> </button> <f:request url="http:// mywebservice.ru/" <medals_archive> <!-- используем ответ
<medals year="2010"> <button> mywebservice.ru/export.xml"/> name="mycookie"/> <medals year="2010"> сервиса из определенного выше
<team> <icon>olymp/gold.png</icon> </f:content> </f:data> <team> запроса -->
<team_id>678</team_id> <text> </f:data> <team_id>678</team_id> <f:content> <f:request
<team_name>Россия</ <f:xpath> <f:data name="has-cookie"> <team_name>Россия</ url="http://mywebservice.ru/
team_name> <f:value>number(// <ui:button> <f:not> team_name> export.xml"/>
<geo_id>225</geo_id> team[team_id=678]/gold)</f:value> <f:optional> <f:is-empty value="$my-cookie"/ <geo_id>225</geo_id> </f:content>
<gold>3</gold> <f:value-of <f:value-of name="has-cookie"> > <gold>3</gold> </f:data>
<silver>4</silver> name="content"/> <ui:text> </f:not> <silver>4</silver>
<bronze>6</bronze> </f:xpath> <f:value-of name="external- </f:data> <bronze>6</bronze> <ui:button>
<total>13</total> </text> data"/> <total>13</total> <f:optional>
<team_place>10</ <url>http:// </ui:text> <f:data name="external-data"> <team_place>10</ <f:value-of name="has-cookie">
team_place> olymp2010.yandex.ru/</url> <ui:url>http://mywebservice.ru/ <f:content> team_place> <ui:text>
</team> <tooltip>Золотые медали</ authorize.html</ui:url> <f:request url="http:// </team> <f:value-of name="external-
</medals> tooltip> </f:optional> mywebservice.ru/export.xml"/> </medals> data"/>
</medals_archive> </button> Формат данных, отдаваемых веб- </f:content> </medals_archive> </ui:text>
<button> сервисом: </f:data> <ui:url>http://mywebservice.ru/
<icon>olymp/silver.png</icon> authorize.html</ui:url>
<text> <?xml version="1.0" <ui:button> </f:optional>
Для реализации компонента <f:xpath> encoding="utf-8"?> <f:optional> Для реализации компонента <!-- Формат данных, отдаваемых веб-
необходимо написать следующий <f:value>number(// <medals_archive> <f:value-of name="has-cookie"> описываем внешний вид кнопки сервисом:
код на xButton: team[team_id=678]/silver)</ <medals year="2010"> <ui:text> -->
f:value> <team> <f:value-of name="external- <button> <?xml version="1.0"
<?xml version="1.0" <f:value-of <team_id>678</team_id> data"/> <icon>olymp/olymp.ico</icon> encoding="utf-8"?>
encoding="utf-8"?> name="content"/> <team_name>Россия</ </ui:text> <url>http:// <medals_archive>
<widget icon="olymp/olymp.ico" </f:xpath> team_name> <ui:url>http://mywebservice.ru/ olymp2010.yandex.ru/</url> <medals year="2010">
name="Олимпиада 2010" </text> <geo_id>225</geo_id> authorize.html</ui:url> <tooltip>Открыть сайт <team>
xmlns="http://bar.yandex.ru/dev/ <url>http:// <gold>3</gold> </f:optional> Олимпиады 2010</tooltip> <team_id>678</team_id>
gui" xmlns:f="http://bar.yandex.ru/ olymp2010.yandex.ru/</url> кнопки --> Формат данных, отдаваемых веб- </button> <team_name>Россия</
dev/functional"> <tooltip>Серебряные <button> сервисом: <button> team_name>
<!-- формируем запрос к медали</tooltip> <icon>olymp/olymp.ico</icon> <icon>olymp/gold.png</icon> <geo_id>225</geo_id>
сервису --> </button> <url>http:// <?xml version="1.0" <text> <gold>3</gold>
<f:data name="request"> <button> olymp2010.yandex.ru/</url> encoding="utf-8"?> <f:xpath> <silver>4</silver>
<f:request> <icon>olymp/bronze.png</ <tooltip>Открыть сайт <medals_archive> <f:value>number(// <bronze>6</bronze>
<f:param name="url">http:// icon> Олимпиады 2010</tooltip> <medals year="2010"> team[team_id=678]/gold)</f:value> <total>13</total>
olymp2010-xml.yandex.ru/export/ <text> </button> <team> <f:value-of <team_place>10</
medals/?year=2010</f:param> <f:xpath> <button> <team_id>678</team_id> name="content"/> team_place>
<f:param <f:value>number(// <icon>olymp/gold.png</icon> <team_name>Россия</ </f:xpath> </team>
name="update">600</f:param> team[team_id=678]/bronze)</ <text> team_name> </text> </medals>
<f:param f:value> <f:xpath> <geo_id>225</geo_id> <url>http:// </medals_archive>
name="expire">172800</f:param> <f:value-of <f:value>number(// <gold>3</gold> olymp2010.yandex.ru/</url>
</f:request> name="content"/> team[team_id=678]/gold)</f:value> <silver>4</silver> <tooltip>Золотые медали</
</f:data> </f:xpath> <f:value-of <bronze>6</bronze> tooltip>
<f:data name="content"> </text> name="content"/> <total>13</total> </button> Для реализации компонента
<!-- используем ответ <url>http:// </f:xpath> <team_place>10</ <button> необходимо написать следующий
сервиса из определенного выше olymp2010.yandex.ru/</url> </text> team_place> <icon>olymp/silver.png</icon> код на xButton:
запроса --> <tooltip>Бронзовые <url>http:// </team> <text>
<f:content> медали</tooltip> olymp2010.yandex.ru/</url> </medals> <f:xpath> <?xml version="1.0"
<f:value-of name="request"/ </button> <tooltip>Золотые медали</ </medals_archive> encoding="utf-8"?>
> </widget> tooltip> <widget icon="olymp/olymp.ico"
</f:content> </ui:button> ie"/> </button> name="Олимпиада 2010"
</f:data> </f:not> <button> xmlns="http://bar.yandex.ru/dev/
<!-- описываем внешний вид <icon>olymp/silver.png</icon> Для реализации компонента gui" xmlns:f="http://
<text>
<f:xpath>
<f:value>number(//
team[team_id=678]/silver)</
f:value>
<f:value-of
name="content"/>
</f:xpath>
</text>
Код бара Код виджета
>200 000 строк <100 строк
9
1001 файл 3 файла

11. Отлично, как мне создать
свой виджет?
10

12. Ну, это как раз не сложно
Любой виджет для панели состоит из трех частей:
1. Пакет – описание виджета и все
необходимые ресурсы для его работы
2. Манифест – техническое описание пакета
3. Описание сборки – список кнопок в наборе
11

13. Как эти части взаимодействуют?
12

14. Пишем виджет за 10 минут
Задача:
Разместить на панели кнопку с иконкой,
нажатие на которую будет переводить
пользователя на сайт
Дано:
1.Руководство разработчика на xBu}on
2.Справочник функций xBu}on
3.Примеры
h}p://clubs.ya.ru/yandexbar‐dev/
13

15. Создаем пакет: tutby.xml
1. Описываем кнопку и ее поведение в
формате XML на языке xBu}on:
<?xml version="1.0" encoding="utf-8"?>
<widget icon="tutby.png" name="TUT.BY" xmlns="http://
bar.yandex.ru/dev/gui" xmlns:f="http://bar.yandex.ru/dev/
functional">
<button>
<icon>tutby.png</icon>
<text>TUT.BY</text>
<tooltip>Перейти на TUT.BY</tooltip>
<url>http://www.tut.by</url>
</button>
</widget>
2. Находим иконку для кнопки размером
16х16, пакуем оба файла в zip‐архив:
tutby.xml.zip
14

16. Создаем манифест: manifest.xml
3. Описываем где находится пакет
и требования к нему:
<?xml version="1.0" encoding="utf-8"?>
<manifest id="http://kukutz.narod2.ru/tutby/
manifest.xml">
<package version="1" platform-min="1"
url="http://kukutz.narod2.ru/tutby/tutby.xml.zip"/>
</manifest>
15

17. Создаем описание: tutby.xb.xml
4. Описываем название виджета, указываем
его автора и путь к иконке для
инсталлятора:
<?xml version="1.0" encoding="utf-8"?>
<preset>
<name>TUT.BY</name>
<author>kukutz</author>
<icon>http://kukutz.narod2.ru/tutby/tutby.png</icon>
<widget id="http://kukutz.narod2.ru/tutby/
manifest.xml#tutby"/>
</preset>
16

18. Выкладка
5. Виджет готов, теперь все его компоненты
надо выложить по тому адресу, который
был указан в manifest.xml
tutby.xml.zip
manifest.xml h}p://kukutz.narod2.ru/tutby/
tutby.xb.xml
17

19. Как достичь успеха?
18

20. Конечно, просто создать
виджет — недостаточно.
Нужно его распространить.
19

21. Расскажите о своем виджете
Вы можете выбрать любой из готовых промо‐
блоков для продвижения ваших виджетов:
h}p://download.yandex.ru/bar/api/promo/promo_pack.zip
20

22. Или любым другим способом
Все зависит только от вашей
фантазии и того, какой из
вариантов лучше сработает
именно для вашей аудитории.
Экспериментируйте :)
21

23. Библиотека виджетов
Через некоторое время появится и
централизованная библиотека виджетов для Бара.
Но уже сейчас можно делать виджеты и
распространять их самостоятельно.
22

24. А теперь — вопросы!
Роман Иванов
111033, Россия, Москва,
ул. Льва Толстого 16
+7 (495) 739‐00‐00
+7 (495) 739‐70‐70 — факс
kukutz@yandex‐team.ru
23