Web Applications

Anton Eliëns

Vrije Universiteit, Amsterdam


www.cs.vu.nl/~eliens/online/courses/web


slide: Course: Web Applications


Creating a Web site does not solve a problem.

It creates a problem!


slide: Web Applications

Introduction


If the
Web
is the Answer,
What is
the Question?

slide: What is the Question?

Basic Technology


Basic Technology

  • HTML, HTTP, MIME
  • client/server architecture
  • client-side extensions
  • server-side extensions

see Glossary Web Terminology and Web Consortium (W3C)


slide: Basic Technology


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)


slide: Markup - HTML


Protocols - HTTP

  • HTTP 1.0 - slow and state-less
  • HTTP 1.1 - virtual connections
  • HTTP NG - fast, interaction (state), ...

see Protocols (W3C)


slide: Protocols - HTTP


Client-side Technology

  • Stylesheets (CSS)
  • Document Object Model
  • Math, Graphics - XML
  • Applets - Java
  • Helper Applications -- audio, ...
  • Plugins - audio, video, animation, virtual reality
  • Dynamic HTML - Javascript
  • ActiveX - from Visual basic to ... Java

slide: Client-side Technology


Server-side Technology

  • HTTP Server - like Apache
  • server side includes - shtml
  • CGI - Perl, Python, Tcl
  • servlets - Java
  • gateways - CORBA, DCOM, agent-middleware

slide: Server-side Technology


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

slide: Web Architecture and Technology

Education on the Web


Education on the Web

  • Virtual Universities
  • Tele-learning
  • Education is changing ...
see Building a Web-based Education System
slide: Education on the Web


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


slide: Learning and Technology


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


slide: Learning Support


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

slide: Benefits of a Web-based Classroom


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

slide: Problems with a Web-based classroom


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?


slide: Institutional factors


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?

slide: Client software and hardware - Q/A?


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?

slide: Server software and hardware - Q/A?


Technical support

  • server software and hardware
  • network infra structure
  • training in the use of technology
  • problems and questions - helpdesk

slide: Technical support


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.

slide: Planning and Design


Navigation structures

  • hierarchical - like a book, ...
  • sequential - as a guided tour
  • hypermedia - structural and associative links

slide: Navigation structures


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

slide: Guidelines


Page types

  • Home page
  • index pages
  • content pages
  • study guide pages
  • lectures - presentation pages

Technological limitations

  • speed, resolution, colors, multimedia

slide: Page types

Web Development Tools


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)


slide: Web Development Tools


Visual Editors and Site Managers

  • WYSIWYG, page upload, link repair
  • Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage

slide: Visual Editors and Site Managers


Hypermedia Tools

  • Asymetrix Toolbook, Macromedia Director and Authorware
  • authoring, multimedia and synchronisation, navigation
  • platform-dependent - plugins

slide: Hypermedia Tools


HTML-DBPL Integration

  • merge of Web and databases
  • integrate HTML with database programming language
  • Cold Fusion, MS Active Server Pages

slide: HTML-DBPL Integration


Database-centric Tools

  • form editors, report writers
  • database publishing wizards
  • MS Visual InterDev, Oracle Developer 2000

slide: Database-centric Tools


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

slide: Model-driven Web Generators


Web Application Development Support

  • structure
  • behavior
  • navigation
  • presentation

... orthogonal features, with peer dignity


slide: Web Application Development Support

Communication


Enabling communication - education

  • decreasing sense of isolation
  • increasing flexibility
  • increasing variety
  • increasing communication experience
  • enabling variety of pedagogy

slide: Enabling Communication


Forms of communication

  • asynchronous - email, news, ftp, http
  • synchronous - IRC, MUD/MOO, chat
  • face-to-face - audio/video conferencing

slide: Forms of communication


Communication Approaches

  • one-to-one - peer assessment and email buddies
  • one-to-many - lectures, presentations
  • many-to-one - feedback and evaluation
  • many-to-many - virtual class, panel discussions

slide: Communication Approaches


Communication Tools

  • email - threading, filters, MIME, ..., search
  • mailing list - majordomo
  • Web/email-news Gateway - MHonArc (archives)
  • news readers
  • conferencing - ...
  • MUD/MOO/MUSH - multi-user shared hallucination)
  • chat - CGI, IRC, Java, avatar-based
  • groupware - Lotus Notes
  • audio communication - Cooltalk, Netmeeting
  • video communication - CuSeeMe, MBONE

slide: Communication Tools

Concept Planing and Development


Concept Planning and Development

  • Questions to ask yourself
  • Issues in concept development
  • Development steps
  • Site metaphors

taken from Creating Internet Entertainment


slide: Concept Planning and Development


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?

slide: Questions to ask yourself


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?

slide: Issues in Concept Development


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 - personel
  8. Expansion options - programming and administration
  9. Appendix - flowchart and demographics
  10. Business plan - funding and marketing

slide: Development Steps


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)

slide: Metaphors for Sites

Virtual Organisations


Virtual Organisations

  • Ontologies - metadata
  • Technology - clients, servers
  • Applications - ... more than chat?
  • Research issues - agents above and beyond

slide: Virtual Organisations


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

slide: Gateway to Metadata


Educational Metadata - GEM

  1. Audience
  2. Cataloguing Agency
  3. Duration
  4. Essential Resources
  5. Educational Level
  6. Pedagogy
  7. Quality Assessments
  8. Academic Standards

slide: Educational Metadata - GEM

Case studies


Case Studies


slide: Case Studies

Conclusions


Recurring questions - Web Applications

  • What is the economic model?
  • Does it scale?
  • Can you maintain the stuff?
  • Is there an installed base?

slide: Recurring questions

Assignments


Assignments: (nederlandse versie)

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

slide: Assignments

Course Material


Course Material

Resources


slide: Course Material