Designing Dynamic Web Pages in the WYSIWYG Interface

WebDev is a programming in the WYSIWYG interface tool for building dynamic web pages that connect to databases. The system allows designers to “program” by entering query by example (QBE) and spreadsheet formulas into visual components of HTML documents. The system then automatically generates dynamic web pages that can be executed in a browser. INTRODUCTION WYSIWYG HTML editors such as Microsoft’s Front Page [16] make the design of static web pages easy for end-users (designers who are not programmers). Tools such as WebMacro[19] and XMLC[13] go a step further by easing the task of designing dynamic web pages. With these tools, the designer works with sample data to specify the presentation of the dynamic page. The programmer then specifies the dynamic content of the page separately. These tools do not, however, help a designer create a complete dynamic web page, including both presentation and content. The designer is still dependent on a programmer. This is unfortunate, especially since end-user programming techniques have proven viable in other domains. The Spreadsheet is a prime example of an end-user programming environment. The “developer” enters his programs (formulas) directly in table cells, so the “programming” is concrete and direct, and immediate feedback is provided. Query by example (QBE)[21] formulas from the database world are similar. The designer/user enters query expressions directly in table cells, and the system automatically displays the rows that fit the expressions. In this way, the designer is shielded from the complexities of SQL and programming syntax in general. Both spreadsheets and QBE systems are examples of programming in the interface systems, i.e., system in which the development interface and the target interface are the same. Applications with macrorecording facilities are also of this type, as are programming by example (PBE)[6,11] systems like SmallStar[9] Eager[5] and Mondrian[12]. These systems are powerful because the developer “programs” using the same operations and same interfaces that he is already familiar with as an enduser. Programming in the WYSIWYG interface tools are slightly different. Here, the development interface is not the target run-time interface, but a facsimile of it. The developer still gains some benefit from visualizing the development interface as the target interface, but he must mentally map the operations he performs during development to the actual operations that will occur at run-time. These tools are freer than in the interface tools, in a sense, as