Above the Fold: The Blog

It seems as though every time I open my favourite news sites or turn on a technology strand on TV, someone is talking about social network sites. They are usually declaring their evils, claiming them to be the haunts of pedophiles and criminals, or just pointing out the amount of time employees waste on them every day when they should be doing some form of paid work.

Social networking sites only seem have to have popped onto the mainstream radar over the last eighteen months or two years. Most commentators talk as though they`re entirely new things, invented with the creation of Facebook and unheard of before.

I take that claim with a pinch of salt. My first introduction to the Internet was the discovery of message boards when I was hunting for some information on a new TV show that I had just discovered, Buffy the Vampire Slayer. In fact, I stumbled on the message board on the official website. It was called the Bronze (after a nightclub in the show) and it was a place for fans to meet, chat and socialise. When the show moved to a different network and the original site was shut down, the Bronze migrated to The Bronze Beta. It didn`t have all the bells and whistles of Facebook or MySpace, but the key elements (connecting people on-line through similar interests, creating a network of friends) were all there. That first trip into the Bronze was in 1999, around the same time that LiveJournal (one of the biggest and earliest social networking sites) began.

Things are more sophisticated now. The interfaces are more polished (one no longer needs to know HTML in order to post a simple message at most social networking sites, for example!) with better archiving and organisation possibilities. The back-ends are much more complicated and often more stable (although some LJ users might disagree at times). The purpose hasn`t changed, though.

The Internet is an amazing resource if you want to know something, but for me it has always been about communication and connecting with people. I check out my LiveJournal and Ravelry account most days to catch up with the friends that I have met through fandom and knitting and see what`s going on in the various communities I contribute to. I pop into Facebook a couple of times a week to see how friends from school and previous employments are doing and read their gossip. If I see a post in a community that looks interesting, I`ll click through to see what else that person has said or done and possibily find a new friend.

The mechanics are different from those early days on the Bronze, but nothing fundamental has changed. The social Internet has been around for far longer than any of those commentators will admit, the only difference is that it is now discussed on the BBC and CNN rather than whispered about in industry conventions.

Well, Spam Karma 2 seems to be working beautifully. 12 pieces of comment spam were harvested today without a single one hitting my inbox. The plugin sent me a little digest note to tell me how much it caught, a useful tool that will allow me to check it until I’m confident that it’s doing it’s thing properly, and every bit was obnoxiously evil spam. My email account was threatening to drown under the stuff, so this is good news.

The irritating side of online life has been happening on my fannish website. A kid decided to hotlink straight to a graphic on my site to use as her icon/avatar for a forum. The graphic that she linked to was an icon that I created specifically for people to use as their avatars if they want, but I do state that people should download and save a copy if they want to use it rather than hotlinking.

The most annoying part is that this kid had actually managed to write a script that bypassed my .htaccess file. The forum was for a popular boyband and I managed to track down which icon she was using, so I’ve simply changed the file name on the server. I made a quick check this evening and she has now changed her icon - using one that’s she’s obviously downloaded and saved onto the forum, rather than hotlinking. Hopefully she’s at least learnt that web masters pick up on that kind of usage pretty quickly - that forum was very popular and my web stats went utterly insane, which was an immediate give-away that someone was hotlinking.

I haven’t had someone bypassing the .htaccess before (usually I just get a giggle from the people who have a big “Hotlinking is bad manners!” graphic in the middle of their web page), but it’s certainly taught me that there is a way around practically any protections you attempt to put into sites. Particularly if the culprit is young, determined and obsessed.

My only questions is…why did she chose a Doctor Who icon to use on a Green Day forum? It wasn’t even a David Tennant icon!

CSS Zen Garden is one of my favourite sites for inspiration and I thought that it was time to point out a few of my favourites from the site. It’s one of the sites, along with Eric Meyer’s, that first demonstrated to me how powerful CSS is and the sheer beauty of the designs that can be accomplished with it. I suspect that these are most people’s starting points in CSS, whether you’re a pure designer or more of a coder/developer with a love of beautiful design like me. I am indeed geek enough to own “The Zen of CSS Design” and it is rather thumbed through because it manages to look gorgeous while providing dozens of hints, tips and concepts for things that can be done.

The part of me that appreciates clever ideas adores the CSS Zen Garden concept of one HTML file and hundreds of potential CSS designs. It’s often a good reminder that what I’m attempting probably isn’t impossible (although it might seem like it) but will need a bit of cleverness. And designers shouldn’t let coders say it’s impossible - our job is to make those gorgeous designs work as functional websites, hopefully adding to the site rather than dulling it down.

But I digress and now return to the point.

Top of the list of favourites is Museum. I love the surface simplicity of the black and white design, with all the detail that’s there when you look more closely. The page flows, it’s interesting to look at and the text has become a part of the design and shape of the page.

Dead or Alive is another black and white design that’s fun as well as good looking.

CSS Zen Ocean isn’t one of the official designs, but it’s great fun and demonstrates some interesting uses for transparency in PNGs. The designer has also made it as cross-browser compatible as possible, despite IE’s current lack of support for alpha-transparency in PNGs, by targetting IE with GIF replacements. Looks best in a modern browser such as Firefox, but I like the creativity in this one.

Bonsai Sky is another design that shows off some special effects in CSS - check out the window border and the little guy on the right hand edge of the screen.

Gemination needs to be viewed in a CSS-standards compatible browser such as Firefox or Opera and then in Internet Explorer to understand why it’s cool. It’s a great demonstration of how different the CSS support is in the two types of browsers and for once that has been used as an advantage, targetting different designs for each. Lots of the techniques used in this one can be ported out to hack around IEs bugs and get sites looking right in both browsers, but I like the way that the designer has gone in the opposite direction to produce completely different designs.

I’m sure that I’ve missed lots of the ones that I wanted to point out, but I think that I covered the basic reasons why I visit the CSS Zen Garden regularly.

In other slightly exciting news, I am going to be designing a website for a Canadian film editor. Very exciting prospect there.

As documented yesterday, I managed to get the ‘acorns’ in the left-hand navigation bar fixed but had to take them out of the right-hand bar because I couldn’t replicate the trick. A little midnight musings brought the answer.

The code for the left-hand navigation elements is adapted from gavlinne’s original suggestion on the webdev journal:

div#nav-left ul#nav {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-left ul#nav li {
margin-left : 25px;
float : left;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-left ul#nav li {
margin-left: 12px;;
}

div#nav-left ul#nav li a:link,
div#nav-left ul#nav li a:visited,
div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
text-decoration : underline;
}

This all forced IE to see the ‘acorns’ my specifiying all the states of the a: tage and works perfectly well for a single-level navigation bar. In this blog, the right-hand navigation bar has multiple layers and for once IE displayed them as I intended when using this code, but Firefox didn’t. That’s actually a sign of IE playing up rather than Firefox, because Firefox quite rightly got confused by the float:left and sent things everywhere. The code above had an extra layer of ‘ul li’ added to anything that originally stated ‘ul li’, but there was nothing clearing those floats so the first layer of the list confused itself.

The trick was a slight adaptation below (in bold):

div#nav-right ul {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-right ul li {
clear: both;
padding-top: 20px;
}

div#nav-right ul li ul {
padding-bottom: 20px;
}

div#nav-right ul li ul li {
margin-left : 25px;
float : left;
padding-top: 0;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-right ul li ul li {
margin-left: 12px;
}

div#nav-right ul li ul li a:link,
div#nav-right ul li ul li a:visited,
div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
text-decoration : underline;
}

That was the only adapatation needed and it worked like a dream. A little bit of fiddling with padding to ensure that the category headings don’t bump into each other, and the navigation is now working as intended in IE6, Firefox and Opera.

Although I suspect that it still explodes nicely in IE7.

I’ve been experimenting a little with Google Talk over the last few days, primarily with the intention of introducing my mother to it. Her sister lives in Canada and is flying over to visit us this week. When she goes home, though, my aunt plans to finally buy herself a computer and I’m wondering whether I can get the two of them chatting on-line. Partially this would be so that they can communicate more often than phone calls a couple of months and also to give my aunt a private way to chat when she doesn’t want her housemate to overhear her.

The problem is that they’re both complete technophobes. My aunt is probably worse than my mom, but not by much. Instant messaging is a concept that they’re both figuring is too new-fangled and complicated for them.

Hence my experimentation with Google Talk. In the past I’ve had both AIM and Yahoo IM set up and not really liked either, which is problematic coming from a geek. A Jabber or Trillian type program would be perfect for me, but probably too much for my aunt to set up on her own. Mom has been considering changing from her current email provider and she seems quite interested in setting up a Gmail account. We could easily set up a Gmail account for my aunt while she’s here, saving her from the scary side of first steps on the Internet. And my experiments this week have shown exactly how easy it is to set up Google Talk - quite literally, you download and go. That should be just right for my aunt. And chatting is wonderfully easy. Er, too easy because I can now chat to friends at daft times

I don’t plan to use Google Talk for VoiP telephone much - I’m still concerned about security stuff there and I don’t have a microphone set up on this computer. But I did receive a call from a friend in the States today. We’ve been emailing and chatting for around four years, but never spoken in person. Until today - she called and talked, I typed back. Her kids even said hi. It was wonderful. I finally know what her voice sounds like. I’m going to do some more reading up on the security, pricing and so on before instigating return calls, but it was absolutely wonderful to hear her voice for the first time.

I suspect that the reason I’ve never got into IM-ing before is because I know how addictive it could be. But it is good to chat to people in real time rather than some of the long-winded email conversations I have!