Usługi w Internecie wiosna 2016

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

Strona

WWW

Serwer

WWW

Przeglą-

darka Internauta

Twórca

Strony

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-kurs-

usability-cz-v/

http://www.uxbooth.com/articles/good-call-to-action-buttons

http://symetria.pl/blog/artykuly/10-przykazan-tworzenia-internetowych-formularzy-kurs-usability-cz-v/

















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.

http://topics.nytimes.com/top/news/business/companies/yahoo_inc/index.html?inline=nyt-org

http://topics.nytimes.com/top/news/business/companies/international_business_machines/index.html?inline=nyt-org

http://topics.nytimes.com/top/news/business/companies/microsoft_corporation/index.html?inline=nyt-org

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 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%

Komponenty używane przy konstrukcji Stron

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/css-

validator/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.

Personalizacja:

Dostępność: newslettera, RSS-a, formularza rejestracyjnego;

Możliwość zalogowania się.

Aktualność danych: Aktualność informacji na stronie; Aktualność linków.

Zrozumiałość przekazu: Poprawność pod kątem ortograficznym,

gramatycznym, stylistycznym; Niestosowanie niewytłumaczonych skrótów

i pojęć; Dostępność witryny w przynajmniej dwóch

językach.

Czytelność 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;

o Umiejscowione w dobrym miejscu - podtytuł

powinien otaczać swoją konstrukcją określoną

zawartość;

o Szybkie w lekturze;

o Zrozumiałe;

o Dobrze definiujące określony tekst.

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 wcześniejszym

tematycznym kliknięciem.

Obecność multimediów.

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

Rozkład

uwzględniania

zasad

składających się

na dane o firmie

[%]

0 20 40 60 80 100

Cel istnienia f irmy

Slogan reklamow y

Informacje teoretyczne o branży

Informacje o usługach/produktach

Przedstaw ienie prezesa firmy

Zdjęcie prezesa firmy

Przedstaw ienie dyrektorów najw ażniejszych

działów

Zdjęcia dyrektorów poszczególnych działów

Historia

Dane finansow e firmy

Problematyka socjalna f irmy

Sukcesy

Lista klientów


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 [%]

0 10 20 30 40 50 60 70 80 90 100

Drzewo strony

Obecność drzewa strony na każdej stronnicy

Połączenie ze stroną główną z dowolnego miejsca

stronnicy

Przycisk wstecz z dowolnego miejsca stronnicy

Możliwość szybkiego drukowania

Wewnętrzny szperacz

Obecność identyfikatora witryny lub logo na każdej

stronnicy

Jednolitość witryny pod względem treści, formy i

koloru

Wyraźne oznaczenie przycisków do kliknięcia


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/.

http://briansbuzz.com/contact/

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

68 dr Artur Bartoszewski - BADANIE FUNKCJONALNOŚCI SERWISÓW I APLIKACJI INTERNETOWYCH

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.


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.


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) .


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.

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

http://www.e-mentor.edu.pl/czasopismo/spis-tresci/numer/50




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


Funkcjonalność stron WWW z punktu widzenia projektanta

Błędy technologiczne:

niedziałające systemy nawigacji i prezentacji treści,

kod źle interpretowany przez niektóre przeglądarki

i platformy sprzętowe,

zbyt długi czas ładowania strony.


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).

Funkcjonalność stron WWW z punktu widzenia projektanta


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.


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).


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 nieujawnionych

bezpośrednio motywów zachowań,

• ułatwiają generowanie idei związanych z rozwojem witryny.

Otrzymane wyniki nie przekładają się wprost na wskazówki przydatne

przy tworzeniu serwisów internetowych.


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.


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.

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)

http://www.yourwebsitevaiue.com/

http://www.yourwebsitevaiue.com/

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.

Wystarczy wejść na:

www.teqpad.com

i wpisać adres strony

internetowej, której

statystyki nas interesują

Statystyki wskazanej strony

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.

Najpopularniejsze statystyki

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)

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

Służy do korzystania z Google Analitycs za darmo

http://marcinkaszynski.com/blog/index.php/2007/11/03/

el-monito-w-google-analytics/

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.

Dane gromadzone są dzięki skryptom zliczającym,

umieszczonym w kodzie stron podłączonych do badania.

Megapanel – badanie odwiedzalności stron polskich

użytkowników internetu robione na zlecenie PBI.

Metodologia – panele.

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.

http://www.pimpfish.com/

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 PL ,POL, Poland

Region 67 Warszawa

Miasto Warsaw

Liczba mieszkańców 1651676

Kod pocztowy

Wspórzędne geograficzne 52.25 , 21

Kod obszaru i kod DMA*

*tylko dla USA

http://pl.wikipedia.org/wiki/Warsaw

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.

http://www.freeproxy.ru/

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

http://www.bugmeont.com/

http://www.publicproxyservers.com/

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 9.0

• NetAnts1.25 8.8

• GetRight 5.2d 8.7

• Mass Downloader 3.1 8.7

• FlashGet 1.65 8.4

• LeechGet 2007, Gigaget

Chip.04/03, PC Word 7/03

Pobieranie standardowe Pobieranie z segmentacją

Gdy korzystamy tylko

z przeglądarki Menedżer pobierania przejmuje

funkcję przeglądarki. Wielowątkowo

kopiuje zbiór w wielu częściach naraz

Chip.04/03

PC Word

7/03

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.

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

Documents

Usługi w Internecie wiosna 2016