The Apple Tablet will look nothing like this

We’ve heard so much about the new tablet that Apple is about to show to the world over the past few weeks. But why is everyone getting so excited?

I definitely don’t need a tablet device right now (I sure as hell ain’t gonna be touching anything with Windows 7) , but I will probably buy the iPad/iSlate/or whatever it’s called. Why? Because every time Apple release a product they create a need (and in the case of the iPhone, an entire industry).

Steve jobs is said to be “as excited as ever” with this latest piece of shiny goodness. If he’s more excited about the tablet than the iPhone then I for one will be queuing outside the Apple shop in March.

In my opinion it’s an incredibly difficult decision on Apple’s part. On one side they have to consider that Spotify could potentially be (as it has often been dubbed) an ‘iTunes killer’, but they also have to consider the Public Relations side of things. If Apple reject this app, to what extent will Apple’s reputation suffer in the minds of the many passionate and excited iPhone wielding Spotify users?

In addition, of course, this app could bring more people to buy an iPhone. After all, word on the street is it will be the most groundbreaking iPhone app to date. Many people are questioning whether users will pay the premium subscription fee, but I don’t think this will be an issue.

I for one will have my bank card ready and my fingertips poised.

First, you will need a photo taken from a good vantage point. Choose something taken from a high altitude or from afar. I took this one whilst walking along the Thames in London:

Now open your image in Photoshop and click the Quick Mask button located at the bottom of the tool bar (see image on the right).

Select the gradient tool and apply it onto the quick mask layer so that the areas you wish to be out of focus are red. See the screen shot below:

Now click the quick mask button once again, and go to Filter > Blur > Lens Blur. You will see dialog below:

You can then simply play with the Radius and other sliders to simulate your desired ‘depth of field’. Check out my final tilt shifted photo here. Have fun

Please ensure that it is relevant to the content on this site (web design & development) and that it also looks pretty!

Send your image and link to rich(at)blemble(dot)com.

Using cookies can be very useful from a user experience perspective. They are used to save small amounts of data onto the users’ machine, enabling the site to use this data next time the user visits. This is particularly useful if you have an age-gate (maybe for a movie or an alcoholic brand) but you don’t want to confront the user with this each time they visit if they have previously confirmed a valid date of birth. In this situation, you can set a cookie on their machine (named ‘ageCookie’ for example) and give it a value of ‘true’ or ‘false’. You can then detect the value of this cookie next time they visit (if it exists) and perform the necessary actions.

Show me the code!

It’s simple, there are 2 core functions you will need: setCookie() and getCookie(). They are pretty self-explanatory, one sets a cookie on the users’ machine and the other gets a cookie.

Here is the code:

// This function will get a cookie from the users' machine
function getCookie(theName) {
var nameEQ = theName + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// This function will set a cookie on the users' machine
function setCookie(theName, theValue, theDays) {
if (theDays) {
var date = new Date();
date.setTime(date.getTime()+(theDays*24*60*60*1000));
var expires = "; expires="+date.toLocaleString();
}
else var expires = "";
document.cookie = theName+"="+theValue+expires+"; path=/";
}

Once you have this code in your page, you just need to call these functions and pass the parameters. For example: setCookie('ageCookie', 'ok', 365);. Notice how I pass a value of 365 for theDays parameter. This will ensure that the cookie will stay on the users’ machine for up to 1 year (given that they never clear their cookies).

Things to remember/useful tips

• When testing the functions remember to enable cookies on your machine.
• It is always useful to use a debugger such as the Web Developer Toolbar or Firebug, both for Firefox. These add-ons will enable you to view the cookies on your machine, edit their values, and remove them.

Other popular web application frameworks include Ruby on Rails, Django, and the Zend Framework.

Model View Controller

Cake uses the Model View Controller (MVC) development pattern. When I first heard about MVC and looking into it a little further I found it very daunting and slightly confusing, but I’m not sure why because I now feel very confident working in this way! It’s a simple concept: the model represents the data of the application, the view handles the visual layout of the data, and the controller performs all the logic for the application.

It’s fast!

The most obvious advantage to me at this stage is speed. I know that with both Ruby on Rails and CakePHP you can ’scaffold’ your applications first. Basically, scaffolding (much like a construction site) is a rough structure for your application. You put the scaffolding up first, then start bulking the application out and replacing the scaffolding with your own code. It’s really great for getting something up and running quickly.

The scaffolding will automatically detect the fieldsets and datatypes in your database and generate all the boring CRUD (Create, Read, Update, Delete) code for you at run time, so you don’t have to sit around creating forms and can get a basic application up and running within minutes!

Another really nice tool is bake. This is a PHP command-line script (you run it from the shell), which will create all the CRUD code in files. So once you have scaffolded your application and are happy with all the forms/validation/relationships you can create an editable file using bake and start to customize the code.

Here is a simple bit of actionscript demonstrating how to do this:

// Import the ExternalInterface class
import flash.external.*;

// Call the JavaScript function 'myFunction' and parse the value 'myParameter'
myMovie.onRelease = function () {
	ExternalInterface.call('myFunction', 'myParamenter');
}

Below are the 5 different user states in the usage lifecycle.

The Stages and Hurdles

Unaware

When you first launch your software, many people will not have heard of or read about your service. Although this group of people will be unaware of your service, they will be aware of their own frustrations with the current way that they do things. The key to getting their attention is to make sure that your software solves their problem and make sure you tell a genuine story!

Interested

This group of people have heard of your software from a friend, colleague, blog post, or followed a link and now need to be told that you can solve their problem. They are ready to be told about your service so make sure you give a good rationale as to why they should use your service! Don’t be too pushy but make sure they know exactly how you can solve their problem. Lastly, it’s good to make sure that your homepage has a very clear call to action. Do all this, and they’ll happily sign up.

First-time Use

Once a visitor signs up to your service and becomes a user, they experience your software for the first time. The impression that your site makes on the user at this point is absolutely critical. As they explore your application they are making judgments. Does this software really solve my problem? Does it really do what it says on the ‘tin’? They are deciding whether your service is worth switching from what they currently use.

If people don’t see the value in your service at this point then they may never return.

Regular Use

This group of people are using your software regularly. They are constantly adapting and learning, spending increasingly larger amounts of time on your site. They will communicate with you and you can learn from this. This is the point at which you start having success!

Passionate Use

Passionate users are the most important users on your site. They will feel emotional attachment to your service. This usually happens after the site becomes a real success. They will want to tell all their friends about it. It is critical at this point to socially empower these users and enable them to tell everyone they know, evangelizing your service and bringing more users in. You must always remember that a recommendation from a friend has a whole lot more value than other conventional marketing methods.

So there we have it…

…awareness, sign up, return visits, and emotional attachment. You will need to overcome these four hurdles in order for your social application to succeed. Good luck!

This tutorial is intended for the jQuery beginner. It helps to have some previous knowledge of the library but I will make sure that I introduce every concept and technique as if I were teaching my Grandmother (well not quite but you get the gist). We will build a simple tabbed interface, introducing you to the jQuery factory function, document traversal & manipulation methods, and even a few clever effects. It’s really very simple

See DemoDownload Source Files

The Document Ready Function

In this tutorial we will write all of our jQuery code within a document ready function, which essentially makes sure the page we are working on is ready before we start messing with it! Unlike the native javascript window.onload event, anything you put inside the $(document).ready() function will be executed as soon as the Document Object Model (commonly referred to as the DOM) is ready, rather than when all page contents have loaded.

The Document Object Model, or DOM refers to the ’skeleton’ of a web page. You can view more information about this on the World Wide Web Consortium.

Here is an example of how to use this functionality:

$(document).ready(function(){
	// jQuery it to the max in here!
});

The jQuery Factory Function

No matter what you want to do in jQuery, you will use this function extensively. It comes in the form of a dollar sign and parentheses: $(). By parsing this function a ’selector’ we can select an element on the page, which will create a new jQuery object. We can use all sorts of selector types - CSS, XPath, or even custom.

You can easily select elements on the page using all sorts of selector types including CSS, XPath, or even custom

From this object we can call a method (essentially a function within an object) and use it to perform a task or change a property of the selected element. For example, if we wanted to change the background color of a paragraph that has an ID of “pink”:

$(document).ready(function(){
	// Change the background color of the following paragraph to red
	$('p#pink').css('background-color', '#FF0000');
});

Notice how the selector used here is CSS. At this point it’s also important to highlight jQuery’s chaining capability. As the method (in this case .css()) returns a new jQuery object, we can string these methods together. For example, if we want to change the background color and hide the element we would simply add the .hide() method to the end of the line!

The Interface

So now you have a very basic understanding of how jQuery works as a library, lets create an HTML document in which to build our interface. Start by copying and pasting the following code into the body of your document (within the <body></body> tags).

<div id="container">
	<div id="panels">
		<div class="panel" title="First Panel">
			<h1>First Panel</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p class="emphasis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="The Second Panel">
			<h1>The Second Panel</h1>
			<p class="emphasis">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="Third Panel">
			<h1>This is the Third Panel</h1>
			<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class="panel" title="Hello World">
			<h1>Hello World</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>

So we now have the content for our panels. Notice that there are no tabs/links included in the content. The tabs will be dynamically generated by jQuery, the beauty of this being that panels can be removed and/or added to the interface without changing any links or code for tabs.

The beauty of these tabs is that as panels are added and removed, the number of tabs will change accordingly as they are generated dynamically

Now we need to style the page to make it a little easier on the eye. Either embed the following CSS in the page or link to it in an external style sheet.

/* Set all elements to a default margin & padding of 0 */
* {
	margin:0;
	padding:0;
}
body {
	background-color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}
div#container {
	width:600px;
	margin:40px auto;
}
div#panels {
	border:2px solid #000000;
	padding:20px;
}
p {
	line-height:1.5em;
	margin-bottom:1em;
}
a.tab {
	display:inline-block;
	background-color:#000000;
	color:#FFFFFF;
	padding:5px 10px;
	text-decoration:none;
	margin-right:3px;
}
a.tab:hover {
	background-color:#333333;
}
a.tab-active {
	display:inline-block;
	background-color:#FF0000;
	color:#FFFFFF;
	padding:5px 10px;
	text-decoration:none;
	margin-right:3px;
}
p.emphasis {
	font-style:italic;
}
p.red {
	color:red;
}

So just to clarify, if you test your page you should currently see a centered box with a thick black border containing 4 headings and a total of 7 paragraphs. 2 of these paragraphs will be red and 2 will be emphasized (italic).

Lets Write Some jQuery!

For this tutorial we will write all our JavaScript within the same page, inside the <head></head> tags (the page header). Before we write anything though, we will of course have to include the jQuery library. You can download it here, or simply link straight to the jQuery site to retrieve the latest version. You should use this method only for development.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Now I think the best way for me to explain how our jQuery code will work is to include the whole lot below and then take you through it in bite size chunks. So here it is (be sure to include it within <script type="text/javascript"></script> tags).

$(document).ready(function(){
	// We can use this object to reference the panels container
	var panelContainer = $('div#panels');
	// Create a DIV for the tabs and insert it before the panel container
	$('<div id="tabs"></div>').insertBefore(panelContainer);

	// Find panel names and create nav
	// -- Loop through each panel
	panelContainer.find('div.panel').each(function(n){
		// For each panel, create a tab
		$('div#tabs').append('<a class="tab" href="#' + (n+1) + '">' + $(this).attr('title') + '</a>');
	});

	// Determine which tab should show first based on the URL hash
	var panelLocation = location.hash.slice(1);
	if(panelLocation){
		var panelNum = panelLocation;
	}else{
		var panelNum = '1';
	}
	// Hide all panels
	panelContainer.find('div.panel').hide();
	// Display the initial panel
	panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow');
	// Change the class of the current tab
	$('div#tabs').find('a.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');

	// What happens when a tab is clicked
	// -- Loop through each tab
	$('div#tabs').find('a').each(function(n){
		// For each tab, add a 'click' action
		$(this).click(function(){
			// Hide all panels
			panelContainer.find('div.panel').hide();
			// Find the required panel and display it
			panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
			// Give all tabs the 'tab' class
			$(this).parent().find('a').removeClass().addClass('tab');
			// Give the clicked tab the 'tab-active' class
			$(this).removeClass().addClass('tab-active');
		});
	});
});

So there’s the full code and now here’s the explanation!

Creating A New DIV

// We can use this object to reference the panels container
var panelContainer = $('div#panels');
// Create a DIV for the tabs and insert it before the panel container
$('<div id="tabs"></div>').insertBefore(panelContainer);

Here we are first declaring a variable to store a jQuery object (the jQuery factory function returns a jQuery object). We will use this variable regularly throughout our code so it makes sense to do this because we can then repeatedly call and pull methods from this same variable. It’s easy to remember too!

We then use this variable to create the new DIV. Notice that when inserting something into the DOM the method used is called from the object containing the new code. The element that you wish to insert your code before is then parsed to this method.

Create The Tabs

// Find panel names and create nav
// -- Loop through each panel
panelContainer.find('div.panel').each(function(n){
	// For each panel, create a tab
	$('div#tabs').append('<a class="tab" href="#' + (n+1) + '">' + $(this).attr('title') + '</a>');
});

This part of the code creates a tab for every panel. On line 3 in the above snippet we find every DIV with the ‘panel’ class that is inside the panelContainer (’div#panels’) and perform a function for each one, by calling methods from the panelContainer variable created at the beginning of the script. .find() will find elements inside the parent element that match the selector expression. .each will execute the script that is parsed to it however many times it finds the element that it’s chained to. In this case, it is chained to the panels so it will execute the script 4 times. If you include a variable (in this case ‘n’) in the function that is being executed, it will then increment by 1 every time the script runs. It’s initial value will be 0.

In line 5 of the snippet above we are appending a tab to the DIV that we created at the beginning of the script (’div#tabs’) using the .append() method. Notice how we include a location hash in the href attribute (n+1). The href of the first tab will be #1, the second #2, and so forth. We will get to the purpose of doing this in the next section.

You will also see how $(this).attr('title') is used to get the title of the link. $(this) returns the parent element from which it is being called, in this case whichever panel it is currently looping through. The attribute method can be used in two ways; to assign an attribute or retrieve an attribute. In this case we are retrieving the ‘title’ attribute from the parent panel. If we wanted to assign an attribute to the parent element, we would parse two parameters to the method as opposed to one:

$('a#theID').attr('href', 'http://www.blemble.com');

Determine The First Tab To Display

// Determine which tab should show first based on the URL hash
var panelLocation = location.hash.slice(1);
if(panelLocation){
	var panelNum = panelLocation;
}else{
	var panelNum = '1';
}

This part of the code is actually pretty simple and doesn’t use jQuery at all. It simply grabs the location hash from the URL, removes the hash, and stores the number in a variable (actually it’s a string datatype but it doesn’t matter for what we need it for). If there is no hash present then it will default to 1. This functionality is not really necessary but when I think it’s quite useful. It enables support for a direct link to a specific tab. I can link to the second tab, the first tab, or even the fourth tab directly!

Show The Correct Panel!

// Hide all panels
panelContainer.find('div.panel').hide();
// Display the initial panel
panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow');
// Change the class of the current tab
$('div#tabs').find('a.tab:nth-child(' + panelNum + ')').removeClass().addClass('tab-active');

Okay, we start this snippet by hiding all panels within the panel container (panelContainer) using the .hide() method. We could alternatively use .css('display', 'none'), it’s just that .hide() is a lot shorter!

On line 4 we then use the ‘nth child’ selector to find the panel that we need to display. We parse it the variable that we declared in the last section and it finds the correct panel. The .fadeIn() method is then called and you guessed it, the correct panel will fade in! See how easy it is to use effects!? Note that if you want to execute a a function when the effect is complete (a callback function) then you simply parse a function into the effect method!

panelContainer.find('div.panel:nth-child(' + panelNum + ')').fadeIn('slow', function(){
	// Do this when the animation finishes
});

After this, we select the #tabs DIV and find the tab that corresponds to the location hash using the ‘nth child’ selector. We then remove the current class of this element (.removeClass()) and add the class ‘tab-active’, which is specified in our style sheet. This will give the current tab a red background.

// What happens when a tab is clicked
// -- Loop through each tab
$('div#tabs').find('a').each(function(n){
	// For each tab, add a 'click' action
	$(this).click(function(){
		// Hide all panels
		panelContainer.find('div.panel').hide();
		// Find the required panel and display it
		panelContainer.find('div.panel:nth-child(' + (n+1) + ')').fadeIn('slow');
		// Give all tabs the 'tab' class
		$(this).parent().find('a').removeClass().addClass('tab');
		// Give the clicked tab the 'tab-active' class
		$(this).removeClass().addClass('tab-active');
	});
});

The final snippet of code assigns .click() events to each tab and thus determines how the application will respond to user actions. So as you can see, we loop through each tab using .each() and parse the method a function. We then assign click events to each tab and parse this method a function, which contains the actions we want it to perform.

You will notice that the code inside this function is very similar to that of the last code snippet. We first hide all of the panels, then show the required panel using the :nth-child selector. Then we take care of the tab classes and change them as necessary in order to make it clear to the user which tab is currently active.

Download the source code here

And that’s it, you have just made your first jQuery application and learned some cool techniques on the way too! Let me know if you found this tutorial useful and leave a comment.