Uživatelské Rozhraní Webových IS

MASARYKOVA UNIVERZITA F}w¡¢£¤¥¦§¨ AKULTA INFORMATIKY !"#$%&'()+,-./012345

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ˇredstavujespeciﬁka 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ýgraﬁcký 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 Graﬁcké 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í identiﬁká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 Kodiﬁkace 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í administrativy 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í graﬁcké 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ˇredstavujegraﬁcký manuál kodiﬁku- 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 (ˇrádkový prohlížeˇc,server a knihovnu spoleˇcnéhokódu) za volnˇeužitelný (public domain) software, bez nároku na další ochranu a vˇenovaltak web veˇrejnosti.

1. Tim Berners-Lee spustil první svˇetovýserver info.cern.ch koncem roku 1990 na poˇcítaˇciNeXT. Oﬁciální oslava 20. výroˇcíse v domovˇewebu, Evropské organizaci pro jaderný výzkum CERN, konala 13. bˇrezna2009. 2. Zdroj: www.internetworldstats.com

3 2.1. HYPERTEXT A WWW

• Od stejného roku byl vyvíjen první graﬁcký webový prohlížeˇcpoužívaný bˇežnými uživateli NCSA Mosaic. Ve verzi 2.0 zobrazoval obrázky ve stránce a pˇredstavil HTML formuláˇre. • V roce 1994 bylo založeno World Wide Web Consortium (W3C), hlavní standardi- zaˇcníorganizace webových technologií3. • Prohlížeˇc Netscape uvedený roku 1994 zavedl velkou ˇcástdodnes používaných HTML element ˚u(napˇr.tabulky) a také JavaScript. Uvolnˇeníkódu v roce 1998 nastartovalo vývoj nˇekolikadnešních prohlížeˇc˚u,zejména Firefoxu. • Od roku 1995 je vyvíjen dlouhodobˇenejpoužívanˇejšíprohlížeˇc Microsoft Internet Ex- plorer. V roce 1996 byl prvním prohlížeˇcemimplementujícím kaskádové styly (Cas- cading Style Sheets, CSS), v roce 1997 objektový model dokumentu (Document Ob- ject Model, DOM) a už v roce 1999 XMLHttpRequest. • Nástrojem ˇcíslojedna pro vývoj webových aplikací se stal skriptovací jazyk PHP: Hypertext Preprocessor uvedený v roce 19954. Dle údaj ˚uz jeho domovské stránky je s jeho pomocí provozováno pˇres20 mil. domén (což je asi každá pátá). Jsou v nˇem napsány velmi populární weby jako Facebook, Yahoo! ˇci Wikipedia a mnoho volných aplikací pro správu obsahu (Content Management Systems), jako blogy, diskusní fóra nebo wiki. PHP ale zdaleka není prvním jazykem webových aplikací. Od roku 1993 existuje standard CGI (Common Gateway Interface), který popisuje rozhraní mezi webserverem a aplikací (programem) v libovolném jazyce. Pozdˇejise rozšíˇrilyefektivnˇejšízp ˚u- soby integrace program ˚u(skript ˚u)pˇrímodo webserveru, jako modul mod_perl pro Apache nebo „servletové kontejnery“ pro aplikace napsané v jazyce Java. Pˇribližnˇeod roku 2004 pak pozorujeme nástup webových aplikaˇcníchrámc ˚u(web frameworks), jakým je napˇr. Ruby on Rails, které stojí za dalším zrychlením vývo- jového procesu webových aplikací a za vzr ˚ustajícíefektivitou a kvalitou kódu. Spo- leˇcnˇes rámci se prosazují i agilní metody vývoje, návrhové vzory a další moderní programovací techniky. • V roce 1998 byla založena spoleˇcnost Google, dva roky od zaˇcátkuvýzkumu L. Page a S. Brina, kteˇrína Stanfordské univerzitˇevybudovali celosvˇetovývyhledávaˇcs ˇraze- ním výsledk ˚udle relevance odvozené z citaˇcníanalýzy. Dnes má Google pˇres20 tis. zamˇestnanc˚u,je nejoceˇnovanˇejšísvˇetovouznaˇckoua má vedoucí postavení na webu, kde se snaží naplˇnovatﬁremní motto „organizovat informace svˇetaa univerzálnˇeje zpˇrístupnitužiteˇcnýmzp ˚usobem“.

3. http://www.w3.org/ Prvním vydaným doporuˇcenímse stal návrh formátu PNG v roce 1996. Mezi další významné patˇríCSS, Web Accessibility Initiative, HTML 4, XML, SVG, XML Schema, Web Services Activity, RDF a OWL nebo VoiceXML 2.0. 4. Žebˇríˇcek popularity TIOBE Programming Community Index www.tiobe.com/content/paperinfo/tpci/ uvádí, že je nejoblíbenˇejšímskriptovacím jazykem a celkovˇejsou pˇredním jen jazyky Java a C.

4 2.1. HYPERTEXT A WWW

• Rozšíˇrenímobilních telefon ˚unásledovalo zavedení obdoby webu, kterou by na jejich omezeném hardware bylo možné používat – WAP (Wireless Application Protocol) a WML (Wireless Markup Language). Dnešní „chytré telefony“ se stále rychlejším pˇripojenímk Internetu, displeji srovnatelnými s dˇrívˇejšímistolními zobrazovacímí zaˇrízenímia mobilními verzemi dospˇelýchwebových prohlížeˇc˚u,pˇredevším Operou Mini, ale tyto technologie vytlaˇcují.

• Fenomén otevˇrenéhozdrojového kódu byl znám pˇrednástupem webu (a jistˇepod- poroval už rozvoj Internetu), ale až v roce 1998 vznikla Open Source Initiative5 a s ní shoda na samotném termínu „open source“. Významné je, že velké množství otevˇre- ných program ˚upohání web. Za všechny jmenujme operaˇcnísystémy s jádrem Linux, nejrozšíˇrenˇejšíwebserver Apache, servlet kontejner Jakarta Tomcat, databázové servery (MySQL, Firebird, Post- greSQL), skriptovací jazyky (PHP, Perl, Python ˇci Ruby), aplikaˇcníservery jako Zope, publikaˇcnísystémy jako Wordpress ˇci Drupal a koneˇcnˇei prohlížeˇce,pˇredevším Fi- refox, ale také další, založené napˇr.na vykreslovacím jádˇre WebKit.

• Asi do roku 1996 se pˇrítomnostna webu stala pro komerˇcníspoleˇcnostinepostrada- telná a nastoupila éra elektronického obchodování (e-commerce), zejména s využi- tím webu. Masivní investice do spoleˇcnostípodnikajících na webu z konce minulého tisíciletí vyústily až v prasknutí internetové bubliny (dot-com bubble) zaˇcátkemroku 20016.

Mnoho desetiletí starou myšlenkou pˇredcházejícíwebu je idea hypertexu7. Pˇredstavuje systém propojující dokumenty odkazy, které ˇctenáˇrm ˚užeihned následovat, a zobrazovat si tak informace v souvislostech. Tento zp ˚usobprovázání dat je ˇclovˇekupˇrirozený pro jeho asociativní zp ˚usobmyšlení. V podobˇeWWW se hypertext doˇckalsvé celosvˇetovˇepˇrijatéim- plementace, pˇrístupnédíky pˇredchozímuvzniku a rozvoji Internetu, když pˇrekonalslužby jako Gopher a HyperCard. Celosvˇetovápavuˇcinadnes obsahuje odhadem z index ˚uvyhle- dávaˇc˚uvíce než 100 milion ˚uweb ˚ua 25 miliard stránek, což je jen pˇrístupnývršek ledovce, nˇekolikaˇrádovˇevˇetšíje hluboký web8 (deep web).

5. http://www.opensource.org/ 6. Napˇríkladakcie Yahoo! se propadly z historického maxima $200 jen na $12. Celkovˇese korekce trh ˚uodha- duje v jednotkách bilion ˚udolar ˚u. 7. Za první koncept je považován systém Memex uvažovaný již v roce 1945, tehdy založený na technologii mi- kroﬁlmu. Od tˇechdob ale bylo doplnˇenomnoho klíˇcovýchvlastností, jakými jsou metadata, vyhledávání nebo globální dostupnost. Za zmínku stojí také krátká vˇedecko-fantastickápovídka M. Leinstera „A Logic Named Joe“ z roku 1946, ve které je vybavena každá domácnost poˇcítaˇcovýmterminálem, který v principu odpovídá zaˇrízení(agentu) s pˇrístupemna (semantický) web. Povídka je dostupná online nebo ˇceskyve sbírce [16]. 8. Jako pˇríkladdat, která vyhledávaˇcezatím nezvládají zpˇrístupnit,mohou posloužit osobní stránky v IS MU (https://is.muni.cz/lide/). V systému je vedle aktivních osob zavedeno na 120 tisíc absolvent ˚u,z nichž každý má osobní stránku uvádˇejícíjeho úspˇešnˇeukonˇcenástudia (ˇceskoua anglickou). Z výsledk ˚uvyhledávání na Google.com i Seznam.cz, které jsou u nás nejpoužívanˇejšímivyhledávaˇci,jsou dostupné jen stovky z nich.

5 2.2. SOUCASNÝˇ STAV WEBU

2.2 Souˇcasnýstav webu

Webový prohlížeˇcse stal pro vˇetšinuaplikací, vˇcetnˇeInformaˇcníhosystému MU, tenkým klientem (thin client), tj. prostˇredkempro zobrazení uživatelského rozhraní (user interface, UI) nad daty pˇripravenýmiserverem. To ale znamená ˇraduomezení plynoucích ze závislosti na kontektivitˇea zátˇežiserveru, napˇr.vyšší dobu odezvy. Aplikaˇcnílogika se proto ˇcásteˇcnˇe pˇresouvás využitím JavaScriptu na klientský poˇcítaˇc.V menší míˇreexistují aplikace, které fungují i pˇriodpojení od Internetu (viz napˇr. Google Gears, single page application apod.). Konkurence na poli webových prohlížeˇc˚uje stále veliká, díky ˇcemužžádná z dnes ak- tuálních verzí funkˇcnˇenezaostává nebo existuje zp ˚usob,jak omezení obejít, a jejich vývo- jáˇripracují na podpoˇrea návrhu nových standard ˚u.Ovládání prohlížeˇc˚uje v základních navigaˇcníchfunkcích jednoduché a stalo se srovnatelné (napˇr.všechny pˇrijalyprohlížení v záložkách9). V dohledné dobˇestˇežíuvidíme ve vývoji webu pˇrevrat.Potˇrebnáje nyní pˇredevším standardizace reﬂektující pomˇernˇeživelný vývoj, kterou se zdá být pˇripravovanýstandard HTML 5 [4] (vˇetevXML technologií se v praxi prosazuje obtížnˇe,složitˇejšímpravidl ˚umse weboví vývojáˇrinechtˇejípodˇrizovat).

2.2.1 Web 2.0 a sémantický web Web 2.0 is the business revolution in the computer industry caused by the move to the Internet as a platform, and an attempt to understand the rules for success on that new platform. — Tim O’Reilly Moderní trendy na webu jsou ˇcastooznaˇcoványtermínem Web 2.0, který poprvé za- znˇelna pˇrelomulet 2003/2004 a odbornou veˇrejnostíbyl pˇrijatdlouho poté. Neoznaˇcuje zmˇenytechnologické, jak by se zdálo z „ˇcíslaverze“ 2.0, ale zohledˇnujespíše (1) spoleˇcen- ské aspekty (zapojení uživatel ˚u)a (2) modernˇejšímetody návrhu software. 1. Uživatel ˚umje svˇeˇrenobudování vlastního obsahu (napˇr.fotogalerie, blogy) a správa komunitního obsahu, jeho ˇrazení,kategorizace10 i tvorba (napˇr. Wikipedie). Lidé se propojují a setkávají – využívají tzv. social network services, jejichž nejviditelnˇejším zástupcem v CRˇ se stal Facebook, v IS MU uvádíme v život Absolventskou sít’ MU. Aktuálním spoleˇcenskýmtrendem je mikroblogování, tj. sdˇelovánía sledování krát- kých myšlenek a popis událostí ze života propojených lidí. 2. Prosazují se bohatá uživatelská rozhraní a aplikace (Rich UI, Rich Internet Appli- cation), realizovaná napˇr.s pomocí platformy Adobe Flash (resp. novˇe Flex), ale také

9. Originálnˇebylo „tabbed browsing“ uvedeno prohlížeˇcem NetCaptor již v roce 1998. Do souˇcasnýchprohlí- žeˇc˚use prosadilo postupnˇe– Opera v roce 2000, Mozilla App Suite v 2001 a IE od verze 7 v 2006. Z pohledu webu jako aplikaˇcníplatformy se nejedná o nic jiného, než o znovuobjevení panelu spuštˇenýchaplikací, tj. nástroje pro jejich pˇrehlednézobrazení (vˇcetnˇeikony) a pˇrepínání. 10. Viz také kapitola 4.5 Mrak štítk ˚u(uživatelská kategorizace)

6 2.3. OD STATICKÉHO WEBU K WIS

s pomocí neopomenutelného Ajaxu (p ˚uvodnˇez Asynchronous JavaScript and XML). Oznaˇceníse vžilo pro pojmenování techniky, pˇrikteré nedochází pˇrikomunikaci se serverem ke klasickému naˇcítánícelých stránek, ale skript na stránce využívá XML- HttpRequest objekt pro naˇcítáníjen nezbytných dat, ze kterých je obsah upraven. (Odhalení a masové využívání této schopnosti prohlížeˇc˚utrvalo asi pˇetlet.) Jsou zavádˇenarozhraní pro pˇrístupk dat ˚uma aplikacím (API), která dovolují kom- binovat je a vytváˇrettak nové hybridní aplikace (mashups). Web se také stává ad- resnˇejším(viz location aware, geoweb). Aktuálním pˇríklademmohou být mapové vrstvy zobrazující místa/zprávy o výskytu nové (praseˇcí)chˇripky, kterých vzniklo mˇesícpˇredodevzdáním této práce hned nˇekolik.

Za kvalitativnˇepokroˇciléhonásledovníka webu je považován sémantický web (semantic web), navrhovaný od roku 2001, na kterém pracuje i Tim Berners-Lee pod hlaviˇckouW3C. Nejedná se o jiný web, ale o rozšíˇrenístávajícího, na kterém informace dostanou dobˇrede- ﬁnovaný význam, což umožní stroj ˚uma lidem lépe spolupracovat. Dle mého názoru, po- dobnˇejako cesta k umˇeléinteligenci, pˇrinášívýzkum semantického webu cenné technologie, ale ucelené ˇrešenízatím není v dohledu11.

2.3 Od statického webu k WIS

Forma prvních „ruˇcnˇepsaných“ HTML stránek, které sloužily jako dokumentace a nástroj spolupráce vˇedc˚u,je diametrálnˇeodlišná od dnešní. Kolekce navzájem propojených dokument ˚use statickým obsahem nahradily na celosvˇetovésíti údaje zpˇrístupnˇenéz databází (ˇcásteˇcnˇeskryté za formuláˇrovýmipolíˇcky).Webové stránky jsou dynamicky generovány dle potˇrebuživatel ˚u,kteˇrítak mají pˇrístupk rozsáhlým kolekcím dat, která jsou pravým obsahem a HTML stránka pak šablonou pro jejich prezentaci. Kromˇezobrazení dat je jistˇepotˇrebnáa užiteˇcnátaké jejich editace a vytváˇrení12. Vedle FTP pro pˇrenossoubor ˚use brzy objevily zp ˚usoby, jak vzdálenˇevytváˇreta spravovat obsah webu, tj. nejr ˚uznˇejšíinformace, které bylo potˇreba„obhospodaˇrovat“.Z dnešního pohledu došlo pˇrirozenˇek použití webu jako platformy pro informaˇcnísystém (Web Information System, WIS). O historii se m ˚užemedoˇcístnapˇr.ve zvláštní sekci vˇenovanéWIS v Com- munications of the ACM z ˇcervence199813. Nám bližší je pak historie IS MU, který je letos

11. Jako stabilní vnímám metadatový model RDF, ve kterém dokážeme reprezentovat znalosti v jazyce OWL, ale ontologie umíme budovat jen ruˇcnˇea máme problém spravovat je (napˇr.sdílet), což je nerealistické ve vˇetšímrozsahu, už vzhledem ke stále se mˇenícímusvˇetu.Cesta možná povede pˇresvyužívání malých ontologií dohromady (což se dˇejei prakticky, viz napˇr. mikroformáty). Metadata ˇcastoexistují, ale zatím nejsou na web publikována. Snad toto zmˇenísít’ový efekt, tj. strhnutí laviny zájmu, jakmile budou bˇežnénástroje využívající je. Dotazovací jazyk SPARQL se snaží ˇrešitpotˇrebnouintegraci dat. Vývoj ˇcekáoblast (správy) pravidel pro odvozování deskripˇcnílogikou a fuzzy pˇrístupk ní (pro relevant- nˇejšíˇrazenívýsledk ˚u)nebo oblast bezpeˇcnosti. 12. První Berners-Leeho prohlížeˇc WorldWideWeb (pozdˇejipojmenovaný Nexus) byl zároveˇneditorem, ale pouze lokálních soubor ˚u(HTTP metoda PUT ještˇeneexistovala). [11] 13. http://cacm.acm.org/magazines/1998/7

7 2.4. DESIGN ROZHRANÍ (VS. DALŠÍ RYSY SYSTÉMU) v provozu právˇe10 let. Výhody WIS oproti dˇrívˇejšímpodobám IS, zejména realizovaným jednou aplikací, ale také sít’ovým, které vyžadovaly zvláštní klientské programy, jsou zˇrejmé:

• webový prohlížeˇcje dostupný na každé platformˇe,stal se souˇcástídistribucí OS, od- padá nejen instalace, ale také upgrade klientského programového vybavení,

• tvorba rozhraní je relativnˇesnadná, díky jednoduchosti HTML a toleranci prohlížeˇc˚u k validitˇewebových stránek14,

• pˇrechodod prodeje programových balík ˚uk poplatk ˚umza provozování služeb, pra- videlným a ˇcastoodvozeným od skuteˇcnéhovyužívání (cloud computing),

• nižší náklady na vývoj systému (napˇr.pˇriˇrešenís otevˇrenýmzdrojovým kódem) a centrální infrastrukturu (škálovanou dle potˇreby),

• podpora agilních metod vývoje, krátký vývojový cyklus s rychlým zveˇrejˇnováním aktualizací (dovolí-li to charakter systému, pak až na úroveˇntzv. perpetual beta).

K webu se pˇriklonila i zvuˇcnájména, jako Oracle: „Our next generation of Web software has evolved from a Java implementation to a true thin-client model based on HTML, often hosted on the Internet, with Oracle acting as the application service provider (ASP).“ [17] Multiplatformní programy v Jave nahradila spoleˇcnostnejdˇríveve svých intranetových IS a poté je na základˇevlastní pozitivní zkušenosti zaˇclanabízet v rámci svých ˇrešenízákazní- k ˚um.Pˇritomsi inženýˇrimuseli uvˇedomit,jaká má webové prostˇredíspeciﬁka, napˇr.tradiˇcní pohled na web jako na informaˇcnízdroj, ne jako na nástroj k ˇrešeníúkol ˚u.Pˇrišlitaké na to, jak pozitivní vliv má zaˇclenˇeníspecialist ˚una návrh rozhraní a použitelnost v ranných fázích návrhu software, napˇr.už pˇrivyhodnocování požadavk ˚uuživatel ˚u.

2.4 Design rozhraní (vs. další rysy systému)

I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving. — Jeffrey Veen

Existuje více pˇrístup˚uk designu. Pˇriklánímse ke školám, které za zámˇernávrháˇrepro- duktu považují zvyšování kvality zážitku jeho uživatele (user experience design). Návrháˇr dle D. Normana sleduje „aspects of the user’s interaction with the product: how it is per- ceived, learned, and used“. [14] Podobnˇeje deﬁnována použitelnost (usability), která se zamˇeˇrujena odstraˇnovánípˇrekážeka zlepšování zp ˚usobu,jakým produkt uživatel ovládá.

14. Snadnost HTML a benevolentnost prohlížeˇc˚upˇrijeho zpracování ale svádí k podcenˇeníjeho znalosti a následnˇechybám, které ze špatného kódu plynou. Problémem m ˚užebýt i absence standard ˚unávrhu UI.

8 2.4. DESIGN ROZHRANÍ (VS. DALŠÍ RYSY SYSTÉMU)

Obrázek 2.1: Použitelnost dle J. Nielsena [12]

Z obrázku 2.1 je zˇrejmé,s kolika dalšími oblastmi a požadavky na návrh systému pou- žitelnost a design zamˇeˇrenýna „pohodlnost používání“ soupeˇrí.Z pohledu manažera ˇrídí- cího implementaci IS mohou pˇredpoužitelností dostat pˇrednostaspekty jako spolehlivost, funkˇcnípožadavky a kontrola náklad ˚u.Komerˇcnˇeúspˇešnéjsou ale i produkty založené na designu s ménˇefunkcemi, než nabízí – složitˇeji– jejich konkurence, napˇr.výrobky Apple. K selhání designu m ˚užedojít (a dochází) v každém z bod ˚uˇcasovéposloupnosti práce s produktem – m ˚užez ˚ustatnepovšimnut, nepochopen, m ˚užebýt nenauˇcitelnýve své složi- tosti, m ˚užeobsahovat mnoho chyb (a špatnˇereagovat na nesprávné použití), m ˚užebýt brzy zapomenut. Špatná zkušenost s ˇcímkolivz toho se kumuluje a brání celkové spokojenosti uživatele. Pˇredkonkrétní realizací vzhledu, skrze tvar, barvy, slovní popisy, interaktivitu apod. se návrháˇrizabývají abstraktnˇejšímiotázkami, úvahám nad funkcí, kterou se chystají uživateli umožnit vykonat.

Obrázek 2.2: Plány/úrovnˇedesignu na webu dle J. J. Garretta [6]

Model vrstev designu podle úrovnˇeabstrakce ukazuje souvislost myšlenek od samotné

9 2.5. GRAFICKÉ ZPRACOVÁNÍ („POVRCH“) strategie produktu až k jeho konkrétní realizaci. Aˇckolivjej J. J. Garrett navrhl pro web, je platný obecnˇeji.Úrovnˇemi pomohly rozˇclenitnásledující text do kapitol, i když v opaˇcném poˇradí,ˇcímžreﬂektuji sv ˚ujpˇrínosk návrhu IS MU z „konkrétního konce“.

Povrch (surface) Vizuální podoba, graﬁka. Kostra (skeleton) Konkretizuje strukturu (pomocí komponent), rozhraní a navigaci. Struktura (structure) Dává tvar rozsahu, koncepˇcnímodel uspoˇrádánía provázanosti. Rozsah (scope) Deﬁnuje požadavky na funkce a na obsah dané strategií. Strategie (strategy) Oˇcekáváníod produktu, potˇrebyuživatel ˚ua zámˇerytv ˚urc ˚u.

Tabulka 2.2: Struˇcnýpopis úrovní designu

Design pro web má speciﬁka, která je potˇrebapˇrinávrhu rozhraní respektovat. Násle- dující seznam je adaptován z [17] (str. 12).

• Odezvy systému jsou pomalejší a obtížnˇepˇredvídatelné.

• Neexistují standardy pro UI na webu, pouze „dobré mravy“.

• Web nemá jasné hranice, což posiluje potˇrebunavigace a udržování „sense of place“.

• Zobrazovací zaˇrízenía uživatelé mají velkou míru kontroly nad vzhledem (napˇr. možnost nastavit vlastní font) a zárovˇeˇnmohou mít velmi rozdílné parametry (od vˇekuuživatele až po zobrazovací možnosti a kvalitu pˇripojení).

• Široce pˇrístupné systémy mají mnoho nepouˇcenýchuživatel ˚u,kteˇríchtˇejípracovat stylem „rychle najít, nˇejakpoužít“. Jejich nervozita se projevuje napˇr.tím, že nehle- dají optimální ˇrešení,ale volí první zp ˚usobpráce, který se zdá být vyhovující.

2.5 Graﬁcké zpracování („povrch“)

Even if a website is highly usable and provides very useful information pre- sented in a logical arrangement, this may fail to impress a user whose ﬁrst impression of the site was negative. — Gitte Lindgaard (2006)

Bezúˇcelnágraﬁka smysl žádnému systému nedodá. Pˇrispojení s koncepcí v pozadí na ní ale velmi záleží. Ovlivˇnujeprvní dojem (prvních 50 ms, které nelze podceˇnovat[19]) a má velký vliv na úspˇešnostdlouhodobou. Jen jako zajímavost uvádím obrazovky (graﬁcké zpracování) archivu závˇereˇcnépráce tˇríz nˇekolikasouˇcasnýchinformaˇcníchsystém ˚upoužívaných vysokými školami v CRˇ (obr. 2.3). U nˇekterýchsystém ˚upˇretrvávátabulkový výpis evidovaných údaj ˚u,u jiných minima- listický design, což jistˇenelze považovat za chybu.

10 2.5. GRAFICKÉ ZPRACOVÁNÍ („POVRCH“)

Obrázek 2.3: Archiv závˇereˇcnépráce v UIS MZLU, Stag UPOL a IS MU

2.5.1 Ikony pro aplikaˇcnískupiny IS MU

Oko ˇclovˇekaje úžasný orgán a ve spolupráci s mozkem je schopné rozlišovat složité tvary a vyhledat mezi nimi to, co nás zajímá. Graﬁcké návrhy se snaží usnadˇnovatpráci základními triky, jako je napˇr.prázdné místo nebo dodržování linií. Od urˇcitéhopoˇctuobjekt ˚uale bˇežné triky selhávají. Je potˇrebasnížit poˇcetpoložek agregací podobných (tj. stejný proces, jaký používáme pˇribudování struktury webu, o které se zmíním v kapitole 2.7). Aby se uživatel lépe cítíl a vyznal ve skupinách odkaz ˚una titulní stranˇeIS a také aby se snížila námaha a frustrace z hledání, plánujeme zavést ikony pro aplikaˇcnískupiny.

Obrázek 2.4: Ikony pro aplikaˇcnískupiny IS MU

Tvorba znaˇcek,piktogramových ˇradˇcivizuálních informaˇcníchsystém ˚u(napˇr.podpo- rujících navigaci po budovˇe)je samostatnou disciplínou graﬁckého designu. Ucelenou sadu znaˇcek,které jsou solidním základem pro zavedení ikon, pˇrikládámjako souˇcásttéto práce formou pˇrílohy. Jejich jednotný styl je založen na prosté ˇcárové graﬁce, mírném retro stylu (napˇr.buˇrinka,cestovní kufr), oblých tvarech a zobrazování dvojic. Na obrázku 2.4 jsou ikony, které navrhuji pro poznámkové bloky, e-volby, vˇedu,diskusní fóra, studenty, zkoušení, mé známé, záložky, poštu, úschovnu a m ˚ujweb, kruhy a karty.

11 2.5. GRAFICKÉ ZPRACOVÁNÍ („POVRCH“)

V pˇrílozepráce jsou pak další, napˇr.pro nápovˇedu,vývˇesku,obchodní centrum, lidi (osobní stránky), seminární skupiny, hodnocení nebo rozpisy student ˚u.Pˇresnýpoˇcetbude znám až po redesignu Záznamníku uˇcitele a Osobní administrativy, o rozsahu systému ale svˇedˇcí,že bude potˇrebanejménˇe50 ikon, aby pokryly základní sekce.

2.5.2 Uživatelská volba designu

Od roku 2000 byla v IS MU zavedena podpora pro úpravy vzhledu, pˇresnˇejimožnost do- plnˇeníasi 12 vlastních ˇcástído tabulkového rozvržení stránky. Vznikly desítky veˇrejných uživatelských design ˚u,ale postupem let se ukázalo, že tento systém není udržitelný. Pro- blémy vznikly kv ˚ulineexistující aktualizaci, a také s podporou uživatel ˚u,kteˇrípovažovali chyby v designu za chyby IS. Podstatným d ˚uvodemke zmˇenámv designech se stala i potˇrebanasazení novˇejšíchtech- nologií, zejména CSS pro oddˇelenívzhledu od obsahu a tvorbu znovupoužitelných prvk ˚u. První z nových design ˚uzaložených na CSS jsem vytvoˇrilpro veˇrejnˇepˇrístupnéstránky IS koncem roku 2006. K pˇrechoduod uživatelských design ˚una systémové v ˇcástiIS vyžadující autentizaci došlo zaˇcátkemroku 2007. [5] Po témˇeˇrtˇrímˇesíˇcnímobdobí, kdy bylo možné volit jen sys- témové designy (základní vycházející z univerzitního stylu a žlutý), byly staré uživatelské designy zcela zrušeny. Spolu se zmˇenoubyl vývojovým týmem deklarován zámˇervˇenovat se vývoji pokroˇcilejších prvk ˚urozhraní, což se daˇrínapˇnovat.Za všechny mohu jmenovat Interaktivní osnovy nebo novou podobu Diskusních fór. K dnešnímu dni je možné vybrat si alternativní vzhled ze 4 variant (a také design zcela vypnout). Uživatelé další vzhled nežádají a výše popsané problémy ustaly. Ze 45 tisíc uži- vatel ˚uje bez designu asi 160 (vˇc.student ˚us hendikepem). Zároveˇns volbou barevnosti je možné zvolit umístˇeníhlavního menu a velikost písma. Jako další parametr ˇcasempravdˇe- podobnˇepˇribudezapínání postranního panelu.

Obrázek 2.5: Alternativní varianty designu IS MU

Implicitní design je uživatel ˚umvnucen jen ve dvou pˇrípadech.V Odpovˇednících,což je e-learningová agenda pro zkoušení znalostí student ˚u,je zvolený design potlaˇcen,abychom zamezili neˇcitelnostielektronických test ˚u.A v Interaktivních osnovách, což je uˇcitelemspra- vovaná hierarchická struktura informací ke kurzu, u které by kontrola obahu ve více de-

12 2.6. ROZVRŽENÍ STRÁNEK IS MU („KOSTRA“) signech (zejména v inverzním) vedla k neúmˇernémuzatˇežovánívyuˇcujících. Lepší znaˇckování,využití identiﬁkátor ˚ua tˇrídoznaˇcujících bloky zdrojového kódu, dává ve skuteˇcnostilepší možnosti pro úpravu vzhledu, než podporoval p ˚uvodnítabulkový model. Pokroˇcilíuživatelé mohou (a není možné jim to zakázat) na své stranˇe,napˇr.s použitím doplˇnku Greasemonkey prohlížeˇceFirefox, modiﬁkovat layout i obsah stránek nadále. Ze systémového pohledu jsou obdobou uživatelské volby designy, které jsem pˇripravil pro provozování jiným školám a projektu Theses.cz.

Obrázek 2.6: Neautentizovaný design IS provozovaného jiným školám

2.6 Rozvržení stránek IS MU („kostra“)

Make all visual distinctions as subtle as possible, but still clear and effective. — Edward R. Tufte

Na následujícím výˇrezuobrazovky (obr. 2.7) je zobrazen implicitní design IS MU, který používá vˇetšinauživatel ˚uuniverzity po pˇrihlášenído systému. Je na nˇemvyznaˇceno10 základních ˇcástí,které plní r ˚uzné,zejména navigaˇcnífunkce (ve fázi návhu bych takové rozdˇelenínazval wireframe). Následující podkapitoly popisují oznaˇcenéˇcástirozvržení stránky (website layout), kte- rými jsou:

1. Oblíbené záložky, jazyk a odhlášení

2. Hlaviˇckastránky

3. Drobeˇckovánavigace

4. Info k uživateli a volba fakulty, studia a období

5. Volba cizí identity / rozsahu IS pro absolventy

6. Hlavní navigaˇcnímenu

7. Centrální prostor aplikace

8. Zápatí s relevantními a vlastními odkazy

13 2.6. ROZVRŽENÍ STRÁNEK IS MU („KOSTRA“)

Obrázek 2.7: Rozvržení autentizovaných stránek IS MU

9. Servisní odkazy v patiˇccestránky

10. Postranní panel

2.6.1 Oblíbené záložky, jazyk a odhlášení [1]

Zobrazení a výbˇerOblíbených záložek v záhlaví každé stránky je plnˇev režii uživatele. Mohou sloužit jako rychlé odkazy na zvolené aplikace IS MU i jako odkazy na jiné webové stránky. Prostor pro vlastní odkazy je také v zápatí, uživatel tak není nucen pro využití této funkce zvyšovat si hlaviˇckuIS MU, nechce-li. Ikona pro odhlášení15 je kromˇehlaviˇckyumístˇenaještˇev patiˇccea odkaz také na konci hlavního menu. Zámˇerem je posílit využívání odhlašování, jako dobrého zvyku posilujícího preventivnˇebezpeˇcnost. Volba jazyka rozhraní zobrazuje jak vybraný jazyk (tuˇcnˇe,neaktivnˇe),tak možné volby (aktivní klasické odkazy) oddˇelenésvislítky. Tato forma pˇrepínáníje použita jednotnˇei na dalších místech v systému.

15. Odhlášení autentizované relace není bˇežnýmiprostˇredkyrealizovatelné. Pˇresnáimplementace využívající pro r ˚uznéprohlížeˇcepˇrizp˚usobenýJavaScript ve spolupráci se serverovým skriptem odesílajícím urˇcitéstavové kódy HTTP je interním know-how vývojového týmu.

14 2.6. ROZVRŽENÍ STRÁNEK IS MU („KOSTRA“)

2.6.2 Hlaviˇckaa info k uživateli [2–4]

Znak univerzity umístˇenýv tradiˇcnímlevém horním rohu (na obr. oznaˇcen[2]) hraje vý- znamnou roli pˇredevšímna veˇrejnˇepˇrístupnýchstránkách, kde návštˇevník˚um,kteˇrímo- hou k is.muni.cz pˇristoupitvelmi r ˚uznýmizp ˚usoby, pomáha rychle se zorientovat. Slouží podle obvyklého úzu jako odkaz na titulní stranu, stejnˇejako nevýrazný graﬁcký nadpis nad dominantním jménem aplikace. Dobrá navigace sdˇelujeuživateli nejen jaké jsou jeho další možnosti („Kam ted’ m ˚užu?“), ale také mu pomáhá zorientovat se v aktuální situaci („Kde se právˇenacházím?“). V úvodní kapitole jsem tento aspekt vyzdvihl, protože na webu platí více, než u tradiˇcních(deskto- pových) program ˚u.Již standardním ˇrešenímpro zobrazení cesty od titulní stránky webu je drobeˇckovánavigace (na obr. oznaˇcena[3]). Zavedení drobeˇck˚udo stovek aplikaˇcníchskript ˚uje dlouhodobý úkol a v nˇekterýchpˇrí- padech je obtížné rozhodnout, které rozcestníky jsou pro skript rodiˇcovské.U všech nových aplikací a pˇrivylepšování stávajících dbám na oznaˇcovánítéto navigaˇcníinformace co nej- lepším zp ˚usobem. V pravé ˇcástihlaviˇckyje zobrazena identita právˇepˇrihlášenéhouživatele a podle po- tˇrebaplikace také zvolené období, fakulta anebo studium. Tyto tˇrihlavní parametry zde lze nastavit, ke zmˇenˇeje nabídnuta rozbalovací roleta.

2.6.3 Volba cizí identity / rozsahu IS pro absolventy [5]

Mezi hlaviˇckoustránky a následující hlavní obsahovou ˇcástíse ve dvou pˇrípadechzobrazuje zˇretelnýpruh. Prvním je situace, kdy je uživateli s právem uˇcitelezobrazena aplikace, kterou si m ˚uže prohlédnout pod identitou studenta. Tato funkce je velmi užiteˇcná,protože dovoluje vyuˇcu- jícímu kontrolovat, zda nastavení e-learningových agend mají jím požadovaný efekt a také reagovat na dotazy student ˚uk obsahu služeb, které jsou pro kurz v IS dostupné.

Obrázek 2.8: Rozcestník studenta zobrazený uˇcitelempod cizí identitou

Volba konkrétní osoby, pod jejíž identitou bude stránka zobrazena, je nutná, protože vir- tuální testovací student nem ˚užev systému být zaveden, když v nˇemexistují komplexní

15 2.6. ROZVRŽENÍ STRÁNEK IS MU („KOSTRA“) individuální práva, seminární skupiny nebo podpora prostupnosti studia napˇríˇcobory i fa- kultami. Soukromí studenta je samozˇrejmˇerespektováno, zmínˇenýmzp ˚usobemje možné prohlížet jen vybrané aplikace (napˇr.informace a statistika z poznámkových blok ˚u,Interak- tivní osnova, parametry odpovˇedníkupˇredjeho skládáním). Druhý pˇrípad,kdy dochází k zobrazení pruhu, nastává, když s IS pracuje absolvent, který už nemá aktivní vztah ke škole. Tomu je standardnˇenabízen zkrácený seznam služeb a pomocí pruhu si jej m ˚užerozšíˇritna plnou nabídku.

2.6.4 Hlavní navigaˇcnímenu [6]

Pro rychlý pˇrístupdo jednotlivých agend IS (napˇr.k poštˇenebo do Záznamníku uˇcitele), jsou soustˇredˇenyodkazy v hlavním navigaˇcnímmenu (na obr. oznaˇceno[6]). Pozici menu si každý uživatel m ˚užezvolit bud’ vlevo (implicitní) nebo dole, pod apli- kací. V kódu HTML stránky je menu (v obou variantách stejnˇe)až v závˇeru, což splˇnuje doporuˇcenípro lepší pˇrístupnost,spoleˇcnˇese skrytým odkazem pro pˇreskoˇcníobsahu na zaˇcátkukódu. Za odkazy na hlavní ˇcástisystému je ještˇeuvádˇenainformace o poˇctuuživatel ˚ua pro- vedených operací v posledních 5 minutách a o aktuálním stupni zátˇeže,resp. jen v pˇrípadˇe mimoˇrádnézátˇežeupozornˇenína ni. Zvláštní vlastnost má odkaz na aplikaci Dril, která slouží k memorování oddˇelených pojm ˚u,napˇr.slovíˇcekcizího jazyka, metodou opakování s prodlevami (spaced repetition), která znaˇcnˇevylepšuje klasickou kartiˇckovoumetodu. V pˇrípadˇe,že jsou pro uživatele v da- ném dni naplánovány kartiˇckyk opakování, je odkaz v menu výraznˇepodbarven, aby pˇri- pomínal dosud nesplnˇenouˇcinnost.

Obrázek 2.9: Upozornˇenína kartiˇckyDrilu k opakování

Na veˇrejnýchstránkách, napˇr.v Obchodním centru MU, je pro zvýšení orientace zavedeno zvýrazˇnováníodkazu, který odpovídá právˇenavštívené ˇcástiIS (obr. 2.10). Tento princip bude zaveden i do autentizované ˇcásti,pˇredpokládám s využitím zavádˇenéhooznaˇcení skript ˚upro drobeˇckovounavigaci.

2.6.5 Aplikace [7]

Hlavní prostor v centrální ˇcástirozvržení stránky (na obr. oznaˇcen[7]) využívá pro komunikaci s uživatelem konkrétní aplikaˇcnískript. Ve všech vzhledech je opticky oddˇelenod hlaviˇckya patiˇcky.

16 2.6. ROZVRŽENÍ STRÁNEK IS MU („KOSTRA“)

Obrázek 2.10: Zvýraznˇeníaktivní oblasti (aplikaˇcnískupiny) IS MU

Nˇekteréprvky designu zobrazující se zde, spoleˇcnévšem aplikacím a navržené pro jed- notné využití aplikaˇcnímiprogramátory, jsou uvedeny v kapitole 4. Návrhové vzory.

2.6.6 Patiˇcka[8 a 9]

Na konci stránky jsou vypsány relevantní odkazy, což jsou zkratky na spˇríznˇenéaplikace. Vedle nich jsou Oblíbené záložky, popsané výše, a odkaz na jejich správu. V pozadí se skrývá aplikace Záložky, jedna z prvních, na jejichž vývoji jsem se podílel. Je inspirována obdob- nými social bookmarking službami16. V úplném závˇeru stránky je vedle odkazu pro pˇresunna zaˇcátekvˇenovánprostor kon- taktním informacím na r ˚uznéskupiny uživatelské podpory a odkazu na nápovˇedu.

2.6.7 Postranní panel [10]

Stˇredníˇcástrozvržení vyhrazená aplikaci m ˚užebýt s rostoucí úhlopˇríˇckouLCD a s pˇrecho- dem k širokoúhlým rozlišením velmi široká. To m ˚užebýt nepˇríjemné,pokud je potˇrebaˇcíst ˇrádkytextu, které se zobrazí pˇrílišdlouhé. Je na nich obtížné udržet oko a správnˇenavazo- vat na následující ˇrádek. Zároveˇnexistují informace, pˇredevšímosobní, které by bylo vhodné mít pˇrístupnébˇe- hem celé doby práce s IS. V designech jsem proto realizoval postranní sloupec (na obr. ozna- ˇcen[10]), který se zobrazuje vpravo od aplikaˇcníoblasti a volitelnˇejde skrýt. Základním obsahem panelu by mˇelbýt kalendáˇr(jeho realizace v JavaScriptu a styl je zhruba pˇripraven).V kalendáˇriby šlo kromˇeuživatelských dat zobrazovat nˇekteréz infor- mací z nové agendy Události, která agreguje k osobˇezmˇenyv IS (napˇr.vyhlášení zkušeb- ního termínu v mém pˇredmˇetu)a termíny z pˇripravovanénové podoby Vývˇesky. Mezi další možný obsah panelu navrhuji vyhledávání, nejbližší rozvrhové údaje, upo- zornˇenína nové pˇríspˇevkyve sledovaných DF, Blozích, Vývˇeskách,exspirace soubor ˚uv Úschovnˇe, kontextový odkaz na nápovˇedunebo jídelníˇcekzvolené menzy. Poˇcítánítˇechtoúdaj ˚uale klade další nároky na databázový stroj, technická realizace proto není úplnˇetriviální, nˇe- které údaje bude nutné ukládat pˇredpoˇcítanédo vyrovnávací pamˇeti,jiné s využitím Ajaxu naˇcítataž v pˇrípadˇepotˇreby.

16. Bližší popis, vˇcetnˇe pˇresahu služby do e-learningu, je dostupný v nápovˇedˇe IS MU https://is.muni.cz/auth/help/komunikace/zalozky

17 2.7. SESKUPOVÁNÍ APLIKACÍ („STRUKTURA“)

2.7 Seskupování aplikací („struktura“)

U systému prakticky libovolného rozsahu je vhodné stanovit menší ˇcásti,které je možné chápat oddˇelenˇea které obsáhnou související operace. Tím podpoˇrímedekompozici, jako jeden z proces ˚u,kterým se ˇclovˇekvyrovnává se složitostí a jak si v pamˇetiinformace rozˇra- zuje. V IS MU tak najdeme sekce (aplikaˇcnískupiny) sestavené napˇr.podle role jejich uži- vatele – Záznamník uˇcitele,Student, Absolventská sít’. Jiné jsou rozdˇelenypodle objekt ˚u reálného svˇeta– Lidé, Pracovištˇe,Publikace. Další jsou obecné nebo podp ˚urné– Správce soubor ˚u,Záložky, Nápovˇeda.Jejich oddˇeleníje d ˚uležitépro zmínˇenépochopení, zapamato- vání a také pro navigaci. Umožˇnujevybudovat drobeˇckynebo ikony, které mohou reprezentovat danou oblast. Tuto vrstvu návrhu nyní považuji za prioritní pro další vývoj rozhraní IS MU. S rozsáhlým systémem – IS MU má stovky agend (pˇres2000 skript ˚u,více než 1000 data- bázových tabulek a desítky tisíc uživatel ˚u)– pracují uživatelé velmi individuálnˇe.Je tˇežké tvoˇrit persony, které by reprezentovaly velké skupiny uživatel ˚ua jim typický zp ˚usobvyu- žití IS. Zˇrejmˇenejde udˇelatdisjunktní rozdˇeleníosob, napˇr.vztah ke škole bývá ˇcastokom- binovaný (sám jsem student, absolvent, uˇciteli zamˇestnanec).Studenti i uˇcitelénespadají právˇepod jednu fakultu atd. Pro zpˇrehlednˇeníje možné jít cestou individuálního zvýrazˇnování,pokud bude navr- ženo odolnˇe(nebude si moci uživatel rozhraní znepˇrehlednita nebo skrýt ˇcásti,které by pak prohlásil za chybˇející).S ohledem na výpoˇcetnímožnosti by mohla jistá forma zvýrazˇnování fungovat bez uživatelského zásahu. Bud’ jednoduše, z historie aktuálnˇepoužívaných apli- kací, nebo s pomocí metod ﬁltrování dat od podobných uživatel ˚u(collaborative ﬁltering).

2.8 Složitost vs. komplexnost systému („rozsah“)

Simplicity design axiom: The complexity of the information appliance is that of the task, not the tool. The technology is invisible. — Donald Norman (1998)

Jedno z prvních sdˇelení,které se dozvídá nový student po pˇrihlášenído systému, zní: „IS není složitý. IS je objemný proto, aby za Vás udˇelalco nejvíce práce!“ Víme, že orientovat se v desítkách agend je obtížné. IS MU je komplexní nástroj a najít v nˇemˇrešenísvého aktuál- ního problému vyžaduje úsilí. Pˇrikrátké úvaze je ale možné dohlédnout, jak nesrovnatelná situace by na MU byla bez IS (resp. srovnat, jaká je na ménˇepokroˇcilýchVŠ). Vˇetšinafunkcí a nástroj ˚uIS MU je navržena obecnˇea pro více r ˚uznýchskupin uživa- tel ˚u(napˇr.Kruhy pro týmovou komunikaci a spolupráci jak absolvent ˚u,tak student ˚unebo pracovních skupin). Nelze se je tak snadno nauˇcit, jako by tomu bylo u jednoúˇcelovýchal- ternativ. Dosahují ale takové míry volnosti ve zp ˚usobupoužití, že uživatelé nachází nové nepˇredpokládanépracovní postupy, ˇcastohodnotnˇejší,než byl p ˚uvodnízámˇer. Ménˇekon-

18 2.9. NEJVYŠŠÍ ÚROVENˇ NÁVRHU („STRATEGIE“) krétní obraz systému znamená bohužel pro uživatele delší ˇcasnutný k vytvoˇreníjeho men- tálního modelu. Je oprávnˇenéoˇcekávat,že program nebude komplikovanˇejší,než úkol, který je jeho pro- stˇrednicvímvykonáván. Ne všechny úkoly jdou ale svˇeˇritstroj ˚um,zvlášt’ když procesy na univerzitˇenejsou jednoduché. Studovat a plnit pracovní povinnosti znamená pochopit a podˇríditse mnohdy složitým požadavk ˚um.I pˇresprokazatelnˇepozitivní dopad na „pravidla hry“, napˇr.pˇresnosta nekonﬂiktnost paragraf ˚ustudijního ˇrádu,který má zavádˇeníIS MU. Na této úrovni se skrývá podstatná ˇcástnepochopení IS MU uživateli. Nebylo by ale dobˇremít jim to za zlé. Cerpámˇ od nich podnˇetyke zlepšení, která ocení i znalí uživatelé, jinak zvyklí nedokonalost pˇrehlížet.Rozhodnˇeneopouštím snahu i ty nejkomplexnˇejšíná- stroje pomáhat navrhovat jednoduše, aby i bez pˇredchozízkušenosti byla bariéra pro jejich použití co nejmenší.

2.9 Nejvyšší úrove ˇnnávrhu („strategie“)

Stanovení strategie na nejvyšší úrovni je zásadní. Rozhodnutí, zda budovat e-learning nebo se vˇenovatabsolvent ˚umdo znaˇcnémíry ovlivní sadu nástroj ˚u,které vzniknou, i pˇresjejich realizaci poˇcítajícís pˇresahemp ˚uvodníoblasti.

2.10 Skryté funkce rozhraní a nestandardní situace

Již jsem pˇredstavilgraﬁcké aspekty rozhraní viditelné na první pohled a navigaci, která je podvˇedomˇepoužívána pˇristandardní práci se systémem. Uživatelské rozhraní ale tvoˇríi další funkce.

2.10.1 Klávesové zkratky

Pro snadnˇejšípohyb (nejen) po webových stránkách jsou urˇcenyklávesové zkratky (accesskeys, realizované v HTML stejnojmenným atributem elementu ). Zkratky zvyšují pˇrístupnostjak lidem hendikepovaným, tak zdatným aktivním uživatel ˚um(power users). Klávesová zkratka musí fungovat všude stejnˇe,proto pro nˇepˇripadajív úvahu jen hlavní navigaˇcníodkazy dostupné na každé stránce IS (pˇrítomnénad úrovní aplikace). Navrhuji pevnˇezvolit zkratku pouze pro tit. stranu (pod klávesu 0) a další zkratky smˇerovat na stránky podle preferencí uživatele, s využitím Oblíbených záložek (viz 2.6.1). Pˇresnéovládání klávesových zkratek se v prohlížeˇcíchliší, pro Firefox platí takto:

• Alt + 0 Osobní administrativa IS (https://is.muni.cz/auth/)

• Alt + 1 Oblíbená záložka 1

• Alt + 2 Oblíbená zálož...

19 2.10. SKRYTÉ FUNKCE ROZHRANÍ A NESTANDARDNÍ SITUACE

Je zvykem, že výˇcetzkratek se uvádí na stránce Prohlášení o pˇrístupnosti dostupné z celého webu. Protože platnost takového prohlášení není v souˇcasnédobˇev IS MU zaruˇcitelná (pro uvedený rozsah systému), navrhuji seznam umístit do konﬁguraˇcníaplikace Oblíbených záložek.

2.10.2 Chybové stránky

Uživatel se dostane na chybovou stránku z r ˚uznýchd ˚uvod˚u.M ˚užešpatnˇezadat URL, napˇr. kv ˚ulizalomení v e-mailu, m ˚užepoužít zastaralý odkaz z vyhledávaˇcenebo napˇr.následo- vat chybný interní odkaz. V systémech využívajících HTTP basic access authentication (ale pˇriurˇcitékonﬁguraci i v systémech autentizujících na základˇeúdaj ˚uzadaných HTML for- muláˇrem)se chybová stránka zobrazuje po neúspˇešnémzadávání pˇrihl.jména a hesla. Chybová stránka by mˇelanabízet „pomocnou ruku“ – srozumitelné informace co se stalo, odkaz na titulní stranu a na navigaci, mˇelaby na obsahovém webu být doplnˇena o možnost vyhledávání. Standardní chybová stránka, kterou generuje webserver, není uži- vatelsky pˇrívˇetivá,protože obsahuje technické hlášení, vˇetšinouv angliˇctinˇe.Dnešní pro- hlížeˇceji pˇrekrývajívlastní verzí, která bývá srozumitelnˇejší(podrobná) a lokalizovaná. Nejlepším ˇrešeními tak z ˚ustávánespoléhat se, že uživatel porozumí standardnímu hlášení prohlížeˇce,a nahradit je vlastní stránkou. Není-li jisté, jaký jazyk návštˇevníkovládá, vedle ˇceskéhotextu je lepší vypsat jeho anglický ekvivalent.

Obrázek 2.11: Chybová stránka IS MU

Chybová stránka IS MU je barevnˇepozmˇenˇena(pˇrechoddo ˇcervenév levém sloupci, ˇcervenénadpisy) a v obsahové ˇcástiradí, jak se problému vyhnout. Ve verzi pro neúspˇešné pˇrihlášení(obr. 2.11) je vedle popisu oˇcekávanýchúdaj ˚ua ˇcastýchpˇreklep˚utaké uveden kontakt na správce vydávající hesla a pro absolventy odkaz na zaslání kódu pro jeho zmˇenu. Rešeníˇ popsané v této kapitole by se dále mohlo inspirovat ˇclánkem The Perfect 404 [10] (napˇr.podle nˇejimplementovat dohledávání výraz ˚u,které uživatel zadal do vyhledávaˇce, který jej odkázal na neexistující stránku).

20 2.10. SKRYTÉ FUNKCE ROZHRANÍ A NESTANDARDNÍ SITUACE

2.10.3 Styl pro tisk Významnou vlastností CSS je, že lze omezit, na jaké zaˇrízení,konkrétní typ média (CSS Media Type17), se pˇredpisymají uplatnit. Vedle monitoru jsou podporovány projektory, te- levize, ˇreˇcovésyntetizéry a tiskárny. Propojení je v HTML hlaviˇccerealizováno obsahem atributu media pˇríslušnéhoelementu link. Styl pro tisk z IS MU je navržen pouze jednoduše:

• zjednodušená hlaviˇcka,skrytá navigace a pro tisk zbyteˇcnégraﬁcké prvky,

• patkové písmo o velikosti 11 pt (typograﬁckých bod ˚u),

• neomezená šíˇrkastrany.

Je to dostateˇcnépro bˇežnépoužití, odpadá starost s tiskovým výstupem vˇetšinyaplikací. Samozˇrejmˇetento zp ˚usobnem ˚uženahradit sazbu vybraných dokument ˚uk tomu urˇceným specializovaným systémem (v pˇrípadˇeIS MU je jím TEX). I v dobˇepodpory CSS 3 v pro- hlížeˇcíchbude zˇrejmˇeproblém minimálnˇes dostupností (resp. šíˇrením)potˇrebnýchˇrez˚u písma.

17. http://www.w3.org/TR/CSS21/media.html (ˇcástspeciﬁkace CSS 2.1)

21 Kapitola 3 JavaScriptové frameworky

K obsahu (HTML) a formˇe(CSS) se na webu neodmyslitelnˇepˇridáváchování, které je pro- gramováno jazykem JavaScript (JS). Ten byl primárnˇepro tento úˇcelstvoˇren,bližší popis historických souvislostí a pˇredstaveníjazyka je struˇcnˇeshrnuto v [7]. Uživatelem JavaScriptu mˇelbýt nikoliv „ˇcistokrevný programátor“, ale spíše „amatérský tv ˚urce“ webových stránek. Za deset let se situace pomˇernˇezmˇenilaa s nástupem Webu 2.0 a pokroˇcilejšíchtechnologií se programování v JavaScriptu stalo profesionální záležitostí. Jak známo, programátor je tvor líný, a tak než by kódoval v ˇcistémJavaScriptu, kterému se navíc pˇredlety vysmíval, došlo k rozmachu knihoven a aplikaˇcníchrámc ˚u.Tím se zároveˇn JS pˇriblížili laik ˚um. Struˇcnépˇredstavenívýhod JS rámc ˚um ˚užeobsahovat následující body:

• odstiˇnujíod rozdíl ˚uv implementaci stejných funkcí v r ˚uznýchprohlížeˇcích(napˇr. XMLHttpRequest objekt),

• usnadˇnujípráci s DOM (procházení, adresování/vyhledávání ˇcástí,úpravu),

• doplˇnujíchybˇejícívlastnosti a události prostˇredí (napˇr. nahrazují window.onload vlastní verzí, která je vhodnˇejšípro spouštˇenískript ˚u),

• poskytují knihovny prvk ˚uuživatelského rozhraní (napˇr.kalendáˇre,našeptávaˇce),

• ˇcastodovolují místo programování spíše konﬁgurovat (jednoduše zavolat se správ- nými parametry metodu na zvolený prvek stránky),

• nˇekteréintegrují psaní klientského JS se serverovým prostˇredím(což není pˇredmˇe- tem této práce, více viz napˇr. Google Web Toolkit, Qcodo).

3.1 Požadavky pro nasazení do IS MU

Prvním omezujícím požadavkem je dostupnost pod takovou licencí, která nebrání bezplat- nému použití. V následujících kapitolách pˇredstavenéframeworky jsou licencovány jako volný software (vˇetšinapod vyhovující MIT nebo BSD licencí). Knihovna nesmí ovlivnit souˇcasnoukonﬁguraci systému, tj. musí být zapouzdˇrená,aby nezp ˚usobylaproblémy s již používaným JS kódem. Kromˇemenšího množství vlastního kódu jde zejména o FCKeditor a kalendáˇrpro volbu data pro formuláˇrovápolíˇcka.

22 3.1. POŽADAVKY PRO NASAZENÍ DO IS MU

JavaScript má pomˇernˇeneobvyklý rys objektovˇeorientovaného programovacího jazyka, na kterém jsou založeny nˇekteréknihovny pro nˇej.Neobsahuje totiž tˇrídy, tedy zp ˚usobkon- stukce objekt ˚ua deklarace jim pˇríslušnýchmetod, ale jejich úlohu pˇrebíráprototypování (prototype-based programming). Programátor se pˇrivývoji nesoustˇredínejprve na budo- vání tˇríd,jejichž instance následnˇem ˚užetvoˇrit,ale pˇrímo(za bˇehuprogramu) rozšiˇruje objekty, vˇcetnˇezákladních, o potˇrebnévlastnosti, které m ˚užepoté opˇetovnˇepoužívat. Pˇríklademprototypování je následující rozšíˇrenízáklaního JS objektu String o výpis ˇre- tˇezcepozpátku (metodu reverse obdobnou té, kterou objekt Array má v základu):

String.prototype.reverse = function() { return this.split(’’).reverse().join(’’); };

Rámec by mˇeldále usnadˇnovatdrobné úkoly v r ˚uznýchaplikaˇcníchoblastech, není zá- mˇerem mˇenitstyl vývoje k jednostránkovým ˇrešením.Spíše tedy získá plus dostupnost r ˚uz- ných modul ˚ua vzorových ˇrešení,než komplexní a rozsáhlý systém. D ˚uležitáje velikost soubor ˚u,které budou do systému pˇridány, pˇredevšíms ohledem na uživatele.

Obrázek 3.1: Porovnání velikosti základní knihovny (J. Resig, 2008)

Dokumentace je kvalitní pro všechny frameworky, stejnˇejako podpora prvních krok ˚u a dostupnost tutoriál ˚u.Seznámení s libovolným rámcem by nemˇelobýt pro aplikaˇcního programátora nároˇcné. Také podpora pro Ajax patˇrído základní výbavy všech knihoven, není tedy nutné na ni brát zvláštní ohled (zajímavˇejším ˚užebýt až dostupnost funkcí zpracovávajících získaná data). Knihovna by mˇelapodporovat vývoj technikou postupného vylepšování (viz následující podkapitola) a také neobtˇežovatuživatele bez JavaScriptu, i když je jich malé a stále klesající množství. Nemˇeloby se napˇríkladstát, že pˇrednaˇctenímJS kódu bude možné použít prvek, který je s ním svázán.

3.1.1 Progressive enhancement

Progressive enhancement (PE) je technika používaná webovými vývojáˇri,jejíž dodržování zajišt’uje, že webová stránka je pˇrístupnáco nejširšímu okruhu uživatel ˚ua zároveˇnvyužívá výhod moderních prohlížeˇc˚upro poskytnutí pˇríjemnˇejšíhozážitku z jejího užívání. [18]

23 3.2. PREHLEDFRAMEWORKˇ U˚

Za pˇredch˚udcetéto techniky považuji pomˇernˇerozšíˇrenýopaˇcnýpostup, kterým je tzv. graceful degradation. Pˇrinˇemje nejprve vytvoˇrenastránka fungující s využitím nejmoder- nˇejšíchtechnologií a až poté je odladˇenapro používání na ménˇevyspˇelýchzaˇrízeních.To m ˚uževést k nepˇeknéimplementaci, protože „ošetˇrování chyb“ není oblíbená ˇcinnostvývo- jáˇre. Pˇrivývoji IS MU se technika PE osvˇedˇcujev tom, že aplikaˇcníprogramátor m ˚užepˇripra- vit (nebo udržovat existující) klasickou webovou aplikaci a na vyšší úrovni se pˇripravujejejí vylepšení modernˇejšímitechnologiemi.

3.2 Pˇrehledframework ˚u

Pro „špehování“ je vhodné (experimentální) rozšíˇreníFirefoxu Frameworks 1.0. Ve stavo- vém ˇrádkuzobrazuje detekovanou knihovnu a její verzi. Podle mého pozorování zásadnˇe nepˇrevládážádná z knihoven a se všemi jde dosáhnout „úžasných“ efekt ˚u.

3.2.1 Prototype Struˇcnápˇredstavení se sluší zaˇcítrámcem Prototype, protože je svou dostupností od konce roku 2005 nejstarší a má ˇradunásledovník ˚u(napˇr.MooTools). Jak název rámce napovídá, byl vystavˇenna rozšiˇrovánízákladních objekt ˚uJavaScriptu (neodpovídá proto stanoveným požadavk ˚um)a klade d ˚urazna doplˇnováníchybˇejícíchrys ˚u jazyka (vˇc.„chybˇejících“tˇríd). Oblíbenost knihovny Prototype podporuje její integrace (a p ˚uvod)v Ruby on Rails, kde slouží zejména jako podpora pro Ajax.

3.2.2 script.aculo.us O úˇcelusady knihoven script.aculo.us vypovídá její podtitul „it’s about the user interface, baby“. Poskytuje pˇredevšímvizuální efekty (jako zvýraznˇení,pr ˚uhlednost,pohyb a animace element ˚u),drag and drop a také nˇekolikovládacích prvk ˚u(napˇr.posuvník). Uvádím ji jakou druhou knihovnu hned za Prototype, protože je jejím rozšíˇrením(a také je souˇcástíRuby on Rails). Na dokumentaci bývá u této knihovny slyšet obˇcasstížnost (ne tak na její schopnosti). Neoﬁciálním místem, na kterém jsou dostupná rozšíˇreníPrototype a script.aculo.us je server Scripteka.com.

3.2.3 Yahoo! UI Library (YUI) V pˇrípadˇe YUI pˇrednámi stojí nejen knihovna JS funkcí, ale komplexnˇejšírámec pro bu- dování bohatých webových aplikací. Používají a vyvíjí jej vývojáˇriYahoo!, veˇrejnostibyl pˇredstavenzaˇcátkemroku 2006. Obsahuje šest základních komponent:

1. jádro YUI (Core) – manipulace s DOM, pˇrístupk událostem,

24 3.2. PREHLEDFRAMEWORKˇ U˚

2. knihovna nástroj ˚u(Utilities) – asi 13 souˇcástí,napˇr.animace, cookies, JSON nebo nahrávání obrázk ˚u,

3. ovládací prvky pro uživ. rozhraní (Controls/Widgets) – na 15 prvk ˚ukombinujících JS a DHTML, napˇr.našeptávaˇc,posuvník, paleta pro výbˇerbarvy nebo Rich Text Editor,

4. CSS šablony (CSS Resources) – reset (pro zrušení rozdíl ˚umezi prohlížeˇci),základní (pro vylepšení std. nastavení), fonty (sjednocení typograﬁe), a gridy (pro rozvržení stránek),

5. vývojáˇrskénástroje (Developer Tools) – logování, proﬁlování a testování,

6. a koneˇcnˇekompresor (Compressor) – nástroj pro zmenšení JS a CSS kódu.

Považuji YUI za velmi dobrý framework pro zaˇcínajícíprojekt, kv ˚ulijeho komplexnosti a zá- mˇeru odkrývat obvyklé metody ˇrešení,což podporuje dostupností vzorových ukázek kódu s vysvˇetlenímsouvislostí (proˇczrovna „x“ je použitelné na ˇcinnost„y“).

3.2.4 MooTools

Kompaktní a modulární knihovna MooTools je známá pˇredevšímsvou podporou pro vizu- ální efekty a pˇremˇeny(transitions), i když poskytuje i další bˇežnéfunkce. Jde zˇrejmˇeo nej- propracovanˇejšíknihovnu pro animace (dosahuje nejplynulejších efekt ˚u).Od roku 2006, in- spirována frameworkem Prototype, prodˇelalamohutný vývoj. Modularita zde znamená, že již pˇristahování knihovny (jádra Core nebo plugin ˚u More) se nabízí seznam desítek ˇcástí,ze kterých je sestaven výsledný soubor. MooTools rozšiˇrujezákladní objekty JS, nesnaží se mˇenitvlastnosti jazyka, ale inspiruje se v Ruby (funkcionální techniky). Pro seznámení s knihovnou je vhodné vyhledat Mootorial, oﬁciální stránka je struˇcná. Pro ukázku schopností pak tˇrídu Slideshow 2 (promítání fotograﬁí) a MochaUI (knihovna uživatelského rozhraní pro jednostránkové aplikace, obdoba desktopu). Velmi malou knihovnou pro efekty (3 KB), alternativou ke script.aculo.us, je moo.fx. Existuje jako souˇcástMooTools nebo Prototype.

3.2.5 The Dojo Toolkit

První knihovna Dojo byla dostupná už v roce 2004 a prošla od té doby znaˇcnýmvývojem (má také velkou komunitu). I proto panuje nˇekolikmýt ˚u,jako že Dojo je vhodné jen pro velké projekty a jednostránkové aplikace nebo pro Java vývojáˇre(je souˇcástí Struts 2 a Ta- pestry). Dojo bývá spojováno s IBM a AOL, jejichž vývojáˇrido nˇejpˇrispívají. Navzdory pˇredsudk˚umpodporuje Dojo vlastnosti srovnatelné a v mnohém pˇrevyšující konkurencí:

• základní knihovna dojo.js – události, animace, Ajax, a ˇradadalších,

25 3.2. PREHLEDFRAMEWORKˇ U˚

• volitelný kód The Dojo Core – pokroˇcilejšíanimace, zpracování dat, drag and drop a další,

• bohatý systém komponent rozhraní Dijit – kombinace HTML, CSS a JS (napˇr.pro menu nebo textový editor), s podporou motiv ˚u(graﬁckých témat),

• nejmodernˇejšíkód pod hlaviˇckou DojoX (X jako eXtensions) – rozšíˇrenív r ˚uzném stupni vývoje (napˇr.gridy, grafy, ofﬂine aplikace nebo vektorové kreslení),

• svn repozitáˇrexperimentálního kódu DojoC (C jako Campus).

Mezi speciﬁka Dojo Toolkitu patˇrí Dojo Package System – používání jmenných prostor ˚u a od nich odvozená koncepce dynamického naˇcítánísoubor ˚uze stromu zdrojového kódu. Jiné rámce podporují dynamické naˇcítánína explicitní výzvu, napˇr.jQuery.getScript(). Ještˇe pokroˇcilejšímkrokem je pak možnost sestavení kódu do jednoho minimalizovaného souboru na míru, pro zvýšení výkonu aplikace (souˇcástídistribuce je skript pro Apache Ant a kompresor ShrinkSafe). DojoCampus.org je pak místem, kde hledat návody, dokumentaci, tutoriály, demostrace a kontakt na uživatelskou komunitu.

3.2.6 Adobe Spry Adobe Spry framework for Ajax cílí na webdesignéry a nepˇredpokládáani pr ˚umˇernouzna- lost JavaScriptu.

• Spry Data – získání dat a transformace komplexnejších datových struktur (XML, JSON, HTML) do JS polí,

• Spry Widgets – komponenty webové stránky (HTML, CSS, JS), navržené mj. s ohledem na pˇrístupnost(napˇr.našeptávaˇc,akordeon1),

• Spry Effects – pˇresunyelement ˚ua jejich zvýraznˇení(napˇr.tˇres).

3.2.7 jQuery jQuery je dostupné od roku 2006 a jeho popularita stoupá asi nejstrmˇejize všech JS framework ˚u(viz Google Trends). Je to malá knihovna, ale zároveˇnvelmi rychlá, s d ˚urazemna styl „get out of the way“. Vývoj zajišt’ují také placení programátoˇrina plný úvazek (stejnˇe jako u YUI a Dojo). jQuery zvládá CSS selektory lépe než Prototype a s ménˇeˇrádkykódu je možné dosáh- nout vˇetšífunkˇcnosti(díky ˇciza cenu odstínˇeníod JS). Silnou stránkou je množství plugin ˚u,které vytvoˇrilauživatelská komunita, zˇrejmˇei díky dobré architektuˇrepro jejich vývoj.

1. http://en.wikipedia.org/wiki/Accordion_(GUI)

26 3.3. FRAMEWORK PRO IS MU – JQUERY

Dokumentace API jQuery obsahuje u každé položky funkˇcnípˇríklad.Kromˇetoho exis- tují screencasty (ˇrádovˇevíce, než u konkurence) a také server Learningjquery.com. Samostatnˇestojí jQuery UI2 – „sbírka“ interakcí (napˇr.drag and drop, zmˇenyrozmˇer˚u, tˇrízení),widget ˚u(napˇr.akordeon, výbˇerdata, posuvník) a efekt ˚u. O úspˇešnostirámce svˇedˇcíi to, že Microsoft zaˇcleniljQuery do Visual Studia 2008 (a platformy ASP.NET). John Resig, vedoucí vývojáˇr,následnˇeoznámil na blogu jQuery, že knihovna bude souˇcástínástroj ˚upro vývoj aplikací pro telefony Nokia (obsahují odlehˇcené jádro WebKit). Obˇespoleˇcnostislibují, že nebudou jQuery samostatnˇemˇenit,ale podporovat dosavadní styl vývoje.

3.2.8 Další rámce Existují i ménˇeznámé a používané rámce, mezi nimi napˇr.:

• ExtJS – obsahuje ˇraduGUI komponent, panují nejasnosti okolo jeho licenˇcnípolitiky, která se mˇenilamezi verzemi,

• SproutCore – pro vývoj aplikací podobných desktopovým, podporovaný spoleˇcností Apple (ˇcásteˇcnˇepodporuje Cocoa API),

Pro pˇrehledi minoritních rámc ˚u(vˇetšinousouˇcástívˇetšíchsystém ˚u)a pro srovnání vlast- ností m ˚užeposloužit stránka anglické Wikipedie Comparison of JavaScript frameworks.

3.3 Framework pro IS MU – jQuery

Jako rámec vhodný pro nasazení v IS MU jsem zvolil jQuery, pˇredevšímz tˇechtod ˚uvod˚u:

• dostupnost volitelnˇepod MIT a GNU GPL licencí,

• zapouzdˇrenost,

• malá velikost knihovny,

• velmi dobrá dokumentace a komunita,

• dostupnost (vˇetšinouhned nˇekolika)plugin ˚upro r ˚uznéoblasti.

3.4 Podrobnˇejšípopis práce s jQuery

Základním prvkem JS frameworku je výbˇerHTML element ˚u,na které se budou uplatˇno- vat pozdˇejivolané metody. V jQuery, podobnˇejako u dalších, k tomu slouží tzv. selektor $("vyraz"). Samotné $ je hlavní prototyp jQuery, $() konstruuje jQuery objekt.

2. http://jqueryui.com/

27 3.4. PODROBNEJŠÍPOPISPRÁCESJQUERYˇ

Selektor adresuje elementy dvˇemazp ˚usoby. Prvním je ˇretˇezecobsahující kombinaci CSS a XPath, který se pˇredevšímodkazuje na tˇrídy(HTML atribut class) a identiﬁkátory (HTML atribut id) element ˚ua ˇcásteˇcnˇena pozice v DOM. Druhým zp ˚usobemje asi desítka metod, které prochází DOM. Více v dokumentaci pod Traversing API. Kromˇestatického adresování pomocí selektoru poskytuje jQuery podporu i pro zavˇešení kódu na události (napˇr.obdobu onsubmit). Více v dokumentaci pod Events. Knihovna jQuery používá návrhový vzor Builder – každá metoda vrací objekt, na který je aplikována, což umožˇnujeˇretˇezenídalších metod. Napˇr.:

$("a").addClass("test").show().html("foo");

To je dále rozšíˇrenomožností modiﬁkovat výbˇer– p ˚uvodníelementy m ˚užemeomezit (ﬁltrovat) nebo rozšíˇrito nové. To má dopad nejen na úspornˇejšízápis kódu, ale také na výkon knihovny, šetˇrenímvyhledávání ve stromu dokumentu. Dalším zásadním rysem, který je nutné pochopit pro správnou práci s jQuery, je použí- vání callback funkcí, které umožˇnujívˇetvitkód a pˇredevšímdodat asynchronní chování. Efekty jsou v základní knihovnˇejen omezené (show, hide, toggle, sliding, fading a obec- nˇejší animate). Další jsou dostupné formou plugin ˚u,napˇr. interface.eyecon.ro. Pˇredstavenídalších rys ˚urámce, jako je práce s událostmi nebo Ajax, je dostupné v dokumentaci aktuální verze, kterou by nebylo rozumné zde opisovat.

28 Kapitola 4 Návrhové vzory

Za návrhový vzor (design pattern1) se považují obecná ˇrešeníprogramátorských úloh, ne konkrétní algoritmy nebo dokoce implementace kódu. V pojetí této kapitoly si dovolím tento princip místy nerespektovat a v souladu se zadáním práce zde prezentuji stavební prvky, kterými se mohou aplikaˇcníprogramátoˇriIS inspirovat a využívat je. Web, resp. dynamické HTML stránky, jsou „zemˇezaslíbená“ pro reverzní inženýrství zrojového kódu. Jsou dostupné v ˇcitelnépodobˇea s nástroji jako je doplnˇek Firebug2 pro Firefox je rozkrytí HTML struktury, JS kódu a CSS velmi usnadnˇeno.I z toho d ˚uvoduse v této kapitole zamˇeˇrímna princip a souvislosti zvolených ˇrešení,samotná realizace je (nebo s postupem vývoje bude) dostupná online, nahlédnutím do zdroje stránek IS MU. PˇredstaveníFirebugu, který se stal každodenním pomocníkem všech vývojáˇr˚us Fire- foxem, by mohlo vydat na samostatnou kapitolu. Srovnatelný je asi jen s Web Inspectorem pro Safari (WebKit). Firebug je pokroˇcilýmvývojáˇrskýmnástrojem webdesignéra integrova- ným do prohlížeˇce.Obsahuje inspekci a možnost zmˇenHTML (DOM) a CSS kódu, vˇcetnˇe r ˚uznýchvizuálních pom ˚ucek,monitorování sít’ové aktivity (vhodné pro vývoj ajaxových aplikací) a velkou podporu pro ladˇeníJavaScriptu (logování, proﬁlování, spouštˇeníkódu).

Obrázek 4.1: Firebug, panel HTML, nad stránkou getﬁrebug.com

I když vˇetšina následujících „vzor ˚u“vznikla pro potˇrebykonkrétní aplikace IS MU, jsou pˇrenositelnédo dalších. Znovupoužitelnost je základní koncept návrhu dobrého kódu. Ne- malá ˇcástvzor ˚uje inspirována úspˇešnýmnasazením v jiných systémech.

1. http://en.wikipedia.org/wiki/Design_pattern_(computer_science) 2. http://getﬁrebug.com/

29 4.1. STRÁNKOVÁNÍ (NAVIGACE VE VELKÉM POCTUPOLOŽEK)ˇ

4.1 Stránkování (navigace ve velkém poˇctupoložek)

Poprvé byla nová podoba stránkování použita v aplikaci Záložky, nyní je nasazena v ˇradˇe dalších, napˇr.v Diskusních fórech, fotogaleriích nebo Událostech.

Obrázek 4.2: Stránkování ve Fotosbírce

Rešeníˇ stránkování poˇcítás velkým poˇctemzáznam ˚u(jejichž pˇresnýpoˇcetm ˚užebýt vy- psán v závorce za odkazy), dbá na zvýraznˇeníˇcíslaaktuální stránky, nabízí šipky vpˇreda vzad, pokud není právˇevypsána první resp. poslední strana. Vypisuje se jak pˇredstránko- vanými údaji (pro pˇrehledo poˇctua navigaci), tak za nimi, aby nebylo nutné vracet se na zaˇcátekstránky.

4.2 Ouška (pˇrepínáníalternativních informací)

Pˇrílišdlouhé stránky jsou ménˇepˇrehlednéa velké množstvím informací naráz odrazuje uživatele od jejich používání. Klasickým ˇrešenímtohoto problému se na webu stalo použití oušek, pomocí kterých se pˇrepínámezi alternativním obsahem.

Obrázek 4.3: Ouška v návrhu nových funkcí archivu závˇereˇcnépráce

Napˇríkladarchiv závˇereˇcnépráce by mohl být rozšíˇreno další informace vztahující se k práci. Na obrázku pak je vidˇet, jak by se k jejich výbˇeru mohla použít ouška. Samotný obsah pod oušky m ˚užebýt s využitím JavaScriptu ve stránce skrytý a ihned se pˇrikliknutí zobrazit nebo se m ˚uženaˇcístajaxem. Ouška jsem navrhl a jsou použita i pro výbˇerrežimu zobrazení diskusního fóra. Navíc jsou zde [1] v rozbalovací variantˇe(úspora místa a pˇrehlednost)a [2] prostor pod nimi je využíván k rozbalování nabídky r ˚uznýchvoleb (obrázek 4.4).

4.3 Tooltipy (poutavˇejšínápovˇednípopisky)

Zavedený zp ˚usobvysvˇetlovánífunkcí pˇrímov aplikacích IS MU jsou zelené nápovˇední texty menšího rozsahu. Zp ˚usobpráce uživatel ˚uale odpovídá metodˇepokus omyl, nápo-

30 4.4. DOHLEDÁVÁNÍ IDENTIFIKÁTORU(MODALWINDOW)˚

Obrázek 4.4: Ouška v Diskusních fórech (rozbaleny možnosti zobrazení vláken) vˇeduˇctouˇcastoaž po neúspˇechu(což je problematické, systém nem ˚uževždy poznat, jestli byly údaje zadány dobˇre).Popisky navíc zvˇetšujírozsah formuláˇr˚ua ruší první dojem. Rešenímˇ mohou být „bubliny“, které se objeví až pˇriinterakci s urˇcitým formuláˇrovým políˇckemnebo objektem, který potˇrebujevysvˇetlení,napˇr.je ˇcastopˇredmˇetemchyb, dotaz ˚u.

Obrázek 4.5: Nápovˇedaformou tooltipu (jQuery plugin qTip)

Existuje nˇekolikjQuery plugin ˚upro tooltipy. Velmi pokroˇcilýa dobˇrekonﬁgurovatelný je BeautyTips. Funguje ale jen v prohlížeˇcíchs podporou HTML 5 elementu Canvas (což by znamenalo pro IE použít navíc ještˇeknihovnu od Google ExplorerCanvas). Nevhodná je také velikost pˇres200 KB. Pro IS MU považuji za vhodnˇejšíplugin qTip3. Pˇrivelikosti 36 KB je s ním možné do- sáhnout velmi pˇekných„bublin“, pozicovat je atd. Cistéˇ ˇrešeníse nabízí s využitím HTML atributu title, ze kterého se ˇretˇezecpˇrevezmepro obsah popisku. Obsahem ale m ˚užebýt složitˇejšíHTML kód (vˇc.obrázk ˚u)a také dynamický obsah (odkazuji na stránky projektu, kde je pˇeknýpˇríklad– pˇrekladlibovolného slova z anglického textu stránky do španˇelštiny s využitím Google API).

4.4 Dohledávání identiﬁkátor ˚u(modal window)

Mnoho formuláˇr˚uvyžaduje dohledání konkrétního záznamu z databáze nebo souboru ze souborového uložištˇe,napˇr.odkaz na konkrétní vlákno diskusního fóra v Interaktivní os- novˇe,uˇco(univerzitní ˇcísloosoby) pˇrivýbˇeru moderátora fóra, nebo seznam otázek pˇri vytváˇreníodpovˇedníku.

3. http://craigsworks.com/projects/qtip/

31 4.5. MRAK ŠTÍTKU˚ (UŽIVATELSKÁ KATEGORIZACE)

Dohledání bylo v IS MU realizováno s pomocí otevˇrenínového okna prohlížeˇce,ve kte- rém uživatel vyhledal objekt, a poté se navrátila hodnota jeho identiﬁkátoru (napˇr.cesty k souboru ze správce soubor ˚u)zpˇetdo formuláˇrev p ˚uvodnístránce. Moderní ˇrešeníby využilo Ajax, ale princip dohledání v nové stránce je ovˇeˇrený,nebylo tˇrebajej mˇenit(dodám, že dohledávací stránka se zobrazuje v omezeném designu, se sní- ženou hlaviˇckou,bez navigace do jiných ˇcástíIS). Vylepšil jsem ale vzhled prvku, kterému m ˚užemeˇríkatvyhledávací proužek, a pˇrepracovaljeho chování s pomocí jQuery a pluginu expose. Novˇese do stránky dynamicky vkládá HTML element iframe (a k nˇemuouško pro jeho zavˇrenía animovaný obrázek symbolizující práci systému pˇri ˇcekánína odezvu). Prvky jsou vycentrovány a zobrazují se pomocí expose nad zašedlou p ˚uvodnístránku. Na podnˇet uživatel ˚udoplním možnost maximalizace okna.

Obrázek 4.6: Dohledání stud. materiálu pro vložení do Interaktivní osnovy

Obecnˇese tento prvek rozhraní nazývá modal window a jeho použítí je vhodné na tˇech místech, kde se práce s p ˚uvodnímoknem pˇrerušuje k vykonání akce potˇrebnépro další postup.

4.5 Mrak štítk ˚u(uživatelská kategorizace)

Ke klasické taxonomii, organizaci vˇetšíhopoˇctuzáznam ˚udle (shora urˇcených)kategorií, existuje moderní alternativa pojmenovaná folksonomie. Je založena na oznaˇcovánízáznam ˚u klíˇcovýmislovy, která volí (urˇcujízespodu) samotní uživatelé, nejlépe motivováni svou vlastní potˇrebou.Ke stejnˇeoznaˇcenýmzáznam ˚umtakto klasifikovaného obsahu je obvyklé pˇristupovatpˇrestzv. mrak, který zobrazuje v abecedním poˇradíomezený poˇcetnejˇcetnˇejších klíˇcovýchslov (r ˚uznouvelikostí písma). Pro klíˇcováslova se pˇritomto použití vžilo pojmenování štítky (tags), které je odlišuje od klasického významu klíˇcovýchslov, jak je známe z akademické praxe a knihoven, kde se pˇribudování bibliografických databází používají centrální pˇredmˇetovérejstˇríky(subject indexing). Poprvé byl tento zp ˚usobnavigace použit v aplikaci Záložky, nyní je také ve Fotosbírce (soutežní galerii dokumentaˇcníchfotografií MU) a je použit pro zobrazení zájm ˚ulidí, podle

32 4.6. INFORMACNÍˇ A CHYBOVÁ HLÁŠENÍ

údaj ˚uz Osobních stránek. V omezené míˇreje mrak u výukových materiál ˚uvystavených na Elportálu.

Obrázek 4.7: Mrak mých štítk ˚uv aplikaci Záložky

Ve stádiu úvah jsou dvˇeJavaScriptová vylepšení. Prvním je ﬁltr, kterým p ˚ujdev mraku vyhledávat, tj. omezovat jej na slova, která obsahují ˇretˇezeczadávaný do k tomu urˇce- ného form. políˇcka.Druhým vylepšením na stranˇeklienta m ˚užebýt pˇrepínáníˇrazenímraku podle abecedy nebo podle ˇcetnostivýskytu, které zatím provádí server (což ocení uživatelé bez JS). Vylepšní by to znamenalo zejména díky rychlejší odezvˇe,zároveˇnby se snižovalo zatížení serveru (poˇcítánístejných dat, jen kv ˚ulimírnˇejinému zp ˚usobuprezentace).

4.6 Informaˇcnía chybová hlášení

Pro zvýšení pozornosti, kterou uživatel vˇenujehlášením, kterými s ním IS komunikuje, jsem jako jeden z prvních prvk ˚urozhraní zavedl pomˇernˇevýrazná hlášení. Pˇetpodobných ob- délník ˚uje navrženo pro použí v r ˚uznéfázi a stavu operace. Mají vzr ˚ustajícíintenzitu barev, podle naléhavosti sdˇelení.

Obrázek 4.8: Statická informaˇcnía chybová hlášení

1. info – pouze doplˇnujícísdˇelení,spíše pˇredprovádˇenímoperace,

2. potvrzení – operace byla provedena úspˇešnˇe,napˇr.data uložena,

3. upozornˇení– není možné pokraˇcovatnebo byla operace provedena, ale „s výhra- dami“,

4. varování – operace nemohla být dokonˇcena,napˇr.pro nekonzistenci vstupních dat, konkuretní pˇrístup,

33 4.7. TABULKY PRO DATOVÉ VÝSTUPY

5. chyba – operace se nezdaˇrila. Systém, který jasnˇenedává najevo stav operace, která je jeho prostˇrednictvímprovádˇena, nechává uživatele hádat. Castoˇ hádají špatnˇe.[13] Na dynamických stránkách, na kterých se mˇeníúdaje „na místˇe“,jako jsou Interaktivní osnovy, je potˇrebajednotnˇeupozorˇnovatna probˇehlézmˇeny. Standardním prvkem rozhraní pro tento úˇcelse stává tzv. Yellow Fade Technique, pˇrikteré dojde k podbarvení zmˇeny a odeznˇenído barvy pozadí. Pro její implementaci v jQuery není potˇrebažádný plugin, používá se metoda animate() (i když se starší verzi jQuery se používal HighlightFade). Ve webovém rozhraní je dalším d ˚uležitýmindikátorem pr ˚ubˇehuoperace progress bar, který zobrazuje procenta nahrávaného souboru. IS MU používá unikátní distribuovaný sou- borový systém (aktuálnˇe16 mil. soubor ˚uzabírajících 2,7 TB) a pro rozkládání zátˇežeklastr aplikaˇcníchstroj ˚u,což nyní bohužel znemožˇnujepˇrímoˇcarou implementaci tohoto prvku.

4.7 Tabulky pro datové výstupy

Postupnˇev IS pˇrecházímena lepší design výstupu dat ve formˇetabulek. Vzhled byl zvolen tak, aby dovolil prezentovat nejr ˚uznˇejšítabulky, napˇr.udˇelenéznámky, statistiku registrace a zápisu, prerekvizity pˇredmˇetu,...

Obrázek 4.9: Tabulka v designu IS MU (výpis hodnocení v daném semestru)

Tento styl by nemˇelbýt zneužíván pro návrh formuláˇr˚u,k ˇcemužmají nˇekteˇríprogra- mátoˇrisklon. Rád bych proto zavdl jiný vzhled, který by mohli použít a pˇrispˇelby k jedno- znaˇcnémuodlišení vstupu a výstupu dat. Velmi zvýšit hodnotu tabulkového výstupu m ˚užeˇrazenídle zvoleného sloupce. Jde o po- mˇernˇejednoduchou manipulaci, pro kterou uživatel nemusí data pˇrenášetdo specializova- ného tabulkového editoru. Vhodný je pro toto plugin tablesorter4.

4.8 Navigace v rámci aplikace

K dalšímu sjednocování rozhraní pˇrispíváuniformní používání stejných prvk ˚upro význa- movˇestejné operace5. Jde napˇr.o ikony, které si uživatel spojí s danou operací – ikony

4. http://tablesorter.com/docs/ 5. Obecnˇejímá dodržování konzistence zásadní vliv na použitelnost. Známé je pravidlo dvou D: differences are difﬁcult.

34 4.9. PRUVODCE˚ (ATRAKTIVNÍ PREDSTAVENÍˇ APLIKACE) plus/minus pro (hromadné) pˇridání/odebránízáznamu, šipky pro pohyb vpˇred/zpˇetv aplikaci, symbol pro tiskový výstup, šipka znaˇcícírozbalení skryté ˇcástistránky, ikonka pro odkaz do nového okna. Na první pohled z nich uživatel lépe odhadne, co bude po jeho akci následovat. Ikony pˇripravenépro obrazovku nejsou dostateˇcnˇekvalitní pro tisk, pro sezná- mení se s nimi si proto dovolím odkázat ˇctenáˇrena bˇežnoupráci s IS MU. Castoˇ je aplikace rozdˇelenana menší ˇcástistojící pomyslnˇevedle sebe. Kromˇeuž pˇred- stavených oušek máme i graﬁcky jednodušší zp ˚usob,jak navigaci mezi nimi realizovat. Je vhodné použít pˇrepínánítextovými odkazy se zd ˚uraznˇenímaktuální stránky. Na pˇríkladu z editace Osobní stránky (obrázek 4.10) je patrné, že uživatel je právˇena první z pˇetitakto propojených ˇcástí.

4.9 Pr ˚uvodce(atraktivní pˇredstaveníaplikace)

Množství nápovˇedneláká uživatele ke studiu možností té které aplikace. Atraktivnˇejšíforma pˇredstaveníagendy je s pomocí pr ˚uvodce,tj. nˇekolikakrátkých stránek se snímky obra- zovek a „marketingovˇejšími“texty. Vede na nˇeodkaz pˇrímoz dané aplikace, který je do navštívení Pr ˚uvodcerozbalen a uvádí základní informace.

Obrázek 4.10: Odkazy na Pr ˚uvodce– [1] rozbalený, [2] sbalený

Pro samotného pr ˚uvodcejsem pˇripravilvelmi lehký design, který neruší obsah jednotli- vých jeho ˇcásti,které jsou seˇrazenya je mezi nimi vytvoˇrenapˇrehlednánavigace.

Obrázek 4.11: Pr ˚uvodce(k vyplˇnováníOsobní stránky, str. 2/5)

35 Kapitola 5 Pˇrístupk dat ˚um,sdílení obsahu

Tato kapitola se odklání od klasického webového uživatelského rozhraní, aby popsala alter- nativní možnosti poskytování a sdílení (syndication) dat dostupných z informaˇcníhosys- tému. Poˇrádale s ohledem na uživatele, tedy ne na úrovni propojování databází nebo webo- vých služeb integrujících IS MU s jinými systémy. To by nespornˇemohlo být užiteˇcné,ak- tualní trend je pracovat jako ˇcástmozaiky, tj. poskytovat data ve formátu, který je snadno zpracovatelný. Aˇckolivvˇetšinaslužeb IS MU je dostupná až po pˇrihlášení,není informací prezentovaných celému svˇetuv ˚ubecmálo. Urˇcitéexporní aplikace existují, ale nejedná se zatím o otevˇrenéa dokumentované ˇrešení,nad kterým by mohly vznikat informaˇcníslužby tˇretíchstran.

5.1 RSS

Jedna z prvních technologií, které se podaˇrilozviditelnit se i u bˇežnýchuživatel ˚uje RSS. Každodennˇeulehˇcujetˇemz nich, kteˇrístojí o co nejaktuálnˇejšíinformaˇcnítok, sledování novinek, které jsou k nim stahovány z pˇredemvybraných zdroj ˚u(feeds). V IS jsme pˇripravilia nyní testujeme systém poskytování RSS zdroj ˚upro Diskusní fóra a Blogy a bude dostupný i pro novou verzi Vývˇesky. Zatím se jedná o hromadné zdroje, ale vˇeˇrímv nasazení i pro individuální informace (pˇredevšímpro agendu Události). Problémy, které je nutné ˇrešit,se týkají pˇredevšímzátˇežesystému. Z pohledu uživatelského rozhraní je pˇripravenaklasická ikonka zdroje a výše pˇred- stavené dohledávací okno pro výbˇerparametr ˚uRSS zdroje. Odkaz na implicitní RSS ka- nál dané aplikace (napˇr.právˇezobrazeného vlákna DF) bude vhodné pˇridávatdo metadat v HTML hlaviˇcce,aby jej prohlížeˇcmohl nabídnout ve svém rozhraní.

5.2 Mikroformáty

Mikroformáty nabízí lepší strojovou ˇcitelnostdat uvedených na webové stránce, bez nut- nosti použití nových technologií. Pˇridávajímetadata k obsahu pouze správnou posloup- ností HTML znaˇcek,resp. jejich atribut ˚u.Paradoxnˇenejde o návrh standardu pˇripravený konsorciem W3C, pochází ale od Tanteka Çelika, jednoho z bývalých ˇclen˚u. Využití je zatím sporné. Existují rozšíˇreníprohlížeˇc˚u,ta ale nepovažuji za optimální zp ˚u- sob pˇrístupubˇežnéhouživatele. Více vˇeˇrímvyhledávaˇc˚um,které už nachází zp ˚usobyvy-

36 5.3. VYLEPŠENÍ PROHLÍŽECˇ U˚ užití. Napˇr.Geo mikroformát jim pomáhá ve výsledcích vyhledávání spojit danou stránku s mapou. Usnadnˇenípˇrístupuk dat ˚umoznaˇcenímmikroformáty m ˚užebýt ale i zneužito. Napˇrí- klad aktivita spammer ˚unedovoluje poskytovat e-mailové adresy v otevˇrenémtvaru. Už v souˇcasnéosobní stránce dochází k obranˇeproti automatizovanému sklízení adresy za- mlžením (obfuscation).

5.2.1 hCard – vizitky Kontaktní údaje, adresa, telefon a další položky, které se shodují se známˇejšímstandardem vCard, lze na stránce oznaˇcovatformátem hCard. Lépe by se hodil na prezentaˇcnístránky www.muni.cz, které si kladou za cíl podrobnˇeinformovat o pracovištích a osobách, ale mohl by být nasazen i v podobných agendách IS MU (Lidé, Pracovištˇe). Pokud budeme hledat úspˇešnépˇríklady, narazíme na Google Maps, které pomocí nˇej znaˇckujíadresy.

5.2.2 hResume – životopisy Tento mikroformát je ve stádiu návrhu, ale používá jej napˇr.známá sociální sít’ LinkedIn. hResume má jen 8 vlastností a používá 3 jiné mikroformáty: rel-tag, hCard a hCalendar. Jeho implementace je složitˇejší,nicménˇepˇriredesignu životopis ˚uv IS MU je možné na nˇejbrát ohled. Dnes zˇrejmˇenejucelenˇejšípopis je dostupný od Emily Lewis [9] (v ˇceskémpˇrekladu publikoval zdrojak.root.cz).

5.2.3 hCalendar – události Události s vymezeným ˇcasemkonání lze sémanticky znaˇckovatpomocí mikroformátu hCa- lendar. Jde o webovou alternativu formátu iCalendar, který je zmínˇenv zadání práce. IS MU zatím neobsahuje kalendáˇrovouaplikaci, která by byla nejlepším místem pro po- dobné údaje. K exportu pˇripadajív úvahu napˇr.zkušební termíny nebo dobˇrezadaná data na Vývˇesce.Využita by pak mohla být jak v pomˇernˇeoblíbeném webovém kalendáˇriod Google, tak v desktopových programech.

5.3 Vylepšení prohlížeˇc˚u

Použití nástrojových lišt (toolbars) si nejˇcastˇejispojujeme s portály. Pˇridávajípomocí nich funkce prohlížeˇc˚uma usnadˇnujípˇrístup(pˇredevším)ke svým službám, jako je vyhledávání a pošta. Napˇríklad Seznam Lištiˇcka dokáže kontrolovat pravopis nebo pˇrekládatslova ve stránce (ˇceština,angliˇctina,nˇemˇcina).Existují i specializované toolbary, napˇr.pro službu Delicious. Nepovažují lištu za vhodné ˇrešenípro IS MU, kv ˚ulinutnosti instalace, a to na všechny uživatelovi poˇcítaˇce,a vývoji oddˇelenémupro každý z podporovaných prohlížeˇc˚u.Toolbar by musel pˇrinésttakové funkce, které by tyto nevýhody znaˇcnˇepˇrevážily.

37 5.4. SECOND LIFE

Pro jednoduché úkoly jsou dvˇejiné cesty, jak prohlížeˇcrozšíˇrit.Prvním jsou aktivní zá- ložky (favlets), tedy JavaScriptove programy, které si uživatel vloží mezi své oblíbené odkazy. V IS MU jsme takto ralizovali pˇridávánído Záložek (viz nápovˇeda). Druhá možnost jsou tzv. vyhledávací moduly. V rozhraní prohlížeˇcebývá vedle adres- ního ˇrádkuještˇepolíˇckopro hledání, které zadaný výraz smˇeˇrujena konkrétní zvolenou službu. Až bude pˇripravenomodernˇejšíhledání v IS MU, považuji za vhodné doplnit jej o moduly pro prohlížeˇce,které úpravy dovolují (jde jen o konﬁguraˇcníXML soubory s jed- noduchým popisem služby, viz standard OpenSearch).

5.4 Second Life

Virtuální svˇet Second Life (SL) se rozvíjí od roku 2003. Silnˇejšípˇrítomnostˇceskékomunity m ˚užemesledovat od roku 2007, kdy bylo založeno mˇestoBohemia. Na jaˇre2009 se jedná asi o 10 tisíc aktivních lidí, uživatelských úˇct˚ubylo Cechyˇ založeno asi dvakrát tolik. IS MU je od poˇcátkukoncipován jako pˇrístupnýpˇreswebové rozhraní a má díky ko- munikaˇcníma novˇei spoleˇcenskýmslužbám pomˇernˇesilnou komunitu. Je ze své podstaty dostupný online. V souˇcasnédobˇedle mého není potˇrebasuplovat budovy nebo zpˇrístup- ˇnovatslužby IS prostˇrednictvímSL. Virtuální svˇets avatary, prostˇredím(atmosférou) a pro- storem k setkání (virtual presence) dovoluje ale jiné formy komunikace, které jsou pilotnˇe zkoušeny napˇr.v e-learningu a mohou se ˇcasemprosadit. Své zastoupení mají v SL ﬁrmy i nevýdˇeleˇcnéorganizace. Z oblasti vzdˇelánía školství poskytuje své služby napˇr.Regionální knihovna Karviná. Spoleˇcnostwww.scio.cz, s.r.o. so- polupoˇrádaladny otevˇrenýchdveˇrípro zájemce o studium na nˇekolikafakultách (FSS MU, Národohospodáˇrskáfakulta VŠE, Pedagogická fakulta ZCU).ˇ

Obrázek 5.1: Den otevˇrenýchdveˇrív Second Life

Zˇrejmˇenejpokrokovˇejšísnahu z ˇceskýchVŠ projevuje Filozoﬁcká fakulta UP v Olo- mouci, která plánuje pro distaˇcnívzdˇelávánívybudovat vlastní d ˚ums pˇrednáškovýmsálem a akademici se vˇenujívýzkumu ˇrízenívirtuálních komunit.

38 Kapitola 6 ZnaˇckaInformaˇcníhosystému MU

D ˚uležitousouˇcástíproduktu, služby nebo organizace je graﬁcká znaˇckaˇcilogotyp. Slouží k identiﬁkaci a odlišení od konkurence. Pˇrinávrhu znaˇckyIS MU nebylo snadné a asi se nepodaˇrilonajít symbol, který by vysti- hoval IS pro administraci studia, e-learning a zároveˇnmnoho dalších služeb, které systém poskytuje. Nejužívanˇejšíje zcela obecný název „informaˇcnísystém“ ve zkratce „IS“.

Obrázek 6.1: Varianty jednoho ze zamítnutých návrh ˚uznaˇcky

Vzniklo nˇekoliknávrh ˚ua jako jedineˇcnégraﬁcké vyjádˇreníreprezentující IS MU jsme zvolili a dopracoval jsem jednoduché propojení písmen i a S.

Obrázek 6.2: ZnaˇckaInformaˇcníhosystému MU

Malé i ve zvoleném tvaru pˇripomínápostavu (hlavu a tˇelo),která je propojena s vel- kým písmenem S, které zkracuje slovo systém. Tato návaznost odpovídá koncepci, se kterou je IS MU budován od poˇcátku.Uživatel ˚umje svˇeˇrenaznaˇcnád ˚uvˇeraspravovat svá data (zejména v úvodních letech opravdu svým rozsahem neobvyklá). Zároveˇnje v posledních letech zámˇerem vývojového týmu posilovat vedle již zažitých komunikaˇcníchslužeb také komunitní a spoleˇcenskévyužití IS (napˇr.Absolventskou sít’).

39 6.1. KODIFIKACE ZNACKYADOKUMENTACESTYLUISMUˇ

Barevnost byla zvolena rozdílnˇepro jednotlivá písmena. Barva písmene i odpovídá škole, na které je IS provozován, podle jejího jednotného stylu. Písmeno S má barvu spoleˇcnou všem instalacím. Svˇežíodstín zelené byl zvolen s ohledem na vlastnosti, které jsou barvˇe pˇrisuzoványa podprahovˇena ˇclovˇekap ˚usobí(ˇcásteˇcnˇepˇrezatoz [2]):

• v pˇrírodˇeje nejrozšíˇrenˇejší(jaro, r ˚ust),lidské oko je na ni velmi citlivé,

• všeobecnˇeoznaˇcujevolno, bezpeˇcí(známe ze semaforu),

• základní asociace jsou peníze, zábava a schopnost vytrvat (v lidských vlastnostech štˇedrost, ochota utrácet za zábavu, vyrovnanost, pˇrátelstvía partnerství),

• použití v marketingu je spíše nízké (vyjímeˇcnost,neobvyklost), poutavost a oblíbe- nost je ale nízká,

• není ani teplá, ani studená, je tedy vhodná ke kombinování s r ˚uznýmibarvami,

• negativními konotacemi jsou ještˇerky, jed, zlí duchové ˇcimimozemšt’ani (doporuˇcuje se snižovat konotace kombinací s jinou barvou).

6.1 Kodiﬁkace znaˇckya dokumentace stylu IS MU

Pˇresnýtvar, rozmˇery, ochraný prostor, barevnost, varianty znaˇckyˇcivzory jejího použití jsou kodiﬁkovány v graﬁckém manuálu, jehož rozpracovaný návrh je pˇrílohoutéto práce1. Jeho úˇcelemje chránit znaˇckuproti zmˇenámzavedením podmínek, za jakých má být kon- struována a užívána.

Obrázek 6.3: Náhled stránek manuálu (konstrukce znaˇckya rozkres vizitky)

1. Formát manuálu je inspirován odevzdanými pracemi student ˚uAteliéru graﬁckého designu a multimédií.

40 6.2. ZNACKAˇ VE FAVIKONEˇ

Manuál bude rozšiˇrováno další aplikace jednotného stylu, napˇr.pro merkantilní tisko- viny a použití v elektronických médiích. Nyní je rozpracována prezentaˇcníšablona, další na ˇradˇebude pravdˇepodobnˇehlaviˇckovýpapír. Znaˇckypoužívané na univerzitˇemají jednotnˇeproveden opis názvem (napˇr.jménem fakulty) ve tvaru kruhu kolem symbolu. Taková varianta je zatím pˇripravenajen jako do- plˇnková.

6.2 Znaˇckave favikonˇe

Favikona (z angl. favorite icon) je obrázek spojený s konkrétním webem, který pomáhá vizuálnˇejej identiﬁkovat. Zobrazuje se v adresním ˇrádkuwebového prohlížeˇce,v zálož- kách (tabech) a v oblíbených odkazech, nˇekdytaké nazvaných záložky (pˇrekladanglického bookmarks je v prohlížeˇcínejednotný). Rozmˇerikonky je jen 16 krát 16 bod ˚ua m ˚užetak obsáhnout jen tvarovˇea barevnˇejed- noduchý obrázek. Prohlížeˇcepodporují nˇekolikformát ˚u,nejbˇežnjšíje ICO, který dovoluje vložení nˇekolikavrstev r ˚uznéhorozlišení zároveˇn.Ty mohou být využity napˇr.pˇriumístˇení ikony na ploše operaˇcníhosystému.

Obrázek 6.4: Adresní ˇrádkyFirefoxu zobrazující favikonu IS na nˇekolikaškolách

6.3 Použití znaˇcky

Používáním se znaˇckadostává do povˇedomíveˇrejnosti,což je podmínka její správné funkce. Prezentace znaˇckyse odehrává standardními zp ˚usobyv tištˇenýchˇcielektronických médi- ích, na drobných reklamních pˇredmˇetech,na reklamních plochách v místech koncentrace vˇetšíhopoˇctulidí, pˇrikomunikacích apod. [20] V pˇrípadˇeIS MU jde pˇredevšímo použití na webu a pˇripropagaci akcí uživatelské podpory. V menší míˇreznaˇckuužívají ˇclenovévývojového týmu pˇriosobních jednáních a prezentacích, napˇr.na konferencích. V plánu jsou také netradiˇcnípoužití, jako je souˇcást automaticky promítané prezentace na frekventovaném místˇeve vstupní ˇcástifakulty.

Obrázek 6.5: Znaˇckav pozadí odkazu na 10. výroˇcíIS MU

41 Kapitola 7 Závˇer

The details are not the details. They make the design. — Charles Eames

Práce na uživatelském rozhraní se z vˇetšíˇcástiskládá z malých krok ˚u(kreslení ikon, dodržování jednotnosti, pˇremýšlenínad navigací apod.), které dohromady vytváˇrícelkový obraz systému a zásadnˇeovlivˇnujíjeho pˇrijetíuživatelem.

7.1 Zlepšování uživatelského zážitku

Myslím, že v pˇrípadˇeIS MU se mi postupnˇedaˇrízlepšováním graﬁky a zavádˇenímtechnik Webu 2.0 uživateli zpˇríjemˇnovatpráci. Jak jsem popsal v této práci, snažím se d ˚uslednˇeo:

• maximální použitelnost rozhraní, pˇredevšímo jasnou navigaci a sjednocování apli- kací (které vyvíjí pˇresdeset dalších ˇclen˚utýmu),

• atraktivnˇejšívzhled a chování rozhraní, napˇr.ikony a od ˚uvodnˇenévyužití jQuery,

• budování znaˇckyIS MU, vˇcetnˇepˇrizp˚usobenípro provoz jiným školám,

• odhadnutí možných (uživatelských) chyb a pˇripraveníodpovídajících reakcí, s vyu- žitím testování skupinami uživatelské podpory (is-technici a e-technici).

To vše pˇriplnˇenízásad pˇrístupnosti,jak je stanovují Pravidla tvorby pˇrístupnéhowebu (se- stavená pro úˇcelynovely Zákona ˇc.365/2000 Sb. o informaˇcníchsystémech veˇrejnésprávy, provedenou zákonem ˇc.81/2006 Sb.) [15] i ve smyslu jejich pˇredchozípˇrísnˇejšíverze,

7.2 Dopad jQuery na provoz a vývoj IS MU

Podle pˇredpoklad˚uzavedení knihovny jQuery (souboru jquery.js) nebylo následováno pro- vozními komplikacemi. Z analýzy provozních záznam ˚uwebserveru jednoho z aplikaˇcních stroj ˚uIS MU je možné orientaˇcnˇesumarizovat:

• poˇcetHTTP(S) dotaz ˚uvzrostl o ménˇenež 2 %, v absolutních ˇcíslech500 za hodinu (z toho tˇriˇctvrtinyšifrovanˇe),

42 7.3. DALŠÍ MOŽNÝ VÝVOJ

• datový pˇrenosgenerovaný 56 KB knihovny je s ohledem na kapacitu pˇripojeníIS zanedbatelný1.

Žádná ze stížností uživatel ˚udosud nebyla vyhodnocena jako technický problém zp ˚usobený nefunkˇcnímJavaScriptem ovlivnˇenýmjQuery. Framework zaˇcalipoužívat kromˇemˇedalší dva vývojáˇripro své aktuální úkoly (Publikace a Pošta).

7.3 Další možný vývoj

Prediction is very difﬁcult, especially of the future. — Niels Bohr

Vývoj rozhraní IS MU m ˚užekromˇeprohlubování již realizovaných úprav pokraˇcovat dalšími smˇery, z nichž nˇekteréjsou ˇcasovˇe,ﬁnanˇcnˇenebo výpoˇcetnˇeznaˇcnˇenároˇcné:

• struktura (nasazení ikon aplikaˇcníchskupin, zvýraznˇeníaktivní sekce v drobeˇccícha hlavním menu),

• zlepšení vyhledávání (vˇcetnˇefulltextu v nápovˇedˇe,ˇretˇezcíchz aplikací, s d ˚urazem na relevantnost výsledk ˚u),

• vizualizace dat (napˇr.obecný nástroj pro vykreslování graf ˚uz dat),

• strojové zpracování dat (napˇr.nˇekterétechnologie sémantického webu),

• vˇetšípodpora interakˇcnímudesignu, více prototypování a zavedení uživatelského testování.

Protože nároky uživatel ˚use stále a oprávnˇenˇezvyšují, podporuji názor Kelly Goto, autorky knihy Web ReDesign 2.0: Workﬂow that Works, která uvedla pro Digital Web Magazine [3]: „Jakmile je nový web spuštˇen,je ˇcaszaˇcíts redesignem.“

1. S ohledem na uživatele je problém složitˇejší.Je obtížné snížit datový pˇrenos,protože pˇrišifrování a autentizaci je problematické kešování i „podmínˇený“GET (tj. hlaviˇckaHTTP dotazu If-Modiﬁed-Since, kterou pro- hlížeˇcese souborem ve své vyrovnávací pamˇetimohou použít, a reakce serveru 304 Not Modiﬁed, pˇrijejichž kombinci se data nepˇrenáší).

43 Literatura

[1] Browser wars, od 24. února 2004, Dostupné z WWW: http://en.wikipedia.org/wiki/Browser_wars. 2.1

[2] Gold, T.: Podprahové vnímání barev, Zoner software, s.r.o., Dostupné z WWW: http://interval.cz/clanky/podprahove-vnimani-barev/. 6

[3] Goto, K.: Interview with Kelly Goto, 26. ledna 2005, Digital Web Magazine, Dostupné z WWW: http://www.digital-web.com/articles/kelly_goto_2/. 7.3

[4] Hickson, I.: HTML 5 (Editor’s Draft) – A vocabulary and associated APIs for HTML and XHTML, 2009, The World Wide Web Consortium (W3C), Dostupné z WWW: http://dev.w3.org/html5/spec/Overview.html. 2.2

[5] Nápovˇeda a rejstˇrík – Design, Masarykova univerzita, Dostupné z WWW: https://is.muni.cz/auth/help/jine/design. 2.5.2

[6] Garrett, J.: The Elements of User Experience – User-Centered Design for the Web, New Riders, 2003, 189, 0735712026. 2.2

[7] JavaScript, Dostupné z WWW: http://en.wikipedia.org/wiki/JavaScript, od 23. pro- since 2001. 3

[8] Krug, S.: Web design – Nenut’te uživatele pˇremýšlet, Computer Press Brno, 80-7226- 892-9.

[9] Lewis, E.: Kódujme sémanticky s mikroformáty: hResume, 10. 12. 2008, Dostupné z WWW: http://zdrojak.root.cz/clanky/kodujme-semanticky-s-mikroformaty- hresume/. 5.2.2

[10] Lloyd, I.: The Perfect 404, 16. ledna 2004, A List Apart Magazine, Dostupné z WWW: http://alistapart.com/articles/perfect404/. 2.10.2

[11] WorldWideWeb, Dostupné z WWW: http://en.wikipedia.org/wiki/WorldWideWeb, od 1. bˇrezna2003. 12

[12] Nielsen, J.: Usability engineering, 1994, Morgan Kaufmann, 9780125184069. 2.1

[13] Nielsen, J.: Top-10 Application-Design Mistakes, 19. února 2008, Dostupné z WWW: http://www.useit.com/alertbox/application-mistakes.html. 4.6

[14] Norman, D.: The Invisible Computer – Why Good Products Can Fail, the Personal Computer Is So Complex, and Information Appliances Are the Solution, 1999, The MIT Press, 9780262640411. 2.4

44 [15] Špinar, D. a Pavlíˇcek,R. a Pravidla tvorby pˇrístupnýchwebových stránek, Minister- stvo informatiky CR,ˇ v rámci projektu vˇedya výzkumu YA512006003, 2006, Dostupné z WWW: http://www.pravidla-pristupnosti.cz/. 7.1

[16] Železný, I. a Smékal, J.: Roboti a androidi – povídka Logik Joe, Nakl. Svoboda, 1988, str. 21–36. 7

[17] Ratner, J.: Human factors and Web development, 2003, Lawrence Erlbaum Associates, second edition, 0805842217. 2.3, 2.4

[18] Best Practices with Spry, 2007, Adobe Systems Incorporated, Dostupné z WWW: http://labs.adobe.com/technologies/spry/articles/best_practices/. 3.1.1

[19] First Impressions Count in Website Design, Website Optimization, LLC, Dostupné z WWW: http://www.websiteoptimization.com/speed/tweak/blink/. 2.5

[20] Švalbach, V.: Studijní materiály PV123 Základy vizuální komunikace – 11/ Znaˇcka a logotyp, jaro 2009, FI MU, Dostupné z WWW: https://is.muni.cz/auth/el/1433/jaro2009/PV123/um/. 6.3

45 Rejstˇrík accesskeys, 19 PHP, 4 Ajax, 6 progressive enhancement, 23 aplikaˇcnírámec prototype-based programming, 22 javascriptový, 22 webový, 4 Rich Internet Application, 6 RSS, 36 Cascading Style Sheets, 4, 12 Media Type, 21 semantický web, 7 cloud computing, 8 social bookmarking, 17 Content Management System, 4 tabbed browsing, 6 deep web, 5 thin client, 6 Document Object Model, 4 toolbar, 37 tooltip, 30 e-commerce, 5 experience design, 8 usability, 8 favlets, 37 Web 2.0, 6 favorite icon, 41 Web Information System, 7 folksonomie, 32 website layout, 13 wireframe, 13 graceful degradation, 23 World Wide Web, 3 graﬁcký manuál znaˇcky, 40 XMLHttpRequest, 4, 6, 22 hypertext, 5 ikony, 11, 34

JavaScript, 4 framework, 22 logotyp, 39 mashup (web application hybrid), 7 mikroformáty, 36 modal window, 32 navigace drobeˇcková, 15 mrak štítk ˚u, 32 stránkování, 30 open source, 5 perpetual beta, 8 persony, 18