Web Applications
Anton Eliëns
Vrije Universiteit, Amsterdam
19 October 1999
Http://www.cs.vu.nl/~eliens/online/courses/web
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Topics
•
•
•
•
•
•
•
•
•
Preliminaries
Web Application Infrastructure
The Network Economy
The Object Web
Web-based Education Systems
Site Development Steps
Virtual Organizations - meta data
Case Studies
Basic Technology
Conclusions - current developments
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
If the
Web
is the Answer
What is
the Question?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The Application Infrastructure
The
world
around
you
is
changing
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Recurring questions - Web Applications
•
•
•
•
What is the economic model?
Does it scale?
Can you maintain the stuff?
Is there an installed base?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The Building Blocks of Web Applications
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The Ubiqitous Client
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Web Application Server
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Business Logic?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Java as the platform?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Application Integration
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
10 lessons from the Network Economy
•Jonathan Briggs
•
•
•
•
•
•
•
•
•
•
It is about networked relationships
It is about Business-to-Business
It is about specialisations
It is about Services rather than Content
It cannot be about price
It is about exchange of value
It goes beyond the Web
It is about equity
It is about reliability
It is about people
Postacademische Cursus Informatie Technologie
•From EMMA Masterclass
vrije Universiteit
amsterdam
Designing a Web site
does not solve a problem.
It creates a problem!
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Meaning
Media
Infrastructure
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Web Applications – The Object Web
•
•
•
•
•
•
combining servers and client-applications
multiple components
multiple technologies
(in construction) the ObjectWeb
‘the rest of us’ vs Microsoft
communication via IIOP
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Basic Client/Server Pair
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Server-side extended with CGI
• Common Gateway
Interface
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The ObjectWeb (1)
• The rest of us -- Netscape ONE
• Managing Content
• Software architecture
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Managing Content (in the ObjectWeb)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Netscape Enterprise Server
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The ObjectWeb (2)
• Microsoft DNS/DNA
• DNS = Digital Nervous System
• DNA = Dynamic Network Architecture
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Microsoft Digital Nervous System
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Microsoft Dynamic Network Architecture
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
The ObjectWeb (3) - Java
•
•
•
•
•
•
•
extensible browser - with Java applets
platform independent
dynamic
code is uploaded from the server
… and (3 tier) client/server applications
(not to forget) Servlets
and CORBA
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Java applet with ORB
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
•1 get HTML page
•2 get applet
•3 start applet
Postacademische Cursus Informatie Technologie
•4 connect to ORB
•5 get objects
•6 access database
•7 display results
vrije Universiteit
amsterdam
Advanced -- browser plugins
•
•
•
•
extend browser with arbitrary functionality
static
platform specific
C and C++
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
•Example - San Francisco Framework
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Education on the Web
• Virtual Universities
• Tele-learning
• Education is changing …
see Building a Web-based Education System
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Learning and Technology - learning paradigm
•
•
•
•
•
•
•
•
scale -- number of participants
symmetry -- focus on participants
perception -- quality of audio/video
interactivity -- time-delay
co-location -- distance between participants
cost -- price per participant
time -- time to achieve learning objective
tools -- the range of choice
... traditional, distance learning, Web-based ...
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Learning Support
•
•
•
•
•
Collaboration Tools - XTV, NetMeeting, WEB-4M
Videoconferencing Tools - MBONE (Vic/Vat)
Web Tools - QuestWriter
Cross-Platform Tools - Unix/X and 95/NT
Environments - CUSeeMe: conferencing, whiteboard, email, document sharing
see Use of Web technology for Remote Instruction
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Benefits of a Web-based Classroom
•
•
•
•
•
•
computer mediation - store, index, search, convert, distribute
Geographic independence - lifestyle, quality of learning experience
Temporal independence - asynchronous participation
Platform independence - CDROM, shockwave and plugins?
Unified User Interface - popularity of the Web
increased communication, increased learner control
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Problems with a Web-based classroom
•
•
•
•
•
•
•
•
access and resources - …
cost - LAN, ISDN
training - ... the Web can be intimidating …
adopting new methods - pedagogy matches technology?
infrastructure - support and administration
no uniform quality - (non) robust technology!
copyright, privacy, security, authentication
acceptance - ...
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Institutional factors
•
•
•
•
•
•
•
mission statement, direction
infrastructure and funding
promotion and rewards
changing (teaching) methods
admission procedures
Web publishing policies
Internet access and training
... and what do your collegues say?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Client software and hardware - Q/A?
•
•
•
•
•
•
•
What client operating system is being used?
What is the minimum hardware available?
What client software is available?
What peripherals are available?
What access is there to the client?
How competent are the participants?
Will the staff or students require training?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Server software and hardware - Q/A?
•
•
•
•
•
•
•
•
What operating system does the server have?
What are the characteristics of the server's hardware?
What software is available on the server?
What are the capabilities of the software?
What else is the server being used for?
How reliable is the server?
What access do you have to the server?
What support is available for the server?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Technical support
•
•
•
•
server software and hardware
network infra structure
training in the use of technology
problems and questions - helpdesk
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Planning and Design
Step 1: Develop a list of educational goals.
Step 2: Identify implementation methods.
Step 3: Prioritize approaches.
Step 4: Design the structure.
Step 5: Design a page layout.
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Navigation structures
• hierarchical - like a book, ...
• sequential - as a guided tour
• hypermedia - structural and associative links
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Guidelines
•
•
•
•
•
•
•
•
•
concentrate on content
good design is simple
legibility is the key
context must be clear
consistency means predictability
be accurate!
be unique ...
appearance must match purpose
support a variety of visitors
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Page types
•
•
•
•
•
Home page
index pages
content pages
study guide pages
lectures - presentation pages
Technological limitations
• speed, resolution, colors, multimedia
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Web Development Tools
•
•
•
•
•
•
Visual (HTML) Editors
Site Managers
Hypermedia Tools -- rejuvenated
HTML-Database Integration
Publication Wizards
Model-driven Web Generators
based on paper from Piero Fraternali (WWW7)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Visual Editors and Site Managers
• WYSIWYG, page upload, link repair
• Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Hypermedia Tools
• Asymetrix Toolbook, Macromedia Director and Authorware
• authoring, multimedia and synchronisation, navigation
• platform-dependent - plugins
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
HTML-DBPL Integration
•
•
•
•
•
•
merge of Web and databases
integrate HTML with database programming language
Cold Fusion, MS Active Server Pages
form editors, report writers
database publishing wizards
MS Visual InterDev, Oracle Developer 2000
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Model-driven Web Generators
•
•
•
•
•
coverage of all developers activities
from analysis to implementation
state-of-the art software engineering
Oracle Web Developer Suite
AutoWeb, OOHDM, ... - research prototypes
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Web Application Development Support
•
•
•
•
structure
behavior
navigation
presentation
... orthogonal features, with peer dignity
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Enabling communication - education
•
•
•
•
•
decreasing sense of isolation
increasing flexibility
increasing variety
increasing communication experience
enabling variety of pedagogy
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Forms of communication
• asynchronous - email, news, ftp, http
• synchronous - IRC, MUD/MOO, chat
• face-to-face - audio/video conferencing
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Communication Tools (1)
•
•
•
•
•
email - threading, filters, MIME, ..., search
mailing list - majordomo
Web/email-news Gateway - MHonArc (archives)
news readers
conferencing - …
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Communication Tools (2)
•
•
•
•
•
MUD/MOO/MUSH - multi-user shared hallucination
chat - CGI, IRC, Java, avatar-based
groupware - Lotus Notes
audio communication - Cooltalk, Netmeeting
video communication - CuSeeMe, MBONE
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Concept Planning and Development
•
•
•
•
Questions to ask yourself
Issues in concept development
Development steps
Site metaphors
taken from Creating Internet Entertainment
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Questions to ask yourself
• Should you build a site?
• Do you know how to use the Internet effectively?
• Is your industry/business online?
• Low cost or high cost?
• Is the concept practical?
• Who will create the site?
• Who will develop/maintain the content?
• Who is the audience?
• Does your site fit within a community?
• Is access unlimited or members-only?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Issues in Concept Development
•
•
•
•
•
•
•
Choose a name!
Choose a class - micro or macro?
Choose a metaphor - literal is possible!
Develop a flowchart - navigation
User-centric - adaptive (cookie)?
Interactivity - email, form, bulletin, polls, chat, ...
User evaluation - is it effective?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Development Steps
1. Proposal - short summary
2. Description of purpose - economic model
3. Concept - type, site, metaphor, multimedia
4. Implementation facilities - CGI, Java, Shockwave
5. Cost - hardware, software, support
6. Time-table - research, production, development, launch...
7. Maintenance and upgrades - personnel
8. Expansion options - programming and administration
9. Appendix - flowchart and demographics
10. Business plan - funding and marketing
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Metaphors for Sites
•
•
•
•
•
spatial - cities, solar system, room, backyard
representational - train, ship, radio
person or entity - home, tax-wizard
time or event - camera, mechanical arm, fishcam
literal - functional control (tables and lists)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Virtual Organisations
•
•
•
•
Ontologies - metadata
Technology - clients, servers
Applications - ... more than chat?
Research issues - agents above and beyond
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Gateway to (Educational) Metadata - GEM
• meta-data for networked information discovery and retrieval
Objectives
• domain-specific vocabulary
• concrete syntax (using HTML)
• tools for retrieving meta-data
• design prototype interfaces to GEM
Background
• Dublin Core Element Set
• XML, RDF
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Educational Metadata - GEM
1. Audience
2. Cataloguing Agency
3. Duration
4. Essential Resources
5. Educational Level
6. Pedagogy
7. Quality Assessments
8. Academic Standards
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Case Studies
• Navigation Structures in Tutorials
• Hypermedia Support for Software Engineering
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Basic Technology
•
•
•
•
HTML, HTTP, MIME
client / server architecture
client-side extensions
server-side extensions
see Glossary Web Terminology and Web Consortium (W3C)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Markup - HTML
•
•
•
•
HTML 2.0 - the basic
HTML 3.2 - browser specific features
HTML 4.0 - the standard, with CSS
CSS - Cascading Style Sheets
see MarkUp (W3C)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Protocols - HTTP
• HTTP 1.0 - slow and state-less
• HTTP 1.1 - virtual connections
• HTTP NG - fast, interaction (state), …
see Protocols (W3C)
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Client-side Technology
•
•
•
•
•
•
•
•
Style sheets (CSS)
Document Object Model
Math, Graphics - XML
Applets - Java
Helper Applications -- audio, …
Plug-ins - audio, video, animation, virtual reality
Dynamic HTML - Javascript
ActiveX - from Visual basic to ... Java
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Server-side Technology
•
•
•
•
•
HTTP Server - like Apache
server side includes - shtml
CGI - Perl, Python, Tcl
servlets - Java
gateways - CORBA, DCOM, agent-middleware
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Web Architecture and Technology - issues
•
•
•
•
•
•
•
•
protocols - HTTP
structured documents - SGML and XML
synchronized multimedia - SMIL
metadata - PICS (rating)
resource description - RDF (enabling search)
privacy - P3P (platform for privacy preferences)
e-commerce - see Ecommerce (W3C)
web accessibility - ...
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Recurring questions - Web Applications
•
•
•
•
What is the economic model?
Does it scale?
Can you maintain the stuff?
Is there an installed base?
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Assignment
• Design a web-site for your department, or another subject of your choice - Include a
description of the concept, a flowgraph, and a discussion of technical and support requirements.
• Develop a Javascript glossary, quiz or assessment for a subject of your choice.
• Write a 3-page paper on:
– The application of meta-data for a particular domain.
– The development of three tier business applications.
– Site development for a particular kind of business.
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Course Material
• P. Fraternali, Web Development Tools: a survey, Proceedings WWW7, pp. 631-633, Elsevier
1998.
• K. Maly, C.M. Overstreet, A. Gonzalez, M. Denbar, R. Cutaran, N. Karunaratne and C.J.
Srinivas, Use of Web Technology for Interactive Remote Instruction, Proceedings WWW7, pp.
660-662, Elsevier 1998.
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam
Resources
• Glossary Web Terminology
•
•
•
•
Summary HTML (3.2, 4.0)
Javascript examples
Lightbulb tutorials
Browser compatibility test
• WWW5 Workshop - A search for APIs
• WWW6 Workshop - Logic programming and the Web
Postacademische Cursus Informatie Technologie
vrije Universiteit
amsterdam