There are tons of mobile phone users throughout the world, with the numbers growing rapidly. However, it seems that no place on Earth is as crazy for wireless computing as Japan. In fact, as of early 2001, 81% of the world's wireless Internet users could be found in Japan—we're talking about 20 million people!
There are many reasons for this success: dial-up Internet connectivity is expensive compared to mobile access; Japanese people spend an extremely large amount of time on public transportation; and Japanese culture meshes well with “cute” gadgets. But the foremost reason for the success of wireless computing is that Japan's leading wireless provider, NTT DoCoMo, made some smart choices and put together the right technologies and infrastructure to make mobile data access fun, easy, and well worth its price.
The network that serves all this up is called i-mode.
If you live in North America, i-mode is also coming to a phone near you: Last year, NTT DoCoMo bought 16% of AT&T Wireless, as well as pieces of wireless companies in the Netherlands, United Kingdom, Taiwan, and Hong Kong. In fact, the first American i-mode service is expected to roll out in Seattle at the end of 2001.
NTT DoCoMo has focused on making i-mode easy to use. If you opt to add i-mode service to your mobile phone, there will usually be a special button for i-mode features. When you press this button, a special menu with your favorite sites pops up, along with an index of 600 preferred i-mode partner sites.
i-mode service costs 300 yen (about $3) per month, and you are charged 0.3 yen for every 128-byte data packet. Unlike most American and European wireless services, you are not charged based on how long you are connected, but based on how much data you transfer. This is another big reason for i-mode's success: If you download a small adventure story and read it for 30 minutes, you are only charged a few pennies for the download size, not exorbitant fees for the 30 minutes.
NOTE
Many i-mode games are designed to have small packet sizes, with requests for new data as infrequently as possible.
In addition, most of i-mode's most popular sites charge a monthly access fee. Many game portals, for instance, charge an additional 300 yen per month. The charge is automatically tacked on to your wireless bill, and profits are split between NTT DoCoMo and the content provider.
NOTE
If you want to become an i-mode developer or find out more information about the business model, check out the English Web site at http://www.nttdocomo.com/
Many of today's i-mode handsets feature color screens. The latest i-mode phones now also support a version of Java called iAppli. For more information about this, check out Chapter 22, “iAppli: Micro Java with a Twist.”
URL: http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/
Just as WAP has WML, the markup language used to create i-mode sites is cHTML. cHTML is nothing more than a subset of HTML versions 2.0, 3.2, and 4.0. The language also has a few special extras, such as tags that enable the user to dial a voice phone connection. There are also a special set of characters called emoji that enable you to drop in small graphic icons based on emotions, communication, transportation, and home life.
The simplicity of cHTML is also its power. Developers can use the dozens of Web authoring tools and services out on the market to build cHTML. In addition, a valid cHTML page is, by definition, valid HTML, and thus can be run or tested in any Web browser—although certain tags are specific to i-mode and will not show up properly. Furthermore, i-mode users can access any Web page in the world and see a simplified but complete version of it on their mobile phone screens.
WARNING
In practice, if you try to browse a Web page that hasn't been formatted for the small screen using cHTML, the page might be bigger than your handset's display size or memory, and only a portion of it will be shown.
Unlike WML 1.1, cHTML supports color, precise text and graphic placements, and other features more typical of complex, rich Web pages than the typical dinky wireless data applications.
cHTML was created by Access Co., Ltd. The World Wide Web Consortium (W3C) standardized the language in 1998. NTT DoCoMo phones currently run three versions of cHTML, each more sophisticated than the previous one.
Because i-mode is currently only available in Japan, if you want to create an i-mode game you would do well to write all text in Japanese. The name of the encoding standard used with i-mode is Shift-JIS.
English characters, using the Western Encoding standard (ISO-8859-1), are also supported.
URL: http://www.nttdocomo.co.jp/english/p_s/i/tag/emoji/
One of i-mode's most often used features are small graphical icons known as emoji, or “picture characters.” In all, there are 196 different icons, each the size of a text character, which can be dropped anywhere in a cHTML page.
Because the full set of emoji are stored on each i-mode phone, no graphical download is necessary. To create an emoji using cHTML, just use the &# escape characters along with the decimal code, followed by a semicolon. For example:

Emoji are associated with the following:
Several emoji can be seen in Figure 6.1.
A full list of emoji can be found at NTT DoCoMo's Web site.
A cHTML file looks exactly like an HTML file. It begins with <HTML>, ends with </HTML>, and has a <HEAD> section and a <BODY> section:
<HTML> <HEAD> <TITLE>My Page</TITLE> </HEAD> <BODY BGCOLOR="#000000"> </BODY> </HTML>
NOTE
The BGCOLOR background color attribute, of course, is only relevant on color phones. Black and white phones will ignore any color settings.
If you like, you can use <META> tags to let search engines and other Web-sniffing software know that the document is cHTML. The description should be fewer than 10 characters long:
<META name="CHTML" content="yes"><META name="description" content="Neat Page">
Although using <META> tags is recommended, it is not required.
Table 6.1 includes a list and short description of the common tags and tag attributes that i-mode's version of cHTML supports. For an in-depth description of these tags, it is suggested that you pick up a separate book about HTML or cHTML.
Table 6.1. Image Format Support
| Tag | Function |
|---|---|
<!— —>
| A comment. |
&XXX;
| Designates an escape character. For example, & creates an ampersand.
|
<BASE href=http://www.base.com/>
| A base URL. All paths used in the file will be relative to this URL. |
<BLINK>
| Blinks text. |
<BLOCKQUOTE>
| Puts text in a special quote block, surrounded by quotation marks. |
<BR>
| A line break. |
<CENTER>
| Centers blocks of text, images, or tables. |
<DL>, <DD>, <DT>
| Creates a definition list. |
<DIR> or <MENU> along with <LI>
| Creates a list of menus or directories. |
<DIV align="left">
| Aligns a block of text to the left, center, or right. |
<FONT color="#000000">
| Changes the color of a given piece of text. |
<HR>
| Creates a horizontal rule (a line). |
<UL> or <OL> along with <LI>
| Creates an ordered or unordered list. |
<OBJECT>
| Adds a Java applet or other object to the page. See Chapter 22 for more information. |
<P>
| Creates a paragraph text block. |
<PLAINTEXT>
| Displays text exactly as typed, including all white space or other characters. |
<PRE>
| Displays text in preformatted font, including line feeds and white space. |
cHTML enables you to create forms in exactly the same way you would with HTML.
Use the <FORM> and </FORM> tags to indicate a form, and use the method attribute to get or post the form to a servlet or other server-side CGI script. An additional attribute called utn enables you to designate the user's identification.
You can then use the <INPUT> tag to create various input widgets, using the name attribute to name each field. For example
<INPUT type=”text” name=”myfield” size=”10”>—. Creates a text field that is 10 characters wide. This is the default type. If you don't include atypeattribute, then the input widget will be a text field.<INPUT type=”password” name=”mypass” value=”hello”>—. Creates a password field with the initial value of"hello".<INPUT type=”checkbox” name=”box1” checked>—. Creates a true/false checkbox that is checked by default.<INPUT type=”radio” name=”radiogrp”>—. Creates a radio button.<INPUT type=”hidden” name=”secret” value=”secretval”>—. Creates a hidden field, enabling you to pass back variables to the server without the user being aware of it.<INPUT type=”submit” value=”Hit Me”>—. A submit button. When this is pressed, the form names and values will be passed to the server, as indicated in the<FORM>tag'smethodattribute.<INPUT type=”clear” value=”Reset Form”>—. A clear button. When this is pressed, all text fields are emptied.
An additional parameter you can add to most types of <INPUT> tags is accesskey. This useful option lets you associate a numeric key on the phone's pad with the input element. When this key is pressed, the given input widget will automatically be selected. You can set this value from 0 to 9.
For example, if you want to make it easy for a user to quickly access an input field to enter their name, you can write
Name: <INPUT name="Myname" accesskey="1">
Additionally, the istyle attribute lets you set the default character input mode. Supported in cHTML version 2, this attribute can help users quickly fill in forms. Values include
1—. Full-space kana (Japanese letters)2—. Half-space kana (Japanese letters)3—. Alphabetic4—. Numeric
For example, if you have an input field for a phone number, you can set the default to numerals:
<INPUT istyle="4">
Password-type fields are automatically set to use the numeric style.
You can easily create a selection list using the <SELECT> tag. For example
<SELECT name="mylist" size="3" multiple> <OPTION selected value="1">First Value</OPTION> <OPTION selected value="2">Second Value</OPTION> <OPTION selected value="3">Third Value</OPTION> </SELECT>
The size attribute indicates the maximum number of rows long the list should be. The multiple attribute permits the user to select more than one option.
One of the most important tags is the <A> anchor tag, which permits you to jump back and forth between different documents, or within the same page. To create an anchor, you use the name attribute
<A name="here">
And then to jump to the anchor
<A href="#here">
You can also jump directly to another cHTML page by designating the URL:
<A href="http://www.anotherpage.com/>
There are also some specific commands that HTML doesn't support. The <A> tag can handle the accesskey attribute. For example, you can set it up so that if the user hits the 3 key, she will automatically be taken to the Neato.com cHTML site:
<A accesskey="3" href="http://www.neato.com/">Hit 3 To Go To Neato</A>
But wait, there's more! You can actually permit a user to dial the phone from a cHTML page:
<A href="tel:5551212">Call Mr. Suzuki</A>
You can also add a record to the mobile phone's stored telephone book:
<A telbook="Suzuki" kana="i" e-mail="[email protected]">Add Suzuki to the Phone Book</A>
Additionally, you can also ship off an e-mail to a specific address with a given subject and body:
<A href="mailto:[email protected]" subject="My Subject" body="This is an e-mail [ic:ccc] fromi-mode.">Send an E-mail!</A>
More info about these tags can be found on NTT DoCoMo's Web site at http://www.nttdocomo.co.jp/english/p_s/i/tag/.
You can use GIF- and JPG-formatted images in your cHTML pages. Note, however, that the image size needs to be smaller than your target screen—usually that means the image will be 100×100 pixels or fewer.
Using a GIF with cHTML is the same as using one in HTML:
<img src="myimage.gif" alt="Alternate Text">
You can also use the align attribute to align nearby text with the image (set to top, middle, or bottom).
Additionally, you can set the width, height, and hspace for horizontal space to the left and right of the image, or vspace to add buffer space above and below the image.
Although many i-mode handsets only support black and white screens, a growing number feature 256-color screens. Many of today's i-mode handsets are also capable of displaying animated GIF 89a images.
Table 6.2 shows which types of images are supported by various cHTML versions.
Table 6.2. Image Format Support
| Format | 3.0 | 2.0 | 1.0 |
|---|---|---|---|
| Non-interlaced GIF | Supported | Supported | Supported |
| Interlaced GIF | Supported | Supported | Converted to non-interlaced GIF |
| Transparent GIF | Supported | Supported by color phones | Converted to non-interlaced GIF |
| Animated GIF 89a | Supported | Supported | Converted to non-interlaced GIF |
| JPEG | Only supported by some phones | Not supported | Not supported |
There are some limitations and guidelines for animated GIFs:
Always remember to keep the document beneath the 5KB file size maximum!
Another neat tag that cHTML supports is <MARQUEE>, which allows you to add horizontally-scrolling tickers to the cell phone screen. The marquee is one line high and as wide as the screen allows.
The <marquee> tag takes the following attributes:
behavior—. You can set this toscrollto have text stop at the edge of the screen,slideto make text slide offscreen, oralternateto have it scroll back and forth.direction—. Set this toleftorrightto indicate which direction you want the text to scroll.loop—. Indicate how many different times you want the text to scroll. The maximum value is16.
There are a number of different cHTML- and i-mode-specific development tools that enable you to quickly craft and test your i-mode site.
Here are a few to check out:
URL: http://www.wapprofit.com/products/imodedownload.html
A Windows editor specifically geared to i-mode. You can easily create quick menus and emulate your site on a typical handset.
i-JADE
After you've completed your i-mode site, you might want to be sure it looks good on a number of different handsets.
Because cHTML is ultra-similar to HTML, you can actually test out much of your site using Internet Explorer or Netscape. However, this is only a good way of ensuring that all links are working properly. You won't be able to get a real idea of what your page will look like on an actual phone. Also, i-mode-specific tags and emoji will not work.
Unfortunately, most i-mode emulators are currently in Japanese. The reasons for this are obvious: The vast majority of i-mode users are Japanese, and in Japan it is very easy to use an actual i-mode phone to test your cHTML pages. Additionally, i-mode has an extremely wide variety of handsets. It is difficult to see exactly what users experience without using a real i-mode handset.
There are a number of emulators available, however, to give you a general sense of how things will really shape up. Unless you speak the language, you might have to play around a bit before understanding how everything works.
URL: http://www.asahi-net.or.jp/~tz2s-nsmr/soft/itool/i-tool.htm
Shown in Figure 6.2, this is a full-featured i-mode Emulator that simulates D501i/F501i, P501i, and N501i phones
Ezos
URL: http://www.ezos.com/
i-browser
URL: http://www.charlietai.com/imode/
A Windows i-mode browser.
URL: http://www.monde.to/imode/
An online i-mode browser.
The Pixo Internet Microbrowser
URL: http://www.pixo.com/
X9 i-Mimic
URL: http://www.x-9.com/mimic/
A full i-mode emulator. The emulator is Web-based and tells you the document size, image size, and total size. It will even estimate the page download time and packet charge.
Additionally, there are third-party testing companies who will test your i-mode or iAppli pages on tons of actual i-mode handsets. For example, check out NooperLabs at http://nooper.co.jp/labs/.
As you can see, i-mode and cHTML provide developers with a pretty powerful and easy-to-write method for bringing content to wireless phones.
As i-mode becomes more widespread, you can expect to see it evolve and possibly even merge with WAP to provide a powerful framework in which to place your Micro Java games.
Just as Java applets sit in HTML Web pages, your games can be surrounded by and supported by these cHTML pages. Chapter 22 has more information about how to make this happen.