Clicks & Notes

Functioning Form - Web Application Solutions: A Designer’s Guide

Web Application Solutions is a guide that helps designers, product managers, and business owners evaluate some of the most popular Web application presentation layer solutions available today. We compare each solution through consistent criteria (deployment & reach, user interactions, processing, interface components & customization, back-end integration, future proofing, staffing & cost, unique features) and provide an overview, set of examples, and references for each.

• Types of Web Applications:
  • Thin Client
    • uses web browser for security, state management, and script execution
    • most data processing and storage occurs on a remote server
  • Rich Internet Application (RIA)
    • enables richer locally processed user interactions, such as fluid animation, multimedia content, and real-time validation
    • also enables advanced remote messaging
  • Rich Client (smart client, desktop client)
    • a web-connected application that does not run within the browser, and can be delivered as compiled code
• Web Application Technologies:
  • (X)HTML
  • DHTML (HTML + JavaScript + CSS)
    • DHTML with Remote Scripting via iFrame
    • AJAX (DHTML with XMLHttpRequest
  • Flash (version 6 or higher)
    • Flash with Flex or Laszlo Presentation Server
  • Java Applets
  • Active X
  • Java Web Start
  • Windows Smart Clients

See also: Functioning Form - Web Application Continuums

Many Web Application technologies are an attempt to bridge the gap between Thin (browser-based) and Thick (desktop-based) clients. As a result, it’s useful to consider where they fall on a continuum between these two deployment and design options.

CommunityMX - Creating Liquid Faux Columns

• creating liquid equal-height columns
• (via mezzoblue)

Stopdesign - Liquid Bleach

• offers these three pointers for creating liquid layouts:
  • double-div columns
  • use fixed-width gutters
  • avoid fixed-width columns
• (also via mezzoblue)

Anne’s Weblog about Markup & Style - Super simple clearing floats

• setting overflow properties on an element that contains floats
• see also:
  • mezzoblue - Clearance
  • SitePoint Design Blog - Simple Clearing of Floats
• (via Information Management Weblog)

joshuaink - A simple introduction to 3 column layouts

• introductory HOWTO with downloadable samples
• (via del.icio.us)

Talk.org - CSS tips for coders: The only layout rule you need to know

• float vs. absolute positioning
• (also via del.icio.us)

Builder.com - Fight over ‘forms’ clouds future of Net applications

• factions within the W3C are split between supporting XForms and current standards-based HTML forms; meanwhile there are XAML, Flash MX, and XUL to consider

XML.com - The Google Wake-Up Call

• overview of Google advances in the use of the rel attribute in HTML (as part of the “nofollow” specification to prevent comment spam) , and in using XMLHttpRequest for generating dynamic web interfaces (cf. “Ajax” and the new breed of web applications)
• (via del.icio.us)

WebPasties - Guide to Using XMLHttpRequest (with Baby Steps)

The XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves.

• (via Information Management Weblog)

Update: [JPSPAN] - javascript:xmlhttprequest

• an extensive list of links to references, tutorials, examples, tools, etc.
• (via kottke)

Computerworld - Common Web Application Vulnerabilities

• survey of web application vulnerabilities, and ways to mitigate the risks, including those posed by:
  • authentication
  • session security and session IDs
  • SQL injection vulnerabilities
  • Buffer Overflows
  • cross-site scripting (XSS)

Thinking Faster - Software ROI expectations:

• the 3-6-3 rule provides suggested timelines/guidelines for designing, building, deploying and receiving benefit from software:
  

  6 months - start to finish, we want to try to limit any software release that we build to 6 months or less. If the development gets longer, we are apt to miss a technology or business window. We need substantial functionality, but not at the risk of bloatware or delayed releases.

  3 months - how long it should take, start to finish, to deploy our enterprise and workgroup productivity and innovation tools… The faster a customer can implement and deploy a meaningful solution, the easier it will be for them to accept and embrace the solution.

  3 months - how long it should take for the software to pay for itself… We want to build software that will provide a meaningful benefit within three months of the completion of the deployment. No one wants to wait for a return on investment on software any more.

adaptive path - ajax: a new approach to web applications

• “Ajax” (shorthand for “Asynchronous JavaScript + XML") is a way to make web applications more responsive to user interaction
• traditional web applications rely on communication between a user and a web server via HTTP, which result in a “start-stop-start-stop” type of interaction:
  • user sends a request to the server
  • the server processes the request
  • the server returns a(nother) web page back to the user
  • repeat…
• an Ajax “engine"– written in JavaScript, and loaded at the start of a user session – can instead act as an intermediary between the user and server:
  

  Any response to a user action that doesn’t require a trip back to the server — such as simple data validation, editing data in memory, and even some navigation — the engine handles on its own

  If the engine needs something from the server in order to respond — if it’s submitting data for processing, loading additional interface code, or retrieving new data — the engine makes those requests asynchronously, usually using XML, without stalling a user’s interaction with the application.

• Ajax is not a new technology in and of itself; it incorporates existing web technologies:
  

  • standards-based presentation using XHTML and CSS;
  • dynamic display and interaction using the Document Object Model;
  • data interchange and manipulation using XML and XSLT;
  • asynchronous data retrieval using XMLHttpRequest;
  • and JavaScript binding everything together.

• current online applications using Ajax include the various Google products, Flickr and A9.com

WebCredible - Ten CSS tricks you may not know

• includes tips on centre-aligning a box element, vertical alignment, and positioning within a container
• (via del.icio.us)

A List Apart - Bulleted Lists: Multi-Layered Fudge

• using CSS to create two columns of bulleted lists in the flow of the text

WebReference.com - JavaScript and Accessibility, Pt. 1.

• practical and standards-compliant use of JavaScript; first in a three-part series
• (via del.icio.us)

456 Berea Street - Developing With Web Standards: Recommendations and Best Practices

• good overview of what standards exist, why to use them, and basic authoring tips, with plenty of links to more information
• (via InfoDesign)

WebSiteOptimization.com - Optimize PDF Files

• tips on shrinking PDFs for web use
• (via InformIT)

Accessible Information Solutions - Colour Contrast Analyser

• “a tool for checking foreground & background colour combinations to determine if they provide good colour visibility”
• (via Column Two)

456 Berea Street - Basics of search engine optimisation

Good checklist, reiterating much of the usual advice, i.e. use valid semantic markup (including header tags), no frames, text instead of graphics or Flash elements, readable URLs…

Standout bits:

• on writing descriptive page titles:
  

  When it comes to the order of the text in the title element, I’ve found that the following works well:

  Document title | Section name | Site or company name

• resources about generating search engine friendly, human readable URLs:
  • Generating Simple URLs for Search Engines
  • mod_rewrite: A Beginner’s Guide to URL Rewriting
• browser detection scripts may inadvertently block search engine spiders and prevent your site from getting indexed
• most meta tags aren’t of much value, however:
  

  Some search engines use the contents of the meta description element to describe your site in their search result listings, so if possible, make its contents unique and descriptive for every document.

As the author summarizes:

The ultra-short guide to SEO: add quality content regularly and make sure your site is well-built.

Digital Web Magazine - The Dollars and Sense of Building to Standards

• unless a significant portion of your user base (i.e., both numerically and “commercially” significant) is still browsing with Netscape 4.7 and/or IE 4, you should be coding in XHTML and not HTML4.01
• dropping support for Netscape 4.7 and IE 4 and 5 results in a time reduction of anywhere from 15-35% in the HTML development phase of Web development
• using CSS can reduce the cost of updating a design significantly, even for older browsers
• standardized code is also easier to maintain; this again translates into a cost savings
• using standardized semantic markup and removing presentation elements from a page also enables search engines to read the content more easily, thus boosting search engine rankings

See also: Search Engine Watch - Web Standards vs. Search Friendly Sites: Can You Have Both?

IT and communication - Allowed nesting of elements in HTML 4 (and XHTML 1.0)

XHTML 1.0 is, as its subtitle says, “A Reformulation of HTML 4 in XML 1.0″, so the nesting rules are the same as in HTML 4.01. However, there are… differences that affect the nesting rules

Moreover, some of the restrictions on nesting are expressed differently; due to metalanguage differences

• (via mezzoblue)

Phono Phunk - Managing CSS Hacks

• separating browser hacks into individual style sheets ensures that the main style sheet will validate; you can also try grouping hacks into separate files for separate browsers
• (via del.icio.us)

evan.nixsys.bz - Annotating images with CSS

• various techniques using only CSS and HTML; text in unordered lists appears when you mouse over an image; some nice effects
• (via del.icio.us)

onlinetools.org - Unobtrusive Javascript

• techniques for using JavaScript while maintaining accessibility
• (via paranoidfish)

Managing Product Development - Managing Defects by Severity and Frequency

I’m familiar with managing defects by severity (how bad the problem is for the user if the user encounters the problem), and by priority (what’s the business value of fixing this problem), but I had lunch yesterday with some folks who use frequency of occurrence to also manage defects.

Here are their definitions:

1 - High: Encountered by many users, including downstream teams, in their normal course of work (> 10% of the user community or > 100 individual users)

2 - Medium: Encountered by some users, including downstream teams, in their normal course of work

3 - Low: Encountered by few users, including downstream teams, in their normal course of work (< 1% of the user community and < 10 individual users)

Cutting Through - Sanity checks for feature lists:

Here’s a simple technique that we use on a regular basis as a ’sanity check’ for the technical requirements of a development project.

1. If it’s not already been done, write out the functional specifications as a numbered list of requirements.
2. Do the same for the business requirements that were identified in the earlier stages of the project.
3. Take each functional requirement in turn and cross-reference it against one or more business requirement. At each iteration, ask yourself “what business benefit does this feature deliver?”
4. If there are any functional requirements that can’t be linked to a business requirement, ask yourself if it’s needed - and be very sceptical of the answer if it’s “yes".

Position Is Everything - How To write Efficient CSS

One of the touted benefits of CSS is that it reduces total page weight, and thus download time, both at first page load, and even more on subsequent loads due to style sheet caching. This is true, but often a sizable fraction of the first load savings is lost because of highly redundant CSS code.

(via xBlog)

mezzoblue - Redundancy vs. Dependency

CSS forces you to make a choice in your coding techniques, a choice that becomes more obvious the larger a site grows. As the amount of variance between different templates increases, you can go in one of two directions: you can either code for redundancy, or code for dependency.

Two series of introductory articles from developer.com…

Object Orientation:

• The Object-Oriented Thought Process
• Moving from Procedural to Object-Oriented Development
• The Object-Oriented Thought Process (same title, different article)
• Thinking in Objects
• Furthering the Object-Oriented Mindset
• Exploring Encapsulation
• Hiding Data within Object-Oriented Programming
• Protecting Data through Object Oriented Programming
• Putting an Object in a Safe State

UML:

• UML Overview
• UML Tools
• Creating Use Case Diagrams
• The UML Class Diagram: Part 1
• The UML Class Diagram: Part II
• Object Diagrams in UML
• State Diagram in UML
• Activity Diagram in UML
• Sequence Diagram in UML
• Collaboration Diagram in UML
• Component Diagrams in UML

456 Berea Street - The perils of using XHTML properly

• serving XHTML using the application/xhtml+xml MIME type leads to complications that don’t occur when you serve it as text/html
• (via Mezzoblue)

A List Apart - Pocket-Sized Design: Taking Your Website to the Small Screen

• creating a stylesheet for page display on handheld devices; includes a few tweaks specific to the Opera web browser

Builder.com - Use presentation layer table sorting to achieve a better user experience

• can be done via client-side, server-side, or combination client- and server-side implementations

Drunk Monkey - Print out HREFs on Links for Print StyleSheet

• code using DOM works cross-browser and is more flexible than a plain CSS solution
• (via paranoidfish)

Left Justified - CSS Negotiation and a Sanity Saving Shortcut

• dealing with cross-browser differences in handling padding and margin, among other things
• (via Asterisk)