My Friends

5750110011

5750110029

5750110036

Read More

Web Favorite

                                           
             

                                                       https://www.youtube.com/?gl=TH

                                                      http://www.chilindo.com/?feed=everyone

       
                                                        https://www.khaosod.co.th/

Read More

Tech &Tips

1.การเลือกThemeและตกแต่งเว็บไซต์..  เว็บมาสเตอร์สามารถเลือกรูปแบบของเว็บไซต์ หรือ Theme สำเร็จรูป จากระบบเว็บไซต์ VelaEasy เพื่อเป็นค่าเริ่มต้น และสามารถปรับเปลี่ยน แก้ไขการแสดงผลได้

Read More

Photo Album

   Photo Album...

Read More

Lecture

       ⌛  การออกเเบบหน้าเว็บไซต์

        หลักสำคัญในการออกเเบบหน้าเว็บไซต์ คือ การใช้รูปภาพเเละองค์ประกอบต่างๆ ร่วมกันเพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บให้น่าสนใจ บนพื้นฐานของความเรียบง่ายเเละสะดวกของผู้ใช้

                 ⌛เเนวคิดในการออกเเบบหน้าเว็บ

   ➪เรียนรู้จากเว็บไซต์ต่างๆ

   ➪ประยุกต์รูปแบบจากสื่อพิมพ์  ใช้เเบบจำลองเปรียบเทียบ (Metaphor)

   ➪ออกแบบอย่างสร้างสรรค์

·               ⌛ใช้เเบบจำลองเปรียบเทียบ (Metaphor)

การใช้เเบบจำลองเปรียบเทียบ คือการใช้สิ่งที่คุ้นเคในการอธิบายถึงสิ่งที่ไม่คุ้นเคย ไม่ว่าจะเป็น

รูปภาพจาก สิ่งพิมพ์หรือรูปแบบของร้านขายของ สิ่งสำคัญ คือ รูปแบบที่เลือกมาใช้ต้องมีลักษณะ

ที่คนส่วนใหญ่คุ้นเคย เข้าใจง่าย สนับสนุนเเนวคิดเเละส่งเสริมกระบวนการสื่อสารของเว็บ

ลักษณะต่างๆ ของเเบบจำลองการใช้เเบบจำลองมีด้วยกัน 3 ประเภท ดังนี้

1. จำลองเเบบการจัดระบบ (Organizational metaphor) คือใช้ประโยชน์จากความคุ้นเคยของ

การจัดระบบที่คุ้นเคย เพื่อให้ผู้ใช้เข้าถึงโครงสร้างในระบบใหม่ได้ง่ายขึ้น

2. จำลองการใช้งาน (Functional metaphor)

คือเชื่อมโยงการใช้งานที่สามารถทำได้ในชีวิตจริงกับการใช้งานเว็บ เช่น เว็บโรงภาพยนต์

3. จำลองลักษณะที่มองเห็น (Visual metaphor)

คือวิธีนี้จะเกี่ยวข้องกับสิ่งที่มีลัษณะที่คุ้นเคยของคนทั่วไป

·                 ⌛หลักการออกเเบบหน้าเว็บ

1. สร้างลำดับชั้นความสำคัญขององค์ประกอบจัดตำเเหน่งเเละลำดับขององค์ประกอบ เเสดงลำดับความสำคัญของข้อมูลที่ต้องการให้ผู้ใช้ได้รับเนื่องจากภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา เเละจากบน ลงล่าง จึงควรจัดวางสิ่งที่สำคัญไว้ที่ส่วนบนหรือด้านซ้ายของหน้าอยู่เสมอ

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

3. สร้างความสม่ำเสมอตลอดทั่วทั้งไซต์ความสม่ำเสมอของโครงสร้างเว็บเเละระบบเนวิเกชั่น ทำให้รู้สึกคุ้นเคยเเละสามารถคาดการณ์ลักษณะของเว็บได้ล่วงหน้า ทางด้านเทคนิดสามารถใช้ css กำหนดได้เพื่อให้เป็นมารตฐานเดียวกัน

4. จัดวางองค์ประกอบที่สำคัญไว้ในส่วนบนของหน้าเสมอควรประกอบด้วย

1.ชื่อของเว็บ เพื่อให้ผู้ใช้ได้รู้ทันทีว่ากำลังอยู่ในเว็บอะไร

                2.ชื่อหัวเรื่อง

                3.สิ่งสำคัญที่เราต้องการโปรโมตเว็บ

                4.ระบบเนวิเกชั่น

                5.สร้างจุดสนใจด้วยความเเตกต่างการจัดองค์ประกอบให้ภาพรวมของหน้ามีความเเตกต่างเป็นสิ่งสำคัญที่จะนำสายตาผู้อ่านไปยังบริเวณต่างๆ โดยการใช้สีที่ตัดกัน

                6. จัดเเต่งหน้าเว็บให้เป็นระเบียบ เนื้อหาในหน้าเว็บจำเป็นต้องอยู่ในรูปแบบที่ดูง่ายเเยกเป็นสัดส่วน เเละดูไม่เเน่นจนเกินไป

                7.ใช้กราฟฟิกอย่างเหมาะสม ควรใช้กราฟิกที่เป็นไอคอนปุ่ม ลายเส้น เเละสิ่งอื่นๆ ตามความเหมาะสมเเละไม่มากเกินไป เพื่อหลีกเลี่ยงโครงสร้างที่หยุ่งเหยิงเเละไม่เป็นระเบียบ ส่วนตัวอักษรขนาดใหญ่ด้วยคำสั่ง h1 เเละ h2 ควรใช้ในปริมาณน้อยๆ เพื่อให้ได้ผลลัพธ์สูงสุด

 ⌛การออกเเบบหน้าเว็บไซต์ให้เหมาะกับสิ่งแวดล้อม

ปัจจัยหลักที่เกี่ยวข้องกับการท่องเว็บไซต์

1. เบราเซอร์ที่ใช้

· เบราเซอร์ คือ โปรแกรที่ใช้เรียกดูเว็บ สามารถแสดงได้ทั้งตัวอักษรรูปภาพ และภาพเคลื่อนไหว เบราเซอร์ที่ได้ความนิยม เช่น Google Chrome, IE, Opera มาตรฐานกลางของเบราเซอร์ คือ W3C

· เป็นองค์กรที่กำหนดคุณสมบัติของเบราเซอร์ เราควรออกแบบตามคุณสมบัติดังนี้

1. สามารถใช้ได้กลับเบราเซอร์ได้ทุกรุ่น

2. เว็บไซต์สำหรับเบราเซอร์รุ่นล่าสุด

3.  เว็บไซต์ตามความสามารถของเบราเซอร์

4. เว็บไซต์ที่มีหลายรูปแบบ

2. ระบบปฏิบัติการของคอมพิวเตอร์

เป็นระบบที่เป็นปัจจัยหลักต่อ มีผลต่อการทำง่านของเบราเซอร์มาก โดยแต่ละระบบปฏิบัติการจะมีความแตกต่างกันในเรื่องของชนิดและรุ่นของเบราเซอร์ที่ใช้ได้ระดับความละเอียดของหน้าจอ ชุดสีของระบบ และชนิดของตัวอักษรที่มาพร้อมกับระบบ

3. ความละเอียดของหน้าจอ

ความละเอียดของหน้าจอ (monitor resolution) มีหน่วยเป้น pixel ความละเอียดของหน้าจอไม่ขึ้นกับขนาดของมอนิเตอร์ที่ใช้ แต่จะขึ้นกับประสิทธิภาพของการ์ดแสดงผลว่าสามารถทำได้ได้ละเอีวดแค่ไหนการออกแบบหน้าจอผู้ใช้ส่วนใหญ่จะชอบหน้าเว็บที่เปิดมาแล้วสมบูรณ์

4. จำนวนสีที่จอของผู้ใช้สามารถแสดงได้

มอนิเตอร์มีความสามารถให้การแสดงสีแตกต่างก่อน ขึ้นอยู่กับประสิทธิภาพของการ์ดจอ จำนวนหน่วยความจำในการ์ดจอมากขึ้นจะทำให้สามารถแสดงสีได้มากขึ้น จำนวนสีที่การ์ดจอสามารถแสดงได้นั้น ขึ้นอยู่กับค่าความละเอียดของสีที่เรียกว่า bit depth and color depth ซึ่งก็คือจำนวนบิตที่ใช้ในการเก็บข้อมูลแค่ละพิกเซลชุดสีสำหรับเว็บ (Web palette) หมายถึง ชุดสีจำนวน 216 สีที่มีอยู่เหมือนกันในระบบปฏิบัติการ Windows and Mac

5. ชนิดของตัวอักษรที่มีอยู่ในเครื่อง

ชนิดของตัวอักษรมี 2 แบบ

·  MS Sans Serif VS Microsoft Sans Serif

·  MS Sans Serif เป็นฟอนต์แบบชิตแมท ซึ่งออกแบบขึ้นจากจุดของพิกเซล โดยมีการออกแบบแต่ละตัวอักษรไว้เป็นขนาดที่แน่นอน Microsoft Sans Serif เป็นฟอนด์ที่มีโครงสร้างของอักขระเป็นแบบเวคเตอร์หรือลายเส้น โอยมีกรออกแบบเอาท์ไลน์ไว้เพียงแบบเดียวแต่สามารถปรับขนาดได้อย่างไม่จำกัดตัวอักษรแบบกราฟิก(Graphic Text)

6. ความเร็วในการเชื่อมต่ออินเตอร์เน็ต

7. ความสว่างและค่าความต่างของโทนสี

                         

      ⌛ การเลือกใช้สีสำหรับเว็บไซต์

 1.เลือกใช้สีสำหรับเว็บไซต์

·        สีสันในเว็บเพจเป็นสิ่งสำคัญมากในการดึงดูดความสนในของผู้ใช้

·        สามารถเลือกใช้สีได้กับทุกองค์ประกอบของเว็บเพจ

·        ใช้สีพื้นหลังใกล้เคียงกับสีตัวอักษร อาจสร้างความลำบากในการอ่าน

·        ใช้สีมากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้

·        การใช้สีกลมกลืนกันช่วยให้เว็บไซต์น่าดูน่าชมมากขึ้น

2.ประโยชน์ของสีในเว็บไซต์

·        สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้

·        สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

·        ใช้ในการดึงดูดความสนในของผู้อ่าน

·        สร้างอารมณ์โดยรวมของเว็บเพจได้

·        ช่วยสร้างความเป็นระเบียบให้กับข้อความต่าง ๆ ได้

·        ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานได้

3.การผสมสี (Color Mixing)

·        การผสมสีแบบบวก (Additive mixing) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ

·        การผสมสีแบบลบ (Subtraction mixing) จะไม่เกี่ยวข้องกับแสงแต่จะเกี่ยวข้องกับการดูดกลืนและสะท้อน แสงของวัตถุต่าง ๆ

·        การนำไปใช้งาน

·        การผสมแบบบวก จะนำไปใช้ในสื่อใด ๆ ที่ใช้แสงส่องออกมา เช่น จอโปรเจ็คเตอร์ ทีวี

·        การผสมแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่นภาพวาดของศิลปิน รูปปั้น

4.วงล้อของสี (Color Wheel)

·        เป็นรูปแบบการจัดลำดับเฉดสีอย่างมีเหตุผลและก็ง่ายต่อการนำไปใช้งาน จะมี 2 แบบ คือ วงล้อสีแบบลบ กับ วงล้อสีแบบบวก

·        สีที่เป็นกลาง(Neutral Color) สีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากกว่าสีอื่น คือ สีเทา สีขาวสีดำ สีอ่อน สีเข้ม และโทนสี(Tint Shade and Tone)

5.การผสมสีกลางเข้ากับสีบริสุทธิ์ 

·        จะเกิดเป็นสีต่าง ๆ เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน , สีบริสุทธิ์ ผสมกับสีเทา จะได้โทนสีระดับต่าง ๆ , สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม สีอ่อน สีเข้ม และโทนสี จะช่วยทำให้สามารถแสดงออกถึงความรู้สึกได้หลายแบบ

6.ความกลมกลืนของสี (Color Harmony)

·        การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผู้ชมได้

·        การใช้สีมากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม

 7.รูปแบบชุดสีพื้นฐาน

·        ชุดสีร้อน (Warm Color Scheme) จะสร้างความรู้สึกอบอุ่นสบาย และรู้สึกต้อนรับแก่ผู้ชม

·        ชุดสีเย็น(Cool Color Scheme) จะทำให้รู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย และตามหลักจิตวิทยาจะทำให้ดูเศร้า

·        ชุดสีแบบเดียว(Monochromatic Color Scheme) เป็นรูปแบบสีที่ง่ายที่สุด จะทำให้ขาดความสนใจจากผู้ชม

·        ชุดสีแบบสามเส้า(Tricia Color Scheme) เป็นชุดสีที่อยู่ที่มุมของสามเหลี่ยมด้านเท่าทั้งสาม จะทำให้รู้สึกว่า หน้าเว็บดูมีชีวิตชีวา

·        ชุดสีคลายคลึงกัน(Analogous Color Scheme) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ เช่น โทน ส้ม- เหลือง จะให้บรรยากาศต้อนรับและความอบอุ่น

·        ชุดสีตรงข้าม(Com;commentary Color Scheme) เช่นเว็บไซต์ที่ใช้สีน้ำเงินและส้มเป็นสีหลัก ซึ่งจะเป็นคู่สีที่ ตรงข้ามที่ตัดกันอย่างสะดุดตา

·        ชุดสีตรงข้ามข้างเคียง(Split Complementary Color Scheme) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม

·        ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double Split Complementary Color Scheme) จะมีความหลากหลายของสีมากขึ้น แต่จะสร้างความสดใสและความกลมกลืนของสีที่ลดลง ผลทางจิตวิทยาที่มีต่อสี (Color Psychology)   มนุยษ์เราจะตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง

8.สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่าง ๆ 

·   สีแดง คือ ความมีพลัง อำนาจ ความรัก ความอบอุ่น

·   สีน้ำเงิน คือ ความซื่อสัตย์ ความมั่นคง ความปลอดภัย

·   สีเขียว คือธรรมชาติ ความอบอุ่น การเริ่มต้นใหม่

·   สีเหลือง คือ ความสดใส่ ร่าเริง การมองโลกในแง่ดี

·   สีน้ำตาล คือ ความสะดวกสบาย ความมั่นคง ความน่าเชื่อถือ

·   สีขาว คือ ความบริสุทธิ์ ความไร้เรียงสา ความฉลาด

·   สีดำ คือ อำนาจ ความฉลาด ความเป็นเลิศ 

Read More