Tvorba webových stránok pre mobilné platformy

Transcription

1 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Tvorba webových stránok pre mobilné platformy Diplomová práca Bc. Andrej Ševčík Apríl 2014

2 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Katedra kvantitatívnych metód a informatiky Tvorba webových stránok pre mobilné platformy Creating websites for mobile platforms Diplomová práca Autor: Bc. Andrej Ševčík Informačné technológie a manažment Vedúci práce: PaedDr. Peter Polakovič, Ph.D. Banská Bystrica Apríl 2014

3 Vyhlásenie Prehlasujem, že som diplomovú prácu spracoval samostatne a s použitím uvedenej literatúry. Svojím podpisom potvrdzujem, že odovzdaná elektronická verzia práce je identická s jej tlačenou verziou a som oboznámený so skutočnosťou, že sa práca bude archivovať v knižnici BIVŠ a ďalej bude sprístupnená tretím osobám prostredníctvom internej databázy elektronických vysokoškolských prác. V Banskej Bystrici dňa... Bc. Andrej Ševčík

4 Poďakovanie Rád by som sa poďakoval vedúcemu práce PaedDr. Petrovi Polakovičovi, Ph.D. za konzultácie pri vedení práce.

5 Anotácia Bc. ŠEVČÍK, Andrej: Tvorba webových stránok pre mobilné platformy. [Diplomová práca]. Bankovní institut vysoká škola Praha, zahraničná vysoká škola Banská Bystrica. Katedra kvantitatívnych metód a informatiky. Vedúci práce: PaedDr. Peter Polakovič, Ph.D. Rok obhajoby: Počet strán: 105 Diplomová práca sa zaoberá teoretickým popisom problematiky tvorby webového obsahu v podobe internetových stránok pre mobilné platformy. Prvá kapitola je zameraná na vymedzenie a opísanie základných pojmov spojených so spomínanou problematikou. Druhá kapitola sa zaoberá jednotlivými mobilnými platformami, na ktorých je možné prehliadať webový obsah a stručne popisuje nástroje používané pri tvorbe webových stránok pre mobilné platformy. Tretia kapitola obsahuje realizáciu vlastného webového sídla v dvoch variantoch, pričom popisuje všetky podstatné aspekty súvisiace s problematikou tvorby webového dizajnu. Štvrtá kapitola sa zameriava na porovnanie normálnej a mobilnej verzie webového sídla, pričom opisuje zobrazenie a programové kódy oboch uvedených verzií. Kľúčové slová: Webová stránka, Mobilná verzia, HTML5, CSS3

6 Annotation Bc. ŠEVČÍK, Andrej: Creating websites for mobile platforms. [Master s Thesis]. Banking Institute College of Banking Prague, Foreign University Banská Bystrica. Department of Computer Science & Quantitative Methods. Supervisor: PaedDr. Peter Polakovič, Ph.D. Year of defense: Page count: 105 Master s Thesis Creating websites for mobile platforms deals with the theoretical description of the issue of the production of web content in the form of web content for mobile platforms. The first chapter focuses on defining and describing the basic concepts associated with the said issue. The second chapter deals with various mobile platforms, where it is possible to browse the Web and briefly describes the tools used in creating websites for mobile platforms. The third chapter contains the implementation of its own web site in two varieties, and describes all relevant aspects related to the creation of Web design. The fourth chapter focuses on the comparison of normal and mobile version of the web site, and describes the display and program codes of these two versions. Key words: Website, Mobile version, HTML5, CSS3

7 Obsah Úvod Problematika tvorby webových stránok História programovacích jazykov na tvorbu webu História HTML História CSS Súčasný stav špecifikácií Aktuálna verzia HTML Aktuálna verzia CSS Hlavné princípy jazyka HTML Charakteristika jazyka HTML Štruktúra HTML Kompatibilita HTML Rozhranie Canvas Drag and Drop Integrácia zvuku a videa Sémantické prvky programovacieho jazyka HTML Hlavné princípy jazyka CSS Charakteristika jazyka CSS Aplikácia CSS3 v praxi Štruktúra CSS Prehľad nových vlastností Responzívny dizajn webových stránok Pojem responzívny dizajn Media Queries Výhody responzívneho dizajnu Duplicitný obsah

8 1.5.5 Chyby pri responzívnom dizajne Programovací jazyk JavaScript Charakteristika programovacieho jazyka JavaScript Vlastnosti programovacieho jazyka JavaScript Knižnica jquery Programovací jazyk PHP Pojem PHP Práca s PHP Aplikovanie PHP Opis mobilných platforiem a nástrojov na tvorbu webu Charakteristika mobilných platforiem Výhody platformy Nevýhody platformy Základné informácie o jednotlivých platformách Microsoft Windows Phone Google Android Apple ios BlackBerry OS Nástroje používané na tvorbu webového obsahu Adobe Dreamweaver Oracle NetBeans Microsoft Expression Web PSPad Editor Návrh a tvorba vlastného webu v dvoch variantoch Základné ciele praktickej časti Informácie o podniku Základné požiadavky

9 3.3.1 Nefunkčné požiadavky Funkčné požiadavky Návrh grafického dizajnu webovej stránky Základné fragmenty grafického dizajnu webového obsahu Predbežný návrh grafického dizajn webovej prezentácie Popis realizácie tvorby webového obsahu Popis elementov použitých vo webovej stránke Analýza návštevnosti internetovej prezentácie Webhosting Výber služby Testovanie zobrazenia webovej prezentácie Porovnanie destkopovej a mobilnej verzie webovej stránky Normálna verzia webu Zobrazenie na počítačovej platforme Opis HTML5 zdrojového kódu normálnej verzie webovej stránky Opis CSS3 zdrojového kódu normálnej verzie webovej stránky Mobilná verzia webu Zobrazenie na mobilnej platforme Opis HTML5 zdrojového kódu mobilnej verzie webovej stránky Opis CSS3 zdrojového kódu mobilnej verzie webovej stránky Záver Zoznam použitej literatúry Zoznam obrázkov a tabuliek Prílohy

10 Úvod Predmetom tejto diplomovej práce je Tvorba webových stránok pre mobilné platformy. Práca je rozčlenená do štyroch hlavných kapitol. Diplomová práca by mala zvýšiť povedomie o potrebe tvorby oboch variant webových stránok, nakoľko v súčasnosti je medzi návštevníkmi a používateľmi webového obsahu trendom používať pri hľadaní informácií na internete nielen osobné počítače, notebooky, či iné zariadenia, ale aj mobilné platformy v podobe inteligentných dotykových telefónov. Prehliadanie normálnej verzie internetových stránok je bežné na tradičných zariadeniach používaných doma, v škole, alebo v práci, ale takáto verzia nie je dostatočne prehľadná. Preto je v dnešnej dobe potrebné myslieť aj na stále sa rozvíjajúci trh na poli informačných technológií a poskytnúť používateľov mobilných zariadení možnosť voľby, ktorú z verzie danej webovej stránky sa rozhodnú na svojom zariadení používať. Cieľom tejto diplomovej je vymedziť základné pojmy spojené s problematikou tvorby webových stránok pre mobilné platformy, opísať jednotlivé mobilné platformy, ako aj nástroje používané na tvorbu webového obsahu a nadobudnuté poznatky aplikovať pri tvorbe vlastného webového sídla v dvoch rôznych variantoch. Práca je ukončená zoznamom bibliografických odkazov použitých pri tvorbe tejto bakalárskej práce, zoznamom obrázkov a tabuliek. Na konci práce je uvedený zoznam súborov, ktoré sa nachádzajú na CD-R prílohe. Súčasťou prílohy sú vybrané kompletné zdrojové kódy vytvorenej webovej stránky. 10

11 1 Problematika tvorby webových stránok Prvá kapitola tejto diplomovej práce sa zameriava na programovacie jazyky HTML5, CSS3 a JavaScript. Postupne sú v tejto kapitole preberané podstatné aspekty tvorby webového obsahu vo forme internetových stránok. Je dôležité poznamenať, že tvorba webového obsahu pre mobilné platformy v podobe internetových stránok sa v zásade nelíši od tvorby normálnej verzie webovej stránky. Vedomosti nadobudnuté štúdium danej problematiky a poznatky obsiahnuté v prvej kapitole tejto diplomovej práce je možné aplikovať aj pri tvorbe webového obsahu pre mobilné platformy. 1.1 História programovacích jazykov na tvorbu webu Nasledujúce dve podkapitoly sa zameriavajú na históriu programovacích jazykov na tvorbu webových stránok. V podkapitolách a objasňuje históriu jazyka HTML a CSS História HTML História programovacieho jazyka HTML začala s vývojom tzv. Hypertextu (odkazov vo webových stránkach), ktorého vývoj prebiehal v 40. rokoch 20. storočia, kedy Vannevar Bush predstavil hypertextový systém nazvaný Memex. V ďalších rokoch bol nasledovaný napríklad Douglasom Engelbartom a Tedom Nelsonom, ktorí svoj život zasvätili globálnemu Hypertextovému systému s názvom Xanadu. Významnou osobnosťou bol tiež Bill Atkinson známy populárnym systémom HyperCardem. Prvotné verzie jazyka HTML sa objavili v roku 1991, jednalo sa však o neformálnu špecifikáciu HTML 1.0. Jej autori boli Tim Berners Lee a Robert Caillau. Prvú verziu vytvorili ako súčasť projektu WWW (skratka z angl. World Wide Web), ktorý mal umožniť vedcom komunikáciu a sprostredkovanie výsledkov svojich výskumov. V roku 1992 prišli prvé internetové prehliadače, ktoré slúžili na prehliadanie webových stránok. Tieto prehliadače boli riadkové a doposiaľ nemali grafiku. Návrh 11

12 HTML 2.0 spolu s grafickým internetovým prehliadačom sa prvýkrát objavil v roku Prvý grafický internetový prehliadač dostal názov NCSA MOSAC. Nový grafický prehliadač Netscape bol verejnosti predstavený hneď v nasledujúcom roku Tento internetový prehliadač bol následníkom aplikácie Mosaic. Až v roku 1995 bol oficiálne uvedený HTML vo verzii 2.0. Prehliadač Netscape v tom istom roku zaviedol neoficiálne rozšírenie verzie 2.0, známej ako HTML verzia 3.0. Následne sa v máji roku 1996 objavila oficiálna špecifikácia HTML 3.2. Táto verzia programovacieho jazyka bola kombináciou verzie 2.0 a tabuliek. Spoločnosť Microsoft v tomto období ohlásila svoj prvý internetový prehliadač s názvom Internet Explorer. Verzia 4.0 vyšla v júli roku Jednalo sa o verzia 3.2, ktorá bola vylepšená o rozšírenie tabuliek a formulárov, doplnená o rámy, kaskádové štýly a skriptovanie. V roku 1999 bola vydaná oficiálna verzia HTML 4.1, s ktorou pravdepodobne končí celý vývoj HTML. V tomto období sa programovací jazyk stal základom pre nové jazyky, akými sú napr. XHTML (skratka z angl. Extensive HyperText Markup Language). Jedná sa o programovací jazyk, ktorý je veľmi podobný HTML, nakoľko sa jedná v podstate o rozšírenie pôvodných pravidiel jazyka. HTML je tiež základom pre oveľa zložitejší jazyk Extensive Markup Language, s ktorým sa môžeme stretnúť pod skráteným názvom XML. (Pour, et al., 2009, s. 78) V súčasnosti sú vo svete technológií široké možnosti výberu programovacích jazykov, pritom ale všetky majú určitú spojitosť práve s HTML, pretože ho vo väčšej, či menšej miere používajú História CSS Prvé verzie programovacieho jazyka Cascading Style Sheets sa objavili až niekoľko rokov po vzniku programovacieho jazyka HTML, pričom oficiálne sa tento jazyk presadil až v roku (Castro, et al., 2012, s. 16) Oddelenie štruktúry dokumentu od jeho obsahu bolo cieľom HTML od samých počiatkov v roku Už Tim Berners-Lee, ktorý je považovaný za otca WWW, navrhol svoj prvý prehliadač nazvaný NeXT tak, že formátovanie dokumentu bolo riadené 12

13 jednoduchým zabudovaným štýlovým predpisom. Berners-Lee však jazyk tohto štýlového predpisu nikdy nepublikoval a spoliehal sa pritom na autorov prehliadačov, že túto koncepciu sami ďalej rozvinú. Prvý komerčný prehliadač naopak oklieštil možnosti používateľského, či autorského použitia štýlov HTML dokumentu na minimum. Ako popularita webových stránok stúpala, stále viac autorov sa sťažovalo, že nemôžu vzhľad svojich HTML dokumentov nijako ovplyvniť. To, čo už v tej dobe bolo samozrejmosťou u bežných textových editorov, teda napr. zmena veľkosti, farby či fontu písma, alebo nastavenie farby pozadia, v HTML dokumentoch nebolo možné. Na túto kritiku prišli skoro súčasne dve reakcie. Tesne pred konferenciou o WWW, ktorá sa konala v novembri roku 1994 v Chicagu publikoval Hakon Wium Lie prvý koncept Cascading HTML Style Sheets. Hoci návrh nebol zďaleka ešte dokonalý, stal sa základom, z ktorého vychádzajú kaskádové štýly dodnes, a podporil ho vtedy aj Dave Raggett, hlavný architekt programovacieho jazyka HTML 3.0. Len o tri dni neskôr, než Hakon Wium Lie publikoval svoj návrh, sa objavila prvá verzia prehliadača Netscape, ktorá na všeobecnú potrebu štylizovať HTML dokumenty takpovediac po svojom. Miesto implementácie jazyka používajúceho štýly totiž Netscape zabudoval základné formátovacie prostriedky priamo do jazyka HTML. Ako sa čoskoro ukázalo, pre vývoj webu to znamenalo takmer katastrofu, pretože stret týchto dvoch koncepcií zásadne poznamenal kompatibilitu a použiteľnosť webových dokumentov na mnoho rokov dopredu a jeho negatívne dôsledky nesieme dodnes. O kaskádových štýloch sa od vydania prvého návrhu ešte dlho diskutovalo, pričom hlavným predmetom diskusií nebol ani tak vlastný jazyk, ako skôr koncepcia, ktorá posledné slovo o formátovaní webových dokumentov prenechávali používateľom, nie autorovi. Zástancovia tejto myšlienky, medzi ktorých patril aj autor pôvodného návrhu Hakon Wium Lie, však nakoniec zvíťazila a v decembri 1996 uzrela svetlo sveta špecifikácia kaskádových štýlu vo verzii 1.0, už ako odporúčanie konzorcia W3C, ktoré začalo na projekte CSS pracovať v roku 1995 a kaskádové štýly vzalo pod svoje krídla ako neoddeliteľnú súčasťou rozvoja jazyka HTML. Konzorcium W3C, resp. jeho príslušná pracovná skupina, potom kaskádové štýly ďalej rozvíjala a rozvíja dodnes. V máji 1998 tak bolo vydané odporúčanie pre špecifikáciu 13

14 CSS vo verzii 2. Svoj vývoj prekonala aj implementácia kaskádových štýlov v internetových prehliadačoch. Prvý komerčný prehliadač, aspoň s čiastočnou podporou CSS 1 bol Internet Explorer 3, podporovaný spoločnosťou Microsoft, vydaný v auguste roku V tej dobe však samotná špecifikácia CSS prvej verzie nedospela do štádia oficiálneho odporúčania konzorciom W3C, a tak sa implementácia v internetovom prehliadači Internet Explorer 3 so špecifikáciou úplne nezhodovala. Internet Explorer 3 mal totiž pomerne spoľahlivú podporu pre vlastnosti farieb, pozadia a textu, prakticky však zabúdal na koncepciu niektorých elementov. (Olsson, et al., 2008, s. 4-5) Ďalším prehliadačom na rade bol Netscape Navigator vo verzii 4.0. Keďže bola spoločnosť Netscape, na rozdiel od spoločnosti Microsoft, od začiatku ku kaskádovým štýlom značne skeptická, bola implementácia v tomto internetovom prehliadači skôr dôsledkom konkurenčného boja. Podpora CSS tak bolav Netscape Navigator 4.0 síce zdanlivo rozsiahla, avšak veľmi chybová, a niektoré z teoreticky podporovaných vlastností tohto programovacieho jazyka boli prakticky nepoužiteľné. Spoločnosť Netscape navyše interne implementovala kaskádové štýly prostredníctvom programovacieho jazyka JavaScript, takže ak bol v tomto internetovom prehliadači JavaScript zakázaný, neboli aktívne ani kaskádové štýly. Od tej doby už boli nové implementácie kaskádových štýlov takmer výhradne záležitosťou spoločnosti Microsoft a od roku 1998 taktiež prehliadača Opera. Jednalo sa vtedy o verziu Opera 3.5. Vývoj prehliadača Netscape sa na dlhé roky zastavil a bol oživený až po otvorení zdrojových kódov a vývoj bol prevzatý komunitou nezávislých vývojárov. Tak vzniklo zobrazovacie jadro Gecko rozvíjané až do súčasnosti ako otvorený kód (tzv. open source licencia), ktoré spätne prevzala spolocnosť Netscape a zabudovala ho do svojich najnovších verzií internetového prehliadača. 1.2 Súčasný stav špecifikácií HTML5 a CSS3 sú viac než dva nové štandardy predstavené konzorciom W3C (skratka z angl. World Wide Web Consortiem) a jeho pracovnými skupinami. V nasledujúcich podkapitolách sa v skratke pozrieme na to, čo prinášajú aktuálne verzie oboch programovacích jazykov. 14

15 1.2.1 Aktuálna verzia HTML5 Najnovšia verzia programovacieho jazyka na tvorbu webového obsahu prináša plnú podporu multimédií s menšou závislosťou na zásuvných moduloch. Nie je preto potrebné pre zobrazovanie videa a zvuku, príp. vektorovej grafiky používať Macromedia Flash, alebo Microsoft Silverlight. Táto vlastnosť je pomerne dôležitá, nakoľko spoločnosť Apple na svojich zariadeniach ukončilo podporu zobrazovania obsahu založenom na platforme Flash, aj keď prehrávače videa založené na tejto platforme sa často a relatívne jednoducho používajú. (Hogan, 2012, s. 20) HTML5 taktiež prináša aj vylepšenú podporu aplikácií. Vývojári pri tvorbe bohatšieho a interaktívnejšieho webového obsahu využívajú najrôznejšie webové aplikácie, akými sú napr. ovládacie prvky ActiveX, a rovnako vyššie spomínaný Flash. HTML5 však ponúka nepreberné množstvo možností, ktoré v niektorých prípadoch úplne vylúčia potrebu používania cudzích technológií Aktuálna verzia CSS3 Najnovšia verzia programovacieho jazyka CSS vo verzii 3 obsahuje pokročilé selektory, ktoré umožnia vývojárom pri tvorbe obsahu identifikovať párne a nepárne riadky tabuľky, všetky vybrané zaškrtávacie polia, alebo dokonca posledný odsek v skupine. Je teda možné dosiahnuť väčší efekt pri tvorbe internetových stránok s menším úsilím, nakoľko nie je potrebné písať nadmerné množstvo zdrojového kódu webovej stránky. Vďaka tomu sa dá jednoduchším spôsobom štylizovať kód napísaný v programovacom jazyku HTML, ktorý vývojári nemôžu upravovať. CSS3 taktiež prináša zvýšenú podporu vizuálnych efektov. Tiene obrázkov použitých na webových stránkach, rovnako ako texty pomáhajú dostať na stránku potrebnú hĺbku a prechody, taktiež môžu pridať určitý priestorový efekt. Najnovšia verzia tohto programovacieho jazyka vývojárom umožňuje pridávať tiene a prechody jednotlivým elementom bez nutnosti spoliehať sa na obrázky na pozadí. Navyše je vývojárom webového obsahu umožnené použiť transformáciu k vytvoreniu zaoblených rohov, príp. skoseniu, či otočeniu daného elementu, nachádzajúcemu sa na stránke. 15

16 1.3 Hlavné princípy jazyka HTML5 HTML5. Nasleduje podkapitoly sú zamerané na hlavné princípy programovacieho jazyka Charakteristika jazyka HTML5 HTML je skratkou pre anglický názov Hypertext Markup Language. HTML je jedným z prvých jazykov používaných pre programovanie internetových stránok, od svojho vzniku prešiel mnohými modifikáciami až do svojej dnešnej podoby. Význam jednotlivých slov, z ktorých sa skratka HTML skladá: Hypertext (hypertextový) Text, na ktorý používateľ klikne, aby dostal z jedného dokumentu do druhého. Jedná sa o schopnosť webových stránok navzájom na seba odkazovať, Markup (značkovací) Značky, ktoré dajú jednoduchému textu štruktúru a formát. Prostý text je doslova označený prostredníctvom značiek, Language (jazyk) Poukazuje na skutočnosť, že programovací jazyk HTML je považovaný za značkovací jazyk. (Wempen, 2007, s. 40) HTML dokumenty možno vytvárať v akomkoľvek textovom editore. Jedinou podmienkou je možnosť uloženia dát v čistom texte, teda súboru, ktorý obsahuje kódovanie ASCII. Na úpravu je vhodné použiť napríklad poznámkový blok pre operačný systém Microsoft Windows. Samozrejme je taktiež možné použiť nejaké WYSIWYG editory, akými sú napríklad Macromedia DreamWeaver, resp. Microsoft FrontPage. Takýchto editorov je veľké množstvo, či už sa jedná o licenciu freeware, alebo profesionálne platené verzie programov. HTML dokument je ohraničený tzv. tagmi. Skladá sa z hlavičky ohraničenej tagmi a tela ohraničeného tagmi. Spomínaná hlavička obsahuje informácie o dokumente, ktoré nie sú v prehliadači zobrazované. Tieto informácie sú určené napríklad pre rôzne internetové vyhľadávače. Ďalej informácie o vkladaných súboroch obsahujúci kód JavaScriptu, alebo kaskádové štýly. Ďalšou dôležitou informáciou obsiahnutou v hlavičke dokumente je titulok stánky, ktorý je zobrazovaný nielen na hornej lište prehliadača, ale aj na lište 16

17 operačného systému. V tele dokumentu sú následne zahrnuté všetky tagy, ktoré editujú vlastnú stránku. Jedná sa napríklad o tabuľky, vrstvy, odseky, prípadne tagy editujúce priamo daný text. Jazyk HTML5 sa prirodzene vyvinul zo starších verzií programovacieho jazyka HTML, pričom sa snaží reflektovať potreby súčasných aj budúcich webových stránok. Tento jazyk zdedil veľkú časť vlastností svojich predchodcov. TO znamená, že pokiaľ vývojár tvoril webovú stránku v HTML pred príchodom novej verzie HTML5, poznal pritom podstatnú časť jazyka verzie 5. (Castro, et al., 2012, s. 16) Štruktúra HTML5 Základná štruktúra programovacieho jazyka sa síce mierne odlišuje od predchádzajúcej verzie 4.1, avšak základ ostáva zachovaný. Zdrojový kód aj naďalej obsahuje deklaráciu elementov doctype, html, head, a body. Došlo však k miernym modifikáciám jednotlivých elementov. (Goldsteinová, et al., 2011, s. 32) Asi najvýraznejšou zmenou prešla oproti starej verzii prešla deklarácia elementu doctype. V novej verzii 5 je výrazne zjednodušená oproti predchádzajúcej verzii programovacieho jazyka 4.1, nakoľko už neobsahuje viac než desiatku znakov, ale iba jednoslovný text, a síce html. V predchádzajúcej verzii bolo označenie tohto elementu nasledovné: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Výrazne skrátená a teda aj zjednodušená deklarácia elementu doctype v najnovšej verzii programovacieho jazyka HTML5 vyzerá takto: <!DOCTYPE HTML> Kompatibilita HTML5 Spätná kompatibilita je jedným z najlepších dôvodov, prečo používať programovací jazyk HTML vo verzii 5. Funguje totiž vo všetkých prehliadačoch. Ihneď, dokonca aj v starej verzii internetového prehliadača Internet Explorer 6 je možné používať 17

18 HTML5 a pomaly modifikovať daný zdrojový kód. Dokonca všetko prejde aj validáciou zdrojového kódu konzorcia W3C. (Hogan, 2012, s. 22) Rozhranie Canvas Rozhranie programovacieho jazyka HTML5 s názvom Canvas (v preklade plátno) umožňuje dynamicky generovať a vykresľovať grafiku webového obsahu, zahŕňajúcu obrázky, grafy, alebo animácie. Rozhranie typu Canvas je možné v zásade považovať za určité bitmapové plátno a obrázky na ňom nakreslené sú tým pádom finálne a nie je možné meniť ich vlastnosť tak, ako je to možné v prípade obrázkov SVG (skratka z angl. Scalable Vector Graphic). Objekty nakreslené na plátno navyše nie sú súčasťou tzv. DOM modelu webovej stránky (skratka z angl. Document Object Model, v preklade objektový model dokumentu). (Suehring, 2008, s. 21) Keď sa v stránke použije element Canvas, vytvorí sa obdĺžniková oblasť, ktorá je v preddefinovanom stave 150 obrazových bodov vysoká a 300 obrazových bodov široká. Je však možné zadať presne definovanú požadovanú veľkosť plátna, podobne ako iné atribúty tohto elementu. Nižšie uvedený zdrojový kód stránky ukazuje najzákladnejší prípad použitia elementu canvas, ktorý je možné použiť pri tvorbe webového obsahu v programovacom jazyku HTML5: <canvas></canvas> Ako ukazuje obrázok 1-1, ktorý je uvedený nižšie, súradnice plátna začínajú na hodnotách x=0 a y=0 v ľavom hornom rohu, ktorý s označuje ako začiatok, a súradnice sa zvyšujú po jednotlivých obrazových bodoch (pixeloch) horizontálne po osi X a vertikálne po osi Y. 18

19 Obrázok 1-1: Súradnice rozhrania Canvas na osách X a Y Zdroj: (Lubbers, et al., 2011, s. 49) Drag and Drop Technika Drag and Drop v preklade znamená Potiahni a pusť a je jednou z najzákladnejších metód pri práci z objektmi umiestnenými na webových stránkach, kedy je za pomoci vstupného zariadenia konkrétny objekt uchopený a následne prenesený na iné miesto, kde je vložený, resp. položený. 19

20 Jedná sa o prvok API (skratka z angl. Application programming interface v preklade rozhranie pre programovanie aplikácií), ktorý má podporu v týchto prehliadačoch: Safari vo verzii 3.2+, Chrome 6.0+, Mozilla Firefox 3.5+, Internet Explorer 7.0+, Interný webový prehliadač internetových stránok mobilného operačného systému Android vo verzii 2.1 a vyššej. (Goldsteinová, et al., 2011, s. 251) Na nasledujúcom obrázku 1-2 umiestnenom nižšie názorne vidíme, ako funguje technika Drag and Drop v internetovom prehliadači Mozilla Firefox Možnosti využitia tejto techniky sú rôzne, v tomto prípade ide o intuitívne a rýchle nahratie konkrétneho súboru do webovej aplikácie SkyDrive. Obrázok 1-2: Aplikácia metódy Drag and Drop v praxi Zdroj: (vlastné spracovanie) Sedem základných udalostí, s ktorými sa pri implementácii metódy Drag and Drop pracuje je uvedených v nasledujúcej tabuľke

21 Udalosť ondragstart ondragend Tabuľka 1-1: Udalosti vykonávané pri implementácii HTML5 metódy Drag and Drop Popis činnosti Daná udalosť sa spustí sa práve vo chvíli, keď používateľ začne element ťahať Spustí sa vo chvíli, keď používateľ z akéhokoľvek dôvodu ťahanie elementu zastaví ondragenter Spustí sa vo chvíli, keď sa preťahovaný element dostane do cieľového objektu ondragover ondraleave ondraop Ondrag Spustí sa vo chvíli, keď používateľ daný element potiahne do cieľového objektu Spustí sa vo chvíli, keď používateľ určitý element vytiahne von z cieľového objektu Spustí sa vo chvíli, keď používateľ úspešne ukončí ťahanie daného objektu do cieľovej oblasti Spustí sa pri akomkoľvek potiahnutí určitého elementu to znamená, že sa daná udalosť spúšťa neustále, avšak dokáže pri tejto činnosti zobraziť súradnice X a Y, ktoré sú súčasťou ukazovateľa myši (kurzora). Zdroj: (Hogan, 2012, s. 238) Integrácia zvuku a videa Doposiaľ sa multimediálny obsah umiestňoval do webových stránok najmú prostredníctvom zásuvných modulov, alebo aplikácií od iných výrobcov integrovaných do webového prehliadača. Jedná sa napr. o QuickTime, Silverlight, či RealPlayer. (Goldsteinová, et al., 2011, s. 85) Tento stav zmenila nová verzia HTML s príchodom prvkov audio a video. To spôsobilo, že multimédiá sú bezproblémovou súčasťou webovej stránky, podobne ako prvok img, t.j. obrázky. Nie je teda nutné, aby si návštevník internetovej stránky inštaloval do svojho prehliadača softvér nejakej spoločnosti, pokiaľ si chce prehrať video, alebo audio súbor obsiahnutý na webovej stránke. Základný zápis elementu video prebieha pri tvorbe webového obsahu v najnovšej verzii HTML5 nasledovne (je to však minimálny potrebný kód, ktorý je potrebný na to, aby video fungovalo, aj keď len v obmedzenom rozsahu): <video src= example.webm ></video> 21

22 Pre správnu funkcionalitu videa na webových stránkach písaných v programovacom jazyku HTML5 úplne nepostačuje vyššie uvedený zdrojový kód. Je preto potrebné ho doplniť o uvedenie niektorých dôležitých atribútov, ktorými sú šírka a výška prehrávaného videa. <video src= example.webm width= 375 height= 280 ></video> Pozn.: Atribúty width a height, ktoré sú uvedené vyššie akceptujú pri zápise do zdrojového kódu iba celé čísla a ich hodnoty sú vždy udávané obrazových bodoch pixeloch. Tieto hodnoty je samozrejme možné prekryť prostredníctvom využitia vlastností iných programovacích jazykov, akými sú CSS a JavaScript Sémantické prvky programovacieho jazyka HTML5 Jedným z rôznych nových typov obsahu, ktoré zavádza veľa nových elementov HTML vo verzii 5 sú taktiež sekcie. HTML5 definuje nové sémantické značky popisujúce obsah elementu. Použitie sémantického značenia neprináša žiadne okamžité výhody, zjednodušuje však návrh webových stránok programovaných v HTML a v budúcnosti budú internetové vyhľadávače tieto elementy pri indexácii stránok naplno využívať. HTML5 sa snaží premeniť príliš časté využívanie niektorých starých elementov programovacieho jazyka v jeho starších verziách. V nasledujúcej tabuľke 1-2 je zoznam nových elementov sekcií HTML5 s popisom jednotlivých elementov. Tabuľka 1-2: Nové elementy sekcií HTML5 Element Popis elementu 22

23 header footer section article aside nav Obsah hlavičky webovej stránky, príp. sekcie konkrétnej stránky Obsah päty webovej stránky, príp. sekcie stránky Sekcia internetovej stránky Nezávislý obsah článku Súvisiaci obsah, resp. citácia Navigácia Zdroj: (Lubbers, et al., 2011, s. 32) Na všetky vyššie uvedené elementy je možné aplikovať programovací jazyk CSS. Nakoľko sa HTML5 snaží presadzovať oddelenie obsahu a formy webového obsahu, na základe tejto skutočnosti je potrebné pri tvorbe internetových stránok písaných v tomto jazyku aplikovať ho spolu s kaskádovými štýlmi CSS. 1.4 Hlavné princípy jazyka CSS3 jazyka CSS3. V kapitole 1.4 tejto diplomovej práce si opíšeme hlavné princípy programovacieho Charakteristika jazyka CSS3 CSS je skratkou pre anglický názov Cascading Style Sheets. V približnom preklade sa teda jedná o tabuľky kaskádových štýlov. Tento programovací jazyk slúži k popisu spôsobu zobrazovania internetových (webových) stránok napísaných v jazykoch HTML, XHTML, príp. XML. Jazyk bol navrhnutý a schválený štandardizačnou organizáciou W3C. Hlavným zmyslom tohto programovacieho jazyka je umožniť návrhárom webových stránok oddeliť vzhľad dokumentu od jeho štruktúry a obsahu. Pôvodným zámerom bolo dať túto schopnosť už jazyku HTML, avšak v dôsledku nedostatočných štandardov a konkurenčného boja vývojárov prehliadačov sa napokon tento jazyk vyvinul iným spôsobom. Staršie verzie HTML obsahujú celú radu elementov, ktoré nepopisujú obsah a štruktúru dokumentu, ani spôsob jeho zobrazenia. Z hľadiska spracovania dokumentov a vyhľadávanie informácií nie je takýto vývoj žiaduce. 23

24 Jazyk CSS vo verzii 3 je omnoho silnejším nástrojom na tvorbu webového obsahu ako predchádzajúce verzie tohto programovacieho jazyka. Zavádza totiž niekoľko vizuálnych efektov, zaoblené rohy a prechody. (Castro, et al., 2012, s. 16) Aplikácia CSS3 v praxi Základom tvorby každej webovej stránky je postupné vylepšovanie webu (vychádza z angl. progressive enhancement). Pomáha pri tvorbe webovej stránky s ohľadom na univerzálnosť. Jedná sa o prístup k tvorbe webových stránok, ktorý vynašiel Steve Champeon v roku (Castro, et al., 2012, s. 17) Princípom tohto prístupu je pomerne jednoduchý, avšak o to viac účinný pri tvorbe webového obsahu sa začína vytvárať obsah v jazyku HTML a správanie pri tvorbe sa prispôsobuje tak, aby boli webové stránky prístupné všetkým návštevníkom. Tak ako je to možné vidieť na obrázku 1-3. Na túto webovú stránku sa následne aplikuje dizajn prostredníctvom programovacieho jazyka CSS. Vzhľad webu po aplikácii môžeme vidieť na obrázku 1-4. Potom sa do zdrojového kódu stránky pridajú dodatočné funkcie webu. To je možné docieliť použitím programovacieho jazyka JavaScript. Pozn.: Na programovací jazyk JavaScript a knižnicu jquery sa bližšie pozrieme v kapitole 1.6 tejto diplomovej práce. Výsledok použitia tohto princípu je, že používateľom so zariadeniami a internetovými prehliadačmi schopnými zobrazovať iba základné stránky bude stránka zobrazovaná podstatne rýchlejšie, zatiaľ čo ostatní používatelia budú musieť byť pri načítavaní webových stránok menej náročný, avšak ocenia vizuálnu stránku webového obsahu, ktorý prezerajú. Treba však pamätať na to, že používateľský pôžitok pri prezeraní daného webového obsahu nie je až taký dôležitý, ako to, že samotný obsah bude kedykoľvek prehľadne a rýchlo dostupný. Na obrázku 1-3 je možné vidieť základnú stránku napísanú v programovacom jazyku HTML, avšak bez použitia kaskádových štýlov CSS. Na základe obrázku môžeme usúdiť, že zobrazená webová stránka je pomerne jednoduchá a z vizuálneho hľadiska nevyzerá príliš dobre, ale informácie sú pritom dostupné, čo je podstatné viac ako vzhľad. Aj keď pritom netreba zabúdať ani naň. Pri takto jednoduchom dizajne stránky je zaujímavé, že aj prehliadače spred dvadsiatich rokov ich dokážu bez väčších problémov 24

25 zobraziť. Tak isto ju bezchybne dokážu zobraziť mobilné telefóny s internými webovými prehliadačmi. Okrem toho ju dokážu zobrazovať aj zariadenia, ktoré nie sú priamo určené na prehliadanie internetových stránok, i keď niektoré modely touto funkciou disponujú čítačky kníh. Obrázok 1-3: Zobrazenie webovej stránky bez použitia kaskádových štýlov Zdroj: (Hyslop, et al., 2011 s. 19) Obrázok 1-4 poukazuje na webový obsah stránky, ktorú vidíme na predchádzajúcom obrázku, avšak vrátane použitia kaskádových štýlov CSS. Otvorená je prirodzene v internetovom prehliadači podporujúcom tento programovací jazyk. Táto internetová stránka obsahuje úplne rovnaké informácie. Rozdiel je len v tom, že sa používateľovi prezentuje odlišným spôsobom. Návštevníci takýchto webových stránok, s vhodnými zariadeniami určenými na prehliadanie webu, získajú pri hľadaní informácií v ňom obsiahnutých intenzívnejší užívateľský pôžitok. V tom tkvie podstata využívania nielen vzhľadu webového obsahu na internete, ale najmä využívanie programovacieho jazyka na to určeného Cascading Style Sheets. 25

26 Obrázok 1-4: Zobrazenie webovej stránky HTML s použitím jazyka CSS Zdroj: (Hyslop, el al., 2011 s. 20) Štruktúra CSS3 Keďže programovací jazyk CSS vôbec nie sú súčasťou HTML, je ich syntaxe úplne iná. Rozhodne sa nepoužíva znamienko rovnosti, prípadne úvodzovky. Zápis hodnoty vlastností určitého elementu, ktorý chceme pri tvorbe webového obsahu zmeniť sa v základe uskutočňuje takto (vlastností a hodnôt môže byť viacero): vlastnosť: hodnota; vlastnosť: hodnota; vlastnosť: hodnota; Presný zápis jednotlivých vlastností a hodnôt použitých elementov prebieha v syntaxe programovacieho jazyka CSS3 nasledovne (v prípade, že programový kód zapisujeme do externého súboru s príponou.css): identifikátor {vlastnosť: hodnota; vlastnosť: hodnota; vlastnosť: hodnota Presný zápis jednotlivých vlastností a hodnôt použitých elementov prebieha v syntaxe programovacieho jazyka CSS3 nasledovne (v prípade, že programový kód zapisujeme priamo do tela zdrojového kódu HTML5): <tag Style= vlastnosť: hodnota; vlastnosť: hodnota; vlastnosť: hodnota > 26

27 1.4.4 Prehľad nových vlastností Programovací jazyk CSS vo svojej aktuálne najnovšej verzii 3 prináša veľké množstvo inovácií. V tejto podkapitole si uvedieme pár príkladov funkcií, ktoré je možné používať pri tvorbe webového obsahu. Prvou vlastnosťou, ktorú prináša CSS3 je rotácie. Tá zabezpečuje rotovanie akéhokoľvek elementu použitého v zdrojovom kóde. Jej zápis je: Rotácia [transform: rotate(7.5deg);] Ďalšou zaujímavou vlastnosťou, ktorá je pri tvorbe webových stránok prostredníctvom tejto verzie ľahko a jednoducho použiteľná je vytváranie prechodov. Tie sú ale pritom na stránke použité ako obrázky. Zápis tejto vlastnosti do programového kódu sa uskutočňuje nasledovne: Prechody [linear-gradient(top, #fff, #efefef);] Medzi iné vlastnosti, ktoré prináša programovací jazyk CSS3 je využitie podpory tzv. RGB farebného modelu (skratka z angl. Red-Green-Blue). Vďaka tejto vlastnosti je možné použitie RGB farby namiesto hexadecimálneho zápisu spoločne s priehľadnosťou. Zápis tejto vlastnosti je nasledovný: RGBa [background-color: rgba(255,0,0,0.5);] (Hogan, 2012, s. 251) 1.5 Responzívny dizajn webových stránok V nasledujúcej kapitole sa budeme venovať aktuálnemu trendu vývoja webových stránok. Pozrieme sa na definíciu samotného pojmu, bližšie si popíšeme výhody tohto dizajnu, spomenieme chyby pri vytváraní stránky tohto druhu a taktiež si krátko priblížime pravidlá pri používaní kaskádových štýlov, tzv. Media Queries Pojem responzívny dizajn S pribúdajúcimi novými modelmi mobilných zariadení narastá fragmentácia veľkosti displeja, na ktorom používatelia zobrazujú webové stránky. Malý displej tak 27

28 predstavuje obmedzený priestor pre prezentáciu údajov. Je preto potrebné s dostupným priestorom pracovať zodpovedne. Responzívny webový dizajn (skratka z angl. Responsive Web Design) je termín, ktorý prvýkrát použil Ethan Marcotte vo svojom rovnomennom článku v roku Marcotte responzívnym dizajnom nazýva taký návrh webovej stránky a taký jej štýl, ktorý bude optimalizovaný pre všetky druhy najrôznejších zariadení, akými sú nielen moderné inteligentné telefóny, notebooky, tablety, osobné počítače, ale aj netbooky a zariadenia s nadmernou uhlopriečkou zobrazovacej jednotky. Vďaka responzívnemu dizajnu je teda možné vytvoriť stránky, ktoré vyzerajú výborne ako na monitore z Full HD, či v dnešnej dobe aj UltraHD rozlíšením, tak aj na zariadeniach z nižším rozlíšením. Jedná sa pritom o jedinú webovú prezentáciu, takže aj údaje sa editujú na jednom mieste. Pre lepšiu ilustráciu toho, ako to v prípade využitia responzívneho dizajnu vyzerá v praxi, použijeme nasledovné jednoduché príklady. Prvým je nasledujúca tabuľka v troch rôznych variantoch, ktorá obsahuje dvanásť obdĺžnikových prvkov označených číslicami 1 až 12. Túto tabuľku si môžeme predstaviť ako webovú stránku s jednotlivými elementmi, ktoré obsahuje. Nižšie uvedená tabuľka demonštruje zobrazenie internetovej prezentácie vytvorenej prostredníctvom responzívneho dizajnu na širších obrazovkách z počtom palcov 15 a viac. Elementy sú teda zobrazované ako sieť s počtom štyroch horizontálnych a troch vertikálnych bodov. Tabuľka 1-3: Obdĺžnikové prvky zobrazené v sieti 4x3 1. prvok webu 2. prvok webu 3. prvok webu 4. prvok webu 5. prvok webu 6. prvok webu 7. prvok webu 8. prvok webu 9. prvok webu 10. prvok webu 11. prvok webu 12. prvok webu Zdroj: (Vlastné spracovanie) Naproti tomu na druhej demonštrácii, ako ukazuje druhá tabuľka vidíme rozdielne usporiadanie jednotlivých prvkov webovej prezentácie. Takéto zobrazenie je adekvátne pre menšie zobrazovacie jednotky zariadení ako napríklad tabletov s počtom palcov nižším 28

29 ako 10. Elementy sú teda zobrazované ako sieť s počtom štyroch horizontálnych a štyroch vertikálnych bodov. Tabuľka 1-4: Obdĺžnikové prvky zobrazené v sieti 4x4 1. Prvok webu 2. prvok webu 3. prvok webu 4. prvok webu 5. prvok webu 6. prvok webu 7. prvok webu 8. prvok webu 9. prvok webu 10. prvok webu 11. prvok webu 12. prvok webu Zdroj: (Vlastné spracovanie) Na poslednom obrázku demonštrujúcom podstatu responzívneho dizajnu je možné vidieť rozloženie jednotlivých elementov internetovej prezentácie. Takéto zobrazenie je adekvátne pre mnohonásobne menšie zobrazovacie jednotky zariadení ako napríklad mobilných telefónov (smartfónov) s počtom palcov nižším ako 5. Elementy sú v tomto prípade zobrazované ako sieť s počtom jedného horizontálneho bodu a šiestich vertikálnych bodov. Tabuľka 1-5: Obdĺžnikové prvky zobrazené v sieti 1x6 1. prvok webu 2. prvok webu 3. prvok webu 4. prvok webu 5. prvok webu 6. prvok webu Zdroj: (Vlastné spracovanie) Na nižšie uvedenom obrázku môžeme na príklade webovej stránky vidieť, ako v praxi vyzerá aplikovanie responzívneho dizajnu pri tvorbe webového obsahu. Tento obrázok bol vytvorený ako screenshot zo stránky 29

30 Podobných služieb je na internete veľké množstvo. Fungujú v princípe veľmi jednoducho. Na vyššie uvedenej adrese napíšeme webovú adresu akejkoľvek internetovej stránky a na štyroch rôznych zariadeniach vidíme simuláciu zobrazenia danej webovej prezentácie. V prípade tejto bezplatnej služby je možné zobrazenie na aktuálne najpoužívanejších platformách, akými sú monitor bežného stolného počítača s uhlopriečkou väčšou ako 20 palcov, obrazovka notebooku rozmermi nepresahujúca 15 palcov, 9 palcový tablet a 4 palcový inteligentný telefón. Pri využívaní tejto služby je tiež možné pohodlne presúvať jednotlivé platformy a kvalitne tak porovnať zobrazenie jednej webovej stránky a overiť jej responzívnosť. Obrázok 1-5: Aplikovanie responzívneho dizajnu v praxi Zdroj: (Vlastné spracovanie) Media Queries Media Queries sa považujú za poslednú úroveň pri tvorbe responzívneho webového návrhu. Sú to vlastne pravidlá, vďaka ktorým je možné meniť štýl dokumentu vytvoreného v programovacom jazyku CSS3 a to v závislosti na šírke obrazovky zobrazovaného 30

31 zariadenia. Nasledujúci štýl (čierne pozadie celého dokumentu) bude uplatňované len v takom prípade, ak šírka internetového prehliadača na použitom zariadení bude v rozsahu od 320px do 640px. Obrázok 1-6: Zdrojový kód Media (max-width: 640px) and (min-width: 320px) { body { background-color: black Zdroj: (vlastné spracovanie) Výhody responzívneho dizajnu Nesporná výhoda responzívneho dizajnu spočíva v tom, že takáto internetová prezentácia je jednoducho prístupná a rovnako tak skvele použiteľná bez ohľadu na zariadenie. Taktiež cena na vytvorenie takéhoto obsahu je nižšia, ako keby sme sa rozhodli pre druhú tvorbu mobilnej verzie prezentácie, a koniec koncov aj druhej webovej stránky. Výhodou použitia takéhoto druhu dizajnu webu je aj skutočnosť, že administrátorovi webového obsahu v mnohom uľahčí prácu, nakoľko odpadnú problémy spojené s konzistenciou obsahu, pretože sa nemusí zaoberať nad tým, ako zariadiť aktualizáciu údajov na dvoch webových prezentáciách. Ďalšou výhodou je fakt, že náklady na administráciu takejto webovej prezentácie sú omnoho nižšie ako v prípade dvoch verzií. S problémom administrácie webového sídla, ktorý ma dve verzie súvisí aj problematika duplicitného obsahu. 31

32 1.5.4 Duplicitný obsah Duplicitný obsah ako pojem je často používaný v oblasti optimalizácie pre internetové vyhľadávače. Duplicitný obsah totižto vzniká v prípade, že sa rovnaké informácie nachádzajú na rôznych URL adresách (čo je v zásade pravda, pretože internetový vyhľadávač vidí rozdiel medzi URL adresou čo je klasická verzia jedného webu a čo je mobilná verzia rovnakého webu). Vyhľadávače však samozrejme nechcú zobrazovať rovnaké informácie viackrát, preto jednu z adries vyradí z výsledkov vyhľadávania. To je nepríjemné z toho dôvodu, že spätné odkazy, namierené na túto adresu, strácajú svoj význam. Môžeme teda povedať, že duplicitný obsah vzniká, keď napríklad vlastníme niekoľko domén a všetky smerujú na rovnaký web (správnym riešením je využiť presmerovania). Duplicitný obsah tiež môže byť spôsobený nesprávnym odkazovaním, napríklad ak na homepage webe (alebo inú úvodnú stránku v adresári) odkazujeme menom adresára aj URL s menom stránky napríklad a Rovnako tak domény, ktoré sú plne funkčné bez napísania, a aj s napísaním www na začiatku môžu byť považované za duplicitný obsah. Pretože duplicitný obsah nie je zakázanou SEO (skratka z angl. Search Engine Optimalization) technikou, nemala by za neho hroziť penalizácia. Výnimočne sa však stáva, že vyhľadávač odstráni všetky stránky majúce duplicitný obsah, a teda neponechá vo výsledkoch ani jedinú z nich (napr. u webových stránok s podobnými menovkami rôzneho typu tovaru). Duplicitný obsah teda neškodí len umiestneniu v internetových vyhľadávačoch, ale znižuje aj použiteľnosti webu. Sú teda dva rôzne spôsoby ako sa vyhnúť tomuto problému. Prvým z nich je samozrejme využitie responzívneho dizajnu, nakoľko obsah mobilnej verzie danej webovej prezentácie sa nenachádza na dvoch rôznych miestach (internetový vyhľadávač totiž môže považovať dve rôzne webové adresy za dve rôzne webové stránky, aj keď sa jedná o subdoménu). Druhým je dodržiavanie niekoľkých nižšie uvedených odporúčaní: Všade tam, kde máme odkazy na svoje webové stránky pod kontrolou (na vlastnom webe, v katalógoch, a pod.), by sme mali použiť pre každú stránku len jedinú URL adresu. Je potrebné vyhnúť sa najmä uvádzaniu 32

33 východiskových dokumentov v URL adrese (či už sa jedná o index.html, alebo index.php, a pod), Ak už na nejakú internetovú stránku vedie viac odkazov s rôznymi URL adresami, ktoré nemáme pod kontrolou, alebo ich vznik hrozí (to je typické pre varianty s a rovnako tak bez www písaného na začiatku), je potrebné nastaviť presmerovanie HTTP protokolu hlavičkou 301 z nepreferovaných variantov na variantu preferovanú. Presmerovanie 301 je vlastne považované za stále presmerovanie internetovej adresy. Internetový vyhľadávač vidí iba takú adresu, ktorá bola presmerovaná. Za pomoci tejto techniky bude vyhľadávač vedieť, že hľadaný obsah bol natrvalo premiestnený na novú adresu. Tým pádom vyhľadávací algoritmus (vyhľadávací robot) vyradí starú adresu z indexu a nahradí ju novou. Táto smerovacia technika sa používa v prípadoch, ak chceme presmerovať doménu s www rovnako bez www písaného na začiatku, alebo v takom prípade, keď nám ide o to úplne a natrvalo zmeniť URL adresu našej internetovej stránky, Je potrebné vyhnúť sa využívaniu tzv. doménových aliasov. Ak máme pre jednu internetovú stránku viac domén, vždy pomocou vyššie uvedeného presmerovania 301 nasmerujme vyhľadávač zo všetkých nepreferovaných domén na jedinú preferovanú doménu, Netreba zabúdať ani vyhýbaniu sa vkladaniu tzv. session ID do URL adresy na verejne prístupnom internetovom sídle Chyby pri responzívnom dizajne V nasledujúcom odseku môžeme vidieť tieto najčastejšie chyby, ktorých sa dopúšťajú programátori webových stránok: Prvou chybou je jedna z najzásadnejších, a tou je to, že sa pri vývoji často nerieši rýchlosť načítania danej webovej prezentácie (takáto webová stránka s kvantom obsahu, či už obrázkov s vysokým rozlíšením, alebo rôznych dokumentov umiestnených na serveroch, môže byť ľahko a rýchlo načítavaná na počítačovej platforme, avšak na mobilnom telefóne môže 33

34 takéto množstvo dát vyvolať neadekvátne dlhé načítavanie webového obsahu), Ďalšou chybou pri vytváraní responzívneho dizajnu je, že sa tieto webové stránky prispôsobujú iba konkrétnym rozlíšeniam (pri tomto bode treba poukázať na fakt, že na trhu je momentálne nepreberné množstvo rôznych mobilných zariadení), Webové prezentácie vytvárané prostredníctvom využitia responzívneho dizajnu sú mnohokrát nedostatočne otestované a neoptimalizované (čo môže byť spôsobené tým, že pre dostatočnú optimalizáciu a kvalitné otestovanie je nutné spúšťať internetovú stránku na reálnom zariadení, pričom si treba uvedomiť, že na trhu je momentálne obrovské množstvo rôznych veľkostí samotného zariadenia, s čím súvisí rozličná veľkosť zobrazovacej plochy daného zariadenia a taktiež rôzne rozlíšenia displeja), Používajú sa desktopové komponenty používateľského rozhrania (angl. User Interface), Používateľom tabletov sa v mnohých prípadoch vnucuje používateľské rozhranie vhodné skôr pre inteligentné telefóny. 1.6 Programovací jazyk JavaScript V kapitole 1.6 sa následne priblížime charakteristiku JavaScriptu, programovacieho jazyka na strane klienta Charakteristika programovacieho jazyka JavaScript JavaScript je objektovo orientovaný programovací jazyk, využívaný pri tvorbe webových stránok. Na rozdiel od serverových programovacích jazykov, akým je napríklad PHP, slúžiacich na generovanie kódu samotnej stránky, JavaScript beží na strane klienta, teda v prehliadači až po stiahnutí do osobného počítača. JavaScript sa používa predovšetkým pre vytváranie interaktívnych webových stránok. Príkladom použitia môžu byť najrôznejšie kontroly správneho vyplnenia 34

35 formulárov, obrázky meniace sa po prejdení kurzorom a iné. JavaScript sa tiež často používa na meranie štatistík návštevnosti. Spoločne s jazykom HTML a CSS je JavaScript súčasťou DHTML, súboru techník a postupov zameraných na zlepšenie používateľského rozhrania a zvýšenie pôžitku z používania webových stránok. K tomu JavaScript využíva tzv. DOM, rozhranie umožňujúce pristupovať k jednotlivým prvkom stránky. JavaScript vyvinula spoločnosť Netscape v roku 1995 a v roku 1998 bol štandardizovaný organizáciou ISO. JavaScript sa potom stal základom pre ďalšie programovacie jazyky, akými sú napr. ActionScript, používaný v technológiách Flash a Flash Lite Vlastnosti programovacieho jazyka JavaScript Medzi vlastnosti programovacieho jazyka JavaScript sa vo všeobecnosti považujú nižšie uvedené skutočnosti: Multiplatformový programovací jazyk nie je podstatné, na akom operačnom systému sa programovací jazyk JavaScript používa, Interpretovaný programovací jazyk to znamená, že obsah zdrojového kódu, ktorý je v ňom napísaný nie je potrebné kompilovať, Objektový programovací jazyk programovací jazyk využíva zabudovaných objektov a tiež objektov integrovaných v internetovom prehliadači, Závislý na prehliadači programovací jazyk je funkčný vo väčšine prehliadačov, musí byť však povolený, pretože je možné ho zablokovať, Case senzitívny programovací jazyk táto vlastnosť znamená, že pri písaní programového kódu záleží na veľkosti písma v zápise, Overený a jednoduchý zápis v prípade programovacieho jakyza Javastript t.j. syntax je podobná programovacím jazykom C, Java, ako aj iným programovacím jazykom. 35

36 1.6.3 Knižnica jquery Písať zdrojový kód v jazyku JavaScript, ktorý správne funguje vo viacerých webových prehliadačoch čistým a stručným spôsobom je náročná práca. Existuje niekoľko knižníc (angl. skr. framework), ktoré tento proces zjednodušujú. Medzi najznámejšie knižnice jazyka JavaScript sa zaraďuje jquery. Je najpopulárnejší medzi webovými vývojármi, ľahko sa používa, má širokú škálu existujúcich knižníc a dobre poslúži k jednoduchej tvorbe núdzových riešení. (Hogan, 2012, s. 253) Túto knižnicu je možné stiahnuť si priamo z webových stránok jquery a na skript odkázať priamo z miesta na lokálnom disku v počítači, resp. načítať jquery skript priamo zo serverov spoločnosti Google. Toto načítanie sa uskutoční tak, že nižšie uvedený kód pozostávajúci zo skriptu programátor webového obsahu umiestni do zdrojového kódu danej internetovej stránky. Vyššie spomínaný obsah programového kódu vidíme na tomto kúsku zdrojového kódu. Zobrazuje presné umiestnenie knižnice jquery skriptu v zdrojovom kóde internetovej stránky. Obrázok 1-7: Umiestnenie zdrojového kódu knižnice jquery v HTML <!DOCTYPE HTML> <html> <head> <title> 36 <!-- názov webovej stránky --> </title>

37 Zdroj: (vlastné spracovanie) Internetové prehliadače môžu za určitý čas vytvoril iba niekoľko pripojení k danému serveru. V prípade, že sa distribuujú obrázky a skripty z viacerých serverov, návštevníci webových stránok ich môžu načítať rýchlejšie. Použitie siete pre odporúčanie obsahu spoločnosti Google má taktiež svoje výhody vzhľadom k tomu, že aj iné webové stránky odkazujú na knižnicu jquery tejto firmy, používatelia prehliadajúci takýto webový obsah ju už môžu mať uloženú vo vyrovnávacej pamäti internetových prehliadačov, ktoré používajú. (Lindley, 2009, s. 9-10) 37

38 1.7 Programovací jazyk PHP V tejto kapitole sa pozrieme na programovací jazyk Hypertext Preprocessor (skrátane PHP). Priblížime si pojem PHP, prácu s týmto programovacím jazykom, a pozrieme sa tiež na jeho aplikovanie Pojem PHP PHP je programovací jazyk, ktorý pracuje na strane servera. S PHP môžeme ukladať a meniť údaje webových stránok. PHP je skratka z angl. Personal Home Page a vzniklo v roku 1996, od tej doby však prešlo veľkými zmenami a teraz táto skratka znamená Hypertext Preprocessor Práca s PHP PHP nie je nijako ťažké pochopiť. Pri programovaní v tomto jazyku si programátor vystačí len so základmi. Vie ukladať, meniť a mazať dáta. Všetko sa odohráva na webovom serveri (kde sú uložené zdrojové kódy webových stránok). PHP skript sa najprv vykoná na serveri a potom odošle prehliadaču iba výsledok (znamená to, že najprv spočíta, aký je napr. súčet zadaných hodnôt a potom internetovému prehliadaču odošle len výsledné číslo). Preto v zdrojovom kóde nájdete len výsledné číslo (to je rozdiel oproti JavaScriptu, ktorý tieto výpočty vykonáva priamo v prehliadači). Rozdiel medzi programovacím jazykom PHP a JavaScriptom v kombinácii s HTML je aj ten, že zdrojový kód PHP nie je možné zobraziť. Pomocou tohto programovacieho jazyka je možné vytvoriť interaktívne prvky webových prezentácií, akým je napríklad diskusné fórum, kniha návštev, počítadlo návštevníkov, ktorí zobrazili a následne prehliadali internetovú stránku, anketu, či graf a dokonca je možné si pomocou jednoduchého kódu zlikvidovať celý obsah webu. Navyše máte možnosť prepojiť vaše webové stránky s databázami, ako napr. MySQL, Oracle, či MSSQL databázami. Je rozhodne aspoň jedna funkcia PHP, ktorá sa hodí snáď do každého webového sídla. Na webových stránkach sa zvyčajne opakujú niektoré časti, ako hlavička stránky s odkazmi, menu, či päta. S využitím tohto programovacieho jazyka je možné ľahko 38

39 vytvoriť šablónu pre webovú stránku, do ktorej sa budú vkladať súbory s menu, pätou, a pod. Je teda možné mať menu zapísané iba jedenkrát a do ďalších stránok ho len nakopírovať. V prípade, že tvorca stránky bude chcieť zmeniť menu alebo inú časť stránky, bude to s využitím programovacieho jazyka PHP mimoriadne rýchle, efektívne a jednoduché Aplikovanie PHP Internetová stránka s prvkami programovacieho jazyka PHP má najčastejšie koncovku.php. Je ale tiež možné pracovať so súbormi, ktoré majú koncovku.php3,.php4,.php5, prípade.phtml. Najlepšie je však využívať koncovky.php. V prípade, že sa používa koncovka.php5, internetové sídlo môže pôsobiť zastaralo, keď vznikne nová verzia jazyka (.php6). Súčasná stabilná verzia tohto programovacieho jazyka je z apríla tohto roku. Je však dostupná aj tzv. alpha verzia PHP je programovací jazyk, ktorý si žiaľ nevystačí len s internetovým prehliadačom určitej verzie (na rozdiel od jazykov JavaScript, alebo HTML), ale je nutné ho na počítač nainštalovať. Základ tvorí webový server a programové knižnice jazyka. K podpore PHP je potrebné nainštalovať a nakonfigurovať server, zvyčajne Apache. Najlepšie je využiť na inštaláciu daného programovacieho jazyka tzv. program PHP Triad, ktorý nainštaluje všetky potrebné súčasti. Pri aplikovaní tohto jazyka v praxi je potrebné pripomenúť, že nie každý webhosting zahŕňa jeho podporu. Potrebná podpora je dostupná v prípade webhostingu nadštandardných služieb, ktoré sú spoplatnené. Aj napriek tomu je však v dnešnej dobe možné nájsť a využívať služby webhostingu, ktorý má natívnu podporou PHP (ako napr. služby webzdarma.cz, či ic.cz). 39

40 2 Opis mobilných platforiem a nástrojov na tvorbu webu V nasledujúcej podkapitole si bližšie opíšeme jednotlivé mobilné platformy a taktiež nástroje používané na tvorbu internetových prezentácií. 2.1 Charakteristika mobilných platforiem Mobilná platforma označuje kombináciu hardvéru (inteligentného mobilného telefónu) a mobilného operačného systému. Najperspektívnejšími mobilnými platformami sú v súčasnosti Google Android, Apple ios a Microsoft Windows Phone. Tieto tri platformy si priblížime s nasledujúcej podkapitole 2.2. Rovnako tak sa pozrieme aj na platformu Blackbery Operating System, ktorá je v súčasnosti čoraz viac populárna, najmä v business prostredí. Jednotlivé vyššie uvedené platformy sa navzájom líšia nielen funkciami, ktoré poskytujú prostredníctvom mobilného operačného systému používateľovi. Sú rozdielne rovnako tak aj rozhraním operačného systému, ktorý je určený pre vývojárov mobilných aplikácií, a taktiež sa navzájom líšia aplikáciami tretích strán, ktoré sú na danej platforme k dispozícii Výhody platformy Medzi výhody mobilnej platformy vo všeobecnosti môžeme zaraďovať nižšie uvedené skutočnosti: Inteligentné telefóny (tzv. smartfóny) sú mimoriadne obľúbené u používateľov, čomu nasvedčuje aj stále rastúci dopyt po týchto zariadeniach, Vďaka trendom viacerých spoločností, či už Apple, Microsoft, alebo Google získavajú telefóny, prostredníctvom ktorých je možné pripojiť sa k internetu, svoju popularitu. (Murphy, 2011, s. 22) Nevýhody platformy Medzi nevýhody mobilnej platformy vo všeobecnosti môžeme zaraďovať nižšie uvedené skutočnosti: 40

41 Telefóny majú aj napriek rastúcemu trendu oproti stolným počítačom stále pomerne malú obrazovku, S nedostatočnou veľkosťou sa stretávame taktiež pri virtuálnej klávesnici, ktorou tieto zariadenia disponujú, Polohovacie zariadenia v mobilných zariadeniach sa stále zlepšujú, avšak stále môžu byť nepresné, čo súvisí s už spomínanou veľkosťou zobrazovacej plochy mobilného prístroja. V tejto súvislosti treba spomenúť problém niektorých používateľov, ktorí majú väčšie prsty, pretože sú potrebné na ovládanie dotykových obrazoviek, pričom niekedy sa prejavujú problémy s nedostatočnou citlivosťou. Výkonnosť centrálnej riadiacej jednotky mobilného prístroja (angl. CPU) sa síce v poslednom období čoraz viac zvyšuje, avšak v priamom porovnaní so stolnými počítačmi, či notebookmi, alebo výkonnými servermi sa stále jedná o zariadenia s pomerne nízkym výkonom. 2.2 Základné informácie o jednotlivých platformách V kapitole sa nachádzajú informácie o jednotlivých najpoužívanejších mobilných platformách od popredných spoločností Microsoft, Apple, či Google Microsoft Windows Phone Operačný systém Windows Phone je obchodný názov mobilného operačného systému spoločnosti Microsoft. Platforma Windows Phone bola po prvý raz vydaná v októbri roku 2010 v Európe a Austrálii, v novembri roku 2010 v Spojených štátoch amerických a nakoniec v Ázii začiatkom roku V súčasnosti mobilný operačný systém Microsoft Windows Phone ponúka nové používateľské rozhranie s názvom Metro. Môžeme sa tiež stretnúť s pomenovaním Modern UI. Momentálne môžeme za platformu Windows Phone označiť systémy Windows Phone vo verzii 7 a Windows Phone vo verzii 8. Obe verzie však nie sú vzájomne kompatibilné. Obe sú dokonca založené na základne iných platformiem. V prípade verzie 7 sa jedná o jadro Windows CE, novšia verzia operačného systému Windows Phone 8 obsahuje jadro z rady Windows NT. 41

42 Platforma Windows Phone nahradila starší mobilný operačný systém Windows Mobile. Tento operačný systém sa považuje za jeho nástupcu, s ktorým však nie je spätne kompatibilný. Spoločnosť Microsoft začala s vývojom platformy Windows Phone v podstate od nuly, s minimom funkcií a novým, prepracovaným originálnym dizajnom. Aj napriek záujmu výrobcov moderných mobilných telefónov tzv. smartfónov mal však tento operačný systém pozvoľný štart. Za veľkú vzpruhu pre celý ekosystém môže byť považovaná spolupráca so spoločnosťou Nokia. Verzie operačného systému Microsoft Windows Phone: Windows Phone 7 prvá verzia systému, Windows Phone 7 s označením NoDo vylepšenie pôvodnej verzie, Windows Phone 7.5 označenia Mango, Refresh a Tango, Windows Phone 7.8 podobne ako novšia verzia 8 obsahuje nové používateľské rozhranie Metro UI, Windows Phone 8 označenie Apollo (postupné vylepšenia v podobe Update 1, Update 2 a Update 3) Google Android Android je operačný systém v súčasnej dobe vyvíjaný spoločnosťou Google, primárne určený pre dotykové zariadenia, ako sú napríklad inteligentné telefóny a tablety. Tento mobilný operačný systém je momentálne dostupný na trhu mobilných telefónov vo viacerých verziách. Najaktuálnejšia je štvrtá verzia s označením Platforma Android bola ohlásená spoločnosťou Google v novembri roku 2007, keď sa počas tlačovej konferencie odhalil ambiciózny projekt otvoreného operačného systému postavenom na linuxovom jadre, ktorý by bol určený predovšetkým pre inteligentné telefóny, PDA systémy, navigácie a iné mobilné zariadenia. Ešte v ten istý deň odovzdala spoločnosť celú platformu aj zdrojové kódy novo založenému združenie firiem Open Handset Alliance (združenie mobilných operátorov, obchodníkov, softvérových vývojárov a výrobcov mobilných zariadení), ktorá potom operačný systém Android vydala s open source licenciou a kompletný zdrojový kód nového mobilného operačného systému sa tak dostal do rúk širokej verejnosti. 42

43 Cieľom platformy Android je byť maximálne otvorenou vývojárom, priemyslu aj používateľom. Používatelia teda nepotrebujú súhlas k tomu, aby si nainštalovali ľubovoľnú aplikáciu. Výrobcovia telefónov, ani mobilní operátori nebudú potrebovať na nasadenie tohto operačného systému na svoje zariadenia žiadneho povolenia od spoločnosti Google, či kohokoľvek z Open Handset Alliance. Môžu si upraviť platformu tak, ako sami uznajú za vhodné. Práve filozofia open source, ktorou sa Android odlíšil od konkurenčných prostredí od firiem Apple, Microsoft alebo Nokia, je jedným z mnohých dôvodov jeho masívneho rozšírenia medzi používateľmi, aj vývojármi. Operačný systém Android využívajú predovšetkým mobilné telefóny. Aj keď sa hovorí o tom, že by sa technológia Android mohla používať aj v iných zariadeniach (napríklad v počítačoch na palubných doskách automobilov), v súčasnej dobe sa hlavný dôraz kladie na vývoj aplikácií pre inteligentné telefóny. (Murphy, 2011, s. 22) Apple ios Apple OS je mobilný operačný systém vyvíjaný a udržiavaný spoločnosťou Apple. Je to operačný systém používaných v iphone telefónoch, hudobných zariadeniach ipod Touch a rovnako sa v mierne upravenej verzii využíva v tabletoch ipad. V minulosti bol tento mobilný operačný systém známy ako OS X iphone, alebo iphone OS. Šlo o názvy používané v úplne prvých verziách systému. Prvá verzia ios bola predstavená na MacWorld konferencii v januári roku 2007 ako primárny operačný systém pre prvý inteligentný telefón spoločnosti Apple iphone, ktorý bol v predaji od júna toho istého roku. Pôvodne spoločnosť Apple nemala v pláne vypustil tzv. SDK (skratka z angl. Software Development Kit softvérový nástroj učený pre vývojárov aplikácií na danú platformu) pre tento operačný systém. To znamenalo, že jedine aplikácie tretích strán s oficiálnou podporou boli webové aplikácie. Operačný systém tiež nemal oficiálne meno až do marca roku 2008, kedy bola vydaná prvá beta verzia s názvom iphone SDK. Predtým spoločnosť Apple pri kontakte s médiami tvrdila, že mobilný telefón iphone používa operačný systém OS X. V apríli roku 2010 bolo k dispozícii viac ako aplikácií pre ios s viac ako štyrmi miliardami stiahnutých kópií. Začiatkom júna 2010 bolo zmenené meno operačného systému z iphone 43

44 OS 4.0 na oficiálny názov ios 4. Systém vo verzii 4.0 bol k dispozícii používateľom koncom júna 2010, pár dni po uvedení inteligentného mobilného telefónu Apple iphone 4. Následne bola vydaná aktualizácia 4.0.1, ktorá opravovala indikáciu príjmu signálu. Mesiac na to bola k dispozícii na stiahnutie v podobe updatu verzia Táto verzia ios opravovala viaceré bezpečnostné diery. Koncom roku 2010 spoločnosť Apple vydala svoj mobilný operačný systém vo verzii 4.1 pre mobilné zariadenia iphone a ipod Touch. Spomínaná verzia opravovala chyby nahlásené používateľmi, zlepšovala výdrž batérie zariadenia a pridala nové funkcie. Mobilný operačný systém ios je vlastne derivát destkopového operačného systému Mac OS X, ktorý sprostredkuje základy s Darwinom a je to operačný systém podobný Unixu. Operačný systém používa menej ako 500 MB operačnej pamäte daného zariadenia. Systém ios má štyri abstraktné vrstvy: Jadro operačného systému, Core Services vrstva, Vrstva Médiá, Cocoa touch vrstva BlackBerry OS Jedná sa o plaformu, ktorá používateľom poskytuje možnosť neustále synchronizovať údaje v inteligentnom mobilnom telefóne, handhelde a na firemnom serveri. Tento mobilný operačný systém sa orientuje predovšetkým na firemných zákazníkov, ale vlastný server si u mobilného operátora môže prenajať každý používateľ zariadenia a pri využívaní základných pridaných služieb tento server ani nie je potrebný. 2.3 Nástroje používané na tvorbu webového obsahu Nasledujúca kapitola pozostáva so štyroch častí obsahujúcich najrozšírenejšie nástroje, ktoré sú používané pri tvorbe internetových stránok. Editory internetových stránok poskytujú tieto hlavné funkcie: Vytváranie webových stránok, ich aktualizácia, zobrazenie, a pod., 44

45 Formátovanie stránky, t.j. úprava písma, odsekov, nadpisov, odrážok, číslovanie položiek, a iné., Vkladanie hypertextových odkazov, Vkladanie textov z textových dokumentov, Vytváranie jednoduchých tabuliek a schém na webových stránkach, príp. ich vkladanie z iných aplikácií na stránku, Možnosť nastavenia jazykovej mutácie a podľa toho aj automatickej kontroly pravopisných chýb a preklepov. (Pour, et al., 2006, s. 60) Adobe Dreamweaver Program Adobe Dreamweaver je kompletné IDE (skratka z angl. Integrated Development Environment t.j. integrované vývojové prostredie) pre vývoj webových aplikácií. Jedná sa o komplexnú aplikáciu podporujúcu programovacie jazyky slúžiace na tvorbu webového obsahu akými sú HTML, XHTML a CSS. Tento program tiež integruje mnohé webové Ajax frameworky, ako sú napríklad Spry, alebo napríklad framework PhoneGap. (Karlins, 2013, s. 22) Adobe Dreamweaver ponúka aj prácu s mnohými nástrojmi ako napr. Subversion, a ďalšie funkcionality. Aplikácia je dostupná na platforme Microsoft Windows a Apple Mac OS. Dreamweaver bol do verzie 8.0 vyvíjaný spoločnosťou Macromedia. Potom bol však prevzatý spoločnosťou Adobe Systems, ktorá ho vyvíja od verzie 9.0 do aktuálnej verzie CS5.5. Celkovo sa však jedná už o 11.5 verziu tohto programu Oracle NetBeans Jedná sa o komplexné vývojové prostredie s licenciou Open Source. Špecializuje sa na programovací jazyk Java, avšak je v ňom možné vytvárať mnohé iné dokumenty, medzi inými aj HTML, CSS, či PHP. Pomocou pluginov je možné tento program rozšíriť napríklad aj o programovací jazyk C++, či iný. (Bock, 2011, s. 9) Medzi ďalšie vlastnosti vývojového prostredia NetBeans IDE patrí napr. aj programovanie v jazyku UML (resp. modelovanie), práca s XML editorom a nástrojom pre dynamickú tvorbu webových stránok. 45

46 Program NetBeans IDE bol vyvíjaný pod hlavičkou firmy Sun Microsystems, ktorá je hlavným sponzorom projektu. Produkt bol uvoľnený na webových stránkach v júni roku Vývoj prebieha z prevažnej časti českými vývojármi v pražskej pobočke Sun Microsystems. V rámci projektu existujú dva hlavné produkty. Prvým z nich je vývojové prostredie NetBeans (NetBeans IDE) a vývojová platforma NetBeans (The NetBeans Platform). Program je momentálne dostupný na stiahnutie vo verzii 7.4. Na obrázku 2-1 umiestnenom nižšie je možné vidieť vývojové prostredie programu NetBeans IDE. Obrázok 2-1: Vývojové prostredie programu NetBeans IDE Zdroj: (vlastné spracovanie) Microsoft Expression Web Nástroj Expression Web je pokročilá aplikácia od spoločnosti Microsoft Corporation určená pre tvorbu webového obsahu. Tento nástroj je vhodný pre mnohé 46

47 skupiny používateľov, ako začiatočníkov, tak aj pokročilých programátorov a webmasterov. (Leeds, 2010, s. 12) Podporuje celý rad technológií, medzi ktorými nechýba ani podpora najnovších programovacích jazykov ako HTML, XHTML, XML, CSS, JavaScript, PHP a dokonca aj ASP.NET. Program Microsoft Expression Web obsahuje rovnako takt nástroje typu SuperPreview. Tie slúžia pre kontrolu internetovej stránky v mnohých najpoužívanejších webových prehliadačoch, publikovanie prostredníctvom FTP servera pre rýchle nahrávanie informácií na webový server. Aplikácia Expression Web tiež ponúka plnú podporu vývoja webových aplikácií a webového obsahu s využitím technológie Silverlight PSPad Editor Aplikácia PSPad Editor je celosvetovo voľne šíriteľný univerzálny editor pre operačný systém Microsoft Windows obsahujúci freeware licenciu. Prvá verzia vyšla v roku Autorom PSPadu je Ján Fiala. Začal ho vyvíjať ako kvalitnejšiu náhradu za integrovaný textový editor operačného systému Microsoft Windows Notepad. Vzhľadom k nadšenému prijatiu mnohých používateľov ho veľmi rýchlo rozšíril až do dnešnej rozsiahlej verzie, ktorá ponúka naozaj široké spektrum možností od zvýraznenie syntaxe až po šablóny jednotlivých programovacích jazykov. PSPad je pomerne známym nástrojom na úpravu textu. Niekoľko rokov po spustení program dosiahol milión stiahnutí svojej anglickej verzie z primárneho servera na webových stránkach produktu. Skutočný počet používateľov, ktorí s ním prišli do kontaktu, je teda v pravdepodobne oveľa vyšší. Tento všestranný program ponúka niekoľko nasledovných funkcií: Zvýraznenie syntaxe funkcie pre samotné písanie a prehľadnosť, Číslovanie riadkov zdrojového kódu, Kontrola pravopisu písaného textu, Zabudovaný FTP klient pre úpravu internetových stránok priamo na serveri, Zabudovaná kontrola validity programového kódu, 47

48 Zobrazenie náhľadu stránky v rôznych internetových prehliadačoch vrátane podpory prehliadačov Internet Explorer a Mozilla Firefox, Prevod kódovania Windows 1250, UTF-8 a UNICODE, Komprimácia a formátovanie zdrojového kódu, Integrácia do Windows prieskumníka a kontextovej ponuky, Práca s dvoma súbormi súčasne v rozdelenom okne, Neobmedzená dĺžka editovaného textu, Šablóny (napr. HTML tagy a skripty) sú používateľsky definovateľné, Konverzie do formátov DOS, MAC a UNIX, Porovnanie obsahu textových súborov, Záložky v kóde. obrázku 2-2. Používateľské prostredie v slovenskom jazyku je možné vidieť na nasledujúcom 48

49 Obrázok 2-2: Používateľské prostredie editora PSPad Zdroj: (vlastné spracovanie) 49

50 3 Návrh a tvorba vlastného webu v dvoch variantoch Niekoľko posledných rokov prebieha v znamení prudkého rozširovania celosvetovej siete zvanej Internet medzi najširšie vrstvy používateľov. Táto celosvetová expanzia sa nevyhla takmer nikomu a tak sa posledné roky objavila rada rôznych firiem, ktoré svojim zákazníkom ponúkajú priestor na umiestnenie svojich súkromných webových stránok. Toto sa samozrejme prejavilo zvýšeným záujmom o vytváranie nových internetových prezentácií. Nie každý používateľ internetu si však môže dovoliť zaplatiť pomerne vysoké sumy profesionálnym grafickým a vývojárskym firmám, ktoré by im webovú stránku vytvorili a umiestnili na internet. Preto mnohým používateľom neostáva nič iné, len než aby si svoje webové stránky vytvorili vlastnými silami. Dnes sú už však na internete aj najrôznejšie druhy bezplatných služieb, ktoré umožňujú vytvoriť webové prezentácie zadarmo, rýchlo a hlavne bez potreby znalosti pracovať s programovacími jazykmi. Zaregistrujete sa, v niekoľkých krokoch určíte čo bude obsahom stránky a váš web je hotový. Tieto služby sú však majú svoje hranice a vo väčšine prípadov vás obmedzujú na voľbu niektorého z pár preddefinovaných dizajnov, ktoré nemôžete nijako upravovať. Navyše, samozrejmosťou je, že vzhľad vašej webovej stránky bude mať množstvo ďalších používateľov tejto služby a vytratí sa tak kreativita a možnosť úpravy dizajnu podľa chuti používateľa. Ak však máte chuť naučiť sa niečo nové a vytvoriť si vlastný dizajn a obsah, stačí málo, pozrieť sa bližšie na niektoré programovacie jazyky určené na tvorbu webových stránok a vy sami si určíte nielen čo bude web obsahovať, ale nebudete nijako obmedzovaný radou preddefinovaných vzhľadov a prispôsobíte si dizajn podľa vašich predstáv. Navyše si ho môžete kedykoľvek zmeniť. 3.1 Základné ciele praktickej časti Hlavným účelom a taktiež výstupom tejto diplomovej práce je vytvorenie webovej prezentácie pre malý podnik E-Impulz. Technológie použité pri tvorbe webového obsahu sú programovacie jazyky na tvorbu webových stránok HTML5 a CSS3, jazyk pracujúci na 50

51 strane klienta JavaScript, a do istej miery môžeme hovoriť aj o implementácii programovacieho jazyka na strane servera PHP. Vytvorená webová stránka podniku sa nachádza na internetovej adrese resp. Túto internetovú stránku je možné prehliadať nielen na počítačovej, ale aj mobilnej platforme. Ak je internetová adresa stránky písaná na dotykovom telefóne, automaticky prebehne presmerovanie na mobilnú verziu webovej prezentácie, ktorá je dostupná na adrese resp Informácie o podniku Malý podnik E-Impulz sa venuje problematike v oblasti technických zariadení budov, ich pravidelnej údržby, správy, kontroly a zákonných revízií. Tento podnik ponúka komplexné, kvalitné, rýchle a cenovo výhodné profesionálne služby, ktoré sú uvedené nižšie. Z.z.: Odborné prehliadky a skúšky elektrických zariadení podľa vyhlášky 718/2002 Elektrické pracovné stroje, prístroje a rozvádzače, Elektrické prípojky, Iné elektrické zariadenia, Bez obmedzenia napätia, V objektoch s nebezpečenstvom výbuchu, Východzie revízie podľa STN , Periodické revízie podľa STN Odborné prehliadky a odborné skúšky ochrany pred bleskom: Bleskozvodné sústavy podľa STN , Aktívne bleskozvody podľa STN , vrátane noriem STN EN až STN EN , 51

52 Odborné prehliadky a odborné skúšky uzemňovacích sústav: Uzemňovacie sústavy podľa STN , Vyrovnávač potenciálu podľa TN Protokoly o revíziách a kontrolách elektrického spotrebičov podľa normy STN Protokoly o revíziách elektrického ručného náradia v súlade s normu STN 33 Odstraňovanie zistených nedostatkov z odborných prehliadok a odborných skúšok (revízií). východiskových a pravidelných Odstraňovanie zistených nedostatkov pri kontrole ručného náradia a spotrebičov a vedenie k tomu predpísanej dokumentácie. 3.3 Základné požiadavky Proces vývoja internetovej prezentácie do značnej miery kopíruje klasické všeobecné schémy vývoja softvéru, či informačného systému, na ktorom už je ťažko čo vylepšovať a ktoré sa skladá z nasledujúcich fáz: Zber a špecifikácie požiadaviek, Analýza, Návrh, Implementácia, Testovanie, Nasadenie a údržba. Nižšie je uvedená modifikovaná všeobecná schéma vývoja, ktorú je možné aplikovať pri tvorbe webovej stránky e-impulz.wz.sk: Špecifikácia požiadaviek na webovú prezentáciu, 52

53 Analýza špecifikovaných požiadaviek na web, Návrh údajovej štruktúry, Tvorba hypertextového modelu, Návrh architektúry webu a implementácia, Testovanie webovej stránky, Nasadenie do prevádzky a pravidelné aktualizácie webového obsahu Nefunkčné požiadavky Nefunkčné požiadavky predstavujú vlastnosti v oblasti správania, ktoré musí mať stanovené funkcie ako napríklad výkonnosť, používateľnosť a pod. Nefunkčným požiadavkám možno priradiť konkrétnu metódu merania. Tieto požiadavky špecifikujú, aké vlastnosti má produkt mať. Nefunkčné požiadavky webovej prezentácie Zabezpečenie chodu celého systému, Zabezpečenie efektívnej funkčnosti systému, Zaistenie podpory zobrazenia vo všetkých internetových prehliadačoch, Zaistenie rovnakého zobrazenia (príp. veľmi podobného z minimálnymi rozdielmi) vo všetkých internetových prehliadačoch, Kompatibilita v starších internetových prehliadačoch, Kompatibilita v novších internetových prehliadačoch, Možnosť prehliadať webovú prezentáciu na počítačovej platforme, Možnosť prehliadať webovú prezentáciu na mobilnej platforme, Rýchlosť načítania jednotlivých položiek internetovej stránky a taktiež všetkých podstránok, Validita výstupných webových stránok (ide o vlastnosť internetovej prezentácie, popisujúca skutočnosť, že internetová stránka bola vytvorená v súlade so štandardmi tvorby web stránok organizácie W3C), Zaistenie funkčného prepojenia všetkých súčastí webovej stránky, Multiplatformové zobrazenie internetovej prezentácie, Vhodná architektúra webovej stránky. 53

54 3.3.2 Funkčné požiadavky Funkčné požiadavky predstavujú základný predmet daného systému a sú merané konkrétnymi prostriedkami ako sú napríklad hodnoty dát, logika a algoritmy rozhodovania. Tieto požiadavky špecifikujú, čo má výsledný produkt robiť. Funkčné požiadavky webovej prezentácie Prístup k webovej prezentácii, Funkčnosť jednotlivých hypertextových prepojení, Možnosť ľubovoľného prekliknutia za pomoci hypertextových odkazov umiestnených na stránke, Automatické presmerovanie na mobilnú verziu internetovej prezentácie v prípade, že adresa webovej stránky je písaná na dotykovom inteligentnom telefóne, Možnosť pre návštevníka (používateľa) kedykoľvek sa prekliknúť na mobilnú verziu internetovej prezentácie, za predpokladu, že sa tak nestane automaticky, Možnosť kedykoľvek sa prekliknúť späť na klasickú (destkopovú) verziu internetovej prezentácie. 3.4 Návrh grafického dizajnu webovej stránky Po definovaní základných nefunkčných a funkčných požiadaviek je pri tvorbe webovej prezentácie podniku potrebné pristúpiť k návrhu samotného webového sídla. Prvou časťou je vytvorenie grafického dizajnu. Ako takýto proces prebieha si priblížime v tejto kapitole Základné fragmenty grafického dizajnu webového obsahu Požiadavky na grafický dizajn sú niekedy stanovené zákazníkom. Predovšetkým u väčších firiem sa musí brať ohľad na tzv. corporate identity, ktorú má daná spoločnosť často už vytvorenú a ktorej súčasťou je vykonanie základných grafických prvkov, farebné schémy, logo, či iné prvky. Inokedy, naopak, začíname pri tvorbe návrhu grafického dizajnu v podstate na bielom podklade. 54

55 Vo všetkých prípadoch však musia byť zhromaždené požiadavky na nasledujúce fragmenty grafického používateľského rozhrania: Celkový layout webovej prezentácie (celkové rozmiestnenie jednotlivých prvkov stránky), Logo a umiestnenie loga na webe (logo by tiež nemalo mať nadmernú veľkosť, prípadne byť vytvorené v nekomprimovaných obrazových formátoch s veľkosťou niekoľko MB. Logo by malo byť, v rámci danej organizácie, čo najmenšie v komprimovanom formáte, ktoré na disku nezaberá veľa priestoru, nakoľko tak načítanie internetovej prezentácie prebehne omnoho rýchlejšie), Hlavné menu internetovej prezentácie, typ tohto menu, ako aj jeho umiestnenie, prípadne úrovne vnorenia menu, Farebná schéma webu (opäť záleží na danej organizácii a farebná schéma by sa mala prispôsobiť celkovému imageu firmy. V každom prípade pre používateľa, koncového zákazníka, t.j. návštevníka webovej stránky určite nie sú príjemné na pohľad príliš prepálené kontrastné farebné palety, takže v podnikovom dizajne vo všeobecnosti platí menej je viac voľba jednoduchej farebnej palety v jemnejších odtieňoch základných farieb. Pre návštevníka webovej stránky môže byť za hľadiska marketingu výhodná možnosť voľby s dvoch, prípadne viacerých grafických dizajnov danej prezentácie), Použité fonty pre samotné menu, hlavné nadpisy a bežné, a iné texty obsiahnuté vo webovej stránke, Použité štýly zobrazovania jednotlivých položiek, zoznamov, tabuliek a ďalších objektov, Neoddeliteľnou súčasťou požiadaviek na grafický dizajn je tiež kompatibilita aplikácie s najpoužívanejšími a najmodernejšími webovými prehliadačmi (je potrebné brať do úvahy najpoužívanejšie internetové prehliadače, netreba však pri tom nezabúdať na to, že niekto môže používať nielen najnovšiu verziu prehliadača, ale aj niektorú zo starších, overených, stabilných, možno menej bezpečných, ale pre daného používateľa prívetivejších verzií prehliadačov). 55

56 3.4.2 Predbežný návrh grafického dizajn webovej prezentácie Predbežný dizajnový náčrt webovej prezentácie malého podniku je možné vidieť na nasledujúcom obrázku. Ako je zrejmé, tento náčrt zahŕňa logo internetovej stránky umiestnené na vrchole stránky. Pod logom sú umiestnené jednotlivé položky, medzi ktorými sa bude možné jednotlivo preklikávať a budú slúžiť ako navigácia, t.j. menu celej webovej prezentácie. Priamo pod menu vidíme umiestnenie obsahu nielen celej stránky, ale aj jednotlivých podstránok. To znamená, že ak klikneme na položku číslo 1, v oblasti obsah podstránok sa zobrazí obsah tejto položky. V samotnom závere, tzv. päte internetovej stránky sa bude na základe predbežného návrhu nachádzať prepínač, t.j. dva hypertextové odkazy, prostredníctvom ktorých bude návštevníkovi umožnené ľubovoľne sa prepínať medzi klasickou a mobilnou verziou. Obrázok 3-1: Predbežný grafický návrh webového sídla Zdroj: (vlastné spracovanie) 3.5 Popis realizácie tvorby webového obsahu V tejto kapitole si priblížime celý proces realizácie tvorby webového obsahu internetovej prezentácie malého podniku E-Impulz. Pozn.: Pre potreby lepšej orientácie a čitateľnosti nasledujúceho zdrojového kódu bola riadkovanie a medzery medzi odsekmi v kapitole 3.5 znížené z hodnoty 1,5 na hodnotu 1. 56

57 3.5.1 Popis elementov použitých vo webovej stránke V tejto podkapitole si priblížime jeden z dôležitých elementov našej internetovej prezentácie. Nasledujúci zdrojový kód naprogramovaný v programovacom jazyku JavaScript, umiestnený nižšie, je mimoriadne dôležitou súčasťou našej internetovej prezentácie. Ako vidíme, v tomto zdrojovom kóde je zadefinovaná premenná ismobile, a na základe funkcií, ktoré tvoria jednotlivé mobilné operačné systémy sa testuje, na ktorej mobilnej platforme sa používateľ pokúša načítať a prehliadať internetovú stránku. Každé moderné inteligentné dotykové zariadenie pri prístupe na internet prostredníctvom mobilného internetového prehliadača totiž posiela informácie nielen o tom, z akého prehliadača sa na danú webovú stránku pristupuje, ale posiela aj informácie o danej mobilnej platforme. Na základne nižšie uvedeného kódu teda pri načítaní internetovej stránky resp. dochádza k detekcii skutočnosti, že na tento web používateľ pristupuje napríklad z mobilného telefónu, ktorý ma operačný systém Google Android (bez ohľadu na verziu tohto mobilného operačného systému) a používa na prehliadanie internetových stránok prehliadač Opera Mini. V záverečnej časti programového kódu JavaScriptu vidíme, že ak je splnená akákoľvek z vyššie uvedených podmienok (t.j. ak sa jedná o zariadenie Android, BlackBerry, mobilné zariadenie spoločnosti Apple akýkoľvek model iphone, ipadu, či ipodu, alebo ), návštevník tejto internetovej prezentácie bude automaticky presmerovaný na URL adresu resp. Myslím, že uvedené riešenie je viac než univerzálne, základná funkcionalita by teda mala byť splnená a aj v prípade, že používateľ na webovú stránku pristupuje z akéhokoľvek mobilného telefónu od výrobcov najpoužívanejších značiek akými sú Microsoft, Google a Apple, bez problémov by malo dôjsť k presmerovaniu na mobilnú verziu stránky. Na našu internetovú prezentáciu sme umiestnili prepínač v dolnej časti stránky, prostredníctvom ktorého je možné kedykoľvek sa prepnúť na mobilnú verziu v prípade, že sa tak nestane automaticky. Pozn.: Opisovaný zdrojový kód je dostupný aj v prílohe 1 tejto diplomovej práce, nakoľko je súčasťou zdrojového kódu uvedeného v štvrtej kapitole. 57

58 Obrázok 3-2: Zdrojový kód algoritmu určeného na presmerovanie <script type="text/javascript"> var ismobile = { Android: function() { return navigator.useragent.match(/android/i);, BlackBerry: function() { return navigator.useragent.match(/blackberry/i);, ios: function() { return navigator.useragent.match(/iphone ipad ipod/i);, Opera: function() { return navigator.useragent.match(/opera Mini/i);, Windows: function() { return navigator.useragent.match(/iemobile/i);, any: function() { return (ismobile.android() ismobile.blackberry() ismobile.ios() ismobile.opera() ismobile.windows() ); ; if (ismobile.any() ) { window.location = " </script> Zdroj: (vlastné spracovanie) 58

59 Pre správne fungovanie vyššie uvedeného kódu napísaného prostredníctvom programovacieho jazyka JavaScript je nevyhnutná jeho správna implementácia do HTML zdrojového kódu. V prvej kapitole tejto diplomovej práce sme písali aké základné súčasti má tento programový kód obsahovať. Z nižšie uvedeného kódu je evidentné, že aby JavaScript kód správne fungoval, musí byť umiestnený medzi značkami <head> </head>, inak povedané, programový kód musí byť definovaný v hlavičke webovej stránky. Jedná sa samozrejme o najjednoduchšiu cestu umiestnenia tohto kódu, prirodzene existuje viac možností ako internetovému prehliadaču povedať, aby vykonal všetky súčasti tohto JavaScript kódu. Jedným z nich je napr. umiestnenie do externého súboru s príponou názov_súboru.js. Obrázok 3-3: Umiestnenie zdrojového kódu JavaScript v HTML <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <meta/> <link rel="stylesheet" href="styl.css"> <link rel="shortcut icon" type="image/ico" href="favicon.ico"> <!-- začiatok zdrojového kódu JavaScript --> <script type="text/javascript"> <!-- programový kód JavaScript --> </script> <!-- koniec zdrojového kódu JavaScript --> </head><body> <!-- obsah webovej stránky --> </body> </html> Zdroj: (vlastné spracovanie) 59

60 3.5.2 Analýza návštevnosti internetovej prezentácie Do našej internetovej stránky sme pre potreby prípadnej budúcej analýzy návštevnosti webu využili bezplatné služby webovej aplikácie Google Analytics. Analýza návštevnosti webovej stránky malého podniku E-Impulz tak môže byť v budúcnosti mimoriadne jednoducho a rýchlo zrealizovaná. Aktuálne žiaľ nie je možná analýza, nakoľko webová prezentácia vyššie uvedeného podniku bola na internet umiestnená v apríli 2014, tým pádom zatiaľ nemôže mať nijako zvlášť vysokú návštevnosť. S tým súvisí aj skutočnosť, že vyššie uvedená webová stránka nebola optimalizovaná pre internetové vyhľadávače (t.j. neprebehla SEO optimalizácia) a navyše je umiestnená na bezplatnom webhostingu. Pozn.: Pripomínam, že analýza návštevnosti webovej stránky síce nie je predmetom tejto diplomovej práce, preto sa ňou ani v nasledujúcej časti nebudem podrobnejšie zaoberať, avšak myslím si, že je to v dnešnej dobe mimoriadne dôležitá súčasť procesu tvorby webovej stránky a netreba preto zabúdať na implementáciu akejkoľvek služby, ktorá túto možnosť ponúka. Na základe vyššie uvedeného sme pre prípad budúcej analýzy návštevnosti umiestnili do programového HTML kódu našej webovej stránky nižšie uvedený kód, ktorý bol vygenerovaný prostredníctvom webovej služby Google Analytics. Vidíme, že je v ňom uvedené jedinečné číslo UA , na základe ktorého táto internetová aplikácia jednoznačne identifikuje daného používateľa služby a danú URL adresu. Vďaka tomu je teda možné po prihlásení sa na Google konto analyzovať návštevnosť danej webovej stránky. Pre potreby väčšej prehľadnosti a prípadnej modifikácie sme zvolili externé umiestnenie tohto kódu, ktorý sa nachádza v súbore analyticstracking.php. Do zdrojového kódu programovacieho jazyka HTML sme medzi párový tag <body> </body> umiestnili nižšie uvedený kód napísaný v jazyku PHP. <? php include_once("analyticstracking.php")?> Prirodzene existuje aj iný spôsob zapísania JavaScript kódu, prostredníctvom ktorého funguje služba Google Analytics. Dá sa implementovať rovnakým spôsobom ako kód, ktorý sme opisovali v predchádzajúcej kapitole. 60

61 Obrázok 3-4: Zdrojový kód generovaný službou Google Analytics <script> (function(i,s,o,g,r,a,m){i['googleanalyticsobject']=r;i[r] =i[r] function(){ (i[r].q=i[r].q []).push(arguments),i[r].l=1*new Date();a=s.createElement(o), m=s.getelementsbytagname(o)[0];a.async=1;a.src=g;m.parentn ode.insertbefore(a,m) )(window,document,'script','// ga('create', 'UA ', ' ga('send', 'pageview'); </script> Zdroj: (vlastné spracovanie) 3.6 Webhosting Na začiatok je vhodné definovať pojem webhosting. Webhosting je prenájom priestoru pre webovú prezentáciu na internete. Zákazník vystavuje svoje webové stránky alebo prevádzkuje webové aplikácie na serveri prevádzkovateľa webhostingu. Vo väčšine prípadov za tieto služby zákazníci platia za to prenájom tohto priestoru vo forme pravidelných poplatkov. Väčšina poskytovateľov webhostingu taktiež ponúka prenájom domén. Medzi pojmami webhosting a doména je však rozdiel. V prípade, že sa hovorí o cene za webhosting, je potrebné tieto pojmy rozlišovať a nehovoriť o cene za webhosting ako o cene za poskytovanú doménu. Doména je medzinárodné právo používať nejakú adresu. Za toto právo sa platí registrátorovi (t.j. inému subjektu, akým je prevádzkovateľ webhostingu). Webhosting je v jednoduchosti povedané fakt, že to celé bude fungovať a bude možné poskytovanie takýchto služieb. 61

62 3.6.1 Výber služby Existujú dva druhy webhostingov. Pochopiteľne platené (tzv. free webhotingy) a neplatené (môžeme sa stretnúť s pojmom Premium webhosting, vždy záleží na danej firme ponúkajúcej tieto služby a ich marketingu, na základe ktorého môžu ponúkať voľbu dvoch a viacerých platených webových priestorov s rôznym názvom a vopred danými podmienkami určujúcimi napríklad veľkosť diskového priestoru pre naše súbory). Prirodzene, za paušálne platené (nikdy nejde iba o jedno rázovú platbu) Pre potreby danej internetovej prezentácie malého podniku E-Impulz sme zvolili bezproblémový, pre naše potreby plne funkčný a spoľahlivý free webhosting Testovanie zobrazenia webovej prezentácie Testovanie zobrazenia internetovej stránky malého podniku E-Impulz prebehla na nižšie uvedených internetových prehliadačoch. Vo všetkých týchto internetových prehliadačoch bola otestovaná funkčnosť zobrazenia jednotlivých častí a elementov webovej stránky. Správne zobrazenie bolo otestované na oboch verziách, t.j. na normálnej aj na mobilnej variante. Microsoft Internet Explorer vo verzii 11.0 (rovnako ako v ostatných uvedených internetových prehliadačoch primárne určených na prehliadanie destkopových verzií webových prezentácií neprebehlo k automatickému presmerovaniu a zobrazeniu mobilnej verzie, ale bola bez problémov zobrazená klasická verzia webu), Mozilla Firefox vo verzii 28.0, Google Chrome vo verzii 34.0, Opera vo verzii 12.16, Opera Mobile vo verzii (pri zadaní adresy prebehlo k automatickému presmerovaniu a zobrazeniu mobilnej verzie, testované na mobilnom zariadení Galaxy Gio S5660), Opera Mini 7.5 vo verzii (pri zadaní adresy prebehlo k automatickému presmerovaniu a zobrazeniu mobilnej verzie webu, testované na mobilnom zariadení Galaxy Gio S5660), 62

63 Apple Safari vo verzii Vo všetkých vyššie uvedených internetových prehliadačoch došlo ku korektnému zobrazeniu nielen normálnej (destkopovej), ale aj mobilnej varianty webovej prezentácie malého podniku E-Impulz. 63

64 4 Porovnanie destkopovej a mobilnej verzie webovej stránky Posledná kapitola tejto diplomovej práce sa venuje porovnaniu klasickej (t.j. destkopovej) verzii webovej prezentácie malého podniku E-Impulz a tiež jeho mobilnej verzii. V jednotlivých podkapitolách záverečnej praktickej časti tejto diplomovej práce sa tak pozrieme jednak na zobrazenie na dvoch platformách. Opíšeme si tiež zdrojové kódy vytvorené použitím programovacích jazykov HTML5 a CSS3. Na popis jednotlivých elementov zdrojového kódu oboch verzií webovej prezentácie sa bližšie pozrieme v záverečnej časti tejto diplomovej práce, v štvrtej kapitole, kde si opíšeme väčšinu použitých elementov a zobrazovacích techník. 4.1 Normálna verzia webu V kapitole 4.1 sa pozrieme na zobrazenie vytvoreného webu na počítačovej platforme, a opíšeme si zdrojové kódy HTML5 a CSS Zobrazenie na počítačovej platforme Na nižšie uvedenom obrázku je možné vidieť zobrazenie webovej prezentácie na počítačovej platforme. Výsledné zobrazenie je demonštrované v internetovom prehliadači Internet Explorer vo verzii Obrázok 4-1: Klasické zobrazenie webu na počítačovej platforme (internetový prehliadač Internet Explorer 11.0) Zdroj: (vlastné spracovanie) 64

65 4.1.2 Opis HTML5 zdrojového kódu normálnej verzie webovej stránky V tejto časti diplomovej práce sa nachádza opis jednotlivých elementov programovacieho jazyka HTML5 použitých pri tvorbe webovej prezentácie malého podniku E-Impulz. Z kódu uvedeného v tejto kapitole boli kvôli lepšej čitateľnosti odstránené niektoré časti, ako napríklad obsah samotnej stránky uvedený v párovom tagu <p> </p>. Tento obsah je pre potreby opisu v tejto kapitole nepodstatný. Kvôli obsiahlosti je kompletný zdrojový kód uvedený v prílohe 1. Pozn.: Pre potreby lepšej orientácie a čitateľnosti nasledujúceho zdrojového kódu bola riadkovanie a medzery medzi odsekmi v kapitole znížené z hodnoty 1,5 na hodnotu 1. Ako vidíme na nižšie uvedenom zdrojovom kóde naprogramovanom prostredníctvom jazyka HTML5, webová stránka index.html je definovaná prostredníctvom nepárového tagu <!DOCTYPE html>. V zdrojovom kóde je neuvedené číslo aktuálnej verzie, tak ako tomu bolo v minulosti pri staršej verzii tohto programovacieho jazyka HTML 4.01, čo značí, že sa jedná o najnovšiu, v tomto prípade piatu verziu. Prvý nepárový tag meta definuje aký typ obsahu internetová stránka, čo je v tomto prípade text/html, obsahuje taktiež definíciu toho, aký typ kódovania textu sa na tomto webe používa. V tomto prípade je to UTF-8. Môže sa však jednať aj o kódovanie Windows-1250, Windows-1251, či napríklad ISO Všetko závisí od daného programátora. Druhý nepárový tag meta obsahuje informácie pre roboty internetových vyhľadávačov. Na základe obsahu uvedeného v parametri content by sa mala táto stránka pri zadaní kľúčových slov zobraziť v zozname vyhľadaných webových sídiel. Ďalšie meta tagy obsahujú informácie o autorovi webovej stránky a o popise, ktorý sa zobrazí na karte internetového prehliadača a o použitej jazykovej mutácii. Samotný obsah stránky sa nachádza medzi párovými tagmi <body> </body> a <html> </html>. Je tvorený hlavičkou <header> </header>, v ktorej je umiestnené logo podniku a webovej stránky, samotným menu, ktoré sa nachádza v tagoch <nav> </nav>, a hlavných častí, ktoré tvoria obsah webu, v tomto prípade rozdelené do dvoch častí medzi tagy <section> </section> a <arcticle> </article>. Programový kód webu je zakončení pätou <footer> </footer>, v ktorej je prepínač klasickej a mobilnej verzie. 65

66 Obrázok 4-2: HTML5 zdrojový kód klasickej verzie webu <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html; charset=utf- 8"/> <title>elektrotechnické služby e-impulz</title> <meta name="keywords" content="e-impulz.wz.sk revízie zariadení, spotrebičov, elektrotechnické služby"/> <meta name="author" content="andrej Ševčík"/> <meta name="description" content="e-impulz revízie, elektro"/> <meta http-equiv="content-language" content="sk"/> <link rel="stylesheet" href="styl.css"> <link rel="shortcut icon" type="image/ico" href="favicon.ico"> <script type="text/javascript"></script></head><body> <?php include_once("analyticstracking.php")?> <header> <a href="index.html"><img align="top" src="logo.png"></a> </header> <div id="container"> <nav><!-- menu --></nav> <section> <article> <header> <h1>hlavná stránka e-impulz</h1> </header> <p><!-- obsah --></p> <div id="pata"> <h3>[stránku prehliadate v klasickom zobrazovacom móde]</h3> </div> </article> </section> <footer> <a href="cvindex.html">klasická verzia</a> <a href="m/index.html">mobilná verzia</a> </footer> </div> <div id="podpis"> <h3>podpis</h3></div></body></html> Zdroj: (vlastné spracovanie) 66

67 4.1.3 Opis CSS3 zdrojového kódu normálnej verzie webovej stránky V tejto časti diplomovej práce sa nachádza opis jednotlivých elementov programovacieho jazyka CSS3 použitých pri tvorbe webovej prezentácie malého podniku E-Impulz. Z kódu uvedeného v tejto kapitole boli kvôli lepšej čitateľnosti odstránené niektoré menej podstatné elementy, ako napríklad bližšie vlastnosti jednotlivých prvkov, ktoré obsahuje vytvorená internetová prezentácia podniku. Tento obsah pre potreby opisu v tejto kapitole považujem za nepodstatný. Kvôli obsiahlosti je kompletný zdrojový kód uvedený v prílohe 2. Pozn.: Pre potreby lepšej orientácie a čitateľnosti nasledujúceho zdrojového kódu bola riadkovanie a medzery medzi odsekmi v kapitole znížené z hodnoty 1,5 na hodnotu 1. Ako vidíme na nižšie uvedenom zdrojovom kóde naprogramovanom prostredníctvom jazyka CSS3, použitý štýl sa skladá z niekoľkých vhodne zvolených častí, ktoré budeme v nasledujúcom odseku tejto diplomovej práce opisovať. Definícia vlastností hlavného elementu body internetovej stránky nášho podniku bola vygenerovaná prostredníctvom jednoduchej a ľahko dostupnej služby ktorá je dostupná na internete a je poskytovaná zdarma. Prostredníctvom nej je vytvorený farebný prechod pozadia celej webovej prezentácie. Daný efekt sa dá vytvoriť aj pomerne jednoduchšie a to nasledujúcim spôsobom. Obrázok 4-3: CSS3 zdrojový kód klasickej verzie webu (základný) background: #444; /* pre prehliadače bez podpory CSS*/ background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); /* Safari, Chrome */ background: -moz-linear-gradient(top, #444, #000); /* Firefox 3.6+ */ filter:progid:dximagetransform.microsoft.gradient(startcol orstr='#444444', endcolorstr='#000000'); /* IE */ Zdroj: (vlastné spracovanie) 67

68 V tomto prípade som sa však stretol z nekompatibilitou v prehliadačoch Internet Explorer a Safari, pričom v Mozille Firefox a Google Chrome, či Opera takého riešenie spoľahlivo funguje. Práve preto som sa rozhodol pre spomínané riešenie pomocou jednoduchého generovania omnoho rozsiahlejšieho kódu, ktoré však zaručene funguje vo všetkých typoch internetových prehliadačoch. Ďalšia časť zvoleného kódu popisuje vlastnosti fontu písma, ktoré má daný internetový prehliadač použiť pri zobrazovaní tejto webovej stránky. V tomto prípade sme zvolili dve z najpoužívanejších fontov, ktoré by mali byť obsiahnuté v každom modernom operačnom systéme. Prvým z nich je font Calibri, ktorý sa zvolí ako primárny font, pričom font Arial je považovaný v tomto prípade za sekundárny. To znamená, že sa tento font zvolí, ak prvý font z nejakého dôvodu nie je k dispozícii. Ďalším zaujímavým použitým elementom je margin. Táto vlastnosť určuje šírku vonkajšieho okraja daného prvku, v tomto prípade prvku body. Ten sa na základe parametrov 0px auto bude automaticky prispôsobovať obsahu, ktorý je v ňom obsiahnutý. Elementy border a border-color nám naznačujú, že prvok nebude mať žiadne orámovanie. Prvky a.meno a a.hover.meno sú rozdielne, aj keď obe patria do skupiny s názvom meno. Element bez prívlastku hover definuje ako budú vyzerať hypertextové odkazy na webe. Druhý, s prívlastkom hover definuje vlastnosti tohto elementu v momente, keď nad neho používateľ nadstaví kurzor. Obrázok 4-4: CSS3 zdrojový kód klasickej verzie webu (rozšírený) body {background: rgb(229,229,229); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, rgb(229,229,229) 13%, rgb(32,124,202) 99%, rgb(32,124,202) 100%, rgb(41,137,216) 100%, rgb(30,87,153) 100%); /* FF3.6+ */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#e5e5e5', endcolorstr='#1e5799',gradienttype=0 ); /* IE6-8 */ font-family: Calibri, Arial; margin: 0px auto; max-width: 900px; border: none; border-color: none; a.meno {color: black; text-decoration: none; a:hover.meno { text-decoration: underline; color: blue; Zdroj: (vlastné spracovanie) 68

69 4.2 Mobilná verzia webu V kapitole 4.2 sa pozrieme jednak na zobrazenie vytvorenej internetovej prezentácie na mobilnej platforme, a taktiež si opíšeme jednotlivé zdrojové kódy naprogramované prostredníctvom jazykov HTML5 a CSS Zobrazenie na mobilnej platforme Na nižšie uvedenom obrázku je možné vidieť zobrazenie webovej prezentácie na mobilnej platforme. Výsledné zobrazenie je demonštrované priamo na reálnom mobilnom zariadení Galaxy Gio SS560, pričom bol použitý mobilný internetový prehliadač Opera Mobile vo verzii Obrázok 4-5: Vertikálne a horizontálne zobrazenie mobilnej verzie webu (mobilné zariadenie: Galaxy Gio SS560; prehliadač: Opera Mobile 11.50) Zdroj: (vlastné spracovanie) 69