Tabla de contenidos para July 2019 en net

Art and design have always had an influence on each other. You only need to look at the Bauhaus movement or consider art nouveau to see periods where art and commercial design have marched in lockstep. Things haven’t changed – since the birth of the internet, digital art and design have helped inspire each other, creating a feedback loop that has enriched both mediums. In recognition of this phenomenon, we’re celebrating visual arts in this issue of net, looking at ways creative code can both produce attractive art and help impart valuable new skills. Kicking things off, developer and artist Mike Brondbjerg is on hand to show you how you can create sumptuous JavaScript animations driven by audio data. And for those that prefer to focus on the lighter side…

Use real content + TW: Be realistic in what you present. For example, if the test is about a content catalogue, showing content that is representative of the actual catalogue means users will give a realistic response and not be distracted by content that doesn’t appear credible. Watch and learn + Have a separate room, where the team can capture insights in real time. We encourage clients to be in this room, for them to observe how their audience is using the product. Tweak rapidly + We carried out ‘rapid intuitive user testing’, where we tweaked the prototype after each user testing session. Based on feedback we’d modify the interface for the next user. This way, we could test the overall architecture and pieces of functionality simultaneously.…

Tell us what SickOdds does. SickOdds is a betting comparison platform that focuses solely on esports. If you’re not familiar with esports, they are essentially competitive computer games that are played by professionals for spectators. We work with esports betting providers – ranging from established brands to new startups – in order to pull in all the latest odds for both popular and niche esports titles. Why did you create it? Myself and close friend Nick Pateman have been huge fans of esports for a long time and wanted to create something awesome in the space. The concept of amalgamating and normalising such disparate data sets also appealed to me and combining data from all betting providers was no small feat. When I stepped away from my agency life in…

Along with photography being a good hobby to allow you to get outdoors and see the world differently, I find it is a creative outlet that greatly benefits my work as a web designer. Photography helps me break away from spending many hours staring at a screen (at least until I get back to edit them!) while still allowing me to use my creativity and be productive with my time. I started photography a few years ago using just my phone camera. This opened a whole new world of creativity for me. As my skills grew and I felt limited by what my phone camera could achieve, I decided to go on the hunt for an affordable DSLR. I researched what was out there and settled on a crop-sensor Canon…

Let’s go back to the late 1990s. Geri Halliwell had just left The Spice Girls, Titanic had broken box office records and web pages were littered with low-resolution and repetitive animated GIFs. The sheer joy of making things flash, bounce, wave, float and sprinkle fairy dust proved too enticing for early web designers and developers. Luckily, as the internet matured, these abominations surfed back into the web darkness never to be seen again. Yet fast forward to now and there seems to be a growing trend in the use of animations within emails, turned up to 11. WHY HAS THIS STARTED HAPPENING AGAIN? One reason could be that today’s generation of designers hasn’t endured the annoyance of trying to read from a screen while moving graphics distract you. Another reason…

Festivals are the ultimate summer experience and the Meridian Festival is aimed at festival goers who want to enjoy more than just music in the sun (weather permitting). The target market isn’t too dissimilar to that of the Fyre Festival but it’s all achievable! The colour palette screams summer and equally the photography I’ve used immediately says festival. I’ve stayed away from brush fonts and kept the typography modern and clean so the design can really stand out. The style used in the design would also create some really eye-catching social media/online advertising content. The layout quickly presents the key information you’d want to see when looking into the festival and gives you easy access to any further details you’d require before booking a ticket. The design has been created…

P5.js (p5js.org) is the most recent JavaScript implementation of the famous desktop creative coding environment Processing (processing.org). It takes much of the power and ease of use of Processing and puts it into your browser. It helps you draw in canvas but also integrates with your web page, allowing your ‘sketch’ to respond to and manipulate the DOM. P5 (short for Processing) takes away a lot of the headaches of animation on the web and makes it super simple to get up and running with animation using two simple functions: setup() and draw(). But don’t assume this simplicity is limiting, as you can take processing a long way by creating your own functions and extend it with many of the community created libraries. ▸ Why use data to drive animation?…

Many of us have only really begun to nibble around the edges of what the latest CSS specs can offer. High-profile developers such as Jen Simmons have prophesied that we’re on the brink of a style revolution, with CSS increasingly used to produce innovative sites that really pack a punch. Evidently, for any developer looking to keep up with what’s going on, it’s important to experiment with the language and hack together creative new solutions. But rather than dusting off your textbooks or signing up for an online course, a more creative way of polishing your skills is through the creation of CSS art. By encouraging you to code and hack your way to unusual shapes and effects, producing pictures can help you explore the frontiers of the language and…

Defining AI + Speech recognition is just one of many branches of AI. But what is AI? Artificial Intelligence (AI) is defined as a machine-based intelligence, as opposed to the biological-based intelligence of humans and animals. AI refers to machines performing functions of cognition (of the mind), such as learning, planning and solving problems. As a technologist, it’s critical you learn as much as you can about how to leverage AI technologies and integrate them into your work. AI is an integral part of our world, embedded in nearly every technology we have. AI is in the Google searches we run, the voice commands we give Alexa and the map directions we follow. It’s part of ordering our morning coffee and in the navigation system in our cars. Our AI-powered…

+ Once upon a time, before media queries came about, front-end developers had to write code to detect mobile users and then redirect them to the mobile-optimised version. Media queries made this easier and now we’re seeing a whole new trend that is dark mode finally rallying support. What other accessibility features could we see next, if not left-handed media queries? You’d be quite surprised what’s out there in terms of media queries, even if at the time of writing they’re not supported. • @media (prefers-color-scheme: no-preference/light/dark): targets light and dark mode. Supported by Safari and Firefox. • @media (update: none/slow/fast): this media query targets mediums that don’t support animation (eg PDFs), are low-power (eg ebook readers) or high-power (eg computers). Jagged animations look bad and may be jarring for…

This tutorial is for people who have heard of Jekyll and static site generators and have decided they want to have a go at building their own blog or site using one. A basic knowledge of Terminal is good, although you should be able to follow along as the commands are all fairly simple. Sites on GitHub Pages are powered by Jekyll behind the scenes, so when used along with GitHub Pages, it creates a way to host and manage your website for free. This tutorial assumes you are on a Mac; as Jekyll is a Ruby program, it is possible to run it on Windows but it is not officially supported. If you are following along on Windows, hop over here for help getting Ruby set up: https://jekyllrb.com/docs/installation/windows/ After…

I do a lot of website design, social media and email marketing contract work as a side hustle. At some point, I ended up working full-time for a small publisher in an unrelated position. They found out that I also have this skill set and decided to take advantage. The VP was very arrogant. She’d been in the book publishing business since 1977 and would constantly remind everyone around her that we didn’t know the business as well as she did. Unfortunately, she ran the company like it was 1995. Because of her arrogance and stubbornness and her insistence that we remain outdated because she knows best, a lot of design agencies and consultants refused to work with her. They’d take the contracts, try to work with her and then…

Could you introduce yourself to anyone who doesn’t know you? I’m a front-end developer, educator and speaker based in Toronto. I work as a developer advocacy lead on the developer tools and education team at Shopify and, currently, I also teach front-end development in the York University/Sheridan College Design Program. I specialise in front-end development, theming, user experience design and accessibility. What are the big accessibility challenges facing you in your current role at Shopify? Right now, the biggest challenge is figuring out how to build and scale accessibility knowledge both within our organisation and also with all the developers who build on our platform for merchants. Teaching developers to build themes that are accessible can be a difficult task. We have guidelines for themes that are submitted to our…

Since Jake Knapp popularised the design sprint, it’s been used by design teams all over the world. Many write about their successes, some even shortening it from a week. I wanted to share how breaking a key convention led to a form of creative tension that can sometimes go missing in the sprints that I have been involved in. Rather than co-locating the team in a war room, our design sprint ran across our London and New York studios, requiring us to work differently. We found this created an empowered team that collaborated and competed with one another. Also, the time difference meant that we could work around the clock. THE KEY LESSONS LEARNED Digitise the war room – we worked in a collaborative online document to share and refine…

Having spent my “youth” in Ibiza, I really wanted to get across the fashion and style of Ibiza in this site. The Horizon website’s aim is to reflect a modern day, 20-something culture, where sun, sea, sand, sound and social media are all prominent. Sunny days and party nights are reflected in the colour palette shown on the front page and the bold typeface; they stand out and demand attention, just like its audience. It’s a celebration of summer, whilst being fashionable and free of boundaries. Functional and effective, the date and ticket purchase areas are prominent, ultimately encouraging ticket sales. The platform will be the host for the weekend. It’s easy to navigate so party goers can find everything they need on the site or in the special app.…

thetaproom.com Not everyone in this business originally set out to work on the web. Although she acquired a love for coding early in life, developer Kelly Vaughn qualified in public health and planned to make that her career until she realised that her sideline in web development was more rewarding, both personally and financially. After years of freelancing, in 2017 she set up The Taproom (thetaproom.com) an all-female agency specialising in Shopify. We spoke to her to get the whole story. Hi Kelly! Could you tell us a bit about your background and education? I’m a self-taught developer, getting started in the web design and development world at a young age of 11. I was spending a lot of time on the old website Neopets and wanted to create my…

CLOSE UP (1) itsbritneybot.com is a nostalgic recreation of a classic 1990s operating system, where fans can interact to create playlists and find Britney Spears Easter eggs. (2) Each application in Britney OS ‘99 has been designed to mimic the clunky functionality and aesthetic of old-school operating systems. Everything from their individual branding to their own UI. (3) For the Britney web browser, the designers found the original archived version of Spears’ 1990s website and recreated it using original assets. (4) For the ‘BOMT messenger’ the design team created an entire script inspired by Britney Spears song lyrics, fitting in as many Britney puns as possible. (5) The entire experience has been fully considered across all devices, so all features of Britney OS ‘99 can be accessed from any device. (6)…

In 2018, Kultur Design was lucky enough to be asked by the Information is Beautiful Awards team to start exploring new branding ideas and investigate generative forms and data-driven animation. Over many iterations and explorations, we created a core circular data-driven logo and a series of ‘point cloud’-style illustrations for each of the award categories. The core circular visualisation was based on the counts and categorisation of the entry data of previous years. Within the 3D data structure we created, each Z layer represents an awards year, each radius step out from the centre is an award category and each point is an entry. The winning entry in that category is represented by a ringed point. The connections between points (entries) represent the cross pollination of ideas and relationships within…

Creating CSS images is a fun way to practise your skills and create a neat piece of artwork. It’s a nice break from the usual day-to-day styling of web components. All you’ll need to get started is a blank document and a CSS file; I would recommend using Sass, which will enable you to reuse your styles and write simpler selectors. When creating CSS art, I like to look at a few reference images for inspiration and then create a simplified cartoon variation as I go along. To do this, I envision the subject using primitive shapes, which make better CSS shapes. I will go over how I created this animated balloon Pikachu using only CSS. CONTAINER AND BASE A wrapper container to hold the artwork’s pieces is a good…

Natural language processing, machine learning, deep learning, computer vision, voice recognition – you’ve heard most or all these terms recently. They fall under the umbrella of artificial intelligence. AI has become part of nearly every aspect of our lives, whether that’s mobile coffee orders, search engines or unlocking your phone. The field is growing so rapidly it’s becoming increasingly difficult to nail down a definitive definition. You can connect voice commands, chatbot interfaces or reactive WebGL creative elements. Databases use intelligent algorithms to maximise speed and analysis. APIs can provide a layer of abstraction from a wide range of AI functions, from predictions to collective training. AI trained on millions of data sets and models is at your disposal. Hooking into this machine learning power has become flexible and easy…

It started as an April Fool’s joke: Webdesigner Depot announced Firefox would be introducing a user preference for left-handed browsing and creating a specific media query for developers to target it (https://netm.ag/2UKW8rR). I admittedly fell for it at first – after all, left-handed mobile browsers are something that left-handed users have been requesting for years. But, to confirm, Firefox is not introducing a left-handed UI, nor is it implementing left-handed media queries. It would’ve been nice though, since 10 per cent of us are left-handed. But despite the absence of these media queries, optimising interfaces for left-handedness is easier than you think. In fact, its implementation could be similar to that of dark mode and I’d argue it’s more important as well. IN A NUTSHELL Although dark mode can now…

Towards the end of last year, I was reading through a case study about the latest Uber rebrand. I was drawn in by the beautiful typography and well-crafted brand applications you might come to expect when looking through these types of case studies. However, there was something I wasn’t quite expecting, something that really caught my eye. In amongst all of the usual slick logo animations and aspirational imagery, there was a section about accessibility. It promoted Uber’s 21:1 colour contrast ratio with a statement alongside stating, “we are a brand for everyone”. This got me thinking. Accessibility should be commonplace in a company’s brand and visual identity guidelines. I have worked with many companies who care about inclusive design, people who want to make their products and service more…

+ One of the requirements you might have with an accordion of this kind is that when the accordion opens or closes, the web page is scrolled to the content area or the title. While a lot of people think you’re helping users by doing this, there’s evidence that users get frustrated when their ability to scroll is hijacked. Think carefully about whether it’s worth the risk of alienating some users by implementing this feature. See https://ux.stackexchange.com for more tips on this and other UX questions. You can define a separate toggleElement function to get the ID of the current element and scroll to the content area. Smooth scrolling bugs Internet Explorer 11 There’s an IE11 caveat with the code above. IE calculates scrollTo differently, with an integer value instead…

Does not apply to digital only subscriptions SAVE MONEY AND NEVER MISS AN ISSUE! CHOOSE YOUR PACKAGE!* *DOES NOT APPLY TO DIGITAL ONLY SUBSCRIPTIONS SUBSCRIBE TODAY myfavouritemagazines.co.uk Voucher Code: db65crv (online use only) Terms and conditions: This offer is available to all new subscribers. Applies to print and bundle subscription only for Imagine FX, Computer Arts, 3D Artist, 3D World, net and Web Designer. Voucher code db65crv provides a further 12% discount on my favourite magazines online sale pricing. The Code can only be redeemed online via https://www.myfavouritemagazines.co.uk. Prices and savings quoted are compared to buying full-priced print and bundle issues. You will receive 13 issues in a subscription year. You can write to us or call us to cancel your subscription within 14 days of purchase. Payment is non…

“The advent of the smartphone really has put everybody in the market for inclusive design,” argues Robin Christopherson MBE, head of digital inclusion at AbilityNet. “Accessibility has always been seen as being for disabled customers, which has its limitations because it’s this extra niche thing that can easily be forgotten or you can’t find the budget for. In a mobile-first world, however, we’re all computing on the edge and hence all in need of inclusive design.” When you use your phone one-handed, maybe while walking along, explains Christopherson, you have exactly the same requirements as somebody living with an actual disability, for example somebody whose hands shake due to Parkinson’s disease. “I could give you a dozen other parallels,” he adds. “Small screens on a sunny day and the need…

VUE.JS, HAMMER.JS, GOOGLE FONT API GAUTIER MAILLARD https://gautiermaillard.com Stepping out into the multi-disciplinary world of design might seem daunting, yet this portfolio site thumbs its nose at such trepidation, delivering an enviable example of how genuine talent requires little introduction. Gautier Maillard is a student of the renowned HETIC Internet School in Paris, boasting high-profile junior designer experience most recently at Stink Studios. Currently on the lookout for a new internship opportunity, he demonstrates his aptitude and imagination here with technical help from academic peers. Coded ‘with love’ by front-end developer and HETIC colleague Alexis Benoliel, the UI work leverages a fondness for Vue.js to load project case studies into single pages. The JavaScript framework is ideal for app-like transitions and effects while still remaining true to a simple, classic…

The Fourth Dimension is a festival that celebrates synthwave, a genre of electronic music influenced by 1980s pop music and film soundtracks. Inspired by a decade when pop culture was obsessed with the future, we want to let people experience live music in a truly futuristic way. VR is the perfect medium to do this and the website’s homepage focuses on introducing people to the festival of the future. Attendees can experience the festival in two ways: showing up IRL for a classic festival weekend or, if they’re unable to go, enjoy the live music from anywhere in the world in VR. This innovative type of experience resonates perfectly with the futuristic tendencies of synthwave as a movement. How will we achieve this? The grounds and stages will sport multiple…

P5.js https://p5js.org/ ● P5.js is the library we used throughout this tutorial and is a brilliant addition to the processing.org family. To paraphrase the website, it is a new interpretation, not an emulation or port of the original Processing and it is in active development. P5.js is a JavaScript library that starts with the original goal of Processing – to make coding accessible for artists, designers, educators and beginners – and reinterprets this for today’s web. P5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas; you can think of your whole browser page as your sketch! For this, p5.js has add-on libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam and sound. OpenProcessing https://www.openprocessing.org ● As…

+ Google is just one of several excellent leaders in machine learning and AI. Its speech-to-text is fast and robust but there are other great options you should check out as well. Many solutions offer the same core functions of transcription and real-time stream support but some vary in integration methods and pricing models. Watson Speech to Text https://www.ibm.com/watson/services/speech-to-text/ Watson is one of the most powerful AI systems you can get your hands on. You can leverage this power via the Speech to Text API by IBM. This features HTTP REST, WebSocket and Async HTTP options for integration. Amazon Transcribe https://aws.amazon.com/transcribe/ Similar to Google’s API, Transcribe by Amazon supports phone and video models for audio, steams and pre-recorded audio sources and time-stamped words. It makes transcriptions and assigning captions to…

On a recent project, I was involved in the creation of an accordion component that had a few key requirements: ● It should provide collapsible section functionality for our users, a significant portion of whom are still on Internet Explorer 11 ● It should be as accessible as possible, especially for assistive technology users ● It should show content even if the user hasn’t been able to download JavaScript or has it turned off ● It can be used multiple times on a page In this article, we take a deep dive into creating an accordion module for React that meets these criteria. Let’s get started! BASIC SETUP Here’s the basic layout for the module: This will render a basic section and can accept our content labelled question and answer.…

+ Managing the code of large applications where several people are contributing over the course of longer periods of time tends to be difficult. In fact any sufficiently complicated system tends to break down over time. To combat this tendency in code, people have tried several different approaches. The ones I’m most familiar with are MVC, OO (object-oriented) and Functional. As far as I know, the JavaScript framework Angular first introduced the MVC (model – view – controller) principle to the front end. It tried to keep separate the views (or templates), models (interpretations of data) and controllers (the functional parts between the two others). This proved in many cases to be a burden on the overall code that was sent down to the client. A few later frameworks experimented…

+ With the advent of static site CMSs and hosting, JAMStack is a viable alternative to traditional CMSs. As much as the likes of WordPress are really useful for content managed websites, there will always be cases where it isn’t ideal, such as those tiny one-page sites to support an event or a client who, in reality, will only end up adding a news article occasionally. The constant maintenance of plugins and core updates can be a burden and without it security is an issue too. With CMS tools like Siteleaf and static site friendly hosting such as Netlify, it has never been easier to consider a JAMstack setup for your next project. Netlify https://www.netlify.com/ Netlify offers users hosting and serverless back-end services for static websites. Siteleaf https://www.siteleaf.com/ Built for…