As CIOs and IT managers, we are always dealing with evolving technologies. The enterprise world is constantly changing as well, and our workforce is dead set on going mobile. Why fight the tide?
Fortunately, HTML5 is ready to answer the call. While the cross-platform markup language won't be finalized by the W3C until 2014 there are significant reasons to get the bandwagon now.
The fifth revision of the HTML standard has become bigger than the sum of its most recent enhancements. What most people refer to when they say HTML5 is actually a collection of technologies-HTML, CSS and JavaScript.
[ Experts explain all key HTML5 specs, from canvas to local storage, plus the latest browser benchmarks and report cards on HTML5 support in InfoWorld's megaguide to HTML5. Download the PDF today! | Keep up with the latest developer news with InfoWorld's Developer World newsletter. ]
Making Web apps behave like client apps
HTML has long been the standard for building and deploying Web content. Now it appears that this technology is on its way to being the standard for building and deploying apps as well. The newest iteration represents a shift towards client-side Web development. Such a shift will benefit you for four reasons:
- It provides an open architecture to build upon, since HTML, CSS and JavaScript are all free.
- Since HTML5 runs very well on all manner of devices, it offers cross-platform programming-which is huge for all of us overrun with BYOD requests.
- In addition, HTML5 was built with battery-powered tablets and smartphones in mind.
- Finally, HTML5 provides lighter, easier-to-read code than previous iterations.
Your mobile workforce and customers want to do everything they do on their desktop PCs on their smartphones and tablets-and HTML5 is the way to start manifesting that experience. With that in mind, let's take a look at eight HTML5 tips you should keep in mind as you build your websites and Web applications.
1. Video and audio integration
Flash is buggy, requires plug-ins, has frequent updates and gobbles up power on mobile devices. Steve Jobs let us know it, and Adobe rang the bell. Flash is going away on mobile devices-no more Embed or Object tags.
Let's roll in the new era of Video and Audio tags, which were designed to have the ease of use of the familiar Image tag. If you know how to create HTML code and are familiar with JavaScript, then you should be all set to use these HTML5 media elements:
- Video: Used to render video content.
- Audio: Used to define sound content.
- Embed: Used to insert, or embed, some type of multimedia content.
- Track: Defines text tracks for video and audio tags.
- Canvas: Allows for rendering of games, graphs and other visual images on the fly.
This technology allows developers to flex their HTML, CSS and JavaScript skills instead of using Flash or Silverlight. The Video and Audio tags perform better, too, which results in smoother playbacks and better power consumption, not to mention playback across all platforms. Finally, built-in support for captions and subtitles makes adding video and audio elements to a website easier than ever before.
2. Semantics
Many Web presentation elements have been made obsolete by Cascading Style Sheets, which stole their thunder long ago. While HTML5 will still render these items, you really should have shifted away from them years ago. If frame elements are no more in the HTML5 spec, though, then what we are left with to replace them?
Enter HTML5 semantics, which are carefully designed to extend the current capabilities of HTML while still enabling users of legacy browsers to access your content. These shouldn't be thought of as simply features you may or may not use, but, rather, the foundations upon which you build Web apps and pages. These semantic elements enhance the user experience and touch several areas, including search, accessibility, interoperability and internationalization.
It doesn't take a genius to figure out how, or why, these are important changes. A correctly coded page should have page title and posting info in its Header tag, with the article body falling inside Article tags. Items such as social buttons or follow-up items appear in the footer. Put another way-no more search algorithms or guesswork in determining what type of content goes where. The end result is simply a better user experience.
3. Web accessibility initiative -- accessible rich Internet applications (WAI-ARIA)
Currently certain portions of your site remain unavailable to people with disabilities, including the blind and those people unable to use a mouse. HTML5 tackles this problem by defining functionality to be used with current assistive technology.
W3C's WAI-ARIA provides a framework for adding attribute identifiers or roles to the different elements of your HTML code. Some of these roles will be built-in, and Web authors will not be able to override them. These identifiers mark common regions on the page -- such as Title, Header, Footer and Nav --and provide a more effective way to present your information to a wider audience than their predecessor, the tag.
Let's take a closer look at what this technical spec brings to the table:
- Role types for widgets, including TreeItem, Menu Slider and ProgressMaster.
- Properties that define a widget's state.
- Properties that define the more active regions of a Web page.
- Drag-and-drop functionality properties that also describe targets.
- Better keyboard navigation
Meanwhile, additional HTML5 page structure elements include the following:
- Section: Used for article or subject differentiation or to separate different parts of an article.
- Article: Defines the body of an article.
- Aside: Defines content that is relevant, but not central, to the flow of an article.
- Time: Lets users define time values in both human- and machine-readable formats.
- Menu: Typically used for context menu building, this represents a list of commands.
- Hgroup: Wraps multiple headings in one place.
- Figure: Creates a figure as a single item. Normally, this would be an image or group of images.
- Figcaption: Hold a caption for a figure.
- Cite: Represents the title of a piece of content, whether it's a book, article or essay.
- Progress: Represents how much progress has been made on a particular task.
- Details: Creates accordion-like effects that are activated when clicked.
4. WebSockets
Remember when Ajax and Web 2.0 were all the rage? Well, here comes WebSockets. This inclusion allows developers to talk to the server without multiple Ajax requests, thanks to PUSH technology.
Ajax typically uses HTTP to communicate-as is reflected in its full name, Asynchronous Javascript and XMLHttpRequest-and the client and server connection must be reestablished each time you want to refresh data. WebSockets, on the otherhand, creates a persistent, two-way connection to the server. This results in more efficient communication, not to mention a faster, lighter app.
While WebSockets is still in the W3C's standardization process, several browsers, including Chrome and Safari, already support it.
5. Web Storage
Who wouldn't want to mimic the client application experience within the browser? Web Storage is a big part of W3C's plan to do just that. Web Storage can be thought of as a more advanced cookie or client-side database. It has a much higher storage capacity than your average cookie, up to 10 MB, and it is stored on the client side.
There are two types of Web Storage: session and local. The LocalStorage API makes apps possible without third party plug-ins. It consists of key value pairs that can be stored and retrieved from your browser, go right to the hard disk and are stored indefinitely. It's very similar to a client-side database, in the sense that it can't be deleted or cleared. In fact, data will be stored even after the browser is closed.
Session data, on the other hand, is stored in the Http session and is tied to the life of the session. When you close the browser, the data is gone.
Both types of Web Storage use the same basic API and are supported by most current browsers. Together, they make several Web application features easy to pull off, including storing user information, caching data and loading the user's previous application state.
6. Geolocation API, or Web-GL
Want to know where your customers are? With the Geolocation API, you can use JavaScript to define objects that grab geographical data to determine where a device is being used. (Admittedly, this API isn't technically part of HTML5, though it is a great addition to the modern-day browser.)
Previously, geolocation apps were native to particular devices. Here's where HTML5 comes into play, as it brings with it the ability to include geolocation capabilities in most Web applications. Data sources can include GPS, GSM/CDMA Cellular IDs, IP addresses, Wi-Fi, Bluetooth, Mac addresses and old-fashioned user input.
The Geolocation API can add necessary filtering to your search queries. Whether a user is on a mobile or desktop device, the Internet will know where the user is and display relevant, location-based results. It isn't perfect, as there are occasional errors, but geolocation technology will only get better with time -- and the applications for this API are endless.
7. Cleaner code
Coming from a development background, I can tell you that the average developer is very passionate about clean, simple code. Code should be short, concise and as descriptive as possible. HTML5's clear, semantic and descriptive code separates style and content very easily, which makes code cleaner and easier to digest.
It's also worth mentioning the simplified doctype. Not a big deal, you may say. True enough, but I'm a fan of cleaner code, and I love the fact that I no longer need to use a long, unintelligible piece of code filled with different doctype attributes.
< !DOCTYPE html >
That says it all. Furthermore, sites that rely heavily on Flash today will see SEO improvements tomorrow, as their cleaner code is made more digestible to search crawlers.
This video tutorial from Nettuts+ shows some additional benefits of cleaner HTML5 code:
8. Better website interactions
A good website lets users interact, not just stare and read. With the Canvas tag, you can create interactive and animated creations that had been previously relegated to Flash. That, along with HTML5's ability to recognize common tablet gestures like swipes and pinching to zoom, sounds a lot more interactive to me -- and even lets you create mobile-friendly games
HTML5 helps you "build once, run anywhere"
HTML5 seems like the straightest distance between two points and, therefore, the easiest way to improve customer experience in the mobile world. If you build to its standards, you can ensure a great mobile user experience with the newest devices while making sure that older devices aren't denied your content.
"Build once, run anywhere" is the main reason I choose to develop with HTML5. No more designing three apps for three different platforms. If you're worried that some browsers aren't supporting these features, you can still be using these elements with one of the many libraries and scripts available, including Remy's Shiv or Modernizr.
Companies and brands that utilize this technology will have the necessary tools to create positive brand awareness via rich Web content within an app-like experience. This, in turn, will increase traffic and conversions.
At the end of the day, with the mobile market revolution growing at a staggering pace and no sign of slowing down, the question is simple: Why not embrace HTML5?
Last thoughts: HTML5 Elements and APIs Quick View
HTML5 Form Elements
- Datalist: Creates a ComboBox that allows for predefined and undefined inputs.
- Keygen: This is a key pair generator control. When a user submits a form, the private key is stored locally, while the public key goes to the server.
- Output: Renders the result of a calculation.
HTML5 related APIs
Richard Hein is a writer, editor and web developer with more than 15 years in the Web development field. In that time he has covered the gamut of different Web technologies on various Internet.com sites. Hien's hobbies include boxing, MMA, scuba diving, reading and motorcycles. As a freelance writer, his goal is to help CIOs and other IT leadership make informed decisions regarding the different Web technologies available to them. Hein always welcomes your feedback. You can connect with him via LinkedIn or email.
Follow everything from CIO.com on Twitter @CIOonline, on Facebook, and on Google +.
Read more about Web services in CIO's Web Services Drilldown.
This story, "8 reasons to gear up for HTML5 now" was originally published by CIO.