Describing a Widget in HTML Code
Insert the following metatag in the
section in the HTML code of each webpage:
Attribute description (both attributes are required):
URLencoded .
name is the name of the meta tag yandex-tableau-widget .
content is the description of the logo and color of the widget, and notifiers in the following format: content="logo=logo.png, color=#ffffff, feed=feed.json"
Widget manifest
Restriction. The size of the manifest.json file must not exceed 100 KB.
Another way to configure a widget is to create a widget manifest file and place a link to it within the
tag in the HTML code of each page.
where manifest.json is the path for downloading the widget manifest. It can be relative or absolute:
The absolute path is the full URL of the file. Example: http://sitename.tld/... /manifest.json .
The relative path is the path to the widget manifest relative to the page that the widget is configured for. Example: manifests/manifest.json .
The browser will download the manifest file once a day via the link you entered. If the browser is opened less frequently than once a day, the file will be downloaded every time the browser is restarted.
feed is an optional attribute that specifies the path to the feed.json file with the description of notifiers. The widget is displayed without notifiers if this attribute isn"t included. The path must be URLencoded .
Purpose and format of the feed.json file
Restriction. The size of the feed.json file should not exceed 50 KB.
The feed.json file contains the description of notifiers displayed in the widget and their current values. It is automatically downloaded from the server at a frequency set by the webmaster (by default, every 60 minutes). This allows the notifiers to update. If, during the download, the server returns an incorrect answer three times in a row, the notifier values will be reset to zero.
Restriction. The response to the request for feed.json at the address specified in the manifest must be of the type Content-Type: application / json .
Feed.json is a JSON file with the following structure:
{
"notifications": [
{"
where the attribute icon name accepts one of these predefined values:
while the attribute number is the number of non-viewed messages of the selected type. When creating a file, we recommend entering 0 . The attribute value will be updated automatically in the future.
The color of icons is determined automatically; if the widget has a dark background, the notifier will have a light color, and vice versa.
Restriction. A widget can display no more than three notifiers. If the feed file specifies more than three notifiers, the widget will display the first three of them.
Example of the widget description with notifiers
feed.json file
{ "notifications": [ {"bell": 1}, {"friend": 2}, {"message": 1} ], "refresh_time" : 2 }
Values of notifiers to display on the site"s Tableau widget in Yandex Browser
Widget design requirements
You need to define the background color and logotype image for the website widget.
Tip. The background color should correspond to either the company"s signature color or the website"s main background color.
Logotype requirements
The logotype image should meet the following requirements:
Examples of good and poor logotypes
Examples of widget design
| Site | youtube.com | yandex.com | bbc.com | twitter.com |
| Fill color | #3b5998 | #ffffff | #000000 | #00adec |
| Widget background |  |  |  |  |
| Logo |  |  |  |  |
| Result |  |  |  |  |
После того, как мы установили браузер или решили пользоваться установленным по умолчанию, нам нужно решить с помощью какого поисковика мы будем получать нужную нам информацию.
Самым популярным сайтом-поисковиком в мире стал «Google», однако среди русскоязычных пользователей первое место стабильно занимает «Яндекс».
Думаю, это как раз тот случай, когда стоит последовать за большинством.
Давайте рассмотрим поближе, какие «удобства и вкусности» нам предлагает Яндекс.
Поисковый сайт Яндекс начинает «общение» с нами при помощью основного своего интерфейса — . Чтобы открыть её, нужно набрать в адресной строке любого браузера yandex.ru :
Поиск сайта yandex.ru
Поисковик продемонстрирует нам свою главную страницу. Здесь можно найти новости, биржевые сводки, погоду и многое-многое другое.
Однако, не многие пользователи обращают внимание на то, что главную страницу самого популярного поисковика можно настроить «под себя».
Что такое виджеты Яндекса.
Главная страница yandex.ru состоит из блоков с информацией, которые и являются виджетами. Некоторые виджеты представляют из себя небольшие приложения — часы, календарь и т.д. Остальные — это ссылки на популярные информационные и развлекательные ресурсы (сайты).
Вся свежая информация появляется на сайте и отображается в виджете. Поэтому можно увидеть множество обновлений, не выходя с главной страницы поисковика.
Вот так выглядит страница поисковика по умолчанию:
Однако есть множество виджетов, которые не отображены на главной странице по умолчанию, а так же, предполагаю, что некоторые из видимых вам не нужны. Давайте настроим их по своему усмотрению.
Как установить виджеты Яндекса.
Сначала проверим функции удаления и настройки имеющихся блоков.
Для начала нужно зайти в Настройки => Настроить Яндекс .
У виджетов появился серый фон, обозначающий их границы, кнопочки настройки (шестерёнки) и удаления блока (крестик).
С удалением, думаю, вопросов не возникнет: не нужен блок — щёлкаем по крестику ЛКМ, виджет удаляется.
Содержимое окон настроек для разных виджетов различается. Например, в приложении Расписание можно настроить станции отправления и назначения, а также временной интервал, расписание которого будет отображаться.
Сначала пройдёмся по тем виджетам, которые уже установлены на странице. Удалим ненужные и подкорректируем при желании настройки тех, которые мы оставили. Теперь можно зайти в каталог и посмотреть, что ещё предлагает нам Яндекс.
Каталог виджетов.
Для входа нужно найти в левом нижнем углу браузера кнопку Добавить новый виджет .
В каталоге виджеты сгруппированы по темам. Выбираем тему или вбиваем в строку поиска слово, непосредственно связанное с предположительным названием виджета, который хотим найти.
Например:
Для установки необходимо навести указатель мышки на значок заинтересовавшего виджета, после чего кликнуть на кнопку Добавить .
Дальнейшие действия проделываем на основной странице. Нам ещё раз предлагается сделать выбор — оставить выбранный блок или удалить. Если визуальный интерфейс нас устраивает, подтверждаем кликом ЛКМ на Установить .
После выбора всех интересных виджетов, нужно найти для них наилучшее месть на странице. Эта опция доступна сразу после входа в настройки Яндекса. Чтобы переместить информационный блок, нужно навести видоизменённый курсор на тот виджет,который собираемся двигать, зажать его ЛКМ и передвинуть в нужном направлении.
А на сегодня о виджетах всё. Приятной вам навигации.
Открывается Табло - панель с виджетами сайтов, которые вы чаще всего посещаете. По умолчанию на Табло установлены виджеты некоторых сервисов Яндекса.
Чтобы перейти на нужный сайт, нажмите на его виджет (на нем отображается логотип и, если виджет открывает не главную страницу сайта, название страницы).
Совет. Чтобы быстро открыть нужный виджет на Табло, используйте сочетания клавиш:
в Windows: нажмите Ctrl + T , а затем Alt + 1, 2... ,
в macOS: нажмите ⌘ + T , а затем Ctrl + 1, 2... ,
где 1, 2... - это номера виджетов на Табло (слева направо и сверху вниз).
Набор и последовательность виджетов на Табло можно настроить вручную .
Примечание. Чтобы изменить размер Табло, нажмите на любой виджет правой клавишей мыши и выберите команду Размер Табло → Нормальный или Размер Табло → Увеличенный . Если выбрать команду Размер Табло → Подстраивать под окно браузера , то при уменьшении окна браузера размер виджетов тоже будет меняться.
Автоматический подбор сайтов для Табло
В процессе установки браузер подбирает сайты для Табло на основе импортированной из других браузеров истории - на Табло попадают сайты, которые вы открывали чаще других. Если при установке вы не импортировали историю, на Табло отображается набор сайтов по умолчанию.
Яндекс.Браузер периодически обновляет на Табло виджеты, которые вы не закрепили . Добавляются сайты, которые вы чаще других ищете через Умную строку или открываете через Табло.
Сайты, удаленные с Табло вручную, добавляться на него автоматически больше не будут. Чтобы вернуть такой сайт на Табло, добавьте его сами.
Добавление виджетов на Табло
Откройте Табло.
Под Табло нажмите Добавить → Сайт .
Укажите сайт, который вы хотите добавить на виджет Табло. Вы можете выбрать сайт из списков Популярные или Недавно посещённые , а также ввести его адрес вручную.
Ограничение. На Табло можно разместить до 20 виджетов.
Редактирование виджетов
Чтобы управлять содержимым Табло, перейдите в режим редактирования:
В режиме редактирования вы можете:
","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"circle","direction":["top","left"],"alt":"Удалить виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","left"],"alt":"Закрепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["bottom","right"],"alt":"Открепить виджет","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Отредактировать виджет","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">
| Добавить подпись и введите название сайта. | |
| Дополнительные возможности редактирования | |
|---|---|
| Изменить сайт, на который ведет виджет | Нажмите значок и введите адрес сайта в строку под Табло. |
| Добавить название сайта на виджет | Нажмите значок , затем в строке под Табло нажмите кнопку Добавить подпись и введите название сайта. |
| Откорректировать название сайта на виджете | Нажмите значок , затем исправьте название сайта в строке под Табло. |
Папки с виджетами на Табло
Вы можете группировать виджеты в папки. Например, по умолчанию виджеты со ссылками на сервисы Яндекса сгруппированы в одну папку.
Создать папку с виджетами Удалить папку с виджетами
Синхронизация Табло
На разных устройствах у вас могут быть разные любимые сайты, поэтому Табло на устройствах формируется независимо друг от друга.
Чтобы узнать, какие виджеты закреплены на Табло на любом из синхронизированных устройств:
Выберите папку с названием устройства. Сайты, закрепленные на Табло, располагаются в верхней части открывшегося списка.
После этого на вкладке Другие устройства сайты, закрепленные на Табло, отображаться не будут.
Табло после переустановки ОС
Если на компьютере были переустановлены операционная система, а затем браузер, Табло обновится - на нем появятся виджеты по умолчанию. Но просмотреть список сайтов, закрепленных на Табло до переустановки, вы можете с помощью синхронизации (она привязана к имени устройства).
В списке устройств нажмите папку с именем компьютера до переустановки ОС. Откроется список сайтов, закрепленных на Табло до переустановки.
Если такой папки нет, то имя компьютера после переустановки, скорее всего, не изменилось. В этом случае браузер не считает компьютер новым устройством и не показывает папку с данными до переустановки. Переименуйте компьютер (Панель управления → Система и безопасность → Система → Дополнительные параметры системы → Имя компьютера ) и подождите немного, чтобы данные синхронизировались с сервером. Затем откройте вкладку Другие устройства и откройте папку со старым именем компьютера.
Пропадают виджеты на Табло
Виджеты на Табло меняются, так как их список автоматически формируется из страниц, которые вы чаще всего посещаете.
Чтобы виджет всегда находился на одном и том же месте, закрепите его:Сейчас
","hasTopCallout":true,"hasBottomCallout":true,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Закладки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["bottom","right"],"alt":"Недавно закрытые вкладки","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true},{"shape":"circle","direction":["top","right"],"alt":"Загрузки","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"circle","direction":["top","right"],"alt":"Вкладки, открытые на другом устройстве","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false},{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["bottom","left"],"alt":"Дополнения","coords":,"isNumeric":false,"hasTopCallout":false,"hasBottomCallout":true}]}}\">
","hasTopCallout":true,"hasBottomCallout":false,"areas":[{"shape":"rect","alt":"","coords":,"isNumeric":false},{"shape":"circle","direction":["top","right"],"alt":"Прежнее расположение всех ссылок на одной панели","coords":,"isNumeric":false,"hasTopCallout":true,"hasBottomCallout":false}]}}\">
\nAPI Табло - виджета сайта в визуальных закладках. В статье рассмотрен процесс его создания.
Если пользуетесь Яндекс.Браузером, визуальными закладками в 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 и очень приятно удивился, в нем уже встроено табло и подхватывает все виджеты .
Спасибо за внимание. Надеюсь, эта информация поможет вам в создании Яндекс.Табло.
