Innholdsfortegnelse for No. 272 i Web Designer

1. Initiate HTML The first step is to define the HTML document, which consists of the HTML container for storing the head and body sections. While the head section is primarily responsible for loading the external CSS and JavaScript resources, the body section will store the content elements to be created in step 2. 2. Content elements The technique will allow any content container using the 'data-parallax' attribute to display the effect. Each first level child element will display with the parallax presentation. This example sets three child layers for the parallax, but you can add more if you want to. You can also add content to these layers such as text or images; PNG or SVG with transparency will work best. 3. Parallax container style Create a new file…

1. Page structure initiation The first step is to initiate the HTML web page. This consists of the HTML document container that is responsible for storing the head and body sections. The head section stores non-visible information – in this case the document title and a link to load the external CSS document. The body section is used to store the visible page content created in Step 2. 2. Body content The document body content consists of a <ul> list with three list items. The important part is the application of the 'pop' class, which will be used by CSS to find this element to apply visual styling. The list items inside this list will be the elements that appear with the 'pop' effect. 3. Presentation rules With the HTML…

“I would love to see the faces of people who watch the story for the first time,” muses Héctor when questioned about gauging the audience response and where that might lead. “Just to know if they are laughing with the things that I find funny. It would be nice to know if they are touched by something, or if they close the browser during the first minute instead. But this is not possible of course and I just have opinions from people who kindly shared it with me.” So has that kind of encouragement given Monerris a hunger for more? Certainly it’s clear that the warm reception and his own personal pride continues to yield palpable creative satisfaction when he speaks about it. Might we see a sequel to the…

Whatever your organisation, you need a great website. Creating and maintaining one that suits your ever-changing needs can be difficult and expensive. Thankfully, uSkinned’s starter kits are future-proof, adaptable and easy-to-use, so no matter how much your site changes, they’ll grow with it. And right now, you can get 15 percent off of your next uSkinned purchase with the code 15OFFCB. Head over to http://bit.ly/2F5PxgA for more. uSkinned’s themes are designed with users in mind, and make it easy for anyone to create a beautiful, professional-looking site. Whether you’re a web designer or developer, marketing professional or non-profit volunteer, run your own business or work for a digital agency, or just want to create an exceptional website, uSkinned is the perfect solution. You need a website that’s flexible and can…

1. GET THE POLYMER CLI The easiest way to get started with Polymer is using the CLI. If you’ve used Node and npm before, this will be very familiar. If you haven’t used these before, you’ll need them and can find out how to get them at www.npmjs.com/get-npm. Install the Polymer CLI using: 2. YOU’LL ALSO NEED BOWER The current version of Polymer (2.0) uses Bower as its package manager. Therefore, you’ll need to install Bower to install custom Polymer components, which you’ll almost certainly want to do. Bower itself can also be installed via npm: 3. CREATE A POLYMER PROJECT Now we can create a project. Make a new directory, navigate to it, and run: Amongst other choices, you’ll be prompted with a template option. Select ‘polymer-2-starter-kit’. This will…

HEADING STRUCTURES All headers in a web page should have a hierarchy, beginning with the most important header to the least, and the markup of the page should reflect that. In HTML, the most important title is an <h1> tag, and can go all the way down to an <h6>. You can use as many or as few of these as you like, but they must start with an <h1> and must always be used in order. The reason for this is that heading tags denote importance to screen readers, and out of order headers may well confuse a user. Proper heading structure also benefits the SEO of your page. You can check this using the HeadingsMap extension for Chrome. When run on a page, this generates a tree based…

“CAPTIONS MOVE AROUND A SCREEN TO DENOTE WHO IS SPEAKING, WHEREAS SUBTITLES ARE ALMOST ALWAYS SET TO THE BOTTOM CENTRE OF THE SCREEN” SUBTITLES/CAPTIONS It’s worth noting that captions and subtitles are not the same thing: Captions are intended for deaf and hard-of-hearing audiences. The assumed audience for subtitling is hearing people who do not understand the language of dialogue. Also captions move around a screen to denote who is speaking, whereas subtitles are almost always set to the bottom centre of the screen. They are however implemented in the same way technically, and so whichever challenge relates to your site, here’s how to tackle it: The <track> element HTML5 enables us to specify subtitles for a video using the ‘<track>’ element. This lets us specify the type of content…

Animation on the web is awesome, you can use CSS or JavaScript to animate just about anything. So when we begin animating elements, we just go for it – using any property we see fit – and for a while everything seems fine, and then suddenly your animations start to stutter and the response from the browser feels heavy, this alone can be enough to have users leave your site. In order to fix these janky animations and have them run at a silky smooth 60fps – or as close as we can get to it – we need to understand what’s going on under the hood in the browser. The explanation here is a huge simplification but should give you enough of an understanding to improve your animation performance;…

Phaser 3 github.com/photonstorm/phaser In case you don’t know Phaser is a free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers. It supports Canvas and WebGL. The open source framework has now reached version 3. There is also a Phaser CE ‘a community-lead continuation of the Phaser 2 codebase and is hosted on its own repo’. Blotter.js blotter.js.org If you want to create unconventional, and impressive, text effects for the web then this JavaScript API is the ideal tool for your projects. fullstory fullstory.com/free How are customers using your website? What experience are they getting? Fullstory will capture everything, ready for you to analyse. Vecta vecta.io Vecta is a real-time, collaborative, advanced SVG editor. Create diagrams to visualise your backend architecture or agile processes.…

“Narrative is a social network emphasising subject matter, with this cascading site telling its story across chapters of charming animations” narrative.network Designer: Griflan Design Inc – griflan.com Development technologies HTML5, jQuery, TweenMax (GSAP), Typekit…

It wouldn’t be too unfair to say that although an abundance of creative care goes into most web projects, they don’t often start solely as a calling. In these pages we typically profile projects that are predominantly commercially driven, even if they represent admirable non-profit pursuits or charitable causes. Very rare then that we have the chance to examine not a vanity project, but more of a mission liberated from the typical client-agency paradigm. One Last Beat is a totally solo effort that scooped FWA’s FOTD and FOTM in January along with Site Of The Day picks for Awwwards and the CSS Design Awards. The man behind it is interactive developer Héctor Monerris, now operating as a freelancer focusing on WebGL-powered frontend work, who drew on some 15 years of…

We Create Digital is made up of highly experienced web developers and graphic designers fuelled by a genuine passion for technology. Until recently, Adobe Illustrator was our go-to application for graphic design – indeed, it has been a mainstay for many designers since its introduction in 1987. While a plethora of competing products have been introduced since, most have fallen by the wayside and allowed Adobe to maintain its domination of the market. Affinity has risen as Adobe’s newest – and possibly fiercest – challenger yet, drawing parallels to two of Adobe’s flagship applications: Illustrator and Photoshop. Affinity Designer is a professional vector graphics app with power to spare. Affinity Photo is a dedicated image editing application boasting a wealth of highly refined tools for image readjustment and enhancement. Affinity…

The web components specifications, which describe a number of HTML standards allowing modularisation of code on the web, have been around since 2011. The primary objective of web components is to allow you to break your code down into custom elements, or re-use those others have made. For example, a <google-map> element that replaces the need to write JavaScript to inject a map onto a page. The benefits are clear, since you can not only import modules easily, but also lay out more manageable code (no more scrolling through pages of nested divs). Yet, arguably, uptake has been slow. It’s now 2018 and the full set of web component specifications are still not supported by every current browser, meaning that developers are reliant on either polyfills or frameworks to ensure…

1 Domino’s Pizza  http://bit.ly/2kS7VBQ For many businesses, the newer pages start using Polymer first. Domino’s Pizza’s wedding service (yes, this is a thing!) uses it even though their main site doesn’t yet. 2 YouTube  https://www.youtube.com If you need proof that Polymer is ready for prime time, look no further than YouTube, one of the most highly-trafficked sites on the web. 3 Salesforce  http://bit.ly/2EoJTZV Cloud computing provider Salesforce have built a set of Polymer components on top of the Salesforce SDK to quickly build Salesforce-driven mobile and tablet apps. 4 Net-a-Porter  http://bit.ly/2uauF1f It’s not just Google using Polymer, though. Net-a-Porter adopted it very early on, and still use it on their store pages to this day. 5 McDonald’s  http://bit.ly/2HcdpQz It’s not just public websites which benefit from components. It seems McDonald’s…

1. DEFINING AN ELEMENT We’ll extend our app from the previous tutorial. A custom element is defined by extending a class from Polymer.element, which we’ll do in a new title-card.html file: 2. CREATING A TEMPLATE The content of a custom element is defined with markup inside a <template> tag. Let’s start off with something very simple to show how this works: Notice that we’re including both scripting and markup (and later styling) from the component in a single HTML file. 3. SHADOW DOM There’s something else we need to do, though. We want to encapsulate the details of our template within Shadow DOM. We do this by wrapping our scripting and template within a <dom-module> element. This also means that when we add styling, it is scoped within the Shadow…

1 friendly-animation  http://bit.ly/2sta2kV The <friendly-animation> element allows you to render After Effects animations from JSON as either HTML canvas or SVG elements on the page. 2 instagram-post  http://bit.ly/2Cl75SV Does what it says on the tin. You can use <instagram-post postid=“xxx”> to embed a post from Instagram into your page. 3 gold-password-input  http://bit.ly/2suvQwq Password input is a great use case for re-usable components, and the <gold-password-input> element comes with a strength meter and reveal function. 4 polymer-tilt  http://bit.ly/2CjMApX Interaction effects can subtly improve interaction with your site. The <polymer-tilt> element will add a subtle on-hover 3D tilt effect to whatever’s inside it. 5 scary-cookie-consent  http://bit.ly/2F3L6TA In the EU, you need consent to store cookies. The <scary-cookie-consent> element can display the prompt for you, and handle storage of user consent.…

Many of the tasks that once needed to be apps are becoming more and more possible in the web browser. One such area is games. The HTML5 Canvas element allowed for 2D games based on images and with all modern web browsers able to utilise WebGL, 3D games can played on any device. In this tutorial we are going to take advantage of that and create a variation on the ‘endless runner’ type of game, by creating a 3D endless flying game down a track with obstacles. Because we are not using a games engine, many of the things that game engines offer, like inputs and collisions, will have to be coded from scratch. As such, there are a lot of things to set up, so in this first part…

“THE W3C HAS A COMPREHENSIVE LIST OF REQUIREMENTS THAT CAN BE COMPLETED TO ACHIEVE WEB ACCESSIBILITY, BE THAT AT AA OR THE STRICTER AAA LEVEL” The World Health Organisation (WHO) first published its formal definitions of disabilities in 1980, but updated them at the turn of the 21st century to not simply refer to a disability as a “personal attribute”, but to be “context dependent… reflecting the interaction between features of a person’s body and features of the society in which he or she lives.” The WHO’s point was that disability happens during interactions between a person and society on a physical and cognitive level, and the web is a huge part of that. There are mismatches between how a user interacts with the web, or even their computer, that…

“THE GOV.UK  SITE HAS 19PX AS THE LOWEST FONT SIZE, ENSURING EVERYONE CAN EASILY READ ITS CONTENT” Focus styles There are default browser styles for focused elements, but it’s fairly common for developers to apply blanket rules to these selectors due to the less than preferable blue line it shows when a user clicks them. However, these are really important. For example, try navigating a web page using just the keyboard and you’ll see how important focus styles are to make you aware of where you are on a page. Since they’re seen when a user clicks the element as well as when they’re focused via keyboard, focus styles need to tread the line between being obvious and not negatively impacting a page’s design. Nice alternatives to the…

Contrast levels This is a tricky issue to spot sometimes, but easy to test. W3C states that the contrast level between foreground and background colours should be at least 7:1 for regular text to be AAA compliant, and 4.5:1 for AA compliance. This is especially important for users with low vision or certain types of colour blindness, who may have trouble focusing on text coloured similarly to the background. The trick here is walking the line between creating the design and style that you want aesthetically, whilst not compromising the content or experience for those with visual difficulties. One approach that is quite involved, but can have brilliant results is allowing for customisation within your design. This way you don’t end up alienating your users for the sake of the…

Browsers, everyone is using them. It doesn’t matter if you use Chrome, Firefox, Safari, Opera, Edge or some lesser-known entity, you are still using them. What you use is simply a matter of personal preference. We all know that Chrome is the biggest player in the market. According to statcounter (gs.statcounter.com) Chrome currently engulfs the competition with over 56 per cent of the market share worldwide. Who’s next in the line-up? Safari with 14 per cent. Then there’s UC Browser with eight per cent, Firefox with five per cent and Opera with four per cent. Change from worldwide market share to specific continent market share and the stats change. In Europe, Chrome is way out in front with Safari closing the gap. Head to North America and the gap between…

“Promoting fish food products, this bright, bold and colourful site asks to cook or not cook in order to navigate a rollover catalogue” www.queharashoy.es Designer: BMO — http://bmo.agency Development technologies jQuery, jQuery UI, Ajax API, Cloudinary…

1. Initiate the HTML Document The first step is to define the basic structure of the web page. This consists of a HTML document container that stores a head and body section. While the head section is used to load the external CSS file, the body section is used to store the page content created in step 2. 2. Create the page content With the basic web page structure now in place, the next step of the exercise is to define the content to display. To allow a full preview of the border effect, we are using a series of paragraphs to make sure that the page is able to scroll up and down. 3. Border element properties Create a new file called “styles.css”. The border is to be made…

Even before One Last Beat’s creator Héctor Monerris dreamed up the germ of its idea during his train commutes, he felt a creative calling. In seeing what others were doing with web-based storytelling, the inspiration was already in place even if the theme needed work. “It had been a very long time since I did a less technical and more creative project, so I needed to do something. Then I watched an amazing work by AATOAA, called Way to Go (http://away-to-go.com), which was an online immersive experience far beyond anything else I had seen. Plus its not a commercial project and does not require anything from the user – it just exists. I definitely wanted to create something like that, but with my resources and my modest style. The only…

1. DECLARE THE COMPONENT We’ll create an extension of our <title-card> element. The <cat-title> element will add some additional text underneath the breed of cat. To start off, we need a new cat-title.html with a script defining the class: Notice that we now no longer extend :Polymer.Element, but rather locate the class behind the <title-card> element (we could also reference the class directly rather than using customElements.get). 2. THE TEMPLATE Once again, we also need a template for our element: Notice that we’ve placed an empty ‘parent’ div at the top. We’ll use this later on to place the content of the element we’re inheriting into our new element. 3. COMPONENT STYLING We can add styling as usual to the new component. We’ll also inherit styling from the parent component…

Screen readers have become much more prominent in the last decade, and where previously third-party software was a necessity to enable blind and visually impaired users to operate a computer, there is now an in-built system for every major operating system. Not only is this great for users requiring the software, it’s also made it universally accessible to developers; enabling them to hear a site they may have only ever seen before. They’re made more powerful by the upgrades we’ve covered already on the previous pages, but it’s still important to consider accessibility when new technology is introduced. A great example of this is the surging popularity of scalable vector graphics (SVG) – here are a few approaches to make sure they can be heard. Alt & Role attribute If…

SIM DALTONISM bit.ly/1JHRCiJ If you’re using a Mac or iOS, this great app by Michael Fortin enables you to overlay a window directly over any web page or application you’re viewing and see a live preview of what it looks like which each form of colour blindness. You can resize it to any size and you aren’t restricted like you are with the web page. It also has an iOS version where you can use the device’s camera. A11Y CHECKLIST a11yproject.com The A11Y project work tirelessly on providing clear advice and tips on web accessibility. It contains its own list of resources, an accessible widget and pattern library, and is worth visiting for its blog on new approaches. CONTRAST RATIO leaverou.github.io/contrast-ratio/ Want to test a combination of two colours before…

There is a staggering amount of data available to us nowadays from all kinds of different sources. On average, nearly 8,000 tweets are sent every second, which creates a wealth of information that can be sifted through and analysed as needed. Social networks allow access to all this information through their public APIs. Popular sites such as Twitter and Flickr offer free use of their systems once an application has been registered. With information such as locations, images and trending topics easily available, the possibilities are endless. But while a large set of information can be great, it can also be difficult to obtain any significance from it. We need to be selective with what we pull out and how it gets displayed. It can be useful to focus on…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML, CSS, JS & PHP Tutorial project files All the assets you’ll need to follow our tutorials Plus, all of this is yours too... • All-new tutorial files to help you master this issue’s HTML, CSS and JavaScript techniques • 176 minutes of expert Progressive Web App video from Pluralsight (www.pluralsight.com) • 24 Urban Desaturated effects and 7 Holographic Photoshop Styles (www.sparklestock.com) Log in to www.filesilo.co.uk/webdesigner Register to get instant access to this pack of must-have creative resources, how-to videos and tutorial assets Free for digital readers, too! Read on your tablet, download on your computer The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online…