Today, we're going to stray from the Android/IOS path for a bit and check out HTML5. It's the third of the big three technologies on the mobile front, and it's also a good way to burnish one's Javascript, Jquery and html skills. I'm going to check out a tutorial on it that looks pretty good:
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>
Thatline 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>
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.
I'm liking this. I'm using familiar web technologies, but updated. He's also talking about the iPhone - my target of choice.
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
Let's try it out. OK - so far, so good. Let's continue.
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.
And here's the html:
<!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.getCurrentPositionfunction, 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.
So far, so good. We'll pick up the next section of the lesson in the next post
No comments:
Post a Comment