Web Design and Programming
-
Upload
georgejames -
Category
Business
-
view
762 -
download
0
description
Transcript of Web Design and Programming
![Page 1: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/1.jpg)
John A. Bertoglio Co-Laboratory, Inc.
Web Design and Programming
Striking the Balance
![Page 2: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/2.jpg)
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
![Page 3: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/3.jpg)
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
![Page 4: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/4.jpg)
John A. Bertoglio Co-Laboratory, Inc.
My top two reasons . . .
![Page 5: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/5.jpg)
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!
![Page 6: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/6.jpg)
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 . . .”
![Page 7: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/7.jpg)
John A. Bertoglio Co-Laboratory, Inc.
Integrating design
![Page 8: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/8.jpg)
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”
![Page 9: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/9.jpg)
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”
![Page 10: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/10.jpg)
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”
![Page 11: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/11.jpg)
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
![Page 12: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/12.jpg)
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
![Page 13: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/13.jpg)
John A. Bertoglio Co-Laboratory, Inc.
Why AJAX screws everything up
![Page 14: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/14.jpg)
John A. Bertoglio Co-Laboratory, Inc.
The AJAX promise
“Fat client-like” behaviorFast responseRich toolsetsTotally cool
![Page 15: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/15.jpg)
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
![Page 16: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/16.jpg)
John A. Bertoglio Co-Laboratory, Inc.
Programmer-designer partnership
![Page 17: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/17.jpg)
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
![Page 18: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/18.jpg)
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)
![Page 19: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/19.jpg)
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
![Page 20: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/20.jpg)
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
![Page 21: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/21.jpg)
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
![Page 22: Web Design and Programming](https://reader036.fdocuments.net/reader036/viewer/2022070316/555d651ed8b42a0b778b47c9/html5/thumbnails/22.jpg)
John A. Bertoglio Co-Laboratory, Inc.
Questions?