Archivní obsah
Tento materiál pochází ze staršího archivu rvp.cz a už není součástí aktuální nabídky. Uchováváme ho, aby na něj dál vedly původní odkazy.
Seriál
Seriál Tvorba a design webových stránek se dělí na 2 díly. První díl obsahuje čtyři témata: Píšeme kód, Přenášíme soubory do veřejného prostoru, Tvoříme design, Webové stránky s přehlednými návody od HTML až po PHP. První téma Píšeme kód nastiňuje některé programy, které ulehčují práci s psaním HTML, CSS, PHP apod., druhé téma Přenášíme soubory do veřejného prostoru představuje některé vybrané manažery pro přenos souborů a technologii XAMP. Třetí téma Tvoříme design popisuje grafické programy, které lze využít pro designování webových stránek. Poslední téma Webové stránky s přehlednými návody od HTML až po PHP popisuje některé užitečné webové stránky pro učitele popř. účastníka vzdělávání samostudenta, které lze využít pro lepší pochopení dané problematiky.
V dnešní době rozvoje technologií se velká část prezentace škol, firem, spolků, ale také jednotlivců děje na poli virtuálním, a to konkrétně na síti Internet. Toto téma reflektuje také (i když ne zcela dostatečně) RVP pro základní vzdělávání, konkrétně v sekci 5. 3. 1 Informační a komunikační technologie – Zpracování a využití informací, na str. 40–41. Tento článek Tvorba a design webových stránek 1 má usnadnit práci pedagogům, kteří mají v plánu vyučovat (popř. již vyučují) jakýkoli předmět, který má ve svém obsahu téma vytvoření webové stránky a jejího designu. První díl nás provede problematikami editorů jazyků HTML, CSS a k nim podpůrných programovacích jazyků, přenášení souborů, nástroje pro designování webu a nakonec doporučení některých podpůrných materiálů v podobě webových stránek, které lze ve výuce použít. Všechny programy a aplikace lze využít ve vzdělávacím prostředí, zejména pro tvorbu školního webu, popř. pro účastníky vzdělávání a jejich vlastní weby.
Pokud vás tedy nebaví při vytváření stránek používat program Poznámkový blok (neboli Notepad), neboť se kód po několika řádcích pro vás stává nepřehledným, nemusíte zoufat. Máte možnost alternativy v podobě textového editoru s názvem PSPad, který je určen pro operační systém Microsoft Windows. V PSPadu si můžete vytvářet své stránky z přednastavených šablon pro HTML, CSS, PHP, Javascript a mnohé další a editovat je přímo na vašem serveru. Program navíc velmi hezky pracuje s obarvením jednotlivých klíčových slov (tagů, atributů, proměnných atd.), takže je mnohem přehlednější než již zmíněný Poznámkový blok. Autorem produktu je Jan Fiala, takže je primárně lokalizován v českém jazyce, ale je samozřejmě možné ho použít v jazyce slovenském a anglickém. Navíc je tento produkt zcela zdarma.
Pokud se vám z nějakého důvodu program PSPad nezamlouvá, je možné využít alternativní program KompoZer. KompoZer je navíc od verze 0.83b hned po instalaci lokalizován do českého jazyka, a to v operačních systémech Windows, Linux a Mac OS. Editovat můžete hned několik webů najednou v jeden okamžik. Navíc obsahuje také CSS editor pomocí, kterého můžete svůj HTML kód automaticky stylovat.
Další vhodnou alternativu se nabízí program Notepad++. Tento program je v základu kompletně přeložený do českého jazyka. K jeho použití pro tvorbu webových stránek je však nutné doinstalovat některé pluginy, které jsou většinou bohužel jen v angličtině. Ještě než budete instalovat jednotlivé pluginy, doporučuji stáhnout Plugin manager, ve kterém je možné pluginy přehledně vyhledávat a spravovat. Jedním z doporučených pluginů je zcela jistě NppFTP, který neslouží k ničemu jinému než k připojování ke vzdálenému FTP serveru. Jeden z přehledů, který nabízí užitečné pluginy pro Notepad++, naleznete v článku 13 Best Notepad++ Plugins For Fast Development ze serveru Web Dev Zoom, který popisuje 13 pluginů vhodných pro instalaci. Bohužel plugin pro tvorbu šablon HTML a CSS chybí nebo není podporován v nejnovější verzi.
The Best Online HTML Editor je další z možností, jakým způsobem psát kód pro webové stránky. Jeho nespornou výhodou je, že celý proces vytváříte online. Dále také patří do rodiny editorů WYSIWYG. Menší nevýhodou je, že v tomto případě je nutnost základní znalosti anglického jazyka.
Dalším velmi jednoduchým WYSIWYG editorem je HTML Editor Online (WYSIWYG).Bohužel je také podporována pouze angličtina. Pyšní se však velmi úctyhodnou kompatibilitou s textovým editorem Microsoft Word, mnohačetnými fonty, styly, smajlíky a dokonce i možností vkládání obrázků a videí. K tomu velmi povedeně podporuje vrstvy a zobrazování českých znaků. Bohužel však nezobrazuje základní kostru souborů HTML a ani podporu CSS tu nenajdete.
Další z kategorie WYSIWIG online editorů se nazývá HTML editor. Po spuštění se nám ve webovém prohlížeči zobrazí dva sloupce. Jeden sloupec reprezentuje editor, ve kterém lze vkládat text, obrázky, videa, seznamy, nadpisy, hypertextové odkazy atd. A druhý přehledně a barevně rozlišené tagy a atributy HTML. Bohužel i zde se musíme smířit s některými omezeními, jako jsou absence základní HTML kostry, nepodporové CSS (pouze v rámci atributu style a velmi omezeně) a lokalizace pouze v angličtině.
V editoru HTML Editor.in, na rozdíl od všech ostatních WYSIWIG online editorů, je možné pracovat v češtině. Funkce jsou většinou stejné nebo velmi podobné jako u předchozích editorů (vkládání textu, obrázků, hypertextových odkazů, nadpisů atd.). Navíc tento editor podporuje vkládání flashových aplikací.
WinSCP je opensourceový nástroj pro přenášení souborů mezi vaším počítačem a vzdáleným serverem. Protokoly, se kterými WinSCP pracuje, jsou různé, např. FTP, SCP, SSH atd. Uživatelské rozhraní je velmi obdobné jako Total Commader (pro ty z nás, co začínali na MS DOS Norton Commanderu). Pokud jste s těmito programy nikdy nepřišli do styku, nevadí. Princip je velmi jednoduchý. Přihlásíte se na předem vytvořený webový server (ať už vás nebo u některého z poskytovatelů, jako je např. Webzdarma) a zobrazí se vám dva panely. V prvním jsou zobrazeny soubory a složky z vašeho lokálního počítače a ve druhém složky ze vzdáleného serveru. Využitelnost tohoto programu je tedy při nahrání souborů na váš webový server (popř. jednotlivé webové servery účastníků vzdělávání).
Pokud by vám z nějakého důvodu nevyhovoval program WinSCP, je možné využít plnohodnotnou alternativu, která je také v češtině. Řeč je o nástroji jménem FileZilla. Ohledně použitelnosti si troufnu říci, že tento nástroj má v podstatě shodné funkce. S jediným rozdílem, a tím je interface (neboli vzhled prostředí), ale je také velmi intuitivní. Tento program je tedy také opensource a lze jej využít na platformách Windows, Linux a Mac OS.
Další možnou alternativou k použití přenášení souborů je FreeComander, který plně podporuje češtinu. Tento freeware program používá technologii duálního panelu a záložek (stejně jako WinSCP a FilleZilla), dále soubory a složky zobrazuje ve stromové struktuře, podporuje archivování souborů ve formátu ZIP (pomocí pluginů lze i RAR a 7z), je možné v něm vytvářet screanshoty, nastavovat filtry, hromadně přejmenovávat apod. Toto všechno navíc zdarma a s podporou češtiny a pro webové technologie velmi důležitá podpora protokolu FTP (zašifrované přenosy jako SSH, SFTP a další program bohužel nepodporuje).
Pokud budeme zabíhat trošku do podrobností a přestane nás bavit vytvářet statické stránky doplněné pouze Javascriptem (popř. Jquery), velmi pravděpodobně narazíme na programovací jazyk PHP., databázový systém MySQL a program Apache, který simuluje na lokálním počítači HTTP server, popř. jim podobné. Samo sebou můžeme testovat jednotlivé produkty samostatně, popř. již na založeném účtu (např. Webzdarma), ale je zde možnost nainstalovat si tyto produkty naráz pomocí tzv. XAMP serveru, kde X rozumíme operačním systém (WAMP – Windows, LAMP – Linux, MAMP – Mac OS), A již zmíněný Apache, M – MySQL a P PHP. Pro variantu WAMP lze vyzkoušet např. WAMP server.
Program Irfanview vytvořený Irfanem Škiljanem je primárně určen pro prohlížení a úpravu obrázků a fotografií různých formátů (lze také spouštět videa a zvukové formáty). Další velkou výhodou je překlad do českého jazyka. Kromě jiného umí program velmi přehledně využívat hromadné přejmenování a konverzi obrázků. V dávkové konverzi a přejmenování lze nastavovat od číslování jména přes otáčení, zaostřování, počtu barev až po formáty souborů obrázků. Zřejmě hlavní výhodou je však velmi intuitivní ovládání.
Trochu sofistikovanější alternativou je online freewerový nástroj jménem Pixlr. Tento nástroj spojuje výhody obou předchozích a navíc je nezávislý na operačním systému. Problém může nastat pouze u mobilních zařízení, která často flash nepodporují (nativně nepodporuje flash také např. prohlížeč Chrome, ale naštěstí lze donastavit). Při spuštění webového rozhraní máte možnost vybrat si ze dvou nástrojů Pixlr editor a Pixlr Express. Pixlr editor nabízí komplexní nástroj pro vytváření a úpravu obrázků či fotografií, pracuje s vrstvami a lze v něm použít nepřeberné množství filtrů, transformací, otáčení atp. Navíc je kompletně přeložen do češtiny. Oproti tomu Pixlr Express není ničím jiným než jednoduchou webovou aplikací pro rychlou úpravu obrázků a fotek spolu s přidáváním efektů. Nevýhodou však je jazyková lokalizace pouze do angličtiny. Celý velmi podnětný článek, který se zabývá touto problematikou, s názvem Počítačová grafika v Pixlr Editoru o tomto editoru naleznete na Učitelském spomocníku od pana Mgr. Michala Strnada.
Pro tvorbu grafického designu je zapotřebí také sáhnout i po nějakém sofistifkovanějším programu, který např. pracuje s vektory, umí pracovat s vrstvami atd. Jedním z takových programů je Inkscape, který je asi největší open source alternativou pro programy Corel Draw a balíček Adobe. Program je navíc kompletně v češtině dostupný pro operační systémy na bázi Linuxu, Windows a Mac OS X. Navíc nativním formátem je svg, který podporuje většina vektorových programů. K Inkscapu najdeme mnoho podpůrných materiálů např. na serveru ABC Linux, Inscapers a samo sebou videotutoriály na serveru youtube.
Ovšem sem tam potřebujeme složitěji upravovat obrázky, které nepracují s vektory, ale s pixely, tzv. obrázky bitmapové. Samozřejmě lze použít již zmíněné programy Irfanview nebo Pixlr. I přesto však zmíním ještě jeden velmi užitečný, opět open source. Tím programem je Gimp. Je lokalizován do češtiny, takže se nemusíte bát jazykové bariéry. Navíc se jedná o alternativu programům Adobe Photoshop, popř. Corel PhotoPaint. Lze s ním pracovat v operačních systémech Windows, Linux, Mac OS X. Oproti Irfanview a Pixlr obsahuje mnohem více možností a pro jeho použití nemusíte být připojeni k internetu.
Pokud hledáte webové stránky, které by vám ulehčili práci s dohledáváním tagů a jejich atributů, CSS vlastností a jejich parametrů, programování v Javascriptu doplněné o jednoduché příklady, tak je webová stránka Jak psát web přesně pro vás. Velkou výhodou že celé stránky jsou kompletně v češtině. Troufnu si říci, že pedagog může tento web z velké části využít jako základní materiál (popř. skriptum) k výuce informatiky, popř. přímo zaměřeném předmětu (kurzu) na tvorbu webových stránek. Menší nevýhodou je, pokud si potrpíte na validitu kódu, že často narazíte a budete hledat v jiných zdrojích.
W3 Schools je typickým zástupcem webové materiálu, který velmi pečlivě řeší validitu kódu. Zdali váš web odpovídá jednotlivým standardům, můžete otestovat na HTML validátoru a CSS validátoru Na stránkách si lze dokonce i zkoušet, jak bude vaše stránka v HTML vypadat bez složitého ukládání pod touto miniaplikací. W3 Schools není však jen o HTML a CSS. Jsou zde zastoupeny mj. i technologie PHP, SQL, Javascript, XML a mnohé další. Zřejmě nejpalčivější nevýhodou je lokalizace pouze do anglického jazyka.
Další z velmi užitečných stránek, které napomáhají k pochopení problematiky tvoření webů, jsou IT Network. Projekt obsahuje velké množství tutoriálů, příkladů a dalších materiálů pro výuku IT, pro tvorbu webových stránek jsou důležité zejména seriály HTML + CSS a PHP. Velmi dobré je, že u každého článku je možnost přímo kontaktovat autora. Články jsou navíc velmi precizní a plné vizuálně zpracovaných příkladů. Nevýhodou však je, že některé díly (zejména ty, které obsahují procvičovací cvičení) nejsou zdarma. Pro přístup k těmto článkům můžete buď sami publikovat, nebo zaplatit (jednotlivé články kategoriích HTML, CSS a PHP jsou zpoplatněné většinou 25 Kč / článek).
Jedním z velmi pěkných příkladů webu, který se mj. zabývá výukou tvorby a designu www stránek, jsou Stránky k výuce informatiky, které vznikly na podporu výuky žáků Gymnázia ve Vlašimi. Stránky často odkazují na již zmíněné seriály jako IT Network, Jak psát web a další. Doplňují však seriály svými příspěvky a materiály. Možnost inspirace je zcela jistě také ve zpracovaných prezentacích, jako je např. Úvod do HTML – prezentace. Stránky se však neomezují pouze webový technologiemi, ale lze na nich najít i materiály a odkazy k tématům algoritmizace a programování, počítačová grafika, databáze apod. Takže zde nalezneme také 20. lekcí k používání programu Inkscape, podporu k programu Gimp atd. Inspirací může být poměrně detailně zpracovaná osnova kurzů.
Tato první část již zmíněného seriálu Tvorba a design webových stránek mapuje některé programové vybavení a odkazy na konkrétní podpůrné materiály pro výuku. Tvoření a designování webu je dle mého názoru velmi důležitou kompetencí pro možnost sebeprezentace, vylepšení kariérního růstu, rozvoje kreativity, rozvoje algoritmického myšlení atd. Z pohledu výuky programovacích jazyků má navíc obrovskou motivační výhodu – poměrně rychlého prvního viditelného výsledku. Je tedy nutné tato fakta reflektovat a zapojovat tyto informačně a komunikačně technologické kompetence do výuky. Pevně věřím, že tento článek může být oporou pedagoga ve vyučovacím procesu, popř. i v inspiraci, které programové vybavení lze s účastníky vzdělávání využít.
Tento materiál je publikován pod licencí Creative Commons – Uveďte původ – Neužívejte komerčně – Nezpracovávejte 3.0 ČR.
Článek svým obsahem přesahuje vzdělávací cíle a očekávané výstupy oblasti ICT na základní škole. Nabízí tedy nástroje pro činnosti na školách s rozšířenou výukou ICT nebo pro zájmové útvary. Od učitelů, kteří hodlají zařadit do vzdělávání dětí psaní HTML kódu, se očekává přiměřená odborná způsobilost pro tuto činnost i nadstandardní dovednost při práci se vzdálenými souborovými systémy. Z obojího plyne, že článek je vhodný jen pro omezenou skupinu vyučujících na základních školách.
Nelze však opomenout, že psaní HTML kódu rozvíjí u dětí chápání pravidel pro formátování textu a může být branou pro psaní skriptů a základům objektového programování. Pro tento případ článek nabízí základní přehled užitečných nástrojů.
Odborný recenzent
David Hawiger
