Rozšíření výuky informačních technologií na Gymnáziu Pacov Reg. Číslo: CZ.1.07/1.1.01/02.0008 GYMNÁZIUM PACOV Tvorba internetových prezentací a portálů Osnova výuky Bc. Patrik Jíra 27. 12. 2009 Projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky
1. Úvod Tento dokument obsahuje osnovu nepovinného předmětu s názvem: Tvorba internetových prezentací a portálů. Rozšířená výuka IT na Gymnáziu Pacov je, mimo jiné, zaměřena na kvalitní prezentaci informací a nelze tedy opomenout její významnou část tvorbu internetových prezentací a portálů. Studenti gymnázia často vyžadují pokročilejší znalosti v této oblasti, neboť tvorba webů je obecně jednou z nejpopulárnějších a také nejkomplexnějších odnoží IT. Ve standardní hodinové dotaci pro IT ale není dostatek prostoru pro hlubší probrání problematiky, proto je jí věnován celý jeden nepovinný předmět. Osnova předmětu 2. Základní charakteristiky předmětu Stručná charakteristika předmětu: Předmět Tvorba internetových prezentací a portálů si klade za cíl naučit studenty základy běžně používaných technologií tvorby webu a osvojit jim schopnost prohlubování znalostí v tomto oboru. Výstupem studentů pak budou samostatné práce, ověřující pochopení a schopnost aplikace všech vyučovaných témat. Jinak řečeno budou studenti předmětu na konci schopni vytvořit konkurenceschopný internetový projekt dobře zvládnutý po technické i obsahové stránce. Webdesign je poměrně obecným pojmem a v rámci IT rozsáhlým a velice rychle se vyvíjejícím oborem, proto je nutno tento předmět chápat jako úvod do komplexní problematiky a jako návod pro další studium spíše než jako všepokrývající kurz, na jehož konci budou ze studentů hotoví specialisté. Vzhledem k cílové skupině (viz dále) nejde o hromadné kurzy, v kurzu bude vždy max. 16 účastníků na jednoho lektora. Hodinová dotace kurzu: 36 vyučovacích hodin za pololetí, celkem 108 vyučovacích hodin. Kurz je rozdělen do tří poměrně samostatných oblastí po 36 vyučovacích hodinách. Počet studentů: 1 skupina po 8 16 studentech. Cílová skupina Cílovou skupinou jsou žáci víceletého nebo čtyřletého gymnázia kromě prvního ročníku (projekt navazuje na povinnou výuku). Další cílovou skupinou jsou pedagogičtí pracovníci všech aprobací, kteří nadstandardní znalosti v oblasti tvorby webu zúročí ve své pedagogické práci. Cíle modulu profil absolventa kompetence V dnešním světe postaveném na informacích je základní podmínkou pro úspěch schopnost prezentace záměru. Jeho šíře, ať už se bavíme o prezentaci osoby, podnikání, či obecných informací, záleží na finančních možnostech, marketingovém plánu i osobním přístupu marketéra. Nabízet něco světu lze mnoha kanály, vyjmenujme tedy například internet, televizní vysílání, tisk. Informační technologie pokročily za posledních cca 15 let tak daleko, že prezentace formou jednoduchých internetových stránek na jedné straně a komplexním portálem na straně druhé, je dnes zdaleka nejlevnější a nejefektivnější cestou pro zviditelnění jakéhokoliv záměru. Pro absolventy gymnázia může být pak větší konkurenceschopnost díky znalosti internetových technologií a technik klíčová na trhu práce, v akademickém světě, či v životě osobním. [Osnova výuky grafika Strana 2]
Profil absolventa: Absolvent předmětu Tvorba internetových prezentací a portálů: Dokáže vytvořit jednoduchý prezentační web pomocí jednoho z populárních webových CMS. Rozumí základním pojmům technické realizace přenosu stránky ze serveru k uživateli. Dokáže ovládat nejpoužívanější software pro vytváření a editaci textových dokumentů obsahujících např. HTML, XHTML, CSS, PHP, serverové konfigurační soubory, atd. Umí vytvořit dobře strukturovaný, validní (X)HTML dokument. Rozumí přesně jeho obsahu, i pokud byl vytvořen pomocí tzv. WYSIWYG editoru. Zvládne libovolnému (X)HTML dokumentu vtisknout požadovanou grafickou podobu pomocí kaskádových stylů (CSS). V (X)HTML dokumentu rozumí principům klientského skriptování (Javacript) a dokáže jej použít na jednoduché vizuální, validační či jiné drobné efekty. Umí nainstalovat a obsluhovat webový server a doplnit jej o další nezbytně nutný software pro provozování komplexnějších internetových projektů (databáze, nadstavby serveru). Dokáže publikovat svůj projekt (statický i dynamicky generovaný web) na tomto svém lokálním i vzdáleném serveru. Rozumí základům návrhu architektury a designu webové stránky, dbá na dodržování použitelnosti a přístupnosti webu, dokáže tyto veličiny testovat. Ovládá jeden z nejpoužívanějších programovacích jazyků pro vytváření webových aplikací (např. PHP), programuje objektově, jako úložiště dat používá relační databáze (např. MySQL), chápe a aplikuje v praxi techniky bezpečnost aplikací, návrhové vzory, MVC. Je schopen internetovému projektu navrhnout a alespoň částečně zrealizovat reklamní kampaň. Dokáže vytvořit základní aplikaci v některém z RIA prostředí a publikovat ji na webu. Podmínky (vstupní předpoklady) pro tento předmět: Tento kurz předpokládá zkušenosti v ovládání počítače. Žák: Samozřejmě ovládá základní úkony v jemu nejbližším operačním systému (předpokládá se Microsoft Windows) práce s datovými soubory, instalace a konfigurace programů, nastavení operačního systému. Zná a dokáže pracovat se základními běžně používanými datovými formáty PDF, PPT, a další. Efektivně vyhledává informace na internetu, dokáže používat libovolný webový prohlížeč a klient elektronické pošty. Ovládá základy práce s textem a jeho formátování. Disponuje základními znalostmi počítačové grafiky (úprava obrázků, ovládání základních grafických programů). Je schopen samostatně studovat doporučené materiály (a to v omezené míře i angličtině). 3. Organizace výuky a potřebné vybavení Organizační formy a metody výuky a metodické pokyny pro lektory Výuka probíhá v zásadě prezenční formou v počítačové učebně formou teoreticko-praktické výuky. Výuka probíhá pokud možno dvě až čtyři vyučovací hodiny týdně. Po každé vyučovací hodině následuje 10-ti minutová přestávka. Konkrétní časový úsek (dopoledne/odpoledne) bude přizpůsoben možnostem účastníků kurzu a lektora. Součástí výuky mohou být i delší (například půldenní) praktické workshopy v trvání až 6 vyučovacích hodin. Rozsah látky je vzhledem k časové dotaci poměrně velký. Lektor může podle odezvy a schopností účastníků kurzu některé oblasti vynechat a jiné probrat pomaleji. Vhodné je trvat na přípravě účastníků kurzů na některé hodiny, tj. někdy předem zadat samostudium z knihy či webu. [Osnova výuky grafika Strana 3]
Je vhodné někdy zadávat na další hodinu (studijní den) samostatnou práci z probrané látky a věnovat čas jejímu vyhodnocení. U účastníků, kteří nemají doma počítač s potřebným programovým vybavením, je vhodné nabídnout termín pro přípravu v učebně střediska. Způsoby a formy ověření získaných znalostí a dovedností Základní podmínky absolvování nepovinného předmětu jsou dvě: Účast na min 66,6 % vyučovacích hodin. Odevzdání určených souhrnných prací. Technické (hardwarové) vybavení školicího střediska Základní podmínkou je, aby každý účastník školení měl k dispozici vlastní počítač. Nutnou podmínkou je možnost pracovat na všech počítačích s rozlišením minimálně 102 x 768 bodů v barevné hloubce min. 2 bitů/bod (tj. 16,7 mil. barev), nutný je u každého pracoviště kvalitní 17" monitor, ideální 19" nebo větší LCD panel. Nutné je pevné připojení k internetu, čím rychlejší tím samozřejmě lepší. Nutný je dataprojektor, nejlépe s nativním rozlišením XGA (102x768 bodů). Programové (softwarové) vybavení školicího střediska Pořizovací cena profesionálního softwaru pro tvorbu webu je obvykle velmi nízká, pokud vycházíme z počítače s nainstalovanými operačním systémem a základním kancelářským balíkem. Programy pro tvorbu webů jsou totiž většinou vyvíjeny komunitou, nebo poskytovány i pro komerční použití zdarma. Náklady na programové vybavení pro tvorbu webu tedy spočívají spíše v jeho servisu a udržování aktuálních verzí spíše než v jeho pořízení. Předpokládá se využití platformy Microsoft Windows, na stanicích proto musí být minimálně verze Microsoft Windows XP, lépe verze Microsoft Windows 7. Pro práci s textem a případné využití prezentací je vhodná některá verze kancelářského balíku Microsoft Office, nejlépe verze Office 2007 nebo Office 2010. Pro základní úpravy fotografií je možné použít volitelné součásti MS Windows 7 z programu Microsoft Windows Live (Fotogalerie). Pro pokročilejší úpravy je možné použít například free program Gimp. Pro samotné prohlížení a testování webových stránek je nutné mít k dispozici nejpoužívanější prohlížeče (obvykle se za tyto označují Microsoft Internet Explorer ve verzi 6, 7 a 8, Mozilla Firefox, Opera, Safari, Google Chrome). Kvalitní editor textových souborů (záleží na preferencích funkčnosti každého studenta, za standard lze označit například PsPad). Pro spouštění skriptů na straně serveru je nutný lokální webový server (Apache) s doinstalovanou podporou interpretu programovacího jazyka (PHP) a jednou z free relačních databází (MySQL). Jako vhodná volba se jeví předem sestavený balík výše zmíněných aplikací, např. Wamp server, nebo Xampp. Pro vytváření skriptů je samozřejmě možné použít běžný textový editor, ale pro větší komfort práce s projektem i vlastním programovým kódem je vhodné využít některé z běžně dostupných IDE např. Eclipse, Netbeans. [Osnova výuky grafika Strana ]
Seznam literatury Zatímco k tvorbě statických prezentací, čili k technologiím HTML a CSS, existuje velká spousta různě povedených publikací, kvalitních učebnic PHP je už daleko menší výběr a k internetovému marketingu či informační architektuře, či obecně RIA technologiím, lze najít dobrý český tištěný zdroj jen obtížně. Obecně je možné asi nejvíce doporučit vyhledávání konkrétních hesel či názvů technologií pomocí Google.com, české i cizojazyčné informační portály či osobní blogy často obsahují velice zajímavé, aktuální a zdarma dostupné informace. Doporučené publikace Hauser M., Hauser T., Wenz Ch.: HTML a CSS: Velká kniha řešení, Computer Press 2006, ISBN: 80-251-1117-2 Staníček P.: CSS Kaskádové styly, Computer Press 2003, ISBN: 80-7226-872- Staníček a kolektiv: CSS Hotová řešení, Computer Press 2006, ISBN: 80-251-1031-1 Welling L., Thomson L.: PHP a MySQL - rozvoj webových aplikací, SoftPress Gutmans A., Bakken S. S., Rethans D.: Mistrovství v PHP 5, ComputerPress 2007, ISBN: 978-80-251-1519-0 Online zdroje Jak psát web: http://www.jakpsatweb.cz/ Zdroják: http://zdrojak.root.cz Interval: http://www.interval.cz Jiří Kosek: http://www.kosek.cz Každý účastník kurzu obdrží minimálně materiály přímo k předmětu vytvořené. [Osnova výuky grafika Strana 5]
. Učební plány jednotlivých částí Tvorba statických prezentací Webové aplikace Architektura a marketing internetových projektů Rich Internet Application [Osnova výuky grafika Strana 6]
Učební plán tvorba statických prezentací Č. Téma Probírané body Hod 1 Základní pojmy www Historie webu. Server, doména, webhosting, DNS a další základní pojmy. Registrace domény. Registrace webhostingu. 2 2 Webové CMS Nejpoužívanější webové CMS. Založení nového profilu, základní editace stránky. Vytvoření stránky obsahující fotogalerii návštěvní knihu kontaktní formulář Napojení stránek na vlastní doménu. 3 XML Základní charakteristika jazyka, syntaxe. Příklady použití XML. Výhody / nevýhody oproti jiným datovým formátům. Definice slovníků XML (DTD, XML Schema). Jmenné prostory. Související technologie: XSLT, XSL-FO XQuery DocBook 2 HTML, XHTML Základní charakteristika jazyka, verze, syntaxe. Nejpoužívanější verze, budoucí trendy, XHTML. Znakové entity. Atributy. WYSIWYG editory vs. textové editory Základní elementy: struktura, text, bloky, seznamy, odkazy. Další elementy: obrázky, tabulky, rámy, objekty, formuláře. Metaznačky: hlavička, skripty a styly. Validace, nejčastější chyby v struktuře dokumentu. Sémantika HTML, sémantický web. 8 [Osnova výuky grafika Strana 7]
5 CSS Základní charakteristika jazyka. Vysvětlení vztahu CSS a HTML. Nejpoužívanější CSS vlastnosti: font text a odstavec barvy a pozadí velikost a obtékání okraje seznamy pozicování tabulky specifické pro konkrétní prohlížeče Formátování odstavcového textu. Jednoduchý sloupcový layout. Pokročilé CSS techniky. Obcházení chyb prohlížečů. Přehledné formátování CSS. 1 6 Javascript Základní principy použití klientského skriptování. Syntaxe: proměnné, datové typy operátory, výrazy větvení, cykly Nejpoužívanější frameworky: Prototype JQuery Mootools ExtJs Dojo Skrývání a zobrazování obsahu. Grafické efekty. Přehledné formátování Javascriptu. 6 [Osnova výuky grafika Strana 8]
Učební plán webové aplikace Č. Téma Probírané body Hod 1 Webové aplikace Vztah mezi webovým serverem, interpretem jazyka a databází. Ukázka a instalace nejpoužívanějšího řešení. 2 2 Databáze Historie databází. Druhy databází. Nejpoužívanější databázové systémy. Relační datový model. Základy SQL. 8 3 PHP 5 OOP 6 Bezpečnost aplikací Základní charakteristika jazyka. Výhody / nevýhody oproti jiným programovacím jazykům. IDE editory vs. textové editory. Syntaxe: příklad Hello World. proměnné, datové typy, pole. operátory, výrazy větvení, cykly funkce práce s řetězci, regulární výrazy soubory formuláře http hlavičky práce s databází, ORM cookies, sessions rozesílání emailů Zend Framework, Nette framework. Přehledné formátování PHP. Správa verzí. Základní pojmy OOP: třída, objekt, instance, metoda, volání metody. Dědičnost. Zapouzdření. Polymorfismus. OOP a PHP. Návrhové vzory. Proč chránit webové aplikace proti napadení. Šifrování přenosu dat. Bezpečná autentizace a autorizace. Nejčastější druhy útoků a obrana proti nim: SQL injection Cross site scripting Cross site request forgery 16 6 [Osnova výuky grafika Strana 9]
Učební plán architektura a marketing internetových projektů Č. Téma Probírané body Hod 1 SEO Vysvětlení pojmu SEO. Příklady vhodného použití SEO. Onpage techniky. Offpage techniky. White hat x grey hat x black hat 2 SEM Vysvětlení pojmu SEM. Příklady vhodného použití SEM. České SEM systémy. Světové SEM systémy. 2 3 Použitelnost Vysvětlení pojmu Použitelnost webu. Normy použitelnosti. Uživatelské testování. Návrhové vzory. Užitečné nástroje. Příklad analýzy použitelnosti a opravení chyb. Přístupnost Vysvětlení pojmu Přístupnost webu. Normy přístupnosti. Techniky tvorby přístupného webu. Užitečné nástroje. Příklad analýzy přístupnosti a opravení chyb. 5 Informační architektura Vysvětlení pojmu Informační architektura. Příklady návrhu informační architektury. 2 [Osnova výuky grafika Strana 10]
Učební plán Rich Internet Application Č. Téma Probírané body Hod 1 Rich Internet Application Vysvětlení pojmu Rich Internet Application. Výhody / nevýhody oproti obyčejným webovým aplikacím. 2 Ajax Základní charakteristika prostředí. Výhody / nevýhody. Příklad Hello Word. 3 Flex Základní charakteristika prostředí. Výhody / nevýhody. Příklad Hello Word. Silverlight Základní charakteristika prostředí. Výhody / nevýhody. Příklad Hello Word. [Osnova výuky grafika Strana 11]