a browser based application which provides complete syntactical structure ... software to run. It works on all browsers. ... Electron Devices, vol. ED-11, no. 1, pp.
International Journal of Innovations & Advancement in Computer Science IJIACS ISSN 2347 – 8616 Volume 4, Special Issue March 2015
.
A language visualization tool for HTML M Shiva Prasad, M.Tech (CSE),J UMA MAHESH , M.Tech (CSE),M.B.A BHARAT INSTITUTE OF ENGINEERING AND TECHNOLOGY Abstract—The Language Visualization Tool is a browser based application which provides complete syntactical structure of HTML language in a visual representation. This helps the programmer in understanding all sort of possibilities in writing syntax at any particular instant.it can made available anywhere through bowser. This application is designed to reduce confusion and complexity of a programmer in writing a sentence at a particular instant. Index Terms—visualization, jquery, Finite automata, JavaScript, HTML DTD. I. INTRODUCTION Programming languages help in communicating with machine and user in solving a computational problems. Language sentences are translated into set of instructions. A language is an organized syntactical structure. Programming languages are learnt as conceptual and various problem solving methods. The approach gives maximum knowledge of solving problems of repetitive things. It takes time to identify less time consuming code, total possibilities writing a sentence at particular instant and what is the flow of syntactical structure. HTML Language visualization is a part of visualization procedurethat allows complete view of the whole syntactical structure of the language. A tree like structure contains parent and child nodes. Sub nodes represent next possible syntactical structure and so on.
34
M Shiva Prasad, J UMA MAHESH
II. APPLICATION OVERVIEW At present Learning a programming language is represented in conceptual wise. The complete syntactical notations and maximum possible sentences that can be written as a pictorial representation may not be provided through documentation. In proposed System, application provides complete syntactical representation right from begin to end .it also provides all possible ways to write syntax at any position in a convenient and interactive way with in a single page. III. SYSTEM DESCRIPTTION The application is a webpage which encompasses the complete structure of HTML language. It is represented as nodes and edges. These nodes and edges adjust themselves and will not overlap with other if dragged to some location with in canvas. The framework is implemented using physics properties of repulsion and gravity force between two nodes when dragged. Nodes are represented in two forms, rectangle and dot. Rectangle node is a tag and dot is an intermediate node to a set of tags. These intermediate nodes help in reducing no. of edges in the canvas. The directional edges give a clear representation of flow of syntactical structure. The application is concentrating on elements of html. It doesn’t require extra software to run. It works on all browsers. The language specification is taken from w3c organization’s HTML 4.01 Document type definition (DTD). Application includes arbor JavaScript library in visualizing the graph.
International Journal of Innovations & Advancement in Computer Science IJIACS ISSN 2347 – 8616 Volume 4, Special Issue March 2015
.
Nodes are in two colors red and black. To recognize the Root node in the canvas it is indicated as red color. Black nodes as child and sub Childs of root node. The graphconstructs Finite Automata transition diagram from theory of automata. IV. IMPLEMENTED METHODOLOGY It is a browser based application implemented using JavaScript and jQuery. Include arbor.js library in displaying nodes and edges. The standard html 4.01 specificationDTD is considered in visualizing complete language. In practical system, addjQuery filein arbor.js library pathin for example Following are steps in creating the application 1. Create a custom sizecanvas with canvas element. 2. Create ParticleSystem object to initializes the arbor system. 3. Set the gravity between the nodes with parameters method, exmple 4. renderer method which is used to draw the nodes on screen. example sys.renderer = Renderer("#viewport") ; 5. create nodes with addNode method of ParticleSystem object 6. nodes are linked with addEdge method of ParticleSystem object 7. directed edges provide path from root node to any node. Figure 1.1 Visual representation of HTML language
V. LIMITATION 1. The application works with library of arbor.js and jquery. Browsers should support html 4 and above. 2. All html elements are displayed on the screen at a time. VI. CONCLUSION The webpage helps in learning a language with a pictorial representation of complete syntactical structure which helps in utilizing all possibilities which is difficult to present as a document file. VII. FUTURE WORK 1. Making use of the mouse to display the required child nodes. 2. Converting any web page into a hierarchal structure of nodes and edges. 3. The attributes and events of elements are to be displayed. 4. The above listed features are to be incorporated into the application tool for use with other languages.. REFERENCES Basic format for books: [1] Steven Holzner, ―HTML introduction and list of Tags,‖ in HTML BACK BOOK2ndEd. New Delhi, India [2] USA: Abbrev. of Publisher, year, ch.x, sec. x, pp. xxx–xxx.Examples: [3] CodeyLindly,―JavaScript Hierarchy of Node Objects ‖in DOM Enlightment,1st ed., ,O ’ R e l l y , CA , USA, 2013,ch 1 pp1-2. [4] W.-K.Chen,LinearNetworksandSystems. [5] Belmont, CA:Wadsworth, 1993, pp. 123–135.
[6] J. U. Duncombe, ―Infrared navigation—Part I: An assessment of feasibility,‖ IEEE Trans. Electron Devices, vol. ED-11, no. 1, pp. 34–39, Jan. 1959. [7] E. P. Wigner, ―Theory of traveling-wave optical laser,‖Phys. Rev.,vol. 134, pp. A635– A646, Dec. 1965.
35
M Shiva Prasad, J UMA MAHESH
