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 INFORMACˇ NI´CH SYSTE´ MU˚ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INFORMATION SYSTEMS MODULA´ RNI´ GENERA´TOR WEBOVY´ CH STRA´ NEK BAKALA´ Rˇ SKA´ PRA´ CE BACHELOR’S THESIS AUTOR PRA´ CE JAN VLASA´ K AUTHOR BRNO 2011 VYSOKE´ UCˇ ENI´ TECHNICKE´ V BRNEˇ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMACˇ NI´CH TECHNOLOGII´ U´ STAV INFORMACˇ NI´CH SYSTE´ MU˚ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF INFORMATION SYSTEMS MODULA´ RNI´ GENERA´TOR WEBOVY´ CH STRA´ NEK MODULAR GENERATOR OF WEB PAGES BAKALA´ Rˇ SKA´ PRA´ CE BACHELOR’S THESIS AUTOR PRA´ CE JAN VLASA´ K AUTHOR VEDOUCI´ PRA´ CE Ing. PETER SOLA´ R SUPERVISOR BRNO 2011 Abstrakt Tato práce popisuje souèasné zpùsoby vytváření webových stránek a nástroje potøebné k je- jich vytvoření. Práce také implementuje nový nástroj | editor webových stránek s vizuál- ním návrháøem, který je na rozdíl od ostatních editorù zaměřen na generování složitějších webových komponent. Abstract This thesis describes today's techniques for creating web pages and tools needed for their creation. Thesis also implements a new tool | webpage editor with visual designer, which can in contrast to other editors generate more complex web components. Klíčová slova WYSIWYG, vizuální návrháøe, webové editory, web, webová služba, HTML, PHP, ASP.NET Keywords WYSIWYG, visual designers, web editors, web, web-service, HTML, PHP, ASP.NET Citace Jan Vlasák: Modulární generátor webových stránek, bakaláøská práce, Brno, FIT VUT v Brně, 2011 Modulární generátor webových stránek Prohlášení Prohla¹uji, že jsem tuto bakaláøskou práci vypracoval samostatně pod vedením Ing. Petera Solára. ....................... Jan Vlasák 15. května 2011 Poděkování Děkuji Ing. Peterovi Solárovi za vedení bakaláøské práce. c Jan Vlasá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 Pøehled a porovnání zpùsobù vytváření stránek4 2.1 Ruční psaní kódu.................................4 2.2 Vizuální navrhování...............................4 2.3 Alternativní přístupy...............................5 2.4 Srovnání......................................6 3 Existující vizuální editory8 3.1 Historie editorù..................................8 3.2 Pøehled populárních vizuálních editorù.....................8 3.3 Prùzkum uživatelù................................ 11 4 Program 12 4.1 Návrh....................................... 12 4.1.1 Grafické rozložení............................. 12 4.1.2 Volba nástrojù pro implementaci.................... 14 4.2 Struktura generovaného kódu.......................... 14 4.3 Mezikód...................................... 15 4.4 Moduly...................................... 16 4.4.1 Integrace modulù do Programu..................... 17 4.4.2 Technologie................................ 17 4.5 Externí knihovny................................. 19 4.5.1 DotLiquid................................. 19 4.5.2 Trident.................................. 19 4.5.3 HTMLAgilityPack............................ 21 5 Tvorba modulù 22 5.1 AModule..................................... 22 5.2 AModuleUserSetup................................ 23 5.3 ©ablony...................................... 24 5.4 Požadavky na assembly............................. 25 5.5 Postup pøi tvorbě modulu............................ 25 6 Závěr 27 6.1 Přínos projektu.................................. 27 6.2 Možné rozšíření.................................. 27 6.3 Porovnání s podobnými produkty........................ 29 1 A Obsah přiloženého média 32 2 Kapitola 1 Úvod Tato práce se zabývá porovnáním zpùsobù vytváření webových stránek a vytvořením desk- topové aplikace implementující jeden z nich. Prvním zpùsobem je psaní webové stránky ručně v textovém editoru a je používán tvùrci stránek, kteří ovládají potøebné jazyky, tedy HTML, CSS a JavaScript. Pro zobrazení náhledu stránky je v¹ak potøeba v editoru stránku uložit a poté zobrazit ve webovém prohlížeči. Druhým zpùsobem je tzv. WYSIWYG1 (nebo také metoda vizuálních návrháøù), který je pùvodně urèen spíše pro nezku¹ené uživatele2. Tímto zpùsobem se stránka vytváří prak- ticky přímo ve webovém prohlížeči3 a tvùrce ji tak vidí již pøi procesu vytváøení. Editory, které implementují tento zpùsob, v sobě mají paletu obsahující HTML komponenty (napø. tabulka, obrázek nebo odkaz), které se dají do náhledu stránky jednodu¹e pøesunout, a tím je ve stránce vytvoøit. Díky tomu tvùrce stránky nemusí znát HTML, CSS ani JavaScript, které jsou pøetáhnutím komponenty automaticky vygenerovány. Problém u obou zpùsobù nastává pøi psaní dynamické webové stránky, tedy stránky, která je vytváøena na serveru za použití jazykù jako PHP, ASP, nebo Java. Díky těmto jazykùm může stránka pracovat se serverovou databází. Protože je stránka generována jazykem na základě uživatelských vstupù4, nejde ji zobrazit pouhým použitím renderovacího jádra5. Problém částečně řeší napø. Visual Studio, ve kterém je v náhledu stránky zobrazena pouze pøibližná podoba komponenty. Na rozdíl od implementace v této práci v¹ak Visual Studio generuje pouze jeden jazyk | ASP.NET. Cílem této práce je vytvoøit software | webový editor, který uživateli umožní stáhnout si sadu webových komponent (podle požadovaného jazyka) a vytvoøit z nich kompletní webovou stránku metodou vizuálních návrháøù. Práce nezahrnuje popis ani porovnání Ja- vaScriptových WYSIWYG editorù HTML, které se používají napø. pro napsání nového èlánku do stávajícího webu (napø. editor TinyMCE). V kapitole2 je uveden popis a srovnání obou zpùsobù, kapitola3 popisuje některé existující implementace vizuálních návrháøù. Vlastní implementací vizuálního návrháøe se zabývají kapitoly4a5. Celkové zhodnocení implementace, její možné pokraèování a po- rovnání s existujícími vizuálními návrháøi je pak v kapitole6. 1WYSIWYG je zkráceně What You See Is What You Get, èesky co vidíš, co dostane¹\. " 2Používá se v¹ak i zku¹enými uživateli k rychlému návrhu stránky. 3Konkrétně v jádøe webového prohlížeče. 4Uživatelské vstupy jsou COOKIES, GET a POST. 5Renderovací jádro je program, který interpretuje HTML, CSS, obrázky aj. do vizuální podoby. Nejčastěji používáno ve webových prohlížečích. 3 Kapitola 2 Pøehled a porovnání zpùsobù vytváření stránek Tato kapitola popisuje jak populární zpùsoby vytváření webových stránek (ruční psaní kódu a vizuální navrhování), tak i některé alternativní, méně používané. V sekci 2.4 je detailněji provedeno srovnání těchto zpùsobù a jsou zde uvedeny výsledky prùzkumu jejich uživatelského ohodnocení. 2.1 Ruční psaní kódu Ruční psaní kódu dává tvùrci webové stránky největší volnost, jelikož je omezován jen svými znalostmi. Musí ale ovládat nejen v¹echny potøebné jazyky, ale v případě jazykù na straně serveru a JavaScriptu i algoritmy, popø. nástroje v jazyku, které jsou urèeny pro použití na webovém serveru. Příkladem takového nástroje v jazyku PHP je proměnná $ SERVER, která je vytváøena serverem, a uchovává informace hlavièkách protokolu HTTP1, cestách k souboru apod.2 Tento zpùsob je tedy nevhodný k použití neprogramátory. Stránky se tímto zpùsobem vytváří ve v¹ech textových editorech, které nejsou primárně urèeny pro vytváření HTML (Notepad, Nano3, aj.). Mírná variace ručního psaní kódu je psaní kódu v editoru s pomocnými nástroji jako je automatické doplňování kódu, zvýrazňování syntaxe, kontroly pravopisných chyb, automa- tická validace HTML. Zástupci této variace jsou HTML editory jako napø. PSPad4, Golden HTML Editor, nebo HotDog Professional 75. 2.2 Vizuální navrhování Je oproti přímému psaní kódu urèeno spíše pro začátečníky, kteří neznají HTML a CSS, protože dovoluje navrhnout jednoduchou stránku vizuálně pomocí obsažených komponent a kód se z nich generuje automaticky, na pozadí. Jelikož v¹ak tento zpùsob nedává úplnou kontrolu nad elementy, je èasto kombinován s ručním psaním kódu, kdy si tvùrce webu 1HTTP (Hypertext Transfer Protocol) je bezestavový protokol používaný pro pøenos HTML dokumentù (viz http://tools.ietf.org/html/rfc2616). 2http://php.net/manual/en/reserved.variables.server.php 3http://www.nano-editor.org/ 4http://www.pspad.com/ 5http://www.sausagetools.com/hotdog-professional/ 4 Obrázek 2.1: Výběr ¹ablony ve webovém tvùrci stránek Google Websites. navrhne stránku vizuálně a následně si zobrazí její kód, který si ruène upraví. Takto kombi- novaný přístup používá podle prùzkumu až 51,4% vývojáøù[10]. Editory pro tento zpùsob jsou detailněji porovnány v kapitole3. 2.3 Alternativní přístupy Existují v¹ak i další zpùsoby vytváření stránek. Jeden z nich je implementován v experi- mentálním editoru RUMUEditoru[4], ve kterém je vytvoøen interní sémantický znaèkovací jazyk, který je interpretován do HTML a CSS. Tento jazyk je pro tvùrce webu jednodušší než HTML a CSS, a proto je vhodný pro netechnické uživatele (příklad kódu v 2.1). Další možností vytvoření webové stránky je použití a následné úpravy jiné, existující. Tento zpùsob je sice nejrychlejší, ale dává tvùrci nejmenší možnost individuální úpravy. Za podobný přístup se dá považovat vygenerování stránky podle urèených kritérií, jako je napø. na Google Websites6, kde si uživatel vybere typ svojí stránky z dostupných ¹ablon (rodinný web, firemní web, fotoalbum, aj. | viz obr. 2.1) a design stránky z pøipravených stylù. Tuto stránku pak edituje ve webovém (online) vizuálním návrháøi. #Nadpis