KnowTeBook - Webworkers Daily Milk » tutorials http://www.knowtebook.com A community blog about design, ideas, trends, wordpress & more. Sat, 06 Mar 2010 19:01:19 +0000 http://wordpress.org/?v=9 en 160+ Brilliant Web Design Templates & Tutorials http://www.knowtebook.com/160-brilliant-web-design-templates-tutorials-1676.htm http://www.knowtebook.com/160-brilliant-web-design-templates-tutorials-1676.htm#comments Sat, 25 Jul 2009 14:57:08 +0000 Knowtebook http://www.knowtebook.com/?p=1676 Designing websites is a creative process and it isn’t easy at all to get started if your don’t have the right ideas, inspiration and tools available, says tripwire. There are several different ways you can approach the design process and depending on what type of design task you’re facing some have pros and some have cons.

colorful-layout 160+ Brilliant Web Design Templates & Tutorials

This article by tripwire covers end to end by presenting you with more than 160 high quality Tutorial that guides you step by step in building up a web interface all the way from scratch. trans 160+ Brilliant Web Design Templates & TutorialsThe article will take some time to download because of the many images!

]]> http://www.knowtebook.com/160-brilliant-web-design-templates-tutorials-1676.htm/feed How To Visualize Your Contact Connections in Facebook http://www.knowtebook.com/how-to-visualize-your-contact-connections-in-facebook-1651.htm http://www.knowtebook.com/how-to-visualize-your-contact-connections-in-facebook-1651.htm#comments Fri, 17 Apr 2009 13:21:36 +0000 Knowtebook http://www.knowtebook.com/?p=1651 TouchGraph lets you see how your friends are connected, and who has the most photos together. The tool provides a visualization to let you discover relationships between people, organizations and ideas. Use it for Facebook, Google or Amazon for example. It provides really value but also is very dangerous as well, as i think. If you want to discuss it with other KnowTeBook Fans, just go on.


facebook-graph How To Visualize Your Contact Connections in Facebook

]]> http://www.knowtebook.com/how-to-visualize-your-contact-connections-in-facebook-1651.htm/feed Use A Body ID To Style Your Website In CSS http://www.knowtebook.com/use-a-body-id-to-style-your-website-in-css-2-1337.htm http://www.knowtebook.com/use-a-body-id-to-style-your-website-in-css-2-1337.htm#comments Thu, 28 Aug 2008 12:16:50 +0000 Knowtebook http://www.knowtebook.com/?p=1337 Trevor Davis wrote a convincing article why using ID’s in the body tag makes sense. I often use it to keep different page layouts sorted and inserted an id manually. Now he shows an interesting way using PHP and/or Wordpress. Check out the demo.

css
Creative Commons License photo credit: Raphael Goetter

Reasons to use id’s in Body

  • Maybe your design has different colors depending upon which section you are in. Instead of having to touch the markup, you can just modify the CSS depending upon the id on the body.
  • You can control the current states for your navigation.
  • Maybe the markup on your homepage is a little different than subpages, so instead of creating a different template, just stick in an if statement.

Example

Body


<body id="<?=$bodyId; ?>">

Function


<?php

function exampleSetBodyId() {

$path = $_SERVER['REQUEST_URI'];
if(!isset($bodyId)) {

if(eregi('^/play/set-a-body-id/about/',$path) == 1) {

$bodyId = 'about';

} else if(eregi('^/play/set-a-body-id/blog/',$path) == 1) {

$bodyId = 'blog';

} else if(eregi('^/play/set-a-body-id/contact/',$path) == 1) {

$bodyId = 'contact';

} else if(eregi('^/play/set-a-body-id/work/',$path) == 1) {

$bodyId = 'work';

} else if(eregi('^/play/set-a-body-id/play/',$path) == 1) {

$bodyId = 'play';

} else if ($path == '/play/set-a-body-id/') {

$bodyId = 'home';

} else {

$bodyId = 'general';

}

}
return $bodyId;

}

$bodyId = exampleSetBodyId();

?>
]]> http://www.knowtebook.com/use-a-body-id-to-style-your-website-in-css-2-1337.htm/feed How to Create Raining Clouds in Photoshop http://www.knowtebook.com/how-to-create-raining-clouds-in-photoshop-1319.htm http://www.knowtebook.com/how-to-create-raining-clouds-in-photoshop-1319.htm#comments Sat, 23 Aug 2008 08:52:34 +0000 Knowtebook http://www.knowtebook.com/?p=1319 Adam Woodhouse shows you in 7 steps how to create raining clouds in Adobe Photoshop.

tutorial-raininglclouds How to Create Raining Clouds in Photoshop

]]> http://www.knowtebook.com/how-to-create-raining-clouds-in-photoshop-1319.htm/feed 8 Heatmap Tools and Why / How to use them http://www.knowtebook.com/8-heatmap-tools-and-why-how-to-use-them-1274.htm http://www.knowtebook.com/8-heatmap-tools-and-why-how-to-use-them-1274.htm#comments Mon, 18 Aug 2008 15:17:57 +0000 Knowtebook http://www.knowtebook.com/?p=1274 Heatmaps visualize the stream of visitors on your website - showing hot and cold click zones. They provide an overall view of the activity and helps you to see every mouse movement and every click. It will improve web usability, conversions and revenue. In this post you will learn where you can find free services or tools, how and why you should use them.
heatmap 8 Heatmap Tools and Why / How to use them

Updates (+1):

  • 2nd september 2008: added phpmyVisites

Reasons to use heatmaps

  • See, where people don’t click and why. It helps to…
  • Optimize landing pages
  • Optimize link & advert placement
  • Minimize shopping cart abandonment
  • Maximize conversions of online forms
  • Predict how visitors will use your site in the future.
  • Simplify web usability testing
  • Short: Find problems and fix them to boost your web project!

How to understand and use heatmaps

As an example we will take a look at PatioSigns.com. A heatmap overlay on the right shows the pattern of user behavior for the sample page on left. If you don’t know what all these different colors mean, don’t worry, we will explain it below.

screenshot-psnormal 8 Heatmap Tools and Why / How to use them screenshot-psheatmap 8 Heatmap Tools and Why / How to use them

Colors

As you can guess by naming in heatmap, the colors show the density of userclicks. Cooler colors such as blue and green get less clicks. Warmer colors get the most clicks.

popularity_key 8 Heatmap Tools and Why / How to use them

The color key references the amount of participants whose eyes fixated on certain parts of the page. The red/orange/yellow areas are where the larger amount of the groupd looked most. The dark blue areas are where they looked least (Source: Poynter Online).

The red/orange color indivates that almost all subjects halted their gaze at that part of the page for at least a fraction of a second.

The yellow color indicates that more than half of all subjects haltered their gaze the part of the page for at least a fraction of a second.

Sometimes there is more used as colors to visualize the userstream. Crosses are used to represent a mouse click. A horizontal dotted line can represent where the page breaks on the computer screen. A red horizontal line can indicate how far down users scrolled before leaving the page.

Get on it and analyse

This isn’t as boring as it sounds. It is the most important and interesting part of analysis as I think, because it makes me breath faster if I see why people miss to click or do not see things I want them to see. I found a good walk through and what you keep in mind as you analyse.

Heatmap Tools and Services

Clickheat

A really good open-source tool which you can install on your server. No fees, full control!

Clickheat Heatmaps

Crazy Egg

A easy to use interface with nice effects like the confetti effect, a special kind of visualisation. There is a free plan, but you probably need to upgrade if you have more than 5.000 visits per month.

crazyegg_logo1 8 Heatmap Tools and Why / How to use them

FuseStats

Free, simple, and effective way to manage and anaylize your website statistics. It inlcudes a easy-to-use HeatMapping technology that can be used on every page of your site.

fusestats-logo 8 Heatmap Tools and Why / How to use them

Clickdensity

Real-time visitor tracking with different price plans (free for a small website).

clickdensity-logo 8 Heatmap Tools and Why / How to use them

heatmap 8 Heatmap Tools and Why / How to use them

phpmyVisites

A free and powerful open source (GNU/GPL) software for websites statistics and audience measurements including heatmaps.

phpmyvisites 8 Heatmap Tools and Why / How to use them

Feng-GUI

Awesome online tool. Just upload a picture  of a website up to 5MB and it will create a heatmap based on data collected on other websites.

feng-gui_logo 8 Heatmap Tools and Why / How to use them

Demo:

feng-gui-heatmap-300x200 8 Heatmap Tools and Why / How to use them

Wordpress Heatmap Plugin

Provides you with three new template tags for displaying a heat map in Wordpress (V. 2.3 or newer). It is similar to colored cloud tags.

wp-heatmap-plugin-300x300 8 Heatmap Tools and Why / How to use them

Conversionstats

A professional conversion tracking tool that enables you to get heatmaps as well. Prices start at $29.

conversionstats-logo 8 Heatmap Tools and Why / How to use them

Corunet. El blog

This is more for geeks. If you want to know how to make your own heatmap service, follow davids article. You can download the final code at the end of the tutorial.

At the end

I hope to have helped you to understand heatmaps and that your can improve your site or revenue. If you want to stay updated about more posts of this kind, why not subscribing to Knowtebook and get all information right in time?

]]> http://www.knowtebook.com/8-heatmap-tools-and-why-how-to-use-them-1274.htm/feed Reduce Spam to almost Zero by simple Blocking http://www.knowtebook.com/reduce-spam-to-almost-zero-by-simple-blocking-1105.htm http://www.knowtebook.com/reduce-spam-to-almost-zero-by-simple-blocking-1105.htm#comments Sun, 20 Jul 2008 20:41:41 +0000 Knowtebook http://www.knowtebook.com/?p=1105 Spambots and badly behaving bots seem to be all the rage this year. While it will be very hard to block all of them, you can do a lot to keep most of the comment spammers away from your blog and scrapers from harvesting your site.

Spambots also have to identify as user agents on servers, so that people gathered their “names” in the long run. There are a bunch more, but blocking to many may cause the server to slow down. Here we go. Just follow this simple steps to reduce your spam attacks!

Image by debruehe

Image by debruehe

How to Block SpamBots

  1. Create a .htaccess file in your root directory on your server if you don’t have one already.
  2. Insert the following code
# BLACKLISTED USER AGENTS
SetEnvIfNoCase User-Agent "" keep_out
SetEnvIfNoCase User-Agent "larbin" keep_out
SetEnvIfNoCase User-Agent "heritrix" keep_out
SetEnvIfNoCase User-Agent "ia_archiver" keep_out
SetEnvIfNoCase User-Agent "Jakarta Commons" keep_out
SetEnvIfNoCase User-Agent "Y!OASIS/TEST"    keep_out
SetEnvIfNoCase User-Agent "libwww-perl"     keep_out
SetEnvIfNoCase User-Agent "MOT-MPx220"      keep_out
SetEnvIfNoCase User-Agent "MJ12bot"         keep_out
SetEnvIfNoCase User-Agent "Nutch"           keep_out
SetEnvIfNoCase User-Agent "cr4nk"           keep_out

<Limit GET POST PUT>
order allow,deny
allow from all
deny from env=keep_out
</Limit>

Thats it! Save and upload it to your (apache) server. What do we have done? Every single line stands for blocking a spam bot (like “larbin”), so you maybe noticed the very first line with no spambot in it. ""? That’s right. An empty user agent. If someone can’t be arsed to set a user-agent, why should you serve him anything? Some servers can not handle the empty “”. So if you encounter problems, delete the hole line

SetEnvIfNoCase User-Agent "" keep_out

The last 5 lines just tell the server to block those agents.

Please keep us updated of your experiences or if you have different spambots!

]]> http://www.knowtebook.com/reduce-spam-to-almost-zero-by-simple-blocking-1105.htm/feed Create a realistic Credit Card in Photoshop http://www.knowtebook.com/create-a-realistic-credit-card-in-photoshop-992.htm http://www.knowtebook.com/create-a-realistic-credit-card-in-photoshop-992.htm#comments Mon, 19 May 2008 18:54:52 +0000 Knowtebook http://www.knowtebook.com/?p=992 Alexandra Fomicheva has made a nice tutorial for us!
credit_card_medium Create a realistic Credit Card in Photoshop

]]> http://www.knowtebook.com/create-a-realistic-credit-card-in-photoshop-992.htm/feed Tutorial: The Importance of SEO for Designers http://www.knowtebook.com/tutorial-the-importance-of-seo-for-designers-962.htm http://www.knowtebook.com/tutorial-the-importance-of-seo-for-designers-962.htm#comments Fri, 09 May 2008 10:13:58 +0000 Knowtebook http://www.knowtebook.com/?p=962 how-search-engines-work Tutorial: The Importance of SEO for DesignersAccording to a poll Nick La conducted, just over 1 out of 10 people don’t think SEO (Search Engine Optimization) is mandatory as a designer; and what really surprised him was about 24% don’t even know what SEO is! If you’re among the quarter of people who don’t know what SEO is or understand how it can help you, you should really read this article. This is an SEO guide for designers who want to learn about making it easier for websites or blogs to be found by search engines. He will explain the common mistakes made by designers and developers.

]]> http://www.knowtebook.com/tutorial-the-importance-of-seo-for-designers-962.htm/feed Tutorial To Make Diagonal Lines in CSS http://www.knowtebook.com/tutorial-to-make-diagonal-lines-in-css-960.htm http://www.knowtebook.com/tutorial-to-make-diagonal-lines-in-css-960.htm#comments Thu, 08 May 2008 10:00:49 +0000 Knowtebook http://www.knowtebook.com/?p=960 Using css styling to substitute for an image, is an effective way for developing sites efficiently. Which not only saves time and bandwidth, but also allows more flexibility when adjusting designs.

diagonal-lines-in-css Tutorial To Make Diagonal Lines in CSS

By using a border technique, we can create the effect of diagonal lines with some simple code.

]]> http://www.knowtebook.com/tutorial-to-make-diagonal-lines-in-css-960.htm/feed Tutorial: How to make Professionell Glossy Web 2.0 Graphics http://www.knowtebook.com/tutorial-how-to-make-professionell-glossy-web-20-graphics-943.htm http://www.knowtebook.com/tutorial-how-to-make-professionell-glossy-web-20-graphics-943.htm#comments Mon, 28 Apr 2008 12:46:54 +0000 Knowtebook http://www.knowtebook.com/?p=943 This tutorial will show you how to make a professional web button and also to use it like a navigation bar.

123 Tutorial: How to make Professionell Glossy Web 2.0 Graphics

]]> http://www.knowtebook.com/tutorial-how-to-make-professionell-glossy-web-20-graphics-943.htm/feed