HTML5 has made a lot of progress in the mobile space over the last few years.
Take a look at the latest report from the French analyst house faberNovel, on HTML5 and how to rethink web strategy:
Go Mobile!
-Rob
Archives For HTML5
Now that I’ve spent the last two articles helping you to get your Metro user experience foundation created with CSS3 and Media Queries, it’s time to jump into one of the features of HTML5. Geolocation is perfectly suited for smartphones because location awareness is something they all have in common. Most people are under the impression that only native mobile apps have the power to reach into the platform APIs and retrieve a device’s current location. Luckily, with modern HTML5 browsers like Internet Explorer 9, web pages can use JavaScript to gather this same information. This API finds your location via the following methods:
- GPS: This is the most accurate method but it requires you to be outdoors and has a reputation for draining batteries.
- IP Address: There’s a location database that maps IP addresses to locations which may or may not be accurate depending on how far away your DHCP server is from your current location.
- Wi-Fi: This also maps IP addresses to locations but also triangulates between Access Points. It works indoors and may be relatively accurate.
- Cell Tower Triangulation: This also works indoors and can be fairly accurate depending on how far apart the closest cellular towers are.
Let’s take a look at a simple page containing HTML and JavaScript:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”HandheldFriendly” content=”true” />
<link rel=”stylesheet” href=”MetroLight.css”>
<title>Geolocation</title>
</head>
<body>
<p>CONTOSO TRACKER</p>
<h4>Simple Geolocation</h4>
<form>
<fieldset>
<legend>Track</legend>
<button type=”button” id=”locationButton” onclick=”getPosition()”>Get Location</button>
</fieldset>
</form>
<script>
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
}
else {
alert(“No Geolocation Support”);
}
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert(“You’re at Latitude: ” + latitude + “, Longitude: ” + longitude);
}
</script>
</body>
</html>
As you can see, I’ve taken our HTML5 + Mobile Web boilerplate and included the Light Metro stylesheet to get started. Beyond that, it’s just a simple button designed to call a JavaScript function via the onclick event. For the sake of this example, I’ve done the unthinkable and have included the JavaScript inside the web page. Please never to this in production.
The onclick event calls the getPosition() function. The first thing you should notice is a bit of defensive coding where I test to see if the navigator.geolocation capability exists. If the target browser allows me to pass that test, I then call the getCurrentPosition() method and pass in a single arguement for the successCallback parameter. Don’t worry, I’ll dive into the other two parameters in the next article.
The displayLocation callback function is called once the device passes the coordinates back to the web page. After that, it’s a simple matter of retrieving the latitude and longitude values.
This first image below shows you what the mobile web page should look like when you run it on Windows Phone 7.5:
You should see the now-familair Light Metro UX. When you click the Get Location button, IE9 will popup a dialog asking your permission to allow the web page to access your location from Windows Phone as shown below:
This should give you comfort in knowing the Big Brother cannot anonymously track you. You can say Yes or No for each Geolocation request and you can check the checkbox to remember your choice for this particular web page. Once you’ve said Yes, the device will give you a lat/long as shown in the image below on the left:
In order to more easily test this on my PC with Visual Studio 2010 running, I used the Windows Phone emulator, plus the additional tools you get with the Windows Phone 7.1 SDK. By clicking on the Location tab, you can then click on the Bing map to get a Pushpin in a particular location. The coordinates for the pushpin are displayed in the Current Location section which should match what you see in the emulator. That’s all there is to it!
Congratulations! You can now get lat/long coordinates without building an app.
Keep coding,
-Rob
In my last article covering HTML5 and CSS3 on Windows Phone, I got you started with a simple boilerplate. It just so happened that the style I presented you with was Dark. Since we know that Windows Phone also has a light theme, I think it’s important that your mobile web site have one as well. Below is an enhanced version of the boilerplate HTML5 file that displays many commonly used Form elements:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes” />
<meta name=”MobileOptimized” content=”width” />
<meta name=”HandheldFriendly” content=”true” />
<link rel=”stylesheet” href=”MetroDark.css”>
<title>Web Storage</title>
</head>
<body>
<p>CONTOSO FRUIT COMPANY</p>
<h4>Enter Products</h4>
<form>
<fieldset>
<legend>Add</legend>
<label id=”ValueLabel”>Product Name:</label>
<br />
<input id=’ValueInput’ type=’text’ />
<br /><br />
<label id=”StateLabel”>States:</label>
<br />
<select name=”states”>
<option value=”Washington”>Washington</option>
<option value=”Florida”>Florida</option>
<option value=”California”>California</option>
</select>
<br /><br />
<label id=”RefLabel”>Refrigerate:</label>
<br />
<input type=”radio” name=”refrigerate” value=”yes” /> Yes
<input type=”radio” name=”refrigerate” value=”no” /> No
<br /><br /><br />
<button id=’insertButton’> Add Product </button>
</fieldset>
</form>
</body>
</html>
Here is the Dark CSS file that accompanies the above HTML5 file:
@media screen and (max-width:480px) {
body {
font-family: “Segoe WP”, Tahoma, Geneva, Verdana;
background-color: #000000;
color: #ffffff;
padding: 5px;
}
h1, h2, h3, h4, h5, h6 {
font-family:”Segoe WP Semibold”;
margin-bottom:5px;
}
h1 {
font-size: 48pt;
}
h2 {
font-size: 40pt;
}
h3 {
font-size:32pt;
}
h4{
font-size:24pt;
}
h5 {
font-size:20pt;
}
h6 {
font-size:18pt;
}
p {
font-size: 14pt;
}
input, select, button {
color: #ffffff;
background-color: #000000;
border: 2px solid white;
vertical-align: baseline;
font-size: 17pt;
min-width: 40px;
min-height: 40px;
}
label {
vertical-align:baseline;
font-size:17pt;
}
input.hasfocus {
background-color:white;
color:black
}
fieldset, legend {
font-family:”Segoe UI Semibold”;
font-size:12pt;
}
fieldset {
padding:12pt;
border: 1px solid white;
}
legend {
color: #ffffff;
}
}
The combination of a mobile-optimized HTML5 page and a Dark Metro CSS3 stylesheet results in a familiar UX designed for AMOLED displays:
But what if you want to display a light mobile website? Luckily, you get to use the same HTML5 page and just point to a new, Light Metro CSS stylesheet as shown below:
<link rel=”stylesheet” href=”MetroLight.css”>
So what does this new CSS file look like? A lot like the dark one with some subtle changes:
@media screen and (max-width:480px) {
body {
font-family: “Segoe WP”, Tahoma, Geneva, Verdana;
background-color: #ffffff;
color: #000000;
padding: 5px;
}
h1, h2, h3, h4, h5, h6 {
font-family:”Segoe WP Semibold”;
margin-bottom:5px;
}
h1 {
font-size: 48pt;
}
h2 {
font-size: 40pt;
}
h3 {
font-size:32pt;
}
h4{
font-size:24pt;
}
h5 {
font-size:20pt;
}
h6 {
font-size:18pt;
}
p {
font-size: 14pt;
}
input, select, button {
color: #000000;
background-color: #ffffff;
border: 2px solid black;
vertical-align: baseline;
font-size: 17pt;
min-width: 40px;
min-height: 40px;
}
label {
vertical-align:baseline;
font-size:17pt;
}
input.hasfocus {
background-color:white;
color:black
}
fieldset, legend {
font-family:”Segoe UI Semibold”;
font-size:12pt;
}
fieldset {
padding:12pt;
border: 1px solid black;
}
legend {
color: #000000;
}
}
With the Light Metro stylesheet, you now have a look and feel that’s reminiscent of the Outlook experience on Windows Phone. With the black and white colors reversed, you get the following:
So there you have it! You started with a simple HTML5/CSS3 boilerplate and now you’re building mobile web apps with both a Dark and Light Metro UI. All the touchable elements are large enough for big fingers and the separation between controls ensures that users won’t hit two at the same time. Consider this your foundation for a new HTML5 journey that you’ll be taking with Me, Internet Explorer, and Windows Phone.
Keep coding!
Rob
Internet Explorer 9 running on Windows Phone 7.5 has seriously raised the mobile web profile of Microsoft’s latest phone operating system. Up until recently, it’s been all about the apps written in Silverlight. With hardware-accelerated video, text rendering, canvas drawing, and the high-speed “Chakra” JavaScript engine, IE9 compiled for ARM processors means business. But diving into HTML5 without considering the differences in characteristics of mobile web browsers is a mistake. Therefore, I’m going to show you some HTML5 and CSS3 that you can use as a starting point for your mobile web apps.
Below, you can see the simplified DOCTYPE, html, charset, and stylesheet tags that are the hallmark of HTML5. In order to be accomodate small screens on Windows Phones, I’ve added the viewport, mobile optimized, and handheld friendly tags to keep the browser from trying to render a desktop web site.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”/>
<meta name=”MobileOptimized” content=”width”/>
<meta name=”HandheldFriendly” content=”true”/>
<link rel=”stylesheet” href=”wp.css”>
<title>Mobile Web Title</title>
</head>
<body>
<h3>Mobile Web</h3>
<script></script>
</body>
</html>
You probably also noticed that I placed the script tags just before the closing body tag instead of inside the head tags. This ensures that the mobile page fully renders in the browser before the JavaScript parsing begins.
Along with this simple HTML goes an equally simple stylesheet that provides a basic, Windows Phone Metro look and feel:
@media screen and (max-width:480px) {
body {
font-family: “Segoe WP”,Tahoma,Geneva,Verdana;
background-color: #000000;
color: #ffffff;
padding: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family:“Segoe WP Semibold”;
margin-bottom:7px;
}
h1 {
font-size: 48pt;
}
h2 {
font-size: 40pt;
}
h3 {
font-size:32pt;
}
h4 {
font-size:24pt;
}
h5 {
font-size:20pt;
}
h6 {
font-size:18pt;
}
p {
font-size: 14pt;
}
input, select, button {
color: #ffffff;
background-color: #000000;
border: 2px solid white;
vertical-align: baseline;
font-size: 17pt;
min-width: 40px;
min-height: 40px;
}
label {
vertical-align:baseline;
font-size:17pt;
}
input.hasfocus {
background-color:white;
color:black
}
fieldset, legend {
font-family:“Segoe UI Semibold”;
font-size:12pt;
}
fieldset {
padding:12pt;
border: 1px solid white;
}
}
I’ve included a simple media query in the CSS to only apply the style to devices with a maximum width of 480 pixels. Additionally, this will definitely give you the Segoe fonts, black background, and white borders that you’re accustomed to in Windows Phone Silverlight apps. You’ll also notice that I set minimum heights and widths for some of the UI elements to give mobile users a larger hit target.
Good luck with your next HTML5 + CSS3 mobile web site!
-Rob
Windows Phone 7.5 is running fast out of the gate for 2012. The stunning mobile operating system from Microsoft was the talk of CES in Las Vegas this year. The accolades streaming in from the world’s most influential newspapers, magazines, reviewers, and tech bloggers are unprecedented.
The Nokia Lumia 900 won the Best of CES award in the Smartphone category and it’s no surprise. Before listing off the impressive specs, just look at this gorgeous piece of hardware. Looks matter…trust me. Windows Phone is already the most elegant mobile operating system. Breathtaking industrial design is the other half of the equation. When paired with iconic hardware, it’s like pairing your favorite Walla Walla Cabernet with your favorite steak.
I can’t count the number of reviews and comments stating that Windows Phone on the Lumia 900 has surpassed the iPhone. If you follow the U.S. wireless market, then you know that things like 4G LTE network speeds, large screens, front-facing cameras, and dual-core processors are the current drivers of smartphone sales. The Lumia 900 addresses three of those drivers with support for AT&T’s 4G LTE network, a 4.3-inch AMOLED ClearBlack display, and a front-facing camera for video calls. It’s powered by a single 1.4 GHz processor and if you’ve paid attention to all the reviews in the press, you’ve heard that Windows Phone runs circles around its dual-core competitors. Better software design, better engineering, more efficient algorithms, and optimized coding techniques means you can do more with less. Last but not least, the Lumia 900 comes with an amazing 8MP camera with Carl Zeiss optics.
The HTC Titan II came to the CES party guns-blazing with a monster of a smartphone. It tics all the required boxes needed for sales by delivering a massive 4.7 inch screen, support for AT&T’s 4G LTE network, and a front-facing camera. The 1.5Ghz Snapdragon 2 processor gives this superphone all the horsepower it needs.
Joining the camera arms-race with the Lumia 900, the Titan II comes equipped with a whopping 16 megapixel camera that can capture 720p video. If you’re looking for a giant phone that can go head-to-head with the Galaxy Nexus, this is your device.
2012 is already shaping up to be a great year with compelling hardware matched-up with Windows Phone 7.5, but what else does this platform need to make my prediction come true? Oh yeah, apps. Do you remember back in the 80′s when DOS-based PCs from IBM and Compaq gave Apple IIs and Macs more than they could handle? It might not have been eye-catching, but DOS had more apps that allowed consumers and companies to be successful. In the 90′s, Windows ran away with the computing market with the Mac, Linux, NeXT, and OS/2 unable to compete in the app department. Why do you think this was the case? I know a big reason was because Borland and Microsoft made better and easier-to-use development tools for Windows.
With 50,000+ apps in the Marketplace, Windows Phone is surging forward and now sits in third-place behind the iPhone App Store and the Android Market. Aside from developers betting on the success of a platform, they need development tools, emulators, and programming languages that make it easy for them to be productive. When I look at the velocity at which new apps are being added to the Windows Phone Marketplace, it tells me that Visual Studio is making a big difference.
In my job, I have to work with the development tools for all the major smartphone platforms and I can tell you without drinking any Kool-Aid that the competition isn’t even close. Most iPhone developers I know find that learning Objective-C from the NeXT operating system to be a daunting task compared to modern, high-level languages like C# and VB. While the world is full of Java developers, the complexity of cobbling the necessary tools together needed to build for Android apps is a real productivity killer. Just running Eclipse on JDK 1.6 sucks the life and performance out of my fast Windows 7 laptop. Microsoft Visual Studio 2010 Express for Windows Phone is free and the emulator + SDKs all download and install together making the whole process fast and simple. Apps get access to all phone sensors, a local database (SQL Server Compact), and Metro design.
Better productivity means faster time-to-market which means more apps for Windows Phone.
If you’re a web designer/developer, Internet Explorer 9 is alive and well on Windows Phone 7.5. This means you’re no longer held hostage to the highly-fragmented WebKit mobile browser platform. You get a hardware-accelerated, amazingly fast browser with support for more “fully-baked” HTML5 standards like Web Storage, Geolocation, Canvas, Audio and Video.
The lightning fast-Chakra JavaScript engine supports ECMAScript 5 which means your DOM interactions and Ajax web service calls will blur the lines with native apps. When you retrieve data from the cloud or your on-premise servers via Ajax, you’ll now be able to persist it offline in Web Storage. Support for CSS3 means things will be beautiful, 2D transforms will occur, and media queries will give you responsive design.
So here we stand with the best smartphone operating system, best hardware, best development tools and the best mobile web browser. I’m certain that Windows Phone with its army of app developers, OEMs and Mobile Operator partners will be marching to victory this year.
Be fearless,
Rob
The Microsoft Windows Mobile Line of Business Solution Accelerator
Getting Started with Java on PDAs
JSP vs JSP
Using Servlet Debugger 2.0
Java Web Server and Dynamic Page Compilation
How to Upgrade JBuilder's Speed and Its Servlets
Servlet Development with JBuilder