Slezská univerzita v Opavě Obchodně podnikatelská fakulta v Karviné
SOFISTIKOVANÉ NÁSTROJE PRO JEDNODUCHOU TVORBU PROFESIONÁLNÍCH WEBOVÝCH PREZENTACÍ Distanční studijní opora
Jména autorů Ing. Josef Botlík Ing. Kateřina Slaninová
Karviná 2013 Projekt OP VK 2.2 (CZ.1.07/2.2.00/15.0176) „Rozvoj kompetencí managementu a pracovníků VŠ MSK (s podporou ICT)“
Obor:
Informatika, pedagogika,
Klíčová slova:
www, portál, internet, wysiwyg editor, http, FTP, PHP, CSS, CMS
Anotace:
Účastníci budou seznámeni se základními principy návrhu a tvorby webových prezentací, se základy webmasteringu a zásadami publikování v prostředí internetu. V průběhu kurzu budou prezentovány nástroje, které lze pro tvorbu webových prezentací využít bez nutnosti znalostí HTML jazyka (a jazyků dalších). Jedná se jak o klasické HTML editory (WYSIWYG), tak online editory, v neposlední řadě budou seznámeni také se systémy pro tvorbu obsahu (Content Management Systems, CMS) a redakčními systémy. Výsledné webové prezentace bude možno v duchu moderních prostředků komunikace a prezentace doplnit o dynamické prvky jako jsou ankety, počítadla, chaty, blogy, aktuality apod. Výuka bude probíhat zejména praktickou formou, důraz bude kladen především na skutečné zvládnutí vybraných technologií se zaměřením na reálné využití v praxi. Absolventi kurzu budou schopni v poměrně krátké době vytvořit profesionálně vypadající webové prezentace využitelné pro výuku, prezentaci vlastních publikací, tvorbu vlastních kurzů, či pro osobní potřebu.
©
Slezská univerzita v Opavě Obchodně podnikatelská fakulta v Karviné
Autor:
Ing. Josef Botlík Ing. Kateřina Slaninová .
Lektoři:
Ing. Josef Botlík Ing. Kateřina Slaninová
ISBN
OBSAH 1
Co musíme vědět, než začneme ......................................................................................... 8 1.1
Identifikace souborů a počítačů ................................................................................. 10
1.1.1
URI, URL, URN ................................................................................................ 10
1.1.2
Doména, IP adresa ............................................................................................. 11
1.2
Prostor pro umístění obsahu ...................................................................................... 12
1.2.1
Volba domény .................................................................................................... 13
1.2.2
Doména a webhosting ........................................................................................ 15
1.2.3
WWW server a Webhosting .............................................................................. 16
1.2.4
Přístup k hostovanému serveru .......................................................................... 17
1.3
Nástroje pro tvorbu a editaci obsahu ......................................................................... 18
1.3.1
Tvorba na vlastním PC ....................................................................................... 19
1.3.2
Tvorba na hostovaném serveru, redakční systémy ............................................ 19
1.4
Nástroje pro přenos obsahu a přístup k obsahu ......................................................... 20
1.4.1 2
FTP protokol ...................................................................................................... 20
Základní principy designu www stránek, principy publikování na webu........................ 23 2.1
Internet....................................................................................................................... 24
2.1.1
Fungování internetu ........................................................................................... 24
2.1.2
Služby ISP .......................................................................................................... 26
2.1.3
Typy sítí dle jejich dosahu ................................................................................. 27
2.1.4
Nejčastější síťové architektury v prostředí internetu ......................................... 27
2.1.5
Organizace v prostředí internetu ........................................................................ 29
2.1.6
Internetové standardy ......................................................................................... 30
2.2
Základy tvorby webu ................................................................................................. 31
2.2.1
Internetová stránka ............................................................................................. 32
2.2.2
Typy webových prezentací ................................................................................ 32
2.2.3
Technologie pro vytváření webových stránek ................................................... 32
2.2.4
Nástroje pro tvorbu webových prezentací ......................................................... 33
2.3
Trendy současného webdesignu ................................................................................ 33
2.3.1
Vývoj webdesignu.............................................................................................. 34
2.3.2
Základní pravidla webdesignu ........................................................................... 34
2.3.3
Základní přístupy k webdesignu ........................................................................ 35
2.3.4
Vybrané aspekty webdesignu............................................................................. 37
2.3.5
Proces návrhu webu ........................................................................................... 38
2.3.6
Layout stránky.................................................................................................... 40 3
3
WYSIWYG editory.......................................................................................................... 43 3.1
Stručný úvod.............................................................................................................. 43
3.1.1 3.2
Základní nástroje ................................................................................................ 45
3.2.2
Další nástroje...................................................................................................... 46 Easy Editor - český HTML WYSIWYG editor webových stránek ................... 47
3.3.2
BlueGriffon ........................................................................................................ 52
3.3.3
KompoZer .......................................................................................................... 55
On-line www projekt, WebNode, Imcreator .................................................................... 64 Webnode - Vše snadno a rychle ................................................................................ 64
4.1.1
Registrace ........................................................................................................... 65
4.1.2
Podpora a dokumentace ..................................................................................... 74
4.2
Imcreator ................................................................................................................... 75
On-line editory ................................................................................................................. 79 5.1
6
Ukázky editorů .......................................................................................................... 47
3.3.1
4.1
5
Nástroje ..................................................................................................................... 45
3.2.1 3.3
4
Vybrané editory ......................................................................................................... 80
5.1.1
Aloha .................................................................................................................. 80
5.1.2
FCKeditor, CKEditor ......................................................................................... 80
5.1.3
TinyMCE ........................................................................................................... 82
5.2
Srovnání prostředí ..................................................................................................... 83
5.3
Implementace do prohlížeče ...................................................................................... 85
Systémy pro správu obsahu, redakční systémy................................................................ 87 6.1
Teorie CMS ............................................................................................................... 87
6.1.1
Výhody systémů pro správu obsahu .................................................................. 88
6.1.2
Nevýhody systémů pro správu obsahu............................................................... 89
6.1.3
Srovnání nasazení CMS v praxi ......................................................................... 89
6.1.4
Instalace redakčního systému na web ................................................................ 90
6.2
Webhosting pro CMS ................................................................................................ 92
6.3
MyPage CMS ............................................................................................................ 92
6.3.1
Úvod ................................................................................................................... 92
6.3.2
Instalace a umístění na server ............................................................................ 94
6.3.3
Editace a publikování stránek .......................................................................... 100
6.4
WordPress ............................................................................................................... 101
6.4.1 6.5 7 4
Základní rysy...................................................................................................... 44
Stažení a instalace ............................................................................................ 102
Prostředí systému .................................................................................................... 107
Něco z praxe na závěr .................................................................................................... 111
7.1
Přístupy k online systémům .................................................................................... 111
7.1.1
Webnode .......................................................................................................... 111
7.1.2
Imcreator .......................................................................................................... 112
7.2
Přístupy k doménám a webhostingu pro CMS ........................................................ 112
7.2.1
Doména „sofistikovana.webowka.eu“ ............................................................. 113
7.2.2
Doména „univerzitni.webowka.eu“ ................................................................. 115
7.2.3
Doména „vyuka-opf.kvalitne.cz“ ..................................................................... 116
7.3
Přístupy k redakčním systémům.............................................................................. 119
7.3.1
MypageCMS .................................................................................................... 119
7.3.2
Wordpress ........................................................................................................ 120
7.4
Přístup k hostingu .................................................................................................... 121
5
ÚVODEM Tento výukový materiál je součástí elektronického kurzu. Cílem kurzu je seznámit účastníky se softwarovými nástroji a aplikacemi pro jednoduchou tvorbu webových prezentací. Účast v kurzu nevyžaduje znalost žádného z jazyků používaných pro tvorbu webových stránek. Účastníci budou seznámeni se základními principy návrhu a tvorby webových prezentací a dále se softwarem a aplikacemi, které lze pro jejich tvorbu využít bez nutnosti znalostí HTML jazyka. Absolventi kurzu budou schopni v poměrně krátké době vytvořit profesionálně vypadající webové prezentace využitelné pro výuku, prezentaci vlastních publikací, tvorbu vlastních kurzů, či pro osobní potřebu.
6
RYCHLÝ NÁHLED STUDIJNÍ OPORY Stávající opora je přehledně rozčleněna do sedmi částí. Každá část je doplněna zdroji a odkazy v elektronickém kurzu. 1. Co musíme vědět, než začneme. 2. Základní principy designu www stránek, principy publikování na webu. 3. WYSIWYG editory. 4. On-line www projekt, WebNode, Imcreator. 5. On-line editory. 6. Systémy pro správu obsahu, redakční systémy. 7. Něco z praxe na závěr. V rámci kurzu je pro každou skupinu vytvořen test pro procvičení a kontrolu znalostí. Skripta jsou psána tak, aby umožnila samostatnou formu studia, je dobré si znalosti konfrontovat s dalšími zdroji uvedenými v elektronickém kurzu.
