Naše Město Web design

Česká zemědělská univerzita v Praze Provozně ekonomická fakulta Katedra informačních technologií

Naše Město Web design

Cvičení:

Pracovní skupina

10. 1. 2012, 16 hod.

Jitka Sedláčková Nina Tůmová

Naše Město

Obsah Obsah .......................................................................................................................................... 1 Úvod ........................................................................................................................................... 2 Zvolené téma, popis website ...................................................................................................... 2 Slabé a silné stránky website ...................................................................................................... 2 Možný další vývoj ...................................................................................................................... 2 Porovnání s podobnými WWW prezentacemi ........................................................................... 3 Technická část ............................................................................................................................ 3 Závěr........................................................................................................................................... 8

1

Naše Město

Úvod Tento semestrální projekt je založen na vytvoření webové prezentace fiktivního města. Jitka Sedláčková – sběr informací, vytvoření podkladů, vyplnění technické dokumentace Nina Tůmová – vytvoření podkladů, tvorba webové prezentace, vyplnění technické dokumentace

Zvolené téma, popis website Prvním krokem byl výběr tématu, ve kterém jsme se rozhodly pro vytvoření webových stránek fiktivního města s názvem „Naše Město“. Ve druhém kroku jsme vytvořily obsah stránek, který zahrnuje historii města, informace o zajímavostech ve městě i okolí, turistické informace a kontakt. Posledním – třetím – krokem byla samotná tvorba stránek. Jako výchozí prvek při tvorbě stránek byla zvolena tabulka, jejíž předností je jednoduchost, přehlednost a snadné formátování pomocí kaskádových stylů. Každá vnitřní stránka obsahuje tabulku, která tvoří hlavičku stránky, jejímž obsahem je název města a navigační menu. Obsah stránky je tvořen druhou tabulkou, ve které se nachází název stránky a samotný obsah. Na stránce věnující se okolí Našeho Města je pak umístěna ještě jedna tabulka, ve které jsou vloženy miniatury fotografií tvořících galerii. Každá fotografie má svůj název, který se zobrazí při nastavení kurzoru nad obrázek. Při kliknutí na miniaturu v galerii se pak otevře fotografie v původní velikosti. S ohledem na přístupnost stránek zrakově postiženým jsme pro stránky zvolily jednoduchý design prostého textu na jemně podbarveném pozadí a hlavní části jsme ohraničily rámy. Na úvodní stránce byla na pozadí použita upravená fotografie, jejíž jas je stažen na minimum a pravý spodní okraj plynule přechází v bílé pozadí.

Slabé a silné stránky website Tyto webové stránky jsou vytvořeny pomocí xhtml, který v sobě kombinuje jednoduchost, přehlednost a schopnost být dobře zobrazen jednotlivými prohlížeči (v rámci tvorby byly použity prohlížeče Internet Explorer 9, Mozilla Firefox 9.0.1, Google Chrome 9.0 a Safari 5.0.1 ve verzi pro iPad). Velkým plusem je i velikost jednotlivých stránek, které se pohybují v jednotkách kB. Kladně lze u této prezentace hodnotit i jednoduchost a přehlednost úpravy stránek. Slabou stránkou této prezentace by, v případě jejího použití jako informačních stránek reálného města, pravděpodobně byla špatná podpora vkládání aktuálních informací ze strany pracovníků města. Jelikož nelze očekávat a není přípustné, že by tito pracovníci upravovali přímo html kód, bylo by vhodnější nasazení publikačního systému.

Možný další vývoj V případě aplikace stránek na reálné město by pravděpodobně dalším vývojem bylo právě nasazení výše zmíněného publikačního systému, který by umožnil aktualizaci informací ze strany úředníků obce.

2

Naše Město

Porovnání s podobnými WWW prezentacemi Tyto stránky vznikly jako studentský projekt, proto se obsahem ani rozsahem nemohou rovnat s podobnými stránkami. Podobné stránky: http://www.obecnizbor.cz/ http://www.obechyskov.cz/

Technická část Mapa stránek Hlavní stránka (index.html) Úvodní stránka, která obsahuje hlavní navigační menu. Historie a současnost (historie_soucasnost.html) Tato stránka popisuje vznik a historii Našeho Města. Turistům Tyto stránky obsahují další tři odkazy na možnosti kulturního vyžití pro turisty. Umění (turist_umeni.html) Architektura (turist_archit.html) Kultura (turist_kultura.html) Ubytování (ubytovani.html) Odkazuje na možnosti ubytování v Našem Městě. Okolí (okoli.html) Tipy na výlety po okolí. Dále stránka obsahuje galerii. Kontakty (kontakty.html) Tato stránka odkazuje na adresu obecního úřadu Našeho Města.

3

Naše Město

Index.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků

Obsah XHTML 1.0 ano UTF-8 ano ano ano 2 kB 2 kB 1,6 kB Zákon č. 81/2006 sb. 1 1 0 0 1 0 0 0 ano

Historie_současnost.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


4

Naše Město

Turist_umeni.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


Turist_archit.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


5

Naše Město

Turist_kultura.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


Ubytovani.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


6

Naše Město

Okoli.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


Kontakty.html Položka standard validita znaková sada vyplněný title vyplněný meta description vyplněný meta keywords velikost kódu velikost css souboru velikost stránky metodika přístupného webu napdisy h1 napdisy h2 napdisy h3 napdisy h4 napdisy h5 napdisy h6 značky značky vyplněný alt u všech obrázků


7

Naše Město

Závěr Stránky byly vytvořeny v prostředí jEdit s použitím kaskádových stylů a splňují pravidla přístupnosti. Stránky byly prověřeny validátorem (validator.w3.org) a byly shledány vyhovujícími.

8

Naše Město Web design

Recommend Documents