John A. Bertoglio Co-Laboratory, Inc.

Web Design and Programming

Striking the Balance

John A. Bertoglio Co-Laboratory, Inc.

Why use the web?

Rich environments like .NET, C++ and J2EE allow total control

Vast third-party tools and librariesDeployment issues have been

addressed Web has issues with browsers and

connection speedWeb frameworks can be flaky at best

John A. Bertoglio Co-Laboratory, Inc.

Some standard reasons:

Ease of trainingSimple toolset limits choicesEase of deployment

and …

It’s the “in” thing to do

John A. Bertoglio Co-Laboratory, Inc.

My top two reasons . . .

John A. Bertoglio Co-Laboratory, Inc.

Reason One:

Web-based apps provide the fastest way to go from a business need/concept to a working solution

Critical business processes cannot wait for a .NET/J2EE/C++ solution

With the web we can get users on the system in days . . . not months!

John A. Bertoglio Co-Laboratory, Inc.

Reason Two:

Web-based apps allow rapid changes and enhancements

No plan survives contact with the enemy

If you build exactly what is specified, users will want it changed!

“How hard could it be to . . .”

John A. Bertoglio Co-Laboratory, Inc.

Integrating design

John A. Bertoglio Co-Laboratory, Inc.

Programmer as designer

“A year ago I couldn’t even spell UI designer, now I are one!”

“Design is easy . . . Just find a site you like on the web and copy it!”

“Don’t worry about that, I know how it works”

John A. Bertoglio Co-Laboratory, Inc.

Designer as programmer

“There was a bunch of stuff on the page that I didn’t understand so I deleted it. . . Oh, by the way, only one row displays in the table now and the select lists have no values”

John A. Bertoglio Co-Laboratory, Inc.

Important principles

Separate UI from data save/fetchAll formatting in CSS Make the web design page

look like a “web page”

John A. Bertoglio Co-Laboratory, Inc.

More principles

Externalize as much code as possible WLD and CSP Other ugly environments EWD

Provide data to the page in a consistent format

Give the designer enough choices

John A. Bertoglio Co-Laboratory, Inc.

Yet more principles

Data binding? Are you sure?Minimal inline JS: move code into

librariesOnly use tricks that really

enhance the user experience

John A. Bertoglio Co-Laboratory, Inc.

Why AJAX screws everything up

John A. Bertoglio Co-Laboratory, Inc.

The AJAX promise

“Fat client-like” behaviorFast responseRich toolsetsTotally cool

John A. Bertoglio Co-Laboratory, Inc.

The AJAX problem

No AJAX library is completePage fragments are not coherent

HTML constructsInfo flow is internal . . .

not page-to-pagePlanning and communication

become much more critical

John A. Bertoglio Co-Laboratory, Inc.

Programmer-designer partnership

John A. Bertoglio Co-Laboratory, Inc.

Programmer

Primary role: Move the required information to and from the database

Document this process so the page designer can select the proper

Provide exactly what the designer/builder requests

Stay ahead of data needs

John A. Bertoglio Co-Laboratory, Inc.

Page designer/builder

Primary role: Manage client expectations

Stay ahead of the programmers with page and/or fragment prototypes

Select correct data to display and capture

Communicate requirements to the programmer (translate when needed)

John A. Bertoglio Co-Laboratory, Inc.

Programmer adjustments

Understand the need forclean, easy-to-modify pages

Be responsive to designer/business partner requests

Code externallyBe aware of CSS and

page/fragment design principles in use

John A. Bertoglio Co-Laboratory, Inc.

Programmer adjustments 2

Provide coherent HTML design pages for AJAX fragments Include CSS and JS calls Various standard HEAD, BODY, etc.

tags Non-relevant code can be commented

out at run time

John A. Bertoglio Co-Laboratory, Inc.

Designer adjustments

Understanding basic flow control IF: conditionals FOR: building table rows

Accept responsibility for data presentation and flow

Be able to document user needs such as data validation

John A. Bertoglio Co-Laboratory, Inc.

Questions?