The Yucky Parts of Web Development

1
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_at_objectpartners.com
• http//foster-johnson.com

2
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

3
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

4
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.

5
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

6
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

7
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.

8
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

9
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

10
Some Patterns You Can Use

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

11
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

12
The Small Interaction Pattern

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

13
Basic Layout with CSS

• CSS Layout
• Table-based layout

14
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

15
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

16
YUI CSS Layout

• ltdiv id"doc3" class"yui-t1"gt
• ltdiv id"hd"gtlt!-- Header --gtlt/divgt
• ltdiv id"bd"gt
• ltdiv id"yui-main"gt
• ltdiv class"yui-b"gt
• ltdiv class"yui-g "gtlt!-- CONTENT HERE
  --gt
• lt/divgt
• lt/divgt
• lt/divgt
• ltdiv class"yui-bgtlt!-- Nav area --gtlt/divgt
• lt/divgt
• ltdiv id"ft"gtlt!-- Footer --gtlt/divgt
• lt/divgt

17
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

18
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.

19
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

20
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

21
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

22
Colors and Icons

• Use the color blender
• Range of shades, light or dark
• Silk icons
• small print icon, etc.

23
Mouseovers

• Nice way to add interactivity
• Not hard

24
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
25
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
26
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
27
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 lttr onmouseover"changeStyle(this,
'highlight')" onmouseout"changeStyle(this,
'')"gt Note this is just adding or removing the
"highlight" style. Now, flag the hidden cells
with the proper style lttd class"hiddenRowOdd"
gt lta href"link"gtEditlt/agtlt/tdgt
28
Mouseovers Example

• We can try it out.
• mouseover_example.html

29
Toolkits, Technology

• May be pre-determined
• Java
• Use Spring MVC if using Spring
• Use Spring

30
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

31
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.

32
Questions?

• Pithy sayings at no additional charge