Real-Time Annotation View

(1)

VYSOKÉ U ˇ

CENÍ TECHNICKÉ V BRN ˇ

E

BRNO UNIVERSITY OF TECHNOLOGY

FAKULTA INFORMA ˇ

CNÍCH TECHNOLOGIÍ

ÚSTAV PO ˇ

CÍTA ˇ

COVÉ GRAFIKY A MULTIMÉDIÍ

FACULTY OF INFORMATION TECHNOLOGY

DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA

ZOBRAZOVÁNÍ ANOTACÍ V REÁLNÉM ˇ

CASE

BAKALÁ ˇ

RSKÁ PRÁCE

BACHELOR’S THESIS

AUTOR PRÁCE

PETR PAPOUŠEK

AUTHOR

(2)

(3)

VYSOKÉ U ˇ

CENÍ TECHNICKÉ V BRN ˇ

E

BRNO UNIVERSITY OF TECHNOLOGY

FAKULTA INFORMA ˇ

CNÍCH TECHNOLOGIÍ

ÚSTAV PO ˇ

CÍTA ˇ

COVÉ GRAFIKY A MULTIMÉDIÍ

FACULTY OF INFORMATION TECHNOLOGY

DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA

ZOBRAZOVÁNÍ ANOTACÍ V REÁLNÉM ˇ

CASE

REAL-TIME ANNOTATION VIEW

BAKALÁ ˇ

RSKÁ PRÁCE

BACHELOR’S THESIS

AUTOR PRÁCE

PETR PAPOUŠEK

AUTHOR

VEDOUCÍ PRÁCE

Ing. JAROSLAV DYTRYCH

SUPERVISOR

(4)

Abstrakt

Tato práce se zabývá tvorbou doplˇnku webového prohl´ıˇzeˇce Firefox, který umoˇzˇnuje zob-razen´ı anotac´ı dokumentu a jejich úprav v reálném ˇcase. D´ıky napojen´ı na 4A Framework se doplnˇek liˇs´ı od existuj´ıc´ıch doplˇnk˚u pro anotaci napˇr´ıklad moˇznost´ı spolupráce v´ıce uˇ ziva-tel˚u v reálném ˇcase a moˇznost´ı práce s vnoˇrenými anotacemi. Souˇcást´ı této práce je i návrh, implementace a testován´ı doplˇnku.

Abstract

This work is about creating an addon for Firefox web browser. Addon is able to show annotations and their modifications in real-time. Thanks to connection to 4A Framework, this addon is different from other existing annotation addons by real-time cooperation ability and capability of working with nested annotations. This work also contains concept, implementation and testing of this addon.

Kl´ıˇ

cov´

a slova

Doplnˇek, Firefox, anotace, vnoˇrená anotace, uˇzivatelské rozhran´ı, web, spolupráce, reálný ˇ

cas.

Keywords

Addon, Firefox, annotation, nested annotation, user interface, web, co-operation, real-time.

Citace

Petr Papouˇsek: Zobrazován´ı anotac´ı v reálném ˇcase, bakaláˇrská práce, Brno, FIT VUT v Brnˇe, 2011

(5)

Zobrazov´

an´ı anotac´ı v re´

aln´

em ˇ

case

Prohl´

aˇ

sen´ı

Prohlaˇsuji, ˇze jsem tuto bakaláˇrskou práci vypracoval samostatnˇe pod veden´ım pana Ing. Jaroslava Dytrycha. Uvedl jsem vˇsechny literárn´ı prameny a publikace, ze kterých jsem ˇ

cerpal.

. . . . Petr Papouˇsek 16. kvˇetna 2011

Podˇ

ekov´

an´ı

Chtˇel bych podˇekovat vedouc´ımu práce, panu Ing. Jaroslavu Dytrychovi za ˇcas vˇenovaný konzultac´ım a za rady, pˇripom´ınky a odpovˇedi, které mi pˇri práci velmi pomohly a uˇsetˇrily mnoho ˇcasu.

c

Petr Papouˇsek, 2011.

Tato práce vznikla jako ˇskoln´ı d´ılo na Vysokém uˇcen´ı technickém v Brnˇe, Fakultˇe informaˇ c-n´ıch technologi´ı. Práce je chránˇena autorským zákonem a jej´ı uˇzit´ı bez udˇelen´ı oprávnˇen´ı autorem je nezákonné, s výjimkou zákonem definovaných pˇr´ıpad˚u.

(6)

Obsah

1 Uvod´ 3 2 Anal´yza 4 2.1 Poˇzadavky. . . 4 2.2 Pojem anotace . . . 4 2.3 4A Framework . . . 4 2.4 Firefox . . . 6 2.5 Syst´em doplˇnk˚u. . . 6

2.5.1 Souˇc´asti doplˇnku Firefoxu . . . 8

3 Technologie 10 3.1 HTTP . . . 10 3.2 XPCOM . . . 11 3.3 XML . . . 11 3.4 XUL . . . 11 3.5 JavaScript . . . 12 3.6 jQuery . . . 12 3.7 Ajax . . . 12 3.8 Comet . . . 13 3.9 CSS . . . 13 3.10 DOM . . . 13 3.11 XPath . . . 13 3.12 HTML . . . 14 3.13 XHTML . . . 14 3.14 XHR . . . 14 4 N´avrh 15 4.1 Princip ˇcinnosti . . . 15 4.2 Komunikace . . . 16

4.3 Prvky uˇzivatelsk´eho rozhran´ı . . . 17

4.4 Ovládán´ı, uˇzivatelské akce . . . 19

4.5 N´avrh datov´ych struktur. . . 20

4.6 N´avrh funkˇcn´ıch blok˚u . . . 20

5 Implementace 22 5.1 N´astroje . . . 22

5.2 Prvotn´ı postup . . . 22

(7)

5.4 Implementace funkˇcn´ıch blok˚u . . . 25

5.5 V´ysledn´a podoba implementace . . . 27

6 Testov´an´ı 29 6.1 Experiment . . . 29 7 Z´avˇer 33 Literatura 34 Pˇr´ılohy 37 Seznam pˇr´ıloh. . . 38

A Ukázka strukturované anotace 39 B Protokol pro pˇrenos anotac´ı mezi klientem a serverem 41 B.1 Správa sezen´ı . . . 41

B.2 Uˇzivatel´e a skupiny . . . 42

B.3 R´ızen´ı odbˇˇ eru anotac´ı . . . 43

B.4 Synchronizace dokumentu . . . 43

B.5 Pˇrenos typ˚u anotac´ı . . . 45

B.6 Pˇrenos anotac´ı . . . 46

B.7 Nab´ızen´ı anotac´ı . . . 47

B.8 Pˇrenos nastaven´ı . . . 48

B.9 Chyby a varov´an´ı. . . 48

B.10 Potvrzen´ı bez doplˇnuj´ıc´ıch dat . . . 52

(8)

Kapitola 1

´

Uvod

V této práci se zabývám vytvoˇren´ım doplˇnku webového prohl´ıˇzeˇce Firefox pro zobrazen´ı anotac´ı webového dokumentu.

V kapitole 2 lze nalézt poˇzadavky na tento doplnˇek, seznámen´ı s 4A Frameworkem, na který doplnˇek navazuje, a informace o webovém prohl´ıˇzeˇc´ı Firefox. Souˇcást´ı této kapitoly je také úvod do problematiky systému doplˇnk˚u Firefoxu, jejich struktury, d˚uleˇzitých ˇcást´ı a zaˇclenˇen´ı do prohl´ıˇzeˇce.

Výˇcet technologi´ı, které jsou v práci vyuˇzity, základn´ı informace o nich a zd˚uvodnˇen´ı jejich volby se nacház´ı v kapitole 3.

Logiku a funkˇcnost doplˇnku, komunikaci, jeho uˇzivatelsk´e rozhran´ı, zp˚usob pr´ace s n´ım, struktury a funkˇcn´ı bloky jsem navrhl v kapitole 4.

Implementaˇcn´ı detaily, problémy, se kterými jsem se bˇehem implementace setkal, a n´ a-stroje, které jsem pouˇz´ıval, jsou popsány v kapitole5.

Postup testován´ı implementace a nástroje k tomu vyuˇzité jsou popsány v kapitole6. Zhodnocen´ı výsledk˚u práce a návrh moˇzných rozˇs´ıˇren´ı lze nalézt v kapitole 7.

(9)

Kapitola 2

Anal´

yza

V této kapitole se nacház´ı popis poˇzadavk˚u na práci a seznámen´ı s 4A Frameworkem, webovým prohl´ıˇzeˇcem Firefox a systémem jeho doplˇnk˚u.

2.1 Poˇ

zadavky

Mým úkolem bylo vytvoˇrit doplnˇek aplikace Firefox schopný zobrazovat anotace textu a je-jich úpravy na aktuálnˇe otevˇrené stránce. Tyto anotace jsou ukládány na vyhrazený server jinými aplikacemi. Komunikace s t´ımto serverem má prob´ıhat asynchronnˇe pomoc´ı techno-logie Comet, aby bylo doc´ıleno zm´ınˇeného zobrazen´ı v reálném ˇcase.

Mˇel jsem za úkol ˇcásteˇcnˇe implementovat komunikaˇcn´ı protokol serveru, který je vyv´ıjen v rámci systému pro anotován´ı webových stránek a jiných dokument˚u, kterého má být doplnˇek souˇcást´ı. Tento systém je bl´ıˇze popsán v sekci 2.3.

Anotace se zobraz´ı u anotovaného textu v samostatném objektu (napˇr´ıklad oknˇe, ˇci bub-linˇe). Vˇsechny souˇcásti anotace, jejich struktura a bliˇzˇs´ı popis viz sekce 2.3. Poˇzadavkem je také vhodné zobrazen´ı vnoˇrených a odkazovaných anotac´ı.

Anotovaný text bude viditelnˇe odliˇsen, aby mohl být rozpoznán od bˇeˇzného textu. Toto oznaˇcen´ı se bude liˇsit v závislosti na úrovni zanoˇren´ı anotace.

2.2 Pojem anotace

Pojmem anotace se obecnˇe rozum´ı poznámka (s obsahem textovým, ˇci jiného charakteru) k nˇejaké jiˇz existuj´ıc´ı práci (napˇr´ıklad ˇclánku v knize). Pojmem se m˚uˇze rozumˇet také vytváˇren´ı takovýchto poznámek.

V kontextu moj´ı práce je anotace poznámkou k webové stránce.

Vnoˇren´a anotace

Tento pojem oznaˇcuje anotaci, která má význam pouze v kontextu jiné, jiˇz existuj´ıc´ı anotace a jej´ı samostatné zobrazen´ı podává nekompletn´ı, ˇci matouc´ı informaci.

2.3 4A Framework

M˚uj doplnˇek navazuje na 4A (Annotations Anywhere, Annotations Anytime) Framework. Motivac´ı pro vznik tohoto frameworku byl nedostatek strukturovanosti metadat informac´ı

(10)

na webu a z toho vyplývaj´ıc´ı obt´ıˇznost strojového zpracován´ı. Jeho c´ılem je vytvoˇrit sys-tém, pomoc´ı nˇehoˇz bude uˇzivatel˚um umoˇznˇeno jednoduchým zp˚usobem vytváˇret anotace, a to v aplikaci, kterou znaj´ı a jsou zvykl´ı pouˇz´ıvat. T´ımto zp˚usobem chce dosáhnout zv´ y-ˇsen´ı úrovnˇe a mnoˇzstv´ı strukturovaných informac´ı o obsahu webových dokument˚u. Jeho c´ılem je také umoˇznit spolupráci prostˇrednictv´ım soubˇeˇzného anotován´ı v r˚uzných prostˇ re-d´ıch a vytvoˇrit systém nab´ızen´ı anotac´ı serverem na základˇe pˇredpokladu vhodnosti, které by uˇzivatel potom uˇz jen schvaloval s moˇznou úpravou, ˇci odm´ıtal. Od podobných projekt˚u se liˇs´ı napˇr´ıklad jednoduchou moˇznost´ı sd´ılen´ı anotac´ı, moˇznost´ı vytváˇren´ı strukturovaných anotac´ı a poˇctem typ˚u anotac´ı, který nen´ı pevnˇe daný. Koncept zahrnuje server, který ucho-vává anotace a klienty, kter´ı je zobrazuj´ı, ˇci upravuj´ı v r˚uzných prostˇred´ıch. Právˇe jedn´ım z tˇechto klient˚u je i doplnˇek do Firefoxu, který jsem vytvoˇril. Zdroj: [32].

Protokol

Protokol zahrnuje pˇrenos anotac´ı, typ˚u anotac´ı, nastaven´ı klienta a serveru, výbˇer zdroje odeb´ıraných anotac´ı, nab´ızen´ı anotac´ı a správu sezen´ı.

Detailn´ı popis protokolu je v pˇr´ılozeBa je v pln´e m´ıˇre pˇrejat z pr´ace [33] od jeho autora, pana Ing. Jaroslava Dytrycha.

Server

Server je ukázkovou implementac´ı pro ovˇeˇren´ı konceptu 4A Frameworku, jeho vývoj stále prob´ıha a funkcionalita zahrnuje:

• ukládán´ı a aktualizaci (synchronizaci, zaznamenáván´ı zmˇen) kopi´ı dokument˚u, • ukládán´ı, aktualizace a mazán´ı anotac´ı,

• spr´avu typ˚u anotac´ı,

• nab´ızen´ı jednoduchých anotac´ı (hledán´ı slov v jednoduchém slovn´ıku), • správu uˇzivatelských úˇct˚u s webovým rozhran´ım,

• správu uˇzivatelských nastaven´ı, • základn´ı komunikaci s klientem, • základn´ı práci s anotacemi. Komunikace

Komunikace se serverem prob´ıh´a pomoc´ı protokolu HTTP, a to metodou POST v pˇr´ıpadˇe pˇr´ıhlaˇsov´an´ı a synchronizace, metodou GET v pˇr´ıpadˇe Comet.

Struktura anotace

Z´aznam o anotaci obsahuje: id anotace

(11)

datum vytvoˇren´ı

typ anotace Seznam typ˚u anotac´ı je spravován serverem, lze vytváˇret i v´ıce úrovn´ı pod-typ˚u, takˇze tento seznam tvoˇr´ı stromovou hierarchii.

fragmenty Fragmentem se rozum´ı anotovaný text. Jedna anotace m˚uˇze m´ıt v´ıce frag-ment˚u, kaˇzdý z nich je identifikován pomoc´ı kombinace XPath výrazu identifikuj´ıc´ıho cestu k uzlu dokumentu, ve kterém se fragment nacház´ı, posunut´ı (offsetu) v rámci tohoto uzlu, délky anotovaného textu a samotného anotovaného textu.

samotn´y text anotace

atributy Kromˇe z´akladn´ıch typ˚u atribut˚u1, jako napˇr´ıklad datum, ˇc´ıslo ˇci text existuj´ı tak´e:

geografický bod obsahuje informace o zemˇepisné ˇs´ıˇrce a délce odkaz na jinou anotaci

vnoˇren´a anotace

Pˇresn´a struktura anotace a pˇr´ıklad jej´ı XML reprezentace viz pˇr´ıloha A.

2.4 Firefox

Firefox je webový prohl´ıˇzeˇc, který jiˇz proˇsel dlouholetým vývojem. Jeho prvn´ı verze – 0.1 – byla dokonˇcena v roce 2002 a tehdy jeˇstˇe nesla název Phoenix. Byla vytvoˇrena ˇcleny Mozilla komunity s c´ılem (v pˇrekladu)

”poskytnout nejlepˇs´ı moˇzný proˇzitek z prohl´ıˇzen´ı webových stránek pro co nejˇsirˇs´ı skupinu lid´ı“. Projekt vycházel z

”Mozilla Suite“, bal´ıku, kter´y obsa-hoval prohl´ıˇzeˇc, poˇstovn´ıho klienta a dalˇs´ı aplikace.

V roce 2003 vznikla Mozilla Foundation, nezávislá nezisková organizace, která se ujala role managementu budouc´ıho vývoje projektu.

Firefox verze 1.0 byl dokonˇcen v roce 2004 a jeho obl´ıbenost rychle rostla. V roce 2008 dosáhl 20% pod´ılu na celosvˇetovém trhu2, v roce 2011 dosáhl jiˇz 30% a v Evropˇe dokonce pˇredehnal konkurenˇcn´ı Internet Explorer3.

Komunita, která se dnes pod´ıl´ı na jej´ım vývoji, je velmi ˇsiroká, zdrojové kódy jsou otevˇrené a zapojit se m˚uˇze kaˇzdý. V souˇcasné dobˇe nejnovˇejˇs´ı je verze 4.0.1. V´ıce o historii projektu v [13].

Gecko Pomyslným srdcem Firefoxu je jeho renderovac´ı jádro Gecko. To se stará jak o zob-razen´ı uˇzivatelského rozhran´ı prohl´ıˇzeˇce a jeho doplˇnk˚u popsaného pomoc´ı jazyka XUL, tak o odpov´ıdaj´ıc´ı zobrazen´ı webových stránek.

2.5 Syst´

em doplˇ

nk˚

u

Koncept modularity a upravitelnosti je v souˇcasné dobˇe silným trendem uˇzivatelského roz-hran´ı, a to nejen webových prohl´ıˇzeˇc˚u, jako je Firefox, Internet Explorer, ˇci Opera. Se-tkáváme se napˇr´ıklad s doplˇnky hudebn´ıch pˇrehrávaˇc˚u, poˇstovn´ıch klient˚u, komunikátor˚u

1 http://www.w3schools.com/Schema/default.asp 2 http://www.tgdaily.com/trendwatch-features/40381-firefox-sails-past-20-market-share-ie-drops-below-70 3 http://aktualne.centrum.cz/ekonomika/business-ve-svete/clanek.phtml?id=687093

(12)

a spousty dalˇs´ıch program˚u. Modularita je patrná i u ˇcistˇe webových aplikac´ı, jako napˇ r´ı-klad u redakˇcn´ıho systému Wordpress4, ˇci Internetového portálu iGoogle, po jeho vzoru Seznam.cz a dalˇs´ıch.

Koncept umoˇzˇnuje pokrýt rozd´ılné poˇzadavky kladené na aplikace jejich uˇzivateli. V sou-vislost´ı s t´ımto konceptem se v prohl´ıˇzeˇci Firefox setkáváme s dvˇema pojmy, a to zásuvný modul a doplnˇek.

Z´asuvn´y modul Firefoxu

Zásuvné moduly (ˇcasto téˇz nazývané pluginy) jsou software tˇret´ıch stran, který do webo-vého prohl´ıˇzeˇce pˇridává podporu pro manipulaci s obsahem, s kterým webový prohl´ıˇzeˇc standardnˇe neum´ı pracovat. Moduly nejˇcastˇeji zajiˇst’uj´ı spolupráci s extern´ım software jako je napˇr´ıklad multimediáln´ı pˇrehrávaˇc, který zajist´ı pˇrehrán´ı videa na stránce. Pˇrejato z [31].

Doplˇnek Firefoxu

Doplˇnky (nˇekdy téˇz chybnˇe nazývané jako pluginy) jsou malé bal´ıˇcky, které umoˇzˇnuj´ı rozˇs´ıˇrit aplikace Mozilla o nové funkce, zmˇenit jejich vzhled ˇci napˇr´ıklad pˇridat podporu pro spo-lupráci s extern´ımi aplikacemi. Pˇrejato z [11].

Firefox byl jedn´ım z prvn´ıch, ne-li pˇr´ımo prvn´ı prohl´ıˇzeˇc, který velice intuitivn´ım a pro uˇ zi-vatele pˇr´ıvˇetivým zp˚usobem zavedl uˇz´ıván´ı doplˇnk˚u do praxe. Mozilla Foundation se snaˇz´ı tvorbu tˇechto doplˇnk˚u silnˇe podporovat, jak je ostatnˇe patrno i z portálu

”Centrum pro v´ y-vojáˇre doplˇnk˚u“ [5], který nab´ız´ı mnoho ˇclánk˚u pro rychlý úvod do problematiky, pˇr´ıklady, rady, návody, pˇr´ıpadové studie a dalˇs´ı uˇziteˇcné informace.

Proˇc doplnˇek

Jelikoˇz formát obsahu, který prohl´ıˇzeˇc v pˇr´ıpadˇe mé práce zobrazuje, je pro nˇej známý a mým c´ılem je pouze rozˇs´ıˇrit prohl´ıˇzeˇc o novou funkci – schopnost zobrazovat anotace – je na základˇe uvedených charakteristik zásuvného modulu a doplˇnku logické rozhodnout se pro vývoj doplˇnku.

Existuj´ıc´ı anotaˇcn´ı doplˇnky firefoxu

Doplˇnk˚u umoˇzˇnuj´ıc´ıch anotaci webových stránek je v´ıce a kaˇzdý z nich se svým pˇr´ıstupem k problému trochu liˇs´ı, a to napˇr´ıklad v tˇechto oblastech:

• Forma – jak´ymi zp˚usoby lze anotaci vytvoˇrit • Grafick´a reprezentace

• Zp˚usob uloˇzen´ı, sd´ılen´ı a spolupr´ace

Awesome Screenshot umoˇzˇnuje vytvoˇrit sn´ımek obrazovky, ˇci jej´ı ˇcásti a ten potom anotovat pomoc´ı grafických primitiv a textu. Návaznost na anotovaný text vycház´ı ˇcistˇe z obrazového rozpoznán´ı. Uloˇzen´ı takto vytvoˇreného souboru je potom lokáln´ı, ˇci na vyhra-zeném serveru.

4

(13)

FloatNotes umoˇzˇnuje vytváˇret poznámky, které se zobrazuj´ı nad anotovanou stránkou. V této poznámce lze vyuˇz´ıt HTML a vkládat obrázky. Poznámky se váˇzou k adresám str´ a-nek, na kterých se zobrazuj´ı, nikoli pˇr´ımo k textu. Uloˇzen´ı je lokáln´ı, doplnˇek neumoˇzˇnuje spolupráci v´ıce uˇzivatel˚u.

Edit and Note ukládá lokáln´ı kopii anotované stránky. Anotace jsou vkládány na úrovni kódu stránky, doplnˇek manipuluje s HTML elementy a jejich atributy. Pro tento úˇcel nab´ız´ı doplnˇek sv˚uj editor, který má tuto práci usnadnit.

Vˇsechny uveden´e doplˇnky jsou dostupn´e na serveru Mozilla doplˇnk˚u5.

D´ıky napojen´ı na 4A Framework se m˚uj doplnˇek liˇs´ı od uvedených pˇr´ıklad˚u napˇr´ıklad moˇznost´ı spolupráce v´ıce uˇzivatel˚u v reálném ˇcase, moˇznost´ı práce s vnoˇrenými anotacemi a zpracován´ım strukturovaných anotac´ı.

2.5.1 Souˇc´asti doplˇnku Firefoxu

Zde je popsána skladba doplˇnku, zp˚usob adresován´ı, který pouˇz´ıvá, zp˚usob zaˇclenˇen´ı do pro-hl´ıˇzeˇce a jeho d˚uleˇzité souˇcásti.

Skladba

Skladba doplˇnku je navrˇzena tak, aby umoˇzˇnovala:

• Snadn´e zaˇclenˇen´ı do prohl´ıˇzeˇce a definici funkˇcnosti (sekce content, obsahuje XUL a JavaScript soubory)

• Jednotn´y pˇr´ıstup k lokalizaci (sekce locale, obsahuje soubory s ˇretˇezci pro lokalizaci uˇzivatelsk´eho rozhran´ı)

• Správu vzhledu (sekce skin, obsahuje CSS soubory upravuj´ıc´ı vzhled uˇzivatelského rozhran´ı a obrázky)

Chrome URI

Adresa k soubor˚um doplˇnku je tvoˇrena

”Chrome URI“, která má formát: chrome://název_doplˇnku/sekce/cesta_k_souboru_v_sekci.

Adresa zaˇc´ıná chrome, aby prohl´ıˇzeˇc vˇedˇel, ˇze se jedná o Chrome URI. Název_doplˇnku by mˇel být unikátn´ı pro kaˇzdý doplnˇek, aby nedoˇslo ke koliz´ım. Sekce byly popsány výˇse, tedy content, locale, ˇci skin. Pˇr´ıkladem Chrome URI m˚uˇze být tedy napˇr´ıklad chrome://mujdoplnek/skin/obrazek.png. Pomoc´ı Chrome URI jsem adresoval XUL sou-bory, soubory se zdrojovými kódy jazyka JavaScript a obrázky.

Zaˇclenˇen´ı do prohl´ıˇzeˇce

Je prov´adˇeno na z´akladˇe soubor˚u typu

”Overlay“, tedy v pˇrekladu pˇrekryt´ı. Jsou to XUL soubory, které popisuj´ı prvky uˇzivatelského rozhran´ı, které maj´ı být vloˇzeny do uˇ zivatel-ského rozhran´ı prohl´ıˇzeˇce. Kromˇe pˇridáván´ı nových prvk˚u umoˇzˇnuj´ı také úpravu, ˇci zno-vupouˇz´ıt´ı prvk˚u stávaj´ıc´ıch. Pomoc´ı nich je tedy moˇzné napˇr´ıklad pˇridat poloˇzku do kon-textové nab´ıdky, ˇci ikonu doplˇnku do stavové liˇsty [3,30].

5

(14)

Soubor

”chrome.manifest“

Tento soubor se nacház´ı v koˇrenovém adresáˇri doplˇnku a jeho funkc´ı je registrace obsahu doplˇnku v sekc´ıch popsaných výˇse. Do tohoto souboru nahl´ıˇz´ı správce doplˇnk˚u Firefoxu a umoˇzˇnuje uˇzivateli zvolit napˇr´ıklad z v´ıce jazykových lokalizac´ı, ˇci vzhled˚u registrova-ných t´ımto souborem. Pokud je doplnˇek urˇcen i pro jiné aplikace, neˇz Firefox (napˇr´ıklad Thunderbird), je moˇzno pomoc´ı souboru chrome.manifest urˇcit, který popis uˇzivatelského rozhran´ı se má pro danou aplikaci pouˇz´ıt [3].

Soubor

”install.rdf“

Tento soubor se také nacház´ı v koˇrenovém adresáˇri doplˇnku a obsahuje souhrnné infor-mace o doplˇnku, jako jméno doplˇnku, id, verzi, jméno autora, Chrome URI dialogu nasta-ven´ı, verze aplikac´ı, pro které je doplnˇek urˇcen, a dalˇs´ı. Zm´ınˇené id doplˇnku má formát e-mailové adresy, která vˇsak nemus´ı skuteˇcnˇe existovat. Id by mˇelo být unikátn´ı a nesho-dovat se tak s ˇzádným jiˇz existuj´ıc´ım doplˇnkem [3].

(15)

Kapitola 3

Technologie

Technologie, které Firefox a jeho doplˇnky vyuˇz´ıvaj´ı, a to, jaký je mezi nimi vztah, je zn´ a-zornˇeno na obrázku 3.1 a bl´ıˇze popsáno v ˇclánku [6], ze kterého obrázek pocház´ı. Vyuˇzit´ı technolog´ı XPCOM, XUL, JavaScript a CSS bylo tedy povinné.

Technologie Ajax a Comet jsem zvolil pro dodrˇzen´ı poˇzadavku na zobrazen´ı anotac´ı a jejich úprav v reálném ˇcase.

Protokol HTTP a jazyky XML, XPath a XHTML jsou vyuˇz´ıvány systémem 4A Fra-mework, na který doplnˇek navazuje, proto jejich pouˇzit´ı bylo nutné.

Obrázek 3.1: Technologická provázanost prohl´ıˇzeˇce Firefox a jeho doplˇnk˚u

3.1 HTTP

HTTP (HyperText Transfer Protocol) je protokol aplikaˇcn´ı vrstvy s´ıt’ov´eho modelu TCP/IP (v´ıce v [38]) vyuˇz´ıvan´y pro pˇrenos

”zdroj˚u“ po Internetu. T´ımto”zdrojem“ je soubor, ˇci jiná reprezentace dat identifikovatelná pomoc´ı URL (Unique Resource Locator je zp˚usob, jak lze jednoznaˇcnˇe zapsat um´ıstˇen´ı souboru v poˇc´ıtaˇcové s´ıti. V´ıce viz1). Komunikace je zaloˇzena

(16)

na architektuˇre klient-server. Klient, nejˇcastˇeji webový prohl´ıˇzeˇc (ale i jakýkoli jiný pro-gram), vytvoˇr´ı poˇzadavek a odeˇsle ho serveru, který ˇzádost zpracuje a poˇsle klientovi od-povˇed’. Pokud je tedy napˇr´ıklad klientem webový prohl´ıˇzeˇc, vyˇzádá si od serveru webovou stránku, kterou chce uˇzivatel zobrazit. Komunikace je bezstavová – po odpovˇedi na poˇ za-davek si server neuchovává informaci o probˇehlém spojen´ı. Kaˇzdá HTTP zpráva obsahuje hlaviˇcku a m˚uˇze obsahovat data. V hlaviˇcce poˇzadavku se nacház´ı informace o verzi pro-tokolu, metodˇe poˇzadavku, poˇzadovaném zdroji a dalˇs´ı. Odpovˇed’ obsahuje v hlaviˇcce ˇc´ıslo odpovˇedi a m˚uˇze obsahovat poˇzadovaná data. Existuj´ı tˇri metody poˇzadavk˚u – GET, POST a HEAD. Poˇzadavek metody GET neobsahuje data, pokud je tˇreba pˇredat nˇejaké informace serveru, dˇeje se tak pˇridán´ım do URL – jsou tak veˇrejnˇe ˇcitelné. HEAD se od GET liˇs´ı pouze t´ım, ˇze v odpovˇedi serveru neˇzádá data, pouze hlaviˇcku. Poˇzadavek metody POST obsa-huje data, která jsou ˇcasto na stranˇe serveru zpracovávána programem, ˇci skriptem urˇceným v hlaviˇcce. Aktuáln´ı verz´ı HTTP je 1.1. [37]

3.2 XPCOM

XPCOM (Cross Platform Component Object Model) je meziplatformn´ı objektový model komponent podobný Microsoft COM2. Má nˇekolik zp˚usob˚u propojen´ı s r˚uznými programo-vac´ımi jazyky, d´ıky kterým lze XPCOM komponenty pouˇz´ıt a implementovat nejen v C++3 (ve kterém je XPCOM psán), ale i v jazyce JavaScript, Java4_{a Python}5_{. D˚}_uleˇ_zit´_{ym pojmem}

je v t´eto problematice

”rozhran´ı“, které je definováno pomoc´ı XPIDL (XPCOM Interface Description Language) 6. Rozhran´ı popisuj´ı pˇr´ıstup k XPCOM objekt˚um. XPCOM nab´ız´ı sadu komponent a tˇr´ıd jádra, jako napˇr´ıklad správu soubor˚u a pamˇeti, vlákna, základn´ı datové struktury (ˇretˇezec, pole, . . . ) atd. Vˇetˇsina komponent, ke kterým lze d´ıky XPCOM pˇristoupit, vˇsak nejsou pˇr´ımo jeho souˇcást´ı, ale mohou pocházet napˇr´ıklad od jádra Gecko, jiné aplikace ˇci doplˇnku [28].

3.3 XML

XML (Extensible Markup Language) je znaˇckovac´ı jazyk se ˇsirokým vyuˇz´ıt´ım. Je spravo-vaný organizac´ı W3C a jeho návrh byl prezentován v roce 1996 na konferenci v Bostonu a od té doby jeho popularita rychle rostla. Jeho znaˇcky nejsou pˇredem definované, ˇc´ımˇz umoˇzˇnuje popisovat spoustu odliˇsných typ˚u dat. Jeho primárn´ım c´ılem je usnadnit sd´ılen´ı a pˇrenos tˇechto dat mezi r˚uznými systémy, obzvláˇstˇe systémy komunikuj´ıc´ımi pˇres Inter-net. Mezi jazyky, které vznikly na jeho základˇe, patˇr´ı i jazyk XUL, který v práci vyuˇz´ıvám. V jazyce XML je implementován i protokol pro komunikaci doplˇnku se serverem. Zdroj: [25].

3.4 XUL

XUL (XML User Interface Language, v´yslovnost

”zool“) je jazyk zaloˇzený na XML, který byl vyvinut spoleˇcnost´ı Mozilla pro jednoduchou tvorbu uˇzivatelského rozhran´ı. Umoˇzˇnuje

2 http://www.microsoft.com/com/default.mspx 3 http://www.cplusplus.com/ 4 http://www.java.com/ 5 http://www.python.org/ 6_{https://developer.mozilla.org/en/XPIDL}

(17)

vytváˇret aplikace nezávislé na operaˇcn´ım systému, které ke svému bˇehu nepotˇrebuj´ı In-ternet, ale mohou s n´ım samozˇrejmˇe pracovat. Pomoc´ı tohoto jazyka vˇsak nelze vytváˇret vlastn´ı funkˇcnost aplikace, ale pouze jej´ı vzhled. Vˇetˇsina prvk˚u potˇrebných pro tvorbu uˇ zi-vatelského rozhran´ı (jako napˇr´ıklad r˚uzná textová pole, tlaˇc´ıtka, panely nástroj˚u, menu, stromové struktury, tabulky a klávesové zkratky aj.) uˇz je pˇredchystána a staˇc´ı je jed-noduˇse pouˇz´ıt a pomoc´ı atribut˚u je upravit podle své potˇreby. Jazyk také zjednoduˇsuje lokalizaci aplikace. V jazyce XUL je psáno uˇzivatelské rozhran´ı Firefoxu, Thunderbirdu a jejich doplˇnk˚u. V tˇechto pˇr´ıpadech se vyuˇz´ıvá vykreslovac´ıho jádra Gecko. Vice v [29].

3.5 JavaScript

JavaScript, jehoˇz autorem je Brendan Eich, je v souˇcasné dobˇe jedn´ım z nejrozˇs´ıˇrenˇejˇs´ıch skriptovac´ıch jazyk˚u7 na Internetu. Aˇckoli je pro zm´ınˇený úˇcel vyuˇz´ıván nejv´ıce, je navrˇzen obecnˇeji a je vyuˇzitelný i jako serverový jazyk, ˇci jazyk pro tvorbu desktopových aplikac´ı. Je podporován vˇsemi v souˇcasné dobˇe nejrozˇs´ıˇrenˇejˇs´ımi webovými prohl´ıˇzeˇci, jako je Firefox, Chrome, Opera, a Safari. Jeho podpora prohl´ıˇzeˇcem Internet Explorer je pouze ˇcásteˇcná (jeho hlavn´ım skriptovac´ım jazykem je jScript8_{). Byl navrˇ}_{zen proto, aby dodal interaktivitu}

do webových stránek, a to zejména pomoc´ı reakc´ı na r˚uzné události. Umoˇzˇnuje také napˇ r´ı-klad manipulaci s dokumentem, validaci dat pˇred odeslán´ım na server, detekci uˇzivatelova prohl´ıˇzeˇce a dalˇs´ı. O sandardizaci JavaScriptu se stará asociace Ecma9_{, odpov´ıd´}_{a mu}

stan-dard ECMA-262 (nejnovˇejˇs´ı vydán´ı 5). V tuto chv´ıli nejnovˇejˇs´ı verz´ı Javascriptu je 1.8.5. V mé práci – stejnˇe jako ve vˇsech ostatn´ıch doplˇnc´ıch firefoxu – zastává JavaScript primárn´ı funkˇcnost a jeho schopnosti a práva jsou jeˇstˇe rozˇs´ıˇreny pomoc´ı XPConnect. Zdroj: [17,16]. V´ıce se lze doˇc´ıst také na webu autora [34] a v [42].

3.6 jQuery

Jedná se o knihovnu jazyka JavaScript, nezávislou na prohl´ıˇzeˇci, která zjednoduˇsuje úpravu HTML dokumentu, oˇsetˇren´ı událost´ı, animaci a komunikaci pomoc´ı technologie Ajax a na-pomáhá tak k rychlejˇs´ımu vývoji webových aplikac´ı. Jej´ım heslem je

”piˇs m´enˇe, udˇelej v´ıce“ a autoˇri tvrd´ı, ˇze je navrˇzena tak, aby

”zmˇenila zp˚usob, jakým p´ıˇsete JavaScript“ [18]. Verze 1.5 byla v dobˇe implementace aktuáln´ı stabiln´ı verz´ı. Knihovnu vyuˇz´ıvám kv˚uli jej´ım vhod-ným funkc´ım a selektor˚um, které zjedoduˇsuj´ı práci s DOM modelem, a to jak dokumentu zobrazované stránky, tak XUL dokumentu doplˇnku. Dále ji také pouˇz´ıvám pro komunikaci pomoc´ı technologie Ajax. V´ıce o jQuery v [40].

3.7 Ajax

Název Ajax vznikl spojen´ım slov Asynchronn´ı JavaScript a XML. Jedná se o pˇr´ıstup, který je zaloˇzen na technologi´ıch: JavaScript, XHR, CSS, DOM a dalˇs´ıch. Byl definován panem Jesse James Garrettem v roce 2005. Je to platforma, architektura, která spojuje zm´ınˇené technologie, aby dosáhla rozˇs´ıˇren´ı komunikaˇcn´ıho klient-server modelu, rozˇs´ıˇren´ı moˇznost´ı

7

skriptovac´ı jazyky b´yvaj´ı vˇetˇsinou interpretov´any a nepotˇrebuj´ı tedy pˇredchoz´ı kompilaci pro sv˚uj bˇeh, coˇz umoˇzˇnuje vˇetˇs´ı dynamiˇcnost a upravitelnost za bˇehu.

8

http://msdn.microsoft.com/en-us/library/hbxc2t98(v=VS.85).aspx

9

(18)

komunikace webových aplikac´ı, sn´ıˇzen´ı ˇcekac´ı doby klienta a t´ım také vyˇsˇs´ı úrovnˇe inter-akce mezi uˇzivatelem a webovou aplikac´ı. Zavád´ı sebe, jako vrstvu mezi uˇzivatele a server. Poˇzadavky od uˇzivatele ˇreˇs´ı bud’ sám, nebo se na nˇe dotazuje serveru, ale asynchronnˇe. V mé práci jsem jej vyuˇzil pro komunikaci doplˇnku se serverem. Pˇri popisu technologie jsem vycházel z ˇclanku autora tohoto pojmu [35].

3.8 Comet

Comet umoˇzˇnuje událostmi ˇr´ızený pˇrenos dat ze strany serveru ke klientovi. Jedná se o asyn-chronn´ı komunikaci a vyuˇz´ıvá se pˇri n´ı dlouho trvaj´ıc´ıch HTTP spojen´ı. Nejedná se o to, ˇ

ze by byl serveru pravidelnˇe, ˇci nepravidelnˇe pˇredkládán poˇzadavek (klasický polling), ale o to, ˇze klient serveru poˇsle poˇzadavek, na který server odpov´ı aˇz ve chv´ıli, kdy zná od-povˇed’ nebo potˇrebuje klientovi nˇeco sdˇelit. Takto se klient dostane k poˇzadovaným dat˚um ve správný ˇcas a jediné zpoˇzdˇen´ı tedy plyne ze samotné komunikace po s´ıti a ne z doby, která by uplynula, neˇz by zaˇzádal o data, která uˇz jsou na serveru pˇripravena. Comet tak usnad-ˇ

nuje spolupráci v´ıce uˇzivatel˚u. Kdyˇz jeden uˇzivatel uˇcin´ı nˇejakou zmˇenu (napˇr´ıklad vytvoˇr´ı novou anotaci), server o této zmˇenˇe informuje okamˇzitˇe vˇsechny uˇzivatele, kterých se tato událost týká, protoˇze jejich poˇzadavek stále eviduje a jeˇstˇe na nˇej dosud neodpovˇedˇel. Právˇe pro tento úˇcel je Comet vyuˇz´ıván v mé práci. V´ıce v ˇclánku autora pojmu [39].

3.9 CSS

Kaskádové styly (Cascading Style Sheets) byly vytvoˇreny W3C (World Wide Web Consor-tium). Definuj´ı, jak maj´ı být zobrazeny jednotlivé HTML elementy webové stránky. Umoˇ z-ˇ

nuj´ı napˇr´ıklad úpravu fontu, barvy, odsazen´ı atd. Správa tˇechto vlastnost´ı vzhledu je d´ıky kaskádovým styl˚um umoˇznˇena jednotnˇe, coˇz je mnohem ménˇe namáhavé, neˇz definován´ı vzhledu u kaˇzdého elementu. Kaskádové styly jsou nyn´ı podporovány vˇsemi nejrozˇs´ıˇrenˇ ej-ˇs´ımi webovými prohl´ıˇzeˇci. Aktuáln´ı verz´ı je 2.1 a verze 3 je ve vývoji [4]. Pomoc´ı kaskádových styl˚u je definován vzhled uˇzivatelského prostˇred´ı FireFoxu a jeho doplˇnk˚u. V mé práci jsou vyuˇzity i pro podbarven´ı anotovaného textu ve webové stránce [9].

3.10 DOM

DOM (Document Object Model) je programovac´ı rozhran´ı pro HTML a XML dokumenty. Poskytuje strukturovanou reprezentaci dokumentu a definuje zp˚usob, jakým m˚uˇze progra-mátor k této reprezentaci pˇristoupit, aby zmˇenil obsah dokumentu, jeho strukturu, nebo styl. Tato reprezentace je plnˇe objektovˇe orientovaná a je tvoˇrena uzly a objekty, které maj´ı své vlastnosti a metody. DOM je poj´ıtkem mezi webovou stránkou a programovac´ım jazy-kem, jako je tˇreba JavaScript [12]. Aktuáln´ı verze DOM je oznaˇcována

”Level 3“ [10]. DOM pouˇz´ıvám pro pˇr´ıstup k zobrazené webové stránce, XUL element˚um doplˇnku a pˇri parsován´ı XML protokolu.

3.11 XPath

Primárn´ı funkc´ı XPath je adresován´ı ˇcást´ı XML dokumentu. Odtud také pocház´ı jeho název, protoˇze zachycuje

”cestu“ (anglicky”path“) skrze hierarchickou strukturu XML dokumentu. Nav´ıc také poskytuje základn´ı funkce pro manipulaci s ˇretˇezci, ˇc´ısly a logickými hodnotami.

(19)

Pouˇz´ıvá kompaktn´ı syntaxi pro usnadnˇen´ı uˇzit´ı XPath jako souˇcást URI a práci s hodnotami XML atribut˚u. Podporuje také práci se jmennými prostory. Cesta zapsaná t´ımto jazykem se oznaˇcuje jako

”XPath v´yraz“ a jeho vyhodnocen´ım nad XML dokumentem lze oznaˇcit sadu uzl˚u, logickou hodnotu, ˇc´ıslo, ˇci ˇretˇezec. Souˇcasn´a je verze 1.0. V´ıce se lze doˇc´ıst v doporuˇcen´ı W3C z roku 1999 [26].

3.12 HTML

HTML (HyperText Markup Language) je znaˇckovac´ım jazykem pro tvorbu webových str´ a-nek. Znaˇcky tohoto jazyka jsou kl´ıˇcová slova uzavˇrená do úhlových závorek. Existuj´ı párové a nepárové znaˇcky. Pokud jsou znaˇcky párové, znamená to, ˇze maj´ı poˇcáteˇcn´ı a konco-vou znaˇcku, která obsahuje pˇred kl´ıˇcovým slovem znak

”/“. Nepárové znaˇcky nevyˇzaduj´ı uveden´ı koncové znaˇcky. Významem tˇechto znaˇcek se ˇr´ıd´ı webový prohl´ıˇzeˇc pˇri zobrazo-ván´ı stránky. Prohl´ıˇzeˇce jsou ˇcasto schopny zobrazit i tzv.

”nevalidn´ı“ webové stránky, tedy stránky, jejichˇz HTML kód nesplˇnuje specifikaci jazyka. Aktuáln´ı stabiln´ı verz´ı je 4.01, verze 5 je v pokroˇcilé fázi vývoje [14,36].

3.13 XHTML

XHTML (eXtensible HyperText Markup Language) je HTML definované pomoc´ı XML. Je témˇeˇr identické s HTML verze 4.01 a je s n´ım kompatibiln´ı. Zjednoduˇsenˇe ˇreˇceno je XHTML striktnˇejˇs´ı a ˇc´ıstˇejˇs´ı verz´ı HTML, a to t´ım, ˇze nedovoluje ˇspatné formátován´ı dokumentu, jako napˇr´ıklad neukonˇcené párové znaˇcky, r˚uznou velikost p´ısmen v názvech znaˇcek a atribut˚u a dalˇs´ı. Dodrˇzován´ı tˇechto pravidel výraznˇe sniˇzuje nároˇcnost zobrazen´ı, ˇ

ci zpracován´ı webové stránky. XHTML je podpororováno vˇsemi souˇcasnými webovými pro-hl´ıˇzeˇci. Aktuáln´ı verz´ı je 1.1 [23,24].

Stránky, které jsou pos´ılány 4A Framework serveru k synchronizaci, mus´ı být validn´ımi XHTML stránkami.

3.14 XHR

XHR – XMLHttpRequest je objektem jádra skriptovac´ıho jazyka, který umoˇzˇnuje skriptu fungovat jako HTTP klient a provádˇet akce jako napˇr´ıklad nahráván´ı dat ze serveru, ˇci ode-s´ılán´ı dat z formuláˇre. Název XMLHttpRequest je zavádˇej´ıc´ı hned ze tˇr´ı d˚uvod˚u. Zaprvé je podporována práce s jakýmkoli textovým formátem, ne jen s XML. Zadruhé komunikace neprob´ıhá pouze pomoc´ı protokolu HTTP, ale i HTTPS (nˇekteré implementace dovoluj´ı i dalˇs´ı). Zatˇret´ı, objekt obsluhuje nejen poˇzadavky (request), ale i odpovˇedi. XHR je vyu-ˇ

(20)

Kapitola 4

N´

avrh

V této kapitole navrhnu nejdˇr´ıve logiku ˇcinnosti doplˇnku, poté prvky uˇzivatelského rozhran´ı, na nˇe navazuj´ıc´ı uˇzivatelské akce, které bude moci uˇzivatel provádˇet, datové struktury odpov´ıdaj´ıc´ı potˇrebným prvk˚um a nakonec funkˇcn´ı bloky, které budou implementovány.

Pojmy

Nyn´ı uvedu pˇrednostnˇe pojmy, které budu dále v dokumentu pouˇz´ıvát.

pracovn´ı dokument dokument, který je zobrazen v záloˇzce prohl´ıˇzeˇce v dobˇe pˇrihláˇsen´ı, jehoˇz obsah bude synchronizován. V tomto dokumentu budou také anotace zobrazo-vány.

id zdroje identifikaˇcn´ıˇretˇezec, pod kterým server vede pracovn´ı dokument ve své databázi. bublina objekt, který bude obsahovat poˇzadované informace o anotaci.

fragment anotovan´y text

4.1 Princip ˇ

cinnosti

Logický princip ˇcinnosti je pro ilustraci demonstrován na obrázku 4.1.

1. Uˇzivatel nejdˇr´ıve specifikuje adresu anotaˇcn´ıho serveru. Spr´avnost adresy se vˇsak v tomto bodˇe ovˇeˇrovat nebude.

2. Pˇrihlás´ı se (viz sekce 4.4) a pokud je zadaná adresa serveru správná a uˇzivatel za-dal správné pˇrihlaˇsovac´ı údaje (jméno a heslo), dojde k navázán´ı spojen´ı a pˇrejde se ke kroku 3. Pokud adresa, ˇci pˇrihlaˇsovac´ı údaje správné nebudou, bude o tom uˇ zi-vatel odpov´ıdaj´ıc´ım zp˚usobem informován a v ˇcinnosti se nebude dále pokraˇcovat. 3. Bez dalˇs´ıho potˇrebného uˇzivatelského zásahu dojde k synchronizaci pracovn´ıho

doku-mentu.

4. Data z´ıskaná pˇri synchronizaci budou zpracována a anotace uloˇzeny do odpov´ıdaj´ıc´ı datové struktury.

(21)

Pˇrihl´aˇsen´ı

Synchronizace dokumentu

Comet

Pˇrid´an´ı anotace

Pokraˇcovat? Konec Timeout Zmˇena zobr. dokumentu -´

Uprava, maz´an´ı anotace Konec ? ´ uspˇeˇsn´e ? ? ? ? - ? ne ?

ne´uspˇeˇsn´e

?

ano

Obr´azek 4.1: Princip ˇcinnosti

6. Uˇzivatel si bude moci anotace prohl´ıˇzet, pˇriˇcemˇz na pozad´ı bude dále prob´ıhat komu-nikace se serverem a pˇr´ıpadné zmˇeny se okamˇzitˇe prom´ıtnou do pracovn´ıho dokumentu. 7. Pokud se uˇzivatel rozhodne pro zobrazen´ı jiného pracovn´ıho dokumentu, dojde k syn-chronizaci tohoto nového dokumentu a zobrazen´ı jeho anotac´ı, jak bylo popsáno v bo-dech 3 – 5.

8. V pˇr´ıpadˇe, ˇze uˇzivatel jiˇz nebude cht´ıt nadále zobrazovat anotace, klikne na ikonu ve stavové liˇstˇe a pracovn´ı dokument se navrát´ı do p˚uvodn´ıho stavu. Dalˇs´ı Comet poˇzadavky se tedy jiˇz nebudou pos´ılat.

4.2 Komunikace

Z komunikaˇcn´ıho protokolu serveru, zmiˇnovaného v sekci2.3, budou implementovány ty ˇcásti, které jsou potˇrebné pro funkˇcn´ı zobrazen´ı anotac´ı, jejich úpravu a mazán´ı. Tyto ˇcásti jsou: Správa sezen´ı Pˇrihláˇsen´ı probˇehne metodou POST, protoˇze je v rámci této zprávy za-s´ıláno uˇzivatelské jméno a heslo. V pˇr´ıpadˇe správných pˇrihlaˇsovac´ıch údaj˚u server v odpovˇedi sdˇel´ı ˇc´ıslo spojen´ı, které se bude pouˇz´ıvat pˇri dalˇs´ı komunikaci se serve-rem. V opaˇcném pˇr´ıpadˇe bude server o nesprávných pˇrihlaˇsovac´ıch údaj´ıch informovat chybovým hláˇsen´ım dle protokolu.

(22)

Synchronizace Synchronizace dokumentu je proces, pˇri kterém server z´ıská kopii aktuáln´ı verze anotovaného dokumentu. Server se tento dokument pokus´ı vyhledat ve své da-tabázi a pokud jej nenalezne, uloˇz´ı si jej. V obou pˇr´ıpadech (nalezen´ı, ˇci nenalezen´ı) vˇsak vrát´ı klientovi id zdroje. Synchronizace bude prob´ıhat metodou POST a odpovˇed’ serveru bude obsahovat také anotace pracovn´ıho dokumentu.

Pˇrenos anotac´ı Probˇehne v odpovˇedi na synchronizaci dokumentu, dále potom bude pro-b´ıhat pomoc´ı technologie Comet, která bude vyuˇz´ıvat HTTP metodu GET, kde je-diným parametrem bude ˇc´ıslo spojen´ı. Na základˇe odpovˇed´ı serveru na Comet poˇ za-davky bude docházet k pˇridáván´ı, úpravˇe, ˇci mazán´ı anotac´ı.

Chyby a varován´ı Chyby, na které server upozorn´ı, budou zobrazeny uˇzivateli ve srozu-mitelném formátu. Z tohoto formátu bude patrné ˇc´ıslo chyby, ke které doˇslo, a popis této chyby.

Potvrzen´ı bez doplˇnuj´ıc´ıch dat Odpovˇed’ obsahuj´ıc´ı pouze <ok/> bude zas´ıl´ana serve-rem v pˇr´ıpadˇe vyprˇsen´ı ˇcasov´eho limitu Comet spojen´ı a v reakci na n´ı doplnˇek zaˇsle dalˇs´ı poˇzadavek.

4.3 Prvky uˇ

zivatelsk´

eho rozhran´ı

Nyn´ı pop´ıˇsu prvky uˇzivatelského rozhran´ı, které budou odpov´ıdat doposud navrˇzené funk-cionalitˇe.

Bublina zobrazuj´ıc´ı informace o anotaci

Kaˇzdá jedna bublina (jej´ıˇz návrh je na obrázku 4.2) bude obsahovat informace o jedné anotaci, a to:

jm´eno autora

datum vytvoˇren´ı ve form´atu

”RRRR-MM-DD HH:MM“, tedy napˇr´ıklad”2011-04-18 17:15“ typ anotace ve form´atu

”typ -> podtyp“ samotn´y text anotace

atributy bˇeˇzn´ych typ˚u, jako ˇretˇezec, ˇc´ıslo a datum budou zobrazeny ve form´atu

”název atributu = hodnota“. Existuj´ı vˇsak také speciáln´ı typy:

geografick´y bod bude zobrazen ve form´atu

”název atributu = (Geo: ˇs´ıˇrka, délka)“ odkazovaná anotace, vnoˇrená anotace budou zobrazeny ve formátu

”n´azev atri-butu(aLink)“ v pˇr´ıpadˇe odkazovan´e a

”název atributu(Nested)“ v pˇr´ıpadˇe vno-ˇrené anotace. Pokud nebude anotace v pracovn´ım dokumentu nalezena, bude tato skuteˇcnost signalizována pˇr´ıponou

”(not found)“ v popisku tohoto atributu. Pˇri implementaci bude potˇreba brát v úvahu také to, ˇze bublina mus´ı z˚ustat zobrazená, pokud by uˇzivatel chtˇel napˇr´ıklad oznaˇcit v n´ı zobrazený text, nebo kliknul nˇekam mimo ni. Poˇzadavkem bude také ukotven´ı k anotovanému textu.

(23)

Obrázek 4.2: Návrh bubliny zobrazené u anotovaného textu.

Volba vhodného elementu Moˇzných zp˚usob˚u implementace bubliny je v´ıce. V úvahu pˇricház´ı napˇr´ıklad samostatné okno, nápovˇedné okna ˇci jiné zp˚usoby zobrazen´ı, bl´ıˇze roze-psány v ˇclanku [20]. Rozhodl jsem se pro XUL element panel, protoˇze nab´ız´ı ukotven´ı pˇr´ımo k elementu dokumentu, zp˚usob jeho zobrazen´ı nep˚usob´ı ruˇsivˇe a s uveden´ım odpov´ıdaj´ıc´ıho parametru nezmiz´ı, pokud je kliknuto mimo nˇej.

Vyznaˇcen´y text

Kaˇzd´y vyznaˇcen´y text bude odpov´ıdat fragmentu anotace.

Poˇzadavek na odliˇsen´ı anotovaného textu bude ˇreˇsen ˇzlutým podbarven´ım. Fragmenty anotace prvn´ı úrovnˇe zanoˇren´ı budou podbarveny oranˇzovˇe a fragmenty anotac´ı druhé a vyˇsˇs´ı úrovnˇe zanoˇren´ı budou podbarveny ˇcervenˇe.

Anotovaný text vnoˇrené anotace bude viditelnˇe oznaˇcen pouze tehdy, bude-li zobrazena jeho nadˇrazená anotace.

Vyznaˇcen´ı v dokumentu Anotovaný text bude ve stránce vyznaˇcen na základˇe XPath výrazu identifikuj´ıc´ıho cestu k uzlu dokumentu, ve kterém se fragment nacház´ı, posunut´ı (offsetu) v rámci tohoto uzlu a délky anotovaného textu.

Komunikace mezi priviligovaným a nepriviligovaným obsahem Priviligova-ným obsahem je kód prohl´ıˇzeˇce a jeho doplˇnk˚u, nepriviligovaným obsahem jsou zobrazené webové stránky a jejich kód. Doplnˇek mus´ı být informován o tom kdy a kde má zobrazit bublinu. Kdyby mˇel vˇsak nepriviligovaný obsah pˇr´ıstup k funkc´ım priviligovaného obsahu, vzniklo by tak veliké bezpeˇcnostn´ı riziko. Potˇreba komunikace mezi tˇemito obsahy vˇsak z˚ustává.

Na základˇe ˇclánk˚u [8,15] jsem se rozhodl pro vyuˇzit´ı systému zas´ılan´ı událost´ı, protoˇze vyhovuje mým poˇzadavk˚um a je bezpeˇcný. Zpracován´ı událost´ı zas´ılaných neprivilegova-ným obsahem nen´ı implicitnˇe povoleno, ale v pˇr´ıpadˇe Firefoxu lze u konkrétn´ıch událost´ı toto zpracován´ı povolit. Tento pˇr´ıstup je doporuˇcovaným zp˚usobem komunikace s neprivi-legovaným obsahem.

Komunikace bude prob´ıhat tak, ˇze v pˇr´ıpadˇe najet´ı kurzorem myˇsi na vyznaˇcen´y text, ˇ

ci jeho opuˇstˇen´ı a v pˇr´ıpadˇe kliknut´ı na nˇej bude prvkem implementuj´ıc´ım anotovaný text odeslána zpráva o této události. Jej´ı souˇcást´ı bude i identifikace anotovaného textu, aby bylo zˇrejmé, k jakému prvku bublinu ukotvit.

(24)

Rozˇs´ıˇren´ı stavov´e liˇsty

Rozˇs´ıˇren´ı stavové liˇsty bude prostˇrednictv´ım ikony a popisného textu znaˇcit, zda je uˇzivatel pˇrihláˇsený a pracovn´ı dokument synchronizován. Prostˇrednictv´ım tohoto rozˇs´ıˇren´ı bude m´ıt také uˇzivatel moˇznost vyvolat pˇrihlaˇsovac´ı dialog a ukonˇcit práci s doplˇnkem.

Pˇrihlaˇsovac´ı dialog

Pˇrihlaˇsovac´ı dialog bude obsahovat pole pro vloˇzen´ı uˇzivatelsk´eho jm´ena a hesla.

Dialog nastaven´ı

V tomto dialogu bude moˇzn´e specifikovat adresu anotaˇcn´ıho serveru. Tato adresa bude ulo-ˇ

zena pomoc´ı systému pˇredvoleb Firefoxu (preferences). Zp˚usob pˇr´ıstupu k tomuto systému je popsán v [2].

4.4 Ovl´

ad´

an´ı, uˇ

zivatelsk´

e akce

Zmˇena nastaven´ı

Uˇzivatel mus´ı m´ıt moˇznost zmˇenit adresu anotaˇcn´ıho serveru. Dialog, který mu to umoˇzn´ı, vyvolá pˇres kontextovou nab´ıdku ikony ve stavové liˇstˇe, ˇci pˇres nastaven´ı doplˇnku ve správci doplˇnk˚u Firefoxu.

Pˇrihl´aˇsen´ı

Dialog pro pˇrihláˇsen´ı se zobraz´ı kliknut´ım na ikonu doplˇnku ve stavové liˇstˇe prohl´ıˇzeˇce, popˇr´ıpadˇe volbou v kontextové nab´ıdce této ikony.

Prohl´ıˇzen´ı anotac´ı

Po najet´ı kurzorem myˇsi na anotovaný text se zobraz´ı bublina, která zmiz´ı po jeho opuˇstˇen´ı. Pokud uˇzivatel klikne na anotovaný text, po jeho opuˇstˇen´ı kurzorem bublina sama nezmiz´ı a bude muset být zavˇrena na základˇe urˇcité akce (napˇr´ıklad kliknut´ı na kˇr´ıˇzek).

Bublina zobrazuj´ıc´ı vnoˇrenou anotaci zmiz´ı také po zavˇren´ı bubliny nadˇrazené anotace. Kliknut´ım na objekt reprezentuj´ıc´ı atribut typu geografický bod bude otevˇreno nové okno prohl´ıˇzeˇce, kde bude tento gegorafický bod zobrazen na mapˇe Google Maps1_.

Po kliknut´ı na objekt reprezentuj´ıc´ı atribut typu odkazovaná, ˇci vnoˇrená anotace se zob-raz´ı tomu odpov´ıdaj´ıc´ı bublina anotace (pokud se bude v pracovn´ım dokumentu nacházet).

Zmˇena pracovn´ıho dokumentu

Zmˇenu pracovn´ıho dokumentu provede uˇzivatel zadán´ım nové adresy dokumentu do adresn´ı ˇrádky prohl´ıˇzeˇce.

1

(25)

Ukonˇcen´ı pr´ace s doplˇnkem

Ukonˇcen´ı, po kterém se vrát´ı dokument do p˚uvodn´ıho stavu (budou z nˇej odstranˇena zv´ y-raznˇen´ı anotovaného textu), doc´ıl´ı uˇzivatel levým kliknut´ım myˇsi na ikonu ve stavové liˇstˇe, popˇr´ıpadˇe volbou v kontextové nab´ıdce této ikony.

4.5 N´

avrh datov´

ych struktur

Bude potˇreba vytvoˇrit struktury pro reprezentaci jednotlivých prvk˚u sytému, tedy kon-krétnˇe:

• Anotace (bude uchov´avat tyto ´udaje: identifikace, autor, datum vytvoˇren´ı, typ, text anotace, pole fragment˚u, pole atribut˚u)

• Fragmentu (bude uchovávat tyto údaje: Xpath výraz, offset, délka fragmentu, anoto-vaný text)

• Atributu (bude uchovávat tyto údaje: název, typ, hodnota)

4.6 N´

avrh funkˇ

cn´ıch blok˚

u

Funkˇcnost doplˇnku bude rozdˇelena do n´asleduj´ıc´ıch modul˚u.

Parser

Tento modul bude ˇreˇsit:

• vytváˇren´ı zpráv komunikaˇcn´ıho protokolu pro pˇrihláˇsen´ı, synchronizaci a Comet • zpracován´ı pˇr´ıchoz´ıch zpráv a uloˇzen´ı dat do odpov´ıdaj´ıc´ıch struktur

• vyhledán´ı chyb v pˇr´ıchoz´ıch zprávách

Modul pro komunikaci

Tento modul bude umoˇzˇnovat komunikaci pomoc´ı Ajax tak, jak bylo navrˇzeno v sekci 4.2.

Modul pro manipulaci s DOM

Tento modul bude ˇreˇsit manipulace s DOM stránky a XUL dokumentu, konkrétnˇeji: • vyznaˇcen´ı anotovaného textu

• podbarven´ı/odbarven´ı fragment˚u vnoˇren´ych anotac´ı • zpˇr´ıstupnˇen´ı/znepˇr´ıstupnˇen´ı fragment˚u vnoˇren´ych anotac´ı

• odstranˇen´ı vyznaˇcen´ı anotovaného textu v pˇr´ıpadˇe mazán´ı anotace, nebo ukonˇcen´ı práce s doplˇnkem

(26)

Modul pro manipulaci s bublinou

Funkˇcnost tohoto modulu bude zahrnovat: • vytvoˇren´ı bubliny

• naplnˇen´ı a aktualizaci jej´ıho obsahu • jej´ı zobrazen´ı a zavˇren´ı

• zobrazen´ı atribut˚u

(27)

Kapitola 5

Implementace

V této sekci uvedu nástroje, které jsem pˇri práci pouˇzil, pop´ıˇsu nˇekteré problémy, se kterými jsem se setkal pˇri implementaci, a uvedu konkrétn´ı zp˚usob implementace jednotlivých prvk˚u.

5.1 N´

astroje

Pˇri práci jsem vyuˇzil n´ıˇze popsáné nástroje.

NetBeans

Vývojové prostˇred´ı NetBeans1 jsem vyuˇzil pˇri psan´ı zdrojového kódu JavaScriptu zejména kv˚uli propracovanému systému nab´ızen´ı a doplˇnován´ı názv˚u funkc´ı, metod a tˇr´ıd defino-vaných v jiných souborech projektu a nab´ızen´ı standardn´ıch metod objekt˚u JavaScriptu. Vyuˇzil jsem také zásuvného modulu nbgit2, pracuj´ıc´ıho se systémem git3, pro aktualizaci 4A serveru.

Addon builder

Tento webový nástroj4jsem pouˇzil pro vygenerován´ı kostry doplˇnku a soubor˚u chrome.manifest a install.rdf popsaných v sekci2.5.1.

Komodo Edit

Vývojových prostˇred´ı, které usnadn´ı psan´ı XUL soubor˚u, nen´ı mnoho a pro tento úˇcel jsem vyuˇzil Komodo Edit5_.

5.2 Prvotn´ı postup

V poˇcátc´ıch práce na tomto doplˇnku, kdy jsem se teprve seznamoval s technologi´ı XUL a zp˚usobem, jakým jej Firefox zobrazuje, jsem postupoval podle ˇclánku [41], a to spouˇstˇen´ım Firefoxu s parametry -chrome soubor.xul. T´ımto zp˚usobem se zobrazilo pouze uˇzivatelské rozhran´ı definované v soubor.xul a ne uˇzivatelské rozhran´ı prohl´ıˇzeˇce.

1_{http://netbeans.org/} 2 http://code.google.com/p/nbgit/ 3_{http://git-scm.com/} 4 https://addons.mozilla.org/en-US/developers/tools/builder 5 http://www.activestate.com/komodo-edit

(28)

5.3 Implementace prvk˚

u uˇ

zivatelsk´

eho rozhran´ı

Jak bylo ˇreˇceno v sekci 2.5.1, rozˇs´ıˇren´ı uˇzivatelského rozhran´ı se maj´ı nacházet v souboru typu Overlay. V mém pˇr´ıpadˇe je to tedy konkrétnˇe soubor ff-overlay.xul, který se nacház´ı v sekci doplˇnku content.

Bublina

Bublina byla implementována dle návrhu v sekci 4.3, jako XUL element panel. Prvky v panelu jsou implementovány jako XUL elementy:

• label v pˇr´ıpadˇe ´udaj˚u: autor anotace, datum vytvoˇren´ı anotace, typ anotace • textbox pro text anotace

• richlistbox pro zobrazen´ı atribut˚u

Po prostudov´an´ı [19] jsem pouˇzil tyto atributy: • id pro identifikaci

• noautohide bez tohoto atributu by panel zmizel v pˇr´ıpadˇe kliknut´ı mimo nˇej

• persist mnou zavedený atribut, pomoc´ı kterého se rozliˇsuje, zda byl panel zobrazen najet´ım kurzorem na anotovaný text, ˇci kliknut´ım na nˇej (tzn. kdy má zmizet) • type ˇctvrtá verze Firefoxu zavedla tento atribut, pomoc´ı nˇehoˇz lze doc´ılit rámeˇceku

kolem panelu a ˇsipky k objektu, ke kter´emu je ukotven

• onpopuphiding tato obsluha události je volána v pˇr´ıpadˇe zavˇren´ı panelu, toho jsem vyuˇzil pro zavˇren´ı panel˚u vlastn´ıch vnoˇrených anotac´ı a pro zruˇsen´ı podbarven´ı a zne-pˇr´ıstupnˇen´ı jejich fragment˚u

Pˇr´ıstup k panelu Bˇehem implementace jsem zjistil, ˇze oznaˇcen´ı panelu standardn´ı funkc´ı pro pˇr´ıstup k element˚um dokumentu getElementById() mus´ı být jeho nadˇrazeným elementem prvek, který je souˇcást´ı nˇekterého z rozˇs´ıˇren´ı uˇzivatelského rozhran´ı (v souboru ff-overlay.xul). T´ımto nadˇrazeným elementem jsem uˇcinil popupset v rozˇs´ıˇren´ı stavové liˇsty.

Ukotven´ı k prvku dokumentu, u kterého se panel zobraz´ı Metodˇe elementu panel pro zobrazen´ı openPopup() lze parametrem pˇredat element, u kterého se má zobrazit. To je velice výhodné, protoˇze ne vˇsechny moˇznosti zobrazen´ı bubliny tuto moˇznost nab´ızely a muselo by se pracovat se zobrazen´ım bubliny na základˇe souˇradnic kurzoru. Problém by nastal také v pˇr´ıpadˇe zobrazen´ı bubliny odkazované, ˇci vnoˇrené anotace, kde by bylo urˇcen´ı souˇradnic pravdˇepodobnˇe obt´ıˇzné. V mém pˇr´ıpadˇe je to element obsahuj´ıc´ı anotovaný text.

(29)

Vyznaˇcen´y text

Vyznaˇcen´y text je uzavˇren do HTML elementu span. Kaˇzd´y span bude odpov´ıdat jednomu fragmentu anotace.

V z´avislosti na poˇzadavc´ıch a n´avrhu jsem vyuˇzil tyto atributy:

• id nutná identifikace pro zobrazen´ı panelu u správného anotovaného textu

• onmouseover odeˇsle událost, která se zpracuje v doplˇnku. V rámci tohoto zpracován´ı se zobraz´ı odpov´ıdaj´ıc´ı anotace

• onclick stejný princip jako onmouseover, panel se otevˇre, ale nav´ıc se nastav´ı jeho atribut persist, který znaˇc´ı, ˇze panel nemá zmizet, pokud kurzor myˇsi opust´ı ano-tovaný text

• onmouseout stejn´y princip jako onmouseover, ale panel se zavˇre, pokud nebude ote-vˇren s atributem persist

• style nastaven´ım tohoto atributu bude doc´ıleno odpov´ıdaj´ıc´ıho podbarven´ı

• active nezanoˇrené anotace budou m´ıt tento atribut v hodntˇe true vˇzdy, zanoˇrené potom pouze pokud bude zobrazena jejich nadˇrazená anotace. Zamez´ı se t´ım zobrazen´ı anotace, která by nedávala sama o sobˇe smysl.

Komunikace s privilegovaným obsahem byla implementována podle návrhu v sekci 4.3. Událost ShowAPanelEvent je odeslána v pˇr´ıpadˇe najet´ı kurzorem myˇsi na anotovaný text, OpenAPanelEvent v pˇr´ıpadˇe kliknut´ı na anotovaný text a HideAPanelEvent v pˇr´ıpadˇe, ˇ

ze kurzor opust´ı anotovan´y text.

Funkce pro odeslán´ı události Pro odeslán´ı události spanem jsem vytvoˇril funkci dispatch, která je vloˇzena po úspˇeˇsném pˇrihláˇsen´ı uˇzivatele do JavaScriptu pracovn´ıho dokumentu.

Rozˇs´ıˇren´ı stavov´e liˇsty

Je implementov´ano XUL elementem statusbar v souboru ff-overlay.xul. Demonstrace na obr´azku 5.1.

Obr´azek 5.1: Ikona na stavov´e liˇstˇe znaˇc´ıc´ı, ˇze je doplnˇek aktivn´ı (vlevo), ˇci neaktivn´ı (vpravo).

Pˇrihlaˇsovac´ı dialog

Je implementov´an jako XUL element prefwindow v souboru login.xul. Demonstrace na obr´azku 5.2.

(30)

Obr´azek 5.2: Uk´azka pˇrihlaˇsovac´ıho dialogu.

Dialog nastaven´ı

Je implementov´an jako XUL element prefwindow v souboru options.xul. Demonstrace na obr´azku 5.3.

Obr´azek 5.3: Uk´azka dialogu nastaven´ı.

5.4 Implementace funkˇ

cn´ıch blok˚

u

V této sekci pop´ıˇsu zejména problémy, které jsem ˇreˇsil v souvislosti s jednotlivými funkˇcn´ımi bloky. U kaˇzdého z blok˚u je uvedeno, v kterém konkrétn´ım souboru se nacház´ı jeho zdrojový kód. Tyto soubory se nacház´ı v sekci doplˇnku content (viz kapitola2.5.1).

Parser

Je implementov´an v souboru AnnotParser.js.

Oznaˇcen´ı pouze vlastn´ıch fragment˚u a atribut˚u anotace Pˇri parsován´ı anotac´ı jsem se setkal s problémem zp˚usobeným ˇspatným zvolen´ım selektoru pro výbˇer fragment˚u a atribut˚u anotac´ı, které mˇely jako jeden z atribut˚u vnoˇrenou anotaci. Selektor oznaˇcuj´ıc´ı vˇsechny elementy s názvem fragment, ˇci attribute oznaˇcil i fragmenty a atributy vnoˇrené anotace a tak docházelo k jejich nesprávnému pˇriˇrazen´ı. ˇReˇsen´ı jsem nalezl v [7], a to pouˇzit´ı jQuery selektoru

”>“, který dovoluje oznaˇcit pouze elementy, které jsou pˇr´ımými potomky.

Modul pro komunikaci

Je implementov´an v souboru communication.js. Komunikace pomoc´ı technologi´ı Ajax a Comet je implementov´ana pomoc´ı funkce knihovny jQuery $.ajax.

(31)

Modul pro manipulaci s DOM

Je implementov´an v souboru domManipulation.js.

Pˇr´ıstup k obsahu aktuáln´ı záloˇzky prohl´ıˇzeˇce Jedn´ım z problém˚u, které jsem ˇreˇsil, byl pˇr´ıstup k HTML elementu document a window dokumentu zobrazeného v aktuáln´ı záloˇzce prohl´ıˇzeˇce, které jsem potˇreboval pro vnoˇren´ı objektu reprezentuj´ıc´ıho fragment anotace – spanu a funkce JavaScriptu do stránky. ˇReˇsen´ı, které jsem nalezl d´ıky [22, 21], je demonstrováno v algoritmu 1.

Algoritmus 1: Pˇr´ıstup k element˚um document a window aktuáln´ı záloˇzky prohl´ıˇzeˇce /* vyuˇzit´ı XPCOM rozhran´ı komponenty správce oken prohl´ıˇzeˇce */ var WindowMediator =

Components.classes[’@mozilla.org/appshell/window-mediator;1’].getService(Components.interfaces.nsIWindowMediator)

/* oznaˇcen´ı aktu´aln´ıho okna prohl´ıˇzeˇce */ var browser = WindowMediator.getMostRecentWindow(’navigator:browser’)

/* oznaˇcen´ı potˇrebn´eho elementu content */ var mainTabs = browser.document.getElementById(’content’)

document = mainTabs.contentDocument; /* pˇr´ıstup k elementu document */ window = mainTabs.contentWindow; /* pˇr´ıstup k elementu window */

Postup vnoˇren´ı fragmentu do str´anky Prvn´ı postup, kter´y jsem vytvoˇril, se sk´ al-dal z:

1. Oznaˇcen´ı textu elementu, ve kterém se anotovaný text nacház´ı, pomoc´ı XPath výrazu. 2. Rozdˇelen´ı jej na základˇe offsetu a délky anotovaného textu na tˇri ˇcásti, a to: text pˇred

anotovaným textem, anotovaný text a zbývaj´ıc´ı text.

3. Zabalen´ı anotovaného textu do elementu span a nastaven´ı potˇrebných atribut˚u. 4. Vloˇzen´ı pomoc´ı funkc´ı appendChild() a replaceChild() do nadˇrazeného elementu

uzlu s textem, který byl pˇred anotovaným textem, vytvoˇreného spanu a uzlu s textem, který byl za anotovaným textem.

Tento postup byl funkˇcn´ı, ale bˇehem testov´an´ı jsem zjistil, ˇze jen za pˇredpokladu, ˇ

ze v textu oznaˇceném pomoc´ı XPath výrazu se nacház´ı pouze text a ˇzádné elementy znaˇ c-kovac´ıho jazyka. Proto jsem tento postup zmˇenil a nyn´ı pracuje t´ımto zp˚usobem:

1. Uloˇz´ı obsah atributu innerHTML rodiˇcovského uzlu textu specifikovaného pomoc´ı XPath výrazu. Tento atribut obsahuje nejen text, ale i textovou reprezentaci zna-ˇcek jazyka XHTML.

2. Procház´ı znaky uloˇzeného ˇretˇezce a poˇc´ıtá pouze ty, které nejsou souˇcást´ı znaˇcek jazyka aˇz do té doby, neˇz se poˇcet napoˇc´ıtaných znak˚u textu shoduje s offsetem anotovaného textu.

3. Jako offset nastav´ı pozici, na kterou musel doj´ıt, aby napoˇc´ıtal potˇrebn´e textov´e znaky.

(32)

4. Rozdˇelen´ıˇretˇezce z atributu innerHTML na tˇri ˇc´asti a vytvoˇren´ı elementu span provede stejn´ym zp˚usobem, jako v prvn´ım postupu.

5. Spoj´ı text pˇred anotovaným textem, vytvoˇrený span pˇrevedený do textové podoby a text za anotovaným textem. Vzniklý ˇretˇezec poté uloˇz´ı do atributu innerHTML stej-ného uzlu, ze kterého v prvn´ım bodˇe postupu ˇcetl.

HTML, ˇci XUL element Bˇehem implementace vnoˇrován´ı span˚u odpov´ıdaj´ıc´ıch fragment˚um anotace jsem zjistil, ˇze pouˇzit´ım bˇeˇzného pˇr´ıkazu pro vytvoˇren´ı nového ele-mentu dokuele-mentu document.createElement("span") v kódu doplˇnku je vytvoˇren XUL element span a ne HTML element span. To mˇelo za následek nekorektn´ı formátován´ı textu a varovné výpisy Firebugu. ˇReˇsen´ı, které jsem naˇsel v [1], bylo pouˇz´ıt jmenné prostory. Pˇr´ıkaz tedy potom vypadá:

document.createElementNS("http://www.w3.org/1999/xhtml","html:span"). Uvedený princip se vztahuje na vytváˇren´ı jakýchkoli HTML element˚u v XUL doku-mentu.

Modul pro manipulaci s panelem

Je implementov´an v souboru panels.js.

5.5 V´

ysledn´

a podoba implementace

Na obrázku5.4se nacház´ı ukázka implementace uˇzivatelského rozhran´ı. ˇZlutˇe je podbarven anotovaný text anotac´ı, oranˇzovˇe potom anotovaný text vnoˇrených anotac´ı. Na obrázku jsou také tˇri bubliny, které kromˇe bˇeˇzných atribut˚u obsahuj´ı také atributy vnoˇrených anotac´ı, oznaˇcené pomoc´ı popisku

”(Nested)“ a ikony bubliny, a atribut typu geografick´y bod (oboj´ı bublina 1). V bublinˇe 2 je atribut typu odkaz na anotaci oznaˇcen´y pomoc´ı popisku

”(aLink)“ a ikony bubliny. Bublina 3 obsahuje pouze atributy typu string.

(33)

(34)

Kapitola 6

Testov´

an´ı

V této sekci jsou popsány nástroje, které jsem pouˇz´ıval pro pr˚ubˇeˇzné testován´ı funkˇcnosti doplˇnku bˇehem implementace, a experiment pro ovˇeˇren´ı a demonstraci funkˇcnosti doplˇnku.

Firebug

Firebug1je velice obl´ıbeným testovac´ım a lad´ıc´ım nástrojem Firefoxu a pˇri práci na doplˇnku jsem jeho funkc´ı také vyuˇzil. Uˇziteˇcný byl zejména pˇri ladˇen´ı komunikace se serverem, protoˇze umoˇzˇnuje pˇrehlednˇe zobrazit HTTP poˇzadavky a odpovˇedi na nˇe.

Webov´

e rozhran´ı 4A Framework serveru

Webové rozhran´ı serveru popsaného v sekci 2.3 jsem vyuˇzil pro vkládán´ı nových anotac´ı do stránky, jejich úpravu a mazán´ı, abych ovˇeˇril správnou reakci doplˇnku na tuto událost.

6.1 Experiment

Pomoc´ı tohoto experimentu bude ovˇeˇrena funkcionalita doplˇnku. Bude zahrnovat pˇr´ıhláˇsen´ı, pˇridán´ı anotace, jej´ı úpravu a smazán´ı a nakonec ukonˇcen´ı práce s doplˇnkem. Experiment bude proveden v prohl´ıˇzeˇci Firefox verze 4.0.1 a pro vkládán´ı, úpravu a mazán´ı anotac´ı bude pouˇzito webové rozhran´ı 4A Framework serveru popsané výˇse. Instalaˇcn´ı soubor prohl´ıˇzeˇce, 4A Framework server, výchoz´ı stav jeho databáze a testovac´ı webový dokument (v dobˇe testován´ı dostupný online2_{) se nach´}_{az´ı na pˇ}_riloˇ_zen´_{em CD.}

Pˇr´ıhl´aˇsen´ı

Po levém kliknut´ı na ikonu na stavové liˇstˇe, vyplnˇen´ı pˇrihlaˇsovac´ıch údaj˚u (login

”novakj“, heslo

”test“) a potvrzen´ı se anotace st´ahly a jejich fragmenty zobrazily tak, jak je uvedeno na obr´azku 6.1.

1_{http://getfirebug.com/} 2

(35)

Pˇrid´an´ı anotace

Na obrázku 6.2 je anotovaný text pˇred a po vloˇzen´ı anotace. (Pro úˇcel demonstrace bylo na anotovaný text kliknuto.)

´

Uprava anotace

Na obrázku6.3je anotovaný text pˇred a po úpravˇe. (Pro úˇcel demonstrace bylo na anoto-vaný text kliknuto.)

Smaz´an´ı anotace

Na obr´azku6.4

Ukonˇcen´ı pr´ace s doplˇnkem

Levým kliknut´ım na ikonu ve stavové liˇstˇe byla ukonˇcena práce s doplˇnkem. T´ım se doku-ment vrátil do stejného stavu jako pˇred pˇrihláˇsen´ım.

(36)

(37)

Obr´azek 6.2: Text pˇred (vlevo) a po (vpravo) anotaci.

Obrázek 6.3: Text pˇred (vlevo) a po (vpravo) úpravˇe anotovaného textu.

(38)

Kapitola 7

Z´

avˇ

er

Pˇri ˇreˇsen´ı této práce jsem postupoval tak, ˇze jsem se v zimn´ım semestru seznámil s postupem tvorby doplˇnk˚u webového prohl´ıˇzeˇce Firefox, s jejich d˚uleˇzitými souˇcástmi, s technologiemi, které jsou potˇreba pro jejich tvorbu, a také se zp˚usobem jejich zaˇclenˇen´ı do Firefoxu. Dále bylo potˇreba se seznámit s problematikou tvorby anotac´ı, s 4A Frameworkem a zp˚usobem, jakým s n´ım bude doplnˇek spolupracovat. Následnˇe jsem navrhl princip ˇcinnosti a komu-nikace, uˇzivatelské rozhran´ı, zp˚usob ovládán´ı a funkˇcn´ı bloky, do kterých bude doplnˇek rozdˇelen. Celý tento postup odpov´ıdá prvn´ım tˇrem bod˚um mého zadán´ı.

Popsaný návrh jsem v letn´ım semestru implementoval jak bylo poˇzadováno ˇctvrtým a posledn´ım bodem mého zadán´ı a implementaci jsem také testoval.

Funkˇcnost doplˇnku lze v budoucnu rozˇs´ıˇrit napr´ıklad o nastaven´ı odbˇeru anotac´ı, zpra-cován´ı nab´ızených anotac´ı, ˇci nastaven´ı r˚uzného podbarven´ı anotovaného textu v závislosti na typu, ˇci zdroji anotace.

(39)

Literatura

[1] Adding HTML Elements. [online], posledn´ı ´uprava: 2011-04-04, [Navˇst´ıveno: 2011-05-05].

URLhttps://developer.mozilla.org/en/XUL_Tutorial/Adding_HTML_Elements

[2] A brief guide to Mozilla preferences. [online], posledn´ı ´uprava: 2011-01-24, [Navˇst´ıveno: 2011-05-10].

URLhttps://developer.mozilla.org/en/Preferences_System

[3] Building an Extension. [online], posledn´ı ´uprava: 2011-05-05, [Navˇst´ıveno: 2011-05-06].

URLhttps://developer.mozilla.org/en/building_an_extension

[4] Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. [online], 2011-04-12, [Navˇst´ıveno: 2011-05-05].

URLhttp://www.w3.org/TR/CSS2/

[5] Centrum pro v´yvoj´aˇre doplˇnk˚u. [online], [Navˇst´ıveno: 2011-04-30].

URLhttps://addons.mozilla.org/cs/firefox/developers

[6] Chapter 2: Technologies used in developing extensions. [online], posledn´ı ´uprava: 2011-01-24, [Navˇst´ıveno: 2011-05-11].

URLhttps://developer.mozilla.org/En/Firefox_addons_developer_guide/

Technologies_used_in_developing_extensions

[7] Child Selector (“parent > child”). [online], [Navˇst´ıveno: 2011-05-10].

URLhttp://api.jquery.com/child-selector/

[8] Communication between HTML and your extension. [online], posledn´ı ´uprava: 2010-06-21, [Navˇst´ıveno: 2011-05-01].

URLhttps://developer.mozilla.org/en/Communication_between_HTML_and_

your_extension

[9] CSS Tutorial. [online], [Navˇst´ıveno: 2011-05-02].

URLhttp://www.w3schools.com/css/

[10] Document Object Model (DOM). [online], 2005-01-19, [Navˇst´ıveno: 2011-05-10].

URLhttp://www.w3.org/DOM/

[11] Doplˇnky. [online], [Navˇst´ıveno: 2011-05-01].

(40)

[12] Gecko DOM Reference. [online], posledn´ı ´uprava: 2011-03-02, [Navˇst´ıveno: 2011-04-30].

URLhttps://developer.mozilla.org/en/Gecko_DOM_Reference/Introduction

[13] History of the Mozilla Project. [online], [Navˇst´ıveno: 2011-05-01].

URLhttp://www.mozilla.org/about/history.html

[14] HTML Tutorial. [online], [Navˇst´ıveno: 2011-05-05].

URLhttp://www.w3schools.com/html/

[15] Interaction between privileged and non-privileged pages. [online], posledn´ı ´uprava: 2011-01-16, [Navˇst´ıveno: 2011-05-01].

URLhttps://developer.mozilla.org/en/Code_snippets/Interaction_

between_privileged_and_non-privileged_pages

[16] JavaScript. [online], posledn´ı ´uprava: 2011-04-24, [Navˇst´ıveno: 2011-04-28].

URLhttps://developer.mozilla.org/en/JavaScript

[17] JavaScript Tutorial. [online], [Navˇst´ıveno: 2011-04-27].

URLhttp://www.w3schools.com/js/

[18] jQuery. [online], 2010, [Navˇst´ıveno 2011-04-28].

URLhttp://jquery.com/

[19] panel. [online], posledn´ı ´uprava: 2011-04-01, [Navˇst´ıveno: 2011-04-28].

URLhttps://developer.mozilla.org/en/XUL/panel

[20] Popup Guide. [online], posledn´ı ´uprava: 2011-02-22, [Navˇst´ıveno: 2011-04-28].

URLhttps://developer.mozilla.org/en/XUL/PopupGuide

[21] Tabbed browser. [online], posledn´ı ´uprava: 2011-01-18, [Navˇst´ıveno: 2011-05-11].

URLhttps://developer.mozilla.org/en/Code_snippets/Tabbed_browser

[22] window.content. [online], posledn´ı ´uprava: 2007-12-2, [Navˇst´ıveno: 2011-05-11].

URLhttps://developer.mozilla.org/en/DOM/window.content

[23] XHTML Tutorial. [online], [Navˇst´ıveno: 2011-05-05].

URLhttp://www.w3schools.com/xhtml/

[24] XHTML2 Working Group Home Page. [online], posledn´ı ´uprava: 2010-12-17, [Navˇst´ıveno: 2011-05-11].

URLhttp://www.w3.org/MarkUp/

[25] XML. [online], posledn´ı ´uprava: 2009-11-24, [Navˇst´ıveno: 2011-05-01].

URLhttps://developer.mozilla.org/en/XML

[26] XML Path Language (XPath). [online], 1999-11-16, [Navˇst´ıveno: 2011-05-01].

URLhttp://www.w3.org/TR/xpath/

[27] XMLHttpRequest. [online], 2011-08-03, [Navˇst´ıveno: 2011-05-01].

URLhttp://www.w3.org/TR/XMLHttpRequest/

[28] XPCOM. [online], posledn´ı ´uprava: 2011-01-24, [Navˇst´ıveno: 2011-04-28].

(41)

[29] XUL. [online], posledn´ı ´uprava: 2011-04-01, [Navˇst´ıveno: 2011-04-30].

URLhttps://developer.mozilla.org/En/XUL

[30] XUL Overlays. [online], posledn´ı ´uprava: 2010-01-25, [Navˇst´ıveno: 2011-05-05].

URLhttps://developer.mozilla.org/en/XUL_Overlays

[31] Z´asuvn´e moduly (pluginy). [online], [Navˇst´ıveno: 2011-05-01].

URLhttp://www.mozilla.cz/doplnky/zasuvne-moduly/

[32] Dytrych, J.: 4A Framework: Annotations Anywhere, Annotations Anytime. [online], 2011-04-28, [Navˇst´ıveno: 2011-05-12].

URLhttp://keg.vse.cz/_slides/dytrych.pdf

[33] Dytrych, J.: Webové sluˇzby a komponentn´ı technologie, 2011, pojednán´ı k tématu disertaˇcn´ı práce.

[34] Eich, B.: Blog. [online], [Navˇst´ıveno: 2011-05-01].

URLhttp://brendaneich.com/

[35] Garrett, J. J.: Ajax: A New Approach to Web Applications. [online], 2005-02-18, [Navˇst´ıveno: 2011-04-28].

URLhttp://www.adaptivepath.com/ideas/essays/archives/000385.php

[36] Janovsk´y, D.: HTML pˇr´ıruˇcka. [online], posledn´ı ´uprava: 2011-05-02, [Navˇst´ıveno: 2011-05-05].

URLhttp://www.jakpsatweb.cz/html/

[37] Marshall, J.: HTTP Made Really Easy. [online], posledn´ı ´uprava: 1997-08-15, [Navˇst´ıveno: 2011-05-05].

URLhttp://www.jmarshall.com/easy/http/

[38] Peterka, J.: S´ıt’ov´y model TCP/IP. [online], 1992, [Navˇst´ıveno: 2011-05-11].

URLhttp://www.earchiv.cz/a92/a231c110.php3

[39] Russell, A.: Comet: Low Latency Data for the Browser. [online], 2006-03-03, [Navˇst´ıveno: 2011-04-30].

URLhttp:

//infrequently.org/2006/03/comet-low-latency-data-for-the-browser/

[40] Sharp, J.; Burns, R.; aj.: jQuery Kuchaˇrka program´atora. Computer Press, a. s., Brno, prvn´ı vyd´an´ı, 2010, 436 s., iSBN 978-80-251-3152-7.

[41] Shimoda, H.: Chapter 3: Introduction to XUL — How to build a more intuitive UI. [online], posledn´ı ´uprava: 2011-02-20, [Navˇst´ıveno: 2011-05-11].

URLhttps://developer.mozilla.org/En/Firefox_addons_developer_guide/

Introduction_to_XUL%E2%80%94How_to_build_a_more_intuitive_UI

[42] Yank, K.; Adams, K.: Zaˇc´ın´ame s JavaScriptem. Zoner software, s.r.o., Brno, prvn´ı vyd´an´ı, 2008, 333 s., iSBN 978-80-86815-94-7.

(42)