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
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
použité
literatury a zdrojů informací.“
V Ostrově dne …………………
…………………………………. Podpis autora
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.
Ročníková práce
Obsah 1
ÚVOD ................................................................................................................................................ 5
2
NÁVRH VZHLEDU WEBU. ................................................................................................................... 6
3
POPIS WEBU ...................................................................................................................................... 7 1.1
STRÁNKA O OBORECH ................................................................................................................................ 7
1.2
STRÁNKA O VYUČUJÍCÍCH ............................................................................................................................ 8
1.3
STRÁNKA O PŘEDMĚTECH ........................................................................................................................... 9
1.3.1 1.4
STRÁNKA S UČEBNÍMI PLÁNY ..................................................................................................................... 11
1.4.1 1.5
Rozdělení předmětů do sekce dle oboru ................................................................................... 10
Rozdělení plánu do sekcí dle oboru .......................................................................................... 11
STRÁNKA O ROZVRZÍCH ............................................................................................................................ 12
1.5.1
Rozvrhy rozdělení dle tříd ......................................................................................................... 13
1.6
STRÁNKA S FOTOGRAFIEMI ....................................................................................................................... 14
1.7
STRÁNKA S PROHLÍDKOU ŠKOLY .................................................................................................................. 15
1.8
STRÁNKA O STIPENDIJNÍM PLÁNU ............................................................................................................... 15
1.9
STRÁNKA S KONTAKTY ............................................................................................................................. 16
4
ŘEŠENÍ ZAJÍMAVÝCH PROBLÉMŮ ......................................................................................................17
5
TESTOVÁNÍ V PROHLÍŽEČÍCH A RŮZNÝCH ZAŘÍZENÍCH ......................................................................18
6
ZÁVĚR ...............................................................................................................................................19
7
SEZNAM POUŽITÝCH ZDROJŮ ...........................................................................................................20
8
SEZNAM POUŽITÉHO SOFTWARU .....................................................................................................21
9
SEZNAM OBRÁZKŮ ...........................................................................................................................22
4
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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ů
1.4.1 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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
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
Ročníková práce
5 Testování v prohlížečích a různých zařízeních Chorme Verze 39.0.2171.95 – Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Firefox Verze 34.0.5- Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. IE Verze 11.0.9600.17501 - Zobrazuje vše bez jakýchkoliv chyb na různém rozlišení. Opera Verze 26.0.1656.60- 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
Ročníková práce
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
Ročníková práce
7 Seznam použitých zdrojů Domes, Martin. 333 tipů a triků pro CSS. První vydání. Brno: Computer Press a.s., 2009. 272 s. ISBN 978-80-251-3360-7. Refsnes Data. W3schools.com, the world’s largest web development site [online]. Aktualizováno
v roce
2014
[citováno
10.
12.
2014].
Dostupné
z:
Studio F13. Web střední průmyslové školy v Ostrově [online]. Aktualizováno v roce 2014 [citováno 10. 1. 2015]. Dostupné z: <spsostrov.cz>
20
Ročníková práce
8 Seznam použitého softwaru Gimp 2.8 (GNU General Public License) … úprava obrázků a fotek PSPad verze 4.5.8 (Freeware) …psaní zdrojových kódů
21
Ročníková práce
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............................................................................................ 10 Obrázek 6 - Rozdělení učebních plánů .......................................................................... 11 Obrázek 7 - Rozdělení třít ................................................................................................ 12 Obrázek 8 – Rozvrh .......................................................................................................... 13 Obrázek 9 - Galerie ........................................................................................................... 14 Obrázek 10 - Stipendijní plány ........................................................................................ 15 Obrázek 11 - Kontaktní údaje.......................................................................................... 16
22
