Jump to content
xisto Community
emperor

How To Make A Very Simple Wap Site A quick tutorial about WML language

Recommended Posts

WAP Site Tutorial : How to Make A Wap site?

Before We begin.. Definition from the Web about Wap.

 


Wireless Application Protocol (WAP) is a technical standard for accessing information over a mobile wireless network. A WAP browser is a web browser for mobile devices such as mobile phones that uses the protocol. Before the introduction of WAP, mobile service providers had limited opportunities to offer interactive data services, but needed interactivity to support Internet and Web applications such as:


 

  • Email by mobile phone
  • Tracking of stock-market prices
  • Sports results
  • News headlines
  • Music downloads

 

Wap site Tutorial - 1- CREATE A WML FILE

 

 

To create a WML files you can use any html editors (notepad, too) but I suggest Apoo that you can download An attribute of <a> is "title", too. By declaring it, you will obtain a better result in some mobile.

This is for a normal link, but if you want a link controlled by mobile keys (for example when you choose "menu" in a mobile), you need another tags.
404.png
link is a link made with <a href>, NEXT is made with next tags.
The first is <do> </do>. This tag has two important attribute: "title" and "type". The first is the title that will appear on the mobile (for example "NEXT").
About the second we suggest to write "accept", this mean the pressure of the key.
Then there is the tag <go/> that will be placed between <do> and </do>. It has the attributes "href" and "method". The first is equal to the "href" of <a>. "Method" is equal to the "method" of forms, now we can leave it empty.
This is an example where there is a link that link to another CARD in the same file:



<CARD>
<do type="accept" title="next">
<go href="#CARD2"/>
</do>
<p>
push the key to go to the next view
</p>
</CARD>
<CARD id="CARD2">
<p>
next view.
</p>
</CARD>



You can see that if you would make a link to another CARD you must place a # before the ID of the CARD.

You can replace the tag <go/> with <prev/>, so by pushing the key you will go to the previous view.

Another way to surf the site is using the numeric keybord.
For this exist the attribute "accesskey", it is an attribute of <a> and it can has any value between 0 and 9 (the keys of the mobile)


 

Wap site Tutorial - 5- FORMS


The code needed to place a text field is similar to HTML, in fact the tag is <input/>.

A particular attribute of <input/> in WML is "emptyok". If it has value equal to "false" the visitor must fill this field.

Another is "format", if you set it "X" all text will be written in capitol letters. If you want that the visitor write only a limited number of chars (all capitol letters) you can set "format" as place the maximum numer of chars before "X" ("10X", "3X", etc..). By replacing "X" with "x" you will obtain the same result with not capitol letters.
An example:



<input name="city" maxlength="2" emptyok="false" format="10X" value="CA" />


Another attribute is "type". If you set this to "password", you'll obtain a password field.

Another element of forms is the multiple choice. It's made with the tags <select> and <option>. The most inportant attribute of select is "multiple", by setting it to "true" you will obtain a radio button (multiple selection allowed), if "false" a check box(multiple selection not allowed).
An example:



<select multiple="true" name="color">
<option value="1">red</option>
<option value="2">yellow</option>
<option value="3">blue</option>
</select>



 

Wap site Tutorial - 6- A SPLASH SCREEN


With the function <timer> you can create a splash screen. This tag has the attribute "value", this value is the number of seconds*10 (for example, for 5 seconds you must write 50).
Then you must declare the attribute "ontimer", this is an attribute of <CARD> and it explain what must be view in the splash screen.
An example:



<CARD ontimer="welcome.wml">
<timer value="50"/>
<p>this is the homepage</p>
</CARD>



 

Wap site Tutorial - 7- ADVANCED FEATURE


 


<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml;
<wml>
<card title="test" ordered="false">
<do type="ACCEPT">
<go method="post" href="....">
<postfield name="name" value="$name"/>
<postfield name="surname" value="$surname"/>
</go>
</do>
<do type="options" label="Clear">
<refresh>
<setvar name="name" value=""/>
<setvar name="surname" value=""/>
</refresh>
</do>
<p> Your name: <input title="name" name="name"/>
Your surname: <input title="surname" name="surname"/>
</p>
</card>
</wml>



This code collect many new function of WML
We will start with the attribute "ordered" of <CARD>, if setted to "true" all action will be performed in order as we have typed them. If set to "false" action will follow a hierarchical order.

Then we added the attribute "method" to <go> choosing "post". This mean that informations placed in <postfield value=$xxxx> will be sent to the HTTP server ""


 

These info will be typed by the visitor in the two text fields.

Then we have the tag <do>, its work is to clear the two text fields.
 


 

 


 


 


 


APPENDIX - CHARS

To display & type &
To display $ type $
To display "" type ""
To display ' type '
To display < type <
To disply > type >

 

 

 

 

Note : THIS IS A VERY SMALL AND QUICK GUIDE TO WML, I HAVE LEFT BACK MANY OTHER FUNCTION (AS <ONEVENT>). ANYWAY WITH THIS TUTORIAL YOU CAN EASILY WRITE A SIMPLE BUT FULL FUNCTIONAL WAP SITE WHEN YOU CAN STORE YOUR JAVA GAMES, RINGTONES OR GIVE ADDITIONAL FEATURES TO VISITORS OF YOUR SITE.


Share this post


Link to post
Share on other sites

Very nice tutorial. I haven't thought of attempting to know about xml, but I must face the reality it's all happening all over. I cannot remain muted and take no actions to the changing web languages. In fact, one should know all these.Thanks for sharing it here. It must have taken much time for you to write down one by one detailly. However, its worth you get the credits and also you are being helpful to members. :D

Share this post


Link to post
Share on other sites

hey no spamming admin have been notified about it but anyways on the backlash (/0 xhtml uses that too now to make hte coding stricting in a sense, but questions is it for the use of cell phoens to display the info on them?.

Share this post


Link to post
Share on other sites

very nice and cool tutorial for website making. But you can make your website using webpage making softwares like Frontpage, Dreamweaver, Cute HTML and their are plenty of more softwares available softwares on the net for free..............

Share this post


Link to post
Share on other sites

this will be very useful in my upcoming machine problem in one of my major subjects at school. we have to build our very own personal wap site! can't wait. thanks for the tutorial.

Share this post


Link to post
Share on other sites

very nice and cool tutorial for website making. But you can make your website using webpage making softwares like Frontpage, Dreamweaver, Cute HTML and their are plenty of more softwares available softwares on the net for free..............

This was not XML, which you can do in any old WYSIWYG editor. This was WML. For mobile phones. Am I so far behind the times that dreamweaver has WML support without me knowing it!?! And I seriously doubt that frontpage has WML WYSIWYG editing for wml.

Share this post


Link to post
Share on other sites

This tutorial is very useful for WAP and XML. I'm trying to learn the building blocks of XML but I'm slowed by other stuff. :PI'll try out your tutorial and the W3C's to learn XML and WAP.Thanks for writing this! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.