Interactive online environments

clangpotatoSoftware and s/w Development

Oct 28, 2013 (3 years and 9 months ago)

74 views









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:



Interpersonal


Collaboration


Communication



Intrapersonal


Contemplation


Independent engagement



Human/Computer


Simulations


Responsive 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 consider


Time


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
-
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)



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)



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

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


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 Utilities

http://www.javasoft.com/products/jfc/jaccess
-
1.3/doc/

IBM’s 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

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

1.
Locate a script


(see Matt’s Script Archive
http://worldwidemart.com/scripts/
)


2.
Download and unzip or untar the archived files


3.
Read the
readMe.txt

file to learn how to set the scripts parameters


4.
Move script files to the public_html directory on your GSE account


5.
Change permissions to allow scripts to be executed via ws_ftp (chmod to
-
rwxr
-
xr
-
x for the actual perl file (.pl or .cgi)


6.
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


7.
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 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?tw=programming


Matt’s Script Archive

http://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.com

http://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


Advantages

Scalable

Rapid development


Cold Fusion Components

Cold Fusion Application Server

Cold Fusion Studio/Home Site

Cold Fusion Markup Language (CFML)


Allaire’s

cold fusion

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

cold fusion:
requirements

cold fusion:
process

cold fusion:
dynamic html

cold fusion:
tutorial
application

Link Library

designing for
interactivity





THE END