Introduction
It’s all about speed – how fast can you get to the information you want on a mobile device? It may be your contacts, or the online directions to Tulsa, but the majority of the UI is geared to making sure you don’t have to do a lot to get anywhere. So, in the best spirit of MacGyver, I thought I’d illustrate this by hacking together a ‘launch’ page for your web browser. You can of course use Bookmarks, but putting everything on a web page does have its benefits.
Now, if your mobile web browser (be it Nokia’s Web Core based version on S60 v3, Opera, Opera Mini, Netfront, or some weird Lynx based midlet) has had enough care and attention placed on it, you’ll have the option to start with the bookmarks page on display. However there's often no prioritisation, screen real estate is poorly used and the Bookmark list can be unwieldy beyond a certain size. One possible solution to this is the default start page that's present in most browsers.
And that’s the key to getting a fast access page. You can create your own web page that is your default starting page. At its simplest you place links to your favourite sites, but you can also potentially put other stuff here too (such as a search box). The advantage of storing it locally (on your device) is that it will load instantly.
So here's a crash course in making a web page: add in some links (and we’ll show you how to do your own); and putting it onto the phone. We're going to keep it simple, bear in mind its possible to do a lot more.
Creating your custom page
Right then, a web page is nothing more than a text file, with instuctions to the web browser about how to display parts of that text. For example, to show something in bold type, you put in a marker that says ‘show the next bit in bold’ and another that says ‘stop showing this in bold.’ This applies to pretty much anything, from font settings, to html links and pictures. These markers are shown in <> arrow brackets. A start marker has the keyword, and a stop marker has the same keyword but preceeded by a / backslash.
First of all, three markers that should appear in every web page are ‘html’ to show that everything is in the HTML language, a header section, and the main body of what is displayed. Put those three together in a text file (name it something like mybookmark.htm) and your blank page will read like this.
<html>
<head>
</head>
<body>
</body>
</html>
Now, we’re going to add two elements. The first is to tile the page, using the title tag. Let’s call it ‘My Bookmarks.’ So we want to tell the web browser that the text phrase My Bookmarks is a title, so we want to add in this line…
<title>My Bookmarks</title>
...and as it is information about the page, it goes into the header section, so between the <head> and </head> text.
<html>
<head>
<title>My Bookmarks</title>
</head>
<body>
</body>
</html>
Right then, time to add in some links to websites. This is a similar process to the title tag, but as well as telling the web browser what to display, we also need to pass it some information behind the scenes as well, namely the url to where we want to go.
Links in a web page are called anchors, so the keyword is ‘a.’ To pass the url, we use a second keyword, href, and make it equal to something, in this case the url. So let’s look at a link to All About Symbian…
<a href=”http://www.allaboutsymbian.com/">All About Symbian</a>
On screen this shows the text of All About Symbian as a link (as it has a starter <a> tag and a closing </a> tag). The extra information of the URL is still inside the arrow brackets, so it is not shown on screen, but it is still available. So adding this to our basic start web page, we have
<html>
<head>
<title>My Bookmarks</title>
</head>
<body>
<a href=”http://www.allaboutsymbian.com/">All About Symbian</a>
</body>
</html>
What you can do now is start thinking about what website links you want in your page, and add them in to the body of the html page after the All About Symbian link (or even replace us if you want). A useful tags for beginners is the <br /> tag - this insert a carriage return (or line break) in the page. There's obviously a lot more to HTML and if you want to find out more there is a lot of information that is just a Google away.
To give you an idea of the basics here is a more complete page with more complex HTML and an extra feature - a Google Search box. If you want to use this page simply save it from your PC browser and transfer it to the phone as described below.
Getting your custom page on to your phone
Now we have our file, we need to move it onto our phone. This is done with the regular Windows PC Suite software that comes bundled with every S60 or UIQ device. Connect your phone in the same way as you would to synchronise the data (so over Bluetooth, USB cable, or in some cases infra-red). Open up Windows Explorer, and you’ll see your phone, listed either as Nokia Phone Browser (S60) or Mobile Device (UIQ).
For Nokia devices, open this folder, and select your now connected phone, and choose the main phone memory (almost always listed as C: ). For UIQ devices, you can place your web page in the top level folder, but Nokia S60 devices it is better to place it in the Data folder. But it is up to you, and just remember where you do place it.
One last step, and that’s to tell your web browser that when it starts, it needs to load and show this web page.
Nokia Web Browser (S60 3rd Edition / Web).
Open up the browser and go to the settings menu. The second line is homepage, click on this and choose user defined. You’ll get a dialog box asking you for a web page address. If you followed the above instructions, type in…
file://c:/data/startup.htm
And that’s that. You can test this by calling up the homepage from the menu, or just restart your web browser..
UIQ Web Browser (UIQ 3 / Opera).
The UIQ browser doesn’t have an option to set a homepage, you’ll always start up at the bookmarks page – which of course is precisely what this tutorial is setting up on any device – but if you’re working through and want to add in your own page, the best way is to open the page, again with the "file://" URL, and add it to the bookmarks screen. Place the start up page at the very top, ie when you start the application it will be just one click away.
Ewan Spence, April 2007