MASARYKOVA UNIVERZITA F}w¡¢£¤¥¦§¨ AKULTA INFORMATIKY !"#$%&'()+,-./012345<yA| Uživatelské rozhraní webových IS DIPLOMOVÁ PRÁCE Tomáš Obšívaˇc Brno, jaro 2009 Prohlášení Prohlašuji, že tato diplomová práce je mým p ˚uvodnímautorským dílem, které jsem vypra- coval samostatnˇe.Všechny zdroje, prameny a literaturu, které jsem pˇrivypracování použí- val nebo z nich ˇcerpal,v práci ˇrádnˇecituji s uvedením úplného odkazu na pˇríslušnýzdroj. Vedoucí práce: doc. Ing. Michal Brandejs, CSc. ii Shrnutí Práce popisuje rozvoj WWW s ohledem na jeho využití pro uživatelské rozhraní informaˇc- ních systém ˚u,pˇredstavujespecifika a r ˚uznéúrovnˇenávrhu webového rozhraní podle míry jejich abstrakce s pˇríkladyrealizovanými pro Informaˇcnísystém MU (IS MU), srovnává sou- ˇcasnérámce jazyka JavaScript sloužící k manipulaci s HTML stránkou a od ˚uvodˇnujevolbu jednoho z nich pro IS MU, popisuje vybrané prvky designu znovupoužitelné ve webových aplikacích, krátce ukazuje další zp ˚usobyzpˇrístupnˇenídat uživatel ˚uma v poslední ˇcástise vˇenujeznaˇcceIS MU (pˇrílohouje jí vˇenovanýgrafický manuál). iii Klíˇcováslova uživatelské rozhraní, design, JavaScript, framework, informaˇcnísystémy, web, znaˇcka iv Obsah 1 Úvod ............................................. 2 1.1 Zadání ......................................... 2 1.2 O této práci ....................................... 2 2 Webové stránky jako uživatelské rozhraní ....................... 3 2.1 Hypertext a WWW .................................. 3 2.2 Souˇcasnýstav webu ................................. 6 2.2.1 Web 2.0 a sémantický web . 6 2.3 Od statického webu k WIS .............................. 7 2.4 Design rozhraní (vs. další rysy systému) ...................... 8 2.5 Grafické zpracování („povrch“) ........................... 10 2.5.1 Ikony pro aplikaˇcnískupiny IS MU . 11 2.5.2 Uživatelská volba designu . 12 2.6 Rozvržení stránek IS MU („kostra“) ........................ 13 2.6.1 Oblíbené záložky, jazyk a odhlášení [1] . 14 2.6.2 Hlaviˇckaa info k uživateli [2–4] . 15 2.6.3 Volba cizí identity / rozsahu IS pro absolventy [5] . 15 2.6.4 Hlavní navigaˇcnímenu [6] . 16 2.6.5 Aplikace [7] . 16 2.6.6 Patiˇcka[8 a 9] . 17 2.6.7 Postranní panel [10] . 17 2.7 Seskupování aplikací („struktura“) ......................... 18 2.8 Složitost vs. komplexnost systému („rozsah“) ................... 18 2.9 Nejvyšší úroveˇnnávrhu („strategie“) ........................ 19 2.10 Skryté funkce rozhraní a nestandardní situace .................. 19 2.10.1 Klávesové zkratky . 19 2.10.2 Chybové stránky . 20 2.10.3 Styl pro tisk . 21 3 JavaScriptové frameworky ................................ 22 3.1 Požadavky pro nasazení do IS MU ......................... 22 3.1.1 Progressive enhancement . 23 3.2 Pˇrehledframework ˚u ................................. 24 3.2.1 Prototype . 24 3.2.2 script.aculo.us . 24 3.2.3 Yahoo! UI Library (YUI) . 24 3.2.4 MooTools . 25 3.2.5 The Dojo Toolkit . 25 3.2.6 Adobe Spry . 26 3.2.7 jQuery . 26 3.2.8 Další rámce . 27 3.3 Framework pro IS MU – jQuery ........................... 27 v 3.4 Podrobnˇejšípopis práce s jQuery .......................... 27 4 Návrhové vzory ....................................... 29 4.1 Stránkování (navigace ve velkém poˇctupoložek) ................. 30 4.2 Ouška (pˇrepínáníalternativních informací) .................... 30 4.3 Tooltipy (poutavˇejšínápovˇednípopisky) ..................... 30 4.4 Dohledávání identifikátor ˚u(modal window) ................... 31 4.5 Mrak štítk ˚u(uživatelská kategorizace) ....................... 32 4.6 Informaˇcnía chybová hlášení ............................ 33 4.7 Tabulky pro datové výstupy ............................. 34 4.8 Navigace v rámci aplikace .............................. 34 4.9 Pr ˚uvodce(atraktivní pˇredstaveníaplikace) .................... 35 5 Pˇrístupk dat ˚um,sdílení obsahu ............................. 36 5.1 RSS ........................................... 36 5.2 Mikroformáty ..................................... 36 5.2.1 hCard – vizitky . 37 5.2.2 hResume – životopisy . 37 5.2.3 hCalendar – události . 37 5.3 Vylepšení prohlížeˇc˚u ................................. 37 5.4 Second Life ....................................... 38 6 ZnaˇckaInformaˇcníhosystému MU ........................... 39 6.1 Kodifikace znaˇckya dokumentace stylu IS MU .................. 40 6.2 Znaˇckave favikonˇe .................................. 41 6.3 Použití znaˇcky ..................................... 41 7 Závˇer ............................................. 42 7.1 Zlepšování uživatelského zážitku .......................... 42 7.2 Dopad jQuery na provoz a vývoj IS MU ...................... 42 7.3 Další možný vývoj .................................. 43 Literatura . 45 Rejstˇrík . 46 vi Pˇredmluva The charm of history and its enigmatic lesson consist in the fact that, from age to age, nothing changes and yet everything is completely different. — Aldous Huxley Bˇehemprázdnin, které jsem mˇelpo stˇredníškole pˇrednástupem na Fakultu informatiky MU, jsme s kamarádem, který zde již rok studoval, tvoˇrilive volném ˇcasenáš druhý „vˇetší“ web. Pˇrežilkupodivu dodnes, což bohužel nem ˚užunapsat o uživatelském designu Infor- maˇcníhosystému MU ˇcíslo6753 pojmenovaném Design Tux, který jsem s energií ˇcerstvˇe pˇrijatéhostudenta to léto také pˇripravil. Na fakultním webu byly poté vystaveny mé osobní stránky, kde jsem kromˇeradosti z 325 lidí používajících Design Tux napsal i toto: ... se ještˇeobuju do bakaláˇrsképráce Pavla Vaidy Designy Osobní administra- tivy is.muni.cz. Jediné, co mohlo být na jeho práci tˇežké,byl asi jeho vedoucí. Ale aspoˇnse ted’ nebojím, že bych nemohl bakaláˇrkuudˇelatpro nedostatek dovedností :) Design IS MU dˇelámtˇretímrokem profesionálnˇe,používá jej 100krát více lidí, bakaláˇrku jsem si odložil pro jiný nedostatek, vedoucí mé diplomové práce je ten stejný, jakého mˇel bakaláˇrPavel Vaida a téma s velkou nadsázkou z ˚ustalotaké stejné. Nic se nezmˇenilo,jen je vše úplnˇejinak! Dˇekujiweb.archive.org za oživení vzpomínek, Kájovi za první mé (k)roky na webu, dr. Dvoˇrákoviza prodloužení mládí a doc. Brandejsovi za zp ˚usob,kterým vede Vývojový tým IS MU, jehož souˇcástímám tu ˇcestbýt. S velkou úctou ke všem zmínˇeným — Tomáš Obšívaˇc 1 Kapitola 1 Úvod 1.1 Zadání Student porovná existující JavaScriptové frameworky pro manipulaci s prezentaˇcnívrstvou webových aplikací (napˇr.Yahoo! User Interface Library, The Dojo Toolkit, MooTools, Proto- type), jejich podporu pro AJAX. Zmapuje souˇcasnéovládací prvky používané v aplikacích IS MU a navrhne jejich rozší- ˇrení(sjednocení). Tj. pˇripravínávrhové vzory typických prvk ˚upro aplikaˇcníprogramátory kombinující grafické prvky, HTML, CSS a JS (bude-li to vhodné, tak s pomocí vybrané JS knihovny) s ohledem na jejich použitelnost a pˇrístupnost. Souˇcasnˇese bude podílet na zpˇrehlednˇeníUI a nových zp ˚usobechpˇrístupuk údaj ˚um z IS, napˇr.využitím format ˚uRSS, iCalendar nebo plugin ˚upro internetové prohlížeˇce.Zváží pˇrizp˚usobenívybrané aplikace pro použití v mobilních zaˇrízeních.Student bude postupo- vat podle pokyn ˚uvedoucího práce. 1.2 O této práci První struˇcnoukapitolou je „Úvod“ se zadáním práce a tímto popisem kapitol. Druhá kapitola „Webové stránky jako uživatelské rozhraní“ pojednává o r ˚uznýchúrov- ních designu a popisuje je v kontextu práce, kterou jsem odvedl pˇrinávrhu a vývoji Infor- maˇcníhosystému Masarykovy univerzity. Obsahem tˇretíkapitoly „JavaScriptové frameworky“ je pˇredstaveníaplikaˇcníchrámc ˚u vhodných pro manipulaci s HTML stránkou a m ˚ujvýbˇerjednoho z nich pro potˇrebyIS MU. Ctvrtᡠkapitola „Návrhové vzory“ popisuje realizované i pˇripravovanéprvky rozhraní webových aplikací IS MU. Krátká pátá kapitola „Pˇrístupk dat ˚um,sdílení obsahu“ se od rozhraní ˇcistˇeuživatel- ského odklání k alternativním zp ˚usob˚umvyužívání a sledování dat a ke komunikaci se systémem prostˇredkyjinými, než je tradiˇcníwebový prohlížeˇc. Kapitola 6 „ZnaˇckaInformaˇcníhosystému MU“ pˇredstavujegrafický manuál kodifiku- jící konstrukci a použití znaˇckyIS MU, kterou jsem navrhl. Sedmou kapitolou je „Závˇer“, ve kterém struˇcnˇehodnotím výsledky dosažené bˇehem ˇrešenítéto práce a také naznaˇcuji,jakým smˇerem mohou být dále rozšíˇreny. 2 Kapitola 2 Webové stránky jako uživatelské rozhraní Design is not just what it looks like and feels like. Design is how it works. — Steve Jobs 2.1 Hypertext a WWW Od prvních dn ˚u,kdy byl World Wide Web navrhnut a využíván k prezentaci propojených informací, uplynulo již 20 let1. Od té doby zažil web, jak nyní tuto sít’ovou službu nad pro- tokolem HTTP zkrácenˇenazýváme, ohromující rozmach. Používá jej pˇribližnˇe1,5 miliardy lidí2 (ˇctvrtinasvˇetovépopulace), v Ceskéˇ republice zhruba 5 milion ˚uobyvatel (polovina populace) a poˇctyneustále rostou. Základní ukazatele CRˇ Únor 08 Únor 09 Meziroˇcnínár ˚ust Uživatel ˚u 4 606 530 4 933 045 326 515 7,1 % Zobrazených stránek 5 741 831 099 7 164 380 230 1 422 549 131 24,8 % Pr ˚um.strávený ˇcas 25.30:13 29.59:21 4.29:08 17,6 % Návštˇevy 650 322 555 815 859 464 165 536 909 25,5 % Tabulka 2.1: Meziroˇcnísrovnání statistik, zdroj: Netmonitor.cz Domnívám se, že web ovlivnil zp ˚usobfungování dnešní spoleˇcnostiv míˇrevˇetší,než jiné komunikaˇcnítechnologie (napˇr.mobilní telefony). Pro vˇetšinupopulace se stal synonymem Internetu, a co do známosti snese srovnání jen s e-mailem, ostatní sít’ové služby jsou ˇrádovˇe ménˇepoužívané. Než se web prosadil, zuˇrilyválky webových prohlížeˇc˚u[1] a událo se nˇekolikvýznamných milník ˚u: • V roce 1993 CERN prohlásil programové vybavení implementující WWW