No Mind

It's the mind that makes you miss the shot

Archive for the ‘HTML5’ Category

May 7th, 2010 by Vivek Khurana

Why designers should learn HTML5

Of recently I had a discussion with few designers questioning the adoption of HTML5 and why should they learn HTML5. As everyone knows HTML5 is the new upcoming standard for the browsers. HTML5 enhances browser capabilities. Many capabilities which required using javascript libraries or flash, like drag and drop or video/audio playback, can now be done in browser natively, with HTML5.

But the question still remains, why should a designer waste her time in learning HTML5, when HTML5 specification is not yet complete. It makes no sense to invest time into something, because your nerd friend wants you to learn :)

HTML5 adoption is happening at a faster pace then you can imagine. All major browser vendors are now supporting HTML5, some have already started shipping HTML5 features in the current browser builds, while others are busy catching up. Not only browsers but several websites like youtube, facebook, scribd etc. have started HTML5 based versions. So unlike previous improvements in HTML, such as CSS, which took years to be adopted by browsers, HTML5 adoption is progressing at a healthy pace.

HTML5 is a standard that has took many years into making, with input from various software vendors and individuals, including designers. This process has ensured that most commonly used features of web development are supported by browsers natively, without need of any external libraries. At the same time, HTML5 has tried to add tags that will make content layout easier along with support for microformats. This makes presentation as well as sharing of data easy.

Though you may argue that HTML5 specification is not yet ready, then how are browsers implementing HTML5 ? This is acceptable. HTML5 is a big standard. It is so big that during the discussion stages, HTML5 specification has to be broken down into couple of smaller standards. Standardization process require drafts to be published and comments be received. Once drafts are published, the core ideas /features/processes/algorithms are rarely changed. Although it will take couple of years for the full specification to be ready, test suite be prepared and browsers passing those test. You can safely assume that the features/algorithms defined in the standard will not change.

So, no harm in investing time into learning HTML5 as it is going to become the defacto standard for web based applications in the decade to come.

How to learn HTML5 ? There are lots of tutorials available on the internet on HTML5. You can also, keep an eye on this blog, as there will many posts in near future, explaining various features of HTML5.

April 18th, 2010 by Vivek Khurana

Css3 – HSLA color model

The css3 candidate recommendation from W3C brings HSL (hue-saturation-lightness) model to web browser. This model is a complement to RGBA model supported by CSS. While RGBA provides a method for defining color, RGBA model reflects how CRT’s understand color. Humans on the other hand have a different thinking process for color. HSL model is closer to how a human would pick a color.

So what is HSL model ?

To understand HSL model, let us first look at how a human would pick a color. When you want to paint your room, how will you choose the color(s) of the wall ?  You will first choose a base color that is,  you will choose whether you want read, blue, yellow, pink or any other color. Then you will decide on the shade and tone of the color, to select the exact color you want. You will never go about piking the values of red, green and blue and mixing them to find the color you want.

Artist follow a more streamlined approach to picking a color. Artist paint a color wheel , in which color hues are organized in a circle.  Once the color hue is decided, an artist would decide on the tone of the color that is, what is the blueness of blue or what is the redness of red, whether to use pure blue or to mix it with some yellow. Tones for a color are generated by mixing pure colors or a shade of gray . Lastly comes the shade of the color or how dark the color will be. Shades of color can be created by mixing white or black, to vary the darkness of the color. When all three; hue, tone and shade are decided, artist arrives at the color he wanted.

HSL model is closer to the way an artist or a normal human would choose a color. HSL is represented by a triple (hue, saturation, lightness). Hue is represents the angle in the color wheel.  Red is 0 or 360, greenis 120, blue is 240 etc. Saturation and lightness are represented by percentages. Saturation varies from 100% for full saturation to 0% for shade of gray. Lightness varies from 100% for white to 0% for black.

HSL model in CSS3

In CSS3 HSL model supports a fourth argument, opacity or the alpha channel. Opacity value of one is fully opaque while opacity value of 0 is fully transparent. Following example defines a semitransparent solid blue using HSL/A model.

p { color: hsla(240, 100%, 50%, 0.5) }

Advantages of HSL model

HSL model is intuitive and closer to how humans think of color. RGBA model on the other hand will require some sort of internal translation by a human, to visualize the actual color.