×
Namespaces

Variants
Actions
Revision as of 09:37, 8 May 2012 by hamishwillee (Talk | contribs)

Example Web-site: Using Nokia Web Templates for High end devices

From Nokia Developer Wiki
Jump to: navigation, search

This article provides an example of a website template using Nokia Web Templates for High end devices and is mainly intended for beginners. For more information see How to develop a simple website using Nokia Mobile Web Templates.

Article Metadata
Article
Created: deepikagohil (31 Oct 2009)
Last edited: hamishwillee (08 May 2012)

Contents

Introduction

Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive on Nokia mobiles. We have used Nokia Mobile Web Templates for High End devices in this example.

The developer should have basic knowledge of HTML and CSS to go through this article.

The example mentioned here shows a simple mobile website using Nokia Mobile web templates for high-end devices and you can refer this example web-site at http://electelectronics.99k.org.

The website template is for an Electronics company. In this Project we have made use of the mentioned Nokia mobile web components (for high end devices) offered by Nokia Mobile web Templates:

  • Branding
  • Breadcrumbs
  • Content
  • Containers
  • Lists
  • Tables
  • Grid
  • nav-footer
  • External links
  • Advertisement Container
  • Form


You can get detailed information about the use of these components at " How to develop a simple website using Nokia Mobile Web Templates " article.

Some components which have not been explained in the previous article will be explained here. Moreover some customized components, which are also added to this website, will also be explained here.


Explanation

External Links:

Exlinks.jpg

code:

<tr><th>Phone:</th>
<td><a href="tel:1234567890">1234567890</a></td>
</tr>
<tr><th>Email:</th>
<td><a href="mailto:inquiry@xyz.com">inquiry@xyz.com</a></td>
</tr>

Description:

In this example, exterrnal links are added to telephone number and email. This component adds a special functionality to the user and it can be customized as per our needs. If the user wants to make a call to the specific number, he can easily do this by just clicking on it. or he may want to send a mail to that specific e-mail, he can do it with less efforts.


Graphical ListBox:

Gralist.jpg

code:

<ul class="list-graphical-inline stack">
<li><a href="phone.html"><img src="resources/images/pictures/phone1.jpg" height=40 alt="image" />Mobile phones</a></li>
<li><a href="tv.html"><img src="resources/images/pictures/tv1.jpg" height=40 alt="image" />Telvision sets</a></li>
<li><a href="ac.html"><img src="resources/images/pictures/ac1.jpg" height=40 alt="image" />Air Conditioners</a></li>
<li><a href="monitor.html"><img src="resources/images/pictures/monitor1.jpg" height=40 alt="image" />Computer Products</a></li>
</ul>

Description:

Graphical list box component represents a list with an image. It is very useful when you need to explore the content of your list with images.


Adver.jpg

code:

<ul class="advertisement">
<li><p>advertisement-1 : Go for a holiday</p><img src="resources/images/ad1.jpg" align="left" height=100 alt="image" /></li>
<li><p>advertisement-1 : 50 % off on every product</p><img src="resources/images/ad2.jpg" align="left" height=100 alt="image" /></li>
 
</ul>

Description:

Advertisement container is used to display advertisements on your website. We have used this component as per our needs in the given example.


Some Customized Components:

Registration Form:

Registrationf.jpg

code:

<! form starts>
 
<h5>If you want to register for our newsletters enter your dealis given below:</h5>
<form action="submit.html" method="post">
<table><tr>
<td>Name:</td>
<td><input type="text"></td></tr>
<tr><td>Email:</td>
<td><input type="text"></td></tr></table>
<button value="submit" class="button-submit"><span>Submit</span></button>
</form>
 
<! form ends>

Description:

This is the very important part of our web-site, which allows user to sumit his information to the company and company will provide daily newsletter to him. We are getting user's name and e-mail ID as primary data. We have customized the table component provided by Nokia Web Templates for high end devices to create a form as per our requirement.


Testing

These site is tested on Nokia S60 5th Edition emulator and Nokia N97 device.

You can test them in your own Nokia high end device and see what the web components makes the difference.


Links

http://electelectronics.99k.org

High-end Templates


Summary

You can learn how to use and customize Nokia Web Templates (for high end devices) with the help of this article and create your own web-site.

80 page views in the last 30 days.