Návrh a realizace frontendu webového portálu pro základní školu
Diplomová práce
Studijní program: N6209 – Systémové inženýrství a informatika Studijní obor: 6209T021 – Manažerská informatika
Autor práce: Bc. Martin Šourek
Vedoucí práce: Ing. David Kubát, Ph.D., Ing.Paed.IGIP
Liberec 2018
ERZ|TA V
LIBER
Akademickýrok 2017 I 2018Zadání diplomové práce
(projektu, uměleckého díla, uměleckého výkonu)
Jméno a příjmení: Bc. Martin Šourek
osobníčíslo:
E15000556Sťudijní program: N6209 Systémové inženýrství a informatika
StudÍjnÍobor: N6209To21_ManaŽerskáinformatika Zadóvající katedra: katedra informatiky
VedoucíprÓce: lng. David Kubát, Ph.D., lNG.PAED'IGIP Konzultant próce: lng. Michal Bohuslávek
DUBAX s. r. o.' programátor
Nózev
prace:
Návrh a realizace frontendu webového portálu pro základní škotuZásady pro VypracoVání:
1. Současné možnosti webového prostředí a webdesignu.
2. Návrh struktury webového portálu.
3. Návrh grafického rozhraní.
4. Realizace webových stránek'
5. Zhodnocení přínosů pro organizaci.
Sezna m od bo r n é l ite ratu ry :
CASTRO, Elizabeth a Bruce HYSLOP. 2012. HTML5 a C553; názorný průvodce tvorbou WWW strónek. Brno: Computer Press. lsBN 978-80-251-3733-8
GASSTON, Peter. 2013. The modern Web: multi-device Web development with HTML\, CSSI, and JavaScript. San Francisco: No Starch Press. ISBN 1 5-932-7487-4.
SHARK|E, Craig a Andrew FlSHER. 2o15. Responzivníwebdesign: okamžitě. Brno: Computer Press. ISBN 978-80-251 -4384-1.
LAZARls' Louis. 2014. CSS okamžitě. Brno: Computer Press. lSBN 978-80-251-4176-2.
PROQUEST.2017. Databóze člónků ProQuest [online]. Ann Arbor, Ml, USA: ProQuest.
[c it. 20 1 7 -09 -28]. Dost u p n é z: http! / kni h ovn a'tu l.czl
Rozsah próce:
Forma zpracovanÍ:
Datum zadání próce:
Datu m odevzdání práce:
65 normostran tištěná / elektronická
31.října 2017 31. srpna 2019
děkan EkonomÍcké fakulty
V Libercidne 31 .ří)na2017
Prohlášení
Byl jsem seznámen s tím, že na mou diplomovou práci se plně vzta- huje zákon č. 121/2000 Sb., o právu autorském, zejména § 60 – školní dílo.
Beru na vědomí, že Technická univerzita v Liberci (TUL) nezasahuje do mých autorských práv užitím mé diplomové práce pro vnitřní potřebu TUL.
Užiji-li diplomovou práci nebo poskytnu-li licenci k jejímu využití, jsem si vědom povinnosti informovat o této skutečnosti TUL; v tom- to případě má TUL právo ode mne požadovat úhradu nákladů, které vynaložila na vytvoření díla, až do jejich skutečné výše.
Diplomovou práci jsem vypracoval samostatně s použitím uvedené literatury a na základě konzultací s vedoucím mé diplomové práce a konzultantem.
Současně čestně prohlašuji, že tištěná verze práce se shoduje s elek- tronickou verzí, vloženou do IS STAG.
Datum:
Podpis:
Poděkování
Tímto bych chtěl poděkovat vedoucímu své diplomové práce panu Ing. Davidu Kubátovi, Ph.D., ING.PAED.IGIP za odborné vedení mé diplomové práce. Poděkování také patří mým kolegům, Ing. Michalu Bohuslávkovi, Bc. Vojtovi Ježkovi a Ing. Haně Hoffmanové za odborné rady při vytváření projektu i samotné diplomové práce.
Anotace
Tématem této diplomové práce je Návrh a realizace frontendu webového portálu pro základní školu. Práce si dává za cíl teoreticky popsat současné možnosti frontendu, který zahrnuje předprojektovou přípravu, vytvoření wireframu, grafický návrh a kódování.
Další část teoretické práce popisuje současné nástroje a technologie při tvorbě webu a konkrétní specifika školních webů. V praktické části je navrhnut a zrealizován frontend webových stránek pro Základní a Mateřskou školu ve Stráži pod Ralskem. Cílem tohoto projektu je vznik responzivních a moderních webových stránek.
Klíčová slova
Webdesign, responzivní webdesign, HTML5, CSS3, Bootstrap, LESS, frontend, škola
Annotation
The topic of this diploma thesis is Design and implementation of a web portal frontend for an elementary school. The aim of the thesis is to describe current options of the frontend, which include pre-project preparation, wireframe creation, graphic design and coding. The following part describes contemporary tools and technology which are used for creating a website. This part involves different specifics of school websites as well. In the methodological part there is a project and an implementation of the web page frontend for Lower Secondary and Primary School in Stráž pod Ralskem. The main aim of this project is to create the responsive and modern website.
Keywords
Webdesign, Responsive webdesign, HTML5, CSS3, Bootstrap, LESS, frontend, school
Obsah
Seznam obrázků ... 12
Seznam tabulek ... 14
Seznam zkratek a symbolů ... 15
Úvod ... 16
1. Použité technologie a nástroje ... 17
1.1 Internet ... 17
1.2 W3C ... 18
1.3 HTML... 18
1.4 CSS ... 20
1.5 LESS... 21
1.6 PHP... 22
1.7 JavaScript ... 23
1.8 SEO ... 23
1.9 MySQL ... 24
1.10 Bootstrap ... 24
1.11 User Experience ... 25
1.12 User Interface ... 26
1.13 Ux vs. UI ... 27
1.14 Google Analytics ... 27
1.15 Adobe Photoshop ... 28
1.16 Adobe Illustrator ... 29
2. Webdesign ... 30
2.1 Klasický webdesign... 31
2.2 Mobilní webdesign ... 33
2.3 Responzivní webdesign ... 35
2.3.1 Mediální dotazy (media queries) ... 35
2.3.2 Plovoucí struktury (fluid grids) ... 36
2.3.3 Škálovatelné obrázky (scalable images) ... 37
2.4 Trendy ve webdesignu ... 38
2.4.1 Kontroverzní menu ... 39
2.4.2 Rozdělení obrazovky ... 41
2.4.3 Návrat pastelových barev ... 42
2.4.4 Rolování ve vlastní režii ... 43
2.4.5 Propojení reálného a digitálního světa ... 44
2.4.6 Decentní animace a mikro interakce ... 44
2.4.7 Design nad poměrem stran ... 45
2.4.8 Všudypřítomná videa ... 46
2.4.9 Gamifikace ... 47
2.5 Psychologie barev ... 48
2.5.1 Barevné asociace ... 49
2.6 Písmo ... 51
2.6.1 Formáty fontu... 51
2.6.2 Klasifikace písma ... 53
2.6.3 Použití písma na webu ... 55
2.6.4 Vyznačování textu ... 56
2.6.5 Správa fontů ... 56
2.7 Fotobanky ... 57
3. Postup při tvorbě webových stránek ... 59
3.1 Předprojektová příprava ... 59
3.2 Cenová kalkulace ... 59
3.3 Plánování ... 60
3.3.1 Wireframe ... 60
3.3.2 Typ webových stránek ... 61
3.4 Grafický návrh... 62
3.5 Testování prototypu... 62
3.6 Kódování webových stránek ... 63
3.7 Testování a doručení ... 63
3.7.1 Uživatelské testování použitelnosti... 63
3.7.2 Card Sorting ... 64
3.7.3 A/B testování ... 65
3.7.4 Feedback formulář ... 66
3.7.5 Uživatelské testování oční kamerou (eye-tracking) ... 67
3.8 Údržba ... 70
4. Specifika školních webových stránek ... 72
5. Realizace webových stránek ... 73
5.1 Původní podoba stránek ... 73
5.2 Předprojektová příprava ... 74
5.2.1 Základní informace ... 74
5.2.2 Účel a cíle webu ... 74
5.2.3 Trh a marketing ... 76
5.2.4 Koncepce webu ... 77
5.2.5 Technické otázky ... 77
5.3 Cenová kalkulace ... 78
5.4 Testování původních stránek ... 80
5.4.1 Úkoly pro testované osoby... 81
5.4.2 Výsledky testování ... 82
5.5 Cíle nových webových stránek ... 82
5.6 Wireframe (drátový model) ... 83
5.7 Webdesign ... 87
5.7.1 Výběr barev ... 88
5.7.2 Výběr fontu ... 88
5.7.3 Grafika jednotlivých prvků ... 89
5.8 Testování prototypu... 95
5.8.1 Úkoly pro testované osoby... 96
5.8.2 Výsledky testování prototypu ... 97
5.8.3 Zhodnocení testování prototypu ... 97
5.9 Kódování ... 98
5.9.1 CSS a LESS ... 99
5.9.2 Bootstrap ... 101
5.9.3 Mediální dotazy (media queries) ... 101
5.9.4 Plovoucí struktury (fluid grids) ... 102
5.10 Testování ... 103
5.10.1 Výsledky testování na počítači ... 104
5.10.2 Výsledky testování na mobilním zařízení ... 105
5.10.3 Vyhodnocení ... 105
5.11 Zhodnocení ... 107
Závěr ... 109 Seznam použité literatury ... 110
Seznam obrázků
Obrázek 1: Průměrně strávený čas (v min) za den strávený na digitálních médiích v UK . 31
Obrázek 2: Webové stránky České pošty ... 32
Obrázek 3: Ukázka vadného přesměrování ... 34
Obrázek 4: Porovnání alza.cz na počítači a m.alza.cz na mobilu ... 35
Obrázek 5: Přeskupování prvků v různých zobrazovacích zařízeních ... 37
Obrázek 6: Ukázka webdesignu bez klasického menu ... 39
Obrázek 7: Homepage bez klasického menu, pouze s ikonou hamburgeru ... 40
Obrázek 8: Ukázka překrývacího menu ... 41
Obrázek 9: Ukázka webu s rozdělenou obrazovkou ... 42
Obrázek 10: Pastelové barvy s přechodovým gradientem ... 43
Obrázek 11: Virtuální posuvník, který reaguje na pohyb myši. ... 44
Obrázek 12: Designové prvky k upoutání pozornosti ... 45
Obrázek 13: Ukázka designu nad poměrem stran ... 46
Obrázek 14: Video jako součást webu ... 47
Obrázek 15: Ukázka gamifikace ... 48
Obrázek 16: Písmová osnova ... 53
Obrázek 17: Banner 1 ... 66
Obrázek 18: Banner 2 ... 66
Obrázek 19: Saccade pathways ... 68
Obrázek 20: Heat maps ... 69
Obrázek 21: Titulní strana původních webových stránek ... 73
Obrázek 22: Porovnání struktury starého a nového webu ... 84
Obrázek 23: Drátový model homepage pro desktopové zobrazení ... 86
Obrázek 24: Drátový model homepage pro mobilní zobrazení ... 87
Obrázek 25: Název a logo školy ... 90
Obrázek 26: Navigace nového webu ... 90
Obrázek 27: Horní slide ... 91
Obrázek 28: Tématické slidy ... 92
Obrázek 29: Ukázka tabulek a rozcestníků ... 92
Obrázek 30: Podoba tabulky na původním webu ... 93
Obrázek 31: Nová podoba ceníků ... 93
Obrázek 32: Nová podoba kontaktů ... 94
Obrázek 33: Nová podoba patičky ... 94
Obrázek 34: Nová podoba homepage pro mobilní zobrazení ... 95
Obrázek 35: Vytváření funkčního prototypu ... 96
Obrázek 36: Výsledek testování uživatelů pomoci tepelné mapy ... 106
Obrázek 37: Výsledek testování uživatelů pomoci tepelné mapy ... 106
Obrázek 38: Vizualizace nových stránek ... 108
Seznam tabulek
Tabulka 1: Cenová kalkulace webové stránky ... 78
Tabulka 2: Doplňující ceník služeb ... 80
Tabulka 3: Specifikace testovaných uživatelů ... 81
Tabulka 4: Výsledky testování původního webu ... 82
Tabulka 5: Struktura původní a nové homepage ... 84
Tabulka 6: Výsledky testování prototypu ... 97
Tabulka 7: Specifikace testovaných uživatelů ... 104
Tabulka 8: Výsledky testování nového webu na počítači ... 104
Tabulka 9: Výsledky testování nového webu na mobilním zařízení ... 105
Seznam zkratek a symbolů
HTML HyperText Markup Language CSS Cascading Style Sheets PHP Hypertext Preprocessor SEO Search Engine Optimization W3C World Wide Web Consortium URL Uniform Resource Locator
UX User Experience
UI User Interface
CMS Content Management System
Úvod
S rozvojem internetu a jeho snadnou dostupností se pro mnoho organizací stává nezbytné být viditelný na internetu pomocí webových stránek. Pro zákazníky, klienty, dodavatele či sponzory tvoří webové stránky často první kontakt s danou organizací, a proto je důležité, aby byly precizně vytvořené a přehledné. Každý z návštěvníků by měl najít potřebné informace během krátkého okamžiku z pohodlí domova a nezávisle na tom, z jakého přístupového zařízení na web vstupuje.
Cílem této diplomové práce je vhodně navrhnout a vytvořit webové stránky, které by měly posloužit k prezentaci Základní a mateřské školy ve Stráži pod Ralskem a zároveň poskytovat veřejnosti informace o těchto subjektech. Diplomová část se zabývá pouze návrhem a realizací frontendu, tedy částí, která je viditelná běžným návštěvníkům.
O návrhu a realizaci backendu (administrační část) pojednává diplomová práce kolegy Bc. Martina Letáčka.
Diplomová práce je pro přehlednost rozdělena do dvou částí, teoretické a praktické.
Teoretická část je věnována současným možnostem webového prostředí, specifikám školního webu či správnému postupu při vytváření internetových stránek. V praktické části je popsána tvorba struktury webového portálu a grafického rozhrání. Výsledkem je vytvoření webových stránek, jež si kladou za cíl zpřehlednit a poskytnout větší komfort pro rodiče, žáky, učitele a ostatní návštěvníky.
1. Použité technologie a nástroje
1.1 Internet
Samotné slovo internet je složenina dvou slov, latinské předpony inter (česky mezi) a anglického slova net (česky síť). Původně se jednalo pouze o jednu síť připojenou k Internetu, avšak postupem času došlo k zobecnění a v současně době výraz internet popisuje celou síť. [14]
Definic internetu je mnoho, ale každá ve výsledku popisuje internet jako „síť sítí“. Podle PaedDr. PhDr. Jiřího Dostála, Ph.D. [4, str. 7] „ Jde o celosvětovou síť propojující menší počítačové sítě, která se neustále po stránce geografické rozšiřuje a je omezena velikostí Země. Počítače v síti Internet pracují buď jako servery a nebo jako klientské stroje. Jejich význam je zřejmý: servery své služby poskytují, klientské počítače tyto služby využívají.“
Počátky internetu lze datovat do roku 1958, kdy byla založena agentura ARPA (Advanced Research Projects Agency), která měla za cíl udržet technologický náskok ozbrojených sil USA před SSSR. O 11 let později, v roce 1969, se spustila síť se 4 uzly, nazvaná ARPANET. Ta měla za cíl propojit důležitá vojenská pracoviště a zajistit funkční výměnu informací. Důraz byl kladen především na decentralizaci sítě, aby v případě zničení některé jednotky nevypadla celá síť. Po dalších 15 let se internet prakticky nerozvíjel, byl využíván zejména vládními a vojenskými organizacemi. V roce 1983 vznikl protokol TCP/IP (Transmission Control Protocol/Internet Protocol), který se stal hlavním protokolem sítě Internet.
V roce 1989 vznikla ve Švýcarsku nejvyužívanější služba Internetu – WorldWideWeb.
Mezi hlavní zakladatele patří Tim Berners-Lee z CERNu (Conseil Européen pour la recherche nucléaire - Evropské centrum pro jaderný výzkum), jenž ji původně zamýšlel pouze jako vnitropodnikový systém. Rozkvět internetu způsobila komercializace v devadesátých letech. Původně navržený projekt především pro vědecká a akademická pracoviště se stal díky soukromému sektoru celosvětovou sítí. [4]
1.2 W3C
Internet nemá žádné majitele ani řídicí orgány. To ale neznamená, že neexistují orgány, jež se nevěnují dalšímu vývoji webu. Tuto činnost má na starost organizace W3C (World Wide Web Consortium), kterou založil v roce 1994 Tim Berners-Lee. Organizace si klade za cíl využít plný potenciál webu, a to vývojem směrnic a protokolů, které zajistí dlouhodobý růst webu. Snahou organizace je poskytnout web pro všechny, bez rozdílu jejich softwarového nebo hardwarového vybavení, síťové infrastruktury, rodného jazyka, kultury, zeměpisné polohy nebo fyzické či duševní schopnosti. Další úsilí věnuje organizace W3C do podpory zobrazovacích zařízení, jejichž počet se rapidně zvyšuje.
Mobilní telefony, chytré telefony, interaktivní televizní systémy, hodinky a v poslední době i domácí spotřebiče mohou mít přístup k webu. [15, 17]
1.3 HTML
Podle PaedDr. PhDr. Jiřího Dostála, Ph.D. „HTML (HyperText Markup Langue) je značkovací jazyk (nikoliv programovací), pomocí kterého se vytvářejí webové stránky.“
V roce 1990 ho navrhnul Tim Berners-Lee, poněvadž potřeboval jazyk, s nímž by mohl lehce upravovat dokumenty na Internetu. Spolu s tím vytvořil i protokol HTTP (HyperText Transfer Protocol), který slouží k výměně hypertextových dokumentů ve formátu HTML. O rok později, v roce 1991, Tim Berners-Lee vytvořil první webový prohlížeč, který nazval WorldWideWeb. Následující roky vyšly další verze s názvy
HTML, HTML+
a HTML 3.0. V roce 1996 vyšla oficiální verze jazyka HTML s názvem HTML 2.0. Po této verzi přišly ještě HTML 3.2, HTML 4.0, která již byla schválena konsorciem W3C (World Wide Web Consorcium). Verze 4.01 byla již pouze opravná verze k té předchozí a zároveň byla označována jako poslední verze HTML, poněvadž se plánoval přechod na XHTML (Extensible Hypertext Markup Language - rozšiřitelný hypertextový značkovací jazyk), který měl plně nahradit HTML. Jedná se o rozšířený HTML jazyk doplněný o mnoho funkcí a možností. Některým předním vývojářům se ale tento krok s pokračováním XHTML nezamlouval, a proto bylo rozhodnuto, že se vytvoří HTML5.
Ta byla vydána a schválena v roce 2010 a momentálně je nejnovější verzí. HTML5 v sobě zahrnuje nejenom současné značkovací prvky, ale také nové prvky, které dovolí
webovým designerům být v sémantice značkování expresivnější. Snahou současnosti je vytvořit novou rozšířenou platformu XML (Extensible Markup Langue), která by lépe vyhovovala dnešním požadavkům na síti Internet.
Každý HTML by měl obsahovat několik základních tagů hlavičky a těla. Ty zaručí bezproblémové zobrazení v internetových prohlížečích.
Deklarace DTD (Document type Definition) – uváděna vždy na začátku dokumentu. Obsahem DTD je seznam deklarací jednotlivých prvků – elementů, seznamů atributů, notací, entit.
Kořenový element – označuje začátek a konec celého dokumentu, značí se tagem
<html>.
Hlavička dokumentu – obsahuje metadata, která se vztahují k celému dokumentu, například jazyk, popis, klíčová slova, kódování atd. Značí se tagem
<head>.
Tělo dokumentu – obsahuje veškerý zobrazovaný obsah stránky, značí se tagem
<body>.
Základní zdrojový kód stránky pak může vypadat takto:
<!DOCTYPE html>
<html>
<head>
<title>Titulek stránky</title>
</head>
<body>
<h1>Nadpis stránky</h1>
<p>Text na stránce</p>
</body>
</html>
Charakteristikou jazyka HTML je použití značek (známé jako tagy) a jejich vlastností (atributů). Mezi tagy se uzavírají části textu dokumentu a udává se jimi význam (sémantika). Názvy jednotlivých značek se uzavírají mezi úhlové závorky < a >. Tagy můžou být párové nebo nepárové. Párové tagy musí být shodné, koncový tag navíc musí obsahovat před značkou lomítko (<p> a </p>). Nepárový tag je obsažen pouze na počátku řádku <br />. HTML tagy mohou kromě názvu obsahovat také jeden nebo více atributů.
Atributy poskytují prohlížeči informaci o tom, jak by se měl element zobrazit. Skládají se z názvu a hodnoty, které jsou vzájemně oddělené rovnítkem (<body bgcolor="blue">).
Z hlediska významu lze rozdělit značky na 3 základní skupiny: [18]
strukturální
o pro rozvržení struktury dokumentu
o příklady: <p> a </p> (odstavec), <h1> a </h1> (nadpis), <form> a
</form> (formulář), <div> a </div> (blokový element).
stylistické
o určují vzhled prvku při zobrazení v dokumentu
o postupně se od nich opouští, nahrazují je kaskádové styly
o příklady: <b> a </b> (tučné písmo), <i> a </i> (kurzíva), <u> a </u>
(podtržení)
sémantické
o popisují povahu obsahu prvku
o trendem je využití sémantických značek k usnadnění automatizovaného zpracování dokumentů
o doposud používaný prvek div, může být v novější verzi HTML5 nahrazen větší škálou strukturních tagů
o příklady: <table> a </table> (tabulka), <header> a </header> (hlavička),
<footer> a </footer> (patička), <nav> a </nav> (navigace)
1.4 CSS
CSS je zkratka pro Cascading Style Sheets (česky kaskádové styly) – jedná se o samostatný, ale doplňující jazyk k jazyku HTML,XHTML a XML. [3]
Jazyk CSS byl vydán v roce 1996 organizací W3C. Postupně vyšly verze CSS1, CSS2 a nejnovější CSS3. Kaskádové styly slouží k efektivnější stylování webových stránek, kdy vývojář může jednoduše definovat vlastnosti pro celý web. Nahrazuje tím formátování stránek pomoci HTML tagů, které jsou značně omezené a na větších webech
těžko udržovatelné. Slovní spojení kaskádové styly značí jejich nejcharakterističtější vlastnost. Jednotlivá pravidla kaskádových stylů se mohou vzájemně překrývat, což zvyšuje jejich efektivnost. Pokud jsou kaskádové styly správně využity, je vzhled dokumentu na obsahu zcela nezávislý. Takto oddělené vrstvy (prezentační a strukturální) zvyšují přístupnost webu a zde tkví největší rozdíl oproti formátování s pomocí atributů, jež se užívalo dříve. Kaskádové styly neupravují pouze obrazovky klasických prohlížečů, ale formátování lze použít i na mobilní a tiskové verze. Pomocí vlastnosti Media Queries, která je obsažena v CCS3, lze rozpoznat, z kterého zařízení je stránka prohlížena, a tím přizpůsobit samotnou stránku s obsahem (viz Responzivní web). [1]
Výhody kaskádových stylů oproti formátování v samotném HTML
větší možnosti formátování oproti HTML tagům
rychlejší načítání stránky (CSS dokumenty se uloží do cache počítače a při otevření jiné stránky se stejnou definicí stylů už se nemusí znova načítat)
oddělená definice stylu zabírá méně prostoru na disku, a tím je její načítání rychlejší
snadná úprava všech dokumentů najednou, změna daného stylu na jednom místě se projeví ve všech dokumentech
1.5 LESS
Jak již bylo zmíněno, kaskádové styly slouží ke stylování webových stránek. Až na výjimky jsou považovány jako standard pro popis vizualizace formátu hypertextových dokumentů. Jenže koncepce snadného popisu s sebou nese i některé zádrhely. Kvůli tomu vznikají různé nadstavby a preprocesory, které mají za úkol tyto nedokonalosti CSS vyřešit. Jedním z nich je i LESS, který rozšiřuje CSS o dynamické prvky, jako jsou proměnné, mixiny, výpočty a funkce. LESS byl vytvořen v roce 2009 a je open source.
Pokud se vývojář rozhodne používat LESS, musí soubor s příponou less zkompilovat do výsledného css souboru. [34]
1.6 PHP
Podle Ing. Jiřího Brázy je PHP [5, str.15] „hypertextový preprocesor, který na serveru interpretuje stránky HTML s vlastními příkazy před jejich odesláním ke klientovi (obvykle je jím webový prohlížeč). To znamená, že PHP umožňuje vkládat vlastní skripty (krátké úseky kódu, ale i celé programy) přímo do hypertextových stránek.“
Tento jazyk navržený pro tvorbu dynamického webu vyšel v roce 1995. V současně době je nejnovější verze PHP7, která vyšla v roce 2016. Původní význam zkratky PHP byl Personal Home Page, nyní se překládá jako Hypertext Preprocessor. Při používání PHP je na rozdíl od HTML a JavaScriptu skript prováděn již na straně serveru a k uživateli je přenesen pouze výsledek. Z toho důvodu nelze zobrazit zdrojový kód PHP v prohlížeči.
[5]
Výhody použití PHP na webových stránkách
jedna funkce PHP zajistí zapsání kódu (hlavička, patička) opakujícího se ve více dokumentech
nezávislost na užité platformě (Windows, Linux, Unix)
obsáhlý soubor funkcí v základní knihovně PHP
umí pracovat se soubory a mnoha různými databázemi
s PHP lze upravovat a generovat grafiku
podporuje všechny důležité internetové protokoly
svobodná licence, neobsahuje copyleft1
1 použití autorského práva, kdy program vycházející z copyleft licence musí obsahovat také copyleft licenci (pokud je program nabízen zdarma, i rozšířený nebo modifikovaný program se musí nabízet zdarma)
1.7 JavaScript
JavaScript je objektově orientovaný skriptovací jazyk, který byl vyvinut Brendanem Eichem ve společnosti NetScape mezi léty 1995 až 1996. V této době se jmenoval tento jazyk ještě LiveScript. Nyní se nejvíce používá jako interpretovaný programovací jazyk pro internetové stránky zapisovaný přímo do HTML kódu stránky. Pomocí JavaScriptu lze vytvořit interaktivní prvky, jako jsou tlačítka, blikající texty nebo i jednoduché hry.
Javascript je závislý na prohlížeči, uživatel ho může dokonce i vypnout. Jeho funkčnost se liší použitým prohlížečem a jeho verzí, kde skript nemusí vždy správně fungovat. [16]
1.8 SEO
Jak zmiňuje Pavel Procházka ve své knize [6, str. 29]: „SEO je zkratka z anglického označení Search Engine Optimalization, volně přeloženo optimalizace pro vyhledávače.
Optimalizací je míněno vytváření a upravování webových stránek takovým způsobem, aby jejich forma a obsah byly vhodné pro automatizované zpracování roboty internetových vyhledávačů.“
Hlavním cílem SEO je dostat se v pozicích vyhledávaní na přední příčky, ideálně na první stránku vyhledávaní, kde je větší šance na oslovení cílových návštěvníků.
Jak zmiňuje ve své knize Mgr. Martin Domes [7, str. 9]: „SEO není jeden postup ani zaručená metoda, ale je to souhrn technik, sledování, ladění a také neodmyslitelného marketingu. Většina technik používaných v rámci SEO není nijak speciální, vše vychází ze zásady tvorby sémantického a přístupového webu, k čemuž se následně přidávají další metody směřující k lepšímu hodnocení webu ze strany vyhledávače.“
Volně přeloženo záleží z velké části na správně webové SEO optimalizaci. Na druhé straně, každý vyhledávač používá jiné algoritmy vyhledávání. Zatímco česká internetová jednička ve vyhledávání Seznam.cz neklade například velký důraz na tzv backlinky2, vyhledávač od Googlu jim přisuzuje velký důraz. Proto se v současné době mluví o dvojí
2 zpětný odkaz – internetový odkaz směřující z jedné webové stránky na jinou
optimalizaci, protože první pozice na Seznamu neznamená automaticky první pozici na Googlu a naopak. [7]
1.9 MySQL
MySQL je multiplatformní databáze s otevřeným zdrojovým kódem. Tento databázový systém byl vytvořený švédskou společnosti MySQL AB v roce 1995, nyní již pod společností Oracle Corporation. Ke komunikaci mezi databázovými servery slouží jazyk SQL (strukturovaný dotazovací jazyk). Díky otevřenému kódu a podpoře souběžné práce více uživatelů se stal MySQL v posledních letech mezi uživateli populární. Mezi největší konkurenty patří PostgreSQL, Microsoft SQL Server a Firebird. [8]
1.10 Bootstrap
Bootstrap je volně stažitelná sada nástrojů, která umožňuje snadnější tvorbu webů a webových aplikací. Součástí bootstrapu jsou návrhářské šablony založené na CSS a HTML, které lze volně stáhnout a upravovat. [32]
Za vznikem Bootstrapu stojí dvojice zaměstnanců z Twitteru – Mark Otto a Jacob Thornton. Ve firmě byla využívaná řada knihoven, což vedlo k náročné údržbě a nekonzistenci zdrojových kódů. Z tohoto důvodu měli vytvořit framework3, který bude podporovat konzistenci mezi interními nástroji. Samotný vývojář Mark Otto prohlásil o vzniku toto: „Velmi malá skupina vývojářů společně se mnou měla za úkol navrhnout a vybudovat nový interní nástroj a viděla příležitost udělat něco více. Skrze tento proces jsme chtěli vytvořit něco o moc důležitějšího než další nástroj pro vnitřní využití. O měsíc později jsme skončili s první verzí Bootstrapu jako metodou k dokumentaci a sdílení běžných designových vzorů a přínosů ve společnosti.“ [13, 33]
Z praktického hlediska je pro vývojáře tento framework velice užitečný. Pro programátora to znamená usnadnění několika hodin práce, které by zabralo opětovně
3 softwarová knihovna, základní kód pro další projekty
kódování některých elementů. Samozřejmě elementy jsou v základním provedení a musí se ještě vhodně nastylovat. Bootstrap se stává i vhodným nástrojem pro firemní účely, poněvadž je open-source, což znamená, že jej lze volně používat ke komerčním účelům.
Mezi největší výhody bootstrapu patří:
Responzivita – 100% responzivní a dokonale přizpůsobený na mobilní telefony.
Mobile-first – ve verzi 3 byl framework kompletně přepsán, aby podporoval tzv.
přístup mobile-first.
Flat design – svěží a moderní vzhled prvků, který reaguje na aktuální trendy.
Grid – dvanáctisloupcový systém, který ve většině případů dokáže nahradit pozicování elementů na stránce.
1.11 User Experience
Termín User Experience je do češtiny překládán jako uživatelský prožitek a často bývá odborníky definován odlišně. Podle Dona Normana je User Experience soubor vlastností webů či aplikací, které mají vliv na spokojenost uživatele. Jeff Johnson, zakladatel společnosti UI Wizards a uznávaný odborník na použitelnost, uživatelské rozhraní a design, popisuje User Experience jako vše, co uživatel vidí a s čím se potká, když webovou stránku navštíví. [25]
Russ Unger a Carolyn Chandler definují UX jako tvorbu a synchronizaci jednotlivých prvků, které ovlivňují uživatelský prožitek s danou firmou se záměrem ovlivnit jejich vnímání a chování. [10]
Pokud bychom měli shrnout všechny tyto definice do jasného sdělení, User Experience neboli uživatelský prožitek, je jakýsi dojem, pocit a emoce uživatele, které pociťuje při procházení webové stránky. Správně vytvořený UX design by měl být zaměřen na cíle a potřeby uživatelů, kteří by neměli mít problémy s interakcí na dané stránce. Než o samotné designování jde spíše o průzkum, analýzu, plánování, prototypování a kreslení.
Během vytváření návrhu se UX designer musí vcítit do role běžného uživatele, kterému přizpůsobuje úplně vše. Konečný výsledek by měl být takový, že ho uživatel ani nepostřehne. Při dokonalém UX designu uživatel nepocítí žádné problémy
s vyhledáváním, nemusí podstupovat obtížná rozhodnutí během cesty k tomu, kvůli čemu web navštívil. Z toho důvodu je perfektně zpracovaný UX důležitý u e-shopů, kde ve vysoké konkurenci obchodů může být uživatelský prožitek pro zákazníky klíčový.
Podle Petera Morvillla, předního experta na informační architekturu, musí UX obsahovat následující aspekty:
Užitečný: Obsah by měl být originální a splňovat potřebné požadavky.
Použitelný: Stránky musí být lehce ovladatelné a intuitivní.
Žádostivý: Zahrnuje využití prvků, jako jsou obrázky, videa nebo firemní barvy k evokování emocí uživatelů.
Nalezitelný: Obsah musí být lehce dohledatelný pomocí přehledné navigace.
Přístupný: Obsah musí být přístupný i osobám se zdravotním postižením.
Důvěryhodný: Texty musí být pravdivé a lehce ověřitelné, neměly by se tam vyskytovat gramatické ani stylistické chyby.
1.12 User Interface
User interface (UI), neboli uživatelské rozhraní, se soustředí na konečný design webových stránek. Představuje prostor, kde se návštěvník pohybuje a definuje způsob, jakým lze stránku ovládat a pohybovat se po ní. Mohou to být technické prvky, jako jsou různá tlačítka, ikony, prokliky, díky kterým se zlepšuje uživatelské ovládání. Od UX se liší v tom, že je na první pohled viditelný.
Cílem každého UI designera je vytvořit takový web, který je atraktivní a uživatelsky přívětivý. Pomocí důmyslných a intuitivních designových prvků vytváří webové stránky přívětivější a pomáhá uživatelům najít to, co potřebují. Cílem UI designu je usnadnit komunikaci mezi webovou stránkou a samotným uživatelem. UI designer nejčastěji řeší:
Atraktivní a přívětivý vzhled stránek
Prezentaci značky v nejlepším světle
Design, který úspěšně dovede uživatele k cíli
Interaktivní elementy na stránce, které usnadní pohyb po webu a dostanou danou službu více do vědomí uživatele [41]
1.13 Ux vs. UI
Jak user experience, tak user interface jsou záležitostí designu a oba kroky jsou v procesu výroby webových stránek stejně důležité. I když UI je jakýmsi podtématem UX, v praxi se jedná o dva oddělené přístupy se stejným cílem: zlepšit uživatelův dojem o webové stránce a usnadnit mu hledání toho, kvůli čemu stránky navštívil.
Příklad dobrého UI a špatného UX je web, který vypadá skvěle, ale je prakticky nepoužitelný. Naopak příklad špatného UI a dobrého UX je web, který je lehce ovladatelný a dává smysl jeho třídění a pohyb v něm, ale je neintuitivní. Proto by se při vývoji webu neměla opomenout ani jedna část. [41]
1.14 Google Analytics
Google Analytics je nástroj společnosti Google, který nabízí vlastníkům webových stránek měřit a získávat statistická data o návštěvách svého webu. Služba Google Analytics byla spuštěna v roce 2005 pro všechny uživatele. V současné době existují dvě verze – základní, bezplatná (Standard) a rozšířená, placená (360 Suite). Již základní bezplatnou verzi lze používat pro komerční i nekomerční účely, služba je dostupná všem, kdo mají Google účet.
Služba Google Analytics je zaměřena na malé a středně velké webové stránky. Instalace a obsluha je velmi jednoduchá. Po přihlášení do systému a zadání několika informativních údajů se musí zkopírovat fragment měřicího kódu. Ten se poté umístí do kódu, zpravidla do záhlaví.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA- 110547858-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110547858-1');
</script>
Po vložení kódu na příslušné stránky se již stačí přihlásit do administrace Google Analytics. Tam již vlastník stránek z přehledného grafu zjistí spoustu věcných informací.
počet návštěv
počet uživatelů
míra okamžitého opuštění
doba trvání návštěvy
nejvíce navštěvované sekce stránek
návštěvy podle zařízení (počítač, mobil, tablet)
návštěvy podle země a jiné [45]
1.15 Adobe Photoshop
Grafický nástroj od americké firmy Adobe Systems, který se zaměřuje na tvorbu a úpravu bitmapové grafiky. První verze s označením 1.0 vyšla již v roce 1990. Aktuální verzí v roce je Adobe Photoshop CC 2018, jenž je již čtrnáctou verzí. Pod zkratkou CC se schovává označení Creative Cloud. Ten nahradil dosavadní business model CS (Creative Suite). Nový Creative Cloud je revoluční v tom, že nyní si zákazník software nekupuje jako produkt, ale pouze jako službu. Uživatel tedy ve výsledku platí za to, že v něm může pracovat. Platby jsou řešeny pravidelnými měsíčními či ročními poplatky. Nevýhodou je, že pokud se uživatel rozhodne přestat platit, dojde k zamezení přístupu do programu a je zablokovaný přístup k položkám uloženým na cloudu. Výhodou této změny business plánu je vždy aktuálnost poslední verze.
Adobe Photoshop má mnoho užitečných funkcí. Nejčastěji se využívá pro práci s fotografiemi a pro tvorbu grafiky. Fotky lze ořezávat, retušovat, měnit barvy, vytvářet fotomontáže, upravovat jas s kontrastem a mnoho dalších funkcí. Dále je vhodný pro tvorbu grafického návrhu webu, kdy nabízí spoustu souvisejících funkcionalit. Například pomoci funkce Uložit pro web usnadní uživateli práci v podobě ručního řezání a ukládání, kde sám program uloží jednotlivé obrázky do samostatných souborů.
1.16 Adobe Illustrator
Další grafický nástroj od společnosti Adobe Systems. Od Adobe Photoshop se odlišuje v tom, že program slouží především k tvorbě a úpravě vektorové grafiky. První verze byla vydaná v roce 1987, dnes již je na trhu 22. generace s názvem Adobe Illustrator CC 2018.
Stejně jako u Photoshopu je zde placeno za službu. Jedná se o vhodný nástroj k vytváření vektorové grafiky, jako jsou ilustrace, vizitky, letáky či loga.
2. Webdesign
Webdesign je disciplínou, která funguje mezioborově. Kombinuje poznatky z vizuální komunikace, interakčního designu, ale také například z psychologie, která umožňuje ovlivnit uživatele internetu. Hlavním účelem webdesignu je vytvoření funkčních webových stránek či určité webové aplikace. Při webdesignu je důležitá také funkce marketingu, brandingu, copywritingu a další. [19]
S vyššími nároky na webdesign se samozřejmě zvyšují i nároky na vývojáře. Jak píše Mgr. Jan Řezáč ve své knize [9, str.23] „Webdesign se vyvíjí a rozpíná. Ještě v roce 2002 bylo možné být špičkovým grafikem, copywriterem, account managerem a programátorem zároveň.“ V současné době se musí jednotlivé disciplíny více specializovat, a proto se na dnešním trhu práce objevují pracovní pozice jako webový grafik, UX designér, programátor, copywriter, kodér nebo SEO konzultant. Rozdělení pracovních pozic má více důvodů. Moderní webové stránky jsou náročnější na tvorbu a je potřeba znát více úkonů. Dále by větší projekty zabraly jednomu člověku několik měsíců práce a jednoduše by na to jeho schopnosti nemusely stačit. Proto je výhodnější tvorbu webu rozložit mezi více odborníků. Dle Mgr. Jana Řezáče je „webdesigner kombinací těchto povolání: UX designer, informační architekt, webový grafik, webový kodér, front- end developer, který má navíc přehled v oborech: SEO, marketing, branding,
psychologie, gamifikace
a byznys“ [9, str.25]. Postupem času se k základnímu vývoji webových stránek nabalilo mnoho nových činností jako analýza samotného byznysu, analýza konkurence, analýza brandu či analýza klíčových slov. Ignorování některého zmíněného prvku může celý projekt odsoudit k zániku ještě dříve, než začne samotná tvorba webu, tedy návrh, kódování, testování a nasazení.
Počátek webdesignu je blízce spojen s rozvojem počítačové grafiky. S rozšířením počítačů do domácností byl kladen velký důraz na snadné a pohodlné ovládání. Z tohoto důvodu se počítačová grafika a samotný webdesign dostává z vědecké sféry do sféry spotřební. Rychlý vývoj technologií má za následek, že samotný webdesign se musí neustále přizpůsobovat, a to jak uživatelům, tak v poslední době především zobrazovacím zařízením. Webové stránky zaznamenávají velký nárůst příchozích návštěv z mobilních zařízení. [20]
Obrázek 1: Průměrně strávený čas (v min) za den strávený na digitálních médiích v UK Zdroj: https://www.emarketer.com/images/chart_gifs/208001-209000/208187.gif
Jak ukazuje obrázek č. 1, obliba zobrazování webových stránek na mobilních telefonech a tabletech se rapidně zvedá a roste na úkor ostatních médií. V roce 2012 strávil dospělý občan Spojeného království průměrně pouze 53 minut na mobilních zařízeních. Již o 3 roky později se tato doba vyšplhala na 138 minut, což činí nárůst o 260 % a znamená předstižení desktopových zařízení. U těch se zaznamenal nárůst o pouhých 10 % za 3 roky, přičemž v roce 2015 strávil uživatel průměrně 135 minut na počítači či notebooku.
Tento progres posledních let je výsledkem nových přístupů k návrhu webdesignu. Těmi jsou:
klasický webdesign
mobilní webdesign
responzivní webdesign
2.1 Klasický webdesign
Nejstarší z těchto typů webdesignu je klasický webdesign, který má fixní grafické rozvržení a hiearchii. Jedná se v podstatě o jakoukoli webovou stránku, vytvořenou
0 50 100 150 200 250 300 350
2012 2013 2014 2015 2016
Průměrně strávený čas (v min) za den strávený na digitálních médiích v UK
Počítač/Notebook Telefon/Tablet
pomocí HTML, CSS či dalšího jazyka, který se nedokáže přizpůsobit zobrazovacímu zařízení. I přesto se webová stránka zobrazí na mobilním zařízení, avšak ve stejné podobě jako na počítači. Výhodou tohoto webdesignu je snazší tvorba, tudíž jsou i menší pořizovací náklady. Nevýhodou je nepřívětivé zobrazení na mobilních zařízeních, kde se může stránka hůře ovládat. Delší dobu také trvá načtení požadované stránky a mobilní zařízení nemusí podporovat všechny služby klasického webu, jako například flash animace. Přesto existuje několik zásad, jak lze udělat klasický web přátelský pro mobilní zařízení. [21]
zvětšení tlačítek k snadnému ovládání prsty na dotykových obrazovkách
nevyužívat mouseover vrstvy, které se rozbalí jenom po najetí myši
povolení zvětšovat stránky (tzv. zoomovat)
zrychlení načítání webu
nevyžadovat po uživatelích zbytečné psaní
Obrázek 2: Webové stránky České pošty Zdroj: https://www.ceskaposta.cz/index
2.2 Mobilní webdesign
Další možností, jak přistupovat k webdesignu, je vytvoření mobilního webu, který je často zaměňován za responzivní design. Zatímco u responzivního webu se jedná o jednu stránku na jedné URL adrese, jež se přizpůsobuje zobrazovacímu zařízení, mobilní web často funguje na subdoméně klasické verze (např. m.cd.cz, m.novinky.cz). Funguje jako ekvivalent ke klasickému webu, kde je totožný obsah. Pokud rozpozná, že uživatel přistupuje z mobilního zařízení, zobrazí mu mobilní web. „Hlavní důvod, proč i velké weby jako Facebook nebo Twitter mají mobilní weby na subdoménách m.facebook.com / mobile.twitter.com, je typicky historický,“ zmiňuje Bohuslav Jahoda [22]. „Daný web byl nejprve vytvořen pro desktop a až následně a nezávisle byla vytvořena mobilní podoba.
V minulosti byl i více rozšířený názor, že mobilní web je pouze osekaná podoba hlavního webu pro desktopy s nejnutnějšími funkcemi a pro pokročilé možnosti má člověk přepnout na „plnou stránku,“ doplňuje Jahoda. Tím se mobilní verze stávaly neplnohodnotným webem, kde uživatelé nemuseli najít všechny prvky, na které byli zvyklí v desktopové verzi. Postupem času mobilní zařízení získávají zvětšující podíl na zobrazování webových stránek, což způsobuje, že mobilní weby jsou na ústupu a nahrazují je responzivní weby. Výhodou vytvoření mobilního webu je snadné ovládání, rychlé načítání a možnost vytvořit odlišný obsah pro počítače a mobily. Na druhé straně jsou vyšší pořizovací náklady za dvě webové verze, a tím se zároveň zvyšuje časová náročnost na správu obou verzí webů. Další nevýhoda se skrývá ve vadném přesměrování (tzv.
faulty redirects). Jedná se o stav, kdy podstránky desktopového webu přesměrovávají na hlavní stránku mobilního. Pro ukázku je tato situace znázorněna na obrázku č. 3. [22]
Obrázek 3: Ukázka vadného přesměrování
Zdroj: http://jecas.cz/files/mobilni-web-url/faulty-redirects.png
Při vytváření přehledného a intuitivního mobilního webdesignu by se mělo dodržovat několik zásadních pravidel.
vysoký kontrast písma a pozadí (nejlépe kombinace černé a bílé, která se na sluníčku nejlépe čte)
zjednodušené menu
automatické zobrazení mobilní verze
zvýraznění vyhledávání
umožnění přepínání mezi klasickou a mobilní verzí
více variant stylů pro různá mobilní zařízení a tablety podle úhlopříčky obrazovky
minimalizace počtu načítaných souborů
Zdroj: https://www.alza.cz
2.3 Responzivní webdesign
Nejnovějším trendem je bezesporu používání responzivního webdesignu, který dokáže být flexibilní a přizpůsobit se velikostem obrazovky různých zobrazovacích zařízení.
Vzhledem k velkému růstu uživatelů přistupujících na internet pomocí mobilu nebo tabletu musí být webové stránky elastické a proměnlivé. Poprvé se o tomto jevu zmínil Ethan Marcotte v květnu 2010 ve svém článku s titulkem „Responsive Web Design“ pro web
A List Apart. Přístup, který popisoval, byl jednoduchý, ale zároveň revoluční. Vytvořil web, jenž se správně zobrazoval na mnoha různých rozlišeních. Použil k tomu tři existující nástroje, které se označují jako hlavní pilíře responzivního webdesignu:
mediální dotazy (media queries)
plovoucí struktury (fluid grids)
škálovatelné obrázky (scalable images)
2.3.1 Mediální dotazy (media queries)
Prvním pilířem responzivního webu jsou media queries, pomocí nichž je možné se dotázat na fyzické vlastnosti zařízení uživatele a následně doručit tomuto zařízení danou CSS šablonu či pouze její část. Rozhodujícím faktorem jsou například velikost, orientace
Obrázek 4: Porovnání alza.cz na počítači a m.alza.cz na mobilu
či typ displeje. Zápis mediálních dotazů je dvojího typu. Podmínky lze napsat do CSS šablony nebo přímo do HMTL. V současné době je upřednostňován zápis do kaskádových stylů, které jsou odděleny od zdrojového kódu šablony. [2]
@media ( podmínky ) {
/* CSS kód, který je splněn jen při splnění podmínek
}
<link rel=" stylesheet " href=" mobile.css " media=" podmínky ">
K funkčnosti všech těchto nástrojů je nutné zjistit přístupové zařízení uživatele. Existují dva hlavní způsoby, jak toho lze dosáhnout. Pomocí šířky viewportu4 (max-width) nebo šířky displeje obrazovky (max-device-width).
2.3.2 Plovoucí struktury (fluid grids)
Druhým pilířem responzivního webu je využití flexibilních mřížek (fluid grids), do kterých se umísťují jednotlivé prvky webové stránky. Princip tzv. Gridů je založen na plovoucím fluidním layoutu, ve kterém jsou udávány šířky jednotlivých prvků v relativních jednotkách. Výsledkem je webová stránka s prvky, které se dokáží přizpůsobit jakémukoli zobrazovacímu zařízení. Nevýhodou může být zobrazení na příliš širokých zobrazovacích plochách, kde hrozí roztažení prvků a horší orientace v textu.
Z tohoto důvodu bývá stanovena maximální šířka mřížky na absolutní hodnotu, přes kterou nepůjde layout rozšířit.
4 šířka okna prohlížeče
Mřížka je horizontální, obvykle mívá 12 či 16 sloupců a její maximální šířka bývá zarovnána na 960 nebo 1140 pixelů. Ostatní prvky uvnitř mají už relativní velikost. Díky mřížce lze jednoduše pracovat s prvky na stránce a uspořádat je do přehledné podoby pro každé zařízení. V bootstrapu existují již předdefinované šířky, tzv. breakpointy, v kterých se začne layout stránky přeskupovat. Například při zmenšení zobrazovací plochy na 768 pixelů se layout stránky přeskupí na plochu přizpůsobenou na tablet. Viz obrázek č. 5.
Zdroj: http://quintagroup.com/services/web-design/responsive-web-design
2.3.3 Škálovatelné obrázky (scalable images)
Posledním pilířem responzivního webu jsou škálovatelné (flexibilní) obrázky. Hlavním principem je vyřešení velikosti a rozlišení obrázků při různých šířkách zobrazení.
Například obrázek o šířce 1366 pixelů by se na mobilní displej o šířce 320 pixelů nevešel, tudíž by nebyl celý vidět. Řešením se stává nastavení maximální šířky obrázků u elementu <img> pomoci vlastnosti max-width na 100%. To znamená, že při jakékoli šířce displeje bude obrázek natažen na celou šířku displeje, a bude tedy vidět celý. Přesto není vyřešen problém s velikostí (počet kB) obrázku, protože návštěvník webu ho stále stahuje v plném rozlišení. Některé mobilní prohlížeče již nabízí nativní podporu přímo při Obrázek 5: Přeskupování prvků v různých zobrazovacích zařízeních
prohlížení stránek a zmenšují webový obsah na zlomek původní velikosti. Od HTML5 lze tento problém vyřešit již v kódu pomoci elementu <picture> či atributu srcset.
<img src="vychozi.png" srcset=" maly.png 600w, stredni.png 900w, velky.png 1200w" >
V ukázce je vidět příklad kódu, který obsahuje čtyři obrázky. Obrázek s názvem vychozi.png se použije pouze v případě, pokud by uživatel měl starší prohlížeč, který HTML5 ještě nepodporuje. V ostatních případech se uživateli zobrazí obrázek podle šířky prohlížeče.
2.4 Trendy ve webdesignu
Tak jako jiná odvětví i webdesign a samotná tvorba webových stránek podléhá trendům.
Kromě vývoje ve vizuálním pojetí stránek se jedná o trendy související s uživatelskou přístupností, použitelností webu a přicházejícími technologiemi. Webdesignové trendy jsou ovlivněny moderními technologiemi, nejčastěji druhy a výkonností zařízení, ze kterých se uživatelé připojují. V posledních letech došlo k největšímu technologickému pokroku
u těchto bodů:
rostoucí popularita mobilních zařízení (smartphony a tablety)
osvojení HTML5, CCC3 a vzestup front-endových javascriptových frameworků
zavedení nativní podpory 3D zobrazení v prohlížečích (přes WebGL)
zvyšující se rychlost připojení internetu (na domácích i mobilních připojeních)
Souhrn výše napsaných bodů posunuje webdesign na novou úroveň a odtrhává se od současného webdesignového paradigmatu. Tam, kde před pár lety jednoznačně vládl flat design celému webdesignu, dnes nastupuje materiál design, který představil Google v roce 2014. Následujících 9 webdesignových trendů bude hrát zásadní roli v přechodu na toto prostředí.
2.4.1 Kontroverzní menu
Od počátku webů existovaly pouze dva standardní druhy navigace na internetových stránkách: postranní a hlavní panel. Se vzestupem webdesignu a rozvojem mobilních nařízení se uchytil ještě třetí druh navigace, tzv. hamburger (3 nad sebou umístěné vodorovné čáry). Ten se objevuje převážně u responzivního webdesignu na mobilních zařízeních, kdy hamburger slouží jako náhrada za plnohodnotné menu, kvůli omezené velikosti zobrazovacího zařízení. [23]
1. Svoboda uživatelům, žádné menu
Svobodný pohyb po stránkách bez žádného omezení, automatické rolování, dokud uživatel nenajde přesně to, co hledá. Takto vypadá nejnovější trend, který je oblíben především u uživatelů přistupujících z mobilu nebo tabletu, kde se otevírá možnost pro postranní rolování. Bez žádného menu. Na obrázku č. 6 je ukázka z webu Anonymous Hamburger, která neobsahuje žádné menu a nechává uživatele rolovat do místa, kde najde požadovanou informaci. [23]
Zdroj: http://www.anonymoushamburger.com Obrázek 6: Ukázka webdesignu bez klasického menu
2. Ikona hamburgeru jako náhrada za klasické menu
Na obrázku č. 7 je zobrazena ukázka z webových stránek firmy Dursun. Místo připravování dvou rozdílných menu se zde využilo možnosti hamburgeru pro mobilní i desktopové zobrazení. Ikona hamburgeru už je natolik známá, že není potřeba vytvářet klasické menu. Dokonce se mění i ikona hamburgeru, kdy si webdesigneři vytváří vlastní grafické ztvárnění tohoto symbolu. [23]
Obrázek 7: Homepage bez klasického menu, pouze s ikonou hamburgeru Zdroj: https://www.dursun-limousine.ch/en/
3. Menu jako překrývací okno
Další trendem webové navigace se stává překrývací okno. Navigační menu zakrývá kompletně stránku pod ním. Na obrázku č. 8 je vidět ukázka z webových stránek společnosti Edelson. [23]
Obrázek 8: Ukázka překrývacího menu Zdroj: https://edelson.com/inside-the-firm/
2.4.2 Rozdělení obrazovky
Jeden z nejvíce očekávaných trendů následujících let je vertikální rozdělení obrazovky na dvě stejné části. Tento vizuální trend vyvolává v uživatelích pocit otevřené knihy a web se stává přirozenější. Na menších zařízeních se poté tyto dvě rozdělené části začnou stahovat postupně. [23]
Zdroj: https://www.paradisepad.com
2.4.3 Návrat pastelových barev
Velký návrat bude patřit pastelovým, vintage barvám. Ty nahradí současné šedé prostředí webů, které jsou nejčastěji tvořeny šedým pozadím a černými texty s různou hodnotou průhlednosti. Výběr barev je komplikovaný proces a může zde docházet k rozkolu současných corporate identity či konkurencí. Ať se již vybere jakákoli barva, měl by její odstín směřovat do trochu nostalgických sepiových a pastelových barev. Použití přechodového gradientu zdůrazní pastelové barvy a vynikne na minimalistických stránkách. [24]
Obrázek 9: Ukázka webu s rozdělenou obrazovkou
Obrázek 10: Pastelové barvy s přechodovým gradientem Zdroj: https://vspicer.com
2.4.4 Rolování ve vlastní režii
Doba, kdy existuje v prohlížečích pouze klasický vertikální a horizontální posuvník, je dávno pryč. Mnoho webů se inspirovalo volným pohybem u ovládání na mobilních zařízeních a vyvinulo jakýsi virtuální posuvník. Tento na míru udělaný posuvník poté reaguje v klasickém desktopovém prostředí na pohyb myši. Efekt lze využít k vytvoření virtuálního prostředí, jež je použitelné přímo v prohlížeči. [23]
Obrázek 11: Virtuální posuvník, který reaguje na pohyb myši.
Zdroj: http://magicalmaps.fantasticbeasts.com/macusa/
2.4.5 Propojení reálného a digitálního světa
Jak už bylo výše zmíněno, v roce 2014 je flat design postupně nahrazován materiál designem. Plochá ikonografie je nahrazena stíny a přechody, které vyvolávají iluzi trojrozměrného obrazu na ploše obrazovky. Vývoj v dalších letech předpovídá ještě výraznější přiblížení realitě, kdy by weby měly svojí hmatatelností docílit naprostého prolnutí digitálního a reálného světa. [23]
2.4.6 Decentní animace a mikro interakce
Při navrhování webových stránek je důležité neopomenout základní lidské instinkty vytvořené důsledkem lidské evoluce. Rychlé a prudké pohyby mohou znamenat nebezpečí, naopak pomalu se pohybující tekutina znamená život. Tyto znalosti je třeba brát v potaz při sestavování webu, kdy příliš rychle se pohybující elementy můžou rušit uživatele. Nynější trend je proto zpomalovat. Jemný pohyb vzbuzuje v uživateli přirozenost a organičnost.
V posledních letech fungovaly animace jako odměna na vyvolanou akci uživatelem.
V moderním pojetí se animace integrovaly do webových stránek jako designové prvky, které mají hlavně upoutat pozornost diváka. [46]
Obrázek 12: Designové prvky k upoutání pozornosti Zdroj: http://projectsunday.net
2.4.7 Design nad poměrem stran
Jedním z problémů v tvorbě webdesignu je přesné definování cílového zařízení.
Zobrazení krátké na výšku a široké bude vypadat lépe na širokoúhlém monitoru než na mobilním zařízení ve vertikálním držení. Řešení se může ukrývat v tzv. digitálním uměleckém směru. Je důležité nepřemýšlet o obsahu webu jako o statických obrázcích, ale nahlížet na ně jako na samostatné subjekty. Je důležité zamyslet se nad funkčností každého prvku samostatně a vědět, co se s jeho pomocí snažíme sdělit uživateli. Na obrázku č. 13 je příklad webové stránky, která se rozhodla zcela ignorovat poměr stran a vložit sílu kompozice do vlastních rukou uživatele.
Obrázek 13: Ukázka designu nad poměrem stran Zdroj: https://artsandculture.withgoogle.com
2.4.8 Všudypřítomná videa
Trend velkých videí na pozadí celého webu jistě nepatří mezi nejaktuálnější novinky, nicméně díky zvyšujícím se rychlostem připojení k internetu a zlepšujícím se technologiím se stanou v následujících letech ještě populárnějšími. Přesto se očekává mírný útlum velkých videí na úkor menších video prvků, které přivedou weby k životu jemnějším a pro návštěvníky přitažlivějším způsobem.
Obrázek 14: Video jako součást webu Zdroj: http://www.visithumboldt.com
2.4.9 Gamifikace
Gamifikace je relativně nová technika marketingu, která se snaží o zvýšení zájmu klientů prostřednictvím užití herních prostředků do neherních oblastí. Její hlavní cíl je zviditelnění a zapamatování internetových stránek u uživatelů. Mezi nejvydařenější gamifikaci patří webové stránky pro film Swiss Army Man, kde se nejedná pouze o jednotlivě nahodilé efekty.
Obrázek 15: Ukázka gamifikace Zdroj: http://swissarmyman.com
2.5 Psychologie barev
Psychologie barev je vědní obor věnovaný emočním a behaviorálním účinkům barev a jejich kombinací. Správný výběr barev je velmi důležitá součást tvorby webdesignu.
Každý člověk podvědomě vnímá spoustu vjemů a správně zvolená barva může rozhodnout o samotném úspěchu či neúspěchu webové stránky. Již Carl Gustav Jung, švýcarský psychoterapeut a zakladatel analytické psychologie, popsal, že barvy jsou
„mateřským jazykem podvědomí“. [11]
Výběr barev není tak jednoduchou záležitostí, jak by se mohlo na první pohled zdát.
Během vytváření vhodné barevné kombinace je nutné brát v potaz různé vnější faktory, jako jsou estetičnost, dodržení corporate identity či použitelnost barev. Mezi další významné faktory patří vnímatelnost barev různými kulturami a jedinci, přičemž každá kultura může mít odlišnou interpretaci barev. Nejvíce je to vidět u bílé barvy, jež je v západních zemích vnímána jako barva čistoty těla a ducha, naopak v Číně, Vietnamu a Indii znamená smrt.
2.5.1 Barevné asociace
Následující teorie vnímání barev je používaná v marketingové komunikaci v západní kultuře.
Červená barva
Barva krve, čerstvého ovoce a vycházejícího slunce zvyšuje hladinu adrenalinu, krevní tlak a dechovou činnost. Kromě těchto fyziologických efektů je červená barva známá též jako urychlovač metabolismu. Z tohoto důvodu si ji často vybírají zejména restaurace a potravní řetězce, poněvadž povzbuzuje chuť k jídlu. V reklamním sektoru se červená barva používá pro připoutání pozornosti, především na poutačích a billboardech. Jelikož tato barva evokuje dojem okamžitosti, jedinečné možnosti a urgence, je vhodná pro použití na označení výprodejů v obchodech. Různé červené odstíny vhodně sladěné s ostatními prvky webdesignu mohou přidat na atraktivitě celé šablony.
Modrá barva
Modrá barva symbolizuje otevřenost, víru a inteligenci. U člověka evokuje pocit důvěryhodnosti a patří mezi barvu, která nejvíce uklidňuje. Z tohoto důvodu je nejvíce užívána ve firemní grafice, kde se modrá barva stává synonymem pro důvěryhodnost, konzervatismus a stabilitu. Často ji jako firemní barvu využívají banky, právní firmy, státní instituce nebo sociální sítě. Světlejší odstíny modré, azurová a tyrkysová, mohou být spojovány s magickými účinky.
Zelená barva
Nejběžnější barva v přírodě, která se používá k vyjádření souladu, rovnováhy, klidu nebo samotné přírody. Firmy používající zelenou barvu se hlásí k sociální odpovědnosti, péči o životní prostředí a inovacím. Dále ji využívají často pivovary a firmy, kde je kladen důraz na ekologii. V oblasti webdesignu je zelená barva často preferována. Hodí se jako doplněk k další barvě, v kombinaci s modrou a šedou navozuje na webové stránce příjemnou atmosféru.
Žlutá barva
