CMS Umbraco – komponenty Iveta Burdová, Pavel Budík webcentrum@ics.muni.cz Ústav výpočetní techniky MU •3. 5. 2018 Podklady •http://webcentrum.muni.cz/redakce •Přihlášení: jednotné přihlašování na MU (UČO + primární heslo) • Přihlášení do Umbraca Prezentace a fotky k webu na procvičení: https://muni.cz/go/web-workshop-2018 Web na procvičení: http://metalkonference2018.phil.muni.cz/ Dokumentace k Umbracu na webu CIT FF: https://webcentrum.muni.cz/novewebyff/system-umbraco Záhlaví a zápatí webu •Záhlaví – menší možnosti editace; menu se vypisuje automaticky podle struktury vytvořených stránek •Zápatí •rozcestník webu, odkazy, tlačítka na sociální sítě • nebo •vlastní zápatí http://www.muni.cz/ •Editují se v kořenovém uzlu (nejvyšší úroveň v rámci struktury webu) Můžu vytvořit i takovouto patičku? Ano. J http://www.testovanovantarktide.cz/ Nabídka komponent •30 základních typů komponent •základní a nevyužívanější – červené, ostatní řazené podle abecedy Text •možno vkládat tabulky, seznamy, odkazy aj. •základní nastavení – šířka textu „pro pohodlné čtení“ Tlačítko •4 základní typy tlačítek •možno měnit barvy a zarovnání tlačítek Obrázek Text s obrázkem Fotogalerie Hero box •Možnosti hero boxu •hero box = kombinace textu + obrázku, tlačítka nebo jiných komponent •více různých variant zobrazení (obrázek na pozadí, obrázek na polovině hero boxu, s barevnou výplní, bez výplně, s ohraničením, bez ohraničení, různé výšky a šířky hero boxu,…) •Kdy použít? •především pro hlavní nadpisy (název stránky); jako upoutávka •rozcestník s odkazy •oddělovač sekcí v rámci stránky • https://www.phil.muni.cz/pro-uchazece/bakalarske-studium Hero box s obrázkem na pozadí https://www.muni.cz/ Hero box s obrázkem vpravo [USEMAP] 2 typy hero boxů http://ugv.sci.muni.cz/pro-verejnost/sbirky-a-geopark • https://www.phil.muni.cz/aktualne/pro-media hero boxy Hero header •hero header = obrázek přes celou šířku sloupce + text (a jiné) (v boxíku) •pro prezentační stránky – když chceme zaujmout fotografií • je nutné mít kvalitní fotografii s dostatečným rozlišením http://www.testovanovantarktide.cz/o-polarni-stanici https://www.muni.cz/vyzkum hero header Významné informace •možné použít pro prezentaci zajímavých číselných údajů, jako rozcestník aj. Citace Testimoniál • Časové osy •vhodné k zachycení jednotlivých kroků procesu, posloupnosti v čase •2 typy •časová osa s boxy •standardní časová osa https://www.muni.cz/uchazeci/bakalarske-a-magisterske-studium/prijimacky http://ugv.sci.muni.cz/student/dulezite-terminy-201617 Slideshow https://www.phil.muni.cz/o-nas http://www.testovanovantarktide.cz/ Kontaktní formulář • Kategorie •text + tlačítko •umožňují odkazovat na stránky v rámci webu nebo na stránky externí – vhodné jako rozcestník • [USEMAP] https://www.muni.cz/uchazeci Sociální sítě •Facebook a Twitter feed •tlačítka pro sdílení na sociálních sítích → http://spsp.fss.muni.cz/ Facebook feed Rozklikávací blok •vhodné pro FAQ, otázky a odpovědi https://www.phil.muni.cz/pro-uchazece/bakalarske-studium/7179-informacni-studia-a-knihovnictvi Rozcestník odkazů https://www.phil.muni.cz/pro-uchazece/bakalarske-studium Článek – upoutávka •Možnosti využití •samostatná aktualita (bez prokliku) •upoutávka na stránku s detailem článku (s proklikem) •základem je nadpis + text •je možné přidat fotografii, tlačítko a doplňkovou informaci (např. datum, autor apod.) Vizitka •slouží pro uvedení kontaktu na danou osobu, oddělení apod. •umožňuje automatické dohledání informací u osob z MU podle UČA •různé varianty zobrazení A další… •záložky •mapa •navigace •databázová data MU (např. výpisy projektů, seznamy zaměstnanců daného pracoviště) •horizontální menu •grafický modul •výstřižek •vnořený grid • grafický modul Specifický obsah: Články •vhodné pro aktuality – články, pozvánky apod. •vložení výpisu na stránku: „Data z Umbraca“ https://www.phil.muni.cz/aktualne/aktuality https://www.phil.muni.cz/aktualne/aktuality/semestrend-2017-jedeme-v-tom-spolu Specifický obsah: Události •vhodné především pro kalendář událostí/akcí •vložení výpisu na stránku: „Data z Umbraca“ • Co sami v Umbracu nevytvoříte? •některé formuláře: registrační formulář, odběr newsletteru apod. x kontaktní formulář ano •blog (alternativa: využití článků) •možnost vkládat komentáře •diksuzní fórum • Zadání pro další práci •Vytvořit novou podobu webu jobbox.knihovna.cz v Umbracu •nebo •Převést do Umbraca web Polární výzkum na Masarykově univerzitě (možno zpracovat ve dvojici) •nebo •zpracovat vlastní projekt – vytvořit nový web v Umbracu (nutno konzultovat) •nebo •Převést do Umbraca web nasiv.knihovna.cz Zadání 1: jobbox.knihovna.cz •Cílová skupina webu jste vy a vaši spolužáci. •Zamyslete se nejprve nad obsahem webu v souvislosti s cílem webu. (Můžete si udělat mini výzkum mezi spolužáky.) Chybí vám na webu něco? Jaký obsah by pro vás byl užitečný? •Zamyslete se nad strukturou současného webu – je přehledná? Co by se dalo prezentovat lépe a jak? Promyslete si základní strukturu vašeho nového návrhu (můžete si udělat jednoduchou skicu na papíře). •Zvolte vhodné komponenty pro daný typ obsahu a vytvořte jednotlivé stránky v Umbracu. • •Co nedělat: Nesnažte se pouze převést web v totožné podobě do Umbraca. Není třeba převádět stránky k jednotlivým praxím – stačí vytvořit jednu ukázkovou. J • •Nejlepší web spustíme místo současného webu. J • Zadání 2: Polární výzkum na MU •Projděte si současný web a zamyslete se nad jeho strukturou. Co by bylo dobré udělat jinak a lépe? Bylo by lepší obsah některých stránek sloučit/rozdělit? Je vhodné mít 8 položek v hlavním menu? Šlo by některé dlouhé texty prezentovat jiným lepším způsobem? … •Promyslete si, jak bude vypadat základní struktura nového webu a z jakých stránek se bude skládat. •Vycházejte ze současného obsahu webu, ale zkuste ho prezentovat lépe. •Zvolte vhodné komponenty pro daný typ obsahu a převeďte web do Umbraca. • •Doporučení: Využijte fotky dostupné na webu. Pokud budete potřebovat fotku ve větším rozlišení (např. na pozadí), využijte pro ilustraci jakoukoli jinou s podobnou tematikou. Není třeba převádět veškerý obsah u aktualit, publikací a fotek ve fotogalerii – stačí vložit jen několik pro ukázku. Nevytvářejte sekundární vertikální menu, jako na současném webu. • •Nejlepší web doplníme a spustíme místo současného webu. J