SlideShare a Scribd company logo

Website D.I.Y.

WiseKnow Thailand, profile picture
WiseKnow Thailand

Website D.I.Y.

Internet
1 of 114
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
ETDA : e-Commerce Pocket Series ท�ำเว็บไซต์ด้วยตัวเองไม่ยากอย่างที่คิด รวบรวมเทคนิคการท�ำเว็บไซต์ ให้ประสบความส�ำเร็จที่คุณก็ท�ำได้
Website D.I.Y.
1 ใน ETDA e-Commerce Pocket Series เราปั้นหนังสือเล่มนี้เพื่อ “เถ้าแก่ยุคไอที นักธุรกิจหน้าใหม่ SMEs/OTOP” เลขมาตรฐานสากลประจ�ำหนังสือ ISBN 978-616-91910-6-3 สงวนลิขสิทธิ์หนังสือเล่มนี้ ตามพระราชบัญญัติลิขสิทธิ์ 2527 ห้ามคัดลอกเนื้อหา ภาพประกอบก่อนได้รับอนุญาต รวมทั้งดัดแปลงเป็นแถบบันทึกเสียง วิดีโอ โทรทัศน์ และสื่ออื่นๆ พิมพ์ครั้งแรก : กันยายน 2557 สร้างสรรค์โดย ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 www.etda.or.th
ก�ำหนดทิศทาง & แนะน�ำ สุรางคณา วายุภาพ (แอน) ก�ำกับดูแล อรุณรุ่ง ธีระศักดิ์ (เอ) สรสิช เนตรนิล (กอล์ฟ) สรรค์สร้างเนื้อหา พายัพ ขาวเหลือง (ตั้ม) ปริญญา สุวรรณชินกุล (เก่ง) ทศพร โขมพัตร (โจ) ดูประเด็นกฎหมาย พิชญลักษณ์ ค�ำทองสุก (หยี) ดูแลกราฟิก ณัฐพงศ์ วรพิวุฒิ (เอ) นภดล อุษณบุญศิริ (เฟรม) ณัฐนัย รวดเร็ว (ฮอลล์) ร่วมแรงกันท�ำ สุรางคณา วายุภาพ ผอ.สพธอ. พายัพ ขาวเหลือง ผู้จัดการ ทีม e-Marketing อรุณรุ่ง ธีระศักดิ์ ผู้อ�ำนวยการ ส�ำนักส่งเสริมธุรกรรมทางอิเล็กทรอนิกส์ ปริญญา สุวรรณชินกุล ผู้จัดการ ทีมพัฒนาธุรกิจ สรสิช เนตรนิล ผู้ช่วยผู้อ�ำนวยการ ส�ำนักส่งเสริมธุรกรรมทางอิเล็กทรอนิกส์ ทศพร โขมพัตร Creative Content ทีมกราฟิก
ค�ำน�ำ “เว็บไซต์” กลายเป็นเครื่องมือหลักในการติดต่อสื่อสารของ คนเราผ่านเครือข่ายอินเทอร์เน็ตในโลกทุกวันนี้และกลายเป็นเครื่องมือ ส�ำคัญของเจ้าของธุรกิจในการสื่อสารกับลูกค้า เพราะสามารถกระจาย ข้อมูลข่าวสารของสินค้าหรือบริการต่างๆ ให้ออกไปได้ในวงกว้างอย่าง รวดเร็ว ง่ายดาย ด้วยต้นทุนที่ต�่ำที่สุด ซึ่งกลุ่มผู้ประกอบการ SMEs/ OTOP สามารถใช้ช่องทางนี้ในการน�ำธุรกิจไปสู่ความส�ำเร็จได้ หากแต่จะท�ำอย่างไรให้เว็บไซต์ประสบความส�ำเร็จนั่นหมายถึง ความจ�ำเป็นในการออกแบบเว็บไซต์ให้ดึงดูดและน่าสนใจต่อกลุ่มเป้าหมาย หรือกลุ่มลูกค้า เพราะเว็บไซต์จ�ำนวนไม่น้อยที่พัฒนาโดยขาดการ วางแผนและท�ำงานอย่างไม่เป็นระบบ เช่น การลงมือออกแบบโดยใช้ โปรแกรมส�ำเร็จรูป โดยจัดท�ำเนื้อหาและรูปแบบของเว็บไซต์ตามความคิด ที่นึกขึ้นได้ขณะนั้นและเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลยท�ำให้เว็บไซต์นั้น มีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้จึงเสี่ยงต่อการล้มลุก คลุกคลานกว่าเว็บไซต์จะฮอตฮิต
“Website D.I.Y.” เป็น 1 ใน 3 ของหนังสือชุด ETDA e-Commerce Pocket Series ภายใต้โครงการเพิ่มศักยภาพการท�ำธุรกรรมออนไลน์ เน้นกลุ่มผู้ประกอบการ SMEs/OTOP ของส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน)(สพธอ.)หรือETDA(เอ็ทด้า)ที่จัดท�ำขึ้นเพื่อสร้างความรู้ความเข้าใจด้าน e-Commerceที่มีมาตรฐาน(Standard)และมั่นคงปลอดภัย(Security)เพื่อให้ผู้ที่สนใจ โดยเฉพาะกลุ่มผู้ประกอบการ SMEs ขนาดย่อมและขนาดกลาง ทั้งกลุ่มที่ท�ำอยู่แล้ว และกลุ่มที่คิดจะเริ่มต้น ได้น�ำไปเป็นแนวทางในการสร้างเว็บไซต์ด้วยตนเอง และสามารถ เข้าสู่ระบบการค้าออนไลน์ที่สามารถเพิ่มยอดขายหรือสร้างรายได้ให้แก่ธุรกิจมากขึ้น หรือให้นักศึกษาที่ต้องการประกอบอาชีพอิสระสามารถน�ำไปประกอบธุรกิจของตนเองได้ ซึ่งทั้งหมดนี้จะช่วยเพิ่มรายได้ให้แก่ประเทศมากขึ้นโดยเฉพาะอย่างยิ่งการเปิดประชาคม เศรษฐกิจอาเซียน ในปี 2558 ซึ่งจะท�ำให้ผู้ประกอบการมีโอกาสขยายฐานลูกค้าได้ เพิ่มขึ้นถึง 600 ล้านคน หากสามารถแสวงหาโอกาสจากช่องทางออนไลน์นี้ หนังสือเล่มนี้จะปูพื้นฐานให้รู้จักตั้งแต่วิธีการท�ำงานของเว็บไซต์ว่าต้องอาศัย อุปกรณ์ใดบ้าง ขั้นตอนการพัฒนาเว็บไซต์โดยละเอียดที่ผู้อ่านสามารถน�ำไปปฏิบัติจริงได้ กลยุทธ์ในการสร้างเว็บไซต์ที่ดึงดูดลูกค้าและทันสมัย รวมทั้งการตั้งชื่อเว็บไซต์ให้ติดตลาด และติดอันดับใน Search Engine ซึ่งจะเป็นส่วนส�ำคัญในการสร้างนักธุรกิจรุ่นใหม่ ที่สามารถพัฒนาเว็บไซต์ของตนเองได้อย่างตรงใจลูกค้าและประสบความส�ำเร็จมากที่สุด สุรางคณา วายุภาพ ผู้อ�ำนวยการ ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน)
Website D.I.Y.
บทที่ 1 เวิลด์ไวด์เว็บ…ใยแมงมุมมัดใจคนทั้งโลก 8 1.1 “IoT” Internet of Things 10 1.2 กลไกของเวิลด์ไวด์เว็บ 16 1.3 อุปกรณ์พร้อม…เว็บก็พร้อม! 20 1.4 ขบวนการพัฒนาเว็บไซต์ 24 บทที่ 2 กลเม็ดปั้นเว็บสวยและดี 28 2.1 องค์ประกอบ 9 ด้าน...แต่งแต้มสีสันให้เว็บไซต์ 30 2.2 ท�ำเว็บสวยและดีแบบ Step by Step 42 2.3 จับกระแสเว็บดีไซน์ยุค 3.0 56 2.4 เปิดไอเดียสร้างสรรค์เว็บยุคใหม่ 62 บทที่ 3 นักพัฒนาเว็บมือใหม่…สไตล์ D.I.Y. 64 3.1 Web Template…สร้างเว็บเหมือนเสกได้ 66 3.2 e-Marketplace…ได้ทั้งเว็บได้ทั้งลูกค้า 74 3.3 CMS…โปรแกรมแต่งเว็บตามจินตนาการ 80 บทที่ 4 แต่งเว็บขั้นเทพในยุคเว็บ 3.0 86 4.1 โดเมนเนม…ตั้งดีเว็บก็ดัง 89 4.2 บันไดหกขั้นปั้นเว็บให้น่าซื้อ 93 4.3 ล้วงลับปรับเว็บให้เป็นมิตรกับเสิร์ชเอนจิน 99 Appendix WEBSITE CHECKUP 60 SECONDS! 107 เกี่ยวกับ ETDA 112 Contents
‘อินเทอร์เน็ต’ คือทุกสิ่ง...เป็นทุกอย่างในชีวิต ของมวลมนุษยชาติ Internet of Things วีรชัย ประยูรพฤกษ์ หนุ่มสมาร์ต ผู้มุ่งมั่นพัฒนา โครงสร้างพื้นฐานสารสนเทศของประเทศ @ ETDA
01 เวิลด์ไวด์เว็บ... ใยแมงมุม มัดใจคนทั้งโลก
WebsiteD.I.Y. 10 เวิลด์ไวด์เว็บ(WorldWideWeb)นิยมเรียกสั้นๆว่า เว็บหรือWWWเป็นบริการที่ช่วยให้เราสามารถค้นหาข้อมูล ต่างๆ ที่ต้องการได้อย่างรวดเร็ว และด้วยการที่มี อุปกรณ์อันทันสมัยเกิดขึ้นตลอดเวลา อย่างเช่น สมาร์ตโฟนและแท็บเล็ต ก็ยิ่งท�ำให้อินเทอร์เน็ต และเวิลด์ไวด์เว็บถูก ใช้งานอย่างต่อเนื่อง เรียกได้ว่าเป็นส่วนหนึ่ง ของคนในยุคสมัยนี้ไป เรียบร้อยแล้ว ดังจะเห็นได้ จากการที่องค์กรต่างๆทั้งภาครัฐและภาคเอกชนก็มีการสร้าง และพัฒนาเว็บของตนเองเพื่อใช้เป็นช่องทางสื่อสารระหว่าง องค์กรและลูกค้าตัวอย่างเช่นโรงภาพยนตร์ก็มีเว็บไซต์ (เช่น www.majorcineplex.com) เพื่อให้ลูกค้า จองตั๋วชมภาพยนตร์ได้โดยไม่จ�ำเป็นต้องมา ต่อแถวซื้อให้เสียเวลา หรือห้างสรรพสินค้าไม่ว่า จะขนาดเล็กหรือใหญ่(เช่นwww.central.co.th) ก็มีเว็บไซต์เพื่อให้ลูกค้าใช้เป็นช่องทางสั่งสินค้า ออนไลน์ได้ เป็นต้น 1.1 }IoT~ Internet of Things 7.2 * อ้างอิงข้อมูลจากรายงานผลการส�ำรวจพฤติกรรมการใช้อินเทอร์เน็ตใน ประเทศไทย พ.ศ. 2557 โดยส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การ มหาชน) หรือ สพธอ.
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 11 ถ้าหากจะย้อนกลับไปเมื่อหลาย สิบปีที่แล้ว เวิลด์ไวด์เว็บถือก�ำเนิดขึ้น โดยนักวิทยาศาสตร์จากห้องทดลองของ สถาบันเซิร์น (CERN) ซึ่งเป็นห้องปฏิบัติการ ฟิสิกส์แห่งยุโรปในนครเจนีวา ประเทศ สวิตเซอร์แลนด์ นามว่า ทิม เบิร์นเนอร์ส-ลี (Tim Berners-Lee) ได้สร้างระบบการสื่อสาร ข้อมูลผ่านเครือข่ายคอมพิวเตอร์ในรูปแบบใหม่ ที่เรียกว่าไฮเพอร์เท็กซ์(Hypertext)ซึ่งผลที่ได้ ท�ำให้มีการสร้างข้อตกลงในการสื่อสาร หรือ ที่เรียกว่า โพรโทคอล (Protocol) แบบ HTTP (Hypertext Transport Protocol) ขึ้น เพื่อ ใช้ในการส่งข้อมูลสารสนเทศต่างๆ โดยจะถูก จัดอยู่ในรูปแบบใหม่ที่เรียกว่าHTML(HyperText Markup Language) ซึ่งการสื่อสารและ การสืบค้นสารสนเทศในรูปแบบใหม่นี้เอง ท�ำให้คนทั่วโลกสามารถติดต่อสื่อสารกันได้ อย่างรวดเร็วในทุกรูปแบบไม่ว่าจะเป็นข้อความ ภาพ และเสียง
WebsiteD.I.Y. 12 รูปภาพจาก www.unleashthephones.com ดังเช่น ไมโครซอฟท์ (Microsoft) เจ้าพ่อยักษ์ใหญ่ด้านการผลิต และพัฒนาซอฟต์แวร์รายใหญ่ของโลกก็เปิดตัวโฆษณาเพื่องานมหกรรม Super Bowl ซึ่งเป็นการแข่งขันกีฬาอเมริกันฟุตบอล ตั้งชื่อโฆษณาว่า Microsoft 2014 Super Bowl Commercial: Empowering โดยใช้ ประสบการณ์ของผู้พิการเป็นเครื่องมือบอกให้โลกเห็นถึงประโยชน์ของ เทคโนโลยีซึ่งสามารถให้ความหวังเต็มเปี่ยมแก่มวลมนุษยชาติได้โฆษณา ชิ้นนี้ถือเป็นกรณีศึกษาที่สามารถบอกถึงแนวโน้มเปลี่ยนแปลงไอซีทีของ โลกได้เป็นอย่างดี กลับมาที่เมืองไทยบ้านเรา จากตัวเลขการใช้งานอินเทอร์เน็ต ล่าสุดในรายงานผลการส�ำรวจพฤติกรรมการใช้อินเทอร์เน็ตใน ประเทศไทย พ.ศ. 2557 โดย ETDA พบว่า ปริมาณการใช้อินเทอร์เน็ต มีแนวโน้มเพิ่มขึ้นทุกปี ล่าสุดคนไทยใช้เวลาอยู่กับอินเทอร์เน็ตเฉลี่ย 50.4 ชั่วโมงต่อสัปดาห์ หรือ 7.2 ชั่วโมงต่อวัน เทียบกับในทศวรรษก่อน ที่ใช้เพียง 2.6 ชั่วโมงเท่านั้น โดยนิยมท่องอินเทอร์เน็ตเพื่อรับส่งอีเมล มากที่สุดรองลงมาคือการค้นหาข้อมูลต่างๆสิ่งนี้คงท�ำให้เรามองเห็นการ เติบโตของเทคโนโลยีอินเทอร์เน็ตในประเทศไทยที่จะเพิ่มมากขึ้นเรื่อยๆ เช่นเดียวกับการเปลี่ยนแปลงของโลก
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 13 พฤติกรรมการใช้อินเทอร์เน็ตของไทย พ.ศ. 2557 < 10 ชม. 10-20.9 ชม. 21-41.9 ชม. 42-76.9 ชม. 77-104.9 ชม. 105 ชม. ขึ้นไป ภำพ 9 ร้อยละของผู้ใช้อินเทอร์เน็ตฯ จำแนกตำมจำนวนชั่วโมงกำรใช้ อินเทอร์เน็ตต่อสัปดำห์ ปี 2556 – 2557 ในการเปรียบเทียบจานวนชั่วโมงการใช้งานอินเทอร์เน็ตในแต่ละกลุ่ม ของผู้ใช้อินเทอร์เน็ตฯ ดังแสดงในภาพ 10 พบว่า เพศชาย มีสัดส่วนการใช้ อินเทอร์เน็ตมากกว่าเพศหญิง โดยเพศชายใช้อินเทอร์เน็ตเฉลี่ย 51.8 ชั่วโมงต่อ สัปดาห์ ในขณะที่เพศหญิงใช้อินเทอร์เน็ตเฉลี่ย 49.0 ชั่วโมงต่อสัปดาห์ และใน 35.7 25.8 10.7 11.5 7.3 9.0 13.7 19.3 16.7 20.2 16.1 13.9 0.0 5.0 10.0 15.0 20.0 25.0 30.0 35.0 40.0 < 10 ชม. 10 - 20.9 ชม.21 - 41.9 ชม.42 - 76.9 ชม.77 - 104.9 ชม.105 ชม.ขึ้นไป 2556 2557 ร้อยละ 49 ภำพ 14 ร้อยละของผู้ใช้อินเทอร์เน็ตฯ เปรียบเทียบตำมกิจกรรมกำรใช้งำน ผ่ำนอินเทอร์เน็ตระหว่ำงอุปกรณ์เคลื่อนที่กับคอมพิวเตอร์ หมายเหตุ: ผู้ตอบสามารถเลือกตอบกิจกรรมฯ และอุปกรณ์ฯ ได้มากกว่า 1 ข้อ จะสังเกตเห็นว่ากิจกรรมที่เกี่ยวข้องกับการทาธุรกรรมทางการเงิน ได้แก่ การทาธุรกรรมการเงินออนไลน์, การซื้อ/ขายสินค้าและบริการ, การจอง ตั๋ว/ซื้อตั๋วโดยสารออนไลน์ ยังคงได้รับความนิยมในการดาเนินการผ่าน คอมพิวเตอร์สูงกว่าอุปกรณ์เคลื่อนที่ ทั้งนี้คาดว่าน่าจะมาจากหลายสาเหตุ เช่น 6.9 37.3 27.7 46.9 40.5 56.6 55.4 82.6 30.4 73.3 63.8 59.6 5.4 23.8 24.0 29.7 33.8 37.0 44.7 45.2 46.3 56.5 57.6 78.2 0.0 20.0 40.0 60.0 80.0 100.0 อื่นๆ จอง/ซื้อตั๋วโดยสำรออนไลน์ ดูข้อมูลข่ำวสำรเกี่ยวกับหุ้น ซื้อ/ขำยสินค้ำและบริกำรอื่นๆ ทำธุรกรรมทำงกำรเงิน ดำวน์โหลดซอฟต์แวร์/เพลง/ ละคร/เกม ดูโทรทัศน์/ดูภำพยนตร์/ฟังวิทยุ ออนไลน์ รับ-ส่งอีเมล เล่นเกมออนไลน์ ค้นหำข้อมูล อ่ำน/ติดตำมข่ำวสำร/อ่ำน หนังสืออิเล็กทรอนิกส์ กำรใช้งำนเครือข่ำยสังคม ออนไลน์ อุปกรณ์เคลื่อนที่ คอมพิวเตอร์ ร้อยละ 49
WebsiteD.I.Y. 14 Internet of Things : IoT (อ้างอิงข้อมูลจาก www.ams-ix.net) ด้วยพัฒนาการของเวิลด์ไวด์เว็บที่มีอย่างต่อเนื่อง ที่สามารถ เพิ่มขีดความสามารถด้านการน�ำเสนอข้อมูลข่าวสารผ่านเครือข่าย อินเทอร์เน็ตมายังจอคอมพิวเตอร์ของผู้ใช้ ท�ำให้การสื่อสารบน อินเทอร์เน็ตมีประสิทธิภาพ ด้วยภาพและเสียงที่มีสีสันชวนติดตาม มีการแสดงข้อมูลสื่อประสมที่สามารถโต้ตอบกับผู้ใช้งานได้(Interactive Multimedia) ท�ำให้ปัจจุบัน “เวิลด์ไวด์เว็บ” กลายเป็นเครื่องมือหลัก ในการติดต่อสื่อสารและน�ำเสนอผ่านเครือข่ายอินเทอร์เน็ตที่นิยม ใช้กันอย่างแพร่หลายทั่วโลก จนมีส�ำนวนที่นิยมพูดกันว่า“Internet of Things : IoT” คือ อินเทอร์เน็ตจะครอบคลุมทุกสิ่งทุกอย่างในชีวิตของ มวลมนุษยชาตินั่นเอง สรุปประโยชน์ ของอินเทอร์เน็ต
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 15 1. ด้านการศึกษา บริการหนึ่งบนอินเทอร์เน็ตที่ส�ำคัญคือ การค้นคว้าหาข้อมูลต่างๆ ซึ่งมีเว็บไซต์ที่ให้ บริการค้นหาข้อมูลที่ผู้ใช้ต้องการมากมาย เช่น www.google.com ดังนั้น นักเรียน นักศึกษา และบุคคลทั่วไป สามารถใช้ประโยชน์จากการ ค้นหาข้อมูลนี้เพื่อใช้ในการค้นคว้าข้อมูล นอกห้องเรียน ซึ่งถือได้ว่าอินเทอร์เน็ตเป็น แหล่งข้อมูลขนาดใหญ่ที่สุดส�ำหรับค้นคว้าเพื่อ การศึกษาและวิจัยเลยทีเดียว 2. ด้านการพาณิชย์ หลายคนคงมีประสบการณ์กับการ “ช้อปปิ้ง ออนไลน์” หรือ e-Commerce ซึ่งการซื้อขาย สินค้าผ่านอินเทอร์เน็ตถือเป็นตัวอย่างประโยชน์ ของอินเทอร์เน็ตในเชิงพาณิชย์ที่ชัดเจนที่สุด เราสามารถสั่งสินค้าออนไลน์โดยไม่ต้องเดินทาง ไปที่ร้านค้าจริง โดยกระบวนการสั่งซื้อและ ช�ำระเงินสามารถท�ำผ่านเว็บไซต์ได้ทุกที่ทุกเวลา 3. ด้านความบันเทิง สื่อด้านความบันเทิงไม่ว่าจะเป็นเพลงวิดีโอหรือ เกม สามารถเข้าถึงได้ผ่านช่องทางอินเทอร์เน็ต เช่น เราสามารถดูทีวีออนไลน์ หรือชมการ ถ่ายทอดสดต่างๆ ผ่านเว็บไซต์ รวมทั้ง เกมออนไลน์ที่มีอยู่มากมายบนอินเทอร์เน็ต
WebsiteD.I.Y. 16 เวิลด์ไวด์เว็บนั้นมีการท�ำงานอยู่สองฝั่ง ได้แก่ 1) เครื่อง คอมพิวเตอร์ของผู้ใช้(Client)และ2)เครื่องคอมพิวเตอร์แม่ข่ายหรือ ที่มักเรียกกันว่าเครื่องเซิร์ฟเวอร์(Server)โดยในฝั่งเครื่องคอมพิวเตอร์ ของผู้ใช้นั้นจะเป็นรูปแบบใดก็ได้ ไม่ว่าจะเป็นคอมพิวเตอร์ตั้งโต๊ะ (Desktop)คอมพิวเตอร์แบบพกพา(Notebook/Laptop)สมาร์ตโฟน (Smartphone) รวมทั้งแท็บเล็ต (Tablet) ขอเพียงแค่คอมพิวเตอร์ เหล่านั้นสามารถเชื่อมต่อกับอินเทอร์เน็ตและติดตั้งโปรแกรม เพื่อใช้งานเว็บไซต์ หรือที่เรียกว่าเว็บเบราว์เซอร์ (Web Browser) ก็เพียงพอแล้วแต่ส�ำหรับฝั่งเครื่องเซิร์ฟเวอร์นั้นจะเป็นคอมพิวเตอร์ที่ ท�ำหน้าที่ให้ข้อมูลตามที่เครื่องของผู้ใช้ร้องขอซึ่งต้องท�ำงานตลอดเวลา ท�ำให้เครื่องคอมพิวเตอร์ที่ใช้เป็นคอมพิวเตอร์แม่ข่ายต้องเป็นเครื่อง ที่มีประสิทธิภาพพอสมควร และแน่นอนว่าจะต้องเชื่อมต่ออยู่กับ อินเทอร์เน็ตเช่นกัน รวมทั้งยังต้องติดตั้ง โปรแกรมเฉพาะเพื่อให้คอมพิวเตอร์ เครื่องนั้นท�ำหน้าที่เป็นเครื่อง เซิร์ฟเวอร์ได้อีกด้วย 1.2 กลไก ของเวิลด์ไวด์เว็บ
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 17 วิธีการท�ำงานของระบบเวิลด์ไวด์เว็บ วิธีการท�ำงานของ World Wide Web www.abc.com ISP 1 2 3 1)ผู้ใช้ท�ำการป้อนที่อยู่เว็บไซต์หรือURL(เช่นwww.abc.com) ที่โปรแกรมเว็บเบราว์เซอร์ (เช่น Internet Explorer, Google Chrome หรือ Mozilla Firefox) 2) หลังจากนั้นเครื่องคอมพิวเตอร์ของผู้ใช้ก็จะท�ำงานร่วมกับ ระบบอินเทอร์เน็ตเพื่อค้นหาว่าเครื่องเซิร์ฟเวอร์ของเว็บไซต์ที่ต้องการนั้น ตั้งอยู่ที่ใดในโลกใบนี้ เมื่อค้นหาได้แล้วก็จะท�ำการร้องขอหน้าเว็บไปยัง เครื่องเซิร์ฟเวอร์เครื่องนั้น 3)เครื่องเซิร์ฟเวอร์เมื่อได้รับค�ำร้องขอแล้วก็จะส่งข้อมูลหน้าเว็บ ที่ต้องการกลับไปยังโปรแกรมเว็บเบราว์เซอร์ของเครื่องผู้ใช้เพื่อท�ำการ แสดงผลออกมา
WebsiteD.I.Y. 18 ตัวอย่างเว็บไซต์แบบ Static รู้จักกับ รูปแบบของ เว็บไซต์ เว็บไซต์ที่เราใช้งานกันในปัจจุบันนี้ สามารถแบ่งเป็น 2 รูปแบบหลักๆ ด้วยกันคือ 1) Static Web และ 2) Dynamic Web ซึ่งมีจุดเด่นและข้อจ�ำกัดที่แตกต่างกัน ดังนี้ 1) เว็บไซต์ที่ท�ำหน้าที่แสดงข้อมูลเพียงอย่างเดียว (StaticWeb)เป็นเว็บไซต์เสมือนกระดานประกาศข่าวสารธรรมดา ผู้ใช้สามารถรับรู้ข่าวสารได้เพียงอย่างเดียวโดยไม่สามารถโต้ตอบ กับเว็บได้ เช่น เว็บไซต์ประกาศขายสินค้า (เช่น www.olx.co.th) ที่ผู้ซื้อจ�ำเป็นต้องติดต่อกับผู้ขายเอง เว็บไซต์จึงเป็นเพียงช่องทาง การประกาศขายสินค้าเท่านั้น
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 19 ตัวอย่างเว็บไซต์แบบ Dynamic 2) เว็บไซต์ที่ท�ำหน้าที่เสมือนโปรแกรม (Web Application หรือ Dynamic Web) เป็นเว็บที่ผู้ใช้สามารถ โต้ตอบกับเว็บได้โดยผู้ใช้อาจจะกรอกข้อมูลบางอย่างแล้วเว็บ ก็ท�ำการประมวลผลข้อมูลนั้นๆ เช่น การซื้อขายแบบมีตะกร้า สินค้าที่สามารถคลิกสั่งซื้อผ่านเว็บไซต์และช�ำระเงินออนไลน์ (เช่น www.tohome.com) เว็บไซต์รูปแบบนี้จะมีความ หลากหลายและสามารถโต้ตอบกับผู้ใช้ได้อย่างไรก็ตามผู้ที่ต้องการ พัฒนาเว็บลักษณะนี้ต้องมีความรู้และประสบการณ์เกี่ยวกับ ระบบคอมพิวเตอร์และอินเทอร์เน็ตพอสมควร เนื่องจากมี ขั้นตอนการจัดการและต้องดูแลมากกว่า Static Web
WebsiteD.I.Y. 20 ตัวอย่างอุปกรณ์คอมพิวเตอร์ PC / Mobile / Tablet จากหัวข้อที่ผ่านมาเราได้ท�ำความรู้จักกับวิธีการ ท�ำงานของเว็บไซต์ ซึ่งในการท�ำงานดังกล่าวต้องอาศัย อุปกรณ์ Software และ Hardware ที่จ�ำเป็นแบ่งเป็น 2 ด้านคือ ผู้ใช้งาน และผู้พัฒนาเว็บ ดังนี้ 1) Software และ Hardware ของผู้ใช้ คอมพิวเตอร์:เครื่องคอมพิวเตอร์ส�ำหรับผู้ใช้ หรือในเชิงเทคนิคจะเรียกกันว่าเครื่อง Client นั้น เป็น คอมพิวเตอร์ทั่วไปที่สามารถเชื่อมต่ออยู่กับอินเทอร์เน็ต และมีโปรแกรมเว็บเบราว์เซอร์เพื่อให้ผู้ใช้สามารถใช้งาน ระบบเว็บได้ 1.3 อุปกรณ์พร้อม... เว็บก็พร้อม!
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 21 โปรแกรมเว็บเบราว์เซอร์:คือโปรแกรม คอมพิวเตอรที่ผูใช้สามารถใช้งานเพื่อเรียกหน้าเว็บ ขึ้นมาดูได้ ตัวอย่างของโปรแกรมเว็บเบราว์เซอร์ เช่น Internet Explorer และ Google Chrome โปรแกรมเสริม : หรือ Plug-in เป็น โปรแกรมที่ติดตั้งเพิ่มเติมเพื่อเพิ่มประสิทธิภาพของ เว็บเบราว์เซอร์ให้สามารถแสดงผลหรือเปิดแฟ้ม ข้อมูลรูปแบบอื่นๆ นอกเหนือจากแฟ้ม HTML ได้ เช่นการติดตั้งFlashPlug-inเพื่อเปิดแฟ้มข้อมูลที่ สร้างจากโปรแกรมAdobeFlashให้สามารถแสดง เว็บแบบภาพเคลื่อนไหวได้ (Animation) ตัวอย่างโปรแกรมเสริม Plug-in ตัวอย่างโปรแกรมเว็บเบราว์เซอร์
WebsiteD.I.Y. 22 2) Software และ Hardware ของผู้พัฒนาเว็บ คอมพิวเตอร์แม่ข่าย:หรือเครื่องเซิร์ฟเวอร์เป็นคอมพิวเตอร์ ที่ท�ำหน้าที่ให้ข้อมูลตามที่ผู้ใช้ร้องขอ ไม่ว่าจะเป็นหน้าเว็บ รูปภาพ เสียง เพลง หรือวิดีโอ โดยปกติแล้วการเข้าถึงเครื่องคอมพิวเตอร์แม่ข่ายนั้น จะต้องมีการระบุที่อยู่เว็บ (URL) ซึ่งอยู่ในรูปแบบ www.aaa.bbb โดย wwwหมายถึงเวิลด์ไวด์เว็บaaaคือชื่อเว็บไซต์และbbbคือโดเมนของ เว็บไซต์ ซึ่งที่อยู่เว็บไซต์จะต้องถูกเปลี่ยนเป็นที่อยู่ไอพี (IP Address) ซึ่ง เป็นหมายเลขที่อยู่ของเครื่องเซิร์ฟเวอร์โดยเครื่องDNS(DomainName Server) ซึ่งเป็นเครื่องเซิร์ฟเวอร์อีกเครื่องหนึ่งที่ท�ำหน้าที่เปลี่ยน ที่อยู่เว็บเป็นที่อยู่ไอพีนั่นคือหากผู้พัฒนาเว็บสามารถติดตั้ง เครื่องเซิร์ฟเวอร์ของตนเองเพื่อให้บริการเว็บไซต์ของ ตนเอง และมีที่อยู่เว็บรวมทั้งที่อยู่ไอพีที่แน่นอน อีกทั้งสามารถติดตั้งเครื่องเซิร์ฟเวอร์เพื่อท�ำหน้าที่ เป็นDNSได้แล้วก็จะสามารถให้บริการเว็บไซต์ของตน ได้ทันที แต่ในทางปฏิบัติ การติดตั้งระบบเหล่านี้ มีขั้นตอนที่ยุ่งยากและต้องอาศัยใช้ความรู้เฉพาะทาง ดังนั้น จึงมีผู้ให้บริการเครื่องเซิร์ฟเวอร์ส�ำหรับการให้ บริการเว็บโดยเฉพาะ หรือที่เรียกว่า Web Hosting นั่นเอง ท�ำให้ผู้พัฒนาเว็บไซต์ไม่จ�ำเป็นต้องติดตั้งระบบต่างๆเหล่านี้เองเพียงแค่ ท�ำการสร้างเว็บและน�ำไปวางไว้ที่เครื่องเซิร์ฟเวอร์ของ Web Hosting เหล่านั้นแทน ช่องทางการสื่อสาร:คือสื่อกลางที่ช่วยให้เครื่องคอมพิวเตอร์ ของผู้ใช้ติดต่อไปผ่านเครือข่ายอินเทอร์เน็ตไปยังเครื่องเซิร์ฟเวอร์ได้ ตัวอย่างของช่องทางการสื่อสารที่เราคุ้นเคยกันก็คือ WiFi และระบบ 3G ที่มีให้บริการอยู่ในปัจจุบันอย่างทั่วถึง ช่องทางการสื่อสารรูปแบบนี้ เป็นแบบไร้สายคือเราสามารถใช้งานอินเทอร์เน็ตได้ทุกที่ทุกเวลาแต่ก็ยังมี ช่องทางการสื่อสารอีกรูปแบบหนึ่งคือ รูปแบบที่พึ่งพาสายเคเบิลต่างๆ ซึ่งจะมีความเร็วกว่าการสื่อสารแบบไร้สาย
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 23 ระบบปฏิบัติการส�ำหรับเครื่องเซิร์ฟเวอร์ : เมื่อกล่าวถึงเรื่อง ระบบปฏิบัติการ (Operation System : OS) ก็คือ โปรแกรมที่ต้องติดตั้ง ลงบนคอมพิวเตอร์ทุกเครื่องเสมือนเป็นโปรแกรมหลักที่คอยดูแลการท�ำงาน ของคอมพิวเตอร์เครื่องนั้นๆ ในแง่ของเครื่องเซิร์ฟเวอร์ก็เช่นเดียวกัน ก็ต้อง มีระบบปฏิบัติการที่จ�ำเพาะเนื่องจากต้องมีความสามารถในการจัดการ ที่ซับซ้อนกว่าคอมพิวเตอร์ของผู้ใช้งาน โดยในทางปฏิบัติ หากผู้พัฒนาเว็บ เลือกใช้บริการ Web Hosting แล้ว ก็ไม่จ�ำเป็นต้องติดตั้งระบบปฏิบัติการ ส�ำหรับเครื่องเซิร์ฟเวอร์ด้วยตนเองแต่อย่างใด โปรแกรมที่ใช้พัฒนาเว็บ : ผู้พัฒนาเว็บสามารถพัฒนาเว็บ โดยโปรแกรมใดๆ ก็ได้ที่สามารถพิมพ์ข้อความตัวอักษรได้ ทั้งนี้ การพัฒนา เว็บไซต์ต้องสร้างขึ้นด้วยโครงสร้างภาษาพิเศษที่มีไว้เฉพาะการท�ำเว็บไซต์ ที่เรียกว่า HTML อย่างไรก็ตาม มีผู้พัฒนาบางโปรแกรมที่มีความสามารถ ช่วยเหลือในการเขียนแฟ้มข้อมูลเว็บในรูปแบบ HTML ได้อย่างเช่น Adobe Dreamweaverนอกจากนี้ยังมีโปรแกรมรูปแบบอื่นๆที่ช่วยให้ผู้พัฒนาเว็บ สามารถสร้างเว็บของตนเองได้โดยไม่จ�ำเป็นต้องเขียนโปรแกรมเลย เช่น โปรแกรมในรูปแบบ CMS (Content Management System) ที่เพียง ผู้พัฒนาเว็บท�ำการติดตั้ง CMS บนเครื่องคอมพิวเตอร์เซิร์ฟเวอร์และ ปรับแต่งรูปแบบการแสดงผลตามที่ต้องการ ก็จะสามารถให้บริการเว็บไซต์ ได้โดยง่าย ตัวอย่างโปรแกรมที่ใช้พัฒนาเว็บในรูปแบบ CMS
WebsiteD.I.Y. 24 จะเห็นว่าในฝั่งของผู้ใช้งานนั้นHardwareและSoftwareเป็น สิ่งที่ผู้ใช้ทั่วไปส่วนใหญ่มีอยู่ในมืออยู่แล้วแต่ส�ำหรับฝั่งผู้พัฒนาเว็บไซต์นั้น อาจต้องการเครื่องมือพิเศษบางอย่าง แต่เนื่องด้วยปัจจุบันมีผู้ให้บริการ Web Hosting เกิดขึ้นในท้องตลาดมากมาย รวมทั้งยังมีโปรแกรมที่ช่วย ในการพัฒนาเว็บไซต์ที่ง่ายมากขึ้นท�ำให้การพัฒนาเว็บไซต์ยุคนี้ไม่ใช่เรื่อง ยุ่งยากอีกต่อไป จากหัวข้อต่างๆก่อนหน้านี้จะเห็นว่าระบบเวิลด์ไวด์เว็บนั้น ประกอบด้วย 2 ส่วนหลักๆ คือ เครื่องคอมพิวเตอร์แม่ข่าย และ เครื่องคอมพิวเตอร์ลูกข่าย โดยผู้พัฒนาเว็บไซต์จ�ำเป็นต้องสร้าง แฟ้มข้อมูลเว็บและน�ำไปบันทึกไว้ยังเครื่องคอมพิวเตอร์แม่ข่าย รวมทั้งต้องท�ำการลงทะเบียนที่อยู่เว็บไซต์เพื่อเป็นช่องทางให้ ผู้ใช้งานทั่วไปสามารถเข้าถึงเว็บไซต์ของตนเองได้ ส�ำหรับหัวข้อนี้ จะได้อธิบายถึงขั้นตอนการพัฒนาเว็บไซต์โดยย่อ เพื่อให้เข้าใจถึง กระบวนการสร้างเว็บไซต์ในภาพรวมทั้งหมดส่วนในรายละเอียดนั้น สามารถศึกษาได้ในบทถัดไป 1.4 ขบวนการ พัฒนาเว็บไซต์
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 25 1) ก�ำหนดวัตถุประสงค์ของเว็บไซต์ ถือเป็นขั้นตอนส�ำคัญของ การพัฒนาเว็บ เพราะหากสามารถก�ำหนดวัตถุประสงค์ได้อย่างชัดเจน ก็จะน�ำมาซึ่งการก�ำหนดคุณสมบัติของเว็บไซต์รวมทั้งรูปแบบและเนื้อหา ภายในเว็บที่สอดคล้องกับกลุ่มเป้าหมาย 2) รวบรวมข้อมูลเพื่อน�ำเสนอบนเว็บไซต์ เช่น รูปภาพและ รายละเอียดสินค้า ข้อมูลร้านค้า ข้อมูลการติดต่อ รวมทั้งแผนที่ร้านค้า 3) ก�ำหนดรูปแบบเว็บไซต์ โดยผู้พัฒนาเว็บควรออกแบบ การแสดงผลให้เหมาะสมกับเนื้อหาและกลุ่มเป้าหมายซึ่งเนื้อหาในบทต่อไป จะได้แนะน�ำถึงเทคนิคการออกแบบเว็บไซต์ที่ดีส�ำหรับการค้าขายออนไลน์ โดยเฉพาะ 1. ก�ำหนดวัตถุประสงค์ 2. รวบรวมข้อมูล 3. ก�ำหนดรูปแบบเว็บไซต์ 4. สร้างแฟ้มข้อมูล 5. บันทึกข้อมูลเครื่องแม่ข่าย ขั้นตอนการพัฒนาเว็บไซต์
WebsiteD.I.Y. 26 4) สร้างแฟ้มข้อมูล โดยหากต้องการพัฒนาเว็บในรูปแบบ Static ต้องสร้างแฟ้มข้อมูลแบบ HTML แต่หากพัฒนาเว็บในรูปแบบ Dynamic ต้องพัฒนาแฟ้มข้อมูลที่มีการเขียนโปรแกรมเพิ่มเติม (เช่น แฟ้มข้อมูล PHP) โดยขั้นตอนนี้อาจเป็นสิ่งยุ่งยากที่สุดในการพัฒนา เว็บไซต์ โดยเฉพาะผู้ไม่มีความรู้ด้านภาษา HTML หรือการเขียน โปรแกรมคอมพิวเตอร์มาก่อน ซึ่งในกรณีนี้สามารถใช้ทางเลือกอื่น ในการพัฒนาเว็บไซต์แทนได้เช่นโปรแกรมประเภทWYSIWYGที่อนุญาต ให้ผู้พัฒนาสามารถพิมพ์ข้อมูลที่ต้องการเผยแพร่ และสามารถจัด รูปแบบการแสดงผลต่างๆได้โดยไม่จ�ำเป็นต้องเรียนรู้ภาษาHTMLเลย หรืออาจเลือกใช้โปรแกรมประเภท CMS ที่ผู้พัฒนาเว็บสามารถติดตั้ง เว็บไซต์ได้โดยใช้เวลาไม่นาน โดยเนื้อหาในบทที่ 3 จะได้แนะน�ำถึงวิธี พัฒนาเว็บไซต์ที่ไม่จ�ำเป็นต้องมีความรู้เกี่ยวกับภาษา HTML 5) บันทึกข้อมูลเว็บยังเครื่องแม่ข่าย ขั้นตอนสุดท้ายคือ การน�ำแฟ้มข้อมูลเว็บ (HTML, PHP หรือแฟ้มอื่นๆ) ไปบันทึกไว้ที่ เครื่องคอมพิวเตอร์แม่ข่าย ซึ่งดังที่ได้กล่าวไปแล้วว่าการติดตั้งเครื่อง คอมพิวเตอร์แม่ข่ายเองนั้นมีขั้นตอนที่ยุ่งยาก ดังนั้น ในทางปฏิบัติ จึงควรใช้บริการเครื่องคอมพิวเตอร์แม่ข่าย หรือ Web Hosting ซึ่งจะมีขั้นตอนที่ง่ายกว่า โดยอาจแบ่งการให้บริการ Web Hosting เป็น 2 รูปแบบ ได้แก่
บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 27 บริการฟรีWebHostingเป็นบริการที่ให้ผู้พัฒนาเว็บสามารถ ให้บริการเว็บไซต์ของตนเองได้โดยไม่มีค่าใช้จ่าย แต่ก็อาจมีข้อจ�ำกัดคือ อาจไม่สามารถให้บริการเว็บไซต์ด้วยที่อยู่เว็บไซต์ตามที่ตนเองต้องการ แต่ต้องใช้ที่อยู่เว็บไซต์ตามที่ Free Web Hosting นั้นๆ ก�ำหนด รวมทั้ง อาจถูกจ�ำกัดเรื่องเนื้อที่ที่สามารถบันทึกแฟ้มข้อมูล ซึ่งจะส่งผลต่อการ น�ำเสนอเนื้อหาต่างๆ บนเว็บไซต์อีกด้วย Web Hosting แบบมีค่าใช้จ่าย ในกรณีนี้ผู้ให้บริการ Web Hosting จะท�ำการเรียกเก็บค่าบริการจากผู้พัฒนาเว็บตามข้อตกลง ซึ่ง ค่าบริการมักจะขึ้นอยู่กับเนื้อที่ที่สามารถบันทึกแฟ้มข้อมูลเว็บได้ และ ผู้พัฒนาเว็บจะมีอิสระในการจดทะเบียนที่อยู่เว็บของตนเองได้ ดังนั้น ผู้พัฒนาเว็บสามารถตั้งชื่อที่อยู่เว็บไซต์ให้ตรงกับเนื้อหาและการบริการ ของตนเองได้ เมื่อผู้พัฒนาเว็บท�ำการบันทึกแฟ้มข้อมูลเว็บของตนบน Web Hosting ที่เลือกแล้ว รวมทั้งอาจจะจดทะเบียนชื่อเว็บไซต์ตามที่ ต้องการแล้ว เพียงเท่านี้ผู้ใช้งานทั่วไปก็จะสามารถเข้าถึงเว็บไซต์ โดยการอ้างถึงที่อยู่เว็บไซต์ตามที่จดทะเบียน หรือก�ำหนดโดยผู้ให้ บริการ Web Hosting ได้ทันที
มีเว็บไซต์เท่ากับ มีสาขาทั่วโลก... ขายของแบบ 7 วัน 24 ชั่วโมง ลงทุนต�่ำ แต่คุ้มค่าที่สุด! พัทธนันท์ ธรรมจะดี วิศวกรซอฟต์แวร์สาวสวย เชี่ยวชาญด้านเทคโนโลยีสารสนเทศ @ ETDA
02 กลเม็ดปั้นเว็บ สวยและดี
WebsiteD.I.Y. 30 จากการรวบรวมข้อมูลการใช้ไอซีที ของไทยในปี 2013 พบว่า คนไทยกว่า 26 ล้านคน หรือคิดเป็นร้อยละ 40 ของประชากรทั้งหมดสามารถเข้าถึง อินเทอร์เน็ตเรียบร้อยแล้ว แต่ตัวเลข ที่น่าสนใจกว่านั้นก็คือ การเปิดใช้ บริการหมายเลขโทรศัพท์มือถือมีสูงกว่า 93.8ล้านเลขหมายในขณะที่ประชากรไทย มีเพียง 64 ล้านคนเท่านั้น นั่นจึงแสดงให้เห็นว่า “คนไทยบางส่วนใช้โทรศัพท์มือถือมากกว่าคนละ เครื่องกันแล้วนั่นเอง” 2.1 องค์ประกอบ 9 ด้าน... แต่งแต้มสีสันให้เว็บไซต์ ข้อมูลการใช้ไอซีทีของไทยปี 2013 อ้างอิงข้อมูลจาก * กรมการปกครอง (www.dopa.go.th) ** ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (www.nectec.or.th) *** ส�ำนักงาน กสทช. (www.nbtc.go.th)
31 บทที่2กลเม็ดปั้นเว็บสวยและดี จากตัวเลขการใช้ไอซีทีของคนไทยข้างต้น คงพอท�ำให้เจ้าของ ธุรกิจเห็นความส�ำคัญของการมีเว็บไซต์เพื่อใช้เป็นช่องทางการสื่อสารกับ ลูกค้า เพราะเห็นได้ชัดว่าปัจจุบันเว็บไซต์กลายเป็นสื่อที่ได้รับความนิยม มากที่สุดบนอินเทอร์เน็ต เป็นช่องทางที่จะช่วยกระจายข้อมูลข่าวสาร สินค้า/บริการต่างๆ ออกไปในวงกว้างอย่างรวดเร็ว ง่ายดาย แถมยังมี ต้นทุนต�่ำที่สุดอีกด้วย อย่างไรก็ตาม สิ่งที่ผู้ประกอบการควรค�ำนึงถึงในการใช้เว็บไซต์ เพื่อประชาสัมพันธ์ธุรกิจก็คือ “เราต้องออกแบบเว็บไซต์ให้ดึงดูดและ น่าสนใจต่อกลุ่มเป้าหมาย”แม้ว่าจากข้อมูลพฤติกรรมการใช้อินเทอร์เน็ต ปี 2557 ที่รายงานโดย ETDA พบว่า คนไทยใช้อินเทอร์เน็ตมากกว่า 7.2 ชั่วโมงต่อวัน แต่เนื่องจากผู้ใช้สามารถเลือกได้ว่าจะดูเว็บไซต์ใด และไม่เลือกดูเว็บไซต์ใดก็ได้ตามต้องการ จึงท�ำให้ผู้ใช้ที่ไม่มีความอดทน ต่ออุปสรรคและปัญหาที่เกิดจากการออกแบบเว็บไซต์ที่ผิดพลาด หรือ เห็นว่าเว็บที่ก�ำลังชมอยู่นั้นไม่มีประโยชน์ หรือไม่เข้าใจว่าเว็บไซต์นั้นๆ ใช้งานอย่างไร เปลี่ยนไปชมเว็บไซต์อื่นได้ตลอดเวลา
WebsiteD.I.Y. 32 ปัจจุบันมีเว็บไซต์เกิดขึ้นใหม่ทุกวัน ผู้ใช้งานจึงมีทางเลือกมากขึ้น และสามารถเปรียบเทียบคุณภาพของเว็บต่างๆ ได้เอง เว็บที่มีการออกแบบ สวยงามการใช้งานที่ง่ายและสะดวกย่อมได้รับความสนใจมากกว่าเว็บที่ดูสับสน วุ่นวายมีข้อมูลมากมายแต่หาอะไรไม่เจอหรือใช้เวลาในการแสดงผลแต่ละหน้า นานเกินไปปัญหาเหล่านี้ล้วนเป็นผลมาจากการออกแบบเว็บที่ไม่มีคุณภาพทั้งสิ้น ดังนั้น การออกแบบจึงเป็นกระบวนการส�ำคัญในการสร้างเว็บไซต์ให้ประทับใจ ผู้ใช้ ท�ำให้อยากกลับเข้ามาใหม่ โดยองค์ประกอบส�ำคัญของการออกแบบเว็บ ที่ดีนั้นมี ดังนี้
33 บทที่2กลเม็ดปั้นเว็บสวยและดี (1)ความเรียบง่าย:การออกแบบเว็บไซต์ที่ดีควรท�ำให้ผู้เข้าชม สามารถเข้าถึงข้อมูลที่ต้องการได้โดยง่าย เพราะมักจะพบเสมอว่าผู้พัฒนา เว็บต้องการน�ำเสนอข้อมูลต่างๆ มากมายโดยไม่นึกถึงผู้ชม ดังนั้น การจ�ำกัด องค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลักจะท�ำให้เว็บไซต์มีความ เรียบง่ายต่อการใช้งานมากขึ้น กล่าวคือ การสื่อสารข้อมูลเชิงเนื้อหานั้น ควร เลือกสิ่งที่ต้องการน�ำเสนอจริงๆ ในส่วนของภาพกราฟิก สีสัน ตัวอักษรและ ภาพเคลื่อนไหว ก็ควรเลือกให้พอเหมาะ เพราะหากมีมากเกินไปจะรบกวน สายตาและสร้างความร�ำคาญต่อผู้ใช้ได้ ลองเปรียบเทียบเว็บไซต์ในรูปที่ 1 และ 2 จะเห็นได้ว่ารูปที่ 1 มีความเรียบง่ายและน่าใช้งานมากกว่า มีข้อมูล และรูปภาพที่เห็นแล้วเข้าใจง่ายในครั้งแรกที่มองเห็น ในขณะที่เว็บไซต์รูปที่ 2 จะเน้นข้อมูลที่เป็นข้อความเป็นหลัก แม้ว่าเว็บไซต์นี้จะเน้นเรื่องของข้อมูล แต่การเรียบเรียงหรือการจัดวางข้อมูลต่างๆก็สามารถออกแบบให้ดูเรียบง่าย กว่านี้ได้ “ขอให้จดจ�ำไว้ว่า ความเรียบง่ายไม่ได้หมายความว่าไม่มี แต่คือ มีให้พอเหมาะพอควร” เช่น หากต้องการเน้นข้อมูลเป็นแบบข้อความจริงๆ อาจจะท�ำเป็นลิงก์เชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ เพื่อแยกส่วนข้อความ ไปอีกหน้าหนึ่ง ท�ำให้หน้าเว็บดูไม่รกจนเกินไป รูปที่ 1 การออกแบบเว็บไซต์ของ www.apple.com
WebsiteD.I.Y. 34 (2) ความสม�่ำเสมอ : คือ การสร้างความสม�่ำเสมอ ให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอด ทั้งเว็บก็ได้ เพราะถ้าหากว่าแต่ละหน้าของเว็บมีความแตกต่างกัน มากเกินไป อาจท�ำให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่าก�ำลังอยู่ ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์แต่ละหน้า ควรมีรูปแบบ สไตล์ของกราฟิก ตัวอักษร เมนูต่างๆ รวมทั้งระบบ เนวิเกชัน (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอด ทั้งเว็บ ตัวอย่างของความสม�่ำเสมอนี้สามารถทดลองเข้าไปที่เว็บไซต์ www.apple.com ซึ่งจะเห็นได้ว่ามีการออกแบบอย่างสม�่ำเสมอ ในลักษณะเดียวกันทุกหน้าเว็บเพจ รูปที่ 2 การออกแบบเว็บไซต์ของ www.moi.go.th
35 บทที่2กลเม็ดปั้นเว็บสวยและดี (3) ความเป็นเอกลักษณ์ : สิ่งที่เราควรให้ความส�ำคัญเรื่อง การออกแบบเว็บไซต์อีกประการหนึ่งก็คือ ตัวตนของธุรกิจ หรือ Corporate Identity (คอร์เปอเรท ไอเดนติตี้) เนื่องจากเว็บไซต์เป็นสื่อที่สามารถสะท้อนถึง เอกลักษณ์ของธุรกิจต่อผู้ใช้งานเว็บได้ ดังนั้น การเลือกใช้ตัวอักษร ชุดสี รูปภาพ หรือกราฟิกต่างๆ ล้วนส่งผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ในธุรกิจธนาคารที่ตัวตนธุรกิจคือการแสดงถึงความน่าเชื่อถือ หากออกแบบ เว็บไซต์โดยเลือกใช้สีสันฉูดฉาดและมีภาพกราฟิกมากมาย อาจท�ำให้ผู้ชมคิดว่า เป็นเว็บไซต์สวนสนุกซึ่งย่อมส่งผลต่อความน่าเชื่อถือของธุรกิจได้ในที่สุดตัวอย่าง เว็บไซต์ของจุฬาลงกรณ์มหาวิทยาลัย (www.chula.ac.th) ซึ่งทุกคนทราบดีว่า สีประจ�ำมหาวิทยาลัยคือสีชมพู เว็บไซต์นี้ก็เลือกใช้โทนสีชมพูเพื่อให้เป็น เอกลักษณ์และตรงกับสัญลักษณ์ขององค์กร หน้าหลัก (Homepage) ตัวอย่างการออกแบบเว็บไซต์ที่มีความสม�่ำเสมอของ www.apple.com หน้าสินค้า (Product)
WebsiteD.I.Y. 36 (4) เนื้อหา : เนื้อหาบนเว็บไซต์หรือ ที่นิยมเรียกกันว่า Content ถือเป็นสิ่งส�ำคัญ ที่สุดของเว็บไซต์ เนื้อหาที่น�ำเสนอบนเว็บไซต์ ต้องสมบูรณ์และควรปรับปรุงให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ตรงกับ กลุ่มเป้าหมายที่ส�ำคัญคือ ควรเป็นข้อมูลที่สดใหม่ ไม่ซ�้ำใคร เพราะเนื้อหาเหล่านี้จะถือเป็นจุดขาย ที่สามารถดึงดูดผู้ใช้ให้มาเข้าเยี่ยมชมเว็บ อย่างสม�่ำเสมอ เช่น www.lazada.co.th เว็บไซต์ ขายสินค้าออนไลน์ ที่มีการจัดโปรโมชันลดราคา สินค้าตลอดเวลา ท�ำให้ผู้เยี่ยมชมต้องหมั่นเข้าชม เพื่อซื้อสินค้าในราคาพิเศษ ตัวอย่างการออกแบบเว็บไซต์ที่มีความเป็นเอกลักษณ์ของ www.chula.ac.th ตัวอย่างการออกแบบเนื้อหาเว็บไซต์ของ www.lazada.co.th
37 บทที่2กลเม็ดปั้นเว็บสวยและดี (5) ความง่ายของเมนูต่างๆ : เป็นส่วนประกอบที่มีความส�ำคัญ ต่อเว็บไซต์มากเช่นกัน เปรียบเสมือนป้ายบอกทางที่ช่วยไม่ให้เกิดความสับสน ระหว่างการเยี่ยมชมเว็บดังนั้นการออกแบบระบบเนวิเกชัน (Navigation) และ เมนูต่างๆ จึงควรให้เข้าใจง่าย ใช้งานได้สะดวกถ้ามีการใช้กราฟิกก็ควรเป็นภาพ ที่สื่อความหมายรวมทั้งต�ำแหน่งเนวิเกชันก็ควรจัดวางให้สม�่ำเสมอเช่นอยู่ต�ำแหน่ง บนสุดของทุกหน้า เป็นต้น ซึ่งถ้าจะให้ดี เมื่อมีเนวิเกชันที่เป็นกราฟิกก็ควรเพิ่ม ระบบเนวิเกชันที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่ออ�ำนวยความสะดวกให้กับผู้ใช้ ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราว์เซอร์เช่นwww.officemate.co.th เว็บไซต์จ�ำหน่ายเครื่องเขียนและเครื่องใช้ส�ำนักงานออนไลน์ มีการออกแบบเมนู การใช้งาน และระบบเนวิเกชันด้วยภาพกราฟิกที่เข้าใจง่าย ท�ำให้ผู้ใช้สามารถ เข้าถึงสินค้าที่ต้องการได้อย่างรวดเร็ว ตัวอย่างการออกแบบระบบเนวิเกชันของ www.officemate.co.th
WebsiteD.I.Y. 38 (6)คุณภาพของสิ่งที่ปรากฏบนเว็บไซต์:ลักษณะที่น่าสนใจ ของเว็บไซต์นั้นขึ้นอยู่กับความชอบส่วนบุคคลเป็นส�ำคัญ แต่โดยรวมแล้วสามารถ สรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้น องค์ประกอบต่างๆ ทุกส่วนควรมีคุณภาพ เช่น ภาพกราฟิกควรสมบูรณ์คมชัดไม่มีรอยหรือขอบขั้นบันไดให้เห็นตัวอักษรอ่านง่าย สบายตา และค�ำสะกดที่ถูกต้อง รวมไปถึงการเลือกใช้โทนสีที่เข้ากันอย่างลงตัว เป็นต้น โดยตัวอย่างเว็บไซต์ที่มีคุณภาพก็มีอยู่มากมาย เช่น www.apple.com, www.adobe.com, www.autodesk.com เป็นต้น ตัวอย่างการออกแบบเว็บไซต์ที่มีคุณภาพของ www.adobe.com
39 บทที่2กลเม็ดปั้นเว็บสวยและดี (7) ความสะดวกของการใช้งานในสภาพต่างๆ : การใช้งานของเว็บไซต์นั้นไม่ควรมีข้อจ�ำกัดกล่าวคือต้องสามารถใช้งานได้ดี ในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรม อื่นใดเพิ่มเติมนอกจากเว็บเบราว์เซอร์ตัวอย่างเช่นเว็บไซต์ที่พัฒนาด้วยAdobe Flash อาจจะไม่สามารถแสดงผลได้หากผู้ใช้ไม่ติดตั้ง Adobe Flash Player ดังรูปด้านล่างนอกจากนี้การออกแบบเว็บไซต์ก็ควรแสดงผลได้ดีในทุกระบบ ปฏิบัติการ ทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มีผู้ใช้บริการมาก และกลุ่มเป้าหมายหลากหลายควรให้ความส�ำคัญกับเรื่องนี้มากเป็นพิเศษ ตัวอย่างเช่น www.facebook.com สังเกตว่าถ้าเราเปิดในคอมพิวเตอร์ จะเห็นหน้าเว็บรูปแบบหนึ่งแต่เมื่อเปิดผ่านSmartphoneหรือTabletจะมี หน้าตาอีกรูปแบบหนึ่งที่เหมาะกับอุปกรณ์เหล่านี้ ตัวอย่างเว็บไซต์ที่พัฒนาด้วย Adobe Flash จะแสดงผลไม่ได้หากผู้ใช้งานไม่ติดตั้ง Adobe Flash Player การออกแบบเว็บไซต์ที่แสดงผลตามลักษณะของอุปกรณ์ที่ต่างกันของ www.facebook.com Adobe Flash Player 10 is required to playback video from this web page
WebsiteD.I.Y. 40 (8) ความถี่ในการออกแบบ : ถ้าต้องการ ให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรหมั่นปรับปรุงเว็บไซต์ให้ดูทันสมัยอยู่เสมอ ซึ่งสามารถ ท�ำได้ 2 ลักษณะใหญ่ๆ ได้แก่ 1) การปรับปรุงเนื้อหา การปรับปรุงข้อมูลสินค้าให้ทันสมัย เช่น ราคาสินค้า รูปภาพ สินค้า คุณลักษณะของสินค้า รวมไปถึงการจัดโปรโมชัน หรือ กิจกรรมส่งเสริมการตลาดอย่างสม�่ำเสมอและ2)การปรับปรุง การออกแบบเว็บไซต์ อาจวางแผนการ Re-Design เว็บไซต์ เป็นประจ�ำทุก 6 - 12 เดือน เพื่อให้ผู้เยี่ยมชมเว็บไม่เบื่อ (9) เสถียรภาพของเว็บไซต์ : ควรหมั่น ตรวจสอบการท�ำงานของระบบการท�ำงานต่างๆภายในเว็บไซต์ อย่างสม�่ำเสมอ ตัวอย่างเช่น ลิงก์เชื่อมโยงต่างๆ เพราะปัญหา ที่อาจเกิดขึ้นคือ ลิงก์ขาด ท�ำให้ไม่สามารถเชื่อมโยงไปยังลิงก์ ปลายทางได้ ซึ่งหากผู้ชมท�ำการคลิกลิงก์ดังกล่าวจะแสดง ข้อความผิดพลาด สร้างความร�ำคาญเป็นอย่างมาก และยัง ส่งผลกระทบต่อความน่าเชื่อถือของเว็บไซต์อีกด้วย ข้อความผิดพลาดเมื่อคลิกลิงก์ที่มีปัญหา การเชื่อมโยง
41 บทที่2กลเม็ดปั้นเว็บสวยและดี องค์ประกอบทั้ง 9 ส่วนนี้ เป็นปัจจัยส�ำคัญในการออกแบบเว็บไซต์ ซึ่งหาก ผู้พัฒนาสามารถด�ำเนินการได้ครบทั้ง 9 ข้อ เชื่อว่า เว็บไซต์ที่พัฒนาขึ้นต้องดึงดูดผู้ใช้ได้อย่างแน่นอน เช่นเดียวกันกับเว็บอีคอมเมิร์ซ หากมีการออกแบบ โดยค�ำนึงถึงองค์ประกอบทั้งหมดนี้ ก็จะสามารถ ดึงดูดลูกค้า และท�ำให้เว็บไซต์มีความน่าเชื่อถือ เช่นกัน
WebsiteD.I.Y. 42 ในการท�ำกิจกรรมต่างๆ ของเรานั้นจ�ำเป็นต้องมีการ วางแผนให้ดีการท�ำธุรกิจก็ต้องมีการวางแผนก�ำหนดกลุ่มเป้าหมาย การตกแต่งร้านค้าให้ดูน่าสนใจ ส�ำหรับการออกแบบเว็บไซต์ ก็เช่นเดียวกัน ต้องประกอบด้วยกระบวนการมากมาย เช่น การออกแบบโครงสร้างเว็บ ลักษณะหน้าตา จนถึงการเขียน โปรแกรมแต่ก็มีเจ้าของเว็บจ�ำนวนไม่น้อยที่พัฒนาเว็บไซต์โดยขาด การวางแผนและท�ำงานไม่เป็นระบบ เช่น การลงมือออกแบบ โดยใช้โปรแกรมส�ำเร็จรูป โดยจัดท�ำเนื้อหาและรูปแบบของเว็บ ตามความคิดที่นึกขึ้นได้ขณะนั้นและเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลย ท�ำให้เว็บนั้นมีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้ จึงเสี่ยงกับความล้มเหลวค่อนข้างมาก 2.2 ท�ำเว็บสวยและดี แบบ Step by Step
43 บทที่2กลเม็ดปั้นเว็บสวยและดี ความล้มเหลวที่พบเห็นได้ทั่วไปคือ เว็บที่แสดงข้อความว่าอยู่ระหว่างการ ก่อสร้าง (Under Construction หรือ Coming Soon) ซึ่งแสดงให้เห็นถึงการ ขาดการวางแผนที่ดี บางเว็บถือได้ว่าตายไปแล้ว เนื่องจากข้อมูลไม่ทันสมัย ขาดการ พัฒนาปรับปรุง เทคโนโลยีล้าสมัย ลิงก์ผิดพลาด สิ่งเหล่านี้แสดงให้เห็นถึงการขาด การดูแล ตรวจสอบและพัฒนาให้ทันสมัยอยู่เสมอ ตัวอย่างเว็บไซต์ที่อยู่ระหว่างการปรับปรุง
WebsiteD.I.Y. 44 การออกแบบเว็บไซต์อย่างถูกต้องจะช่วยลดความผิดพลาดเหล่านี้ลงได้ และช่วยลดความเสี่ยงที่จะท�ำให้เว็บไซต์ต้องประสบกับความล้มเหลว ซึ่งต้อง อาศัยกระบวนการออกแบบและจัดระบบข้อมูลอย่างเหมาะสม ดังนี้ การวางแผน การพัฒนาเว็บไซต์ กระบวนการแรกของการออกแบบเว็บไซต์คือ การ ก�ำหนดเป้าหมายของเว็บไซต์ รวมทั้งก�ำหนดกลุ่มผู้ใช้งาน ซึ่งการจะให้ได้มาซึ่งข้อมูลเหล่านี้ ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือ จ�ำลองสถานการณ์สิ่งเหล่านี้จะช่วยให้สามารถออกแบบเนื้อหา และการใช้งานเว็บไซต์ได้อย่างเหมาะสม และตรงกับความ ต้องการของผู้ใช้อย่างแท้จริง กระบวนการนี้อาจเรียกได้ว่า เป็นการวางแผนพัฒนาเว็บไซต์ ซึ่งมีขั้นตอน ดังนี้
45 บทที่2กลเม็ดปั้นเว็บสวยและดี (1) ก�ำหนดวัตถุประสงค์ของเว็บไซต์ : ขั้นตอนแรกของ การออกแบบเว็บไซต์คือ การก�ำหนดวัตถุประสงค์ของเว็บไซต์ให้ชัดเจน เสียก่อน โดยทั่วไปมักจะเข้าใจว่าการท�ำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการ ข้อมูลของหน่วยงานหรือองค์กรเท่านั้นแต่ในความเป็นจริงแล้วแต่ละเว็บไซต์ จะมีเป้าหมายแตกต่างกันไป เช่น ท�ำเว็บไซต์มาเพื่อประชาสัมพันธ์ร้านค้า จะได้เป็นการเพิ่มยอดขายท�ำให้ลูกค้ารู้จักร้านค้ามากยิ่งขึ้น หรือท�ำเว็บไซต์ เพื่อเพิ่มช่องทางการสั่งสินค้าให้ลูกค้าสามารถซื้อสินค้าได้โดยไม่ต้องเดินทาง มาที่ร้านค้า กล่าวโดยสรุป วัตถุประสงค์ในการสร้างเว็บไซต์มี ดังนี้ ขายสินค้า/บริการ น�ำเสนอข้อมูลสินค้า/บริการ สร้างภาพลักษณ์องค์กร เพิ่มช่องทางการติดต่อกับลูกค้า สร้างเครือข่ายสังคมออนไลน์ เพื่อความบันเทิง (2) การก�ำหนดกลุ่มเป้าหมาย : ผู้ออกแบบเว็บไซต์ ควรทราบถึงกลุ่มผู้ใช้เป้าหมายที่จะเข้ามาใช้บริการเว็บไซต์ เพื่อตอบสนอง ความต้องการของผู้ใช้ได้อย่างชัดเจนเช่นกลุ่มเป้าหมายของเว็บไซต์เกี่ยวกับ เครื่องส�ำอางคือ ผู้หญิงวัยรุ่นและวัยท�ำงาน
WebsiteD.I.Y. 46 (3) การก�ำหนดสิ่งที่ผู้ใช้ต้องการจากเว็บ :หลังจากที่ ก�ำหนดวัตถุประสงค์และกลุ่มเป้าหมายของเว็บไซต์แล้ว ล�ำดับต่อไปคือ การออกแบบเว็บไซต์ที่น่าสนใจเพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่งๆ ได้แก่ ข้อมูลที่น่าสนใจและ เป็นประโยชน์ หรือความบันเทิงต่างๆ แต่ส�ำหรับเว็บไซต์อีคอมเมิร์ซนั้น อาจมีสิ่งอื่นๆ เพิ่มเติม เช่น การจัดโปรโมชันส่งเสริมการตลาด วิธีการ จัดส่งสินค้า การคืนสินค้าที่ไม่ได้คุณภาพและการรีวิวสินค้าโดยลูกค้า คนอื่นๆ (4) การก�ำหนดข้อมูลหลักที่ควรมีบนเว็บไซต์ : เมื่อเราทราบถึงสิ่งที่ผู้ใช้ต้องการเมื่อเข้าชมเว็บไซต์แล้ว ก็ควรออกแบบให้มี ข้อมูลเหล่านั้นโดยจัดกลุ่มเป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าชม เว็บไซต์ เช่น ข้อมูลสินค้า/บริการ ข้อมูลเกี่ยวกับบริษัท ข่าวความคืบหน้า ค�ำถามที่ถามบ่อยหรือค�ำถามยอดนิยม ข้อมูลการติดต่อ
47 บทที่2กลเม็ดปั้นเว็บสวยและดี หลังจากที่ได้วางแผนและรวบรวมข้อมูลที่จ�ำเป็นส�ำหรับการพัฒนาเว็บไซต์ แล้วขั้นตอนถัดมาคือการออกแบบหน้าเว็บไซต์ซึ่งถือว่าเป็นสิ่งแรกที่ผู้ใช้จะได้เห็น ขณะที่เปิดเข้าสู่เว็บไซต์และยังเป็นสิ่งแรกที่แสดงถึงประสิทธิภาพในการออกแบบ เว็บไซต์อีกด้วย โดยปกติหน้าเว็บจะประกอบด้วยรูปภาพ ตัวอักษร สีพื้น ระบบ เนวิเกชันหรือเมนู และองค์ประกอบอื่นๆ ที่ช่วยสื่อความหมายของเนื้อหาและ อ�ำนวยความสะดวกต่อการใช้งานโดยหลักส�ำคัญในการออกแบบก็คือการใช้รูปภาพ และองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาของเว็บไซต์โดยมี เป้าหมายส�ำคัญเพื่อการสื่อความหมายที่ชัดเจนและน่าสนใจบนพื้นฐานของความ เรียบง่าย และความสะดวกต่อผู้ใช้งาน ขั้ น ต อ น แร ก สุ ด ข อ ง ก า ร ออกแบบเว็บไซต์คือ การออกแบบและ ก�ำหนดโครงสร้างของเว็บไซต์ (Site Structure) ให้แน่นอน โดยโครงสร้างเว็บไซต์เป็นแผนผังของการล�ำดับเนื้อหาหรือ การจัดวางต�ำแหน่งเว็บเพจทั้งหมดซึ่งจะท�ำให้เรารู้ว่าทั้งเว็บไซต์ประกอบด้วย เนื้อหาอะไรบ้าง และมีเว็บเพจหน้าไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงเปรียบเสมือนกับการเขียนแบบ อาคารก่อนที่จะลงมือสร้างจริง เพราะจะท�ำให้เรามองเห็นหน้าตาของ เว็บอย่างเป็นรูปธรรมขึ้นนอกจากนี้โครงสร้างเว็บไซต์ที่ดียังช่วยให้ผู้ชม ไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็วอีกด้วย
WebsiteD.I.Y. 48 ส�ำหรับวิธีการออกแบบโครงสร้างเว็บไซต์สามารถท�ำโดยวาดแผนภูมิต้นไม้เช่น รูปตัวอย่าง ซึ่งเป็นการออกแบบเว็บไซต์สื่อการเรียนการสอนออนไลน์ จะเห็นได้ว่า มีหน้าหลักคือหน้า “บทเรียนหลัก” ซึ่งจะมีลิงก์ไปยังหน้าอื่นๆ อีก 8 หน้า โดยในหน้า เข้าสู่บทเรียนก็จะมีการเชื่อมโยงไปยังหน้าอื่นๆ อีก การออกแบบลักษณะนี้จะท�ำให้ มองเห็นโครงสร้างภาพรวมทั้งหมดของเว็บไซต์ และท�ำให้การพัฒนาเว็บไซต์เป็นไปได้ ง่ายและรวดเร็วยิ่งขึ้น การจัดโครงสร้างเว็บไซต์สามารถท�ำได้หลายวิธี แต่ที่นิยมใช้กันมีอยู่ 2 แบบ คือ การจัดโครงสร้างเว็บไซต์ตามกลุ่มเนื้อหา และตามกลุ่มผู้ชม 1) จัดตามกลุ่มเนื้อหา (Content-based Structure) เป็นรูปแบบการจัดวางโครงสร้างของเว็บไซต์ให้เป็นส่วนๆ ตามเนื้อหาของเว็บ เช่น หากต้องการพัฒนาเว็บไซต์อีคอมเมิร์ซ อาจจะแบ่งเนื้อหาตามประเภทสินค้า หรือตาม ราคา เป็นต้น ดังเช่น www.tohome.com เป็นตัวอย่างของการออกแบบโครงสร้าง ตามกลุ่มเนื้อหา โดยแบ่งเว็บไซต์เป็นกลุ่มๆ ตามประเภทของสินค้า การออกแบบโครงสร้างเว็บไซต์โดยใช้แผนภูมิต้นไม้
49 บทที่2กลเม็ดปั้นเว็บสวยและดี 2) จัดตามกลุ่มผู้ชม (User-based Structure) เป็นรูปแบบการ จัดโครงสร้างของเว็บไซต์ตามสิทธิการเข้าใช้งาน หรือตามความสนใจของผู้ใช้ เช่น ผู้ใช้งาน ที่เป็นสมาชิกของเว็บจะได้รับข้อมูลมากกว่าผู้ใช้งานทั่วไปหรือโครงสร้างข้อมูลต่างๆในเว็บ อาจจะแตกต่างกันตามเพศ อายุ หรือความสนใจของผู้ใช้ก็ได้ ดังเช่น www.amazon.com เป็นตัวอย่างของการออกแบบโครงสร้างตามกลุ่มผู้ชมโดยภาพบนจะเห็นว่าก่อนเข้าสู่ระบบ นั้นจะเป็นหน้าเว็บที่แสดงสินค้าประเภทภาพยนตร์ แต่หลังจากล็อกอินเข้าสู่ระบบแล้ว จะเปลี่ยนไปแสดงสินค้าประเภทอื่นซึ่งเป็นสินค้าที่ผู้ใช้งานนั้นเคยซื้อมาก่อน ก่อนล็อกอินเข้าสู่ระบบ หลังล็อกอินเข้าสู่ระบบ การออกแบบโครงสร้างเว็บไซต์ จัดตามกลุ่มผู้ชมของ www.amazon.com การออกแบบโครงสร้างเว็บไซต์ จัดตามกลุ่มเนื้อหาของ www.tohome.com
WebsiteD.I.Y. 50 ส�ำหรับการเชื่อมโยงหน้าเว็บต่างๆนั้นสามารถก�ำหนดรูปแบบการเชื่อมโยง ในเว็บได้ 3 รูปแบบด้วยกันคือ 1) แบบเรียงล�ำดับ(Sequence)เป็นการเชื่อมโยงเนื้อหาในเว็บไซต์ที่ผู้ใช้งาน จะต้องอ่านทีละหน้าเพื่อรับข้อมูลเป็นล�ำดับๆ ไป การออกแบบเว็บนี้เหมาะส�ำหรับ เว็บไซต์ที่มีจ�ำนวนเว็บเพจไม่มากหรือเว็บไซต์ที่จ�ำเป็นต้องน�ำเสนอข้อมูลแบบทีละขั้นตอน เช่น เว็บไซต์เกี่ยวกับคู่มือการใช้งานที่ต้องอ่านทีละขั้นตอนตามล�ำดับ เป็นต้น 2) แบบระดับชั้น (Hierarchy) เป็นรูปแบบการเชื่อมโยงในเว็บไซต์ที่นิยม ใช้กันมากที่สุดคือแบ่งเนื้อหาออกเป็นกลุ่มและรวมอยู่ในเมนูเดียวกันผู้ใช้ท�ำการเข้าถึง เนื้อหาผ่านทางเมนูต่างๆ การออกแบบเว็บลักษณะนี้เหมาะกับเว็บไซต์ที่มีจ�ำนวน เว็บเพจมากขึ้นเช่นwww.apple.com,www.tohome.comและwww.amazon.com ดังตัวอย่างหน้าเว็บไซต์ที่ผ่านมาแล้ว ที่จะเห็นได้ว่าในหน้าเว็บหลักนั้นจะมีเมนูย่อยๆ และเมื่อเข้าไปในเมนูย่อยแล้วจะมีเมนูเพื่อเข้าถึงเนื้อหาต่อไปโดยที่ไม่ได้บังคับผู้ใช้ ให้เข้าถึงหน้าเว็บอย่างเป็นล�ำดับ 3) แบบผสม (Combination) เหมาะส�ำหรับเว็บไซต์ที่มีความซับซ้อน โดย น�ำข้อดีของรูปแบบทั้งสองข้างต้นมาผสมกัน นั่นคือแบ่งเนื้อหาออกแบบกลุ่มให้อยู่ใน แต่ละเมนูย่อย และเมื่อผู้ใช้เข้าไปในเมนูนั้นๆ แล้ว การเข้าถึงเนื้อหาเว็บจะท�ำโดยการ เข้าไปทีละล�ำดับ เช่น เว็บไซต์ที่เสมือนเป็นหนังสือที่มีหน้าหลักคือหน้าสารบัญ และ เมื่อผู้ใช้ท�ำการคลิกที่หัวข้อในสารบัญแล้วเมื่อเข้าไปอ่านในแต่ละหัวข้อจ�ำเป็นจะต้อง อ่านหน้าเว็บอย่างเป็นล�ำดับ หลังจากที่ท�ำการออกแบบโครงสร้างการ เชื่อมโยงของเว็บไซต์แล้ว ขั้นตอนถัดมาคือ เลือกโทนสีหรือThemeของเว็บไซต์เนื่องจาก การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมาย ของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สี ให้เหมาะสมกลมกลืน ไม่เพียงแต่จะสร้าง ความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถท�ำให้ เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ โดยสีเป็น องค์ประกอบหลักส�ำหรับการตกแต่งเว็บ จึงจ�ำเป็นอย่างยิ่งที่จะต้อง ท�ำความเข้าใจเกี่ยวกับการเลือกใช้สี
51 บทที่2กลเม็ดปั้นเว็บสวยและดี ระบบสีที่แสดงบนหน้าจอคอมพิวเตอร์ มีระบบการแสดงผลผ่าน หลอดล�ำแสงที่เรียกว่า CRT (Cathode ray tube) โดยมีลักษณะระบบสี แบบบวก อาศัยการผสมของแสงสีแดง สีเขียว และสีน�้ำเงิน หรือที่เรียกว่า “ระบบสีRGB”สามารถก�ำหนดค่าแม่สีจาก0ถึง255ได้โดยค่า0หมายถึง แม่สีนั้นๆมีความสว่างน้อยมากจนมืดเป็นสีด�ำไปเลยในขณะที่ค่า255หมายถึง แม่สีนั้นมีความสว่างมากที่สุดจากการรวมสีของแม่สีหลักจะท�ำให้เกิดแสงสี ต่างๆ บนหน้าจอ ส�ำหรับการพัฒนาเว็บไซต์โดยการใช้ภาษา HTML นั้น ก็มีการก�ำหนดสีโดยใช้ระบบ RGB เช่นกัน วงล้อสีส�ำหรับพัฒนาเว็บไซต์ด้วยภาษา HTML สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัดกระตุ้น การรับรู้ทางด้านจิตใจมนุษย์ สีแต่ละสีจะสะท้อนอารมณ์และความรู้สึก ไม่เหมือนกันสีบางสีให้ความรู้สึกสงบบางสีให้ความรู้สึกตื่นเต้นเร้าใจสีจึงเป็น ส่วนส�ำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้น การเลือกใช้โทนสีภายใน เว็บไซต์จึงเป็นการแสดงถึงความแตกต่างของสีที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็น สามารถ แบ่งออกเป็น 3 กลุ่มคือ (รูปภาพจากwww.urlnexdoor.com)
WebsiteD.I.Y. 52 1. สีโทนร้อน (Warm Colors)เป็น กลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้ช่วยให้ หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น ตัวอย่างเว็บไซต์เช่นwww.stickermule.com 2. สีโทนเย็น(CoolColors)แสดงถึง ความสุภาพ อ่อนโยน เรียบร้อย จัดเป็น กลุ่มสีที่มีคนชอบมากที่สุด เพราะเป็น สีที่สามารถโน้มน้าวในระยะไกลได้ เช่น www.ecopono.com 3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลางประกอบด้วยสีด�ำ สีขาว สีเทา และสีน�้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่ สามารถน�ำไปผสมกับสีอื่นๆ เพื่อให้เกิด สีกลางขึ้นมา เช่น www.amazon.com ที่เน้นสีพื้นหลังเป็นสีขาว ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนร้อนของ www.stickermule.com ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนเย็นของ www.logolabs.nl ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนกลางของ www.amazon.com
53 บทที่2กลเม็ดปั้นเว็บสวยและดี โดยทั่วไปแล้ว หน้าเว็บต่างๆ จะประกอบไปด้วยส่วนประกอบ ดังนี้การก�ำหนด ส่วนประกอบต่างๆ ในหน้าเว็บไซต์ 1) สัญลักษณ์ หรือโลโก้ (Logo) เป็นสิ่งที่บ่งบอกความเป็นเอกลักษณ์ของ เว็บนั้นๆ ควรจะเป็นรูปภาพหรือข้อความที่ จดจ�ำได้ง่ายโดยส่วนใหญ่นิยมวางไว้มุมซ้าย บนสุดของเว็บไซต์ 2) เมนูหรือเนวิเกชัน(Navigation) เป็นส่วนที่รวมการเชื่อมโยงไปยังหน้าต่างๆ ในเว็บไซต์ควรออกแบบให้เห็นชัดและเข้าถึง ง่ายสะดวกใช้งานโดยส่วนใหญ่แล้วจะวางไว้ ส่วนบน หรือด้านซ้ายของเว็บไซต์ และควร อยู่ในต�ำแหน่งที่เห็นได้เมื่อเข้าเว็บครั้งแรก แสดงส่วนประกอบของเว็บไซต์ที่ดี 3) เนื้อหา(Content)ถือเป็นหัวใจหลักของเว็บไซต์ที่ท�ำให้ผู้ใช้ตัดสินใจเข้าใช้งาน เว็บไซต์หรือออกจากเว็บไซต์ได้เลย การเขียนเนื้อหาควรเลือกใช้ขนาดตัวอักษร และสีสัน ที่ดึงดูดผู้ใช้ ดูสะอาดตาเพื่อให้อ่านง่าย และควรมีรูปภาพประกอบที่สดใส สื่อถึงเนื้อหา ชัดเจนหากมีส่วนของมัลติมีเดียอื่นๆเช่นวิดีโอหรือแอนิเมชันก็จะช่วยดึงดูดผู้ใช้งานได้มาก ยิ่งขึ้นอีก 4) ส่วนท้ายของเว็บ(Footer) มักจะเป็นส่วนที่รวมลิงก์ไปยังบทความหรือส่วน ที่ผู้ใช้มักจะเข้าถึงบ่อยๆหรือรวมช่องทางการติดต่อเพื่อให้ผู้ใช้ติดต่อกับเจ้าของเว็บไซต์ได้ 5) พื้นที่ว่าง (White Space) เป็นส่วนที่ส�ำคัญอีกอย่างหนึ่งของเว็บไซต์ แม้ว่า พื้นที่ว่างจะไม่มีข้อมูล หรือเนื้อหาใดๆ แต่จะช่วยให้หน้าเว็บดูไม่อึดอัดจนเกินไป และยัง ช่วยให้ผู้ใช้อ่านข้อมูลในเว็บได้ง่ายขึ้นด้วย เช่น www.apple.com จะเห็นว่ามีพื้นที่ว่าง มากมาย ถึงแม้ว่าจะไม่มีตัวหนังสือมากนักแต่ก็ดึงดูดผู้ใช้งานได้เป็นอย่างดี
WebsiteD.I.Y. 54 การออกแบบหน้าเว็บไซต์นั้นอาจจะน�ำหลักการถ่ายภาพมาประยุกต์ใช้ร่วมได้การถ่ายภาพ โดยส่วนใหญ่นั้นมักจะใช้เส้นกริด (Grid) เพื่อก�ำหนดต�ำแหน่งรายละเอียดในรูปภาพ ซึ่งการจัด วางองค์ประกอบในหน้าเว็บอาจจะใช้วิธีการเดียวกันนี้ได้ ส�ำหรับแนวคิดเกี่ยวกับเส้นกริดนั้น คือ“กฎสามส่วน”ซึ่งกล่าวไว้ว่าไม่ว่าภาพจะอยู่แนวตั้งหรือแนวนอนก็ตามหากเราแบ่งภาพนั้น ออกเป็นสามส่วนทั้งตามแนวตั้งและแนวนอนแล้วลากเส้นแบ่งภาพทั้งสามเส้นจะเกิดจุดตัดกัน ทั้งหมด 4 จุด ดังรูปด้านล่าง ซึ่งจุดตัดของเส้นทั้งสี่นี้เป็นต�ำแหน่งที่เหมาะสมส�ำหรับการจัดวาง วัตถุที่ต้องการเน้นให้เป็นจุดเด่นหลัก ส่วนรายละเอียดอื่นๆ นั้นเป็นส่วนส�ำคัญที่รองลงมา อาจจะวางในต�ำแหน่งอื่นๆ ก็ได้ ตัวอย่างโครงสร้างเว็บไซต์ของwww.apple.com การใช้เส้นกริดเพื่อก�ำหนดต�ำแหน่งรายละเอียด ในรูปภาพ ส�ำหรับการวางต�ำแหน่งเมนู รวมทั้งต�ำแหน่งของส่วนประกอบต่างๆ ในหน้าเว็บไซต์ที่นิยมใช้มีอยู่3รูปแบบ ด้วยกันคือ การก�ำหนดเมนูด้านซ้าย เป็นรูปแบบที่นิยมใช้มากที่สุดเนื่องจาก เป็นรูปแบบที่สามารถใช้งานได้ง่าย แต่ก็มีข้อด้อยคืออาจดูไม่น่าสนใจ เท่าที่ควรเพราะว่าผู้ใช้งานสามารถ พบเห็นได้โดยทั่วไป ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านซ้าย
55 บทที่2กลเม็ดปั้นเว็บสวยและดี การก�ำหนดเมนูด้านขวา เป็นรูปแบบที่อาจจะไม่ค่อยนิยมใช้มากนัก เพราะดูแปลกตาแต่ว่ามีข้อดีคือส่วนเนื้อหา หลักจะถูกแสดงอยู่ด้านซ้ายมือ ซึ่งผู้ใช้จะ มองเป็นส่วนแรกๆ อย่างไรก็ตาม เนื่องด้วย ส่วนเมนูจะถูกวางไว้ทางขวามือ ซึ่งท�ำให้ผู้ใช้ อาจมองไม่เห็น โดยเฉพาะหากหน้าจอของ ผู้ใช้มีขนาดเล็ก ส่วนเมนูก็จะถูกบังไปได้ การก�ำหนดเมนูด้านขวาและซ้าย ก�ำลังเป็นรูปแบบที่เริ่มให้ความนิยมใช้มากขึ้น การออกแบบลักษณะนี้เหมาะกับเว็บไซต์ที่มี จ�ำนวนเมนูมาก รวมทั้งเว็บอีคอมเมิร์ซ หรือ เว็บที่เน้นการโฆษณาสินค้า โดยจะพยายาม ให้เนื้อหามีข้อความน้อยที่สุดแต่ข้อมูล ครบถ้วน ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านขวา ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านขวาและซ้าย เมื่อก�ำหนดส่วนประกอบและต�ำแหน่งของข้อมูลในหน้าเว็บ ได้แล้วเราสามารถเริ่มต้นพัฒนาเว็บไซต์ได้ทันทีโดยในการออกแบบนั้น อาจยังไม่ต้องใช้เครื่องมือทางคอมพิวเตอร์มากนัก อาจจะร่างบน กระดาษก่อนเพื่อให้เข้าใจถึงองค์ประกอบโดยรวมทั้งหมดของหน้าเว็บ ก่อนจะลงมือพัฒนาต่อไป
WebsiteD.I.Y. 56 ในหัวข้อก่อนหน้านี้ได้อธิบายถึงหลักการและขั้นตอนการ ออกแบบเว็บไซต์ที่ดีไปแล้ว ส�ำหรับหัวข้อนี้จะกล่าวถึงรายละเอียด เพิ่มเติมว่ารูปแบบเว็บไซต์ที่ดีและก�ำลังได้รับความนิยมในปัจจุบัน นั้นเป็นอย่างไร โดยแนวโน้มการออกแบบเว็บไซต์ขณะนี้ มักเน้นที่ ความเรียบง่ายไม่ซับซ้อนในการเข้าถึงข้อมูลนอกจากนี้ด้วยความนิยม ของอุปกรณ์เคลื่อนที่แบบพกพา ท�ำให้เว็บไซต์ยุคใหม่จ�ำเป็นต้อง ออกแบบให้รองรับทั้งการเข้าเว็บจากเครื่องคอมพิวเตอร์และอุปกรณ์ เคลื่อนที่อีกด้วย 2.3 จับกระแส เว็บดีไซน์ยุค 3.0 การออกแบบเว็บไซต์แบบ Single Page Design “เป็นการออกแบบเว็บไซต์ที่ให้ข้อมูลทุกอย่างอยู่ในหน้าจอเดียว”ทั้งในส่วน ของหน้าจอคอมพิวเตอร์ หรืออุปกรณ์การเคลื่อนที่แบบพกพา เช่น สมาร์ตโฟน เนื่องจากมีผลการวิจัยว่า ผู้ใช้งานเว็บไซต์ส่วนใหญ่ไม่ชอบการเลื่อนไปมา หรือการ Scrollบนหน้าเว็บไซต์เนื่องจากพฤติกรรมของผู้ใช้งานเว็บไซต์มีโอกาสเบื่อง่ายและ อาจจะออกจากหน้าเว็บไซต์ได้ง่ายถ้าหากไม่ได้รับข้อมูลข่าวสารตามที่ต้องการอย่าง รวดเร็วดังนั้นการออกแบบเว็บในยุคใหม่จึงมักผสมผสานกับScriptหรือโปรแกรม ที่จะใช้ในการออกแบบเว็บไซต์ให้น่าใช้งานและอยู่ในหน้าจอเดียวด้วยการน�ำScript Program จ�ำพวกซ่อนเนื้อหาไว้ก่อน แล้วค่อยแสดงผลเมื่อกด หรือขยายเนื้อหา ออกมาให้เห็นเมื่อผู้ใช้คลิกหรือเลื่อนเมาส์มายังต�ำแหน่งที่ก�ำหนดไว้
57 บทที่2กลเม็ดปั้นเว็บสวยและดี การออกแบบเว็บลักษณะนี้ส่วนใหญ่จะก�ำหนดให้มีพื้นที่ว่างในหน้าเว็บด้วยซึ่งท�ำให้ ดูสะอาดตา ดึงดูดผู้ใช้งาน ตัวอย่างหน้าเว็บในลักษณะนี้เป็นดังรูปด้านล่าง ตัวอย่างเว็บไซต์แบบ Single Page Design การออกแบบเว็บไซต์โดยให้มีภาพพื้นหลังขนาดใหญ่ เป็นที่ทราบกันดีว่าภาพหนึ่งภาพ สามารถแทนค�ำพูดได้เป็นร้อยค�ำและเนื่องด้วย ผู้ใช้งานในปัจจุบันไม่ชอบอ่านตัวหนังสือมากนัก ดังนั้น การออกแบบเว็บไซต์ยุคใหม่ มักลดปริมาณข้อความลงแต่จะใช้รูปภาพที่สวยงามและสื่อตรงกับเนื้อหาของเว็บไซต์มาเป็น ภาพพื้นหลังแทน นอกจากภาพพื้นหลังขนาดใหญ่แล้วอาจมีการใช้ตัวหนังสือที่มีลักษณะพิเศษสวยงาม ดึงดูดผู้ใช้ รวมทั้งการเล่นค�ำต่างๆ ที่โดนใจผู้ชมร่วมกันด้วย ดังตัวอย่างรูปด้านล่าง ตัวอย่างเว็บไซต์แบบภาพพื้นหลังขนาดใหญ่ ตัวอย่างเว็บไซต์ที่มีภาพพื้นหลังขนาดใหญ่ และใช้รูปแบบอักษรที่น่าสนใจ
WebsiteD.I.Y. 58 การออกแบบเว็บไซต์ ที่เน้นความเรียบง่าย การออกแบบเว็บไซต์ในปัจจุบัน จะเน้นความเรียบง่ายในลักษณะที่ว่าเมื่อผู้ใช้ เข้ามาถึงหน้าเว็บไซต์ต้องสามารถใช้งาน เว็บไซต์ได้ทันที โดยไม่จ�ำเป็นต้องอาศัย เวลาในการศึกษารูปแบบการใช้งานเว็บไซต์ เลย ด้วยการเน้นข้อความและรูปภาพที่ เมื่อผู้ใช้เห็นแล้วสามารถเข้าใจได้ในทันที รวมไปถึงการออกแบบเมนูต่างๆที่เรียบง่าย เข้าใจได้ง่าย ดังตัวอย่างรูป ตัวอย่างการออกแบบเว็บไซต์ ที่เน้นความเรียบง่าย
59 บทที่2กลเม็ดปั้นเว็บสวยและดี ตัวอย่างเว็บไซต์ที่มีการใช้ภาพ Infographic แนวทางหนึ่งที่จะช่วยให้หน้าเว็บไซต์สามารถเข้าใจได้ง่าย ไม่ซับซ้อนคือ การใช้ Infographic ซึ่งเป็นรูปภาพที่สามารถใช้ เพื่อแสดงถึงผลสรุปข้อมูลต่างๆ ที่สามารถเข้าใจได้ง่าย โดยการ ดูภาพนั้นเพียงภาพเดียว
WebsiteD.I.Y. 60 การออกแบบเว็บไซต์แบบResponsiveWeb ในรูปแบบนี้มีแนวคิดว่า “การพัฒนาเว็บไซต์นั้น ควรท�ำเพียงครั้งเดียวและสามารถแสดงผลได้กับทุกอุปกรณ์ และทุกขนาดของหน้าจอ”ไม่ว่าจะเป็นหน้าจอขนาดใหญ่หรือเล็ก หรืออุปกรณ์เคลื่อนที่แบบพกพาอย่างสมาร์ตโฟน หรือแท็บเล็ต ก็ตาม ถึงแม้ผู้ใช้จะสามารถ Zoom in/out จากหน้าจอได้ แต่ก็ยังเรียกว่าสร้างความวุ่นวายและไม่สะดวกในการใช้งาน ดังนั้น การพัฒนาเว็บในแนวทาง Responsive จึงก�ำลังได้รับ ความสนใจในกลุ่มผู้พัฒนาเว็บไซต์ ด้วยเหตุผลหลายประการ เช่น ประหยัดทรัพยากรของเครื่องที่เรียกใช้ สามารถลด ค่าใช้จ่ายในการพัฒนาแยกส่วนจากเดิมที่อาจจะต้องท�ำเว็บไซต์ ส�ำหรับเครื่องคอมพิวเตอร์ และอุปกรณ์อื่นๆ แยกจากกัน ก็ เหลือเพียงการพัฒนาเว็บไซต์เพียงครั้งเดียว รวมทั้งยังส่งผลต่อ Search Engine อย่างเช่น www.google.com ที่จะเข้ามา ตรวจสอบและจับ Keyword บนเว็บไซต์ได้มีประสิทธิภาพ มากขึ้นอีกด้วย อย่างไรก็ตาม ข้อพึงระวังส�ำหรับการออกแบบเว็บไซต์ แบบ Responsive คือ นักพัฒนาจะต้องคิดและวางแผน การออกแบบเป็นอย่างดี และที่ส�ำคัญจ�ำเป็นจะต้อง หลีกเลี่ยงการใช้โปรแกรมเสริมบนเว็บไซต์ เนื่องจากข้อจ�ำกัด ในส่วนของอุปกรณ์เคลื่อนที่แบบพกพาต่างๆ แต่ข้อจ�ำกัด เหล่านี้ก็ไม่สามารถหยุดยั้งความสนใจที่มีต่อการพัฒนาเว็บไซต์ แบบ Responsive ได้
61 บทที่2กลเม็ดปั้นเว็บสวยและดี ตัวอย่างเว็บไซต์ที่มีการออกแบบ ให้ปุ่มไอคอนมีขนาดใหญ่ ตัวอย่างเว็บไซต์แบบ Responsive Design นอกจากนี้ เว็บไซต์ที่ออกแบบใน ลักษณะของ Responsive นั้นควรจะต้อง ค�ำนึงถึงรูปร่างหน้าตา หน้าจอ ปุ่ม หรือ ไอคอนต่างๆ ให้มีขนาดใหญ่ขึ้น เพื่อง่ายต่อ การใช้นิ้วสัมผัสจากหน้าจอเมื่อเข้าชมเว็บไซต์ เพราะหากออกแบบให้ขนาดเล็กเกินไป อาจ จะสร้างความไม่สะดวกกับผู้ใช้ดังเช่นตัวอย่าง เว็บไซต์ในรูปต่อไปนี้ที่พยายามออกแบบให้ ปุ่มไอคอนต่างๆ มีขนาดใหญ่ ซึ่งเมื่อเปิด เว็บไซต์ในอุปกรณ์ที่มีจอขนาดเล็กแล้ว ก็ยังไม่ส่งผลเสียใดๆ ต่อการใช้งาน
WebsiteD.I.Y. 62 ในหัวข้อนี้จะได้ยกตัวอย่างเว็บไซต์อีคอมเมิร์ซที่มีการ ออกแบบที่ดี มีความสวยงาม และดึงดูดผู้เยี่ยมชม อีกทั้งยังสามารถ ใช้ง่าย โดยที่ผู้ใช้ไม่จ�ำเป็นต้องศึกษาเรียนรู้มากนัก โดยท่านสามารถ ทดลองเข้าไปยังเว็บไซต์เหล่านี้เพื่อศึกษาแนวทางการออกแบบ เว็บไซต์ที่ดีและน�ำมาประยุกต์ใช้ในการออกแบบเว็บไซต์ของตนเองได้ (1) www.gforce.be : เว็บไซต์ที่ออกแบบโดยใช้ภาพ พื้นหลังขนาดใหญ่แบบSinglePageDesignโดยมุ่งเน้นความเรียบง่าย ต่อการใช้งาน (2) www.merchworld.eu : เว็บไซต์ที่ออกแบบด้วยการ แบ่งสัดส่วนบนเว็บไซต์อย่างชัดเจนปุ่มไอคอนหรือเมนูที่เข้าถึงยังหน้า เว็บต่างๆมีขนาดใหญ่เลือกใช้สีโทนกลางคือสีขาวเป็นThemeหลัก บนเว็บไซต์ ซึ่งท�ำให้ท�ำให้เว็บไซต์ดูเรียบง่าย สบายตา น่าใช้ และดูมี ความเป็นมืออาชีพ 2.4 เปิดไอเดีย สร้างสรรค์เว็บยุคใหม่
63 บทที่2กลเม็ดปั้นเว็บสวยและดี (3) www.mendo.nl : เว็บไซต์ที่ออกแบบ ในลักษณะ Single Page Design มีพื้นหลังเป็น โทนสีกลางคือสีด�ำ มีการใช้ภาพพื้นหลังขนาดใหญ่ ท�ำให้ทราบทันทีเมื่อเข้าชมเว็บไซต์ว่าเป็นเว็บไซต์ จ�ำหน่ายหนังสือ (4) www.wantist.com : การออกแบบ โดยใช้สีโทนกลางคือสีเทา แต่มีการเน้นความ สวยงามด้วยสีโทนเย็นคือสีฟ้า รวมทั้งยังมีการจัด โครงสร้างเว็บไซต์ตามประเภทของสินค้าด้วยภาพ ขนาดใหญ่ ท�ำให้เว็บไซต์ดูน่าสนใจ และมีความง่าย ในการใช้งาน (5) www.scb.co.th/scbfirst/ : เว็บไซต์ ที่ออกแบบโดยเน้นสีที่เป็นเอกลักษณ์ขององค์กรคือ สีม่วงและใช้ภาพพื้นหลังขนาดใหญ่ที่เน้นประโยชน์ ของบริการนั่นคือผู้ใช้จะมีความสุขในการรับบริการ มีการออกแบบเมนูและไอคอนเพื่อเข้าชมส่วนต่างๆ ภายในเว็บไซต์อย่างสะดวก จะเห็นว่าการออกแบบเว็บไซต์นั้นแม้ว่าจะมีอยู่หลายขั้นตอน แต่นั่นคง ไม่ใช่ข้อจ�ำกัดที่จะลงมือท�ำ เพียงแต่ผู้พัฒนาเว็บควรค�ำนึงถึงกลุ่มเป้าหมาย ที่เป็นผู้ใช้เว็บเป็นส�ำคัญการออกแบบเว็บไซต์ในยุคปัจจุบันนอกจากเนื้อหาต้องเป็น ประโยชน์ต่อผู้ใช้อย่างแท้จริงแล้ว การออกแบบเว็บไซต์ที่สวยงาม เรียบง่าย น่าใช้ รวมไปถึงการจัดวางต�ำแหน่งข้อมูลต่างๆ อย่างเหมาะสมและโดดเด่น เป็นสิ่งส�ำคัญ ที่จะเรียกใจผู้ใช้ให้อยู่กับเว็บไซต์ของเราได้นานที่สุดและติดใจที่จะกลับเข้ามาเยี่ยมชม เว็บไซต์เราใหม่ในอนาคต
อย่ากลัวเทคโนโลยี แต่จงกลัวว่าจะไร้ลูกค้า... หากไม่ใช้เทคโนโลยี วีรชัย ประยูรพฤกษ์ อินเทอร์เน็ตคือส่วนหนึ่งของชีวิต @ ETDA
03 นักพัฒนา เว็บมือใหม่...สไตล์ D.I.Y.
WebsiteD.I.Y. 66 การพัฒนาเว็บไซต์อีคอมเมิร์ซนั้น แม้ว่าจะมีหลายขั้นตอนจนผู้ที่ไม่มี ประสบการณ์เขียนโปรแกรมมาก่อนอาจรู้สึกว่าไม่สามารถท�ำได้แต่ด้วยความ ก้าวหน้าของเทคโนโลยีต่างๆ ท�ำให้ปัจจุบันนี้ “ทุกคนสามารถสร้างเว็บไซต์ได้ ด้วยตนเองโดยไม่จ�ำเป็นต้องมีความรู้ด้านการเขียนโปรแกรมแต่อย่างใด”อย่างเช่น การใช้บริการเว็บไซต์ส�ำเร็จรูปที่จะช่วยให้เรามีเว็บได้ภายในเวลาเพียงไม่กี่ นาที หรือการใช้บริการในตลาดกลางพาณิชย์อิเล็กทรอนิกส์ หรือที่นิยมเรียกกันว่า e-Marketplaceที่มีอยู่มากมายทั้งในและต่างประเทศหรือหากใครมีพื้นฐานความรู้ ด้านการเขียนโปรแกรมมาบ้างก็อาจเลือกใช้โปรแกรมส�ำเร็จรูปที่เรียกว่าCMSก็ได้ ซึ่งทั้งหมดจะได้แนะน�ำให้รู้จักกันในบทนี้ เว็บไซต์ส�ำเร็จรูป (Web Template) เป็นบริการที่ถูกสร้างขึ้นเพื่ออ�ำนวย ความสะดวกให้กับผู้ต้องการมีเว็บไซต์แต่ไม่มีความรู้ด้านการเขียนโปรแกรมมาก่อน จึงมี การพัฒนาเว็บไซต์แบบอัตโนมัติขึ้นเพื่ออ�ำนวยความสะดวกให้กับผู้ใช้งาน กล่าวคือ ผู้ใช้บริการเว็บส�ำเร็จรูปมีหน้าที่เพียงกรอกข้อมูลลงบนแบบฟอร์มที่ผู้ให้บริการ เว็บส�ำเร็จรูปจัดเตรียมไว้เช่นชื่อร้านค้ารายการสินค้าต่างๆข้อมูลการติดต่อจากนั้นระบบ ก็จะท�ำงานให้โดยอัตโนมัติ ตัวอย่างพัฒนาการวิธีสั่งสินค้าของ The Pizza Company 3.1 Web Template... สร้างเว็บเหมือนเสกได้ ซื้อผ่านหน้าร้าน โทรสั่งอาหาร สั่งซื้อออนไลน์ ผ่านแอปพลิเคชัน
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 67 ตัวอย่างผู้ให้บริการเว็บไซต์ส�ำเร็จรูป www.readyplanet.com www.igetweb.com จุดเด่น/ด้อย ของ เว็บไซต์ส�ำเร็จรูป www.makewebeasy.com ลักษณะเด่นของการใช้เว็บไซต์แบบส�ำเร็จรูปที่เห็นได้ชัดเจนก็คือ เจ้าของเว็บไม่จ�ำเป็นต้องมีความรู้ในการเขียนโปรแกรมใดๆ ก็สามารถ มีเว็บไซต์ได้อย่างรวดเร็วทันใจ ใช้เวลาเพียงไม่กี่นาที และที่ส�ำคัญยัง สามารถจัดการแก้ไขหรือปรับปรุงข้อมูลต่างๆด้วยตนเองได้ตลอดเวลา อย่างไรก็ตาม เนื่องจากเว็บส�ำเร็จรูปเป็นโปรแกรมอัตโนมัติ ท�ำให้ความ สามารถของระบบ (Features) อาจไม่รองรับความต้องการของเจ้าของ เว็บไซต์ได้ทั้งหมด เพราะส่วนใหญ่มักจะถูกออกแบบเป็นมาตรฐาน ให้ทุกคนสามารถใช้งานได้ www.shopup.com
WebsiteD.I.Y. 68 ปัจจุบันมีผู้ให้บริการเว็บไซต์ส�ำเร็จรูป ทั้งในและต่างประเทศจ�ำนวนมากรวมทั้งบางแห่ง ก็มุ่งเน้นให้บริการเว็บไซต์ส�ำหรับอีคอมเมิร์ซ โดยเฉพาะด้วยท�ำให้เจ้าของธุรกิจต่างๆสามารถมี เว็บไซต์โดยไม่จ�ำเป็นต้องมีความรู้ด้านการเขียน โปรแกรมใดๆ รวมทั้งไม่จ�ำเป็นต้องติดต่อผู้ให้ บริการเครื่องแม่ข่ายส�ำหรับท�ำเว็บไซต์อีกด้วย เนื่องจากกระบวนการทั้งหมดจะได้รับการดูแล โดยผู้ให้บริการเว็บไซต์ส�ำเร็จรูปนั่นเอง โดย ขั้นตอนการสร้างเว็บไซต์ส�ำเร็จรูปนั้นจะมีความ แตกต่างกันไปตามผู้ให้บริการของแต่ละเว็บไซต์ แต่โดยหลักใหญ่ใจความแล้วส่วนมากจะประกอบ ไปด้วย 4 ขั้นตอนหลักๆ ดังนี้ ขั้นตอนการพัฒนา เว็บไซต์ส�ำเร็จรูป 1. สมัครสมาชิก 2. สร้างร้านค้าออนไลน์ ขั้นตอนการพัฒนาเว็บไซต์ส�ำเร็จรูป (1) สมัครสมาชิก : เป็นขั้นตอนแรกของการใช้บริการเว็บไซต์ส�ำเร็จรูปโดยผู้ใช้บริการต้อง ลงทะเบียนเพื่อสมัครเป็นสมาชิกของเว็บไซต์ผู้ให้บริการนั้นๆในขั้นตอนนี้หากเป็น ผู้ให้บริการฟรีแบบไม่มีค่าใช้จ่ายก็จะสามารถสมัครสมาชิกและสร้างเว็บไซต์ ได้ทันทีแต่ส�ำหรับผู้ให้บริการที่คิดค่าใช้จ่ายจะต้องมีการจ่ายค่าสมาชิกเสียก่อน จึงจะสามารถใช้บริการต่างๆ ในเว็บไซต์นั้นได้ 3. การจัดข้อมูล 4. ติดตั้งส่วนประกอบเสริม
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 69 โดยทั่วไปแล้วข้อมูลพื้นฐานที่จะต้อง กรอกเพื่อสมัครสมาชิกเว็บไซต์ส�ำเร็จรูป เช่น ชื่อ-นามสกุล ชื่อร้านค้า ข้อมูลการติดต่อ อีเมลรวมถึงหมายเลขบัตรประชาชนฯลฯ ในขั้นตอนนี้ผู้ให้บริการส่วนใหญ่มักจะก�ำหนด ให้สมาชิกตั้งชื่อเว็บไซต์ในลักษณะที่เรียกว่า “Subdomain”ด้วยซึ่งSubdomainก็คือ เว็บไซต์ย่อยๆภายในเว็บไซต์หลักนั่นเองตัวอย่าง เช่น เว็บไซต์หลักคือ www.igetweb.com จะมีเว็บไซต์ย่อยๆ ภายใต้เว็บไซต์ดังกล่าว เช่น สมมติเราเป็นธุรกิจบริการรถเช่า และ ต้องการตั้งชื่อเว็บไซต์ว่า Car Rent ดังนั้น Subdomain ภายใต้เว็บไซต์ igetweb ก็คือ www.carrent.igetweb เป็นต้น ตัวอย่างขั้นตอนการสมัครสมาชิก เว็บไซต์ส�ำเร็จรูป (2) สร้างร้านค้าออนไลน์ : เมื่อการสมัครสมาชิกเสร็จสมบูรณ์แล้วต่อมาคือขั้นตอนการสร้างร้านค้าออนไลน์ ซึ่งผู้ให้ บริการเว็บไซต์ส�ำเร็จรูปแต่ละรายก็มีวิธีการใช้งานที่แตกต่างกันไป แต่ขั้นตอนโดยรวมๆ แล้ว มักจะเป็นเรื่องการใส่โลโก้พร้อมข้อมูลร้านค้าข้อมูลและรูปภาพสินค้าข้อมูลการติดต่อช่องทาง การช�ำระเงินนอกจากนี้บางเว็บเจ้าของเว็บสามารถเลือกรูปแบบเว็บไซต์ส�ำเร็จรูปหรือที่เรียกว่า เทมเพลต (Template) ที่เหมาะสมกับธุรกิจของตนเองได้อีกด้วย www.igetweb.com www.shopup.com ตัวอย่างเทมเพลตของเว็บไซต์ส�ำเร็จรูป www.chaiyoreadyweb.com ตั้งชื่อเว็บไซต์แบบsubdomain ตั้งชื่อเว็บไซต์แบบsubdomain www.lnwshop.com
WebsiteD.I.Y. 70 ปัจจุบันนี้ระบบเว็บส�ำเร็จรูปได้พัฒนาให้ง่าย ต่อการใช้งานมากขึ้น อย่างเช่น การสร้างร้านค้า ในลักษณะที่เรียกว่า “Direct Manipulation” ซึ่งเป็นรูปแบบการโต้ตอบระหว่างผู้ใช้กับระบบ โดยตรง หรือที่เข้าใจกันโดยทั่วไปว่าเทคนิคแบบ ลากและวาง(Drag&Drop)กล่าวคือผู้ให้บริการ จะสร้างหน้าร้านค้าเริ่มต้นมาให้ก่อนหลังจากนั้น เจ้าของเว็บสามารถคลิกเลือกต�ำแหน่งต่างๆ บน เว็บไซต์ที่ต้องการแก้ไขข้อมูลได้ทันทีถือเป็น รูปแบบการใช้งานที่ง่ายกว่ายุคก่อนที่ส่วนใหญ่ มักจะออกแบบเป็นแบบฟอร์มให้กรอกข้อมูล โดยไม่ได้แสดงตัวอย่างร้านค้าจริงให้เห็นในทันที www.lnwshop.com www.pro-webbiz.com (ใช้เทคโนโลยีแบบ Direct Manipulation) ตัวอย่างขั้นตอนการสร้างร้านค้าออนไลน์ ผ่านเว็บไซต์ส�ำเร็จรูป (3) การใช้งานระบบหลังร้าน : เป็นระบบที่ผู้ให้บริการเว็บส�ำเร็จรูป จัดเตรียมไว้เพื่ออ�ำนวยความสะดวกให้เจ้าของ เว็บไซต์ใช้ในการดูแลบริหารจัดการธุรกิจของ ตนเองได้สะดวกยิ่งขึ้น เช่น ระบบสต็อกสินค้า ระบบติดตามการช�ำระเงินระบบสมาชิกระบบ ดูแลลูกค้าอย่างไรก็ตามความสามารถในส่วนนี้ อาจมีหรือไม่มีก็ได้ขึ้นอยู่กับผู้ให้บริการนั้นๆ เป็นหลัก ดังนั้น ก่อนตัดสินใจเลือกใช้บริการ เว็บไซต์ส�ำเร็จรูปรายใด ก็อาจต้องพิจารณา ถึงความสามารถในส่วนนี้ด้วย เพราะมันจะ เป็นเครื่องมือที่เจ้าของธุรกิจสามารถน�ำไปใช้ ประโยชน์ได้ระดับหนึ่งเลยทีเดียว www.readyplanet.com www.lnwshop.com ตัวอย่างระบบหลังร้านของเว็บไซต์ส�ำเร็จรูป ระบบสมาชิก ระบบ vela Commerce ระบบผู้ช่วย ระบบอัลบั้มรูป SMS l เพิ่มสินค้า แก้ไข ลบ เพิ่มรูปสินค้า l รายการสั่งซื้อ l รายการแจ้งช�ำระเงิน l รายการจัดส่งสินค้า l เช็คข้อความติดต่อเรา l จัดการภาพสินค้า จัดการหลังร้าน
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 71 (4) การติดตั้งส่วนประกอบเสริม : อันที่จริงแล้ว เมื่อได้สร้างเว็บไซต์ส�ำเร็จรูปในขั้นตอนที่ 1 ถึง 3 ก็ถือว่า เราได้เว็บไซต์พร้อมที่จะขายสินค้าผ่านช่องทางออนไลน์เรียบร้อยแล้ว แต่ดังที่ ได้อธิบายไปในบทที่ผ่านมาว่าการออกแบบเว็บไซต์ที่ดีควรมีความสวยงามและ ดึงดูดใจผู้ใช้งาน ดังนั้น ในทางปฏิบัติอาจต้องมีการติดตั้งส่วนประกอบเสริม เพิ่มเติม หรือที่นิยมเรียกกันว่า Widget เพื่อเรียกความน่าสนใจให้กับเว็บไซต์ มากยิ่งขึ้นซึ่งโดยทั่วไปแล้วเว็บไซต์ส�ำเร็จรูปส่วนใหญ่ก็มักจะมีความสามารถในการ ติดตั้งส่วนประกอบเสริมต่างๆ ลงบนเว็บได้แต่จะมีมากหรือน้อยก็ขึ้นอยู่กับ ผู้ให้บริการนั้นๆ อาทิเช่น LinkBanner:เป็นWidgetช่วยสร้างแบนเนอร์โฆษณาบนต�ำแหน่ง ต่างๆ ของเว็บไซต์ Form :เป็นการสร้างแบบฟอร์มเพื่อให้ผู้เยี่ยมชมเว็บไซต์ป้อนข้อมูล เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสั่งซื้อสินค้า แบบฟอร์ม การติดต่อ เป็นต้น HTML : เป็นการเพิ่ม Widget โดยการน�ำเอาโค้ด HTML มาใส่เอง เช่น การติดตั้งตัววัดสถิติ การใส่เสียง วิดีโอต่างๆ บนเว็บไซต์ เป็นต้น Google Map : เป็นการน�ำเอาแผนที่ Google Map มาวางไว้ บนหน้าเว็บไซต์ โดยเราสามารถใช้ประโยชน์ในการก�ำหนดต�ำแหน่ง ของร้านค้าได้ในกรณีที่เราท�ำธุรกิจแบบมีหน้าร้าน ตัวอย่างการติดตั้งส่วนประกอบเสริม บนเว็บไซต์ส�ำเร็จรูป www.lnwshop.com www.blogger.com
WebsiteD.I.Y. 72 นอกจาก4ขั้นตอนการสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปที่กล่าวไปนั้นยังมีข้อควรค�ำนึงถึง ซึ่งจะมีผลต่อความน่าเชื่อถือของเว็บไซต์ และช่วยท�ำให้เว็บนั้นๆ ติดล�ำดับในเว็บค้นหาต่างๆ อย่างเช่น Google ได้ดียิ่งขึ้น ดังนี้ (1) รูปภาพสินค้า ควรเป็นการถ่ายภาพที่เน้นหลายมุมมอง หรือที่นิยมเรียกว่าการถ่ายภาพแบบ 360 องศา ลูกค้าสามารถเห็นสินค้าได้โดยรอบ นอกจากนี้ เทคนิคการจัดแสงและเงาของการถ่ายภาพ ก็เป็นสิ่งส�ำคัญเช่นเดียวกัน โดยทั่วไปแล้วจะต้องจัดแสงให้พอเหมาะและพยายามไม่ให้เกิดเงา ถ่ายภาพบนพื้นหลังสีเรียบก็จะได้ภาพถ่ายที่สวยงาม ตัวอย่างการจัดแสงส�ำหรับ การถ่ายภาพสินค้า (2) การก�ำหนดค�ำค้นหา (Keyword) การสร้างเว็บไซต์อีคอมเมิร์ซ ควรก�ำหนด Keyword หรือค�ำส�ำคัญเพื่อให้เว็บไซต์ที่พัฒนา ขึ้นนั้นถูกค้นพบบนเว็บไซต์ค้นหาต่างๆ เช่น Google ซึ่งมีอยู่หลายเครื่องมือที่สามารถน�ำมาช่วย ก�ำหนด Keyword ได้ อย่างเช่น Keyword Planner ซึ่งเป็นบริการดีๆ ที่พัฒนาโดย Google (https://adwords.google.com/ko/KeywordPlanner/Home) ตัวอย่างการแสดงภาพสินค้าแบบหลาย มุมมองของ www.zalora.com ตัวอย่างเครื่องมือวิเคราะห์ค�ำค้นหาของ www.google.com
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 73 (3) การก�ำหนดหมวดหมู่สินค้า (Category) การตั้งชื่อกลุ่มสินค้าก็เช่นเดียวกับ การก�ำหนด Keyword ที่จ�ำเป็นต้อง พิจารณาให้สอดคล้องกับสินค้านั้นๆ เพราะนอกจากจะส่งผลต่อการถูกค้นพบ ในเว็บไซต์ค้นหาต่างๆ แล้ว ประโยชน์ อีกด้านหนึ่งก็คือ จะช่วยให้ผู้เยี่ยมชมเว็บ สามารถเข้าถึงสินค้าที่ต้องการได้ง่ายยิ่งขึ้น เช่น เว็บไซต์ lazada.co.th นอกจาก จะแบ่งสินค้าออกเป็นหมวดหมู่เพื่อให้ง่าย ต่อการค้นหาแล้ว ยังเพิ่มลูกเล่นให้ผู้เยี่ยมชม สามารถเลือกดูจากยี่ห้อสินค้า และตาม ช่วงราคาอีกด้วย จะเห็นว่าการสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปนั้น ไม่มีความยุ่งยากอะไรเลยเพราะแม้จะไม่ใช่โปรแกรมเมอร์ ก็สามารถมีเว็บไซต์ที่ทั้งสวยและดูดีได้ อย่างไรก็ตาม สิ่งที่ ควรจะต้องค�ำนึงถึงในการเลือกใช้เว็บไซต์เหล่านี้คือ บริการ ที่ได้รับจากผู้ให้บริการที่นอกเหนือจากพื้นที่เว็บไซต์ เพราะ บางเว็บไซต์ก็มีบริการอบรมให้ความรู้เกี่ยวกับการสร้าง ร้านค้าออนไลน์ บริการวิเคราะห์ค่าสถิติต่างๆ ซึ่งสิ่งเหล่านี้ แม้ไม่ใช่ปัจจัยหลักในการพัฒนาเว็บแต่ก็เป็นสิ่งที่มีประโยชน์ ต่อการท�ำธุรกิจอีคอมเมิร์ซเช่นเดียวกัน ตัวอย่างการก�ำหนดหมวดหมู่สินค้า ของ www.lazada.co.th
WebsiteD.I.Y. 74 e-Marketplace หรือตลาดกลางพาณิชย์อิเล็กทรอนิกส์ เป็นเว็บไซต์ ในรูปแบบของ“ตลาดนัดออนไลน์ขนาดใหญ่”เป็นบริการที่เปิดให้เจ้าของกิจการ ไม่ว่าจะเป็นขนาดเล็กหรือใหญ่ สามารถน�ำธุรกิจของตนมาประชาสัมพันธ์ ผ่านe-Marketplaceในรูปแบบการสร้างเว็บไซต์แค็ตตาล็อกสินค้าอีกทั้งผู้ยัง ไม่มีเว็บไซต์ก็สามารถสร้างเว็บขนาดย่อมๆ ผ่าน e-Marketplace ได้เช่นกัน ดังนั้นเราจะพบว่าe-Marketplaceต่างๆจึงเต็มไปด้วยร้านค้ามากมายมีการจัด แบ่งหมวดหมู่อย่างเป็นระบบระเบียบให้ผู้เยี่ยมชมสามารถค้นหาร้านค้าได้ง่าย และสะดวกโดยสามารถแบ่งเป็น 2 ลักษณะใหญ่ๆ ได้แก่ B2C และ B2B ดังนี้ B2C e-Marketplace เป็นตลาดกลางระหว่างธุรกิจร้านค้า (Business) ตรงไปยังผู้บริโภคคนสุดท้าย (Consumer) ตลาดกลางลักษณะนี้ จึงคล้ายกับช้อปปิ้งมอลล์ขนาดใหญ่ (Shopping Mall) ที่ลูกค้าสามารถเลือก ซื้อสินค้าจากร้านค้าต่างๆภายในมอลล์แห่งนั้นได้ซึ่งมักจะเป็นการซื้อปลีกคือ ซื้อคราวละไม่มากผ่านระบบตะกร้าสินค้า (Shopping Cart) 3.2 e-Marketplace... ได้ทั้งเว็บได้ทั้งลูกค้า ตัวอย่างเว็บไซต์ผู้ให้บริการ B2C e-Marketplace www.tarad.com www.lnwmarket.com www.weloveshopping.com www.priceza.com
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 75 B2B e-Marketplace เป็นตลาดกลางระหว่างผู้ที่ท�ำธุรกิจ ด้วยกันเอง (Business to Business) เพื่อท�ำการค้าระหว่างธุรกิจกับธุรกิจ โดยตรง เช่น การซื้อสินค้า หรือวัตถุดิบที่ใช้ในการผลิตจากผู้ผลิต เพื่อน�ำไป แปรรูป หรือน�ำไปขายให้กับผู้บริโภคอีกที ดังนั้น ลักษณะการซื้อสินค้า ในตลาดกลางนี้จะซื้อคราวละมากๆ และส่วนใหญ่จะไม่นิยมซื้อผ่านระบบ ตะกร้าสินค้า แต่มักจะเจรจาต่อรองราคากันผ่านระบบแบบสอบถามราคา ออนไลน์(InquiryForm)ที่ตลาดกลางฯเป็นผู้จัดเตรียมไว้ให้ผู้ซื้อและผู้ขาย ตัวอย่างเว็บไซต์ผู้ให้บริการ B2B e-Marketplace www.alibaba.com www.ec21.com www.globaltrade.net www.thaitrade.com www.b2bthai.com www.lnwmarket.com www.pantavanij.com www.priceza.com www.quinl.com www.shoppingthai.com www.tarad.com www.thaiSecondhand.com www.thaitambon.com www.thaitechno.net www.weloveshopping.com www.alibaba.com www.amazon.com www.ec21.com www.eceurope.com www.ecplaza.net www.eng.bestsme.com www.europages.com www.globaltrade.net www.rusbiz.com www.thaitrade.com www.tradekey.com www.verticalzoom.com รายนามเว็บไซต์ผู้ให้บริการ e-Marketplace* * อ้างอิงข้อมูลบางส่วนจาก www.pawoot.com Local Global
WebsiteD.I.Y. 76 ผู้ให้บริการเว็บไซต์e-Marketplaceส่วนใหญ่มุ่งเน้นสนับสนุนด้านการน�ำผู้ซื้อ และผู้ขายให้มาพบปะ และค้าขายกัน ซึ่งมีบริการหลักๆ 3 ลักษณะ ได้แก่ บริการต่างๆ ใน e-Marketplace 1) สารบัญธุรกิจ (Business Directory) e-Marketplace จะท�ำหน้าที่รวบรวม ข้อมูลสินค้าและร้านค้าต่างๆ บนเว็บไซต์ เปรียบเสมือนสารบัญธุรกิจ โดยจะมีการจัด แบ่งออกเป็นหมวดหมู่ เพื่อให้ผู้ซื้อสามารถ ค้นหา เลือกชมข้อมูลสินค้า/ร้านค้าต่างๆ ได้ง่ายและสะดวก ตัวอย่างหน้าสารบัญธุรกิจของ www.thaitechno.net ตัวอย่างหน้าประกาศความต้องการทางธุรกิจ ของ www.thaitrade.com 2)ประกาศความต้องการทาง ธุรกิจ (Trade Leads) เป็นบริการที่ผู้ซื้อสามารถใช้ เว็บไซต์ e-Marketplace เป็นช่องทาง ในการประกาศต้องการซื้อสินค้าของ ตนไปสู่ผู้ขาย ขณะเดียวกันผู้ขาย ก็สามารถประกาศความต้องการ ขายไปยังผู้ซื้อเช่นเดียวกัน เว็บไซต์ e-Marketplace จึงเป็นตลาดที่ เชื่อมโยงผู้ซื้อผู้ขายให้ได้พบกันเกิดการ ติดต่อและท�ำการค้ากันโดยตรง
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 77 3) บริการเว็บไซต์ส�ำเร็จรูป หรือ แค็ตตาล็อกสินค้าออนไลน์ (Web Template) เจ้าของธุรกิจสามารถใช้บริการจาก e-Marketplace เพื่อจัดท�ำเว็บไซต์ส�ำเร็จรูป ขนาดย่อมๆ ที่มีการน�ำเสนอข้อมูลสินค้า/ บริการ รวมทั้งข้อมูลร้านค้าได้ด้วยตัวเอง ซึ่ง ลักษณะเด่นของบริการนี้ก็คือ นอกจากจะได้ เว็บไซต์ที่พร้อมใช้งานแล้ว ข้อมูลในร้านค้า จะถูกน�ำไปรวบรวมและแยกเป็นหมวดหมู่ไว้ ในสารบัญธุรกิจของ e-Marketplace นั้นๆ อีกด้วย การสร้างเว็บไซต์โดยใช้ e-Marketplace ไม่มีความยุ่งยากซับซ้อนแต่อย่างใดสามารถใช้ หลักการเช่นเดียวกับการสร้างเว็บไซต์ส�ำเร็จรูป ที่อธิบายไปในหัวข้อก่อนหน้า อย่างไรก็ตาม ด้วยคุณสมบัติพิเศษของ e-Marketplace ที่นอกจากจะท�ำให้มีเว็บไซต์ย่อมๆ แล้ว เว็บ ดังกล่าวยังจะได้รับการประชาสัมพันธ์ใน e-Marketplaceนั้นๆอีกด้วยดังนั้นในหัวข้อนี้ จะได้แนะน�ำถึงขั้นตอนพร้อมเทคนิคการเปิด ร้านค้าออนไลน์ผ่าน e-Marketplace ดังนี้ ตัวอย่างเว็บไซต์ส�ำเร็จรูปของ www.alibaba.com ขั้นตอน การพัฒนาเว็บไซต์ e-Marketplace 1. สมัครสมาชิก ขั้นตอนการพัฒนาเว็บไซต์ผ่าน e-Marketplace 2. สร้างร้านค้าออนไลน์ 3. การจัดการหลังร้าน
WebsiteD.I.Y. 78 1) การลงทะเบียน : เป็นขั้นตอนแรกของการสร้างร้านค้าออนไลน์ผ่าน เว็บไซต์ผู้ให้บริการ e-Marketplace วิธีการมีความ คล้ายคลึงกับการสร้างเว็บไซต์ส�ำเร็จรูป แต่สิ่งที่อาจมี ความแตกต่างกันบ้างก็คือผู้ให้บริการe-Marketplace บางเว็บจะก�ำหนดให้สมาชิกใส่“ค�ำค้นหาหรือKeyword” ที่เกี่ยวข้องกับธุรกิจ เพื่อให้ผู้เยี่ยมชมเว็บง่ายต่อ การค้นหาธุรกิจตาม Keyword ดังนั้น ในขั้นตอนนี้ จึงไม่ควรละเลยตั้ง Keyword ปลอมๆ ขึ้นไป แต่ควร ก�ำหนดให้เหมาะสมกับธุรกิจมากที่สุด โดยพึงระลึก ไว้เสมอว่าควรเป็นค�ำที่ลูกค้าส่วนใหญ่นิยมใช้ในการ ค้นหา ไม่ใช่ค�ำที่เราต้องการค้นหา ตัวอย่างขั้นตอนการสมัครสมาชิก www.tradekey.com 2) สร้างร้านค้าออนไลน์ : การสร้างร้านค้าออนไลน์ผ่าน e-Marketplace มีวิธีการใกล้เคียงกับการสร้างเว็บไซต์ส�ำเร็จรูป กล่าวคือหลักๆเป็นการป้อนข้อมูลร้านค้าข้อมูลและ รูปภาพสินค้า ข้อมูลการติดต่อ รวมทั้งการเลือก รูปแบบเทมเพลตให้กับเว็บไซต์ ตัวอย่างการสร้างร้านค้าออนไลน์ ผ่าน www.alibaba.com 3) การจัดการหลังร้าน : โดยทั่วไปแล้วเว็บไซต์ e-Marketplace จะมีความเป็นอิสระในการ จัดการได้น้อยกว่าเว็บส�ำเร็จรูป เนื่องจากมุ่งเน้นเรื่องการประชาสัมพันธ์ ธุรกิจของผู้ขายไปยังผู้ซื้อเป็นหลักมากกว่าเรื่องความสามารถของเว็บไซต์ ดังนั้น ในเรื่องการจัดการระบบหลังร้านต่างๆ อาจจะท�ำไม่ได้ในบาง e-Marketplace อย่างไรก็ตาม สิ่งที่ควรค�ำนึงถึงก็คือ ข้อมูลบางอย่าง ที่กรอกลงไปในระบบจะมีผลต่อการถูกค้นพบบนเว็บไซต์นั้นๆ ด้วย ก�ำหนด “Keyword”
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 79 ตัวอย่างการสร้างแค็ตตาล็อกสินค้า ผ่าน www.alibaba.com จะเห็นว่าการมีเว็บไซต์ผ่านเว็บส�ำเร็จรูปและe-Marketplace ดูผิวเผินแล้วอาจมีขั้นตอนที่ใกล้เคียงกัน แต่เมื่อพิจารณา ในรายละเอียดแล้ว จะมีความแตกต่างกันตั้งแต่วัตถุประสงค์ ในการจัดท�ำเพราะเว็บส�ำเร็จรูปจะมีจุดเด่นเรื่องความสามารถของ เว็บไซต์ในขณะที่e-Marketplaceจะมุ่งเน้นการประชาสัมพันธ์ ธุรกิจของผู้ขายไปยังผู้ซื้อมากกว่า ดังนั้น การพิจารณาว่า จะเลือกสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปหรือe-Marketplaceนั้น จึงขึ้นอยู่กับวัตถุประสงค์ของเจ้าของเว็บเป็นส�ำคัญอย่างไรก็ตาม ก็ไม่ได้มีข้อจ�ำกัดว่าหากท�ำเว็บส�ำเร็จรูปแล้วจะมีเว็บผ่าน e-Marketplace ไม่ได้ ดังนั้น เราจึงสามารถที่จะมีเว็บไซต์ โดยใช้เครื่องมือทั้งสองแบบนี้ร่วมกันได้ซึ่งย่อมจะส่งผลดีต่อธุรกิจ ได้มากขึ้นนั่นเอง เช่นการก�ำหนดกลุ่มสินค้า(Category)การตั้งชื่อสินค้า (Product Name) การก�ำหนดค�ำค้นหา (Keyword) การก�ำหนดสถานะของสินค้า นอกจากนี้ ในบางเว็บ ยังก�ำหนดเงื่อนไขเกี่ยวกับความสมบูรณ์ของข้อมูล หากใครมีข้อมูลที่สมบูรณ์กว่า ก็จะมีโอกาสติดล�ำดับ การค้นหามากกว่าเว็บที่มีข้อมูลไม่ครบถ้วน เช่น รูปภาพสินค้า เบอร์โทรศัพท์ ข้อมูลบริษัท ดังนั้น การสร้างร้านค้าออนไลน์ผ่าน e-Marketplace จึง ควรศึกษาหลักการค้นหาข้อมูลจาก e-Marketplace นั้นๆ เท่าที่จะท�ำได้ เพื่อเพิ่มโอกาสทางธุรกิจให้มาก ยิ่งขึ้นนั่นเองเช่นภาพด้านล่างเป็นการสร้างแค็ตตาล็อก สินค้าผ่านเว็บไซต์ alibaba.com ซึ่งต้องมีการใส่ รูปภาพสินค้าก�ำหนดชื่อสินค้าค�ำค้นหาและหมวดหมู่ สินค้า เป็นต้น โดยข้อมูลเหล่านี้จะส่งผลต่อผลลัพธ์ การค้นหาภายในเว็บไซต์ alibaba.com
WebsiteD.I.Y. 80 การสร้างเว็บไซต์ด้วยเว็บไซต์ส�ำเร็จรูปและe-Marketplaceนั้นเป็นการสร้าง เว็บไซต์ที่ง่ายมาก เนื่องจากเราไม่ต้องใช้ความรู้ด้านการเขียนโปรแกรมคอมพิวเตอร์ ใดๆ เลย อีกทั้งขั้นตอนเกี่ยวกับการจัดการเครื่องแม่ข่ายก็ถูกดูแลโดยเว็บไซต์ ผู้ให้บริการอยู่แล้ว แต่บริการทั้งสองประเภทนี้ก็มีข้อจ�ำกัดที่ส�ำคัญคือ ไม่สามารถ ปรับรูปแบบของเว็บไซต์ได้ตามที่ต้องการทั้งหมดดังนั้นจึงมีรูปแบบการสร้างเว็บไซต์ขึ้น อีกลักษณะหนึ่งคือการใช้โปรแกรมส�ำเร็จรูป หรือที่เรียกว่า CMS ซึ่งเป็นโปรแกรม ที่จัดท�ำเว็บไซต์ให้โดยอัตโนมัติ แต่กรณีนี้มีความจ�ำเป็นต้องจัดการเครื่องแม่ข่าย ด้วยตนเอง รวมถึงการดูแลเว็บไซต์และระบบเครื่องแม่ข่ายด้วยตนเอง 3.3 CMS...โปรแกรมแต่งเว็บ ตามจินตนาการ
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 81 CMSย่อมาจากContentManagementSystemเป็นเหมือน โปรแกรมแบบหนึ่งที่มีผู้พัฒนามาจากภาษาคอมพิวเตอร์ที่ใช้ในเว็บไซต์ เช่นPHP,Python,ASP,JSPเป็นระบบที่น�ำมาช่วยในการสร้างและบริหาร เว็บไซต์แบบส�ำเร็จรูป โดยในการใช้งาน CMS นั้น ผู้ใช้งานแทบไม่ต้องมี ความรู้ในด้านการเขียนโปรแกรมก็สามารถสร้างเว็บไซต์ได้ตัวของCMSเอง จะมีโปรแกรมแถมมาและสามารถแทรกเองได้มากมายเช่น Webboard ระบบจัดการป้ายโฆษณา ระบบนับจ�ำนวนผู้ชม แม้แต่กระทั่งตะกร้า สินค้า และอื่นๆ อีกมากมาย จึงสามารถน�ำมาประยุกต์ใช้กับการสร้าง เว็บไซต์อีคอมเมิร์ซได้ ในปัจจุบันมี CMS ที่พัฒนามาให้ใช้งานฟรีมากมาย ท�ำให้เราสามารถเริ่มต้นการท�ำเว็บไซต์อีคอมเมิร์ซเพื่อขายสินค้าออนไลน์ ได้ง่ายเช่นกัน โดยเราสามารถใช้ CMS เพื่อสร้างเว็บไซต์ได้หลายประเภท เช่น เว็บไซต์ส่วนตัว (Personal Web Sites) เว็บไซต์ที่ใช้ในองค์กร (Intranet Web Sites) เว็บไซต์เชิงพาณิชย์ (Commercial Web Sites) เว็บท่า (Portals) เว็บไซต์ที่ไม่แสวงหาก�ำไร (Non-Profit Web Sites) เว็บไซต์ที่สร้างจาก Flash (Integrated Flash Sites) ตัวอย่างผู้ให้บริการโปรแกรม CMS
WebsiteD.I.Y. 82 จุดเด่นของการพัฒนาเว็บไซต์ผ่านโปรแกรม CMS มีหลายประการ คือ เราไม่จ�ำเป็นต้องมีความรู้เรื่องการท�ำเว็บไซต์มากมาย เพียงแค่เคยพิมพ์ หรือโพสต์ข้อความทางอินเทอร์เน็ตก็สามารถมีเว็บไซต์เป็นของตัวเองได้โดยใช้เวลา ไม่มากค่าใช้จ่ายไม่สูงอีกทั้งยังสามารถจัดหาระบบPlug-inมาใส่เพิ่มได้มากมาย อย่างเช่น ระบบแกลลอรี่ ตะกร้าสินค้า เป็นต้น อย่างไรก็ตาม โปรแกรม CMS ก็ยังมีข้อจ�ำกัดอยู่บ้าง เช่น ผู้ใช้จะต้องศึกษาระบบ CMS ที่ผู้พัฒนาสร้างขึ้นมา เช่น จะต้อง ใส่ข้อความลงตรงไหน จะต้องแทรกภาพอย่างไร อย่างไรก็ตาม ความล�ำบากนี้จะเป็นเพียงแค่ช่วงแรกเท่านั้น ในกรณีที่ผู้ใช้ต้องการออกแบบหน้าตาของเว็บหรือ Theme เอง จะต้องใช้ความรู้มากกว่าปกติ เนื่องจาก CMS มีหลายๆ ระบบ มารวมกันท�ำให้เกิดความยุ่งยากส�ำหรับผู้ที่ไม่มีความรู้ ความยุ่งยากในการติดตั้งและก�ำหนดค่าของเครื่องแม่ข่าย อย่างไรก็ตามปัจจุบันมีผู้ให้บริการเครื่องแม่ข่ายมากมายที่ติดตั้งระบบ CMS ให้โดยไม่เสียค่าใช้จ่ายหากเราเลือกใช้บริการเครื่องแม่ข่าย ของผู้ให้บริการนั้นๆ เมื่อพิจารณาจุดเด่นและข้อจ�ำกัดของ CMS แล้วจะพบว่าโปรแกรม ลักษณะนี้เป็นระบบที่น่าใช้งานและสามารถน�ำมาประยุกต์ใช้กับการสร้างเว็บไซต์ ขายสินค้าออนไลน์ได้เป็นอย่างดีโดยเราสามารถแบ่ง CMS ออกเป็น 2 ส่วน หลักๆ ได้แก่ 1)Frontendคือส่วนที่แสดงผล ให้กับผู้เข้าชมเว็บไซต์เห็นกล่าวง่ายๆ ก็คือหน้าเว็บไซต์นั่นเอง 2)Backendคือส่วนการจัดการ เนื้อหารวมถึงโครงสร้างของ เว็บไซต์ หรือเรียกอีกชื่อหนึ่งว่า ส่วน Admin นั่นเองตัวอย่างหน้าจอ Back end ของ Joomla
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 83 อย่างไรก็ตาม การใช้งาน CMS เพียงอย่างเดียวอาจไม่เพียงพอส�ำหรับ เว็บไซต์แบบอีคอมเมิร์ซดังนั้นจึงมีผู้พัฒนาโปรแกรมส่วนเสริมหรือที่มักเรียกกัน ว่าPlug-inเพื่อการซื้อขายออนไลน์ได้เช่นโปรแกรมVirtrueMartโดยส่วนเสริม ดังกล่าวจะมีระบบตะกร้าสินค้า รวมทั้งระบบอื่นๆ ทั้งหน้าร้านและหลังร้าน เพื่อสร้างให้เว็บนั้นๆ มีความพร้อมส�ำหรับการซื้อขายออนไลน์ เช่น ระบบจัดการจ�ำนวนสินค้าและหมวดหมู่สินค้าได้ไม่จ�ำกัด ใส่รูปภาพ หรือไฟล์ให้กับสินค้าได้ ใส่รายละเอียดให้กับสินค้าได้ ระบุราคาให้กับตัวสินค้าได้ การจัดการระบบลูกค้า การจัดการระบบสต็อกสินค้า ระบบเตือนลูกค้าของเราเมื่อมีสินค้าอยู่ในสต็อกแล้ว สามารถน�ำเข้า หรือเอาออกเอกสารข้อมูลสินค้าในรูปแบบ CSV จึง สามารถน�ำไปเปิดในโปรแกรมประเภท Spreadsheet เช่น Microsoft Excel ได้ ระบบสถิติร้านค้าเพื่อน�ำไปใช้ในการวางแผนการตลาด
WebsiteD.I.Y. 84 การพัฒนาเว็บไซต์ในสไตล์ D.I.Y. ไม่ว่าจะเป็นการสร้าง ร้านค้าออนไลน์ผ่านเว็บไซต์ส�ำเร็จรูป ผ่าน e-Marketplace หรือ CMS ก็ตาม เป็นเรื่องง่ายๆ ที่ทุกคนสามารถท�ำได้โดยไม่ต้องพึ่งพา โปรแกรมเมอร์ไม่ต้องเตรียมSoftwareหรือHardwardให้ยุ่งยาก มากมายแต่สิ่งส�ำคัญคือต้องก�ำหนดวัตถุประสงค์ในการท�ำที่ชัดเจน บวกกับความมุ่งมั่นตั้งใจและเริ่มลงมือท�ำทันที เพียงเท่านี้ก็เชื่อว่า เว็บสวยและดีจะอยู่ในมือเราอย่างแน่นอน สรุปจุดเด่นของ การพัฒนาเว็บไซต์ แบบ D.I.Y. จะเห็นได้ว่าการใช้โปรแกรมCMSเพื่อสร้างเว็บนั้นจะมีขั้นตอน ที่ยุ่งยากกว่าเว็บไซต์ส�ำเร็จรูป และ e-Marketplace แต่ก็มีความ สามารถที่มากกว่าในด้านการติดตั้งและปรับแต่งสิ่งต่างๆบนเว็บไซต์ ได้ยืดหยุ่น อย่างไรก็ตาม แม้ว่าเว็บไซต์แบบ CMS จะมีขั้นตอน ที่ยุ่งยากแต่ก็ไม่ได้ยากเกินไปส�ำหรับผู้พัฒนาเว็บไซต์มือใหม่ อีกทั้ง ผู้พัฒนาในประเทศไทยยังมีการปรับแต่ง CMS และส่วนเสริมต่างๆ ให้รองรับภาษาไทยท�ำให้การใช้งานไม่ได้ยากอย่างที่คิด
บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 85 1. ไม่ต้องมีความรู้ด้านการเขียนโปรแกรม 2. ไม่ต้องจัดการด้านเครือข่ายคอมพิวเตอร์ 3. มีระบบจัดการหลังร้าน 4. ติดตั้งโปรแกรมเสริม (Plug in) ได้ 5. ช่วยประชาสัมพันธ์ธุรกิจ 6. มีมาตรฐานและผู้ใช้งานทั่วโลก 7. สามารถพัฒนาตามความต้องการได้อิสระ ความสามารถ เว็บส�ำเร็จรูป e-Marketplace CMS
เว็บสวย...ก็ไร้ประโยชน์ หากผู้คนไม่รู้จักมักจี่ พัทธนันท์ ธรรมจะดี วิศวกรซอฟต์แวร์สาวสวย กับ WEB 3.0 @ ETDA
04 แต่งเว็บขั้นเทพ ในยุคเว็บ 3.0
WebsiteD.I.Y. 88 พัฒนาการของอินเทอร์เน็ตนั้นไม่มีวันหยุด จริงๆ จากยุคแรกหรือที่เรียกกันว่า เว็บ 1.0 จะมุ่งเน้นการสื่อสาร ทางเดียวคือ เจ้าของเว็บเป็น ผู้น�ำเสนอข้อมูลต่างๆโดยผู้ชม แทบไม่มีส่วนร่วมบนเว็บไซต์ เหล่านั้นเลย กระทั่งก้าว เข้าสู่ยุคเว็บ 2.0 ที่ผู้ใช้ สามารถสร้างเนื้อหาได้เอง พร้อมความสามารถใน การแบ่งปันเนื้อหาออกสู่สังคม ในวงกว้าง เช่น การเขียนบล็อก (Blog) การแชร์รูปภาพและไฟล์ มัลติมีเดียต่างๆ โซเชียลเน็ตเวิร์ก รวมทั้งเว็บอย่างเช่น Wikipedia คลังความรู้ ขนาดใหญ่ที่ถูกพัฒนาและต่อยอดออกไปอย่าง ไม่มีที่สิ้นสุด ในยุคนี้เรียกว่าเป็นยุคแห่งข้อมูล ที่มีปริมาณมหาศาลที่เกิดจากการสร้างและ แบ่งปันกันอยู่ตลอดเวลา ด้วยเหตุนี้ จึงเกิดเป็น วิวัฒนาการไปสู่เว็บ 3.0 ที่มีความสามารถ ในการจัดการกับข้อมูลขนาดใหญ่เหล่านั้น อีกทั้งยังมีจุดเด่นที่สามารถวิเคราะห์ความ ต้องการของผู้ใช้ให้เข้ามามีบทบาทต่อเว็บมากยิ่งขึ้น พูดง่ายๆ ก็คือ เว็บยุค 3.0 จะมีความชาญฉลาด เหนือความคาดหมายของผู้ใช้นั่นเอง
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 89 คงไม่มีใครปฏิเสธว่าการแข่งขันทางด้านการตลาดของธุรกิจ หลายๆ ประเภทนั้น เริ่มต้นจากการสร้างแบรนด์ หรือการท�ำให้ชื่อ ผลิตภัณฑ์ของตนเป็นที่รู้จักไปสู่กลุ่มลูกค้าเป้าหมายในธุรกิจอีคอมเมิร์ซ ก็เช่นเดียวกัน จุดเริ่มต้นส�ำคัญที่สุดคือการตั้งชื่อเว็บไซต์ หรือที่เรียกกัน ว่า“โดเมนเนม(DomainName)”เพราะเป็นการสร้างลักษณะเฉพาะ ของเว็บไซต์ (Brand Identity) อีกรูปแบบหนึ่ง 4.1 โดเมนเนม... ตั้งดีเว็บก็ดัง การพัฒนาเว็บไซต์ในยุค 3.0 จึงมีความยากกว่ายุคก่อนๆ แต่นั่นก็ไม่ใช่ อุปสรรคขวางกั้น เพราะเว็บไซต์ก็ยังถือเป็นสื่อที่ทรงพลังที่สุด และลูกค้าก็มักจะ นึกถึงเป็นล�ำดับแรกเมื่อต้องการท�ำความรู้จักกับธุรกิจของเรา ดังนั้น เนื้อหาในบทนี้ จะได้กล่าวถึงข้อควรปฏิบัติเพื่อเสริมสร้างความน่าเชื่อถือให้ลูกค้ากล้าคลิกสั่งซื้อสินค้า บนเว็บไซต์ อีกทั้งยังได้แนะน�ำถึงเรื่องหลักการตั้งชื่อเว็บไซต์ และวิธีเล็กๆ น้อยๆ ที่ จะท�ำให้เว็บของเราถูกค้นพบผ่านเว็บค้นหา หรือ Search Engine ต่างๆ อย่างเช่น Google อีกด้วย
WebsiteD.I.Y. 90 “โดเมนเนม” ถือเป็นประตูที่จะดึงให้ผู้สนใจสามารถเข้าไปยัง เว็บไซต์ดังนั้นจึงถือเป็นสิ่งส�ำคัญประการแรกที่จะต้องคิดให้ดีเพราะชื่อดี ก็มีส่วนสร้างเว็บไซต์ให้ประสบความส�ำเร็จ โดยหลักการตั้งชื่อ มีด้วยกัน หลายวิธีไม่ตายตัว ขึ้นอยู่กับชื่อนั้นๆ เข้ากับลักษณะของเว็บ และตรงใจ กับกลุ่มเป้าหมายมากน้อยเพียงใดทั้งนี้ก่อนที่จะตั้งชื่อเว็บก็ควรทบทวน ความเข้าใจว่าเว็บของเรานั้นเป็นเว็บแบบไหน ให้บริการอะไร ที่ส�ำคัญ จุดเด่นและข้อแตกต่างกับเว็บอื่นๆคืออะไรนั่นคือการค้นหาจุดขายให้ได้ ก่อน จากนั้นก็ควรเข้าใจกลุ่มเป้าหมายของเว็บด้วย ว่าพวกเขาเป็นใคร ต้องการอะไรและจะได้อะไรจากเว็บของเราเพื่อจะได้ตั้งชื่อเว็บให้สื่อถึง บริการ และตรงใจกลุ่มเป้าหมายให้มากที่สุด 1. ต้องสร้างแบรนด์ : หากมีชื่อบริษัท ชื่อสินค้า/บริการ ก็สามารถตั้งเป็นชื่อเว็บไซต์เพื่อสร้างแบรนด์ได้ อีกช่องทางหนึ่ง เช่น บริษัทชื่อ ABC ก็ตั้งชื่อเว็บว่า www.ABC.com อย่างไรก็ตาม เป็นที่ทราบกันว่าโดเมนเนมในโลกนี้ต้องไม่ซ�้ำกัน ดังนั้น ถ้าหากABC.comมีผู้แย่งจดทะเบียนไปแล้วอาจเลี่ยงไปใช้นามสกุลอื่น ที่สอดคล้องกับธุรกิจแทน เช่น .co.th, .net เป็นต้น นอกจากนี้ ชื่อแคมเปญการตลาดก็สามารถน�ำมาตั้งเป็นชื่อเว็บไซต์ได้เช่นกัน เรา มักจะพบเสมอว่าแบรนด์สินค้าชั้นน�ำต่างๆนิยมสร้างเว็บเฉพาะแคมเปญ นั้นๆเช่นChevronเปิดตัวเว็บไซต์ใหม่ว่าwww.WillYouJoinUs.com เพื่อแนะน�ำเรื่องการใช้พลังงาน เป็นต้น
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 91 2. ต้องสั้น : การตั้งโดเมนเนมสามารถก�ำหนดตัวอักษรได้ตั้งแต่ 3-63 โดยใช้ a-z, 0-9, ขีดกลาง (-) และ “.” เท่านั้น เราจะพบว่า เว็บไซต์ดังๆ ของเมืองไทยยุคแรกๆ นิยมใช้ชื่อภาษาไทย มาสะกดทับศัพท์เป็นภาษาอังกฤษ เช่น sanook.com, tarad.com, sabuy.com เพราะคนจะจดจ�ำได้ง่ายแถมยัง บ่งบอกถึงความเป็นไทยอีกด้วย 3. ต้องจ�ำง่าย : การตั้งโดเมนเนมต้องจ�ำง่าย พูดง่าย และสะกดง่าย เพราะบางครั้งการเข้าเว็บไซต์ก็มาจากการบอกต่อ หรือ การได้ฟังจากวิทยุหรือเห็นตามโฆษณาในสื่อต่างๆ ดังนั้น หากชื่อเว็บจดจ�ำได้ง่ายพูดและสะกดง่ายก็จะช่วยเพิ่มโอกาส ให้ลูกค้าเข้ามาที่เว็บไซต์ได้ถูกต้อง เช่น หากเราเปรียบเทียบ ชื่อเว็บไซต์ www.tohome.com กับ www.lazada.co.th จะเห็นว่า tohome มีชื่อที่สั้น กระชับ จ�ำง่าย สะกดง่าย และ สื่อความหมายธุรกิจได้ดีกว่า lazada เป็นต้น 4. ต้องตรงตัว : ชื่อเว็บไซต์ควรสื่อถึงสินค้า/บริการของธุรกิจ เพราะแม้ กฎข้อหนึ่งของการตั้งชื่อเว็บไซต์คือต้องสั้น แต่หากสามารถ ตั้งชื่อได้สื่อความหมายถึงธุรกิจได้อย่างชัดเจนแม้จะเป็นชื่อยาว ก็ยังสามารถจ�ำได้ง่ายเช่นกันเช่นwww.thaisecondhand.com เป็นต้น 5. ต้องหลีกเลี่ยงการใช้–(ขีดกลางหรือHyphen) แม้เป็นอักขระที่อนุญาตให้ใช้ในการตั้งชื่อเว็บไซต์ได้ แต่หากเลี่ยงได้ก็ควรเลี่ยง เพราะมันยากต่อการบอกต่อ ซึ่งนั่นหมายถึง เราอาจสูญเสียลูกค้าในอนาคตได้เลยทีเดียว
WebsiteD.I.Y. 92 ส�ำหรับการตั้งชื่อโดเมนนั้นอีกเรื่อง หนึ่งที่จ�ำเป็นต้องเข้าใจคือข้อความหลัง เครื่องหมาย “.” เช่น .com หรือ .co.th โดยความหมายมีดังนี้ อย่างไรก็ตาม มีข้อสังเกตว่าเมื่อจดชื่อโดเมนเรามักนึกถึง .com หรือดอทอื่น เช่น .org, .net เป็นต้น เอาเข้าจริงๆ การจดดอทเหล่านั้น อาจไม่มีการตรวจสอบตัวตนที่แท้จริงของเว็บหรือเจ้าของเว็บ แต่หากจด อะไรก็ตามที่ลงท้ายด้วย.thก็อาจมีการดูแลเกี่ยวกับการยืนยันตัวตนของ เว็บนั้นถึง 3 ขั้นด้วยกัน ขั้นแรกคือ THNIC ที่รับจดทะเบียน .th และหาก เราไปแจ้งกระทรวงพาณิชย์เพื่อให้เครื่องหมายรับรองความมีตัวตน หรือ Verified ก็เป็นอีกขั้นหนึ่ง ยิ่งไปกว่านั้น หาก สพธอ. หรือ ETDA ออกตัว Trust Mark ที่ดูแลความมีตัวตนของเว็บออกมาอีก ก็จะท�ำให้การยืนยัน ตัวตนของเว็บนั้นสามารถตรวจสอบได้แบบ Real Time เลยทีเดียว เลือกใช้ }ดอท~ อะไรดีหนอ? นามสกุล ย่อมาจาก วัตถุประสงค์ .com Commercial การค้า บริษัท องค์กร .net Network เครือข่าย .org Organization องค์กรไม่หวังผลก�ำไร .biz Business องค์กร บริษัท ห้างหุ้นส่วน คล้ายกับ .com .info Information ข้อมูลสารสนเทศ .us united states ประเทศสหรัฐอเมริกา ซึ่งจะต้องมีภูมิล�ำเนาอยู่ที่ประเทศนี้ด้วย .co.th commercial in Thailand บริษัท หรือองค์กร ที่ประกอบธุรกิจในประเทศไทย .ac.th academic in Thailand โรงเรียน มหาวิทยาลัย ที่ตั้งอยู่ในประเทศไทย .or.th organization in Thailand องค์กรไม่หวังผลก�ำไร ที่ตั้งอยู่ในประเทศไทย .in.th individual in Thailand บุคคลทั่วไป ที่อาศัยอยู่ในประเทศไทย .net.th network in Thailand หน่วยงาน/องค์กรท�ำธุรกิจด้านเครือข่าย ที่ตั้งอยู่ในประเทศไทย
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 93 4.2 บันไดหกขั้น ปั้นเว็บให้น่าซื้อ www.evenuwhitecream.com ร้านค้ายอดเยี่ยมประจ�ำปี 2012 ของ www.lnwshop.com 1. เว็บต้องสวย เว็บไซต์ก็เปรียบเสมือนหน้าร้านค้าทั่วๆ ไป หากมีการประดับตกแต่งร้าน อย่างสวยงาม ย่อมดึงดูดให้มีลูกค้าเข้าร้าน ในบางครั้งจะพบว่าสินค้ายี่ห้อเดียวกัน เมื่อน�ำไปวางอยู่ในร้านค้าต่างกันก็ส่งผลต่อการตั้งราคาด้วย เช่น ในห้างสรรพสินค้า ย่อมตั้งราคาได้สูงกว่าร้านค้าแผงลอยทั่วไป แม้จะเป็นผลิตภัณฑ์เดียวกันก็ตาม ซึ่งการ ปรับแต่งเว็บไซต์ให้สวยและดีนั้น ได้อธิบายโดยละเอียดแล้วในบทที่ 2 ลองน�ำเทคนิค เหล่านั้นไปปฏิบัติกันดูโดยวิธีที่จะช่วยทดสอบว่าเว็บของเราสวยแล้วหรือยังก็อาจลอง ถามจากเพื่อนฝูงหรือผู้เชี่ยวชาญด้านเว็บไซต์ให้ลองวิพากษ์วิจารณ์กันแบบเปิดใจหรือ บันไดหกขั้นปั้นเว็บให้น่าซื้อ วัดผลความส�ำเร็จ ท�ำให้น่าเชื่อถือ ข้อมูลร้านค้าชัดเจน ข้อมูลสินค้าต้องครบ สินค้าต้องเยอะ เว็บต้องสวย อีกวิธีก็คือเข้าร่วมการประกวดเว็บไซต์ ดังเช่น www.lnwshop.com ซึ่งเป็น ผู้ให้บริการเว็บส�ำเร็จรูปที่มีกิจกรรม จัดประกวดเว็บไซต์ยอดเยี่ยมเป็นประจ�ำ ทุกปี หลังจากเราได้ชื่อเว็บไซต์ที่ คิดว่าน่าจะถูกอกถูกใจลูกค้าอันเป็น ที่รักของเราแล้ว ต่อมาก็ควรปรับแต่ เว็บไซต์ให้ดูน่าเชื่อถือซึ่งเป็นสิ่งส�ำคัญ อย่างหนึ่งที่จะท�ำให้ลูกค้าเกิดความ เชื่อมั่น และตัดสินใจซื้อสินค้าบน เว็บไซต์ของเราในที่สุดดังนั้นในหัวข้อนี้ จะกล่าวถึงข้อควรปฏิบัติ 6 ประการ เพื่อท�ำให้เว็บไซต์น่าซื้อ
WebsiteD.I.Y. 94 2. สินค้าต้องเยอะไว้ก่อน ลองนึกภาพว่า ถ้าเราเดินไปที่ร้านค้าแบบมีหน้าร้าน และเห็นสินค้าโชว์อยู่เพียง ไม่กี่ชิ้นในขณะที่ร้านข้างๆขายของเหมือนกันแต่จัดวางสินค้าไว้มากมายเราจะเดินเข้า ร้านไหน?เชื่อว่าคนส่วนใหญ่ย่อมต้องการทางเลือกเยอะๆและเดินไปยังร้านที่มีสินค้า มากกว่าแน่นอนเพราะดูน่าซื้อและน่าเชื่อถือมากกว่า เช่นเดียวกับ เว็บอีคอมเมิร์ซ ก็ควรน�ำเสนอสินค้า/บริการบนเว็บไซต์ให้มากที่สุดเท่าที่จะท�ำได้ (ขั้นต�่ำ 20 – 30 รายการ)และพยายามเพิ่มจ�ำนวนสินค้าบนหน้าเว็บทุกครั้งที่มีสินค้าใหม่อย่างไรก็ตาม บางธุรกิจที่มีสินค้าจ�ำนวนน้อยเช่นขายรองเท้าแค่ยี่ห้อเดียวสินค้าก็มีแค่รายการเดียว แล้วจะให้ท�ำอย่างไร? กรณีนี้เราก็ยังสามารถน�ำเสนอรองเท้าบนหน้าเว็บแม้จะเป็น ยี่ห้อเดียว หรือรายการเดียวก็ตามให้มีความน่าสนใจมากขึ้นได้ เช่น การแสดง รองเท้าทุกสี ทุกขนาด หรือในทุกมิติ ไม่ว่าจะเป็นมุมภาพรวม ด้านข้าง ด้านบน ด้านล่าง ซึ่งจะช่วยเพิ่มความน่าสนใจในตัวสินค้าได้ไม่น้อยเลยทีเดียว นอกจากนี้ ประโยชน์อีกด้านของการมีข้อมูลบนเว็บไซต์จ�ำนวนมากก็คือ ธุรกิจของเราก็มีโอกาส ถูกค้นพบบนเว็บค้นหา (Search Engine) ต่างๆ ได้ดียิ่งขึ้นอีกด้วย ตัวอย่างการแสดงสินค้า “หมวดรองเท้า” บนเว็บไซต์ต่างๆ ตัวอย่างการแสดงสินค้า “หมวดของที่ระลึก” บนเว็บไซต์ต่างๆ www.shoes.com www.zalora.com www.postmart.co.th www.loftbangkok.com www.shoethailand.com www.baoji-shop.com www.premium360.com www.gifts.com
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 95 3. ข้อมูลสินค้าต้องครบถ้วน เจ้าของเว็บควรระลึกไว้เสมอว่า การขายสินค้าออนไลน์นั้นมีความแตกต่างจาก การขายแบบมีหน้าร้านตรงที่ “การสื่อสารกับลูกค้า” เพราะโอกาสที่ลูกค้าจะสอบถาม ข้อมูลเพิ่มเติมต่างๆ นั้นอาจเป็นไปได้ยาก ดังนั้น แนวทางหนึ่งที่สามารถท�ำได้ก็คือ การให้ข้อมูลสินค้าที่สมบูรณ์ครบถ้วนให้มากที่สุดเท่าที่จะท�ำได้ในระดับที่ลูกค้าสามารถ ตัดสินใจได้ทันทีว่าจะซื้อหรือไม่ซื้อสินค้าบนเว็บไซต์ของเราหรือไม่เพราะหากขาดข้อมูล ประกอบการตัดสินใจ นั่นอาจหมายถึงการสูญเสียโอกาสที่ลูกค้าจะออกจากเว็บไซต์ ของเรา แล้วไปซื้อกับเว็บอื่นที่ให้ข้อมูลครบถ้วนสมบูรณ์มากกว่า ตัวอย่างเช่น www.shoes.com และ www.zalora.com เว็บช้อปปิ้งออนไลน์ตามรูปด้านล่าง ที่พยายามให้ข้อมูลสินค้าอย่างครบถ้วนที่สุด ไม่ว่าจะเป็นชื่อสินค้า ราคา คุณสมบัติ ของสินค้า ระยะเวลาจัดส่ง หรือแม้แต่รูปสินค้าก็แสดงให้เห็นทุกสี ทุกมิติ เพื่อให้ลูกค้า ใช้ประกอบการตัดสินใจสั่งซื้อได้ทันที ตัวอย่างการน�ำเสนอข้อมูลสินค้าบนเว็บไซต์ต่างๆ www.zalora.com www.shoes.com
WebsiteD.I.Y. 96 4. ข้อมูลร้านค้าต้องชัดเจน ลูกค้าจะสั่งซื้อสินค้าบนเว็บไซต์ของเราหรือไม่นั้น ข้อมูลส�ำคัญ ประการหนึ่งที่มักใช้ประกอบการตัดสินใจก็คือ“ข้อมูลร้านค้า”เพราะเป็นสิ่ง ที่แสดงถึงตัวตนของเจ้าของร้านได้ระดับหนึ่ง ดังนั้น การจัดเตรียมข้อมูล ร้านค้าให้ชัดเจน ถูกต้องและครบถ้วน จึงเป็นสิ่งที่มีความส�ำคัญและ ต้องปฏิบัติอย่างหลีกเลี่ยงไม่ได้ ตัวอย่างของข้อมูลร้านค้า เช่น ประวัติความเป็นมาของร้านค้า รูปภาพร้านค้า พนักงาน รถขนส่งอุปกรณ์-เครื่องจักร วัน-เวลาท�ำการ วิธีการช�ำระเงิน ช่องทางติดต่อ(โทรศัพท์,มือถือ,แฟกซ์,อีเมล,e-ContactForm, Facebook, LINE ฯลฯ) รูปแผนที่ตั้งทั้งส�ำนักงานใหญ่และสาขา (ถ้าไม่มีแผนที่ลองใช้ Google Map ก็ได้) เครื่องหมายรับรองความน่าเชื่อถือ(ถ้ามี)เช่นISO,DBDRegistered, DBD Verified ท�ำวิดีโอแนะน�ำร้านค้าผ่านโซเชียล เช่น YouTube ตัวอย่างการน�ำเสนอข้อมูลร้านค้า ของ www.officemate.co.th
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 97 www.officemate.co.th www.shoes.com วิธีสร้างความเชื่อมั่นของเว็บไซต์ต่างๆ 5. ท�ำให้น่าเชื่อถือ อันที่จริงแล้วจาก 4 ข้อควรปฏิบัติข้างต้น ไม่ว่าจะเป็นการ สร้างเว็บไซต์ให้สวยงาม การแสดงสินค้าจ�ำนวนมาก มี รายละเอียดสินค้าครบถ้วน และข้อมูลร้านค้าที่ชัดเจน หาก สามารถท�ำได้ตามค�ำแนะน�ำก็จะช่วยสร้างความน่าเชื่อถือ ต่อลูกค้าได้มากแล้วแต่ยังมีองค์ประกอบอื่นๆ ที่ช่วยเพิ่มความ น่าเชื่อถือให้กับเว็บไซต์ได้มากขึ้นอีก เช่น ในขั้นตอนที่ลูกค้า ต้องช�ำระเงินออนไลน์ อาจสร้างความเชื่อมั่นด้วยการพัฒนา ความสามารถของเว็บไซต์เพื่อให้ได้การรับรองจากสถาบัน ที่มีความน่าเชื่อถือด้านความมั่นคงปลอดภัยต่างๆ ดังเช่น www.zalora.com วิธีสร้างความเชื่อมั่นของ www.zalora.com รวมทั้งการแสดงขั้นตอนการช�ำระเงินที่ชัดเจนแบบ Step by Step ก็ช่วยสร้าง ความมั่นใจต่อการช�ำระเงินของลูกค้าได้ไม่น้อย ยิ่งหากเจ้าของเว็บสามารถเพิ่ม การช�ำระเงินได้หลากหลายช่องทางโดยเฉพาะอย่างยิ่งการช�ำระเงินเมื่อได้รับสินค้า ก็ยิ่งเพิ่มความไว้วางใจมากขึ้นเช่นwww.officemate.co.thนอกจากนี้ยังสามารถ ใช้วิธีการให้คะแนน(Ratings)และแสดงความคิดเห็น(Reviews)ของลูกค้ารายอื่นๆ ที่มีต่อสินค้าเพราะโดยทั่วไปแล้วลูกค้ามักจะไม่เชื่อสิ่งที่เจ้าของเว็บพูดแต่จะเชื่อถือ ลูกค้าด้วยกันเอง เช่น www.shoes.com ที่เปิดเวทีให้ลูกค้าสามารถให้คะแนน และแสดงความคิดเห็นต่อสินค้าต่างๆ บนเว็บไซต์ได้ และลูกค้าจะยิ่งเชื่อถือมากขึ้น หากมีการแจ้งสถานะการจัดส่งของที่สามารถติดตามได้เองตลอด 24 ชั่วโมง เช่น www.postmart.co.th www.postmart.co.th
WebsiteD.I.Y. 98 6. ติดตั้งเครื่องมือวัดผลสถิติบนเว็บไซต์ เราจะทราบได้อย่างไรว่าผู้ชมเว็บไซต์ของเรานั้นเป็นใคร รู้จักเว็บไซต์ของเรา ได้อย่างไรผู้ชมเหล่านั้นใช้เวลาอยู่กับเว็บนานแค่ไหนและในที่สุดแล้วคลิกสั่งซื้อสินค้า บนเว็บไซต์หรือไม่ค�ำถามเหล่านี้ล้วนมีความส�ำคัญต่อการพัฒนาปรับปรุงเว็บไซต์รวมทั้ง การวางแผนการตลาดในกลุ่มลูกค้าเป้าหมายอีกด้วย ดังนั้น การสร้างเว็บไซต์กับการ ติดตั้งเครื่องมือวัดผลทางสถิติ หรือที่นิยมเรียกกันว่า Web Stat ลงบนเว็บไซต์นั้น จึงเป็นสิ่งที่มีความส�ำคัญไม่แพ้กันโดยปัจจุบันก็มีผู้ให้บริการดังกล่าวเป็นจ�ำนวนมาก ทั้งในและต่างประเทศ บางรายก็มีค่าใช้จ่าย เช่น Truehits.net และบางรายก็เป็น บริการฟรี เช่น Google Analytics www.truehits.net www.google.com/analytics ตัวอย่างผู้ให้บริการเก็บสถิติบนเว็บไซต์ www.histats.com
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 99 แม้ว่าเราจะพัฒนาเว็บให้สวยและดีเพียงใด หากปราศจากการ ประชาสัมพันธ์เว็บให้เป็นที่รู้จัก นั่นก็เท่ากับการท�ำเว็บที่สูญเปล่าโดยไม่เกิด ประโยชน์ใดๆ ซึ่งวิธีการประชาสัมพันธ์นั้นก็มีอยู่มากมายหลายวิธี บ้างก็ต้อง ใช้งบประมาณ แต่บางวิธีก็สามารถท�ำได้โดยมีต้นทุนไม่มาก เช่น การท�ำ SEO หรือค�ำเต็มๆ คือ Search Engine Optimization เป็นวิธีการหนึ่งในการ พัฒนาเว็บไซต์ให้สามารถค้นพบในเว็บค้นหา (Search Engine) ต่างๆ เช่น Google เป็นต้น 4.3 ล้วงลับปรับเว็บ ให้เป็นมิตรกับเสิร์ชเอนจิน
WebsiteD.I.Y. 100 SEO เป็นวิธีการปรับแต่งเว็บไซต์ให้ตรงกับ หลักการค้นหาของเสิร์ชเอนจินซึ่งหากสามารถ ท�ำได้จะท�ำให้ผลลัพธ์การค้นหาถูกจัดอยู่ในอันดับ ต้นๆ โดยวิธีการท�ำ SEO สามารถแบ่งเป็น 2 ส่วน ที่ควรท�ำไปพร้อมกันได้แก่ 1) On Page Factor คือ การปรับแต่งเว็บเพจให้ตรงกับหลักการค้นหาของเสิร์ชเอนจิน เช่น การปรับแต่งเนื้อหาของเว็บเพจให้มีคีย์เวิร์ด (Keyword) จ�ำนวนมากๆ สอดคล้องเป็นเรื่องราวเดียวกัน มีความทันสมัยตลอดเวลา และ การท�ำแผนผังเว็บไซต์ (Site Map) 2) Off Page Factor เป็นเทคนิค การใช้ปัจจัยภายนอกที่ไม่เกี่ยวข้องกับการปรับแต่งเว็บไซต์ของเจ้าของเว็บ เช่นการแลกลิงก์(Link)กับเว็บไซต์ที่มีเนื้อหาใกล้เคียงกันและการสร้างประกาศ ซื้อขายบนเว็บไซต์ต่างๆเป็นต้นอย่างไรก็ตามแม้ว่าการท�ำSEOจะเป็นวิธีทาง การตลาดออนไลน์ที่อาจไม่ต้องใช้เงินลงทุนหรือใช้เงินลงทุนไม่สูงแต่ก็เป็น เทคนิคที่ต้องอาศัยเวลากว่าจะเห็นผลรวมทั้งต้องใช้ประสบการณ์และ ความเชี่ยวชาญของผู้ท�ำด้วย ต�ำแหน่งการแสดงผลลัพธ์ในเว็บค้นหา (Search Engine) จากการท�ำ SEO (รูปภาพจาก www.switchconsultancy.com/what-is-seo-ppc)
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 101 แม้ว่าการท�ำ SEO จะเป็นวิธีทางการตลาดออนไลน์ที่อาจไม่ต้องใช้ เงินลงทุนหรือใช้เงินลงทุนไม่สูงแต่ก็เป็นเทคนิคที่ต้องอาศัยเวลากว่าจะเห็น ผลรวมทั้งต้องใช้ประสบการณ์และความเชี่ยวชาญของผู้ท�ำด้วยโดยมีเทคนิค ง่ายๆ ที่สามารถน�ำไปปรับใช้กับเว็บไซต์ได้ทันที ดังนี้ 1)ใส่ค�ำส�ำคัญ(Keyword)บนTitleของหน้าเว็บ เนื่องจากการใส่ค�ำส�ำคัญในต�ำแหน่งTitleหรือชื่อเว็บไซต์ จะช่วยท�ำให้ Search Engine รู้ว่าเว็บไซต์หน้านั้นๆ มีข้อมูลเกี่ยวกับอะไร ซึ่งข้อมูลนี้จะแสดงอยู่ในต�ำแหน่ง ด้านบนสุดของเว็บเบราว์เซอร์ ซึ่งต�ำแหน่งนี้ถือเป็นปัจจัย ที่ส�ำคัญส่วนหนึ่ง 2)ใส่ค�ำส�ำคัญ(Keyword)แบบตัวหนาทราบหรือไม่ ว่าขนาดตัวอักษรก็มีผลต่อการแสดงผลลัพธ์การค้นหาใน Search Engine ด้วย ดังนั้น ส�ำหรับค�ำส�ำคัญที่ต้องการ เน้น ก็ควรก�ำหนดเป็นตัวหนาและปรับให้มีขนาดใหญ่ โดยเฉพาะอย่างยิ่งในส่วนบนของเว็บไซต์ซึ่งจะท�ำให้Search Engine ทราบว่าเป็นค�ำส�ำคัญที่ต้องการเน้นเป็นพิเศษ เทคนิคเบื้องต้น การท�ำ SEO
WebsiteD.I.Y. 102 3) ใส่ค�ำส�ำคัญ (Keyword) ให้หนาแน่น ค�ำส�ำคัญ ที่ก�ำหนดในแต่ละหน้าเว็บไซต์ไม่จ�ำเป็นต้องมีเพียงจุดเดียว เราสามารถใส่ค�ำส�ำคัญได้ซ�้ำๆ ได้ แต่ก็ไม่ควรมากเกินไป จนดูไม่เป็นธรรมชาติ (แนะน�ำไม่ควรเกิน 20% ของจ�ำนวน อักษรในหน้าเว็บเพจนั้น) โดยเมื่อ Search Engine พบ ค�ำส�ำคัญซ�้ำๆ บ่อยๆ ก็จะตีความว่าเป็นเว็บที่เกี่ยวข้องกับค�ำ เหล่านั้น และน�ำไปแสดงเป็นผลลัพธ์ในการค้นหา ทั้งนี้ มีเครื่องมือที่สามารถน�ำมาใช้ในการวิเคราะห์ค�ำส�ำคัญ บนเว็บไซต์ได้คือ www.ranks.nl ตัวอย่างเช่น ลองค้นหา ค�ำส�ำคัญของwww.thaibodyguard.comซึ่งเป็นเว็บอีคอมเมิร์ซ ที่จ�ำหน่ายอุปกรณ์ป้องกันตัวส�ำหรับผู้หญิง จะพบว่าค�ำที่พบ 3 ล�ำดับแรกคือ com, thaibodyguard และสเปรย์พริกไทย ตามล�ำดับ โดยเมื่อเห็นข้อมูลดังกล่าวแล้วก็สามารถน�ำไป วิเคราะห์ต่อได้ทันทีว่าจะเน้นใช้ค�ำไหนเป็นค�ำส�ำคัญ ดังเช่น ตัวอย่างนี้ ก็ควรเน้นค�ำว่า สเปรย์พริกไทย อุปกรณ์ป้องกันตัว มากกว่าค�ำว่า com และ thaibodyguard www.ranks.nl เครื่องมือวิเคราะห์ค�ำส�ำคัญบนเว็บไซต์ Word com thaibodyguard สเปรย์พริกไทย อุปกรณ์ป้องกันตัว splitted mailsubscribe www ป้องกันตัว Repeats 6 T,U,D,K 5 T,HST,D,K 4 T,D,K 4 T,D,K 7 6 2 u,D,K 2 A,K Density 3.30% 2.75% 2.20% 2.20% 3.85% 3.30% 1.10% 1.10% Prominence 74.27 84.40 90.11 90.11 23.00 55.22 84.62 78.85 Wizard
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 103 4) เลี่ยงการออกแบบเว็บไซต์ด้วยแอนิเมชันหรือ รูปภาพเยอะเกินไป โดยไม่มีตัวหนังสืออธิบายเลย เนื่องจาก Search Engine จะพิจารณาเนื้อหาเฉพาะที่เป็น ข้อความเป็นหลัก ซึ่งหากเว็บไซต์มีแต่ภาพแล้ว Search Engine จะไม่เข้าใจเว็บไซต์ของเรานั่นเอง 5)ควรตั้งชื่อไฟล์รูปภาพและใส่ค�ำอธิบายให้กับภาพ โดยควรตั้งชื่อไฟล์รูปภาพที่ตรงกับKeywordที่ต้องการและควร ใส่ค�ำอธิบายภาพ เพื่อท�ำให้ Search Engine รู้ว่าภาพที่ใส่เข้าไป ในเว็บไซต์คือภาพอะไร และเกี่ยวข้องกับเนื้อหาอะไร 6) แลกลิงก์กับเว็บไซต์อื่นๆ เนื่องจากการแลกลิงก์กับ เว็บไซต์อื่นๆและมีเว็บไซต์อื่นๆลิงก์มาหาเว็บไซต์ของเราเยอะๆนั้น เป็นการแสดงว่าเว็บไซต์ของเราก�ำลังเป็นที่รู้จัก ได้รับความนิยม Search Engine ก็จะให้คะแนนเว็บไซต์ของเรา โดยถ้าเรา มีคะแนนสูงก็จะมีผลต่ออันดับการแสดงผลลัพธ์ในเว็บของ Search Engine นั้นๆ จะเห็นได้ว่าส่วนส�ำคัญของการท�ำ SEO คือการก�ำหนด “ค�ำส�ำคัญ หรือ Keyword” ซึ่งแนวทางหนึ่งที่ท�ำได้คือการใช้เครื่องมือช่วยเหลือ อย่างเช่นGoogleAdwordsซึ่งสามารถเข้าใช้บริการได้ที่www.google.com/ adwords/ โดยเมื่อสมัครสมาชิกและเข้าสู่ระบบแล้ว ระบบจะพาเข้าสู่ หน้าจอหลัก ให้คลิกที่เมนู “Tool and Analysis” และเลือกเมนูย่อย “Keyword Planner” หลังจากนั้นคลิก “Search for keyword and ad group ideas” ดังรูปด้านล่าง การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords ขั้น 1
WebsiteD.I.Y. 104 ระบบจะพาเข้าสู่การวิเคราะห์ค�ำส�ำคัญ (Keyword) ดังรูป ต่อไป โดยส่วนที่ต้องกรอกเพื่อท�ำการวิเคราะห์ข้อมูลนั้นมี ดังนี้ (1) สินค้าและบริการของเรา (2) ชื่อเว็บไซต์ของเรา (3) ประเภทของสินค้าและบริการของเรา (4) เป้าหมาย โดยให้เราท�ำการปรับประเทศและภาษาใน 2 ช่องแรกตามเป้าหมายลูกค้าที่ต้องการ (5) ส่วนนี้เป็นส่วนของปรับค่าเกี่ยวกับKeywordที่เราต้องการ ส่วนที่น่าจะปรับคือ“Avg.MonthlySearch”หรือจ�ำนวน ครั้งที่ Keyword นี้ถูกใช้โดยเฉลี่ยต่อเดือน การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords ขั้น 2
บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 105 ตัวอย่างเช่น หากเป็นธุรกิจขายเครื่องส�ำอาง (ก�ำหนดในข้อ 1) ก�ำหนดประเภทสินค้า (ข้อ 3) เป็น “Beauty & Personal Care” และ ก�ำหนดเป้าหมาย (ข้อ 4) เป็นประเทศไทยและภาษาไทย จะได้ผลลัพธ์ ดังรูปด้านล่างซึ่งระบบจะแนะน�ำค�ำส�ำคัญ (Keyword) ที่มีประสิทธิภาพ ให้เราสามารถน�ำไปวิเคราะห์และปรับใช้ต่อได้ทันที ผลลัพธ์การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords
WebsiteD.I.Y. 106 …เมื่ออ่านมาถึงบรรทัดนี้หวังว่าสาระเกี่ยวกับการสร้าง เว็บไซต์ฉบับD.I.Y.เล่มนี้คงจะพอหอมปากหอมคอช่วยเติมเต็ม ความรู้ในอีกแง่มุมหนึ่งให้กับ “เถ้าแก่ไฮเทค” ทุกท่าน แต่เหนือสิ่งอื่นใดคือ “เทคโนโลยีไม่มีวันหยุด” ดังนั้น ขยัน ศึกษาหาความรู้เพิ่มเติมอย่างสม�่ำเสมอจุดประกายไอเดียใหม่ๆ เพื่อสร้างแรงบันดาลใจให้เราในทุกๆ วัน พวกเราทีมงาน ETDA (เอ็ทด้า) ขอให้ท่านประสบความส�ำเร็จในธุรกิจผ่าน โลกออนไลน์กันทุกคนนะจ๊ะ (: การท�ำ SEO นั้นมีอยู่มากมายหลายวิธี ซึ่งที่กล่าวถึง ในหัวข้อนี้ก็เป็นเพียงส่วนเล็กๆ เท่านั้น ที่สามารถน�ำมา ประยุกต์ใช้กับเว็บไซต์ของเราได้ อย่างไรก็ตาม ต้องพึงระลึก ไว้เสมอว่า ทุกอย่างต้องใช้เวลาพอสมควร เพราะเว็บไซต์ ในโลกนี้มีอยู่เป็นจ�ำนวนมากการที่SearchEngineจะเข้ามา จัดเก็บข้อมูลต่างๆ ของเว็บเรานั้น ก็ไม่ใช่ทุกวัน อีกทั้งการท�ำ SEOต้องอาศัยคุณภาพของเนื้อหาบนเว็บไซต์และการหมั่น ปรับปรุงข้อมูลให้ทันสมัยอยู่ตลอดเวลาจึงจะส่งผลดีต่อการ ถูกค้นพบใน Search Engine ดังนั้น ความมุ่งมั่นตั้งใจจริงของ เจ้าของเว็บจึงถือเป็นสิ่งส�ำคัญที่สุดที่นอกจากจะท�ำให้เว็บไซต์ ของเราสวยและดูดีแล้ว ยังมีลูกค้าเข้าร้านอีกด้วย
AppendixWEBSITECHECKUP60SECONDS! 107 Appendix WEBSITE CHECKUP 60 SECONDS!
WebsiteD.I.Y. 108 1 ลูกค้าส่วนใหญ่ไม่บ่นว่าเว็บใช้งานยาก 2 มีการจัดหมวดหมู่สินค้า/บริการอย่างชัดเจน 3 มีฟังก์ชัน Search เพื่อให้ง่าย ต่อการค้นหาข้อมูลบนเว็บ 4 ปุ่ม Click ต่างๆ บนเว็บแสดงให้เห็นชัดเจน หาง่าย 5 มีระบบน�ำทางบนเว็บไซต์ (Navigation) 6 มีแผนผังเว็บไซต์ (Site Map) 7 มีพื้นที่ว่าง (White Space) ในระดับที่ท�ำให้เว็บ ดูสบายตา ถูกต้อง พอใช้ ไม่ถูกต้องด้านความเรียบง่าย มาตรวจสุขภาพเว็บไซต์ ของเรากันเถอะ
AppendixWEBSITECHECKUP60SECONDS! 109 ถูกต้อง พอใช้ ไม่ถูกต้องด้านความดึงดูดน่าสนใจ 8 ต�ำแหน่งโลโก้แสดงชัดเจน เห็นง่าย พร้อมมี Tagline อธิบายเว็บไซต์สั้นๆ 9 ภาพทุกภาพบนเว็บไซต์มีความคมชัด 10 ใช้ภาพบุคคลประกอบบนหน้าเว็บ 11 ตัวอักษรอ่านง่าย และสีอักษรกับสีพื้นหลัง เป็นสีที่ตัดกัน (Contrast) 12 เนื้อหาส�ำคัญที่สุดแสดงอยู่บริเวณระดับสายตา ของผู้เยี่ยมชม (Eye Contact) 13 เนื้อหาบนเว็บไซต์อ่านง่าย น่าติดตาม ถูกต้อง พอใช้ ไม่ถูกต้องด้านความสามารถในการเข้าถึง 14 ใช้ Screen Resolution ที่เหมาะสมกับผู้เยี่ยมชม (ดูได้ที่ www.truehits.net) 15 ใช้ Web Browser ที่เหมาะสมกับผู้เยี่ยมชม (ดูได้ที่ www.truehits.net) 16 ใช้ Font ตามมาตรฐานเว็บ (ไทย-Tahoma อังกฤษ-Arial, Verdana, Times New Roman) 17 รูปภาพมี Alternative Text 18 ใช้ Pop Up บางโอกาสเท่านั้น 19 โหลดเว็บเพจแต่ละหน้าไม่เกิน 6 วินาที (ทดสอบได้ที่ www.webwait.com)
WebsiteD.I.Y. 110 ถูกต้อง พอใช้ ไม่ถูกต้อง ถูกต้อง พอใช้ ไม่ถูกต้อง ด้านความน่าเชื่อถือ 20 มีเมนู “เกี่ยวกับเรา (About Us)” 21 มีแผนที่ร้านค้าชัดเจน 22 มีเมนู “ค�ำถามที่พบบ่อย (FAQs)” 23 ตัวสะกดบนหน้าเว็บไซต์ถูกต้อง และส�ำนวน การเขียนที่น่าเชื่อถือ 24 มีเครื่องหมายรับรองความน่าเชื่อถือในด้านต่างๆ 25 ชี้แจงข้อมูลสินค้าทุกรายการอย่างชัดเจน เช่น ชื่อสินค้า รหัส รูปภาพ คุณลักษณะ 26 ชี้แจงขั้นตอนการสั่งซื้อและการช�ำระเงินอย่าง ชัดเจน 27 ข้อมูลการติดต่อชัดเจน เช่น ที่อยู่ โทรศัพท์ โทรสาร อีเมล โซเชียลมีเดีย 28 มีเมนู “ข้อตกลงและเงื่อนไข/นโยบายความเป็น ส่วนตัว” 29 มีข้อก�ำหนดด้านนโยบายการเปลี่ยน/คืนสินค้า และชี้แจงขั้นตอนปฏิบัติอย่างชัดเจน 30 มีมาตรการรักษาความมั่นคงปลอดภัยบนเว็บไซต์ และน�ำไปใช้จริง ด้านความน่าเชื่อถือ การรักษาความเป็นส่วนตัว และความมั่นคงปลอดภัยบนเว็บไซต์
AppendixWEBSITECHECKUP60SECONDS! 111 ต�่ำกว่า 15 คะแนน เว็บไซต์อยู่ในเกณฑ์ “ต�่ำกว่ามาตรฐาน” ควรรีบปรับปรุง เว็บไซต์ในด้านที่ท่านยังด้อยอยู่นะจ๊ะ 15 – 23 คะแนน เว็บไซต์อยู่ในเกณฑ์ “มาตรฐาน” แต่ก็ยังสามารถพัฒนา เว็บไซต์ให้ดียิ่งขึ้นได้อีกนะ ตั้งแต่ 24 คะแนน ว้าว ว้าว ว้าว!!! เว็บไซต์ของท่านอยู่ในเกณฑ์ “ยอดเยี่ยม” แล้วล่ะ อุดช่องโหว่ในเรื่องที่ท่านยังตอบว่า “ไม่ถูกต้อง” รับรองได้เลยเว็บไซต์ท่านจะประทับอยู่ในใจลูกค้าแน่นอน ผลตรวจสุขภาพเว็บ คะแนนของคุณคือ.....................คะแนน
บริการของ สพธอ. งานวิชาการ การให้ค�ำปรึกษา è ด้านนโยบายและการวางแผนเกี่ยวกับการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ è ด้านสถิติข้อมูลเชิงลึก ที่เกี่ยวกับการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ของประเทศ è ด้านกฎหมาย ที่เกี่ยวกับการท�ำธุรกรรมทางอิเล็กทรอนิกส์ è ด้านความมั่นคงปลอดภัย และมาตรฐาน ในการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ รวมทั้งการตรวจและพิสูจน์พยานหลักฐาน อิเล็กทรอนิกส์ è ด้านระบบบริการส�ำคัญที่เป็นโครงสร้างพื้นฐานที่จ�ำเป็นเกี่ยวกับ ธุรกรรมทางอิเล็กทรอนิกส์ è งานวิจัยต่างๆ ที่เกี่ยวข้อง สพธอ. เป็นองค์การมหาชนที่มีภารกิจส�ำคัญในการผลักดัน พัฒนา ส่งเสริม และสนับสนุนการท�ำธุรกรรมทางอิเล็กทรอนิกส์ของประเทศ โดยมุ่งสร้าง สภาพแวดล้อมที่ก่อให้เกิดความเชื่อมั่น ความไว้วางใจ และความน่าเชื่อถือ ของทั้งผู้ให้บริการและผู้ใช้บริการในการท�ำธุรกรรมทางออนไลน์ ด้วยความ มุ่งมั่นในการท�ำงานอย่างมีประสิทธิภาพ ควบคู่ไปกับการสร้างเครือข่าย ความร่วมมือในการท�ำงานจากทุกภาคส่วนทั้งภายในประเทศและ ต่างประเทศ สามารถเป็นที่พึ่งด้านการท�ำธุรกรรมทางอิเล็กทรอนิกส์ ให้กับทุกภาคส่วนได้ ประกอบกับเป็นองค์กรที่มีความคล่องตัวสูง ด้วยทีม ผู้บริหารที่เป็นคนรุ่นใหม่ “Secure e – transactions : Opportunities for Thailand” การยกระดับขีดความสามารถบุคลากร สพธอ. ให้บริการการฝึกอบรมเพื่อยกระดับทักษะและความ เชี่ยวชาญเฉพาะด้านให้กับบุคลากรในประเทศเกี่ยวกับ มาตรฐานและความมั่นคงปลอดภัยในการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ ทั้งทางด้านเทคนิคและหลักสูตรประยุกต์ ส�ำหรับผู้ประกอบการ e-Commerce และผู้ที่สนใจ เกี่ยวกับ ETDA ETDA ท�ำหน้าที่อะไรครับ? ETDA ส�ำนักงานพัฒนาธุรกรรม ทางอิเล็กทรอนิกส์ (องค์การมหาชน) เป็นองค์กรส�ำคัญในการสนับสนุน SMART THAILAND โดยส่งเสริม ให้การท�ำธุรกรรมทางอิเล็กทรอนิกส์เติบโต อย่างมั่นคงปลอดภัยทัดเทียมผู้น�ำในภูมิภาค SECURE e – TRANSACTIONS ธุรกรรมออนไลน์ ยกระดับคุณภาพชีวิต จัดท�ำนโยบาย ส่งเสริมและพัฒนา ธุรกรรมทางอิเล็กทรอนิกส์ และมาตรฐาน ด้านไอซีที ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 สพธอ. www.etda.or.th ภารกิจ สพธอ.พัฒนาและ สร้างโครงสร้าง พื้นฐานส�ำคัญ รองรับการท�ำ ธุรกรรม ทางออนไลน์ ของประเทศ สนับสนุน การด�ำเนินงาน ของคณะกรรมการ ธุรกรรมทาง อิเล็กทรอนิกส์ สร้างกลไกที่ เพิ่มศักยภาพ และขีดความสามารถ ในการแข่งขันของประเทศ สร้าง ความเชื่อมั่น ในการท�ำธุรกรรม ทางอิเล็กทรอนิกส์
สร้างสรรค์โดย สำ�นักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 สพธอ. www.etda.or.th กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร www.mict.go.th “เว็บไซต์” กลายเป็นช่องทางหลัก ในการเข้าถึงลูกค้าในยุคดิจิทัล เพราะสามารถ น�ำเสนอข้อมูลออกไปได้ในวงกว้างอย่างรวดเร็ว ง่ายดาย ด้วยต้นทุนที่ต�่ำที่สุด แต่ก็มีจ�ำนวน ไม่น้อยที่ขาดความเข้าใจเรื่องพฤติกรรมการ เยี่ยมชมเว็บไซต์ของลูกค้ายุคใหม่ สุดท้ายลูกค้า ก็ไม่ประทับใจและจากเราไปในที่สุด “แล้วต้อง ท�ำอย่างไรให้การพัฒนาเว็บไซต์ด้วยตัวเอง ง่ายๆ และประสบความส�ำเร็จได้”...หนังสือ เล่มนี้คือค�ำตอบ อยากมีเว็บไซต์ต้องเริ่มต้นอย่างไร? กลเม็ดปั้นเว็บให้สวยและโดนใจลูกค้า เผยเทคนิคท�ำเว็บส�ำหรับมือใหม่...สไตล์ D.I.Y. แนะน�ำวิธีปรับแต่งเว็บขั้นเทพในยุคเว็บ 3.0 เราปั้นหนังสือเล่มนี้เพื่อคุณ : เถ้าแก่ยุคไอที นักช้อปออนไลน์ ครอบครัวไซเบอร์

More Related Content

PDF
พื้นฐานการเลือกสีและรหัสสี
Pitchayanida Khumwichai
 
PPTX
การเขียนบทความทางวิชาการ
อ.แอม เฉลิมพล ชายหลังเลนส์
 
PDF
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต (Internet Fundamental)
Dr.Kridsanapong Lertbumroongchai
 
PDF
คลื่นไมโครเวฟ (สุพิชชา มัลลิกา) 407
Mullika Pummuen
 
DOCX
รายงานอาเซียน
Chucshwal's MK
 
PDF
วิจัย 29 ม.ค 1
nakaenoi
 
PPT
หลักสูตรบูรณาการ ไข่เจียว Slide share
Somprasong friend Ka Nuamboonlue
 
PDF
รายงานคู่มือการใช้งาน
guest8ec15d
 
พื้นฐานการเลือกสีและรหัสสี
Pitchayanida Khumwichai
 
การเขียนบทความทางวิชาการ
อ.แอม เฉลิมพล ชายหลังเลนส์
 
ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต (Internet Fundamental)
Dr.Kridsanapong Lertbumroongchai
 
คลื่นไมโครเวฟ (สุพิชชา มัลลิกา) 407
Mullika Pummuen
 
รายงานอาเซียน
Chucshwal's MK
 
วิจัย 29 ม.ค 1
nakaenoi
 
หลักสูตรบูรณาการ ไข่เจียว Slide share
Somprasong friend Ka Nuamboonlue
 
รายงานคู่มือการใช้งาน
guest8ec15d
 

Viewers also liked (13)

PDF
Ekoplat
Auditorr
 
PPTX
Conduct disorder: causes, symptoms, diagnosis and treatment
Lazoi Lifecare Private Limited
 
PPTX
Developing retention rules that work
Becky Bertram
 
PDF
ARQUITECTURA PALEOCRISTIANA Y BIZANTINA
Yamil Najul
 
PDF
Semi-truck Parking - Reasons to Consider for Trucker Accommodation or Hotels
Yellowhead Inn
 
DOCX
FBIF2015：陈维智 谈策略性全盘产品设计
Simba Events
 
PDF
Medicap Laboratories - Nutraceutical Contract Manufacturing
Rahul Rajpura
 
PDF
Reflections a. cirillo
Anna Cirillo
 
PPT
Twitter2
epound
 
PPT
6 Puntos Soberania Itaipu
aeciam
 
PPTX
Legislación laboral
Laura Milena Forero
 
PDF
Livro 3 ingles
Olga Pereira
 
DOCX
Bioethics phd programs
masterbioethics
 
Ekoplat
Auditorr
 
Conduct disorder: causes, symptoms, diagnosis and treatment
Lazoi Lifecare Private Limited
 
Developing retention rules that work
Becky Bertram
 
ARQUITECTURA PALEOCRISTIANA Y BIZANTINA
Yamil Najul
 
Semi-truck Parking - Reasons to Consider for Trucker Accommodation or Hotels
Yellowhead Inn
 
FBIF2015：陈维智 谈策略性全盘产品设计
Simba Events
 
Medicap Laboratories - Nutraceutical Contract Manufacturing
Rahul Rajpura
 
Reflections a. cirillo
Anna Cirillo
 
Twitter2
epound
 
6 Puntos Soberania Itaipu
aeciam
 
Legislación laboral
Laura Milena Forero
 
Livro 3 ingles
Olga Pereira
 
Bioethics phd programs
masterbioethics
 
Ad

Similar to Website D.I.Y. (20)

PDF
eCommerce StartUP
Electronic Transactions Development Agency
 
PDF
จุดประกาย สู่...เถ้าแก่ออนไลน์ [e-Commerce StartUP!]
WiseKnow Thailand
 
PDF
รู้ทันภัยไซเบอร์
Saran Yuwanna
 
PDF
Cyber security eCommerce
Electronic Transactions Development Agency
 
PDF
เคล็ดลับนักช้อปออนไลน์ ฉบับ...รู้ทันภัยไซเบอร์
WiseKnow Thailand
 
PDF
ฉลาดรู้เน็ต
WiseKnow Thailand
 
PDF
e-Commerce Trend 2562 by ETDA
Peerasak C.
 
PDF
Thailand Ecommerce Trend 2019
Sundae Solutions Co., Ltd.
 
PDF
Webbasic
khon Kaen University
 
PDF
ฉลาดรู้เน็ต 1 ตอน internet of things
Saran Yuwanna
 
PDF
ฉลาดรู้เน็ต 1 ตอน Internet of Things (IoT)
WiseKnow Thailand
 
PDF
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต
Prapatsorn Keawnoun
 
PDF
Technology & marketing trend 2011
Pawoot (Pom) Pongvitayapanu
 
PPT
Websitebasic
Naresuan University Library
 
PPT
E Marketing
Sunan Choentong
 
DOC
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
Sutin Yotyavilai
 
DOC
Internet
Sutin Yotyavilai
 
PDF
Internet
Supatra Thomya
 
PDF
ปฏิบัติการการพัฒนาออกแบบและการเขียนโปรแกรมเว็บเพจ
CC Nakhon Pathom Rajabhat University
 
PDF
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
Dr.Kridsanapong Lertbumroongchai
 
eCommerce StartUP
Electronic Transactions Development Agency
 
จุดประกาย สู่...เถ้าแก่ออนไลน์ [e-Commerce StartUP!]
WiseKnow Thailand
 
รู้ทันภัยไซเบอร์
Saran Yuwanna
 
Cyber security eCommerce
Electronic Transactions Development Agency
 
เคล็ดลับนักช้อปออนไลน์ ฉบับ...รู้ทันภัยไซเบอร์
WiseKnow Thailand
 
ฉลาดรู้เน็ต
WiseKnow Thailand
 
e-Commerce Trend 2562 by ETDA
Peerasak C.
 
Thailand Ecommerce Trend 2019
Sundae Solutions Co., Ltd.
 
Webbasic
khon Kaen University
 
ฉลาดรู้เน็ต 1 ตอน internet of things
Saran Yuwanna
 
ฉลาดรู้เน็ต 1 ตอน Internet of Things (IoT)
WiseKnow Thailand
 
หน่วยการเรียนรู้ที่ 4 อินเทอร์เน็ต
Prapatsorn Keawnoun
 
Technology & marketing trend 2011
Pawoot (Pom) Pongvitayapanu
 
Websitebasic
Naresuan University Library
 
E Marketing
Sunan Choentong
 
ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
Sutin Yotyavilai
 
Internet
Sutin Yotyavilai
 
Internet
Supatra Thomya
 
ปฏิบัติการการพัฒนาออกแบบและการเขียนโปรแกรมเว็บเพจ
CC Nakhon Pathom Rajabhat University
 
การตลาดผ่านเครื่องมือค้นหา (Search Engine Marketing)
Dr.Kridsanapong Lertbumroongchai
 
Ad

More from WiseKnow Thailand (20)

PDF
สุดยอดนวัตกรรมรักษา NCDs - เจาะเทคนิคป้องกัน
WiseKnow Thailand
 
PDF
Capital in the Twenty-First Century.pdf
WiseKnow Thailand
 
PDF
eBook_A_Legacy_for_All_6July2022.pdf
WiseKnow Thailand
 
PDF
The Age of Spiritual Machines: When Computers Exceed Human Intelligence
WiseKnow Thailand
 
PDF
ตำราตรวจโรคหมอสุรเกียรติ์.pdf
WiseKnow Thailand
 
PDF
รายงานผลการสำรวจมูลค่าพาณิชย์อิเล็กทรอนิกส์ในประเทศไทย ปี 2564
WiseKnow Thailand
 
PDF
เอกสารการแถลงผลการสำรวจมูลค่าพาณิชย์อิเล็กทรอนิกส์ในประเทศไทย ปี 2564
WiseKnow Thailand
 
PDF
คู่มือฉบับประชาชน กรณีรักษาแบบผู้ป่วยนอกและแยกกักกันตนเอง.pdf
WiseKnow Thailand
 
PDF
Thailand Internet User Behavior 2020 Presentation
WiseKnow Thailand
 
PDF
Thailand Internet User Behavior 2020
WiseKnow Thailand
 
PDF
เรียนรู้ อยู่กับฝุ่น PM2.5
WiseKnow Thailand
 
PDF
Thailand Economic Monitor - Harnessing Fintech for Financial Inclusion
WiseKnow Thailand
 
PDF
สู่จุดจบ! | The Coming Collapse of Thailand
WiseKnow Thailand
 
PDF
CLS for Volunteer
WiseKnow Thailand
 
PDF
เอกสารการแถลงผลการสำรวจพฤติกรรมผู้ใช้อินเทอร์เน็ตในประเทศไทย ปี 2560
WiseKnow Thailand
 
PDF
Cyber Threats 2015
WiseKnow Thailand
 
PDF
Thailand Internet User Profile 2016
WiseKnow Thailand
 
PDF
เอกสารประกอบของ Thailand Internet User Profile 2016
WiseKnow Thailand
 
PDF
What if the next big disruptor isn’t a what but a who?
WiseKnow Thailand
 
PDF
Interaction 2016
WiseKnow Thailand
 
สุดยอดนวัตกรรมรักษา NCDs - เจาะเทคนิคป้องกัน
WiseKnow Thailand
 
Capital in the Twenty-First Century.pdf
WiseKnow Thailand
 
eBook_A_Legacy_for_All_6July2022.pdf
WiseKnow Thailand
 
The Age of Spiritual Machines: When Computers Exceed Human Intelligence
WiseKnow Thailand
 
ตำราตรวจโรคหมอสุรเกียรติ์.pdf
WiseKnow Thailand
 
รายงานผลการสำรวจมูลค่าพาณิชย์อิเล็กทรอนิกส์ในประเทศไทย ปี 2564
WiseKnow Thailand
 
เอกสารการแถลงผลการสำรวจมูลค่าพาณิชย์อิเล็กทรอนิกส์ในประเทศไทย ปี 2564
WiseKnow Thailand
 
คู่มือฉบับประชาชน กรณีรักษาแบบผู้ป่วยนอกและแยกกักกันตนเอง.pdf
WiseKnow Thailand
 
Thailand Internet User Behavior 2020 Presentation
WiseKnow Thailand
 
Thailand Internet User Behavior 2020
WiseKnow Thailand
 
เรียนรู้ อยู่กับฝุ่น PM2.5
WiseKnow Thailand
 
Thailand Economic Monitor - Harnessing Fintech for Financial Inclusion
WiseKnow Thailand
 
สู่จุดจบ! | The Coming Collapse of Thailand
WiseKnow Thailand
 
CLS for Volunteer
WiseKnow Thailand
 
เอกสารการแถลงผลการสำรวจพฤติกรรมผู้ใช้อินเทอร์เน็ตในประเทศไทย ปี 2560
WiseKnow Thailand
 
Cyber Threats 2015
WiseKnow Thailand
 
Thailand Internet User Profile 2016
WiseKnow Thailand
 
เอกสารประกอบของ Thailand Internet User Profile 2016
WiseKnow Thailand
 
What if the next big disruptor isn’t a what but a who?
WiseKnow Thailand
 
Interaction 2016
WiseKnow Thailand
 

Website D.I.Y.

  • 1. ETDA : e-Commerce Pocket Series ท�ำเว็บไซต์ด้วยตัวเองไม่ยากอย่างที่คิด รวบรวมเทคนิคการท�ำเว็บไซต์ ให้ประสบความส�ำเร็จที่คุณก็ท�ำได้
  • 3. 1 ใน ETDA e-Commerce Pocket Series เราปั้นหนังสือเล่มนี้เพื่อ “เถ้าแก่ยุคไอที นักธุรกิจหน้าใหม่ SMEs/OTOP” เลขมาตรฐานสากลประจ�ำหนังสือ ISBN 978-616-91910-6-3 สงวนลิขสิทธิ์หนังสือเล่มนี้ ตามพระราชบัญญัติลิขสิทธิ์ 2527 ห้ามคัดลอกเนื้อหา ภาพประกอบก่อนได้รับอนุญาต รวมทั้งดัดแปลงเป็นแถบบันทึกเสียง วิดีโอ โทรทัศน์ และสื่ออื่นๆ พิมพ์ครั้งแรก : กันยายน 2557 สร้างสรรค์โดย ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 www.etda.or.th
  • 4. ก�ำหนดทิศทาง & แนะน�ำ สุรางคณา วายุภาพ (แอน) ก�ำกับดูแล อรุณรุ่ง ธีระศักดิ์ (เอ) สรสิช เนตรนิล (กอล์ฟ) สรรค์สร้างเนื้อหา พายัพ ขาวเหลือง (ตั้ม) ปริญญา สุวรรณชินกุล (เก่ง) ทศพร โขมพัตร (โจ) ดูประเด็นกฎหมาย พิชญลักษณ์ ค�ำทองสุก (หยี) ดูแลกราฟิก ณัฐพงศ์ วรพิวุฒิ (เอ) นภดล อุษณบุญศิริ (เฟรม) ณัฐนัย รวดเร็ว (ฮอลล์) ร่วมแรงกันท�ำ สุรางคณา วายุภาพ ผอ.สพธอ. พายัพ ขาวเหลือง ผู้จัดการ ทีม e-Marketing อรุณรุ่ง ธีระศักดิ์ ผู้อ�ำนวยการ ส�ำนักส่งเสริมธุรกรรมทางอิเล็กทรอนิกส์ ปริญญา สุวรรณชินกุล ผู้จัดการ ทีมพัฒนาธุรกิจ สรสิช เนตรนิล ผู้ช่วยผู้อ�ำนวยการ ส�ำนักส่งเสริมธุรกรรมทางอิเล็กทรอนิกส์ ทศพร โขมพัตร Creative Content ทีมกราฟิก
  • 5. ค�ำน�ำ “เว็บไซต์” กลายเป็นเครื่องมือหลักในการติดต่อสื่อสารของ คนเราผ่านเครือข่ายอินเทอร์เน็ตในโลกทุกวันนี้และกลายเป็นเครื่องมือ ส�ำคัญของเจ้าของธุรกิจในการสื่อสารกับลูกค้า เพราะสามารถกระจาย ข้อมูลข่าวสารของสินค้าหรือบริการต่างๆ ให้ออกไปได้ในวงกว้างอย่าง รวดเร็ว ง่ายดาย ด้วยต้นทุนที่ต�่ำที่สุด ซึ่งกลุ่มผู้ประกอบการ SMEs/ OTOP สามารถใช้ช่องทางนี้ในการน�ำธุรกิจไปสู่ความส�ำเร็จได้ หากแต่จะท�ำอย่างไรให้เว็บไซต์ประสบความส�ำเร็จนั่นหมายถึง ความจ�ำเป็นในการออกแบบเว็บไซต์ให้ดึงดูดและน่าสนใจต่อกลุ่มเป้าหมาย หรือกลุ่มลูกค้า เพราะเว็บไซต์จ�ำนวนไม่น้อยที่พัฒนาโดยขาดการ วางแผนและท�ำงานอย่างไม่เป็นระบบ เช่น การลงมือออกแบบโดยใช้ โปรแกรมส�ำเร็จรูป โดยจัดท�ำเนื้อหาและรูปแบบของเว็บไซต์ตามความคิด ที่นึกขึ้นได้ขณะนั้นและเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลยท�ำให้เว็บไซต์นั้น มีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้จึงเสี่ยงต่อการล้มลุก คลุกคลานกว่าเว็บไซต์จะฮอตฮิต
  • 6. “Website D.I.Y.” เป็น 1 ใน 3 ของหนังสือชุด ETDA e-Commerce Pocket Series ภายใต้โครงการเพิ่มศักยภาพการท�ำธุรกรรมออนไลน์ เน้นกลุ่มผู้ประกอบการ SMEs/OTOP ของส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน)(สพธอ.)หรือETDA(เอ็ทด้า)ที่จัดท�ำขึ้นเพื่อสร้างความรู้ความเข้าใจด้าน e-Commerceที่มีมาตรฐาน(Standard)และมั่นคงปลอดภัย(Security)เพื่อให้ผู้ที่สนใจ โดยเฉพาะกลุ่มผู้ประกอบการ SMEs ขนาดย่อมและขนาดกลาง ทั้งกลุ่มที่ท�ำอยู่แล้ว และกลุ่มที่คิดจะเริ่มต้น ได้น�ำไปเป็นแนวทางในการสร้างเว็บไซต์ด้วยตนเอง และสามารถ เข้าสู่ระบบการค้าออนไลน์ที่สามารถเพิ่มยอดขายหรือสร้างรายได้ให้แก่ธุรกิจมากขึ้น หรือให้นักศึกษาที่ต้องการประกอบอาชีพอิสระสามารถน�ำไปประกอบธุรกิจของตนเองได้ ซึ่งทั้งหมดนี้จะช่วยเพิ่มรายได้ให้แก่ประเทศมากขึ้นโดยเฉพาะอย่างยิ่งการเปิดประชาคม เศรษฐกิจอาเซียน ในปี 2558 ซึ่งจะท�ำให้ผู้ประกอบการมีโอกาสขยายฐานลูกค้าได้ เพิ่มขึ้นถึง 600 ล้านคน หากสามารถแสวงหาโอกาสจากช่องทางออนไลน์นี้ หนังสือเล่มนี้จะปูพื้นฐานให้รู้จักตั้งแต่วิธีการท�ำงานของเว็บไซต์ว่าต้องอาศัย อุปกรณ์ใดบ้าง ขั้นตอนการพัฒนาเว็บไซต์โดยละเอียดที่ผู้อ่านสามารถน�ำไปปฏิบัติจริงได้ กลยุทธ์ในการสร้างเว็บไซต์ที่ดึงดูดลูกค้าและทันสมัย รวมทั้งการตั้งชื่อเว็บไซต์ให้ติดตลาด และติดอันดับใน Search Engine ซึ่งจะเป็นส่วนส�ำคัญในการสร้างนักธุรกิจรุ่นใหม่ ที่สามารถพัฒนาเว็บไซต์ของตนเองได้อย่างตรงใจลูกค้าและประสบความส�ำเร็จมากที่สุด สุรางคณา วายุภาพ ผู้อ�ำนวยการ ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน)
  • 8. บทที่ 1 เวิลด์ไวด์เว็บ…ใยแมงมุมมัดใจคนทั้งโลก 8 1.1 “IoT” Internet of Things 10 1.2 กลไกของเวิลด์ไวด์เว็บ 16 1.3 อุปกรณ์พร้อม…เว็บก็พร้อม! 20 1.4 ขบวนการพัฒนาเว็บไซต์ 24 บทที่ 2 กลเม็ดปั้นเว็บสวยและดี 28 2.1 องค์ประกอบ 9 ด้าน...แต่งแต้มสีสันให้เว็บไซต์ 30 2.2 ท�ำเว็บสวยและดีแบบ Step by Step 42 2.3 จับกระแสเว็บดีไซน์ยุค 3.0 56 2.4 เปิดไอเดียสร้างสรรค์เว็บยุคใหม่ 62 บทที่ 3 นักพัฒนาเว็บมือใหม่…สไตล์ D.I.Y. 64 3.1 Web Template…สร้างเว็บเหมือนเสกได้ 66 3.2 e-Marketplace…ได้ทั้งเว็บได้ทั้งลูกค้า 74 3.3 CMS…โปรแกรมแต่งเว็บตามจินตนาการ 80 บทที่ 4 แต่งเว็บขั้นเทพในยุคเว็บ 3.0 86 4.1 โดเมนเนม…ตั้งดีเว็บก็ดัง 89 4.2 บันไดหกขั้นปั้นเว็บให้น่าซื้อ 93 4.3 ล้วงลับปรับเว็บให้เป็นมิตรกับเสิร์ชเอนจิน 99 Appendix WEBSITE CHECKUP 60 SECONDS! 107 เกี่ยวกับ ETDA 112 Contents
  • 9. ‘อินเทอร์เน็ต’ คือทุกสิ่ง...เป็นทุกอย่างในชีวิต ของมวลมนุษยชาติ Internet of Things วีรชัย ประยูรพฤกษ์ หนุ่มสมาร์ต ผู้มุ่งมั่นพัฒนา โครงสร้างพื้นฐานสารสนเทศของประเทศ @ ETDA
  • 11. WebsiteD.I.Y. 10 เวิลด์ไวด์เว็บ(WorldWideWeb)นิยมเรียกสั้นๆว่า เว็บหรือWWWเป็นบริการที่ช่วยให้เราสามารถค้นหาข้อมูล ต่างๆ ที่ต้องการได้อย่างรวดเร็ว และด้วยการที่มี อุปกรณ์อันทันสมัยเกิดขึ้นตลอดเวลา อย่างเช่น สมาร์ตโฟนและแท็บเล็ต ก็ยิ่งท�ำให้อินเทอร์เน็ต และเวิลด์ไวด์เว็บถูก ใช้งานอย่างต่อเนื่อง เรียกได้ว่าเป็นส่วนหนึ่ง ของคนในยุคสมัยนี้ไป เรียบร้อยแล้ว ดังจะเห็นได้ จากการที่องค์กรต่างๆทั้งภาครัฐและภาคเอกชนก็มีการสร้าง และพัฒนาเว็บของตนเองเพื่อใช้เป็นช่องทางสื่อสารระหว่าง องค์กรและลูกค้าตัวอย่างเช่นโรงภาพยนตร์ก็มีเว็บไซต์ (เช่น www.majorcineplex.com) เพื่อให้ลูกค้า จองตั๋วชมภาพยนตร์ได้โดยไม่จ�ำเป็นต้องมา ต่อแถวซื้อให้เสียเวลา หรือห้างสรรพสินค้าไม่ว่า จะขนาดเล็กหรือใหญ่(เช่นwww.central.co.th) ก็มีเว็บไซต์เพื่อให้ลูกค้าใช้เป็นช่องทางสั่งสินค้า ออนไลน์ได้ เป็นต้น 1.1 }IoT~ Internet of Things 7.2 * อ้างอิงข้อมูลจากรายงานผลการส�ำรวจพฤติกรรมการใช้อินเทอร์เน็ตใน ประเทศไทย พ.ศ. 2557 โดยส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การ มหาชน) หรือ สพธอ.
  • 12. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 11 ถ้าหากจะย้อนกลับไปเมื่อหลาย สิบปีที่แล้ว เวิลด์ไวด์เว็บถือก�ำเนิดขึ้น โดยนักวิทยาศาสตร์จากห้องทดลองของ สถาบันเซิร์น (CERN) ซึ่งเป็นห้องปฏิบัติการ ฟิสิกส์แห่งยุโรปในนครเจนีวา ประเทศ สวิตเซอร์แลนด์ นามว่า ทิม เบิร์นเนอร์ส-ลี (Tim Berners-Lee) ได้สร้างระบบการสื่อสาร ข้อมูลผ่านเครือข่ายคอมพิวเตอร์ในรูปแบบใหม่ ที่เรียกว่าไฮเพอร์เท็กซ์(Hypertext)ซึ่งผลที่ได้ ท�ำให้มีการสร้างข้อตกลงในการสื่อสาร หรือ ที่เรียกว่า โพรโทคอล (Protocol) แบบ HTTP (Hypertext Transport Protocol) ขึ้น เพื่อ ใช้ในการส่งข้อมูลสารสนเทศต่างๆ โดยจะถูก จัดอยู่ในรูปแบบใหม่ที่เรียกว่าHTML(HyperText Markup Language) ซึ่งการสื่อสารและ การสืบค้นสารสนเทศในรูปแบบใหม่นี้เอง ท�ำให้คนทั่วโลกสามารถติดต่อสื่อสารกันได้ อย่างรวดเร็วในทุกรูปแบบไม่ว่าจะเป็นข้อความ ภาพ และเสียง
  • 13. WebsiteD.I.Y. 12 รูปภาพจาก www.unleashthephones.com ดังเช่น ไมโครซอฟท์ (Microsoft) เจ้าพ่อยักษ์ใหญ่ด้านการผลิต และพัฒนาซอฟต์แวร์รายใหญ่ของโลกก็เปิดตัวโฆษณาเพื่องานมหกรรม Super Bowl ซึ่งเป็นการแข่งขันกีฬาอเมริกันฟุตบอล ตั้งชื่อโฆษณาว่า Microsoft 2014 Super Bowl Commercial: Empowering โดยใช้ ประสบการณ์ของผู้พิการเป็นเครื่องมือบอกให้โลกเห็นถึงประโยชน์ของ เทคโนโลยีซึ่งสามารถให้ความหวังเต็มเปี่ยมแก่มวลมนุษยชาติได้โฆษณา ชิ้นนี้ถือเป็นกรณีศึกษาที่สามารถบอกถึงแนวโน้มเปลี่ยนแปลงไอซีทีของ โลกได้เป็นอย่างดี กลับมาที่เมืองไทยบ้านเรา จากตัวเลขการใช้งานอินเทอร์เน็ต ล่าสุดในรายงานผลการส�ำรวจพฤติกรรมการใช้อินเทอร์เน็ตใน ประเทศไทย พ.ศ. 2557 โดย ETDA พบว่า ปริมาณการใช้อินเทอร์เน็ต มีแนวโน้มเพิ่มขึ้นทุกปี ล่าสุดคนไทยใช้เวลาอยู่กับอินเทอร์เน็ตเฉลี่ย 50.4 ชั่วโมงต่อสัปดาห์ หรือ 7.2 ชั่วโมงต่อวัน เทียบกับในทศวรรษก่อน ที่ใช้เพียง 2.6 ชั่วโมงเท่านั้น โดยนิยมท่องอินเทอร์เน็ตเพื่อรับส่งอีเมล มากที่สุดรองลงมาคือการค้นหาข้อมูลต่างๆสิ่งนี้คงท�ำให้เรามองเห็นการ เติบโตของเทคโนโลยีอินเทอร์เน็ตในประเทศไทยที่จะเพิ่มมากขึ้นเรื่อยๆ เช่นเดียวกับการเปลี่ยนแปลงของโลก
  • 14. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 13 พฤติกรรมการใช้อินเทอร์เน็ตของไทย พ.ศ. 2557 < 10 ชม. 10-20.9 ชม. 21-41.9 ชม. 42-76.9 ชม. 77-104.9 ชม. 105 ชม. ขึ้นไป ภำพ 9 ร้อยละของผู้ใช้อินเทอร์เน็ตฯ จำแนกตำมจำนวนชั่วโมงกำรใช้ อินเทอร์เน็ตต่อสัปดำห์ ปี 2556 – 2557 ในการเปรียบเทียบจานวนชั่วโมงการใช้งานอินเทอร์เน็ตในแต่ละกลุ่ม ของผู้ใช้อินเทอร์เน็ตฯ ดังแสดงในภาพ 10 พบว่า เพศชาย มีสัดส่วนการใช้ อินเทอร์เน็ตมากกว่าเพศหญิง โดยเพศชายใช้อินเทอร์เน็ตเฉลี่ย 51.8 ชั่วโมงต่อ สัปดาห์ ในขณะที่เพศหญิงใช้อินเทอร์เน็ตเฉลี่ย 49.0 ชั่วโมงต่อสัปดาห์ และใน 35.7 25.8 10.7 11.5 7.3 9.0 13.7 19.3 16.7 20.2 16.1 13.9 0.0 5.0 10.0 15.0 20.0 25.0 30.0 35.0 40.0 < 10 ชม. 10 - 20.9 ชม.21 - 41.9 ชม.42 - 76.9 ชม.77 - 104.9 ชม.105 ชม.ขึ้นไป 2556 2557 ร้อยละ 49 ภำพ 14 ร้อยละของผู้ใช้อินเทอร์เน็ตฯ เปรียบเทียบตำมกิจกรรมกำรใช้งำน ผ่ำนอินเทอร์เน็ตระหว่ำงอุปกรณ์เคลื่อนที่กับคอมพิวเตอร์ หมายเหตุ: ผู้ตอบสามารถเลือกตอบกิจกรรมฯ และอุปกรณ์ฯ ได้มากกว่า 1 ข้อ จะสังเกตเห็นว่ากิจกรรมที่เกี่ยวข้องกับการทาธุรกรรมทางการเงิน ได้แก่ การทาธุรกรรมการเงินออนไลน์, การซื้อ/ขายสินค้าและบริการ, การจอง ตั๋ว/ซื้อตั๋วโดยสารออนไลน์ ยังคงได้รับความนิยมในการดาเนินการผ่าน คอมพิวเตอร์สูงกว่าอุปกรณ์เคลื่อนที่ ทั้งนี้คาดว่าน่าจะมาจากหลายสาเหตุ เช่น 6.9 37.3 27.7 46.9 40.5 56.6 55.4 82.6 30.4 73.3 63.8 59.6 5.4 23.8 24.0 29.7 33.8 37.0 44.7 45.2 46.3 56.5 57.6 78.2 0.0 20.0 40.0 60.0 80.0 100.0 อื่นๆ จอง/ซื้อตั๋วโดยสำรออนไลน์ ดูข้อมูลข่ำวสำรเกี่ยวกับหุ้น ซื้อ/ขำยสินค้ำและบริกำรอื่นๆ ทำธุรกรรมทำงกำรเงิน ดำวน์โหลดซอฟต์แวร์/เพลง/ ละคร/เกม ดูโทรทัศน์/ดูภำพยนตร์/ฟังวิทยุ ออนไลน์ รับ-ส่งอีเมล เล่นเกมออนไลน์ ค้นหำข้อมูล อ่ำน/ติดตำมข่ำวสำร/อ่ำน หนังสืออิเล็กทรอนิกส์ กำรใช้งำนเครือข่ำยสังคม ออนไลน์ อุปกรณ์เคลื่อนที่ คอมพิวเตอร์ ร้อยละ 49
  • 15. WebsiteD.I.Y. 14 Internet of Things : IoT (อ้างอิงข้อมูลจาก www.ams-ix.net) ด้วยพัฒนาการของเวิลด์ไวด์เว็บที่มีอย่างต่อเนื่อง ที่สามารถ เพิ่มขีดความสามารถด้านการน�ำเสนอข้อมูลข่าวสารผ่านเครือข่าย อินเทอร์เน็ตมายังจอคอมพิวเตอร์ของผู้ใช้ ท�ำให้การสื่อสารบน อินเทอร์เน็ตมีประสิทธิภาพ ด้วยภาพและเสียงที่มีสีสันชวนติดตาม มีการแสดงข้อมูลสื่อประสมที่สามารถโต้ตอบกับผู้ใช้งานได้(Interactive Multimedia) ท�ำให้ปัจจุบัน “เวิลด์ไวด์เว็บ” กลายเป็นเครื่องมือหลัก ในการติดต่อสื่อสารและน�ำเสนอผ่านเครือข่ายอินเทอร์เน็ตที่นิยม ใช้กันอย่างแพร่หลายทั่วโลก จนมีส�ำนวนที่นิยมพูดกันว่า“Internet of Things : IoT” คือ อินเทอร์เน็ตจะครอบคลุมทุกสิ่งทุกอย่างในชีวิตของ มวลมนุษยชาตินั่นเอง สรุปประโยชน์ ของอินเทอร์เน็ต
  • 16. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 15 1. ด้านการศึกษา บริการหนึ่งบนอินเทอร์เน็ตที่ส�ำคัญคือ การค้นคว้าหาข้อมูลต่างๆ ซึ่งมีเว็บไซต์ที่ให้ บริการค้นหาข้อมูลที่ผู้ใช้ต้องการมากมาย เช่น www.google.com ดังนั้น นักเรียน นักศึกษา และบุคคลทั่วไป สามารถใช้ประโยชน์จากการ ค้นหาข้อมูลนี้เพื่อใช้ในการค้นคว้าข้อมูล นอกห้องเรียน ซึ่งถือได้ว่าอินเทอร์เน็ตเป็น แหล่งข้อมูลขนาดใหญ่ที่สุดส�ำหรับค้นคว้าเพื่อ การศึกษาและวิจัยเลยทีเดียว 2. ด้านการพาณิชย์ หลายคนคงมีประสบการณ์กับการ “ช้อปปิ้ง ออนไลน์” หรือ e-Commerce ซึ่งการซื้อขาย สินค้าผ่านอินเทอร์เน็ตถือเป็นตัวอย่างประโยชน์ ของอินเทอร์เน็ตในเชิงพาณิชย์ที่ชัดเจนที่สุด เราสามารถสั่งสินค้าออนไลน์โดยไม่ต้องเดินทาง ไปที่ร้านค้าจริง โดยกระบวนการสั่งซื้อและ ช�ำระเงินสามารถท�ำผ่านเว็บไซต์ได้ทุกที่ทุกเวลา 3. ด้านความบันเทิง สื่อด้านความบันเทิงไม่ว่าจะเป็นเพลงวิดีโอหรือ เกม สามารถเข้าถึงได้ผ่านช่องทางอินเทอร์เน็ต เช่น เราสามารถดูทีวีออนไลน์ หรือชมการ ถ่ายทอดสดต่างๆ ผ่านเว็บไซต์ รวมทั้ง เกมออนไลน์ที่มีอยู่มากมายบนอินเทอร์เน็ต
  • 17. WebsiteD.I.Y. 16 เวิลด์ไวด์เว็บนั้นมีการท�ำงานอยู่สองฝั่ง ได้แก่ 1) เครื่อง คอมพิวเตอร์ของผู้ใช้(Client)และ2)เครื่องคอมพิวเตอร์แม่ข่ายหรือ ที่มักเรียกกันว่าเครื่องเซิร์ฟเวอร์(Server)โดยในฝั่งเครื่องคอมพิวเตอร์ ของผู้ใช้นั้นจะเป็นรูปแบบใดก็ได้ ไม่ว่าจะเป็นคอมพิวเตอร์ตั้งโต๊ะ (Desktop)คอมพิวเตอร์แบบพกพา(Notebook/Laptop)สมาร์ตโฟน (Smartphone) รวมทั้งแท็บเล็ต (Tablet) ขอเพียงแค่คอมพิวเตอร์ เหล่านั้นสามารถเชื่อมต่อกับอินเทอร์เน็ตและติดตั้งโปรแกรม เพื่อใช้งานเว็บไซต์ หรือที่เรียกว่าเว็บเบราว์เซอร์ (Web Browser) ก็เพียงพอแล้วแต่ส�ำหรับฝั่งเครื่องเซิร์ฟเวอร์นั้นจะเป็นคอมพิวเตอร์ที่ ท�ำหน้าที่ให้ข้อมูลตามที่เครื่องของผู้ใช้ร้องขอซึ่งต้องท�ำงานตลอดเวลา ท�ำให้เครื่องคอมพิวเตอร์ที่ใช้เป็นคอมพิวเตอร์แม่ข่ายต้องเป็นเครื่อง ที่มีประสิทธิภาพพอสมควร และแน่นอนว่าจะต้องเชื่อมต่ออยู่กับ อินเทอร์เน็ตเช่นกัน รวมทั้งยังต้องติดตั้ง โปรแกรมเฉพาะเพื่อให้คอมพิวเตอร์ เครื่องนั้นท�ำหน้าที่เป็นเครื่อง เซิร์ฟเวอร์ได้อีกด้วย 1.2 กลไก ของเวิลด์ไวด์เว็บ
  • 18. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 17 วิธีการท�ำงานของระบบเวิลด์ไวด์เว็บ วิธีการท�ำงานของ World Wide Web www.abc.com ISP 1 2 3 1)ผู้ใช้ท�ำการป้อนที่อยู่เว็บไซต์หรือURL(เช่นwww.abc.com) ที่โปรแกรมเว็บเบราว์เซอร์ (เช่น Internet Explorer, Google Chrome หรือ Mozilla Firefox) 2) หลังจากนั้นเครื่องคอมพิวเตอร์ของผู้ใช้ก็จะท�ำงานร่วมกับ ระบบอินเทอร์เน็ตเพื่อค้นหาว่าเครื่องเซิร์ฟเวอร์ของเว็บไซต์ที่ต้องการนั้น ตั้งอยู่ที่ใดในโลกใบนี้ เมื่อค้นหาได้แล้วก็จะท�ำการร้องขอหน้าเว็บไปยัง เครื่องเซิร์ฟเวอร์เครื่องนั้น 3)เครื่องเซิร์ฟเวอร์เมื่อได้รับค�ำร้องขอแล้วก็จะส่งข้อมูลหน้าเว็บ ที่ต้องการกลับไปยังโปรแกรมเว็บเบราว์เซอร์ของเครื่องผู้ใช้เพื่อท�ำการ แสดงผลออกมา
  • 19. WebsiteD.I.Y. 18 ตัวอย่างเว็บไซต์แบบ Static รู้จักกับ รูปแบบของ เว็บไซต์ เว็บไซต์ที่เราใช้งานกันในปัจจุบันนี้ สามารถแบ่งเป็น 2 รูปแบบหลักๆ ด้วยกันคือ 1) Static Web และ 2) Dynamic Web ซึ่งมีจุดเด่นและข้อจ�ำกัดที่แตกต่างกัน ดังนี้ 1) เว็บไซต์ที่ท�ำหน้าที่แสดงข้อมูลเพียงอย่างเดียว (StaticWeb)เป็นเว็บไซต์เสมือนกระดานประกาศข่าวสารธรรมดา ผู้ใช้สามารถรับรู้ข่าวสารได้เพียงอย่างเดียวโดยไม่สามารถโต้ตอบ กับเว็บได้ เช่น เว็บไซต์ประกาศขายสินค้า (เช่น www.olx.co.th) ที่ผู้ซื้อจ�ำเป็นต้องติดต่อกับผู้ขายเอง เว็บไซต์จึงเป็นเพียงช่องทาง การประกาศขายสินค้าเท่านั้น
  • 20. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 19 ตัวอย่างเว็บไซต์แบบ Dynamic 2) เว็บไซต์ที่ท�ำหน้าที่เสมือนโปรแกรม (Web Application หรือ Dynamic Web) เป็นเว็บที่ผู้ใช้สามารถ โต้ตอบกับเว็บได้โดยผู้ใช้อาจจะกรอกข้อมูลบางอย่างแล้วเว็บ ก็ท�ำการประมวลผลข้อมูลนั้นๆ เช่น การซื้อขายแบบมีตะกร้า สินค้าที่สามารถคลิกสั่งซื้อผ่านเว็บไซต์และช�ำระเงินออนไลน์ (เช่น www.tohome.com) เว็บไซต์รูปแบบนี้จะมีความ หลากหลายและสามารถโต้ตอบกับผู้ใช้ได้อย่างไรก็ตามผู้ที่ต้องการ พัฒนาเว็บลักษณะนี้ต้องมีความรู้และประสบการณ์เกี่ยวกับ ระบบคอมพิวเตอร์และอินเทอร์เน็ตพอสมควร เนื่องจากมี ขั้นตอนการจัดการและต้องดูแลมากกว่า Static Web
  • 21. WebsiteD.I.Y. 20 ตัวอย่างอุปกรณ์คอมพิวเตอร์ PC / Mobile / Tablet จากหัวข้อที่ผ่านมาเราได้ท�ำความรู้จักกับวิธีการ ท�ำงานของเว็บไซต์ ซึ่งในการท�ำงานดังกล่าวต้องอาศัย อุปกรณ์ Software และ Hardware ที่จ�ำเป็นแบ่งเป็น 2 ด้านคือ ผู้ใช้งาน และผู้พัฒนาเว็บ ดังนี้ 1) Software และ Hardware ของผู้ใช้ คอมพิวเตอร์:เครื่องคอมพิวเตอร์ส�ำหรับผู้ใช้ หรือในเชิงเทคนิคจะเรียกกันว่าเครื่อง Client นั้น เป็น คอมพิวเตอร์ทั่วไปที่สามารถเชื่อมต่ออยู่กับอินเทอร์เน็ต และมีโปรแกรมเว็บเบราว์เซอร์เพื่อให้ผู้ใช้สามารถใช้งาน ระบบเว็บได้ 1.3 อุปกรณ์พร้อม... เว็บก็พร้อม!
  • 22. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 21 โปรแกรมเว็บเบราว์เซอร์:คือโปรแกรม คอมพิวเตอรที่ผูใช้สามารถใช้งานเพื่อเรียกหน้าเว็บ ขึ้นมาดูได้ ตัวอย่างของโปรแกรมเว็บเบราว์เซอร์ เช่น Internet Explorer และ Google Chrome โปรแกรมเสริม : หรือ Plug-in เป็น โปรแกรมที่ติดตั้งเพิ่มเติมเพื่อเพิ่มประสิทธิภาพของ เว็บเบราว์เซอร์ให้สามารถแสดงผลหรือเปิดแฟ้ม ข้อมูลรูปแบบอื่นๆ นอกเหนือจากแฟ้ม HTML ได้ เช่นการติดตั้งFlashPlug-inเพื่อเปิดแฟ้มข้อมูลที่ สร้างจากโปรแกรมAdobeFlashให้สามารถแสดง เว็บแบบภาพเคลื่อนไหวได้ (Animation) ตัวอย่างโปรแกรมเสริม Plug-in ตัวอย่างโปรแกรมเว็บเบราว์เซอร์
  • 23. WebsiteD.I.Y. 22 2) Software และ Hardware ของผู้พัฒนาเว็บ คอมพิวเตอร์แม่ข่าย:หรือเครื่องเซิร์ฟเวอร์เป็นคอมพิวเตอร์ ที่ท�ำหน้าที่ให้ข้อมูลตามที่ผู้ใช้ร้องขอ ไม่ว่าจะเป็นหน้าเว็บ รูปภาพ เสียง เพลง หรือวิดีโอ โดยปกติแล้วการเข้าถึงเครื่องคอมพิวเตอร์แม่ข่ายนั้น จะต้องมีการระบุที่อยู่เว็บ (URL) ซึ่งอยู่ในรูปแบบ www.aaa.bbb โดย wwwหมายถึงเวิลด์ไวด์เว็บaaaคือชื่อเว็บไซต์และbbbคือโดเมนของ เว็บไซต์ ซึ่งที่อยู่เว็บไซต์จะต้องถูกเปลี่ยนเป็นที่อยู่ไอพี (IP Address) ซึ่ง เป็นหมายเลขที่อยู่ของเครื่องเซิร์ฟเวอร์โดยเครื่องDNS(DomainName Server) ซึ่งเป็นเครื่องเซิร์ฟเวอร์อีกเครื่องหนึ่งที่ท�ำหน้าที่เปลี่ยน ที่อยู่เว็บเป็นที่อยู่ไอพีนั่นคือหากผู้พัฒนาเว็บสามารถติดตั้ง เครื่องเซิร์ฟเวอร์ของตนเองเพื่อให้บริการเว็บไซต์ของ ตนเอง และมีที่อยู่เว็บรวมทั้งที่อยู่ไอพีที่แน่นอน อีกทั้งสามารถติดตั้งเครื่องเซิร์ฟเวอร์เพื่อท�ำหน้าที่ เป็นDNSได้แล้วก็จะสามารถให้บริการเว็บไซต์ของตน ได้ทันที แต่ในทางปฏิบัติ การติดตั้งระบบเหล่านี้ มีขั้นตอนที่ยุ่งยากและต้องอาศัยใช้ความรู้เฉพาะทาง ดังนั้น จึงมีผู้ให้บริการเครื่องเซิร์ฟเวอร์ส�ำหรับการให้ บริการเว็บโดยเฉพาะ หรือที่เรียกว่า Web Hosting นั่นเอง ท�ำให้ผู้พัฒนาเว็บไซต์ไม่จ�ำเป็นต้องติดตั้งระบบต่างๆเหล่านี้เองเพียงแค่ ท�ำการสร้างเว็บและน�ำไปวางไว้ที่เครื่องเซิร์ฟเวอร์ของ Web Hosting เหล่านั้นแทน ช่องทางการสื่อสาร:คือสื่อกลางที่ช่วยให้เครื่องคอมพิวเตอร์ ของผู้ใช้ติดต่อไปผ่านเครือข่ายอินเทอร์เน็ตไปยังเครื่องเซิร์ฟเวอร์ได้ ตัวอย่างของช่องทางการสื่อสารที่เราคุ้นเคยกันก็คือ WiFi และระบบ 3G ที่มีให้บริการอยู่ในปัจจุบันอย่างทั่วถึง ช่องทางการสื่อสารรูปแบบนี้ เป็นแบบไร้สายคือเราสามารถใช้งานอินเทอร์เน็ตได้ทุกที่ทุกเวลาแต่ก็ยังมี ช่องทางการสื่อสารอีกรูปแบบหนึ่งคือ รูปแบบที่พึ่งพาสายเคเบิลต่างๆ ซึ่งจะมีความเร็วกว่าการสื่อสารแบบไร้สาย
  • 24. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 23 ระบบปฏิบัติการส�ำหรับเครื่องเซิร์ฟเวอร์ : เมื่อกล่าวถึงเรื่อง ระบบปฏิบัติการ (Operation System : OS) ก็คือ โปรแกรมที่ต้องติดตั้ง ลงบนคอมพิวเตอร์ทุกเครื่องเสมือนเป็นโปรแกรมหลักที่คอยดูแลการท�ำงาน ของคอมพิวเตอร์เครื่องนั้นๆ ในแง่ของเครื่องเซิร์ฟเวอร์ก็เช่นเดียวกัน ก็ต้อง มีระบบปฏิบัติการที่จ�ำเพาะเนื่องจากต้องมีความสามารถในการจัดการ ที่ซับซ้อนกว่าคอมพิวเตอร์ของผู้ใช้งาน โดยในทางปฏิบัติ หากผู้พัฒนาเว็บ เลือกใช้บริการ Web Hosting แล้ว ก็ไม่จ�ำเป็นต้องติดตั้งระบบปฏิบัติการ ส�ำหรับเครื่องเซิร์ฟเวอร์ด้วยตนเองแต่อย่างใด โปรแกรมที่ใช้พัฒนาเว็บ : ผู้พัฒนาเว็บสามารถพัฒนาเว็บ โดยโปรแกรมใดๆ ก็ได้ที่สามารถพิมพ์ข้อความตัวอักษรได้ ทั้งนี้ การพัฒนา เว็บไซต์ต้องสร้างขึ้นด้วยโครงสร้างภาษาพิเศษที่มีไว้เฉพาะการท�ำเว็บไซต์ ที่เรียกว่า HTML อย่างไรก็ตาม มีผู้พัฒนาบางโปรแกรมที่มีความสามารถ ช่วยเหลือในการเขียนแฟ้มข้อมูลเว็บในรูปแบบ HTML ได้อย่างเช่น Adobe Dreamweaverนอกจากนี้ยังมีโปรแกรมรูปแบบอื่นๆที่ช่วยให้ผู้พัฒนาเว็บ สามารถสร้างเว็บของตนเองได้โดยไม่จ�ำเป็นต้องเขียนโปรแกรมเลย เช่น โปรแกรมในรูปแบบ CMS (Content Management System) ที่เพียง ผู้พัฒนาเว็บท�ำการติดตั้ง CMS บนเครื่องคอมพิวเตอร์เซิร์ฟเวอร์และ ปรับแต่งรูปแบบการแสดงผลตามที่ต้องการ ก็จะสามารถให้บริการเว็บไซต์ ได้โดยง่าย ตัวอย่างโปรแกรมที่ใช้พัฒนาเว็บในรูปแบบ CMS
  • 25. WebsiteD.I.Y. 24 จะเห็นว่าในฝั่งของผู้ใช้งานนั้นHardwareและSoftwareเป็น สิ่งที่ผู้ใช้ทั่วไปส่วนใหญ่มีอยู่ในมืออยู่แล้วแต่ส�ำหรับฝั่งผู้พัฒนาเว็บไซต์นั้น อาจต้องการเครื่องมือพิเศษบางอย่าง แต่เนื่องด้วยปัจจุบันมีผู้ให้บริการ Web Hosting เกิดขึ้นในท้องตลาดมากมาย รวมทั้งยังมีโปรแกรมที่ช่วย ในการพัฒนาเว็บไซต์ที่ง่ายมากขึ้นท�ำให้การพัฒนาเว็บไซต์ยุคนี้ไม่ใช่เรื่อง ยุ่งยากอีกต่อไป จากหัวข้อต่างๆก่อนหน้านี้จะเห็นว่าระบบเวิลด์ไวด์เว็บนั้น ประกอบด้วย 2 ส่วนหลักๆ คือ เครื่องคอมพิวเตอร์แม่ข่าย และ เครื่องคอมพิวเตอร์ลูกข่าย โดยผู้พัฒนาเว็บไซต์จ�ำเป็นต้องสร้าง แฟ้มข้อมูลเว็บและน�ำไปบันทึกไว้ยังเครื่องคอมพิวเตอร์แม่ข่าย รวมทั้งต้องท�ำการลงทะเบียนที่อยู่เว็บไซต์เพื่อเป็นช่องทางให้ ผู้ใช้งานทั่วไปสามารถเข้าถึงเว็บไซต์ของตนเองได้ ส�ำหรับหัวข้อนี้ จะได้อธิบายถึงขั้นตอนการพัฒนาเว็บไซต์โดยย่อ เพื่อให้เข้าใจถึง กระบวนการสร้างเว็บไซต์ในภาพรวมทั้งหมดส่วนในรายละเอียดนั้น สามารถศึกษาได้ในบทถัดไป 1.4 ขบวนการ พัฒนาเว็บไซต์
  • 26. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 25 1) ก�ำหนดวัตถุประสงค์ของเว็บไซต์ ถือเป็นขั้นตอนส�ำคัญของ การพัฒนาเว็บ เพราะหากสามารถก�ำหนดวัตถุประสงค์ได้อย่างชัดเจน ก็จะน�ำมาซึ่งการก�ำหนดคุณสมบัติของเว็บไซต์รวมทั้งรูปแบบและเนื้อหา ภายในเว็บที่สอดคล้องกับกลุ่มเป้าหมาย 2) รวบรวมข้อมูลเพื่อน�ำเสนอบนเว็บไซต์ เช่น รูปภาพและ รายละเอียดสินค้า ข้อมูลร้านค้า ข้อมูลการติดต่อ รวมทั้งแผนที่ร้านค้า 3) ก�ำหนดรูปแบบเว็บไซต์ โดยผู้พัฒนาเว็บควรออกแบบ การแสดงผลให้เหมาะสมกับเนื้อหาและกลุ่มเป้าหมายซึ่งเนื้อหาในบทต่อไป จะได้แนะน�ำถึงเทคนิคการออกแบบเว็บไซต์ที่ดีส�ำหรับการค้าขายออนไลน์ โดยเฉพาะ 1. ก�ำหนดวัตถุประสงค์ 2. รวบรวมข้อมูล 3. ก�ำหนดรูปแบบเว็บไซต์ 4. สร้างแฟ้มข้อมูล 5. บันทึกข้อมูลเครื่องแม่ข่าย ขั้นตอนการพัฒนาเว็บไซต์
  • 27. WebsiteD.I.Y. 26 4) สร้างแฟ้มข้อมูล โดยหากต้องการพัฒนาเว็บในรูปแบบ Static ต้องสร้างแฟ้มข้อมูลแบบ HTML แต่หากพัฒนาเว็บในรูปแบบ Dynamic ต้องพัฒนาแฟ้มข้อมูลที่มีการเขียนโปรแกรมเพิ่มเติม (เช่น แฟ้มข้อมูล PHP) โดยขั้นตอนนี้อาจเป็นสิ่งยุ่งยากที่สุดในการพัฒนา เว็บไซต์ โดยเฉพาะผู้ไม่มีความรู้ด้านภาษา HTML หรือการเขียน โปรแกรมคอมพิวเตอร์มาก่อน ซึ่งในกรณีนี้สามารถใช้ทางเลือกอื่น ในการพัฒนาเว็บไซต์แทนได้เช่นโปรแกรมประเภทWYSIWYGที่อนุญาต ให้ผู้พัฒนาสามารถพิมพ์ข้อมูลที่ต้องการเผยแพร่ และสามารถจัด รูปแบบการแสดงผลต่างๆได้โดยไม่จ�ำเป็นต้องเรียนรู้ภาษาHTMLเลย หรืออาจเลือกใช้โปรแกรมประเภท CMS ที่ผู้พัฒนาเว็บสามารถติดตั้ง เว็บไซต์ได้โดยใช้เวลาไม่นาน โดยเนื้อหาในบทที่ 3 จะได้แนะน�ำถึงวิธี พัฒนาเว็บไซต์ที่ไม่จ�ำเป็นต้องมีความรู้เกี่ยวกับภาษา HTML 5) บันทึกข้อมูลเว็บยังเครื่องแม่ข่าย ขั้นตอนสุดท้ายคือ การน�ำแฟ้มข้อมูลเว็บ (HTML, PHP หรือแฟ้มอื่นๆ) ไปบันทึกไว้ที่ เครื่องคอมพิวเตอร์แม่ข่าย ซึ่งดังที่ได้กล่าวไปแล้วว่าการติดตั้งเครื่อง คอมพิวเตอร์แม่ข่ายเองนั้นมีขั้นตอนที่ยุ่งยาก ดังนั้น ในทางปฏิบัติ จึงควรใช้บริการเครื่องคอมพิวเตอร์แม่ข่าย หรือ Web Hosting ซึ่งจะมีขั้นตอนที่ง่ายกว่า โดยอาจแบ่งการให้บริการ Web Hosting เป็น 2 รูปแบบ ได้แก่
  • 28. บทที่1เวิลด์ไวด์เว็บ...ใยแมงมุมมัดใจคนทั้งโลก 27 บริการฟรีWebHostingเป็นบริการที่ให้ผู้พัฒนาเว็บสามารถ ให้บริการเว็บไซต์ของตนเองได้โดยไม่มีค่าใช้จ่าย แต่ก็อาจมีข้อจ�ำกัดคือ อาจไม่สามารถให้บริการเว็บไซต์ด้วยที่อยู่เว็บไซต์ตามที่ตนเองต้องการ แต่ต้องใช้ที่อยู่เว็บไซต์ตามที่ Free Web Hosting นั้นๆ ก�ำหนด รวมทั้ง อาจถูกจ�ำกัดเรื่องเนื้อที่ที่สามารถบันทึกแฟ้มข้อมูล ซึ่งจะส่งผลต่อการ น�ำเสนอเนื้อหาต่างๆ บนเว็บไซต์อีกด้วย Web Hosting แบบมีค่าใช้จ่าย ในกรณีนี้ผู้ให้บริการ Web Hosting จะท�ำการเรียกเก็บค่าบริการจากผู้พัฒนาเว็บตามข้อตกลง ซึ่ง ค่าบริการมักจะขึ้นอยู่กับเนื้อที่ที่สามารถบันทึกแฟ้มข้อมูลเว็บได้ และ ผู้พัฒนาเว็บจะมีอิสระในการจดทะเบียนที่อยู่เว็บของตนเองได้ ดังนั้น ผู้พัฒนาเว็บสามารถตั้งชื่อที่อยู่เว็บไซต์ให้ตรงกับเนื้อหาและการบริการ ของตนเองได้ เมื่อผู้พัฒนาเว็บท�ำการบันทึกแฟ้มข้อมูลเว็บของตนบน Web Hosting ที่เลือกแล้ว รวมทั้งอาจจะจดทะเบียนชื่อเว็บไซต์ตามที่ ต้องการแล้ว เพียงเท่านี้ผู้ใช้งานทั่วไปก็จะสามารถเข้าถึงเว็บไซต์ โดยการอ้างถึงที่อยู่เว็บไซต์ตามที่จดทะเบียน หรือก�ำหนดโดยผู้ให้ บริการ Web Hosting ได้ทันที
  • 29. มีเว็บไซต์เท่ากับ มีสาขาทั่วโลก... ขายของแบบ 7 วัน 24 ชั่วโมง ลงทุนต�่ำ แต่คุ้มค่าที่สุด! พัทธนันท์ ธรรมจะดี วิศวกรซอฟต์แวร์สาวสวย เชี่ยวชาญด้านเทคโนโลยีสารสนเทศ @ ETDA
  • 31. WebsiteD.I.Y. 30 จากการรวบรวมข้อมูลการใช้ไอซีที ของไทยในปี 2013 พบว่า คนไทยกว่า 26 ล้านคน หรือคิดเป็นร้อยละ 40 ของประชากรทั้งหมดสามารถเข้าถึง อินเทอร์เน็ตเรียบร้อยแล้ว แต่ตัวเลข ที่น่าสนใจกว่านั้นก็คือ การเปิดใช้ บริการหมายเลขโทรศัพท์มือถือมีสูงกว่า 93.8ล้านเลขหมายในขณะที่ประชากรไทย มีเพียง 64 ล้านคนเท่านั้น นั่นจึงแสดงให้เห็นว่า “คนไทยบางส่วนใช้โทรศัพท์มือถือมากกว่าคนละ เครื่องกันแล้วนั่นเอง” 2.1 องค์ประกอบ 9 ด้าน... แต่งแต้มสีสันให้เว็บไซต์ ข้อมูลการใช้ไอซีทีของไทยปี 2013 อ้างอิงข้อมูลจาก * กรมการปกครอง (www.dopa.go.th) ** ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (www.nectec.or.th) *** ส�ำนักงาน กสทช. (www.nbtc.go.th)
  • 32. 31 บทที่2กลเม็ดปั้นเว็บสวยและดี จากตัวเลขการใช้ไอซีทีของคนไทยข้างต้น คงพอท�ำให้เจ้าของ ธุรกิจเห็นความส�ำคัญของการมีเว็บไซต์เพื่อใช้เป็นช่องทางการสื่อสารกับ ลูกค้า เพราะเห็นได้ชัดว่าปัจจุบันเว็บไซต์กลายเป็นสื่อที่ได้รับความนิยม มากที่สุดบนอินเทอร์เน็ต เป็นช่องทางที่จะช่วยกระจายข้อมูลข่าวสาร สินค้า/บริการต่างๆ ออกไปในวงกว้างอย่างรวดเร็ว ง่ายดาย แถมยังมี ต้นทุนต�่ำที่สุดอีกด้วย อย่างไรก็ตาม สิ่งที่ผู้ประกอบการควรค�ำนึงถึงในการใช้เว็บไซต์ เพื่อประชาสัมพันธ์ธุรกิจก็คือ “เราต้องออกแบบเว็บไซต์ให้ดึงดูดและ น่าสนใจต่อกลุ่มเป้าหมาย”แม้ว่าจากข้อมูลพฤติกรรมการใช้อินเทอร์เน็ต ปี 2557 ที่รายงานโดย ETDA พบว่า คนไทยใช้อินเทอร์เน็ตมากกว่า 7.2 ชั่วโมงต่อวัน แต่เนื่องจากผู้ใช้สามารถเลือกได้ว่าจะดูเว็บไซต์ใด และไม่เลือกดูเว็บไซต์ใดก็ได้ตามต้องการ จึงท�ำให้ผู้ใช้ที่ไม่มีความอดทน ต่ออุปสรรคและปัญหาที่เกิดจากการออกแบบเว็บไซต์ที่ผิดพลาด หรือ เห็นว่าเว็บที่ก�ำลังชมอยู่นั้นไม่มีประโยชน์ หรือไม่เข้าใจว่าเว็บไซต์นั้นๆ ใช้งานอย่างไร เปลี่ยนไปชมเว็บไซต์อื่นได้ตลอดเวลา
  • 33. WebsiteD.I.Y. 32 ปัจจุบันมีเว็บไซต์เกิดขึ้นใหม่ทุกวัน ผู้ใช้งานจึงมีทางเลือกมากขึ้น และสามารถเปรียบเทียบคุณภาพของเว็บต่างๆ ได้เอง เว็บที่มีการออกแบบ สวยงามการใช้งานที่ง่ายและสะดวกย่อมได้รับความสนใจมากกว่าเว็บที่ดูสับสน วุ่นวายมีข้อมูลมากมายแต่หาอะไรไม่เจอหรือใช้เวลาในการแสดงผลแต่ละหน้า นานเกินไปปัญหาเหล่านี้ล้วนเป็นผลมาจากการออกแบบเว็บที่ไม่มีคุณภาพทั้งสิ้น ดังนั้น การออกแบบจึงเป็นกระบวนการส�ำคัญในการสร้างเว็บไซต์ให้ประทับใจ ผู้ใช้ ท�ำให้อยากกลับเข้ามาใหม่ โดยองค์ประกอบส�ำคัญของการออกแบบเว็บ ที่ดีนั้นมี ดังนี้
  • 34. 33 บทที่2กลเม็ดปั้นเว็บสวยและดี (1)ความเรียบง่าย:การออกแบบเว็บไซต์ที่ดีควรท�ำให้ผู้เข้าชม สามารถเข้าถึงข้อมูลที่ต้องการได้โดยง่าย เพราะมักจะพบเสมอว่าผู้พัฒนา เว็บต้องการน�ำเสนอข้อมูลต่างๆ มากมายโดยไม่นึกถึงผู้ชม ดังนั้น การจ�ำกัด องค์ประกอบเสริมให้เหลือเฉพาะองค์ประกอบหลักจะท�ำให้เว็บไซต์มีความ เรียบง่ายต่อการใช้งานมากขึ้น กล่าวคือ การสื่อสารข้อมูลเชิงเนื้อหานั้น ควร เลือกสิ่งที่ต้องการน�ำเสนอจริงๆ ในส่วนของภาพกราฟิก สีสัน ตัวอักษรและ ภาพเคลื่อนไหว ก็ควรเลือกให้พอเหมาะ เพราะหากมีมากเกินไปจะรบกวน สายตาและสร้างความร�ำคาญต่อผู้ใช้ได้ ลองเปรียบเทียบเว็บไซต์ในรูปที่ 1 และ 2 จะเห็นได้ว่ารูปที่ 1 มีความเรียบง่ายและน่าใช้งานมากกว่า มีข้อมูล และรูปภาพที่เห็นแล้วเข้าใจง่ายในครั้งแรกที่มองเห็น ในขณะที่เว็บไซต์รูปที่ 2 จะเน้นข้อมูลที่เป็นข้อความเป็นหลัก แม้ว่าเว็บไซต์นี้จะเน้นเรื่องของข้อมูล แต่การเรียบเรียงหรือการจัดวางข้อมูลต่างๆก็สามารถออกแบบให้ดูเรียบง่าย กว่านี้ได้ “ขอให้จดจ�ำไว้ว่า ความเรียบง่ายไม่ได้หมายความว่าไม่มี แต่คือ มีให้พอเหมาะพอควร” เช่น หากต้องการเน้นข้อมูลเป็นแบบข้อความจริงๆ อาจจะท�ำเป็นลิงก์เชื่อมโยงไปยังหน้าเว็บเพจอื่นๆ เพื่อแยกส่วนข้อความ ไปอีกหน้าหนึ่ง ท�ำให้หน้าเว็บดูไม่รกจนเกินไป รูปที่ 1 การออกแบบเว็บไซต์ของ www.apple.com
  • 35. WebsiteD.I.Y. 34 (2) ความสม�่ำเสมอ : คือ การสร้างความสม�่ำเสมอ ให้เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอด ทั้งเว็บก็ได้ เพราะถ้าหากว่าแต่ละหน้าของเว็บมีความแตกต่างกัน มากเกินไป อาจท�ำให้ผู้ใช้เกิดความสับสนและไม่แน่ใจว่าก�ำลังอยู่ ในเว็บไซต์เดิมหรือไม่ เพราะฉะนั้นการออกแบบเว็บไซต์แต่ละหน้า ควรมีรูปแบบ สไตล์ของกราฟิก ตัวอักษร เมนูต่างๆ รวมทั้งระบบ เนวิเกชัน (Navigation) และโทนสีที่มีความคล้ายคลึงกันตลอด ทั้งเว็บ ตัวอย่างของความสม�่ำเสมอนี้สามารถทดลองเข้าไปที่เว็บไซต์ www.apple.com ซึ่งจะเห็นได้ว่ามีการออกแบบอย่างสม�่ำเสมอ ในลักษณะเดียวกันทุกหน้าเว็บเพจ รูปที่ 2 การออกแบบเว็บไซต์ของ www.moi.go.th
  • 36. 35 บทที่2กลเม็ดปั้นเว็บสวยและดี (3) ความเป็นเอกลักษณ์ : สิ่งที่เราควรให้ความส�ำคัญเรื่อง การออกแบบเว็บไซต์อีกประการหนึ่งก็คือ ตัวตนของธุรกิจ หรือ Corporate Identity (คอร์เปอเรท ไอเดนติตี้) เนื่องจากเว็บไซต์เป็นสื่อที่สามารถสะท้อนถึง เอกลักษณ์ของธุรกิจต่อผู้ใช้งานเว็บได้ ดังนั้น การเลือกใช้ตัวอักษร ชุดสี รูปภาพ หรือกราฟิกต่างๆ ล้วนส่งผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ในธุรกิจธนาคารที่ตัวตนธุรกิจคือการแสดงถึงความน่าเชื่อถือ หากออกแบบ เว็บไซต์โดยเลือกใช้สีสันฉูดฉาดและมีภาพกราฟิกมากมาย อาจท�ำให้ผู้ชมคิดว่า เป็นเว็บไซต์สวนสนุกซึ่งย่อมส่งผลต่อความน่าเชื่อถือของธุรกิจได้ในที่สุดตัวอย่าง เว็บไซต์ของจุฬาลงกรณ์มหาวิทยาลัย (www.chula.ac.th) ซึ่งทุกคนทราบดีว่า สีประจ�ำมหาวิทยาลัยคือสีชมพู เว็บไซต์นี้ก็เลือกใช้โทนสีชมพูเพื่อให้เป็น เอกลักษณ์และตรงกับสัญลักษณ์ขององค์กร หน้าหลัก (Homepage) ตัวอย่างการออกแบบเว็บไซต์ที่มีความสม�่ำเสมอของ www.apple.com หน้าสินค้า (Product)
  • 37. WebsiteD.I.Y. 36 (4) เนื้อหา : เนื้อหาบนเว็บไซต์หรือ ที่นิยมเรียกกันว่า Content ถือเป็นสิ่งส�ำคัญ ที่สุดของเว็บไซต์ เนื้อหาที่น�ำเสนอบนเว็บไซต์ ต้องสมบูรณ์และควรปรับปรุงให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้อหาที่ตรงกับ กลุ่มเป้าหมายที่ส�ำคัญคือ ควรเป็นข้อมูลที่สดใหม่ ไม่ซ�้ำใคร เพราะเนื้อหาเหล่านี้จะถือเป็นจุดขาย ที่สามารถดึงดูดผู้ใช้ให้มาเข้าเยี่ยมชมเว็บ อย่างสม�่ำเสมอ เช่น www.lazada.co.th เว็บไซต์ ขายสินค้าออนไลน์ ที่มีการจัดโปรโมชันลดราคา สินค้าตลอดเวลา ท�ำให้ผู้เยี่ยมชมต้องหมั่นเข้าชม เพื่อซื้อสินค้าในราคาพิเศษ ตัวอย่างการออกแบบเว็บไซต์ที่มีความเป็นเอกลักษณ์ของ www.chula.ac.th ตัวอย่างการออกแบบเนื้อหาเว็บไซต์ของ www.lazada.co.th
  • 38. 37 บทที่2กลเม็ดปั้นเว็บสวยและดี (5) ความง่ายของเมนูต่างๆ : เป็นส่วนประกอบที่มีความส�ำคัญ ต่อเว็บไซต์มากเช่นกัน เปรียบเสมือนป้ายบอกทางที่ช่วยไม่ให้เกิดความสับสน ระหว่างการเยี่ยมชมเว็บดังนั้นการออกแบบระบบเนวิเกชัน (Navigation) และ เมนูต่างๆ จึงควรให้เข้าใจง่าย ใช้งานได้สะดวกถ้ามีการใช้กราฟิกก็ควรเป็นภาพ ที่สื่อความหมายรวมทั้งต�ำแหน่งเนวิเกชันก็ควรจัดวางให้สม�่ำเสมอเช่นอยู่ต�ำแหน่ง บนสุดของทุกหน้า เป็นต้น ซึ่งถ้าจะให้ดี เมื่อมีเนวิเกชันที่เป็นกราฟิกก็ควรเพิ่ม ระบบเนวิเกชันที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่ออ�ำนวยความสะดวกให้กับผู้ใช้ ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราว์เซอร์เช่นwww.officemate.co.th เว็บไซต์จ�ำหน่ายเครื่องเขียนและเครื่องใช้ส�ำนักงานออนไลน์ มีการออกแบบเมนู การใช้งาน และระบบเนวิเกชันด้วยภาพกราฟิกที่เข้าใจง่าย ท�ำให้ผู้ใช้สามารถ เข้าถึงสินค้าที่ต้องการได้อย่างรวดเร็ว ตัวอย่างการออกแบบระบบเนวิเกชันของ www.officemate.co.th
  • 39. WebsiteD.I.Y. 38 (6)คุณภาพของสิ่งที่ปรากฏบนเว็บไซต์:ลักษณะที่น่าสนใจ ของเว็บไซต์นั้นขึ้นอยู่กับความชอบส่วนบุคคลเป็นส�ำคัญ แต่โดยรวมแล้วสามารถ สรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้น องค์ประกอบต่างๆ ทุกส่วนควรมีคุณภาพ เช่น ภาพกราฟิกควรสมบูรณ์คมชัดไม่มีรอยหรือขอบขั้นบันไดให้เห็นตัวอักษรอ่านง่าย สบายตา และค�ำสะกดที่ถูกต้อง รวมไปถึงการเลือกใช้โทนสีที่เข้ากันอย่างลงตัว เป็นต้น โดยตัวอย่างเว็บไซต์ที่มีคุณภาพก็มีอยู่มากมาย เช่น www.apple.com, www.adobe.com, www.autodesk.com เป็นต้น ตัวอย่างการออกแบบเว็บไซต์ที่มีคุณภาพของ www.adobe.com
  • 40. 39 บทที่2กลเม็ดปั้นเว็บสวยและดี (7) ความสะดวกของการใช้งานในสภาพต่างๆ : การใช้งานของเว็บไซต์นั้นไม่ควรมีข้อจ�ำกัดกล่าวคือต้องสามารถใช้งานได้ดี ในสภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรม อื่นใดเพิ่มเติมนอกจากเว็บเบราว์เซอร์ตัวอย่างเช่นเว็บไซต์ที่พัฒนาด้วยAdobe Flash อาจจะไม่สามารถแสดงผลได้หากผู้ใช้ไม่ติดตั้ง Adobe Flash Player ดังรูปด้านล่างนอกจากนี้การออกแบบเว็บไซต์ก็ควรแสดงผลได้ดีในทุกระบบ ปฏิบัติการ ทุกความละเอียดหน้าจอ ซึ่งหากเป็นเว็บไซต์ที่มีผู้ใช้บริการมาก และกลุ่มเป้าหมายหลากหลายควรให้ความส�ำคัญกับเรื่องนี้มากเป็นพิเศษ ตัวอย่างเช่น www.facebook.com สังเกตว่าถ้าเราเปิดในคอมพิวเตอร์ จะเห็นหน้าเว็บรูปแบบหนึ่งแต่เมื่อเปิดผ่านSmartphoneหรือTabletจะมี หน้าตาอีกรูปแบบหนึ่งที่เหมาะกับอุปกรณ์เหล่านี้ ตัวอย่างเว็บไซต์ที่พัฒนาด้วย Adobe Flash จะแสดงผลไม่ได้หากผู้ใช้งานไม่ติดตั้ง Adobe Flash Player การออกแบบเว็บไซต์ที่แสดงผลตามลักษณะของอุปกรณ์ที่ต่างกันของ www.facebook.com Adobe Flash Player 10 is required to playback video from this web page
  • 41. WebsiteD.I.Y. 40 (8) ความถี่ในการออกแบบ : ถ้าต้องการ ให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรหมั่นปรับปรุงเว็บไซต์ให้ดูทันสมัยอยู่เสมอ ซึ่งสามารถ ท�ำได้ 2 ลักษณะใหญ่ๆ ได้แก่ 1) การปรับปรุงเนื้อหา การปรับปรุงข้อมูลสินค้าให้ทันสมัย เช่น ราคาสินค้า รูปภาพ สินค้า คุณลักษณะของสินค้า รวมไปถึงการจัดโปรโมชัน หรือ กิจกรรมส่งเสริมการตลาดอย่างสม�่ำเสมอและ2)การปรับปรุง การออกแบบเว็บไซต์ อาจวางแผนการ Re-Design เว็บไซต์ เป็นประจ�ำทุก 6 - 12 เดือน เพื่อให้ผู้เยี่ยมชมเว็บไม่เบื่อ (9) เสถียรภาพของเว็บไซต์ : ควรหมั่น ตรวจสอบการท�ำงานของระบบการท�ำงานต่างๆภายในเว็บไซต์ อย่างสม�่ำเสมอ ตัวอย่างเช่น ลิงก์เชื่อมโยงต่างๆ เพราะปัญหา ที่อาจเกิดขึ้นคือ ลิงก์ขาด ท�ำให้ไม่สามารถเชื่อมโยงไปยังลิงก์ ปลายทางได้ ซึ่งหากผู้ชมท�ำการคลิกลิงก์ดังกล่าวจะแสดง ข้อความผิดพลาด สร้างความร�ำคาญเป็นอย่างมาก และยัง ส่งผลกระทบต่อความน่าเชื่อถือของเว็บไซต์อีกด้วย ข้อความผิดพลาดเมื่อคลิกลิงก์ที่มีปัญหา การเชื่อมโยง
  • 42. 41 บทที่2กลเม็ดปั้นเว็บสวยและดี องค์ประกอบทั้ง 9 ส่วนนี้ เป็นปัจจัยส�ำคัญในการออกแบบเว็บไซต์ ซึ่งหาก ผู้พัฒนาสามารถด�ำเนินการได้ครบทั้ง 9 ข้อ เชื่อว่า เว็บไซต์ที่พัฒนาขึ้นต้องดึงดูดผู้ใช้ได้อย่างแน่นอน เช่นเดียวกันกับเว็บอีคอมเมิร์ซ หากมีการออกแบบ โดยค�ำนึงถึงองค์ประกอบทั้งหมดนี้ ก็จะสามารถ ดึงดูดลูกค้า และท�ำให้เว็บไซต์มีความน่าเชื่อถือ เช่นกัน
  • 43. WebsiteD.I.Y. 42 ในการท�ำกิจกรรมต่างๆ ของเรานั้นจ�ำเป็นต้องมีการ วางแผนให้ดีการท�ำธุรกิจก็ต้องมีการวางแผนก�ำหนดกลุ่มเป้าหมาย การตกแต่งร้านค้าให้ดูน่าสนใจ ส�ำหรับการออกแบบเว็บไซต์ ก็เช่นเดียวกัน ต้องประกอบด้วยกระบวนการมากมาย เช่น การออกแบบโครงสร้างเว็บ ลักษณะหน้าตา จนถึงการเขียน โปรแกรมแต่ก็มีเจ้าของเว็บจ�ำนวนไม่น้อยที่พัฒนาเว็บไซต์โดยขาด การวางแผนและท�ำงานไม่เป็นระบบ เช่น การลงมือออกแบบ โดยใช้โปรแกรมส�ำเร็จรูป โดยจัดท�ำเนื้อหาและรูปแบบของเว็บ ตามความคิดที่นึกขึ้นได้ขณะนั้นและเมื่อเห็นว่าดูดีแล้วก็เปิดตัวเลย ท�ำให้เว็บนั้นมีเป้าหมายและแนวทางที่ไม่แน่นอน ผลลัพธ์ที่ได้ จึงเสี่ยงกับความล้มเหลวค่อนข้างมาก 2.2 ท�ำเว็บสวยและดี แบบ Step by Step
  • 44. 43 บทที่2กลเม็ดปั้นเว็บสวยและดี ความล้มเหลวที่พบเห็นได้ทั่วไปคือ เว็บที่แสดงข้อความว่าอยู่ระหว่างการ ก่อสร้าง (Under Construction หรือ Coming Soon) ซึ่งแสดงให้เห็นถึงการ ขาดการวางแผนที่ดี บางเว็บถือได้ว่าตายไปแล้ว เนื่องจากข้อมูลไม่ทันสมัย ขาดการ พัฒนาปรับปรุง เทคโนโลยีล้าสมัย ลิงก์ผิดพลาด สิ่งเหล่านี้แสดงให้เห็นถึงการขาด การดูแล ตรวจสอบและพัฒนาให้ทันสมัยอยู่เสมอ ตัวอย่างเว็บไซต์ที่อยู่ระหว่างการปรับปรุง
  • 45. WebsiteD.I.Y. 44 การออกแบบเว็บไซต์อย่างถูกต้องจะช่วยลดความผิดพลาดเหล่านี้ลงได้ และช่วยลดความเสี่ยงที่จะท�ำให้เว็บไซต์ต้องประสบกับความล้มเหลว ซึ่งต้อง อาศัยกระบวนการออกแบบและจัดระบบข้อมูลอย่างเหมาะสม ดังนี้ การวางแผน การพัฒนาเว็บไซต์ กระบวนการแรกของการออกแบบเว็บไซต์คือ การ ก�ำหนดเป้าหมายของเว็บไซต์ รวมทั้งก�ำหนดกลุ่มผู้ใช้งาน ซึ่งการจะให้ได้มาซึ่งข้อมูลเหล่านี้ ผู้พัฒนาต้องเรียนรู้ผู้ใช้ หรือ จ�ำลองสถานการณ์สิ่งเหล่านี้จะช่วยให้สามารถออกแบบเนื้อหา และการใช้งานเว็บไซต์ได้อย่างเหมาะสม และตรงกับความ ต้องการของผู้ใช้อย่างแท้จริง กระบวนการนี้อาจเรียกได้ว่า เป็นการวางแผนพัฒนาเว็บไซต์ ซึ่งมีขั้นตอน ดังนี้
  • 46. 45 บทที่2กลเม็ดปั้นเว็บสวยและดี (1) ก�ำหนดวัตถุประสงค์ของเว็บไซต์ : ขั้นตอนแรกของ การออกแบบเว็บไซต์คือ การก�ำหนดวัตถุประสงค์ของเว็บไซต์ให้ชัดเจน เสียก่อน โดยทั่วไปมักจะเข้าใจว่าการท�ำเว็บไซต์มีจุดมุ่งหมายเพื่อบริการ ข้อมูลของหน่วยงานหรือองค์กรเท่านั้นแต่ในความเป็นจริงแล้วแต่ละเว็บไซต์ จะมีเป้าหมายแตกต่างกันไป เช่น ท�ำเว็บไซต์มาเพื่อประชาสัมพันธ์ร้านค้า จะได้เป็นการเพิ่มยอดขายท�ำให้ลูกค้ารู้จักร้านค้ามากยิ่งขึ้น หรือท�ำเว็บไซต์ เพื่อเพิ่มช่องทางการสั่งสินค้าให้ลูกค้าสามารถซื้อสินค้าได้โดยไม่ต้องเดินทาง มาที่ร้านค้า กล่าวโดยสรุป วัตถุประสงค์ในการสร้างเว็บไซต์มี ดังนี้ ขายสินค้า/บริการ น�ำเสนอข้อมูลสินค้า/บริการ สร้างภาพลักษณ์องค์กร เพิ่มช่องทางการติดต่อกับลูกค้า สร้างเครือข่ายสังคมออนไลน์ เพื่อความบันเทิง (2) การก�ำหนดกลุ่มเป้าหมาย : ผู้ออกแบบเว็บไซต์ ควรทราบถึงกลุ่มผู้ใช้เป้าหมายที่จะเข้ามาใช้บริการเว็บไซต์ เพื่อตอบสนอง ความต้องการของผู้ใช้ได้อย่างชัดเจนเช่นกลุ่มเป้าหมายของเว็บไซต์เกี่ยวกับ เครื่องส�ำอางคือ ผู้หญิงวัยรุ่นและวัยท�ำงาน
  • 47. WebsiteD.I.Y. 46 (3) การก�ำหนดสิ่งที่ผู้ใช้ต้องการจากเว็บ :หลังจากที่ ก�ำหนดวัตถุประสงค์และกลุ่มเป้าหมายของเว็บไซต์แล้ว ล�ำดับต่อไปคือ การออกแบบเว็บไซต์ที่น่าสนใจเพื่อดึงดูดผู้ใช้งานให้ได้นานที่สุด โดยทั่วไปแล้ว สิ่งที่ผู้ใช้คาดหวังจากการเข้าชมเว็บไซต์หนึ่งๆ ได้แก่ ข้อมูลที่น่าสนใจและ เป็นประโยชน์ หรือความบันเทิงต่างๆ แต่ส�ำหรับเว็บไซต์อีคอมเมิร์ซนั้น อาจมีสิ่งอื่นๆ เพิ่มเติม เช่น การจัดโปรโมชันส่งเสริมการตลาด วิธีการ จัดส่งสินค้า การคืนสินค้าที่ไม่ได้คุณภาพและการรีวิวสินค้าโดยลูกค้า คนอื่นๆ (4) การก�ำหนดข้อมูลหลักที่ควรมีบนเว็บไซต์ : เมื่อเราทราบถึงสิ่งที่ผู้ใช้ต้องการเมื่อเข้าชมเว็บไซต์แล้ว ก็ควรออกแบบให้มี ข้อมูลเหล่านั้นโดยจัดกลุ่มเป็นสิ่งที่ผู้ใช้ส่วนใหญ่คาดหวังจะได้รับเมื่อเข้าชม เว็บไซต์ เช่น ข้อมูลสินค้า/บริการ ข้อมูลเกี่ยวกับบริษัท ข่าวความคืบหน้า ค�ำถามที่ถามบ่อยหรือค�ำถามยอดนิยม ข้อมูลการติดต่อ
  • 48. 47 บทที่2กลเม็ดปั้นเว็บสวยและดี หลังจากที่ได้วางแผนและรวบรวมข้อมูลที่จ�ำเป็นส�ำหรับการพัฒนาเว็บไซต์ แล้วขั้นตอนถัดมาคือการออกแบบหน้าเว็บไซต์ซึ่งถือว่าเป็นสิ่งแรกที่ผู้ใช้จะได้เห็น ขณะที่เปิดเข้าสู่เว็บไซต์และยังเป็นสิ่งแรกที่แสดงถึงประสิทธิภาพในการออกแบบ เว็บไซต์อีกด้วย โดยปกติหน้าเว็บจะประกอบด้วยรูปภาพ ตัวอักษร สีพื้น ระบบ เนวิเกชันหรือเมนู และองค์ประกอบอื่นๆ ที่ช่วยสื่อความหมายของเนื้อหาและ อ�ำนวยความสะดวกต่อการใช้งานโดยหลักส�ำคัญในการออกแบบก็คือการใช้รูปภาพ และองค์ประกอบต่างๆร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาของเว็บไซต์โดยมี เป้าหมายส�ำคัญเพื่อการสื่อความหมายที่ชัดเจนและน่าสนใจบนพื้นฐานของความ เรียบง่าย และความสะดวกต่อผู้ใช้งาน ขั้ น ต อ น แร ก สุ ด ข อ ง ก า ร ออกแบบเว็บไซต์คือ การออกแบบและ ก�ำหนดโครงสร้างของเว็บไซต์ (Site Structure) ให้แน่นอน โดยโครงสร้างเว็บไซต์เป็นแผนผังของการล�ำดับเนื้อหาหรือ การจัดวางต�ำแหน่งเว็บเพจทั้งหมดซึ่งจะท�ำให้เรารู้ว่าทั้งเว็บไซต์ประกอบด้วย เนื้อหาอะไรบ้าง และมีเว็บเพจหน้าไหนที่เกี่ยวข้องเชื่อมโยงถึงกัน ดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงเปรียบเสมือนกับการเขียนแบบ อาคารก่อนที่จะลงมือสร้างจริง เพราะจะท�ำให้เรามองเห็นหน้าตาของ เว็บอย่างเป็นรูปธรรมขึ้นนอกจากนี้โครงสร้างเว็บไซต์ที่ดียังช่วยให้ผู้ชม ไม่สับสนและค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็วอีกด้วย
  • 49. WebsiteD.I.Y. 48 ส�ำหรับวิธีการออกแบบโครงสร้างเว็บไซต์สามารถท�ำโดยวาดแผนภูมิต้นไม้เช่น รูปตัวอย่าง ซึ่งเป็นการออกแบบเว็บไซต์สื่อการเรียนการสอนออนไลน์ จะเห็นได้ว่า มีหน้าหลักคือหน้า “บทเรียนหลัก” ซึ่งจะมีลิงก์ไปยังหน้าอื่นๆ อีก 8 หน้า โดยในหน้า เข้าสู่บทเรียนก็จะมีการเชื่อมโยงไปยังหน้าอื่นๆ อีก การออกแบบลักษณะนี้จะท�ำให้ มองเห็นโครงสร้างภาพรวมทั้งหมดของเว็บไซต์ และท�ำให้การพัฒนาเว็บไซต์เป็นไปได้ ง่ายและรวดเร็วยิ่งขึ้น การจัดโครงสร้างเว็บไซต์สามารถท�ำได้หลายวิธี แต่ที่นิยมใช้กันมีอยู่ 2 แบบ คือ การจัดโครงสร้างเว็บไซต์ตามกลุ่มเนื้อหา และตามกลุ่มผู้ชม 1) จัดตามกลุ่มเนื้อหา (Content-based Structure) เป็นรูปแบบการจัดวางโครงสร้างของเว็บไซต์ให้เป็นส่วนๆ ตามเนื้อหาของเว็บ เช่น หากต้องการพัฒนาเว็บไซต์อีคอมเมิร์ซ อาจจะแบ่งเนื้อหาตามประเภทสินค้า หรือตาม ราคา เป็นต้น ดังเช่น www.tohome.com เป็นตัวอย่างของการออกแบบโครงสร้าง ตามกลุ่มเนื้อหา โดยแบ่งเว็บไซต์เป็นกลุ่มๆ ตามประเภทของสินค้า การออกแบบโครงสร้างเว็บไซต์โดยใช้แผนภูมิต้นไม้
  • 50. 49 บทที่2กลเม็ดปั้นเว็บสวยและดี 2) จัดตามกลุ่มผู้ชม (User-based Structure) เป็นรูปแบบการ จัดโครงสร้างของเว็บไซต์ตามสิทธิการเข้าใช้งาน หรือตามความสนใจของผู้ใช้ เช่น ผู้ใช้งาน ที่เป็นสมาชิกของเว็บจะได้รับข้อมูลมากกว่าผู้ใช้งานทั่วไปหรือโครงสร้างข้อมูลต่างๆในเว็บ อาจจะแตกต่างกันตามเพศ อายุ หรือความสนใจของผู้ใช้ก็ได้ ดังเช่น www.amazon.com เป็นตัวอย่างของการออกแบบโครงสร้างตามกลุ่มผู้ชมโดยภาพบนจะเห็นว่าก่อนเข้าสู่ระบบ นั้นจะเป็นหน้าเว็บที่แสดงสินค้าประเภทภาพยนตร์ แต่หลังจากล็อกอินเข้าสู่ระบบแล้ว จะเปลี่ยนไปแสดงสินค้าประเภทอื่นซึ่งเป็นสินค้าที่ผู้ใช้งานนั้นเคยซื้อมาก่อน ก่อนล็อกอินเข้าสู่ระบบ หลังล็อกอินเข้าสู่ระบบ การออกแบบโครงสร้างเว็บไซต์ จัดตามกลุ่มผู้ชมของ www.amazon.com การออกแบบโครงสร้างเว็บไซต์ จัดตามกลุ่มเนื้อหาของ www.tohome.com
  • 51. WebsiteD.I.Y. 50 ส�ำหรับการเชื่อมโยงหน้าเว็บต่างๆนั้นสามารถก�ำหนดรูปแบบการเชื่อมโยง ในเว็บได้ 3 รูปแบบด้วยกันคือ 1) แบบเรียงล�ำดับ(Sequence)เป็นการเชื่อมโยงเนื้อหาในเว็บไซต์ที่ผู้ใช้งาน จะต้องอ่านทีละหน้าเพื่อรับข้อมูลเป็นล�ำดับๆ ไป การออกแบบเว็บนี้เหมาะส�ำหรับ เว็บไซต์ที่มีจ�ำนวนเว็บเพจไม่มากหรือเว็บไซต์ที่จ�ำเป็นต้องน�ำเสนอข้อมูลแบบทีละขั้นตอน เช่น เว็บไซต์เกี่ยวกับคู่มือการใช้งานที่ต้องอ่านทีละขั้นตอนตามล�ำดับ เป็นต้น 2) แบบระดับชั้น (Hierarchy) เป็นรูปแบบการเชื่อมโยงในเว็บไซต์ที่นิยม ใช้กันมากที่สุดคือแบ่งเนื้อหาออกเป็นกลุ่มและรวมอยู่ในเมนูเดียวกันผู้ใช้ท�ำการเข้าถึง เนื้อหาผ่านทางเมนูต่างๆ การออกแบบเว็บลักษณะนี้เหมาะกับเว็บไซต์ที่มีจ�ำนวน เว็บเพจมากขึ้นเช่นwww.apple.com,www.tohome.comและwww.amazon.com ดังตัวอย่างหน้าเว็บไซต์ที่ผ่านมาแล้ว ที่จะเห็นได้ว่าในหน้าเว็บหลักนั้นจะมีเมนูย่อยๆ และเมื่อเข้าไปในเมนูย่อยแล้วจะมีเมนูเพื่อเข้าถึงเนื้อหาต่อไปโดยที่ไม่ได้บังคับผู้ใช้ ให้เข้าถึงหน้าเว็บอย่างเป็นล�ำดับ 3) แบบผสม (Combination) เหมาะส�ำหรับเว็บไซต์ที่มีความซับซ้อน โดย น�ำข้อดีของรูปแบบทั้งสองข้างต้นมาผสมกัน นั่นคือแบ่งเนื้อหาออกแบบกลุ่มให้อยู่ใน แต่ละเมนูย่อย และเมื่อผู้ใช้เข้าไปในเมนูนั้นๆ แล้ว การเข้าถึงเนื้อหาเว็บจะท�ำโดยการ เข้าไปทีละล�ำดับ เช่น เว็บไซต์ที่เสมือนเป็นหนังสือที่มีหน้าหลักคือหน้าสารบัญ และ เมื่อผู้ใช้ท�ำการคลิกที่หัวข้อในสารบัญแล้วเมื่อเข้าไปอ่านในแต่ละหัวข้อจ�ำเป็นจะต้อง อ่านหน้าเว็บอย่างเป็นล�ำดับ หลังจากที่ท�ำการออกแบบโครงสร้างการ เชื่อมโยงของเว็บไซต์แล้ว ขั้นตอนถัดมาคือ เลือกโทนสีหรือThemeของเว็บไซต์เนื่องจาก การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมาย ของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สี ให้เหมาะสมกลมกลืน ไม่เพียงแต่จะสร้าง ความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถท�ำให้ เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ โดยสีเป็น องค์ประกอบหลักส�ำหรับการตกแต่งเว็บ จึงจ�ำเป็นอย่างยิ่งที่จะต้อง ท�ำความเข้าใจเกี่ยวกับการเลือกใช้สี
  • 52. 51 บทที่2กลเม็ดปั้นเว็บสวยและดี ระบบสีที่แสดงบนหน้าจอคอมพิวเตอร์ มีระบบการแสดงผลผ่าน หลอดล�ำแสงที่เรียกว่า CRT (Cathode ray tube) โดยมีลักษณะระบบสี แบบบวก อาศัยการผสมของแสงสีแดง สีเขียว และสีน�้ำเงิน หรือที่เรียกว่า “ระบบสีRGB”สามารถก�ำหนดค่าแม่สีจาก0ถึง255ได้โดยค่า0หมายถึง แม่สีนั้นๆมีความสว่างน้อยมากจนมืดเป็นสีด�ำไปเลยในขณะที่ค่า255หมายถึง แม่สีนั้นมีความสว่างมากที่สุดจากการรวมสีของแม่สีหลักจะท�ำให้เกิดแสงสี ต่างๆ บนหน้าจอ ส�ำหรับการพัฒนาเว็บไซต์โดยการใช้ภาษา HTML นั้น ก็มีการก�ำหนดสีโดยใช้ระบบ RGB เช่นกัน วงล้อสีส�ำหรับพัฒนาเว็บไซต์ด้วยภาษา HTML สีมีอิทธิพลในเรื่องของอารมณ์การสื่อความหมายที่เด่นชัดกระตุ้น การรับรู้ทางด้านจิตใจมนุษย์ สีแต่ละสีจะสะท้อนอารมณ์และความรู้สึก ไม่เหมือนกันสีบางสีให้ความรู้สึกสงบบางสีให้ความรู้สึกตื่นเต้นเร้าใจสีจึงเป็น ส่วนส�ำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ ดังนั้น การเลือกใช้โทนสีภายใน เว็บไซต์จึงเป็นการแสดงถึงความแตกต่างของสีที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรือเศร้าโศก รูปแบบของสีที่สายตาของมนุษย์มองเห็น สามารถ แบ่งออกเป็น 3 กลุ่มคือ (รูปภาพจากwww.urlnexdoor.com)
  • 53. WebsiteD.I.Y. 52 1. สีโทนร้อน (Warm Colors)เป็น กลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนี้ช่วยให้ หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึ้น ตัวอย่างเว็บไซต์เช่นwww.stickermule.com 2. สีโทนเย็น(CoolColors)แสดงถึง ความสุภาพ อ่อนโยน เรียบร้อย จัดเป็น กลุ่มสีที่มีคนชอบมากที่สุด เพราะเป็น สีที่สามารถโน้มน้าวในระยะไกลได้ เช่น www.ecopono.com 3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลางประกอบด้วยสีด�ำ สีขาว สีเทา และสีน�้ำตาล กลุ่มสีเหล่านี้คือ สีกลางที่ สามารถน�ำไปผสมกับสีอื่นๆ เพื่อให้เกิด สีกลางขึ้นมา เช่น www.amazon.com ที่เน้นสีพื้นหลังเป็นสีขาว ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนร้อนของ www.stickermule.com ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนเย็นของ www.logolabs.nl ตัวอย่างเว็บไซต์ที่ออกแบบเว็บโดยใช้สีโทนกลางของ www.amazon.com
  • 54. 53 บทที่2กลเม็ดปั้นเว็บสวยและดี โดยทั่วไปแล้ว หน้าเว็บต่างๆ จะประกอบไปด้วยส่วนประกอบ ดังนี้การก�ำหนด ส่วนประกอบต่างๆ ในหน้าเว็บไซต์ 1) สัญลักษณ์ หรือโลโก้ (Logo) เป็นสิ่งที่บ่งบอกความเป็นเอกลักษณ์ของ เว็บนั้นๆ ควรจะเป็นรูปภาพหรือข้อความที่ จดจ�ำได้ง่ายโดยส่วนใหญ่นิยมวางไว้มุมซ้าย บนสุดของเว็บไซต์ 2) เมนูหรือเนวิเกชัน(Navigation) เป็นส่วนที่รวมการเชื่อมโยงไปยังหน้าต่างๆ ในเว็บไซต์ควรออกแบบให้เห็นชัดและเข้าถึง ง่ายสะดวกใช้งานโดยส่วนใหญ่แล้วจะวางไว้ ส่วนบน หรือด้านซ้ายของเว็บไซต์ และควร อยู่ในต�ำแหน่งที่เห็นได้เมื่อเข้าเว็บครั้งแรก แสดงส่วนประกอบของเว็บไซต์ที่ดี 3) เนื้อหา(Content)ถือเป็นหัวใจหลักของเว็บไซต์ที่ท�ำให้ผู้ใช้ตัดสินใจเข้าใช้งาน เว็บไซต์หรือออกจากเว็บไซต์ได้เลย การเขียนเนื้อหาควรเลือกใช้ขนาดตัวอักษร และสีสัน ที่ดึงดูดผู้ใช้ ดูสะอาดตาเพื่อให้อ่านง่าย และควรมีรูปภาพประกอบที่สดใส สื่อถึงเนื้อหา ชัดเจนหากมีส่วนของมัลติมีเดียอื่นๆเช่นวิดีโอหรือแอนิเมชันก็จะช่วยดึงดูดผู้ใช้งานได้มาก ยิ่งขึ้นอีก 4) ส่วนท้ายของเว็บ(Footer) มักจะเป็นส่วนที่รวมลิงก์ไปยังบทความหรือส่วน ที่ผู้ใช้มักจะเข้าถึงบ่อยๆหรือรวมช่องทางการติดต่อเพื่อให้ผู้ใช้ติดต่อกับเจ้าของเว็บไซต์ได้ 5) พื้นที่ว่าง (White Space) เป็นส่วนที่ส�ำคัญอีกอย่างหนึ่งของเว็บไซต์ แม้ว่า พื้นที่ว่างจะไม่มีข้อมูล หรือเนื้อหาใดๆ แต่จะช่วยให้หน้าเว็บดูไม่อึดอัดจนเกินไป และยัง ช่วยให้ผู้ใช้อ่านข้อมูลในเว็บได้ง่ายขึ้นด้วย เช่น www.apple.com จะเห็นว่ามีพื้นที่ว่าง มากมาย ถึงแม้ว่าจะไม่มีตัวหนังสือมากนักแต่ก็ดึงดูดผู้ใช้งานได้เป็นอย่างดี
  • 55. WebsiteD.I.Y. 54 การออกแบบหน้าเว็บไซต์นั้นอาจจะน�ำหลักการถ่ายภาพมาประยุกต์ใช้ร่วมได้การถ่ายภาพ โดยส่วนใหญ่นั้นมักจะใช้เส้นกริด (Grid) เพื่อก�ำหนดต�ำแหน่งรายละเอียดในรูปภาพ ซึ่งการจัด วางองค์ประกอบในหน้าเว็บอาจจะใช้วิธีการเดียวกันนี้ได้ ส�ำหรับแนวคิดเกี่ยวกับเส้นกริดนั้น คือ“กฎสามส่วน”ซึ่งกล่าวไว้ว่าไม่ว่าภาพจะอยู่แนวตั้งหรือแนวนอนก็ตามหากเราแบ่งภาพนั้น ออกเป็นสามส่วนทั้งตามแนวตั้งและแนวนอนแล้วลากเส้นแบ่งภาพทั้งสามเส้นจะเกิดจุดตัดกัน ทั้งหมด 4 จุด ดังรูปด้านล่าง ซึ่งจุดตัดของเส้นทั้งสี่นี้เป็นต�ำแหน่งที่เหมาะสมส�ำหรับการจัดวาง วัตถุที่ต้องการเน้นให้เป็นจุดเด่นหลัก ส่วนรายละเอียดอื่นๆ นั้นเป็นส่วนส�ำคัญที่รองลงมา อาจจะวางในต�ำแหน่งอื่นๆ ก็ได้ ตัวอย่างโครงสร้างเว็บไซต์ของwww.apple.com การใช้เส้นกริดเพื่อก�ำหนดต�ำแหน่งรายละเอียด ในรูปภาพ ส�ำหรับการวางต�ำแหน่งเมนู รวมทั้งต�ำแหน่งของส่วนประกอบต่างๆ ในหน้าเว็บไซต์ที่นิยมใช้มีอยู่3รูปแบบ ด้วยกันคือ การก�ำหนดเมนูด้านซ้าย เป็นรูปแบบที่นิยมใช้มากที่สุดเนื่องจาก เป็นรูปแบบที่สามารถใช้งานได้ง่าย แต่ก็มีข้อด้อยคืออาจดูไม่น่าสนใจ เท่าที่ควรเพราะว่าผู้ใช้งานสามารถ พบเห็นได้โดยทั่วไป ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านซ้าย
  • 56. 55 บทที่2กลเม็ดปั้นเว็บสวยและดี การก�ำหนดเมนูด้านขวา เป็นรูปแบบที่อาจจะไม่ค่อยนิยมใช้มากนัก เพราะดูแปลกตาแต่ว่ามีข้อดีคือส่วนเนื้อหา หลักจะถูกแสดงอยู่ด้านซ้ายมือ ซึ่งผู้ใช้จะ มองเป็นส่วนแรกๆ อย่างไรก็ตาม เนื่องด้วย ส่วนเมนูจะถูกวางไว้ทางขวามือ ซึ่งท�ำให้ผู้ใช้ อาจมองไม่เห็น โดยเฉพาะหากหน้าจอของ ผู้ใช้มีขนาดเล็ก ส่วนเมนูก็จะถูกบังไปได้ การก�ำหนดเมนูด้านขวาและซ้าย ก�ำลังเป็นรูปแบบที่เริ่มให้ความนิยมใช้มากขึ้น การออกแบบลักษณะนี้เหมาะกับเว็บไซต์ที่มี จ�ำนวนเมนูมาก รวมทั้งเว็บอีคอมเมิร์ซ หรือ เว็บที่เน้นการโฆษณาสินค้า โดยจะพยายาม ให้เนื้อหามีข้อความน้อยที่สุดแต่ข้อมูล ครบถ้วน ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านขวา ตัวอย่างการจัดวางโครงสร้างเว็บ โดยให้เมนูอยู่ด้านขวาและซ้าย เมื่อก�ำหนดส่วนประกอบและต�ำแหน่งของข้อมูลในหน้าเว็บ ได้แล้วเราสามารถเริ่มต้นพัฒนาเว็บไซต์ได้ทันทีโดยในการออกแบบนั้น อาจยังไม่ต้องใช้เครื่องมือทางคอมพิวเตอร์มากนัก อาจจะร่างบน กระดาษก่อนเพื่อให้เข้าใจถึงองค์ประกอบโดยรวมทั้งหมดของหน้าเว็บ ก่อนจะลงมือพัฒนาต่อไป
  • 57. WebsiteD.I.Y. 56 ในหัวข้อก่อนหน้านี้ได้อธิบายถึงหลักการและขั้นตอนการ ออกแบบเว็บไซต์ที่ดีไปแล้ว ส�ำหรับหัวข้อนี้จะกล่าวถึงรายละเอียด เพิ่มเติมว่ารูปแบบเว็บไซต์ที่ดีและก�ำลังได้รับความนิยมในปัจจุบัน นั้นเป็นอย่างไร โดยแนวโน้มการออกแบบเว็บไซต์ขณะนี้ มักเน้นที่ ความเรียบง่ายไม่ซับซ้อนในการเข้าถึงข้อมูลนอกจากนี้ด้วยความนิยม ของอุปกรณ์เคลื่อนที่แบบพกพา ท�ำให้เว็บไซต์ยุคใหม่จ�ำเป็นต้อง ออกแบบให้รองรับทั้งการเข้าเว็บจากเครื่องคอมพิวเตอร์และอุปกรณ์ เคลื่อนที่อีกด้วย 2.3 จับกระแส เว็บดีไซน์ยุค 3.0 การออกแบบเว็บไซต์แบบ Single Page Design “เป็นการออกแบบเว็บไซต์ที่ให้ข้อมูลทุกอย่างอยู่ในหน้าจอเดียว”ทั้งในส่วน ของหน้าจอคอมพิวเตอร์ หรืออุปกรณ์การเคลื่อนที่แบบพกพา เช่น สมาร์ตโฟน เนื่องจากมีผลการวิจัยว่า ผู้ใช้งานเว็บไซต์ส่วนใหญ่ไม่ชอบการเลื่อนไปมา หรือการ Scrollบนหน้าเว็บไซต์เนื่องจากพฤติกรรมของผู้ใช้งานเว็บไซต์มีโอกาสเบื่อง่ายและ อาจจะออกจากหน้าเว็บไซต์ได้ง่ายถ้าหากไม่ได้รับข้อมูลข่าวสารตามที่ต้องการอย่าง รวดเร็วดังนั้นการออกแบบเว็บในยุคใหม่จึงมักผสมผสานกับScriptหรือโปรแกรม ที่จะใช้ในการออกแบบเว็บไซต์ให้น่าใช้งานและอยู่ในหน้าจอเดียวด้วยการน�ำScript Program จ�ำพวกซ่อนเนื้อหาไว้ก่อน แล้วค่อยแสดงผลเมื่อกด หรือขยายเนื้อหา ออกมาให้เห็นเมื่อผู้ใช้คลิกหรือเลื่อนเมาส์มายังต�ำแหน่งที่ก�ำหนดไว้
  • 58. 57 บทที่2กลเม็ดปั้นเว็บสวยและดี การออกแบบเว็บลักษณะนี้ส่วนใหญ่จะก�ำหนดให้มีพื้นที่ว่างในหน้าเว็บด้วยซึ่งท�ำให้ ดูสะอาดตา ดึงดูดผู้ใช้งาน ตัวอย่างหน้าเว็บในลักษณะนี้เป็นดังรูปด้านล่าง ตัวอย่างเว็บไซต์แบบ Single Page Design การออกแบบเว็บไซต์โดยให้มีภาพพื้นหลังขนาดใหญ่ เป็นที่ทราบกันดีว่าภาพหนึ่งภาพ สามารถแทนค�ำพูดได้เป็นร้อยค�ำและเนื่องด้วย ผู้ใช้งานในปัจจุบันไม่ชอบอ่านตัวหนังสือมากนัก ดังนั้น การออกแบบเว็บไซต์ยุคใหม่ มักลดปริมาณข้อความลงแต่จะใช้รูปภาพที่สวยงามและสื่อตรงกับเนื้อหาของเว็บไซต์มาเป็น ภาพพื้นหลังแทน นอกจากภาพพื้นหลังขนาดใหญ่แล้วอาจมีการใช้ตัวหนังสือที่มีลักษณะพิเศษสวยงาม ดึงดูดผู้ใช้ รวมทั้งการเล่นค�ำต่างๆ ที่โดนใจผู้ชมร่วมกันด้วย ดังตัวอย่างรูปด้านล่าง ตัวอย่างเว็บไซต์แบบภาพพื้นหลังขนาดใหญ่ ตัวอย่างเว็บไซต์ที่มีภาพพื้นหลังขนาดใหญ่ และใช้รูปแบบอักษรที่น่าสนใจ
  • 59. WebsiteD.I.Y. 58 การออกแบบเว็บไซต์ ที่เน้นความเรียบง่าย การออกแบบเว็บไซต์ในปัจจุบัน จะเน้นความเรียบง่ายในลักษณะที่ว่าเมื่อผู้ใช้ เข้ามาถึงหน้าเว็บไซต์ต้องสามารถใช้งาน เว็บไซต์ได้ทันที โดยไม่จ�ำเป็นต้องอาศัย เวลาในการศึกษารูปแบบการใช้งานเว็บไซต์ เลย ด้วยการเน้นข้อความและรูปภาพที่ เมื่อผู้ใช้เห็นแล้วสามารถเข้าใจได้ในทันที รวมไปถึงการออกแบบเมนูต่างๆที่เรียบง่าย เข้าใจได้ง่าย ดังตัวอย่างรูป ตัวอย่างการออกแบบเว็บไซต์ ที่เน้นความเรียบง่าย
  • 60. 59 บทที่2กลเม็ดปั้นเว็บสวยและดี ตัวอย่างเว็บไซต์ที่มีการใช้ภาพ Infographic แนวทางหนึ่งที่จะช่วยให้หน้าเว็บไซต์สามารถเข้าใจได้ง่าย ไม่ซับซ้อนคือ การใช้ Infographic ซึ่งเป็นรูปภาพที่สามารถใช้ เพื่อแสดงถึงผลสรุปข้อมูลต่างๆ ที่สามารถเข้าใจได้ง่าย โดยการ ดูภาพนั้นเพียงภาพเดียว
  • 61. WebsiteD.I.Y. 60 การออกแบบเว็บไซต์แบบResponsiveWeb ในรูปแบบนี้มีแนวคิดว่า “การพัฒนาเว็บไซต์นั้น ควรท�ำเพียงครั้งเดียวและสามารถแสดงผลได้กับทุกอุปกรณ์ และทุกขนาดของหน้าจอ”ไม่ว่าจะเป็นหน้าจอขนาดใหญ่หรือเล็ก หรืออุปกรณ์เคลื่อนที่แบบพกพาอย่างสมาร์ตโฟน หรือแท็บเล็ต ก็ตาม ถึงแม้ผู้ใช้จะสามารถ Zoom in/out จากหน้าจอได้ แต่ก็ยังเรียกว่าสร้างความวุ่นวายและไม่สะดวกในการใช้งาน ดังนั้น การพัฒนาเว็บในแนวทาง Responsive จึงก�ำลังได้รับ ความสนใจในกลุ่มผู้พัฒนาเว็บไซต์ ด้วยเหตุผลหลายประการ เช่น ประหยัดทรัพยากรของเครื่องที่เรียกใช้ สามารถลด ค่าใช้จ่ายในการพัฒนาแยกส่วนจากเดิมที่อาจจะต้องท�ำเว็บไซต์ ส�ำหรับเครื่องคอมพิวเตอร์ และอุปกรณ์อื่นๆ แยกจากกัน ก็ เหลือเพียงการพัฒนาเว็บไซต์เพียงครั้งเดียว รวมทั้งยังส่งผลต่อ Search Engine อย่างเช่น www.google.com ที่จะเข้ามา ตรวจสอบและจับ Keyword บนเว็บไซต์ได้มีประสิทธิภาพ มากขึ้นอีกด้วย อย่างไรก็ตาม ข้อพึงระวังส�ำหรับการออกแบบเว็บไซต์ แบบ Responsive คือ นักพัฒนาจะต้องคิดและวางแผน การออกแบบเป็นอย่างดี และที่ส�ำคัญจ�ำเป็นจะต้อง หลีกเลี่ยงการใช้โปรแกรมเสริมบนเว็บไซต์ เนื่องจากข้อจ�ำกัด ในส่วนของอุปกรณ์เคลื่อนที่แบบพกพาต่างๆ แต่ข้อจ�ำกัด เหล่านี้ก็ไม่สามารถหยุดยั้งความสนใจที่มีต่อการพัฒนาเว็บไซต์ แบบ Responsive ได้
  • 62. 61 บทที่2กลเม็ดปั้นเว็บสวยและดี ตัวอย่างเว็บไซต์ที่มีการออกแบบ ให้ปุ่มไอคอนมีขนาดใหญ่ ตัวอย่างเว็บไซต์แบบ Responsive Design นอกจากนี้ เว็บไซต์ที่ออกแบบใน ลักษณะของ Responsive นั้นควรจะต้อง ค�ำนึงถึงรูปร่างหน้าตา หน้าจอ ปุ่ม หรือ ไอคอนต่างๆ ให้มีขนาดใหญ่ขึ้น เพื่อง่ายต่อ การใช้นิ้วสัมผัสจากหน้าจอเมื่อเข้าชมเว็บไซต์ เพราะหากออกแบบให้ขนาดเล็กเกินไป อาจ จะสร้างความไม่สะดวกกับผู้ใช้ดังเช่นตัวอย่าง เว็บไซต์ในรูปต่อไปนี้ที่พยายามออกแบบให้ ปุ่มไอคอนต่างๆ มีขนาดใหญ่ ซึ่งเมื่อเปิด เว็บไซต์ในอุปกรณ์ที่มีจอขนาดเล็กแล้ว ก็ยังไม่ส่งผลเสียใดๆ ต่อการใช้งาน
  • 63. WebsiteD.I.Y. 62 ในหัวข้อนี้จะได้ยกตัวอย่างเว็บไซต์อีคอมเมิร์ซที่มีการ ออกแบบที่ดี มีความสวยงาม และดึงดูดผู้เยี่ยมชม อีกทั้งยังสามารถ ใช้ง่าย โดยที่ผู้ใช้ไม่จ�ำเป็นต้องศึกษาเรียนรู้มากนัก โดยท่านสามารถ ทดลองเข้าไปยังเว็บไซต์เหล่านี้เพื่อศึกษาแนวทางการออกแบบ เว็บไซต์ที่ดีและน�ำมาประยุกต์ใช้ในการออกแบบเว็บไซต์ของตนเองได้ (1) www.gforce.be : เว็บไซต์ที่ออกแบบโดยใช้ภาพ พื้นหลังขนาดใหญ่แบบSinglePageDesignโดยมุ่งเน้นความเรียบง่าย ต่อการใช้งาน (2) www.merchworld.eu : เว็บไซต์ที่ออกแบบด้วยการ แบ่งสัดส่วนบนเว็บไซต์อย่างชัดเจนปุ่มไอคอนหรือเมนูที่เข้าถึงยังหน้า เว็บต่างๆมีขนาดใหญ่เลือกใช้สีโทนกลางคือสีขาวเป็นThemeหลัก บนเว็บไซต์ ซึ่งท�ำให้ท�ำให้เว็บไซต์ดูเรียบง่าย สบายตา น่าใช้ และดูมี ความเป็นมืออาชีพ 2.4 เปิดไอเดีย สร้างสรรค์เว็บยุคใหม่
  • 64. 63 บทที่2กลเม็ดปั้นเว็บสวยและดี (3) www.mendo.nl : เว็บไซต์ที่ออกแบบ ในลักษณะ Single Page Design มีพื้นหลังเป็น โทนสีกลางคือสีด�ำ มีการใช้ภาพพื้นหลังขนาดใหญ่ ท�ำให้ทราบทันทีเมื่อเข้าชมเว็บไซต์ว่าเป็นเว็บไซต์ จ�ำหน่ายหนังสือ (4) www.wantist.com : การออกแบบ โดยใช้สีโทนกลางคือสีเทา แต่มีการเน้นความ สวยงามด้วยสีโทนเย็นคือสีฟ้า รวมทั้งยังมีการจัด โครงสร้างเว็บไซต์ตามประเภทของสินค้าด้วยภาพ ขนาดใหญ่ ท�ำให้เว็บไซต์ดูน่าสนใจ และมีความง่าย ในการใช้งาน (5) www.scb.co.th/scbfirst/ : เว็บไซต์ ที่ออกแบบโดยเน้นสีที่เป็นเอกลักษณ์ขององค์กรคือ สีม่วงและใช้ภาพพื้นหลังขนาดใหญ่ที่เน้นประโยชน์ ของบริการนั่นคือผู้ใช้จะมีความสุขในการรับบริการ มีการออกแบบเมนูและไอคอนเพื่อเข้าชมส่วนต่างๆ ภายในเว็บไซต์อย่างสะดวก จะเห็นว่าการออกแบบเว็บไซต์นั้นแม้ว่าจะมีอยู่หลายขั้นตอน แต่นั่นคง ไม่ใช่ข้อจ�ำกัดที่จะลงมือท�ำ เพียงแต่ผู้พัฒนาเว็บควรค�ำนึงถึงกลุ่มเป้าหมาย ที่เป็นผู้ใช้เว็บเป็นส�ำคัญการออกแบบเว็บไซต์ในยุคปัจจุบันนอกจากเนื้อหาต้องเป็น ประโยชน์ต่อผู้ใช้อย่างแท้จริงแล้ว การออกแบบเว็บไซต์ที่สวยงาม เรียบง่าย น่าใช้ รวมไปถึงการจัดวางต�ำแหน่งข้อมูลต่างๆ อย่างเหมาะสมและโดดเด่น เป็นสิ่งส�ำคัญ ที่จะเรียกใจผู้ใช้ให้อยู่กับเว็บไซต์ของเราได้นานที่สุดและติดใจที่จะกลับเข้ามาเยี่ยมชม เว็บไซต์เราใหม่ในอนาคต
  • 67. WebsiteD.I.Y. 66 การพัฒนาเว็บไซต์อีคอมเมิร์ซนั้น แม้ว่าจะมีหลายขั้นตอนจนผู้ที่ไม่มี ประสบการณ์เขียนโปรแกรมมาก่อนอาจรู้สึกว่าไม่สามารถท�ำได้แต่ด้วยความ ก้าวหน้าของเทคโนโลยีต่างๆ ท�ำให้ปัจจุบันนี้ “ทุกคนสามารถสร้างเว็บไซต์ได้ ด้วยตนเองโดยไม่จ�ำเป็นต้องมีความรู้ด้านการเขียนโปรแกรมแต่อย่างใด”อย่างเช่น การใช้บริการเว็บไซต์ส�ำเร็จรูปที่จะช่วยให้เรามีเว็บได้ภายในเวลาเพียงไม่กี่ นาที หรือการใช้บริการในตลาดกลางพาณิชย์อิเล็กทรอนิกส์ หรือที่นิยมเรียกกันว่า e-Marketplaceที่มีอยู่มากมายทั้งในและต่างประเทศหรือหากใครมีพื้นฐานความรู้ ด้านการเขียนโปรแกรมมาบ้างก็อาจเลือกใช้โปรแกรมส�ำเร็จรูปที่เรียกว่าCMSก็ได้ ซึ่งทั้งหมดจะได้แนะน�ำให้รู้จักกันในบทนี้ เว็บไซต์ส�ำเร็จรูป (Web Template) เป็นบริการที่ถูกสร้างขึ้นเพื่ออ�ำนวย ความสะดวกให้กับผู้ต้องการมีเว็บไซต์แต่ไม่มีความรู้ด้านการเขียนโปรแกรมมาก่อน จึงมี การพัฒนาเว็บไซต์แบบอัตโนมัติขึ้นเพื่ออ�ำนวยความสะดวกให้กับผู้ใช้งาน กล่าวคือ ผู้ใช้บริการเว็บส�ำเร็จรูปมีหน้าที่เพียงกรอกข้อมูลลงบนแบบฟอร์มที่ผู้ให้บริการ เว็บส�ำเร็จรูปจัดเตรียมไว้เช่นชื่อร้านค้ารายการสินค้าต่างๆข้อมูลการติดต่อจากนั้นระบบ ก็จะท�ำงานให้โดยอัตโนมัติ ตัวอย่างพัฒนาการวิธีสั่งสินค้าของ The Pizza Company 3.1 Web Template... สร้างเว็บเหมือนเสกได้ ซื้อผ่านหน้าร้าน โทรสั่งอาหาร สั่งซื้อออนไลน์ ผ่านแอปพลิเคชัน
  • 68. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 67 ตัวอย่างผู้ให้บริการเว็บไซต์ส�ำเร็จรูป www.readyplanet.com www.igetweb.com จุดเด่น/ด้อย ของ เว็บไซต์ส�ำเร็จรูป www.makewebeasy.com ลักษณะเด่นของการใช้เว็บไซต์แบบส�ำเร็จรูปที่เห็นได้ชัดเจนก็คือ เจ้าของเว็บไม่จ�ำเป็นต้องมีความรู้ในการเขียนโปรแกรมใดๆ ก็สามารถ มีเว็บไซต์ได้อย่างรวดเร็วทันใจ ใช้เวลาเพียงไม่กี่นาที และที่ส�ำคัญยัง สามารถจัดการแก้ไขหรือปรับปรุงข้อมูลต่างๆด้วยตนเองได้ตลอดเวลา อย่างไรก็ตาม เนื่องจากเว็บส�ำเร็จรูปเป็นโปรแกรมอัตโนมัติ ท�ำให้ความ สามารถของระบบ (Features) อาจไม่รองรับความต้องการของเจ้าของ เว็บไซต์ได้ทั้งหมด เพราะส่วนใหญ่มักจะถูกออกแบบเป็นมาตรฐาน ให้ทุกคนสามารถใช้งานได้ www.shopup.com
  • 69. WebsiteD.I.Y. 68 ปัจจุบันมีผู้ให้บริการเว็บไซต์ส�ำเร็จรูป ทั้งในและต่างประเทศจ�ำนวนมากรวมทั้งบางแห่ง ก็มุ่งเน้นให้บริการเว็บไซต์ส�ำหรับอีคอมเมิร์ซ โดยเฉพาะด้วยท�ำให้เจ้าของธุรกิจต่างๆสามารถมี เว็บไซต์โดยไม่จ�ำเป็นต้องมีความรู้ด้านการเขียน โปรแกรมใดๆ รวมทั้งไม่จ�ำเป็นต้องติดต่อผู้ให้ บริการเครื่องแม่ข่ายส�ำหรับท�ำเว็บไซต์อีกด้วย เนื่องจากกระบวนการทั้งหมดจะได้รับการดูแล โดยผู้ให้บริการเว็บไซต์ส�ำเร็จรูปนั่นเอง โดย ขั้นตอนการสร้างเว็บไซต์ส�ำเร็จรูปนั้นจะมีความ แตกต่างกันไปตามผู้ให้บริการของแต่ละเว็บไซต์ แต่โดยหลักใหญ่ใจความแล้วส่วนมากจะประกอบ ไปด้วย 4 ขั้นตอนหลักๆ ดังนี้ ขั้นตอนการพัฒนา เว็บไซต์ส�ำเร็จรูป 1. สมัครสมาชิก 2. สร้างร้านค้าออนไลน์ ขั้นตอนการพัฒนาเว็บไซต์ส�ำเร็จรูป (1) สมัครสมาชิก : เป็นขั้นตอนแรกของการใช้บริการเว็บไซต์ส�ำเร็จรูปโดยผู้ใช้บริการต้อง ลงทะเบียนเพื่อสมัครเป็นสมาชิกของเว็บไซต์ผู้ให้บริการนั้นๆในขั้นตอนนี้หากเป็น ผู้ให้บริการฟรีแบบไม่มีค่าใช้จ่ายก็จะสามารถสมัครสมาชิกและสร้างเว็บไซต์ ได้ทันทีแต่ส�ำหรับผู้ให้บริการที่คิดค่าใช้จ่ายจะต้องมีการจ่ายค่าสมาชิกเสียก่อน จึงจะสามารถใช้บริการต่างๆ ในเว็บไซต์นั้นได้ 3. การจัดข้อมูล 4. ติดตั้งส่วนประกอบเสริม
  • 70. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 69 โดยทั่วไปแล้วข้อมูลพื้นฐานที่จะต้อง กรอกเพื่อสมัครสมาชิกเว็บไซต์ส�ำเร็จรูป เช่น ชื่อ-นามสกุล ชื่อร้านค้า ข้อมูลการติดต่อ อีเมลรวมถึงหมายเลขบัตรประชาชนฯลฯ ในขั้นตอนนี้ผู้ให้บริการส่วนใหญ่มักจะก�ำหนด ให้สมาชิกตั้งชื่อเว็บไซต์ในลักษณะที่เรียกว่า “Subdomain”ด้วยซึ่งSubdomainก็คือ เว็บไซต์ย่อยๆภายในเว็บไซต์หลักนั่นเองตัวอย่าง เช่น เว็บไซต์หลักคือ www.igetweb.com จะมีเว็บไซต์ย่อยๆ ภายใต้เว็บไซต์ดังกล่าว เช่น สมมติเราเป็นธุรกิจบริการรถเช่า และ ต้องการตั้งชื่อเว็บไซต์ว่า Car Rent ดังนั้น Subdomain ภายใต้เว็บไซต์ igetweb ก็คือ www.carrent.igetweb เป็นต้น ตัวอย่างขั้นตอนการสมัครสมาชิก เว็บไซต์ส�ำเร็จรูป (2) สร้างร้านค้าออนไลน์ : เมื่อการสมัครสมาชิกเสร็จสมบูรณ์แล้วต่อมาคือขั้นตอนการสร้างร้านค้าออนไลน์ ซึ่งผู้ให้ บริการเว็บไซต์ส�ำเร็จรูปแต่ละรายก็มีวิธีการใช้งานที่แตกต่างกันไป แต่ขั้นตอนโดยรวมๆ แล้ว มักจะเป็นเรื่องการใส่โลโก้พร้อมข้อมูลร้านค้าข้อมูลและรูปภาพสินค้าข้อมูลการติดต่อช่องทาง การช�ำระเงินนอกจากนี้บางเว็บเจ้าของเว็บสามารถเลือกรูปแบบเว็บไซต์ส�ำเร็จรูปหรือที่เรียกว่า เทมเพลต (Template) ที่เหมาะสมกับธุรกิจของตนเองได้อีกด้วย www.igetweb.com www.shopup.com ตัวอย่างเทมเพลตของเว็บไซต์ส�ำเร็จรูป www.chaiyoreadyweb.com ตั้งชื่อเว็บไซต์แบบsubdomain ตั้งชื่อเว็บไซต์แบบsubdomain www.lnwshop.com
  • 71. WebsiteD.I.Y. 70 ปัจจุบันนี้ระบบเว็บส�ำเร็จรูปได้พัฒนาให้ง่าย ต่อการใช้งานมากขึ้น อย่างเช่น การสร้างร้านค้า ในลักษณะที่เรียกว่า “Direct Manipulation” ซึ่งเป็นรูปแบบการโต้ตอบระหว่างผู้ใช้กับระบบ โดยตรง หรือที่เข้าใจกันโดยทั่วไปว่าเทคนิคแบบ ลากและวาง(Drag&Drop)กล่าวคือผู้ให้บริการ จะสร้างหน้าร้านค้าเริ่มต้นมาให้ก่อนหลังจากนั้น เจ้าของเว็บสามารถคลิกเลือกต�ำแหน่งต่างๆ บน เว็บไซต์ที่ต้องการแก้ไขข้อมูลได้ทันทีถือเป็น รูปแบบการใช้งานที่ง่ายกว่ายุคก่อนที่ส่วนใหญ่ มักจะออกแบบเป็นแบบฟอร์มให้กรอกข้อมูล โดยไม่ได้แสดงตัวอย่างร้านค้าจริงให้เห็นในทันที www.lnwshop.com www.pro-webbiz.com (ใช้เทคโนโลยีแบบ Direct Manipulation) ตัวอย่างขั้นตอนการสร้างร้านค้าออนไลน์ ผ่านเว็บไซต์ส�ำเร็จรูป (3) การใช้งานระบบหลังร้าน : เป็นระบบที่ผู้ให้บริการเว็บส�ำเร็จรูป จัดเตรียมไว้เพื่ออ�ำนวยความสะดวกให้เจ้าของ เว็บไซต์ใช้ในการดูแลบริหารจัดการธุรกิจของ ตนเองได้สะดวกยิ่งขึ้น เช่น ระบบสต็อกสินค้า ระบบติดตามการช�ำระเงินระบบสมาชิกระบบ ดูแลลูกค้าอย่างไรก็ตามความสามารถในส่วนนี้ อาจมีหรือไม่มีก็ได้ขึ้นอยู่กับผู้ให้บริการนั้นๆ เป็นหลัก ดังนั้น ก่อนตัดสินใจเลือกใช้บริการ เว็บไซต์ส�ำเร็จรูปรายใด ก็อาจต้องพิจารณา ถึงความสามารถในส่วนนี้ด้วย เพราะมันจะ เป็นเครื่องมือที่เจ้าของธุรกิจสามารถน�ำไปใช้ ประโยชน์ได้ระดับหนึ่งเลยทีเดียว www.readyplanet.com www.lnwshop.com ตัวอย่างระบบหลังร้านของเว็บไซต์ส�ำเร็จรูป ระบบสมาชิก ระบบ vela Commerce ระบบผู้ช่วย ระบบอัลบั้มรูป SMS l เพิ่มสินค้า แก้ไข ลบ เพิ่มรูปสินค้า l รายการสั่งซื้อ l รายการแจ้งช�ำระเงิน l รายการจัดส่งสินค้า l เช็คข้อความติดต่อเรา l จัดการภาพสินค้า จัดการหลังร้าน
  • 72. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 71 (4) การติดตั้งส่วนประกอบเสริม : อันที่จริงแล้ว เมื่อได้สร้างเว็บไซต์ส�ำเร็จรูปในขั้นตอนที่ 1 ถึง 3 ก็ถือว่า เราได้เว็บไซต์พร้อมที่จะขายสินค้าผ่านช่องทางออนไลน์เรียบร้อยแล้ว แต่ดังที่ ได้อธิบายไปในบทที่ผ่านมาว่าการออกแบบเว็บไซต์ที่ดีควรมีความสวยงามและ ดึงดูดใจผู้ใช้งาน ดังนั้น ในทางปฏิบัติอาจต้องมีการติดตั้งส่วนประกอบเสริม เพิ่มเติม หรือที่นิยมเรียกกันว่า Widget เพื่อเรียกความน่าสนใจให้กับเว็บไซต์ มากยิ่งขึ้นซึ่งโดยทั่วไปแล้วเว็บไซต์ส�ำเร็จรูปส่วนใหญ่ก็มักจะมีความสามารถในการ ติดตั้งส่วนประกอบเสริมต่างๆ ลงบนเว็บได้แต่จะมีมากหรือน้อยก็ขึ้นอยู่กับ ผู้ให้บริการนั้นๆ อาทิเช่น LinkBanner:เป็นWidgetช่วยสร้างแบนเนอร์โฆษณาบนต�ำแหน่ง ต่างๆ ของเว็บไซต์ Form :เป็นการสร้างแบบฟอร์มเพื่อให้ผู้เยี่ยมชมเว็บไซต์ป้อนข้อมูล เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสั่งซื้อสินค้า แบบฟอร์ม การติดต่อ เป็นต้น HTML : เป็นการเพิ่ม Widget โดยการน�ำเอาโค้ด HTML มาใส่เอง เช่น การติดตั้งตัววัดสถิติ การใส่เสียง วิดีโอต่างๆ บนเว็บไซต์ เป็นต้น Google Map : เป็นการน�ำเอาแผนที่ Google Map มาวางไว้ บนหน้าเว็บไซต์ โดยเราสามารถใช้ประโยชน์ในการก�ำหนดต�ำแหน่ง ของร้านค้าได้ในกรณีที่เราท�ำธุรกิจแบบมีหน้าร้าน ตัวอย่างการติดตั้งส่วนประกอบเสริม บนเว็บไซต์ส�ำเร็จรูป www.lnwshop.com www.blogger.com
  • 73. WebsiteD.I.Y. 72 นอกจาก4ขั้นตอนการสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปที่กล่าวไปนั้นยังมีข้อควรค�ำนึงถึง ซึ่งจะมีผลต่อความน่าเชื่อถือของเว็บไซต์ และช่วยท�ำให้เว็บนั้นๆ ติดล�ำดับในเว็บค้นหาต่างๆ อย่างเช่น Google ได้ดียิ่งขึ้น ดังนี้ (1) รูปภาพสินค้า ควรเป็นการถ่ายภาพที่เน้นหลายมุมมอง หรือที่นิยมเรียกว่าการถ่ายภาพแบบ 360 องศา ลูกค้าสามารถเห็นสินค้าได้โดยรอบ นอกจากนี้ เทคนิคการจัดแสงและเงาของการถ่ายภาพ ก็เป็นสิ่งส�ำคัญเช่นเดียวกัน โดยทั่วไปแล้วจะต้องจัดแสงให้พอเหมาะและพยายามไม่ให้เกิดเงา ถ่ายภาพบนพื้นหลังสีเรียบก็จะได้ภาพถ่ายที่สวยงาม ตัวอย่างการจัดแสงส�ำหรับ การถ่ายภาพสินค้า (2) การก�ำหนดค�ำค้นหา (Keyword) การสร้างเว็บไซต์อีคอมเมิร์ซ ควรก�ำหนด Keyword หรือค�ำส�ำคัญเพื่อให้เว็บไซต์ที่พัฒนา ขึ้นนั้นถูกค้นพบบนเว็บไซต์ค้นหาต่างๆ เช่น Google ซึ่งมีอยู่หลายเครื่องมือที่สามารถน�ำมาช่วย ก�ำหนด Keyword ได้ อย่างเช่น Keyword Planner ซึ่งเป็นบริการดีๆ ที่พัฒนาโดย Google (https://adwords.google.com/ko/KeywordPlanner/Home) ตัวอย่างการแสดงภาพสินค้าแบบหลาย มุมมองของ www.zalora.com ตัวอย่างเครื่องมือวิเคราะห์ค�ำค้นหาของ www.google.com
  • 74. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 73 (3) การก�ำหนดหมวดหมู่สินค้า (Category) การตั้งชื่อกลุ่มสินค้าก็เช่นเดียวกับ การก�ำหนด Keyword ที่จ�ำเป็นต้อง พิจารณาให้สอดคล้องกับสินค้านั้นๆ เพราะนอกจากจะส่งผลต่อการถูกค้นพบ ในเว็บไซต์ค้นหาต่างๆ แล้ว ประโยชน์ อีกด้านหนึ่งก็คือ จะช่วยให้ผู้เยี่ยมชมเว็บ สามารถเข้าถึงสินค้าที่ต้องการได้ง่ายยิ่งขึ้น เช่น เว็บไซต์ lazada.co.th นอกจาก จะแบ่งสินค้าออกเป็นหมวดหมู่เพื่อให้ง่าย ต่อการค้นหาแล้ว ยังเพิ่มลูกเล่นให้ผู้เยี่ยมชม สามารถเลือกดูจากยี่ห้อสินค้า และตาม ช่วงราคาอีกด้วย จะเห็นว่าการสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปนั้น ไม่มีความยุ่งยากอะไรเลยเพราะแม้จะไม่ใช่โปรแกรมเมอร์ ก็สามารถมีเว็บไซต์ที่ทั้งสวยและดูดีได้ อย่างไรก็ตาม สิ่งที่ ควรจะต้องค�ำนึงถึงในการเลือกใช้เว็บไซต์เหล่านี้คือ บริการ ที่ได้รับจากผู้ให้บริการที่นอกเหนือจากพื้นที่เว็บไซต์ เพราะ บางเว็บไซต์ก็มีบริการอบรมให้ความรู้เกี่ยวกับการสร้าง ร้านค้าออนไลน์ บริการวิเคราะห์ค่าสถิติต่างๆ ซึ่งสิ่งเหล่านี้ แม้ไม่ใช่ปัจจัยหลักในการพัฒนาเว็บแต่ก็เป็นสิ่งที่มีประโยชน์ ต่อการท�ำธุรกิจอีคอมเมิร์ซเช่นเดียวกัน ตัวอย่างการก�ำหนดหมวดหมู่สินค้า ของ www.lazada.co.th
  • 75. WebsiteD.I.Y. 74 e-Marketplace หรือตลาดกลางพาณิชย์อิเล็กทรอนิกส์ เป็นเว็บไซต์ ในรูปแบบของ“ตลาดนัดออนไลน์ขนาดใหญ่”เป็นบริการที่เปิดให้เจ้าของกิจการ ไม่ว่าจะเป็นขนาดเล็กหรือใหญ่ สามารถน�ำธุรกิจของตนมาประชาสัมพันธ์ ผ่านe-Marketplaceในรูปแบบการสร้างเว็บไซต์แค็ตตาล็อกสินค้าอีกทั้งผู้ยัง ไม่มีเว็บไซต์ก็สามารถสร้างเว็บขนาดย่อมๆ ผ่าน e-Marketplace ได้เช่นกัน ดังนั้นเราจะพบว่าe-Marketplaceต่างๆจึงเต็มไปด้วยร้านค้ามากมายมีการจัด แบ่งหมวดหมู่อย่างเป็นระบบระเบียบให้ผู้เยี่ยมชมสามารถค้นหาร้านค้าได้ง่าย และสะดวกโดยสามารถแบ่งเป็น 2 ลักษณะใหญ่ๆ ได้แก่ B2C และ B2B ดังนี้ B2C e-Marketplace เป็นตลาดกลางระหว่างธุรกิจร้านค้า (Business) ตรงไปยังผู้บริโภคคนสุดท้าย (Consumer) ตลาดกลางลักษณะนี้ จึงคล้ายกับช้อปปิ้งมอลล์ขนาดใหญ่ (Shopping Mall) ที่ลูกค้าสามารถเลือก ซื้อสินค้าจากร้านค้าต่างๆภายในมอลล์แห่งนั้นได้ซึ่งมักจะเป็นการซื้อปลีกคือ ซื้อคราวละไม่มากผ่านระบบตะกร้าสินค้า (Shopping Cart) 3.2 e-Marketplace... ได้ทั้งเว็บได้ทั้งลูกค้า ตัวอย่างเว็บไซต์ผู้ให้บริการ B2C e-Marketplace www.tarad.com www.lnwmarket.com www.weloveshopping.com www.priceza.com
  • 76. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 75 B2B e-Marketplace เป็นตลาดกลางระหว่างผู้ที่ท�ำธุรกิจ ด้วยกันเอง (Business to Business) เพื่อท�ำการค้าระหว่างธุรกิจกับธุรกิจ โดยตรง เช่น การซื้อสินค้า หรือวัตถุดิบที่ใช้ในการผลิตจากผู้ผลิต เพื่อน�ำไป แปรรูป หรือน�ำไปขายให้กับผู้บริโภคอีกที ดังนั้น ลักษณะการซื้อสินค้า ในตลาดกลางนี้จะซื้อคราวละมากๆ และส่วนใหญ่จะไม่นิยมซื้อผ่านระบบ ตะกร้าสินค้า แต่มักจะเจรจาต่อรองราคากันผ่านระบบแบบสอบถามราคา ออนไลน์(InquiryForm)ที่ตลาดกลางฯเป็นผู้จัดเตรียมไว้ให้ผู้ซื้อและผู้ขาย ตัวอย่างเว็บไซต์ผู้ให้บริการ B2B e-Marketplace www.alibaba.com www.ec21.com www.globaltrade.net www.thaitrade.com www.b2bthai.com www.lnwmarket.com www.pantavanij.com www.priceza.com www.quinl.com www.shoppingthai.com www.tarad.com www.thaiSecondhand.com www.thaitambon.com www.thaitechno.net www.weloveshopping.com www.alibaba.com www.amazon.com www.ec21.com www.eceurope.com www.ecplaza.net www.eng.bestsme.com www.europages.com www.globaltrade.net www.rusbiz.com www.thaitrade.com www.tradekey.com www.verticalzoom.com รายนามเว็บไซต์ผู้ให้บริการ e-Marketplace* * อ้างอิงข้อมูลบางส่วนจาก www.pawoot.com Local Global
  • 77. WebsiteD.I.Y. 76 ผู้ให้บริการเว็บไซต์e-Marketplaceส่วนใหญ่มุ่งเน้นสนับสนุนด้านการน�ำผู้ซื้อ และผู้ขายให้มาพบปะ และค้าขายกัน ซึ่งมีบริการหลักๆ 3 ลักษณะ ได้แก่ บริการต่างๆ ใน e-Marketplace 1) สารบัญธุรกิจ (Business Directory) e-Marketplace จะท�ำหน้าที่รวบรวม ข้อมูลสินค้าและร้านค้าต่างๆ บนเว็บไซต์ เปรียบเสมือนสารบัญธุรกิจ โดยจะมีการจัด แบ่งออกเป็นหมวดหมู่ เพื่อให้ผู้ซื้อสามารถ ค้นหา เลือกชมข้อมูลสินค้า/ร้านค้าต่างๆ ได้ง่ายและสะดวก ตัวอย่างหน้าสารบัญธุรกิจของ www.thaitechno.net ตัวอย่างหน้าประกาศความต้องการทางธุรกิจ ของ www.thaitrade.com 2)ประกาศความต้องการทาง ธุรกิจ (Trade Leads) เป็นบริการที่ผู้ซื้อสามารถใช้ เว็บไซต์ e-Marketplace เป็นช่องทาง ในการประกาศต้องการซื้อสินค้าของ ตนไปสู่ผู้ขาย ขณะเดียวกันผู้ขาย ก็สามารถประกาศความต้องการ ขายไปยังผู้ซื้อเช่นเดียวกัน เว็บไซต์ e-Marketplace จึงเป็นตลาดที่ เชื่อมโยงผู้ซื้อผู้ขายให้ได้พบกันเกิดการ ติดต่อและท�ำการค้ากันโดยตรง
  • 78. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 77 3) บริการเว็บไซต์ส�ำเร็จรูป หรือ แค็ตตาล็อกสินค้าออนไลน์ (Web Template) เจ้าของธุรกิจสามารถใช้บริการจาก e-Marketplace เพื่อจัดท�ำเว็บไซต์ส�ำเร็จรูป ขนาดย่อมๆ ที่มีการน�ำเสนอข้อมูลสินค้า/ บริการ รวมทั้งข้อมูลร้านค้าได้ด้วยตัวเอง ซึ่ง ลักษณะเด่นของบริการนี้ก็คือ นอกจากจะได้ เว็บไซต์ที่พร้อมใช้งานแล้ว ข้อมูลในร้านค้า จะถูกน�ำไปรวบรวมและแยกเป็นหมวดหมู่ไว้ ในสารบัญธุรกิจของ e-Marketplace นั้นๆ อีกด้วย การสร้างเว็บไซต์โดยใช้ e-Marketplace ไม่มีความยุ่งยากซับซ้อนแต่อย่างใดสามารถใช้ หลักการเช่นเดียวกับการสร้างเว็บไซต์ส�ำเร็จรูป ที่อธิบายไปในหัวข้อก่อนหน้า อย่างไรก็ตาม ด้วยคุณสมบัติพิเศษของ e-Marketplace ที่นอกจากจะท�ำให้มีเว็บไซต์ย่อมๆ แล้ว เว็บ ดังกล่าวยังจะได้รับการประชาสัมพันธ์ใน e-Marketplaceนั้นๆอีกด้วยดังนั้นในหัวข้อนี้ จะได้แนะน�ำถึงขั้นตอนพร้อมเทคนิคการเปิด ร้านค้าออนไลน์ผ่าน e-Marketplace ดังนี้ ตัวอย่างเว็บไซต์ส�ำเร็จรูปของ www.alibaba.com ขั้นตอน การพัฒนาเว็บไซต์ e-Marketplace 1. สมัครสมาชิก ขั้นตอนการพัฒนาเว็บไซต์ผ่าน e-Marketplace 2. สร้างร้านค้าออนไลน์ 3. การจัดการหลังร้าน
  • 79. WebsiteD.I.Y. 78 1) การลงทะเบียน : เป็นขั้นตอนแรกของการสร้างร้านค้าออนไลน์ผ่าน เว็บไซต์ผู้ให้บริการ e-Marketplace วิธีการมีความ คล้ายคลึงกับการสร้างเว็บไซต์ส�ำเร็จรูป แต่สิ่งที่อาจมี ความแตกต่างกันบ้างก็คือผู้ให้บริการe-Marketplace บางเว็บจะก�ำหนดให้สมาชิกใส่“ค�ำค้นหาหรือKeyword” ที่เกี่ยวข้องกับธุรกิจ เพื่อให้ผู้เยี่ยมชมเว็บง่ายต่อ การค้นหาธุรกิจตาม Keyword ดังนั้น ในขั้นตอนนี้ จึงไม่ควรละเลยตั้ง Keyword ปลอมๆ ขึ้นไป แต่ควร ก�ำหนดให้เหมาะสมกับธุรกิจมากที่สุด โดยพึงระลึก ไว้เสมอว่าควรเป็นค�ำที่ลูกค้าส่วนใหญ่นิยมใช้ในการ ค้นหา ไม่ใช่ค�ำที่เราต้องการค้นหา ตัวอย่างขั้นตอนการสมัครสมาชิก www.tradekey.com 2) สร้างร้านค้าออนไลน์ : การสร้างร้านค้าออนไลน์ผ่าน e-Marketplace มีวิธีการใกล้เคียงกับการสร้างเว็บไซต์ส�ำเร็จรูป กล่าวคือหลักๆเป็นการป้อนข้อมูลร้านค้าข้อมูลและ รูปภาพสินค้า ข้อมูลการติดต่อ รวมทั้งการเลือก รูปแบบเทมเพลตให้กับเว็บไซต์ ตัวอย่างการสร้างร้านค้าออนไลน์ ผ่าน www.alibaba.com 3) การจัดการหลังร้าน : โดยทั่วไปแล้วเว็บไซต์ e-Marketplace จะมีความเป็นอิสระในการ จัดการได้น้อยกว่าเว็บส�ำเร็จรูป เนื่องจากมุ่งเน้นเรื่องการประชาสัมพันธ์ ธุรกิจของผู้ขายไปยังผู้ซื้อเป็นหลักมากกว่าเรื่องความสามารถของเว็บไซต์ ดังนั้น ในเรื่องการจัดการระบบหลังร้านต่างๆ อาจจะท�ำไม่ได้ในบาง e-Marketplace อย่างไรก็ตาม สิ่งที่ควรค�ำนึงถึงก็คือ ข้อมูลบางอย่าง ที่กรอกลงไปในระบบจะมีผลต่อการถูกค้นพบบนเว็บไซต์นั้นๆ ด้วย ก�ำหนด “Keyword”
  • 80. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 79 ตัวอย่างการสร้างแค็ตตาล็อกสินค้า ผ่าน www.alibaba.com จะเห็นว่าการมีเว็บไซต์ผ่านเว็บส�ำเร็จรูปและe-Marketplace ดูผิวเผินแล้วอาจมีขั้นตอนที่ใกล้เคียงกัน แต่เมื่อพิจารณา ในรายละเอียดแล้ว จะมีความแตกต่างกันตั้งแต่วัตถุประสงค์ ในการจัดท�ำเพราะเว็บส�ำเร็จรูปจะมีจุดเด่นเรื่องความสามารถของ เว็บไซต์ในขณะที่e-Marketplaceจะมุ่งเน้นการประชาสัมพันธ์ ธุรกิจของผู้ขายไปยังผู้ซื้อมากกว่า ดังนั้น การพิจารณาว่า จะเลือกสร้างเว็บไซต์โดยใช้เว็บส�ำเร็จรูปหรือe-Marketplaceนั้น จึงขึ้นอยู่กับวัตถุประสงค์ของเจ้าของเว็บเป็นส�ำคัญอย่างไรก็ตาม ก็ไม่ได้มีข้อจ�ำกัดว่าหากท�ำเว็บส�ำเร็จรูปแล้วจะมีเว็บผ่าน e-Marketplace ไม่ได้ ดังนั้น เราจึงสามารถที่จะมีเว็บไซต์ โดยใช้เครื่องมือทั้งสองแบบนี้ร่วมกันได้ซึ่งย่อมจะส่งผลดีต่อธุรกิจ ได้มากขึ้นนั่นเอง เช่นการก�ำหนดกลุ่มสินค้า(Category)การตั้งชื่อสินค้า (Product Name) การก�ำหนดค�ำค้นหา (Keyword) การก�ำหนดสถานะของสินค้า นอกจากนี้ ในบางเว็บ ยังก�ำหนดเงื่อนไขเกี่ยวกับความสมบูรณ์ของข้อมูล หากใครมีข้อมูลที่สมบูรณ์กว่า ก็จะมีโอกาสติดล�ำดับ การค้นหามากกว่าเว็บที่มีข้อมูลไม่ครบถ้วน เช่น รูปภาพสินค้า เบอร์โทรศัพท์ ข้อมูลบริษัท ดังนั้น การสร้างร้านค้าออนไลน์ผ่าน e-Marketplace จึง ควรศึกษาหลักการค้นหาข้อมูลจาก e-Marketplace นั้นๆ เท่าที่จะท�ำได้ เพื่อเพิ่มโอกาสทางธุรกิจให้มาก ยิ่งขึ้นนั่นเองเช่นภาพด้านล่างเป็นการสร้างแค็ตตาล็อก สินค้าผ่านเว็บไซต์ alibaba.com ซึ่งต้องมีการใส่ รูปภาพสินค้าก�ำหนดชื่อสินค้าค�ำค้นหาและหมวดหมู่ สินค้า เป็นต้น โดยข้อมูลเหล่านี้จะส่งผลต่อผลลัพธ์ การค้นหาภายในเว็บไซต์ alibaba.com
  • 81. WebsiteD.I.Y. 80 การสร้างเว็บไซต์ด้วยเว็บไซต์ส�ำเร็จรูปและe-Marketplaceนั้นเป็นการสร้าง เว็บไซต์ที่ง่ายมาก เนื่องจากเราไม่ต้องใช้ความรู้ด้านการเขียนโปรแกรมคอมพิวเตอร์ ใดๆ เลย อีกทั้งขั้นตอนเกี่ยวกับการจัดการเครื่องแม่ข่ายก็ถูกดูแลโดยเว็บไซต์ ผู้ให้บริการอยู่แล้ว แต่บริการทั้งสองประเภทนี้ก็มีข้อจ�ำกัดที่ส�ำคัญคือ ไม่สามารถ ปรับรูปแบบของเว็บไซต์ได้ตามที่ต้องการทั้งหมดดังนั้นจึงมีรูปแบบการสร้างเว็บไซต์ขึ้น อีกลักษณะหนึ่งคือการใช้โปรแกรมส�ำเร็จรูป หรือที่เรียกว่า CMS ซึ่งเป็นโปรแกรม ที่จัดท�ำเว็บไซต์ให้โดยอัตโนมัติ แต่กรณีนี้มีความจ�ำเป็นต้องจัดการเครื่องแม่ข่าย ด้วยตนเอง รวมถึงการดูแลเว็บไซต์และระบบเครื่องแม่ข่ายด้วยตนเอง 3.3 CMS...โปรแกรมแต่งเว็บ ตามจินตนาการ
  • 82. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 81 CMSย่อมาจากContentManagementSystemเป็นเหมือน โปรแกรมแบบหนึ่งที่มีผู้พัฒนามาจากภาษาคอมพิวเตอร์ที่ใช้ในเว็บไซต์ เช่นPHP,Python,ASP,JSPเป็นระบบที่น�ำมาช่วยในการสร้างและบริหาร เว็บไซต์แบบส�ำเร็จรูป โดยในการใช้งาน CMS นั้น ผู้ใช้งานแทบไม่ต้องมี ความรู้ในด้านการเขียนโปรแกรมก็สามารถสร้างเว็บไซต์ได้ตัวของCMSเอง จะมีโปรแกรมแถมมาและสามารถแทรกเองได้มากมายเช่น Webboard ระบบจัดการป้ายโฆษณา ระบบนับจ�ำนวนผู้ชม แม้แต่กระทั่งตะกร้า สินค้า และอื่นๆ อีกมากมาย จึงสามารถน�ำมาประยุกต์ใช้กับการสร้าง เว็บไซต์อีคอมเมิร์ซได้ ในปัจจุบันมี CMS ที่พัฒนามาให้ใช้งานฟรีมากมาย ท�ำให้เราสามารถเริ่มต้นการท�ำเว็บไซต์อีคอมเมิร์ซเพื่อขายสินค้าออนไลน์ ได้ง่ายเช่นกัน โดยเราสามารถใช้ CMS เพื่อสร้างเว็บไซต์ได้หลายประเภท เช่น เว็บไซต์ส่วนตัว (Personal Web Sites) เว็บไซต์ที่ใช้ในองค์กร (Intranet Web Sites) เว็บไซต์เชิงพาณิชย์ (Commercial Web Sites) เว็บท่า (Portals) เว็บไซต์ที่ไม่แสวงหาก�ำไร (Non-Profit Web Sites) เว็บไซต์ที่สร้างจาก Flash (Integrated Flash Sites) ตัวอย่างผู้ให้บริการโปรแกรม CMS
  • 83. WebsiteD.I.Y. 82 จุดเด่นของการพัฒนาเว็บไซต์ผ่านโปรแกรม CMS มีหลายประการ คือ เราไม่จ�ำเป็นต้องมีความรู้เรื่องการท�ำเว็บไซต์มากมาย เพียงแค่เคยพิมพ์ หรือโพสต์ข้อความทางอินเทอร์เน็ตก็สามารถมีเว็บไซต์เป็นของตัวเองได้โดยใช้เวลา ไม่มากค่าใช้จ่ายไม่สูงอีกทั้งยังสามารถจัดหาระบบPlug-inมาใส่เพิ่มได้มากมาย อย่างเช่น ระบบแกลลอรี่ ตะกร้าสินค้า เป็นต้น อย่างไรก็ตาม โปรแกรม CMS ก็ยังมีข้อจ�ำกัดอยู่บ้าง เช่น ผู้ใช้จะต้องศึกษาระบบ CMS ที่ผู้พัฒนาสร้างขึ้นมา เช่น จะต้อง ใส่ข้อความลงตรงไหน จะต้องแทรกภาพอย่างไร อย่างไรก็ตาม ความล�ำบากนี้จะเป็นเพียงแค่ช่วงแรกเท่านั้น ในกรณีที่ผู้ใช้ต้องการออกแบบหน้าตาของเว็บหรือ Theme เอง จะต้องใช้ความรู้มากกว่าปกติ เนื่องจาก CMS มีหลายๆ ระบบ มารวมกันท�ำให้เกิดความยุ่งยากส�ำหรับผู้ที่ไม่มีความรู้ ความยุ่งยากในการติดตั้งและก�ำหนดค่าของเครื่องแม่ข่าย อย่างไรก็ตามปัจจุบันมีผู้ให้บริการเครื่องแม่ข่ายมากมายที่ติดตั้งระบบ CMS ให้โดยไม่เสียค่าใช้จ่ายหากเราเลือกใช้บริการเครื่องแม่ข่าย ของผู้ให้บริการนั้นๆ เมื่อพิจารณาจุดเด่นและข้อจ�ำกัดของ CMS แล้วจะพบว่าโปรแกรม ลักษณะนี้เป็นระบบที่น่าใช้งานและสามารถน�ำมาประยุกต์ใช้กับการสร้างเว็บไซต์ ขายสินค้าออนไลน์ได้เป็นอย่างดีโดยเราสามารถแบ่ง CMS ออกเป็น 2 ส่วน หลักๆ ได้แก่ 1)Frontendคือส่วนที่แสดงผล ให้กับผู้เข้าชมเว็บไซต์เห็นกล่าวง่ายๆ ก็คือหน้าเว็บไซต์นั่นเอง 2)Backendคือส่วนการจัดการ เนื้อหารวมถึงโครงสร้างของ เว็บไซต์ หรือเรียกอีกชื่อหนึ่งว่า ส่วน Admin นั่นเองตัวอย่างหน้าจอ Back end ของ Joomla
  • 84. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 83 อย่างไรก็ตาม การใช้งาน CMS เพียงอย่างเดียวอาจไม่เพียงพอส�ำหรับ เว็บไซต์แบบอีคอมเมิร์ซดังนั้นจึงมีผู้พัฒนาโปรแกรมส่วนเสริมหรือที่มักเรียกกัน ว่าPlug-inเพื่อการซื้อขายออนไลน์ได้เช่นโปรแกรมVirtrueMartโดยส่วนเสริม ดังกล่าวจะมีระบบตะกร้าสินค้า รวมทั้งระบบอื่นๆ ทั้งหน้าร้านและหลังร้าน เพื่อสร้างให้เว็บนั้นๆ มีความพร้อมส�ำหรับการซื้อขายออนไลน์ เช่น ระบบจัดการจ�ำนวนสินค้าและหมวดหมู่สินค้าได้ไม่จ�ำกัด ใส่รูปภาพ หรือไฟล์ให้กับสินค้าได้ ใส่รายละเอียดให้กับสินค้าได้ ระบุราคาให้กับตัวสินค้าได้ การจัดการระบบลูกค้า การจัดการระบบสต็อกสินค้า ระบบเตือนลูกค้าของเราเมื่อมีสินค้าอยู่ในสต็อกแล้ว สามารถน�ำเข้า หรือเอาออกเอกสารข้อมูลสินค้าในรูปแบบ CSV จึง สามารถน�ำไปเปิดในโปรแกรมประเภท Spreadsheet เช่น Microsoft Excel ได้ ระบบสถิติร้านค้าเพื่อน�ำไปใช้ในการวางแผนการตลาด
  • 85. WebsiteD.I.Y. 84 การพัฒนาเว็บไซต์ในสไตล์ D.I.Y. ไม่ว่าจะเป็นการสร้าง ร้านค้าออนไลน์ผ่านเว็บไซต์ส�ำเร็จรูป ผ่าน e-Marketplace หรือ CMS ก็ตาม เป็นเรื่องง่ายๆ ที่ทุกคนสามารถท�ำได้โดยไม่ต้องพึ่งพา โปรแกรมเมอร์ไม่ต้องเตรียมSoftwareหรือHardwardให้ยุ่งยาก มากมายแต่สิ่งส�ำคัญคือต้องก�ำหนดวัตถุประสงค์ในการท�ำที่ชัดเจน บวกกับความมุ่งมั่นตั้งใจและเริ่มลงมือท�ำทันที เพียงเท่านี้ก็เชื่อว่า เว็บสวยและดีจะอยู่ในมือเราอย่างแน่นอน สรุปจุดเด่นของ การพัฒนาเว็บไซต์ แบบ D.I.Y. จะเห็นได้ว่าการใช้โปรแกรมCMSเพื่อสร้างเว็บนั้นจะมีขั้นตอน ที่ยุ่งยากกว่าเว็บไซต์ส�ำเร็จรูป และ e-Marketplace แต่ก็มีความ สามารถที่มากกว่าในด้านการติดตั้งและปรับแต่งสิ่งต่างๆบนเว็บไซต์ ได้ยืดหยุ่น อย่างไรก็ตาม แม้ว่าเว็บไซต์แบบ CMS จะมีขั้นตอน ที่ยุ่งยากแต่ก็ไม่ได้ยากเกินไปส�ำหรับผู้พัฒนาเว็บไซต์มือใหม่ อีกทั้ง ผู้พัฒนาในประเทศไทยยังมีการปรับแต่ง CMS และส่วนเสริมต่างๆ ให้รองรับภาษาไทยท�ำให้การใช้งานไม่ได้ยากอย่างที่คิด
  • 86. บทที่3นักพัฒนาเว็บมือใหม่...สไตล์D.I.Y. 85 1. ไม่ต้องมีความรู้ด้านการเขียนโปรแกรม 2. ไม่ต้องจัดการด้านเครือข่ายคอมพิวเตอร์ 3. มีระบบจัดการหลังร้าน 4. ติดตั้งโปรแกรมเสริม (Plug in) ได้ 5. ช่วยประชาสัมพันธ์ธุรกิจ 6. มีมาตรฐานและผู้ใช้งานทั่วโลก 7. สามารถพัฒนาตามความต้องการได้อิสระ ความสามารถ เว็บส�ำเร็จรูป e-Marketplace CMS
  • 89. WebsiteD.I.Y. 88 พัฒนาการของอินเทอร์เน็ตนั้นไม่มีวันหยุด จริงๆ จากยุคแรกหรือที่เรียกกันว่า เว็บ 1.0 จะมุ่งเน้นการสื่อสาร ทางเดียวคือ เจ้าของเว็บเป็น ผู้น�ำเสนอข้อมูลต่างๆโดยผู้ชม แทบไม่มีส่วนร่วมบนเว็บไซต์ เหล่านั้นเลย กระทั่งก้าว เข้าสู่ยุคเว็บ 2.0 ที่ผู้ใช้ สามารถสร้างเนื้อหาได้เอง พร้อมความสามารถใน การแบ่งปันเนื้อหาออกสู่สังคม ในวงกว้าง เช่น การเขียนบล็อก (Blog) การแชร์รูปภาพและไฟล์ มัลติมีเดียต่างๆ โซเชียลเน็ตเวิร์ก รวมทั้งเว็บอย่างเช่น Wikipedia คลังความรู้ ขนาดใหญ่ที่ถูกพัฒนาและต่อยอดออกไปอย่าง ไม่มีที่สิ้นสุด ในยุคนี้เรียกว่าเป็นยุคแห่งข้อมูล ที่มีปริมาณมหาศาลที่เกิดจากการสร้างและ แบ่งปันกันอยู่ตลอดเวลา ด้วยเหตุนี้ จึงเกิดเป็น วิวัฒนาการไปสู่เว็บ 3.0 ที่มีความสามารถ ในการจัดการกับข้อมูลขนาดใหญ่เหล่านั้น อีกทั้งยังมีจุดเด่นที่สามารถวิเคราะห์ความ ต้องการของผู้ใช้ให้เข้ามามีบทบาทต่อเว็บมากยิ่งขึ้น พูดง่ายๆ ก็คือ เว็บยุค 3.0 จะมีความชาญฉลาด เหนือความคาดหมายของผู้ใช้นั่นเอง
  • 90. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 89 คงไม่มีใครปฏิเสธว่าการแข่งขันทางด้านการตลาดของธุรกิจ หลายๆ ประเภทนั้น เริ่มต้นจากการสร้างแบรนด์ หรือการท�ำให้ชื่อ ผลิตภัณฑ์ของตนเป็นที่รู้จักไปสู่กลุ่มลูกค้าเป้าหมายในธุรกิจอีคอมเมิร์ซ ก็เช่นเดียวกัน จุดเริ่มต้นส�ำคัญที่สุดคือการตั้งชื่อเว็บไซต์ หรือที่เรียกกัน ว่า“โดเมนเนม(DomainName)”เพราะเป็นการสร้างลักษณะเฉพาะ ของเว็บไซต์ (Brand Identity) อีกรูปแบบหนึ่ง 4.1 โดเมนเนม... ตั้งดีเว็บก็ดัง การพัฒนาเว็บไซต์ในยุค 3.0 จึงมีความยากกว่ายุคก่อนๆ แต่นั่นก็ไม่ใช่ อุปสรรคขวางกั้น เพราะเว็บไซต์ก็ยังถือเป็นสื่อที่ทรงพลังที่สุด และลูกค้าก็มักจะ นึกถึงเป็นล�ำดับแรกเมื่อต้องการท�ำความรู้จักกับธุรกิจของเรา ดังนั้น เนื้อหาในบทนี้ จะได้กล่าวถึงข้อควรปฏิบัติเพื่อเสริมสร้างความน่าเชื่อถือให้ลูกค้ากล้าคลิกสั่งซื้อสินค้า บนเว็บไซต์ อีกทั้งยังได้แนะน�ำถึงเรื่องหลักการตั้งชื่อเว็บไซต์ และวิธีเล็กๆ น้อยๆ ที่ จะท�ำให้เว็บของเราถูกค้นพบผ่านเว็บค้นหา หรือ Search Engine ต่างๆ อย่างเช่น Google อีกด้วย
  • 91. WebsiteD.I.Y. 90 “โดเมนเนม” ถือเป็นประตูที่จะดึงให้ผู้สนใจสามารถเข้าไปยัง เว็บไซต์ดังนั้นจึงถือเป็นสิ่งส�ำคัญประการแรกที่จะต้องคิดให้ดีเพราะชื่อดี ก็มีส่วนสร้างเว็บไซต์ให้ประสบความส�ำเร็จ โดยหลักการตั้งชื่อ มีด้วยกัน หลายวิธีไม่ตายตัว ขึ้นอยู่กับชื่อนั้นๆ เข้ากับลักษณะของเว็บ และตรงใจ กับกลุ่มเป้าหมายมากน้อยเพียงใดทั้งนี้ก่อนที่จะตั้งชื่อเว็บก็ควรทบทวน ความเข้าใจว่าเว็บของเรานั้นเป็นเว็บแบบไหน ให้บริการอะไร ที่ส�ำคัญ จุดเด่นและข้อแตกต่างกับเว็บอื่นๆคืออะไรนั่นคือการค้นหาจุดขายให้ได้ ก่อน จากนั้นก็ควรเข้าใจกลุ่มเป้าหมายของเว็บด้วย ว่าพวกเขาเป็นใคร ต้องการอะไรและจะได้อะไรจากเว็บของเราเพื่อจะได้ตั้งชื่อเว็บให้สื่อถึง บริการ และตรงใจกลุ่มเป้าหมายให้มากที่สุด 1. ต้องสร้างแบรนด์ : หากมีชื่อบริษัท ชื่อสินค้า/บริการ ก็สามารถตั้งเป็นชื่อเว็บไซต์เพื่อสร้างแบรนด์ได้ อีกช่องทางหนึ่ง เช่น บริษัทชื่อ ABC ก็ตั้งชื่อเว็บว่า www.ABC.com อย่างไรก็ตาม เป็นที่ทราบกันว่าโดเมนเนมในโลกนี้ต้องไม่ซ�้ำกัน ดังนั้น ถ้าหากABC.comมีผู้แย่งจดทะเบียนไปแล้วอาจเลี่ยงไปใช้นามสกุลอื่น ที่สอดคล้องกับธุรกิจแทน เช่น .co.th, .net เป็นต้น นอกจากนี้ ชื่อแคมเปญการตลาดก็สามารถน�ำมาตั้งเป็นชื่อเว็บไซต์ได้เช่นกัน เรา มักจะพบเสมอว่าแบรนด์สินค้าชั้นน�ำต่างๆนิยมสร้างเว็บเฉพาะแคมเปญ นั้นๆเช่นChevronเปิดตัวเว็บไซต์ใหม่ว่าwww.WillYouJoinUs.com เพื่อแนะน�ำเรื่องการใช้พลังงาน เป็นต้น
  • 92. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 91 2. ต้องสั้น : การตั้งโดเมนเนมสามารถก�ำหนดตัวอักษรได้ตั้งแต่ 3-63 โดยใช้ a-z, 0-9, ขีดกลาง (-) และ “.” เท่านั้น เราจะพบว่า เว็บไซต์ดังๆ ของเมืองไทยยุคแรกๆ นิยมใช้ชื่อภาษาไทย มาสะกดทับศัพท์เป็นภาษาอังกฤษ เช่น sanook.com, tarad.com, sabuy.com เพราะคนจะจดจ�ำได้ง่ายแถมยัง บ่งบอกถึงความเป็นไทยอีกด้วย 3. ต้องจ�ำง่าย : การตั้งโดเมนเนมต้องจ�ำง่าย พูดง่าย และสะกดง่าย เพราะบางครั้งการเข้าเว็บไซต์ก็มาจากการบอกต่อ หรือ การได้ฟังจากวิทยุหรือเห็นตามโฆษณาในสื่อต่างๆ ดังนั้น หากชื่อเว็บจดจ�ำได้ง่ายพูดและสะกดง่ายก็จะช่วยเพิ่มโอกาส ให้ลูกค้าเข้ามาที่เว็บไซต์ได้ถูกต้อง เช่น หากเราเปรียบเทียบ ชื่อเว็บไซต์ www.tohome.com กับ www.lazada.co.th จะเห็นว่า tohome มีชื่อที่สั้น กระชับ จ�ำง่าย สะกดง่าย และ สื่อความหมายธุรกิจได้ดีกว่า lazada เป็นต้น 4. ต้องตรงตัว : ชื่อเว็บไซต์ควรสื่อถึงสินค้า/บริการของธุรกิจ เพราะแม้ กฎข้อหนึ่งของการตั้งชื่อเว็บไซต์คือต้องสั้น แต่หากสามารถ ตั้งชื่อได้สื่อความหมายถึงธุรกิจได้อย่างชัดเจนแม้จะเป็นชื่อยาว ก็ยังสามารถจ�ำได้ง่ายเช่นกันเช่นwww.thaisecondhand.com เป็นต้น 5. ต้องหลีกเลี่ยงการใช้–(ขีดกลางหรือHyphen) แม้เป็นอักขระที่อนุญาตให้ใช้ในการตั้งชื่อเว็บไซต์ได้ แต่หากเลี่ยงได้ก็ควรเลี่ยง เพราะมันยากต่อการบอกต่อ ซึ่งนั่นหมายถึง เราอาจสูญเสียลูกค้าในอนาคตได้เลยทีเดียว
  • 93. WebsiteD.I.Y. 92 ส�ำหรับการตั้งชื่อโดเมนนั้นอีกเรื่อง หนึ่งที่จ�ำเป็นต้องเข้าใจคือข้อความหลัง เครื่องหมาย “.” เช่น .com หรือ .co.th โดยความหมายมีดังนี้ อย่างไรก็ตาม มีข้อสังเกตว่าเมื่อจดชื่อโดเมนเรามักนึกถึง .com หรือดอทอื่น เช่น .org, .net เป็นต้น เอาเข้าจริงๆ การจดดอทเหล่านั้น อาจไม่มีการตรวจสอบตัวตนที่แท้จริงของเว็บหรือเจ้าของเว็บ แต่หากจด อะไรก็ตามที่ลงท้ายด้วย.thก็อาจมีการดูแลเกี่ยวกับการยืนยันตัวตนของ เว็บนั้นถึง 3 ขั้นด้วยกัน ขั้นแรกคือ THNIC ที่รับจดทะเบียน .th และหาก เราไปแจ้งกระทรวงพาณิชย์เพื่อให้เครื่องหมายรับรองความมีตัวตน หรือ Verified ก็เป็นอีกขั้นหนึ่ง ยิ่งไปกว่านั้น หาก สพธอ. หรือ ETDA ออกตัว Trust Mark ที่ดูแลความมีตัวตนของเว็บออกมาอีก ก็จะท�ำให้การยืนยัน ตัวตนของเว็บนั้นสามารถตรวจสอบได้แบบ Real Time เลยทีเดียว เลือกใช้ }ดอท~ อะไรดีหนอ? นามสกุล ย่อมาจาก วัตถุประสงค์ .com Commercial การค้า บริษัท องค์กร .net Network เครือข่าย .org Organization องค์กรไม่หวังผลก�ำไร .biz Business องค์กร บริษัท ห้างหุ้นส่วน คล้ายกับ .com .info Information ข้อมูลสารสนเทศ .us united states ประเทศสหรัฐอเมริกา ซึ่งจะต้องมีภูมิล�ำเนาอยู่ที่ประเทศนี้ด้วย .co.th commercial in Thailand บริษัท หรือองค์กร ที่ประกอบธุรกิจในประเทศไทย .ac.th academic in Thailand โรงเรียน มหาวิทยาลัย ที่ตั้งอยู่ในประเทศไทย .or.th organization in Thailand องค์กรไม่หวังผลก�ำไร ที่ตั้งอยู่ในประเทศไทย .in.th individual in Thailand บุคคลทั่วไป ที่อาศัยอยู่ในประเทศไทย .net.th network in Thailand หน่วยงาน/องค์กรท�ำธุรกิจด้านเครือข่าย ที่ตั้งอยู่ในประเทศไทย
  • 94. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 93 4.2 บันไดหกขั้น ปั้นเว็บให้น่าซื้อ www.evenuwhitecream.com ร้านค้ายอดเยี่ยมประจ�ำปี 2012 ของ www.lnwshop.com 1. เว็บต้องสวย เว็บไซต์ก็เปรียบเสมือนหน้าร้านค้าทั่วๆ ไป หากมีการประดับตกแต่งร้าน อย่างสวยงาม ย่อมดึงดูดให้มีลูกค้าเข้าร้าน ในบางครั้งจะพบว่าสินค้ายี่ห้อเดียวกัน เมื่อน�ำไปวางอยู่ในร้านค้าต่างกันก็ส่งผลต่อการตั้งราคาด้วย เช่น ในห้างสรรพสินค้า ย่อมตั้งราคาได้สูงกว่าร้านค้าแผงลอยทั่วไป แม้จะเป็นผลิตภัณฑ์เดียวกันก็ตาม ซึ่งการ ปรับแต่งเว็บไซต์ให้สวยและดีนั้น ได้อธิบายโดยละเอียดแล้วในบทที่ 2 ลองน�ำเทคนิค เหล่านั้นไปปฏิบัติกันดูโดยวิธีที่จะช่วยทดสอบว่าเว็บของเราสวยแล้วหรือยังก็อาจลอง ถามจากเพื่อนฝูงหรือผู้เชี่ยวชาญด้านเว็บไซต์ให้ลองวิพากษ์วิจารณ์กันแบบเปิดใจหรือ บันไดหกขั้นปั้นเว็บให้น่าซื้อ วัดผลความส�ำเร็จ ท�ำให้น่าเชื่อถือ ข้อมูลร้านค้าชัดเจน ข้อมูลสินค้าต้องครบ สินค้าต้องเยอะ เว็บต้องสวย อีกวิธีก็คือเข้าร่วมการประกวดเว็บไซต์ ดังเช่น www.lnwshop.com ซึ่งเป็น ผู้ให้บริการเว็บส�ำเร็จรูปที่มีกิจกรรม จัดประกวดเว็บไซต์ยอดเยี่ยมเป็นประจ�ำ ทุกปี หลังจากเราได้ชื่อเว็บไซต์ที่ คิดว่าน่าจะถูกอกถูกใจลูกค้าอันเป็น ที่รักของเราแล้ว ต่อมาก็ควรปรับแต่ เว็บไซต์ให้ดูน่าเชื่อถือซึ่งเป็นสิ่งส�ำคัญ อย่างหนึ่งที่จะท�ำให้ลูกค้าเกิดความ เชื่อมั่น และตัดสินใจซื้อสินค้าบน เว็บไซต์ของเราในที่สุดดังนั้นในหัวข้อนี้ จะกล่าวถึงข้อควรปฏิบัติ 6 ประการ เพื่อท�ำให้เว็บไซต์น่าซื้อ
  • 95. WebsiteD.I.Y. 94 2. สินค้าต้องเยอะไว้ก่อน ลองนึกภาพว่า ถ้าเราเดินไปที่ร้านค้าแบบมีหน้าร้าน และเห็นสินค้าโชว์อยู่เพียง ไม่กี่ชิ้นในขณะที่ร้านข้างๆขายของเหมือนกันแต่จัดวางสินค้าไว้มากมายเราจะเดินเข้า ร้านไหน?เชื่อว่าคนส่วนใหญ่ย่อมต้องการทางเลือกเยอะๆและเดินไปยังร้านที่มีสินค้า มากกว่าแน่นอนเพราะดูน่าซื้อและน่าเชื่อถือมากกว่า เช่นเดียวกับ เว็บอีคอมเมิร์ซ ก็ควรน�ำเสนอสินค้า/บริการบนเว็บไซต์ให้มากที่สุดเท่าที่จะท�ำได้ (ขั้นต�่ำ 20 – 30 รายการ)และพยายามเพิ่มจ�ำนวนสินค้าบนหน้าเว็บทุกครั้งที่มีสินค้าใหม่อย่างไรก็ตาม บางธุรกิจที่มีสินค้าจ�ำนวนน้อยเช่นขายรองเท้าแค่ยี่ห้อเดียวสินค้าก็มีแค่รายการเดียว แล้วจะให้ท�ำอย่างไร? กรณีนี้เราก็ยังสามารถน�ำเสนอรองเท้าบนหน้าเว็บแม้จะเป็น ยี่ห้อเดียว หรือรายการเดียวก็ตามให้มีความน่าสนใจมากขึ้นได้ เช่น การแสดง รองเท้าทุกสี ทุกขนาด หรือในทุกมิติ ไม่ว่าจะเป็นมุมภาพรวม ด้านข้าง ด้านบน ด้านล่าง ซึ่งจะช่วยเพิ่มความน่าสนใจในตัวสินค้าได้ไม่น้อยเลยทีเดียว นอกจากนี้ ประโยชน์อีกด้านของการมีข้อมูลบนเว็บไซต์จ�ำนวนมากก็คือ ธุรกิจของเราก็มีโอกาส ถูกค้นพบบนเว็บค้นหา (Search Engine) ต่างๆ ได้ดียิ่งขึ้นอีกด้วย ตัวอย่างการแสดงสินค้า “หมวดรองเท้า” บนเว็บไซต์ต่างๆ ตัวอย่างการแสดงสินค้า “หมวดของที่ระลึก” บนเว็บไซต์ต่างๆ www.shoes.com www.zalora.com www.postmart.co.th www.loftbangkok.com www.shoethailand.com www.baoji-shop.com www.premium360.com www.gifts.com
  • 96. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 95 3. ข้อมูลสินค้าต้องครบถ้วน เจ้าของเว็บควรระลึกไว้เสมอว่า การขายสินค้าออนไลน์นั้นมีความแตกต่างจาก การขายแบบมีหน้าร้านตรงที่ “การสื่อสารกับลูกค้า” เพราะโอกาสที่ลูกค้าจะสอบถาม ข้อมูลเพิ่มเติมต่างๆ นั้นอาจเป็นไปได้ยาก ดังนั้น แนวทางหนึ่งที่สามารถท�ำได้ก็คือ การให้ข้อมูลสินค้าที่สมบูรณ์ครบถ้วนให้มากที่สุดเท่าที่จะท�ำได้ในระดับที่ลูกค้าสามารถ ตัดสินใจได้ทันทีว่าจะซื้อหรือไม่ซื้อสินค้าบนเว็บไซต์ของเราหรือไม่เพราะหากขาดข้อมูล ประกอบการตัดสินใจ นั่นอาจหมายถึงการสูญเสียโอกาสที่ลูกค้าจะออกจากเว็บไซต์ ของเรา แล้วไปซื้อกับเว็บอื่นที่ให้ข้อมูลครบถ้วนสมบูรณ์มากกว่า ตัวอย่างเช่น www.shoes.com และ www.zalora.com เว็บช้อปปิ้งออนไลน์ตามรูปด้านล่าง ที่พยายามให้ข้อมูลสินค้าอย่างครบถ้วนที่สุด ไม่ว่าจะเป็นชื่อสินค้า ราคา คุณสมบัติ ของสินค้า ระยะเวลาจัดส่ง หรือแม้แต่รูปสินค้าก็แสดงให้เห็นทุกสี ทุกมิติ เพื่อให้ลูกค้า ใช้ประกอบการตัดสินใจสั่งซื้อได้ทันที ตัวอย่างการน�ำเสนอข้อมูลสินค้าบนเว็บไซต์ต่างๆ www.zalora.com www.shoes.com
  • 97. WebsiteD.I.Y. 96 4. ข้อมูลร้านค้าต้องชัดเจน ลูกค้าจะสั่งซื้อสินค้าบนเว็บไซต์ของเราหรือไม่นั้น ข้อมูลส�ำคัญ ประการหนึ่งที่มักใช้ประกอบการตัดสินใจก็คือ“ข้อมูลร้านค้า”เพราะเป็นสิ่ง ที่แสดงถึงตัวตนของเจ้าของร้านได้ระดับหนึ่ง ดังนั้น การจัดเตรียมข้อมูล ร้านค้าให้ชัดเจน ถูกต้องและครบถ้วน จึงเป็นสิ่งที่มีความส�ำคัญและ ต้องปฏิบัติอย่างหลีกเลี่ยงไม่ได้ ตัวอย่างของข้อมูลร้านค้า เช่น ประวัติความเป็นมาของร้านค้า รูปภาพร้านค้า พนักงาน รถขนส่งอุปกรณ์-เครื่องจักร วัน-เวลาท�ำการ วิธีการช�ำระเงิน ช่องทางติดต่อ(โทรศัพท์,มือถือ,แฟกซ์,อีเมล,e-ContactForm, Facebook, LINE ฯลฯ) รูปแผนที่ตั้งทั้งส�ำนักงานใหญ่และสาขา (ถ้าไม่มีแผนที่ลองใช้ Google Map ก็ได้) เครื่องหมายรับรองความน่าเชื่อถือ(ถ้ามี)เช่นISO,DBDRegistered, DBD Verified ท�ำวิดีโอแนะน�ำร้านค้าผ่านโซเชียล เช่น YouTube ตัวอย่างการน�ำเสนอข้อมูลร้านค้า ของ www.officemate.co.th
  • 98. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 97 www.officemate.co.th www.shoes.com วิธีสร้างความเชื่อมั่นของเว็บไซต์ต่างๆ 5. ท�ำให้น่าเชื่อถือ อันที่จริงแล้วจาก 4 ข้อควรปฏิบัติข้างต้น ไม่ว่าจะเป็นการ สร้างเว็บไซต์ให้สวยงาม การแสดงสินค้าจ�ำนวนมาก มี รายละเอียดสินค้าครบถ้วน และข้อมูลร้านค้าที่ชัดเจน หาก สามารถท�ำได้ตามค�ำแนะน�ำก็จะช่วยสร้างความน่าเชื่อถือ ต่อลูกค้าได้มากแล้วแต่ยังมีองค์ประกอบอื่นๆ ที่ช่วยเพิ่มความ น่าเชื่อถือให้กับเว็บไซต์ได้มากขึ้นอีก เช่น ในขั้นตอนที่ลูกค้า ต้องช�ำระเงินออนไลน์ อาจสร้างความเชื่อมั่นด้วยการพัฒนา ความสามารถของเว็บไซต์เพื่อให้ได้การรับรองจากสถาบัน ที่มีความน่าเชื่อถือด้านความมั่นคงปลอดภัยต่างๆ ดังเช่น www.zalora.com วิธีสร้างความเชื่อมั่นของ www.zalora.com รวมทั้งการแสดงขั้นตอนการช�ำระเงินที่ชัดเจนแบบ Step by Step ก็ช่วยสร้าง ความมั่นใจต่อการช�ำระเงินของลูกค้าได้ไม่น้อย ยิ่งหากเจ้าของเว็บสามารถเพิ่ม การช�ำระเงินได้หลากหลายช่องทางโดยเฉพาะอย่างยิ่งการช�ำระเงินเมื่อได้รับสินค้า ก็ยิ่งเพิ่มความไว้วางใจมากขึ้นเช่นwww.officemate.co.thนอกจากนี้ยังสามารถ ใช้วิธีการให้คะแนน(Ratings)และแสดงความคิดเห็น(Reviews)ของลูกค้ารายอื่นๆ ที่มีต่อสินค้าเพราะโดยทั่วไปแล้วลูกค้ามักจะไม่เชื่อสิ่งที่เจ้าของเว็บพูดแต่จะเชื่อถือ ลูกค้าด้วยกันเอง เช่น www.shoes.com ที่เปิดเวทีให้ลูกค้าสามารถให้คะแนน และแสดงความคิดเห็นต่อสินค้าต่างๆ บนเว็บไซต์ได้ และลูกค้าจะยิ่งเชื่อถือมากขึ้น หากมีการแจ้งสถานะการจัดส่งของที่สามารถติดตามได้เองตลอด 24 ชั่วโมง เช่น www.postmart.co.th www.postmart.co.th
  • 99. WebsiteD.I.Y. 98 6. ติดตั้งเครื่องมือวัดผลสถิติบนเว็บไซต์ เราจะทราบได้อย่างไรว่าผู้ชมเว็บไซต์ของเรานั้นเป็นใคร รู้จักเว็บไซต์ของเรา ได้อย่างไรผู้ชมเหล่านั้นใช้เวลาอยู่กับเว็บนานแค่ไหนและในที่สุดแล้วคลิกสั่งซื้อสินค้า บนเว็บไซต์หรือไม่ค�ำถามเหล่านี้ล้วนมีความส�ำคัญต่อการพัฒนาปรับปรุงเว็บไซต์รวมทั้ง การวางแผนการตลาดในกลุ่มลูกค้าเป้าหมายอีกด้วย ดังนั้น การสร้างเว็บไซต์กับการ ติดตั้งเครื่องมือวัดผลทางสถิติ หรือที่นิยมเรียกกันว่า Web Stat ลงบนเว็บไซต์นั้น จึงเป็นสิ่งที่มีความส�ำคัญไม่แพ้กันโดยปัจจุบันก็มีผู้ให้บริการดังกล่าวเป็นจ�ำนวนมาก ทั้งในและต่างประเทศ บางรายก็มีค่าใช้จ่าย เช่น Truehits.net และบางรายก็เป็น บริการฟรี เช่น Google Analytics www.truehits.net www.google.com/analytics ตัวอย่างผู้ให้บริการเก็บสถิติบนเว็บไซต์ www.histats.com
  • 100. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 99 แม้ว่าเราจะพัฒนาเว็บให้สวยและดีเพียงใด หากปราศจากการ ประชาสัมพันธ์เว็บให้เป็นที่รู้จัก นั่นก็เท่ากับการท�ำเว็บที่สูญเปล่าโดยไม่เกิด ประโยชน์ใดๆ ซึ่งวิธีการประชาสัมพันธ์นั้นก็มีอยู่มากมายหลายวิธี บ้างก็ต้อง ใช้งบประมาณ แต่บางวิธีก็สามารถท�ำได้โดยมีต้นทุนไม่มาก เช่น การท�ำ SEO หรือค�ำเต็มๆ คือ Search Engine Optimization เป็นวิธีการหนึ่งในการ พัฒนาเว็บไซต์ให้สามารถค้นพบในเว็บค้นหา (Search Engine) ต่างๆ เช่น Google เป็นต้น 4.3 ล้วงลับปรับเว็บ ให้เป็นมิตรกับเสิร์ชเอนจิน
  • 101. WebsiteD.I.Y. 100 SEO เป็นวิธีการปรับแต่งเว็บไซต์ให้ตรงกับ หลักการค้นหาของเสิร์ชเอนจินซึ่งหากสามารถ ท�ำได้จะท�ำให้ผลลัพธ์การค้นหาถูกจัดอยู่ในอันดับ ต้นๆ โดยวิธีการท�ำ SEO สามารถแบ่งเป็น 2 ส่วน ที่ควรท�ำไปพร้อมกันได้แก่ 1) On Page Factor คือ การปรับแต่งเว็บเพจให้ตรงกับหลักการค้นหาของเสิร์ชเอนจิน เช่น การปรับแต่งเนื้อหาของเว็บเพจให้มีคีย์เวิร์ด (Keyword) จ�ำนวนมากๆ สอดคล้องเป็นเรื่องราวเดียวกัน มีความทันสมัยตลอดเวลา และ การท�ำแผนผังเว็บไซต์ (Site Map) 2) Off Page Factor เป็นเทคนิค การใช้ปัจจัยภายนอกที่ไม่เกี่ยวข้องกับการปรับแต่งเว็บไซต์ของเจ้าของเว็บ เช่นการแลกลิงก์(Link)กับเว็บไซต์ที่มีเนื้อหาใกล้เคียงกันและการสร้างประกาศ ซื้อขายบนเว็บไซต์ต่างๆเป็นต้นอย่างไรก็ตามแม้ว่าการท�ำSEOจะเป็นวิธีทาง การตลาดออนไลน์ที่อาจไม่ต้องใช้เงินลงทุนหรือใช้เงินลงทุนไม่สูงแต่ก็เป็น เทคนิคที่ต้องอาศัยเวลากว่าจะเห็นผลรวมทั้งต้องใช้ประสบการณ์และ ความเชี่ยวชาญของผู้ท�ำด้วย ต�ำแหน่งการแสดงผลลัพธ์ในเว็บค้นหา (Search Engine) จากการท�ำ SEO (รูปภาพจาก www.switchconsultancy.com/what-is-seo-ppc)
  • 102. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 101 แม้ว่าการท�ำ SEO จะเป็นวิธีทางการตลาดออนไลน์ที่อาจไม่ต้องใช้ เงินลงทุนหรือใช้เงินลงทุนไม่สูงแต่ก็เป็นเทคนิคที่ต้องอาศัยเวลากว่าจะเห็น ผลรวมทั้งต้องใช้ประสบการณ์และความเชี่ยวชาญของผู้ท�ำด้วยโดยมีเทคนิค ง่ายๆ ที่สามารถน�ำไปปรับใช้กับเว็บไซต์ได้ทันที ดังนี้ 1)ใส่ค�ำส�ำคัญ(Keyword)บนTitleของหน้าเว็บ เนื่องจากการใส่ค�ำส�ำคัญในต�ำแหน่งTitleหรือชื่อเว็บไซต์ จะช่วยท�ำให้ Search Engine รู้ว่าเว็บไซต์หน้านั้นๆ มีข้อมูลเกี่ยวกับอะไร ซึ่งข้อมูลนี้จะแสดงอยู่ในต�ำแหน่ง ด้านบนสุดของเว็บเบราว์เซอร์ ซึ่งต�ำแหน่งนี้ถือเป็นปัจจัย ที่ส�ำคัญส่วนหนึ่ง 2)ใส่ค�ำส�ำคัญ(Keyword)แบบตัวหนาทราบหรือไม่ ว่าขนาดตัวอักษรก็มีผลต่อการแสดงผลลัพธ์การค้นหาใน Search Engine ด้วย ดังนั้น ส�ำหรับค�ำส�ำคัญที่ต้องการ เน้น ก็ควรก�ำหนดเป็นตัวหนาและปรับให้มีขนาดใหญ่ โดยเฉพาะอย่างยิ่งในส่วนบนของเว็บไซต์ซึ่งจะท�ำให้Search Engine ทราบว่าเป็นค�ำส�ำคัญที่ต้องการเน้นเป็นพิเศษ เทคนิคเบื้องต้น การท�ำ SEO
  • 103. WebsiteD.I.Y. 102 3) ใส่ค�ำส�ำคัญ (Keyword) ให้หนาแน่น ค�ำส�ำคัญ ที่ก�ำหนดในแต่ละหน้าเว็บไซต์ไม่จ�ำเป็นต้องมีเพียงจุดเดียว เราสามารถใส่ค�ำส�ำคัญได้ซ�้ำๆ ได้ แต่ก็ไม่ควรมากเกินไป จนดูไม่เป็นธรรมชาติ (แนะน�ำไม่ควรเกิน 20% ของจ�ำนวน อักษรในหน้าเว็บเพจนั้น) โดยเมื่อ Search Engine พบ ค�ำส�ำคัญซ�้ำๆ บ่อยๆ ก็จะตีความว่าเป็นเว็บที่เกี่ยวข้องกับค�ำ เหล่านั้น และน�ำไปแสดงเป็นผลลัพธ์ในการค้นหา ทั้งนี้ มีเครื่องมือที่สามารถน�ำมาใช้ในการวิเคราะห์ค�ำส�ำคัญ บนเว็บไซต์ได้คือ www.ranks.nl ตัวอย่างเช่น ลองค้นหา ค�ำส�ำคัญของwww.thaibodyguard.comซึ่งเป็นเว็บอีคอมเมิร์ซ ที่จ�ำหน่ายอุปกรณ์ป้องกันตัวส�ำหรับผู้หญิง จะพบว่าค�ำที่พบ 3 ล�ำดับแรกคือ com, thaibodyguard และสเปรย์พริกไทย ตามล�ำดับ โดยเมื่อเห็นข้อมูลดังกล่าวแล้วก็สามารถน�ำไป วิเคราะห์ต่อได้ทันทีว่าจะเน้นใช้ค�ำไหนเป็นค�ำส�ำคัญ ดังเช่น ตัวอย่างนี้ ก็ควรเน้นค�ำว่า สเปรย์พริกไทย อุปกรณ์ป้องกันตัว มากกว่าค�ำว่า com และ thaibodyguard www.ranks.nl เครื่องมือวิเคราะห์ค�ำส�ำคัญบนเว็บไซต์ Word com thaibodyguard สเปรย์พริกไทย อุปกรณ์ป้องกันตัว splitted mailsubscribe www ป้องกันตัว Repeats 6 T,U,D,K 5 T,HST,D,K 4 T,D,K 4 T,D,K 7 6 2 u,D,K 2 A,K Density 3.30% 2.75% 2.20% 2.20% 3.85% 3.30% 1.10% 1.10% Prominence 74.27 84.40 90.11 90.11 23.00 55.22 84.62 78.85 Wizard
  • 104. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 103 4) เลี่ยงการออกแบบเว็บไซต์ด้วยแอนิเมชันหรือ รูปภาพเยอะเกินไป โดยไม่มีตัวหนังสืออธิบายเลย เนื่องจาก Search Engine จะพิจารณาเนื้อหาเฉพาะที่เป็น ข้อความเป็นหลัก ซึ่งหากเว็บไซต์มีแต่ภาพแล้ว Search Engine จะไม่เข้าใจเว็บไซต์ของเรานั่นเอง 5)ควรตั้งชื่อไฟล์รูปภาพและใส่ค�ำอธิบายให้กับภาพ โดยควรตั้งชื่อไฟล์รูปภาพที่ตรงกับKeywordที่ต้องการและควร ใส่ค�ำอธิบายภาพ เพื่อท�ำให้ Search Engine รู้ว่าภาพที่ใส่เข้าไป ในเว็บไซต์คือภาพอะไร และเกี่ยวข้องกับเนื้อหาอะไร 6) แลกลิงก์กับเว็บไซต์อื่นๆ เนื่องจากการแลกลิงก์กับ เว็บไซต์อื่นๆและมีเว็บไซต์อื่นๆลิงก์มาหาเว็บไซต์ของเราเยอะๆนั้น เป็นการแสดงว่าเว็บไซต์ของเราก�ำลังเป็นที่รู้จัก ได้รับความนิยม Search Engine ก็จะให้คะแนนเว็บไซต์ของเรา โดยถ้าเรา มีคะแนนสูงก็จะมีผลต่ออันดับการแสดงผลลัพธ์ในเว็บของ Search Engine นั้นๆ จะเห็นได้ว่าส่วนส�ำคัญของการท�ำ SEO คือการก�ำหนด “ค�ำส�ำคัญ หรือ Keyword” ซึ่งแนวทางหนึ่งที่ท�ำได้คือการใช้เครื่องมือช่วยเหลือ อย่างเช่นGoogleAdwordsซึ่งสามารถเข้าใช้บริการได้ที่www.google.com/ adwords/ โดยเมื่อสมัครสมาชิกและเข้าสู่ระบบแล้ว ระบบจะพาเข้าสู่ หน้าจอหลัก ให้คลิกที่เมนู “Tool and Analysis” และเลือกเมนูย่อย “Keyword Planner” หลังจากนั้นคลิก “Search for keyword and ad group ideas” ดังรูปด้านล่าง การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords ขั้น 1
  • 105. WebsiteD.I.Y. 104 ระบบจะพาเข้าสู่การวิเคราะห์ค�ำส�ำคัญ (Keyword) ดังรูป ต่อไป โดยส่วนที่ต้องกรอกเพื่อท�ำการวิเคราะห์ข้อมูลนั้นมี ดังนี้ (1) สินค้าและบริการของเรา (2) ชื่อเว็บไซต์ของเรา (3) ประเภทของสินค้าและบริการของเรา (4) เป้าหมาย โดยให้เราท�ำการปรับประเทศและภาษาใน 2 ช่องแรกตามเป้าหมายลูกค้าที่ต้องการ (5) ส่วนนี้เป็นส่วนของปรับค่าเกี่ยวกับKeywordที่เราต้องการ ส่วนที่น่าจะปรับคือ“Avg.MonthlySearch”หรือจ�ำนวน ครั้งที่ Keyword นี้ถูกใช้โดยเฉลี่ยต่อเดือน การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords ขั้น 2
  • 106. บทที่4แต่งเว็บขั้นเทพในยุคเว็บ3.0 105 ตัวอย่างเช่น หากเป็นธุรกิจขายเครื่องส�ำอาง (ก�ำหนดในข้อ 1) ก�ำหนดประเภทสินค้า (ข้อ 3) เป็น “Beauty & Personal Care” และ ก�ำหนดเป้าหมาย (ข้อ 4) เป็นประเทศไทยและภาษาไทย จะได้ผลลัพธ์ ดังรูปด้านล่างซึ่งระบบจะแนะน�ำค�ำส�ำคัญ (Keyword) ที่มีประสิทธิภาพ ให้เราสามารถน�ำไปวิเคราะห์และปรับใช้ต่อได้ทันที ผลลัพธ์การวิเคราะห์ค�ำส�ำคัญ (Keyword) ผ่านเว็บ www.google.com/adwords
  • 107. WebsiteD.I.Y. 106 …เมื่ออ่านมาถึงบรรทัดนี้หวังว่าสาระเกี่ยวกับการสร้าง เว็บไซต์ฉบับD.I.Y.เล่มนี้คงจะพอหอมปากหอมคอช่วยเติมเต็ม ความรู้ในอีกแง่มุมหนึ่งให้กับ “เถ้าแก่ไฮเทค” ทุกท่าน แต่เหนือสิ่งอื่นใดคือ “เทคโนโลยีไม่มีวันหยุด” ดังนั้น ขยัน ศึกษาหาความรู้เพิ่มเติมอย่างสม�่ำเสมอจุดประกายไอเดียใหม่ๆ เพื่อสร้างแรงบันดาลใจให้เราในทุกๆ วัน พวกเราทีมงาน ETDA (เอ็ทด้า) ขอให้ท่านประสบความส�ำเร็จในธุรกิจผ่าน โลกออนไลน์กันทุกคนนะจ๊ะ (: การท�ำ SEO นั้นมีอยู่มากมายหลายวิธี ซึ่งที่กล่าวถึง ในหัวข้อนี้ก็เป็นเพียงส่วนเล็กๆ เท่านั้น ที่สามารถน�ำมา ประยุกต์ใช้กับเว็บไซต์ของเราได้ อย่างไรก็ตาม ต้องพึงระลึก ไว้เสมอว่า ทุกอย่างต้องใช้เวลาพอสมควร เพราะเว็บไซต์ ในโลกนี้มีอยู่เป็นจ�ำนวนมากการที่SearchEngineจะเข้ามา จัดเก็บข้อมูลต่างๆ ของเว็บเรานั้น ก็ไม่ใช่ทุกวัน อีกทั้งการท�ำ SEOต้องอาศัยคุณภาพของเนื้อหาบนเว็บไซต์และการหมั่น ปรับปรุงข้อมูลให้ทันสมัยอยู่ตลอดเวลาจึงจะส่งผลดีต่อการ ถูกค้นพบใน Search Engine ดังนั้น ความมุ่งมั่นตั้งใจจริงของ เจ้าของเว็บจึงถือเป็นสิ่งส�ำคัญที่สุดที่นอกจากจะท�ำให้เว็บไซต์ ของเราสวยและดูดีแล้ว ยังมีลูกค้าเข้าร้านอีกด้วย
  • 109. WebsiteD.I.Y. 108 1 ลูกค้าส่วนใหญ่ไม่บ่นว่าเว็บใช้งานยาก 2 มีการจัดหมวดหมู่สินค้า/บริการอย่างชัดเจน 3 มีฟังก์ชัน Search เพื่อให้ง่าย ต่อการค้นหาข้อมูลบนเว็บ 4 ปุ่ม Click ต่างๆ บนเว็บแสดงให้เห็นชัดเจน หาง่าย 5 มีระบบน�ำทางบนเว็บไซต์ (Navigation) 6 มีแผนผังเว็บไซต์ (Site Map) 7 มีพื้นที่ว่าง (White Space) ในระดับที่ท�ำให้เว็บ ดูสบายตา ถูกต้อง พอใช้ ไม่ถูกต้องด้านความเรียบง่าย มาตรวจสุขภาพเว็บไซต์ ของเรากันเถอะ
  • 110. AppendixWEBSITECHECKUP60SECONDS! 109 ถูกต้อง พอใช้ ไม่ถูกต้องด้านความดึงดูดน่าสนใจ 8 ต�ำแหน่งโลโก้แสดงชัดเจน เห็นง่าย พร้อมมี Tagline อธิบายเว็บไซต์สั้นๆ 9 ภาพทุกภาพบนเว็บไซต์มีความคมชัด 10 ใช้ภาพบุคคลประกอบบนหน้าเว็บ 11 ตัวอักษรอ่านง่าย และสีอักษรกับสีพื้นหลัง เป็นสีที่ตัดกัน (Contrast) 12 เนื้อหาส�ำคัญที่สุดแสดงอยู่บริเวณระดับสายตา ของผู้เยี่ยมชม (Eye Contact) 13 เนื้อหาบนเว็บไซต์อ่านง่าย น่าติดตาม ถูกต้อง พอใช้ ไม่ถูกต้องด้านความสามารถในการเข้าถึง 14 ใช้ Screen Resolution ที่เหมาะสมกับผู้เยี่ยมชม (ดูได้ที่ www.truehits.net) 15 ใช้ Web Browser ที่เหมาะสมกับผู้เยี่ยมชม (ดูได้ที่ www.truehits.net) 16 ใช้ Font ตามมาตรฐานเว็บ (ไทย-Tahoma อังกฤษ-Arial, Verdana, Times New Roman) 17 รูปภาพมี Alternative Text 18 ใช้ Pop Up บางโอกาสเท่านั้น 19 โหลดเว็บเพจแต่ละหน้าไม่เกิน 6 วินาที (ทดสอบได้ที่ www.webwait.com)
  • 111. WebsiteD.I.Y. 110 ถูกต้อง พอใช้ ไม่ถูกต้อง ถูกต้อง พอใช้ ไม่ถูกต้อง ด้านความน่าเชื่อถือ 20 มีเมนู “เกี่ยวกับเรา (About Us)” 21 มีแผนที่ร้านค้าชัดเจน 22 มีเมนู “ค�ำถามที่พบบ่อย (FAQs)” 23 ตัวสะกดบนหน้าเว็บไซต์ถูกต้อง และส�ำนวน การเขียนที่น่าเชื่อถือ 24 มีเครื่องหมายรับรองความน่าเชื่อถือในด้านต่างๆ 25 ชี้แจงข้อมูลสินค้าทุกรายการอย่างชัดเจน เช่น ชื่อสินค้า รหัส รูปภาพ คุณลักษณะ 26 ชี้แจงขั้นตอนการสั่งซื้อและการช�ำระเงินอย่าง ชัดเจน 27 ข้อมูลการติดต่อชัดเจน เช่น ที่อยู่ โทรศัพท์ โทรสาร อีเมล โซเชียลมีเดีย 28 มีเมนู “ข้อตกลงและเงื่อนไข/นโยบายความเป็น ส่วนตัว” 29 มีข้อก�ำหนดด้านนโยบายการเปลี่ยน/คืนสินค้า และชี้แจงขั้นตอนปฏิบัติอย่างชัดเจน 30 มีมาตรการรักษาความมั่นคงปลอดภัยบนเว็บไซต์ และน�ำไปใช้จริง ด้านความน่าเชื่อถือ การรักษาความเป็นส่วนตัว และความมั่นคงปลอดภัยบนเว็บไซต์
  • 112. AppendixWEBSITECHECKUP60SECONDS! 111 ต�่ำกว่า 15 คะแนน เว็บไซต์อยู่ในเกณฑ์ “ต�่ำกว่ามาตรฐาน” ควรรีบปรับปรุง เว็บไซต์ในด้านที่ท่านยังด้อยอยู่นะจ๊ะ 15 – 23 คะแนน เว็บไซต์อยู่ในเกณฑ์ “มาตรฐาน” แต่ก็ยังสามารถพัฒนา เว็บไซต์ให้ดียิ่งขึ้นได้อีกนะ ตั้งแต่ 24 คะแนน ว้าว ว้าว ว้าว!!! เว็บไซต์ของท่านอยู่ในเกณฑ์ “ยอดเยี่ยม” แล้วล่ะ อุดช่องโหว่ในเรื่องที่ท่านยังตอบว่า “ไม่ถูกต้อง” รับรองได้เลยเว็บไซต์ท่านจะประทับอยู่ในใจลูกค้าแน่นอน ผลตรวจสุขภาพเว็บ คะแนนของคุณคือ.....................คะแนน
  • 113. บริการของ สพธอ. งานวิชาการ การให้ค�ำปรึกษา è ด้านนโยบายและการวางแผนเกี่ยวกับการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ è ด้านสถิติข้อมูลเชิงลึก ที่เกี่ยวกับการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ของประเทศ è ด้านกฎหมาย ที่เกี่ยวกับการท�ำธุรกรรมทางอิเล็กทรอนิกส์ è ด้านความมั่นคงปลอดภัย และมาตรฐาน ในการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ รวมทั้งการตรวจและพิสูจน์พยานหลักฐาน อิเล็กทรอนิกส์ è ด้านระบบบริการส�ำคัญที่เป็นโครงสร้างพื้นฐานที่จ�ำเป็นเกี่ยวกับ ธุรกรรมทางอิเล็กทรอนิกส์ è งานวิจัยต่างๆ ที่เกี่ยวข้อง สพธอ. เป็นองค์การมหาชนที่มีภารกิจส�ำคัญในการผลักดัน พัฒนา ส่งเสริม และสนับสนุนการท�ำธุรกรรมทางอิเล็กทรอนิกส์ของประเทศ โดยมุ่งสร้าง สภาพแวดล้อมที่ก่อให้เกิดความเชื่อมั่น ความไว้วางใจ และความน่าเชื่อถือ ของทั้งผู้ให้บริการและผู้ใช้บริการในการท�ำธุรกรรมทางออนไลน์ ด้วยความ มุ่งมั่นในการท�ำงานอย่างมีประสิทธิภาพ ควบคู่ไปกับการสร้างเครือข่าย ความร่วมมือในการท�ำงานจากทุกภาคส่วนทั้งภายในประเทศและ ต่างประเทศ สามารถเป็นที่พึ่งด้านการท�ำธุรกรรมทางอิเล็กทรอนิกส์ ให้กับทุกภาคส่วนได้ ประกอบกับเป็นองค์กรที่มีความคล่องตัวสูง ด้วยทีม ผู้บริหารที่เป็นคนรุ่นใหม่ “Secure e – transactions : Opportunities for Thailand” การยกระดับขีดความสามารถบุคลากร สพธอ. ให้บริการการฝึกอบรมเพื่อยกระดับทักษะและความ เชี่ยวชาญเฉพาะด้านให้กับบุคลากรในประเทศเกี่ยวกับ มาตรฐานและความมั่นคงปลอดภัยในการท�ำธุรกรรมทาง อิเล็กทรอนิกส์ ทั้งทางด้านเทคนิคและหลักสูตรประยุกต์ ส�ำหรับผู้ประกอบการ e-Commerce และผู้ที่สนใจ เกี่ยวกับ ETDA ETDA ท�ำหน้าที่อะไรครับ? ETDA ส�ำนักงานพัฒนาธุรกรรม ทางอิเล็กทรอนิกส์ (องค์การมหาชน) เป็นองค์กรส�ำคัญในการสนับสนุน SMART THAILAND โดยส่งเสริม ให้การท�ำธุรกรรมทางอิเล็กทรอนิกส์เติบโต อย่างมั่นคงปลอดภัยทัดเทียมผู้น�ำในภูมิภาค SECURE e – TRANSACTIONS ธุรกรรมออนไลน์ ยกระดับคุณภาพชีวิต จัดท�ำนโยบาย ส่งเสริมและพัฒนา ธุรกรรมทางอิเล็กทรอนิกส์ และมาตรฐาน ด้านไอซีที ส�ำนักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 สพธอ. www.etda.or.th ภารกิจ สพธอ.พัฒนาและ สร้างโครงสร้าง พื้นฐานส�ำคัญ รองรับการท�ำ ธุรกรรม ทางออนไลน์ ของประเทศ สนับสนุน การด�ำเนินงาน ของคณะกรรมการ ธุรกรรมทาง อิเล็กทรอนิกส์ สร้างกลไกที่ เพิ่มศักยภาพ และขีดความสามารถ ในการแข่งขันของประเทศ สร้าง ความเชื่อมั่น ในการท�ำธุรกรรม ทางอิเล็กทรอนิกส์
  • 114. สร้างสรรค์โดย สำ�นักงานพัฒนาธุรกรรมทางอิเล็กทรอนิกส์ (องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร อาคารเดอะไนท์ ทาวเวอร์ เลขที่ 33/4 ตึก B ชั้น 21 ถนนพระรามเก้า แขวงห้วยขวาง เขตห้วยขวาง กรุงเทพฯ 10310 โทรศัพท์ 0-2123-1234 โทรสาร 0-2123-1200 สพธอ. www.etda.or.th กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร www.mict.go.th “เว็บไซต์” กลายเป็นช่องทางหลัก ในการเข้าถึงลูกค้าในยุคดิจิทัล เพราะสามารถ น�ำเสนอข้อมูลออกไปได้ในวงกว้างอย่างรวดเร็ว ง่ายดาย ด้วยต้นทุนที่ต�่ำที่สุด แต่ก็มีจ�ำนวน ไม่น้อยที่ขาดความเข้าใจเรื่องพฤติกรรมการ เยี่ยมชมเว็บไซต์ของลูกค้ายุคใหม่ สุดท้ายลูกค้า ก็ไม่ประทับใจและจากเราไปในที่สุด “แล้วต้อง ท�ำอย่างไรให้การพัฒนาเว็บไซต์ด้วยตัวเอง ง่ายๆ และประสบความส�ำเร็จได้”...หนังสือ เล่มนี้คือค�ำตอบ อยากมีเว็บไซต์ต้องเริ่มต้นอย่างไร? กลเม็ดปั้นเว็บให้สวยและโดนใจลูกค้า เผยเทคนิคท�ำเว็บส�ำหรับมือใหม่...สไตล์ D.I.Y. แนะน�ำวิธีปรับแต่งเว็บขั้นเทพในยุคเว็บ 3.0 เราปั้นหนังสือเล่มนี้เพื่อคุณ : เถ้าแก่ยุคไอที นักช้อปออนไลน์ ครอบครัวไซเบอร์