Why the WAMP Server getting Orange Color ?



If you have ever had a problem with your WAMP server where it will just not start and the icon in the windows notification area stays yellow then you will understand my frustration. After a bit of a search on google i still did not find the answer to my problem.

 I started by checking the error logs from within WAMP and determined it was apache that was not starting, after finding apache in the Services under Adminstrative tools i was still unable to manually start apache. This is when i knew that another program must have also been using Port 80.

I had recently installed Visual Studio on my laptop and it turns out the “SQL Server Reporting Services (MSSQLSERVER)” was the service occupying port 80 and therefore blocking apache from starting. Once i stopped this service everything once again worked.

Skype also uses port 80 and therefore can causes the same problems, you are able to reconfigure Skype to use another port though.


What is the Use of Image Input Type ?

Image submits were never a really great idea; search engines can’t read what’s written on them, and they tend to look terrible on mobile or small-screen browsers. Recently, however, we’ve noticed some pretty serious trouble when Firefox 4 encounters image-based form submit tags, especially in combination with many common third-party JavaScript libraries.

This is not, I hasten to add, a problem with Firefox; it’s been upgraded to the HTML5 standard, and is doing all the right things. Expect Safari and Chrome to follow soon, followed by Internet Explorer sometime in the year 2025. 🙂

When the user clicks an image-based input tag, Firefox 4 sends the x and y position of the cursor within the image, and not the name or value attributes of the tag. If you’re running JavaScript that depends on the name or value of the submit button or listens for the onsubmit event on the form or the onclick event on the button, unpredictable things–which is code for “very bad things, like your shopping cart page not submitting”–can happen.

Many third-party libraries–including some in common use by many of our store platforms–listen for clicks or submits. If you hear from a customer who says your form doesn’t work, he or she might be running Firefox 4 and encountering an image-based input tag.

An Easy Fix

To style a regular input type=submit tag to look just like your old image-based button, change this:

<input type="image" src="submitButton.gif" />

… to this:

<input type="submit" />

… and add a rule like this–changing the height and width to your image’s size of course–to your CSS:

input.mySubmit {
border: none;
cursor: pointer;
display: inline-block;
text-indent: -3000px;
background: url(submitButton.gif) no-repeat 50% 50%;
width: 50px;
height: 20px;

Bonus: you can now do shiny new hover states for your submit buttons! Just create the hovered state as a separate image of the same size, and add this:

input.mySubmit:hover {
background-image: url(myHoveredImage.gif);


html5shiv is a JavaScript library that enables Internet Explorer 8 and earlier to understand and properly render new HTML5 tags like <article> or <aside>. This is incredibly helpful because it allows websites to use these new semantic elements while retaining backwards compatibility. While html5shiv is open source and free to be copied and used anywhere


Boilerplate is a set of code that can be reused in many ways with little or no alteration. However, the boilerplates we are talking about here usually can be used as a base, a solid foundation for your projects. Additional benefit, it’s also a good place to learn tips and tricks about coding too!

Boilerplate is extremely useful because it usually comprise of best coding practices, and also contain heaps of tips and tricks which otherwise would take years of times to learn. Take HTML Email Boilerplate as an example, building an eDM isn’t easy, it requires one to go back to HTML 1.0, no more div, span or high level CSS settings such as float, position etc, what you need is table for layout, inline CSS for simple styling. To make building an eDM even worse, email clients have strict restriction and they don’t behave the same, as if you’re working with more than one legacy browsers that all render the page differently! With the Email boilerplate, it contains CSS settings HTML structure and even some tips and tricks to help and guide you how to avoid redering inconsistencies issues.

What is a Website Tracking System?

Do you need to know who’s visiting your website, and what they do when they get there?

  • A tracking system will tell you who’s doing what?
  • A tracking system answers these questions To the Click.
  • A website tracking system is a tool suite that provides you with a full set of statistics to help you monitor and track visitors to your website.
  • A tracking system collects statistical data about your visitor traffic and aggregates the data into meaningful reports. The goal is to help make website management decisions on a daily basis, for example content updates.

The information you can learn from a tracking system starts with basic stats, such as how many unique visitors you have had in a 24 hour period, and what countries they are coming from.

Campaign reporting

You also benefit from referrer and Pay-per-click (PPC) campaign reporting: all the search terms that were used to find your site are presented along with a list of all search engines used.

Real-time reporting

A ‘live’ tracking system such as Opentracker gives you the insight and excitement of seeing who is browsing on your site in real-time.

Keep your stats indefinitely

By tracking unique visitors over long periods of time, you will be able to derive important return-on-investment (ROI) information. An example is conversion information. Conversion rate tells you which visitors convert into desired actions; placing an order, signing up for a newsletter, making a purchase, or viewing a shopping cart page.

Why do your visitors leave?

Another important function of tracking is to tell you where your leaks and drop-off points are. These are places on your website where visitors leave before completing a desired action.

The process of data-mining (searching the data that you have collected to obtain meaningful information) is facilitated by an easy-to-use interface.

Progressive and Interlaced Displays…

Progressive/interlace displays are the two main categories for screens today. Put simply, progressive is better because it will minimize picture flickering.

Progressive displays re-draw every single horizontal line each cycle. For example, a 1080p (p for progressive) full HD television at 120 hz will re-draw every single one of its 1080 lines 120 times per second. Interlaced displays re-draw every other line each cycle. So, the same TV displaying 1080i (i for interlaced) will redraw 540 lines 120 times per second. This requires half the work of the progressive display, and was the original reason interlace was invented in the first place.

Back in the days of vacuum tube televisions, electronic processing was much slower than it is today. Re-drawing every single line would result in a jerky picture. Even though re-drawing every other line would result in some picture flickering, it was preferable to jerky motion. Modern displays easily have enough processing power to display smooth progressive picture.

Today, almost all new displays can display progressive output. Progressive displays can also display interlaced, while interlaced screens cannot display progressive. Thus, interlacing is an older technology which only exists in new equipment so it an be used with older equipment.

Choosing a File Format…

Each of the file formats specified above are appropriate for different types of images. Choosing the proper format results in higher quality images and smaller file sizes. Choosing the wrong format means your images won’t be as high-quality as they could be and that their file sizes will likely be larger than necessary.

For simple graphics like logos or line drawings, GIF formats often work best. Because of GIF’s limited color palette, graphics with gradients or subtle color shifts often end up posterized. While this can be overcome to some extent by using dithering, it’s often better to use a different file format.

Here’s an overview of which file types work best for each type of image:


  • If animation is required.
  • Line drawings and simple graphics.


  • Photos, especially without high contrast.
  • Screenshots, especially of movies, games, or similar content.


  • Line art, illustrations.
  • Photos with high contrast.
  • Transparency, especially alpha channel transparency.
  • Application screenshots or other detailed diagrams.

And here’s an overview of which formats to avoid for each type of image:


  • Images with gradients.
  • Photos.


  • Images with high contrast.
  • Detailed images, especially diagrams.
  • Simple graphics (the file sizes are larger).


  • Photos with low contrast (file sizes are larger).

Different File Types…

For the purposes of this article, we’re only going to focus on three file types, those most commonly found in web design: PNG, JPEG, and GIF. While there are other image formats out there that take advantage of compression (TIFF, PCX, TGA, etc.), you’re unlikely to run across them in any kind of digital design work.


GIF stands for Graphics Interchange Format, and is a bitmap image format introduced in 1987 by CompuServe. It supports up to 8 bits per pixel, meaning that an image can have up to 256 distinct RGB colors. One of the biggest advantages to the GIF format is that it allows for animated images, something neither of the other formats mentioned here allow.


JPEG (Joint Photographic Experts Group) is an image format that uses lossy compression to create smaller file sizes. One of JPEG’s big advantages is that it allows the designer to fine-tune the amount of compression used. This results in better image quality when used correctly while also resulting in the smallest reasonable file size. Because JPEG uses lossy compression, images saved in this format are prone to “artifacting,” where you can see pixelization and strange halos around certain sections of an image. These are most common in areas of an image where there’s a sharp contrast between colors. Generally, the more contrast in an image, the higher quality the image needs to be saved at to result in a decent-looking final image.


PNG (Portable Network Graphics) is another bitmapped image format that uses lossless data compression and was created to replace the GIF image format. The PNG format was largely unsupported by Internet Explorer for a long time, making it less commonly used than GIF and JPEG formats, though it’s now supported properly by every major browser. PNG files support palette-based color (either 24-bit RGB or 32-bit RGBA), greyscale, RGBA and RGB color spaces. One of PNG’s biggest advantages is that it supports a number of transparency options, including alpha channel transparency.

Image Compression Techniques…..

Proper use of image compression can make a huge difference in the appearance and size of your website image files. But compression is an often-misunderstood topic, partly because there’s a real lack of understanding on what the different types of compression are good for. If you don’t understand which type of compression to use for different types of images, you’ll likely end up with one of two results: either images that don’t look as good as they could, or image file sizes that are way larger than they need to be.

Below is everything you need to know about image compression in relation to web design. We’ve covered the differences between lossless and “lossy” compression, the different file types and the compression techniques they use, and guidelines for which file formats work best for different kinds of images.

1. “Lossless” vs. “Lossy” Compression

Many people feel that they should only use image formats that use lossless compression. While lossless compression is superior for many kinds of images, it’s not necessary for many others. Basically, lossless image compression means all the data from the original file is preserved. Lossy compression, on the other hand, removes some data from the original file and saves the image with a reduced file size. It’s up to you, as the designer, to tell it how much data to disregard by setting the image compression rate.

Lossless Compression


There are a few different methods for lossless compression. There’s run-length encoding (used for BMP files), which takes runs of data (consecutive data elements with identical values) and stores them in a single data value and count. It’s best suited for simple graphics files, where there are long runs of identical data elements.

DEFLATE is another lossless data compression method used for PNG images. It uses a combination of the LZ77 algorithm and Huffman coding. In addition to being used for PNG images, it’s also used in ZIP and gzip compression.

Lempel-Ziv-Welch (LZW) compression is a lossless compression algorithm that performs a limited analysis of data. It’s used in GIF and some TIFF file formats.

Lossy Compression


There are a number of lossy compression methods, some of which can be combined with lossless methods to create even smaller file sizes. One method is reducing the image’s color space to the most common colors within the image. This is often used in GIF and sometimes in PNG images to result in smaller file sizes. When used on the right types of images and combined with dithering, it can result in images nearly identical to the originals.

Transform encoding is the type of encoding used for JPEG images. In images, transform coding averages out the color in small blocks of the image using a discrete cosine transform (DCT) to create an image that has far fewer colors than the original.

Chroma subsampling is another type of lossy compression that takes into account that the human eye perceives changes in brightness more sharply than changes of color, and takes advantage of it by dropping or averaging some chroma (color) information while maintaining luma (brightness) information. It’s commonly used in video encoding schemes and in JPEG images…

What is the difference between the GET and POST methods?

As per functionality both GET and POST methods were same.Difference is GET method will be showing the information information to the users.But in the case of POST method information will not be shown to the user.

The data passed using the GET method would be visible to the user of the website in the browser address bar but when we pass the information using the POST method the data is not visible to the user directly.

Also in GET method characters were restricted only to 256 characters.But in the case of POST method characters were not restricted.
Get method will be visible to the user as it sended appended to the URL, put Post will not be visible as it is sent encapsulated within the HTTP request body.

About the data type that can be send, with Get method you can only use text as it sent as a string appended with the URL, but with post is can text or binary.

About form default, Get is the defualt method for any form, if you need to use the post method, you have to change the value of the attribute “method” to be Post.

Get method has maximum length restricted to 256 characters as it is sent appended with the URL, but the Post method hasn’t.

Get method has limitation in the size of data transmitted, but post method hasn’t.