Internet Explorer 9 – Integracja z systemem Windows 7  

Autor: Marcin Borecki

Opublikowano: 2010-05-09

Wprowadzenie

Przeglądarka Internet Explorer 9 umożliwia integrację stron internetowych z systemem operacyjnym Windows 7. Od teraz dla często odwiedzanych stron użytkownik może zrobić skrót, który wyręczy go w częstym wpisywaniu popularnych adresów internetowych w przeglądarce, a firmy zyskają dodatkowy kanał do budowy lojalności i świadomość marki poprzez ekspozycję swojego logotypu w systemie operacyjnym.

Integracja stron z systemem operacyjnym jest dostępna dla wszystkich witryn w trybie podstawowym, bez żadnych dodatkowych modyfikacji. Warto nadmienić jednak, że programiści mogą dodać swoje elementy, które będą widoczne w systemie operacyjnym w kontekście zintegrowanej strony.

Z tego artykułu nauczymy się:

• integrować stronę z systemem Windows 7,
• dodawać statyczną i dynamiczną listę zadań w ramach serwisu internetowego,
• zarządzać logotypem (ikoną serwisu).

Integracja w ujęciu użytkownika

Poniżej zaprezentowane są dwa sposoby integracji strony internetowej Bing.com z systemem Windows 7.

Przypinanie do Menu Start

Z menu wybieramy File, a następnie Add site to Start menu:

Efekt po wybraniu strzałki przy logotypie Bing w menu Start:

Przypinanie do paska zadań

Przeciągamy zakładkę ze stroną Bing.com do paska zadań:

Efekt po kliknięciu prawym przyciskiem na logotypie:

W obu przypadkach widzimy logotyp wyszukiwarki Bing. Każda strona ma domyślnie następujące możliwości:

– Unpin this program from taskbar – usuwamy przypięcie,

– <nazwa strony> (tu: Bing) – uruchamiamy serwis internetowy,

– Start InPrivateBrowsing – uruchamiany serwis internetowy w trybie prywatnym.

Programiści serwisów internetowych mogą dodać własne funkcjonalności dla użytkowników (Task), co zostanie omówione w dalszej części artykułu.

Personalizacja przeglądarki

Przeglądarka po podpięciu zmienia swój wygląd, przystosowując się do przypiętej strony internetowej w następujący sposób:

• zmienia kolory przycisków Dalej i Wstecz na podstawie logotypu (jeżeli twórca strony nie zdecydował inaczej),
• dodaje logotyp (na górze po lewej stronie), który przenosi użytkownika do adresu przypiętej strony.

Przykład poniżej:

Dostosowywanie strony

Stronę internetową, którą przypina użytkownik, możemy dostosować tak, aby odpowiadała naszym wymaganiom. Poniżej znajduje się opis znaczników obsługiwanych przez przeglądarkę Internet Explorer 9.

Znaczniki przedstawione powyżej powinny być dodane do sekcji meta strony internetowej.

Przykład wykorzystania kilku znaczników wraz z wartościami:

<meta name="application-name" content="Blog MarcinaBoreckiego"/>
<meta name="msapplication-tooltip" content="Kliknij by zobaczyć blog MarcinaBoreckiego"/>
<meta name="msapplication-starturl" content="http://mborecki.wordpress.com"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="green"/>

Logotyp

Podczas dodawania strony do systemu Windows 7 wykorzystywana jest ikona o rozmiarze 32x32. Jeżeli favicon wykorzystywany w serwisie internetowym jest mniejszy, wtedy opakowywany jest w ramkę o rozmiarze 32x32.

Lista zadań (Jump List)

Programiści mogą definiować listy zadań, które skrócą czas, jaki użytkownik musi poświęcić na dojście do często wykorzystywanych elementów serwisu internetowego. Zadania zawierają stałą listę elementów, które są dostępne dla użytkownika nawet wtedy, gdy strona internetowa nie jest włączona.

Poniżej przykład dla serwisów Bing i Facebook, które zbudowały listy zadań w następujący sposób:

Elementy z listy zadań znajdują się w pliku .website, który jest skrótem do strony internetowej na pasku zadań oraz w menu Start. Zadania można modyfikować poprzez zmianę znaczników meta na stronie.

Statyczne zadania

Możemy dodać maksymalnie 5 zadań, które nie powinny się zmieniać w zależności od strony, na której jesteśmy – są one dodawane do sekcji Tasks.

Znaczniki przedstawione powyżej powinny być dodane do sekcji meta strony internetowej.

Przykład wykorzystania kilku znaczników wraz z wartościami:

<META name="msapplication-task" content="name=Task 1;action-uri=http://mborecki.wordpress.com/strona1.html;icon-uri=http://mborecki.wordpress.com/icona1.ico"/>

Adresy URL podawane w zadaniach nie są ograniczone do domeny strony internetowej przypiętej do systemu Windows.

Dynamiczne zadania

Zadania dostosowane do kontekstu użytkownika, zależne od strony, na której jest użytkownik, są dodane do zdefiniowanych uprzednio sekcji. Można dodać do 20 elementów tego typu, przy czym tylko 10 ostatnich jest widocznych.

Aby dodać dynamiczne zadania, należy wykonać następujące kroki:

• Dodanie kategorii:
  
  Kopiuj

  window.external.msSiteModeCreateJumplist('Kategoria1');
  

• Dodanie elementów:
  Opis parametrów metody msSiteModeAddJumpListItem:
  —   nazwa elementu
  —   adres strony
  —   adres ikony
  
  Kopiuj

  window.external.msSiteModeAddJumpListItem('Element 1', 'http://mborecki.wordpress.com/Element1.html', 'http://mborecki.wordpress.com/images/element1.ico');window.external.msSiteModeAddJumpListItem('Element 2', 'http:// mborecki.wordpress.com/Element2.html', 'http:// mborecki.wordpress.com/images/element.ico');
  

• Pokazanie kategorii z elementami:
  window.external.msSiteModeShowJumplist();

Ikona

Poniżej znajduje się informacja dotycząca preferowanych rozmiarów ikon dla omawianych funkcjonalności:

• Zadania – 16x16
• Pasek zadań/ menu Start – 32x32

Zmiana ikony

Aplikacja internetowa może zmieniać swoje ikony, powiadamiając użytkownika o tych działaniach. Poniżej pokazano przykład poczty elektronicznej Hotmail, która wykorzystuje funkcjonalność do informowania użytkowników o nowej poczcie (ikona informuje o dwóch nowych wiadomościach):

Zmianę ikony możemy zainicjować metodą msSiteModeSetIconOverlay, podając w parametrach:

• adres nowej ikony,
• opis ikony:

window.external.msSiteModeSetIconOverlay('http://mborecki.wordpress.com/images/ikona1.ico', 'Nowa ikona 1');

Miganie

Kiedy strona internetowa wymaga interakcji użytkownika, możemy zamigać logotypem aplikacji przypiętej do paska zadań.

Ikona zamiga maksymalnie 20 razy, po czym stanie się podświetlona aż do momentu, kiedy użytkownik wejdzie na stronę.

Poniżej kod, który pozwala na wywołanie opisanego efektu:

window.external.msSiteModeActivate();

Wykrywanie stanu strony

Zanim rozpoczniemy dodawanie dynamicznych elementów związanych z funkcjonalnością integracji strony z systemem operacyjnym, musimy sprawdzić, czy strona jest przypięta do paska zadań lub menu Start. Poniżej prezentuję kod, który sprawdza ten warunek:

if (window.external.msIsSiteMode())
    {
        // strona jest przypięta
    }
else
    {
        // strona nie jest przypięta
    }

Podsumowanie

Dodawanie stron internetowych do systemu Windows pozwala użytkownikom na dodanie skrótów do najczęściej wykorzystywanych witryn, a firmom zwraca uwagę na jeszcze jeden kanał promocji swoich rozwiązań, jakim jest system operacyjny. Czas poświęcony na dodanie obsługi tego rozwiązania w swoich produktach na pewno przełoży się na większe zadowolenie użytkowników odwiedzających serwis internetowy.

Z tego artykułu nauczyliśmy się, jak możemy dodać stronę internetową do systemu Windows 7 oraz jak dodać własną implementację integracji z użytkownikiem.