Табло — инструкция по созданию. Яндекс.Табло — инструкция по созданию Как настроить виджеты в яндекс браузере

Большинство пользователей привыкли уже к главной странице Яндекса, но ее легко можно изменить. Например, сделать главную страницу такой:

Настройки действуют только для того браузера, с которого настраиваете!

Начнем с оформления. Чтобы выбрать тему для главной страницы, необходимо нажать значок в правом верхнем углу и, в появившемся меню, выбрать строку «поставить тему».

Внизу страницы появляются анимированные темы, щелкнув по которой можно посмотреть, как будет выглядеть страница.

Для удобства подбора необходимой темы, можно выбирать из предложенных разделов, например, «лето», «весна», «мода» и т.д. Разделы указываются в верхней части появившегося меню с темами. Так же темы делятся на «все» и «новые».

Если темы не устраивают, можно перелистывать темы стрелочками вправо и влево.

После выбора темы, необходимо нажать кнопку «сохранить тему», которая находится снизу. Если передумали устанавливать тему, то можно закрыть окно или нажать кнопку «отмена».

Второй пункт меню настроек внешнего вида Яндекса — «настроить Яндекс». Здесь задаются те виджеты , которые Вы будете видеть на главной странице Яндекс-поиска.

При нажатии «настроить яндекс», переходим в режим замены и удаления ненужных виджетов. Виджеты можно просто перетаскивать с помощью мышки на место другого виджета (навести на виджет, зажать левую кнопку мыши и тащить), либо их можно удалять, нажимая крестик в правом верхнем углу. У некоторых виджетов есть собственные настройки, в зависимости от показываемой информации. Например, виджет «яндекс-пробки» можно настроить на любой город, а так же задать маршрут «работа-дом».

Кроме показанных виджетов, можно выбрать и другие. Для этого нажимаем в левом верхнем углу ссылку «добавить новый виджет».

Слева можно выбрать интересующую тематику виджета, а справа расположены сами виджеты с коротким описанием. Внизу страницы находится нумерация для перехода на следующие или предыдущие страницы.

Чтобы выбрать виджет, наводим на него курсор мышки, появляется кнопка добавить, и кликаем левой кнопкой мыши (кликать не обязательно именно по кнопке, достаточно кликнуть по гаджету или названию).

После этого виджет появляется на главной странице и его можно перетаскивать на место других виджетов. Необходимо выбрать действие — «оставить» или «удалить».

В верхнем меню имеются кнопки — «вернуть» для возвращения удаленных виджетов (если не удаляли, то такой кнопки не будет), «сбросить настройки» — возвращает все как было изначально, так же сбрасывается все оформление страницы, «отмена» для возврата того вида, который был до изменений и «сохранить» — для сохранения изменений.

В поле для ввода названия города начинаем вводить начальные буквы города и далее выбираем его из выпадающего списка. Самостоятельно город ввести не удастся, только выбирать из списка. Здесь же можно установить город по умолчанию, то есть город будет определяться автоматически. Поставив галочку в пункте «не уточнять мое местоположение», Вам не будут показываться всплывающие окна с вопросом, например, «вы в Москве?» и двумя вариантами ответа — «да» и «нет». После выбора города, нажимаем кнопку «вернуться».

Всем привет! В конце прошлого года ко мне на почту пришло письмо от команды Яндекс.Браузера, в котором шла речь про API Табло и виджет сайта . Честно сказать, я не являюсь постоянным пользователем этого браузера, однако сообщение вызвало неподдельный интерес.

  • пользователи Яндекс Браузера;
  • пользователи других браузеров с установленным расширением Визуальные закладки .

На данный момент Яндекс браузеру всего лишь чуть больше года, однако его доля среди пользователей рунета составляет порядка 5% и охват постоянно растет.

Представьте себе, что среди этих пяти процентов находится Ваша , почему бы не выделить свой сайт на фоне остальных?

А если учесть, что расширение «Визуальные закладки» доступно для других популярных браузеров, таких как Google Chrome, Mozilla Firefox, Internet Explorer — то число пользователей API Табло будет намного больше. Нужно ли создавать виджет сайта в том случае, если лично Вы не пользуетесь Яндекс.Браузером? Однозначно да!

Как создать виджет сайта для API табло

Начну рассказывать и показывать как это сделать, а за основу в качестве примера возьму свой блог. Но для начала давайте определимся, какие изменения нам предстоит сделать и как они отразятся на табло. Мы сможем:

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

Для того чтобы внести все эти модификации нам понадобится создать файл манифеста для виджета с именем manifest.json , который будет содержать блок метаданных на языке XML. Затем подключаем файл в заголовке страницы, внутри . Я разместил файл в корневом каталоге, но если хотите — можете использовать другой путь:

1 <link rel = "yandex-tableau-widget" href = "/manifest.json" / >

Содержимое файла:

1 2 3 4 5 6 7 8 9 10 { "version" : "1.0" , "api_version" : 1 , "layout" : { "logo" : "https://сайт/wp-content/themes/lime/images/manifest.png" , "color" : "#e9ffd0" , "show_title" : false } }

{ "version": "1..png", "color": "#e9ffd0", "show_title": false } }

Внимание! Вам потребуется внести свои изменения в код перед применением! Что означают указанные параметры:

  • version — версия виджета. Любое число, например 1 или 2; 1.0 или 2.0 и т.д.
  • api_version — номер версии API Табло. На данный момент существует только 1.
  • logo — укажите абсолютный путь к графическому файлу логотипа.
  • color — цвет заливки фона.
  • show_title — отображение заголовка страницы. Может принимать два значения: false — не показывать; true — показывать.

В своем примере я не стал приводить настройки значков уведомлений, потому как не компетентен в данном вопросе — здесь потребуется помощь программиста. Среди возможных вариантов применения — уведомления о новых письмах (как это реализовано у Яндекс почты), число лайков и прочее. Более подробную техническую документацию можно найти на странице Яндекс API , в том числе примеры настройки уведомлений.

К логотипу предъявляются особые требования:

  • графический файл должен быть формата PNG с прозрачным фоном;
  • максимальные размеры: ширина 150px, высота 60px.

Все виджеты Яндекс Табло обновляются автоматически с некоторым заданным интервалом, понадобится время чтобы увидеть изменения. Возможно придется несколько раз почистить браузера. Однако, если Вы не желаете ждать, то откройте в Яндекс браузере страницу chrome://tableau-widget и укажите в строке URL манифеста, после чего нажмите на кнопку Проверить:

Если код манифеста оформлен верно — появится надпись «Манифест виджета верен», в противном случае возникнет ошибка. Есть и другой способ увидеть изменения сразу — вручную добавить сайт на табло:

После продолжительных манипуляций в конце-концов я получил такой результат:

Он конечно не претендует на звание лучшей дизайнерской работы 😀 По крайней мере отражает суть и заданный стиль оформления блога. А тайтл я не стал выводить (show_title), т.к. нельзя настроить отступы и цвет шрифта — в моем случае название является частью изображения. А Вы уже сделали виджет своего сайта для табло браузера и визуальных закладок Яндекса?

Всем привет! Сегодня планирую подробно рассказать про Яндекс.Табло, очередное детище Яндекса которое, пока, не представляет из себя чего-нибудь полезного для самостоятельного продвижения сайтов, а используется для визуального отображения виджета вашего сайта на панели быстрого доступа в Яндекс.Браузере. Самим браузером я начал пользоваться сравнительно недавно и отображение в нем закладок в стиле плиток восьмой винды, мне очень понравился, а особенно, возможность настройки этих плиток. В саму панель виджеты сайтов попадают по принципу частоты посещаемости или просто, добавления туда вручную.
Не долго думая я сел и сделал Яндекс.Табло для своего . В процессе создания возникли некоторые косяки, происхождение которых я не могу объяснить, но методом «Научного тыка» их удалось победить. Именно про это и пойдет речь далее.
Не смотря на то, что браузер от Яндекса очень молод, он уже успел набрать популярность среди русскоязычных пользователей. Исходя из этого становится очевидным, что 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 ) и нажимаем «Проверить», если все хорошо, то вы сможете лицезреть виджет вашего сайта:

Потом вы его можете смело добавить в закладки и похвалиться перед друзьями своим уникальным виджетом в Яндекс.Табло

Помимо этого есть еще несколько функций, которые я не добавлял, т.к. не вижу пока особого смысла в них, но кратко опишу их:

  1. Возможность добавления уведомлений, количество не ограничено, но отображается не более 3 штук. За них отвечает поле feed. Выглядят они в виде иконок 14х14px, которые могут уведомлять пользователей о чем-либо. Меняются при каждом обновлении Яндекс.Табло.
  2. Логотип и цвет виджета могут иметь как статические значения, так и зависящие от языка интерфейса браузера.

Небольшое дополнение от 25.12.2013 г. — Сегодня скачал и установил FireFox и очень приятно удивился, в нем уже встроено табло и подхватывает все виджеты .

Спасибо за внимание. Надеюсь, эта информация поможет вам в создании Яндекс.Табло.

Думаю, многие знают о возможности добавления иконки сайта на рабочий стол мобильного устройства. Это удобно и причины могут быть разные (нету мобильного приложения, предоставляющего туже информацию, либо вы хотите сразу открыть определенную страницу сайта и т.д.). За некоторые свойства того, как будет отображаться сайт и как будет выглядеть иконка после добавления и отвечает файл манифеста.

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)
3. Splash screen
4. Цветовую тему
5. Ориентацию экрана
6. Начальный url
и многое другое

Подробнее

Чтобы показать, как manifest влияет на отображение сайта, я создал простое, тестовое веб-приложение, которые возвращает название региона по коду.

Сначала зафиксируем положение дел до добавления файла манифеста.

После того как пользователь добавил иконку, она будет выглядеть так (на Андроид 5.0)
Название браузер выдернул из тега tilte. Так что, если у вас нету файла манифеста, то хотя бы title должен быть нормальным. А вот иконка в виде буквы “G” появилась сама (не понятно, почему именно G).
А сам сайт будет выглядеть так

Тут, собственно, ничего особенного, кроме того, что мы можем убрать адресную строку, чтобы приложение было похоже на нативное.

Встречайте, manifest.json!

С примером манифеста можно ознакомиться по этой ссылке . Кратко пройдемся по параметрам:
name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)
display – отвечает за то, как будет отображаться ваш сайт (с адресной строкой без нее и т.п.)
background_color – устанавливает цвет страницы до того как она загрузилась. Пока страница не загрузилась пользователь видит перед собой белое пустое поле. Чтобы как-то разукрасить его серые будни, можно изменить этот цвет. Например, поставить цвет фона сайта.

Генерируй и властвуй.

Конечно, можно написать весь манифест ручками, но это скучно, долго и можно ошибиться. Уже нашлось немало умельцев, которые автоматизировали этот процесс. Ниже небольшой обзор инструментов для автоматической генерации манифеста.

brucelawson.github.io/manifest - все что вам нужно – заполнить поля (есть краткое описание каждого параметра, так что процесс довольно легкий), остальное за вас сделает генератор.

www.favicon-generator.org - хоть прямое назначение этого сайта генерировать иконки, а не манифест. Он все же его создает и в отличии от предыдущего у вас уже будут и иконки (для iOS и Аднроид) и манифест. Правда, манифест придется подправить (изменить имя и прочее настройки).

manifest-validator.appspot.com - этот инструмент предназначен для валидации вашего манифеста.

Результат

Итак иконки нарисовали, манифест сделали. Дальше надо сообщить браузеру о манифесте, добавив в тег head следующие

Все. Смотрим, что получилось
Иконка:

Слева до. Справа после (иконка получилась невпечатлительная, с удовольствием поменяю, если пришлете лучше). Тут уже заметно, что Android использовал имя из поля short_name, так как name не помещается, видимо.

Загрузка приложения:

Тут самые приятные изменения. Во-первых, вместо белого экрана вы видите подобие splash screen, который сам создается системой из иконки, полного имени и цвета, указанного в манифесте (возможно, это происходит только на android 5.0 выше). Во-вторых, этот splash screen плавно исчезает, что визуально красиво.

Сам сайт:

Тут тоже все стало лаконично. Без UI браузера сайт смотрится гораздо лучше и больше похож на нативное приложение.

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

Открывается Табло - панель с виджетами сайтов, которые вы чаще всего посещаете. По умолчанию на Табло установлены виджеты некоторых сервисов Яндекса.

Чтобы перейти на нужный сайт, нажмите на его виджет (на нем отображается логотип и, если виджет открывает не главную страницу сайта, название страницы).

Совет. Чтобы быстро открыть нужный виджет на Табло, используйте сочетания клавиш:

    в 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}]}}\">

    \n
    • Сергей Савенков

      какой то “куцый” обзор… как будто спешили куда то