1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Kateřina Steinhauserová Tvorba webo...
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
2012
1
Č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
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
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.
Key words: WYSIWYG, editors, HTML, Microsoft Expression Web 4, internet, www.
4
OBSAH Úvod ................................................................................................................................. 6 Teoretická část ............................................................................................................. 8 1 Web ........................................................................................................................... 8 1.1
Historie a vývoj internetu .................................................................................... 8
1.2
Historie a vývoj world wide webu ..................................................................... 8
1.3
Histrie a vývoj PHP ................................................................................................. 9
1.4
Historie a vývoj CSS ............................................................................................. 10
1.5
Historie a vývoj FLASH ....................................................................................... 12
1.6
Historie a vývoj HTML ........................................................................................ 13
1.7
CMS systémy .......................................................................................................... 13
Praktická část ............................................................................................................ 28 2 Tvorba uživatelské rozhraní nad MSSQL databází ................................ 28 3 Analýza předmětů a nAVRžení map ........................................................... 30 4 Tvorba funkční klikací mapy ........................................................................ 31 4.1
Mapa pro obor Podnikové informační systémy a Microsoft Expression
Web 4
36
4.3
Mapa pro obor Informační systémy a Adobe Dreamweaver ................. 38
4.4
Mapa pro obor Služby knihoven a editor KompoZer ............................... 39
4.5
Mapa pro obor Služby muzeíí a galerií a editor BlueVoda ..................... 40
4.6
Tabulkové srovnání vybraných WYSIWYG editorů .................................. 41
Závěr ............................................................................................................................. 43 Seznam použité literatury ..................................................................................... 45 Seznam obrázků ....................................................................................................... 47 Seznam tabulek ......................................................................................................... 48 Seznam příloh ............................................................................................................ 49 5
Ú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
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
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).“1
1.1 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 RAND2 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 ARPA3, 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 Internet4.
1.2
Historie a vývoj world wide webu Internet byl dobrým zdrojem informací, nicméně zobrazení informací bylo 1 2 3 4
A2b [online] dostupný z www: výzkumná společnost americké armády Advanced Research Projects Agency Inter = mezi (v tomto případě mezinárodní), net = síť 8
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 CompuServe5a AOL6, 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 C7 a nazval ho Personal Home Page Tools. Kromě jazyka PHP vytvořil Lerndorf i nástroj s názvem FI8, 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 6 7 8
Poskytovatel internetových služeb Poskytovatel internetových služeb programovací jazyk vyvinutý pro potřeby operačního systému Unix Form interpreter 9
modularity základního PHP kódu. Takto upravený kód byl nazván Zend Engine9 a byl poprvé představen v polovině roku 1999. 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-index11 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: Bakalářská práce 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>, a zápis vypadá takto: Příklad CSS <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <style> h1 {text-align: center; font-family: Arial; font-size: 16px; color: pink} 9
název vznikl z křestních jmen Zeeva Suraskiho a Andiho Gutmanse HTTP relací (síťové spojení mezi serverem a klientem) 11 hodnota z-indexu vyjadřuje vzdálenost prvku od plochy 10
10
Ukázka nadefinování CSS v hlavičce
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: Příklad CSS <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
Ukázka nadefinování CSS v hlavičce
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
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 plugin12 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
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 CERNu13. 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 1996. 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 2022. 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, WYSIWYG14 editory, strukturní editory, generátory webů15 a CMS sytémy.
1.7 CMS systémy CMS16 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. 2012-427] dostupný z www http://info.spsnome.cz/WWW/6Editory. 16 Content Management System 13
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. hosting17. 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 Awards18.
1.7.1 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 18
umožňuje zveřejnění webových stránek na určitém serveru Soutěž o nejlepší volně šiřitelný CMS systém. 14
Obrázek. 4 – Best Page Minimální systémové požadavky: •
připojení k internetu
•
internetový prohlížeč Tento editor je dostupný z www [http://bestpage.cz/sluzby/sluzby18.html]. 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
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 PHP19 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
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/XHTML21, PHP jazyka a CSS22 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 W3C23, jako jsou XHTML, CSS, XML24 a XSLT25.
20
přetažením vložit eXtensible HyperText Markup Language 22 Cascading Style Sheets 23 World Wide Web Consortium 24 eXtensible Markup Language 25 Extensible Style Language Transformatio 21
17
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® 9.0 128 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íti26 Microsoft Expression má tři režimy rozdělení pracovní plochy, a to code, split a
design. 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
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 7
•
512 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 1 280 × 800 a 16bitová grafická karta 19
Přehrávání médií ve formátu HTML5 vyžaduje software QuickTime 7.6.6.
•
připojení k internetu pro registraci27 Minimální požadavky pro Apple Mac OS X
•
Vícejádrový procesor Intel
•
Mac OS X verze 10.6 nebo 10.7
•
512 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 1 280 × 800 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 7.6.6.
•
Připojení k internetu pro registraci28 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. 2012-4-30]. Dostupné z WWW: < http://www.adobe.com/products/dreamweaver/tech-specs.html> 28 Adobe[online] [cit. 2012-4-30]. Dostupné z WWW: < http://www.adobe.com/products/dreamweaver/tech-specs.html> 20
Obrázek 10 - KompoZer Systémové požadavky: KompoZer nemá zvláštní systémové požadavky, vzhledem k tomu že multiplatformní dá se nainstalovat na tyto typy operačních systémů: •
všechny verze operačního systému Microsoft Windows
•
verze systému Mac OS 10.4 a vyšší
•
Linux
•
Unix
•
volné místo na pevném disku (záleží od velikosti stahované verze)29 Díky nenáročnosti je možné editor umístit například na USB flash disk, nebo
iPod a pohodllně ho přenášet i s uživateským nastavením. BlueVoda Editor BlueVoda je jedním z produktů společnosti VodaHost, která poskytuje web hosting. Je to volně stažitelný WYSIWYG editor, který umí pracovat s velkým množstvím prvků, jako je např. video, flash animace, návštěvní knihy, image mapy. Prostředí tohoto editoru se podobá prostřední MS Word a jeho ovládání je intuitivní, viz obrázek 11 – BlueVoda. Tento editor jsem do porovnání vybrala hlavně z důvodu rozdílných reakací různých uživatelů. Většinu uživatelů, kteří tento editor zkusili, totiž odradilo ukládání vytvořených
29
KompoZer [online]. Mozzila Foundation [cit.2012-5-3]. Dostupný z WWW:< http://www.kompozer.net/download.php> 21
souborů s příponou .bvp 30. Při zvolení publikace souboru pak editor nabídne IP adresy serverů, na které je možné soubor nahrát. Pro nahrání je však potřeba uživatelské jmého a heslo, které uživatel získá při registraci. Soubor v tomto formátu lze tedy použít jen a pouze na serveru BlueVoda. Existuje však způsob, kterým lze HTML soubor z editoru BlueVoda získat. Přímo z editoru je možné spustit zobrazení stránky v prohlížeči, který je v počítači nastaven jako výchozí. Aby se však stránka mohla v prohlížeči zobrazit, musí být uložena na nějakém místě v počítači ve formátu, který prohlížeč umí zpracovat, v tomto případě tedy ve formátu .html. Umístění tohoto souboru lze zjistit jednoduchým způsobem. Při spuštění stránky se v adresovém řádku prohlížeče zobrazí celá cesta k požadovanému .html souboru, tuto cestu stačí zkopírovat a vložit ji do adresového řádku v průzkumníku. Poté se zobrazí složka, kde jsou uloženy vytvořené .html soubory. Tyto soubory lze dále upravovat v dalších editorech a nahrávat na vybrané servery. Funkční stránky nelze získat pouhým zkopírováním zdrojového kódu, zobrazené stránky, jeho vložením do textového editoru a uložením ve formátu .html. Takto vytvořená stránka totiž obsahuje špatnou cestu k obrázkům a případným dalším externím souborům.
Obrázek 11 - BlueVoda Systémové požadavky •
Windows XP, Vista, Windows 731 Tento editor má pouze jeden režim zobrazení obrazoky a to design. Veškerá práce
tedy probíhá pomocí funkce Drag and Drop. Hodí se pro rychlé vytvoření webových 30
stránek, jejichž kód je však nestrukturovaný a tím i velice nepřehledný. Srovnání vybraných WYSIWYG editorů MEW 4 Nutná instalace Podpora jiných OS (Mac OS, Linux, Unix) Zobrazení kódu v režimu design Zobrazení kódu v režimu split Zobrazení kódu v režimu cone Možnost ručního zásahu do kódu Funkce Drag and Drop Možnost instalace na přenosé zařízení Vytvoření strukturovaného kódu
Dreamweaver
KompoZer
BlueVoda
ano
Ano
ano
ano
ne
ano
ano
ne
ano
ano
ano
ano
ano
ano
ano
ne
ano
ano
ano
ne
ano
ano
ano
ne
ano
ano
ano
ano
ne
ne
ano
ne
ano
ano
ano
ne
Tabulka 1 – Srovnání vybraných editorů
1.7.3 Strukturní editory Strukturní se jim říká proto, že je v nich zobrazen pouze kód a jeho struktura. Uživatel tedy nevidí jaká je skutečná podoba stránky, pro zobrazení musí svůj kód nejdříve uložit a poté spustit. Tyto editory jsou používané především zkušenými odborníky pro práci s dynamickými stránkami. Mají sice tzv. „našeptávač“, nicméně znalost HTML jazyka je potřebná. Práce ve strukturních editorech se podobá práci v poznámkovém bloku (i poznámkový blok lze použít pro vytvoření html stránky). Výhodou strukturních editorů je to, že tvůrce stránek má absolutní kontrolu nad kódem. Jako zástupce strukturních editorů jsem vybrala PSPad. PSPad je volně stažitelný editor, který umí pracovat s velkým množstvím programovacích jazyků od PHP, Java Script, Pearl, až po C++, Python a další. Kromě toho, že PSPad umí pracovat s více než 25 programovacími jazyky, podporuje ještě více jak 120 dalších jazyků v podobě zvýraznění funkčních znaků. Tímto zvýrazněním napomáhá programátorům lépe se orientovat v dlouhých řetězcích programového kódu. 23
Velice užitečným nástrojem, který tento editor obsahuje je také Lorem ipsum generátor. Tento generátor vytváří pseudolatinský text, kterým se při výrobě grafických návrhů nahrazuje smysluplný text. Lorem ipsum připomíná běžný text, avšak nesvádí uživatele ke čtení jako tomu je u běžného textu. Nesmím opomenout ani funkci kapátko. Tato funkce umožňuje zobrazit kód barvy pouhým umístěním křížku na požadované místo. Co však dělá tuto funkci neocenitelnou je fakt, že uživatel může zjistit kód barvy jak na ploše svého počítače tak na internetových stránkách, ale i v libovolném programu umístěném na pevném disku počítače.
Microsoft Windows32 Z Obrázek 9 – PSPad je zřejmé rozdělení pracovní plochy:
•
lišta nástrojů
•
panel nástrojů
•
pracovní plocha PSPad zobrazuje kód jako hierarchickou strukturu elementů a atributů, což
usnadňuje orientaci v kódu, viz. Obrázek 10 – Struktura kódu. Tento program má tzv. našeptávač. V případě, že si uživatel nepamatuje syntaxi nějakého tagu, stačí mu zmáčknout CTRL + mezerník, a PSPad mu nabídne možnosti, které jsou nejbližší k tomu, co napsal. Po vybrání tagu se zobrazí seznam všech hodnot, které se mu dají nastavit.
32
Michal Švantner – osobní stránky [online]. Michal Švantner – [cit. 2012-4-28]. Dostupný z WWW: < http://home.zcu.cz/~msvantne/software.html> 24
Obrázek 13 – Struktura kódu Jak jsem již napsala, PSPad je strukturní editor, tudíž zobrazuje pouze zdrojový kód stránky. Zobrazení režimu náhledu stránky, se dělá pomocí klávesy F10. Editor umožňuje po otevření stránky v prohlížeči nastavovat různá rozlišení obrazovky, viz Obrázek 14 – Nastavení rozlišení.
Obrázek 14 - Nastavení rozlišení Tento editor obsahuje velkou škálu funkcí a podpory pro různé programovací jazyky, a je podle mého názoru určen spíše pro profesionální programátory a uživatele, kteří již mají zkušenosti s programovacími a značkovacími jazyky.
1.7.4 Generátory webů Generátory webů jsou aplikace, s jejichž pomocí si uživatel může vygenerovat jednoduché webové stránky. Převážně slouží k rychlému vygenerování šablony, kterou poté využívá na každé stránce. Kód této šablony si pak uživatel nakopíruje do svého editoru, kde s ním dál pracuje. Práce s tímto generátorem je podobná jako práce s online HTML editorem. Na rozdíl od online HTML editoru, v generátoru webu neprobíhá tvorba na základě odpovědí na vypsané otázky, ale zaškrtáváním a výběrem možností a v případě textu 25
nadpisů a názvu stránky, vypsáním textu. Jako zástupce generátoru webů jsem vybrala Html Generator33
Obrázek 15 – Html generátor Minimální systémové požadavky: •
připojení k internetu
•
internetový prohlížeč Z Obrázek 12 – Html generátor, je vidět rozdělení na 10 částí
•
tabulka
•
nadpis
•
text
•
formuláře
•
textové pole pro vypsání HTML kódu z horních kategorií
•
odkazy
•
menu 33
dostupný na adrese http://www.hypergurl.com/generators/htmlgenerator.html 26
•
základní informace stránky
•
textové pole pro vypsání celého HTML kódu
•
tlačítka pro generování a výběr kódu, tlačítko pro zobrazení stránky Tento generátor je přehledný a práce s ním je opravdu velice jednoduchá. Po
nadefinování jednotlivých kategorií, stačí u každé zmáčknout tlačítko Add. Všechny HTML tagy, které uživatel vytvoří, budou do textového pole přidány přesně v tom pořadí, v jakém uživatel klikne na tlačítko Add. V tomto pořadí se pak zobrazí i na stránce.
27
PRAKTICKÁ ČÁST 2 TVORBA UŽIVATELSKÉ ROZHRANÍ NAD MSSQL DATABÁZÍ Pro vytvoření funkčního uživatelského rozhraní nad MSSQL datábází, bylo důležité správně propojit PHP kód s MSSQL dotazy. Nejdříve jsem si však stanovila podmínky, podle kterých se budou získávané informace zobrazovat. Podmínky $od=intval($_GET["od"])>0 ? intval($_GET["od"]) : 0; $pocetPolozekNaStranu=8; První podmínka porovnává dva výrazy pomocí tzv. „Ternárního operátoru“, který je značen otazníkem. Celá podmínka by se dala zapsat i pomocí příkazu „if – else“. Nicméně zápis pomocí ternárního operátoru se mi zdá přehlednější a jednodušší. Funkce „intval“ pak převádí argument, tedy výsledek ze závorky, na číslo. Na druhém řádku načítám do proměnné „$pocetPolozekNaStranu“ číslo 8, touto proměnnou pak pracuji v dalších částech kódu. Přihlášení do databáze mysql_connect("195.113.78.236", "student", "student"); mysql_select_db("student_cviceni"); mysql_query("SET NAMES 'utf8'"); Výběr informací z databáze $dotaz = "SELECT * FROM Tabulka LIMIT {$od}, {$pocetPolozekNaStranu}"; Výběr informací provede jednoduchý MSSQL dotaz, který vypíše všechna data uložená v tabulce. Dotaz je omezen tak, aby vypisoval aktuální část výsledků, vždy však maximálně 8 řádků. $vysledekDotazu = mysql_query($dotaz); Zde dochází k uložení výsledků z předchozího dotazu do proměnné „$vysledekDotazu“. $pocetRadku = mysql_num_rows($vysledekDotazu); Zobrazí maximálně 8 výsledků na stránku. Výpis tabulky for ($i = 0; $i < $pocetRadku; $i++) { $radek = mysql_fetch_array($vysledekDotazu); // převádí aktuální řádek (vysledek Dotazu) na pole 28
?>
, tedy nečíslovaného seznamu, ve kterém jsou vloženy klikací položky „Předchozí“ a „Další“. Díky těmto položkám je možné přesunout se na další stránky.
Microsoft Expression Web 4, má obsahovat nápovědu pro tvorbu PHP stránek, nicméně při psaní kódu nápovědu nenabízel a většina funkcí editoru byla nedostupná. Stránky tedy bylo potřeba psát ručně, což byla poměrně zdlouhavá práce. Editor při použití PHP kódu nezobrazil ani náhled stránky a v režimu design vypisoval chybu: Stránku nelze otevřít. Pro zobrazení vzhledu bylo potřeba stránky nejdříve nahrát na server. Nezobrazení designu stránky v náhledu považuji u WYSIWYG editoru za velkou škodu. Na funkční rozhraní je možné podívat se na tomto odkazu: http://bakalarskaprace.herobo.com/das_2/index.html Ukázka výsledné stránky viz Obrázek 16 – Ukázka uživatelského rozhraní
Obrázek 16 – Ukázka uživatelského rohraní
3 ANALÝZA PŘEDMĚTŮ A NAVRŽENÍ MAP Pro vytvoření mapy předmětů je důležité nejdříve analyzovat předměty vyučované na VOŠIS, jak v bakalářském tak nebakalářském studijním oboru. Nejdříve je potřeba rozdělit je podle semestrů, zjistit jejich přímé návaznosti mezi sebou a 30
vytvořit návrh mapy. Pro vytvoření návrhu mapy jsem se rozhodla využít produktu Microsoft Expression Design 4, který patří do balíku produktů Microsoft Expression Studio 4 Ultimate, stejně jako WYSIWYG editor Microsoft Expression Web 4, se kterým zde také pracuji. Expression Design 4 je vektorově-bitmapový grafický editor, takže se na tuto práci skvěle hodil. Prvním krokem, ke kterému tento editor po zapnutí automaticky vyzve, je nastavení rozměrů pracovní plochy. Rozměry jsem zvolila 1000px na 700px s rozlišením 96px, které pro návrh každé mapy plně stačí. Jak jsem již zmínila, nejprve je potřeba předměty roztřídit podle semestrů, případně roků, ve kterých se vyučují. Z tohoto důvodu jsem ke každé mapě přiřadila skupinu 4 barev. Každá barva představuje jeden rok a tím dělí celou mapu do 4 úseků – první ročník, druhý ročník, třetí ročník a bakalářské nebo absolventské zkoušky. Barvy jsem vybrala tak, aby bylo jasně vidět rozdíly mezi ročníky. Na každé mapě, viz Příloha č. 1, Příloha č. 2, Příloha č. 3 a Příloha č. 4, je zřejmá posloupnost předmětů, student nemůže být připuštěn ke státním bakalářským či absolventským zkouškám, pokud nemá splněn některý z předmětů. V případě předmětů, které na sebe přímo navazují, např. Právo 1 a Právo 2, si student nemůže zapsat předmět Právo 2, dříve než Právo 1 – předměty mohou být zapsány současně, student však nemůže jeden semestr studovat Právo 2 a až následující semestr Právo 1. Abych mohla z návrhu udělat fungující mapy, vytvořila jsem si v editoru Expression Web 4 ještě obdélníky, které se shodují s barvami použitými na návrzích map. Tyto obdélníky jsem použila jako pozadí pod vybraný text na webové stránce. Dále jsem si pomocí tohoto editoru vytvořila kostry map, šipky určující názvaznost předmětů. Tyto kostry jsem pak použila jako pozadí webové stránky, více viz kap. 3 Tvorba funkční klikací mapy.
4 TVORBA FUNKČNÍ KLIKACÍ MAPY Pro prověření použití Microsoft Expression Web 4 ve výuce, jsem vytvořila každou z map v jiném WYSIWYG editoru a jejich tvorbu ve své práci porovnávám. Před vytvořením samotných map jsem však musela nadefinovat vlastnosti dokumetů CSS styly. Vzhledem k tomu, že tyto styly jsou až na malé detaily, ve formě použitých barev a kostry pro aktuální mapu stejné, věnuji jim zde krátkou kapitolu, kde je představím, viz podkapitola 4.1 Nadefinované CSS styly. Dále jsem řešila otázku zobrazování bližších informací o jednotlivých předmětech. Veškeré informace o všech akreditovaných předmětech pro školní rok 31
2012/2013, jsou uloženy v jednom pdf souboru. Klikací mapa by však měla být co nejjednodušší, co nejméně náročná na zobrazení v prohlížeči a neměla by studenta zatěžovat stahováním celého pdf souboru a následným vyhledáváním předmětu. Problém tedy byl, jak zobrazit bližší informace o předmětu, aniž by bylo potřeba soubor stahovat. Řešení byla tři: vytvoření HTML stránek pro každý předmět, a na tyto stránky poté přenést
•
kompletní informace •
použití JavaScriptu
•
provázat předmět v klikací mapě s konkrétní stránkou v pdf souboru První řešení jsem zavrhla hned ze dvou důvodů. Za prvé by vyvtoření stránky pro
každý předmět bylo příliš zdlouhavé a za druhé v případě jakýchkoli změn by bylo nutné takto vytvořenou stránku znovu upravovat v nějakém HTML editoru. Řešení druhé, použití JavaScriptu, vyžaduje povolení JavaScriptu v prohlížeči, nicméně i v dnešní době nemají někteří uživatelé tento JavaScript nainstalovaný natož pak povolený. To má za následek nezobrazení stránky. Provázání předmětů v klikací mapě s konkrétní stránkou v pdf souboru se tedy jevilo jako nejlepší. Nicméně přímý odkaz na konkrétní stránku v pdf dokumentu byl nefukční a k naindexování dokumentu jsou potřeba hlubší programátorské znalosti, případně placený program. Problém jsem tedy vyřešila s pomocí služby Google wiever, která umožňuje prohlížení dokumentů v různých formátech online. Pro každý předmět jsem vygenerovala pdf soubor, ve kterém byly uloženy detailní informace, nahrála ho do Google wieveru, ten mi vygeneroval tento odkaz: http://docs.google.com/gview?url=www.domena.cz/anj1_nej1.pdf&embedde d=true Pro každý předmět jsem vytvořila jednoduchou HTML stránku, ve které jsem do tagu tento odkaz vložila, tag umožní otevření pdf souboru na mnou vytvořené stránce. Tímto postupem jsem zajistila bezproblémové zobrazení potřebných informací, které je přístupné všem uživatelům bez potřeby cokoli povolovat, stahovat či instalovat.
4.1 Nadefinované CSS styly Jak jsem již zmínila výše, nejprve jsem si musela tyto styly nadefinovat. Soubor se styly nese název „styles.css“ a upravuje zobrazení HTML těla, použitých nadpisů, textu a pop-up oken zobrazujících informace ke každému předmětu. 32
Zde uvádím ukázku stylů a krátký popis: Tělo dokumentu body{ background-color:#f6f5f2; background-image:url('icons/mapa.jpg'); background-position:0px 205px; background-repeat: no-repeat; height:1000px; width:1000px; z-index:1 } Předchozí část kódu definuje zobrazení těla dokumentu, začíná body. Barva pozadí background-color:#f6f5f2;, mimo načtenou kostru mapy backgroundimage:url('icons/mapa.jpg');, je shodná s barvou na pozadí webových stránek VOŠIS. Aby byla mapa dobře umístěna a nezasahovala do vysvětlivek, bylo potřeba ji umístit pomocí background-position. První hodnota 0px udává vzdálenost od levého okraje, hodnota 205px pak udává vzdálenost od horního okraje. Expression Web 4 automaticky nastavuje u obrázků vložených na pozadí jejich opakování, ať už vertikálně nebo horizontálně. Protože potřebuji mít mapu pouze jednou, tak zruším opakování pomocí background-repeat: no-repeat;.Vlastnosti height:1000px; a width:1000px; definují výšku a šířku stránky. V posledním řádku je pak nadefinovaná pozice objektu na ose Z, která určuje pořadí překrývání objektů. Objekt s vyšším číslem z-indexu překrývá objekt s nižším číslem. Nadpisy Pro nadpisy a text jsem definovala text font-family:Georgia, "Times New Roman", Times, serif;. Důvod použití tohoto patkového fontu je, že při případném vytištění se čte lépe než bezpatkový. Barvou nadpisů a textu color: #11663a jsem se opět nechala inspirovat barvou textů z webových stránek VOŠIS. Pro hlavní nadpis bylo potřeba definovat ještě jeho vzdálenost od levého okraje margin-left: 241px;. h2{ font-family:Georgia, "Times New Roman", Times, serif; color: #11663a; margin-left: 241px; } h4{ 33
font-family:Georgia, "Times New Roman", Times, serif; color: #11663a } a{ font-family:Georgia, "Times New Roman", Times, serif; color: #11663a } Tlačítko a informační panel Celá následující část definuje zobrazení pomyslného tlačítka a informačního panelu, tzv. pseoudotříd tagu A, který se zobrazí po najetí myši na příslušné tlačítko. Pro každou mapu bylo potřeba tento kód napsat ve 4 verzích, které se lišily pouze barvou – v každé mapě podle sady barev, které jsem ji přidělila. a.boxpopup1{ position:relative; z-index:2; color: black; background-image:url('icons/modry.jpg'); border: 2px outset #4D23A0; text-decoration:none; padding:5px; text-align:left; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; } Abych mohla nadefinovat vlastnosti „klikacích tlačítek“, vytvořila jsem si třídu a.boxpopup1, které jsem přiřadila z-index:2;, tím jsem nastavila zobrazení této třídy nad pozadím. Barva písma color:black; je nastavená na černou. Dále bylo potřeba načíst do pozadí této třídy obrázek background-image:url('icons/fialovy.jpg');, který mi vytvoří pomyslné tlačítko – button. Jak je již uvedeno v kapitole 2 Analýza předmětů, tyto obrázky jsem si vytvořila pomocí Microsoft Expression Design 4 a simulují mi pomyslný button. Vlastnost border: nastavuje šířku okrajů 2px, vnější ohraničení outset a barvu ohraničení, v tomto případě #4D23A0. Vzhledem k tomu, že Microsoft Expression nastavuje v tomto případě automatické podtržení písma, zrušila jsem toto nadefinování pomocí text-decoration:none;. Další vlastností je padding:, tato vlastnost definuje vnitřní okraje, v tomto případě 5px;. Poslední tři vlastnosti upravují zobrazení 34
textu, tedy text-align: left; zarovná text vlevo, font-size:13px; nastaví velikost písma a poslední vlastnost nastaví použití patkového fontu Times New Roman. Ukázka tlačítka viz Obrázek 17 – Ukázka tlačítka
Obrázek 17 – Ukázka tlačítka Následující pseudotřída a.boxpopup1:hover se aktivuje po najetí myši na „klikací tlačítko“. Je ji přiřazen z-index:3;, což znamená, že se zobrazuje nad „klikacím tlačítkem“. a.boxpopup1:hover{ z-index:3; } Popis jednotlivých předmětů je uveden přímo v HTML kódu a aby zůstal skrytý dokud uživatel nenajede myší nad nějaký předmět, je obalen tagem <span>, který má předdefinovanou vlastnost display:none viz níže. a.boxpopup1 span{ display: none } Po najetí myši na předmět, se spustí pseudotřída a.boxpopup1:hover span, viz Obrázek 14 – Ukázka zobrazení informačního pop-up okna . Tato třída zobrazí informace o předmětu v jednotném odstavci a to díky vlastnosti display:block;. Pozice zobrazení informací je absolutní, a je nastavena o 2 px výše než než horní hranice tlačítka na vzdálenost 75px od levé vnitřní strany tlačítka a šířku 170px. Poslední vlastnost, kterou popíši je line-height:10px; která nastavuje výšku řádku. Ostatní vlastnosti jsou popsány u pseudotřídy a.boxpopup1, viz výše. a.boxpopup1:hover span{ display:block; position:absolute; top:-2px; left:75px; width:170px; border: 1px outset #4D23A0; color:#000; background: url('icons/modryobr.jpg'); 35
Obrázek 18 – Ukázka zobrazení infromačního pop-up okna Nadefinováním těchto stylů jsem si značně ulehčila práci, veškeré vlastnosti jsou nadefinované v jednom souboru, na který jsem se odkazovala z HTML kódu. Nemusela jsem tedy opakovaně psát tento kód ke každému příslušnému elementu na stránce a tím vytvořit nepřehledný kód. Vytvoření funkční klikací mapy pomocí programu Microsoft Expression Web 4 viz níže v podkapitole 3.2 Mapa pro obor Podnikové informační systémy.
4.2 Mapa pro obor Podnikové informační systémy a Microsoft Expression Web 4 Pro vytvoření mapy oboru Podnikové informační systémy jsem zvolila produkt Microsoft Expression Web 4. S pomocí tohoto editoru jsem vytvořila dva soubory. Jeden s názvem „Podnikové informační systémy.html“, ve kterém je obsažen HTML kód a druhý „styles.css“ pro nadefinování CSS stylů. Jako každý HTML editor Microsoft Expression Web 4, vytvořil automaticky strukturu základního kódu. Abych mohla hodnotit tento editor ve všech ohledech, přepla jsem si rozdělení pracovní plochy do zobrazení design. V tomto zobrazení není možné psát zdrojový kód. Tagy lze vkládat pouze přetažením vybraného prvku z panelu nástrojů, na pracovní plochu a tím vložit požadovaný element. Následné úpravy jsou možné na panelu pro úpravu tagů a css stylů. Práce s tímto editorem v zobrazení design a bez znalosti HTML jazyka se mi zdá, až na formátování textu a pozadí stránky poměrně náročná a nepřehledná. Nadpisy a text lze jednoduše upravovat pomocí lišty nástrojů, avšak některé tagy jako např nešly v režimu design upravovat pomocí výběru vlastností, resp. po kliknutí na „Vlastnosti tagu“ se neotevřelo okno pro editaci. Po chvíli hledání tagu pro odkaz , jsem se rozhodla kód stránky psát 36
ručně. Vzhledem k faktu, že se jedná o WYSIWYG editor, jehož jednou z hlavních výhod má být sestavení stránky pomocí přetažení elementů na pracovní plochu a jejich úprav bez zásahu do zdrojového kódu, je nefunkčnost některých příkazů na škodu. Další nevýhodou je pak automatické zapisování kaskádových stylů přímo k použitým tagům, což činí následný kód nepřehledným. Začala jsem tedy práci na klikací mapě na novo, tentokrát v režimu „Split“ , který dělí pracovní plochu na dvě poloviny. V první polovině se zobrazí zdrojový kód, ve druhé pak design stránky. Připravené CSS styly, viz podkapitola 3.1 Nadefinované CSS styly, jsem si propojila s HTML dokumentem pomocí odkazu: Tím se mi automaticky načetly styly a kostra klikací mapy na pozadí stránky. Této kostry se však v režimu design zobrazila jen polovina, a při rolování v zobrazení stránky se vertikálně pohybovala po stránce. Pro vytvoření klikacích polí jsem využila tagu , jehož vlastnosti jsem si nadefinovala v CSS souboru. V tomto souboru jsem definovala také vlastnosti pro tag <span>, který jsem použila pro zobrazení informačního pop-up okna. Problém nastal v okamžiku, kdy bylo potřeba tuto část kódu usadit na správné místo na stránce. V tom mi pomohl tag , kterým jsem předchozí kód „obalila“. Vše, co tag
takto pojme, se vlastně sjednotí do bloku, a to umožní nastavit konkrétní pozici elementu. Výsledný kód jednoho klikacího pole pak vypadá takto:
Vzhledem k tomu, že pozice každého z klikacích polí závisela na kostře mapy a podle ní se měnila, nebylo možné definovat styly pro umístění na stránce jednotně do externího CSS souboru. Proto jsou pozice napsány přímo v HTML kódu u tagu
, 37
pomocí style=““. Vlastnost height:30px; určuje výšku elementu, margin-left:-5px; a margin-top 35px; jsou vlastně vnější okraje elementu, pod kterými se nevykresluje pozadí, proto se používají pro zarovnání elementů od okrajů stránky. Dále bylo potřeba určit, která třída patří ke kterému odkazu, čehož jsem dosáhla pomocí class=“boxpopup1“. Vlastnosti této třídy jsou popsány v podkapitole 3.1 Nadefinované CSS styly. Aby bylo pole funkční a po kliknutí načetlo požadovanou stránku, je nutné na tuto stránku odkázat, a to pomocí href=“nazev.html“. V tomto případě se po kliknutí otevře stránka mat.html, na které jsou bližší informace o předmětu. Tento odkaz se mění v závislosti na předmětu, a pro každý předmět je zvlášť vytvořena stránka, která obsah zobrazuje. Poslední vlastností je target=“_blank“, která při kliknutí otevře odkaz v novém okně. Pozice každého předmětu – klikacího pole – se mění v závislosti na kostře mapy. V okamžiku, kdy bylo potřeba udávat pozice klikacích polí, nastal problém s již zmiňovaným pohybem mapy. Abych mohla umístit všechna klikací pole na svá místa, bylo nutné po každé změně otevírat stránku přímo v prohlížeči a zde toto umístění kontrolovat. Tvoření kódu tímto způsobem bylo poměrně složité a zlouhavé. Avšak i přes nepřesné zobrazování náhledu mapy v režimu design, se vytvořená mapa v prohlížeči zobrazuje správně a podle nastavených parametrů. Cena za anglickou verzi tohoto editoru je 149.95 US$34. Na funkční mapu je možné podívat se na tomto odkazu: http://bakalarskaprace.herobo.com/pis/pis.html
4.3 Mapa pro obor Informační systémy a Adobe Dreamweaver Mapu pro obor Informační systémy jsem vytvářela v editoru Dreamweaver od společnosti Adobe. Práci v tomto editoru jsem začala nejprve vytvořením nového externího souboru styles.css a souboru Podniková informatika.html, které jsem propojila stejně jako v předchozím případě. Abych zkusila práci s tímto editorem bez ručního psaní zdrojového kódu, zapnula jsem režim design. Dokonce i v tomto režimu je Dreamweaver plně funkční a pohodlně se s ním pracuje. Veškeré úpravy se však neprovádějí pomocí „Chytit a vložit“, ale kliknutím na položky v menu. V tomto zobrazení jsem si vytvořila základní strukturu stránky a první klikací pole. V režimu design však nešlo pozicovat klikací pole jejich posunem a vypsat text 34
zobrazující se v informačním pop-up okně. Z tohoto důvodu jsem přepnula do režimu split. V tomto režimu jsem pokračovala ručním psaním kódu. Po celou dobu psaní kódu, mi Dreamweaver poskytoval nápovědu, automatické doplnění tagů. V případě linkování externího CSS souboru automaticky nabízel existující definice tříd. Díky tomuto probíhalo pozicování na kostru mapy velice rychle. Vertikální rozdělení pracovní plochy mi vyhovovalo více, než horizontální v Microsoft Expression Web 4 – bylo přehlednější. Při tomto rozdělení je vidět dostatatečně dlouhá část kódu a zároveň dostatečně velký náhled. Pozicování bylo rychlejší i díky možnosti zobrazení Live wiev, kdy Dreamweaver zobrazoval podobu stránek tak, jak se budou vypadat v prohlížeči. V editoru Adobe Dreamweaver, se mi pracovalo velice dobře. Zobrazení náhledu v reálném čase přesně odpovídalo pozdějšímu zobrazení mapy v prohlížeči. Tento editor je dle mého názoru jeden z nejlepších WYSIWYG editorů, který je možné pořídit. Cena za anglickou verzi tohoto editoru je 399 US$ 35. Na funkční mapu je možné podívat se na tomto odkazu: http://bakalarskaprace.herobo.com/no/is.html
4.4 Mapa pro obor Služby knihoven a editor KompoZer Prostředí tohoto editoru se podobá prostředí MS Word, což mi spolu s českou lokalizací umožnilo rychle se v editoru zorientovat. Stejně jako v předchozích editorech, začala jsem i v KompoZeru vytvořením hlavní stránky Služby knihoven.html a externího CSS souboru. V případě, že bych si nevytvořila externí soubor, definoval by KompoZer styly do hlavičky HTML dokumetu. I v tomto případě však bylo vytvoření mapy poměrně rychlé a to i přesto, že tento editor neobsahuje nápovědu a automatické doplnění použitých tagů. Tvorbu mapy jsem začala v režimu pracovní plochy Rozdělení, kde jsem si vytvořila základ stránek. V tomto zobrazení bylo sympatické zobrazování části kódu podle kliknutí myši v části náhledu. Další užitečnou věcí pak byl funkční náhled, který se choval a vypadal stejně jako výsledná mapa v prohlížeči. Tento editor bych hodnotila jako velice dobrý a doporučila bych ho jak pro začátečníky, tak pro mírně pokročilé v oblasti tworby webových stránek. Jeho přednostmi jsou uživatelská nenáročnost a česká lokalizace. Díky tomu ví uživatel, co
přesně dělá. Navíc se v části kód zobrazuje jen kód vybraného elementu, takže je možné vidět strukturu a náležitosti kódu. To umožňuje uživateli prohlubovat znalosti ve tvoření webových prezentací. Tento editor je volně stažitelný z internetu. Na funkční mapu je možné podívat se na tomto odkazu: http://bakalarskaprace.herobo.com/no/sk.html
4.5 Mapa pro obor Služby muzeíí a galerií a editor BlueVoda Postup vytvoření mapy v tomto editoru jsem musela změnit . BlueVoda je typický Drag and drop editor. To znamená, že práce s ním spočívá pouze v přetahování vybraných prvků, kdy je přímý zásah do „naklikaného“ zdrojového kódu omezen pouze na přidávání vlastností k vybranému tagu. V tomto editoru nelze manuálně mazat a měnit „naklikaný“ kód, nehledě na to, že přidaný kód se zobrazoval pouze v prohlížeči a ještě špatně, ale nezobrazoval se v editoru. Toto byl důvod, kvůli kterému jsem nevytvářela externí CSS soubor. Editor by stejně nebyl schopný na tento soubor odkázat, natož ho zpracovat. BlueVoda si zapisuje veškeré použité CSS styly přímo k vybranému tagu. Práce v tomto editoru mi přišla poněkud chaotická, neboť na některé úpravy prvky vůbec nereagovaly. Překvapilo mě také, že po určité chvíli editor začal psát vybraná písmena (ě,č,ř) bez diakritiky. To bylo způsobeno znakovou sadou ISO-8859-1, která ovšem nešla změnit. Abych mohla vytvořit mapu v tomto editoru, zvolila jsem tvorbu klikacích polí pomocí tagu button. V tomto ohledu nabízí BlueVoda poměrně hezké řešení buttonů, kde s pomocí JavaScriptu vytvoří tlačítko, které po najetí kurzoru bliká. Dokonce i následné umisťování buttonů na kostru mapy na pozadí stránky šlo poměrně rychle. Avšak hezké „blikací“ buttony byly na úkor zobrazení informačního panelu. Vytvoření informačního panelu nebylo možné, neboť editor BlueVoda neobsahoval funkci, díky které by zobrazení panelu bylo možné. Navíc byl výsledný kód dlouhý a nepřehledný. Tento editor bych nedoporučovala vůbec stahovat a zkoušet, a to ani v případě, že uživateli jde pouze o vytvoření nějakých stránek. Na trhu je spousta dalších WYSIWYG editorů, které jsou pro rychlé vytvoření webu vhodnější. Samotný editor je možno volně stáhnout z internetu. Na mapu vytvořenou v tomto editoru je možné se podívat na tomto odkazu: http://bakalarskaprace.herobo.com/bv/smg.html Na funkční mapu (která je vytvořena ještě jednou v MEW4) je možné podívat se 40
na tomto odkazu: http://bakalarskaprace.herobo.com/no/smg.html
4.6 Tabulkové srovnání vybraných WYSIWYG editorů Abych mohla lépe porovnat práci v popisovaných editorech, sestavila jsem ze zjištěných informací tabulku. Jako srovnávací kritéria jsem stanovila: •
Systémové požadavky, kde jsem se zaměřila na náročnost progamu na operační systém počítače
•
Podpora uživatelů, zaměřená na základní dokumenty k editorům a případnou online nápovědu.
•
Podporované formáty.
•
Nápověda při psaní kódu.
•
Přehlednost editoru.
•
Rozšiřitelnost o různé další moduly.
•
Validnost kódu - schopnost programu tvořit kód podle standardů W3C.
•
Česká lokalizace.
•
Cena.
Bodové hodnocení jsem nastavila od 1 do 5, kde 5 = nejlepší hodnocení a 1 = nejhorší hodncení. Maximální počet bodů je 65. MEW4 Systémové požadavky
ZÁVĚR Ve své bakalářské práci jsem zjišťovala vhodnost WYSIWYG editoru Micorosft Expresion Web 4 ve výuce PHP a HTML skriptů. Tuto vhodnost jsem prověřovala vytvořením Jednoduchého uživatelského prostředí nad MSSQL databází a vytvořením klikacích map předmětů vyučovaných na Vyšší odborné škole informačních služeb v Praze. Veškeré výsledky této práce jsou uloženy na přiloženém CD. Vytváření návrhů map v programu Microsoft Expression Design probíhalo v pořádku, a pracovalo se mi s ním dobře. Program pracoval plynule a nabízel export vytvořených objektů do několika různých formátů. Při tvorbě klikacích map se mi pracovalo nejlépe s editorem Dreamweaver od společnosti Adobe a editorem KompoZer a to i přesto, že KompoZer neobsahuje nápovědu pro psaní kódu. Asi nejhůře se mi pracovalo s editorem BlueVoda. Tento editor byl při tvorbě poněkud těžkopádný a vytvářel zbytečně složitý kód. Klikací pole bylo nutné vytvářet jako buttony propojené s JavaScriptem, to způsobilo vytvoření dlouhého a nepřehledného kódu. V jako jediném z vybraných editorů, se mi v editoru BlueVoda, nepodařilo vytvořit informační pop-up okna k předmětům. Na konec jsem si nechala srovnání s editorem Microsoft expression Web 4. I přes ujišťování ze společnosti Microsoft, že se jedná o jeden z nejlepších WYSIWYG editorů, musím konstatovat, že práce v něm byla zdlouhavá a občas poněkud nepřehledná. Již při tvorbě uživatelského rozhraní pro MSSQL databázi měl Expression problém se zpracováním PHP kódu. Editor měl také problém s auktualizací seznamu dokumentů, kdy se při přesunutí dokumentu v průzkumníku tato změna nezobrazila ve stromu dokumentů v editoru. Provedenou změnu však editor zaregistroval a při pokusu dokument otevřít nastala chyba. Dokument tedy v zobrazené struktuře Expressionu zůstával na místě, nešlo ho otevřít ani přesunout a nezobrazoval se ni ve složce kam byl ručně přesunut. I přesto, že se jedná o WYSIWYG editor, jehož hlavní výhodou má být tvorba webových stránek pomocí funkce Drag and Drop, ne vždy šla tvorba pomocí této funkce jednoduše. Další problém byl s nápovědou u jednotlivých tagů. V dnešní době existují eitory, které při napsání prvních písmen do těla webových stránek poskytnou výběr možných tagů a příkazů, uživatel si vybere ze seznamu a editor doplní zbytek tak, aby byl příkaz či tag kompletní, tzn. v případě párového tagu doplní editor, po napsaní první části tagu, i ukončovací značku. Podle mého názoru by neměla tato nápověda 43
chybět ani v profesionálním editoru. Microsoft Expression Web 4 sice tuto nápovědu obsahuje, ale pouze pro HTML jazyk a aby doplnil celý tag je nutné ručně napsat celou první část tagu. Jak jsem již zmínila v kapitole 2, tento editor postrádá nápovědu pro psaní PHP skriptů. Vzhledem k tomu, že se jedná o profesionální nástroj, je to velká nedostatek. Jak je vidět ze srování WYSIWYG editorů, Microsoft Expression Web 4 vychází až na třetí místo, a to hlavně díky nárokům na systém, chybějící české lokalizaci a ceně. Tento editor není podle mého názoru celkově ani nejlepším ale ani nejhorším ze srovnávaných editorů, nicémě i přesto, že ze srovnání vyšel nejlépe volně stažitelný WYSIWYG editor KompoZer, v případě Microsoft Expression Web 4 se jedná o profesionální editor, s dostatečnou online podporou, který umí pracovat nejen s HTML a PHP skripty ale např. i s JavaScripty s možností ukládat vytvořené stránky přímo na server. Navíc Microsoft Expression Web 4 vytváří stránky, které vyhovují standardům W3C38 a jeho znalost může zvýšit šance studentů VOŠIS na trhu práce.
38
Wordl Wide Web Consortium – Mezinárodní konsorcium pro vývoj webových standardů pro Wordl Wide Web. 44
SEZNAM POUŽITÉ LITERATURY •
A2b [online]. PanPetr, 2012 [cit. 2012-4-21]. Dostupný z WWW:http://www.a2b.cz/co-je-web/
•
Výuka informatiky [online]. Školní web pro podporu výuky, 2011 [cit. 27.4.2012] dostupný z www http://info.spsnome.cz/WWW/6Editory.
SEZNAM TABULEK Tabulka 1 – Srovnání vybraných editorů Tabulka 2 – Bodové srovnání vybraných editorů
48
SEZNAM PŘÍLOH Příloha č. 1 Návrh mapy předmětů bakalářského studijního programu Podnikové informační systémy Příloha č. 2 Návrh mapy předmětů nebakalářského studijního programu Podniková informatika Příloha č. 3 Návrh mapy předmětů nebakalářského studijního programu Služby knihoven Příloha č. 4 Návrh mapy předmětů nebakalářského studijního programu Služby muzeí a galerií Příloha č. 5 CD
49
Příloha č. 1 Návrh mapy předmětů bakalářského studijního programu PIS
50
Příloha č. 2 Návrh mapy předmětů nebakalářského studijního programu Podniková informatika
51
Příloha č. 3 Návrh mapy předmětů nebakalářského studijního programu Služby knihoven
52
Příloha č. 4 Návrh mapy předmětů nebakalářského studijního programu Služby muzeí a galerií
