DSpace 5 - Mirage 2 Bc. Rostislav Novák. Obsah 1)Popis Mirage2 2)Instalace 3)Struktura 4)Provedení změn 5)Odkazy pro čerpání informací.

Prezentace na téma: "DSpace 5 - Mirage 2 Bc. Rostislav Novák. Obsah 1)Popis Mirage2 2)Instalace 3)Struktura 4)Provedení změn 5)Odkazy pro čerpání informací."— Transkript prezentace:

1 DSpace 5 - Mirage 2 Bc. Rostislav Novák

2 Obsah 1)Popis Mirage2 2)Instalace 3)Struktura 4)Provedení změn 5)Odkazy pro čerpání informací

3 Popis Mirage2

4 1)Mirage2 2)Ukázky vzhledu 3)Ukázka mobilního vzhledu 4)Proč používat Mirage2 5)Mirage2 vs Mirage1

5 Mirage2 ❏ Proč vznikl Mirage2 ❏ Založeno na Bootstrap3, SASS, … ❏ Obsahuje Javascript task runery ❏ Vývojový/produkční mód

6 Ukázka vzhledu

7 Ukázka mobilního vzhledu

8 Ukázka tabletového vzhledu

9 Proč používat Mirage2 ❏ Responzivní design ❏ Vždy aktuální technologie ❏ Snadnější úpravy ❏ Potřebná znalost k úpravám stejná jako v Mirage1

10 Mirage2 vs Mirage1 Mirage2 ❏ Vychází z Mirage1 ❏ Vždy aktuální knihovny frameworky ❏ Jiná myšlenka změn ❏ Úpravy stejné jako v Mirage1 ❏ Někdy problém s nasazením ❏ Mobilní verze Mirage1 ❏ Implicitně v DSpace ❏ Zastaralé knihovny a frameworky ❏ Úpravy trvají delší dobu než v Mirage2 ❏ Nemá mobilní verzi

11 Instalace

12 1)Jak nainstalovat Mirage2 2)Programy, které používá Mirage2 3)Možné problémy při instalaci 4)Špatná instalace Mirage2

13 Jak nainstalovat Mirage2 ❏ Mirage2 se musí nechat sestavit ❏ Volba pro sestavení s DSpace5: ❏ -Dmirage2.on=true ❏ -Dmirage2.deps.included=false ❏ Po sestavení ant update ❏ Výsledný Mirage2 najdeme ve složce témat Mirage1 ❏ Zapnout v xmlui.xconf

14 Programy, které používá Mirage2 ❏ Node ❏ Bower ❏ Grunt ❏ Ruby ❏ Compass

15 Možné problémy při instalaci ❏ Vždy po ant update se přepíše nastavení v xmlui.xconf ❏ Doporučuji sestavovat s naisntalovanými programy ❏ Sestavení musí být spuštěno pod neroot uživatelem ❏ Při špatně sestaveném Mirage2 sestavení DSpace nehodí chybu ❏ Někdy se nesestaví správně

16 Špatně nainstalován Mirage2

17 Struktura

18 Ve složce Mirage2 ❏ images <- Obrázky ❏ scripts <- Obsahuje všechny skripty Javascriptu. ❏ scripts.xml <- Obsahuje importy všech skriptů, které se mají použít. ❏ styles <- Složka se všemi *.scss soubory. ❏ vendor <- Složka potřebných souborů pro Mirage2. ❏ xsl <- Složka se všemi xsl soubory.

19 Provedení změn

20 1)Myšlenka změn 2)Doporučená cesta x Nedoporučená cesta 3)Provedení CSS změn 4)Ukázka změny Bootstrap proměnné a CSS 5)Provedení změny v Javascriptu 6)Ukázka přidání Javascriptu 7)Provedení změny XSL 8)Ukázka změny XSL

21 Myšlenka změn ❏ Měnit jen málo souborů a pokud možno pouze svoje. ❏ Možnost zapnutí si vývojového módu. ❏ Možnost vytvářet více témat najednou pomocí odlišností.

22 Doporučená/Nedoporučená cesta ❏ Měnit pouze svoje vytvořené soubory. ❏ Minimálně měnit základní soubory. ❏ Neměnit soubory jako v Mirage1. (Úprava základních souborů/přepisování priorit.)

23 Provedení CSS změn ❏ Mirage2 obsahuje v základu dvě barevné schéma. ❏ Všechny stylesheety v SASS (scss soubory). ❏ Lze použít jen klasické CSS. ❏ compass watch ❏ styles <- Složka se všemi *.scss soubory. ❏ main.scss <- Obsahuje importy všech scss souborů. ❏ _style.scss <- Soubor pro naše úpravy. ❏ main.css <- Zminimalizované všechny scss soubory.

24 Ukázka přidání/změna CSS ❏ Editace souboru _style.scss ❏ Hned vidět změny -> compass watch ❏ Je možnost i vytvoři jiné scss soubory, ale pak musí být importovány v _main.scss ❏ Ukázka...

25 Ukázka změny Bootstrap proměnné ❏ Editace souboru _bootstrap_variables.scss ❏ Hned vidět změny -> compass watch ❏ Je lepší měnit barvy (pokud to lze) přes tyto proměnné ❏ Ukázka...

26 Provedení změny Javascriptu ❏ Skript vlastní soubor ❏ Import v scripts.xml ❏ Možný problém, že se při sestavení zasekne a nezapíšou se ostatní skripty do theme.js ❏ scripts <- Obsahuje všechny skripty Javascriptu. ❏ theme.js <- Zminimalizované skripty. ❏ scripts.xml <- Obsahuje importy všech skriptů, které se mají použít.

27 Přidání skriptu ❏ Napsat skript do vlastního souboru ❏ Přidat do importu ❏ Nechat se sestavit ❏ (Nedoporučená, ale jistá cesta) Přidání rovnou do zminimalizovaného theme.js ❏ Ukázka...

28 Provedení XSL změny ❏ Jiné než v Mirage1 ❏ Krok před všemi transformacemi ❏ xsl <- Složka se všemi xsl soubory. ❏ preprocess.xsl <- Soubor pro naše úpravy. ❏ theme.xsl <- Obsahuje všechny importy xsl tranformací. ❏ Tip: Používat /DRI a ?XML

29 Ukázka změny XSL ❏ Přidání potřebných xsl příkazů do preprocess.xsl ❏ Ukázka...

30 Odkazy

31 Odkazy o Mirage2 ❏ Officiální web k Mirage2 https://atmire.com/website/?q=contributions/dspace-mirage-2 ❏ GitHub k Mirage2 https://github.com/DSpace/DSpace/tree/master/dspace-xmlui-mirage2 ❏ Wiki k Mirage2 https://wiki.duraspace.org/display/DSDOC5x/Mirage+2+Configuration+and+Custom ization ❏ Bootstrap proměnné https://github.com/twbs/bootstrap- sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

32 Děkuji za pozornost