JWeb: an Innovative Architecture for Web Applications

JWeb: an Innovative Architecture for Web Applications Mario Bochicchio 1 , Roberto Paiano1 , Paolo Paolini2 1

Telemedia Lab, University of Lecce, Italy {bomal,rpaiano}@ingle01.unile.it 2 Hypermedia Open Center, Politecnico di Milano, Italy [email protected]

Abstract. The recent diffusion of WWW technology and the widespread need of producing high quality WWW applications in a cost-effective manner have made important to improve the quality and the efficiency of the engineering process for WWW sites. In this paper we argue that the first ingredient needed for a well-organized process is a design model, able to describe the structural and navigational properties of WWW applications. The second ingredient is a suitable set of tools supporting the design and the development of the applications. Assuming HDM as design model, we present JWeb, a suite of tools supporting several activities: initial conceptual design, development of supporting database to store data, insertion of data, customization of design for specific applications, prototyping of applications etc.

1 Introduction and background Web applications were, at the very beginning, hand-coded HTML pages: the information handled by each page was structured “ad-hoc” and the links among pages were set “manually”. This production method was acceptable until a few pages had to be produced, but it became rapidly unmanageable when applications of several hundreds or thousands of pages had to be linked and maintained. In a good WWW application, in fact, the reader should be able to effectively exploits the potential information managed by the application: i.e. he/she should be able to quickly locate the objects of his/her interest, to understand the inner structure of the objects, to easily move (navigate) from one object to another, to easily accomplish complex access sessions. Summarizing: a good application should be usable [1-3]. Several factors concur to the achievement of this goal, and one of the most important factors is to have a good structuring of the information objects and a good structuring of the navigation patterns. Several authors and several communities have recently proposed the adoption of design models [4-8], and design patterns [9-12] in order to improve the quality and usability of hypermedia applications, at least for those aspects concerning structure and navigation. Design models provide, in fact, the primitives that allow to structure the information objects and the corresponding navigation patterns along regular and systematic features, improving consistency,

predictability (for the user), robustness of the design, and therefore improving usability. The ancestor of these models can be traced to the Hypermedia Design Model (HDM), developed in 1993 [13] and evolved to its actual definition through various theoretical refinements [5,10,14] and through the application to many real projects (e.g. [15-17]). While HDM was evolved, it was clear that a number of modeling and implementation activities (e.g. schema design, content production, application prototyping, dynamic pagination etc.) could be automated and supported by software. JWeb is a set of tools based on HDM and exploiting that idea [18]. In particular, JWeb supports the design and the implementation of multiple hypermedia applications, both on-line (Inter/extra/intranets) and off-line (CD, DVD, …), from a dynamic set of contents, for a given application field. The overall architecture of JWeb is the subject of the remaining of this paper: in section 2 we point out the general problems concerning design and implementation support; in section 3 we describe the architecture and the components of JWeb; in section 4 we draw the conclusions and describe future work.

2 General Problems In our experience, the main problems concerning the design and the implementation of WWW applications, independently from a specific development strategy, can be summarized in the following four points: 1. Modeling Design involves the definition of the general properties of the application and of its details considering several “dimensions”: information structures, navigation patterns, interaction and multimedia control, interface, etc. Several models have been proposed to describe information structures and navigation [4-8]. Various ISO standards are also available to describe and implements multimedia control and interaction (e.g. HyTime, PREMO, MHEG, …). Finally, the design of the man-machine interface (visual design) is a frequent cause of confusion and problems among technicians (with its “bits and tags” problems) and “interface creators” (with its “click everywhere to do everything” philosophy). The choice of the proper model for describing each part or set of features of the application is a crucial aspect of organizing the overall design process. 2. Content’s production In general, contents are the “primary reason of existence” of hypermedia applications, in fact the author’s message for the application readers (if any) is in multimedia contents. For that reason, in the ideal hypermedia application the budget resources should be focused as much as possible on contents production. However the related production process is complex and difficult to manage, in fact contents are rapidly changing, especially for WWW sites; they are heterogeneous (multi-language for localization, multi-target to support various kind of readers, multi-media, …); they are subject to encoding (JPEG, GIF, BMP, PNG, …), transcoding (AVI MPEG, TXT RTF, …), editing, versioning and testing; proper naming and placement conventions must be defined for the media files etc. etc. For all these reasons the creation and the maintenance of contents must be supported by an editorial repository (DBMS) provided with suitable software tools.

Æ

Æ

3. Content’s reuse Contents should be reused for at least two reasons: to expand the audience (Internet, CD, DVD, wireless terminals, …), and to share the high (in percentage) production costs of contents among various projects. For example, a company could reuse the same media files for a promotional CD, for various e-catalogs (final users, resellers, fairs, expositions, …), for the company’s Web site, for intra/extranet purposes etc. Obviously, the contents should be “re-configured” and adapted to the various purposes. This basically means that the various applications are based on a common structural model, then each application is “derived” from the common model by identifying the portion of logical design that must be kept and/or changed, and by integrating it with additional definition and/or media slots. 4. Software production and reuse In the hypermedia communication process, authors and readers are connected over the space (on-line: Web applications) or over the time (off-line: CD/DVD applications). In this scenario the supporting software implements the “communication channel”: it is effective if it is “transparent”. This means that the run-time software should be flexible and powerful, to support naïve users as well as “experienced navigators”; moreover it should be developed and tested before contents, because contents, in real projects, are released very late; obviously, it should be robust and error-free; and finally it should be inexpensive with respect to contents, because contents are the focus of the production effort. For all these reasons the run-time software must be contents independent and application independent; in fact it can be complex enough and flexible enough only if its development costs can be shared over a large number of (different) projects. To solve problems 2 to 4, various commercial development tools, such as FrontPage, from Microsoft, or Cold Fusion, from Allaire, are available, to build dynamic pages from (normal or multimedia) databases. In our opinion this is only a partial solution, because the tools, in itself, are unable to dominate the peculiar complexity of hypermedia applications. For example, for the application designer, the links between the data model, used to store multimedia objects in the database, and the application features, such as the navigation control or the history management, are not clear at all. Moreover the visual interface design is based on technical considerations rather than on communication effectiveness (or, at least, usability), and we could continue with other problems. What we say is that problems 2 to 4 cannot be successfully solved without solving problem 1, because a right modeling is essential in any good engineering process.

3 JWeb Architecture The JWeb project takes into consideration most of the issues described in the previous section, with special emphasis on the HDM modeling phase. The overall goal is the creation of an integrated environment, to support the design, the prototyping and the implementation of families of sophisticated hypermedia applications, either on-line (Internet, Mobile, …) or off-line (CD-ROM, DVD-ROM, …). The architecture of JWeb, shown in fig. 1, is based on six components:

MODELING

• JWEdit, the schema editor, to define/modify the HDM conceptual model of the application; • JWData, the schema mapper, to create/maintain the environment repository and the related data structures; • JWFeed, the instance editor, to insert/edit/delete the multimedia contents and the visual interface elements in the repository; • JWXdef, the application configurator, to derive multiple application variants (e.g. multi-language, multi-target, …) from the same main conceptual schema; • JWXport, the application generator, to pack the application (multimedia data + navigational structure + presentation interface) in an executable format; • JWEngine, to execute an application. JWeb is strongly based on XML, in fact all the schemas are described in XML, and in this format they are exchanged across tools; all the pieces of content can be "exported" as XML files, and exchanged across tools; finally, all the multimedia information items (pictures, sounds, films, Java applets, HTML/XML pages, Shockwave animations, RealVideo streams,…), created with standard tools, can be easily integrated within the applications.

Schema Repository

J W E d it

create/modify

Environment Schema

Repository Interface

J W D a ta

DEVELOPMENT

create/modify

JW F e ed Environment Repository

media objects presentation objects

insert/edit/delete read/modify

JW X p o rt

J W X d ef

import/export

Application repository

DELIVERY

Application schema

Run-Time Repository

J W E n g in e

Fig. 1. JWeb Environment

USERS

The life cycle of a simple hypermedia application, in JWeb, is the following: 1. the conceptual schema for the given application domain is developed (using JWEdit), either from scratch, or “readapting” a previously created schema. 2. The environment repository is created (using JWData) on the basis of the conceptual schema. 3. The pieces of content are created, using standards authoring tools, and inserted in the repository according to the HDM schema, also creating all the needed links. While the previous steps are shared among all applications belonging to a given family, the following ones refer, instead, to the development of each specific application (family member): 4. The conceptual schema is completed with additional access structures [14] and other application-specific details. 5. The visual style of the presentation is defined, using JWXdef. The visual style, in term of editorial masks, is defined by page templates in HTML/XML format or in Shockwave format (created with Macromedia Director). 6. The presentation objects (buttons, backgrounds, Java applets, …), specific to the application, are collected in the repository. The definition of the visual style and the creation of the presentation objects are performed externally to JWeb, by using the tools preferred by the authors. The visual style of the presentation can gradually evolve from a simple, schematic form, useful for rapid prototyping purposes, up to the final layout; 7. The content and the interface elements are extracted and prepared for the execution by packaging them (using JWXport) in a suitable run-time format, 8. The application is executed by an application-independent interpreter (JWEngine), driven by the schema and the data stored in the run-time repository. All or some of the above steps can be repeated if change or evolution of the application becomes necessary. Most of the changes can be automatically handled. A manual intervention is required when new presentation objects (e.g. a new interactive timeline or a searchable index with a new visual layout) are added to the application. The current JWeb implementation has already been used for a family of e-catalogs for the fashion industry [18]. It has also been used to design and implement a configurable multimedia tutorial for a consortium of IT enterprise [19] and to develop a number of prototypes for research projects. In addition the current version of JWeb is being used to teach hypermedia design techniques at three universities (Politecnico di Milano, University of Lecce and University of Italian Switzerland), with a total of nearly 300 students per year. In the following of this section, more details will be provided on the tools: • JWEdit: it allows the designer to create or modify the schema of an application, using HDM modeling primitives. Beside the modeling aspects, a number of powerful features have been added to the editor to better support the design process: • a schema already defined can be stored and classified according to application areas (e.g. "museum information point" or "fashion catalog"). The saved schemas can act as "template" allowing a designer to start a new job by recovering a design already developed and modifying it. Such a "reuse" of conceptual design is very effective, above all in the early stage of the design activity; also it is a powerful training tool.

• Features have been added, to deal with "incomplete design" situations, allowing the designer to take later the incomplete parts and refine them. • JWEdit can save and export a conceptual schema, using XML and a specific DTD. This allows easy exchanges of schemas across different teams of designers and also with other tools of the JWeb chain. • JWData: it is the tool that builds and manages the Environment Repository. The repository is implemented as a relational database. Most of its structures can be automatically derived from the WWW conceptual schema. A human expert must manually provide a few decisions and a few parameters only. Multimedia information items are not stored within the relational database, but as external files to guarantee the independence of the adopted multimedia formats from the DBMS handling policies. JWData is also able to populate the DB with some trial data for fast prototyping purposes. This is a key feature for a number of jobs, such as training, interface and content development, design brainstorming etc. • JWFeed: it is a generic data entry application that can be used to insert information in the Environment Repository in a "model driven" way. • JWXdef: it allows the definition of a specific application, out of a large conceptual schema. A number of operations are possible: • Entity types and link types can be selected. New entity types or new link types can be defined. Special versions of existing entity/link types can be also defined. The selected (entity and link) types and the new definitions will be part of the conceptual schema of the specific application. • Specific information items can be selected (for inclusion) and/or added. In the latter case the new information items will be available only for the specific application being designed, not for the other applications of the same family. Also the localization process1 can be favored by adding a complete set of new slots to take care of different languages and cultural adaptations. • Existing collections can be selected or new ones can be defined. • Externally-created style-sheets or hand-made HTML templates can be imported; • JWXport: it is used to create the run-time repository (see fig. 1). • JWEngine: it is an interpreter that performs "on the fly" the composition of the application pages requested by the user. This operation requires several steps: • the interpretation of the user request, according to the application schema; • the selection of the proper interface template, for the presentation; • the fetching of the data from the repository; • the merging of the data within the template. The logical structure of JWEngine is depicted in fig.2. The Event Manager, EM, detects the user requests and sends a parametric URL to the Main Server Engine, MSE. This component performs the parameters decoding and asks the Navigation Engine, NE, to evaluate it. The Navigation Engine resolves the names of the hypermedia objects needed to create the requested page. The DBEngine, DBE, retrieves the needed objects from the run-time repository, passing them to the Presentation Engine, PE. The Presentation Engine is in charge of properly inserting the retrieved objects in the presentation template. The Session Manager, SM, is responsible for detecting and storing the session parameters selected by the user 1

I.e. the adaptation of an application to foreign markets

(language, sound volume, …). The History Manager, HM, keeps track of the navigation steps performed by the user, for later usage. The current implementation, for on-line purposes, is based upon a client-server architecture. The server-side is implemented as a Java Servlet and includes the MSE, the NE, the DBE, and part of the PE. The client-side is implemented as a Java applet and includes the EM, the SM, the HM and the remaining of the PE.

J W e b A p p lic a tio n

M a in S e r v e r E n g in e

E vent M anager

N a v ig a tio n E n g in e

S e s sio n M anager

XML A p p lic a tio n S ch em a

H isto r y M anager

D B E n g in e

P r e se n ta t io n E n g in e

U SER

R u n -T im e R ep o s ito r y

J W E n g in e

Fig. 2. JWEngine: internal structure

4 Conclusions and future work The main use of JWeb will be to support design and prototyping of sophisticated WWW applications. For such a reason the main trust of our current work is to improve the number of modeling features supported by JWEdit and JWXdef. Our desire is to be able to support very advanced design features, including all those that can be found in the best WWW sites. A suitable documentation generator will be added to JWEdit, to better support the modeling phase (that is of paramount importance). The prototyping capabilities of JWeb will be improved, both for advanced design (e.g. for testing different alternatives) and training (e.g. for visualizing the implication of an attempted design). In order to balance the different and sometimes conflicting requirements between hypermedia training and real application design we are planning two different JWeb versions: • a full size version for sophisticated design; • a light version, favoring simplicity and speed over completeness, for training.

As far as actual implementation of the applications is concerned, we still maintain that it is not our main goal. It is true, however, that in some cases, the applications resulting from the JWeb chain could be delivered as final implementation, and in some cases we have successfully done it even with the current version of the tools. In our plan the new version of the tools will be released before December '99

References 1. F.Garzotto, M.Matera, “A Systematic Method for Hypermedia Usabilty Inspection”, In The New Review of Hypermedia and Multimedia, 3, 1997 2. J, Nielsen,R.L.Mack, “Usabilty Inspection Methods”, John Wiley & Sons, New York 1994. 3. F.Garzotto, M.Matera and P.Paolini, “Abstract Tasks for Hypermedia Usability Evaluation”, Dept. of Electronics and Information, Polytechnic of Milan, Tech. Report No.03-99, 1999. 4. F.Garzotto, L.Mainetti and P.Paolini, “Hypermedia Application Design: A Structured Approach”, In J.W.Schuler, N.Hannemann and N.Streitz Eds., “Designing User Interfaces for Hypermedia”, Springer Verlag, 1995. 5. D.Schwabe, G.Rossi, The Object-Oriented Hypermedia Design Model, Communications of the ACM, Vol. 38, N. 8, pp.45-46, Aug. 1995 6. T.Isakowitz, E.A.Stohr, P.Balasubramanian: "RMM: a methodology for structured hypermedia design", Communications of the ACM Vol.38, No.8, Aug. 1995, pp. 33-44. 7. G.Mecca, P.Atzeni, A.Masci, P.Merialdo, G.Sindoni: "The Araneus Web-Base Management System". SIGMOD Conference 1998. Pp. 544-546. 8. Fraternali P., Paolini P.-” The Autoweb System”; submitted for publication 9. E. Gamma, R. Helm, R. Johnson and J. Vlissides. Design Patterns. Elements of Reusable Object-Oriented Software. Addison-Wesley, 1996 10. F. Garzotto, P.Paolini, D. Bolchini, S. Valenti "Modeling-by-patterns of web applications" In World-Wide Web and Conceptual Modeling - Proc. Int. workshop WWWCM'99 - in conjunction with the 18th Int. Conference on Conceptual Modeling (ER'99), Paris, France, Stephen W. Liddle (ed.), Springer Verlag - to appear 11. M. Nanard, J. Nanard and P. Kahn. "Pushing Reuse in Hypermedia Design: Golden Rules, Design Patterns and Constructive Templates". In Proc. of the ACM International Conference on Hypertext '98, ACM Press, 1998, pp. 11-20. 12. G. Rossi, D. Schwabe and F. Lyardet, "Improving Web Information Systems with Design Patterns". In Proc. of the 8th International World Wide Web Conference, Toronto (CA), May 1999, Elsevier Science, 1999 13. F.Garzotto, P.Paolini and D.Schwabe, “HDM - A Model Based Approach to Hypermedia Application Design”, ACM Transactions on Information Systems, 11, 1 (Jan. 1993), 1-26 14. Franca Garzotto, Luca Mainetti, Paolo Paolini, “Adding Multimedia Collections to the Dexter Model”. ECHT 1994: 70-80 15. Hytea Projects reports, available from Politecnico di Milano and from Siemens corporate research center in Munich (Germany). 16. MINERS Projects reports, available from Politecnico di Milano and from EDS-Italy corporate research center in Rome (Italy). 17. U.Cavallaro, F.Garzotto, P.Paolini and D.Totaro, “HIFI: Hypertext Interface for Information Systems”, IEEE Software 10, 6 (Nov. 1993), 48-51. 18. M. A. Bochicchio,R. Paiano, P. Paolini " JWeb: an HDM Environment for fast development of Web Applications" - ", Proceedings of Multimedia Computing and Systems 1999 (IEEE ICMCS '99), Vol.2 pp.809-813 19. M. A. Bochicchio, P. Paolini, "An HDM Interpreter for On-Line Tutorials", Proceedings of MultiMedia Modeling 1998 (MMM ’98), pp.184-190, Ed. N. Magnenat-Thalmann and D. Thalman, IEEE Computer Society, Los Alamitos, Ca, USA, 1998.