Technorati Tags: animation, beginner, effects, Jquery, Screencast, simple

Check back here for comprehensive code samples which will teach you how to create your very own Google Wave widgets. The ease of use and adoption of the Wave platform will be how developers build for this next generation collaboration tool.

Technorati Tags: create, gadget, google wave, how, Jquery, make, to, widget

Then download the datepicker plugin to jQuery here:

Download jQuery Datepicker

CODE DEMOS:

SIMPLE
TODAY SELECTED

ALL DEMOS

Technorati Tags: date picker, datepicker, jquery datepicker

xGPS 1.2 Released. This looks like promising technology. Can I track my wife?

Check the site

Technorati Tags: 1.2, GPS, iphone, iTouch, xGPS

Very easy to understand process on getting Dreamweaver to talk to MySQL.

Technorati Tags: connect, connect to mysql, dreamweaver, How to, MySQL, Screencast, Video

How to load external images using Flash AS3 Code. Very cool.

Technorati Tags: Actionscript 3, AS3, Flash, How to, Load Images, Screencast

This article will explain in the most basic terms how you can use the JQuery API to insert form values to a MySQL database using no form actions, just JQuery. Pretty cool stuff.
I wanted to create a CSS/Ajax powered database management system and the code you see here is the very streamlined version of this effort.

Download JQuery

Download all the files that I refer to in this tutorial.

Let’s begin.

You will need a copy of jQuery running on your server in order for this tutorial to work. Check the link above.

You will need to create a MySQL database called ‘name’ first then use the SQL below to create the table called ‘names’ using the provided SQL:
DROP TABLE IF EXISTS `name`.`names`;
CREATE TABLE `name`.`names` (
`nameID` int(10) unsigned NOT NULL auto_increment,
`name` varchar(45) NOT NULL,
`ts` varchar(45) NOT NULL,
PRIMARY KEY (`nameID`)
) ENGINE=InnoDB AUTO_INCREMENT=38 DEFAULT CHARSET=latin1;

Next, create a PHP file to connect to your new database. NOTICE: This has not been proven to be safe from SQL injection.

ndb.php

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_ndb = "localhost";
$database_ndb = "name";
$username_ndb = "root";
$password_ndb = "";
$ndb = mysql_pconnect($hostname_ndb, $username_ndb, $password_ndb) or trigger_error(mysql_error(),E_USER_ERROR);
?>

To start off, we create a class which will define the properties and the method of the ‘name’ class. In this case, the method simply echos the users name and the timestamp when the class is invoked.

class.name.php

<?php

?>

Instead of using $name, we use $this->name within the method. This is how properties are passed through a method when using PHP classes. This starts to make sense very shortly, I promise.

Next, create a PHP 5 insert class:
class.db.php
<?php

?>

The purpose of this class is to grab the SQL from the implementation PHP file – which I will show you next. Call me crazy but I usually save an implementation file with a prefix of ‘i’.

i.Name.php

<?
include_once('../classes/class.name.php');
include_once('../classes/class.db.php');

?>

What this implementation file does is rather simple. It grabs the values from the JQuery script, instantiates the object from the name class and defines the values for the SQL. It then does the most important thing of all. It echos the results back which then gets picked up by the JQuery script below. See if you can find out how it does it:

jgo.php

$(document).ready(function(){

}); //end DOC

The JQuery’s job here is to collect the variables from the HTML markup. Why we do not need a form here on the markup is because JQuery ‘listens’ for the click event to fire on the “a.sendName” css class, once it does, it passes the markup values to this JQuery script. Gotta love that. It then assigns the values to a JSON string which then gets sent to the implementation PHP file “i.name.php”. The implementation file echos out the results. The “.html” method in the JQuery above parse the echo and displays this into the “#loadName” DIV on the markup. I have to say, I like this and you should to .

Here is the markup:

name.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jgo.js"></script>
<title>Untitled Document</title>
</head>

</div>
</body>
</html>

Download all the files

The code and the article was written by Dana Martinelli

Technorati Tags: Classes, How to, Insert, Jquery, MySQL, PHP

Learning the success rate of new user navigation conventions for the web that work well is difficult. There is a free PHP powered tool that can help with this analysis from LabMedia, called ClickHeat. Being able to peer into navigation trends helps IA and UX research tremendously.

Adding an audio component would be a great addition to this tool. Being able to add this type of user feedback within an online tool like Protoshare would be a great step forward as well.

Download It

- on the browser’s client: Javascript (tested on Firefox 2.0, Internet Explorer 6 and 7, Konqueror…)
- on the server: either Linux or Windows (since ClickHeat 1.3 release), Apache or Lighttpd (other may work fine), PHP, the graphic library GD2 (PNG support needed).

View the demo
http://www.labsmedia.com/clickheat/index.php
(login/password: demo/demo)

Technorati Tags: Click Maps, Clickmaps, Heat Maps, Heatmaps, Study, Usability Studies, User Testing

Download Here:

axure_stencils_1_acleandesigndotcomrp

Includes stencils for:
Form widgets
Calendar
Rate this and more…

Very nice selection. Hope to see more.

Technorati Tags: Axure, Design, Interaction Patterns, Patterns

Much of our research went onto help inspire the Whirl Wind application that NASA uses today.

We also helped innovate the sharing and the distribution of custom annotated 3D worlds via a world wide network of collaborators. The application is no longer available to use but it is worth learning about as it relates to the user experience.

Learn More Here:
Eventscope

From the site:

A multidisciplinary team of experts in visual design, educational curriculum design, cognitive psychology, software engineering, and geology/ planetary science use interactivity, real data, education-reform and cognitive psychology concepts to extend the walls of the classroom to far away places.

Technorati Tags: Life on Mars, NASA, Robotics, Virtual Reality Tool

Download JQuery

Download all the files that I refer to in this tutorial.

Let’s begin.

You will need a copy of jQuery running on your server in order for this tutorial to work. Check the link above.

You will need to create a MySQL database called ‘name’ first then use the SQL below to create the table called ‘names’ using the provided SQL:
DROP TABLE IF EXISTS `name`.`names`;
CREATE TABLE `name`.`names` (
`nameID` int(10) unsigned NOT NULL auto_increment,
`name` varchar(45) NOT NULL,
`ts` varchar(45) NOT NULL,
PRIMARY KEY (`nameID`)
) ENGINE=InnoDB AUTO_INCREMENT=38 DEFAULT CHARSET=latin1;

Next, create a PHP file to connect to your new database. NOTICE: This has not been proven to be safe from SQL injection.

ndb.php

<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_ndb = "localhost";
$database_ndb = "name";
$username_ndb = "root";
$password_ndb = "";
$ndb = mysql_pconnect($hostname_ndb, $username_ndb, $password_ndb) or trigger_error(mysql_error(),E_USER_ERROR);
?>

To start off, we create a class which will define the properties and the method of the ‘name’ class. In this case, the method simply echos the users name and the timestamp when the class is invoked.

class.name.php

<?php

?>

Instead of using $name, we use $this->name within the method. This is how properties are passed through a method when using PHP classes. This starts to make sense very shortly, I promise.

Next, create a PHP 5 insert class:
class.db.php
<?php

?>

The purpose of this class is to grab the SQL from the implementation PHP file – which I will show you next. Call me crazy but I usually save an implementation file with a prefix of ‘i’.

i.Name.php

<?
include_once('../classes/class.name.php');
include_once('../classes/class.db.php');

?>

What this implementation file does is rather simple. It grabs the values from the JQuery script, instantiates the object from the name class and defines the values for the SQL. It then does the most important thing of all. It echos the results back which then gets picked up by the JQuery script below. See if you can find out how it does it:

jgo.php

$(document).ready(function(){

}); //end DOC

The JQuery’s job here is to collect the variables from the HTML markup. Why we do not need a form here on the markup is because JQuery ‘listens’ for the click event to fire on the “a.sendName” css class, once it does, it passes the markup values to this JQuery script. Gotta love that. It then assigns the values to a JSON string which then gets sent to the implementation PHP file “i.name.php”. The implementation file echos out the results. The “.html” method in the JQuery above parse the echo and displays this into the “#loadName” DIV on the markup. I have to say, I like this and you should to .

Here is the markup:

name.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jgo.js"></script>
<title>Untitled Document</title>
</head>

</div>
</body>
</html>

Download all the files

The code and the article was written by Dana Martinelli

Technorati Tags: Ajax, Database, How to, Jquery, MySQL, PHP 5, SQL, Tutorial

But let us be honest, the blackberry is meant for business emailers. Blackberry users are not fundamentally in need to be wow’d or do they need or want to play virtual pool with multiple fingers while waiting for their Lexus to get detailed.

I think most Blackbery users want simplicity. They want their email and more recently want their maps and GPS. Build a rock solid experience around that goal. Don’t muddy up the experience by providing too much. Don’t get saturated by technology that is not in your game. Push the envelope in other places like:

IM/IRC chat interfaces
Super easy teleconference tools
PDF viewers and ways to EDIT pdf documents
Stock management tools
Make people yern for a ‘real’ Blackberry keyboard (don’t virtualize it. Update: too late)

“The virtual keyboard produces a clicking sound and sensation when pressed, which makes it feel very similar to typing on an actual keyboard.”

Will give them kudos for trying if it works out.

Cater to your business market and innovate there. Don’t go the iPhone and Android path. Who cares about the music platform for a Blackberry. Focus on the business.

Technorati Tags: Blackberry, Blackberry Storm, Innovate, iphone, Mobile, multi-touch interfaces, Sucks

http://www.webmotionuk.co.uk/jquery/image_upload_crop.php

Technorati Tags: Jquery

Article written for TEQ Magazine April 2008

Coordination, if done with accuracy, can be key to a successful outcome on many levels. It is most difficult to facilitate coordination from disparate processes when each player has his own methods and time lines. Finding tools to help with this are rare. As interactive design problems become more complex, the teams that drive the solutions must evolve to meet those needs.  Compounding this is the reality that is now common to be working with teams in other time zones and with people who speak different languages. Managing a coordinated effort is vital to the success of a project. For interactive solutions to be solved timely and precisely, they need to fit within multi-layered metaphors and support elegance and sophistication both visually and programmatically. Most importantly, the solutions need to support the goals of the sponsor, stakeholder, or business need.  For all of this to work well, there is a need for a central system to bridge relationships between each independent group. If used strategically, I find a tool like Axure can play that vital role.

In my experience, Axure can work to satisfy the communication efforts between multi-faceted groups in a seamless way. Before I started working with Axure back in 2005 on the Hollywood.com redesign, I was using traditional tools like Visio, Illustrator, and Dreamweaver to capture my use cases and web simulations for user testing with Nielson Norman. The three rounds of intensive testing were mostly successful and my simulations worked well, but the process was laborious and time consuming. It had taken 5 months from start to finish (yes, you can mostly blame NNG for this) but naturally I wanted to expedite the process. So, I went searching for a tool to help in the user testing phase of a project. I found Axure by chance and after my first few hours with it, I knew I had a tool to not only help in rapid user testing, but one that would enable me to help bridge many of the efforts I was using other tools for. Not only could I quickly build wireframe simulations, but the ability to capture functional specifications at the object level and then produce a complete word document with all of this intact, automatically, sent me to IA nirvana.

Soon after my discovery, I showed my Director of IT a fully working simulation of one of his .NET modules.  He had coded this module in the morning, and by the end of the day I had a fully working, interactive simulation based on his code, ready for first level user testing. He purchased the tool ten minutes after my presentation. We both were hooked and became very efficient collaborating together from that point forward, increasing our lifecycles by at least 30%. After a few years of daily usage with this tool, some best practices have emerged which I’d like to share.

What It Is Not

I will begin with what Axure does not do. It is not a tool that can export working production ready HTML. Although it may seem like it can, it cannot. It is not the best flowcharting tool. It has stencils to create flowcharts and use case scenarios in a crunch, but you soon revert back to standard tools like Visio, as it is, of course, more powerful. Axure does not have the ability to version control well (however, this may be addressed in future releases). If you have teams of IAs working together on simulations or wireframes it would be ideal to have check-in, check-out capabilities specific to users, much like Visual Source Safe, Subversion, or Harvest. It does not work on Mac OSX, since it is a .NET application and it appears they are not interested in pursuing the Macintosh option. I would suggest the developers of this application to port to Linux using Mono if at all possible. Axure will not change existing methods and protocols overnight within your organization, but it can be successfully introduced into an existing production process at any point, no matter how big or small your project may be.

Best Practice

After using Axure successfully with very aggressive deadlines, as well as in slower paced research environments, I have discovered many benefits this tool brings to the people involved. I enjoy IA as a career path because of the satisfaction I get from seeing people work together to build something. At first glance, this complexity seems impossible to build. The challenge in this is what drives me as an IA. Fine tuning efficiency is critical to making a project a success when it feels large and unmanageable. I find that the IA is not only there to build relationships between systems, but to build efficiencies between individual skill sets in order to reduce risk.

Where Axure shines is in the Agile/SCRUM development process, especially for remote team collaboration. From my experience, the Agile method morphs from team to team, but is the same in essence. It is in the iterative approach to software and web development that Axure works really well. When I start a project, I start at the 1.0 iteration. This is primarily a very low-level abstraction of the structure and navigation – I call this the XO document. As the fidelity increases and the Axure project grows into a more mature document, the iterative tracking of each instance of the project becomes very useful. I can go back to 1.4 or 2.4 of my document with ease. With HTML publishing built into Axure, I can publish to a live project blog where the client can track the history of the development (every client falls in love with this, by the way). In parallel to the publishing of the HTML prototype iteration, Axure can generate a Microsoft Word Document of the same interval which I save as a PDF for client download. This PDF is the main source of all client feedback, since they can add comments directly within the document. The client can explore the simulation, track, and comment on the functional specifications within the PDF. This is a great process for remote team coordination and Multilanguage constraints. There are times within a teleconference where I may choose to update the project blog in real-time and have the client refresh their browser to see live changes we just reviewed (clients love that too).

Summary

Axure is not a complete replacement to your standard design, documentation and development toolkit, but it is a fantastic way to aggregate these documents and share them quickly and effortlessly. For fast paced production environments where research and usability tends to be a gift and not a mandate, the more quickly you can get your product into a state for user reaction and engagement, the better. Axure can do this for you.

Technorati Tags: Axure, Axure Software, iRise, Protoshare, Prototyping, Simulation