Archive for the ‘Templates’ Category

Tag, your it! – How to tag people in your facebook status

Wednesday, September 16th, 2009

Facebook has long had the facility to tag photo’s of your friends and family, in fact it’s often cited as one of the main reasons people switched from MySpace to it. However until recently you haven’t been able to tag your friends in your status.

Now you can! Well maybe you can, it’s something that facebook have been rolling out over the last few week’s I believe however not everyone has the ability to tag their friends.

So why? Why would you want to tag them? Traditionally facebook’s status has been a fairly private thing, it tended to be just about what you where up to and what you did, that because it tended only to be a very few who read it. Then last year facebook had a big change, and when’t real time, allowing users to see and comment on their friends up-dates with ease, and with it the way we use facebook our status up-dates changed as well.

Just as the 2008 upgrade due in part to the explosion in use of a new social media tool, Twitter, so the ablity to tag status upgrade is lifted from the same tool. In twitter for throes who don’t know, you can tag your friends by prefixing their user name with an @ symbol (see below for how this looks in real life).

tag a person in facebook

tag a person in facebook

Facebook have taken this and ran with it, with this upgrade you can not only tag people but also events, fan pages, events and applications.

tag a fan page in facebook

tag a fan page in facebook

tag an application in facebook

tag an application in facebook

These messages are then posted to your wall as well as throes of everyone you’ve taged.

It will be interesting to see if re-tweeting (or RT’ing), the twitter practice of re-posting an update while citing the original author gets a facebook equivalent (re-facing maybe :)

Let us know what you think about this twitter inspired taging, will you use it? Is it too much like twitter? Or do you think it’s a waste of time?

Just how much is 2010 Championship Manager Worth to you?

Thursday, August 20th, 2009

Just as Radiohead did with RAINBOW the video game manufacturer Eidos is offering downloads of its 2010 Championship Manager for as little as 1 penny, as a means of building a following for the franchise.

Matt Cowan reports.

From Reuters

Design Through Dialogue

Monday, June 29th, 2009

When I first heard about “Design Through Dialogue” I was a little sceptical. Firstly the book is aimed at architects not webdesigners, and secondly Design Through Dialogue” makes me think of designing by consensus which, as I’m sure you all agree, leads to the most dull, boring and generally user unfriendly sites out there.

However far from designing by consensus “Design Through Dialogue” is about taking hold of the conflict that exists when a client wants one thing and the designer (an architect in this case) wants another and seeing it through, and not taking the easy option of a compromise but forming a new third way that doesn’t compromise and is acceptable to both, it still sounds like compromise to me, but the buildings produced via this methodology (e.g. the Supreme Court building, Jerusalem (see http://www.theodora.com/wfb/photos/israel/israel_photos_37.html ) are far from dull compromise designs.

While not directly about webdesign, Design Through Dialogue” does offer a way of dealing with throes difficult client – designer relationships, without leading to dull compromise designs and while designing we pull on inspiration for all sources so while should we not pull on ideas from other design disciplines when dealing with clients?

Design Through Dialogue” is currently in both hard and paperback, in the UK, and is due to be released in the US in December 2009.

5 Amazing Free Joomla 1.5 Templates

Monday, May 4th, 2009

regardless if your a small business, a designer on a harsh budget or just putting together your on small site, CMS templates can be a life saver. They give you a foundation on which to build your site, and if your short of time, money or both that much needed head start can be the difference between success or frailer.

1. Nightwave by Siteground

NightWave by SiteGround

NightWave by SiteGround

2. IT Service from prowebcreative.com

IT Service from prowebcreative.com

IT Service from prowebcreative.com

3. Green Life by mp-development.de

greenlife

Greenlife from mp-development.de

4. 007 by free-template-download.com

007 by free-template-download.com

007 by free-template-download.com

5. JA Ruby from joomlart.com

JA ruby by joomlart.com

JA ruby by joomlart.com

Hello and welcome

Sunday, October 26th, 2008

To my webdesign blog, really ths blog is just a place for me to keep notes and ideas about webdesign, a sort of memory hole for my thorghts.

That said hopefuly there will be the odd gem that others may find useful.

So now the introductions are over with I guess I better post something useful to get the ball rolling, so with out here it is, my first crack at a WordPress template. I’m planning a fuller course on how to write wordpress templates but till then here’s the template you see around this site.

The interesting and I think novel thing about it is the way it replaces the first letter of the post with a larger version of that letter.

Normal image replacement is done for whole words, and has some issues as far as accessibility is conserned. However SFLIR (Scott’s First Letter Image Replacement) works a little differently.

Code

function SFLIR(id_tag){
var divs=document.getElementsByTagName('div')
for (var i=0;i
/images/lettersets/'+bg_letter+'.gif" style="float:left;" alt="Large, fancy Letter '+bg_letter+'"/>

';
            inht = divs[i].innerHTML;
            inht2 = inht.substring(4);
            divs[i].innerHTML = img_insert+inht2;
            }
        }
}

OK line by line…

Code

function SFLIR(id_tag){

This is simply the name of the function and as you can see it takes one input var, called id_tag. this is the string of the id of the div tags you want to replace the first letter of.

Code

var divs=document.getElementsByTagName('div')
for (var i=0;i

This forms an array of the div tags within the document. and scrolls thru them one at a time.

Code

if (divs[i].id == id_tag) {

This just checks the id of the current div tag to see if it’s the same as the one we are looking to replace the inital letter of.

Code

bg_letter = divs[i].innerHTML.charAt(3);
bg_letter = bg_letter.toLowerCase();

This then store a copy of the first letter.
N.B. Since this javascript was written for this WordPress template it doesn’t look at the first character, but the fourth, this is because the first, second and third characters are an opening paragraph tag i.e.<p> and the first letter is really at position 4.

Code

img_insert = ‘/images/lettersets/’+bg_letter+’.gif” style=”float:left;” alt=”Large, fancy Letter ‘+bg_letter+’”/>

’;

This may look at little complex, especially to throes who don’t know how wordpress words. all it’s doing is using a wordpress php function to make a string that would display an image from the /images/lettersets directory in the current WordPress theme folder. It also writes an alt tag for this image so if a screen reader does process the javascript and replace the image, it will still be ok (ish…)

Code

inht = divs[i].innerHTML;
inht2 = inht.substring(4);

This code removes the character we have just replaced by copying the text from the fifth character on (i.e. the rest of the div tag).

Code

divs[i].innerHTML = img_insert+inht2;
}}}

Finally the image and the rest of the div tag is written back to the screen and the user gets a nice capitalized first letter.

As this is Javascript, the image replacement code will not be ran on a screen reader and so the user will get the normal text, however should for some reason the code be ran on a screen reader, then the image replacement script will at least give the user an alt tag describing what should be there.