Software Reuse and Multimedia Learning Systems

1
(No Transcript)
2
CMSCB3005Contemporary Issues in IT
Week 2
Navigational Design Technique
Module leader Dr. EngHuat Ng S/Lecturer in
Information Systems Room 602 Tel 231
2273 Email e.ng_at_livjm.ac.uk
3
Last Week

• Introduction to CB3005
• Why Hypertext?
• Hypertext, Multimedia, Hypermedia
• Applications of Hypermedia
• Some important terms in Hypertext.
• The comparison of hypermedia systems with paper
• The comparison of hypermedia systems with
  traditional computer systems
• Hypermedia Usability

4
Last Week homework

• Can you draw a brief navigational structure for
  our university website?
• What is your approach?
• Was it the best way to depict this navigational
  structure?

5
This week

• Introduction
• Why? ---Traditional Navigational Design
  Techniques Their Problems
• What? --- The Navigational Graph
• Where? --- The Application Area
• Who? --- The Developers
• How? --- The technique and its notation
• Case Study
• Conclusion

6
Introduction

• Human thought is non-linear.
• with one item in its grasp, it switches instantly
  to the next that is suggested by the association
  of thoughts

• Speech is linear.
• produced chronologically.
• Early writing is linear.
• developed a way to record human speech as a
  permanent transcript.
• Using a linear way to convey non-linear structure
  is inadequate.

?
7
Solution?

• to make writing visually consistent with human
  thoughts, complex writing, Hypertext, has been
  developed.
• The extension of the concept of hypertext to
  other media is called hypermedia.
• graphics, audio, video, etc.,
• Hypermedia systems (HS) offer us the ability to
  organise and perceive information in a natural
  and non-linear interactive fashion.

8
Traditional Navigational Design (1)
Augmentation System

• developed in 1960s.
• emphasised the hierarchical structuring of text
  intensively and explicitly.

3. The User System. 3a Basic Facility.
3a1 As seen by the user, the basic facility has
the following characteristics.
9
Traditional Navigational Design (1)
For

• good for highly hierarchical structuring of
  hypertext.
• hypermedia systems are not linear. Therefore it
  is not applicable to document and/or design all
  hypermedia-system navigational structure.
• difficult to reuse
• difficult to maintain
• not graphical

Against
10
Traditional Navigational Design (2)
Prev
Emacs-INFO - developed in early 80s
Next
Up
11
Traditional Navigational Design (2)
For

• good for highly hierarchical structuring of
  hypertext.
• able to identify guided tours but not the whole
  tour.
• graphical and intuitive easy to understand.
• difficult to document a complex hypermedia
  system.
• difficult to reuse
• difficult to maintain
• difficult to expand
• difficult to document

Against
12
Traditional Navigational Design (3)
Linearisation

• mainly in late 80s or early 90s
• to convert hypertext to text.
• Two ways
• Breadth-first traversal starts at a node and
  visits all the nodes directly connected to it
  before proceeding in a similar fashion from one
  of the recently visited nodes.
• A depth-first traversal starts at a node, visits
  one of the nodes directly concerted to it. and
  then repeats this process from the last visited
  node.

13
Traditional Navigational Design (3)
Linearisation
frame name hypertext system link
begin target preview order 1 deadend
yes paragraphs P1 link
past target hypertext history order
2 deadend no paragraphs P2
14
Traditional Navigational Design (3)
For

• good for highly hierarchical structuring of
  hypertext.
• Easy to reuse.
• provide deadend info.
• Easy to maintain.
• can not see the overall navigation structure.
• unable to identify guided tours.
• not graphical.
• difficult to expand.

Against
15
Traditional Navigational Design (4)
Home Page
Total pages 11
Help
A
Index
X
Common pages
B
H
?
Guided Tour or path-set nodes
C
G
Go to
D
F
E
Bi-direction
16
Traditional Navigational Design(4)
Home Page
Total pages 11
Help
A
Index
X
Common pages
B
H
X
Guided Tour
C
G
Go to
D
F
E
Bi-direction
17
Traditional Navigational Design (4)
For

• graphical and intuitive easy to understand.
• minimum training
• may be able to identify guided tours if colours
  used.
• when the number of pages (or nodes) of a HS
  grows, the links among these pages increase
  factorially.
• difficult to reuse
• difficult to document
• difficult to expand

Against
18
The overall problems

• Traditional Navigational Design Techniques
• do not provide a good way of handling the
  complexity of the navigational path of Hypermedia
  Systems.
• when the number of pages (or nodes) of a HS
  grows, the links among these pages increase
  factorially.
• difficult to read, maintain, expand and reuse.
• difficult to identify guided tours

19
other problem

• Gap between traditional software development
  methodologies hypermedia sys development.
• The established software development
  methodologies, esp. OO, do not provide sufficient
  details of how the concept of navigational design
  can be planned and applied in the development of
  hypermedia systems in a more structural and
  specific manner.

20
The Navigational Graph

• a Graph-Based Design Model which
• derived from the Traditional Hierarchical
  Organisation Chart Model
• extended with a new set of symbols.

21
Application Domain

• This technique can be applied to the development
  of most hypermedia systems, e.g.
• - The World Wide Web, which range from
• - one-page personal homepages to
• - complex web sites e.g.
• - The university web sites
• - The company web-sites (E-commerce)
• - CBL packages
• - Distance Learning Packages, etc.

22
Who may benefit from this technique?

• People whoever involve the development of
  hypermedia systems may benefit from it. For
  example
• system analysts,
• system designers,
• system testers,
• system maintainers(the Webmasters),
• and system re-engineers, etc.

23
The Technique --- NG
Steps Involved in Building Navigational Graphs

• Identify The Nodes
• Identify All Guided Tour
• Identify potential reusable components ---
  smaller NGs
• Identify The Level Of Nodes
• Identify Each Node With An Unique id Number
• Identify The Links

24
The Technique --- NG
1. Identify The Nodes

• focuses on each object found in the Object
  Diagram.
• each object and associative relationship
  appearing in the Object Diagram are analysed for
  the potential of reuse.
• all Pages or nodes object types/classes and
  their instances, are the potential nodes in this
  step
• homepage,
• search page,
• index page,
• help page,
• Chapter pages, Section pages, etc.,.

25
The Technique --- NG
2. Identify All potential Guided Tour

• All potential guided tours and their nodes are
  identified.
• carried out at this stage for ease of design and
  management at later stage as well as maximising
  the possibility of reuse.
• Some common guided tour instances are
• orientation, learning systems guided tour (incl.
  from 1st chapter to last chapter, tutorial, quiz,
  assessment, etc.)
• the news-announcement guided tour.

26
The Technique --- NG
3. Identify potential reusable components ---
smaller NGs

• Some nodes could be grouped together to form
  smaller NGs.
• useful for developers to simplify their diagrams
  by decomposing a complex NG into smaller NGs.
• thus improving the reusability, maintainability,
  readability and decomposability of the diagrams.

27
The Technique --- NG
4. Identify The Level of Nodes

• Various nodes can be belonging to different NGs
  and every NG has it own levels.
• One node could be in level 8 in the whole
  navigational design diagram but in level 1 in
  another NG.
• it is essential that this step is carried out
  after conducting all previous steps.
• All nodes are classified into different levels,
  e.g.
• 0 for the root, A for the first level, B for the
  second level, C for the third level, and so on.

28
The Technique --- NG
5. Identify Each Node With An Unique id Number

• Each node found in the previous sections is given
  a unique number.
• For example,
• The fifth node in level 2 in a NG called
  Student is identified as NGStudent.B2. See
  Table for details.
• The NGStudent can be omitted if it is clear
  that
• the node is unique in the entire diagram or
• the referred node is in the same diagram.

29
The Technique --- NG
6. Identify The Links

• Links are derived from both the object schema and
  the event schema.
• Each link is considered separately to be
  context-independent in order to maximise the
  potential of reuse.
• Some nodes id can be transformed into a shorter
  form if the linking node and linked both are on
  the same NG.
• e.g., the homepage for the current node can be
  presented as H0. Some common links and their
  symbols are homepage (H), Index (I), Goto
  (gt), Back to (lt), etc.

30
Main Keys NGHelp another Navigational Graph
called Help. GNews1 Guided Tour called
News Page 1 H Home page I Index page
gt go to or link to lt back to V for
details, see...
NGJMU
Total pages 25
0
John Moores University
gt A1-A9.

A1
A2
A4
A5
A6
A7
A8
A9
Member of Staff
Current Student
Business
Casual Browser
Index
Search
Message of The Day
Help
H0. IA6. gtA7,A9, B8_1 - B8_5.
H0. IA6. gtA7-A9 B1-B9.
VNG Business
VNGCBrw
VNG Index
VNGFind
VNGHelp
H0. IA6. gtA7-A9, B1-B5, B10.
B10
Staff HandBook
B8_1 !lt
B8_2 -gt2
B8_3 -gt3
B8_4 -gt4
B8_5 gt!
GNews 1
GNews 2
GNews 3
GNews 4
GNews 5
v NG StaffHB
H0 IA6 ltA8 gtA7,A9, B8_3.
H0 IA6 ltA8 gtA7,A9, B8_4.
H0 IA6 ltA8 gtA7,A9, B8_5.
H0 IA6 ltA8 gtA7,A9, B8_1.
H0. IA6. ltA8. gtA7,A9, B8_2.
Staff Tel Email
Info Resources
Library Computing
Research
Student Module Info
Career Advisory Services
Student Union
B1
B2
B3
B4
B5
B6
B7
B8
B9
Elective Selection Form
Liverpool Student Home
VNG LibComp
VNG InfR
VNG Research
VNG StModInf
VNG STel
VNG Career
VNG StuUnion
VNG ElecForm
VNG StuHome
31
NGIS
Main Keys NGISB another Navigational Graph
called ISB. GIS1 Guided Tour called IS
Page 1 H Home page I Index page gt
go to or link to lt back to V for
details, see...
0
Virtual Lecture
gt A1, A2.

A2
A1
Information Systems
Information Systems in Business
H0. VNGISB.
H0. gtB1-B15
B11
B12
B13
B14
B15
Unit Guide
Bulletin Board
Past Year Exam Papers
Comment
Module Leader
HA1. gtB11-B15. VNG Uguide.
HA1. gtB11-B15. VNG Bboard.
HA1. gtB11-B15. VNGExam.
HA1. gtB11-B15. VNG Mlead.
(email window)
B10 gt!
B9 -gt9
B2 -gt2
B1 !lt
B5 -gt5
B4 -gt4
B3 -gt3
B7 -gt7
B6 -gt6
B8 -gt8
Chapter 10 for IS
Chapter 9 for IS
Chapter 2 for IS
Chapter 1 for IS
Chapter 5 for IS
Chapter 4 for IS
Chapter 3 for IS
Chapter 7 for IS
Chapter 6 for IS
Chapter 8 for IS
HA1. gtB3. VNG ISc2
HA1. gtB2. VNG ISc1.
HA1. gtB8. VNG ISc7.
HA1. gtA1. VNG ISc10.
HA1. gtB10. VNG IS9.
HA1. gtB6. VNG ISc5.
HA1. gtB5. VNG ISc4.
HA1. gtB4. VNG ISc3.
HA1. gtB7. VNG ISc6.
HA1. gtB9. VNG ISc8.
32
NGISB
Main Keys NGIS another Navigational Graph
called IS. GIS1 Guided Tour called IS
Page 1 H Home page I Index page gt go
to or link to lt back to V for details,
see...
0
Virtual Lecture
gt A1, A2.

A2
Information Systems in Business
H0. gtB1-B15
B11
B12
B13
B14
B15
Unit Guide
Bulletin Board
Past Year Exam Papers
Comment
Module Leader
HA1. gtB11-B15. VNG Uguide.
HA1. gtB11-B15. VNG Bboard.
HA1. gtB11-B15. VNGExam.
HA1. gtB11-B15. VNG Mlead.
(email window)
B10 gt!
B9 -gt9
B2 -gt2
B1 !lt
B5 -gt5
B4 -gt4
B3 -gt3
B7 -gt7
B6 -gt6
B8 -gt8
Chapter 10 for IS
Chapter 9 for IS
Chapter 2 for ISB
Chapter 1 for IS
Chapter 5 for IS
Chapter 4 for IS
Chapter 2 for IS
Chapter 7 for IS
Chapter 6 for IS
Chapter 8 for IS
HA1. gtA1. VNG ISBc10.
HA1. gtB10. VNG ISc9.
HA1. gtB3. VNG ISBc2
HA1. gtB2. VNG ISc1.
HA1. gtB6. VNG ISc5.
HA1. gtB5. VNG ISc4.
HA1. gtB4. VNG ISc2.
HA1. gtB8. VNG ISc7.
HA1. gtB7. VNG ISc6.
HA1. gtB9. VNG ISc8.
33
Why NG?

• easier to read, maintain, document, expand
  decompose
• able to handle complex navigational structure.
• all text are ASCII and can be found on keyboards.
• graphical.
• supports guided tours, index, help, etc.
• provides step by step guidelines.
• can be incorporated into other methodologies.
• supports OO and reuse.

34
Why and Why not NG?

• training may be needed
• automation tools may be needed to ease the
  drawing.

35
Conclusion

• The NG technique provides systems developers to
  visualise manipulate and design the navigational
  structures of hypermedia systems.
• This technique improves the reusability,
  maintainability, decomposability, readability and
  expandability of the development of hypermedia
  systems in terms of navigational design.
• Despite the benefits, users still needs training
  to master NG.

36
The End