Význam uživatelských scénářů

• Z uživatelských scénářů by měla vycházet

  • struktura webu,

  • obsah a rozložení jeho jednotlivých stránek

  • propojení souvisejících stránek pomocí kontextových odkazů

• Měli byste si být jisti, že se návštěvník na vašem webu při žádném scénáři neztratí a najde vždy to, co potřebuje

• Další výhoda uživatelských scénářů je, že podle nich můžete web testovat

  • berete jeden scénář za druhým a zkoušíte si web podle nich procházet (sami si tedy simulujete uživatele)

  • dáváte reálným lidem úkoly vycházející ze scénářů a pozorujete, s čím mají na webu problémy

Nároky na vzhled webu

• Vzhled webu by měl především:

  • zaujmout při první návštěvě

  • vzbudit v lidech důvěru v obsah webu i jeho provozovatele

  • podpořit funkcionalitu webu

  • vhodně doplnit obsah

  • odlišit web od konkurence

Webový server a klient

• Webové stránky (dokumenty) bývají umístěny na počítačích trvale přístupných na internetu – webový (www) server

  • dokumenty jsou adresovány pomocí URL (Uniform ResourceLocator)

    • součástí je protokol, doménové jméno serveru, jméno dokumentu (stránky) a parametry např. http://www.vsmie.cz/stranka.html?act=view&user=tomas

    • název naprosté většiny serverů začíná zkratkou www, i když je možné používat libovolné jméno

• Uživatel si webové stránky prohlíží pomocí (lokálního) webového klienta – internetový prohlížeč

  • Internet Explorer, Mozilla Firefox, Opera, Chrome, …

  • Zasílá požadavky na webový server

  • Rozhoduje o zobrazení objektů různých typů

    • Některé formáty dokáže zpracovat sám, pro jiné volá externí programy

Zobrazení webové stránky

• Proces zobrazení webové stránky na počítači uživatele:

  • prohlížeč převezme od uživatele adresu webové stránky

  • prohlížeč kontaktuje webový server a vyžádá si zaslání žádané webové stránky

  • server buď stránku vyhledá na disku nebo ji dynamicky vytvoří

  • případně o její vytvoření požádá jiný program – interpret skriptovacího jazyka (např. PHP)

  • prohlížeč stránku převede do grafické podoby a zobrazí uživateli

  • prohlížeč si vyžádá od serveru další samostatně uložené části stránky (např. obrázky)

Statické vs dynamické stránky

• Statická webová stránka

  • stránka existuje na serveru v kompletní podobě

  • server ji na požádání odešle klientskému prohlížeči

• Dynamická webová stránka

  • stránka, jejíž podoba není přesně předem dána

  • na straně klienta

    • finální podobu stránky dotvoří klientský prohlížeč

    • obvykle pomocí speciálního prográmku v JavaScriptu

  • na straně serveru

    • stránka je vytvářena serverem na základě prohledání určité databáze a pak odeslána klientovi

    • např. jízdní řád, telefonní seznam, obchodní rejstřík, …

    • programovací jazyk serveru – jazyk PHP (Personal Home Page)

Doménové jméno a umístění webu

Doménové jméno

• Internetová doména (doménové jméno)

  • jednoznačné jméno (identifikátor) počítače nebo počítačové sítě, které jsou připojené do internetu (mají svoji IP adresu)

  • příkladem doménového jména je www.example.com, pef.czu.cz, …

• Prostor doménových jmen tvoří strom

  • v kořeni je speciální vyhrazené prázdné doménové jméno

  • pod kořenem jsou uspořádány všechny domény nejvyššího řádu (1.úrovně), v další úrovni jsou domény 2. úrovně atd.

Domény nejvyššího řádu

• Počet domén první úrovně je omezený a schvaluje je Autorita pro přidělování čísel na Internetu (IANA resp. ICANN)

  • obecné domény (generické, gTLD) – 20 domén, například .com, .net, .org, .edu nebo novější .info, .biz, …

    • některé z nich jsou sponzorovány organizacemi, které zaštiťují přidělení subdomén podle omezujících pravidel, např. .aero pro leteckou přepravu nebo .museum pro muzea,

  • národní domény (ccTLD) – téměř 250 domén, podle ISO 3166 dvoupísmenných zkratek státůnapříklad .cz, .sk, .eu, .ar, .au, …

Domény 2. a 3.řádu

• Domény 2.řádu přiděluje správce odpovídající domény 1.řádu

  • pro doménu .cz je to sdružení CZ.NIC (www.nic.cz)

  • registrace domény je placená služba

  • příklady: seznam.cz, czu.cz, mojefirma.cz, …

• Domény 3.řádu (a dalších řádů) může vytvářet správce (majitel) domény 2.řádu

  • příklady: mail.seznam.cz, pef.czu.cz, www.mojefirma.cz

Domény – pojmy

• Centrální registr

  • Databáze o Doménových jménech, jejich držitelích a dalších osobách vedená sdružením CZ.NIC, případně dodavatelem sdružení CZ.NIC. Centrální registr je zdrojem pro delegaci Doménových jmen do zóny CZ vedené primárním jmenným serverem.

• Delegované Doménové jméno

  • Registrované Doménové jméno o němž CZ.NIC vede záznam na primárním jmenném serveru (tzv. zóna CZ)

• ccTLD .cz

  • Country code Top Level Domain (doména nejvyššího stupně, tzv. národní doména) České republiky

• Pravidla registrace

  • Dokument „Pravidla registrace doménových jmen v ccTLD .cz“ vydaný sdružením CZ.NIC

Registrace Doménového jména

• prostřednictvím některého z registrátorů - vedená sdružením CZ.NIC

• souhlas každého žadatele s aktuální verzí pravidel registrace

• prohlášení osoby, že je oprávněna jednat jménem žadatele

• sdružení CZ.NIC registruje doménová jména podle pořadí, ve kterém byly doručeny jednotlivé žádosti o registraci

• registruje se vždy na celé násobky roku počínaje dnemregistrace doménového jména, nejvýše však na 10 let

• registrací doménového jména je dané doménové jméno na stanovenou dobu vyhrazeno Držiteli

Umístění webu

• Pro běžné informační firemní weby většinou postačí klasický sdílený webhosting

  • Webhosting je pronájem prostoru pro webové stránky na cizím serveru

  • Poskytovatelé většinou u webhostingu nabízí technologie pro tvorbu a použití dynamických webových stránek

  • Stránky na server se kopírují pomocí vzdáleného přístupu uživatele na server

  • Součástí jsou většinou také e-mailové schránky s antispamovými a antivirovými filtry

  • Samozřejmostí také bývá technická podpora pro zákazníky

  • Zákazník webhostingu zaplatí pouze zlomek toho, kolik by ho stál provoz vlastního serveru.

  • Serverhosting, kdy je zákazníkovi pronajímán celý server

SEO optimalizace webu

SEO

• SEO (Search Engine Optimization) - optimalizace pro vyhledávače

  • metodika vytváření a upravování webových stránek takovým způsobem, aby jejich forma a obsah byly vhodné pro automatizované zpracování v internetových vyhledávačích

  • cílem je získat ve výsledku hledání ve vyhledávačích, které odpovídá obsahu, pro danou webovou stránku vyšší pozici tím četnější a zároveň cílené návštěvníky

• Internetový vyhledávač za pomoci botů (nebo též crawlerů, robotů) stahuje v různých časových periodách obsah webových stránek a dalších dokumentů, které pak analyzuje, indexuje a ukládá do databáze

Metody a techniky SEO

• Pozice stránky ve výsledcích vyhledávání závisí na tom, do jaké míry podle algoritmu vyhledávacího stroje splňuje daná stránka očekávání vyhledávajícího uživatele

  • techniky SEO se snaží algoritmům vyhledávačů vyjít vstříc

  • většina uživatelů při hledání věnuje pozornost jen několika prvním odkazům

• Tvůrci stránek používají mnoho různých technik

  • některé považované za správné a etické

  • jiné považované za nevhodné, neetické

  • také sporné z hlediska účinnosti (pověry)

Etické metody

• Kvalitní a unikátní obsah

  • stránka by měla mít kvalitní a unikátní obsah, pravidelně aktualizovana

• Používání (X)HTML značek (tagů) podle normových předpisů

  • tvůrce stránky by měl používat na správných místech doporučený sémantický i syntaktický zápis značek pro daný jazyk HTML či XHTML - například h1 pro nadpis první úrovně, em pro zdůraznění, strong pro silné zdůraznění

  • vyhledávače takovému textu přikládají větší význam

• Používání titulku, nadpisů a popisů (title, h1, alt)

  • tvůrce by měl uvádět v titulku objektů (oddíly stránky, obrázky, tabulky a další) konkrétní popis

• Krátká a neměnná URL adresa

  • uvedení krátké URL adresy podpoří zájem ostatních uživatelů odkazování na stránku

  • příliš dlouhá a lidem nesrozumitelná URL adresa naopak od odkazování spíše odrazuje

  • přítomnost klíčového slova v URL adrese může u některých vyhledávacích strojů zvýšit umístění stránky ve výsledcích hledání těchto slov

  • naopak se nedoporučuje používat v URL parametr id

  • ano -> http://example.cz/katalog/sede-kreslo-skladaci

  • ne -> http://example.cz/katalog?id=432&what=B603AA60CC16206AC1257054003EA0EB&kat=jjdd

• Budování zpětných odkazů

  • pokud je na stránku odkazováno z jiných webů, zvyšuje se její hodnocení

    • v případě Google je to PageRank, u Seznamu je to S-Rank, u Jyxo.cz je to jyxorank

  • kvalitní obsah zvyšuje šanci, že bude na web odkazováno z jiných zdrojů

• Používání description, keywords

  • vhodným používáním klíčových slov v metaznačce descriptionzíská stránka v hodnocení robota další kladné body

  • př.: <meta name= “description“ content= “Popis stránky …“>

• Správné používání souboru robots.txt a sitemap.xml

  • robots.txt -> textový soubor, který umožňuje správci webu zakázat nebo povolit přístup většiny robotů na stránky webu

  • sitemap.xml -> XML soubor obsahující mapu (odkazy) vnitřních stránek webu, která usnadňuje robotům orientaci

Neetické metody

• Proti takovým technikám se vyhledávače snaží bránit

  • stránkám, které takové techniky používají, hrozí při odhalení výrazný propad ve výsledcích, avšak přinejmenším krátkodobě takové techniky mohou být úspěšní

• Spam

  • stránka, na kterou vede velké množství zpětných odkazů, je obecně považována za lepší

  • tvůrci stránek se pokouší zvýšit počet takových odkazů tím, že odkazy na své stránky umisťují do internetových diskusí, do komentářů k příspěvkům v blozích apod.

• Oklamání robotů

  • tvůrce stránky se může pokusit o to, aby zobrazoval vyhledávacím robotům jiný obsah, než ostatním návštěvníkům a tím se dostal na přední pozice

• Skrytý text

  • vyhledávače berou v potaz při řazení výsledku i frekvenci klíčových slov/frází

  • tvůrce stránky si tuto frekvenci může uměle zvýšit tím, že na stránku umístí text, který obsahuje několikrát různá klíčová slova a ten následně skryje

Nástroje pro SEO

• Přední vyhledávače (např. Google, Seznam) poskytují bezplatné nástroje pro tvůrce webu, které mohou pomoci zlepšit pozici webových stránek

  • zobrazit, se kterými částmi stránek měl problémy prohledávač

  • nahrát soubor sitemap.xml, analyzovat a vytvářet soubory robots.txt

  • odstranit adresy URL, které už prohledávač prošel

  • zadat preferovanou doménu,

  • rozpoznat problémy se značkami metadat

  • zjistit, jaké dotazy vyhledávání na stránky nejčastěji odkazují

  • podívat se, jak vidí stránky prohledávač

  • odebrat nechtěné odkazy Sitelinks, …

Nástroje pro SEO – Google a Seznam

• Google Analytics - nástroj pro zjištění, odkud návštěvníci webu přicházejí a co prohlíží

• Google Adwords - placená služba umožňující zobrazení reklamy vedle výsledků vyhledávání na základě vybraných klíčových slov

• na Seznamu – služba SKLIK

Pravidla pro tvorbu přístupného webu

Základní skutečnosti

• Zpřístupnění obsahu webových stránek osobám se specifickými potřebami

  • 100 000 osob v ČR s těžkým zrakovým postižením

• Speciální technologie

  • Hlasové nebo hmatové výstupy, SW lupy, barevné schéma, kontrast

• Základní skutečnosti

  • Pouze informace v textové podobě

  • Lineární vnímání informací na stránce

  • Obsluha počítače a SW pomocí klávesových povelů

  • Pomocí SW lupy je zobrazována pouze malá část stránky

Aktuální dokumenty

• Pravidla pro tvorbu přístupného webu

  • Ministerstvo informatiky ČR

  • Ministerstvo vnitra ČR

  • Novela Zákona č. 365/2000 Sb. o informačních systémech veřejné správy, provedená zákonem č. 81/2006 Sb.

• Dokumentace zásad přístupnosti webových stránek pro těžce zrakově postižené uživatele

  • Metodický návrh – verze 2.3

  • SONS, Blind Friendly

Pravidla pro tvorbu přístupného webu

• Ve shodě s tzv. pravidly WAI (Web Accessibility Initiative, Iniciativa pro bezbariérový přístup)

  • http://www.w3.org/WAI/

• Pravidla

  • Obsah webových stránek je dostupný a čitelný

  • Práci s webovou stránkou řídí uživatel

  • Informace jsou srozumitelné a přehledné

  • Ovládání webu je jasné a pochopitelné

  • Kód je technicky způsobilý a strukturovaný

  • Prohlášení o přístupnosti webových stránek

Pravidla s nejvyšší prioritou

• Grafické objekty, které slouží k ovládání stránky, mají definovanou textovou alternativu

• Informace, sdělované prostřednictvím skriptů, objektů, appletů, kaskádových stylů, obrázků a jiných doplňků na straně uživatele jsou dostupné i bez kteréhokoli z těchto doplňků

• Všechny tabulky dávají smysl čtené po řádcích

• Vše, co obsahově patří do jedné buňky, opravdu je v jedné buňce i z hlediska struktury definice tabulky

• Tabulka je pro nevidomého čtenáře „linearizována“ po řádcích, nikoliv po sloupcích

• Z hlediska přístupnosti tabulek pro slabozraké uživatele platí:

  • Šířka a výška buněk by měla být definována pomocí relativních měr, nikoliv absolutních

  • Vhodná kombinace barev pro odlišení jednotlivých částí tabulky

  • Dostatečně silné pruhy pro orámování tabulky

  • ->Problém s tabulkovým formátováním stránek

• Klikací mapy jsou vytvořeny tak, že jsou přístupné pro zrakově postižené

  • Většina odečítačů obrazovky zpřístupnění klikací mapy podporuje buď v malé míře nebo jen za určitých podmínek

  • Barevná kombinace celého obrázku, jenž je klikací mapou, je velmi často málo zřetelná

• Obsah WWW stránky se mění, jen když uživatel aktivuje nějaký prvek

  • Automatické obnovování stránky

  • Automatické přesměrování

  • Přesměrování po najetí na určitý objekt stránky

• Označení každého odkazu výstižně popisuje jeho cíl i bez okolního kontextu

• Informace sdělované barvou jsou dostupné i bez barevného rozlišení

  • Odkazy

  • Povinné položky formulářů

• Barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není použit vzorek, který snižuje čitelnost

  • Pro jas: 125 bodů (256)

  • Pro rozdíl barev: 500 bodů (765)

• Předpisy určující velikost písma nepoužívají absolutní jednotky

  • Klíčová slova - xx-small, x-small, small, medium, large, x-large a xx-large

  • Hodnoty - smaller, larger, %

• Kód webových stránek odpovídá nějaké zveřejněné finální specifikaci jazyka HTML či XHTML.

  • Neobsahuje syntaktické chyby, které je správce webových stránek schopen odstranit

• Na webové stránce nebliká nic rychleji než jednou za sekundu

  • Použité animace či dynamicky se měnící prvky na stránkách se nesmí trvale měnit s frekvencí větší než 1 Hz

• Každý formulářový prvek má přiřazen výstižný nadpis

• Všechny netextové prvky nesoucí významové sdělení mají textovou alternativu

  • Význam (alt s hodnotou) vs dekorace

Pravidla se střední prioritou

• Všechny netextové prvky nesoucí významové sdělení mají textovou alternativu

• Webová stránka uvádí své hlavní sdělení na svém začátku

• Každá webová stránka má smysluplný název, vystihující její obsah

• Uživatel je předem jasně upozorněn, když odkaz vede na obsah jiného typu, než je webová stránka

• Nová okna se otevírají jen v odůvodněných případech a uživatel je na to předem upozorněn

Pravidla s nejnižší prioritou

• Důležité navigační prvky mají přiřazenu horkou klávesu

• Dokumenty, které jsou v jiných formátech než HTML, jsou dostupné i v tomto formátu

• Tabulky jsou zrakově postiženým lépe zpřístupněny

• ASCII art, zkratky a smajlíky jsou zrakově postiženým zpřístupněny

• Na samostatné webové stránce je uveden kontakt na technického správce a prohlášení jasně vymezující míru přístupnosti webu a jeho částí

  • Na tuto webovou stránku odkazuje každá stránka webu

• V textu je vyznačena změna použitého jazyka

Zběžná kontrola přístupnosti WWW stránky

• Accessibility Toolbary

  • http://chrispederick.myacen.com/work/firebird/webdeveloper/

  • http://www.nils.org.au/ais/web/resources/toolbar/

• Další možnosti

  • Vypnutí zobrazovaní grafických prvků

  • Vypnutí zpracování prvků nad rámec HTML

  • Načtení stránky v prohlížeči pracujícím v textovém režimu (LYNX)

  • Zkopírování textového obsahu pomocí schránky do jednoduchého editoru

  • Zkouška navigace pouze pomocí klávesnice

  • Změna velikost okna prohlížeče a nastavené rozlišení obrazovky

  • Nastavení nestandardní kombinace barev a velikosti písma systémového prostředí a prohlížeče