Advertisement
HTML & CSS

HTML5 Apps: What, Why, and How

by

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.

  1. 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.
  2. 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!


About the Author

Alex Kessinger is a front-end web developer who currently works for Yahoo!

Related Posts
  • Code
    HTML5
    HTML5: Vibration APIPdl54 preview image@2x
    HTML5 has been a breath of fresh air for the web, which hasn't only affected the web as we know it. HTML5 provides a number of APIs that enable developers to create interactive websites and improve the user experience on mobile devices. In this article, we'll take a closer look at the Vibration API.Read More…
  • Code
    HTML5
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    HTML/CSS
    The Truth About Multiple H1 Tags in the HTML5 EraH1 retina
    Whether you're a webmaster or a web designer, there's a question you've most likely either asked or answered many times over the years. That question is, "How many <h1> tags can I use per page, and how exactly should I implement them?"Read More…
  • Computer Skills
    OS X
    50 Things You Probably Didn't Know About OS X MavericksMavericks400
    Mavericks, the latest major release of OS X (pronounced Oh-Es Ten), is version 10.9 of Apple’s desktop operating system. With, reportedly, over 200 new features Mavericks is no incremental update. Jonny Ive might suggest that “Apple has reimagined the operating system for the desktop”, but the truth is Apple has incorporated some of the best ideas from third-party developers and has sought to integrate some of the features of iOS (the operating system for the iPod Touch, iPhone and iPad) into it’s desktop big brother.Read More…
  • Code
    Articles
    Interview With Bruce Lawson of OperaBlawsonretina
    There's a perception that being in developer relations for a browser maker is all glamor and glitz involving lots of jet setting and rockstar-like experiences. So far I haven't personally found that to be the case but in looking at the life of Opera evangelist Bruce Lawson, I think he may be fitting that description.Read More…
  • Code
    Firefox OS
    Preparing for Firefox OSFirefox preview retina
    Firefox OS is an entire mobile operating system built around open web technologies! The OS has been built from the ground up to allow HTML5 and Javascript to unleash the full potential of the device hardware. Read on to learn more about Firefox OS and how you can start porting your existing web apps to the platform today!Read More…