How JavaScript & HTML5 Are Remaking the Web

The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. The SciVerse applications platform enables developers to build apps based on trusted scientific content. Learn more.

HTML5 is no longer just a buzz word. It — along with JavaScript and CSS3 — is quickly helping reshape perceptions of what a web browser and web standards can achieve.

With browsers implementing more HTML5 features across platforms and devices, developers are starting to integrate many of the new features and frameworks into their web apps, websites and web designs.

Although HTML5 is its own standard, the power of HTML5 is really only best realized with the use of CSS 3 and JavaScript. JavaScript, in particular, has quickly emerged as one of the best ways to help render great looking effects, animations and content in a self-contained, platform-agnostic way.

Graphics libraries like WebGL can extend JavaScript, allowing for the creation of interactive 3D graphics within the browser all while utilizing the plugin-free nature of the HTML canvas element.


WebGL Brain Surface and Tractography Viewer


Using JavaScript, jQuery and WebGL, developers at Children’s Hospital Boston created the Brain Surface and Tractography Viewer.

This is a web front-end tool that lets researchers explore data from an MRI scan within the web browser and in real time.

The implications of this type of technology for aiding in medical research are stunning. The fact that this all takes place in the web browser means that a researcher or doctor could explore MRI results from another part of the hospital — or another part of the globe.


Google Body Browser


Google released its Body Browser as a showcase for the WebGL support now included in Chrome. It’s a great proof of concept and is also useful as a learning tool.

In December, I described the project as “three-dimensional, multi-layered browser version of those Visible Man/Woman model kits. Or a virtualized version of Slim Goodbody, if you will.”

The Google Body Browser is a great example of just how fast technology is moving in web browsers. In December, only beta builds of Google Chrome and WebKit nightlies supported WebGL. Today, every shipping version of Chrome supports the technology and Firefox 4 — which is nearing release — also works with WebGL out of the box. Safari users still need to use a WebKit nightly, but we expect to see final support rolled out soon.


MathBoard


MathBoard is a featured case study on Google’s HTML5 Rocks page and for good reason — it adroitly highlights how robust web apps can be built using HTML5, even if they start life on other platforms.

MathBoard is a popular education app for the iPad that helps students learn and practice their integers.

We’ve discussed how mobile developers are using HTML5 in their app development process, but this is actually the inverse. N2N-Apps aimed to do a high-fidelity port of the app for the web browser in HTML5. Using HTML5, SnowUI and jQuery, the goal was met.


Arcade Fire, “The Wilderness Downtown”


Before they won a Grammy, Arcade Fire won our hearts with their innovative and awe-inspiring music video created using HTML5.

This Google Chrome Experiment, directed by Chris Milk, takes listeners into the video. As I noted last summer,

“In addition to timed-playback, synchronized effects and custom windows sizes for the video and animated content, this video also features custom rendered maps directly from the Google Maps API. Using SVG, the drawing application, for the postcard aspect of the video adds an interactive and personal touch.”

More than six months later, this still rocks our world.


Lost World’s Fairs


When Microsoft released the first IE 9 beta, the company contracted Friends of Mighty to create this stunning web page that showcases the power of WOFF and web fonts.

Using JavaScript goodies like Lettering.js and built using HTML5 Boilerplate, this is not just a beautiful web design, it’s a look at what is possible with HTML5.

HTML5 isn’t just about 3D effects or creating web apps — it is also offers great advancements to how content — including text — is displayed and how users can interact with that text.


Series Supported by Elsevier


The Future Web Series is supported by Elsevier‘s SciVerse Application Marketplace and Developer Network. In 2010, prominent science publisher Elsevier launched SciVerse to provide developers with access to ample research data so they can build apps on top of trusted scientific content. SciVerse also sponsors “Apps for Science,” a $35,000 developer challenge to accelerate science. Learn more.


More Dev and Design Resources from Mashable:


8 Powerful & Inexpensive Desktop Design Apps
Why Everyone Is Talking About Node
HOW TO: Turn Your Foursquare Data Into an Infographic
8 Essential Developer Apps for Multiple Platforms
8 Essential Web Typography Resources

More About: Future Web Series, HTML5, javascript, web design, Web Development

For more Dev & Design coverage:

This entry was posted in Design Lists, features, Future Web Series, HTML5, javascript, mashable, Web Design, Web Development and tagged , , , , , , , , , . Bookmark the permalink.