# Mining Domain-Specific Design Patterns: A Case Study +
## 3 The Methodology
### Phase 1: Extracting the Conceptual Models of the Websites  
In the first phase, we utilize a web crawler which crawls all of the pages of a set of websites in a target application domain and locally stores them on the user's computer, thus creating a collection of domain-specific websites. Then, we utilize the \"Conceptual Model Extractor\" tool to capture their designs by extracting their conceptual models. At the hypertext level, the conceptual model of a website specifies its composition and navigation, i.e., the organization of its front-end interfaces in terms of pages, made of design elements which are linked to support the user's navigation and interaction. Thus, the main task for automatically extracting the conceptual model of a website is to identify the organization of the front-end design elements that compose the hypertext of its HTML pages. In the context of a Joomla!-based website, the hypertext of its pages is composed by assembling a number of predefined structural and navigational design elements, which are called components and modules. A page is composed by one component, specifying the organization of content in its main part, and by a set of modules, specifying the organization of content in the peripheral positions. There is a variety of categories for components and modules, each one providing various types for interacting with the system (such as forms, confirmation buttons, etc.) and supporting alternative ways of arranging the content delivered to the end-users (e.g., blogs, lists, etc.). The content that they publish is extracted from the tables of the website's underlying database. To specify the hypertext organization for all the pages of a website, we have developed the \"Conceptual Model Extractor\" tool, as depicted in the first phase of Figure 1. This tool parses all of the locally-stored HTML pages of every website in the collection and identifies their organization as a set of components and modules. In the HTML code of a page, components and modules can be found as <div> elements having a specific HTML class attribute value (i.e., <div class = \"value\">) which characterizes them and specifies the exact type of the component-module they represent. The complete list with all the categories of Joomla! components and modules, along with their characteristic HTML class attribute values are available in [8]. Thus, by parsing the HTML code of a page and locating the occurrences of these characteristic values within it, we can recover the page's organization as a set of Joomla! design elements. For example, Figure 2a presents the Joomla! design elements identified within a page of the MMLAB educational website [19], consisting of the \"Article\" component and a set of modules such as menus, footer, etc. Once this is done for all of the pages of the websites, we manage to capture their composition and navigation, i.e., to extract their conceptual models. Then, the next step is to represent them as graphs, required for facilitating the detection of the recurrent patterns among them in the next phase. Figure 2: (**a**) The organization of a page in terms of Joomla! design elements (component and modules); and (**b**) The equivalent graph representation of the page’s hypertext. We define the conceptual model of a website as a directed graph of the form G (V, E, fv, fE), comprising a set of nodes V, a set of edges E, a node labelling function fv: V \(\rightarrow\Sigma\)v and an edge labelling function fE: E \(\rightarrow\Sigma\)E. The function fv assigns labels to the nodes in V from the alphabet \(\Sigma\)v which includes all of the different types of the Joomla! components and modules available in [8]. Similarly, function fE assign labels to the edges in E from the alphabet \(\Sigma\)E = {W_P, P_M, P_C, M_P, C_P, M_C}.