Entertainment on the Web

Anton Eliens

Basic Technology• HTML, HTTP, MIME

• client / server architecture

• client-side extensions

• server-side extensions

see Glossary Web Terminology and Web Consortium (W3C)

Client-side Technology

• Style sheets (CSS)• Document Object Model• Math, Graphics - XML• Applets - Java• Helper Applications -- audio, …• Plug-ins - audio, video, animation, VR• Dynamic HTML - Javascript• ActiveX - from Visual basic to ... Java

Web Applications

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

Managing Content (in the ObjectWeb)

Netscape Enterprise Server

Microsoft Digital Nervous System

Microsoft Dynamic Network Architecture

Java applet with ORB

•Example - San Francisco Framework

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

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.

Navigation structures

• hierarchical - like a book, ...

• sequential - as a guided tour

• hypermedia - structural and associative links

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

Page types

• Home page

• index pages

• content pages

• study guide pages

• lectures - presentation pages

Technological limitations• speed, resolution, colors, multimedia

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)

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?

Development Steps1. 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,…

7. Maintenance and upgrades - personnel

8. Expansion options - programming / administration

9. Appendix - flowchart and demographics

10. Business plan - funding and marketing

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)

Practicum Entertainment

• Stuur een multimedia briefkaart

• Vertel mee aan een verhaal

• Kijk rond op een Web-site

Maak een mooie tekeningMaak een animatieCreeer een 3D wereld

Vermaak jezelf in 3DBezoek een virtuele gemeenschapMaak een praatje en dans

Op het Web

Virtuele Werelden

Creatief

http://www.wdvl.com -- Web Developers Virtual Library http://www.werbach.com/web/web.html -- Web Resources http://www.paragraph.com -- MorphInk http://www.blaxxun.com -- Blaxxun Contact 4.0 http://www.macromedia.com -- Shockwave plugin en Flash 3 Demo http://www.ligos.com -- V-Realm Builder (Demo) http://www.activeworlds.com -- Active Worlds http://www.totallyhip.com -- Web Painter http://www.cosmosoftware.com -- CosmoWorlds http://www.satoripaint.com -- Satori Paint Programs http://www.download.com -- various downloads http://www.thefreesite.com -- more free stuff

Software -- downloads