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

3. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Topics Basic Technology Web Applications Web-based Education Systems Site Development Steps Virtual Organisations - meta data Case Studies Conclusions - current developments

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

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

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

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

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

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

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

11. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications combining servers and client-applications multiple components multiple technologies (in construction) the ObjectWeb ‘the rest of us’ vs Microsoft communication via IIOP

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

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

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

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

16. vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Netscape Enterprise Server

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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