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/

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.

Some of the world’s most influential women in digital design and technology will come together in a unique, mostly online conference, to discuss and promote collaboration and innovation and showcase female excellence in the industry.

Titled ’The Emerge Mini-Conference,’ the three day series of talks and workshops is organised by newly formed not-for-profit Web Heroines and hopes to address the gender imbalance in the industry by engaging more women with design and technology. The Emerge Mini-Conference will also showcase the fantastic work by women from within the industry and aims to share ideas, opinions and solutions.

Hosted in partnership with The British Library Business and IP Centre and supported by the Big Lottery Fund, The Emerge Mini-Conference will take place over 16th, 17th and 18th January 2012.  There will be ten virtual sessions followed by a networking session and a finale pivotal panel debate on the evening of the 18th January which takes place at the British Library in London.

The panel debate is open to all with a limited number of tickets available for purchase at £10 each on the Emerge website. Attendees of the event will come face-to-face with four inspirational female panellists, who are renowned professionals in the field of digital design and technology.

Online sessions will include workshops, podcasts and inspirational talks by influential women in the industry including Naomi Atkinson who has worked for Audi and BT and was named “The Next Big Thing” at The Critters.

Keri Lambden, Senior Member and Founder of Web Heroines, added “This is a unique accessible event which reaches out to women from all backgrounds particularly those who have suffered hardship and want to get their lives back on track by learning new skills, adding strings to their bows and meeting like-minded peers. We are delighted to be working with some of the best and most established female practitioners in the industry and hope that our unique showcase and information exchange will inspire women to take the leap, make their ideas happen and keep innovating”.

Julie Howell, a guest speaker at the conference who has been honoured four times for her influence on the digital industry, added, [this is an] “exciting new initiative that champions the role of women in design and technology industries”.

The Emerge Mini Conference is for anyone who loves digital design programming, mobile apps, graphics, UX/UI and gaming, and while it is aimed at addressing the gender imbalance men are more than welcome too!

The Emerge Mini Conference is organised by Web Heroines and forms part of a wider strategy and mission by the newly formed, Norfolk based not-for-profit to showcase and encourage more women into the digital and technology industry.

For more information about the Emerge Mini Conference, details on all of the sessions and to book your place, visit the microsite today: http://webheroines.com/emerge/

Join the conversation on Twitter by following @webheroines and use the hashtag #WHemerge

About Web Heroines

Web Heroines is a not-for-profit organisation which formed as a cooperative in 2011 after a group of like minded people were concerned by the lack of women in design and technology. Web Heroines’ mission is to inspire, engage and inform women about the digital industry and increase the number of women working in the field. Web Heroines also hopes to inspire women to start their own businesses, get better jobs and not feel isolated. For more information about Web Heroines visit: www.webheroines.com/about-us or refer to the press pack which can be downloaded here.

As part of our HOT 100 special in January, we’ve decided to give you a chance to get involved with a quick reader poll that looks back at 2011 and forward to 2012.
First up we want your vote for which of our thirteen favourite Lightbox sites from each issue should be crowned overall Site of the Year. We’ve provided each one right here, reminding you of the URLs and designers, as well as providing a quick screenshot to illustrate each example’s greatness.

Secondly, we want to know which web agency from our Pro File roundup over the past 12 months is not only your favourite, but crucially could be the one to watch out for most in 2012.

Cast your votes now to have your say!

ISSUE 179
Greater Dunnellon Historical Society

URL: dennellondepot.com
Designer: Flourish / www.floridaflourish.com

ISSUE 180
Diesel Fresh & Bright Superheroes

URL: www.diesel.com/freshandbright
Designer: doubleyou, The Mushroom Company, Robert Bartholot /
www.doubleyou.com, www.mushroom.es, www.bartholot.net

ISSUE 181
HORT

URL: www.hort.org.uk
Designer: HORT, Eike Konig, Ben Wise / www.hort.org.uk

ISSUE 182
HAY

URL: http://hay.dk
Designer: Hello Monday / www.hellomonday.com

ISSUE 183
Pica Pic

URL: www.pica-pic.com
Designer: Hipopotam Studio / www.hipopotamstudio.pl

ISSUE 184
Welcome to Pine Point

URL: http://interactive.nfb.ca/#/pinepoint
Designer: The Goggles (Paul Shoebridge and Michael Simons) / www.thegoggles.org

ISSUE 185
Square Circle

URL: www.sqcircle.com
Designer: Square Circle / www.sqcircle.com

ISSUE 186
John Lewis Harmony

URL: www.johnlewisharmony.com
Designer: Adam & Eve, Upsetmedia
www.adamandevelondon.com, http://upsetmedia.com

ISSUE 187
Maersk Fleet

URL: www.maerskfleet.com
Designer: TRIPLE LBi / www.triplelbi.com

ISSUE 188
WinterVolume

URL: http://wintervolume.com
Designer: WinterVolume / http://wintervolume.com

ISSUE 189
Flow Festival

URL: www.flowfestival.com
Designer: Tsto, Byroo / www.tsto.org, www.byroo.fi

ISSUE 190
Tamron Island

URL: www.tamron-island.co.uk
Designer: Netzbewegung Gmbh / www.netzbewegung.com

ISSUE 191
The Expressive Web

URL: http://beta.theexpressiveweb.com
Designer: Big Spaceship / www.bigspaceship.com

And that’s the lot – Be sure to cast your votes now to make your opinion count!

HOT 100 POLL: CAST YOUR VOTES FOR SITE & AGENCY OF THE YEAR

So you’ve had a look at the selections and now it’s time to vote for your favourite Lightbox Site of the Year and the Pro File Agency of the Year.

Simply make your selection from the form shown below to register your opinion on who deserves to take the honours…

cforms contact form by delicious:days

cforms contact form by delicious:days

For a chance to win a set of 5 books simply fill out the form below. Terms and conditions

The lineup includes:

Distinctive Web Design – Alex Dawson

Design for Hackers – David Kadavy

Communicating the User Experience – Richard Caddick & Steve Cable

Typographic Web Design – Laura Franz

Future-proof Web Design – Alex Dawson

cforms contact form by delicious:days

- Main Features
Go For It
- Discover the hottest social-networking APIs and how to integrate them into your site, featuring Google+, Facebook and Twitter

Adobe MAX 2011
- Looking back at the highlights from this year’s important developer conference

Design Diary: LBi Denmark
- Chronicling the creative process behind the excellent MaerskFleet.com

Pro File: Underwired Amaze
- Inside the offices of this formidable London-based creative agency

- Also inside…
- Ocupop talks us through the art of web branding
- Create interactive animations from a Twitter feed
- How to finish off and code your textured navigation bar
- Take control of your image backgrounds using CSS3
- Make your own animated logos with WebGL
- Getting started with JavaScript arrays and functions
- Build your own eCommerce store with Actinic Online
- Take your video and sites full screen with HTML5
- News on web cookie laws and Google Panda

- Covermount CD
Actinic Online exclusive extended trial offer
24 Doodle Dandy brushes from Design Fruit
Twitty Bird font set from NicksFonts.com
35 transition sound effects from Ultrashock
15 Go Media Arsenal grunge texture graphics
Tumble WordPress theme from Organic Themes
28+ minutes of HTML5, CSS3 & jQuery videos from KillerSites
1hr 55 mins Flash CS3 User Interface video lesson from Cartoon Smart (part 2)
Free social icons pack from icondock.com

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

Creating a data-driven website can be challenging as designers come to terms with data manipulation to deliver content to the browser. Alpha Five Version 11 can connect to any of the common web data sources, from MS Access to MySQL from SQL Server to Oracle, it’s just a matter of “connect and deliver” Once you are connected to your data source, Alpha Five comes to life as it responds at lightning speed using codeless Ajax to deliver information to your site visitors. Another exciting feature of Alpha Five is its ability to allow you to effortlessly integrate image galleries, intelligent platform-aware video, as well as data-aware maps without writing a single line of code. All this, with the added benefits of support for gestures, orientation, swiping, pinch-zooming and momentum scrolling on touch-driven devices.

For a free 30 day trial please visit; http://alphasoftware.co.uk/free_trial_download.a5w?d=000194