Vizualizace struktury webu

Mendelova univerzita v Brně Provozně ekonomická fakulta

Vizualizace struktury webu Diplomová práce

Vedoucí práce: Ing. Ondřej Popelka, Ph.D.

Bc. Pavel Morávek

Brno, 2012

Rád bych na tomto místě poděkoval vedoucímu mé diplomové práce Ing. Ondřeji Popelkovi, PhD. za jeho trpělivé a odborné vedení, rady a připomínky.

Prohlašuji, že jsem práci vypracoval samostatně s uvedením všech zdrojů v seznamu literatury.

V Brně, 18. 5. 2012

....................................................

4

Abstract Morávek, P. Web structure visualization. Diploma thesis. Brno, 2012 This diploma thesis deals with analysis of existing applications in field of web structure visualization. It tries to design and implement new solution for web environment on the basis of gained knowledge. This solution should be universally usable and expandable to meet the needs of specific analytical tasks.

Abstrakt Morávek, P. Vizualizace struktury webu. Diplomová práce. Brno, 2012 Tato diplomová práce se zabývá analýzou existujících aplikací pro vizualizaci struktury webu. Na základě poznatků získaných analýzou se pak snaží navhrnout a realizovat nové řešení pro webové prostředí, které bude klást na důraz univerzální použitelnost a rozšiřitelnost dle aktuálních potřeb analytických úloh.

5

OBSAH

Obsah 1 Úvod

8

2 Cíl práce

9

3 Současný stav 3.1 Validation Graph 3.2 Webtracer2 . . . 3.3 glTrail a glTail . 3.4 Anemone . . . . . 3.5 Logstalgia . . . . 3.6 Toky návštěvníků 3.7 Shrnutí . . . . . .

. . . . . v .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . nástroji Google . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Analytics . . . . . .

4 Návrh řešení 4.1 Požadavky na aplikaci . . . . . . . . . . . . . 4.2 Schéma celého systému . . . . . . . . . . . . . 4.3 Přístupová práva uživatelů . . . . . . . . . . . 4.4 Způsob uchovávání dat . . . . . . . . . . . . . 4.4.1 Sitemaps . . . . . . . . . . . . . . . . . 4.4.2 Vlastní řešení . . . . . . . . . . . . . . 4.4.3 Struktura databáze . . . . . . . . . . . 4.4.4 Význam sloupců tabulek . . . . . . . . 4.5 Pavouk . . . . . . . . . . . . . . . . . . . . . . 4.5.1 GNU Wget . . . . . . . . . . . . . . . 4.5.2 HTTrack . . . . . . . . . . . . . . . . . 4.5.3 OpenWebSpider . . . . . . . . . . . . . 4.5.4 PHPCrawl . . . . . . . . . . . . . . . . 4.5.5 Vlastní řešení . . . . . . . . . . . . . . 4.6 Vizualizér . . . . . . . . . . . . . . . . . . . . 4.6.1 Uspořádání uzlů grafu . . . . . . . . . 4.6.2 Technologie vykreslování . . . . . . . . 4.6.3 Adobe Flash . . . . . . . . . . . . . . . 4.6.4 HTML5 Canvas . . . . . . . . . . . . . 4.6.5 SVG . . . . . . . . . . . . . . . . . . . 4.6.6 Grafická knihovna pracující se zvolenou 5 Řešení 5.1 Použité technologie 5.1.1 PHP . . . . 5.1.2 MySQL . . 5.1.3 JavaScript . 5.1.4 SVG . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

10 12 13 14 16 17 18 18

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . technologií

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . .

19 19 20 20 20 20 21 22 23 24 24 25 25 25 26 26 26 27 27 27 28 28

. . . . .

29 29 29 29 29 29

. . . . . . .

. . . . .

. . . . . . .

. . . . .

. . . . . . .

. . . . .

. . . . . . .

. . . . .

. . . . . . .

. . . . .

. . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

6

OBSAH

5.2

5.3 5.4 5.5

5.6

5.7

5.1.5 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.6 CSS3 selektory . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.7 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.8 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Použité knihovny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2.1 Dibi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2.2 phpQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2.3 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.2.4 Rapha¨el . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pravidla psaní zdrojového kódu . . . . . . . . . . . . . . . . . . . . . Adresářová struktura . . . . . . . . . . . . . . . . . . . . . . . . . . . Implementace prohledávacího pavouka . . . . . . . . . . . . . . . . . 5.5.1 Způsob spuštění a předání parametrů . . . . . . . . . . . . . . 5.5.2 Procházení struktury webu a získávání požadovaných souborů 5.5.3 Parsování stránky a získávání odkazů . . . . . . . . . . . . . . 5.5.4 Struktura ukládaných dat . . . . . . . . . . . . . . . . . . . . 5.5.5 Přístup do databáze . . . . . . . . . . . . . . . . . . . . . . . 5.5.6 Technická omezení . . . . . . . . . . . . . . . . . . . . . . . . Implementace nástrojů pro sběr provázatelných dat . . . . . . . . . . 5.6.1 Helper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.6.2 Příklad 1: Validita stránek . . . . . . . . . . . . . . . . . . . . 5.6.3 Příklad 2: Tok návštěvnosti . . . . . . . . . . . . . . . . . . . Implementace vizualizéru . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.1 Backend . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.7.2 Frontend: Uživatelské prostředí . . . . . . . . . . . . . . . . . 5.7.3 Frontend: Základní členění z hlediska JavaScript kódu . . . . . 5.7.4 Frontend: Vizualizace . . . . . . . . . . . . . . . . . . . . . . . 5.7.5 Frontend: Zobrazení provázaných dat . . . . . . . . . . . . . . 5.7.6 Frontend: Export dat . . . . . . . . . . . . . . . . . . . . . . .

30 31 31 31 33 33 33 33 33 34 34 35 35 37 37 38 38 39 40 40 40 40 42 42 43 44 44 46 47

6 Závěr 49 6.1 Zhodnocení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 6.2 Možnosti dalšího rozvoje . . . . . . . . . . . . . . . . . . . . . . . . . 49 7 Literatura

50

Přílohy

52

A Seznam API metod backendu vizualizéru

53

B Obsah přiloženého DVD

54

SEZNAM OBRÁZKŮ

7

Seznam obrázků Obr. 1: Výřez z mapy stránek webu Senátu Parlamentu České republiky. http://www.senat.cz/mapa_stranek.php 10 Obr. 2: Graficky atraktivně ztvárněná mapa stránek internetové agentury. http://www.symbio.cz/mapa-stranek.html 11 Obr. 3: Utilita Validation Graph zobrazuje strom webu s barevně zvýrazněným typu souboru a validity zdrojového kódu. 12 Obr. 4: Webtracer2. Vizualizér využívá rozhraní OpenGL k vykreslení trojrozměrné mapy webových stránek. 13 Obr. 5: glTrail. Aplikace animovaně vizualizuje přechod návštěvníků mezi jednotlivými stránkami v reálném čase. 14 Obr. 6: glTail. Animovaná vizualizace nových událostí v reálném čase vyčtených v logu. 15 Obr. 7: Anemone. Vizualizace struktury webu a toku návštěvnosti s využitím organického informačního designu. 16 Obr. 8: Logstalgia. Animovaná vizalizace událostí webového serveru evokující počítačovou hru. 17 Obr. 9: Vizualizace toku návštěvnosti v Google Analytics ilustrující přechod mezi stránkami podle zadané vstupní veličiny. 18 Obr. 10: Schéma systému.

20

Obr. 11: ER diagram.

22

Obr. 12: Prostředí aplikace.

43

Obr. 13: Třídy javascriptového frontendu.

44

Obr. 14: Příklad vizualizace.

46

Obr. 15: Zobrazení provázaných dat – Validita stránky.

46

1

1

ÚVOD

8

Úvod

V oblastech správy webových stránek, analýzy chování jejich návštěvníků, internetového marketingu a v dalších příbuzných oborech může hrát velkou roli i vhodná prezentace dostupných relevantních dat. Pro člověka přirozenou a přívětivou formou je bez pochyby využití grafického zobrazení. Vhodná vizualizace pomáhá postihnout a zvýraznit významné jevy a případně zpřístupňuje vstřebání informací i lidem bez znalosti daného oboru. Jednou ze základních popsatelných charakteristik webových stránek je jejich členění, či struktura. Vhodné grafické zobrazení může být člověku nápomocné nejen ve snadné orientaci v dané struktuře, ale umožní i připojení dalších významných informací. Z čistě fyzického hlediska lze soubor webových stránek (nejčastěji označovaný anglickým slovem website) často popsat jako stromovou strukturu, neboť bývá obvykle tvořena běžnými počítačovými soubory. V rámci dokumentů je pak často možné vysledovat vzájemnou podřízenost jednotlivých sekcí opisující právě tuto stromovou strukturu danou soubory a jejich umístěním v jednotlivých adresářích. Mnoho webů disponuje tzv. mapou stránek, která právě stromové zobrazení využívá. Vzhledem k tomu, že web je ale postaven na technologii hypertextu, není takováto reprezentace ve většině případů dostačující, protože propojení stránek je v praxi mnohem komplikovanější a strom o tom nepodává úplnou informaci.

2

2

CíL PRÁCE

9

Cíl práce

Cílem práce je vytvořit nástroj pro usnadnění analytických úloh nad webovými stránkami. Základní vlastností aplikace bude automatizované procházení webu a následná vizuální reprezentace jeho struktury ve vhodné podobě minimalizující ztrátu podstatných informací. Nástroj bude navržen s důrazem na možnost provázání nalezených strukturálních informací s různými typy relevantních dat, jakými jsou například tok návštěvnosti, datová náročnost, klíčová slova apod. Před vlastní implementací je třeba vyhledat existující aplikace pro analýzu struktury webu. Dále je nutné zjistit používané a standardizované formáty, jejichž implementací by bylo možné s těmito nástroji zajistit interoperabilitu. V rámci samotné implementace pak bude na místě zvážit použití některých dostupných řešení zabývajících se řešením dílčích problémů vztahujících se k automatizovanému procházení webových stránek, zpracování jejich obsahu i následné vizuální reprezentaci. Nástroj vizualizující výsledná data bude mít podobu webové aplikace. Pro ukládání dat bude využívat některý z volně dostupných relačních databázových systémů. Aplikace bude umožňovat export do standardizovaných formátů pro výměnu informací převážně na bázi XML (např. Sitemaps). Prezentační vrstva bude využívat některý z dostupných systémů pro vizualizaci dat na webu (např. SVG, Adobe Flash).

3

3

SOUČASNÝ STAV

10

Současný stav

Tato kapitola poskytuje výčet existujících řešení zabývajících se vizualizací webové struktury. V současnosti lze dohledat množství převážně drobných utilit. Mnohdy ale ambice těchto nástrojů nepřesahují záměr prezentovat uživateli grafický výstup pouze jako jakousi zajímavost bez hlubší užitné hodnoty. Ještě před uvedením výčtu je ale vhodné zmínit pravděpodobně nejčastěji užívanou formu popisu struktury webu, která byla nastíněna již v úvodu této práce. Jedná se o mapu stránek, která má uživatelům usnadnit nalezení požadovaných informací. Bývá členěna do stromové struktury a obvykle s sebou nenese žádné další provázané informace. Slouží čistě k zobrazení umístění jednotlivých dokumentů.

Obr. 1: Výřez z mapy stránek webu Senátu Parlamentu České republiky. http://www. senat.cz/mapa_stranek.php

3

SOUČASNÝ STAV

11

Obr. 2: Graficky atraktivně ztvárněná mapa stránek internetové agentury. http://www. symbio.cz/mapa-stranek.html

3.1

3.1

Validation Graph

12

Validation Graph

Jedná se o utilitu [1] napsanou v programovacím jazyce Java, která prochází strukturu webových stránek a zdrojový kód jednotlivých stránek podrobuje testu na validitu. Stránky znázorňuje pomocí vzájemně propojených koleček, přičemž barva jejich výplně slouží k rozlišení typu souboru (HTML, PHP, ASP, ZIP apod.) a barva ohraničení potom určuje validitu dané stránky. Aplikace slouží zjevně pouze k demonstrativním účelům, obsahuje jen malé množství volitelných parametrů, zato je ale dostupná i se zdrojovými kódy. Výstupem rovněž není multigraf, ale stromová struktura. Aplikace zanedbává vícenásobné vazby mezi stránkami.

Obr. 3: Utilita Validation Graph zobrazuje strom webu s barevně zvýrazněným typu souboru a validity zdrojového kódu.

3.2

3.2

Webtracer2

13

Webtracer2

Aplikace [2] sestává ze dvou samostatných celků: webového pavouka procházejícího zadaný web a z vizualizéru prezentujícího získaná data. Pavouk nepřijímá žádné parametry kromě vstupní adresy URL. Počet procházených stránek je rovněž pevně limitován na hodnotu 1000. Po dosažení tohoto počtu pavouk ukončí svoji činnost. Strukturální informace o jednotlivých webech ukládá do vlastního datového souboru. Vizualizér je poté schopný tato data zobrazit v trojrozměrné podobě. Pro tyto účely využívá rozhraní OpenGL.

Obr. 4: Webtracer2. Vizualizér využívá rozhraní OpenGL k vykreslení trojrozměrné mapy webových stránek.

3.3

3.3

glTrail a glTail

14

glTrail a glTail

Jde o dvojici aplikací vizualizující data vyčtená ze souborů záznamů činnosti aplikací (logů) v reálném čase s využitím technologie OpenGL. Aplikace zaznamenávají informace o jednotlivých událostech obvykle formou jednotně formátovaného záznamu. glTrail a glTail je podle definovaných pravidel zpracovávají. Zatímco glTail [3] se zaměřuje na logy obecných aplikací a vizualizuje jednotlivé zaznamenané diskrétní děje, glTrail [4] se zaměřuje na logy webových serverů obsahující informace o přístupech návštěvníků k jednotlivým souborům a často rovněž informaci o odkazující stránce (tzv. referer). Díky tomu lze částečně rekonstruovat přibližnou strukturu webu a prezentovat ji ve vizuální podobě. Aplikace tak může zobrazovat animovanou vizualizaci toků návštěvníků mezi jednolivými stránkami v reálném čase.

Obr. 5: glTrail. Aplikace animovaně vizualizuje přechod návštěvníků mezi jednotlivými stránkami v reálném čase.

3.3

glTrail a glTail

15

Obr. 6: glTail. Animovaná vizualizace nových událostí v reálném čase vyčtených v logu.

3.4

3.4

Anemone

16

Anemone

Jedná se o demonstrační aplikaci ukazující využití organického informačního designu, kterou vytvořil Benjamin Fry, jeden ze spoluautorů programovacího jazyku Processing zaměřeného právě na vizualizaci dat, a blíže o ní pojednává ve své diplomové práci Organic Information Design [5] a v knize Visualizing Data [6]. Aplikace analyzuje logy webového serveru Apache a na základě nich generuje graf znázorňující strukturu webu, přičemž velikost uzlu (stránky) je závislá na návštěvnosti odpovídající stránky. Proměnlivá tloušťka hrany pak znázorňuje množství návštěvníků, které mezi jednotlivými stránkami přecházelo.

Obr. 7: Anemone. Vizualizace struktury webu a toku návštěvnosti s využitím organického informačního designu.

3.5

3.5

Logstalgia

17

Logstalgia

Logstalgia [7], podobně jako glTail, vizualizuje přístupy na webový server zpracováváním logových souborů. Zameřuje se přitom konkrétně na webový server Apache. Přestože vlastně strukturu webu zanedbává, je vhodné ji v tomto výčtu rovněž zmínit, protože ukazuje další zajímavý přístup k vizualizaci jevů. Aplikace logy zpracovává zpětně, nezaměřuje se tedy na vizualizaci v reálném čase. K vykreslování rovněž používá technologii OpenGL. Na levé straně obrazovky se v závislosti na aktuálně zvoleném časovém měřítku objevují síťové adresy klientů požadujících po webserveru jednotlivé soubory. Směrem od těchto adres je vyslána kulička směrem k pravé straně obrazovky, kde je odražena „pálkouÿ. V tomto okamžiku se v blízkosti odrazu objevuje HTTP kód značící výsledek požadavku (200 OK, 404 NOT FOUND, apod.) a úplně vpravo se zobrazuje název žádaného souboru. Vizualizace se vlastně snaží evokovat klasickou počítačovou hru obvykle nazývanou Paddle War, to umocňuje i inkrementující se „skoreÿ s každým obslouženým požadavkem. Přestože aplikace na první pohled působí jako hříčka, ve skutečnosti může poskytnout kvalitní přehled o událostech na webovém serveru. Navíc lze její chování velmi jemně doladit celou řadou parametrů ovlivňujících jak vizuální stránku, tak rozsah zobrazovaných dat, časové měřítko apod.

Obr. 8: Logstalgia. Animovaná vizalizace událostí webového serveru evokující počítačovou hru.

3.6

3.6

Toky návštěvníků v nástroji Google Analytics

18

Toky návštěvníků v nástroji Google Analytics

Google Analytics je oblíbeným nástrojem pro sledování a analýzu návštěvnosti webových stránek. Webovým administrátorům dává k dispozici kód v jazyce JavaScript, který po vložení na webovou stránku analyzuje a odesílá informace o chování návštěvníků. Služba disponuje celou řadou funkcí, z nichž jednou je i vizualizace toku návštěvníků. Tok návštěvníků je zobrazen ve formě dvojrozměrného grafu, kde na počátku vodorovné osy lze nastavit sledovanou vstupní veličinu (klíčová slova, lokalita návštěvníka, verze operačního systému apod.) a dále na této ose lze sledovat přesun návštěvníků mezi stránkami po jednotlivých iteracích. Tímto nástrojem se do hloubky zabývá například série článků dostupná na [8].

Obr. 9: Vizualizace toku návštěvnosti v Google Analytics ilustrující přechod mezi stránkami podle zadané vstupní veličiny.

3.7

Shrnutí

Z výčtu existujících řešení lze vyčíst několik skutečností. Jedná se převážně o klasické desktopové aplikace, jejich výstup je jednoúčelový a obvykle dále nezpracovatelný. Uvedená řešení mnohdy navíc neoddělují proces získávání dat a jejich vizualizace do samostatných celků. Vyjímku tvoří jen Google Analytics, který je jako jediný už ze své podstaty seriózním nástrojem na analýzu dat o návštěvnosti webových stránek. Vizualizaci toku přitom používá jako jeden z pohledů na dostupná data. Nebere ale přitom v úvahu celou strukturu webu, nýbrž vždy jen určitou podmnožinu uzlů. Nástroje glTrail a glTail se zase mohou dobře uplatnit v oblasti monitoringu provozu webových serverů v reálném čase a mohou poskytnout dobrý přehled o některých právě probíhajících jevech, neumožňují ale návázání a zobrazení žádných dalších relevantních dat.

4

NÁVRH ŘEŠENí

4

19

Návrh řešení

Nově vzniklé řešení by mělo splňovat požadavky, které pokrývají nedostatky aplikací zmíněných v kapitole Současný stav. Požadavky shrnuje následující sekce.

4.1

Požadavky na aplikaci

Aplikace bude splňovat následující požadavky: • Oddělený pavouk (spider) získávající strukturální informace o zadaném webu v podobě snímků tak, aby bylo možné o jednotlivých webech informace ukládat opakovaně v libovolných časových odstupech či s odlišnými parametry. Data generovaná pavoukem musí být dále zpracovatelná jinými aplikacemi, tou základní je samozřejmě vizualizér. • Možnost provázat strukturální informace s jinými daty. Toho bude docíleno pomocí malých nástrojů, které jsou schopny zpracovat data z relevantních zdrojů a navázat je buď na jednotlivé stránky (uzly grafu), nebo na odkazy na stránkách umístěné (hrany). • Vizualizér běžící ve webovém prostředí. • Možnost exportu dat do dále zpracovatelného obecného formátu (XML, JSON).

4.2

Schéma celého systému

4.2

20

Schéma celého systému

Rozdělení komponent celého systému ilustruje následující diagram:

Obr. 10: Schéma systému.

4.3

Přístupová práva uživatelů

Aplikace nebude řešit provoz ve víceuživatelském prostředí. Nicméně jejich souběžná práce je teoreticky možná. Díky systému snímků nebude docházet ke kolizím například při spuštění více procházecích pavouků současně. Případnou autorizaci uživatelů je možné řešit externě.

4.4

Způsob uchovávání dat

Před samotnou implentací jednotlivých komponent je třeba zvolit formát pro uchovávání dat a jeho úložiště. V současnosti patrně neexistuje žádný doporučený a obecně používáný datový formát pro uchování struktury webových stránek. 4.4.1

Sitemaps

Pro účely instruování indexovacích robotů internetových vyhledávačů byl zaveden protokol Sitemap založený na XML. Ten dává robotům k dispozici vodítka ke zvolení vhodného způsobu indexace poskytnutím informací o o periodicitě aktualizací

4.4

Způsob uchovávání dat

21

obsahu, informace o času poslední změny apod. Existuje řada online i desktopových nástrojů pro generování Sitemap. Níže je uveden příklad základní podoby sitemapy převzatý ze specifikace protokolu [9]: 1 2 3 4 5 6 7 8 9

< urlset xmlns = " http: // www . sitemaps . org / schemas / sitemap /0.9 " > < url > < loc > http: // www . example . com / < lastmod > 2005 -01 -01 < changefreq > monthly < priority > 0.8

Specifikace protokolu ale nijak nehovoří o vazbách mezi jednotlivými stránkami, ty ostatně roboti pro potřeby vlastní indexace dohledávají sami. Z toho vyplývá, že Sitemap není pro uchovávání strukturálních dat o webu vhodný. Implementovaná aplikace bude schopna soubory Sitemap pouze generovat v rámci exportu dat. 4.4.2

Vlastní řešení

Při implementaci bude tedy přistoupeno k vlastnímu řešení využívajícímu databáze. Před volbou řešení pavouka i vizualizéru je třeba upřesnit, jaké informace je nezbytné uchovávat. Jak již bylo zmíněno výše, pouhý plochý seznam url je pro účely vizualizace nedostatečný. V rámci popisu struktury lze identifikovat dva významné objekty: stránky (tabulka pages) a odkazy na těchto stránkách (tabulka links). Odkazy propojují jednotlivé stránky mezi sebou. Soubor souvisejících stránek a odkazů náležící jednomu webu (a tedy popisující jeho strukturu) bude nazýván mapou (tabulka maps). Mapu pro stejný web lze vytvořit opakovaně buď proto, aby reflektovala změny v čase, anebo proto, že její vytvoření bude ovlivněno odlišnými parametry procházení, tyto opakovaně prováděné záznamy budou nazývány snímky (snapshoty). K jednotlivým objektům (ať už ke stránkám, nebo k odkazům) bude možné navázat další data. Tato data budou sbírat od pavouka oddělené nástroje schopné pracovat s již vytvořeným popisem struktury uloženým v databázi. Tyto nástroje budou k těmto účelům využívat tabulek tied-data a data. První jmenovaná tabulka popisuje vlastnosti svázaných dat (textový popis, zda se data vážou ke stránkám či k odkazům, popis způsobu vizualizace). Druhá tabulka potom obsahuje vlastní data přidružená ke konkrétnímu záznamu v tabulce stránek či odkazů.

4.4

Způsob uchovávání dat

4.4.3

Struktura databáze

Celá navrhovaná struktura databáze je popsána ER diagramem na obrázku 11.

Obr. 11: ER diagram.

22

4.4

Způsob uchovávání dat

4.4.4

23

Význam sloupců tabulek

Všechny tabulky jsou uvozeny sloupcem id, což je interně používaný, automaticky se inkrementující, identifikátor, který je zároveň primárním klíčem. Tabulka maps text-id

Textový identifikátor (obvykle název webu). Pod tímto identifikátorem se budou sdružovat jednotlivé snímky.

base-url

Výchozí URL, na kterém začalo prohledávání.

timestamp

Čas uložení snímku.

parameters

Parametry procházení. Mohou být variabilní. Uloženy serializovaně ve formátu JSON.

Tabulka pages map

Mapa, do které stránka náleží (cizí klíč).

hash

MD5 Hash1 URL stránky. Hashe jsou interně užívány u jednotlivých stránek či odkazů pro jejich snadnou a jednoznačnou identifikaci.

url

Absolutní URL stránky.

mime

MIME2 typ stránky.

Tabulka links page

Stránka, do které odkaz náleží (cizí klíč).

hash

MD5 Hash absolutního URL cíle odkazu stránky.

element-type

CSS3 selektor definující typ elementu.

title

Titulek nebo text odkazu.

target

Absolutní URL cílové stránky.

original-target

Původní podoba URL cílové stránky. Může se jednat například o relativní adresu, či o adresu nezbavenou parametrů a kotev.

Tabulka tied-data text-id 1

Textový identifikátor typu dat.

Hash je tzv. otisk dat. Tj. data transformovaná pomocí matematické funkce na relativně malé číslo. 2 Multipurpose Internet Mail Extensions

4.5

24

Pavouk

type

Typ objektu, na který se data vážou (stránka nebo odkaz).

title

Pro člověka přívětivý název svázaných dat.

description

Textový popis svázaných dat.

parameters

Detailní parametry svázaných dat. Data ve formátu JSON. Obsahují popisná data nezbytná pro další zpracování vizualizérem. Budou popsána níže v textu v rámci popisu implementace.

Tabulka data type

Typ svázaných dat (cizí klíč).

element

Element, ke kterému se data vztahují (cizí klíč).

data

Samotná svázaná data ve formátu JSON.

4.5

Pavouk

Procházecí pavouk se bude starat o získávání a ukládání strukturálních informací. To znamená, že musí být schopen po zadání URL výchozí stránky tuto stránku projít a získat z ní odkazy vedoucí na stránky jiné. Co je považováno za základní odkazy HTML dokumentu popisuje dokument konsorcia W3 [10], v tomto případě pro HTML ve verzi 4.01. Z tohoto dokumentu vyplývá, že pavouk by měl být schopen zpracovávat elementy typu a různé varianty elementu , dále by měl brát v úvahu základní cestu pro odkazy s relativní adresou stanovenou elementem . Možných elementů propojujících jednotlivé stránky může být teoreticky víc a pokud by bylo ve specifických případech potřeba je zahrnout, pavouk by měl být schopen je zahrnout. Pro účely procházení struktury webu je tedy možné vyvinout vlastní řešení anebo se nalézt nějaké vhodné stávající. Výhodou existujících řešení je pochopitelně uspořený čas na vývoji. Nevýhodou potom např. možná absence některých důležitých vlastností. Níže jsou uvedena některá dostupná řešení: 4.5.1

GNU Wget

GNU Wget [11] je konzolový nástroj pro získávání souborů prostřednictvím protokolů HTTP, HTTPS a FTP. Jedním z režimů jeho činnosti, aktivovaným základním paramtrem --spider, je procházení a stahování jednotlivých souborů ve webové struktuře. Další parametry mohou ovlivnit základní URL, hloubku rekurze, akceptované či zamítnuté domény apod. S využitím parametru --save-headers ukládání HTTP hlaviček, podporuje i cookies. S využitím rourování v rámci OS by bylo možné získané soubory předat i k dalšímu zpracování, avšak celkově toto řešení má několik nedostatků:

4.5

Pavouk

25

• Nejedná se o knihovnu, ale o samostatnou aplikaci. Její začlenění do zamýšleného projektu postaveného na webových technologiích sice není nemožné, ale je problematičtější než v případě použití nativního řešení. • Získaná data by bylo třeba stejně dále zpracovávat, neboť Wget neposkytne informace o provázanosti jednotlivých stránek. • V rekurzivním režimu není nástroj schopen vypsat obsah jednotlivých souborů na standardní výstup, což znesnadňuje následné zpracovávání výstupu. Wget by byl tedy v důsledku nápomocen pouze v roli stahovače webové struktury do lokálního úložiště. Tuto strukturu by bylo pak nutné opětovně projít nějakým dalším nástrojem. 4.5.2

HTTrack

Je nástroj [12] přímo určený pro rekurzivní procházení webových stránek a vytváření jejich offline kopií či zrcadel. Proto v této oblasti disponuje mnoha rozšířenými možnostmi. Nicméně z charakteru jeho účelu vyplývají v podstatě stejné nedostatky jako v případě nástroje Wget. Nástroj neumožňuje pohodlné přesměrování na standardní výstup a nedává k dispozici některá nezbytná metadata. 4.5.3

OpenWebSpider

Je svým charakterem od dvou předešlých velmi odlišný. Jedná se o plnohodnotného indexovacího a vyhledávacího robota. Získané stránky sám indexuje a informace ve vlastním formátu ukládá do MySQL databáze. Robot je napsán pro prostředí .NET, takže jeho nasazení by se v mnoha případech neobešlo bez dalších komplikací (nutnost přítomnosti .NET frameworku či jeho multiplatformní alternativy Mono). Teoreticky by bylo možné robota použít a pro požadované účely upravit. Celkově by se ale jednalo řešení složitější, než by bylo vytvoření vlastního pavouka v prostředí homogenním se zbytkem implementovaného systému. 4.5.4

PHPCrawl

PHPCrawl [13] je knihovna napsaná v jazyce PHP a je přímo určena pro procházení struktury webu a získávání jednotlivých stránek za účelem dalšího zpracování. Umožňuje limitovat procházení filtry URL či Content-Type, podporuje cookies a autentizaci. Ve své poslední verzi navíc podporuje víceprocesové procházení. Toto řešení umožňuje implementovat pavouka, který stránky zpracovává podle vlastní implementovavné logiky. Knihovna však trpí několika zásadními nedostatky: • Robot při hledání odkazovaných URL uvnitř stránek nerozlišuje jednotlivé elementy. Metoda pojmenovaná zavádějícím názvem setLinkExtractionTags() ve skutečnosti neslouží k definici elementů, ale atributů, ze kterých mají být

4.6

Vizualizér

26

URL získávány. Typ elementu tak nelze získat jiným způsobem, než opětovným parsováním celého kódu odkazu. Rozlišení typu elementu samozřejmě hraje důležitou roli v určení jeho sémantického významu. • Jednotlivá URL lze filtrovat pouze jako celek. Nelze rozlišovat samostatné fragmenty (protokol, soubor, dotaz) adresy URL. To vede k nutnosti vytvářet komplikované sady pravidel pokrývající všechny požadavky na přijímané soubory (například při nutnosti rozlišit schémata či přípony). PHP přitom disponuje pohodlnými nástroji pro parsování adres URL (parse_url()). • Při své činnosti za všech okolností zanedbává kotvy3 . 4.5.5

Vlastní řešení

Z uvedeného vyplývá, že nejvhodnější bude přistoupit k vlastnímu řešení. Tato varianta přináší několik výhod: řešení bude šité na míru, může být minimimalistické a přitom nebude trpět nedostatky, v případě potřeby bude snadno rozšiřitelné, bude respektovat platformu využívanou ostatními komponentami projektu a především zamezí redundantním krokům a případným nevyhnutelným řešením komplikací nestandardními cestami. Vlastní implementace pavouka bude tedy popsána níže v rámci kapitoly Řešení.

4.6

Vizualizér

Vizualizér je druhou neméně významnou komponentou implentovaného systému. Již základním požadavkem bylo stanoveno, že vizualizér bude realizován formou webové aplikace. Jeho uživatelské rohraní umožní volit mezi daty uloženými pavoukem a nástroji pro sběr svázaných dat a poté spustit jejich následnou vizualizaci. Nejpřirozenějším způsobem vizualizace struktury tvořené webovými stránkami a hypertextovými odkazy v nich obsažených je orientovaný multigraf. Jednotlivé webové stránky budou tvořeny uzly grafu. Odkazy mezi stránkami pak tvoří orientované hrany. 4.6.1

Uspořádání uzlů grafu

Před vlastním vykreslením grafu je třeba vhodně zvolit i jeho samotnou podobu, tedy především uspořádání uzlů grafu. Jak je možné vysledovat z kapitoly zabývající se současným stavem, existující aplikace volí převážně dva způsoby. Buď zanedbávají násobnost spojení jednotlivých uzlů a zobrazují tak prostý strom (pro navrhované řešení je to nepřijatelná varianta), nebo těží z možností animací a zobrazení v trojrozměrném prostoru. Tyto varianty 3

Kotva je definované místo na stránce, obvykle značící konkrétní její oddíl. V URL je její název uveden za znakem #. Řada moderních webů ale tento řetězec využívá rovněž pro přenos stavů JS aplikace.

4.6

27

Vizualizér

nejsou pro zamýšlený projekt rovněž příliš vhodné, neboť přinášejí přílišnou závislost na použitém médiu či platformě. Vzhledem k tomu, že projekt počítá s maximální možnou univerzálností použití a data svázaná k webové struktuře mohou různý charakter, je třeba zajistit za všech okolností možnost přehledného pohledu na celou strukturu bez překrývajících se uzlů. Po úvaze jsem dospěl k rohodnutí použít pro výchozí vyobrazení grafu uspořádání uzlů grafu do tvaru kružnice. Toto uspořádání přináší jisté výhody: uzly mají své jasně stanovené místo, hrany mohou elegantně a viditelně procházet středem kružnice a zřetelně propojovat jednotlivé dvojice uzlů. Uzly jsou si de facto rovnocenné, což je pro vizalizaci velkého množství různých jevů patrně nejvhodnějším kompromisním řešením. Současně je toto řešení nenáročné na implementaci, neboť určení polohy uzlů za účelem jejich vykreslení vystačí s dvojící jednoduchých vzorců: x = r ∗ cos(i), y = r ∗ sin(i) kde i je číslo zvyšované o krok daný vzorcem (2 ∗ π)/pocet uzlu. 4.6.2

Technologie vykreslování

Dvojrozměrná počítačová grafika se dělí na dva základní typy – na rastrovou a na vektorovou. V oblasti webových technologií existuje mnoho řešení zabývajících se grafickým výstupem. Budou uvedeny tři nejvhodnější kandidáti, o dvou z nich (HTML5 Canvas a SVG), o rozdílech mezi nimi a o kladech a záporech jejich nasazení blíže pojednává i článek Mihaie Sucana [14]. 4.6.3

Adobe Flash

Jde o velmi robustní platformu pro tvorbu webových aplikací. Její prezentační část je nativně založena na vektorové grafice. Negativem této technologie je však její částečná uzavřenost a především fakt, že se jedná o technologii komerční a vývojové prostředí je tedy dostupné pouze za úplatu. Při použití této technologie by tak bylo nutné nalézt nějaké již existující řešení dostatečně robustní pokrývající všechny potřeby vizualizéru. To se mi však v rámci zkoumání dostupných řešení nepodařilo. I v případě opaku by však přetrvávala některá další omezení, jako je znemožnění chodu aplikace na některých platformách či nemožnost exportu na jiná média. 4.6.4

HTML5 Canvas

Jedná se o element webové stránky – rastrové plátno [15], do kterého je možné s využitím odpovídajících funkcí JavaScriptu vykreslovat geometrické obrazce či samostatné body. Toto řešení je často využíváno i pro účely vizualizace informací. Vzhledem k tomu, že je ale vytvořená grafika v rastrovém formátu, je využití canvasu

4.6

Vizualizér

28

málo flexibilní variantou. Data vztahující se k jednotlivým objektům by musela být uchovávána odděleně. 4.6.5

SVG

Vektorový formát SVG lze považovat za ideální řešení pro zamýšlenou aplikaci. Je otevřený, široce podporovaný a použitelný na více typech médií a je možné ho bezešvě zahrnout do webových dokumentů. Proto byl zvolen pro výslednou implementaci. Jeho další konkrétní rysy budou popsány dále v textu. 4.6.6

Grafická knihovna pracující se zvolenou technologií

Podle mnou provedených průzkumů v době návrhu neexistovala žádná dostatečně flexibilní grafická knihovna pro formát SVG zaměřená na vykreslovaní grafů, v takové podobě, v jaké ji chápe teorie grafů. K dispozici bylo pouze množství knihoven generující diagramy (sloupcové, spojnicové a další grafy) vizualizující tabulková data, případně různá jednoúčelová řešení. Je proto třeba vystačit si s některou z obecných grafických knihoven pro SVG a potřebnou logiku vykreslující graf doimplementovat. V tomto případě bylo voleno ze dvou hlavních kandidátů: jQuery SVG a Rapha¨el. Obě knihovny mají velmi podobné možnosti. Konečná volba ale padla na knihovnu Rapha¨el, neboť ta je v současnosti aktivněji vyvíjena a má kvalitně zpracovanou dokumentaci.

5

ŘEŠENí

5

29

Řešení

5.1

Použité technologie

Pro samotnou implementaci byly zvoleny následující technologie. 5.1.1

PHP

PHP4 je server-side skriptovací jazyk s oblibou používaný pro webové prostředí. Pro tuto aplikaci byl zvolen především pro jeho rozšířenost a snadnou pochopitelnost v něm psaného kódu. V rámci aplikace bude využit jak pro tvorbu pavouka (s využítím rozhraní 5 CLI ), tak i pro backend webové aplikace komunikující s databází a zpracovávající získaná data. 5.1.2

MySQL

MySQL je zdarma dostupný relační databázový systém v současně době vlastněný a vyvíjený společností Oracle. Oproti rovněž zdarma dostupné alternativě, systému PostgreSQL, je pro něj k dispozici více pokročilejších nástrojů třetích stran, především velmi kvalitně zpracované webové administrační rozhraní phpMyAdmin, které bude v průběhů vývoje nápomocné při ladění činnosti aplikace. 5.1.3

JavaScript

JavaScript je nejčastěji využíván jako client-side jazyk ve webových prohlížečích, kromě toho často nachází uplatnění jako jazyk pro automatizaci úloh v nejrůznějších aplikacích. V rámci implementace frontendu vizualizéru bude JavaScript hlavní platformou. Umožní vyšší interaktivitu webové aplikace, urychlí její chod a především zajistí s pomocí dalších knihoven samotné grafické zobrazení. 5.1.4

SVG

SVG je grafický vektorový formát založený na značkovacím jazyce XML. Je přímo zobrazitelný v současných internetových prohlížečích. Dříve bylo pro zobrazení nutné použití zásuvných modulů, postupně však nastoupila i nativní podpora. SVG lze přímo vložit do dokumentů XHTML, jelikož oba formáty využívají XML systaxi a podporují tak i jmenné prostory. Viz příklad níže: 1 2 3 4

< html xmlns = " http :// www . w3 . org /1999/ xhtml " xmlns : svg = " http :// www . w3 . org /2000/ svg " xmlns : xlink = " http :// www . w3 . org /1999/ xlink " > < head > 4 5

PHP: Hypertext Preprocessor Command Line Interface - rozhraní příkazové řádky

5.1

5 6

Použité technologie

30

< title > XHTML a SVG

7 8 9

< body > < h1 > XHTML a SVG

10 11 12

< object id = " AdobeSVG " classid = " clsid :78156 a80 - c6a1 -4 bbf -8 e6a -3 cd390eeb4e2 " >

13 14 15 16

< svg : svg version = " 1.1 " baseProfile = " full " width = " 320 px " height = " 240 px " > < svg : circle cx = " 160 px " cy = " 120 px " r = " 60 px " fill = " # AAAA00 " stroke = " #000000 " stroke - width = " 2 px " / >

17 18 19



HTML5 vložení ještě zjednodušuje zavedením značky (tagu) <svg>: 1 2

< title > HTML5 a SVG

3 4 5

< body > < h1 > HTML5 a SVG

6 7 8 9 10

< svg version = " 1.1 " baseProfile = " full " width = " 320 px " height = " 240 px " > < circle cx = " 160 px " cy = " 120 px " r = " 60 px " fill = " # AAAA00 " stroke = " #000000 " stroke - width = " 2 px " / >

Vzhledem k tomu, že SVG se takto stává přímou součástí DOM stromu dokumentu, lze k němu přistupovat prostřednictvím JavaScriptu. K jednotlivým grafickým prvkům lze vázat události apod. To samozřejmě přináší nespočet výhod a lze tak snad docílit takřka libovolné interaktivity. 5.1.5

HTML5

HTML5 je novou generací značkovacího jazyka pro webové stránky. Dle své specifikace [16] má nahrazovat jak HTML 4.01, tak i větev XHTML a de facto slučuje možnosti obou. Syntaxe HTML5 celkově zjednodušuje zápis jednotlivých značek a zavádí v některých přípustných případech benevolentnější pravidla. HTML5 navíc přináší nové sémantické značky výstižně popisující strukturu dokumentu (

,