Have you ever wondered exactly how web pages are developed? What coding is involved, or plug-ins at either the client-side or server-side allow for the various elements you see on a page? You can always view the code of a web page by right-clicking on a web-page and select ‘View source,’ but that doesn’t tell you much if you’re uncertain of what you’re actually viewing.
You all know I’m not the hugest fan of Firefox, but it has a feature that can be very useful for developers, and super-nifty to look at for those who aren’t. Here’s what you should do, and I am using Amazon.com as an example:
Bring up Firefox, go to any site you want other than Google (because the page is so sparse) and press the [F12] key (You might possibly need to press [Fn]+[F12] if nothing happens). You will see a developer’s window open at the bottom of the page as you can see in the image below.
On the right side of the menu bar for this new window, you will see an icon that looks like a cube. It is the second one from the left in the right-side group of icons. I have circled it and indicated with an arrow in the image below.
If you click on that button, it will cause the page to retreat a little into the screen, and take on a layered 3-d view as seen in the following image. You can now close the developer window by clicking on the ‘x’ on the far right of the menu bar, or leave it open if you wish.
Using your mouse, you can rotate the page, spin it around, and view it from any angle.
You can even view it from the back.
Refreshing the page or pressing the cube icon will reset it to it’s original webpage condition. IF you leave the developer window open when it does, you can see all the elements load.
The purpose of the layers that you see is to show how much code, or how many ‘wrappers’ (special code that performs a specific function) are required for each element on the page. For example, in order to display an advertisement, the page needs the space for an advertisement to display, then it has to have code that pulls the ad, then it needs code from the specific advertiser, and so on. Each of those would be a layer. For an interactive element, layers of code would be needed to specify the content, the interactivity, etc.
It’s a good way of seeing how much actually goes in to making sites like these. If you try others sites, you’ll get some idea of how involved their design is.
