}w !"#$%&'()+,-./012345
M ASARYKOVA UNIVERZITA FAKULTA INFORMATIKY
Grafické uživatelské rozhraní systému pro správu závˇereˇcných prací ˇ B AKALÁ RSKÁ PRÁCE
Pavel Dedík
Brno, jaro 2013
Prohlášení Prohlašuji, že tato bakaláˇrská práce je mým puvodním ˚ autorským dílem, které jsem vypracoval samostatnˇe. Všechny zdroje, prameny a literaturu, které jsem pˇri vypracování používal nebo z nich cˇ erpal, v práci rˇ ádnˇe cituji s uvedením úplného odkazu na pˇríslušný zdroj.
Pavel Dedík
Vedoucí práce: Mgr. Filip Nguyen ii
Podˇekování Rád bych podˇekoval vedoucímu práce Mgr. Filipu Nguyenovi za jeho pomoc a rady pˇri rˇ ešení textové cˇ ásti bakaláˇrské práce.
iii
Shrnutí Práce se zabývá problematikou návrhu uživatelských rozhraní a uvádí dostupné technologie pro jejich realizaci v podobˇe webové aplikace. Druhá cˇ ást práce se zamˇerˇ uje na tvorbu informaˇcního systému pro správu závˇereˇcných prací. Dále jsou popsány použité technologie a jejich využití v systému.
iv
Klíˇcová slova informaˇcní systém, UX, UI, použitelnost, design, typografie, CSS, LESS, HTML, Twitter Bootstrap.
1 Úvod Informaˇcní systémy jsou nezbytnou souˇcástí moderní spoleˇcnosti. Prostˇrednictvím jejich nástroju˚ lidé dennˇe zpracovávají, ukládají a distribuují ohromné množství informací. Mezi uživatele informaˇcních systému˚ patˇrí lidé nejruznˇ ˚ ejších oboru˚ i národností, jejichž cílem je vždy snadná a produktivní práce – míra uplatnˇení tˇechto požadavku˚ je pˇritom závislá na kvalitˇe provedení uživatelských rozhraní. Jejich tvorba si tak žádá zvýšenou péˇci a stává se pomˇernˇe složitou disciplínou. Cílem práce je návrh a realizace uživatelského rozhraní informaˇcního systému pro správu bakaláˇrských a diplomových prací. Informaˇcní systém je urˇcen spoleˇcnosti Red Hat jako nástroj pro zadání a kontrolu závˇereˇcných prací vypsaných na partnerských fakultách. Systém zárovenˇ poskytuje rozhraní pro studenty a vedoucí z registrovaných fakult. První cˇ ást práce se zabývá tvorbou „drátˇeného modelu“ webu (anglicky se tento proces nazývá wireframing), který reprezentuje rozložení jednotlivých komponent v uživatelském rozhraní aplikace. Následující cˇ ást zahrnuje tvorbu grafického návrhu, který reprezentuje grafickou podobu prezentaˇcní vrstvy systému – jedná se o vizuální stránku webové aplikace. Finální cˇ ást se zamˇerˇ uje na integraci grafického návrhu do implementace informaˇcního systému.
3
2 Uživatelské rozhraní Uživatelské rozhraní (anglicky User Interface, zkrácenˇe UI) je vrstva systému, která zajišt’uje komunikaci mezi uživatelem a aplikací nebo zaˇrízením. Cílem každého uživatelského rozhraní je prezentace informací a poskytnutí nástroju˚ pro manipulaci se systémem. Takové systémy bývají cˇ asto zamˇerˇ eny na ruznorodé ˚ skupiny lidí odlišných národností a zamˇerˇ ení, jejich cíl je však vˇetšinou spojuje – usilují o rychlou, efektivní a intuitivní práci. Úkolem kvalitního uživatelského rozhraní je cílové skupinˇe lidí tyto vlastnosti poskytovat. [1] Je duležité ˚ poznamenat, co vlastnˇe návrh uživatelského rozhraní zahrnuje – nejedná se pouze o uspoˇrádání jednotlivých souˇcástí a vizuální stránku systému. Duležitým ˚ prvkem je také zvolení správných prvku˚ a nástroju˚ se kterými uživatelé manipulují. I v pˇrípadˇe, že uživatel pracuje se systémem poprvé, musí urˇcité elementy pusobit ˚ povˇedomˇe.
2.1
Grafické uživatelské rozhraní
Grafické uživatelské rozhraní (anglicky Graphical User Interface, dále jen GUI) je typ uživatelského rozhraní, které umožnuje ˇ jednoduchou práci s elektronickým zaˇrízením (popˇr. aplikací). Tato vlastnost je zajištˇena použitím vhodných prvku, ˚ které poskytují intuitivní nástroje s daným typem systému (napˇr. použití vhodných ikonek, tlaˇcítek, oken atd.). Na vývoj grafických uživatelských rozhraní má vliv mnoho aspektu˚ mezi nˇež patˇrí mimo jiné i zpusob ˚ interakce cˇ lovˇeka s poˇcítaˇcem. Už na zacˇ átku osmdesátých let byly vynalezeny první typy polohovacích zaˇrízení, díky kterým se postupnˇe eliminovaly nedostatky textových rozhraní – pˇredevším jejich nemožná integrovatelnost mezi bˇežné uživatele. Tím vznikla základní podoba WIMP konceptu (Windows, Icons, Menus, Pointer), která pˇredstavuje elementární rysy dnešních GUI. Pojem grafické uživatelské rozhraní bývá cˇ asto používán výhradnˇe pro oznaˇcení rozhraní, která umožnují ˇ uživatelum ˚ komunikovat s elektronickými zaˇrízeními (integrovanými napˇr. v operaˇcním systému). Tato definice je však nepˇresná, nebot’ neoznaˇcuje systémy, které operují jako tzv. tenký klient. Tenký klient je druh systému, jehož funkˇcnost je závislá na jiném zaˇrízení (serveru). Takové systémy slouží pˇredevším pro projekci informací uživateli, zatímco zpracování a ukládání dat provádí server. Pˇríkladem aplikace, která pracuje na podobném typu architektury je napˇríklad Internetový prohlížeˇc. 4
Webové uživatelské rozhraní (anglicky Web-based User Interface, dále jen WUI) je typ grafického uživatelského rozhraní, které je souˇcástí webových aplikací. Webová aplikace je typ programu, jehož funkce a nástroje jsou pˇrístupné pˇres HTTP protokol1 . Interakce mezi uživatelem a programem je pak zajištˇena webovým prohlížeˇcem. Mezi hlavní výhody webových aplikací patˇrí relativnˇe jednoduchá udržovatelnost a flexibilita. Tyto vlastnosti jsou dány povahou klient–server modelu. Jedná se o sít’ovou architekturu, která rozlišuje klienta (uživatele) a server (aplikaci). Klient–server model umožnuje ˇ vývojáˇrum ˚ udržovat pouze jednu verzi aplikace, která je multiplatformní a cˇ asto daleko bezpeˇcnˇejší a spolehlivˇejší. Nevýhodou je nižší dostupnost a vyšší odezva, která je dána kvalitou sít’ového (Internetového) pˇripojení.
1. HyperText Transfer Protocol je internetový protokol, který definuje zpusob ˚ jakým jsou data na webu formátovány a pˇrenášeny – puvodnˇ ˚ e byl tento druh komunikace zajištˇen výmˇenou pˇrevážnˇe hypertextových dokumentu, ˚ aktuální verze však podporuje i další formáty (XML, JSON, HTML, PDF atd.).
Proces tvorby uživatelského rozhraní „Proces tvorby uživatelského rozhraní je zdokumentovaný postup, který je nutné absolvovat pro dokonˇcení typického uživatelského rozhraní.“ [2]
Vývoj každého systému prochází nˇekolika fázemi, které se vˇetšinou pˇrekrývají pˇrevážnˇe z duvodu ˚ spolupráce vývojáˇru, ˚ designéru˚ a analytiku. ˚ Tyto fáze lze rozdˇelit na cˇ tyˇri cˇ ásti. Plánování Pˇredstavuje analýzu požadavku˚ klienta a cílové skupiny uživatelu. ˚ Dále je v tomto stádiu stanoven výbˇer programovacích jazyku, ˚ knihoven a dalších nástroju, ˚ které budou použity v implementaci. Design Informace shromáždˇené z pˇredchozího stádia jsou sepsány a analyzovány. Návrh doprovází vývoj struktury a vizuální podoby aplikace, pˇriˇcemž je obvykle rozdˇelen do tˇrí cˇ ástí – tvorby drátˇeného modelu, grafického návrhu a kódování šablon. Tyto kroky mají za úkol podrobnˇeji specifikovat požadavky klienta a odhalit nejasnosti v zadání ideálnˇe již na poˇcátku vývoje. Návrh probíhá pˇrevážnˇe paralelnˇe s vývojem. 6
2. U ŽIVATELSKÉ ROZHRANÍ Vývoj V této fázi jsou požadované funkce systému implementovány za použití ustanovených technologií a knihoven. Vývoj také zahrnuje verifikaci požadavku, ˚ integraci grafických návrhu˚ do systému a testování systému vˇcetnˇe použitelnosti. Spuštˇení Jedná se o poslední fázi, která prochází nejdelším cyklem. Systém je nasazen na produkci, což umožnuje ˇ hlubší testování koncovými uživateli. Zárovenˇ jsou provádˇeny poslední kroky pro vypilování použitelnosti a dokonˇcení dokumentace. Produkce uživatelského rozhraní je provázána se všemi tˇemito fázemi a zahrnuje nˇekolik aktivit, které kladou nároky na práci s ruznými ˚ nástroji a technologiemi. Tyto aktivity vyžadují rozdílné znalosti a jsou cˇ asto rozdˇeleny mezi specificky zamˇerˇ ené designéry. [2] 2.3.1 Tvorba drátˇeného modelu
Obrázek 2.3: Pˇríklad drátˇeného modelu (zdroj: http://wireframe.cc/). Webový drátˇený model (anglicky wireframe) je zjednodušená kresba, která reprezentuje rozmístˇení prvku˚ a komponent webové stránky; prezentuje strukturální úroven. ˇ Tvorba drátˇeného modelu zaujímá místo již na zaˇcátku životního cyklu projektu a slouží pro zachycení základní struktury stránky. 7
2. U ŽIVATELSKÉ ROZHRANÍ Úkol drátˇených modelu˚ je poskytnout vizuální porozumˇení stránky již na poˇcátku tvorby uživatelského rozhraní. Pˇrední výhodou drátˇených modelu˚ je jednoduchá pˇrizpusobitelnost ˚ potˇrebám klienta a jasnˇe definovaná kostra, která zajišt’uje sebeduvˇ ˚ eru designéra. V pozdˇejších fázích projektu by se nemˇel drátˇený model nijak zásadnˇe mˇenit a mˇel by odpovídat grafickému návrhu. 2.3.2 Tvorba grafického návrhu Grafický návrh poskytuje vizuální podobu webové aplikace; reprezentuje aplikaci v podobˇe, ve které bude prezentována uživateli. Tato fáze zahrnuje výbˇer grafických a typografických prvku. ˚ Mezi grafické prvky obyˇcejnˇe patˇrí kombinace barev, obrázku, ˚ tvar tlaˇcítek apod. Typografické prvky zahrnují pˇredevším organizaci písma – volbu rˇ ezu˚ a rodin písma pro odlišení jednotlivých cˇ ástí webové stránky. Dále zahrnují velikosti odstavcu, ˚ použití odrážek, rˇ ádkování atd. 2.3.3 Kódování V tomto stádiu pˇrichází na rˇ adu rozˇrezání a kódování grafického návrhu. Kódování probíhá formou HTML (HyperText Markup Language) a CSS (Cascading Style Sheets), což jsou technologie urˇcené primárnˇe pro prezentaci dokumentu˚ na webu. Kód by mˇel být psán s ohledem na W3C standard2 , zárovenˇ je doporuˇceno dodržovat osvˇedˇcené postupy3 pro zvýšení cˇ itelnosti a podpory všech populárních prohlížeˇcu. ˚
2. W3C (World Wide Web Consortium) je mezinárodní konsorcium, které se stará o vývoj webových standardu. ˚ 3. Doporuˇcené postupy pˇri vývoji HTML dokumentu˚ jsou vystaveny napˇríklad spoleˇcností Creative Technology (http://isobar-idev.github.io/code-standards/)
8
3 Design Design by mohl být definován jako aktivita, jejíž úkol je pˇrenést nápad, pˇredstavu nebo myšlenku nˇecˇ eho užiteˇcného do zpracovatelné podoby, at’ už se jedná o auto, budovu, službu nebo proces. Jde o množinu cˇ inností, jež má za úkol pomoct lidem v orientaci a uˇcinit jejich život jednodušší. Design je souˇcástí každodenního života, at’ už se nacházíme uvnitˇr budovy, na autobusovém nástupišti nebo procházíme Internetové stránky – muže ˚ se jednat o model auta, interiér budovy nebo informaˇcní systém; pˇredstavuje zpusob ˚ jak vˇeci vypadají, jak fungují a jak moc pozornosti pˇritahují nebo nepˇritahují. Existují samozˇrejmˇe pˇrípady, kdy je nežádoucí, aby design pˇritahoval pˇríliš mnoho pozornosti. Úkolem designera tedy je vžít se do role uživatele, do jeho chování a potˇreb. Pouze designeˇri mohou promˇenit koncept v nˇeco žádoucího, hodnotného a komerˇcnˇe úspˇešného. [3] Ve 2. polovinˇe 20. století se zrodil zcela nový obor anglicky nazvaný computer science. Tento obor dnes oznaˇcujeme jako informatika. Informatika má zásadní vliv na design a to nejen na samotný proces tvorby – díky informaˇcním technologiím vznikly zcela nové oblasti designu. Každá aplikace, služba nebo statická webová stránka potˇrebuje rozhraní, které bude sloužit jako vrstva komunikující s uživateli. Pˇri vzniku prvních operaˇcních systému˚ vyvstala snaha vývojáˇru˚ a designeru˚ unifikovat grafické uživatelské rozhraní. Tento druh unifikace mˇel za úkol poskytovat uživatelum ˚ intuitivní prostˇredí a tím zredukovat nutnost porozumˇet všem ruzným ˚ variacím uživatelských rozhraní grafických aplikací. S rozšíˇrením Internetu se toto úsilí pˇrenáší pˇredevším na designéra a spoleˇcnost je tak vystavena daleko vˇetšímu množství nových grafických rozhraní a technologií. Tento trend je zodpovˇedný za vznik mnoha nových pojmu˚ a konvencí. Mezi designery se v posledních letech rozšíˇrilo nˇekolik nových termínu, ˚ které mají za úkol jednoznaˇcnˇe rozlišit jednotlivé cˇ innosti a profily webdesignu. Podstatou tˇechto pojmu˚ je zárovenˇ usnadnˇení komunikace mezi designéry, mezi ty nejpodstatnˇejší patˇrí: • Použitelnost (Usability), • UI (User Interface), • UX (User eXperience). Definované pojmy se navzájem prolínají a jejich primárním cílem je specifikace zásad a doporuˇcení pro úspˇešné dokonˇcení tvorby uživatelského 9
3. D ESIGN rozhraní. V rámci jejich vysvˇetlení budu používat termín „produkt“, který pˇredstavuje aplikaci, elektronické zaˇrízení, nebo službu.
3.1
Použitelnost
Použitelnost je soulad užiteˇcnosti a jednoduchosti použití. Produkt je použitelný pokud: • je pro uživatele užiteˇcný a vyhovuje jeho potˇrebám; • je jednoduché nauˇcit se produkt používat; • je efektivní produkt používat – zabere málo cˇ asu vykonat nˇejaký úkol; • je produkt málo náchylný na chyby. Dobˇre použitelný produkt musí do jisté míry splnovat ˇ všechny tyto body. Existuje mnoho produktu, ˚ které jsou natolik složité, že vˇetšinu uživatelu˚ odradí od normálního používání (pokud ovšem mají možnost volby). ˇ Casto se pˇritom jedná o vysoce užiteˇcné a produktivní aplikace – typickým pˇríkladem jsou informaˇcní systémy, které obsahují ohromné množství dat a nástroju˚ se kterými musí uživatelé manipulovat. Mezi nˇekteré typické pˇríklady špatné použitelnosti u webových aplikací patˇrí napˇríklad absence vyhledávaˇce, nutnost registrace pro zobrazení vˇetšiny obsahu nebo dlouhé registraˇcní formuláˇre a neˇcitelná CAPTCHA1 . Použitelnost lze pˇritom snadno zvýšit dodržováním urˇcitých zvyklostí. Jako jedna z duležitých ˚ vlastností dobˇre použitelných aplikací je cˇ asto oznaˇcována typografie (viz 3.4), jejíž správné provedení však vyžaduje hlubší znalosti.
3.2
UI design
UI design zahrnuje práci designeru, ˚ kteˇrí vytváˇrejí hmatatelné prvky se kterými uživatele pracují. UI designeˇri se soustˇredí na vizuální podobu a použitelnost produktu. Použitelnost je tedy nutnou souˇcástí kvalitních uživatelských rozhraní. Uživatelské rozhraní webových aplikací prošlo v posledních letech zásadním vývojem – za tento vývoj je zodpovˇedná pˇredevším zvýšená podpora webových technologií (HTML, CSS a JavaScriptu) a s tím související 1. Akronym pro Completely Automated Public Turing test to tell Computers and Humans Apart, jedná se o techniku urˇcenou pro odlišení skuteˇcného uživatele od (Turingova) stroje.
10
3. D ESIGN popularita majoritních webových prohlížeˇcu. ˚ Ještˇe nedávno patˇril mezi nejpopulárnˇejší prohlížeˇce Internet Explorer, který má dodnes nejhorší podporu moderních webových technologií. Díky konkurence ostatních prohlížeˇcu˚ se zvyšuje „svoboda“ designéru˚ a kodéru, ˚ kteˇrí nejsou omezováni vlastnostmi starších technologií.
3.3
UX design
UI design je cˇ ást produktu, se kterou pˇrichází uživatel do kontaktu, když se na produkt podívá. UX design je pocit nebo dojem, který produkt vyvolává, když jej uživatel používá [4]. UI design je nutnou souˇcástí UX designu, stejnˇe jako je použitelnost souˇcástí UI designu (viz obrázek 3.1).
UX UI Použitelnost Užitečnost
C
el
ko
co
ro
du
va
Sp
t.
Produkt je pro uživatele užitečný a vyhovuje jeho potřebám.
kte
Pro vý
d oje
m j e je n o d
d u kt
é duch
d o bř e v y p a
pr
a
d á.
m z produktu je velm
ik
n la d
ý.
Obrázek 3.1: Podíl UX, UI a použitelnosti v designu. 11
3. D ESIGN Pˇríklady nˇekterých vlastností a kvalit, které mají vliv na dobrý UX design webových aplikací: • Obsah. Kvalita obsahu, struktura textu a dalších typografických prvku. ˚ • Výkon. Rychlost aplikace a její dostupnost. • Diskuze. Podpora diskuzí, hodnocení produktu. ˚ • Zpusob ˚ platby. Napˇríklad platba kartou, PayPal atd. • Reklama. Výskyt reklam a jejich zpusob ˚ zobrazení. [5]
3.4
Typografie „Typografie je organizace písma v ploše“ [6]
Typografie je ještˇe starší než samotný design, její poˇcátky sahají do 15. století, kdy Johannes Gutenberg vynalezl knihtisk. Už tehdy si typografové uvˇedomovali její duležitost. ˚ Bˇehem nadcházejících století se typografie rozšíˇrila do novin, informaˇcních systému˚ a reklam. Popularita typografie mˇela za následek rozvoj mnoha rodin písma, jejichž moderní modifikace se používají i u dnešních elektronických zaˇrízení. [7] „Webdesign je z 95 % o správné typografii“ [8]. Toto tvrzení vychází ze skuteˇcnosti, že 95 % informací na Internetu se nachází v písemné podobˇe. Aˇckoliv je toto sdˇelení spíše nadsázkou, pˇredstavuje duležitost ˚ a vážnost typografie. Typografie je zásadním prvkem pro tvorbu webových aplikací, jedná se o primární zpusob ˚ pˇrenosu informací mezi aplikací a uživatelem, což klade urˇcité nároky na kvalitní uživatelská rozhraní. Vzhledem k faktu, že knižní typografie prošla dlouholetou evolucí a pokrokem, je velkou inspirací i pro typografii na webu. [9]
3.4.1 Volba cˇ itelných fontu˚ Pro nadpisy a podnadpisy je doporuˇceno používat patkové písmo, nebot’ je cˇ itelnˇejší, naopak pro text vysázený nižší velikostí písma bezpatkové. Toto doporuˇcení vychází ze skuteˇcnosti, že displeje s nízkým PPI (poˇctem pixelu˚ na palec) radikálnˇe snižují cˇ itelnost patkových fontu. ˚ [10] 12
3. D ESIGN 3.4.2 Šíˇrka odstavcu˚ Pˇríliš dlouhé rˇ ádky textu snižují koncentraci cˇ tenáˇre – tento jev je dán nezbytností získat pˇredstavu o tom, kde rˇ ádek konˇcí a kde nový zaˇcíná. Naopak krátké rˇ ádky nutí návštˇevníka cˇ íst pˇríliš pˇrerušovanˇe. Délka odstavce by mˇela odpovídat pˇribližnˇe 55–90 znakum ˚ na rˇ ádek. [10] 3.4.3 Velikost písma Minimální doporuˇcovaná velikost písma je 16 px, což je pˇribližnˇe stejná velikost, jako velikost textu vytištˇeného v knize nebo magazínu. [11] [10] 3.4.4 Velikost okraju˚ Okraje oddˇelují duležitý ˚ obsahu od ménˇe významných cˇ ástí webu a dovolují cˇ tenáˇri soustˇredit se na text. Doporuˇcený pomˇer okraju˚ na webu je 2 : 3 : 4 : 32 , velikost okraju˚ pak 2 em : 3 em : 4 em : 3 em, kde 1 em je roven dvojnásobku velikosti fontu. [10] ˇ 3.4.5 Rádkování Podobnˇe jako šíˇrka odstavcu˚ i rˇ ádkování ovlivnuje ˇ nutnost zvýšené koncentrace cˇ tenáˇre. Minimální doporuˇcené rˇ ádkování je 1.3 em, je však závislé na stˇrední výšce použitého fontu. 3.4.6 Kontrast textu Kontrast má velký vliv na cˇ itelnost, nízký kontrast zvyšuje únavu oˇcí, naopak pˇríliš vysoký kontrast pusobí ˚ dráždivˇe [12]. Jedna z doporuˇcených kombinací je tmavˇe šedý text na bílém podkladu.
2. V pomˇeru vrchní strana : pravá strana : spodní strana : levá strana.
13
3. D ESIGN
Obrázek 3.2: Pˇríklad webové stránky, kde autor použil výhradnˇe typografické prvky. Na stránce si mužeme ˚ všimnout použití pouze jedné rodiny písma. Zdroj: http://informationarchitects.net/.
14
4 Webové technologie Znaˇckovací jazyky (anglicky Markup languages) jsou formální jazyky, které umožnují ˇ v rámci rozšíˇrení textu v pˇrirozeném jazyce syntakticky rozlišit jednotlivé konstrukce pro vymezení struktury textu a jeho významu; dále umožnují ˇ ukládat napˇríklad informace o puvodu, ˚ obsahu a autorských právech dokumentu. [13] [14] Pˇríklady nejrozšíˇrenˇejších znaˇckovacích jazyku: ˚ • XML (eXtensible Markup Language) – vysoce flexibilní metajazyk urcˇ ený pro popis nejruznˇ ˚ ejších typu˚ dat, které jsou cˇ itelné jak cˇ lovˇekem, tak poˇcítaˇcem. • HTML (HyperText Markup Language) – jazyk urˇcený pro publikaci stránek na webu. • XHTML (eXtensible HyperText Markup Language) – stejnˇe jako HTML slouží pro popis dat webových dokumentu, ˚ avšak za použití XML syntaxe. • TEX, LATEX– jazyky urˇcené pˇrevážnˇe pro sazbu matematických a akademických dokumentu. ˚ • SVG (Scalable Vector Graphics) – slouží pro popis vektorových obrázku˚ s využitím XML syntaxe. • JSON (JavaScript Object Notation) – znaˇckovací jazyk odvozen z JavaScriptu1 , který je používán pro ukládání a pˇrenos textových informací. Na rozdíl od XML je cˇ itelnˇejší a ménˇe datovˇe objemný (viz srovnání XML dokumentu a JSON dokumentu – pˇríklad 1). • Markdown – minimalistický znaˇckovací jazyk speciálnˇe navržen pro sazbu kratších textu. ˚ Markdown používají pˇrevážnˇe systémy pro správu 2 obsahu na webu . 1. JavaScript je skriptovací dynamicky typovaný jazyk urˇcen primárnˇe pro rozšíˇrení HTML dokumentu o dynamické chování na stranˇe klienta. 2. Systémy pro správu obsahu (anglicky Content Management System, zkrácenˇe CMS) jsou systémy primárnˇe urˇcené pro publikaci, editaci a modifikaci obsahu na webu bez nutnosti porozumˇení složitˇejší syntaxe znaˇckovacích jazyku. ˚
15
4. W EBOVÉ TECHNOLOGIE
5
< c a r i d ="123" > F e r r a r i F430 < c l a s s > S p o r t s car
1
{
1 2 3 4
" car " : { " id " : " 1 2 3 " , " name " : " F e r r a r i F430 " , " c l a s s " : " Sports car " }
2 3 4 5 6 7
}
Pˇríklad 1: Porovnání XML dokumentu (nahoˇre) a JSON dokumentu (dole). Stylovací jazyky (anglicky Stylesheets languages) jsou formální jazyky, které umožnují ˇ definovat strukturu, význam a vizuální podobu XML nebo HTML dokumentu. ˚ Na rozdíl od znaˇckovacích jazyku˚ popisují jak mají být jednotlivé elementy vykresleny (napˇr. na displejích nebo v tisku). [14] Pˇríklady stylovacích jazyku: ˚ • CSS (Cascading StyleSheets) – jazyk specificky urˇcený pro popis vizuální stránky dokumentu˚ napsaných v nˇekterých znaˇckovacích jazycích (pˇredevším HTML). • XSL (eXtensible Stylesheet Language) – rodina jazyku˚ urˇcených pro prezentaci a transformaci XML dokumentu. ˚ • SASS (Syntactically Awesome StyleSheets) – nestandardizovaný stylovací jazyk, který rozšiˇruje CSS o dynamické chování (umožnuje ˇ definovat napˇríklad promˇenné, makra nebo funkce). • LESS (Leaner CSS) – alternativa SASS.
4.1
HTML
HTML se vyvíjí již od roku 1990, od roku 1995 jako W3C standard, bˇehem této doby prošlo mimoˇrádným vývojem, díky kterému dnes mohou autoˇri vytváˇret komplexní stránky obsahující audio, video nebo 3D animace. Každá HTML stránka musí zaˇcínat deklarací doctypu, který stanovuje verzi dokumentu. Následuje koˇrenový element , který uzavírá zbytek dokumentu. Obsah koˇrenového elementu zaˇcíná deklarací elementu 16
4. W EBOVÉ TECHNOLOGIE , který slouží pro popis dokumentu (typicky zahrnuje napˇríklad CSS styly), následuje element , který definuje viditelný obsah na stránce (viz pˇríklad 2). 1 2 3 4 5
. . . . . .
Pˇríklad 2: Základní struktura HTML 5 dokumentu. 4.1.1 HTML 5 HTML 5 je zcela nový W3C standard pro tvorbu webových stránek, který nahrazuje více než deset let starý standard HTML 4.01. Aˇckoliv je tento nový standard stále ve fázi Candidate Recommendation (zkrácenˇe CR) [15], je webovými prohlížeˇci široce podporován. Mezi nˇekteré nové nástroje a vylepšení patˇrí: • zjednodušený doctype – ; • podpora multimédií – elementy
