Form a learning plan for an HTML5 future

The trend toward using Web technologies for application development, even outside of the Web browser, is here to stay. The recent revelation that Windows 8 will have provisions for writing apps using the HTML5 technologies merely cements this shift in the development world. So the question is: How are you going to deal with it?

If you haven't been following closely, it is easy to wonder why and how Web technologies are suddenly being cast in the role of desktop application development platforms. In the HTML5 standard that is being finalized, there are a number of new items that add on real application development capabilities to HTML's existing document formatting. In the past, big JavaScript frameworks and browser plugins were needed for some fairly trivial functionality.

HTML5 changes the game by adding support for things like video streaming, multithreaded and asynchronous processing (via the "Web Workers" message passing system), direct communications through sockets, and more.

While the idea that a document format standard has these capabilities may be horrifying to some (including myself), this is the direction that HTML is headed in, and it has backing from Apple, Microsoft, Google, Mozilla, Adobe and more. In addition, the various frameworks out there make it very easy to directly connect Web applications to backend Web services. As a result, HTML5 is now as capable as technologies like Silverlight, Flash, Flex/AIR, and JavaFX for many tasks (though there are still some things that those technologies do better).

Here are the technologies that you will want to learn to get started:

• HTML5: While HTML5 may not be a fully finalized standard yet, it is not changing very much at this stage. Right now, it is usable and has a decent amount of implementation in browsers. You should start learning it now.
• CSS: If you are not already familiar with CSS, now is a good time to learn it. Browser support keeps improving, and Internet Explorer 6 is now a small enough portion of the market that many developers feel safe in ignoring it.
• Web services: Every major server-side development language has a framework or set of libraries for easily producing Web services, such as Windows Communication Foundation (WCF) in .NET. It should not take much learning to understand the basics. You will want to especially learn how to produce JSON output, which is quickly becoming the lingua franca of Web applications. Also make sure that you understand RESTful Web services. While they may be more work to consume than SOAP services are in a modern development environment, they are much more universally accessible.
• JavaScript: The new application development paradigms require a lot more JavaScript knowledge than it takes for traditional ASP.NET or similar development requires.
• jQuery: jQuery has become the client-side development framework to use; it seemingly can do it all. With an extensive set of plugins, if there is a client UI trick you need to try, there is a good chance that jQuery can do it for you.

These technologies form the basis of a number of different development systems now. Mobile web sites are a good way to reach the most mobile users with the least amount of effort. Tools like Appcelerator's Titanium allow you to use web technologies within its system on a number of platforms, including mobile and desktop. Other systems, like OutSystem's Agile Platform (disclaimer: I have a number of ties to them that are explained in my disclosure) wrap libraries like jQuery to make developing web apps for desktop or mobile use extremely easy.

Windows 8, while details are still murky, looks like it will be using Internet Explorer 9 (or whatever version is current by then) as a runtime environment around HTML5 technologies to act as local applications outside of an obvious browser window. One would presume that these apps would have enhanced privileges, access to local resources, and other opportunities to behave more like native applications.

Educating yourself about the above listed core technologies is a smart move, and after Microsoft's BUILD event in September, we should know enough about the company's plans for Windows 8 to fine tune the strategy and discover what else needs to be learned.

Justin James is an employee of Levit & James, Inc. in a multidisciplinary role that combines programming, network management, and system administration. He has been blogging at TechRepublic since 2005.

W3C narrows 'HTML5' logo meaning to HTML5

The World Wide Web Consortium, faced with derision that its new HTML5 logo represented a broader set of Web technologies, has pared down the logo's scope.

"Since the main logo was intended to represent HTML5, the cornerstone of modern Web applications, I have updated the FAQ to state this more clearly. I trust that the updated language better aligns with community expectations," W3C spokesman Ian Jacobs said last week in a blog post.

Indeed, the HTML5 logo FAQ now states in no uncertain terms: "This logo represents HTML5, the cornerstone for modern Web applications." Those who want to promote related technologies--Cascading Style Sheets (CSS), Web Open Font Format (WOFF), Scalable Vector Graphics (SVG), and Web Sockets, for example--can use the accompanying but subordinate icons.

HTML5 has become something of a marketing buzzword--to some Web developers' chagrin, since it sometimes stands for so much more than the next version of Hypertext Markup Language that's being standardized at the W3C and at its longtime home, the Web Hypertext Applications Technology Working Group (WHATWG).

Indeed, after the W3C released the HTML5 logo last week, Ian Hickson, editor of the specification at both W3C and WHATWG, moved up the schedule to drop use of HTML5 in favor of just HTML. That's only happening at the WHATWG, though he'd like to see it at the W3C as well.

This article was first published as a blog post on CNET News.

Adobe hastens release of HTML5 developer tool

Even as opposition mounts against Adobe Systems' Flash technology, the company is showing Wednesday it's working hard to ensure it's not the only arrow in its Web programming quiver.

At the Google I/O conference, Adobe Chief Technology Officer Kevin Lynch is expected to announce the release of an HTML5 update to Adobe's Dreamweaver tool for creating Web sites. HTML5, a still-developing revision to the Web page standard, is a key part of the threat to Flash, but Adobe is indicating it's willing to embrace the alternative.

In March, Adobe started demonstrating a CSS3 feature in Dreamweaver that lets a Web page's format change according to what size screen is being used to view it.

Adobe has been telegraphing its interest in HTML5 and CSS3, a related new version of the Cascading Style Sheets standard for Web page formatting. But evidently the priority on such work is rising. After Apple Chief Executive Steve Jobs trashed Flash, Lynch said , "We're going to try and make the best tools in the world for HTML5."

Earlier evidence emerged in March with Adobe demonstrations of CSS3 to handle screen size variation and of an HTML5 feature called Canvas for 2D graphics. At the time, Adobe said, "It won't be in the next version of CS," but now, just three weeks after the release of Dreamweaver CS5, the team is showing a faster response.

Adobe heard such an "overwhelming response" to the HTML5 and CSS3 demos from March "that we decided to roll it out after CS5," said Lea Hickman, senior director of product management in Adobe's Creative Solutions business, in an interview. "The excitement around HTML5 and all it brings is really exciting. Dreamweaver has a huge opportunity to help that move forward even faster. One thing missing now around HTML5 is great tooling."

As is apparent from Adobe's Flash-defending ad campaign, it's not an either-or situation where Adobe will support only one of the two technologies.

The HTML5 update will be available on the Adobe Labs site. The update itself will let Web developers see and manage HTML5 coding without the software being baffled by the new syntax and options, Hickman said. In addition, the update includes a new version of the WebKit browser for live previewing of Web projects under development.

But it's also clear that Adobe would like to be more of a leader and less of a follower when it comes to HTML5.

"We do participate in W3C [the World Wide Web Consortium that helps oversee HTML5 development] and sit on the HTML5 committee. I think that one of the things we should do is be more of a driver," Hickman said. "There's been a lot of drama around it. We have a team of folks who participate today, and I imagine they'll participate even more in the future."

With so much activity with Web standards, Adobe will have to work hard to keep up with the new specifications. But Hickman prefers that to stagnancy.

"Not much has happened with HTML for a number of years, and HTML5 does provide a lot of excitement about how we can move the Web forward," she said. "HTML5 is a chance to focus on HTML again."

This article was first published as a blog post on CNET News.

Adobe ditches mobile Flash, refocuses on HTML 5

Adobe has reportedly decided to kill off Flash for mobile platforms to focus on HTML 5, a move that may finally validate the late Steve Jobs and his anti-Flash rhetoric.

A press statement from Adobe that was sent to ZDNet US, said: "Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.

"We will no longer adapt Flash Player for mobile devices to new browser, OS version, or device configurations. Some of our source code licensees may opt to continue working on and releasing their own implementations. We will continue to support the current Android and PlayBook configurations with critical bug fixes and security updates."

The news comes just after Adobe Systems announced plans to lay off 750 jobs as part of a restructuring exercise to focus on digital media and marketing.

Use of Adobe's Flash browser plug-in is prevalent on desktops but far less so on mobile devices such as smartphones and tablets.

The news puts the multimedia platform back in the center of a long-drawn-out, heated debate between Flash evangelists and Apple, which banned the software on its popular iPhone mobile device when it was first released in 2007.

In an open letter published April 2010, Cupertino's late CEO Steve Jobs called Flash a "relic" that was created during the PC era. He also slammed the software for being proprietary and unstable.

"New open standards created in the mobile era, such as HTML 5, will win on mobile devices [and PCs too]. Perhaps Adobe should focus more on creating great HTML 5 tools for the future, and less on criticizing Apple for leaving the past behind," wrote Jobs, who died in October.

10 things you should know about HTML5

A year or two ago, HTML5 seemed like a vague idea that only a few Internet wonks cared about. Now, it feels like HTML5 is everywhere. Thanks to rapid releases from Mozilla and Chrome, and the deployment of IE9 from Microsoft (and IE10 already in "tech preview" status), browser support for HTML5 is available to nearly everyone in a limited (or better than limited) amount. Developers are starting to take advantage of the widely implemented features. With full HTML5 support probably less than a year away, and the specification quickly reaching an unchanging state, this is a great time to look at some things you should know about HTML5.

1. XHTML is no more; long live HTML5 with XML syntax

XHTML was the choice of people who favored precision, particularly for parsing. HTML has always looked a lot like XML, but it never was quite exactly like XML, and as a result, trying to parse it like XML would fail. So a while ago, the XHTML spec was made, to take the HTML language and put it into the XML lingo. When HTML5 first got started, there was work on XHTML 2 as well, but that was eventually mothballed. Instead, the HTML5 spec is written so that you can write HTML5 with strict XML syntax and it will work. And if you send it with an XML MIME type, user agents will parse it as an XML document too. This gives developers the best of both worlds.

2. The 2022 myth, the 2011 reality

One of the persistent misconceptions around HTML5 is that "it won't be done until 2022". The typical supporting evidence for this is an interview I conducted with Ian Hickson, the HTML5 specification editor, a few years ago. Ironically enough, even in that interview, he was clear about the 2022 date. But a few people got really worked up about it, and their angry articles got a lot more attention than the actual facts.

The truth is that 2022 is when Hickson expects the HTML5 spec to become a full W3C recommendation, which means that there are two 100 percent complete, verifiable implementations. To get an idea of why that is both fairly meaningless and a huge leap at the same time, consider that no other version of the HTML spec has ever achieved that status, mainly because they were too vague for any implementation to be provably correct. The HTML5 specification is getting close to being solidified and unchanging, right now in 2011.

3. It is a Flash and Silverlight killer for many developers

While HTML5 does make numerous improvements in how it is used for marking up documents, the big focus is in applications. The number of features that HTML5 introduces to support application development is staggering. This isn't to say that Flash and Silverlight are going away anytime soon. But Microsoft has already announced that it's refocusing Silverlight on the out-of-browser experience. Flash and Silverlight still have capabilities that HTML5 does not have, but the gap is nonexistent for many common purposes now, thanks to HTML5's new capabilities. It probably isn't worth rewriting existing applications, but you should see whether HTML5 makes sense for new applications.

4. It is the basis of many new tools

With HTML5 becoming a full-blown application framework, toolmakers are now using it as the foundation technology for their products, particularly those designed to overcome cross-platform development issues. If you are looking to write an application that runs cross platform, and it is within the capabilities of an HTML5 application, you should consider one of these tools. This is especially important in the mobile space, where the alternative is to learn an entirely different language, API, and framework for each phone platform you want to target.

5. The <video> tag is important but controversial

My personal pick for "best new HTML5 feature" is the <video> tag. Before <video> (there is also an <audio> tag), you would find yourself having to turn to Flash or Silverlight to provide a media player on your site. With these new tags, those days are, in theory, over. Why only "in theory"? Sadly, the different browser makers can't quite decide on which formats to support yet, due to patent concerns. When the dust settles on that, Flash and Silverlight both lose their #1 use case.

6. Google led the way

If it seems like the Chrome browser has a huge head start with HTML5, there is a good reason for that. The HTML5 specification process put a heavy premium and emphasis on written, deployed code. I'm not saying that they "rubber stamped" whatever browser vendors did. But it was hard to convince those involved to write specifications for unimplemented features, and implemented features were likely to become the basis of new items in the specification. Because Chrome seems to have a new version every few weeks, features that Google put into it had an excellent chance of making it into the HTML5 spec.

7. "Standards compliant" is finally provable

Whenever someone claims that a browser is or is not "standards compliant", I have got to laugh. Before HTML5, it is literally impossible to be provably standards compliant. In many cases, the current specs are too vague or simply silent on important issues (like handling parsing errors) and the result is that different browsers can do wildly different things and still be either standards compliant or fall into the category of "not provably out of compliance." Even the famous ACID test does not prove too much, since it tests only a subset of the HTML specification. With HTML5, the bar has been raised quite a bit, and it will finally be possible to prove that a user agent is standards compliant. Indeed, one of the reasons behind the 2022 date for "recommendation" status is the need to write full test suites.

8. "Standards compliant" still does not guarantee how it will look

Standards compliance in Web browsers does not do what people often think it does, and HTML5 does not change that fact. A big confusion with HTML is that many Web designers and developers believe that the HTML specification controls the look of items on the screen; it does not. For example, a Web browser can make the <strong> tag use a bigger or different colored font instead of a heavier font, if it likes and still be compliant. Many times, when designers say a browser is not standards compliant, what they are really encountering is the flexibility given to user agents in how to render tags. HTML5 does not change this fact. If you absolutely need a tag to be rendered in a precise way, do not count on the browser's default behavior; specify your needs in CSS.

9. Parsing is more precise

The HTML5 specification finally introduces precise parsing rules and defines things like what the user agent should do when it encounters a parsing error. As a result, you can expect that some things that used to pass as acceptable or even "valid" HTML in the past will no longer cut the mustard. You will want to get familiar with HTML5's parsing rules and make sure that your code adheres to them.

10. HTML5 goes far beyond the browser

In previous versions of HTML, there was an inherent assumption that a traditional Web browser was the user agent of choice. While other user agents and content types were supported, there was an implication that they were not as important. HTML5, on the other hand, has a good number of changes to put non-browser, non-desktop-size-screen user agents on more equal footing with traditional Web browsers. There have been a lot of advances with things like how well it works with screen readers and mobile phones. As a result, well-written HTML5 can be a "write-once, view anywhere" framework for developers who need it, and it can reach users (particularly those with a variety of disabilities) who otherwise would struggle with the Web.

Multiple Background Images

Applying multiple background images in CSS3 is quite easy, using a comma with the standard background property.

E.g. background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;

This panel uses three seperate images in its background.

1. CSS3 Background Image (Multiple)
2. #my_CSS3_id {
3. background: url(image_1.extention) top left no-repeat,
   
   url(image_2.extention) bottom left no-repeat,
   
   url(image_3.extention) bottom right no-repeat;
4. }

Example for those on alternative browsers, not seeing the background-image effect..

CSS3 Transition

Use CSS 3 transition to give action to elements in your website, such as change in colour, motion and more!

CSS3 Transition

The basic syntax for creating a css transition is “property”, “duration”, and “type”.

If we take the following example (transition:color 1s ease-in;) – the property we are changing is the color, over a duration of 1 second and using the ease-in method). See below some examples of how this can be implemented into your projects.

CSS3 Colour Transition Example

Mouse over this example paragraph to see it fade to a new colour using a basic CSS3 transition.

1. CSS3 Transition (color)
2. .my_class {
3. transition: color .5s ease-in;
4. -moz-transition: color .5s ease-in;
5. -o-transition: color .5s ease-in;
6. -webkit-transition: color .5s ease-in;
7. }
8. .my_class:hover {
9. color:#066;
10. }

This is a good technique for creating mouseover actions for links and buttons.

Mouse over this example paragraph to see it rotate 7degrees using a transform transition.

1. CSS3 Transition (transform)
2. .my_class {
3. transition: transform .5s ease-in;
4. -moz-transition: -moz-transform .5s ease-in;
5. -o-transition: -o-transform .5s ease-in;
6. -webkit-transition: -webkit-transform .5s ease-in;
7. }
8. .my_class:hover {
9. transform: rotate(7deg);
10. -moz-transform: rotate(7deg);
11. -o-transform: rotate(7deg);
12. -webkit-transform: rotate(7deg);
13. }

This can be used to create a more interactive website, such as menu items or image gallery.

CSS3 Motion Transition Example