API Табло - виджета сайта в визуальных закладках. В статье рассмотрен процесс его создания.
Если пользуетесь Яндекс.Браузером, визуальными закладками в Firefox, IE или Chrome, то, наверняка, замечали, что есть у некоторых сайтов особенность, а точнее несколько:
- Не у всех сайтов одинаковые логотипы и названия. У некоторых название отсутствует, а логотип крупнее.
- Имеется информер сообщений/заявок в друзья/ответов и прочее
Для тех, кому лень, вкратце - если создать файл с описанием виджета и указать его в шаблоне сайта, то Яндекс.Браузер и Визуальные закладки будут отображать закладку на ваш сайт согласно этому описанию. Вот, что получилось у меня:
Я изменил цвет фона, логотип и вывел информер рейтинга авторизованного в браузере пользователя. Рейтинг для проверки поставил равным 100, видимо, в табло отражаются только двухзначные цифры, жаль.
Как реализовать?
Создаем пустой файл в блокноте (кодировка UTF-8) с названием manifest и расширением json. Указываем версию манифеста и версию API в этом файле:
{ "version": "1", "api_version": 1, }
Добавляем настройки внешнего вида информера: ссылка на логотип, цвет фона, показывать ли заголовок сайта
"layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }
Теперь самое интересное - выводим рейтинг пользователя, который авторизован. Указываем источник API uCoz, формат отдаваемых данных, настраиваем уведомление. Уведомление состоит из названия, иконки (можно указать свои ссылки) и расположение в XML значения рейтинга.
"feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] }
Собираем все вместе:
{ "version": "1", "api_version": 1, "layout": { "logo": "http://сайт/bs/img/api-tableu-logo.png", "color": "#333333", "show_title": false }, "feed": { "url": "http://сайт/api/index/8", "format": "xml", "notifiers": [ { "name": "username", "icon": "%BELL%", "path": "/methodResponse/params/param/value/struct/member/value/string/text()" } ] } }
Загружаем на сайт и подключаем в head страниц сайта этот файл:
Не забываем задействовать API на своем сайте.
Чтобы увидеть результат, необходимо удалить сайт из закладок и добавить снова.
Решения для виджетов
Благодаря API uCoz вариантов решений масса, главное помнить, что можно вывести только число. Что это за числа могут быть?
Полное описание API на uCoz находится .
Файл-пример можно скачать здесь - . Если испытываете трудности, пишите в комментариях. Вместе разберемся.
Яндекс является огромным порталом, который в сутки посещают миллионы людей. Разработчики компании заботятся о пользователях своего ресурса, позволяя каждому из них настроить его стартовую страницу под свои потребности.
К сожалению, функцию добавления и создания виджетов приостановили на неопределенное время, но основные информационные островки оставили пригодными для изменения. Первым делом рассмотрим настройку оформления страницы.
Теперь перейдем к настройке определенных виджетов. Чтобы открыть доступ к параметрам, кликните по значку шестеренки, расположенному возле некоторых колонок.
Новости
Данный виджет отображает новостную ленту, которая разбивается по рубрикам. Изначально он отображает материалы по всем темам со списка, но все же предоставляет доступ к их выбору. Для редактирования нажмите на значок настройки и во всплывающем окне напротив строки «Любимая рубрика» откройте список новостных тем. Выберите интересующую вас позицию и нажмите «Сохранить» . После этого на главной странице будут предоставлены актуальные новости из выбранного раздела.
Погода
Здесь все просто — введите в специальное поле название населенного пункта, погоду которого вам необходимо знать, и кликайте на кнопку «Сохранить» .
Посещаемое
Этот виджет показывает запросы пользователей по выбранным вами сервисам. Вновь перейдите в «Настройки» и выделите галочками те ресурсы, которые вам интересны, после чего кликните по кнопке «Сохранить» .
Телепрограмма
Виджет программы передач настраивается так же, как и предыдущие. Зайдите в параметры и отметьте интересующие вас каналы. Ниже выберите отображаемое на странице их количество, для закрепления нажмите «Сохранить» .
Чтобы все внесенные изменения были применены, в правом нижнем углу экрана в очередной раз кликните мышью по кнопке «Сохранить» .
Для того чтобы вернуть параметры страницы в изначальное состояние, нажмите на «Сбросить настройки» , после чего согласитесь с действием кнопкой «Да» .
Таким образом, настроив стартовую страницу Яндекс под свои потребности и интересы, вы в будущем экономите время на поиск различной информации. Виджеты будут предоставлять ее сразу при посещении ресурса.
Всем привет! Сегодня планирую подробно рассказать про Яндекс.Табло, очередное детище Яндекса которое, пока, не представляет из себя чего-нибудь полезного для самостоятельного продвижения сайтов, а используется для визуального отображения виджета вашего сайта на панели быстрого доступа в Яндекс.Браузере. Самим браузером я начал пользоваться сравнительно недавно и отображение в нем закладок в стиле плиток восьмой винды, мне очень понравился, а особенно, возможность настройки этих плиток. В саму панель виджеты сайтов попадают по принципу частоты посещаемости или просто, добавления туда вручную.
Не долго думая я сел и сделал Яндекс.Табло для своего . В процессе создания возникли некоторые косяки, происхождение которых я не могу объяснить, но методом «Научного тыка» их удалось победить. Именно про это и пойдет речь далее.
Не смотря на то, что браузер от Яндекса очень молод, он уже успел набрать популярность среди русскоязычных пользователей. Исходя из этого становится очевидным, что seo оптимизаторам и создателям сайтов пора обращать на него внимание и использовать встроенные «фишки», такие, как Яндекс.Табло, например.
Преимущества Яндекс.Табло
Как я и говорил выше, особых полезных свойств, применимых для продвижения сайта в нем нет, но для «галочки» это должен иметь каждый уважающий семя вебмастер или seo оптимизатор. Основные моменты по изменению виджета в Яндекс.Табло:
- Изменения бэкграуда вашего виджета.
- Добавление на виджет сайта логотипа.
- Добавление уведомлений о каких-либо событиях.
Пошаговая инструкция по созданию Яндекс.Табло
Все основные настройки прописываются в файле с расширением.json. В Яндексе его рекомендуют называть manifest.json, но у меня он не прошел валидацию, по каким причинам, не знаю. Я назвал его yandex-tableau-widget.json .
{ "version": "1", "api_version": 1, "layout": { "logo": "/yandex-tablo-logo.png", "color": "#f7f0e6", "show_title": false } - не обязательное поле }
[ stextbox id = "grey" caption = "Содержимое файла.json" ] { "version" : "1" , "api_version" : 1 , "layout" : { "logo" : "/yandex-tablo-logo.png" , "color" : "#f7f0e6" , "show_title" : false } - необязательноеполе } [ / stextbox ] |
1. В самом начале этого файла надо прописать следующие строки:
Json файл - начало
«version»: «1»,
«api_version»: 1,
И именно так (в Яндексе рекомендовали версию 1.0 ставить или 0.1, короче не важно) , по крайней мере, у меня только так пропустило валидацию .
2. Цвет фона задается в виде HTML, в моем случае — «color»: «#f7f0e6» , как бэкграунд на сайте.
3. Логотип создается при помощи фотошопа, размером 150px на 60px , я делал на прозрачном фоне и сохраняем его в формате.png, у меня yandex-tablo-logo.png
4. Прописываем путь к логотипу — «logo»: «/yandex-tablo-logo.png» все в том же файле с расширением.json
После этих нехитрых действий, кладем эти два файла, yandex-tablo-logo.png
и yandex-tableau-widget.json
в корень сайта
. В head прописываем следующую строку:
Строка в Head
Проверить, как будет выглядеть виджет вашего сайта в Яндекс.Табло, можно следующим способом:
В Яндекс.Браузере вводим волшебное словосочетание chrome://tableau-widget
, в открывшемся окне вводим полный путь к вашему файлу.json (в моем случае https://сайт/yandex-tableau-widget.json
) и нажимаем «Проверить», если все хорошо, то вы сможете лицезреть виджет вашего сайта:
Потом вы его можете смело добавить в закладки и похвалиться перед друзьями своим уникальным виджетом в Яндекс.Табло
Помимо этого есть еще несколько функций, которые я не добавлял, т.к. не вижу пока особого смысла в них, но кратко опишу их:
- Возможность добавления уведомлений, количество не ограничено, но отображается не более 3 штук. За них отвечает поле feed. Выглядят они в виде иконок 14х14px, которые могут уведомлять пользователей о чем-либо. Меняются при каждом обновлении Яндекс.Табло.
- Логотип и цвет виджета могут иметь как статические значения, так и зависящие от языка интерфейса браузера.
Небольшое дополнение от 25.12.2013 г. — Сегодня скачал и установил FireFox и очень приятно удивился, в нем уже встроено табло и подхватывает все виджеты .
Спасибо за внимание. Надеюсь, эта информация поможет вам в создании Яндекс.Табло.
После того, как мы установили браузер или решили пользоваться установленным по умолчанию, нам нужно решить с помощью какого поисковика мы будем получать нужную нам информацию.
Самым популярным сайтом-поисковиком в мире стал «Google», однако среди русскоязычных пользователей первое место стабильно занимает «Яндекс».
Думаю, это как раз тот случай, когда стоит последовать за большинством.
Давайте рассмотрим поближе, какие «удобства и вкусности» нам предлагает Яндекс.
Поисковый сайт Яндекс начинает «общение» с нами при помощью основного своего интерфейса — . Чтобы открыть её, нужно набрать в адресной строке любого браузера yandex.ru :
Поиск сайта yandex.ru
Поисковик продемонстрирует нам свою главную страницу. Здесь можно найти новости, биржевые сводки, погоду и многое-многое другое.
Однако, не многие пользователи обращают внимание на то, что главную страницу самого популярного поисковика можно настроить «под себя».
Что такое виджеты Яндекса.
Главная страница yandex.ru состоит из блоков с информацией, которые и являются виджетами. Некоторые виджеты представляют из себя небольшие приложения — часы, календарь и т.д. Остальные — это ссылки на популярные информационные и развлекательные ресурсы (сайты).
Вся свежая информация появляется на сайте и отображается в виджете. Поэтому можно увидеть множество обновлений, не выходя с главной страницы поисковика.
Вот так выглядит страница поисковика по умолчанию:
Однако есть множество виджетов, которые не отображены на главной странице по умолчанию, а так же, предполагаю, что некоторые из видимых вам не нужны. Давайте настроим их по своему усмотрению.
Как установить виджеты Яндекса.
Сначала проверим функции удаления и настройки имеющихся блоков.
Для начала нужно зайти в Настройки => Настроить Яндекс .
У виджетов появился серый фон, обозначающий их границы, кнопочки настройки (шестерёнки) и удаления блока (крестик).
С удалением, думаю, вопросов не возникнет: не нужен блок — щёлкаем по крестику ЛКМ, виджет удаляется.
Содержимое окон настроек для разных виджетов различается. Например, в приложении Расписание можно настроить станции отправления и назначения, а также временной интервал, расписание которого будет отображаться.
Сначала пройдёмся по тем виджетам, которые уже установлены на странице. Удалим ненужные и подкорректируем при желании настройки тех, которые мы оставили. Теперь можно зайти в каталог и посмотреть, что ещё предлагает нам Яндекс.
Каталог виджетов.
Для входа нужно найти в левом нижнем углу браузера кнопку Добавить новый виджет .
В каталоге виджеты сгруппированы по темам. Выбираем тему или вбиваем в строку поиска слово, непосредственно связанное с предположительным названием виджета, который хотим найти.
Например:
Для установки необходимо навести указатель мышки на значок заинтересовавшего виджета, после чего кликнуть на кнопку Добавить .
Дальнейшие действия проделываем на основной странице. Нам ещё раз предлагается сделать выбор — оставить выбранный блок или удалить. Если визуальный интерфейс нас устраивает, подтверждаем кликом ЛКМ на Установить .
После выбора всех интересных виджетов, нужно найти для них наилучшее месть на странице. Эта опция доступна сразу после входа в настройки Яндекса. Чтобы переместить информационный блок, нужно навести видоизменённый курсор на тот виджет,который собираемся двигать, зажать его ЛКМ и передвинуть в нужном направлении.
А на сегодня о виджетах всё. Приятной вам навигации.
Яндекс.Браузер (Yandex) входит в число наиболее популярных среди пользователей браузеров, поэтому оптимизировать сайт для наилучшего взаимодействия с этим браузером было бы весьма полезно. Например, каждый владелец сайта может настроить для своего ресурса правильное отображение виджета сайта на так называемом Табло - одном из элементов интерфейса Яндекс.Браузера.
Табло в Яндекс.Браузере - это специальная панель с мини-эксизами сайтов, которая облегчает пользователям доступ к недавно посещенным, наиболее часто посещаемым или же избранным сайтам. Представленные в Табло мини-эксизы - это и есть виджеты сайтов, каждый из которых может включать логотип сайта, а также различные нотификаторы (опционально).
Для создания виджета сайта при его добавлении пользователем на Табло Яндекс.Браузер самостоятельно «возьмет» одно из подходящих для этой цели изображений, а также выберет произвольно один из цветов, используемых на сайте, для фоновой заливки виджета. Разумеется, в этом случае гарантировать, что виджет сайта будет привлекателен для посетителей, не удастся.
API Табло позволяет вебмастерам управлять отображением виджетов своих сайтов и тем самым улучшать пользовательский опыт. При этом настройка виджета сайта для Табло возможна двумя способами - либо с помощью мета-тега в HTML-коде страниц сайта, либо с помощью манифеста виджета.
Чтобы настроить виджет сайта для Табло Яндекс.Браузера с помощью мета-тега , в HTML-код каждой страницы необходимо в блоке
разместить такую конструкцию:Оба атрибута данного мета-тега являются обязательными. В атрибуте name указывается наименование мета-тега – yandex-tableau-widget, а в атрибуте content - описание для логотипа, фона заливки и нотификаторов виджета. В значение параметра logo записывается путь к файлу с логотипом, а в значение параметра color - цвет фоновой заливки в шестнадцатеричном формате HEX (#xxxxxx). Параметр feed указывает путь к файлу feed.json, который содержит описание нотификаторов для виджета. Данный параметр не является обязательным.
Второй способ настройки виджета сайта для Табло в Яндекс.Браузере предусматривает использование манифеста виджета . В этом случае необходимо создать файл manifest.json, а затем в блоке
HTML-кода каждой страницы сайта указать ссылку на этот файл в следующем формате:Здесь в атрибуте href указывается абсолютный или же относительный путь к файлу manifest.json , размещенному на сервере в папке сайта. По умолчанию Яндекс.Браузер загружает файл манифеста по указанному пути 1 раз в сутки. Манифест представляет собой JSON-файл, который содержит информацию об используемой версии API Табло, описание логотипа и цвета виджета, а также путь к файлу feed.json, в котором описываются нотификаторы.
Структура файла manifest.json следующая:
{
"api_version": <номер_версии_API_Табло>,
"layout":
{ "logo": "<ссылка на файл логотипа>",
"color": "<цвет виджета в коде HEX>"
},
"feed": <ссылка на файл feed.json>
}
Особенности настройки виджета для Табло Яндекс.Браузера
Чтобы виджет сайта отображался корректно, важно соблюдать определенные правила при его настройке. Например, к изображению логотипа предъявляется целый ряд требований: файл с изображением должен по «весу» не превышать 300 КБ и должен иметь формат PNG; фон у изображения должен быть обязательно прозрачным, а максимально допустимые размеры изображения логотипа составляют 300 пикселей по ширине и 120 - по высоте.
Файлы manifest.json и feed.json не должны превышать 100 КБ и 50 КБ соответственно. Из файла feed.json на виджете сайта отображается максимум 3 нотификатора , и если их будет указано в файле больше (всего доступно 6 нотификаторов), то будут автоматически выбраны для отображения 3 первые из них.
Структура файла feed.json имеет следующий вид:
"feed":
{
"notifications": [
{"<имя значка 1>": <число>},
{"<имя значка 2>": <число>},
{"<имя значка 3>": <число>},
],
"refresh_time" : <частота загрузки файла feed.json, в мин, по умолчанию 60 мин>
}
Здесь в атрибуте «имя значка » указывается одно из 6 возможных значений для нотификаторов: %BELL% - предупреждения, %EARTH% - записи в ленте новостей, %FRIEND% - запросы на добавление в друзья, %MESSAGE% - письма, личные сообщения, %PHOTO% - фотографии, %CHAT% - мгновенные сообщения. А в атрибуте «число » указывается количество (целое число или с плавающей запятой) непросмотренных сообщений соответствующего типа. Рекомендуется при создании файла feed.json оставить для этого атрибута значение «0», чтобы в дальнейшем это значение обновлялось автоматически.
