Multimedia & Interface Design

1. Multimedia &Interface Design JMA 308/545 TTH 4:30 – 5:45 College Hall 205

2. JMA 308/545 - Instructor • Dr. Bill Gibbs • Associate Professor in Journalism & Multimedia Arts. • Ph.D. in Instructional Systems from The Pennsylvania State University. • Office 316 College Hall • Office hours – MW 11:00 – 2:30 and by appointment • Phone – 412 - 396-1310 • E-mail – gibbsw@duq.edu

3. JMA 308/545 - Topics • Introduce Interface Design (ID) • Interface design for the Web • User-centered design • Usability testing

4. JMA 308/545 – Course goals • Review current terms and concepts related to ID. • Discuss general ID guidelines and theories. • Demonstrate general principles underlying effective screen design and navigation control.

5. JMA 308/545 – Course goals • Prototype designs using development tools. • Design, development and evaluate a Web site and associated interactions based on ID principles. • Perform usability tests.(Ex1) (Ex2) (Ex3)(Ex4)(EX5)

6. JMA 308/545 – Applications & Tools The course focuses on Web interface design and usability testing.

7. What is this device and how do you used it? Does the device tell you anything about how to use it?

8. Attaches to something? For gripping? For pushing? Clues about how to use it For writing? Also, conventions

9. What clues are here?

10. Most important? What’s here? Additional stuff?

11. Current offering? What’s here? Additional stuff?

13. Let’s look at a couple sites • http://www.sonicdrivein.com/home.jsp#/home • http://www.staples.com

14. JMA 308/545 – Applications & Tools • We will use: • Dreamweaver • Morae • Others…

15. JMA 308/545 – Applications & Tools • In class we will work with authoring tools (e.g., Dreamweaver) to create interfaces. • We may also use other applications.

16. JMA 308/545 - Assignments • Interface design activities - approximately 4 • Client interface usability study (Group) • Final project & documentation • Project presentation • Pilot study (graduate students only)

17. JMA 308/545 - Assignments Points assigned to each project

18. JMA 308/545 - Assignments • Due at end of day. • Late assignments receive a 10% per class penalty up to a maximum of 30%.

19. JMA 308/545 – You’ll may need Blank discs or Flash drive labeled with your name and contact information. You should have access to e-mail and a Web browser – outside of class.

20. JMA 308/545 – E-mailing E-mailing assignments. Make sure I have your correct address.

21. JMA 308/545– E-mailing • E-mailing assignments/attachments. • Must have your name • E-mail address • Title of assignment • Label subject of e-mail

22. JMA 308/545 – Class Web Site • Web site http://www.jma.duq.edu/classes/gibbs/jma308/index.htm • Media Site Live • Room 205 Access

23. JMA 308/545 – Before you go… • Log into computer • Check accounts • Biographical sheet

24. User Name and Password • To connect to our servers from within either of our two labs (205 or 345): • Ctrl-Alt-Delete • Username: YourLastName • PW: Given in class • You will be asked to change your password the first time you login

25. User Name and Password • 8 characters or more • 1 UPPERCASE character • 1 number • 1 Special character ($, &) – no spaces Duquesne$07

26. Our Server www.jma.duq.edu • Your private folder • It’s a subfolder of users folder • www.jma.duq.edu/users/YourLoginName • Save files (drag and drop files) while in either lab (CH205, CH345) • You can also FTP to there from home…

27. How do I access the server? From dorm or home ftp://www.jma.duq.edu/users/YourLastName • Example: ftp://www.jma.duq.edu/users/gibbs/ • You will be prompted for your user name and password • Use the same name and password you used to login to Windows

28. How do I access the server? • You will be prompted for your user name and password – jma/username

29. How do I access the server? • Folders and files display • Transfer (put) files from your computer, • Download (get) files to your computer.

30. How do I access the server? • Your folder on server has a child folder named pub • Inside that folder you should create a folder for each course that requires a web site • In this course, create a sub folder named JMA308

31. The PUB folder • You might create subfolders, for each course. • Double-click on pub • Right-click on any unused white area

32. The PUB folder • Create new folder • Name it your course name

33. Web URL • The URL to your website(s) depend on how you structured your home folder • Using earlier example http://www.jma.duq.edu/users/gibbs/pub/JMA308/FileName.htm • Assuming your file name is default.htm, or index.htm in the jma308 folder the address would be: http://www.jma.duq.edu/users/gibbs/pub/jma308/index.htm

34. How do I access the server? • Access from either CH345 and CH205 \\jma1\users\username • While in class, feel free to save to the net folder

35. PUB www.jma.duq.edu Your Space User folder Folder Folder File File Folder File File

36. PUB www.jma.duq.edu Your Space User folder All files for the Web must be in PUB Folder Folder File File Folder File File

37. File Extensions

38. File Extensions • Windows-based computers vs. Mac • Index.htm File Extension File Name

39. Turning File Extensions on in Windows • Folder Options>>View>>uncheck Hide Extensions for know file types