1. Multimedia & The World Wide Web winny HCI 201 Multimedia and the www

2. Review! winny HCI 201 Multimedia and the www

3. URL: Universal Resource Locator Four parts to each one (some parts optional) –Protocol –Domain name or server IP address –Director(ies) –File name http://facweb.cs.depaul.edu/yqwang/index.htm ProtocolDomain NameDirectoryFile Name winny HCI 201 Multimedia and the www

4. HTML Skeleton Title of this web page Stuff you want to present on this page winny HCI 201 Multimedia and the www

5. The Flesh on an HTML document Tags + Contents + Comments Comments Contents - Text (included) - Multimedia obj & pictures are linked winny HCI 201 Multimedia and the www

6. Tools for the Web Designer An editor –Text editor –Dreamweaver/FrontPage, etc A browser –Not really necessary, but you want to test your work A connection to the Internet and access to a web server. winny HCI 201 Multimedia and the www

7. Controlling page layout with tables Separate pages into different sections - Create one table for the entire page. - Add content into cells: Text Images Forms Tables … Link list Company logo Image winny HCI 201 Multimedia and the www

8. Nesting Tables winny HCI 201 Multimedia and the www

9. Nesting Tables winny HCI 201 Multimedia and the www

10. Organization and Site Structure Organizing your site carefully from the start can save you frustration and time later on Break down your site into categories and put related pages in the same folder winny HCI 201 Multimedia and the www

11. Your local files structure Lab machine Define site! winny HCI 201 Multimedia and the www

12. Your directory structure lab machine winny HCI 201 Multimedia and the www DePaul Student Server public_html web folder

13. Your directory structure mail your account (root) winny HCI 201 Multimedia and the www

14.  Root  Main Page  Company Services  Service A  Service B  Images  Products  Product A  Product B  Images  ProductA.jpg  ProductB.jpg  About Us  Company History  Bios  Images  Contact  Images  Photo1.jpg  Logo.gif A More Elaborate Site winny HCI 201 Multimedia and the www

15. Source File Management You should... –Establish and follow file naming conventions Lowercase Underscore between words –Keep a copy of all source files in your possession Don't rely on DePaul, your employer, or your ISP to keep your work winny HCI 201 Multimedia and the www

16. Source File Management You should... –Make a working copy of files before making sweeping changes, then use the working copy once you are sure everything works –Create an archive of sources that you are not actively using, but may want to use sometime winny HCI 201 Multimedia and the www

17. Error Checking ALWAYS check and double-check the site for spelling and grammatical errors Make sure the images and links are all working properly (TEST!!!) Errors make a site appear to be unprofessional winny HCI 201 Multimedia and the www

18. Troubleshooting Make sure you refresh your browser if you have made a repair to the code and come back to look at it again winny HCI 201 Multimedia and the www

19. Before you start it is important to determine what the site will look like and how it will be organized! winny HCI 201 Multimedia and the www

20. Content matters most! Prepare it as much as possible, as early as possible. What content already exists and what must be created? How often does the content change, or should it change? What resources are required to create and maintain the site? winny HCI 201 Multimedia and the www

21. Content Brainstorm ideas for your website! Organize the content into clear and intuitive categories. What’s the navigational structure – roadmap? winny HCI 201 Multimedia and the www

22. Make the content readable Good combinations for web page Bad combinations for web page Blue on WhiteYellow on Black White on GrayRed on Pink Yellow on WhiteBlue on Purple Red on GreenGreen on Orange winny HCI 201 Multimedia and the www

23. Content to prepare: Images –Logos –Products –Decorative –Navigational Information –Articles –News –Calendar of events –Contact names and numbers –Reference material winny HCI 201 Multimedia and the www

24. Page Design –Style: What's the overall impression you're trying to create? –Layout: Will the page composition be conventional or unconventional? How will the different elements be arranged into visual groupings? How will the navigation options be presented? –Words: Which tone of voice is best for the site's purpose and audience? Page design ideas should first be sketched out on paper. Working out your ideas on paper allows you to quickly explore different design ideas winny HCI 201 Multimedia and the www

25. Web Design The heart of design is communication. The basic rule for any design is “Form follows function.” Design must support function to the fullest extent possible. Think of web site navigation. The coordination between form and function is invisible to the user when done well and painfully obvious when it is not. winny HCI 201 Multimedia and the www

26. Page content hierarchies Most important elements should be at the top/left of the page Consider monitor size/resolution Left to right winny HCI 201 Multimedia and the www

27. Page Design– make decision Shape as a design Element: –Square/round/wavy? Choose a set of color palette Keep those decision consistency Visual design should reflect –The purpose of the site –The identity of the Web site sponsor –And contribute to the site's usability winny HCI 201 Multimedia and the www

28. winny HCI 201 Multimedia and the www

29. Unity winny HCI 201 Multimedia and the www

30. Direction winny HCI 201 Multimedia and the www

31. winny HCI 201 Multimedia and the www Direction

32. winny HCI 201 Multimedia and the www Color-> feeling, some samples:

33. winny HCI 201 Multimedia and the www

34. winny HCI 201 Multimedia and the www

35. winny HCI 201 Multimedia and the www

36. winny HCI 201 Multimedia and the www

37. winny HCI 201 Multimedia and the www

38. Then, make decision: Functionality –Static pages –Forms –Commerce –Multimedia –Chat –Search –Login –Database-driven winny HCI 201 Multimedia and the www

39. Flowcharting Try arranging your content in different ways to find the best fit, should information be –Presented alphabetically? –Grouped into categories? –Presented along a timeline? –Sorted from simple to complex? –Organized into a hierarchy? With these things in mind, you can construct a flowchart showing the structure of the Web site as a whole A good flowchart of your site design shows -- How pages will be organized -- & the paths between pages winny HCI 201 Multimedia and the www

40. Design Most people visit Websites to find information or to accomplish some task –The content of the site should be organized in a way that is meaningful and useful to the intended audience Users need a logical structure so they know where they are and how they get there It is important to anticipate what the user will want to do, how he or she will use each section of the site, and in what order winny HCI 201 Multimedia and the www

41. Web Aesthetics Speed –Do more with less –Use images sparingly –Select the most suitable image format (jpeg/gif/png) –The more high-bandwidth media you use, the more you will limit your audience winny HCI 201 Multimedia and the www

42. Navigation Most people ask four basic questions when they are getting around (anything).. –Where am I? –Where can I go? –How will I get there? –How can I get back to where I once was? winny HCI 201 Multimedia and the www

43. Navigation Navigation that really works should... –Be easily learned –Remain consistent –Provide feedback –Appear in context –Offer alternatives –Communicate the site hierarchy –Provide clear visual messages –Be appropriate to the site's purpose –Support users' goals and behaviors winny HCI 201 Multimedia and the www