Střední průmyslová škola Ostrov ROČNÍKOVÁ PRÁCE. Webové stránky na téma škola. Třída. Školní rok 2014/2015 Daniel Snášel

Transkript

1 Střední průmyslová škola Ostrov ROČNÍKOVÁ PRÁCE Webové stránky na téma škola Studijní obor Informační technologie Třída I2 Školní rok 2014/2015 Daniel Snášel

2 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

3 Anotace Tato webová stránka je napsaná na téma škola. Obsahuje 9 skupin stránek, některé jsou ještě dál rozdělovány do podskupin. Obsahem této stránky je uživatele seznámit se střední průmyslovou školou v Ostrově. Popřípadě nabudit uživatele právě na studiu na této škole. Anotation This website is based on theme ''School''. It contains 9 groups of pages, some of them are divided to subgroups. The content of this website is to inform the user with SPŠ Ostrov or excite the user for a study on this school.

4 Obsah 1 ÚVOD NÁVRH VZHLEDU WEBU POPIS WEBU STRÁNKA O OBORECH STRÁNKA O VYUČUJÍCÍCH STRÁNKA O PŘEDMĚTECH Rozdělení předmětů do sekce dle oboru STRÁNKA S UČEBNÍMI PLÁNY Rozdělení plánu do sekcí dle oboru STRÁNKA O ROZVRZÍCH Rozvrhy rozdělení dle tříd STRÁNKA S FOTOGRAFIEMI STRÁNKA S PROHLÍDKOU ŠKOLY STRÁNKA O STIPENDIJNÍM PLÁNU STRÁNKA S KONTAKTY ŘEŠENÍ ZAJÍMAVÝCH PROBLÉMŮ TESTOVÁNÍ V PROHLÍŽEČÍCH A RŮZNÝCH ZAŘÍZENÍCH ZÁVĚR SEZNAM POUŽITÝCH ZDROJŮ SEZNAM POUŽITÉHO SOFTWARU SEZNAM OBRÁZKŮ

5 1 Úvod Tato ročníková práce je napsaná na téma webové stránky SPŠ Ostrov. Cílem právě této webové stránky je informovat uživatele o SPŠ Ostrov o všech činnostech školy. Popřípadě nabudit ke studiu právě na této škole budoucí uchazeče. V této práci půjde o rozepsání jednotlivých stránek, kterých je na tomto webu 42. 5

6 2 Návrh vzhledu webu. Při navrhování úvodní stránky jsem řešil příjemný vzhled a její funkčnost, tedy aby měla podporu všech prohlížečů. Zvažoval jsem, že při přejetí nad jednotlivými buňkami se bude buňka zvětšovat, nakonec jsem zjistil, že aby to fungovalo, jak bych chtěl, tak bych musel použít Java skript. Proto se nyní zvětšuje pouze obrázek v buňce a změní se barva textu. Použité ikony jsem volil tak, aby byly všem srozumitelné. Tato stránka je optimalizovaná tak, že funguje i na mobilním telefonu bez chyb. Obrázek 1 - Úvodní stránka 6

7 3 Popis webu Představím vám jednotlivé stránky mého webu. 1.1 Stránka o oborech Při navrhování této stránky jsem použil na stylované buňky z úvodní stránky. Až na to že zde jsou jen dvě buňky vedle sebe, zarovnány na střed obrazovky to hlavně kvůli estetice. V každé buňce je rozepsaný jeden předmět, který se vyučuje na SPŠ Ostrov. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 2 Obory Barvu buněk jsem volil spíše šedou než nějakou agresivní barvu. To samé platí i na pozadí raději tmavší barvu než agresivní. Vše je tak dobře čitelné a příjemné pro zrak. 7

8 1.2 Stránka o vyučujících Při navrhování této stránky jsem použil na stylované buňky z úvodní stránky. Tak že v první a třetí je fotka učitele a ve druhé a čtvrté je pak informace o daném učiteli viz obrázek. Zde je vyobrazeno celkem 48 vyučujících různých předmětů. Snadno se tak můžete orientovat podle jména vyučujícího a nebo podle vzhledu. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 3 - Vyučující Barvu buněk jsem zvolil u obrázku bílou kvůli pozadí obrázku a taky abych rozlišil opticky, v jaké buňce se nachází text a v jaké se nachází obrázek. Na pozadí jsem zvolil tmavší barvu, aby se na to lépe dívalo a nebylo to do očí. 8

9 1.3 Stránka o předmětech Při navrhování této stránky jsem zvolil odlišní způsob stylování od úvodní stránky a to právě kvůli tomu, že se ještě dělí dál na podskupiny dle oborů viz obrázek. Každý obor má svou podstránku. Uživatel při aktivaci odkazu okamžitě zjistí, jaké předměty se pro daný obor vyučují. Při přejetí nad jednotlivými buňkami se buňka zvětší i písmo se zvětší a zbarví do červena. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 4 - Rozdělení oborů 9

10 1.3.1 Rozdělení předmětů do sekce dle oboru Každá takhle rozdělená stránka má podobný dizajn. Vždy je tam nadpis oboru s obrázkem vystihujícím tento obor. Pod ním 3-5 oblastí kde jsou vypsány předměty daného oboru viz obrázek. Na této stránce je zajímavé to, že obrázek v pravém horním rohu vypadá jako by byl zarovnaný s celou stránkou. Ovšem obrázek je zarovnaný pouze s nadpisem a bílé pozadí dokončí právě tento optický jev. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 5 - IT rozdělení obr. 10

11 1.4 Stránka s učebními plány Při navrhování této stránky jsem zvolil obdobný způsob stylování jako u stránky předměty a to právě kvůli tomu, že se ještě dělí dál na podskupiny dle oborů viz obrázek. Každý obor má svou podstránku. Při přejetí nad jednotlivými buňkami se buňka zvětší i písmo se zvětší a zbarví do červena. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 6 - Rozdělení učebních plánů Rozdělení plánu do sekcí dle oboru Učební plány se zobrazí po rozkliknuti zobrací a jsou ve formátu PDF. Tyto materiály byly stáhnuty ze stránky spsostrov.cz ze sekce obory. 11

12 1.5 Stránka o Rozvrzích Při navrhování této stránky jsem opět zvolil obdobný způsob stylování jako u stránky předměty a to právě kvůli tomu, že se ještě dělí dál na podskupiny dle oborů viz obrázek. Každá třída má svou podstránku s rozvrhem. Při přejetí nad jednotlivými buňkami se buňka zvětší i písmo se zvětší, zbarví do červena a objeví se zde červený obdélní pro zvýraznění odkazu na rozvrh třít. Zbytek tabulky se optimalizuje, tak aby tabulka měla stejné rozlišení. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 7 - Rozdělení třít 12

13 1.5.1 Rozvrhy rozdělení dle tříd Po rozkliknuti se objeví rozvrh třídy, kterou si uživatel vybere. Jsou zde v jednom rozvrhu lichý i sudý týdny a skupiny. Zároveň se uživatel dozví, v jaké učebně se daný předmět vyučuje a jméno profesora, který ho vyučuje. Najdete zde i jméno třídního učitele. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 8 Rozvrh 13

14 1.6 Stránka s fotografiemi Zde je použitá galerie Fotorama s licencí MIT. Licence MIT klade téměř žádná omezení na to, jak bude Fotorama použita. Fotorama galerie která využívá java skript. V galerii se nacházejí fotky školy a její okolí. Různé fotky lze změnit pomocí tahu na mobilu či na počítači, nebo kliknutí na šipku, které se nacházejí na stranách fotky, nebo stisknutí levé nebo pravé šipky. Popřípadě lze změnit fotku pomocí spodního menu kde, jsou vyobrazeny zmenšeniny fotek. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 9 - Galerie 14

15 1.7 Stránka s prohlídkou školy Tento odkaz vede na stránku, kterou rámci dlouhodobé maturitní práce vytvořil žák Štěpán Matěj ze 4. ročníku oboru Informační technologie základní verzi virtuální prohlídky školy, aby se mohli zájemci o studium na této škole podívat do prostor školy z pohodlí svého domova. 1.8 Stránka o stipendijním plánu Při navrhování této stránky jsem zvolil stylování ze čtyř viditelných bloků přičemž v jednom je nadpis. Ve druhém se nachází obrázek v tomto případě obrázek s penězi. V dalších dvou blocích je informace, jak získal stipendium. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 10 - Stipendijní plány 15

16 1.9 Stránka s Kontakty Při navrhování této stránky jsem zvolil stylování ze sedmi viditelných bloků, přičemž v prvním je nadpis. Ve druhé se nachází obrázek s logem školy. Ve třetím a čtvrtém se nachází adresa a kontaktní informace pro sekretariát. V dalších blocích myšleno pátý až sedmý blok se nachází kontaktní údaje na vedení školy, pracoviště a odborný výcvik. Tato stránka je optimalizovaná tak že funguje i na mobilním telefonu bez chyb. Obrázek 11 - Kontaktní údaje 16

17 4 Řešení zajímavých problémů Dokázal jsem vyřešit, že na čtyřech testovaných mobilech se stránka otevřela bez problému a bez zpomalení. Nejdřív byl velký problém se stránkou stipendium, kde ve čtvrtém bloku vycházel text až pod daný blok. Když jsem ho rozšířil, tak mi text pořád vycházel z bloku. Musel jsem celému obalu dát minimální výšku a tím jsem to vyřešil. Následovala stránka s kontaktními údaji, kde se šestý prolínal se sedmým blokem. Vyřešil jsem to tak, že jsem nadefinovat znova pátý až sedmý blok a změnit jim velikosti. 17

18 5 Testování v prohlížečích a různých zařízeních Chorme Verze Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Firefox Verze Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. IE Verze Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Opera Verze Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Mobil - Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Tablet - Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. 18

19 6 Závěr Tato ročníková práce je napsaná na téma webové stránky SPŠ Ostrov. Cílem právě této webové stránky je informovat uživatele o SPŠ Ostrov. Popřípadě nabudit ke studiu právě na této škole. Povedlo se mi udělat funkční web. Nepovedlo se mi tolik využít java script jak se původně zamýšlel. Tento web by mohl být zlepšen právě těmi java scriptami. Stránka je dělána tak, aby byla dobře přístupná i občasným uživatelům internetu. 19

20 7 Seznam použitých zdrojů Domes, Martin. 333 tipů a triků pro CSS. První vydání. Brno: Computer Press a.s., s. ISBN Refsnes Data. W3schools.com, the world s largest web development site [online]. Aktualizováno v roce 2014 [citováno ]. Dostupné z: < Studio F13. Web střední průmyslové školy v Ostrově [online]. Aktualizováno v roce 2014 [citováno ]. Dostupné z: <spsostrov.cz> 20

21 8 Seznam použitého softwaru Gimp 2.8 (GNU General Public License) úprava obrázků a fotek PSPad verze (Freeware) psaní zdrojových kódů 21

22 9 Seznam obrázků Obrázek 1 - Úvodní stránka... 6 Obrázek 2 - Obory... 7 Obrázek 3 - Vyučující... 8 Obrázek 4 - Rozdělení oborů... 9 Obrázek 5 - IT rozdělení obr Obrázek 6 - Rozdělení učebních plánů Obrázek 7 - Rozdělení třít Obrázek 8 Rozvrh Obrázek 9 - Galerie Obrázek 10 - Stipendijní plány Obrázek 11 - Kontaktní údaje