Web Designer 242 - 2015 UK

FREE 247

MINS OF

JQUERY VIDS

BUILD WITH

ANGULARJS HOW TO CODE, CREATE AND TEST

28 RESPONSIVE IMAGES

BEST CONTEMPORARY & NEXT-GEN TECHNIQUES

PAGES DEDICATED TO THE JS LIBRARY BUILD YOUR OWN PLUGIN STEPS TO CREATE & UPLOAD TO THE OFFICIAL REPOSITORY

TRIGGER CSS EVENTS

UNIQUE 3D INTERFACES

IMPLEMENT JQUERY TO KICKSTART ANIMATIONS

NAVIGATE WITH DEVICE ORIENTATION

WEB AUDIO IN ACTION UNLEASH THE API TO CODE A DRUM SYNTH

ISSUE 242

welcome

Welcome to the issue THE WEB DESIGNER MISSION To be the most accessible and inspiring voice for the industry, offering cutting-edge features and techniques vital to building future-proof online content

Highlight

“

Steve Jenkins

Skills can be learned. Values however are different

”

The team at Phoenix reveal how they want their work to touch people’s lives. Page 32

J

Become a jQuery master

Query, it’s a staple part of a web designer/developers toolkit. Its core use may have shifted but it’s still a much in demand library. According to statistics from libscore.com it’s in use on 65 per cent of the top one million websites. JQuery can’t be ignored and we thought it was time we dedicated ourselves to the JavaScript library. This issue features a whopping 28 pages on it. So what’s inside? We have two features, ‘Be a jQuery code master’ and ‘25 Pro plugins’. Code master unveils the core techniques needed to code, how to integrate jQuery with ES6 and our very own

cheat sheets which you can download from FileSilo. The Pro plugins feature takes a look at an essential collection of 25 of the best add-ons, perfect for making projects exactly as you want them. Keeping them company is a couple of tutorials. Learn the principles needed to build your own jQuery plugin and find out how to upload to the jQuery repository. Plus, discover how jQuery can be used in combination with CSS to trigger events in an image gallery. While jQuery takes centre stage we haven’t forgotten the ever popular Angular. And, we have responsive image best practices, 3D UIs and the power of the Web Audio API. More than enough to keep you busy until next time out. As always enjoy the issue.

“

JQuery’s gentle learning curve can be a great intro to JavaScript and since conception it’s become the go-to for a first ‘taste’ of JavaScript

”

Follow us on Twitter for all the news & conversation @WebDesignerMag Visit our blog for opinion, freebies & more www.webdesignermag.co.uk

FREE – exclusive with this issue

46

Designer resources Video Tuition – jQuery: 274 Minutes of expert video guides from Digital Tutors Assets – The ‘Oh So Dandy’ Pack from A Cup of Resources – 10 Exclusive polygonal textures Fonts – Manbow and Mesmerize from Typodermic fonts

www.filesilo.co.uk/webdesigner meta _________________________________________________________________________ 3

contributors

This issue’s panel of experts Welcome to that bit of the mag where we learn more about the featured writers and contributors…

Imagine Publishing Ltd Richmond House, 33 Richmond Hill Bournemouth, Dorset, BH2 6EZ ☎ +44 (0)1202 586200 Web: www.imagine-publishing.co.uk www.webdesignermag.co.uk www.greatdigitalmags.com

Magazine team

Editor Steven Jenkins

[email protected] ☎ 01202 586233

Senior Designer Benjamin Stanley Production Editor Carrie Mok Photographer James Sheppard Senior Art Editor Will Shum Editor In Chief Dan Hutchinson Publishing Director Aaron Asadi Head of Design Ross Andrews Contributors

Leon Brown, Mark Billen, David Howell, Daniel Jenkins, Tam Hanna, Mark Shufflebottom, Ralph Saunders, Rafael Garcia Lepper, Sean Tracey

Advertising Digital or printed media packs are available on request. Head of Sales Hang Deretz ☎ 01202 586442 [email protected]

The library’s core is “well-thought-out and the jQuery team has an incredibly methodical process to implementing new features

”

Sales Executive Luke Biddiscombe ☎ 01202 586431

FileSilo.co.uk

Daniel Jenkins Daniel is a self-confessed technologist with a background in leading web projects for multinational brands. His article gives an overview of jQuery and why fully understanding its features, enables it to stay a relevant library in the modern web developers ever-growing toolkit. Page 38

Assets and resource files for this magazine can be found on this website. Register now to unlock thousands of useful files. Support [email protected]

International Web Designer is available for licensing. Contact the International department to discuss opportunities. Head of International Licensing Cathy Blackman ☎ +44 (0) 1202 586401 [email protected]

Subscriptions [email protected]

Tam Hanna Tam Hanna started off his career programming in C and C++. Due to that, he can understand the pain caused by duck typing and prototypical inheritance. This issue he reveals 25 of the best contemporary jQuery plugins. Page 56

Rafael Garcia Lepper Rafa is a JS developer specialising in writing single-page applications who’s been working on the web for 15+ years. In this article he takes us through key techniques for building a web app using best practices in AngularJS. Page 78

Mark Shufflebottom Mark is a professor of Interaction Design at Sheridan College. This issue Mark creates an augmented 3D user interface that uses the mobile or tablet’s device orientation controls to navigate the menu in 3D space. Page 66

To order a subscription to Web Designer: ☎ 0844 848 8413 ☎ +44 1795 592 878 Email: [email protected] 13-issue subscription (UK) – £62.30 13-issue subscription (Europe) – £70 13-issue subscription (ROW) – £80

Circulation Head of Circulation Darren Pearce ☎ 01202 586200

Production Production Director Jane Hawkins ☎ 01202 586200

Finance Finance Director Marco Peroni

Founder Group Managing Director Damian Butt

Printing & Distribution

Printed by Southernprint Ltd, 17-21 Factory Road Upton Industrial Estate, Poole, Dorset, BH16 5SN

David Howell David is an experienced writer, author and journalist who runs his own publishing company Nexus Publishing. This issue he takes his interview skills to Montreal and the offices of digital creatives Phoenix. Page 32

Leon Brown Leon is a freelance web developer and trainer who assists web developers in creating efficient and secure code for projects. This issue he shows how to use jQuery for managing user interactions with CSS. Page 46

Sean Tracey Sean is a technologist currently playing with technology for a London-based newspaper. This issue he demonstrates how to use the Web Audio API sound buffers to create a drum kit that triggers sounds. Page 84

Ralph Saunders Ralph is a seasoned front-end developer working at Redweb. In this issue he explores responsive imaging techniques and tells us how can give rise to responsive art direction for creative teams. Page 70

4 __________________________________________________________________________meta

Mark Billen Mark is a freelance technology journalist with a background in web design and development. This issue he tackles the Lightbox pages and reveals how to create a host of quick-fire techniques you need to know. Page 14

Got web skills?

We’re always looking for the hottest web-design talent. Email [email protected] with examples of your creative work

Distributed in the UK, Eire & the Rest of the World by Marketforce, 5 Churchill Place, Canary Wharf, London E14 5HU ☎ 0203 787 9060 www.marketforce.co.uk Distributed in Australia by Network Services (a division of Bauer Media Group), Level 21 Civic Tower, 66-68 Goulburn Street, Sydney, New South Wales 2000, Australia, ☎ +61 2 8667 5288

Disclaimer

The publisher cannot accept responsibility for any unsolicited material lost or damaged in the post. All text and layout is the copyright of Imagine Publishing Ltd. Nothing in this magazine may be reproduced in whole or part without the written permission of the publisher. All copyrights are recognised and used specifically for the purpose of criticism and review. Although the magazine has endeavoured to ensure all information is correct at time of print, prices and availability may change. This magazine is fully independent and not affiliated in any way with the companies mentioned herein. If you submit material to Imagine Publishing via post, email, social network or any other means, you automatically grant Imagine Publishing an irrevocable, perpetual, royalty-free license to use the materials across its entire portfolio, in print, online and digital, and to deliver the images to existing and future clients, including but not limited to international licensees for reproduction in international, licensed editions of Imagine products. Any material you submit is sent at your risk and, although every care is taken, neither Imagine Publishing nor its employees, agents or subcontractors shall be liable for the loss or damage.

© Imagine Publishing Ltd 2015 ISSN 1745-3534

DOMAINS | MAIL | HOSTING | eSHOPS | SERVERS

1&1 CLOUD SERVER

TEST THE

TOP PERFORMER

BEST! Easy to use – ready to go

The 1&1 Cloud Server offers unbeatable performance in terms of CPUs, RAM and SSD storage! Implement your cloud projects with the perfect combination of flexibility and powerful features.

Load balancing SSD storage Billing by the minute Intel® Xeon® Processor E5-2660 v2 and E5-2683 v3

1 month free!

Then from £4.99 per month*

1

TRIAL TRY FOR 30 DAYS

1

CLICK

UPGRADE OR DOWNGRADE

1

CALL

SPEAK TO AN EXPERT

0333 336 5509 * 1&1 Cloud Server 1 month free trial, then from £4.99 per month. No minimum contract period. Prices exclude 20% VAT. Visit 1and1.co.uk for full offer details, terms and conditions. Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries. 1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.

1and1.co.uk

contents

inside issue 242

Cutting-edge features, techniques and inspiration for web creatives Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch…

[email protected]

Quick look…

@WebDesignerMag

www.webdesignermag.co.uk

Cover focus

08 Virtual reality, a reality VR has been on the cards for years. But 2015 sees the technology finally coming to fruition. Web Designer investigates what lies ahead

10

Webkit: The best must-try resources out there Discover the libraries and frameworks that will make your site a better place to visit

12

The future of jQuery Developer Leon Brown of Nextpoint discusses what is next for jQuery and the potential it has to offer web projects

14

Lightbox A showcase of inspirational sites and the techniques used to create them

26 A story of shoes Find out how the team at BBH pulled together 200 years of Clark’s history to create “not just another corporate history”

32

Changing Perceptions Branding, interactive solutions and visual communication in all its forms converge at Phoenix. They tell us their story

38

The

jQuery issue

38 Become a jQuery code master Learn the core techniques, how jQuery works with ES6 and the key benefits of using the library in a professional environment

56 25 Pro jQuery plugins Discover the best contemporary jQuery add-ons for making your sites and apps a better experience for the user

78 Build with AngularJS Get to grips with the techniques and know-how needed to start creating your own web apps

90 Hosting listings An extensive list of web hosting companies. Pick the perfect host for your needs

98 Next month What’s in the next issue of Web Designer? Find out what you can look forward to

6 __________________________________________________________________________meta

32

ProFile: Phoenix

The Creative Studio unveils how they operate

14 18

Lightbox: Amy

Promotional movie site and poignant shrine

FileSilo

Visit the WEB DESIGNER online shop at

A comprehensive collection of free designer resources!

for back issues, bookazines and DVDs

94 Get the latest must-have resources and videos

• 274 Mins of jQuery video guides • 10 Polygonal textures • The ‘Oh So Dandy’ pack • Manbow and Mesmerize fonts



Web gurus take you step-by-step through professional techniques

94

46

jQuery user interactions Use jQuery to manage user interactions with CSS to support visual presentations

66

Code a mobile 3D UI Create a browsing experience with three.js’ CSS renderer and a mobile’s device orientation controls

70

Master responsive images Learn how to use and srcset and bring art direction to responsive images

Never miss an issue

Subscribe

56

The best contemporary jQuery add-ons for making sites and apps a better experience



Turn to page 76 now USA readers turn to page 89 for an exclusive offer

The tools and trends to inspire your web projects

web workshop

08 The VR revolution (again)

74

Technology has finally caught up with virtual finally be realised. Web Designer looks at what lies ahead in the very near future and

web developer

how it can work with the browser

10

Webkit: The best must-try resources out there

50

this is where you need to start

Comment: Leon Brown

78

the future of jQuery, where it’s going and

Use jQuery to make your code simple to understand

what it means for web developers

Leon Brown

Long-time web developer Leon discusses

Create a custom jQuery plugin Discover the techniques needed to build a bespoke add-on and submit to a repository

Need a new framework or library? Then

12

Code CSS 3D zoom effects dynamite.ch scholzandfriends.ch/de/

reality. This means that its potential can

Build with AngularJS Get to grips with the know-how needed to start creating your own web apps

84

Make drums with Web Audio Use sound buffers to create a drum kit that responds quickly and reuse to trigger sounds

meta _________________________________________________________________________ 7



The tools and trends to inspire your web projects

If you have a creative project, new web product or great designer story, contact the editorial desk

[email protected]

@WebDesignerMag

The VR revolution is here (again)

Get Web Designer digital editions

Virtual reality is finally a reality. Web Designer takes a look at what’s happening now and what the browser will bring

Get your hands on a collection of top Angular tips and techniques

T

he concept of virtual reality has promised a lot but in truth, it has delivered very little for as long as Web Designer can remember (and we have long memories). But, it doesn’t matter what age you are, VR will have inevitably been promised and failed in your lifetime. For most of us games will have been the path to VR. Back in the early Nineties Sega announced its VR headset and it was in the arcades where the magic of VR was happening. They even brought out Virtua Racing for some ridiculous sum. Nintendo didn’t want to be left out as they released the Virtual Boy. TV and films were another breeding ground for the future, who can forget Neo and The Matrix trilogy? The reality of virtual reality back then was that it never fulfilled its potential, simply because the technology wasn’t ready. But, in those intervening years technology and hardware have advanced far enough to make the next VR revolution a real one.

It was the advent of the Oculus Rift when virtual reality really took off. Palmer Luckey (what a great name) was the man, or should we say boy, who founded the headset. In a very short space of time he has turned VR into the reality it was always going to be. After showing off the OR in 2013, Luckey was selling the OR to social giants Facebook for the princely sum of $2 billion. Not bad for a couple of years work. Oculus is not the only VR headset set to make its way into the market. There is the Samsung Gear, HTC Vive and Fove VR to name a few, and all of these will be giving the consumer a new experience very soon. And, of course there is the Google Cardboard, a true budget option that will undoubtedly ensure that the VR experience is going to be brought to the masses. But what really excites us at Web Designer is the potential of VR in the web space. Browser support, tools, SDKs and libraries are all out there giving developers the opportunity to get creative. The early adopters have already been getting creative with the technology. Back in

issue 231 we featured the Lexus NX experience (lexus.eu/vr) a project that brought together VR, HTML5 and 3D. This was very much a simple viewing experience with little interactivity. But, creators Amaze were already looking to the next possible step: interaction. Peugout’s Catch the Dragon (catchthedragon.nl) is alos another great example of virtual reality, 360-degree video and the potential that it has in the browser. Pushing forward the VR browser experience are the good people at Mozilla. The MozVR team are looking to bring high-performance virtual reality to the open web. Check out MozVR (mozvr.com) for more on the project. Plus, look out for the next issue of Web Designer as we talk to the team and find out more about its VR work. You can also try getting your hands dirty with the latest build of Firefox with VR (mozvr. com/downloads) There is so much more to come over the coming years, and even months – this is only the beginning. The VR revolution is here and, this time, it really is happening.

3 VR Projects to check

Get your hands on a VR headset and see how good virtual reality is today

VR Cricket bit.ly/1LYGlWK Have a go with the motion-sensored bat. It’s just like being on the pitch.

Chrome Experiments for VR vr.chromeexperiments.com A collection of projects perfectly viewed with Chrome and Cardboard.

8 _______________________________________________________________________header

Inspirit mozvr.com/projects/inspirit A surreal experience that uses three.js, Blender and the Web Audio API.

Web Designer’s latest digital addition to our burgeoning collection is Advanced Angular. The library has become part of a developer’s arsenal and on offer is a host of must-know information. Don’t forget The Art of Responsive Design and The Web Apps Handbook. Get an insight into how to build apps with HTML, CSS and JS and the popular libraries including PhoneGap. Plus, check out Web Design Superstars, 225 Best Web Tools and Resources and Amazing Websites and How to Build them Vol 02. How can you get your hands on a Web Designer digital edition? Head to bit.ly/1hsGYgl to download the free Web Designer app and find them waiting for you as an in-app purchase.

inspiration



A collection of inspirational visuals

Kick The Sugar Addiction bit.ly/1GtFDUo

1

Real-life imagery of sugary sweet products are accompanied by simple circles of information telling the reader how much sugar they consume.

2

2

Keeping the sugar theme on track is a pink-based colour theme, along with the use of child-like fonts that help the infographic to reinforce the message.

Col ur picker Hot hexidecimal codes

1

Typesetter The best fonts you need

Graphics

Th mematic

Great visuals to inspire

Style up your WordPress

The Umbrella Factory

King

Beautiful backgrounds, gorgeous colour schemes and a real sense of style epitomise Brian Miller’s work for The Umbrella Factory project.

A host of layouts all with a contemporary look and feel. Choose from fullscreen, full-width, boxed and eCommerce to create a great-looking web presence.

Gray-pink bit.ly/1GtFEI0

TTFirs

bit.ly/1PO1x7O #FDE7E5

#C4BCBC #FAC1C1

#878182

#F26E79

Big, round and bold, perfect when impact is needed.

Angel

bit.ly/1GtFFeZ

on.be.net/1jmo7r8

Revista

bit.ly/207rlzk #E0286B

#B33E97

#86449A

#7551A1

#AFA7D3

A fashion-conscious serif font that has added flamboyancy.

Party Mode preziotte.com/partymode How sound and animation can mix

PopCorn Garage popcorngarage.com Interactive film quiz not to be missed

Sites of the month

arenaofthemes.com/king

Foto Frigerio fotofrigerio.it/en Classy animation and transitions

ARK Starmap robertsspaceindustries.com/starmap Step into space with this atmospheric site

header_______________________________________________________________________ 9

Resources



Discover the must-try resources that will make your site a better place

Iconjar

React webpack template

geticonjar.com

bit.ly/1PP3y3B

The bigger an icon collection becomes the more difficult it is to organise. Iconjar helps to manage a collection so they are easy to find.

Get yourself a template for developing React-based applications by using ES6 syntax and webpack as a module bundler.

Popmotion popmotion.io

Lovefield google.github.io/lovefield/ A relational database for web apps that is written in JavaScript and is cross-browser compatible. Check out the demos to see it in all its glory.

This is a small JavaScript motion engine, only 12KB, that incorporates animation, physics and input tracking. It is aimed at motion for UIs and has native support for CSS, DOM attributes, SVG and SVG paths, and can be used with any API that accepts numerical values. Popmotion offers start, stop, reverse, loop, chain and delay animations. It also offers a number of in-built easing functions that can be used with other animations. Popmotion’s physics simulations are used to create natural interface actions. Mouse and touch inputs are supported by default but you can also work with other sources.

Angular Cheat Sheet angular.io/cheatsheet Check out this provisional cheat sheet for Angular 2. Includes bootstrapping, forms, dependency injection configuration and more.

TOP 5 Code playgrounds

Need to play with your latest HTML, CSS, JS, jQuery projects? Try these

01

02 03

CodePen

JSBin

codepen.io A popular choice amongst designers and developers. A great place to get your work seen, or alternatively to get inspired and link to.

jsbin.com This is a powerful tool that lets users experiment with full source code in a throw-away environment. You can watch other people’s code too.

10 _____________________________________________________________________header

04

05

CSS Deck

Dabblet

cssdeck.com A simple and easy-to-use playground with windows for HTML, CSS and JavaScript, and a window for seeing the code in action.

dabblet.com A great looking and intuitive interactive tool with no distractions. It recently added JavaScript and allows for saving to GitHub.

Liveweave liveweave.com Resizable panels for HTML, CSS, JS and code preview. It offers context-sensitive code-hinting and quick links to all the popular dev libraries.

Promotion

THE INTERNET OF THINGS Learn how IoT works, and how to create a successful product or company using it

E

ntrepreneurs love it, large corporations love it, universities and now even governments love it – welcome to the exciting and emerging world of the Internet of Things (IoT). Decades ago, we connected computers and got today’s powerful internet. However, it’s only been over the last few years that we’ve started to connect everyday objects using machine-to-machine (M2M) technologies, to create the Internet of Things. But what does this really mean to you, your company and your country? What are the possibilities it offers, and the threats it poses? To become an IoT wizard, join this stimulating free online course. Over four weeks, you’ll meet IoT pioneer, professor Mischa Dohler, and some of the most experienced experts in the field, from business leaders to future thinkers, to equip you with business insights to help you become an Internet of Things wizard. We’ll take you on a journey, exploring the entrepreneurial aspect of the Internet of Things. We’ll ask: “What makes an exciting Internet of Things product?” You’ll look at the shockingly fragmented wireless connectivity landscape and why so many mistakes have been made in connecting your ‘things’. You’ll consider the security and privacy aspects of the Internet of Things. Finally, we’ll equip you with business insights, enabling you to start your own IoT venture. You’ll learn what it really means to build an IoT product and how to stand out and be ahead of the crowd of IoT prototypers. The Internet of Things, also referred to as the Industrial Internet, the Internet of Everything or Industry 4.0, is seen as the next global or fourth industrial revolution. Being equipped with the fundamentals and practicalities taught here makes you an insider into this quickly growing industry, and will present you as great value to potential employers.

The Internet of Things starts on 23 November 2015 and is completely free. The online course lasts for four weeks and requires two hours a week of study. Find out more at FutureLearn.com Promotion _________________________________________________________________11

Comment

THE FUTURE OF JQUERY Web developer Leon Brown tells us how he thinks web developers should use jQuery and prepare for the future

The jQuery library was developed with the aim of making life easer for web developers when developing JavaScript. Not only did it make writing code faster and easier to learn, but it took care of browser consistencies – especially in the days when IE pretty much ignored web standards. Something that many front-end developers were quick to pick up on was the abilities of jQuery to assist with visual animations and presentation. This led to the availability of many visual components such as fancy picture galleries and visual user interface components long before HTML5 arrived. This is great if you are working alone as well as from a technical perspective, but possibly not so great from the perspective of project management strategy. JavaScript is a programming language, hence placing control of design directly inside programming is a recipe to cause conflict between time-restricted programmers and designers who want to maximise the control of how their designs are implemented. From the perspective of project management, it makes sense to keep design formatting separate from programming logic since the majority of designers don’t tend to have strong JavaScript programming skills. Add to this that assigning a JavaScript design alteration task to someone who isn’t highly familiar with programming being likely to result in mistakes being introduced that stop part or whole amounts of functionality from working – you can quickly find your project in a situation where every design alteration leads to several features being broken: a nightmare to manage when meeting deadlines and budget requirements. With HTML5 and CSS3 offering many of the abilities that were previously only available via JavaScript, it makes a lot of sense to embed your visual

LEON BROWN

Web/software developer at Nextpoint

leonbrown.info

presentation instructions inside these instead of JavaScript simply because mistakes in HTML and CSS stylesheets won’t lead your functionality to stop working when a mistake is introduced. In addition, it is easier to overwrite CSS-based presentation as well as to offer the ability to change stylesheets that result in your webpage having a completely new appearance. So if the use of jQuery is to be discouraged for directly applying styling to webpage elements, what is it meant to be used for? Web functionality still requires JavaScript to manage user interactions and data processing – which is where jQuery excels at helping

12______________________________________________________________________header

programmers to write this type of code quickly and easily. Instead of attaching specific style instructions such as to change text to a specific colour, move an element to a specific coordinate or change the display attribute of an element, jQuery should instead be used to apply attributes to HTML page elements that can be detected via CSS – eg setting attribute datahighlighted=”yes” in an HTML element via jQuery would instantly trigger any presentation rules in the CSS stylesheet referenced by [data-highlighted=”yes”]. A lot of attention is given to the visual capabilities of jQuery, but the library offers a lot more in relation to data

processing too. There are many webpage components that provide instant availability of data management features. These libraries enable you to present data you have listed on your page such as in a regular HTML table, but with features such as search, pagination and hiding of selected data – from just writing a few lines of code to initialising the component on your page with the setting you want them to operate with. Components that have been written to a good standard will also apply the same concept described above, allowing you to make visual presentation alterations from their CSS stylesheet without the need to alter any of their core jQuery JavaScript code. One functionality that is worth mentioning is jQuery’s .ajax() method – a functionality that allows data to be sent to a webpage server without the need to refresh your webpage. This can be achieved with plain JavaScript too – jQuery just makes it a bit easier to write. The use of AJAX allows you to create features that require server communication that is faster and convenient for the user. It reduces your bandwidth too; by avoiding the need to reload your page, users can submit data without losing anything they’ve been typing/using on other parts of the page. To summarise, jQuery offers a lot of potential to web projects – but its potential should be applied with consideration to some of the potential conflicts that can occur later. Use jQuery to make your code simple to understand while at the same time giving control to other team members in a way they can best work with – ie designers work better with CSS than JavaScript. With websites and the rise of web apps, the jQuery data features are also likely to become more important to your web projects in the coming years. How do you see jQuery being applied to your work?

Our revolutionary NEW Web Hosting platform 100% guaranteed UP TIME

100% guaranteed uptime!

Smart SSD storage & intelligent load balancing

Dedicated SSL certificates

Web Hosting from:

£1.99

per month ex VAT charged at 20%

Call 0333 0142 708 or visit fasthosts.co.uk/hosting SERVERS • WEB HOSTING • DOMAIN NAMES • EXCHANGE EMAIL

Know a site that deserves to grace these pages? Tweet us now

• A large header background image immediately speaks to kids and the virtual classroom context works well for the Project Schoolkrant experience

• The site content revolves around 24 lessons, passing on core journalistic skills for creating a school newspaper to children

• Each section has its own bright, recognisable colour scheme to provide a modular feel that remains stimulating to kids

14____________________________________________________________________ lightbox

@WebDesignerMag

#9C6534

• Cute illustrations and subtle animations are peppered throughout, while navigation keeps access to specific lessons quick and intuitive

#89579F

#0A2D32

#898989

• A cast of virtual tutors host a series of embedded videos. They also appear as their own animated avatars to guide and inform

Project Schoolkrant Development technologies Adobe After Effects, HTML5 (Flash/CreateJS), CSS3, JavaScript, Backbone, GSAP, Laravel (PHP MVC)

Designer J. Walter Thompson (JWT)

Amsterdam, Superhero Cheesecake jwt.amsterdam superherocheesecake.com

It’s top marks for this charming site encouraging Dutch children into newspaper journalism

T

his rich educational site produced by JWT Amsterdam and commissioned by De Persgroep Publishing’s daily Algemeen Dagblad, acts as a curriculum tool for teachers and pupils alike. Built around five colourful lesson sections spanning news gathering, interview, photography, writing and design skills, the content culminates in compiling a school newspaper. Video tutorials from virtual tutors and a collection of animated characters combine beautifully to form an engaging experience purpose-built for young eyes and minds. A three-pillar approach marries colourful environments, playful learning assets and game-like features throughout. Completing

• Besides Times Roman listed as a system font, Roboto Regular in normal weight is listed amongst the site styles

• Monstro Solid by PintassilgoPrints is the uppercase font used across headings in main tabbed sections

“

tests unlocks badges to mark progress so visitors can return, log in and continue at leisure. The keenest kids can even submit their efforts in the hope of winning valuable publishing work experience. “We wanted to make an entertaining and easy-to-use platform using appealing colourful illustrations and animations when building the lessons and quizzes,” says David Navarro, head of design & digital creative director at J. Walter Thompson. “The best way to bring that universe of journalism to life was to use Flash to animate the characters and use Adobe tools and the CreateJS suite to convert these animations to HTML5. Digital production studio Superhero Cheesecake built the platform in vanilla JavaScript on a Backbone base and [used] the GSAP animation framework in creative ways in order to make it work properly across platforms and devices.”

We wanted to make an entertaining and easy-to-use platform

”

lightbox ____________________________________________________________________ 15

WORKSHOP

Add wiggling text headings to your pages with GSAP Jordi Romkema, managing partner at Superhero Cheesecake, reveals the animation technique behind the site’s wiggly quiz-time headings 01 Download and attach GSAP

For this technique we’ll show how you can re-create the ‘wiggly’ text headings found within Project Schoolkrant whenever a quiz begins. To get started, download the latest version of GSAP (1.18.0 or higher) from greensock.com/gsap. Unzip the minified JS file and place within your chosen project path. Start with a clean HTML document in the site root and reference the JS file inside the tag or link to the CDN instead as shown:

001 002 003 004 005 006 007 008 009

02 Add your heading text

So in the very simplest terms, our page needs a heading to animate. To create an example heading, you need to add a tag to the tag in your HTML document. You can of course use to headings as desired just as long as you specify a class name, such as ‘title’, so that we can reference it within our JavaScript and also apply additional CSS styling within the tag.

001 002 Quiztime! 003

16____________________________________________________________________ lightbox

03 Create a script tag

Before you can create the wiggle function for the heading, you need to create a tag for our JavaScript and add it to the bottom of the tag in your HTML document. Create a variable within the tag called ‘chars’. This variable will store all the references to the individual characters found within the text of your heading.

001 002 var chars = []; 003

04 Split up the characters

Next we need to write a function within the tag named ‘textSplit’. This starts by finding our heading element based on the class name before reading the text contents of the heading. It then iterates over all its text characters and splits them into the ‘chars’ variable. By also replacing the contents of the heading with a separate tag per character, we can give each individual text character its own animation effect:

001 function textSplit() { 002 var title = document. querySelector('.title'); 003 var splitText = title.textContent. split(''); 004 title.textContent = ''; 005 var character; 006 for(var i=0, len=splitText.length; i

11. Responsive Retina images In this additional source the media attribute specifies that these images are only to apply to viewports between 501px and 800px. Srcset will then load the image that is found to be the most suitable to the client with either the 1x or 2x versions of wide800.



12. Markup for responsive This final source caters for the smallest viewports and implements the same technique as the one in Step 11. The downside to using this approach is that a lot of markup is needed for one responsive image – each version will require its own source tag as well as a set of media queries.



13. Style picture elements Picture elements are essentially glorified spans – a display:block later and you’re able to add whatever styles that you want. The code shown below uses calc and margin to add gutters to the picture, as well as show a nice box shadow.

.album { display: block; width: calc(100% 40px); margin: 0 auto; box-shadow: #A39A9A 0 0 30px; position: relative; }

14. Extended picture styling Because the picture element behaves like a regular span, the element can be extended with :before and :after in

Tutorials Master responsive image techniques

Picture explained The ultimate goal behind using things like srcset, picture, sizes, source, and media is to enable designers and developers to deliver the best possible image for a given environment, rather than have a one-size-fits-all image that scales proportionately but will look completely terrible at the extreme ends of viewport sizes. Picture allows the build team finite control over what, how, and when any given variant of an image displays. Each source can have a media attribute. It’s the media attribute that controls when a source should be used via a media query. The srcset attribute is then left to simply list out the available variants for the image in question – either in width descriptors (eg 250w) or DPI descriptors (eg 2x).

CSS to apply effects over the top of images. Below this, a gradient is overlaid the image. View the full source of this demo on FileSilo.

.album:before { content: ''; position: absolute; width: 100%; height: 100%; background:linear-gradient(...); }

15. Image styling Picture essentially progressively enhances img elements. CSS can still target the image, just as if it’s inside a regular container. Images inside picture elements are available for styling just like any other image.

picture img { border-radius: 3px; } picture { border-radius: 3px; }

16. Add interactions The process of adding interactions to picture elements is slightly different. Binding hover to the picture element ensures the hover will work as intended. However, the visual feedback still needs to happen on the image, so that’s where styles should be applied.

picture:hover img {

opacity: 0.5; cursor: pointer; }

17. Add filters With filters coming to CSS, developers are able to apply filter effects to DOM elements – this includes picture element images. The contrast of the image is slightly bumped with this filter. Naturally these filters can be applied on a per-media-query basis.

picture img { -webkit-filter: contrast(1.25); }

18. Centre everything The first part of centring the image is to have the container (in this case, the page body) fill the entire viewport. This is easily achieved using absolute positioning and resetting any margins/padding to 0.

body { margin: 0; padding:0; position: absolute; height: 100%; width: 100%; background-color: #E1E4E2; }

19. Vertical centre Flexbox can easily be used to vertically centre content of variable height. Align-items will vertically centre child

elements, and justify-content horizontally will centre them. Try playing around with these in dev tools to see how they behave.

body { display: flex; align-items: center; justify-content: center; }

20. Picture polyfill Scott Jehl has led the development of a polyfill for the Picture element called picturefill. Head over to GitHub (github.com/scottjehl/picturefill/releases) to download the latest release.

21. Use picturefill Like most polyfills, using picturefill is very straightforward. First, make sure that you reference the script in the head of the page – the async attribute is optional but it’s beneficial for performance. Also you should create the element for any browsers that don’t support HTML5 – but bare in mind that this isn’t a required step if HTML5 shiv is already present.

// Picture element HTML5 shiv document.createElement( "picture" );

73

web workshop

Create 3D zoom effects with CSS As seen on scholzandfriends.ch/de

Menu overlay The burger icon will reveal the menu. Clicking this brings a full-screen overlay so that the menu can be navigated.

Zooming 3D effect As the images move at different speeds, they create an effective effect that looks as though the camera is moving.

Image slider The initial content that covers the browser is a giant slider to move through projects with animated image effects.

74

Animated image

Full homepage

The background image is made of two images and move at different speeds towards the viewer for a parallax effect.

The homepage itself is much larger than shown here as it can be scrolled down to bring more content to the user.

Create 3D zoom effects with CSS DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner

P

arallax scrolling on sites is getting to the point of being overdone, as soon as every site starts to have the same features it’s time to start looking for more originality to the design process. The Scholz & Friends site has taken the familiar paradigm of the parallax effect on images, but has done this with a different take. Parallax is usually done with images or content moving at different speeds as the user scrolls down the page, this was original and novel five years ago. Instead of doing it this way, the parallax effect on Scholz & Friends is actually a zooming effect, which gives the

impression that a camera is moving closer to the content. Not only that, but this also helps the user to focus on specific content, as the image is brought into the foreground. This gives a very unique look to the content and it provides a freshness that makes a subtle change from the scrolling effects that other sites employ. When content that you design looks just different enough from the competition it helps you to stand out as a designer and helps your clients stand out and every designer needs to remember that the success of their clients is ultimately a reflection of their own success.

Fresh paint on a familiar style What our experts think of the site

“Producing content for the image slider in the site requires a fresh approach, almost every site on the web has featured content displayed at the top of the site. To show off Scholz & Friends, a zooming effect was used on the images to freshen up the dated parallax look.” Mark Shufflebottom, professor of Interaction Design

Technique 1. Creating 3D zoom effects To create some of the 3D zoom effects found on the Scholz & Friends site, create a new HTML document and add this code to the body. This will display two images on the webpage.



2. Wrap them up Now create style tags in the head section of the document and add the CSS rule for the wrapper. This holds both images and centres them on the page. As the images zoom in, the overflow is set to hidden.

image is just scaled up slightly so that it looks like the camera is zooming in on the image.

@-webkit-keyframes back { from {transform: scale(1);} to {transform: scale(1.2);} }

5. No prefix code Newer browsers that don’t require the vendor prefix should also be catered for, so here is the code for those. It’s slightly smaller because it doesn’t have -webkit- in front. Notice the keyframes have the label ‘back’ which is picked up in Step 3’s code.

@keyframes back { from {transform: scale(1);} to {transform: scale(1.2);} }

3. Position the background

6. Foreground image

The background image needs to be positioned absolutely so that each image can be overlaid on top of each other. The animation is going to be stored in keyframes with the title ‘back’. This should hold on the last frame of animation so the ‘forward’ animation fill mode is used.

The foreground image isn’t currently visible because the overflow is hidden. Adding this rule for it will position the foreground over the top of the background image and it aligns to the bottom of the background image, while being 100 pixels in from the left.

#bg { position: absolute; -webkit-animation-name: back; -webkit-animation-duration: 6s; -webkit-animation-fill-mode: forwards; animation-name: back; animation-duration: 6s; animation-fill-mode: forwards; }

4. Add keyframes Safari, Chrome and Opera use the webkit prefix on CSS so here the keyframes are added. As you can see the

#fg { position: absolute; bottom: 0; left: 100px;

7. Finishing the foreground As with the background image this is also being animated to zoom in. The remaining code for the foreground CSS rule sets up to run on keyframes that are labelled ‘fore’. It takes six seconds to run and will pause on the last frame of the animation like the background.

-webkit-animation-name: fore; -webkit-animation-duration: 6s; -webkit-animation-fill-mode: forwards;

EXPERT ADVICE Controlling CSS keyframes As the 3D zooming parallax effect is the focus of this site it can be reproduced using HTML and CSS alone without any JavaScript. This is down to the use of CSS keyframes, which enable us to specify how something will look on frame one and in the final frame of animation. The duration is also controlled in ‘seconds’ as opposed to milliseconds in JavaScript. CSS keyframes normally loop, so in the workshop the animation takes place over six seconds and the default would be for it to start again and loop through. There are some commands that enable us to control exactly what happens with the keyframes and they can be set to play in reverse, play just once, loop a certain number of times or play back and forth. Using the animation fill mode, the keyframes can be set to forward, meaning they play once and hold on the final frame of animation. Set this to backward and they will play in reverse order. Change this to both and it will double the duration, playing it forward and backwards. Using the animation iteration count, the amount of times it loops can be controlled. This will reset on the first frame of animation so be careful of your content jumping back to the start.

animation-name: fore; animation-duration: 6s; animation-fill-mode: forwards; }

8. First keyframes The foreground keyframes animate two different properties at once. They increase the scale and move the image slightly to the left, this helps to give a 3D effect as this zooms in more than the background to make it look like it’s in front.

@-webkit-keyframes fore { from { transform: scale(1); left: 100px; } to { transform: scale(1.4); left: 40px; } }

9. Final keyframes Add the last keyframes to the CSS and then save the document. Opening this in your web browser will show you the effect running over six seconds and you will see the foreground and background moving separately to complete this 3D zoom effect.

@keyframes fore { from { transform: scale(1); left: 100px; } to { transform: scale(1.4); left: 40px; } }

75

SAVE

UP TO ON A GIFT SUBSCRIPTION THIS

CHRISTMAS JUST

GADGET Packed with the latest, coolest and most exciting tech 12 issues, save 50%

HOW IT WORKS The action-packed science and technology magazine 13 issues, save 46%

ALL ABOUT HISTORY Bringing history to life for the whole family 13 issues, save 49%

HISTORY OF WAR The stories, strategies, heroes and machines of historic conflicts 12 issues, save 50%

DIGITAL PHOTOGRAPHER Inspiration, tutorials and tools for enthusiasts and professionals 12 issues, save 50%

RETRO GAMER The number one magazine for classic gaming 12 issues, save 50%

ALL ABOUT SPACE Discover the wonders of the solar system and beyond 13 issues, save 49%

SCIFINOW The number one magazine for sci-fi, fantasy and horror fans 12 issues, save 50%

29.99

£

10 ISSUES, SAVE 50%

ORDER HOTLINE 0844 856 0644** ONLINE AT www.imaginesubs.co.uk/xmas151

BY POST

Send your completed form to: Imagine Subscriptions, 800 Guillat Avenue, Kent Science Park, Sittingbourne, Kent ME9 8GU

SUBSCRIBE TO ANY MAGAZINE FOR JUST

£29.99

Exclusive Christmas offer Save up to 50% on the shop price*

4 YOUR DETAILS

Title Surname Address

First name

Postcode Telephone number Mobile number Email address This subscription is n for me n a gift

Country

DELIVERY DETAILS (IF DIFFERENT FROM ABOVE)

Title Surname Address

First name

Postcode Telephone number

Country

Never miss an issue of your favourite magazine

UK £29.99 Magazine name

Free delivery, direct to your door

FOR MULTIPLE ORDERS PLEASE CALL THE ORDER HOTLINE 0844 856 0644**

Ideal Christmas gift - that lasts all year!

CHEQUE

Free e-card to send when you buy as a gift

PAYMENT DETAILS

n I enclose a cheque for £ (made payable to Imagine Publishing Ltd)

CREDIT/DEBIT CARD

n Visa

n Mastercard n Amex n Maestro Card number nn nn nn nn nn nn nn nn Expiry date nn nn Issue number (Maestro) n n Signed Date All subscribers receive a monthly e-newsletter of news and offers. Please tick if you would prefer not to receive any promotional material from Imagine Publishing: by post n

by telephone n

by email n

Please tick if you would prefer not to receive any promotional material from other companies by post n

Use code XMAS151 for this extra-special price. Order by 2 December to start your subscription the first issue after Christmas. nd

** Calls will cost 7p per minute plus your telephone company’s access charge.

by telephone n

by email n

Please tick if you DO wish to receive such information by email n TERMS & CONDITIONS * Titles are priced at £29.99 saving up to 50% on the shop price. For the full list of titles and issue details please visit www.imaginesubs.co.uk/XMAS151. This is a UK-only offer, for overseas offers please visit www.imaginesubs.co.uk/XMAS151 or call +44 (0)1795 592 869. Gift subscriptions ordered by 2nd December will begin with the first issue on sale January 2015 – orders after this date will start with the following issue. You have the option of sending a digital gift card so please include your email address in the form above. Non-gift subscriptions will start with the next available issue. Offer ends 31st December 2015. Promo code XMAS151

BUILD WITH

ANGULARJS LEARN EVERYTHING YOU NEED TO KNOW TO START BUILDING WEB APPS WITH THE FRAMEWORK

78 __________________________________________________________ feature

Build with AngularJS

Start building START WITH THE DATA, FIND APIS, READ THE DATA THAT THEY PROVIDE AND THAT’LL GIVE YOU IDEAS

5 best libraries and tools

P

ackage managers can simplify the finding, code quickly, keep a flat structure, and stay DRY (don’t downloading and updating process of app repeat yourself). It might feel counterintuitive initially, but dependencies, and there’s no good reason not to use as applications grow over a certain size, it’s quite difficult them. You can install AngularJS with NPM, the Node to find things if files are organised by type. It’s very likely package manager, or with the help of Bower. that code is going to be repeated so try to avoid that as You might find that some packages that you want are much as you can. not on NPM however it is the most reliable manager for Choose a naming convention and make sure that you you to use. Bower can be slightly less reliable but it does stick to using it. You are going to end up with a lot of files; benefit from there being more front-end packages even small apps have quite a few files. If you ensure available, as well as its use of a flat that you organise your app in folders by dependency tree, so you are feature, it will help you a lot if you TO FOLLOW probably better off with using it as add a type suffix to the names Adventures In Angular a manager over NPM. such as example.controller.js. @angularpodcast Remember to save all your Modularity is also quite Adventures in Angular is a dependencies in your package file important, although it’s not a weekly podcast dedicated to regardless of the package manager requirement. You could potentially all matters of the framework. that you use, so your app is easy to have everything under the main app Guests from Ionic and GSAP share or reinstall. module and it would work okay. But have both appeared on the it’s easier to read and makes for a Build podcast recently. much better structure if you just In AngularJS, modularity is a key create one main module and then other principle and you’ll soon find out that there modules to be shared across the app and are many small files that you want to load. It’s not a modules by feature. good idea to manually load the small files in your page The main benefit of this type of structure shines – not to mention the performance issues that could through on big apps; also it’s good to note that by having come up if your app ends up in production looking like this level of modularity, it’s very easy to reuse modules that. For these reasons it’s better to use a task runner or on different apps. tool, like Grunt or Gulp, to help you run some tasks and optimise your workflow.

Lodash lodash.com Lodash is a very useful utility library. It has an extensive documentation and it does all sorts of things for you. Lodash is focused on performance so it’s a good idea to use it instead of some slower AngularJS methods.

Angular UI angular-ui.github.io AngularUI is an amazing set of tools, frameworks and even directives to help you build your Angular apps faster.

UI Router github.com/angular-ui/ui-router UI Router is part of Angular UI and has become the de facto routing framework that everyone uses. It’s much more powerful than ngRoute – the one provided by Angular. It allows you to manage your application’s interface by states bound to named, nested and parallel views, providing a lot of flexibility.

The key tasks that you are going to want in your build script will include: – Different environments for development and production – Watch files for change – Concatenate, mangle and minify – Create source maps for easier debugging – Linting (especially for teams) – Run tests

UI Bootstrap angular-ui.github.io/bootstrap/

Structuring your app Organising an app is tricky in the beginning. AngularJS allows for complete flexibility which also means that you have to figure out the best way. Think about it as something organic that can be modified down the line and grow and change with your app. Start off by putting all your files in the main directory and create a new subdirectory to group files together as you progress. It’s better to structure your app in folders by feature rather than by type (for example as services, controllers, templates and so on). That way it’s easier to locate your

Rafa Garcia-Lepper Lead front-end engineer

“AngularJS is an amazing framework for creating data-driven SPAs. Working with it is a lot of fun and I love that it encourages me to write better code.”

Another component of Angular UI is UI Bootstrap, a very useful set of AngularJS directives that mimics Bootstrap components. If you use Foundation there’s an unofficial port of UI Bootstrap called Angular Foundation.

John Papa’s Angular Styleguide github.com/johnpapa/angular-styleguide/ blob/master/README.md John Papa wrote an amazingly thorough and very opinionated styleguide that has been improved upon by a good number of contributions. This is highly recommended reading.

feature __________________________________________________________ 79

Build with AngularJS

Bootstrapping

Security

ANGULARJS IS NOT BASED ON CONVENTIONS LIKE OTHER FRAMEWORKS

Avoid mixing server and the client templates

confusing but to create a module all you need to do is to It’s not a steep learning curve for developers wanting set it by passing an array as a second argument to the to get to know Angular, but it becomes more module method in the angular object angular. challenging when an app grows over a certain size. For module(‘exampleApp,[]);. You can then get this this reason it’s better to stick to a series of module by omitting the second argument conventions. In AngularJS the best way of angular.module(‘exampleApp’);. working is by creating single TO FOLLOW responsibility modules that will Joe Eames Configuration work together with other modules In a configuration block you set @josepheames to create an app, which is in itself a elements like routes, exception Joe is a panelist in the JS Jabber module. Then you just inject the handlers, providers and constants and Adventures in AngularJS services that the different modules which need to be there before the podcasts and a great developer provide, and this will keep your code app starts. to follow. He is the organiser of nice and tidy. ngConf, and active in To bootstrap an app, all you need Run block sharing tips and advice. to do is to declare a module, give it a In a run block, you trigger logic that name and then declare all the other needs to happen when the app is starting. modules on which it depends. Then in the Things like authentication, translation or analytics, for HTML you can load the app in any element you example, will belong in here. It’s better to not write the want; AngularJS will replace anything inside it with the logic code inside the run block for testing. Rather, create views of your app. factory services with the logic, inject them in the run A module is a collection of configuration and run block and then invoke the required methods from it. blocks although you don’t actually need either. It sounds

“

To bootstrap an app… declare a module, give it a name and then declare all the other modules on which it depends

80__________________________________________________________ feature

”

ANGULARJS INTRODUCES SOME RISKS WORTH NOTING In AngularJS, templates are just HTML files, but you can call a server-side file which will be processed and sent as HTML. The risk is clear as you are exposing some code that will be executed on the server, potentially introducing some unintended XSS vectors.

CSRF If there’s a cookie called XSRF-TOKEN, AngularJS will recognise it and automatically convert it into a request header X-XSRF-TOKEN. This will be sent on every request sent by $http for the server to validate the token.

The ngSanitize module This module changes how AngularJS encodes the output and creates a list of allowable HTML elements, stripping everything else out.

Performance IT CAN BE EASY TO MESS UP THE DIGEST CYCLE Every model in AngularJS is represented as a $scope object and these will make use of an array called $$watchers, which can then be utilised to store functions. Every single time that $watch is called or a value is bound from the DOM (using ng-repeat, ng-class, ng-show and so on) a new function will be stored in $$watchers. Every single time that one of these values in the $scope object is modified, the digest cycle will go through the $$watchers array and it will then run all of the functions in it. If any of the functions in the array changes any watched value in the scope, then the cycle will run again. It’s important for you to be aware of this issue and so, you should make sure that you avoid any of the unnecessary cycles by minimising the number of watched values. Filters can be a performance problem too because they are run twice with every digest cycle and because they only hide the filtered items using CSS, which means that the collection will stay in memory. Try not to use filters unless you really have to. Also, you’ll find that it’s faster to work with simple objects, especially with the data that comes from the backend. Try to make sure that the object has only the keys that are necessary.

Build with AngularJS

Using a data-service ABSTRACT CRUD OPERATIONS INTO SERVICES SO THEY CAN BE ACCESSED

To communicate with the backend, use a factory, inject $http and return an object exposing all the public methods.

Inject the service in the controller, then in the activation function call the getExample function for the example data and wait for the promise.

Use $http to make a request to the API and use then and catch. Try to avoid anonymous functions to improve code readability.

Create a function getExample to call the service for the data and wait for the promise; next, set the data and resolve the promise.

Communicating with the backend When making requests to the backend, it’s tempting to do it from the controller, but it’s better not to do it and keep a separation of concerns. Otherwise your controller will become bloated very quickly and it will be difficult to test and maintain. You want to create a service that can be reused from other parts of the app. This is the best way to work with AngularJS in general, but it’s particularly useful when interacting with the backend so data can be cached and reused – this will make your app feel faster. Use a factory where you inject $http and create an object literal where you expose pointers to private functions and properties, similar to the revealing module pattern. Then use $http in the private functions for the CRUD operations and return it. This way the controllers remain oblivious to the logic. A controller – or any other consumer – will only need to know what service to get

“

data from and its interface. If you require some data in a controller for a view to work, load it in the resolve member of the state, and then inject it into the controller. Again if you have a factory you can inject it in the resolve and use all the exposed methods.

Work with directives Directives are reuseable self-contained components created to add bits of enhanced HTML functionality that are used from the views. They can have a controller and a template and can be invoked from the HTML in four different ways: by custom element, attribute, class or by comment. Create one directive per file, and name the file after the directive; if it has a template file, put them together in a folder of the same name so it’s easy to find and maintain. Directives inherit their parent scope by default, so it’s probably a good idea to isolate the scope – but don’t do

Use element directives when they are a component, when you are actually creating a new HTML tag

”

it blindly. Make sure you learn about scopes in AngularJS first. If you need to manipulate the DOM at all, you need to do it from a directive inside the linking function. Angular also works nicely with jQuery. It comes with jqLite, so out of the box you’ll have a subset of the most common jQuery functionality available, but if you load jQuery it will overwrite and become available instead. Avoid invoking directives as classes or comments. Use element directives when they are a component, when you are actually creating a new HTML tag. Use attribute directives when they modify or add some behaviour to an existing element. The name of a directive should be in CamelCase exampleDIrective in JavaScript when you declare it, and it needs to be dash separated when invoked in the HTML . To get values into the directive isolated $scope, you can use custom HTML attributes and bind them to the scope object in the directive definition object. The keys of the scope object will be the HTML custom attributes – using the same CamelCase to dash rule. You can bind them as strings by making use of @, or to an expression using &. You can also use = to create a two-way data bound object.

feature ___________________________________________________________ 81

Build with AngularJS

Models, controllers and views IF YOU ARE NOT FAMILIAR WITH THE MVC PATTERN THIS MIGHT BE CONFUSING AT FIRST, BUT IT’S A LOT EASIER THAN IT LOOKS AngularJS is structured around data which you to avoid bloating the controller by using should come from services and you $scope methods that would be better off want to display your data in the in a factory. Avoid views, so what you do is use a If you do this, don’t forget to ng-controller controller. A controller is bound to capture ‘this’ into a variable like vm, Ng-controller doesn’t enforce a view and the data model is which stands for View Model, so it one-to-one coupling, it’s not represented as the $scope object. doesn’t change by context. reuseable and it’s not flexible. The $scope object is accessible In the HTML you can display the Attach a controller from the view so you can have any elements in the model ($scope or to a template using a route data by adding it to $scope. vm), all by using double curly braces definition or a directive. It’s a good idea to avoid the like this {{vm.example}}. If you decide $scope object though and to use not to bother with the controllerAs controllerAs syntax instead. ControllerAs syntax, $scope is implicit so that you can binds ‘this’ to the $scope object which will help just use {{example}}.

Register functions EXECUTE ASYNCHRONOUS OPERATIONS WITH PROMISES, CHOOSE THE MOST APPROPRIATE TEST TOOL AND FIND OUT HOW TO ROUTE Promises your team writes code in the same style. It’s also a good AngularJS has a promise implementation by default exposed as the $q service, it’s also implicit as part of the $http service. If you have never worked with promises before, or you are used to the way jQuery implements promises, it might be confusing at first. The basic way you use it is by creating a deferred object using $q.defer();, which you then use inside an asynchronous operation to resolve or reject the deferred object. Then you can return deferred as a promise. There are very few times when you are going to need to use $q.defer(). Mainly it will be when you need to wrap a jQuery plugin to work in Angular and you need to start a promise to replace the callbacks. Promises in $http are a bit different, but you’ll be safe just using then() and by remembering to always catch() rejected promises.

idea to lint your code as a build task, and even better to do it as a pre-commit Git hook to ensure a baseline of code sanity before running tests.

Unit tests Jasmine is the most common testing framework for running unit tests in AngularJS. It’s the one used by the AngularJS core team, although you can use Mocha if you prefer it. To run tests with AngularJS you will need angularmocks.js, which is a tool provided by the AngularJS team that creates replicas of the objects called mocks. This makes it easier for you to decouple components and inject and mock AngularJS services in your tests by making use of ngMock.

End to end

Tests & tools

Unit tests alone aren’t enough. If you really want to minimise risks you will need to run end-to-end tests in actual browsers. The AngularJS team provides a useful NodeJS program called Protractor to run end-to-end tests. It uses

Lint

Keep ESLint running in your code editor and keep a lint config file in the repository too, so that everyone in

“

It’s also a good idea to lint your code as a build task, and even better to do it as a pre-commit Git hook

”

82 __________________________________________________________ feature

Services LEARNING TO USE SERVICES IS KEY TO MASTERING ANGULAR In AngularJS there are services, providers, factories and constants that create a lot of confusion as they are all different types of services. They are all singletons, so just use factories, forget about the rest. One exception is in the config block, where only providers are allowed. Other than that, stick to factories. Put in services any logic that could be shared across the app. Then all you need to do when you need some functionality is to inject it. Dependency injection is a key feature of AngularJS and it’s really nice to work with. Make multiple small factories with one responsibility each. Services can be injected into other services so any functionality can be reused. This is a really nice way of working; it will keep your code clean and clearly defines the different parts of your app.

WebDriver for controlling web browsers and simulating user interactions.

Running tests Karma is framework agnostic and very configurable tool provided by the AngularJS team to run tests. It works well with Grunt and Gulp, so it’s easy to run tests as part of your build process. If you want to learn more about testing in Angular, then we’d recommend you to read the book AngularJS Testing Cookbook by Simon Bailey, which gives you easy-to-follow recipes for testing out the different parts of your application.

Routing Ideally your app should be organised by feature modules, and every single module that needs a route will also have its own module. When you are working with a UI router, you will need to declare states instead of routes – a state may or may not have a route and you can also nest states. Declare the routes in the config block of each of your modules and then inject $stateProvider and $urlRouterProvider. Use $stateProvider to declare the different states, and $urlRouterProvider to declare the route alternatives. Give a name to the state and pass an object with the different parameters for it. If you find that you need to do things in-between the routes, then you can make use of the run block. You can also create links to states in your HTML by first utilising ui-sref as an attribute. Use $stateParams if you need to access the parameters of the routes, but keep in mind they are not inherited by nested routes.

FOR THE GNU GENERATION

www.linuxuser.co.uk

Available from all good newsagents & supermarkets today

ESOURC ER

VERY IS DE

E • FRE SU

OWNLOA ED

ON SALE NOW:

» Jim Zemlin interview » Code GNOME software » Raspberry Pi TV hack THE LATEST NEWS

ESSENTIAL GUIDES

DEFINITIVE REVIEWS

INDUSTRY INSIGHT

EXPERT OPINION

BUY YOUR ISSUE TODAY

Print edition available at www.imagineshop.co.uk Digital edition available at www.greatdigitalmags.com Available on the following platforms

facebook.com/LinuxUserUK

twitter.com/LinuxUserMag

Developer tutorials

Make drums with the Web Audio API Use Web Audio sound buffers to create a drum kit that responds quickly and triggers sound in high-performance web apps

84

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner

Developer tutorials

Q

uite some time ago now, us web developers got our eager mitts on the tag. For the first time since the web’s inception, we could insert rich multimedia content into our webpages without using any third-party plugins (no need for Flash anymore). And all was good with the web development world. For its typical use is absolutely fantastic; with built-in GUI and JavaScript events we can do almost anything with the content we’re playing. Thing is, was never designed to be fast or to play lots of really brief content, which is not a massive issue unless you want to create sounds in games or in a data visualisation. That’s where the Web Audio API comes in. The Web Audio API is a low-level API (which basically means it’s super fast because a lot of the stuff is being done by the browser rather than by our own JavaScript) that allows us to control and manipulate sounds at the millisecond level. With it, we can load sounds, create sounds and warp sounds to make alien-like noises with absolute ease, but it’s not as simple as including an tag in our HTML – we’ve got to deal with things such as Audio buffers and nodes (not Node.js) if we want to get the best out of it. That’s what we’re going to make in this tutorial, a Web Audio drum kit. Drums are great, because we need to be able to play sounds quickly. but everything we learn here can be taken and applied to any other kind of app that needs responsive audio manipulation and playback.

1. Grab the resources Before we dive into all of our Web Audio goodness, there are some things that we’re going to need. Grab the project resources from FileSilo and move them into your project folder. In the sounds folder are the MP3 files that we’ll be using to make sounds for our drums, in the scripts/libraries folder is bl.js (a script written by Boris

Smus) which we’ll use to load sound files and in the assets/images folder is the image of our drums.

2. Markup for our drums In our ‘public’ folder is a bare-bones HTML file. We’re going to create some divs to bind some event listeners to so that when we hit them, sounds play. Open it in your favourite editor and add the following between the tags:



3. Style the Run the Node app included in the project resources. If you head to http://localhost:8118/ you’ll see our HTML page. It’s nothing special at the moment, just a background image of our drums and a bunch of invisible tags. We want to position those divs over each of our drums so that when we hit each drum, they each make a different sound.

inside it relative to their parent (#drumHolder). This makes our life a little easier when it comes to doing things responsively. Just open up styles.css now and add the following:

#drumHolder{ width: 700px; height: 290px; position: fixed; left: 50%; top: 50%; margin-left: -350px; margin-top: -145px; background-color: rgba(255,0,0,.2); }

5. Position each drum element Now that we have our #drumHolder in the right place, we can now do the custom styling for each individual drum. Staying in styles.css now as well, add the following rules to your file:

#drumHolder .drum{ background-color: rgba(0,0,0,.5); position: absolute; } #drumHolder .drum:nth-child(1){ top: 14px; left: 235px; width: 87px; height: 69px; } #drumHolder .drum:nth-child(2){ left: 350px; top: 7px; width: 108px; height: 86px; } #drumHolder .drum:nth-child(3){ left: 274px;

Buttons needed

Before anything will work through Web Audio, a sound has to be triggered inside of an event handler triggered by a user, meaning you absolutely have to make a button.

4. Move the parent element We have a div #drumHolder. We’re going to position this over the middle of our page to position all of the divs

Left

Our parent element has a red background to make the placing of our .drum elements within it much easier as we can position them relative to the holder Top left

The black elements on our red background are our .drum divs. These are the elements to which we’ll bind event listeners to trigger audio when we hit them Top right

By moving a parent element to overlay with the whole of our drum kit, it will be easier to relocate our child elements that make the drum sounds if our drum graphic changes

85

Developer tutorials Make drums with the Web Audio API

top: 145px; width: 158px; height: 114px; } #drumHolder .drum:nth-child(4){ right: 62px; bottom: 84px; width: 144px; height: 104px; } #drumHolder .drum:nth-child(5){ top: 103px; left: 74px; width: 144px; height: 104px; }

6. Core.js Now that we have our elements in the right place, we can start writing some code to control them. When we added in our we also added two elements, one for our code, the other being our BufferLoader method. Create a file called ‘core.js’ in our scripts folder and add the following to it:

var __web_audio_drums = (function(){ 'use strict'; var context = undefined, bufferLoader = undefined; function init(){ console.log("Initialised"); } return { init : init }; })(); (function(){ __web_audio_drums.init(); })();

7. The Web Audio context Before we start doing anything with Web Audio, we need a context we can interact with. Think of it as an audio analogue to a context, it’s simply an interface with which we deal in order to make our code do interesting things. Just after ‘use strict’; add:

Top left

By preventing events, we can make sure that nothing untoward occurs during that crucial, epic drum solo Top right

The properties of the returned AudioBuffer of our media files aren’t all that interesting, it’s the nifty methods that come with it that’s really interesting Right

There’s no visual feedback in our little app. But, if you wanted to make it so our app responded visually to a tap as well as audibly, you can always use border-radius

86

// Web Audio Polyfill window.audioContext = (window.AudioContext || window.webkitAudioContext || window. mozAudioContext || window.oAudioContext); …and inside our init function add:

context = new window.audioContext(); …Now we will also have an audio context that will work across all browsers.

8. Set our samples In the /sounds folder of our project, there are a bunch of MP3 files. We’re going to add them to our code so we can load them in just a little bit. Add the following just after our Web Audio polyfill.

var samples = [{ name : "china", path : "/sounds/China.mp3" }, { name : "crash", path : "/sounds/Crash.mp3" }, { name : "floor tom", path : "/sounds/Floor_Tom.mp3" }, { name : "super kick", path : "/sounds/Super_Kick.mp3" }, { name : "super snare", path : "/sounds/Super_Snare.mp3" }, ], sounds = [];

…samples contain references that we’ll use to load our files and assign them to the right elements, sounds will contain the audio buffers that will actually have the sound data in them, but we’ll get to that later.

9. Load our drum samples Now that we know where we can find our drum samples it’s time to load them. Create a new function called ‘loadSamples()’ and add the following code to it:

function loadSamples(passedSamples){ var s = []; for(var x = 0; x < passedSamples.length; x += 1){ s.push(passedSamples[x].path); } } This will simply create an array of file paths that we can work through to load our samples into our project

10. The BufferLoader In order to load our samples into our project and make them useful, we need to create audio buffers to store the sound data from our MP3 files. Think of an audio buffer as a bucket that you can put something into, but once you take it out again, you can’t get it back in. Normally, we would have to create all of the XHR and audio buffer code ourselves, but the BufferLoader method takes care of that for us.

11. Load our samples In loadSamples, add the following:

bufferLoader = new BufferLoader(context, s, function(list){ sounds = list; console.log(sounds); });

Developer tutorials Make drums with the Web Audio API

vs. audio So why do we need Web Audio if exists? Well, is great at playing sound… in a limited context, it’s not designed for audio manipulation – not in a low-level kind of way. The Web Audio API gives us direct access to the data of the audio content, and with this we can run a ton of complex operations to evaluate and manipulate that data in next to no time at all. Compared to a fast fourier transform, or applying a band filter, playing audio content through Web Audio is a comparative doddle – that’s why it can respond on a microsecond time scale whereas can take seconds to begin playback, depending on the availability of the content. Deciding when it is appropriate to use either interface is completely down to you!

bufferLoader.load(); ... and add the following to init(); loadSamples(samples); BufferLoader takes an audio context, an array of paths to audio files and a callback as arguments. When we call bufferLoader.load(); our BufferLoader instance will work through the array we passed to it and load all of the sound files it can find. When all of the audio data has been loaded, the audio buffers that have been created are passed into the callback that we passed. Here we set the array of audio buffers as a global object, so we can access them elsewhere in the project.

12. Event listeners Now that we have a bunch of audio buffers that contain our sound data, we’re going to need a way to trigger them. Inside of our bufferLoader callback, we’re going to create a for loop that gets all of the drum elements on our page, takes the data-sound attribute and looks for a sound with the same name. When our div is clicked or tapped, it will play that sound!

... sounds = list; var theDrums = document. getElementsByClassName('drum'); for(var y = 0; y < theDrums.length; y += 1) { theDrums[y].addEventListener(touchOrClickEve nt(), function(){ for(var a = 0; a < samples.length; a += 1){ if(samples[a].name === this.

getAttribute('data-sound')){ playSound(a); } } }, false); } console.log(sounds); ...

13. Detect events On a lot of mobile devices (like iOS for example) ‘click’ events have a 300ms delay before they are dispatched to our event listeners. For sounds and media this is a disaster – timing is key! Fortunately, ‘touch’ events don’t have the same delay, so we’ll write a function that decides whether or not our device should use touch or click events;

function touchOrClickEvent(){ if('ontouchend' in document){ return "touchend"; } else { return "click"; } }

14. Play our sounds Now that we’ve got the appropriate listeners, we need a way to play our sound. Web Audio is not like , we can’t just call .play() on an audioBuffer to make it do its thing, we need to connect our audio buffer to our audio context in order to play it out through our speakers.

Think of it as a digital version of plugging your headphones into a computer, we need to connect to hear. Create a playSound() function and you then add the following…

function playSound(idx){ var src = context.createBufferSource(), newBuffer = cloneAudioBuffer(sounds[idx]); src.buffer = newBuffer; var gainNode = context.createGain(); gainNode.gain.value = 1; src.connect(gainNode); gainNode.connect(context.destination); src.start(0); }

15. Clone our buffers Earlier, we noted that audio buffers can only be played once, which is kind of useless unless we want to be able to only hit each drum once. In order to play our drum sounds multiple times, we’re going to create copies of our audio buffers that we play and then forget about. So let’s create a new function with cloneAudioBuffer();.

function cloneAudioBuffer(audioBuffer){ var channels = [], numChannels = audioBuffer.numberOfChannels; for (var i = 0; i < numChannels; i++){ channels[i] = new Float32Array(audioBuffer. getChannelData(i)); } var newBuffer = context.createBuffer( audioBuffer.numberOfChannels,

87

Developer tutorials Make drums with the Web Audio API

audioBuffer.length, audioBuffer.sampleRate ); for (var i = 0; i < numChannels; i++){ newBuffer.getChannelData(i). set(channels[i]); } return newBuffer; }

16. Clone walkthrough Every sound file has a number of channels: if the sound is mono then there is one channel, and if the sound is stereo then there are two and so on. We want to clone all of the audio data from our samples, so we need to create a buffer for each channel and clone that data.

var channels = [], numChannels = audioBuffer.numberOfChannels; for (var i = 0; i < numChannels; i++){ channels[i] = new Float32Array(audioBuffer. getChannelData(i)); } Now that we have arrays with our data in it (a Float32Array is not like arrays as we usually know them, it’s more like a space in the computer’s memory) we can create a brand-new buffer with all of the properties we need to describe our sounds, which we do with:

var newBuffer = context.createBuffer( audioBuffer.numberOfChannels, audioBuffer.length, audioBuffer.sampleRate );

Garbage collection In web development, we’ve got a fairly consistent expectation of what our content is going to do when it’s loaded by somebody. While we don’t have a great deal of assets in this project, we have created many copies of them really quickly. So do you take on the big or the little? Well, we don’t have to worry about that hypothetical, because we have garbage collection. Garbage collection is the process in which an application (our browser in this case) realises an object or entity is never going to be used again by the program and so it’s dereferenced and the memory it occupied is freed for use by other objects. Think of it as a giant bucket that scoops up all of those big items when they turn their backs and deals with the problem of size for you.

88

Finally, we have a brand-new buffer, but our buffer is empty so we fix that by working through our newly created buffer’s channels and setting them with the channels we created just a moment ago. Then we return our cloned audio buffer:

for (var i = 0; i < numChannels; i++){ newBuffer.getChannelData(i). set(channels[i]); } return newBuffer;

17. Play the sound Now that we’ve got our brand-new cloned audio context, it’s time to put it to work! In playSound, just before we cloned our audio buffer we created a buffer source in our context with context.createBufferSource(); This is our entry point to playing sounds through our speakers. To use our cloned audio buffer we set it as the source for our buffer source.

src.buffer = newBuffer;

passed through and these will be affected by our gain node. If we wanted to double the volume of our sample, we could set gainNode.gain.value to 2, if we wanted to half it we could set the value to 0.5.

19. Test the sound To play our sound, all that’s left to do is connect our gain node to our context’s destination (which could feasibly be anything, but in this case it’s our speakers) and call src.start(0). This will start our playback at 0 and the output will go through our gain node, to our context destination. If we can tell our buffer source at what point we want to play from, then can’t we just reset it to 0 and play again rather than all of this cloning business? Well, nope. An audio buffer becomes mostly useless after it’s been played, and besides even if we could do that, the effect would be undesirable – by resetting the sound mid-play, we’d get a horribly jarring stutter effect. It’s much better to let the sound continue on its own and create a new instance of it.

18. Web Audio nodes

20. Use on iOS

In Web Audio, nodes are like modules that you can use to change how a sound is played back. You can adjust the pitch, filter frequencies and much more. We’re going to use one of the simplest nodes to give our sound volume, a gain node. We create a gain node like so:

If you want to use you iPad or iPhone to play sounds, you can, but if you get a little carried away and flick the screen instead of tapping it, it might start scrolling and refuse to do anything until it stops. In your init() function add the following code to stop this:

var gainNode = context.createGain(); gainNode.gain.value = 1; src.connect(gainNode); Then we connect our src (our buffer source) to that gain node. Now, any data that is in our buffer source will be

// Stop iOS bouncing scroll window.addEventListener('touchstart', function(e){ e.preventDefault(); }, true);

17%

SPECIAL OVERSEAS OFFER

SAVE UP TO

ALL TITLES JUST £

49.99

ON A GIFT SUBSCRIPTION THIS

CHRISTMAS REAL CRIME Uncover the most fascinating and notorious true crimes in history 13 issues, save 4%

EXCLUSIVE CHRISTMAS OFFER SAVE UP TO 17% ON THE SHOP PRICE NEVER MISS AN ISSUE OF YOUR FAVOURITE MAGAZINE FREE E-CARD TO SEND WHEN YOU BUY AS A GIFT IDEAL CHRISTMAS GIFT - THAT LASTS ALL YEAR

HOW IT WORKS The action-packed science and technology magazine 13 issues, save 10%

FIND OUR FULL RANGE OF TITLES AT THIS GREAT PRICE ONLINE!

TV’S STEVE BACKSHALL SPEAKS OUT FOR SHARKS From the makers of

TM

MASTER OF THE SKIES EXPLORE THE INCREDIBLE

100 OVER

ILLUSTRATIONS & PHOTOS!

LIFE OF THE ALBATROSS

PLUS

OTTER BONOBO YETI CRAB EUROPEAN EEL

WITNESS THE GREAT MIGRATION MEET THE BIG FIVE EXPLORE THE ICONIC SAVANNAH

UGLY DUCKLINGS

HOW NATURE’S YOUNG TRANSFORM

HEDGEHOG

Helping wildlife survive the winter

ALL ABOUT HISTORY Bringing history to life for the whole family 13 issues, save 15%

GADGET Packed with the latest, coolest and most exciting tech 12 issues, save 17%

KINGFISHERS

Discover six of these stunning birds

JAGUAR

South America’s most elusive big cat

ANT FACTS

20 fascinating facts about this tiny insect

No. 024 ISSN 2053-7727

£3.99

24 >

9 772053 772005

WORLD OF ANIMALS Everything you need to know about the world’s most amazing wildlife 13 issues, save 4% 001_WOA24.indd 1

17/08/2015 19:01

HISTORY OF WAR The stories, strategies, heroes and machines of historic conflicts 12 issues, save 17%

ONLINE AT

www.imaginesubs.co.uk/xmas151

ORDER HOTLINE +44 (0)1795 592 869

DIGITAL PHOTOGRAPHER Inspiration, tutorials and tools for enthusiasts and professionals 12 issues, save 17%

RETRO GAMER The number one magazine for classic gaming 12 issues, save 17%

ALL ABOUT SPACE Discover the wonders of the solar system and beyond 13 issues, save 15%

SCIFINOW The number one magazine for sci-fi, fantasy and horror fans 12 issues, save 17%

Use code XMAS151 for this extra-special price.

To advertise here contact Luke [email protected]

+44 (0)1202586431

Get your listing highlighted! Contact Luke [email protected] +44 (0)1202 586431

Hosting listings SHOPPING CART

VIRUS FILTER

FIREWALL

PHONE SUPPORT

EMAIL SUPPORT

WEB CONTROL PANEL

SERVICE LEVEL AGREEMENT

£29.88

1GB

5GB

20

✗

✗

✗

✓

✓

✓

✓

✗

0845 859 0018

£59.88

5GB

50GB

500

✓

✗

✗

✓

✓

✓

✓

✗

123-reg (www.123-reg.co.uk)

Pro

0845 859 0018

£107.88

10GB

100GB

750

✓

✗

✗

✓

✓

✓

✓

✗

123-reg (www.123-reg.co.uk)

Bus Pro

0845 859 0018

£179.88

20GB

Unlimited

1,000

✓

✗

✗

✓

✓

✓

✓

✗

123-reg (www.123-reg.co.uk)

Plus (MS)

0845 859 0018

£59.88

2GB

25GB

100

✓

✗

✗

✓

✓

✓

✓

✗

123-reg (www.123-reg.co.uk)

Pro (MS)

0845 859 0018

£107.88

5GB

50GB

500

✓

✗

✗

✓

✓

✓

✓

✗

123-reg (www.123-reg.co.uk)

Bus Pro (MS)

0845 859 0018

£179.88

10GB

150GB

1,000

✓

✗

✗

✓

✓

✓

✓

✗

2020Media (www.2020media.com)

Light User

0870 321 2020

£45

20MB

1GB

3

✓

✓

✓

✓

✓

✓

✓

✗

2020Media (www.2020media.com)

Everyday

0870 321 2020

£100

200MB

10GB

15

✓

✓

✓

✓

✓

✓

✓

✗

2020Media (www.2020media.com)

Business/Pro

0870 321 2020

£275

500MB

20GB

50

✓

✓

✓

✓

✓

✓

✓

✗ ✗

PHONE NUMBER

PACKAGE

POP3 ACCOUNTS

0845 859 0018

Plus

NAME AND URL

MONTHLY BANDWIDTH

Starter

123-reg (www.123-reg.co.uk)

[email protected]

WEB SPACE

123-reg (www.123-reg.co.uk)

Whether you’re a hosting firm keen to promote your products or a happy customer who wants a favourite provider to be listed, drop us a line with the details!

COST PER YEAR

DATABASE SUPPORT

Got a deal you think we should list?

Keep an eye on the latest packages and deals with our comprehensive list of service providers

2020Media (www.2020media.com)

JAVA Tomcat

0870 321 2020

£300

100MB

3GB

15

✓

✓

✓

✓

✓

✓

✓

2020Media (www.2020media.com)

ASP.Net

0870 321 2020

£275

100MB

3GB

15

✓

✓

✓

✓

✓

✓

✓

✗

4D Hosting (www.4dhosting.com)

Big Web Hosting

0207 183 0602

£60

5GB

Unlimited

20

✓

✓

✓

✓

✓

✓

✓

✓

4D Hosting (www.4dhosting.com)

Bigger Web Hosting

0207 183 0602

£120

10GB

Unlimited

75

✓

✓

✓

✓

✓

✓

✓

✓

4D Hosting (www.4dhosting.com)

Biggest Web Hosting

0207 183 0602

£180

20GB

Unlimited

100

✓

✓

✓

✓

✓

✓

✓

✓

4D Hosting (www.4dhosting.com)

Big VPS

0207 183 0602

£204

75GB

500GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

4D Hosting (www.4dhosting.com)

Bigger VPS

0207 183 0602

£360

100MB

1,000GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

4D Hosting (www.4dhosting.com)

Biggest VPS

0207 183 0602

£720

200GB

1,500GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

Blackfoot Hosting Ltd (www.blackfoot.co.uk)

Home

N/A

£40

500MB

5GB

5

✓

✓

✓

✓

✗

✓

✓

✗

Blackfoot Hosting Ltd (www.blackfoot.co.uk)

Business

N/A

£50

1GB

20GB

100

✓

✓

✓

✓

✗

✓

✓

✗ ✗

Blackfoot Hosting Ltd (www.blackfoot.co.uk)

eCommerce

N/A

£100

2GB

40GB

200

✓

✓

✓

✓

✗

✓

✓

Blackfoot Hosting Ltd (www.blackfoot.co.uk)

Professional

N/A

£150

3GB

60GB

300

✓

✓

✓

✓

✗

✓

✓

✗

Blacknight (www.blacknight.com)

Minimus

35359 918 3072

£45

10GB

200GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✗

Blacknight (www.blacknight.com)

Medius

35359 918 3072

£79

20GB

400GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✗

Blacknight (www.blacknight.com)

Maximus

35359 918 3072

£45

30GB

600GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✗

Bravo14 (http://bravo14.co.uk)

Starter Linux

N/A

£130

2,000MB

2,000MB

10

✓

✓

✓

✓

✗

✓

✓

✓

Bravo14 (http://bravo14.co.uk)

Starter Windows

N/A

£20

2,000MB

2,000MB

10

✓

✓

✓

✓

✗

✓

✓

✓

Bravo14 (http://bravo14.co.uk)

Business Linux

N/A

£45

4,000MB

4,000MB

4,000

✓

✓

✓

✓

✗

✓

✓

✓

Bravo14 (http://bravo14.co.uk)

Business Windows

N/A

£45

4,000MB

4,000MB

4,000

✓

✓

✓

✓

✗

✓

✓

✓

Bravo14 (http://bravo14.co.uk)

Ultimate Linux

N/A

£60

Unlimited

Unlimited

Unlimited

✓

✓

✓

✓

✗

✓

✓

✓

Bravo14 (http://bravo14.co.uk)

Ultimate Windows

N/A

£60

Unlimited

Unlimited

Unlimited

✓

✓

✓

✓

✗

✓

✓

✓

Designwasp (http://designwasp.com)

Starter

0844 372 9848

£30

3GB

20GB

1,000

✓

✓

✗

✓

✗

✓

✓

✗

Designwasp (http://designwasp.com)

Home

0844 372 9848

£40

10GB

50GB

10,000

✓

✓

✗

✓

✗

✓

✓

✗

Designwasp (http://designwasp.com)

Business

0844 372 9848

£60

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✗

✓

✓

✗

Designwasp (http://designwasp.com)

Windows Unlimited

0844 372 9848

£60

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✗

✓

✓

✗

Designwasp (http://designwasp.com)

Windows Home

0844 372 9848

£40

10GB

50GB

1,000

✓

✓

✗

✓

✗

✓

✓

✗

Designwasp (http://designwasp.com)

CheapHost

0844 372 9848

£10

300MB

100MB

5

✗

✗

✗

✓

✗

✗

✓

✗

Digital Gibbon Ltd (http://digitalgibbon.com)

Personal

01865 589 990

£12

1GB

Unlimited

10

✓

✗

✗

✓

✓

✓

✓

✗

Digital Gibbon Ltd (http://digitalgibbon.com)

Personal Plus

01865 589 990

£48

Unlimited

Unlimited

50

✓

✗

✗

✓

✓

✓

✓

✗

Digital Gibbon Ltd (http://digitalgibbon.com)

Business

01865 589 990

£108

5GB

Unlimited

1000

✓

✓

✗

✓

✓

✓

✓

✗

Digital Gibbon Ltd (http://digitalgibbon.com)

Business Professional

01865 589 990

£132

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✓

✓

✓

✗

eHosting (www.ehosting.com)

Starter

0844 999 4100

£23.88

1GB

25GB

10

✗

✗

✗

✗

✗

✓

✓

✓

eHosting (www.ehosting.com)

Personal

0844 999 4100

£59.88

2.5GB

Unlimited

50

✓

✗

✗

✗

✗

✓

✓

✓

eHosting (www.ehosting.com)

Expert

0844 999 4100

£95.88

5GB

Unlimited

250

✓

✗

✗

✗

✗

✓

✓

✓

eHosting (www.ehosting.com)

Virtual

0844 999 4100

£227.88

50GB

Unlimited

Unlimited

✓

✗

✗

✗

✓

✓

✓

✓

Evohosting (www.evohosting.co.uk)

Starter

N/A

£29.99

500MB

1GB

3

✓

✓

✓

✓

✗

✓

✓

✓

Evohosting (www.evohosting.co.uk)

Home

N/A

£54.99

2.5GB

30GB

50

✓

✓

✓

✓

✗

✓

✓

✓

Evohosting (www.evohosting.co.uk)

Business

N/A

£79.99

6.5GB

Unlimited

Unlimited

✓

✓

✓

✓

✗

✓

✓

✓

Evohosting (www.evohosting.co.uk)

eCommerce

N/A

£159.99

30GB

Unlimited

Unlimited

✓

✓

✓

✓

✗

✓

✓

✓

Fasthosts (www.fasthosts.co.uk)

Personal

0808 168 6777

£32.87

5GB

Unlimited

50

✓

✗

✓

✓

✓

✓

✓

✗

Fasthosts (www.fasthosts.co.uk)

Business Bronze

0808 168 6777

£58.38

50GB

Unlimited

500

✓

Option

✓

✓

✓

✓

✓

✗

Fasthosts (www.fasthosts.co.uk)

Business Silver

0808 168 6777

£76.39

Unlimited

Unlimited

Unlimited

✓

Option

✓

✓

✗

✓

✓

✗

Fasthosts (www.fasthosts.co.uk)

Business Gold

0808 168 6777

£101.89

Unlimited

Unlimited

Unlimited

✓

✓

✓

✓

✗

✓

✓

✗

Fasthosts (www.fasthosts.co.uk)

WD Starter

0808 168 6777

£149.99

20GB

Unlimited

Unlimited

✓

Option

Option

✓

✗

✓

✓

✗

Fasthosts (www.fasthosts.co.uk)

WD Advanced

0808 168 6777

£199.99

Unlimited

Unlimited

Unlimited

✓

Option

Option

✓

✗

✓

✓

✗

Heart Internet (www.heartinternet.co.uk)

Starter Professional

0845 644 7750

£29.80

2.5GB

10GB

1,000

✗

✗

✗

✓

✗

✓

✓

✓

Heart Internet (www.heartinternet.co.uk)

Home Professional

0845 644 7750

£89.99

Unlimited

Unlimited

10,000

✓

✓

✗

✓

✗

✓

✓

✓

90 _________________________________________________________hosting listings

To advertise here contact Luke [email protected]

+44 (0)1202586431

Get your listing highlighted! Contact Luke [email protected] +44 (0)1202 586431

Featured host of the month: 111WebHost 111webhost.com

Getting more out of one of our quality listed hosting providers the ridiculously low price of £1 per month. For this, users get 1GB of webspace and 1GB of monthly traffic. For those looking for more, there is 5GB of webspace and unlimited traffic for just £2.50 a month. Unlimited webspace and traffic is available for just £5 a month. They also provide specialist hosting for WordPress, Joomla and Drupal.

WEB SPACE

MONTHLY BANDWIDTH

POP3 ACCOUNTS

DATABASE SUPPORT

SHOPPING CART

VIRUS FILTER

FIREWALL

PHONE SUPPORT

EMAIL SUPPORT

WEB CONTROL PANEL

SERVICE LEVEL AGREEMENT

Heart Internet (www.heartinternet.co.uk)

Business Professional

0845 644 7750

£129.99

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✗

✓

✓

✓

Heart Internet (www.heartinternet.co.uk)

Reseller Professional

0845 644 7750

£349.99

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✗

✓

✓

✓

ICUK www.icukhosting.co.uk

Professional

0845 009 9175

£30

250MB

1GB

50

✓

✓

option

✓

✓

✓

✓

✗

ICUK www.icukhosting.co.uk

Advanced

0845 009 9175

£50

2GB

2.5GB

150

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Enterprise

0845 009 9175

£80

2GB

500MB

Unlimited

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Professional Plus

0845 009 9175

£90

500MB

5GB

100

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Premium Plus

0845 009 9175

£150

1GB

12.5GB

500

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Enterprise Plus

0845 009 9175

£300

2GB

20GB

Unlimited

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Reseller Windows

0845 009 9175

£200

Unlimited

Unlimited

Unlimited

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Reseller Linux

0845 009 9175

£200

Unlimited

Unlimited

Unlimited

✓

✓

option

✓

✓

✓

✓

✗

ICUK (www.icukhosting.co.uk)

Reseller Enterprise

0845 009 9175

£500

Unlimited

Unlimited

Unlimited

✓

✓

option

✓

✓

✓

✓

✗

JAB Web Hosting (www.jabwebhosting.com)

Mail – M105

0800 043 0153

£15.17

256MB

3GB

50

✗

✗

✗

✓

✓

✓

✓

✓

JAB Web Hosting (www.jabwebhosting.com)

Home – H25

0800 043 0153

£24.47

1GB

8GB

50

✓

✗

✗

✓

✓

✓

✓

✓

JAB Web Hosting (www.jabwebhosting.com)

Professional - P55

0800 043 0153

£45

2GB

15GB

75

✓

✓

✗

✓

✓

✓

✓

✓

JAB Web Hosting (www.jabwebhosting.com)

Reseller – R25

0800 043 0153

£97.88

2GB

30GB

250

✓

✓

✗

✓

✓

✓

✓

✓

JAB Web Hosting (www.jabwebhosting.com)

Reseller – R105

0800 043 0153

£271.60

4GB

Unlimited

Unlimited

✓

✓

✗

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Blog

01438 342 490

£20

100MB

1GB

5

✗

✗

✓

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Starter

01438 342 490

£30

1GB

1GB

10

✗

✗

✓

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Starter

01438 342 490

£30

1GB

1GB

10

✗

✗

✓

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Dynamic

01438 342 490

£50

2GB

2GB

20

✓

✓

✓

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Premium

01438 342 490

£80

5GB

5GB

50

✓

✓

✓

✓

✓

✓

✓

✓

LCN (www.lcn.com)

Unlimited

01438 342 490

£120

Unlimited

Unlimited

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

LD Hosts (http://ldhosts.co.uk)

LD Budget (Linux)

07891 235858

£11.88

1GB

1GB

500

✓

✓

✗

✓

✓

✓

✓

✗

LD Hosts (http://ldhosts.co.uk)

LD Home (Linux)

07891 235858

£23.88

10GB

10GB

5,000

✓

✓

✗

✓

✓

✓

✓

✗ ✗

PACKAGE

PHONE NUMBER

COST PER YEAR

111WebHost is a provider committed to making website hosting easy to use while offering the best possible value. It provides solutions for small- and medium-sized businesses as well as individuals – and web designers and developers are high on their list. 111WebHost offers a range of top-value packages starting at

NAME AND URL

LD Hosts (http://ldhosts.co.uk)

LD Pro (Linux)

07891 235858

£41.88

50GB

50GB

20,000

✓

✓

✗

✓

✓

✓

✓

LD Hosts (http://ldhosts.co.uk)

LD Unlimited (Linux)

07891 235858

£60

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✓

✓

✓

✗

LD Hosts (http://ldhosts.co.uk)

Windows Home

07891 235858

£17.88

2GB

2GB

1,000

✓

✓

✗

✓

✓

✓

✓

✗

LD Hosts (http://ldhosts.co.uk)

Windows Unlimited

07891 235858

£60

Unlimited

Unlimited

Unlimited

✓

✓

✗

✓

✓

✓

✓

✗

Media Temple (http://mediatemple.net)

Shared-Server Pro

+1 310 841 5500

£64

2GB

1TB

1,000

✓

✓

✓

✓

✓

✓

✓

✓ ✓

Media Temple (http://mediatemple.net)

Shared-Server Advanced

+1 310 841 5500

£109

5GB

1.5TB

5,000

✓

✓

✓

✓

✓

✓

✓

NameHog (www.namehog.net)

Email Only

01604 212 904

£11.99

2.5GB

15GB

10

✗

✗

✓

✓

✓

✓

✓

✓

NameHog (www.namehog.net)

Starter

01604 212 904

£36.99

10GB

150GB

Unlimited

✗

✗

✓

✓

✓

✓

✓

✓

NameHog (www.namehog.net)

Home Pro

01604 212 904

£59.99

25GB

Unlimited

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

NameHog (www.namehog.net)

Business

01604 212 904

£109.99

Unlimited

Unlimited

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

Namesco (www.names.co.uk)

StartUp Plus

0845 363 3632

£89.99

500MB

5GB

10

✓

✓

✓

✓

✓

✓

✓

✓

Namesco (www.names.co.uk)

Business

0845 363 3632

£149.99

2,000MB

20GB

100

✗

✗

✓

✓

✓

✓

✓

✓

Namesco (www.names.co.uk)

Business Plus

0845 363 3632

£89.99

3,000MB

30GB

200

✓

✓

✓

✓

✓

✓

✓

✓

Namesco (www.names.co.uk)

Designer

0845 363 3632

£239.88

1GB

20GB

200

✓

✓

✓

✓

✓

✓

✓

✓

Namesco (www.names.co.uk)

Designer Plus

0845 363 3632

£479.88

Unlimited

30GB

Unlimited

✓

✓

✓

✓

✓

✓

✓

✓

£32.89 £109.99 £274.89 £300 £720 £1,200 £1,800

1GB 5GB Unlimited 20GB 160GB 2x500GB 2x500GB

Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited Unlimited

500 1000 1000 Unlimited Unlimited Unlimited Unlimited

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

✓ ✓ ✓ ✓ ✓

DEVELOPER ONE RESELLER VM500 Server 2200DC Server 3000DC Server 2600QC Server

Netcetera www.netcetera.co.uk

0800 808 5450 0800 808 5450 0800 808 5450 0800 808 5450 0800 808 5450 0800 808 5450 0800 808 5450

Netplan (www.netplan.co.uk)

Dedicated Servers

0207 1000 424

£3,000+

73GB+

1,500GB

100+

✓ ✓ ✓ ✓ ✓

PurplePaw (www.purplepaw.co.uk)

Email

N/A

£25

100MB

1GB

10

✗

✗

✓

✓

✗

✓

✓

✗

PurplePaw (www.purplepaw.co.uk)

Play

N/A

£40

100MB

1GB

10

✗

✗

✓

✓

✗

✓

✓

✗

PurplePaw (www.purplepaw.co.uk)

Plus

N/A

£65

750MB

5GB

25

✓

✓

✓

✓

✗

✓

✓

✗

PurplePaw (www.purplepaw.co.uk)

Power

N/A

£95

2GB

10GB

100

✓

✓

✓

✓

✗

✓

✓

✗

PurplePaw (www.purplepaw.co.uk)

R3 Reseller

N/A

£660

10GB

50GB

Unlimited

✓

✓

✓

✓

✗

✓

✓

✗

Netplan (www.netplan.co.uk)

Shared 100

0207 1000 424

£60

100MB

1GB

5

Netplan (www.netplan.co.uk)

VS100

0207 1000 424

£600

5GB

5GB

5

Netplan (www.netplan.co.uk)

VS200

0207 1000 424

£1,000

10GB

10GB

10

Netplan (www.netplan.co.uk)

VS300

0207 1000 424

£2,000

15GB

50GB

20

hosting listings __________________________________________________________91

Clas sif ied Ad ver t ising

«clikpic»

Websites for photographers

Try the new Clikpic for only £40 pa

includes ecommerce

Visit www.clikpic.com for a FREE 14 day trial POSTGRES DEVELOPMENT ISSUES?

Don’t waste time trouble-shooting If you’re developing an application or environment that’s not in production, don’t waste time if you’re faced with an issue. Our Developer Support gives you access to some of the most knowledgeable Postgres experts in the world – you’ll be back on track in no time. Developer Support is available on a monthly subscription. Minimum term is 6 months.

UK +44 (0)870 766 7756 US +1 650 378 1218 2ndquadrant.com/developersupport

Co m mp o a an bile tib d p le ta ho w bl n ith et es s

• Stunning range of new templates. • New admin system makes it even easier to use. • Stylish slideshows and carousels throughout. • New blog styles with extra options. • Easy upload and link to your social media. • And much more besides!

Clas sif ied Ad ver t ising

01202 586442

DOMAINS | MAIL | HOSTING | eSHOPS | SERVERS

BEST OF

BRITISH Claim your piece of Britain! Whatever you do with your domain name, celebrate your place in the UK with a truly British web address!

0

£ .99

From

1

CLICK

UPGRADE OR DOWNGRADE

1

CALL

SPEAK TO AN EXPERT

first year* excl. 20% VAT

1

CERTAINTY GEOREDUNDANCY

0333 336 5509 *1&1 Domains from £0.99 first year. After 1 year regular prices apply. Prices exclude 20% VAT. Visit 1and1.co.uk for full offer details, terms and conditions. 1&1 Internet Limited, Discovery House, 154 Southgate Street, Gloucester, GL1 2EX.

1and1.co.uk

RESOURCES FILESILO

YOUR FREE RESOURCES

LOG IN TO WWW.FILESILO.CO.UK/WEBDESIGNER AND DOWNLOAD THE LATEST COLLECTION OF MUST-HAVE VIDEOS AND RESOURCES

GET 274 MINS OF EXPERT JQUERY VIDEO

THE JQUERY VIDEO GUIDE

AN INTRO FOR DESIGNERS AND FLUID WIDTH TECHNIQUES

YOUR BONUS RESOURCES ON OUR BRAND NEW FILESILO THIS ISSUE YOU WILL FIND AN UNMISSABLE COLLECTION OF VIDEO GUIDES AND RESOURCES • 274 Minutes of expert jQuery video guides from Digital-Tutors • 10 Custom polygonal textures • 3 Web templates: Rissner, Simple User Login, and ZooPlane templates from W3Layouts • The Manbow and Mesmerize fonts from Typodermic fonts • The ‘Oh So Dandy’ Pack – a collection of patterns, textures and PS actions from A Cup of Resources

10 HI-RES TEXTURES

A COLLECTION OF POLYGONALS

TOTAL RESOURCES

46

TUTORIAL FILES

THIS ISSUE’S ASSETS

www.filesilo.co.uk/webdesigner 94

FILESILO – THE HOME OF PRO RESOURCES DISCOVER YOUR FREE ONLINE ASSETS A rapidly growing library Updated continually with cool resources Lets you keep your downloads organised Browse and access your content from anywhere No more torn disc pages to ruin your magazines

No more broken discs Print subscribers get all the content Digital magazine owners get all the content too! Each issue’s content is free with your magazine Secure online access to your free resources This is the new FileSilo site that replaces your disc. You’ll find it by visiting the link on the following page. The first time you use FileSilo you’ll need to register. After that, you can use the email address and password you provided to log in.

The most popular downloads are shown in the carousel here, so check out what your fellow readers are enjoying! If you’re looking for a particular type of content like brushes or fonts, use the filters here to refine your search. Can’t find the resource you’re looking for in these filters? Click on More Options to specify exactly what kind of resource you want. Green open padlocks show the issues you have accessed. Red closed padlocks show the ones you need to buy or unlock. Top Downloads are listed here, so you can get an instant look at the most popular downloaded content. Check out the Highest Rated list to see the resources that other readers have voted for as the best!

Find out more about our online stores, and useful FAQs like our cookie and privacy policies and contact details. Discover our amazing sister magazines and the wealth of content and information that they provide.

95

RESOURCES FILESILO

HOW TO USE EVERYTHING YOU NEED TO KNOW ABOUT ACCESSING YOUR NEW DIGITAL REPOSITORY

To get access to FileSilo, please visit www.filesilo.co.uk/webdesigner

01

Follow the instructions on-screen to create an account with our secure FileSilo system, or log in and unlock the issue by answering a simple question about the magazine. You can access the content for free with your issue.

02

If you’re a print subscriber, you can easily unlock all the content by entering your unique Subscriber ID. You can find this on all correspondence from Imagine Publishing, including the clear plastic envelopes your magazine gets delivered to your door in every month.

03

You can access FileSilo on any desktop, tablet or smartphone device using any popular browser (such as Safari, Firefox or Google Chrome). However, we recommend that you use a desktop to download content, as you may not be able to download files to your phone or tablet.

04

If you have any problems with accessing content on FileSilo, or with the registration process, take a look at the FAQs online or email filesilohelp@ imagine-publishing.co.uk.

MORE TUTORIALS AND INSPIRATION?

Web Designer is all about giving web designers and developers what they want. Make sure that you pay a visit to the Web Designer website where you will find a treasure trove of design and development tutorials. All the latest technologies and tools are covered including HTML5, CSS3, jQuery, PHP and responsive design. Plus, delve into the lives of the world’s biggest agencies with our exclusive interviews. Find out how they design and develop some of the best websites seen on the web.

www.webdesignermag.co.uk

Issue 243 of 96

is on sale 10th December 2015 from GreatDigitalMags.com

UNLOCK THE POWER OF ANDROID w w w.li t t l e gre enr o b ot .c o.uk

Available from all good newsagents and supermarkets

ESOURC ER

EVERY IS S D

E • FRE SU

ED

ON SALE NOW

OWNLOA

> Superphone face-off > Brand new Nexus > 30 amazing Marshmallow secrets HARDWARE REVIEWS

ANDROID HACKING

TIPS & TRICKS

APP REVIEWS

HELP & ADVICE

BUY YOUR ISSUE TODAY

Print edition available at www.imagineshop.co.uk Digital edition available at www.greatdigitalmags.com Available on the following platforms

facebook.com/littlegreenrobot

twitter.com/lgrobot

VR & THE WEB How VR is changing the face of web design, what technologies to use, in-depth MozVR interview and practical building advice

WHAT’S NEW IN MODERNIZR 3?

Add powerful all-round browser support with the latest features

UNIQUE 3D UI FOR MOBILE PT2

Part two of this tutorial tells you how to add interaction to the interface

BEST EVER RD FRAMEWORK?

Exclusive look at Foundation 6 from the people who built it

Visit the WEB DESIGNER online shop at for back issues, books and merchandise

98 _____________________________________________________________ next month

ADD PAYMENTS WITH STRIPE

How to integrate debit/credit card payments into sites and apps

ALL IN YOUR NEXT

WEB DESIGNER Issue 243 on sale

Thursday 10th December 2015

Providing helpful, reliable, hassle free hosting for 15 years

t have to n’ do u yo so t en em ag an m er rv We do all the se

Our Managed Hosting is…

Winne ISPA Cust omer Cho ice 2

013 + 20 1

r

Aw

4 + 2015ard

• UK based (support and servers) • Value for money • A worry free service • Reliable and Stable – 99.97% uptime since May 2007

99%

of our customers rate us good, very good or excellent

Try us today. 30 day no quibble money back guarantee. Sign up today and get 10% off any package using the code WEBDESIGN