3
editace
Manual pro editory webovych stranek UP: Porovnání verzí
Skočit na navigaci
Skočit na vyhledávání
bannery
Bez shrnutí editace |
(bannery) značka: editace z Vizuálního editoru |
||
| (Není zobrazeno 24 mezilehlých verzí od 4 dalších uživatelů.) | |||
| Řádek 1: | Řádek 1: | ||
Pokyny pro publikování na webu mají zabránit nejčastějším nedostatkům a chybám při vytváření webového obsahu. Jednoduchý praktický návod pomůže redaktorům při úpravě obsahových prvků v '''redakčním''' '''systému''' '''TYPO3''' – vkládání a úpravě textu, obrázků a tabulek. | Pokyny pro publikování na webu mají zabránit nejčastějším nedostatkům a chybám při vytváření webového obsahu. Jednoduchý praktický návod pomůže redaktorům při úpravě obsahových prvků v '''redakčním''' '''systému''' '''TYPO3''' – vkládání a úpravě textu, obrázků a tabulek. {{DISPLAYTITLE:Manuál pro editory webových stránek UP}} | ||
{{DISPLAYTITLE:Manuál pro editory webových stránek UP}} | |||
== Vlastnosti nových stránek UP == | == Vlastnosti nových stránek UP == | ||
=== | === Responzivita === | ||
Nové webové stránky UP jsou navrženy tak, aby se optimálně zobrazovaly na zařízeních s různou velikostí a rozlišením obrazovky (mobily '''– obr. 1,''' tablety '''obr. 2,''' notebooky, počítače '''obr. 3.''') Přizpůsobuje se layout stránek, struktura (řazení) obsahu i navigace, velikost obrázků a velikost písma. Vzhled stránek je daný nastavenými šablonami a styly, které definují např. poměr velikostí nadpisů a odstavce, mezery, odsazení a zarovnání. | Nové webové stránky UP jsou navrženy tak, aby se optimálně zobrazovaly na zařízeních s různou velikostí a rozlišením obrazovky (mobily '''– obr. 1,''' tablety '''obr. 2,''' notebooky, počítače '''obr. 3.''') Přizpůsobuje se layout stránek, struktura (řazení) obsahu i navigace, velikost obrázků a velikost písma. Vzhled stránek je daný nastavenými šablonami a styly, které definují např. poměr velikostí nadpisů a odstavce, mezery, odsazení a zarovnání. | ||
[[Soubor:Upoladmin 01.png|centre|frameless|786x786px]] | [[Soubor:Upoladmin 01.png|centre|frameless|786x786px]] | ||
| Řádek 29: | Řádek 28: | ||
== Obsahové prvky na stránce == | == Obsahové prvky na stránce == | ||
Obsah stránky (na hlavní ploše) členíme do tzv. obsahových prvků (Content Elements) '''– | Obsah stránky (na hlavní ploše) členíme do tzv. obsahových prvků (Content Elements) '''– viz. obr. 4''', kterým přiřazujeme nadpisy. V hlavním seznamu není uveden dodatečně vytvořený Expanding Content (viz. '''video''' '''Expanding Content https://www.youtube.com/embed/UqVJicoOjMY'''), který na novém webu UP hojně využíváme. | ||
== Vytvoření obsahu == | == Vytvoření obsahu == | ||
| Řádek 35: | Řádek 34: | ||
=== Příklad: stránka s několika prvky Expanding Content === | === Příklad: stránka s několika prvky Expanding Content === | ||
Pro delší obsah na stránce používáme prvky Expanding Content, které může čtenář „sbalovat“ a „rozbalovat“ přímo na stránce. | Pro delší obsah na stránce používáme prvky Expanding Content, které může čtenář „sbalovat“ a „rozbalovat“ přímo na stránce. | ||
[[Soubor:Upoladmin 04.png|centre|frameless|800x800px]] | [[Soubor:Upoladmin 04.png|centre|frameless|800x800px|alt= Obr. 4. Obsahové prvky na stránce|Obr. 4. Obsahové prvky na stránce]]<p style="text-align: center">'''obr. 4 - content elements (obsahové prvky)'''</p> | ||
# Než začneme stránku plnit obsahem, promyslíme, jak bude text strukturován a členěn pomocí nadpisů. Pro každý Expanding Content použijeme v jeho horní části nadpis H2. Nadpis se pak automaticky zobrazí v pravém Scrollspy Menu. | # Než začneme stránku plnit obsahem, promyslíme, jak bude text strukturován a členěn pomocí nadpisů. Pro každý Expanding Content použijeme v jeho horní části nadpis H2. Nadpis se pak automaticky zobrazí v pravém Scrollspy Menu. | ||
# Do první části Expanding Contentu umístíme krátký uvozující text. Měl by to být odstavec v délce max. 80 znaků. Po kliknutí na „Více…“ se čtenáři na webu odkryje obsahový prvek celý. | # Do první části Expanding Contentu umístíme krátký uvozující text. Měl by to být odstavec v délce max. 80 znaků. Po kliknutí na „Více…“ se čtenáři na webu odkryje obsahový prvek celý. | ||
# Ve druhé části Expanding Contentu vytvoříme další část obsahu, který můžeme dále členit pomocí nadpisů H3 a H4. Nadpis H3. Z nadpisů H3 u rozbalené části se automaticky vytváří nadpis v pravém Scrollspy Menu. '''(video | # Ve druhé části Expanding Contentu vytvoříme další část obsahu, který můžeme dále členit pomocí nadpisů H3 a H4. Nadpis H3. Z nadpisů H3 u rozbalené části se automaticky vytváří nadpis v pravém Scrollspy Menu. '''(video Expanding Content''' https://youtu.be/UqVJicoOjMY''')''' | ||
Pozn. Pro složitěji členěný obsah použijeme prvek Expanding Content Mixed ('''viz. video Expanding Content Mixed https://youtu.be/3JtN5w81PwQ''') | |||
=== Obrázky === | === Obrázky === | ||
Pro vložení obrázků můžeme zvolit několik obsahových prvků: | Pro vložení obrázků můžeme zvolit několik obsahových prvků: | ||
* Images: používáme, pokud nepotřebujeme doprovodný text k obrázku. Obrázky zarovnáváme doleva. | * Images: používáme, pokud nepotřebujeme doprovodný text k obrázku. Obrázky zarovnáváme doleva. | ||
* Text & Images: nejsnadnější způsob vkládání obrázku a a textu. Text může být umístěn vedle obrázku nebo obrázek obtékat '''(video | * Text & Images: nejsnadnější způsob vkládání obrázku a a textu. Text může být umístěn vedle obrázku nebo obrázek obtékat '''(viz video Text & Images: https://youtu.be/KeEyMcapL6g<nowiki/>)''' | ||
* Text: obrázek můžeme vložit i dovnitř textového prvku (včetně Expanding Contentu). Upozornění: obtékání obrázku nenastavujeme u „Obtékat“, ale nahoře ve volbě „Styl“ | * Text: obrázek můžeme vložit i dovnitř textového prvku (včetně Expanding Contentu). Upozornění: obtékání obrázku nenastavujeme u „Obtékat“, ale nahoře ve volbě „Styl“ | ||
| Řádek 56: | Řádek 53: | ||
Tabulky na webu UP mají předdefinovaný styl. Vkládáme-li tabulku do textového prvku (Text nebo Expanding Content) např. z Wordu, smažeme „MS Word formátování“. Vloženou tabulku pak můžeme upravovat pomocí tlačítek v TYPO3 editoru . | Tabulky na webu UP mají předdefinovaný styl. Vkládáme-li tabulku do textového prvku (Text nebo Expanding Content) např. z Wordu, smažeme „MS Word formátování“. Vloženou tabulku pak můžeme upravovat pomocí tlačítek v TYPO3 editoru . | ||
[[Soubor:Upoladmin 06.png|centre|frameless|800x800px]] | [[Soubor:Upoladmin 06.png|centre|frameless|800x800px]] | ||
<p style="text-align: center">'''obr. 5 - odstranění formátování'''</p> | |||
Jednoduchou tabulku můžeme vytvořit přímo v TYPO3 – prvek Table nabízí několik předdefinovaných stylů. | Jednoduchou tabulku můžeme vytvořit přímo v TYPO3 – prvek Table nabízí několik předdefinovaných stylů. | ||
# Zvolíme table – vybereme počet sloupců v columns | # Zvolíme table – vybereme počet sloupců v columns | ||
| Řádek 61: | Řádek 60: | ||
=== Odkazy === | === Odkazy === | ||
Vytvoření odkazu v textu: | Vytvoření odkazu v textu: | ||
# klikneme na odkazující slovo nebo vybereme několik slov, ze kterých povede odkaz | # klikneme na odkazující slovo nebo vybereme několik slov, ze kterých povede odkaz | ||
| Řádek 69: | Řádek 66: | ||
=== Příklad: nahrání souboru a vytvoření odkazu na něj v textovém prvku === | === Příklad: nahrání souboru a vytvoření odkazu na něj v textovém prvku === | ||
'''Video | '''Video soubory a odkazy: https://youtu.be/pvGDZO-jclQ''' | ||
# v levém menu zvolíme SOUBORY / Seznam souborů | # v levém menu zvolíme SOUBORY / Seznam souborů | ||
# rozbalíme složku | # rozbalíme složku | ||
| Řádek 89: | Řádek 86: | ||
=== Kopírování textu do TYPO3 === | === Kopírování textu do TYPO3 === | ||
Při vkládání textu z Wordu nebo podobné aplikace do redakčního systému TYPO3 se některé úpravy formátování nezachovají. (Pokud výsledek vizuálně neodpovídá vaší představě, lze formátování upravit v editoru TYPO3 ručně ''' | Při vkládání textu z Wordu nebo podobné aplikace do redakčního systému TYPO3 se některé úpravy formátování nezachovají. (Pokud výsledek vizuálně neodpovídá vaší představě, lze formátování upravit v editoru TYPO3 ručně '''(viz obr. 5 -''' '''odstranění formátování).''' Velikost a barvu textu libovolně měnit nelze, je nastavena pomocí stylů. | ||
=== Odstavec === | === Odstavec === | ||
| Řádek 153: | Řádek 150: | ||
* Některé typy obsahu nemusejí být přístupné na některých zařízeních (mobily, tablety) nebo na pomalejších počítačích. Jedná se o obrázky či grafiku a prvky zpravované jako Adobe Flash. | * Některé typy obsahu nemusejí být přístupné na některých zařízeních (mobily, tablety) nebo na pomalejších počítačích. Jedná se o obrázky či grafiku a prvky zpravované jako Adobe Flash. | ||
Pro „doladění“ SEO lze použít volitelný nástroj '''Metadata''' v TYPO3. Jedná se o doplňující údaje o stránce, které se nezobrazují uživatelům, ale zpracovávají je prohlížeče a vyhledávače. | Pro „doladění“ SEO lze použít volitelný nástroj '''Metadata''' v TYPO3. Jedná se o doplňující údaje o stránce, které se nezobrazují uživatelům, ale zpracovávají je prohlížeče a vyhledávače. | ||
[[Soubor:Upoladmin 07.png|centre|frameless|800x800px]] | [[Soubor:Upoladmin 07.png|centre|frameless|800x800px]]<p style="text-align: center">'''obr. 6 - metadata'''</p> | ||
== Speciální obsahové prvky pro pokročilé editory == | |||
=== Seznam zaměstnanců podle pracoviště === | |||
Tento prvek (plugin s názvem ''Staff List'') dovoluje s využitím webové služby | |||
(webservice) zobrazit seznam zaměstnanců jednotlivého pracoviště, nebo struktury pracovišť (třebas i celé fakulty). Stačí do něj zadat číslo nákladového střediska požadovaného pracoviště a na stránce se zobrazí seznam | |||
s vybranými údaji o zaměstnancích, tak jak jsou uloženy v příslušných databázích (převážně SAP). | |||
Další | |||
parametry určují, jestli se má | |||
zobrazovat jen zadané | |||
středisko, nebo i všechna podřízená střediska, jestli se nemá vynechat název | |||
pracoviště na začátku | |||
(třebas pokud je už v nadpisu stránky), | |||
nebo jestli u vedoucích | |||
pracovišť položku ''profese'', doplnit označením funkce (tedy slovem ''vedoucí''). Dále je | |||
možné | |||
nastavit propojení jmen | |||
zaměstnanců na jejich webovou vizitku (odkazem). A také lze zvolit ze dvou nabízených | |||
podob seznamu zaměstanců, případně | |||
ve spolupráci s námi navrhnout ještě jiný design. | |||
Nevýhodou | |||
tohoto prvku je, že neumožňuje žádné hierarchické nebo | |||
funkční řazení – prostě na začátku je | |||
vedoucí a | |||
potom ostatní | |||
zaměstnanci podle abecedy. | |||
''Podrobnější popis prvku bude ještě doplněn.'' | |||
=== Seznam zaměstnanců zadávaný jednotlivě === | |||
Tento obsahový prvek (plugin s názvem ''Staff List Plus'') v mnoha ohledech vychází z prvku předchozího. Základním rozdílem je, že nevychází z čísla nákladového střediska, ale je nutné zadat seznam jednotlivých osob v pořadí, v jakém se mají zobrazovat. Zadávají se formou seznamu osobních čísel, za sebou, oddělené čárkou. | |||
[[Soubor:Backend plugin parametry.png|centre|800x800px]]<p style="text-align: center">'''Parametry pluginu Staff List Plus - seznam osob, doplňkové údaje apod.'''</p> | |||
Osobní čísla lze zjistit např. pomocí vyhledávače kontaktů/vizitek. | |||
[[Soubor:Kontakt - id.png|centre|600x600px]]<p style="text-align: center">'''Identifikační číslo zaměstnance je součástí adresy (URL) jeho kontaktu nebo vizitky'''</p> | |||
Volby designu a propojení odkazem s vizitkou je také podobné prvku předchozímu. Tedy lze zvolit ze dvou nabízených podob seznamu zaměstanců, případně ve spolupráci s námi navrhnout ještě jiný design. Navíc pak prvek nabízí jednu doplňkovou položku, využitelnou třebas pro | |||
konzultační hodiny apod. Její obsah se zadává do příslušného pole stylem – co řádek (Enter), to jeden kontakt. | |||
[[Soubor:Frontend - seznam profesoru.png|centre|800x800px]]<p style="text-align: center">'''Zobrazení seznamu na webu'''</p> | |||
=== Fotogalerie === | |||
Pro vkládání fotogalerií je na webu UP určen plugin ''FAL Gallery''. Základní práci s ním ukazuje '''Youtube video https://youtu.be/yuoFWGKszAs''' | |||
=== Formuláře (Powermail) === | |||
Dříve používané jednoduché e-mailové formuláře už nejsou na novém webu UP podporovány. Místo toho mohou zájemci využít plugin ''Powermail'', který nabízí více možností, např. ukládání dat z formulářů přímo na serveru a možnost jejich exportu třeba do Excelu. Jeho použití ale není tak zřejmé, proto vzniklo '''Youtube video https://youtu.be/wi7YYN4_MiA''', které ukazuje vytvoření a zprovoznění jednoduchého webového formuláře. I tak jde o věc určenou pro pokročilejší uživatele TYPO3 a kdokoli chce formuláře vytvářet, musí nás kontaktovat. Přístup k pluginu ''Powermail'' není umožněn implicitně a zrovna tak musí být nastaveny podmínky pro oblast webu, kde by měly být formuláře umístěny. | |||
Zmíněné video ukazuje opravdu jen základní prvky, kdo se chce s možnostmi ''Powermailu'' seznámit podrobněji, originální dokumentaci nalezne na webu [https://docs.typo3.org/typo3cms/extensions/powermail/ '''https://docs.typo3.org/typo3cms/extensions/powermail/'''] | |||
== pozn. == | |||
dostupne bannery [https://www.upol.cz/bannery/ www.upol.cz/bannery/] | |||
zastupne obr. pre spravy s obrazkom (ak nemate vhodnejsi obrazok) najdete v user_upload/news_placeholder | |||