การพฒนาระบบมลตมเดย

1) วงจรการพฒนาระบบ (SDLC)

2) แนวทางปฏบต (Methodologies)

3) หลกการพฒนาระบบ

4) การพฒนาระบบมลตมเดย

Chapter 3 Chapter 3 Multimedia programming

3.1 วงจรการพฒนาระบบ

เปนกระบวนการทางความคด (Logical process) เพอแกปญหา วางแผน และสรางงานใหตอบสนองความตองการของผใชลกษณะของวงจรคอเปนการแบงขนตอนการพฒนาออกเปนระยะ ๆ (phase) ไดแกระยะการวางแผน (planning phase)ระยะการวเคราะห (analysis phase)ระยะการออกแบบ (design phase)ระยะการสรางและพฒนา

(implementation phase)

รปแบบของวงจรการพฒนา

- SDLC แบบ Waterfall

- SDLC แบบ Adapted waterfall

- SDLC แบบ Evolutionary

- SDLC แบบ Incremental

- SDLC แบบ Spiral

SDLC แบบ Waterfall

Planning

Analysis

Design

Implementation

SDLC แบบ Waterfall (ตอ)

Feasibility

System Investigation

System Analysis

System Design

Implementation

Review and Maintenance

SDLC แบบ Adapted Waterfall

Planning

Analysis

Design

Implementation

SDLC แบบ Evolutionary

Analysis

Design

implementation

Product 1

Analysis

Design

implementation

Product 2

Analysis

Design

implementation

Product 3

SDLC แบบ Incremental

Analysis

Design

Implementation

Analysis

Design

Implementation

Analysis

Design

Implementation

PART 1

PART 1

PART2 PART 1

PART2

PART3

SDLC แบบ Spiral

Plan firstiteration

Analysis

Testing

Implement

Design

3.2 แนวทางปฏบต (Methodologies)

หมายถงวธการหรอแนวทางทจะนากระบวนการทางความคดของวงจรการพฒนาระบบมาปฏบตจรงจนกลายเปนระบบทสามารถใชงานได

เครองมอในการพฒนาระบบ (Tools)คอซอฟตแวรทชวยสรางหรอวาดแบบ

จาลองชนดตาง ๆ ตรวจสอบความถกตองของแบบจาลอง ชวยสรางรายงานและแบบฟอรมรวมทงสรางโคดโปรแกรมใหอตโนมต

ตวอยางเครองมอ

Project Management ApplicationDrawing/Graphics ApplicationWord Processor/Text EditorComputer-Aided System Engineering(CASE) ToolsCode Generator ToolDatabase Management Tool

แบบจาลอง คอสญลกษณทใชในการจาลองขอเทจจรง

ตาง ๆ ทเกดขนในระบบ ไมวาจะเปนแบบจาลองระบบหรอแบบจาลองขอมล

ตวอยาง Flow chartData Flow DiagramEntity Relationship DiagramStructure ChartClass DiagramPERT ChartGantt Chart

เทคนค คอวธการทเปนแนวทางเพอชวยใหนก

พฒนาระบบสามารถดาเนนกจกรรมในขนตอนตาง ๆ ของการพฒนาระบบไดอยางมประสทธภาพ

ตวอยาง Strategic Planning TechniquesProject Management TechniquesUser Interviewing TechniquesRelational Database Design Techniques

Methodology นนมหลากหลายวธ วธทนยมใชไดแก

1) Structured System Analysis and Design Methodology (SSADM)

2) Rapid Application Development-basedMethodology (RAD)

3) Object-Oriented Analysis and DesignMethodology

Structured System Analysis and DesignMethodology (SSADM)

เปนการปฏบตแบบลาดบขนตอนจากขนตอนหนงไปสขนตอนตอไป และมการใชแบบจาลองทเปนแผนภาพ เพออธบายขนตอนการทางานและขอมลทงหมดของระบบงานทจะพฒนามตนแบบมาจาก waterfall และสามารถ

ประยกตใชกบ Adaptive waterfall ไดการใชแผนภาพเพอจาลองขนตอนการทางานเรยกวา Process-center approach และเรยกการใชแผนภาพเพอจาลองขอมลวา Data-center approach

ขอดของ SSADM

- สามารถรวบรวมความตองการจากผใชได- การเปลยนแปลงความตองการมนอย- ขอมลทวเคราะหและออกแบบจะตรงกบความตองการของผใชและเจาของระบบมากทสด

ขอเสยของ SSADM

- ใชเวลานานมากในการวเคราะหและออกแบบระบบ

Rapid Application Development-basedMethodology (RAD)

ถกพฒนาขนเพอแกไขจดออนของ SSADMโดยมการปรบระยะในวงจรการพฒนาระบบ ใหมขนตอนทรวบรดมากขน และมการนาเทคนคและเครองมอชนดตาง ๆ เขามาสนบสนน เชนCASE Tools และโปรแกรมภาษาทชวยสรางโคดโปรแกรม ชวยออกแบบหนาจอ เปนตน

RAD ยงมการพฒนาออกเปนรปแบบยอย ๆ ไดหลายแบบ เชน

- Phase development-based methodology

- Prototyping-based methodology

- Throw-away prototyping-based methodology

Phase development-based methodologyPlanning

AnalysisAnalysis

Design

Implementation

systemversion 1

Analysis

Design

Implementation

systemversion 2

ขอดของ Phased development-based

- ผใชสามารถใชงานระบบในสวนทตองการและจาเปนไดเรวกวา SSADM

ขอเสยของ Phased development-based

- ระบบทนามาใชอาจจะยงทางานไดไมครอบคลมระบบทงหมด

Prototyping-based methodology

Planning

Analysis

Design

Implementation

Systemprototype

Implementation

System

ขอดของ Prototype-based

- ใชเวลานอยในการพฒนา เพราะเปนการสรางตนแบบของงานกอน

- เหมาะกบระบบงานทมขนาดเลก

ขอเสยของ Prototype-based

- ขาดความรอบคอบในการพจารณาถงปญหาทจะเกดตามมาเมอใชงานระบบทงหมด เพราะยากตอการเรยนร

Throw-away prototyping-based methodology

Planning

Analysis

Design

Implementation

Designprototype

Implementation

System

AnalysisDesign

ขอดของ Throw-away Prototyping-based

- ชวยใหนกพฒนามนใจวาระบบทออกแบบตรงกบความตองการของผใช

- ลดความเสยงในการเกดความผดพลาด- มความนาเชอถอ

ขอเสยของ Throw-away Prototyping-based

- ใชระยะเวลาในการสรางระบบจรงนานกวาแบบ เพราะไมไดใชตนแบบมาทาระบบงาน

Object-Oriented Analysis and DesignMethodology

เปนการมองปญหาในรปของวตถทประกอบดวยขนตอนการทางานรวมกบขอมล ซงปจจบนใชมาตรฐานของแผนภาพสาหรบการวเคราะหและออกแบบคอ UML (UnifiedModeling Language)

3.3 หลกการพฒนาระบบ

1) คานงถงเจาของระบบและผใช2) พยายามเขาถงปญหาใหตรงจด3) กาหนดขนตอนการทางานหรอกจกรรม4) จดทาเอกสารประกอบทกขนตอน5) พจารณาความคมคาของการลงทน6) แตกระบบใหญใหเปนระบบยอย7) ออกแบบระบบเพอรองรบการเตบโต

และการเปลยนแปลงในอนาคต

ขนตอนตาง ๆ ของการพฒนาโครงงาน

1. Analysis and Planning

2. Designing and Producing

3. Content and Talent

4. Delivering

3.4 การพฒนาระบบมลตมเดย

Analysis and Planningการพฒนางานเปนการแบงขนตอนของ

การผลตงานมลตมเดย ออกเปนสวน ๆ โดยมเปาหมายเพอกาหนดตารางการดาเนนงานใหชดเจน

โดยกาหนดในรปของ project management ซงม tool สาหรบชวยสรางคอ Microsoft Project, Excel หรอ MacProject

แผนทสรางไดอาจอยในรปของ Gantt Chart ทจะใชในการชวยกาหนด เวลาสาหรบการทางานเกยวกบขาวสารตาง ๆ

สงจาเปนตาง ๆ ทตองใชกบงานมลตมเดยจะถกกาหนดในสวนน ซงไดแก

แหลงขอมล (resources) ฮารดแวรและซอฟตแวร แหลงทจะนาไปใชหรอกลมเปาหมาย(delivery platform and environment) กลมผสรางงาน (A Team) การคานวณเวลาทใชสาหรบแสดงงาน (Time Calculation)การประมาณคาใชจาย (Costing)

Building team

ในการสรางทมงานเพอสรางงานมลตมเดยจะเปนการนาบคคลหรอทมงานทมความสามารถและความถนดทแตกตางกน มารวมมอกนสรางงานอนประกอบดวยสอหลาย ๆ ชนดดงนน จาเปนทจะตองกาหนดความสามารถ

ของทมใหสอดคลองกบขนตอนยอย ๆ ของงานทกาหนดไวในแผนซงเครองมอทชวยในการกาหนดนน ไดแก การใชเมตรก หรอตารางบงชความชานาญของทม

Training(product)

Training(business)

Support materials

Performance Tools

Prototype

Advertising

Visual database

GU

Is

Document Designer

Project Manager

Graphic Artist

Illustrator

Authorware Specialist

Programmer

Sound Designer

= Area of expertise

ตวอยาง ตารางบงชความชานาญของทมในโครงงาน

การคานวณเวลา โดยใช calculation sheet

Photo CD ProjectAllocation of Disc Space

Note 1: The calculations are based upon the filesizes yielded by voice rendering of the Project’s English script.

Note 2: File sizes for base resolution images of 640x480 and 768x512 pixel dimensions are estimated at 768K each

การคานวณเวลา โดยใช calculation sheet (ตอ)

Note 3 : File sizes for full imagePacs may range from 3.7 MB to 4.5 MB depending upon image complexity and compression rates. The conservative figure of 4.5MB per imagePacis used in these estimates.

Summary : There is adequate room on the disc for both sound and images if each language recording is limited to no more than 9 mins.

File Duration File DurationSNDE01A 18.369 SNDE12A 14.314SNDE02A 9.180 SNDE13A 14.193SNDE03A 9.295 SNDE14A 7.487SNDE04A 17.609 SNDE15A 16.172SNDE05A 17.932 SNDE16A 19.450SNDE06A 11.156 SNDE17A 5.830SNDE07A 18.035 SNDE18A 21.443SNDE08A 8.050 SNDE19A 12.295SNDE09A 12.790 Total 284.924 SecondsSNDE10A 27.468 4.749 MinutesSNDE11A 23.856 Plus Intro Fanfare 30 Seconds

Task Planningเนองจากงานมลตมเดยจะประกอบดวย

งานยอยหลาย ๆ สวน ดงนนในการวางแผนงานยอยสามารถสรางออกมาในรปแบบของ ผง checklist ดงน

Design Instructional Framework Create Animators

Determine Delivery Platform Produce Audio

Draw Navigation Map Produce Video

Create Storyboards Program

Design Interface Test Functionality

Design Information Containers Fix Bugs

Use Test Create Graphics

การประมาณคาใชจาย (Costing)มกจะเขยนในรปของ Cost sheets ดงน

PROJECT DEVELOPMENT COSTS

Salaries Data Storage

Client Meetings Talent Fees

Acquisition of Content Video production

Travel Hardware/Software

Research Equipment Rental

PRODUCTION COSTS Studio Fees

Audio Production Talent Fees

Hardware/Software Location Fees

Studio Fees Digital Capture & Editing

Graphics Production TESTING COSTS

Salaries Salaries

Hardware/Software Focus Groups

Fees for Content Use Editing

Animation Beta Program

Content Gathering DISTRIBUTION COSTS

Salaries Documentation

Research Services Manufacturing

Licenses Advertising

Shipping

Designing and ProducingA number of features which are

desirable in a good design notation :

1. Ease of capture of design insights2. Ease and accuracy of communication3. Representational power4. Scalable precision of representation5. Preferably supporting both formal

and informal representations

Storyboards

เปนเครองมอทใชสาหรบการออกแบบ โดยเปนการวาดหรอรางรปแบบการนาเสนอ ในแตละสวนของงานมลตมเดย ซงการรางโครงรางนไมจาเปนตองลงรายละเอยดของงานแตตองระบตาแหนงของสวนประกอบตาง ๆทจะทาใหมองเหนภาพรวมของงานทจะเกดขน

ตวอยาง การเขยน Storyboards

P P P P P P

VIDEO

CONTROLS

GOOD EVER POOR

STANDARD CONTROLS

AA

SS

FF

ในการเขยน Storyboards จะเขยนเปน card ซงแตละใบจะแทนการวางรปแบบของจอภาพแตละสวน

Card 1

Title (use a gradient, clean type)

Menu, 5 buttons

Navigation bar quit, about

Card 2

Visual effects

Sample image for visual effects

Timing and speed controls

Card 3

Section title

Menu

Card 4

Sample image

Animation icon

Individual icons

การตกแตงงานมลตมเดย ควรจะพจารณาสงตอไปน

• Characteristics of human perception

• Principles of composition

• Resources for composition

Expectancy and pattern recognition operate together to produce highly selective perception.

The role of designer is to create interfaces that support effective perception by tuning in with these natural constructive processes. Screens with clear patterns that are consistentlyused enable us to perceive effectively quite complex information.

Principles of compositionการออกแบบงานบนเวบนนประกอบดวย

ขอความ รปภาพ เสยง และภาพเคลอนไหว ซงการทจะมผชานาญในทกสวนประกอบนนเปนไปไดยาก จงกลาวไดวา

Multimedia realization on Web is naturally a team process.

Each context involves the projection of the three functional domains : information, interaction and compositional framework.

Composition ประกอบดวย

unity, emphasize, harmony, balance and visual flow

Unity refers to the wholeness of the experience; all the elements forming theexperience should belong together.

The perception of unity derives from the conceptual design of the system.

Emphasize refers eminent point or impressive point for screen.

Harmony refers to how all the parts of the system fit together. Harmony is closely tied in with building and maintaining expectancies.

Balance is concerned with the visual“weight” given to each component and the distribution of these objects on thescreen.

Emphasize can make by

- Focus point

- Contrast

- Isolate

Focus point

Visual balance and imbalance

Variation in achieving visual balance

Resources of composition

Multimedia composition is not an abstract art. Composition principles aremapped using a set of tools onto thematerials available. There are a number of resources that may contribute to thedynamic process of multimedia composition.

These resources include :

• conceptual design structures• composition principles• specific guidelines • good examples• tools and associated libraries• experimentation and visualization

Graphic ApproachesThings that work : here are some graphical

approaches that get good resultsNeatly executed contrasts : big/small,heavy/light, bright/dark, thin/thick.Simple and clean screens with lots of white spaceEye-grabbers such as Initial Caps or a single brightly colored object alone on a gray-scale screenShadows and drop shadows in various shadesGradientsReversed graphics to emphasize important text or imagesShaded objects and text in 2-D and 3-D

Things to avoid : here are some mistakes to avoid in creating computer graphics

Clashes of colorBusy screensTrite humor in oft-repeated animationsClanging bells or squeaks when a button is clickedFrilly pattern bordersRequiring more than two button clicks to quitToo many numbersToo many substantive elements presented too quickly

Content and Talent

เนอหา ทจะนามาใชอาจมาจากproduced by members of the projectteamacquired from sources internally available to the teamacquired from the public domainacquired through clearance of copyright material

Acquiring ContentContent acquisition is one of the

most expensive and time-consuming tasks in organizing a multimedia project.

Using content created by others- preexisting content- copyrights- obtaining rights

Using content created for a projectเมอสรางงานแตละสวนแลวควรคานงถงลขสทธ

ของการนาไปใช รวมทงการเขยนขอตกลงรวมกนระหวางทมงาน เพอปองกนปญหาทอาจจะเกดขนหลงการเผยแพร

Using Talent- Locating the professionals your need- Working with union contracts- Acquiring releases

write release form grants to certain permissions and specifies the terms under which you can use the material.

DeliveringTest it, then test it again. Testing

is one of the major difficulties in the multimedia project. Its performancedepends on specific hardware and system configurations.

Thus, you have to control the end user’s platform, or must fully test yourproject on as many platforms as possible that is designed to be shown.

TestingAlpha testing

are typically for internal circulation only and are passed among a selected group of users. In the testing arena, learn to skillfully utilize friend and enemy alike.

Beta testingare sent to a wider but still select

audience with the same caveat. This group should be representative of real users, and should not include persons who have been involved in the project’s production. Its feedback is critical.

Polishing to gold debug process toward a final release.

Evaluationis interleaved throughout the

development process and will vary depending on the phase of the project life cycle.

Two types for evaluation :-formative and summative

Formative evaluationis carried out during the development

of the system. The information obtained is fed back to influence on-goingdevelopment.

Summative evaluationis conducted at the completion of

the system. It points whether the system has succeeded in its overall aim.

Both of two phases evaluate the effectiveness and usability of the system.

The effectiveness of the system depends on whether it achieves its learning objective.

Usability refers to the ease of learning and ease of use.

Evaluation methods yield two broad types of information – qualitative and quantitative.

Qualitative evaluation provides rich information that is especially useful for shaping design.

Quantitative information gives hardfigures based on systematic sampling. This provides a more objective measure, but may lack the richness of insight provided by qualitative information.

In many cases, a judicious mixture of the two types of information will provide the best overall insight.

However, there is no absolute criterionfor what counts as good evaluation.

Strategic views of evaluationObservation

In formative evaluation the user is observed working with prototypes of the system. The designer can checkwhether the user performs on the system as expected.

Observation methods- an informal way- a structured way

The main advantages of usingobservation for evaluation are :

- provides direct evidence of system effectiveness and usability

- is easy to use informally

- can be applied as a structured technique with sophisticated recording of behaviour

The disadvantages include :- the information provided relates to

surface behaviour- more sophisticated recording lead

to high transcription and analysis overheads

The most effective information is often obtained when observation is used in tandem with interviews.

Interviewsare a useful way to gain a rich

understanding of users’ reactions to a system. This information is particularlyimportant during formative evaluation.

In order to get the maximum benefit we should be clearly planned and may need to be linked to other forms of datacollection.

The strengths of interviews :

able to produce rich information onstudent reactions

easy to administer

very useful for formative evaluation

effective in conjunction with othermethods

The weaknesses of interviews :

the sample may be unrepresentative

the recording of interview data may be contaminated by subjective factors

the collation of results from several individuals to give a clear overall picture may be difficult

Questionnairesare useful in providing overview

information in a quantitative form. This technique is valuable for summative information.

Questions should be precise and unambiguous. Leading questions which point towards a certain answer must be avoided. An appropriate mix of question types should be included to suit the purpose of the questionnaire.

There are two broad types of questions – open and closed. Open questions ask respondents to express replies in their own words. (richer answers to more open questions)

A variety of forms of questions :- multiple choice- binary choice

We should set rating scales for choice or ranking questions in order to measure the results.

How often did you use the Help System in the package?

a) never

b) 1-3 times per week

c) 4-6 times per week

d) 7-9 times per week

e) 10 or more times per week

Question used to elicit information

How interesting is the system to use?

Very interesting Very boring

How well do you think you have understood the topics

covered in the system?

Very well Very poorly

Questions with a five point rating scale

The main advantages :are easy and economical to administer

support both open ended and closed questions

provide quantitative data

are comparatively easy to analyze

are valuable for summative evaluation

The limitations :

may provide surface level information only

do not normally reveal the reasons for the responses

the reporting of summary results may obscure variations within the

data

A number of factors influence the selection of evaluation methods :

1. The purpose of the project2. The stage in the project when

the evaluation occurs3. Cost-benefit considerations4. Appropriate mix of methods

Preparing for deliveryHow the end users can easily and

automatically set up your multimedia project on their computer.

“to provide good writtendocumentation”

README.TXT or ReadMeFirst is good thing to include on the distribution disk of project.

Compressing and joining FilesIf any project’s files is too large to

write an installation routine. We need to compress or pack that file sot that it will fit on the floppy.

File ArchivesShareware and commercial utility

programs for compressing anddecompressing files have been in wide use. We may download online file automatically by handle from installing project.

Delivery ScenariosA range of delivery scenarios

- a commercial published system- a specific organization- other scenarios, e.g. educational

systems developed through grant aid

Packing for delivery- Installation information and

utilities- End user guides

The delivery environment- the physical delivery environment- the organizational environment

- management support- local tutors and trainers- the end users

งานมลตมเดยตองอาศยเทคโนโลยฮารดแวรหลายอยางมาประยกตใชงานรวมกน เพอสรางสอทมความสมบรณแบบในการนาเสนอ โดยมองคประกอบตาง ๆ ไดแก

- เครองคอมพวเตอร- อปกรณแสดงภาพ- อปกรณเสยง- อปกรณสแกนภาพและขอความ- อปกรณจดเกบขอมล

3.5 ฮารดแวรสาหรบมลตมเดย

มองคประกอบพนฐาน 3 สวนคอหนวยประมวลผลกลาง หนวยความจาและ หนวยนาเขา/แสดงผล

หนวยความจา แบงออกเปน 2 ประเภทคอ- ROM (Read Only Memory)ไมสามารถเขยนขอมลลงไปได แตมขอด

คอ สามารถคงคางสถานะขอมลไวไดแมวาจะไมมไฟฟาไปเลยงระบบกตาม

เครองคอมพวเตอร

- RAM (Random Access Memory)เปนหนวยความจาชวคราว ขอมลจะถก

อานจากแหลงเกบขอมล เขามาท RAM แลวสงตอให CPU ทาการประมวลผล หรอเปนขอมลททาการประมวลผลแลว แตตองการนาขอมลไปประมวลผลอกครง

คณสมบตของ RAM คอตองมการทางานทรวดเรวเพอใหสอดคลองกบการทางานของ CPU ปจจบน RAM มอยหลายชนด เชน EDO RAM, SDRAM, DDR SDRAM เปนตน

RAM แบงเปนประเภทใหญ ๆ 2 ประเภท- DRAM : Dynamic RAMRAM จาเปนตองมไฟเลยงตลอดเวลา

และสาหรบ DRAM ตองมการ refresh ขอมลเปนระยะ ๆ เพอใหขอมลทเกบอยนนคงอย

- SRAM : Static RAMไมตองมการ refresh ขอมลและยงม

ความเรวในการเขาถงขอมลทสงกวา

หนวยนาเขาและแสดงผลI/O portถกใชงานดานมลตมเดยอยางมาก เพราะ

ตองนาขอมลเขาจากกลองดจตอลหรอวดโอ โดยการสงผานขอมลนนทาได 2 แบบ

การสงผานขอมลแบบขนาน (Parallel)

มความเรวในการสงขอมลสงแตกมความผดพลาดในการสงขอมลสงเชนกน พอรตแบบขนานเชน พอรตทใชเชอมตอระหวางคอมพวเตอรกบเครองพมพ เปนตน

การสงผานขอมลแบบอนกรม (Serial)

ในทนหมายถง RS-232 (Recommended Standard 232) ซงเปนมาตรฐานในการสงขอมลทถกกาหนดโดยองคกร Electronics Industries Association และตอมามการพฒนาเปน USB Port ทสามารถตอพวงได 127 อปกรณและม Bandwidth ท 1.5 Mbytes

- การดแสดงผลทาหนาทแปลงสญญาณดจตอลจากเครองคอมพวเตอรใหเปนสญญาณอนาลอก แลวทาการสงไปยงจอภาพเพอแสดงผล

- จอภาพจอภาพโมโนโครม (Monochrome

Display Adapter : MDA) ความละเอยด 720x350 pixels แสดงผลสเดยว

อปกรณแสดงภาพ

จอภาพซจเอ (Color Graphics Adapter : CGA) มการนาเอา RAM มาใชในการเกบขอมลสเรยกวา Video RAM

จอภาพอซด (Enhanced Color Display : ECD) มความละเอยดสงขนและมการเกบขอมลสไดมากขน

จอภาพวจเอ (Video Graphics Adapter : VGA) มความสามารถในการแสดงภาพไดชดเจนและสมจรงมากขน รวมทงไดภาพทมคณภาพดกวาเดม

จอภาพวจเอ แบงเปน 2 ประเภทคอจอภาพแบบ CRT (Cathode Ray Tube) มลกษณะเชนเดยวกบจอโทรทศน ซง ประกอบดวย หลอดจอภาพเปนแกวขนาดใหญ เรยกวา Cathode Ray Tube หรอหลอดรงสคาโธด สวนหนาสดของจอเรยกวา สกรน (Screen) สกรนประกอบดวยจดเลก ๆ เรยง

ตอเนองกนเปนแถวตามแนวนอนจนเตม โดยจดเหลานเรยกวา Pixel (Picture Element)

จอภาพแบบ LCD (Liquid Crystal Display) มลกษณะเดนคอมความบางและเบามากกวาจอแบบ CRT เชน จอภาพของเครองคดเลข PDA เปนตน โดยจอภาพประเภทนจะใช liquid crystal ซงเปนโมเลกลชนดพเศษเมอถกกระแสไฟฟาไหลผาน โมเลกลกจะหมนเปนองศาทแตกตางกน โดยขนอยกบขนาดของ voltage ของกระแสไฟทไหลผาน ทาใหคลนแสงบางสวนถกกกไว และบางสวนสามารถผานออกไปได จงเกดเปนรปภาพทแสดงบนหนาจอ

- เครองพมพเครองพมพแบบวงลอเครองพมพแบบหวเขมเครองพมพแบบพนละอองหมกเครองพมพแบบเลเซอรพลอตเตอร

- พลอตเตอรแบบดรม เปนพลอตเตอรแบบทรงกระบอก ทมการเคลอนททงปากกาและแทนรองกระดาษ

- พลอตเตอรแบบระนาบ จะเคลอนทเฉพาะปากกาเทานน

- พลอตเตอรแบบอเลกโทรสแตตก เปนพลอตเตอรทใชในการสรางภาพคราว ๆ เพอตรวจสอบ

- การดเสยง• Sound on board• Individual card

- ลาโพงตองมคณสมบตปองกนสนามแมเหลก เพอ

กนสนามแมเหลกจากลาโพงไมใหไปรบกวนการทางานของจอภาพ ซงอาจทาใหการแสดงผลทางจอภาพผดพลาดและอาจทาใหจอภาพเสยหายได

- หฟง- ไมโครโฟน

อปกรณเสยง

- สแกนเนอร• สแกนเนอรมอถอ (Hand-held scanner)• สแกนเนอรแบบดงกระดาษ (Sheet-fed scanner)• สแกนเนอรแบบราบ (Flatbed scanner)

- กลองดจตอลนาเขาขอมลทเปนภาพนง และภาพวดโอ

แลวทาการบนทกในรปแบบของสญญาณดจตอลลงหนวยจดเกบขอมลแทนการบนทกลงฟลม

อปกรณนาภาพเขา

- อปกรณทใชเทคโนโลยสนามแมเหลก

• ฮารดดสก แบงออกเปน 3 ประเภท- ไอดอ (IDE) ฮารดดสกรนเกามความเรวในการ

เขาถงขอมลชา ความจนอย- อ-ไอดอ (E-IDE) หรอ Ultra DMA-33 หรอ

Ultra DMA-66 มความเรวในการเขาถงขอมลมากขนและมความจมากขน สามารถเชอมตอฮารดดสกไดถง 4 ตวในเครองเดยวกน

- สกดซ (SCSI) มความเรวสง ทนทาน สามารถเชอมตอฮารดดสกไดถง 7 ตว

อปกรณจดเกบขอมล

• เทปแมเหลก

นยมใชกบเครองขนาดกลางถงขนาดใหญ มลกษณะเปนสายเทปแบบมวนหรอแบบตลบ ขอจากดของเทปแมเหลก

- ตองเรมอานขอมลตงแตตนมวน- ตองระวงในการจบถอ รอยนวมอ สงสกปรก- สถานทเกบตองเหมาะสม ตองระวงเรองฝน อณหภม และสนามแมเหลก

- ตองระวงการลบขอมลผดพลาด- การเขยนโปรแกรมควบคมเทปยงยาก

- อปกรณทใชเทคโนโลยแสงไดแก ซดรอม (CD-ROM : Compact Disk

Read Only Memory) ใชหลกของแสงในการอานและบนทกขอมล เหมาะสาหรบขอมลทไมตองการเปลยนแปลง การอานขอมลจะตองมตวอานขอมลเชนเดยวกบ

แผนดสกเกต

- อปกรณทใชเทคโนโลยอเลกทรอนกสไดแก RAM และ ROM และอปกรณตาง ๆ ทอยใน

รปของ chip เชน PROM EPROM EEPROM และ Flash Memory

อปกรณจดเกบขอมล (ตอ)

- อปกรณจดเกบขอมลสาหรบระบบเครอขาย

RAID : Redundant Array of Independent Disks เปนอปกรณทมลกษณะการเกบขอมลเหมอนกบฮารดดสกแตมขนาดใหญกวา

MO : Magneto-Optical Storage เปนอปกรณจดเกบขอมลทมลกษณะการทางานคลายกบตเพลงขนาดใหญ จะมแผนสารหบจดเกบขอมลเรยกวา MO Discs ซงสามารถบรรจใน MO Storage ไดตงแต 20 ถง 500 แผน

อปกรณจดเกบขอมล (ตอ)

DVD Tower และ CD-ROM Tower ประกอบดวยถาดสาหรบใสแผนดสกคลายกบเครองเลน CD-ROM มความสามารถในการสลบการทางานของแผนดสกแตละแผนไดโดยอตโนมต และยงมความสามารถในการอานและเขยนขอมลลงบนแผนดสกได

อปกรณจดเกบขอมล (ตอ)

สวนประกอบพนฐานทสาคญของเทคโนโลยเครอขาย

1) ชนดของเครอขายคอมพวเตอร2) เทคโนโลยคอมพวเตอรทใชในการเชอมตอ

ชนดของเครอขายคอมพวเตอร แบงเปน 3 ลกษณะ ไดแก

- เครอขายงานบรเวณกวาง (WAN: Wide Area Network)สวนใหญเปนเครอขายสาธารณะทใชในการ

สอสารผานดาวเทยม เชน ISDN, ATM เปนตน

3.6 เทคโนโลยเครอขาย

- เครอขายระดบภมภาค (MAN: Metropolitan Area Network)จะมระยะทางประมาณ 50 กม. มความเรซใน

การสงขอมลประมาณ 20 Mbps เชน การเผยแพรขอมลภาพดวยระบบเคเบลทว การสงขอมลดวยคลนวทย

- เครอขายระดบทองถน(LAN : Local Area Network)เปนระบบเครอขายทเชอมโยงคอมพวเตอร

ขนาดจากบความเรวในการสงขอมล 10-100Mbps การดแลรกษางายและมขอผดพลาดนอย

เครอขายระดบทองถน แบงตามลกษณะทางกายภาพได 2 ชนด

1) อเทอรเนต (Ethernet) ไดรบการพฒนาตงแตป 2518 โดยบรษท XEROX และบรษท Digital Equipment Corporation การเชอมโยงคอมพวเตอรเปนแบบลกษณะเสนตรง

2) โทเคนรง (Token Ring)ไดรบการพฒนาในป 2528 โดยบรษท IBM และบรษท Texas Instruments ซงการถายทอดสญญาณมความแมนยาและมความนาเชอถอสงกวาอเทอรเนต การเชอมโยงเปนแบบวงแหวน

เครอขายระดบทองถน แบงตามลกษณะทางทางานได 2 ชนด

1) Peer-to-peerเปนระบบทเครองแตละเครองจะแบงทรพยากรตาง ๆ เพอใชกนภายในเนตเวรคได เชน ไฟลเครองพมพ แตมกทากนในระบบทมขนาดเลก

2) Client-serverเปนระบบทเครองหนงตอเขากบคอมพวเตอรอกเครองหนงเปนอยางนอย และใชระบบปฏบตการทเปนเนตเวรคโดยเฉพาะ

อนเทอรเนต คอระบบเครอขายของเครอขาย เปนการนา

เครอขายทองถนหลาย ๆ เครอขายมาเชอมตอเขาดวยกน จนกลายเปนระบบเครอขายขนาดใหญหรอเรยกไดวาเปนเครอขายสากล โดยใชโปรโตคอล TCP/IP เปนสอกลางสาหรบเชอมโยงและแลกเปลยนขอมลขาวสารระหวางกนเหมอนเสนใยแมงมม

3.7 User3.7 User--Interface DesignInterface Design

1) Tip and Techniques2) User Interface design principles

Tip and TechniquesThe following tips should prove valuable

- Consistency

The most important thing we can possibly do is ensure our user interface works consistently. Consistency in user interface enables our users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.

- Set standards and stick to them

The only way we can ensure consistency within our application is to set user interface design standards, and then stick to them.

- Be prepared to hold the line

When we are developing the user interface for our system, we will discover that our stakeholders often have some unusual ideas as to how the user interface should be developed. We should definitely listen to these ideas but we also need to make our stakeholders aware of our corporate UI standards and the need to conform to them.

- Explain the rules

Our users need to know how to work with the application we built for them. When an application works consistently, it means we only have to explain the rules once.

This is a lot easier than explaining in detail exactly how to use each feature in an application step by step.

- Navigation between major user interface items is important

If it is difficult to get from one screen to another, then our users will quickly become frustrated and give up. When the flow between screens matches the flow of the work the user is trying to accomplish, then our application will make sense to users.

- Navigation within a screen is important

In western societies, people read left to right and top to bottom thus we should design screens follow this. We want to organize navigation between widgets on our screen in a manner users will find familiar to them.

- Word our messages and labels effectively

The text we display on our screens is a primary source of information for our users. If our text is worded poorly, then our interface will be perceived poorly by users. Using full words and sentences makes easier to understand.

Messages should be worded positively, imply that the user is in control, and provide insight into how to use the application properly.

- Understand the UI widgets

We should use the right widget for the right task, helping to increase the consistency in our application and probably making it easier to build the application in the first place. The only way for learning how to use widgets properly is to read and understand the user interface standards and guidelines our organization has adopted.

- Look at other applications with a grain of salt

Unless we know another application has been verified to follow the user interface-standards and guidelines of organization, don’t assume the application is doing things right. Although looking at the work of others to get ideas is always a good idea, until we know how to distinguish between good user interface design and bad user interface design, we must be careful.

Too many developers make the mistake of imitating the user interface of poorly designed software.

- Use color appropriately

Color should be used sparingly in applications and must also use a secondary indicator. The problem is that some of users may be color blind and if we are using color to highlight something on a screen, then we needto do something else to make it stand out if we want these people to notice it. we also want to use colors in our application consistency, so we have a common look and feel throughout our application.

- Follow the contrast rule

If we are going to use color in application, we need to ensure that our screens are still readable. The best way to do this is to Follow the contrast rule : Use dark text on light backgrounds and light text on dark backgrounds. Reading blue text on a white background is easy; but reading blue text on a red background is difficult. The problem is not enough contrast exists between blue and red to make it easy to read, whereas there is a lot of contrast between blue and white.

- Align fields effectively

When a screen has more than one editing field, we want to organize the fields in a way that is both visually appealing and efficient. The best way to do is to left-justify edit fields : in other words, make the left-hand side of each edit field line up in a straight line, one over the other.

The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.

- Expect your users to make mistakes

How many times have you accidentally deleted some text in one of our files or in the file itself? Were we able to recover from these mistakes or were we forced to redo hours, or even days, of work? The reality is that to err is human, so we should design our user interface to recover from mistakes made by our users.

- Justify data appropriately

For columns of data, common practice is to right-justify integers, decimal align floating-point numbers, and to left-justify strings.

- Our design should be intuitable

If our users don’t know how to use our software, they should be able to determine how to use it by making educated guesses. Even when the guesses are wrong, our system should provide reasonable results from which users can readily understand and ideally learn.

- Don’t create busy user interfaces

Crowded screens are difficult to understand and, hence, are difficult to use.

Experimental results show that the overall density of the screen should not exceed 40 percent, whereas local density within groupings should not exceed 62 percent.

- Group things effectively

Items that are logically connected should be grouped together on the screen to communicate they are connected, whereas items that have nothing to do with each other should be separated. We can use white space between collections of items to group them and/or we can put boxes around them to accomplish the same thing.

- Take an evolutionary approach

Techniques such as user interface prototyping and Agile Model Driven Development (AMDD) are critical to our success as a developer

User Interface design principles

The fundamental principles for designing user interfaces

- The principle of user profiling

Know who our user is.

A design that is better for a technically skilled user might not be better for a non-technical businessman or an artist.

- What are the user’s goals- What are the user’s skills and experience- What are the user’s needs

- The principle of metaphor

Borrow behaviors from systems familiar to our users.

Frequently a complex software system can be understood more easily if the user interface is depicted in a way that resembles some commonplace system. The ubiquitous “Desktop metaphor” is an overused and trite example. Another is the tape deck metaphor seen on many audio and video player programs. This concept of “extendibility” is what distinguishes a powerful metaphor from a weak one.

There are several factors to consider when using a metaphor :

- Once a metaphor is chosen, it should be spread widely throughout the interface, rather than used once at a specific point

- There’s no reason why an application cannot incorporate several different metaphors, as long as they don’t clash

- Metaphor isn’t always necessary.- Incorporating a metaphor is not without

certain risks.- Be aware that some metaphors don’t cross

cultural boundaries well.

- The principle of feature exposure

Let the user see clearly what functions are available

Software developers tend to have little difficulty keeping large, complex mental models in their heads. But not everyone prefers to “live in their heads”, instead, they prefer to concentrate on analyzing the sensory details of their environment, rather than spending large amounts of time refining and perfecting abstract models.

Both type of personality (Intuitive and Sensable) can be equally intelligent, but focus on different aspects of life. It is to be noted that according to some psychological studies “Sensables” outnumber “Intuitives” in the general population by about three to one.

Intuitives prefer user interfaces that utilize the power of abstract models – command lines, scripts, plug-ins, macros, etc. Sensables prefer user interfaces that utilize their perceptual abilities – in other words, they like interfaces where the features are “up front” and “in their face”. Toolbars and dialog boxed are an example of interfaces that are pleasing to this personality type.

Here’s a partial list of them in order from most exposed to least exposed :

• Toolbar (completely exposed)• Menu item (exposed by trivial user gesture)• Submenu item (exposed by somewhat more involved user gesture)• Dialog box (exposed by explicit user command)• Secondary dialog box (invoked by button in first dialog box)• “Advanced user mode” controls --exposed when user selects “advanced” option• Scripted functions

- The principle of coherence

The behavior of the program should be internally and externally consistent

Coherent literally means “stick together”

Internal consistency means that the program’s behaviors make “sense” with respect to other parts of the program.

External consistency means that the program is consistent with the environment in which it runs. This includes consistency with both the operating system and the typical suite of applications that run within that operating system.

- The principle of state visualization

Changes in behavior should be reflected in the appearance of the program

Each change in the behavior of the program should be accompanied by a corresponding change in the appearance of the interface. One of the big criticisms of “modes” in interfaces is that many of the classic “bad example”programs have modes that are visually indistinguishable from one another.

- The principle of shortcuts

Provide both concrete and abstract ways of getting a task done

Once a user has become experienced with an application, he will start to build a mental model of that application. He will be able to predict with high accuracy what the results of any particular user gesture will be in any given context.

At this point, the program’s attempts to make things “easy” by breaking up complex actions into simple steps may seem cumbersome. Additionally, as this mental model grows, there will be less and less need to look at the “in your face” exposure of the application’s feature set. Instead pre-memorized shortcuts should be available to allow rapid access to more powerful functions.

There can also be alternate methods of invoking commands that are designed to increase power rather than to accelerate speed. A “recordable macro” facility is one of these, as is a regular expression search and replace.

- The principle of focus

Some aspects of the UI attract more than others do

The human eye is a highly non-linear device. Our eyes are drawn to animated areas of the display more readily than static areas. Changes to these areas will be noticed readily. The mouse cursor is probably the most intensely observed object on the screen – it’s not only a moving object, but mouse users quickly acquire the habit of tracking it with their eyes in order to navigate.

- The principle of grammar

A user interface is a kind of language – know what the rules are

Many of the operations within a user interface require both a subject and a verb. This naturally suggests that actions in the user interface form a kind of grammar.

The two most common grammars are known as “Action -> Object” and “Object -> Action”.

“Action -> Object” is known as “modality”because the tool selection is a “mode” which changes the operation of the program.

“Object -> Action” case, the object is selected first and persists from one operation to the next. Individual actions are then chosen which operate on the currently selected object or objects. This is the method seen in most word processors – first a range of text is selected, and then a text style such as bold, italic, or a font change can be selected.

“Object -> Action” has been called “non-modal” because all behaviors that can be applied to the object are always available. One powerful type of them is called “direct manipulation” , where the object itself is a kind of tool.

- The principle of help

Understand the different kinds of help a user needs

Five basic types of help is correspond to the fie basic questions that users ask :

1) Goal-oriented :“What kinds of things can I do with this

program?”2) Descriptive :

“What is this? What does this do?”3) Procedural :

“How do I do this?”

4) Interpretive :“Why did this happen?”

5) Navigational :“Where am I?”

The essay goes on to describe in detail the different strategies for answering these questions, and shows how each of these questions requires a different sort of help interface in order for the user to be able to adequately phrase the question to the application.

- The principle of safety

Let the user develop confidence by providing a safety net

Each human mind has an “envelope of risk”, that is to say a minimum and maximum range of risk levels which they find comfortable. A person who finds herself in a situation that is too risky for her comfort will generally take steps to reduce that risk.

This comfort envelope varies for different people and in different situations. In the case of computer interfaces, a level of risk that is comfortable for a novice user might make a “power-user” feel uncomfortably swaddled in safety. It’s important for new users that they feel safe. At the same time, an expert user must be able to use the program as a virtuoso.

- The principle of context

Limit user activity to one well-defined context unless there’s a good reason not to

Each user action takes place within a given context – the current document, the current selection, the current dialog box. A set of operations that is valid in one context may not be valid in another. Even within a single document, there may be multiple levels.

- The principle of aesthetics

Create a program of beauty

It’s not necessary that each program be a visual work of art. But it’s important that it not be ugly.

Another area of aesthetics to consider is the temporal dimension. Users don’t like using programs that feel sluggish or slow. There are many tricks that can be used to make a slow program “feel” snappy, such as the use of off-screen bitmaps for rendering, which can then be blitted forward in a single operation.

- The principle of user testing

Recruit help in spotting the inevitable defects in your design

In many cases a good software designer can spot fundamental defects in a user interface. However, there are many kinds of defects which are not so easy to spot, and in fact an experienced software designer is often less capable of spotting them than the average person. In other cases, a bug can only be detected while watching someone else use the program.

User-interface testing can be summarized in the following steps :• Set up the observation.• Describe to the user the purpose of the observation.• Talk about and demonstrate the equipment in the room.• Explain how to “think aloud”.• Explain that you will not provide help.• Describe the tasks and introduce the product.• Ask if there are any questions before you start; then begin the observation.• Conclude the observation. • Use the results.

- The principle of humility

Listen to what ordinary people have to say

It’s important to realize that each of us, user and developer, has only part of the picture. The ideal is to take a lot of user opinions, plus our insights as a developer and reduce them into an elegant and seamless whole -- a design which, though it may not satisfy everyone, will satisfy the greatest needs of the greatest number of people.

Some things designers should keep in mind about their users :• Most people have a biased idea as to the what the “average” person is like. • Most people have some sort of core competancy, and can be expected to perform well within that domain.• The skill of using a computer (Computer literacy) is actually much harder than it appears.• The lack of computer literacy is not an indication of a lack of basic intelligence.• A high proportion of programmers are introverts, compared to the general population.

148

ความเปนมาของอนเทอรเนต1969 ระบบเครอขายของหนวยงานทหาร

ARPANET กอตงโดยกระทรวงกลาโหม(DOD = US Department Of Defense) และองคการปองกนประเทศของสหรฐอเมรกา

(APRA = Armed-Forces Research ProjectAgency)

1983 ARPANET is split into INTERNET and MILNET

149

1985 BITNET is completed (จดตงโดย Cuny’snetwork including Canadian universities)

1986 NSFNET is created by the National Science Foundation for leading U.S.universities and government agencies

1988 NSF installs high speed backbone andconnects thirteen regional internet networks

1990s Commercial networks begin connecting to internet

ความเปนมาของอนเทอรเนต

- IP network number/IP addressเปนเลขรหสประจาตวคอมพวเตอรทตอเขากบ

เครอขายอนเทอรเนตซงประกอบดวยเลข 4 ชด ชดละ 8 บต นนคอแตละชดเปนเลขตงแต 0 ถง 255 โดยทแตละชดคนดวยเครองหมายจด เชน 10.133.238.40

1 byte 1 byte 1 byte1 byte

IP มคาจาก 000.000.000.000 ถง 255.255.255.255

มลตมเดยบนระบบเครอขาย

Protocol คอระเบยบวธการในการตดตอสอสาร เมอนามาใชกบเทคโนโลยสอสารโทรคมนาคม จงหมายถงขนตอนการตดตอสอสาร กฎ ระเบยบ และขอกาหนดตาง ๆ รวมถงมาตรฐานทใชเพอใหสามารถสงผานขอมลไปยงปลายทางไดอยางถกตอง

- DNS servers

เนองจากเลข IP address นนจดจายาก ทาใหมการทาระบบชอคอมพวเตอรมาตรฐานในเครอขายอนเทอรเนตเรยกวา Domain Name System ซงประกอบดวยชอเครองคอมพวเตอร ชอเครอขายทองถน ชอสบโดเมน และชอโดเมน โดยกาหนดใหสอดคลองและสมพนธกนกบ IPaddress

ตวอยางการแสดงชอ IP และชอ DNS ทสอดคลองกน

192.133.10.1

chulkn.chula.ac.th

IP address

ชอโดเมนชอคอมพวเตอร

ชอเครอขายทองถน ชอสบโดเมน

โปรโตคอลทใชกบมลตมเดย

ทนยมใชกนมอย 2 ชนดไดแก HTTP และ RTSP

HTTP (Hypertext Transfer Protocol)เปนโปรโตคอลมาตรฐานทใชแลกเปลยนขอมลระหวาง

ฝงเซรฟเวอรและไคลเอนต บนเครอขายเวลดไวดเวบ มกลไกการทางานทไมสลบซบซอนและประมวลผลไดอยางรวดเรว สามารถสนบสนนและรองรบขอมลไดเกอบทกแบบไมวาจะเปนขอมลทเขารหสแบบ MIME หรอขอมลทเปนกราฟก

RTSP (Real Time Streaming Protocol)เปนโปรโตคอลมาตรฐานทใชแลกเปลยนขอมลแบบ

สตรมมงมเดย ผานทางเครอขายอนเทอรเนต โดยมสวนประกอบหลกสาคญ 3 สวนไดแก 1) สวนของเครองเขารหส (Encoder)2) เครองผชม (Player)3) เครองเซรฟเวอร (Server)

หลกการทางานเรมจากเครองเขารหสซงอาจเปนไดทงซอฟตแวรหรอฮารดแวรทเปนการด จากนนกจะทาการตรวจจบขอมลแลวทาการแกไขใหอยในรปแบบของไฟลทเหมาะสม แลวจงทาการเขารหสเพอลดขนาดของไฟลและแปลงใหอยในรปของสตรมมงมเดย จากนนจดเกบไวทเซรฟเวอร กอนทจะนามาเผยแพรทางอนเทอรเนต