Browsers
Raiting:
7

Non-standard use of the browser or thanks to Mozilla for the 3D future


Many people probably know that the latest stable version of Firefox got its own web inspector. Its release was a matter of time, it is potentially very interesting, but now it's not specifically about it. In the 11th version of the browser this inspector will receive an interesting upgrade 3D DOM Inspector. This mode previously could be seen by installing Tilt 3D add-ons. In brief, this thing can visualize the components of the website and view them from different angles, it looks like this:
image
First of all, this 3D mode that is using WebGL will be useful in terms of analysis of the website, it clearly shows the links between the layers, finds hidden items and identifies particularly difficult places on the page.
For example, like those high columns that are a pack of standard social buttons from Facebook, Twitter, Google and VKontakte.

image

Also, it is interesting to look at familiar websites under a slightly different angle:

image

However, this inspector could be approached from a different angle. For example, Erik Biermann did something to a page that will be definitely appreciated by the Minecraft fans:


If you have installed the Firefox beta and your system supports WebGL, you can independently evaluate this hard work: www.dev-kitchen.com/ff3d/. Why it is hard, you'll understand if you try yourself to do something like that.
Despite the fact that this example is made for fun, this technique may be actively used for the websites in the future. Their owners will be able to hide cleverly the content from advanced users, or to place any promotional codes.

3D mode could be used for learning the basics of the web, in particular the html and css. Indeed, in this representation would be much more effective explanations, such as a layer, block and the z-index.

In hear future you can see how the websites could become as the interactive 3D games. I already imagine the space between the left and right sidebar content as the need for speed for websites:

image

The potential possibilities are not limited, offer your alternatives and they may be realized in the near future.

In order to get to the three-dimensional mode, you can either press Ctrl + Shift + I, or to follow a browser interface: FirefoxButton -> Web Developer -> Web Inspector, in the lower right corner should be a button of 3D View. If it is not there, your system probably does not support WebGL.

UPD: A webpage with three-dimensional Eiffel Tower; http://www.cedricrey.fr/atelierWeb/tour_eiffel_3D.html
Papay 8 march 2012, 16:09
Vote for this post
Bring it to the Main Page
 

Comments

0 penubag March 14, 2012, 2:57
Laptop, y u no support webgl

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute