• Страница 1 из 1
  • 1
Форум » Уроки html » Уроки html для новичков » API Табло
API Табло
ReactorДата: Воскресенье, 09.03.2014, 19:12 | Сообщение # 1
Статус: Offline
Лейтенант
Сообщений: 48
Награды «0»
-
+
«1»
API Табло позволяет каждому вебмастеру самостоятельно настроить внешний вид виджета для своего сайта, повысив его привлекательность перед пользователями. Делается это достаточно просто и не требует какой-либо поддержки в будущем.
Основные преимущества использования API Табло
  • Более высокая кликабельность настроенных виджетов в сравнении с закладками и виджетами, созданными автоматически.
  • Возможность информировать пользователя при помощи уведомлений, что способствует его возвращению на сайт.Табло браузера содержит мини-эскизы (виджеты) страниц, которые пользователь посещает наиболее часто. Виджет состоит из логотипа на градиентном фоне и, возможно, заголовка сайта. Также виджет может отображать уведомления — например, о новых личных сообщениях.Пример виджета:

    Владелец сайта (вебмастер) может настроить внешний вид виджета своего сайта. Для этого необходимо создать манифест виджета и разместить ссылку на манифест на каждой странице сайта.
    Ссылка на манифест размещается в HTML-коде страницы, внутри тега :
    
    Код
    <link rel="yandex-tableau-widget" href="manifest.json" />
    т.е.
    Код
    <html>
    <head>
    <link rel="yandex-tableau-widget" href="manifest.json" />
    <link type="text/css" rel="stylesheet" href="/style.css" />
    </head>

    где manifest.json — URL, по которому можно загрузить виджет.
    Виджеты в Табло обновляются с определенным интервалом.

    Требования к оформлению виджетов

    Для виджета сайта необходимо определить цвет заливки и картинку-логотип.
    Цвет заливки — это либо главный фирменный цвет компании-владельца, либо основной фоновый цвет сайта.
    Картинка-логотип должна отвечать следующим требованиям:
    • Формат: PNG.
    • Фон: прозрачный.
    • Ширина: макс. 150 пикселей.
    • Высота: макс. 60 пикселей.
    • Логотип должен гармонировать с цветом заливки виджета.
    • Не следует стремиться заполнить логотипом все допустимое пространство на виджете. Основной индикатор — это цвет виджета, логотип служит лишь дополнением.


    Рекомендуемые размеры логотипа относительно виджета показаны на рисунке:

    Длинные горизонтальные логотипы: ширина до 150 пикселей, высота до 20 пикселей.
    Короткие горизонтальные логотипы: ширина до 100 пикселей, высота до 30 пикселей.
    Квадратные логотипы могут быть до 50 пикселей в высоту.
    Слишком большой логотип:Удачный размер логотипа:

    Иконки для уведомлений, отображаемых на виджете, должны отвечать следующим требованиям:
    Параметры иконкиШирина, макс.14 пикселейВысота, макс.14 пикселейРазмер, макс.10 КБПримечание. Подробнее об уведомлениях и их описании см. раздел Поле feed (передача уведомлений на виджет).

    Примеры виджетов
    Сайт facebook.com  yandex.ru  afisha.ru  lenta.ru
    Цвет заливки #3b5998  #ffffff  #ce2125  #efeddf
    Фон виджета


    Логотип


    Результат


    Манифест — это JSON-файл следующей структуры:
    создайте документ и назовите его - manifest.json
    
    Код
    {   
        "version": "1",   
        "api_version": 1,   
        "layout":   
    {   
        "logo": "ССЫЛКА НА ЛОГОТИП",   
        "color": "#НОМЕР ЦВЕТА",   
        "show_title": false   
    }   
           
    }


    Сообщение отредактировал Reactor - Понедельник, 10.03.2014, 18:19
    • «Пред. тема | След. тема»
    ReactorДата: Воскресенье, 09.03.2014, 19:22 | Сообщение # 2
    Статус: Offline
    Лейтенант
    Сообщений: 48
    Награды «0»
    -
    +
    «1»
    		У меня получился вот такой результат.
    До

    После
    ProsvetekvatorДата: Понедельник, 10.03.2014, 21:15 | Сообщение # 3
    Статус: Offline
    Полковник
    Сообщений: 152
    Награды «2»
    -
    +
    «7»
    		Хорошая новость, может на досуге тоже попробую здесь виджет создать.
    Проблемы по установке скриптов пишите на форум: тыц
    Пообщаться здесь
    Форум » Уроки html » Уроки html для новичков » API Табло
    • Страница 1 из 1
    • 1
    Поиск:
    Понравилась тема? Расскажи друзьям...