Слайсы на kremlin.ru

12 Mar, 2010

Сегодня запустили слайсы на kremlin.ru. Небольшой рассказ чтобы упростить внедрение в будущем.

Что это вообще такое эти слайсы?

Это что-то вроде продвинутых закладок для IE8. Вы можете выбрать кусочек страницы, добавить его в Favorites. И после этого находясь уже на другом сайте, просмотреть этот кусочек. По клику на закладку откроется небольшое окошко с фрагментом другой страницы. Например это может быть погода, вот так это выглядит в слайсе от gismeteo:

Заметьте, что при этом я нахожусь на сайте Digg

Или это может быть десятка популярных линков Digg:

А теперь я на gismeteo, но держу руку на пульсе Digg! Я непредсказуем - согласитесь.

Идея в том, что вам не нужно заходить на сайт, можно загрузить только тот кусочек который важен. Но, обновлять так можно не любой фрагмент сайта, а только отдельные, предусмотренные сайтом. Фрагменты подсвечиваются примерно так:

Картинка кликабельна

Такая вот полезная мелочь. А для больших сайтов, как известно, все мелочи значимы.

Что это такое для кодера

Не более чем набор микроформатов (за нас придуманных названий классов). Ничтоже сумняшеся перейдем к коду, он очень прост:

<div class="hslice" id="whatever">
<div class="entry-title">Название слайса.</div>
<div class="entry-content">А тут то что будет отображаться в окошке слайса.</div>
</div>

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

<div class="b-news-main hslice" id="news">
<h2 class="entry-title">Новости</div>
<ul class="entry-content">...список новостей... </ul>
</div>

Это код с главной. А результат получился такой:

Очень мило

Неприятные мысли стали посещать меня в этот момент. Но я снова воспрял духом едва прочитал документацию до конца. Оказалось, из стилей наложенных на этот фрагмент на оригинальной странице, берутся только инлайновые, и никаких наследованных (body{font-size:12px} не применяется).

style="font-size:12px;" применился бы, но кому интересно марать свой чистый код.

Правильный путь

Можно, и я думаю нужно, подключать контент для слайса из отдельного файла. Какова бы ни была ваша страница, стили наложенные на фрагмент на сайте, вряд ли красиво переложатся в это маленькое окошко слайса в браузере.

В документации описано несколько путей. Нам подошел следующий.
Код на сайте:

<div class="b-news-main hslice" id="news-slice">
<h3 class="entry-title">Новости</h3>
<a rel="feedurl" href="/slice/news"></a>
...
</div>

Параметр feedurl используется для указания альтернативного источника для слайса, как раз то что нам нужно в данном случае.

А по адресу /slice/news находится файл который я хочу чтобы отображался в браузере.

При этом важно помнить, что внутри этого файла снова должен быть размечен слайс, поскольку IE рассматривает его именно как альтернативный источник, который снова надо парсить. Если просто вставить в этом файле какой-либо HTML (было бы логично) слайс не будет работать в браузере. Вот такое там содержимое прямо сейчас:

<div class="hslice entry-content" id="documents">
<h2 class="entry-title">Новости</h2>
<a rel="entry-content" href="http://news.kremlin.ru/slice/news" style="display: none;" ></a>
<ul class="entry-content">
список новостей
</ul>
</div>

Как видно, обычный слайс с которого мы начинали. И теперь наконец все работает! На этом мы пока и остановились. Слайс в действии можно видеть на этой страничке, а файл самого слайса берется отсюда. Выглядит это прямо сейчас вот так:

Слайс можно растянуть по вертикали чтобы уместилось больше новостей

А вот так распознается браузером:

После, я еще много игрался и комбинировал эти методы, если кому-то интересно, вы тоже можете окунуться с головой в увлекательный мир слайсов под IE8. Но я решил удовлетвориться одним рабочим вариантом :)

Ссылки

Надеюсь кому-то это сэкономит время в будущем, и буду рад вашему опыту!
В одном из следующих постов могу рассказать об опыте вёрстки этого большого проекта. И почему все получилось сделать валидным.

P.S.: Так как у меня windows XP, и в ней стоит родной IE6, который я не хотел терять, тестировал я все в SaaS решении Spoon.net. Нужно лишь установить плагин порядка 25 мегабайт, и можно запускать почти любой браузер (всё это работает правда пока под Windows).

12 комментариев к “Слайсы на kremlin.ru”

1.Samter | 27 Mar, 2010: Полезная информация. Никогда раньше не пользовался этими слайсами. Еще раз спасибо.
2.Del'ka | 15 Apr, 2010: К слайсу применяются не только инлайновые стили, но и стили прописанные в css исключительно для слайса. Чтобы задать разные стили для слайса и его вида внутри страницы я делал так: Допустим слайс у нас лежит в div.content в css: slice {стили применяемые только к слайсу} div.content slice {стили применяемые к слайсу на странице, они перебивают стили просто слайса}
3.akella | 08 Apr, 2010: Точно, они сами на msdn говорят что это очень похоже на iframe. Все что угодно в этом окошке. И сам слайс отдельная полноценная страничка со своим доктайпом и прочим
4.Чистяков Денис | 08 Apr, 2010: Спасибо за полезный и доходчивый обзор, как простая, приятная и удобная мелочь на сайте -- самое оно. Я правильно понимаю, что туда можно и поисковую форму поместить например, если поиск востребован, или какой то фильтр для каталога? В том плане что это получается полноценная HTML страница отрендеренная IE, да?
5.Heller | 12 Mar, 2010: К вопросу "а зачем?": На портал приходит значительная доля ie8, по объективным причинам.
6.Toxa | 13 Mar, 2010: Отлично описано! Очень полезная фишка!
7.Александр | 12 Mar, 2010: Главное чтобы людям было удобно.
8.progg.ru | 12 Mar, 2010: Слайсы на kremlin.ru... Trackback from progg.ru...
9.akella | 12 Mar, 2010: Да, я работаю над этим сайтом в составе «Опытного Креативного Бюро»
10.Никита | 12 Mar, 2010: Ты сайт медведеву верстаешь ?
11.ArtemChertov | 15 Mar, 2010: Интересно! Пока не приходилось сталкиваться. Спасибо, Юр :)
12.inst | 22 Feb, 2012: Расскажите, пожалуйста, как это работает в IE9? Так сказать, два года спустя.