Время для прочтения: 3 мин. 22 сек.

Выделите свой сайт в Экспресс-панели Opera

Настольная версия браузера Opera, начиная с версии 11.10, позволяет владельцам сайтов определять, как их сайт будет отображаться в миниатюрах Экспресс-панели. По-умолчанию, для отображения используется скриншот целой веб-страницы. Теперь появилась возможность указывать значок через CSS или в теле веб-страницы.

Оглавление

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

Значки в HTML5

Вы, возможно, знакомы со значками закладок. Впервые они были представлены в 5-й версии Internet Explorer в 1999 году. Хотя, они и не были включены в спецификацию HTML4, производители браузеров в конце концов согласились включить поддержку значков как значение атрибута rel элемента <link>. Компания Apple позже расширила поддержку значков в своих сенсорных устройствах через apple-touch-icon. Согласно спецификации HTML5, в настоящее время icon является валидным стандартизированным значением атрибута rel.

Объявление значка для Экспресс-панели

Объявление значка для Экспресс-панели во многом схоже с объявлением значка сайта. Необходимо лишь добавить элемент <link> в секцию head веб-страницы:


<head>
    <title>My Opera</title>
    <link rel="icon" type="image/png" href="http://path/to/logo.png">
</head>

Значок для Экспресс-панели должен быть:

  • Размером минимум 114 × 114 пикселов. Значки меньшего размера будут игнорироваться;
  • файл должен быть формата PNG, JPG или GIF. Файлы формата SVG пока не поддерживаются. В случае использования анимированных изображений, будет отображаться только первый кадр.

По-умолчанию, максимальный размер значка составляет 256 × 160 пикселов. Значки большего размера будут уменьшены до подходящих размеров (демо). Изменить значения по-умолчанию минимального и максимального размера значка можно в меню настроек браузера в opera:config.

Также Opera 11.10 поддерживает apple-touch-icon, apple-touch-icon-precomposed и image_src.

Использование нескольких значков

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


<head>
    <title>My Opera</title>
    <link rel="icon" type="image/png" href="http://path/to/128x128image.png">
    <!-- Это будет иконка Экспресс-панели -->
    <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

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

Экспресс-панель с учетом содержимого

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

  • Использование view-mode:minimized в CSS;
  • испольхзование HTTP-заголовка X-Purpose;
  • автоматическая перезагрузка.

Использование view-mode:minimized

Рисунок 1: Экспресс-панель в Opera 11.10

Рисунок 1: Экспресс-панель в Opera 11.10

Параметр view-mode определяет то, как будет указываться стили в зависимости от режима просмотра. Используя view-mode:minimized, вы можете определять альтернативные стили отображения содержимого, предназначенного для Экспресс-панели. Свойство view-mode работает аналогично device-width. Стили должны содержаться в блоке @media.


@media screen and (view-mode: minimized) {
    body {
        color: #fff;
        background: #b20000;
    }
}

Вы также можете подключить CSS-файл и выставить значение аттрибута media так:


<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">

Пример с использованием view-mode:minimized здесь.

Помните, что view-mode:minimized переключает окно просмотра в Экспресс-панели на 256 × 160 пикселов.

Использование HTTP-заголовка X-Purpose

Также есть возможность использовать различные URL для Экспресс-панели, каждый запрос которой содержит дополнительный HTTP-заголовок X-Purpose: preview.

[code]
GET / HTTP/1.1
Host: www.bbc.co.uk/news
X-Purpose: preview
User-agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.99 Version/11.10
[/code]

При обнаружении данного HTTP-заголовкка вы можете выбрать, какой URL будет использоваться, определить файлы, которые отправятся на Экспресс-панель, или вывести специально заготовленное для Экспресс-панели содержимое. Заметьте, что такого же эффекта не будет, когда пользователь перейдет на сайт из Экспресс-панели.

В примере ниже, мы используем директиву mod_rewrite сервера Apache для перенаправления всех запросов Экспресс-панели на адрес /preview.html (вам, возможно, захочется конкретизировать запросы в конкретной ситуации):

[code]
RewriteEngine On
RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.*) /preview.html
[/code]

Или быть может вы предпочтёте использовать серверную обработку запросов на каком-либо языке. Ниже приведен пример на PHP:


<?php
if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
    // Send Speed Dial content
} else {
    // Send regular content
}
?>

Автообновление через определенный интервал

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

  1. используя элемент <meta>:

    <meta http-equiv="preview-refresh" content="3600">
  2. возвращая HTTP-ответ Preview-Refresh:

    [code]Preview-Refresh:3600[/code]

Данный интервал указывается в секундах, т.е. значение 3600 будет равно 1 часу.

Система приоритетов

Приоритет в первую очередь отдается свойству view-mode:minimized в CSS. Если стили недоступны, браузер будет искать объявление значка для страницы. Если ничего не будет объявлено либо файл будет не доступен или поврежден, будет использоваться стандартный метод — добавление снимка целой страницы.

Поддержка в продуктах Opera

Пока эти улучшения доступны только для пользователей настольной версии браузера Opera.

Спасибо Степану Медникову за замечательный перевод

Для справки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>