Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 22 2012


Use Screenr to Record Screencasts for Your Website

Are you looking to make your website more engaging? Are you in need of a new way to explain some of your website features? What if you could use a free online tool to create engaging screencasts in as little as a few minutes? Screencast software has been around for years. There are some really great tools already out there. With that said, a new free screencast program has hit the streets and it’s looking to make things even easier for users. In this article we are going to explain what Screenr is, how to use it, the benefits you’ll receive, as well as, see how it stacks up against other free AND paid screencast software tools.

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
  • 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.


  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.


  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.

Pros and Cons to Using Screenr Over Competitors

Now that we have seen what other screencasting software is out there, let’s take some time to compare those competitors with Screenr. Below is a list of pros and cons to using Screenr over its competitors:

Pros for Screenr

  • Screenr is 100% FREE while other screencasting software can be expensive
  • Some screencasting software is free, but they limit the features that you have access to
  • Screenr works for both Mac and PC users
  • Screenr is EXTREMELY simple to use
  • Audio can be recorded during the screencasting session, instead of adding it in at a later point, as is the case with some other screencasting software
  • Screenr allows users to easily upload to YouTube, embed in your website, and share on social media
  • Screenr publishes all screencasts on their own unique web page, allowing users without a website a location to publish screencasts to

Cons for Screenr

  • Screenr doesn’t offer as many bells & whistles as some of the paid screencasting software
  • Screenr doesn’t allow you to integrate webcam footage into your screencasts
  • You do not have the ability to edit your screencasts once they are published

Will You Use Screenr to Record Screencasts?

After doing a little research, reviewing this article, and taking some time to think through what you’re looking to achieve for your website, do you think you’ll use Screenr over its competitors to create your next big screencast? Screenr seems like a great tool. Each time I have used Screenr it has worked perfectly. I’m sure other screencast software can work well for you, but for me, Screenr is my screencast tool of choice. How about you? Will you use Screenr? Leave your comments below.

“So that’s Screenr. Screencasts made easy!” –

June 21 2011


How to Design and Program a Facebook Landing Page

Advertisement in How to Design and Program a Facebook Landing Page
 in How to Design and Program a Facebook Landing Page  in How to Design and Program a Facebook Landing Page  in How to Design and Program a Facebook Landing Page

We all know that Facebook provides a great opportunity for organizations to connect with their target audience and interact with their clients. To do this more effectively, organizations are creating custom Facebook pages to differentiate themselves and represent their brands on Facebook.

Jgvisual1 in How to Design and Program a Facebook Landing Page

But how does one go about creating one? How exactly should one be designed and what are these iFrames that are used? If you’ve been looking for answers, take a look at this screencast. We’ll be going through an introduction to designing and programming a Facebook landing page using iFrames. Enjoy!

Please feel free to share your comments with us in the comment section below.


Sponsored post
Reposted byLegendaryy Legendaryy

October 12 2010


Tips, Tricks and Inspiration for Creating Great Screencasts

We are currently in the process of redeveloping our website, and with the new design will come a new screencast. As such I set out looking on the internet for some great screencasts.

What I discovered were a huge number of screencasts that were very poorly done, spent way too much time to get their point across, or didn’t even explain their product, site or service at all at all.

There are numerous things that can cause your screencast to be a letdown (which I will talk about later), but for now lets look at ten top-notch examples from around the web that did a great job with their screencasts.

10 Best examples from the web


The Dropbox screencast is really a poster child for quick, simple, effective screencasts. It uses eye-catching animations and a very clear voice to explain the service and give you numerous use cases. It makes the service really simple to understand, and it would certainly lead me to sign up – except I already have an account (and highly recommend the service).

2) Kaleidoscope App

This screencast does a great job of showing off a variety of different features of the application in a quick, easy to understand fashion. Again, I find a key point is the way it provides you with different use cases for the application, as well as demonstrating several of its key features. This screencast also uses a British accent, which according to some results at least can lead to higher conversions than an American accent. Go figure.

3) Capo

A different approach to screencasting here, but considering the target market for this application, it should work very well. Capo is an app for reverse engineering music, enabling you to slow down tunes and quickly create tabs of whatever you are listening to. This could be a complicated concept, but the screencast does a wonderful job of showing off all the key features in a very short amount of time – time being another key ingredient for making great screencasts. The only point I’d make here is that they should make the screencast more prominent on their site as it really does a good job of showing off their product.

4) Espionage

This screencast stands out to me because of its slick transitions, and the way it subtly injects humor into the screencast. This is another good way to make yourself stand out, and to help your users relate to you more. Again it gives great examples of how to use the application, walks you through all required steps, and leaves you ready to give it a go yourself. You can easily imagine how this would lead to more conversions on the site.

5) The Indesigner

This is actually a series of tutorials for using InDesign, but again, it provides a great example of how to make a great screencast. The host uses simple effects to help focus attention on different elements within the software, and really helps the users keep up to speed with what he is working on. It’s one of the longer running tutorial series around, so obviously the host is doing something right.

6) Socialite

Socialite does a great job of showing off the core features of the software, and has a nice, gentle background track which testing has shown can help to retain the users attention. It is really short and to the point, which is exactly what you are looking for in a screencast. Two things to note though; there is an error when the voiceover says “pressure” instead of “precious”, and possibly they could afford to cut out some of the loading time when opening the image. Some people might say they are just being honest though, so you can look at it either way.

7) Tatango

Without knowing anything about this site or service, you could go, look at the screencast, and come back a minute later with a strong understanding of what they offer. They use really pretty images and effects to show of their site to great effect, and have a great voiceover to top it off. Again, short, sharp and sweet, the secret recipe for a great screencast.

8) ScreenCastsOnline

This is a series of screencasts on using a variety of mac apps. Again it is well narrated, and the host uses different effects to illustrate his points very effectively. Unfortunately most of the screencasts require a subscription, but I suppose you get what you pay for. The important thing to note with these screencasts is the logical fashion in which information is displayed, something all screencast producers should remember.

9) Divvy

Really interesting voice for this screencast – some people might say similar to James Earl Jones; regardless, it adds another interesting aspect to the screencast. It also shows off the functionality of the application very succinctly, and demonstrates exactly how to integrate it into your workflow. There are a couple of odd pauses in the voiceover, but all in all, it’s a very good screencast that does it’s job of explaining the application very well.

10) Things Mac | Things iPad

Both the Mac and iPad screencast for Things really show off the application in great ways. The Mac version walks you through step by step, and explains the whole process of using the application. The iPad version uses lots of slick transitions and effects, and looks absolutely stunning. Of course, they won an Apple Design Award in 2009, so you’d expect nothing less. A great example of two different styles of screencast, and both working in their own way.

What makes them great:

All of these screencasts achieve their goals in different ways, but there are a number of different factors that help to make them stand out:

  • Great voiceover voice
  • Great audio quality
  • High quality video
  • Good use of effects to help focus attention in the screencasts
  • Great images/pretty
  • To the point
  • Shows all the important features
  • Explains the use case for the site or application

Chances are if you meet these factors, you’ll have a pretty great screencast on your hands, and conversions will increase. A great screencast will really add to the value of your site.

Common mistakes:

In all my searching for great screencasts, I came across a huge number that simply weren’t up to scratch, and were in fact more of a liability than an asset. These are some of the common mistakes that I found:

  • Choppy video
  • Poor quality audio
  • Poor voice for the screencast
  • Monotones – I can’t believe how many of these there are out there
  • Not really explaining anything
  • Too long – nobody wants to watch a 10 minute screencast for a twitter client
  • Too much information – only explain the core features, not every last one
  • Look pretty but don’t show anything
  • Poor resolution – bandwidth isn’t such an issue; no one wants to see a 320×240 screencast
  • No audio – silent video is a bit too 1910 for me

You’d be amazed how frequently these issues pop up, especially when all of these issues can be easily addressed with just a little bit of advanced preparation. Try to follow the following tips to avoid these issues.

A few tips:

Most of these are really common sense, but it helps to have a list when you are working away because there are a certain elements that are easy to forget.

  • Find a relatively silent spot to record the audio
  • Create a list of key points about your software, site or service that you want to get out
  • Make a storyboard so you know what you should say and when you should say it
  • Invest in a reasonable microphone to get better audio quality
  • Try and find someone with a good voice
  • Keep length in mind – how long does it really need to be?
  • Make the video a logical sequence, from start to end of using the software/site/service
  • Give usage examples
  • Clear your desktop or use a separate user account to create the video
  • Try and aim for a decent resolution
  • You know your target market; aim the video at them
  • If you make a great screencast, don’t be afraid to show it off

If you follow these simples tips, you will greatly improve the quality of your screencast. Remember, a little creativity will get you a long way, so experiment and see what you can come up with.

Further resources:


Hopefully this list will give you the inspiration you need to go and get started on a screencast of your own. A great screencast can really add a lot of value, and do wonderful things for your conversions, not to mention it’s also a great way to communicate with your users and to really show off the personality behind the brand, and the usefulness of a great product.

So get out there and give it a go. Have a site or software you are working on a screencast for? Be sure to let us know in the comments.

August 27 2010


JavaScript from Null: Cross-Browser Event Binding

In chapter five of this series, we jumped into the muddy world of event listeners. In that episode, we only got our feet wet; however, today, we’ll take things a step further as we implement a far more efficient solution. Along the way, we’ll learn a plethora of new techniques.

As with every JavaScript from Null screencast, it’s not essential that you view the previous entries in the series before watching.

Catch Up

Chapter 6: Cross-Browser Event Binding

Premium Members: Download this Video ( Must be logged in)

Our Final Code

var addEvent = (function( window, document ) {
	if ( document.addEventListener ) {
		return function( elem, type, cb ) {
			if ( elem && !elem.length ) {
				elem.addEventListener(type, cb, false );
			else if ( elem && elem.length ) {
				var len = elem.length;
				for ( var i = 0; i < len; i++ ) {
					addEvent( elem[i], type, cb );
	else if ( document.attachEvent ) {
		return function ( elem, type, cb ) {
			if ( elem && !elem.length ) {
				elem.attachEvent( 'on' + type, function() { return } );
			else if ( elem.length ) {
				var len = elem.length;
				for ( var i = 0; i < len; i++ ) {
					addEvent( elem[i], type, cb );
})( this, document );

// Example Usage
var lis = document.getElementsByTagName('li');
addEvent( lis, 'click', function() { = '1px solid red';


August 23 2010


Quick Tip: Dissecting jQuery – Filters

Sporadically, over the course of each month, we’ll post a “Dissecting jQuery” video quick tip. The idea behind these is that we’ll take a single chunk of the jQuery source at a time, break it down, and determine exactly what’s going on under the hood, so to speak. Then, with that knowledge, we’ll learn how to better utilize the library in our coding. Today, we’ll review filters.

Video Tut

jQuery’s Source for the :hidden Filter

jQuery.expr.filters.hidden = function( elem ) {
		var width = elem.offsetWidth, height = elem.offsetHeight,
			skip = elem.nodeName.toLowerCase() === "tr";

		return width === 0 && height === 0 && !skip ?
			true :
			width > 0 && height > 0 && !skip ?
				false :
				jQuery.curCSS(elem, "display") === "none";

The :visible Filter

Quite cleverly, the :visible filter only needs to call the hidden method, and return the reciprocal.

jQuery.expr.filters.visible = function( elem ) {
	return !jQuery.expr.filters.hidden( elem );

Hint: Search for filters: and setFilters: within the jQuery source code to view a listing of other helpful filters that are available to you.

Harnessing this Knowledge to Extend jQuery

	$('p:first').data('info', 'value'); // populates $'s data object to have something to work with

		jQuery.expr[":"], {
			block: function(elem) {
				return $(elem).css("display") === "block";

			hasData : function(elem) {
				return !$.isEmptyObject( $(elem).data() );

	$("p:hasData").text("has data"); // grabs paras that have data attached
	$("p:block").text("are block level"); // grabs only paragraphs that have a display of "block"

Note: jQuery.expr[':'] is simply an alias for jQuery.expr.filters.

Stay tuned. In future episodes, we’ll continue to slice out more chunks of the jQuery source, and dissect them!

August 07 2010


30+ Killer Web Development Screencasts to fine tune your skills

A single image helps us to understand the concept better than a description of 1000 words. In a similar manner reading a code of thousand lines wont make us learn a software than a single video demonstration. There comes the purpose of Screen shots which helps us in the form of screen casts to learn our task in a quick and  relaxed manner. So sit back and do your task in an effective manner.Updating the information on the site or developing the site as a whole is Web Development. Targeting the specific users , a website is developed by planning, analyzing, designing and implementing the same. Then comes the promotion of the site which plays a major role and after promoting, thinking of novel ways to sustain in the industry.

A screen cast gives you a much clear idea by its interactive way of explaining as similar to a live version with the help of a clear audio as in the case of Microsoft Office or Photoshop tutorials. These Screen casts on jQuery, AJAX, PHP and CSS takes you to a tour from the scratch to a level of professional growth.


1.AJAX refreshing RSS content

Overcome the hassles of page refreshing by updating the contents without a manual page refresh. This video demonstrates the do’s and how’s to refresh the RSS feeds with the help of AJAX.

If you’re doing just one feed, I think it’d be more efficient to roll your own JavaScript code, especially if it’s just parsing RSS. From what I remember, SimplePie seemed to be a lot of overhead.


The great thing about Realmac’s QuickSnapper site is that if JavaScript is turned off, the list of snaps is visible by default. So we’ll follow suit.

It’s also worth noting that their version only keep pulling in new items until it hits the end. I’ll show you how you can keep the list looping, and in a follow up tutorial I’ll show you how to hook this in to an Ajax hit that doesn’t hammer your server and keeps the effect nice and smooth.

3.Top 25 AJAX video tutorials from youtube

The tutorials presented here gives a beginning from the scratch of how to create a HTML document, adding javascript and also linking an external javascript to that to that,building AJAX chat, adding AJAX elements to a web page using Spy framework,inserting AJAX objects into Adobe Dreamweaver, how to create Mash up applications using AJAX framework,create a Delphi for PHP web  also about AJAX MySql database


4.Sliding headers like iphone

Ever Got frustrated when you cannot find the header while browsing a content and got lost with your subject
when moving on to next page, this screen cast helps the header to remain content and also replaces the next heading simultaneously when you move to next page in a subtle manner.It’s very useful for every web designers who is following the trend.

5.Slidedown animation jump revisited

You would have noticed that your animation jumps towards the end, which could be because of height problems.This screen cast helps you to find a solution by considering the height factors by storing an inline height and setting an an inline height later and proceed accordingly whether we are revealing or hiding the element.We can use this action to show our results or can use this in FAQ’s also.So there’s no need to refresh the page.

6.Slider gallery

Wanna create a gallery with a slide to navigate the items? This screen cast helps you with simple steps to translate the sliders position to slide the products inversely with the help of Markup, slider-widget control, jQueryUI, CSS and certain plug-ins which provides faster scroll and a pause when needed.Using this slider you can display your products and you can roll your images etc.

7.Jquery for absolute beginners

A 15 day Absolute beginner series in Jquery with Theme as a reference by Jeff Way who has exclusive videos for each day where you could learn all the methods, Jquery style switcher, hover effect and lots more used in

This screen cast  series will teach you Jquery clearly and effectively.Each screencasts has the own style and it would be very useful for beginners who needs to learn Jquery in an defective manner.

8.Build Lava lamp style navigation menu

Learn to create a lava-lamp style menu from the beginning which initially demonstrates the same process by using a three level menu and then create a lava-lamp menu by using a Javascript library in this screen cast.

It’s highly professional way to monetize your website and this type of menu will give you a good look to your website.

9.Automatic infinite carousel

Most of the times a scroll action doesn’t stop automatically and we have to control it manually when needed, So to make a scrolling action automatic and pause it when the mouse is over the carousel using Jquery is demonstrated in this screen cast.

We can use this carousel for dynamic purpose too.

10.Jquery look tim van damme

The key effects of Tim the Accordion and Hover effect which work only in Webkit can also work in jQuery when two factors namely animated margin – left and Background rgba crossfade effect is taken into account.

For further details go through the screencast and find it on your own.

11.Popup login window

An authentication is always done with the help of a password.This screen cast will be very useful for authorization purposes.

In this screen cast we create a simple pop up window which verifies the password of an account in an LDAP server and where data is passes from a link to the dynamically created window.

12.Screencasts to build your own jquery plugin

Take the guidance of experts James Padolsey, Jeffery Way and Dan Wellman in this screen cast to create your Jquery plugins and use them in your programs. Lear how to set defaults,pre-load images, create call back methods and create dynamic radio buttons using Jquery, CSS.

To learn the full steps study the complete screen cast.

13.Jquery video series

A more elaborate and precise training regimen of 10 minutes for and using the same how to use the Jquery library and create your our own projects with the help of video series description for 15 days.

The whole series will bring the beginners as a successful professional in Jquery.They can edit and customize the Jquery applications flexibly.

PHP screencasts:

14.Diving in to PHP

A short tour on various topics in PHP are given as separate tutorials.These self contained tutorials by Jeffery Way teaches you to upload files using PHP with the help of ThemeForest blog which is a complete source on PHP queries.

This screen cast covers the different type of topics for the beginners and intermediate level users.

15.PHP Json Jquery Ajax screencast

To create a communication between PHP and JSON data source using jQuery’s AJAX functionality where we create a script to send the JSON data, then a PHP array  then we load the file and our data source is populated.

To learn the full steps please view the complete screen cast.It’s an advanced screencast for PHP lovers.

16.Photo admin site using PHP and Jquery

This screencast helps you to create a photo site using PHP and jquery where a database is created with collection of photos, and the admin is given the rights of updating the title of the photos as well as maintaining any sub-directories by clicking on the text.

You can administrate the whole photo gallery as per your requirement.The specialty of this screen cast is using Jquery we are accessing the galleries.

CSS screencasts:

17.HTML and CSS the very basics

Help the absolute beginner with the basics of HTML and CSS which are only text files to a level where you can use them as a preview in your website.

This screen cast teach you that HTML is the content and CSS is the design of the website and also how to create a website with good quality.Here you can learn the very basics of both HTML and CSS so you can handle the websites easily when learned the basics well.

18.Editable CSS3 image gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked.This image gallery will give you a highly professional look for your web development.

But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime.

19.How to use CSS sprites

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page.Reducing the number of HTTP requests improves the load times. To achieve this we use CSS sprites, How to create a CSS sprite and how to those sprites describe here.

This will give you an good idea about CSS sprites and how to use this with your web development side.

20.Detailed look at 960 CSS framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

You don’t have to master the code to create a web application .CSS frameworks are there for you to write your code.Spend some time with this screen cast to learn about the frameworks and to efficiently develop your web applications.

21.Image switcher

Image Switcher is a free JavaScript that automatically inserts a series of images into one single hot-swappable view port.This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function. Any number of list selection options can be used so long as the width can accommodate them.

To change the images as you move across a link is what this screen cast teaches you without the help of JavaScript.You need only z-index switching on hover and a bit of absolute positioning to achieve this.

22.Building a photo gallery

Like many people out there, you may want to create a web site to show off your photos of friends, family, vacation, wedding, etc. Well, this small tutorial will show you how to create a photo gallery and upload it to the Internet.

A photo gallery which automatically builds itself with the images from a directory as well as the sub-directories is possible by CSS . Chris Coyier teaches in this screen cast to build an automatic photo gallery.

23.Embedding audio

How do you embed an MP3 file (like a podcast, song or background music) into a web page or an RSS feed so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.

Most of the image we either use an image or an audio file. But an image with an audio in the background makes a user quite comfortable to grasp the information. Chris Coyier teaches the same with the help of JavaScript and Flash in this screen cast.

24.Using CSS3

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this web page.For visual enhancements such as multiple backgrounds, RGB, border image, border radius, @font face, animations / transitions and a lot more for CSS3 is on the move now.

To follow this latest wave catch a glimpse of this screen cast.

25.Introducing firebug

You can get the information about the markup, CSS, layout and DOM of an element in a page with Firebug, an extension of Firefox which has become inevitable for Web designers and developers where you can edit and see the results directly in the browser.

To know more learn this screen cast.

26.Unique page for twitter updates

When designed right, a Twitter feed can improve the aesthetics of a website’s layout.If tweeting is your pastime then you must be eager to display your tweets from start to finish. For e.g. you could cover the design in Photoshop also style your page.

To achieve this task follow this screen cast which guides you from the javascript stuff to CSS to style your page.


27.Basic screencasts

Code Igniter is an open source web application for writing PHP programs and also to create full -features web applications.writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries.

In this screencast it gives you introduction about CodeIgniter and also to create a blog in CodeIgniter using PHP by Derek Jones.

28.Easy development with codeigniter

With raw PHP, this can be somewhat time-consuming. However, with CodeIgniter, it’s simply a matter of referencing the correct library, and passing in some configuration options! Let’s dive in.

Eager to tune PHP skills after learning the introduction , Move on to the next step ,this screencast teaches you to upload an image and save it after initial validation using PHP in CodeIgniter.

29.Killer startup screencasts for codeigniter

Get ready to create your first application with CodeIgniter, create a form using Form builder, build a sample application,create a blog in 20 minutes, create a Pagination, send and receive data via jQuery Post and JSON in this 10 minute screencast by Derek Jones.

We are hoping that you will learn further on CodeIgniter Application Development Framework after watch out screencast.


30.Build a login and registration system with xml

Building an entire membership system can be a tedious, and time-consuming task. Tim Cooper is going to show us how to build the ENTIRE thing in roughly thirty minutes.

Using XML we could create a login and registration form in much less time than MySQL, Tim Cooper in this screen cast shows us this by reviewing PHP, .htaccess, files, sessions and more.

31.Form builder

It may seem odd to attempt to standardize data types in a system DESIGNED TO BE SO FLEXIBLE, but more than one institution reports that setting reasonable expectations for portfolio deployments across campus and managing your IT resources to leverage some amount of standardization do a lot to the project sustainable.

Learn the basics of building a form using the Form builder tool which could be used to build an XML schema file and also use for many multiple purposes in many forms. Sean Keesler teaches you to build a form in this screen cast.

32.Parametrize test data using XML

Create automation scripts to test web application functionality in Internet Explorer on Windows.

From this Screen cast achieve this task with the help of Pamie – a Python class file which creates a Pamie test script to automate a form, create an XML file, read data and run the test.

It show you:

  • How to create a Pamie test script to Automate a form
  • How to find the names and ID’s of DOM Elements to automate
  • Creating an XML file from scratch using Notepad++
  • How to read the data in an XML file using ElementTree
  • How to run the test

33.Screen casts to get you kicking ass with drupal

Find it difficult to learn Drupal, this screencast makes it easy for practically learning step by step process starting with the installation, node system, block system, content types, theme development and more.

Also you could find resources for Drupal books, Drupal podcasts, Drupal forums, Drupal channels.

34.Drupal roundup

Get all the information you wanted to know about Drupal, this screencast gives you the best of Drupal’s screencasts, best books on Drupal, resources, modules and also the annoyances of Drupal. Get the latest screencasts on Drupal 6, Learn about CSS Injector, Node Convert, open buffet syndrome, creating a backup, about Webform, Login Toboggan, Input filters, Teaser length and lots more about this content management platform – Drupal.

June 14 2010


10 Things I Learned from the jQuery Source

It’s jQuery on the big screen. We’ll open the jQuery source and run through how the jQuery object works, covering self-executing anonymous functions as a global abatement technique, several interesting jQuery methods, internal jQuery paradigms, and hidden enhancements. You’ll learn JavaScript techniques you can apply to your own code, as well as the basic workings of jQuery itself.

About Paul

Paul Irish is well-respected in our industry and has contributed to various open source projects that many of us use every day, including:

He’s also one of the hosts of the YayQuery podcast, which (obviously) focuses on the jQuery library. Be sure to subscribe if you’d like to stay up to date on the latest news in jQuery.


Thanks for watching! Did you enjoy the screencast? Let us know if you have any questions.

February 18 2010


Quick Tip: Easy Sequential Animations in jQuery

In this video quick tip, I’ll demonstrate an easy way to allow for sequential animations of an infinite number of elements. I originally learned this technique from Dave Methvin, but don’t think that many people are aware of this neat little trick.

The Goal

We want to filter through an infinite number of elements on a page, matching some selector, and then make them sequentially fade out.



The jQuery

var paras = $('p'),
    i = 0;

// If using jQuery 1.4, you don't need to do || [].
(function() {
  $(paras[i++] || []).fadeOut('slow', arguments.callee);

We begin by “caching” all of the paragraphs on the page, wrapped in the jQuery object (var paras). We also create an iterator variable – i. This iterator will allows us to target each new paragraph element, without knowing the specific length of the paras object ahead of time.

Within the self-invoking anonymous function, we get the first paragraph on the page with “paras[i]” … But we want to increment i by one for each iteration. This way, the next time the selection is called, it’ll be referring to the next element in the wrapped set. So, we must be sure to write paras[i++]. Then, it’s a simple matter of calling fadeout, and passing arguments.callee as the callback function, to allow for recursion. This will be equal to the function it’s contained in; so we’re essentially saying “rinse and repeat!”

alert(arguments.callee); // alerts the following

 (function() {
  $(paras[i++] || []).fadeOut('slow', arguments.callee);


If, for some reason, you’re using jQuery 1.3 or older, you need to specify what should happen when paras[i] is equal to an element that doesn’t exist. In older versions of jQuery, it returns an error, “undefined.” To compensate, we pass $(paras[i++] || []) to specify that, if the element doesn’t exist, we instead wrap an empty array, to avoid any errors.

It should be noted that, as of jQuery 1.4, this is unnecessary, as jQuery will return the jQuery object instead.

January 20 2010


30 Web-Design Related Photoshop Tips, Tutorial Screencasts

Title-web-design-photoshop-vide-screencastOh, this is a bit different collection I hope, because I couldn’t find really similar articles like this one. I did very big research through youtube, delicious, good-tutorials, vimeo, google and many more websites to find interesting Photoshop, little coding and tips video tutorials. What’s great with video tutorials? – you can see every mouse click and in the same time you hear author’s voice explaining things to you verbaly. In my opinion this is the fastest and the best way how to learn new techniques.

Actually I got this article idea, when I accidentaly found great video tutorial on Deviantart which by the way is the first video in this list as well. It is Photoshop tutorial, where author explains several of his great techniques while creating designs – what font to choose, how to think about spacing, wirefrime, colors, blending options and a lot more hidden tips.

1. Website design walkthrough from Derek Toigo

This video will walk you through Derek Toigo design process of a simple website template. He will explain and unreveal many hidden tips and techniques in his daily designing process.

2. Letterpress text tutorial from che mcpherson

In this tutorial you will learn how to create the trendy letterpress or emboss text affect thats flooding the web design scene at the moment.

3. How to slice a Photoshop image into a website

4. Fancy Frames Photoshop Tutorial

5. 3D Web Design Effect in Photoshop

6. Web 2.0 Footer in Photoshop

7. Vista Inspired Menu in Photoshop

8. Create a Watercolor-Themed Website Design with Photoshop

9. How to Make a Highly-Textured Site Layout in Photoshop

10. Web Text Box and HTML: Photoshop Tutorial

11. Photoshop Tutorial Text Mirror Effect

12. Web Design Tutorial – Apple Navigation in Photoshop

13. Spark Beam Photoshop Video Tutorial

This video tutorial will show you step by step how to create this really stunning spark beam effect which can be commonly seen in cell phone ads for example.

14. Creating a Website: From Start to Finish Part 1

15. iPhone icon design tutorial from SoftFacade

In this tutorial you will create iPhone application icon for address book in Adobe Illustrator with some Photoshop touches.

16. jQuery slider tutorial from Dimics DM

17. Wordpress theme tutorial Part 1 (PS) from Dimics DM

The first part of an Wordpress theme tutorial. This video will cover the Photoshop/design part of the Wordpress theme.

18. Frames and Peels in Photoshop from Navdeep

19. Style Techniques of Mantrastic by Mantrastic

Mantrastic is a great artist on Deviantart, you should view his photomanipulation works and you will understand what I mean and why you definitely should download and see this great video tutorial straight away!

20. Photoshop – Learn how to create an Apple iPod Shuffle from kakkuk

21. Web Development – Tutorial 1 – Basic Layout from Michael Daley

Basic Layout is now uploaded and ready to view and runs for around 36mins. This tutorial covers basic CSS/XHTML to get a simple design from Photoshop into a web page. This tutorial is aimed at beginners who are just starting out with CSS/XHTML and need a few tips on how to do simple layout.

22. J Taylor Design ~ Web Design from J Taylor

A little video on a typical outline working with a client on their website.

23. K-DESIGN Windows Blue – Your Choice Tutorial from

24. Photoshop Tutorial 1 from Alistair Rossini

Interesting Photoshop web design tutorial, explaining how to create simple but good looking layout.

25. How To: Gradient, Gloss, Shadow & Reflection Effects from Ryan

A Photoshop tutorial showing how to achieve a great effects you can use in your designs everywhere.

26. Web 2.0 Gloss Orb from Navdeep

This tutorial will walk you trough the creation of a Web 2.0 style gloss orb with lights and shadows in Photoshop.

27. Web 2.0 Menu Bar from Navdeep

In this video you will see how to design a Web 2.0 Style Menu Bar with lights and Shadows using Photoshop.

28. Web Design Tutorial Part One from andrew

This video covers the basics of web design, mainly composition design, and the process that I go through to create mockups. The video covers basic wireframing, grids, psd structure and general design techniques. This video is for people who are new to web design, and the techniques used are basic, more advance design tutorials in the future.

29. Web Design Tutorial Part 2 from andrew

Part 2 of my webdesign tutorial, covers building out the rest of the site, this video is intended for beginners only.

30. Integrating Lightbox 2.0 in to your web design projects from Psmeg

This 10 minute standalone video demonstrates how easy it is to install and use the popular Lightbox 2.0 javascript effect in your web design projects.

The tutorial takes you step-by-step through the whole process, from downloading to integration to testing.

If you know more of this type tutorials with unique webdesign techniques, please share! It was really hard to find something good out there from keywords, so I believe I should more listen to recommendations.

Related posts:

  1. 22 Photoshop Web Design Interface Tutorial Sites
  2. 1st Photoshop Web Design Professional Layout Tutorial
  3. 50 Really High Quality Photoshop Navigation Menu Tutorials
  4. 90 New And High Quality Photoshop Web Layout Tutorials
  5. Unique 3D Text – Xara 3D + Photoshop Tutorial

January 15 2010


Terminal, Git, and GitHub for the Rest of Us: Screencast

So you’ve read the tutorials, and still can’t manage to figure out this stuff? What is Git – and why do we even need it? If you fall into this category, much like I did at one point, I’ve recorded a video tutorial that hopes to teach you exactly how to get started. Rather than feeling your eyes blur over as you attempt to comprehend code snippets like “git push origin master,” relax, and let me explain it to you as best as I possibly can!

Video Exporting. Please watch video here.

Other Viewing Options

Further Reading

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

January 08 2010


How to Build a Newspaper Website with a Grid: New Plus Tutorial

In this week’s Plus video tutorial, you’ll learn how to utilize a grid to create a simple newspaper-like website. Along the way, you’ll learn helpful techniques, such as easy ways to target IE7 and IE6 with only a single character, using the 960 grid system, and even using CSS3 to create columns! It’s an hour long; ready to dig in? Join Plus!

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

December 31 2009


A Video Crash-Course in Raphael: New Plus Tutorial

Raphaël is a JavaScript library that provides you with extreme flexibility when working with animations. If you’re unfamiliar with this library, you’ll be amazed when you view some of the demos, and find that no Flash has been used.

Perhaps the reason why this library hasn’t become as widely used as it should be is because there aren’t enough quality tutorials available around the web. Hopefully, this Plus tutorial will help! Join Plus!

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join Plus!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

December 30 2009


JavaScript from Null: Chapter 4

JavaScript University continues today as we learn about methods of the Array object, how to return values from functions, scope, and even your first animation.

Remember – though each new chapter builds upon the previous ones, you can still follow along perfectly well if you haven’t watched the other entries in the series!

Catch Up

In this Screencast, you’ll Learn:

  • Methods of the Array object: push, pop, unshift, shift
  • Pull values outside of functions
  • Reducing your “global footprint” by creating an object
  • SetInterval
  • Create your first animation
  • Methods of the String object.

Chapter 4: Arrays, Functions, and your First Animation

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.


December 19 2009


JavaScript from Null: Chapter 3

Continuing on with our JavaScript training, in this week’s screencast, we’ll review if, for, and while statements. Secondly, you’ll be introduced to the ternary operator, as well as a handful of the most useful methods of the String object.

Catch Up

In this Screencast, you’ll Learn:

  • If statements – long, and short-hand forms.
  • For statements
  • While statements
  • Working with arrays, and loop through them.
  • Ternary operator
  • Methods of the String object.

Chapter 3: Conditional Statements

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.


December 11 2009


JavaScript from Null: Chapter 2

Continuing on from chapter one, we’ll now take things a step further as we learn about primitive datatypes, operators, if statements, and naming conventions.

Catch Up

In this Screencast, you’ll Learn:

  • camelCase naming
  • Primitive data types: String, Number, Boolean
  • Difference between = and ===, and != and !==
  • How a string can have methods available to it, like toUpperCase() and length.
  • If statements.
  • JavaScript native functions: parseFloat, and encodeURIComponent
  • Basic Math operations
  • Incrementing numbers

Chapter 2: Data Types

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.


December 09 2009


Three search engines, one interface – 25 minutes live code

It is amazing how much easier it is these days to build pretty sweet mashups by using hosted services. Here’s a screencast of using Yahoo, Bing and Google to build a search interface in under 25 minutes without having to read any API docs or installing SDKs by using YQL:

Building a search mashup with YQL using Google, Yahoo and Bing – live :) from Christian Heilmann on Vimeo.

Give it a lick of paint and you have a pretty sweet little tool:

GooHooBi - search Google, Yahoo and Bing in one go!

All the source code is available on GitHub.

December 04 2009


JavaScript from Null: Video Series

Thanks to the wide adoption of libraries like jQuery and Mootools, JavaScript’s popularity has skyrocketed in the last few years. However, in the process, an interesting thing occurred: many newer developers are learning these libraries without taking the time to actually learn about raw JavaScript techniques. What percentage of jQuery users don’t know how to fade out an element with only raw JS? My guess is that it’s much higher than many would think.

If you want to truly understand the library you’re working with, and improve your skill-set, it’s vital that you learn the fundamentals of raw JavaScript.

This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.

Chapter 1: Hello, World

November 13 2009


Easy Website Updates with PageLime

PageLime makes the process of editing static websites laughably easy. There are times when a full CMS like WordPress is far too complicated when only simple edits are required – not to mention the fact that a static template must first be modified accordingly to work with WordPress. Wouldn’t it be easier if your current static website could instantly be integrated with a service, without requiring hours of conversion time? This is where PageLime comes in.

In today’s video tutorial, we’ll go through the process of purchasing a site template on ThemeForest, and then integrating that specific template with PageLime, resulting in a website which is super easy to update…even for your mom.

PageLime is a remote Content Management System that allows you to update the content, images, and documents on your web site without installing any software.

The Screecast

Other Viewing Options

What’s in Store for PageLime?

In the CEO’s own words…

  • Repeating Regions – You/Your clients will be able to have regions that you define as repeatable. This will let you dynamically create new buttons in navigation, blog like article additions, etc. This is in testing now, and will roll out across all sites in the next week!
  • Multipage Dynamic Content – You will be able to define areas that show up on other places in the website. So when you update them, they update in other places.
  • Blog – Drop in simple PageLime managed blog.
  • Client Invoicing – We’re building an invoicing feature from withing PageLime that will let you manage your PageLime clients with auto recurring invoices that link to your PageLime account. This basically allows you to setup a subscription model for you clients, and pass the cost of PageLime directly to them. OR charge them more, and make money off of PageLime! This will be a feature in the Business Account Level.
  • iPhone App – Manage websites from an iPhone application. This is already designed, just need to go about building it soon. I can send you screenshots if you would like.
  • eCommerce – Either a partnership with another team, or build one ourselves that can be dropped in, like the blog.

November 09 2009


17 Hours of JavaScript from the Masters

Douglas Crockford. John Resig. Peter-Paul Koch. Nicolas C. Zakas. If you recognize these names, you probably know what they all have in common: they’re amazingly talented JavaScript Developers. Today, you’ll hear from all of them, in this roundup of JavaScript presentations. Be ready to stretch your brain!

1: Javascript: The Good Parts

Is JavaScript a hopeless mess, or a robust and flexible standard? In this presentation, Douglas Crockford, the world’s foremost authroity on JavaScript, will try and convince you that the language is worth your time. This is a great video, and everyone coming to JavaScript for the first time should watch it! You might also want to check out Crockford’s book by the same title. (Here’s another instance of the same talk.)

2: The JavaScript Programming Language

  • Length: 1 hour, 51 minutes
  • Speaker: Douglas Crockford
  • Slides (zip)

This is the first session in Crockford’s JavaScript Trilogy. In this talk, he’ll walk you through many of the features in JavaScript, as well as discuss the language itself and some JS programming styles. Here’s another great watch for newcomers!

3: An Inconvenient API: The Theory of the DOM

  • Length: 1 hour, 18 minutes
  • Speaker : Douglas Crockford
  • Slides (zip)

While this video isn’t focused on JavaScript, it’s the second part of Douglas Crockford’s JavaScript Trilogy. You’ll hear about the browser, why it is the way it is, and a few of the key concepts behind it. Of course, it’s all very relevant to JavaScript Developers.

4: Advanced JavaScript

  • Length: 1 hour, 7 minutes
  • Speaker: Douglas Crockford
  • Slides (zip)

This is the final installment to Crockford’s trilogy. Moving up to advanced concepts, this video will introduce you to topics such as inheritance, debugging, and efficiency.

5: Games, Performance, TestSwarm

John Resig, the creator of jQuery, knows what he’s talking about. In this presentation, which he gave at JSConf 2009, he talked about measuring performance in JavaScript (including an intro to the pros and cons of benchmarking), as well as JavaScript games and distributed testing.

6: Speed Up Your JavaScript

Nicolas Zakas is the author of “Professional JavaScript for Developers” and co-author of “Professional Ajax.” This talk is all about performance, and you’ll hear the low down in the areas of scope, data access, loops, and the DOM.

7: Best Practices in JavaScript Library Design (or Building a JavaScript Library)

Ever wanted to build your own JavaScript Library? John Resig talks about the princples of doing so in this Google Tech Talk. He covers the whole spectrum from designing a good API to maintaining the library, with implementing, debugging, and testing (just to name a few!) in the middle.

8: Drop-In JavaScript Performance (or Perfomance Improvements in Browsers)

In this video, John Resig goes through some of the latest and greatest in the world of JavaScript and DOM performance. Although this type of talk goes out of data somewhat quickly (the browser speed stats are pretty stale), there’s still a lot to look forward to here!

9: JavaScript Events

Peter-Paul Koch is a professional front-end engineer from the Netherlands. He’s done an enormous ammount of CSS and JavaScipt browser testing and has published the charts on his website, Quirksmode. This talk is a JavaScript Events Theory Class given at Yahoo!.

10: Scalable JavaScript Application Architecture

This is a great theory presentation; Nicolas Zakas talks about JavaScript architecture. You’ll learn how to separate modules on a page, how to get them to interact with other modules that they don’t know exist, and more JS goodness.

11: ECMA Harmony and the Future of JavaScript

  • Length: 1 hour, 6 minutes
  • Speaker: Brendon Eich

You may not have heard of Brendon Eich before, but he’s the man who started it all: the creator of JavaScript. In this talk, he goes into a bit of language history, as well as talking about what’s coming in the ECMAScript 5 proposal.

12: The State and Future of JavaScript

JavaScript hasn’t changed in almost a decade; so what’s going on? In this talk, Douglas Crockford explains some of JavaScript’s history, the battles fought in the past years, and what the standard could look like in the (relatively) near future. Yes, this is quite similar to Brendan’s talk (which was actually given the evening before), but this one has that Crockford theoretical slant to it.


There are many videos and presentations out there that aren’t just about JavaScript, but certainly involve it. Check these out:

The JSON Saga

  • Length: 49 minutes
  • Speaker: Douglas Crockford
  • Slides

Server-Side JavaScript

  • Length: 23 minutes
  • Speakers: Isaac Schlueter and Matt Hackett

Advanced JavaScript with Libraries, and part 2

  • Length: 56 minutes
  • Speaker: John Resig

Ajax Security (mp3 link)

The DOM is a Mess

That’s It!

Well, that’s all I’ve got for you today, but I’ve probably missed your favourite; share it in the comments!

November 06 2009


Learn how to AJAXify Comment Forms

In this week’s video tutorial, I’ll teach you how to take a simple, boring contact form and add some animations and an AJAX post request to submit the form to your MySQL database asynchronously.

In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.




This screencast demonstrated just one way to animate your contact forms. Truthfully, it’s probably a bit too much for a regular site! :) But we’re here to have fun with it. If you decide to implement something like this into your own site, perhaps a more toned down version, please do leave a comment with a link to the page for our review!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...