vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 19 October 1999.

vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie

Web ApplicationsWeb Applications

Anton Eliëns

Vrije Universiteit, Amsterdam

19 October 1999

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

TopicsTopics

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

If the

is the Answer

What is

the Question?

The Application InfrastructureThe Application Infrastructure

around

changing

Recurring questions - Web ApplicationsRecurring questions - Web Applications

• What is the economic model?

• Does it scale?

• Can you maintain the stuff?

• Is there an installed base?

The Building Blocks of Web ApplicationsThe Building Blocks of Web Applications

The Ubiqitous ClientThe Ubiqitous Client

Web Application ServerWeb Application Server

Business Logic?Business Logic?

Java as the platform?Java as the platform?

Application IntegrationApplication Integration

10 lessons from the Network Economy10 lessons from the Network Economy

• 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

•Jonathan Briggs

•From EMMA Masterclass

Designing a Web site

does not solve a problem.

It creates a problem!

Designing a Web site

does not solve a problem.

It creates a problem!

Meaning

Infrastructure

Web Applications – The Object WebWeb 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

Basic Client/Server PairBasic Client/Server Pair

• Common Gateway

Interface

Server-side extended with CGIServer-side extended with CGI

The ObjectWeb (1)The ObjectWeb (1)

• The rest of us -- Netscape ONE

• Managing Content

• Software architecture

Managing Content (in the ObjectWeb)Managing Content (in the ObjectWeb)

Netscape Enterprise ServerNetscape Enterprise Server

The ObjectWeb (2)The ObjectWeb (2)

• Microsoft DNS/DNA

• DNS = Digital Nervous System

• DNA = Dynamic Network Architecture

Microsoft Digital Nervous SystemMicrosoft Digital Nervous System

Microsoft Dynamic Network ArchitectureMicrosoft Dynamic Network Architecture

The ObjectWeb (3) - JavaThe 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

Java applet with ORBJava applet with ORB

•1 get HTML page•2 get applet•3 start applet

•4 connect to ORB•5 get objects•6 access database•7 display results

Advanced -- browser pluginsAdvanced -- browser plugins

• extend browser with arbitrary functionality

• static

• platform specific

• C and C++

•Example - San Francisco Framework

Education on the WebEducation on the Web

• Virtual Universities

• Tele-learning

• Education is changing …

see Building a Web-based Education System

Learning and Technology - learning paradigmLearning 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 SupportLearning 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 ClassroomBenefits 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 classroomProblems 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 factorsInstitutional 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?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?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 supportTechnical support

• server software and hardware

• network infra structure

• training in the use of technology

• problems and questions - helpdesk

Planning and DesignPlanning 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 structuresNavigation structures

• hierarchical - like a book, ...

• sequential - as a guided tour

• hypermedia - structural and associative links

GuidelinesGuidelines

• 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 typesPage types

• Home page

• index pages

• content pages

• study guide pages

• lectures - presentation pages

Technological limitations• speed, resolution, colors, multimedia

Web Development ToolsWeb 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 ManagersVisual Editors and Site Managers

• WYSIWYG, page upload, link repair

• Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage

Hypermedia ToolsHypermedia Tools

• Asymetrix Toolbook, Macromedia Director and Authorware

• authoring, multimedia and synchronisation, navigation

• platform-dependent - plugins

HTML-DBPL IntegrationHTML-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

Model-driven Web GeneratorsModel-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 SupportWeb Application Development Support

• structure

• behavior

• navigation

• presentation

... orthogonal features, with peer dignity

Enabling communication - educationEnabling communication - education

• decreasing sense of isolation

• increasing flexibility

• increasing variety

• increasing communication experience

• enabling variety of pedagogy

Forms of communicationForms of communication

• asynchronous - email, news, ftp, http

• synchronous - IRC, MUD/MOO, chat

• face-to-face - audio/video conferencing

Communication Tools (1)Communication Tools (1)

• email - threading, filters, MIME, ..., search

• mailing list - majordomo

• Web/email-news Gateway - MHonArc (archives)

• news readers

• conferencing - …

Communication Tools (2)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

Concept Planning and DevelopmentConcept Planning and Development

• Questions to ask yourself

• Issues in concept development

• Development steps

• Site metaphors

taken from Creating Internet Entertainment

Questions to ask yourselfQuestions 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 DevelopmentIssues 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 StepsDevelopment Steps

1. Proposal - short summary2. Description of purpose - economic model3. Concept - type, site, metaphor, multimedia4. Implementation facilities - CGI, Java, Shockwave5. Cost - hardware, software, support6. Time-table - research, production, development, launch...7. Maintenance and upgrades - personnel8. Expansion options - programming and administration9. Appendix - flowchart and demographics10. Business plan - funding and marketing

Metaphors for SitesMetaphors 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)

• Ontologies - metadata

• Technology - clients, servers

• Applications - ... more than chat?

• Research issues - agents above and beyond

Virtual OrganisationsVirtual Organisations

Gateway to (Educational) Metadata - GEMGateway 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 - GEMEducational Metadata - GEM

1. Audience

2. Cataloguing Agency

3. Duration

4. Essential Resources

5. Educational Level

6. Pedagogy

7. Quality Assessments

8. Academic Standards

Case StudiesCase Studies

• Navigation Structures in Tutorials

• Hypermedia Support for Software Engineering

Basic TechnologyBasic Technology

• HTML, HTTP, MIME

• client / server architecture

• client-side extensions

• server-side extensions

see Glossary Web Terminology and Web Consortium (W3C)

Markup - HTMLMarkup - 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 - HTTPProtocols - HTTP

• HTTP 1.0 - slow and state-less

• HTTP 1.1 - virtual connections

• HTTP NG - fast, interaction (state), …

see Protocols (W3C)

Client-side TechnologyClient-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

Server-side TechnologyServer-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 - issuesWeb 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 - ...

Recurring questions - Web ApplicationsRecurring questions - Web Applications

• What is the economic model?

• Does it scale?

• Can you maintain the stuff?

• Is there an installed base?

AssignmentAssignment

• 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 MaterialCourse Material

• P. Fraternali, Web Development Tools: a survey, Proceedings WWW7, pp. 631-633, Elsevier

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

ResourcesResources

• 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

vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 19 October 1999.

iiop slide

cgi slide

infrastructure media

ubiqitous client slide

emma masterclass slide

web site

network economy

vs microsoft communication

Documents

Vrije Universiteit Brussel | Redelijk eigenzinnig

Mechanica - Vrije Universiteit...

I - Vrije Universiteit Brussel | Redelijk eigenzinnig ·...

Vrije Universiteit Brussel, Belgium

End matter - Vrije Universiteit Amsterdam

trasparenza.unica.ittrasparenza.unica.it/dipartimentodiscien...

Dimitris Pavlopoulos Vrije Universiteit Amsterdam.

VRIJE UNIVERSITEIT · VRIJE UNIVERSITEIT Vogels en mensen.....

vrije Universiteit amsterdamPostacademische Cursus...

BIBLIOTHEEK VRIJE UNIVERSITEIT AMSTERDAM … · BIBLIOTHEEK...

Vrije Universiteit amsterdamPostacademische Cursus...

A SPAR E - Vrije Universiteit Amsterdam...Omslagfoto: Vlag.....

Vrije Universiteit...

Vrije Universiteit Brussel Informatica - VUB

Translation Leak-aside Buffer: Defeating Cache Side-channel....

Vrije Universiteit Amsterdam · VRIJE UNIVERSITEIT....