Co je to webová stránka? Příklad přístupné webové stránky Vysvětlení jednotlivých elementů z příkladu Závěr.

Prezentace na téma: "Co je to webová stránka? Příklad přístupné webové stránky Vysvětlení jednotlivých elementů z příkladu Závěr."— Transkript prezentace:

1

2 Co je to webová stránka? Příklad přístupné webové stránky Vysvětlení jednotlivých elementů z příkladu Závěr

3 Zobrazuje informace poskytované v rámci world wide web (www) Informace – prezentovány v podobě hypertextu, který je vytvořen pomocí značek HTML nebo XHTML Stránky jsou ukládány na webových serverech přístupné prostřednictvím pc sítě nebo sítě internet přenášeny pomocí protokolu HTTP (HyperText Transfer Protocol) Statické X Dynamické stránky statické – stejný obsah dynamické – mění svůj obsah, programem (nejčastěji redakční systém) na straně webového serveru

4 1 2 3 4 5

5 Pod čísly 1) hlavička (angl. header). V hlavičce se v tomto případě nachází logo VŠMIE, panel s vyhledáváním a 2 top menu. 1. top menu se nachází vlevo od vyhledávácího pole – položky v tomto menu jsou 3: Kontakty Mapa webu položka- ŠIS, slouží hlavně pro profesory a studenty

6 Panel vyhledávání - usnadní návštěvníkům webu přístup k informacím pomocí zadání konkrétního slova, či slovního spojení Vyhledávací skript - prohledá celý web nebo administrátorem definovanou oblast a zobrazí nalezené shody s hledaným výrazem (vstupem), který uživatel do vyhledávacího pole zadal. Případně zobrazí hlášku, že nebyly nalezeny žádné výskyty hledaného výrazu. 2. topmenu, které nás zavedou do hlavních sekcí webových stránek. Vpravo na panelu je umístěn přepínač jazykových mutací webu- angličtina, čeština.

7 Pod číslem 2 se nachází hlavní obsah titulní stránky (angl. main content). Nachází se zde banner, který upoutává a informuje potencionální zájemce o studium. Pod bannerem nalezneme 3 sloupce stěžejních hlavních sekcí webu Pro zájemce O škole Pro studenty umožňují rychlý přístup do nejvíce navštěvovaných a atraktivních podstránek, sekcí.

8 - Main content splňuje na úvodní stránce svou úlohu na výbornou, protože zaujme i přes jeho vypovídající hodnotu(banner) a zároveň slouží jako rychlý rozcestník. - bottom skýtá aktuality, které by na většině rozsáhlejších webů neměly chybět, jenž nenásilně kombinuje spolu s kontakty a zajímavými odkazy týkající se školy, které návštěvníka jistě zaujmou. Dělá stránky web vsmie.cz atraktivnější, přístupnější, leč by mohl být vypuštěn - Footer, nutnost každého webu- copyright, rok vytvoření (případně rok spuštění projektu – aktuální rok), tvůrce webu

9 grafika – nutnost je barevná harmonie (vlastní vzhled a texty- vyjma bannerů) a také použití 1, maximálně 3 barev a jejich odstínů, které budou vzájemně ladit a jejich kombinace bude příjemná na pohled pro lidské oko Na webu http://colorschemedesigner.com/index.html naleznete skript, který pomáhá se základním barevným schématem webu. Skript generuje ze škály barev barevné harmonie. Lze navolit až 4 barvy, leč obecně platí, že čím méně, tím lépe, nejlépe do 3 barev včetně

10 - design- volí se jednoduchý a přehledný v žádném případě by hlavička neměla zastínit ostatní prvky (jak se to nemá dělat viz. na přání zákazníka dělaný www.stablevictory.cz ostatní prvky by se také měly držet v určitém velikostním poměru k ostatním, zejména k main content. Záleží na cítění webdesignera a přání zákazníka.

11 Jako číslo 3 jsme označili postraní panel (angl. sidebar), kde může být umístěno případně další menu, novinky, aktuality či jiné informace, které by návštěvníci neměli přehlédnout. V případě VŠMIE škola vsadila na přehled oborů (odkazy na jednotlivé obory), které škola vyučuje, na elektronickou přihlášku ke studiu a informace pro zájemce (de-facto strukturované menu).

12 Poslední- 4. část stránky je patička (angl. footer), kam se většinou umísťují podmínky užití, odkaz na mapu webu a na web společnosti či osvč, která web realizovala. Stránky mají všechny náležitosti, co by mít měly (titulní stránka nemusí obsahovat drobečkovou navigaci – breadcrumb, protože by to bylo z hlediska povahy navigace a její funkce zcela zbytečné viz. další slidy).

13 5. částí stránky se přesouváme do spodní části titulní stránky prezentace (ang. bottom). Nalezneme zde nejdůležitější aktuality spojené se školou a také důležité kontakty, kde nechybějí ani odkazy kontaktní stránky jednotlivých poboček školy.

14 Stránky jsou čitelné a přehledné. Logo svou velikostí nezastiňuje ostatní pro uživatele důležité prvky na stránce Vyhledávací pole je umístěné tak, aby nerušilo, ale doplňovalo celkový vzhled stránky, stejně jako 1. topmenu, a 2. topmenu všechny výše zmíněné prvky tvoří sladěnou a výstižně informující hlavičku stránky.

15 1 2 3 4 5 6

16 elementy 1 a 4 jsou stejné jako na stránce titulní. element 3. – postranní panel (sidebar) se nám z přehledu oborů z titulní stránky změnil na výčet nejnovějších aktualit a panel s Facebookovou stránkou VŠMIE Ve 2. elementu se nám hlavní obsah (main content) rozšířil o další postranní panel (sidebar), tentokráte vlevo, který slouží jako menu, kde se nacházejí podřízené stránky stránce „Pro zájemce“.

17 5. element je takzvaná drobečková navigace (breadcrumb). Navigace by měla být součástí stránek, zejména na rozsáhlejších webech, kde slouží pro navigaci a snadnější orientaci uživatele- pomáhá se uživateli zorientovat, na kterém místě webu se právě nachází 6. element – zobrazení názvu aktuální stránky v záhlaví prohlížeče je také neméně důležitý prvek, který taktéž slouží pro navigaci, přehlednost a neměl by chybět na žádné stránce.

18 Z této prezentace jsme se dozvěděli jak by měla vypadat webová stránka se všemi náležitostmi a prvky co k ní patří. A také jsme si vysvětlili jednotlivé prvky nacházející se na webové stránce. Pro samostatné vytvoření tyto údaje ale samozřejmě nestačí. Poslouží nám však dokonale pro představení si správné webové stránky se vším všudy.