Красивая иконка на табло Яндекс Браузера
Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
Первая из них — это то, что старые версии сафари почему-то не воспринимали нормально иконку — она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку apple touch выше всех остальных — другие браузеры заменять на неё не будут, но зато в сафари съест её первой и всё отобразится нормально. То есть порядок я теперь использую такой:
Но перейдём ко второй, основной проблеме. Имя этой проблемы — Яндекс.Браузер (Браузер Яндекс? Я.Браузер?). Кто-нибудь, расскажите ребятам, что вечно называть свои приложения и сайты по-разному — это плохой маркетинговый ход (Я.Диск, потом Яндекс.Диск или Яндекс Диск, после — просто Диск и так со всеми приложениями по кругу).
Так вот, Яндекс Браузер наотрез отказывался нормально показывать иконку сайта на своём табло. Табло — это не грубое название лица, а страница, которая появляется при открытии новой вкладки. Если быть точным, он вовсе не показывал никакую иконку — просто писал текстом «mihailgok».
Как хороший мальчик, первое, о чём я подумал — надо прочитать API, наверняка добрые люди из Яндекса всё в нём описали. Каково же было моё удивление, когда на странице API Яндекс Браузера я увидел это:
НИ-ЧЕ-ГО. Ладно, подумал я, тогда мы гуглим (простите, яндексим) проблему. И действительно выясняем, что, у Яндекса некогда было API, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.
- Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
- Также в веб-архиве откопал-таки старое API.
Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.
Вот, что нужно сделать (коротко).
- Создать файл манифеста.
- Создать изображение (можно использовать квадратное, но лучше 100 на 300).
- Подключить файл манифеста.
Файл манифеста
Начнём с самого сложного — манифеста.
< // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "version": "", "api_version": , "layout": , // ОПЦИОНАЛЬНАЯ ЧАСТЬ "feed": >где:
version — версия вашего манифеста;
api_version — версия апи, используемого манифестом;
layout — информация вашего «виджета».
layout выглядит так:
"layout": < "logo": "https://mihailgok.ru/tableau.png", "color": "#0035FF", "show_title": none >,logo — путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.
В API рекомендуют высоту до 50, но разрешения экранов с 2014 года поднялись. Я увеличил параметры в 2 раза и всё работает.
color — цвет фона;
show_title — информация о том, как отображается title страницы.
Уточнения
Поля logo и color могут иметь как статические значения, так и зависящие от языка интерфейса браузера. В этом случае нужно указать варианты для разных языков и обязательно тот, который будет отображаться по умолчанию (т.е. когда у пользователя локаль браузера отлична от перечисленных в списке).
"layout": < "logo": < "en": "", "ru": "", "default": "" >, "color": < "en": "", "ru": "", "default": "" > >Начиная со второй версии API Табло поле show_title может принимать одно из трех значений:
- all — заголовок отображается независимо от того, для какой страницы сайта он был создан;
- internal — заголовок отображается только в том случае, если виджет был создан для внутренней страницы сайта (по умолчанию);
- none — заголовок не отображается.
Ранее была возможность отображать нотификаторы, однако не уверен, что это работает сейчас.
Чтобы добавить нотификатор на виджет, в манифесте необходимо описать:
- адрес сервера, с которого запрашиваются данные о нотификаторах,
- формат ответа сервера (json или xml),
- название и значок нотификатора.
Нотификаторы обновляются при каждом открытии Табло. Браузер отправляет запросы на адрес в поле url, ожидая от сервера ответа со значениями. Если сервер три раза подряд вернул некорректный ответ, то значения нотификатора обнуляются.
Ограничение. На виджете могут быть отображены только три нотификатора.
"feed": < // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "url": "", "format": "", // ОПИСАНИЕ НОТИФИКАТОРА "notifiers": [ < "name": "<уникальное название нотификатора>", //Значок нотификатора загружается с сервера сайта: "icon": "<URL значка нотификатора>", //либо используется ОДИН ИЗ предустановленных значков: "icon": "%BELL%", "icon": "%EARTH%", "icon": "%FRIEND%", "icon": "%MESSAGE%", "icon": "%PHOTO%", "icon": "%CHAT%", // ОПЦИОНАЛЬНАЯ ЧАСТЬ "<span xmlns="http://www.w3.org/1999/xhtml" >path<div ><iframe src="about:blank" ></iframe><div ><i ></i><div ><div ><span >[no-highlight[</span><p xmlns="" ><a ></a>Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле <span >name</span> с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле <span >path</span>. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей <span >name</span> и <span >path</span> и соответствующие ответы сервера показаны в <a href="/web/20140929153100/http://api.yandex.ru/tableau/doc/index.xml#widget-ex">примерах для JSON- и XML-ответов</a>.</p><span >]no-highlight]</span></div></div></div></div></span>": "<путь к значению нотификатора>", >] >Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле name с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле path. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей name и path и соответствующие ответы сервера показаны в примерах для JSON- и XML-ответов.
Уточнение
Начиная с третьей версии API Табло для нотификатора можно указать параметр type — тип значения в нотификаторе:
- int (по умолчанию),
- float (если в десятичной части более двух цифр, то будут отображены только первые две).
Итоговый манифест для сайта выглядит вот так:
Создание файла логотипа и подключение манифеста.
- Создаём файл 300px в ширину и 100px в высоту.
- Убираем белый фон (делаем прозрачным).
- Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.
- Сохраняем как файл как png.
Генератор делает примерно тоже самое.
В итоге подключаем наш манифест на страницу:
И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.
Я сделал белые иконки и основной цвет фоном, так показалось красиво.
Одна проблема — чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, — можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.
Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, — всё отобразится по-старому.
Как вернуть старое табло с сайтами сохраненное в аккаунте в яндекс браузере ?
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Как поставить логотип сайта на плитку в табло Яндекс.Браузера?
Вижу что у некоторых сайтов при добавлении на табло грузится их логотип. Как прописать для своего сайта? Уже перерыл весь интернет. Старый манифест уже не работает Подробнее про манифест При добавлении сайта Яндекс.Браузер сам создает имя из домена и накладывает цвет сайта (пример с плиткой Login).
- Вопрос задан более года назад
- 1107 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Frontend разработчик
Ответ поддержки Яндекс.Браузера:
К сожалению, настройка внешнего вида виджетов на Табло в настоящий момент не поддерживается. Однако я передала пожелание команде браузера, она обязательно его рассмотрит. Возможно, такая опция появится в будущем. Спасибо!
У самого такая же история с несколькими сайтами.
Ответ написан более года назад
Поправочка после общения:
Правильно ли я понимаю, что заменить требуется только логотип? Если да, то, пожалуйста, пришлите нам его в виде svg- или png-файла. Если требуются еще какие-то правки, то опишите и их.
Спасибо за ожидание! Я передала ваше сообщение ответственному специалисту. Нам понадобится некоторое время для того, чтобы поправить внешний вид виджета.
Табло в Яндекс Браузере
Для современных браузеров характерно использование специальной страницы, на которую попадает пользователь при запуске программы или открытии новой вкладки. Яндекс Браузер тоже имеет такую страницу, одним из элементов которой является «Табло». Оно служит для отображения наиболее посещаемых сайтов и позволяет быстро совершить переход по нужному адресу. У многих людей возникает трудность с тем, как настроить, уменьшить или увеличить табло в Яндекс Браузере, поэтому стоит более подробно рассказать о нем.
Зачем нужно Табло
Предназначение этого элемента программы заключается в отображении на экране сайтов, которые пользователь посещает чаще всего. Каждая страница имеет небольшое изображение. Если кликнуть по нему, то будет открыта новая вкладка, на которой будет загружен нужный сайт. Яндекс браузер самостоятельно составляет топ посещаемых страниц исходя из данных истории и на основании этого выводит их на табло. Также здесь могут размещаться популярные сервисы Яндекса, такие как: карты, почта погода и многое другое.
При первой установке программы, будут отображены самые посещаемые страницы в других браузерах, установленных на компьютере или ноутбуке, такие как Google Chrome, Mozilla, Opera. Если же установка была произведена на новое устройство, то Яндекс самостоятельно сформирует на табло наиболее посещаемые интернет-ресурсы. Примечательно, что на разных устройствах: компьютер, планшет или смартфон, синхронизированных между собой, табло будет иметь отличия. Это связано с тем, что сфера применения каждого из устройств может быть отличной от других. Поэтому разработчики предусмотрительно отключили синхронизацию этого элемента браузера.
Алгоритм определения и вывода на табло популярных сайтов в большинстве случаев действует правильно. Тем не менее бывают случаи, когда программа по непонятным причинам убирает с панели те или иные виджеты, а на их место может добавить непопулярный ресурс. Поэтому разработчиками предусмотрена ручная корректировка данного элемента программы. Пользователь может самостоятельно установить в табло нужные ему сайты, убрать лишнее с экрана, изменить название и даже отключить табло.
Как настроить
Разработчиками предусмотрительно были добавлены различные настройки, которые позволяют изменять внешний вид табло и сделать его наиболее удобным для каждого пользователя.
Добавление страниц
Для того чтобы открыть табло в Яндекс Браузере достаточно кликнуть по кнопке, которая открывать новую вкладку вверху экрана.
Дальнейшие действия выполняются в следующем порядке:
1.Нажать кнопку «Добавить».
2.Выбрать вариант «Сайт» или «Папку».
3.Появятся прозрачное меню для добавления. Система предложит на выбор ввести адрес нужной страницы или же выбрать из списка ранее посещенных и популярных сайтов.
В поисковую строку можно скопировать адрес самостоятельно. Также, если пользователь начнет вводить название, система предложит ему популярные названия.
Остается только нажать кнопку «Готово».
В случае если пользователь видит нужный ему ресурс там, где расположены картинки, ему достаточно будет кликнуть по ней и система автоматически добавит ее на табло.
Редактирование вкладок
Разработчики добавили возможность изменить информацию по каждой вкладке и сделать описание. Для этого необходимо навести курсор мыши на изображение, после чего в правом верхнем углу появятся несколько значков. Нужно кликнуть по значку настроек, который выглядит как шестеренка механизма.
После этого можно наблюдать, что появилось меню, в котором пользователь может поменять адрес сайта и редактировать его описание в нижней строке. Чтобы сохранить изменения, нужно нажать кнопку «Готово» внизу экрана.
Если строка с описанием отсутствует, нужно нажать кнопку «Добавить подпись».
Для удаления сайта с табло необходимо навести курсор на картинку и нажать на значок крестика в правом верхнем углу.
По прошествии времени программа может самостоятельно вносить изменения на табло и убрать с экрана некоторые сайты, выводя другие им на замену. Чтобы этого не произошло, нужно закрепить страницу. Для этого следует навести курсор на изображение и нажать на значок открытого замка. После этого он сменится на значок закрытого замка, а сайт будет закреплен в табло.
Пользователи могут менять местами сохраненные в табло страницы. Для перемещения вкладки необходимо навести курсор на ее изображение и зажать левую кнопку мыши. Дальше следует, не отпуская левую кнопку, перетащить картинку на другое место, а затем отпустить ее.
Уменьшение и увеличение табло
В старых версиях была предусмотрена функция, позволявшая менять масштаб табло. Размер сохраненных вкладок в новых версиях программы не подлежит изменению. На экране они будут занимать место в соответствии с установленным разрешением и диагональю монитора. Количество столбцов может быть максимум 5, а вот количество рядов может быть от 1 до 4. Тем самым разработчики позволяют пользователям уменьшить или увеличить размер табло в Яндекс Браузер.
На данный момент предусмотрено 20 мест в табло. Для того чтобы увидеть его в полном размере, необходимо заполнить все 20 вкладок описанным выше способом через кнопку «Добавить».
После того как все вкладки будут заполнены, кнопка «Добавить» станет недоступной.
Для тех, кому требуется разместить больше сайтов в табло, предусмотрена функция создания папок. Для этого необходимо:
1.Оставить незаполненным одно место в табло.
2.Нажать кнопку «Добавить».
3.Выбрать пункт «Папку».
4.Нажать кнопку «Добавить сайт».
Теперь можно перетаскивать сайты в папку и освободить место под новые на табло.
Для уменьшения размеров табло на экране потребуется удалить сайты. Для этого наводят на изображение каждого виджета и нажимают на крестик в правом верхнем углу.
Как отключить и вернуть исчезнувшее табло
В новых версиях программы сделать так, чтобы табло пропало с экрана невозможно. Для тех, кому не нравится, что этот элемент браузера постоянно выскакивает при открытии новой вкладки можно посоветовать два решения проблемы.
При желании можно удалить все вкладки и табло полностью исчезнет с экрана. Для этого следует нажать на значок в виде крестика в углу изображения каждой закладки, отображенной на экране. Теперь можно наблюдать, что всплывающие ячейки табло исчезли и остались только несколько кнопок, отвечающих за открытие и добавление закладок и смену фона.
Другое решение проблемы того, что табло выскакивает при запуске программы заключается в настройке запуска стартовой страницы. При условии, что при закрытии браузера не осталось открытых вкладок, можно сделать запуск не рабочего стола программы, а стартовой страницы поисковой системы Яндекс.
Для этого нужно:
1.Зайти в настройки.
2.В графе «При запуске открывать» выбрать пункт «Ранее открытые вкладки».
3.Поставить галочку напротив пункта «Открывать yandex.ru, если нет вкладок».
Теперь при открытии браузера будут открываться используемые ранее вкладки или же стартовая страница поисковой системы.
Вернуть элементы табло на экран можно с помощью кнопки «Добавить». Процесс добавления закладок был описан выше.
В некоторых случаях табло может самостоятельно исчезнуть с экрана. Произойти это может по нескольким причинам, каждую стоит рассмотреть более подробно.
Вирусная атака
Одной из причин, почему исчезло табло в Яндекс Браузере является заражение компьютера вирусами. В этом случае необходимо скачать антивирус, такой как Kaspersky, Dr. Web, Avast или другой. Далее необходимо выполнить полную проверку компьютера на наличие вредоносных файлов.
Сбой в синхронизации
Для лучшей работы веб-обозревателя рекомендуется включить режим синхронизации. Доказано, что это улучшает работу браузера. Сделать это можно следующим образом:
1.Открыть настройки.
2.В разделе «Синхронизация» включить эту функцию, если она отключена.
3.Ввести логин и пароль от своего аккаунта.
4.Нажать кнопку «Показать параметры».
5.Убедиться в том, что возле пункта «Табло» поставлена галочка.
Устаревшая версия продукта
Регулярное обновление программы позволяет избежать сбоев в его работе. Рекомендуется устанавливать автоматическое обновление программы, но если этого не было сделано, то можно выполнить загрузку новой версии вручную. Для этого необходимо:
1.Открыть вкладку «Дополнительно» при вызове настроек в правом верхнем углу экрана.
2.Выбрать вкладку «О браузере».
3.На открывшейся странице будет показана информация о текущей версии. При выходе обновления будет отображаться кнопка «Обновить».
Как видите, табло в Яндекс Браузере – это удобный инструмент для быстрого доступа к любимым интернет-ресурсам. Возможность настройки и добавления множества вкладок ускоряет работу за компьютером. Для тех пользователей, кто не хочет использовать данный сервис предусмотрена возможность минимизировать его размер на экране монитора. Тем не менее, для большинства людей наличие такого элемента в программе является обязательным требованием, и они с большим удовольствием используют его.