Servage Magazine

Almost every desktop or mobile application needs to store user data somewhere. But how about a website? In the past, we used cookies for the purpose, but they have serious limitations. HTML5 gives us better tools to solve this problem. The first is IndexedDB, which is an overkill as a cookie replacement, and Web Storage, which is a combination of two very simple APIs and which I will be showing to you today. What is the Web Storage? Generally speaking, Web Storage (also known as Dom Storage) refers to a set of APIs that attempt to provide a simple way to store client side data in the browser. It is more ...

When we consider the user experience in our web designs through texts, we first consider the typographical elements and their impact in our designing. Any content in western culture is read from the left and top of the page and goes to the right and bottom. This left to right tendency has led us to create horizontal rhythm; whereas, top to bottom conveys vertical rhythm. Vertical rhythm Good readability comes through the vertical arrangement of typefaces along with image alignments. We can say we are soothing our audience with a good visual presentation of UI elements through symmetry and familiarity in UI components. This inherent nature of human reception, ...

When the third dimension is introduced into an entertainment medium, it forever changes the way that medium is presented and consumed. The photorealism of the CGI dinosaurs in Jurassic Park opened the doors for film creators to use computers to create visual environments that never would have been possible otherwise. VeggieTales spawned a new type of cartoon, one that uses 3-D objects instead of drawings and which inspired the creation of everything from Pixar and Dreamworks blockbusters to Saturday morning cartoons. Computer software was greatly affected by this new trend in visual media. 3-D computer games such as Wolfenstein 3D, Quake and Doom reinvented PC gaming, and classic franchises that inspired a generation ...

Responsive web design is a technique that uses CSS to adapt a page’s layout based on screen size. It is just one strategy we are employing to cope with the mind-blowing variety of screen sizes. Of course, responsive design is a big, fat, gnarly topic that could fill (and has filled) whole books. What I’m going to do here is introduce you to the basic ingredients of a responsive site so you get a feel for building one. A simple example In this section, we’ll work together on making the Jenware page responsive. The example below  shows how the same Jenware HTML page will look on a ...

There are many properties defined for the audio element in HTML5. We are going to focus on the following because they are the most useful for the applications we will build: autoplay true or false: whether the audio should start playing automatically when it has loaded. muted true or false: Setting this to true silences the audio object regardless of volume settings. controls true or false: Displays controls for an audio object in an HTML page. Controls will not display on the canvas unless they are created in HTML (for example, with a <div> overlay). volume The volume level of the audio object; the value must be between 0 and 1. paused true or false: whether the audio object is paused. ...

There are two types of PNG files: 24-bit PNGs (PNG-24), which contain colors from the millions of colors in the RGB color space, and 8-bit indexed PNGs (PNG-8) with a palette limited to 256 colors. This section looks at what you can (and can’t) do to affect the file size of both kinds of PNG files. PNG-24 PNG’s lossless compression makes PNG-24 a wonderful format for preserving quality in images, but unfortunately, it makes it a poor option for web graphics. A PNG-24 will always be significantly larger than a JPEG of the same image because no pixels are sacrificed in the compression process. Therefore, your first “lean ...

You can’t physically manipulate audio with HTML5 Canvas as directly as you can video, but many canvas applications can use that extra dimension of sound. Audio is represented by the HTML AudioElement object manipulated through JavaScript and by the <audio> tag in HTML5. There is no Canvas API for audio nor, really, is one necessary. However, there are many ways that you might want to use audio with HTML5 Canvas. As you will see, the HTMLAudioElement has some limitations and can be frustrating. However, with developments like the Web Audio API on the horizon, the outlook for using audio with the HTML5 Canvas looks brighter every day. The Basic <audio> Tag The basic usage of the ...

We have already discussed about basic GIF optimisation techniques in the previous articles. Here we will be discussing about some advanced GIF Optimisation Techniques. When the colors in an image are reduced to a specific palette, the colors that are not in that palette get approximated by dithering. Dithering is a speckle pattern that results when palette colors are mixed to simulate an unavailable color. In photographic images, dithering is not a problem and can even be beneficial; however, dithering in flat color areas is usually distracting and undesirable. In terms of optimization, dithering is undesirable because the speckles disrupt ...

Google Glass is rapidly gaining momentum and by end of 2014, it could have a million users. Learning the art of web designing for Google Glass is the future. This post will overview the Google device and hint at some design techniques. The latest version, XE7 beta, has a web browser; thus, the hope is that Google Glass will one day be on par with smartphones. I suggest now is the time to get on board the train of Google Glass development. As a Google Glass web developer, we have a new set of challenges to face, such as updating our existing site to be compatible with Google Glass or creating ...

As the title suggests, this post talks about enterprise level of project development, though I don’t want to forget about the small team either. One day that small team will grow and may be engaged in an enterprise level project so hopefully this piece offers inspiration to use an enterprise level toolkit to help manage big scale projects more easily. It is worth a read for all web developers, designers and mobile developers. Let’s see how to create such an enterprise level UI toolkit and how it can help us to improve productivity. Form of UI Toolkit Generally, when someone talks about a toolkit, we assume it to be a collection of ...