Patent Publication Number: US-10331774-B2

Title: System and methods for designing artifacts associated with a webpage

Description:
PRIORITY CLAIM 
     This U.S. patent application claims priority under 35 U.S.C. § 119 to India Application No. 2887/MUM/2013, filed Sep. 5, 2013. The aforementioned application is incorporated herein by reference in its entirety. 
     TECHNICAL FIELD 
     The present disclosure generally relates to systems and methods for designing a webpage and, more particularly, to systems and methods for designing artifacts associated with a webpage in a web development environment. 
     BACKGROUND 
     In developing web-based applications, features may depend on code structures. For example, features may be based on writing codes and modifying codes. Designing of webpages is becoming more advanced because many features may be customized according to the user&#39;s requirements. Moreover, a user may control the design of various artifacts and may modify the artifacts based on the requirements. However, designing features for web application involves generation of generalized code and thus modifying the artifacts may create additional complexity. 
     Traditionally, to provide user-customized style specifications, methods for updating code to provide a user specific web application may be used. However, these methods may also have certain drawbacks. For example, updating code may bloat the code generators. Updating code may also conflict with the generic nature of code generation strategies, which may lead to maintenance problems for product lines. Moreover, the process for updating code may also require additional time overhead for testing. Further, the process of updating code associated with web development may also cause browser compatibility issues. In general, the above described issues may be referred to as scripting and styling issues. 
     SUMMARY 
     This summary is provided to introduce aspects related to systems and methods for designing artifacts associated with a webpage in a web development environment, and the aspects are further described below in the detailed description. This summary is not intended to identify essential features of the claimed subject matter nor is it intended for use in determining or limiting the scope of the claimed subject matter. 
     In one embodiment, a system for designing artifacts associated with a webpage is provided. The system may include one or more processors and a memory storing processor-executable instructions that, when executed by the one or more processors, configure the one or more processors to: identify a style pattern based on an HTML pattern of the webpage and one or more boundary conditions specified by the user; determine one or more editing operations to be performed on the artifacts based on one or more style specifications specified by the user; perform the one or more determined editing operations on the artifacts based on values associated with at least one of the artifacts, the style pattern, and the boundary conditions; and render a design of the artifacts based on the performance of the editing operations. 
     In one embodiment, a method for designing artifacts associated with a webpage is provided. The method may include identifying, by one or more processors executing programmed instructions stored in a memory, a style pattern based on an HTML pattern of the webpage and one or more boundary conditions specified by the user; determining, by the one or more processors, one or more editing operations to be performed on the artifacts based on one or more style specifications specified by the user; performing, by the one or more processors, the one or more determined editing operations on the artifacts based on values associated with at least one of the artifacts, the style pattern, and the boundary conditions; and rendering, by the one or more processors, a design of the artifacts based on the performance of the editing operations. 
     In one embodiment, a non-transitory computer program product having embodied thereon computer program instructions for designing artifacts associated with a webpage is provided. The computer program instructions may include instructions for configuring a processor to perform operations comprising: identifying a style pattern based on an HTML pattern of the webpage and one or more boundary conditions specified by the user; determining one or more editing operations to be performed on the artifacts based on one or more style specifications specified by the user; performing the one or more determined editing operations on the artifacts based on values associated with at least one of the artifacts, the style pattern, and the boundary conditions; and rendering a design of the artifacts based on the performance of the editing operations. 
    
    
     
       BRIEF DESCRIPTION OF DRAWINGS 
         FIG. 1  illustrates an exemplary network environment including a system for designing artifacts, in accordance with an embodiment of the present disclosure. 
         FIG. 2  illustrates an exemplary system for designing artifacts in accordance with an embodiment of the present disclosure. 
         FIG. 3  is a flow chart illustrating an exemplary method for designing artifacts in accordance with an embodiment of the present disclosure. 
         FIG. 4  is a flow chart illustrating an exemplary method for designing artifacts of a webpage in accordance with an embodiment of the present disclosure. 
         FIG. 5  illustrates an exemplary flow of data for designing the artifacts of a webpage in accordance with an embodiment of the present disclosure. 
     
    
    
     DETAILED DESCRIPTION 
     Exemplary embodiments are described with reference to the accompanying drawings. While examples and features of disclosed principles are described herein, modifications, adaptations, and other implementations are possible without departing from the spirit and scope of the disclosed embodiments. It is intended that the following detailed description be considered as exemplary only, with the true scope and spirit being indicated by the following claims. The words “comprising”, “having”, “containing”, and “including”, and other forms thereof, are intended to be equivalent in meaning and be open ended in that an item or items following any one of these words is not meant to be an exhaustive listing of such item or items, or meant to be limited to only the listed item or items. 
     It must also be noted that as used herein and in the appended claims, the singular forms “a”, “an”, and “the” include plural references unless the context clearly dictates otherwise. Although any systems, methods, apparatuses, and devices similar or equivalent to those described herein can be used in the practice or testing of embodiments of the present disclosure, exemplary systems and parts are now described. In the following description, for the purpose of explanation and understanding, reference has been made to embodiments for which the intent is not to limit the scope of the claimed subject matter. 
     Embodiments of systems, methods, and computer program products for designing artifacts associated with a webpage are disclosed. For example, a user may customize a webpage by selecting one or more values of the artifacts. The user may also specify certain boundary conditions for the design of the artifacts. The boundary conditions and a Hyper Text Markup Language (HTML) pattern of the webpage may be used to specify a style pattern. The style pattern, the boundary conditions, and the values of the artifacts may be processed to execute one or more editing operations on the artifacts. The editing operations may also be controlled by referring to a style specification as specified by the user. 
     While aspects of the described systems and methods for designing artifacts of a webpage may be implemented in any number of different computing systems, environments, and/or configurations, the embodiments are described in the context of the following exemplary system. 
       FIG. 1  illustrates an exemplary network environment  100  including a system  102  for designing artifacts of a webpage. A user may customize the webpage based on the user&#39;s requirement. For example, the user may customize the webpage by designing various artifacts of the webpage. The system  102  may receive inputs in a form of, for example, boundary conditions and values of artifacts. In some embodiments, editing operations may be performed on the artifacts and design changes may be displayed as a preview to the user in real time. The design of the artifacts may be customized at any stage by the user. 
     In the present subject matter, while the system  102  may be implemented using an application on a server, it is appreciated that the system  102  may also be implemented in a variety of computing systems, such as a laptop computer, a desktop computer, a notebook, a workstation, a mainframe computer, a server, a network server, etc. It is also appreciated that the system  102  may be accessed by multiple users through one or more user devices  104 - 1 ,  104 - 2 , . . .  104 -N (collectively referred to as user devices  104  hereinafter) or applications residing on the user devices  104 . Examples of the user devices  104  may include, but are not limited to, a portable computer, a personal digital assistant, a handheld device, and a workstation. The user devices  104  may be communicatively coupled to the system  102  through a network  106 . 
     In one embodiment, the network  106  may be at least one of a wireless network and a wired network. The network  106  can be implemented as one or more of the different types of networks, such as intranet, local area network (LAN), wide area network (WAN), the Internet, etc. The network  106  may either be a dedicated network or a shared network. The shared network may represent an association of the different types of networks that use a variety of protocols (e.g., Hypertext Transfer Protocol (HTTP), Transmission Control Protocol/Internet Protocol (TCP/IP), Wireless Application Protocol (WAP), etc.) to communicate with one another. Further, the network  106  may include a variety of network devices, including, for example, routers, bridges, servers, computing devices, storage devices, etc. 
     Referring now to  FIG. 2 , the system  102  is illustrated in accordance with an embodiment of the present subject matter. In one embodiment, the system  102  may include at least one processor  202 , an input/output (I/O) interface  204 , and a memory  206 . The at least one processor  202  may be implemented as one or more microprocessors, microcomputers, microcontrollers, digital signal processors, central processing units, state machines, logic circuitries, and/or any devices that manipulate signals based on operational instructions. Among other capabilities, the at least one processor  202  may be configured to fetch and execute computer-readable instructions stored in the memory  206 . 
     The I/O interface  204  may include a variety of software and hardware interfaces, for example, a web interface, a graphical user interface, and the like. The I/O interface  204  may allow the system  102  to interact with a user directly or through the client devices  104 . Further, the I/O interface  204  may enable the system  102  to communicate with other computing devices, such as web servers and external data servers (not shown). The I/O interface  204  can facilitate multiple communications within a wide variety of networks and protocol types, including wired networks (e.g., LAN, cable network, etc.) and wireless networks(e.g., WLAN, cellular networks, and/or satellite networks). The I/O interface  204  may include one or more ports for connecting a number of devices to one another or to another server. 
     The memory  206  may include any non-transitory computer-readable medium including, for example, volatile memory (e.g., static random access memory (SRAM) and dynamic random access memory (DRAM)) and/or non-volatile memory (e.g., read only memory (ROM), erasable programmable ROM, flash memories, hard disks, optical disks, and magnetic tapes). The memory  206  may include modules  208  and data  210 . 
     The modules  208  may include routines, programs, objects, components, data structures, etc., which may perform particular tasks or implement particular abstract data types. In one embodiment, the modules  208  may include a screen modeling module  212 , a control module  214 , an editing module  216 , a generating module  218 , and/or other modules  219 . The other modules  219  may include programs or coded instructions that supplement applications and functions of the system  102 . 
     The data  210 , in some embodiments, may serve as a repository for storing data processed, received, and/or generated by one or more of the modules  208 . The data  210  may also include a database  222 , a style modeling repository  214 , and/or other data  130 . The other data  130  may include data generated as a result of the execution of one or more modules in the other modules  219 . 
       FIG. 3  is a flow chart illustrating an exemplary method  300  for designing artifacts in accordance with an embodiment of the present disclosure. Method  300  will be further described below.  FIG. 4  is a flow chart illustrating an exemplary method  400  for designing artifacts of a webpage in accordance with an embodiment of the present disclosure.  FIG. 5  illustrates an exemplary data flow  500  for designing the artifacts of a webpage in accordance with an embodiment of the present disclosure. 
     Referring to  FIGS. 4 and 5 , the system  102  may be implemented, for example, using a cascading style sheet (CSS) by using a model view controller (MVC) framework. The user interface  204  may be configured to allow a user to select values of artifacts. In some embodiments, to modify or design the artifacts for further designing the webpage or the style specifications of the webpage, the user may press a key up and down to swap between or go through the available values of the artifacts. Via the user interface  204 , the user may also provide or customize one or more boundary conditions of the artifacts to design the webpage. The boundary conditions may enable the designing of the webpage according to an HTML pattern of screen. The user may design or change the artifacts for designing or customizing the webpage with respect to the user&#39;s requirement. 
     The artifacts may further comprise, for example, one or more text patterns, colors, fonts, background images, background colors, borders, margins and padding height, width, etc. 
     Referring to  FIG. 5 , the screen modeling module  212  may identify a style pattern based on an HTML pattern of the webpage and the boundary conditions as specified by the user. These boundary conditions may be specified as, for example, a boundary listener ( 215 ). In some embodiments, the artifacts may be designed only for specific HTML patterns. As a result, if the HTML pattern is identified, the user may specify the boundary conditions and may work on any HTML patterns. The system  102  may provide boundary conditions such as a text box, a dropdown, etc. The boundary conditions may include a web control that is surrounded by at least one span/dive tag. The span/dive tag may include one or more label tags for the label placement or for a form section that includes a header and the web controls. Based on the exemplary boundary conditions, as described above, a user may define boundaries for activation of the editing module  216 . If the user clicks on these portions of the boundaries, editing module  216  may be activated. Otherwise, editing module  216  may not be displayed or activated. 
     The control module  214  may be configured to control editing operations to be performed on the artifacts. The control module  214  may refer to a style specification provided by the user. The style specifications may be stored, for example, in a style modeling repository  214 . In some embodiments, the editing operations may be controlled by controlling an activation and deactivation process of the editing operations. 
     The screen modeling module  212  may also assist in the functioning of the editing module  216 . In some embodiments, the user may be required to define or specify the boundary listener  215  by providing boundary conditions based on the HTML pattern on a screen. In some embodiments, the editing module  216  may be able to understand the patterns based on the HTML pattern and the boundary conditions and may start its editing operations. 
     The editing module  216  may be activated on a particular section of the screen. The editing module  216  may be presented as small sections based on the HTML pattern of the screen. The presence of the editing module  216  on the various sections of the screen may also be specified by the user based on the boundary conditions. 
     In some embodiments, the editing module  216  may be a responsive editor. For example, if the user changes the style specifications by giving values of the artifacts and boundary conditions, the editing module  216  may generate a preview to display the corresponding changes on the screen in real time. 
     The editing module  216  may also support the browser compatibility. For example, if a user specifies one kind of style (e.g., values for artifacts), which may be specific to the editing module  216  of a particular browser, the editing module  216  may ensure, verify, or otherwise confirm that these changes can work on any browser (e.g., browser  213 ). The browser compatibility may be supported by a custom jquery plugin (e.g., from a JavaScript Library). The editing module  216  may address the browser compatibility if the user specifies the changes of the style. In some embodiments, the editing module  216  may store some or all browser-related specifications so that the specifications may be generated corresponding to the target browsers in the generating module  218 . In some embodiments, this may be addressed in the editing module  216  because all the browser specifications may be injected while designing the editor. 
     The generating module  218  may render the design of the artifacts as an output based on the editing operations performed by the editing module  216 . The output may be obtained in a form of a CSS file and may be modified according to the user&#39;s requirements. 
     Referring to  FIG. 4 , as an example, the user may design a wireframe of the screen by using the system  102 . This may be performed via various modules. Such various modules may be implemented in terms of various models on the screen. The system  102  may translate language to provide a default appearance and feeling of the screen (step  400 ). The boundary conditions may be provided as an input to the editing module  216 . For example, the editing module  216  or an editor can be required to be activated based on a specific HTML pattern. As a result, the user may have the flexibility to specify the boundary conditions of the artifacts for that specific HTML pattern. The system  102  may provide various controls (e.g., a text box, a dropdown, etc.) to enable all control boundaries such that the system  102  may work on any HTML pattern. 
     The user may decorate (step  402  and  404 ) the screen by using the editing module  216 . The screen decorated may also be referred to as the actual decoration section or model. The actual decoration section or model may be the location of the screen where the user may start the decoration. A start/stop switch may also be provided to activate or deactivate the editing operations of the editing module  216 . The start/stop switch (e.g., provided by the control module  214 ) may be used to activate the editing module  216  based on the boundary conditions and the style specifications as specified by the user. 
     As a part of an output (step  406 ), the generating module  218  may provide an output format. Based on the output specification, the style specification may be converted to the required format using translators. The specification of the output may be specified in the generating module  218 . The specification of the output may correspond to, for example, CSS specifications of a JS (i.e., JavaScript) object. Some JS code may be able to understand and/or interpret the CSS specifications. As an example, if an HTML pattern has a “div” with a text box, the div may have some class with a defined style. Because it is uniquely identified from its text box, the style may be specified as a relative position to the text box and stored, for example, in the screen modeling repository  224 . Because the pattern is specified in the boundary condition, the specified style specification may be automatically understood and displayed. 
     If the decorator style is converted to the required output format, the screen may start to render based on its new style specifications. In some embodiments, this may work on all the browsers that have multi-skin support (step  408 ). 
       FIG. 3  is a flow chart illustrating an exemplary method  300  for designing artifacts in accordance with an embodiment of the present disclosure. The order in which the method  300  is described is not intended to be construed as a limitation, and any number of the described method blocks may be combined in any order to implement the method  300  or alternate methods. Additionally, individual blocks may be deleted from the method  300  without departing from the spirit and scope of the subject matter described herein. Furthermore, the method  300  may be implemented in any suitable hardware, software, firmware, or combinations thereof. However, for ease of explanation, in the embodiments described below, the method  300  may be considered to be implemented in the above described system  102 . 
     At step  302 , the system  102  may allow a user to customize the webpage by selecting values of the artifacts and by specifying boundary conditions of the artifacts for an HTML pattern. 
     At step  304 , a style pattern based on the HTML pattern of the webpage and the boundary conditions may be specified. 
     At step  306 , editing operations to be performed on the artifacts may be controlled by referring to one or more style specifications as specified by the user. 
     At step  308 , editing operations may be performed based on one or more the values of the artifacts, the style pattern, and the boundary conditions. 
     At step  310 , the design of the artifacts may be obtained based on the editing operations that are performed. 
     The written description describes the subject matter herein to enable any person skilled in the art to make and use the embodiments of the present disclosure. The scope of the subject matter embodiments is defined by the claims and may include other modifications that occur to those skilled in the art. Such other modifications are intended to be within the scope of the claims if they have similar elements that do not differ from the literal language of the claims or if they include equivalent elements with insubstantial differences from the literal language of the claims.