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@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 • <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>

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

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