The ‘New’ Look of Web 2.0

Alice Toth, Friday, December 22, 2006 @ 12:43 pm

Filtering through the webisphere are various articles, blog entries, comments, etc., about the new look of Web 2.0 sites. Frequently cited are their clean design, strong use of color, utilization of font size to emphasize hierarchy, and so on. All true. These sites are great to look at and to use -- they're clean, easy to grasp and move the eye to specific points. But are the site designers doing anything new?

As the concept of the web has grown from a bunch of clickable links into a more sophisticated medium, standards from other professions have filtered into our world. The most obvious example is the integration of software practices such as mapping out site flows and writing well-formed code, which are (hopefully) practiced on even the most basic sites.

On the design side, after some trial and error, certain knowledge and practices from the physical world have successfully migrated into the digital world. Some have fallen aside (the brochureware sites of the early days come to mind). The 2.0 web sites receiving these plaudits are the result of the site designer's understanding of the elements and principles of design along with a good dose of typography and page layout.

Is this new? Not at all. However, what is new (or perhaps I should say more prevalent) is the application of the underlying principles of good design while exploring the creativity allowed by Web 2.0 technology. And when done well, it truly is a wonderful site to behold.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

Hello!

Alice Toth, Friday, December 22, 2006 @ 12:32 pm

I've recently come aboard the Pathfinder UXD team, so from time to time I'll be popping up on this blog where I'll give voice to random thoughts and ideas. I've been working in the web since the mid-90's starting with design, going through development and returning to the presentation layer as a champion for user-centric design. It's been fun witnessing the changes, growth and maturity in this medium, and I look forward to '07 and seeing what further developments Web 2.0 will bring.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

NYTimes.com adds Sharing Tools

Sholom Sandalow, Friday, December 22, 2006 @ 10:25 am

NYTimes.com, the nations largest online news source by visitorship is now allowing users to share its articles on 3 social bookmarking sites (Digg.com, Facebook.com and Newsvine.com). 

Christine Topalian, manager of strategic planning and business development at NYTimes.com, said it was looking for ways to tap a tech-savvy audience that is accustomed to commenting on and sharing news stories. The newspaper contacted Digg and Newsvine directly, with Facebook approaching The Times after developing a news-feed service earlier this year.
http://seattlepi.nwsource.com/business/295376_newsvine11.html

Although the links are less than prominent, all articles, except for Times Select, and Wire Stories now allow readers to share the story online.

This is yet another example of the increasing prominence and legitimacy of user generated content—made possible by web 2.0 technologies.

• Digg
• Reddit
• del.icio.us

Comments (0)

user experience design

A Look at GWT Open Source

Dietrich Kappe, Wednesday, December 20, 2006 @ 7:00 am

I've tried to get away from being just an Ajax announcement blog -- there are plently of those already -- but I thought that the release of GWT 1.3 as open source was noteworthy enough to warrant a post. There aren't really any differences between GWT 1.2 and GWT 1.3, just an open source license, but open source means more than being able to use it in your project unencumbered (more or less). At the risk of stating the obvious, you can get and read the code. Yep, read the code.

I, for one, have been dying to read the source code for GWT. One of the reasons I got into Computer Science was that I really wanted to write a C compiler. I read through the literature, including the excellent dragon book. I even built one using lex and yacc, but then along came gcc and took the wind out of my sails. It's just as well. You don't get the same programmer street cred for writing a compiler or a chess program as you once did. Still, I really dig compilers and related beasties.

I also want to know how the GWT folks can make the claim that "if it runs in the hosted mode, it will run in web mode." That seems like a bold statement to me, worthy of my best efforts to find a counterexample. I encourage you to checkout the source from SVN and studying it yourself.

So far, I've just looked at the code generation part of GWT. The business end of this is in the class com.google.gwt.dev.jjs.JavaToJavaScriptCompiler and it's various associated classes. The compiler makes use of Eclipse JDT (Java Development Tools) for parts of it's Java parsing and syntax tree construction. One place you might want to extend the implementation is in the types NamingStrategy that govern how Javascript identifiers are generated. Right now there are strategies for obfuscation (the default output) and full naming and pretty naming. It seems one should be able to do decompilation of the Javascript into Java with enough study of the compiler.

Lots of massaging of the Java is done before it is passed on to the actual Javascript generation. Just have a look at the part that optimizes:

do {
didChange = false;
// Remove unreferenced types, fields, methods, [params, locals]
didChange = Pruner.exec(jprogram, true) || didChange;
// finalize locals, params, fields, methods, classes
didChange = MethodAndClassFinalizer.exec(jprogram) || didChange;
// rewrite non-poly calls as static calls; update all call sites
didChange = MakeCallsStatic.exec(jprogram) || didChange;

// type flow tightening
// - fields, locals based on assignment
// - params based on assignment and call sites
// - method bodies based on return statements
// - polymorphic methods based on return types of all implementors
didChange = TypeTightener.exec(jprogram) || didChange;

// tighten method call bindings
didChange = MethodCallTightener.exec(jprogram) || didChange;

// remove unnecessary casts / optimize instanceof
didChange = CastOptimizer.exec(jprogram) || didChange;

// dead code removal??

// inlining
didChange = MethodInliner.exec(jprogram) || didChange;

// prove that any types that have been culled from the main tree are
// unreferenced due to type tightening?
} while (didChange);

There's quite a bit more here for some entertaining weekend code reading. For example, GenerateJavaScriptAST and company makes use of the visitor pattern for code generation from the sytax tree. I don't actually see where different Javascript is generated for different browser versions, but I'm still finding my way around the code. Even if you aren't considering contributing to the GWT system, it helps to know how the thing works, especially if one of these optimizations creates trouble for you on the Javascript side. Read code, read code, read code.

Technorati : gwt, java, javascript, open source

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

How to do Page Preview in Java with Embedded HTML Rendering

Dietrich Kappe, Monday, December 18, 2006 @ 6:00 am

He who doesn't look ahead remains behind. -- Mexican Proverb

One Ajax technique you see quite a bit of lately is the page preview. This is where the html page is rendered as an image so that you can cast a skeptical eye on a tiny version instead of navigating to a lame page. The tech social bookmarking site dzone features an excellent version of this.

So, how do you get a screenshot of a web page from within a Java app using open source? Back in 2004, Joshua Marinacci wrote a very useful article on just this sort of technology, entitled Java Sketchbook: The HTML Renderer Shootout, Part 1. The article is a bit out of date, but at least one of the tools -- JRex -- is still around and kicking.

All of these tools are intended to be used as components for providing interactive HTML rendering and browsing for desktop applications, but just because it is intended for one thing does not mean you can't use it for another. In fact, you can use this technique of using Swing components to render images with some of the following XHTML/CSS rendering engines.

• JRex - the oldest of the contenders. Not pure Java; uses the Mozilla Gecko Runtime Environment (GRE), a minimal HTML rendering engine.
• Flying Saucer - pure Java renderer with support CSS 2.1, but not Javascript.
• Cobra HTML Toolkit - A pure Java HTML 4 parser and renderer. Supports Javascript and CSS2. The Warrior HTML browser is based on this toolkit.

JRex with Gecko will give you the best and most robust results. For legacy HTML, you many want to use JTidy to clean it up into XHTML before passing it into the last two renderers.

The only thing that worries me is that with Javascript enabled, one could have the same sort of exploits we see in regular browsers, only now targeted at servers that use these embedded rendering engines. Since something like this would run unattended for days and weeks, there's a real concern that things could get out of control. There are ways of sandboxing and locking down, and that's something definitely worth considering.

Technorati : ajax, browser, embedded, html, jrex, preview, rendering

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Ajax Among the Top 100 US Sites

Dietrich Kappe, Monday, December 11, 2006 @ 6:00 am

With the announcement that Sourceforge had settled on JQuery as its framework of choice, I thought it would be useful to see what all of the big US sites (as defined by Alexa) were doing with regard to Ajax. I'm not sure whether the results should surprise me, but it turns out most of these sites weren't doing Ajax, and even fewer were making use of frameworks. Here is the tally:

• Use of Ajax: 15%
• Prototype: 7%
• Scriptaculous: 3%
• JQuery: 2%
• moo.fx: 1%
• YUI: 1%
• GWT: 1%

With the exception of Google and Yahoo, there's not that much heavy Ajax going on. I'll have some more results later in the week as I dig further into the data, but I think some basic patterns are emerging:

1. The big sites are very conservative. With the exception of folks like Google, Yahoo, and Digg, most of the top 100 US sites are not originally startups that burst onto the scene through innovation. Most of them are the online extensions of offline companies. As such they are not technology companies and are followers when it comes to new technology.
2. The photo sites are really ASP's (or SaaS, depending on what acronym you prefer), and are competing on usability, thus, as predicted in 10 Business Reasons to Use AJAX, are among the early adopters of Ajax.

Don't hold your breath for many of these "common carriers" to make widespread use of Ajax any time soon. When you're CNN and a large part of your audience stull uses IE5, you have to move slowly.

Disclaimer: many of these top sites are big and/or have many subsidiary properties. It is entirely possible that I have missed the use of Ajax or an Ajax framework among the broad reach of microsoft.com or msn.com.

 
  Technorati : ajax, analysis

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Echo2 Needs a Better Way for Third Party’s to Contribute

Dietrich Kappe, Friday, December 8, 2006 @ 8:05 pm

There are two big dogs in the world of Echo2:

1. NextApp (with Echo2 creator Tod Liebeck) which releases Echo2, Echo2Studio (Eclipse Plugin) and Echo2Extras (more components).
2. EchopointNG (run by Brad Baker), a collection of more Echo2 components.

Aside from the fact that EchopointNG needs a real project web site of it's own instead of the Echo 1 stuff that's on there now, there is no easy way for developers to contribute components to Echo2. Right now you have to go crawling around the forums, looking for contributions in zip files. Someone should put together a contribution repository. I know that organizing and maintaining such a repository is no small thing, but components are the lifeblood of any component GUI. If Echo2 doesn't keep up with GWT, ZK, Tibco and all the rest, it won't matter how elegant its design, etc. Developers will go where the widgets are and two projects won't do the trick.

Maybe I need to step up to the plate. But I'd hate to have to drop it for lack of time. I need to think about this some more.

In the meantime, a new Beta 5 release of Echo2, Echo2Extras and Echo2Studio is out. A few fixes, many around IE6, and opacity-based fades for the TransitionPane component. The RC's for Echo2 are close.

Technorati : ajax, announcement, echo2, opinion

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Application Development with Echo2 plus SOA

Dietrich Kappe, Monday, December 4, 2006 @ 8:58 am

Mathew Brooks of RDF Group has published a summary of his experiences in developing mform -- an Ajax-enabled mortgage application -- using the Echo2 platform. Although fairly high level, the post is thought provoking and doesn't just focus just on Ajax. With regard to best practices in using Echo2, he writes:

Whilst using echo 2 we discovered that whilst it was the most advanced tool for the job (at least when we started, which was before GWTcame out) we did find that we had to undertake the following:

• Adjust some of the java script in widget peers where it was not quite performing as we expected
• Subclass the echo 2 servlet to ensure that:
  • We can trap non java script type clients and present a "non javascript" type version of the page
  • We can present a more polished start up page rather than the ||| presented as default by echo 2
• Some post back functionality does not work well with IE either under load or restricted bandwidth. Due to the way that IE polls for the post back other events on the browser were being missed.
• Develop our own widgets where necessary if there was no suitable one available from echo or echopointNG

Beyond Echo2, the application makes use of ServiceMix (the Open Source ESB), Spring, Hibernate and EJB3. It also integrates with a CMS -- Hippo -- for conetent management. I haven't used ServiceMix myself, but I have used the Mule ESB myself (it has much better docs and tutorials, IMHO), and beyond the SOA help it provides, I've found it's support for FutureTask very helpful for some of the asynchronous processing you see more of in Ajax apps.

Mathew's analysis goes well beyond just Ajax, of course, with some thoughts on how to avoid the Anaemic Data Model antipattern, among other things.

Technorati : ajax, echo2

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax