Vysoke´Ucˇenítechnicke´V Brneˇ
Total Page：16
File Type：pdf, Size：1020Kb
VYSOKE´ UCˇ ENI´ TECHNICKE´ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMACˇ NI´CH TECHNOLOGII´ U´ STAV POCˇ ´ITACˇ OVE´ GRAFIKY A MULTIME´ DII´ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA ROZSˇ ´IRˇ ENY´ HTML EDITOR BAKALA´ Rˇ SKA´ PRA´ CE BACHELOR’S THESIS AUTOR PRA´ CE TOMA´ Sˇ KRA´ LI´K AUTHOR BRNO 2011 VYSOKE´ UCˇ ENI´ TECHNICKE´ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMACˇ NI´CH TECHNOLOGII´ U´ STAV POCˇ ´ITACˇ OVE´ GRAFIKY A MULTIME´ DII´ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA ROZSˇ ´IRˇ ENY´ HTML EDITOR ENHANCED HTML EDITOR BAKALA´ Rˇ SKA´ PRA´ CE BACHELOR’S THESIS AUTOR PRA´ CE TOMA´ Sˇ KRA´ LI´K AUTHOR VEDOUCI´ PRA´ CE Ing. IVO Rˇ EZNI´Cˇ EK SUPERVISOR BRNO 2011 Abstrakt Předmětem této bakaláøské práce byl návrh rozšířeného HTML editoru. Ètenáø je nejdříve seznámen s jazyky HTML a JavaScript. Následuje pøehled existujících WYSIWYG HTML editorù a jejich srovnání. Pro navržení rozšířeného HTML editoru bylo nutné specifikovat nevýhody existujících editorù, ze kterých vznikly požadavky na roz¹ířený editor. Tento byl následně navržen a implementován v jazyce JavaScript zapomoci knihovny Dojo. Pro testování byly navrženy dvě ukázkové webové aplikace: blog a encyklopedie. Aplikace blog byla využita také pro testování uživatelského rozhraní. V prùběhu testování si uživatelé vyzkou¹eli navržený editor a editor TinyMCE. Na závěr jsou shrnuty výsledky testování a možná budoucí práce na navrženém editoru. Abstract Subject of this bachelor's thesis was design of extended HTML editor. Reader is familiarized with HTML and JavaScript languages at first. Following is overview of existing WYSIWYG HTML editors and their comparison. The design of extended HTML editor requires a spe- cification of disadvantages of existing editors. From these, the requirments for extended HTML editor were formed. The editor was designed and implemented using JavaScript and Dojo library. Two web applications were created for testing: blog and encyclopedia. The blog application was used for an user interface testing. Users tried out designed editor and editor TinyMCE during the testing. The results of the testing are summarized in conclusion together with proposal of a future work. Klíčová slova WYSIWYG editor, HTML, Javascript, TinyMCE, uživatelské rozhraní Keywords WYSIWYG editor, HTML, Javascript, TinyMCE, user interface Citace Tomá¹ Králík: Rozšířený HTML Editor, bakaláøská práce, Brno, FIT VUT v Brně, 2011 Rozšířený HTML Editor Prohlášení Prohla¹uji, že jsem tuto bakaláøskou práci vypracoval samostatně pod vedením pana Ing. Ivo Řezníčka. Uvedl jsem v¹echny literární prameny a publikace, ze kterých jsem èerpal. ....................... Tomá¹ Králík 16. května 2012 Poděkování Chtěl bych na tomto místě poděkovat vedoucímu mé bakaláøské práce panu Ing. Ivo Řez- níčkovi za ochotu, trpělivost a odborné poznámky k této práci. c Tomá¹ Králík, 2011. Tato práce vznikla jako školní dílo na Vysokém učení technickém v Brně, Fakultě informa- čních technologií. Práce je chráněna autorským zákonem a její užití bez udělení oprávnění autorem je nezákonné, s výjimkou zákonem definovaných případů. Obsah 1 Úvod 3 2 Znaèkovací jazyk HTML4 2.1 Historie......................................4 2.1.1 ENQUIRE { Poèátky Hypertextu...................4 2.1.2 První specifikace.............................4 2.1.3 Vývoj jazyka HTML...........................5 2.1.4 XHTML..................................7 2.2 Popis jazyka HTML...............................7 2.3 Budoucnost jazyka HTML............................8 2.3.1 HTML5..................................8 3 Skriptovací jazyk JavaScript9 3.1 Historie a vývoj jazyka JavaScript.......................9 3.2 Základní rysy jazyka JavaScript......................... 10 3.2.1 Imperativní a strukturovaný jazyk................... 11 3.2.2 Dynamický jazyk............................. 11 3.2.3 Funkcionální jazyk............................ 11 3.2.4 Prototypové objektově orientované programování........... 12 4 Existující WYSIWYG HTML editory 14 4.1 TinyMCE..................................... 14 4.2 CKEditor..................................... 14 4.3 elRTE....................................... 15 4.4 Ghost Edit.................................... 16 4.5 CLEditor..................................... 17 4.6 dijit.Editor.................................... 17 4.7 YUI Rich Text Editor.............................. 17 4.8 Srovnání...................................... 17 5 Návrh a implementace HTML editoru 20 5.1 Specifikace negativních vlastností existujících řešení............. 20 5.1.1 Nestabilita výsledného kódu a zobrazení................ 20 5.1.2 Příliš mnoho voleb, které uživatel nepotøebuje............ 21 5.1.3 Poloviční WYSIWYG.......................... 21 5.1.4 Obtížně editovatelné složité dokumenty................ 21 5.1.5 Obtížná kontrola ze strany webdesignéra................ 22 5.2 Návrh editoru................................... 23 1 5.2.1 Konceptuální návrh........................... 24 5.2.2 Volba knihovny.............................. 24 5.2.3 Diagram tříd............................... 25 5.2.4 Implementace zásuvných modulù.................... 27 5.3 Výsledná implementace............................. 30 5.4 Demonstrační aplikace.............................. 31 5.4.1 Testovací aplikace A - administrační rozhraní jednoduchého blogu. 31 5.4.2 Testovací aplikace B - správa èlánku encyklopedie.......... 32 6 Testování 33 6.1 Metodika testování................................ 33 6.2 Výsledky testování................................ 34 6.2.1 Zaèátečnící a méně pokročilí uživatelé................. 34 6.2.2 Středně pokročilí uživatelé........................ 35 6.2.3 Pokročilí uživatalé............................ 35 6.3 Souhrn testování................................. 35 7 Závěr 36 A Obsah CD 41 B Dotazník pøed testováním 42 C Protokol o testování 44 D Testovací dokument 46 2 Kapitola 1 Úvod Tvorba a sazba psaných dokumentù na počítači je v dnešní době naprostou samozřejmostí. Stále častěji se tato práce provádí v prostředí internetového prohlížeče (dále jen prohlížeče) z dùvodu přímé publikace dokumentu na internetu. Jedním z hlavních požadavkù na editory textu v prohlížeči je výstupní formát ve zna- èkovacím jazyce HTML. Dalším požadavkem je tzv. efekt \WYSIWYG" (z angl. What You See Is What You Get - co vidíš to dostane¹), tedy efekt kdy už v prùběhu tvorby dokumentu vidí uživatel výslednou podobu dokumentu tak, jak bude publikován. Nejčastěji jsou uživatelùm pøedkládána řešení založená na textových procesorech Micro- soft Office Word nebo LibreOffice Writer. Av¹ak technologie spjaté s internetovými pro- hlížeči umožňující tvorbu těchto editorù nejsou dostatečně standardizovány[23] a tudíž se jejich tvorba stává problematická. Předmětem této práce je tvorba rozšířeného HTML editoru. Motivací pro tuto práci jsou zejména negativní vlastnosti existujících øešení. Existující editory nejsou pro webdesignéra dostatečně flexibilní. Uživatel má buď příliš velkou volnost, nebo je příliš omezován v mož- nostech formátování dokumentu. Webdesignér tak stojí pøed otázkou jak docílit potøebné rovnováhy. Také uživatelské rozhraní založená na Microsoft Office Word nebo LibreOffice Writer nejsou v prostředí internetového prohlížeče příliš pohodlná a uživatele èasto mate rùzné chování oproti těmto klasickým editorùm. Navrhovaný editor by měl tyto a další problémy specifikované v této práci umět øe¹it. V následujících kapitolách se nejprve seznámíme se základními nástroji, které budou použity { jazyky HTML a JavaScript { jejich historií a významnými znaky. Dále se sezná- míme s existujícími HTML editory a provedeme jejich srovnání. Následuje hlavní èást této práce { návrh a implementace rozšířeného HTML editoru. Návrh editoru vychází zejména ze specifikace negativních vlastností existujících editorù, která kapitole s návrhem pøed- chází. Implementovaný editor je pro testovací úèely nasazen do dvou zvlá¹» vytvoøených aplikací (blog a encyklopedie). Po popisu ukázkových aplikací následuje testování navrže- ného editoru, popis metodiky testování a souhrn testování. V závěru se věnuji zhodnocení testování a návrhu pro pokraèování v práci na editoru. 3 Kapitola 2 Znaèkovací jazyk HTML Jazyk HTML[17] je znaèkovací jazyk vycházející z jazyka SGML[16] (Standard Generalized Markup Language). SGML je systém sloužící k definici strukturovaných typù dokumentù a znaèkovacích jazykù, které tyto soubory vytváří. V jazyku HTML lze vytváøet dokumenty, které se pøi interpretaci prohlížeèem pøevedou na uživatelsky přívětivou reprezentaci. Jazyk HTML je majoritním jazykem pro reprezentaci internetových stránek. V této kapitole se seznámíme s historií tohoto jazyka, jeho postupným vývojem, popíšeme si základy tohoto jazyka a shrneme budoucí vývoj. 2.1 Historie 2.1.1 ENQUIRE { Poèátky Hypertextu Za pøedchùdce hypertextových dokumentù, tedy dokumentù provázaných mezi sebou po- mocí odkazù je považován systém ENQUIRE[4]. Tento systém byl vyvinut pro CERN v roce 1980 britským informatikem Timem Berners-Leem. ENQUIRE sloužil pracovníkům v CERNu k vytváření technických dokumentù a jejich propojování. Èasem se v¹ak zaèalo ukazovat, že údržba dokumentù a zejména jejich propo- jení stojí pracovníky příliš mnoho èasu. Vznikla potøeba po systému podobném ENQUIRE, ale přístupném a ¹kálovatelném (ve smyslu zjednodušení spojení mezi dokumenty tak, aby se v prùběhu èasu mohly dokumenty spojovat bez žádných dalších úprav v samotných dokumentech). Tak vznikl první koncept webu. 2.1.2 První specifikace