Web Applications
Anton Eliëns
Vrije Universiteit, Amsterdam
30 maart 1999
http://www.cs.vu.nl/~eliens/cmg
http://www.cs.vu.nl/~eliens/online/courses/cmg/web
Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam
Topics
• Basic Technology
• Web Applications
• Web-based Education Systems
• Site Development Steps
• Virtual Organisations - meta data
• Case Studies
• 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
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
Web Applications
• 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 •4 connect to ORB
•2 get applet •5 get objects
•3 start applet •6 access database
•7 display results
Postacademische Cursus Informatie Technologie 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
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