Extrakce webu pomocí Mozilla Application Frameworku. Ji í Ma²ek

eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£ové graky a interakce

Bakalá°ská práce

Extrakce webu pomocí Mozilla Application Frameworku Ji°í Ma²ek

Vedoucí práce: Ing. Tomá² Novotný

Studijní program: Softwarové technologie a management, Bakalá°ský Obor: Web a multimedia 28. kv¥tna 2010

i

Pod¥kování Za trp¥livost a cenné rady d¥kuji vedoucímu své práce Ing. Tomá²i Novotnému.

ii

Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn¥ a pouºil jsem pouze podklady uvedené v p°iloºeném seznamu. Nemám závaºný d·vod proti uºití tohoto ²kolního díla ve smyslu 60 Zákona £. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o zm¥n¥ n¥kterých zákon· (autorský zákon).

V Praze dne 28. 5. 2010

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

Abstract The aim of this thesis was to design and implement an interface that would enable to create a conguration for the web extractor, developed by supervisor of this project. Denition of content intended for the extraction is based on CSS3 selectors. They allow to describe nonstructured documents with satisfactory universality. The result of this thesis is the extension for Mozilla Firefox web browser, which generates these selectors according to user selection in document and allows to modify them easily.

Abstrakt Cílem bakalá°ské práce bylo navrhnout a implementovat rozhraní, které by pomocí vizuálních nástroj· umoº¬ovalo vytvo°it konguraci pro webový extraktor vyvinutý vedoucím tohoto projektu. Denice obsahu ur£eného k extrakci je p°itom zaloºena na CSS3 selektorech, které dovolují popsat nestrukturované dokumenty dostate£n¥ obecn¥. Výsledkem práce je tak roz²í°ení webového prohlíºe£e Mozilla Firefox, který na základ¥ uºivatelského výb¥ru v dokumentu tyto selektory generuje a následn¥ umoº¬uje jejich jednoduchou editaci.

iii

Obsah 1

Úvod

1

2

Analýza

2

2.1

Deklarace zám¥ru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.2

Sou£asný stav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2

2.3

Budoucí stav

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

3

2.4

Poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.4.1

Scéná° . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.4.2

Funk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

2.4.3

Nefunk£ní poºadavky . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3

Technologické °e²ení

5

3.1

Mozilla Application Framework . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.1.1

5

3.1.1.1

Struktura . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

3.1.1.2

Elementy

6

3.1.1.3

Aplika£ní logika

3.1.1.4

Vzhled XUL aplikací . . . . . . . . . . . . . . . . . . . . . . .

7

3.1.1.5

Overlays

8

3.1.1.6

Adresá°ová struktura dopl¬ku

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

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

7

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

9

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

11

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

11

3.2.1

Syntaxe [10] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

11

3.2.2

Jednoduché selektory . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.2.2.1

Selektor typu . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.2.2.2

Univerzální selektor

3.2.2.3

Selektory atribut·

3.2.2.4

Selektor t°ídy . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.2.2.5

Selektor ID . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

3.2.2.6

3.1.2 3.2

XUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

XPInstall

CSS3 selektory

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

12

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

12

Pseudo-t°ídy

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

16

3.2.3

Seskupování selektor·

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

18

3.2.4

Kombinování selektor· . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.2.4.1

Následník . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.2.4.2

Potomek

19

3.2.4.3

Sourozenec

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

iv

20

v

OBSAH

4

5

Shrnutí

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

21

3.2.6

Sizzle

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

21

3.2.7

jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

3.3

JavaScript Object Notation

3.4

Aardvark

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

22

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

22

Návrh °e²ení

24

4.1

24

Kongurace extraktoru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.1.1

Objekt Select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

4.1.2

Objekt Def

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

25

4.1.3

Objekt URL

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

26

4.2

Editace kongurace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

4.3

Generování sektor· . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

Implementace

28

5.1

28

5.2

6

3.2.5

Gracké uºivatelské rozhraní . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.1

Postranní li²ta

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

28

5.1.2

Popup panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

Struktura aplika£ní logiky

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

29

5.2.0.1

Objekt GUI . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

5.2.0.2

Objekt Tree

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

30

5.2.0.3

Objekt Aardvark . . . . . . . . . . . . . . . . . . . . . . . . .

30

5.2.0.4

Objekt Editor

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

30

5.2.0.5

Objekt File . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

5.2.0.6

Objekt Extractor . . . . . . . . . . . . . . . . . . . . . . . . .

32

Záv¥r

33

Literatura

34

A Seznam pouºitých zkratek

36

B Souhrnný p°ehled CSS3 selektor·

37

C Ukázková kongurace extraktoru

39

D Obsah p°iloºeného CD

41

Seznam obrázk· 3.1

Editace selektoru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

4.1

Editace selektoru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.1

Postranní li²ta

29

5.2

Popup panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

5.3

Aktualizace editoru p°íkaz·

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

31

5.4

Obslouºení události u nástroje pro editaci selektoru . . . . . . . . . . . . . . .

32

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

vi

Seznam tabulek 3.1

Roz²í°ení specikace CSS3 v knihovn¥ Sizzle . . . . . . . . . . . . . . . . . . .

22

B.1

Souhrnný p°ehled CSS3 selektor· . . . . . . . . . . . . . . . . . . . . . . . . .

37

vii

Kapitola 1

Úvod Objem sdílených informací v celosv¥tové síti Internet dnem ode dne roste, coº jist¥ posiluje jeho pomyslnou roli v¥domostní studnice lidstva. Jistý problém v²ak lze vid¥t v nestrukturovanosti t¥chto dat. Jedním p°íkladem za v²echny m·ºe být Wikipedie, otev°ená encyklopedie, jejíº obsah tvo°í sami uºivatelé. Ta v sou£asné dob¥ disponuje obrovským mnoºstvím nejr·zn¥j²ích informací, av²ak získat z ní data v takové podob¥, aby je bylo posléze moºné pouºít nap°íklad ke statistickému zpracování, je pom¥rn¥ pracné a zdlouhavé. Proto je cílem této práce navrhnout a implementovat rozhraní, které by uºivatel·m umoºnilo extrakci ºádaných dat jednodu²e automatizovat. Toto rozhraní bude mít podobu roz²í°ení webového prohlíºe£e Mozilla Firefox, který s pomocí vizuálních nástroj· umoºní i uºivatel·m bez hlub²ích znalostí problematiky vytvo°it kongura£ní soubor pro samotný webový extraktor. Hlavním nástrojem pro popisu extrahovaných dat zde p°itom budou CSS3 selektory, nebo´ práv¥ díky nim je moºné zachytit strukturu dokumentu dostate£n¥ obecn¥. Seznámit se nimi a s dal²ími pouºitými technologiemi je moºné v t°etí kapitole této práce. Extraktor jako takový zde nicmén¥ popsán není, nebo´ navrhované roz²í°ení bude vyuºívat program vyvíjený vedoucím tohoto projektu. B¥hem návrhu a realizace tak bude kladen velký d·raz na to, aby funkcionalita dopl¬ku mohla být do budoucna co nejsnadn¥ji modikována, pop°ípad¥ dále rozvíjena, o £emº se lze podrobn¥ji do£íst v £tvrté a páté kapitole. Výslednou podobu roz²í°ení webového prohlíºe£e je pak moºné najít na p°iloºeném kompaktním disku.

1

Kapitola 2

Analýza Po deklaraci zám¥r· této práce, je v pr·b¥hu analýzy nejprve shrnut sou£asný stav na poli extrakce web·, na£eº je vyjád°ena p°edstava situace, která by m¥la po jejím dokon£ení následovat. Na základ¥ toho je pak sestaven scéná°, který nasti¬uje, jak by práce s výsledným produktem m¥la ve výsledku vypadat. Toto neformální vyjád°ení poºadavk· na systém je posléze p°eformulováno do podoby jiº konkrétních funk£ních a nefunk£ních poºadavk·.

2.1 Deklarace zám¥ru Hlavním zám¥rem práce je vytvo°it roz²í°ení pro webový prohlíºe£ Mozilla Firefox, které by umoºnilo uºivatel·m jednodu²e automatizovat extrakci dat z nestrukturovaných web·, aniº by k tomu pot°ebovali n¥jaké hlub²í znalosti této problematiky. K dispozici jim proto bude vizuální nástroj, který jim dovolí vybrat elementy, z nich cht¥jí data extrahovat, a podle toto výb¥ru automaticky vygeneruje CSS3 selektor, který v rámci dokumentu cestu k elementu popisuje. Uºivatel pak bude moci tyto selektory dále editovat s tím, ºe mu budou vºdy nabídnuty moºné zm¥ny a on si tak bude moci v²e jednodu²e naklikat. B¥hem úprav uºivatel samoz°ejm¥ ihned uvidí dopad jím provedených zm¥n, nebo´ elementy vyhovující selektoru budou v dokumentu barevn¥ odli²eny, p°i£emº p°i kaºdé zm¥n¥ bude toto zvýrazn¥ní aktualizováno. Tímto výb¥rem tedy bude uºivatel konguraci postupn¥ vytvá°et, p°i£emº bude moci kdykoliv b¥hem tohoto procesu extraktor spustit, aby získal p°ehled, jaké výsledky jsou mu za aktuálního stavu vraceny. Výsledek své snahy pak bude moci samoz°ejm¥ uloºit do externího souboru. Z n¥j poté m·ºe být kongurace kdykoliv znovu na£tena a p°ípadn¥ i dále editována.

2.2 Sou£asný stav V sou£asné dob¥, kdyº chce uºivatel z Wikipedie získat kup°íkladu p°ehled o po£tu obyvatel v jednotlivých metropolích Evropy, musí projít stránky v²ech t¥chto m¥st a informace z nich ru£n¥ p°epsat. To je jist¥ zna£n¥ pracné a zdlouhavé. Chce-li v²ak tato data, nemá jinou moºnost.

2

KAPITOLA 2.

ANALÝZA

3

2.3 Budoucí stav S roz²í°ením, jenº bude výsledkem této práce, by se mu ale m¥la práce výrazn¥ zjednodu²it. N¥kolika kliknutími totiº jen vybere seznam odkaz· na stránky s informacemi o jednotlivých m¥stech a následn¥ pak na jedné z nich (op¥t pomocí n¥kolika kliknutí) vybere hodnotu, která má být ukládána. Poté uº jen spustí extraktor a soupis poºadovaných informací má b¥hem n¥kolika chvil hotový.

2.4 Poºadavky 2.4.1

Scéná°

1. Uºivatel otev°e stránku se seznamem odkaz· na dokumenty, jenº obsahují informace o hlavních m¥stech stát· Evropy. 2. Tuto stránku nastaví v konguraci jako výchozí. 3. Dále pak spustí nástroj pro selekci element· a s jeho pomocí vybere jeden odkaz ze seznamu. Systém automaticky vygeneruje selektor a p°idá ho do kongurace. 4. Uºivatel si ov¥°í, zdali navrºenému selektoru odpovídají v²echny odkazy v seznamu, nebo p°ípadn¥ jen ty, které ho zajímají. 5. Pokud mu selektor nevyhovuje, ru£n¥ ho pomocí editoru modikuje. B¥hem úprav jsou mu p°itom nabízeny r·zné varianty zm¥n, a tak uºivatel m·ºe selektor editovat prakticky bez pouºití klávesnice. 6. Uºivatel ale zárove¬ také v editoru nastaví, ºe stránka, na níº odkaz sm¥°uje, má byt vºdy na£tena. 7. Následn¥ pak sám p°ejde na jednu ze stránek, na neº je v seznamu odkazováno, a prost°ednictvím selek£ního nástroje op¥t vybere n¥který z element·. Tentokrát v²ak jiº s hodnotou, kterou bude chtít extrahovat. 8. Pomocí editoru m·ºe selektor op¥t modikovat, nicmén¥ zcela jist¥ musí nastavit, aby se z vybraného elementu p°e£etla jeho hodnota. 9. Poté m·ºe uºivatel je²t¥ p°ejít na n¥kterou z dal²ích stránek ze seznamu, aby si ov¥°il, ºe i zde odpovídá denovaný selektor elementu, z n¥jº mají být data na£tena. 10. Pokud selektor vyhovuje, je jiº v²e p°ipraveno pro zahájení. Uºivatel tedy spustí extraktor a sleduje, jak se data postupn¥ na£ítají. 11. Do n¥kolika chvil má tak poºadované hodnoty o v²ech hlavních m¥stech stát· Evropy.

KAPITOLA 2.

2.4.2

ANALÝZA

4

Funk£ní poºadavky

•

Systém umoºní uºivateli vizuáln¥ vybrat libovolný element dokumentu.

•

Systém automaticky vygeneruje podle uºivatelského výb¥ru selektor a p°idá jej do kongurace.

•

Systém umoºní uºivateli editaci vygenerovaného selektoru.

•

Systém nabídne nástroje umoº¬ující editaci selektoru pomocí jednoho kliknutí my²í.

•

Systém zvýrazní elementy odpovídající editovanému selektoru.

•

Systém zvýrazní kontext, vn¥mº se uºivatel aktuáln¥ nachází.

•

Systém umoºní uloºení kongurace do souboru.

•

Systém umoºní na£tení kongurace ze souboru.

•

Systém umoºní spu²t¥ní extrakce kdykoliv v pr·b¥hu tvorby kongurace.

•

Systém automaticky spustí extrakci p°i otev°ení kongurace v podob¥ HTML dokumentu.

2.4.3

Nefunk£ní poºadavky

•

Systém musí podporovat webový prohlíºe£ Mozilla Firefox 3.5.

•

Systém musí být funk£ní ve v²ech OS podporovaných prohlíºe£em Mozilla Firefox 3.5.

•

Systém vyuºívá extraktor vyvíjený vedoucím této práce.

•

Systém vyuºívá pro selekci element· existujícího roz²í°ení Aardvark.

•

Systém musí umoº¬ovat snadnou roz²í°itelnost editoru selektor·.

Kapitola 3

Technologické °e²ení Jak je jiº ze zadání práce patrné, navrhovaný systém bude postaven na Mozilla Application Frameworku pouºitém ve webovém prohlíºe£i Mozilla Firefox. Tím pádem jsou ale i dány technologie, které budou p°i jeho tvorb¥ pouºity. Jsou jimi XUL, kaskádové styly a JavaScript. Extraktor, který bude v dopl¬ku vyuºíván, nás rovn¥º limituje, co se moºného výb¥ru pouºitých technologií tý£e. Výchozí konguraci totiº p°ijímá pouze v podob¥ objektu typu JSON. Navíc v ní p°i popisu element· pouºívá CSS3 selektory. Aby s nimi bylo moºné pracovat i v tomto projektu, bude zde vyuºito existujících knihoven, a to konkrétn¥ Sizzle a jQuery. Nástroj pouºitý pro výb¥r element· bude rovn¥º p°evzatý, nebo´ se jedná o roz²í°ení známé pod názvem Aardvark.

3.1 Mozilla Application Framework Mozilla Application Framework [1] je kolekce multiplatformních softwarových komponent slouºící k vývoji aplikací b¥ºících na °ad¥ r·zných opera£ních systému. Zám¥rem tv·rc· p°itom bylo poskytnout sadu multiplatformních funkcí, která by byla vhodná pro vývoj webových prohlíºe£·, emailových klient· a jim podobných aplikací. Je tedy zjevné, ºe webový prohlíºe£ Mozilla Firefox je postaven práv¥ na tomto balíku. Jak jiº bylo °e£eno, balík se skládá z °ady sou£ástí jakou je nap°íklad i velmi výkonné vykreslovací jádro Gecko. Vzhledem k zám¥ru této práce v²ak na²e pozornost bude sm¥°ovat pouze ke dv¥ma komponentám, kterými MAD disponuje, a to k XUL a XPInstall.

3.1.1

XUL

XML User Interface Language, neboli XUL [£ti z·l], je jazyk vyvinutý organizací Mozilla, který slouºí k snadné tvorb¥ multiplatformních grackých rozhraních a je proto pouºíván v aplikacích jako nap°. Mozilla Firefox nebo Mozilla Thunderbird. Jak je jiº z jeho názvu patrné, jazyk vychází z XML. Stojí v²ak na jiº existujících standardech a technologiích, jakými je nap°íklad CSS, JavaScript nebo DOM, a tak pro lidi, kte°í jiº tyto technologie ovládají, je velmi jednoduché se jej nau£it [2].

5

KAPITOLA 3.

6

TECHNOLOGICKÉ EENÍ

Moºností pouºití jazyka XUL je p°itom hned n¥kolik [3]:

• Roz²í°ení prohlíºe£e Firefox P°idává dal²í funkce do prohlíºe£e Firefox. Tohoto je dosaºeno pomocí vlastnosti jazyka XUL zvané Overlays (p°ekrytí).

• Samostatná XULRunner aplikace XULRunner je zabalená verze Mozilla platformy, která umoº¬uje vytvo°ení samostatné XUL aplikace. Ke spu²t¥ní není pot°eba prohlíºe£ Firefox, nebot' aplikace má vlastní spou²t¥cí soubor.

• XUL balí£ek Aplikace podobná roz²í°ení prohlíºe£e Firefox. Spou²tí se v samostatném okn¥ a chová se jako samostatná aplikace. Pouºívá se, kdyº nechceme k aplikaci p°ibalovat XULRunner. Ke spu²t¥ní vyºaduje prohlíºe£ Firefox.

• Vzdálená XUL aplikace Zdrojový soubor aplikace je moºno umístit na webový server a aplikaci spou²t¥t vzdálen¥ v internetovém prohlíºe£i Firefox podobn¥ jako webovou stránku. Nevýhodou jsou ur£itá bezpe£nostní omezení.

Nás nicmén¥ bude zajímat pouze první z moºností vyuºití, a to roz²í°ení funk£nosti webového prohlíºe£e Mozilla Firefox.

3.1.1.1

Struktura

Jelikoº XUL vychází z XML, musí kaºdý dokument za£ínat XML hlavi£kou. Aby v²ak bylo zcela jasné, ºe jedná o XUL dokument, musí být pat°i£n¥ nastaven jeho jmenný prostor. Jednoduchý dokument pak m·ºe vypadat t°eba takto:

<window id="main-window" title="Hlavní okno" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <description>Ukázkový XUL dokument Ko°enovým elementem XUL souboru je vºdy jeden z top-level element· (viz. 3.1.1.2) nebo ve zvlá²tním p°ípad¥ element

(viz. 3.1.1.5). Takový prvek se p°itom m·ºe

v dokumentu vyskytnou pouze jedenkrát. Jeho obsah pak tvo°í výsledné uºivatelské rozhraní.

3.1.1.2

Elementy

XUL denuje celou °adu element·, které je moºné rozd¥lit zhruba do t¥chto kategorií [4]:

• top-level elementy window, page, dialog, wizard, atd.

KAPITOLA 3.


7

• widgets label, button, text box, list box, combo box, radio button, check box, tree, menu, toolbar, group box, tab box, colorpicker, spacer, splitter, atd.

• box model box, grid, stack, deck, atd.

• events and scripts script, command, key, broadcaster, observer, atd.

• data source template, rule, atd.

• ostatní overlay, iframe, browser, editor, atd.

Krom¥ toho je v XUL dokumentech moºné pouºít elementy jiných jazyk· zaloºených rovn¥º na XML, jako nap°íklad XHTML, SVG nebo MathML.

3.1.1.3

Aplika£ní logika

Aplika£ní logika XUL se implementuje v JavaScriptu [5]. Podobn¥ jako u HTML disponují i XUL elementy atributy typu

oncommand,

jejichº obsahem je JavaScriptový kód, potaºmo

volání n¥jaké externí funkce. Ta je pak následn¥ volán vºdy, kdyº se u elementu vyskytne událost, kterou atribut reprezentuje. Externí JavaScript je p°itom moºné do XUL vloºit pomocí elementu

<script>,

tedy stejn¥ jako v HTML.

Zde ov²em podobnost s HTML dokumenty nekon£í. Stejn¥ jako v jejich p°ípad¥ je totiº i XUL v pam¥ti reprezentováno prost°ednictvím objektu DOM, a tak je zjevné, ºe manipulovat s ním je moºn¥ naprosto stejným zp·sobem, jako je tomu u HTML.

3.1.1.4

Vzhled XUL aplikací

Jak jiº bylo °e£eno, XUL je p°edev²ím multiplatformní technologie a ve webovém prohlíºe£i Mozilla Firefox je stejn¥ jako HTML vázána na vykreslovací jádro Gecko [5]. Z toho m·ºe patrné, ºe vzhled XUL bude stejn¥ jako u HTML denován pomocí kaskádových styl·. Ty v²ak nejsou pro tvorbu GUI p°íli² vhodné, pon¥vadº nebyly pro tento ú£el navrhovány a navíc v tomto sm¥ru neposkytují dostate£nou funkcionalitu. Vývojá°i Mozilly v²ak tento problém vy°e²ili tím, ºe standardní implementaci CSS roz²í°ili tak, aby vyhovovala pot°ebám XUL, zárove¬ v²ak ale nechali p·vodní jádro netknuté tak, aby pln¥ vyhovovalo standardu. Mozilla Firefox má tím pádem v²echny prvky GUI denované práv¥ prost°ednictvím CSS. Av²ak narozdíl od HTML CSS v XUL neslouºí k denici rozloºení element·. K tomu jsou zde tzv. box model elementy (viz. 3.1.1.2). Díky nim je layout XUL oproti HTML výrazn¥ stabiln¥j²í. Av²ak tento fakt stále je²t¥ neznamená, ºe pomocí CSS není p°eci jen moºné rozloºení XUL denovat.

KAPITOLA 3.

3.1.1.5

8


Overlays

XUL Overlays je technika, která krom¥ jiného umoº¬uje za b¥hu zm¥nit stávající XUL dokument dle vlastních pot°eb. Práv¥ díky ní je moºné vyvíjet dopl¬ky pro Mozilla aplikace, potaºmo pro Mozilla Firefox. Ko°enovým elementem souboru XUL Overlay je element

a jeho obsahem jsou

fragmenty XUL kódu. T¥mi bude na základ¥ shody identikátor· p°ekryta £ást kódu p·vodního dokumentu. Pomocí toho je moºné v p·vodního UI prvky mazat, m¥nit, anebo k nim p°idávat nové [6]. Tento princip si názorn¥ objasníme na následujícím p°íkladu [7]. Fragment kódu, jenº p°edstavuje menu se £ty°mi poloºkami:

... <menu id="file_menu"> <menuitem name="New"/> <menuitem name="Open"/> <menuitem name="Save"/> <menuitem name="Close"/> ... My toto menu pomocí XUL Overlay roz²í°íme o jednu poloºku. Nezbytností p°itom je, abychom u elementu menu pouºili stejný identikátor.

<menu id="file_menu"> <menuitem name="Super Stream Player"/> Ve výsledku, tedy po p°ekrytí, bude menu fakticky vypadat takto:

... <menu id="file_menu"> <menuitem name="New"/> <menuitem name="Open"/> <menuitem name="Save"/> <menuitem name="Close"/> <menuitem name="Super Stream Player"/> ... P°i vývoji dopl¬ku je ale t°eba mít na pam¥ti, ºe jmenný prostor ID je spole£ný pro v²echna roz²í°ení. Abychom se tedy vyhnuli p°ípadným kolizí s jinými dopl¬ky, m¥li bychom u v²ech na²ich identikátor· pouºívat unikátní prex [7].

KAPITOLA 3.

3.1.1.6

9


Adresá°ová struktura dopl¬ku

Adresá°ová struktura roz²í°ení webového prohlíºe£ Mozilla Firefox vypadá typicky takto:

+- Doplnek -- chrome.manifest -- install.rdf +- content -- overlay.xul -- overlay.js +- locale +- cs-CZ +- en-US +- skin - overlay.css V hlavní sloºce se povinn¥ nacházejí soubory, a to

chrome.manifest a install.rdf. Ty

obsahují informace o daném roz²í°ení a o jeho dal²ím vnit°ním uspo°ádání.

content jsou pak umíst¥ný XUL soubory s denicí rozhraní a skripty zaji²´ující skin dále obsahuje soubory s kaskádovými styly, jejichº prost°ednictvím je denován vzhled dopl¬ku. V poslední z uvedených sloºek, ve sloºce locale, V sloºce

jeho aplika£ní logiku. Sloºka

je posléze moºné najít lokaliza£ní soubory.

install.rdf První povinný soubor roz²í°ení p°edstavuje jakousi jeho hlavi£ku. Z n¥j má Mozilla Firefox moºnost si p°e£íst informace o jeho názvu, autorovi a celou °adu dal²ích údaj·. Pro ukázku je zde uveden p°íklad tohoto souboru:

<em:id>[email protected] <em:version>1.0 <em:type>2 <em:targetApplication> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384} <em:minVersion>1.5 <em:maxVersion>3.5.*

KAPITOLA 3.

10


<em:name>Dopln¥k <em:description>Dopln¥k pro Mozilla Firefox. <em:creator>Ji°í Ma²ek <em:homepageURL>http://www.example.net/ Na první pohled je patrné, ºe se jedná o XLM soubor, k £emuº asi není t°eba nic dodávat. Pro dopln¥ní zde ale bude osv¥tlen význam n¥kterých jeho element·.

• id Jednozna£ný identikátor dopl¬ku, který by m¥l být unikátní z rámci v²ech ostatních roz²í°ení. Proto se zpravidla vytvá°í tím zp·sobem, ºe se spojí název roz²í°ení se jménem autora do tvaru podobného emailové adrese.

• name Název roz²í°ení, který bude zobrazen ve Správci dopl¬k·.

• version Zp·sob zápisu verze dopl¬ku není ºádným zp·sobem limitován, nicmén¥ je vhodné pouºívat stejný formát, jaký pouºívají aplikace Mozilla, tedy nap°.

3.5.9.

• description Popis roz²í°ení, který bude zobrazen ve Správci dopl¬k·.

• creator Jméno tv·rce dopl¬ku.

• targetApplication Prost°ednictvím tohoto elementu jsou denovány aplikace, pro n¥º je roz²í°ení ur£eno. Spole£n¥ s tím je zde i uveden rozsahu verzí, v nichº bude dopln¥k podporován.

chrome.manifest Jak bylo jiº v kapitole 3.1.1.5 zmín¥no, p°ekrývání umoº¬uje roz²i°ovat nebo jinak modikovat p·vodní rozhraní prohlíºe£e. K tomu je ale je²t¥ pot°eba °íci, který soubor budeme p°ekrývat a jakým. K tomu krom¥ jiného slouºí práv¥ tento soubor. Pro názornost je zde op¥t uveden p°íklad:

content skin overlay style

doplnek content/ doplnek classic/1.0 skin/ chrome://browser/content/browser.xul chrome://doplnek/content/overlay.xul chrome://global/content/customizeToolbar.xul chrome://doplnek/skin/overlay.css

První °ádek ur£uje sloºku s rozhraním a obsluºnými skripty. Dále následuje denice skinu. ádek za£ínající klí£ovým slovem

overlay

poté jasn¥ denuje, který XUL soubor

bude roz²i°ovat tím na²ím. A na posledním °ádku najdeme denic souboru s kaskádovými styly.

KAPITOLA 3.

3.1.2


11

XPInstall

Cross-Platform Install, neboli XPInstall, je technologie, kterou webový prohlíºe£ Mozilla Firefox spolu s jiný aplikacemi zaloºenými na XUL pouºívá pro instalaci dopl¬k· [8]. Instala£ní modul XPI [£ti zippy] (také nazývaný Bundles) je p°itom oby£ejný ZIP soubor, který obsahuje instala£ní skript a samoz°ejm¥ soubory ur£ené k instalaci [9]. Aplikace Mozilla p°i interakci s t¥mito moduly automaticky nabídnou jejich instalaci.

3.2 CSS3 selektory Selektor p°edstavuje podobn¥ jako regulární výraz strukturu, která m·ºe být pouºita bu¤to jako podmínka (nap°. v CSS jako pravidlo), která ur£uje elementy v stromové struktu°e HTML, potaºmo XML dokumentu, nebo jako obecný popis HTML £i XML fragmentu, který této struktu°e odpovídá [10]. Selektory p°itom m·ºou odkazovat na elementy pouze na základ¥ jejich typu, nebo lze s jejich pomocí vytvo°it velmi specický popis vycházející ze vzájemných vztah· prvk· ve struktu°e dokumentu. Extraktor, na n¥mº je tato práce postavena, vyuºívá, ke specikaci element· práv¥ tyto selektory, coº ostatn¥ bylo jiº n¥kolikrát zmín¥no. Je v²ak ale namíst¥ zamyslet nad tím, zdali jsou zrovna selektory tím nejlep²ím moºným °e²ením. Mohly zde být nap°íklad vyuºity XPath, nebo XQuery. Aadrvark (viz. 3.4), který bude v roz²í°ení pouºit k výb¥ru element·, dokonce sám XPath výrazy p°ímo generuje a MAF navíc i implicitn¥ podporuje jejich interpretaci [11]. Zápis cest pomocí t¥chto technologií je v²ak pom¥rn¥ zdlouhavý a velmi neintuitivní. Navíc je pro jejich editaci t°eba hlub²ích znalostí této technologie. CSS3 selektory naproti tomu umoº¬ují popsat elementy dostate£n¥ obecn¥ p°i zachování minimáln¥ moºné délky zápisu. Zápis je p°itom velmi p°ehledný a na první pohled je patrné, jaký výsledek od n¥j m·ºe uºivatel o£ekávat.

3.2.1

Syntaxe [10]

Selektor je °et¥zec sloºený z jedné £i více sekvencí jednoduchých selektor· navzájem od sebe odd¥lených

kombinátory. K poslední sekvenci p°itom m·ºe být p°ipojen jeden

pseudo-element. Sekvence jednoduchých selektor· je °et¥zec sloºený z jednoduchých selektor·, které nejsou navzájem odd¥leny

kombinátory. Za£íná vºdy selektorem typu nebo uni-

verzálním selektorem. ádný dal²í selektor typu £i univerzální selektor se v²ak jiº v sekvenci vyskytovat nesmí.

Jednoduchý selektor je bu¤to selektor typu, univerzální selektor, selektor atributu, selektor t°ídy, selektor ID nebo pseudo-t°ída. Kombinátory jsou bílé znaky, znaménko v¥t²í neº , znaménko plus a tilda . Bílé znaky se p°itom mohou vyskytovat i mezi jednoduchým selektorem a jiným kombinátorem.

KAPITOLA 3.

3.2.2

3.2.2.1

12


Jednoduché selektory

Selektor typu

Selektorem typu m·ºe být název libovolného elementu dokumentu. Selektor pak reprezentuje v²echny instance daného elementu v dokumentu. Nap°íklad selektor

h1

tak odpovídá v²em

nadpis·m první úrovn¥.

3.2.2.2

Univerzální selektor

Univerzální selektor se zna£í symbolem

*

a zahrnuje v²echny elementy v dokumentu.

V p°ípad¥, ºe univerzální selektor není jedinou sou£ástí sekvence jednoduchých selektor·, je moºné jej vynechat, pon¥vadº jeho p°ítomnost se implicitn¥ p°edpokládá.

P°íklady pouºití:

• *[hreflang|=en] • *.warning • *#myid 3.2.2.3

je ekvivalentní s

je ekvivalentní s

je ekvivalentní s

[hreflang|=en]

.warning

#myid

Selektory atribut·

Elementy mohou být téº specikovány na základ¥ vlastností svých atribut·.

Selektory atribut· s ov¥°ením existence £i hodnoty Jiº specikace CSS2 obsahovala £ty°i selektory atribut· [12]:

• [att] Tento selektor popisuje pouze ty elementy, u nichº je uveden atribut

att,

p°i£emº na

jeho hodnot¥ jiº nezáleºí.

• [att=val] Naproti tomu elementy, které vyhovují tomuto selektoru, nejenºe mají atribut uvedený, ale jeho hodnota p°ímo odpovídá hodnot¥

• [att~=val] Pokud hodnotou atributu z t¥ch slov práv¥

val,

att

val.

je seznam slov odd¥lených bílými znaky a je-li jedním

pak daný element odpovídá tomuto selektoru.

• [att|=val] V tomto p°ípad¥ selektor reprezentuje elementy, u nichº hodnota atributu £íná °et¥zcem

att,

att

att

za-

p°i£emº bezprost°edn¥ za ním následuje poml£ka. Tento selektor je

p°itom primárn¥ navrºen pro ur£ování jazykových variant obsahu (podle RFC 1766), pon¥vadº ty jsou práv¥ v tomto tvaru uvád¥ny. Totiº zatímco pouze element·m s atributem tám angli£tiny, tedy nap°íklad

[lang=en]

lang="en", selektor [lang=en]| vyhovuje lang="en-US" nebo lang="en-GB".

odpovídá

v²em varian-

KAPITOLA 3.

13


P°íklady pouºití: Tento selektor odpovídá nadpisu první úrovn¥, jenº má denovaný atribut

title

bez

ohledu na jeho hodnotu.

h1[title] V následujícím p°íkladu selektor reprezentuje element

span,

jehoº atribut

class

p°esn¥

odpovídá hodnot¥ example.

span[class="example"] Selektory

atribut·

je

p°itom

klad p°edstavuje element

moºné

libovoln¥

kombinovat.

Tento

selektor

span, jehoº atribut id odpovídá hodnot¥ sample

tak

a atribut

nap°í-

class

je roven example.

span[id="sample"][class="example"] Následující CSS pravidlo ukazuje rozdíl mezi ment

a,

u n¥jº je hodnota atributu

rel

=

a

~=.

Prvnímu selektoru vyhovuje ele-

nap°íklad copyright copyleft copyeditor. Naproti

tomu druhý selektor odpovídá pouze t¥m element·m, u nichº je atribut

href

p°esn¥ roven

hodnot¥ http://www.w3.org/.

a[rel~="copyright"] { ... } a[href="http://www.w3.org/"] { ... } Poslední selektor pak odpovídá v²em element·m, u nichº hodnota atributu

hreflang

za£íná °et¥zcem en, tedy nap°íklad en, en-US £i en-GB.

a[hreflang|="en"]

Selektory atribut· s vyhledáváním v °et¥zci Specikace CSS3 roz²í°ila selektory atribut· tím zp·sobem, ºe je moºné je koncipovat na základ¥ pod°et¥zc· obsaºených v jejich hodnotách.

• [att^=val] Tento selektor popisuje ty elementy, u nichº hodnota atributu Je-li

val

att za£íná °et¥zcem val.

prázdný °et¥zec, pak selektor neodpovídá ºádnému elementu.

• [att$=val] Naproti tomu u element· vyhovujících následujícímu selektoru hodnota atributu °et¥zcem

val

elementu.

kon£í. Je-li

val

att

prázdný °et¥zec, pak selektor op¥t neodpovídá ºádnému

KAPITOLA 3.

14


• [att*=val]

att val. Je-li val prázdný °et¥zec, pak i zde selektor

Poslední ze selektor· atribut· odpovídá t¥m element·m, jejichº hodnota atributu alespo¬ jednou obsahuje pod°et¥zcem neodpovídá ºádnému elementu.

P°íklad: Selektor, který následuje, reprezentuje v²echny objekty typu image.

object[type^="image/"] Naproti tomu tento selektor odpovídá v²em odkaz·m, u nichº hodnota atributu

href

kon£í °et¥zcem .html.

a[href$=".html"] Poslední

selektor

pak

p°edstavuje

takový

odstavec,

u

n¥jº

hodnota

atributu

title

obsahuje pod°et¥zec hello.

p[title*="hello"]

3.2.2.4

Selektor t°ídy

Abychom si usnadnili práci, m·ºe v HTML p°i práci s t°ídami pouºít namísto selektoru atributu [att~=val] selektor t°ídy .val. V p°ípad¥ HTML dokument· mají totiº selektory div.value a div[class~=value] stejný význam. Název t°ídy nicmén¥ musí v p°ípad¥ tohoto selektoru bezprost°edn¥ následovat za te£kou.

P°íklady pouºití v CSS: Pomocí tohoto pravidla zm¥níme barvu písma u v²ech element· s

class~="pastoral":

*.pastoral { color: green } Je nicmén¥ moºný i tento zápis:

.pastoral { color: green } Následují s

pravidlo

naproti

tomu

class~="pastoral:

h1.pastoral { color: green }

zm¥ní

barvu

písma

pouze

u

nadpis·

první

úrovn¥

KAPITOLA 3.

15


V d·sledku toho si první nadpis zachová svoji p·vodní barvu a druhý se zm¥ní na zelený:

Nadpis

Zelený nadpis
Poslední pravidlo pak odpovídá odstavci, u n¥jº je hodnotou atributu

class

seznam

bílými znaky odd¥lených slov, mezi nimiº se vyskytují °et¥zce pastoral a marine:

p.pastoral.marine { color: green } Toto pravidlo tak vyhovuje nap°íklad elementu s nikoliv v²ak jiº

3.2.2.5

class="pastoral blue".

class="pastoral blue aqua marine",

Selektor ID

Podobn¥ jako je tomu u selektor· t°íd, m·ºeme i v p°ípad¥ identikátor· element· pouºít namísto selektoru atributu

[id=val] selektor ID #val. Název t°ídy zde p°itom musí bezpro-

st°edn¥ následovat za k°íºkem. Selektory

div#value

a

div[class=value]

v²ak nemají zcela stejný význam. Selektory

ID jsou totiº z hlediska kaskádování mnohem speci£t¥j²í. Navíc vºdy odpovídají pouze jednomu elementu, a to prvnímu, u n¥hoº je daný identikátor pouºit. Práv¥ proto se pro n¥j téº uºívá ozna£ení hard ID. V n¥kterých zejména star²ích HTML dokumentech jsou v²ak identikátory pouºívány opakovan¥. Proto je v takových p°ípadech mnohem vhodn¥j²í pouºít selektor atributu

div[class=value],

tedy tzv. soft ID.

P°íklady pouºití: Tento selektor odpovídá takovému nadpisu první úrovn¥, u n¥jº je identikátor roven kapitola1:

h1#kapitola1 Naproti

tomu

tento

selektor

p°edstavuje

jakýkoliv

element

s

hodnotou

identikátoru

rovnou kapitola1:

kapitola1 Poslední uvedený selektor op¥t reprezentuje libovolný element, av²ak tentokrát s hodnotou identikátoru rovnou z98y.

*#z98y

KAPITOLA 3.

3.2.2.6

16


Pseudo-t°ídy

Hlavní my²lenkou pseudo-t°íd je umoºnit výb¥r element· takovým zp·sobem, ºe by vycházel z informacích, které se nacházejí mimo strukturu dokumentu, anebo nem·ºe být vyjád°eny prost°ednictví jiných jednoduchých selektor·. Tento selektor sestává vºdy z dvojte£ky, která je pak bezprost°edn¥ následována názvem pseudo-t°ídy a p°ípadn¥ je²t¥ závorkami s n¥jakou hodnotou dále specikující výb¥r. Uºití pseudo-t°íd je moºné ve v²ech sekvencích jednoduchých selektor· v selektoru, p°i£emº v rámci jedné sekvence m·ºe být umíst¥na kdekoliv za selektorem typu £i za univerzálním selektorem. Pseudo-t°íd p°itom m·ºe být pouºito v sekvenci hned n¥kolik. Zárove¬ mohou být dynamické, a to v tom smyslu, ºe elementy pseudo-t°ídou popisované se mohou objevovat a znovu mizet v závislosti na interakci uºivatele s dokumentem. Pseudo-t°ídy je p°itom moºné rozd¥lit hned do n¥kolika kategorií, av²ak pro pot°eby této práce sta£í znalost pouze n¥kterých z nich.

Strukturální pseudot°ídy Pseudo-t°ídy z této kategorie umoº¬ují popis element· na základ¥ struktury dokumentu. V jejich následujícím vý£tu je vºdy stru£n¥ popsána skupina element·, kterou daná pseudot°ída reprezentuje:

• :root Ko°enový element dokumentu. V p°ípad¥ HTML 4 je to vºdy

html.

• :nth-child(n) Element, který je n-tým potomkem svého rodi£e.

• :nth-last-child(n) Element, který je n-tým potomkem svého rodi£e p°i po£ítání odzadu.

• :nth-of-type(n) Element, který je n-tým potomkem svého typu.

• :nth-last-of-type(n) Element, který je n-tým potomkem svého typu p°i po£ítání odzadu.

• :first-child Element, který je prvním potomkem svého rodi£e.

• :last-child Element, který je posledním potomkem svého rodi£e.

• :first-of-type Element, který je prvním potomkem svého typu.

• :last-of-type Element, který je posledním potomkem svého typu.

KAPITOLA 3.

17


• :only-child Element, který je jediným potomkem svého rodi£e.

• :only-of-type Element, který je jediným potomkem svého typu.

• :empty Element, který nemá ºádné potomky.

n even,

Co je v²ak £inní tyto pseudo-t°ídy opravdu mocnými, je moºnost nahradit argument namísto £ísla polynomem p°i£emº

odd

an + b. Je zde ale také moºné pouºít klí£ová slova odd 2n + 1 a even je zas shodný s výrazem 2n.

a

odpovídá polynomu

P°íklady pouºití v CSS:

/* první °ádek tabulky bude mít £ervené pozadí */ tr:first-child { background-color: red; } /* kaºdý sudý °ádek tabulky bude mít £ervené pozadí */ tr:nth-child(even) { background-color: red; } /* pátý °ádek tabulky bude mít £ervené pozadí */ tr:nth-child(5) { background-color: red; } /* kaºdý pátý °ádek tabulky bude mít £ervené pozadí */ tr:nth-child(5n) { background-color: red; } /* kaºdá prázdná bu¬ka tabulky bude mít £ervené pozadí */ td:empty { background-color: red; }

Pseudo-t°ída Content Pseudo-t°ída

:contains("foo")

p°edstavuje element, v jehoº textovém obsahu se vysky-

tuje zadaný pod°et¥zec. Textový obsah elementu p°itom zahrnuje ve²kerá slednících.

PCDATA

obsaºená v n¥m i v jeho ná-

KAPITOLA 3.

18


P°íklad pouºití:

p:contains("Markup") Tento odstavec odpovídá vý²e uvedenému selektoru:

Hypertext Markup Language

Pseudo-t°ída Not

:not(X) p°edstavuje ty elementy, které neodpovídají selektoru uvedenému v jejím argumentu. Negace nicmén¥ nem·ºe být vno°ená. Zápis :not(:not(...)) tedy není va-

Pseudo-t°ída lidní.

P°íklady pouºití: Následující

selektor

reprezentuje

v²echna

tla£ítka

v

dokumentu,

která

nejsou

deakti-

vována:

button:not([DISABLED]) Zatímco tento selektor odpovídá v²em element·m v dokumentu s výjimkou odstavc·.

*:not(p)

3.2.3

Seskupování selektor·

Seznam selektor· odd¥lených £árkami p°edstavuje souhrn v²ech element· odpovídajících kaºdému jednotlivému z nich. Bílé znaky se p°itom mohou vºdy vyskytovat p°ed a/nebo za £árkou.

KAPITOLA 3.

19


P°íklady pouºití v CSS: Zde máme t°i pravidla s naprosto shodnou deklarací:

h1 { font-family: sans-serif; } h2 { font-family: sans-serif; } h3 { font-family: sans-serif; } Jejich zápis m·ºeme nicmén¥ zjednodu²it:

h1, h2, h3 { font-family: sans-serif }

3.2.4

Kombinování selektor·

Selektory je moºné téº vytvá°et vzájemným kombinováním jednodu²²ích selektor· a vytvá°et tak speci£t¥j²í popis v závislosti na vzájemných vztazích prvk· ve struktu°e dokumentu [13].

3.2.4.1

Následník

M·ºe nastat situace, kdy je pot°eba specikovat pouze ty prvky, které jsou následníky n¥kterého jiného elementu v rámci struktury dokumentu (nap°. element

em,

jenº je obsaºen

v nadpisu první úrovn¥). Tento vztah je moºné popsat tak, ºe selektor nad°azeného prvku, v tomto p°ípad¥ tedy

h1,

spojíme pomocí bílého znaku se selektorem poºadovaného elementu,

em. Bílým znakem je p°itom prakticky vºdy mezera. Výsledný selektor h1 em pak bude em, které jsou libovoln¥ vno°ené do nadpisu první úrovn¥.

reprezentovat v²echny elementy


h1 em Vý²e uvedený selektor popisuje element tom nezbytné, aby element

em

em

v následujícím fragmentu kódu. Není p°i-

byl p°ímým potomkem nadpisu.

Tento nadpis je velmi d·leºitý

3.2.4.2

Potomek

Tento vztah je velmi podobný tomu p°edcházejícímu, av²ak s tím rozdílem, ºe zde je popisovaný element p°ímým potomkem nad°azeného prvku. Kombinátorem je zde tedy namísto mezery symbol v¥t²í neº.

KAPITOLA 3.

20


P°íklady pouºití: Tomuto selektoru odpovídají v²echny odstavce, které jsou p°ímými potomky elementu

body:

body > p Zatím co tento selektor kombinuje vztah následníka a potomka:

div ol>li p Odpovídá tak odstavci, který je libovoln¥ vno°en do poloºky seznamu. Tato poloºka v²ak musí být p°ímým potomkem £íselného seznamu. Ten v²ak jiº m·ºe být op¥t libovoln¥ vno°en do elementu

div.

Za pov²imnutí téº stojí fakt, ºe bílé znaky, které je moºné umístit

p°ed i za symbol v¥t²í neº, byly v tomto p°ípad¥ vynechány.

3.2.4.3

Sourozenec

Mezi sousedícími elementy je moºné popsat dva druhy vzájemného postavení. V prvním p°ípad¥ se tyto dva prvky nalézají bezprost°edn¥ vedle sebe. V druhém pak není na potenciální existenci element· nacházejících se mezi nimi brán z°etel. Kaºdopádn¥ ani v jednom p°ípad¥ není brán z°etel na uzly, které by se sice nacházely mezi sousedícími prvky, ale zárove¬ by nebyly elementy (nap°. text mezi prvky).

Bezprost°edn¥ následující sourzozenec U tohoto vztahu odd¥luje dv¥ sekvence jednoduchých selektor· znaménko plus. Elementy reprezentované ob¥ma z nich p°itom mají v struktu°e dokumentu spole£ného rodi£e a prvek popsaný první £ástí selektoru vºdy bezprost°edn¥ p°edchází elementu vyjád°eného druhou sekvencí.

P°íklady pouºití: První selektor p°edstavuje odstavec, který bezprost°edn¥ následuje za nadpisem první úrovn¥:

h1 + p Naproti

tomu

tento

selektor,a£koliv

je

konceptuáln¥

shodný

s

p°ede²lým,

odpovídá

pouze takovému odstavci, který bezprost°edn¥ následuje za nadpisem první úrovn¥, p°i£emº hodnota jeho atributu

h1.opener + p

class

je rovna opener.

KAPITOLA 3.

21


Obecn¥ následující sourozenec Oproti p°ede²lému vztahu je zde kombinátorem znak tilda. Elementy reprezentované ob¥ma sekvencemi mají ve struktu°e dokumentu op¥t spole£ného rodi£e, nicmén¥ prvek popsaný první £ástí selektoru nemusí nutn¥ bezprost°edn¥ p°edcházet elementu vyjád°enému druhou sekvencí.


h1 ~ pre Vý²e

uvedený

selektor

p°edstavuje

v

následujícím

fragmentu

kódu

p°edformátovaný

text následující za nadpisem první úrovn¥:

Definice funkce a

Funkci a(x) je t°eba pouºít na v²echny hodnoty v tabulce.
<pre>fce a(x) = 12x/13.5

3.2.5

Shrnutí

Souhrnný p°ehled v²ech vý²e zmín¥ných selektor· je moºné posléze najít v tabulce B.1.

3.2.6

Sizzle

Sizzle je knihovna, jenº je napsaná £ist¥ ve skriptovacím jazyce JavaScript. Díky tomu je nezávislá nejen na platform¥, ale i na prohlíºe£i, v n¥mº je pouºívána. P°edstavuje tzv. selector engine, coº by se obecn¥ dalo popsat jako program, který umí vyhodnocovat CSS selektory, na jejichº základ¥ pak vrací elementy, které jim ve zpracovávaném dokumentu odpovídají. Pouºití knihovny je p°itom snadné. Pro získání element· vyhovujících danému selektoru totiº sta£í zavolat metodu

Sizzle(String selector, DOMElement|DOMDocument context).

Jejími parametry jsou p°itom vyhodnocovaný selektor a objekt zpracovávaného dokumentu, pop°. reference na element, v jehoº kontextu bude selektor vyhodnocován. Jako nedostatek této knihovny by p°itom mohl být vnímán fakt, ºe pln¥ neimplementuje specikaci CSS3. Nicmén¥ v naprosté v¥t²in¥ vyhodnocovaných selektor· se tato skute£nost nikterak neprojeví. Naopak její velkou výhodou je, ºe umoº¬uje zjednodu²ení zápisu n¥kterých pseudo-t°íd. Jejich vý£et následuje v tabulce 3.1. Sizzle navíc specikaci roz²i°uje o vlastní pseudo-t°ídy

:has(s), :lt(n)

a

:gt(n).

Pseudo-t°ída

obsahují prvky odpovídající selektoru

s.

:has(s)

p°itom p°edstavuje ty elementy, které

Naproti tomu

:lt(n)

jenº p°edcházejí £i následují n-tého potomka svého rodi£e.

a

:gt(n)

reprezentují prvky,

KAPITOLA 3.

22


Tabulka 3.1: Roz²í°ení specikace CSS3 v knihovn¥ Sizzle

3.2.7

CSS3

Sizzle

:not([att=value]) :first-child :last-child :nth-child(even) :nth-child(odd) :nth-child(n) input[type=text] input[type=checkbox] input[type=file] input[type=password] input[type=submit] input[type=image] input[type=reset]

[att!=value] :first :last :even :odd :eq(n) :text :checkbox :file :password :submit :image :reset

jQuery

Knihovna jQuery, rovn¥º napsaná v JavaScriptu, p°itom s knihovou Sizzle úzce souvisí. Práv¥ ji totiº jQuery vyuºívá jako sv·j selector engine. Stru£n¥ by se tato knihovna dala charakterizovat tím zp·sobem, ºe podobn¥ jako CSS odd¥luje zobrazovací charakteristiku od struktury HMTL, tak jQuery od ní odd¥luje chování [14]. Nicmén¥ v tomto projektu se s jQuery setkáme jen velmi okrajov¥. Bude zde totiº pouze vyuºito jeho schopnosti manipulovat s CSS, a to jen p°i té p°íleºitosti, kdyº bude pot°eba zvýraznit elementy, jenº vyhovují aktuáln¥ editovanému selektoru.

3.3 JavaScript Object Notation JavaScript Object Notation, neboli JSON, je zp·sob zápisu dat nezávislý na po£íta£ové platform¥, ur£ený pro p°enos dat, která mohou být organizována v polích nebo agregována objektech. Vstupem je libovolná datová struktura (£íslo, °et¥zec, boolean, objekt nebo z nich sloºené pole), výstupem je vºdy °et¥zec. Sloºitost hierarchie vstupní prom¥nné není teoreticky nijak neomezena [15]. Tento zp·sob zápisu dat je zde p°itom vyuºíván p°i konguraci extraktoru. To je podrobn¥ji rozebráno v kapitole 4.1.

3.4 Aardvark Aardvark je roz²í°ení webového prohlíºe£e Mozilla Firefox, které je zárove¬ velmi efektivním a uºivatelsky p°íjemným nástrojem pro výb¥r element· v rámci HTML dokument· (viz. obrázek 3.1). Na tomto nástroji je zaloºena °ada existujících dopl¬k· jako nap°íklad Adblock

KAPITOLA 3.

23


Plus: Element Hiding Helper [16], coº je nástroj slouºí k blokování reklamních banner·, nebo AutoPager, který prozm¥nu slouºí k automatickému na£ítání stránek.

Obrázek 3.1: Editace selektoru

Práce s tímto nástrojem je velmi jednoduchá. Pro jeho spu²t¥ní totiº sta£í zavolat metodu

aardvarkSelector.start(browser),

jejímº parametrem je reference na objekt reprezentu-

jící prohlíºe£. Pro up°esn¥ní je ale t°eba °íci, ºe prohlíºe£em zde není my²leno celé okno webového prohlíºe£e ani proces, v n¥mº je spu²t¥n, nýbrº konkrétní XUL element, v n¥mº je HTML dokument vykreslován. Odchytávání vybraných element· pak není o nic sloºit¥j²í, nebo´ Aardvark sám p°i kaºdém potvrzení výb¥ru elementu, a je jedno jestli stisknutím tla£ítka volá metodu

aardvarkSelector.select(elem),

s

nebo kliknutím my²i,

jejímº argumentem je práv¥ vybraný ele-

ment. Nám tak sta£í pouze nahradit p·vodní kód kódem vlastním. O své ukon£ení se Aardvark stará rovn¥º sám. Dojde k n¥mu bu¤to po stisknutí tla£ítka

q

nebo

Esc.

Aardvark krom¥ toho disponuje je²t¥ n¥kolika velice uºite£nými metodami, které p°i

aardvarkUtils.currentDocument(), aardvarkUtils.currentWindow(), p°i£emº kaºdá z

implementaci roz²í°ení vyuºijeme. Jsou jimi metody

aardvarkUtils.currentBrowser()

a

nich vºdy vrací referenci na aktuáln¥ uºívaný dokument, prohlíºe£, £i okno.

Kapitola 4

Návrh °e²ení V návrhu °e²ení je nejprve nutné rozebrat, jak vlastn¥ probíhá kongurace extraktoru, nebo´ práv¥ od toho se celé °e²ení bude odvíjet. Extraktor se konguruje prost°ednictvím objektu typu JSON, p°i£emº jeho ukázku je moºné najít v dodatku C.

4.1 Kongurace extraktoru Jak jiº bylo °e£eno, kongurace extraktoru se provádí prost°ednictvím objektu typu JSON. Ten má následující strukturu:

{

}

delay: int, url: String, def: Object, select: Object

Význam prvních dvou hodnot je zcela prostý. Atribut extraktor vycházet, a hodnota

delay

url

udává adresu, z níº bude

naproti tomu p°edstavuje délku prodlení mezi jednot-

livými operacemi.

4.1.1

Objekt Select

Sloºit¥j²í je v²ak situace v p°ípad¥ atributu

select, nebo´ práv¥ podle n¥j je °ízen celý proces

extrakce. Z praktického hlediska se p°itom jedná od podobjekt, jehoº obsahem je libovolné mnoºství t¥chto struktur, kdy kaºdá fakticky p°edstavuje jeden p°íkaz:

[name]: { area: String, url: Object, read: String, use: String, attach: String, select: Object }

24

KAPITOLA 4.

Hodnotou

25

NÁVRH EENÍ

[name]

je zde p°itom textový °et¥zec, který p°íkaz pojmenovává a v d·sledku

tak zastává roli identikátoru. Zejména proto tak musí být v rámci objektu vºdy unikátní. Vlastnosti

read, use

a

attach

následn¥ ur£ují, co p°esn¥ se bude dít s elementy, které

popisuje selektor obsaºený v atributu

area. select. url. Ten

V jejich kontextu budou rovn¥º provád¥ny pod°ízené p°íkazy obsaºené v objektu To v²ak platí pouze za p°edpokladu, ºe aktuální p°íkaz nemá denovaný atribut

totiº zna£í p°echod na jinou stránku, z £ehoº je tudíº jasné, ºe vno°ené p°íkazy tak pracují se zcela odli²ným dokumentem.

select fakticky vytvo°í stromová struk[name] je rodi£ a atribut select obsahuje v²echny jeho potomky. Pro v¥t²í

Kaºdopádn¥ v d·sledku toho se nám z objektu tura p°íkaz·, kde

názornost si toto ukáºeme na praktickém p°íkladu. Zde máme potenciáln¥ obsah atributu

select: mesto: { area: "", select: { nazev: { read: "text" }, adresa: { read: "link" } } } Abychom v n¥m onu stromovou strukturu vid¥li jasn¥ji, transformujeme ho do následující podoby:

name:"mesto", area:"td:eq(1) a" |- name:"nazev", read:"text" |- name:"adresa", read:"link" V tomto stavu je jiº moºné objekt

select zobrazit prost°ednictvím XUL elementu tree,

který k zobrazování stromových struktur slouºí.

4.1.2 Objekt

Objekt Def

def funguje na naprosto stejném principu jako objekt select, akorát s tím rozdílem,

ºe ne°ídí proces extrakce, nýbrº jen denuje opakující se sekvence p°íkaz·. Pro názornost bude op¥t nejjednodu²²í si toto ukázat na praktickém p°íkladu:

def: { cesky_nazev: { url: { area: ".interwiki-cs a",

KAPITOLA 4.

}

26

NÁVRH EENÍ

read: "link" }, area: "h1", read: "text"

}, select: { cesky_nazev: { use: ["cesky_nazev"] } } V objektu

def

máme denovaný p°íkaz

odkazujeme prost°ednictvím atributu

use.

cesky_nazev,

na který se pak z £ásti

select

P°i zpracování tak bude °ídící sekvence p°íkaz·

fakticky vypadat takto:

select: { cesky_nazev: { url: { area: ".interwiki-cs a", read: "link" }, area: "h1", read: "text" } } 4.1.3

Objekt URL

O objektu

url,

který je atributem ve struktu°e p°íkazu, jsme se doposud nezmínili. V jeho

p°ípad¥ je totiº situace pon¥kud komplikovan¥j²í, nebo´ atribut sám je totiº p°íkazem. Pro lep²í pochopení následuje p°íklad:

detail: { url: { read: "link" }, select: { plny_nazev: { area: ".infobox.geography .country-name", read: "text" } }, attach: "inline" } Z tohoto faktu p°itom plyne jedna d·leºitá skute£nost, a to ºe kaºdý atribut obsahovat stejnou stromovou strukturu p°íkaz· jako objekty

def

a

select.

url

m·ºe

KAPITOLA 4.

27

NÁVRH EENÍ

4.2 Editace kongurace Z p°edchozího rozboru kongurace extraktoru tedy vyplynulo, ºe se zde nacházejí t°i r·zné stromové struktury p°íkaz·. Díky transformaci, kterou jsou s nimi schopni provést (viz. 4.1.1), je tak m·ºeme snadno zobrazit prost°ednictvím XUL elementu

tree,

a umoºnit tak jejich

editaci. Jeden uzel stromu tak bude vºdy odpovídat jednomu p°íkazu, p°i£emº pro kaºdý z nich pak bude moºné samostatn¥ otev°ít editor, který dovolí úpravu jeho vlastností, tj.

area, url, read, use

a

attach.

Hlavní d·raz zde nicmén¥ bude kladen na atribut

[name],

area. Editor tak uºivateli nabídne °adu

nástroj·, které mu jeho editaci co nejvíce zjednodu²í. V centru pozornosti t¥chto nástroj· p°itom vºdy bude aktuáln¥ editovaná sekvence jednoduchých selektor·, která bude rozpoznána podle pozice kurzoru v textboxu se selektorem. Nap°íklad v textboxu zobrazeném na obrázku 4.1 se za editovanou bude pokládat sekvence

table.wikitable:eq(0).

Obrázek 4.1: Editace selektoru

Nástroje pak s ohledem na kontext p°íkazu a strukturu dokumentu nabídnou dal²í jednoduché selektory, které bude moci jedním kliknutím my²i k sekvenci p°idat, odebrat, £i v p°ípad¥ selektoru typu zm¥nit. Rovn¥º bude umoºn¥no pomocí jednoho tla£ítka celou editovanou sekvenci ze selektoru odstranit, £ímº se výrazn¥ usnadní jejich zobec¬ování. B¥hem implementace p°itom bude kladen velký d·raz na to, aby skupina t¥chto nástroj· mohla být kdykoliv a co nejjednodu²eji roz²í°ena. U atribut·

read, attach

a

use

je pak pro zm¥nu omezena mnoºina moºných hodnot,

jenº jim mohou být p°i°azeny. V p°ípad¥ prvních dvou tyto mnoºiny vychází z moºností extraktoru, a proto je vºdy nutné z n¥j tyto informace p°i spu²t¥ní roz²í°ení získat. Hodnoty atributu

use

pak zase vycházejí z p°íkaz· p°eddenovaných v objektu

def.

P°i dokon£ení editace celé kongurace, tj. p°i jejím ukládání, nebo p°i p°ímém spou²t¥ní extraktoru, se struktura z elementu

tree

transformuje zp¥t do podoby objektu JSON tak,

aby mohl být rovnou p°edán extraktoru ke zpracování.

4.3 Generování sektor· Jak jiº bylo v analýze °e£eno, cílem práce je konguraci co nejvíce zjednodu²it, a práv¥ proto se dal²ím klí£ovým nástrojem celého roz²í°ení stane Aardvark. Ten totiº umoºní uºivateli vizuáln¥ vybrat element, který chce do editované struktury p°idat, p°i£emº pro n¥j bude automaticky vygenerován selektor tak, aby jiº odpovídal kontextu, do kterého je vkládán.

Kapitola 5

Implementace Roz²í°ení pro webový prohlíºe£ Mozilla Firefox bylo po dohod¥ s vedoucím práce vyvíjeno pod licencí MPL 1.1, a to z toho d·vodu, aby mohlo být do budoucna modikováno a vylep²ováno kýmkoliv, kdo by projevil o problematiku extrakce webu prost°ednictvím dopl¬ku prohlíºe£e zájem. B¥hem samotné implementace bylo nicmén¥ postupováno podle vý²e uvedeného návrhu °e²ení a aº na drobné komplikace se jej poda°ilo celý úsp¥²n¥ realizovat.

5.1 Gracké uºivatelské rozhraní Gracké rozhraní implementovaného roz²í°ení se skládá ze dvou základních £ástí. První z nich je postranní li²ta (viz. obrázek 5.1), která zobrazuje aktuáln¥ editovanou p°íkazovou strukturu. Druhou je pak popup panel (viz. obrázek 5.2), který slouºí jako editor jednotlivých p°íkaz·.

5.1.1

Postranní li²ta

Hlavním a nejd·leºit¥j²ím prvkem postranní li²ty (viz. obrázek 5.1) je XUL element

tree.

Pouze jeho prost°ednictvím totiº m·ºe být zobrazena editovaná struktura p°íkaz·. O jakou se p°itom aktuáln¥ jedná je vºdy moºné poznat z ko°enového uzlu stromu. Je-li p°itom editován objekt

url,

je nad elementem

tree

navíc zobrazena cesta, která k n¥mu vede,

a tla£ítko umoº¬ující návrat k nad°azenému objektu. V dolní £ásti li²ty jsou pak tla£ítka, která dovolují nap°íklad spustit nástroj umoº¬ující selekci element·, ru£n¥ p°idat £i odebrat p°íkaz ze struktury, ap.

5.1.2

Popup panel

Jak jiº bylo zmín¥no, hlavním ú£elem popup panelu (viz. obrázek 5.2) je umoºnit uºivateli modikaci jednotlivých p°íkaz·. Zobrazí si jej p°itom tak, ºe v postranním panelu klikne pravým tla£ítkem na uzel stromu, který si p°eje v danou chvíli editovat. Panel mu následn¥

28

KAPITOLA 5.

29

IMPLEMENTACE

Obrázek 5.1: Postranní li²ta

umoºní zm¥nit nastavit hodnotu v²ech atribut· p°íkazu, p°i£emº navíc jsou zde pro n¥j p°ipraveny nástroje, které se mu snaºí editaci selektoru, potaºmo atributu

area,

co nejvíce

zjednodu²it. Podrobn¥j²í informace o principu fungování t¥chto nástroj· a moºnostech jejich roz²í°ení je moºné nalézt v kapitole 5.2.0.4.

5.2 Struktura aplika£ní logiky Ve²kerá aplika£ní logika roz²í°ení je obsaºena v objektu

infocram.

Ten se p°itom skládá

z ²esti díl£ích podobjekt·, kdy kaºdý z nich obsluhuje pouze specickou £ást poºadavk· systému. V následujících kapitolách tak bude osv¥tlen význam kaºdého z nich.

5.2.0.1

Objekt GUI

První z objekt·, objekt

gui,

má na starost v²echny £innosti související s postranní li²tou,

zejména pak s jejím elementem

tree.

Umoº¬uje do n¥j p°idat £i z n¥j odebrat jednotlivé

uzly, m¥nit jejich díl£í hodnoty a mnoho dal²ího. V neposlední °ad¥ se tento objekt téº stará o zvýraz¬ování objekt· vyhovujících práv¥ editovanému selektoru a o vyzna£ování kontextu, jenº odpovídá aktuáln¥ vybranému p°íkazu.

KAPITOLA 5.

30

IMPLEMENTACE

Obrázek 5.2: Popup panel

5.2.0.2

Objekt Tree

tree je uchování t¥ch £ástí kongurace, které tree. Jediná metoda, kterou p°itom objekt dispo-

Hlavním a zárove¬ jediným posláním objektu nejsou aktuáln¥ zobrazovány elementem

nuje, tak vrací celou konguraci v podob¥ objektu JSON.

5.2.0.3

Objekt Aardvark

Z názvu toho objektu je jiº patrné, ºe jeho obsahem budou metody, které zaji²´ují úkony souvisejí s nástrojem Aardvark. P°edn¥ je to tedy jeho samotné spu²t¥ní a následn¥ pak zpracovávání uºivatelem vybraných element·. Pro n¥ je objekt schopen vygenerovat takový selektor, který bude odpovídá kontextu aktuáln¥ vybraného p°íkazu, a následn¥ ho pak p°idat do p°íkazové struktury jako jeho potomka.

5.2.0.4

Objekt Editor

Tento objekt se od ostatních podobjekt· pon¥kud li²í. Totiº navzdory skute£nosti, ºe je zodpov¥dný za ve²keré d¥ní související s editorem p°íkaz·, je jeho funkcionalita zcela minimální. Místo n¥j ji totiº obstarávají jemu pod°ízené objekty. Kaºdý z nich má p°itom na starosti jen díl£í £ást editoru. P°ed kaºdým jeho otev°ením, potaºmo p°i zm¥n¥ editované sekvence jednoduchých selektor· £i p°esunu na jinou, je pak volána metoda

infocram.editor.update()

(viz. obrázek 5.3). Ta ov²em neaktualizuje ºádné konkrétní prvky editoru, nýbrº projde v²echny prvky objektu razu

^widget.*$,

infocram.editor

a u t¥ch, jejichº název vyhovuje regulárnímu vý-

nejprve ov¥°í existenci metody

update()

a tu p°ípadn¥ pak zavolá.

KAPITOLA 5.

IMPLEMENTACE

31

Obrázek 5.3: Aktualizace editoru p°íkaz·

Bude-li tedy n¥kdo chtít roz²í°it editor o n¥jaký vlastní prvek, jehoº obsah bude vázán práv¥ na editovanou sekvenci jednoduchých selektor·, je moºné to ud¥lat nap°íklad takto:

infocram.editor.widgetAttr = { update: function() { . . .

}, onClick: function(elem) { . . .

}

} Obsluºná metoda události vyvolané tímto prvek pak probíhá p°ibliºn¥ tak, jak ilustruje

diagram uvedený na obrázku 5.4. Tedy v hrubých tím zp·sobem, ºe získá aktuáln¥ editovanou sekvenci jednoduchých selektor·, tu vyhodnotí a modikuje, na£eº vyvolá aktualizaci zvýrazn¥ní element· vyhovujících aktuáln¥ editovanému selektoru a celkovou obnovu samotného editoru.

KAPITOLA 5.

IMPLEMENTACE

32

Obrázek 5.4: Obslouºení události u nástroje pro editaci selektoru

5.2.0.5

Objekt File

Funkce objektu

file

je více neº zjevná. Poskytuje totiº uºivateli metody, které mu dovolují

editovanou konguraci uloºit, op¥tovn¥ na£íst £i ji za£ít tvo°it znovu zcela od za£átku.

5.2.0.6

Objekt Extractor

Smysl posledního z objekt· je rovn¥º prostý, nebo´ náplní jeho jediné metody je vyºádat si od objektu

tree aktuáln¥ editovanou konguraci v podob¥ objektu JSON, a ten pak p°edat

extraktoru ke zpracování. S tím nicmén¥ souvisí jeden z problém·, které se b¥hem implementace vyskytly. Jedním z poºadavk· na systém totiº bylo, aby se p°i na£tení HTML dokumentu, jenº by obsahoval objekt s kongurací, automaticky spustila extrakce práv¥ podle tohoto zadání. P°ekáºkou v tom se v²ak stal patrný rozdíl v implementaci webového prohlíºe£e Mozilla Firefox v r·zných opera£ních systémech. Zatímco v Linuxu toto funguje bez v¥t²ích obtíºí, v OS Windows Firefox na takovýto HTML dokument nereaguje.

Kapitola 6

Záv¥r Hlavního cíle této práce, jímº bylo vytvo°ení roz²í°ení pro webový prohlíºe£ Mozilla Firefox, bylo úsp¥²n¥ dosaºeno. V pr·b¥hu jeho návrhu a implementace jsem se p°itom podrobn¥ seznámil s Mozilla Application Frameworkem a s jeho moºnostmi na poli extrakce webu. Výsledkem praktické £ásti je pak pln¥ funk£ní dopln¥k webového prohlíºe£e, který umoº¬uje jednodu²e vytvo°it konguraci pro extraktor vyvíjený vedoucím této práce. Je u n¥j nicmén¥ ponechán prostor pro dotvo°ení dal²ích nástroj·, které by je²t¥ více usnad¬ovaly tvorbu a modikaci selektor·, jenº zde pouºity pro popis dat ur£ených k extrakci. Nicmén¥ i p°esto, ºe toto roz²í°ení extrakci webu výrazn¥ usnad¬uje, není pravd¥podobné, ºe se tato technika masov¥ roz²í°í. Kongurace extraktoru je totiº stále pom¥rn¥ dost znalostn¥ náro£ná. áste£ným °e²ením tohoto problému by p°itom mohlo být maximální zjednodu²ení a zefektivn¥ní uºivatelského rozhraní. To je v²ak jiº nám¥t pro ty, kte°í by cht¥li v této práci pokra£ovat a rozvíjet tak dále moºnosti extrakce webu prost°ednictvím roz²í°ení webového prohlíºe£e.

33

Literatura [1] Wikipedia.

Mozilla application framework Wikipedia, The Free Encyclopedia

[online].

c2010 [citováno 16. 05. 2010].

z WWW: Dostupný

[2] Wikipedie. 2010]. Dostupný

XUL Wikipedie: Otev°ená encyklopedie

z

WWW:

4471904> [3] KOVÁCS, Petr.

[online]. c2009 [citováno 19. 05.

Analyzátor jazyka XUL pro systém DIG.

Brno, 2007. v, 27 s. Bakalá°ská

práce. Masarykova univerzita, Fakulta informatiky.

Dostupné z WWW: [4] Wikipedia. 2010]. Dostupný

XUL Wikipedia, The Free Encyclopedia

z

WWW:

362530715> [5] GAGYI Matej. 20. 05. 2010].

[online]. c2010 [citováno 20. 05.

.Roz²írte si Firefox a Thunderbird - sami! - II

[online]. c2005 [citováno

z WWW:

Dostupný

[6] Mozilla Foundation. Dostupný

z

Building an Extension

WWW:

Extension> [7] Mozilla Foundation.

[online]. c2010 [citováno 20. 05. 2010].

XUL Overlays


Dostupný z WWW: [8] Mozilla Foundation.

XPInstall


Dostupný z WWW: [9] Mozilla Foundation.

XPI


Dostupný z WWW:

Selectors Level 3

[10] ÇELIK Tantek, ETEMAD Elika J., GLAZMAN Daniel, HICKSON Ian, LINSS Peter a WILLIAMS John.


Dostupný z WWW:

34

35

LITERATURA

[11] Mozilla Foundation. 17. 05. 2010].

Mozilla Application Framework in Detail

[online]. c2007 [citováno

Dostupný z WWW:
framework_in_detail>

Level 2 Revision 1 (CSS 2.1) Specication

[12] BOS, Bert, ÇELIK Tantek, HICKSON Ian a LIE Håkon Wium.

Cascading Style Sheets


Dostupný z WWW: [13] STANÍEK Petr.

Praktická p°íru£ka CSS, 3. díl - Selektory v CSS

[online].

c2001

[citováno 22. 05. 2010].

Dostupný z WWW:
html>

[14] Wikipedie.

JQuery Wikipedie: Otev°ená encyklopedie

[online].

c2010 [citováno

27. 05. 2010]. Dostupný

z

WWW:

JQuery&oldid=5375979> [15] Wikipedie.

JavaScript Object Notation Wikipedie: Otev°ená encyklopedie

[online].

c2010 [citováno 23. 05. 2010].

Dostupný z WWW:
Object_Notation&oldid=5361221>

[16]

Adblock Plus: Element Hiding Helper


Dostupný z WWW:

Dodatek A

Seznam pouºitých zkratek CSS Cascading Style Sheets DOM Document Object Model JSON JavaScript Object Notation HTML HyperText Markup Language MAF Mozilla Application Framework OS Opera£ní systém UI User Interface XML Extensible Markup Language XPI Cross-Platform Install XUL XML User Interface Language

36

Dodatek B

Souhrnný p°ehled CSS3 selektor· Tabulka B.1: Souhrnný p°ehled CSS3 selektor·.

Selektor

* E E[foo] E[foo="bar"] E[foo~="bar"]

Význam v²echny elementy element element element element

E E, E, E,

foo hodnota atributu foo rovna "bar" hodnotou atributu foo seznam slov

u n¥jº je uveden atribut kde je kde je

odd¥lených

bílým znaky a "bar" je zárove¬ práv¥ jedním z nich

E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E[foo|="en"]

element element element element

E, E, E, E,

kde hodnota atributu kde hodnota atributu kde hodnota atributu kde hodnota atributu

foo foo foo foo

za£íná °et¥zcem "bar" kon£í °et¥zcem "bar" zahrnuje pod°et¥zec "bar" za£íná °et¥zcem "en",

p°i£emº bezprost°edn¥ za ním následuje poml£ka

E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-child E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E.warning E\#myid E:not(s)

element element element element element element element element element element element element element element element

E, E, E, E, E, E, E, E, E, E, E, E, E, E, E,

který je ko°enovým elementem dokumentu který je n-tým potomkem svého rodi£e který je n-tým potomkem svého rodi£e odzadu který je n-tým potomkem svého typu který je n-tým potomkem svého typu odzadu který je prvním potomkem svého rodi£e který je posledním potomkem svého rodi£e který je prvním potomkem svého typu který je posledním potomkem svého typu který je jediným potomkem svého rodi£e který je jediným potomkem svého typu který nemá ºádné potomky (v£etn¥ textových uzl·) jehoº jednou z t°íd je "warning" jehoº identikátorem je "myid". který neodpovídá selektoru

Pokra£ování na dal²í stran¥. . .

37

s

DODATEK B.

38

SOUHRNNÝ PEHLED CSS3 SELEKTOR

Tabulka B.1 Pokra£ování

Selektor

E E E E

F > F + F ~ F

Význam element element element element

F, F, F, F,

který je náslendíkem elementu

E

který je p°ímým potomkem elementu

E

který bezprost°edn¥ následuje za elementem který následuje za elementem

E

E

Dodatek C

Ukázková kongurace extraktoru {

delay: 1000, def: { cesky_nazev: { url: { area: ".interwiki-cs a", read: "link" }, area: "h1", read: "text" } }, url: "http://en.wikipedia.org/wiki/List_of_capitals_and_largest_cities_by_country", select: { staty: { area: "table.wikitable:eq(0) tr:has(td):lt(2)", select: { zeme: { area: "td:eq(0) a", select: { nazev: { read: "text" }, adresa: { read: "link" }, detail: { url: { read: "link" }, select: { plny_nazev: {

39

DODATEK C.

UKÁZKOVÁ KONFIGURACE EXTRAKTORU

area: ".infobox.geography .country-name", read: "text" }, cesky_nazev: { use: ["cesky_nazev"] } }, attach: "inline"

}

}

}

}

} }, attach: "single" }, mesto: { area: "td:eq(1) a", select: { nazev: { read: "text" }, adresa: { read: "link" }, detail: { url: { read: "link" }, select: { mistni_nazev: { area: ".infobox.geography .nickname:eq(0)", read: "text" }, cesky_nazev: { use: ["cesky_nazev"] } }, attach: "inline" } }, attach: "single" }

40

Dodatek D

Obsah p°iloºeného CD / |-|-|-| |-| |-| |-| `--

INSTALL.TXT README.TXT data |-- ... sample `-- mesta.htm src `-- ... text `-- bakalarska-prace.pdf xpi `-- InfoCram_1.0.xpi

postup instalace roz²í°ení soubor s popisem obsahu CD a návodem k instalaci data související s bakalá°skou prací adresá° obsahující soubor se vzorovou konfigurací soubor se vzorovou konfigurací extraktoru adresá° obsahující zdrojové soubory roz²í°ení adresá° obsahující vlastní text bakalá°ské práce text bakalá°ské práce ve formátu PDF adresá° s instala£ním balí£kem roz²í°ení instala£ní balí£ek roz²í°ení

41

Extrakce webu pomocí Mozilla Application Frameworku. Ji í Ma²ek

Recommend Documents

Nadpis

Zelený nadpis

Tento <span class="myclass">nadpis je <em>velmi d·leºitý

Definice funkce a