České vysoké učení technické v Praze Fakulta elektrotechnická
Bakalářská práce
Intuitivní tvorba webových stránek Ondřej Tecl
Vedoucí práce: Doc. Ing. Ivan Jelínek, CSc. Studijní program: Elektrotechnika a informatika dobíhající bakalářský Obor: Informatika a výpočetní technika květen 2006
ii
Poděkování: Na tomto místě bych chtěl poděkovat vedoucímu práce panu Doc. Ing Ivanovi Jelínkovi, CSc. za jeho rady ochotu a trpělivost.
iii
iv
Prohlášení: Prohlašuji že jsem svou bakalářskou 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 autorském právu, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon) V Chotěboři dne 20.6.2006
….............................................
v
vi
Abstract This work is about writing static web pages from view of direct coding in (X)HTML by means of suitable editor tools. There are some available freeware editors described and most of their features discussed. The main goal of this thesis has been an implentation of such web editor in a intuitive way.
Abstrakt Tato práce se zabývá tvorbou statických webových stránek z hlediska přímého psaní kódu (X)HTML kódu pomocí editorů k tomu určených. Dokumentuje některé dostupné freeware editory a popisuje jejich vlastnosti. Záměrem je stanovit obecné vlastnosti takového editoru a konečným vyústěním je pokus o implementaci vlastního s důrazem na intuitivnost.
vii
viii
Obsah 1 Úvod..........................................................................................................12 2 Tvorba webových stránek..........................................................................12 3 Jazyky SGML a XML................................................................................12 3.1 Historie jazyků SGML a XML..........................................................12 3.2 Několik slov o syntaxi a vlastnostech XML......................................13 4 Editory.......................................................................................................15 4.1 HTML-Kit .........................................................................................15 4.1.1 Instalace......................................................................................16 4.1.2 GUI - Grafické uživatelské rozhraní..........................................16 4.1.3 Hodnocení..................................................................................19 4.2 PSPad.................................................................................................19 4.2.1 Instalace:.....................................................................................20 4.2.2 GUI - Grafické uživatelské rozhraní..........................................20 4.2.3 Hodnocení..................................................................................22 4.3 Golden HTML Editor.........................................................................22 4.3.1 Instalace......................................................................................23 4.3.2 GUI - Grafické uživatelské rozhraní..........................................23 4.3.3 Hodnocení..................................................................................25 4.4 Bluefish..............................................................................................25 4.4.1 Instalace:.....................................................................................26 4.4.2 GUI - Grafické uživatelské rozhraní..........................................26 4.4.3 Hodnocení..................................................................................28 4.4.4 Quanta Plus................................................................................28 4.4.5 Instalace......................................................................................28 4.4.6 GUI - Grafické uživatelské rozhraní..........................................28 4.4.8 Hodnocení .................................................................................30 4.5 Screem................................................................................................30 4.5.1 GUI - Grafické uživatelské rozhraní..........................................30 4.5.2 Hodnocení..................................................................................32 4.6 Závěrem o představených editorech..................................................32 5 Vlastnosti non-WYSIWYG editoru pro (X)HTML...................................33 6 Implementace non-WYSIWIG editoru......................................................35 6.1 Volba jazyka.......................................................................................35 6.2 Základní kameny.............................................................................35 6.3 Stavba GUI textového editoru............................................................35 6.4 Swing a textové komponenty.............................................................36 6.4.1 MVC...........................................................................................36 6.4.2 JTextComponent.........................................................................36 6.5 Problémy implementace editoru a výsledky......................................37
ix
x
xi
1 Úvod Žijeme v době informačních technologií, zvykli jsme si na snadnou dostupnost informací, na které má největší podíl internet. Počítačová gramotnost se stává, jestli už se nestala, součástí obecné gramotnosti. Schopností publikovat na internetu se již dávno nevyznačují jen lidé z oblasti informatiky, ale i lidé z jiných oborů či zájmových oblastí. 1. kapitola pojednává o způsobu tvorby webových stránek. Ve 2. kapitole je nastíněn zrod jazyka XML jeho možností a co z toho plyne pro publikaci (nejen) na internetu. 3. kapitola popisuje některé freeware editory. Byly vybrány ty nejpoužívanější. 4. kapitola shrnuje obecné vlastnosti editorů pro tvorbu internetových stránek. 5. kapitola popisuje implementaci editoru
2 Tvorba webových stránek V současné době existují tři způsoby tvorby webových stránek. • použití WYSIWYG editoru • přímé psaní kódu značkovacího jazyka • kombinace obojího Při použití WYSIWYG editoru nemusí autor stránek téměř naprosto nic tušit o nějakém značkovacím jazyku. Stránka se tvoří „naklikáním“ jejích prvků bez nutnosti ručního zásahu do kódu. Výsledek je ihned vidět. Způsob tvorby na takovéto úrovni znalostí přináší také značnou nevýhodu. Tou je nemožnost kontroly výsledného výstupu editoru, tedy html souboru značkovacího jazyka html nebo xhtml , css a dosáhnout tak vhledu který editor neumí vygenerovat. Přímé psaní kódu naopak přináší naprostou kontrolu nad výsledným kódem, který je omezen pouze znalostmi autora stránky. Nevýhodami jsou , chyby a překlepy v syntaxi, pracnost psaní, nutnost psát stránku od základu, průběžně kontrolovat vzhled v prohlížeči apod. Na rozdíl od dříve zmíněného způsobu je ale možno takto vytvořit webovou stránku prakticky všude kde je program pro editaci souborů. Nedostatky obou způsobů se někdy řeší jejich kombinací a to tím způsobem, že se navrhne jakási kostra webu a výsledný kód se upravuje ručně. Tento způsob značně urychluje vznik stránky, ovšem může se vyskytnout několik překážek znesnadňujících jeho užití. Může to být nepřehlednost generovaného kódu, generování nadbytečného kódu nebo nemožnost načíst soubor, který nebyl vytvořen v daném WYSIWYG editoru, který používá tvůrce stránky.
3 Jazyky SGML a XML 3.1 Historie jazyků SGML a XML Někdy v 60. letech minulého století vytvářeli pánové Charles Goldfarb, Edward Mosher a Raymond Lorie systém, který měl umožnit ukládání a následné využití právních textů firmy IBM. Vznikla potřeba obecného jazyka, který by vyznačoval logickou strukturu dokumentu. Důvodem, byla značná nekompatibilita tehdejších systémů a programů. Výsledkem byl jazyk GML.
2
Zde se dá polemizovat, jestli se jedná o zkratku utvořenou z počátečních písmen autorů, nebo zda jde o General Markup Language. Standardizační společnost ANSI následně v 80letech vyvíjela jazyk umožňující uživateli definici vlastní sady značek pro nějaký typ dokumentu. Mimo jiné se nechala značně inspirovat jazykem GML. Produktem tohoto projektu je jazyk SGML, který je od roku 1986 definován také v ISO-8879. Jazyk SGML je značně obecný. Umožňuje definovat vlastní značkovací jazyk pro nejrůznější účely pomocí DTD (Document Type Definition), kde se definuje sada značek a jejich vztahy včetně mnoha dalších parametrů. Komplexnost jazyka SGML poněkud zbrzdila jeho praktické využití. Později se mu dostalo podpory ze strany amerického ministerstva obrany, které požadovalo od svých dodavatelů dokumentaci nezávislou na proprietárním prostředí a použitelnou v delším časovém období. Samozřejmě nejznámějším použitím SGML je jazyk HTML (HyperText Markup Language ) a to takovým způsobem, že se o SGML dozvíte spíše ve spojitosti s HTML než obráceně. HTML je opět definován pomocí DTD. Jeho sada značek a pravidel je však oproti obecnému SGML natolik jednoduchá, že se záhy ocitl ve velké oblibě uživatelů. Paradoxně díky jeho omezením ze které plyne jeho jednoduchost, došlo k jevu, kdy se začala ztrácet struktura dokumentu. Důvodem byl omezený počet značek, který přestal stačit současným požadavkům pro strukturalizaci dokumentu, ze kterého by bylo možné strojově vyčíst informace. Dalším důvodem s tímto spojeným bylo používání některých značek například pro tabulky k úpravě zobrazení dokumentu. Tento problém by mohl vyřešit opět jazyk SGML, ale postupem času se ukázalo, že se v praxi používá jenom určitá část tohoto jazyka. Vzniklá podmnožina se nazývá XML (eXtensible Markup Language). XML definuje sadu značek a pravidel stále pomocí DTD, nicméně pravidla syntaxe jsou značně přísnější než v SGML. Mnoho parametrů je předem určeno a není možné je měnit např. maximální délka názvů značek, použité oddělovače a speciální znaky atd. XML už rovnou počítá s podporou všech možných jazyků. Pro pořádek uvádím, že o webové technologie ve kterých jsou zahrnuty XML, HMTL a další se od roku 1994 stará organizace W3C (World Wide Web Consorcium). Od svého vniku vydala přes 90 doporučení.
3.2 Několik slov o syntaxi a vlastnostech XML Syntaxe jazyka XML je podobná HTML. Má však několik odlišných vlastností, které se jeví jako přísnější. ● ● ● ● ●
Názvy tagů se píší pouze malými písmeny. <para>Lorem Ipsum Všechny tagy jsou párové i prázdné (bez obsahu). Tagy bez obsahu je možné zapsat zkráceně:
Není možné vzájemně tagy křížit. Musí být zachována závorková struktura. Každý XML dokument musí být obsažen v jednom kořenovém elementu. Hodnoty atributů jsou uváděny jako řetězce v uvozovkách. <param atr=“value“/>
3
●
Pokud nepoužíváme kódování UTF-8 nebo UTF-16 musíme ho specifikovat v XML deklaraci která vypadá například takto
Současná používaná verze je XML 1.0, která spatřila světlo světa v roce 1998 a v roce 2000 byla mírně upravena. XML je vhodné pro vytváření vlastních typů dokumentů, které mohou přečíst i ostatní programy díky uvedenému DTD. Lze ho využít například pro účely konfiguračních souborů, definici schémat databáze, výměně dat mezi různými systémy. Zároveň je možné převádět XML dokumenty do jiných formátů jako jsou např. PostScript či PDF. Výhodou XML dokumentů je, že mají vhodnou strukturu pro strojové zpracování a hlavně že jsou textové, tudíž je může číst i člověk bez zvláštního nástroje. Již jsem se zmínil, že XML dokumenty mají určitou strukturu, ale zatím jsem neřekl co to znamená pro webové stránky. XML tagy samy o sobě neobsahují jak se mají v prohlížeči zobrazit. Způsob zobrazení se určuje pomocí CSS (Cascading Style Sheets), které má své počátky již v SGML nebo pro náročnější aplikace XSL (eXtensible Stylesheet Language). Vytvoří se tedy vlastní dokument a pomocí stylovacího jazyka se definuje zobrazení jednotlivých značek. XML sice poskytuje možnost vytvářet vlastních typů dokumentů, ale často jsou k dispozici již hotová DTD. Vzhledem k rozšíření HTML by bylo vhodné převést tento značkovací jazyk do XML. O to se již ale postarala organizace W3C a prvním výsledkem bylo XHTML 1.0 které odpovídá HTML 4.01. Rozdíl spočívá v tom, že XHTML vyhovuje syntaxi XML. Uvedená verze je zatím nejrozšířenější, přesto že už existuje veřejný návrh XHTML 2.0. V dnešní době již nejsou internetové stránky zobrazovány pouze v prohlížeči na osobním počítači, ale počítá se zařízeními s různými zobrazovacími schopnostmi. Z tohoto důvodu dochází k určité modularizaci a do budoucna se s HTML jako takovým nepočítá, jeho vývoj byl ukončen. Pro XHTML 1.0 existují tři DTD • XHTML 1.0 Transitional – obsahuje ještě některé prezentační značky. Má spíše význam pro starší prohlížeče které očekávají HTML • XHTML 1.0 Frameset – totožný s Transitional ale navíc umožňuje použití rámců • XHTML 1.0 Strict - „nejpřísnější verze“ ovšem vzhledem k tomu, že rámce (Frames) jsou považovány za zastaralé, a způsob zobrazení by se měl nechat na CSS, nic nebrání jeho použití ani začínajícím autorům Další informace o XML se lze dočíst v [1] nebo [5] o XHTML v [6] Pro začátečníky v CSS je vhodná publikace [3]
4
4 Editory 4.1 HTML-Kit Verze: 1.0 domácí stránky produktu: www.html-kit.com platforma: Windows Jedná se o editor navržený pro editaci HTML, XHTML a XML. Dále disponuje nástroji pro validaci, náhled a publikaci na webu. Také dodatečně obsahuje podporu pro skriptovací jazyky. Nováčkům v oboru web-designu nabízí syntaxe a zvýrazňování chyb. Poskytuje návrh vytvoření standardních stránek. Expertům nabízí úsporu času přizpůsobením vývojového prostředí a možnost pracovat s mnoha různými typy souborů najednou. HTML-Kit podporuje soubory pro : HTML, XHTML, CSS XML, XSL JavaScript, VBScript ASP, PHP, JSP Pearl, Python Java, Visual Basic, C/C++, .NET, C#, Delphi, Pascal, Lisp SQL V duchu centralizace nástrojů pro webovou tvorbu tento editor obsahuje různé typy náhledů. • • • • • • •
● ● ● ●
Interní - náhled ve vnitřním prohlížeči editoru Externí – náhled v browseru instalovaném na počítači „server – side“ - neodzkoušeno, zřejmě se jedná o náhledy v případě JSP stránek apod. „live“ - náhled generovaný na základě aktuálního i neuloženého souboru.
Náhledy je možné si prohlédnout v různých rozlišeních. Dále obsahuje nástroj pro manipulaci se soubory prostřednictvím FTP určeným pro upload, download a dokonce i online editaci. Do editoru je možné nahrát spoustu dalších pluginů vhodné při konkrétnějším použití jedné z podporovaných technologií. Např při programování je to plugin pro dokumentaci kódu a mnoho dalších. Asi nejpodstatnějším pro naši zeměpisnou polohu je amConvertCodePage.
5
Tento plugin umožňuje převádět soubory mezi kódováními pro středoevropské a východoevropské jazyky : ● Windows-1250 ● ISO-8859-2 ● CP852 Poslední build umožňuje dávkové akce jako globální vyhledání a nahrazení výrazu ve více souborech, Internet Explorer a Mozilla/Netscape náhledy. Z hlediska tvorby stránek je zajímavý nástroj HTML Tidy. Je to nástroj kontrolující a opravující časté chyby při psaní stránek jako křížení tagů, neukončení tagů ale i upravuje html do určité čitelnější či strukturovanější podoby. Následuje výpis některých dalších vlastností HTML-Kit: ● podpora drag&drop (přetažení) ● zvýrazňování syntaxe v reálném čase, různé zvýrazňovací módy ● možnost definovat klávesové zkratky pro různé akce: vložení tagu, textu, spuštění položky menu apod. ● výběr slov ● zvýrazňování důležitých částí dokumentu(něco jako fix) ● ukládání souborů ve Windows nebo Unix formátu ● automatické zálohování po x minutách buď do složky nebo s přidáním přípony k souboru ● vypínatelné doplňování slov ● rozšiřitelný pravopisný slovník ● upload souborů pomocí drag&drop ● validace interně nebo externě pomocí W3C validátorů ● Šablony a kousky kódů (anglický výraz snippet) ● rozšiřitelný pravopisný slovník
4.1.1 Instalace Spočívá ve spuštění instalačního souboru o velikosti 2,8MB. Instalace probíhá klasickým způsobem během pár kliknutí myši, na jaký jsme ve Windows zvyklí. Po prvním spuštění HTML-Kit nabízí několik voleb, které je možné později změnit. Jedná se o asociaci souborů, přidání voleb do kontextového popup menu ve Windows, přidání programu do oblasti rychlého spuštění , ověření verze editoru, nastavení náhledů stránek v browserech instalovaných na počítači. Při po odinstalování nezůstávají žádné zapomenuté adresáře nebo soubory.
4.1.2 GUI - Grafické uživatelské rozhraní Centrální panel Panel pro vlastní editaci textu. V této oblasti se nacházejí okna odpovídající jednotlivým souborům. Lze je poskládat vertikálně, horizontálně. Bohužel se po maximalizaci okna skryjí ovládací tlačítka pro okno souboru, což je poněkud matoucí a do „původního“ stavu se dají uvést přes menu.
6
Panel akcí Nachází se nad centrálním panelem. Obsahuje tlačítka s ikonami pro vkládání tagů a CSS. Ikony jsou poměrně povedené. Daří se jim z velké části znázornit funkci, kterou tlačítko zastupuje. Jsou navíc tématicky roztříděné pomocí záložek, takže nedochází k zahlcení uživatele velkým množstvím ikon. Nechybí ani alternativní popisky, díky kterým uživatel nemusí dlouze přemýšlet nad jejich smyslem. V případě CSS jsou tu tlačítka pro komentář, selektory a vlastnosti. Pod tlačítkami pro selektory a vlastnosti se skrývá seznam s příslušnými hodnotami.
Panel nástrojů Představuje to co se často označuje anglickým výrazem Toolbar. Nachází se na obvyklém místě pod hlavním menu programu. Nabízí klasické funkce které se od editoru očekávají.
Navigační panel Tento panel se nachází poněkud nezvykle vpravo od centrálního panelu. Panely pro tento účel bývají umísťovány nalevo. Obsahuje stromovou strukturu pro šablony, dokumenty a FTP.
7
Obr. 1: XHMLT v HTML-Editor-Kit
Obr. 2 : CSS v HTML-Kit
8
4.1.3 Hodnocení HTML-Kit je velmi vydařený freewarový editor. Mezi jeho velké přednosti určitě patří formátování souborů jak ve stylu Windows tak Unix a plugin pro znakové kódování Českého jazyka. Další pozitivum můžeme spatřit v definici dokumentu XHTML, která se vkládá tak jak má v pořadí: definice xml, dokumentu definice DTD a definice jmenného prostoru v kořenovém tagu. Ačkoli by se to dalo považovat za samozřejmost, některé editory toto opomíjejí. Jeho robustnost je zároveň jeho výhodou i nevýhodou. Různé nastavování a přizpůsobování není až tak intuitivní záležitostí a proto seznamování s tímto editorem zabere uživateli více času. Odměnou mu bude mocný flexibilní nástroj. Začínající autor webových stránek se v něm však může lehce ztratit.
4.2 PSPad verze: 4.5.1 platforma: Windows stránky: http://www.pspad.com/cz/ PSPad je jeden z nejznámějších freeware editorů na českém internetu. Byl napsán v Delphi Janem Fialou. Uvádím některé z jeho vlastností. • Práce s projekty • podpora HTML, XML, XHTML, CSS • možnost více otevřených dokumentů současně • vyhledávání a nahrazování výrazů • porovnávání textu s barevným odlišením • šablony • možnost uživatelsky definovat klávesové zkratky • konverze češtiny mezi Windows-1250, unicode, ISO-8859-2, Latin II, Kameničtí • podpora souborů ve formátu Unix, Mac a Windows • zvýraznění syntaxe • tisk zvýrazněné syntaxe • knihovna Tidy pro kontrolu HTML, převod do XHTML a CSS, přeformátování kódu • ASCII tabulka • interaktivní náhled pomocí jádra MSIE nebo Mozilla • Lorem ipusum generátor
9
4.2.1 Instalace: Velikost instalátoru 2,7MB Instalace probíhá opět v klasickém stylu pro Windows bez nutnosti zvláštních voleb.
4.2.2 GUI - Grafické uživatelské rozhraní Centrální panel Zde se zobrazuje právě editovaný dokument. Pokud je otevřeno více dokumentů najednou, lze s nimi manipulovat pomocí záložek, které uživatel nalezne v horní části tohoto panelu. Manipulací se myslí přepínání, zavírání ukládání, porovnávání a podobné operace.
Panel nástrojů Představuje ho jeden panel rozdělený do několika částí, u nichž můžeme změnit viditelnost. Pro editaci html kódu tu nejsou nijak zvlášť důležitá tlačítka snad kromě nástroje pro výběr barev (color chooser)
Levý panel Defaultně obsahuje záložky, pod nimiž se skrývají stromové struktury pro správu souborů, projektů, manipulaci se soubory přes FTP, oblíbené položky a okno se seznamem otevřených souborů.
Pravý panel Zde se znázorňuje struktura dokumentu ve stylu DOM (Document Object Model), který lze využít pro navigaci v dokumentu.
10
Obr. 3 : XHTML v PSPad
Obr. 4 : CSS v PSPad
11
4.2.3 Hodnocení PSPad je malý výkonný editor vhodný pro tvorbu webových projektů, jak pro začátečníky tak pro pokročilé. Nabízí několik pomocných nástrojů buď ulehčující nebo urychlující psaní html stránek. Patří mezi ně např. makra, šablony, Html Tidy a další menší nástroje, které zůstávají začínajícímu uživateli skryty. Má ovšem i několik slabin. Například při volbě definice dokumentu XHTML se nevygeneruje doporučovaná definice W3C. Vkládání tagů není „klikací“ jako u některých jiných editorů. Uživatel začátečník tak nemá před sebou přehledný seznam použitelných značek. Způsob jakým se nastavují klávesové zkratky také není úplně zřejmý. Toto ovšem překonává skutečnost, že se jedná o český nástroj s dobrou podporou na domácích stránkách a diskusním fóru tamtéž. Lze tam nalézt řadu návodů nejenom k tomuto editoru. Několik článků vyšlo i na www.interval.cz PSPad obsahuje také funkční integrovanou nápovědu. Český uživatel se tak i zadarmo vyrovná s neznalostí anglického jazyka. Bohužel bude asi navždy určen jen pro uživatele Windows. Autor sám tvrdí, že nevidí možnost jak tento editor portovat na Linux aniž by to znamenalo napsat ho pro něj znovu. Je to dáno způsobem jakým je tento nástroj napsán.
4.3 Golden HTML Editor verze: 4.8.3 platforma: Windows Posledním z vybraných editorů pro Windows je Golden HTML Editor. Jedná se o český do verze 5 freeware a bude verze 5 shareware editorem jehož autorem je Pavel Polák. Tento nástroj je vyvíjen od roku již 1996 a soudě podle www.stahuj.cz ho má řada českých uživatelů v oblibě. Uvádím některé z jeho vlastností • práce s projekty • správa souborů přes FTP • možnost pracovat s dokumenty on-line pomocí HTTP FTP • podpora virtuálních adresářů projektu • práce s více otevřenými soubory najednou • možnost vytváření vlastních šablon v podobě snippetů • vyhledávání a nahrazování slov pomocí regulárních výrazů • možnost importu tabulek z csv souborů • podpora více znakových sad (Windows-1250, ISO-8859-2) • podpora souborů ve formátu Windows, Unix, Mac • nástroj pro výběr barev • analýza odkazů v dokumetu • režim náhledu
12
•
podpora pluginů
Podporované jazyky: • HTML, CSS, PHP • VBScript, Java, Pearl, • Java, Pascal • SQL
4.3.1 Instalace Opět klasická v duchu operačního systému Windows až ne jednu menší odlišnost. Tou je nutnost registrace přes email a zadání zaslaného klíče. Bez této registrace je program omezen na určitý počet spuštění.
4.3.2 GUI - Grafické uživatelské rozhraní Centrální panel V případě více otevřených souborů se na jednotlivé dokumenty můžeme odkazovat pomocí malých tlačítek umístěné v dolní části.
Panel akcí Panel akcí je řešen podobně jako v případě HTML-Kit, tedy tlačítka jsou tematicky roztříděna podle záložek. Všechna tlačítka jsou popsána případně doplněna ikonami. Toto řešení je možná graficky chudší, zato je ihned jasné k čemu slouží, pokud ovšem uživatel ovládá HTML.
Panel nástrojů Použité ikony pro tlačítka v tomto panelu jsou vhodně zvoleny. Jsou blízké ikonám např z MS Office a proto lze jejich význam většinou snadno odhadnout. Není jich příliš a lze si bez obtíží zapamatovat. Samozřejmě nechybí alternativní popisky.
Levý panel Tento panel obsahuje tlačítka určená k možná nejčastěji prováděným operacím. Jedná se o vložení odstavce, odkazu, komentáře, speciálního znaku, zarovnání a spuštění dialogu pro rychlé vkládání.
Pravý panel Slouží k rychlému otevírání souborů, zobrazení seznamu známých tagů. Nalezneme zde také panel pro poznámky a kontrolu odkazů.
13
Obr. 5 : XHTML v Golden HTML Editor
Obr. 6 : CSS v Golden HTML Editor
14
4.3.3 Hodnocení Golden HTML Editor je poměrně vhodný nástroj pro začátečníky na poli HTML také díky odkazům na výuku HTML v češtině a podrobný popis tagů. Obsahuje několik dobře použitelných integrovaných nástrojů zmíněných výše. Zajímavý je způsob vytváření CSS, které je řešeno jedním velkým formulářem. V tomto formuláři se nastavuje vše, selektor, vlastnosti a hodnoty. Editor má ovšem některé nedostatky, které mohou od používání tohoto nástroje odradit. Při prvním spuštění je nastavena barva pozadí a popředí centrálního panelu pro editaci na černou barvu. Po otevření nového html souboru se tedy objeví modře zvýrazněné tagy u kterých navíc nejsou vidět omezující znaky „<“ a “>“. Teprve po zvoleni defaultního nastavení kdesi v nastavení je vše napraveno. Dále umožňuje vložit DTD pouze do HTML 4.0. Neobsahuje žádnou podporu pro XML tudíž ani pro XHTML. Navíc počáteční nastavení velikosti písma tagů je nastaveno na VELKÉ. Aby uživatel mohl využít vkládání tagů, které nástroj nabízí, musí opět hledat zaškrtávací políčko v nastavení a „odznačit tagy velkým písmenem“. Teprve potom lze psán XHTLM dokumenty ovšem uživatel musí dávat pozor na nepárové tagy.
4.4 Bluefish platforma: Linux Současná stabilní verze: Bluefish 1.0.5 (březen 2006) Autoři o tomto nástroji tvrdí že při startu potřebuje pouze 40-45% paměti toho co potřebuje Quanta a Screem. Za plného běhu 33%. Může lehce pracovat s více něž s 500 dokumenty najednou. Tento editor údajně obstál při testu na 3500 současně otevřených dokumentech. Podporuje vytváření projektů. Umožňuje práci se soubory pomocí knihovny gnome-vfs, což dovoluje spravovat soubory vzdáleně pomocí: ● FTP, SFTP ● HTTP, HTTPS ● WebDAV ● Samba Bluefish je silný editor pro zkušené web designery a programátory, který podporuje také mnoho programovacích a skriptovacích jazyků. ● HTML, CSS, XML, PHP, JSP ● C, Java, Pascal, R ● JavaScript, Python, Perl, ● ColdFusion ● Octave/Matlab ● SQL . Podporuje mnoho znakových kódování. Obsahuje několik wizardů např pro tabulky, dialogová okna pro HTML tagy. Usnadňuje práci s obrázky pomocí thumbnail, dokonce i vytváření alb. Mezi jeho příjemné vlastnosti také patří automatické uzavírání HTML a XML tagů.
15
4.4.1 Instalace: Podporované operační systémy: Většina Linuxových distribucí, BSD, Sun Solaris, Mac OS X, HP-UX S určitými omezeními i Windows pomocí Win32-cygwin. Bluefish používá knihovny gnome. Z toho vyplývají určité dodatečné požadavky na přítomnost knihoven na bežícím systému. Vyžaduje: ● ● ● ●
GTK 2.0 nebo novější (doporučená verze je 2.4 a vyšší) libcre 3.0 nebo vyšší volitelně libaspell 0.50 nebo vyšší pro kontrolu "pravopisu" (spell checking) doporučuje se ještě gnome-vfs pro práci se vzdálenými soubory.
Instalaci je možné provést několika běžnými způsoby ve světě Linuxu nijak neobvyklé a to buď kompilací „./configure -> make -> make install“ nebo pomocí binárních balíčků rpm či balíčků distribuce Debian. Tyto způsoby instalace přinášejí jednu nevýhodu. Tou bývá nutnost mít práva superuživatele, což není vždy možné. Velikost stahovaného souboru je menší než 2MB.
4.4.2 GUI - Grafické uživatelské rozhraní GUI je řešeno podobně jako v případě HTML-Kit. Rozdíl je v levém panelu, který obsahuje stromovou strukturu souboru i knihovnu tagů a CSS, které se přepínají pomocí záložkových ikon ve spodní části panelu. Protože program používá knihovny GTK, jsou ikony dostatečně velké a font užitý v záložkách a položkách menu je velmi dobře čitelný, což přispívá ke zlepšení orientace.
16
Obr. 7 : XHTML v Bluefish
Obr. 8 : CSS v Bluefish
17
4.4.3 Hodnocení Bluefish je plnohodnotný pro tvorbu (X)HTML, na kterou je zaměřený především. Vyznačuje se přehledností a jednoduchostí co do použítí. Mezi velké plus patří především povedené wizardy pro tabulky a CSS.
4.4.4 Quanta Plus platforma: Linux Pokud je Bluefish spojen s Gnome respektive s knihovnou GTK, pak Quanta Plus je stejně spojena s desktopovým prostředím KDE. Zároveň se tyto dva editory na předních příčkách oblíbenosti uživatelů. Opět uvádím několik vybraných vlastností • generický xml editor • několik pohledů na jeden dokument : strom DOM, editor a náhled • automatické ukončování tagů • dialog pro vkládání tagů a CSS • náhled stránky už v dialogu pro CSS • podpora CVS • podpora pro vzdálené soubory a projekty • validace XML • možnost přidat další DTD • možnost přidání dalších tagů
4.4.5 Instalace Opět buď kompilace nebo pomocí rpm. Tento nástroj bývá často součástí instalace KDE.
4.4.6 GUI - Grafické uživatelské rozhraní GUI je řešeno skromněji než u předchozích editorů. Opět nechybí panel akcí řešený pomocí záložek členící tlačítka do tematických sekcí. Postranní panely zdánlivě chybí, ale jsou jen zmenšeny ve prospěch centrálního panelu pro editaci dokumentů. V postranních panelech lze nalézt ikony pro zprávu projektů, DOM, dokumentaci, šablony.
18
Ilustrace 4.4.1: Obr. 7 : XHTML v Quanta Plus
4.4.7
Obr. 8 : CSS v Quanta Plus
19
4.4.8 Hodnocení Jedná se o vhodnou alternativu k Bluefish. Nemá tolik podpůrných nástrojů, ale pořád je to velmi dobrý nástroj. Drobná nevýhoda tohoto editoru spočívá ve využívání jádra prohlížeče Konqueror pro náhledy stránek. Při ladění CSS často zobrazí jiný výsledek než např. v Mozilla Firefox, o kterém netvrdím že je lepší ale spíše rozšířenější.
4.5 Screem platforma: Linux Screem je editor zaměřený téměř výhradně na XML/(X)HTML. Navíc podporuje PHP a JavaSript. Jedná se o další nástroj využívající knihovny spojené s desktopovým prostředím Gnome. Obsahuje wizardy pro CSS, formuláře, tabulky atd. Některé z jeho vlastností • podpora CVS • zobrazení struktury dokumentu ve stylu DOM • našeptávač tagů v době psaní • DTD/Doctype parsování • automatické ukončování tagů • kontrola odkazů • interní nebo externí náhled stránky pomocí nastaveného prohlížeče • šablony • vyhledávání a nahrazování výrazů • kontrola pravopisu • zobrazení použitelných tagů ve stromové struktuře • mnoho pomocníků(wizardů) • podpora publikování pomocí protokolů FTP, SFTP, WebDAV
4.5.1 GUI - Grafické uživatelské rozhraní Uživatelské rozhraní působí velice přehledným, střízlivým dojmem. Dominují zde tři panely panely. Pomocí dvou vlevo umístěných vedle sebe může uživatel přepínat mezi nástroji pro náhled, editaci, kontrolu odkazů a zobrazení stromu. Druhý se mění v závislosti na zvolené funkci. Třetí panel je tradičně určen k vlastní editaci dokumentu.
20
Obr. 11 XHTML v Screem
Obr. 12 CSS v Screem
21
4.5.2 Hodnocení V tomto nástroji se lze poměrně dobře zorientovat, díky jeho jednoduchosti a přehlednosti. Uživatel má vždy po ruce některý z wizardů nebo stromovou strukturu tagů. Screem je vhodný i pro začátečníky. Základní funkce editoru si lze osvojit během krátké doby. Jedná se o odlehčenější editor, ale obsažené nástroje plně postačují svému účelu.
4.6 Závěrem o představených editorech Editory pro platformy Windows jsem vybral podle počtu stažení a jejich hodnocení uživateli na stránkách serveru www.stahuj.cz, kde je lze stáhnout. Převládají zde programy právě pro Windows. Pro platformu Linux jsem vybral nejvíce zmiňované na fóru stránek www.abclinuxu.cz s ohledem na to že jsou často součástí balíčků grafických desktopových prostředí KDE a GNOME. Protože se na poli internetu Windows i Unix/Linux často potkávají a jsou u nás nejběžnější, rozhodl jsem se vybrat určitý vzorek běžných a dostupných nástrojů pro danný účel z obou. Každý z uvedených editorů má za sebou několikaletý vývoj. Dá se říci, že směřuje k podpoře mnoha jazyků nejen pro statické stránky, co největší přizpůsobivosti uživateli a rozšiřování o zabudované nástroje pro publikaci kontrolu a náhledy. Dodržují určité zažité konvence rozvržení grafického uživatelského prostředí. Intuitivnost ovládání je pro uživatele úměrná jeho zkušenostem s podobnými editory a znalostem jazyků, které podporují. Začátečníci tedy přece jenom stráví nějaký čas zorientováním se v prosředí konkrétního editoru. Tyto editory jsou rychlejší než většina integrovaných vývojových prostředí. Často mohou posloužit jako rychlejší varianta pro konkrétnější účel jako například studium zdrojového kódu, kde by si jiné vývojové prosředí bralo více systémových prostředků. Shodou okolností jsou editory uvedeny v pořadí jejich komplexnosti od „složitějších“ k „jednodušším“, což je můj subjektivní názor.
22
5 Vlastnosti non-WYSIWYG editoru pro (X)HTML V této kapitole se pokusím shrnout vlastnosti editoru pro přímou editaci (X)HTML vhodný i jako učební pomůcka či nástroj pro tento značkovací jazyk. Zpočátku se jistě bude jednat o jednoduché statické stránky a jejich počet také nebude nikterak veliký. Jedná se tedy především o XHTML 1.0 Strict a CSS. Záměrně neuvádím HTML z následujících důvodů: XHTML vychází z HTML 4.01 a je definováno v souladu s XML. Jedná se vlastně o XML. Vývoj HTML jako takového byl ukončen a proto nemá smysl se jím zabývat. Dnešní prohlížeče webových stránek by již měly plně podporovat XHTML. Dokumenty XML zpracovává XML-parser, který velmi přísně kontroluje syntaxi a na jakékoli chybě skončí, zobrazí chybové hlášení a dokument nezobrazí. Zatímco dokumenty HTML zpracovává HTML-parser, jemuž je už historicky dána nadmíra tolerance, jakoukoli chybu se snaží opravit, chybějící značky domyslet, přebývající přehlédnout, což může vést začátečníka ke špatným návykům. XML dokumenty mohou být díky své struktuře a syntaktickým pravidlům zpracovávány nejrůznějšími nástroji. Nevalidní XML dokument je také většinou odmítnut v opačném případě dochází stejně k chybné interpretaci. Editor by měl obsahovat nějaké pomocné nástroje zobrazující dostupné tagy a vlastnosti CSS. Zvýraznění syntaxe zpřehledňuje daný dokument, jeho strukturu, šetří čas potřebný k jeho pochopení a může pomoci odhalit chybu. Vhodné jsou i nějaké šablony či přednastavené kousky kódu, ze kterých se stránka lépe vytváří. Definovatelné klávesové zkratky především pro často vkládané tagy omezují překlepy a šetří uživateli čas. Uzavírání tagů může být také častým zdrojem chyb a proto automatické uzavírání tagů se jeví jako velmi užitečná vlastnost. Možnost více otevřených dokumentů najednou odstraňuje opakované otevírání několika stejných dokumentů bez ohledu na to, že CSS se vytvářejí v samostatném souboru. V případě grafického uživatelského rozhraní se dá říci, že platí ,alespoň v počáteční fázi, „méně je více“. Uživatel není zaskočen množstvím funkcí daného editoru a může se plně věnovat vlastnímu psaní stránek. Později se začne více věnovat dalším funkcím, vytuší co ulehčuje či urychluje práci. Časem může přejít na komplexnější nástroj, ve kterém se díky předchozím zkušenostem lépe zorientuje a naučí se používat další integrované funkce. Jako nejvíce osvědčené rozvržení GUI prvků se zdá být hlavní centrální panel pro editaci, vedle něho pomocný panel nástrojů například se stromovou strukturou prostoru souborů, výpisem tagů apod. Nad hlavním centrálním panelem bývá často umístěn panel akcí, specifický pro konkrétní účely editoru. Nad ním potom bývá panel nástrojů tzv. Toolbar, kde jsou ovládací prvky pro obecnou editaci jako je copy&paste, uložení, otevření nového souboru. Tyto akce je možné nalézt také v položkách hlavní nabídky. Co se týká náhledů ve vestavěném prohlížeči, zde je tato možnost značně diskutabilní. Je spíše nutné kontrolovat vzhled pomocí prohlížečů, pro které je především určen. Bývají mezi nimi rozdíly v interpretaci CSS, což je způsobeno jejich
23
historickým vývojem. Vhodným externím nástrojem je rozšiřující balíček Mozilla Firefox – webdeveloper, který umožňuje upravovat soubor s definicemi CSS přímo v tomto prohlížeči. Validaci syntaktické správnosti dokumentů je nejlepší provádět pomocí nástrojů na stránkách organizace W3C na www.w3c.org. Kde najdeme validátory pro HTML, XHTML i CSS a lze je brát ze referenční bod. Vzdálená správa souborů vyžaduje komplexnější vestavěný nástroj nejlépe ve spojení s podporou projektů, aby bylo možné celé dílo komfortně přenést na místo svého určení. Není to ovšem nijak důležitá součást editoru protože pro tento účel existuje mnoho nástrojů podporujících i více protokolů.
Shrnutí Vhodný nástroj pro tvorbu webových stránek by měl splňovat alespoň tyto vlastnosti: ● podpora XHTML, separátní definice CSS ● podpora pro definice xml dokumentu a DTD pro XHTML ● kontrola syntaxe v průběhu psaní ● automatické ukončování tagů, vkládání tagů jako páru, pokud jsou párové ● přehledné formuláře alespoň pro vkládání CSS a pro alespoň nejpoužívanější tagy s větším počtem atributů ● podpora kódování pro Windows-1250 i ISO-8859-2 ● co nejjednodušší nebo nejpřehlednější grafické uživatelské prostředí, především jeho rozvržení by mělo být řešeno „tradičně“ viz popisované editory ● nástroj strukturující tagy XHTML např strom pro vkládání
24
6 Implementace non-WYSIWIG editoru 6.1 Volba jazyka Nemusí to být zdaleka první volba, která se má při na začátku implementace rozhodnout, ale v tomto případě s ohledem na mé znalosti jsem se rozhodl pro jazyk Java konkrétně J2SE 1.4.2. Mám s ním nejvíce zkušeností. V této volbě shledávám i několik dalších výhod. Přenositelnost téměř „zadarmo“ na různé operační systémy, které mají instalován JRE (Java Runtime Enviroment), lehce dostupná a přehledná dokumentace knihovních balíčků. Použité knihovní balíčky jsou součástí standardní distribuce, jejich použití je poměrně rozšířené. Lze předpokládat mnoho zdrojů informací.
6.2
Základní kameny
Implementace editoru je mimo jiného z velké části o grafickém uživatelském rozhraní (GUI). V Javě se jedná především o knihovny AWT a Swing. Starší knihovna AWT používá nativní prostředí systému, na kterém program běží. Díky tomuto jsou komponenty z této knihovny rychlejší, ale také jsou závislé na systému. Naproti tomu implementace knihoven v JFC Swing neobsahuje žádný nativní kód. Díky tomu nabízí Swing pestrou paletu komponent. Přebírá ovšem některé prvky od AWT jako správci rozvržení, obsluhu událostí. Mnoho komponent ze Swing má předka v AWT. Doporučuje se využívat především balíčky knihovny Swing. Podrobnější informace o Swingu lze získat z [3][4]
6.3 Stavba GUI textového editoru Textové editory mají z hlediska GUI několik společných rysů. Pokusím se k nim nyní nalézt jejich ekvivalenty v JFC Swing. Většinou se jedná o centrální dominantní plochu, pro editaci textu s postraními panely pro pomocné nástroje. V horní části bývá panel s ikonami pro různé akce. Dolní část bývá vyhrazena pro vypisovaní různých informací o stavu editoru. Toto vše je umístěno v okně s menu. Ve Swingu reprezentuje okno třída JFrame. Obsahuje kontejnery pro nabídku menu JMenuBar a vlastní obsah ContextPane s defaultním správcem rozvržení BroderLayout, který umožňuje vkládat komponenty do pěti oblastí právě tím způsobem, který je popsán pro editor výše. Komponenty lze vkládat do kontejnerů JPanel, a v nich pak nastavovat správce rozvržení LayoutManager. JPanely s různými správci rozvržení lze do sebe libovolně zanořovat a vytvářet tak požadovaná rozvržení komponent. Do instance třídy JFrame lze vložit také panel nástrojů JToolBar, který obsahuje ikony nebo tlačítka reprezentující některé nějčastěji používané akce z menu. Většinou se vytvářejí instance akcí, které jsou stejné jak pro položky menu tak panelu nástrojů a
25
těmto položkám se potom přidruží. Knihovna Swing nabízí i některé složitější prvky, které nalézáme nejrůznějších editorech . Jsou to například dialogy pro otevírání a ukládání souborů JFileChooser, výběr barvy JColorChooser a JTree. U editorů se často vyskytují prvky sdílející stejný prostor v jednom panelu, mezi kterými je možné přepínat se přepínat pomocí záložek, umístěných poblíž nejčastěji v horní nebo dolní části panelu. I tento jev má svůj ekvivalent v podobě třídy JTabbedPane, což je vlastně kontejner pro větší počet komponent. Při vložení další komponenty se vytvoří nový panel se záložkou který většinou při vytvoření získá také zaměření. Přestože knihovna Swing obsahuje třídy pro pro různé textové komponenty a můžeme do určité míry nastavit jejich velikost, na několikastránkové dokumenty by to nestačilo. Řešení spočívá ve třídě JScrollPane, která poskytuje pohled na vloženou komponentu. Pokud tato komponenta přesáhne určité rozměry závislé na rozvržení GUI, lze ji odrolovat.
6.4 Swing a textové komponenty U textových komponent se objevuje paradigma MVC jedná se o složitější komponenty a jejich užití již není tolik intuitivní jako u ostaních komponent knihovny Swing. 6.4.1 MVC MVC je zkratka paradigmatu Model View Controler. Představuje software architekturu rozdělující datový model, uživatelské rozhraní kontrolní logiku do tří rozdílných celků. Model reprezentuje data a jejich logiku pouze na úrovni dat, které reprezentuje. View zobrazuje data ve vhodné podobě pro interakci uživatele, jedná se o nějaký element grafického uživatelského rozhraní. Controler zastupuje řídící logiku. většinou provádí změny na Model nebo View vyvolané interakcí uživatele. Vzájemná interakce mezi těmito celky probíhá většinou následovně. Uživatel vykoná nějakou akci na prvku View, ten o tom informuje Controler. Controler provede změnu modelu a tato změna vyvolá aktualizaci View. Toto paradigma umožňuje nezávislou implementaci každé části. Je nutné definovat pouze způsob komunikace mezi sebou.
6.4.2 JTextComponent JTextComponent je bázová třída od níž dědí JTexField (jednořádkové pole), JTextArea (víceřádková textová oblast s jedním fontem a barvou textu) a JEditorPane. Každá tato komponenta má svůj model v podobě implementace rozhraní Document. Jako kontroler vystupují potomci abstraktní třídy EditorKit. Document si ještě může zaregistrovat posluchače pro správu vratných změn UndoManager. Ve všech textových komponentách si lze vystačit s implicitními modely či kontrolery až na posledně jmenovaný JEditorPane.
26
JEditorPane je určen pro různé druhy dokumentů, ovšem podpora pro ně se musí implementovat. Implicitně v sobě obsahuje podporu pro formáty RTF, HTML a prostý text. Lze pro ně najít odpovídající implementace rozhraní Document a potomky třídy EditorKit. Podporovaný typ HTML dokumentu je pro verzi 3.2, což lze použít spíše pro malý vestavěný html browser, ne však pro zamýšlený editor. Bohužel přímou podporu pro XML , CSS či HTML 4.0 zde nenajdeme.
6.5 Problémy implementace editoru a výsledky Stěžejním problémem je obarvování syntaxe. Snažil jsem se najít co nejjednodušší řešení které by umožnilo alespoň základní funkčnost a tu pak rozšířit. Tomuto jsem podřídil veškeré úsilí. Uspokojivé řešení jsem však nenašel. Použil jsem potomka JEditorPane JTextPane, který se používá pro dokumenty s různým stylováním, formátováním textu (barva font apod.) a snažil se vyhnout nutnosti implementace vlastního EditorKitu. Po delším ne příliš úspěšném hledání řešení, jsem implementoval vlastní modely pro dokumenty HTML a CSS. K obarvování dochází při každém vložení textu, zásahu uživatele. Vzhledem k tomu, že se mi dosud nepodařilo nalézt algoritmus který by obarvoval pouze nezbytnou část dokumentu. Použil jsem řešení hrubou silou a při obarvování, vkládání textu se prochází vždy celý obsah dokumentu. V dokumentech nedochází ke kontrole syntaxe, ale pouze ke zvýrazňování určitých typických oblastí pro lepší orientaci uživatele. Potomci třídy DefaulStyledDocument obsahují metodu insertString() , kterou je vhodné překrýt a v této metodě analyzovat obsah dokumentu a na základě průběžných výsledků obarvovat. Zároveň bylo nutné implementovat složitější UndoManager, který sdružuje vkládání textu a jeho obarvování do stejných celků pro zajištění správné funkce. Výsledný editor poskytuje pouze základní omezené funkce pro editaci dokumentů HTML a CSS. Zatím se nehodí pro intuitivní použití. Je také nutná revize zdrojového kódu. Mnohé části programu jsou spjaty silnou vazbou, což je pro upravování budoucí jednotlivých komponent nevhodné. Je potřeba navrhnout vhodná rozhraní. Budoucí řešení se pravděpodobně neobejdou bez implementace vlastního potomka třídy EditorKit a použítí některého XML parseru.
27
Seznam použité literatury [1] Jiří Kosek XML pro každého podrobný průvodce, Grada Publishing 2000 [2] Brett Spell Java Programujeme profesionálně, Computer Press 2002 [3] Martin Snížek CSS pro zelenáče, Neocortex 2004 [4] Tutoriály JFC SWING http://java.sun.com/docs/books/tutorial/uiswing/index.html [5] online verze [1] http://www.kosek.cz/xml/index.html [6] série článků o XHTML http://interval.cz/serialy/xhtml-kompletni-pruvodce/
28
