Download NSF Proposal - Computer Science

NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
NSF Proposal
Principal Investigator
David Wolber
Associate Professor
Department of Computer Science
University of San Francisco
2130 Fulton Street
San Francisco, CA. 94117
(415) 422-6451
List of Suggested Reviewers
Brad A. Myers
Senior Research Scientist,
Human Computer Interaction Institute
School of Computer Science
Carnegie Mellon University
5000 Forbes Avenue
Pittsburgh, PA 15213-3891 USA
412-268-5150 [FAX: 412-268-1266]
[email protected]
Robert C. Miller
Henry Lieberman
MIT Media Laboratory
20 Ames St. 305 A
Cambridge, MA
02139 USA
(+1-617) 253-0315
[email protected]
Enhydra guy
WebMacro guy
Cover Sheet for Proposal
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
Project Summary
The objective of the project is to explore end-user techniques for building dynamic databasedriven web pages. An exploratory environment will be designed with a what-you-see-is-whatyou-get (WYSIWYG) HTML editor as its basis. The research team will explore several visual
programming techniques that have been used in other domains, including Query By Example
(QBE), spreadsheet formulas, and Programming by Example (PBE) macro-recording. These
techniques will allow designers, without coding, to create web pages that display live database
data, perform computations on database data, and allow interactive viewing and manipulation of
database data.
The principal investigator has extensive experience in building PBE systems, but this project combines
knowledge of at least three other areas: databases, spreadsheet paradigm research, and web
development. Thus, extensive literature and product surveys will be conducted, along with the
exploratory development. The team will also conduct user studies throughout the project to
measure the effectiveness of various techniques.
Successful research would impact the creative capabilities of designers in a domain that is growing
exponentially. Designers today are often restricted to developing the presentation of client-server
applications, and must rely on a programmer to supply the dynamic content. Some emerging commercial
systems such as Macromedia’s UltraDev4 do allow the designer to specify some dynamic content
visually. However, these systems are dialog based and do not take advantage of the example-based
approaches on which this project will focus.
The research can also extend the end-user programming and PBE fields by presenting and answering
some new questions. What is the intersection of QBE and spreadsheet formulas? What is a proper user
interface for applying them, in combination, to database-driven web applications? Can manipulations of
persistent data (database tables) be specified through demonstrating operations on visual tables? Can
database table creation, as well as queries and manipulation, be specified by example in the HTML editor
interface? Is such a development environment effected if the underlying persistent data is stored in XML
instead of a relational database?
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
B.Table of Contents
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
Project Description
OUTLINE FROM GUIDE
work to be undertaken
objectives
Develop Programming by Example (PBE) techniques for building dynamic database-driven web
pages.
expected significance
Increase the power of web designers who are not programmers
Apply known PBE techniques to a practical domain
Create innovative PBE techniques for the domain and in general
relation to longer-term goals
In the past PI built PBE systems for the creation of animated interfaces.
relation to the present state of knowledge in field
PBE, in general
PBE applied to dynamic web page design (Miller, Myers paper)
Presentation/Templating frameworks for web page design
relation to work in progress elsewhere
work plan
design of activities to be undertaken
Survey of newer PBD research (PI is well versed in general field)
Survey of commercial and research presentation/templating systems
Survey of visual database building tools
description of experimental methods
broader impact
how the project will integrate research and education by advancing discovery and
understanding while at the same time by promoting teaching, training, and learning
The proposed system will generate HTML/XML template files and Java servlets that use
JDBC to access databases. In order to write such code generators, students will have to
obtain knowledge of all these technologies.
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
Working with designers who are not programmers will enhance student’s ability to build
effective user interfaces.
discuss any ways in which the proposed activity will broaden the participation of
underrepresented groups;
Non-programmers are underrepresented within the software development community.
The system built by this project will allow non-programmers to more fully participate in
the software creation process.
indicate how the results of the project will be disseminated broadly to enhance
scientific and technological understanding; and,
The system will be made publicly available.
identify potential benefits of the proposed activity to society at large.
The system built by this project will allow non-programmers to more fully participate in
the software creation process. The system will increase the productivity of all designers.
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
Programming by Example (PBE) has been applied to a number of domains, including graphics and
text editors, but little attention has been given to PBE design of dynamic database-driven web pages.
Such dynamic pages now require significant programming experience.
A number of tools have emerged that enhance the capabilities of non-programmers in dynamic web
page design, and help separate the concerns of designers and programmers. For instance, a designer
can create an HTML template, or prototype, of how a page should appear, then the XMLC compiler
[] can be used to generate a Java-code representation of the page. The programmer can then write a
servlet that, when executed in a browser, displays the page in the format specified by the designer
but containing dynamic data specified by the programmer.
Such systems limit the creational capabilities of the designer to presentation and formatting. He isn’t
allowed to specify dynamic content, such as persistent (database) data, without the help of a
programmer. For instance, to create a simple on-line bookstore, a programmer would have to be
hired to write servlet and database (e.g., JDBC or EJB) code that controls the background processing
for manipulating the book inventory, placing books in a shopping cart, and processing the on-line
purchase requests for the user.
The objective of this project is to devise PBE techniques for creating entire web sites like the
bookstore example. PBE is often based on an extension of the macro recording concept. For
example, to create an add book to inventory web page, the designer would first draw an input
form, then enter appropriate information (e.g. Title, ISBN) in the labeled text areas. Next, he
would add an insert button to the form, select it, and select “Record Response”. Then he
would copy and paste the data from the text areas into columns of an HTML table on
another page in the editor.
After the designer deselected the “Record Response” toggle, the system would generalize
from the demonstrated example. In this case, the system might infer that 1) the HTML table
is a display for a persistent database table, 2) Each time the submit button is hit, the data
from the form should be used to create a new record in the persistent table, and 3) The
HTML table should always display the updated contents of the database table.
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
A number of PBE concepts have been introduced, in other domains, which might apply in
the area of dynamic web pages. Stimulus-response PBE requires the designer to record both
a user action (e.g., entering the form data) and the system response (placing data in HTML
table). Such a two-phase approach simplifies the generalization task of the system by
providing more data. Snapshot techniques, on the other hand, compare before and after
representations of the system to infer the proper response. Hints allow the designer to signify
important elements for the inference system. Multiple example approaches require the
designer to continually present examples until the system infers correctly. There are also a
number of methods for presenting the inferred program to the user so that he can verify its
accuracy or edit it.
One sub-objective of this project will be to explore the applicability of various known PBE
techniques in this new domain. The applicability of these techniques will be measured
through extensive user testing. It is also expected that new techniques will be discovered
through this trial-and-error approach.
Another sub-objective is to explore the effectiveness of database design through
programming in the interface. The idea is to allow designers to create database tables by
creating and manipulating HTML tables in a what-you-see-is-what-you-get (WYSIWYG)
editor. By visually inserting a table, and sample data for its column headings and cells, the
designer will specify a persistent database table. When the generated servlet is executed, the
table will display not the static data entered by the designer, but the contents of the database
that the system generated, even if that database has been modified with a DBMS or other
program.
Such a method cuts against the grain of the long-held software development theory of
separating data (model) from the view. With the above process, there is only one
representation of both the model and the view, at least from the designer’s perspective. In
the generated code, however, there is a separation of model (database table) and view
(HTML table).
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
One advantage is that designers need learn just one specification method, and its one
(WYSIWYG HTML editing) with which they are already comfortable. Another advantage is
that the data need not be specified twice, such as traditionally done when a view is created
with an HTML editor, and a model is created with a DBMS or newer approaches such as
XML and UML [DODS].
A number of questions arise. What if multiple views of the same table should appear in
different pages? How are the relations in a relational database specified in this programming
in the interface manner?
5. Relation to the present state of knowledge in field
5.1 PBE
Miller and Myers Turquoise system is one PBE system that focuses on creating dynamic web
pages. Turquoise focuses on characterizing and accessing information from existing web pages.
It does not target data-base driven pages, or the generation of client-server applications.
5.2 End-User Database Manipulation and Query
Zloof’s Query By Example (QBE) system [] from the 70’s allowed end-users to specify queries
by entering data in sample table skeletons. The Query By Templates system [] extended this
concept to allow queries to be specified for non-tabular data.
The proposed system will apply QBE techniques in the context of web page design, but it will
also provide Database Definition by Example and Database Manipulation by Example.
5.3. Spreadsheet Systems
The spreadsheet is the best example of end-user, programming in the interface development. A
number of research efforts have focused on extending the spreadsheet paradigm [Burnett] to
allow non-tabular data elements and logical instead of spatial generalization of formulas. Some
have focused specifically on adding spreadsheet capabilities to user interface design [Hudson,?].
The proposed system will apply spreadsheet capabilities in the context of web pages.
5.4. Presentation Tools for Client-Server software
The Java II Enterprise Edition framework has become extremely popular for client-server
applications. Servlets, the basis of the framework, are Java programs that dynamically generate
web pages with dynamic data. Unfortunately, many designers cannot write Java code. Because of
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
this, a number of presentation/templating frameworks [] have emerged which allow designers to
specify the presentation of a dynamic page visually or in HTML, while a programmer can focus
on writing code that accesses and computes the dynamic content.
XMLC is one such tool. It takes an XML page, created by a designer, as input, and outputs a java
code representation of the page. A programmer can then write Java code that manipulates this
representation to insert dynamic data into the presentation. The designer can edit his “template”
even after the dynamic part has been coded, then run the template through the XMLC compiler
again. In this manner, the concerns of the designer and programmer are kept separate, and the
designer can edit and format the presentation without requiring programmer intervention.
The proposed system will extend the capabilities of the designer beyond presentation and
formatting—he will also be able to perform some or all of the work that requires a programmer
in XMLC-like development processes. Specifically, the designer will be able to specify dynamic
database access and manipulation through PBE, and dynamic data computation through the
integrated spreadsheet capabilities. The proposed tool will generate servlet code automatically
from the visual specifications of the designer.
D.References Cited
E.Biographical Sketches
David Wolber
a. Education
University of California, Davis
University of California, Davis
University of California, Davis
B.S. 1986
M.S. 1988
Ph.D. 1991
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
b. Appointments
Associate Professor, University of San Francisco, 2000Assistant Professor, University of San Francisco, 1993-2000
c. Publications
(i)Closely associated to project
Wolber, D., Myers, B., "PBD Interface Builders: Demonstrating the When as Well as the What",
Chapter in Your Wish is my Command, pp. 321-344, Lieberman, Henry, ed., Morgan Kauffman,
2001.
Wolber, D., "Pavlov: Where PBD Meets Macromedia Director", Your Wish is my Command, pp.
345-350, Lieberman, Henry, ed., Morgan Kauffman, 2001.
Myers, B., McDaniel, R., Wolber, D., "Demonstrational Interfaces", ACM Communications,
March 2000.
Wolber, D., "An Interface Builder for Designing Animated Interfaces", Transactions on
Computer-Human Interface( TOCHI), December 1997.
Wolber, D., "Pavlov: Programming By Stimulus-Response Demonstration", Proceeding of the
Conference on Human Computer Interface (CHI '96), 1996.
(ii) Other Significant Publications
Wolber, David, "A Multiple Timeline Editor for Designing Multi-threaded Applications",
Proceedings of the User Interface and Software Technology (UIST) Conference, San Francisco,
California, 1998.
Wolber, David, "Reviving Functional Decomposition in Object-Oriented Design", Journal of
Object-Oriented Programming (JOOP), October 1997.
Fisher, G., Wolber, D. and Busse, D.*, "Adding Rule Based Reasoning to a Demonstrational
Interface Builder", Proceedings of the User Interface and Software Technology (UIST)
Conference, Monterey, California, 1992.
Wolber, D., and Fisher, G., "A Demonstrational Technique for Developing Interfaces with
Dynamically Created Objects", Proceedings of the User Interface and Software Technology
Conference (UIST), Hilton Head, South Carolina, 1991.
Wolber, D., Janne, E.*, Chen, K.*, "Creating Animated Interfaces With Stimulus-Response
Demonstration", Proceedings of the Conference on Human-Computer Interaction (CHI '95),
1995.
d. Synergistic Activities
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
The principal investigator recently designed a new graduate-level course focusing on dynamic
web page development. The course made use of a software donation from BEA, Inc., which
provided its WebLogic application server software for student use. The course focused on Javabased enterprise development, including servlets, JSP, RMI, JNDI, WebMacro, and XMLC.
BEA provided an award to the top student project in the course.
The course was a success and the principal investigator is now scheduled to teach the same
material each semester. It should serve as an excellent springboard into the proposed research
project.
The relationship with BEA is also significant in that it provides a direct avenue for bridging the
research-industry gap.
e. Collaborators and Other Affiliations
(i) Collaborators
The principal investigator served on the dissertation committee of Richard McDaniel, one of
Brad Myer’s students at Carnegie Mellon University. He also coauthored two papers with Mr.
Myers, one in ACM Communications (along with Rich McDaniel) and a chapter in a recent book
on programming by demonstration.
Brad Myers
Senior Research Scientist,
Human Computer Interaction Institute
School of Computer Science
Carnegie Mellon University
5000 Forbes Avenue
Pittsburgh, PA 15213-3891 USA
412-268-5150 [FAX: 412-268-1266]
<[email protected]>
(ii) Graduate Advisor
Fisher, Gene
Professor
Department of Computer Science
California State University, San Luis Obispo
(iii) Thesis Advisor and Postgraduate-Scholar Advisor
F.Proposal Budget (cumulative and annual budgets, including subaward
budget(s), if any, and up to three pages of Budget Justification)
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
Annual Budget
Student Research Assistants’ Summer Salary
Student Research Assistants’ In-Session Salary
Principal Investigator Salary
Fringe Benefit (9.4% of all salary)
Travel Expenses
Sub-Total
USF Indirect Costs (50.9%)
Total (1 year)
Total (3 years)
$24,000
$36,000
$16,606
$ 7,201
$ 8,100
---------$91,907
$46,781
--------$138,688
$416,064
Four students will be hired during the school year and the summer. The students will work
twenty hours per week during school, and forty hours a week during the summer.
Summer
School
Students
4
4
Weeks
10
30
Hours/Week
40
20
Total Hours
1600
2400
Pay ($15/hr)
$24,000
$36,000
The principal investigator will be paid at his regular pay for two months in the summer. His
projected nine-month salary for 2001-2002 is $74,730, which computes to $8303 per month, or
$16,606 for two months.
Travel expenses are requested for the attendance of three conferences annually by the principal
investigator and one student assistant. Costs are estimated at $1500 per trip for the principal
investigator, and $1200 per trip for the student (taking into account student discounts for
conference fees). For three conferences, this computes to (1200+1500)*3=$8100.
Budget Justification
USF has the lab facilities necessary for the project, as well as a relationship with BEA, Inc.,
which provides the necessary server software for the project. The vital need is for funds for
student research assistants and the principle investigator.
The principal investigator would like to devote the summer months completely to research and
specifically the proposed project. In past summers, he has consulted in the area for his summer
salary. Though the proposed salary is significantly less than a consultant salary, it would allow
him to do what he likes best—work with students on interesting problems.
NSF Proposal: Visual Techniques for Building Dynamic Web Pages
Budget
G.Current and Pending Support
This is an initial proposal for funding.
H. Facilities, Equipment and Other Resources
I.Special Information and Supplementary Documentation
J.Appendices (Include only if approved in advance of proposal submission by
NSF Assistant Director/Office Head, or designee, or by program solicitation)