โดย อ.ดร.รศัมีทิพย ์วิตา

ภาควิชาวิทยาการคอมพิวเตอร ์คณะวิทยาศาสตร์มหาวิทยาลยัเชียงใหม่

Web Authoring

ส่วนประกอบของเวบ็ไซต์

Homepage

Web page

Web page

Web page

Web page Web page

Web page

2

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Site Map

(2) Website

(4)

(3)

(5)

Domain Name:www.example.com

(1)

ส่วนประกอบของเวบ็ไซต์ (ต่อ)

(1) Domain Name คือ รหสัท่ีใช้ในการติดต่อส่ือสารเพ่ือการเช่ือมโยงเข้าหาเวบ็ไซตบ์นอินเตอรเ์น็ต ส าหรบัใช้เป็นเวบ็เพจหน้าแรกเพ่ือเข้าสู่เวบ็ไซตใ์ด ๆ

(2) Website คือ คือแหล่งท่ีอยู่ของเวบ็เพจท่ีถกูจดัเกบ็ไว้ในท่ีอยู่เดียวกนับนเคร่ืองแม่ข่าย (Server) เวบ็ไซตห์น่ึงจะมีเวบ็เพจก่ีหน้ากไ็ด้ท่ีเช่ือมโยงกนั หรือเวบ็ไซตห์น่ึงจะเช่ือมโยงไปยงัอีกเวบ็ไซตห์น่ึงกไ็ด้ 3

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ส่วนประกอบของเวบ็ไซต ์(ต่อ)

(3) Homepage คือเวบ็เพจหน้าแรกของเวบ็ไซตใ์ดๆ ท่ีจะแสดงเมื่อระบช่ืุอเวบ็ไซตนั์น้

(4) Web page คือไฟลเ์อกสารท่ีถกูสร้างขึน้เพ่ือน าเสนอข้อมลูข่าวสารของบริการ www โดยภายในเอกสารจะประกอบไปด้วยรายละเอียด ข้อมลูต่างๆ เช่น รปูภาพ ตาราง ข้อความ เสียง หรือวีดีโอ เป็นต้น

(5) Site Map คือ แผนผงัแสดงรายละเอียดความเช่ือมโยงของเวบ็เพจทัง้หมดท่ีอยู่ในเวบ็ไซตเ์ดียวกนั 4

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Web Development (recap)

• ในการพฒันาเวบ็เพจ เวบ็เพจท่ีสร้างจะมี 2 ประเภท• Static Web Page คือ เวบ็เพจท่ีสรา้งขึน้มาจากภาษา

HTML เพียงอย่างเดียวจะมีลกัษณะเป็นเวบ็เพจอย่างง่าย

• Dynamic Web Page คือ เวบ็เพจท่ีมีลกูเล่นต่าง ๆ มีการโต้ตอบกบัผูใ้ช้ มีการประมวลผลต่าง ๆ มีการติดต่อกบัฐานข้อมลู

5

หลกัการออกแบบเวบ็ไซต์

• โครงสรา้ง (Website Structure Design)• ก าหนดภาพรวมของเวบ็ไซต ์(Outline)• รวบรวมข้อมูล (Content)• ออกแบบการแสดงผล (Layout)

• การแสดงผล (Website Interface Design)• เลือกสีหรอืกลุ่มสีท่ีเหมาะสม (Color Theme)• การเลือกรปูแบบตวัอกัษรท่ีเหมาะสม (Font)• ภาพประกอบ และส่ืออ่ืนๆ (Image and Multimedia) 6

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

WEBSITE STRUCTURE DESIGN

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

7

ก าหนดภาพรวมของเวบ็ไซต ์(Outline)

•ก าหนดวตัถปุระสงคข์องเวบ็ไซต ์เพื่อท าให้สามารถก าหนดแนวทางจดัหาข้อมลูให้เหมาะสม

•ก าหนดขอบเขตให้ชดัเจน เวบ็ไซตไ์ม่ควรมีความซบัซ้อนจนเกินไป

•ก าหนดความเช่ือมโยงระหว่างข้อมลู พยายามจดักลุ่มของข้อมลูท่ีมีความสอดคล้องกนัไว้ด้วยกนั

8

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ตวัอย่างประเภทของเวบ็ไซต์

• เวบ็ขององคก์ร หรือบริษทั (Corporate Website)• ข้อมลูรายละเอียดขององคก์ร หน้าท่ี วิธีการติดต่อ

• เวบ็ธรุกิจการค้า (Promotional/E-Commerce Website)• รายละเอียดสินค้า วิธีการซ้ือขาย และโฆษณา

• เวบ็รวบรวมความรู้ (Information Website)• เวบ็รายวิชา หรือรวมบทความ หรือข้อมลูต่างๆ เช่นวิกิพีเดีย

• เวบ็ส่วนตวั (Personal Website)• รวมรวมผลงาน (Portfolio), อลับัม้, บลอ็ก

9

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

รวมรวมข้อมูล (Content)

• ข้อมลูท่ีอยู่บนเวบ็ไซตนั์น้ เป็นส่วนส าคญัท่ีสดุของเวบ็ไซต ์ควรค านึงถึงรายละเอียดดงัน้ี• ความถกูต้องของข้อมลู ข้อมูลท่ีเลือกมานัน้จะต้องมีการตรวจสอบความถกูต้อง เพ่ือความน่าเช่ือถือของเวบ็ไซต ์ทัง้การสะกดค า และเน้ือหา

• ความเป็นปัจจบุนัของข้อมลู ข้อมูลมีการอพัเดทมากน้อยแค่ไหน

• ความครอบคลมุ ให้เป็นไปตามวตัถปุระสงคข์องเวบ็ไซต์ 10

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ออกแบบการแสดงผล (Layout)

• หน้าเวบ็ไซตโ์ดยปกติ จะมีส่วนประกอบดงัน้ี• ส่วนหวั (Header) แสดงช่ือเวบ็ไซต ์โลโก้ หรือค าโปรยเลก็น้อย• ไฮไลท์ หรือแบนเนอร์ (Highlight) แสดงรายละเอียดท่ีต้องการเน้น เช่น โปรโมชัน่ ประกาศข่าวส าคญั อาจมีเฉพาะหน้าhomepageไม่จ าเป็นต้องมีทกุหน้า

• เมนูหลกั เมนูย่อย (Menu) แสดงรายการหน้าเวบ็เพจอ่ืนท่ีอยู่ในเวบ็ไซตเ์ดียวกนั เพ่ือใช้ในการเช่ือมโยง ควรใช้ต าแหน่งและรปูแบบเดียวกนัทัง้เวบ็ไซต์

• เน้ือหาหลกั, เน้ือหารอง (Content) รายละเอียดหลกัของหน้าเวบ็เพจนัน้ๆ

• ส่วนท้าย (Footer) แสดงรายละเอียดย่อยต่างๆ เช่น เมนูย่อยหรือข้อมลูติดต่อ รายละเอียดแสดงลิขสิทธิ

11

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ส่วนประกอบหน้าเวบ็เพจ

12

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Main Content

Secondary Content

Footer

Logo

Menu

Header

แนวทางการออกแบบการแสดงผล

•ควรออกแบบให้ทุกๆหน้าของเวบ็ไซตเ์ป็นไปในแนวทางเดียวกนั เช่นต าแหน่งเมนู และเน้ือหา เพ่ือให้เกิดความคุ้นเคย

• ไม่ควรใส่เน้ือหาให้แน่นจนเกินไป อาจมีรปู หรือพืน้ท่ีว่าง

• แบง่หวัข้อเน้ือหาชดัเจน ง่ายต่อการมอง• ออกแบบให้แสดงเน้ือหาส าคญั หรือต้องการเน้น ในหน้า

Homepage เช่น ข่าวประชาสมัพนัธ ์หรือข้อมลูท่ีมีการอพัเดทล่าสดุ 13

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ตวัอย่างเวบ็ไซต์ Portfolio

14

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ตวัอย่างเวบ็ไซต ์Corporate

15

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ตวัอย่างเวบ็ไซต์ Knowledge

16

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Responsive Web Design

• เป็นการออกแบบเพ่ือให้สามารถแสดงผลเวบ็ไซต์ได้ในหลายอปุกรณ์

• ข้อมลูจะถกูปรับให้เหมาะสมตามขนาดหน้าจอของอปุกรณ์โดยอตัโนมตัิ

• เป็นแนวทางในการออกแบบการแสดงผลเวบ็ไซต์ในปัจจบุนัและอนาคต

• เทคโนโลยีการใช้ภาษา HTML5และ CSS

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

17

Image by Guillermo Garcia-Mont

WEBSITE INTERFACE DESIGN

20

41

00

Info

rmat

ion

Tec

hn

olo

gy

and

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

18

เลือกสีหรือกลุ่มสีท่ีเหมาะสม (Color Theme)

•การเลือกสี หรือธีมของเวบ็ไซต ์ควรเลือกให้เหมาะกบัเน้ือหาของเวบ็ เช่น เวบ็รายวิชา หรือเวบ็รวมความรู้ เน้ือหามีมาก ไม่ควรใช้สีฉูดฉาดเกินไป

•ส าหรบัองคก์ร หรือบริษทั ธีมของเวบ็ไซต ์จะส่ือถึงภาพลกัษณ์ขององคก์ร และอาจถกูก าหนดโดยสีประจ าองคก์ร เพ่ือแสดงความหน้าเช่ือถือ เช่น เวบ็ไซตธ์นาคาร มหาวิทยาลยั หน่วยงานราชการ 19

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Color Theme

•กลุ่มของสีต่างๆ ให้ความรู้สึกกบัผูช้มต่างกนั ควรเลือกน ามาใช้ให้เหมาะสมและส่ือความหมาย เช่นสีโทนร้อนให้ความรู้สึกสนุกสนานและกระตุ้นความสนใจ และสีโทนเยน็ให้ความรู้สึกสงบ

•ควรเลือกใช้สีของเวบ็ไซตใ์ห้เหมาะสมกบัเน้ือหาของเวบ็ไซต ์เช่นเวบ็ไซตท่ี์มีเน้ือหามาก ควรใช้สีท่ีท าให้อ่านง่าย สบายตา 20

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Color Theme

•รปูแบบของการใช้สีในเวบ็ไซต์• สีโทนรอ้น หรอืสีโทนเยน็ (Warm and

Cool Colors)

• สีโทนเด่ียว (Monochromatic Colors)

• สีข้างเคียง (Analogous Colors)

• สีคู่ตรงข้าม (Triad Colors)

21

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Analogous Colors

ท่ีมา: http://colorwheel.wikispaces.com/

Warm and Cool Colors

Monochromatic Colors

Triad Colors

การเลือกรูปแบบตวัอกัษรทีเ่หมาะสม (Font)

• รปูแบบฟอนตค์วรเลือกให้เหมาะสมกบัเน้ือหา ทางการ/ไม่เป็นทางการ

• มีขนาดท่ีเหมาะสม ไม่เลก็หรอืใหญ่จนเกินไป

• สีของข้อความและสีของพืน้หลงัต้องเหมาะสม อ่านง่าย

• ไม่ควรมีลกูเล่นของข้อความ เช่นตวักระพริบ ตวัว่ิง มากเกินไป

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

22

รปูแบบตวัอกัษรภาษาองักฤษ (1) (Font)

•Serif เป็นตวัอกัษรแบบมีหวัมีเท้า มกัใช้ในเอกสารเป็นทางการ ส่วนใหญ่ใช้เป็นหวัเรือ่งมากกว่าเน้ือความ เช่นTime New Roman, Georgia, Book Antiqua เป็นต้น

•San Serif เป็นตวัหนังสือท่ีเน้นความเรียบง่าย ดูทนัสมยักว่าแบบ serif อ่านง่าย จึงเหมาะกบัการใช้กบัข้อความท่ีเป็นเน้ือความ เช่น Arial, Tahoma, Calibri เป็นต้น 23

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

รปูแบบตวัอกัษรภาษาองักฤษ (2) (Font)

•Script เป็นตวัอกัษรท่ีเลียนแบบลายมือเขียน เหมาะกบังานส าหรบัวยัรุน่หรอืแบบไม่เป็นทางการ เหมาะกบัการใช้เป็นหวัเรือ่งมากกว่าเน้ือความเน่ืองจากอ่านค่อนข้างยากเช่น Vladimir Script, Freestyle Script เป็นต้น

24

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ภาพประกอบ และส่ืออ่ืนๆ (Image and Multimedia)

• มีความสมัพนัธก์บัเน้ือความ

•ขนาดไม่เลก็หรือใหญ่จนเกินไป

•หลีกเล่ียงการใช้การเคล่ือนไหวหรือเอฟเฟ็คต่างๆท่ีมากเกินไป

•หากใช้เสียงเพลงประกอบเวบ็ ควรท่ีปุ่ มคลิกปิดได้ หรือไม่ควรตัง้ค่าให้ท าการเล่นโดยอตัโนมติัเม่ือเปิดเวบ็ 25

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Web Authoring Tools

ปัจจบุนั มีซอฟตแ์วรท่ี์ใช้ในการสร้างเวบ็ได้โดยเป็นลกัษณะ WYSIWYG (What You See Is What You Get) ทัง้ท่ีเป็นแบบโปรแกรมส าเรจ็รปู เช่น Microsoft FrontPage, Adobe Dreamweaver, KompoZer และเป็นแบบออนไลน์เซอรวิ์ส ท่ีให้บริการสร้างเวบ็ไซต์พร้อมกบัท าหน้าท่ีเป็นเวบ็โฮสต้ิงไปด้วย เช่น Google Sites, Wordpress.com, Weebly เป็นต้น

26

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Web Publishing Services

• เป็นบริการท่ีช่วยในการสร้างและจดัเกบ็เวบ็ไซต ์โดยจะมีบริการให้สร้าง ปรบัแต่ง เวบ็ไซตไ์ด้ตามต้องการ • โดยส่วนใหญ่ในการสรา้งเวบ็ไซตจ์ะเป็นแบบ

WYSIWYG• ให้บริการ Hosting และ Domain Name• มี Theme ให้เลือกใช้ปรบัแต่งเวบ็ได้ง่าย• มีทัง้แบบฟรี และเสียค่าใช้จ่าย 27

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

ตวัอย่าง

28

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Google Sites Wordpress

Tumblr

Blogger

SOCIAL MEDIA

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

29

ข้อแตกต่างระหว่างเวบ็ไซตแ์ละสงัคมออนไลน์

Website

• สามารถรวบรวมและแสดงขอ้มลูทีเ่ป็นหมวดหมูไ่ด้

• สามารถคน้หา เรยีกดขูอ้มลูยอ้นหลงัไดง้า่ย

• เป็นชอ่งทางหลกัในการน าเสนอขอ้มลูของหน่วยงาน หรอืองคก์ร

Social Media

• เน้นลกัษณะของการตดิต่อสือ่สาร ประกาศ หรอืเหมาะกบัการใชโ้ฆษณา

• เรยีกคน้หาขอ้มลูเก่าไดย้าก

• ไมส่ามารถจดัขอ้มลูทีป่ระกาศเป็นหมวดหมูไ่ด้

• เหมาะกบัการใชใ้นงานประชาสมัพนัธ ์แจง้ขา่ว

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

30

Social Media Trend

31

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

http://kamber.com.au/

Facebook Page and Group

• Facebook Profile• แสดงรายละเอยีดของบุคคล โดยเจา้ตวัสามารถก าหนดระดบัการเปิดเผยขอ้มลู รายละเอยีดของเพือ่น และขอ้ความทีต่อ้งการประกาศไดด้ว้ยตนเอง

• Facebook Page• ลกัษณะเชน่เดยีวกบั Facebook profile แต่เป็นการสรา้งโปรไฟลส์ าหรบ้ ผูม้ชีือ่เสยีง หน่วยงาน หรอืองคก์รต่างๆ โดยทีห่น้าเพจจะเปิดเผยเป็นสาธารณะ (Public) โดยอตัโนมตั ิ และการตดิต่อสือ่สารกบัเพจ จะใชว้ธิ ีกดไลคแ์ละตดิตาม เพือ่รบัขอ้มลูขา่วสารทีป่ระกาศจากเพจนัน้ๆ

• Facebook Group• เป็นกลุ่มเฉพาะเพือ่ใชใ้นการตดิต่อสือ่สารระหวา่งคนในกลุ่มทีส่นใจในเรือ่งเดยีวกนั หรอืเพือ่แลกเปลีย่นความคดิเหน็ในเรือ่งต่างๆ โดยที ่กลุ่มจะอนุญาตใหม้กีารก าหนดระดบัการเปิดเผยขอ้มลู (public, closed, secret) และลกัษณะการสมคัรเขา้เป็นสมาชกิได้(Invite only, ask for join, join) 32

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Facebook Page

33

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls

Facebook Group

34

20

41

00

Info

rmat

ion

Tec

hn

olo

gy a

nd

Mo

der

n L

ife

I : W

eb A

uth

ori

ng

Too

ls