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 No major browser supports the standard specifications 100% Explorer  75% Netscape  25% 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.

Browsers and New Versions 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 If you are using CSS (Cascading Style Sheets) then limit yourself to tags that both Netscape and Explorer support.

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. No. Life would be boring !!!! 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.....

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=" <area shape=circle coords= x1,y1, x2,y2 Href=" <area shape=polygon coords= x1,y1, x2,y2,.., xn,yn Href="