Introduction to HTML5 for Mobile App Development

The tag is much simpler than we formerly saw in HTML. The tag instructs the browser to run in standards-compliant mode.

The tag with the http-equiv attribute instructs the browser to use the most recent version of the HTML engine in the browser. In addition, if the user has the Google Chrome Frame plug-in installed, the Chrome Frame engine is used in Internet Explorer (IE). (See the sidebar "Author's Notes" at the end of this article for more information about Chrome Frame.)

The code download includes a set of jQuery and jQuery Mobile CSS and JavaScript libraries. Although use of these libraries is clearly not a strict requirement for HTML5, they will be used to hook into the HTML5 page and provide features that will make development easier.

The tag does not have the type or language attribute. These attributes are not required for HTML5. There is a new attribute for the <script/> tag named async. The async attribute allows for the script to be executed asynchronously, or not.</li><li>The jquery.tmpl.min.js and Google maps files are used for their templating capabilities and are not a requirement for HTML5.</li><li>Modernizr-2.0.6.js contains the Modernizr development library. Modernizr (modernizr.com) is a JavaScript library that makes development much easier and simpler when testing browsers as well as when building HTML5 apps. (See Dan Wahlin's article "<a href="https://www.itprotoday.com/article/html5/html5-css3-modernizr-141350" target="_blank">HTML5 and CSS3 Feature Detection with Modernizr</a>" for more information about Modernizr.)</li><li>Within the <body/> tag, there are additional content sections. These include the <header/>, <section/>, <article/>, <footer/>, and other tags. These tags allow for a page to be divided into logical sections that can provide additional information to a page.</li></ul><p><strong><em>Multimedia tags.</em></strong> The most discussed, and controversial, feature in HTML5 is its support for video, which is provided by the <video/> and <audio/> tags. Before these tags existed, developers had to opt for building Rich Internet Application (RIA) type of solutions that may have included Silverlight and Flash to get support for audio and video.</p><p>Let's look at the <audio/> tag first. The <audio/> tag offers developers a standardized way to provide audio to web applications. The following example shows how to use the <audio/> tag:</p><pre class="brush: text"><audio controls="controls" preload="none" title="HTML5 Audio Example"><source src="@Href("~")Content/HTML5.mp3" type="audio/mpeg" /></audio></pre><p>As you can see, the <source/> tag indicates that HTML5 supports the .mp3 file type. Various file types can be specified in the <source/> tag (e.g., .ogg).</p><p>HTML5's <video/> tag provides video support. There is a major difference between audio and video in the browser world. With audio, MP3 has widespread support among the various browsers that developers will encounter. There's no equivalent "default" video format in the marketplace. Figure 2 shows a short example that uses the <video/> tag.</p><p>Just as the <audio/> tag does for audio, the <video/> tag provides the basic infrastructure for supporting video. The biggest problem with the <video/> tag is the lack of agreement by major vendors on which formats they support. I won't bore you with the details of this ongoing disagreement. But as you can see in the example in Figure 2, you can specify a number of different formats via the <source/> tag.</p><p>The biggest problem for developers will be creating the video files in the necessary formats for display to users. And in addition to creating and specifying the file formats, developers will need to be careful with the MIME types that are loaded and set up on the server. The installation of Microsoft IIS 7.5 that I used needed to be configured to send these files to the user, so you will most likely need to set up these features. In my example, I set up the necessary MIME types by adding the entries shown in Figure 3 to the web.config file. I've found two tools very helpful in creating the video in the necessary format: <a href="https://firefogg.org/" target="_blank">Firefogg</a> and <a href="https://handbrake.fr/" target="_blank">HandBrake</a>.</p><p>Both the <audio/> and <video/> tags and the browsers that support them provide support for JavaScript methods and events. Some of these methods and events can be used to start playing the multimedia, pause the multimedia, handle the multimedia finishing, and initiate numerous other changes and events.</p><p><strong><em>Input tags and attributes.</em></strong> We've had the same set of input tags in HTML for many years. These include <input/>, <select/>, <form/>, and others. These tags have served us well. We've learned over the past few years that there are numerous user input scenarios that we can optimize. For example, how many times have you used a text field to allow the user to input a phone number? You may have had to use some logic to limit the input to numbers or another similar form. It would be nice if we had a tag that was optimized for a phone number. HTML5 provides this along with other new input types. The following examples demonstrate how to use HTML5 input tags:</p><pre class="brush: text"><input id="phone" name="phone" type="tel" placeholder="Phone"/><input id="email" name="email" type="email" placeholder="Email" autocapitalize="off" /></pre><p>For a desktop web browser, this may not be a big deal, but for a mobile user, the tel and email input types can be a godsend. The tel type is used as a hint to the browser to open a keyboard that is optimized for phone input, like the one shown in Figure 4. This keyboard will handle primarily numeric input. The email type will result in a keyboard being opened that is optimized for inputting an email address.</p><figure class="captioned-image caption-none"><img alt="Figure 4: Keyboard for the input type tel in the Android browser running in the emulator" src="https://cet.informabi.com/sites/devproconnections.com/files/uploads/2013/09/McClure%20DCM380%20Fig%204.jpg" style="width: 361px; height: 600px; border-width: 1px; border-style: solid;" title="Figure 4: Keyboard for the input type tel in the Android browser running in the emulator"><figcaption class="image-description">Figure 4: Keyboard for the input type tel in the Android browser running in the emulator</figcaption></figure><p><span class="contentimage" style="width: 181px;">I'm sure that developers are now thinking, "This is great, but what happens when I run this on IE8 or another browser that doesn't support these new input types?" Thankfully, when a browser, such as an old version of IE or Firefox, encounters an input type that it does not understand, the browser will display the input tag as a text field. This allows a developer to start using these new input types and still have backward compatibility with existing browsers. Note that I've covered only a few of the input types. HTML5 provides more input types to handle dates, numbers, and other types of input data. </span></p><p><span class="contentimage" style="width: 181px;">In addition to new input types, numerous new attributes are available. Two new attributes worth mentioning here are placeholder and autocomplete attributes. The placeholder attribute allows for text to be placed within a TextField class as a watermark, as shown in Figure 5.</span></p><figure class="captioned-image caption-none"><img alt="Figure 5: Placeholders in the Android browser" src="https://cet.informabi.com/sites/devproconnections.com/files/uploads/2013/09/McClure%20DCM380%20Fig%205.jpg" style="width: 283px; height: 469px; border-width: 1px; border-style: solid;" title="Figure 5: Placeholders in the Android browser"><figcaption class="image-description">Figure 5: Placeholders in the Android browser</figcaption></figure><p><span class="contentimage" style="width: 181px;"><span class="contentimage" style="width: 181px;">The content in the watermark is not stored as input, it is merely displayed. This capability can be used to display helpful information to the user without taking up valuable screen real estate. For example, the downloadable code examples I've provided include a user registration sample, in which a test is performed on the page-ready event. In this test, if the browser supports the placeholder attribute, the textual explanations for the input fields are turned off, and instead a placeholder is used to provide the user with information regarding the TextField while conserving on-screen space, which is at a premium in a mobile device. The autocomplete attribute can be used to turn off the browser's auto-completion help. </span></span></p><p><span class="contentimage" style="width: 181px;">Two additional attributes, though not part of the official HTML5 specification, are useful in the mobile world with the iPhone and Android. The first, the autocorrect attribute, can be used to turn on/off auto-correction. This can be helpful depending on how users feel about auto-correction. The second, the autocapitalize attribute, can be handy when inputting proper names. The following example shows how to use these attributes.</span></p><pre class="brush: text"><span class="contentimage" style="width: 181px;"><input id="firstName" name="firstName" type="text" placeholder="First Name"autocorrect="off" autocapitalize="on" autocomplete="off" autofocus="true" /></span></pre><p><span class="contentimage" style="width: 181px;">There are more new tags and attributes in the HTML5 specification. You can find a <a href="https://dev.w3.org/html5/spec/Overview.html" target="_blank">larger listing of the tags here</a>. </span></p><h3><span class="contentimage" style="width: 181px;">JavaScript </span></h3><p><span class="contentimage" style="width: 181px;">HTML5 includes a number of new JavaScript methods and JavaScript support for HTML5 tags and features. There are a number of new methods for supporting <audio/>, <video/>, and other supported features. Let's look at some of them. </span></p><p><span class="contentimage" style="width: 181px;"><strong><em>Geolocation.</em></strong> Although geolocation support is not an official part of the HTML5 specification, it's hard to overlook it. For the purposes of this article, we'll consider it a part of HTML5. With geolocation, it's possible for a browser to request the location information from the underlying operating system. This occurs by performing the following steps: </span></p><ol><li><span class="contentimage" style="width: 181px;">A browser check is performed to verify that the browser supports geolocation. In the example in Figure 6, the check is performed using the Modernizr library. </span></li><li><span class="contentimage" style="width: 181px;">The getCurrentPosition method is called with the three parameters. The first parameter is required, and the second two are optional. </span><span class="contentimage" style="width: 181px;">&nbsp;&nbsp;&nbsp;&nbsp;</span><br><p><span class="contentimage" style="width: 181px;">a. The first parameter is a callback on success. This callback will be called when the geolocation value is determined. </span></p><p><span class="contentimage" style="width: 181px;">b. The second parameter is a callback on error. This callback method happens when there is an error determining the user location. </span></p><p><span class="contentimage" style="width: 181px;">c. The third parameter is options that can be passed in. In this example, enableHighAccuracy is turned on.</span></p></li><li><span class="contentimage" style="width: 181px;">The web browser will ask the user if they want to provide the web app access to the user's location information. </span></li><li><span class="contentimage" style="width: 181px;">&nbsp;In this example, a map point of the user's location is displayed on a map. </span></li><li><span class="contentimage" style="width: 181px;">In this example, the watchPosition method is used to display location updates. </span></li><li><span class="contentimage" style="width: 181px;">Though not shown, the timeout and maximumAge options can be used. The timeout option is the maximum time allowed for obtaining the location. The maximumAge option is used to determine how many milliseconds to cache the location. </span></li></ol><p><span class="contentimage" style="width: 181px;">Figure 7 displays the results of the code in Figure 6</strong>, with a map showing the user's location.</span></p><figure class="captioned-image caption-none"><img alt="Figure 7: Geolocation in IE9 running in Windows 7" src="https://cet.informabi.com/sites/devproconnections.com/files/uploads/2013/09/McClure%20DCM380%20Fig%207.jpg" style="width: 426px; height: 474px; border-width: 1px; border-style: solid;" title="Figure 7: Geolocation in IE9 running in Windows 7"><figcaption class="image-description">Figure 7: Geolocation in IE9 running in Windows 7</figcaption></figure><p><span class="contentimage" style="width: 181px;">One problem that should be mentioned is that the watchPosition method seems to have a bleed-over of the various types of geolocation functions in the device. As a result, it is important to pay attention to the accuracy of values that are returned. In my own experience, I have found that the iPhone is more accurate than Android devices; however, this may be due to my specific location and not the device OS itself. You can find more information about the <a href="https://dev.w3.org/geo/api/spec-source.html" target="_blank">Geolocation API here</a>. </span></p><p><span class="contentimage" style="width: 181px;"><strong><em>Canvas.</em></strong> The <canvas/> tag allows you as a developer to draw 2D shapes programmatically. With this tag, developers can draw using JavaScript. The code example in Figure 8 draws a simple red square, shown in Figure 9. You can find a complete listing of <strong> </strong><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" target="_blank">the features of the <canvas/> tag here</a>. Also see Dan Wahlin's articles "<a href="https://www.itprotoday.com/article/html5/html5-canvas-tag-136121" target="_blank">Using the HTML5 Canvas Tag</a>" and "<a href="https://www.itprotoday.com/article/html5/javascript-html5-canvas-139802" target="_blank">HTML5 Tutorial: Build a Chart with JavaScript and the HTML5 Canvas</a><strong>.</strong>"</span></p><figure class="captioned-image caption-none"><img alt="Figure 9: A red square in the canvas tag in Internet Explorer 9" src="https://cet.informabi.com/sites/devproconnections.com/files/uploads/2013/09/McClure%20DCM380%20Fig%209.jpg" style="width: 455px; height: 363px; border-width: 1px; border-style: solid;" title="Figure 9: A red square in the canvas tag in Internet Explorer 9"><figcaption class="image-description">Figure 9: A red square in the canvas tag in Internet Explorer 9</figcaption></figure><p><span class="contentimage" style="width: 181px;"><span class="contentimage" style="width: 380px;"><strong><em>Web SQL.</em></strong> Storing data is a problematic issue with web applications. Web developers are familiar with cookies, a type of persistent data storage. Over time, the need for data storage support for web apps has grown. To solve some of these problems, the localStorage and sessionStorage attributes have been added and accepted into web browsers. Unfortunately, these attributes don't provide the more complex types of storage support that developers need. To address this need, the Web SQL standard was created. Web SQL allows for more data to be stored in a relational format that many developers are familiar with. </span></span></p><p><span class="contentimage" style="width: 181px;">Unfortunately, Web SQL has run afoul of the standards process. Although the Web SQL standard exists, it is not being enhanced further. For the desktop, this is an issue; however, Web SQL has been supported in Android and iPhone, so it has tremendous support in the mobile environment. </span></p><p><span class="contentimage" style="width: 181px;">Let's look at a short JavaScript example, shown in Figure 10, which demonstrates using Web SQL, with the results of the code shown in Figure 11.</span></p><figure class="captioned-image caption-none"><img alt="Figure 11: Output of the Web SQL in Google Chrome" src="https://cet.informabi.com/sites/devproconnections.com/files/uploads/2013/09/McClure%20DCM380%20Fig%2011.jpg" style="width: 432px; height: 382px; border-width: 1px; border-style: solid;" title="Figure 11: Output of the Web SQL in Google Chrome"><figcaption class="image-description">Figure 11: Output of the Web SQL in Google Chrome</figcaption></figure><p><span class="contentimage" style="width: 181px;">Here are the steps that the code performs: </span></p><ol><li><span class="contentimage" style="width: 181px;">The openDatabase command is used to create a database if it doesn't already exist. Otherwise the database is opened. </span></li><li><span class="contentimage" style="width: 181px;">Various SQL commands are passed in as necessary. These commands include commands to drop a table, create a table, and fill that table using a parameterized SQL command. In this example, the database commands are wrapped in a transaction. </span></li><li><span class="contentimage" style="width: 181px;">An SQL statement is used to query the database table. </span></li><li><span class="contentimage" style="width: 181px;">The data is output into an HTML table. </span></li></ol><p><span class="contentimage" style="width: 181px;">Although the Web SQL standard exists, further work on it has been shelved pending changes in the marketplace and standards process. What are developers to do regarding local data in a web application? Work is currently going on for a standard called IndexedDB. Hopefully, this standard will gain support in the mobile marketplace in the near future. You can find more information <a href="https://www.w3.org/TR/IndexedDB/" target="_blank">about IndexedDB here</a>. </span></p><h3><span class="contentimage" style="width: 181px;">Other HTML5 Features </span></h3><p><span class="contentimage" style="width: 181px;">Although I've covered a number of HTML5 features in this article, it is by no means a complete list. Here are some additional features in HTML5: </span></p><ul><li><span class="contentimage" style="width: 181px;">Drag and drop -- With drag and drop, users can grab objects and drag them around the screen to operate on them. </span></li><li><span class="contentimage" style="width: 181px;">Web workers -- Developers with experience in the server and desktop world are familiar with the use of threads to accomplish long-running operations in parallel. Web workers is effectively threading in JavaScript for the web browser. </span></li><li><span class="contentimage" style="width: 181px;">Cross-document messaging -- For a number of years, web developers have known that it is impossible to make Ajax requests to domains that are not a part of the domain as well as script across windows loaded from different domains. This is a security feature. With support for cross-document messaging, pages can communicate with each other with basic security features enabled. </span></li><li><span class="contentimage" style="width: 181px;">Browser history support -- Support for the forward and backward buttons in a web application with Ajax is problematic. Various methods have been devised for this purpose; however, browser support has been spotty. With browser support for history built in, developers will be better off. The window.history object supports several methods worth mentioning: </span><ul><li><span class="contentimage" style="width: 181px;">pushState(state, title, url) allows for the pushing of state into the browser's history stack. </span></li><li><span class="contentimage" style="width: 181px;">window.onpopstate is an event that will be raised when a user navigates through a page supporting history. </span></li><li><span class="contentimage" style="width: 181px;">history.replace, .back, .forward, and .go are methods that will allow users to navigate through the history as needed by the application. </span></li></ul></li><li><span class="contentimage" style="width: 181px;">Microdata -- With microdata, it will be possible to add additional meaning to web applications in the browser. Microdata will give more meaning to the content so that search engines can provide better search results. </span></li><li><span class="contentimage" style="width: 181px;">File access -- There are several APIs that provide access to the file system on the client computing device. </span></li></ul><p><span class="contentimage" style="width: 181px;">Along with these features, there is CSS3, which space limitations prevent me from discussing here. You can find more information about HTML5 features as well as CSS3 in "<a href="https://www.itprotoday.com/article/html5/html5-css3-139485" target="_blank">HTML5 Is in Style: Working with CSS3 and HTML5</a>." </span></p><h3><span class="contentimage" style="width: 181px;">Further Explorations </span></h3><p><span class="contentimage" style="width: 181px;">One final note: As you develop applications that use HTML5, you may also want to make use of frameworks. The examples here are based on the jQuery Mobile framework, which we will explore further in "<a href="https://www.itprotoday.com/article/mobile-development/jquery-mobile-142060" target="_blank">Get Started Using jQuery Mobile for Mobile Web Development</a>." I have used it to due to the popularity of jQuery among ASP.NET developers. However, jQuery Mobile is by no means the only framework that you can use. Some of the others are jQTouch, Sencha touch, iWebKit, Wink, and others. I hope that you have enjoyed this introduction to HTML5 and will use this article as a jumping-off point in your explorations of these and other HTML5-related technologies and tools. </span></p><h3><span class="contentimage" style="width: 181px;">Author's Notes </span></h3><p><span class="contentimage" style="width: 181px;">Here are a few considerations to be aware of as you're reading this article: </span></p><ul><li><span class="contentimage" style="width: 181px;">As a developer, I have many "interesting" things installed on my system. One of those things is the Google Chrome Frame, which is a Google-written plug-in for Internet Explorer (IE). Google Chrome Frame is not the Google Chrome browser for IE. Rather, it is a plug-in that brings some HTML5 features to IE 6, 7, and 8. This was on my system before I installed IE 9 -- thus, you may experience some differences in output when you run the code samples. </span></li><li><span class="contentimage" style="width: 181px;">There are various third-party browsers for Android. Some support the HTML5 features mentioned in the article, some do not. For example, Firefox on Android does not support Web SQL, whereas the built-in Android browser does. Because of these variations, I highly recommend using the Modernizr framework to test a browser for feature support. </span></li><li><span class="contentimage" style="width: 181px;">Because of the number of browsers and combinations, it's important to use feature detection in an application as opposed to browser detection. </span></li><li><span class="contentimage" style="width: 181px;">The HTML5 samples written with this article use Razor and ASP.NET Web Pages. The key pieces are in the individual pages. (For more information on these topics, see Brian Mains' article "<a href="https://www.itprotoday.com/article/aspnetmvc/aspnet-web-pages-razor-140951" target="_blank">Using ASP.NET Web Pages with the Razor View Engine</a>." </span></li><li><span class="contentimage" style="width: 181px;">The jQuery Mobile libraries used are based are the daily build of jQuery Mobile. This can result in breakage one day and everything working properly on another day. </span></li></ul>