Always On, Always Connected Week 2 - HTML, CSS, JavaScript Refresher and PhoneGap Development Basics

Now that we have the PhoneGap development environment up and running, we should take a step back and refresh our knowledge of HTML, CSS, and JavaScript.

HTML for Mobile

History

WAP

WAP or Wireless Application Protocol is a protocol for accessing web like pages on mobile devices. It uses a similar language to that of HTML called WML (Wireless Markup Language) and can be delivered via HTTP (just like a webpage).

To create a WAP page, you merely create a page with the extension ".wml" and put it on a web server.

Here is a simple WML page:

<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> 
<wml> 
	<!--begin card--> 
	<card> 
		<do type="accept"> 
			<go href="#card2"/> 
		</do> 
		<p> 
			This is the first card.
			Press OK to go to the second card. 
		</p> 
	</card> 

	<!--begin card--> 
	<card id="card2"> 
			<p> 
				This is the second card. 
			</p> 
	</card> 
</wml>

You can see this by typing in this URL in your mobile browser (if it still supports it): http://itp.nyu.edu/~sve204/wml/test.wml

WAP never really took off in the US due to several reasons: Carriers overstated it's capabilities, most devices could only see a few characters or words at a time, people were used to the normal web and this new limited web isn't very appealing and in general people weren't designing separate WML sites as would be required.

More Information:
Wireless Application Protocol - Wikipedia
WML Tutorial: Wireless Markup Language Introduction

XHTML MP

Modern mobile browsers are no longer even attempt to offer support for WAP/WML and moved towards regular HTTP with XHTML MP or regular HTML/XHTML.

XHTML MP was the start of an integration of technologies meant for desktop web browsers and those on mobile devices.

HTML5

With WebKit (as we discussed last week) and HTML5, the mobile web is now a first class citizen, on par with the normal web.

When we use HTML5, especially on a mobile device, we should be sure to let the browser know that is what we are using by specifying the correct DOCTYPE at the top of the page:

<!DOCTYPE html>

For a review of HTML, let's go over this content: Comm Lab Networked Media Week 1

Device Emulation

Of course, looking at a page on a hardware device is the best way to test. Second best are the various emulators and simulators available. While starting to develop and do layout, the Chrome device emulation is nice.

Meta Tags

Meta Tags generally are used to provide meta-data about a page and it's content. This is useful for search engines and other applications.

There are also meta tags that are useful for mobile browsers.

The most important one at the moment is the "viewport" tag.

A viewport tag allows the developer to specify zoom and width attributes of a page based upon the device's display capabilities.

Some Examples:

The following specifies that the content will be full screen with a virtual size of 320 pixels no matter how large the display is. If you are looking at an iPad, it will be treated as if it were 320 pixels wide and the content will be rendered on it at that size. It will appear very large and zoomed in.

<meta name="viewport" content="width=320">

Below specifies that the content will be full screen whatever the width the device is. Content here could be rendered too small on devices with large numbers of pixels per inch (retina displays and the like). If you don't use this tag, the browser will assume a page width of 960 pixels and zoom to either fill or shrink the content to fit the device.

<meta name="viewport" content="width=device-width">

This sets both the width and the initial scale as if the user zoomed in:

<meta name="viewport" content="width=device-width, initial-scale=1.2"/>

More Information:
Viewport and Media Queries, The Complete Idiot's Guide
Responsive Meta Tag
Quick Tip: Don't Forget the Viewport Meta Tag

Single Page Applications

Loading content off the network of loading new pages in the browser can be time consuming. If at all possible, having content reside on a single page is preferred.

Fragments

One thing that helps enable this is the use of internal links via URL fragments.

If in your content, you label a section of a page with an "a name" tag then you can link directly to that segment. This is wrapped in this tag <a name="fragment"> tag.. To link to it, we create an "a href" tag pointing to this page with a "#fragment": <a href="#fragment">link text</a>

More Best Practices

Responsive Design

Design your layout so that it works across the vast array of devices.

Minimize resources

Optimize your files, graphics, code and so on to be as small as possible. Minifying when it makes sense (such as when you are all done developing and ready to release). W3C Recommendation: Mobile Web Application Best Practices

Mobile Boilerplate

CSS for Mobile

Here is a quick CSS refresher.

Touch states

When designing for mobile, it is important to not use "hover" states as they don't exist on touch screens. Also make sure to use "active" state so that users see some feed back when they touch an element.

<style>		
button {
  background: #3498db;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

button:active {
  background: #3cb0fd;
  text-decoration: none;
}
</style>

CSS @media Query

Using @media You can have conditional CSS that works when specific conditions are met.

This CSS changes when the page is below 640 pixels wide

@media screen and (max-width: 640px) {
    body {
	    background-color: #050505;    
		color: #EEEEEE;
    }
}

JavaScript Refresher

Networked Media Week 2 and Week 3

Touch Events

Touch Me

var touchme = document.getElementById('touchme');
touchme.addEventListener('touchstart', function(evt) {
	touchme.style.backgroundColor = "rgb(" + evt.touches[0].clientX + "," + evt.touches[0].clientY + ",0)";
});

More Information:
Introduction to Touch events in JavaScript
Google Developers: Add Touch to Your Site

Cordova Events

When developing with Cordova, we need to make sure we use the "deviceready" event callback in tandem with the "window load" event to ensure that we are completely ready to execute our Cordova JavaScript code:

<script type="text/javascript">
	function onWindowLoad() {
		document.addEventListener('deviceready', onDeviceReady);
	}
	
	function onDeviceReady() {
		window.alert("We are ready to go!");
	}
	
	window.addEventListener('load', onWindowLoad);
</script>

Example: cordova_template.html (View the source)