In education, we constantly offer tutorials for students where we present them knowledge on how current computer network sytems work. A key component is the understanding of network communication models such as the ISO/OSI reference model. In a Computer Networks course it is often hard for students to understand all packaging mechanisms because they are extensive, abstract and often hard to comprehend. So packet tracers such as Wireshark/etheral are used to view and understand the theoretical concepts in practise. However, these programs are are often also complex, text-based and capture lots of more traffic than required for the current question.
The main objective is to implement a simple, graphical, web-based network packaging visualizer for educational purposes. At first, a brief general market overview should be performed on what kind of network simulators and packet tracers actually exist and what are their strengths and weaknesses. Following, several use cases should be defined which key functionalities are relevant for our tutorials. For instance, we want to define two communcation devices located in two separate sub networks that want to communicate via HTTP and a DNS name resolution. A simple web application should allow it to define such a scenario (e.g. through Drag and Drop) and then simulate and display the actual packaging and unpackaging process in an Ethernet-IP/ARP-TCP/UDP-Application protocol layer environment where all necessary header field values are constantly and in a step-by-step fashion displayed.