CoolCzechGuide Webová aplikace !
O dokumentu
Tento dokument popisuje uživatelské rozhraní webové aplikace CoolCzechGuide. Popisuje jednotlivé komponenty, části a chování těchto prvků. Součástí dokumentu je také kompletní soupis prvků, které je nutné při designu navrhnout v rámci grafických prací, a na které je nutné pamatovat při realizaci. Dokument nepopisuje administrační rozhraní (backend) ani napojení na příbuzné databáze.
Doplňky
Nedílnou součástí jsou doprovodné wireframes (k dispozici také na adrese: http:// share.axure.com/DAYKNM), grafické návrhy a výchozí mapa stránek (https://mm.tt/352097443? t=5lplgnoK29).
1 z 62
Obsah dokumentu Obsah dokumentu
2
Celkově
5
Hlavní myšlenka
5
Layout
6
Úvodní stránka
6
Výpis
6
Detail
6
Komponenty
7
Komponenta „Město“
7
Komponenta „Doprava“
8
Komponenta „Akce”
9
Komponenta „Místo”
10
Komponenta „Místa”
11
Komponenta „Slevy“
11
Komponenta „Recenze a doporučení“
12
Komponenta „Follow up“
14
Úvodní stránka
15
Upoutávky
15
Mapa
16
Přepínání jazyků
16
Patička
18
Výpis
19 2 z 62
Podstránky
21
Chování podstránek
21
Funkce podstránek
22
Navigace
24
4 základní scénáře
24
Typy obsahu
28
Akce
28
Skupiny akcí
30
Místa
31
Skupiny míst
33
Města
34
Přepravci
35
Slevy pro studenty
36
Statický text
38
Profil uživatele
39
Registrace
39
Přihlášení
40
Plán cesty
40
Záložky
41
Nastavení
42
Nápověda
42
Odhlášení
42
Reset hesla
43
Poskytovatel
43
Technické poznámky
45 3 z 62
Wireframes
48
Grafický návrh
49
Mapa stránek
54
Obsah grafického manuálu
55
Elementy
55
Kolekce
60
Moduly
61
4 z 62
Celkově Hlavní myšlenka Co děláme
Stránka jako taková nabízí v prvé řadě informace o tom, co se dá v České republice všechno
Viewport
podniknout. Na základě těchto informací jsou návštěvníkům nabídnuty všechny relevantní
Je část prohlížeče určená pro zobrazení webové stránky. O viewportu se hovoří v případě optimalizace stránek pro určitá rozlišení. Viewport je vždy menší než rozlišení monitoru uživatele.
informace o Česku a cestování do Česka. Obsah
Stránka v několika úrovních nabízí tři základní typy informací: města, místa a akce. Tento obsah je rozšířen o obecné informace o České republice, cestování do i po Česku, o nabídce slev či pouhé inspirace k návštěvě.
Provázání informací
Jednotlivé informace jsou mezi sebou provázány na úrovni odkazů, ale také na úrovni zobrazovaných informací, kde na stránce akce se uživatel dozví i základní informace o daném městě, místě i dopravě. A to včetně užitečných informací, například kde se dobře najíst, kde se ubytovat, kde jsou jaké slevové akce apod.
!
5 z 62
Layout
Layout
Stránka má jeden základní layout zobrazující výpis jednotlivých položek a druhý speciální layout pro zobrazení detailu položky. Layout pro jednotlivé typy položek se mění jen v detailech viz část
Layout znamená grafické rozvržení tiskové nebo elektronické stránky, případně i jiné plochy.
Wireframes. Speciální layout má také úvodní stránka.
Úvodní stránka Stránka je rozdělena do 3 oblastí: obsah, navigace a patička. Části obsah a navigace jsou stále viditelné. Patička je viditelná až při odrolování obsahu. Jednotlivé části mění své proporce dle velikosti viewportu prohlížeče.
Výpis
Položka Položka je jeden záznam výpisu. V našem případě jedna akce, jedno místo či jedno město. Položkou se rozumí i skupina pokud je součástí výpisu.
Výpis vychází z layout pro úvodní stránku s tím rozdílem, že část obsahem přesahuje svojí délkou výšku viewportu, je tady rolovací a patička se nachází na závěr této části.
Detail
Rolovací obsah
Detail položky (město, místo, akce, …) je umístěn v samostatném layoutu ve vrstvě nad běžnou stránkou. Layout obsahuje pouze hlavní obsahovou část doplněnou o ovládací prvky, viz kapitola Podstránky.
6 z 62
Také skrolovací obsah, je takový obsah, který převyšuje část určenou pro zobrazení. V tomto případě je nutné zobrazit tzv. scrollbar pro možnost posunutí obsahu.
Komponenty Co jsou zač?
Komponenty jsou samostatné jednotky stránek zobrazující specifické informace na základě svého umístění ve stránce. Komponenta zobrazuje informace buď na základě vstupních parametrů nebo automaticky v kontextu dané stránky/svého umístění.
Komponenta „Město“ Obsah komponenty
Komponenta zobrazuje informace o daném městě. Má následující položky: • Název města
Zobrazuje název daného města. Název je speciálně připraven pro komponentu a je rozdílný od běžného nadpisu na detailu města. V případě, že není vyplněn, přebírá se oficiální název města.
• Počasí
Zobrazuje počasí v daném místě formou ikony a teploty. Po najetí myší na element se zobrazí předpověď na následujících 7 dní. Počasí je kešováno do aplikace pro urychlení zobrazení stránky.
• Popis
Zobrazuje krátký textový popis daného města. Popis je speciálně připraven pro komponentu a je rozdílný od běžného popisu na detailu stránky. Popis má omezenou délku.
• Odkaz na detail
Primární odkaz na stránku detailu města.
7 z 62
• Odkaz na oficiální stránku města
Sekundární odkaz na oficiální stránku města.
• Odkazy na další stránky
4 vybrané odkazy na jakékoliv stránky v rámci portálu. Stránky jsou pro každé město ručně vybírány ze seznamu předdefinovaných. Takovýto odkaz se skládá ze samotného cíle (URL) a textu odkazu.
Základní odkazy:
Kde můžu zůstat? - Odkaz směřuje na výpis míst s aktivním filtrem místo a ubytování.
Kde se mohu najíst? - Odkaz směřuje na výpis míst s aktivním filtrem místo a gastronomie.
Jak se pohybovat po městě? - Odkaz směřuje na stránku s informaci o MHD v daném městě.
Nakupování - Odkaz směřuje na výpis míst s aktivním filtrem místo a nakupování.
• Fotografie
Zobrazuje jednu vybranou fotografii přiřazenou k danému městu.
Komponenta „Doprava“ Komponenta zobrazuje výběr dopravních informací vztahujících se k dané položce. Komponenta má odlišný obsah dle zobrazené položky. Komponenta také může mít rozdílný obsah v závislosti na jednotlivých městech. Konkrétní obsah boxu je definován zvláště pro jednotlivá města odkud je přebírán do míst a akcí. Pro jednotlivé konkrétní akce či místa bude možnost upravit obsah této komponenty. Varianta Město
V této variantě se zobrazují dvě základní 8 z 62
informace: 1) Jak se do daného města dostat z různých letišť; 2) Jak se pohybovat po daném městě s odkazem na stránky MHD. Varianta Místo
V této variantě se zobrazují dvě základní informace: 1) Jak se do daného místa dostat z různých letišť; 2) Jak se do daného místa dostat pomocí MHD.
Varianta Akce
V této variantě se zobrazují dvě základní informace: 1) Jak se na danou akci dostat z různých letišť; 2) Jak se na danou akci dostat pomocí MHD.
Poskytovatelé
Součástí komponenty je seznam přepravců, kteří jsou navoleni k danému městu (místu, akci). Seznam přepravců má ve výchozím stavu omezenou výšku na cca. 300 pixelů. V případě, že je obsah delší je zobrazeno tlačítko „Zobrazit více“, které po kliknutí zobrazí kompletní seznam přímo na dané stránce.
Komponenta „Akce” Komponenta zobrazuje akce na daném místě/městě. Akce jsou zobrazeny napříč kategoriemi. Akce jsou řazeny dle hodnocení a data. Součástí komponenty mohou být také skupiny akcí. Tyto se zobrazují pouze v případě, že minimálně jedna akce v dané skupině vyhovuje níže uvedeným parametrům. Varianta Místo
Zobrazeny jsou pouze akce či skupina akcí, které se odehrávají na stejném místě, které je aktuálně zobrazeno. V případě, že se na daném místě nekonají žádné vyhovující akce, komponenta je prázdná. 9 z 62
Varianta Město
Zobrazuje pouze akce v daném městě. V případě, že se na daném městě nekonají žádné vyhovující akce, komponenta je prázdná.
Omezení
Komponentě je možné přiřadit následující omezení: • Počet akcí • Datum do - do • Kategorie • Hodnocení
Komponenta „Místo” Zobrazuje informace o konkrétním místě. Komponenta se používá na detailu akce. Místo je definováno buď ručně pomocí parametru při vkládání komponenty, nebo automaticky na základě stránky, na které se komponenta nachází. V tomto případě pak zobrazuje místo, na kterém se akce koná. Obsah komponenty
Zobrazené informace jsou především kontaktního charakteru: • Název místa
Název provozovny.
• Adresa
Adresa provozovny.
• Telefon
Kontaktní telefon pro rezervace.
10 z 62
• E-mail
Kontaktní e-mailová adresa na provozovatele místa.
• Webové stránky
Odkaz na webové stránky daného místa.
• Odkaz na mapu
Odkaz na mapovou aplikaci pomocí GPS souřadnic.
• Fotografie
Zobrazuje jednu vybranou fotografii přiřazenou k danému místu.
Komponenta „Místa” Zobrazuje přehled místa v daném městě. Počet míst a jejich výběr je řízen parametry při vkládání komponenty do stránky. Počet míst
Výchozí počet jsou 4 zobrazená místa, další místa je možné zobrazit kliknutím na tlačítko „Zobrazit další místa“. Součástí míst mohou být také Skupiny míst stejně jako je tomu v běžném výpisu.
Obsah
Ve výchozím stavu jsou zobrazena místa ze sekce Trending. Lze zvolit další možnosti například dle určité kategorie, vybrat si možnost řazení.
Komponenta „Slevy“ Zobrazuje aktuální slevy na daném místě, městě či příbuzné akci. Jednotlivé slevy jsou prezentovány jako seznam slev poskytovaných jednotlivými poskytovateli slev. Komponenta má ve výchozím stavu omezenou výšku na cca. 300 pixelů. V případě, že je obsah delší je zobrazeno tlačítko „Zobrazit více“, které po kliknutí zobrazí kompletní seznam přímo na dané stránce. 11 z 62
Komponenta „Recenze a doporučení“ Zobrazuje recenze a doporučení k akci/místu/městu. Každý přihlášený uživatel má možnost přidat komentář k dané položce. Komentář je hodnocen, zda je pro ostatní uživatele hodnotný. Komentáře jsou pak dle tohoto hodnocení řazené. Kliknutím na tlačítko „Ukázat více recenzí“ zobrazí v místě dalších 10 recenzí. Toto je možné opakovat do doby, dokud jsou nějaké další recenze. V případě, že by na poslední stránce mělo být méně než 5 recenzí včetně, jsou tyto zobrazeny na společné stránce s předposledními 10 (jinak, poslední stránka může obsahovat 10 - 15 recenzí). Obsah
Komponenta zobrazuje tři nejlépe hodnocené komentáře s parametry: • Text komentáře
Text komentáře je prostý neformátovaný text s možností více odstavců.
• Hvězdičky
Hvězdičkové hodnocení položky od autora Recenze.
• Autor
Jméno autora je získáno s uživatelova profilu. V případě nevyplněného jména se zobrazuje část e-mailu před zavináčem (@).
12 z 62
• Fotografie autora
Fotografie autora se získává z uživatelova profilu. Pokud fotografii uživatel nemá přiřazenu, tento prvek se nezobrazuje.
• Datum vložení komentáře
Formátované datum vložení komentáře. Formát se dělí do několika úrovní podle stáří komentáře. Viz část Technické poznámky - Formátování data.
• Počet hodnocení
Zobrazuje číslo/počet hodnocení daného příspěvku. V případě nulového hodnocení se mění ikona a text. Hlasovat může pouze přihlášený uživatel, v případě nepřihlášeného uživatele se zobrazí okno pro přihlášení/registraci. Vkládání recenzí
Přihlášený uživatel také může vložit recenzi. Po kliknutí na tlačítko „Vložit recenzi“ se zobrazí v daném místě formulář (viz wireframe Detail) s možností uložit vlastní recenzi k dané položce. Formulář obsahuje pouze pole pro vložení textu a hvězdičky pro celkové hodnocení. Po odeslání formuláře je uživatel informován o vložení či chybě v místě formuláře. V případě úspěchu se komentář ihned objeví jako poslední položka v aktuálně zobrazeném seznamu. Jednotlivé recenze je možné nahlásit odkazem „Označit jako nevhodné“ s ikonou vlaječky. Po kliknutí se zobrazí formulář s výběrem možností a polem pro text. Po odeslání se zobrazí děkovná hláška.
13 z 62
Komponenta „Follow up“ Komponenta je definována stránkou, na které je umístěna. Zobrazuje 2 - 4 položky příbuzné aktuálně zobrazené položce. Rozlišujeme proto tyto možné stavy komponenty: I.
Město
Komponenta zobrazuje 2 nebo 4 další města.
II.
Místo
Komponenta zobrazuje 4 další místa příbuzná místu zobrazenému. Jsou to náhodná místa, která jsou v aktuální navigaci zobrazená.
III.
Akce
Komponenta zobrazuje 4 další akce příbuzná akci zobrazené. Jsou to náhodné akce, které jsou v aktuální navigaci zobrazené.
IV.
Statická stránka
Komponenta zobrazuje odkazy na 2 stránky na stejné úrovni v hierarchii stránek, které jsou před/za aktuálně zobrazenou stránkou. V případě, že aktuálně zobrazená stránka je první, zobrazuje se na prvním místě odkaz na stránku nadřazenou. V případě, že aktuálně zobrazená stránka je na dané úrovni poslední, zobrazuje se jako druhá stránka stránka následující z vyšší úrovně.
14 z 62
Úvodní stránka Co obsahuje?
Úvodní stránka kromě všudypřítomnému menu obsahuje 4 základní části: upoutávky, mapu akcí a míst, přepínač jazyků a patičku.
100% výška
Výška upoutávka, mapy a navigace je vždy 100 % výšky viewportu prohlížeče. Jediný element skrytý pod touto úrovní je patička.
Upoutávky Upoutávky jsou ručně vybírané odkazy na obsah webu. Jsou vybírány z jednotlivých typů obsahů: místa, města, akce či konkrétních statických stránek. Každá upoutávka obsahuje: • Nadpis
Nadpis má omezenou délku a je unikátní pro úvodní stránku pro konkrétní upoutávku.
• Krátký text
Text má omezenou délku a je unikátní pro úvodní stránku pro konkrétní upoutávku.
• Odkaz
Odkaz vždy směřuje na vybranou stránku uvnitř webu.
• Fotografii
Fotografie má určité minimální rozměry. Vybraná fotografie na úvodní stránku může být odlišná od fotografií vybraného cílového odkazu.
Upoutávky odkazující na město (město, místo, akce) obsahují také informaci o městě a počasí.
15 z 62
Mapa Jak se zobrazí
Mapa se zobrazí po kliknutí na její ikonu v levé horní části stránky. Po kliknutí se upoutávky efektně odrolují ve směru do pravého dolního rohu, kde vznikne ikona pro zobrazení upoutávek. Na místě upoutávek se zobrazí mapa České republiky s vyznačenými místy a akcemi. Jednotlivé kategorie jsou odlišeny barvou či ikonou „pinu”.
Google Maps
Mapa je založena na aplikaci třetí strany (Google Maps či Seznam Mapy).
Skupiny pinů
Zobrazení počtu pinů je limitováno výpočetním výkonem přistupujících zařízení a je nutné jej omezit. V případě velkého množství pinů se více pinů na jednom místě spojí do skupiny, která je prezentována ikonou s číslem skrývajícím počet pinů v této skupině. Umístění ikony se řídí přibližným středem vzdáleností všech pinů ve skupině. Po kliknutí na tuto ikonu se zobrazí piny v této skupině, mapa přizpůsobí své zobrazení tak, aby pokryla právě tuto skupinu pinů. Příklad chování: http://www.duplosvet.cz/kde-koupit Počet limitního množství pinů seskupování bude doplněn na základě výkonnostního testu aplikace.
Přepínání jazyků Rozpoznávání
Jazyk je rozpoznáván pouze na základě několika faktorů (řazeno dle priority): • Doména • Doména odkazující stránky (například Google.cz) • Jazyk prohlížeče • Lokalita uživatele 16 z 62
Primární jazyk
Primárním jazykem je jazyk anglický. Tato mutace je zobrazena v případě selhání rozpoznávání jazyka.
Přepínač
Přepínač jazyků na úvodní stránce má dvě varianty: I.
Varianta tip.
Zobrazuje se v těchto případech: •
Liší se dva a více faktorů rozpoznávání jazyka (např. doména je rozdílná od jazyka prohlížeče)
•
II.
Nastavení
Známe-li pouze jeden faktor.
Varianta Přepínač. •
Přepínač jazyka se zobrazuje na úvodní stránce.
•
Ve výchozím stavu zobrazuje aktuálně vybraný jazyk.
•
Po kliknutí uživatelem se zobrazí nabídka dalších jazyků.
•
Po kliknutí na vybraný jazyk změněn na vybranou jazykovou mutaci.
V případě, že si přihlášený uživatel zvolí v nastavení konkrétní jazyk, je mu na všech doménách tento jazyk automaticky zobrazen.
!
17 z 62
Patička Patička je na úvodní stránce schována pod tzv. ohybem - pod úrovní viewportu prohlížeče. K jejímu zobrazení je nutné odrolování stránky pod tuto úroveň. Patička obsahuje informace o tvůrci, zadavateli a níže zobrazený prvek s informacemi o IOP, EU a MMR.
18 z 62
Výpis Od navigace Aktualizace
AJAX
Výpis jednotlivých položek je vázán na navigaci. K aktualizaci výpisu dochází při každé změně v navigaci formou AJAXového volání. V případě nefunkčnosti AJAXu po kliknutí na tlačítko „Zobrazit” v navigaci či změně úrovně navigace.
Rozměry
Jednotlivé bloky mají pevnou šířku. Dle šířky monitoru se pak upravuje počet sloupců. Minimální počet sloupců jsou dva.
Popis
Součástí každého výpisu textová informace o tom, co daný výpis zobrazuje za data a jakým způsobem jsou vybírána. Tento text musí být připraven pro každou kombinaci navigační cesty. V případě, že kombinace chybí, popis se nezobrazuje. Popis je možné skrýt pomocí odkazu „Skrýt popisy”. Zobrazení je pak možné v uživatelském nastavení či kliknutím na ikonu nápovědy nad výpisem.
Akce
Výpis akcí je řazen dle data konání. Nejdříve konané akce jsou zobrazené nahoře, poslední dole. Akce, která se koná opakovaně se zobrazuje pouze v nejbližším možném termínu s informací, že se opakuje v jiné dny. Součástí karty je název akce, datum (od-do, opakování), kategorie, město/místo a fotografie (výchozí případně naposledy vložená). Skupiny akcí jsou umístěny na každou třetí pozici (3, 6, 9, 12, …).
Místa
Výpis míst je řazen dle hodnocení, následně dle abecedy. Nejlépe hodnocená místa jsou zobrazena nahoře. 19 z 62
AJAX je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů. http://cs.wikipedia.org/ wiki/AJAX
Součástí karty je název místa, kategorie, fotografie a případný nenulový počet akcí na daném místě. Skupiny míst jsou umístěny na každou třetí pozici (3, 6, 9, 12, …). Města
Výpis měst je nahrazen výpisem vybraných míst a akcí. Místa a akce jsou namíchány dle jednotlivých hodnocení.
Město
Výpis vybraných míst a akcí. Místa a akce jsou namíchány dle jednotlivých hodnocení. Součástí výpisu je výřez mapy, kde se dané město v ČR nachází. Tato mapa nemusí být živá, může se jednat o obrázek.
Mapa
Každý výpis lze přepnout do mapového zobrazení. Podobně jako na úvodní stránce se zobrazí mapa, pouze s tím rozdílem, že veškeré piny jsou pouze místa/akce, která odpovídají výpisu.
Stránkování
Výpis má omezený počet položek v rámci jedné stránky. Stránkování je vytvořeno jako hybridní tzn. uživatel má možnost zvolit si ze seznamu jakoukoliv konkrétní stránku nebo může načítat jednotlivé položky dále v jedné stránce pod sebe (příklad http://www.alza.cz/mobilni-telefony/smartphonetelefony/18845588.htm). Důležité je zachování možnosti zpětného odkazu na konkrétní stránku, a to i v případě, že je tato stránka načtena jako součást předchozí stránky. Poznámka: Přesný počet položek na stránku bude určen po výkonnostním testování a může být odlišný pro desktop, tablet či mobilní telefon.
20 z 62
Podstránky Podstránky mají vlastní jednoduchý layout. Každá podstránka má dle tipu jinou skladbu obsahu.
Chování podstránek Stohování
Zobrazená podstránka se zobrazuje jako vrstva nad stránkou, která její zobrazení vyvolala. Tímto způsobem je možné „nad sebou“ zobrazit neomezené množství stránek. Aplikace musí být připravena na tuto možnost, aniž by došlo k problémům s výkonem prohlížeče při zobrazení naší stránky. Stránka skrytá pod aktuálně zobrazenou stránkou nebude viditelná, tudíž je možnost jejího částečného zahození.
Zavírání
Při zavření podstránky se zpětně zobrazí stránka, která zavíranou stránku vyvolala. V případě je možné jí nahrát znovu.
Zpětné odkazy
Každá podstránka má vlastní URL a je tedy linkovatelná, funkční bez AJAXu. Mezi takto zobrazované stránky se počítají všechny následující: • Detail města • Detail místa • Detail akce • Statický text / textová stránka
21 z 62
Funkce podstránek Sdílení Permalink
Každá podstránka má vlastní URL (permanentní URL, permalink) a její obsah je tedy možné sdílet na sociálních sítích, e-mailem a dalšími způsoby.
Sociální pluginy
Sdílení je možné na běžných sociálních sítích pomocí běžně dostupných pluginů těchto služeb. Sdílet je možné na Facebook, Google+, Twitter, Pinterest. V případě dalších jazykových mutacích bude možné zařadit další specifické sociální sítě.
E-mail
Odkaz na stránku je možné také poslat dalším lidem pomocí e-mailu. Návštěvník stránek vyplní email odesílatele a své jméno. Systém zasílá na tento e-mail standardní zprávu o této stránce s podpisem uživatele.
Layer
Nabídka akcí ke sdílení se objevuje po kliknutí na ikonu sdílení formou popup layeru. Po kliknutí mimo layer, se tento zavírá.
Záložky Po kliknutí na ikonu záložky je stránka přidána mezi záložky uživatele, které jsou pak dohledatelné v jeho profilu. O úspěšném provedení akce je uživatel informován „success“ hláškou nad obsahem viz WF.
22 z 62
! Itinerář Po kliknutí na ikonu itineráře je stránka přidána mezi místa uživatele, které chce navštívit. Místa jsou pak dohledatelná v jeho profilu. O úspěšném provedení akce je uživatel informován „success“ hláškou nad obsahem viz WF.
!
!
23 z 62
Navigace Jedna navigace
Hlavní navigace je soustředěna do pravé části základního layoutu a s výjimkou odkazů ve stránkách se jedná o jedinou kompletní navigaci pro pohyb ve stránkách. Navigace je částečně nezávislá od obsahu. Navigace řídí obsah. Pro každý stav navigace je přiřazen jeden typ výpisu.
Kde jsem?
Informace o zvolených položkách při procházení navigace se uživateli zobrazuje jako první text ihned pod logem. Uživatel tak vidí, kde se nahází a jaké jsou jeho předchozí volby.
AJAX
Navigace je ve své maximální funkčnosti plně AJAXová tj. vše probíhá bez kompletního přenačtení stránky. Stránky ovšem musejí fungovat i v případě nefunkčnosti JavaScriptu/AJAXu.
Scénáře
V rámci navigace je možných více scénářů průchodů mezi jednotlivými úrovněmi. Jednotlivé úrovně nejsou pevně dané a vždy reagují na základě chování uživatele. Navigace tedy musí počítat s více možnými scénáři průchodu.
Zpět
Uživatel má možnost procházet navigaci i opačným způsobem kliknutím na ikonu „zpět“ v horní části navigace. V tomto případě se zobrazí předchozí úroveň navigace - animace z pravé části. V rámci této akce se změní také obsah tak, aby korespondoval se stavem navigace.
4 základní scénáře Dále je popsáno chování navigace ve 4 základních scénářích (města, místa, akce, kalendář) a tří specifických (trending, inspirace, o ČR).
24 z 62
Města Druhá úroveň
Příklady scénářů
Zobrazí seznam dostupných měst. První úroveň navigace se skryje do podoby ikon. Města jsou seřazena dle důležitosti/priority. Tuto prioritu je možné měnit v administraci.
Města >Praha > Místa > Jídlo > Čínské restaurace
Místa > Noční život > Praha > Bary
Města > Praha > Akce > 5. březen 2013 - 10. březen 2013 > Festivaly
Města > Praha > Akce > Festivaly > Tento víkend
Třetí úroveň
Zobrazí se nabídka Co dělat v [místě]?
Další úrovně
Další úrovně se řídí dle sekce, kterou si uživatel vybere v předchozí úrovni
Obsah
Obsah stránky nabídne uživateli obecné informace o městech v ČR.
Místa Druhá úroveň
Zobrazí seznam kategorií míst. První úroveň navigace se skryje do podoby ikon. Kategorie jsou řazeny dle abecedy. V případě, že má kategorie další podkategorie, je možný proklik na další úroveň.
Třetí úroveň Poznámka Obsah
Třetí úroveň obsahuje podkategorie zvolené kategorie. Tato úroveň je poslední. Součástí druhé i třetí úrovně je filtr na město (s možností celé ČR). Obsah stránky nabídne uživateli seznam relevantních míst na základě vybrané kategorie případně města.
25 z 62
Akce Druhá kategorie
Kliknutím na název města se zobrazí seznam kategorií akcí. První úroveň navigace se skryje do podoby ikon. Kategorie jsou řazeny dle abecedy.
Třetí kategorie
Po výběru kategorie se zobrazuje výběr data viz Kalendář akcí níže. Kalendář je poslední úroveň.
Obsah
Obsah stránky nabídne uživateli seznam relevantních akcí na základě vybrané kategorie akce případně data. Výpis obsahuje buď konkrétní akce či skupinu akcí
Kalendář akcí Druhá úroveň
Zobrazuje dvě možnosti jak vybrat datum - rychlý výběr a specifický výběr data od - do. Po potvrzení jedné z voleb, je v další úrovni možné vybírat kategorie akcí podobně jako v navigaci po akcích.
Rychlý výběr
Rychlý výběr nastaví vyhledávání akcí dle času od-do na následující hodnoty: • Tento víkend - nejbližší pátek až neděle • Tento týden - od „dnes“ do „dnes + 7dní" • Příští víkend - druhý nejbližší pátek až neděle • Příští týden - nejbližší pondělí - neděle • Tento měsíc - od „dnes“ do „dnes + 30 dní“ • Příští měsíc - od „dnes + 30 dní“ do „dnes + 60 dní“
26 z 62
Inspirace Úrovně
Záložka inspirace nemá žádné další podúrovně. V tomto případě je menu zmenšené pro větší důraz na obsah.
Obsah
Obsahem stránky je výběr míst, akcí či jejich skupin. Tento výběr je ruční.
Trending Úrovně
Záložka inspirace nemá žádné další podúrovně. V tomto případě je menu zmenšené pro větší důraz na obsah.
Obsah
Obsahem stránky je mix nejnavštěvovanějších míst a akcí.
O České republice a Praktické informace Úrovně
Část navigace jejíž úrovně se řídí dle struktury stránek v administraci. Je možné více úrovní, doporučujeme maximálně jednu podúroveň.
Obsah
Obsahem stránky jsou statické stránky / šablony viz Statický text níže.
27 z 62
Typy obsahu Tato část definuje základní typy obsahu. Data mohou být ještě rozšířena. Použité komponenty nemusí být zobrazené u všech položek.
Akce Akce neboli události jsou definovány především datem konání a kategorií, do které jsou zařazeny. Podle těchto kritérií jsou primárně vyhledávané.
Data • Název
Název akce. Doporučením je mít omezenou délku textu.
• Kategorie
Kategorií může být přiřazeno více.
• Město • GPS
GPS souřadnice pro zobrazení místa na mapě.
• Adresa
Přesná adresa včetně e-mailu či telefonního čísla.
• Místo
Pokud je akce navázána kromě města také na místo.
• Doporučení
Hodnocení uživatelů formou kladné palcové metody - zobrazují se pouze kladná hodnocení uložená v rámci modulu Komentáře a doporučení.
28 z 62
• Datum od (čas od) • Datum do (čas do | nepovinné) • Fotogalerie (first image)
Fotografie nahrané k dané akci. Fotografie mají určenou minimální velikost (v případě určení akce na úvodní stránku jsou tyto rozměry jiné - vyšší). Jedna fotografie je určena jako výchozí, která se následně ukazuje ve výpisech a jako první v galerii. V případě, že není vybrána, zobrazuje se poslední nahraná fotografie.
• Perex • Line-up / Headliners
Speciální box s výraznějším formátováním určeným pro výrazné head-liners dané akce. V případě nevyužití je tento box skrytý.
• Highlights
Speciální box s výraznějším formátováním určeným pro vypíchnutí důležitých informací od ceny vstupenek pro ocenění daného místa. Box má vždy nadpis a text. V případě nevyplněného nadpisu má box jinou vizuální prezentaci. Box může být jeden či dva.
• Popis akce
Bohatě formátovaný text popisující podrobně danou akci. Může být včetně odstavců, odkazů, zvýrazněných textů, citací a případně vložených obrázků a videí.
• Odkaz na oficiální stránku akce • Odkaz na stránku s nákupem vstupenek
Funkce • Zavřít
Zavírá aktuální detail.
29 z 62
• Do záložek!
Přidá danou akci do záložek uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Přidejte do svého plánu
Přidá akci do plánu uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Sdílet s přáteli
Odkaz otevírá drobný layer s plug-iny sociálních sítí pro možnost sdílení aktuální akce / URL.
Komponenty Chování jednotlivých komponent je popsáno výše.
• Místo
Modul se zobrazuje pouze v případě, že k dané akci je přiřazeno místo z naší databáze.
• Město • Doprava • Slevy • Komentáře a doporučení • Follow up
Skupiny akcí Akce je možné řadit do ručně vybíraných skupin. Tyto skupiny jsou pak zobrazovány ve výpisu akcí na předem určené místo dle vybrané kategorie a data. Tuto skupinu je také možné vložit na úvodní stránku.
30 z 62
Data • Nadpis
Název akce. Doporučením je mít omezenou délku textu.
• Kategorie akce
Kategorií může být přiřazeno více.
• Datum od • Datum do • Fotografie • Perex • Seznam akcí
Místa Místa jsou definována především pomocí GPS, adresou a kategorií, do které jsou zařazena. Podle těchto kritérií jsou primárně vyhledávaná.
Data • Název
Název místa. Doporučením je mít omezenou délku textu.
• Kategorie
Kategorií může být přiřazeno více.
• Město
31 z 62
• GPS
GPS souřadnice pro zobrazení místa na mapě.
• Adresa
Přesná adresa včetně e-mailu či telefonního čísla.
• Doporučení
Hodnocení uživatelů formou kladné palcové metody - zobrazují se pouze kladná hodnocení uložená v rámci modulu Komentáře a doporučení.
• Fotogalerie (first image)
Fotografie nahrané k danému místu. Fotografie mají určenou minimální velikost (v případě určení akce na úvodní stránku jsou tyto rozměry jiné - vyšší). Jedna fotografie je určena jako výchozí, která se následně ukazuje ve výpisech a jako první v galerii. V případě, že není vybrána, zobrazuje se poslední nahraná fotografie.
• Perex • Highlights
Speciální box s výraznějším formátováním určeným pro vypíchnutí důležitých informací od ceny vstupenek pro ocenění daného místa. Box má vždy nadpis a text. V případě nevyplněného nadpisu má box jinou vizuální prezentaci. Box může být jeden či dva.
• Popis místa
Bohatě formátovaný text popisující podrobně danou akce. Může být včetně odstavců, odkazů, zvýrazněných textů, citací a případně vložených obrázků a videí.
• Odkaz na oficiální stránku
Funkce • Zavřít
Zavírá aktuální detail.
32 z 62
• Do záložek!
Přidá místo do záložek uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Přidejte do svého plánu
Přidá místo do plánu uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Sdílet s přáteli
Odkaz otevírá drobný layer s plug-iny sociálních sítí pro možnost sdílení místa / URL.
Komponenty Chování jednotlivých komponent je popsáno výše.
• Město • Akce • Doprava • Slevy • Komentáře a doporučení • Follow up
Skupiny míst Místa je možné řadit do ručně vybíraných skupin. Tyto skupiny jsou pak zobrazovány ve výpisu míst na předem určené místo dle vybrané kategorie a data. Tuto skupinu je také možné vložit na úvodní stránku.
33 z 62
Města Města jsou definována svým názvem, jejich řazení v seznamech je na ručním principu. Přidávání jednotlivých měst není tak časté jako u ostatního obsahu. Města obsahují sadu obecných informací a dále odkazují na akce a místa.
Data • Název
Název města. Doporučením je mít omezenou délku textu.
• Doporučení
Hodnocení uživatelů formou kladné palcové metody - zobrazují se pouze kladná hodnocení uložená v rámci modulu Komentáře a doporučení.
• Fotogalerie (first image)
Fotografie nahrané k městu. Fotografie mají určenou minimální velikost (v případě určení akce na úvodní stránku jsou tyto rozměry jiné - vyšší). Jedna fotografie je určena jako výchozí, která se následně ukazuje ve výpisech a jako první v galerii. V případě, že není vybrána, zobrazuje se poslední nahraná fotografie.
• Perex • Highlights
Speciální box s výraznějším formátováním určeným pro vypíchnutí důležitých informací. Box má vždy nadpis a text. V případě nevyplněného nadpisu má box jinou vizuální prezentaci. Box může být jeden či dva.
• Popis města
Bohatě formátovaný text popisující podrobně dané město. Může být včetně odstavců, odkazů, zvýrazněných textů, citací a případně vložených obrázků a videí.
• Odkaz na oficiální stránku
34 z 62
Funkce • Zavřít
Zavírá aktuální detail.
• Do záložek!
Přidá danou akci do záložek uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Přidejte do svého plánu
Přidá město do plánu uživatele. Pokud uživatel není přihlášen, zobrazí se nejprve vrstva s možností přihlášení. Po úspěšném přidání je krátce zobrazena informace o provedení.
• Sdílet s přáteli
Odkaz otevírá drobný layer s plug-iny sociálních sítí pro možnost sdílení města / URL.
Komponenty Chování jednotlivých komponenty je popsáno výše.
• Akce • Místa • Doprava • Komentáře a doporučení • Follow up
Přepravci Adresáře poskytují data do různých komponent a modulů. Zároveň se jedná o samostatné stránky s možností filtrování dat. Přepravci nemají detail, zobrazují se pouze formou různě detailních výpisů. 35 z 62
Data • Jméno přepravce • Popis
Textový formátovaný text.
• Ceny
Textový formátovaný text.
• Slevy
Textový formátovaný text.
• Výchozí místo
Místo v zahraničí odkud přepravce funguje. Je možné zadat dvoustupňově zemi a město.
• Cílové místo
Město v ČR kam přepravce zajíždí.
• Odkaz na oficiální stránku • Poznámky
Textový formátovaný text.
Slevy pro studenty Zobrazuje informace o poskytovatelích slev. Jedná se o subjekty, které nabízejí různé slevy pro studenty. Tyto slevy je možné uplatnit na vybraných místech či akcích. Poskytovatelé mají běžný detail s kompletní sadou informací.
Data • Název poskytovatele 36 z 62
• Popis
Textový formátovaný text.
• Slevy
Textový formátovaný text.
• Seznam míst
Výběr z míst, pro která platí dané slevy. Místa jsou vybírána z databáze míst a akcí.
• Odkaz na oficiální stránku • Poznámky
Textový formátovaný text.
Funkce • Zavřít
Zavírá aktuální detail.
• Sdílet s přáteli
Odkaz otevírá drobný layer s plug-iny sociálních sítí pro možnost sdílení aktuálního poskytovatele / URL.
Komponenty Chování jednotlivých komponent je popsáno výše.
• Akce • Místa • Follow up
37 z 62
Statický text Definice
Obsah statického textu je bohatě formátovaný obsah včetně vložených fotografií a videí. V rámci statického textu jsou připravené styly pro běžné HTML elementy, viz Obsah grafického manuálu. Součástí jednotlivých stránek mohou být výše uvedené komponenty.
Použití Cílový obsah
Statický text je použit na všech ostatních stránkách, které neodpovídají typům výše. Nástin typických stránek pro statický text: • Přehled low-costových přepravců do i po ČR (pronájem aut, spolujízda) se zdůrazněním slev pro studenty. • Slevy pro studenty.
Tipy na slevy pro studenty.
• O České republice.
Základní údaje s odkazem na Ministerstvo zahraničí, ambasády, czechtourism.com.
• Praktické informace.
Vstupní formality, měna, počasí, čas, MHD, doprava na silnicích, mobilní aplikace, virtuální prohlídky, jazyk, důležitá čísla, informační centra, elektrifikace, otevírací doby, zdravotnické služby, …
38 z 62
Profil uživatele Profil uživatele je přístupný pouze konkrétnímu uživateli. Na rozdíl od detailů jednotlivých položek a stránek jsou veškeré podstránky profilu otevírány do obsahu úvodní stránky podobně jako výpis.
Registrace Registrace uživatele je možná dvěma způsoby: Facebook
Přihlášení/registrace přes Facebook probíhá jedinou možnou cestou přes nástroje Facebooku. Uživatel kliknutím na tlačítko „Přihlásit přes Facebook“ dává pokyn pro propojení Facebookového účtu s účtem aplikace. Po Facebooku žádáme pouze základní údaje (jméno, e-mail, avatar, bydliště, věk) a možnost publikovat jménem uživatele. Stažená data se ukládají do databáze aplikace pro rychlejší přístup.
E-mail
Uživatel zadá své údaje do polí pro přihlášení (pole heslo s možností si jej zobrazit v běžné čitelné formě a znovu vrátit zpět do nečitelné). Pokud již je registrován, je přihlášen. V opačném případě je uživatel zaregistrován a přesunut na stránku pro doplnění dalších údajů: • Jméno • Nahrání fotografie • Věk • Bydliště
39 z 62
Po dokončení registrace je uživatel přihlášen a na zadaný e-mail obdrží informace o přihlášení s návodem, co může dělat dále. Přihlášený uživatel může zažádat o změnu typu uživatele na Poskytovatele, viz níže.
! Přihlášení Navigace
Základní možnost přihlášení uživatele je ve spodní části hlavní navigace buď pomocí třetí strany (FB) či pomocí e-mailové adresy. V případě chybného zadání je informován chybovou hláškou o nastalém problému a má ihned možnost se opravit. V případě úspěchu je automaticky přihlášen. Přihlášený uživatel zůstává na dané stránce, není v žádném případě nikam přesměrován.
Layer
Přihlášení je možné také formou layeru (vrstvy nad stránkou), který se vyvolává v případě, že nepřihlášený uživatel chce provést akci, která je určena pouze pro přihlášené uživatele. Vše probíhá shodným způsobem jako při přihlašování v navigaci. V případě úspěchu se v layeru zobrazí informace o úspěchu a po chvilce layer zmizí a uživatel může dokončit předchozí akci.
Plán cesty Jeden vládne Funkce
Každý uživatel si může vytvořit jeden plán cesty do České republiky. Uživatel do plánu přidává jednotlivé položky (město, místo, akci), které jsou ve výchozím stavu v plánu seřazené podle pořadí, jak byly vloženy. V již roztříděném seznamu se případné nové položky řadí nakonec. Existuje-li již položka jednou v seznamu, není podruhé přidána. Uživatel má následující možnosti:
40 z 62
• Zobrazení detailu položky. • Přesun položek nahoru/dolů pomocí drag&drop. • Odstranění položky ze seznamu. • Vymazání celého seznamu. Synchronizace
Celý plán cesty je automaticky synchronizován s aplikací.
Záložky Bookmarks Funkce
Záložky (bookmarks) jsou možnost, jak si uživatel může označit stránku a později se k ní vrátit. Položky si do záložek uživatel vkládá z jejich detailu. Ve svém profilu pak vidí seznam všech záložek, které kdy uložil. Záložky jsou tříděny dle typů obsahu na místa, města a akce. Jednotlivé seznamy jsou seřazeny podle abecedy (místa, města) nebo podle data (akce). V případě akcí jsou již proběhlé akce „pod čarou“. Uživatel má následující možnosti: • Zobrazení detailu položky. • Odstranění položky ze seznamu. • Vymazání celého seznamu.
Synchronizace
Všechny záložky jsou automaticky synchronizovány s aplikací.
41 z 62
Nastavení Uživatel má zatím omezené možnosti nastavení, může měnit následující: • Jméno • Heslo • Avatar (fotografie) • Zasílání e-mailových notifikací (včetně newsletteru) • Jazyk aplikace • Propojení s Facebook účtem
Nápověda Nápověda je sada stránek popisující jednotlivé části aplikace. Nápověda má strukturu, využívá statické stránky v rámci layoutu úvodní stránky. Obsah sekce nápověda zatím není definován.
Odhlášení Odhlášení je odkaz, který způsobí odhlášení uživatele z portálu. Uživatel je po odhlášení přesměrován na úvodní stránku. O úspěšném odhlášení je informován bleskovou zprávou.
42 z 62
Reset hesla O reset hesla požádá uživatel kliknutím na příslušný odkaz. Na další stránce je požádán o vyplnění e-mailové adresy, kterou použil při registraci. V případě úspěchu je mu na danou adresu zaslán email s dalšími pokyny. Po kliknutí na odkaz v e-mailové zprávě je uživatel vyzván pro vložení nového hesla. Toto heslo uživatel zadává do jednoho pole s možností si jej zobrazit v běžné čitelné formě a znovu vrátit zpět do nečitelné. Po odeslání formuláře je uživateli nastaveno nové heslo a je automaticky přihlášen.
Poskytovatel Uživatel má možnost zažádat o změnu typu uživatele z běžného na poskytovatele. Poskytovatel dostane možnost zasílat své návrhy na místa, akce. Žádost o změnu typu podléhá schvalovacímu procesu na straně zadavatele. Žádost
Uživatel žádá o změnu na poskytovatele odkazem v Profilu uživatele. Následně je požádán o doplnění sady údajů. Po odeslání této žádosti je přepnut do stavu čekatele.
Zpracování
Administrátor má možnost nového poskytovatele schválit či zamítnout. O změně stavu je žadatel informován pomocí e-mailu. Tento e-mail má administrátor možnost doplnit či změnit. Odmítnutý žadatel má možnost zažádat o změnu typu znovu. Aplikace si pamatuje předchozí vyplněné údaje tak, aby je uživatel v nové žádosti mohl pouze změnit.
Vkládání
Poskytovatel může do systému vkládat jednotlivé položky typu místo a akce. Po vyplnění jsou tyto položky ve stavu pro schválení administrátorem. Do schválení se tyto položky neobjevují na webu ani v mobilní aplikaci. Odmítnutou položku má možnost poskytovatel upravit a odeslat znovu ke 43 z 62
schválení. Aplikace si pamatuje předchozí vyplněné údaje tak, aby je uživatel mohl pouze změnit. O změně stavu je poskytovatel informován pomocí e-mailu. Změna
Při změně položky je tato změna automaticky publikována na web i do mobilní aplikace, pokud je již položka jednou schválena. Administrátor pouze dostává informaci o této změně a má možnost položku označit jako neschválenou. O změně stavu je poskytovatel informován pomocí e-mailu.
Výpis
Poskytovatel na svém profilu vidí všechny své vložené položky včetně jejich aktuální stavu.
44 z 62
Technické poznámky Optimalizace Aplikace je optimalizována pro různá zařízení dle jejich velikosti a zaměření. Aplikace je navržena tak, aby byla především rychlá co do načítání obsahu, tak i plynulosti používání jednotlivých jejích částí. Aplikace musí být optimalizována primárně pro tablety (Android, iOS, Windows 8) a desktopová zařízení. Veškeré funkčnosti musejí být zachovány. Při návrhu je vyžadován přístup „Progressive enhancement“ či „Mobile Up“ tj. od mobilní verze po desktopovou.
Bleskové zprávy Bleskové zprávy jsou zprávy, které generuje aplikace na základě chování uživatele. Každá stránka musí být schopná tyto zprávy zobrazovat ve svém layout. Například úvodní stránka tyto zprávy zobrazuje u horního okraje. Podobně stránka s výpisem či v profilu. Detaily stránek zobrazují tyto zprávy jako layer nad obsahem, který postupně zmizí. Bleskovou zprávu je možné také ručně zavřít kliknutím na odkaz „Zavřít“.
Cookies Pro některé země je třeba počítat se souhlasem o používání cookies. Tj. pro nového návštěvníka zobrazujeme layer s informací o nakládání s cookies. Uživatel má možnost tento layer zavřít. V tomto případě se mu již nikdy nezobrazí. Tuto informaci ukládáme do cookies a pro přihlášeného uživatele i do session a databáze.
45 z 62
Mapa Mapová aplikace pro zobrazování událostí a míst na úvodní stránce není definována. Dodavatel doporučí nejvhodnější řešení.
AJAX Většina akcí v aplikaci je voláno pomocí AJAXu. Aplikace počítá i s uživateli, kteří nemohou AJAXových volání využívat. V tomto případě vždy dochází k načtení celé stránky.
E-maily Během používání stránek jsou přihlášenému uživateli zasílány některé informace formou e-mailové zpárvy. Jsou to následující: • Informace o sdílení stránky jiným uživatelem. Součástí e-mailu je odkaz na danou stránku a jméno odesílatele. • Informace po registraci s přihlašovacím jménem a heslem. Nechybí návod co dělat dále. • Žádost o změnu hesla. Součástí e-mailu je odkaz na stránku, kde je možné si obnovit heslo • Informace o proběhlé změně hesla. Po úspěšné změně hesla je uživatel na e-mail o tomto informován. • Informace o trojím chybném přihlášení. Součástí e-mailu je čas a IP adresa uživatele, který se snažil přihlásit na portál více než 3x neúspěšně. • Follow-up e-mail je uživateli automaticky zasílán po 30 dnech od doby, kdy se uživatel nepřihlásí na portál.
URL stránek a zpětné odkazy Každá stránka má vlastní URL adresu a je dohledatelná ve vyhledávačích. V případě detailu se při přístupu na konkrétní adresu zobrazuje detail nad úvodní stránkou, která se načítá až po načtení detailu položky.
46 z 62
Formátování data Datum je formátováno v tzv. lidsky čitelném formátu: ✴
Před chvílí
✴
Před X minutami
✴
Před hodinou
✴
Před X hodinami
✴
Včera
✴
Před X dny
✴
Před týdnem
✴
Před X týdny
✴
Před měsícem
✴
Před X měsíci
✴
Před rokem
✴
Před X lety
Propojení sociálních sítí V případě, že uživatel propojí svůj účet v aplikaci s Facebookem až později, jsou jeho účty synchronizovány a nevyplněné údaje jsou převzaty z nového propojení.
! 47 z 62
Wireframes
48 z 62
Grafický návrh
49 z 62
!
50 z 62
51 z 62
52 z 62
53 z 62
Mapa stránek
! !
54 z 62
Obsah grafického manuálu Následující elementy musí být součástí grafického manuálu tak, aby je bylo možné použít na stránkách. Elementy jsou obecného charakteru a musí fungovat ve všech částech vznikajících stránek především na statických stránkách.
Elementy Grids
•
Fluid, responsive grid - flexible 640 - 1280 pixels
•
Mobile grid - flexible 320 - 640 pixels
Typography • Headings •
Levels 1 - 5
Don`t forget to correct line-spacing when wrap
• Body copy - paragraphs
Charakter size, line-height, margins between paragraphs and headings
• Lead body copy - perex, emphasised • Emphasis - strong, em • Colored emphasis (success, info, warning, error) • Abbreviations • Addresses 55 z 62
•
Standard for specific country
•
Extended by e-mails and phone numbers
• Blockquotes, Quotes • Lists - Ordered, Unordered • Descriptions aka Definition list - vertical, horizontal • Links (anchors) •
Default
•
Over
•
Visited
•
Active
•
Focus
Tables • Default (table, thead, tbody, tfoot, th, td, caption) • Vertical / Horizontal • Bordered • Over states - rows, columns, cells • Colored rows • Alternative rows - odd/even
Forms • Basic form 56 z 62
•
Fieldset (with Legend)
•
Label
•
Text input
•
Textarea input
•
Selectbox aka Dropdown (single, multiple choice)
•
Radiobutton / Radio list
•
Checkbox / Checkbox list
•
File Upload (single, multiple / complete flow)
•
Date / Datetime / Time
•
Range
•
Help texts
• Input States •
Required
•
Selected (onFocus)
•
Disabled
• Search form • Inline form • Extended forms •
Prepended and appended inputs
- e-mail - calendar 57 z 62
- phone number •
Tied buttons
•
Sizes based on grid
• Validation states •
Info
•
Success
•
Warning
•
Primary
•
Secondary
•
Tercialy
•
Default
•
Large
•
Block level
•
Default
•
Active
•
Over
Buttons • Styles
• Sizes
• States
58 z 62
•
Disabled
•
Pushed (Down)
• Tied buttons / Buttons group
Images • Default • Floated • with Caption
Icons • UI based • Vector • Social sites •
Sharing
•
Profiles
Alerts • Info
Basic information alert. Blue, info icon (i)
• Success
When some process is done. Green, checkmark.
• Warning
When there is trouble or limitations. Yellow, exclamation mark.
59 z 62
• Error
When things go really wrong. Red, exclamation mark, emphasised.
Kolekce Header Sidebar • Viz Navigace
Footer Navigation • Primary • Secondary
Pagination • Hybrid paging
Labels • Default • Success • Warning • Important
60 z 62
• Info • Inverse
Scrollbars • Vertical • Horizontal • Expandable handlers
Moduly Zahrnuje také všechny moduly uvedené v základní části dokumentu.
Image Gallery • Thumbnails
Tooltips (simple, on over) • Left • Right • Top • Bottom
Popovers (rich, on click) • Left 61 z 62
• Right • Top • Bottům
Modal windows • Default • with Caption • with Close button • with Buttons • grid based content • cookies layer
User box • Links •
Login
•
Sign up
•
Public - user is not logged
•
Private - user is logged in Rating
• States
Sidebar
62 z 62
