Nové prvky vo webových technológiách a ich vplyv na informačné systémy

Transcription

1 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Nové prvky vo webových technológiách a ich vplyv na informačné systémy Bakalárska práca Martin Hajduček 2013

2 Bankovní institut vysoká škola Praha zahraničná vysoká škola Banská Bystrica Katedra kvantitatívnych metód a informatiky Nové prvky vo webových technológiách a ich vplyv na informačné systémy New features in web technologies and their impact on information systems Bakalárska práca Autor: Martin Hajduček Informačné technológie Vedúci práce: PaedDr. Peter Polakovič, PhD. Banská Bystrica Apríl 2013

3 Vyhlásenie: Vyhlasujem, ţe som bakalársku prácu vypracoval 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 Martin Hajduček

4 Poďakovanie Chcel by som na tomto mieste poďakovať predovšetkým vedúcemu mojej bakalárskej práce PaedDr. Peter Polakovič, PhD. za ochotu, trpezlivosť a cenné rady pri písaní tejto práce. Tieţ by som chcel poďakovať mojej rodine a priateľom za podporu počas štúdia.

5 ANOTÁCIA HAJDUČEK, Martin: Nové prvky vo webových technológiách a ich vplyv na informačné systémy [Bakalárska práca]. Bankovní institut vysoká škola Praha, zahraničná vysoká škola Banská Bystrica. Katedra kvantitatívnych metód a informatiky. PaedDr. Peter Polakovič, PhD. Rok obhajoby: Počet strán: 46. Bakalárska práca sa zaoberá najnovšími webovými štandardmi a moţnosťou ich vyuţitia vo webových sídlach bankovníctva a finančného sektoru. V prvej kapitole autor definuje základné pojmy pouţité v práci a zároveň sa širšie venuje technológii WEB 2.0 a štandardom ako HTML, CSS prípadne AJAX a jquery kniţniciam pouţitými v JavaScripte. Druhá kapitole podrobne rozoberá nové prvky pouţité v značkovacom jazyku HTML5 a ich vlastnosti, tak ako aj nové funkcie ktorými bol obohatený systém CSS3 a ich vyuţitie. V tretej kapitole je realizované analýza webových sídiel rôznych finančných inštitúcií na Slovensku a v zahraničí kde sa zisťujú pouţité značkovacie jazyky a ich elementy a atribúty, často sa vyskytujúce chyby v zdrojovom kóde jednotlivých webových sídiel. Kľúčové slová: HTML5, CSS3, WEB 2.0, informačný systém, webové sídlo, webový prehliadač, API, sémantika, layout, SEO, JavaScript, Ajax, jquery.

6 ANNOTATION HAJDUČEK, Martin: New features in web technologies and their impact on information systems [Bachelor thesis]. Bankovní institut vysoká škola Praha, zahraničná vysoká škola Banská Bystrica. Department of Quantitative methods and computer science. Supervisor:. PaedDr. Peter Polakovič, PhD. Year of defense: Number of pages: 46. This thesis concerns with newest web standards and possibility of their use in web pages of bank and financial sector. In first chapter basic expressions used in this work are beingdefined, together with wider dedication to WEB 2.0 technology and standards such as HTML, CSS or AJAX and jquery libraries wich are used with JavaScript. Second chapter is comprehensively talking about new elements used in HTML5 markup language and their attributes and also new functions enriching CSS3 system and their possible use. In third chapter analysis of web pages of diferent foreign and Slovak financial institutions is made, where used markup languages, their elements and attributes along with most comon mistakes in source code of individual institutions is being determined. Keywords: HTML5, CSS3, WEB 2.0, information system, web site, web browser, API, semantic, layout, SEO, JavaScript, Ajax, jquery.

7 Obsah Úvod VYMEDZENIE POJMOV Informačný systém W3C Web História Webu Charakteristické črty Webu Bezpečnosť Web SEO Hyper Text Markup Language (HTML) Verzie značkovacieho jazyka HTML HTML Hlavné zmeny v HTML Application Programming Interface (API) Grafika SVG (Scalable Vector Graphics) Sémantika a HTML CSS Verzie CSS CSS PHP JavaScript Ako JavaScript funguje Rozdiel medzi JavaScriptom a PHP Objektový model dokumentu (DOM) jquery Asynchronous JavaScript and XML (Ajax)... 31

8 1.11. Extensible Markup Language (XML ) INOVÁCIE WEBOVÝCH TECHNOLÓGIÍ Deklarácia a zápis Prvky pre definíciu štruktúry stránky (Layout) Sémantické prvky HTML5 Formuláre HTML5 média Video Audio Nove vlastnosti CSS Selektory Farby pozadia a obrázky Transformácia, prechody a animácia Fonty Vyuţitie Ajaxu ANALÍZA WEBOVÝCH SÍDIEL FINANČNÉHO SEKTORU Značkovanie webových sídiel bankových sektorov Analýza elementov a atribútov Sémantika a layout Formulár Banky so Slovenským webovým sídlom Nesprávne pouţité prvky vo webových sídlach Výsledok analýzy Záver Zoznam použitej literatúry:... 57

9 Úvod HTML (HyperText Markup Language) a CSS (Cascading Style Sheets) sú základné jazyky pre tvorbu internetových stránok. Uţ dlhú dobu sa ţiadna plnohodnotná webová prezentácia bez týchto dvoch jazykov nezaobišla. Internet a technológie s ním spojené zaznamenali v posledných rokoch veľmi rýchly rozvoj, a tieto jazyky musia adekvátnym spôsobom reagovať, aby boli schopné poskytovať dostatočnú podporu pre tvorbu moderných internetových aplikácií. Preto W3C vyvinulo nové verzie štandardov pre oba jazyky, konkrétne HTML5 a CSS3. Cieľom našej práce je vytvoriť súhrnný prehľad a opis nových prvkov, vlastností a funkcií, ktoré sú obsiahnuté v týchto jazykoch a taktieţ popísať hlavné rozdiely z predchádzajúcich verzií. Východiskom pre teoretickú časť je, predovšetkým, štúdium špecifikácií, ktoré pre oba jazyky vydáva konzorcium W3C a literatúra. Stručne sa budeme zaoberať aj JavaScriptom a hlavne jeho novej kniţnici Ajax a jej vyuţití v moderných webových stránkach. V návrhovej časti sa budeme venovať podrobnej analýze vyuţitia technológie HTML5 vo webových sídlach finančného sektoru. Webové sídlo s najvhodnejším pouţitím nových prvkov podľa štandardov W3C si detailnejšie opíšeme a pri ostatných webových sídlach si spomenieme len najčastejšie sa vyskytujúce chyby v zdrojovom kóde.

10 1. VYMEDZENIE POJMOV V tejto časti sa venujeme vymedzeniu pojmov v predmetnej oblasti Web 2.0 a interaktívny web. Pojmy sme zadelili do jednotlivých podkapitol a v nich sa budeme snaţiť podrobne opísať technológie vyuţívané v tomto prostredí Informačný systém Informačný systém je súbor ľudí (zdrojov, spracovateľov, pouţívateľov), technických prostriedkov a metód, zabezpečujúcich zber, prenos, uchovanie a spracovanie dát za účelom tvorby prezentácie informácií pre potreby pouţívateľov (Poţár, 2010, s. 130). Za informačný systém budeme povaţovať systém, ktorého väzby sú definované ako informácie a prvky alebo ako miesta transformácia informácie. Do celkovej funkcie informačného systému sa uvádza tieţ dôleţitá poloţka okolia. Okolie informačného systému sa skladá zo všetkých objektov, ktoré zmenou svojich vlastností ovplyvňujú samotný systém a tieţ objekty, ktoré naopak menia svoje vlastnosti v závislosti od IS. Systémom budeme rozumieť jednotu týchto zložiek: štruktúry, schémy prvkov a väzieb medzi nimi parametrov a premenných priradených väzbám štruktúry transformačných funkcií a predpisu, určujúceho hodnoty parametrov, popr. schému systému času (vo forme časových úsekov, v ktorých je moţné zistiť stav systému) informácie (väzby ako vstupy a výstupy v systéme majú vlastnosť informácie). Podľa normy (STN/ISO IEC Informačné technológie - Základní termíny, 1998) je informačný systém definovaný ako systém spracovania informácií spolu s následnými organizačnými prostriedkami napr. personálom, technickými afunkčnými prostriedkami; taký systém získava a distribuuje informácie. Informačný systém poznáme tieţ ako systém určený pre vytváranie, odosielanie, prijímanie, ukladanie či iné spracovanie dátových správ (Poţár, 2010, s. 130) W3C 10

11 W3C, World Wide Web Consortium je medzinárodné zdruţenie existujúce od roku 1994, ktorého hlavnou úlohou je dohliadať na vývoj internetových štandardov. Pred zaloţením W3C totiţ existovalo veľké mnoţstvo rôznych neštandardných procedúr a postupov, ktoré niektoré prehliadače podporovali a iné nie, čo tvorbu webu veľmi sťaţovalo. Zmyslom W3C je zaistiť interoperabilitu, teda schopnosť systému navzájom si poskytovať sluţby a efektívne spolupracovať. W3C je konzorcium, skladá sa z niekoľkých stoviek komerčných spoločností a akademických organizácií, ktoré platia za členstvo. Za tieto peniaze W3C, napríklad, vytvorilo štandardy jazykov XHTML, XML, CSS či DOM alebo prevádzkuje validátor, nástroj slúţiaci k rýchlej kontrole, či stránka zodpovedá špecifikáciám. W3C sa tieţ zaoberá prístupnosťou webu ( ) Web 2.0 Web 2.0 opisuje vylepšený a modernizovaný World Wide Web, ktorý sme pouţívali do dnes. Týmto termínom označujeme všetko, čo poznáme pod pojmom sociálne siete, webové stránky, ako je Facebook a YouTube a bohaté interaktívne softvérové aplikácie, ktoré sa pouţívajú na internete a dokonca aj konkrétne jazyky určené na programovanie technologických nástrojov, ktoré tvoria "nový" web moţným. Web 2.0 je sociálna transformácia, ktorá kladie väčšiu interaktivitu a kontrolu obsahu do rúk beţných pouţívateľov a nielen veľkým vlastníkom webov. Je to rýchlejšie a viac interaktívne ako Web 1.0. Zvýšená šírka pásma, trvalé pripojenie a vyššia rýchlosť znamená, ţe bohatý mediálny obsah, ako Flash a streamovanie videa, vysielanie podcastov, streaming, audio, softvér, hudbu a video na stiahnutie a multiplayer a roleplaying hry sa stali pravidelnou súčasťou on-line pouţívania. Pojem Web 2.0 sa tak chce venovať aj tradičnej mediálnej zábave (Funk, s. 15). Tim O'Reilly bol prvý, kto definoval Web 2.0. Organizuje v súvislosti s Web 2.0 rôzne konferencie a akcie ako Web 2.0 Summit, Web 2.0 Expo, a iné. O všetkých sa dočítate na jeho webovej stránke Samotný pojem Web 2.0 bol spočiatku len názov konferencie, ktorú organizovala firma O Reilly Media, šíriaca nové 11

12 technologické trendy a myšlienky inovátorov. Potom sa ten názov ujal pre celú platformu novej generácie. Tim O'Reilly sa o Web 2.0 vyjadril: Web 2.0 je revolúcia podnikania v počítačovom priemysle spôsobená presunom k chápaniu webu ako platformy a pokus porozumieť pravidlám, vedúcim k chápaniu tejto novej platformy. Kľúčovým pravidlom medzi týmito pravidlami je toto: tvorte aplikácie, ktoré budú vďaka sieťovému efektu s pribúdajúcim počtom pouţívateľov stále lepšie ( ) História Webu 2.0 Termín Web 2.0 prvýkrát pouţil Darcy DiNucci v roku 1999 vo svojom článku Fragment Future, v ktorom píše: Web ako ho poznáme teraz, ktorý sa ako statický text načíta do prehliadača, je len zárodok webu, ktorý príde. Prvé záblesky Webu 2.0 sa uţ začínajú objavovať a my sledujeme, ako sa toto embryo začína vyvíjať. Web nebude chápaný ako obrazovky plné textu a grafiky, ale ako prostredie, ako éter, prostredníctvom ktorého dochádza k interaktivite. Objavia sa na obrazovke počítača, na televíznom prijímači, na palubnej doske, na mobilnom telefóne, na hernej konzole a moţno aj na vašej mikrovlnnej rúre. (DiNucci, D s. 23). Teraz môţeme len konštatovať, ţe túto víziu naplnil. Neskôr pojem Web 2.0 zadefinoval Tim O Reilly. Bolo to v októbri 2004, keď O'Reilly prezentoval štyri základne úrovne Web 2.0 sluţieb: Projekty závislé na internetovom prostredím (mimo neho by nevedeli existovať, napr.: Wikipedia, del.icio.us, kontextová reklama) sluţby, ktoré fungujú aj offline aplikácie, no internetoví pouţívatelia im dávajú nový rozmer sluţby typu itunes, ktoré fungujú offline, ale internet im pomáha rozšíriť funkcionalitu aplikácie, ktoré rovnako dobre fungujú na internete aj mimo neho napríklad mapy. 12

13 Pre Web 2.0 je typický výraz sharing (zdieľanie), pouţívatelia si môţu medzi sebou zdieľať informácie, a takto sa stanú ľahko dostupnými ( ). Známym sa tento pojem stal aţ po konferencii usporiadanej spoločnosťami O'Reilly Media a Media Live International v roku 2004, na ktorej sa zúčastnili lídri, takzvaných dotcom spoločností, ale aj vlastníci nových spoločností z tzv. druhej vlny internetového podnikania. Prvou témou diskusií bola Web ako platforma poukazujúca na skutočnosť, ţe web sa vyvinul v mohutnú platformu pre najrôznejšie elektronické zariadenia Charakteristické črty Webu 2.0 pouţívateľ tvorí obsah pouţívateľ vniká do garantovaného obsahu otvorená komunikácia, zdieľanie a opakované vyuţitie informácií webové stránky, obsahujúce zdroje informácií, sa zmenili z izolovaných skladov informácií na interaktívne weby, kde pouţívateľ tvorí obsah lepšie rozdelený a organizovaný obsah s prepracovanejšou hyperlinkovou štruktúrou na zdroje, obsahujúce informácie AJAX dynamické pridávanie dát na web Tagy označovanie obsahu pouţívateľom ( ) Čo všetko je web 2.0 Obsah pre masy: Weblogy Mikroblogy Sociálne záloţky Wiki Podcasty, videocasty, screencasty Feedy Sociálne orientovaný obsah Sociálne siete 13

14 Komunity/Fóra Služby a API Flexibilné, mixovateľné Orientované na pouţívateľov JavaScriptové widgety JSON/AJAX Aplikačné spracovávanie Údaje v cloudoch (obláčikoch) - (Data in the cloud) Aplikácia na poţiadanie (softvér ako sluţba) - (Applications on demand) ( ) Bezpečnosť Web 2.0 Vo väčších či menších spoločnostiach sa postupom času prechádza alebo sa uţ prešlo na Web 2.0, samozrejme, ak to má v danom prostredí význam. Čas po úvodných špekuláciách ukázal, ţe nejde len o veľmi často spomínaný Buzzword (Vyjadruje akýkoľvek nový, radikálny alebo revolučný termín napr. Web 2.0, Framework, Cloud), čo je dôvodom prechodu na Web 2.0, ale aj jeho snahy o udrţanie kroku s konkurenciou, prípadne s modernými trendmi. Aplikácie s natoľko cenenou menovkou Web 2.0 však môţu so sebou prinášať aj zvýšenie nebezpečenstva. Práve na túto oblasť sa zamerala nedávna štúdia spoločnosti McAffee ( ). V štatistikách to potvrdzuje aj citovaná štúdia, podľa ktorej 75 % opýtaných organizácií uviedlo, ţe rozšírené vyuţívanie technológií Web 2.0 vytvorí nové zdroje príjmov, zatiaľ čo 40 % sa domnieva, ţe tieto nástroje zvýšia produktivitu práce. Bezpochyby ide o veľmi lákavé a podmanivé výsledky. V kontraste s týmito pozitívnymi názormi však polovica respondentov pomenovala bezpečnosť ako hlavný problém, ktorý zvaţujú v súvislosti s technológiami Web 2.0. Tretina priamo uviedla, ţe práve obavy zo zabezpečenia sú hlavným dôvodom, prečo v rámci svojho podnikania nevyuţívajú technológie Web 2.0 vo väčšej miere. Medzi hlavnými hrozbami, ktoré môţu spôsobiť zamestnanci pouţívajúci aplikácie Web 2.0, uvádzali respondenti malware (35 %), vírusy (15 %), zahltenia informáciami (11 %) a spyware (10 %). Zároveň tieţ 60 % opýtaných firiem v rámci prieskumu uviedlo, ţe ako hlavný dôsledok nevhodného pouţitia aplikácií Web 2.0 a sociálnych médií vnímajú 14

15 moţnú stratu reputácie, hodnoty značky, stratu zákazníkov alebo aj celkovej dôveryhodnosti ( ). Web 2.0 zraniteľné miesta Zraniteľných miest pri aplikáciách Webu 2.0 je omnoho viac hlavne z dôvodu, ţe pouţívajú oveľa viac vstupov ako beţné aplikácie (weby). Niekoľko základných bodov, ktoré odlišujú beţný web od Web 2.0 z pohľadu zraniteľných miest, sme uviedli niţšie ( ). Dáta získavané na pozadí: Štandardný princíp aplikácií AJAX /JSON, ktoré dáta získavajú na pozadí (nie je potrebné opätovné načítanie celej stránky). Často nie sú práve tieto miesta ošetrované a stávajú sa častým terčom útoku. Vyuţívanie dát tretích strán: Rôzne widgety, gadgety, či iné doplnky a sluţby môţu byť dosť nebezpečné. Majte na pamäti, ţe spolu s widgetom prenášate na svoj web aj zabezpečenie tohto widgetu a prakticky celého webu, z ktorého ste widget získali. Aktívnejšie zapájanie pouţívateľov do procesu tvorenia a úpravy webu: Pouţívatelia majú dnes mnoho moţností, ako aktívne zasahovať do tvorenia webu (napríklad môţu vytvárať vlastné doplnky, widgety atď.) a ich bezpečnosť je následne prenášaná aj na celý web. Výborným príkladom je Facebook alebo Twitter, ktoré sa uţ mnohokrát stali obeťou útoku vinou zle naprogramovaných doplnkov. Aktívne vyuţívanie cudzích kódov: Dnes uţ len na máloktorom blogu nenájdete doplnky tretích strán či dokonca kódy týchto tretích strán, ktoré menia a upravujú správanie celého blogu či jeho časti. Výborný príklad je Google AdSense, ktorý zobrazuje na webe reklamu, ktorá pochádza zo serverov Google, a nie priamo od majiteľa webu. Stále platí pravidlo, ţe spolu s týmito doplnkami preberáte bezpečnosť ich zdroja. Umoţňovanie ďalším programátorom pracovať s kódom projektu: 15

16 V dnešnej dobe sa na tieto účely takmer výlučne vyuţívajú API. Pred časom, to však bol generovaný kód, ktorý mal určité pravidlá (nelíšil sa príliš od štruktúry API). API však môţu byť aj veľmi veľké bezpečnostné riziko, pretoţe API často pracujú priamo s jadrom webu a obchádzajú vstupný filter (ak tam nie je, samozrejme, pridaný, na čo sa veľmi často zabúda) ( ). Web 2.0 spôsoby ochrany Ako sa však chrániť proti týmto potenciálnym hrozbám? ITnews spísalo niekoľko bodov, ktoré by vám mali dať na túto otázku jasnú odpoveď. Zavedenie jasných a striktných bezpečnostných pravidiel: Veľmi často vznikajú bezpečnostné incidenty práve preto, ţe neboli pravidlá príliš bezpečné. Uvedomte si, ţe kód robí len to, čo ste mu umoţnili/zakázali. Preto treba mať jasné pravidlá, ktoré budú obmedzovať presne stanovené moţnosti narábania s dátami, jadrom a inými časťami webu (aplikácie). Pouţívanie whitelistov namiesto blacklistov: Pravdepodobne kaţdý programátor pozná rozdiel medzi whitelistom a blacklistom. Whitelist povoľuje časti, ktoré sú jeho obsahom, zatiaľ čo blacklist, naopak, zakazuje. Pouţívaním whitelistov jasne obmedzujete moţnosti narábania (bod vyššie). Radšej zabudnite pridať niektorú z potrebných vlastností, ktoré potrebuje programátor pouţívať a pridajte ju neskôr, ako nakoniec zistiť, ţe ste umoţnili druhej strane plný prístup k vašim dátam a nikdy nedokáţete zakázať úplne všetky moţnosti, ktoré by vás mohli ohroziť. Blacklisty sú vhodné na vyraďovanie nevhodných slov, či vytváranie zoznamov zakázaných IP adries, ktoré nemôţu vstúpiť na váš web. Filtrovanie všetkých vstupných a výstupných bodov v aplikácii (na webe): Pri Web 2.0 musíme mať na pamäti, ţe aj prenosy dát, ktoré sú pre oko beţného poţívateľa neviditeľné, sa môţu stať nosičmi nebezpečného kódu, a ţe aj tie môţe hacker úspešne infiltrovať. Je potrebné venovať zvýšenú pozornosť všetkým bodom vstupu dát nielen tým, ktoré nie sú pre pouţívateľa beţne viditeľné. Obmedzovať prácu priamo s kódom: 16

17 Nie je vhodné ani vo vlastných projektoch vyuţívať kódy doslova kríţovým projektovaním. Radšej pouţívajte API aj na projektoch, ktoré sú vaše a týmto sa môţete vyhnúť infiltrácii všetkých projektov a vzniknuté škody môţete zmierniť na minimum. Obmedzovať vyuţívanie open source kódov: Vytvárajte vlastný kód a open source pouţívajte len v miestach, kde je to nevyhnutné, a samozrejme, aj keď je open source často lepšie naprogramovaný ako váš vlastný kód (hlavne preto, ţe ho tvorí skupina ľudí a nie jednotlivci), môţete doplatiť na neobjavenú zraniteľnosť programátormi či na neaktualizovaný kód ( ) SEO V skratke môţeme povedať, ţe ide o konkrétne techniky, zaoberajúce sa spôsobom ako umiestniť stránky na čo najlepšiu pozíciu vo vyhľadávaní. Jednotlivé vyhľadávače hodnotia internetové stránky pomocou tzv. robotov (botov alebo crawlerov), tí čas od času webovú stránku navštívia, stiahnu jej obsah a ten potom analyzujú. Analýza prebieha pomocou algoritmov, ktoré kaţdý vyhľadávač tají, všeobecné pravidlá sú však známe (Prouza, 2010, s. 43). Techniky SEO idú práve týmto vyhľadávačom po ruke a vďaka nim je webová stránka pre roboty príťaţlivá. To znamená, ţe bude vyskakovať vo výsledkoch vyhľadávania vysoko. Všeobecne sa SEO skladá z dvoch častí: Optimalizácia stránok samotných - tzv. on-page faktory. Optimalizácia faktorov mimo stránku - tzv. off-page faktory. Súčasťou SEO môţu byť aj nelegálne praktiky (tzv. BlackHat SEO), proti ktorým sa väčšinou vyhľadávače snaţia brániť. Pri odhalení týchto techník ich vyhľadávače penalizujú prepadom vo výsledkoch vyhľadávania, krátkodobo však môţu byť úspešné. Metódy nelegálneho SEO: Cloacking: Robotom je predkladaný iný obsah ako pouţívateľom. V niektorých prípadoch je ale chybne penalizované A/B testovanie. 17

18 A/B testovanie - Ide o metódu testovania efektívnosti stránok. Pouţívateľom sa náhodne zobrazujú dve a viac verzií rozloţenia konkrétnej stránky alebo jej farebných variácií, kde sa skúma efektívnosť jednotlivých verzií. Skrytý text Vyhľadávače hodnotia pre radenie výsledkov aj text a konkrétne frekvenciu kľúčových slov. Frekvencia sa dá zvýšiť tak, ţe sa na stránku umiestni skrytý text s kľúčovými slovami a skryje sa pomocou CSS alebo sa zobrazí malým písmom, tak aby nebol pre návštevníkov viditeľný. Spam Web má veľké mnoţstvo spätných odkazov, ktoré sa ale nachádzajú na miestach, kde "nie sú vítané" - internetové diskusie pod článkami atď. (Prouza, 2010, s. 43) Hyper Text Markup Language (HTML) Hyper Text Markup Language, označovaný skratkou HTML, je značkovací jazyk pre hypertext. Je jedným z jazykov pre vytváranie stránok v systéme World Wide Web, ktorý umoţňuje publikáciu dokumentov na internete. Je charakterizovaný mnoţinou značiek (tzv. tagov) a ich atribútov definovaných pre danú verziu. Medzi značky sa uzatvárajú časti textu dokumentu, a tým sa určuje význam (sémantika) obsahovaného textu. Názvy jednotlivých značiek sa uzatvárajú medzí uhlové zátvorky <a>. Časť dokumentu tvorená otváracou značkou, nejakým obsahom a zodpovedajúce ukončovacou značkou tvorí tzv. element (prvok) dokumentu. Napríklad <strong> je otváracia značka pre zvýraznenie textu a <strong> červená čiapočka </strong> je element obsahujúci zvýraznený text (tučné písmo). Súčasťou obsahu elementu môţu byť ďalšie vnorené elementy (Procházka, 2011, s. 16). Tvorba webových stránok pomocou HTML je oveľa jednoduchšia ako písanie počítačového programu pomocou programovacieho jazyka, akým je napríklad Microsoft Visual Basic alebo C + +. Jednoduchú webovú stránku môţete vytvoriť v priebehu niekoľkých minút v obyčajnom programe na úpravu textu, napríklad Poznámkový blok. Nepotrebujete špeciálny softvér alebo rozsiahle školenia ( ). 18

19 Verzie značkovacieho jazyka HTML HTML 2.0 (RFC 1866) schválené ako štandard 22. septembra 1995 HTML januára 1997, HTML decembra 1997, HTML 4.01 (drobné opravy) 24. decembra 1999, ISO/IEC 15445:2000 ("ISO HTML", zaloţené na HTML 4.01 Strict) 15. mája 2000, HTML HTML 1.0 Pôvodný jazyk HTML vymyslel Tim Berners-Lee v roku 1990 spolu s koncepciou www, teda World Wide Webu. Vtedy to bol jednoducho jazyk HTML a nemal ţiadne číslo verzie, hoci by sa dal označiť ako jednotka. V pôvodnom HTML bolo len pár najdôleţitejších značiek, ktoré si svoju funkciu v absolútnej väčšine udrţali dodnes. Vtedajší prvý prehliadač sa volal WorldWideWeb (bez medzery) a neskôr sa premenoval na Nexus a HTML 1.0 podporoval v plnom rozsahu. Neskôr vznikali ďalšie prehliadače, ktoré HTML vedeli zobrazovať. HTML 2.0 Potrebám internetovej komunikácie primitívne prehliadače so základným HTML nestačili, a tak si výrobcovia prehliadačov v nasledujúcich rokoch pôvodný jazyk HTML sami rozšírili. V roku 1994 bol vydaný štandard HTML 2.0, ktorý v zásade podchycoval štandard, de facto určený tým, čo vedeli vtedajšie prehliadače. HTML 2.0 obsahuje navyše najmä formuláre a väčšina funkčných tagov sú také, ako ich poznáme dnes. HTML 3.2 Táto verzia priniesla mnoţstvo farieb, tabuliek a pozadí stránok. Skrátenú verziu 3 s označením 3.2 podporovali dva prehliadače. Prvým bol Netscape Navigator 3 a po čase Internet Explorer 3. Netscape Navigator uţ mal aj slušnú podporu JavaScriptu, ale vôbec ešte nepracoval s CSS štýlmi. HTML 3.2 sa začal pouţívať okolo roku 1995, ale beţne sa 19

20 začal pouţívať v prácach aţ v roku HTML 3.2 zatiaľ vôbec nepočíta s CSS, takţe obsahuje veľa formátovacích značiek a celkom pokročilú prácu s tabuľkami. Pri práci s verziou HTML 3.2 sa autori stránok naučili, ţe nezáleţí na tom, čo definuje norma, ale ţe ide o to, čo podporujú prehliadače. HTML 4.0 Prvá verzia jazyka, ktorá sa snaţila výrazne zjednodušovať. Bola skoro nahradená verziou HTML 4.01 Táto verzia prišla v roku Okrem niekoľkých nových tagov (div, span, pokročilejšie tabuľky) priniesla zjednodušenie v tom, ţe jasne deklarovala oddelenie významu a vzhľadu. Verzia HTML 4.01 plne počítala s tým, ţe existujú kaskádové štýly (CSS), takţe označila formátovanie prvkov priamo v HTML za zastarané. Avšak autori webov si hneď zvykli pracovať s takou kombináciou HTML 3.2, 4.01 a CSS 1, ktorú im prehliadače dovoľovali. A treba povedať, ţe im toho dovoľovali veľa, v podstate všetko. Od roku 1999 v podstate dodnes teda môţe autor pouţiť čokoľvek a prehliadače to akceptujú. Touto verziou mal byť vývoj HTML ukončený. HTML sa mal nahradiť jazykom XHTML, čo bol veľmi zvláštny nápad ( ). XHTML XHTML (skratka anglického extensible hypertext markup language - "rozšíriteľný hypertextový značkovací jazyk ) je značkovací jazyk pre tvorbu hypertextových dokumentov v prostredí www vyvinutý W3C. Pôvodne sa predpokladalo, ţe sa stane nástupcom jazyka HTML, ktorého vývoj bol verziou 4.01 ukončený. V roku 2007 však došlo k zaloţeniu pracovnej skupiny, ktorá má za cieľ vytvoriť novú verziu HTML, ktorá ponesie označenie HTML5 a jej XML variantu XHTML5. Vedľa toho paralelne pokračuje aj vývoj XHTML 2.0 (Prochazka, 2011, s.20). XHTML sa v praxi vyskytuje v troch verziách : 20

21 XHTML 1.0 prechodové (transitional) XHTML 1.0 striktné (strict) XHTML 1.1 Kým XHTML 1.0 prechodové sa dá vcelku odporučiť na pouţívanie, XHTML 1.0 striktné je veľmi prácne a v XHTML 1.1 uţ je veľa vecí zakázaných a jeho pouţívanie je pre značnú časť autorov náročné. Okrem toho, v minulosti začali vyvíjať XHTML 2.0, a však to sa vôbec neujalo. ( ). Rozdiely HTML a XHTML V XHTML na rozdiel od HTML musia byť všetky tagy ukončené, a to vrátane nepárových, ako sú <meta>, <link>, <br>, <hr> alebo <img>. Zápis môţe mať viac podôb. Buď pouţijeme klasické (a validné) <img></img> alebo skrátené <img/> alebo mierne upravené <img/>. Prvý spôsob zasielania XHTML dokumentu s typom text / html sa neodporúča pouţívať. Druhý spôsob, bez medzery, sa neodporúča pouţívať kvôli postarším prehliadačom, ktoré by v takom prípade mohli vynechať posledný atribút, ak je nejaký uvedený. Všetky tagy a ich atribúty musia byť zapísané malými písmenami, a to z toho dôvodu, ţe sú takto deklarované v odkazovanom DTD (Document Type Definition) a pri X (HT) ML záleţí na veľkosti písma. Ak by sme deklarovali vlastnú DTD, môţeme pouţívať aj veľké písmená. Všetky hodnoty atribútov musia byť uzatvorené v úvodzovkách. Dokument musí začínať XML deklaráciou. Jej pouţitie nie je povinné, ak je dokument kódovaný v UTF-8, alebo ak určujeme kódovanie vyšším protokolom (napr. http). 21

22 Ak potrebujeme pracovať s rámami, môţeme deklarovať XTHML 1.0 Frameset a pre jednotlivé stránky pouţívame XHTML 1.0 Transitional. XHTML dokument by sme mali zasielať s iným MIME typom ako klasické HTML dokumenty. Ďalšie rozdiely uţ nie sú natoľko dôleţité a časté (Procházka, 2011, s.20) HTML5 Základnej stavbe jazyka HTML sme sa venovali v predchádzajúcej podkapitole. Tento jazyk sa ale postupne vyvíja a momentálne je k dispozícii verzia HTML5, ktorej sa budeme venovať v práci ďalej. Verzia HTML5 od verzie 4 prináša nové, skrátené a rýchlejšie zápisy. Autori dávajú dôraz na jednoduchosť a zároveň účinnosť. HTML5 ale nie je preformulovaná predchádzajúca verzia jazyka. Zahŕňa totiţ všetky platné prvky ako z HTML4, tak i z XHTML1.0. HTML5 je najnovšou verziou tohto značkovacieho jazyka - zahŕňa nové funkcie, vylepšenia existujúcich funkcií a rôzne API zaloţené na skriptoch. Navyše bol navrhnutý s ohľadom na isté prvoradé princípy, aby sa zabezpečilo, ţe bude fungovať takmer na akejkoľvek platforme, čiţe bude kompatibilný so staršími prehliadačmi a bude schopný správne spracovávať chyby. Súhrn všetkých takých princípov, ktoré viedli k vytvoreniu HTML5, nájdete na stránke HTML Design Principles konzorcia W3C (Goldsteinová, 2011 s.23) Hlavné zmeny v HTML5 Organizácia World Wide Web Consortium (W3C) posunula návrh novej verzie jazyka HTML5 do fázy kandidáta odporúčaní (Candidate Recommendation - CR). To znamená, ţe jeho funkcie sú uţ uzavreté a ďalšie významnejšie zmeny sú nepravdepodobné. Táto verzia bude uţ iba testovaná a upravovaná v jednotlivých prehliadačoch. HTML5 obsahuje tagy a API na zlepšenie interaktivity, multimédiá a lokalizáciu, pričom sa o tejto revízii často hovorí aj ako o náhrade za Silverlight, QuickTime či Flash. Pomocou rôznych API v HTML5 je moţné napr. nahrávať na server väčší súbor, ako je na serveri povolené, 22

23 určovať našu geografickú polohu, načítavať ľubovoľné písma zo serverov a pouţiť ho na našom webe, prehrávať zvuk alebo video v našom prehliadači a pripojovať k nemu titulky, vysvetlivky alebo metadata. Často spomínaný atribút Canavas určený na generovanie akejkoľvek grafiky pomocou vlastného JavaScriptového kódu nám umoţní napr. vykresľovať grafy. Súčasťou HTML5 sú aj Offline web applications, je to rozhranie, umoţňujúce obmedzenú funkčnosť webových aplikácií aj pri tzv. offline reţime, teda v situácii, kedy nie sme pripojení na internet ( ) Application Programming Interface (API) API je skratkou Application Programming Interface (aplikačné programové rozhranie). API môţeme chápať v podobnom význame ako GUI (Graphical user interface, grafické pouţívateľské rozhranie) avšak s tým rozdielom, ţe nejde o rozhranie pre ľudí, ale pre kód. API poskytuje kódu sadu "tlačidiel" (preddefinovaných metód), ktoré je moţné stlačiť, keď chce vyvolať nejaké ţiadané správanie od systému, softvérovej kniţnice alebo prehliadača. Príkazy zaloţené na API sú istou formou abstrakcie zloţitejších akcií, ktoré sa dejú v pozadí (niekedy ich vykonáva softvér inej firmy) (Goldsteinová, HTML5, 2011, s. 24). V aplikácii Internet Explorer 8 a v ďalších internetových prehliadačoch ako Opera, Safari a Google Chrome bola zavedená podpora niektorých funkcií pracovného návrhu špecifikácie HTML5 vrátane: ukladacích priestorov modelu DOM, ktoré sú definované v rámci špecifikácie webových ukladacích priestorov HTML5 navigácie Ajax, implementovanej pomocou vlastnosti window.location.hash a udalosti onhashchange, ktoré sú obe definované v časti špecifikácie HTML5 venovanej prechádzaniu histórie. zasielania správ medzi dokumentmi, implementovaného pomocou metódy postmessage a udalosti onmessage, ktoré sú obe definované v rámci modulu pre zasielanie správ na webe špecifikácie HTML5. Internet Explorer 9 stavia na výsledkoch práce odvedenej na zaistenie súladu aplikácie Internet Explorer 8 so špecifikáciou HTML5 a implementuje nasledujúce nové funkcie: 23

24 Rozhrania pre určovanie geografickej polohy podľa špecifikácie HTML5 Nové elementy jazyka HTML video a audio Nový element jazyka HTML canvas (plátno) Rozhranie Selection (výber) Analýzu kódu HTML s lepšou vzájomnou spoluprácou Niekoľko nových rozhraní API modelu DOM Grafiku SVG (Scaling Vector Graphics) Aj ostaté webové prehliadače, ako Opera, Safari a Firefox, drţia krok a prispôsobujú sa novým trendom HTML5 a CSS Grafika SVG (Scalable Vector Graphics) SVG bol pôvodne povaţovaný ako náhrada za Flash. V súčasnosti sa úspešne presadil v oblasti kartografie a mobilných zariadení (predovšetkým v Ázii). Konzorcium W3C uvedením SVG vyvinulo nový formát pre vektorovú grafiku. Je to formát kompletne zaloţený na XML. Programátori môţu jednoduchšie manipulovať s obrázkami, čo uľahčuje prácu programátorom, ale komplikuje ju webovým vývojárom. Grafiku vo formáte SVG dnes podporujú všetky novšie verzie prehliadačov, ako je Firefox, Opera, Konqueror, Safari a taktieţ Internet Explorer 7 a vyššie. Napríklad, pre staršie verzie Internet Exploreru je nutné pouţiť plugin. V nových prehliadačoch ţiadny plugin na zobrazenie grafiky vo formáte SVG potrebovať nebudete (Hauser, 2006, s. 623) Sémantika a HTML5 Konzorcium W3C si je dobre vedomé významu sémantiky pre usporiadanie a prístupnosť, resp. vyhľadateľnosť informácií. Tým ostrejšie potom vystupuje kontrast medzi všeobecným povedomím potreby sémantického štruktúrovania informácií na strane jednej a dátovým chaosom na webe na strane druhej. Sémantike v HTML sa W3C výraznejšie nevenovalo a takisto záujem programátorov nebol veľký, aj keď napomáha v práci vyhľadávačom. Informácie na webových stránkach obvykle nie sú prezentované schematicky a heslovite systémom pojem-význam, ale prirodzene, mnohokrát na báze voľných asociácií. 24

25 Takto sformovaným dátam však nemôţe počítač dobre rozumieť, ani keď budú dôkladne vyznačené. Moţnosť ich spracovania je tým výrazne obmedzená, nie však minimalizovaná. Najmä vyhľadávačom sémantika uľahčuje prácu. Z textov spätných odkazov, nadpisov, titulku môţu ľahšie zistiť, k akým témam sa stránka vzťahuje, a relevantne s ňou nakladať. A funguje to celkom dobre, aj keď nie dokonale. V porovnávaní s tým yhľadávanie obrázkov nie je aţ na toľko uspokojivé. Vyhľadávače sa tu totiţ nemôţu oprieť o kvalitný sémantický podklad. Tvorcovia obsahu sa neradi zaťaţujú niečím tak okrajovým, ako je adekvátna textová alternatíva k obrázku (atribút atď.). HTML 5 prichádza so široko uplatňovanou ontologickou budúcnosťou, s ktorou bude moţné priraďovať k objektom na stránke vysvetlivky, čo sa dá uplatniť najmä u obrázkov, kde sémantické riešenie viditeľných vysvetliviek veľmi chýba. Vyzerať by to malo nasledovne: vysvetlivka reprezentovaná prvkom sa umiestni nad alebo pod obrázok a celé sa to "zabalí" do <figure> ( Medzi najznámejšie sémantické elementy patria tie, ktoré označujú nadpisy a podnadpisy. HTML kód následne vyzerá: <body> <h1>nadpis<h2> <h2>podnadpis</h2> <h3>ďalšia úroveň</h3> <h2>druhý podnadpis</h2> </body> A výsledné zobrazenie: 25

26 Obrázok 1:ukážka správneho sémantického zápisu Zdroj: Vlastné spracovanie 1.6. CSS Kaskádové štýly, čiţe Cascading Style Sheets, skrátene CSS je jazyk pre popis spôsobu zobrazenia stránok napísaných v jazykoch HTML, XHTML alebo XML. Hlavnou úlohou je umoţniť návrhárom oddeliť vzhľad dokumentu od jeho štruktúry a obsahu. Pôvodne to mal umoţniť uţ jazyk HTML, ale v dôsledku nedostatočných štandardov a konkurenčného boja výrobcov prehliadačov sa vyvinul inak. Staršie verzie HTML obsahujú veľa elementov, ktoré nepopisujú iba obsah a štruktúru dokumentu, ale aj spôsob jeho zobrazenia. Z hľadiska spracovania dokumentov a vyhľadávania informácií nie je takýto vývoj ţiaduci (Procházka, 2011, s. 18). Jazyk CSS prešiel niekoľkými zmenami a vyšlo viacej verzií podobne ako pri HTML, a všetky z nich sa pouţívajú dodnes, pretoţe niektoré inštitúcie pouţívajú staré internetové prehliadače, ktoré nepodporujú nové špecifikácie jazyka CSS Verzie CSS Cascading Style Sheets Level 1 Verzia jazyka CSS z roku 1996 s názvom Cascading Style Sheets Level 1 slúţi pre inštitúcie, ktoré pouţívajú zastarané internetové prehliadače, nepodporujúce novšie špecifikácie jazyka CSS a pre ich programátorov. Najnovšia verzia CSS Level 1 z roku 2008 sa nachádza na stránke konzorcia W3C. CSS2 Specification 26

27 Špecifikácia s názvom Cascading Style Sheet Level 2 z roku 1997 bola rozšírená o nové vlastnosti. K dispozícii je na stiahnutie ako textový súbor, PDF, dokument HTML, PostScript alebo archív. Programátori túto špecifikáciu vyuţijú pre aplikácie podporujúce CSS2, ale nie CSS 2.1. Cascading Style Sheets level 2 revision 1 Cascading Style Sheets Level 2 Revision 1 Specification (CSS 2.1) odstránila niektoré vlastnosti z pôvodnej verzie. Pri pouţívaní jazyka CSS špecifikácia neupravuje všetky situácie, a tak v aplikáciách (napr. internetových prehliadačoch) môţe dochádzať k rôznemu zobrazovaniu obsahu ( ) CSS 3 Ďalšou samostatnou a nemenej dôleţitou súčasťou webových stránok sú predpisy kaskádových štýlov (Cascading Style Sheets, CSS), ktoré opisujú, ako sa má HTML značkovanie prezentovať, čiţe štýlovať. CSS3 je najnovšia verzia špecifikácie CSS. Termín "CSS3" nie je len odkaz na nové funkcionality v CSS, ale aj tretia priebeţná úroveň špecifikácie CSS. CSS3 obsahuje takmer všetko, čo je obsiahnuté v CSS2.1. Pridáva aj nové funkcionality, ktoré majú pomôcť vývojárom vyriešiť rad problémov bez toho, aby potrebovali nesémantické značkovanie, zloţité scripty alebo obrázky navyše. Medzi nové funkcionality v CSS3 patrí podpora dodatočných selektorov, vrhanie tieňov, zaoblené rohy, viacnásobné pozadia, animácie, transparentnosť a mnoho ďalších vecí. CSS3 je ale niečo iné ako HTML5. Termín CSS3 chápeme v zmysle tretej úrovne špecifikácie CSS s hlavným dôrazom na veci, ktoré sú v CSS3 nové. Inak povedané, CSS3 je oddelené od HTML5 a s ním súvisiacich API (Goldsteinová, HTML5 a CSS3, 2011, s. 26). Nove vlastnosti CSS3 Zaoblené rohy (border- radius) Tieň (box-shadow) Tieň pri texte (text-shadow) Pohyb, rotácia (transform) 27

28 Priehladnosť (opacity) Model farieb (RGBA) Model farieb po druhé (HSL) Model farieb po tretie (HSLA) Podrobne si ich opíšeme v druhej časti, v ktorej sa im venujeme PHP Pre základné zoznámenie s kódom PHP uvedieme dve základné syntaktické pravidlá. kód PHP je uzavretý medzi párové značky <? Php a?> kaţdý príkaz PHP končí bodkočiarkou Pre úplnosť PHP si ukáţeme ešte ďalšiu dôleţitú súčasť, na ktorej stoja základy PHP, a tým je kombinovanie PHP a HTML kódu. Kód PHP môţe byť do kódu HTML vloţený ako kompaktný blok viacerých riadkov. Najdôleţitejšou úlohou PHP je výpis textu do kontextu stránky HTML v okne klientovho prehliadača webových aplikácií. Pre výpis textových reťazcov slúţi príkazy print a echo (Lacko,2008, s. 82) JavaScript JavaScript je multiplatformový, objektovo orientovaný skriptovací jazyk, ktorý sa spravidla pouţíva ako interpretovaný programovací jazyk pre www stránky, často vkladaný priamo do HTML kódu stránky. Sú ním zvyčajne ovládané rôzne interaktívne prvky, tlačidlá, textové políčka, formuláre alebo tvorené animácie a efekty obrázkov. Jeho syntax je zaloţený na jazyku C,C + + a Java. Slovo Java je však súčasťou jeho názvu iba z marketingových dôvodov a s programovacím jazykom Java má len podobnú syntax, ale najviac ju má podobnú skriptu PHP. Novšou podobou JavaScriptu je asynchrónny JavaScript, nazývaný AJAX (Procházka, 2011, s. 19). 28

29 Ako JavaScript funguje Kaţdý program v JavaScripte, ktorý je navrhnutý tak, aby beţal v nejakom prehliadači, sa musí pripojiť k nejakému dokumentu. Väčšinou to bude HTML alebo XHTML dokument, ale v budúcnosti vôbec nie je vylúčené, ţe budeme JavaScript pouţívať spoločné s XML, SVG alebo s niečím iným, na čo sme doteraz ani nepomysleli. Sústredíme sa iba na HTML, pretoţe s ním JavaScript pouţíva väčšina ľudí. Takţe, pokiaľ chcete vloţiť do stránky HTML nejaký JavaScript, musíte do hlavičky (prvok head) dokumentu vloţiť značku <script>. Pouţitým skriptom nemusí byť nutne JavaScript, takţe musíme prehliadaču povedať, aký typ skriptu vkladáme. Jednoducho pridáme atribút type s hodnotou text/javascript. Vyzerá to nasledovne: <script type= text/javascript >(Yank, 2008, s. 27) Rozdiel medzi JavaScriptom a PHP PHP je skriptovací jazyk, pomocou ktorého sa robia webové aplikácie, ako je kniha hostí, počítadlo návštev, anketa, diskusné fórum alebo chat. Jeho operácie sa teda odohrávajú skôr na strane servera. JavaScript je tieţ skriptovací jazyk, ale to, čo robí JavaScript, sa vţdy odohráva na našom počítači, teda v našom prehliadači. V JavaScripte chat ani knihu hostí neurobíme. Urobíme v ňom ale rôzne efekty akými sú rozbaľovacie menu, posuvné a točiace sa objekty, otváranie nových okien s nejakým nastavením a podobne ( ) Objektový model dokumentu (DOM) Je nesmierne dôleţité, aby mohol JavaScript pristupovať k akejkoľvek časti dokumentu, manipulovať s ňou a prípadne ju aj vytvoriť. Pre tieto potreby vytvorilo konzorcium W3C tzv. objektový model dokumentu (DOM, Document Object Model). Prostredníctvom tohto systému môţu scripty ovplyvňovať dokument. Tento systém umoţňuje JavaScriptu nielen meniť štruktúru dokumentu, ale tieţ pristupovať k štýlom dokumentu a meniť ich vzhľad. Keď sa do prehliadača stiahne nejaký dokument HTML, musí prehliadač previesť jeden veľmi dlhý reťazec na webovú stránku. Aby to mohol urobiť, musí rozhodnúť, ktoré 29

30 časti sú odseky, aké časti sú hlavičky, ktoré časti sú text atď. Aby programátori v JavaScripte nemuseli robiť to isté, prehliadač uloţí interpretáciu kódu HTML ako štruktúru objektu JavaScriptu, ktorým sa hovorí objektový model dokumentu (Document Object Model, čiţe DOM). V tomto modeli sa kaţdý prvok z HTML dokumentu stane objektom. To isté sa stane so všetkými atribútmi a textami. JavaScript potom môţe ku všetkým týmto objektom pristupovať nezávisle pomocou zabudovaných funkcií, ktoré umoţňujú za pochodu ľahko nájsť a zmeniť to, čo potrebujete (Yank, 2008, s. 27) jquery Kniţnica jquery je natoľko prepracovaná, ţe s ňou môţeme vytvárať najrôznejšie animácie na veľmi dobrej úrovni. V mnoţstve situácií nebudeme musieť vytvárať animácie pomocou technológie Flash. Vďaka tomu sa budú naše stránky rýchlejšie načítavať a budú prístupnejšie pre internetové vyhľadávače. Kniţnica jquery kladie dôraz na interakciu medzi značkovacím jazykom HTML a programovacím jazykom JavaScript. Táto kniţnica je rýchla a presná, pričom zjednodušuje tvorbu a správu udalostí, animácií a mnoho ďalších komponentov, ktoré so sebou prinášajú najmodernejšie technológie. Prvýkrát ju predstavil John Resig v roku Kniţnica jquery sa šíri pod licenciami GPL a MIT, čo znamená, ţe ju môţeme voľne pouţívať vo svojich projektoch. Rovnako sa môţeme vďaka týmto licenciám zapojiť do vývoja kniţnice jquery. JQuery je určený pre všetkých, ktorí sa zaujímajú o tvorbu interaktívnych webových aplikácií. Ďalším typickým príkladom je validácia formulárových dát. Je veľmi nepohodlné, keď musíme vypĺňať formulár bez toho, aby sme vedeli, čo presne od nás jeho autor poţaduje. Väčšina pouţívateľov pri vyplňovaní formuláru niekedy urobí chybu a opakované odosielanie formulárov s chybou je dosť zdĺhavé a nepraktické. Samozrejme je moţné pridať k takému formuláru statický opis toho, čo chceme vyplniť, ale táto informácia postačuje málokedy. Najúčinnejším a najpohodlnejším riešením je zobrazovať pouţívateľom aktuálny stav validácie. Takto pouţívateľ okamţite vie, kedy a kde urobil chybu, vďaka čomu je moţné sa opraviť(margorín, 2011, s. 11). 30

31 1.10. Asynchronous JavaScript and XML (Ajax) Ajax umoţňuje, aby stránka kontaktovala server a dostala od neho ľubovoľné dáta v XML bez toho, aby sa musela celá znovu načítať. A to všetko len vďaka JavaScriptu. To znamená, ţe napr. stlačíme tlačidlo, chvíľu čakáte a na stránke sa objaví niečo nové z databázy na serveri (alebo sa niečo zmení) bez načítania alebo nahrania novej stránky. Často sa pomocou Ajaxu realizujú tzv. našepkávače. Ako príklad uvedieme textové políčko, ktoré váš text priebeţne odosiela na server a dostávajú od neho pomocné slová, ktoré by sme mohli chcieť napísať. Tie sa nám potom predkladajú vo forme zoznamu pod políčkom ( A znamená asynchrónny Hlavnou výhodou aplikácií Ajax je práve ich asynchrónna komunikácia klienta so serverom. Nahradením synchrónneho modelu poţiadavka/odpoveď dosiahneme v prvom rade to, ţe po poţiadavke nemusíme čakať na odpoveď serveru a môţeme naďalej aktívne pracovať s obsahom webovej stránky, pričom jeho poţiadavka sa spracováva na pozadí (pozri obrázok 2). Po spracovaní poţiadavky sa zmení len príslušný obsah zobrazenej stránky a môţeme zadávať ďalšie poţiadavky bez ohľadu na to, či predchádzajúca poţiadavka bola alebo nebola spracovaná (Lacko, 2008, s. 28). Obrázok 2: časový priebeh asynchrónnej komunikácie zdroj: Lacko, Ajax, 2008, s

32 J znamená JavaScript Ďalším krokom pre úplné zvládnutie technológie Ajax bude dynamická zmena obsahu dokumentu HTML. Obsah samostatného dokumentu HTML, sme však nijako nemenili. Pre zmenu obsahu budeme pouţívať uţ spomenutý programovací jazyk JavaScript (Lacko, 2008, s. 31). XML Pod pojmom dokument XML rozumieme súbor s príponou XML, ktorého obsah spĺňa pravidlá syntaxe značkovacieho jazyka XML. Dokument sa skladá z elementu. Kaţdý element obsahuje počiatočnú a koncovú značku. Obidve značky obsahujú názov elementu, koncová značka obsahuje navyše pred názvom elementu lomítko. Typický príklad elementu XML môţe byt napríklad element obsahujúci údaje o osobe, tovare, detaily finančnej transakcie a podobne (Lacko, 2008, s. 62). Ďalej si to rozoberieme v nasledujúcej podkapitole Extensible Markup Language (XML ) XML (extensible Markup Language) je rozšíriteľný značkovací jazyk vyvinutý konzorciom W3C. Jazyk je určený predovšetkým pre výmenu dát medzi aplikáciami a na publikovanie dokumentov, v ktorých opisuje štruktúru z hľadiska vecného obsahu jednotlivých častí ale nezaoberá sa však vzhľadom (HUB, 2010, s. 10). Kaţdý XML dokument sa skladá z elementov, ktoré sú do seba navzájom vnorené. Elementy sa v texte vyznačujú pomocou tzv. tagou. Väčšine elementov zodpovedajú dva tagy, počiatočné a koncové. <para>toto je obsah elementu para.</para> Ukáţka obsahuje jeden element para. Jeho obsah je vyznačený pomocou tagov <para> (počiatočný tag) a </para> (ukončovací tag). Ukáţka je asi najjednoduchším XML dokumentom, ktorý môţeme vytvoriť. Názvy tagov sa zapisujú medzi znaky '<'a'>'. Ukončovací tag má pred svojím názvom ešte znak /, aby sa ľahko odlíšil od počiatočného. Niektoré elementy nemusia mať ţiadny obsah. Môţete ich samozrejme 32

33 zaznamenávať tak, ţe za počiatočným tagom uvedieme hneď aj ten ukončovací (Kosek, 2000, s.24). Konzorcium W3C si pri tvorbe tohto jazyka stanovilo nasledujúce požiadavky: XML má byť priamo uplatniteľné na internete XML má podporoval širokú škálu aplikácií XML má byť kompatibilný so SGML Vytvorenie programu, ktorý spracováva XML, musí byť jednoduché Počet voliteľných vlastností v jazyku XML má byť obmedzený na minimum, v ideálnom prípade nemajú byť ţiadne XML dokumenty by mali byť čitateľné človekom Norma XML by mala byť pripravená rýchlo Norma XML by mala byť presná a stručná Vytváranie XML dokumentov by malo byť jednoduché Kompaktnosť XML značkovania nie je prioritou 2. INOVÁCIE WEBOVÝCH TECHNOLÓGIÍ HTML5 v sebe zahŕňa nielen uţ existujúce značkovacie prvky, ktoré boli predefinované pre túto verziu HTML, ale aj nové prvky, ktoré umoţňujú webovým dizajnérom byť v sémantickom značkovaní expresívnejší. Uţ nebude potrebné stránky zahlcovať prvkami div, lebo máme k dispozícii prvky article, section, header, aside, footer a ďalšie. Termín "HTML5" sa tieţ často pouţíva v prípade, keď je potrebné odkázať sa na rad iných nových technológií a rôznych API. Niektoré z nich zahŕňajú "kreslenie na plátno" (teda prvok <canvas>), off-line úloţisko, nové prvky video a audio, funkcionalitu pre preťahovanie (drag-and-drop), Microdata, vkladané fonty a ďalšie vymoţenosti Deklarácia a zápis Jedným z hlavných cieľov konzorcia W3C pri tvorení nového jazyka HTML5 bolo zjednodušenie zápisu stránok tak, aby ich tvorba bola rýchlejšia a prehľadnejšia. 33

34 DOCTYPE Jednou z prvých inovácií je zmena zápisu špecifikácie typu dokumentu, ako bude vidno na obrázku 3 a 4. Deklarácia znakovej sady Podobne, ako sa skrátil zápis špecifikácie typu dokumentu, došlo aj k skráteniu deklarácie znakovej sady. Označenie jazyka dokumentu Označenie jazyka dokumentu sa presunulo z elementu meta do elementu html. Zápis skriptu Zápis skriptu sa skrátil o jeden atribút type. Link Rovnako ako zápis skriptu aj element link bol skrátený o atribút type, tento element sa pouţíva na načítanie externého súboru ako napríklad súbor CSS. Obrázok 3: ukážka kódu HTML4.01 Zdroj: Vlastné spracovanie v NetBeans 34

35 Obrázok 4: ukážka kódu HTML5 Zdroj: Vlastné spracovanie v NetBeans 2.2. Prvky pre definíciu štruktúry stránky (Layout) Väčšina webových stránok je rozdelená na menšie časti, a to na hlavičku, menu, sekciu a bočný panel. V starších verziách HTML sme takéto rozdelenia dosiahli pomocou elementov <div>. Nové sémantické elementy article, section, header, aside, footer rozdelia stránku ako to vidíme na obrázku 5. Obrázok 5: Rozloženie stránky na jednotlivé časti Zdroj:

36 2.3. Sémantické prvky Túto podkapitolu som spracoval na základe internetového zdroja a kniţného zdroja Goldsteinová, Hgroup: Zoskupuje nadpisy a podnadpisy umiestnené v elementoch h1 aţ h6, pričom primárnym rodičovským prvkom je prvok h1. Tým zabránime chaotickému spletaniu osnovy dokumentu, a zároveň sa vyhneme pouţitiu nesémantických prvkov na stránke. Figure a Figcaption: Sú to dva vzájomne súvisiace prvky HTML5, ktoré napomáhajú lepšej sémantike v HTML5. Figure spája multimediálny obsah (video, audio, obrázok...) s jeho popisom (pomocou elementu figcaption). Figcaption opisuje obsah, ktorý je umiestnený v elemente figure. Mark: Slúţi na zvýraznenie alebo označenie určitého textu nie zo strany kontextovej dôleţitosti, ako jemu podobné prvky <strong> a <em>, ale napríklad na zvýraznenie vyhľadávaných slov vo výsledku vyhľadávania. Progress a meter: Špecifikujú dáta, ktoré sa nejakým spôsobom merajú alebo hodnotia. Progress: Popisuje aktuálny stav meniaceho sa procesu, ktorý smeruje na dokončenie bez ohľadu na to, či je stav " dokončené " vôbec definovaný. Meter: Reprezentuje nejaký prvok, ktorého rozsah je vopred známy, má pevnú minimálnu a maximálnu hodnotu. Time: Tento prvok napomáha Vyhľadávačom filtrovať výsledky na základe času. Details: Špecifikuje ďalšie podrobnosti, ktoré môţe uţívateľ zobraziť alebo skryť na pozadí (napr.: rozbaliteľný box). 36

37 2.4. HTML5 Formuláre Túto podkapitolu som spracoval na základe zdroja a knižneho zdroja R Clark Atribút formulára required: booleovský atribút určuje, ţe vstupné pole musí byť správne vyplnené pred odoslaním formulára. Atribút formulára placeholder: umoţňuje zobraziť stručné odporúčanie vo vnútri formulárového pola Atribút formulára pattern: špecifikuje obsah, ktorý bude povaţovaný za akceptovateľný. Pre vytvorenie vzoru sa pouţívajú regulárne výrazy v štýle Perlu, avšak s tou výnimkou, ţe atribútu pattern musí vyhovovať celá hodnota, nielen nejaká podmnoţina. Atribút formulára disabled: v HTML5 bola jeho funkcionalita mierne rozšírená o moţnosť pouţiť ho aj pre prvok fieldset a aplikovať ho na všetky formulárové prvky, ktoré sú vnorené do tohto prvku. Atribút formulára readonly: tieţ znemoţňuje editovať hodnotu v poli formulára, ale môţe toto pole získať fokus a jeho hodnota sa odošle, keď sa odosiela formulár. Atribút formulára multiple: určuje, ţe pouţívateľ môţe zadať viac ako jednu hodnotu v prvku input. Atribút formulára form: prepojí formulárový prvok s formulárom (tzv. vlastníkom). Pouţíva sa hlavne na potrebné tlačidlá v tabuľke, ktoré moţno prepojiť s formulárom. Atribút formulára autocomplet: špecifikuje, či má mať formulár alebo ovládací prvok formulára funkcionalitu automatického dokončovania. Pri poliach pre heslá to znamená schopnosť uchovať heslo v prehliadači. 37

38 Atribút formulára autofocus: určuje, ţe vstupnému prvku by mal byť automaticky udelený focus pri načítaní stránky. Prvok datalist a atribut list: atribút list sa odkazuje na prvok datalist, ktorý obsahuje vopred definované moţnosti vstupného input prvku. V rozbaľovacom zozname sa bude zobrazovať zoznam odporúčaných volieb HTML5 média Medzi najväčšie novinky v HTML5 patria elementy pre prácu s multimédiami. V tejto podkapitole sa budeme venovať hlavne prvku video. Prakticky podobne sa správa aj prvok audio. Túto podkapitolu som spracoval na základe internetového zdroja a kniţných zdrojov R. Clark 2012 a A. Goldsteinová, Video Video je párový tag, slúţiaci na vloţenie videa do HTML dokumentu a podporovaný všetkými modernými prehliadačmi. Aţ do teraz sa multimediálny obsah pripojoval na webovú stránku pomocou zásuvných modulov alebo aplikácií integrovaných do prehliadača. Ide o QuickTime, RealPlayer, Silverlight a Flash Player. Dnes v HTML5 môţeme video vloţiť pomocou jednoduchého zápisu. Obrázok 6: ukážka prvku video Zdroj: Vlastné spracovanie v NetBeans 38

39 Na obrázku vidíme, ako sa párový tag video pouţíva aj s niektorými atribútmi, ktoré si teraz opíšeme. Autoplay: Atribút spustí video automaticky ihneď po načítaní. Controls: Atribút zobrazí na prehrávači ovládacie prvky. Loop: Atribút prehráva zvukovú stopu s opakovaním stále dokola. Muted: Ak je uvedený tento atribút, zvuk je vypnutý. Poster: URL obrázka, ktorá sa zobrazí na pozadí prehrávača, kým uţívateľ video nespustí. Preload: Umoţňuje nastaviť načítanie média do pamäti, čo urýchli jeho prehratie po kliknutí, ale spomalí načítanie stránky. Formáty a kodeky videa Kodek videa: je algoritmus, ktorý sa pouţíva na zakódovanie alebo dekódovanie prúdu multimediálnych dát. Najdôleţitejšie kodeky pre HTML5 sú: H.264 Theora VP8 Formát kontajneru videa: je to obdoba súboru ZIP. Obal, ktorý obsahuje všetky potrebné dáta, z ktorých sa skladá video. HTML5 podporuje tieto formáty: MPEG4 = H.264 video kodek a AAC audio kodek Ogg = VP8 video kodek a Vorbis audio kodek WebM = Theora video kodek a Vorbis audio kodek Audio Tento novy prvok je veľmi podobný ako prvok video. Je to tieţ párový tag a má podobný zápis aj atribúty. Formáty a kodeky audia Kodek audia: funguje rovnako ako kodek videa, avšak kodek audia sa zameriava iba na prúd zvuku. Najdôleţitejšie kodeky pre HTML5 sú: AAC Vorbis 39

40 Tabuľka 1: Podpora HTML5 video a audio v prehliadačoch Kontajner/kodek pre Firefox Chrome IE Opera Safari Android video/kodek pre audio Ogg/Theora/Vorbis MP4/H.264/AAC WebM/VP8/Vorbis Zdroj: Nove vlastnosti CSS3 Základnou myšlienkou HTML5 a CSS3 bolo oddeliť sémantickú a prezentačnú vrstvu. Oddelenie sémantiky a prezentácie má nespornú výhodu, sprehľadnenie kódu a zjednodušenie zápisu. Vďaka kaskádovým štýlom stačí nadefinovať vlastnosti všetkých odsekov v dokumente naraz. Nová verzia CSS3 sa líši od predchádzajúcich tým ţe s skladá z niekoľkých modulov. Túto podkapitolu som spracoval na základe webových zdrojv a kniţný zdrojov Clark R. 2012, a Goldsteinová, Selektory Selektory v CSS slúţia na určenie elementov, ktoré chceme pomocou CSS formátovať. Môţeme tak vyberať nielen podľa typu elementu (napr. všetky odseky), ale aj podľa vlastností týchto elementov. Výber elementov podľa hodnôt atribútov ^= pre atribút, ktorého hodnota začína uvedeným reťazcom $= pre atribút, ktorého hodnota končí uvedeným reťazcom *= pre atribút, ktorého hodnota obsahuje uvedený reťazec Výber elementov podľa pozície v štruktúre dokumentu :only-child - označuje jediného potomka daného elementu (nemá súrodencov) :first-of-type - označuje element, ktorý je prvým súrodencom svojho typu :last-of-type - označuje element, ktorý je posledným súrodencom svojho typu 40

41 :only-of-type - označuje element, ktorý je jedináčik (jediným súrodencom svojho typu) :nth-child(n) - označuje element, ktorý je n - tím potomkom svojho rodiča :nth-last-child(n) - označuje element, ktorý je n- tím potomkom svojho rodiča odzadu :nth-of-type(n) - označuje element, ktorý je n - tím súrodencom svojho typu :nth-last-of-type(n) - označuje element, ktorý je n- tím súrodencom svojho typu odzadu Výber elementov pomocou pseudo tried :root - označuje koreňový element dokumentu (v prípade HTML ide teda o element html) :empty - označuje prázdny element daného typu (napr. prázdny odsek) :target - označuje element, na ktorý sa odkazuje URL adresa (pomocou identifikátora za znakom #) :not(s) - označuje kaţdý element, ktorý nezodpovedá selektoru uvedenému na mieste s :enabled - označuje element formulára, do ktorého je moţné zapisovať :disabled - označuje element formulára, ktorý je needitovateľný :checked - označuje zaškrtnutý checkbox :indeterminate - označuje element formulára, ktorý nie je ani zaškrtnutý, ani prázdny Výber elementov pomocou pseudo elementov Okrem pseudo tried existujú tieţ pseudo elementy. Pseudo element je špecifická časť elementu, napr. prvé písmeno, prvý riadok, odseku a pod.. Aby sa odlišovali od pseudo tried, sa zapisujú v CSS3 za dve dvojbodky. ::first-letter označí prvé písmeno kaţdého elementu ::first-line označí prvý riadok kaţdého elementu ::after vloţí obsah za obsah elementu ::before vloţí obsah pred obsah elementu 41

42 Nový pseudo element v CSS3 ::selection označuje text, ktorý je vybraný myšou Výber podľa predchádzajúceho elementu K výberu pomocou predchádzajúceho elementu uţ slúţi operátor +. Ten však umoţňuje vybrať iba element, ktorý nasleduje bezprostredne. Preto CSS3 prináša operátor ~, ktorý umoţňuje vybrať element, ktorý má rovnakého rodiča a je umiestnený kedykoľvek po prvom elemente Farby pozadia a obrázky RGB Predstavuje model červenej, zelenej a modrej farby ktoré vytvárajú farbu pomocou troch číselných hodnôt pre jednotlivé farby. RGB pouţíva čísla medzi HSL Alternatívna metóda pre pridanie farby pomocou CSS3 je pouţiť HSL (odtieň, sýtosť, svetlosť). Je to viac intuitívna metóda, predstavme si farebný kruh ako na obrázku č. 7, odtieň reprezentuje hodnotu od stupňov. Potom nastavíme hodnoty pre sýtosť a svetlosť. Obrázok 7: farebný kruh modelu HSL Zdroj: Richard Clark s

43 Alfa Jednou z noviniek, ktorá sa v CSS3 objavuje, je nový spôsob definície farieb. RGBA (Red Green Blue Alfa) a HSLA (Hue Saturation Lightness Alfa). pričom alfa v oboch systémoch značí alfa kanál, ktorý slúţi k definícii transparentnosti. Tá je definovaná desatinným číslom v rozsahu 0-1, kde 0 je absolútne priehľadná farba a 1 absolútne nepriehľadná. Priehľadnosť (opacity) Ďalšou novou vlastnosťou je priehľadnosť. Vlastnosť má iba jednu hodnotu, číslo z intervalu <0, 1>, kde 0 je absolútne priehľadná farba a 1 absolútne nepriehľadná. Gradienty Umoţňujú zobrazovať plynulé prechody medzi dvoma alebo viacerými farbami. Vďaka tomu nemusíme sťahovať obrázky, ktoré môţu predlţiť dobu načítania a pozadie po priblíţení vyzerá lepšie, pretoţe ho generuje sám prehliadač. Syntax Gradienty sa objavili uţ pre niekoľkými rokmi. WebKit predstavil vlastnú, ale zloţitú syntax, potom ich implementoval aj Firefox s jednoduchšou a priamočiarejšou syntaxou. Neskôr v roku 2011 W3C zahrnula gradienty do CSS3 s vyuţitím vlastnej syntaxe podobnej Firefoxu. Túto novú syntax neskôr akceptoval aj WebKit. Všetky súčasné implementácie pouţívajú prefixy: Opera: -o- Mozila: -moz- Chrome/Safari -webkit- 43

44 Lineárne gradienty Smer: buď určíme začiatočný a koncový bod pomocou príkazov (left, right, top, bottom), alebo nastavíme uhol pozdĺţ ktorého sa gradient bude tiahnuť (0-360 deg). Farba: farbu môţeme určiť kľúčový slovom, hexadecimálnym kódom, RGB a pomocou HSL. Zarážky: Môţeme ovplyvniť Ako jednotlivé Farby rozloţí na osi priebehu prechodu. Slúţia k tomu zaráţky, definovateľné v beţných CSS jednotkách (%, px, em...). Obrázok 8: ukážka lineárneho gradientu Zdroj: Vlastné spracovanie v NetBeans Radiálne gradienty Pozícia: Pozícia stredu farebného prechodu za pomoci kľúčového slova at Tvar a veľkosť: Prednastavený Tvar prechodu kruţnica (circle). Moţno prednastaviť na elipsu (elipse). Druhá moţnosť je definovať veľkosť príkazom: closest-side - prechod bude končiť pri najbliţšej strany elementu farthest-side - prechod bude končiť pri najvzdialenejšie strane elementu closest-corner - prechod bude končiť u najbliţšieho rohu elementu farthest-corner - prechod bude končiť u najvzdialenejšieho rohu elementu Zarážky Farieb: Fungujú podobne ako v lineárnom prechode 44

45 Obrázok 9: ukážka radiálneho gradientu Zdroj: Vlastné spracovanie v NetBeans Pozadie Viacnásobné pozadie Syntax pre Background-image, alebo skrátene Background je vţdy rovnaká či ide o jeden, alebo viacej obrázkov. V situácií keď chceme pouţiť viac obrázkov na pozadie, stačí jednoducho oddeliť čiarkami hodnoty pre jednotlivé obrázky. Veľkosti obrázkov na pozadí Veľkosť moţno určiť aj v percentách, kedy udávame koľko percent výšky a koľko percent šírky rodičovského elementu bude zodpovedať veľkosti obrázka. Cover: Zabezpečenie, aby obrázok na pozadí stránky pokryl celú jej plochu Contain: Zmenšenie obrázku na pozadí tak, aby bol vţdy vidieť celý Pozícia obrázkov na pozadí background-clip určuje oblasť, do ktorej sa pozadie vykreslí background-origin určuje pozíciu pozadia voči elementu Obe vlastnosti majú rovnaké hodnoty s obdobným významom: border-box - pozícia je pripnutá/relatívna k okraji elementu padding-box - pozícia je pripnutá/relatívna kvýplni elementu content-box - pozícia je pripnutá/relatívna k obsahu elementu 45

46 Zaoblenie rohov (border-radius) Tento prvok obsahuje 4 číselné údaje, prvý je ľavý horný roh a postupuje sa smerom hodinových ručičiek. Udáva sa v pixeloch alebo percentách Kruhové zaoblenie: border-radius: 10px; border-top-right-radius: 10px; border-radius: 15% 15% 0 0; - rovnomerné zaoblenie všetkých rohov - zaoblenie len horného pravého rohu - zaoblenie kaţdého rohu zvlášť Elipsoidne zaoblenie border-radius: 15% 15% 0 0 / 30% 15% 0 0; - elipsoidne zaoblenie zaručíme pridaním lomítka Tiene CSS3 nám ponúka novú vlastnosť box-shadow, ktorá sa chova rovnako ako textshadow, známa z CSS2, s tým rozdielom ţe text-shadow vytvára tieň okolo textu elementu a box-shadow vytvára tieň okolo samotného bloku elementu. Parametre box-shadow: horizontálny posun v pixeloch vertikálny posun v pixeloch polomer rozmazania v pixeloch (blur) dĺţka šírenia tieňu v pixeloch (kladné hodnoty znamenajú, ţe sa tieň šíri všetkými smermi, záporné ţe sa tieň formuje podľa tvaru elementu) farba tieňa inset mení prednastavený vrhnutý tieň na vnútorný tieň Transformácia, prechody a animácia Doposiaľ keď sme chceli mať na stránke nejaké animácie, alebo text v nejakom uhle, museli sme pouţiť javascript, alebo vloţiť obrázok. Prostredníctvom CSS3 môţeme prvky nakláňať, meniť im veľkosť, presúvať ich alebo dokonca je preklápať. A to všetko bez JavaScriptu alebo dodatočných obrázkov. 46

47 Transformácie: Zo vzhľadom prvkov môţeme manipulovať pomocou transformačných funkcií. CSS3 nám ponúka dvojrozmerné aj trojrozmerné transformácie. Z dôvodu obšírnosti tejto témy si spomenieme len tie dvojrozmerné. Zmena veľkosti scale() Parametre sú násobok veľkosti v smere osi X a násobok veľkosti v smere osi Y. Ak zadáme iba jednu hodnotu, bude sa element zväčšovať v oboch smeroch rovnako. Príklad:.scale { transform: scale(1.5, 1.5 ); } Posun translate() Parametre sú veľkosť posunu v smere osi X a veľkosť posunu v smere osi Y. Posun iba jedným smerom môţeme zabezpečiť príkazmi translatex() a translatey(). Príklad:.translate { transform: translate(0, 50%); } Otočenie rotate() Parameter určuje uhol otočenia, kladné hodnoty znamená otáčanie v smere ručičkových hodiniek a záporne naopak. Hodnoty môţeme zadávať v stupňoch, radiánoch, alebo v otáčkach. Príklad:.rotate { transform: rotate(-15deg); } Zošikmenie skew() Parameter špecifikuje zošikmenie podľa osy X a Y, keď uvedieme iba jeden parameter, tak ku zošikmeniu dôjde iba na osi X. Príklad:.skew { transform: skew(-15deg); } 47

48 Obrázok 10:ukážka 4 transformácií, skew, rotate, translate, scale Zdroj: Matica matrix() Matica v sebe spája všetky 2D transformačné metódy do jedného. Maticová metóda obsahuje šesť parametrov otočenie, zmena veľkosti, posun a zošikmenie. Prechody: Prechody (transitions) umoţňujú, aby sa hodnoty CSS vlastností priebeţne menili v čase, čo umoţňuje vytvárať jednoduché animácie. Ak má prvok meniť farbu, keď na neho nabehneme myšou, s vyuţitím prechodov to môţete urobiť tak, aby odkaz prešiel z jednej farby do druhej postupne, nebude sa jednať o náhlu skokovú zmenu. Obdobným spôsobom môţete animovať aj ktorúkoľvek z transformácií CSS3, ktoré sme práve preberali, takţe naše stránky môţu byť oveľa dynamickejšie. Vlastnosti prechodov: Transition-property - prvým parametrom je vlastnosť, ktorú chceme animovať, alebo na ktorú zmenu bude prechod aplikovaný. Ak chceme aplikovať prechod na všetky vlastnosti pridáme kľúčové slovo all. Transition duration - Druhým parametrem je doba trvání přechodu v sekundách. Transition-timing-function - Tretím parametrom je spôsob, akým k prechodu dochádza. Spôsoby: plynulý prechod (linear), postupné spomaľovanie (ease), zrýchľovanie (ease-in), spomaľovanie (ease-out), prechod najprv zrýchli a potom spomalí (ease-in-out). Kubická bézierová funkcia je akýmsi spojením všetkých spôsobov ktoré sme si spomenuli. 48