Web applicationsolutions

Web applicationsolutions

• 1.
  Web Application Solutions:A Designer’s Guide
• 2.
  Overview As the Webcontinues 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 Thisguide 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 primarybenefits 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 Webapplication 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 isa 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 andCSS (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 RemoteScripting 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 (andhigher) 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 Flexor 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 JavaApplet 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 Xis 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: JavaWeb 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: Asmart 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 andRelevant 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 isan 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, Principal Designer, IntraLinks & Steering Prior to starting his consultancy, Frank was Sr. Information Committee Member, Interaction Design 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. Todd Warfel, Partner, Design & Usability Specialist, on Web-based interface designs has been published and MessageFirst presented at national and international conferences. 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