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 applications that utilize the Web browser for security,   Web applications that enable richer, locally processed user       Web-connected applications that do not run within the Web
state management, and script execution (run-time). Most       interactions (fluid animation, multimedia content, real time      browser and can be delivered as compiled code. Rich Clients
data processing and storage occurs on a remote server and     validation, etc.) and advanced remote messaging (Java             leverage local processing to enable rich interactions and can
not a user’s local machine. Server request and response       Objects, Web Services, etc.). Sun’s Java plug-in and              utilize Web Services to connect to distributed data sources and
mostly occurs through the http protocol.                      Macromedia’s Flash are two of the most common RIA                 auto-update. Unlike Thin Client applications, Rich Clients can
                                                              run-times. RIAs can only run in a Web browser within              be used offline and more easily integrate with local hardware
The primary benefits of thin clients are wide reach           embedded plug-ins.                                                and software.
(accessible by anyone with a Web browser), open
development platform (built on popular open standards), no    The HTTP communication layer used by Thin Client                  A Rich Client can embed a Thin Client (i.e. a desktop
footprint (quick download, no artifacts on user machines      applications technically does not support guaranteed              application with an integrated Web browser within which a thin
beyond browser cookies), and deployment/manageability         message delivery, does not guarantee the order of message         client application can run.
(distributed and maintained from a central source).           delivery, and does not support server-initiated
                                                              communications. Many RIA communication layers provide             Rich Client Solutions:
Thin Client Solutions:                                        reliable messaging and enable server “pushes” of content.            Windows Smart Clients
   HTML, XHTML                                                                                                                     Java Web Start
   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
                                                              to as AJAX) are sometimes considered JavaScript RIAs.             Upcoming, Interesting, or Relevant Solutions
                                                                                                                                While this guide focuses on some of the most popular Web
                                                              A Thin Client can embed (integrate through a Web browser          application solutions available today, there are a number of
                                                              plug-in) an RIA (i.e. a Flash module in a DHTML application).     relevant technologies that may be considered for specific uses
                                                                                                                                (i.e. PDF for data entry) or future projects (i.e. XUL or XAML).
                                                              Rich Internet Application Solutions:
                                                                 Flash 6 (and higher)                                           Examples include
                                                                 Flash with Flex or Laszlo Presentation Server                     Canoo Ultra Light Client (ULC)
                                                                 Java Applets                                                      Java WebCream
                                                                 Active X                                                          PDF
                                                                                                                                   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 "straddle the line". 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
                       Accessible by anyone with a Web                                                                                                                       Local Processing & Integration
                       browser; usually operating system                                                                                                                     Most responsive UI; local hardware &
                       independent                                                                                                                                           software integration
                       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
user action require a full-page rewrite (as in the case of          load and subsequent response times of the user interface?          Future Proofing
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,
download, footprint, etc.)?                                         Back-end Integration
                                                                    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
 Experience                  & Reach                   Processing               & Customization          Integration             Features              Future Proofing             Staffing & Cost


     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
 Experience                & Reach                   Processing                & Customization        Integration            Features                 Future Proofing              Staffing & Cost


    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
 Experience               & Reach                  Processing               & Customization       Integration               Features                 Future Proofing              Staffing & Cost


    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
• http://farechase.yahoo.com (Flight Search only. Hotel search uses xmlHttpRequest)      • Remote Scripting with iframe [http://developer.apple.com/internet/webcontent/iframe.htm]
                                                                                                                                                              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
 Experience                 & Reach                 Processing                & Customization         Integration            Features                 Future Proofing              Staffing & Cost


    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
Examples:                                                                                  Read More:
• www.gmail.com (load JavaScript engine at start of session)                               • http://developer.apple.com/internet/webcontent/xmlhttpreq.html
• map.search.ch                                                                            • XMLHttpRequest for the masses: http://www.allinthehead.com/retro/241/xmlhttprequest-for-the-masses
• maps.google.com                                                                          • http://www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility
• www.flickr.com (edit the titles of your photos in situ)                                  • Simple Ajax Toolkit: http://www.modernmethod.com/sajax/
• www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples                    • JSON-RPC: http://oss.metaparadigm.com/jsonrpc/
                                                                                                                                                              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
 Experience                & Reach                  Processing                 & Customization         Integration                Features                 Future Proofing              Staffing & Cost


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


                                                      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
 Experience                & Reach                   Processing                 & Customization        Integration               Features                   Future Proofing             Staffing & Cost


    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:
• http://java.sun.com/applets/                                                               Read More:
• 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
 Experience                & Reach                     Processing                & Customization        Integration              Features                  Future Proofing              Staffing & Cost


    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
• http://activex.microsoft.com                                                                • Security issues: http://office.microsoft.com/en-us/assistance/HA011403101033.aspx

                                                                                                                                                                   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
 Experience                & Reach                  Processing              & Customization          Integration               Features                Future Proofing             Staffing & Cost


    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
• http://www.up2go.net (More Than 70 Apps Listed; Apps Are Rated)                         • Unofficial Java Web Start/JNLP FAQ, Gerald Bauer: http://webstartfaq.com/
• http://www.connectandwork.com/external                                                  • http://www-106.ibm.com/developerworks/java/library/j-webstart/
                                                                                                                                                              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
 Experience                & Reach                  Processing                 & Customization          Integration              Features                  Future Proofing               Staffing & Cost


    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
Build Rich Internet Applications with Java standards. ULC’s     Nexaweb provides a software platform for developing and          Traditional HTML Web forms don't separate the purpose from
pure java library offers a server-side API to Swing (servlet    deploying Enterprise Internet Applications. The Nexaweb          the presentation of a form. XForms, in contrast, are comprised
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       • http://www.nexaweb.com/products.asp                            XML form definition. XForms 1.0 is a W3C recommendation.
deployment mechanism                                                                                                             • http://www.w3.org/MarkUp/Forms/
• http://www.canoo.com/ulc                                      PDF & XDP
                                                                Adobe is trying to evolve PDF into an allpurpose fill-in-the-    XSL & XSLT
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
                                                                • http://www.adobe.com/products/acrobat/readstep2.html           XML vocabulary into another. XSLT processors can be
Macromedia Central                                                                                                               installed on the server or executed within certain web
Unlike conventional web sites, Central applications can         SMIL                                                             browsers. XSLT have performance issues in high-volume
function both online and offline, keeping important             The Synchronized Multimedia Integration Language (SMIL,          applications.
information constantly available. Central applications run in   pronounced "smile") HTML-like authoring language for             • http://www-106.ibm.com/developerworks/xml/library/x-
a controlled environment to keep sensitive data secure.         interactive audiovisual presentations.                           xslt/?article=xr
And because Central automatically notifies the user when        • http://www.w3.org/AudioVideo/                                  • http://www.xml.com/pub/a/2003/11/26/learnXSLT.html
new versions are available, applications are always
up-to-date.
                                                                SVG                                                              XUI
• 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.
                                                                Graphics can be vector, bitmap or text. Promises the following   desktop and mobile applications (including PDAs).
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     • http://www.w3.org/Graphics/SVG/SVG-Implementations             interfaces such as read/write over the network or communicat-
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
and Principal at LukeW Interface Designs, a consulting firm     experience strategist, researcher, and design consultant. Frank     Much thanks to the following individuals who contributed to the
he founded in 1996. Luke has authored a book on Web             has led the design of many digital products and services,           ideas and accuracy of this paper:
interface design principles titled Site-Seeing: A Visual        including e-commerce applications, touch-screen kiosks, rich
Approach to Web Usability (Wiley & Sons, 2002) and multiple     internet applications, intranets and training programs. Clients     Benjamin Wigton, Lead Interface Engineer, Avenue A /
articles on interface design including those featured in his    include Yahoo!, eBay and numerous start-ups.                        Razorfish
own Web-zine, Functioning Form.                                                                                                     David Heller, Steering Committee Member, Interaction
                                                                Prior to starting his consultancy, Frank was Sr. Information        Designer's Group (IxDG)
Previously, Luke taught Interface Design courses for the        Architect at Walmart.com where he led requirements definition       Dirk Knemeyer, Principal, Involution Studios
Graduate School of Library and Information Science at the       and information architecture for multiple in-store, online and      Erin Malone, Director, Platform Design, Yahoo! Inc.
University of Illinois at Urbana-Champaign and worked as a      cross-channel initiatives. He participated in a wide variety of     James Reffell, Sr. UI Designer, eBay Inc.
Senior Interface Designer at the National Center for            project activities including: discovery research, concept           Jamie Hoover, Sr. UI Designer, eBay Inc.
Supercomputing Applications (NCSA), birthplace of the first     generation, usability testing, cross-functional collaboration, IA   Johnathan Boutelle, Principal, Uzanto Consulting
readily available graphical Web browser, NCSA Mosaic. At        documentation and communication.                                    Michael Hoch, Director of Prototype Design, Yahoo! Inc.
NCSA, Luke designed interface solutions for                                                                                         Peter Bogaards, Founder, BogieLand Information Design &
Hewlett-Packard, IBM, and Kellogg's, and co-developed the       Frank earned his B.S. in Graphic Design and has designed            Information Architecture
Open Portal Interface Environment (OPIE). Luke's research       enterprise-level web applications since 1996.                       Sarah Allen, Software Architect, Laszlo Systems,
on Web-based interface designs has been published and                                                                               Todd Warfel, Partner, Design & Usability Specialist,
presented at national and international conferences.                                                                                MessageFirst
                                                                                                                                    Uday Gajendar, User Experience Pathfinder, Adobe Systems
                                                                                                                                    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
References




[1] Bob Baxley, What is a Web Application?. Boxes And             Alex Kalinovsky. Savor success with Java on the front end.       Marc A. Garrett. Review: Macromedia Flex and Flex Builder
    Arrows, 2003                                                  HTML, Swing, or XML: Choose the best front-end                   http://digital-web.com/articles/macromedia_flex_and_flex_b
    http://www.boxesandarrows.com/archives/what_is_a_web_         technology for your Java development                             uilder/
    application.php                                               http://www.javaworld.com/javaworld/jw-04-2001/jw-0420-swi
[2] Croczilla.com, Core JavaScript Guide 1.5.                     ng.html                                                          Drew Falkman. Review: Macromedia Flex, Java Boutique
    http://www.croczilla.com/~alex/reference/javascript_guide/i                                                                    http://javaboutique.internet.com/reviews/macro_flex/
    ntro.html                                                     Sun hasn't set yet on Java applets, Rick Moore
[3] Brent Ashley, Ashley IT.                                      http://www.adtmag.com/article.asp?id=7074                        Open Sourcery. Overview - Macromedia Flex
    http://www.ashleyit.com/rs/main.htm                                                                                            http://www.theopensourcery.com/osrevFlex.htm
[4] Jesse James Garret, Ajax: A New Approach to Web               Chapter 4: Java Applets. Internet Computing
    Appications.                                                  http://www.cs.swan.ac.uk/~csneal/InternetComputing/index.        Mark Eagle. Integrating Macromedia Flex with Java,
    http://www.adaptivepath.com/publications/essays/archives/     html                                                             O’Reilly
    000385.php                                                                                                                     http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.ht
[5] Christophe Coenraets, An Overview of MXML, the                David Hill, What is a Smart Client anyway?                       ml
    Macromedia Flex Markup Language.                              http://blogs.msdn.com/dphill/articles/66300.aspx
    http://www.macromedia.com/devnet/flex/articles/paradigm.                                                                       Drew McLellan. Very Dynamic Web Interfaces
    html                                                          David Hill, Choosing the Right Presentation Layer                http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
[6] The Open Sourcery.                                            Architecture. Microsoft Corporation
    http://www.theopensourcery.com/osrevFlex.htm                  http://msdn.microsoft.com/library/default.asp?url=/library/en-   Peter-Paul Koch. Ajax, promise or hype? O’Reilly
                                                                  us/dnmaj/html/choosing_presentation_layer.asp                    http://www.quirksmode.org/blog/archives/2005/03/ajax_pro
                                                                                                                                   mise_or.html
                                                                  Microsoft Corporation. Smart Client Application Model and
   Jonathan Boutelle. Flash RIAs vs. Javascript RIAs              the .NET Framework 1.1                                           Drew Falkman. Review: Canoo ULC 5.1, Java Boutique
   http://www.jonathanboutelle.com/mt/archives/2005/03/flash      http://msdn.microsoft.com/netframework/programming/winfo         http://javaboutique.internet.com/reviews/canoo_ulc/
   _rias_vs_j.html                                                rms/smartclient.aspx
                                                                                                                                   Overview. Web-enabling Java by Java to HTML converter
   Adam Rifkin                                                    Markus Egger. The Revenge of the Thick Client                    http://www.creamtec.com/webcream/overview.html
   http://ifindkarma.typepad.com/relax/2004/12/weblications.ht    www.code-magazine.com/Article.aspx?quickid=050023
   ml                                                                                                                              Coach K. Wei . Why Web Applications Can be Problematic
                                                                  James R. Borck. RIA platforms lend apps more Flash:              and Unreliable
   Kevin Lynch. Rich Internet Applications: It's Happening!,      Macromedia Flex and Laszlo Presentation Server bring new         http://www.sys-con.com/story/?storyid=47364&de=1
   Macromedia                                                     tricks to Internet application delivery
   http://www.klynch.com/archives/000074.html                     http://www.infoworld.com/article/04/12/03/49TClasflex_1.ht
                                                                  ml




                                                                                                                                                     Web Application Solutions: A Designer's Guide | 19

More Related Content

What's hot

Future development stack ~ MeteorJS
Future development stack ~ MeteorJSFuture development stack ~ MeteorJS
Future development stack ~ MeteorJSVictor Stan
 
Introduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesIntroduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesSuresh Patidar
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentMohammed Safwat
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
Berlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksBerlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksStephan Schmidt
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRafael Casuso Romate
 
Web Application Frameworks - Web Technologies (1019888BNR)
Web Application Frameworks - Web Technologies (1019888BNR)Web Application Frameworks - Web Technologies (1019888BNR)
Web Application Frameworks - Web Technologies (1019888BNR)Beat Signer
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and FrameworkChandrasekar G
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Silverlight abhinav - slideshare
Silverlight   abhinav - slideshareSilverlight   abhinav - slideshare
Silverlight abhinav - slideshareabhinav4133
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3Darren Wood
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleIT Arena
 
Web development presentation
Web development presentationWeb development presentation
Web development presentationVaishnavi8950
 
A Gentle introduction to Web Development & Django
A Gentle introduction to Web Development & DjangoA Gentle introduction to Web Development & Django
A Gentle introduction to Web Development & DjangoPRASANNAVENK
 
Everything you need to know about mern stack programming
Everything you need to know about mern stack programmingEverything you need to know about mern stack programming
Everything you need to know about mern stack programmingJAMESJOHN130
 
Agriya services
Agriya servicesAgriya services
Agriya servicesiScripts
 
Web programming technologies
Web programming technologiesWeb programming technologies
Web programming technologiestruong nguyen
 
Silverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use ItSilverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use ItVenketash (Pat) Ramadass
 

What's hot (20)

Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3Introduction to HTML5 and CSS3
Introduction to HTML5 and CSS3
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Future development stack ~ MeteorJS
Future development stack ~ MeteorJSFuture development stack ~ MeteorJS
Future development stack ~ MeteorJS
 
Introduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesIntroduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web Technologies
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
Berlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworksBerlin.JAR: Web future without web frameworks
Berlin.JAR: Web future without web frameworks
 
Rise and Fall of the Frontend Developer
Rise and Fall of the Frontend DeveloperRise and Fall of the Frontend Developer
Rise and Fall of the Frontend Developer
 
Web Application Frameworks - Web Technologies (1019888BNR)
Web Application Frameworks - Web Technologies (1019888BNR)Web Application Frameworks - Web Technologies (1019888BNR)
Web Application Frameworks - Web Technologies (1019888BNR)
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Silverlight abhinav - slideshare
Silverlight   abhinav - slideshareSilverlight   abhinav - slideshare
Silverlight abhinav - slideshare
 
A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
A Gentle introduction to Web Development & Django
A Gentle introduction to Web Development & DjangoA Gentle introduction to Web Development & Django
A Gentle introduction to Web Development & Django
 
Everything you need to know about mern stack programming
Everything you need to know about mern stack programmingEverything you need to know about mern stack programming
Everything you need to know about mern stack programming
 
Agriya services
Agriya servicesAgriya services
Agriya services
 
Web programming technologies
Web programming technologiesWeb programming technologies
Web programming technologies
 
Silverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use ItSilverlight - What Is It And How Can We Use It
Silverlight - What Is It And How Can We Use It
 

Similar to Web Application Solutions

Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web ApplicationSachin Walvekar
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesvsnmurthy
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeaturesguest9b7f4753
 
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1... Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...WebStackAcademy
 
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
 
Sencha Web Applications Come of Age
Sencha Web Applications Come of AgeSencha Web Applications Come of Age
Sencha Web Applications Come of Agebastila
 
Democratizing the Cloud with Open Source Cloud Development
Democratizing the Cloud with Open Source Cloud DevelopmentDemocratizing the Cloud with Open Source Cloud Development
Democratizing the Cloud with Open Source Cloud DevelopmentIntel Corporation
 
Rapid cloudapplicationdevelopmentwithlimeds
Rapid cloudapplicationdevelopmentwithlimedsRapid cloudapplicationdevelopmentwithlimeds
Rapid cloudapplicationdevelopmentwithlimedsPhilippe Thiran
 
PPT with Flash ry
PPT with Flash ryPPT with Flash ry
PPT with Flash rymarina2207
 
Internet applications unit1
Internet applications unit1Internet applications unit1
Internet applications unit1MSc CST
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Information Management & Sharing in Digital Era
Information Management & Sharing in Digital Era Information Management & Sharing in Digital Era
Information Management & Sharing in Digital Era Liaquat Rahoo
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworksshank
 
WAD - WaveMaker tutorial
WAD - WaveMaker tutorial WAD - WaveMaker tutorial
WAD - WaveMaker tutorial marina2207
 
WaveMaker tutorial with Flash
WaveMaker tutorial with FlashWaveMaker tutorial with Flash
WaveMaker tutorial with Flashmarina2207
 
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
 

Similar to Web Application Solutions (20)

Web Application Solutions
Web Application SolutionsWeb Application Solutions
Web Application Solutions
 
Qnx html5 hmi
Qnx html5 hmiQnx html5 hmi
Qnx html5 hmi
 
Making Of PHP Based Web Application
Making Of PHP Based Web ApplicationMaking Of PHP Based Web Application
Making Of PHP Based Web Application
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1... Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
 
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
 
Sencha Web Applications Come of Age
Sencha Web Applications Come of AgeSencha Web Applications Come of Age
Sencha Web Applications Come of Age
 
Democratizing the Cloud with Open Source Cloud Development
Democratizing the Cloud with Open Source Cloud DevelopmentDemocratizing the Cloud with Open Source Cloud Development
Democratizing the Cloud with Open Source Cloud Development
 
Rapid cloudapplicationdevelopmentwithlimeds
Rapid cloudapplicationdevelopmentwithlimedsRapid cloudapplicationdevelopmentwithlimeds
Rapid cloudapplicationdevelopmentwithlimeds
 
PPT with Flash ry
PPT with Flash ryPPT with Flash ry
PPT with Flash ry
 
WaveMaker Presentation
WaveMaker PresentationWaveMaker Presentation
WaveMaker Presentation
 
Internet applications unit1
Internet applications unit1Internet applications unit1
Internet applications unit1
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Information Management & Sharing in Digital Era
Information Management & Sharing in Digital Era Information Management & Sharing in Digital Era
Information Management & Sharing in Digital Era
 
AJAX Frameworks
AJAX FrameworksAJAX Frameworks
AJAX Frameworks
 
WAD - WaveMaker tutorial
WAD - WaveMaker tutorial WAD - WaveMaker tutorial
WAD - WaveMaker tutorial
 
WaveMaker tutorial with Flash
WaveMaker tutorial with FlashWaveMaker tutorial with Flash
WaveMaker tutorial with Flash
 
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
 

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
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
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
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
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
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 

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...
 
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
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
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
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
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
 
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
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 

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 applications that utilize the Web browser for security, Web applications that enable richer, locally processed user Web-connected applications that do not run within the Web state management, and script execution (run-time). Most interactions (fluid animation, multimedia content, real time browser and can be delivered as compiled code. Rich Clients data processing and storage occurs on a remote server and validation, etc.) and advanced remote messaging (Java leverage local processing to enable rich interactions and can not a user’s local machine. Server request and response Objects, Web Services, etc.). Sun’s Java plug-in and utilize Web Services to connect to distributed data sources and mostly occurs through the http protocol. Macromedia’s Flash are two of the most common RIA auto-update. Unlike Thin Client applications, Rich Clients can run-times. RIAs can only run in a Web browser within be used offline and more easily integrate with local hardware The primary benefits of thin clients are wide reach embedded plug-ins. and software. (accessible by anyone with a Web browser), open development platform (built on popular open standards), no The HTTP communication layer used by Thin Client A Rich Client can embed a Thin Client (i.e. a desktop footprint (quick download, no artifacts on user machines applications technically does not support guaranteed application with an integrated Web browser within which a thin beyond browser cookies), and deployment/manageability message delivery, does not guarantee the order of message client application can run. (distributed and maintained from a central source). delivery, and does not support server-initiated communications. Many RIA communication layers provide Rich Client Solutions: Thin Client Solutions: reliable messaging and enable server “pushes” of content. Windows Smart Clients HTML, XHTML Java Web Start 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 to as AJAX) are sometimes considered JavaScript RIAs. Upcoming, Interesting, or Relevant Solutions While this guide focuses on some of the most popular Web A Thin Client can embed (integrate through a Web browser application solutions available today, there are a number of plug-in) an RIA (i.e. a Flash module in a DHTML application). relevant technologies that may be considered for specific uses (i.e. PDF for data entry) or future projects (i.e. XUL or XAML). Rich Internet Application Solutions: Flash 6 (and higher) Examples include Flash with Flex or Laszlo Presentation Server Canoo Ultra Light Client (ULC) Java Applets Java WebCream Active X PDF 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 "straddle the line". 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 Accessible by anyone with a Web Local Processing & Integration browser; usually operating system Most responsive UI; local hardware & independent software integration 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 user action require a full-page rewrite (as in the case of load and subsequent response times of the user interface? Future Proofing 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, download, footprint, etc.)? Back-end Integration 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 • http://farechase.yahoo.com (Flight Search only. Hotel search uses xmlHttpRequest) • Remote Scripting with iframe [http://developer.apple.com/internet/webcontent/iframe.htm] 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 Examples: Read More: • www.gmail.com (load JavaScript engine at start of session) • http://developer.apple.com/internet/webcontent/xmlhttpreq.html • map.search.ch • XMLHttpRequest for the masses: http://www.allinthehead.com/retro/241/xmlhttprequest-for-the-masses • maps.google.com • http://www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility • www.flickr.com (edit the titles of your photos in situ) • Simple Ajax Toolkit: http://www.modernmethod.com/sajax/ • www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples • JSON-RPC: http://oss.metaparadigm.com/jsonrpc/ 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost Flash offers a rich According to Built-in ActionScript Flash Pro comes Reduction in server Applications can be Given proprietary Decrease costs by set of features for Macromedia, Flash enables dynamic wtih many pre-built loads due to ported to Flash Lite format, APIs may developing/testing engaging interac- 6+ is installed on processing without components: data processing on the for use on mobile change from once for all tions including drag 95.1% of Internet- page reloads grid, tree view, client side and pure devices (w/Flash 4 version to version. platforms and drop, enabled desktops (server hits) accordian, menu data requests functionality) However, animation, in the US, over bar, etc. (without presenta- Macromedia ActionScript 2 is transparency, 96% in Europe and Natively supports tion layer) after the Can enable back seems to be object-oriented and layering, audio and Canada and 92% vector graphics, Many additional initial load. button by access- committed to based on ECMA video streaming. in Asia. streaming audio, Flash UI toolkits ing history object standards such as Script (like and streaming and components Socket connections CSS, XML, SOAP, JavaScript), so Enables real-time Applications video available by 3rd allow server- Bad rep from SVG, etc. developers familiar updates and delivered through parties initiated communi- designers w/JavaScript can validations as user the Flash player Client-side cations to client reinventing simple quickly pick up completes form can run identically XML/DOM parsing Both flexible and app UI widgets (in part ActionScript fields on all the major has latency issues grid layouts are due to Flash’s operating systems possible (using Flash 6+ can be component set) However, Potential latency container objects) used as the programmers with due to relevantly Near seamless presentation layer In theory code is relevant Flash large initial upgrade process Flash’s standard with common protected, but in experience are download and for plug-in components are server technologies reality it can be relatively scarce plug-in launch not easy to such as Java cracked with Traditional tracking customize Servlets, JSP, simple tools. Development could Not fully integrated and metrics can be PHP, ASP, etc. take longer with browser problematic; but Can be connected because everything environment has ability to track to things like Flash must be created (reload, back specific states Communication from scratch: buttons and Server to enable concept of pages, bookmarks). Flash content is not real time AV Chat, links, browse Workarounds exist indexed by search IM, etc. between history, scale, etc. 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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: • http://java.sun.com/applets/ Read More: • 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 • http://activex.microsoft.com • Security issues: http://office.microsoft.com/en-us/assistance/HA011403101033.aspx 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 • http://www.up2go.net (More Than 70 Apps Listed; Apps Are Rated) • Unofficial Java Web Start/JNLP FAQ, Gerald Bauer: http://webstartfaq.com/ • http://www.connectandwork.com/external • http://www-106.ibm.com/developerworks/java/library/j-webstart/ 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 Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost 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 Build Rich Internet Applications with Java standards. ULC’s Nexaweb provides a software platform for developing and Traditional HTML Web forms don't separate the purpose from pure java library offers a server-side API to Swing (servlet deploying Enterprise Internet Applications. The Nexaweb the presentation of a form. XForms, in contrast, are comprised 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 • http://www.nexaweb.com/products.asp XML form definition. XForms 1.0 is a W3C recommendation. deployment mechanism • http://www.w3.org/MarkUp/Forms/ • http://www.canoo.com/ulc PDF & XDP Adobe is trying to evolve PDF into an allpurpose fill-in-the- XSL & XSLT 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 • http://www.adobe.com/products/acrobat/readstep2.html XML vocabulary into another. XSLT processors can be Macromedia Central installed on the server or executed within certain web Unlike conventional web sites, Central applications can SMIL browsers. XSLT have performance issues in high-volume function both online and offline, keeping important The Synchronized Multimedia Integration Language (SMIL, applications. information constantly available. Central applications run in pronounced "smile") HTML-like authoring language for • http://www-106.ibm.com/developerworks/xml/library/x- a controlled environment to keep sensitive data secure. interactive audiovisual presentations. xslt/?article=xr And because Central automatically notifies the user when • http://www.w3.org/AudioVideo/ • http://www.xml.com/pub/a/2003/11/26/learnXSLT.html new versions are available, applications are always up-to-date. SVG XUI • 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. Graphics can be vector, bitmap or text. Promises the following desktop and mobile applications (including PDAs). 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 • http://www.w3.org/Graphics/SVG/SVG-Implementations interfaces such as read/write over the network or communicat- 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 and Principal at LukeW Interface Designs, a consulting firm experience strategist, researcher, and design consultant. Frank Much thanks to the following individuals who contributed to the he founded in 1996. Luke has authored a book on Web has led the design of many digital products and services, ideas and accuracy of this paper: interface design principles titled Site-Seeing: A Visual including e-commerce applications, touch-screen kiosks, rich Approach to Web Usability (Wiley & Sons, 2002) and multiple internet applications, intranets and training programs. Clients Benjamin Wigton, Lead Interface Engineer, Avenue A / articles on interface design including those featured in his include Yahoo!, eBay and numerous start-ups. Razorfish own Web-zine, Functioning Form. David Heller, Steering Committee Member, Interaction Prior to starting his consultancy, Frank was Sr. Information Designer's Group (IxDG) Previously, Luke taught Interface Design courses for the Architect at Walmart.com where he led requirements definition Dirk Knemeyer, Principal, Involution Studios Graduate School of Library and Information Science at the and information architecture for multiple in-store, online and Erin Malone, Director, Platform Design, Yahoo! Inc. University of Illinois at Urbana-Champaign and worked as a cross-channel initiatives. He participated in a wide variety of James Reffell, Sr. UI Designer, eBay Inc. Senior Interface Designer at the National Center for project activities including: discovery research, concept Jamie Hoover, Sr. UI Designer, eBay Inc. Supercomputing Applications (NCSA), birthplace of the first generation, usability testing, cross-functional collaboration, IA Johnathan Boutelle, Principal, Uzanto Consulting readily available graphical Web browser, NCSA Mosaic. At documentation and communication. Michael Hoch, Director of Prototype Design, Yahoo! Inc. NCSA, Luke designed interface solutions for Peter Bogaards, Founder, BogieLand Information Design & Hewlett-Packard, IBM, and Kellogg's, and co-developed the Frank earned his B.S. in Graphic Design and has designed Information Architecture Open Portal Interface Environment (OPIE). Luke's research enterprise-level web applications since 1996. Sarah Allen, Software Architect, Laszlo Systems, on Web-based interface designs has been published and Todd Warfel, Partner, Design & Usability Specialist, presented at national and international conferences. MessageFirst Uday Gajendar, User Experience Pathfinder, Adobe Systems 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
  • 19. References [1] Bob Baxley, What is a Web Application?. Boxes And Alex Kalinovsky. Savor success with Java on the front end. Marc A. Garrett. Review: Macromedia Flex and Flex Builder Arrows, 2003 HTML, Swing, or XML: Choose the best front-end http://digital-web.com/articles/macromedia_flex_and_flex_b http://www.boxesandarrows.com/archives/what_is_a_web_ technology for your Java development uilder/ application.php http://www.javaworld.com/javaworld/jw-04-2001/jw-0420-swi [2] Croczilla.com, Core JavaScript Guide 1.5. ng.html Drew Falkman. Review: Macromedia Flex, Java Boutique http://www.croczilla.com/~alex/reference/javascript_guide/i http://javaboutique.internet.com/reviews/macro_flex/ ntro.html Sun hasn't set yet on Java applets, Rick Moore [3] Brent Ashley, Ashley IT. http://www.adtmag.com/article.asp?id=7074 Open Sourcery. Overview - Macromedia Flex http://www.ashleyit.com/rs/main.htm http://www.theopensourcery.com/osrevFlex.htm [4] Jesse James Garret, Ajax: A New Approach to Web Chapter 4: Java Applets. Internet Computing Appications. http://www.cs.swan.ac.uk/~csneal/InternetComputing/index. Mark Eagle. Integrating Macromedia Flex with Java, http://www.adaptivepath.com/publications/essays/archives/ html O’Reilly 000385.php http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.ht [5] Christophe Coenraets, An Overview of MXML, the David Hill, What is a Smart Client anyway? ml Macromedia Flex Markup Language. http://blogs.msdn.com/dphill/articles/66300.aspx http://www.macromedia.com/devnet/flex/articles/paradigm. Drew McLellan. Very Dynamic Web Interfaces html David Hill, Choosing the Right Presentation Layer http://www.xml.com/pub/a/2005/02/09/xml-http-request.html [6] The Open Sourcery. Architecture. Microsoft Corporation http://www.theopensourcery.com/osrevFlex.htm http://msdn.microsoft.com/library/default.asp?url=/library/en- Peter-Paul Koch. Ajax, promise or hype? O’Reilly us/dnmaj/html/choosing_presentation_layer.asp http://www.quirksmode.org/blog/archives/2005/03/ajax_pro mise_or.html Microsoft Corporation. Smart Client Application Model and Jonathan Boutelle. Flash RIAs vs. Javascript RIAs the .NET Framework 1.1 Drew Falkman. Review: Canoo ULC 5.1, Java Boutique http://www.jonathanboutelle.com/mt/archives/2005/03/flash http://msdn.microsoft.com/netframework/programming/winfo http://javaboutique.internet.com/reviews/canoo_ulc/ _rias_vs_j.html rms/smartclient.aspx Overview. Web-enabling Java by Java to HTML converter Adam Rifkin Markus Egger. The Revenge of the Thick Client http://www.creamtec.com/webcream/overview.html http://ifindkarma.typepad.com/relax/2004/12/weblications.ht www.code-magazine.com/Article.aspx?quickid=050023 ml Coach K. Wei . Why Web Applications Can be Problematic James R. Borck. RIA platforms lend apps more Flash: and Unreliable Kevin Lynch. Rich Internet Applications: It's Happening!, Macromedia Flex and Laszlo Presentation Server bring new http://www.sys-con.com/story/?storyid=47364&de=1 Macromedia tricks to Internet application delivery http://www.klynch.com/archives/000074.html http://www.infoworld.com/article/04/12/03/49TClasflex_1.ht ml Web Application Solutions: A Designer's Guide | 19