conceptual modeling in web-based hypermedia...

11
Proceedings of the 4 th International Conference on Information Technology and Multimedia at UNITEN (ICIMU' 2008), Malaysia 17 th - 19'h November 2008 Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM Azrul Hazri Jantan Faculty of Computer Science and Information Technology, Universiti Putra Malaysia. Selangor. azru l@!sktm. upm. edu. my Abstract The coexistence of different complex features in web hypermedia applications such as information structures, navigation access mechanisms. and user interface interaction. raises new issues on the user-centered modeling approach paradigm. Thus, to provide a clear structured view of application domain, web designers must identify and clearly define complex processes existed in such applications. In this paper, we focus on conceptual design stage for complex processes in web hypermedia applications. We introduce a hypermedia design method called ComT HDM which uses UML profiles and its notation as the main graphical notation in the modeling stage. Com'HDM deals conceptual design through its three sub-design stages. called (a) conceptual-class design. (b) complex-process flow design, and (c) conceptual-process design. We present new UML specific modeling elements (stereotypes). which are defined according to the general extension mechanism in UML profile to support complex processes modeling. Each stereotype reviewed will be elaborated clearly on its definition and functionality. To illustrate our modeling example. a case study of SLEX-Web is provided. The core modeling concepts are discussed and summarized at the end of the paper. 1. Introduction The processes of designing and developing web hypermedia applications have raise a number of design issues and increase the challenges on hypermedia modeling approaches [5]. Unfortunately, the complexity of these applications is often deceptive [14], making the application fails in their functionalities, lack of qualities, and struggling to meet user requirements [1,15]. According to [4], web hypermedia applications should support variety form of information structures, high 903 Putra Sumari, Shahida Sulaiman School of Computer Sciences, Universiti Sains Malaysia. Penang. {putras, shahida}@cs.llsm.my quality of user interface, complex application processes, and navigation access mechanisms. Thus, a number of modeling concepts have been proposed in current hypermedia design methods, such as Relationship Management Methodology [6], Object-oriented Hypermedia Design Method [7], Website Design Method [8,9], UML-based Web Engineering [10,11], and Object- oriented Hypermedia [J2] . However, a comparative study has been taken in [21] that show more design efforts are required to take place for supporting more complex structures of web hypermedia applications. We define complex structures as the following terms -applications that comprise of nested processes (which contains set of sub-processes / subtasks); applications with processes that can be suspended or resumed again (depends on user demand); and applications that enforce processes to be synchronized within their predefined activity sequence. One of our main objectives in this paper is to present Com+HDM - Comprehensive Hypermedia Design Method for Complex Processes Modeling. It is a UML- based and uses UML profiles for modeling functional requirements and three major design processes, namely conceptual design, navigational design, and user interface design [1]. Due to the Jimitation space in this paper, we only focus our discussion on the conceptual design stage. Our main concern is three folds, (a) to describe the application domain through class diagram, (b) to capture flow of complex processes through activity diagram, and (c) to present complex processes through the definition of extended UML profiles (stereotypes). We provide a case study of SLEX-Web - Self-paced Learning with Exercise on the Web as our running example to show how our modeling concepts suits into the complex modeling paradigm. This paper is organized as follows. Section 2 introduces a brief description of Com +HDM and its methodological approach. In Section 3, we briefly describe requirement analysis to capture functional requirements of web users and present the result in use

Upload: dangcong

Post on 04-Apr-2018

217 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

Proceedings of the 4th International Conference on

Information Technology and Multimedia at UNITEN (ICIM U' 2008) , Malaysia17th

- 19'h November 2008

Conceptual Modeling in Web-based Hypermedia Engineeringwith Com+HDM

Azrul Hazri JantanFaculty ofComputer Science and

Information Technology,Universiti Putra Malaysia. Selangor.

azru l@!sktm.upm.edu.my

Abstract

The coexistence of different complex features in webhypermedia applications such as information structures,navigation access mechanisms. and user interfaceinteraction. raises new issues on the user-centeredmodeling approach paradigm. Thus, to provide a clearstructured view of application domain, web designersmust identify and clearly define complex processesexisted in such applications. In this paper, we focus onconceptual design stage for complex processes in webhypermedia applications. We introduce a hypermediadesign method called ComT HDM which uses UMLprofiles and its notation as the main graphical notation inthe modeling stage. Com'HDM deals conceptual designthrough its three sub-design stages. called (a)conceptual-class design. (b) complex-process flowdesign, and (c) conceptual-process design. We presentnew UML specific modeling elements (stereotypes).which are defined according to the general extensionmechanism in UML profile to support complex processesmodeling. Each stereotype reviewed will be elaboratedclearly on its definition and functionality. To illustrateour modeling example. a case study of SLEX-Web isprovided. The core modeling concepts are discussed andsummarized at the end ofthe paper.

1. Introduction

The processes of designing and developing webhypermedia applications have raise a number of designissues and increase the challenges on hypermediamodeling approaches [5]. Unfortunately, the complexityof these applications is often deceptive [14], making theapplication fails in their functionalities, lack of qualities,and struggling to meet user requirements [1,15].According to [4], web hypermedia applications shouldsupport variety form of information structures, high

903

Putra Sumari, Shahida SulaimanSchool ofComputer Sciences,

Universiti Sains Malaysia. Penang.{putras, shahida}@cs.llsm.my

quality of user interface, complex application processes,and navigation access mechanisms. Thus, a number ofmodeling concepts have been proposed in currenthypermedia design methods, such as RelationshipManagement Methodology [6], Object-orientedHypermedia Design Method [7], Website Design Method[8,9], UML-based Web Engineering [10,11], and Object­oriented Hypermedia [J2] . However, a comparative studyhas been taken in [21] that show more design efforts arerequired to take place for supporting more complexstructures of web hypermedia applications. We definecomplex structures as the following terms -applicationsthat comprise of nested processes (which contains set ofsub-processes / subtasks); applications with processesthat can be suspended or resumed again (depends on userdemand); and applications that enforce processes to besynchronized within their predefined activity sequence.

One of our main objectives in this paper is to presentCom +HDM - Comprehensive Hypermedia DesignMethod for Complex Processes Modeling. It is a UML­based and uses UML profiles for modeling functionalrequirements and three major design processes, namelyconceptual design, navigational design, and userinterface design [1]. Due to the Jimitation space in thispaper, we only focus our discussion on the conceptualdesign stage. Our main concern is three folds, (a) todescribe the application domain through class diagram,(b) to capture flow of complex processes through activitydiagram, and (c) to present complex processes throughthe definition of extended UML profiles (stereotypes).We provide a case study of SLEX-Web - Self-pacedLearning with Exercise on the Web as our runningexample to show how our modeling concepts suits intothe complex modeling paradigm.

This paper is organized as follows. Section 2introduces a brief description of Com +HDM and itsmethodological approach. In Section 3, we brieflydescribe requirement analysis to capture functionalrequirements of web users and present the result in use

Page 2: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

case models . Then we describe in details two designactivities of conceptual design, called conceptual-classdesign and complex-process flow design. Our maincontributions of this paper are described in Section 4. Wepropose and define a number of UML specific modelingelements, called stereotypes to capture and model flow ofcomplex processes in hypermedia applicati ons. A newmodel, 'conceptual-process model' (CPM) is proposedand constructed to present the final result of complexprocesses modeling. Finally, we conclude and summarizeour work at the end of the paper.

2. Com+HDM: A Modeling Approach

This paper concentrate on a hypermedia design methodcalled Com+HDM - Comprehensive Hypermedia DesignMethod for Complex Processes Modeling to supportcomplex web hypermedia application design andmodeling. We put our special focus on the systematicconceptual design, navigation modeling paradigm, anduser interface interaction. In general, Com+HDM is anobject-oriented approach based on Unified ModelingLanguage (UML ) profiles [1 3] and has similarity toexisting UML-based Web Engineering (UWE) [10,11].Our modeling method is not a totally new one that isdefined from scratch, but we compare and combine wellproved design aspects of existing hypermedia designmethods to improve the resulting combination with somenew ideas. Fig . I shows the Com+HDM methodologicalapproach.

DESIG N STAGES:

Conceptual Design

J, II Classes and _->ICom plex Processes Modeli ng IObjects

v: 'I' '";;. c:;,. c I ,-l ""="::::'0( a 3

I IZ ~"" Navigational Design0( ~ .~I-Z :::E~ II Navigational -+1 Navigation Paths (Access Ito: .,.. c::; ~

.,.. Nodes Structures + lnteractions j'" Eto: U~ .....:z: ~ .- '";;: .z: 5

0-~ .... , ,

to:x

:z: I UlCr laterface Design II

r II Web Page -+1 User Interlace Hcmcnts ILayout

~ ?/Fig. 1: Methodological Approach of Com+HDM

Our method can be divided into four main stages whichare performed in iterative and incremental design process.The stages are requirement analysis. conceptual design.navigational design. and user interface design. Each

904

stage contributes to the construction of a model. Ingeneral, we use UML standard modeling elements andUML stereotypes for the applicati ons modelin g. Thestereo types are used to indicate the descript ive andrestrictive properties that the modeling elements have incomparison to standard UML modeling elements. Somereviews and discussions about UML stereotypes can befound in [3]. The following sections describe the uses ofUML standard modeling elements and UML stereotypesdefined in our modeling approach.

3. Conceptual Design of Com+HDM

Most of hypermedia design methods such as WSDM[8], OO-H [12], and UWE [II] implement user-centeredapproach to define clearly who will be the potential usersof the application and how they behave towards theapplication processes. The functional requirements of theapplication will be easily captured according to the users'interests and navigation preferences. Results are normallypresented in Use Case Model s [13] and RequirementSpecifi cations conform ing to IEEE 830/1998 standard.Due to limitation space in this paper, we restrict ourselves(in our case study ) to a number of functionalrequirements only, although many other elements shouldbe included in the application. Fig. 2 defines some ofactivities performed by a student while navigating coursewebpage.

Navigation-Page: ' course"

Login forregistered student

Read course information I contents InotesI download

Submit assignments

Participate inonline quiz

Extension points:Student status == truehasCompleted== false

Fig. 2: Use Cases for the "Course" Navigation-Page

Navigation-page use cases diagram [2] has beenimplemented in our case study to capture some ofcompl ex functional requirements on particular websites inorder to provide a simpler view and give better way fordefining what will be navigated by the users in aparticular webpage. In the course webpage for example , aregistered user can login, read information about course,submit assignments, and participate in online quiz (whichseems can be defined as complex processes). Some otherresults from different classified users can be modeled in asimilar way according to the given examples.

Page 3: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

Fig. 3: Conceptual Class Model (CCM) ofSLEX-Web

P\lsl Answer s toAn swer Sheet

- - - ~ I )al aha.'t· look /ll'---,-_/

Finish

( f)u/"ha.\(' (>ntr. 1 ) - -

Stan

o

as complex processes in the application. The result ispresented by UML activity diagrams (standard modelingelements), called Complex-process Flow Model (CFM).1n SLEX-Web case study (see Fig. 3), the focus will becentered on the class course which aggregated by theclass note, assignment, and quiz. These classes willprovide examples to present the existence of complexprocesses and how the design should be conducted.

Fig. 4 presents the main activities involved in Quizclass. The CFM consist a number of complex processes(non-atomic processes) which are performed in sequentialand iterate fashions. At the beginning, students mustvalidate themselves through the login process and thiswill require a database lookup for the particular entry .Once the students have been logged in, they couldproceed to start the quiz session. Students are required toset the answer one by one and post them to the answersheet.

develop

"1...

has ...

manages ...

.... consistOf

According to [10], conceptual design should be basedon user functional requirements defined in the use casesmodels. The aim is to build a domain model with noconsideration of navigation links, user interface, andinteractive aspects. In Com~HDM, conceptual-classdesign, which is also known as content modeling, has toconstruct a UML class diagram. The main purposes aretwo folds; (1) to capture all classes and objects that arerelated in the application domain , and (2) to provide aclear view on the classes ' associations. However, thisdesign activity is less concerning on specifying complexprocesses.

3.1. Conceptual-Class Design

The result of this design activity is presented viaconceptual-class model (CCM) as illustrated in Fig. 3.Standard modeling elements have been used forconstructing the model such as class name, association,role name, multiplicity, relationship, etc. For the sake ofsimplicity, the CCM for the SLEX-Web hides class'sattributes and operations.

3.2. Complex-processes Flow Design Fig. 4: Complex-process Flow Model (CFM) of class Quiz

Refinement of the complex processes modeling isconducted in this design activity to provide behavior viewof the web hypermedia application, which is also calledactivity / process flow design. The main objectives aretwo folds; (1) to define User Activities - which task auser should perform (in logical and temporal order) tocomplete a transaction and achieve the goal, and (2) todetermine both atomic (single process) and non-atomic(set of predefined processes) operations that are classified

While answering the questions, students are possible tonavigate online notes (as in note's class), out from quizsession's page. After a while, they can resume again theirquiz session. These processes repeated until all questionshave been answered by viewing the answer sheet. If thereare some amendments of answers, students are capable toreach the questions and change their answers. Studentswill confirm and submit the answers before getting the

905

Page 4: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

result. Result is displayed and stored in database forfurther record. Students may sign out after that.

4. Conceptual-process Design: Our Approach

Com+HDM design approach for modeling complexprocesses in web hypermedia applications is based on thetwo models constructed in previous sections; namelyConceptual-class Model (CCM) and Complex-processFlow Model (CFM). In this design activity, we introduceand propose a number of new modeling elements, calledstereotypes, improving the way of current hypermediadesign method such as OOHDM [7], OO-H [12], andUWE [II] to deal with specific complex processes in webhypermedia applications. According to [18], OOHDMtreats the existence of complex processes (defined asbusiness processes) by partitioning the conceptual designspace between entities and activities (processes) usingtheir proposed UML stereotypes called «entity» ,«activity», «entity node», «activity node», and «activitynode container» to indicate which partition an itembelongs to. On the other hand, OO-H and UWE haveproposed other solutions of dealing complex processes inweb applications [16]. OO-H treats their complexprocesses through its class diagram, activity diagrams,and mapping rules set to transform the conceptual modelinto navigational model [25]. UWE however, introducessome specific classes that are part of a separate processmodel with clear interface to the navigational model. TwoUML stereotypes were proposed by UWE, namely«process class» and «process link».

4.1. A Support for Complex Process Modeling

One of the factors that make web hypermediaapplications as a complex example is the needs for themto support flow of complex processes for their evolution[17]. Ongoing research has shown that complex processesmust be considered and relied on each design process.According to [18], complex processes are inadequatelysupported by the means of normal navigationsmechanisms but they should have to integrate someprocess flow in order to avoid usability problems anderroneous results from being generated. Thus, this willrequire web designers to consider designing complexprocesses from the earlier design stage.

Most of hypermedia design methods have a littleconcern on this issue and they are incomplete orinadequate to answer this new challenge of complexprocesses modeling. A comparative study has been madeby [21], that shows most of current hypermedia designmethods are unable to address the modeling functionalityof a complex process. Therefore, in the next section, wewill introduce and describe our propose UML stereotypes

906

for designing complex processes In web hypermediaapplications.

4.2. The Conceptual-process Stereotypes

A brief introduction about complex hypermediaapplication modeling has been discussed in [I] in order tocapture a wider view of critical complex processes inconceptual design phase. In the treatment of complex webhypermedia applications, we conclude and proposeconceptual-process modeling elements (stereotypes) asregard to contribute on how complex processes should besystematically modeled in conceptual-process designstep. The modeling elements are defined as UMLstereotypes as shown in Table I:

Table I: The Proposed UML Stereotypes

Stereotype / GraphicalDescriptions

Notat ion

• Will he defined as the similar way as action taken b)

«process class» 6 user to perfo rm an activit)'. This can be done eas ily h)'

Process_Class referri ng to the Wit! ( '( I.\t' defi nition in functionalrequ irement ana lysis.

.Instanc~ or ohjcct would he used by users duri ng theexecution of a sequenc e of pre-defined processes.

e Inher ited by two sub-cl asses. called atomic class andnon -atomic class.

-In an)' cases. proc:e.\'.\' class would become the root ofnon-atomic class now of processes.

0_Inherit the definition of process class. Determined b)

«atomic class» the name of act ion take n by user to perform an

Atom ic_Class activity as being defined in use cu.n' dc Jinition.• Can be performed and executed independently as a

sin lie operation I process.

0_ Inher it the de finition of process class , Determined b)

«non-atomic dass» the name o f actio n taken by user to perfonn an

NonAtomic_Oass acti vity as being defined in uw case definition .-In co ntrast to atomic class. the exec ution of non-

atomic or pre-defined processes must he perfo rmed inseque ntial order (they might have de pendencies fromeach other ],

- Non-atomic class "i ll pass info rmation from oneclas s to another clas s.

[liI]o Models the existenc e of database in appl ication

«data base dass» dom ain.

Database_Class • To provide- a logical view of database operationsbetween process cluss (atomic class and non-atomicd",n) and database cluss ,

_ Database class must owned by at least one procf.'i.\'

class.

0• Group and partition process cluss and all of its rela ted

«process container» modeling clements in order to indicate their

Process_Container relationship or depend encies.- Determine which part ition an instance of processes

belon es 10.

~- Assoc iation between two separate d classes:

" Process_Unk» con cept nul clan to process class and vice versa.(Stealth Arrow)

o Also known as ex ternal link that connects those

classes.

-----~• Associat ion between operations taken by users in the

«Action_Link» same process class (process cluss to pron 'ss elms).(Dashed-Stealth Arrow) • To force dependencies of proce sses and infonn ation

now in particular process clu ss.

... ~• Assoc iation between nlnn'ptuLiI class or proCt.',\',\'

«Database_Unk» class to database class.(Bold Arrow) o Renresent the in formation and data operations such as

Page 5: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

query. lookup. entry. etc that involved with databaseapplication.

Table I shows the list of conceptual-process UMLstereotypes used in our proposed design method. Duringconceptual-process design, these stereotypes are neededto cooperate with each other in order to construct the finalmodel of conceptual design phase, called Conceptual­process Model (CPM). This effort differs from otherexisting hypermedia design methods in a way to constructseparate and yet detail class features which has beenincluded in most hypermedia application domain.

In our SLEX-Web case study, we have consideredConceptual Class Model (CCM) and Complex-processFlow Model (CFM) in order to design the CPM. In thismodel, we include conceptual classes from CCM andflow of user activities from CFM to generate andimplement our new stereotypes as proposed in Table I.The CPM of our case study is shown in Fig. 5.

group and partition in a container called Quiz_Container.However, if students are required to refer some noteswhile answering a question, they are possible to navigateout of the quiz session through a stereotype process linkto reach conceptual class note. After a while, students canresume again their quiz session without login again.These processes proceed until students complete toanswer all questions and view them through answersheet. Once confirmed with all answers, students submittheir final answers before get the result. All results arestored in Student_Quiz database.

5. Conclusions

We have presented a UML-based approach of complexweb hypermedia modeling, called Com+HDM. Our mainobjective is to demonstrate a clear and systematicmodeling concept of conceptual design in complexhypermedia applications. The use of UML notation hasthe advantage of using a well known standard and thecompatibleness by many CASE tools [22]. Besides, UMLalso provides great facilities to present modelsconstructed as design results based on its own systematicmodel-driven approach. Our focus is to concentrate onUML stereotypes as the main modeling elements in theconceptual modeling. We separate our work into threesteps, called conceptual class design, complex processesflow design, and conceptual process design. Each designstep produces a model to present the conceptual domainof the application, namely conceptual class model(CCM), complex-process flow model (CFM), andconceptual process model (CPM), respectively.According to [18] and [21], most of hypermedia designmethods are inadequately to support modeling complexprocesses and we have discussed this in Section 4.Therefore as part of this work, we introduce a number ofnew modeling elements (stereotypes) to model a flow ofcomplex processes in hypermedia application. Each UMLstereotype has their own definition and reacts as aseparate modeling class to represent the classification ofcomplex process. These stereotypes can be summarizedas a conceptual process pattern as shown in Fig. 6.

n

'": «action link»

If database class I) ..

Student_Quiz

IIIIII_.

« conceptual cla:ss ,IAssignment

I( process container I)

Quiz_Container

14--..... «database class» .-..1.

StudentH)

I «action link»I

I «action link»..v

•IL _

«action link»I-_-=--=-__...J

<mon-atomic class» 0SetAnswer

«non-atomic class) 0StarrQuiz

'".$1:1'"c~~

'".-'"c

c ~0

"~ ~0-

N~

·50-<1>

§~

'".-'"c

~~0-~

< conceptual class »

Note

Fig. 5: Conceptual Process Model (CPM)ofSLEX-Web Application

As we refer to Fig. 5, each student must hold a login IDand validate it before start a quiz session. Once validatedthrough StudentJD database, student can b~gi~ t~eir ~uizsession at their own pace. The quiz session IS divided m~o

a number of pre-defined processes (non-atomicprocesses) which defined via non-atomic classes. In the~e

non-atomic classes, some of them might be performed III

sequence or iterate fashions. All of these classes are

«process link» J ((conceptual class ), L .database link»Conceptual Class r

( process container » o «process link»Process Container

,.-- «process class» [:, I -database link» J «database class» I.!.._- Process Class I -I Database Class

'--- «actionlink-~

I«non-atomic class" (!) I«atomic class'> 0 INon-Atomic Class Atomic Class

907

Page 6: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

Fig. 6: The definition (pattern) of UML stereotypes forConceptual-Process Design in Com+HDM

To conclude, we summarize and propose a conceptualprocess pattern for complex hypermedia design inCom+HDM as shown in Fig 6. This conceptual processpattern can be referred as the core modeling elementsused in the conceptual-process design step.

6. References

[1] A.H. Jantan, P. Sumari, and S. Sulaiman, "DesignProcesses for Web-based Hypermedia Engineering" The3rd Malaysian Software Engineering Conference '07,Selangor, pp. 182-186, Dec 3-4 2007.

[2] A.H. Jantan, P. Sumari, and S. Sulaiman, "SystematicDesign Processes of Hypermedia Engineering: A CaseStudy of SpLEA-Web", I" Regional Conference onComputational Science and Technologies '07~ Sabah, pp.154-158, Nov 29-30 2007.

[3] A.H. Jantan, P. Sumari, and S. Sulaiman, "UML-basedHypermedia Design Method: A Review on DesignProcesses and Modeling Elements", Computer SciencePostgraduate Colloqium (CSPC'07), Universiti SainsMalaysia, June 2007.

[4] M. Lang and B. Fitzgerald, "Hypermedia SystemsDevelopment Practices: A Survey", IEEE Software,Volume 22, Issue 2, pp. 68-75, March-April 2005.

[5] Z.S. Qian, H.K Miao, and H. Tao, "An Approach toModeling Hypermedia Web Applications", The 61h

International Conference on Grid and CooperativeComputing 2007, pp. 847-854, 16-18 August 2007.

[6] T. Isakowitz, A.S. Edward, and P. Balasubramaniam,"RMM: A Methodology for Structured HypermediaDesign", Communication ofthe ACM Volume 38, Issue 8,pp. 34-44, 1995.

[7] D. Schwabe and G. Rossi, "Developing HypermediaApplication using OOHDM", Proceedings of Workshop onHypermedia Development Process. Methods. and Model,1998.

[8] De Troyer, "Audience Web Design", In InformationModeling in the New Millenium. Eds Matt Rossi and KengSiau. IDEA GroupPublishing, 2001.

[9] De Troyer and C.J. Leune, "WSDM: A User-centeredDesign Method for Websites", Proceedings of the 7thInternational WWW Conference on Computer Networksand ISDN Systems ". Elsevier, pp. 85-94, 1998.

[10] N. Koch, A. Kraus, and R. Hennicker, "The AuthoringProcess of the UML-based Web Engineering Approach",In Daniel Schwabe. 1st International Workshop on Web­oriented Software Technology (/WWOSTOl). onlinepublication, June 2001.

[11] N. Koch and A. Kraus, "The Expressive Power of UML­based Web Engineering", 2nd International Workshop onWeb-oriented Software Technology (/WWOST02). D.Schwabe, O. Pastor, G. Rossi, and L. Olsina, editors,CYTED, pp. 105-119, June 2002.

908

[12] J. Gomez and C. Cachero, "OO-H Method: ExtendingUML to Model Web Interfaces", Information ModelingforInternet Applications. pp. 144-173, 2003.

[13] G. Booch, I. Jacobson, and J. Rumbaugh, "The UnifiedModeling Language User Guide", The Addison-WesleyObject Technology Series, 1998.

[14] A. Ginige and S. Murugesan, "Web Engineering: AnIntroduction", IEEE Multimedia, Volume 8, No.1, pp. 14­18, Jan-March 2001.

[15] P. Avgeriou and S. Retalis, "CRITON: A HypermediaDesign Tool", Multimedia Tools and Applications, 27, 5­21 Springer, 2005.

[16] N. Koch, A. Kraus, C. Cachero, and S. Melia, "ModelingWeb Business Processes with OO-H and UWE",Proceedings of the 3rd International Workshop on WebOriented Software Technology (IWWOST). July 2003.

[17] D. Distante, G. Rossi, G. Canfora, and S. Tilley, "AComprehensive Design Model for Integrating BusinessProcesses in Web Applications", International JournalWeb Engineering and Technology, Volume 3, No.1, pp.43-72,2007.

[18] H.A. Schmid and G. Rossi, "Modeling and DesigningProcesses in E-Commerce Applications", IEEE InternetComputing, Volume 8 Issue I, pp. 19-27, Jan-Feb 2004.

[19] J. Dietz and H. Shouten, "Modeling Business Processes forWeb-based Information Systems Development",Proceeding of the 1st International Conference on WebInformation System Engineering, Volume I, pp. 270-282,June 2000.

[20] O. De Troyer and S. Casteleyn, "Modeling ComplexProcesses for Web Applications using WSDM",Proceedings of the 3rd International Workshop on WebOriented Software Technology (IWWOST). July 2003.

[21] S.S. Selmi, N. Kraiem, and H.B. Ghezala, "Toward aComprehension View of Web Engineering", InternationalConference on Web Engineering (/C WE05) , Sydney,Australia, pp. 19-29, July 2005.

[22] R. Hennicker and N. Koch, "A UML-based Methodologyfor Hypermedia Design", UML'2000 - The UnifiedModeling Language, Advancing the Standard, LNCS 1939,York, England ©Springer Verlag, October 2000.

[23] S. Ceri, P. Fraternali, and M. Matera, "ConceptualModeling of Data-Intensive Web Applications", IEEEInternet Computing, Volume 6, Issue 4, pp. 20-30, July ­August 2002.

[24] M. Brarnbilla, S. Comai, and C. Tziviskou, "ExceptionManagement Within Web Applications ImplementingBusiness Processes", C. Dony et al. (Eds): ExceptionHandling. LNCS 4119, Springer-Verlag Berlin Heidelberg,pp. 101-120,2006.

[25] J. Gomez, C. Cachero, and O. Pastor, "Extending aConceptual Modelling Approach to Web ApplicationDesign", Conference on Advanced Information SystemEngineering, 2001.

[26] L. Baresi, F. Garzotto, and P. Paolini, "From Websites toWeb Applications: New Issues for Conceptual Modeling",ER'2000 Workshop on Conceptual Modeling and the Web,LNCS 1921. Springer-Verlag, pp. 89-100, 2000.

[27] D. Distante, G. Rossi, and G. Canfora, "Modeling businessprocesses in web aplications: an analysis framework",Proceedings of the 2007 ACM Symposium on AppliedComputing, pp. 1677-1682, 11-15 March 2007.

Page 7: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

Proceedings of the International Conference on

Information Technology and Multimedia at UNITEN (ICIMU' 2008) . Malaysia17'h - 191hNovember 2008

A Study on Landmark Identification for Craniofacial Data Registration

Pan Zheng l, Rozniza Zaharudin', Bahari Belaton', Zainul Ahmad Rajiorr'

School ofComputer Sciences I, School 0/Dental Sciences'Universiti Sains Malaysia

[email protected], [email protected], baharitiics.usm.my. zainultiokck.usm.my

Abstract

The focus of this study is to describe thedevelopment ofa method identifying landmarks on anisosurface visualized from CT generated craniof acialdata in a 3D environment. The work is achieved byusing graphical subprogram library , VisualizationToolkit. This development of this study facilitatescurrent craniofacial surgeries. A 3D-based automaticlandmark detection method is proposed at the end.

1. Introduction

Craniofacial surgeons rely on landmarks onsynthetic skull model to analyze and plan theiroperations conventionally. Landmarks are obtainedthrough direct measurement on 20 images from X-ray,or ultra sound images in many occasions. Theidentification is a tedious and time consuming taskwhich often depends on ones' previous experiencesand understanding with certain level of arbitrary. Ascomputer-assisted surgery is becoming more and morepopular because of safety, accuracy and less side effectand damage [I], by taking the advantage of currentwidely used computed tomography (CT) and MagneticResonance Imaging (MRI) technologies, and usingproper techniques and tools to identify landmarksdirectly on digitized craniofacial data, this fills the gap.Craniofacial visualization as a prerequisite is a processof creating interactive visual 3D representation ofhuman skull. It tremendously facilitates the process.Landmarks are placed in a visualized environment.Here in this study, landmarks are defined as salientpoints which denote distinctive feature on hard tissueof human head and have strong anatomical relationshipamong them. Registration of a deformed skull to astandard model can be conducted by various ways [2].Landmark based registration (LBR) is a common andnoninvasive practice in this domain.

909

The aim of this study is to describe the developmentof an efficient and convenient method for identifyingcraniofacial landmarks on CT generated data usingVisualization Tool Kit (VTK) by Kitware, Inc.

2. Related works

Craniofacial Landmark identification research isintensively conducted by experts from both computerscience and medical science fields. Our researchershave previously conducted landmark placementanalysis based on anatomical regions. The approachuses 3D CAD files for visualization and landmarkplacements [3]. This approach is limited by CADenvironment and lack of flexibility of furtherdevelopment. Grau et al [4] proposed a method onlandmark identification on 20 X-ray images. This 20implementation is consisted of two phases which areline detection model and point detection model. Linedetection uses zero crossings detection of the GaussianLaplacian (figure I) and for point detection, it usesmathematical morphology techniques. This methodprovides a very convincing landmark detectionapproaching, but it suffers from high computation cost.

Figure I. Grau's line detection

A Complicated neural network approach usesmachine learning is given by Feghi [5]. It concerns onpattern, which requires a predefined contour map.Such approach requires high quality of images andhardly to implement where there is a need foradditional landmarks.

Page 8: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

Mappermapthedatato graphics

primitives 'or display

and volume rendering. Iso-surface construction isusing Marching Cubes. The visualization pipeline isillustrated in figure 4.

Cameravirtual camera for

3D rendering

Transformit controls theposition and

scaleofthe actor

RenderWindowIt represents a window of

theapplication

Lightvirtuallight for 3D

rendering

Data ModelAcquisition Construction

~ ~Data Landmark

Visualizat ion Posit ioning

~ ~Landmark Landmark

Deployment \4- Model

3.1. Data Acquisition

Our study is carried in 3D environment. It includesfive related phases, which are data acquisition,visualization, data preprocessing, reference modelconstruction and application of landmark placement

Figure 2. Basic flow of the design

3. Landmark identification

The sample data sets used in this research arecaptured with a GE Lightspeed Plus CT ScannerSystem at the Department of Radiology, HospitalUniversiti Sains Malaysia. The scans are conducted inaxial manner. There are often 160 to 210 slices for ahuman head. The data produced by CT scanner aresent to GE Advantage workstation .

Figure 3. Data acquisition

RenderWindowlnteractorsuppliesa simple supportfor

the interactJon

Figure 4. Visualization pipeline

3.3. Data preprocessing

The actual DICOM data is fairly huge, which isinefficient for data loading and manipulation. Datapreprocess reduces the data size by extracting the is~­

surface of interest and sub sampling. The result IS

desirably small, yet aliasing.We apply Gaussian Smooth to eliminate jaggies.

The final data is saved in .vtk native data format.

A GE Advantage workstation is a CT data analysisand repository system which is based on Sun's Solarisoperation system. The CT data are saved in DICOM(Digital Imaging and Communications in Medicine)format.

3.2. Visualization

There are many visualization tools available .Visualization Took Kit (VTK) from Kitware ispowerful. open source subprogram library which isbuilt in C++. Besides C++. it offers many wrappingprogramming languages such as JAVA, Python andTcl/tk [6] .

From data visualization perspective, there aregenerally two methods which are iso-surface rendering

3.4. Reference model construction

Model construction refers the process that buildssome kind of perfect "average" human skull. There aretwo methods of dealing this issue. One idea is to applycephalometric along with some computer graphicstools to get the reference model. Another approach isbased on a database of human skull images. Thecollaboration with Hospital Universiti Sains Malaysia(HUSM) provides us relevantly enough data set toform reference model construction.

Due to the nature of the scan, not all skulls are inthe same orientation. Osteometric Scaling is appliedto construct a 3D Cartesian coordinate system to fitsample data. Coordinate system integration is done

910

Page 9: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

by our researchers by fitting the digitizedcraniofacial data into a standard position namedFrankford Horizontal Plan (figure 5) [7, 8].

,:,: ' ..~ :: ,

Figure 5. The coordinate system of FrankfortHorizontal Plane

3.5. Landmark placement

A test application is created using TcI/tk withfunctions of "create a landmark", "delete a landmark","save landmark set", "load craniofacial data set" andetc.

Here briefly describes how to create a newlandmark:

• A point is created under mouse point withthe coordinate (px, py, pz).

• From 2D view, set px and py with currentmouse location .

• Check whether a data cell is selected undercurrent location on 2D screen. (On surface?)

• If no, quit. Else update the pointcoordinates to 3D coordinate values in thevisual 3D environment.

• Add the point to landmark set list andprocess the pipeline to render actor (a smallsphere) on the skull surface.

Another function is called in order to delete alandmark. This is done by pointing out the point fromthe landmark set list, and removes the correspondingsmall sphere actor.

These landmarks set are then saved into a .vtkformat, as saved-landmark cloud. The next time whenuser wishes to view the skull with landmarkplacements, users can just load the landmarks based onthe saved-landmark cloud earlier.

Hereby landmark clouds placed on a referencemodel is called landmark model. Landmark model canbe placed as reference to surgeons, when a sampleskull is loaded in the application with integratedcoordinate system. Landmark model might not exactlysuit the subject's head. A manual adjustment isrequired necessarily.

911

4. The Landmarks Reference Model

Based on Feghi's paper [5], this study chooses a setof landmarks for the purpose of the reference model.These landmarks are selected and organized into atable based on the landmark clouds saved with ourapplication, with the respective x-y-z coordinates.

Shown in Figure 6 is the snapshot of the landmarkcoordinates table with three subjects from the database.

WIIIIU WIIIIU DnIILJ1 I 1 1 I I 1 I 1

tr..,.. 1~1 S31 !eJ.bZ6 l~ .3* 125. 1&1 I jL8 , 6 1&. 93' 1 127. 9S6 17S. 4: 1 u 4B~!

luioa 1:: .875 2 : 3 . ~O4 13 "; _~7e l ZlJ.! U 198.0 9 11£.693 1" . 735 :~S .1l4 1:£' 46?

Sell. 6: .0Z: S 1": .503 144. 314 6S.il7 1!s:m 1 3 ~ _71';' 6~ .'OH l'6. 'liS! 14' . 9&9

S1iluul 1: 4.44' i,9L 9 191.471 1:1. 4' 5 ZO':. BH 166. IS:; 115.951 198.ES€ r 5 936

IS_ladU' 1:0 .0:£ U: . 9Sl ULOCI 117. 67) : OG.ZZ: Hl. ~~ lZ1. 1347 199.3:11 1'?i . D 4

Joc:p.i•• 1:6 04:: 160.:a zj ( .59 1::1.364 1' 1.616 :lU91 1; 4.61: l'• . 3'H I " ~6 _ J..

GuUio. 1=6. 478 lS3. " ::' .15':' i~ 1.U Z 1" ,316 2: 4,56 1: 5. 4~ 1 165.l 0Z :: : ~ ...:luto. 1: 6.081 149. '?U m.IOl 122.B55 18: .75" 234.~Si lZ5.451 160.044 : : l, U &

l;oaioa. ':'b.'7l61 105.491 l&~ . 415 77.715':'4 1ll :19 ZO€ .486 76. '1415 '1 120.924 1E~ , 346

irtinlu n 4101 IH . 016 14~ "H7 74.473t 11~ . Sl1 160.157 71.7811 lZS.a6 m "9

r'''rUn 1l.l991 !Z9. 326 UC-SS4 66. 13~4 lZ~ . ]91 H S.""" 6' . 70S8 : 35. 25 1 ~4 ZU

OrIIit.ah -JowI, ~3 . '?0~ 1~ S . 06Z 15 ~ .945 n . O)~Z 191 :13 H L L32 ~S . 4 '~S 19~ 917 H Z. 9"'.

Orbit.t.t e" 'J .484' Z1: .303 l.i.4.834 ss.9Z45 n : .193 l OS . ';"6 H .~7U : 10.6: 1 Ui .6L

Orbital. - I.eft !l 0. 474 Z04.4U l ; ~ . 2' . 10' . 53€ In .485 11' .L84 115.Z97 ; 06. 9161 l:C . JlJ6

llrlliW,-lin' 76. 3534 190.2!'3 1:";.Oti4 7S.8977 li6 . 51: lZ~ _ 03 : , ~ 417' 1 9 ~ . ' 4';'; :~ l. : 7

btuior hid Sou. 105.85 1~S . 04 ) H f .':7':' 101.094 ao .:o~ 1 145. 79: l Cl .9CS 19".€4£1 IH .O!'l

Porttrior "-U $pi» 71. 5995 166.n ' m .sas 78.0903 17: .181 164. 5:6 al .TI7 1 7 ~ . 093 l £( ,Za

hterbl for Ocd..u n~569 149.n Z 19c.n 9 95.0293 l H . 5e4 188.088 H .S37Z 158.795 a LP

Pntvior for Oed.&1 l04.48 178 . U7 I07. iJl 3~ . 358: nO. 9IZ 19Z.853 106.3£1 18".591 H i .4S:

lui•• SJ. 90Sl 100.:6) HC.S59 n.OO~l ' 2,6613 1"1.5':', IU m ~S . 4"61 U~ .~ ~ 4

Figure 6. Snapshot of landmark coordinates table

In Figure 7 below shows a statistic analysis on thelandmarks' coordinates integrated with the patient'slandmarks. This snapshot is a portion of the fullnumber of patients.

0..P~TlENT PATIENT PATIENT PATIENT PAnENT PATIENT PITIENT PAneIT PAneIT plnaIT

1 3 5 6 8 10 11 13

Figure 7. Statistic analysis on subjects'landmarks

5. Example and Analysis

For the research trial, several sets of DICOM dataare loaded to our application.

Figure 8 shows the visualization result of thedigitized skull dataset , before the identification of

Page 10: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

landmarks is performed. The results are then shown inFigure 9 where landmarks are plotted based on acertain table model (shown in greens). Note that in thisexample , the Gaussian smooth technique was notapplied .

Figure 8. Visualization of digitized skull

Figure 9. Landmark placement on subject's skull

Now, looking at another different sample dataset,Gaussian smooth technique is applied. Figure 10shows the visualization result of the dataset before theidentification of landmarks was performed. The resultsare then shown in Figure 1I.

912

Figure 10. Result Screenshots from front and sideview (before plotting landmarks)

Figure II. Result Screenshots from front and sideview (after plotting landmarks)

From the same skull dataset, we can conclude thatthe landmarks identification can be seen clearly inFigure 7 and Figure 9. Since we wanted the results ofsmooth and rough surfaces, the differences in thesetwo results can easily be compared . Although theseboth are derived from the same patient's dataset, thedifferences of result are apparently obvious.

6. Future works

In this study, we look into how craniofacialvisualization and landmark identification is achievedby using Visualization Toolkit (VTK) and wrapperlanguage Tcl/tk. Also we manage to create program toidentify and manipulate landmarks on the hard tissue

Page 11: Conceptual Modeling in Web-based Hypermedia …eprints.usm.my/24076/1/Conceptual_Modeling_in_Web... · Conceptual Modeling in Web-based Hypermedia Engineering with Com+HDM ... registered

of the digitized craniofacial data. The result is asexpected.

In future, the landmark identification can beconducted in an automatic way. We have looked at thesurface construction techniques, such as JulesBloomenthal's polygonization of implicit surface [9] ,By studying the surface forming algorithm, we try toextract the feature lines on the iso-surface ofcraniofacial data. Then landmark can be identifiedeasily alone the feature lines.

References

[I] Michelle Meadows, "Computer-Assisted Surgery: AnUpdate", FDA Consumer Magazine, U.S. Food and DrugAdministration, Maryland, Volume 39, Number 4, July­August 2005.

[2] Lisa G. Brown, "A survey of image registrationtechniques" ACM Computing Surveys (CSUR) archiveVolume 24, Issue 4, 1992.

[3] Wan Abdul Rahman Wan Harun, Zainul Ahmad Rajion,et al "3D CT Imaging for Craniofacial Analysis Based onAnatomical Regions" Proceedings of the 2005 IEEE

913

Engineering in Medicine and Biology ] 7th AnnualConference Shanghai. China, September 1-4. 2005[4] V. Grau, M. Alcaniz, M. C. Juan, et al, "AutomaticLocalization of Cephalometric Landmarks" Journal ofBiomedical Informatics.vouune 34, Issue 3, 2001, Pages146-156.

[5] I. EI-Feghi, M. A. Sid-Ahmed and M. Ahmadi."Automatic localization of craniofacial landmarks forassisted cephalometry" Pattern Recognition, Volume 37.Issue 3, 2004, Pages 609-621.

[6] William J. Schroeder, VTK an Open-SourceVisualization Toolkit. Kitware, Inc. 2001

[7] Zainul Rajion, Deni Suwardhi, et al "Coordinate SystemsIntegration for Development of Malaysian CraniofacialDatabase" Proceedings of the 2005 IEEE Engineering inMedicine and Biology 27th Annual Conference Shanghai.China, September 1-4,2005

[8] Farkas, L.G . ed . Anthropometry of Head and Face. Znded. New . York : Raven Press. 1994

[9] J. Bloomenthal, "Polygonization of Implicit Surfaces: 'Computer Aided Geometric Design Vol. 5 1988. pp. 341­355.