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: Klíčová slova: Anotace: Informatika, pedagogika, www, portál, internet, wysiwyg editor, http, FTP, PHP, CSS, CMS Úč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 FTP protokol... 20 2 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 Základní rysy... 44 3.2 Nástroje... 45 3.2.1 Základní nástroje... 45 3.2.2 Další nástroje... 46 3.3 Ukázky editorů... 47 3.3.1 Easy Editor - český HTML WYSIWYG editor webových stránek... 47 3.3.2 BlueGriffon... 52 3.3.3 KompoZer... 55 4 On-line www projekt, WebNode, Imcreator... 64 4.1 Webnode - Vše snadno a rychle... 64 4.1.1 Registrace... 65 4.1.2 Podpora a dokumentace... 74 4.2 Imcreator... 75 5 On-line editory... 79 5.1 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 6 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 Stažení a instalace... 102 6.5 Prostředí systému... 107 7 Něco z praxe na závěr... 111 4
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.