Your SlideShare is downloading. ×
0
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 Aut...
Macromedia Director MX
2004
• Macromedia Director MX 2004 is the proven multimedia tool for
building rich content and appl...
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...
• FlowChart-Based
• Common Macromedia user interface
• Microsoft PowerPoint import
• Supports several standards –
SCORM, X...
Macromedia Authorware –
Flowchart-Based Design
Flash Professional 8
• Flash® Professional 8 is the industry's
most advanced authoring environment
for creating interactiv...
Adobe Flash Professional 8
1. Get full creative control
Flash provides full design control to
maximize creativity, resulti...
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 institution...
Background
• Originally developed at the University of British Columbia
by a faculty member in computer science Murray W.
...
• Current Two versions of WebCT
– WebCT Vista
• Vista is a full-featured enterprise version
– WebCT Campus Edition
• targe...
Criticisms
• WebCT has long been criticized for being the
most difficult of the course management
systems to use
• General...
• Founded in 1997
• Blackboard Inc. develops and licenses software
applications and related services to over 2200
educatio...
• The Blackboard system includes four primary
areas of functionality:
– Content Management — an online repository for
cour...
Blackboard + WebCT =
new Blackboard
• BlackCT? WebBoard?
• The new company will be called Blackboard
• Blackboard's CEO wi...
Moodle
• Moodle is a course management system (CMS)
- a free, Open Source software package
designed using sound pedagogica...
Moodle
• Free software e-learning platform (also known
as a Course Management System (CMS), or
Learning Management Systems...
Background
• Origins
– Moodle was the creation of Martin Dougiamas, a former
WebCT administrator at Curtin University
• Or...
• Designed to help educators create online
courses with opportunities for rich interaction
• Open source license and modul...
Specification
• Moodle runs without modification on Unix, Linux, FreeBSD,
Windows, Mac OS X, NetWare and any other systems...
Moodle statistics and
market share
• Moodle has a significant user base with 18,204 registered sites
with 7,270,260 users ...
Deployment and
Development
• Moodle has been evolving since 1999 (since
2001 with the current architecture).
• Current ver...
LMS from ADL
• SCORM 2004
• Stand along program
• Web-based LMS (June 2009)
• Download free tool (and source code)
from AD...
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 ...
Principles of Web 2.0
• The web as a platform
• Data as the driving force
• Network effects created by an architecture of ...
Hierarchy of Web 2.0
• Level 3 applications, the most "Web 2.0", which could only exist on the
Internet, deriving their po...
e-Learning 2.0
(Timothy K. Shih, et al., JDET_DistanceLearnign 2x.doc)
• Perspectives
– People Centric Learning
• LMS can ...
Technology Overview
• Rich Internet application techniques, Ajax-based
• CSS
• Semantically valid XHTML markup and the use...
Criticism
• Many of the ideas of Web 2.0 already featured on networked
systems well before the term "Web 2.0" emerged.
• C...
Interesting Technologies
• Asynchronous JavaScript and XML
(AJAX)
• Really Simple Syndication (RSS)
• Cascading Style Shee...
AJAX
1. What is Rich User Experience?
2. Rich Internet Application (RIA) Technologies
3. AJAX: Real-life examples & Usage ...
Rich User Experience
• Take a look at a typical desktop application
(Spreadsheet app, etc.)
• The program responses intuit...
Characteristics of Conventional
Web Applications
• ―Click, wait, and refresh‖ user interaction
– Page refreshes from the s...
Issues of Conventional Web
Application
• Interruption of user operation
– Users cannot perform any operation while waiting...
Common Rich Internet Application
(RIA) Technologies
• Java Applet
• Macromedia Flash
• Java WebStart
• DHTML
• DHTML with ...
Java Applet
Advantage
• Can use full Java APIs
• Custom data streaming,
graphic manipulation,
threading, and advanced
GUIs...
Macromedia Flash
Advantage
• Good for displaying
vector graphics
Disadvantage
• Browser needs a Flash
plug-in
• ActionScri...
Java WebStart
Advantage
• Desktop experience once
loaded
• Leverages Java technology to
its fullest extent
• Disconnected ...
DHTML
• DHTML = JavaScript + DOM + CSS
– DOM = Document Object Model
– CSS = Cascading Style Sheets
• Used for creating in...
DHTML with Hidden IFrame
• IFrame was introduced as a programmable layout to a
web page
– An IFrame is represented as an e...
AJAX Pro and Con
Advantage
• Most viable RIA technology so
far
• Tremendous industry
momentum
• Several toolkits and
frame...
Real-Life Examples of AJAX
Apps
• Google maps
– http://maps.google.com
• Gmail
– http://gmail.com
• Yahoo Maps
– http://ma...
Key Aspects of Google
Maps
• A user can drag the entire map by using the mouse
– Instead of clicking on a button or someth...
Usage cases for AJAX
• Real-time server-side input form data validation
– User IDs, serial numbers, postal codes
– Removes...
Usage cases for AJAX
• Advanced GUI widgets and controls
– Controls such as tree controls, menus, and progress bars may
be...
Why AJAX?
• Intuitive and natural user interaction
– No clicking required
– Mouse movement is a sufficient event trigger
•...
Why AJAX?
• Asynchronous communication replaces
"synchronous request/response model.―
– A user can continue to use the app...
Web application interaction
models
Technologies Used In AJAX
• JavaScript
– Loosely typed scripting language
– JavaScript function is called when an event in...
XMLHttpRequest
• JavaScript object
• Adopted by modern browsers
– Mozilla, Firefox, Safari, and Opera
• Communicates with ...
Server-Side AJAX Request
Processing
• Server programming model remains the same
– It receives standard HTTP GETs/POSTs
– C...
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 co...
XMLHttpRequest Methods
• open(―HTTP method‖, ―URL‖, syn/asyn)
– Assigns HTTP method, destination URL, mode
• send(content)...
XMLHttpRequest Properties
• onreadystatechange
– Set with an JavaScript event handler that fires at each state
change
• re...
XMLHttpRequest Properties
• responseText
– String version of data returned from the
server
• responseXML
– XML document of...
AJAX Security: Server Side
• AJAX-based Web applications use the same server
side security schemes of regular Web applicat...
AJAX Security: Client Side
• JavaScript code is visible to a user/hacker
– Hacker can use the JavaScript code for inferrin...
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...
Mozilla FireBug Debugger
• Spy on XMLHttpRequest traffic
• JavaScript debugger for stepping through code one line at a tim...
Current Issues of AJAX
• Complexity is increased
– Server side developers will need to understand that
presentation logic ...
Current Issues of AJAX
• No standardization of the XMLHttpRequest yet
– Future version of IE will address this
• No suppor...
Browsers Which Support
XMLHttpRequest
• Mozilla Firefox 1.0 and above
• Netscape version 7.1 and above
• Apple Safari 1.2 ...
AJAX Futures
• Standardization of XMLHttpRequest
• Better browser support
• Better and Standardized Framework
support
– Do...
Really Simple Syndication
• Also known as ―web syndication‖
• RSS is a family of web feed formats used to
publish frequent...
Background
• News Channel
– Netscape‘s ―Push Technology‖
– Microsoft IE‘s ―CDF (Channel Definition
Format)‖
– But, news ch...
What is RSS
• RSS is a format for syndicating news and the
content of news-like sites, but not just for news.
• Pretty muc...
Versions of RSS
Version Owner Pros Status Recommendation
0.90 Netscape Obsoleted by 1.0 Don't use
0.91 UserLand Drop dead ...
RSS References
• RSS 2.0
– http://www.wretch.cc/blog/cwwany
– http://www.wretch.cc/blog/cwwany&rss20=1
• RSS 1.0
– http://...
Summary
• Web 2.0 will be a trend
• LMS must follow standard
• Reading Assignments
– http://en.wikipedia.org/wiki/Web_2
– ...
• Web Document Development Paradigm
• Web Document vs. Software Configuration
Management
• Web Document vs.Software Metric...
The Web Document
Development Paradigm
• Software Development Paradigms
– The Waterfall Model
– The Prototype Approach
– Th...
The Refined Spiral Model
• Script: a simple
outline of Web
document
• Implementation:
HTML files, pictures,
animation, sou...
SCIs of a Web Document
• Why Software Configuration Items (SCIs)
– Keep Track of Changes (Versions)
– Collaborative Develo...
Web Document Metrics
• Basic Metric Elements
– Hyperlinks: Intra-Station versus Inter-Station
– Multimedia Data Objects: C...
Web Document Structure
• A Multi-Digraph
Contains
– Entry Nodes
– End Nodes
– Navigation
Trails
– Navigation
Circuits
• Ea...
Web Document Testing and
Erroneous Objects
• Testing Scope
– Local Testing Scope
– Fixed Depth of Navigation Trails
– Fixe...
Web Document Testing
Criteria
• Level 0 Testing Criteria
– All URLs should be tested
– All primitive objects should be
tes...
A Web Document Database
• Layered Object-Oriented Multimedia
Database
• Object Reuse
• Object Sharing
• Referential Integr...
The Database Hierarchy
Attributes of Objects in
Different Layers
• Database Layer
• Document Layer
• BLOB Layer
Version
Date/Time
Script Names
Da...
An Architecture for Web Doc Development
SQL Server
Relational Database
DB records
Web Document Repository
Assessment
DB re...
The Script Editor
The Implementation Tools
The Testing and Maintenance
Tools
Notes
• Web Document Development from a Software
Engineering Perspective
• Web Document Development Paradigm
• Web Documen...
• Front End of
Virtual World
User Interface
• Mobile Agent
Technique
• Universal Access
• Persistent Look
and Feel
• Integ...
• 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
• Integr...
Upcoming SlideShare
Loading in...5
×

02 asynchronized distance learning

4,474

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,474
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "02 asynchronized distance learning"

  1. 1. Asynchronized Distance Learning Timothy K. Shih
  2. 2. Outline • Multimedia Presentations • Web-based Instructions • Learning Management Systems • Web 2.0 Technologies – AJAX
  3. 3. 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
  4. 4. 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
  5. 5. Director MX 2004 - Interface Time line with multiple channels Multimedia Resources Layout
  6. 6. 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
  7. 7. • FlowChart-Based • Common Macromedia user interface • Microsoft PowerPoint import • Supports several standards – SCORM, XML, etc. • Media support – DVD, MP3, FLASH, etc. Macromedia Authorware
  8. 8. Macromedia Authorware – Flowchart-Based Design
  9. 9. 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
  10. 10. 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.
  11. 11. Learning Management Systems • WebCT • Blackboard • Moodle • Standards (will be discussed) – SCORM – Q&TI – Common Cartridge
  12. 12. 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
  13. 13. 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
  14. 14. • 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.
  15. 15. 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
  16. 16. • 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
  17. 17. • 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
  18. 18. 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
  19. 19. 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
  20. 20. 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)
  21. 21. 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.
  22. 22. • Designed to help educators create online courses with opportunities for rich interaction • Open source license and modular design Moodle course screenshot with Firefox
  23. 23. 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
  24. 24. 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.
  25. 25. 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
  26. 26. 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
  27. 27. Web-based Instructions • HTML • DHTML • XML • Web 2.0 • A Web Document Development Environment (Research Project)
  28. 28. 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.
  29. 29. 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
  30. 30. 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.
  31. 31. 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
  32. 32. 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
  33. 33. 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.
  34. 34. Interesting Technologies • Asynchronous JavaScript and XML (AJAX) • Really Simple Syndication (RSS) • Cascading Style Sheets (CSS) • Folksonomy (in the form of tags or tagclouds)
  35. 35. 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."
  36. 36. 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
  37. 37. 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
  38. 38. 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!
  39. 39. Common Rich Internet Application (RIA) Technologies • Java Applet • Macromedia Flash • Java WebStart • DHTML • DHTML with Hidden iframe • AJAX
  40. 40. 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
  41. 41. 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)
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. Web application interaction models
  53. 53. 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
  54. 54. 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
  55. 55. 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)
  56. 56. Anatomy of an AJAX Interaction (Auto-completion Example)
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. Development Tool on Microsoft Internet Explorer • HttpWatch (Basic Edition) – HTTP monitor – It‘s free!
  64. 64. 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!!
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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.
  72. 72. 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.
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. • 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
  77. 77. 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
  78. 78. 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
  79. 79. 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
  80. 80. 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
  81. 81. 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
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. The Database Hierarchy
  86. 86. 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
  87. 87. 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
  88. 88. The Script Editor
  89. 89. The Implementation Tools
  90. 90. The Testing and Maintenance Tools
  91. 91. 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
  92. 92. • 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
  93. 93. • Student Agent • Instructor Agent • Administrator Agent Student Instructor Administrator Mobile Agents of Different Roles
  94. 94. • 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×