GRAMPS 3.0 Coming Soon!

I am dabbling in software development with the GRAMPS (Genealogical Research and Analysis Management Programming System) project. It is a genealogical database building program that is available for Linux.

I got involved with the developer group after struggling to make my genealogy site look great. The markup techniques were outdated or wrong and nothing had an ‘id’ or ‘class’. After recommending the change to the devs, they let me know that it wasn’t a top priority and recommended that if I wanted to improve the output, I would have to do it myself. This would involve working with Python and also looking stupid asking dumb questions about version control and compiling GRAMPS myself to check my work. With a little time and patience (as well as being unemployed for three months in Nashville with just my wife for company) I put myself to the task.

I have been updating the ‘Narrative Web’ plugin, written in Python, that exports your genealogical data into a web site. Mostly I just corrected and updated the XHTML markup that was present amidst the Python. I did hack up the code a little so that the navigation could be styled to indicate the active page or section.

My primary focus was to make the sites more accessible to CSS. In the process I created a few style themes to be distributed with the application. I am quite proud of them and excited to hear feedback from the user community once GRAMPS 3.0 is released. Following is a few screen shots of the site output as it was and the four primary styles that I developed so far.

GRAMPS 2.2 Narrative Web Plugin Output

‘Modern’

GRAMPS 2.2 Modern Style

‘Tranquil’

GRAMPS 2.2 Tranquil Style

GRAMPS 3.0 Narrative Web Plugin Output

‘Basic – Ash’

Basic comes in a variety of color schemes and is based on the original ‘Modern’ style. I hate using the word ‘modern’ outside of discussions of philosophy or fine art. The general public in the U.S. is convinced that it means ‘contemporary’. No doubt this is thanks to decades of marketing professionals trying to make their products sound impressive.

GRAMPS 3.0 Basic Style

‘Nebraska’

I named this after my home state. It was my original stylesheet for the new markup. For that reason a lot of id and class solutions in the markup came out of challenges created by this design. I wanted this design to look fresh and inviting while being very easy to read.

GRAMPS 3.0 Nebraska Style

‘Mainz’

Named so for Gutenberg’s birthplace, this design was created to show off the potential of the new markup. It’s a bit repetitious of me, but for some reason the vision of the website as a sheet of paper is very appealing. I started this one based on the name of one of the original GRAMPS styles: Certificate. The original style didn’t really look like a certificate, but this one does.

GRAMPS 3.0 Mainz Style

Default Print Style

This is probably the style that will be the most overlooked. With XHTML + CSS there is the potential for the browser to automatically switch stylesheets based on the media of representation. You can define one stylesheet as ‘screen’ and another as ‘print’ (there’s actually quite few different defined mediums according to the W3C, including ‘mobile’ and ‘projection’). GRAMPS is the first project where I could form a strong argument for using this feature to its full potential. Now anytime someone prints a page from a Narrative Web site, the output will be well designed for print with an emphasis on efficiency and legibility.

GRAMPS 3.0 Default Print Style

There’s still more work to do, but I wanted to get the word out on this great update to GRAMPS that’s just around the corner. Along with my relatively minor contributions, the other developers have been working very hard to make 3.0 an impressive and powerful update. If you are interested in trying it out, do keep in mind that in the open source world ‘.0’ means ‘submit final work to users and fix a lot of reported bugs’. So, if you are looking for a perfect application, I recommend waiting for GRAMPS 3.1. ๐Ÿ˜‰

Photoshop CS in Linux

Being a freelance Web Designer & Developer is a good career if you are trying to work full time on Linux and open source software. However, you still have to be compatible with your clients’ source files and backups. This means using Photoshop to build layouts or at least slice up the layouts that you get in PSD file formats.

I have been using my aging G5 (boy, saying that makes me and my checkbook cry) to deal with Photoshop files. However, since I have been setting up this beast of a Dell for the Ultimate Linux Desktop I spent some time today in getting the Windows version of Photoshop CS running on top of Wine, the Windows Compatibility Layer.

Wine is so good right now that you can simply throw the Photoshop install disk in your Linux box and run the installer. I’m not kidding, but keep in mind that this is Photoshop CS, not the latest and greatest Photoshop CS3. Wine’s site has a great deal of information about a variety of Photoshop versions running on Wine.

How did I do it specifically? I installed Wine, the Microsoft TrueType Core Fonts Ubuntu: sudo apt-get install msttcorefonts, customized the Wine interface to taste via Applications/Wine/Configure Wine and then ran the Photoshop CS installer.

Hold On, Save For Web Isn’t Working!

Alright, so there is one big fat catch that, if not dealt with, pretty much makes Photoshop worthless to web professionals: The amazing Save For Web plugin doesn’t work. Damn. So close.

Solution: The Magic of Windows Back Slashes

Yeah, it can be fixed! So, the secret is in how you start Photoshop. Either you or Wine setup some kind of shortcut unless you are starting Photoshop from the command line. Here’s how my original shortcut command was written:
env WINEPREFIX="/home/jason/.wine" wine "C:/Program Files/Adobe/Photoshop CS/Photoshop.exe"

and to fix the Save For Web problem, simply replace the forward slashes that follow C: with back slashes:

env WINEPREFIX="/home/jason/.wine" wine "C:\Program Files\Adobe\Photoshop CS\Photoshop.exe"

Huh? What?

Don’t ask. I can only guess that how that particular plugin was written included Windows-directory style references within the code. Sincerely, I have no clue. Thankfully the Wine developers figured it out. On that page it mentions Photoshop 7 specifically, but CS works the same way.

HTML Character Reference Chart Update

I have just finished updating my HTML Character Reference Chart. Along with updating invalid numerical references 129 through 159 to the valid decimal numbers there are a few new features:

  • different character sets in separate views
  • complete decimal and hexadecimal references
  • entity references for some characters.
  • New Complete Table Section displays all references
  • New Favorites Section displays only your favorites

HTMLChar1

This new version is built with XML and XSLT, making the process of updating information or creating new layouts very simple. I am learning the basics of both right now and it’s amazing how powerful and elegant these simple text files can be.

The Favorites section works with comma-separated URL values. You will have to edit your URL “manually” by adding the decimal, hexadecimal or alphabetical values to the end of the page’s URL. There is an example favorites set to help you get started.

BohemianAlps HTML Character Codes »

IEs4Linux Also for OSX on Intel

I have been using the IEs4Linux system for a while now to assist in developing websites. It allows you to install various versions of Internet Explorer in Linux. It’s great for testing websites against the many bugs in IE as you develop them.

Recently they have developed a version for OSX on Intel machines.

http://www.tatanka.com.br/ies4linux/news/49

You have to install Darwine and X11 on OSX to use it, but after that it seems pretty easy. I am not so fortunate as to own an Intel-based Mac, so I can’t test it for you.

Wine info
http://wiki.winehq.org

Darwine info
http://darwine.sourceforge.net/download.php

Wine on OSX info
http://wiki.winehq.org/MacOSX

Dear Microsoft, Do You Like Being Hated?

From Microsoft’s Improving E-mail Deliverability into Windows Live Hotmail pdf:

Q: If my message displays properly in Hotmail, will it look the same in Outlook?

A: No, we recommend that messages be tested with both Outlook 2003 and 2007 as well as Hotmail as messages may not be rendered the same way in all e-mail clients and services. Outlook 2007 no longer support style sheets the same way previous versions of Outlook did. This means that even if HTML content looks fine in Internet Explorer and Outlook 2003, it may not in Outlook 2007.

I think they are referring to their blunder of switching to the Word rendering engine for Outlook 2007’s HTML emails. –Jason

Here are a few recommendations for improving Outlook rendering (p16):

  1. Do not use background images. Background images, whether specified in the <body>, <table>, or <td> tag, cannot be used because of inconsistencies among e-mail clients, most notably Outlook 2007.
  2. Do not use CSS (cascading style sheets), inline styles or JavaScript. Cascading style sheets, where the styles are defined within the Web page itself, are only fully supported in most e-mail clients. Attached style sheets are not supported at all. Additionally, Web e-mail clients such as AOL Webmail and Gmail change or comment out style tags, resulting in unpredictable formatting. As a result, we recommend that you use only basic HTML tags. (For instance, to underline text, use the <u> tag, for bold use the <b> tag.)
  3. Inline style attributes are your only option. Use only the most basic style attributes to designate font size, color, and type, and use them within basic HTML tags (do not use <div> or <span> tags). Do not use styles to set table or row heights or any spacing. Do not define your style elements within the <head> tag of the document (Hotmail will entirely strip this out). JavaScript is not supported in any e-mail client. Do not include any JavaScript, including onClick=”return(false);” in your HTML. Jason says:Nothing new, but why?!…
  4. Set table width to 600 pixels max. The convention for HTML e-mail is to limit a set table width to 600 pixels. Though a wider table may render fine in Outlook or on a high resolution monitor, users with older systems or who choose an 800 X 600 display setting will not be able see the entire width of the e-mail.
  5. Do not use the <body> tag to set any essential attributes. Some Web e-mail clients (notably Yahoo and Hotmail) strip out the BODY tag within e-mails completely. You should not include any attributes in the BODY tag. To set values such as background color, use the BGCOLOR attribute inside the TABLE or TD tags. Jason says:Nothing new…
  6. Use HTML character names. Many e-mail clients won’t display raw 8-bit characters correctly (they’ll show up as question marks or squares instead). As a result, you must use HTML codes for these characters. Use only the HTML names, not the numeric values. Jason says:Nothing new…

In other news, not much has changed. I have no understanding for the email client industry’s bias against CSS. It makes no sense and we are all now dumber for having realised this is their current stand on the issue.

Good News: Yahoo Mail supports CSS quite well.

Internet Explorer 6 and 7:Mess Up WordPress Image Uploads

I just ran into a problem on a photo site I have made with WordPress. The photo site is a photo web log where there are multiple authors that contribute one photo at a time (or so I prefer!). I don’ t know how to edit WordPress’s setup so that the upload process creates an image to a custom width rather than the default thumbnail. With that in mind, every author has to click ‘Write Post’ and then upload their pre-sized to 500px wide image to the site. From there they have to click on the ‘upload’ menu’s preview of their image. The one click brings up a menu on top of the photo that looks like this:

  • Using Thumbnail
  • Not Linked
  • Send to Editor
  • Delete
  • Close Options

If you click on any of the items they will toggle to another option or execute the stated function. In my photo site’s case we change it to the following:

  • Using Original
  • Not Linked
  • Send to Editor
  • Delete
  • Close Options

Then we press ‘Send to Editor’ and an img tag is sent to the Editor with the correct settings. Everything is as it should be (except that it excludes dimensions and that agitates the standards-loving person that I am, but I let it slide for the sake of ease of use). However, when using Internet Explorer 6 or 7 something funny happens.

  1. The ‘width=’ option IS being used, but without quotes around the contents (the same for the alt setting) and it’s set to ’96’ which is basically the thumbnail width.
  2. The file path to the ORIGINAL is provided in the alt specification while the src specification remains pointing at the thumbnail file.

My friend was banging his head against the wall trying to figure it out. Once I discovered this problem I simply suggested that he install Firefox. ๐Ÿ˜€

In conclusion, I don’t know a lot of people that use WordPress in this way, so maybe it isn’t very well known. Maybe it has something to do with my theme, but that shouldn’t be the case, since it’s within the admin side of the site. Anyway, maybe this write up will save somebody a headache.

Internet Explorer 7 and RSS features

Okay, IE7’s implimentation of RSS is basically a built in aggregator. That’s actually pretty nice. However, only dorks are going to know how to get there. So, nice try Microsoft. There is no comfortable way to ease people in to RSS. Firefox doesn’t have a built in reader, but I prefer the way they use the features of RSS to create a more dynamic web experience.

To start, IE’s setup is pretty familiar. If you are on a site with an RSS feed the little RSS icon lights up in a familiar orange. One thing I like about the set up is that the RSS icon is always present on the top bar in IE7. If there isn’t anything available it turns blue like an inactive feature. Very nice. So, you either go to that menu when it’s active or you click on a link in the page to is linked to the RSS feed. You are then presented with a page similar to Firefox. There’s an information block on top explaining what you are doing and it is followed by the contents of the feed. Great. Yes, please add this to my Favorites/Feeds list.

That’s where it goes bad. I just added to my Feeds list, but where the hell is my Feeds list? So figured out how to get the menu bar back, but then there wasn’t anything referring to my Feeds under ‘Favorites’. Wha? Where is it? So, I go back to the ‘house icon menu’ and discover that Favorites/Feeds is listed there and then a familiar favorites list including my Feeds pops up on the left of my browsing window. This is nice. A built in aggregator. Great for reading feeds without going to the sites. But I prefer Firefox’s dynamic links. That’s just me.

That’s all I’ve got to say. Chances of middle aged women using RSS within the next two years? Not very good.

Also, what’s up with the ‘no menu bar unless you request it’ stuff? Now people will never start to learn. Good thinking guys! I had to putter around through the ‘house icon’ menu to discover that I could even turn the old-style menu back on. My parents would be done.

Too Much Spam

I have recently been getting hit with waves of spam. I’m tired of dealing with it, so I have made registering mandatory for anyone that wants to comment. Most of my content is more informative, so I would say that comments are all that common. However, if anyone has corrections or something to add, please take the time to register. Thanks for reading the blog. I have a good-as-new-used or ‘Refurbished’ Thinkpad T42 being shipped to me via UPS this week, so some new posts on that machine should be popping up.

Server Side Includes: The Most Important Single Thing to Know

Includes, includes, includes. You can learn everything else later.

  1. ColdFusion: <cfinclude template = “includes/header.htm”>
  2. PHP: <? include(“includes/header.php”) ?>
  3. ASP: <!––#include file =”includes/header.inc”––>

Of course, each of these should be used within files that have the appropriate extension. The appropriate extensions are .cfm, .php or .asp respectively. Another assumption on my part is that you already have one of the appropriate server applications running to make sense of either of these.

What the hell is an ‘include’? I’ve spent some good amounts of time trying to find just these very simple include ‘tags’. The first hurdle is understanding the concept of an ‘include’. An include can insert the content of a specified text file in place of itself much like an ‘img’ tag replaces itself with an actual image or photo on screen. However, the include tag is part of a script, not part of the xhtml markup. If you look at the source of a ColdFusion, PHP or ASP web page, you won’t find any ‘include’ tags. When the file is received by a browser application it appears to be a normal html file. The advantage of this belongs in the realm of what most Dreamweaver or FrontPage web designers know as ‘Templates’. Only these are much better, because the server handles all of the updating if you make changes to parts of the template (and none of that stopping-you-from-editing parts-of-the-page crap). It’s simple: Your site’s top navigation is one file that is included into the top of every other page of your site dynamically. Updating your navigation no longer means copy/pasting your navigation markup into several or hundreds of separate html pages. Just update the one, single file. All of this is accomplished without buying a fancy Content Management System. Beautiful.

After you get comfortable with these you can always move on to the more complicated applications of these server side script languages. This one single element is huge though. To me, it brings the original meaning of PHP to mind: Personal Home Page. You don’t have to be an html guru to comprehend the impact these tags have on website management.

Please let me know of any other simple but powerful uses for any of these server-side script languages.