Download Interactive online environments

interaction
Interactive online environments
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.
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
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
reasons for interactive content
There are numerous, good reasons for implementing various
forms of online interaction.
because you can is not one of them . . .
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)
interactive simulations
Working through interactive
simulations, may provide
experiences impossible to
construct in the real world.
(Java Applet)
(Macromedia Flash)
cognitive tools
Online tools can be provided
to augment cognitive
processes.
VasserStats
(JavaScript)
CSILE
(JavaScript/Server-Side)
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
UI
feedback
System status, feedback and
additional information can be
provided via interactive UI
elements.
American Trail
(Macromedia Flash)
Yale (JavaScript)
custom content
Customized content can be provided
based upon user preferences or needs.
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
Harvard Medical School
WBA Navigator
Visual Thesaurus
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
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
technologies
server-side development
Introduction to Cold Fusion
technologies
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.
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.
Allaire’s
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)
cold fusion
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
cold fusion: process
cold fusion: dynamic
html
cold fusion: tutorial application
Link Library
designing for interactivity
THE END