![Page 1: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/1.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Web ApplicationsWeb 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
![Page 2: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/2.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
TopicsTopics
• Basic Technology• Web Applications • Web-based Education Systems • Site Development Steps• Virtual Organisations - meta data• Case Studies • Conclusions - current developments
![Page 3: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/3.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
If the
Web
is the Answer
What is
the Question?
![Page 4: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/4.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Basic TechnologyBasic Technology
• HTML, HTTP, MIME• client / server architecture• client-side extensions• server-side extensions
see Glossary Web Terminology and Web Consortium (W3C)
![Page 5: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/5.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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)
![Page 6: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/6.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Protocols - HTTPProtocols - HTTP
• HTTP 1.0 - slow and state-less• HTTP 1.1 - virtual connections• HTTP NG - fast, interaction (state), …
see Protocols (W3C)
![Page 7: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/7.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 8: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/8.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Server-side TechnologyServer-side Technology
• HTTP Server - like Apache• server side includes - shtml• CGI - Perl, Python, Tcl• servlets - Java• gateways - CORBA, DCOM, agent-middleware
![Page 9: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/9.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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 - ...
![Page 10: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/10.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Web ApplicationsWeb Applications
• combining servers and client-applications• multiple components• multiple technologies• (in construction) the ObjectWeb• ‘the rest of us’ vs Microsoft• communication via IIOP
![Page 11: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/11.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Basic Client/Server PairBasic Client/Server Pair
![Page 12: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/12.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
• Common Gateway
Interface
Server-side extended with CGIServer-side extended with CGI
![Page 13: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/13.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
The ObjectWeb (1)The ObjectWeb (1)
• The rest of us -- Netscape ONE• Managing Content• Software architecture
![Page 14: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/14.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Managing Content (in the ObjectWeb)Managing Content (in the ObjectWeb)
![Page 15: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/15.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Netscape Enterprise ServerNetscape Enterprise Server
![Page 16: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/16.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
The ObjectWeb (2)The ObjectWeb (2)
• Microsoft DNS/DNA• DNS = Digital Nervous System• DNA = Dynamic Network Architecture
![Page 17: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/17.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Microsoft Digital Nervous SystemMicrosoft Digital Nervous System
![Page 18: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/18.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Microsoft Dynamic Network ArchitectureMicrosoft Dynamic Network Architecture
![Page 19: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/19.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 20: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/20.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Java applet with ORBJava applet with ORB
![Page 21: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/21.jpg)
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
![Page 22: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/22.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Advanced -- browser pluginsAdvanced -- browser plugins
• extend browser with arbitrary functionality• static• platform specific• C and C++
![Page 23: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/23.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
•Example - San Francisco Framework
![Page 24: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/24.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Education on the WebEducation on the Web
• Virtual Universities• Tele-learning• Education is changing …
see Building a Web-based Education System
![Page 25: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/25.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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 ...
![Page 26: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/26.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 27: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/27.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 28: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/28.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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 - ...
![Page 29: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/29.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 30: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/30.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 31: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/31.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 32: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/32.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Technical supportTechnical support
• server software and hardware• network infra structure• training in the use of technology• problems and questions - helpdesk
![Page 33: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/33.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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.
![Page 34: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/34.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Navigation structuresNavigation structures
• hierarchical - like a book, ...• sequential - as a guided tour• hypermedia - structural and associative links
![Page 35: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/35.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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 36: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/36.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Page typesPage types
• Home page• index pages• content pages• study guide pages• lectures - presentation pages
Technological limitations• speed, resolution, colors, multimedia
![Page 37: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/37.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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)
![Page 38: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/38.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Visual Editors and Site ManagersVisual Editors and Site Managers
• WYSIWYG, page upload, link repair• Adobe Site/Page Mill, NetObject Fusion,
SoftQuad HotMetal, MS Frontpage
![Page 39: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/39.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Hypermedia ToolsHypermedia Tools
• Asymetrix Toolbook, Macromedia Director and Authorware
• authoring, multimedia and synchronisation, navigation
• platform-dependent - plugins
![Page 40: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/40.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 41: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/41.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 42: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/42.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Web Application Development SupportWeb Application Development Support
• structure• behavior• navigation• presentation
... orthogonal features, with peer dignity
![Page 43: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/43.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Enabling communication - educationEnabling communication - education
• decreasing sense of isolation• increasing flexibility• increasing variety• increasing communication experience• enabling variety of pedagogy
![Page 44: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/44.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Forms of communicationForms of communication
• asynchronous - email, news, ftp, http• synchronous - IRC, MUD/MOO, chat• face-to-face - audio/video conferencing
![Page 45: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/45.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Communication Tools (1)Communication Tools (1)
• email - threading, filters, MIME, ..., search• mailing list - majordomo• Web/email-news Gateway - MHonArc
(archives)• news readers • conferencing - …
![Page 46: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/46.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 47: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/47.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Concept Planning and DevelopmentConcept Planning and Development
• Questions to ask yourself• Issues in concept development• Development steps• Site metaphors
taken from Creating Internet Entertainment
![Page 48: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/48.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 49: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/49.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 50: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/50.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Development StepsDevelopment 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
![Page 51: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/51.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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)
![Page 52: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/52.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
• Ontologies - metadata• Technology - clients, servers• Applications - ... more than chat?• Research issues - agents above and beyond
Virtual OrganisationsVirtual Organisations
![Page 53: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/53.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 54: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/54.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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
![Page 55: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/55.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Case StudiesCase Studies
• Navigation Structures in Tutorials• Hypermedia Support for Software Engineering
![Page 56: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/56.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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?
![Page 57: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/57.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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.
![Page 58: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/58.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
Course MaterialCourse 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.
![Page 59: vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie Web Applications Anton Eliëns Vrije Universiteit, Amsterdam 30 maart 1999 eliens/cmg](https://reader036.vdocuments.us/reader036/viewer/2022062417/551a746d550346545e8b6216/html5/thumbnails/59.jpg)
vrije Universiteit amsterdamPostacademische Cursus Informatie Technologie
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