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.

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

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

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

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).

Download sample

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.

WML for mobile webpages

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.

Download the WML sample here.

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.

HTML for mobile web pages

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 tag to open a paragraph without the companion 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 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.

HTML is now fully used by latest mobile phones and almost eclipsed the use of WAP format.

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.


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" , HTML, WML, and XHTML MP browsers are the ones you're most likely to find on Nokia devices.

Bookmarks for your portal

The portal cannot possibly aggregate all content from all web sites. If you visit certain sites often, you can put their URLs in the Bookmarks section of the portal. That saves you from entering the URLs on the phone keypad from time to time. It is a lot easier to manage the long URLs on a desktop computer via the portal's web interface than it is to deal with them on the phone.

Aggregated web content

The T-Mobile portal aggregates and displays the following web content on your phone browser:

• Movie listings and show times from your local theaters
• Your local weather forecast
• Quotes for stock and major fund prices
• Categorized news from various Internet sites
• Sports scores from your favorite teams
• Your daily horoscope
• Winning lottery numbers

The operator makes deals with the content providers so that you can view the information in the portal for free.

The Wireless Operator's Portal

Your wireless operator already has a portal for you! If you got your phone from the operator (or an authorized reseller), the portal's URL is probably already defined in the Bookmarks section of your Services browser. In this section, I'll use T-Mobile USA's T-Zones service as an example. Other operators' mobile portals are similar.

For most operators, you need to register an account on the operator's web site to personalize the portal content. The T-Mobile USA web site is http://www.t-mobile.com/. Your account is associated with your phone number. You can check your bills, minutes, and service subscriptions from the web site. Of course, you also can customize your portal via the web site. To get this customization page, click the T-Zones Settings link toward the top of the page after you log in.

From the web-management interface, you can even preview the portal configured for the mobile device.

Then, to access the T-Mobile portal from the phone's Services browser, enter the web address http://wap.myvoicestream.com/. On the phone browser, the portal page is divided into sections, and you can navigate through them via a series of menu-like links. Notice that the theaters listed on the mobile portal page are the same ones configured in the management interface.

A key benefit of using the wireless operator's portal is that your device is automatically logged into the account, without requiring you to type a user-name and password on the keypad. How does that work? Well, recall that your portal account is associated with your phone number. Since the wireless operator knows where a General Packet Radio Service (GPRS) request originated (i.e., your phone number) at the WAP gateway, it can automatically log you into the portal.

Now, let's dig deeper into the content and services the T-Mobile portal offers. Other wireless operators have similar options.

The Mobile Web in Bite-Size Chunks

Mobile portals give you a launching-off point for your mobile web experience. But to make an intelligent choice of portals, you need to understand the core features and differences between portal services.

Accessing web sites directly via their URLs is OK if you have only a handful of web sites to visit. You can simply manage them in your browser's bookmarks and load each of them by hand. However, if you need to keep track of many web sites, managing and loading them individually is cumbersome. Here is where web portals come in handy.

Portals and search engines are among the most frequently visited web sites on the Internet. A portal provides a single point of entry to access a wide variety of information on the Web. In the desktop PC world, the portal is primarily a content aggregator to help users track the ever-changing Internet. In the world of the mobile Web, however, portals play a much more important role than they do on the desktop:

A mobile portal can aggregate content from regular, nonmobile Internet sources and present them in a format that is friendly to mobile browsers. For example, it can take a long story from the New York Times' HTML web site or a blogger's Really Simple Syndication (RSS) feed, break it into multiple smaller pages, and then feed it to the mobile browser as WML content.

A mobile portal saves you from having to remember and type multiple URLs and usernames/passwords on a small phone keypad.

With for-pay mobile content, a portal saves you the hassle of dealing with multiple content providers and billing services.

Most mobile web portals mobile portal solutions today are based on the concept of a "personalized portal." That is, first you register a personal account with the portal. Using a desktop PC, you can log into the portal's management interface and customize its contents. You specify what content your personal portal account will aggregate and display. Then, on the mobile phone, you see a personalized portal site that displays its contents according to your account settings. The separation between the management and view interfaces is a very smart design. You complete most of the interactions that require user input on the PC via the management interface. On your mobile device, you can stay in the comfortable "navigate and read" mode most of the time.

As you can imagine, the mobile portal is a great place to reach out to billions of mobile data users. So, many companies are in this space, competing for your business. In this hack, I'll introduce you to some of the most popular portals available via your Nokia phone.

WebViewer: A Java-Powered Browser

The Opera browser is great, but it does not run on Nokia Series 40 devices. Even with accelerator proxy support, it still makes heavy use of the Series 60 device's network and CPU resources, since it still needs to parse and render the HTML code. If you want to browse HTML pages from a Nokia Series 40 device or use a browser that runs faster on a Nokia Series 60 device, you can choose Reqwireless's Java-based web client, called WebViewer.

The idea behind WebViewer is to push the browser proxy to the limit. The WebViewer client is only 48 KB, and you can install it on even first-generation Series 40 devices, such as the Nokia 7210. Without the proxy, the browser cannot render any web pages. In fact, the browser is configured to connect to the proxy only. The proxy not only fetches and resizes web content on behalf of the browser, but also parses the HTML and decides how to render the page. These rendering instructions, together with any embedded images and other media objects, are returned to the WebViewer browser in a highly compressed, proprietary binary format. This way, the device browser does not need to parse the HTML and manage the layout. It simply follows the well-formed instructions from the proxy to place text and images at specified places on the screen. The proxy renders the page to fit the device's screen size so that you will never need to scroll horizontally (similar to the SSR mode in the Opera browser).

The Opera Browser with Proxy

The standalone Opera browser is powerful and feature rich. But it does not solve the fundamental issue with wireless networks that hinders the adoption of the mobile Web: the mobile data network is slow and often expensive. For graphics-intensive web pages, the Opera browser needs to first open multiple HTTP connections to download all the images, and then resize them to fit the device screen if SSR is used. That is a slow and bandwidth-intensive process. The multiple round trips needed to fetch images occur very slowly in high-latency wireless networks. This process also quickly drains the battery, due to heavy CPU usage.

If you do not care much about images, you can turn them off from Opera's Settings menu, which will speed things up considerably. Alternatively, Opera displays the page before it downloads all the images. So, you can press the Stop command to stop loading images if the text page is good enough.

The Opera Mobile Accelerator is a subscription-based service that can drastically improve Opera browser performance. The idea is to delegate much of the bandwidth-and CPU-intensive work from the mobile device to a proxy server. When you request a URL from the Opera browser, the request is forwarded to the proxy server, a server running on the Opera network that downloads web pages and images on your behalf. The proxy server fetches the web page and all the images in it, resizes the images, compresses all of them into a more compact format, and then returns the compressed package to the mobile browser. The mobile browser receives the optimized and compressed page and displays it.

It is easy to configure the accelerator proxy for your device. Just load the URL http://www.opera.com/proxy in Opera and the browser automatically configures itself. Behind the scenes, the browser is configured to talk to an HTTP proxy hosted by Opera. Once the Opera browser is configured for the proxy, you get a 14-day trial period to try the service for free. Beyond that, you have to pay a monthly subscription to continue using the proxy service. The proxy server identifies your browser via the phone's International Mobile Equipment Identity (IMEI) number and verifies its subscription status. If you decide not to use the service at any time, just go to the Settings Advanced menu and disable the proxy.