3 Major Web Design Patterns

Posted on by : admin Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

All the three considered web design patterns in this research (to-the-top link pattern, breadcrumbs pattern and paging pattern) fall into the category that addresses patterns’ structural aspects in the pattern detection process. Consequently, detection of these patterns can be fulfilled through static analysis of the source code of a web page. This analysis deals with the recognition of those characteristics and elements of a pattern that are considered mostly for its implementation as well as the relationships between them. It should be mentioned that the same process of pattern detection is applicable for the other web design patterns implemented via hyperlinks.

Because there are no interactions between the elements of the considered web design patterns in this research, they can be detected through the static analysis approach and no dynamic analysis is required for their detection. The detection of web design patterns is done automatically by the system, which means that the user only starts the process and is not involved in other phases.

The static analysis approach that is used for detecting web design patterns instances in a web page parses the contents of the web page to find a web design pattern’s elements. After detecting a pattern’s elements, the relationships between those elements are also being examined. If those relationships have conformity with the definition of that pattern, the instance of the pattern will be reported as a detected pattern. Based on Beale and Bordbar [2]’s approach, this research also investigates the usage of UML class diagrams for visualization of web design patterns. The visualization, through the usage of diagram, illustrates the classes that hold the elements of each pattern as class properties and also the relationships between those classes, which, together, form the diagram of that pattern. All three considered web design patterns in this research are implemented via hyperlinks. A link is implemented with an HTML tag.

This tag has many properties such as name, id, href and more. To create a diagram for a design pattern implemented via links, each tag is considered as a class and its properties are considered as the attributes of that class. The next step is to establish the relationship between those classes, which varies from one pattern to another based on the definition of each pattern that defines those relationships. It should be noted that the design of the class diagrams considered in this research is based on the structure considered in Gamma, Helm, Johnson and Vlissides [7].

The relationships between classes are shown via arrowhead, which shows the reference that is kept between one class and the instance of another class. Different colors are also used wherever required to differentiate the role of classes in each pattern. The scenario for the application of identified detection and visualization approaches starts when a user submits a web page address in which the occurrence of specific web design patterns should be checked.

A parser will pars the code of the web page in order to find the elements required for detection of the specified web design patterns. The output of this phase is used for application of the mentioned detection approach, which results in the detection of instances of the web design patterns implemented in that web page. Moreover, a list of feedback is generated, which reports to the user the level of conformity of implemented patterns to a set of rules considered for a pattern’s implementation. Finally, detected patterns are visualized via UML class diagrams through the mentioned visualization approach. The conceptual diagram that is devised based on the reviewed approaches identifies the application of introduced detection and visualization approaches. This conceptual diagram is shown in the following section.