WordPress

I migrated Loving Jacqui to new blogging software, WordPress, so I can use the comments again.

Previously, I used FTP (file transfer protocol — a method of publishing your web pages to the server) “Classic” Blogger to publish web pages to a server and blogKomm, a .php script to keep comments beneath my posts on my own pages.

I liked it for design reasons since Blogger used popups for comments, which are less user friendly and didn’t suit the look and feel of my blog.

However, look and feel be damned I say! I kept on getting slammed with comment spam. Also, it stored all the comments in one text file meaning the entire file had to be scanned every time someone opened a web page. As the file grew longer, it would naturally degrade speed and performance and this could only get worse.

WordPress on the other hand uses a combination of core files, theme files (determining the look of a site, the position of page elements, etc.), and a database to pull different parts of a page together including posts and comments “on the fly”.

This is actually slower than using normal web pages on a server, but has the advantage that it can handle hundreds or thousands of comments much easier. Oh, and it’s well maintained software with better anti-spam solutions. And it’s a lot more fun to use for publishing than Blogger’s is.

Classic Blogger, believe it or not, rebuilt most of the website every time you published one post. So it was fast in the beginning, but now with over 100 posts, took longer each time I used it. So you’d click the “Publish Now” button and wait. And wait.

Then it would tell you it was taking a long time (as if you didn’t already know). Then ask if you wanted to continue. Why yes, you do. So you’d click a button telling it to do what you told it to do five minutes ago. Often this would happen again.

Now it’s quicker. Using the new software, for all intents and purposes since you’re only publishing the one post and updating a few entries in the database, the lag time is about the same as when you click the send button of an email. The amount of data transmitted is similar.

For web page download speed from your perspective, WordPress can use “gzip” compression to reduce their size and serve them to you quicker, provided your browser supports it. WordPress also can create “cache” files (static files generated automatically the first time a user visits a page, so when subsequent users visit, they see the cache file and the database doesn’t need to be queried as often) to handle higher volume if necessary, something which has not been a problem!

Greek blogger Nick of ngtech.gr has also devised an interesting change to WordPress’s cache module so it compresses the cache file and stores it as such, then it’s served as needed. Other solutions involving cache don’t allow for any compression at all or, if they do allow compression, force your server to do the work of compressing the cache file each time a user’s web browser requests it.

This puts a drain on server resources especially in a shared hosting environment — where several websites share one HTTP (static page) server and a separate MySQL (database) server.

Unfortunately, I can’t use WordPress’s cache function while keeping the options to switch themes between “Original Blue” and Ghastly Pink”. Some people claim the wp-cache plugin can be modified to overlook the stylesheet cookie and still function. However, I have never seen a solution which actually works. If you have one, please advise!

In addition to migrating over posts (using a script) and comments (by hand!), I also rewrote the XHTML and CSS for my theme so it could validate as proper XHTML. Blogger produced buggy code that never validated. WordPress is capable of producing clean code.

(For example, using the old code, in Internet Explorer 6 on long web pages, the bottom half of the sidebar would be stuck to the bottom and there’d be a huge gap between it and the top half. Using the old code, I hadn’t yet been able to fix it and now I don’t have to.)

I removed the flyout navigation menu above each post, put in a navigation header at the top, added a calendar in the sidebar (viewable only in non-Internet Explorer browsers and Internet Explorer 7 and up) so you can browse for any posts published on specific days, and included feed capabilities in case you want to get Loving Jacqui in your favourite feed reader — I’m told this is becoming a popular way of getting blog and news content.

Oh, and I installed a new photo album because the old one was so difficult to use. I didn’t really like it. Yes this new one was complicated to install; I had to make some special accommodations on my web server to get it to work…

… but now, how do I create a new photo gallery?

Well, I make a file on my computer with a name, put photos in it, and FTP it up to my server. And that’s it. The file becomes a new gallery and any photos are named automatically based on their file names. The software also chooses one of the files as a thumbnail. I can change that later if I wish.

Very sweet. So it’s as easy as backing up files.

Filed under: Blogging, Web Design

No Comments – add your comment!

Things Are Changing

I’ve retired Loving Jacqui’s old header graphics for both the original blue and ghastly pink themes:

Old LJ Pink Header
Old LJ Pink Header

… and replaced them with new ones. The background image of the new headers is where we spent our first truly romantic five days alone together at the Forest Rise Eco Retreat in Western Australia.

Filed under: Australia, Web Design

3 Comments – add your comment!

Good Taste

Except when it comes to women, where I have impeccable taste, Jacqui has better taste than I do.

For example, her Christmas present for me included a horizontally striped brown polo shirt, which goes against all of my internal “rules” on what I should wear: to wit, horizontally striped, brown.

Yet it looks great on me.

I spent the last few days designing a website header graphic and/or business logo. Whatever I liked, she didn’t like. Then I’d ask a friend. And she’d say, she doesn’t like it either.

Whatever I didn’t like much, Jacqui did. And her tastes forced me to create a new one I like even more!

1st Business Logo

For starters, here is my old business header graphic. I liked it, but very few other people did. Rob Neppell, founder of blogging and media consulting company Kithbridge, told me it was the least professional aspect of my site.

2nd Business Logo

So… naturally… I developed this cartoonish logo with a child’s faux clock.

3rd Business Logo

Then I remembered all the cheesiest self-made real estate salesperson websites and vacation time-share sites and said, “I can do that!” I really liked this one. Jacqui hated it and said it looked like something a flashy loud salesman would use. Oi!

4th Business Logo

I next returned to B&W simplicity. I thought the checkmark was so cool because you see I make bulleted lists and check them off when I’m done and… Jacqui said it isn’t cool.

5th Business Logo

She liked this one though. No checkmark. I liked the border especially and she said it didn’t work because of my photo to the left of it and another image to the right… so it broke everything up.

6th Business Logo

She really liked this one. I didn’t! So plain. I showed it to a friend of mine and she liked it too. She also hated the other ones I liked. I began to notice a pattern.

7th Business Logo

So why not take my favourite picture I’ve taken, a night shot of the ocean and Washington State near my home (click above image to see), and turn it into a website header graphic? This was MY favourite so far. Bear didn’t like it. Neither did my friend. ‘Cause it was dark. Dark! It suits the website. “But you can’t really read the text.” Hm. “And you can’t make out the background ’cause it’s so small while the original is big.” Ugh.

8th Business Logo

Then I hit upon a new approach and spent a significant amount of time on it. Since I use machine labeled manila file folders like there’s no tomorrow, why not go with a folder? And, better, I can colour code the top so when a person clicks on my coloured navigation tabs, the top changes colour. Sweet! I loved this. It was so cool. Jacqui didn’t like it, but oh well. Can’t please everyone. ‘Xcept my friend hated it too.

So I pushed forward and made this:

Final Business Logo

That’s by far my favourite one, and Jacqui likes it too. It also makes good letterhead:

ChristophDollis.com letterhead

Filed under: Bear, Business, Christoph, Web Design

2 Comments – add your comment!

XHTML

Yay, I recoded ChristophDollis.com from HTML (Hypertext Markup Language) 4.01 Transitional to XHTML (Extensible Hypertext Markup Language) 1.0 Strict.

Filed under: Blogging, Technology, Web Design

2 Comments – add your comment!

Web Design, CSS, and (X)HTML

Just finished making Loving Jacqui all Christmassy… we were talking about fellow British Columbian, Dave Shea, the creator of the Loving Jacqui template (before heavy modification).

He’s one of the luminaries behind CSS Zen Garden.

A year ago I had a roommate, Barry, who is a generation older than I, but he was just a very good friend to me.

I had a website I wrote in Microsoft Word. Here it is:

lovingjacqui.net/originalopenletter

(although I’ve since rewritten it in something other than Word!)

This is how I met Jacqui, of course, and writing it was one of the best decisions I ever made in my life.

But I couldn’t have cared a less about web design. Heck, I wanted it in old school “typewriter” font because it is the closest thing to handwritten and I wanted it to kind of read like a handwritten letter.

It did kinda bug me that when I opened it in other browsers other than Internet Explorer, it looked awful. But since most women I knew used IE, it worked anyway.

My roommate told me that he designed his websites in Notepad. This kind of floored me.

“Notepad?”

“Yep.”

I had no idea about this at the time, but all a website is is a text file using a simple language, (X)HTML: (extensible) Hypertext Markup Language.

It’s very logical and simple. Write it in a text file, change the text file “extension” from .txt to .html and you’re in business.

This realization floored me, but I was intrigued.

Anyway, when I found myself understanding that Jacqui was attracting my attention in a way other women aren’t, I created this blog for her.

Barry had also introduced me to the CSS Zen Garden as an example of how powerful Cascading Style Sheets are.

Go there and see the design. It’s attractive by itself, but look deeper… on the right hand column you’ll see several other designs by other web graphic artists.

They all use the exact same HTML. Try them out.

They are identical even if they look different. What has changed is that each uses a different CSS file. You can visualize why “Cascading Style Sheet” is the perfect name. Everything just flows from it in this neat cascade that you can control by assigning unique “classes” and “ids” to different (X)HTML page elements. It’s how on Loving Jacqui you can press the button on the top right and switch the webpage from “Original Blue” to “Ghastly Pink” and fortunately back again.

The CSS Zen Garden is known around the web for being a beautiful example that has inspired many including me.

I was also talking with her about how I don’t like “alpha-channel transparency” background images.

“What the —?”

Before on the Internet it used to be that your only option for transparency was you could take an image and save it as a .gif file (as opposed to the equally common .jpg usually used for photographs because it offers small file size and millions of possible colours: .gif only offers 256).

When saved as a .gif, it is possible to make certain pixels (picture dots) 100% transparent, which means you can see whatever is behind them.

This allows you to put an image of a dolphin, for example, on your aqua web page and it looks like it belongs there. Even if it really belongs in the ocean.

Newer, more capable web browsers than Internet Explorer: contenders like Opera and Firefox, the one I use, follow more closely Internet standards laid out by the World Wide Web consortium (WC3).

This makes things easier for web designers because while Internet Explorer is common, you’re always trying to make it do things that it “should” do, but won’t do, not without significant tweaking and, “Why the hell does it do that when I just told it to do the opposite?” that you just don’t have to bother with with these other browsers.

For years these other browsers have supported alpha-channel transparency.

You know how when you look through the water, you can see the water and the person swimming beneath it?

Partial transparency = alpha-channel transparency.

Now that the new release of Internet Explorer, IE7, supports alpha-channel transparency, more web designers are placing a background image on their page and then make the surface you write on partially transparent so that you can see the background image like a watermark. They then fix it in place so that when you scroll down, the picture stays and the text itself moves.

This looks very cool and gives the website a certain “unearthy” feeling that makes the site seem light as a feather. It’s beautiful.

But damnit. I come to a website to read and having a photo with light and dark spots behind a partially transparent page makes it hard to read. I guess I’m not 18 anymore, but as a 34-year old, I shudder to think what it’ll be like to read this when I’m 80-something and Bear is lovingly blowing the dust out of my eyes as we send instant telepathic emails enquiring about our prescription drug plan.

So we’re having this conversation, and I’m telling Bear about how I dislike alpha-channel transparency and I’m reading a comment on another blog and I discover this link:

α-channel transparency done right: A Jacqui Bear style “Pretty in Pink” theme even I can approve of

Filed under: Blogging, Technology, Web Design

No Comments – add your comment!