In the process, I came up with a with a very short code, to give a smooth floating effect. So lets go through the steps one by one.

Let’s create all the HTML first like below:

<div class="header">This is the big boy header</div>
<div class="content">This is the content</div>
<div class="sidebar">This is the sidebar</div>
<div class="footer">The poor footer lies here</div>

Nothing to explain here. A normal header, content, sidebar and a footer.

Now, let’s do the css bit here

.header { width:100%; background:red; height:80px }
.content { width:80%; background:blue; height:800px; float:left }
.sidebar{ width:20%; background:yellow; height:390px; float:right }
.sidebar.fixed { position:fixed; right:50%; margin-right:-50% }
.footer { width:100%; background:gray; height:50px; clear:both }

Now you could make this as long as you want (or shorter) depending on your need. However, the important thing to note is the .sidebar.fixed portion with position:fixed.

Finally, the Javascript. I have used jQuery here. Let’s have a look at it:

$(document).load(function() {

   /** The code starts here **/
   $window = $(window),
   $sidebar = $(".sidebar"),
   sidebarTop = $sidebar.position().top,
   $sidebar.addClass('fixed');

   $window.scroll(function(event) {
      scrollTop = $window.scrollTop(),
      topPosition = Math.max(0, sidebarTop - scrollTop),
      $sidebar.css('top', topPosition);
   });
   /** The code ends here **/

});

The first two lines are just for performance. Storing the references of the window and sidebar in variables as they would be referenced in the scroll event. We also save the top position of the sidebar, before making the position fixed through adding the class.

We record the current window.scrollTop() position, and Math.max is really to get rid off the if statement. This makes it look very elegant. Also, you could replace the 0 with an offset value, if you want any margin at the top of the sidebar. The value is used to set the top position of the sidebar.

And that’s it. You are done. You can try it out for yourself here on JSFiddle

Bonus Technique

Now, what if you want the sidebar to float only within a range. Say in the above example, we want the sidebar to float as we scroll, but not beyond the footer. (Never overlap the footer).

In our above steps, change the css of the footer (increase height) like below and see what happens:

.footer { width:100%; background:gray; height:100px; clear:both }

As you scroll down to the bottom, the sidebar overlaps with the footer. We can avoid this by the below code:

$(document).load(function() {

   /** The code starts here **/
   $window = $(window),
   $sidebar = $(".sidebar"),
   sidebarTop = $sidebar.position().top,
   sidebarHeight = $sidebar.height(),
   $footer = $(".footer"),
   footerTop = $footer.position().top,
   $sidebar.addClass('fixed');

   $window.scroll(function(event) {
      scrollTop = $window.scrollTop(),
      topPosition = Math.max(0, sidebarTop - scrollTop),
      topPosition = Math.min(topPosition, (footerTop - scrollTop) - sidebarHeight);
      $sidebar.css('top', topPosition);
   });
   /** The code ends here **/

});

The scrollbar will now scroll only within the range. Try the demo.

You can provide your feedback and improvement suggestions in the comments.

According to Adobe, Android 4 (Ice Cream Sandwich) will be the last mobile platform to use a Flash plugin. The OS has been launched without one, though. Given Flash’s terrible track record with mobile, it wouldn’t be surprising if it never arrives. Therefore, video publishers should ensure their Android video works in HTML5.

So, for now Android better update itself to work with HTML5 or lose the war against Apple in mobile video.

Reference: Why Apple is winning the mobile video format war

“The decision to stop development of the Flash Player plugin for mobile browsers was part of a larger strategic shift at Adobe,” writes Chambers. “One which includes a greater shift in focus toward HTML5, as well as the Adobe Creative Cloud and the services that it provides.” Chambers has stated five main reasons why Adobe decided that its resources were better spent elsewhere.

Coming to the implications of this for HTML5, HTML5 will now, undoubtedly, be the ruler in the world of videos, especially the mobile browser ones. There is no need for extensive integration of Flash with the browser now, with HTML5 in the picture now, everything will be neatly handled only in the browser.

App stores have become fashionable these days and now we have an HTML5 App store. Robert Reich, developer and founder of Openspace Store, Inc. has set out to build the world’s largest App Store, by establishing the Developers Cooperative.

The cooperative is for all developers building HTML5 applications. What’s more, there are no fees and developers join by recommending their current users to purchase apps, music, books or movies from the Openspace Store. There is a link for developers to submit their app at https://www.developerscoop.org/developer/.

While the Openspace Store is focused on HTML5 apps, it also supports apps for other platforms like Android, iOS, Desktop applications, Browser add-ons along with the plan to offer music, books and movies in the future.

“Often corporate rule making and platform-specific policies of large marketplaces prevent app developers from having the freedom to create and distribute apps the way they want to,” said Robert Reich, founder of the Developers Cooperative. “We are creating something new in the world of app development: a fair and representative process to make decisions about our store based on the input and interests of developers.”

So what are the incentive for Developers to submit their applications to this store? There are three according to Robert:

• Money: Developers set the price of their apps and keep 70 percent of the application sales. There is a 5% referral program for profit sharing. Once the store opens to the public, developers will be able to activate ad-networks.
• Distribution: Any developer can register their apps on Openspace, but Co-op members benefit from enhanced distribution opportunities.
• Voice: Developers influence the policies that govern how their apps are distributed and sold. App developers are encouraged to join the Developer’s Cooperative to find revived freedom in app development by having a voice and benefiting from a new distribution channel with additional monetization opportunities.

Can Robert become successful in creating a new kind of business model for App stores? Well, lets hope to see this become a success!

HTML5 means this game will just work on iPad, unlike Farmville for which Zynga had to create an iOS application. I have only once concern though, how will the performance vary across different browsers. For example, will be more suitable to play on Internet Explorer because of it’s focus on Graphics acceleration, or will be more suitable to play on Chrome, because of fast Javascript execution. Well we will get to know soon. Right now just watch a flash video below to get excited about building resorts, if you are into that sort of thing or just be happy to see HTML5 take off in a big way for Games.

Here, we are specifically talking about its weather widget in the mobile web search. If you own a mobile with an HTML5 browser (like Android, iOS, blackberry), go to Google search and type in a query like “weather new york” or “weather menlo park” and see what you get along with the search results. The weather widget coded in HTML5. As, seen in the attached screenshot, it appears like what used to be possible with Flash right. But, wait this is a screen shot of iPhone, so no flash here.

The possibilities with HTML5 are immense, only thing lacking are proper HTML5 authoring tools. But, more tools like Maqetta are coming up and soon it would be as easy to code HTML5 as it is to use Photoshop. (Well the last statement sure is subjective).

Check the weather app yourself and let us know what you think of the application.

Maqetta interface in itself is written in HTML5 and runs from within the browser without any need for plugins. It can be downloaded and installed on personal servers or used on maquetta.org. It seems Maqetta is pronounced like “Maketta”, a spelling variation of “maqueta”, the Spanish word for mock-up.

The key features of Maqetta include:

• a WYSIWYG visual page editor for drawing out user interfaces
• drag/drop mobile UI authoring within an exact-dimension device silhouette, such as the silhouette of an iPhone
• simultaneous editing in either design or source views
• deep support for CSS styling (the applications includes a full CSS parser/modeler)
• a mechanism for organizing a UI prototype into a series of “application states” (aka “screens” or “panels”) which allows a UI design to define interactivity without programming
• a web-based review and commenting feature where the author can submit a live UI mockup for review by his team members
• a “wireframing” feature that allows UI designers to create UI proposals that have a hand-drawn look
• a theme editor for customizing the visual styling of a collection of widgets
• export options that allow for smooth hand-off of the UI mockups into leading developer tools such as Eclipse
• Maqetta’s code base has a toolkit-independent architecture that allows for plugging in arbitrary widget libraries and CSS themes

The full list of features can be seen here.

Hope this is only the beginning and we see some serious HTML5 authoring tools. I am looking at Adobe and even the Eclipse foundation to bring out something amazing for HTML5. And in all that, may be just may be Google might come up with something amazing. Yes, GWT to an extent provides that, but even that requires more programming knowledge (Java) so is no good for designers.

A lot of people come on this site searching for HTML5 development tools. The company from which most people have expectations is Adobe. And, they have not disappointed thus far. With this Flash to HTML5 conversion tool, they declared that they are ready to sacrifice one tool, which may in turn benefit the other one: Dreamweaver.

In this video, Adobe’s Greg Rewis explains how Adobe CS5.5 internalizes HTML5 and provides it’s full support behind the still developing standard. Well, hat’s off to Adobe’s effort. Now only if we can see some competition.

We checked for ourselves with the tests at HTML5Test.com and the results are posted below. In desktop browsers, we consider the current release of Internet Explorer, Firefox, Chrome, Safari and Opera. For mobile browsers, iOS, Android, Blackberry and Maemo were chosen.

The Desktop browser comparison is posted below:

Chrome is the clear winner here, followed by Firefox and Opera. As you can see IE9 has a lot of work to do. In fact IE9′s HTML5 score is below that of all the mobile browsers considered below. We also saw how well the available betas of  these browsers are faring and looks like Safari has put in a lot of work making it claim the number 2 position after Chrome.

The mobile browsers comparison is posted below:

Surprisingly the leader is blackberry. It’s score is comparable with desktop browsers. iOS Safari follows in with number 2 position. I am confused as to why Google has not merged the Android browser and Chrome source code. It might be good for branding purposes also. Currently manufacturers wrongly brand the Android browser as Chrome Lite, but we can’t blame them for this. Android browser is at third spot followed by Maemo at fourth place.

So now you know whether to believe the marketing hype of the companies like Microsoft and Apple when they talk about HTML5. But, at least the progress made is very encouraging. Go browsers go!

Traditionally all this is achieved through Javascript validations on client side or complete validations on client side. HTML5 tries to solve the basic validation need, relieving the coder, by providing different types of Input elements that could be used in the forms.

Below is the list of available HTML5 Input elements:

1. Text

This is not a new element. Always available for any kind of string input. No validation in built. The syntax is pretty straightforward.

<input type="text">

However, there have been new attributes added that aid in form validation. The attributes are mentioned below:

form: The id of the form with which to associate this input
autocomplete: “on” or “off” – whether you want the browser to autofill the value in this field
autofocus: “autofocus” or “” – whether the browser should focus on this field after loading the document
list: The id of the datalist with which to associate this data
pattern: A regular expression to use to validate the input
required: “required” or “” – whether this input is required to be filled or optional
placeholder: A description text/hint for the field

Just from the list above you could see how a lot of Javascript can be eliminated just by providing these additional attributes to the input text.

2. Password

Again, not a new HTML5 input tag. A text input that does not show the contents but hides the characters beneath a symbol like *.

<input type="password">

Attributes same as that for “text” input type.

3. Search (New)

A new HTML5 input type, specifying a one-line plain-text edit control for entering one or more search terms.

<input type="search">

Attributes same as that for “text” input type.

4. Checkbox and Radio

Old input elements. Generally used for Yes/No and choice type of input.

<input type="checkbox">

<input type="radio">

Additional attributes available are form, autofocus and required.

5. Button, Reset, Submit and Image

Again not new elements. Input element which shows a push button, which may cause some script to run upon click. Reset will clear all the input values in the form. Submit will submit the form data. Image allows selecting co-ordinated and submitting form data.

<input type="button">

<input type="reset">

<input type="submit">

<input type="image">

New attributes added are form and autofocus.

The submit and image input types have some additional attributes available as below:

formaction: A url to which to submit the form
formenctype: ”application/x-www-form-urlencoded” or ”multipart/form-data” or ”text/plain” – how to encode the form before submit
formmethod: “get” or “post” – the HTTP method of form submission
formtarget: “_blank”, “_self”, “_parent”, “_top” or any browsing context keyword
formnovalidate: “formnovalidate” or “” – whether to validate upon form submission

6. File

Again an existing element. Used to upload files during form submission.

<input type="file">

New attributes available are form, autofocus and required as explained above for “text”. In addition, the following attribute is added:

mutiple: “multiple” or “” – whether this field allows mulitple values (allowing selection of multiple files)

7. Hidden

This is an old input element which is not visible. Generally used to store derived values or pass data between sessions.

<input type="hidden">

Additional attribute form is available.

8. Date, Time, DateTime, DateTime-Local, Week and Month (All new)

These are new HTML5 input elements related to date and time. Each of them is explained below:

Date:

Specify the date in format like 1996-12-19 (yyyy-mm-dd).

<input type="date">

Attributes available to this input type are form, autocomplete, autofocus, list and required as explained for “text” above. Additionally, the following attributes are available:

min: The minimum allowed value for the date
max: The maximum allowed value for the date
step: “any” or “+ve float” – the amount by which to increment or decrement date

Time:

Specify the time in format like 23:20:50.52 or 17:39:57 without time zone information.

<input type="time">

Attributes are same as “Date”.

DateTime:

Specify the date and time in the format like 1990-12-31T23:59:60Z or 1996-12-19T16:39:57-08:00 with time zone information.

<input type="datetime">

Attributes are same as “Date”.

DateTime-Local:

Specify the date and time in the format like 1985-04-12T23:20:50.52 or 1996-12-19T16:39:57 without time zone information.

<input type="datetime-local">

Attributes are same as “Date”.

Week:

Specify the week in the format like 1996-W16.

<input type="week">

Attributes are same as “Date” except step, which takes values “any” or “+ve integer” (instead of float)

Month:

Specify the month in the format like 1996-12.

<input type="month">

Attributes are same as “Date” except step, which takes values “any” or “+ve integer” (instead of float)

9. Number and Range (Both new)

These are new HTML5 input elements for numbers.

Number:

Restrict the input to a number like 111.24

<input type="number">

Additional attibutes available are form, autocomplete, autofocus, list and required as for “text” above. Moreover, the following attributes are available:

min: The minimum allowable number (float)
max: The maximum allowable number (float)
step: The increment or decrement value (float)

Range:

Same as number but an imprecise control for the input value. Appears a slider.

<input type="range">

Attributes same as “Number”, except required is not available.

10. URL, Color, Email and Tel (All new)

These are new HTML5 input elements for URL, Color and contact information.

URL:

An input element to enter an absolute url like http://www.html5trends.com/.

<input type="url">

Additional attributes available are form, autocomplete, autofocus, list, pattern, required and placeholder.

Color:

An input element to enter a simple color like #1234aa or #AB11C2. Color keywords are not allowed.

<input type="color">

Additional attributes available are form, autocomplete, autofocus and list.

Email:

An input element to enter an email address like foo-bar.zzz@example.com.

<input type="email">

Additional attributes available are form, autocomplete, autofocus, list, pattern, required, placeholder and multiple.

Tel:

An input element to enter one-line plain-text representing a telephone number.

<input type="tel">

Additional attributes available are form, autocomplete, autofocus, list, pattern, required and placeholder.

For complete reference, please visit this link: http://dev.w3.org/html5/markup/input.html