• Feed RSS

jQuery Media Plugin

jQuery Media Plugin: "

Media Plugin for converting elements into rich media content


The Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page. The plugin converts an element (usually an ) into a


which holds the object, embed or iframe tags neccessary to render the media content.



Demos

Video/Flash Demo



Documentation

Documentation Page



Download


Download Source Code




Related posts

"
read more
Posted in: ,,,,,,,,,,

6 Tips for Pitching to Major Clients

6 Tips for Pitching to Major Clients: "

Almost every major web designer faces this dilemma at some point: either continue working with “mom-and-pop” style businesses, enjoying effortless marketing and relatively simple projects, or transition to working with larger businesses and reap the benefits of bigger budgets.

It’s a question of experience, and with enough design work under your belt, new opportunities start to present themselves.

The most difficult part for many is making the transition. The comfort of simple work and the ease of marketing yourself can make maintaining a small client network very tempting.

You see the effort involved in pitching to a major client and you slightly recoil, worried that you’re not quite skilled enough, you’re not quite experienced enough and your business is not quite big enough.

That insecurity leaves so many designers bidding for tiny projects, working for local clients and missing out on lucrative long-term opportunities. That insecurity can grind a business to a halt and stall a career.

The six tactics below don’t guarantee long-term success with major clients, but they will help you get your foot in the door, get a contract on the table and make the possibility of major business relationships very realistic.

1. Never Compete on Price

Big companies have big budgets, especially companies that are focused on fields with as huge a potential for growth as the online world. Marketing yourself on price might work when you’re fighting for micro-clients and short-term projects, but it’s counter-intuitive when trying to appeal to major clients.

Why? Because major clients expect a certain level of size, overhead spending and expenses. They expect you to have infrastructure, employee salaries and office space. They expect you to be able to manage them, and that management begins with a per-project quote that accounts for extra time, minor outsourcing and long-term work.

So quote high—higher than you normally would. The list of corporate deals passed over because they were too expensive is relatively short; the list of proposals passed over because of low pricing and a mist of inexperience is significantly longer.

Of course, be realistic in your pricing (you’re not pitching to Berkshire Hathaway), but remember that large companies value professionalism and ability a lot more than competitive pricing.

2. Pitch on Results, Not Potential

Designers do burn people. Visit a local Chamber of Commerce meeting, and you’ll be surrounded by business owners who have been burned by would-be designers: inexperienced “experts” who have mastered Photoshop in their bedrooms and who market in their afternoons. The design world is full of self-styled experts, an unfortunate reality that it shares with the marketing and publicity industries.

This has bred an unfortunate environment for genuinely good designers. Not only are business owners skeptical of designers on the whole, but many are completely turned off by the prospect of having to update a website that another designer has put time into. The endless promises and presentations touting “progress” and “results” have turned them off, and so the chance of a senior manager assigning a large budget to your design project is low.

Fight this resistance to design by pitching results instead of potential. If you can walk into a meeting with a portfolio of websites that aren’t just pretty but highly effective, you’ll increase your chances of landing lucrative projects and long-term contracts.

Find people who have been burned by rhetoric, and give them real results, establishing yourself as the lone expert in the process.

3. Minimize Risk by Preparing Samples

In today’s economy, risk is a significantly bigger factor than it once was. Companies that had multi-million dollar design budgets have run into rough territory, now sparing only enough money to invest in cosmetic updates and the occasional usability study.

An industry that once felt entitled to massive budgets because of its complexity has run into a cost-cutting drought. Companies are keen to invest in low-cost websites, fearing that an expensive project might end up losing money.

That’s why you need a stack of samples ready beforehand, samples that prove not just your competence and ability but the way you’ve helped other people in their position. Show how your websites have improved conversion rates, how they’ve boosted customer interest and how they’ve reduced customer service costs. Then you’ll gain contracts and long-term interest, even in a troubled economy.

4. Bleed Professionalism in Your Team, Plan and Approach

They’re big, successful and influential. At this point, you’re not. So, make every effort to appear as though you are. Hire a virtual assistant to handle your phone calls. Build a paid-for-results team that functions as different divisions of your business. Treat projects as though they are routine work, not one-off events that you’re unfamiliar with.

Hundreds of small businesses pitch to major companies every month. Most fail, usually not because of incompetence, but because of a lack of managerial resources and size.

To even appear on the radar of Coca-Cola, Apple or Walmart, you need a certain size and degree of complexity. Expand, even if just by illusion, and you’ll appeal significantly more to large companies.

The bonus of this approach is that after you’ve found success with one major company, you’ll gain the security and visibility to be able to approach others. Find a formula that succeeds with one major company and replicate it, not just in your presentation and pitch, but in the way your business approaches new clients.

5. Know Exactly Who to Pitch and How to Do It

Small businesses have an advantage: they’re small, they’re mobile, and they adapt very quickly to change. Big companies, unfortunately, are not like this.

The amount of time for a decision to move down the managerial chain often creeps into the months, and the amount of effort required to even speak with someone at the top can drive employees crazy. When it comes to speed and flexibility, the decentralized micro-businesses of the world have the advantage.

But finding the decision-makers at all is a substantial victory. Hundreds of businesses fail to get the attention of major companies because they pitch to the wrong people. Ignore claims that proposals must always be submitted through entry-level employees, and aim straight for the top. Cultivate links to senior managers, CEOs and managing partners; their recommendations will mean a lot more to marketing, design and online departments than yours will.

6. Think Long-Term

Small projects, one-off assignments and low-paying gigs are of little value to a design business. They’re useful for filling in the blanks and strengthening your portfolio, but they offer barely any long-term opportunity.

Great designers and successful marketers know not to treat their major projects as they would one-off assignments. They understand the value of relationships, and they treat their valuable ones appropriately.

Whenever you submit a proposal to a major company, you’re pitching not just for that project, but for the company’s future business. Approach major clients with a long-term plan, a plan to deliver quality and to prove that sticking with you for future projects is worth the company’s while.

If you can ensure that your first major project goes smoothly, you’ll open your business to huge projects, major ongoing work and professional relationships that would otherwise take years to build.

Written exclusively for WDD by Mathew Carpenter. He is an 18 year old business owner and entrepreneur from Sydney, Australia. Mathew is currently working on AddToDesign, a website which provides value added design buzz and most recently, Design-Newz, a website that features hand-picked web design articles, resources and tutorials. Follow Mathew on Twitter: @matcarpenter.

How was your experience pitching to major clients? What other tips can you share from your own experience?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: H0Oa9C

"
read more
Posted in:

How To Build a Web Widget Using jQuery

How To Build a Web Widget Using jQuery: "

Alex Marandon has written a comprehensive guide about How to build a web widget (using jQuery). It covers only techniques which are specific to web widgets so you should already be familiar with JavaScript, jQuery and web development if you want to follow easily.

The interesting points will be: ensure the widget’s code doesn’t accidentally mess up with the rest of the page, dynamically load external CSS and JavaScript files, bypass browsers’ single-origin policy using JSONP.

jquery-widget

Source: http://alexmarandon.com/articles/web_widget_jquery/

"
read more
Posted in:

Really Useful Tutorials You Should Have Read in June 2010

Really Useful Tutorials You Should Have Read in June 2010: "

This update covers really useful tutorials, tips and techniques that you should have read in June 2010. Featured publications include: Justin Tadlock, Nettuts+, David Walsh Blog, Smashing Magazine, Tutorialzine, A List Apart, Perishable Press, Carsonified, Marcofolio, Nicolas Gallagher, Codrops, Onextrapixel, Digging into WordPress, Six Revisions, Line25, 1stWebDesigner, Alex Marandon, and Voosh Themes.

Featured authors include: Justin Tadlock, David Walsh, Martin Angelov, Nicolas Gallagher, Jeff Starr, Marco Kuiper, Faruk Ates, Chris Coyier, Chris Spooner, Richard Fink, Dan Wellman, Rafael Soto, Lorna Jane Mitchell, Divyang Patel, John Cox, Mary Lou, Irina Borozan, Jonathan Phillips, Paras Chopra, Alex Marandon, Darren, and Chris Creed.

So which tutorials you found most useful. Also feel free to recommend any good article that we may have missed.

Similar Posts:

You can also stay updated by following us on Twitter, becoming a fan on Facebook or by subscribing to our FriendFeed.

"
read more
Posted in:

Simple AJAX Commenting System

Simple AJAX Commenting System: "

This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.

Step 1 – XHTML

First, lets take a look at the markup of the comments. This code is generated by PHP in the Comment class, which we are going to take a look at in a moment.

demo.php

<div class="comment">
   <div class="avatar">
       <a href="http://tutorialzine.com/">
       <img src="http://www.gravatar.com/avatar/112fdf7a8fe3609e7af2cd3873b5c6bd?size=50&default=http%3A%2F%2Fdemo.tutorialzine.com%2F2010%2F06%2Fsimple-ajax-commenting-system%2Fimg%2Fdefault_avatar.gif">
       </a>
   </div>

   <div class="name"><a href="http://tutorialzine.com/">Person's Name</a></div>
   <div title="Added at 06:40 on 30 Jun 2010" class="date">30 Jun 2010</div>
   <p>Comment Body</p>
</div>

The avatar div contains a hyperlink (if the user entered a valid URL when submitting the comment) and an avatar image, which is fetched from gravatar.com. We will return to this in the PHP step of the tut. Lastly we have the name and time divs, and the comment body.

The other important element in the XHTML part is the comment form. It is sent via POST. All fields except for the URL field are required.

demo.php

<div id="addCommentContainer">
 <p>Add a Comment</p>
 <form id="addCommentForm" method="post" action="">
    <div>
        <label for="name">Your Name</label>
        <input type="text" name="name" id="name" />

           <label for="email">Your Email</label>
           <input type="text" name="email" id="email" />

           <label for="url">Website (not required)</label>
           <input type="text" name="url" id="url" />

           <label for="body">Comment Body</label>
           <textarea name="body" id="body" cols="20" rows="5"></textarea>

           <input type="submit" id="submit" value="Submit" />
       </div>
   </form>
</div>

The form is submitted via AJAX. The validation is performed entirely in the backend by submit.php, as you will see in the jQuery step of the tutorial. Every field has a corresponding label element, with an appropriate for attribute.

Simple AJAX Commenting System

Simple AJAX Commenting System

Step 2 – PHP

PHP handles the communication with the MySQL database and generates the markup of the comments. It is also on the receiving end of the AJAX requests and inserts the comment data to the comments table. You can see the code that prints the comments to the page below.

demo.php

/*
/ Select all the comments and populate the $comments array with objects
*/

$comments = array();
$result = mysql_query('SELECT * FROM comments ORDER BY id ASC');

while($row = mysql_fetch_assoc($result))
{
 $comments[] = new Comment($row);
}

The MySQL query selects all the entries from the database and fills the $comments array with objects of the comment class, which you will see below. This array is outputted later in the execution of the script.

demo.php

/*
/ Output the comments one by one:
*/

foreach($comments as $c){
 echo $c->markup();
}

Each comment has a markup() method, which generates valid HTML code ready to be printed to the page. You can see the definition of this method and the class below.

The class takes a row from the database (fetched with mysql_fetch_assoc() ) and stores it in the private variable $data. It is available only to the methods of the class and cannot be accessed from outside.

comment.class.php – Part 1

class Comment
{
 private $data = array();

 public function __construct($row)
 {
  /*
  / The constructor
  */

  $this->data = $row;
 }

 public function markup()
 {
  /*
  / This method outputs the XHTML markup of the comment
  */

  // Setting up an alias, so we don't have to write $this->data every time:
  $d = &$this->data;

  $link_open = '';
  $link_close = '';

  if($d['url']){

   // If the person has entered a URL when adding a comment,
   // define opening and closing hyperlink tags

   $link_open = '<a href="'.$d['url'].'">';
   $link_close =  '</a>';
  }

  // Converting the time to a UNIX timestamp:
  $d['dt'] = strtotime($d['dt']);

  // Needed for the default gravatar image:
  $url = 'http://'.dirname($_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"]).
    '/img/default_avatar.gif';

  return '

   <div class="comment">
    <div class="avatar">
     '.$link_open.'
     <img src="http://www.gravatar.com/avatar/'.
    md5($d['email']).'?size=50&default='.
    urlencode($url).'" />
     '.$link_close.'
    </div>

    <div class="name">'.$link_open.$d['name'].$link_close.'</div>
    <div class="date" title="Added at '.
    date('H:i \o\n d M Y',$d['dt']).'">'.
    date('d M Y',$d['dt']).'</div>
    <p>'.$d['body'].'</p>
   </div>
  ';
 }

This script uses gravatar to present avatars in the comments. For those of you, who have not used gravatar, this is a really useful service, which lets you associate an avatar with your email address. The avatar image can easily be fetched by passing an md5() encoded hash of your email address to gravatar.com. This is exactly what we do on line 48.

Notice line 39 above it – the script tries to figure out the URL at which it is located, and determines the exact address of the default_avatar.gif image. This gif is passed to gravatar along the md5 hash, so if no avatar was found for this particular email, the fallback image is displayed instead.

comment.class.php – Part 2

 public static function validate(&$arr)
 {
  /*
  / This method is used to validate the data sent via AJAX.
  /
  / It return true/false depending on whether the data is valid, and populates
  / the $arr array passed as a paremter (notice the ampersand above) with
  / either the valid input data, or the error messages.
  */

  $errors = array();
  $data = array();

  // Using the filter_input function introduced in PHP 5.2.0

  if(!($data['email'] = filter_input(INPUT_POST,'email',FILTER_VALIDATE_EMAIL)))
  {
   $errors['email'] = 'Please enter a valid Email.';
  }

  if(!($data['url'] = filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL)))
  {
   // If the URL field was not populated with a valid URL,
   // act as if no URL was entered at all:

   $url = '';
  }

  // Using the filter with a custom callback function:

  if(!($data['body'] = filter_input(INPUT_POST,'body',FILTER_CALLBACK,
      array('options'=>'Comment::validate_text'))))
  {
   $errors['body'] = 'Please enter a comment body.';
  }

  if(!($data['name'] = filter_input(INPUT_POST,'name',FILTER_CALLBACK,
      array('options'=>'Comment::validate_text'))))
  {
   $errors['name'] = 'Please enter a name.';
  }

  if(!empty($errors)){

   // If there are errors, copy the $errors array to $arr:

   $arr = $errors;
   return false;
  }

  // If the data is valid, sanitize all the data and copy it to $arr:

  foreach($data as $k=>$v){
   $arr[$k] = mysql_real_escape_string($v);
  }

  // Ensure that the email is in lower case (for a correct gravatar hash):
  $arr['email'] = strtolower(trim($arr['email']));

  return true;

 }

The validate() method above (also part of the class) is defined as static. This means that it can be evoked directly like Comment::validate(), without the need of creating an object of the class. What this method does, is validate the input data which is submitted via AJAX.

This method uses the new filter functions, which are available as of PHP 5.2.0. These allow us to easily validate and filter any input data that is passed to the script. For example filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) means that we are checking whether $_POST['url'] is a valid URL address. If it is, the function returns the value of the variable, otherwise it return false.

This is really useful, as up until now, we had to use custom regular expressions to validate data (and have series of if statements). Also, another advantage is that this data is fetched before any configuration-specific transformations (like magic quotes) are applied.

We also have the option of specifying a custom function which is going to apply some more advanced modifications of the data, as you can see from lines 31 and 37.

comment.class.php – Part 3

 private static function validate_text($str)
 {
  /*
  / This method is used internally as a FILTER_CALLBACK
  */

  if(mb_strlen($str,'utf8')<1)
   return false;

  // Encode all html special characters (<, >, ", & .. etc) and convert
  // the new line characters to <br> tags:

  $str = nl2br(htmlspecialchars($str));

  // Remove the new line characters that are left
  $str = str_replace(array(chr(10),chr(13)),'',$str);

  return $str;
 }

}

The last method is validate_text, which we are passing as a callback function in the two filter_input calls above. It encodes all special HTML characters, effectively blocking XSS attacks. It also replaces the newline characters with <br /> line breaks.

submit.php

/*
/ This array is going to be populated with either
/ the data that was sent to the script, or the
/ error messages:
/*/

$arr = array();

$validates = Comment::validate($arr);

if($validates)
{
 /* Everything is OK, insert to database: */

 mysql_query(" INSERT INTO comments(name,url,email,body)
     VALUES (
      '".$arr['name']."',
      '".$arr['url']."',
      '".$arr['email']."',
      '".$arr['body']."'
     )");

 $arr['dt'] = date('r',time());
 $arr['id'] = mysql_insert_id();

 /*
 / The data in $arr is escaped for the mysql insert query,
 / but we need the unescaped text, so we apply,
 / stripslashes to all the elements in the array:
 /*/

 $arr = array_map('stripslashes',$arr);

 $insertedComment = new Comment($arr);

 /* Outputting the markup of the just-inserted comment: */

 echo json_encode(array('status'=>1,'html'=>$insertedComment->markup()));

}
else
{
 /* Outputting the error messages */
 echo '{"status":0,"errors":'.json_encode($arr).'}';
}

submit.php receives the comment form data via an AJAX request. It validates it and outputs a JSON object with either the XHTML markup of the successfully inserted comment, or a list of error messages. jQuery uses the status property to determine whether to display the error messages or add the comment markup to the page.

You can see two example responses below.

Successful response

{
   'status': 1,
   'html': 'Html Code Of The Comment Comes Here...'
}

The html property contains the code of the comment, similar to markup in step one.

Failure response

{
   'status': 0,
   'errors': {
       'email': 'Please enter a valid Email.',
       'body': 'Please enter a comment body.',
       'name': 'Please enter a name.'
   }
}

On failure, jQuery loops through the errors object, and outputs the errors next to the fields that caused them.

Fancy CSS3 & jQuery Submit Form

Fancy CSS3 & jQuery Submit Form

Step 3 – CSS

Now that we have all the markup properly generated and displayed on the page, we can move on to styling it.

styles.css – Part 1

.comment,
#addCommentContainer{

 /* Syling the comments and the comment form container */

 padding:12px;
 width:400px;
 position:relative;
 background-color:#fcfcfc;
 border:1px solid white;
 color:#888;
 margin-bottom:25px;

 /* CSS3 rounded corners and drop shadows */

 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;

 -moz-box-shadow:2px 2px 0 #c2c2c2;
 -webkit-box-shadow:2px 2px 0 #c2c2c2;
 box-shadow:2px 2px 0 #c2c2c2;
}

.comment .avatar{

 /*
 / The avatar is positioned absolutely,
 / and offset outside the comment div
 /*/

 height:50px;
 left:-70px;
 position:absolute;
 width:50px;
 background:url('img/default_avatar.gif') no-repeat #fcfcfc;

 /* Centering it vertically: */

 margin-top:-25px;
 top:50%;

 -moz-box-shadow:1px 1px 0 #c2c2c2;
 -webkit-box-shadow:1px 1px 0 #c2c2c2;
 box-shadow:1px 1px 0 #c2c2c2;
}

The .comment divs and the #addCommentContainer are styled at once because they share most of the styling. A number of CSS3 rules are applied, including rounded corners and a box-shadow. Needless to say, these do not work in older browsers, but as they are purely presentational, the script will still work without them.

styles.css – Part 2

.comment .avatar img{
 display:block;
}

.comment .name{
 font-size:20px;
 padding-bottom:10px;
 color:#ccc;
}

.comment .date{
 font-size:10px;
 padding:6px 0;
 position:absolute;
 right:15px;
 top:10px;
 color:#bbb;
}

.comment p,
#addCommentContainer p{
 font-size:18px;
 line-height:1.5;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

 /* Styling the inputs */

 display:block;
 border:1px solid #ccc;
 margin:5px 0 5px;
 padding:3px;
 font-size:12px;
 color:#555;
 font-family:Arial, Helvetica, sans-serif;
}

#addCommentContainer textarea{
 width:300px;
}

label{
 font-size:10px;
}

label span.error{
 color:red;
 position:relative;
 right:-10px;
}

#submit{

 /* The submit button */

 background-color:#58B9EB;
 border:1px solid #40A2D4;
 color:#FFFFFF;
 cursor:pointer;
 font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
 font-size:14px;
 font-weight:bold;
 padding:4px;
 margin-top:5px;

 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
}

#submit:hover{
 background-color:#80cdf5;
 border-color:#52b1e2;
}

In the second part of the stylesheet, we style the comment and form elements. Notice the input[type=text] selector, which selects elements depending on the type attribute.

Step 4 – jQuery

Now lets continue with jQuery, which is the last step of this tutorial. After including the library to the bottom of the page (best for the perceived performance of the page) we can start coding the script file.

script.js

$(document).ready(function(){
 /* The following code is executed once the DOM is loaded */

 /* This flag will prevent multiple comment submits: */
 var working = false;

 /* Listening for the submit event of the form: */
 $('#addCommentForm').submit(function(e){

  e.preventDefault();
  if(working) return false;

  working = true;
  $('#submit').val('Working..');
  $('span.error').remove();

  /* Sending the form fileds to submit.php: */
  $.post('submit.php',$(this).serialize(),function(msg){

   working = false;
   $('#submit').val('Submit');

   if(msg.status){

    /*
    / If the insert was successful, add the comment
    / below the last one on the page with a slideDown effect
    /*/

    $(msg.html).hide().insertAfter('.comment:last').slideDown();
    $('#body').val('');
   }
   else {

    /*
    / If there were errors, loop through the
    / msg.errors object and display them on the page
    /*/

    $.each(msg.errors,function(k,v){
     $('label[for='+k+']').append('<span class="error">'+
      v+'</span>');
    });
   }
  },'json');

 });

});

Starting from the top, we have the $(document).ready() call, which binds a function to the DOM content loaded event. The working variable acts as a flag, which tells the script if an AJAX request is in progress (thus preventing double posting).

In the callback function for the POST AJAX request, we check the status property to determine whether the comment was successfully inserted. If it was, we add the received markup to the page after the last comment with a slideDown animation.

If there were problems, we display the error messages by appending an error span to the appropriate label element (the for attribute of the label contains the id of the input that caused the error).

With this our Simple AJAX Commenting System is complete!

Conclusion

To be able to run this script on your server, you need to create the comments table in your MySQL database. You can do this by executing the SQL code found in table.sql from the SQL tab of phpMyAdmin. After this you need to enter your MySQL connection details in connect.php.

You are free to modify and use this code any way you see fit.

What do you think? How would you improve this script?

"
read more
Posted in: ,

PSD/HTML Conversion: Code a Clean Business Website Design

PSD/HTML Conversion: Code a Clean Business Website Design: "

PSD/HTML Conversion: Code a Clean Business Website Design

In this PSD/HTML conversion tutorial, we will take a PSD web design template that I showed you how to construct in a previous tutorial and turn it into a functional HTML/CSS template.

This is the second part of a tutorial on building a clean business website. This second part will focus on converting and coding the PSD mock-up we created in the first part.

"Clean Business Website" Series

Final Result: Live Demo

Here’s the template that we’re looking to create. Click on the screenshot below to see the live working demonstration of the HTML template.

Final Result: Live DemoLive Demonstration of the Final HTML/CSS template

Before Starting

Make sure that you have the Photoshop file (PSD) that we produced in the first tutorial — you’ll need this to extract the images that we’ll be including in the template.

If you haven’t completed the Part 1 tutorial yet, then I’d advise you to go through that first tutorial before starting this one (or at least download the PSD file from that first tutorial).

In this tutorial (Part 2), I’ll be assuming that you have some basic HTML and CSS knowledge — however, if anything is unclear, please leave a comment below and I’ll do my best to help out.

Creating the File Structure

1 Create a new empty folder on your desktop called "template" (or whatever you prefer).

2 Inside of that empty folder, create another folder called "images" — this folder will contain all of the images that we need to display in the template.

3 Then create three new files and name them index.html, style.css, and reset.css.

Creating the File Structure

The index.html file is where we will write all of the HTML for our template, while the style.css file will include all the CSS styling code that will make everything look nice and pretty.

Setting Up reset.css

In the reset.css file, we want to use a reset stylesheet. The primary reason for this is that different browsers tend to have inconsistencies in the way that they display different HTML elements (e.g. font sizes of headings, the size of margins and padding, etc.). Using a reset stylesheet enables us to reduce the impact of these inconsistencies.

4 I’ll be using Eric Meyer’s Reset CSS. Copy the Reset CSS code into your own reset.css file.

Add the Basic HTML Markup

5 Now open up your index.html file using a code editor. I’ll be using Coda (a popular web development IDE for the Mac OS) for this tutorial, but you can use whichever application you prefer. Add a basic structure for a new HTML page — most source code editing applications (like Coda and Adobe Dreamweaver) provide a function for this (or do it automatically for you). Here’s the code block for your basic HTML markup. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta  http-equiv="Content-Type" content="text/html;  charset=UTF-8" />
         <title>My HTML  Website Template</title>
     </head>
     <body>
     </body>
 </html>

Reference Your Stylesheets

6 Inside the <head> tags of index.html, you need to add the following line of code to reference our main stylesheet.

 <link rel="stylesheet"  type="text/css" href="style.css" media="screen"  />

This tells index.html page where to find your main stylesheet.

7 Now open your style.css file and add the following line of code at the top of the document to also reference our reset.css file.

 @import "reset.css";

This ensures that the reset styling included in the reset.css file is called before any of our other CSS stylesheet (which is important because of the CSS inheritance model).

Excellent! All three files are now connected and talking to each other, so we can start coding up the theme.

The Template Structure

Below, you can see the basic layout structure and main sections of the HTML/CSS template. Study it for a bit to familiarize yourself with the different sections of our web page layout.

Creating the File Structure

Code the Basic Page Section

8 We’ll start by creating the basic structure in our index.html. Add the following code block for the layout sections.

 <div id="wrap">
     <div id="header">
     </div><!--end header-->
     <div  id="featured-content">
     </div><!--end  featured-content-->
     <div id="services">
     </div><!--end services-->
     <div  id="additional-info">
         <div  id="client-testimonials">
           </div><!--end client-testimonials-->
         <div  id="featured-project">
         </div><!--end  featured-project-->
     </div><!--end additional-info-->
     <div id="footer">
     </div><!--end footer-->
 </div><!--end wrap-->

As you can see, we’re holding all of the main sections of the template within the #wrap container to make it easier for us to center our web page.

The main sections of our web layout include #header, #featured-content, #services, #additional-information (which contains #client-testimonials and #featured-project), and the #footer.

Create the Background

9 To create the background of our HTML/CSS template, we initially need to slice out the background image from the PSD file. We will be using the same method for slicing out the different CSS background elements throughout this tutorial, and I’ll just give you a brief summary of the procedure here. First step: in Photoshop, choose the Rectangular Marquee Tool (M) and make a narrow selection that includes the header and white background.

Create the Background

10 Once you’ve made the selection, go to Edit > Copy Merged, create a new Photoshop document (Ctrl/Cmd + N), and then paste the selection in the new document (Photoshop should automatically determine the size dimensions of the new document based on the image you have in the clipboard).

11 You then need to go to File > Save for Web & Devices to save the file. Choose the GIF file format and then save it as main-bg.jpg inside your images folder.

12 Now add the following code to your style.css file to set the background.

 /*-----------------GENERAL STYLES-----------------*/ 
 body { background: url(images/main-bg.jpg) repeat-x;  font-family: arial; }
 #wrap { width: 960px; margin: 0 auto; }

Here we’re attaching the background image to the <body> of the HTML document and then repeating it across the page along the x-axis.

We’re also setting the width of page layout and ensuring that it’s centered on the screen (margin: 0 auto; centers the layout).

Adding the Logo

13 We now want to add the logo to the header. To do this, we initially need to extract it from the PSD. Select the layer that the logo is stored on and then right-click the thumbnail next to layer name (circled below).

Add the Logo

This will select the logo text for you.

Add the Logo

14 Copy this text again, create a new document, and then paste it into the new document.

15 Choose Save for Web & Devices again, choose PNG-24 as the file format and save the file as logo.png in the images folder.

We use the PNG file format here because we want the image to have a transparent background so that it can be easily displayed on any background color.

16 Now add the following HTML to your index.html file to set the markup for our site name/logo.

 <div id="header">
     <h1>Design Studio</h1>
 </div>

17 Then we need to style our markup to set logo.png as the CSS background image of #header h1. Add this code block to the style.css file.

 /*---------------------HEADER---------------------*/ 
 #header { height: 130px; }
 #header h1 { float: left; background: url(images/logo.png)  no-repeat; width: 347px; height: 66px; text-indent: -9999px; margin: 38px 0 0  0; }

We’re initially setting the height of the header container and then attaching the logo image to the h1 element.

We utilize a technique called CSS background image replacement which attaches a background image to an element and then moves the content associated with the element off the screen via the use of text-indent: -9999px attribute/value pair.

The CSS background image replacement approach provides some SEO benefits and also makes it easier for users who are using screen readers to understand the content of your page.

Make the Navigation

18 To create the navigation area, add the following HTML to your index.html file.

 <div id="header">
     <h1>Design Studio</h1>
     <ul id="nav">
         <li><a  href="#">Home</a><span  class="nav-divider">--</span></li>
         <li><a  href="#">About Us</a><span  class="nav-divider">--</span></li>
         <li><a  href="#">Services</a><span  class="nav-divider">--</span></li>
         <li><a  href="#">Portfolio</a><span  class="nav-divider">--</span></li>
         <li><a  href="#">Contact Us</a></li>
     </ul>
 </div><!--end header-->

19 Now add the following CSS to your style.css file.

 #header #nav { float: right; margin: 72px 0 0 0; }
 #header #nav li { float: left; font-size: 16px; }
 #header #nav a { color: #eee; text-decoration: none; }
 #header #nav a:hover { color: #00aeef; }
 #header #nav .nav-divider { color: #eee; padding: 0 10px; }

This again is quite simple: We’re initially floating the #nav container to the right of the page and also moving it 72px from the top using the margin attribute. The <li> elements are then floated to the left to ensure that all page names are displayed next to each other and not on separate rows.

The rest of the code simply styles the links and the "–" characters that is used as a divider between the different page names.

Code the Featured Content Section

20 To create this section, we need to slice several images from our PSD. The first is the title. We want to follow the same process we used previously when slicing out the logo. So, select the layer that the title is stored on in the Layers Panel, right-click the thumbnail on that layer to select the text, copy the text, and then create a new Photoshop document.

21 Paste the text into the new document and then save the title into your images folder via the Save for Web & Devices command (call it featured-content-title.png).

Code the Featured Content Section

22 Then do exactly the same for the subtitle (name this file featured-content-subtitle.png), the dotted line (name this horizontal-line.png), and the text (featured-content-text.png).

23 Now that we have extracted all the images required, we need to write our HTML. Add the following code block inside the #featured-content container in your index.html file.

 <div id="featured-content">
     <h2>Clean and Professional Web  Design</h2>
     <h3>Providing High Quality Web  Solutions</h3>
     <div  class="horizontal-line"></div>
     <p>We provide first class web  solutions for organizations and small businesses looking to make a big impact  online. Our services include web design, online marketing campaigns, and search  engine optimization.</p>
     <div  class="horizontal-line"></div>
 </div><!--end featured-content-->

24 Then add the following code to your style.css file to style our elements.

 /*-----------------Tools-----------------*/ 
 .horizontal-line { background:  url(images/horizontal-line.png) no-repeat; width: 950px; height: 10px; }
 /*------------FEATURED CONTENT SECTION------------*/ 
 #featured-content { margin: 65px 0 0 0; }
 #featured-content h2 { background:  url(images/featured-section-title.png) no-repeat; width: 811px; height: 66px;  text-indent: -9999px; }
 #featured-content h3 { background: url(images/featured-section-subtitle.png)  no-repeat; width: 720px; height: 57px; margin: -8px 0 30px 1px; text-indent:  -9999px; }
 #featured-content p { background:  url(images/featured-section-text.png) no-repeat; width: 957px; height: 126px;  margin: 30px 0 25px 0; text-indent: -9999px; }

In these code blocks, we start by moving the #featured-content section down by 65px using the margin attribute.

We then utilize the CSS image replacement technique again for the h2, h3, and p elements to display the images that we extracted.

The styling for the horizontal line (.horzontal-line) has been written in a separate section (using CSS comments to label the sections), as we’ll be using this in other containers as well. This helps to keep our code clean and organized.

Create the Services Section

25 Let’s first extract the images we require from our PSD. We need the blue Services box background (save it as services-box-bg.png), the large headings in each of the boxes (save it as web-design-title.png, marketing-title.png, and optimization-title.png respectively), the horizontal dotted line (service-dotted-line.png), and the buttons at the bottom of each of the boxes (get-more-details-button.jpg, view-case-studies-button.jpg, and learn-more-button.jpg). Follow the same process for extracting and saving the images as used in previous steps.

Create the Services Section

26 Now add the following code inside the #services container in your index.html file.

 <div id="services">
     <div class="service-box first">
         <h2  class="web-design-title"></h2>
         <div  class="service-dotted-line"></div>
              <p>We provide web design solutions of the very highest order. We’ll  work with you from the start to understand your exact requirements and will continuously  work with you to ensure that you’re happy with the final site that you  purchase.</p>
              <a href="#"  class="more-details"></a>
     </div><!--end service-box-->
     <div class="service-box">
         <h2  class="marketing-title"></h2>
         <div  class="service-dotted-line"></div>
         <p>We can help  you promote your business in both the online and offline worlds. We specialize  in a range of fields from viral marketing campaigns to managing paid  advertising accounts for you. Your brand will be in safe hands with  us.</p>
         <a  href="#" class="view-case-studies-button"></a>  </div>
     <!--end service-box-->
     <div class="service-box">
         <h2  class="optimization-title"></h2>
         <div  class="service-dotted-line"></div>
              <p>Want to drive more traffic to your site? You’ve come the right  place! We can increase traffic to your site in an organic and effective manner  that will ensure more people are aware of your business and the  products/services you offer. </p>
              <a href="#"  class="learn-more-button"></a> </div><!--end  service-box-->
     </div><!--end services-->
     <div class="horizontal-line"></div>

In this code block, we’re adding three new containers which are all assigned a class of .service-box. Inside each of these service boxes is a title, a dotted line, the text content for that box, and a button.

The first service box is also assigned a class of .first (class="service-box first") because we need to slightly change the styling of this container from the others.

27 Now add the following CSS to your main stylesheet for styling our Services section.

 /*--------------------SERVICES--------------------*/ 
 #services { padding: 40px 0; height: 355px;  }
 #services .service-box { float: left; background:  url(images/service-box-bg.png) no-repeat; width: 233px; height: 301px; margin: 0 0 0 46px; padding: 22px 28px 30px 26px; }
 #services .first { margin-left: 0; }
 #services .service-box h2 { margin: 0 auto; }
 .web-design-title { background:  url(images/web-design-title.png) no-repeat; width: 186px; height: 48px; }
 .marketing-title { background:  url(images/marketing-title.png) no-repeat; width: 186px; height: 48px;  }
 .optimization-title {  background: url(images/optimization-title.png)  no-repeat; width: 200px; height: 48px;}
 .service-dotted-line { background:  url(images/service-dotted-line.png) no-repeat; width: 237px; height: 3px;  margin: 10px 0 24px 0;  }
 #services p { font-size: 14px; color: #fff; line-height:  21px; text-align: center; margin: 0 0 24px 0; }
 #services .more-details { display: block; background:  url(images/get-more-details-button.jpg) no-repeat; width: 232px; height: 41px;  }
 #services .view-case-studies-button { display: block;  background: url(images/view-case-studies-button.jpg) no-repeat; width: 232px;  height: 41px; }
 #services .learn-more-button { display: block; background:  url(images/learn-more-button.jpg) no-repeat; width: 232px; height: 41px; }

The above code is again making use of the CSS background image replacement technique where necessary to display the appropriate images.

The rest is generally just setting the padding and margins on the different elements for positioning and spacing of the various elements.

One thing to note is that the left margin on the .service-box class is set to 46px. This is to provide consistent spacing between the different service boxes. However, if the first box has a left margin set to 46px, it will not be on the left side of the template and will look a little odd.

To fix this oddity, we therefore set the left margin for the .first class to 0 to override the original margin attribute value from the .service-box styling, ensuring that the first service box is correctly aligned on the left side of the template.

Make the Client Testimonials Section

28 We need to slice out the title for this section. Use the same process as before and save the file as client-testimonials-title.png.

Make the Client Testimonials Section

29 Add the following code inside the #client-testimonials container in index.html.

 <div id="client-testimonials">
     <h3>Client Testimonials</h3>

     <div class="testimonial">
         <div  class="author-img">
              <img src="images/author-img-1.jpg" alt="Sarah  Johnson" />
         </div><!--end  author-img-->
         <p>"Design  studios created a beautiful website and were an absolute pleasure to work  with..."</p>
         <p  class="author-name">Sarah Johnson</p>
         <a  href="#">Web Design Media</a>
     </div><!--end testimonial-->
     <div class="testimonial">
         <div  class="author-img">
              <img src="images/author-img-2.jpg" alt="Kate  Saunders" />
         </div><!--end  author-img-->
         <p>"I only  have great things to say - I would highly recommend DS for online promotional  work..."</p>
         <p  class="author-name">Kate Saunders</p>
         <a  href="#">Software Solutions</a>
     </div><!--end testimonial-->

     <div class="testimonial">
         <div  class="author-img">
              <img src="images/author-img-3.jpg" alt="Dave Cole"  />
         </div><!--end  author-img-->
         <p>"Design  Studios have increased traffic to my site by over 200% in three months - great  work guys!"</p>
         <p  class="author-name">Dave Cole</p>
         <a  href="#">Global Web Services</a>
     </div><!--end testimonial-->
 </div><!--end client-testimonials-->

This is fairly straightforward: We’ve got three new .testimonial containers that each contain an image of the testimonial author, the testimonial text, and the name of the author along with their company/organisation’s name.

30 Now add the following CSS to your style.css file.

 /*----------------ADDITIONAL INFO-----------------*/ 
 #additional-info { margin: 38px 0 0 0; height: 420px;   }
 #additional-info #client-testimonials { float: left; width:  425px; padding: 0 45px 0 0; }
 #additional-info #client-testimonials h3 { background: url(images/client-testimonials-title.png)  no-repeat; width: 180px; height: 28px; margin: 0 0 24px -5px; text-indent:  -9999px; }
 .testimonial {  margin: 0 0 32px -5px;  }
 .testimonial .author-img { float: left; background-color:  #ccc; width: 84px; height: 84px; margin: 4px 28px 0 5px; }
 .testimonial img { margin: 3px 0 0 3px;  }
 .testimonial p { color: #555; font-size: 14px; line-height:  21px; margin: 0 0 12px 0; }
 .testimonial p.author-name { font-weight: bold; margin: 0;   }
 .testimonial a { color: #00aeef; font-size: 14px;  text-decoration: none; }
 .testimonial a:hover { color: #555; }

The first three lines in the above code block all deal with the parent container #additional-info — the height of the container is set along with the margins.

One of the key points here is that the width of the #client-testimonials container is set to 425px with 45px of padding on the right. This needs to be the same for both this section and the "Featured Project" section (we’ll talk about this section later down the tutorial) as they both use half of the screen.

31 Between these two containers, we need to add the vertical line and use it as a divider. Slice this image out of the PSD file and save it as vertical-line.png.

Make the Client Testimonials Section

32 Now add the following line of code between the #client-testimonials and #featured-project containers in your index.html file.

 <div class="vertical-line"></div>

33 Then include this CSS code block under the .horizontal-line class that we defined earlier.

 .vertical-line { float: left; background:  url(images/vertical-line.png) no-repeat; width: 4px; height: 385px; }

The CSS above ensures that the vertical line is displayed between the two different sections.

Make the "Featured Project" Section

34 As with the client testimonials section, we need to slice out the "Featured Project" heading from our PSD template. Save the file as featured-project-title.png.

Make the "Featured Project" Section

35 Now add the following HTML markup code block to your index.html file.

 <div id="featured-project">
     <h3>Featured Project</h3>
     <h4>Yoshi Online Marketing  Campaign</h4>
     <img src="images/featured-project-image.png"  alt="Yoshi Screenshot" />
     <p>This project involved organizing  an online marketing campaign to help promote the Yoshi brand. This resulted in  a 200% increase in Yoshi’s sales over a six month period of time. </p>
     <a href="#">Click Here  For More Details >></a>
 </div><!--end featured-project-->

36 Then add this CSS code block to your style.css file to style the "Featured Project" section.

 /*----------------FEATURED PROJECT----------------*/ 
 #featured-project { float: left; margin: 0 0 0 45px; width: 425px; }
 #featured-project h3 { background:  url(images/featured-project-title.png) no-repeat; width: 160px; height: 32px;  margin: 0 0 16px -5px; text-indent: -9999px; }
 #featured-project h4 { font-size: 20px; color: #888;  font-weight: normal; margin: 0 0 8px 0; }
 #featured-project img { margin: 0 0 7px 0; }
 #featured-project p { font-size: 14px; color: #555;  line-height: 21px; margin-bottom: 7px; }
 #featured-project a { color: #00aeef; font-size: 14px;  text-decoration: none; }

Again, the width of this container is 425px with 45px of left padding. The CSS image replacement technique is used to display the "Featured Project" title with the rest is simply setting the margins, colors, and font sizes of the various elements.

Coding the Last Section: The Footer

37 The footer is very simple to code. Add the following HTML to your index.html file.

 <div id="footer">
     <div class="horizontal-line"  style="clear: both"></div>
     <p>Copyright &copy; 2010 ~  Design Studios ~ All Rights Reserved</p>
 </div><!--end footer-->

In the footer, we’re just displaying another horizontal line to act as a divider between the #additional-info container and the #footer. Some standard copyright text is then included underneath this.

38 Now add this CSS code block to your style.css file for styling our footer section.

 /*--------------------FOOTER----------------------*/
 #footer { height: 70px; padding: 0 0 30px 0; }
 #footer p { font-size: 16px; color: #888; padding: 14px 0 0  0; }

The styling here is quite straightforward: We’re defining the height of the #footer container and then setting the bottom padding to 30px to provide some breathing room at the bottom of the web layout template.

We also set the font size and color of the copyright text and give them some padding at the top to move the text away from the horizontal line.

Finished!

That’s everything done. If everything has gone according to plan, hopefully you have some that looks like the following screenshot.

Final Result: Live Demo

I hope you found this tutorial useful. Please leave some comments below if you have any questions, suggestions, or feedback.

"Clean Business Website" Series

Download Source Files

Related Content

About the Author

Chris Creed is the founder of Voosh Themes, which provides a wide range of Premium and Free WordPress themes. He’s been designing and developing websites for over 10 years and is interested in most things related to design. You can follow him on Twitter at @cpcreed.

"
read more
Posted in:

CodeIgniter from Scratch: Security

CodeIgniter from Scratch: Security: "

In this fourteenth episode of the series, our subject is ‘Security.’ We will go over topics such as: password encryption, message encoding/decoding, XSS filtering, output filtering, sql injection, session security, private controller methods and more.

Catch Up

"
read more
Posted in:

ChromeKit: Some folk love putting windows in browsers

ChromeKit: Some folk love putting windows in browsers: "

The awesome Guillermo Rauch and Nathan White have taken one of the Web code katas and played with it. Before the Web we had [wW]indows. Maybe that is why developers are keen to implement windows within the Web page, mainly to see if it can be done. We had the great Emil and Erik building desktops on the Web before we were in Web nappies. Now we have Ext Desktop, and many more.

The latest fun from Guillermo and Nathan is ChromeKit, which gives you windows that look like Google Chrome.

The one tweak to the code kata this time around, is their use of CSS3 goodness to show off skewing windows as they are tiled together.

"
read more

The Best Facebook Games of 2010

The Best Facebook Games of 2010: "

It’s the end of June, and we have seen a tremendous influx of quality games into Facebook since the beginning of the year. Each month new genres, new ideas, and new evolutions of old ideas have continually raised the bar, from the boom of city builders to the sea of World Cup inspired soccer apps. Which among these many new titles are the top new games will differ according to individual taste, but we’ve endeavored to pick out the best Facebook games for this first half of 2010 with an eye to the many different popular genres

A note on our methodology: we’ve taken a look at all of our game reviews since January and picked out our top 10 Facebook favorites based on factors like presentation quality, style, attention to detail, originality or adaptation of old concepts, and, of course, fun factor. The number of users, as measured by monthly active users (MAUs), also plays a part, but the titles below are by no means all among the most popular Facebook games.

Here are our picks:

Mercenaries of War10. Mercenaries of War

The list starts out with a classic genre — the RPG — with a game from earlier this month: Mercenaries of War from Kaboom Social Games. To a degree, Mercenaries is your typical Facebook RPG, but Kaboom steers away from high fantasy, instead shoving the player into an apocalyptic world of war.

War-based RPGs are nothing new, but Mercenaries stands out in its blending of console gaming concepts into a traditionally text-based genre. Many missions involve animated action, with the player shooting up guards or pitting a squad of their mercs against some big bad boss, Final Fantasy style. Beyond this, even the text-based missions come with added polish, showing the player searching for an object or welding through a door.

As for battles, it’s gratifying to watch your mercenaries duke it out with other players in a bloody skirmish. And here Kaboom once again has a careful attention to detail, as each character responds and reacts to damage. Moreover, there’s a very cool element of “Adrenaline,” that makes you all but invincible after a few battles.

As it stands, Mercenaries of War only has around 15,000 monthly active users, but it’s a game we hope catches on.

FIFA Superstars9. FIFA Superstars

FIFA Superstars from Electronic Arts / Playfish is certainly one of the better soccer apps out there. Don’t be confused, however, as it’s not like the traditional FIFA console titles; instead, it’s a coaching-based sports game. Players manage a team of professional FIFA players and train them the way they see fit.

What really makes the game shine is the level of polish. For each training exercise the player performs, the team visibly reacts, and for each training tool purchased, their stadium changes. This produces something close to a city-building element in the game, with great aesthetic rewards to achieve.

It’s also worth mentioning that FIFA is the largest intellectual property brought to Facebook by Electronic Arts, giving the game a very “name brand” appeal. Couple this with gratifying matches against other players, and you’ve got a recipe for a very popular app.

Currently FIFA Superstars is closing in on 2.8 million MAUs.

Frontierville8. FrontierVille

Part FarmVille, part Treasure Isle, part city-builder, FrontierVille is designed to stem some of developer Zynga’s declining traffic. Set in the age when the American West was new, players set out to create a homestead for themselves in the untamed wilderness.

In truth, most of the features in FrontierVille are not new, but are rather improvements on concepts used in Zynga’s most successful titles. In order to make money and build their homes, players must grow crops, which FarmVille proved most players enjoy. The farm blends with the surrounding wilderness, which constantly encroaches on the land, forcing players to clear it and discover any number of collectible treasures (including a few bears and snakes to fight off), much like Treasure Isle.

One new addition is the non-player spouse that eventually moves out West with you, allowing you to eventually raise a family (or an entire extended clan) to help with the chores. There are also improved mechanics for helping friends, including a new concept of reputation that adds to the rewards of helping out.

Despite its newness, FrontierVille has over 12 million MAUs.

My Empire7. My Empire

Not all city-builders are about a bustling metropolis. At least that was Playfish’s point of view when it took players back to ancient Rome in EA’s entry to the city category, My Empire. This is a fairly simple game centered around two factors: Population and Happiness. In order to succeed, one first builds housing to attract citizens, then begins to tax them. Unfortunately, while this revenue stream is easier on the player than constantly harvesting crops, the NPCs hardly like it.

To mitigate this, players must collect resources to build attractions from the ancient world, like baths and arenas. What makes My Empire shine, though, is that with ancient Rome, Playfish is able to, and does, incorporate a very unique style and mysticism to the game, avoiding some of the rules of modern cities. From the great Coliseum to the Sphinx, everything in My Empire looks fantastic and when a city is in a state of completion, it is a truly gratifying sight.

My Empire now has north of 5.1 million MAUs.

Zoo Paradise6. Zoo Paradise

Released in early March, CrowdStar took a stab at the tycoon genre with Zoo Paradise. The whole concept was to construct a zoo of exotic and aesthetically pleasing creatures in order to attract as many paying customers as possible — who can then be exploited with overpriced merchandise and food!

What really made the game stand out, then and now, was the sheer variety of environments and decorum. Each habitat feels similar with their cell-shaded, almost anime appearances, but at the same time each also looks different. From forests to deserts, every element is gratifying to look at. Combined with special, new, habitats such as aliens, dinosaurs, and even World Cup animals, Zoo Paradise always feels pretty fresh.

Beyond constantly added mini-games, it also doesn’t hurt that it was the first major CrowdStar game to take part in the CrowdStar Cares charity for the Gulf oil spill (if only by a few hours).

Zoo Paradise has 4.4 million monthly active users.

Mall World5. Mall World

Published by 6 Waves, Mall World marks the midway point on our list as a game that truly hits its target market, teenage girls, successfully. Best described as a sim, Mall World is a game that allows players to run their very own boutique in the middle of a giant Facebook mall.

More than just making a store and avatar look pretty, players actually have to manage a virtual business, leveling up and unlocking new and better fashions to purchase and sell. What makes it even better, however, is that sales stem from real users buying your stock, making your choices all the more important. The only downside is that random Facebook friends visit the store are automatically turned into girls — although this could also be a source of amusement.

The game also has a wonderful mini-game to earn extra cash for its female audience, called the Dressing Room Game. Players are given one random clothing item to match an ensemble with and please a customer. Although exceedingly simple, it’s a very cool idea.

In fact, the ideas of Mall World has earned the title constant, steady, growth to 3.7 million MAUs.

NanoStar Siege4. NanoStar Siege

The strategy genre makes its appearance with the Digital Chocolate title NanoStar Siege. Though the game doesn’t top the charts as far as numbers goes, it’s still one of our favorites. Players are able to build up an army of characters and deploy them on a vertical plane, where they march up and attack anything in their path. The idea is to reach the enemy’s fortress and take it down.

What really stands out with the game is the idea of heroes. As part of the Nanoverse, Siege allows players to buy and create decks of virtual cards that are useable across any NanoStar game and grant unique, special powers. Here, they can buff friendly NPCs, strike down enemies, or become powerful units themselves.

It’s also great to be able to set up your own defensive AI when you aren’t present to play. Anyone that attacks you (friends or otherwise) must contend with your deck and your army. Furthermore, players can strategically decide where place units to defend their fortress as well, as well as when special cards will be deployed.

Currently NanoStar Siege has around 660,000 MAUs.

Epic Goal3. Epic Goal

Here’s another game that’s been growing but hasn’t reached its deserved numbers: Epic Goal from Watercooler. Wrought with an amusing cartoon style, players recruit friends to play on their soccer team and compete for the top rankings. Nonetheless, unlike FIFA, this app is only part management, and takes a very action-heavy approach.

Unusually, players actually control what happens in soccer matches. For Facebook, that counts as a risky move, but Epic Goal’s controls shine wondrously, with a simple point and click interface that contextually creates a clickable button around teammates that are near for a pass, opponents with the ball for a slide tackle, and around the player controlling the ball for a shot.

This is taken alongside team management, for which each player (named after Facebook friends) must be trained in speed, shooting and other skills on a practice field in an amusing set of animations. With the attractive visual style, the training is fun in its own right.

As it stands, Epic Goal has over 166,000 monthly active users.

Soical City2. Social City

Playdom’s Social City was the first big-company title of the city-building boom. Like any of its ilk, this game tasks players with managing population, income, and the happiness of its citizens. It’s the balancing between the three that is fantastic. Income is obviously needed to do anything, but population is also needed to gain experience in any significant numbers; in turn, if happiness is not met, population cannot grow.

Like any quality city-builder, Playdom’s title also looks wonderful, providing a substantial aesthetic reward for building a great city. However, what did, and still does, stand out for the game is its attention to detail. Most of the city-builders we’ve seen have streets devoid of life. Sometimes there’s a guy chopping wood or a lone car, but that’s not what cities are like! Social City has people flying kites, mowing lawns, playing sports, and everything else under the sun. It actually feels like a living, breathing metropolis.

In fact, Social City became so popular that it even caught Zynga’s attention and kicked off a spate of city-building releases from other major developers, including our number seven pick, My Empire.

Social City has declined in recent months, but is still huge at 9.9 million MAUs.

Nightclub City1. Nightclub City

Finally, the number one game so far in 2010 is the sim Nightclub City, published by MyTown creator Booyah (though the game was never officially claimed). Forget restaurants, cities and malls, Nighclub City takes players to the more exciting world of nightlife parties, giving them the power to create their own clubs. Ever since we first spotted the app back in April, it has continued to grow and evolve into the epitome of style.

The basic concept of the game is to decorate your club, building up its luxury levels and thus increasing the cover charges and attracting more guests. More than that, however, the social features are incredible. Not only can you visit and spin a few tracks for a friend, but you can actually hire each of your Facebook buddies as bouncers and bartenders. Each one has sets of special abilities to improve your guest happiness or even the tip rates at the bar. This is further enhanced by the addition of the “Entourage,” where you can add even more friends as special guests and dress them accordingly.

Even though decorating a virtual space has been done before, Nightclub City’s décor oozes style. Nothing feels static: lights flash, objects move, fountains flow, and dancers dance, creating a truly gratifying experience. Moreover, each NPC has its own personality, from the dancing girl that rocks on, to the celebrity, to the jerk that picks fights: each element has its role in making your club the best around. Coupled with a constant stream of new buyable objects, daily giveaways of premium virtual goods, and phenomenal music mixes, Nightclub City seems like a clear choice for the top title, so far, this year.

Currently, Nightclub City continues to grow steadily, with about 4.2 million monthly active users.

The year is far from over, of course. While the pace of new releases on Facebook has slowed drastically, the quality bar has risen far beyond the waves of simple games and their clones that dominated in 2009. We have high hopes for the rest of 2010, so we’ll keep reviewing the latest games with an eye to picking out the best of the best at the end of the year.

"
read more
Posted in: