gray gradient colors

green gradient colors


In this section I will be talking about different technical subjects, technical issues that I had to deal with when writing the source code for this website, and other technical matters that I would like to share.

  1. What is CSS?
  2. What is XML Programming?
  3. What is ColdFusion Programming?
  4. What is Hand Coding? Why this website is handcoded?
  5. Why I did a separate, or parallel, coding for the high contrast pages?
  6. What steps you followed to test your website for any rendering issues?
  7. Why when I click on the “Contact me” link, nothing happens?
  8. What are some of the rendering issues between the 5 different browsers?
  9. What Softwares you used to write the code?
  10. What are session cookies?
  11. What Softwares you used for graphics and image editing?
  12. What mechanism you used to validate the user´s input for the Contact page?
  13. How did you write your name in Arabic?
  14. How did you make your site accessible, what standards did you use?
  15. Can you explain some of the <meta> in your code?
  16. What is URL Encoding?
  17. How to make the images zoom with text?
  18. The font of the company’s name renders differently on different computers/Operating systems, why?
  19. What are the issues you faced with the JavaScript onblur() event?
  20. In your case, what does it mean when IE6 displays the error:“Internet Explorer has encountered a problem and needs to close...”?
  21. What is a Flash projector?
  22. How did you get the rounded corners for the blockquote in the Welcome Page?
  23. What about the company Logo, who designed it? What software did you use?
  24. In your June 2008 Calendar project, I noticed that you have 2 separate stylesheets: one for color printing and one for black and white printing, why?
  25. What is Google Analytics?
  26. What is Google AdSense?
  27. Why you did not use the accesskey attribute for accessibility?
  28. Does IE6 support transparent backgrounds on images?

What is CSS?

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents." More from W3C...

Cascading Style Sheets save bandwidth, vastly reducing the size of your files when compared to old-style markup. With styles, your sites load faster. You work faster, too. Styles save grueling hours of tedious work off your design workload: one brief CSS document can style an entire site; and when it is time to redesign, you can execute site-wide changes in minutes instead of days. More from AListApart...

For an example of the power of CSS, take a look at what simply changing the style sheet does to one site, CSS Zen Garden...

What is XML Programming?

The Extensible Markup Language (XML) is a general-purpose markup language. It is classified as an extensible language because it allows its users to define their own tags. Its primary purpose is to facilitate the sharing of structured data across different information systems, particularly via the Internet. More from Wikipedia...

What is ColdFusion Programming?

Adobe ColdFusion software makes Internet application development and deployment faster and easier than any other solution available today. More than 300,000 developers at over 10,000 companies worldwide rely on ColdFusion to quickly build and deploy powerful Internet applications, making ColdFusion one of the most widely adopted web technologies in the industry. More from Adobe...

What is Hand Coding? Why this website is handcoded?

There are two ways you can put web pages together. They can be either hand-coded, meaning that the developer writes out all the HTML, JavaScript, CSS, etc. codes by hand, or generated, whereby a generator program of some sort is used, such as Dreamweaver or FrontPage. This latter group, also includes all the "WYSIWYG" editors like Microsoft Word along with the various "wizard" type generators that generate a finished page based on a series of questions.

I take pride in the fact that 99.9% of this website is hand-coded. Adobe Dreamweaver was only used to get the visual effects for the company name at the top of the page. As a software engineer, hand-coding or writing the source code is the natural way to programming. Using WYSIWYG web editors feels very awkward to me. Also, this website is free of advertisement. You will get no annoying popups.

Why I did a separate, or parallel, coding for the high contrast pages?

There are several ways I could have done this without reverting to writing a completely separate HTML code for the high contrast layout pages.
1. I could have used JavaScript to switch between multiple style sheets. But I did not, because the user must have JavaScript enabled. Many users, knowingly or unknowingly, disable Javascript. I wanted the majority of this website to render and function properly even with JavaScript being disabled in the user's browser.
2. PHP could have been used unintrusively for the style sheet switcher. But I don't know PHP, and I am not sure if the code will validate if I included PHP into the source code.
3. The underlying HTML source code is not exactly the same between the normal contrast and the high contrast pages. The differences are small though.

What steps you followed to test your website for any rendering issues?

This site has been extensively tested to display and function properly on 5 browsers. The source code have been modified for this matter.

This site functions and renders properly without the need of JavaScript. The only exception is the contact page, in order for the form to validate, JavaScript must be enabled. For the other pages, if JavaScript is disabled, you will lose the visual effect on the company´s header, the image rollover, and all the links will open in the same window. This website was tested with different display resolutions to make sure that it renders properly. This website is best viewed with monitor resolution of 1024 by 768 pixels and higher.

This website has been tested on a Windows operating system. I took great care in writing the code for Browser compatibilty and page rendering so that it displays nicely in all web browsers.

Why when I click on the “Contact me” link, nothing happens?

In case the contact link at the bottom of the page does not work, this means that your e-mail client is not properly set up. My email contact is:

What are some of the rendering issues between the 5 different browsers?

After I wrote the source code for this website, I came to the realization that the most time consuming part was to make sure that the pages render as I like them in all 5 browsers. I discovered that Internet Explorer (IE) was the worst culprit. For example IE version 6 behaves differently than IE version 7 and IE 8.
For example, In Opera browser My name in arabic in High contrast view appears differently than in normal view. Also in most cases, IE behaves differently than the other browsers: Mozilla/Firefox, Safari, or Opera.
If you want to display bigger font: Internet Explorer version 7 and Opera behaves differently than Mozilla/Firefox and Safari browsers. For IE and Opera, the page is zoomed in or out which keeps the page rendered nicely, and everything stays proportional. It is like a camera where you zoom in (getting closer) to the object or out (getting away) from the object, which gives you the impression that the object is getting bigger, but in realty the object is of the same size. The object in our case is the font. The screen font does not change, but you are viewing it differently. But in Mozilla, Safari, and IE version 6 browsers they don't have the zoming option, but they actually increase/decrease the font-size, which can cause rendering problems, especially if you want to increase the font (ctrl++).
For the rounded corners, in the welcome page: For IE there is an issue when you start zooming in (150% or more), you start seeing borders aroung the images even though border are set to zero. Opera and safari don't have this issue. In Mozilla, the rounded corners of the table will lose their integrity by increasing the text size.

Note that the latest versions of most browsers support – and default to – full page zooming instead of just increasing/decreasing text size. However, this does not take away the need for flexibility in web design. Read More...

Note that IE 7 and IE 8 do zoom in/out to increase/decrease the page view which is different than IE 6. In IE version 6 there is the option of text size (medium , larger, largest, smaller, smallest).

Also IE versions 6 and 7 do not recognize some of the CSS properties like printing the URL after a link. IE 6 is not considered a modern browser, but IE 8 is. So if you still have IE 6, I strongly suggest to upgrade to IE 8.
For the “June 2008 calendar” project in my Portfolio page, since IE6 does not support the CSS image rollover property, I had to write Javascript code for that.

What Softwares you used to write the code?

For the Majority (99.9%) of this Website, I manually wrote or hand-coded, the source code using Notepad++. The “Design View” in Dreamweaver was used only for the company´s name visual effect. In addition to Notepad++, I used the “Code view” in Dreamweaver to write the XHTML, CSS, JavaScript, and Cold Fusion codes.

What are session cookies?

Session cookies, or cookies, are small pieces of information that are stored by your browser on your computer's hard drive. Most web browsers automatically accept cookies, but you can change your browser to prevent that. This site does not require cookies. Cookies are also known as HTTP cookies, Web cookies, or tracking cookies, are parcels of text sent by a server to a Web client (usually a browser) and then sent back unchanged by the client each time it accesses that server.

What Softwares you used for graphics and image editing?

Initially, I used ImageForge to create the graphics in the website and to resize, edit the images. I used IconForge to create my icon picture Logo that is displayed beside the URL in the address bar, and in the tab bar for modern browsers. But, after I learned Photoshop, I sarted using exclusively Photoshop.

What mechanism you used to validate the user´s input for the Contact page?

JavaScript is used to validate the form at the browser´s side. Before the user´s input is send to the server, the JavaScript code, through Regular expressions checks the validity of the input. No server side validation is done or is necessary. The form is then processed through Response-O-Matic to be sent to my email account.

How did you write your name in Arabic?

I used Unicode. Unicode is an industry standard allowing computers to consistently represent and manipulate text expressed in most of the world´s writing systems. More from Wikipedia...

How did you make your site accessible, what standards did you use?

I made great effort to have this website compliant with section 508, and the W3C Web Content Accessibility Guidelines 1.0 standards.

Web accessibility means that people with disabilities can use, perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with “temporary disabilities” such as a broken arm.
Making a Web site accessible can be simple or complex, depending on many factors such as the type of content, the size and complexity of the site, and the development tools and environment.
Many accessibility features are easily implemented if they are planned from the beginning of Web site development or redesign. Fixing inaccessible Web sites can require significant effort, especially sites that were not originally “coded” properly with standard XHTML markup, and sites with certain types of content such as multimedia. For the case of this web site, several visual features were removed so that it is XHTMLcompliant.

I did not add the accesskey attribute on this website to conform with the accessibility guidelines, because I discovered that the choice of accesskey can conflict with the shortcut keys for the five browsers targeted and the many operating systems that a user can have. To eliminate any issues and confusion that can arise, I opted not to use them as part of the source code. More in this reference...

Can you explain some of the <meta> in your code?

HTML or XHTML Meta elements are used to provide structured metadata about a Web page. Such elements must be placed as tags in the head section of an HTML or XHTML document. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.

For instance Google automatically takes a snapshot of each page it crawls and archives it. This cached version allows a webpage to be retrieved for the end user if the original page is ever unavailable. The cached page appears to users exactly as it looked when Google last crawled it, and a message is displayed at the top of the page to indicate that it is a cached version.
To prevent all search engines from showing a cached link for your site, place this tag in the <HEAD> section of your page:
To allow other search engines to show a cached link, preventing only Google from displaying one, use the following tag: <META NAME=“GOOGLEBOT” CONTENT=“NOARCHIVE”>
Note that the above tag only removes the cached link for the page. Google will continue to index the page and display a snippet.

What is URL Encoding?

URL Encoding is the process of converting string into valid URL format. Valid URL format means that the URL contains onlyalphanumerics [0-9a-zA-Z], the special characters “$-_.+!*'(),” (not including the quotes), and reserved characters used for their reserved purposes may be used unencoded within a URL. See reference from Wikipedia...Also from thisTutorial...

How to make the images zoom with text?

To do scalable images, change the picture size from pixels to em (1px = 1/16em). Think of an em as a scaling pixel. If you use em in your images, instead of pixels, then the sizes of your images will vary with text size.
Note that zooming in/out for IE and Opera is different from Mozilla/Firefox and Safari browsers. In Mozilla and safari there is the option of increasing/decreasing text size, where the dimensions of the picture, if set to pixels and not em, will stay fixed compared to the font. That is not the case for IE and Opera where it seems that everything on the page looks smaller (for zoom out) or bigger (for zoom in). Zooming In/Out works like a camera´s lens, getting closer or further from the object.
In short, the changes are noticeable in Mozilla/Firefox and safari but not in IE and Opera. If you have Safari or Mozilla browser installed on your computer, try out my portfolio page and see how the images increase/decrease in size by increasing/decreasing the font size..

The font of the company’s name renders differently on different computers/Operating systems, why?

This all depends on what the user have on his/her computer system. For instance, for the company´s name, I have several choices of font, my first choice is “Kristen ITC”, my second choice is “Tempus Sans ITC”, my third choice is “Marker Felt”, my fourth choice is Arial, and my last choice is any font from the sans-serif family. If the user has my first choice of font on his/her computer system, then the browser render the company´s name with that font; otherwise, the user´s browser checks if the second choice of font exists, and so on. The worst case scenario is that the user´s browser selects the available font from the sans-serif family.

What are the issues you faced with the JavaScript onblur event?

The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. The JavaScript onblur() event works as expected in IE, Opera, but not in Mozilla/Firefox and Safari.
However, for the Intranet Employee directory in my Portfolio page, I can not rewrite the JavaScript code to be compatible with all 5 browsers, because I am using ColdFusion to check for empty inputs, and JavaScript for validating filled user inputs. This combination of user validation restricts me from using, during submission, other events than onblur(), like the onclick() event.
One solution could be to only use either ColdFusion or JavaScript to do the user input validation, but not BOTH.

After I discovered that different browsers behave differently with the onblur() event, I rewrote the JavaScript code for the user input validations for the two forms I have on this website: the company´s contact form and the car dealership´s form. However, I still need to find a reasonable solution for the Intranet employee directory form. Becasue the way I wrote the code, displaying an error message through the onblur() function works in IE and Opera, but not in Safari and Mozilla/Firefox.

For the focus() and select() events for the JavaScript form validation, they work as one expects in IE, Opera, and reasonably well in Safari but they don't work at all in Mozilla/Firefox. For Safari, the focus() goes to the correct input field but the select() does not go to the input field where the error is, but to the next one. After testing the Javascript code for these two events in Mozilla/Firefox, it does not work at ALL. Therefore, if possible, I need to rewrite the JavaScript code for the Mozilla/Firefox browser.

In your case, what does it mean when IE6 displays the error:“Internet Explorer has encountered a problem and needs to close...”?

This error is only limited to IE version 6, and it was fixed. Please notify me if it happens again. The cause of this error is not due to my coding but with some bug issues with IE6. Let me be clear again, this is an IE6 bug that was fixed with IE6 SP1 and IE7. For more information, see reference.

Obviously, the best fix for this issue is for users to upgrade to IE version 8, or al least to IE version 6 service pack 1. But, we know that most users don´t like to upgrade. Therefore, to bypass this problem, I had to remove some of the <span> tags in the “Welcome” and in the “Portfolio” pages. It seems that IE6 is not happy with some of the <span> tags that I used in my code. If you are an IE6 user and don´t have SP1 installed and don´t want to upgrade to a newer Internet version, I recommend that at least download the SP1 for your browser. Though, I strongly suggest that you upgrade to IE7, even IE8 is coming soon, or use a different browser like Mozilla/Firefox, Safari or Opera.

What is a Flash projector?

A standalone Flash projector is a swf file and the Flash player mixed together in one file. It is usually about a few megabytes bigger than the swf file. It is a self executable application that does not require the browser or Flash player for playback. You can publish projectors on either Windows or Macintosh platforms.
The main advantage of this format is that the viewer needs no plug-in and no browser at all to view the file, hence the name "standalone". The Flash projector can be send via email or CD and can be viewed instantly.

How did you get the rounded corners for the blockquote in the Welcome Page?

I used <table> tag to get the rounded corners for the blockquote. I used a table in order to squeeze the corner images so you think there are rounded corners. This could have been done with CSS, which is a better way for a full separation structure and presentation. The rounded blockquote corners is not perfect, but it looks better than a rectangular one. It works well at normal zoom and font levels, except when you start "zooming in" in IE, you will notice the borders of the of the image. This is a browser issue and not a code issue, nothing can be done about it. In Mozilla, you have to increase the text size severale times before the rounded shape loose its integrity. For the high_contrast page, I kept the blockquote in its original form as a rectangle.

What about the company Logo, who designed it? What software did you use?

Both the old old company logo done with ImageForge. and the new new company logo done with Photoshop. company Logos are my idea and my design. To implement the design for the old company Logo, I used the image editor tool, ImageForge. However, for the new company Logo, I used Photoshop. As you can tell, the quality of the image in Photoshop is much better.

In your June 2008 Calendar project, I noticed that you have 2 separate stylesheets: one for color printing and one for black and white printing, why?

Like I mentioned previously, I could have kept the underlying XHTML code exactly the same and then used JavaScript code to do the switching between the multiple stylesheets for color print, and black and white print. But I chose to have two separate XHTML code in parallel. I did not use neither PHP nor JavaScript to do the switching. First I don't know PHP. And second, for JavaScript to work, cookies must be enabled which is against my rule, because I want the user to be able to use the website with JavaScript and cookies disabled. Therefore, I made a two separate XHTML files.

Of course, if/when I want to do a 12-page calendar, then it would definitely be more efficient to use either PHP or JavaScript. If you like to know how to use PHP to do multiple stylesheet switching, this is the first reference and this is another. I personally like the first reference because the code work even if cookies are disabled.

For the JavaScript code for switching between stylesheets, here is the first reference and here is another.

What is Google Analytics?

Google Analytics is the enterprise-class web analytics solution that offers rich insights into the website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features which analyzes the traffic data. With Google Analytics, the Web publisher is more prepared to write better-targeted ads, strengthening marketing initiatives and creating higher converting websites.

What is Google AdSense?

Google AdSense is a free program that enables website publishers of all sizes to display relevant Google ads and earn. There are several types of AdSense. However; the relevant ones to this Website are: “AdSense for Content” and “AdSense for Search”.

AdSense for Content:Display targeted Google ads on the website´s content pages and earn from valid clicks or impressions.

AdSense for Search: Allow the users to search this site or the web, and earn from ads on the search results pages.

Why you did not use the accesskey attribute for accessibility?

The accesskey attribute, aimed at making web pages more accessible, has proved out to be poorly designed and poorly implemented. Although it is still endorsed by some recommendations, it tends to reduce accessibility rather than help people, though there are some special situations where it might improve useability.

Experience and testing has shown, that the idea of author-defined shortcuts is generally not useful on the Web. Moreover, serious damage is often caused by the way in which the attribute has been implemented in browsers: it uses key combinations that override built-in functionality in browsers and other software

In HTML, one can use the accesskey attribute in forms and links. When supported by a browser, it allows the user to use keyboard keys for functions which are normally done using a mouse. For example, to follow a link, one might use the Alt key and a letter, as alternative to clicking on the link. This requires that the author has specified an access key assignment for that link, using the accesskey attribute. Unfortunately, browser support to the attribute is limited, and rather primitive. The accesskey attribute tends to mask out the functionality of a browser's predefined keyboard control, which is often much more important than page-specific access keys. Moreover, browsers do not indicate that access keys are available. Authors may wish to consider including explicit notes about access key assignments in their documents. In my humble opinion, it is much convenient to use the tabindex attribute.For more information, see reference.

Does IE6 support transparent backgrounds on images?

Somewhat. IE6 does not support transparency backgrounds in PNG formatted images, but it does in GIF images. In case of a PNG image, the browser will always display a color. To bypass this, always edit the image background to be the same color as the your Website background. This workaround would work only in solid colors. If you use a GIF image to show transparency, sometimes the quality of the image will degrade significantly. Therefore, there is a trade off to be made.

I recently discovered that there is a Medicine for your IE6/PNG headache, please check this reference.

Even better, if you have to use PNG images in your website, and you still care about the IE5.5 and IE6 users, you can check out my post about a fix.