Mobile HTML5

Teaching developers how to build great mobile web apps with HTML5.

Curated by Ian Sefferman and supported by AppStoreHQ. With AppStoreHQ, you can list your mobile web app and accept payments easily.

Feb 5

Tutorial: Your First Mobile HTML5 App - The Basics, Forms, and Geolocation (Part 1)

Over a series of posts, I’m going to guide us through our first mobile HTML5 app. It’s my first HTML5 app, too! The goal of the app will be to explain the big principles of HTML5 in as simple a manner as possible. The goal is not to make the most elegant code in the world, but just workable enough to make a point. Also, all of these examples will work, but depending on your browser and device, they might not appear. If in doubt, find an iPhone to test against — I’ll ensure all the features I talk about at least work there (or note otherwise).

The app we’re going to be building is a golf score keeper. Essentially, its goal is to replace the little scorecard and pencil at a golf course. Over the course of this multi-part tutorial, we’ll make it increasingly complex. (Note: I haven’t fully thought this example app through, so hope for the best.)

The Basics

Let’s start by setting up an HTML5 page. Doing so is actually very trivial, you only need one line at the top of your HTML file (in this case, let’s start with index.html):

<!DOCTYPE html> 
<html>  

</html> 

That <!DOCTYPE html> line is all you need to say this is HTML5. Because we’ll be doing some JavaScript work, let’s also add jQuery to make our life a bit easier. We’ll be using the Google hosted version (so you don’t have to download anything). In addition, we’ll take care of some boilerplate code, like a title.

<!DOCTYPE html> 
<html>  
  <head>
    <title>Golf score keeper</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
  </head>
  <body>

</body> </html>

Okay, that’s The Basics. Easy.

Forms

Forms are upgraded in HTML5 to make your life easier. They don’t necessarily do anything that I’d consider mind-blowing or even web-changing, but they make a lot of our current hacks easier. To start we’re only going to track the first two holes. Each of these holes are Par 4’s, which we expect each golfer to be able to make. We’ll also ask for an email address.

<!DOCTYPE html> 
<html>  
  <head>
    <title>Golf score keeper</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
  </head>
  <body>
    <form action="upload.html" method="get">
      <div>
        <label for="1">Hole 1</label>
        <input type="number" min="1" value="4" name="1" size="2" step="1" />
      </div>
      <div>
        <label for="2">Hole 2</label>
        <input type="number" min="1" value="4" name="2" size="2" step="1" />
      </div>
      <div>
        <input type="email" placeholder="Enter your email address" size="40"/>
      </div>
      <div>
        <input type="submit" value="Upload Score" />
      </div>
    </form>
  </body>
</html> 

At first glance, that form looks normal. Upon further inspection, you’ll notice a few differences:

  • type=”number”: There are many new form types now, so browsers can make it easier for users to enter in the correct information. See the table in 4.10.4 here for all the new types, including email (also seen above), search, date, and more. For many types (including number and email), the iPhone keyboard is smart enough to switch immediately the correct layout.
  • min=”1”: This goes along with the new type=”number”, and allows us to specify a minimum number for this form field. A max also exists, but isn’t relevant for this purpose. Other types also have specific attributes.
  • step=”1”: Another example of a specific attribute for the number type. This step field will allow the number only to step up or down by the given amount (the iPhone browser doesn’t support this). In this case, each stroke is just 1.
  • placeholder=”Enter your email address”: Chances are, you’ve seen or even built a web app before that included placeholder text that disappeared via JavaScript whenever the field was in focus and reappeared if the field was left empty. The new placeholder property does that for you, without any extra JavaScript necessary.

There’s our form! Nothing fancy, but it gets the job done, and in an even cleaner fashion than what was previously available to developers.

Geolocation

Easy geolocation — getting lat/long coordinates for where your user is located — is, in my opinion, one of the biggest wins for HTML5. Going back to our golf score keeper app, now that we’re able to get the email address of a user as well as the score for each hole, let’s pretend we don’t know which course they are on. We don’t want them to have to enter it manually; instead we’ll just figure it out from their location. Initially this will look hacky (just for demonstration purposes), but we’ll clean it up later.

<!DOCTYPE html> 
<html>  
  <head>
    <title>Golf score keeper</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
  </head>
  <body>
    <form action="upload.html" method="get">
      <div>
        <label for="1">Hole 1</label>
        <input type="number" min="1" value="4" name="1" size="2" step="1" />
      </div>
      <div>
        <label for="2">Hole 2</label>
        <input type="number" min="1" value="4" name="2" size="2" step="1" />
      </div>
      <div>
        <input type="email" placeholder="Enter your email address" size="40"/>
      </div>
      <div>
        <input type="text" id="lat_field" name="latitude" />
        <input type="text" id="long_field" name="longitude" />
      </div>
      <script>
        navigator.geolocation.getCurrentPosition(
          function(pos) {
            $("#lat_field").val(pos.coords.latitude);
            $("#long_field").val(pos.coords.longitude);
          }
        );
      </script>
      <div>
        <input type="submit" value="Upload Score" />
      </div>
    </form>
  </body>
</html> 

All we added is a small inline JavaScript block and two text form elements for latitude and longitude. The JavaScript block calls the new navigator.geolocation.getCurrentPosition function, which gets the location of the device and passes it to a function. In our case, the function updates the form elements for each coordinate. Go ahead and try it out — you should see a dialog asking if you’d like to share your location followed by coordinates filling in your form elements!

That’s it! We’ve now successfully built an HTML5 page that captures numbers, email addresses, uses placeholder text, and even gets the GPS location of the user. In part 2 we’ll start to clean up this page and use this form data.

In the meantime, if you have any questions or comments, please let me know by leaving a comment or emailing iseff@iseff.com.


  1. ncy-aberrant reblogged this from mobilehtml5
  2. free-registry-cleaner reblogged this from mobilehtml5
  3. prowthish-istoselidon reblogged this from mobilehtml5
  4. chinamobiledev reblogged this from mobilehtml5
  5. rober reblogged this from mobilehtml5
  6. mobilehtml5 posted this