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!
Thursday, April 14, 2011
Tuesday, April 12, 2011
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.
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.
Monday, April 11, 2011
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. :)
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. :)
Wednesday, April 6, 2011
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!
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!
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!
Tuesday, March 29, 2011
Week 12: Breaking Mondrian
Last week I was a little frustrated at feeling like I didn't know enough to make my website look like something other than boxes stacked on top of each other. This week I resolved to do something about that. I've revamped the site to give it a distinctive style, and while I'm not sure the result is aesthetically better -- yet -- it certainly is less boxy and more unique.
I started off by finally changing the damn font. Adobe Garamond Pro Bold is an eye-catching, impactful font that works nicely for headings, but it is absolute crap for content. I used CSS to change all my content boxes to Georgia, whose clarity and distinctive serifs make it easy to read. That was an easy call. Then I got down to hard work.
What I wanted was to eliminate some of the straight lines in my CSS template without destroying the site's clear organization. This took the most concerted foray into GIMP I've thus far attempted. The background of the site had been a tiled image, one pixel wide, with a thick white zone separating the light blue heading from the dark blue body of the page. I widened the image to fifty pixels and turned the straight white border into a hand-drawn curvy shape like an elementary school ocean. It took quite a while to get the ends to line up right, but when I was done, like magic my page had a distinct sky-and-sea theme. I was taken aback by how this one change completely changed the feel of the layout.
I wanted to run with the maritime idea suggested by my new border, so I took my site logo -- a blue-and-black box -- and revisited it in GIMP to see if I could give it an island shape that could sit on the waves. I had to deal with layers and transparency a good deal to make this work, since I didn't want to surround my island with a white box, and I discovered that PNG images can be partly transparent while JPGs cannot! I considered ditching transparency and just coloring the background of the logo with the same color scheme used for the site background, but that might have caused issues on computers with different screen dimensions from mine. In the end, my island-logo sat nicely on my ocean, properly centered above my content, with a nice, transparent background.
I liked the evolving line-drawing feeling of the site's art, so I went ahead and replaced a horizontal rule element on the verses page with a curlicue section divider I drew with the pencil in MS Paint. I really like the outcome; I only wish I'd been able to figure out how to use CSS to make the [hr /] tag default to this graphic.
Still on my artistic to-do list: make some seaweed out of line drawings to overlap the boundary of my still-boxy content pane; turn the menu items into clouds. Still on my technical to-do list: implement a blog for the news page; get a Creative Commons license on the verses page. Still on my miscellaneous to-do list: clean up the footer; write content for the About and FAQ pages.
I started off by finally changing the damn font. Adobe Garamond Pro Bold is an eye-catching, impactful font that works nicely for headings, but it is absolute crap for content. I used CSS to change all my content boxes to Georgia, whose clarity and distinctive serifs make it easy to read. That was an easy call. Then I got down to hard work.
What I wanted was to eliminate some of the straight lines in my CSS template without destroying the site's clear organization. This took the most concerted foray into GIMP I've thus far attempted. The background of the site had been a tiled image, one pixel wide, with a thick white zone separating the light blue heading from the dark blue body of the page. I widened the image to fifty pixels and turned the straight white border into a hand-drawn curvy shape like an elementary school ocean. It took quite a while to get the ends to line up right, but when I was done, like magic my page had a distinct sky-and-sea theme. I was taken aback by how this one change completely changed the feel of the layout.
I wanted to run with the maritime idea suggested by my new border, so I took my site logo -- a blue-and-black box -- and revisited it in GIMP to see if I could give it an island shape that could sit on the waves. I had to deal with layers and transparency a good deal to make this work, since I didn't want to surround my island with a white box, and I discovered that PNG images can be partly transparent while JPGs cannot! I considered ditching transparency and just coloring the background of the logo with the same color scheme used for the site background, but that might have caused issues on computers with different screen dimensions from mine. In the end, my island-logo sat nicely on my ocean, properly centered above my content, with a nice, transparent background.
I liked the evolving line-drawing feeling of the site's art, so I went ahead and replaced a horizontal rule element on the verses page with a curlicue section divider I drew with the pencil in MS Paint. I really like the outcome; I only wish I'd been able to figure out how to use CSS to make the [hr /] tag default to this graphic.
Still on my artistic to-do list: make some seaweed out of line drawings to overlap the boundary of my still-boxy content pane; turn the menu items into clouds. Still on my technical to-do list: implement a blog for the news page; get a Creative Commons license on the verses page. Still on my miscellaneous to-do list: clean up the footer; write content for the About and FAQ pages.
Tuesday, March 22, 2011
Week 11: Spring
I had a nice spring break last week, returning to my roots as a recreational BASIC programmer and not thinking very much about professionally valuable languages like HTML. Now that I'm back, it's time for more website reviews!
The sad thing about lists of useful websites from 2008 is that some of them have dropped off the Internet here in 2011. My eye was drawn immediately to the CSSFights.com website, which looked from the thumbnail graphic like an engaging way to compare and evaluate web designs. But the site no longer exists as such. It's been replaced by a mere gallery of designs that the webmaster presumably thinks are cool, indistinguishable from most of the other sites we've looked at this semester.
Speaking of indistinguishable websites, how about the other twenty-six of this week's readings, huh? Look, let's be honest. Five or ten websites that showcase really good web design make a valuable and useful list. Forty or fifty is just redundant, especially when they often link to each other in a big backpatting circle. Yes, there is lots of interesting web design out there. Some of it is fun and artistic in spite of being completely dysfunctional, like iamyuna.com, which I found through CSSBased.com. Some of it is practical and unexceptionally brilliant in its thoroughly best-practices integration of form and function, like volusion.co.uk, which I found through CSSHeaven.com. But there are only so many sites you can look at before you feel like you're not going to see anything new, and more to the point, only so many compendia of "good design" you can look at before your eyes start bleeding at the samey samey sameness. It's not that I think I know everything. I know I don't. But what I don't know is no longer the kind of stuff I can pick up just by looking at websites and thinking about them real hard. Here are some things I don't know.
1. I don't know how to implement most of the designs I consider good. I know enough CSS to put together a workmanlike site that will neither confuse or annoy my audience, nor win any awards for innovation. But I don't know how to do the snazzy stuff that injects art into otherwise by-the-book websites. I barely know how to do mouseover effects. The scrolling banner graphic and pop-out content boxes on volusion.co.uk? No idea where to begin. Can't learn just by looking.
2. On a related note, I don't know how to write original scripts. I'm proud of being able to make someone else's PHP work on my website, but I can't write PHP (or Flash, or Java, or other mainstays of the Web 2.0 "look"). Can't learn that just by looking at websites, either.
3. I don't have great artistic vision. I look at my current website and I think, "well, the font's ugly, the banner needs work, the background is bland." Those are things I sort of know how to do something about, and I will do something about each of them before I turn in the site, but the result will still obviously be a set of boxes stacked on top of one another. About the limit of my creativity is feeling that I ought to find a way to make some kind of graphic that overlaps my content column into the background area, and I don't even know how to do that. But I can't learn artistic vision just by looking. That's like thinking you can watch a hundred New York Yankees games and know how to hit home runs yourself at the end of it.
So, sadly, I don't have much to say about this week's websites. They didn't do anything for me, in the sense of teaching me to be a better designer. I could rattle off some criticism of random designs I found through the sites, but my heart wouldn't be in it, since I can't do a tenth of what the worst designer featured on those sites can do. True, you don't have to be a vintner to know good wine from bad, or to say "this wine is bad and here is why." But I'm not trying to become a web design critic, I'm trying to become a web designer, and I've reached the limit of where criticism can take me.
The sad thing about lists of useful websites from 2008 is that some of them have dropped off the Internet here in 2011. My eye was drawn immediately to the CSSFights.com website, which looked from the thumbnail graphic like an engaging way to compare and evaluate web designs. But the site no longer exists as such. It's been replaced by a mere gallery of designs that the webmaster presumably thinks are cool, indistinguishable from most of the other sites we've looked at this semester.
Speaking of indistinguishable websites, how about the other twenty-six of this week's readings, huh? Look, let's be honest. Five or ten websites that showcase really good web design make a valuable and useful list. Forty or fifty is just redundant, especially when they often link to each other in a big backpatting circle. Yes, there is lots of interesting web design out there. Some of it is fun and artistic in spite of being completely dysfunctional, like iamyuna.com, which I found through CSSBased.com. Some of it is practical and unexceptionally brilliant in its thoroughly best-practices integration of form and function, like volusion.co.uk, which I found through CSSHeaven.com. But there are only so many sites you can look at before you feel like you're not going to see anything new, and more to the point, only so many compendia of "good design" you can look at before your eyes start bleeding at the samey samey sameness. It's not that I think I know everything. I know I don't. But what I don't know is no longer the kind of stuff I can pick up just by looking at websites and thinking about them real hard. Here are some things I don't know.
1. I don't know how to implement most of the designs I consider good. I know enough CSS to put together a workmanlike site that will neither confuse or annoy my audience, nor win any awards for innovation. But I don't know how to do the snazzy stuff that injects art into otherwise by-the-book websites. I barely know how to do mouseover effects. The scrolling banner graphic and pop-out content boxes on volusion.co.uk? No idea where to begin. Can't learn just by looking.
2. On a related note, I don't know how to write original scripts. I'm proud of being able to make someone else's PHP work on my website, but I can't write PHP (or Flash, or Java, or other mainstays of the Web 2.0 "look"). Can't learn that just by looking at websites, either.
3. I don't have great artistic vision. I look at my current website and I think, "well, the font's ugly, the banner needs work, the background is bland." Those are things I sort of know how to do something about, and I will do something about each of them before I turn in the site, but the result will still obviously be a set of boxes stacked on top of one another. About the limit of my creativity is feeling that I ought to find a way to make some kind of graphic that overlaps my content column into the background area, and I don't even know how to do that. But I can't learn artistic vision just by looking. That's like thinking you can watch a hundred New York Yankees games and know how to hit home runs yourself at the end of it.
So, sadly, I don't have much to say about this week's websites. They didn't do anything for me, in the sense of teaching me to be a better designer. I could rattle off some criticism of random designs I found through the sites, but my heart wouldn't be in it, since I can't do a tenth of what the worst designer featured on those sites can do. True, you don't have to be a vintner to know good wine from bad, or to say "this wine is bad and here is why." But I'm not trying to become a web design critic, I'm trying to become a web designer, and I've reached the limit of where criticism can take me.
Subscribe to:
Comments (Atom)