Tvorba internetových prezentací a portálů

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.

2. Základní charakteristiky předmětu Osnova 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ě 1024 x 768 bodů v barevné hloubce min. 24 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 (1024x768 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 4]

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: 80251-1117-2  Staníček P.: CSS Kaskádové styly, Computer Press 2003, ISBN: 80-7226-872-4  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-2511519-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]

4. 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í Č.

1

2

3

4

Téma

Základní pojmy www

Webové CMS

XML

HTML, XHTML

[Osnova výuky – grafika

Probírané body

Hod

Historie webu. Server, doména, webhosting, DNS a další základní pojmy. Registrace domény. Registrace webhostingu.

2

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.

4

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

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

Strana 7]

5

6

CSS

Javascript

[Osnova výuky – grafika

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.

14

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

Strana 8]

Učební plán – webové aplikace Č.

Téma

1

Webové aplikace

2

3

5

6

Probírané body

Hod

Vztah mezi webovým serverem, interpretem jazyka a databází. Ukázka a instalace nejpoužívanějšího řešení.

2

Historie databází. Druhy databází. Nejpoužívanější databázové systémy. Relační datový model. Základy SQL.

8

PHP

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í.

16

OOP

Základní pojmy OOP: třída, objekt, instance, metoda, volání metody. Dědičnost. Zapouzdření. Polymorfismus. OOP a PHP. Návrhové vzory.

6

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

4

Databáze

Bezpečnost aplikací

[Osnova výuky – grafika

Strana 9]

Učební plán – architektura a marketing internetových projektů Č.

Téma

Probírané body

Hod

SEO

Vysvětlení pojmu „SEO“. Příklady vhodného použití SEO. Onpage techniky. Offpage techniky. White hat x grey hat x black hat

4

SEM

Vysvětlení pojmu „SEM“. Příklady vhodného použití SEM. České SEM systémy. Světové SEM systémy.

2

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.

4

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.

4

5 Informační architektura Vysvětlení pojmu „Informační architektura“. Příklady návrhu informační architektury.

2

1

2

3

4

[Osnova výuky – grafika

Strana 10]

Učební plán – Rich Internet Application Č. 1

Téma Rich Internet Application

Probírané body

Hod

Vysvětlení pojmu „Rich Internet Application“. Výhody / nevýhody oproti obyčejným webovým aplikacím.

4

2

Ajax

Základní charakteristika prostředí. Výhody / nevýhody. Příklad „Hello Word“.

4

3

Flex

Základní charakteristika prostředí. Výhody / nevýhody. Příklad „Hello Word“.

4

4

Silverlight

Základní charakteristika prostředí. Výhody / nevýhody. Příklad „Hello Word“.

4

[Osnova výuky – grafika

Strana 11]