Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 september 1998 http://www.cs.vu.nl/~eliens/cmg/html/web http://www.cs.vu.nl/~eliens/online/courses/cmg/web Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Topics • • • • • • • Basic Technology Web Applications Web-based Education Systems Site Development Steps Virtual Organisations - meta data Case Studies Conclusions - current developments Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam If the Web is the Answer What is the Question? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Basic Technology • • • • HTML, HTTP, MIME client / server architecture client-side extensions server-side extensions see Glossary Web Terminology and Web Consortium (W3C) Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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) Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Protocols - HTTP • HTTP 1.0 - slow and state-less • HTTP 1.1 - virtual connections • HTTP NG - fast, interaction (state), … see Protocols (W3C) Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Server-side Technology • • • • • HTTP Server - like Apache server side includes - shtml CGI - Perl, Python, Tcl servlets - Java gateways - CORBA, DCOM, agent-middleware Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 - ... Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Web Applications • • • • • combining servers and client-applications communication via IIOP multiple components multiple technologies for example: Netcape ONE Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Browser plugins • • • • extend browser with arbitrary functionality static platform specific C and C++ Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Java and the Web • • • • • extensible browser - with Java applets platform independent dynamic code is uploaded from the server … and (3 tier) client/server applications Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Education on the Web • Virtual Universities • Tele-learning • Education is changing … see Building a Web-based Education System Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 ... Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 - ... Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Technical support • • • • server software and hardware network infra structure training in the use of technology problems and questions - helpdesk Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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. Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Navigation structures • hierarchical - like a book, ... • sequential - as a guided tour • hypermedia - structural and associative links Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Page types • • • • • Home page index pages content pages study guide pages lectures - presentation pages Technological limitations • speed, resolution, colors, multimedia Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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) Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Visual Editors and Site Managers • WYSIWYG, page upload, link repair • Adobe Site/Page Mill, NetObject Fusion, SoftQuad HotMetal, MS Frontpage Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Hypermedia Tools • Asymetrix Toolbook, Macromedia Director and Authorware • authoring, multimedia and synchronisation, navigation • platform-dependent - plugins Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Web Application Development Support • • • • structure behavior navigation presentation ... orthogonal features, with peer dignity Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Enabling communication - education • • • • • decreasing sense of isolation increasing flexibility increasing variety increasing communication experience enabling variety of pedagogy Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Forms of communication • asynchronous - email, news, ftp, http • synchronous - IRC, MUD/MOO, chat • face-to-face - audio/video conferencing Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Communication Tools (1) • • • • • email - threading, filters, MIME, ..., search mailing list - majordomo Web/email-news Gateway - MHonArc (archives) news readers conferencing - … Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Concept Planning and Development • • • • Questions to ask yourself Issues in concept development Development steps Site metaphors taken from Creating Internet Entertainment Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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) Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Virtual Organisations • • • • Ontologies - metadata Technology - clients, servers Applications - ... more than chat? Research issues - agents above and beyond Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Educational Metadata - GEM 1. Audience 2. Cataloguing Agency 3. Duration 4. Essential Resources 5. Educational Level 6. Pedagogy 7. Quality Assessments 8. Academic Standards Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Case Studies • Navigation Structures in Tutorials • Hypermedia Support for Software Engineering Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam Recurring questions - Web Applications • • • • What is the economic model? Does it scale? Can you maintain the stuff? Is there an installed base? Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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. Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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. Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam 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 Postacademische Cursus Informatie Technologie vrije Universiteit amsterdam