Gereford

Сделайте ваш сайт более привлекательным в Экспресс-Панели

Thursday, March 17, 2011 8:31:50 AM

css, icons, speed dial, html, Opera, enhancements, view-mode, x-purpose

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

Содержание

Использование логотипа
Использование определенного контента (содержимого) для записи в ячейку Экспресс-Панели
Приоритет Экспресс-Панели
Поддержка Opera

Использование логотипа

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

Иконки в HTML5

Вы наверняка знакомы с иконками заклладок. Впервые они были введены в Internet Explorer 5 в 1999 году. Хоть они и не были включены в спецификацию HTML4, разработчики браузеров в конце концов согласились ввести ссылку на иконку, добавив поддержку icon в качестве аттрибута rel для элемента link. В последующем компания Apple ввела данную возможность для своих touch устройств через 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, JPEG или GIF. SVG изображения пока не поддерживаются. При использовании анимированного изображения будет использоваться только его первый кадр.

По-умолчанию максимальный размер иконки может составлять 260 пикселей в ширину и 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">
    <!-- Данная иконка будет отображаться в Экспресс-Панели -->
    <link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>

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

Использование определенного контента
(содержимого) для записи в ячейку Экспресс-Панели

Сейчас есть несколько новых способов задать определенный контент (содержимое) для ячейки Экспресс-Панели: view-mode:minimized через CSS, использовать заголовок X-Purpose HTTP, и автообновляемый. В данном разделе рассмотрены все способы.

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

The Speed Dial screen in 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;
    }
}

Вы также можете задать ссылку на внешний файл стилей, и установить значение аттрибута media равным (view-mode: minimized)

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

Смотрите как это работает в нашем примере view-mode: minimized.

Помните, что view-mode: minimized позволяет установить размер вилимой области для Экспресс-Панели равным 260 пикселей по ширине и 195 пикселей по высоте.

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

Для ячейки Экспресс-Панели также можно использовать различные URL адреса. Связано это с тем, что каждый запрос Экспресс-Панели будет включать дополнительный заголовок 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

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

В приведенном ниже примере мы используем Apache mod_rewrite для перенаправления всех запросов Экспресс-панели на другие URL адреса на /preview.html (you'll probably want to be more specific than this in the real world).

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

Вы также можете использовать серверные языки для определения данного контента (содержимого) с адреса URL. Ниже приведен пример на языке PHP.

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

Автообновляемое содержимое с указанным интервалом времени

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

Использовать тег meta:

<meta http-equiv="preview-refresh" content="3600">

Установив Preview-Refresh в качестве заголовка ответа:
```
Preview-Refresh:3600
```

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

Приоритет Экспресс-Панели

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