Top AJAX Frameworks of 2007

Prototype, JQuery and ExtJS are the top 3 AJAX frameworks used in 2007 based on a survey conducted by Ajaxian.

Interestingly 42.5% of the respondents also used one of these frameworks, toolkits and libraries to design proof-of-concepts and prototypes.

46.5% of the developers used them in conjunction with PHP followed by Java (27.6%) and .NET (14.6%)

Web Innovation 2007 : Day 1

Just got back from attending an interesting Day 1 of the Web Innovation 2007 Conference. Promise to upload photos soon. It was heartening to note that finally, User Experience was given its due recognition in many of the Web 2.0 related presentations.

Both Adobe & Microsoft extensively promoted Flex, AIR, Silver Light and Expressions with some cool demos and handed-out 60 day trial versions of their products.

India is happenening and will continue to grow. About 7 million mobile devices get added every month. 50% of its population is under 20. However, the lack of infrastructure is inhibiting the growth in the no of broadband connections. Network congestion is affecting the growth in the no. of people accessing the net using mobile devices.

What is Web 20. and is there moolah in Indian Web 2.0 services and products?

The panelist sent mixed signals to these questions. Web 2.0 is seen as a natural progression of the earlier web and that it is collaborative and involves the community and it goes to the users and user s generate content and all that jazz. M.P Ranjan says that its “just a mindset” and not really about technology. KK said that Web 2.0 = 4Cs + P(Content, Commerce, Context, Community and Personalization).

About making monies in the Web 2.0 space, India is clearly not yet there. Big global players like Yahoo, Google and Microsoft will make money through Web 2.0 services ( online advertising is one) post an inevitable shake-out. Facebook aint making enough monies and so does LinkedIn. It is difficult to predict the outcome. A few Web 2.0 solutions that address unique localized needs will make monies (Eg.

The 3 Screens that matter are TV, Mobile & PCs. To this Prof. Ranjan reacted there are multiple experience opportunities (like haptic ) are available and are yet to be targetted. Rajan recommended a wholistic approach to not just address the needs english speaking city breds, but also the unique local needs to Indian rural folks.

Geo Search Engine models that worked for the Western countries might not really work in the Indian context because the varied user needs, cultural differences et all. “Pan Wallah” model using “Landmarks” was recommended.

I quite enjoyed Google’s Parminder Singh’s preso on “Maximizin marketing effectiveness with latest Online & Search Tools. The different phases of AIDA principle need not necessarily happen in a progressive order but can happen in any order online.

It takes anywhere between 2 minutes to 2 month to 2 years for users to research and buy products either online or offline. The visual he used was interesting and directly drove the point home. Tradionally, marketeers used to look at market segments using a magnifying glass. Often the wrong target audience was targetted at ineffectively. On the other hand, individual users are now looking for products with magnifying glass ( searching) and that being available to them at the right place, at the right time with the right message will itself help increase sales. The term he used to sum it all up was “M.O.R”, the Moment of Relevance.. He also talked about the flexibility of the internet advertising space with neat examples and how mass marketing and precision marketing get united with google’s online advertising strategy.

Met some ex colleagues and acquaintances like Karthikeyan, Kiruba, Pandurang et all

Some observations : The online payment gateway malfunctioned but online registration kinda worked (so much for all that jazz about web 2.0 bla :). Speakers were lost in the dark and the backdrop was in focus thanks to the incorrect lighting. Looking forwards to Day 2.

CLI > GUI > CLI on GUI!?!

Update : Read Enso’s take on Why Quasi Modes are more user friendly than Modes

And now CLI gets contextually integrated with GUI!

Atleast, that’s what Jono DiCarlo from Humanized has demonstrated through Enzo.

All you need to do is press “Caps Lock” key to invoke/trigger the Command Line Interface and start keying in your commands. The good news is that any no of new commands can be written.

Some of the tasks based on commands are

  • Insert Map
  • Open in a Application
  • Calculate
  • Translate
  • Upper Case
  • See complete command list

    Since I am so used to using the ‘Caps Lock’ key to capitalize, I INITIALLY found it difficult be forced to use the “Shift” key.

    Keeping the ‘Caps Lock’ pressed all the time to type other commands is difficult and creates a state of tension.

    Think there is room to explore other design solutions to this problem. I am not sure if other keys are were usability tested and that they found this one “less difficult”

    A provision to assign short-cuts keys for the most frequently used commands can be considered.

    CLI on GUI

    Flex Overview

    High level overview on Adobe Flex. Using a tree navigation to provide the overview aint a good idea.

    Creating a Simple RIA: Watch Video of the Tutorial

    Learning Points

    * Flex applications are Flash applications.
    o Flex is a programmer-centric way to create Flash-based rich internet applications.
    o Flex applications are rendered using Flash Player 9.
    o Like all Flash RIAs, Flex SWF files are processed by the client, rather than the server.
    * The Flex framework contains the predefined class libraries and application services necessary to create Flex applications.
    o The framework is available in a free SDK and the Eclipse-based IDE named Flex Builder.
    o The framework includes a compiler that is available as a standalone tool or as part of Flex Builder.
    o The class libraries and application services provide developers with standard components and tools for quick application development.
    Standard UI components can be extended and customized.
    * Flex applications are written using MXML and/or ActionScript.
    o MXML is an XML-based markup language that is primarily used to layout application display elements.
    o ActionScript is an ECMAScript-compliant object-oriented programming language that is primarily used for application logic.
    o MXML and ActionScript code are compiled into binary SWF files.

    Adobe's "RIA Leadership Summit 2007" in Bangalore

    Adobe is targeting users with “occassionally (dis?)connected devices” like Laptops, Mobile Phones, IPTVs et all with Flex, AIR , Flash Lite etc., to enable Rich Internet Applications.

    Update : Over 150 people landed-up at Adobe’s “RIA Leadership Summit” help at Oberoi, last evening. Shantanu’s preso was timed perfectly to slightly under an hour (including Q&A and demos)

    The most interesting thing that appealed to me was in the “mobile” stall. The demo was for a mobile application ( in swf format) designed to make the voting experience a lot more “rich” for the popular “Indian Idol” program and apart from cool voting experience, users can also easily browse through the contestant pages, see videos et all.

    While i gave up on using Fireworks a very loong time ago, i was witnessed the Fireworks demo where in

  • PNG files were used to design the Layouts
  • Pages were managed using the ‘Photoshop like Layers’ window
  • Interactivity is added using the ‘Flash Action Script like code’
  • PNG file gets exported as a MXML format into the Flex SDK directory
  • Then a build.bat is used to generate the final SWF. file
  • In CS4 beta, the whole process gets to be simplified whereing swf files get directly generated, without having use build.bat et all.

    When probed about creating collapsible layouts, partial page updates, i was told that apart from the swf and MXML file format outputs, XHTML outputs were also possible and that each Document Object gets automatically assigned to an Id and JavaScript needs to be used separately to manipulate the Document Objects. Phew!

    What became evident was that SAP and Oracle have already started experimenting with Flex, Flashlight and Adobe Integrated Runtime (AIR) in some of their Enterprize Applications to enable Rich Internet User Experience.

    Met up UX folks like Durga Prasad and Auro from SAP, Sudhindra from Human Factors, Param from Onward Consulting, Adesh from Oracle et all.

    Guess the time is right to get into the “Mobile UX ” space.


    Adobe’s “RIA Leadership Summit 2007″ is happening on Oct 25 in Bangalore.

    Mr. Shantanu Narayen, President and Chief Operating Officer, Adobe Systems Inc., will speak on the emerging trends in RIA technologies and how Adobe is helping create the web of the future.

    Looking forward to get some insights into Flex and Adobe Integrated Runtime (AIR).

    Undo Sent Mail

    Heuristic : Ease of Error Recovery

    Many a times, after sending an e-mail, Users realize that they’ve done a terrible mistake and would want to “UNDO” the same.

    Ease of Error Recovery

    Thanks to the dynamic client sided validation, one need to type the entire e-mail addresses of recipients and instead choose from a suggested list. This feature also gives room for users to choose an incorrect mail id.

    I usually forward certain confidential information from my gmail account to my official mail id. Now, there’s this other Muthu, who has a similar profile as me. Even our initials are the same. I could easily end up sending confidential information to him.

    Microsoft Outlook has this “revoke” your sent e-mail feature. But it has its own limitations.

    We definitely need an Undo Sent Mail feature. How do we spec it and what changes do we have make in the Messaging Architecture to enable this?

    Analysis of Application States

    Keeping the Web in Web 2.0
    An HCI approach to designing web applications

    Analysis of application state and its representation in browser historyand bookmarks.

    One of the disadvantages of AJAX is that browser history and bookmarks of classic web applications are broken if not implemented specifically

  • Only some elements of interaction state are recorded in browser history.
  • Only some elements are recorded in bookmarks.
  • Only some state changes create history.
  • When one element changes, it may reset other elements to their default values (it’s said to dominate those).
  • The default value of one element may depend on the value of another.
  • External factors can change the application state
  • Types of Application States :

  • Hard State : Change creates history entry.
  • Soft State : Change is recorded in history, but doesn’t create new entry.
  • Transient State : Not recorded in history.
  • External state : Not recorded in history either, but recorded elsewhere.
  • Designing Application State :

  • In classic web applications, design decisions are built into the browser.
  • In Ajax web applications, they are explicit choices by the developer:
    • Identify state elements.
    • Assign them to application state classes.
    • Decide their default values and dominance relationships.
    • Decide how to implement them

    Solution :

  • History: Store application state in browser history, and restore it on history navigation events.
  • Bookmarks: Store application state in a URL, and restore it when the URL is loaded into the browser.
  • See Example >>
    Observe how certain application states are stored in the URL.

    Event Driven Web Application Design

    Frontend engineering rocks right now. The era of boring web sites is over and we’re all into pushing the envelope, erasing boundaries and getting beyond whatever prevents us from building the next killer web application. New companies building quick-turnaround web products spring up like mushrooms and many an old convention of web design is cast aside to make way for quick prototyping and agile development.

    The real confusing part of it — at least to me — is that we don’t try out new ways to approach web application development. Instead, there seem to be two separate schools of development approach:

    * You either use a framework (like Ruby on Rails, Spring or Microsoft .NET) to build your web-app or
    * You build your web app with best-practices ideas coming from more traditional web design and/or application design.

    More on Event-Driven Web Application Design by Christian Heilmann.