KnowTeBook - Webworkers Daily Milk » technology http://www.knowtebook.com A community blog about design, ideas, trends, wordpress & more. Tue, 27 Jul 2010 08:46:19 +0000 http://wordpress.org/?v=9 en jParallax enables 3rd View Dimension of Pictures http://www.knowtebook.com/jparallax-enables-3rd-view-dimension-of-pictures-1369.htm http://www.knowtebook.com/jparallax-enables-3rd-view-dimension-of-pictures-1369.htm#comments Wed, 10 Sep 2008 09:53:01 +0000 Knowtebook http://www.knowtebook.com/?p=1369 jParallax enables you to make really awesome 3D feeling picture effects by turning a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way. Check out the demo.

diagram_parallax jParallax enables 3rd View Dimension of Pictures

The diagram abovet illustrates what Parallax does to the html:

<ul id=“parallax”>
<li></li>
<li></li>
</ul>
]]> http://www.knowtebook.com/jparallax-enables-3rd-view-dimension-of-pictures-1369.htm/feed Free Brilliant Website Chats and Why / How to use them http://www.knowtebook.com/free-brilliant-website-chats-and-why-how-to-use-them-1350.htm http://www.knowtebook.com/free-brilliant-website-chats-and-why-how-to-use-them-1350.htm#comments Mon, 08 Sep 2008 14:45:03 +0000 Knowtebook http://www.knowtebook.com/?p=1350 A live-chat tool can be a easy and direct way for you visitors of your blog, personal webpage or e-sales site to contact you. Imagine to get your clients request within seconds immediately to your instant messenger or your mobile phone. Learn how to use the most innovative solutions in your web project to gain the success you deserve.

meebo-5 Free Brilliant Website Chats and Why / How to use them

Reasons to use live-chats

  • Get notified of visitors on your website - interact with them
  • Get messages everywhere you have internet or mobile access
  • Answer requests immediately
  • Aggregate new clients right at interest phase
  • Provide live support - even on the road or in vacation
  • No need for changing between different instant messenger or computers.
  • Short: Add value to your website or blog

How to use them - example plugoo

In most cases you have got to sign up first. Using plugoo for example is really easy. Just edit the settings as you like and when you are done copy the piece of code to insert the widget into your website. You can use it in wordpress or in any other blog as you like. The code will load the flash widget as the visitor starts to enter your site. Thats about it! The reason for using plugoo was because we were sick of having some more browser windows open and wanted to have a more professional solution to get messages of clients everywhere we go by using ICQ. This way our status goes automatically to absent when we are at lunch for example. And if we are on vacation and somebody needs to contact, we get the messages on our mobile phone (if it is turned on ;).

plugoo-2 Free Brilliant Website Chats and Why / How to use them

Demo

An example for using plugoo is shown on the sidebar of mediaplana. See the code below:


<div id="sidebar">

<div class="box-livechat">

<object type="application/x-shockwave-flash" id="plugoo" data= "http://www.plugoo.com/plug.swf?go=YOUR-ID" width="348" height="190"> <param name="movie" value= "http://www.plugoo.com/plug.swf?go=YOUR-ID" /> <param name="allowScriptAccess" value="always" /> <param name="wmode" value="transparent" /> </object>

</div> <!--/box-livechat -->

</div> <!--/sidebar -->

(Free) Chat Systems and Services

Plugoo

A free live chat tool we are using with wordpress at our web design company. Messages go directly to our instant messengers and blackberries. If you are offline, you will get them later per mail.

plugoo-logo Free Brilliant Website Chats and Why / How to use them

plugoo1 Free Brilliant Website Chats and Why / How to use them

Geesee

Free. Just add one single line of code and start. Plugins for all majors blogging software available.

geesee-logo Free Brilliant Website Chats and Why / How to use them

geesee-1 Free Brilliant Website Chats and Why / How to use them

Toksta

Chat via text chat or webcam in real time - without having to switch to programs like Skype, MSN or ICQ!

toksta-logo Free Brilliant Website Chats and Why / How to use them

toksta-1 Free Brilliant Website Chats and Why / How to use them

Meebo

A free widget like chat for your website. You can see visitors to your site, let them know when you are available to chat, and include an optional status message. There is also a iPhone and firefox extension. If even works on computers when IM access is restricted.

meebome_logo2 Free Brilliant Website Chats and Why / How to use them

meebo-5 Free Brilliant Website Chats and Why / How to use them

Ajax IM

It uses AJAX to create a near real-time IM environment that can be used in conjunction with community, intranet, and social websites.

ajax-chat-script Free Brilliant Website Chats and Why / How to use them

Gabbly

You can chat on any website. Even if you do not own them by typing gabbly.com/cnn.com for example.

gabby-logo Free Brilliant Website Chats and Why / How to use them

gabby-2 Free Brilliant Website Chats and Why / How to use them

In the end

Live chat systems make your business richer by allowing (potential) customers to contact you anywhere you like. You can answer them directly or even start the conservation first.  Most people wait a while untill they write a mail. It might be too late then. Get in contact. Now.

If you want to stay ahead of the upcoming news, why do you not subscribe to Knowtebook?

]]> http://www.knowtebook.com/free-brilliant-website-chats-and-why-how-to-use-them-1350.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 Hack Feedburner Subscriptions http://www.knowtebook.com/how-to-hack-feedburner-subscriptions-1254.htm http://www.knowtebook.com/how-to-hack-feedburner-subscriptions-1254.htm#comments Sat, 09 Aug 2008 11:21:13 +0000 Knowtebook http://www.knowtebook.com/?p=1254 We are glad to have all the submitted links and sites during the past couple days, because we could enlarge our horizon as well (thanks to all of the submitters!) and found a post by Stefan Vervoort. Unbelivable and possible! Boris Veldhuijzen van Zanten has manipulated Feedburner in 2 minutes and had over 2.500 new subscriptions over night by just changing the code of your website and using netvibes.

So advertisers must start to overthink the influence of feedburner subscriptions when measuring websites for advertisement.

While the hack still works, Joop Dorresteijn is happy to tell you that Google and Netvibes are working on a solution to the problem. Steve Olechowski, co-founder Feedburner mailed him and said: “These things happen occasionally and are usually fixed in a couple of days”, he added that the feedburner counts do not influence advertisement measurement. Franck Mahon from Netvibes said: “We are working on a fix to filter out in the reporting the duplicates while still allowing people to add several instances of the widget to their startpage.” When things get fixed, it would be interesting to see the differences on some sites.

]]> http://www.knowtebook.com/how-to-hack-feedburner-subscriptions-1254.htm/feed 41 Lightbox Scripts Compared http://www.knowtebook.com/41-lightbox-scripts-compared-1182.htm http://www.knowtebook.com/41-lightbox-scripts-compared-1182.htm#comments Wed, 30 Jul 2008 09:02:42 +0000 Knowtebook http://www.knowtebook.com/?p=1182 lightbox 41 Lightbox Scripts Compared The Lightbox Clones Matrix tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes.

Lightbox tools are very common and most of them are easy to use. The problem seems to be to find the right tool which suit your needs for the web project! There a dozen of solutions out there. To make life easier a guy who named himself Ozh compared most of them.

lightbox_clones_matrix 41 Lightbox Scripts Compared

Criteria

  • Its javascript size (not considering CSS, images or anything else)
  • The library needed, if any, mentionning its javascript size. I opted to compare uncompressed javascript file sizes, as it (sorts of) reflects the complexity and/or power of the library, regardless of how packed/minified/obfuscated it usually ships.
  • The total javascript size. This data won’t interest someone already using a javascript library on their site, obviously.
  • Image support
  • The ability to group images into a single collection, allowing for easily browsing through images within the same overlay
  • Any other common object supported: inline content (ie content already existing in the page, but typically hidden), iframe, content fetched by an Ajax call, video, Flash.

There’s a handy filter set to make your selection easier. All the options are logical “OR”, ie selecting several features will list scripts with at least one of them. Note that you can shrink the filter box if you don’t need it.

lightbox_clones_filter 41 Lightbox Scripts Compared

]]> http://www.knowtebook.com/41-lightbox-scripts-compared-1182.htm/feed Convert your Image To Vector Online For Free http://www.knowtebook.com/convert-your-image-to-vector-online-for-free-1156.htm http://www.knowtebook.com/convert-your-image-to-vector-online-for-free-1156.htm#comments Thu, 24 Jul 2008 08:05:30 +0000 Knowtebook http://www.knowtebook.com/?p=1156 If you would like to convert any image to vector, there is an easy way to do that without using any software like Photoshop or Illustrator. Vector Magic allows you to convert images to vector directly from their website.

vector-magic-1 Convert your Image To Vector Online For Free

Just upload any image from your computer. It is very easy to use, just follow the instruction and you will have your vector image. Then select the output vector (EPS) or in Bitmap (PNG) to download. They have are different prize-plans, but if you register new you will get 2 tries for free.

]]> http://www.knowtebook.com/convert-your-image-to-vector-online-for-free-1156.htm/feed Fast Thumbnail Viewer Plugin for Wordpress http://www.knowtebook.com/fast-thumbnail-viewer-plugin-for-wordpress-1126.htm http://www.knowtebook.com/fast-thumbnail-viewer-plugin-for-wordpress-1126.htm#comments Sat, 19 Jul 2008 17:30:26 +0000 Knowtebook http://www.knowtebook.com/?p=1126 Thumbnail Viewer plugin for WordPress is simply used to overlay images on a page, similar to Lightbox JS. The javascript is from the Image Thumbnail Viewer code from DynamicDrive. The javascript included in Thumbnail Viewer from DynamicDrive is much faster than Lightbox JS, although not as feature packed, which is the entire point.

thumbnail-viewer Fast Thumbnail Viewer Plugin for Wordpress

]]> http://www.knowtebook.com/fast-thumbnail-viewer-plugin-for-wordpress-1126.htm/feed Safer Wordpress - A Plugin To Clean Your Header http://www.knowtebook.com/safer-wordpress-a-plugin-to-clean-your-header-1079.htm http://www.knowtebook.com/safer-wordpress-a-plugin-to-clean-your-header-1079.htm#comments Mon, 30 Jun 2008 09:51:56 +0000 Knowtebook http://www.knowtebook.com/?p=1079 remove-generator Safer Wordpress - A Plugin To Clean Your HeaderSpammers and Hackers, both need to know which content-management-system you are using. Wordpress unfortunately makes it easy for them and publishes its name and version in the header of your website. You can help Hackers and make it easier for them, or you use the plugin by Angsuman Chakraborty.

It requires zero configuration. It does one thing and does it well - remove the useless WordPress version information header from your WordPress blog.

]]> http://www.knowtebook.com/safer-wordpress-a-plugin-to-clean-your-header-1079.htm/feed CSS Freedom - Redesign HTML Form Elements As You Like http://www.knowtebook.com/css-freedom-redesign-html-form-elements-as-you-like-1076.htm http://www.knowtebook.com/css-freedom-redesign-html-form-elements-as-you-like-1076.htm#comments Sat, 28 Jun 2008 13:20:52 +0000 Knowtebook http://www.knowtebook.com/?p=1076 Ryan Fait presents a method to customize the booring html form elements with css and a little javascript to that you have always dreamed of. It will allow you to use custom images for checkboxes, radio buttons and select lists.

custom-form-elements CSS Freedom - Redesign HTML Form Elements As You Like

The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. Check out the demo.

The technology is pretty similar to that was used on our mediaplana contact site called niceforms (demo here) by badboy. An example is shown below.
custom-form-elements-mediaplana CSS Freedom - Redesign HTML Form Elements As You Like

If you have a good example for awesome looking forms, please let us know and post it as a comment.

]]> http://www.knowtebook.com/css-freedom-redesign-html-form-elements-as-you-like-1076.htm/feed CSS: 7 Free Perfect Multi-column Liquid Layouts http://www.knowtebook.com/css-7-free-perfect-multi-column-liquid-layouts-1074.htm http://www.knowtebook.com/css-7-free-perfect-multi-column-liquid-layouts-1074.htm#comments Thu, 26 Jun 2008 13:51:07 +0000 Knowtebook http://www.knowtebook.com/?p=1074 This series of website layouts use percentage widths and relative positioning, and they work with all the common web browsers including Safari on the iPhone and iPod touch. They’re also ’stackable’ so you can use multiple column types on the one page. This makes the number of possible layouts endless! Follow the links below for the demos and more detailed info:

The main features

  • No CSS hacks
  • iPhone & iPod Touch compatible
  • SEO friendly
  • Full length column background colours
  • No Images
  • No JavaScript
  • Resizable text compatible
  • Stackable columns
  • FREE for anyone to use

Examples

perfect-stacked-columns CSS: 7 Free Perfect Multi-column Liquid Layouts perfect-blog-style CSS: 7 Free Perfect Multi-column Liquid Layouts perfect-double-page CSS: 7 Free Perfect Multi-column Liquid Layouts

There are also other interesting solutions like the german intensivstation provide. It includes a box modell which is horizontally and vertically centered for example.

layout_11 CSS: 7 Free Perfect Multi-column Liquid Layouts

]]> http://www.knowtebook.com/css-7-free-perfect-multi-column-liquid-layouts-1074.htm/feed