Create a Mobile Web Site

Create a Mobile Web Site

Personal mobile web sites are a very effective means of sharing information and mobile media content. There are a few things you should know when authoring and deploying mobile web sites.

Many Internet hackers run their own web sites to communicate with peers. For advanced mobile hackers, setting up your own web site is a powerful way to enhance your mobile web experience. Via the web site, you can build a personal gateway to the Internet, share private content with family and friends, or even provide services to peers and the general public. In this hack, I'll first introduce the various mobile content markup languages with some simple examples, including an example of how to download and upload files from and to a web site for sharing. Then, I'll cover the server-side MIME-type configuration, which is necessary to make web pages accessible to most mobile phones, as well how to password-protect your data. Near the end, I'll provide a brief overview of mobile web development tools from Nokia.

The Web Made Small

To understand the various standards and specifications in the mobile Web landscape, you should learn a little about how mobile browsers and their content markup languages have evolved in the last several years. As I mentioned in "Browse the Web" [Hack #50], HTML, WML, and XHTML MP browsers are the ones you're most likely to find on Nokia devices.

1.1 HTML.

Most Internet web pages for PC browsers are authored in HTML. However, in the early days of the mobile Internet (in the late 1990s), HTML was considered too heavyweight for most mobile phone browsers, for these reasons:

• The rich set of presentation elements supported in HTML is overkill for many mobile devices, especially low-end devices, since the phone screen simply cannot distinguish many font styles and media objects, and it provides limited room for layouts (e.g., frames and tables).

• Most HTML pages are not well-formed XML documents. For example, you can use the <p> tag to open a paragraph without the companion </p> to close the paragraph in HTML, but the software that draws your web pages on the screen has to check the rest of the HTML document to make sure there isn't a stray </p> it should pay attention to. This extra processing is nothing for the powerful CPUs in today's computers, but it can strain the limited CPU in your mobile phone. So, it is considerably more difficult to process irregular HTML than it is to process a well-formed XML document. Desktop web browsers have to perform all sorts of contortions to deal with permutations of HTML tags that have evolved since the early Web.

• After years of browser wars on the PC side, the HTML specification is fragmented with multiple proprietary extensions.

Overall, I do not recommend that you use HTML to create mobile pages, due to the limitations of current mobile browsers.

1.2 WML.

Phone manufacturers and wireless operators developed their own lightweight content markup languages to replace HTML. Examples of such markup languages include cHTML, which is used by i-mode services, and HDML, which is promoted by Phone.com. However, having to deal with multiple markup languages was a big burden for mobile content developers and it hindered the adoption of the mobile Internet in those early days. To solve this problem, a standard mobile content markup language supported by all mobile device manufacturers and operators was needed. The Wireless Markup Language (WML), defined by the WAP Forum, emerged as such a standard.

The WAP Forum is an industry-standard body that develops the data communications protocols for mobile networks. WML is officially part of the Application Environment specification of the WAP standard. Put simply, all WAP-compatible devices should support WML.

Unlike page-based HTML, a WML document is conceptualized into "a deck of cards." Each card represents one screen of content, and the internal links among the cards enable navigation from screen to screen. The ability to download multiple cards at once helps to reduce the slow and unreliable network round trips in WAP applications. The following code snippet demonstrates a simple WML document. The first card asks for your name and the second one echoes it back to you. The device needs to download the WML document only once to get both cards.

 <?xml version='1.0'?>
 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
			"http://www.wapforum.org/DTD/wml_1.2.xml">
 <wml>
	<card id="Name" title="Enter Name">
		<do type="accept" label="SayHello">
			<go href="#Hello"/>
		</do>
		<p>Please enter your name:
		    <input type="text" name="name"/>
		</p>
	</card>

	<card id="Hello" title="Say Hello">
		<p>Hello, $(name)</p>
	</card>
 </wml>

You've probably already given in to the temptation to put this document on a web site with the extension .wml and try it out with your phone. However, if your web server sends it with a Content-Type of text/plain, it might not load properly. To be sure your web server is sending it correctly, see "Configure the Server for MIME Types," later in this hack.

WML has made enormous progress in standardizing mobile browsers. However, as the mobile phone's capability improves, the need to keep the content markup language as light as possible has diminished. Instead, the challenge is to add more features to the WML standard and, at the same time, improve interoperability with the vast number of web sites in the wired Internet world.

1.3 XHTML MP.

In WML 2.0, WML became a subset of the standard XHTML known as the XHTML Mobile Profile (XHTML MP). Since XHTML is a strict XML definition of HTML, it is a lot easier to process on resource-limited mobile devices (since it doesn't have to deal with all the exceptions allowed in the more permissive HTML used by many web sites). The following code snippet shows a simple XHTML MP document. Notice that it is also a well-formed XML document (it includes the closing tags that are not necessary in non-XHTML HTML documents).

	<!DOCTYPE html
	   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	<html>
		<head>
			<title>An example XHTML page<title>
		</head>
		<body>
			<p>
				<b>Hello</b>
				<br/>
				<i>World</i>
			</p>
			<p>
				From your friends
			</p>
		</body>
	</html>

XHTML is not yet the dominant markup language for Internet and mobile web sites. But it is widely supported in the new generation of authoring tools and dynamic web site frameworks. As those tools are being adopted and web site developers are more consistent about developing for multiple browsers, you can expect XHTML to be the convergence point of the desktop Internet and the mobile Web.

1.4 Embedded scripts.

So far, I have covered static markup languages. In the real world, web pages often have a scripting component to add some interactivity on the client side. For example, in a user registration page, an embedded JavaScript can alert you to missing fields or incorrectly formatted fields before you submit the form. Most HTML browsers, including Opera, have the option to support JavaScript. For WML pages, WMLScript is the perfect tool to add interactivity.

Web-Based File Transfer

One of the primary reasons to set up a personal mobile web site is to share mobile content (e.g., wallpapers and ring tones) with friends, or across several devices you own. It is easy to set up a page where your phone can download files via its WML or HTML browsers. The native Services browser allows you to download common media format files to the Gallery. Most Nokia phones also support web-based file uploading. The following XHTML MP page shows a file upload form on the device browser. You can select a file from the Gallery and submit the form to the server (see Figure).

Uploading media files from the phone Gallery to a web site

The following listing is the HTML code for the file upload page:

	<html>
	  <head>
	   <title>Upload test</title>
	  </head>
	  <body>
	   <h3>Please upload</h3>
	   <form action="processor.php" method="post"> 
		<input type="file"/> 
		<input type="submit" name="submit" value="OK"/>
	   </form>
	 </body>
	</html>

On the server, the following PHP script (i.e., the processor.php file on the web server) saves the file to the specified directory:

	<html>
 	 <head>
	   <title>Upload results</title>
	 </head>
	 <body>
	<p><b>The file uploading result is:

    <?php
	 $uploadfile = '/upload/' . basename($_FILES['userfile']['name']);

	 if (move_uploaded_file($_FILES['userfile']['tmp_name'],
				$uploadfile)) {
		echo "<p>File was successfully uploaded.\n";
	 } else {
		echo "<p>Invalid file!\n";
	 }
	?>
	 </body>
	</html>

In PHP versions earlier than 4.1.0, you should use the $HTTP_POST_FILES variable rather than the $_FILES variable to access the uploaded file.

Configure the Server for MIME Types

After you write the web pages, it is time to publish them online. You can publish through either a web-hosting service or your own server. But before anyone can view your web pages, you must configure the server with the right Multipurpose Internet Mail Extensions (MIME) types.

When the web browser accesses any resource (e.g., a file) on the server, the server first returns the content's MIME type. Then, based on the MIME type, the browser determines how to render the content. For example, the server returns a text/html MIME type for an HTML page so that the browser knows it needs to parse the tags and render the HTML presentation elements. If the server returns the text/plain MIME type for the HTML page, the browser thinks it's plain text, and displays all the characters including the HTML tags. The server returns the image/jpeg MIME type of a JPEG image and the browser renders the binary data stream into an image. For the mobile browser to properly render the contents of your web site, the server must be configured to send the right MIME types. The server typically associates a MIME type for each filename suffix.

Scripts will generally set the correct MIME type using Content-Type header that's sent out in the HTTP response header. So, the filename suffix of a script does not necessarily determine its MIME type. See "Dynamic content," later in this section.

3.1 Static web pages.

In the Apache server, the MIME type and filename extension associations are configured in the conf/mime.types file. Make sure the following entries are available. Those entries specify the MIME types for HTML, WML pages, WMLScripts, themes, Java and Symbian applications, and video and audio files.

application/vnd.wap.wbxml	wbxml
text/html	html htm
application/vnd.wap.wmlc	wmlc
application/vnd.wap.wmlscriptc	wmlsc
image/vnd.wap.wbmp	wbmp
text/vnd.wap.wml	wml
text/vnd.wap.wmlscript	wmls
video/3gpp	3gp 3gpp
text/vnd.sun.j2me.app-descriptor	jad
application/java-archive	jar
application/vnd.symbian.install	sis
audio/midi	mid midi kar
application/vnd.nok-s40theme	nth

The application/vnd.wap.wmlc MIME type refers to compiled WMLScript files. As I mentioned earlier, you need to precompile the WMLScript if your phone does not use a WAP gateway to access WML pages (most phones do). For instance, you might access the WML page via a direct HTTP link from your Internet access point rather than from the WAP access point.

If your device browser fails to render or process any of the pages or embedded media elements from your server, you should first check the MIME type settings for that page or element. If you share a web server with other users and do not have access to the conf/mime.types file, you can create a .htaccess file in your web directory and add the following entries:

AddType application/vnd.wap.wbxml	.wbxml
AddType text/html	.html
AddType application/vnd.wap.wmlc	.wmlc
AddType application/vnd.wap.wmlscriptc	.wmlsc
AddType image/vnd.wap.wbmp	.wbmp
AddType text/vnd.wap.wml	.wml
AddType text/vnd.wap.wmlscript	.wmls
AddType video/3gpp	.3gp
AddType text/vnd.sun.j2me.app-descriptor	.jad
AddType application/java-archive	.jar
AddType application/vnd.symbian.install	.sis
AddType audio/midi	.mid
AddType application/vnd.nok-s40theme	.nth

The .htaccess file lets you specify custom server configurations for each directory on your site.

Some web-hosting providers disable support for the .htaccess file in user directories, for performance reasons. If that is the case, you need to contact your site administrator to add support for the appropriate MIME types.

If you use the Microsoft Internet Information Services (IIS), you can easily associate MIME types with files and directories using its graphical user interface (GUI) management tools. For detailed instructions, please refer to the following two online documents from Microsoft:

• For IIS 4.0 and 5.0, http://www.microsoft.com/technet/prodtechnol/windows2000serv/technologies/iis/maintain/featusability/mimeiis.mspx

• For IIS 6.0, http://www.microsoft.com/resources/documentation/iis/6/all/proddocs/en-us/wsa_mimemapcfg.mspx

If you use web servers other than Apache and IIS, please refer to your server manual to find out how to set MIME types.

3.2 Dynamic content.

So far, I have discussed how to publish static mobile web content. But in many cases, a dynamic web site that performs some heavy lifting on the server is needed. By turning your mobile phone into the front-end for web applications, you can run sophisticated applications on the server side and have access to the core features anywhere, anytime. For example, you can use your mobile phone to manage a personal blog or database application that is too big to fit into your phone's memory. A lot of literature is available on the design and development of dynamic web applications, so I will not discuss that here. However, one thing that deserves special attention from mobile users is how to set up the correct MIME types for your dynamic pages.

For example, if you use PHP scripts, all the script files have the suffix .php. The server typically just sends out a text/html MIME type for the .php URL resources. You cannot use static mapping to associate the .php suffix with both HTML and WML MIME types. Hence, you must set the MIME type dynamically from inside the script. The following code snippets show how to set the MIME type from PHP, Perl, Java Server Pages (JSP), and ASP.NET scripts.

In PHP, you can use the header function to set the header values:

	header("Content-Type: text/vnd.wap.wml; charset=utf-8"); 

In Perl CGI scripts, you can simply print the header information directly into the response stream before you write out the WML page data:

	print "Content-Type: text/vnd.wap.wml; charset=utf-8\r\n";

If you are using the CGI module in Perl, do the following:

	use CGI qw(:standard);
	print header("text/vnd.wap.wml");

In JSP, you can use the page directive to set header values in the server response:

	<%@page contentType="text/vnd.wap.wml;charset=utf-8"%>

In Microsoft Active Server Pages (ASP) or ASP.NET, you use the Response object's attributes to set the headers when the server generates the response data:

	Response.ContentType = "text/vnd.wap.wml"
	Response.Charset = "utf-8"

For advanced developers, many of the leading web application frameworks, such as Java Server Faces, Java Portals, and the ASP.NET Mobile Internet toolkit, support HTML, WML, XHTML MP, and many other mobile markup languages out of the box. What does that mean? Well, that means you need to develop your content using only an abstract set of presentation widgets (e.g., buttons, labels, and text boxes). The framework detects the browser at runtime based on information embedded in the HTTP request header. If it is an HTML browser from a PC, the framework transforms the widgets to HTML presentation tags. If it is a WML browser from a Nokia phone, the framework transforms the widgets to WML markup and sets the text/vnd.wap.wml MIME type. From the developer's point of view, you need to write the content only once, and it automatically becomes available on all devices.

Protect Your Content

The .htaccess file in the Apache server also allows you to use passwords to protect certain directories on the server. It comes in very handy for a personal web site to provision downloadable content for private use. The following lines in the .htaccess file specify that only users with the username myself can access the content in this directory and its subdirectories. The clear-text usernames and encrypted passwords are stored in the file /apache/password.file.

	AuthType Basic
	AuthName "Personal Space"
	AuthUserFile /apache/password.file
	Require User myself

You can add username and password pairs to any password file using the htpasswd utility that comes with the Apache server. The following example adds the myself user to the /apache/password.file file:

	# htpasswd /apache/password.file myself
	New password: mypassword
	Re-type new password: mypassword
	Adding password for user myself

If the /apache/password.file file does not exist yet, you can use htpasswd -c to create a new file.

The mobile browser asks the user to authenticate himself using his user-name and password to access a protected directory.

In this example, I use HTTP Basic authentication to authenticate users. The username and password are transmitted in clear text over the Internet. For a more secure scheme, you need HTTP Digest authentication or an HTTPS connection.

You can place the password file anywhere on the server's local filesystem. However, you must not place it in directories that are accessible via public web browsers. A malicious hacker can fetch the password file and crack the passwords offline to gain access to your protected directories.

Nokia Browser Developer Tools

Forum Nokia provides several tools for developing and testing browser-based applications. All of these tools are freely available for download from the Tools section of the Forum Nokia web site (http://www.forum.nokia.com). The device emulators in the Series 40 and Series 60 Developer Platform SDKs emulate the phone's browser applications on a PC. You can start the device emulator from the SDK menu, navigate the browser application using the arrow keys, and enter the Internet address of your web page. Figure shows the emulator in action. The SDK emulator is sufficient for most developers to test their web sites, without a real device. The SDK comes with a network traffic monitor so that developers can see exactly what is transported over the network to the emulator (see Figure).

The Nokia Mobile Internet Toolkit (NMIT), which is another free tool from Forum Nokia, provides an editor for WML and XHTML MP pages. You can use it to validate the tag syntax and then launch a browser emulator to test the page.

The Nokia phone SDK emulator

The network traffic monitoring tool in the SDK

The Nokia WAP Gateway Simulator and Nokia WML Browser Emulator are two products that work together to emulate the entire end-to-end WAP infrastructure on the development PC. They are useful to developers who want to interact with the WAP gateway. Through the traffic monitor, you can see exactly how HTTP traffic is translated into WAP traffic, and vice versa.