Presentation1

15
PROJECT: The process for developing GUI Web site MEMBER: 1.Le Thi Ngoc Thao 2.Nguyen Nhu Thi 3.Nguyen Thi Nguyet 4.Nguyen Duc Thien SOURCE: http://iguru.vn TRANSLATE: http://translate.google.com

Transcript of Presentation1

Page 1: Presentation1

PROJECT: The process for developing GUI Web site

MEMBER:1.Le Thi Ngoc Thao2.Nguyen Nhu Thi

3.Nguyen Thi Nguyet4.Nguyen Duc Thien

SOURCE:http://iguru.vn

TRANSLATE:http://translate.google.com

Page 2: Presentation1

THE PROCESS FOR DEVELOPING GUI WEBSITE

GUI (Graphic User Interface). Layout design for users is a work in process of developing a Website. The process includes the following steps:

Step 1: Identify customer's requirements. Step 2: Draft ideas on paper. Step 3: Review draft form. Step 4: Design simple graphic.Step 5: Color for Web interface. Step 6: Construction the standard CSS, scripts, photos for Web.Step 7: Use markup language, programming to design interface. Step 8: Test the interface on the browser. Step 9: Transfer to the source code division Web development. 

Page 3: Presentation1

Step 1: Identify customer's requirements

The goal of this stage is to determine the exact requirements or advice to customers. When many customers do not know what they need, should determine when you should be required before building a form questions to get customer's requirements.

Page 4: Presentation1

Step 2: Draft ideas on paper

The objective of this step is the layout of Web pages. To flexibility in ideas, you should use the drawing board, pencil, ruler and detergent.

Page 5: Presentation1
Page 6: Presentation1

Step 3: Review draft form

The objective of this step is the evaluation draft form match with the request, the desired customers. You should have a minimum of 3 draft form, then invite others to view and the same assessment.

Page 7: Presentation1

Step 4: Design simple graphic 

After the draft is completed, you use the computer graphics to design templates Web interface. Because we need to see layout on the computer are not reasonable, therefore we have not color for portions color, line, word for Web sites, all of you to gray to the next step with color more easily. If you're with color at this stage, you will be faced with two risks: layout fail and distribution wrong color .

Page 8: Presentation1
Page 9: Presentation1
Page 10: Presentation1

Step 5: Color for Web interface 

When simple graphic requirements, you switch to color distribution for the Web interface:• Text color• Link color• Background color• Table color…

Page 11: Presentation1
Page 12: Presentation1

Step 6: Construction the standard CSS, scripts, photos for Web

The purpose of this stage helps friendly Web site maintenance, reduced code, the content displayed better with low-rate code, flexibility in defining the type.

CSS (Cascading Style Sheets), a language useful in describing the style of document presentations in web development

Page 13: Presentation1

Step 7: Use markup language, programming designed to interface

The purpose of this stage is designed Web with HTML, CSS (Flash, Java Script, AJAX…)

We transfer interface graphics to the Web site.

+ If you sort layout, structure of the Web page should use HTML. You can use the program Adobe ImageReady CS2 to crop out the Web site.

+ If you want staging site, the type of structure of Web pages, you should use CSS and step 6 is very useful to you.

The work of a Web design this like a programming more than a design staff.

Page 14: Presentation1

Step 8: Check test interface on the browser

The goal of this stage is to control the display Web pages exactly as interface graphic of step 5 on Web browsers different.

The minimum we must control the display as the interfave design on the browser:

• Microsoft Internet Explorer version 5, 6, 7 and next time, 8.• Firefox 1.5 +• Safari• Opera• Netscape

Page 15: Presentation1

Step 9: Transfer to the code division programming

The goal of this stage is to convert Web pages to show good on the browser along with the main elements of Web pages to the programming department.

THE END…