It was minutes of relax-reading for me as I read my good friend's interview post by the Headup team: Ruhani Rabin, Malaysia's man-to-know online. It's a great interview and also interesting because from that point I've came to know about a new widget developed by Headup.



Headup is a blog widget that will automatically marks the topics you mention in your blog content with dotted underlined (which the color can be customized easily), and enriches them with dynamic content from popular sites like Twitter, Youtube, Flickr, etc. The complementary content from Headup overlay widget is displayed within tabs when your mouse over the underlined marks.

Headup Widget gives your audience immediate access to dynamic, contextual and social content complementing your own. It supports various CMS (Wordpress, Blogger, Joomla, Drupal and Typepad) and just quick embed Headup in your site's HTML.

Read More

In order to understand more about this widget, I registered to Headup for full settings configuration trough out a simple dashboard. For your information, this registration is optional . Here are few screenshots of my Headup dashboard settings:



In General Settings section, I set 5 maximum annotations per page and 0 maximum duplicate annotations. Those are just my preferences to avoid cluttered of annotation overlay in window widgets every time my readers hover their mouse on the blog post content.


You can add more than one Related Articles source URLs in this widget dashboard panel.

In most cases, the info Headup tab works alright. Click the image below to see it live:

It defines the relevant information from Wikipedia


But even you have set minimum numbers of annotations per page in your blog post, as this Headup marking runs automatically, you may have some irrelevant annotations or unnecessary marks over it.
Click the image below to see it live:

The word: 'Launch' in this post has been mismatched as LAUNCHcast definition.


Inaccuracy highlight are often happening in news Headup tabs content:

Click the image above to live check this.


In my opinion it will be great if we can select certain Headup tabs in overlay widget and also have control to the displayed info, news or other Headup tabs functionality either let it runs automatically.
You may want to see your own related blog post included in news tab beside having other general news resources. See this in live version by clicking the image below:


It is stated in Headup publisher guidelines, that this widget tends to perform best when implemented on sites focused on: Celebrities and Gossip, Family and Parenting, Films, Gaming, Sports, Music, News, Technology and Travel. I'm hoping to see more related Headup news in design topics actually. So what do you think about Headup widget? Let me know your experience with this semantic technology via comments :). I wonder if different CMS will gave significant impacts either in settings or content retrieval.

RECENT UPDATES:
I was interviewed by Mike Darnell on Headup Blog. Get to know more about me ;)


Related Post:

• A Fully Customized TweetMeme ReTweet Button for Your Blog Post
• Create your own Gmail theme
• Real-time replies notification using Twitter Web

Permalink Post & Comment

Everyone should have known what Favicon is and its significance. There are great numbers of online favicon generators and tutorials that explain how to create using various graphic tools or Photoshop. In a matter of branding and positioning, it is fairly important for websites to connect their readers with this small graphic called favicon.

Few weeks ago, I created a favicon for my web-portfolio project. The result wasn't that good because I got crisp edges when I barely resized it in as tiny as 16 x 16 pixels size.

While I kept trying, one of my good friend Vaughan Risher suggested me to try IconBuilder. Big thanks to Vaughan, because this Photoshop filter plugin has produced some very high quality favicon files and it is really worth to try.



Read More

The result is pretty amazing. Here's how:

First of all, you have to download the IconBuilder Photoshop filter plugin for Windows. If you are a Mac user you can download IconBuilder for Macintosh.

To install IconBuilder for Windows, copy the entire contents of the IconBuilder 2.0 folder into the Photoshop plug-ins folder. By default, the path to the plug-ins folder is:

C:\Program Files\Adobe\Photoshop ##\Plug-Ins (where ## is the version number you are using.)

Launch your logo design file that you wish to appear on your website as favicon. If your logo PSD file is consist of multilayered graphic, you have to merge the layers before you go to the next step.



Inside the zipped file, you'll also find Windows.psd. Open the file in Photoshop and you will see some kind of grid framework to start with. There are boxes displayed in 4 rows which represent 4 different sizes of icons framework in 48px, 32px, 24px and 16px. Each row consist of 3 icon template boxes. Deactivate the visibility of Sample Icon layer.



Copy the merged logo to the Windows.psd file and resize it to fit the first 16 pixels box. In order to have perfect quality of placement, you can zoom-in your work canvas in 1200% magnification and use guides if necessary.



Duplicate the well set logo layer twice and put them on the two other boxes as careful as when you did it for first one. Merge those three identical layers whenever you're done.


Click to see bigger image

Go to the menu Filter > Iconfactory > Icon Builder to display the Icon Builder panel. You will see similar icon grid framework as seen in Windows.psd file at the left side of the panel. Click on the first icon template box. You will see the first box (with your tiny logo on it) in Window.psd is highlighted at the right side panel of Icon Builder. Hit Control (Command) key and Build button at the same time. Your logo will be displayed at the left panel soon after and do the same for the rest of icon template boxes.


Click to see bigger image

Click Save As button to produce favicon.ico file and upload it.

Put the following HTML code in between your ‹head› tags:

<!-- Favicon --><link href='http://yoursite.com/images/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Reload your browser and see if you like your new favicon now ;)

See it in action!



Are you using Mac? No worries, you can read a tutorial: how to create a favicon with IconBuilder in Macintosh posted by Benedikte Vanderweeën.

Related Post:

• Grunge RSS Banners
• Standard Web Icons
• Resources of Free Icon Sets on Internet

Permalink Post & Comment