หนังสือ webdesign

¡ Ò Ã Í Í ¡ á º º à Ç º ç ä « µ

WebDesi gn ³ Ñ °¨ Ñ ¹ · â Ã · Ñ Â

Í § ¤ »Ã Ð ¡ Í º·Õ è ´Õ ¢Í § ¡ Ò Ã Í Í ¡ á ººà Ç ç ºä«µ

1 .â ¤ à § Êà Œ Ò § ·Õ è ªÑ ´ à ¨ ¹ 2 .¡ Ò Ã ã ªŒ § Ò ¹·Õ è § ‹ Ò Â 3 .¡ Ò Ã à ª× è Í Áâ  § ·Õ è ´ Õ 4 .¤ Ç Ò Áà ËÁÒ Ð ÊÁ㠹˹Œ Ò ¨ Í

ã Ê‹ Í Ð äÃ Å§ä»´Õ ¹Ð? ? ? ?

⠤à §Êà Œ Ò §¢Í §à Çç ºä«µ 1 .à Ç ç º·Õ è ÁÕ â ¤ à § Êà Œ Ò § á ººà Ã Õ Â § Å Ó ´ Ñ º 2 .à Ç ç º·Õ è ÁÕ â ¤ à § Êà Œ Ò § á ººÅ Ó ´ Ñ º¢ Ñ é ¹ 3 .à Ç ç º·Õ è ÁÕ â ¤ à § Êà Œ Ò § á ººµ Ò Ã Ò § 4 .à Ç ç º·Õ è ÁÕ â ¤ à § Êà Œ Ò § á ºº ã  á Á§ ÁØ Á

246

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

การออกแบบเว็บไซต Web Design ณัฐ จันทโรทัย

247

240

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

ผูแตง

ณัฐ จันทโรทัย

พิมพครั้งที่ 1

กันยายน 2555 จํานวน 100 เลม จัดจําหนายในระบบออนไลน มกราคม 2556 จํานวน 100 เลม จัดจําหนายในระบบออนไลน กุมภาพันธ 2558 จํานวน 500 เลม

พิมพครั้งที่ 2 พิมพครั้งที่ 3 (ปรับปรุง) ขอมูลทางบรรณานุกรม

ISBN บรรณาธิการ ออกแบบปก ออกแบบรูปเลม จัดรูปเลม พิสูจนอักษร ประสานงานการผลิต จัดพิมพโดย

ณัฐ จันทโรทัย การออกแบบเว็บไซต Web Design. พิมพครั้งที่ 3. : บริษัท สอง เกา สาม กรุป จํากัด, 2558.

239 หนา 978-616-92296-0-5 ปวริศา ตุนมาก ณัฐ จันทโรทัย ณัฐ จันทโรทัย รัฐพล มานิมนต ปริยวิศว ออนประดิษฐ ธิติ ชัยวงศ สอง เกา สาม กรุป เลขที่ 239 ถ.ไชยณรงค ต.ในเมือง อ.เมือง จ.นครราชสีมา 30000 โทรศัพท 044 951293 สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537

พิมพที่

ศูนยผลิตสิ่งพิมพดิจิตอล เลขที่ 9 ถนนแจงวัฒนะ แขวงอนุสาวรีย เขตบางเขน กรุงเทพฯ 10220

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

คํานําสํานักพิมพ เชื่อ วา หลายๆ ท า นที่ ตัด สิน ใจหยิบ หนัง สือ เล มนี้ ม าเปดอ า น เพราะว า กํา ลัง อยากจะสรา ง เว็บไซตขึ้นมาสักเว็บหนึ่งบางใชหรือไม และระหวางที่เปดดูผานๆ ก็มีคําถามยอนแยงเกิดขึ้นมาในหัวอีก มากมาย เชน ทําไมตองออกแบบเว็บไซตเอง ทั้งๆ ที่ในปจจุบันการจะมีเว็บไซต (Web Site) เปนของ ตัวเองนั้นเปนเรื่องงายมาก มีเว็บไซตสําเร็จรูปมากมายใชงบประมาณต่ํา สามารถใชงานไดภายใน 1 วัน หรือสุดทายคือหากจะสรางเว็บไซตขึ้นมาจริงๆ จะเขียนเอง จางเขียน หรือใช Open Source ที่เปน CMS, WordPress เขามาจัดการ Content ตางๆ ดี ถาเปนแบบนั้นแลว ผมแนะนําใหวางหนังสือเลมนี้ลง และ เปดกูเกิ้ลเสิรชหาเว็บสําเร็จรูปก็มีใหบริการฟรีแบบมหาศาล แตหากใครคิดจะเติบโตบนถนนสายนักออกแบบเว็บไซต คงตองลองหยิบหนังสือเลมนี้มาเปด อานทําความเขาใจไปทีละบทเรียนรูหลักการออกแบบ ซึ่งโดยทั่วไปแลว การทําเว็บไซต จะมีขั้นตอน หลักๆ อยู สองขั้นตอนครับ นั่นคือ “ขั้นตอนการออกแบบ” และ “ขั้นตอนการพัฒนา” ซึ่งคงเคยไดยิน คําศัพทวา Web Designer กับ Web Developer สองคํานี้ทํางานแตกตางกัน ตัวแรกหมายถึงคนที่ออกแบบ เว็บ สวนตัวที่สองก็คือคนที่พัฒนาเว็บนั่นเอง หนังสือเลมนี้จะมุงเนนทฤษฎีพื้นฐานวาดวยการออกแบบ ที่เริ่มตั้งแตการเขาใจถึงองคความรู หลายอยางที่เกี่ยวกับเว็บไซต อาทิเชน โครงสรางของเว็บไซต ภาษา การแสดงผล รวมถึงหลักการ ออกแบบ องคประกอบเรื่องสี การจัดตําแหนง การคํานึงถึงประสบการณของผูใช การรูจักเลือกฟอนตที่ เหมาะสม การใชโปรแกรมที่เกี่ยวของ เปนตน การออกแบบเว็บไซต Web Design เลมนี้ กลั่นกรองจากความคิดของ อ.ณัฐ จันทโรทัย ที่เปน นักออกแบบโดยตรงที่มีผลงานทั้งออกแบบเว็บไซต และยังเปนกราฟกดีไซเนอรมืออาชีพ ดวยวิธีการ เขียนที่เขาใจงาย หนังสือเลมนี้จึงเหมาะสําหรับเปนคูมือเริ่มตนอาชีพ Web Designer สอง เกา สาม กรุป

241

242

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

คํานํา (พิมพครั้งที่ 3) เมื่อหลายปกอนมีนักศึกษามาบนแบบนอยใจวาหาหนังสือเกี่ยวกับการออกแบบเว็บไซต ไมไดเลย เพราะในแผงหนังสือมีแตหนังสือคูมือการใชงานโปรแกรมตางๆ ซึ่งในเรื่องการออกแบบ และ วิธีการจัดวางองคประกอบตางๆ ในเว็บไซตนั้นจะมีหลักคิดและวิธีออกแบบอยางไร เนื่องจากหลายคนมี ใจรักในการทํางานดานนี้ หรือบางคนเรียนมาทางดานโปรแกรมเมอรไมรูหลักการออกแบบโดยตรง ไมมี คูมือ มีตําราที่อานงายๆ เขาใจงายๆ ไวหยิบจับเวลาทํางาน หรือคิดออกแบบงาน การออกแบบเว็บ (Web Design) เปนคําศัพทที่มีความกํากวมในความหมาย สําหรับ ผูเชี่ยวชาญดานเว็บใหความหมายแตกตางกันมาตลอด กลุมหนึ่งใหความหมายวา เปนโปรแกรมฟงกชัน การใชง านภายในเว็ บ อี กกลุ มหนึ่ ง ให ค วามหมายวา การออกแบบเปน เหมื อ นการพั ฒ นาสว นหน า แสดงผลของเว็บใหดูดี สวยงาม ดึงดูด และนําเสนอความเปนเอกลักษณของหนวยงานได ผูเขี ย นจึง คิ ดวา น า จะมี ห นัง สื อ สัก เลม เลมที่ จะสอนใหเ ห็น เรื่ อ งของศิลปะ เรื่ อ งของการ ออกแบบ โดยเฉพาะการออกแบบเว็บไซตที่กําลังเปนอาชีพที่ไดรับความนิยมในปจจุบันนี้ หนังสือเลมนี้ จึงถูกเขียน และปรับปรุงเนื้อหา เพิ่มคุณคาโดยใชรูปประกอบการอธิบายใหเขาใจงาย ในสวนของรายละเอียดของหนังสือเลมนี้ จะปูพื้นฐานตั้งแตความรูเบื้องตนเกี่ยวกับเว็บไซต อินเทอรเน็ต ลักษณะเว็บไซตตางๆ ใหเขาใจ สําหรับคนทั่วไปที่สนใจงานการออกแบบเว็บไซตจนกาวเขา มาเปนนักออกแบบ ภายในหนังสือแตละบทจะวางแนวคิดการออกแบบ สอนวิธีคิด วิธีการสรางงาน และ เทคนิคตางๆ ในการออกแบบเว็บไซต เพื่อประโยชนในการออกแบบทํางานจริงๆ สวนแรก จะเปนเรื่องเชิงเทคนิคที่การสรางเอกสารเว็บเพจเพื่อนําเสนอขอมูลบนอินเทอรเน็ต นั้นจะเกิดจากการเขียนโคดคําสั่งตางๆ เพื่อควบคุมการทํางาน ซึ่งปจจุบันมีเทคโนโลยีหลายตัวที่ถูก พัฒนาขึ้นมาเพื่อใชในการสรางหรือกําหนดรูปแบบของเว็บไซต

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

สวนที่ 2 จะเปนหลักในการออกแบบ ไมวาจะเปนการคิดในการออกแบบ การจัดองคประกอบ เรื่องของสี การใชภาพ การใชตัวอักษร ซึ่งเปนพื้นฐานทางศิลปะที่ควรตองเขาใจ และมีตัวอยางเปน กรณีศึกษา ซึ่งเปนหลักในการทํางานออกแบบเว็บไซต จริงๆ แลวหนังสือเลมนี้เกี่ยวของกับเรื่องศิลปะการออกแบบ ซึ่งทฤษฎีศิลปะมาเปนแนวทาง หลักในการยกตัวอยางอธิบาย ดังนั้นทุกๆ สวนของหนังสือเลมนี้ อาจมีสวนที่เห็นดวยและไมเห็นดวยจาก ผูอาน หากมีสิ่งผิดพลาดประการใด ผูเขียนขอนอมรับคําติชม และกราบขออภัยมา ณ ที่นี้ นอกจากนี้ผูเขียนขอขอบพระคุณทานเจาของหนังสือทุกทานที่ไดนํามาอางอิง ขอขอบคุณ Web Designer ทั่วโลกที่สรางสรรคผลงานดีๆ เผยแพร และเจาของผลงานเว็บไซตที่นํามาใชประกอบเปน ตัวอยางในหนังสือ หวังวาหนังสือเลมนี้ คงอํานวยประโยชน และเปนแนวทางในการออกแบบเว็บไซต ตลอดจนเอื้อประโยชนตอการศึกษาคนควาในศาสตรที่เกี่ยวของกับการออกแบบเว็บไซตตามสมควร ณัฐ จันทโรทัย

243

244

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

สารบัญ บทที่ 1

บทที่ 3

ความรูเบื้องตน เกี่ยวกับการออกแบบเว็บไซต

กระบวนการออกแบบเว็บไซต

Web Design คืออะไร พฤติกรรมตองรูกอนเปน Web Designer อินเทอรเน็ตคืออะไร ความรูเกี่ยวกับเว็บไซต ลักษณะเว็บไซตในปจจุบัน ประเภทของเว็บไซตในปจจุบัน ระบบชื่อโดเมน

2 6 8 10 14 16 22

บทที่ 2 หลักการพื้นฐานเกี่ยวกับ การออกแบบเว็บไซต

ความหมายของการออกแบบเว็บ แนวคิดในการออกแบบหนาเว็บ ทฤษฎีการออกแบบเว็บไซต ขอผิดพลาดในการออกแบบเว็บไซต

30 31 33 46

กําหนดเปาหมายและวางแผน ออกแบบเว็บเพจและเตรียมขอมูล การพัฒนาและปรับปรุงเว็บไซต เผยแพรและสงเสริมใหเปนที่รูจัก

52 54 66 67

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

การทํางานของไคลเอ็นต-เซิรฟ  เวอร ภาษาที่ใชในการสรางเว็บไซตพื้นฐาน จะออกแบบขนาดเทาไหร การออกแบบเว็บไซตใหตอบสนอง ทุกหนาจอ การออกแบบเว็บไซตสมัยใหม

73 74 82 85 92

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่ 5

บทที่ 7

สีกับการออกแบบเว็บไซต

ตัวอักษรกับการออกแบบเว็บไซต

ความสําคัญและประโยชนของสี รูปแบบชุดสีพื้นฐานในการออกแบบ การวางโครงสี รูปแบบชุดสีสําหรับการออกแบบ จิตวิทยาสีในการออกแบบเว็บไซต หลักการเลือกใชสีในการออกแบบ

104 107 112 118 124 126

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ความสําคัญและประโยชนของภาพ 136 ชนิดของภาพที่ใชในเว็บเพจ 137 ขอพิจารณาในการเลือกใชรูปภาพ 140 การสรางภาพเพื่อใชในการออกแบบ 146 รูปภาพในเว็บไซต ใชอยางไรใหถูกตอง 160

อักษรและรูปแบบตัวอักษร ตัวอักษรกับการออกแบบ ปญหาการใชตัวอักษรในเว็บไซต และแนวทางแกไข

166 177 197

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

ความรูเกี่ยวกับการอัพโหลดเขาสูระบบ อินเทอรเน็ต 204 การขอพื้นที่บนเว็บผูใหบริการ 206 การสมัครขอพื้นที่เว็บไซตที่ให บริการฟรี 210 การเชื่อมโยงกับเครือขาย สังคมออนไลน 220 บรรณานุกรม

234

245

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

7

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

บทที่

ความรูเบื้องตนเกี่ยวกับ การออกแบบเว็บไซต

ปฏิเสธไมไดเทคโนโลยีการสื่อสารพัฒนาไป อยางรวดเร็ว โดยเฉพาะในสวนของโลกอินเทอรเน็ต ซึ่งเชื่อมตอกับอุปกรณสื่อสารเคลื่อนที่ที่หลากหลาย ไดเปลี่ยนพฤติกรรมของมนุษยในยุคปจจุบันตางจาก อดีตไปอยางสิ้นเชิง ตัวอยางชัดที่สุดก็คือ พฤติกรรม การอานและการคนหาขอมูลที่เราตองการ จากที่รับ ขาวสารผานทางหนังสือพิมพ นิตยสาร วิทยุ โทรทัศน (สื่อออฟไลน) ถูกแทรกดวยขาวสารผานสื่อออนไลนที่ รวดเร็ ว กว า และอั พ เดตได ง า ยกว า ผ า นทางหน า เว็บไซต และสื่อสังคมออนไลน

1

2

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

นักออกแบบกราฟก ตอ งปรั บตัว เพื่ อ ให เข ากับ สื่อยุ คใหม โดยเฉพาะนัก ออกแบบในวงการ เว็บไซตเปนอาชีพที่มีความตองการอยางตอเนื่อง และยังเปนความตองการที่เรียกรองคุณสมบัติของ นักออกแบบที่มากกวาสื่อชนิดอื่น คุณสมบัติของ Web Designer ไมเปนแคเพียงใชโปรแกรมการ ออกแบบพื้นฐานไดเทานั้น ยังตองการความรูเกี่ยวกับอินเทอรเน็ต และที่สําคัญตองเปนนักสรางสรรค ที่รูจักผลิตชิ้นงานใหตอบโจทยการตลาดที่ครบเครื่องและรอบดาน

Web Design คืออะไร

“เว็บดีไซน (Web Design)” คํานี้เริ่มคุนหูตั้งแตเว็บไซตเปนที่นิยมแพรหลายในการ เผยแพรขอมูลขาวสาร เว็บดีไซนเปนอาชีพที่พัฒนามาจาก นักออกแบบกราฟก หรือกราฟก ดีไซน โดยนิยามของกราฟกดีไซนที่บันทึกจากสถาบัน AIGA ( American Institute of Graphic Arts ,1941) โดย Jessica Helfand นักเขียน คอลัมนนิสต และผูบรรยายเกี่ยวกับ กราฟกดีไซนไดนิยามเอาไววา "กราฟกดีไซนคือการรวมกันของคําหลายๆ คํา, ภาพหลายๆ ภาพ โดยอาจเปนภาพชนิดตางๆ ไมวาจะเปน ตัวเลข แผนผัง ภาพถาย หรือภาพประกอบ" สิ่ง ตางๆ เหลานี้ จะเกิดเปนผลสําเร็จหรือผลงานที่ดีไดก็ดวยความชัดเจน มีเอกลักษณหรือมี ความเฉพาะตั ว ของผู อ อกแบบ ซึ่ ง เหมื อ นทํ า หน า ที่ เ ป น ผู ป ระพั น ธ ด นตรี ขึ้ น มาโดยใช องคประกอบตางๆ ทางศิลปะเปนสวนผสม (ปาพจน หนุนภักดี. 2555) ผูที่ทําหนาที่ออกแบบจะมีหนาที่ที่นําสิ่งตางๆ ที่กลาวมา มาจัดรวมกันไวดวยวิธีใดวิธี หนึ่ง เพื่อใหผลลัพธที่ออกมาเปนงานที่ดูสนุกสนาน , ดูนาแปลกใจ ดึงดูดใจ หรือสรางความ จดจําใหผูพบเห็น

ภาพที่ 1.1 ความแตกตางระหวางกราฟกดีไซน และเว็บดีไซน

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

สวนเว็บดีไซน (Web Design) คือผูที่ทํางานดานการออกแบบ งานกราฟฟค การออกแบบเว็บไซต ให ตรงความตองการ ตอบสนองความตองการในการใชงาน ในหลายบริษัทที่ทําธุรกิจทางดานสรางและ ออกแบบเว็บไซตโดยตรงจะตองมีพนักงานที่ทําหนาที่ในการออกแบบจัดทําเรื่องราวที่เกี่ยวกับกราฟก สีสัน เลยเอาท ของหนาเว็บเพจทั้งหมด ตามที่ไดทําการกําหนดทิศทางรูปแบบของเว็บไวแลว หรืออาจจะนําเสนอ สิ่งสรางสรรคใหลูกคาพิจารณา โดยงานสวนนี้ก็เปรียบไดเหมือนกับ มัณฑนากร ที่มีหนาที่ออกแบบตกแตง ภายในรานคาใหมีความสวยงามนั่นเอง เว็บดีไซน ควรมีความคิดสรางสรรคมี สามารถใชงานโปรแกรม ประเภท กราฟก ดีไซน ไดอยางคลองตัว และเปน นักสรางสรรคที่ดี ไมลอกผลงานผูอื่น หรือหากมีการนํา กราฟกจากที่อื่นมาใชควรใหเครดิตผูสรางสรรค แตในบริษัทบางแหงอาจรวมคนเขียน Code HTML ใหทํา Graphic ไปดวย

3

4

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

การทํางานของ Web Designer

ภาพที่ 1.2 ขบวนการทํางานของนักออกแบบเว็บไซต

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

การออกแบบเว็บไซต มีศิลปะของการออกแบบที่เปนกฎเกณฑอยูอยางหนึ่ง คือ ตองตั้งอยูบนพื้นฐานของพาณิชยศิลป การออกแบบนั้นตองเปนงานที่ขายได ถือ วาเปนหัวใจของการออกแบบ สําหรับ Web Designer หรือ นักออกแบบเว็บ มีกฎเกณฑและมาตรฐานใน การทํางานแตละแหงตางๆ กันออกไป แนวคิดและหลักการของการออกแบบเว็บไซต นั้นก็มีอยูหลายสํานัก ผูเขียนนํามาสรุปไวเปนแนวทางจากประสบการณในการ ทํางานในมุมมองนักออกแบบ ที่เชื่อวาการออกแบบทุกชิ้นงานนั้นคือการสรางสรรค ที่ตองใชทักษะ ความคิดดังนี้ 1. สารที่ตองการจะสื่อ ขั้นนี้คือ การวิเคราะหโจทย นักออกแบบตองทราบ กอนวางานนี้เราตองการจะบอกอะไร จุดเริ่มตนของงานออกแบบ คือ นําปญหามา เปนโจทย ซึ่งโจทยที่วานั้นมักจะไดมาจากความตองการของลูกคาวา เราจะทํางาน อะไร ซึ่งเปนเรื่องเบื้องตนในการออกแบบที่เราจะตอง รูกอนวา จะกําหนดใหงาน ของเราบอกอะไร (Inform) เชนเผยแพรประชาสัมพันธ หรือ เพื่อความบันเทิง สินคา มีบุคลิกอยางไร และใครคือกลุมเปาหมาย เปนตน 2. แนวคิดในการออกแบบ ขั้นนี้เปนกระบวนการสรางกรอบแนวคิด หา ไอเดียที่มีความสัมพันธกับสินคาและการรับรูของผูชม คือ การใชเทคนิคตางๆ เพื่อ สรางสรรค แนวความคิดหลักในการออกแบบ ควรมีลักษณะที่สามารถแกปญหา สําคัญไดอยางตรงประเด็น 3. เทคนิคการออกแบบ (ศาสตรและศิลป) เปนขั้นที่นักออกแบบตองดึง ทักษะการออกแบบ การจัดวางองคประกอบ เทคนิค ภาพและเสียง การใชโปรแกรม ตางๆ รวมถึงการจัดโครงสรางและความเขาใจในภาษาพื้นฐาน เชน HTML, CSS เพื่อ การสรางสรรคเว็บไซตใหสมบูรณ 4. การประเมิน เปนขั้นสุดทาย เพื่อดูวาผลงานออกแบบเปนอยางไร ตอบ โจทยการออกแบบหรือไม และนํามาพัฒนาปรับปรุง ขั้นตอนที่กลาวมานั้นเปนเพียงโครงสรางใหญๆ ที่จําลองขึ้นมาเพื่อใหผูกาว เขามาสูอาชีพนักออกแบบเว็บไซตไดมองเห็นภาพรวมทั้งระบบ ซึ่งในความเปนจริง ของการทํางานแลว ในแตละขั้นมีรายละเอียดที่จะกลาวในบทตอไป

5

6

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

พฤติกรรมตองรูกอนเปน Web Designer

เมื่อสังคมกาวเขาสูยุคดิจิตอล พฤติกรรมการใชงานเว็บไซตบนโลกที่เชื่อมตอกันดวยเครือขาย อินเทอรเน็ตเริ่มเปลี่ยนไป ตามแตอุปกรณกรสื่อสารของแตละคน นักออกแบบควรรูวาคนจะเขามาใชงาน เว็บไซตในรูปแบบไหนดวยเชนกัน เพราะปกติผูสรางเว็บไซตนั้นคิดวา ผูใชเว็บตองเพงมองทุกรายละเอียด ในแตละเว็บ ตั้งใจอานทุกตัวอักษรที่เลือกสรรมา ผูออกแบบมักคิดแลวคิดอีกในการจัดวางองคประกอบ ทุกๆ อยาง และใหน้ําหนักกับลิงคสําคัญ เพื่อจะชี้นําใหผูใชกดลิงคนั้นๆ สตีฟ ครุก (Steve Krug, 2006 : 21) ไดศึกษาติดตามพฤติกรรมผูใชงานเว็บไซตตางๆ วาเมื่อถึง เวลาที่ผูใชงานจริงๆ ของสังคมอันเรงรีบในปจจุบัน ผูใชเหลานั้นเพียงแคมองแตละหนาแบบผานๆ ตั้งใจ อานในบางสวน และกดลิงคแรกๆ ที่เห็นสะดุดตา หรือกดไปมั่วๆ เพราะหาอะไรที่ตองการไมเจอ โดย ปกติแลวจึงเหลือขอมูลในเพจจํานวนมากที่ไมเคยถูกสนใจเปดอาน นักออกแบบคิดเพียงวา เรากําลังสรางโบรชัวรสินคาดี ๆ สักใบ ในขณะที่ความเปนจริง ผูใชงาน นั้นมองหนาเว็บเพจของเราเหมือนมองผานปายบิลบอรดขณะขับรถดวยความเร็ว 100 กิโลเมตรตอ ชั่วโมง

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ทําไมเราจึงมีพฤติกรรมการอานอานแบบผานๆ เพราะเราเรงรีบอยูตลอดเวลา โดยปกติแลวเวลาเราเขาใชงานเว็บไซตมักจะไมคอยเสียเวลา อยูกับมันเยอะเกินไป จึงขยับตลอดเวลาเพื่อจะไปดูเว็บอื่นๆ อีกจํานวนมหาศาลในโลกอินเทอรเน็ต เพราะรูวาไมจําเปนตองอานทุกอยาง พฤติกรรมของเรานั้นการเขาใชงานในแตละเว็บนั้น มักจะมีสิ่งสนใจอยูเพียงนิดเดียว เราจึงพยายามมองหาสิ่งที่เราตองการ เพราะเราทํ า ในสิ่ง เหล า นี้ไ ด ดี พฤติ ก รรมการอ า นแบบผ า นๆ ถู ก ปลู ก ฝง มาตลอดชี วิ ต ทั้ ง หนังสือพิมพ นิตยสาร เราพลิกเขาไปมองหาเฉพาะสิ่งที่เราตองการอานเทานั้น ดันนั้นนักออกแบบเว็บไซตตองคํานึงถึงพฤติกรรมดังกลาววา

คนใชเว็บจะโฟกัสเฉเพาะ “คํา” หรือ “ขอความ” ที่ตรงกับสิ่งที่พวกเขาสนใจอยู

ภาพที่ 1.3 พฤติกรรมผูใชงานเว็บไซต ที่มา : http://www.pnru.ac.th , http://www.thehighspa.co.th/

7

8

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

อินเทอรเน็ตคืออะไร

กอนเขาสูโลกของการออกแบบเว็บไซต ก็ตองเขาใจโลกอินเทอรเน็ตใหถอง แท คําวา “Internet” นั้นมีการเขียนเปนภาษาไทยอยูหลายแบบ ไดแก อินเทอรเน็ต อินเทอรเน็ท อินเตอรเน็ต อินเตอรเน็ท แตคําที่ราชบัณฑิตยสถานบัญญัติไวนั้น คือ อินเทอรเน็ต อินเทอรเน็ต (Internet) หรือเรียกสั้นๆ วา เน็ต (Net) คือเครือขายที่ เชื่อมโยงเอาเครือขายคอมพิวเตอรยอย ๆ ทั่วโลก เขาไวดวยกัน “เครือขาย” คือ ชื่อ เรียกกลุมของคอมพิวเตอร และอุปกรณคอมพิวเตอร ที่เชื่อมตอกัน เพื่อใหสามารถ แบ ง ป น ข อ มู ล ข า วสาร ทรั พ ยากรคอมพิ ว เตอร และข อ มู ล ต า งๆ จากทั่ ว โลก อินเตอรเน็ตเปรียบเหมือนกับตัวแมงมุมกลางใยแมงมุมขนาดมหึมาซึ่งใยแมงมุม แตละเสนนําขอมูลจากคอมพิวเตอรเครื่องนํามาสูคอมพิวเตอรของเรา อินเทอรเน็ต คือ เครือขายคอมพิวเตอร ระบบตางๆ ที่เชื่อมโยงกัน มาจากคําวา Inter Connection Network อินเทอรเน็ต (Internet) เปนระบบเครือขายคอมพิวเตอร ที่มีขนาดใหญ เครื่องคอมพิวเตอรทุกเครื่องทั่วโลก สามารถติดตอสื่อสารถึงกันได โดยใช ม าตรฐานในการรั บ ส ง ข อ มู ล ที่ เ ป น หนึ่ ง เดี ย ว หรื อ ที่ เ รี ย กว า โปรโตคอล (Protocol) ซึ่งโปรโตคอล ที่ใชบนระบบเครือขายอินเทอรเน็ต มีชื่อวา ทีซีพี/ไอพี (TCP/IP : Transmission Control Protocol / Internet Protocol) ลักษณะของ ระบบอินเทอรเน็ต เปนเสมือนใยแมงมุม ที่ครอบคลุมทั่วโลก ในแตละจุดที่เชื่อมตอ อินเทอรเน็ตนั้น สามารถสื่อสารกันไดหลายเสนทาง ตามความตองการ โดยไม กําหนดตายตัว และไมจําเปนตองไปตามเสนทางโดยตรง อาจจะผานจุดอื่น ๆ หรือ เลือกไปเสนทางอื่นไดหลาย ๆ เสนทาง การติดตอ สื่อสาร ผานระบบเครือขาย อินเตอรเน็ตนั้นอาจเรียกวา การติดตอ สื่อสารแบบไรมิติ หรือ Cyberspace ดัง ภาพที่ 1.4

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ภาพที่ 1.4 Network Diagram

9

10

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ความรูเกี่ยวกับเว็บไซต

การสรางเว็บไซต คือ การออกแบบสรางหนาเอกสารอีเล็กทรอนิกส เพื่อ นําเสนอขอมูลความรูตางๆ ขององคกรหรือขอมูลสวนตัว ไปแสดงในเครือขาย อินเทอรเน็ตแสดงออกทางหนาจอคอมพิวเตอรหรือสื่ออื่นๆ ที่สามารถแสดงภาพได โดยการออกแบบที่กลาวถึงทั่วไปจะคํานึงถึงการแสดงผลที่จอคอมพิวเตอรเทานั้น การสงขอมูลสื่อสารบนอินเทอรเน็ต มีคําศัพทเฉพาะที่ใชเรียกชื่องานหรือโปรแกรม ที่เกี่ยวของ ซึ่งตองทราบกอนเพื่อความเขาใจเมื่อมีการกลาวถึงคําศัพทเหลานั้น คําศัพทที่จะพบมากในการสรางเว็บ มีดังนี้ เวิลดไวดเว็บ (World Wide Web) หรือ WWW ตามราชบัณฑิตยสถาน บัญญัติไว เรียกอยางยอวา เว็บ (web) เปนเอกสารแบบหนึ่งที่ใชในการแสดงผล บนจอคอมพิวเตอร เอกสารแตละหนาเรียกวา เว็บเพจ (Web Page) จะแสดง ขอมูลตางๆ โดยสวนใหญแลวเว็บเพจจะรวมกันอยูใน เว็บไซต (Web Site) ซึ่งเปน แหล ง ข อ มู ล หรื อ บริ ก ารอย า งหนึ่ ง บนอิ น เทอร เ น็ ต โดยจะประกอบด ว ยระบบ เชื่อมโยงหรือลิงคที่จะนําไปสูเนื้อหาสวนอื่นๆ ภายในเว็บ (ธวัชชัย ศรีสุเทพ, 2548 : 27) เว็บไซต(Web Site) คือ คําที่ใชเรียกกลุมของเว็บเพจ โดยมีการลิงคหรือ เชื่อมโยงจากรายการในหนาโฮมเพจ (ประชา พฤกษประเสริฐ, 2550 : 5) สวน ใหญมักใชเรียกเว็บไซตที่มี ขนาดใหญ และมีการจดทะเบียนชื่อเว็บไซตไวแลว เชน http://www.pccpnru.net/ เปนตน โฮมเพจ (Home Page) คือ คําที่ใชเรียกหนาแรกของเว็บไซตที่ประกอบ ไปดวยเมนู และเนื้อหาตางๆ คลายกับหนาปกนิตยสาร ซึ่งถามีการออกแบบหนา โฮมเพจใหสวยงาม และนาสนใจ ก็สามารถดึงดูดผูชมใหเขามาอานขอมูลภายใน โฮมเพจไดอีกทางหนึ่งดวย

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

11

เว็บเพจ (Web Page) คือ หนาเอกสารที่ใชแสดงขอมูลในรูปแบบตางๆ บนเว็บไซต โดยขอมูลจะ ถูกสรางขึ้นจากภาษา HTML (Hypertext Markup Language) แตละเว็บเพจสามารถประกอบดวย ขอความรูปภาพ เสียง และวิดีโอ (ปจจุบันเว็บไซตเริ่มเปลี่ยนมาใชภาษา XHTML เพื่อใหรองรับกับ อุปกรณและเทคโนโลยีใหมๆ ) ซึ่งจะเปรียบเสมือนหนากระดาษแตละหนาที่มีเรื่องราวเนื้อหาตางๆ บรรจุ อยูในหนังสือหรือนิตยสาร เพียงแตจะแตกตางกันตรงที่จะมีการแสดงผลผานทางเว็บบราวเซอรบน อินเทอรเน็ต และสามารถเชื่อมโยง (Link) ถึงกันไดทั้งในเว็บเพจเดียวกัน หรือตางเว็บเพจ (สุธี พงศาสกุลชัย และณรงค ล่ําดี, 2551 :116)

Web page

Web site

Home page ภาพที่ 1.5 กลุมของเว็บไซต ซึ่งประกอบดวย โฮมเพจ และเว็บเพจ ของเว็บไซตสาขาวิชาศิลปกรรม

12

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

สรุปวา เว็บไซต (Web Site) คือ แหลงที่เก็บรวบรวมขอมูลเอกสารและสื่อประสมตางๆ เชน ภาพ เสียง ขอความ ของแตละบริษัทหรือหนวยงานโดยเรียกเอกสารตางๆ เหลานี้วา เว็บเพจ (Web Page) และเรียกเว็บหนาแรกของแตละเว็บไซตวา โฮมเพจ (Home Page) หรืออาจกลาวไดวา เว็บไซตก็คือเว็บ เพจอยางนอยสองหนา ซึ่งเชื่อมโยงกันผานทางไฮเปอรลิงก (Hyper Links) สวนใหญจัดทําขึ้นเพื่อ นําเสนอขอมูลผานทางเวิลดไวดเว็บ ถาหากจะเปรียบเทียบความสัมพันธของเว็บไซต โฮมเพจ และเว็บเพจ กับหนังสือหนึ่งเลม เพื่อใหเกิด ความเขาใจ สามารถเปรียบเทียบไดดังนี้ ความหมาย

เว็บไซต (Web Site)

โฮมเพจ (Home Page)

เว็บเพจ (Web Page)

คือ กลุมของเว็บเพจหลายๆ หนา เว็บไซต หมายถึงแหลงขาวสาร ขอมูลของบุคคล องคกร หรือ หนวยงานตางๆ บนระบบ อินเทอรเน็ต

คือ เว็บเพจหนาแรกของเว็บไซต จะมีความสวยงามเปนพิเศษเพื่อดึงดูด ความสนใจของผูเขาชมเว็บไซต และมี จุดเชื่อมโยงไปยังเว็บเพจหนาตางๆ

เปรียบเทียบเปนหนังสือหนึ่งเลม หนังสือหนึ่งเลม เปรียบเปนหนังสือรวมขอมูล ความรู เรื่องตางๆ ของบุคคลองคกร หรือ หนวยงานตางๆ

หนาปกหนังสือ หนาปกของหนังสือ ที่ตองออกแบบให สวยงามเพื่อดึงดูดความสนใจของ ผูอานและ มีหวั ขอสําคัญที่อยูภายใน หนังสือ เพื่อแจงใหผูอานทราบหัวขอ สําคัญตาง ๆ คลายกับจุดเชื่อมโยงใน เว็บเพจนั้นเอง

หนาตาง ๆ ในหนังสือ คือ หนาเอกสารตางๆ ที่ใชเผยแพร ขอมูล แตละหนาในหนังสือภายในเลมแยก ขาวสาร ของบุคคล องคกร หรือ หนวยงาน ออกเปนบทๆ เพื่อนําเสนอขอมูลหรือ เนื้อหาสาระตางๆ โดยประกอบไปดวย ตางๆ ขอความ รูปภาพ ตาราง ขอมูล เปนตน

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

เว็บบราวเซอร (web browser) เบราวเซอร หรือ โปรแกรมดูเว็บ คือ โปรแกรมที่ใชเปดเว็บเพจ ในอินเทอรเน็ต สามารถสงไฟลขอมูลไปยังเครื่องคอมพิวเตอรที่เชื่อมตอในอินเทอรเน็ตไดโดยการแปล คําสั่งภาษา HTML แลวแสดงผลออกทางหนาจอไดทั้งตัวอักษร รูปภาพ ภาพเคลื่อนไหว เสียง หรือ วีดิทัศน โปรแกรมบราวเซอรในปจจุบันมีหลายโปรแกรม เชน Internet Explorer , Mozilla Firefox , Opera , Safari เปนตน

ภาพที่ 1.6 โปรแกรมบราวเซอรในปจจุบัน

ภาษา HTML (Hyper Text Markup Language) เปนโปรแกรมภาษาที่ใชเขียนเว็บเพจ ซึ่ง สามารถสรางการเชื่อมโยง (Link) ไปยังหนาเว็บเพจอื่นๆ ได เรียกการเชื่อมโยงนี้วา Hypertext ในการ เขียนเว็บจะมีการใชโคดคําสั่งของโปรแกรมภาษาอื่นมาใชรวมกับภาษา HTML ไดเรียกวา Script เพื่อ เพิ่มเทคนิค สีสันใหกับหนาเว็บ เชน Java , Java Script , MySQL , PHP, ASP เปนตน ซึ่งจะกลาว รายละเอียดในบทตอๆ ไป ปจจุบันมีเครื่องมือสามารถสรางเว็บไซตไดอยางงายดวยโปรแกรมสําเร็จรูปในการออกแบบ ซึ่ง โปรแกรมเหลานี้มีความสามารถแบบ WYSIWYG (What You See Is What You Get) อานวา วิสสิวิก คือ โปรแกรมสรางเว็บทั้งหลายที่ สามารถออกแบบไดโดยนําขอความ รูปภาพ หรืองานกราฟก มาจัดวาง บนหนาเว็บที่ออกแบบ แลวสั่งแสดงผลดวยโปรแกรมบราวเซอรจะปรากฏผลบนเว็บเพจเหมือนการ ออกแบบที่จัดวางไวในโปรแกรมสรางเหลานั้น ทําใหการสรางเว็บเพจงาย และรวดเร็ว และโปรแกรม เหลานั้นจะสรางโคดคําสั่ง HTML ใหดวย ทําใหไดรับความนิยมใชงานมาก ตัวอยางโปรแกรมแบบ WYSIWYG เชน FrontPage, Dream weaver , Home site, Namo Editor เปนตน

13

14

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ภาพที่ 1.7 โปรแกรมสรางเว็บแบบ WYSIWYG

ลักษณะเว็บไซตในปจจุบัน

ยุคของอินเทอรเน็ตกําลังจะกาวไปสูยุคที่ 3 โดยในยุคแรก หรือ Web 1.0 นั้นเปนเรื่องของการที่ ผูให บริการนําเสนอขอมูลใหกับบุคคลทั่วไป ผูอานมีสวนรวมนอยมากในการเติมแตงขอมูล แตในยุคที่ 2 หรือ Web 2.0 บุคคลทั่วไปคือผูสรางเนื้อหา และนําเสนอขอมูลตางๆ มีการแบงปนความรูซึ่งกันและกัน อยางแทจริงดวย การสรางเสริมขอมูลสารสนเทศใหมีคุณคาและมีขอมูลที่ถูกตองที่สุด ตัวอยางที่เห็นได ชัด และเปนที่รูจักกันดี อยาง Wikipedia นั้น ไดทําใหความรูถูกตอยอดไปอยูตลอดเวลา ขอมูลทุกอยาง ไดมาจากการเติมแตงอยางไม มีที่สิ้นสุด เกิดจากการคานอํานาจของขอมูลของแตละบุคคลทําใหขอมูล นั้นถูกตองมากที่สุดและจะถูกตองมาก ขึ้นเมื่อเรื่องนั้นถูกขัดเกลามาเปนเวลายาวนาน แตสําหรับยุคที่ 3 ที่ Web 3.0 กําลังจะเขามามีอิทธิพล เปน การนําแนวคิดของ Web 2.0 มาทําให Web นั้นสามารถจัดการ ขอมูลจํานวนมากๆ ไดดียิ่งขึ้น ซึ่งทุกวันนี้ผูใช ทั่วไปที่เปนผูสรางเนื้อหา ไดเพิ่มจํานวนมากขึ้น เชน การ เขียน Blog, การแชรรูปภาพและไฟลมัลติมีเดียตางๆ Web 1.0 มีลักษณะเปน Static Web คือมีการนําเสนอขอมูลทางเดียว (one-way communication) ดวยการแปลงขอมูลขาวสารที่มีอยูรอบตัวเราใหอยูในรูปของดิจิตอล (Digital) เชน หนังสือพิมพ นิตยสาร หรือการโฆษณาตามหนาเว็บไซต โดยผูใชสามารถอานไดแตไมสามารถเขารวมในการสราง ขอมูลได Web 2.0 เนนใหผูใชมีสวนรวมในการสรางสรรค (Co- Creation) ลงบนเว็บไซตรวมกัน สามารถโตตอบกับขอมูลที่อยูบนเว็บไซตได (Interactivity) มีลักษณะเปน Dynamic Web ที่ผูใชสามารถ สรางเนื้อหา (Content) แลกเปลี่ยนและกระจายขอมูลขาวสารเพื่อแบงปนถึงกันไดทั้งในระดับบุคคล กลุมและองคกร Web 3.0 จะกลายเปน อาน/เขียน/จัดการ ไดสามอยางพรอมกัน (read-write-execute) คราวนี้ ความสามารถของมันก็จะมากมายมหาศาล แทนที่จะเขาไปอานและเพิ่มขอมูล เราก็จะสามารถปรับแตง

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ทําใหขอมูลมีจํานวนมหาศาล ทําใหผูสรางจําเปนตองมีความสามารถในการจัดการขอมูล ดังกลาวอยาง หลีกเลี่ยงไมได โดยเอาขอมูลตางๆ เหลานั้นมาจัดการใหอยูในรูปแบบMetadata ที่หมายถึงขอมูลที่บอก รายละเอียดของขอมูล (Data about data) ทําใหเว็บกลายเปน ลักษณะ ที่เรียกวา Semantic Web คือ เทคโนโลยี ที่ ใ ช ใ นการ จั ด เก็ บ และ นํ า เสนอเนื้ อ หาแบบมี โ ครงสร า ง รวมถึ ง สามารถที่ จะ วิเคราะห จําแนก หรือจัดแบงไดวา ขอมูลที่ปรากฏนั้น มีความสัมพันธ กับขอมูลอื่นๆในแตละระดับ อยางไร กลาวคือ เปนการจัดเก็บและนําเสนอ แบบมี Hierarchy นั่นเอง

ภาพที่ 1.8 ลักษณะของเว็บไซต

15

16

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ประเภทของเว็บไซต ในปจจุบัน

การที่ จ ะสามารถออกแบบและใช งานเว็ บ ไซต ใ ห เ กิ ด ประโยชน สู ง สุ ด ได นั้ น จําเปนอยางยิ่งที่จะตอง เขาใจถึงลักษณะ ของเว็ บ ไซต และจํ า แนกแยกแยะได ว า เว็ บ ไซต เ หล า นั้ น มี ค วามแตกต า ง หรื อ เหมือ นกันประการใด รวมถึงมี หนา ที่หลั ก เฉพาะตั วอยางไรบ าง เว็บไซตสามารถแบ ง ออกไดเปนกลุมใหญๆ ได 9 ประเภทตาม ลักษณะของเนื้อหา และรูปแบบของเว็บไซต กลุมเว็บไซตทั้ง 9 ประเภท ไดแก

1. เว็บสวนตัว (personal site) เว็บสวนตัวอาจเปนเว็บของคนๆ เดียว เพื่อน ฝูง หรือครอบครัว ก็ได โดยอาจจัดทําขึ้น ด ว ยเหตุ ผ ลที่ แ ตกต า งกั น เช น นํ า เสนอ ผลงาน โชวรูปภาพ เขียนไดอารี่ประจําวัน ถา ย ท อ ด ป ร ะ ส บ ก า ร ณเ กี่ ย ว กั บ สิ่ ง ที่ เชี่ ย วชาญหรื อ สนใจ แนะนํ า กลุ ม เพื่ อ น แสดงความคิดเห็น โดยทั้งหมดนี้อาจทําเปน เว็บไซตหรือเปนเพียงเว็บเพจหนาเดียวก็ได ภาพที่ 1.9 เว็บสวนตัว (personal site ) http://www.dodeedesign.ob.tc/ ที่มา : เว็บ Portfolio (ออกแบบโดย ณัฐ จันทโรทัย, 2552)

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ภาพที่ 1.10 เว็บขอมูล (Information site) http://www.prolinkthailand.com/ ที่มา : เว็บบริษัทโพร-ลิงค จํากัด (ออกแบบโดย ณัฐ จันทโรทัย, 2550 )

ภาพที่ 1.11 เว็บชุมชน (community web) ที่มา : http://www.sanook.com/ ,

2. เว็บขอมูล (Information site) เว็บไซตประเภทนี้จัดทําขึ้นเพื่อนําเสนอขอมูล และขาวสารสําหรับองคกร โดยอาจนําเสนอใน ลักษณะของ ขอมูลของบริษัท (Company profile) ขอมูลบริการ (Products & Services) การผลิตและขั้นตอน การควบ คุมคุณภาพ เหลานี้เปนตน เพื่อประชาสัมพันธ บริษัท หรือ องค ก รให เ ข า ถึ ง กลุ ม เป า หมายและสร า ง ภาพลั ก ษณ ที่ ดี ใ ห เ กิ ด กั บ ผู เ ข า เยี่ ย มชม (Visitor) โดยทั่วไปมักจะจัดทําในรูปแบบที่ เรียบงายสวยงาม ดูนาเชื่อถือ เปนตน

3. เว็บทา (Portal site) เว็บทานั้น อาจเรียกอีกชื่อหนึ่งไดวาเว็บวาไรตี้ (variety web) ซึ่ง หมายถึงเว็บที่ใหบริการตางๆ ไว มากมาย มักประกอบไปดวยบริการเครื่องมือ คนหา ที่รวบรวมลิงคของเว็บไซตที่นาสนใจไว มากมายใหไดคนหา รวมถึงบริการที่เกี่ยวกับ เรื่ อ งราวที่ มี ส าระและบั น เทิ ง หลากหลาย ประเภท เชน ดูหนัง ฟงเพลง ดูดวง ทองเที่ยว IT เกม สุขภาพ หรืออื่นๆ นอกจากนั้นแลวเว็บ ทายังมีลักษณะในการเปนแหลงแลกเปลี่ยน ความคิดเห็นของผูคนในสังคมในเรื่องเกี่ยวกับ ประเด็นตางๆ ซึ่งเรียกวาเว็บชุมชน (community web) คือเปนเว็บที่ใหบริการพื้นที่แกกลุมคนผู ที่มีความสนใจในเรื่องเดียวกันไดเขามาแลก เปลี่ยนและแสดงความคิดเห็นกัน

17

18

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

4. เว็บขาว (News site) เว็บ ขาว มักเปนเว็บไซตที่สรางขึ้นโดยองคกรขาวหรือ สถาบันสื่อสารมวลชนตางๆ ที่มีสื่อมวลชน ประเภทต า งๆ ของตนอยู เป น หลั ก เช น สถานีโทรทัศน สถานีวิทยุ หนังสือพิมพ นิตยสาร วารสาร หรือ แมกระทั่งกระทรวง ทบวง กรมตางๆ แตองคกรเหลานี้ไดนํา เว็บไซตมาใชเปนเครื่องมือในการสื่อสารอีก รูปแบบหนึ่ง เพื่อนําเสนอขาวและสาระที่ เป น การสรุ ป ใจความสํ า คั ญ หรื อ รวบรวม เนื้อหาจากขาว ในรอบเดือนหรือรอบป ซึ่ง ชวยใหผูใชสามารถคนหาขอมูลและติดตาม ขาวสารไดทุกที่ทุกเวลา

5. เว็ บ ขายสิ น ค า และบริ ก าร (Business / e-commerce site) ปจจุบัน องคกรตางๆ มีการนําเว็บไซตมาเปนสื่อ กลางในการซื้อขายสินคาและบริการมากขึ้น รวมไปถึงการโฆษณาสินคา ประชาสัมพันธ และฝากขายสินคาหลากหลายประเภทผาน ทางเว็ บ ไซต มี จุ ด มุ ง หมายหลั ก ในการ ประชาสัมพันธองคกรและเพิ่มผลกําไรทาง การคา โดยเนื้อหาสวนใหญหรือเกือ บ ทั้ ง หมดมั ก จะเป น การนํ า เสนอที่ มี ค วาม นาสนใจและ ตรงใจกลุมเปาหมายมากที่สุด ทั้งนี้เพื่อผลกําไรทางธุรกิจนั่นเอง

ภาพที่ 1.12 เว็บขาว Bangkok Post ที่มา : http://www.bangkokpost.com/

ภาพที่ 1.13 เว็บขายสินคาและบริการ (Business / e-commerce site) ที่มา : http://www.weloveshopping.com/template/w17/ shop.php?shopid=250333

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ภาพที่ 1.14 เว็บมหาวิทยาลัยราชภัฏพระนคร ที่มา : http://www.pnru.ac.th/

ภาพที่ 1.15 เว็บ สถานีวิทยุออนไลนGreen wave ที่มา : http://www.greenwave.fm/

6. เว็บการศึกษา (Education site) เว็ บ การศึ ก ษามั ก เป น เว็ บ ที่ ส ร า งขึ้ น โดย สถาบันการศึกษาตางๆ หรือองคกรทั้งภาค รั ฐ และเอกชนที่ มี น โยบายในการเผยแพร ความรู และใหโอกาสในการคนควา หาขอมูล เพื่ อ การศึ ก ษาแก นั ก เรี ย น นิ สิ ต นั ก ศึ ก ษา รวมถึงประชาชนทั่วไป เว็บการศึกษาให ข อ มู ล เกี่ ย วกั บ การเรี ย นรู ทั้ ง แบบที่ เ ป น ทางการและไมเปนทางการ เว็บที่เกี่ยวกับ การศึกษาโดยตรงนั้น ไดแกเว็บของสถาบัน การศึกษา หองสมุด และเว็บที่ใหบริการการ เรียนรูแบบออนไลนที่เรียกวา อี-เลิรนนิ่ง (elearning) นอกจาก นี้แลวยังรวมถึงเว็บที่ สอนหรือใหความรูเกี่ยวกับเรื่องตางๆ เชน การทําเว็บ การทําอาหาร การถายภาพ การ ออกแบบ ฯลฯ

7. เว็บบันเทิง (Entertainment site) เว็บบันเทิงนั้นมุงเสนอและใหบริการ ตางๆ เพื่อเสริมสรางความบันเทิง โดย ทั่ ว ไปอาจนํ า เสนอเรื่ อ งราวเกี่ ย วกั บ การ บันเทิงทั่วไป เชน ดนตรี ภาพยนตร ดารา กีฬา ความรัก บทกลอน การตูน เรื่องขําขัน รวมถึงการใหบริการดาวนโหลดโลโก และริง โทนสําหรับโทรศัพทเคลื่อนที่อีกดวย เว็บ ประเภทนี้อาจมีรูปแบบที่เปนการตอบโตกับ ผูใช (Interactive) ที่ตื่นตาตื่นใจ หรือใช เทคโนโลยีมัลติมิเดียไดมากกวาเว็บประเภท อื่น

19

20

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

8. เว็บองคกรที่ไมแสวงหาผล กําไร (None-profit organization site) เว็บ ประเภทนี้มักจะเปนเว็บที่สรางขึ้นโดยกลุม บุคคลหรือองคกรตางๆ ที่มีนโยบายในการ สรางสรรคที่ชวยเหลือสังคมโดยที่ไมหวังผล กํ า ไรหรื อ ค า ตอบแทน ซึ่ ง กลุ ม บุ ค คลหรื อ องคกรเหลานี้ไดแก สมาคม ชมรม มูลนิธิ และโครงการต า งๆ โดยอาจมี จุ ด ประสงค เฉพาะที่ แ ตกต า งกั น เช น เพื่ อ ทํ า ความดี สรางสรรค สังคม พิทักษสิ่งแวดลอม ปกปอง สิทธิมนุษยชน รณรงคไมใหสูบบุหรี่ หรืออาจ รวมตัวกันเพื่อดูแลผลประโยชนของสมาชิก ในกลุม

ภาพที่ 1.16 เว็บมูลนิธิเด็ก ที่มา : http://www.ffc.or.th/index.php

9.

เว็บไซตเพื่อการคน หา (Search Engine) เปนเว็บไซตที่มีความ สามารถในการคนหาเรื่องราวตางๆ โดยใช วิธีการดึงคําสําคัญที่ บรรจุอยูในแตละหนา เว็บเพจมาแสดงผลหนาบนเว็บไซต และทํา ใหสามารถเชื่อมโยงไปยังเว็บไซตเหลานั้น เพื่ อ อ า นเนื้ อ หาที่ ต อ งการได เ ช น กู เ กิ ล (google) หรือ ยูทูป (youtube) เปนตน ภาพที่ 1.17 เว็บแบบ Search Engine ที่มา : http://www.youtube.com

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ตําแหนงอางอิงของเว็บไซต (URL: Universal Resource Locator)

การที่เราจะเรียกใชเว็บไซตใดๆ เราจะตองทราบถึงที่อยูบนอินเทอรเน็ตของเว็บไซตนั้นๆ ตําแหนงที่อยูบนอินเทอรเน็ตของเว็บไซตนี้เราเรียกวา URL ดังตัวอยางภาพที่ 1.18

ตําแหนง URL

ภาพที่ 1.18 แสดงการระบุตําแหนง URL เพื่อเขาสูเว็บไซต www.silpagum.com/ajnat/

โครงสรางของ URL ประกอบดวย โปรโตคอลเชื่อมตอ + โปรโตคอลที่ใชบริการ + Sub domains + Top Level Domain ดังตัวอยางดังรูปที่ 1.19

ภาพที่ 1.19 แสดงโครงสรางและวิธีเขียนที่ตอ งระบุใน URL

21

22

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ระบบชื่อโดเมน (DNS: Domain Name System)

เนื่องจากเครือขายอินเทอรเน็ตมีเว็บไซตจํานวนมาก การเขาสูเว็บไซตจะตองระบุหมายเลข IP ของเครื่อง Server ที่ทําหนาที่เปน Host ใหถูกตอง แตการจําหมายเลข IP เปนเรื่องยากจึงมีการกําหนด แนวทางแกปญหาดวยการตั้งชื่อหรือใชตัวอักษรขึ้นมาแทนที่หมายเลข IP เชน หมายเลข IP คือ 203.146.15.9 แทนที่ดวยชื่อเปน moe.go.th จะทําใหผูใชบริการสามารถจําไดแมนยํากวาการแทนที่ชื่อ หมายเลข IP เรียกวา Domain Name System (DNS) ในการออกแบบระบบการจัดเก็บชื่อ DNS ตาม เลข IP มีมาตรฐานการจัดเปนลําดับโครงสรางของฐานขอมูล Domain Name แบบ Top-down (ซึ่ง กําหนดและควบคุมโดย Inter NIC : Internet Network Information Center) คือในระดับบนสุดจะมี ความหมายบอกถึงประเภทขององคกร หรือชื่อประเทศที่เครือขายตั้งอยูชื่อ Domain จะใชตัวอักษรเล็ก หรือใหญก็ได แตนิยมใชอักษรเล็กจากระดับบนสุดลงมา เปนหนวยงาน ซึ่งใชอักษรตัวยอแทน ความหมาย แลวแตผูจัดตั้งจะกําหนดขึ้นแตละระดับจะถูกแบงคั่นดวยเครื่องหมายจุด (Dot) การดูระดับ จากบนลงลางใหดูจากดานขวามาซาย ดังตัวอยางภาพที่ 1.15 สําหรับประเทศไทยหนวยงานที่รับผิดชอบการจดโดเมน คือ ศูนยสารสนเทศเครือขายประเทศไทย (THNIC, Thailand Network Information Center)

ภาพที่ 1.20

แสดงการจัดลําดับโครงสรางของฐานขอมูล Domain Name

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

รูปแบบการจัดแบงระดับโครงสรางของระบบ DNS มีดังนี้ โดเมนระดับที่ 1 หรือระดับบนสุด (Top Level) จะใชโคดที่เปนตัวอักษร 2-4 ตัว เพื่อบงบอก จุดประสงคหรือหนาที่หลักขององคกรนั้น ๆ หรือประเทศที่ตั้งขององคกร ดังภาพแสดงตัวอยางการเขียน แบบจุดประสงคหรือหนาที่หลักขององคกร โดเมนหนวยงานหรือประเภทองคกร .com องคกรที่ทําเกี่ยวกับการพาณิชย .edu กําหนดใหกับสถานศึกษาในประเทศสหรัฐฯ .gov กําหนดใหหนวยงานราชการของรัฐบาลสหรัฐฯ .info องคกรที่ใชขอมูลขาวสาร .int องคกรนานาชาติ .mil กําหนดใหกับทหารของประเทศสหรัฐฯ .net องคกรที่ทําเกี่ยวกับระบบเครือขาย .org องคกรที่ไมตองการกําไร ตัวอยางบอกที่ตั้ง(ประเทศ) โดเมน หนวยงานหรือประเภทองคกร .th .jp .au .uk .tw

หนวยงานที่ตั้งในประเทศไทย หนวยงานที่ตั้งในประเทศญี่ปนุ หนวยงานที่ตั้งในประเทศออสเตรเลีย หนวยงานที่ตั้งในประเทศอังกฤษ หนวยงานที่ตั้งในประเทศไตหวัน

โดเมนระดับที่ 2 เปนการเพิ่มชื่อหนวยงานลงในระดับประเทศ โดยโดเมนที่บงบอกประเทศจะ อยูขวาสุด และถัดมาจะเปนตัวอักษร 2-3 ตัวของชื่อองคกร เชน ac.th โดเมน หนวยงานหรือประเภทองคกร .ac .go .or .co

หมายถึงหนวยงานที่เปนสถานศึกษา หมายถึงหนวยงานที่เปนหนวยงานราชการ หมายถึงหนวยงานที่เปนองคกรที่ไมแสวงหาผลประโยชน หมายถึงหนวยงานที่เปนหนวยงานเอกชน

23

24

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ขอแนะนําในการเลือก Domain name Domain name เปรียบเสมือนชื่อของเรา เปนชื่อที่ใชอางอิงมาที่เว็บไซตของเรา ดังนั้นจึงมี ความสําคัญมาก การเลือก domain name ที่ดีจะเปนสวนชวยใหเว็บไซตของเรามีชื่อเสียงไดงายขึ้น ขอแนะนําในการเลือก domain name มีดังนี้ 1. ควรเปนชื่อที่จําไดงาย สะกดไดงาย จะทําใหผูใชงานสามารถกลับมาใชงานเว็บของเราได ไมควรใชคําไทยที่เขียนเปนภาษาอังกฤษเพราะนอกจากจะสะกดไดยากแลว ยังมีโอกาสสะกดผิดพลาด ไดงายอีกดวย นอกจากจะเปนคําที่สะกดไดงาย เชน สนุก (sanook) , กระปุก (kapook) เปนตน 2. ควรตั้งชื่อใหสั้น คือไมควรเกิน 10 ตัวอักษร จะสามารถทําไดจําไดงายขึ้น และยังลดการ สะกดชื่อผิดได ผูใชงานเว็บไซตนั้นชอบที่จะพิมพชื่อเว็บที่สั้นมากกวาชื่อเว็บที่ยาวมากแนนอน 3. ควรจดโดยใช .com ในปจจุบันมีหลายชื่อใหเลือกมากเชน .net , .org , .info , .firm แตชื่อ ที่นิยมใชมากที่สุดคือ .com ผูใชงานจะคุนเคยกับ .com มากกวา และในกรณีที่ผูใชงานจํา domain name เราไมไดก็มีโอกาสสูงที่เคาจะใชชื่อ .com กอน 4. ควรเปนชื่อที่เปนสากล การใชชื่อที่เปนสากลรูจักกันโดยทั่วไป ไมควรใชคําเฉพาะที่รูจักกัน คนในพื้นที่รูจักเทานั้น จะทําใหเว็บไซตเราสามารถรองรับผูใชงานจากพื้นที่อื่นได 5. ควรเปนชื่อที่งายในการออกเสียง การออกเสียงไดงายจะทําใหจําไดงายขึ้น และสะกดได งายขึ้นดวย จะเห็นไดวาเว็บไซตที่มีชื่อเสียงในปจจุบันสามารถออกเสียงไดงายมาก เชน google, yahoo, sanook เปนตน 6. ควรเปนชื่อที่มีตัวอักษรเทานั้น ในปจจุบันเราสามารถใสสัญลักษณ (-) hyphen และ ตัวเลขใน domain name ได แตการใสสัญลักษณและตัวเลขนั้นจะทําใหเกิดความผิดพลาดในการพิมพ ชื่อ domain name ไดงายขึ้นเพราะจะไมสัมพันธกับการออกเสียง 7. ควรใชชื่อเว็บไซตที่มีตัวอักษรซ้ํากัน อีกขอแนะนําหนึ่งก็คือใชตัวอักษรซ้ํากันในการตั้งชื่อ domain name จะทําใหการออกเสียงงายขึ้นและจดจํางายขึ้น หลายเว็บไซตดังๆ ก็ใชหลักการนี้เชน google , badoo , badongo 8. ควรเปนชื่อที่เกี่ยวกับเนื้อหาของเว็บไซต เพราะจะทําใหผูใชงานเว็บไซตรูเนื้อหาของ เว็บไซตไดทันทีจากชื่อของเว็บไซต เชน ถาคุณขายเครื่องประดับอาจใชชื่อ jewelley.com 9. ควรมี keyword ที่เกี่ยวขอกับเว็บไซต keyword ที่เกี่ยวของกับเว็บไซตของเราจะมีผลอยาง ยิ่งตอลําดับการคนหาของ search engine ตางๆ เชนถาคุณคนหาคําวา game ใน search engine ลําดับ ตนๆ ของผลลัพธที่แสดงออกมานั้น ใน domain name จะมีคําวา game อยูดวย 10. ควรใชยี่หอสินคาของตัวเองเปน domain name ในกรณีนี้เราเห็นตัวอยางมากมาย เชน nike.com แมแตการทั้งการใชคําขวัญที่คิดขึ้นมาเชน justdoit.com ก็ใชเปน domain name เพื่อเขาไป

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ยังเว็บไซตของ nike เชนเดียวกัน แนนอนวายี่หอตางๆ ที่มีชื่อเสียงอยูในปจจุบัน นั้นก็มาจากชื่อที่ไมดัง มากอน ดังนั้นเราควรที่จะสรางยี่หอเปนของตัวเองไมควรใชคําพองกับยี่หอที่มีอยูแลว ทั้งหมดเปนเพียงขอแนะนําสําหรับการเลือกชื่อ domain name เทานั้น ซึ่งในการกําหนดชื่อไม จําเปนตองใชขอแนะนําทั้งหมด เพราะจริงๆ แลวเปนไปไดยาก เนื่องจากตอนนี้มีธุรกิจขายชื่อโดเมนเนม ทําใหชื่อดีๆ ถูกซื้อไปกักตุนเอาไวเพื่อขายตอในราคาแพง ทําใหชื่อดีๆ ลดนอยลง เมื่อเราคิดชื่ออะไรไดที่ ยังไมซ้ํากับคนอื่น ก็ควรรีบจดทะเบียนกอนที่คนอื่นจะแยงไป Domain name เปนสวนหนึ่งที่จะทําใหเว็บไซตมีชื่อเสียงไดงายขึ้น สุดทายแลวสิ่งสําคัญที่สุดก็ คือ เนื้อหาของเว็บไซตนั่นเอง ถาเนื้อหาของเว็บไซตเราดี ยังไงเว็บของเราก็ตองเปนที่นิยมอยางแนนอน สรุป

เว็บดีไซน (Web Design) เปนสาขางานดีไซนที่ไมเหมือนกับสาขาอื่นๆ เพราะสื่อของเว็บไมใช กระดาษ แตเปนหนาจอใดๆ ที่สามารถเชื่อมตออินเตอรเน็ตได ทําใหการออกแบบเว็บไซต มีสิ่งที่ตอง คํานึงนอกเหนือไปจากความสวยงามอีก เชน การใชงาน และการรองรับการแสดงผลในหลายๆ ขนาด หนาจอ และในทุกๆ บราวเซอร ยิ่งปจจุบันมีอุปกรณที่สามารถเชื่อมตอ Internet ไดมากขึ้น ก็ยิ่งทําให ตองออกแบบใหสะดวกกับผูใชในทุกๆ อุปกรณใหมากที่สุดตามไปดวย และจุดนี้เองที่ทําใหนักออกแบบ ตองหันมาสนใจภาษา HTML & CSS เว็บไซต (Web Site) คือ คําที่ใชเรียกกลุมของเว็บเพจ เปนแหลงขอมูลหรือบริการอยางหนึ่งบน อินเทอรเน็ต โดยจะประกอบดวยระบบเชื่อมโยงหรือลิงคที่จะนําไปสูเนื้อหาสวนอื่นๆ ภายในเว็บไซตจะ ประกอบไปดวยหนาโฮมเพจและเว็บเพจ เว็บ (web) เปนเอกสารแบบหนึ่งที่ใชในการแสดงผลผาน เครือขายคอมพิวเตอร ที่เชื่อมโยงกัน เรียกวาวา Inter Connection Network หรืออินเทอรเน็ต (Internet) สามารถติดตอสื่อสารถึงกันไดโดยใชมาตรฐาน ที่ใชบนระบบเครือขายอินเทอรเน็ต มีชื่อวา ทีซีพี/ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol) ในการรับสงขอมูลที่เปนหนึ่งเดียว โดยทั่วไปการสรางโฮมเพจและเว็บไซต จะใช ภาษา HTML (Hyper Text Markup Language) เปน โปรแกรมภาษาที่ใชเขียนเว็บเพจ ซึ่งสามารถสรางการเชื่อมโยง (Link) ไปยังหนาเว็บเพจอื่นๆ โดย ปจจุบันในการสรางเว็บไซตจะมีโปรแกรมสําเร็จรูปในการออกแบบ ซึ่งโปรแกรมเหลานี้มีความสามารถ แบบ ประเภท What You See Is What You Get ซึ่งสามารถออกแบบไดงายๆ โดยนําขอความ รูปภาพ หรืองานกราฟก มาจัดวาง บนหนาเว็บที่ออกแบบ แลวสั่งแสดงผลดวยโปรแกรมบราวเซอร เว็บไซตแตละประเภทตางมีเปาหมายและลักษณะที่แตกตางกัน ตัวอยางเชน เว็บไซตที่เปน Search Engine ซึ่งเปนแหลงรวมที่อยูของเว็บไซตตางๆ ดังนั้นสิ่งที่สําคัญในการออกแบบเว็บไซต

25

26

บทที่ 1 ความรูเบื้องตนเกี่ยวกับการออกแบบเว็บไซต

ประเภทนี้ ก็ คื อ สามารถแสดงหน า เว็ บ อย า งรวดเร็ ว เมื่ อ ผู ใ ช เ ป ด เข า มาและมี ร ะบบสื บ ค น ข อ มู ล ที่ มี ประสิทธิภาพ เพื่อใหไดผลลัพธที่รวดเร็ว สําหรับเว็บเพื่อความบันเทิงหรือเกี่ยวของกับศิลปะนั้น ผูใชมัก คาดหวั ง ที่ จ ะได พ บกั บ สิ่ ง ที่ น า ตื่ น เต น เรื่ อ งราวที่ ส นุ ก สนาน เพลิ ด เพลิ น หรื อ อาจจะได เ รี ย นรู ส าระ บางอยางบาง ความสําคัญในการออกแบบเว็บไซตเหลานี้จึงมีมากพอกับเนื้อหาภายในเว็บไซต สวนเว็บ ทั่วไปที่ใหบริการขอมูล ซึ่งไมไดมีเปาหมายที่จะใหความบันเทิง ควรจะมีการจัดขอมูลอยางเปนระบบและ มีรูปแบบที่เขาใจงาย เพื่อทําใหสามารถเขาถึงขอมูลที่ตองการไดอยางรวดเร็ว

ขอควรจํา

1. เว็บเพจ (Web Page) คือ หนาเอกสารที่ใชแสดงขอมูลในรูปแบบตางๆ บนเว็บไซต โดย ขอมูลจะถูกสรางขึ้นจากภาษา HTML (Hypertext Markup Language) แตละเว็บเพจสามารถ ประกอบดวยขอความรูปภาพ เสียง และวิดีโอ 2. โฮมเพจ (Home Page) คือ คําที่ใชเรียกหนาแรกของเว็บไซตที่ประกอบไปดวยเมนู และ เนื้อหาตางๆ คลายกับหนาปกนิตยสาร 3. เว็บไซต (Web Site) คือ คําที่ใชเรียกกลุมของเว็บเพจ ภายในเว็บไซตจะประกอบไปดวย หนาโฮมเพจและเว็บเพจ ประกอบดวยระบบเชื่อมโยงหรือลิงคที่จะนําไปสูเนื้อหาสวนอื่นๆ 4. Domain name เปรียบเสมือนชื่อของเรา เปนชื่อที่ใชอางอิงมาที่เว็บไซต การเลือก domain name ที่ดีจะเปนสวนชวยใหเว็บไซตของเรามีชื่อเสียงไดงายขึ้น 5. ภาษา HTML (Hyper Text Markup Language) เปนโปรแกรมภาษาที่ใชเขียนเว็บเพจ ซึ่ง สามารถสรางการเชื่อมโยง (Link) ไปยังหนาเว็บเพจอื่น ๆ ได เรียกการเชื่อมโยงนี้วา Hypertext ในการ เขียนเว็บจะมีการใชโคดคําสั่งของโปรแกรมภาษาอื่นมาใชรวมกับภาษา HTML ไดเรียกวา Script เพื่อ เพิ่มเทคนิค สีสันใหกับหนาเว็บ เชน Java , Java Script , MySQL , PHP, ASP เปนตน

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

7

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

บทที่

หลักการพื้นฐาน เกี่ยวกับการออกแบบเว็บไซต

การออกแบบเว็ บ ไซต มี ส ว นสํ า คั ญ ในการ สรางความประทับใจ ดึงดูดความนาสนใจใหกับผูเขา มาใชบริการ นอกจากจะตองพัฒนาเว็บใหเนื้อหาดีมี ประโยชน มีความรูเกี่ยวกับภาษาและเครื่องมือตางๆ ที่ใชพัฒนาแลว สิ่งสําคัญอีกอยางหนึ่งที่ตองทําความ เขาใจ คือ หลักการออกแบบ และพัฒนาเว็บไซตที่ ถูกตอง ซึ่งจะชวยใหสามารถกําหนดทิศทางการทํางาน ของเว็บไซตไดตรงตามเปาหมาย

29

30

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

เว็บไซดที่ไดรับการออกแบบอยางสวยงาม มีการใชงานที่สะดวก ยอมไดรับความสนใจจากผูใช มากกวาเว็บไซดที่ดูสับสนวุนวาย มีขอมูลมากมายแตหาอะไรไมเจอ นอกจากนี้ยังใชเวลาในการแสดงผล แตละหนานานเกินไป ซึ่งปญหาเหลานี้ลวนเปนผลมาจากการออกแบบเว็บไซดไมดีทั้งสิ้น ดังนั้น การออกแบบเว็บไซดจึงเปนกระบวนการสําคัญในการสรางเว็บไซด ใหประทับใจผูใช ทํา ใหเขาอยากกลับเขามาเว็บไซดเดิมอีกในอนาคต ซึ่งนอกจากตองพัฒนาเว็บไซดที่ดีมีประโยชนแลว ยัง ตองคํานึงถึงการแขงขันกับเว็บไซดอื่น ๆ อีกดวย

ความหมายของการออกแบบเว็บ (Web Design)

การออกแบบเว็บ (Web Design) เปนคําศัพทที่มีความกํากวมในความหมาย สําหรับ ผูเชี่ยวชาญดานเว็บใหความหมายแตกตางกันมาตลอด กลุมหนึ่งใหความหมายวา เปนโปรแกรมฟงกชันการใชงานภายในเว็บ อีกกลุมหนึ่งให ความหมายว า การออกแบบเป น เหมื อ นการพั ฒ นาส ว นหน า แสดงผลของเว็ บ ให ดู ดี และ นําเสนอความเปนเอกลักษณของหนวยงานได (สุวิช ถิระโคตร , 2554 : 62 ) หากสรุปวาความหมายใดถูกตอง คําตอบคือ ถูกตองทั้งสองความหมาย เหตุผลคือ หากมองยอนกลับไปภาษา HTML ที่สามารถสรางเว็บไดจะเปนลักษณะเว็บประกอบดวย ขอความ รูปภาพ องคประกอบสี การจัดวาง และกราฟกเปนหลัก สามารถตกแตงเว็บ ให สวยงามได แตในปจจุบันภาษาคอมพิวเตอรสามารถนํามารวมสรางเว็บได เชน .NET JSP เปนตนทําใหสามารถสรางระบบเว็บที่สามารถปฏิสัมพันธกับผูใชมากขึ้น ติดตอกับระบบ ฐานขอมูลได และกําหนดฟงกชันการใชงานตาง ๆ ไดมากขึ้น

“สําหรับเนื้อหาในหนังสือเลมนี้ไดกําหนดเนื้อหาเรื่องการออกแบบในเชิง ของศิลปะ อันประกอบไปดวยหลักการออกแบบ และการใชองคประกอบศิลป ตางๆ มาเปนกรณีศึกษา”

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

ความสําคัญของการออกแบบเว็บไซต ปจจุบันนี้มีเว็บไซตเกิดขึ้นมากมายผูใชจึงมีทางเลือกมากขึ้นที่จะเขาไปยังเว็บไซตตาง ๆ ที่ ใหบริการและจะไมทนอยูกับเว็บที่สับสน จากประสบการณทองเว็บที่ผานมาของคุณความรูสึกไดรับจาก เว็บที่มีความสวยงามและเว็บที่มีขอมูลอยูอยางมากมายดูสับสนวุนวายและเสียเวลานานในการเขาดูคุณ ตองการที่จะมีเว็บของคุณในลักษณะใด การออกแบบเว็บไซทมีสวนสําคัญในการสรางความประทับใจ ใหกับผูใชบริการ และทําใหอยากกลับเขามาใชอีกในอนาคต หรือดึงดูดผูใชใหอยูกับเว็บตลอดไปการ ออกแบบเว็บไซทนั้นไมไดหมายถึงลักษณะหนาตาของเว็บไซทเพียงอยางเดียว แตเกี่ยวของกับการ กําหนดเปาหมายของเว็บไซต ระบุกลุมผูใช การจัดระบบขอมูล การสรางระบบเนวิเกชั่น การออกแบบ หนาเว็บ การใชกราฟก การเลือกใชสี และการจัดรูป แบบตัวอักษร ชนิดและรุนของบราวเซอร การ คํานึงถึงความแตกตางของสื่อกลางในการแสดงผลเว็บไซทดวย ขนาดของหนาจอมอมิเตอร และความ ละเอียดของสีในระบบตางๆ

แนวคิดในการออกแบบหนาเว็บ 1. เรียนรูจากเว็บไซตตาง ๆ จะชวยใหมีแนวคิดในการออกแบบหนาเว็บมากขึ้นเพราะแตละ เว็บก็จะมีรูปแบบ การจัดวาง สี กราฟก เอกลักษณ และเทคนิคที่แตกตางกัน

ภาพที่ 2.1

รูปแบบและเทคนิคของเว็บไซตตางๆ

31

32

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

2. ประยุกตรูปแบบจากสิ่งพิมพ จะใช เมื่ อ จะออกแบบเว็ บ ไซต ข องหน ว ยงานที่ มี สิ่ งพิ มพ เช น หนั งสื อ, นิ ตยสาร เพื่ อ จะได นํ า ลั ก ษณะของ โทนสี กราฟ ก หรื อ ตั ว อั ก ษร ที่ แสดงถึงเอกลักษณของหนวยงาน เพื่อความ สอดคลองกัน และจําไดงาย

3. ใช แ บบจํ า ลองเปรี ย บเที ย บ คื อ ใช สิ่ ง ที่ คุนเคยในการอธิบายถึงสิ่งที่ไมคุนเคย ไมวาจะ เป น รู ป ภาพจากสิ่ ง พิ ม พ แต สิ่ ง สํ า คั ญ คื อ รู ป แบบที่ เ ลื อ กมาใช นั้ น ต อ งมี ลั ก ษณะที่ ค น คุ น เคย เข า ใจง า ย เช น เว็ บ ของ ผลิ ต ภั ณ ฑ เครื่องเสียง ก็จะนําเอาลักษณะปุมและสีของ เครื่ อ งเสี ย งมาประยุ ก ต ใ ช ใ นการออกแบบ เว็ บไซต ได เป นอย างดี ลั กษณะ นี้ จ ะเป น การ จําลองลักษณะที่มองเห็น ซึ่งลักษณะ ตางๆ ของแบบจํ า ลองก็ จ ะมี อี ก 2 ลั ก ษณะ คื อ จํา ลองแบบการจั ดระบบ และ จํา ลองการใช งาน

ภาพที่ 2.2

เอกลักษณ และรูปแบบการจัดวางของสื่อสิ่งพิมพ

4. ออกแบบอย า งสร า งสรรค โดย ดึ ง ดู ด ความสนใจทั้ ง เนื้ อ หาและรู ป แบบ เช น กราฟกจะเปนองคประกอบที่สําคัญในการสื่อ ความหมาย สิ่งสําคัญก็คือการเลือกกราฟกที่ เหมาะสมกับความหมายที่ตองการสื่อสาร

ภาพที่ 2.3

ตัดทอนจากสิ่งที่คุนเคย เชน เครื่องเสียง มาเปน ลักษณะปุมและสีประยุกตใช

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

ทฤษฎีการออกแบบเว็บไซต

เมื่ อ ผูอ อกแบบเว็ บ ไซต ท ราบข อมู ล เกี่ย วกับ สิ่ ง แวดลอ มหรือ ป จจั ย ต า งๆ ที่ เกี่ ย วข อ งกั บ การแสดงหน า เว็ บ ที่ ส ร า งขึ้ น แล ว หั ว ข อ นี้ จ ะกล า วถึ ง ทฤษฎี และ หลักการของการออกแบบเว็บ เพื่อใชเปนพื้นฐานสําหรับสรางเว็บใหตรงกับความ ตองการของผูใช และเปนเว็บที่มีประสิทธิภาพ

ทฤษฎีการออกแบบเพื่อปฏิสัมพันธกับผูใช การออกแบบเว็บ ผูออกแบบมีความตองการเพื่อใหผูใชใชงานไดอยางมี ประโยชนมากที่สุด ดังนั้นการออกแบบเพื่อผูใช (User-centered) จึงมีความจําเปน ที่ จ ะต อ งรู จั ก ทฤษฎี ต า งๆ ที่ เ กี่ ย วกั บ การสร า งความสามารถในการใช ง านได (Usability) ดังนี้ (Penny McIntire, 2008)

1. ความสามารถในการเรียนรู (Laernability) การออกแบบที่ดูงายๆ โดยที่ผูใชใหมสามารถที่จะเริ่มตนใชงานเว็บและบรรลุ วัตถุประสงคของตนเองได เชน การคนหาขอมูลที่ตองการในเว็บไซตได เปนตน สํ า หรั บ ทฤษฎี ที่ จ ะสนั บ สนุ น การสร า งความสามารถในการเรี ย นรู ข องผู ใ ช นั้ น ประกอบไปดวย 1.1 การออกแบบใหผูใชสามารถคาดเดาได (Predictability) โดยที่ ผูใชอาจจะคาดเดาหรือพอที่จะพิจารณาไดวากิจกรรมที่กําลังจะทํานั้น จะสงผล อยางไร โดยทั้งนี้ผูใชนั้นอาจจะคาดเดาจากประสบการณเดิมที่ผานมา 1.2 การออกแบบที่ สอดคล องกั บเว็ บไซต ทั่ วไป (Synthesizability) หรื อ การออกแบบ ที่ ไ ม ขั ด แย ง กั บ เว็ บ ไซต ทั่ ว ๆ ไป ทํ า ให ผู ใ ช นํ า ความรู ห รื อ ประสบการณที่เคยใชเว็บอื่นๆ มาใชกับเว็บที่เราออกแบบไดอยางงาย

33

34

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

เมื่อคุณสรางเว็บไซต หนาที่ของคุณคือ กําจัดเครื่องหมายคําถามในหัวของผูใชใหหมดไป

ภาพที่ 2.4 ภาพคําถามที่ลอยอยูในหัวของผูใช

1.3 การออกแบบโดยอาศัยความคุน เคยของผูใช (Familiarity) ซึ่งผูใชสามารถนําความรู ความคุนเคยที่มีมาประยุกตใชกับเว็บไซตที่เราออกแบบได 1.4 การออกแบบตามสากลทั่วไป (Generalization) เมื่อเราออกแบบตามรูปแบบ สากลแลวผูใชสามารถที่จะเพิ่มความรู ความเขาใจไปในความรูที่ผานมาเพื่อใชเว็บไซตของเราได 1.5 การออกแบบที่มีความสอดคลองกัน (Consistency) การออกแบบหนาเว็บ การ ปฏิสัมพันธ หรือการสรางกิจกรรมใดๆ ใหแกผูใชเว็บ ควรจะออกแบบหนาเว็บทั้งหมดในเว็บไซตให สอดคลองกันหรือมีสถานการณเหมือนๆ กัน เพื่อลดความสับสน และลดการใชเวลาจํานวนมากในการ เรียนรูสวนการติดตอใหมๆ ภายในเว็บไซตหนึ่งๆ

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

การออกแบบเว็บไซต เพื่อใหมั่นใจวาเว็บไซตของเรานั้นใชงานงาย จริงๆ ก็คือ อยาใหผูใชตองคิดเยอะ มีตัวอยางปญหาที่ผูใชเว็บไมควรตองมานั่งคิดใหเปลืองสมอง เวลา เขามาใชบริการในเว็บเรา เชน ฉันอยูตรงไหนของเว็บไซต ? ฉันควรเริ่มตนที่ไหนดี ? ไอเมนู...................อยูตรงไหนเนี่ย ? สวนสําคัญของหนานี้อยูตรงไหน ? ทําไมเว็บนี้ถึงเรียกไอนี่วา................ ? จะหา.............ตรงไหน ? ฯลฯ แมเรื่องนี้เปนเรื่องเล็กนอย แตเพราะพฤติกรรมการใชอินเทอรเน็ต ในปจจุบัน ผูใชงานไมคอยมาเสียเวลามานั่งคนหาในเว็บไซตเรา เราจึงตอง จัดระเบียบอยางไรนั่นเอง

2. หลักการความพรอมใชงาน (Usability Principles) หลักการออกแบบเว็บไซตเพื่อพรอมใชงานหรือใหเกิดประโยชนแกผูใช มีพื้นฐานจากความ ตองการเพิ่มความพึงพอใจใหแกผูใช โดยไมไดมองเพียงแควาผูใชเว็บมาที่เว็บแลวคลิกออกไป แตจะตอง พิจารณาวาผูใชจะตองอยูในเว็บไซตเราและกลับเขามาใชอีกภายหลัง ปจจัยที่เกี่ยวกับความพรอมใชงาน ที่จะสงเสริมใหผูใชพึงพอใจ ประกอบไปดวย 2.1 ผูใชตรวจสอบเองได (Self-evidence) วาเว็บไซตตองงายตอการใช ผูชมจะออกจาก เว็ บ ไซต ไ ปได โ ดยเร็ ว ถ า เว็ บ นั้ น เข า ใจยากหรื อ ต อ งอาศั ย หน า จออื่ น ๆ เพื่ อ อธิ บ ายเสริ ม ในกรณี นี้ ผูออกแบบควรออกแบบใหโครงสรางเว็บมีความสอดคลองและคาดเดาไดและสรางรูปแบบปฏิสัมพันธ กับผูใชที่ทําใหผูใชเรียนรูไดเร็ว จะทําใหผูใชพึงพอใจและชอบใจเขามาชมอีกครั้ง 2.2 ความเร็ว ( Speed) ผูชมจะมีความอดทนนอยมากสําหรับรอ จากขอมูลปจจัยที่เกี่ยวของ กับการออกแบบดานรูปแบบการเขาใชอินเทอรเน็ต ยังมีผูใชจํานวนหนึ่งที่ใชโมเด็ม (Modem) เขาถึง อินเทอรเน็ตที่มีความชามาก ดวยเหตุนี้เราจึงควรที่จะตองจํากัดขนาดไฟล อีกประเด็นหนึ่งเกี่ยวของกับ ความเร็วคือ ผูใชสวนมากมีความาตองการที่จะเขาถึงขอมูลที่ตองการภายในไมเกิน 3 คลิกลิงค

35

36

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

2.3 การใหขอมูลยอนกลับ (Feedback) ถาผูใชจําเปนตองรออะไรบางอยาง เราควรที่จะมี การเตือนหรือแจงผูใชใหทราบวากําลังเกิดอะไรขึ้นกับการรอนั้นๆ เชน มีภาพเคลื่อนไหวเล็กๆ นอยๆ สําหรับแสดงใหเห็นถึงความคืบหนาของระบบที่กําลังทํางาน เปนตน 2.4 ความแมนยําและระมัดระวัง (Accuracy) หนาเว็บที่ออกแบบอยางมืออาชีพจะตอง ไมมี ลิงคที่เสีย ภาพหายไป ภาษาสคริปตผิด หรืออื่นๆ ที่ไมสามารถทํางานได ตองแนใจวาไมมีขอผิดพลาด ใดๆ เกิดขึ้นกับหนาเว็บ ดังนั้นเราจึงควรทดสอบเว็บไซตดวยหลายๆ เบราวเซอรและเวอรชันตางๆ ของแต ละเบราวเซอรดวย

3. ความสามารถที่ทุกคนเขาถึงเว็บ (Web Accessibility) การออกแบบที่เปนสากล (Universal Design) จะตองเตรียมพรอมสําหรับการเขาถึงไดสําหรับทุก ความสามารถของผูใชทุกๆ คน ดังนี้ 3.1 ประเภทของความพิการ (Type of Disabilities) ประเภททั่วๆ ไปของความพิการของผูใช อาจจะแบงออกเปน 3 กลุมดังนี้ 1) ความผิดปกติดานการมองเห็น (Visual Impairment) ระดับความผิดปกติที่มากที่สุดคือ ตาบอด สายตาเลื อ นราง และตาบอดสี เกี่ย วกั บ การออกแบบสํา หรับ ผูใ ชที่ มีสายตา เลือ นรางที่ไ ม สามารถอานขอความหรือดูรูปภาพขนาดปกติไดอยางคลองแคลวจึงตองพิจารณาเกี่ยวกับขนาดของ สวนประกอบเว็บ 2) ความผิดปกติดานการไดยิน (Hearing Impairment) ถาในเว็บไซตของเราจะนําเสนอ เนื้อหาที่เปนเสียง เชน การบรรยาย ไฟลเสียงหรือภาพยนตร ควรเตรียมพรอมใหมีทางเลือกสําหรับผู ผิดปกติทางหูดวย เชน ควรมีขอความบรรยาย หรือมีหัวเรื่องปรากฏ เปนตน 3) ความผิดปกติดานรางกาย (Physical Impairment) ผูผิดปกติทางรางกายที่ไมสามารถ ใชเมาสได ควรออกแบบหนาเว็บโดยการใชคียแท็บ (tab) หรือคียควบคุม (control key) สําหรับทุก ปฏิสัมพันธ เชน ระบบเนวิเกชัน 3.2 การออกแบบเพื่อรองรับความสามารถใหทุกคนเขาถึงเว็บไซตได มีคําแนะนําทั่วไปสําหรับ การออกแบบหนาเว็บ เพื่อรองรับความสามารถในการเขาถึงของทุกๆ ผูใช ดังตอไปนี้ 1) ออกแบบเว็บไซตที่รองรับเทคโนโลยีการปรับปรุงโฟกัสของตาและเทคโนโลยีการอาน หนาจอ เชน โปรแกรมอานหนาโฮม (home page reader) ของ JAWS หรือ IBM 2) เตรียมตัวเลือกสําหรับวิธีการใช เชน บางคนอาจจะทํางานกับเมาสได บางคนอาจจะ ใชคีย แท็บ หรือบางคนอาจจะตองใชฟงกชันคีย (คีย F1-F12) 3) หนาเว็บที่จํานําเสนอเนื้อหาดวยรูปภาพ ภาพเคลื่อนไหว ไฟลเสียง หรือไฟลวีดีโอ จําเปนจะตองเตรียมขอมูลเนื้อหาที่เปนรูปแบบของขอความไวประกอบ

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

ทฤษฎีการออกแบบตามองคประกอบการออกแบบ แนวคิดพื้นฐานสําคัญในการนํามาประยุกตใชเพื่อเปนแนวทางการออกแบบเว็บไซต ซึ่งการ ออกแบบ คือ การนําเอาองคประกอบตางๆ มาผสมผสานกัน แสดงออกมาผานการแสดงผลหนาจอ ทั้ง ขอมูลที่เปนตัวอักษร ภาพประกอบ และการใชสี ซึ่งสามารถใชในการสื่อความหมายในเว็บไซตได การ ออกแบบตามแนวความคิ ดสร า งสรรค ข องนั ก ออกแบบ ให อ ยู ภ ายในเนื้ อ ที่ ที่ กํ า หนดก็ นั บ ได ว า มี ความสําคัญ เพื่อใหตรงกับกลุมเปาหมาย และเกิดผลตามที่ตองการใหกับสินคาบริการของตน หลักการออกแบบโดยคํานึงถึงองคประกอบพื้นฐานที่สําคัญของเว็บไซต อยางมีประสิทธิภาพ ดังตอไปนี้ (ธวัชชัย ศรีสุเทพ, 2544 : 16-17)

1. ความเรียบงาย (Simplicity) หลักที่สําคัญของความเรียบงาย คือ การสื่อสารเนื้อหาถึงผูใชโดยจํากัดองคประกอบเสริมที่ เกี่ยวของกับการนําเสนอใหเหลือเฉพาะสิ่งที่จําเปนเทานั้น

ภาพที่ 2.5 เว็บศูนยดูแลสุนัขที่ออกแบบโดยใชหลักความเรียบงาย ที่มา : http://www.pethealthcare.co.th (ออกแบบโดย ณัฐ จันทโรทัย , 2553 : Online )

37

38

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

2. ความสม่ําเสมอ (Consistency) ใชรูปแบบเดียวกันตลอดทั้งเว็บไซต เนื่องจากผูใชจะรูสึกกับเว็บไซตวาเปนเสมือนสถานที่จริง ถาแตละหนาในเว็บไซตเดียวกันนั้นแตกตางกันมาก ผูใชก็จะเกิดความสับสนและไมแนใจวากําลังอยูใน เว็บเดิมหรือไม ดังนั้นรูปแบบควรจะมีความคลายคลึงกันตลอดทั้งเว็บไซต

ภาพที่ 2.6 เว็บที่ออกแบบโดยใชหลักความสม่ําเสมอ ที่มา : ออกแบบโดย ณัฐ จันทโรทัย , 2553 : Demo )

3. ความเปนเอกลักษณ (Identity) การออกแบบตองคํานึงถึงลักษณะขององคกร เนื่องจากรูปแบบของเว็บไซตสามารถสะทอนถึง เอกลักษณ และลักษณะขององคกรนั้นได ตัวอยางดังภาพ

ภาพที่ 2.7 ที่มา :

เว็บทีอ่ อกแบบโดยใชหลักความเปนเอกลักษณ เว็บไซตสํานักศิลปะและวัฒนธรรม (ออกแบบโดย ณัฐ จันทโรทัย , 2552 : Demo )

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

4. ระบบเนวิเกชันที่ใชงานงาย (User-Friendly Navigation) ระบบเนวิเกชันเปนองคประกอบที่สําคัญมากของเว็บไซต จะตองออกแบบใหผูใชเขาใจไดงาย และใชงานสะดวก โดยใชกราฟกที่สื่อความหมายรวมกับคําอธิบายที่ชัดเจน รวมทั้งมีรูปแบบและลําดับ ของรายการที่สม่ําเสมอ

ภาพที่ 2.8 ที่มา :

เว็บทีอ่ อกแบบโดยใชหลักระบบเนวิเกชันที่ใชงานงาย เว็บไซตบริษทั 293 Group (ออกแบบโดย ณัฐ จันทโรทัย , 2553 : Online)

5. มีลกั ษณะที่นาสนใจ (Visual Appeal) เปนเรื่องยากที่จะตัดสินวาลักษณะหนาตาของเว็บไซตนาสนใจหรือไม เพราะเกี่ยวของกับ ความชอบของแต ล ะบุ ค คลอย า งไรก็ ต ามหน า ตาของเว็ บ ไซต จ ะมี ค วามสั ม พั น ธ กั บ คุ ณ ภาพของ องคประกอบตางๆ

ภาพที่ 2.9 ที่มา :

เว็บที่มีลกั ษณะที่นาสนใจ http://www. Templatemonster.com/category/art/10684/ (สถานะ Online)

39

40

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

6. เนื้อหาทีม่ ปี ระโยชน (Useful Content) เนื้อหาถือเปนสิ่งที่สําคัญที่สุดในเว็บไซต ดังนั้นในเว็บไซตควรจัดเตรียมเนื้อหาและขอมูล ที่ ผูใชตองการใหถูกตองและสมบูรณ โดยมีการปรับปรุงและเพิ่มเติมใหทันตอเหตุการณอยูเสมอ เนื้อหาที่ สําคัญที่สุดคือ เนื้อหาที่สรางขึ้นมาเองโดยทีมงานของคุณและไมซ้ํากับเว็บอื่น เพราะจะเปนสิ่งที่ดึงดูด ผูใชใหเขามาในเว็บไซตอยูเสมอ ดังตัวอยางดังภาพ

ภาพที่ 2.10 ที่มา :

เว็บทีอ่ อกแบบโดยใชเนื้อหาของบทความที่มีประโยชนใหความรู http://www.tcdc.or.th/creativethailand/article/ (สถานะ Online )

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

7. การใชงานอยางไมจํากัด (Compatibility) ควรออกแบบเว็บไซตใหผูใชสวนใหญเขาถึงไดมากที่สุด โดยไมมีการบังคับใหผูใชตองติดตั้ง โปรแกรมใด ๆ เพิ่มเติม หรือ ตองเลือกใชบราวเซอรชนิดใดชนิดหนึ่งจึงจะสามารถเขาถึงเนื้อหาได สามารถแสดงผลไดในทุกระบบปฏิบัติการและที่ความละเอียดหนาจอตางกันอยางไมมีปญหา

ภาพที่ 2.11 การออกแบบระบบของเว็บ facebook ที่มีลักษณะการใชงานอยางไมจํากัด

8. คุณภาพในการออกแบบ (Design Stability) ถาตองการใหผูใชรูสึกวาเว็บไซตที่มีคุณภาพ ถูกตอง และเชื่อถือได ก็ควรใหความสําคัญกับ การออกแบบเว็บไซตอยางมาก ดังตัวอยางดังภาพ

ภาพที่ 2.12 เว็บที่มีลกั ษณะใหความสําคัญกับการออกแบบ ที่มา : http://portal.trueinternet.co.th/wifiauthen/ login_result.php/ (สถานะ Online)

41

42

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

9. ระบบการใชงานที่ถูกตอง (Functional Stability) ระบบการทํางานตางๆ ในเว็บไซตจะตองมีความแนนอน และทําหนาที่ไดอยางถูกตอง

ภาพที่ 2.13 เว็บที่มีลกั ษณะใหความสําคัญกับระบบการใชงานที่ถูกตอง ที่มา : สํานักหอสมุดกลางมหาวิทยาลัยศิลปากร http://www.su.ac.th/ (สถานะ Online )

นอกจากหลั ก การที่ ก ล า วมาแล ว Ben Hunt (2004) นั ก พั ฒ นาเว็ บ จาก webdesignfrom scratch.com ไดใหแนวทางในการออกแบบเว็บไซตในยุคเว็บ 2.0 ควรมีสิ่งทีคํานึงถึงดังนี้

1. ออกแบบใหใชงานไดงา ย การออกแบบทีเ่ รียบงาย และใชงานไดงายนั้นเปนเรื่องที่จําเปน เพราะถาเว็บไซตออกแบบ มาแลวใชงานไดยากนั้น ผูใชกจ็ ะมีประสบการณไมดีตอเว็บไซตนั้น และอาจจะไมเขามาใชงานอีก การ ออกแบบที่งายตอการใชงานนัน้ สามารถทําไดโดยการตัดสวนประกอบที่ไมจําเปนออกไป

2. Layout อยูตรงกลาง สาเหตุที่เลือกให Layout อยูตรงกลาง เพราะเปนรูปแบบการวาง layout ที่เรียบงายที่สุด ผูใชมี ประสบการณในการใชงานเว็บไซตที่จัดวางอยูตรงกลางอยูแลว จึงงายที่จะเรียนรู และใชงาน

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

3. แยกสวนหัว (Header) ของเว็บออกมาใหชัดเจน สวนหัวของหนาเว็บเพจถือวาเปนสวนที่สําคัญอีกสวนหนึ่ง เพราะจะเปนสวนที่ทําใหผูใชงาน ทราบจุดเริ่มตนของหนาเพจนั้นๆ และจะชวยใหผูใชทราบดวยวากําลังใชงานเว็บไซตใดอยู (ถาไมไดเขา มาจากเว็บไซตนั้นโดยตรง) เพราะฉะนั้นการทําใหสวนหัวของเว็บไซตเดนชัดจึงเปนเรื่องที่สําคัญอีก เรื่อง หนึ่ง อาจจะทําไดโดยการใชสีที่มีความแตกตาง การใชภาพประกอบ หรือใส Logo ใหมีความแตกตาง และนาสนใจ

4. มี Column ใหนอยที่สุด เมื่อกอนการใชงาน 3 หรือ 4 Column ถือวาเปนเรื่องที่ปกติ แตในยุตเว็บ 2.0 นั้น 2 Colums ก็ ถือวามากไปแลว สาเหตุที่ไมใช column มากเกินไปนั้น เพราะ ถาในหนาเว็บมี column นอยที่สุดจะมีทํา ใหหนาเว็บนั้นดูแลวไมสับสน ดูสบายตา แตถาจะเลือกใชงานมากกวา 2 column ก็สามารถทําไดขึ้นอยู กับขอมูลที่จะนําเสนอภายในหนาเว็บเพจนั้น ถาดูแลวขอมูลไมรก หรือสับสนจนเกินไปก็สามารถใช งานได

ภาพที่ 2.14 ตัวอยางเว็บครีเอทีพไทยแลนดที่แยกสวนหัวชัดเจน มีคอลัมนนอยและ Layout อยู ตรงกลาง และใชงานงาย ที่มา : http://www.creativethailand.org/th/ : สถานะ Online

43

44

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

5. โลโกตองชัดเจน Logo ถือเปนสัญลักษณที่บงบอกถึงตัวตนของเว็บไซตนั้นๆ Logo ชวยใหผูใชทราบวาตอนนี้อยู ที่เว็บไซตอะไร และชวยใหผูใชงานจดจําเว็บไซตนั้นๆ ได การออกแบบLogo ที่ดีนั้นจะตองเปนการ ออกแบบที่สื่อถึงจุดมุงหมายของเว็บไซตนั้น มีลักษณะที่เดนชัด จดจําได

6. แบงพื้นที่การแสดงขอมูลออกเปนสัดสวนที่ชัดเจน หนาเว็บเพจสวนใหญจะใชสําหรับแสดงขอมูลที่เปนตัวอักษร ถาไมมีการแบงขอมูลที่เปน ตัวอักษรออกเปนสัดสวนที่ชัดเจนแลวนั้น การดูขอมูลของผูใชงานอาจจะเกิดความสับสนได

7. ใช Navigation ที่งาย Navigation เปนสวนที่ชวยใหผูใชสามารถเขาถึงขอมูลที่อยูภายในเว็บไซตไดสะดวก บอกผูใช ใหทราบวาตอนนี้อยูที่สวนใดของเว็บไซต และชวยใหผูใชรูวาจะสามารถทําอะไรไดบางจากหนาเพจนั้นๆ เพราะฉะนั้นการออกแบบจึงจําเปนอยางยิ่งที่จะตองออกแบบมาใหสามารถใชงาน ไดงาย และไมซับซอน เกินกวาที่ตัวของผูใชงานจะสามารถเรียนรูการใชงานไดดวย ตัวเอง

ภาพที่ 2.15 ตัวอยางเว็บทีว่ างตําแหนงโลโกไวชดั เจนแบงพื้นที่การแสดงขอมูลออกเปนสัดสวนและ Navigation ที่ดงู าย

ที่มา

: http://www.chang.co.th/index.php : สถานะ Online

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

8. ใชสีที่ชัดเจน สีถือเปนอีกองคประกอบหนึ่งที่สําคัญในการออกแบบเว็บไซต เพราะสีสามารถสื่อถึงความเปน ตัวตนของเว็บไซตได ยกตัวอยางเชน เว็บไซตของฟารมเลี้ยงสัตว ก็นาจะใชสีเขียวเปนหลักในการ ออกแบบ เว็บไซตของสวนสม ก็ควรจะใชสีสน เพื่อสื่อถึงเนื้อหาภายในเว็บไซตนั้นๆ

9. อักษรสําหรับ Introduction ตองชัดเจน อักษรที่ใชสําหรับการแนะนํา ไมวาจะเปนการแนะนําเว็บไซต แนะนําการใชงานสวนตางๆ จําเปนที่จะตองมองเห็น และสามารถอานไดอยางสะดวก โดยการทําใหอักษรชัดเจนนั้นเราสามารถทําได หลายวิธี เชน การใชสีที่มีความแตกตางจากสวนอื่น การใชขนาดอักษรที่ใหญกวาสวนอื่น หรือการใช ภาพมาประกอบเปนตน

10. พื้นผิว พื้นผิวของเว็บ 2.0 นั้นสวนใหญจะทําเปนในลักษณะของภาพ 3 มิติ หรือเปนพื้นผิวที่มีแสงเงา ดู เหมือนพื้นผิวที่เปยกอยู เพื่อเปนการทําใหเว็บไซตสวนงาม และเดนชัดขึ้นมา การใชงานพื้นผิวนั้นก็ไม ควรจะใชในปริมาณที่มากเกินไปจนทําใหเว็บไซตดูรก สวนใหญที่นิยมทําพื้นผิวนั้นก็เชน พื้นหลัง เปนตน

ภาพที่ 2.16 ตัวอยางเว็บทีใ่ ชสีที่ชัดเจน อักษรที่ใชสําหรับการแนะนํา เดนชัด และมีพื้นผิวทําใหเกิดมิติ ที่มา : http://www.sakunthairestaurant.co.uk/ : สถานะ Online

45

46

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

ขอผิดพลาดในการออกแบบเว็บไซต

กอนจะลงมือสรางเว็บไซตขึ้นมา ลองมาเรียนรูความผิดพลาดที่มักเกิดขึ้นในการออกแบบ เว็บไซตทั่วไป จาคอป นิลเซน ไดศึกษาวิจัยขอผิดพลาดในการออกแบบเว็บไซตเพื่อเปนแนวทางเลี่ยง ไมใหเกิดความผิดพลาดเหลานี้ซ้ําอีก (Jakob Nielsen's Alertbox, May 2, 1999) 1. ใชโครงสรางหนาเว็บเปนระบบเฟรม การ ใชระบบเฟรมในเว็บไซตสรางความสับสนใหกับผูใชอยางมาก ทําใหผูใชไมสามารถที่จะ bookmark หนาเว็บที่สนใจจะกลับเขามาอีกได , การแสดงชื่อไฟลของ url ไมถูกตอง , การสั่งใหพิมพ ผลลัพธไมแนนอน นอกจากนั้นผูใชยังไมสามารถคาดการณไดวาจะเกิดการเปลี่ยนแปลงขึ้นที่ เฟรมไหน หลังจากคลิ๊กที่ลิงคแลว 2. ใชเทคโนโลยีขั้นสูงโดยไมจําเปน คุณ ไมจําเปนตองใชเทคโนโลยีขั้นสูงเพื่อแสดงฝมือหรือดึงดูดความสนใจจากผู ใช เพราะจะใช ไดผลเฉพาะกับกลุมผูใชที่มีประสบการณสูงเทานั้น เนื่องจากผูใชสวนใหญสนใจกับเนื้อหาและการใช งานมากกวา และไมมีความพรอมที่จะใชเทคโนโลยีขั้นสูงที่พึ่งออกมาลาสุด 3. ใชตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา ใน หนาเว็บของคุณไมควรมีองคประกอบที่เคลื่อนไหวตลอดเวลาโดยไมมีหยุด ไมวาจะเปน Scrolling text , BLINK text , Marquees เพราะสิ่งเหลานี้นอกจากจะสรางความรําคาญและรบกวน สายตาผูอาน ยิ่งคุณมีสิ่งเคลื่อนไหวเหลานี้อยูมากเทาใด ก็จะยิ่งสรางความสับสนใหกับผูใชมากขึ้น เทานั้น 4. ที่อยูเว็บไซตที่ซับซอน (URL) ยากตอการจดจําและพิมพ ที่ อยูเว็บไซตที่ซับซอนนั้นอาจจะอยูในรูปของชื่อที่มีความยาวมาก , สะกดลําบาก , การใช ตัวอักษรพิมพเล็กผสมกับตัวพิมพใหญ รวมไปถึงการใชตัวอักษรพิเศษ เชน เสนใต ( _ ) , ยัติภังค ( - ) , และเครื่องหมาย tlide ( ~ ) ที่มักจะทําใหสับสน นอกจากนี้ที่อยูของเว็บไซตควรสื่อถึงโครงสรางของ ขอมูลภายในเว็บไซตอีก ดวย 5. ไมมีการแสดงชื่อและที่อยูของเว็บไซตในหนาเว็บเพจ เนื่อง จากผูใชบางคนจะเขาเขาสูหนาที่เปนขอมูลผานระบบคนหาหรือ Search engine โดย ไมไดผานหนาโฮมเพจมากอน ทําใหผูใชไมสามารถรูไดวากําลังในเว็บไหน และจะกลับเขามาอีกได อยางไร เพราะในหนานั้นไมมีชื่อหรือที่อยูของเว็บไซตใหเห็น

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

6. มีความยาวของหนามากเกินไป เว็บไซต จํานวนมากของไทยเรามักจะมีหนาแรกที่ยาวมาก เพราะตองการที่จะบรรจุขอมูลไวใน หนาแรกใหผูใชมองเห็นมากที่สุด ซึ่งกลับจากจะทําใหผูใชเกิดความสับสนกับขอมูลที่มีจํานวนมากเกินไป เหลา นั้น หนาเว็บที่มีความยาวมากจะทําใหเสียเวลาในการโหลดมาก และยังสรางความเหนื่อยลาใน การอานใหจบหนา แถมบางครั้งเกิดอาการตาลายมองหาสิ่งที่ตองการไมเจออีก 7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ อยา คิดวาผูใชจะเขาใจโครงสรางเว็บไซตไดดีเทากับคุณ ผูใชจะไมสามารถเขาใจถึงขอมูลที่ ตองการไดถาปราศจากระบบเนวิเกชันที่ ชัดเจน ถาผูใชหาสิ่งที่ตองการไมพบ เว็บไซตนั้นก็ไมมีโอกาสที่ จะประสบความสําเร็จได ดังนั้นในเว็บไซตหนึ่งอาจจําเปนตองใชระบบเนวิเกชันหลายรูปแบบรวมกัน เพื่อ อํานวยความสะดวกใหกับผูใชมากที่สุด 8. ใชสีของลิงคไมเหมาะสม โดย ปกติแลว ลิงคที่นําไปสูหนาที่ยังไมไดเขาไปดูนั้นจะเปนสีน้ําเงิน สวนลิงคที่ไดมีการเขาไป แลวจะเปนสีมวง การเปลี่ยนแปลงหรือสลับสีดังกลาวอยางไมรอบคอบ จะทําใหผูใชไมแนใจวาสวนไหน คือลิงค และลิงคไหนที่ไดคลิกเขาไปแลวบาง 9. ขอมูลเกาไมมีการปรับปรุงใหทันสมัย เมื่อ ผูใชพบวาขอมูลในเว็บไซตนั้นเกาไมทันตอสถานการณปจจุบัน ก็จะเกิดความไมเชื่อถือและ ไมอยากกลับมาใชบริการอีก ดังนั้นหลังจากการสรางเว็บไซตขึ้นมาแลว คุณจะตองคอยปรับปรุงดูแล ปรับปรุงเนื้อหาใหทันสมัยอยูเสมอ สวนขอมูลเกาที่ไมจําเปนแลว ก็อาจจัดเก็บไวในที่เฉพาะสําหรับผูที่ สนใจหรือลบออกตามความเหมาะสม 10. เว็บเพจแสดงผลชา กราฟก ขนาดใหญจะมีผลทําใหเว็บเพจนั้นตองใชเวลาในการดาวนโหลดมาก ซึ่งถาใชเวลานาน กวา 15 วินาที ขึ้นไปก็อาจจะทําใหผูใชขาดความสนใจ เนื่องจากผูใชมีความอดทนรอการแสดงผลของ เว็บเพจไดจํากัด ที่จริงแลวมีรายงานวิจัยของฝรั่งบอกไววา ถาเกิน 8 วินาที ผูใชกวา 90% จะเปลี่ยนไปดู เว็บอื่นแทน

47

48

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

สรุป

การออกแบบเว็บ (Web Design) มีความหมายเปนทั้งการออกแบบโปรแกรมฟงกชันการใชงาน ภายในเว็บ และยังหมายถึงการออกแบบเปนเหมือนการพัฒนาสวนหนาแสดงผลของเว็บใหดูดี ซึ่งการ ออกแบบในเชิงของศิลปะ อันประกอบไปดวยแนวคิดในการออกแบบ หลักกาออกแบบ และการใช องคประกอบศิลปตางๆ มาเปนกรณีศึกษา แนวคิดในการออกแบบหนาเว็บไซตประยุกตมาจากเรียนรูจากเว็บไซตตาง ๆ ประยุกตรูปแบบ จากสิ่งพิมพ ใชแบบจําลองเปรียบเทียบ และ ออกแบบอยางสรางสรรค เพื่อดึงดูดความสนใจทั้งเนื้อหา และรูปแบบ โดยอาศัยทฤษฎีเพื่อใชเปนพื้นฐานสําหรับสรางเว็บใหตรงกับความตองการของผูใช และ เปนเว็บที่มีประสิทธิภาพมากที่สุด นั่นคือ 1) ความสามารถในการเรียนรู (Laernability) 2) หลักการ ความพรอมใชงาน (Usability Principles) 3) ความสามารถที่ทุกคนเขาถึงเว็บ (Web Accessibility) หลักการออกแบบเว็บไซตนั้นโดยคํานึงถึงองคประกอบพื้นฐานที่สําคัญของเว็บไซต ไดแกความ เรียบงาย (Simplicity) ความสม่ําเสมอ (Consistency) ความเปนเอกลักษณ (Identity) ระบบ เนวิเกชันที่ใช งานงาย (User-Friendly Navigation) เนื้อหาที่มีประโยชน (Useful Content) มีลักษณะที่นาสนใจ (Visual Appeal) การใชงานอยางไมจํากัด (Compatibility) คุณภาพในการออกแบบ (Design Stability) ระบบ การใชงานที่ถูกตอง (Functional Stability) และยังตองคํานึงถึงขอผิดพลาดที่จะเกิดขึ้นไดแกการ ใชระบบเฟรมในเว็บไซตสรางความสับสน แกผูใช ไมใชเทคโนโลยีขั้นสูงโดยไมจําเปน ไมใชตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลาที่อยูเว็บไซต ที่ซับซอน (URL) ยากตอการจดจําและพิมพ ไมมีการแสดงชื่อและที่อยูของเว็บไซตในหนาเว็บเพจ มี ความยาวของหนามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ ใชสีของลิงคไมเหมาะสม ขอมูลเกา ไมมีการปรับปรุงใหทันสมัย และเว็บเพจแสดงผลชา

ขอควรจํา

1. ความหมายของการออกแบบเว็บ การออกแบบเว็บ (Web Design) เปนคําศัพทที่มี 2 ความหมาย ความหมายแรกคือ การออกแบบพัฒนาระบบ อาจเปนโปรแกรมฟงกชันการใชงานภายใน เว็บ อีกความหมายหนึ่งคือ การออกแบบเปนเหมือนการพัฒนาสวนหนาแสดงผลของเว็บใหดูดี 2. ความสามารถที่ทุกคนเขาถึงเว็บ (Web Accessibility) คือการเขาถึงไดของผูใชไดทุกๆ คน และการเขาถึงไดทุกๆ สวน ของเว็บไซต

บทที่ 2 หลักการพื้นฐานเกี่ยวกับการออกแบบเว็บไซต

3. การความพรอมใชงาน (Usability Principles) การออกแบบเว็บไซตเพื่อพรอมใชงาน หรือใหเกิดประโยชนแกผูใช มีพื้นฐานจากความตองการเพิ่มความพึงพอใจใหแกผูใช โดยไมไดมอง เพียงแควาผูใชเว็บมาที่เว็บแลวคลิกออกไป แตจะตองพิจารณาวาผูใชจะตองอยูในเว็บไซตเราและกลับ เขามาใชอีกภายหลัง

49

บทที่ 3 กระบวนการออกแบบเว็บไซต

7

บทที่ 3 กระบวนการออกแบบเว็บไซต

บทที่

กระบวนการออกแบบเว็บไซต

การออกแบบเว็ บ ไซต มี ส ว นสํ า คั ญ ในการ สรางความประทับใจ ดึงดูดความนาสนใจใหกับผูเขา มาใชบริการ นอกจากจะตองพัฒนาเว็บใหเนื้อหาดีมี ประโยชน มีความรูเกี่ยวกับภาษาและเครื่องมือตางๆ ที่ใชพัฒนาแลว สิ่งสําคัญอีกอยางหนึ่งที่ตองทําความ เขาใจ คือ กระบวนการออกแบบเว็บไซต ซึ่งจะชวยให สามารถกําหนดทิศทางการทํางานของเว็บไซตไดตรง ตามเป า หมาย การออกแบบเว็ บ ไซตนั้ น ไมไ ด หมายถึงลักษณะหนาตาของเว็บไซตเพียงอยางเดียว แตเกี่ยวของทั้งหมดตั้งแตการกําหนดเปาหมาย การ ระบุกลุมเปาหมาย การจัดระบบขอมูล การสราง ระบบเนวิเกชัน การออกแบบหนาเว็บ รวมไปถึงการ ใชกราฟก การเลือกใชสี และการจัดรูปแบบตัวอักษร

51

52

บทที่ 3 กระบวนการออกแบบเว็บไซต

ขั้นตอนการออกแบบเว็บไซต

ภาพที่3.1 กระบวนการออกแบบเว็บไซต (web design process)

กระบวนการออกแบบเว็บไซตแบงออกเปนขั้นตอนตางๆ ซึ่งมีอยูหลายแนวคิด หนังสือเลมนี้จึง ขอรวบรวม และสรุปมาเฉพาะประเด็นสําคัญๆ เพื่อใหเหมาะสาหรับ ผูเริ่มตนที่จะใชเปนแนวทางในการ สรางเว็บไซตตั้งแตขนาดเล็กจนถึงขนาดกลาง

1. กําหนดเปาหมายและวางแผน (Site Definition and Planning) ในการออกแบบเว็บไซตควรกําหนดเปาหมายและวางแผนไวลวงหนา เพื่อใหการทํางานในขั้น ตอๆ ไปมีแนวทางที่ชัดเจน เรื่องหลักๆ ที่ควรทําในขั้นตอนนี้ประกอบดวย 1.1 กําหนดวัตถุประสงคของเว็บไซต เพื่อใหเห็นภาพที่ชัดเจนวาเว็บไซตนี้ตองการ นําเสนอหรือตองการใหเกิดผลอะไร เชน เปนเว็บไซตสําหรับใหขอมูล หรือขาย สินคา ซึ่งวัตถุประสงคนี้

บทที่ 3 กระบวนการออกแบบเว็บไซต

จะเปนตัวกําหนดรายละเอียดอื่นๆ ที่จะตามมา เชน โครงสรางของเว็บไซต รวมทั้งลักษณะหนาตาและ สีสันของเว็บเพจ ในกรณีที่เปนเว็บไซตของบริษัทหรือองคกร วัตถุประสงคนี้ก็จะตองวางใหสอดคลองกับ ภารกิจขององคกรดวย ขั้นตอนนี้เปนการกําหนดขอบเขต เก็บรวบรวมขอมูลเกี่ยวกับเปาหมายและความ ตองการ ของผูใช กอนการออกแบบเว็บไซต เชน การกําหนดตารางการทํางาน งบประมาณที่ใช ทรัพยากร และ ทีมงานหรือบุคคลที่รับผิดชอบ เปนตน รวมไปถึง "ความเขาใจลูกคา" ที่มีตอธุรกิจและความตองการไมวา จะเปนเรื่องของ Brand, ภาพพจนองคกรที่ตองการจะสื่อ, เนื้อหาที่ อยูบนเว็บ, Business Model ของ ลูกคา รวมไปถึงเทคโนโลยี ที่ลูกคาตองการ และความเขากันไดกับเทคโนโลยีที่ลูกคามีอยูแลว พรอมทั้ง ศึกษาเว็บไซตของคูแขง ทั้งในแงเนื้อหา การทําตลาด แนวทางการออกแบบเว็บไซต เพื่อนําขอมูลเหลานี้ มาประมวลผล หากลยุทธที่เหมาะสมในการออกแบบเว็บไซต

1.2 กําหนดเปาหมาย การกํ า หนดเปา หมายหรื อ วั ต ถุ ป ระสงคจ ะชว ยใหผู อ อกแบบสามารถกํ า หนดทิ ศ ทางการ ดําเนินงานงบประมาณ รวมทั้งระยะเวลาไดอยางเหมาะสม ซึ่งถือไดวาเปนขั้นตอนที่สําคัญที่สุดของการ ดําเนินงานทั้งหมด อยางไรก็ตามเพื่อใหผลงานตรงตามความตองการของลูกคามากที่สุด จึงควรคํานึง และใหความสําคัญกับปจจัยดังตอไปนี้ 1.2.1 ความตองการของลูกคา ถือเปนสิ่งสําคัญในการดําเนินงาน ผูออกแบบจะตอง รวบรวมความตองการของลูกคาอยางละเอียดวาตองการงานออกมาในรูปแบบใด เชน หนาตาของ เว็บ ไซต หรือระยะเวลาการทํางาน เปนตน 1.2.2 เปาหมายของลูกคา กอนการออกแบบเว็บไซตผูออกแบบตองทราบถึงเปาหมายหรือ วัตถุประสงคของลูกคาวาตองการสรางเว็บไซตเพื่องานทางดานใด 1.2.3 ขอมูลทางเทคนิค เชน ชนิดของบราวเซอร คอมพิวเตอร การใชงานเว็บไซต และจุด ประสงคของการสรางเว็บไซต รวมไปถึงการเขียนโปรแกรมเพื่อใหเว็บไซตทํางานไดตามที่ลูกคาได กําหนดแนวทางไว 1.2.4 ความสวยงามของการออกแบบ เปนสิ่งที่ผูออกแบบเว็บไซตตองคํานึงถึง เชนเดียวกัน ซึ่งการออกแบบเว็บไซตใหสวยงาม และนาสนใจก็เปนอีกสวนหนึ่งที่สามารถดึงดูดผูมาเยี่ยม ชมได

1.3 เตรียมแหลงขอมูล เนื้อหาหรือขอมูลคือสาระสําคัญที่แทจริงของเว็บไซต ตองรูวาขอมูล ที่จําเปนตองใชจะมาจากแหลงใดไดบาง เชน ถาเปนเว็บของบริษัท ใครที่จะเปนผูใหขอมูล หรือถาเปน เว็บขาวสาร ขาวนั้นจะมาจากแหลงใด มีลิขสิทธิ์หรือไม

53

54

บทที่ 3 กระบวนการออกแบบเว็บไซต

1.4 เตรียมทักษะหรือบุคลากร การสรางเว็บตองอาศัยทักษะหลายๆ ดาน เชน ในการ เตรียมเนื้อหา ออกแบบกราฟก เขียนโปรแกรม และการดูแลเว็บเซิรฟเวอร เปนตน ซึ่งถาเปนเว็บไซต ขนาดใหญอาจจะตอ งใชบุคลากรเปนจํานวนมาก แตสาหรับเว็บไซตเล็กๆ ที่ตองดูแลเพียงคนเดียว จะตองศึกษาหาความรูในเรื่องนั้น ๆ เพื่อเตรียมพรอมเอาไว

1.5 เตรียมทรัพยากรตางๆ ที่จําเปน เชน โปรแกรมสําหรับสรางเว็บไซต, โปรแกรมสําหรับ สรางกราฟก ภาพเคลื่อนไหว และมัลติมีเดีย, โปรแกรมยูทิลิตี้, โปรแกรมสรางฐานขอมูลและอื่นๆ ที่ตอง ใช, การจดทะเบียนโดเมนเนม ตลอดจนการเตรียมหาผูใหบริการรับฝากเว็บไซต (web hosting) และ เลือกแผนบริการที่เหมาะสม

2. ออกแบบเว็บเพจและเตรียมขอมูล (Page Design and Content Editing) การออกแบบเว็บไซตจึงไมใชแคการทําใหเว็บไซตสวยงาม แตตองใชงานงาย สะดวกในการ คนหา การแสดงผล และการทองไปยังสวนตาง ๆ ของเว็บอีกดวย ขั้นตอนนี้จะเปนการนําขอมูลตางๆ ที่ รวบรวมไดจากขั้นแรก ไมวาจะเปนวัตถุประสงคของเว็บไซต, คุณลักษณะและขอจํากัดของกลุมผูชม เปาหมาย รวมทั้งเนื้อหาหลักของเว็บไซต นํามาประเมิน วิเคราะห และออกแบบ เพื่อใหไดโครงสราง ขอมูลและขอกําหนด ซึ่งจะใชเปนกรอบสําหรับการออกแบบและดําเนินการในขั้นตอๆ ไป ผลที่ไดรับจาก ขั้นตอนนี้ควรประกอบไปดวย 1. ออกแบบโครงสรางของเว็บไซต (site structure), สารบัญ (table of content) , ลําดับการ นําเสนอ (storyboard) หรือผังงาน (flowchart) 2. สรา งไซตแม็ป (Site Map) เพื่อออกแบบการเชื่อ มโยง ระบบนําทางหรื อเนวิ เกชั่ น (navigation) ซึ่งผูชมจะใชสาหรับเปดเขาไปยังสวนตางๆของเว็บไซต 3. การแบงพื้นที่การแสดงผล สําหรับแสดงเนื้อหาของแตละสวน การจัดวางองคประกอบที่จะ นํามาใชบนเว็บเพจ 4. สร า งเว็ บ เพจแต ล ะหน า ตามที่ อ อกแบบมี อ ะไรบ า ง เช น ภาพกราฟ ก , เสี ย ง, วิ ดี โ อ ,มัลติมีเดีย,แบบฟอรม ฯลฯ อะไรบาง และจะจัดวางตรงไหน ดวยภาษาหรือเครื่องมือตางๆ ตามที่ผูออกแบบเว็บไซตตองการ เชน HTML, PHP, ASP หรือโปรแกรม Dreamweaver , Photoshop , Flash เปนตน

บทที่ 3 กระบวนการออกแบบเว็บไซต

2.1 ออกแบบโครงสรางของเว็บไซต (Site structure design) จะเปนการดีถาเราจะเริ่มตนวางโครงรางของเว็บไซตเหมือนการสรางบาน ที่เราจะกําหนด วา หองนอนอยูที่ ตําแหนงใด หองนั่งเลนพักผอน หองรับแขก หองครัว หองน้ํา อยูที่ไหน จะ เชื่อมโยง (มี ทางเดิน) อยางไรจึงจะสะดวกแกผูมาเยี่ยมเยือน และผูอยูอาศัยเองจะทําอะไรไดสะดวก เว็บไซตก็เหมือนบานเมื่อผูมาเยี่ยมเยือนไดรับความสะดวก หาอะไรไดงายๆ ใชบริการไดทันใจ ไหม หลงทางสับสนในการดูเนื้อหา ความประทับใจตอเว็บไซตของเราก็จะมีมากขึ้น การออกแบบโครงสรางขอมูลภายในเว็บไซตจะชวยใหผูออกแบบสามารถกําหนดลําดับการ ทํางานตางๆ ภายในเว็บไซตไดงาย และสะดวกยิ่งขึ้น รวมไปถึงทําใหลูกคาเห็นโครงสรางของเว็บไซต แนวทางการออกแบบ และรูปแบบของการทํางานตางๆ ซึ่งโดยสวนใหญจะเปนงานบนกระดาษกอนที่จะ มีการออกแบบจริง วิธีจัดโครงสรางเว็บไซตสามารถทําไดหลายแบบ แตแนวคิดหลักๆ ที่นิยมใหกัน ใชกัน มีอยู 2 แบบ คือ (ในทางปฏิบัติอาจมีการใชหลายแนวคิดผสมผสานกัน ก็ได) 1. จัดตามกลุมเนื้อหา (Content-based Structure) 2. จัดตามกลุมผูชม (User-based Structure) การเลือกวิธีการจัดวางโครงสรางเว็บไซตนั้นขึ้นอยูกับผูออกแบบเว็บไซต วาตองการใหออกมา ในรูปแบบใด โดยคํานึงถึงความสมดุลของโครงสราง มีการเชื่อมโยงสัมพันธกันระหวางหนาเว็บเพจตางๆ รวมถึงการเชื่อมโยงภายในแตละหนาเว็บเพจดวย ซึ่งการวางแผนโครงสรางจะตองวางใหดีเพื่อจะเปน การปองกันปญหาที่อาจจะเกิดกับผูใช เชน การที่ผูใชไมสามารถยอนกลับมาดูขอมูลในหนาหลักได เปน ตน การออกแบบโครงสรางของเว็บไซตที่ไดรับความนิยมมาก ในปจจุบันสามารถออกแบบไดหลาย รูปแบบโดยสามารถแบงออกไดเปน 4 รูปแบบใหญ คือ

2.1.1 โครงสรางแบบเรียงลําดับ (Sequential Structure) โครงสรางประเภทนี้จะมี ลักษณะเรียงลําดับแตละเว็บเพจไปในลักษณะเสนตรง ซึ่งใชแนวคิดเชนเดียวกับหนังสือ ขอดีของ โครงสราง รูปแบบนี้คือ งายตอการดูแลปรับปรุงแกไข สวนขอเสียนั้นก็คือ ผูใชจะตองผานหนาเว็บเพจที่ ไมจําเปนกอนเพื่อเขาสูเว็บเพจที่ตองการ

ภาพที่3.2 โครงสรางแบบเรียงลําดับ (Sequential Structure)

55

56

บทที่ 3 กระบวนการออกแบบเว็บไซต

2.1.2 โครงสรางแบบลําดับขั้น (Hierarchy Structure) โครงสรางประเภทนี้จะมี ลักษณะแนวคิดคลายกับตนไม โดยมีจุดเริ่มตนที่หนาแรกกอนแลวจึงเขาสูเว็บเพจถัดไป ซึ่งอยูใน ลักษณะการแยกออกเปนหัวขอตางๆ และภายในยังมีหัวขอยอยที่สามารถแยกออกไปไดอีก ขอดีของ โครงสรางรูปแบบนี้คืองายตอการแยกแยะและการจัดระบบขอมูล สวนขอเสียคือตองออกแบบใหมี โครงสรางที่มีความสมดุล

ภาพที่ 3.3 โครงสรางแบบลําดับขั้น (Hierarchy Structure)

1.3 โครงสรางแบบตาราง (Grid Structure) โครงสราง ประเภทนี้มีความซับซอน เปนการเพิ่มความยืดหยุนใหเว็บเพจใหแกผูใชมากกวาสองแบบแรก โดยมีการเชื่อมโยงในแตละสวนของ เว็บเพจที่ไมเปนเชิงเสนตรง เนื่องจากผูใชสามารถเปลี่ยนทิศทางการเขาสูเว็บเพจที่ตองการได

ภาพที่ 3.4 โครงสรางแบบตาราง (Grid Structure)

บทที่ 3 กระบวนการออกแบบเว็บไซต

1.4 โครงสรางแบบใยแมงมุม (Web Structure) โครง สรางประเภทนี้จะมีความ ยืดหยุนมากที่สุดโครงสรางรูปแบบนี้ไมมีโครงสรางที่ตายตัวแนนอน ทุกหนาในเว็บสามารถเชื่อมโยงไป ถึงกันไมวาจะอยูในเว็บเพจหนาใดๆ ก็สามารถที่จะเชื่อมโยงไปยังเว็บเพจหนาอื่นๆ ได

ภาพที่ 3.5 โครงสรางแบบใยแมงมุม (Web Structure)

จากรูปแบบโครงสรางเว็บไซตดังกลาวแสดงใหเห็นวา โครงสรางของเว็บเปนสวนที่ควรให ความสําคัญไมวาจะเลือกรูปแบบใดก็ควรคํานึงถึงผูใชเปนหลัก ถาการวางแผนโครงสรางที่ดีก็จะสงผลดี ตอผูใช แตถาการวางแผนโครงสรางไมดีก็ยอมสงผลเสียตอผูใชดวยเชนกัน

ตัวอยางเชน บริษัท อีเวนท ตองการวาจางใหสรางเว็บไซตสําหรับนําเสนอขอมูลภายในบริษัท โดยตองการใหแสดงรายละเอียดขอมูลของบริษัทไดทั้งหมด เชน ประวัติ นโยบาย พันธะกิจ ผลงาน สินคาและบริการ เปนตน ลูกคาสามารถติดตอกับทางบริษัทผานทางเว็บไซตได รวมทั้งสามารถแสดง โฆษณาสินคาหรือบริการ ขอมูลขาวสาร และรายละเอียดตางๆ ของบริษัทได สมมุติวาไดศึกษาความตองการของลูกคาเรียบรอยแลว สามารถกําหนดโครงสรางขอมูลและ เพจเนื้อหาในเว็บไซตได ดังนี้ 1) 3) 5) 7)

เพจแรกสําหรับแสดงรายละเอียดของบริษัท เพจแสดงนโยบาย และพันธะกิจของบริษทั เพจแสดงรายละเอียดของสินคาและบริการ เพจอื่นๆ ที่เกี่ยวของ

2) เพจแสดงประวัติการกอตั้งบริษัท 4) เพจนําเสนอผลงาน 6) เพจชองทางการติดตอ

57

58

บทที่ 3 กระบวนการออกแบบเว็บไซต

จากขอมูลที่ไดขางตน สามารถกําหนดเปนโครงสรางขอมูลที่เชื่อมโยงกันทั้งหมดในเว็บไซตได ดังภาพ

นโยบายบริษัท ประวัติบริษัท

ติดตอบริษัท เว็บไซตบริษัท อีเวนท (index.html)

ผลงานบริษัท

เพจอื่นๆ ที่เกี่ยวของ

สินคาและบริการ

ภาพที่3.6 โครงสรางขอมูลที่เชื่อมโยงกันภายในเว็บไซต

2.2 สรางไซตแม็ป (Site Map) การกําหนดโครงสรางขอมูลเว็บไซตดังกลาวขางตน เพียงอยางเดียวจะยังไมสามารถมองเห็น ความสัมพันธของแตละเพจได ซึ่งผูออกแบบจะตองทําการเปลี่ยนโครงสรางขอมูลไปเปนการสืบทอด ขอมูล หรือรูปแบบโครงสรางขอมูลแบบตนไม (Tree Structure) กอน ดวยการแบงเนื้อหาที่ตองการนํามา เสนอบนเว็บไซตออกเปนกลุมหรือหมวดหมู โดยเริ่มตนกําหนดกลุมหลักกอน จากโครงสรางขอมูลที่ กําหนดไวขางตน สามารถนํามาจัดกลุมเนื้อไดดังนี้ เว็บไซตบริษัท อีเวนท (index.html)

ขอมูลบริษัท (detail_company.

บริการ (service.html)

ภาพที่ 3.7 แสดงการกําหนดกลุม เนื้อหาหลักในเว็บไซต

ผลงาน (portfolio.html)

บทที่ 3 กระบวนการออกแบบเว็บไซต

เมื่อแบงกลุมของเนื้อหาหลักไดแลวจะทําใหมองเห็นโครงสรางการทํางานของเว็บไซตในระดับ ตางๆ ไดงายขึ้น นอกจากนี้ยังตองเพิ่มเพจที่เกี่ยวของในแตละสวนเขาไปดวย เพื่อใหเห็นรายละเอียด และจํานวนเพจของเนื้อหาแตละสวนไดชัดเจนยิ่งขึ้น การสรางไซตแม็ป (Site Map)เปนการกําหนด โครงสรางการเชื่อมโยงของเพจในเว็บไซต เพื่อความสะดวกในการคนหา หรือเปนการนําองคประกอบ ทั้งหมดในเว็บไซตมาจัดลําดับเปนลําดับชั้นที่เกี่ยวของกัน จากการสืบทอดขางตนสามารถนํามาสราง ไซตแม็ปของเว็บไซตไดดังภาพ เว็บไซตบริษัท อีเวนท (index.html)

ขอมูลบริษัท (detail_company.html

กรรมการ วิสัยทัศน

สินคา และ บริการ (service.html)

ขาวสาร (news.html)

โปรโมชั่น สินคา ราคา

กิจกรรม บทความ ติดตอ

ภาพที่ 3.8 แสดงการกําหนดการสืบทอดของเนื้อหาแตละกลุมในเว็บไซต

2.3 การแบงพื้นที่การแสดงผล การสร า งไซต แ ม็ ป ข า งต น ยั ง ไม ใ ช ขั้ น ตอนสุ ด ท า ยในการวางแผนเพื่ อ ออกแบบเว็ บ ไซต ผูออกแบบจะตองสรางเพจสําหรับแสดงเนื้อหาของแตละสวนดวยการแบงพื้นที่ ซึ่งเปนการแบงพื้นที่การ แสดงเนื้อหาบนเพจมีรูปแบบที่แตกตางกันออกไปตามความตองการของผูออกแบบหรือลูกคา

59

60

บทที่ 3 กระบวนการออกแบบเว็บไซต

รูปแบบ Page Layout ที่มีใชกันอยูในปจจุบนั ซึ่งเกือบจะเรียกวาเปนมาตรฐาน Page Layout มีดังนี้

Basic page layout - one column with header

Basic page layout - once column with footer

Common page layout - one column with header and footer

Two column only - typically used as the body layout for a one column page layout

two column with header

two column with footer

บทที่ 3 กระบวนการออกแบบเว็บไซต

Two column with header and footer

three column with header and footer

Three column only

three column with header

three column with footer

ภาพที่ 3.9 รูปแบบการจัดหนาเว็บไซต

61

62

บทที่ 3 กระบวนการออกแบบเว็บไซต

นอกเหนือจาก Page Layout ดังที่กลาวมาแลวแลว ในกรณีที่เรามีขอมูลที่ตองการแสดงในเพจ เยอะกวา เราก็สามารถสราง Page Layout ใหมีความซับซอนกวาเพื่อใหใสขอมูลไดเยอะกวาเดิม โดย ขอมูล Page Layout ตามดานลางนี้ เปนตัวอยางในการนํา Page Layout แบบดั้งเดิม มาออกแบบ เพิ่มเติมซึ่งจะได Page Layout ใหมดังนี้

ภาพที่ 3.10 Page Layout ที่มีความซับซอนเพื่อใหใสขอมูลไดมากขึ้น

บทที่ 3 กระบวนการออกแบบเว็บไซต

สวนประกอบที่สําคัญของเว็บไซต

Head Menu

Content

Footer

ภาพที่ 3.11 สวนประกอบตางๆ ของเว็บไซต ที่มา : เว็บหองเรียนอาจารยณัฐ (ออกแบบโดย ณัฐ จันทโรทัย, 2553 : สถานะ Online)

63

64

บทที่ 3 กระบวนการออกแบบเว็บไซต

ซึ่งในการออกแบบสวนประกอบของเว็บไซตหนึ่งหนานั้น Page Layout จะประกอบไปดวย องคประกอบตาง ๆ ดังนี้ Head เปนสวนประกอบสวนหัวของเพจ ซึ่งอาจประกอบไปดวย โลโกของเว็บ ชื่อเว็บและ ภาพ Banner ที่สื่อถึงเนื้อหาของเว็บ Menu เมนูคือสวนที่เปนลิงคของหัวขอตาง ๆ ที่จะลิงคไปยังเพจตาง ๆ อาจจะอยูสวนบนกลาง บริเวณดานลางจาก head ฝงซายหรือฝงขวาของเพจ Content สวนของเนื้อหาหลักของเว็บไซตที่ตองการแสดง ซึ่งสวนใหญจะอยูบริเวณตรงกลาง ของเพจ หรือขอมูลเนื้อหา รองลงไป อาจจะอยูดานซายหรือขวาของเพจก็ได Footer สวนปลายของเพจ ซึ่งจะอยูลางสุดของเพจเสมอ มีไวเพื่อใสขอมูลเดี่ยวกับที่อยูของเว็บ หรือ อีเมลลสําหรับติดตอเว็บ ชื่อผูดีไซนเว็บ และขอมูลเกี่ยวกับลิขสิทธ อยางใดอยางหนึ่ง บางครั้งอาจ ไมมี footer ก็ได ซึ่งขอมูลในสวนนี้อาจจะนําไปไวในหนา Contact us ก็ได

2.4 สรางเว็บเพจแตละหนาตามที่ออกแบบ การออกแบบเว็บไซตอยางมีคุณภาพ ซึ่งไมใชแคการเขียนเนื้อหา แตตองอาศัยทักษะหลาย ๆ ดาน ไดแก information design, graphic design และ interface design เพื่อชวยใหเว็บมีเนื้อหาที่ ครบถวนและเขาใจงาย มีความสวยงาม นาสนใจ เริ่มตนการสรางหนาเว็บเพจตามที่ไดออกแบบตามเลย เอาทกลาวขางตน เริ่มตนดวยการออกแบบราง (sketch) เชน ภาพกราฟก, เสียง, วิดีโอ,มัลติมีเดีย, แบบฟอรม ฯลฯ อะไรบาง และจะจัดวางยังไงจะกลาวถึงในบทตอไป

ภาพที่ 3.12 การแบบรางสําหรับองคประกอบตางๆ เชน รูปภาพหรือกราฟก

บทที่ 3 กระบวนการออกแบบเว็บไซต

เมื่อ เลือกแบบไดตามตองการ จึงเริ่มลงมือสรางเว็บดวยภาษาหรือเครื่องมือตางๆ ตามที่ผู ออกแบบเว็บไซตมีความถนัด เชน HTML, PHP, ASP หรือโปรแกรม Dreamweaver, Photoshop, Flash เปนตน

ภาพที่ 3.13 การออกแบบเว็บดวยโปรแกรม Photoshop

ภาพที่ 3.14 การออกแบบเว็บดวยโปรแกรม Dreamweaver

65

66

บทที่ 3 กระบวนการออกแบบเว็บไซต

3. การพัฒนาและปรับปรุงเว็บไซต (Development) จากการจัดทําเว็บไซตไปในครั้งแรกนั้นเปรียบเสมือนเปนการทดลองเว็บไซตของเราในดานตางๆ วามีประสิทธิภาพ และสามารถดึงดูดความสนใจของผูเยี่ยมชมเว็บไซตและกลุมลูกคาของเราไดมากนอย เพียงใดเทานั้น การจัดทําเว็บไซตในครั้งแรกนั้นอาจจะเปนการทดลองฐานขอมูล การยอมรับของกลุม ลูกคา แตมิไดหมายความวาเว็บไซตของเราจะสมบูรณแบบในระยะยาว การพัฒนาเว็บไซตสามารถทํา เพียงคนเดียวหรือทําเปนทีมก็ได ขึ้นอยูกับความจําเปนที่แตกตางกัน กลาวคือเปนเว็บไซตขนาดใหญหรือ เล็ก หรือเว็บไซตที่สวนตัว การพัฒนาและปรับปรุง เริ่มตั้งแตการตรวจสอบเว็บเซิรฟเวอรวาไมหยุดทํางานบอยๆ หรือลิงค ที่เชื่อมโยงไปภายนอกยังคงใชได (เนื่องจากเว็บไซตนั้นอาจปดไป) ถาเปนเว็บขาวสารก็ตองปรับปรุง ขอมูลใหทันสมัยตลอดเวลา ถามีการใชฐานขอมูลก็ตองแบ็คอัพขอมูลอยางสม่ําเสมอ นอกจากนั้นควร ตรวจสอบผูชมมีการเปลี่ยนคุณสมบัติ (เชน ความละเอียดของจอภาพและรุนของบราวเซอร) ไปหรือไม เนื่องดวยปจจุบันความกาวหนาทางเทคโนโลยีและการใหบริการอินเตอรเน็ต ความเร็วสูงมีการพัฒนาอยาง ตอเนื่อง จึงสงผลใหการเขาถึงขอมูลขาวสารเปนไปไดอยางรวดเร็วและทั่วถึง ทําใหเหลาผูผลิตรวมถึง นักพัฒนา พรอมใจกันพัฒนาซอรฟแวรและอุปกรณตางๆ ใหสามารถใชงานอินเตอรเน็ตได ไมวาจะเปน โทรศัพท Tablet หรือแมแตโทรทัศนเองก็สามารถใชงานอินเตอรเน็ตไดเชนกัน นั่นหมายความวาปจจุบัน มีอุปกรณมากมายที่สามารถใชงานอินเตอรเน็ต ซึ่งมีคุณสมบัติที่แตกตางกันออกไป เชน ความกวาง ความสูง ความละเอียดหนาจอ และอื่นๆ อีกมากมาย ซึ่งจะกลาวในบทตอไป หลักการควรจําในการพัฒนาเว็บไซต และระบบตางๆในเว็บไซตของคุณนัน้ ก็คือ 1. การกําหนดแหลงเก็บขอมูล สําหรับเว็บไซต ที่สรางขื้น การกําหนดโฟลเดอร (Folder) สําหรับ จัดเก็บขอมูลและกําหนดประเภทแฟมขอมูล (File) ที่ใชในการพัฒนาเว็บไซต 2. การกําหนดรูปแบบของคําสั่งหลักที่ใชในการพัฒนาเว็บไซต เชน 1) อินคลูด (Includes) ใชในการจัดการกับเมนู หลัก เมนูยอย และสวนทาย (Footer) ของ ทุกๆ เว็บเพจซึ่งมีขอดีคือ ชวยใหการบริหารจัดการเว็บไซตงายและสะดวกลดการซ้ําซอนในการทํางาน ลดความผดพลาดในการเขียนคําสั่ง การแกไขสามารถทําไดงายและรวดเร็ว 2) แผนแบบ (Cascading style sheets หรือ CSS) ใชในการกําหนดการแสดงผลของ ตัวอักษรใหมีรูปแบบและขนาดเหมือนๆ กัน ซึ่งมีขอดีคือ ผูดูแลเว็บไซตสามารถควบคุมรูปแบบของ ตัวอักษรใหเปนมาตรฐานเดียวกันทั้งเว็บไซตทําใหไมตองเสียเวลาในการดาวนโหลดเว็บเพจนาน และ สามารถจัดรูปแบบการแสดงผลภายในเว็บเพจได ตามที่ออกแบบไว แตสวนมากการเขียน Code เหมือน เปนยาขมของ Web Designer ที่ตองทําใจกลืนมันลงไป จริงๆ แลว html กับ css ไมยากที่จะทําความ เขาใจเลย เพราะมันเปนภาษาที่เขียนแลวแสดงผลออกมาทันที แบบผิดตรงไหนก็หาจุดที่ตองแกไดงาย กวา php หรือ javascript

บทที่ 3 กระบวนการออกแบบเว็บไซต

ภาพที่ 3.15 รหัส(code)ภาษา ที่ใชในเว็บไซต

Web Design เปนสาขางานดีไซนที่ไมเหมือนกับสาขาอื่นๆ เพราะสื่อของเว็บไมใชกระดาษ แต เปนหนาจอใดๆ ที่สามารถเชื่อ มตออินเตอรเน็ตได ทําใหการออกแบบเว็บไซต มีสิ่งที่ตองคํานึง นอกเหนือไปจากความสวยงามอีก เชน การใชงาน และการรองรับการแสดงผลในหลายๆ ขนาดหนาจอ และในทุกๆ บราวเซอร ยิ่งปจจุบันมีอุปกรณที่สามารถเชื่อมตอ Internet ไดมากขึ้น ก็ยิ่งทําใหเราตอง เขียนใหสะดวกกับผูใชในทุกๆ อุปกรณใหมากที่สุดตามไปดวย และจุดนี้เองที่ทําใหเราตองหันมาสนใจ HTML & CSS กันอยางจริงจังสักที เหตุผลที่ Web Designer ควรเขียน HTML & CSS เอง อาจมีคนแยงวา ทําไมหนาที่การขึ้น หนาเว็บดวย HTML ตองเปนงานของ Web Designer ไมใชงานของ Programmer หรือ เหตุที่ตองควร เขียน HTML & CSS เอง เพราะบางที โปรแกรมเมอรไมสามารถเขาใจไดวา คนดีไซนจริงๆแลวตองการ อะไร แบบไหน อยางไร ยิ่งตัวเว็บยิ่งมีความละเอียดมาก ก็ยิ่งไมเขาใจ สุดทายงานที่ออกมามักจะไม เหมือนหนาตาที่เราดีไซนไวซะทีเดียว

4. เผยแพรและสงเสริมใหเปนที่รูจกั (Launch and Promotion) โดยทั่วไปการนาเว็บไซตขึ้นเผยแพรบนอินเทอรเน็ต จะทําดวยการอัพโหลดไฟลทั้งหมด คือ HTML และไฟลอื่นๆ ที่เกี่ยวของขึ้นไปเก็บบนเว็บเซิรฟเวอรที่มีคุณเปดบริการไว การอัพโหลดเว็บไซตหรือ บางครั้งเรียกวาการ “พับบลิช” (publish) ใน ขั้นนี้จะมีเรื่องหลักๆ ที่ตองจัดการอยู 2 เรื่องดวยกัน คือ

67

68

บทที่ 3 กระบวนการออกแบบเว็บไซต

4.1 ลงทะเบียนขอพื้นที่เว็บไซต เมื่อสิ้นสุดขั้นตอนการพัฒนาเว็บไซตทั้งหมดเรียบรอยแลว ขั้นตอนตอไปคือ การนําเว็บไซตนั้น ไปเผยแพรบนเครือขายอินเทอรเน็ต เพื่อใหผูคนสามารถเขามาชมเว็บไซตได โดยการนําขึ้นไปเก็บไวที่ เว็บเซิรฟเวอรองคกร หรือขอพื้นที่เว็บไซตกับผูใหบริการเว็บโอสติ้ง (Web Hosting) ซึ่งมีทั้งฟรีและเสียคา ใชจาย 4.2 อัฟโหลดเว็บไซต เมื่ อ พั ฒ นาเว็ บ ไซต เ สร็ จ สมบู ร ณ และมี พื้ น ที่ สํ า หรั บ เก็ บ เว็ บ ไซต ที่ ต  อ งการนํ า ไปเผยแพร สู อินเทอรเน็ตเรียบรอยแลว ขั้นตอนสุดทายคือการอัฟโหลดไฟลเว็บไซตทั้งหมดขึ้นไปเก็บไวในพื้นที่ที่ ได จัดเตรียมไว อาจทําดวยโปรแกรมสรางเว็บไซตเอง ซึ่งมีคุณสมบัตินี้อยูในตัว หรืออาจใชโปรแกรมยูทิลิตี้ ประเภท FTP เชน FileZilla, CuteFTP หรือใชเครื่องมืออื่นบนเว็บเซิรฟเวอรที่เปนเครื่องมือที่ผูใหบริการได จัดเตรียมไวใหก็ได (รายละเอียดทั้ง 2 ขั้นจะกลาวในบทการนําเสนอเว็บไซตออกสูอินเทอรเน็ต) และหลังจากนั้น เว็บไซตควรไดรับการทดสอบอีกครั้ง เพื่อตรวจหาปญหาบางอยางที่ไมสามารถ ทดสอบบนคอมพิวเตอรของคุณเอง เชน การลิงคของเว็บเพจกับเว็บไซตอื่น และการทํางานของโปรแกรม สคริปตกับฐานขอมูล ซึ่งทําไมไดบนเครื่องของคุณ หรือบนเว็บเซิรฟเวอรอาจมีสภาพแวดลอมที่ตางจาก เครื่องของคุณ เว็บไซตที่จะประสบความสําเร็จ นอกจากตองมีเนื้อหาที่ดี มีการวางโครงสรางและการออกแบบ ที่เหมาะสมแลว ยังตองไดรับการโฆษณาและสงเสริมใหเปนที่รูจักในกลุมผูชมเปาหมาย หรือในวงกวาง ออกไปอีกดวย การสงเสริมนี้มีกลยุทธที่ทําไดหลายวิธี ซึ่งไมจําเปนตองใชงบประมาณจํานวนมากเสมอ ไป โดยสามารถทําได ตั้งแตแบบงายๆ คือการแลกเปลี่ยนลิง คและแบนเนอร ประกาศบนเว็บบอร ด สาธารณะ การสงอีเมลแนะนําตัว การเพิ่มขอมูลในเสิรชเอนจิ้นหรือเว็บไดเร็คทอรี เรื่อยไปจนถึงแบบที่ใช งบประมาณมากขึ้น เชน การจัดงานเปดตัว การลงโฆษณาบนเว็บไซตอื่น บนสิ่งพิมพ หรือตามวิทยุและ โทรทัศน เปนตน สรุป

การออกแบบเว็บ หรือ Web design นั้น ในวงการพัฒนาเว็บ จะใช Graphic Designer หรือนัก ออกแบบที่มีความเชี่ยวชาญเรื่องการทําเว็บ ที่มีทักษะ หรือประสบการณ เกี่ยวกับการทําเว็บไซตมากอน มีความรูเรื่องการจัดวางเนื้อหา และ ออกแบบ รูปแบบ ของเว็บไซตอยางเหมาะสม มีแบบแผน และ ลําดับขึ้นตอนที่ดูดี งานออกแบบเว็บ จึงเปนขั้นตอนที่ตองใชเวลา การเตรียมความพรอม ขอมูลของให ชัดเจนกอน เพื่อสามารถ เขาใจถึงเนื้อหา หรือ ตลาดของธุรกิจนั้นๆ ไดดี

บทที่ 3 กระบวนการออกแบบเว็บไซต

ในกระบวนการออกแบบเว็บไซตที่กําลังจะไดศึกษาตอไปนี้ไดอาศัยหลักการจัดระบบโครงสราง ขอมูลที่เรียกวา Information Architecture อยูในหลาย ๆ สวน ตั้งแตขั้นแรกจนถึงขั้นที่ไดเปนรูปแบบ โครงสรางสุดทาย (Final Architecture Plan) ซึ่งถือเปนกระบวนการที่สําคัญมากที่จะทําใหเว็บไซตบรรลุ ตามเปาหมายที่ตั้งไว การจัดระบบโครงสรางขอมูล คือ การพิจารณาวาเว็บไซตควรจะมีขอมูลและการทํางานใดบาง ด ว ยการสร า งเป น แผนผั ง โครงสร า งก อ นที่ จ ะเริ่ ม ลงมื อ ออกแบบเว็ บ เพจ โดยเริ่ ม จากการกํ า หนด เปาหมายเว็บไซต และกลุมผูใชเปาหมาย ตอมาก็พิจารณาถึงเนื้อหาและการใชงานที่จําเปน แลวนํามา จัดกลุมใหเปนระบบ จากนั้นก็ถึงเวลาในการออกแบบโครงสรางขอมูลในหนาเว็บ ใหพรอมที่จะนําไป ออกแบบกราฟก และหนาตาใหสมบูรณตอไป

69

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

7

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

บทที่

ภาษาและการแสดงผล Web Design เปนสาขางานดีไซนที่ไมเหมือน กับสาขาอื่นๆ เพราะสื่อของเว็บไมใชกระดาษ แตเปน หนาจอใดๆ ที่สามารถเชื่อมตออินเตอรเน็ตได ทําให การออกแบบเว็บไซต มีสิ่งที่ตองคํานึงนอกเหนือไป จากความสวยงามอีก เชน การใชงาน และการรองรับ การแสดงผลในหลายๆ ขนาดหน า จอ และในทุ ก ๆ บราวเซอร ยิ่ ง ป จ จุบั น มี อุ ป กรณ ที่ ส ามารถเชื่ อ มต อ Internet ไดมากขึ้น ก็ยิ่งทําใหเราตองเขียนใหสะดวก กับผูใชในทุกๆ อุปกรณใหมากที่สุดตามไปดวย และ จุดนี้เองที่ทําใหเราตองทําความเขาใจพื้นฐานภาษา สําหรับเว็บไซตทั้ง HTML & CSS เพื่อสามารถกําหนด แนวการคิดออกแบบ web layout ใหสามารถนําเสนอ content ไดอยางถูกตองและเหมาะสมกับคุณสมบัติ การแสดงผลการใชงานตางๆ เชน PC และ Laptop ที่ ที่ กํ า ลั ง จะถู ก แทนที่ ก ารเข า ถึ ง เว็ บ ไซต ด ว ย Mobile Device อยาง Tablet และ Smartphone ในปจจุบัน

71

72

บทที่ 4 ภาษาและการการแสดงผล

ทําไม Web Designer ควรรูจัก HTML & CSS

ทําไมหนาที่การออกแบบหนาเว็บไซตตองเปนงานของ Web Designer ไมใชงานของ Programmer บางครั้งตองพบปญหาวา โปรแกรมเมอรไมสามารถเขาใจไดหรอกวา คนออกแบบจริงๆ แลวตองการอะไร แบบไหน อยางไร สุดทายงานที่ออกมามักจะไมเหมือนหนาตาที่เราออกแบบไวซะ ทีเดียว เพราะฉะนั้น Web Designer ควรจะเขียนเว็บสวนที่เปนการแสดงหนาตาเอง โดยไมตองพึ่ง โปรแกรมเมอร แถมออกมาสวยงามสมใจเราอีกตางหาก โปรแกรมเมอรเองก็ใชเวลาสวนนั้นไปพัฒนา ระบบอื่นๆ ไดอีกดวย การสรางเอกสารเว็บเพจเพื่อนําเสนอขอมูลบนอินเทอรเน็ตนั้นจะเกิดจากการเขียนโคดคําสั่ง ตางๆ เพื่อควบคุมการทํางาน ซึ่งปจจุบันมีเทคโนโลยีหลายตัวที่ถูกพัฒนาขึ้นมาเพื่อใชในการสรางหรือ กําหนดรูปแบบของเว็บเพจ ในการตอบสนองความตองการของผูใช และรวมไปถึงสภาพแวดลอมตางๆ ที่เกี่ยวของดวย (สุธี พงศาสกุลชัย และณรงค ล่ําดี, 2551: 116) นั้นก็คือสิ่งหนึ่งที่เว็บโปรแกรมเมอรตองรู และเขาใจเปนอยางดี คือ ภาษาตางๆ ที่เกี่ยวของกับการสรางเว็บไซต เชน HTML XML CSS หรือ JavaScript เปนตน ภาษาที่ใชในการสรางเว็บไซตสามารถแบงออกเปน 2 สวนดวยกัน คือ ภาษาที่ ทํางานฝงไคลเอ็นต (Client-Side) และ ภาษาที่ทํางานฝงเซิรฟเวอร (Server-Side)

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

การทํางานของไคลเอ็นต-เซิรฟเวอร (Client-Server)

Client

Request Sever Response

Client ภาพที่ 4.1 แสดงการทํางานของไคลเอ็นต-เซิรฟ  เวอร

Client

Request

Sever

Response Client

Database Sever

 เวอร ภาพที่ 4.2 แสดงการทํางานของไคลเอ็นต-เซิรฟ ในลักษณะการใหบริการฐานขอมูล

ก า ร ติ ด ต อ สื่ อ ส า ร บ น เ ค รื อ ข า ย อินเทอรเน็ตที่คอมพิวเตอรทั่วโลกสามารถเชื่อม ถึงกันไดนั้น จะมีการติดตอสื่อสารอยู 2 แบบ คือ แบบสงขอมูล และรับขอมูล โดยเครื่อง คอมพิ ว เตอร ที่ ทํ า หน า ที่ ส ง ข อ มู ล จะเรี ย กว า เครื่องแมขาย (Server) และเครื่องคอมพิวเตอรที่ รับขอมูลนั้น จะเรียกวา เครื่องลูกขาย (Client) แสดงไดดังรูป จากรูปที่ 4.1 การทํางานจะเริ่มจาก เครื่องลูกขายทําการรองขอ (Request) ใชบริการ จากเครื่องแมขาย หลังจากที่เครื่องแมขายไดรับ ขอมูลการองขอและทําการประมวลผลเรียบรอย แล ว จะทํ า การส งข อมู ลดั งกล าวตอบกลั บ (Response) ไปยังเครื่องลูกขาย โดยการรองขอ ขอมูลไปยังเครื่องแมขายอาจจะเกิดจากเครื่อง ลูกขายหลายๆ เครื่องพรอมกันก็ได ในองคกรตางๆ ไดนําประโยชนของการ ทํางานในลักษณะไคลเอ็นต-เซิรฟเวอรที่องคกร นําไปใชมากในปจจุบัน คือการนําขอมูลตางๆ ขององคกรไปเก็บไวในฐานขอมูลบนเครื่องแม ขาย โดยจะเรียกวาเครื่องแมขายนั้นวาDatabase Server ซึ่งการทํางานทุกอยางก็จะเกิดขึ้นที่ เครื่องลูกขาย คือ สามารถทําการเพิ่ม ลบ แกไข หรือ ดึงขอมูลที่อยูในฐานขอมูลมาใชงานได อีก ทั้งทําใหการจัดการขอมูลตางๆ ทําไดงาย ไม กระจัดกระจาย และมีความถูกตอง แสดงดังรูป

73

74

บทที่ 4 ภาษาและการการแสดงผล

จากตัวอยางการทํางานของไคลเอ็นต-เซิรฟเวอรที่กลาวมาขางตน ปจจุบันในวงการของเว็บไซต จึงไดนําหลักการทํางานดังกลาวมาใชสําหรับบริการขอมูลขาวสารตางๆ ผานทางเครือขายอินเทอรเน็ต โดยเครื่องลูกขายที่ขอใชบริการจะเรียกวา ไคลเอ็นต หรือ เว็บบราวเซอร (Web Brower) เนื่องจากการ แสดงผลจะแสดงบนเว็บบราวเซอร เชน Internet Explorer, Firefox, และ Safari เปนตน กระบวนการทํางานจะเริ่มจากเว็บบราวเซอรทําการรองขอเว็บเพจตาม URL (Universal Resource Locator) ที่ผูใชรองขอไป เชน http://www.pnru.ac.th เปนตน จากนั้นเว็บบราวเซอรจะสง สรางการรองขอ และสงไปยังเว็บเซิรฟเวอรผานโปรโตคอล HTTP (Hypertext Transfer Protocol) และ เมื่อเว็บเซิรฟเวอรรับการรองขอแลว จะประมวลผลคําสั่งและสงผลลัพธตอบกลับไปยังเว็บบราวเซอร โดยอาศัยโปรโตคอล HTTP อีกครั้ง เมื่อเว็บบราวเซอรไดรับผลลัพธดังกลาวแลว จึงนําขอมูลมา จัดรูปแบบและแสดงผลบนเว็บบราวเซอรใหผูใชไดเห็น (ประเวศน วงษคําชัย, 2550 : 22) แสดงดังรูป 4.3

Sever

Client Request Response

Client

Webe Sever ภาพที่ 4.3 แสดงการทํางานของไคลเอ็นต-เซิรฟ  เวอร

Client

ภาษาที่ใชในการสรางเว็บไซตพื้นฐาน มีดังตอไปนี้ 1. HTML (ยอมาจาก Hyper Text Markup Language) HTML ยอมาจาก Hyper Text Markup Language คือ ภาษาที่มีลักษณะเปนภาษาเชิงการ บรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description Language) เพื่อเผยแพร ในระบบ เครือขาย WWW (World Wide Web) โดยใชตัวกํากับ (Markup Tag) เพื่อทําหนาที่ควบคุมการแสดงผล ขอมูล รูปภาพ และวัตถุอื่นๆ ผานทางโปรแกรมเว็บบราวเซอรในแท็ก (Tag) จะมีสวนขยาย (Attribute) เพื่อควบคุมการแสดงผล ภาษานี้ถูกพัฒนาขึ้นโดย World Wide Web Consortium (W3C) โดยมีแมแบบ

บทที่ 4 ภาษาและกการแสดงผลกาารแสดงผล

มาจาก ภาษาา SGML (Sttandard Genneralized Maarkup Language) ภาษาา HTML นั้นเป เ นภาษา ประเภท Markkup ไมจัดเปนภาษาประเภท น ท Programm ming สามารถที่จะเรียนรูไดงงาย องคคประกอบของง HTML (HTTML Elementts) องคประกอบของ HTML มีดังนี้ 1. แท็ก HTTML ประกออบดวยเครื่องหหมาย < และะ > โดยทั่วไปปในแตละแท็กจะต ก องมี เครื่องหมายนีนี้คูกัน และปรระกอบดวยแท็ท็กเริ่มตน และะแท็กสิ้นสุด เชน แท็ก <pp> เปนแท็กเริริ่มตน จะ สิ้นสุดดวยแท็ท็ก </p> เปนตตน แท็ก HTM ML สามารถเขียนไดทั้งตัวอักษรพิ ก มพเล็ก หรือตัวอักษรพพิมพใหญ หรือที่เรียกกันคุ น นหูในกลุมโปรแกรมเมอร โ รวา Not Caase Sensitive นั่นก็คือถาาเขียนแท็ก <p> < จะมี ความหมายเดีดียวกับแท็ก <P> แตในปจจุ จ บันนิยมเขียนแท็ ย ก HTM ML เปนตัวอักษรพิมพเล็ก เนื่องจาก องคกร W3C ไดมีขอกําหนนดใหใชแท็ก HTML H ที่เปนตัวอักษรพิมพเล็กใน HTMLL เวอรชัน 4 และรองรั แ บ การใชงานรวมกั ม บภาษา XHHTML โดย แบงแท็ ง กออกเปน 2 ประเภท คือ 1.1 แท็กเดี ก ่ยว คือ แท็ แ กที่ไมตองการปดแท็ก สาามารถใชงานไไดเลย เชน <br> < และ <hr> เปนตน 1.2 แท็กเป ก ด/ปด คือ การแยกแท็ท็กออกเปน 2 สวน คือ สววนเริ่มแท็ก หรืรือเรียกวา “แท็กเปด” แลละสวนจบแท็ก หรือเรียกวา “แท็กปด” ซึ่งจะตองกําหนดเครื่องหมาาย Slash (/) ไวหนาชื่อ แท็กนั้นดวย เช เ น <html>… …</html> และะ <h1>…</hh2> เปนตน 2. แอททริบิบวิ ต (Attributee) คือ คุณสมบัติที่สามารถกกําหนดเพิ่มเติติมเพื่อเพิ่มประะสิทธิภาพ การทํางานใหหกับแท็กตางๆ ของภาษา HTTML โดยที่แอททริ อ บิวตจะปประกอบไปดวย ชื่อ และคา (Name = “Value”) เชน เพิ่มแอททริบิบวิ ต bgcolor ไปในแท็ ไ ก <boody> เพื่อเปลีลี่ยนสีพื้นหลังขของเอกสารเปปนสีเหลือง สามารถกําหนนดไดดังนี้

ภาพทีที่ 4.4 การแสดงงผลจากการกําหนด า bgcolor ที่เปน แอททริริบิวตของแท็ก <body>

7 75

76

บทที่ 4 ภาษาและการการแสดงผล

โครงสรางพืน้ ฐานของ HTML โครงสรางของ HTML จะประกอบไปดวยสวนของคําสั่ง 2 สวน คือ สวนทีเ่ ปน สวนหัว (Head) และสวนที่เปนเนื้อหา (Body) โดยมีรูปแบบคําสั่งดังนี้

<html>…</html> เปนแท็กที่วางไวตอนตนและทายของเว็บเพจ เพื่อใหเว็บบราวเซอรทราบวา เว็บเพจที่จะอานแท็กตอไปนี้ใชรูปแบบของภาษา HTML <head>…</head> ใชกําหนดชื่อเรื่องใหกับเว็บเพจ โดยแสดงขอความเฉพาะหนาเว็บเพจที่มี การกําหนดชื่อเรื่องไวเทานั้น (บางเพจไมจําเปนตองกําหนดก็ได) <title>…</title> ใชกําหนดชื่อใหกับเว็บเพจ โดยจะแสดงที่ Title Bar บนหนาตางเว็บ บราวเซอร โดยแท็กนี้ตองวางไวระหวางแท็ก <head>…</head> เสมอ <body>…</body> เปนบริเวณที่ใชกําหนดขอบเขตเนื้อหาที่ตองการแสดงบนเว็บบราวเซอร การจัดโครงสรางแฟมเอกสาร ในความงายของภาษา HTML นั้นเพราะภาษานี้ไมมีโครงสรางใด ๆ มากําหนดนอก จาก โครงสรางพื้นฐานเทานั้น หรือ แมแตจะไมมีโครงสราง พื้นฐานอยู โปรแกรมที่เขียนขึ้นมานั้นก็สามารถ ทํางานไดเสมือนมี โครงสรางทั่งนี้เปนเพราะ วาตัวโปรแกรม เว็บเบราเซอร จะมองเห็นทุกสิ่งทุกอยางใน โปรแกรม HTML เปนสวนเนื้อหาทั้งสิ้น ยกเว น ใน ส ว นหั ว ที่ ต อ ง มี ก ารกํ า หนด แยกออกไปให เห็ น ชั ด เท า นั้ น จะเขี ย น คํ า สั่ ง หรื อ ขอความที่ ตองการ ใหแสดง อยางไรก็ได เปนเสมือนพิมพงานเอกสารทั่ว ๆ ไปเพียง แต ทําตําแหนง ใดมี การ ทําตําแหนง พิเศษขึ้นมา เว็บเบราเซอรถึงจะแสดงผล ออกมาตามที่ ถูกกําหนด โดยใชคําสั่งใหตรง กับ รหัสที่กําหนดเทานั้น

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

การแสดงผลที่เว็บเบราเซอร หลังจากมีการพิมพโปรแกรมนี้เสร็จเรียบรอยแลว ใหบันทึกเปน ไฟลที่มีนามสกุล .htm หรือ .html จากนั้นใหเรียกโปรแกรมเว็บเบราเซอรขึ้นมาทําการทดสอบ ขอมูลที่เราสรางจะถูก นํามาที่ออกมา แสดงที่จอภาพ ถาไมเขียนอะไรผิด บนจอภาพก็จะแสดงผลตามนั้น ถาเรามีการปรับปรุงแกไขขอมูลใน โปรแกรมเดิม ใหอยูในรูปของ โปรแกรมใหม ก็จํา เปนตองโหลดโปรแกรมขึ้นมาใหม เพียงแตเลื่อนเมาส ไปคลิกที่ปุม Refresh โปรแกรมก็จะทําการ ประมวลผลและแสดงผลออกมาใหม ในคําสั่ง HTML สวน ใหญใชตัวเปด เปนเครื่องหมาย นอยกวา < ตามดวยคําสั่ง และปดทายดวยเครื่องหมายมากกวา > และ มี ตั ว ป ด ที่ มี รู ป แบบเหมื อ นตั ว เป ด เสมอ เพี ย งแต จ ะมี เ ครื่ อ ง หมาย / อยู ห น า คํ า สั่ ง นั้ น ๆ เช น คํ า สั่ ง <BODY> จะมี </BODY> เปนคําสั่งปด เมื่อใดที่ผูเขียนลืมหรือพิมพคําสั่งผิด จะสงผลใหการทํางานของ โปรแกรมผิดพลาดทันที ภาพที่ 4.5 การแสดงผลระหวาง Design view และ Code view ในหนาบราวเซอร Chrome

77

78

บทที่ 4 ภาษาและการการแสดงผล

2. CSS (ยอมาจาก Cascading Style Sheets) CSS ซึ่งยอมาจากคําวา Cascading Style Sheets มีรากศัพทมากจากคําวา Style + Sheet โดยที่ Style หมายถึง รูแบบที่กําหนดขึ้น และ Sheet หมายถึง เอกสาร เมื่อนํามารวมเขาดวยกันจึงเกิด เปนแนวคิดของเทคโนโลยีที่เรียกวา Cascading Style Sheet กลาวคือ เปนเทคโนโลยีที่นํามาใชกําหนด รูปแบบของเอกสารหรือเว็บเพจ เพื่อใหสามารถจัดวางตําแหนงขอความหรือรูปภาพตางๆ ภายในเอกสาร ตามความตองการของนักพัฒนาเว็บ โดยหลักการของ CSS คือ การแยกสไตล (Style) ซึ่งเปนการ จัดรูปแบบในเอกสารของเนื้อหา(Content) ที่จะแสดงบนเว็บเพจ ทําใหขอความที่เปนแท็กคําสั่งของ CSS ไมถูกนําออกมาแสดงผลดวย แตจะใชเปนตัวกําหนดรูปแบบใหกับเนื้อหาบนเว็บเพจแทน คือ เกิดขึ้นเพื่อใชเสริมภาษา HTML ใหสามารถจัดรูปแบบการแสดงผลใหกับเอกสาร HTML ไดสมบูรณแบบ มากขึ้น CSS เปนเทคโนโลยีที่นําหลักการจัดรูปแบบเอกสารของโปรแกรม MS-WORD มาใชกับเว็บเพจ เพื่อใหมีรูปแบบตามที่ตองการ โดยมีองคกร W3C เปนผูกําหนดมาตรฐาน แบงออกเปน 3 ระดับ คือ CSS1, CSS2 และ CSS3 ซึ่งแตละมาตรฐานก็จะมีความสามารถ และคุณสมบัติแตกตางกันออกไป (ปจจุบันยังคงใชมาตรฐาน CSS1 เปนหลัก และนํามาตรฐาน CSS2 มาใชในบางสวน) รวมไปถึง สนับสนุนการทํางานบนบราวเซอรดวย เชน Internet Explorer และ Firefox เปนตน ความรูพื้นฐานกอนเรียนรูการใช CSS ในการเรียนรูการใช CSS ผูเรียนควรมีความรูพื้นฐานเกี่ยวกับภาษา HTML และ XHTML กอน ประโยชนของ CSS มีดังนี้ 1. CSS ชวยในการจัดรูปแบบการแสดงผล และการตกแตงเอกสารเว็บเพจ ชวยลดการใช HTML ใหเหลือเพียงสวนเนื้อหา ทําใหเขาใจงายขึ้น และการแกไขเอกสารทําไดสะดวก รวดเร็ว 2. สามารถโหลดแฟม HTMLไดเร็วขึ้น เนื่องจากแฟมมีขนาดเล็กลง เพราะ attribute ที่ใช กําหนดรูปรางหนาตา ( style ) ถูกแยกไปเก็บแยกตางหากในแฟม CSS 3. สามารถปรับปรุงหรือแกไขไดงาย เนื่องจากการกําหนดรูปแบบการแสดงผล (style) ควบคุม โดยคําสั่ง style sheet ชุดเดียวกัน การแกไขทําที่แฟม Css เพียงแฟมเดียว แตจะมีผลกับ เอกสาร HTML ทุกหนา โดยไมตองตามแกที่แท็ก HTML ทั้งเว็บไซต 4. สามารถควบคุมการแสดงผลในเว็บเบราวเซอรของทุกๆ คาย ใหมีลักษณะเหมือน หรือ ใกลเคียงกันได 5. สามารถกําหนดรูปแบบการแสดงผลใหเหมาะกับอุปกรณทุกชนิด ไมวาจะเปนการแสดงผล บนหนาจอคอมพิวเตอร บนมือถือ หรือ บน PDA 6. ทําใหเว็บไซตมีมาตรฐาน สามารถทํางานรวมกับเว็บเบราเซอรบนอุปกรณตางๆ ในอนาคต ไดดี

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ตัวอยางกรณีที่จัดรูปแบบการแสดงผลดวยภาษา HTML

ตัวอยาง เมื่อเปลี่ยนมาใชคําสั่ง Cascading style sheet จัดรูปแบบการแสดงผลแทนการใช code ภาษา HTML ทําให code ภายในเอกสารอานเขาใจงาย และแกไขไดงายขึ้น

79

80

บทที่ 4 ภาษาและการการแสดงผล

3. XML (eXtensible Markup Language) ภาษานี้สรางขึ้นมาเพื่อการสรางเอกสารที่เรียบงายและเขาใจไดไมยาก เนื่องจาก HTML นั้นมี ขอจํากัดที่วาไมสามารถเพิ่มแท็กใหม ๆ เขาไปได ทําใหการสรางเอกสารอาจไมบรรลุวัตถุประสงคของผูที่ จะให ข อ มู ล XML นั้ น เป น ภาษาที่ เ ราสามารถสร า งแท็ ก ขึ้ น มาเองได และเราสามารถสร า ง เอกสาร DTD ขึ้นมาไดดวยเพื่อที่จะใชเปนขอกําหนดวาจะมีแท็กใดไดบาง จะเอาไปใชอยางไร เปนตน แม ว า Browser จะไม เ ข า ใจวิ ธี ก ารแสดงผลแท็ ก ที่ เ ราสร า งขึ้ น เอง นั่ น ก็ ไ ม ใ ช ป ญ หา เนื่ อ งจาก วา XML ไมไดถูกสรางขึ้นมาเพื่อการสรางเว็บที่สวยงาม แตเพื่อการทําเอกสารที่ใหความหมายไดอยางดี สื่อความหมายชัดเจนมากขึ้น และมักจะใชในการสงขอมูลซึ่งก็แลวแตวาเราจะสราง application อะไร มาทํ า การประมวลผลข อ มู ล เหล า นี้ แ ละจะแสดงผลอย า งไร ข อ ควรระวั ง คื อ เอกสาร XML นั้ น จะมี ขอผิดพลาดไมไดเลย หากมีความผิดพลาดอยางเชน ลืมปดแท็ก หรือแท็กเปดกับแท็กปดไมเหมือนกัน หรือมีแท็กคาบเกี่ยวกัน มันจะไมแสดงผลเลยและเราจะประมวลผลไมได 4. XHTML (ยอมาจาก Extensible HyperText Markup Language) เปนมาตรฐานใหมของ HTML คําสั่งตางๆนั้นก็ยังเหมือนกับ HTML เปนภาษามาตรฐานใหมที่เกิดจากการผนวกความสามารถในการทํางานของภาษา HTML และ XML กับสไตลชีทผานบราวเซอรไดทุกตัว โดยใชพื้นฐานโครงสรางไวยากรณของ XML และใชรูปแบบ แท็กคําสั่ง HTML เวอรชัน 4.0 ขึ้นไป (ปจจุบันสามารถแปลงเว็บเพจที่ออกแบบดวยเอกสาร HTML ใหอยู ในรูปเอกสาร XHTML ได โดยการใชเครื่องมือ (Tool) ซึ่งเปนซอฟตแวรที่ใหดาวนโหลดโดยไมเสีย คาใชจายตามเว็บไซตตางๆ เชน http://tidy.sourceforge.net เปนตน เนื่องจากเอกสาร XHTML พัฒนามาจากรูปแบบของภาษา HTML จึงมีโครงสรางที่คลายกับ HTML แตจะมีความเขมงวดในเรื่องโครงสรางภาษามากกวา และมีการตัด tag และ attribute ที่ลาสมัย ออกไปการเพิ่มเติมรายละเอียดอื่นๆ ดังนี้ (ประเวศน วงษคําชัย และพิรพร หมุนสนิท, 2550 : 5-10)

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ถึงแมวาเราจะใช Software เว็บไซตสําเร็จรูป (Web CMS) ในการสรางเว็บไซตหรือบล็อก เชน WordPress, Joomla ก็ตาม HTML และ CSS นี้จะเปนพื้นฐานใหเราแกไข code และปรับแตงหนาตา เว็บไซตใหถูกใจเราได นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS ในขางตนที่ไมใชภาษาสําหรับเขียนโปรแกรม แลว เราอาจจะเคยไดยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ ภาษาเหลานี้เปน ภาษา Script ที่นิยมใชในการสรางเว็บเพจ ภาษา Script ที่ใชในการสรางเว็บเพจ แบงไดเปน 1) Server-Side Script เชน PHP, ASP, JSP, CGI เปนภาษา script ที่ประมวลผลที่ฝง Server แลวสงผลลัพธไปแสดงผลที่ฝง Client ผานโปรแกรมเว็บบราวเซอร เชน IE, Firefox 2) Client-Side Script เชน JavaScript, VBScript, JScript เปนภาษา script ที่ประมวลผลบน เครื่องคอมพิวเตอรของผูเยี่ยมชมเว็บไซต โดยใชโปรแกรมเว็บเบราเซอร ซึ่งจะชวยแบงเบาการทํางาน ใหกับเครื่อง Web Server ไดในกรณีที่ตองการใหแอพพลิเคชันทํางานรวมกันกับแอพพลิเคชันอื่น เชน ฐานขอมูล เราจะตองใช Server-Side Script เขียนคําสั่งติดตอกับฐานขอมูล โดยผูชมเว็บจะไม สามารถดูคําสั่ง ( Source Code) ของ Server-Side Script เหลานั้นได ตางจากการเขียนคําสั่งแบบ Client-Side Script ที่ผูชมเว็บสามารถดูคําสั่งที่เขียนดวย Client-Side Script รวมถึง HTML, CSS ของ หนาเว็บเพจนั้นได ดวยการคลิกเมาสขวาบนหนาเว็บเพจนั้นๆ และเลือกคําสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร

Web Designer ไมจําเปนตองเขียนโคด (code) HTML/CSS เกงเทา Web Programmer แตควรจะมีความรูดาน HTML/CSS ที่เทียบเทาหรือใกลเคียง Web Programmer การทํา Web Design ก็คลายการทํา GUI Design ซึ่งผูออกแบบควรมีความเขาใจในโครงสราง และโคด เพื่อใหสามารถออกแบบมาใชงานไดจริง ผลิตออกมาไดจริง

81

82

บทที่ 4 ภาษาและการการแสดงผล

จะออกแบบขนาดเทาไหร ?

ภาพที่ 4.6 หนาจอแสดงผลขนาดตางๆ

ในการสรางเว็บไซตแบบดั้งเดิม คําถามหนึ่งที่เปนคําถามยอดฮิตวา จะกําหนดความกวาง เทาไรดี ถาตอบแบบกําปนทุบดินคือ แลวแตเรา แตทั้งนี้แลวแตเราหมายถึง แลวแตการนําไปใชงาน เราตองออกแบบหนาเว็บไซตใหเหมาะสมกับงานดวยเชนกัน แลวจะทําอยางไรใหเหมาะสม เราตอง คนหาคําตอบเหลานี้ใหไดกอน 1. ใครจะเขามาดูเว็บไซตเราบาง แมวาเว็บไซตจะเปนสื่อที่ดูไดพรอมกันทั่วโลก ก็จริง แต อยาลืมวา เราทําเว็บไซตใหคนทั้งโลกพอใจไมได ดังนั้น ตองคนหากลุมลูกคาของเราใหเจอ 2. คนที่ เ ข า ดู เ ว็ บ ไซต เ รา ดู ผ า นอะไร เนื่ อ งจากเดี๋ ย วนี้ อุ ป กรณ ใ นการเข า ถึ ง เว็ บ ไซต หลากหลายกวาเมื่อกอนมาก ทั้งโทรศัพท แท็บเล็ต หรือ แมแต ตูเย็น ยังเปดเว็บไซตได 3. บราวเซอรหลักที่ใช เว็บบราวเซอรแตละตัวนั้น มีการแสดงผลที่แตกตางกัน มากบาง น อ ยบ า ง รวมทั้ ง หน า ตาของบราวเซอร แ ต ล ะตั ว ไม เ หมื อ นกั น ด ว ย ทํ า ให พื้ น ที่ ก ารแสดงผลของ บราวเซอรแตละตัวแตกตางกัน เราอาจจะยึดบราวเซอรหลักๆ ที่เราตองการ เพื่อเอาไวใชในการ คํานวณตอไป 4. เทคโนโลยีที่จะใช เรื่องนี้จําเปนตองสํารวจกอนดวย เพราะวา การเลือกใชเทคนิคที่ ตางกันนั้น ทั้งขั้นตอนการทําเว็บไซต รวมทั้งความสามารถของเทคโนโลยีที่ตางกัน เชน Flash อาจจะ สามารถตรวจสอบขนาดหนาจอไดเอง ขณะที่ HTML นั้นไมสามารถทําไดดวยตัวเอง เปนตน รวมทั้ง การเลือกเทคนิคในการเขียนเว็บไซตดวยเชนกัน

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

สัดสวน (aspect ratio) สัดสวนของหนาจอ (aspect ratio): สัดสวนของหนาจอก็เปนอีกตัวแปรหนึ่งในการตัดสินใจ ออกแบบ ซึ่งปจจุบันนี้มีสัดสวนหนาจอที่หลากหลาย แตที่มีจําหนายกันอยางแพรหลายก็จะเปนจอแบบ 4:3 และ 5:4 (จอปกติ) หรือมีจอแบบ 16:9 (จอกวาง) และแบบกวางพิเศษ ซึ่งมีสัดสวนเทากับสัดสวนที่ ใชกับภาพยนตร 21:9 ถาเนนใชงานเอกสาร สัดสวนของจอที่เหมาะสมคือสัดสวนแบบ 4:3 ซึ่งจะทําใหมองเห็นหนา เอกสารยาวๆ ได แตถาชอบจอกวางแบบ 16:10 ก็ไมผิดกติกาอะไร เพราะจอกวางจะชวยใหสามารถ มองเห็นเอกสารหรือ เว็บเพจไดกวางขึ้น และจัดการกับงาน spreadsheet ไดงายขึ้น เนื่องจากพื้นที่ ดานขางที่มากขึ้นนั่นเอง ถาเนนใชงานกราฟฟค และงานออกแบบ ตรงนี้จะขึ้นอยูกับลักษณะของชิ้นงานของวาตองการ ใชหนาจอที่มีสัดสวนแบบใด อยาลืมวาหากเลือกใชจอกวาง จะตองเสียสละพื้นที่สวนลางไป ในขณะที่ คุณเลือกใชจอสัดสวนปกติ ก็จะเสียพื้นที่ดานขาง คงจะตอง trade-off กันพอสมควรระหวางการเลื่อน (scroll )ไปดานขางบอย กับเลื่อน (scroll )ไปดานลางบอยๆ จะเลือกออกแบบมาแบบไหน

ภาพที่ 4.7 การเปรียบเทียบสัดสวนของหนาจอ

ขั้นตอนการคํานวณหนาจอ มาถึงการออกแบบเว็บไซต เริ่มตนตองมีการกําหนดขนาดของหนาเว็บไซตกอนเปนอันดับแรก เพราะถาไมอยางนั้น เกิดเปลี่ยนตอนหลังอาจจะตองถึงขั้น รื้อใหมทั้งหมดก็เปนได ในกรณีนี้จะไมบอกวา จะตองขนาดเทาไร แตหัวขอนี้จะอธิบายวา มีวิธีคิดขนาดมาไดอยางไร

83

84

บทที่ 4 ภาษาและการการแสดงผล

1. จากขอมูลขางตน สรุปวาลูกคาที่ดูเว็บไซตเรา สวนใหญใชความละเอียดหนาจอที่เทาไร (ขนาดมาตรฐานที่ยอมรับกันคือ 1024X768) เชน เราอาจจะศึกษามาแลววา กลุมลูกคาเรา ใชความละเอียดที่หนาจอ 1280 X 1024 ก็กําหนดขนาดหนาจอนี้เปนพื้นฐาน สําหรับ เว็บไซตเราก็ได แตอยาลืมวา คนที่ใชความละเอียดหนาจอต่ํากวานี้ เว็บไซตเราจะลนจอ และเกิด สกอรบาร 2. ทดลองปรั บ หน า จอเรา ให ค วามละเอี ย ดเท า กั บ ขนาดหน า จอ พื้ น ฐานที่ เ ราต อ งการ 3. จากนั้นเปดบราวเซอรที่เราตองการ ใหเต็มจอ และลองแคปเจอรหนาจอมาเปดในโปรแกรม อยาง Photoshop เพื่อคํานวณตอไป 4. จากการเปดดูใน Photoshop เราจะรูวาพื้นที่ที่เราใชงานจริงไดนั้น เทาไรกันแน โดยใชเสน ไกด ไ ลน เ พื่ อ กํ า หนดพื้ น ที่ ก ารแสดงผล โดยพื้ น ที่ ภ ายในเส น ประ คื อ พื้ น ที่ ก ารแสดงผล ทั้งหมด

ภาพที่ 4.8 การเปดดูใน Photoshop

5. ทดลองใชคําสั่ง crop (Image -> Crop) และตรวจสอบขนาดรูปที่เหลืออยู (Image -> Size) แตทั้งนี้อยาลืมวา เครื่องแสดงผลอื่นนั้นอาจจะไมเทากับขนาดที่เราคํานวณได 100% ดังนั้น แลว สวนมากจะนิยม ลดขนาดลงไปอีก 10%

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ภาพที่ 4.9 ใชคําสั่ง crop (Image -> Crop) และตรวจสอบขนาดรูปที่เหลืออยู

6. วิธีเปนที่มาในการคํานวณขนาดของหนาเว็บไซต แตอยางไรก็ตาม การออกแบบหนาเว็บไซต แบบคงที่ หรือ Fixed นั้น อาจจะลาสมัยไปแลวในปจจุบัน โดยในปจจุบัน มีทั้งระบบ Grid ที่ ทํางานแบบ Fluid และ Elastic เขามาทดแทน เพื่อแกปญหาความหลากหลายของอุปกรณ แตหากตองการสรางเว็บไซตแบบ Fixed นั้น อาจจะ อิงกับระบบ Grid ดวย เพื่องายในการ ปรับเปลี่ยนในอนาคต การออกแบบเว็บไซตใหตอบสนองทุกหนาจอ (Responsive Web Design)

การออกแบบและพัฒนาเว็บไซตในยุคที่ผานมาใหสามารถรับชมไดทั้งทางหนาจอคอมพิวเตอร และโทรศัพทมือถือนั้น จําเปนตองมีการพัฒนาแยกออกจากกันเพื่อใหสามารถแสดงผลไดเหมาะสมกับ หนาจอที่ใชรับชม และสะดวกตอการใชงานซึ่งตองใชทรัพยากรตางๆ ในการนําเสนอขอมูลผานทาง เว็บไซตเพิ่มขึ้น แตในปจจุบันเจาของเว็บไซตสามารถมีเว็บไซตที่ตอบสนองตอการรับชมผานทางหนาจอ ตางๆ ไดเองโดยอัตโนมัติดวยเทคโนโลยีการออกแบบเว็บไซตที่เปนแบบ Responsive การออกแบบเว็บไซตแบบ Responsive คือการออกแบบเว็บไซตใหรองรับขนาดหนาจอสําหรับ อุปกรณทุกชนิด ไมวาจะเปนคอมพิวเตอรที่มีขนาดจอหลากหลาย และ Tablet ซึ่งมีมาตรฐานของขนาด หนาจอที่แตกตางกัน ตลอดจนโทรศัพทมือถือ Smart Phone ที่สามารถออกแบบครั้งเดียวแลวใชไดกับ ทุกหนาจอ โดยไมตองเว็บไซตสําหรับการแสดงผลบนหนาจอแตละชนิดแยกออกมาใหเกิดความสับสน ตอผูใชในภายหลัง

85

86

บทที่ 4 ภาษาและการการแสดงผล

ภาพที่ 4.10 เปรียบเทียบขนาดที่แตกตางกันของอุปกรณแสดงผล

เมื่อมีการสรางเว็บไซตที่เหมาะสมสําหรับทุกหนาจอมอนิเตอร วิธีการที่พบมากที่สุดคือการ ออกแบบภายในความกวางของหนาจอมาตรฐานและความสูงมาตรฐาน ซึ่งขณะนี้มีขนาดมาตรฐานของ จอภาพที่เปน 1024 X 760 พิกเซล, หมายความวาตองตั้งความละเอียดของงานที่ 989 พิกเซล X 548 พิกเซล เพื่อใหแสดงผลไดพอดี

ภาพที่ 4.11 ตั้งคา หนาจอที่ปลอดภัย ในการแสดงผลที่ 1024X768

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

หากเว็บไซตที่มีผูเขาชมบนหนาจอขนาดใหญจะมีพื้นที่ของพื้นหลังมากกวา 90% ของเว็บไซตที่ ออกแบบมาหากใชวิธีนี้ แตจะมีผลตรงกันขามเมื่อเราออกแบบสําหรับอุปกรณมือถือ งายๆคือคุณก็ไม สามารถใชรูปแบบเดียวกันสําหรับหนาจอ 320 พิกเซล X 2000 พิกเซล ได Responsive Web Design จึงเปนแนวคิดการออกแบบที่เรียกวา One Size Fit All คือ การ ออกแบบเพียงครั้งเดียว แตสามารถใชไดกับทุกขนาดของหนาจอ โดยเว็บไซตจะสามารถตรวจจับขนาด ของหนาจอ และปรับขนาด และ Layout ใหเหมาะสม ตามขนาดของหนาจอโดยอัตโนมัติ โดยอาศัยการ ทํางานรวมกันระหวางเทคโนโลยีตางๆ ดังตอไปนี้ คือ Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3 Media Query

วิธีการในการออกแบบสําหรับอุปกรณที่มีหนาจอแตกตางกัน วิธีที่ 1 ใช Media queries: CSS ชวยใหการตกแตงเว็บไซต (รวมถึงการซอนเนื้อหา) ใหเปนไปตาม อุปกรณ ที่แสดงผล โดยปรับไปตามความกวางของเบราวเซอร วิธีที่ 2 ใช The fluid grid: เมือเรากําหนดขนาดขององคประกอบในหนาจอเปน % แลว กริด (Grid) จํานวนคอลัมนจะเปลี่ยนแปลงไปตามความกวางที่จํากัดของหนาจอ เทคนิคที่นิยมมากที่สุดคือ fluid grid (Grid คือไกดไลนขนาดความกวางของสัดสวนตางๆ ใน เว็บไซตแบบคอลัมน) เพราะเปนเทคนิคแบบดั้งเดิม สําหรับวิธีการออกแบบใหตอบสนองทุกหนาจอนี้ โปรแกรม Adobe DreamweaverCS6 ไดพัฒนาขึ้นมาสนับสนุนซึ่งสามารถใช Template ของ Dreamweaver สรางโครงรางของเว็บแบบความกวางอัตโนมัตินี้ได

ภาพที่ 4.12 Fluid Grid Layout Template ใน Dreamweaver CS6 เพื่อใหคุณสามารถออกแบบ Website แบบ Responsive

87

88

บทที่ 4 ภาษาและการการแสดงผล

ภาพที่ 4.13 การแสดงผลของ fluid grid ในหนาจอที่แตกตางกัน

ตัวอยางจากภาพดานบนเปนเว็บไซตของมหาวิทยาลัยแลงคาสเตอรไมขยายความกวางของ สวนเนื้อหามากกวา 960 พิกเซล แตมันจะเรียงลงมาอยางเรียบรอยลงมาดานลางเมื่อหนาจอต่ํากวา 400 พิกเซล กรณีนี้คือเนื้อหาที่อยูดานบนจะลดลงเรื่อยๆ และตอง scroller ดังนั้น ตองระวังเมื่อมีการ เปลี่ยนแปลงความกวางของหนาเว็บ มันจะตกลงมาดานลางเมื่อหนาจอเปน 420 พิกเซล ดวย

ความละเอียดหนาจอขออุปกรณพกพา (Mobile device screen resolutions) อุปกรณพกพานั้นมีหลายความละเอียดแตกตางกันไป จะออกแบบตามทุกขนาดก็คงไมไหว กรณีนี้ใหเลือกเฉพาะอุปกรณหลักๆ ที่นิยมใชในตลาด

ตารางแสดงความละเอียดของอุปกรณ

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ภาพที่ 4.14 อุปกรณพกพาขนาดตางๆ

ภาพที่ 4.15 ตารางแสดงความละเอียดของอุปกรณ

อยางไรก็ตาม ตารางนี้อาจจะลาสมัยไปแลว เมื่อเวลาผานไปไมนาน (แปลวาเราตองติดตาม ความเคลื่อนไหวของอุปกรณเหลานี้ดวย) จะเห็นวานอกจากขนาดที่เปนพิกเซล (Pixel) แลว ยังมีเรื่องของความละเอียด (Resolutions) หมายถึงพิกเซลตอตารางนิ้ว ความละเอียด (PPI) นั้นเปนปจจัยสําคัญ ตัวอยางเชนขนาดของไอคอนบน iPhone 5 จะเปน 4 (Diagonal) ถามาแสดงผลบนจอคอมพิวเตอรจะขนาดใหญกวา (เพราะความ ละเอียดตอนิ้วต่ํากวา)

89

90

บทที่ 4 ภาษาและการการแสดงผล

ภาพที่ 4.16 เทียบขนาดหนาจอของอุปกรณตางๆ

คําถามที่เกิดขึ้นตามมาวา “แลวเราจะทํายังไงกับเนื้อหาเล็กๆ ที่มีในเว็บไซต” วิธีการคือ ทําใหอานได (Keep it readable) หมายถึง ถาออกแบบใหอานบรรทัดของขอความที่มีความ สูง 14px บนหนาจอกวาง 2000 พิกเซล และถาถูกปรับลงไปแค 2px บนหนาจอ กวาง 300 px คุณก็ไม สามารถอานไดแลว และถาพลิกกลับดานตะแคง (ตามแนวนอน) มันจะปรับขอความตัวอักษรจากขนาด 10 px ขึ้น 7 เทา มันจะมีขนาดใหญเกินไป วิธีนี้คือเราจําเปนตองเลือกเหมาะสมและสามารถอานไดในสัดสวนใกลเคียงกับการพิมพบน ทุกๆ อุปกรณ โดยการปรับรูปแบบตามกวางของหนาจอที่มีอยู

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

เมื่อดูทคี่ วามกวางของขนาด หนาจอที่ 320px ไมสามารถ อานได

การปรับลดรูปแบบในขณะที่ ออกแบบใหมขี นาดตัวอักษร เดียวกัน ทําใหไมสวยงามและ ยังคงยากที่จะอาน

การเปลี่ยนรูปแบบใหเปน 1 คอลัมน ทําใหสามารถอาน ได

ภาพที่ 4.17 การปรับขนาดหนาจอตามอุปกรณ

91

92

บทที่ 4 ภาษาและการการแสดงผล

การออกแบบเว็บไซตสมัยใหม

การออกแบบเว็ บ ไซต ใ นสมั ย ใหม นั้ น จํ า เป น ต อ งสร า งให ร องรั บ อุ ป กรณ สํ า หรั บ การเข า ถึ ง อินเตอรเน็ตที่มีความหลากหลายมากขึ้นเรื่อยๆ สําหรับนักออกแบบเว็บไซตแลว ยิ่งอุปกรณมีความ หลากหลายก็ยิ่งสรางภาระในการออกแบบมากขึ้น เทคนิคหนึ่งที่ถูกนํามาใชในการออกแบบเว็บไซต สมั ย ใหม นั้ น นั ก ออกแบบต า งพยายามพั ฒ นาและแบ ง ป น เทคนิ ค ที่ ดี ขึ้ น และง า ยขึ้ น ต อ สู กั บ ความ เปลี่ยนแปลงที่วานี้ เทคนิคที่นิยมใชงานกัน อยางมากคือ การแทนที่โครงสรางเว็บไซตแบบเดิมที่เปน HTML layout (Table Tag) ดวย CSS (DIV Tag) เชนการใช fluid Layout เปนตน ในหัวขอนี้ไดรวบรวมจากขอแนะนํา วิธีการของ อดัม แคปแลน (Adam Kaplan) Web Designer ระดับโลก นํามาชวยในการออกแบบเว็บไซต แบบมืออาชีพ

1. เริ่มที่หนาจอเล็กสุดกอนเสมอ Mobile First อาจจะขัดกับจริตนักออกแบบรุนเกาอยูบาง เมื่อนักออกแบบสวนใหญชินกับการออกแบบ หนาจอสําหรับ PC กอน แลวคอยมาทําอุปกรณ Mobile แตอาจจะติดกับดักของตัวเอง ในเมื่ออุปกรณ mobile ตองการรายละเอียดนอยกวา และงายกวา ตรงขามหากออกแบบสําหรับหนาจอกอน สิ่งที่เกิด ตามมาคือการตองตัดอะไรออกเพื่อจะไดลงกับอุปกรณ mobile คุณจะพบปญหาตามมามากมาย เชน ลบ Java บางตัวออกไป ทําใหการแสดงผลผิดเพี้ยนจนแกไขไดยาก สมมุติวาเราตองการรูปแบบที่ยืดหยุนแตเรียบงาย การเริ่มตนแบบงายๆ จะทําใหควบคุมการ แสดงผลตามความกวางและหนาจอเล็กๆ แบบนี้ไดดีกวา 2. ใชคําสั่งการคนหาความกวางของสื่อ Min-width Media Queries ถาตองการ Layout แบบเจาะจง ใชคําสั่ง min-width แทน มันจะงายกวาในการควบคุมการใช งาน media ที่แตกตางกัน ดีกวาการแยก CSS ออกมาเปนหลายๆไฟล

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

3. ไมใชทุก Browsers จะสรางแบบเดียวกัน เบราวเซอรจะทําให CSS ของคุณแสดงผลแตกตางกัน เพื่อจัดการแกปญหานี้ การออกแบบ เว็บไซตสมัยใหมจะมีการตั้งคา เชน การใช Normalize.css เขามาชวยปรับคาของแตละเบราวเซอรกอน การเรียกใชงานก็สามารถดาวนโหลดไฟลจากเว็บไซต necolas.github.io แลวทําการเรียกใชงานในเว็บเพจ โดยจําไววาจะตองเรียกใชงานกอนไฟลอื่นเสมอ

4. ใส Viewport Meta Tag เพื่อใหใชงาน media queries จะตองใส viewport Meta Tag ใน <HEAD>

5. ใชงาน CSS Box Model ใหถูกตอง ตองเขาใจพื้นฐาน การสรางและการทํางานของ Box Model ใหดีกอนนําไปใช โดยจะประกอบ ไปดวย 4 สวน ที่แตกตางกัน

เนื้อหาของกลองที่ ขอความและภาพที่ ปรากฏ

บริเวณรอบๆ เนื้อหา

ขอบทีจ่ ะไปรอบ padding

บริเวณพื้นที่รอบๆ ขอบ

ภาพที่ 4.18 CSS Box Model

6. ใช box-sizing: border-box การใชไฟล CSS ที่กําหนดดวย * จะหมายถึงมีผลกับทุก elements ในเพจนั้น

93

94

บทที่ 4 ภาษาและการรการแสดงผล

7. เลือก การเขียน CSSS นั้นสามารถทําได 2 แบบ คือ Without box-sizing: border-box ก็กคือ Margin, borderss และ padding จากถูกคํานวณอยูตอ จาก content ดังนั้นคุคณกําหนดความกวางของ contentt กอน ตามรูป

ภาพ พที่ 4.19 withoutt-box-model

With boox-sizing: border-box ก็คือ Borders and paadding จะถูกวาดลงไปใน ก ความกวาง รวมกับ content ดวย สวน marginn เทานั้นที่ จะอยูภายนอก า ดังรูปดดานลาง

ภาพ พที่ 4.20 with-boox-model

แตถาไมเลือกให ก ดีกอน สุดทายอาจจะกลายเปน BUG สิ่งที่ตองเลือกคื ก อ จะใชหรืออไมใช borderss และ paddding ในความมกวางของ coontent 8. สราง Conntainer คุม Laayout เอาไว นักออกแบบ CSS หลายคคนคุนเคยกับการสราง conntainer เปนตัตวชวยในการรคุม elementss ตางๆ เดิมทีใน Fixed Layout ก็กสามารถใชงานได ง ดี และยัยังใชงานไดดีอยู อ กับการออกกแบบเว็บไซตต สมัยใหม มันจะทําใหการออกแบบง ก า ้น ายขึ

บทที่ 4 ภาษาและกการแสดงผลกาารแสดงผล

9. การสราง Coluumn ถาเริริ่มตนจากการรออกแบบสําหรั ห บ mobile ตามที ต ่แนะนํา เราสราง coluumns ดวย block โดย กําหนดแบบเต็มจอไวกอน อยาเพิ่งใสอะไรเข ะ าไปใหรุงรั ง ง โดย blockk จะทําการเรีรียงตัวกันตามธรรมชาติ ลงมาจากบนลลงลางอยูแลว จากนั้นเมื่อหนนาจอใหญขนึ้ จึงมากําหนดซซายขวา (float: left float:righht) ที่หลัง

ภาพที่ 4.21 แสสดงผลการสราง า columns ดวย block

10. กํกาหนดขนาดดของ Colum mns เมื่อจอขนาดใหญ จ ขึข้นึ Columns อาจจะชิดไปททางซายหรือขวา (float: leftt float:right) โดยเรี โ ยง กันไปตามแนวราบ หากเราใช padding เขามารวมดวย อยาลืมดูที่ Margins M ดวย

9 95

96

บทที่ 4 ภาษาและการการแสดงผล

ภาพที่ 4.22 แสดงผลการกําหนดขนาด columns

11. สราง Row (แถว) ครอบ Column เอาไวอยาใหแตกแถว หรืออาจจะพูดวาเปน wrapped ในแตละ rows ใชการ clear-fix ใหแตละ rows ทําใหแตละ rows จึงไมมาอยูแถวเดียวกัน

บทที่ 4 ภาษาและกการแสดงผลกาารแสดงผล

ภาพ พที่ 4.23 แสดงผผลการสราง Roow (แถว) ครออบ Column

12. Flow Oppossite ใส class c .flow-oppposite ใน coolumns ใดๆ ที่ตองการใหแสดงก ส อนบนอุปปกรณพกพา แตมนั จะ ไปอยูดานขวาาบนหนาจอขนนาดใหญ

ภาพ พที่ 4.24 แสดงผลการใสชั้น fllow-opposite ในน columns

13. ใช ใ การกําหนนดขนาดแบบบ relative แทนนการกําหนดดขนาดเปน ppixel ตอมาให ม เรากําหนดขนาดของ im mage ใหเปนแบบ relative ดวยครับ โดยยกําหนดความมกวางเปน เปอรเซ็นต (% %) ใหอิงตาม container c ขออง image นั้นๆ น จากนั้นใหเรากํ เ าหนด maax-width ใหเปนความ กวางที่แทจริงของ ง image ภาพจะได ภ ไมแตก ต เวลา conttainer มีขนาดดใหญมากๆ

9 97

98

บทที่ 4 ภาษาและการการแสดงผล

ภาพที่ 4.25 ตัวอยางการแสดงผลจากการเขียน CSS (DIV Tag)

สิ่งที่ตองกําหนดขนาดใหเปนแบบ relative อีกอยางก็คือ font เริ่มจากกําหนดขนาดของ font ที่ body ใหเปน 100% ซึ่งจะทําใหขนาดของ font ใน element ตางๆ ที่อยูใน body มีขนาด 100% ทั้งหมด หากเราตองการกําหนดขนาดของ font ใน element ไหนเปนพิเศษ ใหเราใชหนวย em ซึ่งหนวย em นี้ หมายถึงจํานวนเทาของขนาดที่ inherit ซึ่งในทีนี้ ถาเรากําหนดขนาดเปน 2 em ก็จะได font ขนาด 200% นั่นเอง

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ภาพที่ 4.26 ตัวอยางเว็บไซตประเภท Responsive ที่แสดงผลบนหนาจอแตละประเภท

99

100

บทที่ 4 ภาษาและการการแสดงผล

ประโยชนของการทําเว็บไซต Responsive Web Design 1. Responsive WebDesign ไดรับการรับรองจาก google ชวยใหติด index google ไดทั้ง desktop และ mobile ในหนาเดียว 2. การทํา Responsive เพียงแคไซตเดียวก็รองรับทุกอุปกรณ และไมตองทําหลายๆ หนา ชวย ใหไมหนักเซิฟเวอร 3. ไมตองทําหนาตางแยกกันระหวาง mobile และ desktop นอกจากนี้ยังประหยัดเวลาลด ระยะเวลาในการทํางานหลายๆหนา โดยที่เราก็วางแผนครั้งเดียว และทําเพียงแคหนาเดียวเทานั้นเอง 4. รวดเร็วในการดูแล จัดการเว็บไซต ไมยุงยาก และไมตองไปเปลี่ยนแปลงเว็บไซตหลายๆหนา 5. รองรับผูใชทุกอุปกรณ เพราะสุดทายผูคนจากหลายอุปกรณก็มีความตองการเดียวกัน 6. เว็บไซตไมตอง redirect หนาไปหาหนา mobile ใหเสียเวลา ชวยใหเซิฟเวอรไมทํางานหนัก และไมวุนวาย 7. ชวยทําใหการคนหาผาน mobile เปนไปไดงายมากยิ่งขึ้น

สรุป

การติดตอสื่อสารบนเครือขายอินเทอรเน็ตมีการทํางานในลักษณะของไคลเอ็นต-เซิรฟเวอร โดย เครื่องคอมพิวเตอรที่ทําหนาที่สงขอมูลจะเรียกวา เครื่องแมขาย (Server) และเครื่องคอมพิวเตอรที่รับ ขอมูลจะเรียกวา เครื่องลูกขาย (Client) ปจจุบันในวงการของเว็บไซตไดนําหลักการทํางานดังกลาวมาใช สําหรับบริการขอมูลขาวสารตางๆ ผานทางเครือขายอินเทอรเน็ต โดยจะเรียกเครื่องลูกขายที่ขอใชบริการ จะเรียกวาไคลเอ็นต หรือเว็บบราวเซอร (Web Brower) สวนเครื่องแมขายจะเรียกวา เว็บเซิรฟเวอร (Web Server) การแสดงผลที่มองเห็นไดนั้น มีความสําคัญคือ ตองใหเขาใจโครงสรางของภาษาภาษาที่ใชใน การสรางเว็บไซตพื้นฐานตางๆ และอุปกรณแสดงผลตางๆ และจอภาพอื่นๆ ที่มีอัตราสวน ขนาด ความ ละเอียดของจอภาพแตกตางกัน ทั้งสองสิ่งนี้จะตองทําไปพรอมๆ กันอยางถูกวิธีแหละเหมาะสม เปน สํานึกที่ดีในการทําเว็บไซต และเปนสิ่งที่ควรคํานึงถึงทุกครั้งไมวาเราจะทําเว็บไซตใหใคร เพราะเราไม สามารถคาดเดาไดวา ใครจะอานเว็บไซตของเราบาง แตเราก็ไมควรกีดกันคนกลุมใดกลุมหนึ่งออกไป จากการออกแบบที่ไมเปนธรรมของเรา เพราะถาหากเราตองกลายเปนคนที่มองไมเห็นขึ้นมาในวันหนึ่ง นั้น เราก็คงไมตองการสูญเสียสิทธิในการเขาถึงขอมูลขาวสารอยางถูกตองและเทาเทียมอยางแนนอน จึง ตองคิดถึงทุกคนใหมากที่สุด เราตองใหสิทธิและความสะดวกในการเขาถึงแกทุกคนอยางเทาเทียมกัน

บทที่ 4 ภาษาและการแสดงผลการแสดงผล

ในปจจุบัน Mobile Internet Users ไดมีจํานวนเพิ่มขึ้นอยางรวดเร็ว และมีแนวโนมที่จะแซง Desktop Internet Users ในป 2013 อีกดวย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไมวาจะ เปน ขนาดและความละเอียดของหนาจอแสดงผล(screen size and resolution) แนวของการแสดงผล (orientation) หรือแมแตระบบปฏิบัติการ(OS) สมัยกอน เราตองออกแบบเว็บไซตออกมาหลายๆ version เชน Desktop version กับ Mobile version เพื่อใหเว็บไซตของเรา สามารถแสดงผลไดอยางเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทําให ตนทุนเพิ่มขึ้น ทั้งในดานเวลาและคาจางในการพัฒนา Responsive Web Design คือ การออกแบบเว็บไซตดวยแนวคิดใหม เปนแนวการคิดออกแบบ web layout ที่จะทําใหเว็บไซตสามารถแสดงผลไดอยางเหมาะสม บนอุปกรณที่แตกตางกัน โดยใช โคด รวมกัน URL เดียวกัน เพื่อแกปญหาดังกลาว

101

บทที่ 5 สีกับการออกแบบเว็บไซต

7

บทที่ 5 สีกับการออกแบบเว็บไซต

บทที่

สีกับการออกแบบเว็บไซต

ในการออกแบบเว็บไซต การเลือกใชสี เปนสิ่ง สําคัญที่ตองใหความสนใจในอันดับตนๆ เพราะสีเปน สิ่งแรกที่ถูกพบเห็นและชวยดึงดูดความสนใจผูชมได ในครั้งแรก และในทางจิตวิทยา สียังมีอิทธิพลตอการ ตอบสนองของสมองดวย ทําใหการเลือกสีใหเขากับ เนื้อหาของเว็บไซต อยางเหมาะสม เปนองคประกอบ สําคัญ จะทําใหเว็บไซตมีความนาเชื่อถือยิ่งขึ้น อีกทั้ง ยังสงผลอยางมากกับความสวยงามประทับใจ

103

104

บทที่ 5 สีกับการออกแบบเว็บไซต

ภาพที่ 5.1 สีกบั การมองเห็น

1. ความสําคัญและประโยชนของสีที่มีตอเว็บไซต สีสันในหนาเว็บเพจ (ปวีณา ชัยวนารมย, 2008. ที่มา : http://www.student.chula.ac.th) เปน สิ่งที่มีความสําคัญมากในการดึงดูดความสนใจของผูใช เนื่องจากสิ่งแรกที่มองเห็นไดจากเว็บเพจก็คือ สี ซึ่งเปนสิ่งที่ชวยกําหนดบรรยากาศ และความรูสึกโดยรวมของเว็บไซต สี สามารถใช ไดกับทุกองค ประกอบของเว็บเพจ เชนตัวอักษร รูปภาพ ลิงค และพื้นหลัง เปนตน การเลือกใชสีอยางเหมาะสมจะชวย ในการสื่อความหมายของเนื้อหา และเพิ่มความสวยงามใหกับหนาเว็บนั้น แตในทางกลับกัน สีที่ไม เหมาะสมอาจสรางความยากลําบากในการอานหรือรบกวนสายตาผูใช รวมทั้งอาจทําใหการสื่อสาร ความหมายไม ถูกตองได ตลอดจนเขาใจทฤษฎีของสีเปนอยางดี ดังนั้น การตัดสินใจเลือกใชสีให เหมาะสมกับบุคลิกและเปาหมายของเว็บไซต เพื่อการแสดงผลที่ตรงกับความประสงคมากที่สุด จึงเปน สิ่งที่สําคัญอีกอยางหนึ่งในการสรางเว็บไซต สีเปนเครื่องมือที่มีความสําคัญในการออกแบบเว็บไซต สามารถสื่อถึงความรูสึก อารมณ และ ชวยสรางความสัมพันธระหวางสถานที่กับเวลาอีกดวย ดังนั้นสีจึงเปนปจจัยสําคัญอยางหนึ่งที่จะชวย เสริมสรางความหมายขององคประกอบใหกับเว็บเพจไดอยางดี ประโยชนของสี ในรูปแบบตางๆ มีดังนี้

บทที่ 5 สีกับการออกแบบเว็บไซต

1. สีสามารถชักนําสายตาผูอานใหไปยังทุกบริเวณในหนาเว็บเพจ ผูอานจะมีการเชื่อมโยง ความรูสึกกับบริเวณของสีในรูปแบบที่คาดหวังได การเลือกเฉดสีและตําแหนงของสีอยางรอบคอบใน หนาเว็บ สามารถนําทางใหผูอานติดตามเนื้อหาในบริเวณตางๆ ตามที่กําหนดได วิธีนี้จะเปนประโยชน อยางมากเมื่อตองการใหผูอานเกิดความสนใจกับสวนใดสวนหนึ่งในเว็บไซตเปนพิเศษ เชน ขอมูลใหม โปรโมชั่นพิเศษ หรือบริเวณที่ไมคอยไดรับความสนใจมากอน 2. สีชวยเชื่อมโยงบริเวณที่ ไดรับการออกแบบเขาดวยกัน ผูอานจะมีความรูสึกวาบริเวณที่มี สีเดียวกันจะมีความสําคัญเทากัน วิธีการเชื่อมโยงแบบนี้ชวยจัดกลุมของขอมูลที่มี ความสัมพันธอยาง ไมเดนชัดเขาดวยกันได 3. สีสามารถนําไปใชในการแบงบริเวณตางๆ ออกจากกัน ทํานองเดียวกับการเชื่อมโยง บริเวณที่มีสีเหมือนกันเขาดวยกัน แตในขณะเดียวกันก็เปนการแบงแยกบริเวณที่มีสีตางกันออกจาก กัน 4. สีสามารถใช ในการดึงดูดความสนใจของสายตาผูอาน เนื่องจากมักจะมองไปยังสีที่มี ลักษณะเดนหรือผิดปกติเสมอ การออกแบบเว็บไซต ดวยการเลือกใช สีอยางรอบคอบ ไม เพียงแตจะ กระตุนความสนใจของผูอานเพียงเทานั้น ยังชวยหนวงเหนี่ยวใหอยูในเว็บไซตไดนานยิ่งขึ้น สวนเว็บไซตที่ ใชสี ไมเหมาะสม เสมือนเปนการขับไลผูชมไปสูเว็บอื่นที่ออกแบบดีกวา 5. สีสามารถสรางอารมณ โดยรวมของเว็บเพจ และกระตุนความรู สึกตอบสนองจากผูชมได นอกเหนือจากความรูสึกที่ไดรับจากสีตามหลักจิตวิทยาแลว ผูชมยังอาจมี อารมณ และความรู สึกสัมพันธกับสีบางสีหรือบางกลุมเปนพิเศษ 6. สีชวยสรางระเบียบใหกับขอความตางๆ เชน การใชสีแยกสวนระหวางหัวเรื่องกับตัวเรื่อง หรือการสรางความแตกตางใหกับขอความบางสวน โดยใช สีแดงสําหรับคําเตือน หรือใชสีเทาสําหรับ สิ่งที่เปนทางเลือก 7. นอกเหนือจากการใชสีชวยในการออกแบบแลวสี ยังสามารถสงเสริมเอกลักษณขององคกร หรือหนวยงานนั้นๆ ได ดวยการใชสีที่เปนเอกลักษณขององคกรมาเปนโทนสีหลักของเว็บไซต การออกแบบเกี่ยวกับสี ไมใชเรื่องงาย แมวาจะมีกฎเกณฑตางๆ ที่ชวยในการสรางชุดสี (Color Scheme) ที่มีประโยชนมากมาย แตก็มีแนวทางและความเขาใจผิดมากที่ จะนําไปสูการสราง ชุดสีที่ใหความรูสึกไมเหมาะสม ในบางสถานการณอาจใชสีเปนเพียงเครื่องประดับอยางหนึ่งในการ ออกแบบ แตในทางตรงกันขามการใชสีที่มากเกินไป อาจทําใหไปบดบังองคประกอบอื่นๆ ในหนาเว็บ เพจได ดังนั้นควรมีความเขาใจถึงหลักการใชสีเบื้องตน เพื่อชวยใหการเลือกใช สีชุดใดชุดหนึ่งจากชุดสี พื2.้นฐานอื ่นๆ ไดเหมาะสมกั บลักษณะของเว็บไซต ประเภทสี ในการออกแบบ

ในปจจุบันแหลงกําเนิดสีจะมีอยู 3 ชนิดคือ

105

106

บทที่ 5 สีกับการออกแบบเว็บไซต

สีที่เกิดจากแสง เกิดจากการหักเหของแสงผานแทงแกวปริซึมมี 3 สีคือ สีแดง (Red), สีเขียว (Green) และสีน้ําเงิน (Blue) เรียกรวมกันวา RGB นํามาผสมกันจนเกิดเปนสีสันตางๆ มากมาย ตัวอยาง อุปกรณที่ใชแหลงกําเนิดสีแบบนี้ เชน จอคอมพิวเตอร หรือโทรทัศน

ภาพที่ 5.2 สีที่เกิดจากแสง RGB

สีเกิดจากหมึกสีในการพิมพ เกิดจากการผสมหมึกพิมพทั้ง 4 สีในเครื่องพิมพคือ สีฟา สี มวงแดง สีเหลือง และสีดํา เรียกรวมกันวา CMYK จนไดออกมาเปนสีสันตางๆ ตามที่ตองการ ในการ ทํางานกราฟก ถาหากวาเปนงานที่นําไปพิมพตามแทนพิมพแลว นักออกแบบก็ควรจะเลือกใชโหมดสี แบบนี้ทุกครั้ง เพื่อใหไดผลลัพธที่ออกมาตรงกับที่เห็นในจอคอมฯ ที่ทํางานอยู

ภาพที่ 5.3 สีเกิดจากหมึกสีในการพิมพ CMYK

บทที่ 5 สีกับการออกแบบเว็บไซต

สีที่เกิดจากธรรมชาติ เปนสีที่ไดจากธรรมชาติ จากกระบวนการสังเคราะหทางเคมี 3 สีคือ สี แดง สีเหลือง และสีน้ําเงิน หลังจากนั้นจึงนํามาผสมกันจนเกิดเปนสีอื่นๆ แหลงกําเนิดสีแบบที่เราเรียนกัน มาในชัว่ โมงศิลปะตั้งแตเด็กจนโต ที่เรียกกันวาแมสีก็คือสีแบบนี้นั่นเอง การผสมสีไวใชงานจะใชงานจะใชวิธีผสมจากสีที่เกิดจากสีที่เกิดธรรมชาติ โดยเริ่มผสมจากแมสี หรือสีขั้นที่หนึ่ง ไปจนเปนสีขั้นที่สองและขั้นที่สามตามลําดับภาพแตละสีมีความหมายอยางไร?

สีขั้นที่ 1

สีขั้นที่ 2

สีขั้นที่ 3

ภาพที่ 5.4 สีที่เกิดจากธรรมชาติเปนสีที่ไดจากธรรมชาติ

2. รูปแบบชุดสีพื้นฐานในการออกแบบ รูปแบบชุดสีที่ถูกจัดกลุมอยางเขากันที่ ชวยใหผูใชสามารถเลือกชุดสีเหลานี้มาใชในการ ออกแบบไดโดยไมตองเสียเวลาสุมเลือกสีตางๆ มีดังตอไปนี้ 2.1 ชุดสีรอน (Warm Color Scheme) ชุดสีรอนประกอบดวยสีมวงแกมแดง แดงแกมมวง แดง สม เหลือง และเขียวอมเหลือง สี เหลานี้สรางความรูสึกอบอุน สบาย และความรูสึกตอนรับแกผูชม ชวยดึงดูดความสนใจได งาย ในทางจิตวิทยาสี รอนมีความสัมพันธกับความตื่นเตน ความสนุก ความอบอุน ความสดใส มี ชีวิตชีวา วัยรุน ความคึกคะนอง

107

108

บทที่ 5 สีกับการออกแบบเว็บไซต

ภาพที่ 5.5 เว็บไซตที่ใชชุดสีรอน (Warm Color Scheme)

1

2

บทที่ 5 สีกับการออกแบบเว็บไซต

1. เว็บไซต Canderel ออกแบบโดย Cenk Yilmaz 2. เว็บไซต Termobravo ออกแบบโดย Pawel Linard 3. เว็บไซต Johnnie Wallker Red Label ออกแบบโดย Sasha Nilov 4. เว็บไซต A RemStroy ออกแบบโดย IndieStudio

3

4

109

110

บทที่ 5 สีกับการออกแบบเว็บไซต

2.2 ชุดสีเย็น (Cool Color Scheme) ชุดสีเย็นประกอบดวยสีมวง น้ําเงิ น น้ําเงินออน ฟา น้ําเงินแกมเขียว และสีเขียว ตรงกัน ขามกับชุดสีรอน ชุดสีเย็นใหความรูสึกเย็นสบาย องคประกอบที่ใชสีเย็นเหลานี้จะดูสุภาพเรียบรอย และมี ความชํานาญแตในทางจิตวิทยา สีเย็นเหลานี้กลับมีความสัมพันธกับความซึมเศราหดหูและ เสียใจ นอกจากนั้ น ชุดสีเย็นมีความกลมกลืนกันโดยธรรมชาติ แตอาจจะดูไมนาสนใจในบางครั้ง เพราะขาดความแตกตางของสีที่เดนชัดเชนเดียวกับชุดสีรอน จะเห็นวามีอีก 2 สี ที่ไมอาจจําแนก ออกเปนสีรอนหรือสีเย็นได อยางแนนอน คือ สีเหลืองและสีเขียว เพราะสีทั้งสองสามารถใหความรู สึกไดทั้งรอนและเย็นตามแตสถานการณและสีรอบขาง

ภาพที่ 5.6 เว็บไซตที่ใชชุดสีเย็น (Cool Color Scheme)

1. เว็บไซต Tree Nursery ออกแบบโดย OakmE 2. เว็บไซต Sense-design ver 1 ออกแบบโดย Webdesigner1921 3. เว็บไซต EPSON: Exceed Your Vision ออกแบบโดย Warbiee

1

บทที่ 5 สีกับการออกแบบเว็บไซต

2

3

111

112

บทที่ 5 สีกับการออกแบบเว็บไซต

3. การวางโครงสี (Color Schematic) สําหรับงานออกแบบเว็บไซต เคยไหม ? เวลาที่จะดีไซนหนาเว็บๆ หนึ่ง แตไมรูจะใชโทนสีอะไร เคยไหม? ที่รูวาความตองการ ของลู ก ค า คื อ อะไร แต เ ลื อ กใช คู สี ไ ม เ ป น เรื่ อ งสํ า คั ญ ที่ สุ ด ของการใช สี คื อ การนํ า เอาสี ไ ปใช ใ นงาน ออกแบบ หลายคนไมรูจะใชสีอยางไรดี เลือกเอาสีที่ตัวเองชอบปะเขาไปในงาน ผลก็คือ ทําใหงานดีๆ ออกมาเสียหมด การเลือกใชสีในเว็บก็มีสวนสําคัญที่จะทําใหเว็บคุณรุงหรือรวงไดเชนกัน ดังนั้นจึงมีทฤษฎีของการใชสี หรือการเลือกสีมาใชรวมกันในภาพ เพื่อใหภาพออกมาดูดี ดูนาพึง พอใจ เรียกวา Color Schematic หรือการวางโครงสี (ซึ่งบางคนก็คุนกับคําวา การจับคูสี การเลือกคูสี) ภาพที่ 5.7 การวางโครงสี (Color Schematic)

Monochrome

บทที่ 5 สีกับการออกแบบเว็บไซต

3.1 Monochrome หรือโครงสีเอกรงค คือมีเนื้อสี Hue เดียว แตใหความแตกตาง ดวยน้ําหนักสี Value สีเอกรงคนี้ ใหอารมณ ความรูสึก สุขุม เรียบรอยเปนสากล ไมฉูดฉาด สะดุดตา และในดานการออกแบบเปนการใชคูสี ที่งายที่สุด แลวออกมาดูดี (เลือกแคสีเดียวแลว นํามาผสมขาว ผสมดํา หรือ ปรับคาความสวาง Brightness เพื่อเปลี่ยนน้ําหนักสี Analogues สี เอกรงค เ มื่ อ ใช แ ล ว จะให ค วามรู สึ ก สุ ขุ ม ไม ฉูดฉาด สบายตา ลองดูตัวอยางเว็บแบบโครงสี เอกรงค ภาพที่ 5.8 การใชโครงสีเอกรงค

เว็บไซต irontoiron.com

113

114

บทที่ 5 สีกับการออกแบบเว็บไซต

3.2 Analogues หรือ โครงสีขา งเคียง คือสีที่อ ยูติดกัน อยูขางเคียงกัน ในวงจรสี จะเปนที่ละ 2 หรือ 3 หรือ 4 สีก็ได แตไมควร มากกวานี้เพราะสีอาจจะหลุดจากความขางเคียง หรือหลุดออกจากโครงสีนี้ได

ภาพที่ 5.9 การใชโครงสีขางเคียง

เว็บไซต blinksale.com

บทที่ 5 สีกับการออกแบบเว็บไซต

3.3 Dyads หรือโครงสีคูตรงขาม สีคูตรงขาม หรือ Contrasting Colour Schemes คือสีที่อยูตรงกันขามกันในวงจรสี การ เลือกใชสีคูตรงขามจะทําใหงานที่ไดมีความสะดุด ตาในการมองแต ก็ ต อ งระวั ง การใช สี คู ต รงข า ม เพราะการเลือกใชสึคูตรงขามดวยกันนั้นถาเรา หยิบสี 2 สีที่ตรงขามกันมาใชในพื้นที่พอๆ กัน งานนั้ น จะดู ไ ม มี เ อกภาพ ซึ่ ง เป น หลั ก สํ า คั ญ ใน การทํางานศิลปะทางที่ดีเราควรแบงพื้นที่ของสีใน ภาพของการใช สี ใ ดสี ห นึ่ ง มากกว า อี ก สี ห นึ่ ง โดยประมาณมักจะใชสีหนึ่ง 70 % อีกสีหนึ่ง 30 % ภาพที่ไดก็จะคงความมีเอกภาพอยู และยังมี ความเดนสะดุดตาไปไดในตัว

ภาพที่ 5.10 การเลือกใชสีคูตรงขามในการออกแบบ

เว็บไซต joyproject.it/

115

116

บทที่ 5 สีกับการออกแบบเว็บไซต

3.4 Triads หรือโครงสี 3 สี คือ Triads หรือโครงสี 3 สี คือ 1. Triadic เปนการใชสี 3 สี ในชวงหาง ระหวางสีทั้ง 3 เทากัน ถาเราลากเสนระหวางสีทั้ง 3 สี เราจะไดสามเหลี่ยมดานเทา

2. Split-Complementary เปนการใชสี 3 สี ในชวงหางระหวางสีทั้ง 3 ไมเทากันคือมีชวงหาง 2 ชวง เท า กั น แต กั บ อี ก อั น หนึ่ ง ช ว งห า งจะยาวกว า ถ า ลากเสนระหวางสีแลวจะไดสามเหลี่ยมหนาจั่ว เทคนิคการใชโครงสี 3 สี เทคนิคนี้สีที่ไดจะดู สนุกสนานและหลากหลายกวาแบบอื่น

ภาพที่ 5.11 ใชสี 3 สี ในชวงหางระหวางสีทงั้ 3 เทากัน

เว็บไซต crayola.com

บทที่ 5 สีกับการออกแบบเว็บไซต

3.5 Tetrads หรือโครงสี 4 สี คือ 1. การใชสีในวงจรสี 4 สี โดยเลือกสีที่มีชวงหาง ระหวางสีเทากันหมดกลาวคือ ถาเราลากเสนเชื่อมสี ทั้ง 4 สีแลว เราจะไดสี่เหลี่ยมจัตุรัส

2. การใชสีในวงจรสี 4 สี โดยเลือกสีที่มีชวงหาง ระหวางสีไมเทากันโดยชวงหางของ 2 สีเปนชวงสั้น และอีก 2 สีเปนชวงยาว กลาวคือถาเราลากเสนเชื่อม สีทั้ง 4 สีแลว เราจะไดสี่เหลี่ยมผืนผา

ภาพที่ 5.12 ใชโครงสี 4 สีชวงหางระหวางสีไมเทากัน

เว็บไซต f-i.com

117

118

บทที่ 5 สีกับการออกแบบเว็บไซต

4. รูปแบบชุดสีสําหรับการออกแบบ ใครที่ เ พิ่ ง เริ่ ม ต น ใช สี ใ นงานออกแบบ อาจจะมีปญหาคิดสีไมออก ใชสีแลวไมสวย แตก็ไม จํ า เป น ต อ งไปซื้ อ หนั ง สื อ ชุ ด สี ม าเก็ บ ไว เพราะ หนังสือสวนใหญจะเตรียมชุดสีไวให แตไมไดบอก วิ ธี ก ารใช ง าน ปริ ม าณสี หรื อ หลั ก การใช สี นั ก ออกแบบสองคนใชชุดสีเดียวกัน งานอาจจะไมสวย เหมื อ นกันก็ ได เพราะถา เปนเรื่ อ งของสี หลัก การ และวิธีการใชสีสําคัญยิ่งกวาตัวสีเสียอีก

แลวจะคนหาสีที่ เหมาะสมที่สุด ไดอยางไร ?

สมมติสถานการณ วาไดรับโจทยใหออกแบบหนา โฮมเพจของหนวยงานแหงหนึ่งในสถาบันการศึกษา โดยภาพที่ไดเปนภาพตึกเกา ๆ ธรรมดาที่ที่แสดง อัตลักษณองคกร

คํ า ตอบคื อ สี ที่ คุ ณ มองหา ซ อ นอยู ใ น ภาพที่ เ ลื อ กใช ม าประกอบอยู แ ล ว อยู ที่วาคนหาดวยวิธีใด ถาใหเลือกองคประกอบมาสักอยางที่ มีผลตอคนดูมากที่สุด “สี” คือคําตอบสุดทาย เพราะสี เ ป น ตั ว ช ว ยดึ ง ดู ด ความสนใจ สร า ง อารมณ และสื่อความหมาย แตปญหาคือสีไหน เหมาะสมที่สุด เพราะสีมักจะไมอยูแบบเดี่ยวๆ แตจะ มีสีอื่นๆ มาอยูดวย เพราะแบบนี้คุณจึงสามารถ อกแบบงานโดยหยิบสีมาเลนไดสารพัด แตสีที่ ใชก็ควรอิงกับสีขององคประกอบตางๆ บนหนา งานดวยวิธีการเปนอยางไร ลองไปดูกัน

บทที่ 5 สีกับการออกแบบเว็บไซต

4.1 ภาพทุกภาพมีกลุมสีของตัวมันเองที่เกิดขึ้นตามธรรมชาติอยูแลว ลองลดสีลงใหอยูในระดับที่สามารถใชงานไดกอน อาจจะเปน 16,32,64 สีก็ได โดยใช โปรแกรม Photoshop ทําสําเนาภาพออกมา (เพื่อไม ใหกระทบกับภาพตนฉบับ) ตอจากนั้น เลือกเมนู Filter> Pixilate> Mosaic (ภาพลาง) สังเกตวาขนาดพิกเซลใหญขึ้นชวยกรองสีให เหลือนอยลง

ภาพที่ 5.13 การทําภาพใหเปนพิกเซล เพื่อดูกลุมสีใน

119

1200

บทที่ 5 สีกับการออกแแบบเว็บไซต

4.2 ดึงสีออกมาใช เลือกสีที่เห็นววามีอยูในภาพพมากที่สุดกอนแล น วไลไปยังสีที่นอยที่สุด โดยใชเครื่องมือ Eyedroppeer tool ดูดสีมาจากภาพ ให ใ เลือกครอบคลุมโทนสีเขม สีกลาง และสีออนของสีนัน้ ๆ ดวย ภาพนี้มีทั้งสวนสว ว างและสสวนมืดอยูดวย ถึงจะไมมากกแตก็ไมควรมมองขาม เวลาาเลือกสีก็ใหจบ บ ่อเสร็จแล จ วคุณจะทึ่งงเมื่อเห็นจานสีสี เปนกลุมๆ แลวนํามาแแยกเรียงตามคคาน้ําหนักสี (อออนไปเขม) รับรองเมื ของคุณเอง ภาพที่ 5.14 ดึงสีจากภภาพมาใช และะแยกกลุมสี

ฝงสีเขม

ฝงสีออน

บทที่ 5 สีกับการออกแบบบเว็บไซต

4.3 ทดลองงใชสี นําภาพไปวางบน ภ นสีตัวอยางแตละสี แลวดูผลลั ล พธความแตตกตาง ซึ่งปกติติชุดสีที่ใชจะดูดูดีเพราะสี ที่หยิบใช เปนสี น ที่มีอยูในภาพอยูแลว กลุมของสสีรอน (น้ําตาลล น้ําตาลเขม) จัดอยูในกลุมมสีรอน สีแนววนี้เหมาะ กับการสื่อเกี อ ่ยวกับ ควาามมั่นคง อบอุอุน ปลอดภัย

กลุมของสีสีเย็น (เขียวในนโทนตางๆ เขีขียวอมเทา) เพ พิ่มความเครงขรึ ง ม รมเย็น สนชื่น

121

122

บทที่ 5 สีกับการออกแบบเว็บไซต

4.4 สรางชุดสี เมื่อเราไดชุดสีของภาพ และรูตําแนงของสีบนวงจรสีแลว (วงจรสีเปนไกดเฉยๆ สีในวงจรสี อาจ ไมตรงเปะกับชิ้นงานที่ได) ตอนนี้ก็สามารถสรางชุดสีใหเกิดความนาสนใจขึ้นมาไดตามใจชอบ และยัง สามารถคละสีที่มีน้ําหนักสีในระดับตางๆ ไดดวย เชน Monochromatic เปนการเลือกสีกลางๆ สีเขม และสีออน ของสีตั้งตนที่ไดระบุไวในขั้นตอนที่แลว ชุดสีนี้จะมีความลึกของสี

Analogous เป น การใช สี ข า งเคี ย ง ซึ่ ง ทํ า ให เ กิ ด ความสวยงาน เกิ ด ความกลมกลื น ที่ กําลังดี มีความคอนทราสตต่ํา

Complement เปนการใชสีตรงกันขามกับสีตั้งตน ชุด สีลักษณะนี้จะชวยเนนคอนทราสต ทํา ใหรูสึกกระฉับกระเฉง

Split Complement เปนการใชสีแบบผสมระหวาสีตั้งตนมา จับคูกับอีก 2 สีที่อยูตรงกันขาม ความ สวยงามของคอนทราสตที่ไมจัดของสี ข า งเคี ย ง เหมาะกั บ การไปใช เ น น จุดเดนตางๆ Rectangle (tetradic) เปนรูปแบบที่นําสีฝงตรงขามอยางละคู มาเบรคกัน ซึ่งถือเปนการผนวกรวมที่ จัดจานและนาตื่นเตนดี

บทที่ 5 สีกับการออกแบบเว็บไซต

4.5 ออกแบบและใสสี เมื่อจัดวางองคประกอบของภาพ ที่วาง และตัวอักษรไดตามตองการ จากนั้นเปนเวลาของการ ตัดสินใจวาจะหยิบสีไหนมาใช หลักการเลือกสีมาใช หัวใจสําคัญอยูที่การนึกถึงสารที่ตองการสื่อถึง คนดู โดยตองประเมินสีแตละสีกับจุดประสงคที่ตั้งไววาเกี่ยวกับอะไร และใหอารมณเชิงไหน

ดูเปนทางการ สีเขมๆ ของสีน้ําเงินชวยดึงรูปภาพใหเดนขึ้นมา และเมือ่ ไดสีสมมาอยูคูกันดวยทําใหเกิด ความคอนทราสตอยางเปนธรรมชาติ

สบายๆ ไมเปนทางการ สีพื้นแบ็คกราวดที่ใช คือสีขางเคียงที่อยูถัดจากสีน้ําเงินไป 2 ชวง นั่นคือน้ําเงินอมเขียว ซึ่ง เปนสีที่สวยและมามีสีนี้ปรากฏอยูในภาพเลย ความแตกตางตรงนี้ทําใหมีมิติ มีชีวิตชีวา เหมาะกับการสื่อ ความหมายที่ไมเปนทางการนัก สมัยปจจุบันดีไซนเนอรหลายๆ คนมักนิยมใชสีนี้ สวนตัวอักษรใชสีสม ออนทําใหเกิดความคอนทราสตแบบเบาๆ กําลังดี

จัดจาน สีสมอันโดดเด นมาจาจากกลุ มสีสวนใหญในภาพ แตเพิ่ม คาน้ํา หนักสีให สวางขึ้ น สว น ขอความเจาะขาว จึงดูแปลกตาใหผลลัพธที่เกไก แตตองวัดใจลูกคาถากลาพอที่จะเลือชุดสีนี

123

1244

บทที่ 5 สีกับการออกแแบบเว็บไซต

5. จิตวิ​ิทยาสีในการออกแบบเว็บไซต สี สามารถสื่อความหมายของเว็บไซตไดโดยไมตองใใชคําบรรยายใใดๆ สีที่ใชมีออิ​ิทธิพลตอการร ออกแบบบไมวาคุณจะตัตัง้ ใจหรือไม มั​ันชวยนําสายตตาของผูใชงานนไปยังสวนตางๆของเว็ า บไซตและยังทําใหห เกิดอารมมณความเคลื่อนไหวภายใน อ นหนาเว็บไซตนัน้ันๆ อยางที่ คุณจะเห็นไดในเว็ น บไซตของธุรกิจตางๆ ซึ่ง นําสีเขามาใช ม เพื่อชวยใในการบงบอกกตัวตนขององคกร ประเภทขของผลิตภัณฑ ฑหรือสินคา การจับคูสี เปน อีกเทคนิคหนึ ค ่งที่จะชวยสื ย ่ออารมณและความหมาย ล ยของเว็บไซตควบคู ค กันไป เชชน สีฟาออนที่ใหความรูสกึ สงบตัดกับ สีสมสดใส เปลี่ยนบรรยยากาศของเว็บไซต บ ใหดูสุภาพ เปนมิตรแลละแฝงความสนุกสนานไวได ในคราวเดียวกัน และหหากเว็บไซตสีเทา เ เขมของคุณดูแข็งกราว ลองเติมสีฟาออนลงไปจะชชวยผอนคลายย ภาพรวมขของเว็บไซตใหออนโยนลงไดด

พบไดในเว็ว็บไซต เบเกอรี่ , งาานชาง , เฟอรนินเิ จอร , กาแฟฟ , สิ่งปลูกสราง , ทองเที่ยว , เดินทาง

พบไดในเว็ว็บไซต ของเลน , เด็ด็ก , ศาสนา

พบไดในเว็ว็บไซต ตกแตงบาน , อาหาร , สั​ัตวเลี้ยง , การรศึกษา ,

พบไดในเเว็บไซต ขาว , ศิลปะ ป , ออกแบบ , เทศกาล , ความบันเทิง , รรถ

บทที่ 5 สีกับการออกแบบบเว็บไซต

พบบไดในเว็บไซซต แฟฟชั่น , เครื่องสําอางค , ขนมหวาน , แตงงาาน , หาคู

พบบไดในเว็บไซซต คววามงาม , ดอกกไม , แฟชั่น

พบบไดในเว็บไซซต ธุรกิ ร จ , การสื่อสาร ส , อสังหาริมทรั ม พย , เครือ่องดื่ม , วิทยาศาสตร ท

พบบไดในเว็บไซซต รีสอร ส ท , ทองเทียว ่ , ทะเล

พบไดในเว็บไซซต พ สิงแวดล ง่ อม , ผลิตภัณฑจากธธมมชาติ , เทคคโนโลยี

พบไดในเว็บไซซต พ เททคโนโลยี , ดนนตรี , ภาพยนตตร , ภาพถาย , เครื่องดื่ม แออลกอฮอล ชา กาแฟ , จิเวลลรี่

125

126

บทที่ 5 สีกับการออกแบบเว็บไซต

6. หลักการเลือกใชสีในการออกแบบเว็บไซต การเลือกสีสําหรับสรางเว็บไซตใหกับองคกรหรือแบรนดใดแบรนดหนึ่งเพื่อมาออกแบบ ถือวา เปนกุญแจที่สําคัญอีกประการหนึ่งของการสราง Corporate identity หรือ อัตลักษณขององคกร เรา จําเปนตองมีเอกลักษณ มีจุดเดนที่แตกตางจากที่อื่นๆ ที่อยูในแวดวงการทํางานลักษณะเดียวกัน สีทุกสีมีความหมายที่แตกตางกัน และก็ขึ้นอยูกับหลากหลายปจจัยดวย ถาเราจําเปนตองเลือก สีมาใชในการสรางอัตลักษณของแบรนดของเรา เราจะมีเทคนิคในการเลือกสีอยางไร

6.1 เลือกสีทบี่ รรยายความเปนตัวตนขององคกรของคุณใหมากที่สุด สีที่เราเลือกใชควรบอกไดทันทีวา “เราเปนใคร” เมื่อลูกคาเห็นเคาสามารถรูไดเลยวาธุรกิจของ เรานั้นเขมแข็ง จริงจัง ซับซอน สนุกสนาน หรืออะไรก็แลวแตที่คุณอยากจะเปน ดังนั้นพยายามเลือกใชสี ที่บงบอกความเปนตัวตนของตัวเองใหไดมากที่สุด เว็บธนาคารตางๆ ที่เลือกใชสีที่สรางอัตลักษณองคกรอยางชัดเจน เชน เว็บไซตธนาคารกสิกรไทย เว็บไซตธนาคารไทยพาณิชย เว็บไซตธนาคารกรุงศรีอยุธยา

บทที่ 5 สีกับการออกแบบเว็บไซต

6.2 รูหลักจิตวิทยาของสี หลังจากที่เลือกสีไดแลว คุณตองมั่นใจวา ไดเลือกสีที่ถูกตอง ตรงกับขอความที่ตองการสื่อ ออกไป จึงจําเปนตองมีความรูที่ดีเกี่ยวกับความหมายของสีที่เลือกดวย ถาเปนองคกรที่เกี่ยวของกับ การเงิน มักจะเลือกใชสีน้ําเงินเพื่อแสดงถึงความคูควรแกการไววางใจ เว็บ social media ก็ใชสีน้ําเงิน เพื่อสื่อถึงมิตรภาพ องคกรที่เกี่ยวกับสตรีก็จะใชสีชมพู สวนสีเขียวมักจะถูกเลือกใชเพื่อสื่อสารถึงแนวคิด เกี่ยวกับความรุงเรือง เงินตรา และสิ่งแวดลอม จริงๆ แลว มันมีหลายสิ่งหลายอยางที่คุณควรรูเกี่ยวกับ หลักจิตวิทยาของสีแตละสี

1. เว็บไซต 2010.dconstruct.org 2. เว็บไซต toriseye.quodis.com 3. เว็บไซต masters.edu 4. เว็บไซต gopal-seema.com

เว็บไซตเลือกใชสื่อสารถึงแนวคิดสิ่งแวดลอม 1

2

เว็บไซตเลือกใชสีน้ําเงินเพื่อแสดงถึงความคูควรแกการไววางใจ 3

4

127

1288

บทที่ 5 สีกับการออกแแบบเว็บไซต

6.3 เลือกสี อ ทใี่ หควาามหมายดานบวก น เปนเรื่องสําคัญมากๆ ที่สีของคุ ข ณตองสรรางความรูสึกกระทบใจ ก (Im mpact) ในดดานบวกใหกับ องคกรขอองคุณ จําไวเสมอว ส าจิตวิทยาของสี ย นั้นสําคัญเพียงไร สีที่คุณเลือกใชก็คือขอความทที่เกี่ยวของกับ บริษัทที่คุคณสื่อไปยังลูกคา การใชสีแดงสําหรับบริริษัทจัดดอกไมม ใหความรูสึกด ก านบวก เพพราะเปนสีของง กุหลาบแแดงแหงความรัก แตถาเลือกใช ก สีดําสําหรั​ับบริษัทของเด็ด็กเลน ก็อาจจจะไมไดให imppact ดานบวกก สักเทาไหหรนัก เพราะวา มันไมคอยจจะดึงดูดบรรดาาเด็กๆ นั่นเอง เ าสีใหความหมายที ค ่ตตางกันออกไปป นักออกแบบเเว็บสวนใหญตัตดสินใจที่ Baase on color เพราะว เชน สีแดง ด หมายถึงคววามเรงดวน ดั​ังนั้นถาหากคุณสั ณ งเกตจะพบบวา เวลามีการ า กระหน่ําลดดราคาสินคา สี แดงมักจะถู จ กนํามาใชในการเรี ใ ยกลูกค ก า โดยการเขีขียน SALE ตัวใหญ ว ๆ หรือเออามาทําเปนสัญลักษณเพือ่ บอกลุกคาวา นี่คือนาททีทอง ถาเธอไไมซื้อตอนนี้ เธธอจะพลาดโออกาสครั้งสําคัญ! ญ และลูกคาาทุกประเภทก็ก็ จะสนใจสีที่ตางกันออกกไปดวย ลูกคาที่เปนพวกแอคทิฟก็จะสนนใจสีสม สีดํา และสีน้ําเงินเขขม สวนลูกคา แนวๆ ปรระหยัดมัธยัสถถ ก็จะสนใจพววกสีกรมทา สีน้ําเงิน เปนตน องคกรที่เลื เ อกใชสีที่มีความหมายดานบวกมาออกแบ น บบเว็บไซต ที่มา : Ussing the Right Colors to Evokke the Right Em motion , http://ssocialmediaweeek.org/

บทที่ 5 สีกับการออกแบบเว็บไซต

6.4 รูวาคูแขงใชอะไรบาง คูแขงของคุณก็เปนอีกอยางหนึ่งที่สําคัญอยูเสมอ “รูเขารูเรา รบรอยครั้ง ชนะรอยครั้ง” คําพูดนี้ ใชไดทุกโอกาส การที่เรารูวาคูแขงของเราเลือกใชอะไร เราก็สามารถเลือกใชสิ่งที่สามารถสรางความโดด เดนจากพวกเคาได แตอยางไรก็แลวแต สีที่คุณเลือกก็ตองเหมาะกับภาพลักษณของแบรนดของคุณดวย ไมใชวาคิดแตใหเดนจากคนอื่น แตไมไดเกี่ยวของอะไรเลยกับภาพลักษณที่เราตองการจะสื่อออกไป แบบ นี้ก็ไมถูกตอง ลองเลือกสีที่ตรงกันขามกับคูแขง ก็จะทําใหเราสามารถโดดเดนออกจากพวกเคาได เชน ถา คูแขงเลือกสีแดง เราก็ใชสีน้ําเงิน ถาเคาใชสีเหลือง เราก็ใชสีมวง ประมาณนี้ครับ

การวางตําแหนงสีใหแตกจากคูแขงกันของกลุมเว็บไซตโซเชียลเน็ตเวิรค

เว็บไซตของคูแขงขันเครื่องดื่มน้ําอัดลมที่เลือกสีที่แตกตางกัน

129

130

บทที่ 5 สีกับการออกแบบเว็บไซต

6.5 พิจารณาการแปลความหมายดานวัฒนธรรมดวย ประเทศแตละประเทศก็มีวัฒนธรรมที่แตกตางกันออกไป และแนนอนวาสีแตละสีก็จะให ความหมายที่ตางกันไปดวยสําหรับแตละประเทศแตละวัฒนธรรม ในแงมุมของการออกแบบที่ นัก ออกแบบจะตองชั่งน้ําหนักอยางรอบคอบ เพราะสีเปนขอความที่พวกเขาสงไปที่ฐานผูใชในวงกวาง และบางครั้งสามารถสงถึงผลกระทบโดยไมไดตั้งใจในตีความหมายของสีที่ตางวัฒนธรรม ถาคุณอยู ที่ไหน คุณจําเปนตองรูความหมายของสีที่อยูในสถานที่ของคุณ คุณถึงจะประสบความสําเร็จได ดังนั้นตองแนใจวาสีที่คุณเลือกนั้นสรางความประทับใจตอกลุมเปาหมาย ยกตัวอยาง เชน

สีแดง วั ฒ นธรรมตะวั น ตก (ทวี ป อเมริ ก าเหนื อ และยุ โ รป) สี แ ดงเป น สี ข องความรั ก และความ ตื่นเตน มันมีความสัมพันธทั้งบวกและลบ – อันตรายความรักและความตื่นเตน และเมื่อนํามาใชกับการ เชื่อมตอกับอดีตเยอรมันตะวันออกมันหมายถึงลัทธิคอมมิวนิสต แดงยังเกี่ยวของกับอํานาจ และมีแฝง ทางศาสนาบางอยางเมื่อนํามาใชกับสีเขียวเพื่อเปนตัวแทนของคริสมาสต วัฒนธรรมตะวันออกและเอเชีย สีแดงเปนสีแหงความสุขความสุขและการเฉลิมฉลอง มัน มักจะเปนสีที่สวมใสโดยเจาสาวในวันแตงงานของพวกเขาเพราะมันเปนความคิดที่จะนําโชค, ชีวิตที่ ยาวนานและมีความสุข นอกจากนี้ยังเปนสีที่มักจะเกี่ยวของกับรานอาหารจีนในประเทศสหรัฐอเมริกา เพราะหมายถึงโชคและความสุข โดยเฉพาะในประเทศอินเดียเกี่ยวของกับความบริสุทธิ์ และในประเทศ ญี่ปุนก็มีความเกี่ยวของกับชีวิต แตยังมีความหมายดานลบคือโกรธหรืออันตราย ทั่วโลก สีแดงเปนสวมใสเพื่อเฉลิมฉลองเทศกาลตรุษจีนที่จะนําโชค, โชคดีและความ เจริญรุงเรือง

บทที่ 5 สีกับการออกแบบเว็บไซต

สีเหลือง วัฒนธรรมตะวันตก สีเหลืองคือลักษณะราเริงสดใสประเทศตะวันตกสวนใหญมันเปนเรื่องที่ เกี่ยวของกับความอบอุน (ดวงอาทิตย), ฤดูรอน และการตอนรับ ในประเทศอเมริกาเปนสีที่เกี่ยวของกับ การขนสง – รถแท็กซี่ และรถโรงเรียน หลายประเภทเปนสีของปายถนน สวนในประเทศเยอรมนี, สีเหลือง มีความเกี่ยวของกับความอิจฉา วัฒนธรรมตะวันออกและเอเชีย สีเหลืองเปนสีที่ถือวาศักดิ์สิทธิ์และมีความเปนจักรพรรดิ ใน ประเทศญี่ปุนหมายถึงความกลาหาญ และเปนสีของการคาในประเทศอินเดีย ละตินอเมริกา สีเหลืองมีความเกี่ยวของกับความตายและการไวทุกข ตะวันออกกลางอียิปต, สีเหลืองสวนใหญเปนสีที่เกี่ยวของอยางใกลชิดกับการไวทุกข ทั่วโลก สีเหลืองแทนคาในรูปแบบทองมากกวา ยังเปนสีของความออนเยาวอีกดวย

สีดํา วัฒนธรรมตะวันตก (ทวีปอเมริกาเหนือและยุโรป) สีดําเปนสีของวาระสุดทาย เปนสีทางการ ของงานศพ และการไวทุกข ในอเมริกาเหนือยุโรปและวัฒนธรรม ก็ถือวายังมีประสิทธิภาพ และแข็งแกรง และสามารถบงบอกถึงการควบคุมหรือบังคับ

131

132

บทที่ 5 สีกับการออกแบบเว็บไซต

วัฒนธรรมตะวันออกและเอเชีย ดําในประเทศจีนสามารถเชื่อมตอกับความเปนชาย และเปน สีสําหรับเด็ก ในทิเบตยังแสดงใหเห็นถึงความมั่งคั่ง สุขภาพ และความเจริญรุงเรือง แตสีดําเปนสวนใหญ ที่เกี่ยวของอยางใกลชิดกับความชั่วราย ละติ น อเมริ ก า วั ฒ นธรรมละติ น เป น สี ที่ ต อ งการสํ า หรั บ เสื้ อ ผ า ผู ช าย นอกจากนี้ ยั ง มี ก าร เชื่อมโยงระหวางการไวทุกข ตะวันออกกลาง สีดํามีความหมายคอนขางตัดกัน หมายถึงทั้งสองเกิดใหม และการไวทุกข ความชั่วราย และความลึกลับ ทั่วโลก สีดํามีความเกี่ยวของกับความมหัศจรรย และลึกลับในเกือบทุกวัฒนธรรม

สีน้ําเงิน และสีน้ําเงิน วัฒนธรรมตะวันตก สีฟาเปนสีที่นิยมมากที่สุดสําหรับการออกแบบโลโกของธนาคารเปนสีฟา เพราะมั น แสดงให เ ห็ น ถึ ง ความไว ว างใจ และอํ า นาจ สี ฟ า ยั ง แทนเป น ชาย และใช แ ทนการเกิ ดของ เด็กผูชายคนหนึ่ง อีกความหมายของสีฟาจะถือวายังเปนที่เงียบสงบผอนคลาย และสงบสุข วัฒนธรรมตะวันออกและเอเชีย เปนสีที่เคยยั่งยืนในการเชื่อมโยงกับความเปนอมตะ ใน วัฒนธรรมอินเดียสีฟาเปนสีของกฤษณะ ทีมกีฬาอินเดียจํานวนมากใชสีเปนสัญลักษณของความ แข็งแรง ในสหรัฐอเมริกาที่สีฟามีความสัมพันธกับผูชายซึ่งแตกตางจากประเทศจีนถือวาเปนสีของผูหญิง ละติ น อเมริ ก า สี ฟ า มั ก จะเกี่ ย วข อ งกั บ ศาสนาเป น สี ข องเสื้ อ คลุ ม พระแม ม ารี ห รื อ ผ า คลุ ม ศีรษะ นอกจากนี้ยังเปนสีของความไววางใจและความสงบสุขในเม็กซิโก ตะวันออกกลาง สีฟามีความปลอดภัย และการปองกัน มันเปนสีที่เกี่ยวของกับสวรรคจิต วิญญาณ และความเปนอมตะ ทั่ ว โลก ในประเทศไทยสี ฟ า เป น สี ที่ เ กี่ ย วข อ งกั บ ศุ ก ร สํ า หรั บ ทั่ ว โลกสี ฟ า ส ว นใหญ มั ก มี ความหมายในเชิงบวก และปลอดภัย โทนสีฟาสําหรับแตละเว็บไซตทั่วโลก เชน Skype, บริษัท โทรศัพท เปนตน

บทที่ 5 สีกับการออกแบบเว็บไซต

สรุป

เทคนิคการนําสีไปใชงานมีอยูมากมายหลายวิธี แตทุกวิธีจะชี้ไปที่วัตถุประสงคเดียว หลักๆ คือ ใชสีเพื่อสื่อความหมาย เพิ่มความนาสนใจใหกับการออกแบบ และสรางอัตลักษณใหเกิดความชัดเจน สรางการจดจํา และใชสีตกแตงสวนอื่นๆ ของภาพใหไดภาพรวมออกมาในอารมณที่ตองการ เทคนิคการเลือกสีมีสูตรสําเร็จใหเลือกใชงานอยูคือ วิธีโยงความสัมพันธจากวงลอสี กอนทํางาน ทุกครั้ง และมีขอแนะนําวา เบื้องตนลองเปดเว็บไซต http://paletton.com/ เว็บนี้ใหเราลองจับโครงสี/คูสี ดวยตัวเองใหเห็นกับตาวา โครงสีที่ควรอยูดวยกัน มีทั้งโครงสีแบบ คู 2 สี โครง 3 สี โครง 4 สีวงลอ แต หลักๆการโดยรวมเรามักจะเลือกสีหลักๆ สําหรับใชในการทํางานกอน การสร า งอั ต ลั ก ษณ ใ ห กั บ องค ก รนั้ น สี ถื อ ว า มี บ ทบาทสํ า คั ญ ในการสื่ อ สาร เราจํ า เป น ต อ ง พิจารณาหลายอยาง ไมวาจะเปนความหมายของสีที่เราเลือกใช วัฒนธรรมที่เกี่ยวของ สถานที่ที่เราทํา ธุรกิจ ในฐานะของนักออกแบบ เราจําเปนตองรูวาสีไหนเหมาะสําหรับงานดีไซนของคุณ ซึ่งถาคุณรูและ เขาใจ คุณก็จะสามารถเลือกสีที่ถูกตอง ลูกคาก็จะพึงพอใจกับงาน

133

บทที่ 6 ภาพกับการออกแบบเว็บไซต

7

บทที่ 6 ภาพกับการออกแบบเว็บไซต

บทที่

ภาพกับการออกแบบ เว็บไซต ในฐานะที่ เ ป น นั ก ออกแบบแบบเว็ บ ไซต ทักษะการออกแบบเว็บสวนหนึ่งที่ตองทําความเขาใจ ก็คือวิธีการใชองคประกอบทางดานภาพ เพราะการ สราง Website นั้น มีความจําเปนอยางมากที่ตองใช รูปภาพในการออกแบบ เพราะภาพเปนสวนประกอบ ที่สําคัญที่เราสามารถพบเห็นในชีวิตประจําวันทัว่ ไปได ในรู ป แบบของแผ น โฆษณา งานนํ า เสนอ กล อ ง สินคา ทําใหผูชมเกิดความสนใจในสิ่งที่นําเสนอ สําหรับเนื้อหาบทนี้เปนการรวบรวมเกี่ยวภาพ และกับการออกแบบจัดการรูปภาพ สามารถสื่อคาม หมายได ดี และมี ค วามเหมาะสมกั บ เนื้ อ หาและ วัตถุประสงค การรูจักกับความหมายของไฟลรูปภาพ ชนิดตางๆ มาใหคุณไดเ ขาใจ และสามารถเลือกใช งานไดอยางถูกตอง ทั้งนี้จะชวยใหคุณประหยัดพื้นที่ บนโฮสติ้งที่คุณเชา และการแสดงผลของหนา website ที่เร็วขึ้น

135

136

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ภาพที่ 6.1 ภาพกับการใชงาน

1. ความสําคัญและประโยชนของภาพ

ภายในเว็ บ เพจของเรานอกจากจะมี เนื้ อ หาที่มี ป ระโยชน แ กผู เข า ชมแล ว หากมีก ารเพิ่ม รู ป ภาพกราฟกตางๆ ก็จะชวยใหเว็บเพจมีสีสันสวยงามนาสนใจมากยิ่งขึ้น ดังนั้นเราจะเห็นไดวาเว็บไซต จํานวนมากจึงนิยมนํารูปภาพมาใชตกแตงและอธิบายเนื้อหาเพื่อใหผูเขามาเยี่ยมชมเว็บไซตไดเห็นภาพ และเขาใจเนื้อหามากขึ้น กอนออกแบบทุกครั้ง เราตองทําการวางแนวทางของชิ้นงานกอนวาจะนําเสนอเรื่องอะไร ใช ภาพ และขอความอะไร จะทําใหทราบถึงแนวทางการสรางชิ้นงานกันตอ ซึ่งอาจจะไมตายตัวเสมอไป แตความสําคัญของการใชภาพก็พอเปนแนวทางสรุปโดยรวมไดดังนี้

บทที่ 6 ภาพกับการออกแบบเว็บไซต

1. เปนพื้นหลังของเว็บไซต เปนการกําหนดภาพเปนพื้นหลัง (Background) โดยภาพหรือสีพื้นหลังที่ใชนั้นควรมีโทนสีให อารมณและสื่อความหมายไดถูกตองตามจุดประสงคของการออกแบบเว็บไซต 2. ใชงานเพื่อการสื่อสาร เปนการใชภาพมาประกอบ โดยใชทั้งภาพ ตัด หรือคัดลอกบางสวนของภาพตางๆ ที่เราจะ นํามาใชในการออกแบบเชน รูปสินคา หรือปายโฆษณา เปนตน 3. การใชประกอบเนื้อหา ภาพเปนการจําลองเอาความเปนจริงมาใหเราศึกษารายละเอียดได อาจจะไดรับการดัดแปลง บางอย า ง เพื่ อ ให ต รงกั บ วั ต ถุ ป ระสงค ข องเนื้ อ หา เช น ถ า ต อ งการให ส ว นประกอบภายใน เครื่องจักรกลก็ตองใชรูปของเครื่องจักรกล แตในลักษณะที่ผาใหเห็นสวนประกอบขางใน เปนตน 4. ใชตกแตง ภาพสามารถสรางความนาสนใจ เมื่อนํามาเปนสวนประกอบมารวมกันเปนชิ้นงาน อาจมีบางภาพ ที่มีขนาดและมุมการจัดวาง ไวตามมุมตางๆ เพื่อสื่ออารมณภาพรวมชิ้นงานที่ไดใหดูกลมกลืนกัน

2. ชนิดของภาพที่ใชในเว็บเพจ

ไฟลของภาพที่สนับสนุนระบบอินเทอรเน็ต ปจจุบันมี 3 ไฟลหลักๆ คือ ไฟลสกุล GIF (ออก เสียง "จิฟ" มาจาก Graphics Interlace File) ไฟลสกุล JPEG (ออกเสียง "เจเพ็ก" มาจาก Joint Photographer's Experts Group) ไฟลสกุล PNG (“พิง” มาจาก Portable Network Graphics) 2.1 ไฟลสกุล GIF (Graphics Interlace File) เปน ไฟลกราฟกมาตรฐานที่ทํางานบนอินเทอรเน็ต มักจะใชเมื่อ ตองการไฟลที่มีขนาด เล็ก จํานวนสีและ ความละเอียดของภาพไมสูงมากนัก ตองการพื้นแบบโปรงใส ตองการแสดงผล แบบโครงรางกอน แลวคอยแสดงผลแบบละเอียด ตองการนําเสนอภาพแบบภาพเคลื่อนไหว

137

1388

บทที่ 6 ภาพกับการอออกแบบเว็บไซตต

จจุดเดน : ขนาดไฟลต่ํา สามมารถทําพื้นขอองภาพให เปนพื้นแบบบโปรงใสได (Transparentt) มีระบบแสดดง ผลแบบ หยาบ แลละคอยๆ ขยาายไปสูละเอียดในระบบ ย Innterlace มี โปรแกรมสนับการสรางจํ ง านวนมาก เรียกดูไดกับ Graphics Browser ทุ ก ตั ว ความมสามารถด านการนํ า เสสนอแบบ ภาพเคลื่อนไหว อ (Gif Annimation) จุ ด ด อ ย : ไฟฟล .GIF เป น ไฟล ไ ก ราฟ ก รุ น แรกที่ สนับสนุนการนํ น าเสนอบบนอินเทอรเน็ต เปนไฟลที่มีมีขนาดเล็ก และแสดงงผลสีไดเพียง 256 สี และกํกําหนดใหแสดดงผลแบบ โครงรางไได (Interlace)) ในป ค.ศ. 1989 เปนไฟลลกราฟกที่ พั ฒ นาต อ โดยเพิ่ ม ค วามสามารถถการแสดงผลลแบบพื้ น โปรงใส (Transparent ( t) และการสรางภาพเคลื า ่อ นไหว น GIF Animation) ซึ่งเปนไฟลลกราฟกที่มีความสามารถพิเศษโดย นํ า เอาไฟฟล ภ าพหลายยๆ ไฟล ม ารวมมกั น และนํ า เสนอภาพ เ เหล า นั้ น โดยอาศั โ ย กาารหน ว งเวลาา มี ก ารใส รู ปแบบการ ป นําเสนอลัลักษณะตางๆ (Effects) ในลัลักษณะภาพเคคลื่อนไหว 11.2 ไฟลสกุล JPEG (Joinnt Photographer’s Experts Group) G เ น อีกไฟลหนึ่งที่นิยมใชบน Internet เปนไฟล เป น ภาพ ที่แสดงสีได ไ ถึง 16.7 ลานสี มักใช ใ กรณี ภาพที่ตองการ นําเสนอมีมีความละเอียดสูง และใชสีสีจํานวนมาก (สนั ( บสนุน ถึง24 bit color) ตองกการบีบไฟลตามมความตองกาารของผูใช ไฟลชนิดนี้มักจะใชกับภาพถายที่นํามาสแกน า แลละตองการ นํ า ไปใช บนอิ บ น เทอร เ น็ ต เพราะให ความคมชั ด และความ แ ละเอียดของภาพสูง

ภาพ พที่ 6.2 ไฟลภาาพประเภท GIFF ที่มีสีไมซับซอน

ภาพทีที่ 6.3 ไฟลภาพ พประเภท JPEG G ซึ่งมีลักษษณะสีทตี่ อเนื่อง มีควาามละเอียดมากก

บทที่ 6 ภาพพกับการออกแบบบเว็บไซต

จุจ ด เด น : สนั บสนุ บ น สี ไ ด ถึ ง 24 bit สามารถ กํ า หนดคค า การบี บ ไฟลล ไ ด ต ามที่ ต อ งการ มี ร ะบบบแสดงผล แ บ บ ห ย า บ แ ล ะ ค อ ย ๆ ข ย า ย ไ ป สู ล ะ เ อี ย ด ใ น ระบบ Progressive มีโปรแกรมสนั โ บบสนุนการสรางจํา นวน มาก เรียกดู ก ไดกับ Grapphics Browsser ทุกตัว ตั้งคาการบีบ ไฟลได (ccompress filees) จุจด ดอย : ทําใหพื้นของรูปโโปรงใสไมได ขขอเสียของ การบีบไฟฟล (Compresss File) กําหหนดคาการบีบไฟล บ ไวสูง (1-10) แมมวาจะชวยใหขนาดของไฟล ข ลมีขนาดต่ําแตตก็มีขอเสีย คือ เมื่อมีการสงภาพจาาก Server ไปแสดงผลที่ Client จะทํา ใหการแสสดงผลชามาก เพราะตองเสีสียเวลาในการรคลายไฟล ดังนั้นการรเลือกคาการรบีบไฟล ควรกกําหนดใหเหมมาะสมกับ ภาพแตละภาพ ะ

ภาพที่ 6.4 ไฟลลภาพประเภทท PNG คุคณภาพสูง ทีมีม่ ีคุณสมบัติโปล ป งใส

1.3 ไฟลสกุล PNG P (Portable Network Grapphics) เป เ นไฟลภาพทีที่ไมไดรับความนิยมมากนักเมื ก ่อเทียบ กับ GIF, JPG J เนื่องจากกเปนรูปแบบใใหม จึงไมสามมารถแสดง ผลไดทุกเบราเซอร เ จุจดเดน : สนับสนุนสีไดถึงตามคา True color c (16 bit, 32 bit หรือ 64 bit) b สามารถกํกําหนดคาการรบีบไฟลได ตามที่ตองการ มีระบบบแสดงผลแบบบหยาบและคอยๆขยาย ไปสูละเอียด (Interlacee) สามารถทําพื้นโปรงใสได จุจ ด ด อ ย : หากกกํ า หนดค า กการบี บ ไฟล ไ ว สู ง จะใช เวลาในการคลายไฟลสูสงตามไปดวย แตขนาดขอองไฟลจะมี ขนาดต่ํา

139

140

บทที่ 6 ภาพกับการออกแบบเว็บไซต

3. ขอพิจารณาในการเลือกใชรูปภาพในการออกแบบ

ภาพถือวาเปนปจจัยสําคัญของเว็บไซตที่เราออกแบบ เพราะภาพเปนสวนสําคัญในการกําหนด ความประทับใจครั้งแรก สามารถดึงดูดความสนใจของผูดู สรางประสบการณการเรียนรูที่ดีกอใหเกิดการ ตอบสนองตอการเขาชม และยังสามารถสื่อสารวาเปนเว็บไซตเกี่ยวกับอะไรไดชัดเจน ในการนําภาพมาประกอบขอความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นํามาใชให เหมาะสมโดยมีขอพิจารณาดังนี้

3.1 ใชภาพทั้งภาพเพื่อการออกแบบ เมื่อออกแบบเว็บไซต ที่ตองการขับเคลื่อนเนื้อหาดวยภาพ เราตองหันไปดูภาพถาย เนื่องจาก คุณอาจวาดภาพประกอบไมได ภาพถายที่เหมาะสมสามารถใชการออกแบบที่ดีและภาพทําหนาที่ไดมี พลังทีเดียว เพียงแคลองประยุกตใชในรูปแบบดังนี้

การสรางความแตกตางในภาพ (Contrast) เปนการใชหลักตรงกันขาม คือถาอยากให ขอความชัดเจน ภาพจะตองเบลอ แตไมเชนนั้นเมื่อใสขอความดานบนของภาพจะดูลายตาและสับสนจน คุณแทบจะไมสามารถอานขอความได

ภาพที่ 6.5 เว็บไซต clouds over cuba ที่ใชหลักการ Contrast มาออกแบบ (http://cloudsovercuba.com)

บทที่ 6 ภาพกับการออกแบบเว็บไซต

เรียกรองความสนใจดวยขนาดของภาพ (Size) ถึงแมวาตําแหนงหนาจอดานบนซาย เป น จุ ด เริ่ ม ต น ที่ เ ป น ตํ า แหน ง ที่ ค นมองมากที่ สุ ด ไม ขึ้ น อยู กั บ รู ป แบบการอ า นวั ฒ นธรรมของแต ล ะ ประเทศ แตหากคุณใชภาพขนาดใหญบนหนาเว็บไซตไดทันทีจะดึงดูดความสนใจของพวกเขา และดึง พวกเขาออกไปจากแนวโนมความสนใจปกติไดอยางดี

ภาพ 6.6 เว็บไซต Woodster (http://holzgefuehl.de/) เปนเว็บไซต ที่ใช ภาพขนาดใหญ เ ต็ ม พื้ น ที่ ใ ช อ ธิ บ าย สินคาไดชัดเจนวาเปนผลิตภัณฑที่เปน ฐานรองรับ iMac และยังมีการเชื่อมตอ USB

ภาพ 6.7 เว็บไซต Mobility (http://www.ora-ito.com/mobility-en/) เว็ บ ไซต ที่ ใ ช หู ฟ ง สี แ ดงฉ่ํ า เพื่ อ กระตุ น ความความสนใจและอาจต อ ง การที่จะซื้อผลิตภัณฑ ตัวอยางนี้จะเห็นวาภาพที่ใชงานมี ประสิ ท ธิ ภ าพในการสร า งความสนใจ เมื่อใดก็ตามที่เราตองการกอใหเกิดการ เปลี่ยน แปลงในพฤติกรรมของผูดู

141

142

บทที่ 6 ภาพกับการออกแบบเว็บไซต

สรางความตอเนื่องดวยองคประกอบ (Continuation) ความตอเนื่องอาจจะมาจากจุดนํา สายตา หรือ ทิศทางขององคประกอบที่อยูในภาพนั้นๆ ซึ่งชี้นําสายตาผูชมงานใหมองไปในทิศทางที่ ผูออกแบบกําหนดไว เมื่อไดมองภาพที่มีองคประกอบไหลตอเนื่อง ทําใหการรับรูของคนเรามีเรื่องราวเปน ลําดับขั้น

ภาพ 6.8 เว็บไซต Apple (http://www.apple.com/iphone-5s) หนา Landing Page ของ iPhone 5s ใช ภาพเครื่องสมารทโฟนขนาดใหญลนจอ แต ใ ห ห น า จอหั น ไปทางตั ว อั ก ษรที่ อธิบายสรรพคุณของรุนนี้ ซึ่งชี้นําสายตา ผู ช มงานให ม องไปในทิ ศ ทางที่ ผู อ อก แบบกําหนดไว

ภาพ 6.9 เว็บไซต Mapquest (http://mobile.mapquest.com) เว็บไซตนี้ไมเพียงบงบอกถึงอารมณของ ภาพ แตยังใชทิศทางการจองมองที่ชาญ ฉลาดเพื่อเปนแนวทางในสายตาของ ผูใชไปยังเนื้อหาที่สําคัญในหนาในกรณี นี้คือลิงคดาวนโหลดมือถือดานซาย

บทที่ 6 ภาพกับการออกแบบเว็บไซต

สรางลําดับความลึกในภาพ (Layering) นักออกแบบมีความพยายามที่จะสราง องคประกอบ ของความลึกที่สามารถเพิ่มความรูสึกสมจริงมากขึ้น กุญแจสําคัญในการจําลองความเปนจริงบนหนาจอ 2D คือการสรางความลึกการใชภาพ บอยครั้งที่การสรางภาพสองสวนที่แตกตางกันระหวางภาพดานหนาและพื้นหลัง การสราง ลําดับชั้น (Layering) เปนเครื่องมือที่สามารถนํามาใชเปนเจตนาสรางความรูสึกของความลึกที่ทําใหคุณ รูสึกราวกับวาคุณกําลังอยูในภาพ

ภาพ 6.10 เว็บไซต Gardener & Marks (http://www.gardenerandmarks.com.au/) ใช เ ทคนิ ค ลํ า ดั บ ชั้ น ของภาพเพื่ อ สร า ง ภาพ 2 มิติใหเกิดระยะลึกในลักษณะ 3 มิติ

ภาพ 6.11 เว็บไซต Charmer Studio (http://eng.charmerstudio.com/) ใชเทคนิคการถายภาพแบบชัดตื้นชัดลึก ทํ า ให เ กิ ด ทั ศ นมิ ติ (Perspective) และ การตัดภาพ (Crop) ใหเหลือเฉพาะจุดที่ ตองการเนนเพื่อสรางความนาสนใจ

143

144

บทที่ 6 ภาพกับการออกแบบเว็บไซต

3.2 ใชภาพออกแบบประกอบเนื้อหา ภาพ เมื่อถูกจับคูกับเนื้อหาที่ดีและมีความสอดคลองสงเสริมอธิบายกันนั้น สามารถดึงความ สนใจไดดี ภาพที่สะดุดตาสามารถนํามาใชเพื่อดึงความสนใจเปนตัวแทนของบทความไดเนื่องจากสมอง ของมนุ ษ ย มี แ นวโน ม ที่ จ ะอ า นแบบข า ม (Skimming) หรื อ การอ า นแบบสแกนแทนการอ า นใน รายละเอี ย ดมากกว า ซึ่ ง รู ป ถ า ยสามารถทํ า ลายความน า เบื่ อที่ ม องเห็ น และช ว ยใหผู ใ ช ใ นการระบุ บทความเชื่อมโยงเรื่องราวได

ภาพที่ 6.12 เว็บไซต Defringe online gallery (http://www.defringe.com/category/digital)

บทที่ 6 ภาพกับการออกแบบเว็บไซต

3.3 ใชภาพประกอบอื่นๆในการออกแบบ สําหรับภาพประกอบและภาพอื่น ๆ เชนภาพ Vector ที่ใชในการออกแบบมีความแตกตางคือ คุณสามารถวาดออกมาใหสอดคลองกับเนื้อหาไดโดยตรง และสามารถจัดวางองคประกอบ โยกยาย ตําแหนงไดอยางอิสระ

ภาพที่ 6.13 เว็บไซตแสดงผลงานการออกแบบของศิลปนชื่อ Mike (http://emotionslive.co.uk/)

ภาพที่ 6.13 เว็บไซตแสดงผลงานของรานตัดผม Dascola (http://www.dascolabarbers.com/)

145

146

บทที่ 6 ภาพกับการออกแบบเว็บไซต

4. การสรางภาพเพื่อใชในการออกแบบเว็บไซต

การพิจารณาการใชภาพในการออกแบบใหเขากับเนื้อหาถือวามีความสําคัญอันดับตนๆ แต หากไมมีงบประมาณและเวลาพอที่จะหาภาพที่เหมาะสม วิธีการออกแบบเปนวิธีที่จะประยุกตใชภาพได หลากหลายมากขึ้น

4.1 จากหนึ่งภาพสูภาพที่หลากหลาย ภาพใหญๆ หนึ่งภาพเต็มไปดวยรายละเอียดมากมาย ถาดูดีๆ คุณจะเห็นวามีอีกหลายภาพ ยอยๆ ซุกซอนอยูในนั้นที่คุณสามารถดึงออกมาใชงานได วิธีนี้นอกจากจะไดภาพที่เกไกแลว ยังไดภาพที่ มีสีสัน ตัวอยางดานลางนี้คือหนาเว็บเพจ จากภาพเพียงภาพเดียวที่นํามาหั่นออกเปน 5 ภาพวางรวมกับ สี่เหลี่ยมผืนผาอมเหลือง กลายเปนชิ้นงานที่นาอัศจรรย (John Mc Wade, 2009)

ภาพทุกภาพเกิดจากเกาอี้ตัวนี้ตัวเดียว

ภาพที่ 6.14 ตัวอยางการออกแบบของ John Mcwade

บทที่ 6 ภาพกับการออกแบบเว็บไซต

เมื่อดูแบบใกลๆ ลงรายละเอียด คุณจะพบวาเกาอี้ธรรมดาๆ ตัวนี้กลับมีการผสมผสานกันของเสนสาย รูปทรง สีสัน สวนโคง และมุมที่ลงตัวจนนาประหลาดใจ ดังนั้น เวลาทํางานกับภาพใหคุณลองมองหา สวนที่จะทําใหคอนทราสตหลากหลายเขาไว

ภาพที่ 6.15 การดึงสวนตางๆ ของภาพมาใชงาน

147

148

บทที่ 6 ภาพกับการออกแบบเว็บไซต

จะเห็ น วา งานชิ้น นี้ครึ่ งบนและครึ่ง ลา ง ให อ ารมณ ต า งกั น ครึ่ ง บนเว น ที่ ว า ง ขณะที่ ค รึ่ ง ล า งอั ด แน น ด ว ยภาพ แต ก็ ไดรับการจัดวางอยางสวยงาม (John Mc Wade, 2009, p.59)

ภาพที่ 6.16 ภาพตัดสวนบนของเว็บไซตที่เนนพื้นที่วาง

ครึ่งบนปลอยหลวม พื้นที่วางๆ สีขาวดึงสายตาใหจับจองไปที่เกาอี้โดยเฉพาะ

‘

ครึ่งลางอัดแนน การจัดวางภาพสอดประสานกันชวยสรางความสมบูรณแบบใหภาพนี้ และเนื่องจากภาพ ทุกภาพถูกวางไวในกรอบสี่เหลี่ยมกระจายกันไป จึงไมมีจุดไหนถูดโฟกัสเปนพิเศษ ภาพที่ 6.17 ภาพตัดลางแสดงการกระจายของภาพ

บทที่ 6 ภาพพกับการออกแบบบเว็บไซต

สีสนและความกล นั มกลืนชวยใหงานดู ง โดดเดนขึ น ้น สิ่งสําคัญในกรณี ใ นี้คือกการใชสีที่เขากั​ับภาพ ใน ตัวอยางใชเครื่ืองมือ Eyedropper Tool เก็บสีตัวอยางจากเก ง าอี้ แลวเทียบกับวงจจรสีวาสีทีควรใใชดวยกัน อยูในตําแหนงไหน ง (โดยใชหลักการจากบบทที่ 5) ในกรณีนี้เลือกใชสีขขางเคียง ซึ่งไมมวาเลือกสีไหนในชวงสี นี้ ก็รับประกันได น วาดูดีแนนอน

ภ ่ 6.18 ภภาพการเลือกใใชสีมาใช ภาพที

149

150

บทที่ 6 ภาพกับการออกแบบเว็บไซต

4.2 พื้นฐานการตัดภาพเพื่อสื่อความหมาย (Crop) การตัดภาพ หรือที่เรียกวา ครอป(Crop) นั้นไมใชเทคนิคสําหรับการตัดภาพใหพอดีกับพื้นที่บน หนางาน แตจริงๆ แลวเปนเครื่องมือสําหรับสรางสรรคงานชิ้นเยี่ยมที่ทําใหเกิดภาพดีๆสักชิ้น หรือชวยให ภาพที่ดูจืดชืดกลับมามีชีวิตชีวายิ่งขึ้น (John Mc Wade, 2009, p.63)

ภาพที่ 6.19 การตัดภาพมาใชบางสวน

ขยาย (Zoom) เพื่อบอกเลาเรื่องราว ความแตกต า งระหว า งระยะ บอกเลาเรื่องราวไมเหมือนกัน ตัวอยาง ภาพบนซ า ยเป น ลู ก เบสบอลในสภาพ มอมแมม ซึ่งดูธรรมดาไมนาสนใจเทาที ควร แตพอลองมาดูภาพขวาที่ครอปซูม เขาไปที่ลูกเบสบอล จะเกิดอีกความรูสึก ทันที ในระยะใกลขนาดนี้จะทําใหเห็น รายละเอียดของหนังลูกฟุตบอล คราบฝุน รอยเย็บ และความสึกกรอนแจมชัดกวา การดู ร ะยะไกล เกิ ด อารมณ ร ว มกั บ บรรยากาศที่เกิดในสนาม เสียงเชียร และ เกมการแขงขัน

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ตัดภาพ (Crop) เพื่อเติมเต็มพื้นที่วา ง วิ ธี ง า ยๆ สํ า หรั บ การออกแบบ เพื่อตกแตงเว็บไซต คือการทําแบนเนอร รูปภาพ แตจะครอปอยางไรเพื่อใหนําไป วางในพื้นที่แคบๆ แบบนั้นได วิธีการก็คือใหครอปตรงสวนที่มี รายละเอี ย ดมากองกั น เยอะๆ เหมื อ น ตัวอยางนี้ มีทั้งกระดุม หลอดดาย และ ไหมพรม แถมยัง มีสี สั นที่ ตัด กั นหลายสี ชวยแยกสิ่งตางๆ ออกมาอยางชัดเจน

ภาพที่ 6.20 การตัดภาพมาเติมพื้นทีว่ าง

151

152

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ภาพที่ 6.21 เพื่อสรางความหมายการนาคนหา

ตัดภาพ (Crop) อยางมีความหมาย ภาพตนฉบับ เหลื อ พื้ น ที่ ด า นซ า ยมากเกิ น ไป การครอปจึงเปนสิ่งที่ควรทําอยางยิ่ง ป ญ หาคื อ ลั ก ษณะการมองของ ผูหญิงคนนี้ดจะไมเขากับสิ่งทีตองการสื่อ

มองหาเปาหมาย เมื่อซูมเขาไปใกลๆ และขยับผูหญิงคน นี้ไปทางขวาใหภาพเลยขอบออกไป วิ ธี ก ารแบบนี้ จ ะช ว ยเพิ่ ม ความน า คนหา และเมื่อใสขอความลงไปทางซาย มันทําใหสายตาของเธอกําลังมองเกี่ยว กั บ เรื่ อ งที่ พ าดหั ว ที่ ว างตํ า แหน ง ไว ใ น ระดับสายตา

บทที่ 6 ภาพกับการออกแบบเว็บไซต

4.3 สรางจุดสนใจ (Focus point) การสรางจุดสนใจเพื่อใหคนดูจับจองตรงจุดที่คุณตองการใหมอง การใสคําวา “ดูตรงนี้” แถมมี ลูกศรหรือวงกลมแดงกํากับไว ไมสามามารถรับประกันไดวาคนอื่จะดูตามที่บอก เวลาถายภาพแมตากลองจะถายโดยโฟกัสสิ่งที่คุณตองการนําเสนอแลวก็จริง แตในภาพอาจมี อะไรอยางอื่นอยูดวยทําใหไมรูวาจะมองไปจุดไหน เพราะแบบนี้เราจึงตองออกแบบเพื่อนําสายตาคนดูให จับไปยังสิ่งที่คุณตองการอยางมีสไตลแบบไมยัดเยียดเกินไป (John Mc Wade, 2009-p.68)

ภาพที่ 6.22 การสรางจุดสนใจดวยภาพราง

วาดเปนภาพราง ผูหญิงสองคนกําลังนั่งทํางาน ซึ่ง ชีวิตจริงก็สามารถพบภาพแบบนี้ไดทั่วไป แตในการออกแบบถือวายังใชไมได ภาพรางของตัวคน ชวยแกปญหา ไดอยางดี สามารถสรางจุดสนใจในการ มองที่ดึงไปที่ภาพราง

153

154

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ดึงออกมาขางหนา นั ก ธุ ร กิ จ 9 คน ตั ว ขนาดเท า ๆ กั น ยื น เรี ย งหน า กระดาน เมื่ อ เราดึ ง สมาชิ ก สองคนในกลุ ม กลายเปนจุดโฟกัส ตามหลักความเปนจริงแลวเมื่อสองสาวกาวออกมาขางหนาเทาก็จะอยูต่ํากวาคนอื่นๆ ดังนั้นใหดึงเทาพวกเธอลงมา และใหศีรษะอยูสูงกวาคนอื่นนิดหนอย

ภาพที่ 6.23 การเลือกตัวแบบที่ตองการและปรับขนาดใหเดนขึ้น

บทที่ 6 ภาพกับการออกแบบเว็บไซต

เบลอฉากหลัง ชางถายภาพคนนี้อยูดานหนาอยาชัดเจน แตมีภาพผลงานของเขาเปนฉากหลังมากมายเขามา กวนสายตา วิธีนี้ใหเบลอภาพผลงานใหหมด ชางภาพคนนี้จะเดนที่สุด เสริมระยะชัดตื้นเลียนแบบการ มองเห็นของมนุษย

ภาพที่ 6.24 เบลอสวนที่เลือกไวโดยใชเทคนิคซอนสีขาวดํา และปรับภาพให จางลง (Opacity) เพื่อเนนชางภาพใหเดนขึ้น

155

156

บทที่ 6 ภาพกับการออกแบบเว็บไซต

4.4 ที่วางในการออกแบบ (Space) เปนการใชที่วาง (Space) บริเวณวางโดย รอบวัตถุ (Object) เรียกวา พื้นที่วางทางลบ (Negative Space) ในการออกแบบงานตางๆ จะตองคํานึงถึงชวงระยะ ใหมีความสัมพันธกัน เนนการคนหา และใช ประโยชนจากพื้นที่วางๆ ที่เคยถูกมองขาม ในตัวอยางนี้จะเห็นเหรียญกระจายเต็มภาพดูแลวอึดอัด วิ ธี ก ารออกแบบ คื อ ลบไปสั ก ครึ่ ง หนึ่ ง ให สั ง เกตที่ รู ป ร า งของเหรี ย ญ เกิ ด พื้ น ที่ ห ายใจ และรูปรางชี้ไปที่พาดหัวโดยอัตโนมัติ ภาพที่ 6.25 การออกแบบพื้นที่วางทางลบ

บทที่ 6 ภาพกับการออกแบบเว็บไซต

ที่วางไมไดหมายความถึงพื้นที่วางเปลาในงานเพียงอยางเดียว แตหมายถึงรวมไปถึงพื้นที่ที่ไม สําคัญหรือ Background ดวย ในการออกแบบงานกราฟกที่วางจะเปนตัวชวยในงานดูไมหนักจนเกินไป และถาควบคุมพื้นที่วางนี้ใหดี ๆ ที่วางก็จะเปนตัวที่ชวยเสริมจุดเดนใหเห็นไดชัดเจนมากขึ้น

ภาพที่ 6.26 การออกแบบพื้นที่วางทางบวก (Positive Space)

การออกแบบพื้ น ที่ ว า ง (Space) โดยใช ตั ว อั ก ษรที่ เป น โลโก ม าจากชื่ อ ย อ มา พิ ม พ ตั ว ใหญ บ นภาพพื้ น หลั ง ทํ า การเจาะขาว และ ทําเปนรูปในลักษณะบริเวณ ว า งที่ ตั ว ของวั ต ถุ เ รี ย กว า พื้นที่วางทางบวก (Positive Space) เกิดความสบายตา และสวยงามขึ้น

157

158

บทที่ 6 ภาพกับการออกแบบเว็บไซต

4.5 จัดวางภาพดวยระบบกริด (Grid System) การออกแบบโดยใชระบบ Grid design เปนทักษะเบื้องตนที่ Designer ทั่วไปควรจะตองรู เพื่อที่จะสามารถเขาใจองคประกอบและความสัมพันธของสัดสวนในงาน design ตางๆ ได หลายๆ สิ่ง รอบตัวเราถูกออกแบบดวยระบบกริด แมกระทั่งงานทางสถาปตยกรรมตางๆ, ผังเมือง, ตบแตงภายนอก/ ใน โปรแกรมพิมพงานตางๆ ก็มีระบบ grid แนนอนงานประเภท สิ่งพิมพทุกชนิด และปจจุบันที่กําลังมี บทบาทมากนั้นคือ Website ลวนตองใช grid กันทั้งนั้น Grid คืออะไร grid system คือการคํานวณระยะ ของแนวตั้ง (แกน x) และแนวนอน (แกน Y) ซึ่งชวยแบงพื้นที่ที่ใชทํางานออกเปนสวนๆ ใหแคบลงเพื่องายตอการทํางาน และเปนระบบระเบียบ ยิ่งขึ้น โดยปกติการออกแบบเว็บไซตจะใชกฎสามสวนทองคํา (golden ratio) จะเริ่มตนดวยการวาด เสนกริดโดยใชหลักกฎของสามสวนดวยดินสอและกระดาษ เพียงแควาดรูปสี่เหลี่ยมผืนผาแบงออกเปน สามแนวนอนและแนวตั้ง แลววาดเสนแบงระหวางแตละเสนแนวตั้งเพื่อสรางหกคอลัมน จางนั้นลองแบง พื้นที่การจัดวาง ภาพที่ 6.27 การจัดวางสามแบบ ที่อยูในกฎสามสวน Josef Muller-Brockmann, 1961, p 92

บทที่ 6 ภาพกับการออกแบบเว็บไซต

เวลามีภาพสวยๆ หลายภาพ จนเลือกไมถูกวาจะหยิบภาพไหนมาใชในการออกแบบแลวดีที่สุด ถา ตัดสินใจไมได ก็หยิบมาใชทั้งหมดวิธีการที่นิยมที่สุดคือ ใชเสนกริด (Grid) ชวยจัดภาพ การใชเสนกริดชวย จัดภาพหลายๆ ภาพจะใหความสวยงามแบบเรียบงาย ในเสนกริด 1 ชุด คุณจะวางภาพใหญภาพหรือภาพ เล็กลงไปก็ไดทั้งนั้น อาจวางขางๆ กัน หรือจะซอนกันก็ได เสนกริดจึงถือเปนเครื่องมือที่ชวยในการออกแบบ ใหทํางานงายขึ้น

ภาพที่ 6.28 การจัดวางภาพโดยใชระบบกริด

159

160

บทที่ 6 ภาพกับการออกแบบเว็บไซต

5. รูปภาพในเว็บไซต ใชอยางไรใหถูกตอง

หลายๆ ทานที่เริ่มตนทําเว็บไซต คงอยากจะไดเว็บไซตที่สวยงาม และดูโดดเดนเปนที่นามอง และกลาวถึงกัน ซึ่งปจจัยหนึ่งที่ทําใหเว็บไซตสวยงามก็คือ รูปภาพประกอบในเว็บไซต การออกแบบนั้น ไมควรเนนรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีขอความและรูปภาพที่สมดุลกันการใชรูปภาพที่ เปนไฟลขนาดใหญจะทําใหการโหลดเว็บเพจใชเวลานานกวาจะแสดงภาพ ดังนั้นจึงควรใชภาพที่มี พอเหมาะกับสิ่งที่เราตองการสื่อกับผูชม และปจจุบันการนํารูปภาพลงเว็บเพจควรคํานึงถึงที่มาและ ลิขสิทธิ์ของรูปภาพนั้นดวย

5.1 การเลือกนามสกุลไฟลรูปไปใช ปจจัยที่ทําใหเว็บไซตโหลดชามีหลายอยางครับ ซึ่งไฟลรูปในเว็บถือเปนปญหาอันดับ 1 จากการ สํารวจของเว็บไซต HTTP Archive ซึ่งไดทําการเก็บสถิติเว็บไซตทั่วโลก ในป 2013 หนาเว็บไซต 1000 อันดับแรกมีขนาดเฉลี่ยเพียง 800 kb แตในปนี้(2014) เพิ่มขึ้นเปน 1250 kb แลวโดยในหนาเว็บขนาด 1250 kb เปนไฟลรูปถึง 650kb ซึ่งคิดเปนกวา 60% ของหนาเว็บทั้งหมด (ที่เหลือคือ JavaScript, Flash, CSS และอื่น ๆ) เพราะฉะนั้นการใชรูปในเว็บไซตเราตองมีการคิดใหดี เลือกประเภทรูปใหเหมาะสม และใช เครื่องมือชวยบีบอัดสวนจะเลือกใช PNG หรือ JPEG ดีกวากันนั้น เราจะมาเปรียบเทียบกันที่ขนาดไฟล ครับ ลองดูรูปตอไปนี้

ภาพ 6.29 เปรียบเทียบขนาดไฟลระหวาง PNG กับ JPEG จากเว็บไซต Tut plus

บทที่ 6 ภาพพกับการออกแบบบเว็บไซต

จะเห็ห็นวาถาเปนรูปถ ป ายที่มีสีเยออะ ๆ เซฟไฟลเปน JPEG มีขนาดเพียง 18 kb แตถาใช า PNG24 จะมีขนาดถึ น ง 258 kb ตางกันเปปนสิบเทาเลยยครับ อยางไรก็ตาม ถาเปนนรูปวาดในคอมพิวเตอร หรือโลโกที่สีไม ไ เยอะมาก การใช PNG จะทํ จ าใหไดภาพที่คมชัดกวา และขนาดไฟฟลเล็กกวาหรือพอๆ อ กับ JPEG สรุปเรื ป ่องการเลือกนามสกุ อ ลรูป

ถารูปสีนนอ ย + มีพนื้ หลั ห งใส / กึ่งใสส = PNG-8 รูปสีเยอะ + มีพื้นหลังใส ง / กึง่ ใส = PNG-24 รูปสีเยอะ + ไมมีพนื้ หลั ห งใส = JPEEG ถาเลือกนาม ถ ามสกุลรูปยังไมเล็กพอ อ ยังมีวิธีลดขนาดไฟ ด ฟลไดอก ี

การเเลือกนามสกุลของไฟล ล รูปใหหเหมาะสมจะชวยไดในระดั​ับนึงเทานั้น แแตเราสามารถบีบใหเล็ก ลงไดอีกขั้น ดวยการใชเครืรื่องมือชวยลดดขนาดรูป ซึ่งจากการที จ ่ทดสสอบเครื่องมืออระหวางพวก Program Tool กับ Onnline Tool ตตางๆ ก็พบวาบริการบีบอัดที่เปนเว็บไซตตออนไลนสามมารถใชงานไดงายกวา / เสถียรกวา ลอองดูตัวอยาง Folder F ดานซซายเปนขนาดดทั้งหมดกอนโโยนเขาเว็บลดดขนาดรูป สวนด น านขวา เปนขนาดหลังโยนเข ง าเว็บครั ค บ จะเห็นวาลดลงไปเกิ ล น 50% 5 อีก

ภาพ พ 6.30 การเปปรียี บเทียบขนาดของไฟล จากการบีบอัดกับรูปตนฉบับ เว็บไซต Compressor C

161

162

บทที่ 6 ภาพกับการออกแบบเว็บไซต

5.2 แหลงทีม่ าของรูป - ภาพถาย - คนหาจากอินเตอรเน็ต - สแกนจากหนังสือ หรือนิตยสารตางๆ - ตกแตง/สรางขึ้นใหม - ลิขสิทธิ์ของรูปภาพ รูปภาพสวนใหญที่ปรากฏมาใหเราไดชมไดเห็นกัน สวนใหญจะมีเจาของลิขสิทธิ์ การนํามา ทําซ้ําหรือเผยแพรนั้น ตามกฎหมายไทยถึงวาผิดแนนอน แตจะมีการดําเนินคดีหรือไมนั้นขึ้นอยูกับ เจาของลิขสิทธิ์นั้นๆ ดังนั้นการที่คุณจะนําภาพอะไร มาใชงานโดยมีการเผยแพร อาจจะโดนเรียกรอง คาลิขสิทธิ์ได สวนการนําภาพมาตกแตง ถาเปนการสรางผลงานใหมขึ้นมาโดยใชโปรแกรมตกแตงรูปภาพ ไมใชแคปรับสี หรือใสขอความนิดหนอย อันนี้อาจจะตองมีการพิสูจนกันวาเปนงานใหมหรือวาเปนการ คัดลอกงานขึ้นมาใช ซึ่งถาเอาแบบชัวรๆ เลย ก็แคคุณไปถายภาพมาเอง หรือภาพนั้นไดรับการอนุญาตจากเจาของ ลิขสิทธิ์เปนที่เรียบรอยแลว (ควรมีลายลักษณอักษรจะไดไมเกิดปญหาภายหลัง) หรือถาเว็บไซตคุณเปน บริษัทในเครือกันกับเจาของรูปภาพ สวนใหญก็จะไดรับอนุญาตใหใชงาน Resource ตางๆ ของบริษัทแม อยูแลวในสัญญาการทํางาน ขอแนะนําการใชงาน ในการทําเว็บไซตเราตองการรูปภาพที่สวยงามมาเพื่อเปนสวนหนึ่งของเว็บไซต ทําใหเว็บไซต สวยหนามอง และนาจดจํา ถาคุณถายภาพ สรางภาพ หรือวาดภาพเองไดคุณก็ไมตองกังวลเรื่องปญหา ลิขสิทธิ์ และถามีใครนําภาพของคุณไปใช คุณนั่นแหละที่สามารถเรียกรองคาลิขสิทธิ์จากทางผูที่นําไปใช ได หรือถาคุณมีชางภาพอยูแลวก็สบายไปหนึ่งขั้น แตถาไมมีชางภาพและไมสามารถถายภาพหรือวาด ภาพเองได การใชบริการจัดทําเว็บไซตกับบริษัทที่มีบริการถายภาพดวยก็จะชวยกําจัดปญหาเรื่อง ลิขสิทธิ์ และงานที่ไดจะมีความเปนมืออาชีพขึ้นมาอีกระดับหนึ่ง ถาคุณตองการใชรูปภาพที่มีอยูบน อินเตอรเน็ต แนะนําใหซื้อจากผูใหบริการที่นาไวใจเชน www.dreamstime.com, www.gettyimages.com

บทที่ 6 ภาพกับการออกแบบเว็บไซต

สรุป

การใชภาพเพื่อออกแบบเว็บไซตใหมีความนาสนใจ ถือเปนเสนหของงาน ซึ่งการออกแบบให สวยงามเปนงานที่ตองทําขึ้นไมเฉพาะการสรางเว็บเทานั้น แตการสรางหนาเว็บเพจมีลักษณะพิเศษไม เหมือนงาน ทั่วไป เพราะ เปนการสรางหนาเอกสารหรือสารสนเทศ ที่สามารถคลิกลิงค เชื่อมโยงไปยัง เนื้อหาที่ เกี่ยวของไดทังภายในเว็บไซตและนอกเว็บไซต การใชภาพตางๆ จึงตองมีความเหมาะสมทั้ง ขนาดที่ใช การสื่อความหมาย การสรางจุดเดน การสรางอัตลักษณของเว็บไซต ดังนั้นการออกแบบเว็บ เพจ ผูออกแบบจึงใชเวลากับหนาแรกมากที่สุด แตไมไดหมายความวาหนาอื่นๆ จะไมมีความสําคัญ หากแตการออกแบบสวนเนื้อหาหนาตอไปจะเนนเรื่องราวที่ตองการนําเสนอมากกวา

163

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

7

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

บทที่

ตัวอักษร กับการออกแบบ เว็บไซต

มีคําถามชวนคิดเวลาเริ่มออกแบบเว็บไซตทุก ครั้งวา เราจะใช Font อะไรดี? คําตอบคือไมมีกฎตายตัวที่แนนอน ขึ้นอยูกับ นักออกแบบ และเปาหมายในการสื่อสาร เชน เว็บไซต ออกแนววัยรุน แตใช Font แนวยุคเกา ก็คงไมเหมาะ หรือกระตุนความรูส ึก ตัว อั ก ษรมี ผลต อ งานออกแบบโดยรวม งาน ออกแบบเว็บไซตที่ดีจึงตองมีตัวอักษรที่เหมาะสมดวย การออกแบบขึ้ น กั บ ประโยชน ใ ช ส อย บางครั้ ง นั ก ออกแบบต อ งใช ตั ว อั ก ษรที่ อ า นง า ย บางครั้ ง ก็ ต อ ง เลือกใหเหมาะกับงานพิมพ ตัวอักษรที่นาสนใจ หรือ ตั ว อั ก ษรที่ เ หมาะกั บ การแสดงผลบนคอมพิ ว เตอร เปนตน

165

166

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

ภาพที่ 7.1 รูปแบบตัวอักษร http://editorial.designtaxi.com/news-periodictypeface2902/1.jpg

1. อักษรและรูปแบบตัวอักษร กอนที่คุณจะสามารถเลือกตัวอักษรไปใชในการออกแบบไดอยางถูกตองเหมาะสม จะเปนการดี ถาคุณรูจักพื้นฐานของตะวอักษรในแงตางๆ เชน สวนประกอบ ชนิด และรูปแบบตัวอักษร ตอจากนั้นก็จะ เปนการการออกแบบบริเวณตัวอักษรโดยใชเทคนิคการจัดชองวางระหวางตัวอักษร การเวนชองวาง ระหวางบรรทัด การจัดระเบียบละสรางความสมดุลในเว็บ รวมถึงสีและขนาดเมื่อมันปรากฏอยูบนพื้นที่ ตางๆ

1.1 อักษร (Typeface) และตัวอักษร (Font) คืออะไร 2 คําที่ใชกันโดยทั่วไปของ “ตัวอักษร” (typeface) และ "ตัวอักษร” (font) วันนี้ดูเหมือนคํา 2 คํา นี้จะถูกนํามาใชเรียกผิดเรียกถูกแทนกัน และแมเรื่องนี้อาจจะไมสําคัญมากเกินไปสําหรับการทํางาน แต เมื่อมีการออกแบบสําหรับเว็บไซตมันเปนสิ่งที่จะตองพิจารณา และเขาใจ ประวัติความเปนมาของ คําศัพทนี้เปนที่นาสนใจ

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

ภาพที่ 7.2 กลุมของสกุลอักษร (type family) ชื่อ Vollkorn ที่ถูกสรางขึ้นมาใหเปนตัวอักษร(font) ซึ่งปกติจะประกอบดวย 4 รูปแบบ คือ Regular, Italic, Bold และ Bold Italic ในรูปแบบไฟลนามสกุล .ttf

ความหมาย: อักษร (Typeface) อักษร หรือเรียกวา แบบตัวพิมพ คือการออกแบบรูปแบบชุดตัวอักษรใหเกิดลักษณะสไตล เดียวกัน ตางกันตรงรูปราง เชน ตัวหนา ตัวเอียง ฯลฯ ซึ่งทั้งหมดนี้จะทําใหรูปแบบของตัวอักษรเดิมยัง เหมือนเดิม นักออกแบบจะพิจารณาและตัดสินใจเกี่ยวกับรูปแบบอักษรใหพอดีกับการออกแบบและ วัตถุประสงคของโครงการของพวกเขา อักษร(Typeface) เปนสิ่งที่คุณเห็น

ความหมาย: ตัวอักษร (Font) ตัวอักษร คือ ไฟลซึ่งจะชวยนํามาประยุกตใชในการออกแบบ ซึ่งกอนหนายุคคอมพิวเตอร ตัวอักษรเคยเปนชุดแบบอักษรโลหะสําหรับการพิมพ แตการมาถึงของสื่อดิจิตอล, ตัวอักษรคือที่คุณ จําเปนตอ งมีการติดตั้งเพื่อที่จะไวใชในเครื่องคอมพิวเตอร ซึ่งปกติจะติดตั้งชุดตัวอักษรมาพรอมกับ ระบบปฏิบัติการแตละชนิดที่มีความแตกตางของตัวอักษร ซึ่งอาจเปน .ttf (อักษร TrueType) หรือ .otf (อักษร OpenType) หรือรูปแบบตัวอักษรดิจิตอลอื่น ๆ ตัวอักษร(Font) เปนสิ่งที่คุณใช

167

168

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

1.2 ประเภทของตัวอักษร (Font) ฟอนต กลายมาเปนสวนสําคัญสวนหนึ่งที่ขาดไมไดกับงานออกแบบใน ปจจุบันที่ลวนแตตองการฟอนตในรูปแบบตางๆ กันออกไป ซึ่งประเภทของฟอนตใน ปจจุบัน แบงออกไดเปน 3 ประเภทใหญๆ คือ

Postscript (PS1) Postscript หรือ PS1 format เปนเทคโนโลยีที่คิดคนโดยบริษัท Adobe กอนจะมีฟอนตแบบ TrueType ในเวลาหลายปตอมา PS1 เปนฟอนตที่คมชัด และ ใหรายละเอียดมาก ถูกใชมากสําหรับงานที่ตองการคุณภาพสูง เชน หนังสือ หรือ นิตยสารรายปกษ ผูใชสวนใหญ มักเปน professional designer มากกวา home user ในระยะแรก วิธีการ install font แบบ postscript นี้คอนขางยุงยาก และ จะตอง install ผานโปรแกรมที่ชื่อวา ATM (Adobe Type Manager) แตในภายหลัง Microsoft ไดปรับปรุงวิธีการ install นี้ใน Windows OS ทั้งหมด ตั้งแตเวอรชั่น windows 2000 เปนตนมา

TrueType (TT) TrueType เปนมาตรฐานของฟอนต ที่ถูกวางรากฐานมาจาก Apple และ Microsoft ในชวงยุคปลายป 80 support การทํางาน บนระบบปฏิบัติการทั้ง Macintosh และ Windows ทําให TrueType font เปนมาตรฐานที่ไดรับความ แพรหลายมากที่สุดในยุคนั้น TT เปนรูปแบบที่นําเอาขอมูลของฟอนต ที่ใชในการ วาด (Draw) บน screen กับขอมูลที่ใชในการพิมพผาน printer มารวมกันอยูใน package เดียวกัน เปนฟอนตที่สามารถ scale และเปลี่ยน size ไดทุกขนาด โดยที่ จะยังคงความคมชัดอยูเสมอสําหรับทุก point

OpenType OpenType เปนผลจากความรวมมือกันของ Adobe และ Microsoft มี ลักษณะคลายกับ TrueType ตางกันตรงที่ OpenType มี character set ที่กวาง กวา ทําใหสามารถบรรจุจํานวนตัวอักขระไดมากถึง 65,000 ตัวอักษร ดวยจํานวนที่ มากกวา TrueType นี้ ทําให OpenType สามารถเก็บตัวอักษรแปลกๆ อักขระ พิเศษ ตัวอักษรของภาษาอื่นๆ OpenType สามารถทํางานไดกับทุก platform โดย ไมมีเงื่อนไข เพราะบรรจุเอา character code เอาไวแลวทุก platform นั่นเอง

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

นอกจาก 3 ประเภทที่กลาวมาขางตนแลว ปจจุบัน ก อ มี แ ตกแยกย อ ยออกไปอี ก หลายรู ป แบบนะครั บ มี ทั้ ง Vector Type, Raster Type, และอีกหลายตอหลายแบบ มากมาย จุดที่นาสนใจจุดหนึ่งคือแบบ Raster Type เปน ฟอนต โ ดยปกติ ทั่ ว ไปแล ว จะมี ค วามคมชั ด ของตั ว อั ก ษรที่ point หนึ่งๆ เทานั้น เชน 12pts, 18pts, 24pts หรือ 60 pts เมื่อเราทําการขยายฟอนตนั้นใหใหญขึ้นเรื่อยๆ เราจะพบวา ที่ขอบของตัวอักษรจะเกิดการแตกเปนเหลี่ยมๆ คลายๆ กับ เวลาที่เรา zoom ภาพ ถาเปน TrueType จะมีคุณสมบัติในการ resizable อยู นั่นคือ ไมวาเราจะเพิ่ม size ของฟอนตเขาไปกี่ point ก็ ตาม ตัวอักษรที่ได จะมีการ draw ใหมเสมอ ทําใหขอบ ตัวอั กษรคมชั ด คลา ยๆ กั บ ภาพแบบ Vector จึ งเรีย ก คุณสมบัติแบบนี้อีกอยางหนึ่งวา Vector Type ก็ได

เมื่อลองเปด Folder Fonts ใน windows ดู เราจะพบวา Icon รูปรางตางๆ นั้นจะสื่อถึงประเภทของฟอนตแตละแบบ ครับ TT คือ TrueType O คือ OpenType A คือ RasterType / PS1

169

170

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

1.3 รูปแบบและลักษณะของตัวอักษร สามารถจัดแบงไดเปน 3 ระดับไดแก

1) ประเภท (Category) Serif หรือตัวอักษรแบบมีเชิง เปนอักษรที่มี เสนยื่นของฐานและปลายตัวอักษรในทางราบ อักษรจะมี เสนคลายๆ ขีด-เหลี่ยม

Sans-Serif หรื อ ตั ว อั ก ษรแบบไม มี เ ชิ ง เป น ลัก ษณะของตั ว อั ก ษรอี ก แบบหนึ่ ง ที่ รู ปแบบ เรี ยบง าย เปนทางการ ไมมีเชิง หมายถึงไมมีเสนยื่นออกมาจากฐาน และปลายของตัวอักษร ในทางราบมีรูปรางมนกลมและดู สวยงาม

Monospaced บางครั้ ง เรี ย กว า Typewriter Font เนื่องจากเปนตัวอักษรที่ใกลเคียงกับเครื่องพิมพดีด

Script หรือ Handwritten fonts ตัวอักษร แบบตัวเขียน ตัวอักษรแบบนี้เนนใหตัวอักษรมีลักษณะ คลาย กับการเขียนดวยลายมือ

Display Type ตัวอักษรแบบประดิษฐ หรือตัว อักษรตัวพิมพขนาดใหญ มีลักษณะเดน คือ การออกแบบ ตกแตงตัวอักษรใหสวยงามเพื่อดึงดูดสายตา มีขนาด ความหนาของเสนอักษรหนากวาแบบอื่นๆ จึงนิยมใช เปนหัวเรื่อง

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2) ตระกูล (Family) เป น หมวดหมู ที่ ย อ ยลงไปจากประเภท (Category) แตตัวอักษรที่อยูในตระกูลเดียวกัน จะมี บรรพบุรุษรวมกันดังตาราง Category

Family

Serif

Times, Century, Schoolbook, Garamond

Sans-Serif

Helvetica, Arial, Verdara

Monospaced

Courier, Courier New

Script

Freestyle Script, Comic Sans MS, Brush Script MT

3) ชื่อเฉพาะ (Face) เปนตัวอักษรที่สามารถ แสดงความสัมพันธระหวาง Family และ Face ที่พบ เห็นบอยๆ ดังตาราง Family

Face

Times

Roman, Italic

Arial

Regular, Bold, Italic

Courier

Regular, Oblique

Whimsy

Regular, Bold

171

172

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

ใน Anatomy ของตัวหนังสือ เราจะนับความสูงเพื่อหาเสน บรรทัดของตัวหนังสือที่ “X” และเมื่อสวนใดของ ตัวหนังสือเลยขึน้ ไปทางดาน บนจะเรียกวา Ascenders สวนที่เลยลงมาทางดานลาง เราจะเรียกวา Descenders

1.4 โครงสรางของตัวอักษร (Typeface Anatomy) โครงสรางของตัวอักษร ซึ่งตัวอักษร นั้นก็มีสวนประกอบหลายๆ ชิ้นที่มีชื่อเรียก ตางๆ กันออกไปตามตําแหนงและ Style ของตัวอักษร การศึกษาเกี่ยวกับรูปราง และเสนสายในแตละสวนของตัวอักษรจะ ช ว ยพั ฒ นาการออกแบบของคุ ณ ได ดี ยิ่งขึ้น สวนประกอบตางๆ ของ Typeface มี ดังนี้

1. Ascender คือสวนของตัวอักษรแบบ พิ ม พ เ ล็ ก บางตั ว ที่ ยื่ น ขึ้ น ไปส ว นบนเลย ระดั บ ของเส น MEANDER ตั ว อั ก ษรที่ มี ASCENDER ดังกลาว ไดแก b d f h k l t เปนตน 2. Descender คือสวนของตัวอักษรแบบ พิมพเล็กบางตัว ที่ยื่นลงลางเลยระดับของ เสน MEANLINE ลงมา เชน g j p q y เปนตน

บททีที่ 7 ตัวอักษรรกับการออกแบบบเว็บไซต

3 Arm (or bar) 3. b คือ เสนนอนที น ่ยื่นออกมมาจากเสน แแกน เชน “T” “F” “E” -หรืออาจจะนั อ บรวมมเสนเฉียง ท ้นดานบบนของ “K” ทแยงขึ

4 Counter คือ สวนของพืพื้นที่วางดานในนของตัวอักษร 4. ที่มี ลั ก ษณะก ลมหรื อ เกื อ บจะกลม บ คล ายรู า ป วงรี ใน ภ ภาษาไทยอาจ จจะเรียกสวนนีนี้วา “แอง” ของตัวหนังสือ เ ่ อ งจากส ว นนี เนื น ้ คื อ ส ว นขอองที่ ว า งที่ อ ยู ภ ายในของ ตัตวหนังสือ เชน “O” “D” “BB”

5 Serif (เปนภาษาลาติ 5. น นที่แปลวา เทา) คือสวนปลาย สสุดของเสน Sttrokes ของงตัว อักษร สวนของปลาย ว แ แหลมที ่ยื่นอออกมาทั้งดานซซายและดานขขวาหรือดาน ใ านหนึ่ง ขอองสวนปลายตตัวอักษร ใดด

6 Stem เสสนหลักทางตั้ง และทางเฉียงของตั 6. ง วพิมพ อ อาจจะเปรี ยบเสมือนแกนกรระดูกสันหลัง

7 Stroke (ccrossbar) เสนนอนที 7. น ่ยื่นออกมา จากเสน แ แกน

8 Cap height ความสูงจาากเสน baseline 8. ไ งเสนสวนบบนสุดของตัวอัอกษรพิมพใหญ ไปถึ

9 x-height หมายถึง ความสูงของตัวอักษร 9. ก x ในแบบพิมพเล็ก ซึ่งมักจะะใชอางถึงความสูง

173

1744

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต บ

1.5 องคประกอบตางๆ า ของตัวอัอกษรไทย ออักษรไทยมีองค ง ประกอบทีจํจ่ าํ แนกไดชัดเจจน แคไมกี่อยยาง ซึง่ องคประกอบตางมีดังนี้ สําหรั า บ นักออกกแบบ ตั ว อั ก ษร รุ น ใหม ๆ ว า ควรจะใส ค ห ยั ก หรื อ ไม ใ ส หยั ห ก ดี อ ป มากที่สุด เพื่อใหตัวอักษรดู ปให ก บางคนก็อยากจะลดรู เรียบและะสะอาดตา แตตทั้งนี้ก็ตองดูดดวยวาการตัดปาก ด ของตัว ก สงผลกระทบบตอตัวอักษรรอื่นๆ ที่สัมพันธ น กั น ไ และอาจจะเกิดคูสับสนนขึ้นดวยหรือเปลา ดวยหรือไม เชน ถ(ไรปาก/ไร ป หัว) กับ ด(ไรหัว) เปนต น น

ป หรือ หยั ปาก ห ก

ที่มา f0ntt.com/forum : Anatomy of Thai T Letterform m

เรื่องหัวของพยั ว ญชนนะไทย (ยกเวน ก และ ธ) เปปนสิ่งที่ฝายอนนุรักษ กับฝาย กาวหนา พยายามถกเถีถียงหาขอสรุป โดยฝายอนุรัรกษก็บอกวา อักษรไมมีหัว (loopless foorm) อานยากก ไมเหมาะสสําหรับเอามาจัดวางขอควาาม แตฝายกาวหน ว าก็โตวา อักษรไทยเปดโอกาสให โ เราเลนสนุกกับมัน ไดมากมาายกวานั้น สามมารถ Simplify fy เพื่อจัดการรกับความสูง เมื่อตัดหัวออกแลว ก็ตองออานไดงายดวย แมบนสกรี​ีน กรณีลาสุดคื ด อการที่ Apple ทําการเปปลี่ยนซิสเต็มฟอนต ฟ ใน iOS 7 ใหเปนตัวไไมมีหัว ก็สราง ความชื่นชอบให ช กับคนสวนมาก ในขขณะที่บางสวนก็ น ยังยึดมั่นวา แบบเดิมมีหัว (ธนบุรี) อานนงายกวา ทีนีน้ี มาดูวา หั​ัวในอักษรไทยย (The head of o the letter/looop leadoff) มีแบบไหนบาง า

มีหัว ไมมีหัว

ที่มา f0nt.ccom/forum : Anatomy A of Thhai Letterform

หหัวในอักษรไทย มี 3 แบบ ครั ค บ คือ หัวเขา (inner loop)) และ หัวออกก (outer loop)) และหัวขมวดด (loop with w neck) องงคประกอบที่รองรับหัวขมววด สําหรับ ข ซ ช ฃ ก็มีสวนของคอ น (necck) และ หยัก (notch) นัน่นเอง (ข ช สามารถทําเปนแบบ น outer looop ก็ได) สวนตั ว ว ห ม น ฬ ฮ ก็จะมีสวนนขมวด (Knot) สวนหยักตรงกลาง ต ใน ฬ พ ผ ฝ ฟ เรียกว ย า งาม (crrotch)

บททีที่ 7 ตัวอักษรรกับการออกแบบบเว็บไซต

เชิง (BBase) กับ ไส ไ (Entrails) เชิชิงกับไส เปนจุดที่ทาทายใหหดีไซเนอรคิด หาวิธีใหมๆ ในกการออกแบบ เพื่อให ฐ ญ ษ (2-stroke letter) มีบุคลิกที่โดดเดน โดดยอาจจะสัมพันธไปจนถึง เชิ เ ง ฎ ฏ ดวย ที่มา f0nt.com/foorum : Anatom my of Thai Letteerform

ห (Tail) หาางของอักษรไททยมีอยูสาม หาง กลลุมใหญๆ (ปริรญญา, 2549))

1. ตัวอักษรกลุ ษ ม หางตตรง : ป ฝ ฟ (AAscender) ฤ ฦ ๅ (Descender)

2. ตัวอักษรรกลุมหางเฉีฉียง : ช ซ (SShort-tail) ศ ส (Long-tail) นันกออกแบบ ทีทํท่ าตัวอักษรไมมมีหัว มักจะเออา ฐ มาใช กฎฎขอนี้ดวยโดยยใช จ เปนฐานน

3. ตัวอักษรรกลุมหางขมมวดตวัด (LLoop Tail; Looop Terminal)) : ฬ ฮ นัก อออกแบบที่ทําตัวั อักษรไมมีหวั มักจะเอา สอองตัวนี้ไปใชกฎตามขอ 2

ที่มา f0nt.com/forum : Anatomy of Thai Letterform

175

176

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

1.6 ขนาดของตัวอักษร ในอดีตมีการสรางแบบตัวอักษรโดยใชโลหะ โดยมีการวัดขนาดเปนพอยท (point) ซึ่งหมายถึง ความสูงของโลหะที่ใชสรางตัวอักษร ในปจจุบันก็ยังคงใชหนวยพอยทในระบบการพิมพ ซึ่ง 1พอยท มี ขนาดเทากับ 1/72 นิ้ว หรือ 0.01384 นิ้ว และ 12 พอยท จะเทากับ 1 ไพกา (pica) และ 6 ไพกา (72 พอยท) เทากับ 1 นิ้ว แตองคประกอบตางๆ ของตัวอักษรแตละแบบไมเทากัน ในงานออกแบบ นั้น 2 บวก 2 อาจเทากับเทาไหรก็ได ยกตัวอยาง เชน

สูง

ต่ํา

ต่ํา

สูง

Point size

ตัวอักษรทั้ง 3 แบบในภาพดานบน คุณคิดวามันมีขนาดใหญเทาไหร... เฉลย คือ หากลองถาม คอมพิวเตอรดูโดยการคลิกที่ตัวอักษรเพื่อดูขนาดของตัวอักษรทั้ง 3 แบบมีขนาด 60 พอยท เทากันหมด แต สิ่งที่เห็นคือขนาดของตัวอักษรอาจเปนเทาไหรก็ไดที่ไมเกินขนาดของกลองที่มองไมเห็น(สมัยกอน ถา กลองเก็บตัวพิมพ 60 พอยทมีไวใสตัวอักษรจากแมพิมพโลหะขนาด 60 พอยท ซึ่งจะเหลือที่วางดานบน และลางไวเผื่อสําหรับอักษรที่มีหาง) ดวยความหลากหลายของสไตลตัวอักษร บางแบบอวนเตี้ย บาง แบบผอมสูง นักออกแบบหลายคนมักจะมองขามขนาดที่วัดไดจริงในจุดนี้

ตามหลักการแลว นักออกแบบเวลาใช งานจริงจะวัดขนาดแตกตางจากหนวยวัด โดย อย า งในภาพนี้ ยึ ด จากยอดของ ตั ว อั ก ษร ทํ า ให ดู เ สมอกั น ส ว นหาง ดานบน หางดานลาง และ X-Height ซึ่ง จะชวยเปรียบเทียบขนาดตัวอักษรไดงาย ขึ้น

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

Designed by Anone Saetaeo [2007]

2. ตัวอักษรกับการออกแบบ

ตัวอักษรแบบใด เหมาะสมกับงานของคุณที่สุด ? คําถามนี้มักเปนคําถามแรกๆ ที่เกิดขึ้นในใจ เสมอเมื่อเวลาคุณมีกราฟกพรอมหมดแลว รอขอความสวยๆ มาวางประกอบเขาดวยกัน จริงอยูวาขอความคือสิ่งที่มีไวใหคนอาน แตในการออกแบนั้น ขอความก็เหมือนภาพภาพหนึ่งที่ มีเสนสาย มุม หรือสวนโคงเวา โดยแตละสวนสามารถบงบอกถึงความหมายและความรูสึกในแบบตางๆ การนําตัวอักษรมาใชเพือ่ การออกแบบเปน 2 ลักษณะใหญๆ คือ 1. ใชตัวอักษรเปนสวนดึงดูดสายตา มีลักษณะตัวอักษรแบบ Displayface เพื่อการ ตกแตงหรือ การเนนขอความขาวสาร ใหสามารถดึงดูดความสนใจของผูดู ผูอาน ดวยการใชขนาด รูปรางและรูปแบบ ตัวอักษรที่มีขนาดใหญมีความเดนเปนพิเศษ เชน การพาดหัวเรื่อง (Heading) คําประกาศ คําเตือน เปนตน 2. ใชตัวอักษรเปนสวนบรรยายหรืออธิบายเนื้อหา คือการใชตัวอักษรเปน Bookface หรือเปน ตัวพิมพเนื้อหา ที่มีขนาดเล็กในลักษณะของการเรียงพิมพขอความ (Typesetting) เพื่อการบรรยาย อธิบายสวน ประกอบปลีกยอยของขาวสารและเนื้อหาที่ตองการสื่อสารเผยแพร

177

178

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2.1 วิธีเลือกตัวอักษรทีเหมาะสมกับงานออกแบบ การเลือกตัวอักษรไมไดอยูที่วาตัวอักษรนั้นสวยหรือไมสวย แตดูที่ความเหมาะสมเปนหลัก ละตองสอดประสานกับภาพกันอยางลงตัวที่สุด วิธีการเลือกก็มีเลือกรูปทรง หรือเลือกที่สื่ออารมณ

วิธีการเลือกตัวอักษรที่รูปทรง เพื่อใหขอความและรูปภาพสอดคลองกัน อยางแรกเราตองนําภาพหรือกราฟกมาวิเคราะห ในเรื่องของสัดสวน รูปทรง ลายเสน และพื้นผิวกอน ตัวอยางเชน (John Mc Wade, 2009, p.36-39) วิเคราะหรูปภาพ ดวยการฝกสายตาแบบมองกอนเมฆแลวเห็นเปนรูปตางๆ ใชวิธีเดียวกันกับการมองที่ตนไม ตนนี้

สัดสวน สัดสวนภาพนี้มีขนาดใหญ และมีผลตอหลาย สิ่งเนื่องจากเปนสัดสวนที่หลอกตาได ดังนั้นให วาดเสนกรอบลอมรอบไว ก็จะเห็นเปนรูปทรง สี่เหลี่ยม

เสน เส น เป น ทิ ศ ทางโดยรวมที่ เ กิ ดเป น รู ป ร า ง อยางภาพนี้มีทิศทางของเสนเปนแนวนอน ส ว นด า นบนตรงยอดไม ก็ มี เ ส น มาครอบ และตรงลําตนมีเสนพุงขึ้นเปนแนวตั้ง

รูปทรง เปนคุณลักษณะเบื้องตนที่ชวยในการวิเคราะห รูปภาพได ตัวอยางตนไมตนนี้ตรงสวนที่เปนกิ่ง ก า นใบมี ลั ก ษณะเหมื อ นไข ลํ า ต น ตั้ ง ตรงเป น แนวตรง รากแผเปนแนวนอน ดูเผินๆ เหมือนไม เสียบไขอยูอะไรแบบนั้น

พื้นผิว ตรงเปลื อ กของต น ไม นี้ มี ทั้ ง ส ว นหนาส ว นบาง และตรงสวนใบก็มีรูปรางที่หลากหลาย

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

เลือกแบบอักษร เลือกแบบที่ไมเขากัน มีตัวอักษรหลายแบบที่ควรถูกตัดออก โดยเริ่มจากองคประกอบใหญสุด กอน คือ สัดสวนและรูปราง จากที่วิเคราะหลักษณะในขั้นที่แลว ทําใหเห็นตัวอักษรในลักษณะ อักษรแบบ แคบๆ (Condensed) อักษรกวางๆ (Extended) อักษรหวัดๆ (Swoopy) ไมเขากับรูปทรงสี่เหลี่ยมเลย และ สวนที่เปนบล็อค (Blocky) นั้นแมจะใกลเคียงกับสี่เหลี่ยมก็จริง แตดูไมเปนธรรมชาติ เพราะฉะนั้นอักษรที่ เขาขาย 4 แบบนี้ใหตัดออกไปไดเลย

แคบๆ (Condensed)

กวางๆ (Extended)

หวัดๆ (Swoopy)

บล็อค (Blocky)

เลือกโดยใชเกณฑ ขั้นตอมาเลือกโดยใชสัดสวนและเสนสายมาพิจารณา แตปญหาคือตัว อักษรบนโลกนี้แบบที่เปนเหลี่ยมและตั้งตรงเหมือนตนไมนั้นมีมากมายกายกอง เราจะมีวิธีเลือดังนี้

ตัวอักษรตระกูล Sans Serif สัดสวนและเสนสายเปนแบบแผน ลักษระสวน โคงเสนตรงหรือมุมถูกมาใชแบบซ้ําๆ ดูไมเปน ธรรมชาติ ขั ดกั บ ภาพ สรุ ป ว า สั ด ส ว นได แต เสนไมผาน

ตัวอักษรสไตล Roman เต็มไปดวยรายละเอียดและความหลากหลาย เสนมีหนา มีบางสลับกันไป ตรงปลายมีเชิงชวย เสริ ม ภาพที่ มี ร ายละเอี ย ดเยอะได เ ป น อย า งดี สรุปวา สัดสวนได เสนสายดูดีกวา

179

180

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

เลือกสิ่งที่เหลือ เนื่องจากตนไมมีพื้นผิวมาก เวลาเลือกตัวอักษรจึงควรนึกถึงเสนเล็กๆ รูปทรงเล็กๆ และ ความสัมพันธระหวาตัวอักษรดวย ตัวอักษรกลุมตระกูล Roman มีมีเสนสายและพื้นผิว ความหนาบาง สลับกันไป มีเชิงที่ปลายและสัดสวนที่เปนมาตรฐานทําใหดูสวยงามอานงาย จึงไมนาแปลกที่หนังสือ หนังสือพิมพและนิตยสารมักเลือกใชตัวอักษรแบบนี้ ซึ่งในบทที่ 2 ไดกลาวมาแลววางานออกแบบเว็บไซต โดยอาจประยุกตจากสิ่งพิมพ ตัวอักษรตระกูล Roman

แบบประยุกต

แบบสมัยใหม

แบบสมัยเกา

ตัวอักษรตระกูล Roman เปนตัวอักษรแบบมีเชิง (Sarif) ลักษณะของเสนหนาและบางทําใหเห็นความ ตางกันอยางชัดเจน และหากยังจําไดจากการฝกสายตามองกอนเมฆ ในตัวอยางนี้ก็จะพบตัวอักษรที่เขา กับรูปรางของตนไมที่สุด

ระยะกลาง เพื่อดูรูปทรงและแบบแผน

ระยะไกล เพื่อดูสีและพื้นผิว

ระยะใกล เพื่อดูเสนสายและขอบ

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

นําตัวอักษรไปใชงาน เมื่อไดแบบตัวอักษรที่ตองการ ก็ถึงเวลานําไปใชในการออกแบบ การจัดเลยเอาทนั้นใหยึดรูปภาพ เปนหลัก สําหรับสีสันนั้นยึดความสัมพันธกันกับสีของรูปภาพ ดังตัวอยาง

เว็บไซต Brolik ใชตัวอักษรตระกูล Roman เปนตัวอักษรแบบมีเชิง (Sarif) (http://creativemms.com/web-design-wednesday-brolik)

เว็บไซต Montgomeny ใชตัวอักษรตระกูล Roman เปนตัวอักษรแบบมีเชิง (Sarif) (http://.frontrunnerpro.com/imsthemes)

181

182

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

วิธีการเลือกตัวอักษรที่สื่อถึงอารมณ ลักษณะอารมณของตัวอักษร (Type Character) ลักษณะของตัวอักษรที่จะชวยใหเกิด อารมณและจินตภาพตอชิ้นงานนั้น เชน เว็บไซตภัตตาคารอาหารจีน ก็ใชตัวอักษรที่มีลักษณะเหมือนอักษร ภาษาจีน อักษรที่ประดิษฐดวยไมไผ ฯลฯ การเลือกใชอักษรแบบใดจึงตองพิถีพิถันใหเหมาะสมกับการ เขาถึงอารมณของผูชม และแนวทางการเลือกตัวอั กษรเพื่อการออกแบบเว็บไซตนั้นนั้ น จะสรางสราง เอกลักษณสําหรับเว็บไซตดวย ตัวอักษรแตละแบบใหอารมณ และความรูสึกที่แตกตางกัน จึงควรพิจารณาใชใหเหมาะสม กับเรื่องที่ตองการแสดงออกเชน ความยิ่งใหญของเรื่องราวทางประวัติศาสตร ความหวานซึ้งของนวนิยาย ความลึกลับนาสะพรึงกลัวของเรื่องผี สวนใหญจะเปนตัวประดิษฐ หรือตัวเรียง ความนากลัว

ความออนหวาน

ความสนุก

ลักษณะและอารมณของตัวอักษร (Type Character) เว็บไซตที่ใชตัวอักษรใหเขากับอารมณ ของรานอาหาร (http://www.squarespace.com)

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

เว็บไซตที่ใชตัวอักษรใหเขากับอารมณ ของธุรกิจ อีคอมเมิรซ (http://www.squarespace.com)

เว็บไซตที่ใชตัวอักษรใหเขากับอารมณ ของการออกแบบ (http://www.roggeundpott.de/)

183

184

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2.2 การจัดเรียงขอความ ตัวอักษรมีความสําคัญมากตอการออกแบบเว็บไซต เพราะตัวอักษรจะทําหนาที่เปนสวนแจก แจงรายละเอียดของขอมูลสาระที่ตองการนําเสนอ ดวยรูปแบบ และการจัดวางตําแหนงตัวอักษรที่ สวยงาม ชัดเจน อานงาย นาสนใจ สวยงาม ลักษณะของตัวอักษรจึงถูกกําหนดตามการนําไปใช ระยะชองไฟตัวอักษร ระยะชองไฟของตัวอักษร (Spacing) การจัดระยะชองไฟตัวอักษรมีความสําคัญมาก เนื่องจาก ถามีการออกแบบที่เหมาะสม และสวยงามแลวจะทําใหผูดูอานงาย สบายตา ชวนอาน การจัดชองไฟมี หลักการใชอยู 3 ขอดังนี้ 1. ระยะชองไฟระหวางอักษร (Letter Spacing) เปนการกําหนดชองไฟระหวางตัวอักษรแตละ ตัว ที่จะตองมีระยะหางกันพองาม ไมติดหรือหางกันเกินไป เราควรจัดชองไฟโดยคํานึงถึงปริมาตรที่มี ความสมดุลโดยประมาณในระหวางตัวอักษร หรือเรียกวา ปริมาตรความสมดุลทางสายตา 2. ระยะชองไฟระหวางคํา (Word Spacing) จะเวนระยะระหวางคําประมาณ 1 ตัวอักษรปกติ ถาหางเกินไปจะทําใหอานยาก และชิดเกินไปจะทําใหขาดความงาม 3. ระยะชองไฟระหวางบรรทัด (Line Spacing) ปกติจะใชระยะหาง 0-3 พอยท หลักสําคัญใน การกําหนดระยะระหวางบรรทัดใหวัดสวนสูง และสวนต่ําสุดของตัวอักษร เมื่อจัดวางบนบรรทัดแลวตอง ไมซอนทับกัน

ระยะหางระหวางตัวอักษร

ระยะหางระหวางบรรทัด ระยะหางระหวางคํา ภาพแสดงระยะชองไฟของตัวอักษร (Spacing)

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

การจัดวางตัวอักษร การจัดตัวอักษร (Type Composition) การจัดเนื้อหาของตัวอักษรมีการจัดดวยกันหลายวิธี ดังนี้ จัดชิดซาย (Align left) จะมีปลายดานขวาไมสม่ําเสมอ เนื่องจาก ตัวอักษรในแตละบรรทัด มีความยาวไมเทากัน แตผูอานก็ไมสามารถหา จุดเริ่มตนของแตละบรรทัดไดงาย จัดชิดขวา (Align right) ถึงแมรูปแบบการจัดตัวอักษรแบบนี้จะ นาสนใจ แตจุดเริ่มตนในแตละบรรทัดที่ไมสม่ําเสมอ ทําใหอานยาก ผูอาน ตองหยุดชะงัก เพื่อหาจุดเริ่มตนของแตละบรรทัด จัดกึ่งกลาง (Align center) จะใชไดดีกับขอมูลที่มีปริมาณไมมาก นัก และเหมาะกับรูปแบบที่เปนทางการ เชน คําประกาศ หรือคําเชื้อเชิญ เปนตน จัดชิดขอบซายและขวา (justify) เมื่อจัดตัวอักษรแบบ justify จะมี พื้นที่วางเกิดขึ้นระหวางคํา สิ่งที่ควรระวังคือ เกิดชองวาง ซึ่งจะรบกวน ความสะดวกในการอาน แตเปนสิ่งยากที่จะหลีกเลี่ยง ในคอลัมนที่มีขนาด แคบ

A ผลจากการจัดแบบ justify

B จัดแบบ justify แตบีบชองไฟให กวางขึ้นหรือแคบลง

C จัดแบบชิดซาย

185

186

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

การปรับแนวขอบ ปกติเวลาโปรยขอความลงบนพื้นที่ คนทั่วไปแคจัดตัวอักษร (Type Composition) จัดเนื้อหา ดวย วิธีที่ไ ดกลาวกันมากอนหนา นี้ แตสําหรั บนักออกแบบแลว การจัดชิดขอบ (ซายหรือ ขวา) ของ ขอความดวยวิธีดังกลาวจะมองเห็นวาไมเสมอกัน ถึงแมจะกั้นหนาหรือหลังใหตรงกัน เพราะ ตัวอักษร ไมไดเปนตัวตรงทุกตัว มีทั้งสวนโคง เสนตัด และเครื่องหมายวรรคตอนทําใหดูไมตรงกัน (John Mc Wade, 2009, p.48)

กอนจัด คอมพิวเตอรอาจบอกวาเสมอกันดีอยูแลว แตสายตาของ คุณเห็นตางออกไป แตตัวอักษรและเครื่องหมายวรรคตอนมี รูปทรงที่หลากหลาย ทําใหเวลานํามาจัดวางจึงดูไมเสมอกัน

ยึดเสนแนวตั้งเปนหลัก และปลอยใหแขนตัวทีเกินออกไป

ใหสวนโคงของ O เกินออกไปนิดหนอย

ดันเครื่องหมายวรรคตอนออกไป หลังจัด ผลลัพธที่ไดแมจะมีบางสวนของตัวอักษรเกินระยะขอบ แตแนวของขอความจะดูตรงกัน

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2.3 การจัดวางตัวอักษรแบบคอลัมน โดยปกติเวลาออกแบบเว็บไซต เราจะแบงพื้นที่เปนคอลัมน เพื่อเตรียมไวสําหรับ วางภาพ และ ตัว อัก ษรลงในตํ า แนง ที่ เหมาะสม ในหั วข อ นี้จ ะประยุ ก ตก ารแบ งพื้ นที่ ก ารนํ า เสนอโดยใช ห ลัก grid system และกฎสามสวน (golden ratio) เพื่อดูความสัมพันธระหวางภาพและขอความ

กฎสามสวน (golden ratio) อัตราสวน 3:2

แบงสัดสวน แบง พื้น ทีสําหรับการออกแบบทั้ง กว า งละสู ง ตามกฎสามส ว น (golden ratio) คือสัดสวน 2 ใน 3 ดานลางใสสีเขมสวนตรงมุมปรับสี ออนลดลงเหลือ 90 %

กําหนดระยะขอบ 1. แบ ง ย อ ยเป น สามส ว นอี ก ครั้ ง แลวใชเสนสวนนี้กําหนดเปนระยะ ขอบ(เสนประ) 2. ปรับขอบดานขวาใหกวงขึ้นกวา ดานซายราว 150% ยังอยูใ น อัตราสวน 3:2 เชนเดิม

187

1888

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

จัดวางองค ว ประกอบ จุดตัดของเสนกริด (จุดไฮไลทท) เป นจุ น ด กํ า หนดทิ ศทาง การวาาง ขอความ ค และภาพพทั้งหมดตองมมา บรรรจบกับจุดนี้ ขอความฝงซาายจัดชิดขวา ขอ ควาามฝงขวาจัดชิดดซาย(ภาพลาง))

วางตัตัวอักษรและภภาพ หากวางภาพพเล็ ก ๆ ไว ใ น คอลั​ั ม น ฝ ง ซ า ย ใหห สั ง เกตว า เรา ไมไดปูขอความหรืออภาพเต็มพื้นที่ ซึ่ ง นี่ เ ป น เ ท ค นิ ค ใ น ก า ร ออกแแบบ ซึ่งผลลัพธการวางแบบ นี้ ทําให า เกิดแนวโคงขึ้นมา ทําให งายตตอทิศทางการออาน

การทํทํางานกับพื้นที่วาง ภ ภาพขนาดเล็ กที่ถูกวางบนที่ สีขาวกกวางๆ จะสะดุดตามากกวา เพราะะพื้นที่วางจะดึงสายตาไปจับ ที่ภาพพอัตโนมัติ โลโกกก็ใชหลักการ เดียวกักัน

บททีที่ 7 ตัวอักษรรกับการออกแบบบเว็บไซต

แตละหน ล าวางขอความและก อ กราฟกไดไมมากนั ม ก โดยใใหคํานึงถึงองงคประกอบหหลักๆ จะ ใ อยูฝงขวาา สวนองคประกอบเสริ ให ร มจะอยู จ ฝงซาย ภาพหหลายภาพ ในหนึ่งหนาคุณ ณอาจวางภาพสั​ัก 2, 3, 4 หรื ห อ มากกวานั้ น ใหจั ดเรียงภภาพ เปนสี่เหลี่ยมผืนผาตออๆ กันไป พยายาม ทํ า ให เป น รู ป ทรงเดี ยวกั น หรื อ ขนนาด เดียวกั​ันจะดีที่สุด แตหากตองการภาาพที่ มีขนาดดตางกัน ก็สามมารถทําได เพียงแค ย อยูในกกรอบที่กําหนดไไวตั้งแตแรก

ขนาดเดียวกักัน วางเรียงกั​ันเปนแนวนอน

ขนาดเดียวกั​ัน วางเรียงกันเปนแนวตั้ง

ทิศทางการออาน การอออกแบบจะใช แนวเป น ตั ว กํ าหนด า เช น จากกบนลงล า ง ซ ายไปขวา า โดยยใช ค อลั มน ใ หเป น ประโยชน ถาวางภาพไวฝงหนึ ห ่ง ก็ใหวางขอความไว อ อีกฝงหนึ ห ่ง ควรวางแบบบนี้ เพราะ เรียบๆ บ อานงาย

ไมมควรวาง เพรราะ หยักๆ ซับบซอน

189

190

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2.4 การวางตัวอักษรใหสัมพันธกับภาพ การออกแบบทีม่ ีตัวอักษรมาประกอบภาพ เปนหนึ่งในเครื่องมือของกการออกแบของคุณ แตก็ ยังสามารถเปนหนึ่งในการออกแบบที่ยากที่สดุ เชนกัน เพราะปญหาใหญคอื เราจะวางตัวอักษรและภาพ ใหสัมพันธกันไดอยางไรและไมใหรบกวนกันและกัน ซึ่งมีเทคนิคดังนี้ 1. ตัวอักษรทีต่ ัดกันกับภาพ ตัว อั ก ษรที่ ใ ห อ าน ต อ งแน ใ จวา ใส ตั ว อั ก ษรที่มี สี แ ตกต า งกั นกั บ ภาพ พอที่ จ ะเห็ น ได ใ นการ รวมกัน เชน หากคุณมีภาพที่มีพื้นหลังสีดํา, เลือกสําหรับสีขาว หากภาพของคุณมีพื้นหลังสีออนตัวอักษร ตองสีเขม การตัดกันยังสามารถใชขนาดของตัวอักษรใหสัมพันธกับสิ่งที่เกิดขึ้นในภาพ เชนภาพที่มีขนาด ใหญมาก ใหใชตัวอักษรชนิดบาง ผอม และดูเบา

http://packdog.com/

http://www.wearetelegraph.com/

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

2. ใชตัวอักษรเปนสวนหนึ่งของภาพ คําและรูปภาพใหพลังที่เหนือกวาคําเพียงอยางเดียว หรือรูปภาพเพียงอยางเดียว อีกทั้งยังมี ดีไซนสไตลเกๆ ใหคนจดจําไดอีกดวย วิธีการคือ ใชเปนตัวคั่น เชนแทรกกลางระหวางภาพ โดยอาจผสมกับรูปรางของภาพ (เว็บ Toast) หรือแทรกเปนจังหวะ (เว็บ McLaren) หรือการใชตัวอักษรใหญๆ มาเปนจุดโฟกัส

http://www.meandmyselfportfolio.co.uk/

http://www.meandmyselfportfolio.co.uk/

http://www.toast.co.nz/

191

192

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

3. วางตําแหนงใหตอเนื่องจากการไหลของภาพ การทํางานกับการไหลของภาพ คือการวางใหเห็นความตอเนื่อง อาจจะมาจากจุดนําสายตา หรือทิศทางขององคประกอบที่อยูในภาพนั้นๆ ซึ่งชี้นําสายตาผูชมงานใหมองไปในทิศทางที่ผูออกแบบ กําหนดไว เมื่อไดมองภาพที่มีองคประกอบไหลตอเนื่อง ทําใหการรับรูของคนเรามีเรื่องราวเปนลําดับขั้น เว็บไซตตัวอยางขางลางนี้ ใชทิศทางการจองมองที่ชาญฉลาดเพื่อเปนแนวทางในสายตาของ ผูใชไปยังเนื้อหาที่สําคัญ

http://www.bradhogan.me/

http://workdiary.de/

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

4. วางไวบนภาพเบลอ (Blur) หนึ่งในเครื่องมือที่งายที่สุดที่คุณจะดึงตัวอักษรใหโดดเดนได นั่นคือการเบลอภาพ การเพิ่ม ความเบลอเล็กนอยเพื่อใหพื้นหลังของภาพดวยโปรแกรมสําเร็จรูปเชน Adobe Photoshop สามารถชวย ใหขอความของคุณโดดเดน เบลอยังสามารถเพิ่มโฟกัสไปยังจุดสนใจโดยรวมของเว็บไซต เชน เว็บไซต Wallmob นําภาพถายผลิตภัณฑโดยเบลอที่ฉากหลัง และวางขอความในโฟกัสตรงตําแหนงที่เบลอนั้น

https://www.wallmob.com/

http://helloniche.com/

193

194

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

5. ใสตัวอักษรไวในกรอบ เทคนิคนี้ใชเมื่อภาพมีจํานวนมาก และสีของภาพสีมีความแตกตางกัน จึงตองหากรอบมาเปน พื้นหลัง และวางขอความใหอยูในกรอบจะสามารถทําใหมันโดดเดน คุณสามารถเลือกสี่เหลี่ยมหรือ วงกลม แลวมองหาสีสําหรับกรอบที่ใหตัวอักษรมีความคมชัดเพียงพอ ลดคาความโปรงใสของกรอบชวย แสดงใหเห็นภาพผานกรอบนั้นจางๆ

http://www.tnvacation.com/season

http://tradestoneconfections.com/

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

6. เพิ่มตัวอักษรไปยังพื้นหลัง หนึ่งในการวางตัวอักษรดีที่สุด ก็คือหาพื้นหลังที่เรียบและเปนที่วางที่มีปริมาณพื้นที่มากพอที่จะ ใสขอความ โดยปกติภาพหลายภาพจะไมมีพื้นหลังวาง หรืองายตอการทํางาน แตเมื่อหากเรามีภาพที่มี พื้นหลังเปนสีเดียว มันจึงเปนเปนสถานที่ที่เหมาะสมที่สุดของตัวอักษร และเปนผลลัพธที่เปนตําแหนงที่ เปนธรรมชาติ โดยไมตองใชเทคนิคปรับแตงภาพอะไรเลย เชน เว็บไซต Caitlin เลนตัวอักษรกับ องคประกอบของความลึกในภาพ

http://caitlinwicker.com/

https://squareup.com/global/en/register

195

196

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

7. ทําใหใหญ หรือใสสี วัตถุที่มีขนาดใหญจะเปนองคประกอบที่ดึงดูดความสนใจของผูใชอยูแลว และดวยการทํา ตัวอัก ษรใหมีขนาดใหญก็ สามารถทํ าได งาย การใชข อความขนาดใหญสามารถเพิ่ มน้ํา หนักในการ มองเห็นไดมากพอ และสามารถจัดวางตําแหนงไดงายเชนกัน หรือใสสีใหกับตัวอักษร “สี” สามารถเพิ่มความนาสนใจใหกับภาพเชนกัน สีตัดกันเพื่อเนนคํา บางอยาง ในขณะที่อาจใชโทนสีเดียวกันเพื่อเพิ่มบุคลิก เทคนิคทั้งสองนี้มีประสิทธิภาพในการออกแบบ เพื่อสรางจุดสนใจไดดีเทาๆ กัน

http://plainmade.com/

เพิ่มคําใบของสียังสามารถเพิ่มความนาสนใจใหกับภาพ สถานที่ดังกลาวขางตนจะใชสองวิธีที่แตกตาง กันมาก - หนึ่งใชสีตัดกันไมเห็นในภาพเพื่อเนนคําบางอยางในขณะที่คนอื่น ๆ ใชโทนสีที่สะทอนภาพ เทคนิคทั้งสองจะมีประสิทธิภาพเทาเทียมกัน

http://www.knucklesindustries.com/

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

คําแนะนําสําหรับการใชตัวอักษรในการออกแบบ คือ ถาคุณตองการใหคนที่จะเห็นทั้งภาพและ คําพูด การโดยประยุกตใชเทคนิคมากเกินไปอาจมีผลตรงขาม เมื่อตัวอักษรทํางานรวมกับภาพที่สื่อสาร ชัดเจนก็จะไดผลลัพธที่ดีที่สุด โปรดจําไววาการออกแบบของคุณ ขอความตองสามารถอานไดอยาง ชัดเจน

3. ปญหาการใชตัวอักษรในเว็บไซต และแนวทางแกไข

นับตั้งแตตัวอักษรมาประยุกตใชรวมกับคอมพิวเตอรดวยกระบวนการเรียบเรียง ประมวลผล และนํามาใชงาน ในการจัดทําสื่อสิ่งพิมพ และโฆษณาตางๆ เชน รายงาน โบชัวร แบบฟอรม หนังสือ และเผยแพรผานระบบเครือขายอินเทอรเน็ต ในรูปแบบ HTML (Hypertext Markup Language) ซึ่ง กําลังนิยมแพรหลายในปจจุบัน แตปญหาสําคัญมักเกิดขึ้นกับนักออกแบบหนาใหมเสมอคือ เมื่อนําเว็บ ไปติดตั้งบน server โดยแอด font ที่ตองการไวเรียบรอย แตเวลามาเปดที่เครื่อง Client font ที่ตองการ กลับไมทํางาน 3.1 มาตรฐานของตัวอักษร ในการติ ดต อ สื่อ สารข อ มู ล มั กจะเกิด ป ญหาเกี่ย วกั บ ตัว อัก ษรหรื อ ขอ ความที่ป ลายทาง ไม สามารถแสดงผลไดอยางถูกตอง ทั้งนี้เนื่องจากรูปแบบและคุณลักษณะของตัวอักษรมีความแตกตางกัน นั่นเอง เพื่อเปนการแกปญหานี้ใหเปนไปในแนวทางเดียวกัน จึงมีการกําหนดมาตรฐานของตัวอักษรขึ้น โดยแบงมาตรฐานตัวอักษรออกเปน 2 ชนิด คือ แอสกี (ASCII) และ ยุนิโคด (Unicode) แอสกี (ASCII) รหัสแอสกีมีใชในระบบคอมพิวเตอร และเครื่องมือสื่อสารแบบดิจิทัลตางๆ พัฒนา ขึ้นโดยคณะกรรมการ X3 ซึ่งอยูภายใตการดูแลของสมาคมมาตรฐานอเมริกา (American Standards Association) ภายหลังกลายเปน สถาบันมาตรฐานแหงชาติอเมริกา (American National Standard Institute : ANSI) ในป ค.ศ. 1969 โดยเริ่มตนใชครั้งแรกในป ค.ศ. 1967 ซึ่งมีอักขระทั้งหมด 128 ตัว (7 บิต) โดยจะมี 33 ตัวที่ไมแสดงผล (unprintable/control character) ซึ่งใชสําหรับควบคุมการทํางาน ของคอมพิวเตอรบางประการ เชน การขึ้นยอหนาใหมสําหรับการพิมพ (CR & LF – carriage return and line feed) การสิ้นสุดการประมวลผลขอมูลตัวอักษร (EOT – end of text) เปนตน และ อีก 95 ตัวที่แสดง ผลได (printable character) รหัสแอสกีไดรับการปรับปรุงลาสุดเมื่อ ค.ศ. 1986 ใหมีอักขระทั้งหมด 256 ตัว (8 บิต) สําหรับ แสดงอักขระเพิ่มเติมในภาษาของแตละทองถิ่นที่ใช เชน ภาษาเยอรมัน ภาษารัสเซีย ฯลฯ โดยจะมีผัง

197

198

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

อักขระที่แตกตางกันไปในแตละภาษาซึ่งเรียกวา โคดเพจ (codepage) โดยอักขระ 128 ตัวแรกสวนใหญ จะยังคงเหมือนกันแทบทุกโคดเพจ มีสวนนอยที่เปลี่ยนแคบางอักขระ ยุ นิ โ ค ด (Unicode) ยู นิ โ ค ด เป น รหั ส ที่ พั ฒ นาขึ้ น เพื่ อ ใช ง านที่ เ ป น สากล โดยองค ก รกํ า หนด มาตรฐานสากล (ISO: International Organization for Standardization) เนื่องจากคอมพิวเตอรในปจจุบัน มี ผูใชงานหลายชนชาติ โดยผูพัฒนาคือองคกรมาตรฐานสากลหรือ ไอเอสโอ เพื่อรองรับตัวอักษรและ สัญลักษณตางๆ ของแตละภาษา ตัวอยางเชน Code Point เปนตน 3.2 การตั้งคาฟอนตใหอานทุกเบราวเซอร อักษรสําหรับเว็บ เปนแบบอักษรที่ไดรับการบันทึกในรูปแบบไฟล html ซึ่งเวลาที่เบราวเซอรไป รองขอขอมูลเอกสารบนเวปนั้น จะสามารถเขาถึงไดโดยสงหมายรองขอไปยังเซิรฟเวอรที่มีขอมูลนั้นบรรจุ อยู เราเรียกการกระทําอยางนี้วาการรองขอ HTTP (HTTP request) ในขณะที่เบราเซอรรองขอขอมูลนั้น เบราวเ ซอรก็ จ ะสง ขอ มูล ภาษาตั้ง ตน ไปกับ หมายรอ งขอด วย (ขอ มูล ภาษานี้เ ปน ขอ มูล ภาษาที่ท า น ตองการจะอานในเนื้อหาของเว็บเพจนั้น ไมใชภาษาของ user interface ของเบราวเซอร) ซึ่งโดยปกตินานมาแลวที่ คนทําเว็บตองทนใชฟอนตภาษาไทยในตระกูล Web Safe Font (MS Sans Serif, Tahoma, ฯลฯ) และถาอยากใชฟอนตสวยๆ ก็ตองจําใจทําตัวหนังสือใหเปนรูปภาพ ซึ่งถึงจะ ใชไดแตก็มีขอเสียมากมาย เชน ทําใหเว็บมีขนาดใหญ ใชเวลาโหลดนานขึ้น กอปปตัวหนังสือไมได แกไข ขอความยาก ตองเสียเวลาทําภาพใหม ปญหาอานภาษาไทยในหนาเว็บเพจไมได เชน กลายเปนภาษาตางดาว วิธีการแกปญหานั้นทํา ไดอยางงายดาย โดยการเซ็ตฟอนตไทยนั้นเอง ซึ่งการเซ็ตฟอนตไทย ใหกับเว็บเพจนั้น ก็สามารถทําได หลายๆ วิธีดวยกัน ดังนี้ 1. ใชคําสั่ง <FONT> โดยใชคําสั่งวา <FONT FACE="ชื่อFontไทย">ขอความภาษาไทย</FONT> เชน <FONT FACE="AngsanaUPC">นี่เปนขอความภาษาไทย</FONT> (สามารถใสชื่อฟอนตไดมากกวา 1 ชื่อโดยใชเครื่องหมาย, คั่นระหวางแตละชื่อ) 2. ใช STYLE ใน แท็ก <FONT> โดยใชคําสั่งวา<FONT STYLE="font-family:ชื่อFontไทย;">ขอความภาษาไทย</FONT> เชน <FONT STYLE=" font-family:AngsanaUPC;">นี่เปนขอความภาษาไทย</FONT> (สามารถใสชื่อฟอนตไดมากกวา1 ชื่อโดยใชเครื่องหมาย, คั่นระหวางแตละชื่อ)

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

3. ใชคําสั่ง <MATA> โดยใชคําสั่งวา <META HTTP-EQUIV="Content-Type"CONTENT="text/html; charset=windows-874"> 4. ใชคําสั่ง <BASEFONT> โดยใชคําสั่งวา <BASEFONT FACE="ชื่อFontไทย">ไวในสวนของ<HEAD>...</HEAD> เชน <BASEFONT FACE="MS Sans ,LilyUPC"> (สามารถใสชื่อฟอนตไดมากกวา1 ชื่อโดยใชเครื่องหมาย, คั่นระหวางแตละชื่อ) 5. ใช Style Sheet โดยใชคําสั่งวา <STYLE type="text/css"> FONT { font-family: ชื่อFontไทย;} </STYLE> ไวในสวนของ <HEAD>...</HEAD> เชน <STYLE type="text/css"> FONT { font-family: AngsanaUPC, MS Sans Serif; } </STYLE> และสําหรับสวนที่ตองการแสดงผล ภาษาไทย ก็ใชเพียงคําสั่ง <FONT> ขอความ ภาษาไทย </FONT> เทานั้น (สามารถใสชื่อฟอนตไดมากกวา 1 ชื่อโดยใชเครื่องหมาย, คั่นระหวางแตละชื่อ) วิธีที่ 4-5 นั้น จะสะดวกกวาเพราะใสเพียงแคครั้งเดียวโดยไมตองใสทุกๆ ครั้งที่ตองการ แสดงผล อักษรภาษาไทย และสามารถเปลี่ยนฟอนตที่จะแสดงผลไดงาย เพียงเปลี่ยนแคที่เดียว ตัวอยางชือ่ Font ภาษาไทย MS Sans Serif CordiaUPC AngsanaUPC EucrosiaUPC LilyUPC DB ThaiTextFixed เปนตน

199

200

บทที่ 7 ตัวอักษรกับการออกแบบเว็บไซต

สรุป

ตัวอักษรมีหนาที่สื่อขอความถึงผูใชผานทางหนาเว็บเพจ ซึ่งผูออกแบบเว็บไซตจะตองให ความสําคัญกับตัวอักษรเชนเดียวกับใหความสําคัญในสวนอื่นๆ ดังนั้นจึงตองเขาใจพื้นฐานของตัวอักษร ในดานตางๆ เปนอยางดี เชนการออกแบบเมื่อใดที่เนื้อหาของคุณมีความยาวมากๆ หลายบรรทัดตอกัน ก็ควรแบงขอความเหลา นั้นใหเปนสวนยอยๆ เปนยอหนา หรือการจัดแบงคอลัมน เปนตน ศิลปะแหงการเลือกสรรตัวอักษร (typography) เพื่อใชในเวิรดไวดเว็บไมวาจะเปนการเลือก แบบ , การวาง ตําแหนง หรือการซอนทับที่มีอยูในวันนี้ ก็ยังไมเปนที่นาพอใจนัก อุปสรรคสําคัญประการ หนึ่งก็คือ หนาตา ของเว็บเพจมักจะไมคงตัว เพราะแปรเปลี่ยนไปตามบราวเซอรและเว็บเพจ ดังนั้น ไมวา นักออกแบบ จะคิดคน และสรางสรรคเว็บเพจที่สวยหรูปานใดก็ตาม ก็ไมอาจแนใจไดเลยวา ผูดูจะไดดู เว็บเพจที่สวยงาม สมความตั้งใจของเขาหรือเปลา จนกระทั่งมีมาตรฐานใหมเผยตัวออกมาพรอมๆ กัน หลายตอหลายมาตรฐาน เชน Cascading Style Sheets (CSS), HIML 4.0 และ the Document Object Model (DOM) จึงทําใหนักออกแบบเว็บ พอจะเห็นทางออก วาดวยมาตรฐานใหมเหลานี้ พวกเขา สามารถเลือกสรร และควบคุมลักษณะ การแสดงตัวอักษรบนเว็บ ไดอยางเต็มที่

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

203

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่

การอัพโหลดเว็บไซต

และการเชื่อมโยงเครือขายสังคมออนไลน

การเผยแพรเว็บไซตที่สรางเสร็จแลวในเครื่อง คอมพิวเตอรใหอยูบนโลกอินเทอรเน็ต จําเปนตองขอ พื้นบนเครื่องบริการพื้นที่สําหรับเก็บเว็บไซตของเรา สามารถดําเนินการหลายแบบ ไดแก การใชบริการนํา เว็ บ ไซต ข องเราไปฝากไว ที่ผู ใ ห บ ริ ก ารอิ น เทอร เ น็ ต ติดตั้งดวยตนเองจาก เครื่องแมบริการเว็บที่มีอยู ขอ พื้นที่ดวยการเชาเครื่องแมบริการ การขอพื้นที่ฟรีเพื่อ จัดตั้งเว็บไซต สิ่งที่สําคัญคือการบรรจุโฟลเดอรและ ไฟลไปไวบนเครื่องบริการ เพื่อที่จะทําใหเว็บไซตทอง สูบนอินเทอรเน็ต วิธีนี้เรียกวาการ “อัพโหลด” รวมถึง การเชื่อมโยงเว็บ ไซต ของเราเข า กับเครือข ายสังคม ออนไลน

203

2044

บทที่ 8 การอัพโหลดเว็บไซต และกาารเชื่อมโยง Soccial Network

ภาพที่ 8.1 สิส่งที่เกี่ยวของกกับการอัพโหลดด

1. ควา ามรูเกี่ยวกับการอัพโหลด พ เขาสู า ระบบอินเทอรเน็ต

การอัพโหลด (Upload) คือการนํ อ างานเว็ว็บไซตของเราาไปไวบน Serrver ของเครื่อองบริการขอมูล เว็บของเว็บไซตที่ใหบริ​ิการพื้นที่เพื่อเผยแพร อ งานออกสูอินเทอรเน็ต เมื่อนําผลงานไปไว ผ บบนอินเทอรเน็ต แลว ก็สามารถเรี า ยกงานนและขอมูลจาากอินเทอรเน็ตกลั ต บมาปรับปรุ ป งไดตลอดเววลา เรียกวากการดาวนโหลดด (Downlooad) ในที่นี้จะไไมกลาวถึงรายยละเอียดกระบวนการจัดกาารระบบขอมูล เพียงแตใหเขขาใจวาการจะะ นําเว็บเพพจไปไวในระบบบอินเทอรเน็ตได ต จะตองมีเครื เ ่อง Server รับขอมูลแลละทําหนาที่จัดดการขอมูลเว็บ เพื่อแสดงงผล (เรียกวา Web Serveer) การเรียกชืชื่อ Server จะะเรียกไปตามหหนาที่ เชน Fiile Server ใชช จัดการไฟฟลขอมูลตางๆๆ Mail Server ใชจัดการขขอมูลเกี่ยวกับ Mail และ DNS D Server ใชจัดการเรื่อง ระบบโดเเมนเนมดังที่กลลาวไวแลวในบบทที่ 1 เปนตน เนื่องจากระบบบอินเทอรเน็ตเป ต นเครือขายขนาดใหญ ย เชื่อมโยงกันทั่วโลก โ ความตอองการใชงานมีมี า ดสรรใหบริษัทภาคเอกชชนมาทําธุรกิจใหบริการดูแล มากนับลานๆ เครื่อง การควบคุมการใชจึงมีการจั ผูใชงานอิอินเทอรเน็ต เรีรียกวา ISP (Innternet Service Provider) โดยควบคุมตามหมายเลข ต IP การบริการร พื้นที่เก็บขอมูล ประมววลผลขอมูล ก็กมีบริษัทมาทําธุรกิจรับชวงจาก ง ISP ไปจัดเครื่อง Serrver ไวบริการร โดยคิดคาบริการตามจํจํานวนพื้นที่หรือความจุขอมูล เรียกวา Web Hostinng สําหรับหนวยงานที่เปน เ การอัพโหหลด ดาวนโหลดก็ ห คือการนํนําผลงานเว็บที่ องคกรขนนาดใหญมีขอมูลมากก็จะจั​ัดตั้ง Host เอง สรางขึ้นไปไว ไ หรือนําขอมูลลงมาจากก Server ของ Web Hosting นั่นเอง

บทที่ 8 กาารอัพโหลดเว็บไซต และการเชืชื่อมโยง Sociall Network

หนาเว็ า บเพจ

Hoosting

เรียกดูเว็บไซซตผานจอแสดงงผลตางๆ ภาพที่ 8.2 แสดงกรระบวนการอัพโหลดข โ อมูล

การรจัดวางโครงงรางระบบขอมู อ ลในเว็บไซต ไ โครงงร า งระบบข อมู อ ล ภายในเว็ว็ บ ไซต ปกติติ จ ะทํ า การแบบ ง แฟ ม งาน (ffolder) ออกเเป น ส ว นๆ ภายใตแฟมงาานใหญที่สรางเป ง น site ไวว เพื่องายตอการจั ก ดการ สํสาหรับไฟลที่ใใชชี้เขาเว็บไซตต จะใชชื่อ index.html หรื ห อ default.httml จึงตองตองชื อ ่อไฟลใหถกต ู องตามมาตตรฐาน สวนไฟฟลภายในเว็บไซตตั้งชื่อ ไดตามตองกาาร โดยใหใชชืช่ือเปนภาษาอั​ังกฤษตัวพิมพพเล็กผสมตัวเลลขก็ได (หามใใชภาษาไทย) สวนไฟล เว็บเพจที่ใชเชื่อมโยง (ลิงค) สําคัญภายในเว็บไซต เชชน เว็บเพจที่ใชชเปนหนาหลักกของเว็บไซต เว็บเพจที่ เปนหนาหลักของสวนงานยยอย ตองวางไวในโฟลเดอรรหลัก (Local root) เทานั้น สําหรับเว็บหนาเนื้อหา ยอยๆ ควรจัดเข ด าแฟมงาน (folder) ยอยเเพื่อการจัดการร คนหาขอมูล จะไดทําไดงาายและรวดเร็ว

ภาาพที่ 8.3 แสดงงตัวอยางการจัจัดระบบขอมูลภายในเว็ ภ บ

2 205

206

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

2. การขอพื้นที่บนเว็บผูใหบริการ

การหาพื้นที่เว็บผูใหบริการ หรือ Web Hosting เพื่ออัพโหลดงานเว็บไปเก็บไวเพื่อเผยแพร ผลงานในอินเทอรเน็ต สําหรับผูใชทั่วไปไมจําเปนตองสราง Server มาใชงานเอง เพราะราคาเครื่องคา บํารุงรักษาจะสูงมาก ปจจุบันมี Web Hosting มากกวา 2,000 รายที่แขงขันกันใหบริการมีทั้งแบบใหใช ฟรี และคิดเงิน ราคาขึ้นอยูกับการใชงาน และจํานวนความจุของพื้นที่ สามารถคนหาขอมูลโดย Search หาจากคียเวิรด Web Hosting ซึ่งมีรายละเอียดใหตัดสินใจเลือกมากมายทั้ง Web Hosting ภายในประเทศ และตางประเทศ ดังตัวอยาง รายชื่อเว็บผูใหบริการพื้นที่วางเว็บไซต หรือ Web Hosting ที่โฆษณาทางอินเทอรเน็ต เชน รายชื่อ Web Hosting ในประเทศไทย ไดแก NetRegis.com, ThaiHostSave.com, เอฟแอลเอ็ม ออนไลน ดอทเน็ต, แปซิฟกโฮสติง , ebizzi.net, Thaipost.info , ThaiDomainBiz , ThaiNIC เปนตน

ภาพที่ 8.4 ตารางเปรียบเทียบการบริการเว็บโฮสติ้งของตางประเทศ

บทที่ 8 กาารอัพโหลดเว็บไซต และการเชืชื่อมโยง Sociall Network

VPSHiSp peed

บริการใหเชา Server คววามเร็วสูง สั่งซื้อและชําระเงินผานหหนาเวปได ตลอด 24 ชั่วโมง เปนเซิ เ รฟเวอร ความเร็วสูง ทํางานเสเถีถียร ราคา ตั้งแต 490 บบาท ถึง 6,0000 บาท (http://www.vvpshispeed.com m/th/) WhiteSpa ace

เซิรฟเวอรระะบบจัดเก็บขอมู อ ล แบบ เวอร ช วลไลลเซชั่ น ทํ า งาานอยู บ น ระบบคลาวดที่สรางขึ้นบนระบบที บ ่ มีความเสถียรภาพสูง ราาคาตั้งแต 1,495 บาท ถึง 33,245 บาท (https://servicee.whitespace-cloud.com/) armyhostting.com

Web Hosting+Domain เชาโฮสต แถมโดเมน สสําหรับองคกรรั ร ฐ เอกชน และบุคคลทัทั่วไป ราคาตัตั้งแต 999 บาท ถึง 3,2200 บาท (http://armyhhosting.com)

ไทยดาตาโฮสติง้

ใหบริการ เว็ว็บโฮสติ้ง จดชืชื่อเว็บไซต พื้นที่เก็บขอมมูลออนไลน (FFile Server Service) แลละเซิรฟเวอรเสมื ส อนสวน บุคคล (VPS) ที่มีคุณภาพสูสูง มีความ เสถียรราคาาตั้งแต 950 บาท ถึง 4,000 บาท ภภาพที่ 8.5 รายชื่อผูใหบริการ web hosting ในไทย

http://www.thhaidatahosting.com

2 207

2088

บทที่ 8 การอัพโหลดเว็บไซต และกาารเชื่อมโยง Soccial Network

ไทยโฮส สไซต

มีบริการหหลังการขายตลอด 24 ชม. มี ช อ งวงงจรเชื่ อ มต อ ขนาดใหญ ความเร็วสู ว งทั้งใน และะตางประเทศ รองรับ CMS C ทุกประเเภท สามารถ เลือกใช Direct D Admin เนื่องจาก ใชงาย ไมตองเรียนรูรม าก http://wwww.thaihostsite.ccom/ เน็ตรีจส ิ

NetRegis คือผูใหบริการ จดโดเมน บริการเชาเครื่อง Serveer (Hosting) และพัฒนา น ออกแบบเว็ว็บไซต ราคา ตั้งแต 988 บาท ถึง 7988 บาท http://netrregis.com/ อีลอสโฮ ฮสดอทคอม

เปรี ยบเสสมื อ นมี เ ซิ รฟ เวอร สว นตั ว โดยสามมารเข า ไปจั ดการแก ไ ข Setup คาตางๆ บนเซิรฟเวอรได ดวยการใใช SSH (Seccure Shell) Root Access ราคคาตั้งแต 500 บาท ถึง 3,000 3 บาท http://wwww.eloshost.com m/ เอสเอ็มโฮสติ โ ง้

บริการจดดโดเมนเนม เว็บโฮสติ บ ้ง ดูแล เว็บไซต รับวางเครื่องเซิซิฟเวอร ออก แบบเว็บไซต ไ ปรึกษาเรื่ืองเว็บไซต, เซิฟเวอร ราคาตั้งแต 250 2 บาท ถึง 6,500 บาาท http://wwww.smhosting.inn.th/ ภ ่ 8.6 รายยชื่อผูใหบริการรเว็บโฮสติ้งในไทย ภาพที

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

การเลือกใชบริการโฮสติง้ สํ า หรั บ เว็ บ ไซต ทั่ ว ไป โฮสติ ง มี ลั ก ษณะที่ เ ปรี ย บเที ย บได เ หมื อ นกั บ ฮาร ด ดิ ส ก ในเครื่ อ ง คอมพิวเตอรของเรา ฉะนั้นถาคุณมีพื้นที่การใชงานโฮสติ้งที่มาก คุณก็จะสามารถเก็บ ไฟล, รูปภาพ, เอกสาร และอื่นๆ ไดมากตามไปดวยเชนกัน บางครั้งเราอาจเรียกไดหลายแบบเชน โฮสติง โฮสติ้ง เว็บ โฮสติง โฮส แตทั้งหมดก็มีความหมายเหมือนกัน เว็บโฮสติ้ง มี 2 แบบ คือ Windows Hosting และ Linux Hosting โดยแยกตามระบบปฏิบัติการ ที่ตัวเว็บโฮสติ้งใชงาน ซึ่งมีอยู 2 ระบบปฏิบัติการที่ใชงานคือ Microsoft Windows Server และ Linux ความแตกตางระหวางระบบปฏิบัติการ 2 ระบบนี้ คือ Windows Hosting สามารถใชงานไดกับเว็บไซตที่เขียนโดยภาษา ASP ,ASP.net และ PHP ได ในขณะที่ตัว Linux Hosting สามารถใชงานกับเว็บไซตที่เขียนโดยภาษา PHP ไดเทานั้น แตหากเว็บไซตของคุณเขียนโดยใช HTML ก็สามารถเลือกใชเว็บโฮสติ้งไดทั้ง 2 แบบ โดยที่การ แสดงผลของทั้ง 2 ระบบไมตางกัน แตแนะนําใหใชเปน Linux Hosting เพราะจะมีคาใชจายนอยกวา นอกจากนี้ยังมีโฮสติ้ง ที่บริการฟรีไมคิดคาใชจาย จัดทําขึ้น เพื่อสนับสนุนการพัฒนาเว็บไซต ของคนไทยใหแพรหลายมากขึ้น และเพิ่มโอกาส ใหกลุม ผูประกอบการ SMEทุกหนวยงานหรือองคกร ขนาดเล็ก กลุมนักเรียน นักศึกษา กลุมนัก พัฒนาเว็บ ที่ตองการลดตนทุนของกิจการ รวมไปถึงเว็บที่เปน ประโยชน ต อ สั ง คม ที่ มี ค วาม สนใจในการออกแบบหรื อ ทํ า เว็ บ ไซต เช น http://hostingfree.in.th/ http://www.thcity.com/ หรือ http://thaicloud.org/ เปนตน

ภาพที่ 8.7 ตัวอยางเว็บไซตที่ใหบริการฟรีเว็บโฮสติ้ง

209

210

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

3. การสมัครขอพื้นที่เว็บไซตที่ใหบริการฟรี

เพื่อใหผูศึกษาออกแบบเว็บไซตไดลองปฏิบัติ นําผลงานขึ้นเว็บไซต จึงขอยกตัวอยางพื้นที่ (Hosting) แบบฟรี และ และใหเห็นภาพวิธีการ Upload ได จึงจะขอยกตัวอยางการสมัครขอพื้นที่ฟรี กับ เว็บไซตของ http://www.thcity.com/ โดยวิธีการสมัครทั่วไป thcity.com คือ บริการฟรีพื้นที่ทําเว็บไซต โดยผูใหบริการคือ เว็บพิษณุโลกดอทคอม การสมัครสมาชิกกรอกรายละเอียดตามที่บอกไว ซึ่งไมยากเพราะเปนภาษาไทย 1. เขาเว็บ http://www.phitsanuloks.com/11year/index.php เลือกเมนู สมัครฟรีพื้นที่โฮมเพจ ฟรีกระดานบอรดดังรูป

ภาพที่ 8.8 ตัวอยางการสมัครฟรีเว็บโฮสติ้ง

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

2. กรอกรายละเอียดตามที่ตามชองตางๆ บอกไว ในตัวอยางนี้ ตั้งชื่อเว็บไซตวา silpagum โดยใหไปเลือกตั้งแลวคลิกที่กลุมของโดเมน ก็ไดชื่อ http://silpagum.sorng.com เมื่อ เสร็จสิ้นแลวคลิกที่เมนู Regis

คลิ๊กเมื่อกรอกขอมูลเสร็จ

กรอกรายละเอียด เลือกโดเมนฟรี

ผลลัพธที่ได และวิธีการที่ทางผูใหบริการแนะนํา

ภาพที่ 8.9 ลงทะเบียนสําเร็จ ชืเ่ ว็บไซต http://silpagum.sorng.com

211

212

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

3.1 การตั้งคาตางๆ และวิธีการอัพโหลดไฟลผานระบบจัดการเว็บไซต 3. ใหเราลอคอินผานหนาเว็บไซต http://www.thcity.com/ ในสวนของชื่อผูใช ใหเรากรอก เฉพาะชื่อผูใชอยางเดียว ไมตองใส .sorng.com

ใสชื่อผูใ ช (User) เลือกโดเมน ใสรหัสผาน (Password) คลิก ล็อคอิน

4. เมื่อลอคอินเขามาแลว ใหไปที่ขอมูลสวนตัว

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

5. แลวคลิกที่ปุม บันทึกขอมูลและเปดการใชงานFTPจนกวาจะมีคําวาเปดใชงาน FTP เรียบรอยแลว

6. ใหไปที่ จัดการเว็บไซต

213

214

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

7. สรางโฟลเดอร ชื่อวา images

ไดผลปรากฏตามรูป

8. อัพโหลดไฟลที่ Icon Browse โดยอัพโหลดไดทีละ 5 ไฟล

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

ผลปรากฏตามรูป

* สังเกตวามีการจัดเรียงตาม Site ในเครื่องเรา

9. คลิ๊กที่โฟลเดอร images เพื่ออัพโหลดไฟลรูป

10. อัพโหลดไฟลที่ Icon Browse โดยอัพโหลดไดทีละ 5 ไฟล เหมือนในสวน Home

215

216

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

เมื่ออัพโหลดไฟลรูปหมดแลว สามารถเขาเว็บไซคไดเมือ่ พิมพ URL http://silpagum.sorng.com

ภาพที่ 7.9 การแสดงผลเมื่อทําการอัพโหลดทุกไฟลเรียบรอยแลว

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

3.2 การอัพโหลดขอมูลโดยใชโปรแกรมประเภท FTP วิธีการอัพโหลดไฟลขอมูลเว็บไซตผานพอรต FTP (พอรต 21 ) หรือที่เรียกติดปากวา FTP นั้น มี ดวยกันอยูสองแบบคือ 1.การ FTP ผาน ตัว Browser เชน Internet Explorer ,Firefox , Opera หรือการ จัดการเว็บไซต (Site manager)ที่ผูบริการเตรียมไวใหดังที่ยกตัวอยางมาแลว ยังมีวิธีการอัพโหลดขอมูลเว็บโดยใชโปรแกรมประเภท FTP ซึ่งมีอยูมากมาย เชน Core FTP, Filezilla หรือ WS_FTP Pro เปนตน ในที่นี้จะแสดงวิธีการอัพโหลดผานโปรแกรม WS_FTP Pro ที่เปนโปรแกรมที่ไดรับการนิยมอีก โปรแกรมหนึ่งในการ Upload ขอมูลในการสรางโฮมเพจขึ้นไปยัง เซิรฟเวอร นอกจากการอัปโหลดแลว ยังสามารถเปลี่ยนชื่อไฟล,ลบไฟล,คัดลอกไฟล เปลี่ยน permission และอื่นๆอีกมากมาย WS_FTP เปน โปรแกรมประเภท Shareware ของบริษัท Ipswitch, Inc. โดยสามารถทดลอง Download มาทดลองใช กอนไดจาก http://www.ipswitch.com/index.html ขั้นตอนการใชงาน WS_FTP (ตัวอยางจะใช WS_FTP Pro ) มีดังตอไปนี้ 1. หลังจากติตั้งโปรแกรมในเครื่องแลว ทําการเปดโปรแกรม WS_FTP Pro ขึ้นมา

217

218

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

2. จากที่สมัครโฮสฟรี หรือใชบริการโฮสติ้งแบบเสียคาบริการก็ตาม ทางผูใหบริการจะมอบ Host Address เปนตัวเลขมาหนึ่งชุด ในกรณีนี้ Host Address คือ 122.155.7.86, port: 21

3. กรอกกรอกรายละเอียด ชอง Address ในกรณีนี้ Host Address คือ 122.155.7.86 ตามดวย UserID และ Password แลวกด Go

4. โปรแกรมจะทําการแสดงการ connect ดังรูปดานลาง โดยดานซายจะเปนขอมูลเลขบน เครื่องของผูใช ดานขวาจะเปนขอมูล ฝงเซิรฟเวอร

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

5. ทําการ Double Click ที่โฟลเดอร public_html ฝงเซิรฟเวอร

6. การอัพโหลดทําโดยการลากไฟลและโฟลเดอรจากฝงเครื่องคุณเอง(ฝงซาย) เขาไปไวทฝี่ ง เซิรฟเวอร(ชองขวา) หรือกดไอคอน

ลากไฟลและโฟลเดอร

219

220

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

4. การเชื่อมโยงกับเครือขายสังคมออนไลน

เครือขายสังคมออนไลน (Social Network) หมายถึงกลุมคนที่รวมกันเปนสังคมมีการทํา กิจกรรมรวมกันบนอินเทอรเน็ต ในรูปแบบของเว็บไซตมีการแผขยายออกไปเรื่อย ๆ เปนรูปแบบของการ สื่อสารขอมูลผานอินเทอรเน็ต ทําใหเครือขายคอมพิวเตอรหรืออินเทอรเน็ตเปนสังคมขึ้นมา การสราง ชุมชนใหมบนอินเทอรเน็ตเปนเครื่องมือสําคัญในการติดตอสื่อสาร สามารถทํากิจกรรมตางๆ ทั้งเพื่อ การศึกษา ธุรกิจ และความบันเทิง ทุกวันนี้มีคนใชชีวิตอยูกับสังคมออนไลนมากขึ้นทุกวัน และมีการใช Social Media ที่ผูใชเปนผูสื่อสาร หรือเขียนเลา เนื้อหา เรื่องราว ประสบการณ บทความ รูปภาพ และ วิดีโอ ที่ผูใชเขียนขึ้นเอง ทําขึ้นเอง หรือพบเจอจากสื่ออื่นๆ แลวนํามาแบงปนใหกับผูอื่นที่อยูในเครือขาย ของตน ผานทางเว็บไซต Social Network ที่ใหบริการบนออนไลน ปจจุบันการสื่อสารแบบนี้ทําผานทาง Internet และโทรศัพทมือถือ เชน กระดานความคิดเห็น เว็บบล็อก วิกิ (wiki) Podcast รูปภาพ และ วิดีโอ โดยมีเทคโนโลยีที่รองรับเนื้อหา (content) เหลานี้ ไดแก เว็บบล็อก เว็บไซตที่แชรรูปภาพ แชรเพลง แชรวิดีโอ เว็บบอรด อีเมล IM (Instant Massage) เครื่องมือที่ใหบริการ เชน Voice over IP สวนเว็บไซต ที่ใหบริการ Social Network ไดแก Blogger Twitter Flickr Facebook MySpace หรือ Youtube เปนตน

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

Social Media แบงตามหมวดการใชงานได 5 หมวด ดังนี้ 1. หมวดการสื่อสาร (Communication) ก็จัดแบงตามกลุม การใช • Blogs เชน Blogger (google), Blognone, gotoKnow, Typepad, WordPress, • Internet forums เชน vBulletin, phpBB • Micro-blogging เชน Twitter, Plurk, Pownce, Jaiku • Social networking เชน Facebook, LinkedIn, MySpace, Orkut, Skyrock, Netlog, Hi5, Friendster, Multiply • Social network aggregation เชน FriendFeed, NutshellMail, Spokeo, Youmeo 2. หมวดความรวมมือ และแบงปน (Collaboration) จัดกลุมการใช • Wikis เชน Wikipedia, PBwiki, wetpaint • Social bookmarking เชน Delicious, StumbleUpon, Stumpedia, Google Reader, CiteULike • Social news Digg, Mixx, Reddit • Opinion sites เชน epinions, Yelp 3. หมวดมัลติมีเดีย (Multimedia) • Photo sharing เว็บที่แบงปนการใชงานรูป เชน Flickr, Zooomr, Photobucket, SmugMug • Video sharing แบงปนวิดีโอ เชน YouTube, Vimeo, Revver • Art sharing แบงปนภาพศิลปะ deviantART • Livecasting การถายทอดสด : Ustream.tv, Justin.tv, Skype • Audio and Music Sharing เว็บที่มีการแชรเพลงจากสถานีวิทยุ และเว็บเพลงหรือ ดนตรี เชน imeem, The Hype Machine, Last.fm, ccMixter 4. หมวดรีวิว และแสดงความคิดเห็น (Reviews and Opinions) • Product Reviews : epinions.com, MouthShut.com, Yelp.com • Q&A : Yahoo Answers 5. หมวดบันเทิง (Entertainment) สวนใหญจะเปนเกมส • Virtual worlds : Second Life, The Sims Online • Online gaming : World of Warcraft, EverQuest, Age of Conan, Spore (2008 video game) • Game sharing : Miniclip

221

222

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

4.1 การฝงโคด Facebook Social Plugins ไวในเว็บเพจ Facebook Social Plugins เปน Plugins ของ Facebook ที่สามารถเชื่อมโยงกิจกรรมตาง ๆ ระหวางเว็บไซตของคุณกับ กิจกรรมบน Facebook ได ที่นาสนใจก็คือ facebook สามารถทําใหเครือขาย ของคุ ณ โตไดเ ร็ ว กว า ใช ชอ งทางการทํ า เว็ บ ไซต หรื อ อีเมลล อ ยา งเดี ยว ในส ว นนี้ จึ งบอกถึ ง วิธี ก ารนํ า Facebook Social Plugins รูปแบบตางๆ มาติดตั้งบนเว็บไซตเพื่อเชื่อมโยงกิจกรรมตางๆ บนเว็บไซต กับ Facebook เขาดวยกัน Facebook Social Plugins สามารถใชงาน Embed หรือการฝงโคดของ Plugins ไวในเว็บเพจ ได เชน กิจกรรมบน Site หรือ Comment Like box plugins เปนตน

ขั้นที่ 1 เลือก Social Plugins ที่ตองการ โดย Social plugins แตละอยางคราว ๆ ดังนี้ 1.1 Like Button plugins นี้เหมาะสําหรับติดตั้งในหนาบทความ หรือ ในหนาแรกของเว็บไซต หรือจะติดตั้งที่หัวขอของเนื้อหาที่นาสนใจก็ได โดยมีจุดประสงคเพื่อใหผูอานบทความของคุณแสดงออก วาชอบบทความของคุณไดงายขึ้น เพียงแค click ปุมนี้เทานั้น 1.2 Activity Feed เปน plugins ที่แสดงวาเพื่อนบน facebook ของคุณมีกิจกรรมใดบนเว็บไซต ของคุณบาง เชนชอบบทความใด หรือไดแนะนําบทความใด เปนตน 1.3 Recommendations เปน plugins ที่บอกถึงบทความใด บนเว็บไซตของคุณที่ไดถูกแนะนํา ไปยัง Facebook แลว 1.4 Like Box กอนหนานี้ plugins ตัวนี้มีชื่อวา Fan box แตตอนนี้ไดเปลี่ยนมาเปน Like Box ซึ่งมีลักษณะคลายคลึงกับของเกาแต พิเศษกวาเดิมตรงที่มี สวน Show stream ที่แสดงการ Update ตางๆ บนหนานั้นๆ ดวย 1.5 Login with Faces plugins นี้ติดตั้งไวเว็บไซตของคุณเพื่อใหผูเยี่ยมชมสามารถ Log in เขา Facebook ผานเว็บไซตของคุณได และจะแสดงหนาของผูเยี่ยมชมที่ Log in ผานเว็บไซตของคุณดวย 1.6 Facepile plugins นี้เหมือนสมุดเยี่ยม คือจะแสดงรูป ภาพโปรไฟลของเพื่อนของผูใชที่ไดลง นามแลวสําหรับเว็บไซตของคุณ 1.7 Comments plugins นี้ สามารถใหผูใช facebook แสดง Comment สดๆ บนเว็บไซตของ คุณได เทียบไดกับกลอง Chat box ซึ่งเปนชองทางการสื่อสารที่ดีบนระหวางคุณกับผูเยี่ยมชมเว็บไซตเลย ทีเดียว วิธีติดตั้ง จะกลาวถึงในขั้นที่ตอไป 1.8 Live Stream plugins นี้อธิบายงาย ๆ ก็เหมือนการใชงาน Twitter นั่นเอง

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

ขั้นที่ 2 การรับโคดของ Social Plugins จาก Facebook ที่จริงแลวการรับโคดของ Social Plugins ที่ตองการ นั้นทําไดงายมากเพียงแค ตั้งคาและ Click ปุม Get code เทานั้น อยางเชน รูปที่เห็นอยูดานลางนี้ผมทดลองรับโคดของ Comment ของ

Facebook มาใสบนหนาเว็บของเรา 2.1 เริ่มจาก เขาไปที่ Facebook Social Pluing ไดที่เว็บไซต http://developers.facebook.com/docs/plugins/

พอไดหนาตาแบบนี้แลว ใหคุณเลือกที่ Link Comment ตามลูกศร เพื่อไปยังหนานี้ http://developers.facebook.com/docs/reference/plugins/comments/

223

224

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

จากนั้นก็ใหไปตั้งคาตามที่คุณตองการครับซึ่งคาเหลานั้นมีดังนี้ครับ 1.URL to comment on = บอกที่อยู URL ของ WEBSITE ของคุณลงไปครับ เชน http://www.ajnat.ob.tc 2.Number of posts = บอกไปครับวาตองการใหมีกี่ขอความกอนจะตัดไป View more เชน 5 3.Width = กําหนดความกวางครับมีหนวยเปน Pixel เชน 500 4.Color Scheme = เลือกโทนสีครับมีแคสองแบบคือ มืดกับสวาง 5.GET CODE = คลิกเพื่อรับ Code ทั้งหมดครับ เปนอันเสร็จ

ตั้งคา Comment facebook ทั้งหมด

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

จากนั้นก็เหลือแคการนํา Code ทั้งหมดที่ไดมาแบบนี้ไปใชงาน โดยเปดโปรแกรม Dreamweaver แลวนํา Code ทั้งหมดที่ไดมา ไปติดตั้งไวยังหนาเว็บไซตของเราเอง ซึ่งทานก็เลือกไดเลยครับวาจะวางไว ที่ตรงไหนของ PAGE เชน ตัวอยาง แลวเปดมุมมอง Code view

225

226

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

นํา Code ทั้งหมดวางใน Code view ผลลัพธทั้งหมดก็จะไดเปนแบบนี้

บทที่ 8 กาารอัพโหลดเว็บไซต และการเชืชื่อมโยง Sociall Network

4.2 การแบงปน(Share) น หนนาเว็บเพจสู Social netwworking Faceebook ถือเปปน Social Neetwork ที่กําลัลงเติบโตอยางรวดเร็ ง วในปจจจุบัน จึงเปนเครื น ่องมือ สําคัญอีกอันหนึ ห ่งในการโปรรโมท เว็บไซต ของเราไดเปนอย น างดี 1. สรางปุม Shaar สําหรับ faccebook และ twwitter จากโปรแกรมม Photoshop Save เปนไฟล Jpeg แลวเก็บไวใน ใ Folder Images ใน Site S ของเรา 2. นําภาพที่เตรียมไว ม ใสลงตารางงในตําแหนงที่ตตองการ ในโปรรแกรม Dreamwweaver

2 227

228

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

3. คลิ๊กที่รูปภาพ(Share) แลวใสรายละเอียดในชอง Link ดังนี้ สําหรับแชรไปที่ facebook http://www.facebook.com/sharer.php?u= http://www.rjannat.ob.tc (ตรงสีแดงคือใสชื่อเว็บไซต) ที่ชอง Target เลือก _blank สําหรับแชรไปที่ Twitter http://twitter.com/share?text=http://www.rjannat.ob.tc (ตรงสีแดงคือใสชื่อเว็บไซต) แลวแสดงผลโดยการกด Preview หรือ F12 ทดลองโดยการคลิกที่ปุมแชรเพื่อดูผลลัพธที่ได

การแสดงผลการแชรเมื่อคลิกที่ปุม แชร ผลลัพธที่ไดดังภาพ

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

4.3 วิธสี ราง Facebook Fan box (Like Box) บน เว็บไซต การสราง Facebook fan box บน เว็บไซต ซึ่งจะชวยโปรโมทเว็บไซต ของเราบน facebook ได และในทางกลับกันก็ยังสามารถโปรโมทกิจกรรมบน Facebook ของเราในเว็บ ของเราไดเชนกัน ขั้นเตรียมการติดตั้ง กอนอื่นตองมีหนา Facebook fanpage เสียกอน แนนอนครับใครที่ยังไมมี Account ใน Facebook ก็ตองไปลงทะเบียนไวกอน ที่นี่http://www.facebook.com ตอนนี้ขอเหมาวาทุกคนมี Account ใน Facebook ครบทุกคนแลว ตอไปก็ดําเนินการ Create Fan Page ขึ้นมา ขั้นตอนการติดตั้ง วิธีการนําปุม Like ไปติดไวในหนาเว็บไซต เมื่อเรา Create Fan Page เรียบรอย หากเรามีเว็บไซตหลักอยูแลว เราสามารถไปสรางลิ้งคให เชื่อมโยงมาที่ Page ที่เราสราง และเราสามารถที่จะทําปุม Like ไปติดไวในหนาเว็บไซตหลักของเรา เมื่อ มีผูชมที่ชื่นชอบในองคกร สินคาบริการ หรือเว็บไซตของเรา ก็จะกด Like ขอมูลก็จะเชื่อมโยงกับ Fan Page ที่เราสรางไว วิธีการคือ เขามาในหนาเพจที่เราสรางไว หากปดไปแลว หรือเขาในครั้งใหมเราสามารถเขามา เขามาที่หนา Home ปกติของเรา ที่เมนูดานขวาใหคลิกที่ บัญชีผูใช เลือกเมนู ใช Facebook ในฐานะ หนาเพจ

229

230

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

copy URL ของ Page ที่เราสราง แลวคลิ๊กตรงเมนูแกไขหนา

เลือกที่เมนู การตลาด

และเลือก เพิ่มกลองถูกใจในเว็บไซตของคุณ

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

copy URL ของ Page ที่เราสรางมาใสไวในชองแรก ในสวนอื่นๆ ก็เลือกตามความตองการของ เรา จะแสดงตัวอยางทางดานขวา • Width คือความกวางของกลอง • Color Scheme มีใหเลือกมืดกับสวาง หรือ ขาวกับดํา • Stream กับ Header สามารถเอาออกได เสร็จแลวคลิ๊ก Get Code

Header

ใส URL ของ Page

Stream

คลิก

231

232

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

Copy Code ไปติดในหนาเว็บไดเลย

เปดโปรแกรม Dreamweaver แลวนํา Code ทั้งหมดที่ไดมา ไปติดตั้งไวยังหนาเว็บไซตของเราเอง ซึ่ง ทานก็เลือกไดเลยครับวาจะวางไวที่ตรงไหนของ PAGE เชน ตัวอยาง แลวเปดมุมมอง Code view *** หมายเหตุ : อยาลืมตรวจสอบใหแนใจวาวาจัดวาง Code ในสวนของ HTML ไดอยางถูกตอง

นํา Code ทั้งหมดวางใน Code view

ผลลัพธทั้งหมดก็จะไดเปนแบบนี้

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

ผลลัพธเมื่อแสงผลผานการเรียกดูเว็บไซตผานบราวเซอรตางๆ

สรุป การนําเว็บไซตอัฟโหลดไปไวที่เว็บเซิรฟเวอร เพื่อเผยแพรสูระบบเครือขายอินเทอรเน็ตนั้น หาก หนวยงานใดไมมีเว็บเซิรฟเวอรเปนของตัวเอง ก็สามารถขอใชพื้นที่เว็บเซิรฟเวอรของผูอื่นหรือผูใหบริการ เว็บโฮสติ้ง ซึ่งจะมีทั้งแบบที่ตองเสียคาใชจาย และแบบที่ไมตองเสียคาใชจายใดๆ โดยผูใชบริการก็ตอง เลือกผูใชบริการที่เชื่อถือได ทั้งเรื่องความปลอดภัยของขอมูล รวมทั้งบริการเสริมตางๆ สวนการเชื่มโยงกับเครือขายสังคมออนไลน (Social Network) เชน เชื่อมโยงกิจกรรมตาง ๆ ระหวางเว็บไซตของคุณกับ กิจกรรมบน Facebook สามารถทําใหเครือขายของคุณโตไดเร็วกวาใชชอง ทางการทําเว็บไซตหรืออีเมลลอยางเดียว หรือการติดตั้ง Facebook fan box ไวในหนาเว็บไซต ซึ่งจะ ชวยโปรโมทเว็บไซต ของเราบน facebook ได และในทางกลับกันก็ยังสามารถโปรโมทกิจกรรมบน Facebook ของเราในเว็บ ของเราไดเชนกัน

233

234

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บรรณานุกรม

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่1

ชาญชัย ศุภอรรถกร. (2551). คูมือเรียนเขียนเว็บอีคอมเมิรชดวย PHP + MySQL. กรุงเทพฯ : สํานักพิมพซัคเซส มีเดีย. ธวัชชัย ศรีสุเทพ. (2548). BEGINNING WEB DESIGN. กรุงเทพฯ : มารคมายเว็บ. ธวัชชัย ศรีสุเทพ. (2544). คัมภีร WEB DESIGN. กรุงเทพฯ : สํานักพิมพโปรวิชั่น. บุญสืบ โพธิศรี และคณะ. (2550). การสรางเว็บเพจ. กรุงเทพฯ: ศูนยสงเสริมอาชีวะ. ปกรณ พาณิชยกิจ. (2541). เรียนการใชงานอินเทอรเน็ตและ World Wide Web ดวยตนเอง. กรุงเทพฯ : ซีเอ็ดยูเคชัน. ปาพจน หนุนภักดี. (2555). Graphic Design Principles Second edition หลักการและ กระบวนการออกแบบงานกราฟกดีไซน. นนทบุรี : ไอดีซีฯ . ประชา พฤกษประเสริฐ. (2550). สรางเว็บและเพิ่มลูกเลนดวย HTML&XHTML. พิมพครั้งที่ 2. กรุงเทพฯ : สํานักพิมพซัคเซส มีเดีย. ไพศาล ชนะกุล. (2553). อินเตอรเน็ตคืออะไร. สืบคนเมื่อ 3 มีนาคม 2553 จาก http://school.obec.go.th/mrPaisan/e-learning/information/content/internet1.html สุธี พงศาสกุลชัย และณรงค ล่ําดี. (2551). เว็บเทคโนโลยี (Web Technology). กรุงเทพฯ : สํานักพิมพเคทีพี. ศูนยเทคโนโลยีอิเล็กทรอนิกและคอมพิวเตอรแหงชาติ . (2553). การจัดลําดับโครงสรางของ ฐานขอมูล Domain Name. สืบคนเมื่อ 3 มีนาคม 2553 จากhttp://wiki.nectec.or.th/ ru/IT630_1_2008Students/NaManaSlideDNS. Alan Pipes. (2011). How to design Websites. London : Laurence King Pubishing Ltd .

June Cohen .(2003). The Unusually Useful Web Book. Indiana : New Raider .

Nico Macdonald. (2003). What is Web Design. Miles, Switzerland : Rotovision .

Steve Krug. (2006). Don't Make Me Think: A Common Sense Approach to Web Usability. Berkeley, Calif : New Riders Pub.

235

236

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่2

ธวัชชัย ศรีสุเทพ. (2544). คัมภีร WEB DESIGN. กรุงเทพฯ : สํานักพิมพโปรวิชั่น. บุญสืบ โพธิศรี์ และคณะ. (2550). การสรางเว็บเพจ. กรุงเทพฯ: ศูนยสงเสริมอาชีวะ. ปาพจน หนุนภักดี. (2555). Graphic Design Principles Second edition หลักการและ กระบวนการออกแบบงานกราฟกดีไซน. นนทบุรี : ไอดีซีฯ . สุวิช ถิระโคตร. (2554) เว็บไซต : ทฤษฎีและหลักการ. มหาสารคาม : สํานักพิมพ มหาวิทยาลัยสารคาม, Ben Hunt. (2004). 50 Web Design Profit Secrets. Kindle Edition Jakob Nielsen's Alertbox. (1999) Top 10 Mistakes in Web Design. สืบคนเมื่อ 3 มีนาคม 2554 article from May 2, จาก http://www.nngroup.com/articles/top-tenmistakes-revisited-three-years-later/ Penny McIntire. (2008). Visual Design for the Modern Web, Berkeley, CA: New Riders, Steve Krug. (2006). Don't Make Me Think: A Common Sense Approach to Web Usability. Berkeley, Calif : New Riders Pub.

บทที่3

กฤติญา สกลเสาวภาค ุ และคณะ (2552) Professional Web Design โรงเรียนอินเทอรเน็ตและ การออกแบบ. กรุงเทพฯ ซัคเซสกรุป ธวัชชัย ศรีสุเทพ. (2544). คัมภีร WEB DESIGN. กรุงเทพฯ : สํานักพิมพโปรวิชั่น. ปาพจน หนุนภักดี. (2555). Graphic Design Principles Second edition หลักการและ กระบวนการออกแบบงานกราฟกดีไซน. นนทบุรี : ไอดีซีฯ . ประเวศน วงษคําชัย. (2552). หลักการออกแบบและพัฒนาเว็บไซต . กรุงเทพฯ : มหาวิทยาลัยราชภัฏธนบุร,ี 2552 สุวิช ถิระโคตร. (2554) เว็บไซต : ทฤษฎีและหลักการ. มหาสารคาม : สํานักพิมพ มหาวิทยาลัยสารคาม, Penny McIntire. (2008). Visual Design for the Modern Web, Berkeley, CA: New Riders, Steve Krug. (2006). Don't Make Me Think: A Common Sense Approach to Web Usability. Berkeley, Calif : New Riders Pub.

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่4

ประเวศน วงษคําชัย และพิรพร หมุนสนิท. (2550). ใชงาน CSS แบบมืออาชีพ. กรุงเทพฯ : สํานักพิมพเคทีพี. สุธี พงศาสกุลชัย และณรงค ล่ําดี. (2551). เว็บเทคโนโลยี (Web Technology). กรุงเทพฯ : สํานักพิมพเคทีพี. สุวิช ถิระโคตร. (2554) เว็บไซต : ทฤษฎีและหลักการ. มหาสารคาม : สํานักพิมพ มหาวิทยาลัยสารคาม, Adam Kaplan. (2557). Modern Web Design Workshop. เขาถึงจาก http://adamkaplan.me/grid/ Penny McIntire. (2008). Visual Design for the Modern Web, Berkeley, CA: New Riders, เว็บไซต เหตุผลที่ Web Designer ควรเขียน HTML & CSS เปน สืบคนเมื่อ 3 มีนาคม 2554 จาก http://nicha.in.th/2011/09/reasons-why-web-designer-should-write-html-css/ Responsive web design: Key tips and approaches. เขาถึงจาก http://99designs.com/designerblog/2012/12/03/responsive-web-design-key-tips-and-approaches บทที่5

ธวัชชัย ศรีสุเทพ. (2544). คัมภีร WEB DESIGN. กรุงเทพฯ : สํานักพิมพโปรวิชั่น.

John McWade.(2009). Before & After: How to Design Cool Stuff. California, Peachpit Press.

Steve Krug. (2006). Don't Make Me Think: A Common Sense Approach to Web Usability. Berkeley, Calif : New Riders Pub. Cameron Chapman. (2010). Smashing Book #3 Color Theory For Designers: Creating Your Own Color Palettes. eBook formats as well (PDF, ePub and Kindle).

Cameron Chapman. (2010). Color Theory for Designers, Part 1: The Meaning of Color. eBook formats as well (PDF, ePub). เขาถึงจาก http://www.smashingmagazine.com /tag/colors/

237

238

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

บทที่6

ณัฐพงศ ศรีทองอินทร. (2554). รูปภาพในเว็บไซต ใชอยางไรใหถูกตอง. เขาถึงจาก http://www.genetic-plus.com/update.html?update=12 Carrie Cousins. (2013) Image Techniques for Creating Depth in Web Design. เขาถึงจาก http://about.me/carriecousins Ezequiel Bruni.(2013). How to Use Photography in Web Design. เขาถึงจาก http://webdesignerdepot.com/2013/how-to-use-photography-in-web-design John McWade.(2009). Before & After: How to Design Cool Stuff. California, Peachpit Press.

Josef Müller-Brockmann.(1961). The Graphic Artist and His Design Problems, Arthur Niggli Ltd, Switzerland, 1961, p 92 Marko Prljic. (2014). The Web Designers’ Guide to Photo Selection. เขาถึงจาก http://webdesign.tutsplus.com/tutorials/the-web-designers-guide-to-photoselection--cms-21592 บทที่7

ธนัชชัย ศรีสุเทพ.(2544) คัมภีร Web Design. กรุงเทพฯ : โปรวิชั่น . สาระนารูดานการพิมพ ประเภทของฟอนต (Type of Font). โรงพิมพวชั รินทร พี.พี. เขาถึงจาก http://www.wacharinprint.com/home/category/articles/ องคประกอบตางๆ ของตัวอักษรไทย. เขาถึงจาก http://www.f0nt.com/forum : Anatomy of Thai Letterform Carrie Cousins. (2013). 10 Tips for Designing with Type on a Photo. เขาถึงจาก http://designmodo.com/author/carrie/ John McWade.(2009). Before & After: How to Design Cool Stuff. California, Peachpit Press.

Paul Claudel .(2012). The secret of type is that it speaks. เขาถึงจาก http://blog.templatemonster.com/2012/05/16/font-psychology

บทที่ 8 การอัพโหลดเว็บไซต และการเชื่อมโยง Social Network

239

à » ¹ š Ë Å ¡ Ñ ã ¹ ¡ Ò Ã Í Í ¡ á º ºä Á Ç ‹ Ò ‹ ¨ Ð à » ¹ š ¡ Ò Ã ¤ ´ Ô ã ¹ ¡ Ò Ã Í Í ¡ á º º ¡ Ò Ã ¨ ´ Ñ Í § ¤ »

à Р¡ Í ºà Ã Í è × § ¢ Í § Ê Õ ¡ Ò Ã ã ª À Œ Ò ¾¡ Ò Ã ã ª µ Œ Ç Ñ Í ¡ Ñ É Ã « Ö è § à » š ¹ ¾ × é ¹ ° Ò ¹ · Ò § È Ô Å » Ð · Õ è ¤ Ç Ã µ Œ Í § à ¢ Œ Ò ã ¨á Å Ð Á Õ µ Ñ Ç Í Â ‹ Ò § à » š ¹ ¡ à ³ Õ È Ö ¡ É Ò« Ö è § à » š ¹ Ë Å Ñ ¡ ã ¹ ¡ Ò Ã · Ó § Ò ¹ Í Í ¡ á º º à Ç ç º ä « µ

I S B N : 9 7 8 6 1 6 9 2 2 9 6 0 5

Ê Í §à ¡ ÒÊ Œ Ò Á¡ à »à

Ø Å ¢ · è Õ 2 3 9¶ . ä ª Â ³ Ã § ¤

µ . ã ¹ à Á Í × §Í . à Á Í × § ¨ . ¹ ¤ Ã Ã Ò ª Ê Á Õ Ò3 0 0 0 0â · Ã È ¾ Ñ ·

0 4 49 5 1 2 9 3 Ê § Ç ¹ Å ¢ Ô Ê · Ô ¸ µ ì Ô Ò Á ¾ Ã Ð Ã Ò ª º Þ Ñ Þ µ Ñ Å Ô ¢ Ô Ê · Ô ¸ ì Ô ¾ . È .

2 5 3 7