Chaos Laboratory

Came upon something interesting today…

Should I use tables for layout?

Dec 16th by miCRoSCoPiC^eaRthLinG

Continue Reading

Here’s a nice trick I learnt a couple of days back. I wanted to display my feed subscriber count in a way that would match my site’s theme. I was tired of the vanilla feed-count display provided by FeedBurner – probably because you can find it on almost every other site these days (and I wanted something unique). So I got down to designing one on my own and I’m going to show you how to do the same for your site.

I won’t go into any lengthy (step-by-step) discussion on creating the graphical background – that’s something that’ll be your call. But I’ll teach you the core idea – fetching the feed-count from FeedBurner’s server using their API and displaying it on your site.

The Graphical Part

First and foremost, you need to decide on what kind of a display you want – small or large, dark or light. For example, I chose to display mine on a black background with medium sized font (see my RSS box at the top of the page). Depending on your background, you’ll need to either create or find a suitable RSS icon. You can find some excellent tutorials on creating feed icons here, here and here. Alternatively, you can download a whole bunch of free icons from here.

As a starter fire up your favourite graphics editor (Adobe Fireworks for me). For simplicity’s sake we’ll follow the same approach as I did with my feed-count box. Draw a black rectangle with rounded corners. Place your feed icon in a suitable place. Then draw another smaller rounded rectangle inside the earlier one, but with a lighter stroke colour (say white). This will be the container where you display your feed-count. You can throw in some fancy glow / shadow effects as you like. We should get something that approximately resembles the following image.

The image shown above was created with Fireworks and is an editable layered PNG file. If you’re using Fireworks, you can very well download this one (Right Click on it > Save Image), use it as a starting point and add/edit/resize it according to your preferences.

The Coding Part

You need to ensure that your web-host offers cURL (as an extension of PHP). By default, 90% of the web-hosts do – so you shouldn’t have anything to worry about. Secondly, the FeedBurner Awareness API (for your feeds) should be turned on. If you have been using the Feed Count feature of FeedBurner – then it IS already turned on. If not, you can login into your FeedBurner account, select the Publicize tab for the appropriate feed and activate this service. Once you’ve made sure of these two factors, we can progress to the actual coding.

Here’s the code you’ve going to need.

// Get FeedBurner Subscription Count - using FeedBurner Awareness API
function get_feedburner_count( $uri, $display = 'true', $format = 'true' ) {

	// Construct URL
	$apiurl = "http://api.feedburner.com/awareness/1.0/GetFeedData?uri=" . $uri;

	// Initialize the Curl session
	$ch = curl_init();

	// Set curl to return the data instead of printing it to the browser.
	curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
	// Set the URL
	curl_setopt( $ch, CURLOPT_URL, $apiurl );
	// Execute the fetch
	$data = curl_exec( $ch );
	// Close the connection
	curl_close($ch);

	// Parse XML
	try {
		@$xml = new SimpleXMLElement($data);
		$fcount = $xml->feed->entry['circulation'];
	} catch ( Exception $ex ) {
		// echo 'Caught exception: ',  $ex->getMessage(), "\n";
		$fcount = "?????";
	}

	// Display or Return, Formatted or Unformatted
	if( $display ) {
		if( $format )
			echo number_format( $fcount, 0, '.', ',' );
		else
			echo $fcount;
	}
	else
		return $fcount;

}

If you’re wondering where you’re going to add this code without messing up your theme – almost all modern WordPress themes have this file named functions.php, which contains the functions essential for registering the sidebar, tweaking specific WordPress routines etc. You can add this code to that file and it’ll be made available for calling from anywhere inside your theme.

The function is called get_feedburner_count() and accepts three parameters – two of which are optional. Here’s an explanation of the parameters…

1. $uri – This is a mandatory parameter. If you don’t specify this one, the function won’t be able to fetch the feed count. The URI is the name you chose to represent your feed on FeedBurner. For example – my feed url is, http://feeds.feedburner.com/ChaosLaboratory. That makes my URI, ChaosLaboratory. This is what needs to be specified here.
2. $display – This is an optional parameter. It takes up the values true or false. I have modelled this function on the lines of the general WordPress template functions – which means that the function is able to either display the feed-count directly, OR return it to you for further processing. If you don’t specify any value here, it’ll default to displaying the feed-count.
3. $format – This too is an optional parameter and takes up either true or false. By default it is set to true. This tells the function to pass the feed-count through another formatting function, which adds a digit-grouping comma to it for every thousandth place. The formatting occurs on Line 31 of the code and you can modify that line to reflect any sort of formatting you want.

A typical call the function can look like,
get_feedburner_count( 'ChaosLaboratory' ); – this will print out the formatted feed-count directly

OR

$fcount = get_feedburner_count( 'ChaosLaboratory', false, false ); – this will fetch the raw (non-formatted) feed count and store it in a variable called $fcount. This doesn’t print the figure directly to the screen, but leaves it at your disposal for further processing

OR any variation thereof.

Now, we need to apply some styling to that background image we created so that the feed-count is aligned properly.

Note: I applied the styling on an anchor (link) tag, since I wanted to make the whole image clickable, so as to provide a way of subscribing to my feeds too. Here’s an example…

a#feedcount {
	display:block;
	width:120px;
	height:26px;
	margin:0;
	padding:5px 10px 5px 0;
	background:url(images/bg-feed.png) no-repeat transparent;
	color:#D6D6D6;
	font-size:2em;
	font-weight:bold;
	text-align:right;
	text-decoration:none;
}

Points to note here: On Line 1, I’ve declared display:block. This is necessary, since the a tag by default is an inline element – which means, it collapses to the exact width of the text contained in the anchor. This is not desirable here as we’re attaching the background image to the a tag, and we want it to adapt to the exact proportions of it (specified in Lines 3 & 4). I’ve aligned the feed-count text to the right (Line 11) and used a padding of 10px on the right (Line 6) so as to leave a comfortable gap from the right edge of the graphics.

The code-block above can be added to your template’s stylesheet file or in the header.php within style tags – depends on you. For me, I prefer to keep all the styling in one place, i.e. the stylesheet file.

Adding it to your template

Now that we’ve got all the code in the right place, it’s time to add it to the template. Open up the appropriate file (header or index) – where you want to display the feed-count and add the following lines…

	< ?php get_feedburner_count( "YOUR_FEED_URI" ); ?>

And that’s it! That should display your feed count with the custom graphical background and make the image clickable too, to act as a feed subscription button. The final effect should look like the following…

Any questions / clarifications, feel free to write back.

Jun 22nd by miCRoSCoPiC^eaRthLinG

Continue Reading

This comes in rapid succession of the last review of Web 2.0 Badges. No sooner had I posted it, I stumbled upon another free online Web 2.0 Badge Generator called freshbadge – and this one offers far more in the way of features. The basic idea is all the same – you pick your badge style, add in your text and adjust a couple of factors (text size, color etc.) and Voila ! Your badge is ready to download.

Here’s a brief comparison between the features offered by both of these services…

Badge Templates

Web 2.0 Badges has a much wider selection of predefined templates (different colours & shapes but of fixed sizes) – whereas with freshbadge, you get to start off with 4 basic shapes only. However, the latter gives you the opportunity to adjust the badge & petal widths, the border thickness as well as the gap between each petal.

Badge Boder / Body Colours

With Web 2.0 Badges, you’re pretty much stuck to the colour schemes offered by the site – but freshbadge lets you select both. If you’re one with a good colour concept, this one’s definitely for you.

Badge Text

Not much of a difference here in either. Both let you adjust the textual content, font size, angular inclination and colour, although the variety of fonts offered in freshbadge is a lot more.

Text Effects (Outline, Glow etc.)

This section is entirely missing in Web 2.0 Badges. freshbadge lets you stroke the text with a colour of choice and add a glow to it.

Badge Effects (Background patterns, Gloss, Shadow, Glare)

Once again freshbadge wins in this category hands down. None of these effects are possible with Web 2.0 Badges.

Peel Appeal

Here comes the final touch – the Peel Effect, which can really jazz things up, brought to you by none other than freshbadge. No score for Web 2.0 Badges.

That’s about it – I guess.

Conclusion

Both these services are good – Web 2.0 Badges being the winner in the time-saver category. If you’re in a real hurry, don’t think twice before heading over to them. freshbadge on the other hand, is for the control freaks (and graphics pros) and is a clear winner in the features category.

Got an opinion? Comments are always open for you.

Sep 05th by miCRoSCoPiC^eaRthLinG

Continue Reading

Nope ! You don’t need any expensive graphics editing tools. Nor do you require to perform painstaking and complicated procedures to generate those ultra-cool reflective Web 2.0 style badges. You can do all of that online under less than a minute and for free with Web 2.0 Badges.

The site offers a whole bunch of pre-created badge templates in the most common formats (rounded/serrated/flowery edges). All you need to do is take your pick, set the colour palette, specify the text and font and hit Apply. Your shiny new badge is ready for download. You can tweak around with several other factors like X, Y coordinates of the text (which is normally centered on the badge), size and colour of the font as well as the angular inclination of the text.

And in case you’re not satisfied with the results, there’s even a box.net drive linked to the site, from where you can freely download PSD (Photoshop) templates of every conceivable kind of badges.

Here’s a quick preview of their interface…

Once you’re at the site, you’ll notice a couple of links right at the top pointing to AjaxDaddy and SocialScan. Any web-developer will find AjaxDaddy a royal storehouse of rich, Ajax based effects that you can implement in your sites. As for SocialScan, it’s a link popularity checker for social media networks. These two sites are worth visiting.

Incidentally, Web 2.0 Badges distinctly reminds me of AjaxLoad, which is a similar free online service that generates those fancy loading icons usually associated with Ajax-based sites.

Sep 03rd by miCRoSCoPiC^eaRthLinG

Continue Reading

This tutorial was created for an opensource site named AntiLost that a couple of my friends and myself had tried to launch a while back. While the site never really took off (and has been torn down long since), some of the material that were hosted there still remains with me. I was going through them yesterday and discovered this one. It’ll come real handy to a lot of the aspiring digital artists out there. So here it is in honour of my good buddy Twitch aka Michael Land, who happens to be the original author. Twitch is an excellent graphics / web-designer and has one of the most brilliant colour matching brain I’ve ever seen.

We’ll be using the vector graphics tool named Fireworks from Macromedia (now a part of Adobe).

Step 1

Launch Fireworks and create a new document in it. Set the width and height of the Canvas at 75px each and set the resolution at 72px/inch. As for the Canvas colour, set it to Transparent as it’ll enable you to place the final image over any other artwork you like. It’ll also make it easier for you to work with the Doughnut Tool later on.

Step 2

Now, instead of using the standard Ellipse Tool to make the outline of a CD, we’ll use the Doughnut Tool , as the generated image contains an “empty” circle in the middle which allows for seeing objects placed behind it. With the Doughnut Tool selected, draw a simple doughnut shape on the canvas in the default Layer.

Once done, adjust the X, Y Coordinates of the shape to 5px each. Then set the dimensions (width & height) to 65px – so that you doughnut shape nicely fits inside the canvas leaving some marginal area around.

Name this layer, CD Base.

Step 3

We have our basic CD. You may want to adjust the inner radius (of the little circle) so that it ressembles a CD all the more since the spindle hole of the CD isn’t as big as that of the doughnut shape. To do so, click and drag the Diamond Dot on the inner ring till you get a shape that satisfies you.

Following the adjustment, the image should look like this…

Step 4

Now that it looks a bit more like a CD, we’re going to add some colours to it. Feel free to use whatever colours you like – but keep in mind that you’ve to pick two tones (light & dark) of the same colour. To keep to the Web 2.0 style, you should pick pastel shades. For your doughnut, change the colour to Solid > Gradient > Linear.

Make sure your gradient band is horizontal and not at an angle – or else, you won’t get the desired effect.

When you’re ready, we’ll go ahead and change the gradient start and end colours. Make the first or beginning tag the lighter one while choose the darker colour for the ending tag. For our purpose, I’m going to pick #94CAE4 and #2F8EBD respectively.

The recoloured CD image should now look like the following …

Step 5

Our CD is finally coming together. Although it may not seem like it, there are only a few steps remaining now. Next apply a Stroke. This doesn’t mean “stroke your screen”. By stroking, you add a solid line in the external regions of the figure so as to define the edges. So select your CD, choose a colour that is a triffle bit lighter than the darker shade of your gradient and apply a stroke of 1px thickness. If you’ve used the colour tones that I used, #388BB4 would be a good tone to use for the stroke.

You should end up with an image like this…

Step 6

This is the easiest step. Go to the Filters Panel and drop a Shadow (follow Shadow & Glow > Drop Shadow). Leave the settings as they are.

The end effect should be like this…

Step 7

This is the second hardest part of this tutorial, but if you’ve followed the guidelines so far you shouldn’t face any problems. Create a new Layer and name it CD Ring. Make sure it is placed above the last layer (CD Base). Selecting this layer, draw another doughnut shape smaller than the CD image but overlapping it. Be careful as to not cover the spindle hole. Give it a Solid Fill (I’ve used White – #FFFFFF here). If the shape inherits a Shadow by default, simply remove the effect from it.

Next, adjust the dimensions, coordinates and inner radius of the doughnut so that it fits around the spindle hole of the CD like a narrow ring. This may take some effort but eventually you’ll get it right. For me, setting the dimensions to 30px each and the coordinates to 23 x 23 and then trivially adjusting the inner radius worked like a charm. Finally, apply the same Stroke colour as before. Here’s the result…

Step 8

The hardest of all ! Making the reflection segments. When I say hardest, I don’t mean you require an expert to do so. However, you’ve got to be extra careful with this one as it can make or break the whole effect.

Start by creating a new Layer named Reflection. Place this in between CD Base and CD Ring i.e. above CD Base and below CD Ring. Copy your larger CD from the CD Base layer and paste the copy in the newly created layer. Remove the Drop Shadow effect from it and give it a Solid Fill with White. Remove the Stroke too.

Next set the transparency (opacity) of this shape to about 25%.

Here comes the fiddly part. On the doughnut shape, there’s a little Diamond Dot on the Outer Ring. Press and hold down the ALT key and drag the diamond a bit along the circumference to create a segment. If you’ve difficulty working with the dot, you can always Zoom In the image. A zoom of 300-400% should suffice. Now, from the end-point of the last segment, create another segment of a different (wider or narrower) circumference and do so till you’ve created 5 segments of varying circumferences.

The reason that you create 5 segments is that 2 of them in between will act as spaces (well, 6 segments & 3 spaces – if you count in the part between the last segment and the starting point).

Now switch to the Subselection Tool by pressing 1 or A on your keyboard. Select a segment which you consider a space (will show through to the bottom layer) and press Delete on your keyboard. You may get a warning – just go ahead and click OK.

Delete two more such spaces till you get your perfect CD Image with alternating reflection segments. If you did everything right, you have your Web 2.0 style CD Image.

Note: One final touch-up. I noticed that the shadow was getting cropped a bit at the right and bottom edges. Increasing the Canvas size to 77px by 77px keeping the Anchor on the Top-Left did the trick.

If you require the original Fireworks file containing all the layers, simply right-click and save the final CD image. Opening it in Fireworks will reveal all the layers.

Have fun

Aug 29th by miCRoSCoPiC^eaRthLinG

Continue Reading

Ever come across those neat graphics of directional arrows and wished you could have them on your site? They can be used for anything from grabbing attention to indicating download links.

Look no further. Here is a step-by-step tutorial that should get you on track, and enable you to create custom graphical arrows.

The tutorial is based on Inkscape, which is an open source vector graphics editor. But that doesn’t mean that the creation process is limited to Inkscape only. You should be able to follow this simple tutorial with other vector graphics editors too.

Step 1

Use the Rectangle Tool to draw a rectangle.

Step 2

Using the same tool, you will need to draw a square – a perfect square that is a little bit wider than the first rectangle.

Instead of fighting with the Rectangle Tool in order to get the perfect square, hold down the [Ctrl] button while drawing the square. The length and height will snap to the same size.

Step 3

Next task is to rotate the square through 45 degrees. With the Select Tool click on the square twice. The selection will change to rotation and skewing mode.

Hold down the [Ctrl] key and use the corner rotate icon to rotate the square in chunks of 15 degrees. Holding down the [Ctrl] keys lets you make snapped rotations. If you do not use the [Ctrl] key, the rotation is free form and through an arbitrary degree.

Step 4

Convert the rotated square to a path, by selecting Path > Object To Path.

Use the Edit Node Tool and select the rotated square shape. Then select the lower node and delete it.

This will give you a symmetric Triangle.

Step 5

Select both the shapes, and choose Align and Distribute Objects option. Next, Center Align them both over the Vertical Axis .

Select only the triangle and move it down over the rectangle.

Select both the shapes and perform a Union operation. This can be done by either pressing down [Ctrl] and [+] keys or through Path > Union. What you have now is a basic arrow shape.

You can apply several vector effects to this and customize it according to your needs. For example, give the arrow shape a fill color, and a darker outline color. Then copy the shape, place it below the first, move it a bit, and turn on the blur. This gives you a fancy shadow effect.

Here’s a short video showing you how to do that.

Or you can also go on to give it a nice glossy look.

This uses the same basic shape to give a solid fill color, and a copy to give the gradient of dark to light from top to bottom. Another copy of the same arrow, combined with a free form shape transformation gives that glossy look on the side.

Here is an example of how you can use the illustration for your website …

Let me know how useful this has been, and also if you would like to learn something else.

Happy vectoring!

Vyoma aka K. Mahesh Bhat dabbles in vector art as a hobby and runs his own arts and graphics design blog titled KalaaLog. This is his first appearance as a guest blogger at Chaos Laboratory.

Aug 27th by Vyoma

Continue Reading

Nowadays every second site you see employs some form or AJAX or the other – either wholly or in parts. With the old-school model of refreshing the whole page a visitor had always had a clear-cut indication that he/she is supposed to wait till the page-load is complete. That’s one respect AJAX seriously lacks in. In short there’s no way for the user to know if the application is actually performing some task in the background or simply stuck infinitely. Hence, with AJAX based sites, you’ve to manually implement some sort of visual indicator that tells the viewer to wait for a while till the processing gets completed.

For totally minimalistic interfaces like GMail, a simple “Loading…” message does the job. But if you’re one of those who want to provide some eye-candy action to your visitors to keep them amused, you need to implement one of those fancy animated loading indicators that’s become a common sight in many sites these days. Under such circumstances, you’ve two viable options:

1. Take up the tedious job of actually creating one using one of the standard graphics editing + animation package combo.
2. Rip it off some other site

If you’re artistically challenged like me, the first option is entirely out of question. The second one is the easier way out. However, it presents you with a potential problem – the colour palette (specially the background) might not match with yours, thus rendering it in form of an ugly block.

If you’re wondering as to what’s your “easy” way out here, no need to think too hard. Ajaxload.info is a brand new free service that does the same for you for free. Ajaxload itself it a AJAX based site with a simple interface that consists of a dropdown box with a pretty sizeable list of such animated indicators. Apart from that there are colour palette selection boxes through which you can specify the background & foreground colours of the indicator. Once you’re done with configuring, just hit Generate and your customised indicator appears in the Preview window, ready for download. There’s a touch of humour to the site in form of a “Beta” logo which makes mockery of the whole Web 2.0 Beta genre of web-apps. Here’s a screenshot…

Here are examples of the most downloaded indicators.

Try it out for yourself. It’s cool & it’s free…

Found via: New Earth Online

Feb 08th by miCRoSCoPiC^eaRthLinG

Continue Reading