Hypermedia engineering is having a rapid growth in today's

Today’s  engineering industry. Ongoing researches have proved

that the efforts of designing and developing hypermedia

applications is different compared to the conventional information system practices

Jantan, Azrul Hazri

Sulaiman, Shahida

Sumari, Putra

English

Hypermedia engineering is having a rapid growth in today’s software engineering industry. Ongoing researches have proved that the efforts of designing and developing hypermedia applications is different compared to the conventional information system practices. It is not a trivial task and the development has generally been ad hoc. Hypermedia practitioners should clarify clearly the information contents structure, complex navigation links, functions and operations, and the presentation of user interface. The main objective of this paper is to present a clear structured view on the process of designing an educational web-based hypermedia application for a university’s faculty, called SpLEA-Web (Self-paced Learning with Exercising Approach Website), starting from the early design stage. We used UML-based design method called UWE (UML-based Web Engineering) for this purpose. Conceptual and navigation designs will be elaborated and reviewed clearly. Finally, some arguments and future refinements for UWE will be discussed and summarized at the end of the paper

Universiti Putra Malaysia Institutional Repository

Systematic design processes of hypermedia engineering: a case study of SpLEA-Web

Repository@USM

systematic Design Processes of Hypermedia Engineering:A Case Study of SpLEA-WebAzrulHazn JantanFac, of Computer Science & Information Technology,Universiti putra Malaysia,Selangor, Malaysia.azrul @ fsktm.upm.edu.myABSTRACTHypermedia engineering is having a rapid growth in today'stgft*ur. engineering industry. Ongoing .esearches have provedthat the efforts of designing and developing hypermediaapplications is different compared to the conventional infbrmationsystem practices. It is not a trivial task and the development hasgenerally been ad hoc. Hypermedia practitioners stroutO claritr,clearly the information contents structure, complex navigationlinks, fi.rnctions and operations, and the presentation of userinterface. The main objective of this paper is to present a clearstructured view on the process ofdesigning an educational web_lary1f hynerrnedia application for a university's faculty, calledS_qLEA-Web (Self-paced Leaming with Exircising ApproachWebsite), starting from the early design stage. We used UML_based design method called UWE (LJMl-based Web Engineering)for this putpose. Conceptual and navigation designs will 5'ielaborated and reviewed clearly. Finally, some arguments andfuture refinements for UWE will be discussed and summarized atthe end ofthe paper.KeywordsWeb-based Hypermedia Application, Design processes,Conceptual Design, Navigation Design, and UML Notations.1. INTRODUCTIONNowadays, web-based hypermedia application is one of thegreatest approaches being used in most universities and schoolsfor teaching and leaming practices.Permission to make digital or hard copies of all or part of this work forpersonal or classroom use is granted without fee provided that copies arenot made or distributed for profit or commercial advantage and thatcopies bear this notice and the full citation on the first pag". To copyotherwise, or republish, to post on sewels or to redistribute to lisii.rcquires prior specific permission andlor a fee.Fir,* Regional Conference on Computational Science and Technologies'07, Nov 29-30, 2007, Sabah. Malavsia.Copyright 2007Putra Sumari, Shahida SulaimanSchool of Computer Sciences,Universiti Sains Malaysia,Pulau Pinang, Malaysia.{putras, shahida} @ cs. usm.myBlended with various forms of multimedia elegrsnts such asgraphics, audio, video, and animation, it gives a more natural wayto express and convey ideas or information to the students.However, the efforts of design and development of hypemrcdiaapplication are not relatively easy, but require deep focuses andexffa efforts among the practitioners to support complex and morcstructured navigation linkages, a high quality of user interfaces,and more varied forms of information for the users [12]. Differurthypermedia and web design methods have been proposed in thelast few years, such as Relationship Management Methodology[9], Object-oriented Hypermedia Design Method [13], WebsiteDesign Method [5,6], UMl,-based Web Engineering [10,] l], andObject-oriented Hypermedia [7]. Of the existing methods, wehave chosen the UMl--based Web Engineering (UWE) method asthe basis for designing SpLEA-Web (Self-paced Leaming withExercising Approach Website). UWE has been selected because itis an object-oriented model driven approach that providesguidelines for the systematic design processes, and it is based onexclusively Unified Modeling Language (llML) [4] notation. Theuse of UML notation has the advantage of using a well knownstandard and most importantly it is compatible and supported bymany case tools [8,11]. UWE consists of four main processes,called requirement analysis, conceptual design, navigation design,and user interface design. For each design stage, a model ordiagram is constructed to present the design result.In this paper we present the design processes involved in thedevelopment of SpLEA-Web, a website that is used mainly forteaching and learning purposes in a university's facultyenvironment. The main objective is to describe the application'sconceptual and navigation designs that are based on IIWE designmethod. SpLEA-Web reacts as a hypermedia application to offerlearning facilities with great possibilities of multimedia feahres.Students can have their own self-paced study anywhere, anyhow,and anytime, without confols by lecturers, thus they become anactive student. There are two main parts in this application. Thefirst part is leaming the course contents while the latter will focuson evaluating student in online quiz section. SpLEA-Web is notonly a presentation system for teaching and learning, but it is alsosuitable for distance leaming. In Section 2, we clarify functionalrequirernents from users. Conceptual and navigation designs ofSpLEA-Web will be presented and reviewed in Section 3 and 4,respectively. Finally, we conclude our works and overview somefuture developments in Section 5.r543872. DEFINING USER REQUIREMENTSUser-centered approach has been used in [6] and [l l] in order todefine clearly the potential users of the hypermedia system andhow they behave in the system. According to this approach, thefunctional requirements of the system will be easily capturedaccording to the users' interests and navigation preferences [6]'UWE used UML-based use case models to present the frrnctionalrequirements from these potential users' Defining use case modelinvolves the following major steps:- Define actors / Potential users.- Define the text for activities the actor will perform.- Establish relationships between actors and use cases.In order to get clearer view of web navigation preferences foreach classified user, we implemented a navigation-pag'e use casemodel, which mean every single webpage for the hypermediasystem can be defined accordingly to each user' In the example ofSpLEA-Web, the potential and most related users are mainly theregistered students of the faculty' employees such as lecturer,tuior. and lab tutor, and general web users. The following figuresshow the details on how we capture those functional requirements'Bmwse "feutf (main page)Bmws"depgrtHfBrcwtrploy6'B]os/s€ 'couts€'Figure 1. Defining the navigation-Page use case diagram.Navigation-Page:'course'<< exlend >> -Read ourse infomalbn <..-..:.::::..(- mff:fl t*Read couse conbnh /..r" .. l-' "IS-ltq) Domtoad noesSubmil signrenb.|# .lljll@l'-, - saverecodsStrdenlstatrs == tuehaComolebd == fabafunctional requirements. Navigation-page use case diagram hasbeen implemented in our case study example to capture theserequirements in a simpler view and give better way for definingwhat will be navigated by the users in the system. Then, for eachnavigation-page, designers have to define activities that will beperformed by the specific users (to show how they behave in thereal system).3. CONCEPTUAL DESIGN MODELConceptual design is the first design process included in UWEtl0,l U design method, which involves identiffing the classes andobjects related in the website to present the application domain.According to [10], conceptual design is based on frrnctionalrequirements defined in use cases models that include the objectsinvolved and aims to build a domain model with no considerationof navigation links, user interface, and interactivity aspects. UMLclass diagrams are constructed to present the conceptual model.Besides, Object Constraint Language (OCL) \s used as therestriction language of the application' Some major steps to builda conceptul model are as follows:- Define classes including their attributes and operations.- Detemrine links/associations and multiplicity between classes'- Define relationships between classes such as inheritance,aggregation, and comPosition.- Identify constraint through OCL (ifrequired).The conceptual model for the SpLEA-Web is shown in Figure3. All together, nine classes have been defined namely faculty,department, employee, non-academic, academic, course, chapter,assignment, and quiz. Since SpLEA-Web is a public website andoffers a general kind of information to students, no OCLrestriction is defured in this example.,Oo /,or \-.sMent \Y'o,O/,O\o'oiStldentFigure 2. Navigation'page uCoarse'lse case modelDue to the limitation space in this paper, we restrict ourselvesin the example to a number of use cases and a navigation page(course) only, although many other webpage examples and theirrelated use cases should be included in the website. Some otherresults from different classified users can be modeled in a similarway according the given examPles.2.1 Reviews on Use Case ModelsThe use of UMl--based use case models gives designer greatfacilities to present a clear and big picture of the hypermediasystem requirements according to classified usen. However,cbmplex *ibsit"t demand a more complicated task to identiff the155388Figure 3. Conceptual Model of SpLEA-Web3.1 Reviews on Conceptual DesignAll classes defined in conceptual model are constructed accordingto the navigation-page use case models. These classes aregathered to present the application domain of the website usineUML class diagram notations. However, designers are required timake crucial decision on how many classes should be prwided inthe model and their associations. These are important as the classnumber and their associations will be considered in the navigationdesign stage (next design step). Classes will be considered asnavigation nodes while associations are the links betrveen thenavigafion nodes.4, NAVIGATION DESIGNJh9 mlin idea of navigation desigrr is to establish the physicallinks of relationship between classes which have been defined inthe conceptual model. UWE [l0,ll] proposed two types ofnavigation design process, called navigation space deiign andnavigation structure design. T\e former will consider conceptualmodel as its input and present which objects or classes can bevisited by users through the navigation links in the application. Onthe other hand, the latter will introduce some of navigation accesselements and present }ou objects in the navigation space modelare visited.4.1 Navigation Space DesignThe first objective of navigation design process is to construct anavigation space model from conceptual model as shown inFigure 4; with all classes that are closely related to the websiteapplication will be remained as navigation nodes while classesthat are not related will be eliminated. However, the informationof the class which eliminated still can be kept as a derive attributefor any other remaining class that require it.In our case study example, class chapter has been eliminated,and its attribute and operation have become a part of class course.Navigation paths must also be defined as it will offer webfunctionality and direct users from one navigation node toanother. There are two modeling elements for constructingnavigation space model, called navigational class and direitnavigability. Navigational class is referring to navigational nodethat will be visited by users in the system and defined by UMLstereotype <<navigational c/ass>. Its name will be the same as theconceptual class. The second modeling element, directnavigability is related with associations and makes connection viaan arrow between source navigational node and the targetnavigational node. At the end of each arrow, a role name isattached and equipped with an explicit multiplicity. Some ofmajor steps dealing with navigation space design are:- By referring to the conceptual model, identify classes which arenot relevant to the website application. In the other word, omitclasses which are not necessary and required to be one of thenavigation nodes of the website. In SpLEA_Web example, wehave decided to eliminate class chapter.- The information of athibutes and operations for the omittedclasses still can be remained in the model as the athibutes andoperations for some other classes (see example in figure 4).Besides, attributes and operations that are irrelevani to ttresystem (from any classes) also can be eliminated.Links are established between classes where additionalnavigation path might be added to the model for directnavigability. The purpose of direct navigability is to avoidnavigation path of length greater than one.Figure 4. Navigatlon Space Model of SpLEA-Web4.2 Navigation Structure DesignThe next step ofnavigation design is to construct a navigationalstructure model from constructed navigation space model, whichwill describe how the nodes in the model are visited. This willinvolve enhancement of navigational space model by offering anumber of navigation access elements such as index, guided tourc,query, and menu. All these modeling elements have been definedaccording to their stereotypes and presented by unique icon asdescribed by [8]. At the beginning, index, guided tours, and queryare inserted to the appropriate links in navigational space model topresent its access mechanisms. An index contains a number oflisted name items with a link to a target navigation class. A guidedtour will provide users with an ordered sequential access to anumber of given navigation classes. ,Nhile query is an interactiveaccess element that provide input field for user to search item byproviding input string as an input to the system. Tnen menu areprovided to present links to a number of target nodes. Each item ina menu has its own link to a target location (e.g. navigation classor an access element). The navigation pattern described in ttWEmethod is shown Figure 5.156389Figure 5. Navigation Pattern for Access Structures [91.ByEnphyeeNareEyoepartnentByEmpbyeeUsing those access structures provided by UWE' we haveenhancid our navigational space model so that it can includeaccess eletnents in the final navigation design presentation' Theresvlt, navigational structure model is shown in Figure 6.4.3 Reviews on Navigation DesignTo conclude. both models constructed in navigation design stageare important in order to present the navigation links that areavailable and types of access elements on the whole system. Theemployment of UML stereotypes from conceptual model makesthj design process of navigation become more systematic andmodels ionit u"ted in a structured way. However, hypermediadesigner have to select appropriate links and access elements tomake sure that the website users who navigate the system are notlost in the navigation space and confuse with the systemfunctionality.Somehow, we argue that UWE is lack of its access elements'Thus, current access elements (index, guided tours, query, andmenu) are not sufficient to support a huge and complex website,especially those involve with complex business process(operations) and complicated navigation structure such as amultimedia-based website.5. CONCLUSIONS AI\DDEYELOPMENTtr'igure 6. Navigational Structure Model of SpLEA-WebFIITUREnavigation-page use case diagrams (base on UML use casemodel) that directly define web navigation pages that will benavigated by the users and activities performed on each webpage.We have also described UWE's core modeling design processesnamely conceptual design and navigation design.Both designs arestrongly related each other to clearly present how classes in classdiagrams or conceptul model being considered as navigationnodes that should available in the website and how they arereached by access elements.However, we argue that in navigation structure design process,there is lack of access elements notations provided by IIWE andthey are not totally emphasizing a complex operation andnavigation structure. UWE only promotes four types of accesselements which practically are not suffrcient to accomplish theneeds of complex navigation structure for huge multimedia-basedwebsite, for example. Some limitations of the current existingaccess elements have been defined and discussed in [2].Therefore. enhancement works on these modeling elementsshould be necessarily conducted in order to get a deeper and detailview to support those complex navigation links. A new navigationpattern for navigation access structures comprises of all accesselements should be enhanced and proposed.The existence ofdatabase in the hypermedia system also needsto be considered in future refinement works. UWE has nographicat notation support on how to present a database table andfield in the system design, neither in conceptual design nornavigation design. Thus, the design result seems to be static andno dynamic operation can took place in the system, even thoughthey are implemented in the real system environment.Our future works will focuses on constructing the finaldesign model called presentational model that deals with as muchas user interface modeling elements which have been deftned anddescribed by UWE. By referring the navigational sfiucture modelpresented in Figure 6, each navigation node will becomes apresentation node and enhancement is done to clearly view thepresentation ofuser interface for each node'Currently, our project on SpLEA-Web is still at the earlier stageofdesigning process. In this paper, we have demonstrated a clearstructured view of the design processes involved in this websiteapplication using a systematic hypermedia design method calledfiwg. uwE has been chosen for its clarities and simplicity onpresenting the design results based on UML graphical notations'bur works start with defining functional requirements from thepotential users of the website and we have implemented the use ofr573906. REFERENCES[] Ateyeh K., Millie J.A, Lockemann p.C. Modulardevelopment of multimedia coursewqre. proceedings of theFirst Intemational Conference on Web Information SvstemsEngineering, YoL2, pp:179 - l g7, June 2000.[2] AznJ, J., Putra, S. and Shahida, S. UML-based HypermediaDesign Method: A Review on Design processes andModeling Elements, Computer Science postgraduateColloqium (CSPC07), Universiti Sains Malaysia] puhuPinang, June 2007.[3] Bama P., Frasincar F., Houben G.J, and Vdovjak R.Me^thodologies for Web itormation system -design.Information Technology: Coding and Computing [Computirsand Communicationsl, pp:420 - 424,Aprii2003.[4] Booch G., Jacobson I., Rumbaugh J. The IJni/ied ModelingLanguage User Guide. The Addison_Wesley Objec-tTechnology Series, I 998.[5] De Troyer. Audience Diven lteb Design. In Informationmodelling in the new millennium, Eds. Matt Rossi & KengSiau, Publ., IDEA Grouppublishing, ISBN l_g7g2gg_77_;,2001.[6] De Troyer and Leune C.J. IISDM: A user_centered designmethod for web sltes. Computer Networks and ISDNSystems, Proceedings of the 7th international W.WWconference, Elsevier pp. 85-94, I 99g.l7l Gomez J. and Cachero C. OO-H Method: extending UML tomodel web interfaces. Information modeling for internetapplications, ISBN: l-591-40050-3, pp:l44_t7i, 2003.[8] Hennicker R. and Koch N. A LIML-based Methodologt forHypermedia Design. UML'2000-The Unified ModelingLanguage-Advancing the Standard, LNCS 1939, york,England, @Springer Verlag, October 2000.[9] Isakowitz T., Edward A.S, Balasubramaniam p. RMM: AMethodologt for Structured Hypermedia Design. Comm. ofthe ACM, Vol. 38 Issue 8 pp:34-44, 1995.[0] Koch N., Kraus A., and Hennicker R. The Authoring processof the UMl-based Web Engineering Approach. fn nanietSchwabe, l'r lnternational Workshop on Web-orientedSoftware Technology (IWWOST0I), online publication,June 2001.I l] Koch N. and Kraus A. .The Expressive power of UMl-basedlVeb Engineering. 2M International Workshop on Web_oriented Software Technology (IWWOST02), D. Schwabe.O. Pastor, G. Rossi, and L. Olsina, editors, CYTED, pp:105_I I 9. June 2002.|21 Lang M. and FiEgerald B. Hypermedia SystemsDevelopment Practices: A Survey. IEEE Software yol.22.Issue 2, pp:68 - 75, Mar-Apr 2005.[3] Schwabe D. and Rossi G. Developing HypermediaAqplication using OOHDM. Proceedings of Workshop onHypermedia Development process, Methods, and Model.1998.|41 Z&avkova K. and Hristov R. Conceptual Design ofMatHypSystem. Electrotechnical Conference, 2004.MELECON 2004. proceedings of the l2th IEEEMediterranean Yol.2, pp:743 - 746, l2-l1 May 2004.158391

A LIML-based Methodologt for Hypermedia Design.

Audience Diven lteb Design. In Information modelling in the new millennium, Eds. Matt Rossi & Keng Siau, Publ.,

Developing Hypermedia Aqplication using OOHDM.

Lockemann p.C. Modular development of multimedia coursewqre.

OO-H Method: extending UML to model web interfaces. Information modeling for internet applications, ISBN:

RMM: A Methodologt for Structured Hypermedia Design.

The Authoring process of the UMl-based Web Engineering Approach. fn naniet Schwabe, l'r lnternational

UML-based Hypermedia Design Method: A Review on Design processes and Modeling Elements, Computer Science postgraduate Colloqium (CSPC07), Universiti Sains Malaysia] puhu Pinang,

Systematic Design Processes Of Hypermedia Engineering: A Case Study Of Splea-Web,

http://eprints.usm.my/9571/1/Systematic_Design_Processes_of_Hypermedia_Engineering_A_Case_Study_of_SpLEA-Web.pdf

Systematic Design Processes Of Hypermedia Engineering: A Case Study Of Splea-Web,

Abstract

Similar works

Full text

Available Versions

Universiti Putra Malaysia Institutional Repository

Repository@USM