Střední průmyslová škola Ostrov ROČNÍKOVÁ PRÁCE Webové stránky na téma Město, ve kterém žiji. Studijní obor Informační technologie Třída I2 Tadeáš Seemann Školní rok 2015/2016 Jméno a příjmení autora
Prohlášení autora Prohlašuji, že jsem tuto práci vypracoval(a) samostatně a použil(a) jsem literárních pramenů a informací, které cituji a uvádím v seznamu literatury a zdrojů informací. použité V Ostrově dne. Podpis autora
Anotace Práce se zabývá webovou stránkou na téma: Město, ve kterém žiji. Stránka by měla sloužit návštěvníkům, aby získali základní informace o městě a mohli si prohlédnout zajímavá místa na obrázcích. Anotation The project deals with a website about my hometown. The website should serve to the visitors for gaining basic knowledge about the town and having the chance to look at some interesting places in pictures.
Obsah 1 ÚVOD...5 2 NÁVRH VZHLEDU WEBU...6 3 POPIS WEBU...8 3.1 ZÁKLADNÍ ROZLOŽENÍ WEBU...8 3.2 DIV HEADER...8 3.3 DIV NAV...9 3.4 DIV TEXT...9 3.5 PATIČKA...9 4 ŘEŠENÍ ZAJÍMAVÝCH PROBLÉMŮ... 10 5 TESTOVÁNÍ V PROHLÍŽEČÍCH A RŮZNÝCH ZAŘÍZENÍCH... 11 6 ZÁVĚR... 12 7 SEZNAM POUŽITÝCH ZDROJŮ... 13 8 SEZNAM POUŽITÉHO SOFTWARU... 14 9 SEZNAM OBRÁZKŮ... 15 4
1 Úvod Tato práce se zabývá tématem Město, ve kterém bydlím. Mým cílem bylo vytvořit webovou stránku, která by byla přehledná, lehce ovladatelná, ale zároveň i informativní. Uživatel se na stránce seznámí se základními informacemi o městě, jako je jeho poloha, počet obyvatel, či čím je město známé. Dále se něco dozví o historii města, jeho kulturní stránce, a jeho okolí. Nakonec se může podívat do fotogalerie, naplněné různými fotkami zajímavých míst ve městě. Je zde také možnost se pomocí přímého odkazu dostat na oficiální webovou stránku města, pokud by měl uživatel zájem. 5
2 Návrh vzhledu webu Zde je hrubý návrh layoutu stránky, u kterého jsem také zůstal, protože se mi zdá být přehledný a lehce ovladatelný. Obrázek 1 Hrubý návrh layoutu 6
Obrázek 2 - Layout stránky Nejdříve se zdálo, že se vše podaří na první pokus, avšak nebylo tomu tak. Nedařilo se mi do pozadí hlavičky stránky dát obrázek. Zkoušel jsem všechny možnosti, které mně napadly, ale ani jedna nepřinesla úspěch. Nakonec při bližším prohlížení si kódu jsem objevil, malou, zbytečnou chybu v syntaxi, kterou jsem opravil a díky tomu se mi podařilo vyřešit i tento problém. 7
3 Popis webu 3.1 Základní rozložení webu Web je rozložen do 3 základních divů, kterými jsou: header, nav a text. Patičku jsem vytvořil pomocí třídy w3-container a pouze jsem jí přidal barvu pozadí pomocí w3-red a text zarovnal na střed pomocí w3-center Obrázek 3 - divy v layoutu 3.2 Div header Tento div byl vůbec nejproblémovější, ale pouze mou chybou v syntaxi, které jsem se mohl vyhnout. Div má na výšku 600 pixelů, kvůli faktu, že je v něm také obrázek, který na vrchní části překrývá nadpis s červeným pozadím. Pro animaci objevení nadpisu jsem použil w3-animate-opacity a pro zvětšení obrázku přes celou plochu jsem požil příkaz background-size:cover. S tímto příkazem ale přišel další příkaz, protože v některých prohlížečích by nemusel fungovat, takže jsem 8
musel přijít s řešením. Problém jsem nakonec vyřešil přidáním verze příkazu pro každý prohlížeč. Obrázek 4 - verze kódu pro všechny prohlížeče 3.3 Div nav V tomto divu mi velmi pomohla w3 knihovna volně dostupná na: http://www.w3schools.com/. Je zde použita třída w3-topnav která mi velmi usnadnila práci s navigačním barem stránky. 3.4 Div text Tento div pouze udává parametry pro text. Je zde použito w3-margin-12 pro odsazení textu. 3.5 Patička Patička je řešena velice jednoduše přes w3-container a červené pozadí. Text je pouze zarovnaný na střed 9
4 Řešení zajímavých problémů Když jsem přemýšlel, jak vyřeším fotogalerii, hádal jsem se sám se sebou o řešení. Jsem však rád, že se mi nakonec podařilo najít jednoduché řešení tohoto dilematu, a tím byl plugin fotorama. Jsem rád, že ani s jeho nastavováním jsem neměl žádné starosti a hlavně vypadá elegantně. Další věc, kterou jsem řešil, byla chudost indexu stránky, a řešil jsem, co na stánku dám. Nakonec jsem přišel na to, že bych mohl přidat Google mapu, přímo zacentrovanou na Karlovy Vary. Samotná aplikace mapy na stránku proběhla bez problému, poté jsem ale musel začít řešit, na jaké souřadnice mapu zacentruji, jelikož nebyla ve stejném rozlišení, jako originál, chvíli mi dělalo problém najít ty správné souřadnice, ale i to se nakonec podařilo. Vůbec největší oříšek byla hlavička, a také jsem u ní strávil nejvíce času. Obrázek, který jsem chtěl dát do pozadí, se mi v pozadí neobjevoval a trávil jsem nad řešením dlouhé hodiny. Nakonec jsem objevil chybu v mém kódu, kterou jsem do té doby neviděl, a záhada byla vyřešena. Objevil se ale další problém, který se bohužel ještě nepodařilo vyřešit, a to ten, že samotný obrázek není dynamický, tudíž se nemění s velikostí okna prohlížeče. 10
5 Testování v prohlížečích a různých zařízeních Svou stránku jsem testoval v prohlížečích: Google Chrome 47.0.2526.106 Opera 34.0.2036.25 Internet Explorer 8.0.6001.18702 Mozilla Firefox 43.0.1.5828 Dále jsem zkoušel test na zařízení: HTC One S Google Chrome Stránka funguje ve všech, krom Internet Exploreru, přesně tak, jak má. Myslím, že jediný důvod, proč v Internet Exploreru nefunguje je ten, že tato verze je stará a už nepodporována. Co se týče rychlosti stránek v prohlížečích, tak jsem si nevšiml rozdílu v načítání stránek, ve všech fungujících prohlížečích a také na chytrém telefonu se stránka zobrazuje jak má a načítá se rychle. 11
6 Závěr Cílem mé práce bylo vytvořit webovou stánku o městě, ve kterém bydlím. Snažil jsem se, aby byla stránka přehledná, lehce ovladatelná, ale hlavně také informativní, což se mi myslím povedlo. Do budoucna bych rozhodně chtěl stránku vylepšit o lepší dynamičnost stránky, či přizpůsobování starším prohlížečům. Jsem avšak rád, že stránka funguje dobře na chytrých telefonech. Dále bych chtěl ještě rozšířit fotogalerii a přidat další podstránku s akcemi ve městě, a tyto akce pravidelně aktualizovat. 12
7 Seznam použitých zdrojů (1) Refsnes Data. W3schools.com, the world s largest web development site [online]. Aktualizováno v roce 2016 [citováno 07. 01. 2016]. Dostupné z: <http://www.w3schools.com> (2) Artem Polikarpov. Fotorama.io, A simple, stunning, powerful jquery gallery [online]. Aktualizováno v roce 2016 [citováno 07. 01. 2016] Dostupné z: <http://fotorama.io/ (3) Google mapa. GOOGLE. Google Maps [online]. [citováno 07. 01. 2016]. Dostupné z: https://www.google.cz/maps 13
8 Seznam použitého softwaru PSpad editor 4.5.7 (free software) psaní zdrojových kódů GIMP 2.8 (free software) úprava obrázků Malování (basic Windows software) návrh layoutu stránky 14
9 Seznam obrázků Obrázek 1 Hrubý návrh layoutu... 6 Obrázek 2 - Layout stránky... 7 Obrázek 3 - divy v layoutu... 8 Obrázek 4 - verze kódu pro všechny prohlížeče... 9 15