DSpace VSB-TUO http://www.dspace.vsb.cz þÿ P r i n c i p y v d e c k é k o m u n i k a c e / P r i n c i p l e s o þÿ f sd csi ep na tci e f i c 5 c( ow mo mr kus nh ioc p a) t, i o1n 4. 4. 2 0 1 5, V` B - T U O Mirage 2 2015-04-16T10:51:43Z http://hdl.handle.net/10084/106704 Downloaded from DSpace VSB-TUO
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í
Popis Mirage2
Popis Mirage2 1)Mirage2 2)Ukázky vzhledu 3)Ukázka mobilního vzhledu 4)Proč používat Mirage2 5)Mirage2 vs Mirage1
Mirage2 Proč vznikl Mirage2 Založeno na Bootstrap3, SASS, Obsahuje Javascript task runery Vývojový/produkční mód
Ukázka vzhledu
Ukázka mobilního vzhledu
Ukázka tabletového vzhledu
Proč používat Mirage2 Responzivní design Vždy aktuální technologie Snadnější úpravy Potřebná znalost k úpravám stejná jako v Mirage1
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
Instalace
Instalace 1) Jak nainstalovat Mirage2 2) Programy, které používá Mirage2 3) Možné problémy při instalaci 4) Špatná instalace Mirage2
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
Node Bower Grunt Ruby Compass Programy, které používá Mirage2
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ě
Špatně nainstalován Mirage2
Struktura
Struktura 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.
Provedení změn
Provedení změn 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
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í.
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.)
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.
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...
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...
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.
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...
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
Ukázka změny XSL Přidání potřebných xsl příkazů do preprocess.xsl Ukázka...
Odkazy
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/bootstrapsass/blob/master/assets/stylesheets/bootstrap/_variables.scss
Děkuji za pozornost