wd notes

HTML5 In 5 Minutes – A Screencast You Just Can’t Miss!

New HTML5 Form Features

Inspired by webdev radio episode 74 I found three quite nice usability testing tools.

userfly

hosted service

ClickHeat from labsmedia

PHP required on your server, JS on client

Mouse Move Logger

JS app with PHP backend, try the demo, see another article

“The whole thing is coded in javascript using Prototype and script.aculo.us with some php code on the server side.”

Design games are fun activities that are primarily used to provide input to a design problem. You can use design games for all types of design work - websites, intranets, business applications, products and services.

Some CSS frameworks for web forms quick start:

• Formee - fits into any project as it has a structure built around percentage widths which adapts to the space available; 2 CSS files (structure, design)
• RMSforms - switch between horizontal and vertical layout is simple
• Formy - demo does not look well; I will not try this one

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are supporting this, and both in slightly different ways.

Flattr - another micropayments strategy

A Dinosaur Family Explains Information Architecture

http://www.flickr.com/photos/boltron/ / CC BY-SA 2.0

JavaScript is a fully-featured Object-Oriented programming language. On the surface, it shares syntactical similarities with Java and C, but the mentality is quite different. At its core, JavaScript is more similar to functional languages. Inside is a list of JavaScript tips, some offer techniques to simulate features found in C-like languages (such as assertions or static variables). Others are meant to improve performance and explore some of the more obscure parts of the web scripting language.

Fastest way to build an HTML string – James Padolsey

sserrano:

You may think that html5 and css3 is going to become widespread in something akin to a geologic time scale. The truth is that many html5 and css3 features have currently widespread support.

Below, there is an small snippet to track the browser support for these advanced features for your user base, using google analytics and modernizr.

Modernizr is a small footprint javascript library that let you test the support of html5 and css3 features. With the combination of modernizr and analytics custom vars, we can track which percent of our users support a particular html5 or css3 feature.

So suppose we want to know the user base support for: sessionstorage, localstorage, canvas, fonfaces and borderradius.

Our analytics tracking code would look like:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? 
"https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + 
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript" src="/media/js/modernizr-1.1.min.js"></script>
<script type="text/javascript">

try {
var pageTracker = _gat._getTracker("UA-YYYYY-X");

pageTracker._setCustomVar(1, "sessionstorage", Modernizr.sessionstorage , 2 );
pageTracker._setCustomVar(2, "localstorage", Modernizr.localstorage, 2 );
pageTracker._setCustomVar(3, "fontface", Modernizr.fontface, 2 );
pageTracker._setCustomVar(4, "canvas", Modernizr.canvas, 2 );
pageTracker._setCustomVar(5, "borderradius", Modernizr.borderradius, 2 );

pageTracker._trackPageview();

} catch(err) {}</script>

After you append this to your site html body the results are going to appear on analytics under “visitors > custom variables”

Using a similar snippet we found that at www.wegif.com more than 80% of our users support all these features. Cool right?

For more info about how all this works, continue reading at:

http://www.modernizr.com/

http://code.google.com/intl/en/apis/analytics/docs/tracking/gaTrackingCustomVariables.html