Pull to refresh

Выделите свой сайт в Speed Dial

Reading time 4 min
Views 17K
Original author: Tiffany Brown
Настольная версия браузера Opera, начиная с версии 11.10, позволяет владельцам сайтов определять, как их сайт будет отображаться в миниатюрах Экспресс-панели. По-умолчанию, для отображения используется скриншот целой веб-страницы. Теперь появилась возможность указывать значок через CSS или в теле веб-страницы.

Логотип


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

Значки в HTML5

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

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

Объявление значка для Экспресс-панели во многом схоже с объявлением значка сайта. Необходимо лишь добавить тег в секцию 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 пока не поддерживаются. В случае использования анимированных изображений, будет отображаться только первый кадр.
По-умолчанию, максимальный размер значка составляет 260 x 195 пикселей. Значки большего размера будут уменьшены до подходящих размеров (демо). Изменить значения по-умолчанию минимального и максимального размера значка можно в меню настроек браузера в 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">
    <!-- This will be the speed dial icon -->
    <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

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

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


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

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

image
Рисунок 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 переключает окно просмотра в Экспресс-панели на 260 х 195 пикселей.

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


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

При обнаружении данного HTTP-заголовкка вы можете выбрать, какой URL будет использоваться, определить файлы, которые отправятся на Экспресс-панель, или вывести специально заготовленное для Экспресс-панели содержимое. Заметьте, что такого же эффекта не будет, когда пользователь перейдет на сайт из Экспресс-панели.
В примере ниже, мы используем директиву mod_rewrite сервера Apache для перенаправления всех запросов Экспресс-панели на адрес /preview.html (вам, возможно, захочется конкретизировать запросы в конкретной ситуации):
RewriteEngine On
RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.*) /preview.html

Или быть может вы предпочтёте использовать серверную обработку запросов на каком-либо языке. Ниже приведен пример на PHP:
<?php
if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
    // Send Speed Dial content
} else {
    // Send regular content
}
?>

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

Чтобы сделать содержимое Экспресс-панели более динамичным, вы можете установить интервал для обновления, который будет использоваться после добавления сайта в Экспресс-панель. Это можно сделать двумя способами:
  • используя meta-тег:
    <meta http-equiv="preview-refresh" content="3600">
    	
  • возвращая HTTP-ответ вида:
    Preview-Refresh: 3600
Данный интервал указывается в секундах, т.е. значение 3600 будет равно 1 часу.

Приоритет


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

Продукты, поддерживающие данный функционал


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

Для справки


Ссылки из спецификации HTML5 WHATWG
Спецификация view-mode

p.s. Приму все поправки и неточности в переводе. Лучше в личку ;)
Tags:
Hubs:
+82
Comments 36
Comments Comments 36

Articles