Слайсы на kremlin.ru

12 March, 2010

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

Сегодня запустили слайсы на 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. </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. Но я решил удовлетвориться одним рабочим вариантом :)

Ссылки

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

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

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

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

Heller | 1. 12 March, 2010

К вопросу “а зачем?”:
На портал приходит значительная доля ie8, по объективным причинам.

Никита | 2. 12 March, 2010

Ты сайт медведеву верстаешь ?

akella | 3. 12 March, 2010

Да, я работаю над этим сайтом в составе «Опытного Креативного Бюро»

progg.ru | 4. 12 March, 2010

Слайсы на kremlin.ru…

Trackback from progg.ru…

Александр | 5. 12 March, 2010

Главное чтобы людям было удобно.

Toxa | 6. 13 March, 2010

Отлично описано! Очень полезная фишка!

ArtemChertov | 7. 15 March, 2010

Интересно! Пока не приходилось сталкиваться.
Спасибо, Юр :)

Samter | 8. 27 March, 2010

Полезная информация. Никогда раньше не пользовался этими слайсами.
Еще раз спасибо.

Чистяков Денис | 9. 8 April, 2010

Спасибо за полезный и доходчивый обзор, как простая, приятная и удобная мелочь на сайте — самое оно.
Я правильно понимаю, что туда можно и поисковую форму поместить например, если поиск востребован, или какой то фильтр для каталога?
В том плане что это получается полноценная HTML страница отрендеренная IE, да?

akella | 10. 8 April, 2010

Точно, они сами на msdn говорят что это очень похоже на iframe. Все что угодно в этом окошке. И сам слайс отдельная полноценная страничка со своим доктайпом и прочим

Del'ka | 11. 15 April, 2010

К слайсу применяются не только инлайновые стили, но и стили прописанные в css исключительно для слайса.

Чтобы задать разные стили для слайса и его вида внутри страницы я делал так:

Допустим слайс у нас лежит в div.content

в css:
slice {стили применяемые только к слайсу}
div.content slice {стили применяемые к слайсу на странице, они перебивают стили просто слайса}

inst | 12. 22 February, 2012

Расскажите, пожалуйста, как это работает в IE9?
Так сказать, два года спустя.

Оставить комментарий