Presentation is loading. Please wait.

Presentation is loading. Please wait.

The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software.

Similar presentations

Presentation on theme: "The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software."— Presentation transcript:

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

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

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

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

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 – YUI Grid layout – Backpack – –Try out a free account These slides will be available on after Feb. 7, 2009. –Example CSS and HTML files, too.

32 Questions? Pithy sayings at no additional charge

Download ppt "The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software."

Similar presentations

Ads by Google