![Page 1: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/1.jpg)
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. – [email protected]– http://foster-johnson.com
![Page 2: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/2.jpg)
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
![Page 3: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/3.jpg)
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
![Page 4: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/4.jpg)
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.
![Page 5: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/5.jpg)
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
![Page 6: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/6.jpg)
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
![Page 7: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/7.jpg)
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.
![Page 8: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/8.jpg)
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
![Page 9: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/9.jpg)
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
![Page 10: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/10.jpg)
Some Patterns You Can Use
Basic page layout– Header– Footer– Navigation area– Main content
![Page 11: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/11.jpg)
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
![Page 12: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/12.jpg)
The Small Interaction Pattern
Edit in place. Small changes sent to server take immediate effect No big bucket saves
– See backpackit.com.
![Page 13: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/13.jpg)
Basic Layout with CSS
CSS Layout Table-based layout
![Page 14: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/14.jpg)
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
![Page 15: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/15.jpg)
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
![Page 16: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/16.jpg)
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>
![Page 17: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/17.jpg)
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
![Page 18: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/18.jpg)
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.
![Page 19: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/19.jpg)
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
![Page 20: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/20.jpg)
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
![Page 21: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/21.jpg)
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
![Page 22: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/22.jpg)
Colors and Icons
Use the color blender– Range of shades, light or dark
Silk icons– small print icon, etc.
![Page 23: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/23.jpg)
Mouseovers
Nice way to add interactivity Not hard
![Page 24: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/24.jpg)
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;}
![Page 25: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/25.jpg)
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;}
![Page 26: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/26.jpg)
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}
![Page 27: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/27.jpg)
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>
![Page 28: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/28.jpg)
Mouseovers Example
We can try it out.– mouseover_example.html
![Page 29: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/29.jpg)
Toolkits, Technology
May be pre-determined Java
– Use Spring MVC if using Spring– Use Spring
![Page 30: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/30.jpg)
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
![Page 31: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/31.jpg)
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.
![Page 32: The Yucky Parts of Web Development Creating Good-Looking Applications for Those Whose Experience Focuses on Back-End Technology Eric Foster-Johnson –Software](https://reader035.vdocuments.us/reader035/viewer/2022070305/5514070c550346e2488b4bb8/html5/thumbnails/32.jpg)
Questions?
Pithy sayings at no additional charge