eDesign.nl » Usability http://www.edesign.nl Thoughts and concepts on software development Fri, 08 Apr 2011 13:35:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Decoration aid http://www.edesign.nl/2010/08/03/decoration-aid/ http://www.edesign.nl/2010/08/03/decoration-aid/#comments Tue, 03 Aug 2010 14:36:28 +0000 Jurgen http://www.edesign.nl/?p=783 When it comes to designing websites choosing what colors to use is one of the first steps. Nowadays online applications often let users personalize the look and feel of the site by offering a way to customize the colors the website wears. JavaScript and HTML can be used effectively to this end. A problem is arising for component developers using JavaScript: what framework to use? There is MooTools, ProtoType, YUI library, jQuery, etc, etc… This is the reason I developed a standalone color picker. It also works with every JavaScript framework, as it does not depend on one or interferes with one. It is one single .js file, no extra images, css, javascript or whatsoever.

Using it is easy. Basic usage has tree steps.

  1. Include the colorpicker.js in the <head> of the HTML file.
  2. Add the class ‘colorpicker’ to the <input> tag you use in a form for the color to choose.
  3. On document load, initialize the color picker with: ColorPicker.init();

It is as simple as that. Example:

<hmtl>
 <head>
  <title>ColorPicker example</title>
  <script type="text/javascript" src="colorpicker.js" />
 </head>
 <body onload="ColorPicker.run();">
  <form>
   Choose a color: <input type="text" name="color" class="colorpicker" />
   <input type="submit" />
  </form>
 </body>
</html>

Multiple pickers can be added by inserting more <input> tags with the classname ‘colorpicker’ which the standard ColorPicker.init() method all transforms into color pickers.

The manual way to initialize color pickers is by calling:

new ColorPicker(element);

You’ll need to repeat that line for every color picker you have if you don’t want to use ColorPicker.init().

Customizing

The look and feel of the color picker can be modified by adding an configuration hash table as argument to the init() function. This way you can change the colors, borders and language to your needs. For instance, in Dutch the word ‘Cancel’ means ‘Annuleren’. So if I want a color picker on a Dutch website I would change the init() call to:

ColorPicker.init({'language': {'cancel': 'Annuleren'}})

This way you can set parts of the configuration (e.g. only the word ‘cancel’) or the entire configuration by extending the hash table.

Download

You can get the latste version of the ColorPicker from http://projects.edesign.nl/colorpicker/latest/colorpicker.js. The project page is available at http://projects.edesign.nl/colorpicker/.

]]> http://www.edesign.nl/2010/08/03/decoration-aid/feed/ 0 No robots beyond this line http://www.edesign.nl/2010/04/23/no-robots-beyond-this-line/ http://www.edesign.nl/2010/04/23/no-robots-beyond-this-line/#comments Fri, 23 Apr 2010 17:43:30 +0000 Jurgen http://www.edesign.nl/?p=729 Customs passport checkOnline communities are hot. Globally recognized examples are easy to give: websites like Facebook, LinkedIn and are very popular, manufacturers have online fora to have their customers support each other, newspapers let you leave comments on their articles on their websites and you can share everything with tools like Delicious, Digg and Reddit. This development on the Internet supports new possibilities which were unknown before. Of course this also counts for rogues. Spam is a commonly known phenomenon and global annoyance. Beside spamming unwanted messages by mail, spamming the comment boxes and fora is an issue web programmers have to deal with too. Spamming often is automated and this is a feature which can be used to counter spam. The goal is to identify a messenger being human or robot.

For this purpose the captcha was invented. Besides the fact that captcha sounds nice enough to be a buzz word it actually is short for Completely Automated Public Turing test to tell Computers and Humans Apart, although this is a bit contrived. This means that a captcha is a challenge response mechanism but it doesn’t need to be in the form of an image depicting distorted text which has to be copied in a text box which is the most common form of captchas. Creative new captchas can be found, like a transistor image which has to be read.

Technology

Wikipedia mentions a couple of features a captcha must have to qualify as one. A captcha is a challenge-response test between a system and a user of which

  1. current software is unable to solve accurately,
  2. most humans can solve, and
  3. does not rely on the type of CAPTCHA being new to the attacker.

The first one remarks a captcha as temporal. This means that with increasing processing power and increasing insight in artificial intelligence challenges we now consider to be captchas might not be in the (near) future. Philosophically, this means that captchas are a temporary phenomenon because mankind will eventually be able to build robots which are at least as intelligent as humans are. But for now they’ll do.

The second one emphasises the differences we see between humans and robots. This is actually quite an interesting point because mankind actually admits its current limitations in its own intelligence being unable to write software which is able to solve ‘puzzles’ which are easy to solve for humans.

Which bridges to the last bullet on the list. Of course you could just add a simple checkbox labeled “Do not check this box if you are human”. No attacker would think of a spam protection this weak but because of that it might just work. The robot stumbling across your comment submission form does not expect such a protection and therefor cannot bypass it. Although this does not qualify as a captcha because the novelty of the protection will only make the attacker look into it to solve it in an instance. Of course a captcha can be a captcha when it is an innovative challenge but it should not rely on being unknown. Security through obscurity is not security at all.

Processing power and algorithms

As time passes by technology advances resulting in more processing power in both processor quantity and quality and more mathematical developments. These are the engine propelling artificial intelligence development. On the other hand, having this field of computer science developing the struggle for making captchas to tell humans and computers apart becomes harder and harder. Who knows when software becomes as advanced as to be able to not only solve puzzles or identify puzzle types but to be really intelligent and thereby be able to find ways to solve a puzzle without knowing the puzzle’s rules in advance? 20 years? 30? 5?!

Usefulness

Captcha’s can be useful too. The Recaptcha program for instance helps digitizing books by showing snippets scanned from books which they are unable to parse with their OCR software. This way the snippets are ‘decyphered’ by hundreds of people insuring accuracy and helping the system in which it is implemented to be bot-free.

Other examples of captchas might be usefull to the website’s theme such as a math class forum’s captcha challenging users with simple math like 3 + 5 = or 4 * 3 =. Another example of such a situated captcha is Adafruit’s. Adafruit is a website and webshop on the Arduino, which is a do it yourself programmable breadboard. You’ll need to ‘read’ the resistor’s value in order to post a comment.

Adafruit's resistor captcha

Adafruit's resistor captcha makes you slide the four sliders to match the color code on the resistor above.

]]> http://www.edesign.nl/2010/04/23/no-robots-beyond-this-line/feed/ 0