Archive: February 2007

Book Review: Beginning Javascript with DOM Scripting and Ajax

Sholom Sandalow, Wednesday, February 28, 2007 @ 2:02 pm

Despite its title, Beginning Javascript with DOM Scripting and Ajax is not for those just starting out in web development.  What it is, is a great resource for those that already have some experience coding dynamic web sites.
The book explores the principals of DOM scripting (using the Document Object Model) to build dynamic pages the right way- with standards compliant code that maintains the separation between content and presentation.
The early chapters are devoted to giving the reader a quick overview of Javascript.  chapter one takes a look at basic syntax and simple functions.  Chapter Two covers datatypes and conditionals.  If you don't know Java script, you might want to start with something else, such as Beginning JavaScript Second Edition
 
  by Paul Wilton.  Some of the concepts and techniques used later on in the book require greater familiarity with Javascript than a begginer would have.

After the brief introduction to Javascript, the book tackles the DOM, and specifically how you can use it to create dynamic pages.  Chapter Four describes how your scripts can access as well as create HTML elements using the DOM.  Chapter Five is all about the Javascript interaction with CSS (Cascading Style Sheets) and how to set up scripts that allow designers to change the presentation layer of web pages without manipulating the content layer.  There are some great examples here of standards compliant scripting, including applying and removing classes and whole style sheets dynamically.  It also contains some examples of event handlers that help keep presentation and content separated.  Chapters Six and Seven talk about how Javascript can be used in a standards compliant manner to interact with images windows and forms.  I found the image rollover and slide-show scripts to be very useful.

From chapter Eight on, the book deals with Ajax, and specifically how you can use Javascript to  build objects that can dynamically interact with a back end.  Chapter Eight is a good introduction to the basic idea of Ajax, which is a term that was coined by Jesse James Garret in a February 2005 article, and is short for Asynchronous Javascript and XML.  The chapter also provides quite a few useful examples of Ajax in action, including a script that displays RSS feeds generated from a PHP file on the server, a good Connected Select Boxes script, and some Dynamic Menus.  It also includes a good refrain for those who are thinking about implementing Ajax into their web site.  If there's no good reason to do it, don't do it.

Chapter Nine shows you how you can use Javascript to validate incoming (from the server) and outgoing (from the user) data, and in chapter Ten, the author puts many of the earlier principals we learned together by walking us through the creation of a dynamic Ajax driven image gallery.

If you are looking to either learn more about creating standards compliant dynamic web sites, write code that allows for easy maintenance by designers, or add rich interactions to your site via Ajax, Beginning Javascript with DOM Scripting and Ajax is a great resource.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

The Expert List - An Idea to Improve Online Social Bookmarking

Dietrich Kappe, Monday, February 26, 2007 @ 6:00 am

The so-called rule of 150, states that the size of a genuine social network is limited to about 150 members (sometimes called Dunbar's number). The rule arises from cross-cultural studies in sociology and especially anthropology of the maximum size of a village (in modern parlance most reasonably understood as an ecovillage). It is theorized in evolutionary psychology that the number may be some kind of limit of average human ability to recognize members and track emotional facts about all members of a group. However, it may be due to economics and the need to track "free riders", as it may be easier in larger groups to take advantage of the benefits of living in a community without contributing to those benefits. -- Wikipedia entry on Social Network

Peter Szinek has published an excellent article on some of the shortcomings of social bookmarking as it exists today (see Problems of Social Bookmarking Today - Part One). Two of his more compelling points are those of information overload (too many articles, that disappear off the "top" page too quickly), the pumping up of vote counts by cliques, and the lack of differentiation between experts and non-experts when counting their votes. He admits that many of his solutions are impractical, unfortunately, but then again not many of us have answers to these problems. His succinct statement of the problem is worth quite a bit, however. I've blogged about some of these issues in the past as well (see Web 2.0, Communism, Pet Rocks and the Wisdom of Crowds and More from Hinchcliffe on Web 2.0), and some of the issues I've brought up about the Free Rider problem and the spread of bad actors do explain some of the issues at the root of Peter's observations.

The "rule of 150" cited above goes a long way toward explaining why online communities become dysfunctional as they grow (from Usenet to Digg). It simply becomes harder to police all of the free riders. So, what to do? How can we make the rule of 150 work for us?

I think part of the answer lies in one of the observations that Peter makes in his article:

In my opinion, it is not right that if a 12 year old script kiddie votes down an article and an expert with 20 years of experience votes it up, their votes are taken into account with an equal weight. OK, I know there is peer review and if the 12 old will do a lot of stupid moves, he will be modded down - so he will open a new account and begin the whole thing again from scratch. On the other hand, the expert maybe does not have time to hang around on digg and similar sites (because he is hacking up the next big thing instead of browsing) and therefore he might not get a lot of recognition from his peers on the given social site - which does show that he is an infrequent digg/dzone/whatever user, but tells nothing about his tech abilities.
Proposed solution: I think it is too late for this with the existing sites, but I would like to see a community with real tech people, developers, enterpreneurs and hackers of all sorts. How could this be done? Well, people should show what they did so far - their blog, released open source software, mailing list contributions, sites they designed or any other proof that they are also doing something and not just criticizing others (It seems to me that always those people are the most abrasive on-line who do not have a blog, did not hack up somehing relevant or did not prove their abilities in any relevant way). This would ensure also that only one account belongs to one physical person. I know that this may sound too much work to do (both on the site maintainer's and the users' side) but it could lay a foundation for a real tech-focused (or xyz-focused) social site . Of course this would not lock out people without any tangible proof of their skills - however they votes would count less.

What Peter seems to be proposing is a smaller community where the members all know one another, and those that are not known are not given much weight by the voting system. I think Peter is right, for the community at large, this does sound like too much work to do, sort of like a giant public key exchange, where the web of trust evaporates as the network grows.

The other part of the answer lies in asking, "why can't my social network be limited to just 150 people?" If I had 150 people I really, really trusted, then I would have pretty good confidence in the stuff they recommended. The downside is, of course, that 150 people will never discover what a horde of tech nerds on dzone discover. But if I could combine the wisdom of the crowd with the trustworthyness of my small clique of experts, I'd be cooking with gas! The key insight here is that not every article or post should be ranked the same for two different people. We are interested in different things, therefore the things on our "top" page should be different.

One way of achieving these personalized rankings is by using something like collaborative filtering. The basic idea is that you use the votes you have cast (stories dugg or dzoned or whatever) to calculate a distance between every two participants on the social bookmarking system. You calculate a predicted score (how much you will like something) for individual A by averaging all the votes by the other individuals, weighted by how far away they are from individual A -- further away means their vote counts less.

There are lots of algorithms and functors for computing recommendations, but they all share one thing in common: they are horendously expensive to compute, since they are O(nm), where n = number of individuals and m = number of rated items (yes, even if we cluster with something like kmeans first). They all also tend to have problems with sparse datasets, i.e. where most of the items have not been voted on by most of the participants.

Because of these problems and others, I think means of tacit (i.e. the user doesn't have to explicitly do anything) social network building are impractical. Instead, we should consider something that the social networking sites have been doing for a while (see LinkedIn for an example), namely having an explicit list of contacts or "friends," although here they may be more accurately referred to as "experts."

How would this explicit list of experts be leveraged to give you better rankings? You would use these experts to weight votes:

1. First, everyone in your experts list has their vote count as 1.
2. Next, everyone who is in your experts' expert list ("a friend of a friend....") has their vote count .5 (unless they already are in your list).
3. Next, everyone in the next level out has their votes count .25.
4. Everyone else's votes counts .1.
5. Add them all together and you get the vote total for a particular item for you (someone else with a different list may have

Now we can tweak this formula to our heart's content (e.g. the decay is linear and goes out to a depth of 5; people who you link to by several paths get extra weight, etc), or even let the end use configure the exact formula by means of a number of parameters, but the principle is sound -- the people you respect and the people they respect in turn are more likely to recommend things that interest you.

Last, limit the number of individuals a user can have in his expert list to 150. If you have more than that, you can't possible know all of them and their "emotional facts."

Now I can see a few objections to this proposal:

1. The votes are too expensive to calculate - I admit that it is more expensive than just precomputing one-size-fits-all totals, but with some judicious use of precomputing, caching and efficient database design, I think this is doable. After all, not every use will log in at the same time or want to see every item back to the beginning of time. And, as long as we are not searching or sorting historical results by rankings, we should be fine.
2. Where is the sense of community if we all see different things? - what is the value of that community if we don't feel we are a part of it? I've long since stopped using digg, because I'm not interested in "what's hot." The value of social bookmarking is in aiding people in finding content they are interested in, not in making us all look at the same stuff.
3. What about the "Digg Effect?" Won't this diminish the power of the social bookmarking sites that adopt it? - will fewer people try to game the system if the audience is ultimately smaller? Yes. Probably. Fewer people will try to use the bookmarking sites as a way to lob their press releases into the net. But I think more people will find these sites useful. Frankly, I see the whole "Digg Effect" as a symptom of the free rider principle in action.

Consider this a modest proposal. For one, I would like to see dzone, the most progressive and tech-focused of the social bookmarking sites, experiment with this.

Technorati : collaborative filtering, free riders, rule of 150, social networking, web20

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

Design Fiction as Fact

Elyse Sanchez, Friday, February 23, 2007 @ 2:56 pm

Influenced no doubt by his experience as a conceptual design leader at IDEO, branko Lucik has created the “non object idea/philosophy/point of view/[and soon-to-be published] book” in what is touted as “the new genre of Design Fiction.” Lucik asks us to take the leap into a design environment free not only of the constraints and boundaries of factual design processes, but even the techniques most of us have come to rely on for guidance and inspiration.

The book’s website features a preview application of Design Fiction, the CUin5 telephone. The philosophy and product are showcased in a slick, very-nearly-sincere presentation which incorporates virtually every content and visual cliché currently available to today’s marketers. The manifesto preceding the product’s glamour reveal is stark and faux-provocative. The phone itself, whose image is zoomed upon and examined from every angle as though it were an inanimate subject of the paparazzi, is simultaneously plausible and ridiculous in design.

This ambiguity of product concept is subtly underscored by the rationale offered in explanation for the CUin5. The product, explains Lucik, pushes a typical set of product specifications “to the level of absurdity.” The rectangular handset features a keypad, microphone and speakers on each of its six planes, enabling users to access the device from any side without first needing to orient it properly. Imagine grabbing it quickly, Lucik muses—from inside your bag, from off a shelf, from under a car seat –-and freely interacting with it without needing to turn it over or align it right side up?

The operative fiction here—which, unfortunately, is too often fact in the world of our practical work—is the unchallenged assumption that product specs drive design exclusively; that, in fact, users are clamoring for a grab-and-go phone that is patently unusable. It would appear that the worlds are inverted—that in real life, bowing to the influences of poorly conceived business and technical requirements, we create artifacts of fiction.

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

Web Accessibility is Good Business

Alice Toth, Friday, February 23, 2007 @ 9:49 am

Over the last few years, more and more basic services have been moving to the Web (banking, paying bills, canceling utilities, etc.) Whether the move is initiated as a cost-saving device or as a way to make the services more readily available, the fact is that moving every day "life administration" online means accessibility gains in importance.

Web accessibility is a broad topic but in essence it means your pages are accessible by people using a wide range of user-agent software and devices, in addition to the standard web browsers. The foundation for achieving accessibility is separating out the content and structure from the presentation and behavior of a page.

Use semantic markup to structure the document.

Semantic markup provides a framework for explicitly describing things. It is descriptive enough to allow machines to recognize it and make decisions about navigating a page. For example, the use of header tags <h1> allows users of screen readers to scan the headers on a page. Or a <strong> tag allows an oral user agent to apply a different voice for emphasis. An added benefit is that semantic markup still gives the content visual hierarchy even if the external style sheet fails to load.

Use CSS instead of presentational markup.

Style sheets define presentational characteristics. Presentational markup (e.g., <font>) does that as well, but it does not allow a user to adjust the presentation to suit their needs. When presentation is defined in a style sheet, it allows different users to override the author's styles with their own. This way, a visually impaired user can display a large text alternative by defining his or her own user style.

Ideally you want to use external style sheets so the presentation information for the site is held in one place and can be updated quickly.  In addition, external style sheets enable you to have consistency across pages and  implement global changes in just one file.

The Web Accessibility Initiative of the W3C, of course, has extensive guidelines and details on how to achieve web content accessibility. It's worth reviewing and implementing because after all, you want your site to reach the largest possible audience. Web accessibility increases the odds of doing just that

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

BJAX - Hacking Google Maps with Bookmarklets

Dietrich Kappe, Thursday, February 22, 2007 @ 7:00 am

How many of us have passively watched a film or read a book or used a web site and said to ourselves, "That could have been better. If only they had changed this aspect or that, it would have been so much better." Then we leave the theatre, close the book or navigate away from the web site and go on about our vaguely dissatisfied lives.

While many of us won't be able to edit films or adapt books anytime soon (sure, sure, some people are mashing up films, and fan fiction has been around for a while, but it's actually kind of hard and time consuming to do), but people have been hacking web sites with tools like Greasemonkey for a while now, but it's starting to get easier to achieve powerful results with the adoption of Ajax.

One of the neat things about Ajax apps that use a well defined API is that it is pretty easy to modify their behavior using BJAX -- Browser Extensions and Ajax. Google maps is an excellent example of this sort of API; if you can predictably get ahold of a reference to a Google maps object, you can manipulate it in a myriad of ways.

One of the things I hate about many mapping sites -- those that display information on real estate, restaurants and coffee shops -- is that they don't display important navigation information, such as the locations of subway stops. Trulia is a representative example of such a site. It's a handy way to search for realestate that is for sale, by Zipcode and various other parameters. One of the things I found myself wishing for over and over again was a visual display of El stops.

The elevated lines in the map above are barely visible as little gray hash lines, and forget about seeing the stations. But adding lines and markers to this map is pretty simple if you know the Google Maps API.

Drag the following link, CTAMap (see this entry to see how the Javascript for the bookmarklet is done) to your toolbar (or bookmark it if you are using IE). Now search again on Trulia for properties in Chicago (try 60660 for a Zipcode), then click on the bookmarklet. You should see El lines and stations now on this map (see below). Until Trulia adds this sort of functionality, this is one way of making their service more useful.

The Javascript that populates the map can be found here. Note that this code searches the global scope object for a GMap2 object to a depth of one property (variable and variable.child) and uses this object to manipulate the map. This bookmarklet works with Trulia, HousingMaps, but not maps.google.com itself. I'll have to do a little bit more spelunking to find the object there and in a few other recalcitrant site.. Below is a sample of the code that is included.

map.addOverlay(new GPolyline([
new GLatLng(41.794771, -87.618222)
, new GLatLng(41.780238, -87.615488)
, new GLatLng(41.780415, -87.605783)
], "#006400", 5));
map.addOverlay(new GPolyline([
new GLatLng(41.794771, -87.618222)
, new GLatLng(41.779229, -87.644781)
, new GLatLng(41.778943, -87.664221)
], "#006400", 5));
map.addOverlay(CTAMap.createMarker(41.910821, -87.649403, "North & Clybourn Station: 1599 N. Clybourn Ave., Chicago, IL 60622"));
map.addOverlay(CTAMap.createMarker(42.019375, -87.672232, "Howard Terminal: 1649 W. Howard St., Chicago, IL 60626"));
map.addOverlay(CTAMap.createMarker(41.874265, -87.627675, "Harrison Station: 608 S. State St., Chicago, IL 60605"));
map.addOverlay(CTAMap.createMarker(41.97327, -87.658443, "Argyle Station: 1118 W. Argyle Ave., Chicago, IL 60640"));
map.addOverlay(CTAMap.createMarker(41.891447, -87.628078, "Grand Avenue Station: 521 N. State St., Chicago, IL 60610"));
map.addOverlay(CTAMap.createMarker(41.868119, -87.627398, "Roosevelt Station: 1167 S. State St., Chicago, IL 60605"));
map.addOverlay(CTAMap.createMarker(41.883696, -87.627891, "Washington Station: 128 N. State St., Chicago, IL 60602"));

The same thing could be done with the train lines of other cities, bus lines, or other important geographic features.

So, the next time you find a web site or application you think comes up short, don't just throw up your hands, make it better with BJAX.

Technorati : ajax, bjax, bookmarklets, google maps

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Pro CSS Techniques: Book Review

Alice Toth, Tuesday, February 20, 2007 @ 10:40 pm

In Pro CSS Techniques, Jeff Croft, Ian Lloyd and Dan Rubin decided to take a real-world approach to CSS and write a collection of techniques that can be incorporated into actual projects.  They discuss CSS maintainability, browser compatibility, using CSS' inheritance and specificity all with an eye to practicality. They provide enough background with example to explain why CSS works, how it works, when it should be used and when workarounds needs to be employed.

What is isn't
This is not an introduction to CSS and it's expected that you can read XHTML code snippets. And if you're looking for clever, experimental CSS to wow your instructor, this is the wrong book for you. Pro CSS Techniques takes a practical approach to incorporating CSS into real-world projects (and yes, they do discuss recalcitrant browsers and workarounds).

What it is
This is a very handy book to have in your library. It’s a collection of techniques, thoughts and ideas that can be put to use immediately. The initial chapters give a good background on CSS and the language of style sheets, getting into such details as universal star selector, sibling selector types and how the rules and selectors interact (it’s all about the cascade). One chapter is devoted to hacks and workarounds with specific examples on adjusting for IE6 and IE7's "fixes". Yes, coding to standards is what we aim for, but when the browsers fall short of standards, workarounds are used. And that's where the practicality of this book comes in handy.

Should I get it
If you've learned CSS on your own or by viewing others' source code or picking up tidbits and hints from articles and blogs, this book will round out your knowledge nicely. It gives a good explanation of the aspects of CSS and how you can use it for layouts, typography, and form elements. The appendices are a handy reference for CSS properties, selectors and browser compatibility (including IE7). And the chapter on troubleshooting, "Everything Falls Apart", is a good guide to solving conflicting CSS problems.

Summary
Pro CSS Techniques is a valuable resource that offers helpful techniques applied to real-world projects. In addition, the authors give enough detail on the background and explanation of CSS to fill in any knowledge gaps you may have.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Ajax and Design

Alice Toth, Monday, February 19, 2007 @ 4:54 pm

Some random thoughts on Ajax and design.

Don’t design your page around Ajax. Armed with the same user-centric methodology you’re (hopefully) using today, you’ll first design the page and then see where Ajax can be added to enhance the interaction behavior. Start with the wireframes, which detail the page structure and content layout. Detail the wireframes by adding in the page and/or element behavior as you’ve always done. From there, evaluate the design and determine where Ajax can be used on the page to enhance the user experience.

One thing to keep in mind is that Ajax is best leveraged as an enhancement that gracefully degrades whenever possible. First defining the behavior of a page and then adding in the enhancement is one way to ensure it'll work in user agents that don’t accept client-side scripting, such as some mobile devices.

So why use it? Well, one nice thing about Ajax is that it gives the illusion of speed. It allows the browser to display information onscreen while continuing to query and receive data in the background. The user doesn’t have to wait for a page refresh before seeing new information. Because the browser didn’t have to wait for the entire results set before rendering data, the users perceives the site as being quick.

This illusion of speed, however, can backfire by confusing the user since they might not realize anything actually happened. Here’s where some basic usability needs to be tied into Ajax. Let the user know when something changes on the screen. Display a success message, highlight the new information, change from form elements to text, etc. What you do, of course, depends on the widget involved, page design, etc. My point is that you need to visibly indicate to the user that their action was received and acted upon.

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

ZK Now Supports Javascript, Groovy, Ruby

Dietrich Kappe, Monday, February 19, 2007 @ 6:00 am

As promised, the latest release of ZK (ZK 2.3 RC) now supports more languages in zscript than just Java. It now supports Javascript, Groovy and Ruby. Futhermore, you can easily add support for a new language in half a day (maybe with some practice, no?) by extending a simple interpreter class. That's assuming, of course, that a Java-based interpreter already exists for the language.

For those of you not familiar with ZK, it is a Ajax framework that has you write your application logic on the server-side and treats the browser as a simple display server (as opposed to client-side frameworks that implement lots of application logic in the browser and treat the server more as a collection of web services). You write your application using ZUML, an XML-based markup language, assembling interface components in a way very similar to the desktop GUI component/event driven model. You tie your app logic into the markup language using zscript statements:

<window title="Fileupload Demo" border="normal">
<image id="image"/>
<button label="Upload">
<attribute name="onClick">{
Object media = Fileupload.get();
if (media instanceof org.zkoss.image.Image)
image.setContent(media);
else if (media != null)
Messagebox.show("Not an image: "+media, "Error",
Messagebox.OK, Messagebox.ERROR);
}</attribute>
</button>
</window>

In the sample above, we are using Java as the scripting language. Now you can use Ruby, Javascript or Groovy in it's place. Realize that scripts written in these languages are executed on the server, not the browser.

Technorati : ajax, groovy, javascript, ruby, zk

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

The Business of Ajax - Google’s Ajax Search API

Dietrich Kappe, Thursday, February 15, 2007 @ 6:00 am

Google actually relies on our users to help with our marketing. We have a very high percentage of our users who often tell others about our search engine. -- Sergey Brin

So spake one of the co-founders of Google. But what happens when your users start to tell others about your search engines in ways that you don't like? When they present your search results in ways that hurt or confuse your brand? You would probably try to control how those users used those results. That seems to be what Google has done with the release of their new Google Ajax Search API.

Somewhat lost in the hype around the release of the Ajax API was the discontinuation of the Google SOAP Search API. It's still available to existing subscribers, but no new ones are being signed up. To see why this discontinuation is an exercise in brand discipline, you just have to look at the terms of use for the Ajax API:

You agree that you will not, and you will not permit your users or other third parties to: (a) modify or replace the text, images, or other content of the Google Search Results, including by (i) changing the order in which the Google Search Results appear, (ii) intermixing Search Results from sources other than Google, or (iii) intermixing other content such that it appears to be part of the Google Search Results; or (b) modify, replace or otherwise disable the functioning of links to Google or third party websites provided in the Google Search Results.

The key terms here are that the order and appearance cannot be modified. And that is the essence of the Google brand: the order of the search terms. Fortunes are made and lost based on Google search position. Business plans are build around it. Millions of people around the world use the top ten results to find information, guide purchasing decisions, and so on. Mess with that order in some consistent way -- in some, god forbid, way that people find valuable -- and you've lost control of your brand, who you are, and likely your ability to advertise.

Now, with the new API, you can only use and display Google data inside a tightly circumscribed, parameterized boundary. Their order, their look and feel, their ads, their brand.

Of course there are many other ways of presenting search results. Many of the more interesting.ways to present the data reorder the results according to other criteria or third-party data (like other search results), or even dispense with a linear order. Now if you want to pull in search data and manipulate it in this way, you're going to have to use the Yahoo! REST API's. But will Yahoo! follow suit and get rid of their general API's in favor of brand-preserving Ajax widgets? Dave Megginson doesn't think so, but sees some clouds on the horizon.

Data APIs are not going to disappear, of course. AJAX widgets don't allow mash-ups, and some sites have user bases including many developers who rely on being able to combine data from different sources (think CraigsList). However, the fact that Google has decided that there's no value playing in the space will matter a lot to a lot of people. If you care about open data, this would be a good time to start thinking of credible business cases for companies to (continue) offer(ing) it.

I view this as a Hertz vs Avis opportunity for Yahoo! -- "we try harder" with web services. Where Google might have been the first choice for many developers, now many will build the Yahoo! API's into their applications and their frameworks. It takes just a few common plugins for packages like Drupal to boost market share.

Anyone want to buy a slightly used copy of "Google Hacks?" Drop me an email. I'll be busy helping Yahoo!'s marketing by telling other's about their search.

Technorati : ajax, google, search, web services, yahoo

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

101 Ideas for JSONP - Idea #2: Wrap XML in JSONP

Dietrich Kappe, Monday, February 12, 2007 @ 6:00 am

Sometimes you have some Javascript code, either something you've already written or a third-party library (like this XSLT library) that wants and expects XML. You don't want to rewrite the whole thing, so it would be nice to be able to adapt these without doing a whole lot of work. Once you realize that you can process an XML document from a string, not just a file loaded using XHR...

JSONPIdeas.parseXML = function(xmltext) {
var doc;
// code for IE
if (window.ActiveXObject)
{
doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(xmltext);
}
// code for Mozilla, Firefox, Opera, etc.
else
{
var parser=new DOMParser();
doc=parser.parseFromString(xmltext,"text/xml");
}
return doc;
}

...the solution is obvious -- just wrap the XML as a string inside a JSON object.

The approach to doing this is even simpler than for our previous example. We simply proxy the web service and escape double quotes, backslashes, newlines and carriage returns and wrap it in a JSON object:

public String getJSONWrap(String uri) {
String xmlResult = getXML(uri);
// escape the double quotes and backslashes
String replace1 = xmlResult.replaceAll("\\\\", "\\\\\\\\");
replace1 = replace1.replaceAll("\\n", "\\\\n");
replace1 = replace1.replaceAll("\\r", "\\\\r");
String replaced = replace1.replaceAll("\"", "\\\\\"");
// wrap it in a JSON object
return "{\"Result\":\"" + replaced + "\"}";
}

I've wrapped this web service -- http://www.trynt.com/ip-data-api/v1/ -- that returns ARIN information. The box below should show you your hostname and the country you are connecting from. The Javascript code that makes it go can be found here. (Note that some of the ARIN data isn't always valid XML and the service above doesn't actually deal with it, so occasionally you'll have XML parse errors, but that would be the case whether or not you used JSONP or not.)

The first two ideas are really the basics of everything else we will do using JSONP. Next time, a little fun with XQuery.

Technorati : ajax, jsonp, xml

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Windows Vista GUI review

Sholom Sandalow, Friday, February 9, 2007 @ 4:40 pm

After much ballyhoo, Windows Vista is finally here.  Microsoft’s newest operating system was released in the U.S. this past Tuesday, after years of delay, a name change, and a drastically scaled back vision.

On its website, the software giant is promoting Vista’s increased security, ease of use, safety, and entertainment capabilities.  You can catch a demo online at http://www.microsoft.com/windows/products/windowsvista/default.mspx?pill=0&WT.mc_id=?ESP161A

Never having used the new OS myself (the closest I’ve come to it was over someone else’s shoulder), I’m not in a position to rave the magnificent new features, or rant about all of it’s issues.
However I do want to talk a little bit about the graphical capabilities of the UI, and some of the enhancements it might provide to the user experience. 

The first thing you’ll notice about Vista is the interface’s theme.  Although Vista is offering users 4 different versions of themes, the well publicized Aero, with its sleek glass like look, and smooth and dynamic feel is designed to take true advantage of the capabilities of the operating system’s graphics engine.

According to Microsoft, Aero is “the best-designed, highest-performing Microsoft user interface ever.” I use a Mac at home and at work, so I haven’t spent much time on Windows XP boxes, But from my limited exposure to Vista, this Gui is a significant step forward in the look and feel department.
The slick and fluid looking Aero gives the user control over the desktop that he never had before.  Aero uses some truly neat graphical display tools to provide a set of new features and enhancements of existing ones that will allow users to work and play more efficiently and enjoyably.   

The most notable and quickly visible feature is the smooth and dynamic nature of the windows themselves.  Dubbed “Glass” for the real-world physical surface they emulate, Vista’s interface elements move, rotate and scale fluidly and naturally, providing the user with a satisfying and comforting experience.

Taking a page from the Mac OS, Aero displays some competent use of Transparency.  The existing XP feature, in which a user is shown all open documents when he presses ALT + TAB is enhanced with a sleek semi transparent surface, allowing the user to see the document currently in focus behind it.
Another intriguing and useful application of transparency is the ability to set the opacity level, (along with the color and saturation level) of the windows.

The way that Vista handles open documents is another core advancement over the previous Windows OS. In XP, only icons and filenames of open but minimized documents are displayed.  However, in Vista, live thumbnails are generated so you can see the contents of each document currently open.  This applies most significantly to the task bar, and the ALT + TAB feature described above (now called Windows Flip).

Aero even provides some interesting use of 3 dimensionality, in the form of Windows Flip 3d.  The basic idea is simple; the desktop shows the user all of his or her open documents at once, so he/she can easily move between multiple programs.  The way it accomplishes this is the neat part, as all open windows are stacked in a 3 dimensional manner that is much easier shown than described.  Take a look…

Taken in concert, the collection of features and visuals that are collectively referred to as Aero represent a significant step forward in the evolution of the Windows Gui.

• Digg
• Reddit
• del.icio.us

Comments (1)

user experience design

Documentation, Part 2 – The Writing

Alice Toth, Friday, February 9, 2007 @ 12:19 pm

You’ve established the purpose of your document, understand the audience and identified the information needed (if not, see previous post). This means it’s now time to put pen to paper (or mouse to screen) and begin writing.

Tell a Story

Tell a story to make it memorable – something with a beginning (introduction, summary), a middle (main text and supporting visuals) and an end (appendix, endnotes). Something that is longer than a haiku yet shorter than an epic novel. Actually, how much of your document is narrative will vary depending on the purpose and/or the audience. For example, if they just want the facts, a shorter narrative is used to create the background for the bulleted list that follows.

Use Personas/Scenarios

Use personas to advance or reinforce the narrative where applicable. Since personas are effective in taking a feature out of the realm of the abstract and into the world of our users, they’re perfect for advancing or supporting a narrative because they put a human face to the words and reinforce that user-centric design is an integral part of the project.

Set the stage with a scenario. Since it’s in the narrative format, a scenario is a bit more memorable than a user walk-through (although those are useful as well; again, know your audience). In addition, scenarios highlight what’s important and focuses on how the design interactions meet a persona’s goals.

Includes Visuals

Visuals are a great way to support the story, and including them within the document sets up an immediate relationship. Whether it’s conceptual flows or actual screen designs, diagrams support and extend the story and start to visually display the details and nuances of the user experience.

Proofread!

Always proofread your work. Using a text program’s spellchecker involves minimal effort with major impact. Remember, you want them talking about your ideas and solutions, not about any typos.

For longer documents or those that are a bit more complex (or ones that you’ve just been staring at for far, far too long), have someone else read your document. A second set of eyes is a good way to review a document for continuity and coherence.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Documentation, Part 1 - the Setup

Alice Toth, Thursday, February 8, 2007 @ 11:02 am

We’ve all created some sort of documentation in order to have a concrete representation of our thoughts and ideas. A physical piece of paper we can use to communicate designs and solutions in order to integrate them into the conversation of a project. Unfortunately, not all documents will have you along to explain the intricacies of your thought process or the brilliance of your design. Some documents end up traveling off-site to remote colleagues or the client.

This is when the written word becomes vitally important as it is substituting for your verbal explanations. To assist you in improving your next set of design documents, here are two ideas to start you off (more to follow in a later post):

Establish a purpose

Why is this document being created? Is it to get funding for a project? Specifications for a development team? What story are you going to tell?

Once you know the document's purpose it'll become much easier to identify the necessary information and the necessary sequence in order to tell that story and give it coherence.

In addition to the document's focus, it's a good idea to give the reader context, i.e., how this document fits in with the overall process. Providing a brief introduction is enough to establish the context. Or, if this document is a continuation of information learned earlier in the process, summarizing previous documents or their pertinent sections establishes a relationship between what was and what is.

Know your audience

What do they want to get out of document? What do they need to help them render/get approval for a decision? Answering these questions sets expectations on both sides and assists you in determining the types of information to be included.

Consider the corporate culture/methodology since it may determine the document output. Is a .pdf acceptable? Do they need a Word document? Do they use wiki pages for their documentation? Does the document need to conform to their internal process? It’s best to get this knowledge up front rather than learning about it 5 minutes before the deadline.

Write to your audience. If technical jargon is their native language, then by all means include it in your writing. However, don’t include jargon just for the sake of having it there. Any jargon used, whether technical, business, etc., is used to support the purpose of the document, not to impress the reader.

Considering these questions before starting your document establishes the document's goal. Once established, it's much easier to create the document's framework and content. More on this later.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Why Ajax Failed the First Time Around

Dietrich Kappe, Thursday, February 8, 2007 @ 6:00 am

I guess everyone else has commented about Alex Bosworth's talk entitled Physics, Speed and Psychology: What Works and What Doesn't in Software, and Why, so why shouldn't I? To summarize his points on Ajax, he says that Ajax didn't take off in 1997 because:

1. Trying to do Ajax over dialup was too slow.
2. Trying to run complex Javascript on CPU's of the time was too slow.
3. Deploying complex web GUI's with little customer support is a recipe for failure.

Now everyone has fast CPU's sitting on broadband connections, so everything is cool and the gang. Right? Not in my estimation.

I've been developing web sites and web applications (we called them "scripts" back then) pretty much since the beginning. From approximately 1997 until 2004 there were really two different contexts that I worked in -- Intranet apps running on uniform OS/Browser platforms over high speed LAN's, and Internet sites/apps running on heterogenous OS/Browser platforms and varying connections speeds. 1 & 2 were not really factors in the Intranet context, so why didn't it take off there?

In both environments we used the kind of IFrame-based proto-Ajax that most web developers are familiar with. We did it for all the reasons that people use Ajax today: it can reduce bandwidth and improve the perceived speed of the application. We tried to limit the complexity of our Javascript, partly for execution and download speed issues. But really, there was one reason we kept complexity low: IE in those days was a piece of shit.

The number of ways that QA tested code could fail in different versions of IE was mindblowing. My favorite was the order of installation bugs that kept cropping up, e.g. the order that Windows, Office, IE and other service packs and new versions were installed in could result in bugs that would wipe out a big part of your apps functionality. Try telling a big client that just migrated 15,000 users from Windows 2000 to XP that they need to do it over again because the order of install is causing your app to break.

BTW, #3 is a legitimate issue that is still with us. Until user experience standards and people's expectations for webapps catch up to the applications' capabilities, we're going to be in a situation reminicent of the early days of Win 3 and Mac OS -- everyone doing their own thing in the user interface arena to be "cool" or "different," and users bleeding from the ears because they are constantly learning entirely new UI paradigms.

Technorati : ajax, bosworth, editorial

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

BRE Patterns III: Collaboration Cop, Part I

Dietrich Kappe, Tuesday, February 6, 2007 @ 12:28 am

The pattern I'm writing about today -- Collaboration Cop -- is much meatier than the two previous ones, in my opinion. This one is all about transplanting the implicit and explicit business rules of an OO system from its objects to an external BRE.

This is a somewhat involved pattern, and I'll provide some more examples and references in part II. Also in part II, I'll run down the differences between the rule classifications that come out this pattern and the ones you commonly see in works by Ross.

Pattern Name: Collaboration Cop

Synopsis
Extract the business logic that is in an OO domain model -- collaboration rules, property rules and controller logic -- and express it as a set of business rules. Activity in the system is triggered by the UI inserting events into the working memory and firing the rules. Objects can be persisted by something like and ORM framework.

Slightly longer version: if you strip away the user interface and the persistence mechamism, a typical OO application is designed around a domain model and controller or service classes that set object collaborations within the domain model in motion in response to external events. The methods of the controller/service classes often correspond to steps in a Use Case. Embedded in the various domain classes is logic about how object can be modified and accessed, what collaborations can be created or desolved, etc. With this pattern, you extract all the service/controller and validation and collaboration logic into business rules. You populate the working memory with the objects that comprise the context for a Use Case. Finally, in response to an external event, you inject an event object into the working memory and fire the rules that modify the state of the object model (and persist it).

Context
Take the somewhat simplified Use Case where a customer is trying to rent a tape (he's a sucker for punishment and doesn't like DVD's). In a OO system, we would try to create a collaboration as follows (yes, very simplified):

customer.addRental(new Rental(title.getTape()));

The customer object knows how many active rentals a customer has and knows hat he cannot have more than three. This attempted collaboration would throw an exception to indicate that it is not permitted.

In the Collaboration Cop version we would create an event and insert it into the working memory:

VideoStoreEvent event = new VideoStoreEvent();
event.type = VideoStoreEvent.RENT_TAPE;
event.value = "Gone With the Wind";


IF event.type == VideoStoreEvent.RENT_TAPE AND title.getTitle() == event.value AND title.isInStock()
AND customer.activeRentals() < 3
THEN
customer.addRental(new Rental(title.getTape()));
externalObjectSet.add(customer);
externalResponse.message = "Rented tape.";
externalResponse.success = true;
ELSE
externalResponse.message = "Unable to rent tape.";
externalResponse.success = false;

You can wrap a transaction around the sequence of event injections, then save (using an ORM) all of the modified objects in the externalObjectSet.

-----------

This pattern is complex and powerful, and it's implementation is very much dependent on the capabilities of the chosen BRE, how you choose to deal with concurrency, etc.. In part II, I'll also construct a simple example using JBoss Rules.

Technorati : bre, business rules, patterns

• Digg
• Reddit
• del.icio.us

Comments (0)

business rules