Prvky inovácie nových jazykov HTML5 a CSS3

Transcription

1 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Katedra kvantitatívnych metód a informatiky Prvky inovácie nových jazykov HTML5 a CSS3 The HTML5 and CSS3 innovations concepts Bakalárska práca Autor: Michal Szabo Informačné technológie Vedúci práce: Mgr. René Klaučo, PhD. Banská Bystrica apríl 2013

2 Prehlásenie Podpísaný Michal Szabo čestne prehlasujem, že bakalársku prácu na tému Prvky inovácie nových jazykov HTML 5 a CSS 3 som vypracoval na základe poznatkov získaných počas štúdia a informácií z dostupnej literatúry uvedenej v práci. Banská Bystrica, dňa 23. januára Michal Szabo

3 Poďakovanie Touto cestou chcem poďakovať všetkým, ktorí mi pri písaní práce pomáhali. Zvlášť chcem poďakovať vedúcemu práce Mgr. René Klaučo, PhD., za jeho čas, odborné rady a pripomienky.

4 ANOTÁCIA SZABO, Michal: Prvky inovácie nových jazykov HTML 5 a CSS3. [Bakalárska práca]. Školiteľ: Mgr. René Klaučo, PhD. Banská Bystrica: Katedra kvantitatívnych metód a informatiky, BIVŠ - zahraničná vysoká škola Banská Bystrica, Predložená bakalárska práca sa zaoberá charakteristikou inovatívnych prvkov jazyka HTML 5, kaskádových štýlov CSS 3 a možnosťami ich využitia v podnikových informačných systémoch. V prvej kapitole bakalárskej práce autor definuje hlavné pojmy zamerané na vývoj webových aplikácií v podnikových informačných systémoch dostupných v rámci intranetu alebo internetu. Druhá kapitola obsahovo na predchádzajúcu úzko nadväzuje a detailne charakterizuje najdôležitejšie inovácie jazyka HTML 5. Tretia kapitola zameraná na kaskádové štýly uvádza nové možnosti súvisiace s využitím CSS 3. Štvrtá kapitola uvádza možnosti a prínosy využitia uvedených technológií v podnikových informačných systémoch. Nasledujúca piata kapitola je zameraná na porovnanie vývoja, možností a funkcionality webových aplikácií s využitím HTML 4.01, CSS 2.1 a HTML 5 a CSS 3. V závere predloženej bakalárskej práce autor uvádza závery a odporúčania pri tvorbe webových aplikácií s využitím uvedených technológií. Kľúčové slová: HTML 5, CSS 3, inovácie, API, klient, internet.

5 ANNOTATION SZABO, Michal: elements of the innovation of new languages, HTML 5 and CSS3. [Bachelor thesis]. Supervisor: Mgr. René Klaučo, PhD. Department of quantitative methods and computer science: Banská Bystrica, Banská Bystrica, BIVŠ-foreign university. Presented to the Bachelor thesis deals with the characteristics of the innovative features of HTML 5, CSS 3 and the possibilities of their use of cascading style sheets in corporate information systems. In the first chapter the author defines the main concepts of undergraduate work focused on the development of Web applications in the enterprise information systems available in the intranet or the Internet. The second chapter describes in detail the content of the previous closely follows and most of HTML 5. The third chapter focuses on the new opportunities related to the use of cascading style sheets (CSS) 3. The fourth chapter presents the options and benefits of the use of technology in business information systems. Following the fifth chapter focuses on the comparison of the development options and functionality of Web applications using HTML 4.01, CSS 2.1 and HTML 5 and CSS 3. At the conclusion of Bachelor thesis the author presents conclusions and recommendations when creating Web applications with the use of these technologies. Keywords: HTML 5, CSS 3, innovation, API, client, internet.

6 OBSAH ÚVOD ZÁKLADNÉ POJMY A TECHNOLÓGIE DYNAMICKÝCH WEBOVÝCH APLIKÁCIÍ Application Programming Interface HTML XHTML CSS JavaScript Document Object Model AJAX jquery Web PRVKY INOVÁCIÍ JAZYKA HTML Charakteristika HTML Inovácie jazyka HTML DOCTYPE Skript Link Layout stránky s použitím HTML Formuláre Multimediálna podpora s použitím HTML

7 3 CSS Zaoblené rohy Rotácia elementov Tieňovanie textu Tieňovanie boxu VYUŽITIE HTLM 5 A CSS 3 V PODNIKOVÝCH INFORMAČNÝCH SYSTÉMOCH Podnikové informačné systémy založené na webovej platforme Porovnanie vlastností reálnej desktopovej a webovej aplikácie Microsoft Word vs. Word WebApp Microsoft Excel vs. Excel Web App Nevýhody využívania Office Web Apps ZÁVER ZOZNAM POUŽITEJ LITERATÚRY ZOZNAM POUŽITÝCH OBRÁZKOV ZOZNAM POUŽITÝCH SKRATIEK... 41

8 ÚVOD Prvá zmienka o návrhu špecifikácie HTML bola zverejnená v roku V týchto rokoch sa začal tento jazyk rozmáhať vo veľkom a postupne vznikali špecifikácie tohto jazyka vo verziách 2.0, 3.2 a 4.0. Koncom roka 1999 bola vydaná nová verzia HTML Táto verzia štandardu pridala nové možnosti a opravovala chyby, ktoré sa vyskytovali v predchádzajúcich špecifikáciách. Po rýchlom vzniku týchto verzií HTML sa vývoj špecifikácie spomalil a vývoj webových štandardov sa zameral na XML a XHTML. Začiatkom roku 2000 sa vývoj špecifikácií zameral na XHTML a v tomto roku vyšla verzia jazyka XHTML vo verzii 1.0, ktorej syntax bol odvodený od jazyka XML a nie SGML ako to bolo v prípade špecifikácie HTML. Medzi tým však jazyk HTML bol vo väčšine webových stránok podporovaný a používaný v najvyššej miere. V roku 2004 založila skupina ľudí organizáciu WHATWG 1, ktorá má veľké zásluhy na návrhu a vývoji špecifikácie jazyka HTML 5. Pracovná skupina WHATWG začala do istej miery navrhovať nové funkcie tejto špecifikácie, ktoré boli zamerané na webové aplikácie. V roku 2008 bolo po prvý krát zverejnený pracovný návrh jazykovej špecifikácie HTML 5 a v roku 2009 pracovný návrh XHTML 2. V tejto chvíli je však dôležité vedieť, že vývoj HTML 5 ešte nie je ukončený. Na tejto špecifikácii sa neustále pracuje a vývojári sa snažia neustále dopĺňať nové prvky, pomocou ktorých nám uľahčia prácu pri tvorbe webových aplikácií (DOMES. 2008). Predložená bakalárska práca sa zaoberá problematikou HTML 5 a CSS 3 v kontexte možností tvorby moderného, interaktívneho a dynamicky generovaného používateľského rozhrania podnikových informačných systémov. 1 WHATWG - The Web Hypertext Application Technology Working Group 9

9 1 ZÁKLADNÉ POJMY A TECHNOLÓGIE DYNAMICKÝCH WEBOVÝCH APLIKÁCIÍ Charakteristikou základných pojmov a najmodernejšími technológiami používanými pre vývoj podnikových informačných systémov čiastočne alebo v plnej miere vo forme dynamických webových aplikácií sa zaoberá nasledujúca kapitola bakalárskej práce. 1.1 Application Programming Interface Najdôležitejším prvkom pre vývoj webových aplikácií je rozhranie označované skratkou API 2. Ide o množinu tried, funkcií a procedúr knižnice alebo iného programu, ktoré programátor využíva pri tvorbe aplikácií. Z pohľadu objektovo orientovaného programovania je manipulácia s API veľmi podobná ako manipulácia s triedou. Rozhranie dostane požiadavky, ktoré spracuje a na základe požiadavky vráti výsledok. Definícia API spravidla zahŕňa požiadavky, akým spôsobom jednotlivé funkcie API volať, aké dátové štruktúry a triedy API využíva alebo aký komunikačný protokol používa. Web API je rozhranie API určené k využívaniu predovšetkým prostredníctvom internetu. Jeho procedúry sú volané prostredníctvom štandardizovaných protokolov (HOGAN, 2011). 1.2 HTML HTML 3 je základný značkovací jazyk, ktorý je určený pre tvorbu webových stránok a webových aplikácií, ktoré môžeme zobrazovať vo webovom prehliadači a ktoré môžu byť dopĺňané rôznymi rozšíreniami v podobe kaskádových štýlov alebo JavaScriptu a rôznymi ďalšími serverovými a klientskými skriptami, ktoré sú používané (PHP 4, ASP 5, AJAX 6 ). Pomocou jazyka HTML môžeme vytvárať webové stránky, ktoré budú obsahovať text, hypertextové odkazy, multimédiá, formuláre a iný obsah. Označenie značkovací jazyk sa obecne používa pre HTML, ide teda formálne definovaný jazyk, ktorý má zavedenú množinu špeciálnych symbolov (značiek, tagov). Zdrojový kód HTML býva obvykle reprezentovaný priamo textovým súborom vo formáte ASCII 7 alebo 2 API Application Programming Interface 3 HTML Hypertext Markup Language 4 PHP Hypertext Preprocessor 5 ASP Active Server Pages 6 AJAX Asynchronous JavaScript and XML 7 ASCII American Standard Code for Indormation Interchange 10

10 môže byť priamo generovaný serverovým skriptom. V prípade diakritiky býva často používané kódovanie UTF-8 8 (LUBBERS et al, 2011). Pomocou HTML zachytávame štruktúru textu, pridávame objekty, s ktorými môžeme pridávať na webové stránky napríklad multimédia ako sú audio, video, tvorba nadpisov, zoznamov, odkazov a ďalšie. Tvorbu štruktúry textu alebo multimédií, ktoré sú vkladané do stránky sa vytvárajú pomocou značiek, ktoré sa nazývajú tagy. Nachádzajú sa v lomených zátvorkách <tag>. Každý vytvorený tag musí mať svoju ukončovaciu značku, ktorá pozostáva pridaním znaku / do hranatých zátvoriek pred tag napr.: </tag>. Pre všetky druhy textu fungoval jazyk HTML výborne, ale postupom času chceli webový dizajnéri začleniť do svojich webových stránok aj grafiku, čo spôsobovalo odlišnosti zobrazenia v klientskych aplikáciách webových prehliadačoch. Konkrétnym príkladom môže byť predovšetkým začlenenie novej značky <img>, pomocou ktorej webový dizajnéri načítavajú grafické súbory, ktoré sú zvyčajne uložené na serveri (LUBBERS et al, 2011). 1.3 XHTML XHTML 9 je univerzálny značkovací jazyk, ktorý je tvorený pomocou XML 10, pretože vo svojej funkčnosti je takmer rovnaký ako HTML a základná množina používaných značiek je rovnaká. XHTML na rozdiel od značkovacieho jazyka HTML netoleruje chyby. Ak v HTML vytvoríme text, ktorý vložíme do odstavca <p>, tak ukončovaciu značku </p> môžeme vynechať. Ale v prípade použitia jazyka XHTML je vynechanie ukončovacej značky považované za chybu (PFEIFFER, 2011). Jazyk HTML je vo všeobecnosti považovaný za voľný čo znamená, že prípadné chyby sú prehliadačmi opravované alebo ignorované na rozdiel od XHTML, kde je tento značkovací jazyk považovaný za veľmi striktný a prísny, ktorý sa snaží na každú chybu upozorniť a v takomto prípade sa dokument nezobrazí. Medzi najdôležitejšie rozdiely medzi značkovacími jazykmi HTML a XHTML patria: jednotlivé tagy a atribúty sa musia písať malým písmenom, každý párový tag musí byť ukončený, nepárové tagy musia mať na konci ukončenie napríklad pri tagu br: />, v každom dokumente musí byť deklarácia DOCTYPE + XML (PFEIFFER, 2011). 8 UTF-8 8-bitový Unicode Transformation Format 9 XHTML Extensible Hypertext Markup Language 10 XML extensible Markup Language 11

11 1.4 CSS CSS 11 bolo prvý krát uvedené spoločne so značkovacím jazykom HTML 4.0. Základnou motiváciou pre tvorbu webových stránok s použitím CSS bolo oddelenie obsahovej časti webových stránok od vzhľadu stránky. Za pomoci HTML si vytvárame vlastný požadovaný obsah stránky, ktorého vlastnosti a formátovanie upravujeme najčastejšie s použitím kaskádových štýlov CSS (HAUSER et al, 2006). CSS je jazyk, pomocou ktorého je možné elementom značkovacieho jazyka (HTML, XHTML, XML a ďalším) priraďovať príslušné vlastnosti. Súbory šablóny štýlov majú príponu.css. Použité štýly sa uvádzajú do hlavičky stránky HTML, do externého súboru alebo ako riadkový štýl do značiek (HAUSER et al, 2006 s.831). CSS nám umožňuje jednoducho pridávať každému prvku v HTML vlastnosti, pomocou ktorých môžeme meniť vzhľad stránky, jeho spôsob zobrazenia, umiestnenie a podobne. Ďalšou možnosťou ktorú môžeme zadefinovať pomocou CSS je označenie prvkov stánky do tried a identifikátorov, ktoré sa nachádzajú v HTML dokumente. Jednou zo zvláštností CSS je ich možnosť kombinácie zápisu štýlov. Zápisy štýlov môžeme vytvárať v hlavičke stránky, v externom súbore alebo priamo v danom elemente pomocou tagu style (HAUSER et al, 2006). CSS môžeme využívať k formátovaniu obsahu dokumentu HTML, XHTML a XML. Formátovanie webových stránok, ktoré sú dostupné pomocou atribútov v HTML, nám CSS do značnej miery rozširuje o ďalšie možnosti formátovania webových stránok. Oproti tomu nám CSS dáva možnosť presne zadefinovať jednotlivým elementom vzhľad, alebo môžeme navrhnúť vzhľad pre celý dokument. Týmto spôsobom môžeme pomocou štýlov určiť odlišné formátovanie pre výskyt určitého elementu a zabránime tak veľkému množstvu opakujúceho sa kódu. Kód sa stane čitateľnejší. Pri zmenách napríklad veľkosti písma každého elementu v HTML to bude za pomoci CSS otázkou niekoľkých sekúnd (HAUSER et al, 2006). 1.5 JavaScript Programovací jazyk JavaScript vytvorila koncom minulého storočia spoločnosť Netscape. Postupom času spoločnosť Netscape prinášala na trh nové verzie svojho prehliadača stránok Netscape Navigator a súčasne s ním boli publikované aj nové verzie 11 CSS Cascading StyleSheets 12

12 JavaScriptu, ktoré samozrejme tvorili súčasť tohto prehliadača. Výrazné zmeny vo vývoji JavaScriptu nastali v období, keď sa Microsoft rozhodol, že vstúpi na pole internetových prehliadačov. Prvé verzie prehliadača od Microsoftu neboli úspešné. Dôvodom ich začiatočných neúspechov bola nedostatočná podpora HTML a absencia podpory JavaScriptu. Microsoft sa však nevzdával a z licenčných dôvodov vytvoril vlastnú odrodu JavaScriptu, ktorá sa volala JScript. Ako vznikali jednotlivé verzie prehliadačov od oboch spoločností, vznikali aj nekompatibilné implementácie tohto jazyka. Medzinárodná priemyselná asociácia pre štandardizáciu ECMA 12 začala vydávať špecifikácie jazyka ECMA , ktoré zlúčili implementáciu jazyka JavaScript v internetových prehliadačoch. Súčasný JavaScript (JS 14 ) môžeme všeobecne definovať ako komplementárny skriptovací jazyk, ktorý pracuje na strane klienta. Základom jeho fungovania je štruktúra dokumentu DOM 15. JavaScript umožňuje prijímať a odosielať dáta medzi serverom a webovou aplikáciou bez nutnosti načítavania celej stránky. V porovnaní s ostatnými skriptovacími jazykmi (napr. PHP 16 ) je JS odlišný hlavne syntaxou, používa dot notáciu a jeho fungovanie je založené predovšetkým na udalostiach, napríklad OnClick alebo OnChange (SUEHRING, 2008). Výhody použitia JavaScriptu pri tvorbe webových aplikácií: interpretovaný nemusí sa kompilovať, objektový využíva objekty prehliadača a zabudované objekty, závislý na prehliadači funguje vo väčšine prehliadačov, case-senzitívny záleží na veľkosti písmen v zápise, syntax podobná jazykom C, Java a pod (ZAKAS, 2009). Nevýhody použitia JavaScriptu pri tvorbe webových aplikácií: používateľ môže JavaScript zakázať, existujú rôzne verzie jazyka aj prehliadačov, čo vedie k častým chybám, nedokáže pristupovať k súborom (okrem cookies) ani k žiadnym systémovým objektom, nedokáže ukladať dáta (okrem cookies) (ZAKAS, 2009). 12 ECMA European Computer Manufacturers Association 13 ECMA JS JavaScript 15 DOM Document Object Model 16 PHP Hypertext Preprocessor 13

13 1.6 Document Object Model DOM predstavuje objektovú, resp. stromovú štruktúru XHTML 17, resp. HTML 18 dokumentu. W3C 19 popisuje DOM ako na platforme a jazyku nezávislé rozhranie umožňujúce programom a skriptom dynamicky pristupovať a aktualizovať obsah, štruktúru a štýly dokumentu (JURKOVIC, 2011). Document Object Model je popis HTML alebo XML dokumentu v objektovo orientovanom svete. Za pomoci Document Object Modelu môžu vývojári aplikácií API, pristupovať k dokumentu a modifikovať všetky jeho logické časti, napríklad obsah alebo štruktúru. Hlavnou funkciou návrhu Document Object Model je umožniť prístup k jednotlivým elementom HTML stránky. Ako je možné k elementom pristupovať, ovplyvňovať a akým spôsobom môžeme meniť ich vlastnosti, záleží vo vysokej miere na použitom prehliadači webových stránok. Termín objektový model dokumentu bol vybraný preto, že ide o objektový model v tradičnom zmysle objektovo orientovaného návrhu dokumenty sú modelované s použitím objektov, pričom model nezahŕňa len štruktúru, ale tak tiež správanie dokumentu a objektov, z ktorých sa skladá (SUEHRING, 2008). 1.7 AJAX Ajax 20 nie je novou technológiou, ale ide skôr o nadstavbu existujúcich technológií. Jedná sa o technológiu, ktorá dodala webu inteligenciu a silu. Pod touto skratkou sa skrývajú hneď dve dôležité technológie a to JavaScript a XML 21. XML je značkovací programovací jazyk a je podobný ako HTML, ale univerzálnejší. Nie je navrhnutý na intenzívnu komunikáciu medzi serverom a klientom, pretože pri každej požiadavke na komunikáciu sa musí znovu nadväzovať spojenie. Výhodou používania Ajaxu oproti bežným webovým aplikáciám je rýchlosť načítavania aplikácie. Statické webové aplikácie bez použitia JavaScriptu alebo Ajaxu sú načítavané pomaly, pretože pri každej zmene načítavajú celý obsah webstránky. Dynamické webové aplikácie s podporou Ajaxu umožňujú podobne ako v prípade JavaScriptu načítať ľubovoľnú časť webstránky samostatne, vďaka čomu môžu byť webové aplikácie podstatne rýchlejšie a práca s nimi výrazne komfortnejšia. Prenáša sa menej informácií, čím sa šetrí množstvo 17 XHTML Extensible Hypertext Markup Language 18 HTML Hypertext Markup Language 19 W3C - World Wide Web Consortium 20 Ajax Asynchronous JavaScript and XML 21 XML extensible Markup Language 14

14 prenesených dát a čas. Webové aplikácie využívajúce Ajax sa správajú inak, ako je na webe zvykom, z čoho pramenia rôzne problémy. Postupné načítavanie a zmena obsahu stránky pomocou JavaScriptu nemá vplyv na adresu stránky resp. adresa zostáva nezmenená. Návštevníci stránok tak nemôžu jednoducho skopírovať odkaz, ktorého navštívením by sa vrátili k rovnakému obsahu. Nemôžu si teda odkaz zaradiť medzi obľúbené záložky alebo poslať svojmu známemu. Keď sa nemení adresa stránky, nevytvára sa ani história v pamäti prehliadača, s čím súvisí nefunkčné tlačidlo Späť. S dynamicky generovaným obsahom a nemeniacou sa adresou nemajú problémy len ľudia, ale aj stroje - vyhľadávače. Ak sa obsah mení JavaScriptom, vyhľadávací robot sa k takémuto obsahu nedostane. Indexuje len prvú stránku, ktorú mu server poskytne. Pri niektorých aplikáciách to však vôbec nemusí byť prekážkou, vo väčšine prípadov však ide o pomerne veľký problém - nezindexovaná stránka akoby neexistovala. Aj to je dôvod, prečo písať stránky s Ajaxom tak, aby fungovali aj bez JavaScriptu. Medzi menej spomínané problémy patrí neuvoľňovanie pamäte pri programovaní v JavaScripte. Pri jednoduchom použití JavaScriptu to neprekáža, avšak pri intenzívnom a dlhodobom použití typickom pre Ajax aplikácie sa však v dôsledku neuvoľňovania pamäte počítač postupne spomaľuje, pričom po niekoľkých hodinách pomôže už len reštart webového prehliadača. Využívanie Ajaxu vo všeobecnosti znamená častejšiu komunikáciu medzi klientom a serverom, pričom odpovede servera na požiadavky klienta sú pomerne krátke. Pokiaľ je aplikácia využívajúca Ajax nesprávne navrhnutá, môže to znamenať zvýšenie záťaže, zahltenie servera požiadavkami a jeho následnú nedostupnosť. Dynamické webové aplikácie sú vytvárané predovšetkým ako multiplatformové, teda musia spoľahlivo fungovať nie len v rôznych webových prehliadačoch, ale musia byť prispôsobené aj odlišnostiam jednotlivých platforiem. Vytvorenie multiplatformovej webovej aplikácie je teda veľmi zložitý a komplikovaný proces. A aby to bolo ešte zložitejšie, mnoho používateľov používa webové prehliadače, ktoré JavaScript a teda ani Ajax nepodporujú alebo ho majú z dôvodu bezpečnosti zakázaný. V takomto prípade aplikácia Ajax založená na JavaScripte nebude fungovať a vývojár by mal poskytnúť plne funkčnú alternatívu fungujúcu bez JavaScriptu (HOLZNER, 2007). 1.8 jquery jquery je rýchla a efektívna JavaScriptová knižnica, ktorá zjednodušuje správu udalostí, manipuláciu s objektmi DOM, tvorbu animácií a použitie Ajaxu pre rýchly vývoj 15

15 dynamických webových aplikácií s prvkami RIA 22. Knižnicu jquery prvýkrát predstavil John Resig v roku Knižnica jquery je šírená v rámci licencií GPL a MIT čo znamená, že jej použitie v nekomerčných projektoch je bezplatné a môžeme si ju stiahnuť jquery súbor cez ( ktorý si vložíme do zdrojového kódu, alebo si ho môžeme načítať priamo z webovej stránky jquery. Sila knižnice jquery spočíva predovšetkým v efektívnom výbere jednotlivých elementov v rámci modelu DOM a schopnosti modifikovať ich obsah, vlastnosti alebo CSS štýly. Najzaujímavejšou časťou knižnice jquery pre používateľov je široké množstvo efektov. Nemusíme vytvárať zložité celky zdrojového kódu v JavaScripte a trápiť sa s jeho ladením tak, aby fungoval správne vo všetkých webových prehliadačoch, ale s použitím knižnice jquery vytvoríme jednoduchým spôsobom požadovaný efekt. Prostredníctvom tejto knižnice môžeme vytvárať rôzne animácie, čím sa môžeme takmer v plnej miere vyhnúť používaniu technológie Macromedia Flash 23, príp. Microsoft Silverlight 24. V tejto súvislosti máme taktiež k dispozícii možnosť výmeny údajov medzi webovou aplikáciou a animovaným objektom, čo je v prípade použitia objektu Macromedia Flash veľmi náročné (MARGORÍN, 2011). 1.9 Web 2.0 Termín Web 2.0 sa v tlači začal objavovať už na konci 90. rokov, kedy veľa autorov cítilo potrebu vyjadriť, že vývoj webu preskočil alebo už čoskoro preskočí používaný míľnik. V roku 2004 na konferencii o budúcnosti webu pod názvom Web 2.0 Conference Tim O`Reily charakterizoval pojem Web 2.0 ako revolúciu podnikania v počítačovom priemysle spôsobenú presunom k chápaniu webu ako platformy a pokus porozumieť pravidlám vedúcim k úspechu na tejto novej platforme. Kľúčovým medzi týmito pravidlami je tvorba aplikácií, ktoré budú za pomoci sieťového efektu s pribúdajúcim počtom používateľov stále lepšie (BATTELLE`S, ). Web 2.0 je dnes synonymom pre širší rámec internetových služieb, ktoré do značnej miery stavajú na aktivite a spoluúčasti koncového používateľa. Pravdepodobne najčastejšie sa vyskytujúca definícia, ktorú sformuloval Musser a O`Reilly hovorí o Webe 2.0 ako o súbore ekonomických, sociálnych, a technologických trendov, ktoré spoločne tvoria základ 22 RIA Rich Internet Application 23 Macromedia Flash softvér pre prehliadanie animácií vytvorený spoločnosťou Adobe 24 Microsoft Silverlight aplikačná platforma vytvorená spoločnosťou Microsoft pre vývoj a prehrávanie multimediálnych aplikácií 16

16 ďalšej generácie internetu zdokonaleného, osobitného média, pre ktorý je charakteristické zapojenie používateľov, otvorenosť a sieťový efekt. (O`REILLY, ). Obrázok 1 Web 2.0 vs Web 1.0 Zdroj: Web 2.0 je súhrnný názov internetových služieb, ktoré sú zakladané predovšetkým na spoločenstve - používatelia si spoločne pripravujú obsah alebo si zdieľajú informácie. Typický výraz pre Web 2.0 je sharing (zdieľanie), používatelia si môžu zdieľať informácie, ktoré sa takto stanú dostupnými. Základné znaky charakterizujúce Web 2.0 (KAUSHIK, 2011): používateľ je vtiahnutý do tvorby obsahu, otvorená komunikácia a zdieľanie, webové stránky sa z izolovaných skladov informácií menia na vzájomne dynamicky prepojené zdroje, Ajax umožní dynamicky pridávať dáta na stránku. 17

17 2 PRVKY INOVÁCIÍ JAZYKA HTML Charakteristika HTML 5 HTML 5 je viac, ako len novým štandardom konzorcia W3C a jeho pracovnými skupinami. Ide o novú generáciu každodenne používaných technológií a sú tu preto, aby nám pomáhali tvoriť kvalitnejšie, modernejšie a interaktívnejšie webové aplikácie. Vývojárom, ktorí používajú HTML 5 sa dostávajú do rúk nové nástroje pre tvorbu prepracovanejšieho používateľského rozhrania s inovovanými možnosťami komunikácie, multitaskingu, zdieľania ako aj modernizovanej podpory multimédií. Použitie HTML 5 umožňuje vytvárať kvalitnejšie ovládacie prvky používateľského rozhrania. Náročným spôsobom sme museli používať JavaScript a CSS pre vytvorenie posuvných jazdcov, kalendárov pre výber dát a kvapkadiel pre výber farieb. Všetky tieto prvky sú teraz reálne definované elementmi HTML 5, podobne ako roletové ponuky, zaškrtávacie políčka a prepínače. Pre vylepšenie použiteľnosti bez nutnosti spoliehať sa na knižnicu JavaScriptu tu existuje ešte jedna výhoda a to je vylepšená prístupnosť. Čítačky obrazovky a iné prehliadače tieto ovládacie prvky implementujú zaužívanými spôsobmi, takže webové stránky budú ľahko ovládateľné aj ľuďmi so zrakovými obmedzeniami (HOGAN, 2011). Čítačky obrazovky interpretujú text a zodpovedajúci zdrojový kód za účelom rozpoznania významu jednotlivých elementov a ich pretransformovania do zvukového formátu. Podstatou je sprístupnenie obsahu na webe pre používateľov s čiastočným alebo úplným zrakovým postihnutím (HOGAN, 2011 s.103). Moderné webové aplikácie, ktoré sú tvorené za pomoci štandardu RIA 25 umožňujú používateľovi sprístupňovať bohatšiu interakciu s aplikáciami. Všetky dáta, ktoré sú prenášané prostredníctvom RIA sú umiestnené vo webových aplikáciách na strane servera. Komunikácia je vykonávaná v HTTP webových aplikáciách, ktorú vyvoláva klient, ale riadenie je ponechávané na strane servera. Vykresľovanie stránok v dynamických aplikáciách reaguje na každú používateľskú reakciu. V RIA je používateľská interakcia oddelená od vykresľovania stránok a možnosti aktualizácie obsahu rozhrania sú bohatšie (TUMA, 2012). 25 RIA Rich Internet Application 18

18 HTML 5 je nová generácia jazyka HTML prinášajúca celú sadu nových elementov, ktoré významne zjednodušujú štruktúru stránok. Medzi najvýraznejšie novinky patria: API pre kreslenie grafiky v okne prehliadača, nové elementy <audio> a <video>, prostredníctvom ktorých môžeme jednoducho prehrávať audio vizuálne súbory v prehliadači. Medzi ďalšie novinky, ktoré spomenieme, je napríklad nový element <header> (v preklade hlavička), ktorý slúži na označenie hlavičky stránky, ďalej nový tag <nav>, je vytvorený za účelom umiestnenia navigačných prvkov stránky. Zaujímavou novinkou, ktorá sa objavila v špecifikácií HTML 5 je atribút ping, ktorý bude fungovať pre elementy <a> a <area>. Tento atribút bude obsahovať vlastný zoznam URL adries, ktoré budú pingnuté v prípade kliknutia na odkaz, ktorý sa nachádza na webovej stránke (HOGAN, 2011). 2.2 Inovácie jazyka HTML DOCTYPE V súlade so zásadou, ktorou je jednoduchosť, došlo k výraznému zjednodušeniu elementu DOCTYPE webových stránok. Pozrime sa na nasledujúcu deklaráciu, ktorá sa vyskytovala vo verzii HTML4: Obrázok 2 DOCTYPE v HTML 4 Zdroj: vlastný <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Kto si dokáže takúto deklaráciu DOCTYPE zapamätať? Ja osobne určite nie. Vždy som len skopíroval túto zdĺhavú deklaráciu DOCTYPE a vložil som ju do stránky s pochybnosťami, či sa jedná o správnu deklaráciu. HTML 5 tento problém zdĺhavej deklarácie vyriešil elegantným spôsobom: Obrázok 3 DOCTYPE v HTML 5 <!DOCTYPE html> Zdroj: vlastná tvorba Tak táto deklarácia DOCTYPE sa už zapamätať dá. Rovnako ako pri DOCTYPE došlo tiež k zjednodušeniu a skráteniu deklarácie znakovej sady: 19

19 Obrázok 4 Deklarácia meta Pôvodná deklarácia použitej znakovej sady <meta http-equiv= Content-Type content= text/html ; charset=utf-8> bola skrátená: <meta charset= utf-8 > Zdroj: vlastný Skript Rovnako ako zápis elementu DOCTYPE aj syntax pre zápis skriptu sa dočkal istého zjednodušenia. V HTML 5 nie je nutné zapisovať atribút type, ktorý prehliadače nepotrebujú, pretože dokážu tento atribút rozpoznať (HOGAN, 2011). Obrázok 5 Skript <script src="javascript.js"></script> Zdroj: vlastný Link Pre element link sme sa dočkali ďalšieho zjednodušenia. Tento element sa najčastejšie používa, ak chceme načítavať externé súbory napríklad štýly (HOGAN, 2011). Obrázok 6 Link Zdroj: vlastný <link rel="stylesheet" href="style.css"> Layout stránky s použitím HTML 5 V HTML5 sa nachádza mnoho nových elementov, ktoré rozširujú túto verziu o ďalšie možnosti, ktoré neboli v predchádzajúcich verziách dostupné. Väčšina týchto elementov slúži hlavne na zlepšenie sémantiky dokumentu, ale nájdu sa tu aj také, ktoré prinášajú úplne novú funkcionalitu. Elementy sú názvami, ktoré identifikujú a rozdeľujú rôzne časti webovej stránky v zmysle: Táto časť webovej stránky je hlavička, odstavec alebo tu sa nachádza dôležitá informácia. Niektoré elementy môžu mať jeden alebo niekoľko parametrov, ktoré popisujú ich účel a obsah elementu. Elementy obsahujú text alebo aj ďalšie vnorené elementy alebo v niektorých prípadoch môžu byť aj prázdne. 20

20 Obrázok 7 Vzor elementu <element>obsah elementu</ element> Zdroj: vlastný Konkrétne ide o elementy <header>, <nav>, <section>, <article>, <aside> a <footer>, ktoré nahrádzajú používané <div id= header >, <div id= nav >a veľa ďalších. Sémantické tagy nie sú len nahradením aktuálnych tagov <div>, ale ich zavedenie má svoj zmysel a ďalší význam. Webové prehliadače pracujú s dokumentmi tak, že analyzujú ich obsah. Táto analýza môže byť nepresná, ale pokiaľ bude prehliadač vedieť, aký je obsah menu, aký je obsah článku a čo je reklama, ktorá s obsahom webu priamo nesúvisí, dá sa značným spôsobom zvýšiť efektívnosť jeho vyhľadávania (HOGAN, 2011). Záhlavie môže obsahovať všetky možné typy obsahu, od loga spoločnosti až po vyhľadávacie pole napr.: Obrázok 8 Záhlavie stránky Zdroj: vlastný <header id="stranka_zahlavie"> <h1>testovacia stranka </h1> </header> Na stránke nie je počet záhlaví obmedzený na jediné. Každá jednotlivá sekcia stránky alebo článku môže obsahovať svoje vlastné záhlavie a preto môžeme používať atribút typu id s jedinečným názvom, ktorý nám slúži na odlíšenie od iných elementov (HOGAN, 2011). Jedinečný identifikátor nám uľahčuje štýlovanie elementov pomocou CSS alebo hľadanie elementov pomocou JavaScriptu. Element <footer>, definuje zapätie dokumentu alebo danej časti. Na webových stránkach sa obvykle nachádzajú informácie o autorských právach, o majiteľovi webu a iné. Špecifikácia hovorí, že v dokumente môžeme mať viacero zapätí, takže to znamená, že môžeme zapätie používať tiež v článkoch nášho blogu. Ako príklad zadefinujeme zápätie celej stránky. Pretože môžeme mať viac, ako jedno zapätie, pridelíme mu indikátor podobne, ako v prípade záhlavia (HOGAN, 2011): Obrázok 9 Zapätie stránky Zdroj: vlastný <footer id="stranka_zapatie"> <p> 2012 Testovacia stranka</p> </footer> Toto zapätie jednoducho obsahuje dátum copyrightu avšak podobne, ako v prípade záhlavia, aj zápätia môžu obsahovať rôzne typy vnorených elementov. Podobná situácia platí v prípade navigácie. Element <nav> by mal podľa špecifikácie označovať hlavnú ponuku. 21

21 Navigáciu však taktiež môžeme použiť v rámci jednej sekcie alebo článku. Do záhlavia nášho dokumentu pridáme časť s navigáciou: Obrázok 10 Navigácia v záhlaví stránky <header id="stranka_zahlavie"> <h1> Testovacia stranka </h1> <nav> <ul> <li><a href="/">domovska stranka </a></li> <li><a href="/">archiv </a></li> <li><a href="/">kontakt </a></li> </ul> </nav> </header> Zdroj: vlastný Podobne môžeme postupovať v prípade zápätia s použitím elementu footer : Obrázok 11 Navigácia v zapätí stránky Zdroj: vlastný <footer id="stranka_zapatie"> <p> Testovacia stranka </p> <nav> <ul> <li><a href="domov.html">domovska stranka </a></li> <li><a href="podmienky.html">podmienky </a></li> <li><a href="onas.html">o nas</a></li> </ul> </nav> </footer> Vzhľad obidvoch panelov môžeme zmeniť pomocou CSS, prostredníctvom ktorého môže byť definované, ako má navigačná lišta vyzerať. Cieľom týchto nových HTML elementov je však charakterizovať obsah a nie vzhľad (HOGAN, 2011) Formuláre Formuláre V HTML5 sa snažia o rozvinutie už existujúcich formulárov v HTML, ktoré ponúkajú väčšie množstvo ovládacích prvkov a riešenie praktických obmedzení, s ktorými sme sa stretávali. Napriek tomu, že špecifikácia uvádza detaily o vlastnostiach elementov, ako je napríklad prvok pre výber farby alebo dát, zadávanie čísla alebo ovej adresy, špecifikácia už nestanovuje, ako by mali prehliadače tieto elementy zobrazovať koncovému používateľovi. Prehliadače tak môžu vzájomne súperiť v nových a inovatívnych spôsoboch interakcie s používateľom. Medzi nové typy atribútov vo formulároch patria: 22

22 tel, , url, search, range (LUBBERS et al, 2011). K novým atribútom môžeme zaradiť placeholder, ktorý sa nachádza vo vstupnom poli, ak používateľ nezadá hodnotu. Ak chceme tento atribút použiť, jednoducho ho pridáme do pola pre zadávanie textu, ako je základné textové pole alebo typy ako, number, url a ďalšie (LUBBERS et al, 2011). Obrázok 12 Placeholder Zdroj: vlastný <lable> Bezec: <input name="meno" placeholder="meno a priezvisko"> Atribút autofocus umožňuje určiť element formulára, ktorý má získať fokus hneď potom, čo sa stránka načíta. Tento atribút by mal mať nastavený len jeden element v rámci stránky. Ak je tento atribút špecifikovaný pre viacej elementov, to znamená že správanie nie je definované. Ak máme automaticky nastavený fokus na ovládacom prvku, ako je napríklad vyhľadávacie pole, jednoducho nastavíme elementu (len tomuto elementu), atribút autofocus (LUBBERS et al, 2011). Obrázok 13 Autofocus Zdroj: vlastný <input type="search" name="auto" autofocus> Multimediálna podpora s použitím HTML 5 Ľudia sa už aj v minulosti snažili na webových stránkach používať audio a video resp. multimédiá. Pre zaradenie multimédií do svojho webu bol často používaný element embed, ktorý sa ale nikdy nestal štandardom a postupne bol nahradený elementom object, ktorý je súčasťou štandardov vydaných W3C. Pre prehrávanie multimédií používatelia museli mať vo svojich prehliadačoch nainštalované potrebné zásuvné moduly predovšetkým Macromedia Flash. S prehrávačom Macromedia Flash Player 8 predstaveným v roku 2005 sa objavil pokročilý kodek videa VP6 od firmy On2, podpora alfa priehľadnosti vo videách, či pokročilý importér videa. Flash sa zatiaľ pomocou svojich animovaných a interaktívnych schopností stal najdôležitejším zásuvným modulom pre poskytovanie bohato vybavených internetových aplikácií, čo viedlo k tomu, že si ho veľa používateľov nainštalovalo v rámci svojho systému. Flash tak začal byť vhodným riešením úloh, ako publikovať video on-line. Od prvej zmienky asi v roku 2005, že by bolo vhodné mať v HTML5 prvok <video>, cez prvú skúšobnú implementáciu vo februári 2007, cez prvý prehliadač s podporou prvku <video> v novembri 2007 (prehliadač Safari), až do okamihu, kedy sa v marci 2010 prostredníctvom svojej vývojovej verzie pridal aj Internet Explorer od 23

23 Microsoftu, uplynulo len päť rokov. Tento razantný vývoj bol možný z toho dôvodu, že už tu boli desiatky rokov skúseností s rozličnými mediálnymi zásuvnými modulmi a inými mediálnymi frameworkami 26 na webe (QuickTime, Microsoft Windows Media, RealNetworks, RealMedia, ISO/MPEG, Adobe Media, Microsoft Silverlight a pod..). Multimédiá na internete sa stali postupne na veľmi populárnymi a v tejto súvislosti sme sa čoraz častejšie mohli stretávať s rôznymi multimediálnymi formátmi napr.: RealPlayer, Windows Media Video, QuickTime a pod., ktoré boli prehrávané pomocou zásuvných modulov vo webovom prehliadači. Tvorcovia špecifikácie HTML 5 sa snažia o priamu podporu štandardných audio a video formátov priamo v prehliadačoch, bez použitia zásuvných modulov (HOGAN, 2011). Obrázok 14 Deklarácia audio elementu v HTML 5 <audio control src="hudba.ogg" type= audio/ogg > </audio> Zdroj: vlastný Uvedená deklarácia elementu <audio> nám hovorí, že dokument HTML a aj zvukový súbor sa nachádzajú v rovnakej zložke. Za pomoci uvedeného tagu sa v prehliadači zobrazí jednoduchý ovládací panel s bežcom, pomocou ktorého môžeme prehrávať audio súbor. Pri kliknutí na tlačidlo prehrávania sa skladba začína prehrávať. Atribút controls hovorí prehliadaču, aby zobrazil bežné ovládacie prvky pre začatie a ukončenie prehrávania a posun v skladbe. Ak by sme vynechali atribút control tak sa nám ovládací prvok na prehrávanie, zastavenie videa nezobrazí. Obsah tela elementu audio predstavuje text, ktorý sa v prehliadači zobrazí, ak prehliadač nepodporuje tento multimediálny element. Pridaním atribútu autoplay zabezpečíme, aby sa súbor začal prehrávať ihneď po svojom načítaní, bez akejkoľvek interakcie s používateľom (PFEIFFER, 2011). Prvok video je používaný podobným spôsobom ako audio: 26 Frameworky sú knižnice, ktoré majú uľahčiť prácu pri programovaní aplikácií. 24

24 Obrázok 15 Náhradný obsah elementu video <video src="helloworld.mp4"> Tvoj prehliadac nepodporuje element "video" v HTML 5 </video> Zdroj: vlastný Do prvku video môžeme pridávať akékoľvek značky HTML, ako sú napríklad prvky objeckt, embed. Najzakladenejším atribútom, ktorý sa používa pri tvorbe videa je však atribút src. Tento atribút nám udáva, kde sa nachádza zdrojový súbor videa. Zdrojom videa je súbor obsahujúci dáta videa, ktoré sú uložene na serveri. Vďaka tomu spôsobu pridávania ďalších prvkov, môžeme pridávať do elementu niekoľko alternatív videa v rôznych formátoch, ktoré nám poskytnú prehrávanie náhradného obsahu vo webových prehliadačoch s rôznou podporou (PFEIFFER, 2011): Obrázok 16 Atribút src Zdroj: vlastný <video controls> <source src="video_1.mp4"> <source src="video_1.wmv"> Skladba hudba_1 </video> 25

25 3 CSS 3 CSS 3 prináša inovácie v rámci modulov, ktoré predstavujú časti špecifikácie riešiace daný problém. Pracovná skupina W3C pristupuje k jednotlivým modulom osobite a po dokončení môže byť táto špecifikácia implementovaná do prehliadačov ako samostatný prvok. CSS 3 nám do veľkej miery prináša mnohé nové možnosti, ktoré boli v predchádzajúcich verziách nedostupné a nahrádzané zásuvnými modulmi. Medzi takéto novinky ktoré sa objavili v špecifikácii sú patria napr.: okrúhle rohy, tieňovanie, prechody atď. Špecifikácia CSS 3 nám ďalej zavádza nové prvky, ktoré boli doteraz dostupné za pomoci JavaScriptu ako animácie a konečne sa do procesu implementácie dostala aj tvorba layoutov v CSS. Problémom, s ktorým sa museli vývojári vyrovnať bolo zavedenie tzv. Vendor Prefixes. Jedná sa o jednoduchý prefix danej CSS vlastnosti, ktorý špecifikuje danú vlastnosť pre konkrétny prehliadač (SLÁDEK, 2012). Prefixy pre jednotlivé webové prehliadače: -moz- tento zápis je platný pre prehliadač Mozilla, -webkit- používajú ho prehliadače ako Safari od Apple, Google Chrome, -o- používa ho Opera, -ms- je určený pre prehliadač Internet Explerer verzii Zaoblené rohy Jednou z nových vlastností, ktoré nám pribudli v špecifikácií CSS 3 je možnosť vytvárania zaoblených hrán elementov border-radius. Táto vlastnosť je jednoduchá a šikovná a posúva nás o krok ďalej v tvorbe grafiky na webových stránkach. Vlastnosť boreder-radius sa zapisuje do štýlu elementu, tak ako všetky vlastnosti CSS. Jednotlivé hodnoty polomeru zaoblenia elementu sa udávajú v pixeloch (px) alebo v percentách (%) (SMOLA, 2012). Obrázok 17 Zaoblené rohy Zdroj: vlastný { border-radius: 6px; /*alebo*/ border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } 26

26 3.2 Rotácia elementov Pomocou vlastnosti CSS 3 môžeme rotovať s ľubovoľnými prvkami na webových stránkach napríklad s textom, obrázkami, formulármi. Vzhľadom na to, že reálna podpora CSS3 ešte určitú dobu nebude, už v dnešnej dobe môžeme rotáciu na plno docieliť pomocou CSS ktoré boli implementované do prehliadačov (ORAVEC, 2010). Obrázok 18 Rotácia elementov Zdroj: vlastný -webkit-transform: rotate(-2.3deg); /* chrome a safari */ -moz-transform: rotate(-2.3deg); /* firefox */ -o-transform: rotate(-2.3deg); /* opera */ transform: rotate(-2.3deg); Možnosť bola špecifikovaná už vo CSS vo verzii 2, ktorá bola implementovaná v prehliadači Internet Explorer 5. Táto špecifikácia ale obsahovala veľké množstvo nedostatkov a z toho dôvodu bola doplnená o nové vlastnosti, ktoré už sú dostupné v CSS verzii 3. Implementácia, ktorú využívala spoločnosť Microsoft používala pre zobrazovanie textu na webových stránka formát textu EOT 27 ale väčšina typov pásma, ktoré sa v dnešnej dobe používajú, tak sú vo formátoch TrueType a OpenType. Možnosť nám umožňuje používanie akéhokoľvek fontu. Rovnako ako, keď máme na serveri uložený obrázok, takým istým spôsobom môžeme odkazovať na fonty, ktoré chceme používať pri tvorbe webových stránok. Obrázok 19 Font-face Zdroj: { font-family: "RadleyRegular"; src: url("fonty/radley-webfont.eot"); src: url("fonty/radley-webfont.woff") format("woff"), url("fonty/radley-webfont.ttf") format("truetype"), url("fonty/radley-webfont.svg#webfontew0qe009") format ("svg"); font-weight: mormal; 27 EOT Embedded Open Type 27

27 V tomto príklade sme si najprv určili fonty, ktoré sa budú využívať a pomenovali sme si ich príslušným názvom. Atribút src nám určuje adresu zdroja fontov, z ktorej sa prehliadač snaží získavať príslušný font, ktorý je pre daný prehliadač vyhovujúci (HOGAN, 2011). 3.4 Tieňovanie textu Veľa webových dizajnérov sa snaží pri tvorbe webových stránok používať tiene nie len na elementy ale aj text. Možnosť tieňovania bola ešte pred zavedením CSS 3 možná len za pomoci vloženého obrázku. Teraz nám túto možnosť v CSS 3 prináša funkcia textshadow, pomocou ktorej môže tieňovať aj text na webových stránkach. Obrázok 20 Tieňovanie textu Zdroj: vlastný text-shadow: 2px 2px 4px Zápis tejto vlastnosti je úplne jednoduchý. Prvá hodnota nám hovorí, že ide o horizontálny posun Prvé číslice, ktoré sa nachádzajú v zápise nám hovoria o tom, o koľko bude tieň posunutý na osi X a Y od pôvodného textu. Tretie číslo hovorí o veľkosti a na konci sa nachádza definovanie farebného odtieňu (HOGAN, 2011). 3.5 Tieňovanie boxu CSS 3 obsahuje špecifikáciu pomocou ktorej môžeme vytvárať tiene box-shadow. Aj keď je CSS 3 ešte len návrhom, túto funkciu už prehliadače zaviedli do svojich funkcionalít a tvorcovia webových stránok už túto funkciu môžu využívať. Syntax vlastnosti tohto prvku je rovnaká ako pri text-shadow len s tým rozdielom, že pred box-shadow sa uvádza prefix pre jednotlivé prehliadače ( ). Obrázok 21 Tieňovanie boxu Zdroj: vlastný box-shadow: black 4px 6px 20px; -webkit-box-shadow: black 4px 6px 20px; -moz-box-shadow: black 4px 6px 20px; 28

28 4 VYUŽITIE HTLM 5 A CSS 3 V PODNIKOVÝCH INFORMAČNÝCH SYSTÉMOCH 4.1 Podnikové informačné systémy založené na webovej platforme Intuitívnosť a jednoduchosť ovládania nie je limitovaná softvérovými možnosťami, ako v prípade štandardných desktopových aplikácií, ale jedine kreatívnosťou, tvorivosťou a zmyslom vývojára, prípadne grafika pre detail. V tejto súvislosti jednou z významných výhod použitia webových technológií pre vývoj podnikových informačných systémov je jednoduchá dostupnosť. Podnikový informačný systém je pre používateľov dostupný priamo z klientskej aplikácie webového prehliadača, ktorý sa štandardne nachádza takmer v každom vydaní a každej platforme graficky orientovaného operačného systému. Nie je teda potrebná žiadna inštalácia špecializovaného softvéru na klientskych počítačoch, stačí používať poslednú a aktualizovanú verziu webového prehliadača, pričom aktualizácia prebieha zvyčajne automaticky a na pozadí bez zásahu používateľa. Za ďalšiu z významných výhod môžeme považovať jednoduchú, rýchlu a centralizovanú správu a aktualizáciu podnikového informačného systému, ktorá sa vykonáva len jednorázovo na serveri (zmena na serveri sa automaticky prejaví v rámci všetkých klientov, ktorí so serverom komunikujú) nie samostatne pre každého klienta, ako v prípade desktopovej aplikácie. Podnikový informačný systém založený na webovom rozhraní rieši problémy s inštaláciou a rozdielnosťou platforiem (klienti môžu používať rôzne operačné systémy a rôzne platformy zariadení, jedinou podmienkou je prítomnosť webového prehliadača). Pre objektívny pohľad na webové technológie je však nutné spomenúť aj niekoľko nevýhod, ktoré aplikácie založené na webovej platforme prinášajú. V prvom rade ide o veľmi náročný a zdĺhavý vývoj aplikácií, ktoré musia riešiť okrem iných aj problémy vyplývajúce z rozdielneho parsovania a zobrazenia HTML dokumentov rôznymi prehliadačmi. S tým súvisí aj komplikované ladenie a testovanie takto vytvorených aplikácií, ktoré musí byť vykonávané nie len jednorázovo z pohľadu funkcionality, ale viacnásobne v každom z bežných webových prehliadačov samostatne. Celý uvedený proces testovania musí byť realizovaný ďalej: prvý krát s použitím všetkých funkcií webového prehliadača, druhý krát s deaktivovanou podporou JavaScriptu, príp. Flashu (KLAUČO et al, 2013 s.2). 29

29 Hovoríme o základných pravidlách vývoja webových aplikácií, ktorých podstatou je zachovanie hlavnej funkcionality aplikácie aj bez použitia JavaScriptu alebo zásuvných modulov webového prehliadača. Rýchle a dynamické napredovanie webových technológií umožňuje využívať najpokrokovejšie prvky charakteristické pre moderné aplikácie, s čím však súvisí nutnosť neustálej aktualizácie, zdokonaľovania a prispôsobovania systému moderným štandardnom, normám a technológiám, preto v prípade, ak by bolo v záujme vývojára vytvoriť aplikáciu jednorázovo bez nutnosti ďalších aktualizácií a vývoja, webová platforma by nebola vhodným riešením. Z uvedených faktov vyplýva, že systémy založené na webových platformách sú vhodné predovšetkým pre väčšie a rozsiahlejšie projekty (KLAUČO et al, 2013 s.3). Tabuľka 1 Výhody a nevýhody webových aplikácií Výhody dostupnosť systému bez nutnosti inštalácie aplikačného softvéru na klientskych staniciach (pre prístup stačí použiť internetový prehliadač), jednoduchá a rýchla aktualizácia systému, efektívna a centralizovaná správa informačného systému, prístup do systému aj mimo prostredia organizácie (v závislosti od nastavenia) a prevádzka systému bez starostí o ochranu licencie pred krádežou, neobmedzené možnosti pri tvorbe používateľského rozhrania, automatická adaptabilita používateľského rozhrania hardvéru klienta (frameworky). Nevýhody veľmi náročný a zdĺhavý vývoj aplikácií s podporou webových technológií, rýchle a dynamické napredovanie webových technológií predpoklad skorého zastarania systému, komplikované ladenie aplikácií v závislosti od klientskeho softvéru (webového prehliadača), viacnásobné programovanie rovnakej funkcionality, komplikované testovanie aplikácie, najmodernejšie webové technológie pre vývoj RIA aplikácií nie sú (zatiaľ) vo finálnej podobe, sú očakávané zmeny a nie sú štandardizované (HTML5 r. 2022). Zdroj: (KLAUČO et al, 2013) Najmodernejšie webové technológie pre vývoj RIA aplikácií nie sú zatiaľ (2013) vo finálnej podobe a sú očakávané zmeny, ktoré v konečnom dôsledku budú musieť byť v rámci kvalitných informačných systémov dopracované. Príkladom je technológia tvorby webového obsahu HTML 5, ktorá bude štandardizovaná pravdepodobne až v roku 2022 (KLAUČO et al, 2013 s.4). 30

30 4.2 Porovnanie vlastností reálnej desktopovej a webovej aplikácie Pri vývoji webových aplikácií sa v praxi stretávame s množstvom obmedzení týkajúcich sa bezpečnosti prevádzky a kompatibility webovej aplikácie s prehliadačom. Z tohto dôvodu je vývoj webových aplikácií často náročný a veľmi komplikovaný. Pre reálne zhodnotenie výhod a nevýhod webových aplikácií založených na HTML 5, CSS 3, JavaScripte a ďalších technológiách sme sa snažili nájsť desktopovú aplikáciu, pre ktorú existuje adekvátna náhrada v podobe webovej aplikácie. Ideálnou aplikáciou pre porovnanie v tejto súvislosti sa ukazuje najnovšia verzia Microsoft Office 2013 porovnávaná s aktuálnou verziou webovej aplikácie Office Web Apps. Office Web Apps je služba, ktorú ponúka spoločnosť Microsoft pre svojich zákazníkov. Jednou z možností prístupu k službe Office Web Apps je webová aplikácia dostupná na adrese Po vytvorení používateľského konta je okrem klasických služieb poštového klienta možné používať prepracovanú službu Office Web Apps, ktorá umožňuje priamo vo webových prehliadačoch vytvárať, posielať, upravovať alebo zdieľať dokumenty aplikácií Word, Excel, PowerPoint a OneNote takmer na úrovni desktopovej aplikácie. V nasledujúcej časti predloženej bakalárskej práce sa budeme zaoberať predovšetkým webovými aplikáciami Word Web App a Excel Web App. V tejto súvislosti budeme charakterizovať, do akej miery uvedený softvér založený na webovej platforme dokáže nahradiť bežne používané desktopové aplikácie Microsoft Word a Microsoft Excel Microsoft Word vs. Word WebApp Rozvoj celosvetovo používaných kancelárskych produktov je v dnešnej dobe rozšírený do takej miery, že už používateľom nepostačuje využívanie len desktopových aplikácií na úpravu dokumentov, ale už sa začínajú zaujímať aj o webové aplikácie na spracovávanie dokumentov. Word Web App sa začína do popredia dostávať nielen z dôvodu jednoduchej úpravy dokumentov, ale hlavne praktickým využívaním v podnikoch. Tu môžu zamestnanci plnohodnotne spolupracovať v rovnakom čase s viacerými ľuďmi na danej úlohe. Webové technológie, ktoré sa zameriavajú na online úpravu textových dokumentov, sa do značnej miery začali rozvíjať aj vďaka možnosti jednoduchej úpravy textových dokumentov a ich zdieľanie na rôznych počítačoch, zariadeniach, ale aj sociálnych sieťach. Pri prvom pohľade na webovú aplikáciu Word Web App nadobúdame dojem, že vývojári sa snažili do 31

31 vzhľadového dizajnu webovej aplikácie do značnej miery začleniť grafické prostredie, ako to už poznáme aj z novších desktopových verzií aplikácie Microsoft Office Word. Z tohto dôvodu vývojári umiestnili aj hlavný panel ribbon do webovej aplikácie, s ktorým sú už používatelia desktopovej aplikácie Microsoft Word oboznámení a nemusia si zvykať na nové prostredie. Táto ponuka bola ale zredukovaná na základné karty, za pomoci ktorej môžeme upravovať a zdieľať dokumenty. V týchto kartách sa nachádzajú v prevažnej väčšine len hlavné ovládacie prvky na úpravu textových dokumentov, ako napríklad formátovanie textu, zmena veľkosti, farby písma, nastavenie odsekov, číslovanie, odrážky, štýly, vkladanie tabuliek, obrázkov, hypertextových odkazov, ale aj nastavenie strany, odrážok a zarážok. Obrázok 22 Ponuka ribbon vo webovom prehliadači Zdroj: vlastný V tejto časti sa budeme zaoberať porovnávaním funkcií týchto dvoch aplikácií. Je jasné, že webová aplikácia Word Web App bude obsahovať určité obmedzenia funkcionality a zobrazenia dokumentov oproti desktopovej aplikácie Word Tieto nedostatky sa začínajú prejavovať v značnej miere pri úprave dokumentov, ako aj pri kompatibilnom zobrazení v starších verziách prehliadačov. Pri jednoduchej úprave dokumentov vo webovej aplikácii sa začíname dostávať k základným nedostatkom. S nedostatkom sa stretáva väčšina používateľov, ktorí využívajú funkciu ochranu heslom dokumentu. Oprávnenie k úpravám dokumentov, ktoré využívajú ochranu heslom, je do značnej miery obmedzené na úpravu vo webových prehliadačoch. Takéto dokumenty je možné len zobraziť pre čítanie alebo ich je možné pre úpravu otvoriť v desktopovej verzii tejto aplikácii. Ďalšia možnosť, ktorá sa nevyskytuje, je automatické ukladanie dokumentu. Vo webovej aplikácii Word Web App si používatelia budú musieť pri práci s dokumentmi ukladať dokumenty ručne. Možnosť ukladania dokumentov automaticky sa vyskytuje len v desktopovej verzii aplikácie. Pre formátovanie textu nám prostredie webovej aplikácie poskytuje dostatočné možnosti na jeho úpravu. Môžeme si vyberať z možností na kopírovanie a vkladanie textu, používať tučné písmo, kurzívu, 32