Mobile, many people also think it pay a important role in the Web3.0, always connected. Actually, it’s not only limited on your handset and also covered but not limited with those sub-notebook, OLPC, UMPC. So people get more easy to access the web on the road with WI-FI connection in Starbucks, 7-eleven and even Mcdonalds. GPRS flat plan get cheaper and cheaper… Your web get read for mobile wave?

There are some useful concepts or idea to help us thinking in mobile way.

  http://www.passani.it/gap/

This article was created on January 2008, just a month ago and still fresh. Actually, it didn’t mention the exact date but the last update is January 2008. So, I guess it’s at least cover phones launch last year 2007.

XHTML MP 1.0

Is it come from Mars? Of course not, it’s defined by OMA, Open Mobile Alliance.. It’s built on top of XHTML-basic which is a subset of XHTML 1.0 (which we learned few weeks before). It adds extra usability and graphical features by WAP CSS (WCSS) and ‘style’ tag and attribute.

The evolution:

HTML 4.0 -> XHTML 1.0 -> XHTML Basic -> XHTML MP

 Some others…

• All mobile pages should coded with valid XHTML Mobile Profile 1.0 - otherwise how the browser read the page
• Use the application/vnd.wap.xhtml+xml MIME Type
• Use only simple in-line CSS or none – to save page render time
• Only use image as what really need – to save the download time
• Use the common encoding on the UTF-8
• No <br />, please use <hr /> instead
• Use the ‘accesskey’ attribute to user control by keypad

<?xml version=”1.0″ encoding=”UTF-8″?>

p>Pick contact:<ol> 

<li><a href=”contact.jsp?id=32″ mce_href=”contact.jsp?id=32″ accesskey=”1″>Ramona</a></li> 

<li><a href=”contact.jsp?id=45″ mce_href=”contact.jsp?id=45″ accesskey=”2″>Robert</a></li> 

<li><a href=”contact.jsp?id=21″ mce_href=”contact.jsp?id=21″ accesskey=”3″>Romeo</a></li> 

<li><a href=”contact.jsp?id=17″ mce_href=”contact.jsp?id=17″ accesskey=”4″>Ronan</a></li> 

</ol>

• Use short and meaningful <title> to describe the page - good for bookmark

• Beware of HTML-style forms.

Age:<select> 

<option value=”17″>Less than 18</option>  

<option value=”25″>[19-25]</option>  

<option value=”45″>[26-44]</option>  

<option value=”100″>over 44…</option>

</select> 

<a href=”next/form?age=17″ mce_href=”next/form?age=17″>Less than 18</a><br>

<a href=”next/form?age=25″ mce_href=”next/form?age=25″>[19-25]</a><br>

<a href=”next/form?age=44″ mce_href=”next/form?age=44″>[26-44]</a><br>

<a href=”next/form?age=100″ mce_href=”next/form?age=100″>Over 44</a><br>

• Carefully evaluate how cookies are used in the application – cos it might not work for all devises and network
• Page mark up tag and images keep under 10 Kilobyte totally, for high-end devices is recommended do not exceed 40 Kilobyte
• Fill in the width=”" and height=”" in the <img> mark-up tag - to save CPU time for detect the image size and reserve space during the page render.

<img src=”images/logo.gif” mce_src=”images/logo.gif” alt=”ComPany” width=”100″ height=”20″ />

• Enable one-click calls for phone numers

<a href=”wtai://wp/mc;+852 99912345″ mce_href=”wtai://wp/mc;+852 99912345″>+852 99912345</a> or

<a href=”tel:+852 99912345″ mce_href=”tel:+852 99912345″>+852 99912345</a>

• Last but not least … Do not try to port all functions of a website to mobile

For more details, please go to  http://www.passani.it/gap/ 

When you dealing with the python prompt, it’s still easy for you to get those bug warning for your syntax error, variables not define… but how about when you coding the CGI? Some time it might need run over web server to get user input for the process. Do you have some experience just got a “blank white” page for your CGI output? What the hell? What stuff I’m doing wrong? GOD please tell me!!! “cgitb” coud help you a bit for the debugging for python script.

“cgitb” is a module come with the standard python. It’s a traceback manager for CGI scripts. The origional design of the cgitb is use for display extensive traceback information in HTML for CGI scripts. Actually, it’s a special exception handler for python scripts. When you turn it on in your CGI script, you will get a detail report for what stuff make your script crash.

An example for a error cgi: http://ecom.cs.cityu.edu.hk/51142500/cgi/err.py.cgi

It’s easy to use the cgitb. Just insert the following code into the script top.

import cgitb; cgitb.enable()

It will automatically have the details report for those exception case and tell which part make your script crashed.

For further details:

• http://effbot.org/pylib/cgi.htm#debugging-cgi-scripts
• http://docs.python.org/lib/module-cgitb.html

Good luck for your CGI!

But the problem is how to bring traffic for the website, carry some amorous pics? Make your site searchable in popular search engine should be one of the main source for traffic. SEO (Search Engine Optimization) becomes a hot and important topic nowadays.

SEO – http://en.wikipedia.org/wiki/Search_Engine_Optimization

Since the indexing rules of some search engines will change it from time to time, search engine optimization need enhancement frequently too. Of course, SEO we have thousand thing need to do but in the same time something we must to know what we DON’T do.

DON’T DO:

http://www.dailyblogtips.com/seo-its-about-what-you-dont-do/

• Keywords stuffing – don’t spam keywords in you site, just use keywords when it need.
• Mirrored Sites and Content Duplication
• Hidden Text and Images

http://www.practicalecommerce.com/articles/166/Optimizing-HTML-Code-for-Maximum-SEO/

• Image header and menu – it’s good for human to read but not search engine
• Nested table – it can help your page easily indexed by search engine

http://seo-tutorial.seoadministrator.com/

• Redirects
• Session identifier – it make every ppl access with differnt URL. Search engine will treat it as a new page

If you want 100% sure your site prompt in the first few rows of those search engine, other than SEO, you might better pay the Adwords (Google) or YSM (Yahoo)

Good luck!

Before CSS supported by widely browsers, most of developer also using nested tables to control web page layout instead of. Also CSS only use for font declaration. But after years, most of ppl would propose to use “Tableless” for code web page and leave “Table” for data presentation use.

Why? It’s really good? and How-to?

http://en.wikipedia.org/wiki/Tableless_web_design

“Tableless web design”

Pros:

1. Accessibility: Easy to linearize the web page and help special screen like mobile & PDA access. It also good for search engine.
2. Bandwidth saving: CSS can cache in browser and use for the rest of pages in the same site. No need to download those “style layout” html every time.
3. Maintainability: Only change in 1 CSS and effect on pages using the same CSS.

Cons:

1. Not good for some old browsers
2. Different interpretatin of CSS for browsers
3. Bugs

How-to:

A article from W3C for tableless layout how-to:

http://www.w3.org/2002/03/csslayout-howto.html.en

Enjoy and Happy CNY!

To help the web page easier access by mobile devise, it’s better serve different set of CSS for page rendering. It could help web page looks better for specific devise OS. There is a CSS property, media type, can provide some logic for developer serve different set of CSS base on the user agent.

Media type info at w3: http://www.w3.org/TR/REC-CSS2/media.html

e.g. The following code can let different user agent render the web page with different font size.

@media print {
BODY { font-size: 10pt }
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}

The “media type” application might not properly work in the real world. It caused by some devise agent will not follow the definition to declare itself. e.g. a cell phone browser declare itself as a “screen” instead of “handheld”.

The class style also fresh to me. It’s not only a plain lecture and tutorial. It’s really fun, in this class we need build up our own blog to sharing what our finding in class and out of class. We need to build up our personal homepage and of create a internet application.

But most interesting thing should be the core – internet application!!!