Веб-слайсы

http://www.code-magazine.com/Article.aspx?quickid=0811052
  • Перевод
Существуют четыре вида действий с веб-слайсами:
  • Находка: пользователь находит веб-слайс на странице и добавляет его.
  • Обновление: Internet Explorer использует механизм загрузки ленты для периодической проверки изменений веб-слайса.
  • Уведомление: Когда веб-слайс обновляется, его текст в панели Избранное становится жирным.
  • Отображение: пользователь может просмотреть изменения веб-слайса нажав на него на панели Избранного.

Существуют два способа для обнаружения веб-слайса: на странице, наведя мышь на область веб-слайса(Изображение 1) или через кнопку лент на Командной строке (Изображение 2)

image
Изображение 1

image
Изображение 2

Как только пользователь подписался на веб-слайс, он может получить к нему доступ через панель Избранное. Изображение 3 демонстрирует веб-слайс eBay, который позволяет пользователю отслеживать аукцион. В отличие от нажатия на кнопку обновления страницы аукциона каждые две минуты, пользователь может подписаться на аукцион и наблюдать за изменениями автоматически.

image
Изображение 3

Анатомия веб-слайсов


Веб-слайсы доступны через простое примечание в HTML файле. Несколько элементов обязательны для представления веб-слайса в коде:
  • класс hslice
  • атрибут id
  • класс entry-title

Существует возможность объединить несколько текстовых span для создания заголовка, который будет обновляться, когда обновляется веб-слайс.
<div class="hslice" id="main">
  <h2 class="entry-title">Seattle Weather</h2>
  <p>It is <span class="entry-title">
    62°</span>.</p>
</div>

В этом примере, Internet Explorer покажет “Seattle Weather 62°”, когда веб-слайс обновится.

Необязательные элементы


Данные элементы не обязательны для использования в веб-слайсах:
  • класс entry-content
  • rel=feedurl
  • ttl
  • endtime

Класс entry-content


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

По умолчанию ширина и высота окна предварительного просмотра определяется по размеру элемента entry-content.

Как и класс entry-title, веб-слайс может содержать более одного элемента entry-content. Все элементы будут объединены в один для просмотра.

Учтите, по соображениям безопасности, предварительный просмотр веб-слайса не разрешает размещать скрипты или ActiveX компоненты. Следовательно, html формы и поля также не поддерживаются. Вы можете использовать ссылки, которые содержат нужные параметры для совершения действий. Навигация будет осуществлена через текущую активную закладку. Для обхода данного ограничения используйте альтернативный источник отображения, как описано ниже.

rel=feedurl


Любая ссылка в веб-слайсе, которая определяет атрибут rel со значением feedurl, будет рассмотрена как альтернативный источник для обновлений. Альтернативный источник может быть другой веб-страницей с аннотациями к веб-слайсу или единственному элементу ленты. IE подписывается на альтернативный источник и более не использует исходную страницу для обновления веб-слайса.
<div class="hslice" id="auction">
  <a rel="feedurl"
    href="http://www.example.com/
    slice.aspx?auctionId=..."
></a>
  <span class="entry-title">Auction Item</span>
</div>

ttl


Свойство ttl позволяет устанавливать, как часто Internet Explorer будет обновлять веб-слайс.

endtime


Свойство endtime может быть использовано для указания, когда элемент более не активен.
Например, веб-слайс может отслеживать полёт, который прибывает в 7 вечера.
<div class="hslice" id="1">
  <p class="entry-title">Flight 056</p>
  <div class="entry-content">
    <p>Departure time: 1:00 PM EST</p>
    <p>Status: On time</p>
    <p>Flight length: <abbr class="endtime"
      title="2008-09-01T13:00:00-19:00:00">6
      hours</abbr></p>
  </div>
  <p>This item updates every <span
    class="ttl">5</span> minutes.</p>
</div>


Альтернативный источник обновлений


Альтернативный источник обновлений полезный для управления фоновыми обновлениями от клиента с отдельным сервером. Это возможно, если предоставить альтернативную веб-страницу или ленту, используя свойство feedurl (описанное выше). Изображение 4 демонстрирует, как происходит этот процесс. В данной диаграмме, вы можете увидеть, что существуют две веб-страницы, которые предоставляют один и тот же веб-слайс. Basic.html – это оригинальная веб-страница, на которой пользователь находит веб-слайс и подписывается на него.Update.html – связан с Basic.html, и служит как альтернативное обновление веб-страницы.

image
Изображение 4

Basic.html:

<div class="hslice" id="auction">
  <a rel="feedurl"
    href="http://www.example.com/
    update.html#auction-update"
/>
  <span class="entry-title">Auction Item</span>
</div>

Update.html:

<div class="hslice" id="auction-update">
  <h2 class="entry-title">Auction Item</h2>
  <p class="entry-content">Current bid is
    $32</p>
</div>


Альтернативный источник отображения


Когда пользователь нажимает на веб-слайс на панеле Избранное, появляется окошко с сохраненным содержимым элементы entry-content. Альтернативный источник отображения может быть использован для размещения интерактивного веб-содержимого, например, скрипта или ActiveX компонента (Изображение 5)

image

Basic.html:

<div class="hslice" id="auction">
  <span class="entry-title">Auction Item</span>
  <a rel="entry-content"
   href="http://www.example.com/display.html"/>
</div>

Display.html:
<html>
  <body>
    <div>Current bid is $32</div>
  </body>
</html>


Создание вашего первого веб-слайса


Для демонстрации обсуждаемой выше темы, я покажу вам, как создать простой веб-слайс. Base 9 – это несуществующая местная джаз группа. Они используют свой сайт, для информирования людей о будущих выступлениях и желают использовать веб-слайсы для уведомления пользователей о новых запланированных концертах.

Первый шаг – решить, какое содержание будет отображаться в веб-слайсе и как он будет расположен на странице. Internet Explorer 8 Web Slice Style Guide предоставляет лучшие примеры веб-слайсов. Следуя руководству по стилям, убедитесь, что содержание и структура веб-слайса оптимальны.

Веб-слайс будет содержать 5 элементов:
  1. Заголовок
  2. Изображение группы
  3. Месторасположение концерта
  4. Дата и время концерта
  5. Ссылка для покупки билетов


Используя элементы, описанные выше, очень просто собрать весь код веб-слайса воедино:
<div class="hslice" id="upcoming_show" 
   style="width: 320px; height: 240px">
  <div class="entry-content"
     style="width: 320px; height: 240px">
    <h2 class="entry-title"
      style="text-align: center">
    Base 9 show on 7/9</h2>
    <img src="band.jpg"
       style="width: 100px; height: 100px;
          float:left;
          margin-right: 20px"
>
    <ul><li>Where: Hotel Sierra</li>
      <li>When: Friday 7/9/08 @ 5pm</li>
      <li><a href="http://buytickets.com">
        Buy tickets for the show</a></li>
      </ul></div></div>


Данный пример использует внутренние стили, но также возможно использовать стили, объявленные в блоке
Важно отметить, что страница, содержащая ваш веб-слайс должна быть размещена на веб-сервере (не локально), для того чтобы Internet Eplorer мог определить содержимое и разрешить пользователю подписаться на веб-слайс.

Однажды добавленный слайс появляется на панели Избранное, как показано ниже.

image
Изображение 5

Заключение


Создать веб-слайс очень просто и это отличный способ доставлять содержимое вашего сайта напрямую пользователю через панель Избранное IE. Для более детального ознакомления по созданию веб-слайсов посетите Internet Explorer Developer Center
Метки:
Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 17
  • +2
    «Простое примечание в коде» называется «микроформатом».
    • 0
      Судя по всему вещь довольно удобная, жалко что работать будет только в IE.
      • 0
        Плагин под Firefox, который повторяет функционал IE, я так подозреваю, что не весь https://addons.mozilla.org/ru/firefox/addon/8494
        • 0
          Я сам пользуюсь Google Chrome. А вообще говорю с точки зрения разработчика.
          • –1
            Значит продвигаем в массы идею, написав плагин для Chrome, ведь стандарт webslice описан в msdn =)
          • 0
            в FF 3.5.х не работает… только в 3.0.х
            • 0
              Автор немного подзабросил поддержку, можно прочитать в блоге, что у него начались проблемы, так как вышел стандарт посвежее, а он его не внедрил. Но сам факт, что потуги были — радует.
        • +3
          Учтите, по соображениям безопасности, предварительный просмотр веб-слайса не разрешает размещать скрипты или ActiveX компоненты. Следовательно, html формы и поля также не поддерживаются.
          Что-то не очень понятно, как из первого утверждения следует второе.
          • –3
            а не проще ли просто отлавливать (грабить) на странице определенные области с помощью их выделения или определения id или div'a?
            Безо всяких мудреных форматов, которые еще надо начать внедрять (и в браузеры и на сайты).
            К тому же большинство сайтов будут без них.
            • +2
              Тогда и RSS не нужно, можно просто грабить. Тут без стандарта никак, вы ведь почитайте сам стандарт, как можно без стандарта сделать поддержку ttl, endtime…
              • 0
                при добавлении определенной области можно указать как часто ее обновлять, разве этого не достаточно?
                то, что сказал я — намного проще в реализации для любого браузера и не увеличивает кода и без того громоздких страниц сайтов в 1,1-1,5 раза.
                • 0
                  можно указать как часто ее обновлять

                  Как можно указать эти данные, если не известно откуда их считывать, как называется поле, которое хранит данные и т.п. Без стандарта будет хаос, каждый браузер будет стремиться добавить собственный функционал и т.п.
                  • 0
                    Эти данные можно указать — означает, что их укажет сам пользователь, например: страница сайта работы — выделяем определенный кусок и указываем показывать его обновления с периодичностью 2 часа при изменении этого блока. Браузер выделяет этот кусок как div или ячейку таблицы и показывает только его.

                    Я не говорю, что новые стандарты — это плохо. Просто когда они исходят от Микрософта… можно и задуматься, нельзя ли это сделать по-другому, проще и быстрее, да еще и для всех сайтов. Чтобы все хорошие сайты не надо было переделывать (экономия трудозатрат) проще сделать подобные дополнения к браузерам.
                    • 0
                      Вы говорите с точки зрения пользователя, а если разработчик не хочет утруждать или давать возможность пользователю изменять данные. Ту же частоту обновления. Нет ничего плохого, что стандарт придумал MS.
                      когда они исходят от Микрософта

                      MS уже не та, которой была 5 лет назад. В данном случае я не вижу ущербности в стандарте. Не вижу в нем «особенностей» MS.
                      • 0
                        «разработчик не хочет утруждать или давать возможность пользователю изменять данные»

                        разработчик сайта или программы-браузера???

                        если сайта — так его даже спрашивать никто не будет, если функционал весь в браузере.

                        если браузера — так с чего он должен утруждать? Пользователь выделил блок на сайте дополнительным инструментом «Выделение обновляемой области» и увидел диалог с настроками, одна из которых время обновления, заранее выставленная на какое-либо среднее значение, а также большая кнопка «Создать». Он может и не изменять время.

                        PS: Я не протестую против Микрософт и ее нового подхода и стандартов, просто внедряя или принимая что-либо, надо и своей головой подумать о других вариантах, не кидаться наивно на «новое». Быть может и я не прав, есть и другие варианты реализации данной идеи «просмотра обновлений определенной области на сайтах».

                        Кстати, если это все-таки будет общепринятая технология в будущем она не обеспечит возможности пользователю выбирать абсолютно любой объект на странице, а лишь те, которые ему приготовил админ сайта или даже разработчик CMS, на которой сайт работает.
              • 0
                Большинство сайтов (по посещаемости) уже давно с ними — ieaddons.com/ru
              • 0
                +1 к предыдущему комменту. Давно хотел ознакомится с технологией, все времени не было. Спасибо автору прежде всего за ссылку.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.