David Tejzr I.2.C 19.5.2017 Společnost TzComp.cz 1
Obsah 1. Úvod... 3 1.1. Volba tématu... 3 1.2. Volba designu stránek... 3 1.3. Použitá technologie... 3 2. Postup... 4 2.1. Layout... 4 2.2. Header... 4 2.3. Logo... 4 2.4. Footer... 4 2.5. Index... 5 2.6. Kategorie... 5 2.6.1. O nás... 5 2.6.2. Služby... 5 2.6.3. Bazar... 5 2.6.4. Kontakty... 5 2.7. Nejčastější barvy... 6 3. Závěr... 7 3.1. Obsah webu... 7 3.2. Co jsem nezrealizoval... 7 3.3. Osobní ohodnocení... 7 2
1.Úvod 1.1. Volba tématu 14-ti denní praxi jsem strávil ve firmě SeonComp, sídlící v Ostravě-Zábřehu, která se zabývá servisem výpočetní techniky. Jelikož jsem postupně nasbíral dost zkušeností, vím tedy, co na takových stránkách nesmí chybět. Rozhodl jsem se tedy udělat stránky zabývající se servisem výpočetní techniky. I názvem jsem se od nich nechal inspirovat. 1.2. Volba designu stránek Inspiroval jsem se stránkou www.seznam.cz, kde veškerý obsah je v tzv. boxu, který vystupuje z pozadí. Mnou zvolená barevná varianta (tj. tyrkysovo-šedá), není nijak moc výrazná a do stylu zapadá. Na stránkách se tento prvek (obsah v zaobleném tvaru) vyskytuje několikrát, např. hned na úvodní stránce Nabízíme vám Jelikož se barvy mnohdy opakovaly, budou uvedeny nejčtastější RGB hodnoty. 1.3. Použitá technologie Používál jsem výhradně jazyky HTML a CSS. Kvůli tomuto omezení jsem ale na stránky nemohl umístit vše, co jsem chtěl. Z CSS3 jsem použil pouze funkci gradient pro vytvoření pozadí a filter pro zešednutí obrázku. 3
2.Postup 2.1. Layout Jak jsem již v úvodu zmínil, inspiroval jsem se domovskou stránkou společnosti Seznam.cz. Na stránce je tedy box se statickou šířkou, za kterým je jen pozadí vytvořené funkcí Gradient v CSS3. Barva se mění od vrchní tmavé tyrkysové po spodní světle zelenkavou. background: linear-gradient(to bottom, rgb(0,128,128), rgb(128,208,127)); V tomto boxu se nachází veškerý obsah včetně záhlaví a zapatí. Nejmenší podporovaná šířka zobrazovacího zařízení je 1280px, při menším rozlišení se celá do prohlížeče nevleze a musí se buď to oddálit, nebo posouvat. Všechny hodnoty jsou statické a web není responzivní. 2.2. Header Design použité hlavičky patří mezi nejčastější, které můžeme na různých stránkách vidět. Obsahuje široké logo, pod kterým je vodorovné menu. Menu má častečnou průhlednost, ale po najetí na danou položku se změní barva na tyrkysovou. Samozřejmě nesmím zapomenout na dropdown menu, které také obsahuje částečnou průhlednost. 2.3. Logo Logo, které se zobrazuje na každé stránce nad menu je vytvořeno v programu Adobe Photoshop CC 2017. Má rozlišení 1200x300 pixelů. 2.4. Footer V patičce najdeme odkaz na Facebook, jehož ikona po najetí myší změní barvu na modrou. Pro změnu jsem využil funkci filter: grayscale(100%);. Vpravo nalezneme mé jméno s datumem vytvoření stránek. Najdeme zde take upozornění výrazným červeným textem, že tato společnost neexistuje. 4
2.5. Index Na hlavní stránku jsem umístil box Nabízíme vám, kde se nachází vše, co společnost nabízí. Jedná se o nečíslované menu, které ukrývá odkazy a po kliknutí na danou položku jsme přesměrování na stránku, která položce odpovídá. Je zde také prostor pro vložení rychlého upozornění návštěvníkům, např. že bude prodejna zavřená. 2.6. Kategorie 2.6.1. O nás Na této stránce nalezneme pouze pár vět o společnosti. Zvýrazněné části jsou vytvořené pomocí <span>. V menu při najetí na tuto stránku se zobrazí položka obchodní podmínky a příjmací formulář. Oba dokumenty jsou ve formátu PDF. Obchodní podmínky jsou stažené z stránek. 2.6.2. Služby Zde nalezneme tři části: Ad a) a) Servis výpočetní rechniky b) PC na míru c) Digitalizace médií Na stránkách se objevují stejné prvky, nové jsou zde akorát tabulky které jsou nastylovány pomocí CSS. Přibyly také oddělovací čáry vytvořené pomocá <hr> a taktéž nastylované pomocí CSS. Ad b) Podle vzoru různých stránek jsem zde umístil doslova rozházené obrázky, kterými jsou loga výrobců počítačových komponent. Po kliknutí na logo se nám na nové kartě zobrazí stránka daného výrobce. Ad c) Na této stránce je umístěno video, popisující postup převádění videa z VSH kazety do PC. Zdroj: https://www.youtube.com/watch?v=jvzqnhr-r78 2.6.3. Bazar Opět zde vycházím z designu klasického E-shopu. Box ve kterém se nachází obrázek produktu a pár funkcí. Po kliknutí na produkt se nám na nové kartě zobrazí kompletní parametry výrobce. 2.6.4. Kontakty V celém webu jsem se vyvaroval použití <iframe>, ale zde to bylo nutné pro vložení Google Mapy pro zobrazení adresy prodejny. 5
2.7. Nejčastější barvy Nádpisy h1 a h3, zvýrazněný text, odkazy rgb(0,176,144) Nádpisy h2, odstavce rgb(90,90,90) Pozadí boxů rgb(237,237,237) 6
3.Závěr 3.1. Obsah webu Veškeré texty jsem napsal sám, proto nikde nemusím uvádět zdroje či citace. U cen jsem se nechal inspirovat již zmíněnou firmou SeonComp. Obrázky v sekci Bazar jsou stažené z e- shopu www.alza.cz. 3.2. Co jsem nezrealizoval Místo sekce Bazar jsem měl v plánu vytvořit e-shop, který by byl rozsáhlejší. Jelikož jsem však zjistil, že by to zabralo mnoho času navíc, musel jsem prácit přerušit a nahradit jí pouze malou ukázkou ve formě bazaru. Dále jsem chtěl, aby byl web responzivní, jelikož moje první pokusy nestály za to, tak jsem od této varianty upustil. Nejspíš jsem udělal dobře, protože by bez možnosti použití scriptovacího jazyka stránky nemohly vypadat tak, jako vypadají teď. 3.3. Osobní ohodnocení Jedná se o mé první webové stránky, u kterých jsem veškerý obsah a desgin musel vymyslet úplně sám. Myslím si tedy, že se mi stránky povedly a s příchodem nových znalostí je budu moct dále vylepšovat. 7