Tworzenie Web Slices

Wprowadzenie do możliwości IE8 przedstawiłem podczas konkursu Windows7x7 – 7xWindows7 Dzień T-3. Dzisiaj zajmiemy się tworzeniem elementu Web Slice.

Wprowadzenie

Web Slices jest specjalnie oznaczonym wycinkiem strony WWW, którego zawartość jest automatycznie monitorowana przez przeglądarki. Listę dodatków Web Slices możemy znaleźć na stronie http://www.ieaddons.com/pl/webslices lub http://www.ieaddons.com/en/webslices. Web Slice rozszerz format hAtom Microformats. Format hAtom jest propozycją umożliwiającą tworzenie zawartości “gotowej” na kolejny krok w życiu Internetu Web 3.0 – sieć semantyczna. Przyjrzyjmy się następującemu fragmentowi html:

   1: <p>Krzysztof Jarzyna</p>

   2: <p>ul. Wojska Polskiego 10/5</p>

   3: <p>70-001 Szczecin</p>

   4: <p>Polska</p>

   5: <p>e-mail:theBoss@live.com</p>

   6: <p>www.SzukajcieAZnajdziecie.eu</p>

Jeśli ktoś chciałby automatycznie pobrać ten adres ze strony i dodać do swojej listy adresowej, to niestety czeka go długie przeklejanie poszczególnych pól. Microformat dodaje znaczenie do poszczególnych elementów. Najczęściej spotykanym zastosowaniem są wizytówki (hCard) i terminy (hCalendar). W tym przypadku wykorzystamy format wizytówki:

   1: <div class="vcard">

   2:     <span class="fn">Krzysztof Jarzyna</span>

   3:     <div class="adr">

   4:         <div class="street-address">Wojska Polskiego 10/5</div>

   5:         <div class="locality">Szczecin</div>        

   6:         <div class="postal-code">70-001</div>

   7:         <div class="country-name">Polska</div>

   8:     </div>

   9:     <a class="email" href="mailto:theBoss@live.com">theBoss@live.com</a>

  10:     <a class="url" href="http://www.SzukajcieAZnajdziecie.eu">www.SzukajcieAZnajdziecie.eu</a>

  11: </div>

Jak widać dodaliśmy do informacji już istniejącej nazwy klas określających semantyczny podział poszczególnych informacji z wizytówki. Dzięki takiej operacji możliwe jest łatwe parsowanie i przetwarzanie informacji.  Dodatkowo możemy znaleźć w sieci wiele gotowych plików CSS zawierających style ułatwiające formatowanie wizytówki.

Jednak przedstawione mikroformaty zawierają jedynie informacje statyczne. Możemy je oczywiście generować dynamicznie w naszej aplikacji. Jednak w przypadku zmiany jakiegoś elementu nie można przesłać tej informacji do klienta. Odpowiedzią na ten problem jest format hAtom. jest on podzbiorem formatu Atom i umożliwia syndykację (pobieranie aktualnych informacji) np. z tego bloga. Szczegółowe informacje o formacie możemy znaleźć tu.

Podstawy Web Slice

Web Slice rozszerza możliwości formatu hAtom umożliwiając m.in. autentykację subskrybowanych treści.

Właściwości z hAtom

• entry-title – wymagane. Tytuł elementu.
• entry-content – opcja. Zawartość elementu

Nowe właściwości dla hSlice:

• hslice – wymagane. Kontener dla Web Slice.
• ttl – opcja. Określa interwał odświeżania w min. (standardowo raz dziennie, max co 15 min)
• feedurl – opcja. Alternatywna ścieżka do aktualizacji
• endtime – opcja. Data po której element się dezaktualizuje.

Poniżej przedstawiony został prosty przykład Web Slice.

   1: <div class="hslice" id="WebSlice1">

   2:     <p class="entry-title">Mój pierwszy WebSlice!</p>

   3:     <div class="entry-content">

   4:         <span style="background-color: #ccc;">Hello IE8 World!</span>

   5:     </div>

   6: </div>

W linijce 1 element hslice jest wymagany wraz z określoną właściwością id. W linijce 2 określiliśmy element entry-title, który będzie identyfikował nasz Web Slice na pasku przeglądarki. W linijce 3-5 określiliśmy zawartość elementu.

Po umieszczeniu tego kodu na stronie użytkownik w pasku przeglądarki zostanie powiadomiony o istnieniu elementu Web Slice, który może zasubskrybować. Również po przesunięciu kursora myszki nad zawartością Web Slice pojawi się zielona ikona umożliwiająca subskrypcje tego elementu.

 

Po kliknięciu na zielną ikonę użytkownik jest pytany, czy na pewno chce zasubskrybować dany Web Slice (należy zauważyć, że oprócz nazwy pojawia się również informacja o adresie z którego pochodzi dany Web Slice

Po dodaniu WebSlice jest umieszczany na pasku przeglądarki.

Jak pierwszy raz zobaczyłem ten przykład, to pomyślałem, że to strasznie nieciekawe, bo inna powinna być zawartość w elemencie rozwijanym WebSlice i inna na stronie z której możemy go zasubskrybować. Na szczęście podobnie pomyśleli twórcy 🙂

Po utworzeniu nowej strony z przykładową zawartością:

   1: <body>    

   2:     <div>

   3:         To jest zawartość wyświetlana 🙂

   4:     </div>   

   5: </body>

I  zmiany 4 liniii poprzedniego kodu na:

   1: <div class="entry-content">

   2:     <a rel="entry-content"  href="ws1.aspx"></a>

   3: </div>

Po kliknięciu na Web Slice prezentowana jest zawartość strony (w tym przypadku ws1.aspx.

Więcej o tworzeniu Web Slice przeczytasz na stronie. Szczególnie interesująca jest sekcja Layout Suggestions for Web Slices. 

Web Application Toolkit for Internet Explorer 8 Extensibility

Jako programista ASP.NET jestem przyzwyczajony do tego, że wszystko musi być łatwo, prosto i przyjemnie. Do większości elementów mam prosty obiektowy interfejs i tak też bym chciał programować elementy Web Slice. Odpowiedzią na te (nie tylko moje ) oczekiwania jest Web Application Toolkit for Internet Explorer 8 Extensibility. Zawiera on zestaw kontrolek ASP.NET, które można użyć do skorzystania z nowych funkcji  Internet Explorera w naszej aplikacji internetowej, w tym:

• ASP.NET Web Slice control – umożliwia tworzenie elementów Web Slice
• ASP.NET Accelerator control – umożliwia dostęp do aplikacji sieci Web lub usługi z dowolnej strony za pomocą opcji menu kontekstowego
• ASP.NET Visual Search control – umożliwia wyszukiwanie i prezentowanie ich wyników w polu wyszukania przeglądarki
• ASP.NET Browser Helper – umożliwia wykrycie, przeglądarki użytkownika witryny 

Po pobraniu i rozpakowaniu uruchamiamy stronę StartHere.htm. W zakładce Get Started znajdziemy najważniejsze informacje o tym zbiorze kontrolek. Aby zobaczyć możliwości kontrolek warto zobaczyć przykładową aplikację AuctionsSample.

Podsumowanie

Zachęcam do testowania możliwości Web Slice. W kolejnym odcinku przedstawię, jak wykorzystać kontrolkę ASP.NET Web Slice na naszej stronie.