Week 14 slides
Download
Report
Transcript Week 14 slides
Testing and Debugging Web
pages
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)
1.
2.
3.
4.
5.
Bad Search
PDF Files for Online Reading
Not Changing the Color of Visited Links
Non-Scannable Text
Fixed Font Size
Top Ten Mistakes in Web Design
(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