Tabla de contenidos para March 2019 en net

What are the different ways to use chatbots? Ian Lewis, Canberra, Australia SL: There are many ways but here are three that spring to mind. Modify the site + I’ve seen some cool uses of bots on websites where using the bot modifies the website itself. This seems like a ‘cool’ example, although I’m not sure if it’s the simplest form of information retrieval. Replace the site + There are a few web-based solutions that replace a site with a bot. Personally, though, I don’t think that’s the correct approach. Conversational UI isn’t the best form of UI in most contexts. Hybrid approach + If I have a question for a company, I just want to ask that specific question and that’s where having a bot on a website is…

BEYOND PIXELS I have been a fan of LEGO since I was four or five and at 31 I’ve still not grown out of it! I’m lucky enough to have my own ‘LEGO room’ at home, which contains most of my collection of LEGO sets and custom models I’ve built over the years. Many of the models are built in to a city landscape, with city centre, suburbs and rural settings allowing a variety of building styles and inspiration. The collection and the LEGO city is an eternal work in progress – there’s always something I could build or rebuild – so I don’t often get bored with it. LEGO building provides a feeling of zen for me – I find it relaxing to build. LEGO’s tactile nature is a…

Agile is no longer the preserve of startups and software development companies; it’s mainstream and a subject familiar to the CEOs of multinational companies. But the promise of improved speed to market and lower costs isn’t always realised, as it’s supplanted either by the speedy launch of substandard products or a costly cycle of constant rework. Agile must be the bad guy! I would argue that misinterpretation of the word agile and misapplication of agile principles in the delivery of design projects is driving unjust negative PR; a few small tweaks can lead to significantly improved outcomes for you, your business and your clients. BREAKING DOWN AGILE Use of the word ‘agile’ increased dramatically from 1994, consistent with the gaining popularity of agile software development methods and the 2001 publishing…

Digital product designer What’s on your desktop? A bit of greenery with a plant and a succulent, a stack of design books – Sprint by Jake Knapp is my favourite. What is on the walls? Illustrated postcards, sketches from our latest design session and our massive whiteboard with the name of this week’s ‘Earl of Sandwich’ (the person who is deciding the sandwich filling on Friday). What will you do for lunch? If the weather’s good we will head down to Whitecross Food Market and come back to the studio to eat together. What hours do you work? We have flexible time around core hours of 11am to 5pm – I normally work from 10am until 6.30pm. We never do any unpaid overtime so we always have our evenings and…

One type of tool not included in the main body of this feature is a CSS Grid generator. This is usually a one-page site that lets you build a grid layout visually and spits out W3C Grid Layout Module code. Many such tools have appeared and they really are useful, especially if you’re not an expert with the syntax. Here are a few options: LAYOUTIT! CSS GRID GENERATOR https://www.layoutit.com/grid Interactively select your grid areas, use buttons to add columns and rows, name your grid areas and save as a shareable permalink. CSSGR.ID https://cssgr.id/ This tool by Dan Netherton includes similar features as the previous tool and also enables you to add Lorem Ipsum text. CSS GRID TEMPLATE BUILDER https://codepen.io/anthonydugois/full/RpYBmy/ This CodePen demo by Anthony Dugois is quite a unique option…

ABOUT THE AUTHOR RICHARD MATTKA w: richardmattka.com t: @synergyseeker job: Interactive director, designer, developer areas of expertise: Shaders, VFX, WebGL Machine learning. Deep learning. Natural language processing. Computer vision. Automation. Voice recognition. You’ve probably heard all these and many other terms recently, all under the umbrella of artificial intelligence. In fact, the field is growing so rapidly, it’s becoming increasingly difficult to nail down a definitive definition. AI is becoming part of nearly every aspect of our lives, from ecommerce and search engines to unlocking your phone. Your websites and apps can leverage APIs to tap directly into the power of AI. Without having to ‘train’ AI agents, you can take advantage of massive quantities of data already analysed. Google, Amazon, IBM and many others have created endpoints for developers to…

ABOUT THE AUTHOR BEN READ w: deliciousreverie.co.uk t: @muzzlehatch_ job: Designer and developer areas of expertise: JavaScript, React and UX We’ve all experienced it. Whether it’s by forgetting to close a function, misspelling a variable or just plain old doing something wrong – if we’ve spent any time developing, specifically with JavaScript, we’ve seen the white screen of death. Nothing renders to the screen and the only way of investigating the issue we caused is by opening the console and looking at the stack trace. But what if that error occurs in production? Or worse still, on someone else’s machine? If this is happening, you might be losing a large segment of potential customers, not to mention the fact that you have absolutely no insight into the nature of the error, so…

ABOUT THE AUTHOR DANIEL SCHWARZ job: Editor-in-chief at UX Tricks areas of expertise: Product design, UX, design tools w: https://uxtricks.design t: @mrdanielschwarz Websites and apps are mostly made up of content, so why is user experience design so heavily focused on getting the interfaces right? Think about it: when we scroll Facebook, read an article, check out the landing screen of a new app or service we’re thinking of trying out, we absorb important snippets of information way more often than we interact using gestures. In fact, when the user experience is crafted effectively, we remain hopeful that users aren’t forced to interact any more than they need to. After all, users come for the information; they persevere with the interactions as a means to an end. INFORMATION VS CONTENT Information…

LOUIS LAZARIS Lazaris is an author, speaker and front-end developer and curates the weekly newsletter Web Tools Weekly. He offers up his rundown of the best dev tools for 2019 on page 60. w: impressivewebs.com t: @impressivewebs ANA NICOLAU Nicolau is a creative director in design. Over on page 68, she shows you how you can use design systems to create a consistent approach across large-scale projects. w: ananicolau.com t: @and_says_ RICHARD MATTKA Mattka is an award-winning creative director, designer and developer specialising in VFX. He shows you how to harness Google’s powerful image recognition API on page 76. w: richardmattka.com t: @synergyseeker CLEMENTINE BROWN Brown is product designer at Red Badger, a company dedicated to helping others improve their business. On page 36, she makes a case for developers learning to adapt…

GOOGLE IS SHUTTING DOWN ALLO + Google is killing off its Allo cross-platform messaging service. The app, which first arrived in September 2016 and has features like one-tap smart replies, Google Assistant support and the ability to share search results in conversations, will be shut down next March. https://netm.ag/2UXHA4I BIRCHBOX’S NEW WEB DESIGN ‘DRIVING COMMERCIAL BENEFITS’ + The newly designed Birchbox website has led to a 21 per cent increase in shop revenue per session and a 20 per cent hike in shop revenues per customer, according to the beauty subscription box company. The site overhaul is part of the US-based business’s wider plans to expand in the UK. https://bit.ly/2RA8wJ3 PANTONE ANNOUNCES COLOUR OF THE YEAR + Pantone’s annual quest to dominate the ‘and finally…’ portion of the pre-festive news…

Being mobile friendly has long been a key factor in how Google ranks searches, so we asked @netmag’s followers what techniques they used to maximise mobile responsiveness. LAYOUT STRUCTURE Being clever with design structure is one way @petebarr makes his work more mobile friendly. “Focus on using breakpoints for the content rather than device sizes to maintain layout structures,” he says. “Utilise Flexbox and Grid where you can: these can also help in reducing the number of breakpoints required as they are inherently responsive.” MOBILE THINKING @chrisjcoan recommends basing your design around mobile working from the get-go. He says: “I write all my CSS with a mobile-first approach. This ensures consistency across the vast array of devices available to consumers.” @tomhermans agrees: “Start mobile first. Design in the browser. Use…

LEON BROWN Web developer www.nextpoint.co.uk CODE ANYWHERE Embrace the advantages of using the cloud as an IDE, and write and execute your code in a test environment from anywhere. This is great tool for pair programming and development even from remote locations. https://codeanywhere.com TUMULT HYPE Manually creating advanced HTML5 animation is timeconsuming and difficult. Tumult Hype solves this by providing a visual interface to quickly and easily define your animations. It also enables you to incorporate your own JavaScript code to its animations. https://tumult.com/hype/ METHOD DRAW An easy-to-use SVG image editor for creating resizable images for responsive design. Images are editable and can be combined with CSS and JavaScript to become interactive. Use this tool to become more productive with digital creative projects. https://editor.method.ac…

Many companies have systems for handling their customer data that are built so employees can only access the data they’re supposed to. For example, an insurance company call-centre system might only allow the staff to see some parts of a customer’s account information and not others, depending on whether they work in claims or sales. Such systems often store a log of which staff have accessed a customer’s data and when, so if a member of staff does something they shouldn’t, the snooping is at least recorded. But no matter how restrictive or robust these systems are, they always have a flaw: someone has to build them. This is not unique to software. If companies kept their customer data on paper locked in a vault, someone would still have to…

MARK BILLEN Billen is a freelance writer who has been writing about web design and technology for over 15 years. w: markbillen.com t: @Mark_Billen JQUERY, ES6 JAVASCRIPT, FLEX SEA HARVEST https://www.seaharvest.net.au For those not au fait with fishy global business, Sea Harvest is a fresh seafood merchant located in Canberra, Australia. Hailing from Belconnen and Fyshwick’s fresh food markets, this new site promises a wide variety of products folded in newspaper. Designed by local agency ED, the team boasts previous with a similarly distinctive effort for another Canberra client keen to sell fresh fish. “Originally inspired by the wrapping of fish in newspaper, we created a newspaper pattern that was used in multiple touch-points of the brand identity,” ED explains. “This opened the floodgates to all kinds of interesting ideas that…

A tool listed in this feature, Unstated (https://unstated.io/), is one of many state management libraries for React. Even if you’ve yet to delve into a library like React, the concept of state might still be familiar. But it’s not React-specific – it’s generally a feature associated with single page apps (SPA). In fact, if you’ve written JavaScript without a library, you’ve probably done some level of state management whether you realised it or not. If the concept is new to you, consider a web form as an example. The form can be in various ‘states’, including: • Empty (ie not filled in) • Partially filled in • Completely filled in but erroneously so • Completely filled in and valid • Submitted Other items that might be concerned with state include…

Daniel Harvey Head of product design and brand at The Dots (https://the-dots.com) t: @dancharvey What are the biggest challenges when building a design system? Team members will have different opinions on what is a component, what should be a component and even what the word means. Design systems can’t just be a tool for designers. They only have value when they’re helping the whole product team be more efficient. What piece of advice would you give for developing a design system? Get the whole team involved and test everything with your community. Misconceptions and misunderstandings will erode trust in your design system. What has been the biggest lesson learnt in developing The Dots? We’re a two-sided marketplace. On one hand, we have a community of hundreds of thousands of brilliant…

ABOUT THE AUTHOR SIMONE CUOMO w: Zelig880.com t: @Zelig880 job: Technical lead at Vizolution areas of expertise: JavaScript, HTML, CSS View source files here! All the files you need for this tutorial can be found at https://codesandbox.io/s/wo912p4w2l The JavaScript ecosystem has been changing for over a decade, meaning front-end developers have had to track new technologies. After testing JavaScript frameworks and libraries for over five years, I have found the one that works for me: Vue.js. In this tutorial, I will explain the basic structure of a Vue app. In addition, I am going to define components in detail and touch on more advanced features like mixins to create a simple blog app. THE ADVANTAGES OF VUE.JS The main selling point of Vue.js is how easy it is to learn, as…

Part of Vue’s growth in popularity has to be credited to the release of the new VUE CLI. This has been rewritten from the ground up, in order to fulfil the needs of the community and introduce great new features. The main highlights are: • The ability to add and remove plugins throughout the life cycle of the app. • A simple-to-write plugin system that supports the creation of reusable features. • An extensive list of available features: linting, unit test, end to end testing. • An amazing new UI from which you can manage and monitor all your applications. To get started with a CLI, you just need a latest version of node, a command line and a package manager (npm or Yarn). To install the CLI globally, you’re…

ADRIAN WONG Senior designer, This Place thisplace.com The internet is a playground for our imagination. By seamlessly combining different technologies, a demo by Little Workshop (a digital workshop based in Paris) asks users to experience music in a new light (https://netm.ag/2QO5W1y). Interactive, synchronised and randomly generated, Track immerses the user in a unique, endless environment. It’s exciting to explore such a beautiful mix of art and code where technical complexity gives rise to something so simple and playful. Check it out for yourself. MATT WIGGINS Partner and director of interactive, Legwork Studio www.legworkstudio.com I like thenewmobileworkforce.com, which Citrix and Red Bull use to explain how the software company is helping Aston Martin Red Bull Racing at the track. Having been a Flash developer, I often wondered when we would see…

This month… ONLINE TV CHANNEL PROFILES CHRISTINE BERRY Berry is lead UX designer at COOK in Tunbridge Wells, UK w: christineberry.co.uk t: @_christinemoore TOMAZ VOLK Volk is visual and interactive designer at Akeo in Los Angeles, United States w: akeo.com This month we would like you to design a new online TV channel that is trying to break into the market. The focus will be on exclusive content and shows, with mobile as the primary method of watching. It’s vital to make the user experience as easy as possible. Could voice search play a role?…

WEB TOOLS WEEKLY https://webtoolsweekly.com/ This author’s weekly newsletter features a quick coding tip followed by a list of tools covering many of the same categories from this feature and lots more. One of the most popular categories is ‘Productivity Tools’, which you might find useful. CHANGELOG NIGHTLY http://changelog.com/nightly This is a daily email that lists the most starred GitHub repos. If you’d prefer, you can also subscribe to an editorialised weekly update instead (http://changelog.com/weekly). ECHO JS https://www.echojs.com/ A JavaScript news feed with voting and commenting in the style of Reddit and Hacker News. Being a JavaScript-only source, you’ll get to enjoy lots of news, new JS utilities, libraries and more. SHOW HN https://news.ycombinator.com/show The most popular place for programmers and developers to submit and get feedback on their projects and…

FRAMER X https://framer.com/ Framer X is the prototyping tool designers have been dreaming of. Framer X is to React what Dreamweaver was to HTML and CSS – the perfect marriage between design and code, for curious designers and creative developers. DESIGN+CODE https://designcode.io/ Design+Code is the place to learn if you’re a designer looking to prototype in code. Meng To’s courses will take you end-toend and you’ll have something to show for it. It’s the knowledge base you’ll want to bookmark – from one designer to another.…

Key hosting directory CONTACT US To advertise here, contact our sales team: +44 01225 687 311 george.lucas@futurenet.com FEATURED HOST “We have several servers from Netcetera and the network connectivity is top-notch – great uptime and speed is never an issue. We would highly recommend Netcetera” Suzy Bean EXPERT TIP CLOUD TECH TIP… If you’re going to fully utilise cloud technology, before deciding on a service provider ask whether monitoring comes as standard and whether management is included in the price. A fully managed cloud can make your business fly; an underutilised cloud will be a waste of money. Netcetera provides hosting from one of the most energyefficient datacentres in Europe, all powered by green energy. It offers everything from reliable low-cost hosting for a single site right through to complex…