Home > IE, Web > [PL] WebSlice – ciekawy dodatek na Twoją stronę

[PL] WebSlice – ciekawy dodatek na Twoją stronę

February 21, 2010 Leave a comment Go to comments

Web_Slice Tym razem zobaczymy sobie jak można wzbogacić naszą stronę internetową o kolejny ciekawy element – tak zwany WebSlice.

WebSlice pojawił się wraz z nadejściem IE8 Beta 1 [7]. Przez jakiś czas zastanawiałem się po co komu taka funkcjonalność, jednak po przejrzeniu paru stron, które wykorzystują WebSlice od razu zrozumiałem ideę tego dodatku. My zobaczymy sobie gdzie możemy użyć WebSlice oraz stworzymy swój własny WebSlice w naszej galerii.

Do czego można użyć WebSlice

Można znaleźć wiele przykładów istniejących już na stronach Web [2]. Jeżeli na naszej stronie mamy często uaktualnianą treść, np. wykres giełdowy, aukcje, wydarzenia, komentarze itp. to WebSlice nada się do tego celu idealnie. My do naszej galerii dodamy element odpowiedzialny za sprawdzanie komentarzy pisanych przez użytkowników. Owszem pewnie pytasz, “ale przecież możemy użyć do tego celu kanału RSS, czy też powiadamiania mailowego”. Owszem możemy, chociaż co do powiadamiania mailowego – nie zawsze serwer może nam to udostępniać, a RSS nie pozwala na wyświetlanie dynamicznych wartości. W WebSlice możemy umieszczać dodatkowo elementy JavaScriptu czy Silverlighta.

Jak działa WebSlice?

AddWebSliceNa początku myślałem, że jest to trudne do stworzenia, i należy do strony dodać jakiś ciężki kawałek kodu. Przeglądając strony z przykładami okazało się, że jest wykorzystana tutaj dosyć ciekawa sztuczka oparta o nazewnictwo klas stylów przy elementach strony.

Schemat WebSlice

przedstawiony został poniżej. Przeglądarka rozróżnia WebSlice po nazwach klas atrybutów. Całość otwiera klasa hslice przedstawiona w linii 1. Klasa ta może być niezdefiniowana w naszych stylach CSS. Dodatkowo element ten zawiera ID WebSlice.

Druga linia zawiera nazwę naszego WebSlice, która widoczna będzie na pasku w naszej przeglądarce, tuż po dodaniu WebSlice do przeglądarki. Jak widać element ten oznaczony jest klasą entry-title, a sam styl jest niewidoczny po stronie przeglądarki (styl display:none). W naszym przykładzie nazwą jest tytuł galerii z dodatkowym słowem comments.

Trzecia linia wskazuje nam adres do strony z podglądem. Jak widać element ten zaznaczony jest za pomocą atrybutu rel, o nazwie entry-content. W naszeym WebSlice, jest to odnośnik do strony zawierającej podgląd galerii (SliceComments).

    1 <div class="hslice" id="sliceComment">

    2     <span class="entry-title" style="display: none;"> <%= Model.Title %> comments</span>

    3     <a rel="entry-content" href="/Gallery/SliceComments/<%= Model.GalleryID %>"

    4        style="display: none;"></a>

    5     <span class="ttl" style="display: none;">15</span>

    6     <a rel="bookmark" href="/Gallery/Details/<%= Model.GalleryID %>" style="display: none;"></a>

    7 </div>

Piąta linia, jest opcjonalna, ale warto o niej wspomnieć. Definiuje ona, jak często przeglądarka ma sprawdzać czy zawartość strony się zmieniła. Domyślna i najmniejsza wartość to 15 minut. Ma to swoje wady i zalety. Wadą jest te 15 minut, czasami może to być zbyt długi okres czasu. Zaletą jest też przedstawiona wada. Serwer nie będzie ciągle odpytywany (np. co minutę). Jak widać element ten oznaczony jest atrybutem rel o nazwie ttl.

Szósta linia określa adres strony, którą należy otworzyć tuż po kliknięciu w nasz WebSlice.

W uruchomieniu strony i najechaniu na pole komentarzy powinniśmy zobaczyć zieloną ikonkę symbolizującą WebSlice. Po kliknięciu zostaniemy poproszeni o dodanie WebSlice do przeglądarki. Przedstawione zostało to na zdjęciu powyżej.

Strona z podglądem

WebSliceNa zakończenie chciałbym przedstawić pokrótce, jak wygląda strona z podglądem WebSlice (zdefiniowana w linii 6 naszego WebSlice). Jest to nic innego jak normalna strona, z pewnymi zaleceniami. Szczegóły można znaleźć pod adresem [8].

  1. Treść powinna być czytelna, czcionka nie powinna zlewać się z tłem – duży kontrast.
  2. Należy przedstawiać mało danych (treść powinna być zwięzła i treściwa), tak aby użytkownik na pierwszy rzut oka mógł zrozumieć treść i ewentualne zmiany.
  3. Zaleca się używania odpowiednich marginesów (min. 14px), lub grupowań treści.
  4. Strona powinna mieścić się w podglądzie, tak aby nie pojawiały się odatkowe suwaki po bokach (rozmiar 320x240px)
  5. Nie zaleca się dodawania różnego rodzaju efektów dźwiękowych. Po zamknięciu podglądu dźwięk będzie nadal odtwarzany.
  6. W miarę możliwości należy unikać zakładek i okien logowania wewnątrz WebSlice.

W projekcie podglądu nie skupiałem się na samym wyglądzie. Wykorzystałem jeden ze styli przedstawionych na stronie Microsoftu [8]. Najważniejszym celem było jednak sprawdzenie, jak pisze się WebSlice i jak on działa.

Zaleca się także dodania poniższego elementu w naszym podglądzie WebSlice w sekcji HEAD.

<meta http-equiv="cache-control" content="no-cache" />

Dzięki temu, gdy użytkownik kliknie na WebSlice w pasku ulubionych, to po otwarciu miniaturki pojawi się aktualna treść, w przeciwnym wypadku treść ta może być wyświetlona z pamięci podręcznej przeglądarki.

Linki

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: