1. Spis treści
Opis działania.......................................................................................................................................1
Uruchomienie strony startowej systemu (index.html)..........................................................................2
Przesłanie sesji przeglądania do drugiego użytkownika......................................................................3
Wspólne przeglądanie stron (co-surfing).............................................................................................3
Zaznaczanie informacji, malowanie po stronie....................................................................................5
Czat.......................................................................................................................................................5
I. Opis działania
Platforma HelpCenter jest to pierwsza w Polsce aplikacja przeznaczona dla co-surfingu.
Działa na stronach WWW dostępnych z sieci internet poprzez protokół HTTP. Wszystkie
funkcjonalności działają bez konieczności instalowania dodatkowego oprogramowania w
przeglądarce. Komunikacja użytkowników odbywa się w czasie rzeczywistym.
W wariancie podstawowym HelpCenter dostępne są następujące funkcje:
· wirtualny kursor - użytkownicy widzą wzajemnie swoją pozycję wskaźnika myszy,
· tagowanie treści - zaznaczanie elementów na stronie w postaci graficznych znaczników
(map bitowych w formatach gif, png, jpg), umieszczany poprzez pozycjonowanie myszą.
· czat- możliwość komunikacji tekstowej,
· malowanie po stronie – zaznaczanie elementów strony WWW w postaci graficznych znaczników
umieszczany poprzez ruch myszą
· wyszukiwarka Google - integracja z wyszukiwarką Google.
Funkcje dodatkowe:
· dołączanie notek w postaci edytowalnych pól tekstowych,
· obsługa formularzy na stronie WWW,
· podgląd uzupełnianych pól online,
· możliwość rozszerzenia palety zdefiniowanych tagów graficznych,
· nagrywanie sesji internetowej,
· możliwość dodawania efektów graficznych (np. pływających ramek, animacji itp.),
· przesyłanie oraz odtwarzanie plików multimedialnych (audio,wideo,obrazki),
· wystawienie API w języku JavaScript do funkcji platformy HelpCenter.
2. Rys. 1.0 HelpCenter – panel nawigacyjny
Nawigacja systemu odbywa się poprzez modalne okno. Jego pozycja na stronie może być
zmieniana przez zastosowanie techniki drag&drop.
U góry (toolbar) znajdują się kolejno:
– Czat - możliwość komunikacji tekstowej,
– Rysowanie po stronie – oznaczanie treści graficznymi znacznikami (pęndzlem),
– Informacje - informacje o sesji oraz nazwie (nick) użytkownika,
– Wyszukiwarka Google.
Rys 1.1 HelpCenter - Strona startowa aplikacji
Na rysunku 1.1 przedstawiona jest strona startowa systemu HelpCenter - CoSurfing. Aplikacja
HelpCenter w przedstawionym przykładzie została uruchomiona na stronie cosurfing.pl.
Użytkownicy w analogiczny sposób moga wpisywać dowolny adres strony dostępnej w internecie
(za pośrednictwem protokołu http).
II. Uruchomienie strony startowej systemu (index.html)
Po uruchomieniu strony startowej index.html należy wprowadzić do formularza nazwę
strony, którą chcesz oglądać razem z innymi w pole tekstowe, a następnie wciśnąć guzik "Surfuj".
Po uruchomieniu systemu należy skopiować adres sesji i podzielić się z osobą, z którą chcesz
surfować.
3. III.Przesłanie sesji przeglądania do drugiego użytkownika.
Rys. 1.2 HelpCenter z uruchomioną opcją informacji
Po uruchomieniu aplikacji widoczny jest adres sesji internetowej, którą należy skopiować (Ctrl+c
lub prawym myszy -> Kopiuj) i podzielić się z osobom z którą chcemy surfować. Na widocznym
Rys. 1.2 pokazany jest adres sesji: http://cosurfing.pl/surf.php?&idSession=10 należy go w dowolny
sposób (za pośrednictwem maila, komunikatora, ..., itp) przesłać drugiej osobie w celu wspólnego
surfowania po stronach WWW.
IV. Wspólne przeglądanie stron (co-surfing).
Po załadowanie systemu współdzielimy sesję internetową z osobom, do której
przekazaliśmy adres sesji (opisane w rozdziale III). Na stronie WWW widoczny jest kursor
standardowy systemu (kursor użytkownika) oraz kursor osoby, z którom nawiązane zostało
połącznie.
- Standardowy kursor użytkownika
- Kursor osoby, z którą nawiązane zostało połącznie
Każdy z użytkowników widzi ruch kursora (zarówno standardowego jak i kursora drugiej
osoby) na stronie WWW w czasie rzeczywistym (online).
W czasie nawiązania połączenia, każde kliknięcie w link lub wyszukanie informacji za
pomocą wyszukiwarki Google, będzie skutkowało przjściem w to samo miejsce użytkownika, który
jest z nami połączony.
4. Rys 1.3 HelpCenter - wyszukiwarka informacji
Przeglądane strony są dzielone przez użytkowników w ramach jednej sesji przeglądania. W
obrębie tej sesji można wyszukiwać informacje zarówno za pośrednictwem wyszukiwarki Google
wbudowanej w okno aplikacji jak i strony www.google.pl (jak na Rys. 1.3).
Rys 1.4 HelpCenter przeglądanej stron w ramach sesji internetowej
5. V. Zaznaczanie informacji, malowanie po stronie.
W ramach danej sesji internetowej możliwe jest zaznaczanie informacji w postaci
markowania danych pęndzlem. W opcji "Rysowanie po stronie" możemy wybierać kolor którym
oznaczamy informację. Zaznaczenie widoczne jest dla wszystkich użytkowników sesji internetowej
(pod warunkiem, że dana przeglądarka obsługuje element Canvas). Wsparcie dla tej opcji jest na
większości nowoczesnych przeglądarek internetowych. W razie, gdy nasza przeglądarka nie
wspiera tej opcji otrzymamy stosowny komunikat.
Rys 1.5 HelpCenter - Malowanie po stronie
VI. Czat.
Aplikacja ma możliwość nawiązania komunikacji czat pomiędzy użytkownikami. Opcja
dostępna jest po kliknięciu na pierwszą ikonę z toolbar aplikacji. Aktywna opcja widoczna jest na
Rys. 1.6.
Komunikaty przesyłane są online do osoby z którą nawiązane jest połączenie. W celu
wysłania komunikatu należy przenieść kursor w pole tekstowe znajdujące się u dołu panelu
nawigacyjnego systemu HelpCenter. Po wpisaniu komunikatu należy zatwierdzić go klawiszem
ENTER. W celu przeniesienia kursora tekstu w okno czatu bez zmiany pozycji myszy można
posłużyć się skrótem klawiszowym Ctrl + x spowoduje to przeniesienia focus na pole tekstowe
czatu.
