ITD3194Web Application Development

Chapter 2: Web Application Requirement

Recalling Session

The big question: What is web application??

How u can have an access to website that belong to oversea county??

Web Application Architecture

The name is : 3-Tier Architecture

What are the components under these architecture? Can u

guess?

3-Tier Architecture

Presentation Layer (Stored in client)

Business Logic Layer (Stored in server)

Database Layer (Stored in database server)

3-Tier architecture

5

PHP script

Web Server (Apache, IIS)

Browser(IE, FireFox,

Opera)

Desktop (PC or MAC)

Database

Database Server

SQLHTTP

HTML tables

DHTML

vision

touch

voice

Presentation Layer

Business LogicLayer

DatabaseLayer

Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites[1] by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.[2]

DHTML allows the page author to:a) Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user.b)Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.c) Use a form to capture user input, and then process and respond to that data without having to send data back to the server.d) Include rollover buttons or drop-down menus.

3-Tier ArchitectureA Presentation layer using Browser

technology

An business logic layer using a web application server platform + application programs

A database layer using a relational database or other data store technology

6

Static Web Page

A static web page is one that has been written once, like a word processing document, and then saved onto the web server.

It’s like a file.A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application.

Static Web Page

It’s like a file. If you could access the web server at a file system level, move the file over to your computer, and then open it up locally in your web browser, it should look exactly the same as if you looked at it through the Internet.

Any changes to a static web page need to be made manually, and then saved again.

Static Web Page

Dynamic Web Page

A dynamic web page is created on the fly. It doesn’t actually exist on the web server

until a web browser requests it.

A dynamic web page is a web page with web content that varies based on parameters provided by a user or a computer program.

Dynamic Web PageWhen a request is made, web server runs whatever

program will create the web page. That program creates the page dynamically and returns it to the web server, which then passes it along to the web browser.

Static and Dynamic Web Pages

So what is the difference??

Design PatternWebsite Patterns:• KnowYourAudience• KeepItFresh• SelfSortingAudience• EasyOrientation• VisibleContext• TreeStructure• MultipleCrossSections• ConsistentLook• UseTheClientsCache• GetAsReadPostAsWrite• BreadCrumbs• AccessibleWebPageDesign

Desing Pattern – Know Your Audience

• ProblemHow do you tailor the content of a site to make the most impact on the user? How do you make your site as informative, persuasive, or useful as possible?

• ContextAll Web sites are communication tools. Communication directed at the wrong audience will probably fall flat -- what will persuade a teenager will seem frivolous to a 50-year-old parent of three, and vice versa. The graphical look, the writing tone and vocabulary, and even the navigation will be influenced by the intended audience.

• SolutionIn some cases, the intended audience is part of the site's purpose. If you're creating a site about the latest theories in ObjectOriented development, chances are the audience will be OO programmers, project managers, and theorists. If the site's audience isn't obvious from its purpose, see if the company has market research that identifies its customer base, or if there's a specific audience they want targeted.

• Resultant ContextOnce the audience is identified, the graphic artists know who to design for, the writers know who to write for, and the site's architecture can be appropriately designed.

• Known UsesMost sites that cover a subject have an audience in mind. The IEEE site, http://www.ieee.org, is for members and prospective members of the IEEE.

Design Pattern – Keep It Fresh• Problems

Websites lose value with time. The perceived value of information is decreased if it is surrounded by items like "Coming in Fall, 1996!" in 2002, even if the essential information is still valid.

• Context

The site is either serving as a marketing or educational tool, and the users' perception of the value of the information is critical to judging the site's success or failure. With a marketing site, generating return visits is critical to keep the brand's identity in the user's mind.

• Solution

Maintain and update the site. Maintenance means avoiding LinkRot and keeping the server running. Updating the site means adding new content and correcting problems with old content.

New content should be highlighted, either by having a "clearing house" page like RecentChanges, or by putting the new material at the head and moving old material "off the end" of the page.

If the site isn't generated by the users (like Wiki), new material should be published on a schedule. Most sites can probably get by with daily or even weekly updates, but the important point is to do it regularly in order to reassure users that the site is still relevant.

• Resultant Context

Users are reassured that the information in the site is up to date and has value. Marketing sites have more hits, which may be the primary measure of the site's success.

• Known Uses

WikiWikiWeb and the RecentChanges page, http://freshmeat.net, http://www.yahoo.com, any news site.

Design Pattern – Self Sorting Audience• Problem

How do you direct the readers of the site to the information provided for them when you have multiple audiences using the site?

• ContextSometimes it's impossible to identify a single audience for a site. Occasionally it's critical that a site attract and communicate to multiple audiences.

• SolutionProvide a top-level page that contains links to MultipleCrossSections of the site, one for each intended audience.

• Resultant ContextMembers of each audience can select the section they are interested in.

VisibleContext can be tailored to the audience.The home page has a tendency to collect large images, and in this case there isn't much real content to provide worth. The user may get frustrated with the download time and the low content and assume the rest of the site is similar.

• Related PatternsThe hub-page provides EasyOrientation for your SelfSortingAudience

• Known UsesMicrosoft (http://www.microsoft.com) home page contains links to subsections of the site for developers, managers, shareholders and so on.The Javasoft (http://www.javasoft.com) home page does the same kind of thing.The hospitals mentioned in WebsitePatterns both needed to cater to four audiences:

– Medical professionals– Patients (kids)– Patients' families (parents)– Internal users (admin and medical)

On the site, for a children's hospital, we had identified the first three and split the content along those lines, with some cross-over. The fourth group wasn't an official audience, but in the end was the most politically important audience.Each of the audiences not only had different uses for the site, but also different requirements for tone and detail.Our solution was to use the first ("home") page to let the users chose which audience they belonged to. Each of the three links ("Parents", "Kids", and "Professionals") led to a more traditional home page with focused content, look, and tone (a "hub page").The other site added a link to "Departments", a link we held off until the hub pages. The "pre-sort" home page lets the designer focus the subsites on the appropriate audiences.

Design Pattern – EasyOrientation• ProblemIt is easy to get lost in the tangle of links that make up a website.• ContextA web site with many cross-links between pages.• ForcesPeople don't use the web like TV or a magazine. They use the web to find information they

need and stop browsing once they have found what they set out to look for [1].Users of a web-site do not maintain a mental map of that site while browsing.Users might select a wrong link while looking for the information they need and not be able to

find a their way back to the page that contains the link relevant to them.• SolutionInclude a link on each page that takes the user to a page that acts as a "vantage point" at

which they can reorient themselves.• Resulting ContextIf users feel lost in the site, they can easily reorient themselves.If you need multiple pages that act as vantage points, you can organise them as a 

TreeStructure.You can include VisibleContext to help users keep track of where they are in the site.• Known UsesMany, many sites include links to the home page or to a site map on each page.Each page on the WikiWikiWeb has links for EasyOrientation. The title of each page links to a

list of other pages that refer to the page. The footer of each page has a link to FindPage.

Design Pattern - VisibleContext• ProblemHow do you help the reader know where they are in a Web site?• ContextA Web site with many cross-links.• SolutionInclude a small "map" or navigation bar on each page that links to pages near the current page. This might

include pages that lead to the current page, pages related to the current page, and pages that give more detail about topics on the current page. Clearly separate the VisibleContext from the actual content of the page.

• Resultant ContextThe VisibleContext gives a feeling of the overall structure of the site without detracting from the detailed

information on each page.If your site has a TreeStructure, the VisibleContext might include the path from the root to the current page and

the siblings of the current page.• Known UsesMany sites include navigation bars at the top and/or bottom of Web pages.• -- NatPryceAnother known use of this pattern is reflected in the way that NetObjectsFusion works. When you design a site in

its site layout tool, and then choose "create toolbar" in any page it will create a toolbar that links to the parent and siblings of that page. Most pages built with this tool reflect this idiom (for instance, the Web page I built a while back at http://members.aol.com/thecallfan). -- KyleBrown

Bruce Tognazzini has published an article about designing VisibleContext at http://www.asktog.com/columns/014WebsiteNavBars.html and discusses the lack of navigation support in browsers and Web site development tools at http://www.asktog.com/columns/015WebDesignRant.html .

Adobe show how you can use color to make VisibleContext by ensuring a ConsistentLook between related pages and navigation icons. See http://www.adobe.com/studio/tipstechniques/wpdphse7/main.html

Design Pattern - TreeStructure• ProblemIt is easy to get lost in the tangle of links that make up a Web site.• ContextA Web site with cross-links between pages but an obvious hierarchical organization of topics.• SolutionEmphasize the tree-structure of the content of the site: on each page, include VisibleContext to

show where the page fits into the tree. The VisibleContext might include the path from the root to the current page and the siblings of the current page that are at the same level in the tree. It might also be possible to include the children of the current page.

• Resulting ContextThe tree-structure is made obvious to the user.The VisibleContext showing the path to the current page acts as links to "vantage points" to

allow EasyOrientation if lost in the lower levels of the tree.• Known UsesThe structure of many sites owned by organizations match the hierarchical structure of the

organization itself.-- NatPryce• ExamplesAn example site that has literalized the tree metaphor for its organization is Gideon Burton's

The Forest of Rhetoric: http://humanities.byu.edu/rhetoric/silva.htm.Another one is http://www.xmltree.com, which indexes free content syndicated via XML.A nice one is http://www.physicstree.net - it uses flash 8.

Design Pattern – MultipleCrossSections

• ProblemsHow can you organise the content of your site for different classes of user?• ContextMost Web sites will be used for multiple purposes by people with different requirements and backgrounds.

One structure will be suitable for one class of users but unsuitable for another.• SolutionOrganise the content of the site in different ways for different users. Each structure would represent a

cross-section of the information on the site viewed from a particular perspective.Individual pages may be shared between cross-sections.• Resultant ContextUsers can choose an organisation with which they feel familiar.Providing users with VisibleContext is more complex, since they may have arrived at a page through

different cross-sections of the site.• Known UsesThe Byrd Watcher site at http://ebni.com/byrds/index.html is organised as MultipleCrossSections through

the same data: the history of the band is represented as intersecting strands from the perspective of each band member, by date, album, spin-off bands and so forth.

The Java tutorial at http://www.javasoft.com/docs/books/tutorial/index.html contains multiple, intersecting "Trails" that one can follow to learn different aspects of the Java language and API. -- NatPryce

On the hospital site, we had health information that would be organized in one order for parents, another way for physicians. See http://www.chmcc.org/diseases/. You may have to enter the site from the start in order for a cookie to get set. -- RobCrawford

Design Pattern - ConsistentLook

• The idea is to maintain a consistent look (and feel) to lower the learning curve. As enforced by MacOS.

• MacOS's contribution was supporting the Mac Toolbox which provided better and easier to use services than home grown re-invented alternatives. But the important enforcement of consistent look and feel was the Apple Style Guide. That lesson is being forgotten by MS, as they try to invent new ways to display and scroll. Most are a step backwards in usability.--JimRussell

Design Pattern - UseTheClientsCache• ProblemHow do you reduce download times?• ContextA Web site with many pages that contain images that are used as navigation buttons, icons, bullets and so on.When many images are used, download times are increased. Users often abort downloads if they take too long and browse elsewhere.• ForcesMany (most) users have low-bandwidth access to the site.Users do not wait for pages to download unless they are sure that they contain the information they want. Otherwise they cancel the download and

look elsewhere.You want to give the site an attractive look or you have corporate publication guidelines to conform to.Images take longer to download than text.It is much quicker to load images from cache than from the network.• SolutionUse a ConsistentLook throughout the site, with the same images being used for the same button or "ident" logo on each page.Use div elements for your navigation and content. Make sure content appears first in the HTML code, the navigation second and advertisements

the at the end. This way to user can check the content while navigation elements are loaded. Also, having advertisements show up at the end has two positive effects: users don't get to wait for them if they are merely going though that page to some other and 2. if user does stay on the page, they don't block out the ads in their mind as happens with page that loads ads at startup -- MilanBabuskov

• Resultant ContextThe images will be cached by the client's browser when they are first encountered and so the browser will not need to download them for

subsequent pages.If images are changed, the change will not immediately be reflected in browsers that have cached the images.• Known UsesThe WikiWikiWeb uses the same image as an "ident" at the top of each page.Many sites use common navigation buttons, to go up the TreeStructure or back to a previous page for example.-- NatPryceAnother example, possibly a little more extreme, showed up in a Web-based application I wrote. It was part applet, part CGI, with the applets using

graphical elements as controls. One applet -- small and quick-loading -- played a little animation loop while we loaded the user's cache with the images and the main JAR.

Also, if the user disables their cache this just won't work. That's usually not a problem, but be ready for complaints.

Design Pattern – GetAsReadPostAsWrite

• Problem A CGI has to display a form, possibly with some items already filled out. When the user submits the form, errors or

missing fields may require the form to be changed and resubmitted.

• Solution Never embed a form inside a plain HTML page, especially if the site could fill in some details of the form based on state and history. The CGI (used generically to mean CGIs, servlets, ASPs, etc) should react to a GET by handing the form

back to the user and react to a POST by taking action.• Consequences It's now possible to redisplay the form if there's

an error, while keeping the code necessary to produce the form in only one place. Since the form display code is available during

the form processing, an error can be handled by redisplaying the form and informing the user of the problem. No more

"please go back and try again".

Design Pattern - BreadCrumbs• One of the WebsitePatterns which aims to show the user where in a Web site they

currently are. Typically found in the site's header, it tends to look something like this:

• Root > Foo > Bar > Page• Where each element except the last is a hyperlink, allowing easy "upwards"

movement in a site.• Note that a page's breadcrumbs are static. They show users where the page is in a

site, not where the user has been. (The pixelpolitics link below claims the opposite.)• Related topics:VisibleContext

– TreeStructure– ConsistentLook– http://keith.instone.org/breadcrumbs/– http://pixelpolitics.com/navigation.html [BrokenLink, but archived at 

http://web.archive.org/web/20020905232908/http://pixelpolitics.com/navigation.html]

• Examples:http://useit.com/• The solution to the static breadcrumb problem is the use of cookie-based

breadcrumbs. Not ideal, perhaps, but if you advise the visitor why you are using cookies he'll probably let you set them. Make sure breadcrumb cookies are per-session and have a short life span.

Design Pattern - AccessibleWebPageDesign

• This is writing Web pages so as to ensure correct interpretation in as many browsers as possible.

• There is much written about this on the net.• The techniques include:avoid depending on size of browser window, browser's

ability to display graphics and other non-textual data, browser's support for scripting, and so on

• use standard HTML• avoid ambiguous HTML• avoid or supply alternatives to HTML that are not included in earlier standards• use an HTML validator such as http://validator.w3.org• simply refrain from attempting to "control" the user experience

Design Pattern Bad Web Page Design

Bad Web Page Design

Design PatternGood Web Page

DesignGood Web Page

Design

YOUR ROLE!!

So, you decide whether your web page want to be considered GOOD or BAD design.

THANKS FOR LISTENING WITHOUT SLEEPING

Physical beauty can be lost with marks Of age or through accident. Spiritual Beauty cannot be destroyed.