A French startup, Eenox, has developed a platform to help create dynamic HTML5 websites without writing a single line of code. If you are familiar with Wix, a Flash website builder with drag-and-drop features, it basically works the same.

Eenox is an application that you can use right in your browser. Designing an application/website is easy. It is literally a drag-and-drop, draw and place, kind of application.

Among the many features it has, one thing that took me by surprise is how easy it is to use even for a non-technical person. The interface is like storytelling, directing its users what to click, what it’s for, and how to properly do it. You rarely see something like this from applications, but games do it all the time.

Below I masterfully tested the application, adding an image and sample text, and a Twitter stream. I have set the resolution for tablet.

Every web page created automatically generates a QR code for them. And unlike testing the website to see if it works, which usually entails setting up your localhost (if you work on your local machine), every element is as you see it. No more setting up, just drag, drop and add your content.

Several months ago, the talk was about creating a responsive website which can automatically adjust itself based on the screen of the user. Eenox has successfully employed this with every website or application that is made using their platform. Here’s proof of that. Try resizing your browser, and you will see the image and text adapt to your browser’s size.

Changing the background color, or the color of any element for that matter, only requires moving some slides through a gradient.  You can even download the website you made, and then host it on your web server.

There is a free version that you can use to test the application. A paid version starts at $99 for every 2 months up to $280/mo.

Features of Free Version

• Maximum of 3 web pages to download
• Maximum of 3 images per page
• Limited to 1 web page
• Hosting

The free version is pretty limited, hopefully someday the features for the free version will increase. Truthfully, I haven’t had enough of a chance to test it because of the limitations, but I can say that I like how easy it is to use.

Benefits of using the paid version:

• Unlimited downloads
• 25 to 120 web pages
• Unlimited image number per page
• Hosting
• Other Advanced Features
• Statistics
• SEO
• Can publish app on the App Store or Android Market

See image below for the full pricing details:

Image was shamelessly taken from their website.

Actually you lose 7% (maybe even more!) of sales without even noticing… Sounds bad, huh?

I mean, you work carefully to put things in the right place, good call-to-actions, nice design, spend a few bucks with ads.. And then you lose 7% of sales just because you forgot to minify your CSS. We’ll, this is not going to happen again.

We’ll put every future project that you work on a diet. And this one, won’t wait for next monday, or next january :)

Here we’ll see amazing tips to reduce your files size and increase your site performance without affecting important things like image quality or a files readability for future edits.

Grab your meter and let’s rock!

Every Second Counts

Before the practical stuff, I would like to share with you a few numbers about page loading X users satisfaction.

I saw this infographic several months ago, but it’s still amazing. Click on it to see all the data, here’s what I liked most:

• If you hit 4 seconds of page loading you have 25% abandonment increase
• About 80% of users expect mobile pages to take almost the same amount of time as the desktop version

Credits: Kissmetrics

Image Optimizing – File formats & Tools

So, the best way to optimize images starts with using the right file format. Basically we have 3 common formats for web (no, I won’t talk about .bmp, .svg, .tiff or anything else):

• JPEG – Really good for photos and bigger images
• GIF – Good for icons and images with fewer colors
• PNG – Good for small images with a lot of colors or when alpha channel is needed

This is really just the basics, there is a lot of particularities for each image type that we won’t be talking about (right now). But you should be good with this, when you are exporting a psd to code a layout you should use .jpg for photos or bigger backgrounds, use .gif for smaller elements or elements with a restricted color palette (like simple icons or replacements for common inputs) and png where you can’t lose any data or small colorful images.

I know many people say that png are bad and too big, but actually if you know how to use them they can give you a better effect (exactly what you designed) AND smaller or similar file size as gif or jpg.

Let’s see some tips for each image type:

JPG Minimizing

JPG does “lossy compression”. That means that its algorithm stores data using much less disk space but will also save less info about your original file. Once compressed it’s impossible to decompress .jpg files. Your best choice in this case is to always keep the original file safe and just save copies.

Ideal quality for jpg is pretty tricky, but most times you’ll be good with 60-80.

When you take photos your camera stores metadata about the photo that you may not use in future. Also image size is often bigger than your entire screen. So get rid of useless data and reduce your image to what you really need.

Irfranview is a small tool that can do this for you even as batch conversion for lots of files.

Recently I heard about an amazing tool, called JPEGmini. They have an amazing compression algorithm that works pretty much like our eyes do, so it makes what gets our attention higher quality and what doesn’t, lower. You should give it a try!

GIF Minimizing

GIF files have a really small color table, ranging between 2 and 256. 256 may sound a good figure, but when you realize that jpg has up to 16 million colors, 256 isn’t that good, huh?

What you can do to cut files size is to reduce their color palette. Above is an example where reducing a file from 128 to 64 colors we saved almost 30% of file size.

PNG Minimizing

PNG compression is similar to gif compression. You reduce the color palette and gain a few kbytes. In above example, png-24  instead of png-8, would be a huge file since it’s completely lossless, so you would have a perfect image, but pretty big.

The best part of png-24 is full alpha channel, but we can handle that. Image Alpha gives us full alpha channel over PNG-8, so we have much smaller files but pretty good-looking for overlays and advanced effects.

Code Compressors – HTML, CSS, JS

Actually I’m not too much a code-compresser type. But images aren’t the only thing we should care about in our websites, HTML, CSS, JS files should be compressed too since they can eat precious bytes from your diet.

Let’s take a look at a few options:

minify – PHP solution

HTML Compressor

YUI compressor

HTML Minifier

Server caching

Another good way to improve site loading is server-side caching. If you don’t use cache your page needs to be processed by the server every time it’s accessed, even if you don’t change your site for ages.

So, here are the best WordPress Caching plugins:

WP Super Cache

W3 Total Cache

DB Cache Reloaded Fix

GZip, a.k.a. Compression Like a Boss

I’m pretty sure you’ve heard about zip files. Or maybe .rar files or .7z files. Well, GZip is an implementation of GNU Zip, which does pretty much the same thing as ZIP files, but gives you a really good compression rate.

The crazy idea here is to drastically reduce download time by sending users compressed files, instead of the uncompressed original ones, and their browser will handle the decompressing in much less time than if it had to download original files.

Your hard work here is to paste this code into you .htaccess file:

#Gzip
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
#End Gzip

Then you’re done! Well, hope it doesn’t take you more than 5 minutes :)

Don’t forget to read through, there’s a CONTEST waiting for you here. Winners will receive a  License key! We will be choosing 3 winners! Brought to you by Divine-Project.com.

Note: To begin with, you will be seeing a lot of product and service reviews from now on. I would just like to point out that we take this seriously and we review them absolutely for free when we deem the product to be very useful and innovative. If you are a developer or know someone who is, that has an awesome product/service then contact us!

Divine’s Elemente is a new program that is still under careful development and is definitely a one of a kind program that many designers have been dreaming of since WordPress became mainstream. Open Google and search “PSD to Theme” and you’ll end up seeing Divine-Project.com as the top result, followed by services like CodeMyConcept that you have to pay for.

Previously, the main go-to guy for designers are coders or services like CodeMyConcept. I have to admit that when I first heard about Elemente and what it does, I was skeptical. I mean, people once thought it would be quite impossible to use drag-and-drop software to create a website, right?

The first thing you need to have is the creativity to design, then you need to have Adobe Photoshop. Currently Elemente only supports Adobe Photoshop. When you already have your design in place, the only thing you need to do now is to convert it.

What I Like About Elemente

1. It’s cool design. Black and aqua (pardon my ignorance, I can’t specifically name the colors). This is more of a personal opinion. I’ve grown tired of software interfaces having only black and white. Elemente’s design is refreshing, and sometimes even soothing.

2. Spoon feeding. No coding required. Literally everything you might write in a CSS or PHP file is already in here. Including adjusting the size of the template, size of the content area, header, and sidebar.

3. Solid documentation and an active online community.

4. You can literally create a WordPress theme in less than 5 minutes if you already have the design.

I have no problems with Elemente, aside from the pricing which I cannot afford, but that is just me. It only works on Windows, but there are talks that they’re working on making it available for Mac. Pricing starts from $139 for a personal license and $199 for Theme Developers, having unlimited website accounts and a 90% commission on the Themes Marketplace.

Wait, they have a Themes Marketplace? Yes. You can actually make a living just creating themes and selling them in the marketplace. You can even sell your themes on other marketplaces like ThemeForest, although I believe you’ll have to do some customizing to be in line with their guidelines.

Elemente is not hard to learn, all of the things you need to know are laid out in front of you, all you have to do is read first before trying anything or risk the chance of getting lost.

How it works

Below I will briefly walk you through the software.

Important! System Requirements

• OS requirements: Windows XP, Windows Vista, Windows 7
• Photoshop requirements: CS, CS2, CS3, CS4 (32 bit), CS5 (32 bit)

On the screenshot below you will see that after clicking on “Create a Blog Layout”  I was welcomed by a built-in guide.

Step 1: Create a basic layout 

Choosing option 1 will lead to a default layout that is filled with elements you can find in most themes. There you can add and remove the elements that you won’t be needing. This part is pretty much full of clicking and tweaking, manipulating the layers. Do not be disheartened when you try it yourself, since you will only be looking at black and white text and cells. Remember that this part is where the skeleton of the theme is made.

Above you will see the main layout that you are free to edit. You can remove elements that you will not use on the theme. Sadly, I was confused at first so I will mention it now, that this is not the part where you move the elements around. Just leave them where they are.

Adjusting the Grid

This is where you adjust the size of the header, footer, post, sidebar, and content. I had fun playing with the sizes because it’s so easy!

Above the Grid blocks you will see “Create PSD”, this is what you’ll be clicking once you are satisfied with the adjustments you’ve made on both the grids and the elements of the design.

Adjusting the Elements

This part is where you adjust the elements shown on your layout. By checking and unchecking the items, you are adding and removing certain elements that you won’t be needing.

Step 2: Put graphics to groups

After laying out the skeleton of your theme, it is now time to place graphics. It’s pretty much a dress-up game where you apply the graphics to their designated places. Yes, that is all.

Above you will see how it works. The first image is the un-adjusted and the most basic layout which you can see on Step 1 under the name Billboard. The second image is the finished one, added with graphics. It’s just like tracing an image and making things fit.

Step 3: Adjust properties & publish

This is the part where you add the links, SEO stuff, ALT, CSS, meta information of your page, Google Analytics ID, change the background color if you fancy, margins, and a bunch of other stuff that can affect the entirety of your theme.

After publishing, your theme is now ready to go.

Free Themes created using Divine Elemente

2 muchwires

Download It Here

iPhone

Download It Here

But don’t take my word for it. Try it for yourself. Elemente has a 30–day trial that you can use instantly, just download and install. Don’t forget to tell your friends about it, I’m pretty sure many will find it very useful!

Contest

I know many of you have been waiting for this, and that many of that many actually just skipped through the whole thing above (I assure you, there’s a very vital piece of information in there that will make or break your chance to win a license key!).

How to join:

1. Register using our form below. Why? So that we’ll have an idea how many people will join and so that we can contact you for future design contests! Isn’t that cool?
2. Design your template using Adobe Photoshop
3. Download and install Elemente trial version
4. Run Elemente and convert your PSD to a working WordPress theme!
5. Submit your entry on or before February 18, 2012

• submit a zip file containing everything to rean [at] 1stwebdesigner dot com
• write your full name in the body of the email
• don’t forget to include your portfolio website (wow!)

Rules:

1. The design should be yours.
2. Only one entry per person.
3. Trolls will be banned from future contests.

How to Win:

After gathering enough submissions, we will be posting them here. The 3 submissions with the most votes will win a license key from Divine Project! So, how do you gather more votes? 1stwebdesigner.com receives hundreds of thousands of visitors a day, if you’re lucky, many people will see your design and vote for it. But it does not stop there, you can call on your friends to vote for you, provided they have Van Gogh’s eye for art!

Remember, this is the first contest of our explosive 2012!

What is Join.me?

Join.me is a screen sharing tool. Join.me easily allows users to share what’s being done on their screen with others. Screen sharing tactics help your listeners understand what you’re talking about by providing visual support to back up what’s being discussed. It’s a great tool for collaborating with staff or freelancers. Need to train a client on a new piece of software or show them progress on the website you’re developing for them? Done. Join.me is a quick and dirty tool that allows you to share your screen with anyone at any time. It’s definitely worthwhile to know about, especially for those situations where you didn’t take time to set up some of the more complex screen sharing software programs and you just need to quickly share your screen with someone. Hop on join.me within seconds.

How to Use join.me

The reason we are profiling join.me over its competitors is because of how easy it is to use. It takes literally less than a minute to start sharing your screen with someone. The first time I heard about join.me I was on a weekly conference call with my client. He was trying to explain something to me, but couldn’t quite put it into words. All of a sudden he blurted out, “join me”. I’m like, “I thought I already had… we’ve been discussing this for 20 minutes”. He said, “no, no go to join.me and enter this code”. I did. Seconds later I was looking at his screen. It was pretty incredible how quickly we synched up like that.

To start a meeting simply:

• Click the “Share” button (you will have to download the software upon the first use)
• Send the conference code that pops up to anyone you’d like to join you
• Your attendees simply input the conference code in the “Join” text box on Join.me
• Let the screen sharing begin!

It really is that easy. It takes seconds to get started.

Train Staff with Join.me

Many website owners outsource some aspect of their website development or upkeep to freelancers. Others work with staff who may not be in the same office. Join.Me is a great tool for website designers to use to explain projects and tasks that others need to complete for their website. For example, say you need a design element of your website updated, but your designer works remotely. You call her to try to explain what you want done to the website and where on the site it should be created, but it takes awhile for her to visualize exactly what you’re trying to tell her. Now think about that same example but along with you verbally explaining what you want accomplished, you can couple that with visually demonstrating to her what you want done and where it should go on the website. You can do this easily with join.me’s screen sharing technology.

Collaborate with Customers with join.me

Not only can join.me be a great tool to use internally, but it can also be a great way to collaborate with customers. Obviously getting face time with your customers is critical, but for a lot of us, customers aren’t always located nearby. Therefore tools like join.me can come in very handy when you need to demonstrate something online to someone who’s not in the same physical location as you. Say you’re building a customer a website and she wants to know how things are progressing. You could just email her a link to the DEV site and let her navigate around. We all know how that usually turns out… 13,353 questions come back about why “this link isn’t working” or “how come you used red here instead of blue”, etc. Instead, why not invite her to join you on join.me and show her around the site yourself?

By using join.me with customers you can answer many of their questions and concerns before they even ask them because they can get both a visual and verbal explanation of what you did and why you did it. For me, using join.me with customers is a no brainer. It doesn’t take any extra time, and in fact probably saves time in the long-run. It also creates a more valuable experience for the customer, which only benefits your relationship with that customer in the long-run.

Benefits of Using join.me

As you have probably gathered from the information above, there are a lot of great benefits to using a free screen sharing tool like join.me. Here are a few more:

• It’s quick and easy to use
• Multiple people can view your screen at once
• Setup is simple
• There is no setup for viewers
• You can access a conference call number that you can send folks who are not in front of a computer
• It’s FREE
• It’s great for training and collaborating with employees, freelancers, and customers
• It provides people with a visual description to match the verbal information they are receiving

Using join.me

Will you use join.me? Have you used screen sharing tools in the past? Which ones have you liked? Which ones will you stay away from? There are a lot of great screen sharing tools out there, but not many of them are as easy to use as join.me. It really is an easy process for both the demonstrator and the viewer. Join.me can provide website owners and website developers with a lot of benefits when it comes to training and collaborating. Leave your comments below to let us know which screen sharing tools you’ve used and if you will try join.me. For those of you who have used join.me, please let us know what your experience has been with it.

Here we’ll see 5 amazing and simple tips that you can use right now and greatly improve your user management and you can use all this additional data to serve your loyal readers better and provide more focused content.

We’ll cover custom user fields to history functionality, and while we’re at it you’ll learn a lot about WordPress user management functions.

So, let’s rock!

What will we see?

We’ll focus on user specific data, so what we’ll see is:

1. How to add extra registration fields
2. How to add and remove profile fields
3. Export the user data
4. Bulk export users data
5. Create a web history of the user

1. How to add extra registration fields

Sometimes we want to know our users better. Where they live, if they want to receive our newsletter, or just store their IP. Well, to get this working the easiest way is to use one of these:

PieRegister

It allows you to customize the user registration screen. Pretty useful and easy to change.

What I like most is its simplicity. If you want to just get started, this one is your best choice.

s2Member

On the other side, you may use a plugin like s2member which gives you full control over user’s capabilities and data. But it requires a little more setup and will change a lot of things in your wp-admin. So you can edit each posts visibility for free or premium users.

Maybe it’s too much if you just want to add more user registration fields, but it gives you much better control over user data and content.

2. How to add and remove profile fields

Truth be told, the default user profile fields are more markup than anything useful. But WordPress has an easy way to edit them.

Let’s say instead of Yahoo IM, you want to add a Twitter field. Or just remove it. Well, this can be done with the filter ‘user_contactmethods’, which can be added as plugin or in your theme’s functions.php file. Do it this way:

<!--?php--><?php
	function wd_edit_fields( $contactmethods ) {
		//new fields
		$contactmethods['twitter'] = 'Twitter';
		$contactmethods['tumblr'] = 'Tumblr';
		$contactmethods['skype'] = 'Skype';

		unset($contactmethods['aim']);
		unset($contactmethods['jabber']);
		unset($contactmethods['yim']);

		return $contactmethods;
	}
	add_filter('user_contactmethods','wd_edit_fields',10,1);
?>

3. Export the user data

Now we have saved user data, but it can’t be seen. What we’ll need is a function to export this when we want (in a custom page, for instance).

Our function will get user data directly from the wp_usermeta table, and remove unnecessary data (used just by WordPress, but keep them if you want to export all user data).

This function will do the trick:

<!--?php--><?php
	function get_all_user_meta( $id ) {
		$to_remove = array("first_name", "last_name", "nickname", "rich_editing", "comment_shortcuts", "admin_color", "show_admin_bar_front", "wp_capabilities", "wp_user_level", "wp_dashboard_quick_press_last_post_id", "wp_user-settings", "wp_user-settings-time", "closedpostboxes_post", "metaboxhidden_post"); //all default and undesired fields
		$remove = "";
		if (! empty($to_remove) && is_array($to_remove) ) {
			foreach ($to_remove as $item) {
				$remove .= "AND  meta_key != '$item' ";
			}
		}
		global $wpdb;
		$qry = "SELECT meta_key, meta_value FROM wp_usermeta WHERE user_id = $id $remove";
		$myrows = $wpdb->get_results( $qry );

		return $myrows;
	}

	$data = get_all_user_meta( 1 );
	foreach( $data as $field ) {
		if( ! empty ($field->meta_value) )
			echo "<strong>".$field->meta_key."</strong>: ".$field->meta_value."<br />";
	}
?>

4. Bulk export user data

Now if you want to move from WordPress to another CMS you may need to hire a programmer just to figure out how to export all user data. Ok, we’ll save you from this crazy work and give you a function to see all users with all their custom data!

What we have to do is get the previous function and run it for every user_id inside the WordPress wp_users table. Then you can import this content or format it according to your new CMS standards.

<!--?php--><?php
	function get_all_user_meta( $id ) {
		$to_remove = array("first_name", "last_name", "nickname", "rich_editing", "comment_shortcuts", "admin_color", "show_admin_bar_front", "wp_capabilities", "wp_user_level", "wp_dashboard_quick_press_last_post_id", "wp_user-settings", "wp_user-settings-time", "closedpostboxes_post", "metaboxhidden_post"); //all default and undesired fields
		$remove = "";
		if (! empty($to_remove) && is_array($to_remove) ) {
			foreach ($to_remove as $item) {
				$remove .= "AND  meta_key != '$item' ";
			}
		}
		global $wpdb;
		$qry = "SELECT meta_key, meta_value FROM wp_usermeta WHERE user_id = $id $remove";
		$myrows = $wpdb->get_results( $qry );

		return $myrows;
	}

	function get_all_user_ids() {
		global $wpdb;
		$qry = "SELECT ID FROM wp_users";
		$myrows = $wpdb->get_results( $qry );

		return $myrows;
	}

	$users = get_all_user_ids();

	foreach( $users as $user ) {
		$data = get_all_user_meta( $user->ID );
		echo "<h2>User #".$user->ID." data</h2>";
		foreach( $data as $field ) {
			if( ! empty ($field->meta_value) )
				echo "<strong>".$field->meta_key."</strong>: ".$field->meta_value."<br />";
		}
	}
?>

5. Create a web history of the user

Sometimes user behavior is completely nonlinear. I know, you publish your posts with a carefully thought out order, but people just click everywhere and sometimes they stop thinking “which one was the cool post I was reading 5 minutes ago?”.

Same thing may happen if you run an e-commerce store over WordPress. Users navigate through products and sometimes the very first one was the best for them.

So for these times, I would recommend you build a user history.

First you should define how many items you want to store, and this will depend on your site’s size. We’ll do this with the last 30 visited pages (easily changed).

Then, you’ll need to add this snippet to your functions.php or plugin file, then you just call show_history and you’ll be fine :)

<?php
add_filter('wp_head', 'wd_history');
function wd_history() {
	$current_user = wp_get_current_user();

	// logged in?
	if ( ! empty ($current_user->ID) ) {
		$i = get_user_meta($current_user->ID, "wd_i", true);
		$i++;

		//update fields
		update_user_meta($current_user->ID, "wd_i", $i);
		update_user_meta($current_user->ID, "wd_page_".$i, "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]");
		//delete older
		delete_user_meta( $current_user->ID, "wd_page_".($i-30) );
	}
}

function show_history() {
	$current_user = wp_get_current_user();

	// logged in?
	if ( ! empty ($current_user->ID) ) {
		$i = get_user_meta($current_user->ID, "wd_i", true);

		echo "<ul>";
		$end = $i - 30;
		while( $i > $end ) {
			$url = get_user_meta($current_user->ID, "wd_page_".$i, true);
			$pid = url_to_postid( $url );
			if ( ! empty ($pid) ) {
				$page = get_post($pid);
				$title = $page->post_title;
			} else {
				$title = "Home";
			}

			echo "<li><a href='$url'>$title</a></li>";

			$i--;
		}
		echo "</ul>";
	}
}
show_history();
?>

Other experiments

Did you know that it’s possible to create shopping cart functionality with user meta data? Well, we haven’t covered this because the article would get too big, but we will cover this soon :)

Now it’s your turn!

What do you think? Is there another user management function that you want to share with us? Just comment! :)

What Is Screenr?

Screenr is a new screencast recording tool. Screenr allows you to record screencasts and publish them to a unique web page on Screenr. Website owners can take advantage of this new free tool for creating things like product demos, explaining features of their website, comparing other websites to their own, etc. What’s nice about Screenr is that it’s completely web-based, so there’s nothing to install. It runs on both Macs and PCs. It’s free to use and the video/audio quality is quite good.

How to Record Videos Using Screenr

Interested in testing Screenr out? Nice! It’s extremely simple to use. Here are the steps that you need to follow to use Screenr effectively:

• Navigate to Screenr.com
• Click the record button
• Position the recording frame on the area of your screen that you want to record
• Choose your microphone – You may want to use a headset for top audio quality
• Click Record

Everything you say and do is now being recorded. You can pause your recording at any time. Simply click ‘Done’ when your recording is complete. You can then use the text box to add a message to your Screenr screen cast. That message will then appear under your screencast, which is served up on its own unique web page.

It’s that simple!

Benefits of Recording Screenr Screencasts for Your Website

Screenr is a great tool for making your website more interactive. Instead of simply explaining a new product, service, news article, website feature, etc. with copy, you can now easily do it with video and audio. Screencasts are much more engaging than reading words on a web page. Here are a few of the many benefits you’ll receive if you start using Screenr to record screencasts for your website.

• Easily explain new or complex features of your website with audio and video
• Quickly create screencasts for your website – Screenr recordings literally take a few minutes from start to finish to create.
• Use Screenr to capture feedback from your website visitors. Record a screencast and ask the viewers to leave comments with their opinion on any topic you’d like.
• Ability to share it on Social Media channels like Facebook and Twitter
• Upload to your YouTube Channel
• Easily embed your screencast into your website
• It’s FREE

Other Screencast Software

As we mentioned above, there are a lot of other screencast software programs out there for you to take advantage of. Perhaps you’ve even used some of them. Before completely ignoring these other screencast applications for Screenr, let’s examine some of them so that you can make an educated decision on which screencast software makes the most sense for you and your website.

Paid

1. iShowU HD - iShowU HD is a relatively cost-effective screencast program for Mac users only. The base package is $29.95, with the Pro version running $59.95. Once nice feature that iShowU HD provides is the ability to integrate webcam footage into your screencast.
2. Camtasia - Camtasia is another great screencast option. Camtasia is a bit more expensive than iShowU HD, but it does work for both Mac and PC users. The Mac version will only cost you $99, while the PC version is $299. You might be thinking that $299 is much more expensive than FREE, and it is. With that said, Camtasia is known throughout the industry as one of the best, if not the best, screencast software out there. One really cool new feature is Camtasia works with Windows Speech Recognition to automatically turn your audio into captions! You then have the ability to fix anything missed in the transcription.

Free

1. Webinaria - Webinaria is Windows-only open source screencasting software. It allows users to record screencasts as an .avi files and turn them into .FLV files. You can then go in and add audio to your file. Webinaria allows users to add in webcam footage and leave captions for their viewers.
2. Jing - Jing offers both a free version and paid version. Jing runs on both Macs and PCs and allows users to create quality screencasts. The paid version allows you to upload directly to YouTube, which the free version does not. With that said, using the free version still provides users with a quality screencast to share with their audience. Jing also allows users to capture screenshots in addition to screencasts.

Here’s a more extensive list of free screencasting tools.

Tools for layouts

Templatr

If you don’t know HTML or CSS and want a website, Templatr can create a layout for you in a matter of seconds. There are lots of possible layouts you can choose from, upload images and other graphic elements and many, many other things. You can easily select every element on the page and customize it by choosing different options from a dropdown list, which makes modifying the page easier and quite fast. The layouts you make can be downloaded and installed using an application. Another good part is the support for several languages.

CSS Template Generator

CSS Template Generator is not as complex as templatr, but offers some nice features too. As you can see in the screenshot below, it generates a basic CSS stylesheet for an HTML page and gives you the CSS code for it, which you will need to copy/paste in your stylesheet. Obviously, you also get the code for the HTML page. A downside of this generator is the lack of a download option. The only way you can use the layouts created here is copying the code yourself.

YAML

What I like about YAML is the amount of options you have. Besides being able to select the basic information needed to create a layout, you can also go a bit more in-depth if you have enough knowledge of coding. The columns and the layout have properties, you have presets, you can play with the flexible grids, choose coding options and many others. This generator might actually be the best out of these three.

Others: Firdamatic, CSS Portal, CSS Creator, Layout Generators, CSS Layout Generator.

Tools for the grid system

Variable Grid System

Variable Grid System might be one of the best grid system tools you can find on the internet. It allows you to quickly generate a CSS stylesheet for your website and is based on the 960gs, which we will review a bit further down the road. You can customize the width of the main container, the width of the content, the column width, the number of columns and the gutter and you can preview the layout before downloading it – this actually happens automatically when you modify a value.

Gridinator

Gridinator allows the user to customize the layout more than the previous tool. You have the option of modifying colors, font size, choose pixels or em and even select popular layouts from a list on the right hand side. This tool allows you to preview the grid system before downloading the fully functional template.

960gs

960gs is not a grid generator, but you can learn a lot about grid systems from it. There are some templates you can download and you can also see some examples of websites that are built on their default stylesheets. You can find some interesting JavaScripts there – adaptive.css is incredible and beats any other similar JavaScript any day of the week – and watch how the grid works on different webpages.

Others: Blueprint Grid CSS Generator, CSS Grid Calculator, Grid Designer.

Tools for colors

Now that we have a layout and a grid system, we can start thinking about colors and color schemes. Here are some great tools you should look at.

Kuler

My personal favorite is Kuler, a tool developed and maintained by Adobe. You can find lots and lots of color schemes here you can use for your web pages and even inspiration if you need it. There are more than 11.000 color schemes available (all free of charge) and you even have the option to customize them. If you create an account there you can also start submitting your color schemes of choice and inspire others to use them on their websites. Another incredible tool by Adobe…

Color Scheme Designer

Although quite different than the first example, Color Scheme Designer is another great tool which allows you to create schemes on a total other level. You can choose a color, then one of the options above – mono, complement, triad, tetrad, analogic or accented analogic – and let the tool do its job. It is a tool you may find very useful for when you need colors for your design. And if that wasn’t already enough, you can also create color schemes for the color blind. Each scheme you create gets an ID which you can save. Later you can return to your scheme again and continue customizing it.

CSS Gradient Generator

If you don’t want to open Photoshop to create a gradient, CSS Gradient Generator will be great for you. It allows you to do the same thing Photoshop does, only it works with CSS and way faster. You can save your gradients using an unique link.

Others: Color Palette Generator, CSS Color Codes, Gradient Image Maker.

Tools for menus and buttons

CSS Menu Maker

CSS Menu Maker allows you to create your own customized CSS menus and generates them for you in a simple, HTML/CSS format, so you can download and use them right away. The tool has a fairly big gallery of menus – vertical, horizontal and dropdown – and allows you to customize them in detail. Moreover, you can also download plugins for Adobe Dreamweaver and create your own menus on your own computer. The menus are cross-compatible and will look the same in all the browsers (except maybe transitions for Internet Explorer).

This is the only CSS menu tool that really stands out, some other ones you can take a look at are CSS Menu Generator, My CSS Menu, Tabs Generator and List-O-Matic.

Button Maker Online

Button Maker Online from Dynamic Drive allows you to create and customize your own buttons, then download and use them in your designs. You can pretty much customize everything from colors, borders, size and even has some transparency options. You can preview the buttons before using them.

CSS Button

This one is very similar to the first, only you create the menus in another way: by choosing your style from several dropdown lists. It’s pretty much the same it only depends which one you are more comfortable working with.

Tools for fonts

Font Tester

Font Tester is an incredible tool which lets you preview different fonts, so that you won’t have to insert them into your CSS file and customize them there. Just customize the fonts on this web page and when you find the perfect one, get the code and use it! There are so many options I don’t even know where to begin. There’s line height, text decoration, text transform, font weight, word spacing, font stretch, white space, unicode bidi and many, many others. Just go an give it a try, you will fall in love with it.

Typester

Typester is pretty much for the same purpose as Font Tester, only it might be more popular and you can preview more fonts there – even the Google fonts. There are not so many options for customizing, but what you have should be enough to give you a preview of the typeface you wish to integrate in your design.

Others: CSS Font Style, CSS Font and Text Style Wizard, CSS Type Set.

Other tools

CSS Generator

If you wish to generate a default CSS style fast, then CSS Generator is for you. It’s similar to the tools for grid systems, only this one doesn’t really keep a grid system (you will have to code it afterwards). You can, however, generate a stylesheet with link colors, font size, margins, hover color and so on – and spare some valuable time later on during the coding.

Quick CSS

Quick CSS does the same thing, only you have even more customization possibilities, so take a look at this too. The generated CSS seems to always be validated by W3C and the process is quite fast as well, so you will be able to enjoy a half an hour of TV later instead of coding the defaults of the stylesheet.

Now I am not updated on CSS sprites tools, because I don’t use them, but some reviews recommend Spritegen Sprite Generator, CSS Sprites and CSS Sprites Generator.

If you design e-mail newsletters and need to generate tables in CSS, then this tool will do the job.

That was a list of CSS tools and generators I wanted to raise awareness about. Do you have some others you would like to recommend?

1. CloudCanvas

CloudCanvas mostly targets the vector drawing based lovers. Every stroke of yours in CloudCanvas will become more like an object instead of just a pixel. This feature enables designers to scale their objects and give them the desired shape. It helps to expand the end-user’s level of thinking. CloudCanvas gives you the chance to animate your drawing and add effects to them. One can import ClipArt and other graphics to improve the end results. All-in-all CloudCanvas is one web-based application that will not leave you disappointed.

2. Flame

Flame is for true artists. It is an experimental project of Peter Blaskovic who was born in 1975. His application, Flame, is one web-based application that can be used by designers to create wonderful results. Flame gives you the room to do whatever you want with a design and expand its horizons. It’s backed by a very easy to use GUI which makes your life a lot more easier. Dive into the world of Flame and be amazed by its capabilities. Let us know what you did with Flame.

3. Viscosity

I haven’t seen a tool like Viscosity before. This tool lets you start with a simple set of colors which can later on be distorted to create effects that are simply jaw dropping. The end result generated by this tool is worth admiring.  If you are a believer of abstract art then Viscosity is just the best tool for you to use. Viscosity gives the end user the opportunity to move each pixel on the screen in order to fine tune the end result and also to give new meaning to a design.

4. PhotoCopa

PhotoCopa is one application that will help you extract color information from any image super quick. The tool gives you the option to upload your own image or use Flickr to opt for the image that you need to analyze. PhotoCopa have their own online community of Color Lovers where one can showcase their choice of pallettes for display and appreciation. Remember, we also want to see your experiment so if you have anything interesting then the comment section below is all yours.

5. Odosketch

Odosketch happens to be one of the cutest of all the applications that we are going through in this list. Odosketch focuses more on sketching images and replaying your art work. The amount of choices provided by Odosketch and the number of examples that are shared by other users are enough to inspire you to come up with something of your own. If it is unique and inspirational then you can publish that on Odosketch and let others admire your hard work. Browse the best sketches from the masters and draw some of your own. Do let us know what you sketched!

6. FotoFlexer

FotoFlexer is one of the advanced web-based applications that expands the horizons of an end-user. This online digital photo editor comes loaded with advanced effects that were previously available only if you bought costly software. FotoFlexer runs on flash so you might be disappointed if you do not have flash on your machine. One can upload an image of any size in FotoFlexer and start editing it. FotoFlexer is designed to add multiple layers of an image with grace. The advanced features of FotoFlexer are all available for free which exponentially increases the value of this tool.

7. Picture2Life

Picture2Life is another online photo editing tool that provides multiple features to keep you intrigued. Picture2Life smartly promotes some of the basic features that are part of this tool like creating collages, animating the uploaded photographs and performing basic edits. This tool is free and that makes it worth at least a shot. One has the opportunity to add various effects to their images like Fading Edges and various other effects to bring their images to life. Try the tool and let us know how effective it was in your quest for the ultimate photo editing tool.

8. LunaPic

LunaPic is one of the very few HTML based image editing tools. Henceforth, don’t be surprised if you find the tool serving only a few very basic purposes. LunaPic will not be able to distinguish various layers in your image which is quite sad. It has a 4 MB restriction and the only reason it’s really on this list is because it can be run without flash, which is not the case with most of the web-based image editing tools that I am aware of. LunaPic can be used for some of its unique effects like the Fire effect and reflective water effect. Have fun using LunaPic.

9. Pixenate

Pixenate is another old school HTML based photo editor that comes loaded with basic photo editing features. As Pixenate uses basic HTML so any browser will run Pixenate without any issues. You will not require flash to run Pixenate! This is one tool that can be used for quick photo editing and printing of the results. The maximum size of an image that can be uploaded to Pixenate is 10 MB which can be restrictive at times. Also, as expected, Pixenate does not support layers.

Now, let us get a bit off track and discuss web-based tools that aren’t really for web designers but very important for us all, as music is the best medicine. 

10. Indaba Music Mantis

Indaba Music Mantis is one community of music producers which gives you the platform that can be used to smoothly remix some very famous artists and their best work. Mantis is actually the tool that does all this and is provided (and maintained) by Indaba. One can cut and edit sample sound files. Mantis provides the options to apply various sound effects to these cut files and comes up with astonishing results. Make them your cellphone’s ringtone if you like your work.

11. Skale Tracker

Skale (not “Scale”) is one music based web application that will keep your engrossed for a long time. In this tool music is created by things called as trackers. The tracker is programmed to read data from input tables and then output music as per that data. Skale Tracker is one of the very few online trackers that will keep you busy. I had to close my browser window quickly because I did not want to get addicted. See if you are able do the same.

12. YouTube Editor

How do you expect me to make a list of creative web-based applications and not include a YouTube video editing tool. It is customary just because of the popularity that YouTube has achieved. The online YouTube Editor can be used to add YouTube videos and add various soundtracks to your videos. YouTube editor comes loaded with plenty of transitions that can be used in your own videos. The app is pretty easy to use as most of the features in YouTube Editor are drag and drop.

Conclusion

I agree that we have already covered many of the web based applications but as you can see, this list contained some of the applications that we had missed out before. Some of these applications might be old while few are new and very exciting. Share your experiences with these apps and let us know if you have any other tools that we can cover.

What is Paper.li?

Paper.li is a fairly new automated tool that allows users to create their own online newspaper. It’s a great way to provide relevant online content about the same topic as your website. Paper.li newspapers provide valuable information to your online community about a specific topic. Over time creating a daily newspaper that goes out to your online community will help drive more readers to your website. Website owners can use Paper.li to drive more traffic to their website.

How Does Paper.li Work?

Paper.li allows users to create their own online newspaper through links shared on Facebook and Twitter. Once set up Paper.li automatically collects links from within Facebook or Twitter, organizes them into an easy-to-read newspaper format, complete with imagery, headlines, and article descriptions. Subscribers receive their online newspaper each day filled with top stories around the same content topic as your website. It’s a great way for you to automatically aggregate online content relevant to your website topic and push it out to your online community.

On a daily basis a new paper.li newspaper is created around your topic. If you’re on Twitter, you can configure the system to tweet your Paper.li newspaper automatically. You can also promote your newspaper manually by promoting the URL on your social networks. For full integration we recommend that you embed your online daily newspaper into your website.

Benefits of Using Paper.li

Paper.li offers many benefits to website owners interested in finding new Content Marketing ideas to help build brand awareness and increase website traffic. Below are a few of the benefits to using Paper.li:

• Paper.li is an automated Content Marketing tool. Set it and forget it if need be. We recommend you actively promote it each day as well OR embed it into your website for increased exposure.
• FREE to use! You can create up to 10 online newspapers with the free account.
• Provides a valuable educational resource to your online community. Helps them learn more about the topic of your website. Positions you as a thought leader around your topic.
• Allows for cross promotional opportunities with the other authors who are featured within your Paper.li newspaper. When you tweet it, you include the Twitter names of those who are featured. Many of whom will retweet your newspaper to their online community, thus bringing more new eyeballs to your Paper.li newspaper.

Create a Paper.li Newspaper for Your Website

Paper.li newspapers are easy to create and the benefits are numerous, so we definitely recommend that you consider creating a Paper.li newspaper around the same topic as your website. If you’d like to move forward in creating a Paper.li newspaper for your website follow the steps below to get started.

1. Navigate to Paper.li and sign in with either your Twitter or Facebook account
2. Click ‘Start your paper’
3. Select the option to “create a paper based on a specific topic or list of people”
4. Create a Title for your Paper.li newspaper
5. Add up to 10 content streams from which to pull article links from. Add as many as you’d like (up to 10). You can organize them in the order of importance. If you choose a Single Twitter User and a Twitter Keyword, you can rank them in order of importance of where Paper.li should pull articles from first, second, third, etc. The options include:
   • Single Twitter User
   • Your Twitter Stream and the people you follow
   • Twitter List
   • Twitter #Hashtag
   • Keywords on Twitter
   • Keywords on Facebook
   • RSS Feed
   • Single Google+ User
   • Keywords on Google+
6. Select a language for your Paper.li newspaper
7. Select the ‘Covered Topics’. Covered Topics are the ‘Sections’ that you’d like to appear in your Paper.li newspaper.
8. Click ‘Publish’. Your Paper.li newspaper will be updated every 24 hours.

It’s that easy! You now have an automated content marketing tool to use every day for educating your online community on your website topic and for driving traffic back to your website. Before we let you go, let’s go through each of the different content options that you can use to construct your Paper.li newspaper. We will discuss why you might want to use each different content option.

How to Get Noticed

Getting your Paper.li newspaper noticed by relevant readers is the key to attracting subscribers. It’s important that you use all available marketing channels to help you promote your Paper.li newspaper. Here are a few creative ways to get your newspaper in front of the right people:

• Set up an automatic feed to Twitter
• Post your Paper.li newspaper on Facebook
• Post your newspaper on Google+
• Embed your Paper.li newspaper on your blog or website
• Leave comments on each of the sites from which you pull content from and add a link back to your Paper.li newspaper
• Reach out to the author of each article in your newspaper to let him/her know you used their article in your newspaper. Hopefully they will help you promote your newspaper by sending it out to their online community.
• Add a link to your Paper.li newspaper to your email newsletter
• If you are a business and have a physical location, put a flier or window cling in your store with a link (or QR code) to your Paper.li newspaper
• Add the URL of your newspaper to your business card
• Add the URL of your newspaper to your email signature
• Promote your Paper.li newspaper on LinkedIn

Obviously you might not have time to do all of these things every day, but find a combination that works well for you and your audience and stick to it as best as possible. The more you promote your Paper.li newspaper the more subscribers you will attract.

Crafting the Perfect Paper.li

At first glance it might appear that crafting a Paper.li newspaper is a fairly standard process whereby you don’t have to put much thought into it. Unfortunately too many Paper.li editors go this route. The Paper.li editors who are successful are the ones who take some extra time to craft the perfect Paper.li newspaper. Here are a few tips for crafting a top-tier Paper.li newspaper.

• Customize your Paper.li newspaper as best as possible. A good way to do this is find experts on your topic and pull content directly from them as a ‘Single Twitter User’ or by adding a RSS feed from their blog.
• Organize your content streams with the ‘Single Twitter Users’ at the top and the more general content streams like ‘Twitter, Facebook, & Google+ Keywords’ near the bottom. This way your Paper.li newspaper will be filled with content from the experts you’ve chosen and any extra room will be filled with content from random publishers. This ensures your subscribers will get the best content each and every day.
• Add 10 content streams. Paper.li allows you use to use 10 content streams so you should take advantage of them.
• Use the Editor’s Note section to add a link to your website
• Include one or more hashtags in the Title of your Paper.li newspaper. Paper.li newspapers can be automatically published to Twitter, so having a highly searched hashtag in the title of your newspaper will attract more readers.

5 Top Paper.li Newspapers

Here are a few examples of some of the best Paper.li newspapers. Each of these newspapers have thousands of subscribers. Take a look at each of these to see what they do well. Be sure to incorporate some of the things that these Paper.li editors do with their newspaper into your Paper.li newspaper.

• The #socialmedia Daily
• The most-influential-in-tech Daily
• The public-relations Daily
• The @HP #Touchpad Daily
• The Don Tapscott Innovators Daily

Will You Create a Paper.li Newspaper for Your Website?

After reviewing this article, Paper.li, and all of the benefits it can provide to website owners, do you think it’s worth the time it takes (which is minimal) to create one for your website? We definitely think those who do move forward with creating a Paper.li newspaper will be happy they did.

Have you already created a Paper.li newspaper to help build brand awareness and increase website traffic? If so, how has it been working? Please share your comments below.

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use it and modify it.

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller demonstrates classified and color-code content is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to make contact with you.

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

12. Diapo

( Demo | Download )

Diapo is a free of charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion; and therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

22. rlightbox

( Demo | Download )

rlightbox is antoher jQuery UI media box that can put on view several kinds of content for instance images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin you can make a fluid thumbnail bar that pages through the images it contains.

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

29. Image Wall with jQuery

( Demo | Download )

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

30. Rotating Image Slider with jQuery

( Demo | Download )

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin you can create a beautiful full-screen slideshow.

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin we can create HTML5 Slideshow auto advance with a few lines of jQuery.

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

41. Slides

( Demo | Download )

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

42. Slidy

( Demo | Download )

jQuery Slidy is a plugin that generates a customizable transitions automatically.