Zamknij komunikat

Nowy Office 2013
Do góry Skomentuj

17. Przypinanie stron, czyli witryna niczym aplikacja Windows 7

17. Przypinanie stron, czyli witryna niczym aplikacja Windows 7

Autor: Adam Stępień Opublikowano: 7 października 2011 Odsłon: 18 220

Przypinanie witryn to funkcja pozwalająca na takie rozszerzenie strony, aby można ją było przypiąć do paska zadań Windows 7 i uruchamiać tak samo jak inne aplikacje bezpośrednio z pulpitu użytkownika. Dlaczego nie warto pominąć przypinania witryn przy projektowaniu stron w języku HTML5? Chociażby ze względu na to, że przypięcie strony wywoła statystycznie 30 odsłon miesięcznie. Zależność ta nie jest przypadkowa - pasek zadań to bardzo widoczne miejsce, skąd przeciętny Kowalski uruchamia aż 87% aplikacji. Jeżeli odpowiednio przygotujemy witrynę, aby mogła być przypięta do paska zadań, z pewnością możemy liczyć na więcej odsłon. Użytkownicy będą stale pamiętać o naszej witrynie i często do niej wracać. Jedyne ograniczenie wiąże się z tym, że przypinanie witryn działa tylko w Windows 7. Jednakże badania światowego i polskiego rynku systemów operacyjnych zgodnie wykazują, że co 3 Internauta korzysta właśnie z tego systemu operacyjnego.

Udział Windows 7

Favikonka wysokiej rozdzielczości

Pierwszym krokiem jest przygotowanie favikonki w wysokiej rozdzielczości. Użyjemy w tym celu aplikacji dostępnej z poziomu strony internetowej, dzięki czemu zaoszczędzimy sobie instalowania dodatkowych programów na komputerze. Odwiedzamy witrynę IconEditor, klikamy Import, a następnie Upload. Następnie wskazujemy logo witryny/firmy. Możemy wskazać plik graficzny o dowolnych wymiarach, jednakże warto skorygować jego przycięcie, przesuwając ramkę tak, aby całe logo było widoczne.

Upload favikonki

Jeżeli chodzi o wymiary generowanych ikon, to warto pozostawić wszystkie opcje zaznaczone. Będą one wyświetlane m.in. na pasku adresu przeglądarki, przy pracy z jumplistą, na stronie przy otwieraniu nowej karty Internet Explorer 9. Każda funkcja wymaga innych wymiarów, dlatego zaznaczamy wszystkie wymiary i zatwierdzamy wybór, klikając OK. Teraz pora na dopieszczenie ikonki. Po lewej stronie znajdują się narzędzia wystarczające do podrasowania ikonki. Efekt możemy zobaczyć "na żywo", klikając Preview.

Podgląd favikonki

Jeżeli jesteśmy zadowoleni z efektu końcowego, to pozostaje dokonać eksportu pliku ICO z zawartymi grafikami. Klikamy Export i zapisujemy plik na dysku. Warto dodać, że ikonka będzie działała nie tylko w Internet Explorer, ale i w innych przeglądarkach.

Tworzenie jumplisty

Kolejnym krokiem jest zasadnicze stworzenie jumplisty. Od razu zapowiadamy, że będzie to czysta przyjemność. Nie będziemy niczego pisać ręcznie, a wykorzystamy kreator online, dzięki któremu w 5 minut wygenerujemy skrypt rozszerzający funkcjonalność naszej witryny. Kod zostanie wygenerowany automatycznie w oparciu o dane, które wprowadzimy. Odwiedzamy witrynę PinMyWebsite.com, a następnie klikamy kolejno Click here to start the online wizard i Basic Site Information. Formularz wypełniamy zgodnie z informacjami o naszej witrynie. Poniższe zrzuty ekranowe są przykładową formą jego uzupełnienia.

Kreator przypinania 1

Podajemy kolejno imię i nazwisko, e-mail, nazwę strony, adres strony, adres strony głównej i klikamy symbol plusa, aby wskazać wygenerowany wcześniej plik ICO. Klikamy Continue.

Kreator przypinania 2

W tym miejscu podajemy główne strony, do których będzie linkowali z poziomu jumplisty. Każde zadanie musi mieć podany opis (Task Label) i adres (Task URL). Można również przyporządkować ikonkę, klikając symbol plusa. Kolejne zadania dodajemy przyciskiem Add a task - maksymalnie 5 razy. Po dodaniu wszystkich zadań przechodzimy do kolejnego formularza (Continue).

Kreator przypinania 3

W tym kroku generujemy tym razem zadania dynamicznie, czyli wskazujemy elementy, które będą się automatycznie zmieniać wraz z upływem czasu. Mogą to być np. aktualności na stronie. Niezbędne jest podanie poprawnego adresu źródła RSS (RSS Feed URL) i nazwy dla tej grupy elementów (Task group name). Dostępna jest również opcja automatycznego powiadamiania użytkownika o nowościach na stronie na pasku zadań. Gdy opcję zaznaczymy, wówczas użytkownik będzie widział zmienioną ikonkę na pulpicie.

Kreator przypinania 4

Ostatni krok to dodanie powiadomienia w postaci paska informującego o możliwości przypięcia strony. Witrynę można wtedy łatwo przypiąć, przeciągając ikonkę na pasek zadań obok menu Start. Podgląd "na żywo", jak taki pasek może wyglądać, znajduje się nad przyciskiem Finish. 

Pozostało nam już tylko wygenerować właściwy kod. Klikamy Generate my Jump List code. Uwaga! Ostatnio witryna ma problemy z wygenerowaniem jumplisty w IE9, zatem w razie problemów korzystamy z Firefoksa. Otrzymamy kod, który musimy wkleić teraz na stronę przed domknięciem znacznika <body>. Zalecamy jednak skorzystanie z innego rozwiązania, które pozwoli nam śledzić efekty z zastosowania funkcji przypinania stron. Zamiast skopiować kod linkujący do pliku JavaScript, lepiej jest pobrać go bezpośrednio na dysk twardy i wgrać na serwer. Możemy pobrać plik JS klikając żółty link. Następnie zapisujemy go na dysku i edytujemy dowolnym edytorem tekstu, np. notatnikiem. Podmieniamy teraz następującą linię kodu:

startURL: 'http://www.centrumxp.pl/Default.aspx', // Homepage URL

na następującą:

startURL: 'http://www.centrumxp.pl/Default.aspx?utm_source=ie9&utm_medium=web&utm_campaign=pinned-ie9', // Homepage URL

Jeżeli korzystamy z popularnego narzędzia do analizy ruchu sieciowego Google Analytics, to niebawem zobaczymy w raportach kampanię o nazwie ie9, dzięki której każde kliknięcie witryny z poziomu paska zadań nie pozostanie bez naszej wiedzy.

Zobacz również

Komentarze

Nie napisano jeszcze ani jednego komentarza. Twój może być pierwszy.

Dodaj swój komentarz

Zasady publikacji komentarzyZasady publikacji komentarzy

Redakcja CentrumXP.pl nie odpowiada za treść komentarzy publikowanych na stronach Portalu
i zastrzega sobie prawo do usuwania wypowiedzi, które:

  • zawierają słowa wulgarne, obraźliwe, prowokujące i inne naruszające dobre obyczaje;
  • są jedynie próbami reklamowania stron internetowych (spamowanie poprzez umieszczanie linków);
  • przyczyniają się do złamania prawa bądź warunków licencyjnych oprogramowania (cracki, seriale, torrenty itp.);
  • zawierają dane osobowe, teleadresowe, adresy mailowe lub numery GG;
  • merytorycznie nie wnoszą nic do dyskusji lub nie mają związku z tematem komentowanego newsa, artykułu bądź pliku.