Innholdsfortegnelse for No. 247 i Web Designer

“ Angular 2 is built for large apps as well as large teams. To that end, we have focused on toolability, and maintainability of the codebase” 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” Angular 2: are you ready? It’s hard to believe that the Angular framework has been with us for four years already. And now with Angular 2 on the horizon, the framework looks set to reach new heights. Our lead feature takes a look at the complete Angular sphere. We talk to Angular creator Miško Hevery about the how and why of Angular 2, and ask if there will be an Angular 3. This is a man who knows…

Web Designer’s latest digital addition to our burgeoning collection is the third volume of 10 Amazing Websites and how to build them. We cherry-pick a collection of the ten best sites and pick out the core build process for the best techniques. Don’t forget CSS Style Secrets and jQuery Genius Guide. Get to grips with the core API, find out how jQuery works with ES6, learn advanced jQuery methods Plus, check out Advanced Angular, 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 you will find them waiting for you as an in-app purchase.…

Render 2016.render-conf.com A new two-day front-end conference in Oxford running from 21 April. Render boasts a host of respected speakers. Mobile + Web Devcon bit.ly/1qtc9Ot Get to San Francisco from the 26 April to improve your mobile web dev skills with expert help. Industry Conf industryconf.com A conference packed with techniques and content covering everything from design to the frontend. Respond 2016 bit.ly/22dYr40 Respond addresses the myriad challenges designers/ developers face in delivering modern web experiences. JSUNCONF 2016.jsunconf.eu/ A conference with a difference. Everybody can propose a talk. Everybody votes and the most voted talks are held.…

1.Create the sound source To create the wind noise within Cycle Tracks, a source sound is manipulated as the ride speeds up or slows down. If you listen to the sound of air rushing past as you cycle on a bicycle, it sounds like a hissing sound not too dissimilar to radio static or a detuned TV. By leveraging the Web Audio API the site re-creates that sound effect to add to the immersion. 2. Work with WAD A third-party JavaScript library called WAD mostly handles the Web Audio API code used within Cycle Tracks, simplifying things significantly. You can find WAD on GitHub by visiting github.com/rserota/wad where you’ll need to download the library ZIP, locate the main wad.min.js file and link to it in the head of your page.…

MANAGING DIRECTOR Liam Dawson “It’s not on the site, but if it’s Vodka, it’s a Bloody Mary – good any time of the day!” SENIOR WEB DEVELOPER Sam Smyth “Generally prefer a nice pint of Leeds Pale, but if we have to do cocktails, I’d keep it simple and go with a Toffee and Cola” ACCOUNT EXECUTIVE Hollie Phimister “I’d go for the Passion Fruit Caiproska because it’s fruity, refreshing and because it reminds me of Summer.” HEAD OF DIGITAL CREATIVE Joff Lumb “Original and Cranberry. Keep it simple.”…

This is not one project but several. This is a universe we have been expanding for three years now. Originally, our client contacted us for a simple campaign featuring ladybird characters drawn by an external illustrator. We immediately saw the potential to create them in 3D and the client accepted. At the time, this required our little agency to spend valuable time and money. But it was also one of our best ideas. The result was such a success that we subsequently developed other campaigns, for Easter, Halloween and Christmas. We developed other characters and scenery in order to bring the universe of Coxylune to life. Where three years ago we made a fixed export to dress up a product page, today we develop, several times a year, award-winning minisites…

ALL ABOUT ANGULAR 2 The official site has plenty of info, but the community at large is producing a host of resources, opinion and advice. Check angular2.com for more ARCHITECTURE Deciding how you structure an Angular app is an important decision as once it’s in place it can be time-consuming to refactor. It’s also a subjective process so what works for one project may not be right for another. Scaffolding tools like Yeoman do this job for you, but have their own opinions on how to structure and can be quite large out of the box. Once scaffolded, a simple Angular application with tests can be between 44 to 55 MB in size. Having a consistent structure is beneficial for many reasons. It means that your code and naming conventions…

Vector images SVG vector images are used for shapes within the navigation and content to ensure presentation never becomes pixelated. HUD-style UI A head-up-display-style UI keep navigation and controls visible, regardless of the state of the zoomable navigation. Normal navigation Having a standard navigation component ensures that users can always access something to navigate to. Fallback controls Controls to zoom are available as buttons for visitors who are not using a touch-based device like a smartphone or tablet. Content pages Pages are managed separately, avoiding content presentation being obstructed by the zoom state. EXPERT ADVICE Size matters The ability to zoom into content opens new possibilities for user experience design, but they are not without their risks! Considerations that should come to mind include the purpose of the zooming functionality…

Creating a mobile web app requires the design of a website that is already optimised for small screens. Once you distribute this website’s URL to your users, you will be able to enjoy them interacting with the fruits of your labour. In practice however, this very same blissful and simple concept rarely works out the way that we think it will. Tunnels, garages and cellars all ensure that mobile network connections are unreliable for such user interactions. Furthermore, websites not being located in an app store makes the task of customer acquisition quite difficult. The use of hybrid applications can solve this problem by providing an embedded web browser. In turn this embed can then be bundled with the application files. The result is the yield of an application that…

When deploying code for small and sedentary user groups, going the route of HTML and CSS can be a quick and cost-effective solution. If your web app is designed according to the principles of responsive design then it can run on smartphones, tablets and workstations out of one codebase. Hosting can be accomplished with minimal effort, thereby freeing you from the hassles of deploying mobile apps. CONTROLS EN MASSE By default, HTML5 does not provide attractive-looking widgets. This problem can be mitigated by using a GUI framework – they might not wire themselves to native controls directly, but can provide great-looking analogies fooling all but the most experienced of users. NATIVE ISLANDS Packing code with PhoneGap lets you mobilise your app: if all relevant libraries are embedded, the product can…

Android, iOS and Windows provide developers with native APIs. Apple’s UIs are based on Objective-C and/or Swift, while Google does most of its work in Java. Developers targeting Windows can choose from a variety of languages via the Universal Windows Platform. EASY DEBUGS As platform vendors want to entice developers to work for their OS, provided IDEs tend to be top notch. Also most platform vendors tend to favour native apps to web-based ones. When trying to get the all-important featured app store spaces, working with native IDE tends to give you a head start. TIME-CONSUMING CODING Targeting the four most widely used mobile platforms means that each and every feature needs to be written four times – as time goes by, the hours used tend to add up.…

The following tutorial steps will walk you through the creation of a program, which combines a QML-based user interface with a backend based in C++. These steps will show the passing around of signals and also shows some basic QML coding. Devs who have mastered and understood this can work on more complex projects, drawing analog conclusions from the already acquired knowledge. 1) INSTALL QT CREATOR The first step to Qt bliss is the downloading of the IDE. Visit qt.io/download-open-source to obtain an online installer which allows you to fetch required components from Digia’s servers as they are needed. Make sure to install at least a recent version of Qt for the desktop – we will do our experiments on desktop operating systems. 2) CREATE A PROJECT Qt Creator offers…

01. Pygmy Elephant pygmy-elephant.com Multilayered video backgrounds blended with complementary colours. 02. Codeology codeology.braintreepayments.com Intriguing code making animations of code. 03. LA 2024 la24.org LA, an Olympic host candidate, combines video and animation to grab attention. 04. TOKYU AGENCY bit.ly/1RZZf4v Motion, animation and angles add interest to a recruitment site, Graphics 10 Logos bit.ly/1pjbf7l Clever thinking. What would famous logos look like if they were affected by the products they represent? Colour picker Legendary 5 bit.ly/1ROMEka Typesetter Fourth bit.ly/1U10V1t A contemporary roundhand script inspired by baseball, sign painting and branding. Corporative Sans bit.ly/1SMPbOj Curved terminals personality, distinctive traits and a friendly face. Themematic Hatch highgradelab.com/hatch Available in six different flavours including creative agency, shop, medical and parallax to name a few.…

“Ideas are very social, ideas rarely do well in a vaccuum” It’s no secret that social networking has had a massive impact on our lives. Facebook is used by over a billion people, LinkedIn has been hugely successful as a business tool and Twitter has gone some way towards providing a platform where individuals and businesses can connect and coexist. The problem is none of them seem to quite fit the bill for the creative industries. The creative industry fuels innovation across almost every sector, and is a massive driver in creating economic demand for products and services and long-term growth for entire economies. It has a unique set of needs that cannot be fulfilled by mainstream platforms. At the heart of the industry are B2B relationships – and the…

1.The sliding recipe menu One of the most distinctive UI elements on 12dishes.com is the panelled, sliding menu found within the main recipes section. As you navigate this element left and right by clicking the arrowed rollover links, the panels or slides shuffle elegantly into view. You can view this in action by visiting 12dishes.com/recipes. 2. Add the libraries In this technique we’ll re-create the recipe sliding menu from the site, building a simplified demo version using HTML, CSS/SCSS, GSAP’s TweenMax and jQuery. So to start, create a basic HTML document and place the latest TweenMax and jQuery libraries into the <head> of the page, linking to the CDN versions. 3. Structure the page Our HTML content markup almost wholly consists of a series of nested <div> elements, starting with…

WHO Sweet Punk WHAT Web and media design for specialist brand content WHERE 63 rue de Lancry, 75010 Paris WEB sweetpunk.com KEY CLIENTS Société Générale 1001 Salles La Grande Parade Métèque Fenwick Jean-Philippe Nuel Even as a relatively young agency, Sweet Punk has become one of the leading digital design spaces in France. Sweet Punk was created in 2012 by Alexandre Castaing and Stéphane Pointin. They met in 2008 through an agency specialising in video production and web TV. At the time Stéphane Pointin, a graduate in marketing from ESA (a French business school in Lille), was head of communications for Monabanq (a French online bank) and required videos for his future website. Alexandre Castaing, who has a creative background, was the agency’s art director. They hit it off and…

“While Angular 1 was a framework, Angular 2 is a platform” Q. Angular 1 is a robust and popular language. How long do you think it will be before developers finally say goodbye to Angular 1? A. Angular 1 is very popular and will be supported for as long as there is a significant user base still using it. We currently get about 1.3 million unique monthly visitors to the Angular 1 website and about 300,000 unique monthly visitors to Angular 2. We are pleasantly surprised by the speed of adoption even before we are out of beta. Q. Angular 2 is a not a progressive update from Angular 1. It is almost a completely new variation on the first version. What was the thinking behind Angular 2? A. Angular…

Despite the large amount of changes there are some core concepts that can be transferred from Angular 1 to 2. Features like dependency injection have changed how they’re written, but the concept remains the same and brings with it the same advantages such as testability. The aim in Angular 2 was to make it simpler and more powerful. Instead of just accepting a string you can inject a class too. It’s still a MV* framework so all the learning of model-view-controller still applies. Keeping your data separate from your functions separate from your views is still key to working with Angular. Components play the role of controller/ view-model, which is similar to how many people treat Angular 1 controllers. With Angular 2’s increased modularity this is even more apparent. The…

Animating 3D doesn’t have to involve WebGL and a bunch of JavaScript libraries before getting down to the business of actually crafting an exciting animation. CSS, with a little bit of JavaScript, can do the job for simple, effective animation, with the added benefit that it’s DOM based – meaning HTML elements galore and established practices for managing interaction. Though this tutorial chooses to implement coloured faces on the cube, it’s possible to put any content within those face elements. It could become the foundation for an unusual carousel, or even a full-page transition. This tutorial introduces 3D transforms, perspective and preserve-3d, keyframe animation, managing animation states with JavaScript. More importantly though, is the thought that goes into motion design. You’ll be designing animation which brings a realness to objects…

Interpreted languages have been around since the glory days of ROM basic: most home computer owners did not know that games were not compiled but rather run dynamically. JavaScript-based systems combine such a runtime with a set of bindings to native APIs. This means that developers can call native APIs directly with minimal effort – once the ways to handle pointers and similar idiosyncrasies of non-JS languages are out of the way, coding tends to proceed swiftly. NATIVE HELPERS Most JS interpreters provide a variety of comfort features. One classic is a binding to the native GUI stack – it takes in a GUI layout description in an XML-type language and turns it into a UI. Another staple is a set of abstraction classes simplifying access to commonly used features;…

Microsoft’s .net framework and its open source sibling Mono work via a common runtime language (CIL) run on various platforms. As long as the runtime environment and supporting services are available, apps can be ported with ease. BEWARE THE GUI In practice, this architecture leads to problems. Microsoft’s GUI stacks are not available for other OSs: this means that developers need to maintain multiple versions of the presentation part of their codebase. GO THE OTHER WAY C++ is the language of computing: a compiler is available for all platforms. Qt is a batch of libraries along with supporting tools – if the toolchain is ported to a target platform, apps can be recompiled with minimal effort. The main benefit of Qt is that its usage results in completely native programs…

BROWSERQUEST phonegap.com/app/browserquest This Windows Phone-based 2D game shows that PhoneGap can also be used to create nonbusiness applications. SWORKIT phonegap.com/app/sworkit The number-one competitor to Christian Kaar’s Runtastic harnesses the power of PhoneGap in order to reduce development efforts. SNOWBUDDY phonegap.com/app/snowbuddy Take one look at Snowbuddy, and convince yourself that svelte-looking applications can also be created without native code. LOGITECH SQUEEZEBOX CONTROLLER phonegap.com/app/ logitechsqueezebox%E2%84%A2-controller-2 Harness the power of TCP/IP to take control of external hardware. This application controls Logitech’s SqueezeBox modules. BIT TIMER phonegap.com/app/bit-timer Bit Timer uses PhoneGap’s audio abstraction layer to the max.…

First of all: be painfully aware that many, if not most of the products gracing this list, tend to use PhoneGap internally in one way or another. Sencha Touch is one interesting alternative – it combines PhoneGap’s runners with a high-quality GUI stack, thereby simplifying the creation of attractive-looking applications. By and large, Ionic takes a similar approach in that it bundles up a group of interesting libraries along with an alternative command-line deployment utility. Using an alternative framework is not necessarily a sensible move: Ionic, Appcelerator et al have significantly lower market shares than vanilla PhoneGap and/or Cordova. This means that getting help can be harder if a problem arises.…

This concept is best explained via a button analogy made up of two rectangles inside one another: the top rectangle is assigned an ID property in order to make it accessible to other QML components. Look at the width and height properties of the inner rectangle to find one important attribute of the framework: properties can be made up of constants or of computed values which are computed at runtime from other properties: WHERE IS THE JAVASCRIPT? Computed properties show but a small part of the power of QML. Its main strength involves the use of JavaScript as a runtime language: small-scale event handling can be handled via embedded JS code: This example is interesting as it shows the direct embedding of JavaScript: the onClicked property of the MouseArea is…

Featured host: ElasticHosts www.elastichosts.co.uk 020 7183 8250 “ElasticHosts’ global team of engineers provides excellent support, around the clock” About us ElasticHosts offers simple, flexible and cost-effective cloud infrastructure services with high performance, availability, and scalability for businesses worldwide. ElasticHosts’ global team of engineers provides excellent support, around the clock by phone, email, and ticketing system. The company is true to its name; ElasticHosts servers can be resized at will, run any operating system, and they are managed through a user-friendly web control panel with instant VNC access. ElasticHosts offers ten data centre locations around the world – and this includes the UK and Europe. What we offer • Cloud servers – with any specification and operating system you can imagine. • Linux OS – Containers come with two advantages: auto-scaling…

Anyone working under the digital/creative banner will undoubtedly know what Adobe is. At some point in a creative career Photoshop and/or Illustrator would have been on the radar. InDesign might have even got in on the act. For those with a longer history, Fireworks would have been there as well. Numerous iterations finally kissed goodbye to the ‘disc’ as Adobe went online back in 2012 with CC. The old favourites happily made the transition but a host of newcomers have been coming to the Adobe party, slowly and surely. The latest in a long line-up is Project Comet, a tool aimed at UX designers. The general consensus around the industry has been that while Photoshop and Illustrator are powerful packages they only serve a specific purpose. Both have been utilised…

Project Red Square Vodka Web redsquarevodka.co.uk Agency Grapple Web grapple.co.uk Duration 8 Weeks Total hours 400 A square, it doesn’t get much simpler than that when it comes to creative ideas. But, this is where it all started for Grapple and Red Square Vodka. In 2015, Red Square Vodka relaunched itself into the market as part of a £1 million investment: new recipe, new flavours and new creative campaign created by the Ponderosa Group. Their motto was simple: ‘Life. Live it. Join it. Make it. Share it. Square it’ – there’s that square connection again. Grapple began to map out a user journey across cocktails, social flavours and lifestyle. The square sparked the idea for the initial user interaction. A visit to the Red Square site will reveal what happens…

This project – our most important at the time – is one of the best examples of how we work and of our creative approach. It blends digital, video, social strategy, participatory approach and makes way for innovations such as 3D printing. But above all it is a concept that can be summed up in one sentence and that corresponds perfectly with the expectations and needs of the client. It is the reason why our agency was selected. The brief was to address students and the issues related to their studies and getting set up: we offered them the opportunity to win a one-year all-inclusive box, which involved them putting together the box themselves with the items they needed. In this project we brought together the expertise of our art…

MOBILE OPTIMISATIONS Angular 2 has been released from the shackles of the DOM and is now fully independent. This means that it can be optimised for platforms that it wasn’t capable of reaching before. NativeScript and Ionic 2 can both enable you to build both native and hybrid mobile apps with Angular 2. SERVER-SIDE RENDERING Using Angular Universal, Angular 2 can be run with Node.js or within Web Workers. This can drastically speed up the user interface and should end cases of FOUC and initial page-loading spinners. This feature is still in flux but when it’s finalised will lead to a much fuller and faster experience. THE FUTURE TODAY Adopting Angular 2 today could speed up your team’s adoption of ES2015 or simply encourage them to use a more modern…

Scrapbook effect The page is designed to look like a scrapbook of war memorabilia, vignette effects also give the content an aged look. Animated parts As the user rolls over sections, animated lines appear giving immediate feedback to the title of each section. Photo sections When the user rolls over sections that have photos the photos separate outwards, spreading out further in the design. Rollover hover Each content panel has an elaborate rollover, in its simplest form the background scales up to highlight that section. Page preload After preloading, users are prompted to hit an explore button which scrolls the page down to the first section’s content. EXPERT ADVICE Bringing the past to life One of the most impressive parts of the A State of War website is the interactive…

1 IS THIS A SYSTEM APP? Applications that integrate themselves into the host OS must be written using completely native techniques. A good example for that would be a file system driver or a similar utility: attempting to create it with plugins is a sure-fire way to ask for pain and grief. 2 WHAT DO I KNOW ALREADY? Learning a new technology as a project runs is a sure-fire recipe for a disaster. If you are an expert at Android’s API, a product with an urgent deadline must be tackled using your existing knowledge if at all possible, rather than diving into something new. 3 DOES IT RUN ON THE WEB? Reinventing the wheel is not a productive allocation of resources. If your product already exists as a JavaScript-based web…

PRO React Native is completely free to use and does not require licence fees. CON At the time of writing, React Native still is full of bugs due to the early development process. React Native differs from other projects and frameworks as it lives inside the NPM environment. Getting started involves the downloading of the packages watchman, flow and react-native-cli, all of which are available in NPM’s default repositories. In the next step, a project must be generated by using the command-line tool: react-native init ImagineSample When the generator has done its work, look at the /android/ subfolder which contains a complete Android Studio project to be loaded with Google’s native IDE. This is necessary because the back-end code can be studied this way and developers can extend the project…

QT DOCUMENTATION doc.qt.io The best way to learn about creating with Qt involves actually reading the main source of information. Visit the Qt Documentation portal in order to get loads of information right from Digia’s experts – if you are interested in a topic, the official documentation of the framework is the place to be. QT EXAMPLES doc.qt.io/qt-5/qtexamplesandtutorials.html Some people prefer to learn by looking at working examples. Digia provides a large batch of more or less complex programs demonstrating a large variety of aspects related to the framework: if you want to see one of the APIs in action, why not download an official example? ANDROID KICK-OFF RESOURCE doc.qt.io/qt-5/androidgs.html Android development requires a batch of extra resources. Digia provides a nice step-by-step guide which instructs you of the downloading…

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…