Веб-разработка

индекс
236,88

WebSlices в Internet Explorer 8.0

Вступление


Я не являюсь большим поклонником Internet Explorer, однако новая функциональность тестового билда вышедшего позавчера IE8, меня заинтересовала.
Честно говоря, изначально я решил, что это нечто вроде возможности добавления куска страницы в дешборд из Сафари. Однако, потыкав мышкой по странице, я понял, что дело совсем в другом.
Я думаю, что те, кому надо, уже знают об этой возможности давно, ну, а тем кому интересно, прошу почитать эту краткую заметку.


Что же это такое?


Вообще, идея очень даже приятная. Возможность предоставления пользователю блоков, которые он сможет добавлять себе в избранное. Очень удобно, для слежения за обновляющейся информацией, причём заходить на саму страницу не надо. Кроме того, реализация предпологает наличие большого числа таких блоков, связь блоков с информационным источником (скажем RSS), разный дополнительный функционал (скажем, описание ttl - time to live, времени актуальности блока) и даже аутентификацию.

Но самое приятное это реализация. Это не новая разметка, не новый неподдерживаемый тег хтмл, не расширение джава скрипта и даже не новый activeX-контрол. Это микроформат. Вообще здорово, что Майкрософт ими пользуется...можно сказать в народ пошла. Таким образом, вне ИЕ8 такой блок останется просто блоком...а вот в "исследователе интернета" блок подсветится специальным значком и появится возможность добавить его к себе в закладки.

Рассмотрим пример


Итак, как только я понял, что это такое, подобно чувству учёного начала 20го века, сразу же возникло желание попробовать это на себе.
Имеем страницу, на которой один блок время от времени обновляется. На самом деле, туда выводится последняя строчка из Твиттера.

Страница

Требуется - создать WebSlice, показывающий эти самые обновления.

Все крайне просто, пишем следующий код в страницу:

<div class="hslice" id="twitter_updates">
<div class="entry-title" style="display:none">Mee's Twitter Updates</div>
<div class="entry-content">
%Содержание блока%
</div>

</div>


Получается вот такое:


В списке подписок на RSS появляются теперь и слайсы:


При наведении на блок, возникает характерный знак:




А вот так оно выглядит во время работы:


Формат простейшего слайса очень прост:
1. Оформить его в элемент с классом hslice
2. Добавить два блока
а) entry-title — название слайса. Что интересно, без него не работает. Так что пришлось его прятать при помощи display:none
б) entry-content — содержимое слайса

посмотреть профиль bolk добавляет:
Это называется «микроформат», причём «entry-title» и «entry-content» — части микроформата hAtom. Класс «hslice» можно вешать на любой элемент, не обязательно div.
Вот в общем-то и всё.


Теперь о некоторых подводных камнях:


Во-первых, без entry-title'a у меня не заработало. Конечно, не камень, но стоит иметь ввиду.
Во-вторых возникают некоторые проблемы с СSS, к примеру inline-css не отразил мне background с картинкой, а стиль ссылки вообще так и не заработал (впрочем, делал я это вчера в пол четвертого ночи...как-то захватила внезапно тяга к знаниям).

посмотреть профиль donPedro Указывает на дополнительные проблемы:

1. Без указания ID в блоке
он не определяется слоем.
2. С кодировкой windows-1251 просмотр слоя из избранного превращается в просмотр знаков препинания (у меня только кириллические символы были). Установка кодировки UTF-8 спасла ситуацию.


Выводы


Как мне кажется, отличная штука. При минимальных затратах, можно расширить свой сервис этими маленькими слайсами, как это уже сделали Facebook, Ebay и другие, и получить отличную обновлялку информации которая вам нужна. Я уже предстляю как много сервисов я бы туда засунул. Да-да...всё из-за нехватки дешборда в винде и линухе :) Впрочем, ждём реализации под FireFox. Почему бы и нет? :)


Если у вас есть IE8, попробовать слайс вот тут можно уже сейчас (ни в коем случае не реклама, ибо там ничего нет)
а официальное описание доступно вот тут:

Internet Explorer 8 Beta 1 Whitepapers
+27
7 марта 2008, 12:10
12

комментарии (97)

–1
dpigo #
Прошу прощения за занудство, но слово "ученый" пишется с одним "н".
0
meesix #
спасибо, исправляю :)
+6
meako #
Вот за что люблю файрфокс, так за то, что скорее всего, скоро напишут екстеншн реализующий в нем эту фичу:)
+2
meesix #
да-да-да :) полностью согласен. но без поддержки Майкрософт, такой микроформат вряд ли получил бы распостранение.
0
iBear #
И за то, что его, как и любой другой экстеншен, можно будет удалить. А в IE он теперь намертво =)
+1
meesix #
No Hollywars, please!
0
bolk #
Лично мне дополнительные возможности браузера не мешают.
–1
iBear #
В том-то и фишка! Хочешь добавляй, хочешь удаляй!
+7
bolk #
Фишка в программах вот в чём: поставил и работай.
0
meesix #
Вы явно не гик :)
0
bolk #
А вы почитайте мой сайт ;)
0
meesix #
Это блог чтоли? :) Ничего не понятно :
0
bolk #
Блог, что именно непонятно?
–1
meesix #
:) гиковость или негиковость
0
bolk #
Доделаю облако тегов, будет понятнее :)
0
meesix #
Договорились :) Главное не забыть потом посмотреть... кстати, спасибо за дискуссию :)
0
vercors #
А кто вам мешает для ИЕ плагины писать?
0
meako #
совесть =)
0
ruslan_sem #
уже есть :)
WebChunks 0.20
https://addons.mozilla.org/ru/firefox/addon/8494
0
meesix #
:) как раз всего год прошёл
0
ruslan_sem #
ну так релиз же вышел
:))) а я и не обратил внимание на год поста… только на месяц :)
0
meesix #
:) бывает. Ну, всёравно, сасибо за линк
0
ruslan_sem #
а не знаешь для этих webslices что-то в проксе или фаерволе специально настраивать не надо? а то у меня дома их показывает, а на работе нет, пишет «Internet Explorer не может отобразить» на всех слайсах…
0
meesix #
Да нет, они через http должны работать, по 80му порту. Ничего лишнего.
0
ruslan_sem #
я тоже так подумал, но от этого оно показывать не стало :)
0
Niketas #
Мне напомнило Yoono для Firefox, только тут содержимое обновляется.
0
bO_oblik #
Что бы это использовать надо дождаться когда у многих будет этот самый IE8, а пока, большая часть юзеров пользуется IE6(как не прискорбно).
0
elfiki #
ну... не так уж их и много...
Если смотреть на статистику одного из сайтов, чья направленность не носит ИТ-характера (на самом деле просто сайт одного из видов пива), то не так уж и много сейчас под ИЕ6, тем более что одно из декабрьских(или ноябрьских) обновлений для ВинХП был ИЕ7...
1. Internet Explorer 6.0 33,5 %
2. Internet Explorer 7.0 27,05 %
3. Opera 23,60 %
4. Firefox 14,39 %
0
bO_oblik #
Это "верх объективности" :)
Более объективную статистику можно увидеть здесь.
0
elfiki #
на хабре-то? сомневаюсь...
0
bO_oblik #
Я ссылки не могу постить, имел ввиду здесь:
http://www.liveinternet.ru/stat/ru/browsers.html
0
meesix #
Но это ведь лучше, чем 80%... )
+1
artyfarty #
очень порадовали графики. Заметно, что ночные спады у юзеров альтернативных браузеров меньше :)
0
bolk #
Мне больше нравится смотреть статистику портала «Яндекса»:
http://stat.yandex.ru/stats.xml?ReportID…

Там уж точно не айтишники. IE6 — почти 70% всех IE. Есть даже IE5 и IE4 (OMG!)
0
meesix #
:'(...надо скорее развивать no-ie
0
elfiki #
По тому же сайту статистика, но уже без версий:

1. Internet Explorer 60,62 %
2. Opera 23,60 %
3. Firefox 14,39 %
4. Safari 0,65 %
5. Mozilla 0,31 %
6. NetFront 0,27 %
0
meesix #
а что такое NetFront?
0
elfiki #
0
meesix #
спасибо буду знать :)
НЛО прилетело и опубликовало эту надпись здесь
0
meesix #
и вам спасибо, тоже буду знать :)
0
bolk #
Движок такой. Например, он используется в PSP и TheBAT!.
0
meesix #
:) и вам тоже спасибо... а я думал в ЗеБате что-то своё.
0
fatal #
Спасибо, не знал про TheBat! Тоже думал, что они что-то своё пишут...
НЛО прилетело и опубликовало эту надпись здесь
0
donPedro #
Отнюдь. Ничто не мешает уже сейчас поставить эти функции на сайт. Будет, во-первых, приятным бонусом для пользователей IE8, во-вторых, стимулом перейти на IE8 (сарафанное радио разрекламирует что "ого! там такое оказывается есть!").
0
meesix #
полностью согласен. дополнительная реклама, и хоть я против ИЕ как такового, но думаю что ИЕ8 лучше чем ИЕ6 :) надо теперь заставлять всякие вконтакте и прочие одноклассники использовать эту штуку ,чтобы больше народа перешло.
Ну и плюс, екстеншн под ФФ.

И дождаться релиза.
0
bolk #
А чем вас IE так не устраивает, что вы «против ИЕ как такового» я не понимаю?
0
meesix #
Идеалогия :) да нет, просто смотрите: IE6\7 криво поддерживает стандарты, использует еще и свои. а в 8ой хотят сделать поддержку тега, который будет разрешать неправильные стандарты. Ну что за нафиг? Только ради того,что это МС делать такие поблажки? Впрочем, я не хочу устраивать Холливоров, если народ резко перейдёт на 8ую версию, я буду только рад :)
0
bolk #
ну… вы, честно говоря, очень заблуждаетесь.
1) все браузеры поддерживают какие-то свои стандарты: расширенные атрибуты и селекторы для CSS, теги (например, CANVAS или SPACER) и так далее. Это, повторяю, есть у всех браузеров.

2) в IE8 по-умолчанию будет нормальный режим, как у всех браузеров. Они уже смирились с этим.
0
meesix #
не знаю, почему-то то, что работает в ФФ и Опере не обязательно работает в ИЕ.
0
bolk #
Ровно как и наоборот. Что это доказывает?
0
meesix #
Что в ИЕ не работает то, что должно работать по стандарту. Давайте бросим этот спор :) А вы правда предпочитаете ИЕ? :)
+2
bolk #
Нет, для сёрфинга использую исключительно «Оперу» :)

Просто нападки на IE необоснованы. Тем более после появления IE8.
0
donPedro #
Про подводные камни. 1. Без указания ID в блоке <div class="hslice"> он не определяется слоем. 2. С кодировкой windows-1251 просмотр слоя из избранного превращается в просмотр знаков препинания (у меня только кириллические символы были). Установка кодировки UTF-8 спасла ситуацию.
0
meesix #
хм... неприятно. Вы непротив, если я добавлю в статью, указав ваше имя, конечно :)
0
meesix #
(это конечно же вопрос, а не гипноз :))
0
donPedro #
Естественно не против :) И даже не из-за мании величая, а следуя концепции «правильного веба» — сгенерируем информацию общими усилиями :)
0
meesix #
отлично, спасибо :)
+1
bolk #
Это называется «микроформат», причём «entry-title» и «entry-content» — части микроформата hAtom. Класс «hslice» можно вешать на любой элемент, не обязательно div.
0
meesix #
да-да, я про микроформат писал. но о том, что это части микроформата не указал, спасибо..добавлю.
+1
ScorpAL #
Не работает если контент генерируется JavaScript'ом, например тот же Topics Anywhere для phpBB

Снова, не ради пиара, просто ради теста www.toyota-club.by
0
meesix #
а если жскрипт загружать внутри слайса?
+1
bolk #
Кроме того, в блоке может быть несколько entry-title и entry-content, внутри hslice может быть ещё элемент с классом endtime, где дата записывается в атрибуте title, в формате yyyy-mm-ddThh:mm:ss, например: 2008-03-07T14:56, так записывается expiration time (например, для аукционов).

Можно указать время обновления. Для этого надо задать элемент с классом ttl, значение текстовой ноды этого элемента будет временем обновления в секундах: <span class="ttl">800</span>.

Следующее что можно задать — URL RSS фида. Задаётся указанием значения "feedurl" атрибута "rel" у ссылки, причём внутри RSS-фида можно использовать тег endtime, который находится в пространстве имён mon (значение можно посмотреть в доке).
0
meesix #
да, я об этом упомянул. просто это как бы простейший туториал, по этому поводу отлично написано в офф.мануале. Но, спасибо за уточнение :)
+1
bolk #
Да,я дописал для полноты картины, чтобы интересующимся было понятнее что это.
0
bolk #
Ну и, наконец, в спецификации есть небольшое JavaScript API, возможность указания основного «slice», возможность отключения поиска slice и рассказывается об авторизации при получении slices.
0
artemp #
В вашем коде див entry-title закрыт дважды и по отступам создается впечатление что entry-content вложенный в него, хотя они одного уровня.

По поводу подводных камней, в том whitepaper, ссылку на который вы привели в конце статьи, так и написано: Entry Title - Required. The WebSlice element must include an ID.
0
pixx #
Вот, так скажем, наглядное подтверждение необходимости семантической верстки для еще сомневающихся.
0
bolk #
Семантическая вёрстка — миф.
0
pixx #
Не стану оспаривать столь громкое заявление. Но уже чую как плавится кнопка "минусануть карму bolk" злобныйх валидно-семантических верстальщиков и прочих любителей холиваров ;)
0
bolk #
Если об этом задуматься (или посмотреть на HTML5), то спорить здесь нечего. Та «семантическая» вёртска, что есть сейчас — это бесконечные div с лёгкими вкраплениями других тегов. В нагромождении div нет никакой семантики, это просто помойка из тегов.
0
pixx #
А как же div с указанным атрибутом id и class, соответствующим какому-либо из микроформатов, как, например, в данном посте - class="entry-title".
Тоже помойка? Для того и создают микроформаты, чтобы из оберточных тегов выбирать "самою соль". Ну а то, что сейчас это реализовано на основе тега div, так это совместимость со общепринятыми стандартами. Седьте-ка и забацайте нам нормальные семантические теги, да так, чтобы их хоть как-нибудь потом можно было читать в современных браузерах (xml+xslt не в счет - не о них речь).
0
bolk #
Пока микроформаты — это то, что только начинает себе прокладывать дорогу. HTML5+микроформаты — вот семантическая вёрстка.

Зачем мне садиться и бацать? Я говорю, что семантическая вёрстка — миф. То, что вы сказали не опровергает мои слова.
0
pixx #
У Вас предвзятое мнение к микроформатам и возможным их сочетанием с html4. А html5, на который Вы ссылаетесь постоянно, по сути есть расширение html4, движущеейся по принципам микроформатов - видео и аудио теги будут тому доказательстом.
А про "садиться и бацать" это не предложение и не призыв к действию - это лишь такой словестный оборот, дабы подчеркнуть тот потолок, выше которого в условия современного рынка не прыгнуть, по крайней мере пока.
0
bolk #
Аудио- и видео-теги никак не относятся к микроформатам. HTML5 такое же «расширение» HTML4, как HTML4 «расширение» HTML3.2.

Боюсь, вы не понимаете что такое микроформаты.
0
pixx #
Боюсь, что у меня не получилось до Вас мысль донести.
Я говорю в контексте нашего спора — о семантике. И именно в этом контексте новостандартизованные теги видео и аудио и являются переходом квази-микроформата в стандарт. Только не пытайтесь меня убедить что микроформат - это совсем не то. По идеологии - это именно то самое. Вдумайтесь в морфемный смысл слова "микроформат".

Вы когда-нибудь html парсили скриптом? Вот скажите мне, в чем для скрипта разница между <video> и <div class='video'>?
Ни в чем. Разница лишь в том, что в глобальном смысле использование <video> делает сментическим весь вёб, а не отдельный сайт/документ.

Вот собственно из-за разницы в применении термина "семантика" (к общему и частному случаю) и пошел наш этот спор-ни-о-чем.
0
bolk #
Проблематика тегов AUDIO и VIDEO в корне иная и к микроформатам отношения не имеет. До появления этих тегов (а в друх браузерах
они уже начинают работать) не было единого стандарта для аудио- и видеовставок в браузере (в отличии от тега IMG, например). Не было
единства в кодеках и JavaScript API для доступа к объекту проигрывателя. AUDIO и VIDEO решают именно эту проблему. Причём,
решают хорошо и с обратной совместимостью.

Про <video;> и <div class="video"> прокомментировать могу следующее: вы не понимаете целей микроформатов. Т.е. я не
хочу вас оскорбить, но просто это так.
0
pixx #
Не правда ваша. Проблематика тегов AUDIO и VIDEO сводится не только к тому что Вы описали, но еще и к отсутсвию возможности номарльной индексации аудио и видео контента. Почитайте html5 еще раз ;)
И еще раз говорю, вы упустили нить спора. Возвращаю вас к семантике - забудьте вы про эти микроформаты, пожалуйста. Я привел такое, может не самое удачное, сравние их с тегами AUDIO и VIDEO только чтобы показать, что прообарзы семантики есть и в html4 и в xtml в виде микроформатов, нет лишь единого глобального стандарта. Я сравнивал лишь микроформаты и новые теги html5 _лишь_по_теме_семантики_, а не в целом. В целом, это конечно разные вещи.
А ваше заявление про мифологичность совреемнной семантической верстки - ну это, простите, бред. Это все равно, что называть технологии прошлого века - мифологичными, только потому, что они не удоволетворяют требованиям современности. Идеализм - он никому в жизни нафиг не нужен :) А то получается - один вы умный, все остальные дураки и сделали теги аудио и видео только чтобы было удобно их в коде использовать. Дудки.
0
bolk #
Откуда в спецификации HTML5 описание целей этих тегов? Я по-прежнему утверждаю, что AUDIO и VIDEO введены для стандартизации отображения аудио и видео инфорации в браузерах. Какая тут помощь в индексации, расскажите.

Семантической вёрстки сейчас не существует. Её просто нет. Её нельзя пока сделать. Куча DIV с редкими вкраплениями семантических тегов — это не семантическая вёрстка.
0
pixx #
Бог с тобой, золотая рыбка. С вами проще согласиться, чем спорить. Что ж, пополню свою коллекцию чужих заблуждений еще одним.
0
ISpy #
Ну почему же, семантическая верстка - не миф, IMHO. <p>, для текста, h1.. для заголовков, strong и em для выделения, и т.д. Во-первых улучшает понимаемость сайта поисковиками (возможно уже в намного меньшей степени чем раньше), а во-вторых, где-то я читал, что и отображение элементов улучшает в браузере. Да и просто, придерживание стандарта никому еще не вредило :)
0
bolk #
Посмотрите HTML5.
0
ISpy #
Ок :)
0
ISpy #
Хотя я лично за xHTML :)
0
Devgru #
нас много =)
0
bolk #
Одно другому не мешает :)
0
fidelich #
... Неужели я увидел фишку/нововведение (не ActiveX) которая/ое надейюсь пока работает только в IE? MS наконец-то что-то придумали, а не стянули с других (читай Opera и Firefox) браузеров?
WS приятное нововведение: технически быстро реализуемо, но выглядит очень аппетитно!
НЛО прилетело и опубликовало эту надпись здесь
0
meesix #
Маузер, специально для тебя попросим ребят с башорга встроить слайсы по-скорее :) А ребят из МС встроить функцию разграбления корованов.

Кстати, в оригинале корованы надо было грабеть.
НЛО прилетело и опубликовало эту надпись здесь
0
meesix #
спасибо, буду знать )
0
Aivean #
0
meesix #
:) отлично, сначала Маузер, а теперь к нам в гости заскочил Айвон :)

На сайт микроформатов я ссылку давал в посте, ну а оператор... наверное полезно, но пост про ИЕ, да и в ФФ поддержку Вебслайсов он не даёт )
0
Aivean #
по умолчанию не даёт, но к нему можно скрипты вручную дописывать, может, уже кто-то взялся за разработку поддержки WS
Кстати, существование микроформатов - это хорошо, но ещё лучше было бы, если бы создатели сайтов, особенно рускоязычного сегмента, в свою очередь поддерживали их.
0
meesix #
в WS главное то, что оно обновляется... возможно ли такое реализовать через Оператор? Да и вообще, я думаю,что под это стоит отдельный плагин делать, ибо простому человеку не заходится ставить оператор, а потом скрипт на него... бррр.

Нет, лучше бы они с начала поддерживали стандартизацию, нормальные браузеры, юникод, семантическую верстку и много прочих нормальных вещей. А... с начала, я думаю им стоит перестать тырить идеи на западе... в общем, много проблем у рунета, да.
0
switchON #
А можно ещё так:
<div class="hslice" id="twitter_updates">
<div class="entry-title" style="display:none">Mee's Twitter Updates</div>
<div class="entry-content">
%Содержание блока%
<a rel="feedurl" href="/webslice/"></a>
</div>
</div>

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