MATURITNÍ PRÁCE dokumentace Úprava systému MATPRAC Maxmilián Klimčík školní rok: 2012/2013 obor: třída: Elektronické počítačové systémy PS4B
ABSTRAKT Práce se zabývá grafickou úpravou školního webového systému pro správu a evidenci maturitních prací MATPRAC. K tomuto účelu bylo využito vlastností jazyka CSS a HTML. Bylo navrhnuto grafické ztvárnění systému, tento koncept byl dále realizován výše uvedenými programovacími jazyky. Byly navrženy všechny stránky projektu, od registrace až po odevzdání. Podoba nových webových stránek byla vytvořena s ohledem na vlastní webové stránky školy. Byla také zajištěna funkčnost projektu v nejpoužívanějších internetových prohlížečích.
OBSAH ÚVOD... 6 1 CÍLE PRÁCE... 7 1.1 MODIFIKACE VZHLEDU SYSTÉMU MATPRAC... 7 1.2 KONZISTENTNOST VZHLEDU NAPŘÍČ RŮZNÝMI PROHLÍŽEČI... 7 2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ... 8 2.1 POUŽITÉ PROGRAMY... 8 2.1.1 Adobe Dreamweaver... 8 2.1.2 Mozilla Firefox... 9 2.1.3 Adobe Photoshop... 10 2.2 POUŽITÉ TECHNOLOGIE... 10 2.2.1 (X)HTML... 10 2.2.2 CSS... 10 3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY... 11 3.1 TVORBA NÁVRHU DESIGNU STRÁNEK... 11 3.1.1 Hlavička... 11 3.1.2 Navigace... 12 3.1.3 Obsah... 13 3.1.4 Přihlášení do systému... 14 3.1.5 Registrace... 15 4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ... 16 4.1 MODIFIKACE VZHLEDU SYSTÉMU MATPRAC... 16 4.2 KONZISTENTNOST VZHLEDU MEZI RŮZNÝMI PROHLÍŽEČI... 16 5 SHRNUTÍ... 19 SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ... 20 SEZNAM OBRÁZKŮ... 21
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 6 ÚVOD Autor se s tvorbou webových stránek poprvé setkal už před více než 5 lety, a od té doby se občasně touto problematikou zabývá. Cílem této práce bylo vytvořit nový, uživatelsky přívětivější designový návrh systému MATPRAC. K tomuto účelu tedy bylo vytvořeno několik konceptů možné podoby stránek. Protože však jde o školní systém propojený se stránkami školy, byla finální podoba tvořena s úmyslem zachování určité grafické jednotnosti. Dokument také nastiňuje několik zásad tvorby webových prezentací, podle kterých se řídí i konečný návrh.
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 7 1 CÍLE PRÁCE Cílem práce bylo graficky vylepšit školní systém pro správu maturitních prací MATPRAC. 1.1 Modifikace vzhledu systému MATPRAC Je třeba vytvořit grafický návrh sestávající se z rozmístění prvků stránky a jejich barevného provedení. Stránky si přitom musí zachovat svoji jednotu a zároveň podobnost se školními stránkami. 1.2 Konzistentnost vzhledu napříč různými prohlížeči Jelikož v dnešní době uživatelé používají rozličné internetové prohlížeče, je potřeba webové prezentace upravit tak, aby se ve všech prohlížečích zobrazovaly korektně.
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 8 2 VÝBĚR TECHNOLOGIÍ PRO ŘEŠENÍ 2.1 Použité programy 2.1.1 Adobe Dreamweaver Adobe Dreamweaver je komplexní program pro tvorbu a editaci webových stránek i aplikací. Uživatel má k dispozici množství nástrojů, které zjednodušují práci, například vlastní validátor nebo živý náhled. Podporuje běžné technologie typu HTML, CSS, JavaScript, ze serverových pak třeba PHP, ColdFusion a mnoho dalších. Obsahuje množství pokročilých funkcí, například si lze plně nastavit zvýrazňování syntaxe, při zadávání kódu barvy se ukáže se paleta pro její přímý výběr apod. Výborná je funkce doplňování kódu. Vlastní WYSIWYG mód generuje validní a přehledný kód. Od verze CS5 má podporu HTML5 i CSS3. Obr. 1: Prostředí Adobe Dreamweaver
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 9 2.1.2 Mozilla Firefox Mozilla Firefox je bezplatný webový prohlížeč s otevřeným kódem. Oficiálně podporovanými platformami jsou Microsoft Windows, Linux a Mac OS. Je vyvíjen společností Mozilla Corporation, která spolupracuje se stovkami dobrovolníků. Chybné je ale tvrzení, že je Firefox šířen pod volnou licencí. Tak jsou šířeny jen zdrojové kódy aplikace, nikoliv Firefox jako zkompilovaná verze. První verze byla vydána v listopadu 2004 a postupem času se stala jedním z nejpoužívanějších programů s otevřeným kódem. Je zde také mnoho možností k jeho přizpůsobení každému uživateli. Dle statistik se Firefox v prosinci 2009 stal nejoblíbenějším prohlížečem na světě, jeho podíl však kvůli konkurenci klesá. V současnosti lze tvrdit, že Firefox je třetím nejpoužívanějším prohlížečem na světě. Obr. 2: Mozilla Firefox
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 10 2.1.3 Adobe Photoshop Adobe Photoshop je grafický editor pro tvorbu a úpravu rastrové grafiky. Při práci byl použit k navržení vzhledu stránky a jejích grafických prvků. Tento program se může díky svým funkcím řadit mezi nejlepší grafické softwary na světě. 2.2 Použité technologie Obr. 3: Adobe Photoshop 2.2.1 (X)HTML XHTML je značkovací jazyk pro tvorbu hypertextových dokumentů. Dříve se předpokládalo, že se stane nástupcem jazyka HTML, jehož vývoj byl ukončen ve verzi 4.01. V roce 2007 ale byla založena skupina, která měla za úkol vytvořit novou verzi HTML. Ta nese označení HTML5. Při tom paralelně pokračuje i vývoj XHTML 2.0. [1] 2.2.2 CSS Kaskádové styly jsou jazykem pro úpravu zobrazení dokumentů v jazycích HTML, XHTML nebo XML. Nabízí rozsáhlé možnosti formátování.
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 11 3 ZPŮSOBY ŘEŠENÍ A POUŽITÉ POSTUPY Před započetím jakékoliv práce je výhodné nastínit si její jednotlivé body. To zjednoduší další orientaci v projektu. 3.1 Tvorba návrhu designu stránek V dnešní době se lze setkat s rozličnými designovými řešeními webových stránek. Jsou zde jak stránky experimentální, tak klasické koncepce. Obecně lze prvky stránek rozdělit na několik objektů: hlavička, navigace, vlastní obsah a patička. To se samozřejmě mění dle obsahu těchto stránek. 3.1.1 Hlavička Jde o horní část stránky. Většina webů má v této části obrázek se svým názvem nebo logem, či nějaký barevný pruh sloužící k podobnému účelu. Při tomto návrhu byl použit šedý obdélník s centrovaným modrým názvem školního systému. Barevné schéma celého návrhu je téměř shodné s barvami použitými na stránkách školy. Toto pomáhá uživateli k orientaci při procházení webu, ví totiž, že se pořád nachází na těchto stránkách. Stávající hlavička systému MATPRAC navíc jako pozadí textu používá část orginálního obrázku používaného v operačním systému Microsoft Windows. Pro stávající text hlavičky je navíc použito nepříliš vhodného písma a celá hlavička tak rozhodně nepůsobí reprezentativně. Tomu nepomáhá ani třířádkový box s údaji uživatele, který přímo překrývá část hlavičky. Hlavička je navíc spojena s menu, což jen přidává na nepřehlednosti. Obr. 4: Stávající hlavička s menu
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 12 V autorově designovém návrhu je použito spíše minimalistického stylu. Celou hlavičku tvoří pouze jednobarevný šedostříbrný pruh s modrým decentním písmem, které je vycentrováno. Díky tomu disponuje koncept již na první pohled jistou grafickou čistotou. Tento motiv se navíc opakuje v celém projektu. 3.1.2 Navigace Menu stránek je tvořeno dvěma rozcestníky. V původní verzi je tvořeno jedním řádkem, při kliknutí na jeden ze dvou odkazů (přičemž první s názvem Osobní údaje je nefunkční) se zobrazí druhý řádek s podnabídkou. Bohužel však při najetí na právě zvolený odkaz v prvním řádku nastane změna barvy písma, a to na světle zelenou, což při světle modrém podkladu dělá onen odkaz naprosto nečitelným. Aktuálně zvolený odkaz je také podtržen, to je u menu nevhodné. Pro změnu stránky z např. druhého odkazu první nabídky do druhého odkazu druhé nabídky je také třeba zvolit nejprve druhou nabídku, a až po jejím načtení námi požadovaný druhý odkaz. To dělá navigaci stránkami pomalejší a složitější. Obr. 5: Původní menu V projektu je menu vyřešeno jako aktivní prvek při najetí kurzorem myši na odkaz se ona nabídka vysune a ukáže podstránky tohoto odkazu. Po zvolení požadované stránky nebo odjetí kurzoru se zase menu zasune do původní polohy. To dělá navigaci rychlejší a přehlednější není zde třeba načítat onu výše zmíněnou mezistránku. V navrženém menu je také použito stejných barev jako u hlavičky. Obr. 6: Designový návrh menu
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 13 3.1.3 Obsah Jelikož obsah školního systému se nijak měnit neměl, a funkčně byl v pořádku, nebyly provedeny téměř žádné změny. Šlo pouze o menší grafické úpravy, například umístění jednotlivých prvků. Do této části stránky autor přesunul informační box s údaji právě přihlášeného uživatele. Toto umístění neruší celkový dojem z hlavičky stránky a jde zde o graficky nenáročný, přesto pěkný prvek. Obr. 7: Starý informační box Z autorova návrhu byla také po konzultaci s vedoucím práce smazána položka ID, tedy unikátní identifikační číslo uživatele. Pro uživatele samotného neměla žádný význam, tudíž jen zbytečně zabírala místo. Odkaz Odhlásit byl nově zkonstruován jako tlačítko, a ne pouze jako text. Obr. 8: Návrh nového inf. boxu
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 14 3.1.4 Přihlášení do systému K projektu bylo zároveň vypracováno nové přihlašovací prostředí. Byl vytvořen nový formulář, který lépe graficky zapadá do systému MATPRAC. Obr. 9: Stará stránka pro přihlášení Obr. 10: Koncept nové přihlašovací stránky
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 15 3.1.5 Registrace Design výše zmíněného přihlašovacího formuláře byl použit také na nový registrační formulář. Obr. 11: Nový registrační formulář Obr. 12: Nastínění jeho řešení v jazyce HTML
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 16 4 ZHODNOCENÍ DOSAŽENÝCH VÝSLEDKŮ 4.1 Modifikace vzhledu systému MATPRAC Byl vytvořen zcela nový, uživatelsky přívětivější designový koncept školního systému MATPRAC. Nový design je přehlednější, jednodušší a graficky čistější než design starý. Starý design také obsahuje několik chyb, jak typografických, tak funkčních. Ty se povedlo opravit. Celkem bylo vytvořeno 10 stran: úvodní s volbou učitele nebo žáka a možností nové registrace, samotná registrační strana, přihlašovací stránky pro učitele i žáka a celý systém MATPRAC pro přihlášeného žáka. 4.2 Konzistentnost vzhledu mezi různými prohlížeči Jelikož byla dne 26. února 2013 vydána finální verze Internet Exploreru 10, byl projekt odzkoušen také na této zbrusu nové verzi jednoho z nejpoužívanějších internetových prohlížečů. Kromě lehce odlišného typu textu a vlastních tlačítek ve stylu Windows 8 projekt funguje v IE10 naprosto bezchybně. Obr. 13: Finální verze projektu v Internet Exploreru 10
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 17 Mimo výše zmíněný IE10 byl projekt po celou jeho tvorbu kontrolován v aktuálních verzích prohlížečů Mozilla Firefox a Google Chrome, v nich se zobrazoval takřka stejně a bez chyb. Obr. 14: Úvodní stránka v Mozille Firefox Uživatelé systému MATPRAC tudíž nebudou mít žádné problémy se zobrazením, ať používají kterýkoliv z dnešních moderních internetových prohlížečů. Autor si na tomto dal hodně záležet, jelikož ještě pár dní před dokončením byl projekt po spuštění v Internet Exploreru nepoužitelný. Web byl také otestován na zařízení Apple ipad, kde taktéž fungoval bezchybně, a to včetně onoho vysouvacího menu. V budoucnu by bylo ještě možné třeba vytvořit aplikaci pro správu procesu maturitních prací pro systémy ios a Android.
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 18 Obr. 15: Systém MATPRAC na ipadu Obr. 16: Úvodní strana systému na ipadu
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 19 5 Shrnutí Cílem autora bylo vytvořit nový grafický návrh pro školní systém správy maturitních prací MATPRAC. Autor si zvolil tuto práci, jelikož už má s programováním a úpravou webových stránek zkušenosti. Samotný projekt nebyl ani přespříliš složitý, jako spíše časově náročný. S hrubými grafickými návrhy byl autor hotov již v listopadu, nicméně jejich úprava a celkové vytvoření trvalo podstatně déle, než by si autor přál. U tohoto projektu se také znovu potvrdilo známé pravidlo 80:20, tedy za 20% času bylo vytvořeno 80% projektu. Dá se říci, že projekt je hotový, ale v budoucnu by určitě šel vylepšit. Celkově bylo touto prací stráveno několik měsíců, kdy se rozvíjela různá grafická rozvržení systému. Během vývoje se vyskytlo několik problémů, ty se však podařilo vyřešit. Jeden z největších problémů nastal při kontrole projektu v prohlížeči Internet Explorer. Ač v jiných prohlížečích stránky fungovaly, v IE se zničehonic přestaly zobrazovat obrázky a došlo k posunu všech objektů. Problém se však po usilovné snaze vyřešil za zhruba půlhodinu sám. To mohlo být způsobeno právě nainstalovanou novou verzí IE10. Autor si při této práci rozšířil znalosti v oblasti programování webových stránek. V praxi by projekt po pár úpravách mohl být použit jako nový design školního systému pro správu maturitních prací MATPRAC.
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 20 SEZNAM POUŽITÝCH INFORMAČNÍCH ZDROJŮ [1] VÁVRA, David. Technologie pro tvorbu webových aplikací 1. díl. [online]. 12. 4. 2012. [cit. 2013-02-28]. Dostupné z: http://www.posterus.sk/?p=13514
Střední škola informatiky, elektrotechniky a řemesel Rožnov pod Radhoštěm 21 SEZNAM OBRÁZKŮ Obr. 1: Prostředí Adobe Dreamweaver Obr. 2: Mozilla Firefox Obr. 3: Adobe Photoshop Obr. 4: Stávající hlavička s menu Obr. 5: Původní menu Obr. 6: Designový návrh menu Obr. 7: Starý informační box Obr. 8: Návrh nového inf. boxu Obr. 9: Stará stránka pro přihlášení Obr. 10: Koncept nové přihlašovací stránky Obr. 11: Nový registrační formulář Obr. 12: Nastínění jeho řešení v jazyce HTML Obr. 13: Finální verze projektu v Internet Exploreru 10 Obr. 14: Úvodní stránka v Mozille Firefox Obr. 15: Systém MATPRAC na ipadu Obr. 16: Úvodní strana systému na ipadu