Web Applications
Anton Eliëns
Vrije Universiteit, Amsterdam
CMG Course - 20 mei 1998
www.cs.vu.nl/~eliens/online/courses/cmg/web
Topics:
- Web-technology
- Requirements for Web-applications
- Software engineering Web-applications
- Development tools and techniques
- Current developments and trends
If the |
| Web |
| | is the Answer, |
What is |
| | the Question? |
Basic Technology
- HTML, HTTP, MIME
- client/server architecture
- client-side extensions
- server-side extensions
see Glossary Web Terminology
and Web Consortium (W3C)
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)
Protocols - HTTP
- HTTP 1.0 - slow and state-less
- HTTP 1.1 - virtual connections
- HTTP NG - fast, interaction (state), ...
see Protocols (W3C)
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
Server-side Technology
- HTTP Server - like Apache
- server side includes - shtml
- CGI - Perl, Python, Tcl
- servlets - Java
- gateways - CORBA, DCOM, agent-middleware
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 - ...
Education on the Web
- Virtual Universities
- Tele-learning
- Education is changing ...
see Building a Web-based Education System
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 ...
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
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
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 - ...
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?
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?
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?
Technical support
- server software and hardware
- network infra structure
- training in the use of technology
- problems and questions - helpdesk
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.
Navigation structures
- hierarchical - like a book, ...
- sequential - as a guided tour
- hypermedia - structural and associative links
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
Page types
- Home page
- index pages
- content pages
- study guide pages
- lectures - presentation pages
Technological limitations
- speed, resolution, colors, multimedia
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)
Visual Editors and Site Managers
- WYSIWYG, page upload, link repair
- Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage
Hypermedia Tools
- Asymetrix Toolbook, Macromedia Director and Authorware
- authoring, multimedia and synchronisation, navigation
- platform-dependent - plugins
HTML-DBPL Integration
- merge of Web and databases
- integrate HTML with database programming language
- Cold Fusion, MS Active Server Pages
Database-centric Tools
- form editors, report writers
- database publishing wizards
- MS Visual InterDev, Oracle Developer 2000
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
Web Application Development Support
- structure
- behavior
- navigation
- presentation
... orthogonal features, with peer dignity
Enabling communication - education
- decreasing sense of isolation
- increasing flexibility
- increasing variety
- increasing communication experience
- enabling variety of pedagogy
Forms of communication
- asynchronous - email, news, ftp, http
- synchronous - IRC, MUD/MOO, chat
- face-to-face - audio/video conferencing
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
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
Concept Planning and Development
- Questions to ask yourself
- Issues in concept development
- Development steps
- Site metaphors
taken from Creating Internet Entertainment
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?
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?
Development Steps
- Proposal - short summary
- Description of purpose - economic model
- Concept - type, site, metaphor, multimedia
- Implementation facilities - CGI, Java, Shockwave
- Cost - hardware, software, support
- Time-table - research, production, development, launch...
- Maintenance and upgrades - personel
- Expansion options - programming and administration
- Appendix - flowchart and demographics
- Business plan - funding and marketing
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)
Virtual Organisations
- Ontologies - metadata
- Technology - clients, servers
- Applications - ... more than chat?
- Research issues - agents above and beyond
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
Educational Metadata - GEM
- Audience
- Cataloguing Agency
- Duration
- Essential Resources
- Educational Level
- Pedagogy
- Quality Assessments
- Academic Standards
Case Studies
Recurring questions - Web Applications
- What is the economic model?
- Does it scale?
- Can you maintain the stuff?
- Is there an installed base?
- 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.
Course Material
Course Material
- P. Fraternali, Web Development Tools: a survey
Proc. 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
Proc. WWW7, pp. 660-662, Elsevier 1998
Resources