Metodika výuky multimediálního vzdělávání odborných pracovníků Práce s webem 1. blok Teorie tvorby www Základní technologie Vlastnosti různých softwarů Základy webové grafiky V prvním bloku se účastníci dozvědí, jak funguje prostředí internetu. Teoreticky se probere jaké technologie je možné používat, jaké jsou jejich výhody a nevýhody, včetně možností jejich aplikace pro vědecko výzkumnou činnost. Mezi popisované technologie patří HTML, PHP, CSS a Flash. Cílem první části je, aby účastníci pochopili strukturu a možnosti internetu, a vytvoření nutného teoretického základu pro praktická cvičení. Dalším tématem prvního bloku jsou možnosti softwarového vybavení. Vysvětlení rozdílů, výhod a nevýhod placených programů a programů zdarma. Jako příklady využíváme programy PsPad (zdarma), Adobe Dreamweaver a MS Frontpage. Účastníci mají možnost si všechny programy vyzkoušet a porovnat jejich vlastnosti. Třetí částí je úvod do počítačové grafiky. Pro praktické zvládnutí tvorby webových stránek je nutné porozumět alespoň základním grafickým pravidlům. Účastníci si zkoušejí vyhledat obrázky vhodné velikosti, úpravy velikosti. Celý první blok je veden jako výklad s důrazem na komunikaci s posluchači. Hlavní je snaha zapojit účastníky a seznámit se s jejich dosavadními zkušenostmi. Celé školení probíhá za využití množství příkladů a praktických cvičení na počítačích. 2. blok Základy HTML Nácvik práce v HTML Vytvoření webové stránky v HTML Celý druhý blok se věnuje základům práce s jazykem HTML. Na začátku si vysvětlujeme jaké má jazyk HTML možnosti, jaké je jeho využití. Dále si ukazujeme strukturu dokumentu a účastníci mají za úkol porovnat ideální strukturu stránky s jinou již vytvořenou, ideálně jejich vlastní stránkou. Po teoretickém úvodu si všichni účastníci nainstalují vhodný software, tak aby všichni mohli pracovat ve stejném prostředí. Cílem je praktické zvládnutí dovedností, jako je vyhledání software na internetu, stažení a instalace na běžném PC. Vše připravují účastníci sami za podpory lektora. Po instalaci SW se učíme psát základní prvky jazyku HTML (dále jen značky). Učíme se základní značky pro hlavičku dokumentu, správné nastavení pro zobrazení na internetu. Následují značky pro práci s textem, obrázky, vložení videa a hypertextových odkazů. Vše nejprve ukazuje a vysvětluje lektor na příkladech s využití projekce. Následně si účastníci vytváří vlastní webovou stránku s využitím uvedených prvků. Cílem je zvládnutí dovedností pro vytvoření nové HTML stránky, nebo pro správu již stávajících stránek. Pokud již některý z účastníků má vlastní stránku využije se jako ukázkový příklad pro vysvětlení některých principů. Vždy je kladen důraz na praktická cvičení.
3. blok Tvorba grafických podkladů a webdesignu Seznámení se softwary Kaskádové styly Třetí blok je zaměřen na přípravu a zpracování grafických podkladů. V úvodu si vysvětlujme princip dostupných grafických programů. Ukazujeme si některé komerční programy jako je Adobe Photoshop, ale i freeware varianty GIMP, nebo online software Pixlr. Prvním úkolem účastníků je, zmenšit rozlišení fotografie tak, aby byla vhodná pro použití na webu. Cílem cvičení je procvičení běžných postupů pro práci s obrazem. Většina účastníků již tyto principy zná, proto bývá vhodné zapojit některé pokročilejší funkce grafických programů, jako jsou úpravy jasu, kontrastu a oříznutí obrázku. Druhou navazující částí je použití připraveného obrazu do HTML struktury webové stránky. Ukazujeme si například jak za pomoci Kaskádových stylů (CSS) použít obrázek jako pozadí stránky. Znovu s cílem zvládnutí praktických dovedností potřebných pro běžnou práci s webem. Následuje podrobnější popis technologie (jazyka) CSS. Toto téma je poněkud složitější a většina účastníků ho podrobně nezná. Proto postupujeme od úplných základů k pokročilejším příkladům, vždy ovšem podle tempa účastníků. Velmi záleží na tom, jak jsou posluchači zběhlí v práci s PC, nutná je rutinní znalost práce se soubory, kopírování, složky atd. V některých případech je vhodné zopakovat některé běžné činnosti při práci s Windows. Cílem je praktické zvládnutí jazyka CSS. Vše zkoušíme na praktických příkladech na PC. 4. blok Zéklady programování na webu Formuláře v HTML PHP a JavaScript Čtvrtý blok je věnován základům programování na webu. V úvodu si účastníci vyzkouší vytvoření HTML formuláře ve stránce, včetně komponent jako jsou textová pole, přepínací tlačítka a tlačítko pro odeslání. Po vytvoření formuláře následuje vysvětlení principů a možností jak data z formuláře zpracovat (odeslání na email, uložení do databáze apod.). Nejčastějším principem je využití skriptu pro odeslání emailu ze stránek. Protože toto zpracování vyžaduje již pokročilejší znalost programování, mají účastníci za úkol vyhledat již hotový skript (na internetu) a ten upravit pro vlastní potřebu a aplikovat na jimi vytvořený formulář. Po úspěšném zvládnutí formulářů a jejich odesílání se věnujeme základům programovacího jazyka JavaScript. Účastníci se naučí jakým způsobem provádět ve webové stránce jednoduché matematické operace. Naučí se využívat proměnných a vypsání výsledku do stránky. Vše zkoušíme na praktických příkladech s velkým využitím internetu. Jedním z typických příkladů tohoto bloku je ovládání obrázku pomocí JavaScriptu. Úkolem je připravit dva obrázky, barevný a černobílý. Černobílý vložit do HTML stránky a nastavit funkci tak, aby se obrázek při přejetí myši změnil na barevný a po odjetí zpět. Cílem celého bloku je seznámit účastníky s principy programování. Praktické příklady jsou vhodnou formou, pro to, aby všichni posluchači získali potřebné znalosti pro aplikaci v jejich odborné praxi.
5. blok Publikování na internetu Doména SEO Redakční systémy, šablony Tato část výuky je zaměřena na optimalizaci stránek, s tím související registraci domény a volbu správného webového prostoru. Účastníci se dozvědí jaké jsou možnosti a cenové relace webhostingu. Jaké podmínky je nutné dodržet pro správnou funkčnost webu. V navazující části do nově registrovaného prostoru zkoušíme nakopírovat naše vytvořené webové stránky pomocí protokolu FTP. Cílem je, aby všichni z posluchačů uměli své stránky publikovat na internetu. Druhá část tohoto bloku je věnována optimalizaci stránek SEO. Vysvětlujeme si jaké metody volit, aby stránky měly vysokou návštěvnost a byly dobře k nalezení ve vyhledávačích. Účastníci zkouší analyzovat svoji stránku a vzhledem k optimalizaci v ní provést některé úpravy. Typickým příkladem je správné pojmenování obrázků, správná struktura nadpisů a volba vhodných klíčových slov pro dané téma. Třetí část bývá volitelná. Pokud mají posluchači zájem, věnujeme se principům redakčních systémů a šablon. Toto téma je však příliš rozsáhlé. Proto ukazujme pouze stručnou ukázku možností využití. Cílem celého výkladu je zvládnutí principů publikování webových stránek na webu a jejich optimalizace. 6. blok Multimédia na webu Flash Animace ActioScript Šestý a poslední blok věnujeme zpracování multimediálních souborů na internetu. K tomuto účelu využíváme programu Adobe Flash. V úvodu bloku si vysvětlujeme výhody a nevýhody využití Flash technologií. Účastníci pochopí jakým způsobem Flash funguje a jakým způsobem jej lze využít pro optimalizaci stránek SEO (viz předchozí blok). Po teoretickém úvodu si přímo v prostředí programu zkoušíme vytvořit jednoduchou animaci (reklamní banner pro web). Ukazujeme si jak fungují základní nástroje programu. Důležitou částí školení je export výsledné animace a její použití ve webových stránkách, které jsme vytvořili v předchozích částech kurzu. Součástí programu Flash je i programování pomocí jazyka ActioScript. Vzhledem časové náročnosti popisu nového programovacího jazyka, nechávám na účastnících rozhodnutí, zda-li si chtějí tento jazyk alespoň v základech projít. Úplný závěr školení je věnován individuálním konzultacím. Účastníci se mohou ptát na cokoliv, co bylo v průběhu celého kurzu probíráno. Na konci školení provádíme vyhodnocení kurzu. Cílem je zjistit zda se účastníci se dozvěděli všechny potřebné informace.
Všechna témata byla volena s ohledem na různou vstupní úroveň znalostí účastníků. Někteří před kurzem nemají žádnou zkušenost s tvorbou webových stránek, někteří naopak s webem pracují běžně. Proto vždy začínáme od základů a postupně přidáváme obtížnější příklady. Pro některé účastníky to může být opakovaní již dosažených znalostí, přesto těmito cvičeními získávají na jistotě a zkušenostech. Pokud jsou rozdíly ve znalostech příliš veliké, rozdělujeme účastníky na dvě skupiny a každá dostane jednodušší nebo obtížnější příklad. Posloupnost téma je volena tak, aby posluchači postupně prošli celým procesem tvorby webových stránek. Tedy od nutných základů a teorie, přes základní psaní jazyka HTML, dále se seznámí s principy počítačové grafiky a její aplikace do stránky. Následují složitější prvky jako formuláře a programování. K závěru kurzu se účastníci učí jak své stránky publikovat a optimalizovat. Metoda kurzu vede posluchače od jednoduché stránky, kterou se naučí vytvořit již na začátku kurzu k postupnému vylepšování a doplňování. Cílem potom je tuto stránku zveřejnit na internetu. Ideálně na konci školení mají všichni účastníci svůj nový vlastní web. V úvodu každého bloku se nejprve krátce opakuje obsah předchozího školení. Následně si popisujeme obsah témat, která se budou v daném bloku probírat. Vždy si nejprve teoreticky probereme principy fungovaní daného prvku. Tyto úvodní části jsou obvykle vedeny formou přednášky (teorie) a formou dialogu s posluchači (opakování). Hlavní část kurzu je hlavně praktická. Lektor seznámí posluchače s principy a předvede příklady, účastníci následně dostanou zadání a snaží se, za podpory lektora, toto zadání splnit na vlastním PC. Důraz je kladen zejména na to, aby i po skončení kurzu byly posluchači schopni samostatné práce s webem. Po celou dobu školení se snažíme o maximální zapojení účastníků otázky na dané téma, velké množství příkladů, spolupráce mezi posluchači. Vhodnou metodou je zapojit do výuky nějakou zajímavost, popř. aktualitu související s tématem. Vhodné je také zjistit, jak mohou posluchači využít dosažené znalosti ve svém oboru, a snažit se aplikovat uvedené příklady do jejich praxe. Literatura požadovanáí: Vzhledem k tématu webových stránek je vhodné využívat volně dostupných výukových matriálů na internetu. 1, www.jakpsatweb.cz webové stránky obsahující všechna témata probíraná na kurzu. Stránky jsou přehledné a každý kdo precuje s webem je musí znát. 2, www.jaknaweb.cz velké množství příkladů a skriptů, důležité pro pokročilejší práci s webem. 3, www.w3schools.com stránky o webu v angličtině, všechno programování webu využívá anglických výrazů proto jsou základy angličtiny nutností. Velké množství interaktivních příkladů a testů. Doporučená literatura: Knihy: JavaScript - kompletní průvodce, David Flanagan Tvorba webových stránek, Jiří Fotr a kolektiv autorů HTML a tvorba internetových stránek, Ing. Slavoj Písek
E-learningové kapitoly E-learningové kapitoly byly vytvořeny jako doplňující materiály k samotnému kurzu. Účastníci si mohou doplnit a prohloubit znalosti v tématech - programování pomocí JavaScript a multimédia na webu pomocí Adobe flash. 1, Programování na webu pomocí jazyka JavaScript E-learning je zaměřený na prohloubení již dosažených znalostí programovacího jazyka JavaScript. V kurzu se účastníci naučí nejprve základnímu zápisu jazyka. Vyzkouší si práci s obrázky a doplnění dalších funkcí pro grafické prvky. Velmi důležitou součástí je používání proměnných, bez kterých je programování jakékoliv aplikace nemožné. Práce s datem a časem pro účely webovských stránek je samostatnou kapitolou. V závěru kurzu naleznou účastníci příklady k procvičení a odkazy na další zdroje pro studium. 2, Multimédia na webu pomocí programu Adobe Flash Pomocí této kapitoly se uživatelé naučí vytvářet jednoduché animace a aplikace v programu Adobe Flash. Dále se účastníci dozvědí o prostředí tohoto programu a jak ovládat některé základní funkce. Část kurzu je věnována formátům souborů, se kterými je možno pracovat a které by měli být výsledkem práce. Další kapitolou jsou základy tvorby animací a práci s časovou osou. Dále je zahrnutá práce s tlačítky a jejich propojování na další cíle. Závěr kurzu je věnován programování v jazyce ActionScript. Obě e-learningové kapitoly probírají témata od nutných základů, až po pokročilé příklady.