cssing :: Архив :: Слайсы на kremlin.ru

Слайсы на kremlin.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Очень мило

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

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

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

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

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

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

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

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

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

1. <div class="hslice entry-content" id="documents">
2. <h2 class="entry-title">Новости</h2>
3. <!–Адрес куда IE будет ходить при обновлении, сюда же –>
4. <a rel="entry-content" href="http://news.kremlin.ru/slice/news" style="display: none;" ></a>
5. <ul class="entry-content">
6. список новостей
7. </ul>
8. </div>

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

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

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

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

Ссылки

• Подробная статья на Хабрахабре
• Про слайсы на MSDN
• Слайсы на других русскоязычных сайтах

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

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

XHTML/CSS, веб стандарты