Imagine is first UK publisher to launch title for Apple’s iBooks 2

Imagine Publishing has launched a new digital-only, Multi-Touch ebook, iCloud For Beginners, specifically designed for Apple’s iBooks 2. Featuring slideshows, interactive images and more, it is one of the first ebooks of its type in the world.
Using iBooks Author’s revolutionary Multi-Touch technology, iCloud For Beginners teaches everything users need to know about iCloud, the free new back-up and sync service. From how to set-up your free iCloud account to sharing your information across your Apple devices, the ebook uses cutting-edge technology to deliver enhanced, easy-to-use tutorials.
“At Imagine, we’re always excited by cool new ways to deliver our world-leading content.” said Editor In Chief Aaron Asadi “iBooks Author is another great opportunity for us to create more products we love for a whole new type of audience. It’s this sort of game-changing innovation that makes us do what we do. ”
“With the speed that the publishing industry is changing, there’s nothing more exhilarating than grabbing hold of new technologies and seeing how we can get the most out of them to serve-up the content we’re so passionate about” added Ross Andrews, Head of Design “What could be better than going from saying ‘we should try that’ to a fully published product in just a few days? It’s hard to think of a more exciting time for the industry.”
iCloud For Beginners is available now on iTunes and iBookstore worldwide.
Imagine Publishing is one of the UK’s fastest-growing multimedia content producers. Formed in May 2005, Imagine now publishes 20 regular print magazines, 30 digital apps, 25 websites and thousands of articles every month in the technology, videogames, photography and knowledge/science markets. An Imagine magazine is purchased every ten seconds.

HOW IT WORKS DAILY GETS BRAND NEW SITE DESIGN

How it Works is the most exciting science & technology magazine in the world today, and is now a well-respected globally successful brand comprising of a magazine, bookazines, website, mobile app and many licensed editions.
The official magazine website at www.howitworksdaily.com has just been given an exciting revamp, introducing a modern and dynamic design for housing a wealth of content spanning news, facts and competitions.

How It Works’ web developer, Andy Leon, said: “There’s something for everyone in How It Works, so we’ve focused on making it easier for readers to find content that interests them. The continuous-loading homepage means that it’s near impossible to run out of fascinating articles to browse. These are also now more engaging, with interactive illustrations that take the reader inside some of the awesome technology. Plus, sharing with friends is now effortless, with social networks and aggregator sites available on-the-page.”

As well as using WordPress to serve the content, the site utilises a jQuery plugin for WordPress called Masonry to achieve the unorthodox layout. Designed by web designer and front-end developer David DeSandro, the plugin  enhances CSS Float methods to pull elements together and make them stack more tightly, as the official developer page explains:
“Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimises vertical gaps between elements of varying height, just like a mason fitting stones in a wall.”

HTML5 PLEASE GIVES DESIGNERS & DEVELOPERS TOP TIPS ON NEXT-GEN MARKUP

Prolific developer and Opera Web Opener Divya Manian has beautifully constructed a brand new website called HTML5 Please – offering invaluable help on mastering HTML5 coding the right way. With a focus on conveying responsible techniques that adhere to desirable standards, the site offers a serach filter for drilling down to the finer details you want answered, whereas more casual browsers can access specific points via an accordian-type design. You’ll then reveal actually tag and snippet examples, working demos and links to the best developer resource sites for taking your knowledge to the next level.

http://html5please.us/

As the web evolves, it is of even more importance for your new-look WordPress site to respond quickly and efficiently, giving your users and visitors exactly what they’ve searched for without them waiting around for an eternity for it to load.
Site optimisation is more important now than ever, as users access your content on a variety of devices across varying levels of connection speeds.
In this tutorial, we will have a look at some of the plug-ins available to download and implement within your WordPress installation to help reduce server load, optimise code and templates, and go some way to improving the speed and performance of your site.
We’ll primarily focus on adding a caching plug-in to generate and serve static HTML versions of your dynamic content, as well as look at other areas where performance can be enhanced.

tools | tech | trends: WordPress, PHP
expert: Matt Gifford
tutorial files: download here

01. Start caching

There are a few plug-ins out there to assist in setting up caching, but we’re going to be looking at WP Super Cache. Go to the Plugins>Add New menu option in your WordPress administrator and search for the plug-in by name in the available form field.

02. Install plug-in

The results from the search displayed in the admin interface should list WP Super Cache as the first option. Select the ‘Install Now’ link to automatically download the plug-in. Alternatively, you can download the plug-in separately and use an FTP client to upload to the plug-ins directory in your WordPress installation. Finally, activate the plug-in.

03. Set permissions

Depending on the current access configuration of your WordPress installation, you may see an error message regarding the ‘advanced-cache.php’ file. To resolve this issue you simply need to temporarily alter the permissions of the wp-content directory to 777 to allow write privileges, which you can do via your FTP client. Revert to 755 when finished.

04. Caching enabled
Having successfully generated the required files for the plug-in, the WordPress installation should have also made an amendment to the ‘wp-config.php’ file to enable caching. If you see any errors relating to the config file, try adjusting the permission levels and activating the plug-in once more to generate the required changes.

001 /** The name of the         database for WordPress */
002 define(‘WP_CACHE’, true);     //Added by WP-Cache Manager

05. Simple caching

The plug-in should now present you with a number of tabbed menu options within the administration panel. Within the Easy tab, set Caching On to enable the abilities and static file generation. For the majority of simple blogs this may be enough, but we’ll progress and see what advanced options are available to us.

06. Advanced settings

There are a number of options available to implement here. The success and availability of some will depend on your hosting plan and server setup, so try them out. Start by checking all recommended settings, specifically the mod_rewrite setting to serve cached files. You can also restrict caching for frequent visitors.

07. Mod rewrite

The mod rewrite rules required to serve up
the static html-generated files are quite extensive, but the plug-in will warn you that your ‘.htaccess’ file needs to be updated and provides you with the ability to update on your behalf or the content to manually update/create the file yourself.

08. Test caching

Return to the Easy tab option and run a test on the cache, which retrieves two static-generated files for timestamp comparison. Any issues found here can be a good indication as to what settings on the server you may need to change. You can also delete the cache and start again if you need to.

09. View source

Check your site and view the source in a number of different browsers to test the caching procedure. The WP Super Cache plug-in will automatically insert cache information at the bottom of every page, with information on caching times and compression to let you know it’s working and hopefully quicker than before.

10. Consider CDN

If your site relies heavily on static components such as images, CSS or JS files, consider the use of a content distribution network (CDN) to serve these up and share the load. Services such as Amazon S3 or Rackspace Cloud Files can be of help here, and the cache plug-in can be configured to work with these services.

11. Optimise plug-ins

Deactivate any plug-ins you no longer need or use. These could be having a large impact on loading times and response. Consider the possibility of streamlining any active plug-ins. If you see any code that could be written more efficiently, do so. The smallest tweak to a function could improve loading times and functionality.

12. Combine CSS and JS

One clear way to improve the performance of any website is to reduce the number of http requests made to obtain resources and assets. Where possible, combine multiple CSS and JS files into one. The WP Minify plug-in assists in collating and minimising the contents of these files. You can get it here: http://bit.ly/wpminify.

13. Load JS in footer

When creating or amending your WordPress theme, try to place any JS files into the footer of the template. This helps to ensure that all DOM elements have been created on the page before any manipulation or JavaScript functions are performed. WP Minify can help you with this option automatically or manually.

14. Reduce image sizes

Images can create unnecessary overhead, due to file size and compression. When uploading images, consider reducing the file size where possible to optimise for the web. Alternatively, download and install the WP Smush.it plug-in (http://bit.ly/wp_smush), which will run any image in your media library through Yahoo’s smush.it service and compress the image without losing quality.

15. Browser caching
Using the browser cache doesn’t necessarily increase the loading time of your WordPress installation, but it can help to reduce strain on the server by caching objects that are loaded often. Add the code for this step to your
‘.htaccess’ file, to help reduce the load when requesting static files and images.

001 FileETag MTime Size
002 <ifmodule mod_expires.c>
003 <filesmatch                 “\.(jpg|gif|png|    css|js)$”>
004 ExpiresActive on
005 ExpiresDefault “access plus     1 year”
006 </filesmatch>
007 </ifmodule>

Query performance

WordPress makes it incredibly simple to create custom queries to obtain data not easily provided by the default functions available, but these database interactions need to be as optimal as possible to avoid any latency or lag. Any possible bottlenecks and issues need to be discovered and resolved as quickly as possible, but they’re typically quite hard to track down.
To assist you in finding any query issues, download and install the Debug Queries plug-in (http://bit.ly/oLnht3). This will display all queries running on a page at the bottom of the screen, complete with total time taken to return results, also showing you the full SQL query being run so you can copy it and revise if necessary. It will only show the results for logged-in administrators to the site, so your users never see the output.

Don’t be shy, we really do want to see your portfolios. If you think you have what it takes, email us at steve.jenkins@imagine-publishing.co.uk with a URL and a quick comment.

Already looking forward to getting your portfolios, so start sending now.

- Main Features
Web Designer’s HOT 100 2012
- Annual feature special with 15-pages of expert tips on what’s hot in HTML5, CSS3, jQuery and WordPress!

Adobe Proto
- Learn how to generate site wireframes on the fly with this new Android-based application

Design Diary: Fjord & Flypost
- Agency Fjord explains the process behind redesigning and rebranding the Flypost mobile app

Pro File: CHIPS NY
- We land on Brooklyn New York for a chat and tour with this three-man creative collective

- Also inside…
- Next-gen rollovers: Add big impact hover effects using CSS3
- Design an image-slider header element with Photoshop (part 1)
- Add trendy parallax-scrolling techniques to your backgrounds
- Discover how to cache browser data with the Web Storage API
- Learning JavaScript, part 4: generate custom backgrounds
- Emulate interactive maps inspired by taocommunity.com
- Master transparency effects with layered images

- Covermount CD
Portfolio & MMO WordPress Themes worth $50
OVER 85 mins of video:
Dreamweaver Forms Part 1 video
AS3 Menus Part 2 video
Wacky Duck Font from Nick’s Fonts
30 Music Loops from Soundsnap
Skin and fur texture pack from Go Media’s Arsenal
25 Japanese Foliage Vectors from Design Fruit

As usual, you an buy the issue directly from our Imagine eShop

The hottest trend in web design right now is responsive design. Thanks to the powers of CSS3 and HTML5, we can finally embrace the concept of One Web, which lets us build one website that adapts to the device it is being viewed upon. This is necessary since the plethora of devices on the market is ever-growing, and with that we get more and more screen resolutions to take into account. For most projects it just isn’t possible to build a mobile version, an app and then a tablet version, and a desktop one at that – there is no sense in the economy there.
Luckily responsive web design can help, thanks to the possibility to query the screen resolution using   @media and min-width, and then act upon that. This means that we can have one set of styles for resolutions up to 768 pixels, and one for those above, for example.
320 and Up is an interesting framework developed by Andy Clarke that helps you build sites, starting with the most common denominator, which is the smallest screen. Then we add to it with additional styles. This tutorial will help you understand how to start working with it, so that you can apply it to your own projects.

tools | tech | trends: HTML, CSS, JavaScript, 320 and up (framework)
expert: Thord Daniel Hedengren
tutorial files: download

01. Download 320 and Up

The first thing we need to do is download the 320 and Up framework. At the time of press the most current version available is 0.9, and you can access it directly by visiting http://stuffandnonsense.co.uk/projects/320andup/latest.zip

02. Examine the package
The 320 and Up ZIP archive contains two folders, one titled Multiple linked style sheets and one called Single style sheet. These contain different versions of the 320 and Up framework, either as one style sheet or split up into several. The fewer style sheets you use the better, since it makes it easier on the server due to fewer requests, but it also means the files get bigger and perhaps harder to work with. Copy the contents of the Single style sheet folder to a place of your choosing. That’s what we’ll work with.

03. A closer look at the contents

320 and Up is an organised framework, as you’ll see when looking at the contents of the Single style sheet folder. You’ve got your style sheets in a folder called ‘CSS’, images in the ‘img’ folder and JavaScript files in the ‘js’ folder. You’ll also notice ‘index.html’ and ‘404.html’, which will help us create our mobile site.

04. Let’s take a look at ‘index.html’
The ‘index.html’ file is essentially empty of content, the only thing we get is a h1 heading at the top and the basic HTML markup needed. What’s interesting is the actual markup obviously, and the style sheets that make it all happen. Get familiar with ‘index.html’ and, if things like viewport are Greek to you, at least take a look at the page markup, starting with header on line 63, down to the closing off footer on line 78.

05. ‘index.html’ in the browser
Looking at ‘index.html’ in the browser as it is now doesn’t tell us much, but the developer has been kind enough to leave us a grid that we can ”activate”. Open ‘style.css’ (in the CSS folder) and scroll down to line 64. There, uncomment the url(../img/tmp/grid.png) repeat-y 50% 0 part for the html tag. Reloading ‘index.html’ in the browser will show a grid image being repeated, which will be helpful as we go along.

06. Let’s add some content
Let’s add some content to ‘index.html’. First of all, change the contents of h1 (on line 64) to something else, and then put a few simple paragraphs within the <div role=”main”> tag on line 69. Dragging the Browser window now
will just let the content flow to almost full width.

07. Populate the other columns
To really get an idea of how things relate to each other, let’s add some paragraphs to the <div role=”complementary”> as well. Then, while we’re at it, put something within the <footer role=”contentinfo” class=”clearfix”>, preferably something that tells you it is from the footer.

08. It doesn’t work!

Taking a look at ‘index.html’ as it is now, you’ll notice that nothing aligns – the content is just presented in one long column. That’s because 320 and Up doesn’t come littered with stylings for your desktop experience.

09. Find our way in the style sheet
If you want to learn a thing or two on how to organise a style sheet, look no further than to ‘style.css’. There’s even an index at the start of the file, which is nice. Consult it to find your way in the file.

10. Let’s add some style

In ‘style.css’, you’ll find that the media queries start at line 423. There you’ll find a placeholder for adding styles for screens larger than 480 pixels (min-width: 480px is the rule). Let’s make some changes to the h1 tag here, shall we? The added code changes the h1 color to blue, gives it padding and a line below it whenever the screen is more than 480 pixels. Obviously we could add more, but this will do for this particular size.

001 /*480px ______________ */
002 @media only screen and (min-width: 480px) {
003 /* 2.HEADINGS */
004 h1 {
005 color: blue;
006 padding-bottom: .1em;
006 border-bottom: 1px solid #bbb;
007 }

11. Column markup
If you drag your Browser window right now, you’ll find that larger screens also inherit the style we added in step 10. That’s because we’re designing from the small screen out. Next resolution is 768 pixels upwards (line 453 in ‘style.css’), so let’s make this the point where we start using columns. First, open ‘index.html’ and find <div role=”main”>, to which you’ll add class=”content-main”. Then do the same with <div role=”complementary”> but add class=”content-complementary”. This will make it easier for us to style the div containers using CSS.

12. Add the main column style

Next, go back to ‘style.css’ and the @media rule for min-width: 768px (and up). Here, under ”11. MAIN”, we’ll add the necessary style to float the div.content-main container left.

001 /* 11.MAIN */
002 div.maincontent {
003 float: left;
004 width: 65%;
005 }

13. Add the secondary column style

Now, let’s give the secondary column, the one with the role ”complementary” in ‘index.html’, float: right and a better suited width. In fact, let’s also make sure that the font size differs and the color is dark grey rather than black as the main content. Refer to ”3. TYPOGRAPHY” and ”12. COMPLEMENTARY” in the code below, still within the @media rule with
min-width: 768px, of course.

001 /*768px ___________ */
002 @media only screen and (min-width:     768px) {
003 /* 3.TYPOGRAPHY */
004 div.complementarycontent p {
005 font-size: 0.9em;
006 color: #666;
007 }
008 /* 11.MAIN */
009 div.maincontent {
010 float: left;
011 width: 65%;
012 }
013 /* 12.COMPLIMENTARY */
014 div.complementarycontent {
015 float: right;
016 width: 30%;
017 }
018 }/*/mediaquery*/

14. Draw the line

There are several sizes beyond min-width: 768px, but chances are you want to draw the line somewhere as to how wide your site can be. We’ll do that in the @media query with min-width: 992px, setting the maximum allowed width to 960 pixels. While we’re at it, let’s also make that blue h1 heading a bit larger, shall we?

001 /*992px ____________ */
002 @media only screen and (min-width:     992px) {
003 /* 1.ROOT */
004 body {
005 max-width: 960px;
006 }
007 /* 2.HEADINGS */
008 h1 {
009 font-size: 4em;
010 padding-bottom: .5em;
011 }
012 /* 17.MODERNIZR */
013 }/*/mediaquery*/

15. Add an image
Images need some love if they are to fit to the screen size. Let’s open ‘index.html’ and add one to the HTML markup, between two paragraph tags in the main div container. For demonstration purposes, we added ‘image.jpg’ to the img/tmp/ folder.

16. Scale the image

We need to make sure that the image scales with the content. The solution is to give all img tags max-width: 100%, which will make sure that it never exceeds its wrapping container’s width. Adding max-width: 100% to img on
the screen sizes you want this behaviour on is easy, of course. You might want it to be a global thing, in which case you would add it to the img tag globally.

001 div.content img {
002 max-width: 100%;
003 }

17. Hide an element
Let’s say that we don’t want to show the complimentary column’s content if the screen width is smaller than 480 pixels. We do this with display: none applied to div.complimentarycontent, which will stop it from rendering. To make it work, we first must add it under ”12.COMPLIMENTARY” on line 255 in ‘style.css’, to make it a starting point.

001 /* 12.COMPLIMENTARY */
002 div.complimentarycontent {
003 display: none;
004 }

18. Show the element when needed
So now div.complimentarycontent is hidden on small screens, and since that is where the code begins, all other resolutions will inherit it. To sort that out we’ll have to add display: block to div.complimentarycontent at the @media rule, where we want it to start appearing. In this case, that would be at min-width: 768px, where we’ll add display:block to the already present stylings of div.complimentarycontent.

001 /*768px ______________ */
002 @media only screen and (min-width: 768px) {
003 /* 3.TYPOGRAPHY */
004 div.complimentarycontent p {
005 font-size: 0.9em;
006 color: #666;
007 }
008 /* 5.FIGURES & IMAGES */
009 div.content img {
010 max-width: 100%;
011 }
012 /* 11.MAIN */
013 div.maincontent {
014 float: left;
015 width: 65%;
016 }
017 /* 12.COMPLIMENTARY */
018 div.complimentarycontent {
019 display: block;
020 float: right;
021 width: 30%;
022 }
023 /* 17.MODERNIZR */
024 }/*/mediaquery*/

There’s a lot of power in the average PC, with 64-bit operating systems, multicore processors and gigabytes of RAM, along with the parallel processing engines built into modern graphics processors. It’s power that’s being used to drive the web forward, enabling modern browsers to take advantage of the features of HTML 5. But there’s something amiss.
Web gaming has taken a great leap forward with HTML5, as has visualisation. But it’s still missing a few things. If the web is to be the heart of the next generation of computing, in Google’s Chromebooks and Microsoft’s Windows 8, it needs to be as good as – or better than – the graphics capabilities of the desktop, whether it’s a Mac or PC. The web needs that missing link, to give us immersive games and compelling images, and to offer user interfaces that go beyond the traditional point-and-click. So what’s that missing piece?
It’s the third dimension. Internet Explorer 9 may have started a GPU acceleration arms race in the latest browsers, but everything it does is in 2D. From font smoothing to canvas animations, and accelerated layouts to CSS effects, it’s all 2D. It’s not surprising really, as 2D is easy to do, and the APIs and technologies are easily understood, and easy to hook up to HTML, JavaScript, and to CSS. With plenty of graphics processing power in the latest GPUs, whether discreet or integrated, it’s time to add that third dimension to the web at long last.

A short history of web 3D
Delivering a 3D web isn’t easy, as numerous failed approaches to the 3D web have shown. Right from the early days of the graphical web, there’s been interest in building and displaying 3D content online. Starting with VRML, the Virtual Reality Modelling Language, designers and developers have tried to bring 3D worlds and navigation into the familiar frame of the browser.
We can probably blame two science fiction novels for the 3D web; William Gibson’s Neuromancer and Neal Stephenson’s Snowcrash. Both envision 3D interfaces to a global computer network, with Neuromancer’s abstract Matrix and Snowcrash’s Metaverse with its simulated worlds. Both are compelling visions, but only one was to be the inspiration for the first mainstream 3D web technology – the Virtual Reality Markup Language.
Taking the Metaverse as its inspiration, VRML was an attempt to build simulated worlds that would run in your browser, using an XML-based language to describe 3D models and animations, with JavaScript tools for managing interactions between users and 3D objects. It was going to be the next big thing, and all sorts of companies developed plug-ins and editing tools to help kick-start the VRML revolution. But not everyone wanted to install a plug-in, and VRML faded away.
While it’s no longer in the public eye, development of VRML hasn’t stopped, and work is continuing on the next generation of XML-based 3D languages. The latest version, X3D, is now an international standard with tools for humanoid animation and geo-tagging. There’s support for X3D in the open source Blender 3D rendering application, and plug-ins for most common browsers. The team behind X3D hopes it will make its way into modern browsers as an inline language, much like SVG, and there’s an integrated prototype with its own script library.
Other alternatives for delivering 3D in the browser came from the plug-in world, with Java 3D giving 3D capabilities to Java applets. Using either the OpenGL graphics API or Microsoft’s Direct3D, Java 3D is an object-orientated graphics programming tool, with support for most common 3D graphics formats.
The most recent Flash tools added basic 3D support for simple animations using 3D models from Adobe’s graphics tools. They’re easy to build, and don’t require learning additional tooling. The future of 3D in Flash is looking very promising, with GPU-accelerated Stage 3D (previously codenamed Molehill) taking Flash’s frame rate from around 30fps for a few thousand triangles to 60fps with hundreds of thousands of triangles at HD resolution. You’ll be able to use Stage 3D directly, or through familiar third-party ActionScript 3D libraries. Adobe’s been demonstrating Stage 3D with HD 3D games, and its performance is looking impressive.
Microsoft’s Silverlight has had basic 3D support from the very start, as it’s built using the company’s DirectX APIs. You can use the Blend XAML design tools to create and animate 3D objects. The upcoming Silverlight 5 will add full 3D support, with support for textures and shaders. There are plans to integrate the XNA tools used to build Xbox 3D games and add additional effects in future releases. If you’re using an older version of Silverlight, you can take advantage of the Balder 3D libraries (which can also be used to add 3D support to Windows Phone applications).

Game developers can use the Unity tools to build 3D games that run on everything. There’s also a browser plug-in for Mac and Windows, and plans to support Unity in Chrome’s native client and Flash. There are limitations to the free version, and if you’re planning on building 3D web games in Unity then you’ll want to purchase a Pro license. You can write unity scripts in Mono, the open source version of Microsoft’s .NET. It’s a quick tool to learn, and can be used for a lot more than just games, especially if you want your code to run nearly everywhere.
The arrival of Canvas in HTML 5 has allowed some designers to build relatively primitive 3D environments, with JavaScript libraries handling much of the work. It’s an approach that’s slow, both to develop and for end users. Even so, it’s an example of just where 3D on the web can go, built into the browser and using JavaScript libraries and APIs.

What is WebGL?
The biggest problem with all the earlier attempts at delivering 3D on the web was that they all needed plug-ins. That’s not particularly practical, especially when a download (in the early days of VRML) could take hours, and that was before you could even start to view any 3D content. With mobile browsers restricting many plug-ins, you’re unable to view 3D Flash on any iOS devices, and 3D Silverlight is only available if you build a native Windows Phone application.
So how can we give users a fast, powerful, 3D experience? What’s needed is a technology that runs natively in the browser, giving access to all the 3D capabilities of the modern PC from familiar JavaScript APIs. You’d be able to build 3D web applications without needing to learn another programming language, and without having to invest in any new development tool. That’s the promise of WebGL, which looks set to become the in-browser 3D standard, with support from almost all the main browser manufacturers.
Based on the widely used OpenGL standard, WebGL is a browser API for 3D graphics that takes advantage of the 2D work done in HTML 5. It’s an open standard, and is managed by the Khronos Group. It’s still a work in progress, however, and not all browsers support WebGL yet, though there are indications of support from most of the browser manufacturers. If you’re planning on experimenting with the next generation 3D web, then you’ll want to use either recent versions of Chrome or Firefox (or an Internet Explorer plug-in), as WebGL is enabled by default. You can build WebGL applications in a standard Canvas element, which is much like working with 2D graphics, with JavaScript using the standard HTML Document Object Model.

From OpenGL to WebGL
If you’ve done any work with OpenGL before, then the chances are that you will probably find that many of the WebGL concepts familiar (as it’s based on the ES 2.0 specification, and uses the OpenGL GLSL shader language). All you need to add to a page HTML is a Canvas element, with JavaScript code to handle everything else, taking advantage of familiar web techniques. Using Canvas makes WebGL content automatically a seamless part of the page – and part of the DOM – so it can be used for any and all types of user interactions. You can also use CSS tools to handle the Canvas you’re using, so it can be overlaid on text or moved around a page.
There are some significant differences between WebGL and OpenGL, most of which are a result of its integration with the browser DOM and JavaScript. One trick is to use the standard HTML image features to load textures, and another is to use JavaScript’s event handling features. If you’ve programmed OpenGL in the past, then there’s one big advantage to WebGL’s JavaScript dependence, as it means you won’t need to spend time writing code to manage graphics memory, as JavaScript’s memory management tools will handle it all for you.

It’s important to remember that WebGL is a low-level API, and that means you’re unlikely to actually work with it directly. Building 3D from scratch is hard, and while low level access means that you get the best possible performance, the actual coding required to import meshes and texture maps, as well as handling rendering and display, is going to take time and a lot of hard work. While JavaScript has got a lot faster in the last year or so, thanks to the return of the browser wars, it’s still slow compared to the C++ code that normally drives games and 3D imagery. To speed things up, it’s a good idea to pass as much functionality across to the GPU as possible, using shaders to handle complex operations. You’ll need to learn GLSL if you’re going to be doing this, and while it’s a simple language, it is very specialised and different from familiar web coding.
Some of the early WebGL experiments have been impressive. Google’s 3 Dreams Of Black RO.ME (http://www.ro.me/) project uses it to produce a dreamlike music video that mixes morphing animals into a 3D journey through changing landscapes. It’s worth spending some time looking at the associated ‘making-of’ site (launch it from the Technology link), as it goes into a lot of detail on how the various 3D models were built and animated – making it a useful tool for anyone wanting to learn how to build complex WebGL sites.
You can see further WebGL samples on the Chrome Experiments site (http://www.chromeexperiments.com/webgl), where you can get access to the code and libraries used to build the sites.
WebGL is a complex tool, and you’ll get the most out of it using a JavaScript library to handle the more complex effects. Google has released a library from its RO.ME experiment, three.js, which it used to create many of the effects in 3 Dreams of Black, as well as several of the demos on the site. Another useful WebGL library is SpiderGL, which gives you tools for handling realtime rendering. It’s able to import and render 3D meshes, as well as giving you tools for working with the 3D mathematics used to build complex scenes.
There’s a lot to consider when building 3D applications. They’re large environments, and the mathematics needed to calculate interactions between objects can be complex, especially if you’re modelling real world physics. That’s why WebGL JavaScript libraries are important, as they give you a way of handling the algorithms needed to build and programme 3D environments without having to reinvent the wheel each time you build a new site or animation.

Build your own WebGL
The best way to get to grips with WebGL is to build your own WebGL animations, starting simply and building up to more complex animations with support for user interactions. We’ll use WebGL
to display a simple rotating cube, using a pair of JavaScript libraries from Google to simplify things – glMatrix.js to handle 3D objects, and webGl-utils.js to work with the WebGL APIs. Our sample rotating cube is based on the code from the excellent Learning WebGL site (http://learningwebgl.com/blog/). It’s an excellent resource for anyone wanting to get to grips with WebGL, taking you from simple 2D shapes in a 3D world to 3D objects, lighting effects and using the mouse to control a 3D world.
You’ll find the code for the sample on the magazine CD-ROM, as it’s too long to include here. Instead, we’ll take a look at some key pieces of the code that show just how you can construct a WebGL application.
Like all good JavaScript applications, WebGL uses low level building blocks that in turn build functions that finally can be used to deliver an image or an animation. That means we can actually have very little HTML on a page; indeed, all our sample has is a Canvas element and an onload JavaScript call to our WebGL code:

001 <body onload=”webGLStart();”>
002 <canvas id=”cube” style=”border:     none;” width=”500” height=”500”></canvas>
003 </body>
All our code needs is the canvas id, which we can then use to initialise our WebGL code and start to draw and animate a cube. You can find all the following code snippets on the disc also:

001 functionwebGLStart() {
002 var canvas = document.        getElementById(“cube”);
003 initGL(canvas);
004 initShaders()
005 initBuffers();
006
007 gl.clearColor(0.0, 0.0, 0.0, 1.0);
008 gl.enable(gl.DEPTH_TEST);
009 newFrame();
010 }
We first initialise our WebGL space, and set up the shaders and buffers used to communicate with the GPU. Once that’s done, we can initialise our drawing area, clear the WebGL buffers, and paint on the first frame of our animation. The co-ordinate system used by WebGL is very simple. The centre of the canvas is 0.0, the top left -1,-1 and the bottom right 1,1. It doesn’t matter if your canvas is a rectangle or a square – the coordinates remain the same, so you’ll need to be aware of the proportions of your objects.
The actual process of animation is simple enough, using a callback function provide with the Google WebGL utilities library:

001 functionnewFrame() {
requestAnimFrame(newFrame);
002 drawCube();
003 animateCube();
004 }

Once a frame has been drawn, the requestAnimFrame function just calls the newFrame function again, leaving a cube rotating on screen until you load another page.drawCube() paints each cube, while animateCube() calculates the rotation to be applied to the next frame.

001 functionanimateCube() {
002 vartimeNow = new Date().getTime();
003 if (lastTime != 0) {
004 var elapsed = timeNow – lastTime;
005 rotateCube -= (40 * elapsed) / 1000.0;
006        }
007 lastTime = timeNow;
008 }

The cube animation is simple enough, and uses the current time to calculate an angle of rotation. We’ll convert the angle from degrees into radians later in order to update the matrix of points that makes up the cube. You can change the speed of rotation by changing the number in the rotateCube function – the smaller they are, the slower and smoother the rotation.

001 functiondrawCube() {
002 gl.viewport(0, 0, gl.viewportWidth,      gl.viewportHeight);
003 gl.clear(gl.Color_BUFFER_BIT |      gl.DEPTH_BUFFER_BIT);
004                                             005 mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
006 mat4.identity(mvMatrix);
007 mat4.translate(mvMatrix, [0.0, 0.0,     -5.0]);
008 mvPushMatrix();
009 mat4.rotate(mvMatrix,         degToRad(rotateCube), [1, 1, 1]);
010 gl.bindBuffer(gl.ARRAY_BUFFER,     cubeVertexPositionBuffer);
011 gl.vertexAttribPointer(shader        Program.vertexPositionAttribute,         cubeVertexPositionBuffer.itemSize,         gl.FLOAT, false, 0, 0);
012 gl.bindBuffer(gl.ARRAY_BUFFER,     cubeVertexColourBuffer);
013 gl.vertexAttribPointer(shad        erProgram.vertexColorAttribute,         cubeVertexColourBuffer.itemSize,         gl.FLOAT, false, 0, 0);
014                                         015 gl.bindBuffer(gl.ELEMENT_ARRAY_    BUFFER, cubeVertexIndexBuffer);
016 setMatrixUniforms();
017 gl.drawElements(gl.TRIANGLES,
cubeVertexIndexBuffer.numItems,         gl.UNSIGNED_SHORT, 0);
018 mvPopMatrix();
019 }

This is where we start to get into the nitty gritty of WebGL; first setting and clearing the viewport for our animation. We then use a call from the matrix mathematical JavaScript library we’re using to set the projection matrix (pMatrix) that defines where we’re viewing an object from. We also go about defining the base position from where we draw our cube, setting up a model-view matrix of points (mvMatrix), which we’ll use to apply rotations. We first do a translation, moving the array of points behind our viewport with a Z value of -5. You’ll see that at this point, we’re starting to work with much lower level functionality, accessing the WebGL buffers and handing data over to shaders running on the GPU. Once we’ve delivered data to the GPU buffers, we can then draw the triangle elements that make up the cube in our chosen colours. In the event, WebGL supports three types of drawing: points, lines, and triangles.

If you drill down into the rest of the code, you’ll see how we define the matrix of points for the cube, starting with the vertices for each face. We use a similar technique to calculate a matrix of colours that can be used to paint each face of the cube. Other parts of the code set up the shader code that’s used by the GPU. You’ll see there are two shaders used – a fragment shader and a vertex shader.
The shader code isn’t JavaScript – it’s the OpenGL GLSL language. For a simple application like this, the fragment shader does nothing more than draw in the current colour. It’s the fragment shader that handles painting the pixels that make up our object, and it’s the vertex shader that draws our cube (it’ll actually draw anything with vertices, and is a very powerful part of any WebGL application). The rest of the application code handles delivering the matrices that hold perspective and model information to the shaders, as well as compiling and loading the shader code into the GPU.

As you can see, there’s a lot of code for something that looks to be relatively simple on screen. We’ve used relatively low-level JavaScript libraries here; in practice, you’ll probably use much higher level tools to build you applications, as well as importing far more complex models and texture maps produced in 3D design and authoring tools.

Browser support and developer tools
So you want to get started with WebGL. What browsers can you use?
Current support in the major browsers is as follows:
Browser    Version
Mozilla Firefox    4.0 and above
Google Chrome    9.0 and above in Stable, Beta and Dev channels
Apple Safari    5.1 but disabled by default, enable from the developer menu
Opera    11.50 beta on Windows only
Internet Explorer    Not currently supported

If you want to use WebGL in Internet Explorer, use either Chrome Frame (a Chrome browser running inside IE), or the recently released IEWebGL plug-in.
At the moment, there aren’t any specific WebGL design tools on the market. However, you can build models in 3D design tools like Blender, and export them in formats that, if not directly suitable for WebGL, can be converted to WebGL-friendly formats.

Security concerns
Recent news stories have focused on security issues with WebGL, and Microsoft not supporting it in Internet Explorer as a result. Certainly, it’s theoretically possible to use WebGL to take advantage of graphics driver bugs to, for example, steal the content held in a different graphics page – allowing WebGL malware to take screenshots of other windows and tabs – or to continually crash your graphics driver, making your PC unusable until you reboot. With WebGL applications coming from the web, it’s sometimes hard to know what’s malware and what’s not, especially with the current spate of poisoned advertising elements.
It turns out that this type of attack is possible with any software that works directly with a GPU (including Flash’s Stage 3D and Microsoft’s Silverlight). We’ve grown used to the protections built into today’s CPUs and today’s operating systems, which stop similar attacks from working in traditional applications. GPU computing is still relatively new, and those protection devices aren’t yet built into GPU silicon or into graphics drivers. The WebGL working group is working on several different approaches to securing 3D web graphics, among them tools for blacklisting insecure drivers and operating systems.
Currently, Firefox will automatically block WebGL on Windows XP, and on versions of OS X that are older than 10.6, as well as locking down specific drivers on UNIX systems. It also enforces minimum driver versions for both NVIDIA and ATI graphics cards, as well as for Intel’s integrated graphics chipsets. Google Chrome does much the same, blacklisting specific graphics chipsets on Windows and OS X (and blocking all but NVIDIA cards on Linux).
As WebGL becomes more popular, it’s likely that blacklists and whitelists for graphics hardware and drivers will be managed by browser developers and updated regularly. A driver that worked in the past may not work in the future, and your WebGL code and sites will need to check that WebGL will run, and if not provide an appropriate fall back, perhaps to Flash or Silverlight. However, it’s likely that any driver that’s blacklisted for WebGL will have also been blacklisted by any other web 3D tool, as they all have to build on the same foundations.

The future is in 3D
The web is going to be 3D, and looks increasingly likely that the 3D future is going to be powered
by WebGL. With browser giants like Mozilla and Google throwing their weight behind the specification, it’s not going to go away, and if you’re using the latest Chrome or Firefox builds, you’re running a browser that’s ready for WebGL content. Competition from 3D versions of Flash and Silverlight is a good thing, as it’ll encourage all three different approaches to the 3D web to develop in different directions – with 3D tools for WebGL (and the JavaScript libraries and tools that make it easy to use) that are an important part of the next generation of the web. If you’re thinking of working with 3D content, then it’s certainly worth thinking about trying it out, and building your first 3D experiments today, not tomorrow. They might just be spinning cubes now, but those cubes are the building blocks of 3D games, of 3D shopping sites, and of
a whole new way of working with content and services online.

Alara Mills, an educational product designer, recently launched a unique Web site where beginning and experienced Web authors can learn how to get started with coding in HTML5 (Hypertext Markup Language). The newly emerging HTML5 standard is overseen by the international World Wide Web Consortium (w3.org) and consists of more than 100 different elements designed to semantically “mark-up” the content and structure of
Web documents.

Necessity being the mother of invention, Mills created the world’s first information graphic depicting the full collection of the HTML5 Elements (including their Global Attributes and Event Handlers), to aid her with her own learning of HTML. With a layout inspired by the Periodic Table of Elements from the field of chemistry, Mills recently released a Poster-size version of her information graphic which is now available for purchase at www.AlaraMills.com. The HTML5 Elements Table Poster is the ultimate visual reference tool for writing standards-compliant XHTML documents confidently.

Foundation HTML5 Animation with JavaScript covers everything that you need to know to create dynamic scripted animation using the HTML5 canvas. It provides information on all the relevant math you’ll need, before moving on to physics concepts like acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics.

Foundation HTML5 Animation with JavaScript is a fantastic resource for all web developers working in HTML5 or switching over from Flash to create standards-compliant games, applications, and animations that will work across all modern browsers and most mobile devices, including iPhones, iPads, and Android devices.