Lecture

               

รู้จักการออกแบบเว็บไซต์

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

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

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



                             รูปแสดงตัวอย่างเว็บไซต์ของ Adobe

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

องค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ

องค์ประกอบต่อไปนี้ถือเป็นพื้นฐานที่สำคัญของเว็บไซต์ที่ได้รับการออกแบบมาอย่างมีประสิทธิภาพ

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

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

3. ความเป็นเอกลักษณ์ (Identity)
             การออกแบบต้องคำนึงถึงลักษณะขององค์กร เนื่องจากรูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ และลักษณะขององค์กรนั้นได้

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

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

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

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

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

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


ความผิดพลาดในการออกแบบเว็บไซต์



        •ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม

        •ใช้เทคโนโลยีขั้นสูงโดยไม่จำเป็น

        •ใช้ตัวหนังสือหรือภาพเคลื่อนไหวตลอดเวลา

        •มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำและพิมพ์

        •ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ

        •มีความยาวของหน้ามากเกินไป

        •ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

        •ใช้สีของลิงค์ไม่เหมาะสม

        •ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย

        •เว็บเพจแสดงผลช้า

๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑

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

การจัดระบบโครงสร้างข้อมูล (Information Architecture)
                ในกระบวนการพัฒนาเว็บไซต์ที่กำลังจะได้ศึกษาต่อไปนี้ได้อาศัยหลักการจัดระบบโครงสร้างข้อมูลที่เรียกว่าInformation Architecture อยู่ในหลาย ๆ ส่วน ตั้งแต่ขั้นแรกจนถึงขั้นที่ได้เป็นรูปแบบโครงสร้างสุดท้าย (Final Architecture Plan) ซึ่งถือเป็นกระบวนการที่สำคัญมากที่จะทำให้เว็บไซต์บรรลุตามเป้าหมายที่ตั้งไว้

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

                 การจัดทำระบบโครงสร้างข้อมูลเป็นพื้นฐานสำคัญในการออกแบบเว็บไซต์ที่ดี ที่จะช่วยพัฒนาแบบแผนรายละเอียดข้อมูลในการออกแบบเว็บไซต์ ซึ่งได้แก่ รูปแบบการนำเสนอ ระบบการทำงาน แบบจำลอง ระบบเนวิเกชัน และอินเตอร์เฟสของเว็บ ดังนั้นการจัดระบบโครงสร้างข้อมูลจึงเป็นสิ่งสำคัญที่เกี่ยวข้องอยู่ในกระบวนการออกแบบเว็บไซต์


กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์



๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑๑


พื้นฐานสำคัญเกี่ยวกับเว็บ


ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต
               อินเตอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็นจำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ ไวด์ เว็บ (World Wide Web)

ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web)
                เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่า เว็บ (web) เป็นอินเตอร์เน็ตชนิหนึ่ง ที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ (Graphic) เสีย (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้นผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเตอร์เน็ตเท่า นั้น

เว็บไซต์ (Website) และเว็บเพจ (Webpage)
                   เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึงเอกสารหนึ่งหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือ ยูอาร์แอล (Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site)  เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่งเป็นหน้าที่ สำคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ

เว็บเบราเซอร์ (Web Browser)
               เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera

ภาษา HTML
             ภาษา HTML ย่อมาจากคำว่า Hypertext Markup Language เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือการแสดงผลโดยเว็บ เบราเซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ ภาพ และเสียง

โดเมนเนม (Domain Name)
              โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป คือ ชื่อเรียกเว็บไซต์นั่นเอง การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลกอินเตอร์เน็ต โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกับคนอื่น และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์ หรือเกี่ยวข้องกับสินค้าและบริการ ตลอดจนใช้คำง่าย ๆ ให้จำได้ เช่น sanook.com และ yahoo.com เป็นต้น

ความหมายของซับโดเมน

Com      กลุ่มองค์การค้า(Commercial)          
              เช่น www.ibm.com

edu        กลุ่มการศึกษา(Education)               
              เช่น www.chula.edu

gov        กลุ่มองค์การรัฐบาล(Government)   
              เช่น www.whitehouse.gov


mit         กลุ่มองค์การทหาร(Military)            
              เช่น www.dtic.mil


net         กลุ่มองค์การบริการเครือข่าย(Network Services)


org        กลุ่มองค์กรอื่นๆ (Organizations)       
             เช่น www.greenpeace.org



โดเมนที่เป็นชื่อย่อของประเทศที่น่าสนใจ
            โดเมนเนมเหล่านี้ จะใช้ต่อตอนท้ายสุด เพื่อสะดวกในการอ้างอิงว่าเป็นโฮสต์หรือเว็บไซต์ที่อยู่ในประเทศใด เช่น www.ksc.net.th จะเห็นว่า ลงท้ายด้วย th จะเป็นโดเมนของประเทศไทย

au      ออสเตรเลีย   Austtralia


fr        ฝรั่งเศส         France


hk       ฮ่องกง          Hong Kong


jp        ญี่ปุ่น            Japan


th        ไทย             Thailand


sg       สิงคโปร์       Singapore


uk       อังกฤษ        United Kingdom



ความหมายของซับโดเมน

ac     สถาบันการศึกษา(Academic)

co     องค์กรธุรกิจ(Commercail)


or      องค์กรอื่นๆที่ไม่แสวงหากำไร(Organizations)

net     ผู้วางระบบเน็ตเวิร์ค(Networking)

go      หน่วยงานรัฐบาล(Government)









Read comments

พวกเราเหล่า Autobot

พูดคุยกับ Autobots


ShoutMix chat widget
 
  • Home
  • Posts RSS
  • Comments RSS
  • Edit