Developers have made some impressive demonstration pieces using WebGL, the browser technology that gives web apps better access to computer graphics hardware, but most of them are more “cool toy” than “practical tool.” Buried in Firefox 11, however, is a slick feature that puts the JavaScript API to good use—a 3D visualizer for web pages.
The 3D view turns ordinary HTML into a multi-layered, tiltable model where elements appear taller or shorter depending on how deeply nested they are in the code. The feature is a novel and entertainingly elaborate way to inspect the images and text on a web page, but it has some practical applications as well.
Examining existing HTML has long been an important learning tool for web developers, and the 3D view enhances that by showing the structure of the underlying code in a visual way. For more seasoned designers, the feature has proven to be a handy method for diagnosing nesting problems.
If you want to check out the 3D mode, you’ll need to have Firefox 11 installed on a system that supports WebGL (the option won’t show up on unsupported systems, so update your graphics drivers or try another computer if you don’t see it). Under the Firefox menu, go to Web Developer and then Inspect. Once in the Inspect view, click the 3D button in the lower-right corner, then click and drag on the page to see how all its pieces fit together.
The 3D view is based off of a Firefox add-on called Tilt 3D, which grew out of a Google Summer of Code 2011 student project. Mozilla’s wiki indicates that they probably won’t build all of Tilt 3D’s functionality into their browser, so you’ll need to install the add-on to get the full range of developer Victor Porof’s work.
icreati: Hi-Tech News.
source: http://www.geek.com
