Tecnologia i Jocs
The Web Design Book

The Web Design Book

The Web Design Book Vol 6

In this book we’ve compiled all the latest news and developments in HTML, CSS, Javascript, jQuery, and many more to ensure you are at the top of your game to produce the best websites and apps. Follow our step-by-step tutorials written by experts in the field to put your skills to the test, and use our wide variety of free assets, software and video tuition provided on FileSilo.co.uk to complete them to perfection. Featuring: HTML & CSS - Explore the new possibilities within HTML and CSS. jQuery & JavaScript - Discover what jQuery and JavaScript are capable of through real-life examples. Development - Learn the tricks used by experts in the field. Applications - Take a step into the mobile revolution while perfecting your desktop apps.

United Kingdom
Future Publishing Ltd
Llegir Més
10,42 €(IVA inc.)

en aquest número

3 min.
analyse your css

THE TOP TOOLS, ESSENTIAL TECHNIQUES AND THE BEST ADVICE FOR STYLING PERFECTION CSSLinting is just like any other type of linting, in that it is “a tool that flags suspicious usage in software written in any computer language” (from the Wikipedia page on programmatic linting). Front-end developers are likely aware of JSONLint and JSLint. Well now there’s CSSLint, which analyses CSS and helps developers write CSS that conforms to a set of performance and syntax of best practices. ‘Helps’ is understating it really, CSSLint throws errors and if used as part of a build server – say, TeamCity for example – it will cause builds to fail. This is both a good and a bad thing. It means the rules are enforced with harsh penalties, but bad rules will create an upsetting development…

5 min.
bring design and build together

At this point it’s fair to say that CSS preprocessors have captured the imagination of the industry and have become prevalent in production – the most well known being: Sass and SCSS, Less and Stylus. At this point in time there isn’t much to tell these preprocessors apart. They all have fairly similar capabilities, just with each going about it a different way and with a slightly differing syntax. The basic premise of CSS preprocessing is to provide more powerful tooling to developers and also enable more expressive code. This has its pros and cons – the more advanced the tool is, the more skill it will take to use it effectively. In line with this, some of the most basic and easiest to use features of CSS preprocessing are also…

3 min.
style guides: why you need them

Style guides are a brilliant idea, however they are usually woefully executed in practice. The idea is that at any point in time there is a working document visible to the project team that captures the look and feel of core components – and this includes typography, buttons and form fields. What actually happens though is that the working document becomes stale and discarded by most of the project team, and that’s because it captures the look and feel of the project from two months ago. An out-of-date working document is pretty useless because the project team can’t use it for anything they’re working on at that moment – it simply gathers dust, becoming a relic. There are probably many reasons for stale style guides, but the biggest standout is the associated…

2 min.
5 photoshop extensions

CSS Hat csshat.com Including any plugin that “writes code for the developer” is always going to be controversial, but CSS Hat does an okay job. When it comes to trying to scratch something together in minutes or unpicking several font styles at once – it can be a handy pallette to have, especially for those who don’t have a mental CSS encyclopedia. render.ly render.ly If something needs exporting, render.ly is the right tool for the job. The basic premise is that each top-level group in a PSD is a ‘screen’. and child groups with names beginning with “&” get exported as separate states of that screen. Render.ly also generates webfonts for icons in vector format. No more manual image exporting from PSDs. InVision invisionapp.com InVision takes designs and provides an interface for adding interactions – enabling designers to…

2 min.
improve performance

CSS sprites can really help cut down on the number of HTTP requests made on each page load. When done effectively, sprites can have a big impact on performance, especially on mobile, where the number of simultaneous connections is limited or perhaps the data connection is just plain slow. Unfortunately, they’re also quite costly to create and maintain when done manually – especially if icons need to change sizes late in the build. This is where css-sprite (an npm package) comes in: give it a bunch of images and it returns a stylesheet (in your preprocessor of choice) and a single image. What is particularly good about css-sprite is that it is capable of laying the sprites out in multiple ways. Vertical and horizontal are options, but the best is binary-tree. This…

18 min.
25 pro plugins

Our expert Tam Hanna works with Symbian software products and a variety of coding languages. This issue he reveals the best plugins for powering up jQuery TWEAK PHOTOS Plugin: Image Editor bit.ly/1hIv6c1 Category: Photo editing Users love to edit uploaded pictures on the web. Image Editor provides a svelte little GUI wrapper around the Camanjs filter library: it saves you from the hassle of coding a set of sliders, buttons and symbols which come together to make up a little editor. Getting started with the Image Editor plugin requires the embedding of four libraries and a picture box – our test harness starts out like this: Keep in mind that the download is not complete and that’s because each of the libraries also expects its resources to be in place for the GUI to work.…