Innholdsfortegnelse for No. 280 i Web Designer

HTML is all around us HTML has been a building block of the web ever since the day it began. Without HTML where would we be? HTML is a much different animal to the one that was knocking around in the Nineties. It has grown with the web and now offers so much more. But using it the right way is what’s important. In our latest lead feature, Matt Crouch looks at the essential elements and APIs that HTML has to offer, why you should be using them and how they should be used in everyday design. Keeping HTML company are its two favourite friends, CSS and JavaScript. Discover a collection that will complement HTML and your builds. Elsewhere we go beyond the traditional confines of the web and look…

01. VIITA TITAN titan.viita-watches.com/en Surprisingly simple but smart text effects engage the user. 02. KIKK Festival kikk.be/2018/en/home A spotlight effect reveals what lies beneath the surface. 03. IN FOCUS in-focus.co.jp Click and hold to see new variations of onscreen video. 04. The Blimp blimp.gr Neat interactive 3D effects bring album art to life. Graphics ChocoToy cute behance.net/chocotoy A collection of cute and (cuddly?) characters from the very talented ChocoToyStudio. Colour picker KRTPOMix bit.ly/2MOuuBo Typesetter Config bit.ly/2xnJ5Pi A condensed, geometric sans serif family consisting of 40 fonts in ten weights. WordPress Tetsuo tetsuo.edge-themes.com A portfolio theme with attitude and glitch effects for a modern subversive feel.…

1. Initiate the HTML document The first step is to initiate the structure of the HTML document. This consists of the document container that stores the head and body sections. While the head section is used to load the external CSS and JavaScript resources, the body will contain the visible page content created in the next step. 2. HTML content The foreground page content is placed inside the 'main' container to deliver the advantage of easy control of content flow. The text element has the 'overlay' class applied so that it can be referenced by the JavaScript and CSS for applying the text animation. Multiple elements can have the animation applied by using the 'overlay' class. 3. HTML video element The final part of the HTML is to define the…

“Our process typically starts off with a basic sitemap for any web development project,” begins Experience Designer Kelly Gedvilas when quizzed on the extent of client communications. “We gather all the necessities from the client; whether it’s things they wish to see on their site, product shots or additional imagery. This ultimately helps us accommodate design for everything needed initially, as well as for the future of the brand. For example, while planning the design for the product page that showcases all the flavours of pops, we needed to create something that would make adding more flavours or categories easy, while also ensuring the user was able to interact with ease and engagement.” With this initial sitemap established, Helium will design two main pages from the site as a working…

2000 Tuomas Syrjänen, Hanno Nevanlinna, Mikko Viikari and Markku Taulamo start their business developing image products and small applications. Employees: 5 2003 Futurice builds hit B2C imaging service Kuvaboxi and creates bespoke agile software development for clients. Employees: 15 2008 Futurice focuses on consulting in tech and design. Also works with bigger clients including Nokia. A new office in Tampere opens. Employees: 50 2010 Futurice expands internationally, beginning with Berlin. And Futurice celebrates its tenth birthday. Employees: 115 2012 First of two consecutive #1s in Great Place to Work Europe’s list for SMEs. London office opens. Employees: 180 2013 CEO Tuomas Syrjänen chosen as leader of the year by Finnish business magazine Fakta for the unique culture Futurice has created across its business. Employees: 225 2014 Futurice starts employee-initiated Spice…

< MAIN>  https://mzl.la/1KLTqoe This marks up the core content of the document. In contrast to any header, footer or navigation elements, its content will vary from page to page. There can only be one <main> element visible at any time. < NAV>  https://mzl.la/2cflHsH This represents any area of a document that is responsible for navigation. This can be a site’s main navigation or a grouping of internal links such as a table of contents. Not all links need to be inside a <nav>. < HEADER>  https://mzl.la/2FIMeyS Use a <header> to separate any kind of introductory content from the rest of the document. It is commonly used to define page headers, but alternatively it can also be used to add headers to sub-sections. < FOOTER>  https://mzl.la/2PIYUXC In contrast to <header>, the…

INTERSECTION OBSERVER  https://bit.ly/2N03ejx Fire a callback whenever an element enters and exits a certain area. Best for lazy loading or infinite scroll effects. REPORTING OBSERVER  https://bit.ly/2OT017n Get notified when the browser has to intervene, for example having to provide a fallback for a slow-loading font. OFFSCREENCANVAS  https://developers.google.com/web/updates/2018/08/offscreen-canvas Drawing to a <canvas> is an expensive task for a browser. This new API can render without hitting the DOM. INTERNATIONALISATION API  https://mzl.la/1dsIHLk Avoid sending heavy libraries and show dates, numbers and strings in a format that makes sense in the user’s location. CSS PAINT API  https://bit.ly/2IcGL1P Use JavaScript to generate dynamic backgrounds, borders and image masks and apply them in CSS without a heavy performance hit.…

1. Blinking letters To make the blinking letter effect found on betamatters, add some images to the page that will act as the text to make blink on and off. The structure shown below is a minimal way to achieve this effect: 2. Style the content Now the content of the page will be styled with the background getting the right colour and the letter being given the right size. The opacity is turned off so that with JavaScript the ‘anim’ class can be added. 3. Blinking with keyframes Using keyframes, the ‘anim’ class in the previous step uses these to change the opacity and make the letters blink on and off as they appear onscreen. 4. Making it work To make this effect work, first of all, the letters…

DOWNLOAD TUTORIAL FILES www.filesilo.co.uk/webdesigner Some of the most advanced effects on the web are found on sites which win various web awards for their respective ‘site of the day’. These are always great inspiration pieces to look at and get ideas from, and a recent trend has been to use something known as a shader in WebGL to create very advanced graphical effects. These can be quite difficult to use and require advanced programming skills to master. Curtain.js allows you to easily create transitions from one object to another using WebGL and shaders. In this tutorial, Curtain.js will be used to transition from one piece of video to another using a prebuilt shader that will use a displacement image to power the transition. What that means is instead of just…

ESP32 planars come dime a dozen. We will use the DEVKIT C, which is conveniently available from https://www.elektor.com/esp32-devkitc. First, make sure that all relevant drivers are installed and that the serial port becomes visible. As we work on Linux, we expect it to mount at /dev/ttyUSB0. Open a recent Arduino IDE (>=1.8), and use the board manager to install an ESP32 core according to the steps outlined at https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md. Next, open the Board choice tool and select “ESP32 Dev Module”. Finally, use the Tools menu to select the correct serial port. When setup is complete, deploy a sketch of choice – if the programming process succeeds, all is well.…

German computing experts love to quote Klaus Gims’ excellent work on microbenchmarks frequently — and one of his core messages was that getting reliable results is all but easy. The Fastify team has endeared itself to developers by providing a series of benchmarks whose code can be inspected at github.com/fastify/benchmarks and shows excellent performance in both latency, throughput and request handling capability. Classic frameworks such as Express.js get pummelled, with lesser-known competitors faring better. One thing that makes the data believable is that the Fastify team’s own product is not at the very top — frameworks such as Spirit and Connect manage to be slightly faster by ditching the router infrastructure.…

“No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks .” Featured: Northcoders northcoders.com Twitter : @northcoders Facebook: Northcoders About us Northcoders is the coding bootcamp for the north, based in the heart of Manchester and built upon northern values of grit, determination and community spirit. No matter what your background, you can fast-track your career and become a web or software developer in 12 weeks at their full-time bootcamp, or fit their course around your life with their 24-week part-time bootcamp. Their internal career support team will help find you work as a developer, setting up interviews with your choices of Northcoders Hiring Partners across the north of England. “Becoming part of this vibrant, caring community was something I…

“For online shopping, sight is the strongest sense as messages and visuals are communicated through screens” In recent years, the way people consume online content has become increasingly visual. Today, the visual experience on a website or app has a direct effect on the conversion rate. New Age consumers expect intelligent graphic design and they reward brands that offer high-quality visual experiences. Before getting into the ‘how’ of creating a great visual experience, it is important to understand the ‘why’. People shop with their senses. They touch, feel, taste, smell and see the things around them, and then make purchase and brand trust/loyalty decisions based on the received information. For online shopping, sight is the strongest sense as messages and visuals are communicated through screens and evoke immediate emotional effects.…

1. Initiate the document The first step is to initiate the web page as an HTML document. This consists of defining the HTML container, which stores the <head> and <body> sections. While the <head> section references the external CSS and JavaScript resources, it is the <body> section which stores the page content — created in Step 2. 2. Page content The page content consists of a <main> container that is used to store the primary page content, followed by two elements that will be used as navigation controls. Each article has a unique ID that can be used by CSS and JavaScript to present the individual content sections when they are required. 3. JavaScript: Navigation function Create a new file called ‘code.js’. The first part of this JavaScript code defines…

“I think the biggest challenge during the process of development with this project was translating what was in my head for all the different layers in the design,” laughs a reflective Kelly Gedvilas. “Then describing how I wanted them to interact with each other, which if you ask any designer to translate what’s in their head into developer lingo and you’ll often get something totally different.” It’s a valid point honestly made, with that bridging of the design and development divide proving problematic for most digital projects. Thankfully for the production of drippop.com, the team wasn’t building a sprawling, complex, critical web app that would demand excessive coding. The development phase was much more about robustly bringing life to the frontend design elements, while ensuring consistency of performance across devices.…

“We recently went live with a new articulation of the company and our values, and we’re pretty proud of it, although it was quite a journey getting there. In a company like ours where everyone’s view matters, and is taken seriously, it’s a tricky thing to summarise ourselves in a single website. But it’s super-important to us to present the best of who we are and what we do, as well as our culture”John Oswald Global Principal of the Advisory Team In an industry-first attempt to enhance the customer experience using biometrics, Futurice worked with Finnair and Finavia — Helsinki Airport’s operating body — to build and test a facial recognition system for ‘hands free’ check-in. The team used feature-based facial recognition technology, which turns facial images into untraceable biometric…

CLIP-PATH  https://mzl.la/2Gxrzil Define part of an element that should be displayed. Use it to create shapes without having to fake it with images. CSS SHAPES  https://mzl.la/2Q1yFfh Create more exciting, print-inspired layouts. Mark out a shape around an element for the content to flow around. CUSTOM PROPERTIES  https://www.w3.org/TR/css-variables Pass a single value to multiple selectors. They can read and update through JavaScript and can be useful for site-wide themes. CSS FILTERS  https://bit.ly/2OOvSWx Alter the appearance of elements without having to alter the file itself. For example, blur an image to make a background. SCROLL SNAPPING  https://developers.google.com/web/updates/2018/07/css-scroll-snap Create scrollable elements that have defined regions that should snap into view. Those larger than the viewport are handled automatically.…

<MENU>  https://mzl.la/2xln6st Use <menu> to define a set of controls within an interface, with each child being an <li> element. It behaves similar to <ul>, with the distinct difference between them being that <menu> contents are expected to be interactive rather than a simple list of items. This component was previously defined in HTML5 as a way to provide context menu items alongside <menuitem>. However as of HTML5.2 this behaviour has been removed and the element repurposed. While it is now not provided by the browser directly, it is still encouraged to use <menu> for context and drop-down menus created as part of an application. <PRE>  https://mzl.la/2g7x8Vo HTML is a fault-tolerant language, which means it can detect mistakes and formatting quirks within a page easily and infer intended meaning. This…

WebGL enables developers to create rich, console-quality experiences, that render in real time on mobile devices and desktop browsers. Nearly universal browser and device support makes it a perfect approach for web developers wanting to create incredible experiences. No plugins are required and you can start learning these technologies right away. One of the questions that comes up the most often about 3D development is about importing models. It’s often confusing trying to choose the right format and loading it correctly. You can accomplish a lot with primitives, but very often you want to integrate models created in 3D modeling software. You’ll be using the popular 3D library Three.js in this series. It’s free, open source and lightweight, and countless award-winning websites have used it. Building on previous tutorials, you’ll…

Here’s five things that WoT can do for you 1 Enable hardware access from the web Handling protocols like MQTT from JavaScript directly is difficult. The Web Things API provides standardised interfaces for hardware interaction. 2 Provide an abstraction layer Sending specified messages to each device becomes tedious. Thanks to the predefined properties, behavior can be standardised across device classes. 3 Describe hardware in a standardised way Once a JSON file is specified, your hardware is fully described. Other programmers can create use this standardised description. 4 Create smart home systems Smart homes are a hodge-podge mix of hardware components from different vendors. The Web of Things API makes things play along nicely. 5 Enhance machine usability Adding rich user interfaces makes goods appear more valuable. Using standardised APIs greatly…

Working with hardware isn’t everybody’s thing. If you feel like using a virtual thing instead of the real deal, Mozilla also has you covered. Developers working with Android can find a Java library at https://github.com/mozilla-iot/webthingjava – it transforms any JVM-based device into a Web Thing. Friends of Node.JS find a complete implementation at https://github.com/mozillaiot/webthing-node. It provides a fully event-driven implementation of the Web Things API and comes complete with samples. Should none of these strike your fancy, visit https://github.com/mozilla-iot/webthingpython. It provides a Python 3.5 library which does essentially the same thing – keep in mind that most programming languages can somehow embed Python code. Finally, the code can also be rewritten – TCP/IP support and a JSON parser are almost universally available.…

Browsing the web brings home how users are still very much operating in a 2D space. There are some beautifully designed sites out there with clever little design tricks that raise them above the rest, but it’s still all very flat. There is no doubt that 2D has its place on the web and it’s here to stay for a good while yet. But, how do we push the web forward? How do designers make that same rectangular viewing space more exciting? Animation and sound have added a different dimension, CSS is looking to break out of the box, but it’s still very much part of the 2D experience. 3D is the next obvious evolution and it has been happening for a while, yet it’s still in its infancy. As…

“I think the standout feature for this project is the scrolling interactions. I think it makes all the pages and content flow cohesively. The shifts between parts on a single page are fun to go back and forth on, although I think that was the most challenging portion of the development phase. Getting those exact took quite a bit of time but totally worth it in the end!”…

“SEMANTIC MARKUP IS VITAL FOR ACCESSIBILITY, SEARCH ENGINES AND MUCH MORE – BUT IT IS SO OFTEN MISUSED. BUILD A STRONG FOUNDATION AND TREAT CSS AND JAVASCRIPT LIKE AN ENHANCEMENT.”Matt Crouch Software Engineer at Vidsy @mattcrouchuk, www.mattcrouch.net < DIALOG> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog Display a popup or modal window without the overheads A common design pattern on the web is to have an extra window display to provide more information or options for a complicated interaction. Adding a confirmation as an extra step is also a good way to make a user aware their action will have consequences. These windows have been around for years through the help of libraries such as Bootstrap or jQuery UI. While they can be easy to implement, they often require heavy scripting and extra styling to match…

<TIME>  https://mzl.la/2v46JSw Dates and times are formatted differently across the world and so cannot be reliably parsed by a search engine or email client. Specify what parts of a sentence are a time and allow programs to extract and use that information. <MARK>  https://mzl.la/2MI8Ej8 When wanting to highlight a few words of a sentence, it may seem best to use <strong>. While <strong> denotes importance, <mark> denotes relevance in the current situation. An example of this would be matched terms in a search result. <ABBR>  https://mzl.la/2NR3aqF Language is full of abbreviations that readers potentially may not be familiar with – there’s plenty in this article! The <abbr> element provides a way to define potentially unfamiliar abbreviations with an accompanying ‘title’ attribute. <Q>  https://mzl.la/2xqiOze When quoting a small section of text,…

Blinking text The most noticeable element on the home page is the flashing, blinking, text letters that flash in and out and each one turns on like a fluorescent tube light. Ticker side bar The green bar on the left is reminiscent of TV news tickers with the content continuously scrolling up. Contextual content Letting your visitors know exactly what site they have landed on and its purpose is always a good way to orientate the uninitiated. Opening animation All the green elements on the screen animate onto the screen one at a time to build up the highly visual illustrated scene. Navigation menu Clicking the navigation menu gives one of the best animated transitions that the Web Designer team have ever seen, you must see this for yourself! Inspired…

By researching your market's keyword demand you can not only learn which terms and phrases to target, but also learn more about your audience. Your primary objective shouldn’t be ranking for just one single keyword but increasing the total domain authority through content quality and relevancy to your target audience. Keywords have long played a central role in SEO and driving traffic to websites. Originally the mechanics were straightforward, although today the use of keywords is much more complicated. Google’s algorithms have become much more complex (Rank Brain AI, in particular), and they now evaluate the intention behind your query and then search for a 'best fit' candidate in its network of indexed sites. Clarifying the intentions and purpose of your business to Google is therefore paramount in achieving good…

Standard heading This part of the heading doesn’t change after the initial introduction, and hence is the easiest part of the headline to create. Changing element The changing part of the headline requires more advanced functionality to control the individual words separately from each other. Headline focus The headline is designed in a way that makes it the only visible content on the page to get the full attention of the reader. Timing control JavaScript is responsible for activating animated changes at the right time, enabling new items to be added easily. Animated changes All of the animation is defined in the CSS, making it easy to change the visual effect without needing to update the JavaScript. Technique 1. Document initiation The first step is to initiate the web page…

Don’t limit your Raspberry Pi to WiFI! While Wi-Fi is commonly used when networking computers, the IoT space is relatively hostile to it - Wi-Fi transmitters can easily use more than 100mA of current when transmitting information. Mozilla’s IoT Gateway can include support for various wireless protocols which are better suited to the Internet of Things – think about systems like Z-Wave or the well-known Zigbee protocol stack. Firing them up is as easy as connecting an adapter, which usually plugs into one of the four USB ports at the back of your Raspberry Pi. More information about compatible modules can be found by visiting the supported hardware list, which the Mozilla team kindly provides at https://github.com/mozilla-iot/wiki/wiki/Supported-Hardware.…

Mozilla’s predefined libraries aren’t limited to Espressif’s processors. As of this writing, the Arduino sketch can also be run on any Arduino connected to a MKR-series WiFi shield. If this does not suffice, developers can fall back to the serial adapter library hosted at https://github.com/mozilla-iot/serial-adapter. It transforms a USB port into a primitive serial port. Ultra-low-end MCUs can parse the information emitted, and can thus connect themselves to the gateway without the burden of implementing the whole TCP/IP protocol from scratch. Sadly, its memory consumption still isn’t low – some incoming messages are more than 130 bytes long.…

“Premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK” Featured host: Netcetera netcetera.co.uk 03330 439780 About us Formed in 1996, Netcetera is one of Europe’s leading web hosting service providers, with customers in over 75 countries worldwide. As the premier provider of data centre colocation, cloud hosting, dedicated servers and managed web hosting services in the UK, Netcetera offers an array of services designed to more effectively manage IT infrastructures. A state-of-the-art data centre environment enables Netcetera to offer your business enterprise-level colocation and hosted solutions. Providing an unmatched value for your budget is the driving force behind our customer and managed infrastructure services. From single server to fully customised data centre suites, we focus on the IT solutions you need.…

Essential assets and resources Get textures, fonts, backgrounds and more Exclusive video tutorials Learn to code/create with HTML CSS & JS 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 • 75 minutes of expert PHP video courses from Killersites (shop.killervideostore.com) • 20 Vibrancy Photoshop actions and 100 essential brush strokes from Sparklestock (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 The home of great downloads – exclusive to your favourite magazines from Future! Secure and safe online access, from anywhere Free access for every reader, print and digital Download only…