This is my farewell post to Palm – as I finally have entered the Android world with my purchase of an Evo 4G.  My latest palm phone was a Palm Pre – using Palm’s new WebOS.  Frankly the WebOS was a fascinating OS with some features that I still miss (the notifications and the card motif are wonderful).  The poor hardware and the lack of apps was what pushed me over the edge into the Android world – from a very long history with Palm based products.  I was on Sprint -with the original Palm Pre – that was very slow and the screen was behind the times.   I had the phone repaired once and on the day I bought my EVO the speaker broke again (tried to call someone and I couldn’t hear anything).  The final nail in the coffin was that the promised os upgrade (with flash support) wasn’t coming and Sprint wasn’t offering the new devices.

My history with Palm devices goes way back – well before they had anything to do with a phone – when they were just a PDA.  I remember watching the Palm devices with envy – desiring the concept of getting organized.  I believe my first Palm device was actually a Handspring Visor Deluxe (in my favorite color of blue).   Handspring was a competitor to the original Palm company – at the time owned by 3com (anyone remember U.S. Robotics - a modem company who bought the original Palm?).  The Handspring devices had an expansion slot at the top of their devices where you could add items like cameras, gps – even a phone.  I remember getting this device with joy – as it provided you the ability to have a digital calendar (the Handspring Calendar is still one of the best I’ve had – Google Calendar is still lacking things), notes, etc.  What was innovative in general about the Palm devices was the Graffiti entry system.  You used a stylus (as I write this it sounds so last century) to write characters in an area at the bottom of the screen.  I remember liking it as it would turn my scribbles into actual words (which the pen doesn’t do as well).  Therefore you could “write” out your calendar entries, enter to-dos, take notes, etc. without a keyboard.

That was my first “Palm” device – which I paid about $200 for back in 2001 (about 10 years ago which tells you how fast technology moves).   I actually tried to use it as a phone back then – using a phone module and a “Voicestream” wireless plan (the plan allowed only 60 minutes a month).  In July of 2002 I upgraded to a Visor Edge (for about $150).  This was a thin, metallic PDA with a later version of the operating system.  I managed to make it just over a year before upgrading which I now realize mirrors how often I upgrade technology (and empty my bank account).  This model also had an internal battery instead of using a bunch of AAA batteries.  Of course back then the black and white screen and no connectivity meant that the battery lasted for days – instead of hours.  I also remember that one of the best features of the Palm was the backup and restore feature – so transferring from the Visor Deluxe to the Visor Edge was easy.  The default desktop software would backup your data, apps, etc. every time you synced it.  So if you upgraded devices or lost your data it was very easy to get everything back.

At some point I abandoned using the Visor as a phone and my family started using a sprint phone (yes – one phone for both my wife and I).  I remember that thing being this big, black brick – that even worked on “analog” networks (which practically nobody remembers anymore).  I think after that thing got run over both my wife and I got Sprint phones of our own (we we’re big spenders then – 2 phones).   But then my pent-up need to upgrade took over and I bought a Treo 180g and switched to T-mobile.  This was my first “smartphone” (actually one of the first smartphones ever).  It was an interesting phone – in that it had this flip-up “cover” that contained the speaker.  It was like most “Palms” – in that it had the Grafitti area, the buttons and especially the software.  One of the early compelling features of the original Palm OS was the apps – long before Apple’s app store I was buying/downloading apps for my Palm devices.  As I upgraded I was able to keep these apps, my calendar entries, etc.  I made it a total of 8 months between buying the Visor Edge and the Treo 180g.

The problem with that phone was that it wasn’t well built – the flip-up concept had an issue where the wires running to the speaker (the one you hear people on) would wear out.  Therefore I think (from looking at my e-mail history) that I ended up buying a few of these phones.  I also remember the Grafitti area ended also wearing out – from so much use.  I think therefore I ended up buying another version that had the keyboard – which in a way was the end of an era – as the “Grafitti” concept was one of the key features of the Palm OS.  The good thing was that along this journey I was able to upgrade/replace devices while keeping my data (Calendar, notes, etc.) and my applications.

I liked my phones but the T-mobile service wasn’t the best and my wife really wanted to go back to Sprint.  So my next device was a Palm Centro – a Palm branded phone for the Sprint network.  So in 2007 I again switched to another Palm Phone – this time with a color screen!  At that time the Palm Centro was not my first choice – as it was a lower end phone – vs. the higher end Treo lines.  It was truly a Palm – so my apps and data were again transferred to the new device.  The Centro actually had a pretty good keyboard on it for it’s size – very usable (using your thumbs).  The screen, while color, wasn’t too spectacular -as it was basically the same lower resolution screen – but in color.  This was when the Palm OS was really starting to show it’s age – not as advanced as some of the alternative phones.  Despite the fact it had a web browser and e-mail it did have good battery life – something I’ve missed.  It also had a great signal – so it worked very well as a phone (something that doesn’t seem as important now).  Overall it wasn’t a bad phone – just a bit behind the times.

So now we get to my last Palm Device – the Palm Pre.   In some ways this wasn’t a Palm Phone – as it wasn’t based on the Palm OS – but on Web OS. Originally I thought I could run my old apps on the phone – but found out later it required an emulator for more money (so I never moved them over).  At this point I switched to Gmail for my e-mail, contact, calendar, etc. (see this post on that journey) – one of the best choices I ever made – and worked wonderfully on the Pre.  I remember how much time I spend deleting e-mails from the Centro – on top of deleting them from the e-mail account itself.  The Palm Pre also had a good web browser (based on Webkit) that was a world of difference from the rudimentary one on the Centro.

In many ways the Palm Pre was a wonderful device – one I had a lot of hope in.  I think one of the best features was the “card” interaction.  You could every easily and intuitively switch from one app to another by flipping through the apps like a deck of cards.  If you wanted to close an app you flipped it away – just like a deck of cards.  The notifications in WebOS were also great – showing up at the bottom of the screen in any app you are in (unlike Android which shows then on the home screen).  For text messages that could be great – as you could see the message without the need to switch out of the app.

Ultimately for me I decided to move to Android as I was disappointed by both the hardware and the lack of apps.  I remember seeing over and over information about an app – but for iPhone and Android only.  I do believe that implementing WebOS on an tablet could be wonderful – provided the hardware is sufficient.  The lack of apps will still be an issue – as developers will only develop for so many devices (with Android and iPhone being the most dominant – with Blackberry and the new mobile Windows next).

Good Palm History Sites:

• Palm OS Device History List
• Palm Wikpedia Page
• A brief history of Palm
• From Palm Pilot to Palm Pre

• lower and UPPERCASE letters
• At least one number
• At least one special character
• Not actual words

Basically random gibberish is what they tell us to use.  Oh, and we should never use the same password on more than one site/application and don’t write them down.  So basically we’ve been told to do something no one of us are really good at.  While Lastpass is an excellent solution – you still have to have a password to use that.  So the challenge is to create a password that is safe, yet memorable.

Steve presented a fascinating idea – documented here:  https://www.grc.com/haystack.htm.  One of the basic points is that length is almost as important as using all the other rules we’ve been taught.  Basically those bad people (you know the guy in Russia smoking a cigarette in a dark room) have to use a brute force method to guess passwords.  Most of them have this big gigantic dictionary of words – all the words you could think of using in a password.  Our goal as users is to create a password that doesn’t have those dictionary words in it. So the traditional approach is to basically create some random gibberish that would never be cracked.

There’s an alternative – length.  A hacker doesn’t know how long your password is – they have to guess – and they’re likely to start small instead of large.  So Steve determined that adding a number of say, dashes, to a password, increases the strength of the password – but is far easier to remember.  Let’s try some examples ourselves:

• Here’s a LastPass random password: U6^gEeL4zO
• Here’s an alternative: ———-H0t——  (10 dashes, Uppercase H, Zero, lowercase t, 6 dashes)

I don’t know about you – but the 2nd one, while not simple, is far easier to remember….

What I’m realizing now is how much I enjoy using Windows 7.  It’s reliable, fast and efficient.  Given how many tabs I have typically open in Chrome at the same time (along with other program) I appreciate the memory stability of Windows 7 64 bit (on XP I’m often watching the memory usage).  Of course this is on a new laptop – so it moves along quite well – courtesy of an i3 processor.

The parts I enjoy recently are:

1. I like how the folders are organized now – with the “users” concept instead of just the old “My Documents” concept (in fact the physical folder location of C:\users\myname makes sense now).   I also love how it puts a breadcrumb trail along the top of a folder window.   I find this highly useful when navigating around – as I can click on what level back I want to go to (I’m a geek so I have to have hierarchies of folders!). [See first screenshot above]
2. I like the visual effects for Windows 7 – not just because they are cool – but because they are useful.  I have an example to the right: if you hover over an item in the taskbar (which is very different than the old XP one) it shows you a preview.  In some cases this simply lets you know if the item is open – if not nothing shows up. But in the case of folders (see example to the right) it’s shows you both folders – with readable labels  - so you can click on the one you want.
3. Frankly I really like the taskbar overall – as I have dropped in the items I use constantly into that task bar (the downside is that I sometimes accidentally open something).
4. The other thing I find useful is how – for certain “pinned” items in the taskbar there are shortcuts to recently opened items.  I’ve noticed recently how useful this is – as it saves me from having to open Excel, then navigate to where I saved it (miss this on XP machines now).

So I find it interesting – how much I’m enjoying Windows 7 – not just technically but as a user.  My original focus was on if it would work – more on the negative than on the positive.  Today I can recommend not just from a technical focus – but as an enjoyable operating system to use.

I think most business owners have known for a long time that the best marketing they have is their own customers.  Many business are grown on word of mouth – customer A likes business A – so they tell customer B about it – and they contact business A.  A customer knows the most about the business – and they have creditability as they are already doing business with them.  The more excited they are the more likely they are to tell somebody else about the business.

The other thought is that a good business meets the needs of it’s customers.  It grows well when it works – mainly for the customer – but also for the business itself.  I think Facebook is successful not just because it is well run – but because it meets a basic human need in a very effective way. If you can provide something for me that I need and want – I’m also going to tell others about it.   If I pay attention to my customers I’m more successful than when I don’t.

So when I think about the concept of “viral” growth –  a social networking driven business – these trends hold true.  They grow because I tell someone else about.  They grow because when I hear about it from a friend or colleague I become a customer because it meets a need.  What technology has done is facilitate the exchange of information – it’s far easier than it used to be.  You can tell a lot more people in a lot more ways than ever before (the smart companies make this easy).  The technology can also make the user experience far better – so it just makes sense to us to use it and recommend it.

So the learning points are the same as before – your customers are you best marketing source.  Treat them well, meet their needs and listen to them.  Build your business intelligently – watching for what works and what doesn’t.  Somehow that doesn’t sound too radical..

Adding a customer header

Part of the uniqueness of most sites is the header- the logo, phrases, and often navigation.  So again the trick was to find where to put my custom header. I started with the “page.html.php” file:

<body <?= $theme->body_attributes() ?>>

<?= $theme->page_top() ?>

<div id="doc4" class="yui-t5 g-view">

<?= $theme->site_status() ?>

<div id="g-header" class="ui-helper-clearfix">

<div id="g-banner">

<? if ($header_text = module::get_var("gallery", "header_text")): ?>

<?= $header_text ?>

<? else: ?>

<a id="g-logo" class="g-left" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>">

<img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" />

In looking at this file I know the custom header must be within the <div id=”doc4″> I identified before.  I decided I didn’t want to replace the existing header of the site – but put mine on top of the existing one (minus the logo).  The biggest challenge was again the image – how to find the right syntax for the image.  So I looked at how they originally set up the logo:

<img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" />

The key to the image was how it was formatted – with a “file” reference instead of url.  The logo is not actually in the theme folder – but in a different folder off the root of the gallery 3 installation.  This is actually what gallery 3 produces from the above:

<img width="107" height="48" alt="Gallery logo: Your photos on your web site" src="/photos3/lib/images/logo.png" />

Therefore, given that my image is in the “/images” folder I formatted my image as follows:

<img width="81" height="100" align="left" alt="<?= t("Andrew Loves Trains")->for_html_attr() ?>" src="<?= url::file("../images/logo.jpg") ?>" />

The next part was simple – in that I copied the source code of my header from my normal template into the theme – inside the “<div id=”g-header” class=”ui-helper-clearfix”>” .  In order to format it the same I had to add my css in the “source.css” file – I basically added my own section:

/** Andrew's Unique Styles */
#andrew_header {
width: 100%;
height: 105px;
padding-top: 5px;
}

The correct coding for any links in the header is like follows: “<a href=”/index.html”>Home</a>”.  The remaining task was to add my custom footer.  Here is what the bottom of the “page-html.php” looks like:

<? if (module::get_var("gallery", "show_credits")): ?>
<ul id="g-credits" class="g-inline">
<?= $theme->credits() ?>
</ul>
<? endif ?>
</div>
</div>
<?= $theme->page_bottom() ?>
</body>
</html>

After some experimentation I determined that the best place to add the footer was after the “<?= $theme->page_bottom() ?>”.   Again the key is update the “screen.css” with any custom css – in  my case a custom image background. Here is what the updated footer looks like:

</div>
<div id="footer">
<div id="footer_text">
<p><a href="/index.html">Home</a> | <a href="/trains_history.html">My History with Trains</a> | <a href="/photos3">Photos</a> | <a href="/my_creations.html">My Creations</a>| <a href="/my_videos.html">My Videos</a> | <a href="/contact_me.html">Contact Me</a></p>
<p>Copyright @2010 - courtesy of <a href="http://www.andrewhelpme.com" target="_blank">Andrew, Help Me!</a> </p>
</div>
</div></div>
<?= $theme->page_bottom() ?>

The world has changed in many ways – but one of the profound ones is that we can all produce content (I’m writing this blog) far more cheaply and effectively than ever before.  One of the concepts I’ve read a lot about lately is that technology is creating a world with far less scarce resources (post-scarcity).  One of the examples of this in the book is iStockPhoto – a place for inexpensive stock photography.  It used to be that stock photos were hard to come by – it was a scarce resource controlled by a limited number of people.  iStockPhoto is the opposite – it’s an abundant resource of stock photography submitted by a host of people.  Therefore the price of the stock photo plummeted – but both the availability and the ability to contribute increased dramatically.

The part of the book I liked the most was the part about crowd intelligence.  That a large number of diverse people can be more intelligent than a group of experts.  He gives an example of a game show – with the option to ask the audience.  The audience is almost always right – the math is interesting.  Say there are only 4% of the people who know the right answer.  If there are 3 questions the odds are that each answer will get an equal share of the votes – therefore those 4% added to the random portion is always greater.

The fascinating part was the diversity of the crowd was the important part – not the size of it.  That the diverse viewpoints are the key to a more intelligent decision – as they bring to light answers that would not be expected.  That we together – each contributing – not necessarily equally – can come up with a substantially better situation than we could independently.  One of the examples from the book was the often if a thorny problem is presented out to the “crowd” for help that the those with an entirely different background come with the solution (different discipline, no training, etc.).

I don’t feel like I’m doing justice to the book – so you’ll probably have to read it.  I think the key learning from me was the crowd has great potential – in part because of the diversity of viewpoints within it.  I think of many large corporations in america and wonder how this wisdom can be applied.  The changing economy – with it’s focus on sharing information – not controlling it – presents many problem to the traditional culture of a corporation.  How will corporations learn to work both with their customers and with each other?  That not taking the risk to ask for help from a larger group robs us of the wisdom of that larger crowd.

It will be interesting to see how these trends play out – how our world will keep changing toward openness and co-operation.  How will we all adapt to these trends – and make the best of them…

As this was basically a new application I looked on the Gallery website to find out how to modify a template.  Unfortunately the instructions on the website left some gaps – so I did a lot of hacking.  The website did provide the basic information of how a theme is organized into folders:

• css – simply css files
• images – images used by the template
• js – special javascript for the template
• views – php files for the components of the gallery

The “js” folder was one I didn’t mess with but in the “css” folder I found a key file: “screen.css”.  This is the main css file for the theme.  In the “views” folder I found the “page.html.php” file – which also defines the basic layout of a page.  I found these 2 files to be the key files to edit when modifying a theme (I agree with their recommendation – copy the default “wind” theme’s folder and modify that).

Changing the background to match site

The first challenge was to change the background of the photo gallery to match the background of my site design – the image behind everything.  So I focused my efforts on the “screen.css” file – looking for the body tag. I found the body tag in the css file:

/** *******************************************************************
*  1) Font sizes, base HTML elements
**********************************************************************/
body, html {
background-color: #ccc;
font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
p {
margin-bottom: 1em;
}

The default theme had a background color set -which defined the area outside the main container of the photo album.  I wanted to change this to be the same image file as the one I was using on the rest of my site:

body {
	background-color: #C3026F;
	font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	font-size: 13px;
	background-image: url(images/P8133933.JPG);
	font-weight: 100;
}

The challenge was how to do I specify the location of that file – given it’s in a different set of folders.  I tried to point to the site’s images folder- but basically I was unsuccessful. The reason is that this is dynamic code – therefore what I type into this css may not be what comes out. Therefore I went to plan B – and copied that image to the “images” folder of my theme.  Here is the difference between what I typed in and what came out.

Original CSS

body, html {
  background-image: url('../images/P8133933.JPG');
  font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

Generated CSS

body, html {
  background-image: url('http://www.andrewluvtrains.com/photos3/themes/andrew_wind/css/../images/P8133933.JPG');
  font-family: 'Coming Soon', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

Changing the background of the container

What I wanted next to do was make it to where I could see that in the container of the photos – the space between the thumbnails, etc.  The problem was I wasn’t sure what to change – which css property was it?  To figure that out I needed to look at the other main file involved – page.html.php.  I opened up this file and began searching for the <div> that was the “container”.  Here’s what I found:

<body <?= $theme->body_attributes() ?>>
<?= $theme->page_top() ?>
<div id="doc4" class="yui-t5 g-view">
<?= $theme->site_status() ?>
<div id="g-header" class="ui-helper-clearfix">
<div id="g-banner">
<? if ($header_text = module::get_var("gallery", "header_text")): ?>
<?= $header_text ?>
<? else: ?>
<a id="g-logo" class="g-left" href="<?= item::root()->url() ?>" title="<?= t("go back to the Gallery home")->for_html_attr() ?>">
<img width="107" height="48" alt="<?= t("Gallery logo: Your photos on your web site")->for_html_attr() ?>" src="<?= url::file("lib/images/logo.png") ?>" />
</a>
<? endif ?>
<?= $theme->user_menu() ?>
<?= $theme->header_top() ?>

I realized that the <div id=”doc4″ class=”yui-t5 g-view”> was the key – as this was the first div within the <body>.  Therefore I had to figure out how the id of “doc4″  the class “yui-t5 g-view” was formatted.  So I searched for these ids/classes through the various css files in gallery3.   I had some trouble finding these files – but I had a clue that Gallery3 used the YUI framework – including the YUI grids.  So I looked up the YUI Grids page to see what I could find and found a cheat sheet that explained the YUI grid syntax (the YUI framework has very good documentation).  It found that the id of “doc4″ meant a 974 byte width and that a class of “yui-t5″ meant a sidebar of 240.

Therefore I was down to “g-view” – which i found in the screen.css file:

/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-view {
background-color: #fff;
border: 1px solid #ccc;
border-bottom: none;
}

So I needed to update this to allow for a semi-transparent background. Therefore I copied over my semi-transparent white png file to the “images” folder of my theme and updated the css as follows:

/* View container ~~~~~~~~~~~~~~~~~~~~~~~~ */
.g-view {
/*background-color: #fff; */
background-image: url(../images/white_transparent30.png);
border: 1px solid #ccc;
border-bottom: none;
}

Fixing the sidebar

So I had my background image now showing through – but I noticed that the text in the sidebar was now hard to read.  So I needed to figure out where that css was – so I could adjust it.  I created a different background image – one that wasn’t as transparent and looked in screen.css:

#g-sidebar {
padding: 0 20px;
width: 220px;
}

I replaced it with this:

#g-sidebar {
padding: 0 20px;
width: 220px;
background-image: url(../images/white_transparent30a.png);
}

In my next post I’ll talk about how I added my custom header and footer to the theme.

One of the primary characteristics of my trains website was photos – lots of photos. For many years I’ve been using Gallery2 on my websites and on many of my clients – as it was an excellent photo gallery – easy to upload and very usable.  The Gallery Community decided in 2010 that Gallery 2 was at it’s end of life – and that a completely new build of the Gallery – Gallery 3 – needed to be produced.  Therefore my trains website became a testing site for this new gallery – including doing some release candidate testing (I have to give credit to the community for working the issues I found in a rapid manner).

My methods are the same with every site – create the “template” that the whole site is based on (header, footer, background, etc.).  I’ve been trying to be a little more artistic in building my websites – as some I’ve done in the past are pretty utilitarian.  The trains site lent itself well to this – as the photos make it a lot easier to create something pleasing to the eye.  Therefore I came up with a template using these characteristics:

• I wanted to keep it clean – where the “header” of the site was pretty minimal. Therefore I added a simple train image (my logo) and the name of the website “Andrew Loves Trains” (text)
• I also kept the menu very simple – simply words as hyperlinks – no images, drop-downs, etc.
• One of the common approaches I’ve used lately is to have a fixed layout – with the body having a very large image behind it. In this case I had a nice train photo to serve as the very large image.
• I decided to keep this image as central to the site – so the background of the content and the header is simply a semi-transparent white image.
• The footer continued this pattern – except with a series of semi-transparent images to make the footer look different.

The other thing I wanted to do with this website was try a different font – instead of the standard set of web fonts.  Therefore I went to the Google Font Directory to look for a special font.  There are a growing number of new fonts to choose from (more than when I first looked a few months ago).  I decided on “Coming Soon”  as my website font – to give it a distinctive look.  What’s nice about the Google fonts is all I have to do is import their css definition and add it to my css definitions (in my case the body).

Therefore I created the template that’s visible in the website – using a combination of css (backround images, fonts, etc.) and a template in Dreamweaver.  Then I created each page from this template – for consistency of look and feel, as well as navigation.  I’ve finally moved away from tables – so it’s all in DIVs with CSS formatting.

One of the really interesting things was not about the format of the page – but what it can do now.  For the first time a page can now act more like a profile – in that it can “like” other pages and have a news feed of it’s own.  For example if you look at the sample screen shot I provided you can see how I “liked” 2 other pages -and this shows prominently on this Facebook page.  So this opens up a potential marketing tool – as you can like and interact with others pages.  For example you could “like” a fan page where your customers live – posting content directly on that page – but as your FAN page.  I know that’s a little confusing – but it’s closer to what some people have asked of me.  You still can’t directly interact with other profiles – which is what some people I’ve talked wanted to do (that’s why some businesses have used a profile instead of a page).

Overall I liked the change – I just had to come up with some photos quickly (and will need to do for another FAN page) for it to make sense.  I do think many business owners will really like the ability to like (that came out strange).  I also think a more consistent UI to the screens is a good thing – to make it easier for users.

Overall I’m really beginning to like the interface on these folders – especially the “breadcrumb” at the top of the folder – which makes it easy to navigate back (and know which folder you are in – if you have some with the same name – but in different locations).  It’s to the point now when I’m on Windows XP it looks pretty old now…