TNPW1 PRŮVODCE SEMESTRÁLNÍM PROJEKTEM Jaké téma je vhodné zpracovat? Téměř jakékoli téma se hodí ke zpracování, jehož výstupem jsou webové stránky. Je vhodné začít u témat, která jsou nám blízká. Určitě bude existovat nějaký herec/herečka, film, seriál, sport, zvíře, které poslouží jako dobrý subjekt pro zpracování. Jaký SW je vhodné použít pro tvorbu projektu? Existuje celá řada volně dostupných nástrojů, které jsou pro účel projektu vhodné, např. PSPad NetBeans Eclipse Visual Web Developper Musím obsah webu sám/sama vymýšlet? Nikoli, TNPW1 není o copywritingu. Informace je možné si obstarat jakkoli (oficiální stránky, wikipedia, literatura, nebo i vlastní obsah). Důležitý je způsob, kterým dané informace prezentujeme. Mám vybrané téma, ale nevím, jak začít. Nemám s tvorbou webů zkušenosti. To se předpokládá. Určitě někde na webu existuje stránka, která je přinejmenším podobná tématu, který chcete prezentovat. Stejně tak existuje velké množství volně dostupných šablon. V žádném případě nelze takové šablony použít pro účel projektu (v takovém případě je projekt automaticky zamítnut). Je však velice vhodné se inspirovat něčím, co už funguje a vyhovuje danému účelu. Z takových šablon je možné inspirovat se rozvržením stránek, barevným schématem, kompozicí Veškerý HTML a CSS kód musí být vlastním dílem autora projektu. Pokud se chcete inspirovat nějakým webem/šablonou, pak pouze pohledem, nikoli kopírováním kódu. Jaké jsou nejčastější chyby, kterých bych se měl/a vyvarovat? Viz přednáška časté chyby v projektech. Výsledkem těchto chyb bývají často minimalistické projekty, zbytečné stránky. Minimalistický projekt je takový, který sice formálně splňuje požadavky (minimálně 1 normostrana textu atd.), ale přesto budí dojem odbyté práce bez rozmyslu. Takový projekt není vhodně formátován, z práce není zřetelný ani náznak rozmyslu, nebo úvahy nad samotnou strukturou. Správný přístup k projektu vyžaduje zralou úvahu o tom, pro koho stránky jsou určeny, co na nich návštěvník hledá a jak mu poskytnout informace v co možná nejpřehlednější podobě Jakoby se jednalo o skutečného zákazníka. Například, pokud vytvářím web o seriálu, měl bych k tomu přistupovat, jako by si web objednali tvůrci seriálu. Je třeba zvážit, jaké informace by měl uživatel vidět na úvodní stránce (zpravidla nějaký souhrn webu) a jaké informace na ostatních stránkách. Samotné stránky by neměly být tvořeny pouze odstavci textu. I takové stránky jdou však dovést do velice zdařilé podoby.
Jaký je optimální rozsah? Viz požadavky. Minimálně 5 stran na souvislé téma. Stránky by neměly být minimalistické (viz ukázky níže). Každá stránka by měla být naplněna přiměřeně informacemi. 2 řádky je extrémně málo a nezaslouží si to svou vlastní stranu. Mluví se zde o podobě, znamená to nutnost použití grafického editoru? V žádném případě, efektivní i efektní design webu lze zvládnout s pár fotografiemi (oříznout nebo upravit na požadovaný rozměr je dokáže snad každý VŠ student informačního směru) a znalostí kaskádových stylů. Je možné uvést nějaký příklad projektů? Ano, následující komentované obrázky by měly vizuálně přiblížit časté chyby či naopak podtrhnout dobré zpracování. Web na obrázku je příkladem dobře zpracovaného projektu. Navigační menu je přehledné, intuitivní. Návštěvníkovi je jasná struktura informací na stránce. Bloky novinek jsou od sebe jasně oddělené. Nadpis novinky je rozeznatelný od data a úryvku textu. Vše je na pohled relativně přehledné. U odstavců textu by neškodil doplňkový obrázek, když se jedná o objekty v okolí.
Web na předchozím obrázku je dalším dobrým příkladem. Vhodně zvolené barevné schéma, kontrastní texty. U novinek je opět vidět rozdílné formátování data/obsahu. V tomto případě by neškodil nadpis u každé novinky a odkaz na detail (který samozřejmě nemusí být funkční), tak, jak je tomu u prvního příkladu. Obsah je vhodně strukturovaný, odstavce jsou logicky oddělené s doprovodným obrázkem (zde má obrázek opět smysl). Pro tvorbu tohoto webu nebyla za potřebí schopnost ovládat grafické editory pouze oříznout a zmenšit pár fotografií.
Tento obrázek demonstruje zbytečnou stránku v dobře započatém, nicméně minimalistickém projektu. Není přece problém vytvořit ceník alespoň na půl stránky (i kdyby měla být data smyšlená), vhodně ho strukturovat a formátovat. Stejný projekt, jiná podstrana. Zde je vidět formátováním a strukturováním nedotčený odstavec textu, který slouží pouze jako výplň ( aby na stránce něco bylo ).
Na tomto obrázku je vidět další nezdařený projekt, který je opět minimalistický. Nezarovnaný formulář a texty o tom jasně vypovídají. Účelem projektu není kupit na sebe elementy, ale ukázat, že je umím správně a vhodně použít. Předchozí dva obrázky ukazují na rozdíl mezi formátovanou a smysluplnou tabulkou a tabulkou, která je v projektu pouze pro to, aby tam nějaká tabulka byla. Rozdíl mezi nimi je patrný na první pohled. Existují tedy přesné postupy, jak daný element formátovat a použít? Přesné postupy v zásadě neexistují. Nedá se jednoznačně tvrdit, že např. hlavičkové buňky tabulky by měly mít tmavší barvu pozadí, nebo že úryvek novinky má mít méně barevně výrazný text, než nadpis. Vše je na uvážení autora.
Když tedy tvořím stránku a nevím, jak mám formátovat například tabulku? V takovém případě je vhodné podívat se na weby s podobnou tématikou nebo na již existující naformátované elementy. Určitě někde na webu bude existovat tabulka, která vám přijde přehledná, elegantní a dobře naformátovaná. Není problém se vizuálně inspirovat. Stejné to je s ostatními případy, jako jsou novinky, nebo fotogalerie. Důležité je u návrhu a formátování přemýšlet o struktuře, kontrastu, významu Je problém použít cizí kód např. lightbox pro fotogalerii, nebo jquery pro animace, pokud budu chtít? Určitě ne. Cizí kód, který je pouze doplňkem a nikoli jádrem projektu a je k použití jinde výslovně určený, lze samozřejmě do projektu vhodně zakomponovat.