principles of website and website design · •web2.0 –dynamic content –two-way communication...

หลกการท างานของเวบไซตและการออกแบบเวบไซต

PRINCIPLES OF WEBSITE AND WEBSITE DESIGN

PRINCIPLES OF WEBSITE PART1

bull History of WWW

bull Generation of website

bull Structure of website

bull Basic knowledge of website

bull Type of website

CHAPTER OUTLINE

STATISTICS OF INTERNET USER IN THAILAND

HISTORY OF INTERNET

bull CERN System develop to Internet

bull Tim Berners-Lee create Browser in 1990

bull Using HTML Language(Hypertext Markup Language)

HISTORY OF WEBSITE

GENERATION OF WEBSITE

bull Web20ndash Dynamic contentndash two-way communicationndash Edit by webmaster and userndash Use AJAX SOAP XML and

JavaScript applicationsndash Ex Wiki Facebook weblog

Youtube Flickrndash Readwrite = ldquosharerdquo

bull Web10ndash Static contentndash One-way communicationndash Edit by webmaster onlyndash Normal websitendash Use HTML ndash Read only = ldquoPushrdquo

WEB10 AND WEB20

bull Web30ndash Semantic web (the meaning

of data )ndash Use Metadata Tag for

manage datandash A Global Databasendash Create information that

human and machine readable

ndash Ex Apple technologyndash Readwriterelate = ldquoLiverdquo

WEB30

HOW WEBSITE WORK

VOCABULARY OF WEBSITE

Domain name

ISP

URLHosting

FTP

HTMLClient

Server

WebsiteWebpage

DNSWeb browser

IPaddress

Server Operating System

Data transfer

Sub Domain

Hosting Transfer

Web Control Panel

CMSMySQL 51

FTP Accounts

POP3IMAPSMTP

Ref Download

1 โดเมนเนมประเภท 1 ระดบ (Top Level Domain) สากล

ตวอยาง com edu gov net org info biz

- httpwwwgooglecom

2 โดเมนเนมประเภท 2 ระดบ (Second Level Domain) ประเทศ

ตอยอสวนท 2 co ac or net go

ตอยอสวนท 3 cn th jp au eu us

- httpwwwrsuacth

3 โดเมนเนมประเภท 3 ระดบ (Third Level Domain) อนๆ

- httpnewsrsuacthcom

TYPE OF DOMAIN NAME

bull Portal site เวบทใหบรการมากมาย

bull News site เวบขาว

bull Information site ใหบรการขอมลตางๆ

bull Business Marketing site เวบธรกจ

bull Education site เวบการศกษา

bull Entertainment site ใหความบนเทง

bull Non Profit Organization site เวบการกศล

bull Personal site เวบสวนบคคล

แบงตามประเภท

การใชงานไดดงน1 เนอหาและการใชงาน

2 ลกคา E-commerce

3 E-commerce site

TYPE OF WEBSITE

ลกคา e-commerce

bull B2B Business to Business

bull B2C Business to Customer ขายของ

bull C2C Customer to Customer พนทป

bull G2B Government to Business เวบสงออก dpi

bull G2G Government to Government สถานทตไทยในออส

TYPE OF WEBSITE

e-commerce Site

bull e-classified site เวบประกาศซอขายของ

bull Online catalog site น าเสนอสนคาonline ขายของทวไป

bull e-shop site รานคา online มระบบshopping cart

bull Auction site น าเสนอสนคาผานการประมล

bull e-market place ตลาด online รวมรานคาตางๆ

PRINCIPLES OF WEBSITE PART2

bull Know the user

bull Header

bull Navigation

bull Layout

bull Color

bull Content Organization

bull Prototyping

CHAPTER OUTLINE

CONTENT MANAGEMENT LIFE CYCLE

Create

สราง

Manage

ปรบปรง

Distribute

ตรวจสอบ

Deliver

เผยแพร

17

KNOW THE USER

Why we need to know the user

ลด

คาใชจาย

ในการดแล

ลดขนตอน

ในการ

พฒนา

ท างาน

เพม

ยอดขาย

รกษาฐาน

ลกคาไว

USER LEARNING STYLE

READ THEN DO

USER LEARNING STYLE

DO THEN READ

bull Physical Difference age gender generation

bull Tool perform

bull Cultural

bull Education High-school University

bull Primary user = staff Secondary user=customer

bull Application familiarity

ndash Novice Advanced Beginner Competent Performer Expert

ndash unknown knows basics diagnose simple problem diagnose complex problem

ขนตอนการศกษาผใชงาน

APPLICATION FAMILIARITYExpert

Competent Performer

Advance beginner

Novice

WHAT IS WEBSITE LAYOUTLayout คอ การจดองคประกอบตางๆของเอกสารใหมความสวยงามและเหมาะสมกบเนอหาและผใชงานสามารถเขาใจไดงาย

ใหผอานสามารถเขาใจสารสนเทศของเนอหาทซบซอนไดเวลาอนสน

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

wwwfreepikcom

ระบบเสนตารางแมแบบชวยในการผสมผสานความเปนเอกภาพระหวางตวอกษร ขอความ รปภาพ และวตถตางๆ ในงานกราฟก เขาดวยกน

bull Control amp Organization ควบคมและจดการเนองานไดอยางยดหยน สอดคลองกน

bull Movement เกดการเคลอนไหว

bull Balance เกดความสมดลในชนงาน

bull Direction การรบรทศทาง

bull Order ล าดบของเนอหาสาระ

GRID

GRID DESIGN

28

HEADER bull Not too large File

bull Loading Time 4-6 second

bull Create 1-2 web concepts

bull Logo Link Contact info Promotion Slogan

bull ldquoMake it Freshrdquo

NAVIGATION

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

Navigation type Hierarchical (hyperlink)Database

Navigation bar Text Graphic

Best location Center Top-left on the page

Breadcrumbs show

ldquoThis is where you are how you got hererdquo

Local Navigation bar To access sub-site

Global Navigation bar To access main content

EYE TACKING

COLOR51 Color Mode

A Time-Tested Model RYB = Red Yellow Blue

Additive Color RGB = Red Green Blue

Subtractive Color CMYK = Cyan Magenta Yellow Black

The HSB System Color Hue(Color type) Saturation(Color range)Brightness

52 Color in Text and Background

-Dark Text on the Light Background

-Avoid the Background Color Blue

-Maintain Contrast between Text and Background

COLOR COLOR

COLOR

COLOR

COLOR

The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interac and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies

The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20

The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies

The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20

The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies

The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20

The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies

The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20

The term Web 20 is associated with web applications that facilitate participatory information sharing interoperability user-centered design[1] and collaboration on the World Wide Web A Web 20 site allows users to interact and collaborate with each other in a social media dialogue as creators (prosumers) of user-generated content in a virtual community in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them Examples of Web 20 include social networking sites blogs wikis video sharing sites hosted services web applications mashups and folksonomies

The term is closely associated with Tim OReilly because of the OReilly Media Web 20 conference in late 2004[2][3] Although the term suggests a new version of the World Wide Web it does not refer to an update to any technical specification but rather to cumulative changes in the ways software developers and end-users use the Web Whether Web 20 is qualitatively different from prior web technologies has been challenged by World Wide Web inventor Tim Berners-Lee who called the term a piece of jargon[4] precisely because he intended the Web in his vision as a collaborative medium a place where we [could] all meet and read and write He called it the ReadWrite Web[5] RefhttpenwikipediaorgwikiWeb_20

COLOR THEORY FOR WEB DESIGNERS

53 Color- Harmony Schemes

-Cool Color

-Worm Color

-Monochromatic Color

-Complementary Color

-Analogous Color

-Triadic Color

-Split Complementary Color

-Square Color