scriptygoddess
A PDA Page is a stripped down, no graphics version of your MovableType blog (for
example, here is my pda version).
The purpose is to allow mobile web devices such as PDAs (PalmPilot, PocketPC,
Visor) and cell phones to view your Blog without having to download all of the
images, blogrolls, and link lists that may be on your front page. It also
enables programs such as "AvantGo,"
"Plucker" and "Mazingo"
to download small versions of your page for offline viewing.
By the way, images posted in your blog entries will still show up on the pda
page, but I bet we can get a ScriptyGoddess to come up with a way around that
(hint, hint).
For users of GreyMatter, I have a tutorial on how to create a PDA page in
GM located here on my site. I
hope to republish it here very soon.
This tutorial is based on code that
Christine shared with me many months ago. I modified hers a little, and you
should feel free to modify this code as well.
1. Go to the Templates area of MT and click "Create new index
template." Give the page a name, I chose "PDA page." Then come up with a name
for the output file. I chose the very creative name "pda.php." You can also use
.htm, or .html if you wish. It just depends on your preference and server.
2. Be sure the checkbox "Rebuild this template automatically when
rebuilding index templates" is checked.
3. Leave "Link this template to a file:" empty
4. In the "Template Body" box, enter your template code. You can simply
copy and paste this into the box if you wish. But, be sure to look through the
code for comments on areas you may want to customize.
Sample Template:
<html>
<head>
<META NAME="HandheldFriendly" content="True">
<TITLE><$MTBlogName$> – Mobile News Page</TITLE>
<!– You can use your own CSS code in place of that below if you wish –>
<style type="text/css">
<!–
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px Verdana, Tahoma, Arial;
leftMargin=0
}
h1 {
font:bold 12px/12px Verdana, Tahoma, Arial;
margin:0px 0px 0px 0px;
padding:0px;
}
p {
font:11px Verdana, Tahoma, Arial;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.author {
font:9px Verdana, Tahoma, Arial;
}
a {
color:#000000;
font-family: Verdana, Tahoma, Arial;
text-decoration:none;
}
A:link {
color: Navy;
TEXT-DECORATION: none;
font-weight : bold;
}
A:visited {
color: #9400D3;
TEXT-DECORATION: none
}
A:active { TEXT-DECORATION: none }
A:hover {
FONT-WEIGHT: normal; FONT-STYLE: normal
BACKGROUND: #eee;
}
.tagline {
font:8px Verdana, Tahoma, Arial;
}
#Header {
margin:30px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:50px;
border-style:solid;
border-color: #A9A9A9 #A9A9A9;
border-width:1px 0px;
line-height:11px;
background-color: #5F9EA0;
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
body>#Header {height:14px;}
.blogdate {
font-family: Verdana, Arial, sans-serif;
background: #5F9EA0;
font-size:12pt;
font-weight:bold;
}
#blogcomments{
font-family: Verdana, Arial, Helvetica, Georgia, Geneva;
font-size: 8pt;
color: Black;
text-align : left;
background : #D3D3D3;
font-weight : normal;
}
div.blogbody {
font-family: Verdana, Arial, Helvetica, Georgia, Geneva;
font-size: 8pt;
color: #000000;
background: #FFFFE0;
text-align : left;
font-weight : normal;
}
.blogsubject {
font-family: Verdana, Arial, Helvetica, Georgia, Geneva;
font-size: 12pt;
color: Green;
text-align : left;
font-weight : bold;
display : inline-block;
background : #FFFFE0;
}
/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above yet
get
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS
include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}
–>
</style>
</HEAD>
<BODY>
<DIV id=Header><$MTBlogName$></DIV>
<div align="left">
<!– Change the number below to reflect how many entries you want to display.
But don't put too many, or the PDA page will get too large, especially if you
get a lot of comments. –!>
<MTEntries lastn="15">
<div class="blogdate">
<MTDateHeader>
<$MTEntryDate format="%A, %B %e, %Y"$>
</MTDateHeader>
</div>
<DIV class="blogbody">
<font class="blogsubject"><i><$MTEntryTitle$></i> (<$MTEntryDate format="%I:%M
%p"$>)<br /></font>
<br>
<$MTEntryBody$>
<MTEntryIfExtended>
<p><$MTEntryMore$></p>
</MTEntryIfExtended>
<!– You may wish to remove the Comments section below. If you get a lot of
comments, it could make the PDA page very large. –>
<MTEntryIfAllowComments>
<p><b>Comments (if any):</b></p>
</div>
<div id = "blogcomments">
<br>
<MTComments>
<$MTCommentBody$>
<span class="author">-Posted by <$MTCommentAuthorLink$> <$MTCommentDate$></span><br
/><br />
</MTComments>
</MTEntryIfAllowComments>
</div>
</MTEntries>
</div>
<HR width="75%">
<p class ="tagline" align="center">
Created with Snazz by <a href="http://www.promoguy.net/">PromoGuy.net</a>, <a
href="http://www.scriptygoddess.com">ScriptyGoddess.com</a> and <a href="http://www.movabletype.org">MovableType</a></P>
</body>
</html>
5. Save the template.
6. Rebuild the template.
7. Go to your web site and view the results.
8. Tweak until satisifed.
9. Post a link to it on your main web site!
There, wasn't that easy?
