Weitere ähnliche Inhalte Ähnlich wie Internet 54 (20) 2. INTERNET คืออะไร
• INTERNET เปนเครือขายคอมพิวเตอร
ขนาดใหญ ที่เชื่อมโยงเครือขาย
คอมพิวเตอร ทั่วโลกเขาดวยกัน
• คําเต็มของอินเทอรเน็ต : อินเทอรเน็ตเวิรกกิง (Internetworking)
• เรียกอีกอยางหนึ่งวา ไซเบอรสเปซ (Cyberspace)
3. อินเทอรเน็ต : อภิมหาเครือขาย
• อินเทอรเน็ต เปนอภิมหาเครือขายที่ยิ่งใหญมาก มี
คอมพิวเตอรหลายลานเครื่องทั่วโลกเชื่อมตอระบบ ทําให
คนในโลกทุกชาติทุกภาษาติดตอกันได สามารถสงขอมูล
ขาวสารหลายรูปแบบทั้งขอความ ภาพ และเสียง
• การติดตอสื่อสารระหวางคอมพิวเตอร อาจจะติดตอ
ผานสายโทรศัพท ไมโครเวฟ ดาวเทียม เคเบิลใตน้ํา
หรือสายไฟเบอรออปติก
4. ประวัติความเปนมา
• ป 2512 กระทรวงกลาโหมสหรัฐใหทุน
มหาวิทยาลัย ศึกษาวิธีการเชื่อมโยงคอมพิวเตอรเขา
เปนเครือขาย เรียกวา อารปาเน็ต (ARPAnet)
• ป 2524 มหาวิทยาลัยทุกแหงในสหรัฐเชื่อมโยงเขาสู
เครือขาย และเปลี่ยนชื่อมาเปน อินเทอรเน็ต
• ป 2532 มหาวิทยาลัยสงขลานครินทร ไดเชื่อมโยง
เครือขายเพื่อสง อิเล็กทรอนิกสเมล กับประเทศ
ออสเตรเลีย
5. อินเทอรเน็ตในประเทศไทย
สําหรับภาคเอกชน ไดมีการกอตั้งบริษัทสําหรับ
ใหบริการอินเตอรเน็ตแกเอกชนและบุคคลทั่วไป ที่นิยมเรียกกัน
วา ISP (Internet Service Providers)
5
7. เหตุผลสําคัญที่ทําใหอินเตอรเน็ตไดรับความนิยมแพรหลาย
การสื่อสารบนอินเตอรเน็ต ไมจํากัดระบบปฏิบัติการของเครื่องคอมพิวเตอร คอมพิวเตอร
ที่ตางระบบปฏิบัติการกันก็สามารถติดตอ สื่อสารกันได เชน คอมพิวเตอรที่มี
ระบบปฏิบัติการแบบ Windows 95 สามารถสื่อสารกับคอมพิวเตอรที่มีระบบปฏิบัติการ
แบบ Macintosh ได
อินเตอรเน็ตไมมีขอจํากัดในเรื่องของระยะทาง ไมวาจะอยูภายในอาคารเดียวกัน หรือหาง
กันคนละทวีป ขอมูลก็สามารถสงผานถึง กันได
อินเตอรเน็ตไมจํากัดรูปแบบของขอมูล ซึ่งมีไดทั้งขอมูลที่เปนขอความอยางเดียว หรืออาจ
มีภาพประกอบ รวมไปถึงขอมูลชนิด มัลติมีเดีย คือมีทั้งภาพเคลื่อนไหวและมีเสียง
ประกอบดวยได
9. E-mail : Electronic Mail
• ไปรษณียอิเล็กทรอนิกส หรือ E-mail
(Electronic Mail) เปนการสงจดหมาย
อิเล็กทรอนิกส ผานเครือขายอินเทอรเน็ต ตลอดจน
สามารถ สงแฟมขอมูล หรือไฟลแนบกับ
อีเมลไดดวย
10. Telnet
• เทลเน็ต (Telnet) การขอเขาระบบจากระยะไกล
• เปนบริการที่เราสามารถเขาไปใชงานในเครื่อง
คอมพิวเตอรที่อยูไกลๆ ดวยตัวเอง
11. FTP
• การถายโอนขอมูล FTP (File Transfer Protocol)
• เปนบริการของอินเทอรเน็ต ที่เราสามารถคนหาและเรียกขอมูล
จากแหลงตางๆ มาเก็บที่เครื่องเรา หรือสงไปที่เครื่องอื่น
ทั้งขอมูลที่เปน ขอความ ภาพ และเสียง
12. www
• World Wide Web : www
• Gopher
• Archie
• เปนการใชเครือขายอินเทอรเน็ต
ในการ สืบคนขอมูล คนหา
ขาวสารที่มีอยูมากมาย แลวชวย
จัดเรียงขอมูลขาวสารตามหัวขอ
อยางมีระบบ เปนเมนู ทําใหเรา
หาขอมูลไดงายและสะดวก
13. World Wide Web : www
• World Wide Web : www
• การบริการขอมูลที่เชื่อมตอดวย ไฮเปอรลิงก โดยมีโฮสตที่ทําหนาที่บริการ
ขอมูลซึ่งเรียกวา เว็ปเซิรฟเวอร (Web Server ) การเรียกชื่อโฮสต ใชคํา
นําหนาวา www เชน www.thaisakon.com
16. E-Commerce
• E-Commerce : Electronic Commerce
• เปนการซื้อ-ขายสินคา และบริการบนอินเทอรเน็ต ปจจุบันมี
บริษัทหลายหมื่นบริษัทใชอินเทอรเน็ตทําธุรกิจ และใหบริการ
ลูกคา 24 ชั่วโมง
21. ระบบสื่อสาร โทรคมนาคม
• เปนเสนทางที่ใชในการ
ติดตอสื่อสารระหวาง
Client กับ Server และ
Server กับ Server อื่น ใน
เครือขายอินเทอรเน็ต
26. รูปแบบการเชื่อมตอ
MODEM เปลี่ยนขอมูล
ในรูปแบบดิกิตอล
องค จ าร
เปนโทรศัพท
อนาล็อก
สงไปตามสายโทรศัพท
27. MODEM เปลี่ยนขอมูล
ในรูปแบบอนาล็อก
รูปแบบการเชื่อมตอ เปนดิจิตอล
สงไปยังเครื่องคอมพิวเตอร
องคการ
โทรศัพท
29. ลักษณะการใชงาน
• ผูใชกําหนด Username และ Password
• กําหนดหมายเลขโทรศัพทของผูใหบริการอินเทอรเน็ต
• เริ่มการติดตอ
• เรียกโปรแกรมสําหรับใชบริการตางๆ บนอินเทอรเน็ต อาทิ
เชน ถาตองการคนขอมูลจาก www ใหใชโปรแกรม IE /
Nescape / Opera ถาตองการสนทนาบนเครือขาย ใช
Internet Phone ฯลฯ
30. การเชื่อมตอแบบ Cooperate dial-in
• การเชื่อมตอแบบสวนบุคคล มีขอจํากัดคือ
ใชไดครั้งละ 1 เครื่อง 1 ผูใช
• กรณีที่ตองการใหใชไดหลายๆ เครื่อง และ
ประหยัดคาใชจาย สามารถทําไดโดยการใช
การเชื่อมตอแบบ coperate dial-in
33. รูปแบบการเชื่อมตอ
Server ทําหนาที่เปน
ชองทางในการติดตอ
ผูใหบริการอินเทอรเน็ต
องคการ
โทรศัพท
37. ลักษณะการใชงาน
• กําหนด Username และ Password
• กําหนดหมายเลขโทรศัพทของผูใหบริการอินเทอรเน็ต
• การกําหนดขางตนกระทําที่เครื่องที่เปน Server
• เริ่มการติดตอ
• การเรียกโปรแกรมสําหรับใชบริการตางๆ บนอินเทอรเน็ต สามารถ
ทําไดที่เครื่องตางๆ ที่อยูในเครือขาย โดย Server จะเปน
gateway นําผูใชในเครือขายออกไปยังอินเทอรเน็ต
38. การเชื่อมตอแบบ Cooperate lease line
• เหมาะสําหรับหนวยงานที่ตองการใหบริการ
ทางดานอินเทอรเน็ต
• ตองการเชื่อมตอกับระบบตลอด 24 ชั่วโมง
• มีบุคลากรในหนวยงานที่ตองใชอินเทอรเน็ต
ในเวลาเดียวกันเปนจํานวนมาก
43. MODEM เปลี่ยนขอมูล
ในรูปแบบดิจิตอลการ
องค
รูปแบบการเชื่อมตอ
เปนอนาล็โทรศัพท
อก
สงไปตามสายโทรศัพท
45. MODEM เปลี่ยนขอมูล
ในรูปแบบอนาล็อก
รูปแบบการเชื่อมตอ เปนดิจิตอล
สงไปยังเครื่องคอมพิวเตอร
วงจรเชาจากการสื่อสาร
ทศท. UCOM DATANET
47. Internet
Server
รูปแบบการเชื่อมตอ Web Server
Mail Server
52. อ ิน เ ต อ ร เ น ็ต ย ุค ห น า
53. Web 1.0
• E-mail
• Chat room
• Telnet
• Net meeting
• Webboard
• IRC/ICQ
• LMS
54. Web 2.0
• Camfrog
• YouTube
• Wikis
• Podcast
• Weblog
• Webcast
• Webquest
• LAMP ฯลฯ
57. Social Network คือ ?...
Social Network “เครือขายสังคม” หรือ “เครือขายมิตรภาพ” หรือ
กลุมสังคมออนไลน” คือ บริการผานเว็บไซตที่เปนจุดโยงระหวางบุคคลแต
ละคนที่มีเครือขายสังคมของตัวเองผานเน็ตเวิรคอินเทอรเน็ต รวมทั้งเชื่อมโยง
บริการตางๆ อยาง เมล เมสเซ็นเจอร เว็บบอรด บล็อก ฯลฯ เขาดวยกัน
58. จุ ด เ ริ่ ม ต น ข อ ง สั ง ค ม อ อ น ไ ล น เ กิ ด ขึ้ น จ า ก เ ว็ บ ไ ซ ต
classmates.com เมื่อป 1995 และเว็บไซต SixDegrees.com ในป 1997
ซึ่ง เป นเว็ บ ไซต ที่ จํา กั ด การใช ง านเฉพาะนั ก เรีย นที่ เรี ย นในโรงเรี ย น
เดีย วกั น เพื่ อสร า งประวั ติ ข อมู ล การสื่ อสาร และแลกเปลี่ย นขอมูล ที่
สนใจร วมกั น ระหว า งเพื่ อ นนั ก เรี ย นในลิ ส ต เ ท า นั้น ต อ มาในป 1999
เว็บไซต epinions.com ที่พัฒนาโดย Jonathan Bishop ก็ไดมีการเพิ่ม
ฟงกชั่นในสวนของการที่ผูใชสามารถควบคุมเนื้อหาและติดตอถึงกันได
59. 1.Communicate (การสื่อสาร) มีการโตตอบกันผานทางเว็บได เชน
บล็อก ที่ผูใชสามารถสมัครสมาชิกและสรางเนื้อหาของตัวเองได มีคนเขา
มาอาน มาคอมเมนต นอกจากนี้หลายเว็บยังสามารถที่จะพูดคุยกันไดเลย
ฝากขอความไวใหกัน สรางกลุมที่สนใจเรื่องเดียวกัน
2. Definition (คําจํากัดความ) ที่เห็นไดชัดในเว็บจะมี Tagging และ
Bookmark เสมอ ใหเราระบุคําที่ใชในเนื้อหา ในกรณีที่พบเจอเนื้อหาที่
นาสนใจ ก็สามารเก็บไวเพื่อกลับเขามาดูไดโดยการ Bookmark หนาเว็บนั้น
ไว
60. 3.Networking (เครือขาย) - มีชุมชนออนไลน มีเว็บบอรดให
สมาชิกพูดคุยกัน รวมมือกันสรางสรรคอะไรใหมขึ้นมา การที่มีคนใน
เครือขายมากๆก็จะมีพลังมากขึ้น ทําใหคนในกลุมประสบความสําเร็จ
ไดเร็วขึ้น
4.Sharing (แบงปน) - สิ่งที่ขาดไมไดเลยที่คนอยูรวมกันในสังคม ก็
คือ การแบงปน เอื้ออาทร ตอกันและกัน ซึ่งในโลกอินเตอรเน็ต สามารถ
แบงปนกันไดหลายอยาง เชน ขอมูล เอกสาร รูปภาพ วีดีโอ เพลง
62. Social Networking Sites มีทั้งหมดกี่ประเภท
1. Identity Network เผยแพรตัวตน hi5, myspaces, facebook
เว็บไซตเหลานี้ใชสําหรับนําเสนอตัวตนและเผยแพรเรื่องราว
ของตนเองทางอินเตอรเน็ตครับ สามารถเขียน blog สรางอัลบั้มรูปของ
ตัวเอง สรางกลุมเพื่อน และสรางเครือขายขึ้นมาได
63. 2. Creative Network เผยแพรผลงาน youtube, flickr, multiply
3. Interested Network ความสนใจตรงกัน เชน digg, del.icio.us
social book mark ก็ เปนหนึ่งในนี้
del.icio.us เปน Online Bookmarking หรือ Social Bookmarking
โดยแทนที่เราจะ Bookmark เว็บที่เราชอบเก็บไวในเครื่องของเราคน
เดียว แตเอา Bookmark เก็บไวบนเว็บเพื่อแบงใหคนอื่นไดดู และเราก็จะ
ไดรูดวยวาเว็บไซตใดที่ไดรับความนิยมมาก เปนที่นาสนใจ
64. 4. Collaboration Network รวมกันทํางาน ตรงนี้ก็จะเปนพวก
รวมกันพัฒนาซอฟตแวรหรือสวนตางๆของซอฟตแวร
WikiPedia เปนสารานุกรมตอยอด ที่อนุญาตใหใครก็ไดเขามา
ชวยกันเขียน และแกไขบทความตางๆ ทําใหเกิดเปนสารานุกรมออนไลน
ขนาดใหญที่รวบรวมความรู ขาวสาร และเหตุการณตางๆ ยังมีภาษาไทย
ปจจุบันใช Google Maps สรางแผนที่ของตัวเอง หรือแชรแผนที่ใหคน
อื่นได จึงทําใหมีสถานที่สําคัญหรือสถานที่ตางๆ ถูกปกหมุดเอาไว
65. 5. Gaming/Virtual Reality โลกเสมือน อันนี้คนไทยอาจไมคอย
คุนเคย ตัวอยาง second life, DotA
6. Peer to Peer (P2P)
P2P เปนการเชื่อมตอกันระหวาง Client (เครื่องผูใช, เครื่อง
ลูกขาย) กับ Client โดยตรง โปรแกรม Skype จึงไดนําหลักการนี้มาใช
เปนโปรแกรมสนทนาผานอินเตอรเน็ต และก็มี BitTorrent เกิด
67. เว็บไซตแบบ Social Network ในโลกนี้ มีเว็บไซต Social Network ใดบางที่เปนยอดนิยม
1. MySpace.com 2. FaceBook.com 3. Orkut.com
4. Hi5.com
5. Vkontakte.ru 8. PerfSpot.com
6. Friendster.com 9. Bebo.com
7. SkyRock.com 10. Studivz.net
72. กระบวนการในการพัฒนาเว็บไซต
1. สํารวจปจจัยสําคัญ (Research)
2. พัฒนาเนื้อหา (Site Content)
3. พัฒนาโครงสรางเว็บไซต (Site Structure)
4. ออกแบบและพัฒนาเว็บไซต (Visual Design)
5. พัฒนาและดําเนินการ (Production and
Operation)
76. การจัดระบบขอมูลในเว็บไซต (ตอ)
• จัดหาภาพ หรือสรางภาพที่เกี่ยวของกับเนื้อหา
– สรางดวยโปรแกรมกราฟก เชน Adobe Photoshop
– คัดเลือกจาก ClipArt For Web เชน CD-Rom รวมภาพสําหรับเว็บ
• ภาพที่เลือกใชงานทั้งหมด ตองเก็บไวในโฟลเดอรที่สรางไว
กอนแลว
78. การจัดระบบขอมูลในเว็บไซต (ตอ)
• ตรวจสอบผล เอกสาร HTML ดวยเว็บเบราเซอร
• แกไขขอผิดพลาดที่อาจเกิดขึ้น เนื่องจากเว็บเบราเซอรแตละ
คาย แตละรุน รูจักคําสั่ง HTML ไมเทากัน
• สงขอมูลขึ้นเครื่องแมขาย (Server)
• ตรวจสอบผลการเรียกดูจากเครื่องแมขาย
79. หลักเกณฑในการเลือกภาพ Graphic
• ขนาดไฟลไมควรเกิน 80 กิโลไบต เพื่อความรวดเร็วในการ
แสดงผล
• ใชไฟลแบบ JPEG สําหรับรูปถาย หรือรูปที่มีสีเกิน 256 สี
• ใชไฟลแบบ GIF สําหรับภาพวาดหรือภาพการตูนที่มีสีไม
เกิน 256 สี
• เลือกภาพที่มีความนาสนใจและดึงดูด เพื่อไมใหเสียเวลาที่
เสียไปในการ Download
• ภาพเปลาประโยชน
81. ไฟลสกุล JPG (Joint Photographer’s Experts Group)
• จุดเดน
– แสดงสีไดสูงสุด16.7 ลานสี (สนับสนุนสีไดถึง 24 bit)
– สามารถกําหนดคาการบีบไฟลไดตามที่ตองการ
– มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ
Progressive
– มีโปรแกรมสนับสนุนการสรางจํานวนมาก
– เรียกดูไดกับ Graphics Browser ทุกตัว
– ตั้งคาการบีบไฟลได (compress files)
• จุดดอย
– ทําใหพื้นของรูปโปรงใสไมได
82. ไฟลสกุล GIF (Graphics Interlace File)
• จุดเดน
– แสดงสีไดสูงสุด 256 สี
– สามารถใชงานขามระบบ (Cross Platform) หมายความวา คอมพิวเตอรทุกระบบ ไม
วาจะใช Windows, Unix ก็สามารถเรียกใชไฟลภาพสกุลนี้ได
– มีขนาดไฟลต่ํา จากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงไฟลภาพไดรวดเร็ว
– สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent)
– มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace
– มีโปรแกรมสนับสนุนการสรางจํานวนมาก
– เรียกดูไดกับ Graphics Browser ทุกตัว
– ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation)
• จุดดอย
– ไฟลชนิดนี้ก็มีจุดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256 สี ทําให การ
นําเสนอภาพถาย หรือภาพที่ตองการความคมชัดหรือภาพสดใส จะตองอาศัยฟอรแมต
อื่น
83. ไฟลสกุล PNG (Portable Network Graphics)
• จุดเดน
– แสดงสีไดสูงสุด 16.7 ลานสี
– สนับสนุนสีไดถึงตามคา True color (16 bit, 32 bit หรือ 64 bit)
– สามารถกําหนดคาการบีบไฟลไดตามที่ตองการ
– มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียด (Interlace)
– สามารถทําพื้นโปรงใสได
• จุดดอย
– หากกําหนดคาการบีบไฟลไวสูง จะใชเวลาในการคลายไฟลสูงตามไปดวย แตขนาด
ของไฟลจะมีขนาดต่ํา
– ไมสนับสนุนกับ Graphic Browser รุนเกา สนับสนุนเฉพาะ IE 4 และ Netscape 4
– ความละเอียดของภาพและจํานวนสีขึ้นอยูกับ Video Card
– โปรแกรมสนับสนุนในการสรางมีนอย
84. การแสดงภาษา
• เลือกฟอนตที่ตองการจากตัวเลือก Font โดยเอกสารภาษาไทยควรกําหนด
ฟอนตเปน Microsoft Sans Serif, MS Sans Serif หรือ Tahoma สําหรับ
เอกสารภาษาอังกฤษ กําหนดเปน Arial
• ขนาดตัวอักษร สามารถกําหนดไดอิสระ และเมื่อกําหนดแลว ผูใช
ปลายทางยังสามารถปรับเปลี่ยนไดอิสระ
• การพิมพขอความไมตองสนใจระยะกั้นหลัง เพราะโปรแกรมจะตัดคําให
โดยอัตโนมัติ สําหรับเอกสารภาษาไทย ควรเวนวรรคใหกับประโยคเปน
ระยะๆ อยาพิมพติดกัน
• การกดปุม <Enter> จะกระทําเมื่อตองการขึ้นบรรทัดใหม, เวนบรรทัด
หรือจบพารากราฟ
• หากตองการขึ้นบรรทัดใหม กอนจบพารากราฟใหกดปุม <Shift><Enter>
86. แนวคิดในการออกแบบ
• เรียนรูจากเว็บไซตตางๆ
• ประยุกตรูปแบบจากสิ่งพิมพ
• ใชแบบจําลองเปรียบเทียบ
• ออกแบบอยางสรางสรรค
87. แนวทางในการสรางเว็บไซต
13 ขั้นตอนในการพัฒนาเว็บไซต
การจัดโครงสรางของเว็บไซต
ระบบเนวิแกชั่น
การจัดแบงเนื้อที่ในหนาเว็บ
สีบอกความหมายอะไรบาง
88. 13 ขั้นตอนในการพัฒนาเว็บไซต
Phase 1: สํารวจปจจัยที่สําคัญ (Research)
1. เปาหมายหลักของเว็บไซต
1.รูจักตัวเอง - กําหนดเปาหมายและสํารวจความพรอม
2. ความตองการของผูใช
2.เรียนรูผูใช – ระบุกลุมผูใชและศึกษาความตองการ
3. กลยุทธในการแขงขัน
3.ศึกษาคูแขง - สํารวจการแขงขันและเรียนรูคูแขง
Phase 2: พัฒนาเนื้อหา (Site Content) 1. แนวทางในการออกแบบเว็บไซต
4.สรางกลยุทธการออกแบบ 2. ขอบเขตเนื้อหาการใชงาน
5.หาขอสรุปขอบเขตของเนื้อหา 3. ขอมูลที่ถูกจัดอยางเปนระบบ
Phase 3: พัฒนาโครงสรางเว็บไซต (Site Structure)
1. แผนผังโครงสรางขอมูล
6.จัดระบบขอมูล
2. แนวทางการทองเว็บ
7.จัดทําโครงสรางขอมูล
3. ระบบเนวิเกชัน
8.พัฒนาระบบเนวิเกชัน
1. ลักษณะหนาตาของเว็บไซต
Phase 4: ออกแบบและพัฒนาหนาเว็บ (Visual design) 2. เว็บเพจตนแบบที่จะใชในการพัฒนา
9.ออกแบบและพัฒนาหนาตาเว็บ 3. รูปแบบโครงสรางเว็บไซต
10.พัฒนาตนแบบและขอกําหนดสุดทาย 4. ขอกําหนดในการพัฒนาเว็บไซต
Phase 5: พัฒนาและดําเนินการ (Production and Operation) 1. เว็บไซตที่สมบูรณ
11.ลงมือพัฒนาเว็บเพจ 2. เปดตัวเว็บไซตและทําใหเปนที่รูจัก
12.เปดตัวเว็บไซต 3. แนวทางในการดูแลและพัฒนาตอไป
13.ดูแลและพัฒนาตอเนื่อง
90. จัดโครงสรางเว็บไซต (Site MAP)
หนา A
แบบที่1 ตองคลิ๊ก 6 เพื่อเขาดูขอมูลหนา B
แบบที่ 2 คลิ๊กเพียง 2 ครั้งเนื่องจาก
โครงสรางขอมูลไมลึกมาก
หนา B
หนา A
หนา B
96. Flash Header
------------------------------------------
----------------------------------------------
--------------------------------------------- Picture Picture
Picture
---------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- ---------------------------- ----------------------------
-------------------------------------------- -------------------------------- --------------------------------
--------------------------------------------- -------------------------------- --------------------------------
-------------------------------- --------------------------------
---------------------------- ---------------------------- ----------------------------
-------------------------------- -------------------------------- --------------------------------
-------------------------------- -------------------------------- --------------------------------
-------------------------------- -------------------------------- --------------------------------
1 --- ---------------------------- 1 --- ----------------------------
---------------------------- ----------------------------
2 -------------------------------- 2 --------------------------------
-------------------------------- --------------------------------
3 -------------------------------- 3 --------------------------------
-------------------------------- --------------------------------
4 -------------------------------- 4 --------------------------------
-------------------------------- --------------------------------
5 -------------------------------- 5 --------------------------------
Footer
98. สีบอกความหมายอะไรบาง
สีน้ําเงิน
ความหมายในทางดี : ความซื่อสัตย ความมั่นคงปลอดภัย ความสะอาด ความเปน
ระเบียบ ความหวง มีน้ําใจ ความมีคุณธรรม ความฉลาดรอบรู ความสะอาด ความสงบ ความ
กลมกลืน ความเปนหนึ่ง ความเชื่อมั่น
ความหมายในทางไมดี : ความหดหู ซึมเศรา เสียใจ ความโมโห
สีแดง
ความหมายในทางดี : พลัง อํานาจ ความรัก ความอบอุน ความจริง กําลังใจ อาการขวย
เขิน ความแข็งขัน การแขงขัน การเสียสละ ความกลาหาญความเร็ว ความตื่นเตน ความสนุกสนาน
ความหมายในทางไมดี : ความโมโห ความกาวราว ความอันตราย ความละอาย ความ
รุนแรง ความผิดพลาด
สีเขียว
ความหมายในทางดี : ธรรมชาติ สุขภาพ ความยินดี การมีโชคดี การเริ่มตนใหม ความปลอดภัย การ
รักษาความอบอุน ความแข็งแรง ความหวัง ความสมบูรณ ความกระฉับกระเฉง ความเปน อมตะ
ความภักดี
ความหมายในทางไมดี : อิจฉา ริษยา โชคราย ขาดประสบการณ ความเบื่อหนาย
99. สีบอกความหมายอะไรบาง (ตอ1)
สีเหลือง / สีสม
ความหมายในทางดี : ความสดใส รางเริง การโมงโลกในแงดี ความหวง ความอบอุน ความร่ํารวย ความสงา
งาม ธรรมะ ปรัชญา ความสุขความคิดฝน
ความหมายในทางไมดี : ความไมซื่อสตย การทรยศ ความขลาดกลัว ความอิจฉา ความเจ็บปวย การ
หลอกลวง ความไมแนนอน
สีน้ําตาล
ความหมายในทางดี : ความเรียบงาย ความสะดวกสบาย ความทนทาน ความมั่นคง ความเชื่อถือได ความมี
เกียรติ ความเจริญเติบโตเต็มที่
ความหมายในทางไมดี : ความเปรอะเปอน อากรซึมเศรา หดหู สลดใจ
สีเทา
ความหมายในทางดี : ความสภาพ ความสงบเสงี่ยม ความเปนไปได ความมนคง ความไววางใจ วามฉลาด
ความสุขุม ความมีเกียรติ
ความหมายในทางไมดี : ความเศราโศก ความนาเบื่อ
100. สีบอกความหมายอะไรบาง (ตอ2)
สีขาว
ความหมายในทางดี : ความบริสุทธิ์ ความไรเรียงสา ความรัก ความฉลาด ความสงบเสงี่ยม ความเรียบงาย
ความสะอาด การปราศจากเชื้อโรค ความเคารพนับถือ ความนอบนอมถอมตน ความเที่ยงตรง ความดี
ความหมายในทางไมดี : ความออนแอ การเจ็บปวย ความตาย ความเศราโศก
สีดํา
ความหมายในทางดี : อํานาจ ความฉลาด ความเปนเลิศ ความสุขุม ความรอบครอบ ความตั้งใจ ความมนคง
ความเปนทางการ
ความหมายในทางไมดี : ความซับซอน การหลอกลวง ความลบความกลัว การปกปด ความนากลัว ความชั่ว
ราย ความทุกข ความหดหู ความหมดหวง ความเศราโศก ความโกรธ ความลึกลับ
102. รูจักกับการออกแบบเว็บไซต
การออกแบบเว็บไซตนั้นไมไดหมายถึงลักษณะหนาตาของเว็บไซต
เพียงอยางเดียว แตเกี่ยวของตั้งแตการเริ่มตนกําหนดเปาหมายของ
เว็บไซต ระบุกลุมผูใช การจัดระบบขอมูล การสรางระบบเนวิเกชัน การ
ออกแบบหนาเว็บ รวมไปถึงการใชกราฟก การเลือกใชสี และการ
จัดรูปแบบตัวอักษร นอกจากนั้นยังตองคํานึงถึงความแตกตางของ
สื่อกลางในการแสดงผลเว็บไซตดวย
รูปตัวอยางเวบไซด
http://www.officemate.co.th
เปนเว็บที่ออกแบบสวยงามนาใช
และมีสีสันสวยงาม
107. ออกแบบใหตรงกับเปาหมาย และลักษณะของเว็บไซต
เว็บไซตแตละประเภทตางมีเปาหมายและลักษณะที่แตกตาง
กัน ตัวอยางเชน เว็บไซตที่เปน Search Engine ซึ่งเปนแหลง
รวมที่อยูของเว็บไซตตาง ๆ ทําหนาที่เปนประตูไปสูเว็บไซตอื่น ๆ
เว็บไซตประเภทนี้มีเปาหมายที่จะใหขอมูลที่ผูใชตองการอยาง
รวดเร็ว และจะมีผูเขามาใชบริการคนหาขอมูลเปนจํานวนมากใน
แตละวัน
111. รูปแสดงตัวอยางเว็บไซตของ Adobe
สวนเว็บไซตขององคกรธุรกิจที่มีเปาหมายเพื่อขายสินคาหรือบริการนั้น ยิ่ง
จําเปนตองใหความสําคัญกับการออกแบบเว็บไซตเปนอยางมาก เพราะผูใชหรือลูกคาของ
คุณจะตัดสินใจซื้อสินคาหรือบริการ โดยดูจากสิ่งที่พบเห็นในเว็บไซต ซึ่งลักษณะการ
ออกแบบของเว็บไซตก็จะสะทอนถึงภาพลักษณของธุรกิจนั้น จึงทําใหเว็บไซตที่ไดรับการ
ออกแบบมาอยางดีสามารถสรางความนาเชื่อถือและดึงดูดความสนใจของผูใชไดมากกวา
เว็บไซตอื่น
112. องคประกอบของการออกแบบเว็บไซตอยางมีประสิทธิภาพ
องคประกอบตอไปนี้ถือเปนพื้นฐานที่สําคัญของเว็บไซตที่ไดรับการ
ออกแบบมาอยางมีประสิทธิภาพ
1. ความเรียบงาย (Simplicity)
หลักที่สําคัญของความเรียบงาย คือ การสื่อสารเนื้อหาถึงผูใชโดยจํากัด
องคประกอบ เสริมที่เกี่ยวของกับการนําเสนอใหเหลือเฉพาะสิ่งที่จําเปน
เทานั้น
รูปตัวอยางเวบไซด
http://www.fourfan.com/
เปนเว็บที่ออกแบบเรียบงาย
113. 2. ความสม่ําเสมอ (Consistency)
ใชรูปแบบเดียวกันตลอดทั้งเว็บไซต เนื่องจากผูใชจะรูสึกกับ
เว็บไซตวาเปนเสมือนสถานที่จริง ถาลักษณะของแตละหนาในเว็บไซต
เดียวกันนั้นแตกตางกันมาก ผูใชก็จะเกิดความสับสนและไมแนใจวา
กําลังอยูในเว็บเดิมหรือไม ดังนั้นรูปแบบของหนา สไตลของกราฟก
ระบบเนวิเกชัน และโทนสีที่ใชควรจะมีความคลายคลึงกันตลอดทั้ง
เว็บไซต
114. 3. ความเปนเอกลักษณ (Identity)
การออกแบบตองคํานึงถึงลักษณะขององคกร เนื่องจากรูปแบบ
ของเว็บไซตสามารถสะทอนถึงเอกลักษณ และลักษณะขององคกรนั้น
ได
รูปตัวอยางเวบไซด http://www.gsb.or.th
เปนเว็บที่ออกแบบสีสันเปนเอกลักษณของตนเอง
115. 4. เนื้อหาที่มีประโยชน (Useful Content)
เนื้อหาถือเปนสิ่งที่สําคัญที่สุดในเว็บไซต ดังนั้นในเว็บไซตควร
จัดเตรียมเนื้อหาและขอมูล ที่ผูใชตองการใหถูกตองและสมบูรณ โดยมี
การปรับปรุงและเพิ่มเติมใหทันตอเหตุการณอยูเสมอ เนื้อหาที่สําคัญที่สุด
คือ เนื้อหาที่สรางขึ้นมาเองโดยทีมงานของคุณและไมซ้ํากับเว็บอื่น เพราะ
จะเปนสิ่งที่ดึงดูดผูใชใหเขามาในเว็บไซตอยูเสมอ
รูปตัวอยางเวบไซด
http://www.samunpri.com
เปนเว็บที่ออกแบบเรียบงายและ
เปนระเบียบสวยงาม
116. 5. ระบบเนวิเกชันที่ใชงานงาย (User-Friendly Navigation)
ระบบเนวิเกชันเปนองคประกอบที่สําคัญมากของเว็บไซต จะตอง
ออกแบบใหผูใชเขาใจไดงายและใชงานสะดวก โดยใชกราฟกที่สื่อ
ความหมายรวมกับคําอธิบายที่ชัดเจน รวมทั้งมีรูปแบบและลําดับของ
รายการที่สม่ําเสมอ
117. 6. มีลักษณะที่นาสนใจ (Visual Appeal)
เปนเรื่องยากที่จะตัดสินวาลักษณะหนาตาของเว็บไซตนาสนใจ
หรือไม เพราะเกี่ยวของกับความชอบของแตละบุคคลอยางไรก็ตาม
หนาตาของเว็บไซตจะมีความสัมพันธกับคุณภาพขององคประกอบตาง ๆ
118. 7. การใชงานอยางไมจํากัด (Compatibility)
ควรออกแบบเว็บไซตใหผูใชสวนใหญเขาถึงไดมากที่สุด
โดยไมมีการบังคับใหผูใชตองติดตั้งโปรแกรมใด ๆ เพิ่มเติม หรือ
ตองเลือกใชบราวเซอรชนิดใดชนิดหนึ่งจึงจะสามารถเขาถึง
เนื้อหาได สามารถแสดงผลไดในทุกระบบปฏิบัติการและที่ความ
ละเอียดหนาจอตางกันอยางไมมีปญหา
119. 8. คุณภาพในการออกแบบ (Design Stability)
ถาตองการใหผูใชรูสึกวาเว็บไซตที่มีคุณภาพ ถูกตอง และเชื่อถือได
ก็ควรใหความสําคัญกับการออกแบบเว็บไซตอยางมาก
120. 9. ระบบการใชงานที่ถูกตอง (Functional Stability)
ระบบการทํางานตาง ๆ ในเว็บไซตจะตองมีความแนนอน และทํา
หนาที่ไดอยางถูกตอง
รูปตัวอยางเวบไซด
http://www.settrade.com
เปนเว็บที่มีระบบใหขอมูลที่ถูกตอง
121. ความผิดพลาดในการออกแบบเว็บไซต
• ใชโครงสรางหนาเว็บเปนระบบเฟรม
• ใชเทคโนโลยีขั้นสูงโดยไมจําเปน
• ใชตัวหนังสือหรือภาพเคลื่อนไหวตลอดเวลา
• มีที่อยูเว็บไซตที่ซับซอน (URL) ยากตอการจดจําและพิมพ
• ไมมีการแสดงชื่อและที่อยูของเว็บไซตในหนาเว็บเพจ
122. • มีความยาวของหนามากเกินไป
• ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
• ใชสีของลิงคไมเหมาะสม
• ขอมูลเกาไมมีการปรับปรุงใหทันสมัย
• เว็บเพจแสดงผลชา
123. กําหนดกลุมผูใชเปาหมาย
การทําเว็บไซตจําเปนตองรูกลุมผูใชเปาหมายที่จะเขามาใช
บริการในเว็บไซตอยางชัดเจน เพื่อที่จะตอบสนองความตองการของ
ผูใชไดอยางถูกตอง
สิ่งที่ผูใชตองการจากเว็บไซต
1. ขอมูลและการใชงานที่เปนประโยชน
2. การตอบสนองตอผูใช
3. ความบันเทิง
4. ของฟรี
