.img:hover – 3/18/2013 Update on the Art Office Website Project

Last week, I discussed the progress that had been made in porting over the old Art Office Tumblr site into WordPress and the tasks still remaining to fix up the site. This week, I’m happy to report that almost all of the items remaining to be fixed have been! I’m going to take a stab at writing a bit more of a technical article that reveals more about how I problem solve during the web design process. Without further ado, here’s what I’ve done this week!

9bfe808e-d56e-4de0-95f7-0f02532c7a49
The new front page of the Art Office!

1. Spring (Image) Cleaning –

This was the first thing I wanted to tackle as it was the most important for bringing the site back online and possibly the most difficult to figure out. After trail and error, I was able to find a solution that allowed me to correct all the posts in one fell swoop. Basically, I found a regex search and replace tool (Search Regex for those who might be interested in the WordPress plugin) that allowed me to process all occurrences of the image tag across all post bodies and replace it with code that would display the full version of the image. It replaced some 500+ occurrences of the code, so I’m glad I found it as manually doing it would have been near impossible.

2. Pretty Usability Edits with CSS3 –

The second thing I did after fixing the images was implement some custom CSS styling override
s to help readability of images, links, and widget titles. In detail, the original Art Office website had grey image borders and a red accented border on hover. I re-implemented this code to affect all image attachments and beautified it using some CSS3 animated transitions. Additionally, I edited links to be a dark grey so that they would stand out against the black text (the links were originally black as well). In effect, this means it is easier to distinguish links from the rest of the page at a glance. I also added the same CSS3 animated transition to links so it would display a neat red accent on hover. Finally, I edited the widget titles on the side so that they popped from the rest of the design more. You can see the result of all of the edits I’ve made to the right!

With these two items, the site is technically ready to be brought online and replace the current Art Office. However, I’ll likely work on feature number three before bring it online…

3. Feed it to me! –

My next major goal I have on the site is to help Professor Fu automate content. Previously on my project working with Professor Schlichtman, I had a very similar ambitious task to automate the generation of content across the blog by aggregating various feeds and pulling relevant posts. It was a difficult task that took hours upon hours of research before finding and executing on a usable solution. (In the end, we had to reach on a number of compromises on the functionality of the system and the places he pulled content from, if you want to see the fruits of this project go here!) This semester, I have to do a similar task, but in WordPress rather than Joomla.

Professor Fu has given me a number of feeds that she would like to aggregate content from and I am currently in the process of researching how to go about this in WordPress. Unfortunately, I don’t have a lot of information to report back on this yet, but expect me to have a very detailed breakdown over the next week or two!

That’s all for this week!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s