Význam:

• Rozšiřování dostupnosti internetu

• Náklady klesají, schopnosti rostou

• Webové stránky – odlišné (firemní, osobní, zájmové..)

Před tvorbou:

1. Analýza: cíle a smyslu webu (informativní, prodej…); cílové skupiny; konkurence (zjištění trendů, najít slabiny u konkurence…)

2. Vhodný doménový jméno: krátký, zapamatovatelný, originální; v ČR koncovka - .cz

Struktura stránek

• Logicky uspořádává a rozděluje informace na stránce

• K lepší orientaci uživatele

• Vhodná struktura = stromová

• Při špatném návrhu struktury většinou uživatel opouští stránky

Do webové prezentace by měli být umístěny detaily a rozcestníky

Navigace webu

• Měla by odpovídat struktuře webu, většinou zobrazena jako kombinace:

1. Hlavní navigace – obvykle hlavní menu; jednotná, výstižná a srozumitelná i pro laika; obsahuje hlavní sekce a podsekce; bývá horní a postranní navigace; vhodné záložky

2. Lokální navigace – součást svislého hlavního menu – rozbalená část, na sekce, podsekce

3. Nadpis – unikátní, nese klíčovou informaci

4. Texty webové stránky – nedůležitější; vhodné je členění (odstavce, podnapisy…); musí být jasný a srozumitelný, dobře čitelný

5. Záhlaví – odkazuje na hlavní stránku

6. Zápatí – využíváno k informacím o vlastníkovi stránek

7. Používání zvyklostí – grafické prvky, piktogramy lupy a košíku a další

8. Další – mapa, vyhledávač…

Tvorba grafického vzhledu

1. Barevné schéma navrhujte podle tématu – např. peníze - zelená, krev - červená,

2. Barvy k přilákání pozornosti na nejdůležitější místo – dobrý kontrast, nepřehánět

3. Zdůraznění barvami struktury stránek

4. Nepoužívat moc barev – víc jak 6 = nepřehledné

5. Barvy použít tam, kde jsou potřeba – pro oddělení, zdůraznění,

6. Barvy mohou zrychlit vyhledávání důležitých informací v textu – zvýraznění klíčových slov

7. Spojení barev s významem – červen = nebezpečí, růžová = pro dívky, modrá = pro chlapce

Programová stránka webdesignu

• Před tvorbou nutné stanovit vhodné technologie a postup pro naprogramování stránky

• Základem internetových stránek je jazyk HTML

• Takové stránky mohou být programátory doplněny pomocí jiných jazyků:

• CSS – k popisu způsobu zobrazení jednotlivých značek HTML jazyka v internetovém prohlížeči

• PHP – umožňuje dynamickou změnu stránek na straně serveru – fóra, hodnocení příspěvků…

• SQL – práce s databázemi

• JavaScript – při ovládání různých GUI prvků – tlačítka, textová pole…

SEO – optimalizace pro vyhledávače

SEO – metodika vytváření a upravování stránek, aby jejich forma a obsah byly vhodné pro automatizované zpracování v internetových vyhledávačích

• Cílem je získat ve vyhledávači co nejvyšší pozici – pak je i vyšší a cílenější návštěvnost

Vybrané metody: klíčová slova, kvalitní a unikátní obsah, používání titulků a nadpisů, odkazy z jiných webů, url adresa

Analýza efektivnosti webu – Eye tracking

• Zkoumá grafické rozložení stránky

• Zjišťuje se pomocí senzorů očí – kam se dívají nejvíc a kde to jen přehlédnou (červená, šedá)

Účel – zjištění kam co umístit pro vyšší sledovanost

Google Analytics

• Měřící nástroj pro analýzu webových stránek

• Jedno z nejkvalitnějších, nutno mít google účet

• Analýza o počtu, cílech a činnostech návštěvníků webu

Možnost sledování: návštěvnost kategorií, hledaných klíčových slov, prodejů, přístupu dle destinací, použitých web prohlížečích a operačních systémů

Další nástroje: AWStats, TOPlist, NetMonitor Online

Bibliografické citace ISO 690

Smysl: poskytnutí dostatku údajů o citované publikaci nebo její části, umožňuje její identifikaci

Důvody k citování: ověření uvedených tezí, získání širšího kontextu dané tématiky, informační etika

Autorský zákon – výňatky z cizích děl lze použít v případě:

• Citace výňatků ze zveřejněných děl

• Celých drobných děl do díla vědeckého, odborného, k vyučovacím účelům

• Zveřejněné dílo v přednášce k účelům vědeckým nebo vyučovacím

Citační etika: zveřejnění všech použitých pramenů, označení převzatých částí, typografické odlišení od zbytku, uvedení identifikačních údajů odkazujících na úplnou citaci

Prohřešky: citovat co autor nepoužil, necitovat použitá díla, citace vlastních děl (nemaj souvislost s novým dílem), nepřesná citace

Zásady citace:

• Přehlednost a jednoduchost

• Úplnost

• Citace výhradně z primárních pramenů

• Zachování pravopisné formy

• Chybějící údaj lze vynechat a pokračovat dalším údajem

• Zachování jazyku

Interpunkce není normou stanovena

Pořadí údajů v citaci: tvůrce, název, vedlejší název, typ nosiče, vydání, nakladatelské informace, název edice, číslování, standardní identifikátor, dostupnost, doplňující informace

Metody citování literatury:

1. Pomocí prvního údaje záznamu a data vydání – kulaté závorky

2. Pomocí průběžných poznámek – za každým citovaným místem v textu se umístí číslice

3. Pomocí číselných odkazů – kulaté nebo hranaté závorky pomocí číselných odkazů

Font

Soubor obsahující instrukce pro zobrazení textu na výstupním zařízení

Digitální reprezentace písma:

1. Rastrová – znak je popsán maticí bodů, užívaná dříve

• Nyní pouze pro popis aplikací a operačních systémů

• Založeno na kreslení písma pomocí pigmentů, ty jsou kresleny do rastrové mřížky, která je definována v pixelech

Nevýhoda: způsobuje nepřehlednost i datovou náročnost

2. Vektorová – písmo generováno pomocí křivek, při přiblížení neztrácí na kvalitě

• Postscriptová písma T1 – vytvořeno Adobe, vytváří postscriptové dokumenty pdf, byl patentován, nešel volně využívat

• TrueType – původně od Apple, pak začleněn i do Windows, Apple se vzdal autorských práv, lze volně využívat

• OpenType – podporuje oba formáty, lze otevřít na různých OS, lze efektivně komprimovat

Bitmapová grafika

• Obrázek popsán jako soubor jednotlivých bodů – pixelů, které jsou umístěny do mřížky

• Každý bod má své souřadnice x, y, jas a barvu

• Rozhodující faktory – rozlišení a barevná hloubka – může být vyšší kvalita, ale tím i velikost