Transcript Lesson 8 - Seneca - School of Information & Communications

Lesson 8
Test 1
Topics
•
•
•
•
•
•
•
•
•
•
Browser incompatibility
Design Tips
Site Navigation
Browser- safe color
Monitor resolution
Content
Copyright
Use of tables vs. Frames
Orphan Pages
Outdated Information & site maintenance
Different Browsers
•
Browsers are translators. Two translators may get the same meaning
across by will use different words and sentences.
•
Although the ground rules for this translation has been defined by the W3C,
different companies implement some of these rules in different ways.
There is no universal support for the latest HTML/XHTML tags and you
could be building your pages with parts of the language that not all browsers
understand. In that case the browser will ignore that part of your page it
can't translate, and the way your page displays will be affected.
Browsers
There are four players in this equation:
• The W3C
• Browser vendors
• Web developers
• End users
Browser Incompatibility is a problem. Stylesheets and fonts are a good
example. If you set a font size, it's going to vary from browser to browser.
•
•
•
No major browser supports the standard specifications 100%
Explorer  75%
Netscape  25%
Browsers and New Versions
If you are using CSS (Cascading Style Sheets) then limit yourself to
tags that both Netscape and Explorer support.
The problems related to the different Browser Versions
Remember that a significant minority of people do not move to the
newer browsers and still use the previous version
Browser Bugs
•
Many times early editions were rushed out the door to beat the competitor
to market it
•
Good advice is to avoid the Cutting Edge
•
Validate your pages
Resolution
•
If you don't test your pages using different screen resolutions, your page
may be stretched to fit a large screen, or be cropped to fit a small screen.
•
If you use HTML tables to control your page layout and you design these
pages on large, 1024x768 pixel screens then some user will have a
problem.
•
When these pages are displayed on smaller computer screens, the browser
may not be able to fit all the content onto the screen. In these cases, the
content will scroll of the right of the page. While this may not sound like
much of a problem, users hate scrolling left and right to view a page.
•
Remember that the standard PC computer screen is 800-pixels.
Design Tips
•
Keep It Simple
•
Communicate effectively (& Use technology wisely)
•
Understand your audience
•
Remember the rule of five (selections or less)
•
Make information no more than three clicks away.
•
it should take less than 30 seconds for a reader to load your page and be
able to decide what to do next
•
Proofread it. If it is online it is even more important to do it.
•
Balance between text vs graphics, download time vs page content.
•
Don't overuse features such as frames and check out the great sites
Site Navigation
•
This is your road map
•
Types of navigation
– Hierarchical applies to sites that are information-rich and are best
organized as a large tree, much like a library.
– Global applies to sites where you can easily and logically jump among all
points; this is best if you are presenting information in fewer, broader
categories.
– Local navigation sits somewhere in between. This applies when you
have depth of information within broader areas.
•
Frames are used to build Web pages that have more than one "window
frame“ open in your Web browsing software
Monitor resolution
•
Resolution is the sharpness and clarity of an image
•
The screen monitor resolution signifies the number of dots (pixels) on the
entire screen.
If you build a web page with your monitor resolution set to 1024x768, it
will look fine to you and anyone that browses at that resolution. But the
person who views your page at a 800x600 or 640x480 resolution will
have to scroll sideways in order to view the entire page.
Life would be much easier if you all had
– The same computer type
– The same type of monitors
– The same browser and browser version
– The same . . . . .
No. Life would be boring !!!!
Frames vs. Tables
• Frames are used to build Web pages that have more than one
"window frame“ open in your Web browsing software
• W3C :
– Frames divide a browser window into two or more document
windows, each displaying a different document, or a different part
of the same document
• Problems in bookmarking, printing, clicking, etc.
Orphan Pages
• HTML pages that have no Hyperlinks.
• Make links on every page that return users to the
master page with its table of contents.
• “Orphan" pages can be confusing if a Web surfer
bypasses your home page and hits one of your
secondary pages directly
site maintenance
• Your Web Site will require continual maintenance. You will have to
update the information on your site with fresh and up to date content
• Make sure that all the links are functional, and keep current with
changes in information related to the content of your site.
Test 1
•
Refer to the course web page
– Topics covered so far
– Notes for each topic
•
•
Refer to the class notes
Read the related topics from the textbook
•
Format
– Closed book. No aids allowed
– One line question answer
– Write XHTML code excerpts that does something
• A very small task (one or two lines)
• A detailed task (more than two lines)
– Short answer
Image mapping
• imagemapping is a technique that makes it is possible to make one
image link to several pages, depending on where the image is
clicked.
• You simply specify which areas of the image should link to where.
• In the above example we only used rectangular imagemappings.
Possible shapes are:
•
•
<area shape=rect coords= x1,y1, x2,y2
Href="http://www.domain.com">
•
•
<area shape=circle coords= x1,y1, x2,y2
Href="http://www.domain.com">
•
•
<area shape=polygon coords= x1,y1, x2,y2, .., xn,yn
Href="http://www.domain.com">