2. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 19 October 1999 Http://www.cs.vu.nl/~eliens/online/courses/web

3. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

4. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie If the Web is the Answer What is the Question?Question

5. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie The Application Infrastructure The world around you is changing

6. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie

7. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Recurring questions - Web Applications What is the economic model? Does it scale? Can you maintain the stuff? Is there an installed base?

8. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie

9. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie The Building Blocks of Web Applications

10. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie The Ubiqitous Client

11. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Application Server

12. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Business Logic?

13. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Java as the platform?

14. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Application Integration

15. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 10 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

16. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Designing a Web site does not solve a problem. It creates a problem!

17. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Meaning Infrastructure Media

18. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

19. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Basic Client/Server Pair

20. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Common Gateway Interface Server-side extended with CGI

21. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie The ObjectWeb (1) The rest of us -- Netscape ONE Managing Content Software architecture

22. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Managing Content (in the ObjectWeb)

23. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Netscape Enterprise Server

24. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie The ObjectWeb (2) Microsoft DNS/DNA DNS = Digital Nervous System DNA = Dynamic Network Architecture

25. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Microsoft Digital Nervous System

26. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Microsoft Dynamic Network Architecture

27. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

28. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Java applet with ORB

29. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 1 get HTML page 2 get applet 3 start applet 4 connect to ORB 5 get objects 6 access database 7 display results

30. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Advanced -- browser plugins extend browser with arbitrary functionality static platform specific C and C++

31. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Example - San Francisco Framework

32. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Education on the Web Virtual Universities Tele-learning Education is changing … see Building a Web-based Education System

33. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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...

34. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

35. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

36. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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 -...

37. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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?

38. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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?

39. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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?

40. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Technical support server software and hardware network infra structure training in the use of technology problems and questions - helpdesk

41. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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.

42. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Navigation structures hierarchical - like a book,... sequential - as a guided tour hypermedia - structural and associative links

43. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

44. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Page types Home page index pages content pages study guide pages lectures - presentation pages Technological limitations speed, resolution, colors, multimedia

45. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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)

46. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Visual Editors and Site Managers WYSIWYG, page upload, link repair Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage

47. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Hypermedia Tools Asymetrix Toolbook, Macromedia Director and Authorware authoring, multimedia and synchronisation, navigation platform-dependent - plugins

48. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

49. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

50. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Application Development Support structure behavior navigation presentation... orthogonal features, with peer dignity

51. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Enabling communication - education decreasing sense of isolation increasing flexibility increasing variety increasing communication experience enabling variety of pedagogy

52. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Forms of communication asynchronous - email, news, ftp, http synchronous - IRC, MUD/MOO, chat face-to-face - audio/video conferencing

53. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

54. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Communication Tools (1) email - threading, filters, MIME,..., search mailing list - majordomo Web/email-news Gateway - MHonArc (archives) news readers conferencing - …

55. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

56. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Concept Planning and Development Questions to ask yourself Issues in concept development Development steps Site metaphors taken from Creating Internet Entertainment

57. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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?

58. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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?

59. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

60. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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)

61. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Ontologies - metadata Technology - clients, servers Applications -... more than chat? Research issues - agents above and beyond Virtual Organisations

62. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

63. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Educational Metadata - GEM 1.Audience 2.Cataloguing Agency 3.Duration 4.Essential Resources 5.Educational Level 6.Pedagogy 7.Quality Assessments 8.Academic Standards

64. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Case Studies Navigation Structures in Tutorials Hypermedia Support for Software Engineering

65. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Basic Technology HTML, HTTP, MIME client / server architecture client-side extensions server-side extensions see Glossary Web Terminology and Web Consortium (W3C)

66. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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)

67. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Protocols - HTTP HTTP 1.0 - slow and state-less HTTP 1.1 - virtual connections HTTP NG - fast, interaction (state), … see Protocols (W3C)

68. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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

69. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Server-side Technology HTTP Server - like Apache server side includes - shtml CGI - Perl, Python, Tcl servlets - Java gateways - CORBA, DCOM, agent-middleware

70. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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 -...

71. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Recurring questions - Web Applications What is the economic model? Does it scale? Can you maintain the stuff? Is there an installed base?

72. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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.

73. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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.

74. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie 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