Blog

Wohill is looking for guest bloggers

by Niklas Waller on May 4, 2008

Wohill is looking for guest bloggers

We have recently started looking for people who would like to guest blog here at Wohill once or occasionally.
If you’re interested – send us information about yourself like name, email, website, profession, twitter id (if you have one) and the blog entry, which should consist of a subject and a body.

We will look at the information and if it fits our profile we will publish the blog entry sometime soon (depending on the interest) – you will be notified. The subject should be related to either design or development in some way and in english.

Wohill has been up and running now since January 2008 and is steadily going forward with a constantly increasing number of unique visitors per day. Your post will be seen by many people and indexed very well in the search engines.

Take this chance now and send your info to info[at]wohill.com.

Post any questions in the comments or send an email to the same address!

Share and Enjoy:

3 comments

Tagged as: guest blogger, wohill

Create related blog entries using tags

by Niklas Waller on April 24, 2008

in Blog

This is the third article about tags.

Once you have started tagging your entries this information can be used in several contexts and one of my favourites is the related blog entries functionality.

For each blog entry that is loaded to the user – tags for that entry needs to be matched to other tags in the database. All of these other tags are being used in the same way as a marker or keyword for one or several other entries. So other entries that have one or several of those matching tags will be displayed as related blog entries. This is a very dynamic and nice solution that updates both old and new entries with the most recent information automatically.

So here are again a couple of php-functions to solve this. As in the former example it is assumed that the tags are stored as a #-separated string with a leading and trailing # in the database for each entry.

Make these two calls in the place where you want to display related entries:

$resultSet = returnMatchingDesignsByTagsAsResult($row['tags'], “#”);
printRelatedEntries($resultSet, $row['id']);

Where $row['tags'] is the tags-string.

The function ‘returnMatchingDesignsByTagsAsResult’ performs a query to the database for entries with matching tags and returns a resultset with those entries. Here is where it comes to use with the leading and trailing # in the tags-string:

/* Return query result that contains design rows with matching tags */
function returnMatchingDesignsByTagsAsResult($tagsString, $delimiter) {
$mysql_table = ‘the_table’;
$counter = 0;
$tags = array();
/* Remove # characters at the beginning and at the end */
$subTags = substr($tagsString, 1, -1);
/* Split string into array */
$subTags = split($delimiter, $subTags);

/* Loop through array */
foreach ($subTags as $value) {
$tags[$counter] = strtolower(trim($value));
$counter = $counter + 1;
}

/* Create beginning of SQL-string */
$queryString = sprintf(“SELECT * FROM %s WHERE ((published = ‘yes’) AND (“, $mysql_table);
$counter = 0;

/* Loop through array of tags */
foreach ($tags as $value) {
$tmpStr = “%” . $delimiter . $value . $delimiter . “%”;

/* Find all entries that have a column value ‘tags’ which includes a substring with the pattern #tag# */
/* If first element in array */
if ($counter == 0) {
$queryString .= sprintf(“(tags LIKE ‘%s’)”, $tmpStr);
} else {
$queryString .= sprintf(” OR (tags LIKE ‘%s’)”, $tmpStr);
}
$counter = $counter + 1;
}

/* Complete the SQL-string */
$queryString .= “)) ORDER BY publishDate DESC”;

$result_set = mysql_query($queryString);

if (!$result_set) {
$message = ‘Invalid query: ‘ . mysql_error() . “\n”;
$message .= ‘Whole query: ‘ . $queryString;
die($message);
}

return $result_set;
}

Function ‘printrelatedEntries’ uses the result set from the other function and the id of the current design to print related entries to the web page:

function printRelatedEntries($resultSet, $id) {
/* If there is at least on hit */
if (mysql_num_rows($resultSet) > 1) {
Print “<tr valign=\”middle\”><td></td><td>”;
Print “<b>Related blog entries:</b> <br />”;

while ($row2 = mysql_fetch_assoc($resultSet)) {
/* Don’t print the entry if it is the same as the current since this is not excluded from the result set */
if ($row2['id'] != $id) {
Print sprintf(“- <a href=\”http://www.wohill.com/design/%s/%s.html\” title=\”%s\”>%s</a><br />”, $row2['id'], createUrlTitle($row2['name']), $row2['name'], $row2['name']);
}
}

Print “</td><td></td><td></td></tr>”;
}
}

You still have to create your own sql-table and fill it with data to query of course, but hopefully this will help someone on the way for their specific solution.

Share and Enjoy:

1 comment

Tagged as: php, related, tag, tags

How to create a tag cloud in PHP

by Niklas Waller on April 17, 2008

in Blog

This is the second article about tags.

Our tag cloud is promoted on the bottom left of this blog with this picture. Here is a short guide on how to create a tag cloud on your site using PHP and MySQL.

It is assumed that tags are stored in the database as a string separated by ‘#’ and with a leading and trailing ‘#’. The purpose of this comes to use later on when creating links for related blog entries.

When the tag cloud is built up all tags are fetched from the database and put in an array.
A new array is populated with unique values pointing to the number of total occurences of a key. See code below:

/* Get all tags from all published posts and put them in an array as lower cased and trimmed.
Count all occurences of the elements and create a new array which is an array of keys of unique elements pointing to values indicating how many of them there are in the source array. Return the array. */

function getAllTags() {
$mysql_table = ‘the_table’;

/* An empty tag has the default value ‘__default__’.
A non-empty tag has the format ‘#tag1#tag2#tag3#’ and so on.
*/
$select_design_query = sprintf(“SELECT * FROM %s WHERE (tags <> ‘__default__’ AND published = ‘yes’)”, $mysql_table);
$select_design_result = mysql_query($select_design_query);

if (!$select_design_result) {
$message = ‘Invalid query: ‘ . mysql_error() . “\n”;
$message .= ‘Whole query: ‘ . $select_design_query;
die($message);
}

$subTags = array();
$allTags = array();
$counter = 0;

/* Create an array containing all tags */
while ($row = mysql_fetch_assoc($select_design_result)) {

/* Remove first and last character from string */
$subTags = substr($row['tags'], 1, -1);

/* Create an array from the string */
$subTags = split(“#”, $subTags);

/* Loop through array and put each value to lower case and trim */
foreach ($subTags as $value) {
$allTags[$counter] = strtolower(trim($value));
$counter = $counter + 1;
}
}

/* Create a new unique key->value array */
$tags = array_count_values($allTags);

return $tags;
}

Print the values of the array after each other as links and with different font sizes depending on the number of total occurences for a specific tag. This function has been taken from byteMyCode with a minor modification of the link of each tag. Each link is of the type <http://www.wohill.com/tags/some_tag>. This url is actually a rewrite url specified in htaccess. See this former entry about ht-access for more information. Make a call to this function where you want the tag cloud to be located.

function printTagCloud($tags) {
arsort($tags);

$max_size = 32; // max font size in pixels
$min_size = 10; // min font size in pixels

// largest and smallest array values
$max_qty = max(array_values($tags));
$min_qty = min(array_values($tags));

// find the range of values
$spread = $max_qty – $min_qty;
if ($spread == 0) { // we don’t want to divide by zero
$spread = 1;
}

// set the font-size increment
$step = ($max_size – $min_size) / ($spread);

// loop through the tag array
foreach ($tags as $key => $value) {
// calculate font-size
// find the $value in excess of $min_qty
// multiply by the font-size increment ($size)
// and add the $min_size set above
$size = round($min_size + (($value – $min_qty) * $step));

echo ‘<a href=”http://www.wohill.com/tags/’ . $key . ‘” style=”font-size: ‘ . $size . ‘px” title=”‘ . $value . ‘ things tagged with ‘ . $key . ‘”>’ . $key . ‘</a> ‘;
}
}

More about how to create related blog entries soon.

Share and Enjoy:

Be the first to comment

Tagged as: htaccess, mysql, php, tag, tag cloud, tags

The benefit of tags

by Niklas Waller on April 15, 2008

in Blog

A tag is a keyword associated with a piece of information.

On Wohill we are using tags for several purposes. For every new blog entry we write, one or several tags are specified to associate the information of the entry with some relevant and obvious keywords. These keywords are very useful in several ways as I will explain in just a minute.

The tags are stored #-separated as a field in one of the database tables for each blog entry. Each time a blog entry is created and saved or updated any specified tags are saved to the database and instantly upon reload affecting any sections or areas related to the tag functionality on the entire site. This provides us with a very dynamic and self-going solution.

Here are three ways that we use tags on Wohill:

#1 – All tags are used to build up a tag cloud that you can see at the bottom left of this blog. The purpose of the tag cloud is to easily get an overview of all tags used on Wohill but also the frequency of how many times each individual tag has been used by looking at the size of it.

# 2 – The tags are used to build up links displayed at the bottom of each blog entry. These links are useful for just being there as words indicating what this entry is about. They are also links to other posts on Wohill tagged with the same tag. They will finally help a specific entry index a little bit better in search engine results. One could in this section instead or also choose to use so-called technorati tags which instead would link to similar tags on Technorati, that is to other blogs.

#3 – The tags are used to build up links to related blog entries for each entry. So for every blog entry, the tags for that entry are one by one matched with tags for other entries and displaying those that have a matching tag. This way we make the site more interesting and hopefully visitors will stay longer as it makes it easier for them to find relevant information that obviously already was interesting to them. The really neat thing about this is that you don’t have to update the related blog entries on your own. All you have to do is to specify the tags when creating a blog entry. Both recent and old blog entries are updated with the latest information each time the blog is accessed.

Next development blog entry will be more specifically on how to create a tag cloud for your site – the PHP way

Share and Enjoy:

Be the first to comment

Tagged as: blog, metadata, related, seo, tag, tag cloud, tags

Page moves every time on reload

by Niklas Waller on April 13, 2008

in Blog

There is currently one issue I’m working on with this blog that’s really bothering me. And that is that the page (or really the table where all the content is in) moves every time the page is reloaded/refreshed in Firefox and Safari to the right and back. It may be problems with other browsers as well, but it is not a problem in Internet Explorer however.

I have of course been breaking down the page into pieces to find the problem and the problem as far as I can tell is due to some of the JavaScript script tags. If I remove most of the adverts , which are script tags on the form

and the Feedjit scripts, the moving/jumping problem disappears.

Now, why is this happening? Is there some CSS-adjustment of any kind or some other thing that I have missed or a known work-around?

A way to solve this is to put the scripts in iframes but that is not a good solution since the scripts rely on the information of the page that they reside on and would loose that being on an “empty” page.

Any help is appreciated!

Share and Enjoy:

1 comment

Tagged as: browser, javascript

The blog software architecture

by Niklas Waller on April 1, 2008

in Blog

I decided to start blogging two years ago. At that time I chose to use an existing blog framework. There are several on the market like Blogger, WordPress, Typepad, Livejournal etc. I decided to go with Blogger at that time and I am quite satisfied. Especially Blogger and WordPress are very good and I really recommend them since they both are easy to use with many functionalities and plugins. Another really really good thing is Blogger indexes very high at Google. I am actually not sure if that is only due to good SEO, a good search engine or the fact that Google acquired Blogger some time ago and gives it some extra points when scoring the site for searches or if it just is a combo. More about that at some other time.

With Wohill we decided to do everything on our own! Sure, a framework like Blogger can provide many things but not everything. And there are a lot of things you would like to have your way when thinking about it. As we own the code and data all the way from backend to frontend (ok not quite true since it’s located on a web hotel but almost…) we can do whatever we want to do, we can fulfill all of our wet web dreams! There are almost no limitations which certainly is freedom and that is the reason to build and maintain your own blog software (besides the fun of it).

A blog is a mix of design, user-experience, functionality and good SEO-thinking. I focus mainly on functionality and SEO. This blog is built on HTML, JavaScript (and AJAX), CSS and PHP (querying a mySQL-database). That’s what you need to create a blog that can do most of the things you can think of. And lot’s of that is thank’s to the great capabilities of PHP. If the functionality is not already in the default library, someone else might have written some useful classes for you to use or you can just do it yourself.

A typical blog consists of a few typical elements when looking at it from a visitor’s point of view:
- A blog roll
- Links section
- Recent entries
- An archive of all earlier blog posts
-Categories
- RSS-feed
- About/presentation/profile
- An area for the content, the blog post
- Comment functionality

Some blogs have more functionality like:
- Recent comments
- Widgets
- Client scripts
- Visitor stats
- Bookmarking
- Permalinks
- Search function
- More…

In my opinion a blog should at least contain the first list. So how do we build this?
We could do everything static, which means using only HTML, CSS and some JavaScript. But that is boring, ugly and so inefficient and has a very unpleasant 90′s feeling about it. So the obvious choice is a dynamic solution where we choose to keep the design in one place and the data in another place. For this blog, the design is created using HTML and CSS and the data is stored in a mySQL-database to which data is added, updated and removed using PHP and SQL. The data is presented into the design using PHP and JavaScript.

But since we don’t want to be blogging using an SQL-client or directly in the database we also need an administration interface – which the blogger(s) can use to create new posts and also to manage other things like categories, wallpapers etc. So we need an administration interface and a presentation interface that both communicates with the database to insert, update and remove data. This communication consists of a middle layer that is the core functionality of the blog.

To summarize we need to build the blog in different blocks:
- Frontend

– An interface for the visitors (what you see)
– An administration interface (for the bloggers)
– Support functionality for validation, checks, notifications etc.(JavaScript or PHP)

- Middleware, which works as the communication layer between the presentation and the data. This functionality either functions as servlets or as client functionality to get the data for example.
- Backend (the database that holds all the data, there are no stored procedures in this solution).

Each of these blocks can be divided in more detail but this is an abstract explanation however. Changes that we make to the site either becomes visible to visitors and in this case we modify the frontend. Sometimes we modify the middleware to for example get better performance or SEO etc. And sometimes the backend or database has to be modified as a consequence of changing the frontend or middleware. As you might understand we have full control everywhere (except of possible downtimes on the server).

This is what I do on Wohill and my blogging will be concentrated to these functionalities, new features, aspects, problems, solutions and so on regarding all of these areas when developing this blog, which hopefully will be interesting and come to use to other people. If not, one thing I have learned is that it will certainly come to use to the one that wrote it – working as a notebook or diary.

Please feel free to drop any questions, correct me or add suggestions.

Share and Enjoy:

Be the first to comment

Tagged as: architecture, blog software, wohill

New blogger on Wohill

by Niklas Waller on March 29, 2008

in Blog

New blogger on Wohill

Hi All,
I am Nic. Randolph has already introduced me in two earlier creations; In “Faces of Wohill” – symbolizing us and also a special symbol for me, which I do intend to use. Great work and thank you very much partner!

I am not a newbie to blogging. I am running another blog – Nick’s corner – and have been for two years now. This, Wohill, is somewhat different however. Let me explain.

Me and Randolph have been working together on this blog project for quite some time now (at least when speaking in Internet time). If you take a look at the left side of the page, below entries and wallpapers etc, you’ll see for how many days it has been running. Actually we started on the 3rd of January 2008 and since that Randolph has been blogging for three times a week with new ideas and constantly cool and fresh designs. During this time we have grown in several ways – the amount of blog posts of course but we have also grown into the design and feeling of the site and become good friends with it.
We have been trying to make the site more exciting and fun and with a better user experience all along, using two main concepts – design and development. Mostly for ourselves but also for our visitors. To be able to continue doing this you really have to enjoy what you’re doing – you have to be passionate of what you’re doing.

Randolph mentioned that he thinks that we are a great combo and I believe that is very much true. We have been and we will have lots of fun, we will learn many things and we will be able to contribute to the communities to which we address in a very good way. The reasons for this are two in my opinion; The first is that we are two people with expertise in two different areas – design and development. And the other is that both of us are extremely passionate at what we do. The combination of these two is what makes the difference. We will be able to deliver more content, expertise in two areas and a unique combination of design and development that hopefully will attract and help people in many different situations. This makes it funny and incredible interesting in my and Randolph’s point of view. I can assure you that money is not the reason to why we are doing this but solely our passion.

So having said that, I will start blogging about what I’m passionate about – development. And web development is one very big part of it. I will write about new features we bring into the site, how we have chosen to take different approaches, solutions to code problems, css issues, tips and tricks, references to other great sites and so on.
Please feel free to comment, it will only help us in creating a better site.

Bookmark us, we will stay and make a difference!

Share and Enjoy:

Be the first to comment

Tagged as: blog, guest blogger, Niklas Waller, wohill

Blog

Wohill is looking for guest bloggers

Page moves every time on reload

The blog software architecture

New blogger on Wohill

Search Wohill

Design Entries

Development Entries

Recent Comments

Categories

Archives

Blog

Wohill is looking for guest bloggers

Create related blog entries using tags

How to create a tag cloud in PHP

The benefit of tags

Page moves every time on reload

The blog software architecture

New blogger on Wohill

Search Wohill

Design Entries

Development Entries

Recent Comments

Categories

Tag Cloud

Archives