Web Design and Programming

50 %
50 %
Information about Web Design and Programming

Published on April 5, 2008

Author: george.james

Source: slideshare.net

Description

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

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

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

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!

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 . . .”

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”

“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”

“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”

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

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

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

“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

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

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)

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

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

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

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?

Add a comment

Related presentations

Related pages

Web Design and Programming | TNTMAX

Custom Design Your company’s brand has its own voice. TNTMAX has experience building large-scale web applications using a full range of industry-leading ...
Read more

Web Design, Web Programming - Free Computer, Programming ...

Free Computer Books, Free Mathematics Books, Directory of online free computer, programming, engineering, mathematics, technical books, ebooks, lecture ...
Read more

Webdesign in Berlin: Programmierung - TBA Berlin und ...

Wir erstellen Ihren Webauftritt - Von der Inhalts-Konzeption, Gestaltung, Grafik, Fotografie, Videos bis zur technischen Realisierung nach aktuellen Standards.
Read more

Himbeerrot | Corporate Design, Markenentwicklung ...

Webdesign und Programmierung Designkonzepte, Content Management Systeme (CMS), Diskussionsforen, Newsletter, Weblogs, interaktive Tests, Datenbanken, ...
Read more

Webdesign | Webdesigner | Web Design ab 19€/h & SEO ...

34 Webdesigner für Webdesign. Webprogrammierer für HIGH END Quality Webseite ab 250€ incl. gratis Basis SEO√ 10 Jahre Praxis√ mehr als 2500 Projekte!
Read more

Top 25 Web Design And Programming profiles | LinkedIn

Here are the top 25 Web Design And Programming profiles on LinkedIn. Get all the articles, experts, jobs, and insights you need.
Read more

Web Design and Programming | Vermont Web Design

Web Design Vermont. Vermont Website design, Vermont Website hosting, Vermont Internet marketing. We are located in Burlington, Vermont
Read more

The New Future from Web-Design and Programming

The New Future from Web-Design and Programming . Struktur des Unternehmens Ein Unternehmen, das sich auf moderne Webanwendungen spezialisiert hat.
Read more

Mediendesign und Programmierung - BRAUN.MEDIA

BRAUN.MEDIA in Offenburg - Gestaltung und Entwicklung von Internetseiten, Responsive Websites, Online-Shops, Apps, Werbung, Logos und Geschäftsausstattungen.
Read more

Internetagentur - Venne Media

Bei uns erwarten Sie Web-Spezialisten mit ausgeprägtem technischen Verständnis. Webdesign made by Venne Media.
Read more