Introduction to Interactivity for the Web

1. Introduction to Interactivity for the Web Ian Graham Tel: 978.4548 Email: ian.graham@utoronto.ca Web: www.utoronto.ca/ian/talks/

2. What is Interactivity? • Two facets: • Interactivity between person and machine • Interactivity between people • This talk focuses on the first of these facets

3. Presentation Overview • Description of types of interactivity • Some examples to illustrate types • Questions are encouraged always, at any time, about anything • Lunchtime seminar means…. Have lunch!

4. Interactivity and the Web • Two ways to interact with the Web • Locally -- Interact with your browser • Globally/Remotely -- Interact with something out there • Both have strengths and weaknesses and overlap

5. Simplest: Web Browsing • The standard way we use the Web: • Click on a hypertext link: browser goes out and retrieve a file from somewhere else, and displays it. • Initially the only type of interactivity

6. 1. Web Browsing • It is a static interactivity • Sequences are fixed when pages are written • Viewer may choose different paths, but the pages are always the same

7. Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Browsing and Web Pages Web Server Web Browser HTML/Web pages Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f Internet E.g: http://www.utoronto.ca

8. Web Browsing • Interactivity can be either remote, or local • Remote -- pages are on a Web server • Local -- pages are on a local drive, or CD-ROM • Either is fine, if the information is static

9. Web Browsing advantages • It works for everyone • Can be local, or remote • Can distribute any type of data file (HTML, Word documents, PowerPoint, etc.) • Requires that the person visiting can read these data types • But not terribly interactive.....

10. 2. Software on the Server • Interact with software on the Web server • HTML forms, clickable images • Information sent to server, for processing • Server sends back results, based on information sent. • Not static -- response depends on choices, different for each user

11. Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Server Software Web Server Gateway Program database Web Browser ??? Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f Internet

12. Server Software • Often called CGI programs, or Gateway programs. • Gateway between the Web server and “something else”

13. Example Server Programs • http://www.altavista.com("BeaujolaisNouveau") • http://xxx.lanl.gov/find/cond-mat ( Database search tool)

14. Server Interaction • Interact with complex programs • Dynamically generated HTML pages • Hides resources from user • harder to cheat! • Not local -- needs Web server

15. Browser Interaction • Several approaches • Scripts in pages -- JavaScript • Plugin modules • Embedded Java programs

16. Scripting Interaction • Small “script” programs, part of the HTML document, that respond to what the user types in. • Basic interactions supported: • interact with images, hypertext links, forms

17. Scripting Examples • http://library.utoronto.ca • http://www.microsoft.com • Advanced Scripting Informationhttp://developer.netscape.com/tech/javascript/index.html?content=/docs/examples/javascript.htmlhttp://msdn.microsoft.com/workshop/author/?RLD=70

18. Scripting Advantages • Local interaction • Does not need Internet • Does not depend on network speed • Disadvantages • Local interaction • Transparent to reader (can cheat, if know how)

19. Current Scripting Issues • Netscape / Microsoft Incompatibility • Use two different ways of programming complex scripts • “universal” scripts hard, if not impossible • New standards will help a lot

20. Browser Plugins • Special program to interpret data • Embedded/installed on user’s computer • Special formats otherwise not viewable • Allows dynamic interaction with those data • Examples: • http://www.utoronto.ca/ian/books/html4ed/chap2/embed.html • http://www.musicface.com

21. Plugin Advantages • Can process/interact with different data • Streaming Audio/video • Multimedia presentations • Spreadsheet data, Virtual Reality • Problems • Must install the plugin on all machines

22. Java Programs • A bit like plugins, but actually mobile programs • Download the program, run it locally • Java language makes this safe

23. Some Java Examples • Instructional Tools http://www.dgp.utoronto.ca/people/JamesStewart/applets/ • Pure Toyshttp://www.litecom.se/java/rollerboy/

24. Applets -- Plus/Minuses • Run locally, and can be downloaded • Can be distributed on CD-ROMS • Can be slow to download, or to run • Java compatibility problems

25. Mixed-Mode Interactivity • JavaScript can interact with Java applets • Java programs can interact with a remote server • Java/JavaScript can interact with plugins

26. Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd fdsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Sd f dsa as dfsa asdf asd asd asd asdfasd asd t asdf asfd as asdf Multiple Interaction Levels Web Server Browser Gateway Program database JavaScript ??? text Java Applet form Other program

27. Summary • Interactivity on the Browser • Script programs (JavaScript) • Embedded plugins/objects • Java applets • Interactivity on the Server • Server programs, interacting with browser user input mechanisms

28. Summary (2) • Client interactivity can interact with server • Increased range of interaction possibilities • More difficult to do, fewer canned tools

29. Introduction to Interactivity for the Web The End Ian Graham Tel: 978.4548 Email: ian.graham@utoronto.ca Web: www.utoronto.ca/ian/talks/