Generating XHTML MP (WAP 2.0) Pages From PHP

Maybe you guys know that I've been working on a service called MyWapBlog.com which lets peoples create/manage mobile blogs using their mobile phones. In the course of the development I've learnt great deal about mobile websites and their dynamic generation, and I'm sharing a bit of it here in this post.

How do you generate dynamic (X)HTML Pages using PHP? Simple:

Hello

echo date('h:i A, j-M-y'); ?>

And if you look at XHTML MP pages, their source look like the following:

...

...

So you see these pages have a different document type and some other differences. So will the following code work and generate a valid WAP 2.0 page?:

Hello

echo date('h:i A, j-M-y'); ?>

The answer is “NO”? Why? Because XHTML MP pages needs to be served with a different Content-Type than what is generated by .PHP files. Normally when you runa s PHP script and it outputs something, the content is served with Content-Type: text/html

What is Content-Type?

It is a header (information about a particular resource) returned to browser when it requests something from a server. When you request an image, the server return the image with the header image/png, image/jpeg etc. letting the browser know how the returned content is to be interpreted.

PHP scripts can return contents of any type (using the header() function), from text to images and PDFs to ZIPs. And therfore if we want to generate XHTML MP pages, it can even do that without doubt.

So what we need to do is, just change the above code a bit adding a new line at the top so that the whole code look like the following:

("Content-type: application/vnd.wap.xhtml+xml; charset=UTF-8");?>















Hello

echo date('h:i A, j-M-y'); ?>

This will tell the browser that the content we are going to serve is of the type XHTML MP. We always use the charset UTF-8 for these pages, which is also told to the requesting browser.

Now the big question is, why we didn't do this for normal HTML pages. Why didn't we have to tell the browser that content is of the type “text/html” when it was so? Because PHP does it for us! Yes whenever we output anything from PHP scripts, the PHP interpreter outputs the default header (text/html) automatically. Just as the PHP interpreter finds anything in the script that needs to be output, it first generates a header, the outputted content follows. For example in the first script, the very first line (very first character “<”) needs to be output to the browser. So before that, the PHP interpreter sends a content type header (default – text/html).

Therefore, when we had to output our content with a different header we had to make sure that it is done before PHP does it automatically. Two headers cannot be valid.

This is it for this post, do check back soon for more new posts. Till then, good bye!

Deigning a Simple HTML Menu-Bar Using CSS

In this post I’m going to show how you can create a menu-bar (list of hyperlinks) using CSS styling. This requires that you at least have some basic knowledge of HTML and preferably CSS too. If you can’t figure out what a menu-bar looks like, scroll to the bottom.

Seen! Though pretty much the same can be implemented using tables but that is not web developers prefer.

In HTML there is not standard tag for creating a menu like item therefore we would be customized or style a standard tag. We’ll be using the ‘unordered list’

tag to do so, in this case every item i.e.
will be items in the menu.

Let us first start by creating an unordered list as follows:




• Item 1



• Item 2




It shows up something like below:

• Item 1
• Item 2

Obviously this is not what we want; items here are displaying Bullets and are one below the other while we want them to be in one line, one after the other. To achieve this we’ll style his ‘unordered list’ by defining a CSS class, then applying it to this tag.



















• Item 1



• Item 2










Here we have defined a CSS class in between the tags. It contains the property list-style: none for the

tag, this would make the unordered list classified by menu class to NOT to display the bullets beside each item.
• Item 1
• Item 2

Great! And by the way if you don’t know what a CSS class is, for now you can think of it as a way of defining properties in CSS which could be used in HTML to classify different parts or tags to have properties as defined. You can see in the above code we have used

to classify that portion and all the tags between it to have the special property defined in CSS.

Coming to the menu bar, it still has a big problem that it doesn’t look like a Menu. Well the same list would look like a menu if we style it, for this we would have to define display: inline for the

• tag of the unordered list. This would make the items in the list to be in ONE line hence look like a Menu.

  











  



  
  
  
  • Item 1
  
  
  
  • Item 2
  
  
  
  • Item 3
  
  
  
  • Item 4
  
  
  

  


  



  Menu bar would look like:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  Ok now our menu bar is almost done, now we just have to make it more attractive and to react to mouse activity. For this we’ll add some more code to the CSS (style sheet):

  Added stuff is self explanatory, padding is used to increase the clickable are of the menu items. Now the Menu Bar would look like:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

  NOTE: Hover effect is not working here, because Icannot add stylesheet for seperate pages in Blogger and I don't want to mess up the CSS Validity of this page.

  Below is the complete code listing:

     >   >    >Menu Bar Using CSS>    >   .menu ul   {     list-style: none;   }    .menu ul li   {     display: inline;   }    .menu ul li a   {     /*Increase Clickable Area*/     padding: 8px;     padding-left: 15px;     padding-right: 15px;      /*Remove the Underline for the Link*/     text-decoration: none;      color: #000;     background: #ccc;   }    /*On Mouse Over the Link*/   .menu ul li a:hover   {     color: #fff;     background: #000;   }   >    >    >    class="menu">      >        > href="#">Item 1>>       > href="#">Item 2>>       > href="#">Item 3>>       > href="#">Item 4>>      >   >   >   >  

Creating Tool-Tip Text for WebPages Using CSS Only

[You might also be interseted in Deigning a Simple HTML Menu-Bar Using CSS]

All right, so today we are going to use CSS along with some HTML to create Tooltip text for WebPages without using JavaScript. Yeah, you heard it right using only CSS and of course HTML. Do I need to explain what a Tooltip is, BTW? Nah, you guys already know it. I do not think many sites use tooltips or anything of that sort on their websites but in case you do or you just want to learn, read on…

Well, the first thing that I want to tell is that the basic technique I’ll be using to create tooltips is not mine, I saw someone using it for a slightly different purpose, I changes it to suite mine. As I said earlier we’d be using CSS and HTML only, I guess HTML is easier so here it is:

href="#" class="tooltip">Hover Here>This is the Tool-Tip Text>>

As you can see there is nothing special, a plain simple link but wait what is that for? Good question! Well the text under the tag wouldn’t be visible unless you hover the mouse over the link. When you do so that’d become visible, neatly formatted to look just like a real Tooltip text. But how? You might ask. It has been classified (class="tooltip") to do so.

The heart of all this is the CSS:

   a.tooltip{     /* for postioning the tool-tip box relative to the link */     position:relative;      /* no underline needed */     text-decoration: none;   }    a.tooltip span{     /* tool-tip text will not be visible initially */     display: none;   }    a.tooltip:hover span{     /* make tool-tip text visible */     display:block;      /* for postioning */     position:absolute;     top:20px; left:20px;     padding: 5px;      /* width of the tool-tip box     if text is longer, it will be     made into two lines */     width:150px;      /* style the box to look like a tool-tip box */     border:1px solid #000;     background-color:#FFFFAA;     color:#000;   }  

Now to make it more clear, I’d break the whole code into smaller pieces and discuss what that does:

1.

a.tooltip { position:relative; }

This would make the tooltip (whenever) it appears to be positioned relatively to where the link is.

2.

a.tooltip span { display: none; }

It’d (as you might have guessed) make the tooltip text (or the tag) to be invisible.

3.

  a.tooltip:hover span {       display:block;      position:absolute;      top:20px;      left:20px;      padding: 5px;      width:150px;     border:1px solid #000;      background-color:#FFFFAA;      color:#000;    }

This defines what the tag would be when mouse is hovered over the link.

First it’d make the visible (thus the tooltip text) by using display: block;. Next it’d position and style the text to look like a “Real” tooltip.

Easy! Now it is…

Here is the complete code:

   >   >    >ToolTip Text Example>