August 30, 2004

PDA-compatible blogging - part 1

(also posted on Rocket Jones)

If you don't recognize the term, PDA stands for Personal Digital Assistant, and refers to that group of handheld devices like the Palm Pilot, the iPAQ Pocket PC, Blackberry and many others. Basically, they're PC's that fit into your pocket. I recently got one, and love it to death.

Why in the world would you want to do a PDA-friendly version of your blog? Well, some of us out in the world are techno-junkies (not me) and some of us just don't have time to surf to all the places we'd like to each and every day (uh, that would be me). So by downloading your blog to our PDA's every day or two, we can benefit from your wisdom and insight whenever we have a moment or two to spare.

First I'll explain the steps to make your blog PDA friendly, then in part two I'll show those who have PDA's how to get this great blog content downloaded to your wee beastie. It's all in the extended entry.

Blog steps (most of this lifted and slightly modified from ScriptyGoddess, although I saw it in other places too).

1. Go to the Templates area of MT and click "Create new index template." Give the page a name, I chose "Rocket Jones - PDA version." Then come up with a name for the output file. I chose the very creative name "pda.html." You can also use .htm, or .php 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 (look for the TITLE and DIV id tags).

Sample Template (start copying here):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<TITLE>Rocket Jones - PDA Version</TITLE>
<style type="text/css">
<!--
body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
leftMargin=0
}
h1 {
font:bold 12px/12px verdana, arial, helvetica,
sans-serif;
margin:0px 0px 0px 0px;
padding:0px;
}
p {
font:11px verdana, arial, helvetica, sans-serif;
color:#333333;
margin:0px 0px 0px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:0px;}
.tinyfont { font:8px verdana, arial, helvetica, sans-serif; }
.smallfont { font:9px verdana, arial, helvetica, sans-serif; }
.titlefont { font:14px verdana, arial, helvetica, sans-serif; }
a {
color:#000000;
font-family:verdana, arial, helvetica, sans-serif;
text-decoration:none;
}
A:link { color: #09c; TEXT-DECORATION: none }
A:visited { color: #07a; TEXT-DECORATION: none }
A:active { TEXT-DECORATION: none }
A:hover {
FONT-WEIGHT: normal; FONT-STYLE: normal
BACKGROUND: #eee;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] +
[top padding] + [top and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px;
left and right borders: 0px */
line-height:11px;
background-color:#eee;
/* 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;}
.Content {
margin:5px 5px 5px 5px;
padding:2px;
}
.dateheader {
position:relative;
width:auto;
min-width:120px;
margin:0px 0px 0px 0px;
padding:5px;
z-index:3;
}
-->
</style>
</HEAD>
<BODY>
<DIV id=Header>Rocket Jones - PDA Version</DIV>
<div align="left">
<MTEntries lastn="15">
<MTDateHeader>
<div class="dateheader"><H1><$MTEntryDate format="%A, %B %e,
%Y"$></H1></DIV>
</MTDateHeader>
<br>
<DIV class="content">
<span class="titlefont"><i><$MTEntryTitle$></i>
(<$MTEntryDate format="%I:%M%p"$>)<br /></span>
<$MTEntryBody$>
<MTEntryIfExtended>
<p><$MTEntryMore$></p>
</MTEntryIfExtended>
<MTEntryIfAllowComments>
<p>
<p>:: Comments left behind ::</p>
<MTComments>
<$MTCommentBody$>
<span class="smallfont">:: <$MTCommentAuthorLink$>
<$MTCommentDate$></span><br /><br />
</MTComments>
</MTEntryIfAllowComments>
</div>
</MTEntries>
</div>
<HR width="75%">
<P CLASS="tinyfont" align="center">
<a href="http://www.movabletype.org">Powered by MovableType</a></P>
</body>
</html>

(end copy here)

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. I put mine in the sidebar.

10. Announce it. Put the word out. Let the world know that it's there so we can take advantage of it. There will be much rejoicing amongst us geekish types, because, you know, according to the Dilbert author, we're getting all the chicks and we don't have all day to be sitting at the keyboard anymore.

11. That's what he says anyways.

Ok, so that part is pretty straightforward. For those who don't want or like to tweak, the default as given above seems to be fairly standard and works well.

The next part will be for the PDA-enabled. You know it's out there, how do you get at it via your PDA?

Posted by Ted at August 30, 2004 12:33 PM
Comments
#1

Nice job, Rocket Ted! Thank you for your efforts.

I added this post to the Useful Thingys in the sidebar.

What model PDA did you get? I'm starting the research process to see what would best fit my needs/wants for my next electronics purchase.

Posted by Madfish Willie at August 30, 2004 12:51 PM
#2

I bought the HP iPAQ 1945. The link up there ("I recently got one") points to a post where I talk about it and what it can do. So far, I'm very happy with it.

Whatever you get, I recommend getting the "... for Dummies" book for it too. It'll show you ways to use the thing that you'd never think of.

Posted by Ted at August 30, 2004 01:08 PM
#3

D'oh! Should've paid more attention. Thanks for the review - it will ceertainly point me in the right direction.

I like the Excel being built in... I always end up being the spreadsheet guru at work for some reason... I'm looking for ways to use current technologies for more efficient work processes, but that's a bit difficult in the swimming pool business with tight-fisted, technology-challenged business owners.

Posted by Madfish Willie at August 30, 2004 01:21 PM
#4

Ted, you are so cool in the geekiest way.

Posted by spacemonkey at August 30, 2004 01:24 PM
#5

Something I didn't mention in the review (didn't know much about it at the time) is that there's also an IR port on a lot of these PDA's that you can use to beam data between devices. Wireless data transfer!

Posted by Ted at August 30, 2004 02:29 PM
#6

To think I just paid good money to get someone to do that for me! Sure I got a nice design to, but it was all about the PDA. I'm looking forward to the next part...

Posted by Simon at August 31, 2004 11:06 AM
Live Comment Preview
Post a comment









Remember personal info?