Bachelor's Thesis

Interaktivní vizuální editor pro výuku webdesignu

Final Thesis 2.45 MB

Author of thesis: Karolína Virágová

Acad. year: 2025/2026

Supervisor: Ing. Jiří Hynek, Ph.D.

Reviewer: RNDr. Libor Škarvada

Abstract:

This thesis focuses on improving the understanding of the structure of HTML documents during website development. It proposes and implements a tool that visualizes HTML elements in the form of a tree structure and integrates this representation with an HTML and CSS code editor. The system provides immediate visual feedback during code editing and enables a clear display of parent–child relationships between individual elements. The result is a tool that facilitates navigation within the code, accelerates the development process, and promotes a better understanding of the hierarchy of web documents.

Keywords:

webdesign, visual editor, educational application, interactivity, e-learning

Date of defence

16.06.2026

Result of the defence

Defended (thesis was successfully defended)

znamkaBznamka

Grading

B

Process of defence

Studentka nejprve prezentovala výsledky, kterých dosáhla v rámci své práce. Komise se poté seznámila s hodnocením vedoucího a posudkem oponenta práce. Studentka následně odpověděla na otázky oponenta a na další otázky přítomných. Komise se na základě posudku oponenta, hodnocení vedoucího, přednesené prezentace a odpovědí studentky na položené otázky rozhodla práci hodnotit stupněm B.

Topics for thesis defence

  1. Jak se řeší nabídka stylování pro třídy, které může mít více různých elementů?
  2. Jak vypadá jeden specifický scenář?
  3. Jaké jsou poznatky z testování s uživately?

Language of thesis

Czech

Faculty

Department

Study programme

Information Technology (BIT)

Composition of Committee

doc. Ing. Tomáš Martínek, Ph.D. (předseda)
doc. Ing. Michal Španěl, Ph.D. (místopředseda)
Ing. Jiří Hynek, Ph.D. (člen)
Ing. Filip Orság, Ph.D. (člen)
Ing. Vladimír Bartík, Ph.D. (člen)

Supervisor’s report
Ing. Jiří Hynek, Ph.D.

Studentka byla aktivní během celého akademického roku. Vytvořila nástroj využitelný ve výuce web designu. Výsledky prezentovala na studentské konferenci. Navrhuji hodnocení stupněm B.

Evaluation criteria Verbal classification
Information about assignment

Práce vznikla jako součást webové aplikace pro výuku webdesignu. Úkolem bylo navrhnout a implementovat interaktivní vizuální editor, který studentům umožní nejen porozumět struktuře HTML dokumentů, ale také interaktivně vytvářet dokumenty včetně specifikace stylů prostřednictvím stromové vizualizace propojené s editorem HTML a CSS kódu. Studentka musela nastudovat technologie React a TypeScript. Zadání hodnotím jako průměrně obtížné a považuji ho za splněné.

Work with literature

Studentka prostudovala doporučenou literaturu. Mimo to aktivně dohledávala zdroje týkající se webdesignu, vizuálních editorů a e-learningových aplikací.

Activity during solution, consultations, communication

Studentka komunikovala během celého akademického roku. Konzultace probíhaly online s vedoucím práce. Byla schopná samostatně řešit dílčí problémy.

Activity during completion

Některé části práce byly dokončovány na poslední chvíli a na jejich kontrolu by bylo vhodnější mít více času.

Publication activity, awards

Výsledky byly publikovány na studentské konferenci Excel@FIT 2026. Řešení je využitelné ve výuce web designu.

Points proposed by supervisor: 88

Grade proposed by supervisor: B

Reviewer’s report
RNDr. Libor Škarvada

Autorka prostudovala principy e-learningu a vizuálních editorů se zaměřením na tvorbu webových dokumentů a na její výuku. Navrhla a implementovala vlastní nástroj, který plánuje dále rozšiřovat. Práce nemá závažné chyby kromě drobných formálních nedostatků zmíněných výše.


Navrhuji hodnocení B.

Evaluation criteria Verbal classification Points
The difficulty of the assignment

Evaluation level: moderately difficult assignment

Zadání práce je průměrně obtížné. Vedlo k potřebě prostudovat značné množství literatury a navrhnout a realizovat vlasní řešení.

Presentation level of the technical report

Text práce je srozumitelný a členěný do kapitol. Kapitoly tvoří logické celky zhruba odpovídající bodům zadání.

85
Formal preparation of a technical report

Po formální stránce má práce poměrně dobrou úroveň, ale vyskytují se v ní gramatické chyby (čárky v souvětí) a překlepy a typografické nedostatky (dělení slov, psaní pomlček).

75
Realisation output

Výsledkem je funkční nástroj. Jeho funkčnost autorka předvedla při osobní konsultaci.

85
Usability of results

Nástroj lze prakticky použít pro vytváření jednoduchých webových dokumentů přehledným způsobem: vedle zdrojového textu zviditelní i jeho strukturu. Nepokrývá potřeby celé výuky webového designu, protože ještě nepodporuje pokročilé funkce (např. práci se skripty). Tyto funkce nebyly součástí zadání a lze je do programu doplnit.

The extent to which the requirements of the assignment have been met

Evaluation level: assignment fulfilled

Autorka splnila všechny body zadání. Popsala, porovnala a zhodnotila různé e-learningové systémy. Porovnala vizuální editory HTML a CSS. Do svého popisu a porovnání nezahrnula vývojářské nástroje zabudované v grafických webových prohlížečích. Navrhla a implementovala systém pro tvorbu jednoduchých webových dokumentů, svůj návrh implementovala a otestovala.

Extent of the technical report

Evaluation level: is within the usual extent

Práce má 49 stran včetně obsahu a seznamu použité literatury.

Work with literature

Seznam literatury má 66 položek, z nichž většinu tvoří časopisecké články a články ve sbornících konferencí. Část tvoří knihy a výzkumné zprávy. Zbytek nerecenzované materiály dostupné na webu, všechny řádně označené.

95
Topics for thesis defence:
  1. Jak se řeší nabídka stylování pro třídy, které může mít více různých elementů?
Points proposed by reviewer: 80

Grade proposed by reviewer: B

Responsibility: Mgr. et Mgr. Hana Odstrčilová