VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV POČÍTAČOVÉ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA SYSTÉM PRO SPRÁVU VOLNOČASOVÝCH A VZDĚLÁVACÍCH PROGRAMŮ DIPLOMOVÁ PRÁCE MASTER‘S THESIS AUTOR PRÁCE BC. MIROSLAV TŘÍSKA AUTHOR BRNO 2011 VYSOKÉ UČENÍ TECHNICKÉ V BRNĚ BRNO UNIVERSITY OF TECHNOLOGY FAKULTA INFORMAČNÍCH TECHNOLOGIÍ ÚSTAV POČÍTAČOVÉ GRAFIKY A MULTIMÉDIÍ FACULTY OF INFORMATION TECHNOLOGY DEPARTMENT OF COMPUTER GRAPHICS AND MULTIMEDIA SYSTÉM PRO SPRÁVU VOLNOČASOVÝCH A VZDĚLÁVACÍCH PROGRAMŮ OUTDOOR ACTIVITY MANAGER DIPLOMOVÁ PRÁCE MASTER‘S THESIS AUTOR PRÁCE BC. MIROSLAV TŘÍSKA AUTHOR VEDOUCÍ PRÁCE ING. VÍTĚZSLAV BERAN, Ph.D. SUPERVISOR BRNO 2011 Abstrakt Cílem této diplomové práce je navrhnout dynamické uţivatelské rozhraní pro nástroj zabývající se správou volnočasových a vzdělávacích aktivit jako webovou aplikaci s důrazem na frekventované úkony tvorby denních programů. Bude umoţněno sofistikované vyhledávání aktivit, ze kterých lze vytvořit denní program nebo na základě zadaných parametrů provést automatický návrh programu. Vyuţity k tomu budou dostupné moderní webové technologie. Záměrem tohoto projektu je tyto technologie nastudovat a realizovat jimi efektivní uţivatelské rozhraní reflektující potřeby cílové skupiny uţivatelů. Abstract The aim of this master‘s thesis is to propose a dynamic user interface for a tool engaged in administration of leisure time and educational activities as a web application with an emphasis on frequented operations of daily programmes creation. This will be provided with a sophisticated searching of activities from which you can make a daily programme or on which basis of designated parameters can be achieved an automatical proposition of the programme. I intend to use accessible web technologies to make this real. The purpose of the project is study all these technologies and give shape to an effective user interface respecting needs of the target group of users. Klíčová slova PHP, JavaScript, jQuery, Nette Framework, Ajax, CSS, HTML, dibi, MySQL, uţivatelské rozhraní, webová aplikace, GUI, HCI, interakce člověk-počítač. Keywords PHP, JavaScript, jQuery, Nette Framework, Ajax, CSS, HTML, dibi, MySQL, user interface, web application, GUI, HCI, human-computer interaction. Citace Miroslav Tříska: Systém pro správu volnočasových a vzdělávacích programů, diplomová práce, Brno, FIT VUT v Brně, 2011 4 Systém pro správu volnočasových a vzdělávacích programů Prohlášení Prohlašuji, ţe jsem tuto diplomovou práci vypracoval samostatně pod vedením Ing. Vítězslava Berana, Ph.D. Další informace mi poskytli Marcel Kurka a Ondřej Novák ze společnosti ViaAurea. Uvedl jsem všechny literární prameny a publikace, ze kterých jsem čerpal. …………………… Bc. Miroslav Tříska 25.5.2011 Poděkování Na tomto místě bych rád poděkoval svému vedoucímu diplomové práce, panu Ing. Vítězslavu Beranovi Ph.D., za odborné vedení a cenné rady, které mi během vypracování celé práce poskytoval. © Miroslav Tříska, 2011 Tato práce vznikla jako školní dílo na Vysokém učení technickém v Brně, Fakultě informačních technologií. Práce je chráněna autorským zákonem a její užití bez udělení oprávnění autorem je nezákonné, s výjimkou zákonem definovaných případů. 5 Obsah 1 Úvod ............................................................................................................................................... 3 2 Shrnutí současného stavu ............................................................................................................... 5 2.1 Přehled sluţeb zabývajících se správou her ............................................................................ 5 2.2 Web technologie pro uţivatelská rozhraní .............................................................................. 8 2.3 Ukázky pokročilého rozhraní................................................................................................ 11 2.4 Human-computer interaction ................................................................................................ 13 2.5 Graphical user interface ........................................................................................................ 17 3 Přehled technologií realizace ....................................................................................................... 23 3.1 Základní elementy potřebné pro vývoj ................................................................................. 23 3.2 Javascriptová knihovna jQuery ............................................................................................. 24 3.3 AJAX .................................................................................................................................... 25 3.4 Nette Framework pro PHP .................................................................................................... 26 3.5 Databázová vrstva dibi ......................................................................................................... 29 4 Analýza a návrh řešení ................................................................................................................. 30 4.1 Analýza poţadavků a návrh IS ............................................................................................. 30 4.2 Rozbor vyvíjeného modulu tréninku .................................................................................... 32 4.3 Zobrazení informací .............................................................................................................. 34 4.4 Program dne .......................................................................................................................... 37 4.5 Vyhledávací filtr ................................................................................................................... 39 4.6 Whiteboard ........................................................................................................................... 43 4.7 Finální úpravy návrhu komponent ........................................................................................ 44 5 Realizace ...................................................................................................................................... 50 5.1 Rozvrţení projektu ................................................................................................................ 50 5.2 Důleţité Nette pojmy ............................................................................................................ 52 5.3 Popis realizace klíčových částí ............................................................................................. 56 5.4 Databáze ............................................................................................................................... 63 6 Testování a ladění aplikace .......................................................................................................... 67 6.1 Testování a ladění při implementaci ..................................................................................... 67 6.2 Uţivatelské testování ............................................................................................................ 68 6.3 Návrh uţivatelských testů ..................................................................................................... 69 6.4 Způsob a průběh testování .................................................................................................... 74 7 Návrh moţných vylepšení ............................................................................................................ 76 7.1 Sdílené uţivatelské prostředí ................................................................................................ 76 7.2 Chat – komentáře .................................................................................................................. 76 7.3 Mapy vztahující se k lokalitám tréninků ............................................................................... 77 1 8 Závěr ............................................................................................................................................ 78 Literatura .............................................................................................................................................. 79 Příloha 1. Use case diagramy ................................................................................................................ 85 Příloha 2. Původní ER diagram ............................................................................................................ 90 Příloha 3. Konečný ER diagram ........................................................................................................... 91 Příloha 4. Vzhled vytvořené aplikace ................................................................................................... 92 Příloha 5. Uţivatelský manuál .............................................................................................................. 94 Příloha 6. SQL dotaz vyhledávání aktivit ........................................................................................... 107 Příloha 7. CD s aplikací ...................................................................................................................... 109 2 1 Úvod Cílem této práce je vytvořit efektivní dynamické uţivatelské rozhraní pro nástroj zabývající se správou volnočasových a vzdělávacích aktivit jako webovou aplikaci reflektující frekventované úkony