Strony

Transkrypt

Strony

Usługi w Internecie
Jesień 2015
Konstrukcja stron
Problemy z użytecznością stron usability
http://www.clickz.com/print_article/clickz/column/2113344/key-tips-website-usability
Strony w Internecie
Twórca
Strony
Strona
WWW
Serwer
WWW
Przeglądarka
Internauta
HyperText Transfer Protocol http
• serwery i przeglądarki WWW komunikują
się ze sobą za pośrednictwem HTTP,
przekazując elementy potrzebne do
wyświetlenia na ekranie stron WWW.
• Od 1999 roku stosowany jest protokół HTTP w wersji
1.1, którego definicję znajdziemy w dokumencie RFC
2616. Wraz z upływem czasu HTTP 1.1 doczekał się
kilku konsekwentnie wprowadzanych optymalizacji, które
dziś przyczyniają się do problemów związanych z
przekazywaniem danych.
MARZEC 2015 CHIP.PL
MARZEC 2015 CHIP.PL
MARZEC 2015 CHIP.PL
Zasady konstrukcji stron –
założenia
• Tylko 50% wizytujących WWW przewija stronę
poniżej widocznej części na monitorze.
• Wizytujący musi natychmiast znaleźć informację
„kim jesteś, co robisz i jak można się z tobą
skontaktować”.
• Poza stosowaniem poprawnej gramatyki, firma
musi podać adres pocztowy, foto firmy i nie
zmuszać wizytującego do wypełniania
jakiegokolwiek formularza.
Zasady konstrukcji witryn oczekiwania
• Pierwsze wrażenie jakie odnosi wizytujący stronę.
• Umieszczanie na pierwszych stronicach podstawowych informacji
o zakresie usług/produktów firmy, a dalej katalogów online oraz
odnośników do wszelkich publikacji związanych z przedmiotem
działalności firmy.
• Misje witryny: edukacyjna i zarządzania reputacją firmy.
•
Przykładem przestrzegania takich zasad są takie firmy jak ICI lub Elf. Na stronie Elfa jest
przedstawiona historia benzyny od początku świata, przez tworzenie się ropy, jej wydobycie,
przetwórstwo, aż do transportu do stacji benzynowej.
• Rzadko bywa tak, iż firma jest bardzo dobra, a jej witryna kiepska.
Zazwyczaj rzeczywisty, bieżący obraz firmy znajduje swoje
bezpośrednie odzwierciedlenie w wirtualnym świecie.
Budowa stron
• Zasoby Sieci tworzą zbiory pogrupowane w stronach
(witrynach, portalach). W większości są one zapisane
w formacie nazywanym hipertekstem. Jest to logiczna
kombinacja komputera i tekstu, komputerowy interfejs,
pozwalający na encyklopedyczne przeglądanie tekstów.
• Każda strona (site) WWW zawiera zazwyczaj jeden
monotematyczny zbiór informacji. Jest ona podzielona
na części, które niefortunnie także są nazywane
stronami (page) - dla wyróżnienia przyjęto nazywać je
słowem: stronice, w znaczeniu pojedynczych kartek.
• A zatem zbiory WWW są nazywane stronami, które
z kolei są dzielone na pojedyncze „kartki” – stronice.
Hipertekst
• Strony WWW są budowane w specjalny sposób,
potocznie mówi się, iż są napisane w HTML-u.
O HTML: home.pl/pomoc/kursy/html
• Ułatwia przeglądanie i odczytywanie zawartości stron
i stronic.
• Strony mogą zawierać informacje w każdej formie –
teksty, rysunki, fotografie, dźwięki i sekwencje wideo
(multimedia).
• Linki – wskazanie linku można porównać
do zainicjowania czynności odszukania hasła
w encyklopedii.
Link inaczej
• Obraz fotograficzny rozpoznawany
przez serwery Nokii jako link do informacji
o miejscu/rzeczy.
• Łączenie geolokalizacji GSM + analiza
obrazów + mobilny dostęp do Internetu
• Obrazek zawiera treść:
http://www.gogolek.com
HTML5
• Wzbogaci Sieć o wiele nowych
możliwości, np. pozwoli odtwarzać filmy
bez dodatkowych wtyczek.
• + JavaScript ostatecznie pogrzebią
prywatność w Internecie.
• HTML5 umożliwia zapisywanie danych
stron WWW w pamięci komputera czy
telefonu. Dane mogą być zdalnie
odczytywane, zmieniane i usuwane.
Chip III.2011
HTML5 - JavaScript
• Nowe możliwości dla reklamodawców –
np. zbieranie informacji o aktywności
użytkowników w Sieci.
• HTML5 ułatwia korzystanie z Internetu za
pomocą urządzeń mobilnych i pozwala na
namierzanie ich pozycji dzięki geolokacji.
• HTML5 i JavaScript stanowią zagrożenie
dla prywatności.
Chip III.2011
Strony
• portal, „super strona” – udostępnia jeden punkt interakcji
z całym potencjałem informacyjno-usługowym;
• Zazwyczaj składają się na nią: wewnętrzny szperacz,
zasoby informacyjno-usługowe, katalog tych zasobów,
linki do wyróżnionych innych stron (np. sklepy, giełdy)
oraz darmowe usługi – skrzynka pocztowa, miejsce
na prywatną stronę, kawiarenka internetowa;
• portal wielotematyczny – portal horyzontalny
• portal monotematyczny – portal wertykalny,
(wortal),
• witryna – strona zazwyczaj prezentująca firmę,
osobę.
API
• Otwarte interfejsy programowania.
• Narzędzia umożliwiające każdemu
tworzenie nowych stron, wykorzystując
istniejące zasoby Sieci.
• Flash Earth;
• FlickrSudoku (sieciowa gra);
• PL, mapy Google’a w: miejsca.net,
ciekaweMiejsca.org, miejsce.info.
Mush-ups
Połączenie fragmentów zawartości wielu
stron w celu stworzenia nowej strony
– hybrydy.
Przykładami takich stron są połączenia map
(Google) z ofertą sprzedaży
nieruchomości (HausingMaps.com),
gromadzenie informacji o sytuacji
na drogach z miejskich WebCamów
i innych źródeł.
Niektóre ważne komponenty
• Formularze
• Przyciski akcji
• Typografia
– Rodzaj czcionki
– Proste
– Rozmiar
– Nie wersaliki
– Mała liczba kolorów
– Kolor tła
– Akapity
http://symetria.pl/blog/artykuly/10-przykazan-tworzenia-internetowych-formularzy-kursusability-cz-v/
http://www.uxbooth.com/articles/good-call-to-action-buttons
Personalne Mush-ups
• Yahoo, I.B.M., Microsoft i inni tworzą systemy
pozwalające użytkownikom, bez przygotowania
informatycznego, tworzyć użyteczne aplikacje
łączące (“mashing up”) różne onlinowe źródła
informacji.
• Yahoo’s mash-up tool, Pipes
• Produkt I.B.M. – QEDWiki – dedykowane
sprzedawcom, księgowym – osobom
potrzebującym informacji z różnych źródeł
do rozwiązywania biznesowych problemów.
I.B.M. opracował 10-minutowy tutorial QEDWiki
opublikowany w YouTube.
Edytory stron
• Antenna Web Design Studio
– Narzędzie do tworzenia stron WWW przeznaczone
raczej dla początkujących webmasterów. Nie wymaga
znajomości HTML, CSS ani innych tego typu
technologii.
– Poszczególne elementy (tekst, grafika, animacje
Flash, wideo, formularze itp.) przygotowywanej strony są
nanoszone za pomocą wizualnego edytora metodą „przeciągnij i upuść",
– Program umożliwia modyfikowanie właściwości praktycznie każdego obiektu
dostępnego w wizualnym edytorze, co pozwala w znacznym stopniu
zindywidualizować design tworzonej strony.
• KompoZer; Artisteer, openElement
WRZESIEŃ 2015 CHIP.PL
Inne Edytory
• WYSIWYG
– Wysiwyg Web Builder
– Xara Web Designer Premium
• Online
– umożliwiają utworzenie własnej strony
wyłącznie za pomocą przeglądarki WWW i
odpowiedniej usługi online.
– Click Web, Jimdo, OtoStrona, Webbly, uCoz,
Wix
Kreator stron
• aplikacja online, działająca w przeglądarce
internetowej;
• stanowi integralną część oferty
hostingowej;
• np. WEBski kreator (AZ.pl), w home.pl,
1&1 MyWebsite, ODT.pl, w nazwa.pl,
Weebly, Moonfruit, Jimdo, WordPress,
Artisteer.
Najczęściej wykorzystywane
narzędzia do budowy stron
• Dreamweaver
• Microsoft FrontPage (następcy: Expression Web
Designer, SharePoint Designer)
• Pajączek
• Edytor tekstowy
• Inne
• GoLive
• NetObjects Fusion
Komponenty używane przy konstrukcji Stron
Komponenty
Procent
zastosowań
JavaScript
55.87%
Frames
23.49%
StyleSheets
35.06%
Java
2.58%
IFrames
7.72%
GIF Images
61.22%
JPG Images
46.42%
PNG Images
4.11%
Flash/Shockwave
9.55%
Technologie tworzenia witryn
internetowych
•
•
•
•
•
•
•
•
XHTML (ang. Hyper Text Markup Language)
CSS (ang. Cascading Style Sheets)
JavaScript
PHP (ang. PHP Hypertext Preprocessor)
XML (ang. Extensible Markup Language)
MySQL
Protokół SSL (ang. Secure Socket Layer)
Flash
http://www.w3.org/TR/xhtml1/#xhtml
CSS (ang. Cascading Style Sheets)
• kaskadowe style arkuszy określają sposób w jaki
elementy strony WWW są odczytywane przez
przeglądarki.
• instrukcja, dzięki której przeglądarka wie jak
wygląda dany element i w którym miejscu ma
zostać umieszczony.
• Za pomocą CSS projektant ustala na przykład
rodzaj czcionki, jej rozmiar i kolor.
• Kaskadowe style arkuszy odpowiadają za
czytelność strony i jej warstwę estetyczną.
http://www.w3.org/Style/LieBos2e/enter/
Ajax
• Asynchronous Java-Script and XML
• Szeroki zakres technologii, czyniących strony
bardziej interaktywnymi.
• Nowa strona ukazuje się dopiero po jej
„skompletowaniu”. Stara „czeka na widoku”.
• Operacje obsługi witryny mogą być wykonywane
po stronie serwera (zmiana danych odbywa się
„w tle” – niezauważalnie dla internauty).
Ajax c.d.
• Ajax powoduje, że strony są bardziej
komunikatywne.
• Zmiany niewielkich ilości danych
na stronie nie wymagają przeładowania
całej strony.
Flash
• Jest w szczególności wykorzystywany
do budowy animowanych zasobów WWW.
• Umożliwia tworzenie interaktywnych wstawek
wideo do Stron.
• Wykorzystuje grafikę wektorową – oznacza to,
że grafika stworzona we flashu może być
skalowana (zmiana rozmiarów) bez żadnych
strat jakości.
• Nie potrzeba szczególnych umiejętności
do samodzielnego wykorzystywania tego
narzędzia.
JavaScript
• Jest językiem programowania;
• Umożliwia wprowadzenie interaktywności
do HTML-owych Stron;
• Produkty Javy można wprost wkładać
do Stron;
• Narzędzia JavaScriptu dostępne są bez
opłat, subsydiowane przez Netscapea
i Internet Explorera.
Zgodność kodów komponentów
stron
• Prawidłowo wyświetlane strony zgodne ze
specyfikacją W3.
• Usługa oceny zgodności świadczona
zdalnie przez strony:
– CSS – jigsaw.w3.org.css-validator;
– XHTML = validator.w3.org;
– XML – www.w3.org/2001/03/webdata/xsv;
– RSS i Atom – validator.w3.org/feed.
Widgets - widżety
Interaktywne moduły reklamowe
instalowane na stronach, a także
„elementy graficzne interfejsu
graficznego”.
Widgety
(http://www.widgipedia.com)
Niewielka aplikacja uruchamiana na pulpicie
lub na stronie.
Polskie znaki
•
•
•
•
Windows – 1250 – najmniej uniwersalny;
ISO8859-2 (Latin-2) – najpowszechniejszy;
UTF-8 – starsze systemy nie obsługują;
Najlepsze czcionki dla stron WWW:
Verdana, Tahoma, Arial lub Times New
Roman.
Czcionki na ekranie
• Czytelność strony jest
pochodną doboru
formy zapisu treści
publikowanych
w Sieci.
• krój czcionki,
• kolor czcionki,
• tło czcionki,
• kolor elementów tła
całej strony.
Rodziny najpopularniejszych czcionek
wyodrębnione na podstawie kodów źródłowych
analizowanych witryn
l.p. Witryna
Rodzina czcionek
1.
Google
Arial
2.
Onet
Veranda, Tahoma, Arial CE, Helvetica CE, Arial,
Helvetica
3.
Wirtualna Polska Arial, Helvetica
4.
Interia
Arial, Helvetica
5.
Allegro
Arial, Helvetica
6.
o2
Trebuchet MS, Veranda, Tahoma
7.
Nasza-klasa
Tahoma
8.
Gazeta.pl
Tahoma
9.
YouTube
Arial
10.
Wikipedia
Veranda, Arial, Helvetica, Tahoma
Średni czas rozpoznania wszystkich krojów
czcionek o kolejnych kolorach [w sekundach]
Średni czas rozpoznania kolejnych rodzajów
czcionek [w sekundach]
Internet 2010, raport strategiczny IAB Polska
http://jigsaw.w3.org/cssvalidator/validator?uri=www.gogolek.pl&profile=css3&usermedium=all&warning
=1&vextwarning=&lang=pl-PL
CMS
System Zarządzania Zawartością CMS (Content Management System)
• Jest to program umożliwiający bezpośrednie
wprowadzanie informacji do „szablonów”.
• Redaktor dbający o aktualność określonych
informacji wyświetlanych na zarządzanej
przez niego Stronie, opracowuje wiadomość
(np. bieżące notowania walut) przy pomocy
dowolnego edytora i za pośrednictwem CMS-u
bezpośrednio przesyła swój materiał na Stronę.
CMS
• Aplikacja pozwalająca w efektywny
sposób tworzyć informacje i dokumenty
oraz zarządzać nimi, a także publikować
na Stronach przez osoby
bez przygotowania technicznego.
• Narzędzie pozwalające na interaktywny
kontakt z klientem.
• System zorientowany na łatwość
zarządzania i przetwarzania informacji.
Standardowe funkcje CMS:
•
•
•
•
•
•
•
•
•
•
•
zarządzanie zasobami,
rozbudowany edytor umożliwiający tworzenie i formatowanie dokumentów
bez znajomości HTML,
integracja z pakietem MS Office,
definiowanie procesów workflow dla publikowanych dokumentów,
mechanizmy służące do zarządzania wyglądem i strukturą portalu modułowość, dedykowane narzędzia,
możliwość dodawania metadanych do dokumentów,
podział użytkowników na role ze względu na wykonywane zadania
i udostępnione im funkcje systemu,
mechanizmy bezpieczeństwa i autoryzacji,
otwarta architektura systemu (możliwość dodawania mechanizmów
dynamicznych: bazy notowań, wykresy, kalkulatory, aplikacje do tworzenia
formularzy, zlecenia internetowe, testy, listy dyskusyjne, chaty, forum, gry
itp., e-commerce, SMSy),
personalizacja i statystyki,
wyszukiwarka.
CMS - Blogi
•
•
•
•
•
Wordpress
Movabletype
Habari – alternatywa dla Wordpressa
Blogger
Tumblr
CMS – inne
handel online
• Oscommerce
• Magento
• Prestashop
• Zencart
ogólne
• Joomla!
• Drupal
• Umbraco
• Wix
CHIRPL CZERWIEC 2013
Zarządzanie stronami
Oczekiwania odwiedzających
stronę
•
•
•
•
Użyteczność
Funkcjonalność
Intuicyjność
Wydajność
Zarządzanie Stronami
powinno uwzględniać
•
•
•
szacunkową liczbę odwiedzających Stronę
kim są odwiedzający Stronę Internauci?
jakiego systemu operacyjnego (SO) używają i jakiej przeglądarki
(np. czy Strona spełnia wymogi standardów HTML, XHTML,
CSS)?
kto polecił odwiedzającym Stronę?
liczba rzeczywistych odwiedzin (Stat4You, TheCounter.com),
szybki, ciągły (24/7) dostęp do Strony,
dzienne, tygodniowe, miesięczne statystyki pozwalające ocenić:
•
•
•
•
–
–
–
–
–
–
•
jakiej przeglądarki używają odwiedzający?
rozdzielczość ekranu odwiedzających?
SO odwiedzających?
jakie Strony mają linki do budowanej Strony?
jakie szperacze wykorzystano do lokalizacji budowanej Strony?
jakich słów kluczowych używali odwiedzający w szperaczach?
stan liczników życia Strony, łącznie z niewidocznym.
Siedem zasad efektywnej strony WWW
• Zasada 1: Konsument ma rację – słuchaj i odpowiadaj
na jego potrzeby. Należy zrozumieć dlaczego
konsumenci odwiedzają stronę.
• Zasada 2: Określenie podstawowego celu utrzymywania
strony. Uświadomienie akcji, które chcemy sprowokować
u określonych klientów.
• Zasada 3: Priorytetyzować doświadczenia klientów.
Klienci odchodzą do konkurencji, bo czują się
niedocenieni lub szacują, że koszt dalszego
prowadzenia interesów jest większy od uzyskiwanych
korzyści. Uwzględniając znane doświadczenia klientów
łatwiej ich utrzymać.
Zasady: 4 - 7
• Zasada 4: Wykorzystywanie wiedzy o klientach.
• Zasada 5: Ocena uchybień strony. Np. analiza
niesatysfakcjonujących wyników poszukiwań
na stronie.
• Zasada 6: Kreowanie dialogu z konsumentem.
Dostępne narzędzia personalizacji ułatwiają
prowadzenie dialogu, dostosowanie go
do specyficznych odbiorców (kwestia
pozyskanych danych osobowych, zachowań).
• Zasada 7: Optymalizacja skuteczności strony.
Wykorzystanie strony jako niedrogiego
narzędzia oceny nowych koncepcji i idei.
Kategorie zasad konstrukcji
i utrzymywania stron internetowych
• Dostępność,
• Użyteczność,
– komunikatywność,
– nawigacja.
• Zawartość merytoryczna,
KATEGORIA – Dostępność
(ang. accessibility
 Wykupienie stosowanej domeny, która jak
najlepiej
odzwierciedla
nazwę
firmy.
 Troska o pozycjonowanie linku witryny,
na liście SERP lub obecność w linkach
sponsorowanych.
Kategoria - użyteczność
 intuicyjna nawigacja
 dostępność informacji
 zrozumiała dla użytkownika komunikacja
P. Kazimirowicz, Krótki traktat o
Web-Usability, czyli gdzie mam
kliknąć?, kazimirowicz.pl,
Warszawa 2012, s. 2.
KATEGORIA – Komunikatywność


Interaktywność:
 Czas załadowania strony głównej nie
powinien przekraczać 2 s.;
 Brak błędów połączeń podczas poruszania
się po witrynie;
 Biuro prasowe online powinno być
dostępne ze strony głównej witryny;
 Obecność linków w tym troska o ich
aktualność, związek z branżą i zgodność
zasobów z ich zapowiedzią;
 Szybkość i jakość odpowiedzi na e-maila;
 Poprawność i aktualność e-maila podanego
na oficjalnej stronie firmy – możliwość
skontaktowania się z firmą za jego
pośrednictwem;
 Obecność okna e-mail do tzw. szybkiej
komunikacji.





Dostępność: newslettera, RSS-a,
rejestracyjnego;
Możliwość zalogowania się.


Aktualność informacji na stronie;
Aktualność linków.

Poprawność
pod
kątem
ortograficznym,
gramatycznym, stylistycznym;
Niestosowanie
niewytłumaczonych
skrótów
i pojęć;
Dostępność witryny w przynajmniej dwóch
językach.
o Umiejscowione w dobrym miejscu - podtytuł
powinien otaczać swoją konstrukcją określoną
zawartość;
o Szybkie w lekturze;
formularza
o Zrozumiałe;
Aktualność danych:
o Dobrze definiujące określony tekst.

Zrozumiałość przekazu:


Obecność tytułów, które powinny być:
o Wyraźnie oznaczone;
o Umiejscowione w dobrym miejscu – tytuł
powinien otaczać swoją konstrukcją określoną
zawartość;
o Zgodne z wcześniejszym kliknięciem;
o Szybkie w lekturze;
o Zrozumiałe;
o Dobrze definiujące określony tekst.
Obecność podtytułów, które powinny być:
o Wyraźnie oznaczone;
Personalizacja:


Czytelność przekazu:
Linki:
o Wyraźne oznaczenie linków przed kliknięciem;
o Wyraźne oznaczenie linków po kliknięciu;
o Zgodność linków z ich
tematycznym kliknięciem.

Obecność multimediów.
wcześniejszym
KATEGORIA - Nawigacja
 Pasek nawigacji:
 Obecność paska nawigacji
na stronie głównej;
 Obecność paska nawigacji
na wszystkich stronnicach;
 Pasek narzędzi jest wszędzie
taki sam.
 Obecność drzewa strony;
 Dostępność
strony
głównej
z dowolnego miejsca serwisu;
 Dostępność przycisku wstecz
z dowolnego miejsca serwisu;
 Możliwość szybkiego
drukowania;
 Wewnętrzny szperacz witryny;
 Obecność Identyfikatora witryny
lub logo na każdej stronicy;
 Jednolitość witryny pod kątem
treści, formy i koloru;
 Wyraźne oznaczenie przycisków
do kliknięcia.
KATEGORIA - Zawartość merytoryczna
 Dane o firmie:
 Cel istnienia firmy;
 Slogan reklamowy;
 Informacje ogólne – definicje
podstawowych pojęć związanych
z branżą;
 Informacje o usługach/produktach
oferowanych przez firmę;
 Najważniejsze osoby w firmie +
zdjęcia;
 Historia firmy/produktów z nią
związanych;
 Dane finansowe;
 Problematyka socjalna;
 Sukcesy - opis efektów działań firmy,
pochlebne cytaty, referencje, nagrody
itp.;
 Lista klientów.
 Dane kontaktowe:










pełna nazwa firmy;
numer ulicy;
numer lokalu;
kod pocztowy;
miasto;
mapka dojazdu;
NIP;
e-mail;
numer telefonu;
numer faksu.
 Informacje dla mediów:
 Internetowe biuro prasowe;
 Newsy – najświeższe wiadomości dotyczące firmy
lub/i branży;
 Materiały prasowe;
 Media o nas – informacje dostępne w mediach
o firmie.
Rozkład uwzględniania, przez firmy PR, zasad
składających się na każdą z kategorii [%]
U. Gogołek, Internetowe witryny firm PR-owskich – próba diagnozy, 2009
Lista klientów
Sukcesy
Problematyka socjalna firmy
Rozkład
uwzględniania
zasad
składających się
na dane o firmie
[%]
Dane finansow e firmy
Historia
Zdjęcia dyrektorów poszczególnych działów
Przedstaw ienie dyrektorów najw ażniejszych
działów
Zdjęcie prezesa firmy
Przedstaw ienie prezesa firmy
Informacje o usługach/produktach
Informacje teoretyczne o branży
Slogan reklamow y
Cel istnienia firmy
0
20
40
60
80
100
Rozkład uwzględniania zasad składających się
na personalizację witryny [%]
Rozkład uwzględniania zasad składających się
na poprawną nawigację witryny [%]
Wyraźne oznaczenie przycisków do kliknięcia
Jednolitość witryny pod względem treści, formy i
koloru
Obecność identyfikatora witryny lub logo na każdej
stronnicy
Wewnętrzny szperacz
Możliwość szybkiego drukowania
Przycisk wstecz z dowolnego miejsca stronnicy
Połączenie ze stroną główną z dowolnego miejsca
stronnicy
Obecność drzewa strony na każdej stronnicy
Drzewo strony
0
10
20
30
40
50
60
70
80
90
100
Badanie
konstrukcji stron
Struktura oglądania stronicy
• Większość stron jest przeglądana, ale nie jest czytana.
• Naturalny odruch czytania (w języku polskim) od lewej do prawej
i z góry w dół zmusza do zachowania równowagi między obrazem
i tekstem; obraz powinien być umieszczony po lewej stronie ekranu.
• Ważne ilustracje należy umieszczać po prawej stronie ekranu –
zdominują one treści będące po lewej stronie ekranu.
• Najczęściej zwracana jest uwaga na lewy górny róg stronicy
oraz na tekst, który jest umieszczony bezpośrednio pod ilustracją
zajmującą tę część obrazu (najlepiej logo).
• Uwaga czytających jest skierowana na wyróżnione fragmenty
tekstów.
• Podobny efekt jest związany z odwracaniem uwagi od zasadniczych
treści strony przez przyciski nawigacyjne. Celowe jest zatem
zastępowanie ich innymi formami nawigacji, na przykład łatwym
dostępem do mapy strony.
Eye Tracking –
Mapa częstotliwości zwracania wzroku (100% - ciemne fragmenty
obrazu, 0% - białe) na wszystkie obszary „Stronicy lądowania”
[1]
Livingston Brian, How Eyetools Finds Flaws In Your Pages, March 8, 2005, http://itmanagement.earthweb.com/.
Badania okulograficzne
• śledzenie ruchu gałek ocznych;
• internauci najczęściej zwracają uwagę
wyłącznie na pierwsze wyniki
wyszukiwania i reklamy na górze strony.
Eyetracking 1/2
• Jest bardzo istotnym rozszerzeniem metod
badawczych.
• Umożliwia śledzenie i rejestrowanie
sposobów analizy zadań, wykresów, strategii
wyboru wyświetlanych treści.
• Wykorzystanie eyetrackera daje możliwość
pomiaru zmian szerokości źrenicy oka, które
możemy rejestrować i korelować z
subiektywną oceną odbieranych treści,
obciążeniem poznawczym oraz emocjami
Eyetracking 2/2
 Badanie eyetrackingowe polega na śledzeniu punktu, na którym
skupia się wzrok osoby badanej.
 Rejestrowany jest czas przez jaki badany zatrzymuje spojrzenie na
każdym obiekcie (w tym kontekście obiektami będą elementy
interfejsu strony internetowej oraz zamieszczony na niej tekst i
grafika).
 Zapisywana jest też kolejność, w jakiej badany patrzył na
poszczególne obiekty.
dr Artur Bartoszewski - BADANIE FUNKCJONALNOŚCI SERWISÓW I APLIKACJI INTERNETOWYCH
68
Eyetracking - parametry
Uzyskujemy dwa rodzaje danych:
•
fiksacje czyli punkty, w których wzrok badanego się zatrzymał,
•
sakkady czyli ruchy oczu, kiedy badany przenosi wzrok z
jednego punktu do drugiego.
69
Eyetracking - zastosowania
Wyniki badania Eyetrackingowego pozwalają:
•
lepiej pokierować uwagę użytkownika,
•
poprawić czytelność strony (zwłaszcza tekstów i systemów
menu),
•
udoskonalić architekturę informacji (pomóc użytkownikowi w
wyszukiwaniu informacji) .
70
Clicktracking
Clicktracking polega na zliczaniu kliknięć na poszczególne obszary
strony.
Wyniki badania clicktrackingowego prezentowane są jako statystyki
kliknięć dla poszczególne elementy aktywne lub mapy ciepła.
Clicktracking pozwala:
•
przetestować system nawigacji strony,
•
zoptymalizować system nawigacji strony,
•
usunąć nadmiarowe łącza i narzędzia,
•
usunąć lub przeprojektować elementy które omyłkowo brane są
przez użytkowników za element nawigacji strony.
71
CLICKpoint
CLICKpoint to narzędzie, przedstawiające
graficzne odwzorowanie ruchu użytkowników na
stronie internetowej.
Obraz tworzony jest na podstawie wykonywanych
na stronie kliknięć. Informacje zgromadzone za
pomocą usługi prezentowane są w trzech
formach: mapy kliknięć, rozkładu kliknięć oraz
listy kliknięć.
Oprócz informacji o kliknięciach prezentowana jest
także lista źródeł ich pochodzenia, czyli geneza
kliknięć.
http://www.7point.pl/produkty/mapa_klikniec/mapa_klikniec.html
CLICKpoint (mapy cieplne)
http://www.7point.pl/produkty/mapa_klikniec/mapa_klikniec.html
Inne pomiary –
heat-map technology
• Tandem eye tracking z biometrycznym
monitoringiem.
• Rejestracja ruchów myszki po stronie.
• Aktywność sercowo – naczyniowa – ECG,
• Elektoromiografia (EMG). Przedmiotem
rejestracji w badaniu EMG jest elektryczna
aktywność mięśni.
Więcej o konstrukcji stron – w
6 Szperacze1
Montaż elektrod EEG, zastosowanie
stacjonarnego elektroencefalografu
podczas badań
Władysław Błasiak, Małgorzata Godlewska, Roman Rosiek, Dariusz Wcisło, Nowe technologie w badaniach edukacyjnych . 23. OGÓLNOPOLSKIE SYMPOZJUM
NAUKOWE „CZŁOWIEK - MEDIA - EDUKACJA”. Uniwersytet Pedagogiczny im. Komisji Edukacji Narodowej w Krakowie Wydział Pedagogiczny
Katedra Technologii i Mediów Edukacyjnych, 27-28 września 2013
Okno programu dla urządzenia mobilnego monitorującego
pracę serca, przewodność skóry, oddech,
podczas prowadzonego badania
Aktywność elektrodermalna (EDA)
• To jeden z najłatwiej mierzalnych
parametrów psychofizjologicznych.
• Pomiaru dokonujemy najczęściej mierząc
przewodność pomiędzy palcami lewej
dłoni.
• Fizjologiczna zmiana EDA wynika z
aktywności gruczołów potowych oraz
wynikającej z tej aktywności zmiany
przewodności naskórka.
Pomiar aktywności elektrodermalnej (palec 2 i 4),
fotopletysmograf – kciuk, temperatura – palec 3
Przykład oprogramowania typu „emotion recognition”
http://staff.science.uva.nl/~aldersho/isis/VisualRecognition/Contact.html
Monitorowanie amplitudy oraz
częstości oddechu
„A/B testing”
• Pozwala sprawdzać nowe idee w czasie
rzeczywistym z pomocą wielkich grup
fokusowych.
• Metoda polega na przekierowaniu części
użytkowników strony internetowej, bez ich
wiedzy, na jej zmienioną wersję i porównywaniu
ich zachowań z zachowaniami użytkowników
strony pierwotnej. Jeśli nowa wersja okazuje się
lepsza (więcej kliknięć, dłuższe wizyty i większe
zakupy), to zastępuje oryginalną, jeśli jest
gorsza - znika. Testowanie A/B pozwala zmienić subiektywne, intuicyjne, często niekorzystne
decyzje (np. czcionkę, kolor, wybór ilustracji, tekst) w wybory obiektywne, dzięki analizie ogromnej ilości realnych
danych. Analizuje się bowiem niekiedy zachowania milionów użytkowników.
Piotr Płoszajski, Big Data: nowe źródło przewag i wzrostu firm. E-mentor nr 3 (50) / 2013
Czas wczytania strony
• Pomiar wtyczką z Google Webmaster
Tools.
• Wtyczka do Firefox’a:
https://addons.mozilla.org/pl/firefox/addon/
fasterfox-9148/
Ocena Stron
Sprawdź swoją stronę
• Gdzie kierujesz wzrok w pierwszej kolejności?
• Czy potrafisz powiedzieć o czym jest strona?
• Czy ważne informacje są na pierwszej stronicy
(bez przewijania)?
• Czy korzyści dla czytelnika są podkreślone?
• Czy są czytelne zachęty do akcji (druk, info.)?
• Czy kolory, znaki, animacje są rozpraszające?
• Czy czujesz osobisty związek ze stroną?
• Czy są linki do stron społecznościowych?
Waga interaktywności Stron
W odniesieniu do mediów i innych branż
w Sieci, fundamentalna jest
interaktywność Stron oraz możliwość
dynamicznego łączenia (linki) informacji
tekstowych z bogactwem uzupełnień
w formie multimedialnych zasobów.
Dzięki temu Portale stają się żywe, często
z aktualizowanymi na bieżąco danymi,
z grafiką, dźwiękiem i multimedialnymi
prezentacjami.
Kategorie merytorycznych
ocen stron
• Technologia i funkcjonalność:
•
•
•
•
Technologia – wygląd i nawigacja;
Interaktywność;
Linki, wydarzenia i słowniki;
Dostępność.
• Zawartość:
• Informacje finansowe;
• Informacje o firmie;
• Informacje adresowe.
Dostępność strony
jest oceniana głównie przez informacje,
które ułatwiają
rozpoznawanie/indeksowanie witryny
przez szperacze.
Technologia – wygląd i
nawigacja
• Szperacz wewnętrznych zasobów witryny;
• Możliwość drukowania określonych treści;
• Ogólne narzędzia poruszania się
po zawartości strony;
• Łatwość dostępu do informacji
finansowych;
• „Drzewo/mapa” strony.
Co ważne na stronie?
•
•
•
•
•
•
Interaktywność jest interpretowana jako możliwość subskrypcji
określonych informacji dostarczanych via mail, np. czas udzielenia
odpowiedzi na zadane pytanie mailem.
O wartości linków na stronie świadczą ich aktualność i związek z branżą
oraz wskazywanie informacji o wydarzeniach dotyczących przedmiotu
działalności firmy – właścicielki strony.
Dostępność i zasobność słowników związanych z firmą.
Kluczowe elementy: informacje adresowe, schemat organizacyjny,
prezentacja władz i historia firmy.
Dodatkowe informacje o firmie: sprawy socjalne oraz ogłoszenia
o wolnych miejscach pracy i możliwości zdalnego składania CV.
W ramach finansowych informacji o firmie - dostępność online: ostatniego
raportu finansowego (w formatach PDF/HTML), archiwum poprzednich
raportów, kalendarza firmowych zdarzeń, notowania akcji, wielkości
obrotów akcjami firmy, polityki, historii dywidend, informacji o właścicielach
i innych istotnych danych finansowych.
Liczniki - samoocena konstrukcji
i atrakcyjności strony
• Szybki dostęp do statystyk strony – 24/7/365, czyli
w skali dnia, tygodnia i roku;
• Możliwość oceny:
–
–
–
–
–
–
–
jakiej przeglądarki używa wizytujący stronę,
rozdzielczość ekranu odwiedzającego,
system operacyjny odwiedzającego,
które strony polecają ocenianą witrynę,
który szperacz wskazał wizytującemu stronę,
jakich słów kluczowych używał odwiedzający w tym szperaczu,
kilka różnych stylów licznika, łącznie z niewidocznym
dla internautów.
• Mailowe komunikaty (alerty).
Inne pomiary składowych jakości
i popularności stron
• Zorientowane na użytkownika:
–
–
–
–
jakie strony/stronice odwiedzili internauci,
ile czasu w nich spędzili,
skąd trafili do określonego zasobu i dokąd się z niego udali,
kiedy zostało rozpoczęte połączenie z Internetem, kiedy zakończone,
jak długo trwało itp.
• Zorientowane na stronę:
– liczba odwiedzin użytkowników (w rozbiciu na nowych i powracających),
– czas pojedynczej wizyty,
– strony odsyłające/szperacze, przez które odwiedzający trafił
na ocenianą stronę,
– strony/stronice początkowe i końcowe wizyt,
– czas, jaki odwiedzający spędził na stronie/stronicy,
– ścieżka poruszania się po stronie,
– konfiguracja komputera odwiedzającego,
– informacje geolokacyjne (państwo, miasto).
[1] Magdalena Pięta, Raport z oblężonej witryny, „Chip” 2005, nr 1.
Miarą popularności strony –
„unikalni odwiedzający”
• Bez względu na to, ile razy wizytujący odwiedzi
określoną stronę w zadanym czasie, liczba
unikalnych wizyt będzie powiększona tylko
o jeden w chwili jego pierwszych odwiedzin
w określonym przedziale czasowym.
Ocena głównie wg cookies.
• Wizytę/odwiedziny należy rozumieć jako
otwarcie strony – połączenie się z nią
za pośrednictwem przeglądarki i odczytanie
jakichkolwiek treści.
Pojęcia ilościowych ocen
• Wywołanie/hit – wczytanie dowolnego elementu
z serwera WWW. Np. załadowanie strony z 3 plikami graficznymi = 4 hity.
• Strona WWW – wywołanie dokumentu o rozszerzeniu
HTM, HTML, TXT lub skryptu, np. PHP.
• Sesja – ciąg plików (kolejnych wywołań) pobranych
przez jednego użytkownika z konkretnego adresu
WWW.
• Wejście – dokument, od którego użytkownik zaczyna
przeglądanie strony.
• Transfer – ilość danych (w KB), które zostały pobrane
z serwera.
Analityka Sieci
jest obiektywnym śledzeniem,
gromadzeniem, mierzeniem,
raportowaniem i analizowaniem
ilościowych danych o Internecie w celu
optymalizacji stron i inicjatyw
marketingowych.
Służą temu stosowne narzędzia.
Funkcjonalność stron WWW w odbiorze
przeciętnego użytkownika
Źródło: NIELSEN J., LORANGER H.: Optymalizacja
funkcjonalności serwisów internetowych. HELION, Gliwice 2007
95
Funkcjonalność stron WWW z punktu widzenia projektanta
Błędy technologiczne:
 niedziałające systemy nawigacji i prezentacji treści,
 kod
źle
interpretowany
i platformy sprzętowe,
przez
niektóre
przeglądarki
 zbyt długi czas ładowania strony.
96
Funkcjonalność stron WWW z punktu widzenia projektanta
Błędy projektu:
 problemy z architekturą informacji (układ strony, system
nawigacji, podział treści itp.),
 problemy z przekazem informacji (treść nieprzystosowana do
specyfiki komunikacji internetowej, treści nadmiarowe, brak
treści oczekiwanych przez użytkownika),
 projekt strony niedopasowany do prezentowanych treści
i wymagań użytkowników (szata graficzna strony, kolorystyka i
typografia, sposób wykorzystania elementów animowanych i
multimedialnych).
97
Metody ewaluacji funkcjonalności stron internetowych
Najczęściej stosowanymi metodami badań funkcjonalności stron
internetowych są:

zogniskowany wywiad grupowy,

testy funkcjonalności,

eyetracking,

clicktracking,

analiza statystyk ruchu na stronie.
98
Zogniskowany wywiad grupowy 1/2
 Zogniskowany wywiad grupowy polega na sterowanej interakcji
(rozmowie, grach skojarzeniowych itp.) niewielkiej grupy
zaproszonych osób.
 Badanie to prowadzone jest przez doświadczonego moderatora,
który ukierunkowuje przebieg dyskusji na zagadnienia, które mają
zostać zbadane.
 Badania tego rodzaju polegają w istocie na wnioskowaniu o
odczuciach i postawach badanych (nieujawnionych wprost).
99
Zogniskowany wywiad grupowy 2/2
Zogniskowane wywiady grupowe:
•
służą do odczytania opinii, sądów, motywów zachowań i emocji
przyszłych użytkowników witryny,
•
pozwalają na ustalenie i zrozumienie
bezpośrednio motywów zachowań,
•
ułatwiają generowanie idei związanych z rozwojem witryny.
nieujawnionych
Otrzymane wyniki nie przekładają się wprost na wskazówki przydatne
przy tworzeniu serwisów internetowych.
100
Testy funkcjonalności 1/2
 W teście funkcjonalności bierze udział tylko jedna osoba na raz.
 Badanemu prezentowany jest strona WWW (może to być strona
działające w pełni, lub tylko częściowo, rzadziej wykorzystywany
jest prototyp strony).
 Zadaniem uczestnika testów nie jest ocena strony, lecz wykonanie
za jej pomocą typowych zadań, jak np. dokonanie transakcji lub
odnalezienie określonych informacji.
101
Testy funkcjonalności 2/2
Testy funkcjonalności pozwalają na:
•
przetestowanie architektury informacji strony,
•
przetestowanie systemu wyszukiwania,
•
wskazanie elementów systemu nawigacji, które sprawiają
trudności,
•
wskazanie elementów i mechanizmów niejasnych i kłopotliwych
dla użytkownika.
Celem testów funkcjonalności jest pokierowanie
uwagą projektantów i programistów.
102
Pozorny ruch – dzieło
automatów
• 49 % wszystkich odwiedzin na witrynach pochodzi od
fizycznych osób.
• 20 % całego ruchu w Internecie generują mechanizmy
katalogujące witryny w wyszukiwarkach.
• 31% to „złośliwy„ ruch, czyli skrypty i spamboty.
• 5% sztucznego ruchu generowane jest przez narzędzia hakerskie.
• 5% - „zbieracze", kradną treści umieszczane w witrynach.
• 2% boty generujące spamowe komentarze i wpisy w których
umieszczane są reklamy na forach.
• 19 % - pospolity spyware.
MAJ 2012 CHIPPL
Wartość strony
• Websiteoutlook jest miejscem/narzędziem szacunkowej
oceny wartości strony.
• Użyteczne w chwili sprzedaży/kupna strony.
http://websiteoutlook.com/
http://www.speedtest.pl/wycena
http://www.sitevalue.info//www/gogolek.com
Inne narzędzia do wycen
• MCJOnline/CuteStat Lite (mcjonline.com)
• Free Website Report
(www.freewebsitereport.org)
• Webuka (www.webuka.com)
• Your Website Value
(www.yourwebsitevaIue.com)
• Siteprice (www.siteprice.org)
Teqpad to narzędzie, pozwalające uzyskać dostęp do statystyk każdej witryny dostępnej
w Internecie, a także wielu innych, użytecznych informacji dotyczących danego serwisu.
Sprawdzenie strony WWW w Teqpad dostarczy nam takich informacji jak dzienna ilość
wizyt, odsłon, użytkowników, udział witryny w globalnym ruchu, a nawet jej przybliżoną
wartość oraz dzienne zarobki. Ponadto znajdziemy tam ilość linków prowadzących
do owej strony, mierzoną przez kilka wyszukiwarek, obecność serwisu w popularnych
katalogach, a także jej pozycję w różnego rodzaju rankingach.
Dodatkowe dane, do których zyskujemy dostęp to szczegółowe informacje na temat
serwera oraz domeny, tytuł, opis i screen strony głównej, a także datę ostatniej wizyty
robota Google.
Statystyki wskazanej strony
Wystarczy wejść na:
www.teqpad.com
i wpisać adres strony
internetowej, której
statystyki nas interesują
Najpopularniejsze statystyki
Wg portalu InternerMaker
najczęściej używanymi w Polsce programami
do statystyki strony internetowej są:
Google Analitycs
OpenTracker
Stat24
AWStats
BBClone
Wszystkie dostępne są w wersji
bezpłatnej lub całkowicie bezpłatne.
Każdy pobiera nasze statystyki
dla swoich celów.
Płatne, ale jest 4-tygodniowy okres próbny.
Statystki o naprawdę dużych możliwościach. Przyjemnie zaprojektowane.
Koszt to 16,99 USD miesięcznie lub 169$ USD rocznie.
Jest to cena najczęściej wykraczająca poza budżet zwykłego webmastera,
ale niewygórowana dla internetowego biznesu średniej wielkości.
Choć jest to produkt amerykański, udostępnia wiele wersji językowych
interfejsu użytkownika, w tym polską.
http://www.opentracker.net/en/demo/demo6.jsp
Statystyki rodem z Polski, dostępne zarówno w wersji darmowej,
jak i profesjonalna wersja płatna.
Obsługiwane przez zewnętrzny serwer.
Cena tej ostatniej waha się od 600 zł do 3500 zł rocznie,
w zależności od liczby odsłon serwisu.
Warunkiem korzystania z w pełni funkcjonalnej, bezpłatnej wersji statystyk
statStandard jest zamieszczenie logotypu na stronie głównej
monitorowanej witryny oraz wyrażenie zgody na emisję ankiet
badawczych i reklam komercyjnych na łamach swojej witryny.
Ranking stat24 to narzędzie służące zarówno witrynom
zainteresowanym bezpłatną promocją w internecie, jak również
pełniące funkcję wiarygodnego źródła informacji dla internautów
poszukujących tematycznych serwisów.
Jest to także miejsce, w którym istnieje możliwość
zaprezentowania swojej witryny reklamodawcom.
Dane ilościowe prezentowane w statystykach,
w czytelnym interfejsie, wykonanym
w technologii FLASH.
30 słów kluczowych dla jednej domeny,
dla każdej z przeglądarek.
Obserwowanie odwiedzalności witryny przez
internautów posługujących się stałym IP.
Możliwość zablokowania wybranych IP w celu
nie zliczania ruchu wybranych użytkowników.
Ciągłość w gromadzeniu danych
o monitorowanej witrynie oraz ich dostępność
24/dobę.
Geograficzne zlokalizowanie miejsca,
z którego internauta łączy się z witryną.
Mapa kliknięć.
StatSEO – statystyki pod kątem
pozycjonowania w przeglądarkach
wraz z konkretnymi wskazówkami
(płatne).
Darmowy program, instalowany na serwerze
użytkownika. Statystyki Awstats są bardzo
często domyślnie dostępne na serwerach
WWW.
http://awstats.sourceforge.net/awstats.ftp.html
Tweetstats
• Narzędzie do analiz Twittera,
• Informacje o loginach i tagach,
• Bezpłatny.
Darmowe, instalowane na serwerze użytkownika.
Bardzo ciężka instalacja, mimo że program skierowany do laików.
Statystyki są jeszcze prostsze niż Awstats.
Raczej nie nadają się do profesjonalnych zastosowań.
Pasują idealnie na strony przeznaczone dla osób niemających ochoty
na wgłębianie się w zaawansowane statystyki.
To po prostu zbiór najważniejszych informacji.
http://www.bbclone.de/demo/
http://www.countomat.pl/o_nas.html
Analiza za darmo, dalsze zabiegi płatne
Pierwszy w Polsce system statystyk WWW
Bezpłatna wersja z reklamami bez prywatności
Narzędzia marketingu internetowego
Bezpłatne najprostsze statystyki (mapa klikań itp. już
płatne)
Służy do korzystania z Google Analitycs za darmo
http://marcinkaszynski.com/blog/index.php/2007/11/03/
el-monito-w-google-analytics/
Płatny, śledzi wypowiedzi o marce, firmie itp., porównuje ją
z innymi ofertami, podaje efekty ostatnich działań
(jednocześnie prowadzi typowe statystyki, które również
podaje)
http://www.brandometr.pl/features
ALEXA
COMPETE
QUANTCAST
GEMIUS
PBI
NETCRAFT
GADUSONDA
ADOCEAN
TRADEDOUBLER
SYNTETOS
Amerykańska spółka złożona w 1996 r., po 3 latach wykupiona
przez Amazon.com.
Tworzy ranking najpopularniejszych stron internetowych na świecie,
w danym kraju i wg konkretnych kategorii (bardzo dużo)
oraz najpopularniejszych stron w danej chwili (aktualizacja co 5 minut).
Metodologia: Zliczanie statystyk oparte jest na programie szpiegującym –
Alexa Toolbar.
W obliczaniu statystyk nie są w ogóle brane pod uwagę połączenia RSS, HTTPS i wszelkie transakcje
nie związane z protokołem HTTP. Oznacza to, iż bardziej zainteresowani bezpieczeństwem bądź
wolnym oprogramowaniem użytkownicy w statystykach Alexy są pomijani. Skutkiem tego statystyki
Alexy mogą zaniżyć faktyczną wartość ruchu na niektórych ze stron.
Mimo to nie należy traktować tych statystyk jako na wskroś fałszywych, gdyż są one jednym ze źródeł
danych na temat popularności danej strony internetowej, z drugiej strony jednak nie powinny one
stanowić jedynego źródła informacji.
http://www.alexa.com/
Udostępnia nie tylko wygenerowane dane statystyczne, ale także wiedzę na
temat internetu, niezbędną m.in. podczas tworzenia strategii marketingowych.
Działalność Gemius związana jest z badaniami internetu od momentu
powstania firmy, tj. od 1999 roku. W ciągu zaledwie kilku lat osiągnęli w tej
dziedzinie pozycję lidera na rynku polskim. Obecnie firma realizuje badania
internetu w kilkunastu krajach Europy Środkowo-Wschodniej.
Megapanel – badanie odwiedzalności stron polskich
użytkowników internetu robione na zlecenie PBI.
Metodologia – panele.
Dane gromadzone są dzięki skryptom zliczającym,
umieszczonym w kodzie stron podłączonych do badania.
Ocena stron wg
7point.pl
były NeoStat
Jak funkcjonuje Twój serwis
w sieci?
• Każdy internauta trafia na stronę
z jakiegoś źródła.
• Czy będzie to poczta www, czy
wyszukiwarka, lub odnośnik z innej strony
– należy znać te źródła i ich atrakcyjność.
http://www.7point.pl/
Użytkownicy Twojego serwisu w
liczbach
• Lojalność wobec serwisu może być bardzo
różna. Niektórzy internauci stale
odwiedzają serwis, inni pojawiają się
sporadycznie lub jednorazowo.
• Dowiesz się jak wygląda stosunek tych
ostatnich do pierwszych i jakie są
tendencje w wejściach i odsłonach Twojej
strony.
Badanie jakości i atrakcyjności
serwisu
• Im ciekawsze treści tym więcej użytkowników
i tym więcej czasu spędzają oni na serwisie.
Jednak nie wszystkie podstrony bywają równie
ciekawe. 7point przybliży nam te obszary
serwisu, które są zmarginalizowane i nie cieszą
się tak dużym zainteresowaniem jakbyśmy tego
oczekiwali.
• Jakość to również techniczna poprawność
strony, którą dzięki 7point łatwo można
zweryfikować.
Zachowanie użytkowników
w Twoim serwisie
• Wiemy już skąd użytkownik przyszedł na serwis,
jak często go odwiedza i ile czasu na nim
spędza.
• Statystyki pozwalają pójść dalej i przedstawiają
drogę użytkownika od momentu wejścia
na serwis do momentu zakończenia wizyty.
Wiedza ta, pozwoli zoptymalizować serwis
pod względem użytkowym i jest ważną częścią
składową analizy zachowań
po przeprowadzonej kampanii reklamowej.
Lokalizacja użytkowników
twojego serwisu
• Czy trafiłeś ze swoją drukowaną reklamą
tam gdzie chciałeś?
• W 7point możesz sprawdzić z jakich
części świata, Polski, z jakich województw,
a nawet miast odwiedzają Twój serwis
użytkownicy.
Najważniejsze informacje
w okresowych raportach
• W 7point możesz regularnie otrzymywać
bieżące informacje o Twojej stronie
w skondensowanej formie wraz z
tendencjami.
Google Analytics
ułatwia analizę użyteczności i dostępności strony WWW
• Nakładka witryny – funkcjonalność umożliwia sprawdzenie jak często
użytkownicy strony wchodzili w konkretne hiperłącza
• Badanie celów – funkcja umożliwia wprowadzenie do systemu
konkretnych celów (np. dokonanie zakupu) i obserwowanie w jaki sposób
użytkownicy poruszają się po wyznaczonej ścieżce.
• Współczynnik odrzuceń – jest to dana prezentująca odsetek odwiedzin
tylko jednej podstrony przed opuszczeniem witryny.
• Źródła ruchu – Google Analytics prezentuje nie tylko spis źródeł
zewnętrznych, które generują ruch na naszej stronie,
• Funkcje przeglądarek
• Analiza treści
http://www.ittechnology.us/ebook-google-analytics/
http://www.web-tools.pl/
Lista narzędzi do oceny stron
1. Google Analytics
2. Browsershots.org
3. Raven
4. Web Site Optimization
5. CleanCSS
6. WAVE
7. Alexa
Do oceny 1/2
•
•
•
Browsershots.org – wygląd WWW w
różnych przeglądarkach np. IE, Android,
Firefox; 60 zrzutów; bada także jak
działają skrypty Java i Flash .
Raven – jak wypada moje WWW na tle
konkurencji; monitoring sieci; miesiąc
próbny za darmo; raventools.com .
Web Site Optimalization – czas
ładowania i reakcji WWW; standardy: 5-8
sek. ładowanie strony; reakcja na
działanie użytkownika 0,5 sek;
Raventools
http://analyze.websiteoptimizati
on.com/wso
Do oceny 2/2
•
•
W3C - standardy pisania i przesyłu
stron www;
W3C – aplikacja do kontrolowania
skryptu CSS i HTML . Bada tekst kodu
czy zgodny jest ze standardem. Działa
podobnie do narzędzia Raven.
Walidatory
• Skrypt lub aplikacja, która ma za zadanie
sprawdzenie kodu strony www, celem
odnalezienia błędów.
• Proces sprawdzenia poprawności składni
dokumentu html oraz zgodności kodu z
oficjalną specyfikacją języka html.
• Online i offline
Page Rank
http://prchecker.info/check_page_rank.php
• Ocena w skali 1 - 10
Narzędzia do oceny
www.usefulusability.com
Certyfikaty użyteczności i dostępności witryn
W3C
 W3C, walidator, każdy administrator strony może sprawdzić swoją
witrynę pod kątem zgodności ze standardami wypunktowanymi w
dokumencie.
 Projektowanie stron internetowych i aplikacji
 Architektura strony
 Sieć semantyczna (ang. Semantic Web)
 Technologia XML
 Usługa internetowa (ang. Web Services)
 Sieć urządzeń (ang. Web of Devices
 Przeglądarki i narzędzia autorskie
http://www.w3.org/standards/
Certyfikaty użyteczności i
dostępności witryn ISO-13407
• zbiór zasad przeznaczonych dla twórców stron
internetowych oraz systemów interaktywnych
• Dokument określa w jaki sposób stworzyć projekt
zorientowany na użytkownika – użyteczny, intuicyjny
i przyjazny.
 Analiza kontekstu
 Analiza wymagań
 Projektowanie
 Ewaluacja
http://www.web.gov.pl/g2/big/2010_03/b717027b2d85ff2ea0ae5dc2c8affa85.pdf
Certyfikaty użyteczności i
dostępności witryn, WCAG 2.0.
 Web Content Accessibility Guidelines (pol. Wytyczne dla
dostępności treści internetowych) w skrócie WCAG to spis
wskazówek dla projektantów stron WWW.
 Zasady dotyczące postrzegalności
 Zasady dotyczące operacyjności
• Zasady dotyczące zrozumiałości
• Zasada solidności
http://www.w3.org/WAI/intro/wcag20
http://usability.edu.pl/web-accessibility/wytyczne-wcag-2-0/
Rafinacja zasobów
sieciowych 2.0*
* Więcej - reklama
Cele rafinacji 2.0
• Pomiar efektywności marketingu;
• Aktywne zarządzanie w funkcji treści
informacji sieciowych;
• Efektywne relacje ze społecznościami;
• Ocena konkurencji;
• Identyfikacja nowych możliwości
marketingowych;
• Oszczędne badania rynkowe.
Narzędzia do diagnozy pozycji marki i analizy działań marketingowych
w mediach społecznościowych:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Amplify
Unruly Media (Video Tracking)
Buzz Metrics
Radian
BrandWatch
Seer
Wavemetrix
Onalytica
Visible Technologies
Attentio
TNS cymfony
Mill
Millward Brown
Scoutlabs
Attentio
Biz360
Brandimensions
BuzzLogic
Cision
CollectiveIntellect
CyberAlert
DNA13
Dow Jones
Integrasco
Kaava
Magpie
Radian
Vocus
Attentio
• Pozwala na dokonanie analizy ruchu
informacyjnego wokół osób, partii, marki i
produktów w social media i w innych
źródłach informacji online.
Radian6
Iść ponad co? do - dlaczego?
• Dashboard:
- analiza treści sieci w zakresie
informacji o markach, kampaniach i
konkurencji oraz tworzenie raportów.
• Engagement Console:
- narzędzia do interakcji z grupą
docelowa – komunikacja przez
socialmedia.
Alterian 1/2
• SM2 – podstawowe narzędzie
– Funkcje:
- Konsola,
- Tworzenie raportów,
- Prowadzenie bazy danych.
- Automatyczna analiza opinii – Sentiment
Analysis.
- Dopasowanie odpowiednich źródeł danych
na podstawie których jest przeprowadzana
analiza.
Alterian
2/2
Status strony
niektóre odpowiedzi serwera WWW
• 100 – Continue: komunikat o tym, że serwer pracuje
nad odpowiedzią i udzieli jej w ciągu krótkiego czasu;
• 200 – Success: potwierdzenie zrealizowania żądania internauty;
• 301 – Moved Permanently: strona znajduje się w innej lokalizacji;
jej adres został zmieniony;
• 302 – Moved Temporarily: strona jest chwilowo pod innym adresem;
• 304 – Not Modified: odpowiedź do przeglądarki informująca, że treść
strony nie uległa zmianie od daty podanej przez przeglądarkę;
• 401 – Unauthorized: strona wymaga autoryzacji, której nie ma
internauta;
• 403 – Forbidden: zazwyczaj błąd ten pojawia się w sytuacji, gdy
konieczne jest połączenie z serwerem przez protokół, a komputer
internauty nie może nawiązać takiego połączenia;
• 404 – Not Found: strona nie została odszukana;
• 500 – Internal Server Error: problem obsługi żądania przez serwer,
na którym jest umieszczona strona.
Urządzenia mobilne
Optymalizacja stron do urz.
mobilnych
OPTIMIZATION MOBILE Success Guide, StrongMail, 2013
Dostosowanie maili do
komórek
•
•
•
•
•
Pamiętać o odbiorcach mobilnych.
Ekran komórki jest znacznie węższy.
Znaki tekstu najwięcej 13 pikseli, 25.
Przyciski 29x44 px.
Pamiętać o specyfice IOS i Androida.
Responsive Web Design
Responsywność
• Sposób projektowania stron internetowych
z automatem
dopasowującym
ich prezentację
na różnej wielkości
urządzeniach.
• Są projektowane od końca –
najmniejszych urządzeń mobilnych.
3 sposoby dostosowania
• Responsive Web Design (RWD),
serwer zawsze wysyła taki sam kod HTML do wszystkich
urządzeń, a strona odpowiednio wyświetla się na
urządzeniu na podstawie arkusza stylów (CSS).
• dynamiczne serwowanie treści z
zastosowaniem nagłówków HTTP Vary,
URL wersji mobilnej i desktopowej pozostają takie same, natomiast
serwer wykrywa rodzaj urządzenia, z jakiego przychodzi żądanie i
zwraca odpowiednią wersję kodu HTML.
• utworzenie osobnych adresów URL dla
obu wersji strony i stworzenie powiązań za
pomocą odpowiednich znaczników meta w sekcji nagłówkowej kodu
HTML (rel="canonical" lub rel="alternate") pomiędzy stronami w
wersji mobilnej i tymi na komputery stacjonarne.
Ocena/test dostosowania strony
do mobilnych wg Google’a
• Bit.ly/pwm 1503.
• Wykrywane błędy:
• Obecność zawartości Flash - większość
smartfonów nie renderuje zawartości Flash,
• Brak definicji lub niepoprawna konfiguracja
znacznika meta viewport
• Mały rozmiar czcionki
• Elementy dotykowe zbyt blisko siebie przyciski i linki nawigacyjne nie
powinny znajdować się na tyle blisko siebie,
Luki w zabezpieczeniach
ma 86 procent stron WWW
• Można je wykorzystać do zaatakowania
witryny lub jej użytkowników.
• Najczęściej są to błędy typu content
spoofing, umożliwiające nieautoryzowane
modyfikowanie treści publikowanych
na stronie.
PCWorld VII.2013.
Przeglądarki
Historia przeglądarek
• Przed 1996
• IBM's Internet
Connection
• Symantec's
CyberJack
• Netscape Navigator
• Po 1996
• Lycos 1994
• Yahoo 1994
• Altavista 1995
•
•
•
•
•
•
Firefox
Opera
IE
Apple Safari
Google 1998
WolphramAlpha semantyczna
Przeglądarki
•
•
•
Przeglądarki – tak zwane browsery – są
programami, które umożliwiają wędrówkę
po Sieci.
Umożliwiają obsługę komputera podczas
wykonywania wszystkich operacji niezbędnych
do korzystania z zasobów Sieci.
Czynności związane z poprawnym
odczytaniem treści wybranej Strony wykonuje
przeglądarka. Informacje zapisane
w różnych formatach, z użyciem
różnych komponenetów.
•
Jest wzbogacana o tak zwane wtyczki –
programy uzupełniające funkcjonalność
przeglądarki.
Warstwy przeglądarki
• Interfejs, za pomocą którego
użytkownik wykonuje rozmaite polecenia,
• Wewnętrzny silnik wyświetlający/renderujący
zawartość strony na monitorze:
– Microsoft rozwija silnik Trident,
– Opera pracuje nad silnikiem Presto,
– Mozilla wykorzystuje tworzony przez społeczność silnik
Gecko (ang. 'gekon'),
– Chrome (podobnie jak Safari Apple'a)
korzysta z tworzonego przez społeczność
silnika Webkit,
– i kilkanaście innych.
PCWorld 12/2011
Silnik przeglądarki
• Podstawowy element przeglądarki internetowej.
• Odpowiada za interpretowanie kodu HTML oraz
renderowanie tego, co użytkownik widzi na
ekranie komputera.
• Ta sama strona wygląda odmiennie w różnych
przeglądarkach, ponieważ aplikacje te mają
różne silniki.
• Obecnie w tym sektorze liczą się trzy
rozwiązania – Gecko rozwijane przez Mozillę,
Trident Microsoftu oraz WebKit, wykorzystywane
m.in. w Chromie oraz Apple Safari.
PCWorld, VI/2013
Dostęp do zasobów i usług WWW
Przeglądarki zapewniają (powinny):
– odczyt zbiorów w wielu protokołach – FTP,
Telnet, NNTP, WAIS, gopher,
– odczyt różnych formatów danych: ASCII, GIF,
flash, java, cgi, postscript i inne,
– jeden zwarty interfejs użytkownika
dla wszystkich tych protokołów i formatów,
– bezpieczeństwo,
– użycie zasobów komputera.
NAJBARDZIEJ LUBIANE:
CHROME, IE, FIREFOX
CHIP.PL KWIECIEŃ 2014
Edge (wcześniej Spartan)
• Następca IE wbudowany do Win 10
Przeglądarki: wtyczki
do multimediów
• Ściąganie klipów, filmów, obrazów,
np. z YouTube;
• ME: www.pimpfish.com;
• VideoDownloader – wersja online dla:
Google Video, YouTube, MySpace oraz
iFilm;
• Wtyczki – większa podatność na ataki.
Browser hijack
• Porywanie przeglądarek – przejęcie
kontroli nad przeglądarką
• Efekt – modyfikacja wyświetlanych treści
Za: PCWorld XII.09
Benchmarki przeglądarek
• wydajność procesów kontrolowanych
przez JavaScript;
• wydajność HTML5;
• szybkość ładowania strony internetowej;
• użycie pamięci operacyjnej (najlepsi:
Mozilla Firefox, Opera zajęła drugie
miejsce, a na trzecim znalazł się Google
Chrom. Ostatnią pozycję w teście zajął
Internet Explorer 9).
sierpień 2012 , pcworld.pl
TEST - PRZEGLĄDARKI
INTERNETOWE
WWW.PCWORLD.PL CZERWIEC 2015
Luki w przeglądarkach
Chip IV.2011
Przeglądarki mobilne PL
CHIP.PL MAJ 2013
Popularność przeglądarek w
Polsce
PC WORLD lipiec 2015
Lokalizacja/informacje wg IP –
geolokalizacja
• Numerip.pl
• Whatsmyipaddress.com
Państwo
Region
Miasto
Liczba mieszkańców
Kod pocztowy
Wspórzędne geograficzne
Kod obszaru i kod DMA*
*tylko dla USA
PL ,POL, Poland
67 Warszawa
Warsaw
1651676
52.25 , 21
Anonimowość
Typ anonimowej aktywności
Procent badanych
Uczestniczenie w specjalistycznych grupach
57%
Media społecznościowe
55%
Udostępnianie własnych prac
45%
Filesharing i pobieranie plików
41%
Przeglądanie i szukanie informacji
41%
Wymiana rad i wsparcia
36%
Kupowanie i sprzedawanie
30%
Dyskusja bądź zaangażowanie w politykę
20%
Przeglądy i recenzje
9%
Ruogu K., Brown S., Kiesler S., Why Do People Seek Anonymity on the Internet? Informing Policy and Design. Human
Computer Interaction Institute Department of Psychology Carnegie Mellon University, 2013.
TRYB ANONIMOWY
• Wszystkie popularne przeglądarki dysponują
trybem prywatnym.
• W przeciwieństwie do nowych narzędzi
zapobiegających śledzeniu zapewnia on
ochronę tylko wtedy, gdy współdzielimy
komputer z inną osobą.
• W trybie tym przeglądarka nie zapisuje
wyszukiwanych słów, historii przeglądania ani
haseł. Tryb prywatny automatycznie usuwa też
cookie, co uniemożliwia serwisom śledzącym
przechowywanie ich na dysku.
CHIP.PL LIPIEC 2013
Anonimowe przeglądanie 1/3
• Wykorzystanie innych serwerów proxy:
– by zgubić ślad (test: dnsstuff.com),
– by dynamicznie zmieniać: MultiProxy,
– Oferty: www.freeproxy.ru, anonymizer.com,
safersurf.com, tor.eff.org.
• Wykorzystanie WLAN, najlepiej anonimowo
obok firmy, lub przez „zdrapkę” w hotspocie.
Anonymous Surfing 2/3
• Anonymous Surfing ukrywa adres IP –
wyklucza śledzenie stron, które są
oglądane.
• Przekierowanie ruchu przez serwer Zone.
• Serwery uzbrojone w 128 bitowy SSL.
• Torbark – przeglądarka na bazie Firefox’a.
Zapewnia anonimowość w systemie TOR
(torproject.org), sieć serwerów
ukrywających tożsamość w Sieci.
Anonimowe przeglądanie 3/3
• The Torpark 1.5.0.7 (oparte na Firefoksie); IE 8
beta2; Google Chrome; Stealther 1.0.6 (dodatek
do Firefox 3.0).
• Programy anonimizujące, np.: Java Anon Proxy
(JAP); The Onion Router (TOR).
• Do ukrywania tożsamości stosuje się kaskadę
mieszanych proxy składającą się z przynajmniej
trzech serwerów:
• www.bugmeont.com
• „Trasowanie cebulowe” – tor.eff.org/index.html.pl
• Przez serwery proxy - www.publicproxyservers.com
• JonDo Live-CD 0.9.39
WIRTUALNE SIECI PRYWATNE
• Pierwotnie stworzone jako bezpieczna
metoda dostępu do sieci korporacyjnych,
dziś usługi VPN często służą jako
narzędzia anonimizujące.
• Inaczej niż w przypadku sieci Tor
korzystanie z nich najczęściej jest płatne.
Wirtualne sieci prywatne VPN
• Strumień danych przesyłanych za
pośrednictwem usług VPN przepływa tylko
przez jeden serwer, a nie, jak w sieci Tor,
przez wiele komputerów - dzięki temu
usługi VPN mają teoretyczną przewagę
szybkości.
• Usługi VPN mają poważną wadę w
porównaniu z siecią Tor: ich operatorzy
mają dostęp do prawdziwych adresów IP
użytkowników
Proxy
• Jest to serwer (lub oprogramowanie) który
łączy pośredniczy w połączeniu z
zasobami sieci
• Można łączyć się przez serwer
pośredniczący za pomocą protokołu
HTTP, HTTPS.
• Serwer pośredniczący ma za zadanie przyśpieszyć
proces ładowania się stron www, poprzez trzymanie ich
w pamięci. Dzięki temu proces ładowania strony jest
przyśpieszony.
NSA - TOR
• NSA próbuje infiltrować sieć
anonimizacyjną Tor. Celem jest prawdziwa
tożsamość użytkowników.
• Wykorzystują do tego celu podły trik,
tak zwane Ouantum Cookies.
• Te ciasteczka przypominają pliki
stosowane przez strony
internetowe takie jak Hotmail, Google itp.
Chip.pl STYCZEŃ 2014
Przeglądarki offlinowe
• „ekonomiczne czytanie stron offline”
• Zasada ich działania polega na sprawnym pobieraniu
wskazanych zasobów sieciowych, zapisywaniu ich
na dysku, a następnie stwarzaniu możliwości ich
przeglądania lokalnie na dysku komputera, także
w czasie, gdy internauta nie ma podłączonego
komputera do Internetu.
• Podstawowe funkcje przeglądarek offline to:
automatyczna aktualizacja wcześniej pobranych stron,
możliwość ich edycji i kompresji, kontynuacja realizacji
przerwanych zadań oraz możliwość wyboru rodzaju
i maksymalnego rozmiaru ściąganego pliku, a także
obsługa HTTPS i FTP, szperacz wewnętrzny, możliwość
określania „głębokości ściągania” i parametryzowania
filtrów na „nie”,
Local Website Archive
- przeglądanie stron offline
• Local Website Archive Lite 12.2
• Zapisuje na dysk twardy kompletną stronę
WWW.
• Zapisywanie stron internetowych jest możliwe z
poziomu zwykłej przeglądarki, ale za pomocą
prezentowanej aplikacji - zdecydowanie bardziej
wydajne.
• Wszystkie pliki są zapisywane w jednym łatwo
dostępnym miejscu.
Pcworld X.2013
Test możliwości przeglądarki
czytania HTML5 [VI.2011]
http://html5test.com/results.html
Testy zgodności kodu z
przeglądarkami
http://pytlak.pr.radom.pl/html5/zgodnosc.html
http://browsershots.org/
Akceleratory i
teleportery
Akceleratory
• Inaczej menedżery pobierania.
• Początkowo umożliwiały kontynuowanie
pobierania po przerwaniu transmisji.
Następnie stworzono wielowątkową
technikę pobierania. Przyspieszenie nawet
o 100 razy, zależnie od liczby fragmentów
równocześnie ściąganych.
• Pasmo barierą nie do przebicia.
Akceleratory - przykłady
•
•
•
•
•
•
•
DownThemAll!
Download Accelerator Plus 7.4
NetAnts1.25
GetRight 5.2d
Mass Downloader 3.1
FlashGet 1.65
LeechGet 2007, Gigaget
9.0
8.8
8.7
8.7
8.4
Pobieranie standardowe
Gdy korzystamy tylko
z przeglądarki
Chip.04/03, PC Word 7/03
Pobieranie z segmentacją
Menedżer pobierania przejmuje
funkcję przeglądarki. Wielowątkowo
kopiuje zbiór w wielu częściach naraz
Programy GetRight najpierw uzyskują z serwera informacje o pobieranym
zbiorze, korzystając z wyspecjalizowanego serwisu – wyszukują kopie plików.
Następnie pobierają go w częściach – każdą z innej lokalizacji.
Chip.04/03
PC Word
7/03
Teleportery
• Funkcja ściągania na komputer internauty
wskazanych stron w całości lub w części.
• Dzięki odpowiednim narzędziom programowym,
możliwe jest pobranie wyróżnionych/wszystkich
zasobów z lokalizacji wskazanej przez
internautę.
• Skopiowane zasoby mają identyczną, jak
oryginał, strukturę i są dostępne na lokalnym
komputerze.
• Możliwe jest wybieranie pewnych tylko rodzajów
pobieranych multimediów, a nawet decydowanie
o „głębokości” kopiowania strony.
Teleporter - programy
• Dla początkujących: WinHTTrack,
Offline Commander, Offline Explorer
Pro, Advanced Site Crawler 2003.
• Dla średnio zaawansowanych:
BlackWidow, WebWhacker, WebZip,
WebCopier, WebStripper.
Ftp
• Najpowszechniejszą usługą w Sieci jest
komunikacja, która ma wiele form: począwszy
od najpopularniejszej – maila, do ftp (file transfer
protocol) – usługi mającej charakter
„produkcyjny”.
• Ftp służy do sprawnej transmisji plików – filmów,
tekstów i wszelkich innych zbiorów danych
tworzących zasoby Sieci.
Podstawowe zastosowania ftp:
• Dostęp anonimowy do zasobów (anonymous ftp). Wiele
serwerów (uczelnianych, dużych firm) umożliwia
odbieranie przez ftp zasobów, np. programy, bez
potrzeby jakiejkolwiek rejestracji.
• W Polsce przykładami serwerów ftp są:
– ftp.tpnet.pl,
– ftp.task.gda.pl,
– sunsite.icm.edu.pl.
• Dostęp z użyciem kont (wymagane jest posiadanie
odpowiednich uprawnień) – stosowany najczęściej w
połączeniu z kontami WWW dostawców internetowych.
Koniec

Strony

Transkrypt

Podobne dokumenty

psy koty fretki_materiały informacyjne

browsing - Fundacja Panoptykon