The Triumph of a Draft

The clouds are finished -- not perfect, but finished, and supported on all browsers. My About Me and FAQ pages are in presentable forms; there are no more Lorem Ipsums. My footer is clean and gives credit where credit is due, as well as duplicating the Contact link. I have some nice art on the About page that breaks out of the one-column mold a little bit, using simple CSS code inspired by a classmate's website. I have, in short, a website that is no longer just a placeholder.

There are ways it could be improved. Up until the last minute, I'll be trying to figure out what I need to figure out to improve it. But one thing I've realized about Web pages, over the course of this semester, is that they can always be improved. There is always something that doesn't work quite right: an element whose behavior you don't like when you resize your browser window, a cool idea that would take forever to implement, some text whose offset you don't like and can't easily change. At some point you have to say "good enough." If the site I have today is the site I turn in, I'll have some small disappointments. But I'll be able to point with justice to the triumph of a blog, the interesting aesthetic design with respect to theme and purpose, the incorporation of useful PHP scripts, and above all the lessons I've learned about how -- when necessary -- to work, rework, and re-rework until something looks great and does what I want it to.

Not bad, for a semester's work!

All Downhill From Here?

I'm getting close to having a presentable finished product. Today I wrote up a draft of my site's commentary in FAQ format, and did some graphical work on my top nav menu. The nav links had been bare words, and I thought that the sea-and-sky theme merited something a little more interesting. I booted up GIMP, drew a white cloud on a transparent background, and (with the help of a YouTube tutorial) made it into an animated GIF. When you hover your mouse over the cloud, it turns gray, then starts dropping rain and lightning. Then I inserted my links into the clouds. Web designers are always playing with fire when they include animated GIFs in their designs, but I liked the feel of these. They only move when you touch them, so they aren't needlessly distracting to the user; they just heighten the feeling of interactivity and reinforce the playful tone of the site.

Here's the thing. I got the mouse-over effect working by using a built-in Dreamweaver feature. But when I run the automatically generated code through an XHTML validator, it spews venomous hatred at me! Thus alerted, I tried the page in a few different browsers. The clouds work great in Chrome, but the transparency fails in Internet Explorer, and the mouse-over image doesn't load at all in Firefox. How frustrating! If I have time, I will see if I can fix this. Still to do, in rough order by priority: write an About Me page; clean up the footer; finalize the FAQs; play with the blog's CSS; fix the clouds; add a little more art, preferably box-breaking; get a Creative Commons license for the Verses page.

Week 14: How Do You Spell Relief? P-H-P

After my rewarding and yet deeply frustrating results in Week 13, I took the weekend off from web development and let the problem percolate in the back of my mind. At some point -- I think I was in the shower, which is where I usually am when these things happen -- I had an idea.

I had been trying to give Wordpress a new "theme," to use their language -- that is, to strip it of its out-of-the-box default look and dress it up in my pretty CSS. At the end of the process, my site would have been a Wordpress site dressed in my site's clothes. This would be the cleanest and most elegant way to solve the problem. But the complex interdependencies between the chunks of HTML and PHP that make up Wordpress probably make this solution unsuitable for my level of skill. I spent the weekend worrying, justifiably, that I wouldn't be able to do it, and wondering whether there was another way to make Wordpress do what I wanted it to.

But now I realize that this was the wrong question. I shouldn't be trying to change how Wordpress looks; that is too enormous a project. I should be trying to change how my website runs. I am not a tailor. I should not be trying to strip Wordpress down and dress it up. I am a surgeon. I should be doing an organ transplant. I need to identify the bits of PHP that make Wordpress display the blog, and then copy-paste them wholesale into my nice handmade index page, completely free of the baggage of Wordpress's default theme. It is such a simple solution that it's hard to believe it isn't the first thing I thought of.

So I booted up Dreamweaver, and twenty minutes later I have an index page that uses my CSS and shows Wordpress's blog. It was so easy. I couldn't believe how easy it was. It only took two PHP commands. Wordpress's back-end took care of the rest.

There are still problems. When users click on any of the links within a blog post -- on the Leave a Comment link, for instance -- they're redirected to a page that still uses the Wordpress default theme. I think I should be able to solve this the same way I solved the original problem, though, and if not -- well, hopefully users won't be too confused by the mishmash of styles involved in searching the blog or commenting on a post. I'd also like to restyle the internal CSS of the blog component. But what's important to me is that my blog is now usable! Particularly if I can solve these secondary problems, the blog will really be the capstone of the semester for me. I'm so happy to have gotten it working. :)

Upside Down and In Over My Feet

It turns out USF tech support works 24/7. No idea whether that's because it's in India or whether we have grad students who are that desperate for a buck, but it's handy for me! After a brief chat with the support guy about what I needed, I learned that USF doesn't let students set up MySQL databases. If we want blogs, we're supposed to use the tools at blog.usf.edu. I needed a different host.

I found one with some help from my friend, who kindly let me take a subdomain on her own site, which uses CPanel. I'm very proud of myself; without any further help from her, I managed to create the subdomain, transfer my website, set up a MySQL database, configure Wordpress, and install the blog. At the time this felt like a very significant achievement, a real leveling-up moment for my nascent web-guru ability.

I quickly discovered, though, that Wordpress is much more than I thought it was. It isn't blogging software at all, it's a whole enormous pre-built website that happens to be shaped like a blog. Installing it is the easy part. The hard part is making it do what you want, and, more to the present point, making it look the way you want -- because goddamn if it didn't circumvent my nice CSS sheet in favor of its own. And the labyrinthine design of the out-of-the-box Wordpress website means that it's really hard to figure out what to change. In principle, I want to take the CSS design I had, stick Wordpress's blog in the content box, create a little box under that one where the sidebar is supposed to go, and have done. But things do not seem to be that simple. Frustration sets in. I wonder whether I should have settled for news updates in text format, with no blog technology at all.

But I am lucky enough to have two aces in the hole. My first is my friend, who has reskinned Wordpress sites before. Maybe she can help me. My second, my fallback, is that my original site is still on the USF server. I have lost nothing if this experiment fails, and I've learned a great deal!

Week 13: Wherein the Protagonist Discovers the Advantages of Corporate Hosting

Last week was an art week, so this week is a content week. The big item of content still unaccounted for is the blog, so I went to work on that today. I went for Wordpress, of course, since it's a free and versatile tool written in PHP, which I already know works on my site. But I soon discovered that installing Wordpress requires a MySQL database to be set up. Okay, how does that work? Well -- said the Wordpress instructions -- you set up a database using the database client provided by your host, like CPanel or PHPMyAdmin. Er... come again?

So yeah, it turns out that real hosting companies give their customers a set of standardized tools that allow built-in management of things like databases. A friend with a website of her own was even nice enough to let me log into her site's CPanel interface so that I could poke around. It's neat, it's exactly what I need, and as far as I can tell it's completely absent from USF student webspace. I tried to be clever and manually install PHPMyAdmin, but I got "access denied" on ten files related to importing and exporting. USF is being cautious about what it lets its students put on its servers. Tomorrow I will call tech support, and if they can't help me I will pay for the hosting I need to give my website the features I want!