โดย อ.ดร.รศัมีทิพย ์วิตา
ภาควิชาวิทยาการคอมพิวเตอร ์คณะวิทยาศาสตร์มหาวิทยาลยัเชียงใหม่
Web Authoring
ส่วนประกอบของเวบ็ไซต์
Homepage
Web page
Web page
Web page
Web page Web page
Web page
2
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Site Map
(2) Website
(4)
(3)
(5)
Domain Name:www.example.com
(1)
ส่วนประกอบของเวบ็ไซต์ (ต่อ)
(1) Domain Name คือ รหสัท่ีใช้ในการติดต่อส่ือสารเพ่ือการเช่ือมโยงเข้าหาเวบ็ไซตบ์นอินเตอรเ์น็ต ส าหรบัใช้เป็นเวบ็เพจหน้าแรกเพ่ือเข้าสู่เวบ็ไซตใ์ด ๆ
(2) Website คือ คือแหล่งท่ีอยู่ของเวบ็เพจท่ีถกูจดัเกบ็ไว้ในท่ีอยู่เดียวกนับนเคร่ืองแม่ข่าย (Server) เวบ็ไซตห์น่ึงจะมีเวบ็เพจก่ีหน้ากไ็ด้ท่ีเช่ือมโยงกนั หรือเวบ็ไซตห์น่ึงจะเช่ือมโยงไปยงัอีกเวบ็ไซตห์น่ึงกไ็ด้ 3
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ส่วนประกอบของเวบ็ไซต ์(ต่อ)
(3) Homepage คือเวบ็เพจหน้าแรกของเวบ็ไซตใ์ดๆ ท่ีจะแสดงเมื่อระบช่ืุอเวบ็ไซตนั์น้
(4) Web page คือไฟลเ์อกสารท่ีถกูสร้างขึน้เพ่ือน าเสนอข้อมลูข่าวสารของบริการ www โดยภายในเอกสารจะประกอบไปด้วยรายละเอียด ข้อมลูต่างๆ เช่น รปูภาพ ตาราง ข้อความ เสียง หรือวีดีโอ เป็นต้น
(5) Site Map คือ แผนผงัแสดงรายละเอียดความเช่ือมโยงของเวบ็เพจทัง้หมดท่ีอยู่ในเวบ็ไซตเ์ดียวกนั 4
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Web Development (recap)
• ในการพฒันาเวบ็เพจ เวบ็เพจท่ีสร้างจะมี 2 ประเภท• Static Web Page คือ เวบ็เพจท่ีสรา้งขึน้มาจากภาษา
HTML เพียงอย่างเดียวจะมีลกัษณะเป็นเวบ็เพจอย่างง่าย
• Dynamic Web Page คือ เวบ็เพจท่ีมีลกูเล่นต่าง ๆ มีการโต้ตอบกบัผูใ้ช้ มีการประมวลผลต่าง ๆ มีการติดต่อกบัฐานข้อมลู
5
หลกัการออกแบบเวบ็ไซต์
• โครงสรา้ง (Website Structure Design)• ก าหนดภาพรวมของเวบ็ไซต ์(Outline)• รวบรวมข้อมูล (Content)• ออกแบบการแสดงผล (Layout)
• การแสดงผล (Website Interface Design)• เลือกสีหรอืกลุ่มสีท่ีเหมาะสม (Color Theme)• การเลือกรปูแบบตวัอกัษรท่ีเหมาะสม (Font)• ภาพประกอบ และส่ืออ่ืนๆ (Image and Multimedia) 6
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
WEBSITE STRUCTURE DESIGN
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
7
ก าหนดภาพรวมของเวบ็ไซต ์(Outline)
•ก าหนดวตัถปุระสงคข์องเวบ็ไซต ์เพื่อท าให้สามารถก าหนดแนวทางจดัหาข้อมลูให้เหมาะสม
•ก าหนดขอบเขตให้ชดัเจน เวบ็ไซตไ์ม่ควรมีความซบัซ้อนจนเกินไป
•ก าหนดความเช่ือมโยงระหว่างข้อมลู พยายามจดักลุ่มของข้อมลูท่ีมีความสอดคล้องกนัไว้ด้วยกนั
8
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ตวัอย่างประเภทของเวบ็ไซต์
• เวบ็ขององคก์ร หรือบริษทั (Corporate Website)• ข้อมลูรายละเอียดขององคก์ร หน้าท่ี วิธีการติดต่อ
• เวบ็ธรุกิจการค้า (Promotional/E-Commerce Website)• รายละเอียดสินค้า วิธีการซ้ือขาย และโฆษณา
• เวบ็รวบรวมความรู้ (Information Website)• เวบ็รายวิชา หรือรวมบทความ หรือข้อมลูต่างๆ เช่นวิกิพีเดีย
• เวบ็ส่วนตวั (Personal Website)• รวมรวมผลงาน (Portfolio), อลับัม้, บลอ็ก
9
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
รวมรวมข้อมูล (Content)
• ข้อมลูท่ีอยู่บนเวบ็ไซตนั์น้ เป็นส่วนส าคญัท่ีสดุของเวบ็ไซต ์ควรค านึงถึงรายละเอียดดงัน้ี• ความถกูต้องของข้อมลู ข้อมูลท่ีเลือกมานัน้จะต้องมีการตรวจสอบความถกูต้อง เพ่ือความน่าเช่ือถือของเวบ็ไซต ์ทัง้การสะกดค า และเน้ือหา
• ความเป็นปัจจบุนัของข้อมลู ข้อมูลมีการอพัเดทมากน้อยแค่ไหน
• ความครอบคลมุ ให้เป็นไปตามวตัถปุระสงคข์องเวบ็ไซต์ 10
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ออกแบบการแสดงผล (Layout)
• หน้าเวบ็ไซตโ์ดยปกติ จะมีส่วนประกอบดงัน้ี• ส่วนหวั (Header) แสดงช่ือเวบ็ไซต ์โลโก้ หรือค าโปรยเลก็น้อย• ไฮไลท์ หรือแบนเนอร์ (Highlight) แสดงรายละเอียดท่ีต้องการเน้น เช่น โปรโมชัน่ ประกาศข่าวส าคญั อาจมีเฉพาะหน้าhomepageไม่จ าเป็นต้องมีทกุหน้า
• เมนูหลกั เมนูย่อย (Menu) แสดงรายการหน้าเวบ็เพจอ่ืนท่ีอยู่ในเวบ็ไซตเ์ดียวกนั เพ่ือใช้ในการเช่ือมโยง ควรใช้ต าแหน่งและรปูแบบเดียวกนัทัง้เวบ็ไซต์
• เน้ือหาหลกั, เน้ือหารอง (Content) รายละเอียดหลกัของหน้าเวบ็เพจนัน้ๆ
• ส่วนท้าย (Footer) แสดงรายละเอียดย่อยต่างๆ เช่น เมนูย่อยหรือข้อมลูติดต่อ รายละเอียดแสดงลิขสิทธิ
11
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ส่วนประกอบหน้าเวบ็เพจ
12
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Main Content
Secondary Content
Footer
Logo
Menu
Header
แนวทางการออกแบบการแสดงผล
•ควรออกแบบให้ทุกๆหน้าของเวบ็ไซตเ์ป็นไปในแนวทางเดียวกนั เช่นต าแหน่งเมนู และเน้ือหา เพ่ือให้เกิดความคุ้นเคย
• ไม่ควรใส่เน้ือหาให้แน่นจนเกินไป อาจมีรปู หรือพืน้ท่ีว่าง
• แบง่หวัข้อเน้ือหาชดัเจน ง่ายต่อการมอง• ออกแบบให้แสดงเน้ือหาส าคญั หรือต้องการเน้น ในหน้า
Homepage เช่น ข่าวประชาสมัพนัธ ์หรือข้อมลูท่ีมีการอพัเดทล่าสดุ 13
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ตวัอย่างเวบ็ไซต์ Portfolio
14
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ตวัอย่างเวบ็ไซต ์Corporate
15
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ตวัอย่างเวบ็ไซต์ Knowledge
16
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Responsive Web Design
• เป็นการออกแบบเพ่ือให้สามารถแสดงผลเวบ็ไซต์ได้ในหลายอปุกรณ์
• ข้อมลูจะถกูปรับให้เหมาะสมตามขนาดหน้าจอของอปุกรณ์โดยอตัโนมตัิ
• เป็นแนวทางในการออกแบบการแสดงผลเวบ็ไซต์ในปัจจบุนัและอนาคต
• เทคโนโลยีการใช้ภาษา HTML5และ CSS
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
17
Image by Guillermo Garcia-Mont
WEBSITE INTERFACE DESIGN
20
41
00
Info
rmat
ion
Tec
hn
olo
gy
and
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
18
เลือกสีหรือกลุ่มสีท่ีเหมาะสม (Color Theme)
•การเลือกสี หรือธีมของเวบ็ไซต ์ควรเลือกให้เหมาะกบัเน้ือหาของเวบ็ เช่น เวบ็รายวิชา หรือเวบ็รวมความรู้ เน้ือหามีมาก ไม่ควรใช้สีฉูดฉาดเกินไป
•ส าหรบัองคก์ร หรือบริษทั ธีมของเวบ็ไซต ์จะส่ือถึงภาพลกัษณ์ขององคก์ร และอาจถกูก าหนดโดยสีประจ าองคก์ร เพ่ือแสดงความหน้าเช่ือถือ เช่น เวบ็ไซตธ์นาคาร มหาวิทยาลยั หน่วยงานราชการ 19
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Color Theme
•กลุ่มของสีต่างๆ ให้ความรู้สึกกบัผูช้มต่างกนั ควรเลือกน ามาใช้ให้เหมาะสมและส่ือความหมาย เช่นสีโทนร้อนให้ความรู้สึกสนุกสนานและกระตุ้นความสนใจ และสีโทนเยน็ให้ความรู้สึกสงบ
•ควรเลือกใช้สีของเวบ็ไซตใ์ห้เหมาะสมกบัเน้ือหาของเวบ็ไซต ์เช่นเวบ็ไซตท่ี์มีเน้ือหามาก ควรใช้สีท่ีท าให้อ่านง่าย สบายตา 20
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Color Theme
•รปูแบบของการใช้สีในเวบ็ไซต์• สีโทนรอ้น หรอืสีโทนเยน็ (Warm and
Cool Colors)
• สีโทนเด่ียว (Monochromatic Colors)
• สีข้างเคียง (Analogous Colors)
• สีคู่ตรงข้าม (Triad Colors)
21
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Analogous Colors
ท่ีมา: http://colorwheel.wikispaces.com/
Warm and Cool Colors
Monochromatic Colors
Triad Colors
การเลือกรูปแบบตวัอกัษรทีเ่หมาะสม (Font)
• รปูแบบฟอนตค์วรเลือกให้เหมาะสมกบัเน้ือหา ทางการ/ไม่เป็นทางการ
• มีขนาดท่ีเหมาะสม ไม่เลก็หรอืใหญ่จนเกินไป
• สีของข้อความและสีของพืน้หลงัต้องเหมาะสม อ่านง่าย
• ไม่ควรมีลกูเล่นของข้อความ เช่นตวักระพริบ ตวัว่ิง มากเกินไป
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
22
รปูแบบตวัอกัษรภาษาองักฤษ (1) (Font)
•Serif เป็นตวัอกัษรแบบมีหวัมีเท้า มกัใช้ในเอกสารเป็นทางการ ส่วนใหญ่ใช้เป็นหวัเรือ่งมากกว่าเน้ือความ เช่นTime New Roman, Georgia, Book Antiqua เป็นต้น
•San Serif เป็นตวัหนังสือท่ีเน้นความเรียบง่าย ดูทนัสมยักว่าแบบ serif อ่านง่าย จึงเหมาะกบัการใช้กบัข้อความท่ีเป็นเน้ือความ เช่น Arial, Tahoma, Calibri เป็นต้น 23
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
รปูแบบตวัอกัษรภาษาองักฤษ (2) (Font)
•Script เป็นตวัอกัษรท่ีเลียนแบบลายมือเขียน เหมาะกบังานส าหรบัวยัรุน่หรอืแบบไม่เป็นทางการ เหมาะกบัการใช้เป็นหวัเรือ่งมากกว่าเน้ือความเน่ืองจากอ่านค่อนข้างยากเช่น Vladimir Script, Freestyle Script เป็นต้น
24
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ภาพประกอบ และส่ืออ่ืนๆ (Image and Multimedia)
• มีความสมัพนัธก์บัเน้ือความ
•ขนาดไม่เลก็หรือใหญ่จนเกินไป
•หลีกเล่ียงการใช้การเคล่ือนไหวหรือเอฟเฟ็คต่างๆท่ีมากเกินไป
•หากใช้เสียงเพลงประกอบเวบ็ ควรท่ีปุ่ มคลิกปิดได้ หรือไม่ควรตัง้ค่าให้ท าการเล่นโดยอตัโนมติัเม่ือเปิดเวบ็ 25
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Web Authoring Tools
ปัจจบุนั มีซอฟตแ์วรท่ี์ใช้ในการสร้างเวบ็ได้โดยเป็นลกัษณะ WYSIWYG (What You See Is What You Get) ทัง้ท่ีเป็นแบบโปรแกรมส าเรจ็รปู เช่น Microsoft FrontPage, Adobe Dreamweaver, KompoZer และเป็นแบบออนไลน์เซอรวิ์ส ท่ีให้บริการสร้างเวบ็ไซต์พร้อมกบัท าหน้าท่ีเป็นเวบ็โฮสต้ิงไปด้วย เช่น Google Sites, Wordpress.com, Weebly เป็นต้น
26
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Web Publishing Services
• เป็นบริการท่ีช่วยในการสร้างและจดัเกบ็เวบ็ไซต ์โดยจะมีบริการให้สร้าง ปรบัแต่ง เวบ็ไซตไ์ด้ตามต้องการ • โดยส่วนใหญ่ในการสรา้งเวบ็ไซตจ์ะเป็นแบบ
WYSIWYG• ให้บริการ Hosting และ Domain Name• มี Theme ให้เลือกใช้ปรบัแต่งเวบ็ได้ง่าย• มีทัง้แบบฟรี และเสียค่าใช้จ่าย 27
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
ตวัอย่าง
28
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Google Sites Wordpress
Tumblr
Blogger
SOCIAL MEDIA
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
29
ข้อแตกต่างระหว่างเวบ็ไซตแ์ละสงัคมออนไลน์
Website
• สามารถรวบรวมและแสดงขอ้มลูทีเ่ป็นหมวดหมูไ่ด้
• สามารถคน้หา เรยีกดขูอ้มลูยอ้นหลงัไดง้า่ย
• เป็นชอ่งทางหลกัในการน าเสนอขอ้มลูของหน่วยงาน หรอืองคก์ร
Social Media
• เน้นลกัษณะของการตดิต่อสือ่สาร ประกาศ หรอืเหมาะกบัการใชโ้ฆษณา
• เรยีกคน้หาขอ้มลูเก่าไดย้าก
• ไมส่ามารถจดัขอ้มลูทีป่ระกาศเป็นหมวดหมูไ่ด้
• เหมาะกบัการใชใ้นงานประชาสมัพนัธ ์แจง้ขา่ว
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
30
Social Media Trend
31
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
http://kamber.com.au/
Facebook Page and Group
• Facebook Profile• แสดงรายละเอยีดของบุคคล โดยเจา้ตวัสามารถก าหนดระดบัการเปิดเผยขอ้มลู รายละเอยีดของเพือ่น และขอ้ความทีต่อ้งการประกาศไดด้ว้ยตนเอง
• Facebook Page• ลกัษณะเชน่เดยีวกบั Facebook profile แต่เป็นการสรา้งโปรไฟลส์ าหรบ้ ผูม้ชีือ่เสยีง หน่วยงาน หรอืองคก์รต่างๆ โดยทีห่น้าเพจจะเปิดเผยเป็นสาธารณะ (Public) โดยอตัโนมตั ิ และการตดิต่อสือ่สารกบัเพจ จะใชว้ธิ ีกดไลคแ์ละตดิตาม เพือ่รบัขอ้มลูขา่วสารทีป่ระกาศจากเพจนัน้ๆ
• Facebook Group• เป็นกลุ่มเฉพาะเพือ่ใชใ้นการตดิต่อสือ่สารระหวา่งคนในกลุ่มทีส่นใจในเรือ่งเดยีวกนั หรอืเพือ่แลกเปลีย่นความคดิเหน็ในเรือ่งต่างๆ โดยที ่กลุ่มจะอนุญาตใหม้กีารก าหนดระดบัการเปิดเผยขอ้มลู (public, closed, secret) และลกัษณะการสมคัรเขา้เป็นสมาชกิได้(Invite only, ask for join, join) 32
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Facebook Page
33
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Facebook Group
34
20
41
00
Info
rmat
ion
Tec
hn
olo
gy a
nd
Mo
der
n L
ife
I : W
eb A
uth
ori
ng
Too
ls
Top Related