Роман Иванов "Возможности Яндекс.Бара"
DESCRIPTION
15 апреля 2010, Я.Субботник в Минске Роман Иванов "Возможности Яндекс.Бара"TRANSCRIPT
Я.Субботник, Минск, 16 апреля 2010 года
kukutz@yandex‐team.ruРоман Иванов
Возможности Яндекс.Барадля привлечения аудитории к вашему сайту
Самое важное о Яндекс.БареЯндекс.Бар — панель для браузеров MSIE и Mozilla Firefox — используют более 10 млн. человек
2
Хорошо, но причём тут я?
Начиная с версии 5.0, которая была выпущена вчера, в Баре появилась поддержка «виджетов».
3
И где же в Баре виджеты?
Так вот же они ^^
Все кнопки, кроме кнопки «Яндекс», поискового поля, кнопки «Отзывов» и блока «Погода и Пробки» могут быть замещены виджетами.
4
Какими бывают виджеты?
Виджет может быть представлен одной кнопкой…
…или сразу несколькими
5
Что они умеют делать?
Показывать счетчик и по клику открывать страницу
или так
Открывать страницу и показывать меню
И делать много другихинтересных вещей…
6
Кстати, об интересных вещахНажимаете «Установить» и вместоинформационной панели…
7
Кстати, об интересных вещах
…получаете социальную. Здорово.
7
И зачем мне ваши виджеты?Сделайте виджет и предложите его всем посетителям вашего сайта. Им станет проще взаимодействовать с вашим сервисом.
PROFIT: Они станут чаще к вам возвращаться
8
Зачем мне писать виджеты?Почему сразу не написать свою панель/бар?
Код бара>200 000 строк1001 файл
Код виджета<100 строк3 файла
<f:data name="my-cookie"> <f:cookie url="http://mywebservice.ru/" name="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cookie"/> </f:not></f:data>
<f:data name="external-data"> <f:content> <f:request url="http://mywebservice.ru/export.xml"/> </f:content></f:data>
<ui:button> <f:optional> <f:value-of name="has-cookie"> <ui:text> <f:value-of name="external-data"/> </ui:text> <ui:url>http://mywebservice.ru/authorize.html</ui:url> </f:optional>Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> <team_id>678</team_id> <team_name>Россия</team_name> <geo_id>225</geo_id> <gold>3</gold> <silver>4</silver> <bronze>6</bronze> <total>13</total> <team_place>10</team_place> </team> </medals></medals_archive>
Для реализации компонента необходимо написать следующий код на xButton:
<?xml version="1.0" encoding="utf-8"?><widget icon="olymp/olymp.ico" name="Олимпиада 2010" xmlns="http://bar.yandex.ru/dev/gui" xmlns:f="http://bar.yandex.ru/dev/functional"> <!-- формируем запрос к сервису --> <f:data name="request"> <f:request> <f:param name="url">http://olymp2010-xml.yandex.ru/export/medals/?year=2010</f:param> <f:param name="update">600</f:param> <f:param name="expire">172800</f:param> </f:request> </f:data> <f:data name="content"> <!-- используем ответ сервиса из определенного выше запроса --> <f:content> <f:value-of name="request"/> </f:content> </f:data> <!-- описываем внешний вид
<f:data name="my-cookie"> <f:cookie url="http://mywebservice.ru/" namname="update">600</f:param> <f:param name="expire">172800</f:param> </f:request> </f:data> <f:data name="content"> <!-- используем ответ сервиса из определенного выше запроса --> <f:content> <f:value-of name="request"/> </f:content> </f:data> <!-- описываем внешний вид e="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cook name="request"/> </f:content> </f:data> <!-- описываем внешний вид кнопки --> <button> <icon>olymp/olymp.ico</icon> <url>http://olymp2010.yandex.ru/</url> <tooltip>Открыть сайт Олимпиады 2010</tooltip> </button> <button> <icon>olymp/gold.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/gold)</f:value> <f:value-of name="content"/> </f:xpath> </text> <url>http://olymp2010.yandex.ru/</url> <tooltip>Золотые медали</tooltip> </button> <button> <icon>olymp/silver.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/silver)</f:value> <f:value-of name="content"/> </f:xpath> </text> <url>http://olymp2010.yandex.ru/</url> <tooltip>Серебряные медали</tooltip> </button> <button> <icon>olymp/bronze.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/bronze)</f:value> <f:value-of name="content"/> </f:xpath> </text> <url>http://olymp2010.yandex.ru/</url> <tooltip>Бронзовые медали</tooltip> </button></widget></ui:button> ie"/> </f:not>
<f Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> :data name="my-cookie"> <f:cookie url="http://mywebservice.ru/" name="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cookie"/> </f:not></f:data>
<f:data name="external-data"> <f:content> <f:request url="http://mywebservice.ru/export.xml"/> </f:content></f:data>
<ui:button> <f:optional> <f:value-of name="has-cookie"> <ui:text> <f:value-of name="external-data"/> </ui:text> <ui:url>http://mywebservice.ru/authorize.html</ui:url> </f:optional>Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> <team_id>678</team_id> <team_name>Россия</team_name> <geo_id>225</geo_id> <gold>3</gold>кнопки --> <button> <icon>olymp/olymp.ico</icon> <url>http://olymp2010.yandex.ru/</url> <tooltip>Открыть сайт Олимпиады 2010</tooltip> </button> <button> <icon>olymp/gold.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/gold)</f:value> <f:value-of name="content"/> </f:xpath> </text> <url>http://olymp2010.yandex.ru/</url> <tooltip>Золотые медали</tooltip> </button> <button> <icon>olymp/silver.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/silver)</f:value> <f:value-of name="content"/> </f:xpath> </text>
<f:data name="my-cookie">необходимо написать следующий код на xButton:
<?xml version="1.0" encoding="utf-8"?><widget icon="olymp/olymp.ico" name="Олимпиада 2010" xmlns="http://bar.yandex.ru/dev/gui" xmlns:f="http://bar.yandex.ru/dev/functional"> <!-- формируем запрос к сервису --> <f:data name="request"> <f:request> <f:param name="url">http://olymp2010-xml.yandex.ru/export/medals/?year=2010</f:param> <f:param name="update">600</f:param> <f:param name="expire">172800</f:param> </f:request> </f:data> <f:data name="content"> <!-- используем ответ сервиса из определенного выше запроса --> <f:content> <f:value-of name="request"/> </f:content> </f:data> <f:cookie url="http://mywebservice.ru/" name="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cookie"/> </f:not></f:data>
<f:data name="external-data"> <f:content> <f:request url="http://mywebservice.ru/export.xml"/> </f:content></f:data>
<ui:button> <f:optional> <f:value-of name="has-cookie"> <ui:text> <f:value-of name="external-data"/> </ui:text> <ui:url>http://mywebservice.ru/authorize.html</ui:url> </f:optional>Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> <team_id>678</team_id> <team_name>Россия</team_name> <geo_id>225</geo_id> <gold>3</gold> <silver>4</silver> <bronze>6</bronze> <total>13</total> <team_place>10</team_place> </team> </medals></medals_archive>
Для реализации компонента
<f:data name="my-cookie"> <f:cookie url="http://mywebservice.ru/" name="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cookie"/> </f:not></f:data>
<f:data name="external-data"> <f:content> <f:request url="http://mywebservice.ru/export.xml"/> </f:content></f:data>
<ui:button> <f:optional> <f:value-of name="has-cookie"> <ui:text> <f:value-of name="external-data"/> </ui:text> <ui:url>http://mywebservice.ru/authorize.html</ui:url> </f:optional>Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> <team_id>678</team_id> <team_name>Россия</team_name> <geo_id>225</geo_id> <gold>3</gold> <silver>4</silver> <bronze>6</bronze> <total>13</total> <team_place>10</team_place> </team> </medals></medals_archive>
Для реализации компонента <!-- описываем внешний вид кнопки --> <button> <icon>olymp/olymp.ico</icon> <url>http://olymp2010.yandex.ru/</url> <tooltip>Открыть сайт Олимпиады 2010</tooltip> </button> <button> <icon>olymp/gold.png</icon> <text> <f:xpath> <f:value>number(//team[team_id=678]/gold)</f:value> <f:value-of name="content"/> </f:xpath> </text> <url>http://olymp2010.yandex.ru/</url> <tooltip>Золотые медали</tooltip> </button> <button> <icon>olymp/silver.png</icon> <text> <f:xpath>
<f:data name="my-cookie"> <f:cookie url="http://mywebservice.ru/" name="mycookie"/></f:data>
<f:data name="has-cookie"> <f:not> <f:is-empty value="$my-cookie"/> </f:not></f:data>
<f:data name="external-data"> <f:content>version="1.0" encoding="utf-8"?><widget icon="olymp/olymp.ico" name="Олимпиада 2010" xmlns="http://bar.yandex.ru/dev/gui" xmlns:f="http://bar.yandex.ru/dev/functional"> <!-- формируем запрос к сервису --> <f:data name="request"> <f:request> <f:param name="url">http://olymp2010-xml.yandex.ru/export/medals/?year=2010</f:param> <f:param name="update">600</f:param> <f:param name="expire">172800</f:param> </f:request> </f:data> <f:data name="content"> <!-- используем ответ сервиса из определенного выше запроса --> <f:content> <f:request url="http://mywebservice.ru/export.xml"/> </f:content></f:data>
<ui:button> <f:optional> <f:value-of name="has-cookie"> <ui:text> <f:value-of name="external-data"/> </ui:text> <ui:url>http://mywebservice.ru/authorize.html</ui:url> </f:optional>Формат данных, отдаваемых веб-сервисом:
<?xml version="1.0" encoding="utf-8"?><medals_archive> <medals year="2010"> <team> <team_id>678</team_id> <team_name>Россия</team_name> <geo_id>225</geo_id> <gold>3</gold> <silver>4</silver> <bronze>6</bronze> <total>13</total> <team_place>10</team_place> </team> </medals></medals_archive>
Для реализации компонента необходимо написать следующий код на xButton:
<?xml version="1.0" encoding="utf-8"?><widget icon="olymp/olymp.ico" name="Олимпиада 2010" xmlns="http://bar.yandex.ru/dev/gui" xmlns:f="http://
9
Отлично, как мне создать свой виджет?
10
Ну, это как раз не сложноЛюбой виджет для панели состоит из трех частей:
1. Пакет – описание виджета и всенеобходимые ресурсы для его работы
2. Манифест – техническое описание пакета
3. Описание сборки – список кнопок в наборе
11
Как эти части взаимодействуют?
12
Пишем виджет за 10 минутЗадача: Разместить на панели кнопку с иконкой, нажатие на которую будет переводить пользователя на сайт
Дано: 1.Руководство разработчика на xBu}on2.Справочник функций xBu}on3.Примеры
h}p://clubs.ya.ru/yandexbar‐dev/
13
<?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>
Создаем пакет: tutby.xml1. Описываем кнопку и ее поведение в
формате XML на языке xBu}on:
2. Находим иконку для кнопки размером 16х16, пакуем оба файла в zip‐архив: tutby.xml.zip
14
<?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>
Создаем манифест: manifest.xml3. Описываем где находится пакет
и требования к нему:
15
<?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>
Создаем описание: tutby.xb.xml4. Описываем название виджета, указываем
его автора и путь к иконке для инсталлятора:
16
Выкладка5. Виджет готов, теперь все его компоненты
надо выложить по тому адресу, который был указан в manifest.xml
tutby.xml.zip
manifest.xml
tutby.xb.xml
h}p://kukutz.narod2.ru/tutby/
17
Как достичь успеха?
18
Конечно, просто создать виджет — недостаточно.Нужно его распространить.
19
Расскажите о своем виджете
Вы можете выбрать любой из готовых промо‐блоков для продвижения ваших виджетов:
h}p://download.yandex.ru/bar/api/promo/promo_pack.zip20
Или любым другим способом
Все зависит только от вашей фантазии и того, какой из вариантов лучше сработает именно для вашей аудитории. Экспериментируйте :)
21
Библиотека виджетов
Через некоторое время появится и централизованная библиотека виджетов для Бара.
Но уже сейчас можно делать виджеты и распространять их самостоятельно.
22
111033, Россия, Москва,ул. Льва Толстого 16
+7 (495) 739‐00‐00+7 (495) 739‐70‐70 — факс
kukutz@yandex‐team.ru
Роман Иванов
23
А теперь — вопросы!