Podklady pro soutěž Microsite

Prostředí WYSIWYGu Styly Šablony Dokumenty

Prostředí ve WYSIWYGu

Z hlediska výše uvedeného obrázku je plný výčet funkcí WYSIWYGu zleva:

1. tučné (ukázka)
2. kurzíva (ukázka)
3. podrtžené (ukázka - není odkaz)
4. přeškrtnuté (ukázka)
5. citace
6. zarovnat vlevo
7. zarovnat na střed
8. zarovnat vpravo
9. zarovnat do bloku
10. zmenšit odsazení
11. zvětšit odsazení
12. výběr z dostupných stylů (odstavec + nadpisy 1 – 3)
13. formáty (výběr z dostupného)
14. vložit šablonu (výčet dostupný v novém dialogu s náhledem)
    
    
    

    Ukázka dialogu pro tlačítko "vložit šablonu"

15. pevná mezera
16. tabulka
    
    

    Ukázka prostředí pro možnost "tabulka"

    

    Popis obrázku

    
    

    Náhled editace vybrané tabulky 

17. odrážky
    • odrážka první úrovně
      • odrážka druhé úrovně
18. číslování
    
    
    

    Ukázka možnost pro volbu "číslování"

    1. malá písmena
       1. řecká písmena
          1. malé římské číslice
             1. velká písmena
                1. římské číslice
19. vložit obrázek (možnosti nahrát/vybrat obrázek a odkazovat na jeho adresu relativně nebo absolutně)
    
    
    

    Ukázka prostředí pro "vložit obrázek" - první záložka 

    
    

    Ukázka prostředí pro "vložit obrázek" - druhá záložka

20. zpět (pro akce v editoru)
21. znovu (pro akce v editoru)
22. vložit/upravit odkaz
    
    
    

    Ukázka prostředí pro "vložit / upravit odkaz " - první záložka

    

    Ukázka prostředí pro "vložit / upravit odkaz " - druhá záložka

    
    

    Ukázka prostředí pro "vložit / upravit odkaz " - třetí záložka

23. odstranit odkaz (z odkazu udělá stalovaný text, který v případě dalších formátů zůstane formátován)
24. kotva (vkládá kotvy viditelné ve WYSIWYG editoru, kde v dialogu se nastavuje ID a následně v rámci stránky stačí odkazovat pomocí "#id" v odkazu)
    
    
    

    Ukázka dialogu a chování pro tlačítko "kotva" 

25. vymazat formátování (pro vybraný text)
26. vodovorvná čára (tag <hr>, pro všechny uživatele a zejména pro ty, kteří nemají přístup do zdrojového kódu)
    

    ---

27. vložit HTML (v dialogovém okně je pole pro dlouhý text pro vkládané HTML, které se následně vkládá/překládá do editoru) 
28. zdrojový kód
    
    
    

    Náhled dialogu pro zobrazení editoru ve zdrojovém kódu

29. na celou obrazovku (WYSIWYG se přizpůsobí celé obrazovce)

WYSIWYG - STYLY (nadpis 1)

Představujeme 3 úrovně nadpisů dostupné v editoru.

WYSIWYG - nadpis 2

WYSIWYG - napis 3

V rámci výše uvedených nadpisů je zobrazeno stylování nadpisů.

 

Formáty

tlačítko malé

tlačítko střední

tlačítko velké

nálepka

Barvy

demonstránovo je obarvení základního textu:

• barva FF
• barva FIM
• barva PdF
• barva PřF

demonstrováno je následné obarvení odkazů:

• odkaz FF
• odkaz FIM
• odkaz PdF
• odkaz PřF

Šablony

Zde je plný výčet šablon, které jsou dostupné ve WYSIWYG editoru přes tlačítko vložit šabonu.

Obrázek s popiskem

Rozjížděcí popis

Strukturovaný obsah

• NadpisLorem ipsum sit dolor amet
• NadpisLorem ipsum sit dolor amet
• NadpisLorem ipsum sit dolor amet

Trojsloupcový seznam

Blok s citací

Tato šablona má navíc separátní tlačítko v rámci editoru, které  se společně s tlačítkem zdrojového kódu  zobrazuje pouze oprávněným uživatelům (speciální oprávnění).

 

Bloky s adresou

Adresa katedry

Juxtapose slider

Níže na obrázku je ukázka z editoru, která je následně pro web zpracována automatizovaně. Prázdný prostor mezi tímto textem a nadpisem je prostorem pro zobrazení slideru.

Kotva ČZJ 

 Zde je dostupná kotva CŽJ, která je dostupná pouze, pokud je aktivní volba překladu do ČZJ. Přepínač je umístěný před přepínačem jazykových mutací skrytý a do plného spuštění je nutné aktivovat jej pomocí eliminace zvýrazněné třídy ve zdrojovém kódu.

<li class="d-none">
<div id="signLanguageVideosSwitch" class="sign-language__switcher" data-is="SignLanguageVideos" data-locale-sign-language-video-trigger="Přehrát video ve znakovém jazyku" tabindex="0" title="Český znakový jazyk" data-web-component="">
<div class="sign-language__switcher-icon">
<svg class="svg-icon sign-language__switcher-icon--off"><use xlink:href="#sign-language"></use></svg>
<svg class="svg-icon sign-language__switcher-icon--on"><use xlink:href="#sign-language-switch-on"></use></svg>
</div>
<span class="sign-language__switcher-text">ČZJ</span>
<div class="sign-language__switcher-control"></div>
</div>
</li>

 

Tabulka s caption

Popis tabulky

Titulek	Titulek
Lorem ipsum sit dolor amet	Lorem ipsum sit dolor amet
Lorem ipsum sit dolor amet	Lorem ipsum sit dolor amet

Citace

Níže je  uveden plný výčet šablon citací. Jelikož bylo zapotřebí konzistentního stylování, má každá fakulta svůj výskyt v šablonách.

Citace UHK

Citace FF

Citace FIM

Citace PdF

Citace PřF

Životopis

Dokumenty

Níže jsou přílohy pro zhotovile jako manuály a další podklady.