Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze. Kateřina Steinhauserová

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Kateřina Steinhauserová Tvorba webové aplikace pomocí produktu Microsoft Expression Web 4 Bakalářská práce

2 ČESTNÉ PROHLÁŠENÍ Prohlašuji, že jsem bakalářskou práci na téma Tvorba webové prezentace pomocí produktu Microsoft Expression Web 4 zpracovala samostatně a použila pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dne Podpis 2

3 PODĚKOVÁNÍ Děkuji Ing. Bc. Davidu Klimánkovi PhD. za ochotu, cenné rady a usměrnění při psaní závěrečné práce. 3

4 ABSTRAKT Tato bakalářská práce se zabývá prověřením vhodnosti WYSIWYG editoru Microsoft Expression Web 4 ve výuce na Vyšší odborné škole informačních služeb v Praze. V teoretické části se bakalářská práce zabývá vývojem internetu, základních značkovacích jazyků a následně představením několika různých způsobů vytvoření webových stránek. Praktická část je pak zaměřena prověření vhodnosti Expression Webu ve výuce vytvořením jednoduchého uživatelského rozhraní nad cvičnou MSSQL databází a vytvořením čtyř klikacích map předmětů vyučovaných na VOŠIS v Praze. Pro lepší prověření jsou všechny čtyři mapy vytvořeny v jiném editoru. Postup tvorby a chování editorů při práci je pak slovně popsáno. Editory jsou pak poté ještě porovnány na základě stanovených kritérií. Klíčová slova: WYSIWYG, editory, HTML, Microsoft Expression Web 4, internet, www. ABSTRACT This graduations these is studying the feasibility of the WYSIWYG editor Microsoft Expression Web 4 in the schooling on the Vyšší odborná škola informačních služeb in Prague. In the theoretical part the these is dealing with the evolution of internet, basic tag languages and the introduction of several different approaches to web site creation. The practical part is focused on studying the feasibility of Expression Web in the schooling creating a simple user interface over a MSSQL database and the creation of 4 interactive maps of subjects taught on VOŠIS in Prague. For better studying all of the maps are created in different editors. The process of creation and the behavior of the editors is described. All of the used editors are then compared according to the given criteria. www. Key words: WYSIWYG, editors, HTML, Microsoft Expression Web 4, internet, 4

5 OBSAH Úvod... 6 Teoretická část Web Historie a vývoj internetu Historie a vývoj world wide webu Histrie a vývoj PHP Historie a vývoj CSS Historie a vývoj FLASH Historie a vývoj HTML CMS systémy Online editory WYSIWYG editory Strukturní editory Generátory webů Praktická část Tvorba uživatelské rozhraní nad MSSQL databází Analýza předmětů a navržení map Tvorba funkční klikací mapy Nadefinované CSS styly Mapa pro obor Podnikové informační systémy a Microsoft Expression Web Mapa pro obor Informační systémy a Adobe Dreamweaver Mapa pro obor Služby knihoven a editor KompoZer Mapa pro obor Služby muzeíí a galerií a editor BlueVoda Tabulkové srovnání vybraných WYSIWYG editorů Závěr Seznam použité literatury Seznam obrázků Seznam tabulek Seznam příloh

6 ÚVOD V dnešní době 21. století, kdy technické vymoženosti jsou samozřejmostí, se klade stále větší důraz na vzhled a designové provedení technických pomůcek. Design je dnes jedním z faktorů určujících prezentaci firem výrobců a jejich produktů. Lidé potencionální uživatelé si pomocí designu strukturují a vytváří nový prostor. Vědeckými průzkumy bylo prokázáno, že člověk vnímá asi 80% informací pomocí zraku. Pro úspěšný odbyt produktů je třeba nejen vysoká technická úroveň, ale i vzhled, který upoutá - vytvoření efektního obalu, který přitáhne pozornost spotřebitelů. To samé pak platí i pro webovou prezentaci jedince, společností, případně i školy. Při otevření webu uživatel nejdříve zkoumá design webu, rozmístění ovládacích prvků, uspořádání webu a až poté samotný obsah. Design webu a rozložení ovládacích prvků, které vidíme vždy jako první, většinou rozhoduje o tom, zda web opustíme nebo na něm vyhledáme požadované informace. V případě, že design nás zaujme, v horší variantě je alespoň částečně přijatelný, zabýváme se přehledností webu a informací na něm umístěných. Většina uživatelů dělá chybu v tom, že design svého webu sice udělá pěkný, ale špatně si rozvrhnou strukturu jednotlivých stránek a celkovou konstrukci webu. Informace podávaná prostřednictvím těchto stránek, se pak stává nepřehlednou a matoucí. Při tvorbě webu by si tak měl tvůrce položit dvě základní otázky: Co chci prezentovat prostřednictvím webu? a Jaká je moje hlavní cílová skupina?. V případě běžného uživatele internetu (žáci, studenti, a další lidé všech věkových kategorií), jsou jeho hlavní cílovou skupinou přátelé, kamarádi, známí, spolužáci. Prezentovat pak bude nejspíše sám sebe, své zážitky atd. V případě komerčního užívání, aktuálně pro tuto bakalářskou práci prezentace školy včetně komunikačních prvků, jsou hlavní cílovou skupinou budoucí i stávající studenti školy. Na takto vytvořených stránkách pak budou stěžejními údaji informace o studiu a jeho průběhu, personální zajištění pro kontakty, panel s aktuálními informacemi, přihlášení do intranetu. VOŠIS je, jako škola zaměřená na IT technologie, součástí licenčního programu MSDN Academic Alliance, a díky tomu mohou studenti zdarma využívat vybrané programy společnosti Microsoft po dobu svého studia. Vzhledem k faktu, že se jedná o 6

7 profesionální programy, je škoda, že se s nimi nepracuje při výuce. Jedním takovým programem je právě Microsoft Expression Web 4. Z tohoto důvodu jsem se rozhodla prověřit vhodnost právě tohoto programu pro podporu tvorby HTML a PHP skriptů ve výuce. V současnosti je v každém předmětu, který se týká práce s HTML a PHP jazykem, používán jiný HTML či PHP editor. Pominu-li sice drobné, ale přece jen odlišnosti v používaných editorech, nemohu opomenout počet různých editorů, které si student musí v rámci výuky instalovat na svůj osobní počítač. Z tohoto důvodu by bylo lepší využívat jeden editor, ve kterém by se studenti mohli naučit pracovat a vytvářet v něm kvalitní webové prezentace. Kromě splnění svých školních povinností, by výhodou pro studenty byla znalost profesionálního editoru pro tvorbu a úpravu webu. Tím by se zvyšovaly i jejich šance na trhu práce. V teoretické části práce jsem se rozhodla popsat historii a vývoj internetu a webu jako takových, protože bez jejich vývoje by tvorba webových stránek a aplikací neměla smysl, vlastně by nebyl žádný důvod k tomu, aby se lidé tvorbou v této oblasti vůbec zabývali. Dále je zde popis jednotlivých způsobů tvorby webových stránek, pomocí tzv. skriptovacích jazyků, a možností jak vytvořené stránky graficky upravovat. Protože A protože je hlavním cílem mé bakalářské práce, prověřit vhodnost použití programu Microsoft Expression Web 4 pro podporu tvorby HTML a PHP skriptů ve výuce na Vyšší odborné škole informačních služeb v Praze, vybrala jsem další 3 editory pro tvorbu a úpravu webových stránek, které v této části práce také představím a popíši. Ve druhé části práce, tedy praktické části, se pak zaměřím na vytvoření klikacích map předmětů vyučovaných jak v bakalářském tak i nebakalářských studijních oborech. Celkem jsou na VOŠIS vyučovány 4 obory, každá mapa tedy bude vytvořena v jiném editoru, což mi umožní porovnat jak práci v jednotlivých editorech, tak jejich výsledky. jednoduchého uživatelského rozhraní nad cvičnou databází v MSSQL pro předmět DAS2. Dále pak na tvorbu klikací mapy předmětů bakalářských a nebakalářských studijních oborů. Klikací mapu jsem se rozhodla vytvořit z toho důvodu, že aktuální prezentace vyučovaných předmětů je dnes, je nejednotná. Část předmětů je uložena v.pdf souboru a část je popsána a uložena na webových stránkách školy. Tento systém musí být zákonitě pro nového studenta matoucí a nepřehledný. 7

8 TEORETICKÁ ČÁST 1 WEB Co je to vlastně WEB? Podle serveru a2b se pod názvem web rozumí: World Wide Web (WWW, také pouze zkráceně web), volně přeloženo- jako celosvětová síť vzájemně propojených (provázaných) dokumentů. Pod pojmem dokumenty si dnes již můžeme představit různá elektronická data a to od běžného textu přes obrázky (fotografie), hudbu, videa, 3D animace až po speciální programy, které interaktivně reagují na naše podněty (například JAVA hry). Samotná webová stránka se skládá z několika různých druhů dat (nejčastěji grafika a text) Historie a vývoj internetu První zmínky o internetu spadají do období šedesátých let dvacátého století, kdy probíhala studená válka mezi USA a SSSR. Americká společnost RAND 2 dostala za úkol vymyslet a vytvořit síť, která by umožňovala propojení jednotlivých vojenských základen, měst a státních úřadů. Původní síť spočívala v jednom uzlu, na který byli připojeni ostatní uživatelé, což by v případě objevení tohoto uzlu nepřítelem, znamenalo i konec celé sítě. RAND tedy navrhla síť, která neměla jeden centrální uzel, ale hned několik různých uzlů, které si byly rovny. V praxi to znamená, že při zničení jednoho uzlu bude informace vedena k uživateli jinou cestou. Tohoto projektu se chytila společnost ARPA 3, která se rozhodla projekt sponzorovat. Na podzim roku 1969 byl nainstalován první uzel nové sítě, na konci tohoto roku, měla síť již 4 uzle a jmenovala se ARPANET. Původně byla tato síť určena vládním a vojenským institucím, nicméně postupem let se tato síť stále rozrůstala a v roce 1972 již měla 37 uzlů. Tím, jak se síť vyvíjela, stávala se stále populárnější, začaly ji používat i univerzity a z USA se začala rozšiřovat do celého světa. Tato expanze měla za následek přejmenování sítě z ARPANET na Internet Historie a vývoj world wide webu Internet byl dobrým zdrojem informací, nicméně zobrazení informací bylo 1 A2b [online] dostupný z www:< 2 výzkumná společnost americké armády 3 Advanced Research Projects Agency 4 Inter = mezi (v tomto případě mezinárodní), net = síť 8

9 poměrně fádní. Text na jednotlivých obrazovkách byl nestrukturovaný, velikost písma i barva byla jednotná. V rozsáhlejším textu byl problém se orientovat. Našly se firmy jako CompuServe 5 a AOL 6, které vytvořily možnost měnit barvu písma - grafické uživatelské rozhraní. Toto rozhraní přidalo do textu barvy, ale stále to nebylo ono. World wide web měl několik předchůdců. Jedním z nich byl projekt Xanadu, který založil v 60. letech 20. století Theodor H. Nelson. Nelson tento projekt zakládal s cílem vytvoření jednoduché počítačové sítě s uživatelským prostředím. A byl to právě Nelson, který jako první definoval samotný termín hypertext. Tento projekt se však neuchytil. A tak v roce 1989 vytvořil Tim Berners-Lee World Wide Web (www). World Wide Web - celosvětovou síť vzájemně propojených dokumentů, ke kterým má uživatel přístup přes internet. Tim Berners-Lee napsal také první webový prohlížeč s názvem WorldWideWeb, později byl prohlížeč přejmenován na Nexus, aby se nezaměňoval s WWW. S vytvořením www je spojen také vývoj HTML jazyka, viz kapitola 1.7 Historie a vývoj HTML. 1.3 Histrie a vývoj PHP PHP je skriptovací jazyk, který se používá spolu s jazykem HTML a s jehož pomocí lze vytvořit dynamický web. První zmínky o PHP jsou z roku 1994, kdy se dánsko-grónský programátor Rasmus Lerdorf rozhodl vytvořit jednoduchý sytém pro zpracování přístupů ke svému webu, v programu PERL. Protože sada skriptů napsaná v PERLu zatěžovala server a Lerdorf potřeboval rozšířit funkčnost, přepsal tento kód do jazyka C 7 a nazval ho Personal Home Page Tools. Kromě jazyka PHP vytvořil Lerndorf i nástroj s názvem FI 8, který umožňoval zpracování a odesílání formulářových dat. Lerndorf tedy v roce 1997 PHP s FI spojil, tím vznikla verze PHP/FI 2.0. O rok déle vyšla verze PHP3, která přinesla nové funkcionality a byla lepší než předchozí verze. S těmito prvky se změnil i význam zkratky PHP z Personal Home Page na Hypertext Processor. S postupem doby rostl počet uživatelů tohoto systému a tím docházelo k rozšiřování funkcionality. Krátce po vydání PHP3, začali Andi Gutmans a Zeev Suraski znovu pracovat na úpravách jádra PHP. Hlavním cílem bylo zvýšit výkon komplexních aplikací a zvýšení 5 Poskytovatel internetových služeb 6 Poskytovatel internetových služeb 7 programovací jazyk vyvinutý pro potřeby operačního systému Unix 8 Form interpreter 9

10 modularity základního PHP kódu. Takto upravený kód byl nazván Zend Engine 9 a byl poprvé představen v polovině roku Oficiálně byla verze PHP4 představena v polovině roku 2000 a přinesla další významné prvky, jako na příklad podpora většího množství serverů, HTTP sessionů 10, bezpečnější způsoby zpracování vstupů, atd. 1.4 Historie a vývoj CSS Spolu s tím, jak se vyvíjela tvorba webových stránek, vyvíjely se i různé způsoby úpravy textu. První specifikace kaskádových stylů, CSS, vyšla v roce 1996 jako doporučení konsorcia W3C. O dva roky později byla vydána další verze, tedy CSS2, která obsahovala řadu nových funkcí, jako je například absolutní, relativní a fixní umístění prvků, z-index 11 nebo nové vlastnosti písma. Druhá verze však byla plná chyb, proto byla vydána verze CSS2.1, jako oprava chyb z předchozí verze. V současné době se pracuje již s verzí CSS3, která se však stále vyvíjí a datum jejího konečného vydání není zatím známo. Existují tří způsoby použití CSS: přímý zápis seznam stylů externí soubor První možnost, tedy přímý zápis, se zapisuje přímo k měněnému elementu pomocí parametru style=, a platí pouze pro ten element, u kterého je zapsán. Přímý zápis vypadá například takto: <a style="color:pink; font-size:36px;">bakalářská práce</a> Tento zápis definuje pro slova Bakalářská práce růžovou barvu a velikost 36px. Druhá možnost je tedy napsat seznam stylů, který se umisťuje do hlavičky dokumentu. Tento seznam se zapisuje pomocí tagu <style></style>, a zápis vypadá takto: <html> <head> <title>příklad CSS</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <style> h1 {text-align: center; font-family: Arial; font-size: 16px; color: pink} </style> 9 název vznikl z křestních jmen Zeeva Suraskiho a Andiho Gutmanse 10 HTTP relací (síťové spojení mezi serverem a klientem) 11 hodnota z-indexu vyjadřuje vzdálenost prvku od plochy 10

11 </head> <body> <h1>ukázka nadefinování CSS v hlavičce</h1> </body> </html> Tímto zápisem definuji zarovnání textu, font písma, velikost písma a barvu, případně další vlastnosti, pro všechny nadpisy první úrovně, které na stránku umístím. Třetí možností je pak vytvoření externího souboru s příponou.css, na příklad styles.css. Zápis do tohoto souboru je obdobný, jako zápis stylu přímo do hlavičky dokumentu. Rozdíl je pak v tom, že do tohoto souboru se zapisuje pouze obsah tagu style. Aby se takto nadefinované styly aplikovaly na vytvořenou HTML stránku, je potřeba na tento soubor odkázat, - a to takto: <html> <head> <title>příklad CSS</title> <link rel="stylesheet" type="text/css" href="styles.css"> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> </head> <body> <h1>ukázka nadefinování CSS v hlavičce</h1> </body> </html> V parametru href, je zapsána cesta a název souboru se styly, jehož obsah vypadá takto: h1 { text-align: center; font-family: Arial; font-size: 16px; color: blue; text-decoration: underline } Tento zápis má stejný efekt jako ten předchozí, má však jednu nespornou výhodu, kterou je větší přehlednost jak v HTML kódu, tak v nadefinovaných stylech. Kaskádové styly nabízejí mnoho způsobů a variant jak formátovat HTML kód, v podstatě popisují způsob, jakým se zobrazí HTML, XHTML nebo XML kód na 11

12 stránce. 1.5 Historie a vývoj FLASH Historie flashové technologie začíná už v roce 1993, kdy Johnatan Gay, Charlie Jackson a Michelle Welsch založili softwarovou společnost FutureWave. První produkt této společnosti se jmenoval SmartSketch jednalo se o grafický vektorový program, který byl určený pro počítače s PenPoint operačním systémem. Vývoj flashe je spojen s vývojem HTML jazyka. Proto s příchodem prvního prohlížeče s názvem WorldWideWeb, dostal Johnatan Gay nápad vytvořit technologii, která by uměla vytvořit animované objekty. Nově vytvořená flash technologie vyšla pod názvem FutureSplash Animator a s její pomocí byly vytvořeny např. webové stránky Microsoft MSN a Disney, nebo oficiální stránky seriálu Simpsonovi. Na konci roku 1996 koupila společnost Macromedia Gayovu softwarovou společnost FutureWave a přejmenovala flashovou technologii na Macromedia Flash. V roce 2005 proběhla další změna, společnost Adobe koupila společnost Macromedia a tím došlo k přejmenování flash technologie na Adobe Flash. Primárně je tato technologie používána jako nástroj pro animaci objektů, a její obrovskou výhodou je, že poskytuje designérům naprostou volnost při návrhu webů právě s animacemi, vizuálními efekty, zvuky a videem. S touto technologií lze vytvořit krásné interaktivní stránky. Nicméně pro zobrazení stránek s technologií flash, musí mít návštěvník stránek nainstalován Flash plugin 12 ve svém prohlížeči. Dalším problémem můžou být vysoké nároky flashových aplikací na procesor počítače. Proto někteří uživatelé starších typů počítačů mohou mít problémy s jejich načtením. Načtení stránky se tím tedy pro některé uživatele značně prodlužuje. V dnešní době se klade velký důraz na optimalizaci webových stránek pro fulltextové vyhledávače jako je např. google a seznam.cz. Optimalizací se v tomto případě rozumí upravení struktury webových stránek tak, aby si fulltextové vyhledávače mohly zaindexovat klíčová slova webu. Avšak čistě flashové stránky jsou pro tyto vyhledávače špatně čitelné. V praxi to znamená, že flash ztěžuje indexaci stránek a tím znemožňuje vyhledávači na tyto stránky odkázat a zobrazit je. To je důvod proč se flash technologie používá spíše pro reklamu, např. bannery, než na vytvoření celé webové prezentace. 12 zásuvný modul umožňující prohlížeči přehrávat flashovou prezentaci. 12

13 1.6 Historie a vývoj HTML Historie HTML začala již ve 40. letech 20. století s vývojem hypertextů, odtud název HyperText Marup Language. První neoficiální verze byla vyvinuta v roce 1991 Timem Berners-Lee a Robertem Caillau, kteří pracovali v CERNu 13. Tento projekt měl umožnit sdílení výsledků výzkumu po celém světě. Díky tomuto jazyku bylo možno hierarchicky členit text, zařazovat do textu obrázky a odkazy, případně text zvýrazňovat. V průběhu let 1992 až 1994, vyšlo ještě několik dalších verzí. První oficiální verze HTML jazyka však byla schválena a spuštěna až v roce Od té doby se jazyk dále vyvíjel a zdokonaloval. V roce 2004 byly zahájeny práce na verzi HTML5. Tato verze se v současné době již používá, nicméně její specifikace je stále ještě ve stavu rozpracování, úplné dokončení HTML5 se plánuje až na rok S vývojem HTML jazyka se vyvíjely také softwarové aplikace, které ulehčují tvorbu webových prezentací. Tyto aplikace, neboli editory, jsou programy, které poskytují mnoho podpůrných nástrojů a funkcí a tvorbu webových stránek usnadňují a zrychlují. Editory rozdělím do pěti typů: online editory, WYSIWYG 14 editory, strukturní editory, generátory webů 15 a CMS sytémy. 1.7 CMS systémy CMS 16 je redakční systém pro publikování informací (webových prezentací) na internetu. Díky CMS lze snadno vytvořit webovou prezentaci, bez hlubších znalostí programování. CMS používá vytvořené šablony, do kterých se vkládá samotný text, jedná se o webovou aplikaci, která umožňuje editovat obsah v podstatě kdykoli a odkudkoli. S tím souvisí i možnost nastavení práv k editování a publikování obsahu pro několik různých uživatelů. CMS systémy podporují např. caching, což je označení pro vyrovnávací paměť, která urychluje přístup k často používaným datům na pomalých médiích jejich překopírováním na média rychlá. Tyto systémy podporují i technologii RSS, která umožňuje uživatelům internetu přihlásit se k odběru novinek z webu, který nabízí RSS zdroj. Pomocí CMS systému si uživatel může jednoduše vytvořit svůj vlastní blog, diskusní fórum, internetové obchody, internetové časopisy, vkládat na svůj blog 13 Central Européene de Rechere Nucléaire Evropské centrum jaderného výzkumu. 14 What you see is what you get Co vidíš, to dostaneš. 15 Výuka informatiky [online]. Školní web pro podporu výuky, 2011 [cit ] dostupný z www 16 Content Management System 13

14 kalendáře, hlasování, vyhledávání v rámci webserveru, tyto systémy jsou využívané po celém světě na různě velké projekty. Nespornou výhodou velké části CMS systémů jsou i jejich různé jazykové mutace. V případě, že chce uživatel využít CMS sytému pro tvorbu webové prezentace, má na výběr ze dvou možností, komerční CMS nebo tzv. free CMS, v každém případě si musí nejprve CMS systém stáhnout, nainstalovat a zprovoznit. Dále si musí zřídit tzv. hosting 17. Celá instalace včetně zprovoznění probíhá poměrně rychle a bez větších problémů v případě jakýchkoli dotazů mají systémy online podporu. Asi nejrozšířenějšími redakčními systémy jsou Joomla!, Drupal a WordPress, jsou napsány v PHP jazyce a podporují relační My SQL databází. Drupal podporuje navic ještě APostgereSQL a další databáze včetně Oracle. Na těchto CMS systémech běží webové stránky např. společnosti Linux.com, Te White House nebo NASA s Ames Research Center a každý rok se střídají na prvních místech v soutěži The Open Source CMS Awards Online editory Jak již název vypovídá jedná se o HTML editory, které pracují online v prohlížeči. Uživatel tedy nemusí nic stahovat a instalovat, vystačí si pouze se svým prohlížečem, ve kterém se online editor načte. Práce ve většině těchto editorů je velice snadná i pro úplného začátečníka. Uživatelské prostředí je zpracováno přehledně a poskytuje základní příkazy. Tyto editory vznikly pro uživatele - začátečníky, kteří teprve pronikají do tajů svého osobního počítače a internetu, ale kteří si chtějí vytvořit snadno a rychle svoje webové stránky. Výhodou je, že uživatel nemusí znát HTML jazyk a nemusí se starat o syntaxi kódu. Jako zástupce těchto editorů jsem vybrala editor Best Page. 17 umožňuje zveřejnění webových stránek na určitém serveru 18 Soutěž o nejlepší volně šiřitelný CMS systém. 14

15 Obrázek. 4 Best Page Minimální systémové požadavky: připojení k internetu internetový prohlížeč Tento editor je dostupný z www [ Jak je vidět na Obrázku 4 Best Page, uživatelské rozhraní je rozděleno na 3 základní sekce: panely nástrojů textové pole ukázka vytvořené stránky a vymazání napsaného kódu Jak jsem již zmínila výše, pro tvorbu webové stránky nemusí uživatel znát HTML jazyk. Uživatel si vybere požadovanou akci z panelu nástrojů, poté se mu zobrazí popup okno do kterého vyplní požadovaný text/hodnotu, viz Obrázek 5 Pop-up okno. Obrázek 5 Pop-up okno Po vyplnění napsaného textu/hodnot a jejich potvrzení si do textového pole editor vygeneruje zdrojový kód. Jak je vidět na Obrázek 6 Struktura kódu, kód který se generuje nemá žádnou strukturu a díky tomu je nepřehledný. Tento nestrukturovaný 15

16 kód si uživatel může manuálně upravit pomocí klávesy enter nařádkovat tagy nicméně i poté je orientace v rozsáhlejším zdrojovém kódu obtížná. Obrázek 6 Struktura kódu Pro zobrazení designu stránky stačí kliknout na příkaz Ukaž stránku. Editor automaticky přeloží HTML kód a vytvoří stránku. Takto vytvořenou stránku si může uživatel uložit a nahrát na vybraný server. Obrázek 7 Zobrazení stránky Uživatelé, kteří využijí online HTML editoru, jsou plně odkázáni na důvtip a předvídavost programátora, který editor a jeho funkce programoval. Editor je schopný zpracovat např. i PHP 19 kód, ale to už předpokládá určitou znalost a orientaci v PHP jazyku. V případě, že by si uživatel chtěl vyzkoušet tvorbu jednoduchých webových stránek, které nebude chtít nikde publikovat, může tohoto editoru využít. V okamžiku, kdy bude chtít uživatel vytvořit přehledné stránky a bude je chtít publikovat, měl by využít tzv. WYSIWYG editoru, se kterým lze snadno a lehce vytvořit dynamické a profesionální webové stránky. Více o těchto editorech viz níže. 19 Původní význam by Personal home page, nyní je to Hypertext Preprocessor 16

17 1.7.2 WYSIWYG editory WYSIWYG editory jsou aplikace, s jejichž pomocí vytváří uživatel zdrojový kód. Slovo WYSIWYG je akronym anglické věty What you see is what you get ( Co vidíš, to dostaneš ), a vypovídá o vlastnostech editorů. Práce s těmito editory je velice jednoduchá, pomocí šablon, přímým výběrem z nabídky nebo pomocí Drag and Drop 20 si může uživatel vytvořit či přizpůsobit své stránky do takové podoby, která mu bude vyhovovat. Tvorba webové prezentace pomocí strukturních editorů vyžaduje znalost HTML/XHTML 21, PHP jazyka a CSS 22 stylů. A protože s nárůstem uživatelů internetu, roste i touha těchto uživatelů prezentovat sebe sama pomocí vlastních stránek, a pokud možno co nejlevněji a co nejjednodušším způsobem, vznikly aplikace v podobě WYSIWYG editorů. Jak jsem již zmínila výše, tyto editory mohou sloužit jako pomocníci při tvorbě a správě zdrojového kódu internetových stránek. Jednoduchou cestou pak může průměrný uživatel vytvořit webovou prezentaci, ať už se jedná o soukromé nebo firemní stránky. Nespornou výhodou WYSIWYG editorů je jejich jednoduchost. Uživatel vytváří stránku např. pomocí šablon, a to co vytvoří se mu okamžitě zobrazuje. K těmto úkonům nepotřebuje uživatel znát žádný programovací, nebo značkovací jazyk. Editor vytváří stránky a jejich podobu sám, podle toho jaké nástroje uživatel použije. Ve své bakalářské práci zkoumám vhodnost použití WYSIWYG editoru Microsoft Expression Web 4. Jeho vhodnost zjistím porovnáním s dalšími editory, kteé jsem si pro tuto práci vybrala. Dalšími editory jsou Adobe Dreamweaver CS5, TinyMce a BlueVoda,které představuji níže. Microsoft Expression Web 4 Tento editor vytvoří kód, který plně dodržuje moderní standardy W3C 23, jako jsou XHTML, CSS, XML 24 a XSLT přetažením vložit 21 extensible HyperText Markup Language 22 Cascading Style Sheets 23 World Wide Web Consortium 24 extensible Markup Language 25 Extensible Style Language Transformatio 17

18 design. Obrázek 8 Microsoft Expression Web 4 Minimální systémové požadavky: Microsoft Windows XP SP3,Windows Vista, Windows 7, nebo Windows Server 2008 PC s 1 GHz procesorem nebo rychlejší 1 GB RAM nebo více 2 GB nebo více volného místo na disku.net Framework 4.0 Silverlight 4.0 DirectX MB Jednotku DVD-ROM 128 MB GPU Monitor s rozlišením 1024 x 768 a 24-bit color, nebo vyšší Přístup na internet pro využívání funkcí internetu a k síti 26 Microsoft Expression má tři režimy rozdělení pracovní plochy, a to code, split a Režim split je pro případ, že uživatel chce mít přehled o kódu a zároveň chce vidět jak se ve skutečnosti tagy zobrazují a co dělají. Jak je patrné, v jedné části zůstává zdrojový kód stránky a v té druhé se zobrazuje podoba stránky tak, jak bude vypadat na internetu. V režimu design vidí uživatel grafickou podobu stránky. V tomto režimu také může použít jakoukoli funkci z postranních panelů, či lišty nástrojů. Tvorba webu v režimu design, se provádí pouhým přetažením požadovaného atributu a lze okamžitě sledovat, jak tento atribut bude na stránce vypadat. 26 Microsoft [online]. 2012[cit ] Dostupný z WWW:< 18

19 Pro uživatele, kteří se orientují ve značkovacích a programovacích jazycích, je zde režim code - kde je zobrazen pouze zdrojový kód stránky a individuální tvůrce si zde může zapisovat a upravovat HTML tagy sám. Adobe Dreamweaver CS5 Adobe Deramweaver je WYSIWYG editor, který obsahuje mnoho funkcionalit, jako je např. HTML, XHTML, CSS, XML, JavaScript, Ajax, PHP, ASP apod. pro tvorbu webových aplikací. S jeho pomocí lze vytvořit kvalitní webové stránky a různé dynamické aplikace, které splňují moderní standardy W3C. Adobe Dreamweaver je dále propojen se službou BrowserLab, což je služba online pomocí které umožňuje testovat vytvořené stránky pro různé internetové prohlížeče. Neméně důležitá je také podpora nápovědy při psaní kódu. Většina HTML editorů je určena pro Microsoft Windows, ale společnost Adobe vytvořila verzi Dreamweaveru i pro Apple Mac OS X, čímž umožnila uživatelům počítačů od společnosti Apple tento editor využívat. Obrázek 9 - Dreamweaver Minimální systémnové požadavky pro Microsoft Windows: Procesor Intel Pentium 4 nebo AMD Athlon 64 Microsoft Windows XP SP2/SP3, Windows Vista Home Premium, Business, Ultimate nebo Enterprise SP1, nebo Windows MB paměti RAM 1 GB volného místa na pevném disku pro instalaci + další volné místo během instalace (nelze instalovat na vyměnitelná paměťová zařízení) Monitor s rozlišením a 16bitová grafická karta 19

20 Software Java Runtime Environment 1.6 (součást produktu) Jednotka DVD-ROM Přehrávání médií ve formátu HTML5 vyžaduje software QuickTime připojení k internetu pro registraci 27 Minimální požadavky pro Apple Mac OS X Vícejádrový procesor Intel Mac OS X verze 10.6 nebo MB paměti RAM 1,8 GB volného místa na pevném disku pro instalaci + další volné místo během instalace (nelze instalovat na vyměnitelná paměťová zařízení typu flash) Monitor s rozlišením a 16bitová grafická karta Prostředí Java Runtime Environment 1.6 (součást produktu) Jednotka DVD-ROM Přehrávání médií ve formátu HTML5 vyžaduje software QuickTime Připojení k internetu pro registraci 28 Stejně jako Microsoft Expression Web, má Dreamweaver 3 režimy zobrazení pracovní plochy code, split, design. Při zobrazení split, se pracovní plocha rozdělí na dvě části vertikálně, část s kódem vlevo a design vpravo. Toto zobrazení lze však snadno obrátit, tedy design vlevo a kód vpravo. V tomto zobrazení je pak možné zapnout další funkce jako je Live code, Live wiev, Inspect. Po spuštění funkce Live code, se v liště dokumentů otevřou všechy soubory, které jsou provázány s aktuální stránkou. Live wiev pak zobrazuje funkční náhled stránky, takže je možné kontolovat funkčnost stránky, aniž by se musela otevírat v prohlížeči. Funkce inspect pak při najetí myši na objekt v okně s náhledem stránky zvýrazní kód v okně se zdrojovým kódem. Všechny tyto funkce práci s tímto editorem usnadňují. KompoZer Tento editor je nástupcem dříve rozšířeného editoru NVU, který vytvořila společnost Mozilla. Jeho největší výhodou je široká nabídka jazykových verzí, kompatibilita s operačními systémy Microsoft Windows, Mac OS X i Linux a snadná editace. KompoZer je navržen tak, aby práce v něm byla rychlá a efektivní. 27 Adobe[online] [cit ]. Dostupné z WWW: < 28 Adobe[online] [cit ]. Dostupné z WWW: < 20