How to develop an efficent website in mobiles using nokia webtemplates
From Forum Nokia Wiki
Contents
|
Introduction
Mobile Web Templates are a set of HTML resources that allow to easily build Web pages especially suited for mobile devices.
Mobile Web Templates for High-End devices contain some JavaScript components that allow to create and use interactive elements within a mobile web page.
Purpose of the Document
We can professionally customize our template by adding Templates.
Like,
- Html Website Templates
- Flash Website Templates
- PSD website templates
To handle this template you need to use any editor (like Dreamweaver, Aptana) and any graphics editor (like Photoshop, Flash).
The HTML based website templates can be edited in Dreamweaver, Aptana, Frontpage, Expression Web or Go Live. Graphics can be edited in Photoshop and Flash can be customized in Adobe Flash. Rollover the thumbnail images to view the enlarged images of the templates and click on the view button to see the live preview of the sites.
Audience
Readers of this document are expected to be familiar with the creation of Web sites, and to have a general familiarity with the technologies involved, such as Web servers and HTTP. Readers are not expected to have a background in mobile-specific technologies.
Our intention is to make it clear to all involved what the Best Practices are, and hence establish a common basis of understanding. As a result of wishing to be clear to those not already involved in the development of mobile friendly content, some of our statements may appear to be obvious or trivial to those with experience in this area.
The document is not targeted solely at developers; others, such as interaction and graphic designers are encouraged to read it.
Scope
In summary, this document refers primarily to the extension of Web browsing onto mobile devices.
As the goal of the document is to specify, that web content accessibility guidelines are general to all forms of Web Templates and are not repeated here unless they have a specific mobile interpretation.
For simple sites that present an interface which is similar across a broad range of contexts the need for such information is diminished when compared with a sophisticated site that has an optimized navigation structure, presents different size images or carries out other adaptations to suit the particular delivery context.
Web Templates are already designed websites or web-components, which can be customized according to our needs. e.g. A website template can be used to create your own website by just adding your content/ data in it. The main advantage of them is Re-usability.
Guide Lines
I feel that it is very important to take the base of these best practices and make it more accessible. With this in mind, our developer starts by describing the mobile landscape in detail, and the importance of the mobile context.
There are code samples and a lot of useful information. We then go on to describe actual techniques for putting together a mobile-friendly site and how to publish it.
This guide is designed for developers who are already familiar with web development in general, but now want to try their hand at mobile.
I'd love to hear your feedback. The more useful comments we get, the better the guide will be. You can leave comments directly on the page linked above or post something in our Forum.
In this article, you will see the various basic views such as the TextView, EditText, Button, and how you can use them in your applications.
Nokia Mobile Web Templates are pre-designed web components which can be used to make your website more attractive. Web Templates make sense speedy development in web design.
Here, we have used Mobile Web Templates for high-range devices in this example.
HTML Document Link (Quick reference)
What is HTML?
HTML is a language for describing web pages.
- HTML stands for Hyper Text Markup Language
- HTML is not a programming language, it is a markup language
- A markup language is a set of markup tags
- HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
- HTML tags are keywords surrounded by angle brackets like <html>
- HTML tags normally come in pairs like and
- The first tag in a pair is the start tag, the second tag is the end tag
- Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
- HTML documents describe web pages
- HTML documents contain HTML tags and plain text
- HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
Forms
A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, Checkboxes, etc.) in a form. A form is defined with the <form> tag.
<form> . input elements . </form>
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
First name:
<input type="text" name="firstname" />
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
<input type="radio" name="cat" value="Nokia" /> Nokia
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
I am agree: <input type="checkbox" name="vehicle" value="Bike" />
Button (Submit)
When the user clicks on the "Submit" button, the content of the form is sent to the server. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_submit.asp" method="get"> <input type="submit" value="Submit" /> </form>
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles).
- Nokia
- Samsung
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
- Nokia
- Samsung
CSS Document Link (Quick reference)
What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS files
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
How to Use Styles
There are three ways of inserting a style sheet: External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
Inline Styles
An inline style should be used when a unique style is to be applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
<tr><td>
This is a paragraph
</td></tr>
Creating Website With Website Layout
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.
Customized functions
Along using the the default web template components, we have kept some of our very own functionalities in the article which gives an example of upto which extent we can customize the web templates to make an effective website. The following are the couple of functionalities we have added to our website :
- Advertisment, to the upcoming product for visitors visited this website.
Click this link for viewing this page.
- Inquiry Form, to directly contact the Query Department, for some query about the product.
Click this link for viewing this page.
In this application I have made use of the mentioned Nokia Mobile Web components(High-Range device):
- Branding
- Navigation (Horizontal)
- Breadcrumbs
- Boxes (Flat, Rounded)
- Content (Text formatting)
- Lists (Unordered, Ordered)
- Advertisement
- Tables
- Grid
- Form
- Top/Home
- Header/Footer
- Phone/ Fax/ Email Link
Index Page
To visit this page click here.
index.html
MARQUEE
<ul class="breadcrumbs">
<li><marquee><h4>Connecting to the world</h2></marquee></li>
</ul>
LIST
<ul class="list">
<li class="first"><a href="../library/company_profile_f.html">Company Profile</a></li>
<li><a href="../library/mobile_f.html">Mobile</a></li>
<li><a href="../library/inquiry_form_f.html">Inquiry</a></li>
<li class="last"><a href="../library/contact_us_f.html">Contact Us</a></li>
</ul>
ADVERTISEMENT
<div class="advertisement">
<span><h4><a href="../library/ipod_f.html">advertisement</a></h4></span>
<div>
Company Profile Page
To visit this page click here.
company_profile_f.html
BRANDING
<div id="header">
<div class="branding">
<a href="http://mobapps.org/scity">
<img src="../resources/images/img-logo.png" alt="Logo" width="150" height="35"/>
</a>
</div>
</div>
BLOCKQUOTE
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</blockquote>
FLAT BOX
<div class="box-flat">
<form id="form1" method="post" action="">
<fieldset>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
</fieldset>
</form>
</div>
FOOTER
<div id="footer">
<ul class="nav-footer vertical">
<li class="first"><a href="../library/index.html">Home</a></li>
<li><a href="../library/mobile_f.html">Mobile</a></li>
<li><a href="../library/inquiry_form_f.html">Inquiry</a></li>
<li class="last"><a href="../library/contact_us_f.html">Contact Us</a></li>
</ul>
<p>Copyright © 2009 mobile</p>
<div class="stack" />
</div>
Mobile Page
To visit this page click here.
mobile_f.html
SLIDESHOW
<div id="slideshow" class="slideshow">
<a class="preview">
<img src="../resources/images/photos/large/loading.png" alt="loading" />
<span></span>
</a>
<ul class="controls nav-horizontal-rounded stack">
<li class="first two-piece"><a class="previous">previous</a></li>
<li class="last two-piece"><a class="next">next</a></li>
</ul>
<ol class="data">
<li>
<a href="../resources/images/photos/large/nokian97mini.png">
<img src="../resources/images/photos/large/nokian97mini.png" alt="nokian97mini" height="120" width="200"/>
</a>
</li>
</ol>
</div>
SIMPLE TABLE
<table>
<caption>
Choose your device.
</caption>
<tr>
<th scope="col">Nokia</th>
<th scope="col">Samsung</th>
<th scope="col">LG</th>
</tr>
<tr class="odd">
<td><a href="../library/mobile_specification_f.html">Nokia6233</a></td>
<td><a href="../library/mobile_specification_f.html">SamsungV</a></td>
<td><a href="../library/mobile_specification_f.html">LG200</a></td>
</tr>
<tr class="nav-footer">
<td><a href="../library/mobile_specification_f.html">Nokia6100</a></td>
<td><a href="../library/mobile_specification_f.html">Samsung10</a></td>
<td><a href="../library/mobile_specification_f.html">LG300</a></td>
</tr>
</table>
Mobile Specification Page
To visit this page click here.
mobile_specification_f.html
BREADCRUMBS
<ul class="breadcrumbs">
<li class="first"><a href="../library/index.html">Home</a> ></li>
<li>Profile</li>
</ul>
ROUNDED BOX
<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer" height="5px" align="middle">
<h2></h2><a href="../resources/images/nokian97mini.jpg">
<img src="../resources/images/nokian97mini.jpg" width="250" height="250" /> </a><h2></h2>
<div class="rating stars-3"><span>3/5</span></div>
<h3>5-star rating</h3>
</div>
</div>
</div>
TOP & HEADER TABLE
<table>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
</tr>
<tr>
<th scope="row">Dimensions:</th>
<td>113 x 52.5 x 14.2 mm </td>
</tr>
</table>
TOP NAVIGATION
<div class="top">
<a href="#header">Back to top</a>
</div>
Mobile Specification Detail Page
To visit this page click here.
mobile_specification_more_f.html
CONTENT
HTML uses tags for formatting output, like bold or italic text, color.
These HTML tags are called formatting tags.
Here, you can also use any type of .css for the text formatting.
iPod Page
To visit this page click here.
ipod_f.html
HORIZONTAL BUTTON BAR
<UL class="nav-horizontal-rounded stack">
<LI class="first four-piece"><A
href="../library/index.html">Home</A> </LI>
<LI class=four-piece><A
href="../library/mobile_f.html">Mobile</A> </LI>
<LI class=four-piece><A
href="../library/inquiry_form_f.html">Inquiry</A> </LI>
<LI class="last four-piece"><A
href="../library/contact_us_f.html">Contact Us</A> </LI>
</UL>
ROUNDED BOX
<div class="box-rounded">
<div class="box-rounded-inner">
<div class="box-rounded-outer" height="5px" align="middle">
<h2></h2><a href="../resources/images/nokian97mini.jpg">
<img src="../resources/images/nokian97mini.jpg" width="250" height="250" /> </a><h2></h2>
<div class="rating stars-3"><span>3/5</span></div>
<h3>5-star rating</h3>
</div>
</div>
</div>
5-STAR RATING
<TR><TD>
<div class="rating stars-3" >
<span>3/5</span>
</div>
</TD></TR>
HOME NAVIGATION
<div class="home">
<a href="../library/index.html">Home</a>
</div>
GRID
<UL class=grid>
<LI><IMG alt=image
src="../resources/images/image1.jpg" width="80" height="80">
<LI><IMG alt=image
src="../resources/images/image5.jpg" width="80" height="80">
</LI></UL>
Inquiry Form Page
To visit this page click here.
inquiry_form_f.html
FORM & BUTTON
For form and button code I mantioned that in the above topic so there were not repeated here.
Contact Us Page
To visit this page click here.
contact_us_f.html
TELEPHONE & EMAIL
<p>Tel: <a href="tel:(020) 8563 3000">(020) 8563 3000</a></p>
<p>Email: <a href="info@mobile.org.uk">info@mobile.org.uk</a></p>
Testing
These sites are tested on S60 5th Edition emulators.
You can test them in your own Nokia high end devices and see what the web templates makes the difference.
Website Link
The readers can see the actual website which is built using Nokia Mobile Web Templates by following this link.
For Best view the author recommends to see the mobile website in S60 5th edition devices.
References
Related Wiki Articles
No related wiki articles found
