Tato diplomová práce obsahuje základní informace o problematice webových animací. Také popisuje implementaci praktické části této práce, tedy aplikace, která generuje ani-mace ve formátu HTML5 a SVG. Dále jsou vygenerované animace podrobeny testům, které zkoumají náročnost na HW v jednotlivých prohlížečích.
Anotace v angličtině
This thesis contains basic information about web animations. It also describes the practical part of this thesis thus implementation of an application that generates animations in HTML5 and SVG. Then the generated animations are tested on the performance of the hardware in different browsers.
Klíčová slova
HTML5, canvas, SVG, animace, JavaScript, XML
Klíčová slova v angličtině
HTML5, canvas, SVG, animation, JavaScript, XML
Rozsah průvodní práce
58 s. (106 080 znaků)
Jazyk
CZ
Anotace
Tato diplomová práce obsahuje základní informace o problematice webových animací. Také popisuje implementaci praktické části této práce, tedy aplikace, která generuje ani-mace ve formátu HTML5 a SVG. Dále jsou vygenerované animace podrobeny testům, které zkoumají náročnost na HW v jednotlivých prohlížečích.
Anotace v angličtině
This thesis contains basic information about web animations. It also describes the practical part of this thesis thus implementation of an application that generates animations in HTML5 and SVG. Then the generated animations are tested on the performance of the hardware in different browsers.
Klíčová slova
HTML5, canvas, SVG, animace, JavaScript, XML
Klíčová slova v angličtině
HTML5, canvas, SVG, animation, JavaScript, XML
Zásady pro vypracování
V úvodní části práce je nutné provést přehled problematiky implementace animací do webových stránek obecně.
Primárním cílem diplomové práce je návrh a implementace aplikace umožňující pohodlné sestavení jednoduchých animací využívajících HTML5 canvas a SVG. Takto sestavené animace bude umět aplikace, volitelně také včetně základního ovládacího panelu (začátek, konec, změna rychlosti animace, vyexportovat v podobě HTML5 kódu, uložit a následně zpřístupnit pod unikátní URL. Návrhu a implementaci aplikace by měla předcházet rešerše dostupných technologií, na jejímž základě si student vybere optimální platformu pro vývoj.
V závěrečné části práce bude provedena analýza zatížení hardware, zejména pak CPU a GPU, uživatele při přehrávání animace v různých dominantních webových prohlížečích (MS Internet Explorer, Mozilla FireFox, Google Chrome). Součástí analýzy bude též porovnání se zatížením hardware při použití jiných technologií umožňujících přehrávání podobných animací (např.: Adobe Flash, Microsoft Silverlight, Java Plug-in)
Zásady pro vypracování
V úvodní části práce je nutné provést přehled problematiky implementace animací do webových stránek obecně.
Primárním cílem diplomové práce je návrh a implementace aplikace umožňující pohodlné sestavení jednoduchých animací využívajících HTML5 canvas a SVG. Takto sestavené animace bude umět aplikace, volitelně také včetně základního ovládacího panelu (začátek, konec, změna rychlosti animace, vyexportovat v podobě HTML5 kódu, uložit a následně zpřístupnit pod unikátní URL. Návrhu a implementaci aplikace by měla předcházet rešerše dostupných technologií, na jejímž základě si student vybere optimální platformu pro vývoj.
V závěrečné části práce bude provedena analýza zatížení hardware, zejména pak CPU a GPU, uživatele při přehrávání animace v různých dominantních webových prohlížečích (MS Internet Explorer, Mozilla FireFox, Google Chrome). Součástí analýzy bude též porovnání se zatížením hardware při použití jiných technologií umožňujících přehrávání podobných animací (např.: Adobe Flash, Microsoft Silverlight, Java Plug-in)
Seznam doporučené literatury
CAGLE, Kurt. HTML5 Graphics: with SVG & CSS3. O'Reilly Media, 2011. 120 s. ISBN 978-1-4493-0447-8.
W3C pracovní specifikace HTML5: [online]. 2011 [cit. 2011-10-11]. Dostupné z WWW: [http://dev.w3.org/html5/spec/Overview.html]
W3C specifikace: SCALABLE VECTOR GRAPHICS (SVG) [online]. 2011 [cit. 2011-10-11]. Dostupné z WWW: [http://www.w3.org/Graphics/SVG/
WAGSTAFF, Sean. Animation on the Web. 1st edition. Peachpit Press, 2000. 512 s. ISBN 978-0201696875.
Seznam doporučené literatury
CAGLE, Kurt. HTML5 Graphics: with SVG & CSS3. O'Reilly Media, 2011. 120 s. ISBN 978-1-4493-0447-8.
W3C pracovní specifikace HTML5: [online]. 2011 [cit. 2011-10-11]. Dostupné z WWW: [http://dev.w3.org/html5/spec/Overview.html]
W3C specifikace: SCALABLE VECTOR GRAPHICS (SVG) [online]. 2011 [cit. 2011-10-11]. Dostupné z WWW: [http://www.w3.org/Graphics/SVG/
WAGSTAFF, Sean. Animation on the Web. 1st edition. Peachpit Press, 2000. 512 s. ISBN 978-0201696875.
Přílohy volně vložené
1 CD ROM
Přílohy vázané v práci
-
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Diplomová práce Lukáše Jandy se věnuje problematice animací používaných na webových stránkách. Dále pak diplomant provedl nastudování potřebných technologií, provedl jejich analýzu a následnou implementaci webového nástroje pro sestavení a export/import SVG animací. Dle vedoucího práce se cíle, které byly zadáním diplomové práce uloženy, podařily diplomantovi splnit v plném rozsahu s tím, že práce i přesto nabízí prostor pro další rozšiřování.