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.
I’ve actually selected the F12 button so many times at work on my keyboard because the keyboard tray is so close to the top of the desk that when I slide it in, I accidently select this key. I‘ve always wondered with this coding was, but I was too afraid to play around in this area because I have no idea what I’m doing and I’m afraid I will screw something up. It’s amazing how much work is put into webpages. This is real complex stuff. Thanks for showing this to us.
ReplyDeleteI tried to follow these steps on my work computer and it didnt work, it brough up a control panel but there was no cube ot anything on the screen that you described. I am going to try this once I get home on my laptop since I use FireFox browser. A friend of mine builds web pages and I remember him telling me about all the work that goes into acutally designing one. He did mention inputting certain codes for the layout, text, and content that will display on the page, sounding extremely complex for me. But again I will try this once I am home to see this cool 3D display, thanks for sharing.
ReplyDeleteAlthough I'm not a big fan of Mozilla Firefox, I had to try it myself. I think it's really interesting to get a little idea on how website runs and what's needed in order to have all the functions run properly. For us, users, it's really not something to think about the details of the everyday usage of the computer and all the websites that we do visit, but reading this post and also doing it myself was pretty cool!
ReplyDeleteI downloaded FireFox just to try it, but I had no luck. I tried pressing F12 and when that did not work, I tried pressing Fn with F12. I still had no luck. I even tried multiple web sites. Does it work with Windows 7?
ReplyDeleteIt should, the developer console is specifically built in so they can use it for debugging and design. If it's on a laptop, bring it in to class and we'll see if we can figure it out.
Delete