Komponenty pro výukový materiál - HTML elementy Canvas a SVG

Lukáš LEDVINA

Bakalářská práce

Components for educational material - HTML elements Canvas and SVG

Anotace:

Cílem této bakalářské práce je uvedení do problematiky a základů dvourozměrné grafiky, jak vektorové, tak bitmapové, a její následné animace ve webovém prostředí. Na začátku se práce věnuje definování základních tvarů elementů SVG a Canvas. Další část je věnována popisu animačních možností obou elementů. Třetí kapitola je zaměřena na analýzu volně dostupných ECMAScriptových knihoven, které je možné použít pro práci s oběma elementy. Hlavním kritériem byla určena vizualizace, a to především vzhledem k tématu bakalářské práce. V praktické části práce bylo důležité vytvoření sady příkladů (https://codepen.io/fpe-zcu-tutorial) a e-kurzu. Příklady jsou editovatelné, přičemž je zároveň vidět jejich výsledná podoba. K tomuto bylo užito vývojářské sociální prostředí CodePen. Online kurz je provozován v univerzitním prostředí Moodle. S tímto řešením se mohou studenti připojit do kurzu pomocí STAGu (https://moodle.athos.zcu.cz/course/view.php?id=23).

Abstract:

The aim of my bachelor thesis is stating the basis of 2-D graphics, both vector and bitmap, and its subsequent animation on web. In the beginning the work deals with the definition of the basic forms of the SVG and Canvas elements. The next part is devoted to description of possibilities of animation of both elements. The third chapter is focused on the analysis of the accessible ECMA Script libraries, which can be used for work with both elements. The main criterion was the visualization, primarily due to the topic of the bachelor thesis. The important part of the practical section of the work was to create a set of examples (https://codepen.io/fpe-zcu-tutorial) and the e-course. The examples can be edited, while the final look can be viewed at the same time. This was done by the social development environment CodePen. The online course runs on the university environment Moodle. With this solution students can join the course through STAG (https://moodle.athos.zcu.cz/course/view.php?id=23).

Klíčová slova

SVG, Canvas, animation, počítačová grafika, ECMAScript, SMIL, vektorová grafika, bitmapová grafika, D3, BonsaiJS, Raphaël, Paper, Highcharts, Chart, JavaScript InfoVis Toolkit, PixiJS, Plotly.

Jazyk práce: čeština

Datum vytvoření / odevzdání či podání práce: 1. 7. 2019

Zveřejnit od: 31. 12. 2999

Obhajoba závěrečné práce

• Vedoucí: PhDr. Tomáš Přibáň, Ph.D.

ZÁPADOČESKÁ UNIVERZITA V PLZNI

Fakulta pedagogická

Bakalářský studijní program / obor:
Přírodovědná studia / Informatika se zaměřením na vzdělávání