02 asynchronized distance learning

Asynchronized Distance
Learning
Timothy K. Shih

Outline
• Multimedia Presentations
• Web-based Instructions
• Learning Management Systems
• Web 2.0 Technologies
– AJAX

Multimedia Presentations
• Presentation Basics
– Time-line Based: Macromedia Director MX
– Flowchart Based: Macromedia Authorware
– Event Based: Flash Professional
• Models of Presentations (to be discussed in Ch. 3)
– Petri Net
– Temporal Relations

Macromedia Director MX
2004
• Macromedia Director MX 2004 is the proven multimedia tool for
building rich content and applications for delivery via CD, DVD,
and the Internet. Director MX 2004 offers many powerful new
features, including two scripting languages, DVD-Video support,
cross-platform publishing, and Flash MX 2004 integration. VTC
author, Brian Maxx, details how users can work effectively and
efficiently within Director MX 2004. He demonstrates how users
can integrate Director MX 2004 with other image editing
applications, such as Flash MX 2004 and Fireworks MX 2004.
Project planning, brainstorming, and integration are covered in
great detail as he guides users from start to finish on a complete
project.
Source: http://www.vtc.com/products/directormx2004.htm, March 2007

Director MX 2004 - Interface
Time line with multiple channels
Multimedia Resources
Layout

Macromedia Authorware 7
• Authorware is the leading visual
authoring tool for creating rich-media e-
learning applications for delivery on
corporate networks, CD/DVD, and the
Web. Develop accessible applications
that comply with learning management
system (LMS) standards.
Source: http://www.adobe.com/products/authorware/, March 2007

• FlowChart-Based
• Common Macromedia user interface
• Microsoft PowerPoint import
• Supports several standards –
SCORM, XML, etc.
• Media support – DVD, MP3, FLASH,
etc.
Macromedia Authorware

Macromedia Authorware –
Flowchart-Based Design

Flash Professional 8
• Flash® Professional 8 is the industry's
most advanced authoring environment
for creating interactive websites, digital
experiences and mobile content.
• With Flash Professional 8, creative
professionals design and author
interactive content rich with video,
graphics, and animation for truly unique,
engaging websites, presentations or
mobile content.
Source: http://www.adobe.com/products/flash/flashpro/, 2007
Video: http://www.9iv.com/down/controls/downlist.aspx?id=1827#, 2007

Adobe Flash Professional 8
1. Get full creative control
Flash provides full design control to
maximize creativity, resulting in a
consistent end-user experience across a
variety of platforms.
2. Build once, deliver anywhere
Unleash applications to the web, Windows,
Macintosh, Unix, PDAs, and even cell
phones.
3. Create rich animation
Create compelling 2D animations with the
tool that brought animation to the Web.
4. ActionScript
A script language for advanced
programming controls.

Learning Management
Systems
• WebCT
• Blackboard
• Moodle
• Standards (will be discussed)
– SCORM
– Q&TI
– Common Cartridge

WebCT
• WebCT is an online proprietary virtual
learning environment system which is
sold to colleges and other institutions and
is used extensively in many campuses
for e-learning. Instructors can add to their
WebCT courses tools such as discussion
boards, mail systems and live chat, along
with content such as documents and web
pages. – Wikipedia
Source: http://www.webct.com/, March 2007

Background
• Originally developed at the University of British Columbia
by a faculty member in computer science Murray W.
Goldberg.
• In 1995 Goldberg began looking at the application of web-
based systems to education.
• In February 2006, WebCT was acquired by rival Blackboard
Inc.
• As part of the merger terms with Blackboard, the WebCT
name will be phased out over time in favor of the
Blackboard brand.
• WebCT is notable for being the first commercially
successful virtual learning environment

• Current Two versions of WebCT
– WebCT Vista
• Vista is a full-featured enterprise version
– WebCT Campus Edition
• targeted at institutions which already have existing services such
as file storage systems and course registration tools.

Criticisms
• WebCT has long been criticized for being the
most difficult of the course management
systems to use
• Generally considered more flexible and less
easy to use than some of its competitors.
• The "Vista" version of the product represents
an attempt to derive a more even balance
between flexibility and ease of use

• Founded in 1997
• Blackboard Inc. develops and licenses software
applications and related services to over 2200
education institutions in more than 60 countries
Blackboard
Source: http://www.blackboard.com, March 2007

• The Blackboard system includes four primary
areas of functionality:
– Content Management — an online repository for
course materials;
– Communication — asynchronous and synchronous
collaboration tools, and an email tool;
– Assessment — survey, test and quiz capabilities,
and a grade book;
– Control Panel — a toolkit for instructors, providing
overall management utilities.
Primary Functions

Blackboard + WebCT =
new Blackboard
• BlackCT? WebBoard?
• The new company will be called Blackboard
• Blackboard's CEO will lead the new company.
WebCT's CEO will become a consultant
• The combined company will continue to develop,
innovate, upgrade, improve and support both
Blackboard's and WebCT's products
– WebCT Vista and WebCT Campus Edition
– Blackboard Academic Suite and Blackboard
Commerce Suite

Moodle
• Moodle is a course management system (CMS)
- a free, Open Source software package
designed using sound pedagogical principles,
to help educators create effective online
learning communities. You can download and
use it on any computer you have handy
(including webhosts), yet it can scale from a
single-teacher site to a 50,000-student
University.
Source: http://moodle.org/, March 2007

Moodle
• Free software e-learning platform (also known
as a Course Management System (CMS), or
Learning Management Systems (LMS), or
Virtual Learning Environment (VLE)).
• Significant user base with 18,204 registered
sites with 7,270,260 users in 712,531 courses
(as of November 15, 2006)

Background
• Origins
– Moodle was the creation of Martin Dougiamas, a former
WebCT administrator at Curtin University
• Origin of the name
– The word Moodle is actually an acronym for Modular
Object-Oriented Dynamic Learning Environment,
although originally the M stood for "Martin", named after
Martin Dougiamas, the original developer.

• Designed to help educators create online
courses with opportunities for rich interaction
• Open source license and modular design
Moodle course screenshot with Firefox

Specification
• Moodle runs without modification on Unix, Linux, FreeBSD,
Windows, Mac OS X, NetWare and any other systems that
support PHP, including most webhost providers
• Data is stored in a single database: MySQL and PostgreSQL
were the only feasible options in Moodle 1.6
• The current version of Moodle, version 1.7, was released in
November 2006, and makes full use of database abstraction
so that other databases can be used just as easily (Oracle and
Microsoft SQL Server are two specific target DBMSes

Moodle statistics and
market share
• Moodle has a significant user base with 18,204 registered sites
with 7,270,260 users in 712,531 courses (as of November 15,
2006). More than 70 languages are supported.
• There are 152 registered Moodle sites that are larger than
5,000 users. The site with the most users is moodle.org with 40
courses and 123,254 users. The site with the most courses is
Online Campus with 8,282 courses and 54,955 users (as of
August 2, 2006).
• Moodle market share according to Alexa Web Traffic for LMS
Suppliers: Moodle only below Blackboard, above all other
VLE, including WebCT.

Deployment and
Development
• Moodle has been evolving since 1999 (since
2001 with the current architecture).
• Current version is Moodle 1.9.5+, June 2009.
• http://moodle.org/
• http://download.moodle.org/
• Will be discussed in lab exercise

LMS from ADL
• SCORM 2004
• Stand along program
• Web-based LMS (June 2009)
• Download free tool (and source code)
from ADL
• We will discuss this LMS when we
introduce SCORM 2004
Reference: http://www.adlnet.gov, March 2007

Web-based Instructions
• HTML
• DHTML
• XML
• Web 2.0
• A Web Document Development
Environment (Research Project)

Web 2.0
(Source: http://en.wikipedia.org/wiki/Web_2, 2007)
• What is Web 2.0
– Web 2.0, a phrase coined by O'Reilly Media in 2004, refers to a
perceived or proposed second generation of Web-based
services — such as social networking sites, wikis,
communication tools, and folksonomies — that emphasize
online collaboration and sharing among users.
• Web 2.0 is not new
Time bar of Web 2.0 buzz words.

Principles of Web 2.0
• The web as a platform
• Data as the driving force
• Network effects created by an architecture of participation
• Innovation in assembly of systems and sites composed by
pulling together features from distributed, independent
developers (a kind of "open source" development)
• Lightweight business models enabled by content and
service syndication
• The end of the software adoption cycle ("the perpetual
beta")
• Software above the level of a single device, leveraging the
power of The Long Tail
• Easy to pick up by early adopters
Tim O'Reilly and John Battelle, 2004

Hierarchy of Web 2.0
• Level 3 applications, the most "Web 2.0", which could only exist on the
Internet, deriving their power from the human connections and network
effects Web 2.0 makes possible, and growing in effectiveness the more
people use them. O'Reilly gives as examples: eBay, craigslist, Wikipedia,
del.icio.us, Skype, dodgeball, and Adsense.
• Level 2 applications, which can operate offline but which gain advantages
from going online. O'Reilly cited Flickr, which benefits from its shared
photo-database and from its community-generated tag database.
• Level 1 applications, also available offline but which gain features online.
O'Reilly pointed to Writely (since 10 October 2006: Google Docs &
Spreadsheets, offering group-editing capability online) and iTunes
(because of its music-store portion).
• Level 0 applications would work as well offline. O'Reilly gave the
examples of MapQuest, Yahoo! Local, and Google Maps. Mapping
applications using contributions from users to advantage can rank as
level 2.
• non-web applications like email, instant-messaging clients and the
telephone.
Tim O'Reilly (2006-07-17). Levels of the Game: The Hierarchy of Web 2.0 Applications.

e-Learning 2.0
(Timothy K. Shih, et al., JDET_DistanceLearnign 2x.doc)
• Perspectives
– People Centric Learning
• LMS can be designed as Plug-in
• Student Service Center
• Student Associations
– Curriculum and Concept Tags for Rediscovery
• Curriculum
• Concept Map for Study Plan
• Search for Interesting Subjects
– Self-regulation and Self-assessment
• AJAX-based assessment system
• Instance Feedback
– Collaborative Authoring and Discussion Group
• Blog for Discussion
• Wiki for Report Writing

Technology Overview
• Rich Internet application techniques, Ajax-based
• CSS
• Semantically valid XHTML markup and the use of
Microformats
• Syndication and aggregation of data in RSS/Atom
• Clean and meaningful URLs
• Extensive use of folksonomies (in the form of tags or
tagclouds, for example)
• Use of wiki software either completely or partially (where
partial use may grow to become the complete platform
for the site)
• Weblog publishing
• Mashups
• REST or XML Webservice APIs

Criticism
• Many of the ideas of Web 2.0 already featured on networked
systems well before the term "Web 2.0" emerged.
• Conversely, when a web-site proclaims itself "Web 2.0" for the use
of some trivial feature (such as blogs or gradient boxes) observers
may generally consider it more an attempt at self-promotion than
an actual endorsement of the ideas behind Web 2.0.
• The argument also exists that "Web 2.0" does not represent a new
version of World Wide Web at all, but merely continues to use
"Web 1.0" technologies and concepts.
• Other criticism has included the term "a second bubble", (referring
to the Dot-com bubble of circa 1995–2001), suggesting that too
many Web 2.0 companies attempt to develop the same product
with a lack of business models.

Interesting Technologies
• Asynchronous JavaScript and XML
(AJAX)
• Really Simple Syndication (RSS)
• Cascading Style Sheets (CSS)
• Folksonomy (in the form of tags or
tagclouds)

AJAX
1. What is Rich User Experience?
2. Rich Internet Application (RIA) Technologies
3. AJAX: Real-life examples & Usage cases
4. What is and Why AJAX?
5. Technologies used in AJAX
6. Anatomy of AJAX operation
7. XMLHttpRequest Methods & Properties
8. AJAX Security
9. JavaScript debugging tools
10.Current issues and Future
A part of these slides are summarized from "Web
2.0 and Java: Building Rich Internet Applications
with AJAX, Sun Microsystems, inc."

Rich User Experience
• Take a look at a typical desktop application
(Spreadsheet app, etc.)
• The program responses intuitively and quickly
• The program gives a user meaningful feedback‗s
instantly
– A cell in a spreadsheet changes color when you hover your
mouse over it
– Icons light up as mouse hovers them
• Things happen naturally
– No need to click a button or a link to trigger an event

Characteristics of Conventional
Web Applications
• ―Click, wait, and refresh‖ user interaction
– Page refreshes from the server needed for all
events, data submissions, and navigation
• Synchronous ―request/response‖
communication model
– The user has to wait for the response
• Page-driven: Workflow is based on pages
– Page-navigation logic is determined by the server

Issues of Conventional Web
Application
• Interruption of user operation
– Users cannot perform any operation while waiting for a response
• Loss of operational context during refresh
– Loss of information on the screen
– Loss of scrolled position
• No instant feedback's to user activities
– A user has to wait for the next page
• Constrained by HTML
– Lack of useful widgets
• And these are the reasons why Rich Internet Application
(RIA) technologies were born!

Common Rich Internet Application
(RIA) Technologies
• Java Applet
• Macromedia Flash
• Java WebStart
• DHTML
• DHTML with Hidden iframe
• AJAX

Java Applet
Advantage
• Can use full Java APIs
• Custom data streaming,
graphic manipulation,
threading, and advanced
GUIs
• Well-established scheme
Disadvantage
• Code downloading time could
be significant
Use it if you are creating
advanced UIs on the
client and downloading
time is not a major
concern

Macromedia Flash
Advantage
• Good for displaying
vector graphics
Disadvantage
• Browser needs a Flash
plug-in
• ActionScript is proprietary
• Designed for playing interactive movies
• Programmed with ActionScript
• Implementation examples
• Macromedia Flex
• Laszlo suite (open source)

Java WebStart
Advantage
• Desktop experience once
loaded
• Leverages Java technology to
its fullest extent
• Disconnected operation is
possible
• Application can be digitally
signed
• Incremental redeployment
Disadvantage
• Old JRE-based system do not
work
• First-time download time could
be still significant
Desktop application
delivered over the net
Leverages the strengths of
desktop apps and applet

DHTML
• DHTML = JavaScript + DOM + CSS
– DOM = Document Object Model
– CSS = Cascading Style Sheets
• Used for creating interactive applications
• No asynchronous communication,
however
– Full page refresh still required
– Reason why it has only a limited success

DHTML with Hidden IFrame
• IFrame was introduced as a programmable layout to a
web page
– An IFrame is represented as an element of a DOM tree
– You can move it, resize it, even hide it while the page is visible
• An invisible IFrame can add asynchronous behavior
– The visible user experience is uninterrupted – operational
context is not lost
• It is still a hack

AJAX Pro and Con
Advantage
• Most viable RIA technology so
far
• Tremendous industry
momentum
• Several toolkits and
frameworks are emerging
• No need to download code &
no plug-in required
Disadvantage
• Still browser incompatibility
• JavaScript is hard to maintain
and debug
AJAX = DHTML + Asynchronous communication
capability through XMLHttpRequest

Real-Life Examples of AJAX
Apps
• Google maps
– http://maps.google.com
• Gmail
– http://gmail.com
• Yahoo Maps
– http://maps.yahoo.com
• My Yahoo
– http://my.yahoo.com
• Many more are popping everywhere

Key Aspects of Google
Maps
• A user can drag the entire map by using the mouse
– Instead of clicking on a button or something
• The action that triggers the download of new map data
is not a specific click on a link but a moving the map
around
• Behind the scene - AJAX is used
– The map data is requested and downloaded asynchronously in
the background
• Other parts of the page remains the same
• No loss of operational context

Usage cases for AJAX
• Real-time server-side input form data validation
– User IDs, serial numbers, postal codes
– Removes the need to have validation logic at both client side
for user responsiveness and at server side for security and
other reasons
• Auto-completion
– Email address, name, or city name may be auto-completed as
the user types
• Master detail operation
– Based on a user selection, more detailed information can be
fetched and displayed

Usage cases for AJAX
• Advanced GUI widgets and controls
– Controls such as tree controls, menus, and progress bars may
be provided that do not require page refreshes
• Refreshing data
– HTML pages may poll data from a server for up-to-date data
such as scores, stock quotes, weather, or application-specific
data
• Simulating server side notification
– An HTML page may simulate a server-side notification by
polling the server in the background

Why AJAX?
• Intuitive and natural user interaction
– No clicking required
– Mouse movement is a sufficient event trigger
• "Partial screen update" replaces the "click, wait,
and refresh" user interaction model
– Only user interface elements that contain new information are
updated (fast response)
– The rest of the user interface remains displayed without
interruption (no loss of operational context)
• Data-driven (as opposed to page-driven)
– UI is handled in the client while the server provides data

Why AJAX?
• Asynchronous communication replaces
"synchronous request/response model.―
– A user can continue to use the application
while the client program requests
information from the server in the
background
– Separation of displaying from data fetching

Web application interaction
models

Technologies Used In AJAX
• JavaScript
– Loosely typed scripting language
– JavaScript function is called when an event in a page occurs
– Glue for the whole AJAX operation
• DOM
– API for accessing and manipulating structured documents
– Represents the structure of XML and HTML documents
• CSS
– Allows for a clear separation of the presentation style from the content
and may be changed programmatically by JavaScript
• XMLHttpRequest
– JavaScript object that performs asynchronous interaction with the
server

XMLHttpRequest
• JavaScript object
• Adopted by modern browsers
– Mozilla, Firefox, Safari, and Opera
• Communicates with a server via standard
HTTP GET/POST
• XMLHttpRequest object works in the
background for performing asynchronous
communication with the backend server
– Does not interrupt user operation

Server-Side AJAX Request
Processing
• Server programming model remains the same
– It receives standard HTTP GETs/POSTs
– Can use Web Service, Java Servlet, ...
• With minor constraints
– More frequent and finer-grained requests from client
– Response content type can be
• text/xml
• text/plain
• text/json (text/javascript)

Anatomy of an AJAX Interaction
(Auto-completion Example)

Steps of AJAX Operation
1. A client event occurs
2. An XMLHttpRequest object is created
3. The XMLHttpRequest object is configured
4. The XMLHttpRequest object makes an asynchronous
request and retrieve the back-end DB
5. The EmployeeServlet returns an XML document
containing the result
6. The XMLHttpRequest object calls the callBack()
function and processes the result
7. The HTML DOM is updated

XMLHttpRequest Methods
• open(―HTTP method‖, ―URL‖, syn/asyn)
– Assigns HTTP method, destination URL, mode
• send(content)
– Sends request including string or DOM object data
• abort()
– Terminates current request
• getAllResponseHeaders()
– Returns headers (labels + values) as a string
• getResponseHeader(―header‖)
– Returns value of a given header
• setRequestHeader(―label‖,‖value‖)
– Sets Request Headers before sending

XMLHttpRequest Properties
• onreadystatechange
– Set with an JavaScript event handler that fires at each state
change
• readyState – current status of request
– 0 = uninitialized
– 1 = loading
– 2 = loaded
– 3 = interactive (some data has been returned)
– 4 = complete
• status
– HTTP Status returned from server: 200 = OK

XMLHttpRequest Properties
• responseText
– String version of data returned from the
server
• responseXML
– XML document of data returned from the
server
• statusText
– Status text returned from server

AJAX Security: Server Side
• AJAX-based Web applications use the same server
side security schemes of regular Web applications
– You specify authentication, authorization, and data protection
requirements in your web.xml file (declarative in Tomcat or
J2EE Web Application Server) or in your program
(programmatic)
• AJAX-based Web applications are subject to the same
security threats as regular Web applications
– Cross-site scripting
– Injection flaw

AJAX Security: Client Side
• JavaScript code is visible to a user/hacker
– Hacker can use the JavaScript code for inferring
server side weaknesses
– Obfustication or compression can be used
• JavaScript code is downloaded from the server
and executed (―eval‖) at the client
– Can compromise the client by mal-intended code
• Downloaded JavaScript code is constrained by
sand-box security model
– Can be relaxed for signed JavaScript

Development Tool on
Microsoft Internet Explorer
• HttpWatch (Basic Edition)
– HTTP monitor
– It‘s free!

Development Tools on Mozilla/Firefox
Browser
• Mozilla FireBug debugger (add-on)
– This is the most comprehensive and most useful JavaScript
debugger
– This tool does things all other tools do and more
• Mozilla JavaScript console
• Mozilla DOM inspector (comes with Firefox package)
• Mozilla Venkman JavaScript debugger (add-on)
• Mozilla LiveHTTPHeaders HTTP monitor
ALL FREE!!

Mozilla FireBug Debugger
• Spy on XMLHttpRequest traffic
• JavaScript debugger for stepping through code one line at a time
• Inspect HTML source, computed style, events, layout and the
DOM
• Status bar icon shows you when there is an error in a web page
• A console that shows errors from JavaScript and CSS
• Log messages from JavaScript in your web page to the console
– bye bye "alert debugging‖
• An JavaScript command line
– no more "javascript:" in the URL bar

Current Issues of AJAX
• Complexity is increased
– Server side developers will need to understand that
presentation logic will be required in the HTML client pages as
well as in the server-side logic
– Page developers must have JavaScript technology skills
• AJAX-based applications can be difficult to debug, test,
and maintain
– JavaScript is hard to test - automatic testing is hard
– Weak modularity in JavaScript
– Lack of design patterns or best practice guidelines yet

Current Issues of AJAX
• No standardization of the XMLHttpRequest yet
– Future version of IE will address this
• No support of XMLHttpRequest in old browsers or
mobile device
• JavaScript technology dependency & incompatibility
– Must be enabled for applications to function
– Still some browser incompatibilities
• JavaScript code is visible to a hacker
– Poorly designed JavaScript code can invite security problem

Browsers Which Support
XMLHttpRequest
• Mozilla Firefox 1.0 and above
• Netscape version 7.1 and above
• Apple Safari 1.2 and above (Mac OS)
• Microsoft Internet Explorer 5 and above
• Konqueror (Linux)
• Opera 7.6 and above

AJAX Futures
• Standardization of XMLHttpRequest
• Better browser support
• Better and Standardized Framework
support
– Dojo, Yahoo UI, Prototype, …and more
• More best practice guidelines in the
programming model

Really Simple Syndication
• Also known as ―web syndication‖
• RSS is a family of web feed formats used to
publish frequently updated digital content, such
as blogs, news feeds or podcasts.
• Users of RSS content use programs called
feed "readers" or "aggregators:" the user
subscribes to a feed by supplying to his or her
reader a link to the feed; the reader can then
check the user's subscribed feeds to see if any
of those feeds have new content since the last
time it checked, and if so, retrieve that content
and present it to the user.
Source: http://en.wikipedia.org, 2007

Background
• News Channel
– Netscape‘s ―Push Technology‖
– Microsoft IE‘s ―CDF (Channel Definition
Format)‖
– But, news channel can be improved
• Really Simple Syndication
– A personal aggregators (feed reader) can
check if the subscribed URL has an update.

What is RSS
• RSS is a format for syndicating news and the
content of news-like sites, but not just for news.
• Pretty much anything that can be broken down
into discrete items can be syndicated via RSS.
• Once information about each item is in RSS
format, an RSS-aware program (news
aggregator) can check the feed for changes
and react to the changes in an appropriate way.

Versions of RSS
Version Owner Pros Status Recommendation
0.90 Netscape Obsoleted by 1.0 Don't use
0.91 UserLand Drop dead simple Officially obsoleted by
2.0, but still quite
popular
Use for basic syndication.
Easy migration path to
2.0 if you need more
flexibility
0.92,
0.93,
0.94
UserLand Allows richer metadata
than 0.91
Obsoleted by 2.0 Use 2.0 instead
1.0 RSS-DEV
Working
Group
RDF-based,
extensibility via
modules, not controlled
by a single vendor
Stable core, active
module development
Use for RDF-based
applications or if you
need advanced RDF-
specific modules
2.0 UserLand Extensibility via
modules, easy
migration path from
0.9x branch
Stable core, active
module development
Use for general-purpose,
metadata-rich syndication

RSS References
• RSS 2.0
– http://www.wretch.cc/blog/cwwany
– http://www.wretch.cc/blog/cwwany&rss20=1
• RSS 1.0
– http://blog.sina.com.tw/weblog.php?blog_id=
13614
– http://blog.sina.com.tw/usr/46/13614/index.r
df

Summary
• Web 2.0 will be a trend
• LMS must follow standard
• Reading Assignments
– http://en.wikipedia.org/wiki/Web_2
– JDET_DistanceLearnign 2x.pdf

• Web Document Development Paradigm
• Web Document vs. Software Configuration
Management
• Web Document vs.Software Metrics and
Testing
• A Web Document Database
• Web Document Sharing and Object Reuse
• The Supporting Environment
Timothy K. Shih and Chuan-Feng Chiu
A Web Document
Development Environment

The Web Document
Development Paradigm
• Software Development Paradigms
– The Waterfall Model
– The Prototype Approach
– The Spiral Model
– Object-Oriented Approach
• Properties of Web Document are Different from
Software Program
– Information Delivery versus Problem Solving
– Human Factors are Very Important
– Evolving Documents versus Stable Programs

The Refined Spiral Model
• Script: a simple
outline of Web
document
• Implementation:
HTML files, pictures,
animation, sound,
video, plug-in
programs, etc.
• Testing and
Maintenance:
automatic testing and
periodical checking
Web Document Assessment
Consistency
Completeness and
soundness of
Implementation
Completeness and
Metrics of
Implementation
Completeness and
Quality
of Script
Script
ImplementationTesting and
Maintenance
Repository
Requirement
Delivery
Intra-directory Hyperlinks
Intra-station Hyperlinks
Inter-station Hyperlinks

SCIs of a Web Document
• Why Software Configuration Items (SCIs)
– Keep Track of Changes (Versions)
– Collaborative Development
• Web Document SCIs
– Script: Specification, Development Status,
References
– Implementation: HTML files, Multimedia
Resources, Control Programs, Database Supports,
etc.
– Testing and Maintenance: Testing Records, Bug
Reports, Update History

Web Document Metrics
• Basic Metric Elements
– Hyperlinks: Intra-Station versus Inter-Station
– Multimedia Data Objects: Continuous versus Discrete
– Plug-in Control Programs: Software Metrics of Programs
• Web Document Metrics
– Traversal Metrics: Hyperlinks + Navigation Sequences
– Data Metrics: HTML Files + Data Files + Program Files
– Computation Metrics: Complexities of Programs
– Transmission Metrics: Remote Ref. w.r.t. a Web Server

Web Document Structure
• A Multi-Digraph
Contains
– Entry Nodes
– End Nodes
– Navigation
Trails
– Navigation
Circuits
• Each Node is a
Compound
Object
• Each Edge is a
Hyperlink
f
b
k
j
g
a
d
h
c
e
i
Navigation Circuits Acyclic Full Navigation Trails Acyclic Full Navigation Trails
a-b-e-a a-b-e-i-k (three instances) d-h
a-c-f-e-a a-c-f-e-i-k (three instances) d-a-b-e-i-k (three instances)
a-d-a a-b-f-j d-a-c-f-e-i-k (three instances)
a-b-f-d-a a-c-f-j d-a-b-f-j
a-c-f-d-a a-c-g (two instances) d-a-c-f-j
a-d-h d-a-c-g (two instances)
a-b-f-d-h
a-c-f-d-h

Web Document Testing and
Erroneous Objects
• Testing Scope
– Local Testing Scope
– Fixed Depth of Navigation Trails
– Fixed Range of Domain Names
– Testing Scope Profile
• Search for Erroneous Objects
– Bad URLs
– Erroneous Plug-in Programs
– Redundant Data Objects

Web Document Testing
Criteria
• Level 0 Testing Criteria
– All URLs should be tested
– All primitive objects should be
tested
• Level 1 Testing Criteria
– All navigation trails should be tested
– All navigation circuits should be
tested
– All compounded objects should be
tested

A Web Document Database
• Layered Object-Oriented Multimedia
Database
• Object Reuse
• Object Sharing
• Referential Integrity
• Collaborative Web Document Design
• Toward a Web-Savvy Virtual Library

Attributes of Objects in
Different Layers
• Database Layer
• Document Layer
• BLOB Layer
Version
Date/Time
Script Names
Database Name
Keywords
Author
Script Table
Implementation Table
Test Record Table
Bug Report Table
Annotation Table
HTML Files
Program Files
Annotation Files
Multimedia Data Files

An Architecture for Web Doc Development
SQL Server
Relational Database
DB records
Web Document Repository
Assessment
DB records
Commercial Home
Page Design Tools
SCM Control
and Inference System
Implementation
SCIs
Implementation
SCIs
Web Document Testing
Tools
Web Document
Metrics Tool
Testing and
Maintenance
SCIs
Testing SCIs
Web Document Script
Editor
Multimedia
Resource
Pool
Media
Data
Script
Script SCIs
BLOBs
References

The Testing and Maintenance
Tools

Notes
• Web Document Development from a Software
Engineering Perspective
• Web Document Development Paradigm
• Web Document Metrics and Testing
• Web Documentation Database
• Supporting Tools for Virtual University
Operations

• Front End of
Virtual World
User Interface
• Mobile Agent
Technique
• Universal Access
• Persistent Look
and Feel
• Integrated with
an E-Notebook
• Automatic
restore of
personal data
Timothy K. Shih and Jung-Hung Wang, MINE Lab, Tamkang University, Taiwan
A Persistent Look and Feel Agent

• Student Agent
• Instructor Agent
• Administrator Agent
Student Instructor Administrator
Mobile Agents of Different Roles

• Cut and Paste of Web Objects
• The notebook is saved as a HTML file
• Mobile Storage with a Replication Manager
• Integrated with communication tools
• Collaborative Notebook (Public Notebook) as a future work
An E-Notebook Tool
Demo

02 asynchronized distance learning

More Related Content

What's hot (20)

Similar to 02 asynchronized distance learning (20)

More from 宥均林 (19)

Recently uploaded (20)