Požadavky na přiměřenou softwarovou výbavu se budou lišit na základě toho, jaké má pedagog ambice a kolik času je schopen tvorbě webových stránek věnovat. Následující seznam zajímavých aplikací je tedy nutné brát jako inspirativní. Na gymnáziu s rozšířenou výukou programování a informatiky bude jistě možné provádět práce s PHP framework, jako je Nette či CakePHP. Na druhé straně humanitně orientované školy se spokojí se základní znalostí důležitých tagů a stručným pochopením rozdělení obsahu, vzhledu a struktury dokumentu.
Na tomto místě možné se ještě zmínit o tom, do jaké míry by měla být výuka komplexní. Zde bude opět záležet na tom, do jakých detailů si může pedagog dovolit zajít a na co si troufá. Mimo obyčejnou tvorbu webových stránek je možné se pustit do oblastí, jako je webdesig, tvorba PHP, ale také do práce s redakčními systémy, databázemi nebo řešit otázky optimalizace webových stránek pro hendikepované občany.
Jednou ze základních otázek, kterou je třeba si při tvorbě webových stránek položit, je, zda je cílem výuky seznámit žáky se značkovacím jazykem a naučit je s ním pracovat, nebo jim dát návod, jak snadno a rychle vytvořit rozumným způsobem vypadající webové stránky. Na této úrovni se budou totiž značně rozcházet názory na to, jaký software pro výuku vlastně použít a jakým stylem ji vést.
V prvním případě budou hrát prim vývojová prostředí, textové editory nebo jiné noWYSIWYG nástroje. Výsledkem bude znalost značkovacího jazyka (X)HTML (či HTML 5), snad základy CSS a několik málo dalších drobností. Webové stránky nebudou vypadat nijak moderně či oslnivě, snad jen, pokud bychom přistoupili k práci se šablonami. Výhoda tohoto přístupu je v pochopení, jak webové technologie fungují, rozvíjí myšlení a žák bude schopen případné chyby, které by vytvořil WYSIWYG editor, opravit.
Druhý přístup je silně orientovaný na výsledek. Užívají se již hotová webová prostředí, jako je Webnode, Google Sites, eStránky nebo podobná, případně klasický offline WYSIWYG editor. Příjemné je, že se žáci naučí skutečně rozumným způsobem publikovat na internetu, budou schopni vytvořit funkční (a relativně pohledné i moderní) stránky. Nedostatkem tohoto konceptu výuky je ale to, že nevede k pochopení problematiky tvorby, žáci se neseznámí s významem jednotlivých značek a ani nepochopí, jak fungují značkovací jazyky.
Jako zlatá střední cesta se jeví (dle našeho soudu) spojení obou konceptů. Po výkladu HTML a osvojení si poznatků o tvorbě webových stránek žáky by měla přijít fáze, kdy se seznámí s nástroji, které jim publikování a přípravu dokumentů značně urychlí a zefektivní, ale současně nad nimi budou mít stále určitou kontrolu a schopnost do kódu v případě potřeby zasahovat.
V následujícím článku se pokusíme nabídnout některé zajímavé aplikace, které by mohly posloužit pro výuku tvorby internetových stránek. Ukážeme si zajímavé WYSIWYG i noWYSIWYG editory, webové aplikace, nástroje na tvorbu grafiky pro web nebo práci s kaskádovými styly. Článek se tak snaží být návodem pro ty, kteří se snaží vytvořit prostředí pro kreativní tvorbu webových stránek v rámci výuky. Jistě to ale neznamená, že by bylo nutné užívat všech nástrojů dohromady nebo že je výběr nějakým způsobem úplný. V tomto ohledu se snaží hrát spíše roli inspirativní.
První kategorií aplikací, na kterou se podíváme, jsou noWYSIWYG editory. Dříve byl preferovaným způsobem výuky HTML běžný textový editor. Od této představy se upouští, neboť jednak nijak nekorespondoval s praxí a pak také nebyl pro žáky přehledný a zábavný. Cílem noWYSIWYG editorů je zajistit snadnou čitelnost kódu, zvýraznit syntaxi, odlišit barevně text od dalších prvků. Mimo to se zde objevuje řada dalších užitečných funkcí, jako je správa projektů, automatické doplňování tagů nebo jejich nabídka pro případ, že si žák nepamatuje všechny nebo některé prostě nezná.
Tyto editory většinou podporují větší množství formátů než jen (X)HTML a je možné je použít také pro vývoj PHP aplikací, práci s CSS a řadou dalších příbuzných formátů.
Zajímavým nástrojem je Geny. Jde o open source aplikaci, která je plně multiplatformní. Nabízí spojení vývojového prostředí s textovým editorem, který oproti notepadu nabízí řadu užitečných drobností. Mezi základní vlastnosti patří zvýrazňování syntaxe, sbalování kódu, automatické dokončování symbolů a uzavírání XML a HTML tagů, práce s více dokumenty, správa projektů, poznámky a řada dalších užitečných funkcí.
Podporovány jsou jazyky C, Java, JavaScript, PHP, HTML, XML, CSS, Python, Perl, Ruby, Pascal, Haskell, LaTeX a řada dalších. V Geny je možné si nastavit spojení s kompilátory, takže pokud napíšete program v Pascalu, automaticky se může zkompilovat a spustit. U PHP je kontrolována syntaxe, HTML či XML je zase testováno na validitu. Pokud jste zastánci klasického notepadu pro tvorbu zdrojového kódu, pak Geny je rozhodně volbou, která stojí za zvážení.
Bluefish je editor webových stránek zaměřený na dynamické projekty. Podporuje jazyky HTML, XHTML, CSS, XML, PHP, C, C++, JavaScript, Java, Google Go, Vala, Ada, D, SQL, Perl, R, SVG, ColdFusion, JSP, Python, Ruby či shell. Jde o open source aplikaci, která je stejně jako Geny multiplatformní. Nabízí několik módů tvorby – od noWYSIWYG až po WYSIWYG. Je možné do něj integrovat nástroj na opravu pravopisu, zvládá převod dokumentů na vzdálený server prostřednictvím integrovaného klienta, je možné pracovat s více soubory současně atp.
Bleuefish nabízí mimořádně robustní prostředí pro vývoj webových stránek. Je možné jej použít jak pro klasické psaní kódu, tak také pro vizuální tvorbu. Podporuje převody mezi jednotlivými kódováními, což bývá u webových stránek často problematické. Výhodou jsou pokročilé dialogy, integrace panelu na práci HTML (vkládání značek, tvorba formulářů, tabulek atp.). Mezi zajímavosti patří také integrovaný nástroj na tvorbu náhledů z obrázků, což urychluje a usnadňuje práci.
Druhou variantou tvorby webových stránek jsou WYSIWYG editory. Zatímco u předchozí varianty hrála prim tvorba kódu, zde je sice možná, ale není v popředí zájmu. Jistě je možné opravovat drobnosti, ale rozhodně nejsou určeny k tomu, aby se pro tento účel běžně používaly. Jejich nevýhodou bývá často ne právě přehledný HTML kód, chyby ve validitě nebo přílišné plýtvání místem (soubory jsou často i o třetinu větší, než by bylo nutné). Výhodou je ale rychlost, pohodlí a nepotřebnost znalosti značkovacího jazyka.
Prvním bezplatným a otevřeným nástrojem, který zmíníme, je KompoZer, který je dostupný i v češtině. Umožňuje plně vizuální tvorbu dokumentu, ale je možné se kdykoli přepnout do zdrojového kódu. Mezi základní vlastnosti patří podpora více otevřených dokumentů současně, editor kaskádových stylů (velice pěkně řešený), práce s formuláři, automatická kontrola pravopisu nebo integrovaný FTP klient. Zajímavostí je podpora HTML 5, DOM inspektor a řada dalších podobných funkcí.
Vzhledem k tomu, že v současné době je trend tvorby designu stránek pomocí tabulek, ovládá KompoZer velice solidně také tuto disciplínu. Příjemná je podpora šablon, možnost drobně upravovat podobné stránky nebo velice pěkně řešené nástrojové lišty.
Zcela jiný přístup k tvorbě webu, než je obvyklé, nabízí Aloha. Jde o nástroj pro tvorbu webových stránek v HTML 5 rovnou z okna prohlížeče. Žáci se tak mohou snadno seznámit s touto moderní technologií přímo v praxi. K dispozici je řada šablon, se kterými může uživatel různě nakládat. Text se vkládá do speciálního pole, jeho formátování a práce s odkazy probíhá pomocí ovládacího prvku vytvořeného v JavaScriptu.
Přitom je možné využívat všech vlastností, které HTML 5 přináší, včetně podpory DOM, práce s obrázky, videi a dalšími prvky. Vše je rychlé, jednoduché a výsledky překvapivě dobré a pěkně vypadající. Ač jde o editor, který se používá z okna prohlížeče, pro plnohodnotné užití je třeba si jej stáhnout. Služba tedy není spojená s hostingem.
V článku jsme nabídli dva zajímavé noWYSIWYG a dva WYSIWYG editory, které je možné bezplatně na školách použít. Všechny zmíněné programy jsou navíc multiplatformní. Ve volném pokračování článku se budeme věnovat dalším nástrojům, které mohou najít uplatnění v rámci elektronické přípravy dokumentů pro web, jako jsou grafické editory, CSS editory a zmíníme řadu dalších drobností, které vývojář začátečník (tedy žák) jistě ocení.
Všechny články jsou publikovány pod licencí Creative Commons BY-NC-ND.
Pro vložení komentáře je nutné se nejprve přihlásit.
Tento článek je zařazen do seriálu Elektronická příprava dokumentů.
Ostatní články seriálu:
