Smlouva o dílo a licenční smlouva
Smlouva o dílo a licenční smlouva
(dále jen „smlouva“)
1. Smluvní strany
1.1. Objednatel:
Masarykova univerzita
se sídlem Žerotínovo xxx. 617/9, 601 77 Brno, Česká republika IČ: 00216224, DIČ: CZ00216224
Bankovní spojení: 00000000/0100
Zastoupená: Mgr. Xxxxxx Xxxxxxxxx, MBA, kvestorkou
Masarykova univerzita je veřejnou vysokou školou podle zákona č. 111/1998 Sb., nemá zákonnou povinnost zápisu do obchodního rejstříku, je zapsána do živnostenského rejstříku
(dále jen „objednatel“)
1.2. Zhotovitel:
Superkodéři s. r. o.
Sídlem Hněvkovského 65, 617 00 Brno Zastoupení: Xxxxxxx Xxxxxx, jednatelem IČ: 03780091
DIČ: CZ03780091
Bankovní spojení: XXXXXXXXXXXXX
Číslo účtu: XXXXXXXXXXXXXX
(dále jen „zhotovitel“)
2. Účel smlouvy
2.1. Tato smlouva je uzavírána za účelem vytvoření HTML/CSS frameworku pro webové prezentace objednatele tak, aby tento mohl být po časově neomezenou dobu využíván objednatelem pro jeho neomezené potřeby.
3. Předmět smlouvy
3.1. Na základě této smlouvy se zhotovitel zavazuje za dohodnutou úplatu a dle podmínek stanovených v této smlouvě vytvořit a předat objednateli HTML/CSS/JS framework pro webové prezentace objednatele (dále jen „dílo“).
3.2. Dílo bude zhotovitelem vytvořeno a předáno v podobě elektronické, v podobě
HTML/CSS/JS kódu realizujícího požadované komponenty webových stránek a webové stránky. Dílo bude předáno ve formě zdrojových kódů vystavením na webovém serveru zhotovitele.
3.3. Dílo bude vypracováno a předáno v rozsahu podle přílohy č. 1 a podle technické specifikace v příloze č. 2, které jsou nedílnou součástí této smlouvy.
3.4. Objednatel se zavazuje dle podmínek stanovených v této smlouvě od zhotovitele řádně provedené dílo převzít a zaplatit za ně zhotoviteli dohodnutou cenu.
4. Xxxx za dílo
4.1. Smluvní strany sjednávají jako cenu za vytvoření díla částku ve výši 201 000,- Kč bez DPH. Za udělení uživatelských práv uhradí objednatel zhotoviteli licenční jednorázový poplatek, jenž činí 40 000 Kč bez DPH. K ceně bude připočtena DPH v zákonné výši.
4.2. Dohodnutá cenu bude zhotoviteli zaplacena ve dvou etapách
- záloha ve výši 100 000 Kč bez DPH uhrazená na základě zálohové faktury vystavené zhotovitelem po podpisu smlouvy.
- doplatek ve výši 141 000 Kč bez DPH po dokončení díla uhrazený na základě vystavené faktury. Faktura bude vystavena zhotovitelem po předání a převzetí dokončeného díla objednatelem. Na faktuře bude samostatně uvedena cena za vytvoření díla a cena za licenci. Datum uskutečnění zdanitelného plnění je ke dni předání a převzetí díla.
4.3. Daňové doklady vystavené zhotovitelem budou splatné 14 dnů od jejich doručení
objednateli na jeho adresu uvedenou v záhlaví této smlouvy.
4.4. V případě prodlení se zaplacením ceny díla zaplatí objednatel zhotoviteli smluvní pokutu ve výši 0,1 % z dlužné částky za každý den prodlení.
4.5. V případě, že:
a) úhrada kupní ceny má být provedena zcela nebo zčásti bezhotovostním převodem na účet vedený poskytovatelem platebních služeb mimo tuzemsko ve smyslu § 109 odst. 2 písm. b) zákona o dani z přidané hodnoty, ve znění pozdějších předpisů (ZDPH), nebo že
b) číslo bankovního účtu prodávajícího uvedené v této smlouvě či na fakturách nebude uveřejněno způsobem umožňujícím dálkový přístup ve smyslu § 109 odst. 2 písm. c) ZDPH,
je kupující oprávněn uhradit prodávajícímu pouze tu část peněžitého závazku vyplývajícího z daňového dokladu, jež odpovídá výši základu DPH, a zbylou část pak ve smyslu § 109a ZDPH uhradit přímo správci daně. Stane-li se prodávající nespolehlivým plátcem ve smyslu § 106a ZDPH, použije se tohoto odstavce obdobně.
5. Vytvoření díla
5.1. Zhotovitel bude objednateli odevzdávat jednotlivé komponenty díla v okamžiku, kdy budou realizovány.
5.2. Zhotovitel se zavazuje pracovní verze jednotlivých komponent konzultovat s objednatelem
5.3. Objednatel se zavazuje bez zbytečného odkladu připomínkovat pracovní verze jednotlivých komponent.
5.4. Nedodržení podmínky podle odst. 5.3. objednatelem má za následek odpovídající
prodloužení termínu pro předání díla.
6. Předání a převzetí díla
6.1. Zhotovitel se zavazuje vytvořit a odevzdat dokončené dílo objednateli nejpozději do
15. 9. 2018 Za okamžik předání a převzetí a odevzdání dokončeného díla se považuje zaslání hyperlinku na stažení zdrojových souborů obsahujících schválené dílo podle článku 3 této smlouvy na e-mailovou adresu objednavatele.
6.2. Do 10 pracovních dnů po předání dokončeného díla může objednatel předat písemné připomínky k předanému dílu. Neučiní-li tak, je dílo považováno za převzaté bez připomínek.
6.3. Zhotovitel je povinen zpracovat připomínky k odevzdanému dílu do 5 pracovních dnů.
7. Licenční ujednání
7.1. Zhotovitel současně s předáním díla poskytuje objednateli výhradní licenci k užívání díla. Tato opravňuje objednatele k výhradnímu užívání díla na dobu neurčitou a v neomezeném rozsahu podle ustanovení § 12 a násl. Autorského zákona (dále jen
„licence“) včetně povinnosti strpět zásah do autorského díla či jeho zapracování do
jiného díla.
7.2. Zhotovitel je povinen se zdržet výkonu práva dílo nebo jeho část užít. Zhotovitel nesmí poskytnout licenci k dílu třetí osobě.
7.3. Oprávnění tvořící součást licence může objednatel zcela nebo zčásti poskytnout třetí osobě.
8. Odpovědnost za vady díla, záruka
8.1. Zhotovitel se zavazuje dodat objednateli plně funkční dílo. V případě problémů, které nastanou po předání díla a budou způsobeny chybou dodaného díla, se zhotovitel zavazuje chyby bezplatně v rámci záruky odstranit.
8.2. Zhotovitel poskytuje na dodané dílo záruční dobu 18 měsíců. Záruční doba počne běžet
dnem vystavení faktury dle bodu 4.3 této smlouvy.
8.3. Zhotovitel neodpovídá za případné chyby způsobené zásahem objednatele nebo třetí strany do zdrojových kódů nebo jinou manipulací se zdrojovými soubory.
8.4. Za chybu, na kterou se vztahuje záruka, se považuje pouze taková chyba, kdy problém není vyvolán neodbornou manipulací, či chybou software nebo hardware dodaného třetími osobami. Záruka se nevztahuje na chyby díla způsobené neodvratitelnými událostmi a vyšší mocí. Za chybu se rovněž nepovažuje odlišné zobrazení webové stránky v prohlížeči, který byl vydán po předání díla.
8.5. Zhotovitel se zavazuje vynaložit veškeré úsilí při řešení možných chyb v dodaném díle. Termín dokončení záruční opravy bude konzultován s kontaktní osobou objednatele.
8.6. V případě vady díla zjištěné v záruční době má objednatel právo požadovat a zhotovitel povinnost bezplatně zahájit práce na odstranění závady nejpozději do 2 pracovních dní po prokazatelném ohlášení závady zhotoviteli a ve stejné lhůtě informovat objednatele o přibližné časové náročnosti pro dokončení těchto úprav.
8.7. Zhotovitel není odpovědný za obsah prezentovaných dat, ani za správnost dat co se týká
autorského a trestního práva.
9. Sankční ujednání
9.1. V případě prodlení zhotovitele s termíny plnění stanovenými v příloze 3 této smlouvy je objednatel oprávněn vyúčtovat zhotoviteli smluvní pokutu ve výši 0,1 % z ceny díla za každý i započatý den prodlení zhotovitele.
9.2. V případě prodlení zhotovitele s termínem odstranění vady či nedodělku díla je objednatel oprávněn vyúčtovat zhotoviteli smluvní pokutu ve výši 0,1 % z ceny díla za každý i započatý den prodlení zhotovitele.
9.3. Nárokem na uplatnění smluvních pokut nezaniká objednateli právo na náhradu škody způsobené porušením povinností zhotovitele. Smluvní pokuty se platí nezávisle na tom, zda a v jaké výši vznikne v souvislosti s prodlením v plnění závazků poskytovatele škoda. Náhradu vzniklé škody je objednatel oprávněn vymáhat samostatně.
10. Odstoupení od smlouvy
10.1. V případě podstatného porušení závazků dle této smlouvy ze strany zhotovitele je objednatel oprávněn od smlouvy odstoupit. V případě podstatného porušení závazků dle této smlouvy ze strany objednatele je zhotovitel oprávněn od smlouvy odstoupit.
11. Závěrečná ujednání smluvních stran
11.1. Tato smlouva se řídí právem České republiky. Smluvní strany se dohodly, že veškeré spory z této smlouvy bude řešit příslušný soud v Brně, Česká republika.
11.2. Xxxxxx v této smlouvě neupravené se řídí zejména zákonem č. 89/ 2012 Sb., občanský zákoník, v platném a účinném znění, zejména ustanoveními § 1724 a násl., případně § 2586 a násl. a případně ostatními zákony, které jsou součástí právního řádu České republiky.
11.3. Změny a doplnění této smlouvy je možné provádět pouze písemnými, oběma stranami odsouhlaseným, vzestupně číslovanými dodatky. Tato smlouva nahrazuje veškeré předchozí písemné i ústní dohody a ujednání vztahující se k předmětu smlouvy.
11.4. Tato smlouva je sepsána ve třech vyhotoveních s platností originálu, z nichž jedno
vyhotovení obdrží zhotovitel a dvě vyhotovení objednatel.
11.5. Smluvní strany prohlašují, že si smlouvu řádně přečetly, jejímu obsahu porozuměly a na důkaz toho, že smlouva je projevem jejich pravé a svobodné vůle připojují své podpisy.
Přílohy
Příloha 1: Přehled komponent a wireframů webových stránek pro zpracování kódu návrhu
Příloha 2: Technická specifikace kódu
V Brně dne 05.09.2018 V Brně dne 06.09.2018
za objednatele za zhotovitele
……………………………… ………………………………
Masarykova univerzita Superkodéři s.r.o.
Xxx. Xxxxx Xxxxxxxx, MBA Xxxxx Xxxx
kvestor Jednatel
Příloha 1 – seznam komponent a stránek
(samostatný dokument)
Příloha 2 – technická specifikace kódu
(samostatný dokument)
Příloha 1: přehled prvků a stránek pro zpracování kódu
Základní pravidla
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/XXX0X0XXXXX#/xxxxxxx
• Specifikace zvolených fontů a řezů
• Specifikace, které fonty/řezy se používají pro který typ obsahu
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/X0X0X0XXXX0#/xxxxxxx
• Definice všech používaných barev (primární, sekundární, barvy pozadí), povolených kombinací vč. doplňkových barev (odstíny šedé, černá, bílá, základní barvy – modrá, zelená, červená, …)
• Povolené kombinace popředí a pozadí pro text (zároveň definuje možné kombinace barev tlačítek a dalších prvků a v nich použitých textů nebo ikon)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/0XX0X0XXXXX#/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/XXX0X0XXXXX#/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/X0X0X0XXX0X#/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Návrh typografické hierarchie a toku textu
• Specifikace prvků H1 – H6
• Specifikace běžného a zvětšeného textu samostatného a v okolním textu
• Specifikace zvýrazněného textu samostatného a v okolním textu
• Specifikace toku textu – pozicování prvků, vzdálenosti mezi prvky, výšky řádků, včetně ukázky začlenění jiných prvků do toku textu
• Seznam odrážkový (neřazený)
o 4 úrovně
o Default odrážky
o Ikonky místo odrážek
• Seznam číslovaný
o Zarovnání čísel doleva
o Zarovnání čísel doprava (v současné stavebnici není)
• Tabulky
o Hlavička, zápatí, alternující řádky, se všemi čarami/jen horizontální čáry
o Kondenzovaná tabulka např. pro úřední hodiny
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ. A CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• 12 sloupců
• Přesná definice gridu pro všechny viewporty, definice shodná se současným stavem viz odkaz
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ. A CHYBA! NENALEZEN ZDROJ ODKAZŮ.
Přehled prvků
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxxx.xxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/XXX0XXXXXXX#/xxxxxxx
• Label – textový – nadpisy polí, + grafický (varianty Informace, Výstraha, Chyba, Úspěch), ke všem
velikostem H1 - H6
• Fieldset
• Textové pole jedno/víceřádkové, rozbalovací našeptávač (pro vyhledávací pole)
• Textové pole s popiskem uvnitř (který po kliknutí zmizí ~ placeholder)
• Rozbalovací pole (dtto)
• Checkbox, radiobutton (dtto, označený/neoznačený)
• Označení povinných položek formuláře
• Popis u nesprávně vyplněného pole
• Vysvětlivka k poli (co do něj vyplnit apod.) – v současné stavebnici není
• Wizard progress bar - např. postup objednávky v e-shopech Košík > Přihlášení > Adresa >
Viz xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxxx.xxxx, xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxx.xxxx, xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx-xxx.xxxx (ve spodní části)
• Pro všechny aktivní prvky varianty bez focus, focus, u polí pro zadávání údajů navíc varianty správně vyplněné, nesprávně vyplněné, zakázané)
1.2.2 Tlačítka
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Barevné varianty podle definovaných barev
• Definice pro tvar, velikost, chování na hover, bez focus, focus, zakázané
• Varianta pro světlé/tmavé pozadí
• Varianta pro celou šířku
• Zarovnání tlačítek v řádku vedle sebe left/center/right
• Varianta s rozbalovací nabídkou
o rozbalování doprava/doleva/nahoru/dolů – opět všechny stavy
• Tlačítka s ikonkami i varianta jen ikonky bez popisu
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• V současnosti využit Font awesome
• Možno změnit, ale nutno případně zdůvodnit změnu – změna by byla komplikovanější na
implementaci
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/XXX0XXX0XXX#/xxxxxxx
• Specifikace textových odkazů umístěných v textu i u všech komponent (nenavštívený, navštívený, hover, neaktivní)
• Podtržené/nepodtržené
• S ikonkou
• Specifikace odkazů z nadpisů
• S indikací externího odkazu
• S indikací obsahu typu DOC, PDF, video apod. (odkazy na soubory)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Specifikace stránkovací lišty ve všech současných variantách
1.2.6 Lišta pro odkazy ke sdílení článku
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Obsahující max. 5 prvků: FB, twitter, LinkedIn, e-mail, G+. Statický (všechny sítě zobrazené), rozbalovací
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxx.xxxx
• Blok jednotlivých informací, např. autor a datum článku apod.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Bloček pro graficky zobrazené kalendářní datum
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• S popisem/bez popisu
• Celá šířka stránky/část šířky stránky podle gridu
• Obtékání s textem
• Varianta s videem
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Není zatím nikde na webech implementováno
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Grafická definice scrollbaru jiného, nežli default prohlížeče
• Využito např. na xxxxx://xxx.xxxx.xx/xxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxxxxx.xxxx
• Vyskakovací dialogové okénko pro
o Obrázky jednotlivé
o Obrázky ve fotogalerii
o Video
o HTML obsah (v současné stavebnici není implementováno)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-xxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Návrh sloupcového, koláčového a spojnicového grafu
• Všechny velkosti gridu
• Není zatím nikde na webech implementováno
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxx-xxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Není zatím nikde na webech implementováno
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxxxx-xxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxx-x-xxxxxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-x-xxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Kromě fakultních barev také dodatečné obecné barvy (šedé odstíny, černá, bílá s okrajem)
• V redakčním systému nastavitelné pozadí pro řádky a buňky gridu
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ. A CHYBA! NENALEZEN ZDROJ ODKAZŮ.
1.2.21 Odstavec zdrojového kódu
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx-xxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ. A CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Kromě současných podob je požadavek i na zobrazení prvků carouselu jako herobox (ale to je věcí implementace)
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxx.xxxx.xx/xxxx xxxxx://xxx.xxxx.xx/xxxx/xxxxx-0 xxxxx://xxx.xxxx.xx/xxxx/xxxxxx-000 xxxxx://xxx.xxxx.xx/xxxx/xxxxxxxxxx-000000 xxxxx://xxx.xxxx.xx/xxxx/xxxxxxxxxxx-xxxxxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/XXX0XX0XX0X#/xxxxxxx
u varianty vizitky přes celou šířku gridu navíc navrhnout variantu s fotografií s poměrem stran 45:35 vpravo. Bude použito pro vizitky pracovišť s fotkou.
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• V rozkliknuté galerii máme stížnost na to, že při změně šířky fotky se šipky posunou a fotka se zavře – je to částečně věc implementace, ale pokud bude v grafickém návrhu i detail rozkliknutého obrázku, bylo by dobré na to myslet; viz xxxxx://xxx.xxxx.xxxx.xx/x- nas/fotogalerie/1737-zahajeni-topsec, překliknutí mezi 9. a 10. fotkou
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Využívá zobrazení metainformací podle 1.2.7
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Využívá zobrazení data podle 1.2.8
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxx-xxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Na pozadí využity barvy fakult + doplňkové barvy (šedé atd.)
• Velmi komplexní komponenta se zásadním problémem změny poměru stran obrázku při responzivním zmenšování. Viz např. xxxxx://xxx.xxxx.xx/xxxxxx/xxxxxxxx-xxxxxx. Problém je způsoben především tím, že výška obrázku je závislá na výšce textu, a ta se při změně velikosti viewportu mění, viz např. xxxxx://xxxx.xx/xx/00x000. Dále je pak problém přepnutí tablet/mobil, kdy obrázek dostane pevnou výšku bez ohledu na tu původní. Nebylo by asi dobré úplně měnit rozložení heroboxu, ale pokud nebude existovat grafické řešení, musíme se na to zaměřit při implementaci nové stavebnice a vyřešit problém nějakými technickými prostředky.
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx-xxxxx.xxxx
• V současnosti reálně využívána jiná verze, ale potřeba také navrhnout
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxx-xxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Pozor na variantu pod záhlavím webu, která v dokumentaci není vidět, viz
xxxxx://xxx.xxxx.xx/xxxxxx nebo xxxx://xxxxxxx.xxxx.xx/
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxx-xxxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Reálně není zatím využito
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
1.2.36 Alternativní grafický modul
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxxxx-xxxxxxxx-xxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Viz např. xxxxx://xxx.xxxx.xx/xxxxxx/xxxxxxxxx
1.2.38 Zvýrazněný box s nadpisem
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxx-xxx-x-xxxxxxxx.xxxx
• Není využito a bez dráčků asi nebude dávat komponenta smysl – je tedy k diskusi
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxx-xxxxxxxxxx.xxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxx-xxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Není využito ani implementováno, ale může v budoucnu být potřeba
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxxxx-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/xxxxx/0XX0XXXXXXX#/xxxxxxx MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxxx-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxxx-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Reálné použití např. xxxxx://xxx.xxxx.xx/xxxxxxxxxx-x-xxxxxxxxxxx-xxxxx/00000-xxxxxxxxxxx nebo xxxxx://xxx.xxxx.xx/xxxxxxxx
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ. (POUZE JEDNODUCHÉ NASTAVENÍ)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx.xxxx xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Reálné využití např. xxxxx://xxx.xxxx.xx/xxxxxxxxxx-x-xxxxxxxxxxx-xxxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-00-xxxxxxxx-xxxxxxxxxx.xxxx xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-00-xxxxxxxx-xxxxxxxxxx.xxxx xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-00-xxxxxxxx-xxxxxxxxxx.xxxx xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-00-xxxxxxxx-xxxxxxxxxx.xxxx xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-00-xxxxxxxx-xxxxxxxxxx.xxxx
xxxxx://xxxxxxxx.xxxxxxxxxxx.xxx/x/xxxx#/xxxxxxx/00000000/000000000/xxxxxxx
• Reálně pak použita i varianta s 01 s menu zarovnaným vpravo např. xxxx://xxxxxxx.xxx.xxxx.xx/
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx-xxxxx.xxxx
• Při zascrollování nahoru se hlavička objeví ve zmenšené velikosti
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx-xxxxxxxxx.xxxx
• V odůvodněných případech i kombinace se standardní hlavičkou v případě, že web má vlastní logo, viz např. xxxx://xxx.xxxxx.xxx/ (toto je specifický případ i s vlastní barevností)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxxx-xxxx.xxxx
• Speciální varianta pro dvojjazyčný web (v tom případě se nezobrazuje dropdown, ale pouze druhý jazyk)
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxx-xxxxxxxxxx.xxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/x-00-00-xxxxxxx-xxxxxxxxx.xxxx
xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxxx/xxx/ xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/x/xxx/xxx/
• Zvolit prvky, které budou barevně odlišné
a přiblížená o jeden krok.
Zobrazují se budovy univerzity (aktuálně modře orámované), vybrané budovy/areály se značkou pozice a textovým popiskem. Potřebujeme nadefinovat
- Označení bodu zájmu (symbol, velikost, barva)
- Popisek samotný nebo u bodu zájmu: umístění, font, barvu, velikost a případně jiný způsob formátování (v současné době použito bílé ohraničení písma)
- označení budov orámováním, příp. výplní (všechny neaktivní – nelze kliknout)
Po přiblížení mapy o 2 kroky oproti předchozímu bodu
- Označení univerzitních budov, na které nelze kliknout (orámováním/výplní)
- Označení univerzitních budov, na které lze kliknout (orámováním/výplní)
- Font, barvu, velikost a případně jiný způsob formátování názvu budovy/areálu
- Označení aktivní (vybrané) budovy (orámováním/výplní)
1.5.3 Přiblížená mapa 2
- Font, barvu, velikost a případně jiný způsob formátování názvu aktivní/vybrané budovy/areálu Tytéž prvky (velikosti písma, tloušťky čar) při přiblížení o 1-2-3 kroky
Po přiblížení mapy o další 4 kroky oproti předchozímu bodu
- Označení univerzitních budov, na které nelze kliknout (orámováním/výplní)
- Označení univerzitních budov, na které lze kliknout
o Obrysy a výplň místností
o Výplň koridorů/chodeb
- Font, barvu, velikost a případně jiný způsob formátování názvu budovy/areálu
- Označení aktivní (vybrané) budovy (orámováním/výplní)
o Obrysy a výplň místností
o Výplň koridorů/chodeb
o Font, barvu, velikost a případně jiný způsob formátování názvů nebo čísel místností
o Označení vybrané místnosti (orámování/výplň) a text Tytéž prvky (velikosti písma, tloušťky čar) při přiblížení o 1-2-3 kroky
Dále prvek pro výběr podlaží u aktivní budovy
- Výběr podlaží - název budovy, „Podlaží:“, dropdown se seznamem podlaží
- Nástroj pro zoomování (+/-)
- Zobrazování informace ve spodní části mapy
xxxxx://xxx.xxxx.xx/xxxx/00000-xxxxxxx-xxx
xxxxx://xxx.xxxx.xx/x-xxxxxxxxxx/xxxxxxx-x-xxxxxxxxxx
xxxxx://xxx.xxxx.xx/x-xxxxxxxxxx/xxxxxxx-x-xxxxxxxxxx/xxxxxxxx-xxxxxxx - zde použít komponentu
„vizitka“ s fotografií vpravo
xxxxx://xxx.xxxx.xx/xxxxxxxx/xxxxxxxxxx-x-xxxxxxxxxxx-xxxxxxx
- Ve všech fakultních barvách xxxxx://xxxxx.xxxxxx.xxx/x/0X0XxXX0xX00xXXXxXX0XX0xxXX0/x/0X0XxXX0xX00xXXX0XXxxX0x0X0X/xx it
- xxxxx://xxx.xxxx.xx/xxxxxxxxxx-x-xxxxxxxxxxx-xxxxx/00000-xxxxxxxxxxx
o Bude připraveno už pro skici, zde jen pro posouzení finálního stavu xxxxx://0xxx00.xxxxxxx.xxx/#xx0&xxxxxxxxxx_0_0x
xxxxx://xxx.xxxx.xx/x-xxxxxxxxxx
Stránka Jednotného přihlášení MU
xxxx://xxxxxxxxxx0.xxxx.xx/xxxxxx/xxx-xxxxx/xxxxx.xxxx xxxx://xxxxxxxxxx0.xxxx.xx/xxxxxx/xxx-xxxxx/xxxxx-xxxxxxxxx.xxxx
Tyto stránky není nutné navrhovat v nové grafice. Jsou uvedeny jako příklad využití současných komponent až na hranici jejich možností. Při změně grafické podoby a chování komponent by se mohly rozpadnout, nebo přestat být použitelné a je třeba to ohlídat.
U těchto stránek není nezbytný zcela automatický převod do nového vizuálu.
• Web s vlastní barevností
• Web bez záhlaví
• Web bez grafiky
• Hojně využíváno barevné pozadí bloků
English Academic Foundation Course
• Single page
xxxx://xxxxx-xxxxxxxxxx.xxxx.xxxx.xx/xxxxxxxxxx
• Znásilnění heroboxu na vstupní stránce
• Využití textového pole k vytvoření rozcestníku s ikonkami
• Možná navrhnout vhodnější komponentu?
• Extenzivní využití možností heroboxu
Přehled komponent pro newslettery
Základní pravidla
• Využití fontů široce dostupných na všech platformách – nelze využít stažené fonty. Aktuálně
použito Arial, Helvetica, sans-serif pro body a Tahoma, Verdana, sans-serif pro nadpisy
• Definice barev pozadí/popředí a kombinací vycházející z webových barev
• Dvousloupcový grid
Přehled prvků
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (ohraničené bloky obsahu)
• S pozadím/bez pozadí
• Se štítkem/bez (v ukázce např. „VZDĚLÁVÁNÍ“)
• S fotogalerií/bez (např. xxxx://xxx.xxxx.xx/xxxxxxxx/xxxxxxxxxx-xxxxxxx/000000 článek
„Univerzita přes léto žila letními školami“)
• S call-to-action tlačítky/bez
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (bloky pod nadpisem „Blížící se zajímavé
akce“)
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (např. „Krátce ze života univerzity“ či „Blížící
se zajímavé akce“)
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (blok pod nadpisem „Krátce ze života
univerzity“)
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
• Text volně uvnitř newsletteru
• Např. xxxx://xxx.xxxx.xx/xxxxxxxx/xxxxxxxxxx-xxxxxxx/000000 dole „Další zaměstnanecký newsletter vyjde 17. září…“
MOŽNOSTI NASTAVENÍ V REDAKČNÍM SYSTÉMU: CHYBA! NENALEZEN ZDROJ ODKAZŮ.
Hlavička/Patička
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (nahoře)
• Blok odkazů a metainformací
• Nadpis a logo newsletteru
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx (dole)
• Kontakty, odkazy, sociální sítě, logo MU
xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxxx xxxx://xxxxxxxxxx-xxxx0000.xxxxxxxxxxx.xx/xxxxxxxxxx.xxx?xxxxxxxxx
• Zvolit prvky, které budou barevně odlišné
Příloha 2 - technická specifikace kódu
⇨ Pro vytvoření nového kódu je možné využít v libovolném rozsahu kód současného frameworku, viz xxxxx://xxxxxxx.xxxx.xx/xxxxxxx/xxx/, dostupný na GitHub
⇨ Kód musí být kompatibilní s kódem současného frameworku na úrovni využití frameworku na webech, a to alespoň následujícím způsobem:
o Pro komponenty, u nichž proběhl pouze grafický facelift se zachováním všech variant vzhledu:
▪ Zachovat strukturu HTML i názvy CSS tříd.
o Pro komponenty, u nichž proběhla změna grafiky vyžadující odlišnou parametrizaci:
▪ Zachovat strukturu HTML i názvy CSS tříd tam, kde komponenta zůstala stejná; pro nové vlastnosti zachovat logiku pojmenování CSS tříd.
o Nové komponenty:
▪ Zachovat logiku pojmenovávání CSS tříd.
o Zachovat drobné nuance v parametrizaci, které nemusejí být reflektovány v novém grafickém návrhu – např. SK mini framework, možnosti zarovnávání gridu atd.
⇨ V zadání nejsou většinou zmíněny technické detaily či rozváděny všechny aspekty tvorby front-end frameworku. Tam, kde je ponechán prostor pro volnost, se počítá s využitím
běžných state-of-the-art postupů.
⇨ Není nutná 100% shoda ve všech detailech ve všech prohlížečích, v níže uvedených prohlížečích musí framework fungovat téměř shodně a bez vizuálních problémů.
⇨ Framework musí být plně funkční v níže uvedených prohlížečích:
o IE v11,
o Edge,
o Firefox,
o Chrome vč. mobilní verze,
o Safari vč. mobilní verze.
⇨ U všech prohlížečů se pak jedná o poslední stable verze dostupné k datu podpisu smlouvy.
⇨ Atomic Design
⇨ Modulární
o Příprava do budoucna na optimalizaci načítání landing stránek.
o Redakční systém předem ví, které prvky na dané stránce jsou, může tedy již ve chvíli výpisu stránky ovlivnit, který kód si má uživatel stáhnout.
⇨ Grid postaven na vlastním řešení dodavatele, založeném na inline blocích, nikoliv na floatování.
⇨ Struktura HTML kódu jednotlivých komponent musí být co nejjednodušší a využívat zanořené div a span elementy jen tehdy, pokud nelze jinak dosáhnout správného zobrazení v prohlížečích.
⇨ Struktura kódu musí odpovídat sémantice obsahu a umožňovat tak přirozenou anotaci HTML
elementů pomocí schématu xxxxx://xxxxxx.xxx/. Toto se bude týkat zejména stylů pro automatické výpisy univerzitních dat (seznamy projektů, publikací atd.).
⇨ Pro podporu uživatelů s postižením je třeba dodržovat specifikace předepsané směrnicí WCAG 2.0.
⇨ CSS definice musejí být napsány v preprocesoru SCSS a celý zdrojový balík bude součástí dodávky.
⇨ SCSS kód musí mít strukturu rozdělenou dle následující definice:
o každá komponenta v samostatné lokaci,
o k ní konfigurace s nastavením SCSS proměnných (barvy atd.).
⇨ JavaScriptová část může být v čistém JS ES5, nebo v transpilovaných jazycích typu Coffeescript apod.
⇨ V případě využití existující báze kódu bude proveden upgrade všech použitých knihoven na poslední verze.
⇨ Atomický design
o Veškeré komponenty frameworku budou dodržovat taxonomii, ve které je každá komponenta buďto samostatně definována, nebo se skládá z více jednodušších komponent.
o Do této taxonomie se počítají i meta-komponenty, jako barvy či typografie.
⇨ Definice a dokumentace každé z komponent s příkladem použití bude součástí produktové dokumentace.
⇨ Přehled všech komponent bude v dynamicky generovaném HTML
⇨ Generování HTML s přehledem komponent bude založeno na principu living style guide, tedy bude probíhat automaticky z dokumentace přímo vytvářené zároveň s jednotlivými
komponentami.
⇨ Součástí dodávky bude specifikace principů tvorby living style guide (syntaxe textu, syntaxe kódu – vytváření vazeb mezi komponentami, control flow atd.) a jeho implementace.