Hero Box Image

Manuál fakultních značek

Přehled značek

Viz také další fakultně specifické značky.


E-mailová adresa

fi-email
Tato komponenta umožňuje vložit na stránku e-mail ve tvaru, který se do čitelné podoby předělá pouze pomocí JavaScriptu. Tímto způsobem se zabrání většině spambotům e-mailovou adresu ze stránky přečíst a posílat na ni nevyžádanou poštu.

Adresy se zadávají v atributech to, cc a bcc. Každá adresa může mít tvar

V každém atributu může být více adres oddělených čárkou. Tělo elementu se pak zobrazí jako text odkazu. Pro prázdné tělo se použije obsah atributu to.

Povinné atributy

to="ADRESY"
Adresy příjemců.

Nepovinné atributy

cc="ADRESY"
Kopie e-mailu.
bcc="ADRESY"
Skryté kopie.
subject="TEXT"
Předvyplněný předmět zprávy. Uživatel může tento předmět změnit, nelze na něj proto spoléhat.
icon
Zobrazit ikonu obálky před adresou.

Příklady

popis kód výsledek
jednoduchý e-mail
<fi-email to="john.doe@example.com"/>
john.doe@example.com
jednoduchý e-mail s ikonou
<fi-email icon to="john.doe@example.com"/>
john.doe@example.com
alternativní formát
<fi-email to="'John Doe' &lt;john.doe@example.com&gt;"/>
'John Doe' <john.doe@example.com>
alternativní formát s vlastním obsahem
<fi-email to="'John Doe' &lt;john.doe@example.com&gt;">John Doe</fi-email>
John Doe
více adres
<fi-email to="john.doe@example.com,jane.doe@example.com"/>
john.doe@example.com,jane.doe@example.com
e-mail s kopií
<fi-email to="john.doe@example.com" cc="jane.doe@example.com"/>
john.doe@example.com

Osoba na fakultě

fi-person
Vloží jméno osoby z ISu včetně titulů. Jméno nebo tituly se při změně automaticky aktualizují, není třeba kontakt přepisovat. Jméno může odkazovat do neautentizovaného ISu, na osobní stránku na webu MU nebo na soukromou stránku osoby odkazovanou pomocí URL.

Povinné atributy

právě jeden z:

uco="UCO"
UČO osoby.
login="LOGIN"
Fakultní login osoby.

Nepovinné atributy

titles="no"
Jméno osoby zobrazit bez titulů.
href="(@IS|@MUNI|URL)"
Jméno osoby bude klikací.
  • @IS vygeneruje odkaz do neautentizované sekce ISu.
  • @MUNI vygeneruje odkaz do stránek MU.
  • Jinak se použije odkaz zadaný jako URL.
db="(fi|is)"
Databáze pro zdroj dat.
  • fi je databáze Fakultní administrativy.
    Toto je výchozí hodnota. Podporuje vstup uco i login. Po zrušení záznamu nebude odkaz fungovat. Záznam se ruší typicky několik let po skončení studia nebo pracovního poměru.
  • is je databáze IS MU.
    Podporuje pouze uco.

Příklady

popis kód výsledek
osoba s UČO
<fi-person uco="396157"/>
Mgr. Roman Lacko
osoba s fakultním loginem
<fi-person login="xlacko1"/>
Mgr. Roman Lacko
bez titulů
<fi-person uco="396157" titles="no"/>
Roman Lacko
s odkazem do IS MU
<fi-person uco="396157" href="@IS"/>
Mgr. Roman Lacko
s odkazem do webu MU
<fi-person uco="396157" href="@MUNI"/>
Mgr. Roman Lacko
s vlastním odkazem
<fi-person uco="396157" href="https://fi.muni.cz/~xlacko1"/>
Mgr. Roman Lacko

Aktuality a akce

fi-news
Vloží do stránky aktuality a akce z požadovaných zdrojů (vývěsky ISu nebo kategorie Magazínu M).

Povinné atributy

page="SOURCE"
Zdroje aktualit, viz níže.
count="(L,M,S,XS|N)"
Nejvyšší počet aktuálních zpráv, které se mají zobrazit. Lze zadat zvlášť pro čtyři velikosti obrazovky, nebo jednotně.

Nepovinné atributy

layout="(article|calendar|timeline|simple)"
Rozložení a tvar:
  • simple: jednoduchý textový výpis, zobrazí akce i aktuality
  • article: (výchozí hodnota) zobrazí pouze aktuality (zprávy bez vyplněného data konání)
  • calendar: zobrazí pouze akce (zprávy s datem konání) v kalendářové podobě
  • timeline: zobrazí akce ve formě časové osy
Viz i příklady.
type="(news|events|all)"
Vynutí zobrazování konkrétního typu:
  • news: aktuality (zprávy bez data)
  • events: akce (zprávy s datem konání)
  • all: všechny zprávy bez ohledu na omezení v hodnotě layout.
Pozor, některé kombinace layout a type nemusí dávat smysl a v nejhorším případě můžou způsobit chybu zobrazení stránky.

Přenos aktualit

Aktuality se k nám synchronizují jednou za hodinu (jak z ISu, tak z Magazínu M). U zpráv na vývěsce je pro jejich přenos k nám ještě nutné, abyste byli správcem dané sekce vývěsky a při jejich editaci povolili zobrazování na webu FI (dostupné po rozbalení více možností). Pokud správcem nejste nebo tam tyto možnosti nevidíte, ale myslíte, že byste měli, obraťte se na istech@fi.muni.cz.

Řazení aktualit

Parametr layout určuje také pořadí zobrazovaných zpráv. U všech typů kromě article se zprávy řadí chronologicky (starší zprávy před novějšími), u article obráceně (novější zprávy před staršími).

Přesněji, chronologické řazení je dáno primárně datem konání (není-li definováno, použije se datum 2999) vzestupně. V případě shody data konání se sekundárně řadí dle data zveřejnění zprávy, také vzestupně.

Přehled vlastností rozložení

rozložení řazení podle data zobrazuje1 časová omezení
simple starší → novější akce, aktuality právě probíhající
article novější → starší akce bez omezení
calendar starší → novější aktuality aktuální a budoucí události
timeline starší → novější aktuality aktuální a budoucí události

(1) Tyto lze změnit atributem type.

Zdroje aktualit

Do atributu page zadejte zkratku zdroje zpráv z tabulky níže. Můžete zadat i více zdrojů, ty oddělte čárkou (bez mezer).

Zkratka Popis Anglický popis
Zdroje z vývěsky IS MU
bcmgr Bakalářské a magisterské studium Bachelor and master studies
int Zahraniční studia International studies
ovv Výzkum a vývoj Research & development
ekon Ekonomické oddělení Finance office
phd Doktorské studium Doctoral studies
spp Spolupráce FI MU s průmyslem Cooperation of FI MU with the industry
spp-opp SPP – příležitosti AIP – opportunities
title Z fakulty From the faculty
media Napsali o nás About us in media
bud Správa budov Building management
sekdek Sekretariát Secretariat
knih Knihovna Library
mark Marketing Marketing
pers Personální oddělení Personnel Office
staff Pro zaměstnance Staff news
Zdroje přebírané z webu Magazínu M
mu-abs Absolventi -
mu-news Události News
mu-stud Student Student
mu-sci Věda & výzkum Science
mu-comm Komentáře -
mu-sport Sport -
mu-theme Téma -
mu-dyk Víte…? -

Příklady

výchozí rozložení (stejné jako layout="article")
<fi-news page="mu-sci,mu-stud" count="4"/>
rozložení calendar
<fi-news page="title" count="4" layout="calendar"/>
rozložení timeline
<fi-news page="bcmgr" count="2" layout="timeline"/>

Momentálně nám všechny události došly.

Archiv aktualit

rozložení simple
<fi-news page="mu-sci" count="2" layout="simple"/>

Komise pro státní závěrečné zkoušky

fi-programme-committees
Tato komponenta umožňuje vypsat předsedy a členy komisí pro státní závěrečné zkoušky.

Příklady

popis kód
předsedy a členy komisí pro státní závěrečné zkoušky
<fi-programme-committees/>

Bližší ukázky použití můžete vidět na stránce Komise pro státní závěrečné zkoušky bakalářských a magisterských studijních programů (pro studia započatá od akademického roku 2019/2020).

Ocenění

fi-awards
Tato komponenta umožňuje vypsat závěrečné práce, které získaly ocenění děkana FI.

Povinné atributy

type="TYP"
Typ závěrečných prací, které mají být zobrazeny. TYP může být bc-mgr pro bakalářské a magisterské práce nebo phd pro disertační práce.

Nepovinné atributy

year="ROK"
Rok, ve kterém byly uděleny dané ocenění. Pokud rok není uveden, budou vypsány všechny uděleny ocenění daného typu seřazeny podle roku.

Příklady

popis kód
ocenění bakalářských a magisterských prací v roce 2019
<fi-awards year="2019" type="bc-mgr"/>
ocenění disertačních prací v roce 2019
<fi-awards year="2019" type="phd"/>
všechna ocenění disertačních prací
<fi-awards type="phd"/>

Bližší ukázky použití můžete vidět na stránkách Vynikající disertační práce nebo Ceny děkana studentům.


fi-gallery, fi-photo, fi-image
Galerii obaluje značka fi-gallery. Každý potomek je pak fi-image – libovolný obrázek (jako img) nebo fi-photo – fotka z galerie. Po kliknutí na obrázek v galerii se spustí prezentace, ve které se dá pohybovat klikáním na šipky po pravé nebo levé straně obrázku, případně také šipkami na klávesnici. Obrázek z galerie popisují dva řetězce, ALBUM a ID. Tato čísla lze vyčíst z URL obrázku, např. v URL

https://www.fi.muni.cz/app/gallery/04200022/018

poslední část URL 04200022/018 znamená, že číslo alba je 04200022 a ID obrázku je 018.

Nepovinné atributy pro fi-gallery

album="ALBUM"
Výchozí číslo alba pro fotky v galerii.
Potomci fi-photo pak nemusí toto číslo specifikovat.
size="VELIKOST"
Responzivní velikost galerie, výchozí je default.
max-items="POČET"
Maximální počet obrázků, které se mají zobrazit v náhledu.
Pokud je obrázků více, vygeneruje se po posledním zpráva informující o počtu ukrytých obrázků. Tato zpráva respektujte počet obrázků (1 obrázek, 2 obrázky atd.) a jazyk.

Atributy pro fi-photo

album="ALBUM"
Číslo alba, ze kterého fotka pochází. Není povinné pokud rodičovský element fi-gallery tento atribut má.
photo="ID"
Povinné ID fotografie z galerie.

Atributy pro fi-image

Lze použít stejné atributy jako pro HTML značku img.
Jaké to jsou? Viz například MDN web docs.
title="TEXT"
Nadpis obrázku, který se zobrazí v prezentaci. Pokud není zadán, použije se obsah povinného atributu alt.
caption="TEXT"
Delší popis obrázku.
thumbnail="URL"
Obrázek, který se má použít v náhledu.
Ideální rozměry jsou 270 x 150 pixelů, pokud použijete obrázek z aplikace Soubory, pak se náhled vygeneruje automaticky.

Příklady

<fi-gallery album="01300163">
    <fi-photo photo="007"></fi-photo>
    <fi-photo photo="010"></fi-photo>
    <fi-photo album="divadlo" photo="0022"></fi-photo>
    <fi-image src="/files/unix/news-generic-1.jpg" alt="FI"></fi-image>
</fi-gallery>

První a druhý obrázek jsou z alba 01300163 (nastaveno značkou fi-gallery), třetí obrázek je z alba divadlo, čtvrtý není z galerie, ale jde o vlastní obrázek uložený v aplikaci Soubory fakultní Wiki.

<fi-gallery fi-gallery album="01300260" max-items="4">
    <fi-photo photo="001"></fi-photo>
    <fi-photo photo="002"></fi-photo>
    <fi-photo photo="003"></fi-photo>
    <fi-photo photo="004"></fi-photo>
    <fi-photo photo="005"></fi-photo>
    <fi-photo photo="006"></fi-photo>
    <fi-photo photo="007"></fi-photo>
    <fi-photo photo="008"></fi-photo>
    <fi-photo photo="009"></fi-photo>
    <fi-photo photo="010"></fi-photo>
    <fi-photo photo="011"></fi-photo>
    <fi-photo photo="012"></fi-photo>
</fi-gallery>

Náhled obsahuje pouze 4 obrázky díky atributu max-items a objeví se text, který informuje, kolik obrázků není zobrazeno. V galerii se ovšem objeví všech 12 obrázků.


Automaticky škálovatelný obrázek

Značka fi-picture umožňuje vygenerovat různé velikostní varianty obrázku. Tento obrázek musí být uložen v aplikaci Soubory, varianty obrázků z jiných zdrojů generovat nelze.

Velikosti obrázků se vybírají podle pravidel v nastavení rules. Prohlížeč pak podle šířky stránky vybere jednu z variant obrázku.

Povinné atributy

src="URL"
Cesta k obrázku stejně jako pro značku img. Pokud cesta nevede na obrázek v aplikaci Soubory, velikostní varianty se nevygenerují.
alt="TEXT"
Popis obrázku stejně jako pro značku img.

Nepovinné atributy

rules="(TEXT|RULE1 RULE2 …)"
Buď název přednastavení nebo seznam pravidel (níže).
width="INTEGER"
height="INTEGER"
Šířka a výška obrázku stejně jako pro img. Tyto se použijí pro výchozí obrázek, pokud prohlížeč nevybere žádný velikostní variant.

Pravidla

Nejjednodušší možnost pro pravidla je použití přednastavení. Jako hodnotu rule uveďte jedno z:

news
Velikostní varianty pro zprávy, tedy 4, 2 nebo 1 sloupec podle šířky stránky. Základní obrázek by měl mít šířku alespoň 610 px.
timeline-box-img
Velikostní varianty pro časovou osu s obrázkem. Základní obrázek by měl mít šířku alespoň 370 px.

Vlastní nastavení velikostí lze zadat jako seznam pravidel oddělených mezerou. Každé pravidlo je dvojice čísel ve tvaru PAGE:IMAGE, kde PAGE je minimální šířka stránky v px a IMAGE je pak šířka obrázku v px, který se má použít. Pokud obrázek nemá nastaven atribut width, pak musí být poslední pravidlo tvaru 0:IMAGE nebo zkráceně pouze jedno číslo, IMAGE. To se použije se jako výchozí velikost.

Prohlížeč bude pravidla interpretovat postupně. Pro první pravidlo PAGE:IMAGE, pro které má aktuální zobrazení stránky šířku alespoň PAGE, vybere prohlížeč obrázek šířky IMAGE.

Příklady

<fi-picture src="/files/webmaster/news-generic-1.jpg" alt="FI" rules="news"></fi-picture>

Obrázek vhodný pro zobrazení pro zprávy.

FI

<fi-picture src="/files/webmaster/news-generic-1.jpg" alt="FI" rules="1024:300 600:600 150"></fi-picture>

Ukázka explicitních pravidel. Vybere se první vyhovující pravidlo:

Pokud budete zmenšovat a zvětšovat okno prohlížeče, měli byste vidět změny.

Pravítko
FI

Google kalendář

fi-google-calendar
Vloží do stránky Google Calendar. Pozor, musí jít o Google kalendář, který je veřejný, jinak jej nebude možné z technických důvodů zobrazit.

Povinné atributy

id="TEXT"
Identifikátor kalendáře (nebo více identifikátorů oddělených čárkami).
Lze jej zjistit dle dokumentace Google Add a Google Calendar to your website, do parametru id je pak třeba zadat hodnotu parametru src uvedenou v tomto kódu. Například eestjpurkj0had7o1srvqk0q5k@group.calendar.google.com (místo znaku @ tam může být uvedeno i %40).

Nepovinné atributy

title="TEXT"
Volitelný nadpis; pokud není uvedeno, použije se název kalendáře.
color="RRGGBB"
Barva událostí. Při použití více kalendářů je možné použít i více barev oddělených čárkami.
width="SIRKA"
Šířka kalendáře.
height="VYSKA"
Výška kalendáře.

Příklad

<fi-google-calendar title="Akce FI MU" color="EF6C00"
    id="go.muni.cz_bug1p6vsnmojl3ddj9onf91kl0@group.calendar.google.com"
/>

Vložený obsah třetí strany

Vloží do stránky rámec s obsahem z některé z podporovaných třetích stran. Ta se vybírá povinným atributem type, od jehož hodnoty se odvíjí další povinné či podporované atributy.

V současné době je touto značkou vložitelné pouze video z YouTube.

Povinné atributy

type="youtube"
Typ vloženého obsahu či služba třetí strany. Momentálně pouze "youtube".

Povinné atributy pro video YouTube (type="youtube")

id="VIDEO_ID"
Jedenáctiznaký identifikátor videa.
Příklad
<fi-embed type="youtube" id="CH8RrXlrqwI" />

Google mapa polohy FI

Vloží do stránky Google mapu s vyznačením pozice budovy FI. Nemá žádné atributy ani obsah, tj. lze použít pouze takto:

<fi-google-map/>

Google Street View prohlídka budovy FI

Vloží do stránky Google Street View s prohlídkou prostor FI. Nemá žádné atributy ani obsah, tj. lze použít pouze takto:

<fi-google-street-view/>

Příklad použití je na stránce 3D prohlídky.

Virtuální 3D prohlídka budovy FI (Matterport)

Vloží do stránky virtuální prohlídku prostor FI (3D průlet + popisky). Nemá žádné atributy ani obsah, tj. lze použít pouze takto:

<fi-virtual-tour/>

Příklad použití je na stránce 3D prohlídky.

Můžete také vložit odkaz vedoucí na prohlídku začínající v nějakém místě s daným směrem pohledu. Stačí když v prohlídce zvolíte ikonu sdílení a zaškrtnete políčko Link to this location. Příklad:

<a href="https://my.matterport.com/show/?m=NxRG9spMXVW&sr=-2.29,-.94&ss=102">
    virtuální prohlídka – PC hala
</a>

virtuální prohlídka – PC hala


Dočasný obsah

fi-temporary
Vloží na stránku obsah tohoto elementu pouze v zadaném čase.

Povinné atributy

alespoň jeden z:

since="YYYY-MM-DD"
since="YYYY-MM-DD hh:mm"
Datum, od kdy se obsah na stránce zobrazí.
until="YYYY-MM-DD"
until="YYYY-MM-DD hh:mm"
Datum, kdy se obsah na stránce přestane zobrazovat.

Popis

Hodnoty atributů since a until se očekávají ve formátu ISO 8601. Je možné zadat i časovou složku ve formátu hh:mm nebo hh:mm:ss oddělenou od data mezerou.

Pokud se časová složka atributu since neuvede (tedy pokud se uvede pouze formát YYYY-MM-DD), interpretuje se to jako půlnoc na začátku zadaného dne. Pro until se chybějící časová složka interpretuje jako půlnoc na konci zadaného dne. Viz příklady níže.

Protože se změny ve wiki publikují jednou za hodinu, odchylka od zobrazení nebo skrytí obsahu může být až jedna hodina. Proto pokud chcete upřesnit čas formátem hh:mm, doporučujeme pro jednoduchost nastavit minuty na 00.

Grafické prvky, pro které vypršel nebo ještě nenastal datum platnosti, se na oficiálním webu nezobrazí. V editoru Wiki se pro náhled zobrazí překryté vrstvou se šedými pruhy. Ukázka:

Náhled

Toto je náhled grafického prvku mimo rozsahu platnosti. Na fakultním webu se takovéto prvky nezobrazují; lze je vidět pouze v náhledu stránky v editoru Wiki.

Příklady

<fi-temporary since="2022-06-22">
    <fi-gallery>
        <fi-photo album="divadlo" photo="0022"></fi-photo>
    </fi-gallery>
</fi-temporary>

Galerie se zobrazí od 2022-06-22 (22. června 2022).

<fi-temporary until="2023-02-01">
    <a href="https://...">odkaz</a>
</fi-temporary>

Uvedený odkaz se zobrazí pouze před datem 2023-02-01 (1. února 2023).

<fi-temporary since="2022-06-01" until="2022-06-14">
    <a href="https://...">odkaz</a>
</fi-temporary>

Uvedený odkaz se začne zobrazovat od 2022-06-01 (1. června 2022) a přestane se zobrazovat na konci dne 2022-06-14 (14. června 2022).

Demonstrace rozdílu formátu s časem a bez času
<fi-temporary since="2022-06-01" until="2022-06-01">
    <a href="https://...">odkaz</a>
</fi-temporary>

Uvedený odkaz se zobrazí pouze 2022-06-01 (1. června 2022), a to od začátku dne (půlnoci) do konce tohoto dne (půlnoci).

<fi-temporary since="2022-06-01 08:00" until="2022-06-01 20:00">
    <a href="https://...">odkaz</a>
</fi-temporary>

Uvedený odkaz se zobrazí pouze 2022-06-01 (1. června 2022), a to od 8. hodiny do 20. hodiny.