Interactive online environments

1

interaction

• Interactive online environments

2
purposeful interaction

• In building interactive online environments we
  are designing experiences to enhance users
  comprehension of concepts by encouraging critical
  and creative thinking through active
  participation.

3
types of interaction

• Rich online environments encourage and support at
  least three forms of interaction
• Interpersonal
• Collaboration
• Communication
• Intrapersonal
• Contemplation
• Independent engagement
• Human/Computer
• Simulations
• Responsive systems

4
lecture Goals

• To suggest some reasons for using online
  interactive elements
• To provide an introduction to several technical
  means of supporting human/machine interactivity
• To understand some of the benefits and
  limitations of the technologies introduced
• To become familiar with the basic requirements
  for and tradeoffs of implementing a few of these
  technologies

5
reasons for interactive content

• There are numerous, good reasons for implementing
  various forms of online interaction.
• because you can is not one of them . . .

6
illustrative examples

• Interactive applications can be used to present
  complex processes unfolding or to dynamically
  illustrate important relationships in
  multivariate phenomena.

Density Lab (Macromedia Shockwave)
Thermodynamics (Java Applet)
NBC Olympics (Flash)
7
interactive simulations

• Working through interactive simulations, may
  provide experiences impossible to construct in
  the real world.

(Java Applet)
(Macromedia Flash)
8
cognitive tools

• Online tools can be provided to augment
  cognitive processes.

VasserStats(JavaScript)
CSILE(JavaScript/Server-Side)
9
online assessment

• Forms of assessment can be implemented via
  interactive online modules and exams.

(Cold Fusion DHTML)
Learning to Learn
(CGI Perl)
C.L.A.S.S
10
UI feedback

• System status, feedback and additional
  information can be provided via interactive UI
  elements.

American Trail
(Macromedia Flash)
Yale
(JavaScript)
11
custom content

• Customized content can be provided based upon
  user preferences or needs.

CNN Multimedia
(JavaScript browser detection)
12
selecting interactive tools

• Factors to consider
• Time
• Expense
• Maintenance
• Technical Support
• Learning curve
• Flexibility
• Accessibility
• Technologys fit with all participants
• Technologys ability to address the educational
  challenge(s)

13
approaches to interactivity

• Client-Side
• programming
• JavaScript
• DHTML
• web savvy plug-ins
• Flash
• Authorware
• Shockwave
• Acrobat

Server-Side programming CGI (many
languages) Java Servlets Cold Fusion Active
Server Pages, Java Server Pages, etc. web
savvy applications Macromedia Generator Test
Pilot (quiz application)
14
client-side vs. server-side

• Client-Side
• advantages
• Does not require access to server technologies
• Some forms provide direct control over the
  browser and HTML elements
• Places processing load on client computer
• disadvantages
• Support for plug-ins and scripting can vary from
  client to client, platform to platform
• Places processing load on client computer

Server-Side advantages eliminates
client as a variable can leverage other
server-side applications
disadvantages Cannot directly manipulate HTML
content on browser screens Does not provide
immediate response or feedback (needed for
animation)
15
client-side tools

• Client-side interaction
• designing interaction within the browser

16
server-side tools

• Server-side interaction
• creating dynamic web pages using remote
  servers

17
client/server Java

• Overview
• Developed by Sun Microsystems
• Robust Object-Oriented Programming Language
• Same code can be executed on many platforms
• Advantages for the Web
• Provides both server and client side options
• Network Savvy
• Browser support for Applets
• Flexibility provided by programming

18
Java some flavors

• Java Servlets - Java programs that can provide
  server-side support for web interaction
• Java Server Pages (JSP) A technology for adding
  
• java programming logic directly to web
  pages
• Java Applets - Java programs that can be run
  within
• web browsers

19
executing an Applet

• Use the ltappletgt tag which provides the network
  address of the Applet class files to be
  downloaded
• Applets download from the server as files
  separate from the HTML document
• Browser verifies they do not violate any
  security restrictions
• Applets are executed in the browser
• Existing applets can easily be incorporated into
  your web pages

20
embedding an Applet

• ltapplet codebaseappletcodemain.class
  width680 height350gt
• ltparam namegridx value4gt
• ltparam namegridy value2gt
• ltparam namedbfilename valueapplet/pics/imagedb
  1.txtgt
• ltparam namethumbnailprefix valuetngt
• ltparam namehiresdirectory valuepics/gt
• ltparam namescale valuenogt
• ltparam namegridspacing value5gt
• ltparam nameenablehires valueyesgt
• lt/appletgt

slideshow applet
21
Java Applet examples
Counter-Rotating Spiral Illusion
Harvard Medical School WBA Navigator
Visual Thesaurus
22
java resources

• Suns JavaSoft Site (JDKS, API Docs, etc.)
• http//www.javasoft.com
• The Java Tutorial (online tutorial)
• http//java.sun.com/docs/books/tutorial/index.html
  
• Thinking in Java (electronic book on OOP and Java
  by Bruce Eckel)
• http//www.bruceeckelcom/TIJ2/index.html
• Java Accessibility Utilities
• http//www.javasoft.com/products/jfc/jaccess-1.3/d
  oc/
• IBMs Accessibility Center
• http//www.-3.ibm.com/able/accessjava.html
• Applets The Java Boutique
• http//javaboutique.internet.com/
• JARS
• http//jars.developer.com/jars_resources_java.html

23
CGI common gateway interface

• Earliest method of creating dynamic, interactive
  web applications
• CGI is a protocol, an established set of rules
  that govern how server-side applications
  communicate with web servers.
• CGI acts a gateway between the web server and its
  users on the one side and additional server-side
  applications on the other.

24
CGI processing cycle
CGI allows users to connect with server-side
programs through the web and receive feedback via
HTML pages.
25
Perl/CGI scripts at the GSE

• Steps for implementing a perl/CGI script at the
  GSE
• Locate a script (see Matts Script Archive
  http//worldwidemart.com/scripts/)
• Download and unzip or untar the archived files
• Read the readMe.txt file to learn how to set the
  scripts parameters
• Move script files to the public_html directory on
  your GSE account
• Change permissions to allow scripts to be
  executed via ws_ftp (chmod to -rwxr-xr-x for the
  actual perl file (.pl or .cgi)
• Edit the necessary parameters in the script and
  make sure the perl file has a .cgi extension. Add
  this line to the top of the script
  !/usr/local/bin/perl w
• Try it out via the web
• http//gseweb.harvard.edu/your_username/your_scri
  pt.cgi

26
cgi/perl example
Problem-based web application that presents a
case to medical students for diagnoses.
Health Sciences Database
27
cgi/perl resources

• Intro to Perl for CGI
• http//hotwired.lycos.com/webmonkey/98/47/index2a.
  html
• CGI Scripts for Fun and Profit
• http//hotwired.lycos.com/webmonkey/99/26/index4a.
  html?twprogramming
• Matts Script Archive
• http//worldwidemart.com/scripts/
• W3C CGICommon Gateway Interface (Docs and Specs)
• http//www.w3.org/CGI/
• Comprehensive Perl Archive Network
  http//www.cpan.org/
• Perl Documentation from Perl.com
• http//www.perl.com/pub/v/documentation

28
server-side development technologies

• ASP - Active Server Pages .NET (Microsoft)
• http//www.microsoft.com
• PHP - Hypertext Preprocessor (open source)
• http//www.php.net/
• JSP - Java Server Pages (Sun Microsystems)
• http//www.javasoft.com
• Java Servlets (Sun Microsystems)
• http//www.javasoft.com
• Cold Fusion - rapid development tool (Allaire,
  Inc.)
• http//www.allaire.com

29
server-side development technologies

• Introduction to Cold Fusion

30
the problem space

• Lots of information to distribute online changes
  frequently and is gathered from multiple sources
• Information needs to be organized and managed for
  other purposes not just for web distribution
• Information needs to made available using
  current/common technologies
• One solution
• Content providers send copy to web editors to be
  marked up in html. Static web pages are created
  that must be edited with every new change to the
  content.

31
the problem space

• A better solution
• Use HTML for what it is good for - presenting
  electronic information and use databases for
  what they are good for managing data.
• Select a technology that can bridge these two
  worlds often called middleware.
• Well consider Cold Fusion, a suite of
  technologies for creating database driven web
  sites.

32
Allaires cold fusion

• Middleware
• Dynamic web sites
• Groupware
• Network applications
• Advantages
• Scalable
• Rapid development
• Cold Fusion Components
• Cold Fusion Application Server
• Cold Fusion Studio/Home Site
• Cold Fusion Markup Language (CFML)

33
cold fusion requirements

• Operating Systems
• Unix (Solaris)
• Linux
• Windows NT, 2000, 98
• Software
• Web server
• Cold Fusion Application Sever
• Database Program/Server (w/ODBC support)
• Skill Sets
• HTML
• Cold Fusion Markup Language (CFML)
• SQL/Database Design

34
cold fusion process
35
cold fusion dynamic html
36
cold fusion tutorial application
Link Library
37
designing for interactivity

• THE END