Web Design and Programming Striking the Balance
Why use the web? Rich environments like .NET, C++ and J2EE allow total control Vast third-party tools and libraries Deployment issues have been addressed Web has issues with browsers and connection speed Web frameworks can be flaky at best
Some standard reasons: Ease of training Simple toolset limits choices Ease of deployment and … It’s the “in” thing to do
My top two reasons . . .
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!
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 . . .”
Integrating design
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”
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”
Important principles Separate UI from data save/fetch All formatting in CSS Make the web design page look like a “web page”
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
Yet more principles Data binding? Are you sure? Minimal inline JS: move code into libraries Only use tricks that really enhance the user experience
Why AJAX screws everything up
The AJAX promise “Fat client-like” behavior Fast response Rich toolsets Totally cool
The AJAX problem No AJAX library is complete Page fragments are not coherent HTML constructs Info flow is internal . . . not page-to-page Planning and communication become much more critical
Programmer-designer partnership
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
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)
Programmer adjustments Understand the need for clean, easy-to-modify pages Be responsive to designer/business partner requests Code externally Be aware of CSS and page/fragment design principles in use
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
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
Questions?

Web Design and Programming

  • 1.
    Web Design andProgramming Striking the Balance
  • 2.
    Why use theweb? Rich environments like .NET, C++ and J2EE allow total control Vast third-party tools and libraries Deployment issues have been addressed Web has issues with browsers and connection speed Web frameworks can be flaky at best
  • 3.
    Some standard reasons:Ease of training Simple toolset limits choices Ease of deployment and … It’s the “in” thing to do
  • 4.
    My top tworeasons . . .
  • 5.
    Reason One: Web-basedapps 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!
  • 6.
    Reason Two: Web-basedapps 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 . . .”
  • 7.
  • 8.
    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”
  • 9.
    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”
  • 10.
    Important principles SeparateUI from data save/fetch All formatting in CSS Make the web design page look like a “web page”
  • 11.
    More principles Externalizeas 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
  • 12.
    Yet more principlesData binding? Are you sure? Minimal inline JS: move code into libraries Only use tricks that really enhance the user experience
  • 13.
    Why AJAX screws everything up
  • 14.
    The AJAX promise“Fat client-like” behavior Fast response Rich toolsets Totally cool
  • 15.
    The AJAX problemNo AJAX library is complete Page fragments are not coherent HTML constructs Info flow is internal . . . not page-to-page Planning and communication become much more critical
  • 16.
  • 17.
    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
  • 18.
    Page designer/builder Primaryrole: 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)
  • 19.
    Programmer adjustments Understandthe need for clean, easy-to-modify pages Be responsive to designer/business partner requests Code externally Be aware of CSS and page/fragment design principles in use
  • 20.
    Programmer adjustments 2Provide 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
  • 21.
    Designer adjustments Understandingbasic 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
  • 22.