Vysoké Uˇcení Technické V Brnˇe
Total Page：16
File Type：pdf, Size：1020Kb
VYSOKÉ UCEN͡ TECHNICKÉ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMACNÍCHˇ TECHNOLOGIÍ ÚSTAV POCÍTAˇ COVɡ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA ANOTACE VE WYSIWYG TEXTOVÝCH EDITORECH BAKALÁRSKÁˇ PRÁCE BACHELOR’S THESIS AUTOR PRÁCE PETR LOUKOTA AUTHOR BRNO 2012 VYSOKÉ UCEN͡ TECHNICKÉ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMACNÍCHˇ TECHNOLOGIÍ ÚSTAV POCÍTAˇ COVɡ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA ANOTACE VE WYSIWYG TEXTOVÝCH EDITORECH ANNOTATIONS IN WYSIWYG TEXT EDITORS BAKALÁRSKÁˇ PRÁCE BACHELOR’S THESIS AUTOR PRÁCE PETR LOUKOTA AUTHOR VEDOUCÍ PRÁCE Ing. JAROSLAV DYTRYCH SUPERVISOR BRNO 2012 Abstrakt Tato bakal´aˇrsk´apr´acese zab´yv´an´avrhem oprav a vylepˇsen´ıdostupn´eho editoru anotac´ı a jejich implementac´ı. Editor anotac´ıpro WYSIWYG textov´eeditory je naps´anv jazyce JavaScript a vyv´ıjen v prostˇred´ıeditoru TinyMCE. Je nez´avisl´yna webov´em prohl´ıˇzeˇci a v budoucnu jej bude moˇzn´epouˇz´ıt s dalˇs´ımi WYSIWYG editory jako CKEditor ˇciAloha. N´avrh je zamˇeˇren na manipulaci s atributy typ˚u, zab´yv´ase vˇsak i nov´ym konceptem nasta- ven´ıeditoru anotac´ı. Souˇc´ast´ıˇreˇsen´ıje tak´ezpracov´an´ınab´ıdek anotac´ızas´ılan´ych serverem. Tato pr´acepopisuje n´avrh a implementaci zm´ınˇen´ych vylepˇsen´ıa ve sv´em z´avˇeru se vˇenuje moˇznostem dalˇs´ıho v´yvoje. Abstract This bachelor's thesis deals with the design of fixes and improvements of available annotations editor and their implementation. The annotations editor for WYSIWYG text editors is created in JavaScript language and developed in the environment of TinyMCE editor. It is independent on a web browser and it will be possible to use it with other WYSIWYG editors like CKEditor or Aloha in future. The design is focused on manipulation with attributes of types but it also deals with the new concept of settings of annotations editor. The processing of suggested annotations that are sent by a server is also part of the solution. This thesis describes the design and implementation of mentioned improvements and pay attention to the possible ways of another development at its end. Kl´ıˇcov´aslova JavaScript, WYSIWYG, textov´y,editor, TinyMCE, editor anotac´ı, anotace, web, rozˇs´ıˇren´ı, vylepˇsen´ı Keywords JavaScript, WYSIWYG, text, editor, TinyMCE, annotations editor, annotation, web, extension, improvement Citace Petr Loukota: Anotace ve WYSIWYG textov´ych editorech, bakal´aˇrsk´apr´ace,Brno, FIT VUT v Brnˇe,2012 Anotace ve WYSIWYG textov´ych editorech Prohl´aˇsen´ı Prohlaˇsuji, ˇze jsem tuto bakal´aˇrskou pr´aci vypracoval samostatnˇe pod veden´ım Ing. Jaroslava Dytrycha. Uvedl jsem vˇsechny liter´arn´ı prameny a publikace, ze kter´ych jsem ˇcerpal. ....................... Petr Loukota 8. kvˇetna 2012 Podˇekov´an´ı R´adbych podˇekoval vedouc´ımu m´ebakal´aˇrsk´epr´aceIng. Jaroslavu Dytrychovi za vˇecn´e pˇripom´ınky k n´avrh˚umvylepˇsen´ıa rychlou odbornou pomoc pˇri ˇreˇsen´ıprobl´em˚u. c Petr Loukota, 2012. Tato pr´ace vznikla jako ˇskoln´ıd´ılo na Vysok´em uˇcen´ıtechnick´em v Brnˇe, Fakultˇeinformaˇc- n´ıch technologi´ı. Pr´ace je chr´anˇena autorsk´ym z´akonem a jej´ıuˇzit´ıbez udˇelen´ıopr´avnˇen´ı autorem je nez´akonn´e, s v´yjimkou z´akonem definovan´ych pˇr´ıpad˚u. Obsah 1 Uvod´ 3 2 Anal´yza dostupn´eho editoru anotac´ı4 2.1 WYSIWYG textov´eeditory...........................4 2.1.1 TinyMCE a jeho rozˇs´ıˇren´ı........................5 2.2 4A Framework..................................5 2.3 Editor anotac´ı...................................5 2.3.1 Rozhran´ıpro spolupr´acis WYSIWYG editory............6 2.3.2 Manipulace s atributy typ˚u.......................7 2.3.3 Nastaven´ı.................................7 2.3.4 Nab´ızen´ıanotac´ı.............................8 3 Pouˇzit´etechnologie9 3.1 HTTP.......................................9 3.1.1 Identifik´ator zdroje............................9 3.1.2 Hypertextov´ydokument......................... 10 3.2 HTML a XHTML................................ 10 3.3 XML........................................ 10 3.4 XPath....................................... 11 3.5 DOM....................................... 11 3.6 CSS........................................ 11 3.7 JavaScript..................................... 12 3.8 AJAX....................................... 12 3.9 Comet....................................... 13 4 N´avrh oprav a vylepˇsen´ı 14 4.1 Manipulace s atributy typ˚u........................... 14 4.1.1 Strukturovan´eatributy.......................... 16 4.1.2 Odkaz na existuj´ıc´ıanotaci....................... 16 4.1.3 Zmˇena typ˚uatribut˚u........................... 16 4.1.4 Kontrola hodnot atribut˚u........................ 17 4.1.5 Pˇrid´av´an´ıa odstraˇnov´an´ıatribut˚u................... 17 4.2 Nastaven´ı..................................... 18 4.2.1 Barvy typ˚uanotac´ı............................ 19 4.3 Nab´ızen´ıanotac´ı................................. 19 4.3.1 Z´adostˇ o nab´ızen´ıanotac´ı........................ 20 4.3.2 Zobrazen´ınab´ıdnut´ych anotac´ı..................... 21 1 5 Implementace 22 5.1 Manipulace s atributy typ˚u........................... 22 5.1.1 Atribut typu jak´akoliv anotace\.................... 23 " 5.1.2 Pomocn´emetody............................. 24 5.2 Nastaven´ı..................................... 24 5.2.1 V´ybˇerbarvy typ˚u............................ 25 5.2.2 Pˇrevod mezi decim´aln´ıa hexadecim´aln´ısoustavou.......... 25 5.3 Nab´ızen´ıanotac´ı................................. 26 5.3.1 Zobrazen´ınab´ıdnut´ych anotac´ı..................... 27 6 Testov´an´ı 29 6.1 Testovac´ıprostˇred´ı................................ 29 6.1.1 Pouˇzit´en´astroje............................. 29 6.1.2 Inicializaˇcn´ıskript datab´aze....................... 30 6.1.3 Testovac´ıdokument........................... 30 6.1.4 Alternativn´ıtestov´an´ı.......................... 30 6.2 Odhalen´enedostatky............................... 30 6.2.1 Lokalizace jednoduch´ych typ˚u...................... 30 6.2.2 Reakce tlaˇc´ıtek na stisk kl´avesy..................... 32 7 Z´avˇer 33 Literatura 34 Pˇr´ılohy 37 Seznam pˇr´ıloh...................................... 38 A Obsah pˇriloˇzen´eho DVD 39 2 Kapitola 1 Uvod´ C´ılem t´eto bakal´aˇrsk´epr´ace je navrhnout opravy a vylepˇsen´ıdostupn´eho editoru anotac´ı. N´avrh je zamˇeˇren pˇredevˇs´ımna manipulaci s atributy typ˚u, zab´yv´ase vˇsak i nov´ym kon- ceptem nastaven´ıeditoru anotac´ı.Souˇc´ast´ıˇreˇsen´ıje tak´ezpracov´an´ınab´ıdek anotac´ı, kter´e jsou zas´ıl´any serverem. Tato pr´ace popisuje nejen samotn´yn´avrh, ale tak´eimplementaci a testov´an´ınavrˇzen´ych oprav a vylepˇsen´ı. Z´avˇerem se pak vˇenuje moˇznostem, kter´ymi by se editor anotac´ımohl vyv´ıjet do budoucna. Kapitola 2 se zab´yv´aanal´yzou dostupn´eho editoru anotac´ıs d˚urazem na jeho nedos- tatky, moˇzn´eopravy a vylepˇsen´ı. Jej´ı´uvodn´ıˇc´astje zamˇeˇrena na popis WYSIWYG editor˚u a zejm´ena na editor TinyMCE, v jehoˇzprostˇred´ıje editor anotac´ıvyv´ıjen. Definuje tak´e4A Framework coby n´avrh syst´emu pro kolaborativn´ıpoloautomatick´estrukturov´an´ıznalost´ı. V dalˇs´ıˇc´asti jsou pops´any nedostatky editoru anotac´ıt´ykaj´ıc´ıse manipulace s atributy typ˚u, nastaven´ıa nab´ızen´ıanotac´ı. Popis technologi´ı, kter´ebyly vyuˇzity pro dosavadn´ıv´yvoj editoru anotac´ı, a tak jsou vyuˇzity tak´epro jeho opravy a vylepˇsen´ı, je k dispozici v kapitole 3. Tato kapitola se vˇenuje technologi´ım HTTP, HTML, XHTML, XML, XPath, DOM, CSS, JavaScript, AJAX a Comet. V kapitole 4 je pops´ann´avrh oprav a vylepˇsen´ıdostupn´eho editoru anotac´ı. Prvn´ıˇc´ast kapitoly se zab´yv´amanipulac´ı s atributy typ˚ua navrhuje ˇreˇsen´ı vˇsech probl´em˚u, kter´e s touto problematikou souvisej´ı, dalˇs´ıˇc´astje vˇenov´ana n´avrhu nastaven´ıeditoru anotac´ı. V posledn´ıˇc´asti kapitoly je pops´ann´avrh nab´ızen´ıanotac´ı, kter´eby editor anotac´ımˇel umoˇzˇnovat. Kapitola 5 je vˇenov´ana implementaci nejd˚uleˇzitˇejˇs´ıch oprav a vylepˇsen´ıeditoru anotac´ı, bl´ıˇze se pak zab´yv´az´avaˇznˇejˇs´ımi probl´emy, kter´ese pˇriimplementaci vyskytly a kter´e bylo tˇreba ˇreˇsit. Jedn´ase napˇr´ıklad o validaci data a ˇcasu v jazyce JavaScript nebo pr´aci s atributy typu anyAnnotation. Kapitola 6 se zab´yv´amoˇznostmi testov´an´ınavrˇzen´ych oprav a vylepˇsen´ıeditoru anotaci a n´astroji, kter´ek testov´an´ıbyly vyuˇzity. D´ale popisuje nˇekolik vybran´ych nedostatk˚u, kter´e byly pˇritestov´an´ıodhaleny, spolu s jejich ˇreˇsen´ımi. Z´avˇercel´epr´ace pˇrin´aˇs´ısouhrn poznatk˚uz´ıskan´ych studiem technologi´ıa dostupn´eho editoru anotac´ı, shrnuje tak´ev´ysledky, kter´ych bylo implementac´ınavrˇzen´ych oprav a vy- lepˇsen´ıdosaˇzeno, a moˇznosti dalˇs´ıho v´yvoje. 3 Kapitola 2 Anal´yza dostupn´eho editoru anotac´ı Tato kapitola se vˇenuje anal´yze dostupn´eho editoru anotac´ı, jehoˇzv´yvojem se zab´yval Ing. Martin Kleban ve sv´ediplomov´epr´aci [11]. D˚uleˇzitou souˇc´ast´ıt´eto bakal´aˇrsk´epr´ace je zhodnocen´ısouˇcasn´eho stavu editoru anotac´ı,kter´epom˚uˇze odhalit nedostatky a rovnˇeˇz pˇredpokl´adan´efunkce, kter´evˇsak v implementaci prozat´ımzcela chyb´ı. D´ıky t´eto anal´yze pak bude moˇzn´enavrhnout opravy a vylepˇsen´ı tak, aby takto vylepˇsen´yeditor anotac´ı splˇnoval vybran´epoˇzadavky uˇzivatel˚u. Uvodn´ı´ ˇc´ast t´eto kapitoly je vˇenov´ana WYSIWYG editor˚um, a to s d˚urazem na TinyMCE editor, se kter´ym v souˇcasn´edobˇeeditor anotac´ıpracuje a kter´yje tak vyuˇzit jako v´yvojov´eprostˇred´ıeditoru anotac´ı. N´aslednˇeje pops´ano propojen´ı, d´ıky nˇemuˇzeditor anotac´ıkomunikuje s editorem TinyMCE, a tak´e4A framework, kter´yobsahuje mimo jin´e i n´avrh vizu´aln´ıpodoby klient˚u, tedy i editoru anotac´ıpro WYSIWYG textov´eeditory. Zbytek kapitoly je pak vˇenov´ansamotn´emu editoru anotac´ıa jeho souˇcasn´emu stavu. 2.1 WYSIWYG textov´eeditory WYSIWYG (What You See Is What You Get) textov´ymi editory rozum´ıme editory, kter´e uˇzivateli psan´ytext zobrazuj´ıv takov´epodobˇe,jakou bude skuteˇcnˇem´ıt v´ysledn´ydokument. WYSIWYG je zp˚usob editace dokumentu, d´ıky nˇemuˇzje ´uprava dan´eho dokumentu rychl´a a pˇrehledn´a,a dnes jsou t´ımto pojmem nejˇcastˇeji oznaˇcov´any textov´eprocesory.