The Yucky Parts of Web Development

Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology

Eric Foster-Johnson– Software developer. Author. Cat Herder. – eric.foster-johnson@objectpartners.com– http://foster-johnson.com

ObjectPartners, Inc.

Founded 1996, privately held company Minneapolis based

– Branch office in Omaha, NE 50 employees and growing Enterprise IT Consulting

– Leveraging leading edge and open source technologies• Striving for the highest levels of productivity and quality

– Delivering mission critical applications that:• Perform well• Have high quality• Are easier to maintain

SpringSource partner– Using Spring for 5+ years– Excited about Grails

Why Web Applications Are Hard

The basic technology is brittle – and difficult to work with

Everyone wants a say– but no one wants to make it any easier

Lack of time-saving patterns – like we have for other areas of application development

A few patterns can speed things up– especially at the start of a project– reasonable compromises

Basic Technologies

HTML is the XML-like markup language used to define the structure of your pages.

CSS, Cascading Style Sheets, provide styles such as fonts and colors.

JavaScript allows you to muck up the page on the fly.

Ajax is using JavaScript to communicate back to the server without refreshing the entire page.

Everyone Wants a Say

...but no one wants to make it easier Desire for rich desktop applications on the Web Easy to comment on what is visible Parkinson's Law of Triviality

User Interface Guidelines, Designers

User interface guidelines – are almost entirely arbitrary

User interface designers – are almost entirely arbitrary.

You can find something – to back up any arbitrary decision.

Almost all statistics for usability – are old

Most usability – covers brochureware sites– not Web applications

Educate Your UI Designer

What works well What is nearly impossible Pay special attention to what layouts work best with

your toolkits. Pay special attention to interaction styles.

Typical Software Tiers

A domain or persistence tier with data-access objects, or DAOs

A service, business logic, or transaction tier A web tier for the user interface

– SOA web services tier or – Web user interface

Why Web Applications Are Hard

We have patterns to speed development – for everything but the Web tier

Willing to make reasonable compromises– except on the Web tier

And, we start with a blank slate on the Web

Some Patterns You Can Use

Basic page layout– Header– Footer– Navigation area– Main content

The List, View Edit Pattern

List of items– results of a search

View details of one item– much like a form, but read only

Edit one item– HTML form

The Small Interaction Pattern

Edit in place. Small changes sent to server take immediate effect No big bucket saves

– See backpackit.com.

Basic Layout with CSS

CSS Layout Table-based layout

Tables Are Needed When

Table layout is bad, but... Tables are needed when

– You need the nav bar to reach the bottom– You need to line up data

A Workable CSS Layout

Start with YUI reset-fonts-grids.css– Don't have to use any more of YUI

Put your content in DIVs– Multiple DIVs for main content

Navigation area appears after main content – within HTML document

YUI CSS Layout

<div id="doc3" class="yui-t1"> <div id="hd"><!-- Header --></div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g "><!-- CONTENT HERE --> </div> </div> </div> <div class="yui-b”><!-- Nav area --></div> </div> <div id="ft"><!-- Footer --></div> </div>

Web Accessibility

US government guidelines– No information conveyed just by color. Must use something

else along with color– All input items, such as buttons, must have text

equivalences if they are images– Documents should be readable without a style sheet (CSS)– All tables of data need row and column headers– All images need alt or longdesc text

Web Accessibility Tips

Use basic HTML tags, such as H1– instead of a span with a class– H1 conveys structure as well as rendering

Anything you do to enhance keyboard navigation helps accessibility– Screen readers are very much like keyboard navigation

Use CSS layout – tables only for data and lining up forms

Don't auto-submit forms– Such as when selecting from a drop list

Jump to content hidden link– Screen reader can skip over header, etc.

Making Things Look Nice

Grids are good, really good– Lines things up– Allows space for ads (if applicable)– Used since ancient times

Provides a sense of balance Makes it easier to find the information

Spacing Text

Text spacing– Extra space at bottom to make it look even– Optical illusion

CSS padding like the following ratio usually works:– padding: 1 1 2 1– That's ratio, such as:– padding: .15em .15em .30em .15em;– reminder – top right bottom left

A Quick-Start On Styles

Take corporate styles from external or internal Web – Grab colors, fonts, overall look– Don't forget a logo image– Someone approved these

Can look at Open Source Web Designs– Most are for blogs, not appropriate for Web applications– Few look good– Two I like are Leaves and Neuphoric

Colors and Icons

Use the color blender– Range of shades, light or dark

Silk icons– small print icon, etc.

Mouseovers

Nice way to add interactivity Not hard

Mouseovers (cont'd)First, define even and odd row styles for the zebra-striping:

.rowEven { background-color : #eeeeff; color: #000000; }

.rowOdd { background-color : #ffffff; color: #000000; }

Next, add highlighted colors:

.highlight td.rowEven { background-color : #ddddaa; color: #000000; }

.highlight td.rowOdd { background-color : #dddd88; color: #000000;}

Mouseovers (cont'd)

Note the way these styles are defined means that the parent tag has a class of highlight. That is, the TR, or row tag will get that style.

Next, you need to define a style for the TD tags you want to remain invisible until the mouse is over the row:

td.hiddenRowEven { visibility: hidden; }

td.hiddenRowOdd { visibility: hidden;}

Mouseovers (cont'd)Then, add highlight styles to make the table cells magically appear:

.highlight td.hiddenRowEven { visibility: visible; background-color : #ddddaa; color: #000000; padding: .3em .3em .6em .3em}

.highlight td.hiddenRowOdd { visibility: visible; background-color : #dddd88; color: #000000; padding: .3em .3em .6em .3em}

Mouseovers (cont'd)Then, you need a small bit of JavaScript to change the styles:

function changeStyle(element, styleClass) { element.className = styleClass;}

Call this function on the TR tag:

<tr onmouseover="changeStyle(this, 'highlight');" onmouseout="changeStyle(this, '');">

Note this is just adding or removing the "highlight" style.

Now, flag the hidden cells with the proper style:

<td class="hiddenRowOdd" > <a href="link">Edit</a></td>

Mouseovers Example

We can try it out.– mouseover_example.html

Toolkits, Technology

May be pre-determined Java

– Use Spring MVC if using Spring– Use Spring

JavaScript Libraries

JavaScript– YUI– Prototype– jQuery– Dojo– Check the licenses!!

All have problems– and quirks

JavaScript development– takes about 3 times as long as for Java

Resources

Grids are Good– www.subtraction.com/pics/0703/grids_are_good.pdf

YUI Grid layout– developer.yahoo.com/yui/grids/

Backpack– backpackit.com– Try out a free account

These slides will be available on objectpartners.com after Feb. 7, 2009.– Example CSS and HTML files, too.

Questions?

Pithy sayings at no additional charge