Interactive online environments

interaction

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.

Rich online environments encourage and support at least three forms of interaction:

InterpersonalCollaborationCommunication

Intrapersonal ContemplationIndependent engagement

Human/Computer SimulationsResponsive systems

types of interaction

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

There are numerous, good reasons for implementing various forms of online interaction.

because you can is not one of them . . .

reasons for interactive content

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

illustrative examples

Density Lab (Macromedia Shockwave)

Thermodynamics (Java Applet)

NBC Olympics (Flash)

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

interactive simulations

(Macromedia Flash)

(Java Applet)

Online tools can be provided to augment cognitive processes.

cognitive tools

VasserStats

(JavaScript)

CSILE

(JavaScript/Server-Side)

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

online assessment

Learning to Learn

C.L.A.S.S

(Cold Fusion & DHTML)

(CGI – Perl)

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

UI feedback

American Trail

Yale

(Macromedia Flash)

(JavaScript)

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

custom content

CNN Multimedia (JavaScript – browser detection)

selecting interactive tools

Factors to considerTime

Expense

Maintenance

Technical Support

Learning curve

Flexibility

Accessibility

Technology’s fit with all participants

Technology’s ability to address the educational challenge(s)

approaches to interactivity

Client-Sideprogramming

JavaScriptDHTML

web savvy plug-insFlashAuthorwareShockwaveAcrobat

Server-SideprogrammingCGI (many languages)Java Servlets

Cold Fusion

Active Server Pages, Java Server Pages, etc.

web savvy applicationsMacromedia Generator

Test Pilot (quiz application)

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

disadvantagesSupport for plug-ins and scripting can vary from client to client, platform to platform

Places processing load on client computer

Server-Side

advantageseliminates client as a variable

can leverage other server-side applications

disadvantagesCannot directly manipulate HTML content on browser screens

Does not provide immediate response or feedback (needed for animation)

client-side tools

Client-side interaction

designing interaction within the browser

server-side tools

Server-side interaction

creating dynamic web pages using remote servers

client/server: Java

OverviewDeveloped by Sun Microsystems

Robust Object-Oriented Programming Language

Same code can be executed on many platforms

Advantages for the WebProvides both server and client side options

Network Savvy

Browser support for Applets

Flexibility provided by programming

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

executing an Applet

Use the <applet> 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

embedding an Applet

<applet codebase=“applet”code=“main.class” width=680 height=350>

<param name=gridx value=4>

<param name=gridy value=2>

<param name=dbfilename value=“applet/pics/imagedb1.txt”>

<param name=thumbnailprefix value=“tn”>

<param name=hiresdirectory value=“pics/”>

<param name=“scale” value=“no”>

<param name=“gridspacing” value=5>

<param name=“enablehires” value=“yes”>

</applet>

slideshow applet

Java Applet examples

Counter-Rotating Spiral Illusion

Visual Thesaurus

Harvard Medical School WBA Navigator

java: resources

Sun’s 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 Utilitieshttp://www.javasoft.com/products/jfc/jaccess-1.3/doc/

IBM’s Accessibility Centerhttp://www.-3.ibm.com/able/accessjava.html

Applets: The Java Boutiquehttp://javaboutique.internet.com/

JARShttp://jars.developer.com/jars_resources_java.html

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.

CGI processing cycle

CGI allows users to connect with server-side programs through the web and receive feedback via HTML pages.

Perl/CGI scripts at the GSE

Steps for implementing a perl/CGI script at the GSE– Locate a script – (see Matt’s 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_script.cgi

cgi/perl example

Problem-based web application that presents a case to medical students for diagnoses.

Health Sciences Database

cgi/perl: resources

Intro to Perl for CGIhttp://hotwired.lycos.com/webmonkey/98/47/index2a.html

CGI Scripts for Fun and Profithttp://hotwired.lycos.com/webmonkey/99/26/index4a.html?tw=programming

Matt’s Script Archivehttp://worldwidemart.com/scripts/

W3C CGI:Common Gateway Interface (Docs and Specs)http://www.w3.org/CGI/

Comprehensive Perl Archive Network http://www.cpan.org/

Perl Documentation from Perl.comhttp://www.perl.com/pub/v/documentation

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

server-side development technologies

Introduction to Cold Fusion

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.

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.

We’ll consider Cold Fusion, a suite of technologies for creating database driven web sites.

the problem space

Middleware Dynamic web sites

Groupware

Network applications

AdvantagesScalable

Rapid development

Cold Fusion ComponentsCold Fusion Application Server

Cold Fusion Studio/Home Site

Cold Fusion Markup Language (CFML)

Allaire’s cold fusion

Operating SystemsUnix (Solaris)LinuxWindows NT, 2000, 98

SoftwareWeb serverCold Fusion Application SeverDatabase Program/Server (w/ODBC support)

Skill SetsHTMLCold Fusion Markup Language (CFML)SQL/Database Design

cold fusion: requirements

cold fusion: process

cold fusion: dynamic html

cold fusion: tutorial application

Link Library

designing for interactivity

THE END