SlideShare a Scribd company logo
1 of 19
Download to read offline
Web Application Solutions: A Designer’s Guide
Overview

As the Web continues to extend its reach into our daily lives, an increasing number of our
interactions will happen online. The practical implication of this for interface designers is lots
of Web application projects that cover everything from filing taxes to sharing photos.

“The fundamental purpose of Web applications is to facilitate the completion of one or more
tasks” [Bob Baxley 1]. But depending on the type and complexity of the tasks involved,
different technical solutions may be better suited to enable the specific interactions each
product requires. Flash, Java applets, DHTML, Active X, Smart Clients, Java Web Start,
SVG— what do you choose and why? What types of interactivity and visual presentation
does each technology enable? What does each limit?

As Web application interface designers, these are questions we encounter time and time
again. As a result, we decided to document what we’ve learned and research what we didn’t
know about the opportunities and limitations that characterize some of the most popular
Web application presentation layer solutions available today. We evaluated each solution
against a consistent set of criteria and described it with a concise definition, set of
examples, and references that enable further analysis. We also shared our findings with a
team of expert reviewers (page 18) to ensure we were on the right track. The end result is
this designer’s guide.

For your convenience, each solution we’ve evaluated is presented on a single-page
snapshot that helps designers, product managers, and business owners make an informed
decision for their Web application’s front-end technology. Of course, this guide is not meant
to be a substitute for consulting with knowledgeable programmers and system architects.
We simply want to prepare you for those discussions.

The right Web application presentation layer needs to meet your specific business, user,
and technology needs and multiple solutions can exist per business and per product. We
hope this guide helps steer you in the right direction.




Luke Wroblewski                                               Frank Ramirez
Principal, LukeW Interface Designs                            Principal, Ramirez Design LLC

luke@lukew.com                                                frank@ramirezdesign.com




                                                                                                     Web Application Solutions: A Designer's Guide | 2
Defining Web Applications

This guide is not intended to define the multitude of presentation layer solutions available for
Web applications. We’re focused on explaining the trade-offs. However, an overview of the
grouping and evaluation criteria we’ve used to describe each solution is required to ensure
we present accurate comparisons.

Web Application (Web-based application)
Web applications are Web-accessible (deployed and/or accessed through a Web browser)
Web-connected (utilize a http connection for information retrieval or display), and
task-oriented (beyond the simple browsing of information) software.

Due to the variance and subjectivity inherent in defining types of Web applications, we’ve
established a continuum from thin client to rich client on which each Web application solution
can be plotted. Many solutions (and their various implementations) have characteristics of
more than one group. For example, DHTML with XMLhttpRequest (commonly referred to as
AJAX) is part thin client and part Rich Internet Application (RIA). Likewise, some desktop
applications really straddle the line between Rich Internet Application and rich client (a.k.a. a
thick client).

Lastly, while you could think of any Internet-enabled desktop application (like Apple’s iTunes
or Yahoo’s Instant Messenger) as a Rich Internet Application, we’ve left this type of software
out of the discussion. Applications that require a traditional client-side install process
(regardless whether or not the install file can be downloaded from a Web server) are not
evaluated within this guide.




                                                                                                    Web Application Solutions: A Designer's Guide | 3
Definitions




Thin Client                                                   Rich Internet Application (RIA)                                   Rich Client (smart client, desktop client)
                                                                                                                                Web-connected applications that do not run within the Web
Web applications that utilize the Web browser for security,   Web applications that enable richer, locally processed user
                                                                                                                                browser and can be delivered as compiled code. Rich Clients
state management, and script execution (run-time). Most       interactions (fluid animation, multimedia content, real time
                                                                                                                                leverage local processing to enable rich interactions and can
data processing and storage occurs on a remote server and     validation, etc.) and advanced remote messaging (Java
                                                                                                                                utilize Web Services to connect to distributed data sources and
not a user’s local machine. Server request and response       Objects, Web Services, etc.). Sun’s Java plug-in and
                                                                                                                                auto-update. Unlike Thin Client applications, Rich Clients can
mostly occurs through the http protocol.                      Macromedia’s Flash are two of the most common RIA
                                                                                                                                be used offline and more easily integrate with local hardware
                                                              run-times. RIAs can only run in a Web browser within
                                                                                                                                and software.
The primary benefits of thin clients are wide reach           embedded plug-ins.
(accessible by anyone with a Web browser), open
                                                                                                                                A Rich Client can embed a Thin Client (i.e. a desktop
development platform (built on popular open standards), no    The HTTP communication layer used by Thin Client
                                                                                                                                application with an integrated Web browser within which a thin
footprint (quick download, no artifacts on user machines      applications technically does not support guaranteed
                                                                                                                                client application can run.
beyond browser cookies), and deployment/manageability         message delivery, does not guarantee the order of message
(distributed and maintained from a central source).           delivery, and does not support server-initiated
                                                                                                                                Rich Client Solutions:
                                                              communications. Many RIA communication layers provide
Thin Client Solutions:                                                                                                             Windows Smart Clients
                                                              reliable messaging and enable server “pushes” of content.
                                                                                                                                   Java Web Start
   HTML, XHTML
   HTML, JavaScript, and CSS (DHTML)                          Thin Clients that utilize asynchronous JavaScript-driven
   DHTML with Remote Scripting via iFrame                     server requests and responses and advanced DHMTL user
   DHTML with XMLhttpRequest (AJAX)                           interactions (a combination of technologies frequently referred
                                                                                                                                Upcoming, Interesting, or Relevant Solutions
                                                              to as AJAX) are sometimes considered JavaScript RIAs.
                                                                                                                                While this guide focuses on some of the most popular Web
                                                                                                                                application solutions available today, there are a number of
                                                              A Thin Client can embed (integrate through a Web browser
                                                                                                                                relevant technologies that may be considered for specific uses
                                                              plug-in) an RIA (i.e. a Flash module in a DHTML application).
                                                                                                                                (i.e. PDF for data entry) or future projects (i.e. XUL or XAML).
                                                              Rich Internet Application Solutions:
                                                                                                                                Examples include
                                                                 Flash 6 (and higher)
                                                                                                                                   Canoo Ultra Light Client (ULC)
                                                                 Flash with Flex or Laszlo Presentation Server
                                                                                                                                   Java WebCream
                                                                 Java Applets
                                                                                                                                   PDF
                                                                 Active X
                                                                                                                                   XSLT
                                                                                                                                   SVG
                                                                                                                                   Macromedia Central
                                                                                                                                   Nexaweb
                                                                                                                                   Xforms
                                                                                                                                   XAML




                                                                                                                                                         Web Application Solutions: A Designer's Guide | 4
Solution Continuum

The primary benefits of a thin client are reach (anyone with a Web browser can use it) and
deployment (can be updated and distributed through a Web server). The primary
disadvantages are limited interaction options and typically slower response times. Rich
Internet Applications and Smart client technologies enable richer (desktop-like) interactions,
more sophisticated messaging, and prevent server request/responses from having to rewrite
entire pages. They also maintain some of the deployment and updating benefits of thin
clients. The chart below overlays popular Web application technology solutions on a
continuum from thin to rich client. Most solutions fall within a range on the continuum.




                       Each Web application solution falls on a continuum from thin client to rich client, though some solutions really quot;straddle the linequot;. A Smart Client can even embed a Thin Client (within
                       a Web browser inside a rich client) and a thin client can embed an RIA (i.e. Flash module in a DHTML application).


                       Thin Client                                                                  Rich Internet Application (RIA)                                          Rich Client
                       Delivered in the Web browser; uses                                           Usually delivered as embedded                                            Compiled run-time on local
                       browser security, state management,                                          run-time within Web browser                                              machine; can use local and
                       and script execution; http for data                                          (plug-ins); goes beyond http for                                         remote resources; can run
                       request/response.                                                            remote data request/response.                                            offline.




                                                                 XMLhttpRequest (& DHTML)                              Java Applets                     Java Web Start

                       HTML          DHTML                                                                                                   ActiveX

                                                  Remote Scripting (& DHTML)                                Flash (Flex & Laszlo)                           Smart Client




                       Open                                                                                                                                                  Rich User Experience
                       Built on popular open standards
                                                                                                                                                                             Desktop-like interactions; multimedia;
                                                                                                                                                                             state-ful applications
                       Wide Reach
                                                                                                                                                                             Local Processing & Integration
                       Accessible by anyone with a Web
                                                                                                                                                                             Most responsive UI; local hardware &
                       browser; usually operating system
                                                                                                                                                                             software integration
                       independent

                       No Footprint                                                                                                                                          UI Toolkits
                       Quick download of pages as needed; no
                                                                                                                                                                             Robust UI libraries & toolkits; reduced
                       application footprint
                                                                                                                                                                             development time
                       Deployment                                                                                                                                            Offline Availability
                       Updated and distributed through a Web
                                                                                                                                                                             Network connectivity not required
                       server


                                                                                                                                                                                                                   Web Application Solutions: A Designer's Guide | 5
Evaluation Criteria

Each Web application solution was evaluated against the following criteria.




User Experience                                                     Processing                                                         Unique Features
What user interactions are possible? (drag and drop, fluid          How much application logic can reside on the client-side?          Are there unique security concerns? Is application logic
animation, auto-saving, real-time validation, non-linear            What type of action requires a trip to the server? What is the     exposed? Can the application run offline?
workflows, integrated audio and video, etc.) Does each              impact to the UI for a server request? How fast are the initial
                                                                                                                                       Future Proofing
user action require a full-page rewrite (as in the case of          load and subsequent response times of the user interface?
HTML/http solutions)? How well integrated is the user               What kind of remote messaging is possible (http, Web               What level of support is available for the solution? If the
interface with the Web browser environment (Back, History,          Services, Java objects, etc.)? Can server requests run             technology is proprietary, does the vendor have a proven
etc.) and/or local operating system (local hardware and             uninterrupted (in the background) while the user focuses on        record of product support? Does the solution conform to
software integration)? Can application states be easily             other tasks?                                                       existing standards?
maintained?
                                                                    Interface Components & Customization                               Staffing & Cost
Deployment & Reach                                                  Does the solution include an easily accessible library of UI       What are the costs required to build out the solution? Are
How can users access the application? Do they need                  elements? Are the elements easily customizable? Is there a         technology experts easily found? What tools exist to reduce
specific Web browsers, Web browser plug-ins, Web                    WYSIWYG development environment (IDE) that leverages               costs? How long is a typical development cycle?
browser settings, operating systems, devices (mobile, etc.),        the UI library? Can the interface be easily transformed for
or local applications? How large is the reach of the                different devices (i.e. mobile)? Can the user interface be built
application? Can search engines index the content within            with grid or flexible layouts, or both?
the application? How is the application deployed (install,
                                                                    Back-end Integration
download, footprint, etc.)?
                                                                    What back-end technologies enable this front-end solution?
                                                                    What is required on the back-end? Does the solution increase
                                                                    or decrease server loads?




                                                                                                                                                                 Web Application Solutions: A Designer's Guide | 6
HTML, XHTML

Overview:
HTML is a document markup language for structure, presentation and monodirectional linking. XHTML is a reformation of HTML that is XML-compliant. Data requests are sent through the Hypertext
Transfer Protocol (http) standard.


                                                                                                                                                                 Benefit           Drawback            Neutral


 User                        Deployment                                         Components               Back-end                Unique
                                                                                                                                                       Future Proofing             Staffing & Cost
 Experience                  & Reach                   Processing               & Customization          Integration             Features


     Elements that can          Has the biggest          Application states       HTML can be              Can be delivered           Code exposed -     Relatively easy to           Relatively easy to
     be specified in            reach- can be            can be achieved          styled with CSS          with JSPs,                 easy to copy       port to other                find people with
     HTML are familiar          rendered by any          through cookies,         (Cascading Style         Servlets, ASP,                                devices such as              HTML, XHTML
     to the largest             browser. is              server-side apps,        Sheets)                  ASP.NET, JSP,                                 PDAs, phones, etc.           programming skills.
     amount of Web              standardized and         and/or URLs                                       ColdFusion, PHP,
     users (including           available to users                                Flexible layouts are     and more.                                     Code is likely to be         WYSIWYG
     back, history,             running all types of     Client requests          possible, fixed grid                                                   forward-compatible           development
     bookmarking, etc.)         software. Effective      require full reloads     are difficult to                                                       due to standardiza-          environments and
                                for users with slow      of Web pages to          maintain consis-                                                       tion.                        content manage-
     Small file sizes:          connections.             update displays          tently across                                                                                       ment systems
     quick download                                      increasing               browsers.                                                                                           (CMS) widely
     times                      Search engines           download times                                                                                                               available
                                can index content        and server loads         Components
     Sufficient for                                                               limited to those
     relatively static                                   HTTP requests do         available through
     content and trivial                                 not support              HTML markup
     tasks                                               guaranteed
                                                         message delivery,
     Limited to form                                     guaranteed order
     entry, data display,                                of message
     and link navigation                                 delivery, nor
                                                         server-initiated
     Integration with                                    communications
     local resources                                     (push)
     (hardware &
     software) is nearly
     impossible




Examples:                                                                                    Read More:
• Craigslist – online local classified ads                                                   • http://www.w3.org/MarkUp
• Bloglines                                                                                  • http://www.oreilly.com/catalog/html4
                                                                                                                                                               Web Application Solutions: A Designer's Guide | 7
HTML, JavaScript and CSS (aka DHTML)

Overview:
DHTML is not a programming language, but the combination of HTML, JavaScript (or VBScript). and Cascading Style Sheets (CSS). JavaScript is a cross-platform, object-oriented scripting language.
JavaScript is also small, lightweight, and was designed to be embedded in other products and applications, such as web browsers. Inside a host environment, JavaScript can be connected to the objects
of its environment to provide programmatic control over them [2].

                                                                                                                                                                  Benefit          Drawback            Neutral


 User                      Deployment                                          Components             Back-end               Unique
                                                                                                                                                      Future Proofing              Staffing & Cost
 Experience                & Reach                   Processing                & Customization        Integration            Features


    See HTML...               See HTML...               See HTML...               See HTML...            See HTML...            See HTML...              See HTML...                  See HTML...

    Elements that can         Most content can          Reduced server            Some UI compo-                                                         Code is likely to be         Small size reduces
    be specified in           be indexed by             loads may be              nents can be                                                           forward-compatible           bandwidth costs
    HTML are familiar         search engines.           achieved through          custom made. ie:                                                       due to open
    to the largest                                      increased local           sliders                                                                standards                    Relatively easy to
    amount of Web             Works with most           processing                                                                                       supported by                 find people with
    users                     modern browsers           (dynamic hiding,          Toolkits:                                                              multiple browser             DHTML program-
                              (4.x browsers and         revealing,                dynamic drive,                                                         vendors. For                 ming skills.
    Animation                 later)                    repositioning, and        dynarch.com,                                                           example: W3C
    (repositioning and                                  rewriting of              softplex.com,                                                          DOM (Document                Higher develop-
    motion), drag and         JavaScript may be         interface elements)       navsoft.com,                                                           Object Model)                ment costs due to
    drop, layering, and       turned off by users                                 and many more                                                          activity                     sophisticated,
    style changes are         and administrators        Logic is delivered                                                                                                            branching code
    enabled for                                         to browser with                                                                                                               (required to
    interface elements                                  HTML page and                                                                                                                 support multiple
                                                        can be dissected.                                                                                                             browsers)
    Inconsistent                                        As a result, secure
    support for                                         data cannot be                                                                                                                Common UI
    transparency and                                    sent this way                                                                                                                 features can be
    layering                                            (passwords, serial                                                                                                            difficult to
                                                        numbers etc.)                                                                                                                 implement
    Usually has faster                                                                                                                                                                (tabbing, tabular
    download times,                                                                                                                                                                   data, tree views,
    though large                                                                                                                                                                      drag and drop,
    JavaScript apps                                                                                                                                                                   saving, etc.)
    can be slow to load

    No easy way to
    integrate audio &
    video content         Examples:                                                          Read More:
                          • TurboTax –file your tax returns (http://www.turbotax.com)        • Dynamic Duo –Cross browser Dynamic HTML
                          • Yahoo! Mail                                                      [http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/]
                          • Hotmail                                                          • What is DHTML? [http://webmonkey.wired.com/webmonkey/geektalk/97/39/index3a.html]
                                                                                                                                                               Web Application Solutions: A Designer's Guide | 8
DHTML with Remote Scripting via iFrame

Overview:
See DHTML Overview... An iframe is an inline frame (placed inside another HTML page) that contains a separate HTML page with its own URL. DHTML can use hidden iFrames to get information from
the server without refreshing the page [Ashley 3]


                                                                                                                                                                 Benefit          Drawback            Neutral


 User                     Deployment                                        Components            Back-end                  Unique
                                                                                                                                                     Future Proofing              Staffing & Cost
 Experience               & Reach                  Processing               & Customization       Integration               Features


    See DHTML...             See DHTML...             See DHTML...             See DHTML...          See DHTML...              See DHTML...             See DHTML...                 See DHTML...

    Applications are         Works with most          iframes can be                                 reduced server                                                                  Higher develop-
    more responsive          modern browsers          dynamically                                    loads due to more                                                               ment costs due to
                             (Internet Explorer       refreshed with                                 processing on                                                                   sophisticated,
    Linking to, saving,      5.5+, Netscape 6+,       server-side content                            client-side                                                                     branching code
    and book-marking         and Mozilla 1+)          with Javascript and                                                                                                            (required to
    content can be                                    a DOM ID                                                                                                                       support multiple
    tricky.                  Dynamic content                                                                                                                                         browsers)
                             won’t be indexed         Only enables
    Content may be           by search engines        content to be                                                                                                                  Extra effort
    incorrect when                                    loaded in a                                                                                                                    required for good
    users click reload                                pre-defined area                                                                                                               accessibilitiy (ie:
    and back buttons                                  (frame) on a Web                                                                                                               screen readers)
                                                      page (though
                                                      iframe content can
                                                      be put in a DIV and
                                                      moved procedur-
                                                      ally)




                                                                                         Read More:
Examples:                                                                                • http://www.cs.tut.fi/~jkorpela/html/iframe.html
                                                                                         • Remote Scripting with iframe [http://developer.apple.com/internet/webcontent/iframe.htm]
• http://farechase.yahoo.com (Flight Search only. Hotel search uses xmlHttpRequest)
                                                                                                                                                              Web Application Solutions: A Designer's Guide | 9
DHTML with XMLHttpRequest (aka AJAX)

Overview
See DHTML Overview... XMLHtttpRequest is an object that allows (compatible) web clients to submit and retrieve XML data from a server without reloading the page. JavaScript processes the data in
the background and renders it via the Document Object Model (DOM) [Garret 4]. This can happen asynchronously, allowing the user to continue with his task while the data gets processed and updated.



                                                                                                                                                                  Benefit          Drawback            Neutral


 User                       Deployment                                        Components              Back-end               Unique
                                                                                                                                                      Future Proofing              Staffing & Cost
 Experience                 & Reach                 Processing                & Customization         Integration            Features


    See DHTML...              See DHTML...            See DHTML...              See DHTML...            See DHTML...            See DHTML...             See DHTML...                 See DHTML...

    Enhance user              XMLHtttpRequest         Further reduction in      Due to large                                                             XMLHttpRequest is            Higher develop-
    experience with           is available in         server loads due to       interest in the web                                                      an API that                  ment costs due to
    better, faster forms.     Netscape/Mozilla,       processing on the         development                                                              belongs to                   sophisticated,
    Enables real-time         Internet Explorer       client side and pure      community,                                                               Microsoft-could be           branching code
    updates and               5+, and Safari          data requests             DHTML toolkits                                                           depreciated.                 (required to
    validations as user       browsers                (without presenta-        with XMLHttpRe-                                                          However W3C has              support multiple
    moves from field to       (Safari & Opera         tion layer) after the     quest are sure to                                                        initiated a similar          browsers)
    field or even after       can only support a      initial load.             come soon. (For                                                          “XML Load and
    each character            subset of requests)                               now, see SAJAX                                                           Save Specification”          Extra effort
    entry.                                            No socket                 and JSON-RPC)                                                            in DOM Level 3.              required for good
                              Content requested       connections -                                                                                                                   accessibilitiy (ie:
    Content may be            through                 server can not                                                                                                                  screen readers)
    incorrect when            XMLHttpRequest          initiate communica-
    users click reload        object cannot be        tions to client app
    and back buttons          indexed by search
                              engines or read by
    Linking to, saving,       some screen
    and book-marking          readers.
    content can be
    tricky

    Enhanced
    functionality within
    a web browser can
    be difficult to
    communicate
                                                                                           Read More:
Examples:
                                                                                           • http://developer.apple.com/internet/webcontent/xmlhttpreq.html
• www.gmail.com (load JavaScript engine at start of session)
                                                                                           • XMLHttpRequest for the masses: http://www.allinthehead.com/retro/241/xmlhttprequest-for-the-masses
• map.search.ch
                                                                                           • http://www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility
• maps.google.com
                                                                                           • Simple Ajax Toolkit: http://www.modernmethod.com/sajax/
• www.flickr.com (edit the titles of your photos in situ)
                                                                                           • JSON-RPC: http://oss.metaparadigm.com/jsonrpc/
• www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
                                                                                                                                                              Web Application Solutions: A Designer's Guide | 10
Flash 6 (and higher)

Overview:
Macromedia’s Flash 6+ is a multi-platform plug-in installed in most Web browsers as well as an application for developing content, interfaces, and applications. Flash 6+ supports rich
vector-graphics, animation, and the ability to build advanced web applications using scripting, forms, XML, and server socket connections. Flash 5 has limited support for some of these feature
sets.

                                                                                                                                                                       Benefit          Drawback            Neutral


 User                      Deployment                                          Components              Back-end                   Unique
                                                                                                                                                           Future Proofing              Staffing & Cost
 Experience                & Reach                  Processing                 & Customization         Integration                Features


                                                                                                                                                                                           Decrease costs by
    Flash offers a rich      According to              Built-in ActionScript     Flash Pro comes          Reduction in server       Applications can be       Given proprietary
                                                                                                                                                                                           developing/testing
    set of features for      Macromedia, Flash         enables dynamic           wtih many pre-built      loads due to              ported to Flash Lite      format, APIs may
                                                                                                                                                                                           once for all
    engaging interac-        6+ is installed on        processing without        components: data         processing on the         for use on mobile         change from
                                                                                                                                                                                           platforms
    tions including drag     95.1% of Internet-        page reloads              grid, tree view,         client side and pure      devices (w/Flash 4        version to version.
    and drop,                enabled desktops          (server hits)             accordian, menu          data requests             functionality)            However,
                                                                                                                                                                                           ActionScript 2 is
    animation,               in the US, over                                     bar, etc.                (without presenta-                                  Macromedia
                                                                                                                                                                                           object-oriented and
    transparency,            96% in Europe and         Natively supports                                  tion layer) after the     Can enable back           seems to be
                                                                                                                                                                                           based on ECMA
    layering, audio and      Canada and 92%            vector graphics,          Many additional          initial load.             button by access-         committed to
                                                                                                                                                                                           Script (like
    video streaming.         in Asia.                  streaming audio,          Flash UI toolkits                                  ing history object        standards such as
                                                                                                                                                                                           JavaScript), so
                                                       and streaming             and components           Socket connections                                  CSS, XML, SOAP,
                                                                                                                                                                                           developers familiar
    Enables real-time        Applications              video                     available by 3rd         allow server-             Bad rep from              SVG, etc.
                                                                                                                                                                                           w/JavaScript can
    updates and              delivered through                                   parties                  initiated communi-        designers
                                                                                                                                                                                           quickly pick up
    validations as user      the Flash player          Client-side                                        cations to client         reinventing simple
                                                                                                                                                                                           ActionScript
    completes form           can run identically       XML/DOM parsing           Both flexible and        app                       UI widgets (in part
    fields                   on all the major          has latency issues        grid layouts are                                   due to Flash’s
                                                                                                                                                                                           However,
                             operating systems                                   possible (using          Flash 6+ can be           component set)
                                                                                                                                                                                           programmers with
    Potential latency                                                            container objects)       used as the
                                                                                                                                                                                           relevant Flash
    due to relevantly        Near seamless                                                                presentation layer        In theory code is
                                                                                                                                                                                           experience are
    large initial            upgrade process                                     Flash’s standard         with common               protected, but in
                                                                                                                                                                                           relatively scarce
    download and             for plug-in                                         components are           server technologies       reality it can be
    plug-in launch                                                               not easy to              such as Java              cracked with
                                                                                                                                                                                           Development could
                             Traditional tracking                                customize                Servlets, JSP,            simple tools.
                                                                                                                                                                                           take longer
    Not fully integrated     and metrics can be                                                           PHP, ASP, etc.
                                                                                                                                                                                           because everything
    with browser             problematic; but                                                                                       Can be connected
                                                                                                                                                                                           must be created
    environment              has ability to track                                                                                   to things like Flash
                                                                                                                                                                                           from scratch:
    (reload, back            specific states                                                                                        Communication
                                                                                                                                                                                           concept of pages,
    buttons and                                                                                                                     Server to enable
                                                                                                                                                                                           links, browse
    bookmarks).              Flash content is not                                                                                   real time AV Chat,
                                                                                                                                                                                           history, scale, etc.
    Workarounds exist        indexed by search                                                                                      IM, etc. between
                             engines. (work-                                                                                        Flash Clients
                                                                                             Read More:
                             arounds exist)
                                                                                             • Flash Installation Stats:
                                                                                             http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html
Examples:                                                                                    • Accessibility: http://www.macromedia.com/macromedia/accessibility/features/flex/best_practices.html
• Rich Internet Applications (http://www.klynch.com/archives/000074.html)                    • Java and Flash socket connections: http://www.dagblastit.com/java/sockets.html
                                                                                                                                                                   Web Application Solutions: A Designer's Guide | 11
Flash with Flex or Laszlo Presentation Server

Overview:
See Flash Overview...Flex and Laszlo offer presentation servers that can be installed on the server side. Each has a rich library of user interface components, an XML-based markup language used to
declaratively lay out these components, and an object-oriented programming language which handles user interactions with the application [Coenraets 6].


                                                                                                                                                                    Benefit          Drawback            Neutral


 User                     Deployment                                          Components               Back-end               Unique
                                                                                                                                                       Future Proofing               Staffing & Cost
 Experience               & Reach                  Processing                 & Customization          Integration            Features


                                                      Further reduction in      Flex’s MXML toolkit      Presentation tier                                 Macromedia has               Laszlo and Flex
                                                      server loads due to       provides compo-          (ASP, JSP,                                        abandoned server             presentation
                                                      processing on the         nents with standard      Servlets, ColdFu-                                 products in the              servers can speed
                                                      client side and pure      presentation             sion, Flex or                                     past including:              up development
                                                      data requests                                      Laszlo) can                                       Drumbeat,
                                                      (without presenta-        Flex’s MXML code         integrate with                                    SiteSpring,                  Laszlo presentation
                                                      tion layer) after the     can be styled with       common back-                                      LikeMinds, Kawa,             server is open
                                                      initial load.             CSS or Flash             ends (EJB, Java                                   etc. (Most of these          source
                                                                                                         Beans and Web                                     features are rolled
                                                      Laszlo presentation       Laszlo’s LZX toolkit     Services , etc.)                                  into other products          Flex Builder IDE
                                                      server has                provides compo-                                                            such as Flex or              makes it relatively
                                                      performance               nents with standard                                                        DreamWeaver)                 easy to build
                                                      issues                    presentation                                                                                            applications with
                                                                                                                                                                                        Flex
                                                                                Laszlo only
                                                                                compiles to Flash 5                                                                                     Development in
                                                                                standard (Laszlo                                                                                        Flex/Laszlo more
                                                                                has Flash 6 in                                                                                          familiar to
                                                                                beta)                                                                                                   traditional
                                                                                                                                                                                        developers
                                                                                                                                                                                        (relative to Flash
                                                                                                                                                                                        programming)

                                                                                                                                                                                        Flex presentation
                                                                                                                                                                                        server is expensive

                                                                                                                                                                                        Laszlo does not
                                                                                                                                                                                        have a comparable
                                                                                                                                                                                        IDE to Flex Builder
                                                                                           Read More:
                                                                                           • Flex Overview: http://www.macromedia.com/software/flex/productinfo/brz_overview/
Examples:                                                                                  • Laszlo Overview: http://www.laszlosystems.com/products/
• Laszlo: Behr Color Smart: http://www.behr.com/behrx/index.jsp                            • Comparison of Flex vs. Laszlo: http://www.infoworld.com/article/04/12/03/49TClasflex_1.html
• Flex: http://www.macromedia.com/devnet/flex/example_apps.html                            • IDE for Laszlo: http://alphaworks.ibm.com/tech/ide4laszlo
                                                                                                                                                                Web Application Solutions: A Designer's Guide | 12
Java Applets

Overview:
A Java Applet is a small program written in the Java programming language that can be embedded in an HTML page. Java applets can run in a web browser using a Java virtual machine (JVM)




                                                                                                                                                                       Benefit          Drawback            Neutral


 User                      Deployment                                           Components             Back-end                  Unique
                                                                                                                                                            Future Proofing             Staffing & Cost
 Experience                & Reach                   Processing                 & Customization        Integration               Features


    Java Applets offer        Java applets              Applets are                Swing and              HTTP, HTTPS,             Applets can write          Java is more                 Many developers
    a rich set of             require the Java          embedded in web            JavaBean controls      FTP, and Gopher          to local disk if they      commonly used as             who know Java
    features for              plug-in or Java           pages and go               available              are supported in         are digitally signed       a platform than it is        relatively available
    engaging interac-         Virtual Machine           beyond http for                                   the 1.2.2 release of     (via a dialog              for applets
    tions including drag      (JVM) already             remote data                Swing can be slow      Java Plug-in             window)
    and drop,                 installed in most         request/response           and cumbersome         Software.                                           The use of applets
    animation, and            browsers.                                            in a web-based                                  Applets run in a           does not seem to
    other UI elements                                   Plug-in needs to be        client UI              Full Java Compat-        “sandbox” so few           be matching the
    found in traditional      Java Plug-in              installed only once                               ible support; offer      security concerns          growth of the Web
    desktop apps.             supports IE and           and then it caches                                all the benefits of      exist; strict rules on
                              Netscape 3.0+ on          all applets.                                      the Java language,       how an applet can          Microsoft decided
    Enables real-time         Windows 95, 98,                                                             including portabil-      interact with your         to stop shipping a
    updates and               NT 4.0, and Solaris       Very good                                         ity, faster develop-     computer and the           JVM with it's
    validations as user       2.5 and 2.6. JVM          processor-intensive                               ment, powerful API       network                    newest versions of
    moves completes           download is 5MB           visualization                                     libraries, etc. [1]                                 Internet Explorer
    forms                                               rendering                                                                  Network access
                              Inconsistent              (interactive and                                  Can create a             only to the
    Latency due to            browser implemen-         dynamically                                       socket connection        launching server;
    relevantly large          tations. (However,        generated graphs,                                 to servers and           only reliable source
    initial download          Sun’s Java plug-in        charts, etc.)                                     stream data              of data and storage
    and plug-in launch        allows applets to                                                           between the applet       for an applet is on
                              run in Sun’s Java         Can offload                                       and the server           its host server.
    Linking to, saving,       Runtime Environ-          server-side                                                                Applets are not
    and book-marking          ment to ensure            processing to the                                                          permitted to invoke
    content can be            consistency)              client to save both                                                        any local execut-
    tricky                                              CPU overhead and                                                           able program on
                              Java Applet               network bandwidth                                                          the client's
                              content is not                                                                                       machine.
                              indexed by search
                              engines.
Examples:
                                                                                             Read More:
• http://java.sun.com/applets/
• Catalog View is a useful database applet that can display your data in a grid display.     • http://www.matisse.net/files/glossary.html
http://javaboutique.internet.com/CatalogView/                                                • Sun hasn't set yet on Java applets, Rick Moore http://www.adtmag.com/article.asp?id=7074
                                                                                                                                                                   Web Application Solutions: A Designer's Guide | 13
Active X

Overview:
Active X is an application program interface (API) developed by Microsoft that extends and enhances the functionality of web sites viewed in Internet Explorer. When accessed through Internet Explorer,
Active X controls can have full access to the Windows operating system.


                                                                                                                                                                       Benefit          Drawback            Neutral


 User                      Deployment                                            Components             Back-end                 Unique
                                                                                                                                                           Future Proofing              Staffing & Cost
 Experience                & Reach                     Processing                & Customization        Integration              Features


    Adds interactive             Works on most           Reduced server            There are many          Active X can             Active X controls         Microsoft will               Can be developed
    features and                 Windows machines        loads due to              ActiveX controls        integrate directly       can be reused in          determine the                in Windows IDE
    animation found in                                   processing on the         available with          with SQL servers         other Microsoft           future of Active X           tools.
    traditional desktop          Active X controls       client side and pure      functionality           and many other           programming and           (hasn’t received
    applications                 can be installed on     data requests             ranging from            server technolo-         database                  much development
                                 the user’s              (without presenta-        simple to full-         gies.                    languages.                attention from
    Integration with             computer and run        tion layer) after the     featured spread-                                                           Microsoft for
    local resources              locally during          initial load.             sheets and word                                  Access to local           number of years)
    (files, hardware,            subsequent                                        processors.                                      resources can
    office applications,         sessions.               Ability to create                                                          create security           Increased use of
    etc.) possible                                       socket connections                                                         issues (Mandatory         non-windows
                                 Not cross-platform      and server initiated                                                       registration system       platforms (ie: Max
                                 (Microsoft              communications                                                             for Active X              OS X, mobile
                                 Windows only), not                                                                                 controls helps deal       technologies, etc)
                                 recommended                                                                                        with this issue)
                                 when user
                                 platforms can vary




                                                                                              Read More:
                                                                                              • http://msdn.microsoft.com/library/default.asp?url=/workshop/components/activex/intro.asp
Examples:                                                                                     • http://msdn.microsoft.com/workshop/components/activex/intro.asp
                                                                                              • Security issues: http://office.microsoft.com/en-us/assistance/HA011403101033.aspx
• http://activex.microsoft.com

                                                                                                                                                                   Web Application Solutions: A Designer's Guide | 14
Java Web Start

Overview:
Java Web Start is an application that enables Java client applications to be launched, deployed, and updated from a standard Web server.




                                                                                                                                                                  Benefit          Drawback            Neutral


 User                      Deployment                                       Components               Back-end                  Unique
                                                                                                                                                       Future Proofing             Staffing & Cost
 Experience                & Reach                  Processing              & Customization          Integration               Features


    Applications are         Java Web Start           Same as any Java         Same as any Java         Applications must        Applications work                                    Free, Redistribut-
    cached locally           version 1.0 or 1.0.1     desktop application      desktop application      be packaged in           offline                                              able in 12
    once downloaded          must be installed                                                          accordance to the                                                             languages
                             on the client                                                              Java Web Start           Java Web Start
    Supports complete        machine (10 MB                                                             guidelines               allows client-side                                   Applications can be
    desktop interac-         file); then applica-                                                                                Java applications                                    written normally as
    tions                    tions can be                                                               Can only be used         access to a variety                                  stand-alone
                             deployed via URLs                                                          for client Java          of local-machine                                     applications for the
    Applications are                                                                                    applications written     resources, such as                                   Java 2 platform
    launched indepen-        Locally cached                                                             for the Java 2           file access, and
    dent of Web              version of                                                                 platform                 clipboard access
    browser                  application is                                                                                      (require dialog box
                             automatically                                                              Requires custom          acceptance)
    Variable applica-        updated when run                                                           code on server;
    tion access may be       and remote version                                                         requires special         Not well-suited for
    counter-intuitive to     has been updated                                                           configuring of the       deploying
    users                                                                                               JNLP MIME type           applications to
                             Available on                                                                                        mobile devices
                             Windows, Solaris,
                             OS X (pre-
                             installed), and
                             Linux

                             Requires manual
                             installation of Java
                             Web Start on each
                             client machine
                             (more tedious than
                             browser’s
                             automatic
                                                                                          Read More:
                             installation of Java
                                                                                          • Java Web Start to the rescue, Raghavan N. Srinivas
                             plug-in)
Examples:                                                                                 http://www.javaworld.com/javaworld/jw-07-2001/jw-0706-webstart.html
                                                                                          • Unofficial Java Web Start/JNLP FAQ, Gerald Bauer: http://webstartfaq.com/
• http://www.up2go.net (More Than 70 Apps Listed; Apps Are Rated)
                                                                                          • http://www-106.ibm.com/developerworks/java/library/j-webstart/
• http://www.connectandwork.com/external
                                                                                                                                                              Web Application Solutions: A Designer's Guide | 15
Windows Smart Clients

Overview:
A smart client is a windows application that bridges the gap between thin clients and rich clients. Smart clients are
web-maintainable and deployable (can load components it needs to run from a remote location), yet offer rich interactions
through compiled, local runtimes

                                                                                                                                                                        Benefit          Drawback            Neutral


 User                      Deployment                                          Components               Back-end                 Unique
                                                                                                                                                           Future Proofing               Staffing & Cost
 Experience                & Reach                  Processing                 & Customization          Integration              Features


    Full desktop             Works on most             Server and network        Windows form              Can use SOAP,            Applications can          Microsoft has a               Developers can
    interactions are         Windows machines          load is reduced           libraries available       XML, HTTP, etc.          run offline               development                   use Microsoft
    possible (direct         (Requires Microsoft       because compo-                                      for data                                           roadmap to                    Visual Studio .NET
    manipulation,            Windows .NET              nents are only            Currently only                                     .Net framework            continue enhancing            as a drag and drop
    hotkeys, etc.)           framework)                updated if needed.        supports grid                                      provides security         smart clients over            IDE
                                                                                 layout (flexible                                   through code              the next several
    Application              Smart clients can         Peer to peer              layouts will be                                    access security           years.                        Reduce develop-
    components can           be deployed by            connectivity is           supported in                                       (CAS) infrastruc-                                       ment and mainte-
    be downloaded            CD, DVD, an               possible through          Longhorn smart                                     ture                                                    nance time due to
    dynamically as           application               ability to listen for     clients)                                                                                                   applications not
    needed allowing          deployment                incoming network                                                             Multiple versions of                                    subject to DLL
    applications to load     infrastructure, or a      requests                                                                     a smart client                                          conflicts
    quickly                  web server using                                                                                       application can
                             HTTP                      Initial dowload can                                                          target specific
    Integration with                                   be larger than                                                               devices
    local resources          Not cross-platform,       comparable thin
    (files, hardware,        not recommended           client solutions
    office applications,     when user
    etc.) possible with      platforms can vary
    .NET framework

    Variable applica-
    tion access may be
    counter-intuitive to
    users




                                                                                             Read More:
                                                                                             • http://msdn.microsoft.com/netframework/programming/winforms/smartclient.aspx
                                                                                             • http://msdn.microsoft.com/architecture/journal/default.aspx?pull=/library/en-us/dnmaj
Examples:                                                                                    /html/choosing_presentation_layer.asp
• http://www.windowsforms.net/Default.aspx?tabindex=6&tabid=48                               • www.code-magazine.com/Article.aspx?quickid=050023
                                                                                                                                                                    Web Application Solutions: A Designer's Guide | 16
Upcoming, Interesting and Relevant Technologies




Canoo Ultra Light Client (ULC)                                  Nexaweb                                                          Xforms
                                                                                                                                 Traditional HTML Web forms don't separate the purpose from
Build Rich Internet Applications with Java standards. ULC’s     Nexaweb provides a software platform for developing and
                                                                                                                                 the presentation of a form. XForms, in contrast, are comprised
pure java library offers a server-side API to Swing (servlet    deploying Enterprise Internet Applications. The Nexaweb
or bean), providing rich GUIs for J2EE applications.            platform includes the following: 1) J2EE server component, 2)    of separate sections that describe what the form does, and
Java-based thin-client presentation engine needs to be          150k java-based client app, 3) real-time messaging layer, 4)     how the form looks. This allows for flexible presentation
installed once for any number of applications; may be           WYSIWYG development environment.                                 options, including classic XHTML forms, to be attached to an
deployed by Java Web Start, as an applet, or by any other                                                                        XML form definition. XForms 1.0 is a W3C recommendation.
                                                                • http://www.nexaweb.com/products.asp
deployment mechanism                                                                                                             • http://www.w3.org/MarkUp/Forms/
• http://www.canoo.com/ulc                                      PDF & XDP
                                                                                                                                 XSL & XSLT
                                                                Adobe is trying to evolve PDF into an allpurpose fill-in-the-
Java WebCream                                                   forms container for Enterprise workflows. The new Adobe tool     The eXtensible Stylesheet Language (XSL) is a vocabulary
Acts as a Java AWT or Swing to HTML bridge. It is a             will have an IDE for creating forms in XDP files                 describing how to format eXtensible Markup Language(XML)
dynamic Java to HTML converter. WebCream turns thick             that are a superset of PDF and will use JavaScript as the       for different media.
client GUI applications and applets into DHTML websites.        programming API [6].                                             XSL Transformations (XSLT) can transform data using one
                                                                                                                                 XML vocabulary into another. XSLT processors can be
                                                                • http://www.adobe.com/products/acrobat/readstep2.html
Macromedia Central                                                                                                               installed on the server or executed within certain web
                                                                                                                                 browsers. XSLT have performance issues in high-volume
Unlike conventional web sites, Central applications can         SMIL
                                                                                                                                 applications.
function both online and offline, keeping important             The Synchronized Multimedia Integration Language (SMIL,
                                                                                                                                 • http://www-106.ibm.com/developerworks/xml/library/x-
information constantly available. Central applications run in   pronounced quot;smilequot;) HTML-like authoring language for
a controlled environment to keep sensitive data secure.                                                                          xslt/?article=xr
                                                                interactive audiovisual presentations.
And because Central automatically notifies the user when                                                                         • http://www.xml.com/pub/a/2003/11/26/learnXSLT.html
                                                                • http://www.w3.org/AudioVideo/
new versions are available, applications are always
up-to-date.
                                                                                                                                 XUI
                                                                SVG
• http://www.macromedia.com/software/central                                                                                     XUI is a Java and XML framework for building rich client,
                                                                Language for describing two-dimensional graphics in XML.
                                                                                                                                 desktop and mobile applications (including PDAs).
                                                                Graphics can be vector, bitmap or text. Promises the following
Macromedia Director                                             features: rich manipulation of graphic objects, leverage of      • http://xui.sourceforge.net/
A well-established way to create and deploy applications        W3C specifications and standards efforts, ability to use
for CDs, DVDs, kiosks, and the Internet                         light-weight vector graphics for fast downloads, high resolu-    XUL
• http://www.macromedia.com/software/director                   tion, high quality printing.                                     XML User Interface Language developed by Mozilla.
                                                                • http://www.adobe.com/svg/demos/main.html                       Pronounced “zool”. It is a markup language used to create
Microsoft’s Avalon & XAML                                       • http://www.w3.org/TR/SVG/intro.html                            dynamic user interfaces. Provides access to programming
Avalon is the platform for the next-generation of Microsoft                                                                      interfaces such as read/write over the network or communicat-
                                                                • http://www.w3.org/Graphics/SVG/SVG-Implementations
Windows client applications. It will create a new presenta-                                                                      ing with web services. Compatible with many standards such
tion platform by combining the features of the DHTML, a                                                                          as HTML, XHTML, XSLT, CSS2, DOM2. Will not work with
vector-based display engine, and Win32 development                                                                               Microsoft Internet Explorer.
platforms. XAML, Avalon’s markup language used to                                                                                • http://www.xulplanet.com/tutorials/xultu/
declaratively represent the user interface, enables the                                                                          • http://xulplanet.com/tutorials/whyxul.html
separation of UI design from the underlying code.
• http://msdn.microsoft.com/Longhorn/understanding/pillars
/avalon/avnov04ctp/default.aspx



                                                                                                                                                        Web Application Solutions: A Designer's Guide | 17
Authors




Luke Wroblewski is an interface designer, strategist, author,   Frank Ramirez, Principal at Ramirez Design LLC, is a user           Reviewers
                                                                experience strategist, researcher, and design consultant. Frank     Much thanks to the following individuals who contributed to the
and Principal at LukeW Interface Designs, a consulting firm
                                                                has led the design of many digital products and services,           ideas and accuracy of this paper:
he founded in 1996. Luke has authored a book on Web
                                                                including e-commerce applications, touch-screen kiosks, rich
interface design principles titled Site-Seeing: A Visual
                                                                                                                                    Benjamin Wigton, Lead Interface Engineer, Avenue A /
                                                                internet applications, intranets and training programs. Clients
Approach to Web Usability (Wiley & Sons, 2002) and multiple
                                                                include Yahoo!, eBay and numerous start-ups.                        Razorfish
articles on interface design including those featured in his
                                                                                                                                    David Heller, Principal Designer, IntraLinks & Steering
own Web-zine, Functioning Form.
                                                                Prior to starting his consultancy, Frank was Sr. Information        Committee Member, Interaction Design Group (IxDG)
                                                                                                                                    Dirk Knemeyer, Principal, Involution Studios
                                                                Architect at Walmart.com where he led requirements definition
Previously, Luke taught Interface Design courses for the
                                                                                                                                    Erin Malone, Director, Platform Design, Yahoo! Inc.
                                                                and information architecture for multiple in-store, online and
Graduate School of Library and Information Science at the
                                                                                                                                    James Reffell, Sr. UI Designer, eBay Inc.
                                                                cross-channel initiatives. He participated in a wide variety of
University of Illinois at Urbana-Champaign and worked as a
                                                                                                                                    Jamie Hoover, Sr. UI Designer, eBay Inc.
                                                                project activities including: discovery research, concept
Senior Interface Designer at the National Center for
                                                                                                                                    Johnathan Boutelle, Principal, Uzanto Consulting
                                                                generation, usability testing, cross-functional collaboration, IA
Supercomputing Applications (NCSA), birthplace of the first
                                                                                                                                    Michael Hoch, Director of Prototype Design, Yahoo! Inc.
                                                                documentation and communication.
readily available graphical Web browser, NCSA Mosaic. At
                                                                                                                                    Peter Bogaards, Founder, BogieLand Information Design &
NCSA, Luke designed interface solutions for
                                                                Frank earned his B.S. in Graphic Design and has designed            Information Architecture
Hewlett-Packard, IBM, and Kellogg's, and co-developed the
                                                                                                                                    Todd Warfel, Partner, Design & Usability Specialist,
                                                                enterprise-level web applications since 1996.
Open Portal Interface Environment (OPIE). Luke's research
                                                                                                                                    MessageFirst
on Web-based interface designs has been published and
                                                                                                                                    Uday Gajendar, User Experience Pathfinder, Adobe Systems
presented at national and international conferences.
                                                                                                                                    Inc.
                                                                                                                                    Ziya Oz, Consultant, Application Strategy/Architecture/Design

                                                                                                                                    *Note: The opinions of these reviewers may not reflect those of
                                                                                                                                    their employers.




                                                                                                                                                            Web Application Solutions: A Designer's Guide | 18
Web Application Solutions

More Related Content

What's hot

IDM Resume _ Kiran
IDM Resume _ KiranIDM Resume _ Kiran
IDM Resume _ KiranKiran Kumar
 
The Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThe Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThomas Burleson
 
Contrast cbt cloud computing - v.2
Contrast cbt cloud computing - v.2Contrast cbt cloud computing - v.2
Contrast cbt cloud computing - v.2contrastcbt
 
10 Things You Should Know About MDD
10 Things You Should Know About MDD10 Things You Should Know About MDD
10 Things You Should Know About MDDJohan den Haan
 
Client server computing
Client server computingClient server computing
Client server computingjorge cabiao
 
Enhancing Customer Centric Supply Chains - Part 2
Enhancing Customer Centric Supply Chains - Part 2 Enhancing Customer Centric Supply Chains - Part 2
Enhancing Customer Centric Supply Chains - Part 2 GXS
 
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...Introduction to IBM Worklight: Building and connecting cross-platform mobile ...
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...Jeremy Siewert
 
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...Brian Wilson
 
112321 112333 wirless application protocol
112321 112333 wirless application protocol112321 112333 wirless application protocol
112321 112333 wirless application protocolJAINIK PATEL
 

What's hot (10)

Omni - The Integration Company
Omni - The Integration CompanyOmni - The Integration Company
Omni - The Integration Company
 
IDM Resume _ Kiran
IDM Resume _ KiranIDM Resume _ Kiran
IDM Resume _ Kiran
 
The Flash to HTML5 Opportunity
The Flash to HTML5 OpportunityThe Flash to HTML5 Opportunity
The Flash to HTML5 Opportunity
 
Contrast cbt cloud computing - v.2
Contrast cbt cloud computing - v.2Contrast cbt cloud computing - v.2
Contrast cbt cloud computing - v.2
 
10 Things You Should Know About MDD
10 Things You Should Know About MDD10 Things You Should Know About MDD
10 Things You Should Know About MDD
 
Client server computing
Client server computingClient server computing
Client server computing
 
Enhancing Customer Centric Supply Chains - Part 2
Enhancing Customer Centric Supply Chains - Part 2 Enhancing Customer Centric Supply Chains - Part 2
Enhancing Customer Centric Supply Chains - Part 2
 
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...Introduction to IBM Worklight: Building and connecting cross-platform mobile ...
Introduction to IBM Worklight: Building and connecting cross-platform mobile ...
 
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
The Power of Two: Using IBM Standards Processing Engine for EDI Commerce or H...
 
112321 112333 wirless application protocol
112321 112333 wirless application protocol112321 112333 wirless application protocol
112321 112333 wirless application protocol
 

Viewers also liked

¿Qué es Bio Oil?
¿Qué es Bio Oil?¿Qué es Bio Oil?
¿Qué es Bio Oil?BioOil
 
Sport gegen Krebs Sponsoring
Sport gegen Krebs SponsoringSport gegen Krebs Sponsoring
Sport gegen Krebs SponsoringSebastian Jorde
 
Edes 4006 material examen #1
Edes 4006 material examen #1 Edes 4006 material examen #1
Edes 4006 material examen #1 Edward Xavier
 
avisos publicitarios o de propaganda
avisos publicitarios o de propagandaavisos publicitarios o de propaganda
avisos publicitarios o de propagandaDiego
 
La bruyere caracteres
La bruyere caracteresLa bruyere caracteres
La bruyere caracteresMMenier
 

Viewers also liked (7)

¿Qué es Bio Oil?
¿Qué es Bio Oil?¿Qué es Bio Oil?
¿Qué es Bio Oil?
 
Sport gegen Krebs Sponsoring
Sport gegen Krebs SponsoringSport gegen Krebs Sponsoring
Sport gegen Krebs Sponsoring
 
Edes 4006 material examen #1
Edes 4006 material examen #1 Edes 4006 material examen #1
Edes 4006 material examen #1
 
Negrazul
NegrazulNegrazul
Negrazul
 
Reto 5€__Cofre regalo
Reto 5€__Cofre regaloReto 5€__Cofre regalo
Reto 5€__Cofre regalo
 
avisos publicitarios o de propaganda
avisos publicitarios o de propagandaavisos publicitarios o de propaganda
avisos publicitarios o de propaganda
 
La bruyere caracteres
La bruyere caracteresLa bruyere caracteres
La bruyere caracteres
 

Similar to Web Application Solutions

Web Application Solutions
Web Application SolutionsWeb Application Solutions
Web Application Solutionsmarvin256
 
Web applicationsolutions
Web applicationsolutionsWeb applicationsolutions
Web applicationsolutionsNika Stuard
 
Internet applications unit1
Internet applications unit1Internet applications unit1
Internet applications unit1MSc CST
 
Web Design Solutions
Web Design Solutions Web Design Solutions
Web Design Solutions APARNA SANAKA
 
Web Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureWeb Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureVersatile Mobitech
 
SOA an architecture on the Desktop
SOA an architecture on the DesktopSOA an architecture on the Desktop
SOA an architecture on the DesktopVincent Perrin
 
All-inclusive insights on Building JavaScript microservices with Node!.pdf
All-inclusive insights on Building JavaScript microservices with Node!.pdfAll-inclusive insights on Building JavaScript microservices with Node!.pdf
All-inclusive insights on Building JavaScript microservices with Node!.pdfShelly Megan
 
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018UX Antwerp Meetup
 
IBM Application Acceleration Data Sheet
IBM Application Acceleration Data SheetIBM Application Acceleration Data Sheet
IBM Application Acceleration Data Sheetcathylums
 
Sencha Web Applications Come of Age
Sencha Web Applications Come of AgeSencha Web Applications Come of Age
Sencha Web Applications Come of Agebastila
 
Web Application Architecture: A Comprehensive Guide for Success in 2023
Web Application Architecture: A Comprehensive Guide for Success in 2023Web Application Architecture: A Comprehensive Guide for Success in 2023
Web Application Architecture: A Comprehensive Guide for Success in 2023stevefary
 
Cloud Resource Management
Cloud Resource ManagementCloud Resource Management
Cloud Resource ManagementNASIRSAYYED4
 
A Comprehensive Guide to Web Application Architecture
A Comprehensive Guide to Web Application ArchitectureA Comprehensive Guide to Web Application Architecture
A Comprehensive Guide to Web Application Architecturestevefary
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09Martha Rotter
 
Development of Multiplatform CMS System with Zend Framework
Development of Multiplatform CMS System with Zend FrameworkDevelopment of Multiplatform CMS System with Zend Framework
Development of Multiplatform CMS System with Zend FrameworkSinisa Vukovic
 
Cloud Native Patterns with Bluemix Developer Console
Cloud Native Patterns with Bluemix Developer ConsoleCloud Native Patterns with Bluemix Developer Console
Cloud Native Patterns with Bluemix Developer ConsoleMatthew Perrins
 

Similar to Web Application Solutions (20)

Web Application Solutions
Web Application SolutionsWeb Application Solutions
Web Application Solutions
 
Web applicationsolutions
Web applicationsolutionsWeb applicationsolutions
Web applicationsolutions
 
Internet applications unit1
Internet applications unit1Internet applications unit1
Internet applications unit1
 
Web Design Solutions
Web Design Solutions Web Design Solutions
Web Design Solutions
 
Web Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureWeb Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application Architecture
 
SOA an architecture on the Desktop
SOA an architecture on the DesktopSOA an architecture on the Desktop
SOA an architecture on the Desktop
 
All-inclusive insights on Building JavaScript microservices with Node!.pdf
All-inclusive insights on Building JavaScript microservices with Node!.pdfAll-inclusive insights on Building JavaScript microservices with Node!.pdf
All-inclusive insights on Building JavaScript microservices with Node!.pdf
 
RIA
RIARIA
RIA
 
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018
Kristiaan De Roeck at UX Antwerp Meetup - 30 January 2018
 
IBM Application Acceleration Data Sheet
IBM Application Acceleration Data SheetIBM Application Acceleration Data Sheet
IBM Application Acceleration Data Sheet
 
Mobile gis
Mobile gisMobile gis
Mobile gis
 
Sencha Web Applications Come of Age
Sencha Web Applications Come of AgeSencha Web Applications Come of Age
Sencha Web Applications Come of Age
 
Web Application Architecture: A Comprehensive Guide for Success in 2023
Web Application Architecture: A Comprehensive Guide for Success in 2023Web Application Architecture: A Comprehensive Guide for Success in 2023
Web Application Architecture: A Comprehensive Guide for Success in 2023
 
Cloud Resource Management
Cloud Resource ManagementCloud Resource Management
Cloud Resource Management
 
Web 2.0 e RIAs
Web 2.0 e RIAsWeb 2.0 e RIAs
Web 2.0 e RIAs
 
A Comprehensive Guide to Web Application Architecture
A Comprehensive Guide to Web Application ArchitectureA Comprehensive Guide to Web Application Architecture
A Comprehensive Guide to Web Application Architecture
 
Client Continuum Dec Fy09
Client Continuum Dec Fy09Client Continuum Dec Fy09
Client Continuum Dec Fy09
 
Unit 3 Cloud Computing.pdf
Unit 3 Cloud Computing.pdfUnit 3 Cloud Computing.pdf
Unit 3 Cloud Computing.pdf
 
Development of Multiplatform CMS System with Zend Framework
Development of Multiplatform CMS System with Zend FrameworkDevelopment of Multiplatform CMS System with Zend Framework
Development of Multiplatform CMS System with Zend Framework
 
Cloud Native Patterns with Bluemix Developer Console
Cloud Native Patterns with Bluemix Developer ConsoleCloud Native Patterns with Bluemix Developer Console
Cloud Native Patterns with Bluemix Developer Console
 

More from Alexander Sergeev

How do we prioritize our product backlog in Hygger.io?
How do we prioritize our product backlog in Hygger.io?How do we prioritize our product backlog in Hygger.io?
How do we prioritize our product backlog in Hygger.io?Alexander Sergeev
 
Как мы делаем приоритизацию нашего product backlog в Hygger.io
Как мы делаем приоритизацию нашего product backlog в Hygger.ioКак мы делаем приоритизацию нашего product backlog в Hygger.io
Как мы делаем приоритизацию нашего product backlog в Hygger.ioAlexander Sergeev
 
Юзабилити как гормон роста социальной сети
Юзабилити как гормон роста социальной сетиЮзабилити как гормон роста социальной сети
Юзабилити как гормон роста социальной сетиAlexander Sergeev
 
Axure - the best for sure... w/ Denwer
Axure - the best for sure... w/ DenwerAxure - the best for sure... w/ Denwer
Axure - the best for sure... w/ DenwerAlexander Sergeev
 
Axure - the best for sure... with Denwer
Axure - the best for sure... with DenwerAxure - the best for sure... with Denwer
Axure - the best for sure... with DenwerAlexander Sergeev
 
О профессии юзабилити-специалиста для студентов-психологов
О профессии юзабилити-специалиста для студентов-психологовО профессии юзабилити-специалиста для студентов-психологов
О профессии юзабилити-специалиста для студентов-психологовAlexander Sergeev
 
Google Analytics - как средство убеждения заказчика потратиться на юзабилити
Google Analytics - как средство убеждения заказчика потратиться на юзабилитиGoogle Analytics - как средство убеждения заказчика потратиться на юзабилити
Google Analytics - как средство убеждения заказчика потратиться на юзабилитиAlexander Sergeev
 
ClickDensity - новая буква в веб-аналитике
ClickDensity - новая буква в веб-аналитикеClickDensity - новая буква в веб-аналитике
ClickDensity - новая буква в веб-аналитикеAlexander Sergeev
 

More from Alexander Sergeev (14)

How do we prioritize our product backlog in Hygger.io?
How do we prioritize our product backlog in Hygger.io?How do we prioritize our product backlog in Hygger.io?
How do we prioritize our product backlog in Hygger.io?
 
Как мы делаем приоритизацию нашего product backlog в Hygger.io
Как мы делаем приоритизацию нашего product backlog в Hygger.ioКак мы делаем приоритизацию нашего product backlog в Hygger.io
Как мы делаем приоритизацию нашего product backlog в Hygger.io
 
Somedia Presentation
Somedia PresentationSomedia Presentation
Somedia Presentation
 
Юзабилити как гормон роста социальной сети
Юзабилити как гормон роста социальной сетиЮзабилити как гормон роста социальной сети
Юзабилити как гормон роста социальной сети
 
Axure. Creating tab-menu.
Axure. Creating tab-menu.Axure. Creating tab-menu.
Axure. Creating tab-menu.
 
Axure - the best for sure... w/ Denwer
Axure - the best for sure... w/ DenwerAxure - the best for sure... w/ Denwer
Axure - the best for sure... w/ Denwer
 
Axure - the best for sure... with Denwer
Axure - the best for sure... with DenwerAxure - the best for sure... with Denwer
Axure - the best for sure... with Denwer
 
Expressionism
ExpressionismExpressionism
Expressionism
 
Persuasive Design
Persuasive DesignPersuasive Design
Persuasive Design
 
О профессии юзабилити-специалиста для студентов-психологов
О профессии юзабилити-специалиста для студентов-психологовО профессии юзабилити-специалиста для студентов-психологов
О профессии юзабилити-специалиста для студентов-психологов
 
Beauty
BeautyBeauty
Beauty
 
Grids Are Good
Grids Are GoodGrids Are Good
Grids Are Good
 
Google Analytics - как средство убеждения заказчика потратиться на юзабилити
Google Analytics - как средство убеждения заказчика потратиться на юзабилитиGoogle Analytics - как средство убеждения заказчика потратиться на юзабилити
Google Analytics - как средство убеждения заказчика потратиться на юзабилити
 
ClickDensity - новая буква в веб-аналитике
ClickDensity - новая буква в веб-аналитикеClickDensity - новая буква в веб-аналитике
ClickDensity - новая буква в веб-аналитике
 

Recently uploaded

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Recently uploaded (20)

UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

Web Application Solutions

  • 1. Web Application Solutions: A Designer’s Guide
  • 2. Overview As the Web continues to extend its reach into our daily lives, an increasing number of our interactions will happen online. The practical implication of this for interface designers is lots of Web application projects that cover everything from filing taxes to sharing photos. “The fundamental purpose of Web applications is to facilitate the completion of one or more tasks” [Bob Baxley 1]. But depending on the type and complexity of the tasks involved, different technical solutions may be better suited to enable the specific interactions each product requires. Flash, Java applets, DHTML, Active X, Smart Clients, Java Web Start, SVG— what do you choose and why? What types of interactivity and visual presentation does each technology enable? What does each limit? As Web application interface designers, these are questions we encounter time and time again. As a result, we decided to document what we’ve learned and research what we didn’t know about the opportunities and limitations that characterize some of the most popular Web application presentation layer solutions available today. We evaluated each solution against a consistent set of criteria and described it with a concise definition, set of examples, and references that enable further analysis. We also shared our findings with a team of expert reviewers (page 18) to ensure we were on the right track. The end result is this designer’s guide. For your convenience, each solution we’ve evaluated is presented on a single-page snapshot that helps designers, product managers, and business owners make an informed decision for their Web application’s front-end technology. Of course, this guide is not meant to be a substitute for consulting with knowledgeable programmers and system architects. We simply want to prepare you for those discussions. The right Web application presentation layer needs to meet your specific business, user, and technology needs and multiple solutions can exist per business and per product. We hope this guide helps steer you in the right direction. Luke Wroblewski Frank Ramirez Principal, LukeW Interface Designs Principal, Ramirez Design LLC luke@lukew.com frank@ramirezdesign.com Web Application Solutions: A Designer's Guide | 2
  • 3. Defining Web Applications This guide is not intended to define the multitude of presentation layer solutions available for Web applications. We’re focused on explaining the trade-offs. However, an overview of the grouping and evaluation criteria we’ve used to describe each solution is required to ensure we present accurate comparisons. Web Application (Web-based application) Web applications are Web-accessible (deployed and/or accessed through a Web browser) Web-connected (utilize a http connection for information retrieval or display), and task-oriented (beyond the simple browsing of information) software. Due to the variance and subjectivity inherent in defining types of Web applications, we’ve established a continuum from thin client to rich client on which each Web application solution can be plotted. Many solutions (and their various implementations) have characteristics of more than one group. For example, DHTML with XMLhttpRequest (commonly referred to as AJAX) is part thin client and part Rich Internet Application (RIA). Likewise, some desktop applications really straddle the line between Rich Internet Application and rich client (a.k.a. a thick client). Lastly, while you could think of any Internet-enabled desktop application (like Apple’s iTunes or Yahoo’s Instant Messenger) as a Rich Internet Application, we’ve left this type of software out of the discussion. Applications that require a traditional client-side install process (regardless whether or not the install file can be downloaded from a Web server) are not evaluated within this guide. Web Application Solutions: A Designer's Guide | 3
  • 4. Definitions Thin Client Rich Internet Application (RIA) Rich Client (smart client, desktop client) Web-connected applications that do not run within the Web Web applications that utilize the Web browser for security, Web applications that enable richer, locally processed user browser and can be delivered as compiled code. Rich Clients state management, and script execution (run-time). Most interactions (fluid animation, multimedia content, real time leverage local processing to enable rich interactions and can data processing and storage occurs on a remote server and validation, etc.) and advanced remote messaging (Java utilize Web Services to connect to distributed data sources and not a user’s local machine. Server request and response Objects, Web Services, etc.). Sun’s Java plug-in and auto-update. Unlike Thin Client applications, Rich Clients can mostly occurs through the http protocol. Macromedia’s Flash are two of the most common RIA be used offline and more easily integrate with local hardware run-times. RIAs can only run in a Web browser within and software. The primary benefits of thin clients are wide reach embedded plug-ins. (accessible by anyone with a Web browser), open A Rich Client can embed a Thin Client (i.e. a desktop development platform (built on popular open standards), no The HTTP communication layer used by Thin Client application with an integrated Web browser within which a thin footprint (quick download, no artifacts on user machines applications technically does not support guaranteed client application can run. beyond browser cookies), and deployment/manageability message delivery, does not guarantee the order of message (distributed and maintained from a central source). delivery, and does not support server-initiated Rich Client Solutions: communications. Many RIA communication layers provide Thin Client Solutions: Windows Smart Clients reliable messaging and enable server “pushes” of content. Java Web Start HTML, XHTML HTML, JavaScript, and CSS (DHTML) Thin Clients that utilize asynchronous JavaScript-driven DHTML with Remote Scripting via iFrame server requests and responses and advanced DHMTL user DHTML with XMLhttpRequest (AJAX) interactions (a combination of technologies frequently referred Upcoming, Interesting, or Relevant Solutions to as AJAX) are sometimes considered JavaScript RIAs. While this guide focuses on some of the most popular Web application solutions available today, there are a number of A Thin Client can embed (integrate through a Web browser relevant technologies that may be considered for specific uses plug-in) an RIA (i.e. a Flash module in a DHTML application). (i.e. PDF for data entry) or future projects (i.e. XUL or XAML). Rich Internet Application Solutions: Examples include Flash 6 (and higher) Canoo Ultra Light Client (ULC) Flash with Flex or Laszlo Presentation Server Java WebCream Java Applets PDF Active X XSLT SVG Macromedia Central Nexaweb Xforms XAML Web Application Solutions: A Designer's Guide | 4
  • 5. Solution Continuum The primary benefits of a thin client are reach (anyone with a Web browser can use it) and deployment (can be updated and distributed through a Web server). The primary disadvantages are limited interaction options and typically slower response times. Rich Internet Applications and Smart client technologies enable richer (desktop-like) interactions, more sophisticated messaging, and prevent server request/responses from having to rewrite entire pages. They also maintain some of the deployment and updating benefits of thin clients. The chart below overlays popular Web application technology solutions on a continuum from thin to rich client. Most solutions fall within a range on the continuum. Each Web application solution falls on a continuum from thin client to rich client, though some solutions really quot;straddle the linequot;. A Smart Client can even embed a Thin Client (within a Web browser inside a rich client) and a thin client can embed an RIA (i.e. Flash module in a DHTML application). Thin Client Rich Internet Application (RIA) Rich Client Delivered in the Web browser; uses Usually delivered as embedded Compiled run-time on local browser security, state management, run-time within Web browser machine; can use local and and script execution; http for data (plug-ins); goes beyond http for remote resources; can run request/response. remote data request/response. offline. XMLhttpRequest (& DHTML) Java Applets Java Web Start HTML DHTML ActiveX Remote Scripting (& DHTML) Flash (Flex & Laszlo) Smart Client Open Rich User Experience Built on popular open standards Desktop-like interactions; multimedia; state-ful applications Wide Reach Local Processing & Integration Accessible by anyone with a Web Most responsive UI; local hardware & browser; usually operating system software integration independent No Footprint UI Toolkits Quick download of pages as needed; no Robust UI libraries & toolkits; reduced application footprint development time Deployment Offline Availability Updated and distributed through a Web Network connectivity not required server Web Application Solutions: A Designer's Guide | 5
  • 6. Evaluation Criteria Each Web application solution was evaluated against the following criteria. User Experience Processing Unique Features What user interactions are possible? (drag and drop, fluid How much application logic can reside on the client-side? Are there unique security concerns? Is application logic animation, auto-saving, real-time validation, non-linear What type of action requires a trip to the server? What is the exposed? Can the application run offline? workflows, integrated audio and video, etc.) Does each impact to the UI for a server request? How fast are the initial Future Proofing user action require a full-page rewrite (as in the case of load and subsequent response times of the user interface? HTML/http solutions)? How well integrated is the user What kind of remote messaging is possible (http, Web What level of support is available for the solution? If the interface with the Web browser environment (Back, History, Services, Java objects, etc.)? Can server requests run technology is proprietary, does the vendor have a proven etc.) and/or local operating system (local hardware and uninterrupted (in the background) while the user focuses on record of product support? Does the solution conform to software integration)? Can application states be easily other tasks? existing standards? maintained? Interface Components & Customization Staffing & Cost Deployment & Reach Does the solution include an easily accessible library of UI What are the costs required to build out the solution? Are How can users access the application? Do they need elements? Are the elements easily customizable? Is there a technology experts easily found? What tools exist to reduce specific Web browsers, Web browser plug-ins, Web WYSIWYG development environment (IDE) that leverages costs? How long is a typical development cycle? browser settings, operating systems, devices (mobile, etc.), the UI library? Can the interface be easily transformed for or local applications? How large is the reach of the different devices (i.e. mobile)? Can the user interface be built application? Can search engines index the content within with grid or flexible layouts, or both? the application? How is the application deployed (install, Back-end Integration download, footprint, etc.)? What back-end technologies enable this front-end solution? What is required on the back-end? Does the solution increase or decrease server loads? Web Application Solutions: A Designer's Guide | 6
  • 7. HTML, XHTML Overview: HTML is a document markup language for structure, presentation and monodirectional linking. XHTML is a reformation of HTML that is XML-compliant. Data requests are sent through the Hypertext Transfer Protocol (http) standard. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Elements that can Has the biggest Application states HTML can be Can be delivered Code exposed - Relatively easy to Relatively easy to be specified in reach- can be can be achieved styled with CSS with JSPs, easy to copy port to other find people with HTML are familiar rendered by any through cookies, (Cascading Style Servlets, ASP, devices such as HTML, XHTML to the largest browser. is server-side apps, Sheets) ASP.NET, JSP, PDAs, phones, etc. programming skills. amount of Web standardized and and/or URLs ColdFusion, PHP, users (including available to users Flexible layouts are and more. Code is likely to be WYSIWYG back, history, running all types of Client requests possible, fixed grid forward-compatible development bookmarking, etc.) software. Effective require full reloads are difficult to due to standardiza- environments and for users with slow of Web pages to maintain consis- tion. content manage- Small file sizes: connections. update displays tently across ment systems quick download increasing browsers. (CMS) widely times Search engines download times available can index content and server loads Components Sufficient for limited to those relatively static HTTP requests do available through content and trivial not support HTML markup tasks guaranteed message delivery, Limited to form guaranteed order entry, data display, of message and link navigation delivery, nor server-initiated Integration with communications local resources (push) (hardware & software) is nearly impossible Examples: Read More: • Craigslist – online local classified ads • http://www.w3.org/MarkUp • Bloglines • http://www.oreilly.com/catalog/html4 Web Application Solutions: A Designer's Guide | 7
  • 8. HTML, JavaScript and CSS (aka DHTML) Overview: DHTML is not a programming language, but the combination of HTML, JavaScript (or VBScript). and Cascading Style Sheets (CSS). JavaScript is a cross-platform, object-oriented scripting language. JavaScript is also small, lightweight, and was designed to be embedded in other products and applications, such as web browsers. Inside a host environment, JavaScript can be connected to the objects of its environment to provide programmatic control over them [2]. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features See HTML... See HTML... See HTML... See HTML... See HTML... See HTML... See HTML... See HTML... Elements that can Most content can Reduced server Some UI compo- Code is likely to be Small size reduces be specified in be indexed by loads may be nents can be forward-compatible bandwidth costs HTML are familiar search engines. achieved through custom made. ie: due to open to the largest increased local sliders standards Relatively easy to amount of Web Works with most processing supported by find people with users modern browsers (dynamic hiding, Toolkits: multiple browser DHTML program- (4.x browsers and revealing, dynamic drive, vendors. For ming skills. Animation later) repositioning, and dynarch.com, example: W3C (repositioning and rewriting of softplex.com, DOM (Document Higher develop- motion), drag and JavaScript may be interface elements) navsoft.com, Object Model) ment costs due to drop, layering, and turned off by users and many more activity sophisticated, style changes are and administrators Logic is delivered branching code enabled for to browser with (required to interface elements HTML page and support multiple can be dissected. browsers) Inconsistent As a result, secure support for data cannot be Common UI transparency and sent this way features can be layering (passwords, serial difficult to numbers etc.) implement Usually has faster (tabbing, tabular download times, data, tree views, though large drag and drop, JavaScript apps saving, etc.) can be slow to load No easy way to integrate audio & video content Examples: Read More: • TurboTax –file your tax returns (http://www.turbotax.com) • Dynamic Duo –Cross browser Dynamic HTML • Yahoo! Mail [http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/] • Hotmail • What is DHTML? [http://webmonkey.wired.com/webmonkey/geektalk/97/39/index3a.html] Web Application Solutions: A Designer's Guide | 8
  • 9. DHTML with Remote Scripting via iFrame Overview: See DHTML Overview... An iframe is an inline frame (placed inside another HTML page) that contains a separate HTML page with its own URL. DHTML can use hidden iFrames to get information from the server without refreshing the page [Ashley 3] Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... Applications are Works with most iframes can be reduced server Higher develop- more responsive modern browsers dynamically loads due to more ment costs due to (Internet Explorer refreshed with processing on sophisticated, Linking to, saving, 5.5+, Netscape 6+, server-side content client-side branching code and book-marking and Mozilla 1+) with Javascript and (required to content can be a DOM ID support multiple tricky. Dynamic content browsers) won’t be indexed Only enables Content may be by search engines content to be Extra effort incorrect when loaded in a required for good users click reload pre-defined area accessibilitiy (ie: and back buttons (frame) on a Web screen readers) page (though iframe content can be put in a DIV and moved procedur- ally) Read More: Examples: • http://www.cs.tut.fi/~jkorpela/html/iframe.html • Remote Scripting with iframe [http://developer.apple.com/internet/webcontent/iframe.htm] • http://farechase.yahoo.com (Flight Search only. Hotel search uses xmlHttpRequest) Web Application Solutions: A Designer's Guide | 9
  • 10. DHTML with XMLHttpRequest (aka AJAX) Overview See DHTML Overview... XMLHtttpRequest is an object that allows (compatible) web clients to submit and retrieve XML data from a server without reloading the page. JavaScript processes the data in the background and renders it via the Document Object Model (DOM) [Garret 4]. This can happen asynchronously, allowing the user to continue with his task while the data gets processed and updated. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... Enhance user XMLHtttpRequest Further reduction in Due to large XMLHttpRequest is Higher develop- experience with is available in server loads due to interest in the web an API that ment costs due to better, faster forms. Netscape/Mozilla, processing on the development belongs to sophisticated, Enables real-time Internet Explorer client side and pure community, Microsoft-could be branching code updates and 5+, and Safari data requests DHTML toolkits depreciated. (required to validations as user browsers (without presenta- with XMLHttpRe- However W3C has support multiple moves from field to (Safari & Opera tion layer) after the quest are sure to initiated a similar browsers) field or even after can only support a initial load. come soon. (For “XML Load and each character subset of requests) now, see SAJAX Save Specification” Extra effort entry. No socket and JSON-RPC) in DOM Level 3. required for good Content requested connections - accessibilitiy (ie: Content may be through server can not screen readers) incorrect when XMLHttpRequest initiate communica- users click reload object cannot be tions to client app and back buttons indexed by search engines or read by Linking to, saving, some screen and book-marking readers. content can be tricky Enhanced functionality within a web browser can be difficult to communicate Read More: Examples: • http://developer.apple.com/internet/webcontent/xmlhttpreq.html • www.gmail.com (load JavaScript engine at start of session) • XMLHttpRequest for the masses: http://www.allinthehead.com/retro/241/xmlhttprequest-for-the-masses • map.search.ch • http://www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility • maps.google.com • Simple Ajax Toolkit: http://www.modernmethod.com/sajax/ • www.flickr.com (edit the titles of your photos in situ) • JSON-RPC: http://oss.metaparadigm.com/jsonrpc/ • www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples Web Application Solutions: A Designer's Guide | 10
  • 11. Flash 6 (and higher) Overview: Macromedia’s Flash 6+ is a multi-platform plug-in installed in most Web browsers as well as an application for developing content, interfaces, and applications. Flash 6+ supports rich vector-graphics, animation, and the ability to build advanced web applications using scripting, forms, XML, and server socket connections. Flash 5 has limited support for some of these feature sets. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Decrease costs by Flash offers a rich According to Built-in ActionScript Flash Pro comes Reduction in server Applications can be Given proprietary developing/testing set of features for Macromedia, Flash enables dynamic wtih many pre-built loads due to ported to Flash Lite format, APIs may once for all engaging interac- 6+ is installed on processing without components: data processing on the for use on mobile change from platforms tions including drag 95.1% of Internet- page reloads grid, tree view, client side and pure devices (w/Flash 4 version to version. and drop, enabled desktops (server hits) accordian, menu data requests functionality) However, ActionScript 2 is animation, in the US, over bar, etc. (without presenta- Macromedia object-oriented and transparency, 96% in Europe and Natively supports tion layer) after the Can enable back seems to be based on ECMA layering, audio and Canada and 92% vector graphics, Many additional initial load. button by access- committed to Script (like video streaming. in Asia. streaming audio, Flash UI toolkits ing history object standards such as JavaScript), so and streaming and components Socket connections CSS, XML, SOAP, developers familiar Enables real-time Applications video available by 3rd allow server- Bad rep from SVG, etc. w/JavaScript can updates and delivered through parties initiated communi- designers quickly pick up validations as user the Flash player Client-side cations to client reinventing simple ActionScript completes form can run identically XML/DOM parsing Both flexible and app UI widgets (in part fields on all the major has latency issues grid layouts are due to Flash’s However, operating systems possible (using Flash 6+ can be component set) programmers with Potential latency container objects) used as the relevant Flash due to relevantly Near seamless presentation layer In theory code is experience are large initial upgrade process Flash’s standard with common protected, but in relatively scarce download and for plug-in components are server technologies reality it can be plug-in launch not easy to such as Java cracked with Development could Traditional tracking customize Servlets, JSP, simple tools. take longer Not fully integrated and metrics can be PHP, ASP, etc. because everything with browser problematic; but Can be connected must be created environment has ability to track to things like Flash from scratch: (reload, back specific states Communication concept of pages, buttons and Server to enable links, browse bookmarks). Flash content is not real time AV Chat, history, scale, etc. Workarounds exist indexed by search IM, etc. between engines. (work- Flash Clients Read More: arounds exist) • Flash Installation Stats: http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html Examples: • Accessibility: http://www.macromedia.com/macromedia/accessibility/features/flex/best_practices.html • Rich Internet Applications (http://www.klynch.com/archives/000074.html) • Java and Flash socket connections: http://www.dagblastit.com/java/sockets.html Web Application Solutions: A Designer's Guide | 11
  • 12. Flash with Flex or Laszlo Presentation Server Overview: See Flash Overview...Flex and Laszlo offer presentation servers that can be installed on the server side. Each has a rich library of user interface components, an XML-based markup language used to declaratively lay out these components, and an object-oriented programming language which handles user interactions with the application [Coenraets 6]. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Further reduction in Flex’s MXML toolkit Presentation tier Macromedia has Laszlo and Flex server loads due to provides compo- (ASP, JSP, abandoned server presentation processing on the nents with standard Servlets, ColdFu- products in the servers can speed client side and pure presentation sion, Flex or past including: up development data requests Laszlo) can Drumbeat, (without presenta- Flex’s MXML code integrate with SiteSpring, Laszlo presentation tion layer) after the can be styled with common back- LikeMinds, Kawa, server is open initial load. CSS or Flash ends (EJB, Java etc. (Most of these source Beans and Web features are rolled Laszlo presentation Laszlo’s LZX toolkit Services , etc.) into other products Flex Builder IDE server has provides compo- such as Flex or makes it relatively performance nents with standard DreamWeaver) easy to build issues presentation applications with Flex Laszlo only compiles to Flash 5 Development in standard (Laszlo Flex/Laszlo more has Flash 6 in familiar to beta) traditional developers (relative to Flash programming) Flex presentation server is expensive Laszlo does not have a comparable IDE to Flex Builder Read More: • Flex Overview: http://www.macromedia.com/software/flex/productinfo/brz_overview/ Examples: • Laszlo Overview: http://www.laszlosystems.com/products/ • Laszlo: Behr Color Smart: http://www.behr.com/behrx/index.jsp • Comparison of Flex vs. Laszlo: http://www.infoworld.com/article/04/12/03/49TClasflex_1.html • Flex: http://www.macromedia.com/devnet/flex/example_apps.html • IDE for Laszlo: http://alphaworks.ibm.com/tech/ide4laszlo Web Application Solutions: A Designer's Guide | 12
  • 13. Java Applets Overview: A Java Applet is a small program written in the Java programming language that can be embedded in an HTML page. Java applets can run in a web browser using a Java virtual machine (JVM) Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Java Applets offer Java applets Applets are Swing and HTTP, HTTPS, Applets can write Java is more Many developers a rich set of require the Java embedded in web JavaBean controls FTP, and Gopher to local disk if they commonly used as who know Java features for plug-in or Java pages and go available are supported in are digitally signed a platform than it is relatively available engaging interac- Virtual Machine beyond http for the 1.2.2 release of (via a dialog for applets tions including drag (JVM) already remote data Swing can be slow Java Plug-in window) and drop, installed in most request/response and cumbersome Software. The use of applets animation, and browsers. in a web-based Applets run in a does not seem to other UI elements Plug-in needs to be client UI Full Java Compat- “sandbox” so few be matching the found in traditional Java Plug-in installed only once ible support; offer security concerns growth of the Web desktop apps. supports IE and and then it caches all the benefits of exist; strict rules on Netscape 3.0+ on all applets. the Java language, how an applet can Microsoft decided Enables real-time Windows 95, 98, including portabil- interact with your to stop shipping a updates and NT 4.0, and Solaris Very good ity, faster develop- computer and the JVM with it's validations as user 2.5 and 2.6. JVM processor-intensive ment, powerful API network newest versions of moves completes download is 5MB visualization libraries, etc. [1] Internet Explorer forms rendering Network access Inconsistent (interactive and Can create a only to the Latency due to browser implemen- dynamically socket connection launching server; relevantly large tations. (However, generated graphs, to servers and only reliable source initial download Sun’s Java plug-in charts, etc.) stream data of data and storage and plug-in launch allows applets to between the applet for an applet is on run in Sun’s Java Can offload and the server its host server. Linking to, saving, Runtime Environ- server-side Applets are not and book-marking ment to ensure processing to the permitted to invoke content can be consistency) client to save both any local execut- tricky CPU overhead and able program on Java Applet network bandwidth the client's content is not machine. indexed by search engines. Examples: Read More: • http://java.sun.com/applets/ • Catalog View is a useful database applet that can display your data in a grid display. • http://www.matisse.net/files/glossary.html http://javaboutique.internet.com/CatalogView/ • Sun hasn't set yet on Java applets, Rick Moore http://www.adtmag.com/article.asp?id=7074 Web Application Solutions: A Designer's Guide | 13
  • 14. Active X Overview: Active X is an application program interface (API) developed by Microsoft that extends and enhances the functionality of web sites viewed in Internet Explorer. When accessed through Internet Explorer, Active X controls can have full access to the Windows operating system. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Adds interactive Works on most Reduced server There are many Active X can Active X controls Microsoft will Can be developed features and Windows machines loads due to ActiveX controls integrate directly can be reused in determine the in Windows IDE animation found in processing on the available with with SQL servers other Microsoft future of Active X tools. traditional desktop Active X controls client side and pure functionality and many other programming and (hasn’t received applications can be installed on data requests ranging from server technolo- database much development the user’s (without presenta- simple to full- gies. languages. attention from Integration with computer and run tion layer) after the featured spread- Microsoft for local resources locally during initial load. sheets and word Access to local number of years) (files, hardware, subsequent processors. resources can office applications, sessions. Ability to create create security Increased use of etc.) possible socket connections issues (Mandatory non-windows Not cross-platform and server initiated registration system platforms (ie: Max (Microsoft communications for Active X OS X, mobile Windows only), not controls helps deal technologies, etc) recommended with this issue) when user platforms can vary Read More: • http://msdn.microsoft.com/library/default.asp?url=/workshop/components/activex/intro.asp Examples: • http://msdn.microsoft.com/workshop/components/activex/intro.asp • Security issues: http://office.microsoft.com/en-us/assistance/HA011403101033.aspx • http://activex.microsoft.com Web Application Solutions: A Designer's Guide | 14
  • 15. Java Web Start Overview: Java Web Start is an application that enables Java client applications to be launched, deployed, and updated from a standard Web server. Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Applications are Java Web Start Same as any Java Same as any Java Applications must Applications work Free, Redistribut- cached locally version 1.0 or 1.0.1 desktop application desktop application be packaged in offline able in 12 once downloaded must be installed accordance to the languages on the client Java Web Start Java Web Start Supports complete machine (10 MB guidelines allows client-side Applications can be desktop interac- file); then applica- Java applications written normally as tions tions can be Can only be used access to a variety stand-alone deployed via URLs for client Java of local-machine applications for the Applications are applications written resources, such as Java 2 platform launched indepen- Locally cached for the Java 2 file access, and dent of Web version of platform clipboard access browser application is (require dialog box automatically Requires custom acceptance) Variable applica- updated when run code on server; tion access may be and remote version requires special Not well-suited for counter-intuitive to has been updated configuring of the deploying users JNLP MIME type applications to Available on mobile devices Windows, Solaris, OS X (pre- installed), and Linux Requires manual installation of Java Web Start on each client machine (more tedious than browser’s automatic Read More: installation of Java • Java Web Start to the rescue, Raghavan N. Srinivas plug-in) Examples: http://www.javaworld.com/javaworld/jw-07-2001/jw-0706-webstart.html • Unofficial Java Web Start/JNLP FAQ, Gerald Bauer: http://webstartfaq.com/ • http://www.up2go.net (More Than 70 Apps Listed; Apps Are Rated) • http://www-106.ibm.com/developerworks/java/library/j-webstart/ • http://www.connectandwork.com/external Web Application Solutions: A Designer's Guide | 15
  • 16. Windows Smart Clients Overview: A smart client is a windows application that bridges the gap between thin clients and rich clients. Smart clients are web-maintainable and deployable (can load components it needs to run from a remote location), yet offer rich interactions through compiled, local runtimes Benefit Drawback Neutral User Deployment Components Back-end Unique Future Proofing Staffing & Cost Experience & Reach Processing & Customization Integration Features Full desktop Works on most Server and network Windows form Can use SOAP, Applications can Microsoft has a Developers can interactions are Windows machines load is reduced libraries available XML, HTTP, etc. run offline development use Microsoft possible (direct (Requires Microsoft because compo- for data roadmap to Visual Studio .NET manipulation, Windows .NET nents are only Currently only .Net framework continue enhancing as a drag and drop hotkeys, etc.) framework) updated if needed. supports grid provides security smart clients over IDE layout (flexible through code the next several Application Smart clients can Peer to peer layouts will be access security years. Reduce develop- components can be deployed by connectivity is supported in (CAS) infrastruc- ment and mainte- be downloaded CD, DVD, an possible through Longhorn smart ture nance time due to dynamically as application ability to listen for clients) applications not needed allowing deployment incoming network Multiple versions of subject to DLL applications to load infrastructure, or a requests a smart client conflicts quickly web server using application can HTTP Initial dowload can target specific Integration with be larger than devices local resources Not cross-platform, comparable thin (files, hardware, not recommended client solutions office applications, when user etc.) possible with platforms can vary .NET framework Variable applica- tion access may be counter-intuitive to users Read More: • http://msdn.microsoft.com/netframework/programming/winforms/smartclient.aspx • http://msdn.microsoft.com/architecture/journal/default.aspx?pull=/library/en-us/dnmaj Examples: /html/choosing_presentation_layer.asp • http://www.windowsforms.net/Default.aspx?tabindex=6&tabid=48 • www.code-magazine.com/Article.aspx?quickid=050023 Web Application Solutions: A Designer's Guide | 16
  • 17. Upcoming, Interesting and Relevant Technologies Canoo Ultra Light Client (ULC) Nexaweb Xforms Traditional HTML Web forms don't separate the purpose from Build Rich Internet Applications with Java standards. ULC’s Nexaweb provides a software platform for developing and the presentation of a form. XForms, in contrast, are comprised pure java library offers a server-side API to Swing (servlet deploying Enterprise Internet Applications. The Nexaweb or bean), providing rich GUIs for J2EE applications. platform includes the following: 1) J2EE server component, 2) of separate sections that describe what the form does, and Java-based thin-client presentation engine needs to be 150k java-based client app, 3) real-time messaging layer, 4) how the form looks. This allows for flexible presentation installed once for any number of applications; may be WYSIWYG development environment. options, including classic XHTML forms, to be attached to an deployed by Java Web Start, as an applet, or by any other XML form definition. XForms 1.0 is a W3C recommendation. • http://www.nexaweb.com/products.asp deployment mechanism • http://www.w3.org/MarkUp/Forms/ • http://www.canoo.com/ulc PDF & XDP XSL & XSLT Adobe is trying to evolve PDF into an allpurpose fill-in-the- Java WebCream forms container for Enterprise workflows. The new Adobe tool The eXtensible Stylesheet Language (XSL) is a vocabulary Acts as a Java AWT or Swing to HTML bridge. It is a will have an IDE for creating forms in XDP files describing how to format eXtensible Markup Language(XML) dynamic Java to HTML converter. WebCream turns thick that are a superset of PDF and will use JavaScript as the for different media. client GUI applications and applets into DHTML websites. programming API [6]. XSL Transformations (XSLT) can transform data using one XML vocabulary into another. XSLT processors can be • http://www.adobe.com/products/acrobat/readstep2.html Macromedia Central installed on the server or executed within certain web browsers. XSLT have performance issues in high-volume Unlike conventional web sites, Central applications can SMIL applications. function both online and offline, keeping important The Synchronized Multimedia Integration Language (SMIL, • http://www-106.ibm.com/developerworks/xml/library/x- information constantly available. Central applications run in pronounced quot;smilequot;) HTML-like authoring language for a controlled environment to keep sensitive data secure. xslt/?article=xr interactive audiovisual presentations. And because Central automatically notifies the user when • http://www.xml.com/pub/a/2003/11/26/learnXSLT.html • http://www.w3.org/AudioVideo/ new versions are available, applications are always up-to-date. XUI SVG • http://www.macromedia.com/software/central XUI is a Java and XML framework for building rich client, Language for describing two-dimensional graphics in XML. desktop and mobile applications (including PDAs). Graphics can be vector, bitmap or text. Promises the following Macromedia Director features: rich manipulation of graphic objects, leverage of • http://xui.sourceforge.net/ A well-established way to create and deploy applications W3C specifications and standards efforts, ability to use for CDs, DVDs, kiosks, and the Internet light-weight vector graphics for fast downloads, high resolu- XUL • http://www.macromedia.com/software/director tion, high quality printing. XML User Interface Language developed by Mozilla. • http://www.adobe.com/svg/demos/main.html Pronounced “zool”. It is a markup language used to create Microsoft’s Avalon & XAML • http://www.w3.org/TR/SVG/intro.html dynamic user interfaces. Provides access to programming Avalon is the platform for the next-generation of Microsoft interfaces such as read/write over the network or communicat- • http://www.w3.org/Graphics/SVG/SVG-Implementations Windows client applications. It will create a new presenta- ing with web services. Compatible with many standards such tion platform by combining the features of the DHTML, a as HTML, XHTML, XSLT, CSS2, DOM2. Will not work with vector-based display engine, and Win32 development Microsoft Internet Explorer. platforms. XAML, Avalon’s markup language used to • http://www.xulplanet.com/tutorials/xultu/ declaratively represent the user interface, enables the • http://xulplanet.com/tutorials/whyxul.html separation of UI design from the underlying code. • http://msdn.microsoft.com/Longhorn/understanding/pillars /avalon/avnov04ctp/default.aspx Web Application Solutions: A Designer's Guide | 17
  • 18. Authors Luke Wroblewski is an interface designer, strategist, author, Frank Ramirez, Principal at Ramirez Design LLC, is a user Reviewers experience strategist, researcher, and design consultant. Frank Much thanks to the following individuals who contributed to the and Principal at LukeW Interface Designs, a consulting firm has led the design of many digital products and services, ideas and accuracy of this paper: he founded in 1996. Luke has authored a book on Web including e-commerce applications, touch-screen kiosks, rich interface design principles titled Site-Seeing: A Visual Benjamin Wigton, Lead Interface Engineer, Avenue A / internet applications, intranets and training programs. Clients Approach to Web Usability (Wiley & Sons, 2002) and multiple include Yahoo!, eBay and numerous start-ups. Razorfish articles on interface design including those featured in his David Heller, Principal Designer, IntraLinks & Steering own Web-zine, Functioning Form. Prior to starting his consultancy, Frank was Sr. Information Committee Member, Interaction Design Group (IxDG) Dirk Knemeyer, Principal, Involution Studios Architect at Walmart.com where he led requirements definition Previously, Luke taught Interface Design courses for the Erin Malone, Director, Platform Design, Yahoo! Inc. and information architecture for multiple in-store, online and Graduate School of Library and Information Science at the James Reffell, Sr. UI Designer, eBay Inc. cross-channel initiatives. He participated in a wide variety of University of Illinois at Urbana-Champaign and worked as a Jamie Hoover, Sr. UI Designer, eBay Inc. project activities including: discovery research, concept Senior Interface Designer at the National Center for Johnathan Boutelle, Principal, Uzanto Consulting generation, usability testing, cross-functional collaboration, IA Supercomputing Applications (NCSA), birthplace of the first Michael Hoch, Director of Prototype Design, Yahoo! Inc. documentation and communication. readily available graphical Web browser, NCSA Mosaic. At Peter Bogaards, Founder, BogieLand Information Design & NCSA, Luke designed interface solutions for Frank earned his B.S. in Graphic Design and has designed Information Architecture Hewlett-Packard, IBM, and Kellogg's, and co-developed the Todd Warfel, Partner, Design & Usability Specialist, enterprise-level web applications since 1996. Open Portal Interface Environment (OPIE). Luke's research MessageFirst on Web-based interface designs has been published and Uday Gajendar, User Experience Pathfinder, Adobe Systems presented at national and international conferences. Inc. Ziya Oz, Consultant, Application Strategy/Architecture/Design *Note: The opinions of these reviewers may not reflect those of their employers. Web Application Solutions: A Designer's Guide | 18