Browser

Form a learning plan for an HTML5 future

Justin James lists core technologies developers should learn in order to keep up with the game changing HTML5.

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.

J.Ja

About

Justin James is the Lead Architect for Conigent.

33 comments
pschulz
pschulz

have been a major player in designing HTML 5 specs. So it is no wonder Apple is depreciating Flash. It is unfortunate that big companies can be the ones influencing the standards the way they want it to be.

nb_bhai
nb_bhai

Hi JJ what learning path would you recommend for someone who is just about to enter programming? Thanks

jmunnik
jmunnik

Nice article. It feels a bit Ironic that there seems to a big push for a new technology using a prehistoric weak-typed scripting language which lacks certain things most other development languages nowadays support. It would be nice if they would push for some form of alternative strong typed object oriented language. Another thing that comes to mind is the proection

n_egii
n_egii

Great article. I used to do web development but since switched to other stuff. This article provides brief but very useful info for anyone who wants to stay tuned to recent web technologies. I got just one question: "the idea that a document format standard has these capabilities may be horrifying to some (including myself)". Can you explain why it is horrifying? Is there any murky downside to HTML 5 that I dont know of?

gerbilio
gerbilio

I just had one of my students attempt to implement a web app that could be run on any platform: desktop, notebook, tablet, phone, Mac, PC, Linux, iOS, Android, etc. Great idea, and just the sort of thing HTML 5 is designed for. WRONG. as it turns out, every mfgr has its own HTML 5 standard. it proved impossible for him to answer the brief using HTML5, because they're all different, so he had to resort to complex JavaScript code. HTML 5 WILL be great...or at any rate it COULD be, if somebody makes all the players sit down and hammer out a truly platform-independent standard.

gbohrn
gbohrn

IE 6 is still used in quite a few corporations under managed IT services. I agree that these groups need to move forward as IE6 sucks and is broken in so many ways.

edbrandon
edbrandon

It all depends on who your users are. Over 20% of my visitors still use IE6. I may be unusual with my client base - medical professionals and government health professionas. IE7 is a small group for them, and I don't think it is a large group for most others either. It had a short life before IE8 came along. I place IE7 in the same class as I place Windows ME. It really is a case of what your client base is, and what you are offering them. I'm with a not-for-profit association providing information to public health professionals as well as the public at large. The info is critical, the presentation is not so. I'll be in that select group that continues to support IE6 for some time to come. And, really, for my needs, that's just fine.

premiertechnologist
premiertechnologist

HTML 5 and CSS3 are wonderful. Great to see more advanced standards. Having said that, when is Microsoft going to go back and fix all the problems with IE 6 and bring it up to the HTML5 and CSS3 standards? There are too many people out there left using old browsers and THAT is the problem with advancing to the new standards. I can hardly wait, but if I want people to actually read what's on my websites, I have to pay attention to browser compatibility. There are wonderful exciting things like the HTML video tag, but it's not exciting when you have to insert JavaScript code for older browsers to understand it -- browsers like IE 8. Honestly. I feel like standing on top the IBM Mainframe and yelling, "Fix it! Fix it!".

daboochmeister
daboochmeister

Just curious as to what your reasoning is for establishing the learning context for HTML5 as "Windows 8, Microsoft BUILD" etc.? I would think that building your learning plan around MS approaches to HTML5 development would have some significant risks and cons, as well as benefits. It would be interesting to see a blog discussing that aspect.

YetAnotherBob
YetAnotherBob

Apple and Microsoft tried to get H.264 as the specified video engine, and lost. W3C has a policy against any patented technology that isn't under a free use license. Google and Mozilla tried to get MP8 as the specified video engine, and lost. as the MP8 spec, while freely licensed isn't complete yet. The big corporations have a big voice, but so do the little guys. What has been approved for inclusion so far is very good. Mozilla, Google and Opera went ahead and put MP8 in the browser. Microsoft, Apple and Opera went ahead and put H.264 in the browser. With the next browser version, Microsoft may just have both video standards in, so as to have all their bases covered. Both Microsoft and Apple are members of the licensing consortium that controls H.264, so they want to have everyone have to pay them. But, they didn't win. Google owns MP8, which is under a Free license. Both H.264 and MP8 are patented technologies. Both may place an implementor under some limitations. Both work quite well, better than the current technologies. Each is superior to the other in some ways, but the differences are not great. Both were backed by giant corporations, both lost. there is hope. Microsoft provides free plugins for H.264 for Firefox and Chrome. Google provides free plugins for IE for MP8. Opera provides both built in. Apple users may be the only losers here. Things are looking good for the future.Half of the browsers support each format right now. In a few years, both may be standard on all browsers.

Justin James
Justin James

For one thing, the syntax can be truly validated (which couldn't be done before). They've done a lot with DOCTYPE. They've totally overhauled and ripped about the list of tags. Depending on the MIME type, it can be proper XML format (making XHTML obsolete). The differences are quite a few, I suggest you check them out (http://dev.w3.org/html5/spec/). One sign of what's happening is how much bigger the HTML5 spec is compared to HTML 4... J.Ja

YetAnotherBob
YetAnotherBob

For a beginner, get a book to introduce you to HTML. HTML4 has some big and common ways to screw up a website. Go for one of the HTML5 or XHTML with HTML books. Don't use one of the drag and drop 'easy' HTML formers, like Front Page or it's kin. You can write all of your HTML code in any text editor. Even in a Word Processor, as long as you save it in plain text format. Get and use a validator. I would suggest the one provided by the W3C. There is an online validator available too. It's best to use the Strict setting. eliminate bad habits early. Start small. Build slowly. Simple websites work best across various platforms. Get several browsers. Firefox, Chrome, IE9 if you are on Windows. Maybe IE7 too. Safari and Opera to round it out. Safari is a tricky beast. IE versions before 8 reform your HTML, so expect some snarky behavior. IE6 is legendary for bad behavior. Just ignore it. CSS is a beautiful way to create websites that behave like you want them to. CSS should be the second thing you try ot master. A lot of systems will try to place the CSS in the web page. HTML allows this, but avoid it. With a separate CSS file, you can easily have all your web pages look the same. CSS is key to a good web experience. Forget the fans who promote any other environment than Java Script. Java is a separate program, and will slow down you system. It also changes with each release. You will rule out a lot of your viewers if you use it. ,Net is just Microsoft's version of Java. It has the same problems. ASP.Net or any .net is just a service on top of .Net. ASP is one of the classic attack vectors. It is claimed safe, but it isn't. Ruby/PHP/... are alternative scripting languages. They suffer the same problems as Java. They can be good on a server, as a referenced source, and if done right, can build custom web pages on the fly (as Java and .Net can) but should not be in your web pages directly. Any of these you add will eliminate some of your viewers. Java Script should be the third thing you learn. Java Script is a limited subset of Java/.Net. It is relatively simple, but Turing complete (that means it can be used for anyting, if you are creative enough.) Don't go hog wild with Java Script. This is where the whiz-bang effect come from. They are a distraction. But you should learn Java Script. Look after a while at using the HTML5 Canvas. It will use Java Script. It will also allow you to do anything that Flash or Silverlight can do. (Silverlight is Microsoft's version of Adobe Flash. It's supposed to be safer than flash, possibly easier to use, but those are both relative terms.) Start with easy projects, and grow from there. Look at the free Java Script libraries. A lot of the things you might wish you knew how to do have already been done. If you want to be a professional, you might want to look at some paid libraries also. But, whichever you do, respect the wishes of the Authors. Look in the copyright terms and licenses for that informations.

Justin James
Justin James

The steps you take are the same no matter what, the topics vary based on your goals. In a nutshell, do some research to find out what skills are needed, and do a lot of projects and self-study using those skills. Do projects by yourself, volunteer for open source projects, volunteer to work at charities, or work for free at a place... it doesn't matter, but go get some real world, hands on experience. J.Ja

mwclarke1
mwclarke1

HTML5 is great, but really, need to trash the CSS, java script and flash, over use of frames and tables, etc. I see more app development using ruby/rails There is so much crape coded on websites these days, much due to browser compatibility due to lack of following proper standards that is really causing web sites to feel like the days of dial-up again!!!! Yes, there are standards, World Wide Web Consortium (W3C), other than Microsofts way. Ditch the .net and learn real web development.

sorormk
sorormk

"Can you explain why it is horrifying? Is there any murky downside to HTML 5 that I dont know of? " More ways and protocols to connect to servers and more direct browser objects CPU processing is creating new security challenges both on browser and web frameworks development. For instance accessing 3D hardware acceleration from the browser will allow direct access from browsers objects (such as video streaming, dynamic image rendering, or HTML5 canvas drawings and games) to GPU through WebGL and DirectX 2D and 3D acceleration APIs. This alone will seduce hackers to try new attacks through exploiting memory and object management vulnerability directly accessing CPU and GPU. The following blog post might give you more insight: http://www.esecurityplanet.com/features/article.php/3916381/Top-5-Security-Threats-in-HTML5.htm

Justin James
Justin James

The fundamental issue is that HTML as an app system spec is a HUGE piece. HTML as a doc spec could be small, lean, and lightweight. The ability to write actual *documents* in HTML (the overwhelming use of it...) is being downgraded and ignored in favor of the whizz-bang app stuff. I'd like to see HTML split into two specs, a lightweight, document system, and an Internet application framework. Indeed, I'd work it so that the document aspects are just one piece of the puzzle, like how CSS is. J.Ja

vladdracula
vladdracula

"...HTML 5 "standard"??? I just had one of my students attempt to implement a web app that could be run on any platform..." If you want the job done right, or you need opinion that matters - ask a professional, not a person who just starts (a student). Does not matter how intelligent and smart is the guy - a professional with experience has better approach even for new technologies.

mindilator
mindilator

you should let your students know about the Modernizr.js library. http://diveintohtml5.org/detect.html http://www.modernizr.com/ because you still need to employ the progressive enhancement techniques that us skilled flash developers use to enable deeplinking and seo. you need to teach your students the principle of failing gracefully, and modernizr helps a lot. you still need to know javascript to take full advantage of HTML5. once you use it to detect functionality, you use it to produce for that functionality (e.g., the canvas tag and drawing). all it's really lacking is a good GUI dev tool, and Adobe is working on that (see their Edge product in Labs). i'm not surprised your student had to use complex js code, but i have to wonder if that code was more complex than just using modernizr and failing gracefully for platforms that lack support.

Justin James
Justin James

The HTML5 spec is still being worked on, one of the big parts of that is reconciling the differences between different implementations. Someone *is* making "all the players sit down and hammer out a truly platform-independent standard." That's the HTML Working Group, where all of the major players are participating to write the spec. J.Ja

mwclarke1
mwclarke1

There are already standards, if all would just follow them instead of being a rouge player (Microsoft !) World Wide Web Consortium (W3C)

klaasvanbe
klaasvanbe

A long time ago (in ICT some twenty years is a long time) someone (unfortunately my memory is horrible, that's just one of the bazillion reasons to use a computer) said something along the lines of: "The problem with standards is there are too many choices" Platform independence is where social media (Web 2.0+) are all about. HTML5 helps a lot, but we still have a road ahead to walk and/or drive. Cheers and kudos to all of us, Apple, M$ and all other users!

mattohare
mattohare

I even still have the t-shirt for the rollout of IE3 and wear it out now and again. The thing is, people that stay on really old versions have to know that the trade-off is not getting some current or even old features.

Justin James
Justin James

IE 6 will NEVER get updated to support anything new. Even Microsoft has stopped supporting IE 6 in their apps, although it is still maintained for security reasons. I'm usually a big proponent of backwards compatibility, but IE 6 is now a small enough market, and anyone still on it has got to know better, that few people care to take it into account anymore. IE 7 and IE 8, though, are a different story... J.Ja

Justin James
Justin James

I talked about this a bit in my news piece recently (http://www.techrepublic.com/blog/programming-and-development/windows-8-native-apps-and-html5-facts-and-conjecture/4313). The details are hazy, but it looks like Windows 8 is now pushing an HTML5-based application system pretty hard. The details will be announced at the BUILD event, so there's a lot of speculation, but looking at the Windows 8 plans, it may be critical for developers (especially of tablet apps) to be familiar with, like WPF is now. J.Ja

Dethpod
Dethpod

I would imagine that would be the way you do things. Correct?

Ternarybit
Ternarybit

Seriously? Ditching ASP.NET, I am totally in agreement with. Session state, the abuse of the ajax client library, machine state, etc are absurd in a modern web context. That being said, if you really understood what the platform you're pimping did behind the scenes, you'd ditch it too. It's obvious you're biased towards apple tech and certainly don't understand the first thing about .NET development. Of course, none of that matters to *you* because in your world, you add supastandardhtml (which is probably non-compliant because you used superxhtmlcompliancychecker.com and were told you were good) and copypasta'd javascript, point it at a restful service and it's magic. For me and mine, it'll still be JSF and MVC framework. The fact of the matter is, developing for most frameworks (save WebSphere\Portlet spec technologies and old tech like struts) is basically the same. I want to write a custom httphandler in .NET, I override the httphandler class. I want to write a custom httphandler in ruby, I override the httphandler class. Or in both, just use the generic control-based method of micromanaging the request/response stream. Ruby, jsp, struts, servlets, asp.net, it's all basically the same. There's nothing really special about RoR aside from the arbitrary, primitive language that has about the same readability as visual basic when you get down into dynamic/generic constructs. A standard should be a baseline, not a ceiling. You'd do well to learn that. I think the following says all anyone needs to know about you: "HTML5 is great, but really, need to trash the CSS, java script and flash, over use of frames and tables...causing web sites to feel like the days of dial-up again!!!!" Your words read like someone who doesn't have the foggiest idea what he's talking about, but is really hoping someone will take him seriously because he doth froth vehemently.

Justin James
Justin James

Just because someone uses Ruby on Rails does not mean that the HTML will be good, just as using .NET does not mean that the HTML are bad. The standards that you mention are 100% separate from whatever technology you use on the backend. That's like blaming Microsoft Word for someone's poorly written novel. J.Ja

YetAnotherBob
YetAnotherBob

HTML as a document specification is done. I find XHTML with CSS to be all I need to write a document that is as good as those produced with a word processor. The HTML5 Specification just needs to keep what is already there. I don't believe that they are throwing away any important parts of the HTML specification.

jeffrey.denenberg
jeffrey.denenberg

Klass, It was Prof. Tannenbaum in his great text on Computer Networks who wrote; "The great thing about standards is that there are so many to choose from". JeffD

daboochmeister
daboochmeister

Agreed, if you're a Windows developer, you really need to learn HTML5 ... but you didn't frame this discussion as "A Windows Developer's Learning Plan for HTML5" - I would think that the advent of HTML5, which is fundamentally cross-platform, would be the time that developers should think about becoming cross-platform in their development approach and learning plan. I'm just saying, it would be an interesting article to see that discussed. Or maybe your intended audience really was Windows developers ... and I missed where that was said <shrug>.

mindilator
mindilator

HTML5 is being pushed as the preferred tech for new app building. Chrome apps are HTML5, Adobe is working on a Flash-like GUI for animating in HTML5, Android/iPhone/iPad apps are able to be made in HTML5. If it's valuable to write once/deploy everywhere, and HTML5 offers enough power, then the article is right on.

Justin James
Justin James

... but the recent activity around Windows 8 means that there are good reasons even for non-Web developers to be learning this stuff. J.Ja

Editor's Picks