Presentation on theme: "Testing and Debugging Web pages. Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple."— Presentation transcript:
Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple choices (both database and web pages) SQL: similar to midterm HTML: develop 2 simple HTML pages sketch the result given HTML codes
Validating your Code Validating HTML and CSS: - To perfect a web page before publishing it - What a validator does: use DOCTYPE to compare our code against the actual specifications of that version. Note: Insert DOCTYPE into your HTML document <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Validating your Code Step 1: Checking HTML code with W3C: http://validator.w3.org Step 2: Checking you CSS code with: http://jigsaw.w3.org/css-validator
Common problems HTML code Misspell HTML tags Mismatched nesting, mismatched tags Avoid non-standard tags CSS code Separate properties from values with : Complete each property:value pair with ; Use accepted values Link to CSS from HTML correctly
Testing HTML pages Step 1: Validate the web page first Step 2: Open your main page from one browser, (e.g IE) Step 3: Testing: format, links, CSS, images, consistency Step 4: Upload your page to a web server. Open corresponding URL Step 5: Check with different browsers (Netscape, FireFox)
How to design a good Web site - DO Get to know your audience and design for them—not for yourself or your colleagues Example: senior audience: increase type size. Make sure your text isn't isn't too small and difficult to read. male audience, you have to think about color-blindness. teen audience: less text and more graphics (including Flash content). if your audience is single, put a special offer on the front page of the site. if they are married and always buying things “on sale”, make the special offer a reduced-price special offer.
How to design a good Web site - DO Usability testing: Test your site with inexperienced web users 5 users rule Test early and test often. Fixing things at the beginning of the design process will be five to ten times less time-consuming than redesigning a website after production. Qualitative or quantitative usability testing: questionnaires, interview, video tape..
How to design a good Web site - DO Make the content on your first page rich and explanatory: Create a very simple, easy-to-understand navigation system that doesn't take up too much space. Make sure your user has a way to search the site. Make the title of the page explanatory. At the top of the first page, add a one sentence that summarizes what the user will find in the site. It is informative, short and sweet.
How to design a good Web site - DO Archive content after redesigning or changing a site: keep an archive and make sure that people can find links to the archive from the places they would be looking for the original information. Include useful search terms in meta tags and titles: Meta tags help with indexing and searching your site. There are two meta tags that you certainly should be using: description and keywords.
How to design a good Web site - DO Provide contact and copyright information on every page Set up your navigation system to help users find what they are looking for Provide search options
How to design a good Web site - DO Maintain consistency of design Think about noise, movement, or anything that spins twice... no, wait... three times Proofread the text on your sites
Top Ten Mistakes in Web Design (Jakob Nielsen)Jakob Nielsen 1. Bad Search 2. PDF Files for Online Reading 3. Not Changing the Color of Visited Links 4. Non-Scannable Text 5. Fixed Font Size
Top Ten Mistakes in Web Design (Jakob Nielsen)Jakob Nielsen 6. Page Titles With Low Search Engine Visibility 7. Anything That Looks Like an Advertisement 8. Violating Design Conventions Consistency 9. Opening New Browser Windows 10. Not Answering Users' Questions