HTML5 Apps: What, Why, and How – Blancer.com Tutorials and projects

If you want to build web apps, you might want to think about using HTML5. HTML5 is the new hotness when it comes to app development, and it has the potential to change the way software is made and sold. It also activates the millions of people out there who know how to make web pages, and never thought their skill set could be used for something else. But before jumping into development, there are some things you should know about HTML5. In this tutorial, I’ll teach you the basics!

What is HTML5?

HTML5 is a W3C spec in the making.

It started at WHATWG, and is the future gold standard for HTML. If you have been around for awhile, you many know that XHTML 2 was the next major version, but that fell apart. The reasons are varied, but one main point of contention was that few websites use perfect syntax, and XHTML 2 was going to enforce perfect syntax. It has also always been extremely hard to say exactly what perfect syntax is. When the browser vendors realized how hard it was going to be to make the switch to XHTML 2, things just broke down.

At that point a bunch of people broke away from the W3C and started the WHATWG. These guys wanted to rethink not just HTML, but the whole standards making process. They started work on a new HTML5 standard. They operated from the principal that there is no perfect, and it’s not their job to tell the world how to do HTML. Instead they focused on looking at what was happening in the real world of HTML.

They also took the time to codify some conventions that sprung up in the community. That is where a lot of the new elements in the HTML5 spec (like the progress bar, video, and audio tags) came from. People have been making due, and they just wanted to make specific pieces of markup to help people do what they have already been doing.

Besides just markup, the WHATWG started creating some new JavaScript APIs. This is where HTML5 started to look “app”-like. They created standards for offline data storage, and an offline application cache, so that whole apps could be stored offline. They also started new working groups around widgets and device access (for using devices like cameras and accelerometers).

An interesting side note to the whole standards process is this: for awhile the differences in rendering engines were so great that one approach to be cross-browser compliant was to sniff which browser the user was on and deliver a different experience based on that.

The WHATWG and others always thought that browser sniffing wasn’t such a good idea. What is commonly recommend now is progressive enhancement. In a nutshell, progressive enhancement is this. Instead of just deciding that one browser would get experience Y and another would get experience Z, why not detect advanced feature support and build up to a great experience? If, at any point, the browser doesn’t support advanced feature X, the user would just get the default experience.

The Last Numbered Spec

This leads to another point about the HTML5 spec: it will probably be the last numbered spec. In the future, instead of revving HTML versions, like HTML6, the W3C will just maintain the latest version of HTML, and there will be a gold standards spec. Web developers can use progressive enhancement to handle the fragmentation, while waiting for browser vendors to catch-up to the spec.

So What are HTML5 Apps?

With HTML5 defined, what is an HTML5 app?

Essentially, a HTML5 app uses all the shiny, new pieces of the HTML5 draft to create an app-like experience.

This means storing data offline, being functional, and acting like a real app instead of just being content for perusal. You probably use web apps now, like Gmail. Gmail actually has an HTML5 version; if you visit Gmail on an iPhone or iPad, you can check it out.

Why Should I Use HTML5?

Why would I want to use HTML5 instead of Objective-C, Flash, Silverlight, or some other kind of device-specific environment? First, there are a couple reason not to use HTML5.

If I was making the latest, greatest 3D shoot-em-up, I would not use HTML5. It just doesn’t have the rich graphics libraries needed to make intense games like those; however, they are working on standards to allow 3D graphics programs into the browser.
If you need to use the camera on devices, or local files system, HTML5 would not be the best choice. There are workarounds, using a native wrapper, which I will discuss shortly, and there are also some standards coming that will help with that.

While there are specific cases for not using HTML5, many apps that get produced today for iOS and Android could work just as easily in HTML5. Besides just technically being able to do it, there are other good reasons to use HTML5.

You Already Know How to Use It

Right now, if you are a web developer, you have all the tools you need to get into this. HTML5 app development is only little more then changing how you think about webpages. In some instances you can just add a few lines to your HTML, and add some stuff on your server and you will have a full, working, offline HTML5 app.

The more we work with standards, the more useful they become.

Besides, web developers already understand cross-browser problems. While there will be more cross-browser issues than ever, web developers have a distinct advantage over other kinds of developers, because they already have this in their pocket. The other part of cross-browser development is standards. The more we work with standards, the more useful they become. Web developers have led the charge in some respect, and now it’s paying off. Instead of having to learn a whole other non-standards-compliant add-on, you can simply rely on what standards bodies have been working towards.

Finally, when it comes to writing code, it can be difficult to see that you might also be doing something political.

When you look at how a handset manufacturer handles itself, and how it chooses to lock in its developers, by choosing to work outside that system you are supporting the notion of freedom.

It’s a small notion, but it matters, because in the long run we want our handset developers to be open, and let us hack on them as much as we want.

How can I use HTML5?

Actually using HTML5 isn’t that hard. It can range from a couple lines of code, to writing a whole new app. Here are a few ways to get started.

1. Create a Mobile Friendly Website

Many websites are only a few tweaks away from a friendlier mobile experience. The first thing to do is take a look at the viewport.

<html>
    <head>
        <meta name="viewport" content="user-scalable=no, width=device-width"/>
    </head>

The viewport meta tag is not a standard yet, but it is a widely accepted convention. Many mobile browsers use this tag to setup certain aspects of web page rendering.

More info on viewport, check out the following documentation:

Besides just the viewport, make sure that your webpages are flexible; for example, use dynamic widths, instead of static widths. Mobile devices are all shapes and sizes, just like browser windows. Designing with the idea of flexibility in mind will automatically make your web pages more mobile-friendly.

The Doctype

A great little tidbit about the next version of HTML5 is this: the doctype went the way of the dodo. It still has to be there, because of many reasons, but it’s been shriveled to mean almost nothing.

<!DOCTYPE html>

This is awesome. No longer do we have to copy and paste a long string of text, because who can remember that thing, anyway?

2. Take Your Website Offline

Some browsers now implement the application cache. The application cache allows you to tell the browser in advance what resources a web page will need offline. The browser will then download those files for offline usage. When the client goes offline the browser will refer to those cached resources.

The application cache isn’t something that you can do by just changing your markup, though. You will need the ability to change the content-type headers on the server. To do that in Apache, you can either put this in a configuration file, or in a .htaccess file.

AddType text/cache-manifest manifest

Once you do that, you can add the following markup to your html element in your webpage. You can call your manifest anything you want, but make sure it’s at the root of your site, and it ends with a .manifest.

<html manifest="my.manifest">

Then, you can create your manifest file. Simply list all the pieces you will need while you are offline. You can’t put cross-domain files here and you won’t want to list anything that changes often. Here is an example manifest file.

CACHE MANIFEST

# Version 1

my.html
my.css
my.js
my.png

When you have this all setup, check it out in a browser that supports the application cache.

If you need to update a resource, just change the manifest file. Even adding a comment will prompt the browser to update the application cache.

The application cache is notoriously hard to debug. This book has some good methods for checking your application cache status.

3. Make Your Videos Accessible Everywhere

If you host video content on your site, and use a flash player to play it, you’re missing out on an opportunity to display video to people using the iOS devices and phones that don’t support flash (which is most phones).

HTML5 has two new tags that make displaying multimedia easier: audio and video. Here is an example video tag.

<video src="myvideo.mp4" controls />

Now, if you want to support as many browsers as possible, you will need to encode your content in a couple different formats. Then, list them like so.

<video poster="myvideo.jpg" controls>
    <source src="myvideo.m4v" type="video/mp4" />
    <source src="myvideo.ogg" type="video/ogg" />
    <embed src="/to/my/video/player"></embed>
</video>

This makes sure that your content can be seen in Firefox, Safari, Chrome, and mobile phones. Finally, for browsers that don’t support the video tag, you can still fallback to a flash player. When a browser doesn’t support a tag, it will usually just not deal with it, and continue recursing till it finds a tag it does know. In this fashion, if you put the embed or object inside the video tag, a browser like IE will use the object. However, a browser that supports the video tag will ignore the embedded flash.

Conclusion: Start Using HTML5 Tags Today

Tags like header, footer, nav, aside, article, and section are nice because they are semantic. They inform webpage consumers a little bit about your intentions for your content. It’s nice to use them. In the future, they will be more helpful than they are now, but there is nothing to stop you from using them today.

Some browsers, like IE, will “freak out” if you use these new tags, but don’t worry. IE does support adding tag types to the DOM, you just need to inform IE about them. To fix this, Remy Sharp created the HTML5 Shiv. If you include this in the head of your webpage, in an IE conditional comment, your page will render just fine.

Now you are using semantically useful HTML!

Bonus: Sell your Apps in an App Store

Yes, right now, you can take your HTML5 apps and sell them on the mobile app stores. Two projects are helping people develop “native” mobile apps, using nothing more then HTML, JavaScript, and CSS. Check these out:

Alternatively, our very own CodeCanyon, within the next month, will be launching a new category for HTML5 apps. In this category, we’ll be selling everything from advanced and custom video players, to libraries, to presentation apps.

To prepare for the category, we’ve launched a competition with $7000 worth of prizes. You have two weeks left to enter, if that interests you!

Wrapping Up

There should be nothing stopping you from exploring HTML5, and if you wanted to be ahead of the game, you should be building HTML5 apps right now. Thanks for reading!