Adobe Systems
Didaktické využití dalších aplikací
1
Tvorba webu
Veronika Švandová
Ústav chemie PřF MU & knihovna PřF MU

Tato prezentace se zabývá tvorbou webu, tj. souboru webových stránek na určité téma. Učitelé nemusí
být odborníky na informatickou stránku tvorby webu, přesto se jim určité znalosti mohou hodit, když
chtějí na webu např. prezentovat své materiály. V této prezentaci ukážeme ty nejdůležitější
principy tvorby webu umožňující vytvářet vlastní webové stránky bez pokročilých informatických
znalostí.

Adobe Systems
̶(X)HTML + CSS
̶redakční systémy
̶
Didaktické využití dalších aplikací
2
Možnosti tvorby webu

Možnosti tvorby webu
Web můžete vytvořit tak, že si jej celý napíšete v poznámkovém bloku. Musíte však mít určité
znalosti jazyku (X)HTML a CSS.
Redakční systémy umožňují tvorbu webu bez pokročilých informatických znalostí.

3
(X)HMTL
̶(eXtensible) HyperText Markup Language
̶formát webových stránek
̶zdrojový text obsahuje současně jak vlastní text, tak instrukce pro jeho zpracování
Firefox – pravé tlačítko myši – Zobrazit zdrojový kód stránky

(X)HTML
Nyní si ukážeme ty nejzákladnější principy jazyka HTML případně jeho vylepšené varianty XHTML, na
němž je každý web založen. Tyto principy využijete i když budete tvořit web pomocí nějakého
redakčního systému, protože v určitou chvíli začne tento systém většinou trochu zlobit a se
znalostí HTML můžete tyto chyby opravit, případně web vylepšit.
Koho by tvorba webu zajímala více, doporučujeme předmět Multimedia ve výuce 2, kde se tvoří i
„oživené“ webové stránky pomocí JavaScriptu. Více k tomuto tématu k samostudui najdete např. i v
literatuře této prezentace.
XHTML (zkratka anglického extensible hypertext markup language – „rozšiřitelný hypertextový
značkovací jazyk“) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý
W3C. Původně se předpokládalo, že se stane nástupcem jazyka HTML, jehož vývoj byl verzí 4.01
ukončen. V roce 2007 však došlo k založení pracovní skupiny, která měla za cíl vytvořit novou verzi
HTML, která nese označení HTML5 a její XML variantu XHTML5.
Je to tedy formát, ve kterém se tvoří webové stránky, např. v poznámkovém bloku. Soubor v tomto
formátu obsahuje současně jak vlastní text, tak instrukce pro jeho zpracování.

Adobe Systems
Didaktické využití dalších aplikací
4
̶základní tagy:
̶<h1></h1> hlavička (1 až 6) - <h1></h1> <h2></h2> atd.
̶<p></p> odstavec
̶<br /> zalomení řádku
̶<hr /> vodorovná čára
̶<b></b> tučný text
̶<i></i> kurzíva
̶<u></u> podtržený text
̶<sub></sub> dolní index
̶<sup></sup> horní index
̶<a href=″URL″>text odkazu</a> odkaz na URL
̶<img src=″URL″ alt=″popis″ /> obrázek
̶

Adobe Systems
Didaktické využití dalších aplikací
5
̶seznamy:
̶<ul></ul> nečíslovaný seznam
̶<ol></ol> číslovaný seznam
̶<li></li> položka seznamu
̶tabulky:
̶<table></table> tabulka
̶<tr></tr> řádek tabulky
̶<td></td> buňka tabulky
̶znakové entity:
̶&copy; ©
̶&nbsp; nedělitelná mezera

Adobe Systems
Didaktické využití dalších aplikací
6
Kaskádové styly (css):

Kaskádové styly (css)
umožňují definovat způsob zobrazení každého elementu na stránce – druh, barvu a velikost písma,
způsob zarovnání, způsob zvýraznění apod.
Externí styly se ukládají do samostatného souboru s příponou .css. Existují dvě možnosti pro
připojení externího stylu ke zdrojovému HTML dokumentu: použitím tagu <link> nebo pomocí příkazu
@import v samotné definici stylu mezi tagy <style> a </style>. Tagy <link> i <style> se zapisují
přímo v hlavičce dokumentu.
Interní styly se zapisují přímo do zdrojového kódu HTML stránky. Interní styly lze použít dvojím
způsobem –  definicí stylu v hlavičce dokumentu v elementu <style>  nebo definicí stylu v jednom
konkrétním elementu v atributu style (tzv. in-line styl nebo přímý styl). Druhý způsob je však
v rozporu s původnímu záměrem zavedení kaskádových  stylů, směšuje totiž obsah dokumentu s jeho
grafickou prezentací. Avšak s výhodou jej můžeme využít při formátování stránek prostřednictvím
editoru HTML (např. v interaktivní osnově IS muni – pokud nemáme možnost editovat základní .css
soubor.

7
Editory HTML stránek
̶strukturní editory: upravuje se HTML (PSPad, Notepad++, …)
̶wysiwyg editory: zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a kód generuje
automaticky, žádná znalost jazyka není potřeba
̶MS  FrontPage, Microsoft Expression Web
̶OO Writer – Průvodci – WWW stránka, KompoZer, BlueGriffon, Easy Editor)
Didaktické využití dalších aplikací

Editory HTML stránek
Strukturními editory se upravuje přímo výsledný HTML kód, je třeba znát jazyk HTML. Oproti
obyčejnému poznámkovému bloku mají určité výhody, např. doplňují párové tagy. Příkladem je např.
zdarma dostupný editor PSPad.
Wysiwyg editory zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a kód generuje
automaticky, žádná znalost jazyka není potřeba – některé patří mezi tzv. redakční systémy.

Adobe Systems
̶http://www.cojsemvyzkousela.cz/?p=5691
Didaktické využití dalších aplikací
8
Vytvoření webové stránky v nákresech Google

Nákresy Google
Vyzoušejte si vytvořit jednoduchý webový rozcestník pomocí aplikace Nákresy Google. Je to opravdu
velmi snadné a můžete si graficky vyhrát.

Adobe Systems
̶zdroj:
https://docs.google.com/drawings/d/1GSAfN87ZRhl-1DA67ZtTf17LKOPGbfTvTKOT2iS7IHQ/edit?folder=0AMql2Y
EaZnFeUk9PVA
̶publ. obrázek:
https://docs.google.com/drawings/d/1GSAfN87ZRhl-1DA67ZtTf17LKOPGbfTvTKOT2iS7IHQ/edit?usp=sharing
̶webová stránka:
https://docs.google.com/drawings/d/1GSAfN87ZRhl-1DA67ZtTf17LKOPGbfTvTKOT2iS7IHQ/preview
Didaktické využití dalších aplikací
9
Ukázka tvorby v nákresech Google

Adobe Systems
Didaktické využití dalších aplikací
10
Vytváření webu v Google slides
̶https://sites.google.com/mail.muni.cz/usuch2019
̶https://sites.google.com/s/1GvLj7ju5aEGDFaEwjl2SMgsKoyaPeLxM/p/1IElkATj5FTTn4pIqVtl4cEEohBJc6dIx/e
dit
̶

Google slides
Aplikace Google slides (najdete ji mezi aplikacemi Google, stačí mít aktivní Google Suite v IS) Vám
umožní pohodlně vytvořit celý web. V prvním odkaze si můžete prohlédnout web vytvořený pomocí
Google slides a dalších dokumentů Google. Druhý odkaz Vám ukáže editační prostředí, které je
opravdu velmi intuitivní (prosím, nic na tomto webu needitujte).

11
Redakční systémy
̶publikační systém (CMS) -> redakční systém
̶Contao, Joomla
Didaktické využití dalších aplikací

Publikační systémy, tj. systémy pro správu obsahu, se označují zkratkou CMS (Content Management
Systems). Kromě zveřejňování informací na Webu (což je nejobvyklejší použití) umožňují i správu
dalších dat, jež nemusejí být veřejně publikována (vedení agendy uživatelů a jejich e-mailů apod.)
Hlavní výhodou je, že umožňují přenesení pozornosti z formy na obsah. Není tedy třeba být zkušeným
informatikem, aby uživatel publikačního systému mohl např. publikovat článek na příslušném webu.
Redakční systém je takový publikační systém, který je určen ke správě článků i dalších informací v
redakcích. Tj. kromě toho, že by měl pomoci se snadnou a efektivní publikací na Webu, by měl
podporovat i schvalovací proces článků (každý uživatel získá určitou roli, např. redaktor  autor
článků  či šéfredaktor  provádí korektury článků a rozhoduje o jejich zveřejnění), umožňovat
vytvářet skupiny uživatelů se stejnými právy apod. Každý web tvořený redakčním systémem má dvě
„tváře“. Tzv. frontend (veřejné stránky dostupné běžným uživatelům) a tzv. backend (interní
„redakční místnost“, do které mají přístup pouze správci).^47,146

Adobe Systems
̶web Učit se učit (USU)
̶https://ucitseucit.cz
̶https://ucitseucit.cz/administrator
̶starý web není zcela převedený na nový, přístup na něj mají jen správci
̶Video: vkládání článku do Joomly USU
̶žádost o vložení obrázku: https://forms.gle/bKuTrA2PrDr7zwvB6
̶Kalendář společný i pro jednotlivé obory
̶
Didaktické využití dalších aplikací
12
Učit se učit a redakční systém Joomla

Učit se učit a redakční systém Joomla
V redakčním systému Joomla je vytvořený i nový web Učit se učit, který má podporovat studenty
učitelství PřF MU a učitele z praxe. Pro tento web hledáme správce z řad studentů PřF MU, nabízíme
odměnu ve formě stipendií. Pokud by Vás spolupráce zajímala, neváhejte se ozvat na
veru@mail.muni.cz a poctivě téma tvorby webu nastudovat.
Web je dostupný na adrese: https://ucitseucit.cz
Z adresy https://ucitseucit.cz/administrator probíhá administrace pomocí redakčního systému Joomla.
Jelikož není v tuto chvíli žádný tým, co by se o web staral, mnoho věcí ze starého webu ještě
nebylo převedeno. Také je třeba intenzivně rozvíjet nové stránky jednotlivých oborů.
V interaktivní osnově najdete textový návod a soubor videí, které Vám ukážou, jak jednoduchá tvorba
portálu je. Koho by to zaujalo, může se s dr. Švandovou domluvit na vytvoření přístupu do
redakčního systému portálu a tvorbě testovacího článku.

Adobe Systems
̶témata:
̶obecně o studium učitelství na PřF MU
̶o studiu jednotlivých oborů
̶nová periodická tabulka (CHE)
̶nabídka pro školy (CHE) – rozpracovat lépe některou z nabídek
̶výukové materiály jednotlivých oborů
̶vlastní téma
̶
̶
Didaktické využití dalších aplikací
13

Pro vlastní článek si můžete vybrat některé z následujícíh témat nebo přijít s vlastním nápadem.

14
Facebook USU
̶https://www.facebook.com/ucitseucit/
̶tvorba příspěvku z  oboru
̶soubor pro přípravu příspěvků:
https://docs.google.com/document/d/1pnCDe599Hb724MEU9binFOKawsIXiXSJ-tuxANyRaRw/edit?usp=sharing
̶

Facebook Učit se učit
Klasická webová stránka je doplněna i profilem na Facebooku. Hledáme správce, kteří by vytvářeli
příspěvky pro daný obor. K chystání a kontrole příspěvků slouží pomocný soubor na Disku Google.

Adobe Systems
Didaktické využití dalších aplikací
15
Literatura
1.https://cs.wikipedia.org/wiki/Extensible_Hypertext_Markup_Language
2.http://becvarova.com/skoleni/html-tvorba-www-stranek/
3.http://becvarova.com/skoleni/css-kaskadove-styly/
4.https://www.jakpsatweb.cz/