Enhancing HTML Structure Comprehension: Real-Time 3D/XR Visualization of the DOM

Understanding the Document Object Model (DOM) is crucial for web development, yet traditional 2D representations can obscure the hierarchical complexity and spatial relationships of HTML elements. This paper introduces babia-html, a component of BabiaXR, which offers a novel approach to visualizing...

Celý popis

Uloženo v:
Podrobná bibliografie
Vydáno v:Proceedings of VISSOFT (Online) s. 127 - 132
Hlavní autor: Moreno-Lumbreras, David
Médium: Konferenční příspěvek
Jazyk:angličtina
Vydáno: IEEE 06.10.2024
Témata:
Cognitive load
Complexity theory
Debugging
DOM
extended reality
html
Productivity
Real-time systems
Research and development
Software
software visualization
Streaming media
Three-dimensional displays
Visualization
web
ISSN:2832-6555
On-line přístup:Získat plný text
Tagy: Přidat tag
Žádné tagy, Buďte první, kdo vytvoří štítek k tomuto záznamu!
Popis
Shrnutí:Understanding the Document Object Model (DOM) is crucial for web development, yet traditional 2D representations can obscure the hierarchical complexity and spatial relationships of HTML elements. This paper introduces babia-html, a component of BabiaXR, which offers a novel approach to visualizing the DOM in 3D and XR for the web. Utilizing A-Frame, we develop a tool that provides real-time, three-dimensional representations of HTML structures. Additionally, we present a plugin for Visual Studio Code (VSCode) that integrates this 3D visualization directly into the development environment. Our goal is to explore how this visualization can enhance the comprehension of HTML structures, improve debugging processes, and facilitate more effective communication of structural changes within development teams. We outline the standalone capabilities of babia-html, its integration as a VSCode extension, and various use cases demonstrating its practical applications. This work provides preliminary insights into the potential benefits of 3D DOM visualization and its implications for modern web development practices, considering the potential impact on developer productivity and cognitive load, and proposing directions for future research and development. Video URL: httos://voutu.be/RFX22blBNss
ISSN:2832-6555
DOI:10.1109/VISSOFT64034.2024.00025