Welcome to @!$h@s Free CodeWorld
 
 
  free books Search
Google
 
  free books Source Code
 
  free books FAQs
 
  free books Articles
 
    Personal
 
  free books Resources
 
   Windows Tips & Tricks
 
   Dot Net Section
 
   About Myself

I am a B.E in Information Technology form Lingaya's Institute of Management and Technology Faridabad, India.

I have worked on VC++, MFC, ASP, ASP.NET ,Sql Server. Currently I am working on Visual C++ and MFC.

I made a free open source firewall for windows which can be find in MYProjects section.

I am currently working in Newgen Software Technology.

For any comments and suggestions Contact Me at :
Admin@ProgrammerWorld.NET

 
GUIDELINES FOR BROWSER INDEPENDENT AUTHORING

Please help in keeping this site Free


1.0 Purpose

Cross-platform and cross-browser support are very important to reach the largest possible audience and organizations want to link tightly to all their customers and suppliers over the internet.

This paper presents a set of suggested coding conventions/guidelines for browser independent authoring.

2.0 The Problem

Here are some of the key sources of difficulty:

  • No vendor has implemented every feature of many of the existing standards (e.g. HTML 4.0, CSS1, CSSP).
  • Standards often leave room for differences in interpretation and implementation.
  • Standards often include suggestions or recommendations which vendors are not required to comply with.
  • Standards often permit vendors to add enhancements not defined by the standards.
  • The standards definition and ratification process often lags behind the implementation of functionality by the vendors.

    The practical approach for building web applications is to study the standards, study each vendor's implementation, find the common functionality, and build on top of that.

3.0 General Design Guidelines

The following are some general guidelines to follow when designing your Web pages.

3.1 Prepare a chart of features to include on pages:Before authoring web pages, you should prepare a chart of features to be included the web pages (for example, tables, frames, controls), and map these against the browser support available for each feature.This exercise helps in identifying which browsers your site will not support. For example, if you're designing frames, you'll need to know which browsers don't support frames, and you'll need to provide a way for those browser users to view the content.

3.2 Review the code for syntax: All browsers do not deal with HTML syntax (i.e missing quotes or end-tags etc) errors in the same way.There may be situations when your browser is showing the content in the required format even though your HTML syntax is malformed. For example if you miss a closing quotation mark in your HREF statement, Internet Explorer will assume it's there, but Netscape Navigator will ignore the entire link specification

3.3 Provide a text option for Image Maps: If you're using a client-side image map, also include a server-side CGI script to accommodate browsers that don't support image maps. It's also important to add a text option so that readers who browse your site with images turned off can find the basic information.

3.4 Handling multiple browser versions:To accomodate users with different browser versions either you should code HTML to comply with the lowest common denominator or use use server-side scripting to check for browsers and redirect your users to pages customized for specific browsers automatically or by coding options for choosing paths respective to their browsers.

4.0 Links

Certain characters are reserved and can not be used in URLs without encoding (in hexidecimal format). Some browsers may handle some of these characters properly, but this does not indicate that these characters are safe to use without encoding in all browsers. For example, spaces are special characters that aren't allowed in URLs without encoding them to . Internet Explorer users will not catch this problem, but Netscape and many other browsers will, so you should be especially careful to encode these properly. In general, you should avoid the use of characters in your file or path names that may require encoding and you should always encode a character if there is some doubt as to whether it can be placed as it is in a URL. As a rule of thumb, any character other than a letter, number, or any of the characters $-_.+!*'(), should be encoded to their hexidecimal equivalents

5.0 Proper Graphics Usage

5.1 Using Colors on Web: Microsoft Windows Provide 256 different colors while Mac operating system supports only 216 colors out the windows 256 colors. To ensure that your graphics display correctly on all plateforms, you should use colors out of 216 colors avialable on all plateforms.

5.2 Use ALT attribute with IMG tags: Use the ALT parameter in your <IMG> statement to provide a text placeholder for the image; for example:

<IMG SRC="home.gif" ALT="Click here to go to home">

ALT tags have two advantages:

The browser will load the text first, so readers can start reading while they're waiting for the full graphic.
You can provide information to readers who are browsing with graphics turned off.
5.3 Using Image Maps: Make sure that text navigation links or a textual site map is available to make the entire site available to users without images.Using textual navigation or separate graphics may be a viable alternative to using image maps entirely. Indicate in the ALT text for any image mapped graphic that it is an image map
You can provide both a server side and a client side image map, and you should do so whenever possible, since some browsers only support one or the other. You can do this by including both the ISMAP and USEMAP attributes in the image which you are using for your image map

5.4 Include WIDTH and HEIGHT attributes with <IMG> tag: Some browser formats the page with text first and adds the graphics later. If you don't specify the size of your graphic, the browser will have to reformat your page when it downloads the graphic. This results in an annoying screen flicker. If you specify WIDTH and HEIGHT then most of the browsers will reserve that much space for the image to be downloaded and screen flicker is avoided.

5.5 Specifying Colors: Use the hexadecimal color codes (such as "#FF0000"), and not the names of the colors (such as "red"), as some browsers don't support the color names.

5.6 Screen resolution: If you're targeting a more general audience, stick with designing for an 640x480 resolution screen for your web pages.

6.0 Proper Table Usage

6.1 Using nested tables:Some browsers (for example, Mosaic) give some problems in case of nested tables. So you should be careful while using nested tables.

6.2 Lay out text and images before adding table tags: You can ensure that your table data is complete and in the right order if you finalize the table text before you add the formatting tags. This method may also help you realize that you didn't need a table to present the information after all. Use tables for data, which is what they were meant for, not for layout.

6.3 Avoid specifying sizes in <TD> tags: Fonts and sizes may be different on readers' systems, so specific <TD> size parameters can result in truncated text.

6.4 Using color attribute with <TD>: Many browsers don't support cell background colors, so if you're using this feature, choose your colors cautiously. For example, white text on a black background will display correctly with Internet Explorer, but will disappear (because it will appear white on white ) in Netscape Navigator 2.0 as table background feature is not available there.So if you're using color in your tables, choose light backgrounds and dark text.

7.0 Proper Frame Usage

If possible avoid frames in the first place. Most of the features of frames can be made available by proper usage of other HTML tags like table. The main problem with frames is that when a user is viewing a page with frames on a browser which does not support frames, then only a blank page gets displayed. This might confuse the user.To avoid this problem use the tag <NOFRAMES> to display information to the user.

For example the following code will work perfectly in a browser which supports frames
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" name="left" >
<FRAME SRC="page2.htm" name="right" >
</FRAMESET>
</HEAD>

But in a browser which does not support frames only a blank page will be displayed .Instead if the following code is used then the user at least gets the message "Your browser does not support frames!".
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" NAME="left" >
<FRAME SRC="page2.htm" NAME="right" >
</FRAMESET>
<NOFRAMES>Your browser does not support frames!</NOFRAMES>
</HEAD>

In some browsers like Netscape once the <BODY> tag has been encountered in a document, the browser assumed this is a normal Web document, and would then ignore any <FRAMESET> definitions.

This meant that the following HTML

<HTML>
<BODY BACKGROUND="clouds.jpg">
<FRAMESET cols="150,*">
<FRAME SRC="links.html" NAME="links">
<FRAME SRC="content.html" NAME="content">
</FRAMESET>
</BODY>
</HTML>

would produce a perfectly valid page using some browsers. However, if this page were viewed with either Internet Explorer 4.0 or Navigator, only the cloud background image would be displayed. To make the page work properly in those browsers, you would need to move the <BODY> description below the <FRAMESET> description.

8.0 Using The <OBJECT> Tag

Cover all your bases. You can support multiple browsers simply by adding complementary HTML tags to your <OBJECT> statements.

Here's your typical <OBJECT> tag for placing an object (in this case, a Shockwave control) on your page:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT= 100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
</OBJECT>

Some browsers will display it and will download the control if it isn't already on the system. Other browsers, however, do not understand the <OBJECT> tag and will not know what to do with this syntax.

A better approach would be to use:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE= "my_movie.dcr">
<EMBED SRC= "my_movie.dcr" ALT= "CoolShockwave Movie" WIDTH=100 HEIGHT= 100>
</EMBED>

</OBJECT>


The <EMBED> tag we've added above allows browsers that don't support <OBJECT> to find and display the Shockwave control.
For browsers that don't support either tag (for example, Apple browsers) you can add a <NOEMBED> tag with a replacement for the control (for example, an image that illustrates the control) :

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<EMBED SRC="my_movie.dcr" ALT="Cool Shockwave Movie" WIDTH=100 HEIGHT=100>
</EMBED>
<NOEMBED>
<IMG SRC="my_image.gif" ALT="Cool Shockwave Movie" WIDTH=100 HEIGHT=100>
</NOEMBED>

</OBJECT>

If you have a Java applet that performs the same functionality as the Shockwave control, here's how you can provide access to it:

<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000" CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<APPLET CODE="my_applet" WIDTH=100 HEIGHT=100>
<IMG SRC="my_applet.gif" ALT="Cool Java applet" WIDTH=100 HEIGHT=100>
</APPLET>

</OBJECT>

Again, the IMG statement provides a static image to be displayed in browsers that support neither objects nor applets.

Thus if any other tag can be used to perform even part of the functions that the object tag does then it is advisible to use other tags along with the object tag.

9.0 Using Scripting

9.1 Java is not entirely stable on some platforms:Keep this in mind before you add Java code to your pages, and be sure to test your code on various browsers (see Testing your pages).

9.2 Some Browsers do not support scripting: For example, the AOL browser does not support Visual Basic Scripting Edition (VBScript) or JavaScript, so try not to make it mandatory for viewing your site. Make sure that your site functions (at least at some level) without the scripting code.

9.3 Declare your scripting language. If you don't specify the scripting language you're using in the <SCRIPT> tag, for example:

<SCRIPT LANGUAGE="VBScript"> ... </SCRIPT>

the browser will assume the default language set for the browser. Since scripting languages use different syntax, you may end up with scripting errors.

9.4 Use comment tags. Delimit your script with comment tags:

<SCRIPT LANGUAGE="VBScript"> <!-- ... --> </SCRIPT>

Otherwise, your script will be displayed as text in browsers that don't support the <SCRIPT> tag, and Netscape Navigator will attempt to read the code as JavaScript, resulting in syntax errors.

10.0 Style Sheets

One way to deal with cross-platform, cross-browser issues is to provide a plain, default style sheet for all browsers that doesn't specify font sizes or any of the more elaborate attributes. Then you can use scripting to find out which browser the user is using and then serve to that browser a different, more elaborate style sheet which will be compatible to it.

11.0 Testing Your Pages

Finally, test your Web pages using as many browsers as possible, especially:

  • Internet Explorer
  • Netscape Navigator
  • Mosaic
  • Lynx

Mosaic provides a good "safety" test -- if your pages work in Mosaic, they're likely to work in the majority of browsers. Lynx is a text-only browser, so it allows you to ensure that your site works with graphics turned off.

12.0 Practical Considerations (Source: Project VWO)

  • Netscape Navigator 3.0 understands the SIZE and COLOR attributes of the tag but it doesn’t understand the FACE attribute, where as IE does. E.g. <FONT face=’Arial’>Hello! </FONT> . FACE holds the font name. Thus a generalized solution is use cascading styles to change fonts. E.g. H1 {font-style: italic; font-size: 24pt; font-family: Arial; Background: yellow}
  • The <BLINK> tag is only supported by Netscape and Not by IE.
  • To display all the special characters, the code like ∓nbsp; ∓lt; ∓gt; etc.. should be written in lowercase so that Netscape is able to interpret correctly.
  • The attribute BORDER of <IMG> tag has different effect when used in Netscape and IE. When used with Netscape it displays black border around an image but with IE it creates a transparent border around the image. It is best to use the HSPACE and VSPACE attributes of the <IMG> tag.
  • The value for ALIGN attribute for the tag <IMG> can be top, middle, bottom, left, right. IE does not support any other value.
  • Do not use the TEXTAREA attribute of the <INPUT> tag instead use the <TEXTAREA> tag for compatibility with most of browsers.
  • Do not use WRAP attribute of the <TEXTAREA> tag. It is not supported in IE. But if one does not uses wrap in text area, in Netscape the text does not get wrapped. So the best thing is use wrap=Virtual, it makes text wrapped in Netscape and in Internet Explorer it is ignored.
  • Do not use the feature of Creating File Upload Buttons. It is a feature to browse through the File System. IE does not support it.
  • Netscape does not support if any end of tag is missing. E.g. <Table> ... </Table>
  • Use document.<name of the form>.submit in place of form.submit().
  • For referencing an index control use [] bracket instead of () Example for radio button : Radio button index i.e. document.<name of the form >.radio[0].value in place of document.form.radio(0).value.
  • Example for combo box value property: Use document.form.comboname.options[docoment.<name of the form >.comboname.selectedIndex].value instead of document.form.comboname.value .
  • Do not use id property for referencing controls , use the name property for the same.

Copyright 2012, ProgrammerWorld.NET

Comments | Suggest a Site | Contact us for Advertisement | Submit Article | Submit Source Code |
For any queries regarding this web site or to contribute to this site mail me at Admin@ProgrammerWorld.NET