После недавнего выхода браузера от Microsoft – Internet Explorer 8, решил снова опубликовать статью годичной давности посвящённую WebSlice’ам в этом достаточно спорном браузере.
Вступление
Я не являюсь большим поклонником Internet Explorer, однако новая функциональность вышедшего позавчера IE8, меня заинтересовала.
Честно говоря, изначально я решил, что это нечто вроде возможности добавления куска страницы в дешборд из Сафари. Однако, потыкав мышкой по странице, я понял, что дело совсем в другом.
Я думаю, что те, кому надо, уже знают об этой возможности давно, ну, а тем кому интересно, прошу почитать эту краткую заметку.
Что же это такое?
Вообще, идея очень даже приятная. Возможность предоставления пользователю блоков, которые он сможет добавлять себе в избранное. Очень удобно, для слежения за обновляющейся информацией, причём заходить на саму страницу не надо. Кроме того, реализация предпологает наличие большого числа таких блоков, связь блоков с информационным источником (скажем RSS), разный дополнительный функционал (скажем, описание ttl – time to live, времени актуальности блока) и даже аутентификацию.
Но самое приятное это реализация. Это не новая разметка, не новый неподдерживаемый тег хтмл, не расширение джава скрипта и даже не новый ActiveX-контрол. Это микроформат. Вообще здорово, что Майкрософт ими пользуется…можно сказать в народ пошла. Таким образом, вне ИЕ8 такой блок останется просто блоком…а вот в “исследователе интернета” блок подсветится специальным значком и появится возможность добавить его к себе в закладки.
Рассмотрим пример
Имеем страницу, на которой один блок время от времени обновляется. На самом деле, туда выводится последняя строчка из Твиттера.
Требуется: создать WebSlice, показывающий эти самые обновления.
Все крайне просто, пишем следующий код в страницу:
<div class="hslice" id="twitter_updates">
<div class="entry-title" style="display:none">%заголовок блока%</div>
<div class="entry-content">
%Содержание блока%
</div>
</div> |
Получается вот такое:
В списке подписок на RSS появляются теперь и слайсы:
При наведении на блок, возникает характерный знак:
А вот так оно выглядит уже после “подписки” на обновления:
Формат простейшего слайса очень прост:
1. Оформить его в элемент с классом hslice
2. Добавить два блока
а) entry-title — название слайса. Что интересно, без него не работает. Так что пришлось его прятать при помощи display:none
б) entry-content — содержимое слайса
«entry-title» и «entry-content» — части микроформата hAtom. Класс «hslice» можно вешать на любой элемент, не обязательно div.
Теперь о некоторых подводных камнях:
Во-первых, без entry-title’a у меня не заработало. Конечно, не камень, но стоит иметь ввиду.
Во-вторых возникают некоторые проблемы с СSS, к примеру inline-css не отразил мне background с картинкой, а стиль ссылки вообще так и не заработал (впрочем, делал я это вчера в пол четвертого ночи…как-то захватила внезапно тяга к знаниям).
Без указания ID в блоке он не определяется слоем.
С кодировкой windows-1251 просмотр слоя из избранного превращается в просмотр знаков препинания (у меня только кириллические символы были). Установка кодировки UTF-8 спасла ситуацию.
Выводы
Как мне кажется, отличная штука. При минимальных затратах, можно расширить свой сервис этими маленькими слайсами, как это уже сделали Facebook, Ebay и другие, и получить отличную обновлялку информации которая вам нужна. Я уже предстляю как много сервисов я бы туда засунул. Да-да…всё из-за нехватки дешборда в винде и линухе :) Впрочем, любители FireFox могут найти ниже ссылку на плагин и для своего любимого браузера.
Если у вас есть IE8, попробовать слайс вот тут можно уже сейчас.
Сссылки:
- http://code.msdn.microsoft.com/Release/ProjectReleases.aspx?ProjectName=ie8whitepapers&ReleaseId=567 — Internet Explorer 8 Beta 1 Whitepapers, официальное описание.
- http://addons.mozilla.org/ru/firefox/addon/8494 — WebChunks, альтернативный вариант для Firefox.
- http://habrahabr.ru/blogs/webdev/21355/ — Оригинал статьи.
- http://www.microsoft.com/windows/Internet-explorer/default.aspx — скачать Internet Explorer 8.
- http://www.ieaddons.com/en/webslices/ — галерея слайсов на сайте Майкрософт.
Leave a Reply