Web Design and Programming


Published on

Striking a balance between programmers and designers when developing web applications.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design and Programming

  1. 1. Web Design and Programming Striking the Balance
  2. 2. Why use the web? <ul><li>Rich environments like .NET, C++ and J2EE allow total control </li></ul><ul><li>Vast third-party tools and libraries </li></ul><ul><li>Deployment issues have been addressed </li></ul><ul><li>Web has issues with browsers and connection speed </li></ul><ul><li>Web frameworks can be flaky at best </li></ul>
  3. 3. Some standard reasons: <ul><li>Ease of training </li></ul><ul><li>Simple toolset limits choices </li></ul><ul><li>Ease of deployment and … </li></ul><ul><li>It’s the “in” thing to do </li></ul>
  4. 4. My top two reasons . . .
  5. 5. Reason One: <ul><li>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! </li></ul>
  6. 6. Reason Two: <ul><li>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 . . .” </li></ul>
  7. 7. Integrating design
  8. 8. Programmer as designer <ul><li>“A year ago I couldn’t even spell UI designer, now I are one!” </li></ul><ul><li>“Design is easy . . . Just find a site you like on the web and copy it!” </li></ul><ul><li>“Don’t worry about that, I know how it works” </li></ul>
  9. 9. Designer as programmer <ul><li>“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” </li></ul>
  10. 10. Important principles <ul><li>Separate UI from data save/fetch </li></ul><ul><li>All formatting in CSS </li></ul><ul><li>Make the web design page look like a “web page” </li></ul>
  11. 11. More principles <ul><li>Externalize as much code as possible </li></ul><ul><ul><li>WLD and CSP </li></ul></ul><ul><ul><li>Other ugly environments </li></ul></ul><ul><ul><li>EWD </li></ul></ul><ul><li>Provide data to the page in a consistent format </li></ul><ul><li>Give the designer enough choices </li></ul>
  12. 12. Yet more principles <ul><li>Data binding? Are you sure? </li></ul><ul><li>Minimal inline JS: move code into libraries </li></ul><ul><li>Only use tricks that really enhance the user experience </li></ul>
  13. 13. Why AJAX screws everything up
  14. 14. The AJAX promise <ul><li>“Fat client-like” behavior </li></ul><ul><li>Fast response </li></ul><ul><li>Rich toolsets </li></ul><ul><li>Totally cool </li></ul>
  15. 15. The AJAX problem <ul><li>No AJAX library is complete </li></ul><ul><li>Page fragments are not coherent HTML constructs </li></ul><ul><li>Info flow is internal . . . not page-to-page </li></ul><ul><li>Planning and communication become much more critical </li></ul>
  16. 16. Programmer-designer partnership
  17. 17. Programmer <ul><li>Primary role: Move the required information to and from the database </li></ul><ul><li>Document this process so the page designer can select the proper </li></ul><ul><li>Provide exactly what the designer/builder requests </li></ul><ul><li>Stay ahead of data needs </li></ul>
  18. 18. Page designer/builder <ul><li>Primary role: Manage client expectations </li></ul><ul><li>Stay ahead of the programmers with page and/or fragment prototypes </li></ul><ul><li>Select correct data to display and capture </li></ul><ul><li>Communicate requirements to the programmer (translate when needed) </li></ul>
  19. 19. Programmer adjustments <ul><li>Understand the need for clean, easy-to-modify pages </li></ul><ul><li>Be responsive to designer/business partner requests </li></ul><ul><li>Code externally </li></ul><ul><li>Be aware of CSS and page/fragment design principles in use </li></ul>
  20. 20. Programmer adjustments 2 <ul><li>Provide coherent HTML design pages for AJAX fragments </li></ul><ul><ul><li>Include CSS and JS calls </li></ul></ul><ul><ul><li>Various standard HEAD, BODY, etc. tags </li></ul></ul><ul><ul><li>Non-relevant code can be commented out at run time </li></ul></ul>
  21. 21. Designer adjustments <ul><li>Understanding basic flow control </li></ul><ul><ul><li>IF: conditionals </li></ul></ul><ul><ul><li>FOR: building table rows </li></ul></ul><ul><li>Accept responsibility for data presentation and flow </li></ul><ul><li>Be able to document user needs such as data validation </li></ul>
  22. 22. Questions?